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,92 @@
+import { Button, IconButton, Icon, Popover, Space, Text, Tooltip } from '../../src'
+import { Demo } from '../components/Demo'
+import { PropsTable } from '../components/PropsTable'
+import { Section } from '../components/Section'
+
+export function Tooltips() {
+  return (
+    <Section
+      id="tooltip"
+      title="工具提示"
+      api="Tooltip / Popover"
+      desc="Tooltip 是 hover / 聚焦时出现的一行文字；Popover 是点击展开的小面板。两者都只做轻量内容，复杂交互请用 Drawer / Modal。"
+    >
+      <Demo
+        title="文字提示"
+        desc="纯 CSS 定位（top / bottom），触发元素建议是可聚焦的按钮或链接；键盘聚焦时同样出现。"
+        code={`<Tooltip content="重新扫描项目">
+  <IconButton label="刷新" icon={<Icon name="refresh_3_line" />} />
+</Tooltip>
+
+<Tooltip content="出现在下方" placement="bottom">
+  <Button variant="secondary">下方提示</Button>
+</Tooltip>`}
+      >
+        <Space gap="lg">
+          <Tooltip content="重新扫描项目">
+            <IconButton label="刷新" icon={<Icon name="refresh_3_line" />} variant="soft" />
+          </Tooltip>
+          <Tooltip content="出现在下方" placement="bottom">
+            <Button variant="secondary">下方提示</Button>
+          </Tooltip>
+        </Space>
+      </Demo>
+
+      <Demo
+        title="气泡卡片"
+        desc="点击触发器展开，点外部或 Esc 关闭；面板里可以放说明、链接或简单表单。"
+        code={`<Popover
+  content={<Text size="sm">改动会立即写入 data/stash.db，5 秒内推送前端。</Text>}
+>
+  <Button variant="ghost">说明</Button>
+</Popover>`}
+      >
+        <Space gap="lg">
+          <Popover
+            content={
+              <Text size="sm" tone="sub">
+                改动会立即写入 data/stash.db，服务端 5 秒内通过 SSE 推送前端。
+              </Text>
+            }
+          >
+            <Button variant="ghost">说明</Button>
+          </Popover>
+          <Popover
+            placement="bottom-end"
+            content={
+              <Space direction="column" gap="sm" align="start">
+                <Text size="sm" strong>
+                  快捷操作
+                </Text>
+                <Button size="sm" variant="ghost">
+                  重新扫描
+                </Button>
+                <Button size="sm" variant="ghost">
+                  打开内容库
+                </Button>
+              </Space>
+            }
+          >
+            <Button variant="secondary">更多操作</Button>
+          </Popover>
+        </Space>
+      </Demo>
+
+      <PropsTable
+        rows={[
+          { name: 'content', type: 'ReactNode', required: true, desc: '提示内容' },
+          { name: 'placement', type: "'top' | 'bottom'", defaultValue: "'top'", desc: '出现方向' },
+          { name: 'children', type: 'ReactNode', required: true, desc: '触发元素（建议可聚焦）' },
+        ]}
+      />
+
+      <PropsTable
+        rows={[
+          { name: 'content', type: 'ReactNode', required: true, desc: '面板内容' },
+          { name: 'children', type: 'ReactNode', required: true, desc: '触发器' },
+          { name: 'placement', type: "'bottom-start' | 'bottom-end'", defaultValue: "'bottom-start'", desc: '对齐方式' },
+        ]}
+      />
+    </Section>
+  )
+}