# 组织架构查看

## 📋 业务与功能

### 1.1 核心目标
> 提供企业组织架构的可视化展示，支持按部门名称快速检索，帮助用户清晰了解企业层级结构。

### 1.2 功能清单
- **组织架构树展示**：以树状结构展示从腾讯同步过来的组织架构层级。
- **部门搜索**：提供搜索框，支持通过部门名称关键词快速定位并展开对应节点。
- **展开/折叠**：支持手动展开或折叠各级部门节点。
- **同步数据**：提供同步按钮，重新拉取最新的组织架构数据。

### 1.3 交互要点
- **搜索高亮**：输入关键词后，自动展开包含匹配项的父节点，并高亮显示匹配的部门名称。
- **节点选中**：点击部门节点时，记录当前选中状态（可扩展用于联动其他模块）。
- **同步操作**：点击同步按钮，触发 `onSync` 事件。

---

## 📊 内容规划

### 2.1 信息架构
```
组织架构查看
├── 页面容器 (Card)
│   ├── 顶部操作栏
│   │   ├── 标题
│   │   └── 同步按钮 (Button)
│   ├── 搜索栏
│   │   └── 搜索框 (Input.Search)
│   └── 内容展示区
│       └── 组织架构树 (Tree)
```

### 2.2 数据来源
- **数据类型**：部门树列表 (`departments`)
- **关键字段**：
  - `key`: 部门ID (唯一标识)
  - `title`: 部门名称
  - `children`: 子部门列表 (递归结构)

---

## 🎨 布局与结构

### 3.1 整体布局
- **布局模式**：单栏卡片布局
- **容器样式**：白色背景卡片，带圆角和阴影，内容区域自适应高度。
- **关键尺寸**：
  - 搜索框宽度：300px (可自适应)
  - 树节点缩进：24px

---

## ⚙️ Axure API 说明

### 5.1 事件列表 (eventList)

| 事件名称 | Payload 类型 | 触发时机 | 说明 |
|---------|-------------|---------|------|
| `onDepartmentSelect` | `Department` | 点击部门节点时 | 返回选中的部门对象 |
| `onSync` | `void` | 点击同步按钮时 | 触发同步操作 |

### 5.2 动作列表 (actionList)

| 动作名称 | Params 类型 | 参数说明 | 功能描述 |
|---------|------------|---------|---------|
| `refreshData` | `void` | 无 | 重新拉取组织架构数据 |

### 5.3 变量列表 (varList)

| 变量名称 | 类型 | 默认值 | 说明 |
|---------|-----|-------|------|
| `selectedDepartment` | `Department \| null` | `null` | 当前选中的部门 |

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

| 配置项名称 | 类型 | 默认值 | 说明 |
|---------|-----|-------|------|
| `title` | `string` | `组织架构` | 页面标题 |

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

```typescript
{
  departments: Array<{
    key: string;
    title: string;
    children?: Array<Department>;
  }>
}
```