# 客户信息管理

## 📋 业务与功能

### 1.1 核心目标
提供一个基于企业微信 API 的客户信息管理界面，允许管理员查看客户列表、筛选客户数据、管理客户标签，并深入查看客户与员工的关联详情。解决企业难以统一管理散落在各个员工手中的客户资源的问题，提升客户资产的透明度和管理效率。

### 1.2 功能清单
- **客户列表展示**：展示客户基础信息（昵称、头像、脱敏手机号、类型）及关联员工信息（姓名、部门、添加时间、来源）。
- **多维度筛选**：支持通过手机号（安全匹配）、员工姓名、客户标签、添加时间进行组合筛选。
- **客户打标**：支持对单个或多个客户进行批量标签设置（包含系统标签和企业标签）。
- **客户详情查看**：点击客户查看详情，展示客户全貌及所有关联的员工记录（一对多关系）。

### 1.3 交互要点
- **筛选响应**：输入筛选条件后，点击查询按钮刷新列表；手机号输入框支持模糊匹配但前端展示脱敏。
- **详情查看**：点击列表行或“查看详情”按钮，右侧滑出抽屉（Drawer）显示详情。
- **批量打标**：勾选列表项后，顶部工具栏“批量打标”按钮亮起，点击弹出模态框（Modal）选择标签。

---

## 📊 内容规划

### 2.1 信息架构
```
客户信息管理
├── 筛选工具栏
│   ├── 手机号搜索
│   ├── 员工姓名搜索
│   ├── 标签筛选
│   └── 添加时间范围
├── 客户数据列表
│   ├── 客户信息列 (头像+昵称+类型)
│   ├── 手机号列 (脱敏)
│   ├── 归属员工列 (姓名+部门)
│   ├── 客户来源列
│   ├── 标签列
│   ├── 添加时间列
│   └── 操作列 (详情/打标)
└── 客户详情抽屉
    ├── 客户基本卡片
    └── 关联员工记录列表
```

### 2.2 数据来源
- **数据类型**：客户关系数据列表
- **数据源**：模拟数据（Mock Data），后续对接企业微信 API
- **关键字段**：
  - `customerName`: 客户昵称
  - `customerAvatar`: 客户头像 URL
  - `customerMobile`: 手机号（后端返回脱敏或前端脱敏）
  - `customerType`: 1-微信, 2-企业微信
  - `staffName`: 员工姓名
  - `staffDept`: 员工归属部门
  - `tags`: 标签列表 `[{id, name, type}]`
  - `addTime`: 添加时间
  - `source`: 客户来源（如：扫码、搜索、名片分享等）

---

## 🎨 布局与结构

### 3.1 整体布局
- **布局模式**：标准后台管理布局（Top Filter + Table）。
- **容器宽度**：流式布局，自适应屏幕宽度。
- **关键尺寸**：
  - 列表头像：40x40px 圆形
  - 详情抽屉宽度：640px (中等宽度)

### 3.2 响应式适配
- **桌面端（≥1200px）**：完整展示所有列。
- **移动端（<768px）**：隐藏次要列（来源、部门、时间），仅保留客户信息和操作；详情页全屏展示。

---

## 🎨 视觉规范

### 4.1 设计规范来源
**本设计基于**：
- [x] 主题设计系统：Ant Design 默认风格 + Tailwind CSS 工具类

### 4.3 组件状态
- **标签展示**：系统标签使用蓝色系，企业标签使用绿色系/橙色系区分。
- **手机号脱敏**：默认显示如 `138****8888`，点击查看（如有权限）可显示完整或复制。

---

## ⚙️ Axure API 说明

### 5.1 事件列表（eventList）
| 事件名称 | Payload 类型 | 触发时机 | 说明 |
|---------|-------------|---------|------|
| `onSearch` | `{ mobile, staff, tags, dateRange }` | 点击查询按钮 | 触发列表筛选 |
| `onViewDetail` | `{ customerId }` | 点击查看详情 | 打开详情抽屉 |
| `onUpdateTags` | `{ customerIds, tags }` | 提交标签修改 | 更新客户标签 |

### 5.2 动作列表（actionList）
| 动作名称 | Params 类型 | 参数说明 | 功能描述 |
|---------|------------|---------|---------|
| `refreshList` | `void` | 无 | 刷新列表数据 |
| `openTagModal` | `{ customerIds }` | 选中客户ID列表 | 打开打标弹窗 |