# 玻璃徽标（Status Badge）

- 类型 / 材质：`badge` / `glass-apple`（玻璃）
- 状态：done ｜ 最后提交：2026-11-01
- 灵感来源：GitHub Primer / Linear 的状态徽标（胶囊 + 状态点 + 语义色文字）
- 依据标准：`/design#interaction` ｜ 组件页：`/showcase/component/badge/glass-apple` ｜ 条目：`/r/badge--glass-apple.json`
- 必缺状态：（无必缺状态）
- 整页场景：
  - 发布记录（`/r/scene--record.json`）

## 规格

- 胶囊只用文字色表达语义（neutral / accent / success / warning），底色始终中性
- 状态点用 bg-current 跟随文字色；dot 模式下文字退成 sr-only
- 不可点、不可聚焦；可点的状态筛选属于 choice / segmented
- 玻璃材质：半透明底 + 发丝边 + 模糊，尺寸固定不设 size 轴

## 参数（CSS 变量）

`--color-accent` `--color-success-fg` `--color-text-muted` `--color-warning-fg` `--glass-bg` `--glass-border` `--text-2xs`

## Props 契约

| 字段 | 类型 | 必填 | 说明 |
|---|---|---|---|
| `children` | `ReactNode` | 必填 | — |
| `variant` | `'neutral' | 'accent' | 'success' | 'warning'` | 可选 | — |
| `dot` | `boolean` | 可选 | 只显示状态点：文字退成读屏可见 |
| `className` | `string` | 可选 | — |

## 提示词（可直接粘给智能体）

```
复现「玻璃徽标」— Status Badge（徽标 / Glass）
灵感来源：GitHub Primer / Linear 的状态徽标（胶囊 + 状态点 + 语义色文字）
规格：
- 胶囊只用文字色表达语义（neutral / accent / success / warning），底色始终中性
- 状态点用 bg-current 跟随文字色；dot 模式下文字退成 sr-only
- 不可点、不可聚焦；可点的状态筛选属于 choice / segmented
- 玻璃材质：半透明底 + 发丝边 + 模糊，尺寸固定不设 size 轴
参数（CSS 变量）：--color-accent --color-success-fg --color-text-muted --color-warning-fg --glass-bg --glass-border --text-2xs
必缺状态：（无必缺状态）
整页场景：发布记录
无障碍：焦点环 ≥2px 等效周长（SC 2.4.13）；指针目标 ≥24×24（SC 2.5.8）；动效带 prefers-reduced-motion 降级
参考：本站实样 /showcase/component/badge/glass-apple · 标准 interaction /design#interaction · 调研笔记 /showcase/component/badge/glass-apple#notes
```

## 调研笔记

import { type ReactNode } from 'react';

interface Props {
  children: ReactNode;
  variant?: 'neutral' | 'accent' | 'success' | 'warning';
  /** 只显示状态点：文字退成读屏可见 */
  dot?: boolean;
  className?: string;
}

const TONE = {
  neutral: 'text-[var(--color-text-muted)]',
  accent: 'text-[var(--color-accent)]',
  success: 'text-[var(--color-success-fg)]',
  warning: 'text-[var(--color-warning-fg)]',
};

export function GlassAppleBadge({ children, variant = 'neutral', dot = false, className = '' }: Props) {
  return (
    <span
      className={`
        inline-flex items-center gap-1.5
        px-2 py-0.5 rounded-full
        text-[length:var(--text-2xs)] font-mono
        bg-[var(--glass-bg)] border border-[var(--glass-border)] backdrop-blur-xl
        ${TONE[variant]}
        ${className}
      `}
    >
      <span className="size-1.5 rounded-full bg-current" aria-hidden="true" />
      <span className={dot ? 'sr-only' : undefined}>{children}</span>
    </span>
  );
}