# 极简骨架（Skeleton Screen）

- 类型 / 材质：`skeleton` / `minimal`（极简）
- 状态：done ｜ 最后提交：2026-11-01
- 灵感来源：Skeleton Screen 模式 + 本站材质配方
- 依据标准：`/design#states` ｜ 组件页：`/showcase/component/skeleton/minimal` ｜ 条目：`/r/skeleton--minimal.json`
- 必缺状态：（无必缺状态）
- 整页场景：尚未接入

## 规格

- role=status + aria-busy，占位块全部 aria-hidden，读屏只播一句加载状态
- avatar + lines 还原最终版式；行宽递减，最后一行天然变短
- 静态占位不闪烁，减少动效下无需额外降级
- 单一凹陷灰，没有边框、阴影与模糊

## 参数（CSS 变量）

`--color-text-muted` `--glass-recess`

## Props 契约

| 字段 | 类型 | 必填 | 说明 |
|---|---|---|---|
| `lines` | `number` | 可选 | 正文行数 |
| `avatar` | `boolean` | 可选 | 左侧头像位 |
| `label` | `string` | 可选 | — |
| `className` | `string` | 可选 | — |

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

```
复现「极简骨架」— Skeleton Screen（骨架 / Minimal）
灵感来源：Skeleton Screen 模式 + 本站材质配方
规格：
- role=status + aria-busy，占位块全部 aria-hidden，读屏只播一句加载状态
- avatar + lines 还原最终版式；行宽递减，最后一行天然变短
- 静态占位不闪烁，减少动效下无需额外降级
- 单一凹陷灰，没有边框、阴影与模糊
参数（CSS 变量）：--color-text-muted --glass-recess
必缺状态：（无必缺状态）
整页场景：（尚未接进整页场景）
无障碍：焦点环 ≥2px 等效周长（SC 2.4.13）；指针目标 ≥24×24（SC 2.5.8）；动效带 prefers-reduced-motion 降级
参考：本站实样 /showcase/component/skeleton/minimal · 标准 states /design#states · 调研笔记 /showcase/component/skeleton/minimal#notes
```

## 调研笔记

interface Props {
  /** 正文行数 */
  lines?: number;
  /** 左侧头像位 */
  avatar?: boolean;
  label?: string;
  className?: string;
}

/**
 * 极简骨架：加载中的占位块。
 * 保持最终版式的高度与节奏，数据到达后整块替换；不做闪烁。
 */
export function MinimalSkeleton({
  lines = 3,
  avatar = false,
  label = '加载中',
  className = '',
}: Props) {
  return (
    <div
      role="status"
      aria-busy="true"
      aria-label={label}
      className={`flex items-start gap-3 ${className}`}
    >
      {avatar && (
        <span
          aria-hidden="true"
          className="size-10 shrink-0 rounded-full bg-[var(--glass-recess)]"
        />
      )}
      <div className="flex-1 space-y-2.5 pt-0.5">
        {Array.from({ length: lines }).map((_, i) => (
          <span
            key={i}
            aria-hidden="true"
            className="block h-3 rounded-full bg-[var(--glass-recess)]"
            style={{ width: `${Math.max(42, 100 - i * 14)}%` }}
          />
        ))}
      </div>
    </div>
  );
}