# 聚合聊天 (Aggregate Chat) PRD

## 1. 概述
### 1.1 背景
集运人员需要通过平台登录托管账号，与名下客户进行消息收发。当前需要一个聚合界面来高效管理多个托管账号及其会话。

### 1.2 目标
提供一个优化的多栏布局界面，支持账号管理、消息/通讯录切换、即时通讯及基于 Iframe 的侧边栏工具集成。

## 2. 界面布局
整体布局包含 **左侧全局导航菜单** 和 **右侧业务内容区**。
业务内容区采用流式布局，从左至右包含以下 4 个主要区域：
1.  **托管账号栏 (Managed Accounts Bar)**: 极简窄侧边栏，仅展示图标/头像。
2.  **导航列表栏 (Navigation List)**: 包含“消息列表”和“通讯录”两个标签页。
3.  **聊天区域 (Chat Area)**: 核心会话窗口。
4.  **侧边栏工具 (Sidebar Tools)**: 多标签页工具区，支持 Iframe 嵌入第三方页面。

---

## 3. 功能模块详解

### 3.1 托管账号栏 (Col 1 - Narrow Sidebar)
- **展示规则**：
  - 极简设计，宽度约 60-80px。
  - **顶部固定**：“全部账号”图标。
  - **列表**：托管账号头像/图标垂直排列。
- **状态指示**：
  - **在线/离线**：头像右下角状态点。
  - **告警**：
    - 🔴 **红色感叹号**：有未读消息。
    - 🟡 **黄色感叹号**：账号异常。
- **交互**：点击切换当前筛选的账号上下文。

### 3.2 导航列表栏 (Col 2 - Tabbed Panel)
- **顶部标签 (Tabs)**：
  - **[消息列表]** (默认)
  - **[通讯录]**
- **内容区 - 消息列表**：
  - 搜索框。
  - 筛选器：未读、未回复、全部分组等。
  - 会话列表项：头像、昵称、标签、最后消息、时间、归属账号标识。
- **内容区 - 通讯录**：
  - 搜索框。
  - 联系人列表：支持按字母或分组查找。

### 3.3 聊天区域 (Col 3 - Main Area)
- **头部**：
  - 左侧：
    - **所属员工信息**：显示当前账号分配的员工姓名。
    - 客户昵称、标签、未备注手机号。
  - 右侧：
    - **电脑状态按钮**：点击查看该员工电脑的实时状态。
    - 更多操作。
- **消息区**：展示按时间顺序排列的消息流。
  - **支持类型**：
    - 文本 (Text)
    - 图片 (Image)
    - 文件 (File)
    - 小程序 (Mini Program Card)
    - H5 链接 (H5 Card)
  - **样式**：发送方（右侧蓝色气泡）、接收方（左侧白色气泡）。
  - **布局**：消息区域独立滚动，不遮挡底部输入框。
- **输入区**：
  - **布局**：固定在底部，不随消息滚动。
  - 工具栏：
    - 基础消息：表情、图片、**文件上传**。
    - **常用工具**开关：点击切换右侧侧边栏至“素材库”等工具Tab。
    - **聊天记录**开关：点击切换右侧侧边栏至“聊天记录”Tab。
  - 输入框：多行文本输入。

### 3.4 侧边栏工具 (Col 4 - Right Sidebar)
- **交互原则**：
  - **可折叠**：默认折叠，点击头部图标展开/收起。
  - **互斥展示**：侧边栏工具与聊天记录查看互斥（二选一）。
- **顶部标签 (Tabs)**：
  - **素材库**
  - **客户详情**
  - **网格工单**
  - **聊天记录** (点击聊天头部图标可自动跳转至此 Tab)
- **内容区**：
  - **通用工具**：通过 `<iframe />` 嵌入外部页面。
  - **Chat History**：
    - 展示历史消息列表，支持关键字搜索。
    - **支持时间范围筛选**：提供开始日期和结束日期的选择器，用于过滤消息记录。
    - 若当前 Tab 为“聊天记录”，则覆盖其他工具内容。

---

## 4. 数据交互 (Axure/Mock)

### 4.1 数据结构
```typescript
interface ManagedAccount {
  id: string;
  name: string;
  avatar: string; // Icon or Image
  isOnline: boolean;
  hasUnread: boolean;
  hasException: boolean;
}

interface SidebarTool {
  key: string;
  label: string;
  url: string; // Iframe URL
}
```

### 4.2 Axure API
- **Events**: `on_tool_tab_change`, `on_account_select`
- **Actions**: `reload_tool_iframe`