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,60 @@
+import { Button, Space, toast } from '../../src'
+import { Demo } from '../components/Demo'
+import { PropsTable } from '../components/PropsTable'
+import { Section } from '../components/Section'
+
+export function Toasts() {
+  return (
+    <Section
+      id="toast"
+      title="轻提示"
+      api="toast / Toaster"
+      desc="操作反馈，几秒后自动消失。命令式调用：应用根节点挂一次 <Toaster />，任意位置 toast('已保存')。页面内常驻提示用 Notice。"
+    >
+      <Demo
+        title="三种语气"
+        desc="success / error 用对应图标与颜色；info 是中性提示。默认 2.4 秒后消失。"
+        code={`toast('已复制到剪贴板')
+toast.success('已保存')
+toast.error('保存失败：内容库被占用')`}
+      >
+        <Space gap="md" wrap>
+          <Button variant="secondary" onClick={() => toast('已复制到剪贴板')}>
+            info
+          </Button>
+          <Button variant="secondary" onClick={() => toast.success('已保存')}>
+            success
+          </Button>
+          <Button variant="secondary" onClick={() => toast.error('保存失败：内容库被占用')}>
+            error
+          </Button>
+        </Space>
+      </Demo>
+
+      <Demo
+        title="自定义时长"
+        desc="duration 毫秒；返回的 id 可以配合 dismissToast 手动关闭。"
+        code={`const id = toast.success('稍后会消失', { duration: 1000 })
+dismissToast(id)`}
+      >
+        <Space gap="md" wrap>
+          <Button variant="ghost" onClick={() => toast('这条只显示 1 秒', { duration: 1000 })}>
+            1 秒后消失
+          </Button>
+          <Button variant="ghost" onClick={() => toast.success('固定 5 秒', { duration: 5000 })}>
+            5 秒后消失
+          </Button>
+        </Space>
+      </Demo>
+
+      <PropsTable
+        rows={[
+          { name: 'toast(message, options?)', type: '(string, { tone?, duration? }) => number', desc: '弹一条提示，返回 id' },
+          { name: 'toast.success / .error', type: '(message, options?) => number', desc: '语气快捷方法' },
+          { name: 'dismissToast(id)', type: '(id: number) => void', desc: '手动关闭' },
+          { name: '<Toaster />', type: 'ReactNode', desc: '渲染容器，整个应用只挂一次' },
+        ]}
+      />
+    </Section>
+  )
+}