# UserAvatar 组件

通用的用户头像显示组件，提供统一的头像显示逻辑。

## 功能特性

- ✅ 如果有头像 URL，显示头像图片
- ✅ 如果没有头像，显示用户名的首字母
  - 英文名（包含空格）：取第一个和最后一个单词的首字母，如 "John Doe" → "JD"
  - 中文名或单个单词：取前两个字符，如 "张三" → "张三"，"John" → "JO"
- ✅ 支持多种尺寸预设（sm, md, lg, xl）和自定义像素值
- ✅ 支持自定义颜色和样式
- ✅ 默认使用美观的蓝紫色渐变背景
- ✅ 响应式设计，字体大小根据头像大小自动调整

## API

### Props

```typescript
interface UserAvatarProps {
  /** 用户头像 URL */
  avatar?: string | null;
  
  /** 用户显示名称（用于提取首字母） */
  displayName: string;
  
  /** 头像尺寸 */
  size?: number | 'sm' | 'md' | 'lg' | 'xl';
  // sm: 32px, md: 40px, lg: 64px, xl: 96px
  
  /** 自定义类名 */
  className?: string;
  
  /** 背景颜色（默认为蓝紫色渐变） */
  backgroundColor?: string;
  
  /** 文字颜色（默认为白色） */
  textColor?: string;
  
  /** 是否显示圆形（默认 true） */
  rounded?: boolean;
  
  /** 点击事件 */
  onClick?: () => void;
}
```

## 使用示例

### 基础用法

```tsx
import UserAvatar from '@/components/organization/UserAvatar';

// 有头像的用户
<UserAvatar 
  avatar="https://example.com/avatar.jpg"
  displayName="张三"
/>

// 没有头像的用户（显示首字母）
<UserAvatar 
  displayName="John Doe"
/>
```

### 不同尺寸

```tsx
// 预设尺寸
<UserAvatar displayName="张三" size="sm" />  // 32x32
<UserAvatar displayName="张三" size="md" />  // 40x40 (默认)
<UserAvatar displayName="张三" size="lg" />  // 64x64
<UserAvatar displayName="张三" size="xl" />  // 96x96

// 自定义像素值
<UserAvatar displayName="张三" size={48} />
```

### 自定义样式

```tsx
// 自定义背景色和文字色
<UserAvatar 
  displayName="张三"
  backgroundColor="#ff6b6b"
  textColor="#fff"
/>

// 圆角矩形（而非圆形）
<UserAvatar 
  displayName="张三"
  rounded={false}
/>

// 添加额外的 CSS 类
<UserAvatar 
  displayName="张三"
  className="shadow-lg border-2 border-white"
/>
```

### 可点击的头像

```tsx
<UserAvatar 
  displayName="张三"
  onClick={() => handleUserClick(userId)}
/>
```

## 首字母提取规则

### 英文名（包含空格）
- "John Doe" → "JD"
- "Mary Jane Watson" → "MW"（取第一个和最后一个单词）

### 中文名或单个单词
- "张三" → "张三"
- "John" → "JO"
- "李" → "李"

### 空值处理
- 如果 `displayName` 为空或未提供，显示 "U"（User 的首字母）

## 辅助函数

### getUserAvatarColor

根据用户名生成一致的颜色，可用于为不同用户生成不同的头像背景色。

```tsx
import { getUserAvatarColor } from '@/components/organization/UserAvatar';

const color = getUserAvatarColor("张三");

<UserAvatar 
  displayName="张三"
  backgroundColor={color}
/>
```

该函数使用哈希算法，确保同一个用户名总是得到相同的颜色。

## 已集成的位置

✅ 已在以下组件中集成：

1. **UserDetailDrawer** - 用户详情抽屉（大尺寸头像）
2. **DepartmentManagementPage** - 部门管理页面（小尺寸头像）
3. **UserTableRow** - 用户表格行（中等尺寸头像）
4. **FeedbackManagePage** - 反馈管理列表（小尺寸头像）
5. **FeedbackDetailPage** - 反馈详情页（中等和大尺寸头像）

## 设计原则

1. **一致性**：所有头像使用统一的组件，确保整个应用的视觉一致性
2. **灵活性**：支持多种尺寸和自定义样式，适应不同场景
3. **智能回退**：当没有头像时，智能提取首字母作为替代显示
4. **国际化友好**：同时支持中文和英文名字的首字母提取
5. **性能优化**：轻量级实现，不依赖额外库

## 注意事项

- 该组件是纯前端组件，不涉及任何 API 调用
- 头像 URL 应该是可访问的完整路径
- 对于 `avatar` 为 `null` 或 `undefined` 的情况，会自动显示首字母
- 字体大小会根据头像尺寸自动调整（40% 的头像尺寸）