skeleton · minimal · 灵感来源：Skeleton Screen 模式 + 本站材质配方
数据到达后整块替换，不闪烁。
Skeleton Screen · 极简骨架 · 骨架 / Minimal
做一个 Skeleton Screen（极简骨架）：
- role=status + aria-busy，占位块全部 aria-hidden，读屏只播一句加载状态
- avatar + lines 还原最终版式；行宽递减，最后一行天然变短
- 静态占位不闪烁，减少动效下无需额外降级
- 单一凹陷灰，没有边框、阴影与模糊
用这些 CSS 变量：--color-text-muted --glass-recess
灵感参考：Skeleton Screen 模式 + 本站材质配方--color-text-muted --glass-recess
（无必缺状态）
（尚未接进整页场景）
/r/skeleton--minimal.json
免外壳的 markdown 版：/llms/components/skeleton--minimal.mdrole="status" + aria-busy="true" + aria-label；占位块全部 aria-hiddenavatar 控制头像位，lines 控制正文行数；行宽 100 / 86 / 72 … 递减--glass-recess 单一凹陷灰，没有边框、没有阴影、没有模糊变量：--glass-recess。
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>
);
}
src/components/skeleton/minimal/