# 拟态头像（Avatar with fallback）

- 类型 / 材质：`avatar` / `neumorphic`（新拟态）
- 状态：done ｜ 最后提交：2026-11-01
- 灵感来源：Neumorphism（同色浮起的圆形）
- 依据标准：`/design#interaction` ｜ 组件页：`/showcase/component/avatar/neumorphic` ｜ 条目：`/r/avatar--neumorphic.json`
- 必缺状态：（无必缺状态）
- 整页场景：尚未接入

## 规格

- 同一份 props（name / src / size / status）
- 同色底 + 外投影，没有边框；投影只在外圈，不糊住图片
- 首字母回落与状态读屏文案与玻璃头像一致

## 参数（CSS 变量）

`--color-success-fg` `--color-surface` `--color-text-muted` `--color-text-subtle` `--color-warning-fg` `--neuro-bg` `--neuro-dark` `--neuro-light` `--text-2xs` `--text-xs`

## Props 契约

| 字段 | 类型 | 必填 | 说明 |
|---|---|---|---|
| `name` | `string` | 必填 | — |
| `src` | `string` | 可选 | — |
| `size` | `'sm' | 'md' | 'lg'` | 可选 | — |
| `status` | `'online' | 'busy' | 'offline'` | 可选 | — |
| `className` | `string` | 可选 | — |

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

```
复现「拟态头像」— Avatar with fallback（头像 / Neumorphic）
灵感来源：Neumorphism（同色浮起的圆形）
规格：
- 同一份 props（name / src / size / status）
- 同色底 + 外投影，没有边框；投影只在外圈，不糊住图片
- 首字母回落与状态读屏文案与玻璃头像一致
参数（CSS 变量）：--color-success-fg --color-surface --color-text-muted --color-text-subtle --color-warning-fg --neuro-bg --neuro-dark --neuro-light --text-2xs --text-xs
必缺状态：（无必缺状态）
整页场景：（尚未接进整页场景）
无障碍：焦点环 ≥2px 等效周长（SC 2.4.13）；指针目标 ≥24×24（SC 2.5.8）；动效带 prefers-reduced-motion 降级
参考：本站实样 /showcase/component/avatar/neumorphic · 标准 interaction /design#interaction · 调研笔记 /showcase/component/avatar/neumorphic#notes
```

## 调研笔记

import { useState } from 'react';

interface Props {
  name: string;
  src?: string;
  size?: 'sm' | 'md' | 'lg';
  status?: 'online' | 'busy' | 'offline';
  className?: string;
}

const SIZE = {
  sm: 'size-6 text-[length:var(--text-2xs)]',
  md: 'size-8 text-[length:var(--text-xs)]',
  lg: 'size-11 text-sm',
};

const STATUS = {
  online: 'bg-[var(--color-success-fg)]',
  busy: 'bg-[var(--color-warning-fg)]',
  offline: 'bg-[var(--color-text-subtle)]',
};

const STATUS_LABEL = {
  online: '在线',
  busy: '忙碌',
  offline: '离线',
};

/** 中文在小尺寸只留姓，lg 才放两个字；西文取首字母缩写 */
function initials(name: string, size: 'sm' | 'md' | 'lg') {
  const parts = name.trim().split(/\s+/);
  if (parts.length > 1) return (parts[0][0] + parts[1][0]).toUpperCase();
  if (/[\u4e00-\u9fa5]/.test(name)) return size === 'lg' ? name.slice(0, 2) : name.slice(0, 1);
  return name.slice(0, 2).toUpperCase();
}

export function NeumorphicAvatar({ name, src, size = 'md', status, className = '' }: Props) {
  const [broken, setBroken] = useState(false);
  const showImage = src && !broken;

  return (
    <span className={`relative inline-flex shrink-0 ${className}`}>
      <span
        className={`
          ${SIZE[size]} rounded-full overflow-hidden relative
          inline-flex items-center justify-center
          bg-[var(--neuro-bg)] border border-transparent
          shadow-[2px_2px_4px_var(--neuro-dark),-2px_-2px_4px_var(--neuro-light)]
          text-[var(--color-text-muted)] font-medium
        `}
      >
        <span aria-hidden="true" className="absolute inset-0 grid place-items-center">
          {initials(name, size)}
        </span>
        {showImage && (
          <img
            src={src}
            alt=""
            className="absolute inset-0 size-full object-cover"
            onError={() => setBroken(true)}
          />
        )}
        <span className="sr-only">{name}</span>
      </span>

      {status && (
        <>
          <span
            className={`
              absolute -bottom-0 -right-0 size-2 rounded-full
              ring-2 ring-[var(--color-surface)]
              ${STATUS[status]}
            `}
            aria-hidden="true"
          />
          <span className="sr-only">{STATUS_LABEL[status]}</span>
        </>
      )}
    </span>
  );
}