feat: stash-ui 0.1.0（40 个组件 + 文档站 + 主题机制）

site/sections/Composition.tsx

@@ -0,0 +1,167 @@
+import {
+  Avatar,
+  Badge,
+  Button,
+  Card,
+  Grid,
+  Icon,
+  IconButton,
+  Input,
+  ItemBadge,
+  Space,
+  Tag,
+} from '../../src'
+import { Demo } from '../components/Demo'
+import { Section } from '../components/Section'
+import { DEMO_APPS, DEMO_COVER, DEMO_POSTERS } from '../data/demo'
+import styles from './Composition.module.css'
+
+/**
+ * 组合示例：把基础组件拼成真实页面里的几块结构。
+ *
+ * 这一节不放新组件，只演示「怎么拼」——
+ * 后期做新页面时，从这里复制结构再改数据即可。
+ */
+export function Composition() {
+  return (
+    <Section
+      id="composition"
+      title="组合示例"
+      api="页面配方"
+      desc="基础组件只提供外观与行为，页面结构靠组合。下面三块都是 Stash 控制台里真实存在的结构，可以直接当模板用。"
+    >
+      <Demo
+        title="分区卡片（首页）"
+        desc="Card 提供容器，标题栏由「色条 + 标题 + 角标 + 更多按钮」拼出来，内容区用 Grid 排应用行。角标压在标题右上角，靠绝对定位。"
+        muted
+        layout="column"
+        code={`<Card>
+  <header className={styles.sectionHead}>
+    <Space gap="md">
+      <span className={styles.bar} />
+      <ItemBadge tone="sticky">置顶</ItemBadge>
+      <span className={styles.titleWrap}>
+        <span className={styles.title}>常用站点</span>
+        <Badge count={18} className={styles.badge} />
+      </span>
+    </Space>
+    <IconButton label="查看全部" icon={<Icon name="more_3_line" />} />
+  </header>
+
+  <Grid columns={4} gap="md">
+    {apps.map((app) => (
+      <a className={styles.appRow} key={app.id} href="#">
+        <Avatar size="lg" fallback={app.icon} />
+        <span className={styles.appInfo}>
+          <span className={styles.appName}>{app.name}</span>
+          <span className={styles.appDesc}>{app.desc}</span>
+        </span>
+      </a>
+    ))}
+  </Grid>
+</Card>`}
+      >
+        <Card padding="lg">
+          <header className={styles.sectionHead}>
+            <div className={styles.headMain}>
+              <span className={styles.bar} />
+              <ItemBadge tone="sticky">置顶</ItemBadge>
+              <span className={styles.titleWrap}>
+                <span className={styles.title}>常用站点</span>
+                <Badge count={18} className={styles.badge} />
+              </span>
+            </div>
+            <IconButton label="查看全部" icon={<Icon name="more_3_line" />} />
+          </header>
+
+          <Grid columns={4} gap="md">
+            {DEMO_APPS.slice(0, 4).map((app) => (
+              <a
+                className={styles.appRow}
+                key={app.id}
+                href="#composition"
+                onClick={(event) => event.preventDefault()}
+              >
+                <Avatar size="lg" fallback={app.icon} />
+                <span className={styles.appInfo}>
+                  <span className={styles.appName}>{app.name}</span>
+                  <span className={styles.appDesc}>{app.desc}</span>
+                </span>
+              </a>
+            ))}
+          </Grid>
+        </Card>
+      </Demo>
+
+      <Demo
+        title="筛选工具条"
+        desc="搜索框 + 条件标签 + 操作按钮：左侧输入，右侧动作，中间用 Space 的 justify=between 撑开。"
+        muted
+        layout="column"
+        code={`<Card padding="sm">
+  <Space justify="between" wrap>
+    <Space gap="sm">
+      <Input icon="search_3_line" placeholder="筛选项目…" />
+      <Tag tone="neutral">全部 42</Tag>
+    </Space>
+    <Space gap="sm">
+      <Button variant="ghost" size="sm">重置</Button>
+      <Button size="sm">应用</Button>
+    </Space>
+  </Space>
+</Card>`}
+      >
+        <Card padding="sm">
+          <Space justify="between" wrap>
+            <Space gap="sm">
+              <Input icon="search_3_line" placeholder="筛选项目…" style={{ width: 220 }} />
+              <Tag tone="neutral">全部 42</Tag>
+            </Space>
+            <Space gap="sm">
+              <Button variant="ghost" size="sm">
+                重置
+              </Button>
+              <Button size="sm">应用</Button>
+            </Space>
+          </Space>
+        </Card>
+      </Demo>
+
+      <Demo
+        title="海报卡（图文列表）"
+        desc="Card padding=none 承载贴边封面，图片用 aspect-ratio 固定比例，避免加载前后跳动；标题与标签放卡片底部。"
+        muted
+        layout="column"
+        code={`<Grid columns={4} gap="md">
+  {posters.map((poster) => (
+    <Card padding="none" className={styles.posterCard} key={poster.id}>
+      <span className={styles.posterCover}>
+        <img src={cover} alt="" />
+      </span>
+      <span className={styles.posterBody}>
+        <span className={styles.posterTitle}>{poster.title}</span>
+        <Tag shape="pill" tone="neutral">{poster.tag}</Tag>
+      </span>
+    </Card>
+  ))}
+</Grid>`}
+      >
+        <Grid columns={4} gap="md">
+          {DEMO_POSTERS.map((poster) => (
+            <Card padding="none" className={styles.posterCard} key={poster.id}>
+              <span className={styles.posterCover}>
+                <img src={DEMO_COVER} alt="" />
+              </span>
+              <span className={styles.posterBody}>
+                <span className={styles.posterTitle}>{poster.title}</span>
+                <Tag shape="pill" tone="neutral">
+                  {poster.tag}
+                </Tag>
+              </span>
+            </Card>
+          ))}
+        </Grid>
+      </Demo>
+    </Section>
+  )
+}