feat: stash-ui 0.1.0（40 个组件 + 文档站 + 主题机制）

2026-10-28 20:44:18 +08:00
commit 52296b3368
153 changed files with 17129 additions and 0 deletions
@@ -0,0 +1,67 @@
+import { useState } from 'react'
+import { Text, Tabs } from '../../src'
+import { Demo } from '../components/Demo'
+import { PropsTable } from '../components/PropsTable'
+import { Section } from '../components/Section'
+
+const ITEMS = [
+  { key: 'detail', label: '详情' },
+  { key: 'comments', label: '评论 6' },
+  { key: 'history', label: '历史（暂不可用）', disabled: true },
+]
+
+export function TabsSection() {
+  const [tab, setTab] = useState('detail')
+  const [pillTab, setPillTab] = useState('all')
+
+  return (
+    <Section
+      id="tabs"
+      title="标签页"
+      api="Tabs"
+      desc="在几块内容之间切换。只负责标签栏，面板由页面渲染；键盘 ← → 移动、Home/End 跳首尾。"
+    >
+      <Demo
+        title="下划线（默认）"
+        desc="适合详情页、设置页这类页面级分区；选中项用 2px 主色下划线标记。"
+        layout="column"
+        code={`const [tab, setTab] = useState('detail')
+
+<Tabs items={ITEMS} activeKey={tab} onChange={setTab} />
+<div role="tabpanel" style={{ paddingTop: 12 }}>{tab} 面板</div>`}
+      >
+        <Tabs items={ITEMS} activeKey={tab} onChange={setTab} />
+        <Text size="sm" tone="muted">
+          当前面板：{tab}
+        </Text>
+      </Demo>
+
+      <Demo
+        title="胶囊"
+        desc="pill 变体放在浅底容器里，适合卡片内的次级切换。"
+        layout="column"
+        code={`<Tabs variant="pill" items={items} activeKey={pillTab} onChange={setPillTab} />`}
+      >
+        <Tabs
+          variant="pill"
+          items={[
+            { key: 'all', label: '全部' },
+            { key: 'published', label: '已发布' },
+            { key: 'draft', label: '草稿' },
+          ]}
+          activeKey={pillTab}
+          onChange={setPillTab}
+        />
+      </Demo>
+
+      <PropsTable
+        rows={[
+          { name: 'items', type: 'TabItem[]', required: true, desc: '{ key, label, disabled? }' },
+          { name: 'activeKey', type: 'string', required: true, desc: '当前标签' },
+          { name: 'onChange', type: '(key: string) => void', required: true, desc: '切换回调' },
+          { name: 'variant', type: "'line' | 'pill'", defaultValue: "'line'", desc: '下划线 / 胶囊' },
+        ]}
+      />
+    </Section>
+  )
+}