# 员工管理

## 📋 业务与功能

### 1.1 核心目标
> 管理企业员工信息，提供状态概览、组织架构筛选、员工列表展示及各类管理操作。

### 1.2 功能清单
- **状态统计**：实时展示【企业员工数】、【激活员工数】、【未激活员工数】、【禁用员工数】、【退出企业数】。
- **通讯录树**：左侧展示组织架构，支持通过部门名称搜索，点击筛选右侧员工列表。
- **员工列表**：展示员工详细信息，支持搜索（姓名/手机号）、批量操作及单条操作。
- **管理操作**：
  - **同步客户**：点击后需二次确认，同步该员工客户资源。
  - **赋权/批量赋权**：弹出模态框，选择系统角色进行赋权。
  - **编辑**：弹出模态框，修改员工归属部门及自定义字段（参考腾讯文档）。
  - **同步企微组织/成员**：批量同步操作。

### 1.3 交互要点
- **左侧联动**：点击通讯录节点，右侧列表即时筛选对应部门员工。
- **搜索联动**：左侧搜索仅过滤树节点；右侧搜索过滤员工列表。
- **敏感信息**：手机号需进行中间四位脱敏展示（如 138****1234）。
- **弹窗交互**：赋权、编辑操作需使用模态框（Modal）承载复杂表单。

---

## 📊 内容规划

### 2.1 信息架构
```
员工管理
├── 统计概览区 (5个 Statistic Card)
├── 主内容区 (Layout)
│   ├── 左侧 Sider (通讯录)
│   │   ├── 搜索框
│   │   └── 部门树 (Tree)
│   └── 右侧 Content (员工列表)
│       ├── 工具栏 (Search + Button Group)
│       └── 数据表格 (Table)
│           └── 操作列 (Dropdown/Buttons)
```

### 2.2 数据来源
- **统计数据**：`stats` 对象
- **部门树**：`departments` 列表
- **员工列表**：`employees` 列表
- **角色列表**：`roles` (用于复权弹窗)

---

## 🎨 布局与结构

### 3.1 整体布局
- **布局模式**：上下结构 + 左右分栏
- **顶部**：统计卡片行（Gutter 16）
- **底部**：左侧固定宽度（280px），右侧自适应宽度。

### 3.2 关键尺寸
- **统计卡片**：高度约 120px，内容居中对齐。
- **左侧侧边栏**：背景色白色，带右侧分割线。

---

## ⚙️ Axure API 说明

### 5.1 事件列表 (eventList)

| 事件名称 | Payload 类型 | 触发时机 | 说明 |
|---------|-------------|---------|------|
| `onSyncCorp` | `void` | 点击同步企微组织 | |
| `onSyncMembers` | `void` | 点击同步企微成员 | |
| `onBatchRestore` | `ids[]` | 点击批量赋权 | |
| `onRestore` | `id` | 点击单条赋权 | |
| `onEdit` | `employee` | 点击编辑 | |
| `onSyncCustomer` | `id` | 点击同步客户 | |
| `onDepartmentSelect` | `deptId` | 点击左侧部门树 | |

### 5.2 动作列表 (actionList)

| 动作名称 | Params 类型 | 参数说明 | 功能描述 |
|---------|------------|---------|---------|
| `refreshData` | `void` | 无 | 刷新页面所有数据 |
| `refreshList` | `deptId?` | 部门ID | 刷新员工列表 |

### 5.3 变量列表 (varList)

| 变量名称 | 类型 | 默认值 | 说明 |
|---------|-----|-------|------|
| `selectedDeptId` | `string` | `all` | 当前选中的部门ID |
| `selectedEmployeeIds` | `string[]` | `[]` | 当前勾选的员工ID |

### 5.4 配置项列表 (configList)

| 配置项名称 | 类型 | 默认值 | 说明 |
|---------|-----|-------|------|
| `title` | `string` | `员工管理` | 页面标题 |

### 5.5 数据项列表 (dataList)

```typescript
{
  stats: {
    total: number;
    active: number;
    inactive: number;
    disabled: number;
    resigned: number;
  },
  departments: Array<{
    key: string;
    title: string;
    children?: Array<Department>;
  }>,
  employees: Array<{
    id: string;
    avatar: string;
    name: string;
    mobile: string;
    department: string;
    parentDepartment: string;
    status: 'active' | 'inactive' | 'disabled' | 'resigned';
    accountStatus: string;
    customerCount: number;
  }>,
  roles: Array<{ id: string, name: string }>
}
```