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,74 @@
+import { Card, Skeleton, Space } from '../../src'
+import { Demo } from '../components/Demo'
+import { PropsTable } from '../components/PropsTable'
+import { Section } from '../components/Section'
+
+export function Skeletons() {
+  return (
+    <Section
+      id="skeleton"
+      title="骨架屏"
+      api="Skeleton"
+      desc="内容加载前的占位。形状要和真实内容一致，否则加载完成后会跳动；整块区域用 aria-busy 标记，骨架本身对屏幕阅读器隐藏。"
+    >
+      <Demo
+        title="三种形状"
+        desc="text 是文本行（最后一行自动收短），rect 是封面/图片，circle 是头像。"
+        layout="column"
+        code={`<Skeleton variant="text" lines={3} />
+<Skeleton variant="rect" height={120} />
+<Skeleton variant="circle" width={48} height={48} />`}
+      >
+        <Space gap="lg" wrap>
+          <div style={{ width: 240 }}>
+            <Skeleton variant="text" lines={3} />
+          </div>
+          <Skeleton variant="rect" width={200} height={120} />
+          <Skeleton variant="circle" width={48} height={48} />
+        </Space>
+      </Demo>
+
+      <Demo
+        title="卡片骨架"
+        desc="按真实卡片的结构拼：头像 + 两行标题 + 封面 + 两行摘要。加载完成后把整块换成真实内容即可。"
+        layout="column"
+        code={`<Card aria-busy="true">
+  <Space gap="sm">
+    <Skeleton variant="circle" width={36} height={36} />
+    <div style={{ flex: 1 }}>
+      <Skeleton lines={2} />
+    </div>
+  </Space>
+  <Skeleton variant="rect" height={160} style={{ marginTop: 16 }} />
+  <Skeleton lines={2} style={{ marginTop: 16 }} />
+</Card>`}
+      >
+        <Space direction="column" gap="md" align="stretch">
+          <Card padding="lg" aria-busy="true">
+            <Space gap="sm">
+              <Skeleton variant="circle" width={36} height={36} />
+              <div style={{ flex: 1 }}>
+                <Skeleton lines={2} />
+              </div>
+            </Space>
+            <div style={{ marginTop: 'var(--su-space-4)' }}>
+              <Skeleton variant="rect" height={160} />
+            </div>
+            <div style={{ marginTop: 'var(--su-space-4)' }}>
+              <Skeleton lines={2} />
+            </div>
+          </Card>
+        </Space>
+      </Demo>
+
+      <PropsTable
+        rows={[
+          { name: 'variant', type: "'text' | 'rect' | 'circle'", defaultValue: "'text'", desc: '形状' },
+          { name: 'lines', type: 'number', defaultValue: '1', desc: '仅 text：行数' },
+          { name: 'width', type: 'number | string', desc: '宽度；rect 默认 100%，circle 默认 40' },
+          { name: 'height', type: 'number | string', desc: '高度；rect 默认 120' },
+        ]}
+      />
+    </Section>
+  )
+}