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,94 @@
+import { Avatar, Grid, Icon, Space } from '../../src'
+import { Demo } from '../components/Demo'
+import { PropsTable } from '../components/PropsTable'
+import { Section } from '../components/Section'
+import { DEMO_APPS, DEMO_COVER } from '../data/demo'
+
+export function Avatars() {
+  return (
+    <Section
+      id="avatars"
+      title="头像"
+      api="Avatar"
+      desc="有图显示图片，没图（或图片加载失败）退化成首字色块——列表里最常见的两种状态都由它兜住。"
+    >
+      <Demo
+        title="尺寸与形状"
+        desc="sm 24px 用于紧凑列表，md 36px、lg 48px 用于卡片与详情头部；圆形用于人 / 应用，方形用于图标类封面。"
+        code={`<Avatar size="sm" fallback="G" />
+<Avatar size="md" fallback="G" />
+<Avatar size="lg" fallback="G" />`}
+      >
+        <Avatar size="sm" fallback="G" />
+        <Avatar size="md" fallback="G" />
+        <Avatar size="lg" fallback="G" />
+        <Avatar shape="square" size="md" fallback="N" />
+        <Avatar shape="square" size="lg" fallback="F" />
+      </Demo>
+
+      <Demo
+        title="图片与降级"
+        desc="第三张故意给一个坏地址，用来验证加载失败会退回首字；最后一颗带认证角标。"
+        code={`<Avatar src={cover} alt="GitHub" fallback="G" />
+<Avatar src="/broken.png" fallback="?" />
+<Avatar verified size="lg" fallback="S" />`}
+      >
+        <Avatar src={DEMO_COVER} alt="渐变封面" size="lg" />
+        <Avatar src="/not-exist.png" alt="" size="lg" fallback="?" />
+        <Avatar verified size="lg" fallback="S" />
+        <Avatar verified size="md" fallback="B" />
+      </Demo>
+
+      <Demo
+        title="列表里的组合"
+        desc="头像 + 两行文字是应用条目的基本骨架：这一行本身不带底色和描边，靠间距分组。"
+        layout="column"
+        code={`<Space gap="md">
+  <Avatar size="lg" fallback="G" />
+  <Space direction="column" gap="xs" align="start">
+    <strong>GitHub</strong>
+    <span>代码托管与开源社区</span>
+  </Space>
+</Space>`}
+      >
+        <Grid columns={2} gap="lg">
+          {DEMO_APPS.slice(0, 4).map((app) => (
+            <Space key={app.id} gap="md">
+              <Avatar size="lg" fallback={app.icon} />
+              <Space direction="column" gap="xs" align="start">
+                <span style={{ fontWeight: 500 }}>{app.name}</span>
+                <span style={{ color: 'var(--su-text-muted)', fontSize: 12 }}>{app.desc}</span>
+              </Space>
+            </Space>
+          ))}
+        </Grid>
+      </Demo>
+
+      <Demo
+        title="大尺寸与底色"
+        desc="xl 64px 用于资料卡；无图时可以用 icon 代替字符，tone='primary' 换成品牌浅渐变底。"
+        code={`<Avatar size="xl" tone="primary" icon={<Icon name="user_3_line" />} verified />
+<Avatar size="xl" fallback="S" verified />`}
+      >
+        <Space gap="lg" align="end">
+          <Avatar size="xl" tone="primary" icon={<Icon name="user_3_line" />} verified />
+          <Avatar size="xl" fallback="S" verified />
+          <Avatar size="lg" tone="primary" icon={<Icon name="folder_more_line" />} />
+        </Space>
+      </Demo>
+
+      <PropsTable
+        rows={[
+          { name: 'src', type: 'string', desc: '图片地址；加载失败自动降级' },
+          { name: 'alt', type: 'string', defaultValue: "''", desc: '图片替代文本' },
+          { name: 'fallback', type: 'string', defaultValue: "'•'", desc: '无图时的字符' },
+          { name: 'icon', type: 'ReactNode', desc: '无图时的图标（优先于 fallback）' },
+          { name: 'size', type: "'sm' | 'md' | 'lg' | 'xl'", defaultValue: "'md'", desc: '24 / 36 / 48 / 64px' },
+          { name: 'tone', type: "'neutral' | 'primary'", defaultValue: "'neutral'", desc: '无图底色：浅灰 / 品牌浅渐变' },
+          { name: 'shape', type: "'circle' | 'square'", defaultValue: "'circle'", desc: '圆形 / 圆角方形' },
+          { name: 'verified', type: 'boolean', defaultValue: 'false', desc: '右下角认证角标' },
+        ]}
+      />
+    </Section>
+  )
+}