stash-ui/site/sections/Marks.tsx

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>
  )
}