宜博 / vokoworld

<script setup>
/**
 * UiGallery —— `@drama/ui` 全部 15 个组件的走廊。
 *
 * 用途只有一个：把每个组件的 variant / size / 状态在**任一主题下**真实渲染出来，一屏看完。
 * 顶部的主题切换器是这页留在包里的理由：组件是跨主题的（亮色 / dark / vg-studio），
 * 只在某个 app 的品牌主题下看过，等于没验。
 */
import { ref, watch } from 'vue'
import {
  Badge,
  Button,
  Card,
  ConfirmAction,
  Drawer,
  EmptyState,
  FormField,
  Input,
  Modal,
  Pagination,
  Select,
  Spinner,
  Tabs,
  Textarea,
  ToastHost,
  useToast,
} from '../src/index.js'

/** 走廊支持的主题：`light` 即 theme.css 的 :root 默认，另两个是 [data-theme] 换肤。 */
const THEMES = [
  { key: 'light', label: '亮色(默认)' },
  { key: 'dark', label: 'dark' },
  { key: 'vg-studio', label: 'vg-studio' },
]
const theme = ref('light')

watch(
  theme,
  (name) => {
    if (name === 'light') delete document.documentElement.dataset.theme
    else document.documentElement.dataset.theme = name
  },
  { immediate: true },
)

const toast = useToast()

const text = ref('claude-opus-4-6')
const emptyText = ref('')
const json = ref('{\n  "temperature": 0.7,\n  "max_tokens": 4096\n}')
const adapter = ref('anthropic')
const adapterOptions = [
  { value: 'anthropic', label: 'anthropic' },
  { value: 'openai', label: 'openai' },
  { value: 'gemini', label: 'gemini' },
  { value: 'deepseek', label: 'deepseek' },
]

const tab = ref('by-user')
const tabs = [
  { key: 'by-user', label: '按用户' },
  { key: 'by-model', label: '按模型' },
]

const page = ref(1)
const modalOpen = ref(false)
const drawerOpen = ref(false)

/** 二次确认的成功桩：延迟一拍以便看到 pending 态。 */
function succeedLater() {
  return new Promise((resolve) => setTimeout(resolve, 600))
}

/** 二次确认的失败桩：错误应显示在弹框里。 */
function failLater() {
  return new Promise((_resolve, reject) => {
    setTimeout(() => reject(new Error('key rotation refused: cooldown active')), 600)
  })
}
</script>

