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,81 @@
+import { useState } from 'react'
+import { Button, Space, Spinner, Text } from '../../src'
+import { Demo } from '../components/Demo'
+import { PropsTable } from '../components/PropsTable'
+import { Section } from '../components/Section'
+
+export function Spinners() {
+  const [loading, setLoading] = useState(false)
+
+  return (
+    <Section
+      id="spinner"
+      title="加载中"
+      api="Spinner"
+      desc="整块区域或行内的加载指示。按钮内部的 loading 由 Button 自己处理，文字占位用 Skeleton——三者分工不同。"
+    >
+      <Demo
+        title="尺寸"
+        desc="sm 14px 用于行内（跟着文字基线走），md 20px 用于区块。"
+        code={`<Spinner size="sm" />
+<Spinner size="md" />`}
+      >
+        <Space gap="lg">
+          <Spinner size="sm" />
+          <Spinner size="md" />
+        </Space>
+      </Demo>
+
+      <Demo
+        title="行内状态"
+        desc="和一句说明放在一起时，用 Space 排；Spinner 自带 role=status，读屏会读出 label。"
+        layout="column"
+        code={`<Space gap="sm">
+  <Spinner size="sm" label="正在同步" />
+  <Text size="sm" tone="sub">正在同步内容库…</Text>
+</Space>`}
+      >
+        <Space gap="sm">
+          <Spinner size="sm" label="正在同步" />
+          <Text size="sm" tone="sub">
+            正在同步内容库…
+          </Text>
+        </Space>
+      </Demo>
+
+      <Demo
+        title="整块加载"
+        desc="区域级加载时给出一个居中的 Spinner + 文案；按钮里的 loading 不要用 Spinner 代替。"
+        layout="column"
+        code={`{loading && (
+  <Space direction="column" gap="sm" justify="center">
+    <Spinner />
+    <Text size="sm" tone="muted">正在读取…</Text>
+  </Space>
+)}`}
+      >
+        <Space direction="column" gap="sm" align="center">
+          <Button size="sm" variant="secondary" loading={loading} onClick={() => {
+            setLoading(true)
+            window.setTimeout(() => setLoading(false), 1200)
+          }}>
+            模拟加载
+          </Button>
+          <Space gap="sm">
+            <Spinner />
+            <Text size="sm" tone="muted">
+              {loading ? '正在读取…' : '待命中'}
+            </Text>
+          </Space>
+        </Space>
+      </Demo>
+
+      <PropsTable
+        rows={[
+          { name: 'size', type: "'sm' | 'md'", defaultValue: "'md'", desc: '14 / 20px' },
+          { name: 'label', type: 'string', defaultValue: "'加载中'", desc: '无障碍名称' },
+        ]}
+      />
+    </Section>
+  )
+}