skeleton · neumorphic · 灵感来源：Skeleton Screen 模式 + 本站材质配方
数据到达后整块替换，不闪烁。
Skeleton Screen · 拟态骨架 · 骨架 / Neumorphic
做一个 Skeleton Screen（拟态骨架）：
- role=status + aria-busy，占位块全部 aria-hidden，读屏只播一句加载状态
- avatar + lines 还原最终版式；行宽递减，最后一行天然变短
- 静态占位不闪烁，减少动效下无需额外降级
- 同色底 + 内双阴影；头像深一档、正文行浅一档
用这些 CSS 变量：--color-text-muted --neuro-bg --neuro-dark --neuro-light
灵感参考：Skeleton Screen 模式 + 本站材质配方--color-text-muted --neuro-bg --neuro-dark --neuro-light
（无必缺状态）
（尚未接进整页场景）
/r/skeleton--neumorphic.json
免外壳的 markdown 版：/llms/components/skeleton--neumorphic.mdrole="status" + aria-busy="true" + aria-label；占位块全部 aria-hiddenavatar 控制头像位，lines 控制正文行数；行宽 100 / 86 / 72 … 递减变量：--neuro-bg / --neuro-light / --neuro-dark。
interface Props {
/** 正文行数 */
lines?: number;
/** 左侧头像位 */
avatar?: boolean;
label?: string;
className?: string;
}
/**
* 拟态骨架：加载中的占位块。
* 保持最终版式的高度与节奏，数据到达后整块替换；不做闪烁。
*/
export function NeumorphicSkeleton({
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(--neuro-bg)]
shadow-[inset_2px_2px_5px_var(--neuro-dark),inset_-2px_-2px_5px_var(--neuro-light)]
"
/>
)}
<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(--neuro-bg)]
shadow-[inset_1px_1px_3px_var(--neuro-dark),inset_-1px_-1px_3px_var(--neuro-light)]
"
style={{ width: `${Math.max(42, 100 - i * 14)}%` }}
/>
))}
</div>
</div>
);
}
src/components/skeleton/neumorphic/