<template>
  <div class="gallery">
    <header class="gallery__bar">
      <h1 class="gallery__h1">
        @drama/ui 组件走廊
      </h1>
      <div
        class="gallery__themes"
        data-testid="theme-switcher"
      >
        <Button
          v-for="t in THEMES"
          :key="t.key"
          size="sm"
          :variant="theme === t.key ? 'primary' : 'ghost'"
          :data-testid="`theme-${t.key}`"
          @click="theme = t.key"
        >
          {{ t.label }}
        </Button>
      </div>
    </header>

    <Card>
      <template #header>
        Button — 4 variant × 3 size × 状态
      </template>
      <div class="row row--wrap">
        <Button variant="primary">
          primary
        </Button>
        <Button variant="secondary">
          secondary
        </Button>
        <Button variant="ghost">
          ghost
        </Button>
        <Button variant="danger">
          danger
        </Button>
      </div>
      <div class="row row--wrap">
        <Button size="sm">
          sm
        </Button>
        <Button size="md">
          md
        </Button>
        <Button size="lg">
          lg
        </Button>
        <Button disabled>
          disabled
        </Button>
        <Button loading>
          loading
        </Button>
      </div>
    </Card>

    <Card>
      <template #header>
        Card — header / body / footer 三个插槽（本页每一块都是 Card）
      </template>
      <div class="row">
        <Card :padded="false">
          <p class="muted">
            padded=false：body 无内边距。
          </p>
        </Card>
        <Card interactive>
          <p class="muted">
            interactive：hover 抬升 + 指针手势。
          </p>
          <template #footer>
            <Badge variant="info">
              footer 插槽
            </Badge>
          </template>
        </Card>
      </div>
    </Card>

    <Card>
      <template #header>
        Toast — useToast() 入队,ToastHost 渲染（右下角）
      </template>
      <div class="row row--wrap">
        <Button
          variant="secondary"
          @click="toast.success('密钥已保存')"
        >
          success
        </Button>
        <Button
          variant="danger"
          @click="toast.error('上游 429,已切备用 key')"
        >
          error
        </Button>
        <Button
          variant="ghost"
          @click="toast.info('这条 8 秒后消失', { duration: 8000 })"
        >
          info(8s)
        </Button>
      </div>
    </Card>

    <Card>
      <template #header>
        Input — size × 状态
      </template>
      <div class="row">
        <Input
          v-model="text"
          size="sm"
          placeholder="sm"
        />
        <Input
          v-model="text"
          size="md"
          placeholder="md"
        />
        <Input
          v-model="text"
          size="lg"
          placeholder="lg"
        />
      </div>
      <div class="row">
        <Input
          v-model="emptyText"
          placeholder="placeholder 态"
        />
        <Input
          v-model="text"
          invalid
        />
        <Input
          v-model="text"
          disabled
        />
        <Input
          v-model="emptyText"
          type="password"
          placeholder="password"
        />
      </div>
    </Card>

    <Card>
      <template #header>
        Textarea — 常态 / invalid / disabled
      </template>
      <div class="row">
        <Textarea
          v-model="json"
          :rows="5"
        />
        <Textarea
          v-model="json"
          :rows="5"
          invalid
        />
        <Textarea
          v-model="json"
          :rows="5"
          disabled
        />
      </div>
    </Card>

    <Card>
      <template #header>
        Select — size × 状态
      </template>
      <div class="row">
        <Select
          v-model="adapter"
          :options="adapterOptions"
          size="sm"
        />
        <Select
          v-model="adapter"
          :options="adapterOptions"
          size="md"
        />
        <Select
          v-model="adapter"
          :options="adapterOptions"
          size="lg"
        />
      </div>
      <div class="row">
        <Select
          :options="adapterOptions"
          model-value=""
          placeholder="选择 adapter"
        />
        <Select
          v-model="adapter"
          :options="adapterOptions"
          invalid
        />
        <Select
          v-model="adapter"
          :options="adapterOptions"
          disabled
        />
      </div>
    </Card>

    <Card>
      <template #header>
        FormField — label / required / hint / error
      </template>
      <div class="row">
        <FormField
          label="厂商名"
          hint="展示用，不影响路由"
        >
          <Input v-model="text" />
        </FormField>
        <FormField
          label="API Key"
          required
          error="密钥不能为空"
        >
          <Input
            v-model="emptyText"
            invalid
          />
        </FormField>
        <FormField
          label="Adapter"
          required
        >
          <Select
            v-model="adapter"
            :options="adapterOptions"
          />
        </FormField>
        <FormField
          label="params"
          hint="JSON,合并进请求体"
        >
          <Textarea
            v-model="json"
            :rows="3"
          />
        </FormField>
      </div>
    </Card>

    <Card>
      <template #header>
        Badge — 5 variant × 2 size
      </template>
      <div class="row row--wrap">
        <Badge variant="neutral">
          停用
        </Badge>
        <Badge variant="success">
          ok
        </Badge>
        <Badge variant="danger">
          error
        </Badge>
        <Badge variant="warning">
          冷却中
        </Badge>
        <Badge variant="info">
          aborted
        </Badge>
      </div>
      <div class="row row--wrap">
        <Badge
          variant="neutral"
          size="sm"
        >
          停用
        </Badge>
        <Badge
          variant="success"
          size="sm"
        >
          ok
        </Badge>
        <Badge
          variant="danger"
          size="sm"
        >
          error
        </Badge>
        <Badge
          variant="warning"
          size="sm"
        >
          冷却中
        </Badge>
        <Badge
          variant="info"
          size="sm"
        >
          aborted
        </Badge>
      </div>
    </Card>

    <Card>
      <template #header>
        Tabs — v-model + 按 key 命名的插槽
      </template>
      <Tabs
        v-model="tab"
        :tabs="tabs"
      >
        <template #by-user>
          <p>当前 tab:by-user。这块内容来自 <code>#by-user</code> 插槽。</p>
        </template>
        <template #by-model>
          <p>当前 tab:by-model。这块内容来自 <code>#by-model</code> 插槽。</p>
        </template>
      </Tabs>
    </Card>

    <Card>
      <template #header>
        Pagination — 游标式(上一页/下一页),无页码
      </template>
      <p class="muted">
        当前第 {{ page }} 段(仅为演示计数,组件本身不认识页码)
      </p>
      <Pagination
        :has-prev="page > 1"
        has-next
        prev-label="上一页"
        next-label="下一页"
        @prev="page -= 1"
        @next="page += 1"
      />
      <p class="muted">
        首段(无上一页) / 末段(无下一页) / loading:
      </p>
      <Pagination
        has-next
        prev-label="上一页"
        next-label="下一页"
      />
      <Pagination
        has-prev
        prev-label="上一页"
        next-label="下一页"
      />
      <Pagination
        has-prev
        has-next
        loading
        prev-label="上一页"
        next-label="下一页"
      />
    </Card>

    <Card>
      <template #header>
        EmptyState — 带 action / 不带 action
      </template>
      <div class="row">
        <EmptyState
          title="还没有厂商"
          description="接一个上游厂商后,模型与价目才有地方挂。"
        >
          <template #action>
            <Button size="sm">
              接入厂商
            </Button>
          </template>
        </EmptyState>
        <EmptyState title="这段时间没有调用记录" />
      </div>
    </Card>

    <Card>
      <template #header>
        Spinner — sm / md / lg
      </template>
      <div class="row row--wrap">
        <Spinner size="sm" />
        <Spinner size="md" />
        <Spinner size="lg" />
      </div>
    </Card>

    <Card>
      <template #header>
        ConfirmAction — 普通 / 危险 / 会失败的
      </template>
      <div class="row row--wrap">
        <ConfirmAction
          label="重置冷却"
          confirm-text="确认重置这把 key 的冷却?"
          cancel-label="取消"
          ok-label="确认"
          pending-label="执行中…"
          :action="succeedLater"
        />
        <ConfirmAction
          label="停用密钥"
          danger
          confirm-text="停用后正在跑的请求会被拒。确认?"
          cancel-label="取消"
          ok-label="停用"
          pending-label="执行中…"
          :action="succeedLater"
        />
        <ConfirmAction
          label="轮换密钥(会报错)"
          danger
          confirm-text="点确认会失败,错误应显示在这个弹框里。"
          cancel-label="取消"
          ok-label="轮换"
          pending-label="执行中…"
          :action="failLater"
        />
      </div>
    </Card>

    <Card>
      <template #header>
        Drawer / Modal — 焦点陷阱 + ESC 关闭（共用 use-focus-trap.js）
      </template>
      <div class="row row--wrap">
        <Button
          data-testid="open-drawer"
          @click="drawerOpen = true"
        >
          打开 Drawer
        </Button>
        <Button
          variant="secondary"
          data-testid="open-modal"
          @click="modalOpen = true"
        >
          打开 Modal(对照)
        </Button>
      </div>
    </Card>

    <Drawer
      v-model:open="drawerOpen"
      title="调用详情 call_01H..."
      width="520px"
    >
      <div class="stack">
        <FormField label="模型">
          <Input v-model="text" />
        </FormField>
        <FormField label="请求体">
          <Textarea
            v-model="json"
            :rows="8"
          />
        </FormField>
        <div class="row row--wrap">
          <Badge variant="success">
            ok
          </Badge>
          <Badge variant="warning">
            重试 1 次
          </Badge>
        </div>
      </div>
      <template #footer>
        <Button
          variant="ghost"
          @click="drawerOpen = false"
        >
          关闭
        </Button>
        <Button>重放这次调用</Button>
      </template>
    </Drawer>

    <Modal
      v-model:open="modalOpen"
      title="对照用的 Modal"
    >
      <p>Drawer 的 ESC 关闭与 Tab 焦点陷阱和它是同一份实现（use-focus-trap.js）。</p>
      <template #footer>
        <Button
          variant="secondary"
          @click="modalOpen = false"
        >
          知道了
        </Button>
      </template>
    </Modal>

    <ToastHost />
  </div>
</template>

<style scoped>
.gallery {
  display: grid;
  gap: var(--drama-space-xl);
  padding: var(--drama-space-xl);
  max-width: 1200px;
  margin: 0 auto;
}

.gallery__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--drama-space-lg);
  flex-wrap: wrap;
}

.gallery__h1 {
  margin: 0;
  font-family: var(--drama-font-family-heading);
  font-size: var(--drama-font-size-xl);
}

.gallery__themes {
  display: flex;
  gap: var(--drama-space-sm);
}

.stack {
  display: grid;
  gap: var(--drama-space-lg);
}

.row {
  display: flex;
  align-items: flex-start;
  gap: var(--drama-space-lg);
}

.row + .row {
  margin-top: var(--drama-space-lg);
}

.row > * {
  flex: 1;
  min-width: 0;
}

.row--wrap {
  flex-wrap: wrap;
  align-items: center;
}

.row--wrap > * {
  flex: 0 0 auto;
}

.muted {
  color: var(--drama-color-text-muted);
  font-size: var(--drama-font-size-sm);
}
</style>