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,89 @@
+import { useState } from 'react'
+import { Button, Checkbox, Drawer, Space, Switch, Text } from '../../src'
+import { Demo } from '../components/Demo'
+import { PropsTable } from '../components/PropsTable'
+import { Section } from '../components/Section'
+
+export function Drawers() {
+  const [rightOpen, setRightOpen] = useState(false)
+  const [leftOpen, setLeftOpen] = useState(false)
+  const [autoSync, setAutoSync] = useState(true)
+  const [notify, setNotify] = useState(false)
+
+  return (
+    <Section
+      id="drawer"
+      title="抽屉"
+      api="Drawer"
+      desc="从侧边滑出的面板：筛选、设置、详情。基于原生 <dialog>（焦点陷阱、Esc、背景 inert），贴边全高，不打断主流程。"
+    >
+      <Demo
+        title="右侧设置"
+        desc="标题栏带关闭按钮；底部操作区可选。点遮罩或按 Esc 也会关闭。"
+        code={`const [open, setOpen] = useState(false)
+
+<Button onClick={() => setOpen(true)}>打开设置</Button>
+<Drawer open={open} onClose={() => setOpen(false)} title="偏好设置"
+  footer={<><Button variant="ghost" onClick={() => setOpen(false)}>取消</Button>
+          <Button onClick={() => setOpen(false)}>保存</Button></>}>
+  …
+</Drawer>`}
+      >
+        <Space gap="md" wrap>
+          <Button onClick={() => setRightOpen(true)}>打开设置</Button>
+          <Button variant="secondary" onClick={() => setLeftOpen(true)}>
+            左侧抽屉
+          </Button>
+        </Space>
+      </Demo>
+
+      <PropsTable
+        rows={[
+          { name: 'open', type: 'boolean', required: true, desc: '受控开关' },
+          { name: 'onClose', type: '() => void', required: true, desc: 'Esc / 遮罩 / 关闭按钮都会调用' },
+          { name: 'title', type: 'ReactNode', desc: '标题' },
+          { name: 'placement', type: "'right' | 'left'", defaultValue: "'right'", desc: '贴哪一边' },
+          { name: 'width', type: 'number', defaultValue: '360', desc: '宽度（px）' },
+          { name: 'footer', type: 'ReactNode', desc: '底部操作区' },
+        ]}
+      />
+
+      <Drawer
+        open={rightOpen}
+        onClose={() => setRightOpen(false)}
+        title="偏好设置"
+        footer={
+          <>
+            <Button variant="ghost" onClick={() => setRightOpen(false)}>
+              取消
+            </Button>
+            <Button onClick={() => setRightOpen(false)}>保存</Button>
+          </>
+        }
+      >
+        <Space direction="column" gap="lg" align="stretch">
+          <Space justify="between">
+            <Text>自动同步</Text>
+            <Switch checked={autoSync} onChange={setAutoSync} label="自动同步" />
+          </Space>
+          <Checkbox checked={notify} onChange={setNotify} label="每周摘要提醒" />
+          <Text size="sm" tone="muted">
+            抽屉内容通常是表单或筛选器；需要打断流程的确认请用 Modal。
+          </Text>
+        </Space>
+      </Drawer>
+
+      <Drawer
+        open={leftOpen}
+        onClose={() => setLeftOpen(false)}
+        placement="left"
+        width={300}
+        title="导航"
+      >
+        <Text size="sm" tone="muted">
+          左侧抽屉常用于移动端导航；桌面端优先用常驻侧栏。
+        </Text>
+      </Drawer>
+    </Section>
+  )
+}