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

site/sections/Marks.tsx

@@ -0,0 +1,170 @@
+import { Badge, Icon, ItemBadge, Space, Tag } from '../../src'
+import { Demo } from '../components/Demo'
+import { PropsTable } from '../components/PropsTable'
+import { Section } from '../components/Section'
+
+export function Marks() {
+  return (
+    <Section
+      id="marks"
+      title="标记"
+      api="Tag / ItemBadge / Badge"
+      desc="三种标记各有分工：Tag 是分类与元信息（浅底胶囊，13px），ItemBadge 是标题前的状态角标（置顶/付费/HOT，渐变，12px），Badge 是纯数字。"
+    >
+      <Demo
+        title="标签：浅底（默认）"
+        desc="对齐参考站的 .tags-list：24px 高、13px 字、胶囊形、gray-1 浅底 + gray-6 文字。neutral 是默认态。"
+        code={`<Tag>未分类</Tag>
+<Tag tone="primary">前端</Tag>
+<Tag tone="success">已连接</Tag>
+<Tag tone="warning">待确认</Tag>
+<Tag tone="danger">已删除</Tag>`}
+      >
+        <Tag>未分类</Tag>
+        <Tag tone="primary">前端</Tag>
+        <Tag tone="success">已连接</Tag>
+        <Tag tone="warning">待确认</Tag>
+        <Tag tone="danger">已删除</Tag>
+      </Demo>
+
+      <Demo
+        title="标签：实底与图标"
+        desc="文章页的分类标签是实底白字；icon 插槽用于放分类小图标（参考站的标签左侧都有图标）。"
+        code={`<Tag variant="solid" tone="primary">iPhone 17e</Tag>
+<Tag variant="solid" tone="danger">苹果新品</Tag>
+<Tag variant="solid" tone="success">设计</Tag>
+<Tag icon={<Icon name="link_line" />}>链接</Tag>`}
+      >
+        <Tag variant="solid" tone="primary">
+          iPhone 17e
+        </Tag>
+        <Tag variant="solid" tone="danger">
+          苹果新品
+        </Tag>
+        <Tag variant="solid" tone="success">
+          设计
+        </Tag>
+        <Tag variant="solid" tone="warning">
+          付费
+        </Tag>
+        <Tag icon={<Icon name="link_line" />}>链接</Tag>
+      </Demo>
+
+      <Demo
+        title="状态角标"
+        desc="标题前的「置顶 / 付费 / HOT」：18px 高、12px 加粗白字、4px 圆角、红/橙渐变底，同一行里放在标题左边。"
+        code={`<ItemBadge tone="sticky">置顶</ItemBadge>
+<ItemBadge tone="paid">付费</ItemBadge>
+<ItemBadge tone="hot">HOT</ItemBadge>
+<ItemBadge tone="neutral">草稿</ItemBadge>`}
+      >
+        <Space gap="md" wrap>
+          <ItemBadge tone="sticky">
+            置顶
+          </ItemBadge>
+          <ItemBadge tone="paid">
+            付费
+          </ItemBadge>
+          <ItemBadge tone="hot">
+            HOT
+          </ItemBadge>
+          <ItemBadge tone="neutral">
+            草稿
+          </ItemBadge>
+        </Space>
+      </Demo>
+
+      <Demo
+        title="数量角标"
+        desc="纯数字，18px 高、12px 字；超过 99 显示 99+，需要压住标题右上角时传 className 自己定位。"
+        code={`<Badge count={18} />
+<Badge count={1280} />
+<Badge count={7} tone="primary" />
+<Badge count={7} tone="neutral" />`}
+      >
+        <Badge count={18} />
+        <Badge count={1280} />
+        <Badge count={7} tone="primary" />
+        <Badge count={7} tone="neutral" />
+      </Demo>
+
+      <Demo
+        title="组合成标题行"
+        desc="状态角标 + 标题 + 分类标签，是列表条目最常见的一行；间距用 Space，不要给角标加 margin。"
+        layout="column"
+        code={`<Space gap="sm">
+  <ItemBadge tone="paid">付费</ItemBadge>
+  <strong>iPhone 17e 最全汇总</strong>
+</Space>
+
+<Space gap="sm">
+  <Tag variant="solid" tone="primary">未分类</Tag>
+  <Tag variant="solid" tone="danger">苹果新品</Tag>
+</Space>`}
+      >
+        <Space gap="sm">
+          <ItemBadge tone="paid">
+            付费
+          </ItemBadge>
+          <span style={{ fontSize: 16, fontWeight: 500 }}>iPhone 17e 最全汇总：最便宜的苹果 AI 手机</span>
+        </Space>
+        <Space gap="sm">
+          <Tag variant="solid" tone="primary">
+            未分类
+          </Tag>
+          <Tag variant="solid" tone="danger">
+            苹果新品
+          </Tag>
+          <Tag variant="solid" tone="danger">
+            闪电接口
+          </Tag>
+        </Space>
+      </Demo>
+
+      <Demo
+        title="组合成顶栏信息"
+        desc="「标签 + 文本」是顶栏信息条的固定搭配；前缀标签用 rounded 小方块，和分类胶囊区分开。"
+        code={`<Space gap="md">
+  <Tag shape="rounded">本地</Tag>
+  <span>docs</span>
+</Space>`}
+      >
+        <Space gap="md">
+          <Tag shape="rounded">本地</Tag>
+          <span>docs</span>
+        </Space>
+        <Space gap="md">
+          <Tag shape="rounded" tone="success">
+            状态
+          </Tag>
+          <span>实时同步已连接</span>
+        </Space>
+      </Demo>
+
+      <PropsTable
+        rows={[
+          { name: 'tone', type: "'neutral' | 'primary' | 'success' | 'warning' | 'danger'", defaultValue: "'neutral'", desc: '语义配色' },
+          { name: 'variant', type: "'soft' | 'solid'", defaultValue: "'soft'", desc: '浅底 / 实底白字' },
+          { name: 'shape', type: "'pill' | 'rounded'", defaultValue: "'pill'", desc: '胶囊 / 小方块' },
+          { name: 'icon', type: 'ReactNode', desc: '前置图标' },
+          { name: '…rest', type: 'HTMLAttributes<HTMLSpanElement>', desc: '透传原生属性' },
+        ]}
+      />
+
+      <PropsTable
+        rows={[
+          { name: 'tone', type: "'hot' | 'sticky' | 'paid' | 'neutral'", defaultValue: "'hot'", desc: '红渐变 / 红渐变 / 橙渐变 / 灰底' },
+          { name: 'children', type: 'ReactNode', required: true, desc: '角标文字' },
+        ]}
+      />
+
+      <PropsTable
+        rows={[
+          { name: 'count', type: 'number', required: true, desc: '数字' },
+          { name: 'tone', type: "'danger' | 'primary' | 'neutral'", defaultValue: "'danger'", desc: '配色' },
+          { name: 'max', type: 'number', defaultValue: '99', desc: '超过显示 N+；0 表示不截断' },
+        ]}
+      />
+    </Section>
+  )
+}