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,93 @@
+import { useState } from 'react'
+import { Card, Icon, Menu, Text } from '../../src'
+import { Demo } from '../components/Demo'
+import { PropsTable } from '../components/PropsTable'
+import { Section } from '../components/Section'
+
+const ITEMS = [
+  {
+    key: 'content',
+    label: '内容',
+    icon: <Icon name="folder_more_line" />,
+    children: [
+      { key: 'recommend', label: '常用推荐' },
+      { key: 'movie', label: '推荐电影' },
+      { key: 'ces', label: 'CES 现场报道' },
+    ],
+  },
+  {
+    key: 'system',
+    label: '系统',
+    icon: <Icon name="settings_1_line" />,
+    children: [
+      { key: 'profile', label: '资料' },
+      { key: 'data', label: '内容库' },
+    ],
+  },
+  { key: 'about', label: '关于', icon: <Icon name="question_line" /> },
+]
+
+export function MenuSection() {
+  const [active, setActive] = useState('recommend')
+
+  return (
+    <Section
+      id="menu"
+      title="菜单"
+      api="Menu"
+      desc="侧栏菜单：一层折叠 + 两级结构，数据无关——业务树由页面转成 items。含 activeKey 的父级会自动展开。"
+    >
+      <Demo
+        title="基础用法"
+        desc="父级是折叠按钮（aria-expanded），子项是导航项（aria-current=page）。"
+        code={`const [active, setActive] = useState('recommend')
+
+<Menu items={ITEMS} activeKey={active} onSelect={setActive} />`}
+      >
+        <Card padding="sm" style={{ width: 240 }}>
+          <Menu items={ITEMS} activeKey={active} onSelect={setActive} />
+        </Card>
+        <Text size="sm" tone="muted">
+          当前：{active}
+        </Text>
+      </Demo>
+
+      <Demo
+        title="默认展开"
+        desc="defaultOpenKeys 指定初始展开的父级；用户手动折叠后以用户操作为准。"
+        code={`<Menu items={ITEMS} activeKey="data" onSelect={() => {}} defaultOpenKeys={['system']} />`}
+      >
+        <Card padding="sm" style={{ width: 240 }}>
+          <Menu items={ITEMS} activeKey="data" onSelect={() => undefined} defaultOpenKeys={['system']} />
+        </Card>
+      </Demo>
+
+      <Demo
+        title="行高"
+        desc="默认 36px；需要更松的密度（如资料较多、点击目标更大）时传 itemHeight。"
+        layout="column"
+        code={`<Menu items={ITEMS} activeKey="data" onSelect={() => {}} itemHeight={44} />`}
+      >
+        <Card padding="sm" style={{ width: 240 }}>
+          <Menu
+            items={ITEMS}
+            activeKey="data"
+            onSelect={() => undefined}
+            defaultOpenKeys={['system']}
+            itemHeight={44}
+          />
+        </Card>
+      </Demo>
+
+      <PropsTable
+        rows={[
+          { name: 'items', type: 'MenuItem[]', required: true, desc: '{ key, label, icon?, children? }' },
+          { name: 'activeKey', type: 'string', desc: '当前选中项' },
+          { name: 'onSelect', type: '(key: string) => void', required: true, desc: '选中回调' },
+          { name: 'defaultOpenKeys', type: 'string[]', desc: '初始展开的父级 key' },
+          { name: 'itemHeight', type: 'number', defaultValue: '36', desc: '一级菜单行高（px）' },
+        ]}
+      />
+    </Section>
+  )
+}