# 托管账号管理

## 📋 业务与功能

### 1.1 核心目标
> 简要说明该元素/页面的核心定位、解决的问题、用户价值

为企业微信托管账号提供统一的查询、分配、状态查看与批量管理入口，帮助运营人员高效完成账号托管与运维操作。

### 1.2 功能清单
> 列出所有功能模块及其优先级

- **筛选查询**：按集运人员、企业成员、成员手机、托管状态（在线、企微离线、机器人离线）筛选并搜索
- **批量操作**：批量分配、批量移除、导出
- **托管账号列表**：展示成员信息、所属部门、客户数、托管 IP、托管状态、托管时间
- **成员选择弹窗**：在弹窗中选择企业成员与集运人员并确认
  - 组织架构树：仅展示部门
  - 成员列表：选择具体成员
  - 集运人员：单选
  - 虚拟机归属地：与其它项平行布局

### 1.3 交互要点
- 侧边菜单点击 → 跳转到对应页面
> 关键的交互触发点、反馈机制、状态变化

- 点击“搜索”触发查询 → 触发 `on_search` 事件
- 点击“重置”恢复筛选默认值 → 触发 `on_reset` 事件
- 点击“新增托管/批量分配/批量移除/导出” → 触发对应事件
- 点击“选择托管企业成员”弹窗中的“确定/取消” → 更新选择状态并触发事件

---

## 📊 内容规划

### 2.1 信息架构
> 模块划分、信息层级、内容组织方式

```
托管账号管理
├── 顶部筛选区
│   ├── 集运人员
│   ├── 企业成员
│   ├── 成员手机
│   └── 托管状态
├── 操作区
│   ├── 新增托管
│   ├── 批量分配
│   ├── 批量移除
│   └── 导出
├── 列表区
│   ├── 表头
│   └── 数据行
└── 成员选择弹窗
    ├── 企业组织树（仅部门）
    ├── 成员列表
    ├── 已选择成员
    ├── 集运人员选择（单选）
    └── 虚拟机归属地
```

### 2.2 数据来源
> 数据源优先级：用户提供数据 > 项目数据表 > 生成示例数据

- **数据类型**：列表 + 选择项
- **数据源**：生成示例数据
- **关键字段**：
  - `id`: 账号记录 ID
  - `member_name`: 成员姓名
  - `member_id`: 成员 ID
  - `member_phone`: 成员手机号
  - `department`: 部门
  - `operator_name`: 集运人员
  - `operator_phone`: 集运人员手机号
  - `customer_count`: 客户数
  - `proxy_ip`: 托管 IP
  - `status`: 托管状态（online/wecom_offline/robot_offline）
  - `managed_at`: 托管时间

### 2.3 内容示例
> （可选）重要的示例内容、文案语气、术语规范

- 状态文案：`在线` / `企微离线` / `机器人离线`
- 操作文案：`提醒登录`、`输入验证码`

---

## 🎨 布局与结构

### 3.1 整体布局
> 布局模式（单栏/双栏/网格/自由）、模块尺寸、比例约束

- **布局模式**：双栏（左侧导航 + 右侧内容）
- **容器宽度**：流式
- **关键尺寸**：
  - 顶部筛选区：高度 64px
  - 操作区：高度 56px
  - 列表区：自适应
  - 弹窗宽度：约 900px

### 3.2 响应式适配
> （如适用）断点、适配策略

- **桌面端（≥1200px）**：左右分栏完整展示
- **平板端（768-1199px）**：左侧导航缩窄，弹窗宽度缩放
- **移动端（<768px）**：导航折叠，表格使用横向滚动

---

## 🎨 视觉规范

### 4.1 设计规范来源
> 优先级：用户提供的设计规范 > 主题设计系统（DESIGN-SPEC.md）> 内置设计指导

**本设计基于**：
- [ ] 用户提供的设计规范：[路径/说明]
- [ ] 主题设计系统：`/src/themes/[主题名]/` （DESIGN-SPEC.md + designToken.json + globals.css）
- [x] 内置设计指导：`/assets/docs/设计指导（简约）.md`

**说明**：设计令牌（Design Tokens）将从上述规范中动态读取，无需在此列出具体值。

### 4.2 自定义设计要点
> （可选）仅在有特殊的自定义设计要求时填写，如特殊色彩、特殊尺寸等

**自定义色彩**（如有）：
- 状态色：在线使用浅蓝色标签，企业离线使用浅红色标签

### 4.3 组件状态
> 交互元素的状态定义

- **默认态（default）**：按钮与输入框正常显示
- **悬停态（hover）**：按钮与表格行悬停高亮
- **禁用态（disabled）**：筛选项禁用时呈灰色

---

## ⚙️ Axure API 说明

### 5.1 事件列表（eventList）
> 组件对外暴露的事件

| 事件名称 | Payload 类型 | 触发时机 | 说明 |
|---------|-------------|---------|------|
| `on_search` | `string` | 点击搜索 | payload 为筛选条件 JSON 字符串 |
| `on_reset` | `string` | 点击重置 | payload 为 "reset" |
| `on_action` | `string` | 点击操作按钮 | payload 为操作类型 |
| `on_modal_confirm` | `string` | 弹窗确认 | payload 为选择结果 JSON 字符串 |
| `on_modal_cancel` | `string` | 弹窗取消 | payload 为 "cancel" |

### 5.2 动作列表（actionList）
> 组件可被调用的动作

| 动作名称 | Params 类型 | 参数说明 | 功能描述 |
|---------|------------|---------|---------|
| `open_modal` | `string` | 无 | 打开成员选择弹窗 |
| `close_modal` | `string` | 无 | 关闭成员选择弹窗 |
| `set_filters` | `string` | JSON 字符串 | 设置筛选条件 |

### 5.3 变量列表（varList）
> 组件内部状态变量

| 变量名称 | 类型 | 默认值 | 说明 |
|---------|-----|-------|------|
| `modal_open` | `boolean` | `false` | 弹窗是否打开 |
| `selected_count` | `number` | `0` | 已选成员数量 |

**命名规范**：使用 snake_case（小写字母、数字、下划线）

### 5.4 配置项列表（configList）
> 组件配置项

| 配置项名称 | 类型 | 默认值 | 说明 |
|----------|-----|-------|------|
| `show_modal_on_load` | `boolean` | `false` | 是否默认打开弹窗 |
| `page_size` | `number` | `10` | 表格每页条数 |

### 5.5 数据项列表（dataList）
> 组件数据结构定义

**数据结构**：
```typescript
{
  accounts: {
    id: string;
    member_name: string;
    member_id: string;
    member_phone: string;
    department: string;
    operator_name: string;
    operator_phone: string;
    customer_count: number;
    proxy_ip: string;
    status: 'online' | 'offline';
    managed_at: string;
  }[];
  operators: {
    id: string;
    name: string;
  }[];
}
```