# 人员详情抽屉组件

## 📋 概述

`UserDetailDrawer` 是一个飞书风格的人员信息展示抽屉组件，用于在不同页面点击人员信息时，通过右侧弹窗展示详细信息。

## ✨ 特性

- ✅ 飞书设计风格（480px 宽度，右侧滑出）
- ✅ 支持 Previous/Next 导航（当提供用户列表时）
- ✅ 三个标签页：基本信息、工作信息、自定义信息
- ✅ 显示用户头像、状态、部门、职位、主管等信息
- ✅ 支持多部门归属展示
- ✅ 完整的中英文国际化支持
- ✅ 可选的编辑按钮回调

## 📦 使用方法

### 1. 基本使用

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

function MyComponent() {
  const [showUserDetail, setShowUserDetail] = useState(false);
  const [selectedUserId, setSelectedUserId] = useState<string | null>(null);

  return (
    <>
      {/* 触发按钮 */}
      <button onClick={() => {
        setSelectedUserId('user-id-123');
        setShowUserDetail(true);
      }}>
        View User Detail
      </button>

      {/* 用户详情抽屉 */}
      {showUserDetail && (
        <UserDetailDrawer
          userId={selectedUserId}
          onClose={() => setShowUserDetail(false)}
        />
      )}
    </>
  );
}
```

### 2. 带导航和编辑功能

```tsx
import UserDetailDrawer from '@/components/organization/UserDetailDrawer';
import { User } from '@/services/api/organization';

function MyComponent() {
  const [showUserDetail, setShowUserDetail] = useState(false);
  const [selectedUserId, setSelectedUserId] = useState<string | null>(null);
  const [users, setUsers] = useState<User[]>([]);

  const handleEdit = (userId: string) => {
    // 处理编辑逻辑
    console.log('Edit user:', userId);
  };

  return (
    <>
      {/* 用户列表 */}
      {users.map(user => (
        <div 
          key={user.id}
          onClick={() => {
            setSelectedUserId(user.id);
            setShowUserDetail(true);
          }}
          className="cursor-pointer hover:text-blue-600"
        >
          {user.displayName}
        </div>
      ))}

      {/* 用户详情抽屉 - 支持 Previous/Next 导航 */}
      {showUserDetail && (
        <UserDetailDrawer
          userId={selectedUserId}
          users={users}  // 提供用户列表以启用导航
          onClose={() => setShowUserDetail(false)}
          onEdit={handleEdit}  // 提供编辑回调
        />
      )}
    </>
  );
}
```

## 🎨 Props

| 属性 | 类型 | 必需 | 默认值 | 说明 |
|------|------|------|--------|------|
| `userId` | `string \| null` | ✅ | - | 要显示的用户ID |
| `users` | `User[]` | ❌ | `[]` | 用户列表，用于 Previous/Next 导航 |
| `onClose` | `() => void` | ✅ | - | 关闭抽屉的回调函数 |
| `onEdit` | `(userId: string) => void` | ❌ | - | 编辑按钮的回调函数（如果提供，会显示"Edit Basic Info"按钮） |

## 📱 界面布局

```
┌─────────────────────────────────────┐
│  Member Details    [◀ Prev] [Next ▶] [✕] │
├─────────────────────────────────────┤
│                                     │
│   👤  Name                         │
│       Active                       │
│                                     │
│  ─────────────────────────────── │
│  Basic Info | Job Details | Custom │
│  ─────────────────────────────── │
│                                     │
│  Name:          John Doe           │
│  Username:      john.doe           │
│  Email:         john@example.com   │
│  Department:    Engineering        │
│  ...                               │
│                                     │
├─────────────────────────────────────┤
│              [Edit Basic Info]      │
└─────────────────────────────────────┘
```

## 🌍 国际化

组件已完整支持中英文：

```typescript
// 中文
t.organization?.userDetail?.title // "成员详情"
t.organization?.userDetail?.basicInfo // "基本信息"
t.organization?.userDetail?.jobDetails // "工作信息"

// 英文
t.organization?.userDetail?.title // "Member Details"
t.organization?.userDetail?.basicInfo // "Basic Info"
t.organization?.userDetail?.jobDetails // "Job Details"
```

## 📝 标签页内容

### 基本信息 (Basic Info)
- 姓名 (Name)
- 用户名 (Username)
- 用户ID (User ID)
- 手机号 (Phone Number)
- 工作邮箱 (Work Email)
- 部门 (Department)
- 员工编号 (Employee Number)
- 状态 (Status)

### 工作信息 (Job Details)
- 入职日期 (Date of Employment)
- 国家或地区 (Country or Region)
- 直属主管 (Direct Manager)
- 职位 (Job Title)
- 来源 (Source)
- 所有部门 (All Departments) - 显示多部门归属

### 自定义信息 (Custom Info)
- 暂无自定义信息提示

## 🔧 已集成页面

1. ✅ **部门管理页面** (`/organization/departments`)
   - Members 标签页：点击用户名查看详情
   - Deleted Members 标签页：点击用户名查看详情
   - 支持编辑功能

2. ✅ **组织架构图页面** (`/organization/structure`)
   - 部门侧边栏成员列表：点击用户名查看详情

## 🎯 设计特点

- **右侧滑出**: 从右侧滑出，宽度 480px
- **背景蒙层**: 30% 透明度的黑色背景
- **导航按钮**: 当提供用户列表时，自动显示 Previous/Next 按钮
- **状态指示**: Active 状态用绿色标签显示
- **头像处理**: 
  - 如果有头像，显示头像图片
  - 如果没有，显示用户名首字母，蓝色渐变背景
- **响应式**: 点击蒙层关闭，点击抽屉内容不关闭

## 🚀 扩展建议

如需扩展功能，可以：

1. **添加更多标签页**: 在 `TabKey` 类型中添加新的标签页键
2. **自定义字段**: 修改各个 Tab 组件的内容
3. **添加操作按钮**: 在 footer 区域添加更多按钮
4. **API集成**: 目前使用 props 传入的 users 列表，可以改为直接调用 API 获取详情

## 📄 相关文件

- 组件: `/frontend/src/components/organization/UserDetailDrawer.tsx`
- 国际化 (中文): `/frontend/src/locales/organization/zh.ts`
- 国际化 (英文): `/frontend/src/locales/organization/en.ts`
- 类型定义: `/frontend/src/services/api/organization.ts`