feat(wechat): 媒体下载结果回写与消息展示优化

- CmdDownloadVideoResult/CmdDownloadFileResult 写入 store 并调用 dataProcessing 回写地址
- 音视频/图片/文件消息组件与朋友圈卡片联动调整

Made-with: Cursor

.gitignore

@@ -3,6 +3,4 @@ dist/
 build/
 yarn.lock
 .env
-.DS_Store 
-.specstory/
-.cursorindexingignore
+.DS_Store 

docs/msgType49拆分-文章vs小程序.md

@@ -0,0 +1,338 @@
+# msgType=49 拆分：文章 vs 小程序
+
+## 📋 问题背景
+
+`msgType=49` 是一个**复合类型**，包含多种消息子类型：
+- 📰 文章/链接
+- 🎮 小程序
+- 📄 文件
+- 💰 红包
+- 💸 转账
+
+之前使用同一个 `SmallProgramMessage` 组件处理所有情况，不够精细。
+
+## 🔍 数据结构分析
+
+### 1. 文章类型特征
+
+```json
+{
+  "msgType": 49,
+  "content": "{
+    \"type\": \"link\",
+    \"title\": \"新晋打工皇帝周受资\",
+    \"desc\": \"打工人的江湖里...\",
+    \"thumbPath\": \"https://...\",
+    \"url\": \"https://mp.weixin.qq.com/s?__biz=...\",
+  }"
+}
+```
+
+**特征**：
+- ✅ `content` 是纯 JSON 格式
+- ✅ 包含 `type: "link"`
+- ✅ 包含 `title`、`url`、`desc`、`thumbPath` 字段
+- ✅ **没有** `contentXml` 字段
+- ✅ **没有** `<weappinfo>` 标签
+
+### 2. 小程序类型特征
+
+```json
+{
+  "msgType": 49,
+  "content": "[该消息内容过长已截断]{
+    \"contentXml\": \"<?xml version=\\\"1.0\\\"?>\\n<msg>\\n\\t<appmsg>...
+      <weappinfo>
+        <username>gh_335906d9a6a1@app</username>
+        <appid>wxb0656180c68edbdc</appid>
+        ...
+      </weappinfo>
+    ...\"
+  }"
+}
+```
+
+**特征**：
+- ✅ `content` 可能以 `[该消息内容过长已截断]` 开头
+- ✅ 包含 `contentXml` 字段
+- ✅ `contentXml` 内容是 XML 格式
+- ✅ 包含 `<weappinfo>` 标签
+- ✅ 包含 `gh_xxx@app` 格式的用户名
+- ✅ 包含小程序相关的 `appid`、`pagepath` 等
+
+## ✅ 解决方案
+
+### 1. 创建独立的 `ArticleMessage` 组件
+
+**文件**: `src/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageRecord/messageTypes/ArticleMessage.tsx`
+
+```typescript
+export const ArticleMessage: React.FC<ArticleMessageProps> = ({ content }) => {
+  const articleData = typeof content === "string" ? JSON.parse(content) : content;
+  const { title, desc, thumbPath, url } = articleData;
+
+  return (
+    <div onClick={() => window.open(url, "_blank")}>
+      {/* 封面图 */}
+      {thumbPath && <img src={thumbPath} />}
+
+      {/* 标题 */}
+      {title && <div>{title}</div>}
+
+      {/* 描述 */}
+      {desc && <div>{desc}</div>}
+
+      {/* 链接标识 */}
+      <div>🔗 点击查看文章</div>
+    </div>
+  );
+};
+```
+
+### 2. 更新 `messageTypeConfig.tsx`
+
+#### 移除 msgType=49 的直接配置
+
+```typescript
+// ❌ 旧方式：直接配置 msgType=49
+49: {
+  type: "小程序/文章",
+  nodeFunc: ({ content, msg, contract }) => (
+    <SmallProgramMessage content={content} msg={msg} contract={contract} />
+  ),
+},
+
+// ✅ 新方式：不配置，让检测器处理
+// 49 类型由 SPECIAL_TYPE_DETECTORS 检测器处理，不在此配置
+```
+
+#### 添加文章和小程序检测器
+
+```typescript
+export const SPECIAL_TYPE_DETECTORS = [
+  /**
+   * 文章消息（msgType=49）
+   * 优先级：92（高于小程序）
+   */
+  {
+    name: "文章",
+    priority: 92,
+    detector: (content, parsedJson) => {
+      // 方式1: 通过 type 字段
+      if (parsedJson && parsedJson.type === "link") {
+        return true;
+      }
+      // 方式2: 通过字段组合判断
+      if (
+        parsedJson &&
+        parsedJson.title &&
+        parsedJson.url &&
+        typeof parsedJson.url === "string" &&
+        parsedJson.url.startsWith("http")
+      ) {
+        // 必须有url，且不能包含小程序特征
+        return !parsedJson.contentXml && !content.includes("<weappinfo>");
+      }
+      return false;
+    },
+    nodeFunc: ({ content }) => <ArticleMessage content={content} />,
+  },
+
+  /**
+   * 小程序消息（msgType=49）
+   * 优先级：91（低于文章）
+   */
+  {
+    name: "小程序",
+    priority: 91,
+    detector: (content, parsedJson) => {
+      // 方式1: 包含 contentXml 字段
+      if (parsedJson && parsedJson.contentXml) {
+        return true;
+      }
+      // 方式2: 内容包含小程序特征标签
+      if (
+        content.includes("<weappinfo>") ||
+        content.includes("gh_") ||
+        content.includes("@app")
+      ) {
+        return true;
+      }
+      // 方式3: 包含截断前缀（通常是小程序）
+      if (content.startsWith("[该消息内容过长已截断]")) {
+        return true;
+      }
+      return false;
+    },
+    nodeFunc: ({ content, msg, contract }) => (
+      <SmallProgramMessage content={content} msg={msg} contract={contract} />
+    ),
+  },
+];
+```
+
+## 📊 判断逻辑流程
+
+```
+msgType = 49
+    ↓
+解析 content 为 JSON
+    ↓
+检测器优先级排序执行:
+    ↓
+┌─────────────────────────────────┐
+│ 1. 红包检测器 (priority: 95)    │ → 包含 nativeurl 红包链接？
+│ 2. 转账检测器 (priority: 95)    │ → title = "微信转账"？
+│ 3. 文章检测器 (priority: 92) ⭐ │ → type="link" 或 (有title+url且无contentXml)？
+│ 4. 小程序检测器 (priority: 91)⭐│ → 有contentXml 或 <weappinfo> 或 gh_@app？
+│ 5. 文件检测器 (priority: 75)    │ → type="file" 或 URL是文件扩展名？
+└─────────────────────────────────┘
+    ↓
+匹配成功 → 使用对应的 nodeFunc 渲染
+    ↓
+未匹配 → 使用 UnknownMessage 兜底
+```
+
+## 🎯 检测优先级说明
+
+| 优先级 | 类型 | 原因 |
+|--------|------|------|
+| 95 | 红包/转账 | 最高优先级，避免被误判为其他类型 |
+| **92** | **文章** | 高于小程序，因为文章结构更简单明确 |
+| **91** | **小程序** | 低于文章，避免误判文章为小程序 |
+| 85 | 视频 | 中等优先级 |
+| 80 | 图片 | 中等优先级 |
+| 75 | 文件 | 较低优先级 |
+| 70 | 表情包 | 最低优先级 |
+
+## 🔧 关键判断条件
+
+### 文章检测条件（满足任一即可）
+
+1. **主要条件**（最可靠）:
+   ```typescript
+   parsedJson.type === "link"
+   ```
+
+2. **备用条件**（字段组合）:
+   ```typescript
+   parsedJson.title &&
+   parsedJson.url &&
+   parsedJson.url.startsWith("http") &&
+   !parsedJson.contentXml &&
+   !content.includes("<weappinfo>")
+   ```
+
+### 小程序检测条件（满足任一即可）
+
+1. **主要条件**（最可靠）:
+   ```typescript
+   parsedJson.contentXml
+   ```
+
+2. **备用条件1**（XML标签）:
+   ```typescript
+   content.includes("<weappinfo>")
+   ```
+
+3. **备用条件2**（小程序账号格式）:
+   ```typescript
+   content.includes("gh_") || content.includes("@app")
+   ```
+
+4. **备用条件3**（截断标识）:
+   ```typescript
+   content.startsWith("[该消息内容过长已截断]")
+   ```
+
+## 🎨 UI 渲染效果
+
+### 文章消息
+
+```
+┌──────────────────────────────┐
+│ [封面图]                      │
+│                              │
+├──────────────────────────────┤
+│ 新晋打工皇帝周受资            │
+│                              │
+│ 打工人的江湖里，有皇帝之称的   │
+│ 唐骏，也有皇后之名的吴士宏...  │
+│                              │
+│ 🔗 点击查看文章               │
+└──────────────────────────────┘
+```
+
+### 小程序消息
+
+```
+┌──────────────────────────────┐
+│ [小程序缩略图]                │
+│                              │
+│ 八达通充值 Octopus Reloading  │
+│                              │
+│ [小程序图标] 小程序            │
+└──────────────────────────────┘
+```
+
+## 📝 使用示例
+
+### 控制台调试日志
+
+```javascript
+// 文章消息
+console.log("✅ 🔍 推导出类型: 文章 (msgType=49)");
+
+// 小程序消息
+console.log("✅ 🔍 推导出类型: 小程序 (msgType=49)");
+```
+
+### 实际运行效果
+
+当收到 `msgType=49` 的消息时：
+1. `useMessageTypeParser` Hook 检测到 `msgType=49`
+2. 在 `MESSAGE_TYPE_MAP` 中未找到直接配置
+3. 进入 `SPECIAL_TYPE_DETECTORS` 检测流程
+4. 按优先级依次执行检测器
+5. **文章检测器**（优先级92）先执行
+   - 如果 `content` 包含 `type: "link"` → 渲染 `ArticleMessage`
+6. **小程序检测器**（优先级91）后执行
+   - 如果 `content` 包含 `contentXml` → 渲染 `SmallProgramMessage`
+
+## ✅ 测试清单
+
+- [x] 文章消息正确识别并使用 `ArticleMessage` 渲染
+- [x] 小程序消息正确识别并使用 `SmallProgramMessage` 渲染
+- [x] 文件、红包、转账等其他 msgType=49 子类型不受影响
+- [x] 无 linter 错误
+- [x] 控制台有正确的调试日志
+- [x] UI 渲染效果符合预期
+
+## 🎉 总结
+
+### 核心改进
+
+1. **组件拆分**
+   - ✅ 创建独立的 `ArticleMessage.tsx` 组件
+   - ✅ `SmallProgramMessage` 专注处理小程序
+
+2. **检测逻辑**
+   - ✅ 文章检测器（优先级92）先于小程序（优先级91）
+   - ✅ 多种检测条件，容错性强
+   - ✅ 负向检测（排除非文章特征）
+
+3. **代码质量**
+   - ✅ 职责分离，组件更专注
+   - ✅ 配置化管理，易于维护
+   - ✅ 调试信息完善
+
+### 优势
+
+| 项目 | 旧方式 | 新方式 |
+|------|--------|--------|
+| **组件数量** | 1个组件处理所有 | 文章+小程序 分离 |
+| **判断位置** | 组件内部 | 配置检测器 |
+| **扩展性** | 需修改组件 | 只需添加检测器 |
+| **可读性** | 逻辑混杂 | 清晰明确 |
+
+**现在 msgType=49 的每种子类型都有专属的处理逻辑了！** 🎊

docs/msgType49拆分-真实案例测试.md

@@ -0,0 +1,159 @@
+# msgType=49 小程序消息真实案例测试
+
+## 测试案例
+
+### 案例 1：八达通充值小程序（Type 2）
+
+#### 原始数据
+```
+[该消息内容过长已截断]{"contentXml":"<?xml version=\"1.0\"?>\n<msg>\n\t<appmsg appid=\"\" sdkver=\"0\">\n\t\t<title>八达通充值 Octopus Reloading</title>\n\t\t<sourcedisplayname>八达通充值 Octopus Reloading</sourcedisplayname>\n\t\t<weappinfo>\n\t\t\t<type>2</type>\n\t\t\t<weappiconurl><![CDATA[http://wx.qlogo.cn/mmhead/K6CEv0Hv9Dd1oxclTbYft9ddwMMXMWbiaetYd5WXtiaBtRQW7JN8e2nZkKwF8pDXNianpxOYnDE1Fs/96]]></weappiconurl>\n\t\t</weappinfo>\n\t</appmsg>\n</msg>","type":"miniprogram"}
+```
+
+#### 关键信息提取
+
+| 字段 | XML 标签 | 提取值 | 说明 |
+|------|----------|--------|------|
+| 小程序标题 | `<title>` | 八达通充值 Octopus Reloading | 显示在卡片上的标题 |
+| 小程序名称 | `<sourcedisplayname>` | 八达通充值 Octopus Reloading | 显示在卡片底部 |
+| 小程序类型 | `<weappinfo><type>` | 2 | Type 2 样式（大图展示） |
+| 封面图 | `<weappiconurl>` | http://wx.qlogo.cn/mmhead/K6CEv0Hv9Dd1oxclTbYft9ddwMMXMWbiaetYd5WXtiaBtRQW7JN8e2nZkKwF8pDXNianpxOYnDE1Fs/96 | 小程序图标 |
+
+#### 处理流程
+
+1. **前缀处理**
+   ```typescript
+   // 检测并去掉 [该消息内容过长已截断] 前缀
+   const truncatedPrefix = "[该消息内容过长已截断]";
+   if (trimmedContent.startsWith(truncatedPrefix)) {
+     trimmedContent = trimmedContent.substring(truncatedPrefix.length);
+   }
+   ```
+
+2. **JSON 解析**
+   ```typescript
+   const messageData = JSON.parse(trimmedContent);
+   // messageData = { contentXml: "<?xml version...", type: "miniprogram" }
+   ```
+
+3. **完整解析尝试**
+   ```typescript
+   try {
+     // 尝试使用 parseWeappMsgStr 完整解析
+     const parsedData = parseWeappMsgStr(trimmedContent);
+   } catch (parseError) {
+     // 如果失败（例如缺少必要字段），使用 fallback
+   }
+   ```
+
+4. **Fallback 提取**
+   ```typescript
+   // 使用正则表达式从 XML 中提取关键信息
+   const fallbackInfo = extractMiniProgramInfoFromTruncatedXml(messageData.contentXml);
+
+   // 提取结果:
+   // {
+   //   title: "八达通充值 Octopus Reloading",
+   //   appName: "八达通充值 Octopus Reloading",
+   //   miniProgramType: 2,
+   //   previewImage: "http://wx.qlogo.cn/mmhead/..."
+   // }
+   ```
+
+5. **渲染小程序卡片**
+   ```tsx
+   // 根据 miniProgramType = 2，渲染 Type 2 样式
+   <div className={`${styles.miniProgramMessage} ${styles.miniProgramType2}`}>
+     <div className={`${styles.miniProgramCard} ${styles.miniProgramCardType2}`}>
+       <div className={styles.miniProgramAppTop}>八达通充值 Octopus Reloading</div>
+       <div className={styles.miniProgramTitle}>八达通充值 Octopus Reloading</div>
+       <div className={styles.miniProgramImageArea}>
+         <img src="http://wx.qlogo.cn/mmhead/..." alt="小程序图片" />
+       </div>
+       <div className={styles.miniProgramContent}>
+         <div className={styles.miniProgramIdentifier}>小程序</div>
+       </div>
+     </div>
+   </div>
+   ```
+
+## 正则表达式说明
+
+### 1. 提取 title
+```javascript
+/<title><!\[CDATA\[(.*?)\]\]><\/title>/i  // 支持 CDATA 格式
+/<title>([^<]+)<\/title>/i                 // 支持普通格式
+```
+
+**示例匹配：**
+- `<title>八达通充值 Octopus Reloading</title>` ✅
+- `<title><![CDATA[八达通充值]]></title>` ✅
+- `<title />` ❌ 过滤空标签
+
+### 2. 提取 sourcedisplayname
+```javascript
+/<sourcedisplayname><!\[CDATA\[(.*?)\]\]><\/sourcedisplayname>/i
+/<sourcedisplayname>([^<]+)<\/sourcedisplayname>/i
+```
+
+**示例匹配：**
+- `<sourcedisplayname>八达通充值 Octopus Reloading</sourcedisplayname>` ✅
+
+### 3. 提取 weappinfo.type
+```javascript
+/<weappinfo>[\s\S]*?<type><!\[CDATA\[(.*?)\]\]><\/type>/i
+/<weappinfo>[\s\S]*?<type>([^<]+)<\/type>/i
+```
+
+**示例匹配：**
+- `<weappinfo>...<type>2</type>...</weappinfo>` ✅
+- `[\s\S]*?` 匹配任意字符（包括换行）
+
+### 4. 提取 weappiconurl
+```javascript
+/<weappiconurl><!\[CDATA\[(.*?)\]\]><\/weappiconurl>/i
+/<weappiconurl>([^<]+)<\/weappiconurl>/i
+```
+
+**示例匹配：**
+- `<weappiconurl><![CDATA[http://wx.qlogo.cn/...]]></weappiconurl>` ✅
+- 自动清理 CDATA 标记、引号和 `&amp;`
+
+## 调试日志
+
+当消息被正确处理时，控制台会输出：
+
+```
+✅ 提取到小程序标题: 八达通充值 Octopus Reloading
+✅ 提取到小程序名称 (sourcedisplayname): 八达通充值 Octopus Reloading
+✅ 提取到小程序类型: 2
+✅ 提取到小程序封面: http://wx.qlogo.cn/mmhead/K6CEv0Hv9Dd1oxclTbYft9ddwMMXMWbiaetYd5WXtiaBtRQW7JN8e2nZkKwF8pDXNianpxOYnDE1Fs/96
+✅ XML 信息提取成功: {title: "八达通充值 Octopus Reloading", appName: "八达通充值 Octopus Reloading", miniProgramType: 2, previewImage: "http://..."}
+```
+
+## 容错能力
+
+### ✅ 支持的情况
+1. **完整 XML** - 使用 `parseWeappMsgStr` 完整解析
+2. **残缺 XML** - 使用正则提取关键字段
+3. **带前缀** - 自动去除 `[该消息内容过长已截断]`
+4. **CDATA 格式** - 支持 `<![CDATA[...]]>` 包裹的内容
+5. **空标签** - 自动过滤 `<title />` 等空标签
+6. **转义字符** - 自动处理 `&amp;` 等 HTML 实体
+
+### ❌ 不支持的情况
+1. **关键字段缺失** - 如果 `title` 和 `sourcedisplayname` 都不存在，返回 null
+2. **无效 URL** - 如果 `weappiconurl` 不包含 "http"，不提取
+3. **非小程序消息** - 如果没有 `<weappinfo>` 标签，可能无法识别类型
+
+## 文件位置
+
+- **组件文件**: `src/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageRecord/components/SmallProgramMessage/index.tsx`
+- **提取函数**: `extractMiniProgramInfoFromTruncatedXml`（第 11-117 行）
+- **调用位置**:
+  - `contentXml` 检测路径（第 194 行）
+  - `type === "miniprogram"` 兼容路径（第 346 行）
+
+## 相关文档
+
+- [消息类型配置指南](./消息类型配置指南.md)
+- [msgType49拆分-文章vs小程序](./msgType49拆分-文章vs小程序.md)

docs/文件消息迁移说明.md

@@ -0,0 +1,253 @@
+# 文件消息迁移说明
+
+## 📋 迁移概述
+
+将旧项目中的文件类型消息处理逻辑迁移到新的消息类型配置系统中，创建独立的 `FileMessage` 组件。
+
+---
+
+## 📁 文件结构
+
+### **新增文件**
+
+```
+src/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageRecord/
+├── components/
+│   └── FileMessage/                    # ✅ 新增：独立的文件消息组件
+│       ├── index.tsx                   # 文件消息组件主文件
+│       └── FileMessage.module.scss     # 文件消息样式
+└── messageTypes/
+    ├── MsgType49Renderer.tsx           # ✅ 已更新：添加文件检测
+    └── messageTypeConfig.tsx           # ✅ 已更新：添加文件检测器
+```
+
+---
+
+## 🔧 核心变更
+
+### 1. **创建独立的 FileMessage 组件**
+
+**位置**：`components/FileMessage/index.tsx`
+
+**功能**：
+- 从旧的 `SmallProgramMessage` 中提取文件处理逻辑
+- 支持多种文件信息提取方式（JSON、XML、元数据）
+- 实现文件下载和查看功能
+- 根据文件扩展名显示对应图标
+
+**关键方法**：
+- `extractFileInfoFromXml()` - 从XML提取文件信息
+- `resolveFileMessageData()` - 按优先级解析文件数据
+- `handleFileDownload()` - 处理文件下载逻辑
+
+---
+
+### 2. **更新 MsgType49Renderer**
+
+**位置**：`messageTypes/MsgType49Renderer.tsx`
+
+**变更**：
+- 添加 `isFileMessage()` 检测函数
+- 在渲染器中将文件消息检测提升为最高优先级
+- 优先于小程序消息检测，避免误判
+
+**检测逻辑**：
+```typescript
+// 优先级顺序：
+// 1. 文件消息检测（新增）
+// 2. 文章消息检测
+// 3. 小程序消息检测
+// 4. 兜底处理
+```
+
+---
+
+### 3. **添加文件类型检测器**
+
+**位置**：`messageTypes/messageTypeConfig.tsx`
+
+**变更**：
+- 在 `SPECIAL_TYPE_DETECTORS` 中添加文件检测器
+- 优先级设置为 90（高于图片、表情包，低于红包、转账）
+- 用于处理未知 msgType 但内容特征明显的文件消息
+
+**检测条件**：
+1. JSON 中 `type === "file"`
+2. JSON 中 `contentXml` 包含文件标签
+3. 原始内容包含文件XML标签（排除小程序）
+
+---
+
+## 📊 文件消息识别方式
+
+### **方式1：JSON格式**
+```json
+{
+  "type": "file",
+  "title": "文件名.pdf",
+  "url": "https://...",
+  "fileext": "pdf",
+  "size": 1024
+}
+```
+
+### **方式2：JSON + XML**
+```json
+{
+  "type": "file",
+  "contentXml": "<title>文件名</title><fileext>pdf</fileext>"
+}
+```
+
+### **方式3：纯XML格式**
+```xml
+<msg>
+  <title><![CDATA[文件名.pdf]]></title>
+  <fileext><![CDATA[pdf]]></fileext>
+  <totallen>1024</totallen>
+</msg>
+```
+
+### **方式4：消息元数据**
+```typescript
+msg.fileDownloadMeta = {
+  title: "文件名.pdf",
+  url: "https://...",
+  fileext: "pdf"
+}
+```
+
+---
+
+## 🎯 数据解析优先级
+
+在 `resolveFileMessageData()` 函数中：
+
+1. **最高优先级**：JSON 中 `type === "file"`
+2. **次优先级**：JSON 中 `contentXml` 字段
+3. **第三优先级**：原始内容解析为 XML
+4. **最低优先级**：`msg.fileDownloadMeta` 元数据
+
+---
+
+## 🎨 UI 特性
+
+### **文件图标映射**
+- 📕 PDF
+- 📘 Word (doc/docx)
+- 📗 Excel (xls/xlsx)
+- 📙 PowerPoint (ppt/pptx)
+- 📝 文本 (txt)
+- 🗜️ 压缩包 (zip/rar/7z)
+- 🖼️ 图片 (jpg/png/gif)
+- 🎬 视频 (mp4/avi/mov)
+- 🎵 音频 (mp3/wav/flac)
+- 📄 默认
+
+### **交互行为**
+- **有URL**：显示"点击查看"，直接打开文件
+- **无URL**：显示"下载"按钮，触发下载命令
+- **下载中**：显示"下载中..."，禁用操作
+
+### **文件名显示**
+- 超过20字符自动截断
+- 显示省略号
+
+---
+
+## 🔄 下载流程
+
+```typescript
+// 1. 设置下载状态
+setFileDownloading(msg.id, true);
+
+// 2. 发送下载命令
+sendCommand("CmdDownloadFile", {
+  wechatAccountId: contract.wechatAccountId,
+  friendMessageId: contract.chatroomId ? 0 : msg.id,      // 好友消息
+  chatroomMessageId: contract.chatroomId ? msg.id : 0,    // 群聊消息
+});
+
+// 3. 下载完成后，通过 WebSocket 回调更新文件URL
+// 状态在 weChatStore 中管理
+```
+
+---
+
+## ✅ 迁移完成清单
+
+- [x] 创建独立的 `FileMessage` 组件
+- [x] 提取文件信息解析逻辑
+- [x] 实现文件下载功能
+- [x] 添加文件图标映射
+- [x] 更新 `MsgType49Renderer` 添加文件检测
+- [x] 在 `SPECIAL_TYPE_DETECTORS` 中添加文件检测器
+- [x] 创建样式文件
+- [x] 代码检查和测试
+
+---
+
+## 📝 使用示例
+
+### **在消息类型配置中使用**
+
+文件消息会在以下场景自动识别：
+
+1. **msgType = 49** 且内容是文件 → 通过 `MsgType49Renderer` 识别
+2. **未知 msgType** 但内容特征明显 → 通过 `SPECIAL_TYPE_DETECTORS` 识别
+
+### **组件调用**
+
+```typescript
+<FileMessage
+  content={msg.content}
+  msg={msg}
+  contract={contract}
+  parsedJson={parsedJson}  // 可选：已解析的JSON
+/>
+```
+
+---
+
+## 🔍 测试要点
+
+1. **文件识别测试**
+   - JSON格式文件消息
+   - XML格式文件消息
+   - 混合格式文件消息
+   - 通过元数据的文件消息
+
+2. **下载功能测试**
+   - 好友消息文件下载
+   - 群聊消息文件下载
+   - 下载状态更新
+   - 下载错误处理
+
+3. **UI显示测试**
+   - 文件图标正确显示
+   - 文件名截断
+   - 操作按钮状态
+   - 响应式布局
+
+---
+
+## 📚 相关文件
+
+- **旧代码参考**：`Touchkebao/src/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageRecord/components/SmallProgramMessage/index.tsx`
+- **新组件**：`Touchkebao2/.../FileMessage/index.tsx`
+- **配置更新**：`Touchkebao2/.../messageTypes/messageTypeConfig.tsx`
+- **渲染器更新**：`Touchkebao2/.../messageTypes/MsgType49Renderer.tsx`
+
+---
+
+## 💡 注意事项
+
+1. **优先级**：文件检测优先于小程序检测，避免误判
+2. **兼容性**：保持与旧版 `SmallProgramMessage` 的兼容性
+3. **状态管理**：文件下载状态通过 `weChatStore.setFileDownloading()` 管理
+4. **错误处理**：所有解析错误都有兜底处理，显示友好提示
+
+---
+
+**迁移完成时间**：2025-01-21
+**迁移负责人**：AI Assistant

docs/文件类型消息解析分析报告.md

@@ -0,0 +1,448 @@
+# 文件类型消息解析分析报告
+
+## 📋 概述
+
+本文档分析旧逻辑中文件类型消息的解析方式，包括判断方法、数据结构特征和消息样本特征。
+
+---
+
+## 🔍 文件类型判断方式
+
+### 1. **通过 URL 扩展名判断**
+
+```typescript
+const FILE_EXT_REGEX = /\.(pdf|doc|docx|xls|xlsx|ppt|pptx|txt|zip|rar|7z)$/i;
+
+const isFileUrl = (value: string) =>
+  isHttpUrl(value) && FILE_EXT_REGEX.test(value);
+```
+
+**支持的文件类型**：
+- PDF: `.pdf`
+- Word: `.doc`, `.docx`
+- Excel: `.xls`, `.xlsx`
+- PowerPoint: `.ppt`, `.pptx`
+- 文本: `.txt`
+- 压缩包: `.zip`, `.rar`, `.7z`
+
+**判断条件**：
+- 必须是 HTTP/HTTPS URL
+- 扩展名匹配上述正则表达式
+
+---
+
+### 2. **通过 JSON 内容判断**
+
+```typescript
+const jsonData = JSON.parse(content);
+if (jsonData && typeof jsonData === "object" && jsonData.type === "file") {
+  // 文件类型消息
+}
+```
+
+**JSON 结构特征**：
+```json
+{
+  "type": "file",
+  "title": "文件名",
+  "fileName": "文件名",
+  "filename": "文件名",
+  "url": "文件下载URL",
+  "fileext": "文件扩展名",
+  "size": 文件大小,
+  "contentXml": "XML格式的文件信息（可选）"
+}
+```
+
+---
+
+### 3. **通过 XML 内容判断**
+
+从 XML 字符串中提取文件信息：
+
+```typescript
+const extractFileInfoFromXml = (source: string): FileMessageData | null => {
+  // 使用 DOMParser 解析 XML
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(source, "text/xml");
+
+  // 提取信息
+  const titleNode = doc.getElementsByTagName("title")[0];
+  const fileExtNode = doc.getElementsByTagName("fileext")[0];
+  const sizeNode = doc.getElementsByTagName("totallen")[0]
+                || doc.getElementsByTagName("filesize")[0];
+}
+```
+
+**XML 结构特征**：
+
+**格式1（CDATA）**：
+```xml
+<msg>
+  <title><![CDATA[文件名]]></title>
+  <fileext><![CDATA[pdf]]></fileext>
+  <totallen>1024</totallen>
+</msg>
+```
+
+**格式2（普通XML）**：
+```xml
+<msg>
+  <title>文件名</title>
+  <fileext>pdf</fileext>
+  <filesize>1024</filesize>
+</msg>
+```
+
+**正则匹配（备用方案）**：
+```typescript
+// 标题
+/<title><!\[CDATA\[(.*?)\]\]><\/title>/i
+/<title>([^<]+)<\/title>/i
+
+// 扩展名
+/<fileext><!\[CDATA\[(.*?)\]\]><\/fileext>/i
+/<fileext>([^<]+)<\/fileext>/i
+
+// 文件大小
+/<totallen>([^<]+)<\/totallen>/i
+/<filesize>([^<]+)<\/filesize>/i
+```
+
+---
+
+### 4. **通过消息元数据判断**
+
+从 `msg.fileDownloadMeta` 对象获取文件信息：
+
+```typescript
+const meta = msg?.fileDownloadMeta && typeof msg.fileDownloadMeta === "object"
+  ? { ...(msg.fileDownloadMeta as Record<string, any>) }
+  : null;
+```
+
+**元数据结构**：
+```typescript
+interface FileDownloadMeta {
+  url?: string;
+  fileName?: string;
+  filename?: string;
+  title?: string;
+  fileext?: string;
+  size?: number | string;
+  isDownloading?: boolean;
+  [key: string]: any;
+}
+```
+
+---
+
+## 📊 消息类型样本特征
+
+### **场景1：msgType = 49（小程序/文件消息）**
+
+```typescript
+case 49: // 小程序/文章/其他：图文、文件
+  return (
+    <SmallProgramMessage
+      content={content}
+      msg={msg}
+      contract={contract}
+    />
+  );
+```
+
+**内容格式**：
+- **JSON 字符串**：包含 `type: "file"` 的对象
+- **XML 字符串**：包含文件信息的 XML
+- **混合格式**：JSON 中包含 `contentXml` 字段
+
+---
+
+### **场景2：未知消息类型（renderUnknownContent）**
+
+当 `msgType` 不匹配已知类型时，会尝试解析为文件：
+
+```typescript
+const jsonData = tryParseContentJson(trimmedContent);
+if (jsonData && typeof jsonData === "object") {
+  if (jsonData.type === "file" && msg && contract) {
+    return <SmallProgramMessage ... />;
+  }
+}
+
+if (isFileUrl(trimmedContent)) {
+  return renderFileContent(trimmedContent);
+}
+```
+
+---
+
+## 🎯 文件消息数据解析流程
+
+### **解析优先级**（从高到低）
+
+1. **JSON 对象中的 type 字段**
+   ```json
+   { "type": "file", ... }
+   ```
+
+2. **JSON 对象中的 contentXml 字段**
+   ```json
+   {
+     "contentXml": "<title>...</title><fileext>...</fileext>"
+   }
+   ```
+
+3. **原始内容中的 XML**
+   ```xml
+   <title>文件名</title>
+   <fileext>pdf</fileext>
+   ```
+
+4. **消息元数据（fileDownloadMeta）**
+   ```typescript
+   msg.fileDownloadMeta = {
+     url: "...",
+     fileName: "..."
+   }
+   ```
+
+5. **URL 扩展名匹配**
+   ```
+   https://example.com/file.pdf
+   ```
+
+---
+
+## 📝 文件消息数据结构
+
+### **完整的文件数据结构**
+
+```typescript
+interface FileMessageData {
+  type: "file";                    // 固定值
+  title?: string;                  // 文件名（优先级1）
+  fileName?: string;               // 文件名（优先级2）
+  filename?: string;               // 文件名（优先级3）
+  url?: string;                    // 文件下载URL
+  fileext?: string;                // 文件扩展名
+  size?: number | string;          // 文件大小
+  isDownloading?: boolean;         // 是否正在下载
+  contentXml?: string;             // XML格式的文件信息
+  [key: string]: any;              // 其他扩展字段
+}
+```
+
+---
+
+## 🔧 文件渲染逻辑
+
+### **1. 简单文件渲染（renderFileContent）**
+
+适用于直接是文件 URL 的情况：
+
+```typescript
+const renderFileContent = (url: string) => {
+  const fileName = url.split("/").pop()?.split("?")[0] || "文件";
+  const displayName = fileName.length > 20
+    ? `${fileName.substring(0, 20)}...`
+    : fileName;
+
+  return (
+    <div className={styles.fileMessage}>
+      <div className={styles.fileCard}>
+        <div className={styles.fileIcon}>📄</div>
+        <div className={styles.fileInfo}>
+          <div className={styles.fileName}>{displayName}</div>
+          <div className={styles.fileAction} onClick={() => openInNewTab(url)}>
+            点击查看
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+```
+
+---
+
+### **2. 复杂文件渲染（SmallProgramMessage）**
+
+适用于需要下载的文件：
+
+```typescript
+// 文件图标映射
+const iconMap: Record<string, string> = {
+  pdf: "📕",
+  doc: "📘", docx: "📘",
+  xls: "📗", xlsx: "📗",
+  ppt: "📙", pptx: "📙",
+  txt: "📝",
+  zip: "🗜️", rar: "🗜️", "7z": "🗜️",
+  jpg: "🖼️", jpeg: "🖼️", png: "🖼️", gif: "🖼️",
+  mp4: "🎬", avi: "🎬", mov: "🎬",
+  mp3: "🎵", wav: "🎵", flac: "🎵",
+};
+
+// 文件操作
+- 如果有 URL：显示"点击查看"，直接打开
+- 如果没有 URL：显示"下载"按钮，调用下载接口
+- 下载中：显示"下载中..."，禁用操作
+```
+
+---
+
+## 📋 消息样本示例
+
+### **示例1：JSON 格式文件消息**
+
+```json
+{
+  "type": "file",
+  "title": "项目报告.pdf",
+  "fileName": "项目报告.pdf",
+  "url": "https://example.com/files/report.pdf",
+  "fileext": "pdf",
+  "size": 2048576
+}
+```
+
+---
+
+### **示例2：XML 格式文件消息**
+
+```xml
+<msg>
+  <title><![CDATA[数据表格.xlsx]]></title>
+  <fileext><![CDATA[xlsx]]></fileext>
+  <totallen>1048576</totallen>
+</msg>
+```
+
+---
+
+### **示例3：混合格式（JSON + XML）**
+
+```json
+{
+  "type": "file",
+  "contentXml": "<title>演示文档.pptx</title><fileext>pptx</fileext><filesize>5242880</filesize>"
+}
+```
+
+---
+
+### **示例4：直接文件URL**
+
+```
+https://cdn.example.com/files/document.docx
+```
+
+---
+
+### **示例5：通过 fileDownloadMeta**
+
+```typescript
+{
+  msgType: 49,
+  content: "...",
+  fileDownloadMeta: {
+    url: "https://example.com/file.pdf",
+    fileName: "重要文件.pdf",
+    fileext: "pdf",
+    size: 1024000,
+    isDownloading: false
+  }
+}
+```
+
+---
+
+## 🔄 文件下载流程
+
+### **下载命令**
+
+```typescript
+sendCommand("CmdDownloadFile", {
+  wechatAccountId: contract.wechatAccountId,
+  friendMessageId: contract.chatroomId ? 0 : msg.id,
+  chatroomMessageId: contract.chatroomId ? msg.id : 0,
+});
+```
+
+**状态管理**：
+- `setFileDownloading(msg.id, true)` - 设置下载状态
+- `isDownloading` - 判断是否正在下载
+
+---
+
+## 📌 关键特征总结
+
+### **判断文件类型消息的关键点**
+
+1. ✅ **msgType === 49** 且内容符合文件格式
+2. ✅ **URL 扩展名匹配** `FILE_EXT_REGEX`
+3. ✅ **JSON 中 `type === "file"`**
+4. ✅ **XML 中包含文件信息标签**（`<title>`, `<fileext>`, `<totallen>`）
+5. ✅ **存在 `msg.fileDownloadMeta` 元数据**
+
+### **文件信息提取顺序**
+
+1. `messageData.type === "file"` （JSON对象）
+2. `messageData.contentXml` （XML字符串）
+3. `rawContent` 直接解析为 XML
+4. `msg.fileDownloadMeta` （消息元数据）
+
+### **文件信息字段优先级**
+
+**文件名**：
+1. `title`
+2. `fileName`
+3. `filename`
+4. URL 中的文件名
+
+**文件扩展名**：
+1. `fileext`
+2. 从文件名中提取
+
+**文件大小**：
+1. `<totallen>` (XML)
+2. `<filesize>` (XML)
+3. `size` (JSON)
+
+---
+
+## 🎨 UI 渲染特征
+
+- **文件卡片样式**：`.fileMessage > .fileCard`
+- **文件图标**：根据扩展名显示不同图标
+- **文件名**：超过20字符自动截断
+- **操作按钮**：
+  - 有 URL：`点击查看`
+  - 无 URL 未下载：`下载`
+  - 下载中：`下载中...`（禁用）
+
+---
+
+## 💡 注意事项
+
+1. **文件类型判断是多层次的**，需要按优先级依次尝试
+2. **XML 解析需要兼容多种格式**（CDATA 和普通文本）
+3. **文件下载需要区分好友消息和群聊消息**
+4. **文件大小可能是字符串或数字**，需要统一处理
+5. **文件名可能包含特殊字符**，需要妥善处理显示
+
+---
+
+## 📚 相关代码位置
+
+- **文件类型判断**：`MessageRecord/index.tsx` (line 21, 115-116, 339-340)
+- **文件内容渲染**：`MessageRecord/index.tsx` (line 92-110)
+- **复杂文件处理**：`components/SmallProgramMessage/index.tsx`
+- **文件信息提取**：`components/SmallProgramMessage/index.tsx` (line 27-99, 101-151)
+
+---
+
+**文档生成时间**：2025-01-21
+**分析基于**：旧版 MessageRecord 组件逻辑

docs/消息类型快速参考.md

@@ -0,0 +1,145 @@
+# 消息类型配置 - 快速参考
+
+## 📍 核心配置位置
+
+**文件**: `src/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageRecord/messageTypes/messageTypeConfig.tsx`
+
+## 🚀 添加新类型（3步）
+
+### 1. 简单类型（直接添加）
+
+```typescript
+export const MESSAGE_TYPE_MAP: Record<number, MessageTypeConfig> = {
+  // ... 现有配置
+
+  // ⭐ 添加你的新类型
+  12345: {
+    type: "新类型名称",
+    nodeFunc: ({ content, parsedJson }) => (
+      <div>{content}</div>
+    ),
+  },
+}
+```
+
+### 2. 复杂类型（创建组件）
+
+```bash
+# 创建组件文件
+src/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageRecord/messageTypes/YourMessage.tsx
+```
+
+```typescript
+// YourMessage.tsx
+export const YourMessage: React.FC<Props> = ({ content }) => {
+  return <div>{content}</div>;
+};
+
+// messageTypeConfig.tsx 中引入
+import { YourMessage } from "./YourMessage";
+
+12345: {
+  type: "复杂类型",
+  nodeFunc: (props) => <YourMessage {...props} />,
+}
+```
+
+### 3. 未知 msgType（内容推导）
+
+```typescript
+// 添加到 SPECIAL_TYPE_DETECTORS 数组
+export const SPECIAL_TYPE_DETECTORS = [
+  {
+    name: "新类型",
+    priority: 95,
+    detector: (content, json) => {
+      return json && json.yourField === "value";
+    },
+    nodeFunc: ({ content }) => <div>{content}</div>,
+  },
+];
+```
+
+## 📋 可用属性
+
+```typescript
+nodeFunc: ({
+  content,      // 原始内容字符串
+  parsedJson,   // 解析后的 JSON（如果是 JSON）
+  msg,          // 完整消息对象
+  contract,     // 联系人/群聊对象
+  parseEmojiText, // 表情解析函数
+  isEmojiUrl,   // 表情URL判断函数
+}) => React.ReactNode
+```
+
+## 🎯 常见场景
+
+### 场景1: 知道 msgType
+
+```typescript
+888: {
+  type: "游戏",
+  nodeFunc: ({ parsedJson }) => (
+    <div>游戏: {parsedJson.gameName}</div>
+  ),
+}
+```
+
+### 场景2: 不知道 msgType，通过 JSON 推导
+
+```typescript
+{
+  name: "游戏消息",
+  priority: 90,
+  detector: (_, json) => json && json.type === "game",
+  nodeFunc: ({ parsedJson }) => (
+    <div>游戏: {parsedJson.gameName}</div>
+  ),
+}
+```
+
+### 场景3: 通过内容关键词推导
+
+```typescript
+{
+  name: "特殊消息",
+  priority: 85,
+  detector: (content) => content.includes("[特殊标记]"),
+  nodeFunc: ({ content }) => <div>{content}</div>,
+}
+```
+
+## 🔍 调试
+
+打开控制台查看：
+- `✅ 使用 msgType=1 (文本)` - 找到配置
+- `🔍 推导出类型: 红包` - 通过 detector 推导
+- `⚠️ 未识别的消息类型` - 需要添加配置
+
+## 📝 实例示例
+
+给你一个新类型实例：
+
+```json
+{
+  "msgType": 888,
+  "content": "{\"type\":\"card\",\"title\":\"名片\",\"avatar\":\"https://...\"}"
+}
+```
+
+**添加配置**:
+
+```typescript
+888: {
+  type: "名片",
+  nodeFunc: ({ parsedJson }) => (
+    <div style={{ display: "flex", gap: "8px" }}>
+      <img src={parsedJson.avatar} style={{ width: "48px" }} />
+      <div>{parsedJson.title}</div>
+    </div>
+  ),
+}
+```
+
+完成！✨

docs/消息类型迁移记录.md

@@ -0,0 +1,146 @@
+# 消息类型配置迁移完成 ✅
+
+## 📦 迁移内容
+
+### 从
+```
+src/utils/messageTypes/
+├── TextMessage.tsx
+├── ImageMessage.tsx
+├── EmojiMessage.tsx
+├── UnknownMessage.tsx
+└── messageTypeConfig.tsx
+```
+
+### 迁移到
+```
+src/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageRecord/
+└── messageTypes/
+    ├── TextMessage.tsx
+    ├── ImageMessage.tsx
+    ├── EmojiMessage.tsx
+    ├── UnknownMessage.tsx
+    └── messageTypeConfig.tsx  ⭐ 核心配置文件
+```
+
+## 🎯 就近原则优势
+
+1. **更好的组织结构**
+   - 消息类型配置与 MessageRecord 组件在同一目录
+   - 相关文件就近放置，便于维护
+
+2. **更清晰的依赖关系**
+   - 样式文件路径更短：`../com.module.scss`
+   - 组件引用更直接：`../components/AudioMessage`
+
+3. **更易于理解**
+   - 查看 MessageRecord 组件时，可以直接看到所有消息类型配置
+   - 新人更容易理解代码结构
+
+## 🔄 变更内容
+
+### 1. 文件路径更新
+
+**样式文件引用**
+```typescript
+// 旧路径
+import styles from "@/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageRecord/com.module.scss";
+
+// 新路径（相对路径）
+import styles from "../com.module.scss";
+```
+
+**组件引用**
+```typescript
+// 旧路径
+import AudioMessage from "@/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageRecord/components/AudioMessage/AudioMessage";
+
+// 新路径（相对路径）
+import AudioMessage from "../components/AudioMessage/AudioMessage";
+```
+
+### 2. Hook 导入路径更新
+
+**`useMessageTypeParser.tsx`**
+```typescript
+// 旧导入
+import {
+  MESSAGE_TYPE_MAP,
+  SPECIAL_TYPE_DETECTORS,
+  UNKNOWN_MESSAGE_CONFIG,
+} from "@/utils/messageTypes/messageTypeConfig";
+
+// 新导入
+import {
+  MESSAGE_TYPE_MAP,
+  SPECIAL_TYPE_DETECTORS,
+  UNKNOWN_MESSAGE_CONFIG,
+} from "@/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageRecord/messageTypes/messageTypeConfig";
+```
+
+### 3. 删除的文件
+
+已删除旧位置的文件：
+- `src/utils/messageTypes/TextMessage.tsx`
+- `src/utils/messageTypes/ImageMessage.tsx`
+- `src/utils/messageTypes/EmojiMessage.tsx`
+- `src/utils/messageTypes/UnknownMessage.tsx`
+- `src/utils/messageTypes/messageTypeConfig.tsx`
+
+## 📝 文档更新
+
+已更新以下文档中的路径说明：
+- ✅ `docs/消息类型配置指南.md`
+- ✅ `docs/消息类型快速参考.md`
+
+## 🎉 迁移结果
+
+- ✅ 无 linter 错误
+- ✅ 所有路径已更新
+- ✅ 文档已同步更新
+- ✅ 旧文件已清理
+
+## 📍 新的文件位置
+
+**核心配置文件**:
+```
+src/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageRecord/messageTypes/messageTypeConfig.tsx
+```
+
+**添加新类型时**，直接在这个文件中修改 `MESSAGE_TYPE_MAP` 对象即可！
+
+## 🚀 使用方式（无变化）
+
+使用方式完全不变：
+
+```typescript
+// 在组件中使用
+import { useMessageTypeParser } from "@/hooks/weChat/useMessageTypeParser";
+
+const { parseMessageContent } = useMessageTypeParser(contract);
+
+// 渲染消息
+{parseMessageContent(msg.content, msg, msg.msgType)}
+```
+
+## 📚 目录结构对比
+
+### 迁移前
+```
+src/
+├── utils/
+│   └── messageTypes/  ❌ 与使用位置距离较远
+└── pages/
+    └── pc/ckbox/weChat/components/ChatWindow/components/MessageRecord/
+        └── index.tsx  （使用 messageTypes）
+```
+
+### 迁移后
+```
+src/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageRecord/
+├── messageTypes/  ✅ 就近原则
+│   └── messageTypeConfig.tsx
+└── index.tsx  （使用 messageTypes）
+```
+
+迁移完成！🎊

docs/消息类型配置指南.md

@@ -0,0 +1,376 @@
+# 消息类型配置系统
+
+## 📁 文件结构
+
+```
+src/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageRecord/
+├── messageTypes/                       # 📌 消息类型配置目录
+│   ├── TextMessage.tsx                # 文本消息组件
+│   ├── ImageMessage.tsx               # 图片消息组件
+│   ├── EmojiMessage.tsx               # 表情包消息组件
+│   ├── UnknownMessage.tsx             # 未知类型消息组件
+│   └── messageTypeConfig.tsx          # 📌 核心配置文件
+├── components/                         # 其他消息组件
+│   ├── AudioMessage/
+│   ├── VideoMessage/
+│   ├── SmallProgramMessage/
+│   └── ...
+└── index.tsx                           # MessageRecord 主组件
+
+src/hooks/weChat/
+└── useMessageTypeParser.tsx            # 新版解析 Hook
+```
+
+## 🎯 核心配置对象
+
+在 `MessageRecord/messageTypes/messageTypeConfig.tsx` 中，所有消息类型都通过一个对象配置：
+
+```typescript
+export const MESSAGE_TYPE_MAP: Record<number, MessageTypeConfig> = {
+  1: {
+    type: "文本",
+    nodeFunc: ({ content, parseEmojiText }) => (
+      <TextMessage content={content} parseEmojiText={parseEmojiText} />
+    ),
+  },
+
+  3: {
+    type: "图片",
+    nodeFunc: ({ content }) => <ImageMessage content={content} />,
+    detector: (content) => /^https?:\/\/.*\.(jpg|jpeg|png|gif)$/i.test(content),
+    priority: 80,
+  },
+
+  // ... 更多类型
+}
+```
+
+### 配置接口说明
+
+```typescript
+interface MessageTypeConfig {
+  type: string;                          // 类型名称（用于调试）
+  nodeFunc: (props) => React.ReactNode;  // 渲染函数
+  detector?: (content, json) => boolean; // 内容检测器（可选）
+  priority?: number;                     // 优先级（可选）
+}
+```
+
+## 🔧 添加新消息类型
+
+### 方式1: 已知 msgType（推荐）
+
+当你知道服务器返回的 `msgType` 时，直接在配置对象中添加：
+
+```typescript
+// 在 MessageRecord/messageTypes/messageTypeConfig.tsx 中添加
+export const MESSAGE_TYPE_MAP: Record<number, MessageTypeConfig> = {
+  // ... 现有配置
+
+  /**
+   * msgType = 12345: 新的自定义类型
+   */
+  12345: {
+    type: "自定义类型",
+    nodeFunc: ({ content, parsedJson }) => {
+      // 直接在这里写渲染逻辑（简单情况）
+      return <div style={{ color: "red" }}>{content}</div>;
+    },
+  },
+}
+```
+
+### 方式2: 创建独立组件（推荐用于复杂逻辑）
+
+**步骤1**: 创建组件文件 `src/utils/messageTypes/CustomMessage.tsx`
+
+```typescript
+import React from "react";
+
+interface CustomMessageProps {
+  content: string;
+  customData: any;
+}
+
+export const CustomMessage: React.FC<CustomMessageProps> = ({ content, customData }) => {
+  return (
+    <div style={{ border: "1px solid blue", padding: "8px" }}>
+      <div>自定义消息</div>
+      <div>{content}</div>
+      <div>额外数据: {JSON.stringify(customData)}</div>
+    </div>
+  );
+};
+```
+
+**步骤2**: 在配置中引入
+
+```typescript
+// messageTypeConfig.tsx
+import { CustomMessage } from "./CustomMessage";
+
+export const MESSAGE_TYPE_MAP: Record<number, MessageTypeConfig> = {
+  // ... 现有配置
+
+  12345: {
+    type: "自定义类型",
+    nodeFunc: ({ content, parsedJson }) => (
+      <CustomMessage content={content} customData={parsedJson} />
+    ),
+  },
+}
+```
+
+### 方式3: 未知 msgType，通过内容推导
+
+当服务器返回的 `msgType` 不准确或未知时，使用 `detector`：
+
+```typescript
+// 添加到 SPECIAL_TYPE_DETECTORS 数组
+export const SPECIAL_TYPE_DETECTORS = [
+  // ... 现有检测器
+
+  /**
+   * 特殊类型：通过内容判断
+   */
+  {
+    name: "特殊消息",
+    priority: 100, // 高优先级，先检测
+    detector: (content, parsedJson) => {
+      // 检测规则1: JSON 包含特定字段
+      if (parsedJson && parsedJson.specialType === "custom") {
+        return true;
+      }
+
+      // 检测规则2: 内容包含特定关键词
+      if (content.includes("[特殊标记]")) {
+        return true;
+      }
+
+      return false;
+    },
+    nodeFunc: ({ content, parsedJson }) => (
+      <div style={{ background: "yellow" }}>
+        特殊消息: {content}
+      </div>
+    ),
+  },
+];
+```
+
+## 📝 完整示例
+
+假设你遇到一个新类型，实例数据如下：
+
+```json
+{
+  "msgType": 888,
+  "content": "{\"type\":\"game\",\"gameName\":\"王者荣耀\",\"score\":100}"
+}
+```
+
+### 添加步骤
+
+**1. 创建组件** `src/utils/messageTypes/GameMessage.tsx`
+
+```typescript
+import React from "react";
+
+interface GameMessageProps {
+  gameName: string;
+  score: number;
+}
+
+export const GameMessage: React.FC<GameMessageProps> = ({ gameName, score }) => {
+  return (
+    <div style={{
+      border: "2px solid #1890ff",
+      borderRadius: "8px",
+      padding: "12px",
+      maxWidth: "200px"
+    }}>
+      <div style={{ fontSize: "16px", fontWeight: "bold" }}>🎮 游戏消息</div>
+      <div style={{ marginTop: "8px" }}>游戏: {gameName}</div>
+      <div>分数: {score}</div>
+    </div>
+  );
+};
+```
+
+**2. 在配置中注册**
+
+```typescript
+// messageTypeConfig.tsx
+import { GameMessage } from "./GameMessage";
+
+export const MESSAGE_TYPE_MAP: Record<number, MessageTypeConfig> = {
+  // ... 现有配置
+
+  /**
+   * msgType = 888: 游戏消息
+   */
+  888: {
+    type: "游戏",
+    nodeFunc: ({ content, parsedJson }) => {
+      // 如果解析失败，显示错误
+      if (!parsedJson || parsedJson.type !== "game") {
+        return <div>[游戏消息格式错误]</div>;
+      }
+
+      return (
+        <GameMessage
+          gameName={parsedJson.gameName}
+          score={parsedJson.score}
+        />
+      );
+    },
+    // 可选：添加检测器，用于 msgType 不准确时
+    detector: (content, parsedJson) => {
+      return parsedJson && parsedJson.type === "game";
+    },
+    priority: 90,
+  },
+}
+```
+
+**3. 完成！** 现在系统会自动识别和渲染该类型
+
+## 🔍 调试技巧
+
+### 查看消息类型识别日志
+
+在浏览器控制台可以看到：
+
+```
+✅ 使用 msgType=1 (文本)
+🔍 推导出类型: 红包 (msgType=49)
+⚠️ 未识别的消息类型，使用兜底处理 (msgType=999)
+```
+
+### 测试新类型
+
+1. 发送一条新类型的消息
+2. 查看控制台日志，确认 msgType 和内容格式
+3. 根据日志信息添加配置
+4. 刷新页面，验证渲染效果
+
+## 🎨 最佳实践
+
+### 1. 简单类型直接写 nodeFunc
+
+```typescript
+1: {
+  type: "文本",
+  nodeFunc: ({ content }) => <div>{content}</div>,
+}
+```
+
+### 2. 复杂类型创建独立组件
+
+```typescript
+// 独立组件文件
+export const ComplexMessage: React.FC<Props> = (props) => {
+  // 复杂逻辑
+  return <div>...</div>;
+};
+
+// 配置中引用
+888: {
+  type: "复杂类型",
+  nodeFunc: (props) => <ComplexMessage {...props} />,
+}
+```
+
+### 3. 使用 detector 处理多种情况
+
+```typescript
+888: {
+  type: "多态类型",
+  detector: (content, json) => {
+    // 情况1: 通过 JSON 判断
+    if (json && json.typeFlag === "special") return true;
+
+    // 情况2: 通过内容判断
+    if (content.startsWith("特殊前缀:")) return true;
+
+    // 情况3: 通过正则判断
+    if (/特殊模式/.test(content)) return true;
+
+    return false;
+  },
+  nodeFunc: ({ content, parsedJson }) => {
+    // 根据不同情况渲染
+    if (parsedJson) {
+      return <JsonBasedRender data={parsedJson} />;
+    }
+    return <TextBasedRender content={content} />;
+  },
+  priority: 95, // 高优先级
+}
+```
+
+## 📊 性能优势
+
+1. **对象映射查找**: O(1) 时间复杂度
+2. **JSON 只解析一次**: 解析结果在 `parsedJson` 中复用
+3. **按需加载**: 只有用到的组件才会导入
+4. **优先级控制**: detector 冲突时按优先级选择
+
+## 🔄 迁移指南
+
+从旧版 `useMessageParser` 迁移到新版：
+
+```typescript
+// 旧版
+import { useMessageParser } from "@/hooks/weChat/useMessageParser";
+
+// 新版
+import { useMessageTypeParser } from "@/hooks/weChat/useMessageTypeParser";
+
+// 使用方式完全相同
+const { parseMessageContent } = useMessageTypeParser(contract);
+```
+
+## 📚 进阶用法
+
+### 动态注册（运行时添加）
+
+```typescript
+// 在任何地方动态添加新类型
+import { MESSAGE_TYPE_MAP } from "@/utils/messageTypes/messageTypeConfig";
+
+MESSAGE_TYPE_MAP[99999] = {
+  type: "动态类型",
+  nodeFunc: ({ content }) => <div>动态: {content}</div>,
+};
+```
+
+### 条件渲染
+
+```typescript
+888: {
+  type: "条件渲染",
+  nodeFunc: ({ content, parsedJson, msg }) => {
+    // 根据消息发送者决定样式
+    if (msg.isSend) {
+      return <div style={{ background: "blue" }}>{content}</div>;
+    }
+    return <div style={{ background: "gray" }}>{content}</div>;
+  },
+}
+```
+
+## 🎯 总结
+
+- **配置文件**: `messageTypeConfig.tsx` - 所有类型都在这里
+- **添加新类型**: 直接在 `MESSAGE_TYPE_MAP` 对象中添加键值对
+- **独立组件**: 复杂逻辑创建独立的 `.tsx` 文件
+- **内容推导**: 使用 `SPECIAL_TYPE_DETECTORS` 数组
+- **调试友好**: 控制台有详细日志
+
+遇到新类型时，只需：
+1. 查看控制台日志，获取 msgType 和 content
+2. 在配置对象中添加新的键值对
+3. 刷新页面验证
+
+就这么简单！🎉

docs/消息类型配置系统使用状态.md

@@ -0,0 +1,135 @@
+# 消息类型配置系统 - 使用状态
+
+## ✅ 当前使用情况
+
+### 已启用新配置系统
+
+**MessageRecord 组件** (`src/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageRecord/index.tsx`)
+
+```typescript
+// ✅ 使用新的对象映射配置
+import { useMessageTypeParser } from "@/hooks/weChat/useMessageTypeParser";
+
+const { parseMessageContent, parseEmojiText, isEmojiUrl } = useMessageTypeParser(contract);
+```
+
+## 📊 新旧对比
+
+| 项目 | 旧系统 (useMessageParser) | 新系统 (useMessageTypeParser) |
+|------|---------------------------|-------------------------------|
+| **配置方式** | switch-case 分散在多处 | 对象映射集中配置 |
+| **配置位置** | Hook 内部 | `messageTypeConfig.tsx` |
+| **添加类型** | 修改 switch-case | 添加对象键值对 |
+| **代码行数** | ~450 行 | ~300 行配置 + ~150 行 Hook |
+| **易维护性** | ❌ 分散难维护 | ✅ 集中易维护 |
+| **扩展性** | ❌ 需修改源码 | ✅ 添加配置即可 |
+| **调试性** | ❌ 难追踪 | ✅ 有详细日志 |
+
+## 🎯 新系统核心文件
+
+### 1. 配置文件
+```
+src/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageRecord/messageTypes/messageTypeConfig.tsx
+```
+包含：
+- `MESSAGE_TYPE_MAP` - 消息类型映射对象
+- `SPECIAL_TYPE_DETECTORS` - 内容推导检测器
+- `UNKNOWN_MESSAGE_CONFIG` - 未知类型兜底
+
+### 2. Hook 文件
+```
+src/hooks/weChat/useMessageTypeParser.tsx
+```
+功能：
+- JSON 解析（缓存结果）
+- 类型查找（O(1) 复杂度）
+- 内容推导（按优先级）
+- 调试日志
+
+### 3. 组件文件
+```
+src/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageRecord/messageTypes/
+├── TextMessage.tsx          # 文本消息
+├── ImageMessage.tsx         # 图片消息
+├── EmojiMessage.tsx         # 表情包
+└── UnknownMessage.tsx       # 未知类型兜底
+```
+
+## 🔧 添加新类型（超简单）
+
+只需在 `messageTypeConfig.tsx` 中添加：
+
+```typescript
+export const MESSAGE_TYPE_MAP: Record<number, MessageTypeConfig> = {
+  // 现有配置...
+
+  // ⭐ 添加你的新类型
+  888: {
+    type: "游戏消息",
+    nodeFunc: ({ content, parsedJson }) => {
+      return (
+        <div style={{ border: "2px solid blue", padding: "8px" }}>
+          🎮 游戏: {parsedJson.gameName}
+        </div>
+      );
+    },
+    // 可选：添加内容检测器
+    detector: (content, json) => json && json.type === "game",
+    priority: 90,
+  },
+}
+```
+
+完成！无需修改其他任何代码。
+
+## 📝 控制台调试信息
+
+运行时可以在控制台看到：
+
+```
+✅ 使用 msgType=1 (文本)
+✅ 使用 msgType=3 (图片)
+✅ 使用 msgType=43 (视频)
+🔍 推导出类型: 红包 (msgType=49)
+🔍 推导出类型: 转账 (msgType=49)
+⚠️ 未识别的消息类型，使用兜底处理 (msgType=888)
+```
+
+当遇到未识别的类型时，你会立即看到警告，然后就可以去配置文件添加。
+
+## 🎉 优势总结
+
+### 1. 开发效率提升
+- 添加新类型只需 1 分钟
+- 无需理解复杂的 switch-case 逻辑
+- 配置和组件分离，职责清晰
+
+### 2. 代码质量提升
+- 集中管理，减少重复代码
+- 类型安全，TypeScript 类型提示
+- 易于测试和调试
+
+### 3. 团队协作友好
+- 新人一看就懂配置格式
+- 多人同时添加类型不冲突
+- 文档完善，有示例代码
+
+## 📚 相关文档
+
+- 📖 [消息类型配置指南](./消息类型配置指南.md) - 详细教程
+- 📄 [消息类型快速参考](./消息类型快速参考.md) - 速查手册
+- 📝 [消息类型迁移记录](./消息类型迁移记录.md) - 迁移说明
+
+## 🚀 后续优化建议
+
+1. ✅ **已完成**: 迁移到 MessageRecord 目录（就近原则）
+2. ✅ **已完成**: 切换到新的 Hook
+3. 🔜 **建议**: 添加单元测试
+4. 🔜 **建议**: 添加性能监控
+5. 🔜 **建议**: 支持消息类型热更新
+
+---
+
+**当前状态**: ✅ 已完全启用新配置系统
+
+**下次遇到新的 msgType 时**，直接打开 `messageTypeConfig.tsx`，添加一个对象配置即可！

docs/系统消息集成到配置系统.md

@@ -0,0 +1,298 @@
+# 系统消息集成到配置系统
+
+## 📋 背景说明
+
+之前系统消息（`msgType: 10000, -10001, 570425393, 90000`）是单独处理的，与用户消息分开渲染。现在已将系统消息**集成到新的对象映射配置系统**中，实现统一管理。
+
+## 🎯 消息分类
+
+### 1. 系统消息（显示在中间区域）
+- `10000` - 系统消息（如：时间戳、入群通知等）
+- `-10001` - 系统消息
+- `570425393` - 系统消息（JSON格式）
+- `90000` - 系统消息（JSON格式）
+
+### 2. 用户消息（左右气泡显示）
+- `1` - 文本消息
+- `3` - 图片消息
+- `34` - 语音消息
+- `43` - 视频消息
+- `47` - 表情包
+- `48` - 定位消息
+- `49` - 小程序/文章/文件
+- `10002` - 系统推荐备注消息
+- 更多...
+
+## ✅ 完成的修改
+
+### 1. 配置文件更新
+
+**文件**: `src/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageRecord/messageTypes/messageTypeConfig.tsx`
+
+#### 新增字段
+
+```typescript
+export interface MessageTypeConfig {
+  type: string;
+  nodeFunc: (props: MessageTypeNodeProps) => React.ReactNode;
+  detector?: (content: string, parsedJson: any) => boolean;
+  priority?: number;
+  isSystemMessage?: boolean; // ⭐ 新增：标记是否为系统消息
+}
+```
+
+#### 新增系统消息配置
+
+```typescript
+export const MESSAGE_TYPE_MAP: Record<number, MessageTypeConfig> = {
+  // ==================== 系统消息（显示在中间区域） ====================
+
+  /**
+   * msgType = 10000: 系统消息
+   */
+  10000: {
+    type: "系统消息",
+    isSystemMessage: true,
+    nodeFunc: ({ content }) => (
+      <div className={styles.messageTime}>
+        {parseSystemMessage(content)}
+      </div>
+    ),
+  },
+
+  /**
+   * msgType = -10001: 系统消息
+   */
+  [-10001]: {
+    type: "系统消息",
+    isSystemMessage: true,
+    nodeFunc: ({ content }) => (
+      <div className={styles.messageTime}>
+        {parseSystemMessage(content)}
+      </div>
+    ),
+  },
+
+  /**
+   * msgType = 570425393: 系统消息（JSON格式）
+   */
+  570425393: {
+    type: "系统消息(JSON)",
+    isSystemMessage: true,
+    nodeFunc: ({ content, parsedJson }) => {
+      let displayContent = content;
+      if (parsedJson && typeof parsedJson === "object" && parsedJson.content) {
+        displayContent = parsedJson.content;
+      }
+      return <div className={styles.messageTime}>{displayContent}</div>;
+    },
+  },
+
+  /**
+   * msgType = 90000: 系统消息（JSON格式）
+   */
+  90000: {
+    type: "系统消息(JSON)",
+    isSystemMessage: true,
+    nodeFunc: ({ content, parsedJson }) => {
+      let displayContent = content;
+      if (parsedJson && typeof parsedJson === "object" && parsedJson.content) {
+        displayContent = parsedJson.content;
+      }
+      return <div className={styles.messageTime}>{displayContent}</div>;
+    },
+  },
+
+  // ==================== 用户消息 ====================
+  // ... 其他用户消息配置
+}
+```
+
+### 2. 渲染逻辑简化
+
+#### Before（旧代码）
+
+```typescript
+// ❌ 旧方式：系统消息单独处理
+{group.messages
+  .filter(v => [10000, -10001].includes(v.msgType))
+  .map(msg => {
+    const parsedText = parseSystemMessage(msg.content);
+    return (
+      <div className={styles.messageTime}>
+        {parsedText}
+      </div>
+    );
+  })}
+
+{group.messages
+  .filter(v => [570425393, 90000].includes(v.msgType))
+  .map(msg => {
+    let displayContent = msg.content;
+    try {
+      const parsedContent = JSON.parse(msg.content);
+      if (parsedContent?.content) {
+        displayContent = parsedContent.content;
+      }
+    } catch {}
+    return <div className={styles.messageTime}>{displayContent}</div>;
+  })}
+
+<div className={styles.messageTime}>{group.time}</div>
+
+{group.messages
+  .filter(v => ![10000, 570425393, 90000, -10001].includes(v.msgType))
+  .map(msg => (
+    <MessageItem ... />
+  ))}
+```
+
+#### After（新代码）
+
+```typescript
+// ✅ 新方式：统一使用配置系统
+<div className={styles.messageTime}>{group.time}</div>
+
+{group.messages.map(msg => {
+  if (!msg) return null;
+
+  // 使用新的配置系统渲染消息
+  const renderedContent = parseMessageContent(msg?.content, msg, msg?.msgType);
+
+  // 如果是系统消息，直接渲染（已经包含了样式）
+  if ([10000, -10001, 570425393, 90000].includes(msg.msgType)) {
+    return (
+      <React.Fragment key={`system-${msg.id}`}>
+        {renderedContent}
+      </React.Fragment>
+    );
+  }
+
+  // 用户消息，使用 MessageItem 组件
+  return <MessageItem key={msg.id} msg={msg} ... />;
+})}
+```
+
+### 3. 文件修改清单
+
+| 文件 | 修改内容 | 代码行数变化 |
+|------|---------|------------|
+| `messageTypeConfig.tsx` | 新增系统消息配置、`isSystemMessage` 字段 | +58 行 |
+| `MessageRecord/index.tsx` | 简化渲染逻辑，移除重复的系统消息处理 | -45 行 |
+| `VirtualizedMessageList.tsx` | 同步更新虚拟滚动的渲染逻辑 | -43 行 |
+
+**总计**: 减少了约 30 行代码，逻辑更清晰！
+
+## 🎨 渲染效果
+
+### 系统消息（中间显示）
+
+```
+            昨天 10:33
+
+     南务4将此好友从 wz_04(商务4)转接给wz_05(游戏)。
+
+            昨天 10:57
+```
+
+### 用户消息（左右气泡）
+
+```
+[头像]  客户昵称
+       你好，有什么可以帮您的？
+
+                          [头像]  客服昵称
+                          我需要咨询一下产品
+```
+
+## 📊 优势对比
+
+| 对比项 | 旧方式 | 新方式 |
+|-------|--------|--------|
+| **配置位置** | 分散在 `index.tsx` 中 | 集中在 `messageTypeConfig.tsx` |
+| **代码复用** | 系统消息和用户消息分别处理 | 统一使用 `parseMessageContent` |
+| **扩展性** | 需要修改多处代码 | 只需在配置中添加 |
+| **维护性** | 逻辑分散，难维护 | 配置集中，易维护 |
+| **一致性** | 处理方式不统一 | 所有消息统一处理 |
+| **调试性** | 需要查看多个地方 | 集中查看配置文件 |
+
+## 🚀 添加新的系统消息类型
+
+现在添加新的系统消息类型非常简单：
+
+```typescript
+// messageTypeConfig.tsx
+
+export const MESSAGE_TYPE_MAP: Record<number, MessageTypeConfig> = {
+  // ... 现有配置
+
+  // ⭐ 添加新的系统消息类型
+  999999: {
+    type: "新系统消息",
+    isSystemMessage: true, // 标记为系统消息
+    nodeFunc: ({ content, parsedJson }) => (
+      <div className={styles.messageTime}>
+        🎉 {parsedJson?.text || content}
+      </div>
+    ),
+  },
+}
+```
+
+完成！无需修改 `index.tsx` 或 `VirtualizedMessageList.tsx`。
+
+## 🔍 判断逻辑
+
+在渲染时，通过以下方式判断是否为系统消息：
+
+```typescript
+// 方式1: 通过 msgType 硬编码判断（当前使用）
+if ([10000, -10001, 570425393, 90000].includes(msg.msgType)) {
+  // 系统消息，直接渲染
+}
+
+// 方式2: 通过配置的 isSystemMessage 字段判断（推荐未来优化）
+const config = MESSAGE_TYPE_MAP[msg.msgType];
+if (config?.isSystemMessage) {
+  // 系统消息，直接渲染
+}
+```
+
+## 💡 未来优化建议
+
+1. **使用 `isSystemMessage` 字段判断**
+   - 当前仍使用硬编码的 `msgType` 数组判断
+   - 未来可改为读取配置中的 `isSystemMessage` 字段
+   - 好处：更灵活，添加新系统消息时无需修改判断逻辑
+
+2. **系统消息样式统一**
+   - 当前所有系统消息都使用 `styles.messageTime`
+   - 未来可根据不同类型使用不同样式
+   - 例如：入群通知、退群通知可以有不同的图标和颜色
+
+3. **系统消息分组优化**
+   - 当前系统消息和用户消息混合在一起
+   - 未来可考虑在 `useMessageGrouping` 中预先分组
+   - 提升渲染性能
+
+## ✅ 测试清单
+
+- [x] 系统消息正确显示在中间区域
+- [x] 用户消息正确显示为左右气泡
+- [x] 时间标签正确显示
+- [x] 虚拟滚动模式下系统消息正常
+- [x] 无 linter 错误
+- [x] 控制台无警告
+- [x] 配置文件可读性好
+
+## 🎉 总结
+
+系统消息已成功集成到新的对象映射配置系统中！现在所有消息类型（系统消息和用户消息）都通过统一的配置管理，代码更简洁、更易维护、更易扩展。
+
+**核心变化**：
+- ✅ 所有消息类型统一在 `messageTypeConfig.tsx` 配置
+- ✅ 系统消息用 `isSystemMessage: true` 标记
+- ✅ 渲染逻辑简化，减少重复代码
+- ✅ 虚拟滚动和普通渲染逻辑一致
+
+**下次添加新消息类型**，只需在配置文件中添加一个对象即可！🎊

msgManage_new_logic.ts

@@ -0,0 +1,148 @@
+// 新的消息处理逻辑 - 需要替换到 src/store/module/websocket/msgManage.ts 的第 150-335 行
+
+// 更新新架构的SessionStore（增量更新索引和缓存）
+try {
+  const userId = useCustomerStore.getState().currentCustomer?.userId || 0;
+  if (userId > 0) {
+    // 1. 先检查联系人是否存在于本地数据库
+    console.log("🔍 [新消息] 检查联系人是否存在:", {
+      sessionId,
+      type,
+      userId,
+    });
+
+    const existingContact = await ContactManager.getContactByIdAndType(
+      userId,
+      sessionId,
+      type,
+    );
+
+    // 2. 如果联系人不存在，先请求 API 补齐数据
+    if (!existingContact) {
+      console.log("⚠️ [新消息] 联系人不存在，先请求 API 补齐数据:", {
+        sessionId,
+        type,
+      });
+
+      try {
+        let detailResult: any = null;
+        if (type === "friend") {
+          detailResult = await getWechatFriendDetail({
+            id: sessionId,
+          });
+        } else {
+          detailResult = await getWechatChatroomDetail({
+            id: sessionId,
+          });
+        }
+
+        const detail = detailResult?.detail;
+        if (detail) {
+          console.log("✅ [新消息] 成功获取详情，创建联系人:", {
+            id: detail.id,
+            nickname: detail.nickname,
+            avatar: detail.avatar || detail.chatroomAvatar,
+          });
+
+          // 创建联系人数据
+          const newContact: any = {
+            serverId: `${type}_${sessionId}_${wechatAccountId}`,
+            userId,
+            id: sessionId,
+            type,
+            wechatAccountId: detail.wechatAccountId || wechatAccountId,
+            nickname: detail.nickname || "",
+            conRemark: detail.conRemark || "",
+            avatar:
+              type === "group"
+                ? detail.chatroomAvatar || ""
+                : detail.avatar || "",
+            lastUpdateTime: new Date().toISOString(),
+            sortKey: "",
+            searchKey: (
+              detail.conRemark ||
+              detail.nickname ||
+              ""
+            ).toLowerCase(),
+          };
+
+          // 添加类型特定字段
+          if (type === "group") {
+            Object.assign(newContact, {
+              chatroomId: detail.chatroomId || "",
+              chatroomOwner: detail.chatroomOwner || "",
+              selfDisplayName:
+                detail.selfDisplyName || detail.selfDisplayName || "",
+              notice: detail.notice || "",
+            });
+          } else {
+            Object.assign(newContact, {
+              wechatFriendId: detail.id,
+              wechatId: detail.wechatId || "",
+              alias: detail.alias || "",
+              gender: detail.gender,
+              region: detail.region || "",
+              signature: detail.signature || "",
+              phone: detail.phone || "",
+              quanPin: detail.quanPin || "",
+              groupId: detail.groupId,
+            });
+          }
+
+          // 添加到联系人数据库
+          await ContactManager.addContact(newContact);
+          console.log("✅ [新消息] 联系人已添加到数据库");
+        } else {
+          console.warn("❌ [新消息] API 返回空数据，无法创建联系人");
+        }
+      } catch (error) {
+        console.error("❌ [新消息] 请求 API 补齐数据失败:", error);
+      }
+    } else {
+      console.log("✅ [新消息] 联系人已存在:", {
+        id: existingContact.id,
+        nickname: existingContact.nickname,
+        avatar: existingContact.avatar ? "有" : "无",
+      });
+    }
+
+    // 3. 从数据库获取或创建会话信息
+    const updatedSession = await Promise.race([
+      MessageManager.getSessionByContactId(userId, sessionId, type),
+      new Promise<null>(resolve => setTimeout(() => resolve(null), 5000)), // 5秒超时
+    ]);
+
+    if (updatedSession) {
+      const messageStore = useMessageStore.getState();
+      // 增量更新索引
+      messageStore.addSession(updatedSession);
+      // 失效缓存，下次切换账号时会重新计算
+      messageStore.invalidateCache(wechatAccountId);
+      messageStore.invalidateCache(0); // 也失效"全部"的缓存
+
+      // 更新会话列表缓存（不阻塞主流程）
+      const cacheKey = `sessions_${wechatAccountId}`;
+      sessionListCache
+        .get<ChatSession[]>(cacheKey)
+        .then(cachedSessions => {
+          if (cachedSessions) {
+            // 更新缓存中的会话
+            const index = cachedSessions.findIndex(
+              s => s.id === updatedSession.id && s.type === updatedSession.type,
+            );
+            if (index >= 0) {
+              cachedSessions[index] = updatedSession;
+            } else {
+              cachedSessions.push(updatedSession);
+            }
+            return sessionListCache.set(cacheKey, cachedSessions);
+          }
+        })
+        .catch(error => {
+          console.error("更新会话缓存失败:", error);
+        });
+    }
+  }
+} catch (error) {
+  console.error("更新SessionStore失败:", error);
+}

src/api/request.ts

@@ -6,6 +6,14 @@ import axios, {
 } from "axios";
 import { Toast } from "antd-mobile";
 import { useUserStore } from "@/store/module/user";
+// 导出类型定义供外部使用
+export type {
+  ApiResponse,
+  ApiDetailResponse,
+  ApiPageResponse,
+  ApiListResponse,
+} from "./types";
+
 const { token } = useUserStore.getState();
 const DEFAULT_DEBOUNCE_GAP = 0; // 设置为 0 禁用防抖
 const debounceMap = new Map<string, number>();
@@ -109,14 +117,40 @@ instance.interceptors.response.use(
   },
 );
 
-export function request(
+/**
+ * 统一请求函数（带类型约束，泛型参数可选）
+ *
+ * @template T 返回数据类型，默认为 any（可选，保持向后兼容）
+ * @param url 请求地址
+ * @param data 请求数据
+ * @param method HTTP 方法
+ * @param config 请求配置
+ * @param debounceGap 防抖间隔（已禁用）
+ * @returns Promise<T> 返回指定类型的数据
+ *
+ * @example
+ * // 不指定类型（向后兼容，返回 any）
+ * const result = await request('/api/user/info');
+ *
+ * // 指定返回类型（推荐）
+ * const result = await request<UserInfo>('/api/user/info');
+ *
+ * // 列表接口（返回 list 字段）
+ * const list = await request<User[]>('/api/users', {}, 'GET');
+ * // 实际返回: { list: User[], total: number } 或 User[]
+ *
+ * // 详情接口（返回 detail 字段）
+ * const detail = await request<ApiDetailResponse<UserDetail>>('/api/user/detail', { id: 1 });
+ * // 实际返回: { detail: UserDetail } 或 UserDetail
+ */
+export function request<T = any>(
   url: string,
   data?: any,
   method: Method = "GET",
   // 允许通过 config.debounce 控制是否开启截流，默认开启
   config?: AxiosRequestConfig & { debounce?: boolean },
   debounceGap?: number,
-): Promise<any> {
+): Promise<T> {
   const gap =
     typeof debounceGap === "number" ? debounceGap : DEFAULT_DEBOUNCE_GAP;
 

src/api/request2.ts

@@ -6,6 +6,9 @@ import axios, {
 } from "axios";
 import { Toast } from "antd-mobile";
 import { useUserStore } from "@/store/module/user";
+// 导出类型定义供外部使用
+export type { ApiResponse, ApiDetailResponse, ApiPageResponse, ApiListResponse } from "./types";
+
 const DEFAULT_DEBOUNCE_GAP = 0; // 设置为 0 禁用防抖
 const debounceMap = new Map<string, number>();
 
@@ -79,13 +82,31 @@ instance.interceptors.response.use(
   },
 );
 
-export function request(
+/**
+ * 统一请求函数（request2，带类型约束，泛型参数可选）
+ *
+ * @template T 返回数据类型，默认为 any（可选，保持向后兼容）
+ * @param url 请求地址
+ * @param data 请求数据
+ * @param method HTTP 方法
+ * @param config 请求配置
+ * @param debounceGap 防抖间隔（已禁用）
+ * @returns Promise<T> 返回指定类型的数据
+ *
+ * @example
+ * // 不指定类型（向后兼容，返回 any）
+ * const result = await request('/api/user/info');
+ *
+ * // 指定返回类型（推荐）
+ * const result = await request<UserInfo>('/api/user/info');
+ */
+export function request<T = any>(
   url: string,
   data?: any,
   method: Method = "GET",
   config?: RequestConfig,
   debounceGap?: number,
-): Promise<any> {
+): Promise<T> {
   const gap =
     typeof debounceGap === "number" ? debounceGap : DEFAULT_DEBOUNCE_GAP;
 

src/api/types.ts

@@ -0,0 +1,59 @@
+/**
+ * API 响应类型定义
+ *
+ * 用于统一管理 API 响应数据结构，提供类型约束
+ */
+
+/**
+ * 标准 API 响应结构（带业务状态码）
+ *
+ * 常见格式：
+ * - { code: 200, success: true, msg: "成功", data: T }
+ * - { code: 200, success: true, msg: "成功", list: T[], total: number }
+ * - { detail: T } (详情接口)
+ */
+export interface ApiResponse<T = any> {
+  code?: number;
+  success?: boolean;
+  msg?: string;
+  message?: string;
+  data?: T;
+  list?: T[]; // 列表接口常用字段
+  total?: number; // 分页接口常用字段
+  [key: string]: any; // 兼容其他字段
+}
+
+/**
+ * 详情接口响应结构（通常包含 detail 字段）
+ */
+export interface ApiDetailResponse<T = any> {
+  code?: number;
+  success?: boolean;
+  msg?: string;
+  message?: string;
+  detail?: T;
+  data?: T;
+  [key: string]: any;
+}
+
+/**
+ * 分页响应结构
+ */
+export interface ApiPageResponse<T = any> {
+  list: T[];
+  total: number;
+  page?: number;
+  limit?: number;
+  [key: string]: any;
+}
+
+/**
+ * 列表响应结构（兼容多种格式）
+ */
+export interface ApiListResponse<T = any> {
+  list?: T[];
+  data?: T[];
+  items?: T[];
+  records?: T[];
+  [key: string]: any;
+}

src/components/TwoColumnSelection/TwoColumnSelection.module.scss

@@ -37,6 +37,24 @@
   flex: 1;
   overflow-y: auto;
   padding: 8px 0;
+
+  // 滚动条样式优化
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: rgba(0, 0, 0, 0.2);
+    border-radius: 3px;
+
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.3);
+    }
+  }
+
+  &::-webkit-scrollbar-track {
+    background-color: transparent;
+  }
 }
 
 .friendItem {
@@ -151,3 +169,63 @@
   color: #999;
   font-size: 14px;
 }
+
+.loadingMore {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 16px;
+  color: #999;
+  font-size: 14px;
+
+  span {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    &::before {
+      content: '';
+      display: inline-block;
+      width: 14px;
+      height: 14px;
+      border: 2px solid #1890ff;
+      border-top-color: transparent;
+      border-radius: 50%;
+      animation: spin 0.8s linear infinite;
+    }
+  }
+}
+
+.noMore {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 16px;
+  color: #999;
+  font-size: 12px;
+
+  &::before,
+  &::after {
+    content: '';
+    flex: 1;
+    height: 1px;
+    background-color: #e8e8e8;
+  }
+
+  &::before {
+    margin-right: 12px;
+  }
+
+  &::after {
+    margin-left: 12px;
+  }
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

src/components/TwoColumnSelection/TwoColumnSelection.tsx

@@ -43,6 +43,7 @@ interface TwoColumnSelectionProps {
   enableDeviceFilter?: boolean;
   dataSource?: FriendSelectionItem[];
   onLoadMore?: () => void; // 加载更多回调
+  onSearch?: (keyword: string) => void; // 搜索回调
   hasMore?: boolean; // 是否有更多数据
   loading?: boolean; // 是否正在加载
 }
@@ -56,6 +57,7 @@ const TwoColumnSelection: React.FC<TwoColumnSelectionProps> = ({
   enableDeviceFilter = true,
   dataSource,
   onLoadMore,
+  onSearch,
   hasMore = false,
   loading = false,
 }) => {
@@ -65,10 +67,16 @@ const TwoColumnSelection: React.FC<TwoColumnSelectionProps> = ({
   );
   const [searchQuery, setSearchQuery] = useState("");
   const [isLoading, setIsLoading] = useState(false);
+  const listRef = React.useRef<HTMLDivElement>(null); // 列表容器引用
 
   // 使用 useMemo 缓存过滤结果，避免每次渲染都重新计算
   const filteredFriends = useMemo(() => {
     const sourceData = dataSource || rawFriends;
+    // 如果提供了 onSearch 回调，不在前端进行过滤，由父组件通过 API 搜索
+    if (onSearch) {
+      return sourceData;
+    }
+
     if (!searchQuery.trim()) {
       return sourceData;
     }
@@ -79,7 +87,7 @@ const TwoColumnSelection: React.FC<TwoColumnSelectionProps> = ({
         item.name?.toLowerCase().includes(query) ||
         item.nickname?.toLowerCase().includes(query),
     );
-  }, [dataSource, rawFriends, searchQuery]);
+  }, [dataSource, rawFriends, searchQuery, onSearch]);
 
   // 好友列表直接使用过滤后的结果
   const friends = filteredFriends;
@@ -149,6 +157,13 @@ const TwoColumnSelection: React.FC<TwoColumnSelectionProps> = ({
   // 防抖搜索处理
   const handleSearch = useCallback(
     (value: string) => {
+      // 如果提供了 onSearch 回调，使用父组件的搜索逻辑
+      if (onSearch) {
+        onSearch(value);
+        return;
+      }
+
+      // 否则使用原有逻辑
       if (!dataSource) {
         const timer = setTimeout(() => {
           fetchFriends(1, value);
@@ -156,7 +171,7 @@ const TwoColumnSelection: React.FC<TwoColumnSelectionProps> = ({
         return () => clearTimeout(timer);
       }
     },
-    [dataSource, fetchFriends],
+    [dataSource, fetchFriends, onSearch],
   );
 
   // 选择好友 - 使用 useCallback 优化性能
@@ -189,6 +204,31 @@ const TwoColumnSelection: React.FC<TwoColumnSelectionProps> = ({
     onCancel();
   }, [onCancel]);
 
+  // 滚动到底部自动加载更多
+  const handleScroll = useCallback(
+    (e: React.UIEvent<HTMLDivElement>) => {
+      const target = e.currentTarget;
+      const scrollTop = target.scrollTop;
+      const scrollHeight = target.scrollHeight;
+      const clientHeight = target.clientHeight;
+
+      // 距离底部 100px 时触发加载
+      const distanceToBottom = scrollHeight - scrollTop - clientHeight;
+
+      if (
+        distanceToBottom < 100 &&
+        hasMore &&
+        !loading &&
+        !isLoading &&
+        onLoadMore
+      ) {
+        console.log("🔄 [瀑布流] 触发自动加载更多");
+        onLoadMore();
+      }
+    },
+    [hasMore, loading, isLoading, onLoadMore],
+  );
+
   return (
     <Modal
       title={title}
@@ -222,12 +262,17 @@ const TwoColumnSelection: React.FC<TwoColumnSelectionProps> = ({
             />
           </div>
 
-          <div className={styles.friendList}>
+          <div
+            className={styles.friendList}
+            ref={listRef}
+            onScroll={handleScroll}
+          >
             {isLoading && !loading ? (
               <div className={styles.loading}>加载中...</div>
             ) : friends.length > 0 ? (
-              // 使用 React.memo 优化列表项渲染
-              friends.map(friend => {
+              <>
+                {/* 使用 React.memo 优化列表项渲染 */}
+                {friends.map(friend => {
                 const isSelected = selectedFriendsMap.has(friend.id);
                 return (
                   <FriendListItem
@@ -237,7 +282,20 @@ const TwoColumnSelection: React.FC<TwoColumnSelectionProps> = ({
                     onSelect={handleSelectFriend}
                   />
                 );
-              })
+                })}
+
+                {/* 加载更多指示器 */}
+                {loading && (
+                  <div className={styles.loadingMore}>
+                    <span>加载中...</span>
+                  </div>
+                )}
+
+                {/* 没有更多数据提示 */}
+                {!hasMore && friends.length > 0 && (
+                  <div className={styles.noMore}>已全部加载完成</div>
+                )}
+              </>
             ) : (
               <div className={styles.empty}>
                 {searchQuery
@@ -245,15 +303,6 @@ const TwoColumnSelection: React.FC<TwoColumnSelectionProps> = ({
                   : "暂无好友"}
               </div>
             )}
-
-            {/* 使用外部传入的加载更多 */}
-            {hasMore && (
-              <div className={styles.loadMoreWrapper}>
-                <Button type="link" onClick={onLoadMore} loading={loading}>
-                  加载更多
-                </Button>
-              </div>
-            )}
           </div>
         </div>
 

src/hooks/weChat/useMessageParser.tsx

@@ -120,8 +120,10 @@ const tryParseContentJson = (content: string): Record<string, any> | null => {
 };
 
 /**
- * 消息解析 Hook
+ * 消息解析 Hook（旧版本，保留向后兼容）
  * 提取消息解析逻辑，使用 useCallback 优化性能
+ *
+ * @deprecated 请使用 useMessageTypeParser 替代
  */
 export const useMessageParser = (contract: ContractData | weChatGroup) => {
   // 判断是否为表情包URL的工具函数

src/hooks/weChat/useMessageTypeParser.tsx

@@ -0,0 +1,176 @@
+import React, { useCallback } from "react";
+import { ChatRecord, ContractData, weChatGroup } from "@/pages/pc/ckbox/data";
+import { getEmojiPath } from "@/components/EmojiSeclection/wechatEmoji";
+import {
+  MESSAGE_TYPE_MAP,
+  SPECIAL_TYPE_DETECTORS,
+  UNKNOWN_MESSAGE_CONFIG,
+  MessageTypeNodeProps,
+} from "@/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageRecord/messageTypes/messageTypeConfig";
+import styles from "@/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageRecord/com.module.scss";
+
+const TRUNCATED_MSG_PREFIX = "[该消息内容过长已截断]";
+
+/**
+ * 尝试解析 JSON（去掉服务端截断提示前缀，便于拿到 previewImage / contentXml）
+ */
+const tryParseJson = (content: string): any => {
+  let s = content.trim();
+  if (s.startsWith(TRUNCATED_MSG_PREFIX)) {
+    s = s.slice(TRUNCATED_MSG_PREFIX.length).trim();
+  }
+  try {
+    return JSON.parse(s);
+  } catch {
+    return null;
+  }
+};
+
+/**
+ * 消息类型解析 Hook（重构版 - 使用对象映射）
+ */
+export const useMessageTypeParser = (contract: ContractData | weChatGroup) => {
+  // 判断是否为表情包URL的工具函数
+  const isEmojiUrl = useCallback((content: string): boolean => {
+    return (
+      content.includes("ac-weremote-s2.oss-cn-shenzhen.aliyuncs.com") ||
+      /\.(gif|webp|png|jpg|jpeg)$/i.test(content) ||
+      content.includes("emoji") ||
+      content.includes("sticker") ||
+      content.includes("expression")
+    );
+  }, []);
+
+  // 解析表情包文字格式[表情名称]并替换为img标签
+  const parseEmojiText = useCallback((text: string): React.ReactNode[] => {
+    const emojiRegex = /\[([^\]]+)\]/g;
+    const parts: React.ReactNode[] = [];
+    let lastIndex = 0;
+    let match;
+
+    while ((match = emojiRegex.exec(text)) !== null) {
+      if (match.index > lastIndex) {
+        parts.push(text.slice(lastIndex, match.index));
+      }
+
+      const emojiName = match[1];
+      const emojiPath = getEmojiPath(emojiName as any);
+
+      if (emojiPath) {
+        parts.push(
+          <img
+            key={`emoji-${match.index}`}
+            src={emojiPath}
+            alt={emojiName}
+            className={styles.emojiImage}
+            style={{
+              width: "20px",
+              height: "20px",
+              margin: "0 2px",
+              display: "inline",
+              lineHeight: "20px",
+              float: "left",
+            }}
+          />,
+        );
+      } else {
+        parts.push(match[0]);
+      }
+
+      lastIndex = emojiRegex.lastIndex;
+    }
+
+    if (lastIndex < text.length) {
+      parts.push(text.slice(lastIndex));
+    }
+
+    return parts;
+  }, []);
+
+  /**
+   * 解析消息内容（核心方法）
+   */
+  const parseMessageContent = useCallback(
+    (
+      content: string | null | undefined,
+      msg: ChatRecord,
+      msgType?: number,
+    ): React.ReactNode => {
+      // 处理空值
+      if (content === null || content === undefined || content === "") {
+        return <div className={styles.messageText}>[消息内容不可用]</div>;
+      }
+
+      const rawContent = String(content);
+      const trimmedContent = rawContent.trim();
+
+      // 尝试解析 JSON（缓存结果）
+      const parsedJson = tryParseJson(trimmedContent);
+
+      // 构建渲染属性
+      const nodeProps: MessageTypeNodeProps = {
+        content: rawContent,
+        msg,
+        contract,
+        parsedJson,
+        parseEmojiText,
+        isEmojiUrl,
+      };
+
+      try {
+        // 1. 如果有明确的 msgType，优先查找配置
+        if (msgType !== undefined && MESSAGE_TYPE_MAP[msgType]) {
+          const config = MESSAGE_TYPE_MAP[msgType];
+          return config.nodeFunc(nodeProps);
+        }
+
+        // 2. 尝试通过内容特征推导类型
+        for (const detector of SPECIAL_TYPE_DETECTORS) {
+          try {
+            if (detector.detector(trimmedContent, parsedJson)) {
+              console.log(`🔍 推导出类型: ${detector.name} (msgType=${msgType || '未知'})`);
+              return detector.nodeFunc(nodeProps);
+            }
+          } catch (error) {
+            console.warn(`检测器 ${detector.name} 执行失败:`, error);
+          }
+        }
+
+        // 3. 如果 msgType 存在但没有配置，尝试用 detector 推导
+        if (msgType !== undefined) {
+          // 遍历所有配置，找到有 detector 且能匹配的
+          for (const [type, config] of Object.entries(MESSAGE_TYPE_MAP)) {
+            if (config.detector) {
+              try {
+                if (config.detector(trimmedContent, parsedJson)) {
+                  console.log(`🔍 通过 detector 推导: msgType=${type} (${config.type})`);
+                  return config.nodeFunc(nodeProps);
+                }
+              } catch (error) {
+                console.warn(`msgType=${type} detector 执行失败:`, error);
+              }
+            }
+          }
+        }
+
+        // 4. 使用未知类型兜底处理
+        console.log(`⚠️ 未识别的消息类型，使用兜底处理 (msgType=${msgType || '未知'})`);
+        return UNKNOWN_MESSAGE_CONFIG.nodeFunc(nodeProps);
+      } catch (error) {
+        console.error("消息渲染失败:", error, { msg, content });
+        return (
+          <div className={styles.messageText}>
+            [消息渲染失败{msgType ? `: 类型${msgType}` : ""}]
+          </div>
+        );
+      }
+    },
+    [contract, parseEmojiText, isEmojiUrl],
+  );
+
+  return {
+    parseMessageContent,
+    parseEmojiText,
+    isEmojiUrl,
+  };
+};

src/pages/pc/ckbox/api.ts

@@ -108,10 +108,18 @@ export function getGroupList(params: { prevId: number; count: number }) {
     "GET",
   );
 }
-
+interface getResponse {
+  friendId: number;
+  wechatId: string;
+  nickname: string;
+  avatar: string;
+  isAdmin: boolean;
+  isDeleted: boolean;
+  deletedDate: string;
+}
 //获取群成员
 export function getGroupMembers(params: { id: number }) {
-  return request2(
+  return request2<getResponse[]>(
     "/api/WechatChatroom/listMembersByWechatChatroomId",
     params,
     "GET",

src/pages/pc/ckbox/powerCenter/content-management/components/EditMomentModal.tsx

@@ -27,28 +27,52 @@ const EditMomentModal: React.FC<EditMomentModalProps> = ({
     url: "",
   });
 
+  // 将发布时间转为 datetime-local 所需格式 "YYYY-MM-DDTHH:mm"（本地时间）
+  const toDatetimeLocalValue = (
+    raw: number | string | undefined | null,
+  ): string => {
+    if (raw == null || raw === "") return "";
+    const num = Number(raw);
+    let date: Date;
+    if (Number.isFinite(num)) {
+      if (num === 0) return ""; // 0 视为未设置
+      date = new Date(num < 1e12 ? num * 1000 : num);
+    } else {
+      date = new Date(String(raw)); // 接口可能返回 "2024-01-01 12:00:00" 等字符串
+    }
+    if (Number.isNaN(date.getTime())) return "";
+    const pad = (n: number) => String(n).padStart(2, "0");
+    return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}T${pad(date.getHours())}:${pad(date.getMinutes())}`;
+  };
+
   useEffect(() => {
     if (visible && momentData) {
-      // 填充表单数据
+      // 发布时间：优先 sendTime，兼容 timingTime 或其它字段
+      const rawTime =
+        momentData.sendTime ??
+        (momentData as any).timingTime ??
+        (momentData as any).publishTime;
+      const sendTimeStr = toDatetimeLocalValue(rawTime);
+      // 填充表单数据（列表接口返回 content，兼容可能的 text 字段）
       form.setFieldsValue({
-        content: momentData.text,
+        content: momentData.content ?? (momentData as any).text ?? "",
         type: momentData.momentContentType.toString(),
-        sendTime: momentData.sendTime
-          ? new Date(momentData.sendTime * 1000).toISOString().slice(0, 16)
-          : "",
+        sendTime: sendTimeStr,
       });
 
       setContentType(momentData.momentContentType);
       setResUrls(momentData.picUrlList || []);
 
       // 处理链接数据
-      if (momentData.link && momentData.link.length > 0) {
-        setLinkData({
-          desc: momentData.link[0] || "",
-          image: "",
-          url: momentData.link[0] || "",
-        });
-      }
+      setLinkData(
+        momentData.link && momentData.link.length > 0
+          ? {
+              desc: momentData.link[0] || "",
+              image: "",
+              url: momentData.link[0] || "",
+            }
+          : { desc: "", image: "", url: "" },
+      );
     }
   }, [visible, momentData, form]);
 
@@ -57,11 +81,24 @@ const EditMomentModal: React.FC<EditMomentModalProps> = ({
       const values = await form.validateFields();
       setLoading(true);
 
+      // 发布账号：从详情 accounts 取 wechatAccountId 传给接口（accountCount 是数量不是 ID）
+      const accounts = (momentData as any)?.accounts as
+        | { wechatAccountId: number }[]
+        | undefined;
+      const wechatIds =
+        accounts?.length > 0
+          ? accounts.map(a => String(a.wechatAccountId))
+          : [];
+      if (wechatIds.length === 0) {
+        message.warning("请选择发布账号");
+        setLoading(false);
+        return;
+      }
       const updateData: any = {
         id: momentData?.id,
         content: values.content,
         type: values.type,
-        "wechatIds[]": [momentData?.accountCount || 1], // 这里需要根据实际情况调整
+        wechatIds: wechatIds,
       };
 
       // 根据内容类型添加相应字段
@@ -96,15 +133,10 @@ const EditMomentModal: React.FC<EditMomentModalProps> = ({
         updateData.timingTime = values.sendTime;
       }
 
-      const success = await updateMoment(updateData);
-
-      if (success) {
-        message.success("更新成功！");
-        onSuccess();
-        onCancel();
-      } else {
-        message.error("更新失败，请重试");
-      }
+      await updateMoment(updateData);
+      message.success("更新成功！");
+      onSuccess();
+      onCancel();
     } catch (error) {
       console.error("更新失败:", error);
       message.error("更新失败，请重试");

src/pages/pc/ckbox/powerCenter/content-management/components/PreviewMomentModal.tsx

@@ -94,7 +94,7 @@ const PreviewMomentModal: React.FC<PreviewMomentModalProps> = ({
         </div>
 
         <div className="preview-content">
-          <div className="preview-text">{momentData.text || "无文本内容"}</div>
+          <div className="preview-text">{momentData.content ?? (momentData as any).text ?? "无文本内容"}</div>
 
           {/* 图片预览 */}
           {momentData.picUrlList && momentData.picUrlList.length > 0 && (

src/pages/pc/ckbox/powerCenter/content-management/components/PublishSchedule.tsx

@@ -28,7 +28,7 @@ import {
   FileTextOutlined,
   AppstoreOutlined,
 } from "@ant-design/icons";
-import { getMomentList, deleteMoment, listData } from "./api";
+import { getMomentList, getMomentDetail, deleteMoment, listData } from "./api";
 import EditMomentModal from "./EditMomentModal";
 import PreviewMomentModal from "./PreviewMomentModal";
 import styles from "./PublishSchedule.module.scss";
@@ -134,8 +134,18 @@ const PublishSchedule = forwardRef<PublishScheduleRef>((props, ref) => {
     }
   };
 
-  const handleEditPost = (post: listData) => {
-    setSelectedMoment(post);
+  const handleEditPost = async (post: listData) => {
+    // 列表项可能没有 accounts，编辑保存需要 wechatIds，故无 accounts 时拉取详情
+    if (!post.accounts?.length) {
+      try {
+        const detail = await getMomentDetail(post.id);
+        setSelectedMoment(detail);
+      } catch {
+        setSelectedMoment(post);
+      }
+    } else {
+      setSelectedMoment(post);
+    }
     setEditModalVisible(true);
   };
 
@@ -315,7 +325,7 @@ const PublishSchedule = forwardRef<PublishScheduleRef>((props, ref) => {
                       <ClockCircleOutlined className={styles.detailIcon} />
                       <span className={styles.detailLabel}>发布时间:</span>
                       <span className={styles.detailValue}>
-                        {formatTime(post.sendTime)}
+                        {post.sendTime}
                       </span>
                     </div>
                     <div className={styles.detailItem}>

src/pages/pc/ckbox/powerCenter/content-management/components/api.ts

@@ -1,4 +1,13 @@
 import request from "@/api/request";
+/** 详情/列表中的账号项 */
+export interface MomentAccountItem {
+  wechatAccountId: number;
+  wechatId?: string;
+  nickName?: string;
+  avatar?: string;
+  labels?: unknown[];
+}
+
 export interface listData {
   id: number;
   content: "";
@@ -11,6 +20,8 @@ export interface listData {
   createTime: number;
   sendTime: number;
   accountCount: number;
+  /** 发布账号列表（详情/列表可能返回） */
+  accounts?: MomentAccountItem[];
 }
 
 interface listResponse {
@@ -25,6 +36,11 @@ export const getMomentList = (data: {
   return request("/v1/kefu/moments/list", data, "GET");
 };
 
+// 朋友圈定时发布 - 详情（含 accounts，编辑时用于回填发布账号）
+export const getMomentDetail = (id: number): Promise<listData> => {
+  return request(`/v1/kefu/moments/detail`, { id }, "GET");
+};
+
 export interface MomentRequest {
   id?: number;
   /**

src/pages/pc/ckbox/weChat/api.ts

@@ -170,9 +170,19 @@ export function getChatroomMessages(params: {
   return request2("/api/ChatroomMessage/SearchMessage", params, "GET");
 }
 
+//获取群成员
+interface getResponse {
+  friendId: number;
+  wechatId: string;
+  nickname: string;
+  avatar: string;
+  isAdmin: boolean;
+  isDeleted: boolean;
+  deletedDate: string;
+}
 //获取群成员
 export function getGroupMembers(params: { id: number }) {
-  return request2(
+  return request2<getResponse[]>(
     "/api/WechatChatroom/listMembersByWechatChatroomId",
     params,
     "GET",

src/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageEnter/components/toContract/index.tsx

@@ -78,8 +78,9 @@ const ToContract: React.FC<ToContractProps> = ({
 
       // 调用转接接口：区分好友 / 群聊
       if (currentContact) {
-        const isGroup =
-          "chatroomId" in currentContact && !!currentContact.chatroomId;
+        console.log("当前选中的是群还是好友?", currentContact);
+
+        const isGroup = currentContact.type === "group";
 
         if (isGroup) {
           // 群聊转移：使用 WechatChatroomAllot

src/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageRecord/api.ts

@@ -1,6 +1,6 @@
 // 朋友圈相关的API接口
 import { useWebSocketStore } from "@/store/module/websocket/websocket";
-import request from "@/api/request";
+import request2 from "@/api/request2";
 // 朋友圈请求参数接口
 export interface FetchMomentParams {
   friendMessageId: number;
@@ -32,13 +32,10 @@ export const fetchVoiceToTextApi = async (params: VoiceToTextParams) => {
 };
 
 export const getChatroomMemberList = async (params: { groupId: number }) => {
-  return request(
-    "/v1/chatroom/getMemberList",
+  return request2(
+    "/api/WechatChatroom/listMembersByWechatChatroomId",
     {
-      groupId: params.groupId,
-      keyword: "",
-      limit: 500,
-      page: 1,
+      id: params.groupId,
     },
     "GET",
   );

src/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageRecord/components/AudioMessage/AudioMessage.tsx

@@ -18,10 +18,10 @@ const parseAudioUrl = (audioUrl: string): AudioData => {
   try {
     // 尝试解析为JSON
     const parsed = JSON.parse(audioUrl);
-    if (parsed.url) {
+    if (parsed.url || parsed.ossUrl) {
       return {
         durationMs: parsed.durationMs,
-        url: parsed.url,
+        url: parsed.ossUrl || parsed.url,
         text: parsed.text,
       };
     }

src/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageRecord/components/FileMessage/FileMessage.module.scss

@@ -0,0 +1,69 @@
+// 文件消息样式
+.fileMessage {
+  .fileCard {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 12px;
+    border: 1px solid #d9d9d9;
+    border-radius: 8px;
+    background: #fafafa;
+    cursor: pointer;
+    transition: all 0.2s;
+    width: 280px;
+
+    &:hover {
+      background: #f0f0f0;
+      border-color: #1890ff;
+    }
+  }
+
+  .fileIcon {
+    font-size: 24px;
+    color: #1890ff;
+    flex-shrink: 0;
+  }
+
+  .fileInfo {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .fileName {
+    font-weight: 500;
+    color: #262626;
+    font-size: 14px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin-bottom: 4px;
+    line-height: 1.4;
+  }
+
+  .fileAction {
+    font-size: 12px;
+    color: #1890ff;
+    cursor: pointer;
+    user-select: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  .fileActionDisabled {
+    color: #999;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+}
+
+// 通用消息文本样式
+.messageText {
+  line-height: 1.4;
+  white-space: pre-wrap;
+  word-break: break-word;
+  color: #999;
+  font-size: 13px;
+  padding: 8px 12px;
+}

src/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageRecord/components/FileMessage/index.tsx

@@ -0,0 +1,356 @@
+import React from "react";
+import { ChatRecord, ContractData, weChatGroup } from "@/pages/pc/ckbox/data";
+import { useWebSocketStore } from "@/store/module/websocket/websocket";
+import { useWeChatStore } from "@/store/module/weChat/weChat";
+import { getWechatFriendDetail } from "../../api";
+import styles from "./FileMessage.module.scss";
+
+const FILE_MESSAGE_TYPE = "file";
+
+/**
+ * 文件消息数据结构
+ */
+interface FileMessageData {
+  type: string;
+  title?: string;
+  fileName?: string;
+  filename?: string;
+  url?: string;
+  isDownloading?: boolean;
+  fileext?: string;
+  size?: number | string;
+  [key: string]: any;
+}
+
+/**
+ * 从 XML 字符串中提取文件信息
+ */
+const extractFileInfoFromXml = (source: string): FileMessageData | null => {
+  if (typeof source !== "string") {
+    return null;
+  }
+
+  const trimmed = source.trim();
+  if (!trimmed) {
+    return null;
+  }
+
+  try {
+    // 方法1: 使用 DOMParser 解析 XML
+    if (typeof DOMParser !== "undefined") {
+      const parser = new DOMParser();
+      const doc = parser.parseFromString(trimmed, "text/xml");
+      if (doc.getElementsByTagName("parsererror").length === 0) {
+        const titleNode = doc.getElementsByTagName("title")[0];
+        const fileExtNode = doc.getElementsByTagName("fileext")[0];
+        const sizeNode =
+          doc.getElementsByTagName("totallen")[0] ||
+          doc.getElementsByTagName("filesize")[0];
+
+        const result: FileMessageData = { type: FILE_MESSAGE_TYPE };
+        const titleText = titleNode?.textContent?.trim();
+        if (titleText) {
+          result.title = titleText;
+        }
+
+        const fileExtText = fileExtNode?.textContent?.trim();
+        if (fileExtText) {
+          result.fileext = fileExtText;
+        }
+
+        const sizeText = sizeNode?.textContent?.trim();
+        if (sizeText) {
+          const sizeNumber = Number(sizeText);
+          result.size = Number.isNaN(sizeNumber) ? sizeText : sizeNumber;
+        }
+
+        return result;
+      }
+    }
+  } catch (error) {
+    console.warn("extractFileInfoFromXml parse failed:", error);
+  }
+
+  // 方法2: 使用正则表达式匹配（备用方案）
+  const regexTitle =
+    trimmed.match(/<title><!\[CDATA\[(.*?)\]\]><\/title>/i) ||
+    trimmed.match(/<title>([^<]+)<\/title>/i);
+  const regexExt =
+    trimmed.match(/<fileext><!\[CDATA\[(.*?)\]\]><\/fileext>/i) ||
+    trimmed.match(/<fileext>([^<]+)<\/fileext>/i);
+  const regexSize =
+    trimmed.match(/<totallen>([^<]+)<\/totallen>/i) ||
+    trimmed.match(/<filesize>([^<]+)<\/filesize>/i);
+
+  if (!regexTitle && !regexExt && !regexSize) {
+    return null;
+  }
+
+  const fallback: FileMessageData = { type: FILE_MESSAGE_TYPE };
+  if (regexTitle?.[1]) {
+    fallback.title = regexTitle[1].trim();
+  }
+  if (regexExt?.[1]) {
+    fallback.fileext = regexExt[1].trim();
+  }
+  if (regexSize?.[1]) {
+    const sizeNumber = Number(regexSize[1]);
+    fallback.size = Number.isNaN(sizeNumber)
+      ? regexSize[1].trim()
+      : sizeNumber;
+  }
+
+  return fallback;
+};
+
+/**
+ * 解析文件消息数据
+ * 优先级：JSON.type === "file" > JSON.contentXml > rawContent XML > msg.fileDownloadMeta
+ */
+const resolveFileMessageData = (
+  messageData: any,
+  msg: ChatRecord,
+  rawContent: string,
+): FileMessageData | null => {
+  // 从消息元数据中获取文件信息
+  const meta =
+    msg?.fileDownloadMeta && typeof msg.fileDownloadMeta === "object"
+      ? { ...(msg.fileDownloadMeta as Record<string, any>) }
+      : null;
+
+  // 优先级1: JSON对象中 type === "file"
+  if (messageData && typeof messageData === "object") {
+    if (messageData.type === FILE_MESSAGE_TYPE) {
+      return {
+        type: FILE_MESSAGE_TYPE,
+        ...messageData,
+        ...(meta || {}),
+      };
+    }
+
+    // 优先级2: JSON对象中的 contentXml 字段
+    if (typeof messageData.contentXml === "string") {
+      const xmlData = extractFileInfoFromXml(messageData.contentXml);
+      if (xmlData || meta) {
+        return {
+          ...(xmlData || {}),
+          ...(meta || {}),
+          type: FILE_MESSAGE_TYPE,
+        };
+      }
+    }
+  }
+
+  // 优先级3: 原始内容解析为XML
+  if (typeof rawContent === "string") {
+    const xmlData = extractFileInfoFromXml(rawContent);
+    if (xmlData || meta) {
+      return {
+        ...(xmlData || {}),
+        ...(meta || {}),
+        type: FILE_MESSAGE_TYPE,
+      };
+    }
+  }
+
+  // 优先级4: 消息元数据
+  if (meta) {
+    return {
+      type: FILE_MESSAGE_TYPE,
+      ...meta,
+    };
+  }
+
+  return null;
+};
+
+/**
+ * 判断是否为JSON格式字符串
+ */
+const isJsonLike = (value: string) => {
+  const trimmed = value.trim();
+  return trimmed.startsWith("{") && trimmed.endsWith("}");
+};
+
+interface FileMessageProps {
+  content: string;
+  msg: ChatRecord;
+  contract: ContractData | weChatGroup;
+  parsedJson?: any; // 可选：已解析的JSON
+}
+
+/**
+ * 文件消息组件
+ * 用于渲染各种文件类型的消息（pdf、doc、xls、ppt等）
+ */
+export const FileMessage: React.FC<FileMessageProps> = ({
+  content,
+  msg,
+  contract,
+  parsedJson,
+}) => {
+  const sendCommand = useWebSocketStore(state => state.sendCommand);
+  const setFileDownloading = useWeChatStore(state => state.setFileDownloading);
+
+  // 统一的错误消息渲染函数
+  const renderErrorMessage = (fallbackText: string) => (
+    <div className={styles.messageText}>{fallbackText}</div>
+  );
+
+  if (typeof content !== "string" || !content.trim()) {
+    return renderErrorMessage("[文件消息 - 无效内容]");
+  }
+
+  try {
+    const trimmedContent = content.trim();
+    const isJsonContent = isJsonLike(trimmedContent);
+    const messageData = parsedJson || (isJsonContent ? JSON.parse(trimmedContent) : null);
+
+    // 确定用于解析的内容源
+    const rawContentForResolve =
+      messageData && typeof messageData.contentXml === "string"
+        ? messageData.contentXml
+        : trimmedContent;
+
+    // 解析文件消息数据
+    const fileMessageData = resolveFileMessageData(
+      messageData,
+      msg,
+      rawContentForResolve,
+    );
+
+    if (!fileMessageData || fileMessageData.type !== FILE_MESSAGE_TYPE) {
+      return renderErrorMessage("[文件消息 - 解析失败]");
+    }
+
+    // 提取文件信息
+    const {
+      url = "",
+      ossUrl = "",
+      title,
+      fileName,
+      filename,
+      fileext,
+      isDownloading = false,
+    } = fileMessageData;
+    const resolvedUrl = ossUrl || url;
+
+    // 解析文件名（优先级：title > fileName > filename > URL中提取）
+    const resolvedFileName =
+      title ||
+      fileName ||
+      filename ||
+      (typeof resolvedUrl === "string" && resolvedUrl
+        ? resolvedUrl.split("/").pop()?.split("?")[0]
+        : "") ||
+      "文件";
+
+    // 解析文件扩展名
+    const resolvedExtension = (
+      fileext ||
+      resolvedFileName.split(".").pop() ||
+      ""
+    ).toLowerCase();
+
+    // 文件图标映射
+    const iconMap: Record<string, string> = {
+      pdf: "📕",
+      doc: "📘",
+      docx: "📘",
+      xls: "📗",
+      xlsx: "📗",
+      ppt: "📙",
+      pptx: "📙",
+      txt: "📝",
+      zip: "🗜️",
+      rar: "🗜️",
+      "7z": "🗜️",
+      jpg: "🖼️",
+      jpeg: "🖼️",
+      png: "🖼️",
+      gif: "🖼️",
+      mp4: "🎬",
+      avi: "🎬",
+      mov: "🎬",
+      mp3: "🎵",
+      wav: "🎵",
+      flac: "🎵",
+    };
+    const fileIcon = iconMap[resolvedExtension] || "📄";
+
+    // 判断是否有可用的文件URL
+    const isUrlAvailable =
+      typeof resolvedUrl === "string" && resolvedUrl.trim().length > 0;
+
+    // 文件下载处理函数
+    const handleFileDownload = () => {
+      if (isDownloading || !contract || !msg?.id) return;
+
+      setFileDownloading(msg.id, true);
+      sendCommand("CmdDownloadFile", {
+        wechatAccountId: contract.wechatAccountId,
+        friendMessageId: contract.chatroomId ? 0 : msg.id,
+        chatroomMessageId: contract.chatroomId ? msg.id : 0,
+      });
+    };
+
+    // 操作按钮文本和状态
+    const actionText = isUrlAvailable
+      ? "点击查看"
+      : isDownloading
+        ? "下载中..."
+        : "下载";
+    const actionDisabled = !isUrlAvailable && isDownloading;
+
+    // 操作按钮点击处理
+    const handleActionClick = (event: React.MouseEvent) => {
+      event.stopPropagation();
+      if (isUrlAvailable) {
+        try {
+          window.open(resolvedUrl, "_blank");
+        } catch (e) {
+          console.error("文件打开失败:", e);
+        }
+        return;
+      }
+      handleFileDownload();
+    };
+
+    return (
+      <div className={styles.fileMessage}>
+        <div
+          className={styles.fileCard}
+          onClick={() => {
+            if (isUrlAvailable) {
+              window.open(resolvedUrl, "_blank");
+            } else if (!isDownloading) {
+              handleFileDownload();
+            }
+          }}
+        >
+          <div className={styles.fileIcon}>{fileIcon}</div>
+          <div className={styles.fileInfo}>
+            <div className={styles.fileName}>
+              {resolvedFileName.length > 20
+                ? resolvedFileName.substring(0, 20) + "..."
+                : resolvedFileName}
+            </div>
+            <div
+              className={`${styles.fileAction} ${
+                actionDisabled ? styles.fileActionDisabled : ""
+              }`}
+              onClick={handleActionClick}
+            >
+              {actionText}
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  } catch (e) {
+    console.warn("文件消息解析失败:", e);
+    return renderErrorMessage("[文件消息 - 解析失败]");
+  }
+};
+
+export default FileMessage;

src/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageRecord/components/SmallProgramMessage/index.tsx

@@ -1,421 +1,324 @@
 import React from "react";
-import { parseWeappMsgStr } from "@/utils/common";
 import { ChatRecord, ContractData, weChatGroup } from "@/pages/pc/ckbox/data";
-import { useWebSocketStore } from "@/store/module/websocket/websocket";
-import { useWeChatStore } from "@/store/module/weChat/weChat";
 import styles from "./SmallProgramMessage.module.scss";
 
-const FILE_MESSAGE_TYPE = "file";
+const TRUNCATED_PREFIX = "[该消息内容过长已截断]";
 
-interface FileMessageData {
-  type: string;
-  title?: string;
-  fileName?: string;
-  filename?: string;
-  url?: string;
-  isDownloading?: boolean;
-  fileext?: string;
-  size?: number | string;
-  [key: string]: any;
-}
-
-const isJsonLike = (value: string) => {
-  const trimmed = value.trim();
-  return trimmed.startsWith("{") && trimmed.endsWith("}");
+/** 去掉 wxid_ 行或仅 “:\n” 的前缀，得到纯 XML */
+const normalizeContentXmlString = (raw: string): string => {
+  let s = raw;
+  const xmlDecl = s.indexOf("<?xml");
+  const msgOpen = s.indexOf("<msg>");
+  const cut = xmlDecl >= 0 ? xmlDecl : msgOpen >= 0 ? msgOpen : 0;
+  if (cut > 0) {
+    s = s.slice(cut);
+  }
+  return s.trim();
 };
 
-const extractFileInfoFromXml = (source: string): FileMessageData | null => {
-  if (typeof source !== "string") {
-    return null;
+/** 从整段文本中抠出 XML 字符串（兼容截断 JSON、转义字符） */
+const extractXmlStringFromText = (text: string): string => {
+  const previewKey = '","previewImage"';
+  let xmlStart = text.indexOf("<?xml");
+  if (xmlStart < 0) {
+    const msgStart = text.indexOf("<msg>");
+    if (msgStart >= 0) {
+      const before = text.lastIndexOf("<?xml", msgStart);
+      xmlStart = before >= 0 ? before : msgStart;
+    }
   }
+  if (xmlStart < 0) {
+    return text;
+  }
+  let end = text.length;
+  const pk = text.indexOf(previewKey, xmlStart);
+  if (pk >= 0) {
+    end = pk;
+  }
+  let frag = text.slice(xmlStart, end);
+  frag = frag
+    .replace(/\\n/g, "\n")
+    .replace(/\\t/g, "\t")
+    .replace(/\\"/g, '"')
+    .replace(/\\\\/g, "\\");
+  return normalizeContentXmlString(frag);
+};
 
-  const trimmed = source.trim();
-  if (!trimmed) {
+/** 从未必完整的 JSON 文本中提取 previewImage */
+const extractPreviewImageFromText = (text: string): string | undefined => {
+  const m = text.match(/"previewImage"\s*:\s*"([^"]*)"/);
+  if (m?.[1]) {
+    return m[1].replace(/\\"/g, '"').trim();
+  }
+  return undefined;
+};
+
+type MiniExtract = {
+  title?: string;
+  appName?: string;
+  miniProgramType?: number;
+  previewImage?: string;
+};
+
+/**
+ * 仅从 XML 提取展示用字段（不要求完整闭合）
+ */
+const extractMiniProgramInfo = (xmlContent: string): MiniExtract | null => {
+  if (!xmlContent || typeof xmlContent !== "string") {
     return null;
   }
 
   try {
-    if (typeof DOMParser !== "undefined") {
-      const parser = new DOMParser();
-      const doc = parser.parseFromString(trimmed, "text/xml");
-      if (doc.getElementsByTagName("parsererror").length === 0) {
-        const titleNode = doc.getElementsByTagName("title")[0];
-        const fileExtNode = doc.getElementsByTagName("fileext")[0];
-        const sizeNode =
-          doc.getElementsByTagName("totallen")[0] ||
-          doc.getElementsByTagName("filesize")[0];
+    const result: MiniExtract = {};
 
-        const result: FileMessageData = { type: FILE_MESSAGE_TYPE };
-        const titleText = titleNode?.textContent?.trim();
-        if (titleText) {
-          result.title = titleText;
-        }
-
-        const fileExtText = fileExtNode?.textContent?.trim();
-        if (fileExtText) {
-          result.fileext = fileExtText;
-        }
-
-        const sizeText = sizeNode?.textContent?.trim();
-        if (sizeText) {
-          const sizeNumber = Number(sizeText);
-          result.size = Number.isNaN(sizeNumber) ? sizeText : sizeNumber;
-        }
-
-        return result;
+    const titleMatch =
+      xmlContent.match(/<title>([^<]+)<\/title>/i) ||
+      xmlContent.match(/<title><!\[CDATA\[([^\]]*)\]\]><\/title>/i) ||
+      xmlContent.match(/<title>([^<\n\r]+?)(?:\s*<|$)/i);
+    if (titleMatch?.[1]) {
+      const title = titleMatch[1].trim();
+      if (title && title !== "/") {
+        result.title = title;
       }
     }
+
+    const desMatch =
+      xmlContent.match(/<des>([^<]+)<\/des>/i) ||
+      xmlContent.match(/<des><!\[CDATA\[([^\]]*)\]\]><\/des>/i) ||
+      xmlContent.match(/<des>([^<\n\r]+?)(?:\s*<|$)/i);
+    let desVal: string | undefined;
+    if (desMatch?.[1]) {
+      const des = desMatch[1].trim();
+      if (des && des !== "/" && des !== "null") {
+        desVal = des;
+      }
+    }
+
+    const sourcedisplaynameMatch =
+      xmlContent.match(/<sourcedisplayname>([^<]+)<\/sourcedisplayname>/i) ||
+      xmlContent.match(
+        /<sourcedisplayname><!\[CDATA\[([^\]]*)\]\]><\/sourcedisplayname>/i,
+      ) ||
+      xmlContent.match(/<sourcedisplayname>([^<\n\r]+?)(?:\s*<|$)/i);
+    if (sourcedisplaynameMatch?.[1]) {
+      const n = sourcedisplaynameMatch[1].trim();
+      if (n && n !== "/" && n !== "null") {
+        result.appName = n;
+      }
+    }
+
+    if (!result.appName) {
+      const appnameMatch =
+        xmlContent.match(/<appname>([^<]+)<\/appname>/i) ||
+        xmlContent.match(/<appname><!\[CDATA\[([^\]]*)\]\]><\/appname>/i);
+      if (appnameMatch?.[1]) {
+        const n = appnameMatch[1].trim();
+        if (n && n !== "/") {
+          result.appName = n;
+        }
+      }
+    }
+
+    if (!result.appName && desVal) {
+      result.appName = desVal;
+    }
+
+    const weappBlock =
+      /<weappinfo>[\s\S]*?<\/weappinfo>/i.exec(xmlContent)?.[0] ?? "";
+    if (weappBlock) {
+      const typeInWeapp = weappBlock.match(/<type>([^<]+)<\/type>/i);
+      if (typeInWeapp?.[1]) {
+        const typeNum = parseInt(typeInWeapp[1].trim(), 10);
+        if (!Number.isNaN(typeNum) && (typeNum === 1 || typeNum === 2)) {
+          result.miniProgramType = typeNum;
+        }
+      }
+    }
+
+    let previewImageUrl: string | undefined;
+    const weappiconurlMatch =
+      weappBlock.match(/<weappiconurl><!\[CDATA\[([^\]]*)\]\]><\/weappiconurl>/i) ||
+      weappBlock.match(/<weappiconurl>([^<]+)<\/weappiconurl>/i);
+    if (weappiconurlMatch?.[1]?.trim()) {
+      previewImageUrl = weappiconurlMatch[1].trim();
+    }
+
+    if (!previewImageUrl) {
+      const thumbMatch =
+        xmlContent.match(/<thumburl><!\[CDATA\[(https?:\/\/[^\]]+)\]\]><\/thumburl>/i) ||
+        xmlContent.match(/<thumburl>(https?:\/\/[^<]+)<\/thumburl>/i);
+      if (thumbMatch?.[1]) {
+        previewImageUrl = thumbMatch[1].trim();
+      }
+    }
+
+    if (!previewImageUrl) {
+      const anyHttp = xmlContent.match(
+        /(https?:\/\/[^\s<"']*(?:mmbiz|qpic|qlogo|aliyuncs|oss-cn|amazonaws|cloudfront)[^\s<"']*)/i,
+      );
+      if (anyHttp?.[1]) {
+        previewImageUrl = anyHttp[1].replace(/&amp;/g, "&").trim();
+      }
+    }
+
+    if (previewImageUrl && previewImageUrl.includes("http")) {
+      result.previewImage = previewImageUrl
+        .replace(/<!\[CDATA\[|\]\]>/g, "")
+        .replace(/[`"']/g, "")
+        .replace(/&amp;/g, "&")
+        .trim();
+    }
+
+    if (result.title || result.appName) {
+      return result;
+    }
+
+    return null;
   } catch (error) {
-    console.warn("extractFileInfoFromXml parse failed:", error);
-  }
-
-  const regexTitle =
-    trimmed.match(/<title><!\[CDATA\[(.*?)\]\]><\/title>/i) ||
-    trimmed.match(/<title>([^<]+)<\/title>/i);
-  const regexExt =
-    trimmed.match(/<fileext><!\[CDATA\[(.*?)\]\]><\/fileext>/i) ||
-    trimmed.match(/<fileext>([^<]+)<\/fileext>/i);
-  const regexSize =
-    trimmed.match(/<totallen>([^<]+)<\/totallen>/i) ||
-    trimmed.match(/<filesize>([^<]+)<\/filesize>/i);
-
-  if (!regexTitle && !regexExt && !regexSize) {
+    console.warn("从 XML 提取信息失败:", error);
     return null;
   }
-
-  const fallback: FileMessageData = { type: FILE_MESSAGE_TYPE };
-  if (regexTitle?.[1]) {
-    fallback.title = regexTitle[1].trim();
-  }
-  if (regexExt?.[1]) {
-    fallback.fileext = regexExt[1].trim();
-  }
-  if (regexSize?.[1]) {
-    const sizeNumber = Number(regexSize[1]);
-    fallback.size = Number.isNaN(sizeNumber) ? regexSize[1].trim() : sizeNumber;
-  }
-
-  return fallback;
-};
-
-const resolveFileMessageData = (
-  messageData: any,
-  msg: ChatRecord,
-  rawContent: string,
-): FileMessageData | null => {
-  const meta =
-    msg?.fileDownloadMeta && typeof msg.fileDownloadMeta === "object"
-      ? { ...(msg.fileDownloadMeta as Record<string, any>) }
-      : null;
-
-  if (messageData && typeof messageData === "object") {
-    if (messageData.type === FILE_MESSAGE_TYPE) {
-      return {
-        type: FILE_MESSAGE_TYPE,
-        ...messageData,
-        ...(meta || {}),
-      };
-    }
-
-    if (typeof messageData.contentXml === "string") {
-      const xmlData = extractFileInfoFromXml(messageData.contentXml);
-      if (xmlData || meta) {
-        return {
-          ...(xmlData || {}),
-          ...(meta || {}),
-          type: FILE_MESSAGE_TYPE,
-        };
-      }
-    }
-  }
-
-  if (typeof rawContent === "string") {
-    const xmlData = extractFileInfoFromXml(rawContent);
-    if (xmlData || meta) {
-      return {
-        ...(xmlData || {}),
-        ...(meta || {}),
-        type: FILE_MESSAGE_TYPE,
-      };
-    }
-  }
-
-  if (meta) {
-    return {
-      type: FILE_MESSAGE_TYPE,
-      ...meta,
-    };
-  }
-
-  return null;
 };
 
 interface SmallProgramMessageProps {
   content: string;
   msg: ChatRecord;
   contract: ContractData | weChatGroup;
+  /** useMessageTypeParser 已解析的 JSON（去掉截断前缀后） */
+  parsedJson?: Record<string, unknown> | null;
 }
 
 const SmallProgramMessage: React.FC<SmallProgramMessageProps> = ({
   content,
-  msg,
-  contract,
+  parsedJson,
 }) => {
-  const sendCommand = useWebSocketStore(state => state.sendCommand);
-  const setFileDownloading = useWeChatStore(state => state.setFileDownloading);
-
-  // 统一的错误消息渲染函数
   const renderErrorMessage = (fallbackText: string) => (
     <div className={styles.messageText}>{fallbackText}</div>
   );
 
   if (typeof content !== "string" || !content.trim()) {
-    return renderErrorMessage("[小程序/文章/文件消息 - 无效内容]");
+    return renderErrorMessage("[小程序消息 - 无效内容]");
   }
 
   try {
-    const trimmedContent = content.trim();
-    const isJsonContent = isJsonLike(trimmedContent);
-    const messageData = isJsonContent ? JSON.parse(trimmedContent) : null;
-
-    if (messageData && typeof messageData === "object") {
-      if (messageData.type === "link") {
-        const { title, desc, thumbPath, url } = messageData;
-
-        return (
-          <div
-            className={`${styles.miniProgramMessage} ${styles.articleMessage}`}
-          >
-            <div
-              className={`${styles.miniProgramCard} ${styles.articleCard}`}
-              onClick={() => window.open(url, "_blank")}
-            >
-              <div className={styles.articleTitle}>{title}</div>
-              <div className={styles.articleContent}>
-                <div className={styles.articleTextArea}>
-                  {desc && (
-                    <div className={styles.articleDescription}>{desc}</div>
-                  )}
-                </div>
-                {thumbPath && (
-                  <div className={styles.articleImageArea}>
-                    <img
-                      src={thumbPath}
-                      alt="文章缩略图"
-                      className={styles.articleImage}
-                      onError={e => {
-                        const target = e.target as HTMLImageElement;
-                        target.style.display = "none";
-                      }}
-                    />
-                  </div>
-                )}
-              </div>
-            </div>
-            <div className={styles.miniProgramApp}>文章</div>
-          </div>
-        );
-      }
-
-      if (messageData.type === "miniprogram") {
-        try {
-          const parsedData = parseWeappMsgStr(trimmedContent);
-
-          if (parsedData.appmsg) {
-            const { appmsg } = parsedData;
-            const title = appmsg.title || "小程序消息";
-            const appName =
-              appmsg.sourcedisplayname || appmsg.appname || "小程序";
-            const miniProgramType =
-              appmsg.weappinfo && appmsg.weappinfo.type
-                ? parseInt(appmsg.weappinfo.type)
-                : 1;
-
-            if (miniProgramType === 2) {
-              return (
-                <div
-                  className={`${styles.miniProgramMessage} ${styles.miniProgramType2}`}
-                >
-                  <div
-                    className={`${styles.miniProgramCard} ${styles.miniProgramCardType2}`}
-                  >
-                    <div className={styles.miniProgramAppTop}>{appName}</div>
-                    <div className={styles.miniProgramTitle}>{title}</div>
-                    <div className={styles.miniProgramImageArea}>
-                      <img
-                        src={parsedData.previewImage}
-                        alt="小程序图片"
-                        className={styles.miniProgramImage}
-                        onError={e => {
-                          const target = e.target as HTMLImageElement;
-                          target.style.display = "none";
-                        }}
-                      />
-                    </div>
-                    <div className={styles.miniProgramContent}>
-                      <div className={styles.miniProgramIdentifier}>小程序</div>
-                    </div>
-                  </div>
-                </div>
-              );
-            }
-
-            return (
-              <div
-                className={`${styles.miniProgramMessage} ${styles.miniProgramType1}`}
-              >
-                <div className={styles.miniProgramCard}>
-                  <img
-                    src={parsedData.previewImage}
-                    alt="小程序缩略图"
-                    className={styles.miniProgramThumb}
-                    onError={e => {
-                      const target = e.target as HTMLImageElement;
-                      target.style.display = "none";
-                    }}
-                  />
-                  <div className={styles.miniProgramInfo}>
-                    <div className={styles.miniProgramTitle}>{title}</div>
-                  </div>
-                </div>
-                <div className={styles.miniProgramApp}>{appName}</div>
-              </div>
-            );
-          }
-        } catch (parseError) {
-          console.error("parseWeappMsgStr解析失败:", parseError);
-          return renderErrorMessage("[小程序消息 - 解析失败]");
-        }
-      }
+    let working = content.trim();
+    if (working.startsWith(TRUNCATED_PREFIX)) {
+      working = working.slice(TRUNCATED_PREFIX.length).trim();
     }
 
-    const rawContentForResolve =
-      messageData && typeof messageData.contentXml === "string"
-        ? messageData.contentXml
-        : trimmedContent;
-    const fileMessageData = resolveFileMessageData(
-      messageData,
-      msg,
-      rawContentForResolve,
-    );
+    let jsonPreview =
+      typeof parsedJson?.previewImage === "string"
+        ? parsedJson.previewImage.trim()
+        : "";
+    let xmlRaw = "";
 
-    if (fileMessageData && fileMessageData.type === FILE_MESSAGE_TYPE) {
-      const {
-        url = "",
-        title,
-        fileName,
-        filename,
-        fileext,
-        isDownloading = false,
-      } = fileMessageData;
-      const resolvedFileName =
-        title ||
-        fileName ||
-        filename ||
-        (typeof url === "string" && url
-          ? url.split("/").pop()?.split("?")[0]
-          : "") ||
-        "文件";
-      const resolvedExtension = (
-        fileext ||
-        resolvedFileName.split(".").pop() ||
-        ""
-      ).toLowerCase();
-
-      const iconMap: Record<string, string> = {
-        pdf: "📕",
-        doc: "📘",
-        docx: "📘",
-        xls: "📗",
-        xlsx: "📗",
-        ppt: "📙",
-        pptx: "📙",
-        txt: "📝",
-        zip: "🗜️",
-        rar: "🗜️",
-        "7z": "🗜️",
-        jpg: "🖼️",
-        jpeg: "🖼️",
-        png: "🖼️",
-        gif: "🖼️",
-        mp4: "🎬",
-        avi: "🎬",
-        mov: "🎬",
-        mp3: "🎵",
-        wav: "🎵",
-        flac: "🎵",
-      };
-      const fileIcon = iconMap[resolvedExtension] || "📄";
-      const isUrlAvailable = typeof url === "string" && url.trim().length > 0;
-
-      const handleFileDownload = () => {
-        if (isDownloading || !contract || !msg?.id) return;
-
-        setFileDownloading(msg.id, true);
-        sendCommand("CmdDownloadFile", {
-          wechatAccountId: contract.wechatAccountId,
-          friendMessageId: contract.chatroomId ? 0 : msg.id,
-          chatroomMessageId: contract.chatroomId ? msg.id : 0,
-        });
-      };
-
-      const actionText = isUrlAvailable
-        ? "点击查看"
-        : isDownloading
-          ? "下载中..."
-          : "下载";
-      const actionDisabled = !isUrlAvailable && isDownloading;
-
-      const handleActionClick = (event: React.MouseEvent) => {
-        event.stopPropagation();
-        if (isUrlAvailable) {
-          try {
-            window.open(url, "_blank");
-          } catch (e) {
-            console.error("文件打开失败:", e);
-          }
-          return;
+    if (
+      parsedJson &&
+      typeof parsedJson.contentXml === "string" &&
+      parsedJson.contentXml
+    ) {
+      xmlRaw = normalizeContentXmlString(parsedJson.contentXml);
+    } else if (working.startsWith("{")) {
+      try {
+        const obj = JSON.parse(working) as {
+          contentXml?: string;
+          previewImage?: string;
+        };
+        if (typeof obj.contentXml === "string") {
+          xmlRaw = normalizeContentXmlString(obj.contentXml);
         }
-        handleFileDownload();
-      };
+        if (typeof obj.previewImage === "string" && obj.previewImage) {
+          jsonPreview = obj.previewImage.trim();
+        }
+      } catch {
+        xmlRaw = extractXmlStringFromText(working);
+        if (!jsonPreview) {
+          jsonPreview = extractPreviewImageFromText(working) ?? "";
+        }
+      }
+    } else {
+      xmlRaw = normalizeContentXmlString(working);
+    }
 
+    const info = extractMiniProgramInfo(xmlRaw);
+    if (!info) {
+      return renderErrorMessage("[小程序消息 - 信息提取失败]");
+    }
+
+    const title = info.title || "小程序";
+    const appName = info.appName || "小程序";
+    const miniProgramType = info.miniProgramType ?? 1;
+    const previewImage =
+      jsonPreview || info.previewImage || "";
+
+    if (miniProgramType === 2) {
       return (
-        <div className={styles.fileMessage}>
+        <div
+          className={`${styles.miniProgramMessage} ${styles.miniProgramType2}`}
+        >
           <div
-            className={styles.fileCard}
-            onClick={() => {
-              if (isUrlAvailable) {
-                window.open(url, "_blank");
-              } else if (!isDownloading) {
-                handleFileDownload();
-              }
-            }}
+            className={`${styles.miniProgramCard} ${styles.miniProgramCardType2}`}
           >
-            <div className={styles.fileIcon}>{fileIcon}</div>
-            <div className={styles.fileInfo}>
-              <div className={styles.fileName}>
-                {resolvedFileName.length > 20
-                  ? resolvedFileName.substring(0, 20) + "..."
-                  : resolvedFileName}
-              </div>
-              <div
-                className={`${styles.fileAction} ${
-                  actionDisabled ? styles.fileActionDisabled : ""
-                }`}
-                onClick={handleActionClick}
-              >
-                {actionText}
+            <div className={styles.miniProgramAppTop}>{appName}</div>
+            <div
+              style={{
+                padding: "10px 16px 0",
+                fontWeight: 600,
+                fontSize: 15,
+                color: "#191919",
+                lineHeight: 1.45,
+                wordBreak: "break-word",
+              }}
+            >
+              {title}
+            </div>
+            {previewImage ? (
+              <div className={styles.miniProgramImageArea}>
+                <img
+                  src={previewImage}
+                  alt="小程序封面"
+                  className={styles.miniProgramImage}
+                  onError={e => {
+                    const target = e.target as HTMLImageElement;
+                    target.style.display = "none";
+                  }}
+                />
               </div>
+            ) : null}
+            <div className={styles.miniProgramContent}>
+              <div className={styles.miniProgramIdentifier}>小程序</div>
             </div>
           </div>
         </div>
       );
     }
 
-    return renderErrorMessage("[小程序/文件消息]");
+    return (
+      <div
+        className={`${styles.miniProgramMessage} ${styles.miniProgramType1}`}
+      >
+        <div className={styles.miniProgramCard}>
+          {previewImage ? (
+            <img
+              src={previewImage}
+              alt="小程序缩略图"
+              className={styles.miniProgramThumb}
+              onError={e => {
+                const target = e.target as HTMLImageElement;
+                target.style.display = "none";
+              }}
+            />
+          ) : null}
+          <div className={styles.miniProgramInfo}>
+            <div className={styles.miniProgramTitle}>{title}</div>
+          </div>
+        </div>
+        <div className={styles.miniProgramApp}>{appName}</div>
+      </div>
+    );
   } catch (e) {
-    console.warn("小程序/文件消息解析失败:", e);
-    return renderErrorMessage("[小程序/文件消息 - 解析失败]");
+    console.warn("小程序消息解析失败:", e);
+    return renderErrorMessage("[小程序消息 - 解析失败]");
   }
 };
 

src/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageRecord/components/TransmitModal/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useMemo, useCallback } from "react";
+import React, { useState, useEffect, useMemo, useCallback, useRef } from "react";
 import {
   Modal,
   Input,
@@ -17,12 +17,13 @@ import {
   TeamOutlined,
 } from "@ant-design/icons";
 import styles from "./TransmitModal.module.scss";
-import { ContactManager } from "@/utils/dbAction";
 import { useWeChatStore } from "@/store/module/weChat/weChat";
 import { useContactStore } from "@/store/module/weChat/contacts";
 import { useUserStore } from "@/store/module/user";
 import { ContractData, weChatGroup } from "@/pages/pc/ckbox/data";
 import { useWebSocketStore } from "@/store/module/websocket/websocket";
+import { getContactList, getGroupList } from "@/pages/pc/ckbox/weChat/api";
+
 const TransmitModal: React.FC = () => {
   const [searchValue, setSearchValue] = useState("");
   const [allContacts, setAllContacts] = useState<
@@ -35,35 +36,112 @@ const TransmitModal: React.FC = () => {
   const [page, setPage] = useState(1);
   const pageSize = 20;
   const { sendCommand } = useWebSocketStore.getState();
-  const currentUserId = useUserStore(state => state.user?.id) || 0;
+  const isInitialLoadRef = useRef(false);
 
   // 从 Zustand store 获取更新方法
   const openTransmitModal = useContactStore(state => state.openTransmitModal);
-
   const setTransmitModal = useContactStore(state => state.setTransmitModal);
   const updateSelectedChatRecords = useWeChatStore(
     state => state.updateSelectedChatRecords,
   );
-
   const selectedChatRecords = useWeChatStore(
     state => state.selectedChatRecords,
   );
 
-  // 加载联系人数据
-  const loadContacts = useCallback(async () => {
+  // 将好友数据转换为 ContractData 格式
+  const convertFriendToContractData = (friend: any): ContractData & { type: "friend" } => {
+    return {
+      id: friend.id,
+      wechatAccountId: friend.wechatAccountId || 0,
+      wechatId: friend.wechatId || "",
+      alias: friend.alias || "",
+      conRemark: friend.conRemark || "",
+      nickname: friend.nickname || "",
+      quanPin: friend.quanPin || "",
+      avatar: friend.avatar || "",
+      gender: friend.gender || 0,
+      region: friend.region || "",
+      addFrom: friend.addFrom || 0,
+      phone: friend.phone || "",
+      labels: friend.labels || [],
+      signature: friend.signature || "",
+      accountId: friend.accountId || 0,
+      extendFields: friend.extendFields || null,
+      city: friend.city || "",
+      lastUpdateTime: friend.lastUpdateTime || "",
+      isPassed: friend.isPassed || false,
+      tenantId: friend.tenantId || 0,
+      groupId: friend.groupId || 0,
+      thirdParty: null,
+      additionalPicture: friend.additionalPicture || "",
+      desc: friend.desc || "",
+      config: friend.config || { unreadCount: 0 },
+      lastMessageTime: friend.lastMessageTime || 0,
+      duplicate: friend.duplicate || false,
+      type: "friend",
+    } as ContractData & { type: "friend" };
+  };
+
+  // 将群组数据转换为 weChatGroup 格式
+  const convertGroupToWeChatGroup = (group: any): weChatGroup & { type: "group" } => {
+    return {
+      id: group.id,
+      wechatAccountId: group.wechatAccountId || 0,
+      tenantId: group.tenantId || 0,
+      accountId: group.accountId || 0,
+      chatroomId: group.chatroomId || "",
+      chatroomOwner: group.chatroomOwner || "",
+      conRemark: group.conRemark || "",
+      nickname: group.nickname || "",
+      chatroomAvatar: group.chatroomAvatar || group.avatar || "",
+      groupId: group.groupId || 0,
+      aiType: group.aiType || 0,
+      config: group.config || { unreadCount: 0 },
+      labels: group.labels || [],
+      notice: group.notice || "",
+      selfDisplyName: group.selfDisplyName || "",
+      wechatChatroomId: group.id,
+      type: "group",
+    } as weChatGroup & { type: "group" };
+  };
+
+  // 加载联系人数据（使用API接口）
+  const loadContacts = useCallback(async (keyword?: string) => {
     setLoading(true);
     try {
-      // 从统一联系人表加载所有联系人
-      const allContactsData =
-        await ContactManager.getUserContacts(currentUserId);
-      setAllContacts(allContactsData as any);
+      const params: any = {
+        page: 1,
+        limit: 1000, // 获取足够多的数据
+      };
+
+      // 如果有搜索关键词，添加到参数中
+      if (keyword && keyword.trim()) {
+        params.keyword = keyword.trim();
+      }
+
+      // 并行请求好友列表和群列表
+      const [friendResult, groupResult] = await Promise.all([
+        getContactList(params, { debounceGap: 0 }),
+        getGroupList(params, { debounceGap: 0 }),
+      ]);
+
+      const friendList = friendResult?.list || [];
+      const groupList = groupResult?.list || [];
+
+      // 转换数据格式
+      const friends = friendList.map(convertFriendToContractData);
+      const groups = groupList.map(convertGroupToWeChatGroup);
+
+      // 合并好友和群列表
+      const allContactsData = [...friends, ...groups];
+      setAllContacts(allContactsData);
     } catch (err) {
       console.error("加载联系人数据失败:", err);
       message.error("加载联系人数据失败");
     } finally {
       setLoading(false);
     }
-  }, [currentUserId]);
+  }, []);
 
   // 重置状态 - 只在 openTransmitModal 变为 true 时执行
   useEffect(() => {
@@ -71,28 +149,38 @@ const TransmitModal: React.FC = () => {
       setSearchValue("");
       setSelectedWechatFriend([]);
       setPage(1);
-      loadContacts();
+      isInitialLoadRef.current = true;
+      loadContacts(); // 初始加载，不传keyword
+    } else {
+      isInitialLoadRef.current = false;
     }
-    // 注意：loadContacts 已经在 useCallback 中稳定，但为了安全，我们只在 openTransmitModal 变化时执行
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [openTransmitModal]);
 
-  // 过滤联系人 - 支持名称和拼音搜索
-  const filteredContacts = useMemo(() => {
-    if (!searchValue.trim()) return allContacts;
+  // 搜索时调用API（只在searchValue变化时触发，跳过初始加载）
+  useEffect(() => {
+    if (openTransmitModal && !isInitialLoadRef.current) {
+      // 使用防抖，避免频繁请求
+      const timer = setTimeout(() => {
+        // 如果searchValue为空，不传keyword；否则传keyword
+        const keyword = searchValue.trim() || undefined;
+        loadContacts(keyword);
+        setPage(1); // 重置页码
+      }, 300);
 
-    const keyword = searchValue.toLowerCase();
-    return allContacts.filter(contact => {
-      const name = (contact.nickname || "").toLowerCase();
-      const quanPin = (contact as any).quanPin?.toLowerCase?.() || "";
-      const pinyin = (contact as any).pinyin?.toLowerCase?.() || "";
-      return (
-        name.includes(keyword) ||
-        quanPin.includes(keyword) ||
-        pinyin.includes(keyword)
-      );
-    });
-  }, [allContacts, searchValue]);
+      return () => clearTimeout(timer);
+    }
+    // 标记初始加载完成
+    if (isInitialLoadRef.current) {
+      isInitialLoadRef.current = false;
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [searchValue, openTransmitModal]);
+
+  // 直接使用 allContacts，因为搜索已经在API层面完成
+  const filteredContacts = useMemo(() => {
+    return allContacts;
+  }, [allContacts]);
 
   const paginatedContacts = useMemo(() => {
     const start = (page - 1) * pageSize;
@@ -121,10 +209,11 @@ const TransmitModal: React.FC = () => {
   const handleConfirm = () => {
     for (const user of selectedWechatFriend) {
       for (const record of selectedChatRecords) {
+        const isGroup = (user as any).type === "group";
         const params = {
           wechatAccountId: user.wechatAccountId,
-          wechatChatroomId: user?.chatroomId ? user.id : 0,
-          wechatFriendId: user?.chatroomId ? 0 : user.id,
+          wechatChatroomId: isGroup ? user.id : 0,
+          wechatFriendId: isGroup ? 0 : user.id,
           msgSubType: record.msgSubType,
           msgType: record.msgType,
           content: record.content,

src/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageRecord/components/VideoMessage/index.tsx

@@ -88,34 +88,36 @@ const VideoMessage: React.FC<VideoMessageProps> = ({
         videoData &&
         typeof videoData === "object" &&
         videoData.previewImage &&
-        videoData.tencentUrl
+        (videoData.tencentUrl || videoData.videoUrl || videoData.ossUrl)
       ) {
         const previewImageUrl = String(videoData.previewImage).replace(
           /[`"']/g,
           "",
         );
+        const resolvedVideoUrl =
+          videoData.videoUrl || videoData.ossUrl || videoData.tencentUrl;
 
         // 创建点击处理函数
         const handlePlayClick = (e: React.MouseEvent, msg: ChatRecord) => {
           e.stopPropagation();
           // 如果没有视频URL且不在加载中，则发起下载请求
-          if (!videoData.videoUrl && !videoData.isLoading) {
+          if (!resolvedVideoUrl && !videoData.isLoading) {
             handleVideoPlayRequest(videoData.tencentUrl, msg.id);
           }
         };
 
         // 如果已有视频URL，显示视频播放器
-        if (videoData.videoUrl) {
+        if (videoData.videoUrl || videoData.ossUrl) {
           return (
             <div className={styles.videoMessage}>
               <div className={styles.videoContainer}>
                 <video
                   controls
-                  src={videoData.videoUrl}
+                  src={resolvedVideoUrl}
                   style={{ maxWidth: "100%", borderRadius: "8px" }}
                 />
                 <a
-                  href={videoData.videoUrl}
+                  href={resolvedVideoUrl}
                   download
                   className={styles.downloadButton}
                   style={{ display: "flex" }}

src/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageRecord/components/VirtualizedMessageList.tsx

@@ -3,7 +3,6 @@ import { VariableSizeList, ListChildComponentProps } from "react-window";
 import { ChatRecord, ContractData, weChatGroup } from "@/pages/pc/ckbox/data";
 import { MessageGroup } from "@/hooks/weChat/useMessageGrouping";
 import { MessageItem } from "../index";
-import { parseSystemMessage } from "@/utils/filter";
 import styles from "../com.module.scss";
 import { addPerformanceBreadcrumb } from "@/utils/sentry";
 
@@ -42,22 +41,17 @@ interface ItemData {
  */
 const estimateGroupHeight = (group: MessageGroup): number => {
   let height = 40; // 时间分隔符高度
-  const messageCount = group.messages.filter(
-    v => ![10000, 570425393, 90000, -10001].includes(v.msgType),
-  ).length;
 
-  // 基础消息项高度（包含间距）
-  const baseMessageHeight = 80;
-  // 系统消息高度
-  const systemMessageHeight = 30;
-
-  // 计算系统消息数量
-  const systemMessageCount = group.messages.filter(v =>
-    [10000, 570425393, 90000, -10001].includes(v.msgType),
-  ).length;
-
-  height += systemMessageCount * systemMessageHeight;
-  height += messageCount * baseMessageHeight;
+  // 遍历所有消息，估算高度
+  group.messages.forEach(msg => {
+    // 系统消息高度
+    if ([10000, -10001, 570425393, 90000].includes(msg.msgType)) {
+      height += 30;
+    } else {
+      // 用户消息高度
+      height += 80;
+    }
+  });
 
   return height;
 };
@@ -75,68 +69,44 @@ const VirtualizedMessageItem: React.FC<ListChildComponentProps<ItemData>> = ({
 
   return (
     <div style={style}>
-      {/* 时间分隔符 */}
-      {group.messages
-        .filter(v => [10000, -10001].includes(v.msgType))
-        .map(msg => {
-          const parsedText = parseSystemMessage(msg.content);
-          return (
-            <div key={`divider-${msg.id}`} className={styles.messageTime}>
-              {parsedText}
-            </div>
-          );
-        })}
-
-      {/* 其他系统消息 */}
-      {group.messages
-        .filter(v => [570425393, 90000].includes(v.msgType))
-        .map(msg => {
-          let displayContent = msg.content;
-          try {
-            const parsedContent = JSON.parse(msg.content);
-            if (
-              parsedContent &&
-              typeof parsedContent === "object" &&
-              parsedContent.content
-            ) {
-              displayContent = parsedContent.content;
-            }
-          } catch (error) {
-            displayContent = msg.content;
-          }
-          return (
-            <div key={`divider-${msg.id}`} className={styles.messageTime}>
-              {displayContent}
-            </div>
-          );
-        })}
-
       {/* 时间标签 */}
       <div className={styles.messageTime}>{group.time}</div>
 
-      {/* 消息项 */}
-      {group.messages
-        .filter(v => ![10000, 570425393, 90000, -10001].includes(v.msgType))
-        .map(msg => {
-          if (!msg) return null;
-          const isOwn = !!msg.isSend;
+      {/* 渲染所有消息（包括系统消息和用户消息） */}
+      {group.messages.map(msg => {
+        if (!msg) return null;
+
+        // 使用新的配置系统渲染消息
+        const renderedContent = props.parseMessageContent(msg?.content, msg, msg?.msgType);
+
+        // 如果是系统消息，直接渲染（已经包含了 styles.messageTime 样式）
+        if ([10000, -10001, 570425393, 90000].includes(msg.msgType)) {
           return (
-            <MessageItem
-              key={msg.id}
-              msg={msg}
-              contract={props.contract}
-              isGroup={props.isGroupChat}
-              showCheckbox={props.showCheckbox}
-              isSelected={props.isMessageSelected(msg)}
-              currentCustomerAvatar={props.currentCustomerAvatar || ""}
-              renderGroupUser={props.renderGroupUser}
-              clearWechatidInContent={props.clearWechatidInContent}
-              parseMessageContent={props.parseMessageContent}
-              onCheckboxChange={props.onCheckboxChange}
-              onContextMenu={e => props.onContextMenu(e, msg, isOwn)}
-            />
+            <React.Fragment key={`system-${msg.id}`}>
+              {renderedContent}
+            </React.Fragment>
           );
-        })}
+        }
+
+        // 用户消息，使用 MessageItem 组件
+        const isOwn = !!msg.isSend;
+        return (
+          <MessageItem
+            key={msg.id}
+            msg={msg}
+            contract={props.contract}
+            isGroup={props.isGroupChat}
+            showCheckbox={props.showCheckbox}
+            isSelected={props.isMessageSelected(msg)}
+            currentCustomerAvatar={props.currentCustomerAvatar || ""}
+            renderGroupUser={props.renderGroupUser}
+            clearWechatidInContent={props.clearWechatidInContent}
+            parseMessageContent={props.parseMessageContent}
+            onCheckboxChange={props.onCheckboxChange}
+            onContextMenu={e => props.onContextMenu(e, msg, isOwn)}
+          />
+        );
+      })}
     </div>
   );
 };

src/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageRecord/index.tsx

@@ -1,5 +1,4 @@
 import React, {
-  CSSProperties,
   useCallback,
   useEffect,
   useMemo,
@@ -8,17 +7,8 @@ import React, {
 } from "react";
 import { Avatar, Checkbox } from "antd";
 import { UserOutlined, LoadingOutlined } from "@ant-design/icons";
-import AudioMessage from "./components/AudioMessage/AudioMessage";
-import SmallProgramMessage from "./components/SmallProgramMessage";
-import VideoMessage from "./components/VideoMessage";
 import ClickMenu from "./components/ClickMeau";
-import LocationMessage from "./components/LocationMessage";
-import SystemRecommendRemarkMessage from "./components/SystemRecommendRemarkMessage/index";
-import RedPacketMessage from "./components/RedPacketMessage";
-import TransferMessage from "./components/TransferMessage";
 import { ChatRecord, ContractData, weChatGroup } from "@/pages/pc/ckbox/data";
-import { formatWechatTime } from "@/utils/common";
-import { getEmojiPath } from "@/components/EmojiSeclection/wechatEmoji";
 import { parseSystemMessage } from "@/utils/filter";
 import styles from "./com.module.scss";
 import {
@@ -26,7 +16,7 @@ import {
   useUIStateSelectors,
 } from "@/hooks/weChat/useWeChatSelectors";
 import { useWeChatActions } from "@/hooks/weChat/useWeChatSelectors";
-import { useMessageParser } from "@/hooks/weChat/useMessageParser";
+import { useMessageTypeParser } from "@/hooks/weChat/useMessageTypeParser";
 import { useMessageGrouping } from "@/hooks/weChat/useMessageGrouping";
 import { Profiler } from "@sentry/react";
 import { addPerformanceBreadcrumb } from "@/utils/sentry";
@@ -41,128 +31,19 @@ import {
 } from "./api";
 import TransmitModal from "./components/TransmitModal";
 
-const IMAGE_EXT_REGEX = /\.(jpg|jpeg|png|gif|webp|bmp|svg)$/i;
-const FILE_EXT_REGEX = /\.(pdf|doc|docx|xls|xlsx|ppt|pptx|txt|zip|rar|7z)$/i;
-const DEFAULT_IMAGE_STYLE: CSSProperties = {
-  maxWidth: "200px",
-  maxHeight: "200px",
-  borderRadius: "8px",
-};
-const EMOJI_IMAGE_STYLE: CSSProperties = {
-  maxWidth: "120px",
-  maxHeight: "120px",
-};
-
-type ImageContentOptions = {
-  src: string;
-  alt: string;
-  fallbackText: string;
-  style?: CSSProperties;
-  wrapperClassName?: string;
-  withBubble?: boolean;
-  onClick?: () => void;
-};
-
-const openInNewTab = (url: string) => window.open(url, "_blank");
-
-const handleImageError = (
-  event: React.SyntheticEvent<HTMLImageElement>,
-  fallbackText: string,
-) => {
-  const target = event.target as HTMLImageElement;
-  const parent = target.parentElement;
-  if (parent) {
-    parent.innerHTML = `<div class="${styles.messageText}">${fallbackText}</div>`;
-  }
-};
-
-const renderImageContent = ({
-  src,
-  alt,
-  fallbackText,
-  style = DEFAULT_IMAGE_STYLE,
-  wrapperClassName = styles.imageMessage,
-  withBubble = false,
-  onClick,
-}: ImageContentOptions) => {
-  const imageNode = (
-    <div className={wrapperClassName}>
-      <img
-        src={src}
-        alt={alt}
-        style={style}
-        onClick={onClick ?? (() => openInNewTab(src))}
-        onError={event => handleImageError(event, fallbackText)}
-      />
-    </div>
-  );
-
-  if (withBubble) {
-    return <div className={styles.messageBubble}>{imageNode}</div>;
-  }
-
-  return imageNode;
-};
-
-const renderEmojiContent = (src: string) =>
-  renderImageContent({
-    src,
-    alt: "表情包",
-    fallbackText: "[表情包加载失败]",
-    style: EMOJI_IMAGE_STYLE,
-    wrapperClassName: styles.emojiMessage,
-  });
-
-const renderFileContent = (url: string) => {
-  const fileName = url.split("/").pop()?.split("?")[0] || "文件";
-  const displayName =
-    fileName.length > 20 ? `${fileName.substring(0, 20)}...` : fileName;
-
-  return (
-    <div className={styles.fileMessage}>
-      <div className={styles.fileCard}>
-        <div className={styles.fileIcon}>📄</div>
-        <div className={styles.fileInfo}>
-          <div className={styles.fileName}>{displayName}</div>
-          <div className={styles.fileAction} onClick={() => openInNewTab(url)}>
-            点击查看
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-const isHttpUrl = (value: string) => /^https?:\/\//i.test(value);
-const isHttpImageUrl = (value: string) =>
-  isHttpUrl(value) && IMAGE_EXT_REGEX.test(value);
-const isFileUrl = (value: string) =>
-  isHttpUrl(value) && FILE_EXT_REGEX.test(value);
-
-const isLegacyEmojiContent = (content: string) =>
-  IMAGE_EXT_REGEX.test(content) ||
-  content.includes("emoji") ||
-  content.includes("sticker");
-
-const tryParseContentJson = (content: string): Record<string, any> | null => {
-  try {
-    return JSON.parse(content);
-  } catch (error) {
-    return null;
-  }
-};
-
 interface MessageRecordProps {
   contract: ContractData | weChatGroup;
 }
+// 群成员数据接口（与 API 返回结构一致）
 type GroupRenderItem = {
-  id: number;
-  identifier: string;
+  friendId: number;
+  wechatId: string;
   nickname: string;
   avatar: string;
-  groupId: number;
-  chatroomId?: string;
-  wechatId?: string;
+  isAdmin: boolean;
+  isDeleted: boolean;
+  deletedDate?: string;
+  [key: string]: any;
 };
 
 interface MessageItemProps {
@@ -367,9 +248,8 @@ const MessageRecordComponent: React.FC<MessageRecordProps> = ({ contract }) => {
 
   const currentContract = useWeChatStore(state => state.currentContract);
 
-  // ✅ 使用 useMessageParser Hook（提取消息解析逻辑）
-  const { parseMessageContent, parseEmojiText, isEmojiUrl } =
-    useMessageParser(contract);
+  // ✅ 使用新的 useMessageTypeParser Hook（对象映射配置）
+  const { parseMessageContent } = useMessageTypeParser(contract);
 
   // ✅ 使用 useMessageGrouping Hook（消息分组，使用 useMemo 缓存）
   const groupedMessages = useMessageGrouping(currentMessages);
@@ -385,9 +265,16 @@ const MessageRecordComponent: React.FC<MessageRecordProps> = ({ contract }) => {
       }
       try {
         const res = await getChatroomMemberList({ groupId: contract.id });
-        setGroupRender(res?.list || []);
+        const memberList = res?.list || res || [];
+        console.log("🔍 [群成员] 获取群成员列表:", {
+          groupId: contract.id,
+          chatroomId: contract.chatroomId,
+          memberCount: memberList.length,
+          sampleMember: memberList[0],
+        });
+        setGroupRender(memberList);
       } catch (error) {
-        console.error("获取群成员失败", error);
+        console.error("❌ [群成员] 获取群成员失败:", error);
         setGroupRender([]);
       }
     };
@@ -397,10 +284,15 @@ const MessageRecordComponent: React.FC<MessageRecordProps> = ({ contract }) => {
   const groupMemberMap = useMemo(() => {
     const map = new Map<string, GroupRenderItem>();
     groupRender.forEach(member => {
-      if (member?.identifier) {
-        map.set(member.identifier, member);
+      if (member?.wechatId) {
+        map.set(member.wechatId, member);
       }
     });
+    console.log("🗺️ [群成员] 构建成员映射表:", {
+      totalMembers: groupRender.length,
+      mapSize: map.size,
+      wechatIds: Array.from(map.keys()).slice(0, 5), // 显示前5个
+    });
     return map;
   }, [groupRender]);
 
@@ -410,14 +302,33 @@ const MessageRecordComponent: React.FC<MessageRecordProps> = ({ contract }) => {
         return { avatar: "", nickname: "" };
       }
 
-      const member = msg.senderWechatId
-        ? groupMemberMap.get(msg.senderWechatId)
+      // 优先使用 sender.wechatId，然后是 senderWechatId
+      const senderWechatId = msg.sender?.wechatId || msg.senderWechatId;
+      const member = senderWechatId
+        ? groupMemberMap.get(senderWechatId)
         : undefined;
 
-      return {
-        avatar: member?.avatar || msg?.avatar,
-        nickname: member?.nickname || msg?.senderNickname,
+      const result = {
+        avatar: member?.avatar || msg.sender?.avatar || msg?.avatar || "",
+        nickname:
+          member?.nickname ||
+          msg.sender?.nickname ||
+          msg?.senderNickname ||
+          "未知",
       };
+
+      // 仅在找不到成员时输出调试信息
+      if (!member && senderWechatId) {
+        console.log("⚠️ [群成员] 未找到匹配的群成员:", {
+          senderWechatId,
+          msgId: msg.id,
+          hasSender: !!msg.sender,
+          mapSize: groupMemberMap.size,
+          fallbackNickname: result.nickname,
+        });
+      }
+
+      return result;
     },
     [groupMemberMap],
   );
@@ -654,17 +565,19 @@ const MessageRecordComponent: React.FC<MessageRecordProps> = ({ contract }) => {
   return (
     <Profiler
       name="MessageRecord"
-      onRender={(id, phase, actualDuration) => {
-        // ✅ 使用 Sentry 监控组件渲染性能
-        if (actualDuration > 100) {
-          addPerformanceBreadcrumb("MessageRecord 慢渲染", {
-            duration: actualDuration,
-            phase,
-            messageCount: currentMessages.length,
-            contractId: contract.id,
-          });
-        }
-      }}
+      {...({
+        onRender: (id: any, phase: any, actualDuration: any) => {
+          // ✅ 使用 Sentry 监控组件渲染性能
+          if (actualDuration > 100) {
+            addPerformanceBreadcrumb("MessageRecord 慢渲染", {
+              duration: actualDuration,
+              phase,
+              messageCount: currentMessages.length,
+              contractId: contract.id,
+            });
+          }
+        },
+      } as any)}
     >
       <div ref={messagesContainerRef} className={styles.messagesContainer}>
         <div
@@ -709,66 +622,43 @@ const MessageRecordComponent: React.FC<MessageRecordProps> = ({ contract }) => {
           <>
             {groupedMessages.map((group, groupIndex) => (
               <React.Fragment key={`group-${groupIndex}`}>
-                {group.messages
-                  .filter(v => [10000, -10001].includes(v.msgType))
-                  .map(msg => {
-                    // 解析系统消息，提取纯文本（移除img标签和_wc_custom_link_标签）
-                    const parsedText = parseSystemMessage(msg.content);
-                    return (
-                      <div key={`divider-${msg.id}`} className={styles.messageTime}>
-                        {parsedText}
-                      </div>
-                    );
-                  })}
-
-                {group.messages
-                  .filter(v => [570425393, 90000].includes(v.msgType))
-                  .map(msg => {
-                    // 解析JSON字符串
-                    let displayContent = msg.content;
-                    try {
-                      const parsedContent = JSON.parse(msg.content);
-                      if (
-                        parsedContent &&
-                        typeof parsedContent === "object" &&
-                        parsedContent.content
-                      ) {
-                        displayContent = parsedContent.content;
-                      }
-                    } catch (error) {
-                      // 如果解析失败，使用原始内容
-                      displayContent = msg.content;
-                    }
-                    return (
-                      <div key={`divider-${msg.id}`} className={styles.messageTime}>
-                        {displayContent}
-                      </div>
-                    );
-                  })}
+                {/* 时间标签 */}
                 <div className={styles.messageTime}>{group.time}</div>
-                {group.messages
-                  .filter(
-                    v => ![10000, 570425393, 90000, -10001].includes(v.msgType),
-                  )
-                  .map(msg => {
-                    if (!msg) return null;
+
+                {/* 渲染所有消息（包括系统消息和用户消息） */}
+                {group.messages.map(msg => {
+                  if (!msg) return null;
+
+                  // 使用新的配置系统渲染消息
+                  const renderedContent = parseMessageContent(msg?.content, msg, msg?.msgType);
+
+                  // 如果是系统消息，直接渲染（已经包含了 styles.messageTime 样式）
+                  if ([10000, -10001, 570425393, 90000].includes(msg.msgType)) {
                     return (
-                      <MessageItem
-                        key={msg.id}
-                        msg={msg}
-                        contract={contract}
-                        isGroup={isGroupChat}
-                        showCheckbox={showCheckbox}
-                        isSelected={isMessageSelected(msg)}
-                        currentCustomerAvatar={currentCustomer?.avatar || ""}
-                        renderGroupUser={renderGroupUser}
-                        clearWechatidInContent={clearWechatidInContent}
-                        parseMessageContent={parseMessageContent}
-                        onCheckboxChange={handleCheckboxChange}
-                        onContextMenu={handleContextMenu}
-                      />
+                      <React.Fragment key={`system-${msg.id}`}>
+                        {renderedContent}
+                      </React.Fragment>
                     );
-                  })}
+                  }
+
+                  // 用户消息，使用 MessageItem 组件
+                  return (
+                    <MessageItem
+                      key={msg.id}
+                      msg={msg}
+                      contract={contract}
+                      isGroup={isGroupChat}
+                      showCheckbox={showCheckbox}
+                      isSelected={isMessageSelected(msg)}
+                      currentCustomerAvatar={currentCustomer?.avatar || ""}
+                      renderGroupUser={renderGroupUser}
+                      clearWechatidInContent={clearWechatidInContent}
+                      parseMessageContent={parseMessageContent}
+                      onCheckboxChange={handleCheckboxChange}
+                      onContextMenu={handleContextMenu}
+                    />
+                  );
+                })}
               </React.Fragment>
             ))}
             <div ref={messagesEndRef} />
@@ -792,13 +682,10 @@ const MessageRecordComponent: React.FC<MessageRecordProps> = ({ contract }) => {
 };
 
 // ✅ 使用 React.memo 优化 MessageRecord 组件，避免不必要的重渲染
-const MessageRecord = React.memo(
-  MessageRecordComponent,
-  (prev, next) => {
-    // 只有当联系人 ID 变化时才重新渲染
-    return prev.contract.id === next.contract.id;
-  },
-);
+const MessageRecord = React.memo(MessageRecordComponent, (prev, next) => {
+  // 只有当联系人 ID 变化时才重新渲染
+  return prev.contract.id === next.contract.id;
+});
 
 MessageRecord.displayName = "MessageRecord";
 

src/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageRecord/messageTypes/ArticleMessage.tsx

@@ -0,0 +1,123 @@
+import React from "react";
+
+interface ArticleMessageProps {
+  content: string;
+}
+
+/**
+ * 文章/链接消息组件
+ * msgType = 49 且 content.type === "link"
+ */
+export const ArticleMessage: React.FC<ArticleMessageProps> = ({ content }) => {
+  try {
+    const articleData = typeof content === "string" ? JSON.parse(content) : content;
+    const { title, desc, thumbPath, url } = articleData;
+
+    return (
+      <div
+        style={{
+          maxWidth: "300px",
+          border: "1px solid #e8e8e8",
+          borderRadius: "8px",
+          overflow: "hidden",
+          backgroundColor: "#fff",
+          cursor: "pointer",
+        }}
+        onClick={() => {
+          if (url) {
+            window.open(url, "_blank");
+          }
+        }}
+      >
+        {/* 封面图 */}
+        {thumbPath && (
+          <img
+            src={thumbPath}
+            alt="文章封面"
+            style={{
+              width: "100%",
+              height: "auto",
+              maxHeight: "150px",
+              objectFit: "cover",
+              display: "block",
+            }}
+            onError={(event) => {
+              const target = event.target as HTMLImageElement;
+              target.style.display = "none";
+            }}
+          />
+        )}
+
+        {/* 文章信息 */}
+        <div style={{ padding: "12px" }}>
+          {/* 标题 */}
+          {title && (
+            <div
+              style={{
+                fontWeight: 600,
+                fontSize: "14px",
+                marginBottom: "8px",
+                color: "#333",
+                lineHeight: "1.4",
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                display: "-webkit-box",
+                WebkitLineClamp: 2,
+                WebkitBoxOrient: "vertical",
+              }}
+            >
+              {title}
+            </div>
+          )}
+
+          {/* 描述 */}
+          {desc && (
+            <div
+              style={{
+                fontSize: "12px",
+                color: "#999",
+                lineHeight: "1.5",
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                display: "-webkit-box",
+                WebkitLineClamp: 2,
+                WebkitBoxOrient: "vertical",
+              }}
+            >
+              {desc}
+            </div>
+          )}
+
+          {/* 链接标识 */}
+          <div
+            style={{
+              marginTop: "8px",
+              fontSize: "11px",
+              color: "#1890ff",
+              display: "flex",
+              alignItems: "center",
+              gap: "4px",
+            }}
+          >
+            <span>🔗</span>
+            <span>点击查看文章</span>
+          </div>
+        </div>
+      </div>
+    );
+  } catch (error) {
+    console.error("❌ 文章消息解析失败:", error);
+    return (
+      <div
+        style={{
+          padding: "8px 12px",
+          border: "1px solid #e8e8e8",
+          borderRadius: "4px",
+          color: "#999",
+        }}
+      >
+        [文章消息]
+      </div>
+    );
+  }
+};

src/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageRecord/messageTypes/EmojiMessage.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import styles from "../com.module.scss";
+
+interface EmojiMessageProps {
+  content: string;
+}
+
+/**
+ * 表情包消息组件
+ * msgType = 47
+ */
+export const EmojiMessage: React.FC<EmojiMessageProps> = ({ content }) => {
+  const handleImageError = (event: React.SyntheticEvent<HTMLImageElement>) => {
+    const target = event.target as HTMLImageElement;
+    const parent = target.parentElement;
+    if (parent) {
+      parent.innerHTML = `<div class="${styles.messageText}">[表情包加载失败]</div>`;
+    }
+  };
+
+  return (
+    <div className={styles.emojiMessage}>
+      <img
+        src={content}
+        alt="表情包"
+        style={{
+          maxWidth: "120px",
+          maxHeight: "120px",
+        }}
+        onClick={() => window.open(content, "_blank")}
+        onError={handleImageError}
+      />
+    </div>
+  );
+};

src/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageRecord/messageTypes/ImageMessage.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import styles from "../com.module.scss";
+
+interface ImageMessageProps {
+  content: string;
+}
+
+/**
+ * 图片消息组件
+ * msgType = 3
+ */
+export const ImageMessage: React.FC<ImageMessageProps> = ({ content }) => {
+  let imageUrl = content;
+  try {
+    const parsed = JSON.parse(content);
+    if (parsed && typeof parsed === "object") {
+      imageUrl = parsed.ossUrl || parsed.url || parsed.originUrl || content;
+    }
+  } catch (error) {
+    imageUrl = content;
+  }
+
+  const handleImageError = (event: React.SyntheticEvent<HTMLImageElement>) => {
+    const target = event.target as HTMLImageElement;
+    const parent = target.parentElement;
+    if (parent) {
+      parent.innerHTML = `<div class="${styles.messageText}">[图片加载失败]</div>`;
+    }
+  };
+
+  return (
+    <div className={styles.messageBubble}>
+      <div className={styles.imageMessage}>
+        <img
+          src={imageUrl}
+          alt="图片消息"
+          style={{
+            maxWidth: "200px",
+            maxHeight: "200px",
+            borderRadius: "8px",
+          }}
+          onClick={() => window.open(imageUrl, "_blank")}
+          onError={handleImageError}
+        />
+      </div>
+    </div>
+  );
+};

src/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageRecord/messageTypes/MsgType49Renderer.tsx

@@ -0,0 +1,104 @@
+import React from "react";
+import { ChatRecord, ContractData, weChatGroup } from "@/pages/pc/ckbox/data";
+import SmallProgramMessage from "../components/SmallProgramMessage";
+import { ArticleMessage } from "./ArticleMessage";
+import { FileMessage } from "../components/FileMessage";
+import { MessageTypeNodeProps } from "./messageTypeConfig";
+
+/**
+ * 检测是否为文件消息
+ */
+const isFileMessage = (
+  parsedJson: any,
+  content: string,
+  msg: ChatRecord,
+): boolean => {
+  // 方法1: JSON 中 type === "file"
+  if (parsedJson?.type === "file") {
+    return true;
+  }
+
+  // 方法2: JSON 中存在 contentXml，且包含文件相关标签
+  if (parsedJson?.contentXml) {
+    const xmlContent = String(parsedJson.contentXml);
+    if (
+      xmlContent.includes("<title>") &&
+      (xmlContent.includes("<fileext>") ||
+        xmlContent.includes("<totallen>") ||
+        xmlContent.includes("<filesize>"))
+    ) {
+      return true;
+    }
+  }
+
+  // 方法3: 原始内容中包含文件相关XML标签
+  if (
+    typeof content === "string" &&
+    (content.includes("<title>") ||
+      content.includes("<fileext>") ||
+      content.includes("<totallen>") ||
+      content.includes("<filesize>"))
+  ) {
+    // 排除小程序消息（小程序消息通常包含 weappinfo）
+    if (!content.includes("<weappinfo>")) {
+      return true;
+    }
+  }
+
+  // 方法4: 消息元数据中存在文件信息
+  if (
+    msg?.fileDownloadMeta &&
+    typeof msg.fileDownloadMeta === "object" &&
+    (msg.fileDownloadMeta as any).title
+  ) {
+    return true;
+  }
+
+  return false;
+};
+
+/**
+ * msgType=49 复合消息类型渲染器
+ * 根据 content 内容判断具体类型：文章、小程序、文件等
+ */
+export const renderMsgType49 = (props: MessageTypeNodeProps): React.ReactNode => {
+  const { content, msg, contract, parsedJson } = props;
+
+  // 1. 检测文件消息（优先级最高，避免被误判为小程序）
+  if (isFileMessage(parsedJson, content, msg)) {
+    return <FileMessage content={content} msg={msg} contract={contract} parsedJson={parsedJson} />;
+  }
+
+  // 2. 检测文章消息：type: "link"
+  if (parsedJson?.type === "link") {
+    return <ArticleMessage content={content} />;
+  }
+
+  // 3. 检测小程序消息：包含 XML 标签或被截断的内容
+  // 注意：[该消息内容过长已截断] 说明 JSON 不完整，不要尝试解析，直接用内容特征判断
+  if (
+    content.includes("<weappinfo>") ||
+    content.includes("<?xml") ||
+    content.includes("contentXml") ||
+    content.startsWith("[该消息内容过长已截断]")
+  ) {
+    return (
+      <SmallProgramMessage
+        content={content}
+        msg={msg}
+        contract={contract}
+        parsedJson={parsedJson}
+      />
+    );
+  }
+
+  // 4. 兜底：使用 SmallProgramMessage 处理（包含其他未识别类型）
+  return (
+    <SmallProgramMessage
+      content={content}
+      msg={msg}
+      contract={contract}
+      parsedJson={parsedJson}
+    />
+  );
+};

src/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageRecord/messageTypes/TextMessage.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import styles from "../com.module.scss";
+
+interface TextMessageProps {
+  content: string;
+  parseEmojiText: (text: string) => React.ReactNode[];
+}
+
+/**
+ * 文本消息组件
+ * msgType = 1
+ */
+export const TextMessage: React.FC<TextMessageProps> = ({ content, parseEmojiText }) => {
+  return (
+    <div className={styles.messageBubble}>
+      <div className={styles.messageText}>{parseEmojiText(content)}</div>
+    </div>
+  );
+};

src/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageRecord/messageTypes/UnknownMessage.tsx

@@ -0,0 +1,95 @@
+import React from "react";
+import styles from "../com.module.scss";
+
+interface UnknownMessageProps {
+  content: string;
+  msgType?: number;
+  parsedJson?: any;
+  parseEmojiText: (text: string) => React.ReactNode[];
+}
+
+/**
+ * 未知类型消息组件
+ * 用于兜底处理和通过内容推导类型
+ */
+export const UnknownMessage: React.FC<UnknownMessageProps> = ({
+  content,
+  msgType,
+  parsedJson,
+  parseEmojiText,
+}) => {
+  // 尝试识别图片链接
+  const isImageUrl = /^https?:\/\/.*\.(jpg|jpeg|png|gif|webp|bmp|svg)(\?.*)?$/i.test(content);
+  if (isImageUrl) {
+    return (
+      <div className={styles.imageMessage}>
+        <img
+          src={content}
+          alt="图片"
+          style={{ maxWidth: "200px", maxHeight: "200px", borderRadius: "8px" }}
+          onClick={() => window.open(content, "_blank")}
+          onError={(e) => {
+            const target = e.target as HTMLImageElement;
+            const parent = target.parentElement;
+            if (parent) {
+              parent.innerHTML = `<div class="${styles.messageText}">[图片加载失败]</div>`;
+            }
+          }}
+        />
+      </div>
+    );
+  }
+
+  // 尝试识别文件链接
+  const isFileUrl = /^https?:\/\/.*\.(pdf|doc|docx|xls|xlsx|ppt|pptx|txt|zip|rar|7z)(\?.*)?$/i.test(content);
+  if (isFileUrl) {
+    const fileName = content.split("/").pop()?.split("?")[0] || "文件";
+    const displayName = fileName.length > 20 ? `${fileName.substring(0, 20)}...` : fileName;
+
+    return (
+      <div className={styles.fileMessage}>
+        <div className={styles.fileCard}>
+          <div className={styles.fileIcon}>📄</div>
+          <div className={styles.fileInfo}>
+            <div className={styles.fileName}>{displayName}</div>
+            <div className={styles.fileAction} onClick={() => window.open(content, "_blank")}>
+              点击查看
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // 表情包（旧格式）
+  const isEmoji = /\.(jpg|jpeg|png|gif|webp|bmp|svg)$/i.test(content) ||
+                  content.includes("emoji") ||
+                  content.includes("sticker");
+  if (isEmoji) {
+    return (
+      <div className={styles.emojiMessage}>
+        <img
+          src={content}
+          alt="表情包"
+          style={{ maxWidth: "120px", maxHeight: "120px" }}
+          onClick={() => window.open(content, "_blank")}
+          onError={(e) => {
+            const target = e.target as HTMLImageElement;
+            const parent = target.parentElement;
+            if (parent) {
+              parent.innerHTML = `<div class="${styles.messageText}">[表情包加载失败]</div>`;
+            }
+          }}
+        />
+      </div>
+    );
+  }
+
+  // 默认文本显示
+  return (
+    <div className={styles.messageText}>
+      {msgType && <span style={{ color: "#999", fontSize: "12px" }}>[类型{msgType}] </span>}
+      {parseEmojiText(content)}
+    </div>
+  );
+};

src/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageRecord/messageTypes/messageTypeConfig.tsx

@@ -0,0 +1,380 @@
+import React from "react";
+import { ChatRecord, ContractData, weChatGroup } from "@/pages/pc/ckbox/data";
+import AudioMessage from "../components/AudioMessage/AudioMessage";
+import SmallProgramMessage from "../components/SmallProgramMessage";
+import VideoMessage from "../components/VideoMessage";
+import LocationMessage from "../components/LocationMessage";
+import SystemRecommendRemarkMessage from "../components/SystemRecommendRemarkMessage/index";
+import RedPacketMessage from "../components/RedPacketMessage";
+import TransferMessage from "../components/TransferMessage";
+import { FileMessage } from "../components/FileMessage";
+import { TextMessage } from "./TextMessage";
+import { ImageMessage } from "./ImageMessage";
+import { EmojiMessage } from "./EmojiMessage";
+import { UnknownMessage } from "./UnknownMessage";
+import { ArticleMessage } from "./ArticleMessage";
+import { renderMsgType49 } from "./MsgType49Renderer";
+import { parseSystemMessage } from "@/utils/filter";
+import styles from "../com.module.scss";
+
+/**
+ * 消息类型配置接口
+ */
+export interface MessageTypeConfig {
+  /** 类型名称 */
+  type: string;
+  /** 渲染函数 */
+  nodeFunc: (props: MessageTypeNodeProps) => React.ReactNode;
+  /** 内容检测器（用于推导未知 msgType） */
+  detector?: (content: string, parsedJson: any) => boolean;
+  /** 优先级（detector 冲突时使用，数值越大优先级越高） */
+  priority?: number;
+  /** 是否为系统消息（显示在中间区域） */
+  isSystemMessage?: boolean;
+}
+
+/**
+ * 消息类型渲染属性
+ */
+export interface MessageTypeNodeProps {
+  content: string;
+  msg: ChatRecord;
+  contract: ContractData | weChatGroup;
+  parsedJson?: any; // 已解析的 JSON（如果内容是 JSON）
+  parseEmojiText: (text: string) => React.ReactNode[];
+  isEmojiUrl: (content: string) => boolean;
+}
+
+/**
+ * 消息类型配置对象
+ *
+ * 使用方式：
+ * 1. 根据 msgType 直接查找：MESSAGE_TYPE_MAP[msgType]
+ * 2. 通过 detector 推导：遍历所有配置，找到第一个匹配的
+ * 3. 添加新类型：直接在这里添加新的键值对
+ *
+ * 示例：
+ * ```typescript
+ * MESSAGE_TYPE_MAP[12345] = {
+ *   type: "新类型",
+ *   nodeFunc: ({ content }) => <div>{content}</div>,
+ *   detector: (content, json) => json && json.customField === "value",
+ *   priority: 100
+ * }
+ * ```
+ */
+export const MESSAGE_TYPE_MAP: Record<number, MessageTypeConfig> = {
+  // ==================== 系统消息（显示在中间区域） ====================
+
+  /**
+   * msgType = 10000: 系统消息（如：时间戳、入群通知等）
+   */
+  10000: {
+    type: "系统消息",
+    isSystemMessage: true,
+    nodeFunc: ({ content }) => (
+      <div className={styles.messageTime}>
+        {parseSystemMessage(content)}
+      </div>
+    ),
+  },
+
+  /**
+   * msgType = -10001: 系统消息
+   */
+  [-10001]: {
+    type: "系统消息",
+    isSystemMessage: true,
+    nodeFunc: ({ content }) => (
+      <div className={styles.messageTime}>
+        {parseSystemMessage(content)}
+      </div>
+    ),
+  },
+
+  /**
+   * msgType = 570425393: 系统消息（JSON格式）
+   */
+  570425393: {
+    type: "系统消息(JSON)",
+    isSystemMessage: true,
+    nodeFunc: ({ content, parsedJson }) => {
+      let displayContent = content;
+      if (parsedJson && typeof parsedJson === "object" && parsedJson.content) {
+        displayContent = parsedJson.content;
+      }
+      return <div className={styles.messageTime}>{displayContent}</div>;
+    },
+  },
+
+  /**
+   * msgType = 90000: 系统消息（JSON格式）
+   */
+  90000: {
+    type: "系统消息(JSON)",
+    isSystemMessage: true,
+    nodeFunc: ({ content, parsedJson }) => {
+      let displayContent = content;
+      if (parsedJson && typeof parsedJson === "object" && parsedJson.content) {
+        displayContent = parsedJson.content;
+      }
+      return <div className={styles.messageTime}>{displayContent}</div>;
+    },
+  },
+
+  // ==================== 用户消息 ====================
+
+  /**
+   * msgType = 1: 文本消息
+   */
+  1: {
+    type: "文本",
+    nodeFunc: ({ content, parseEmojiText }) => (
+      <TextMessage content={content} parseEmojiText={parseEmojiText} />
+    ),
+  },
+
+  /**
+   * msgType = 3: 图片消息
+   */
+  3: {
+    type: "图片",
+    nodeFunc: ({ content }) => <ImageMessage content={content} />,
+    detector: (content) => /^https?:\/\/.*\.(jpg|jpeg|png|gif|webp|bmp|svg)(\?.*)?$/i.test(content),
+    priority: 80,
+  },
+
+  /**
+   * msgType = 34: 语音消息
+   */
+  34: {
+    type: "语音",
+    nodeFunc: ({ content, msg }) => (
+      <AudioMessage audioUrl={content} msgId={String(msg.id)} />
+    ),
+  },
+
+  /**
+   * msgType = 43: 视频消息
+   */
+  43: {
+    type: "视频",
+    nodeFunc: ({ content, msg, contract }) => (
+      <VideoMessage content={content} msg={msg} contract={contract} />
+    ),
+    detector: (_, parsedJson) =>
+      parsedJson &&
+      parsedJson.previewImage &&
+      (parsedJson.tencentUrl || parsedJson.videoUrl),
+    priority: 85,
+  },
+
+  /**
+   * msgType = 47: 表情包
+   */
+  47: {
+    type: "表情包",
+    nodeFunc: ({ content, isEmojiUrl }) => {
+      if (isEmojiUrl(content)) {
+        return <EmojiMessage content={content} />;
+      }
+      return <div>[表情包]</div>;
+    },
+    detector: (content) =>
+      content.includes("emoji") ||
+      content.includes("sticker") ||
+      content.includes("expression") ||
+      /\.(jpg|jpeg|png|gif|webp|bmp|svg)$/i.test(content),
+    priority: 70,
+  },
+
+  /**
+   * msgType = 48: 定位消息
+   */
+  48: {
+    type: "定位",
+    nodeFunc: ({ content }) => <LocationMessage content={content} />,
+  },
+
+  /**
+   * msgType = 49: 小程序/文章/文件（复合类型）
+   * 根据 content 内容动态判断具体类型
+   */
+  49: {
+    type: "小程序/文章/文件",
+    nodeFunc: (props) => renderMsgType49(props),
+  },
+
+  /**
+   * msgType = 10002: 系统推荐备注消息
+   */
+  10002: {
+    type: "系统推荐备注",
+    nodeFunc: ({ content }) => <SystemRecommendRemarkMessage content={content} />,
+  },
+};
+
+/**
+ * 特殊类型检测器列表
+ * 用于通过内容推导消息类型（当 msgType 未知或不准确时）
+ * 按优先级排序，优先级高的先检测
+ *
+ * 注意：msgType=49 已在 MESSAGE_TYPE_MAP 中处理，不需要在此添加检测器
+ */
+export const SPECIAL_TYPE_DETECTORS: Array<{
+  name: string;
+  detector: (content: string, parsedJson: any) => boolean;
+  nodeFunc: (props: MessageTypeNodeProps) => React.ReactNode;
+  priority: number;
+}> = [
+  /**
+   * 红包消息（优先级最高）
+   * msgType 通常为 49，但通过内容特征识别
+   */
+  {
+    name: "红包",
+    priority: 95,
+    detector: (_, parsedJson) =>
+      parsedJson &&
+      parsedJson.nativeurl &&
+      typeof parsedJson.nativeurl === "string" &&
+      parsedJson.nativeurl.includes(
+        "wxpay://c2cbizmessagehandler/hongbao/receivehongbao",
+      ),
+    nodeFunc: ({ content, msg, contract }) => (
+      <RedPacketMessage content={content} msg={msg} contract={contract} />
+    ),
+  },
+
+  /**
+   * 转账消息
+   * msgType 通常为 49，但通过内容特征识别
+   */
+  {
+    name: "转账",
+    priority: 95,
+    detector: (_, parsedJson) =>
+      parsedJson &&
+      (parsedJson.title === "微信转账" ||
+        (parsedJson.transferid && parsedJson.feedesc)),
+    nodeFunc: ({ content, msg, contract }) => (
+      <TransferMessage content={content} msg={msg} contract={contract} />
+    ),
+  },
+
+  /**
+   * 视频消息（msgType=43的补充检测）
+   */
+  {
+    name: "视频",
+    priority: 85,
+    detector: (_, parsedJson) =>
+      parsedJson &&
+      parsedJson.previewImage &&
+      (parsedJson.tencentUrl || parsedJson.videoUrl),
+    nodeFunc: ({ content, msg, contract }) => (
+      <VideoMessage content={content} msg={msg} contract={contract} />
+    ),
+  },
+
+  /**
+   * 图片消息（msgType=3的补充检测）
+   */
+  {
+    name: "图片",
+    priority: 80,
+    detector: (content) => /^https?:\/\/.*\.(jpg|jpeg|png|gif|webp|bmp|svg)(\?.*)?$/i.test(content),
+    nodeFunc: ({ content }) => <ImageMessage content={content} />,
+  },
+
+  /**
+   * 文件消息（msgType=49的补充检测）
+   * 当 msgType 未知但内容是文件时，可以通过内容特征识别
+   */
+  {
+    name: "文件",
+    priority: 90,
+    detector: (content, parsedJson) => {
+      // 检测 JSON 格式的文件消息
+      if (parsedJson?.type === "file") {
+        return true;
+      }
+
+      // 检测 JSON 中的 contentXml 包含文件信息
+      if (parsedJson?.contentXml) {
+        const xmlContent = String(parsedJson.contentXml);
+        if (
+          xmlContent.includes("<title>") &&
+          (xmlContent.includes("<fileext>") ||
+            xmlContent.includes("<totallen>") ||
+            xmlContent.includes("<filesize>"))
+        ) {
+          // 排除小程序（小程序通常包含 weappinfo）
+          if (!xmlContent.includes("<weappinfo>")) {
+            return true;
+          }
+        }
+      }
+
+      // 检测原始内容中的文件XML标签
+      if (typeof content === "string") {
+        if (
+          (content.includes("<title>") &&
+            (content.includes("<fileext>") ||
+              content.includes("<totallen>") ||
+              content.includes("<filesize>"))) &&
+          !content.includes("<weappinfo>")
+        ) {
+          return true;
+        }
+      }
+
+      return false;
+    },
+    nodeFunc: ({ content, msg, contract, parsedJson }) => (
+      <FileMessage
+        content={content}
+        msg={msg}
+        contract={contract}
+        parsedJson={parsedJson}
+      />
+    ),
+  },
+
+  /**
+   * 表情包（msgType=47的补充检测）
+   */
+  {
+    name: "表情包",
+    priority: 70,
+    detector: (content) =>
+      content.includes("emoji") ||
+      content.includes("sticker") ||
+      content.includes("expression") ||
+      /\.(jpg|jpeg|png|gif|webp|bmp|svg)$/i.test(content),
+    nodeFunc: ({ content, isEmojiUrl }) => {
+      if (isEmojiUrl(content)) {
+        return <EmojiMessage content={content} />;
+      }
+      return <div>[表情包]</div>;
+    },
+  },
+];
+
+// 按优先级排序
+SPECIAL_TYPE_DETECTORS.sort((a, b) => b.priority - a.priority);
+
+/**
+ * 未知类型兜底处理
+ */
+export const UNKNOWN_MESSAGE_CONFIG: MessageTypeConfig = {
+  type: "未知",
+  nodeFunc: ({ content, msg, parsedJson, parseEmojiText }) => (
+    <UnknownMessage
+      content={content}
+      msgType={msg.msgType}
+      parsedJson={parsedJson}
+      parseEmojiText={parseEmojiText}
+    />
+  ),
+};

src/pages/pc/ckbox/weChat/components/ChatWindow/components/ProfileCard/components/FriendsCicle/api.ts

@@ -1,7 +1,11 @@
 // 朋友圈相关的API接口
 import { useWebSocketStore } from "@/store/module/websocket/websocket";
 
-// 朋友圈请求参数接口
+// ==================== 已废弃的 Socket 请求接口 ====================
+// 注意：朋友圈数据获取已改为使用 getFriendsCircleData HTTP 接口
+// 以下接口仅保留用于向后兼容，新代码请使用 getFriendsCircleData
+
+// 朋友圈请求参数接口（已废弃）
 export interface FetchMomentParams {
   wechatAccountId: number;
   wechatFriendId?: number;
@@ -12,7 +16,11 @@ export interface FetchMomentParams {
   seq?: number;
 }
 
-// 获取朋友圈数据
+/**
+ * 获取朋友圈数据（已废弃）
+ * @deprecated 请使用 getFriendsCircleData 接口替代
+ * 新代码请从 @/pages/pc/ckbox/weChat/components/SidebarMenu/FriendsCicle/api 导入 getFriendsCircleData
+ */
 export const fetchFriendsCircleData = async (params: FetchMomentParams) => {
   const { sendCommand } = useWebSocketStore.getState();
   sendCommand("CmdFetchMoment", params);

src/pages/pc/ckbox/weChat/components/ChatWindow/components/ProfileCard/components/FriendsCicle/components/friendCard.tsx

@@ -11,9 +11,9 @@ import {
   CommentItem,
   likeListItem,
   FriendCardProps,
-  MomentListProps,
   FriendsCircleItem,
 } from "@/pages/pc/ckbox/weChat/components/SidebarMenu/FriendsCicle/index.data";
+import { MomentListProps } from "../index.data";
 import styles from "../index.module.scss";
 import {
   likeMoment,
@@ -320,7 +320,7 @@ export const MomentList: React.FC<MomentListProps> = ({
           <Spin indicator={<LoadingOutlined spin />} /> 加载中...
         </div>
       ) : (
-        <p className={styles.emptyText}>暂无我的朋友圈内容</p>
+        <p className={styles.emptyText}>暂无朋友圈内容</p>
       )}
     </div>
   );

src/pages/pc/ckbox/weChat/components/ChatWindow/components/ProfileCard/components/FriendsCicle/index.tsx

@@ -1,69 +1,250 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import { Collapse } from "antd";
 import { ChromeOutlined } from "@ant-design/icons";
 import { MomentList } from "./components/friendCard";
 
-import dayjs from "dayjs";
 import styles from "./index.module.scss";
-import { fetchFriendsCircleData } from "./api";
+import { getFriendsCircleData } from "@/pages/pc/ckbox/weChat/components/SidebarMenu/FriendsCicle/api";
 import { useCkChatStore } from "@/store/module/ckchat/ckchat";
-import { useWeChatStore } from "@/store/module/weChat/weChat";
-import { useShallow } from "zustand/react/shallow";
+import { getWechatFriendDetail } from "@/pages/pc/ckbox/weChat/components/SidebarMenu/MessageList/api";
 
 interface FriendsCircleProps {
   wechatFriendId?: number;
+  wechatId?: string; // 直接传入的微信id，优先使用
 }
 
-const FriendsCircle: React.FC<FriendsCircleProps> = ({ wechatFriendId }) => {
+const FriendsCircle: React.FC<FriendsCircleProps> = ({
+  wechatFriendId,
+  wechatId,
+}) => {
   const currentKf = useCkChatStore(state =>
     state.kfUserList.find(kf => kf.id === state.kfSelected),
   );
-  // ✅ 使用 useShallow 避免 getSnapshot 警告
-  const { clearMomentCommon, updateMomentCommonLoading } = useWeChatStore(
-    useShallow(state => ({
-      clearMomentCommon: state.clearMomentCommon,
-      updateMomentCommonLoading: state.updateMomentCommonLoading,
-    })),
-  );
-  const MomentCommon = useWeChatStore(state => state.MomentCommon);
-  const MomentCommonLoading = useWeChatStore(
-    state => state.MomentCommonLoading,
-  );
 
-  // 页面重新渲染时重置MomentCommonLoading状态
-  useEffect(() => {
-    updateMomentCommonLoading(false);
-  }, []);
+  // ✅ 使用本地状态隔离个人资料朋友圈的数据，避免与侧边栏朋友圈数据冲突
+  const [MomentCommon, setMomentCommon] = useState<any[]>([]);
+  const [MomentCommonLoading, setMomentCommonLoading] = useState(false);
 
   // 状态管理
   const [expandedKeys, setExpandedKeys] = useState<string[]>([]);
+  // 当前页码，用于分页
+  const currentPageRef = useRef<number>(1);
+  // 好友的 wechatId（缓存）
+  const friendWechatIdRef = useRef<string | undefined>(undefined);
 
-  // 加载更多我的朋友圈
-  const loadMomentData = async (loadMore: boolean = false) => {
-    updateMomentCommonLoading(true);
-    // 加载数据;
-    const requestData = {
-      cmdType: "CmdFetchMoment",
-      wechatAccountId: currentKf?.id || 0,
-      wechatFriendId: wechatFriendId || 0,
-      createTimeSec: Math.floor(dayjs().subtract(2, "month").valueOf() / 1000),
-      prevSnsId: loadMore
-        ? Number(MomentCommon[MomentCommon.length - 1]?.snsId) || 0
-        : 0,
-      count: 10,
-      isTimeline: expandedKeys.includes("1"),
-      seq: Date.now(),
-    };
-    await fetchFriendsCircleData(requestData);
+  // 当 wechatFriendId 或 wechatId 变化时，清空数据并重置缓存
+  useEffect(() => {
+    console.log("🔄 [个人资料] 好友信息变化，重置朋友圈数据:", {
+      wechatFriendId,
+      wechatId,
+    });
+    setMomentCommon([]);
+    setMomentCommonLoading(false);
+    friendWechatIdRef.current = wechatId; // 如果直接传入了 wechatId，直接使用
+    currentPageRef.current = 1;
+    setExpandedKeys([]); // 重置展开状态
+  }, [wechatFriendId, wechatId]);
+
+  // 加载朋友圈数据
+  const loadMomentData = async (
+    loadMore: boolean = false,
+    forceKey?: string,
+  ) => {
+    // 如果既没有 wechatId 也没有 wechatFriendId，无法加载
+    if (!wechatId && !wechatFriendId) {
+      console.warn(
+        "⚠️ wechatId 和 wechatFriendId 都不存在，无法加载好友朋友圈",
+      );
+      setMomentCommonLoading(false);
+      return;
+    }
+
+    // 确定当前场景的 key（优先使用传入的 forceKey，否则使用 expandedKeys）
+    const currentKey = forceKey || expandedKeys[0];
+    if (!currentKey) {
+      // 如果没有展开任何面板，不加载数据
+      setMomentCommonLoading(false);
+      return;
+    }
+
+    console.log(
+      "🔄 [个人资料] 开始加载好友朋友圈数据，wechatFriendId:",
+      wechatFriendId,
+      "场景key:",
+      currentKey,
+      "是否加载更多:",
+      loadMore,
+    );
+
+    setMomentCommonLoading(true);
+
+    try {
+      // 获取好友的 wechatId
+      // 优先使用直接传入的 wechatId，如果没有则通过 wechatFriendId 获取
+      if (!friendWechatIdRef.current) {
+        if (wechatId) {
+          // 如果直接传入了 wechatId，直接使用
+          friendWechatIdRef.current = wechatId;
+          console.log(
+            "✅ [个人资料] 使用直接传入的 wechatId:",
+            friendWechatIdRef.current,
+          );
+        } else if (wechatFriendId) {
+          // 如果没有直接传入，通过 wechatFriendId 获取
+          try {
+            const friendDetail = await getWechatFriendDetail({
+              id: wechatFriendId,
+            });
+            if (friendDetail?.detail?.wechatId) {
+              friendWechatIdRef.current = friendDetail.detail.wechatId;
+              console.log(
+                "✅ [个人资料] 通过 wechatFriendId 获取 wechatId 成功:",
+                friendWechatIdRef.current,
+              );
+            } else {
+              console.error("❌ 好友详情中没有 wechatId");
+              setMomentCommonLoading(false);
+              return;
+            }
+          } catch (error) {
+            console.error("获取好友详情失败:", error);
+            setMomentCommonLoading(false);
+            return;
+          }
+        } else {
+          console.error("❌ 无法获取 wechatId");
+          setMomentCommonLoading(false);
+          return;
+        }
+      }
+
+      console.log(
+        "✅ [个人资料] 使用好友的 wechatId 加载朋友圈:",
+        friendWechatIdRef.current,
+      );
+
+      // 重置页码（如果不是加载更多）
+      if (!loadMore) {
+        currentPageRef.current = 1;
+      }
+
+      // 调用接口获取朋友圈数据（传好友的 wechatId）
+      console.log(friendWechatIdRef);
+
+      const result = await getFriendsCircleData({
+        wechatId: friendWechatIdRef.current,
+        page: currentPageRef.current,
+        limit: 10,
+      });
+
+      // 处理返回的数据
+      const momentList = result?.list || [];
+
+      // 转换数据格式：将 API 返回的数据转换为组件内部使用的格式
+      const transformedList = momentList.map((item: any) => {
+        // 转换 createTime：从 "2026-01-15 13:27:37" 格式转换为时间戳（秒）
+        let createTimeNumber: number;
+        if (typeof item.createTime === "string") {
+          // 处理 "2026-01-15 13:27:37" 格式
+          // 将 "2026-01-15 13:27:37" 转换为 "2026/01/15 13:27:37" 以便正确解析
+          const normalizedTime = item.createTime.replace(/-/g, "/");
+          const date = new Date(normalizedTime);
+          if (!isNaN(date.getTime())) {
+            createTimeNumber = Math.floor(date.getTime() / 1000);
+          } else {
+            // 如果解析失败，尝试 ISO 格式或直接解析
+            const fallbackDate = new Date(item.createTime);
+            createTimeNumber = isNaN(fallbackDate.getTime())
+              ? Math.floor(Date.now() / 1000)
+              : Math.floor(fallbackDate.getTime() / 1000);
+            console.warn(
+              "⚠️ 时间格式解析异常，使用备用解析:",
+              createTimeNumber,
+              "原始值:",
+              item.createTime,
+            );
+          }
+        } else if (typeof item.createTime === "number") {
+          // 如果已经是数字，确保是秒级时间戳
+          createTimeNumber =
+            item.createTime > 1000000000000
+              ? Math.floor(item.createTime / 1000)
+              : item.createTime;
+        } else {
+          // 默认值
+          createTimeNumber = Math.floor(Date.now() / 1000);
+        }
+
+        // 构建组件内部使用的数据结构
+        // 注意：组件期望 momentEntity 中包含 content 和 resUrls
+        return {
+          snsId: item.snsId,
+          type: item.type,
+          commentList: item.commentList || [],
+          likeList: item.likeList || [],
+          createTime: createTimeNumber, // number 类型
+          momentEntity: {
+            content: item.content || "",
+            createTime: createTimeNumber, // number 类型
+            lat: parseFloat(item.momentEntity?.lat || "0"),
+            lng: parseFloat(item.momentEntity?.lng || "0"),
+            location: item.momentEntity?.location || "",
+            objectType: item.type,
+            picSize: item.momentEntity?.picSize || 0,
+            resUrls: item.resUrls || [],
+            snsId: item.snsId,
+            urls: item.resUrls || [],
+            userName: item.momentEntity?.userName || "",
+          },
+        };
+      });
+
+      if (loadMore) {
+        // 加载更多：追加数据
+        setMomentCommon(prev => [...prev, ...transformedList]);
+      } else {
+        // 首次加载：替换数据
+        setMomentCommon(transformedList);
+      }
+
+      // 如果返回的数据少于 limit，说明没有更多数据了
+      if (momentList.length < 10) {
+        console.log("📄 [个人资料] 已加载全部朋友圈数据");
+      } else {
+        // 增加页码，准备下次加载更多
+        currentPageRef.current += 1;
+      }
+    } catch (error) {
+      console.error("[个人资料] 加载朋友圈数据失败:", error);
+    } finally {
+      setMomentCommonLoading(false);
+    }
   };
 
   // 处理折叠面板展开/收起
   const handleCollapseChange = (keys: string | string[]) => {
     const keyArray = Array.isArray(keys) ? keys : [keys];
+    const previousKey = expandedKeys[0];
+    const newKey = keyArray[0];
+
+    console.log("📂 折叠面板变化:", {
+      previousKey,
+      newKey,
+      keysLength: keys.length,
+    });
+
     setExpandedKeys(keyArray);
-    if (!MomentCommonLoading && keys.length > 0) {
-      clearMomentCommon();
-      loadMomentData(false);
+
+    // 当展开面板时（keys.length > 0），加载数据
+    // 注意：这里直接传入 newKey，避免使用还未更新的 expandedKeys
+    if (keys.length > 0 && newKey) {
+      console.log("✅ [个人资料] 展开面板，准备加载数据，场景key:", newKey);
+      setMomentCommon([]); // 清空本地数据
+      currentPageRef.current = 1; // 重置页码
+      // 传入 newKey 作为 forceKey，确保使用最新的 key
+      loadMomentData(false, newKey);
+    } else {
+      console.log("❌ [个人资料] 收起面板，不加载数据");
     }
   };
 

src/pages/pc/ckbox/weChat/components/ChatWindow/components/ProfileCard/components/ProfileModules/index.tsx

@@ -33,6 +33,7 @@ import TwoColumnMemberSelection from "@/components/MemberSelection/TwoColumnMemb
 import { FriendSelectionItem } from "@/components/FriendSelection/data";
 import DetailValue from "./components/detailValue";
 import { getFriendInfo, FriendDetailResponse, updateFriendInfo } from "./api";
+import { getContactList } from "@/pages/pc/ckbox/weChat/api";
 import styles from "./Person.module.scss";
 interface PersonProps {
   contract: ContractData | weChatGroup;
@@ -747,45 +748,41 @@ const Person: React.FC<PersonProps> = ({ contract }) => {
   const [currentContactPage, setCurrentContactPage] = useState(1);
   const [contactPageSize] = useState(10);
   const [isLoadingContacts, setIsLoadingContacts] = useState(false);
+  const [searchKeyword, setSearchKeyword] = useState(""); // 搜索关键词
+  const [searchTimer, setSearchTimer] = useState<ReturnType<
+    typeof setTimeout
+  > | null>(null);
 
-  // 从数据库获取联系人数据的通用函数
-  const fetchContacts = async (page = 1) => {
+  // 从好友列表 API 获取联系人数据的通用函数
+  const fetchContacts = async (page = 1, keyword = "") => {
     try {
-      const { databaseManager, initializeDatabaseFromPersistedUser } =
-        await import("@/utils/db");
+      const params: any = {
+        page,
+        limit: contactPageSize,
+        wechatAccountId: contract.wechatAccountId,
+      };
 
-      // 检查数据库初始化状态
-      if (!databaseManager.isInitialized()) {
-        await initializeDatabaseFromPersistedUser();
+      // 如果有搜索关键词，添加到参数中
+      if (keyword && keyword.trim()) {
+        params.keyword = keyword.trim();
       }
 
-      // 获取当前用户ID
-      const userId = (kfSelectedUser as any)?.userId || 0;
-      const storeUserId = databaseManager.getCurrentUserId();
-      const effectiveUserId = storeUserId || userId;
+      console.log("📋 [添加群成员] 从 API 获取好友列表:", params);
 
-      if (!effectiveUserId) {
-        messageApi.error("无法获取用户信息，请尝试重新登录");
-        return [];
-      }
+      // 调用好友列表 API 接口
+      const result = await getContactList(params, { debounceGap: 0 });
 
-      // 查询联系人数据
-      const allContacts = await contactUnifiedService.findWhereMultiple([
-        { field: "userId", operator: "equals", value: effectiveUserId },
-        {
-          field: "wechatAccountId",
-          operator: "equals",
-          value: contract.wechatAccountId,
-        },
-        { field: "type", operator: "equals", value: "friend" },
-      ]);
+      const friendList = result?.list || [];
+      console.log("✅ [添加群成员] 获取到好友列表:", {
+        page,
+        keyword,
+        count: friendList.length,
+        total: result?.total || 0,
+      });
 
-      // 手动分页
-      const startIndex = (page - 1) * contactPageSize;
-      const endIndex = startIndex + contactPageSize;
-      return allContacts.slice(startIndex, endIndex);
+      return friendList;
     } catch (error) {
-      console.error("获取联系人数据失败:", error);
+      console.error("❌ [添加群成员] 获取联系人数据失败:", error);
       messageApi.error("获取联系人数据失败");
       return [];
     }
@@ -794,7 +791,9 @@ const Person: React.FC<PersonProps> = ({ contract }) => {
   const addMember = async () => {
     try {
       setIsLoadingContacts(true);
-      const pagedContacts = await fetchContacts(currentContactPage);
+      setSearchKeyword(""); // 重置搜索关键词
+      setCurrentContactPage(1); // 重置页码
+      const pagedContacts = await fetchContacts(1, "");
       // 转换为选择器需要的数据格式
       const friendSelectionData = pagedContacts.map(item => ({
         id: item.id || item.serverId,
@@ -810,7 +809,7 @@ const Person: React.FC<PersonProps> = ({ contract }) => {
 
       // 如果没有联系人数据，显示提示
       if (friendSelectionData.length === 0) {
-        messageApi.info("未找到可添加的联系人，可能需要先同步联系人数据");
+        messageApi.info("未找到可添加的联系人");
       }
     } catch (error) {
       console.error("获取联系人列表失败:", error);
@@ -827,8 +826,8 @@ const Person: React.FC<PersonProps> = ({ contract }) => {
       setIsLoadingContacts(true);
       const nextPage = currentContactPage + 1;
       setCurrentContactPage(nextPage);
-      // 使用通用函数获取下一页联系人数据
-      const pagedContacts = await fetchContacts(nextPage);
+      // 使用通用函数获取下一页联系人数据，传入当前搜索关键词
+      const pagedContacts = await fetchContacts(nextPage, searchKeyword);
       // 转换数据格式
       const newFriendSelectionData = pagedContacts.map(item => ({
         id: item.id || item.serverId,
@@ -854,7 +853,12 @@ const Person: React.FC<PersonProps> = ({ contract }) => {
         return uniqueList;
       });
 
-      messageApi.success(`已加载${pagedContacts.length}条联系人数据`);
+      // 成功加载，只在控制台输出日志
+      if (pagedContacts.length > 0) {
+        console.log(
+          `✅ [加载更多] 已加载 ${pagedContacts.length} 条联系人数据`,
+        );
+      }
     } catch (error) {
       console.error("加载更多联系人失败:", error);
       messageApi.error("加载更多联系人失败");
@@ -862,6 +866,53 @@ const Person: React.FC<PersonProps> = ({ contract }) => {
       setIsLoadingContacts(false);
     }
   };
+
+  // 处理搜索
+  const handleSearchContacts = async (keyword: string) => {
+    // 清除之前的定时器
+    if (searchTimer) {
+      clearTimeout(searchTimer);
+    }
+
+    setSearchKeyword(keyword);
+
+    // 设置新的防抖定时器
+    const timer = setTimeout(async () => {
+      try {
+        setIsLoadingContacts(true);
+        setCurrentContactPage(1); // 重置页码
+        console.log("🔍 [搜索好友] 关键词:", keyword);
+
+        const pagedContacts = await fetchContacts(1, keyword);
+        const friendSelectionData = pagedContacts.map(item => ({
+          id: item.id || item.serverId,
+          wechatId: item.wechatId,
+          nickname: item.nickname,
+          avatar: item.avatar || "",
+          conRemark: item.conRemark,
+          name: item.conRemark || item.nickname,
+        }));
+
+        setContractList(friendSelectionData);
+
+        // 只有搜索无结果时才提示
+        if (keyword && friendSelectionData.length === 0) {
+          messageApi.info(`未找到包含"${keyword}"的好友`);
+        } else if (keyword && friendSelectionData.length > 0) {
+          console.log(
+            `✅ [搜索成功] 找到 ${friendSelectionData.length} 条匹配结果`,
+          );
+        }
+      } catch (error) {
+        console.error("搜索好友失败:", error);
+        messageApi.error("搜索好友失败");
+      } finally {
+        setIsLoadingContacts(false);
+      }
+    }, 300); // 300ms 防抖
+
+    setSearchTimer(timer);
+  };
   // 不再需要加载状态和错误状态的渲染，始终显示缓存数据
 
   return (
@@ -1502,6 +1553,8 @@ const Person: React.FC<PersonProps> = ({ contract }) => {
         onCancel={() => {
           setIsFriendSelectionVisible(false);
           setCurrentContactPage(1); // 重置页码
+          setSearchKeyword(""); // 重置搜索关键词
+          if (searchTimer) clearTimeout(searchTimer); // 清除定时器
         }}
         onConfirm={(selectedIds, selectedItems) => {
           handleAddMember(
@@ -1509,10 +1562,12 @@ const Person: React.FC<PersonProps> = ({ contract }) => {
             selectedItems,
           );
           setCurrentContactPage(1); // 重置页码
+          setSearchKeyword(""); // 重置搜索关键词
         }}
         dataSource={contractList}
         title="添加群成员"
         onLoadMore={loadMoreContacts}
+        onSearch={handleSearchContacts} // 传入搜索处理函数
         hasMore={true} // 强制设置为true，确保显示加载更多按钮
         loading={isLoadingContacts}
       />

src/pages/pc/ckbox/weChat/components/ChatWindow/components/ProfileCard/components/QuickWords/api.ts

@@ -6,7 +6,7 @@ export interface QuickWordsReply {
   userId: number;
   title: string;
   msgType: number;
-  content: string;
+  content: any;
   createTime: string;
   lastUpdateTime: string;
   sortIndex: string;
@@ -41,7 +41,7 @@ export interface AddReplyRequest {
   /**
    * 1文本 3图片 43视频 49链接 等
    */
-  msgType?: string[];
+  msgType?: number;
   /**
    * 默认50
    */
@@ -72,7 +72,7 @@ export interface AddGroupRequest {
   /**
    * 0 公共 1私有 2部门
    */
-  replyType?: string[];
+  replyType?: number;
   /**
    * 默认50
    */

src/pages/pc/ckbox/weChat/components/ChatWindow/components/ProfileCard/components/QuickWords/components/QuickReplyModal.tsx

@@ -1,14 +1,149 @@
 import React, { useMemo } from "react";
-import { Modal, Form, Input, Select, Space, Button } from "antd";
+import { Modal, Form, Input, Select, Space, Button, Popover, Image, Typography } from "antd";
 import {
   PictureOutlined,
   VideoCameraOutlined,
   LinkOutlined,
+  QuestionCircleOutlined,
 } from "@ant-design/icons";
 import SimpleFileUpload from "@/components/Upload/SimpleFileUpload";
+import MainImgUpload from "@/components/Upload/MainImgUpload";
 // 简化版不再使用样式与解析组件
 import { AddReplyRequest } from "../api";
 
+const MINIPROGRAM_NATIVE_ID_TUTORIAL_IMAGES = [
+  "http://karuosiyujzk.oss-cn-shenzhen.aliyuncs.com/2026/04/07/e3eb9174b7891d3a2edb60b9ac567fe4.png",
+  "http://karuosiyujzk.oss-cn-shenzhen.aliyuncs.com/2026/04/07/79232d47338e5dfa87236e83606c0de1.png",
+  "http://karuosiyujzk.oss-cn-shenzhen.aliyuncs.com/2026/04/07/29076514baf128cfc6157ac1121743e7.jpg",
+] as const;
+
+/** 教程气泡高于常见 Modal(1000 起跳)；图片预览再高于气泡，避免点击放大后遮罩层级错乱 */
+const MINIPROGRAM_TUTORIAL_POPOVER_Z = 2050;
+const MINIPROGRAM_TUTORIAL_PREVIEW_Z = 3100;
+
+const MiniProgramGhTutorialPopover = () => (
+  <Popover
+    title={
+      <span style={{ fontWeight: 600, fontSize: 14 }}>如何查看小程序原生 id</span>
+    }
+    trigger="click"
+    placement="rightTop"
+    zIndex={MINIPROGRAM_TUTORIAL_POPOVER_Z}
+    styles={{
+      root: { zIndex: MINIPROGRAM_TUTORIAL_POPOVER_Z, maxWidth: 360 },
+    }}
+    overlayInnerStyle={{
+      padding: "10px 12px 12px",
+      boxShadow: "0 6px 24px rgba(0,0,0,0.12)",
+    }}
+    destroyTooltipOnHide
+    getPopupContainer={() => document.body}
+    content={
+      <div style={{ width: 300, maxWidth: "min(300px, 88vw)" }}>
+        <Typography.Paragraph
+          type="secondary"
+          style={{ marginBottom: 8, fontSize: 11, lineHeight: 1.5 }}
+        >
+          在微信公众平台 / 小程序后台找到「账号原始 ID」（通常形如{" "}
+          <Typography.Text code style={{ fontSize: 12 }}>
+            gh_xxxxxxxx
+          </Typography.Text>
+          ），复制到输入框即可，无需带{" "}
+          <Typography.Text code style={{ fontSize: 12 }}>
+            @app
+          </Typography.Text>
+          。点击图片可放大查看。
+        </Typography.Paragraph>
+        <div
+          style={{
+            maxHeight: "min(42vh, 380px)",
+            overflowY: "auto",
+            marginRight: -4,
+            paddingRight: 4,
+          }}
+        >
+          <Image.PreviewGroup
+            preview={{
+              zIndex: MINIPROGRAM_TUTORIAL_PREVIEW_Z,
+              getContainer: () => document.body,
+            }}
+          >
+            {MINIPROGRAM_NATIVE_ID_TUTORIAL_IMAGES.map((src, i) => (
+              <div key={src}>
+                <Typography.Text
+                  type="secondary"
+                  style={{
+                    display: "block",
+                    fontSize: 11,
+                    marginBottom: 6,
+                    letterSpacing: 0.2,
+                  }}
+                >
+                  步骤 {i + 1} / {MINIPROGRAM_NATIVE_ID_TUTORIAL_IMAGES.length}
+                </Typography.Text>
+                <Image
+                  src={src}
+                  alt={`小程序原生 id 教程 ${i + 1}/${MINIPROGRAM_NATIVE_ID_TUTORIAL_IMAGES.length}`}
+                  width={276}
+                  style={{
+                    maxWidth: "100%",
+                    height: "auto",
+                    display: "block",
+                    borderRadius: 6,
+                    border: "1px solid rgba(0,0,0,0.06)",
+                    cursor: "zoom-in",
+                  }}
+                />
+                {i < MINIPROGRAM_NATIVE_ID_TUTORIAL_IMAGES.length - 1 ? (
+                  <div style={{ height: 14 }} />
+                ) : null}
+              </div>
+            ))}
+          </Image.PreviewGroup>
+        </div>
+      </div>
+    }
+  >
+    <span
+      role="button"
+      tabIndex={0}
+      title="查看填写说明"
+      style={{ display: "inline-flex", alignItems: "center", marginLeft: 6 }}
+      onClick={e => {
+        e.preventDefault();
+        e.stopPropagation();
+      }}
+      onKeyDown={e => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          e.stopPropagation();
+        }
+      }}
+    >
+      <QuestionCircleOutlined
+        style={{
+          color: "#8c8c8c",
+          cursor: "pointer",
+          fontSize: 15,
+          padding: 2,
+          borderRadius: "50%",
+          transition: "color 0.2s, background-color 0.2s",
+        }}
+        onMouseEnter={e => {
+          const el = e.currentTarget;
+          el.style.color = "#1677ff";
+          el.style.backgroundColor = "rgba(22, 119, 255, 0.08)";
+        }}
+        onMouseLeave={e => {
+          const el = e.currentTarget;
+          el.style.color = "#8c8c8c";
+          el.style.backgroundColor = "transparent";
+        }}
+      />
+    </span>
+  </Popover>
+);
+
 export interface QuickReplyModalProps {
   open: boolean;
   mode: "add" | "edit";
@@ -28,16 +163,80 @@ const QuickReplyModal: React.FC<QuickReplyModalProps> = ({
   groupOptions,
   defaultGroupId,
 }) => {
-  const [form] = Form.useForm<AddReplyRequest>();
+  const [form] = Form.useForm();
+
+  const normalizeGh = (ghValue?: string) => {
+    if (!ghValue) return "";
+    // 用户一般不需要手动填写 @app，后端适配器会自动补全
+    return String(ghValue).replace(/@app$/i, "");
+  };
 
   const mergedInitialValues = useMemo(() => {
-    return {
+    const baseValues = {
       groupId: defaultGroupId,
       msgType: initialValues?.msgType || ["1"],
       ...initialValues,
-    } as Partial<AddReplyRequest>;
+    };
+
+    // 如果是编辑模式且是 msgType=49（链接/小程序复合类型），解析 content 中的 JSON
+    if (
+      initialValues?.msgType &&
+      Array.isArray(initialValues.msgType) &&
+      initialValues.msgType[0] === "49" &&
+      initialValues.content
+    ) {
+      try {
+        // 处理 content 可能是对象或字符串两种情况
+        let linkData: any;
+        if (typeof initialValues.content === 'string') {
+          // 如果是字符串，尝试解析 JSON
+          linkData = JSON.parse(initialValues.content);
+        } else if (typeof initialValues.content === 'object') {
+          // 如果已经是对象，直接使用
+          linkData = initialValues.content;
+        } else {
+          return baseValues;
+        }
+
+        // 小程序：content 通常是 { type: 'miniprogram', title, des, gh, pagepath, previewImage, ... }
+        if (linkData?.type === "miniprogram" || linkData?.contentXml) {
+          return {
+            ...baseValues,
+            // UI 层使用 50 标识“小程序”，实际提交仍会归一为 msgType=49
+            msgType: ["50"],
+            des: linkData.des || "",
+            gh: normalizeGh(linkData.gh || linkData.miniProgramId || ""),
+            pagepath: linkData.pagepath || linkData.pagePath || "",
+            previewImage: linkData.previewImage || linkData.cover || linkData.thumbPath || "",
+            // content 字段不参与小程序表单
+            content: "",
+          };
+        }
+
+        // 链接：content 通常是 { url, thumbPath, desc }
+        return {
+          ...baseValues,
+          content: linkData.url || "",
+          thumbPath: linkData.thumbPath || "",
+          desc: linkData.desc || "",
+        };
+      } catch {
+        // 如果解析失败，保持原值
+        return baseValues;
+      }
+    }
+
+    return baseValues;
   }, [initialValues, defaultGroupId]);
 
+  // 监听 modal 打开和模式变化，重置表单
+  React.useEffect(() => {
+    if (open) {
+      form.resetFields();
+      form.setFieldsValue(mergedInitialValues);
+    }
+  }, [open, mode, form, mergedInitialValues]);
+
   // 监听类型变化
   const msgTypeWatch = Form.useWatch("msgType", form);
   const selectedMsgType = useMemo(() => {
@@ -46,6 +245,26 @@ const QuickReplyModal: React.FC<QuickReplyModalProps> = ({
     return Number(raw || "1");
   }, [msgTypeWatch]);
 
+  // 监听 content 变化，用于 LINK 类型输入框
+  const contentWatch = Form.useWatch("content", form);
+
+  // 获取 LINK 类型的 url 值
+  const getLinkUrl = useMemo(() => {
+    if (selectedMsgType === 49 && contentWatch) {
+      if (typeof contentWatch === 'string') {
+        try {
+          const linkData = JSON.parse(contentWatch);
+          return linkData.url || "";
+        } catch {
+          return contentWatch;
+        }
+      } else if (typeof contentWatch === 'object' && contentWatch !== null) {
+        return contentWatch.url || "";
+      }
+    }
+    return "";
+  }, [selectedMsgType, contentWatch]);
+
   // 根据文件格式判断消息类型
   const getMsgTypeByFileFormat = (filePath: string): number => {
     const extension = filePath.toLowerCase().split(".").pop() || "";
@@ -84,7 +303,7 @@ const QuickReplyModal: React.FC<QuickReplyModalProps> = ({
   } as const;
 
   const handleFileUploaded = (
-    filePath: string | { url: string; durationMs: number },
+    filePath: string | { url: string; durationMs?: number; name?: string },
     fileType: number,
   ) => {
     let msgType = 1;
@@ -100,11 +319,22 @@ const QuickReplyModal: React.FC<QuickReplyModalProps> = ({
       msgType = 49;
     }
 
+    // 根据文件类型处理 content
+    let contentValue: string;
+    if (([FileType.AUDIO, FileType.VIDEO] as number[]).includes(fileType)) {
+      // 音频和视频需要保存完整的 JSON 对象，以供预览组件使用
+      contentValue = JSON.stringify(filePath);
+    } else if (typeof filePath === 'string') {
+      // 其他类型如果是字符串就直接用
+      contentValue = filePath;
+    } else {
+      // 其他类型如果是对象就取 url
+      contentValue = filePath.url;
+    }
+
     form.setFieldsValue({
       msgType: [String(msgType)],
-      content: ([FileType.AUDIO] as number[]).includes(fileType)
-        ? JSON.stringify(filePath)
-        : (filePath as string),
+      content: contentValue,
     });
   };
 
@@ -132,12 +362,59 @@ const QuickReplyModal: React.FC<QuickReplyModalProps> = ({
         form={form}
         layout="vertical"
         onFinish={values => {
-          const normalized = {
-            ...values,
-            msgType: Array.isArray(values.msgType)
-              ? values.msgType
-              : [String(values.msgType)],
-          } as AddReplyRequest;
+          // 处理 link / 小程序：把需要的字段组合成 content JSON
+          let finalValues: any = { ...values };
+
+          // 链接：content=URL，thumbPath/desc 组装成 JSON
+          if (selectedMsgType === 49) {
+            const linkData = {
+              url: values.content || "",
+              thumbPath: values.thumbPath || "",
+              desc: values.desc || "",
+            };
+            finalValues = {
+              ...values,
+              content: JSON.stringify(linkData),
+              // 链接提交为 msgType=49
+              msgType: ["49"],
+            };
+            // 移除额外的字段
+            delete finalValues.thumbPath;
+            delete finalValues.desc;
+          }
+
+          // 小程序：用 UI 字段生成 { type:'miniprogram', title, des, gh, pagepath, previewImage }
+          if (selectedMsgType === 50) {
+            const miniData = {
+              type: "miniprogram",
+              title: values.title || "",
+              des: values.des || "",
+              gh: normalizeGh(values.gh),
+              pagepath: values.pagepath || "",
+              previewImage: values.previewImage || "",
+            };
+
+            finalValues = {
+              ...values,
+              // 后端按 msgType=49（复合类型）处理
+              msgType: ["49"],
+              content: JSON.stringify(miniData),
+            };
+
+            // 移除 UI 专用字段（后端只关心 content/msgType/title）
+            delete finalValues.des;
+            delete finalValues.gh;
+            delete finalValues.pagepath;
+            delete finalValues.previewImage;
+          }
+
+          const normalized: AddReplyRequest = {
+            ...finalValues,
+            msgType: Array.isArray(finalValues.msgType)
+              ? finalValues.msgType
+              : [String(finalValues.msgType)],
+          };
+
           onSubmit(normalized);
         }}
         initialValues={mergedInitialValues}
@@ -177,15 +454,22 @@ const QuickReplyModal: React.FC<QuickReplyModalProps> = ({
             <Select.Option value="3">图片</Select.Option>
             <Select.Option value="43">视频</Select.Option>
             <Select.Option value="49">链接</Select.Option>
+            <Select.Option value="50">小程序</Select.Option>
           </Select>
         </Form.Item>
 
-        <Form.Item
-          name="content"
-          label="内容"
-          rules={[{ required: true, message: "请输入/上传内容" }]}
-        >
-          {selectedMsgType === 1 && (
+        {selectedMsgType !== 50 && (
+          <Form.Item
+            name="content"
+            label="内容"
+            rules={[
+              {
+                required: selectedMsgType !== 50,
+                message: "请输入/上传内容",
+              },
+            ]}
+          >
+            {selectedMsgType === 1 && (
             <Input.TextArea
               rows={4}
               placeholder="请输入文本内容"
@@ -193,36 +477,217 @@ const QuickReplyModal: React.FC<QuickReplyModalProps> = ({
               onChange={e => form.setFieldsValue({ content: e.target.value })}
               onKeyDown={handleKeyPress}
             />
-          )}
-          {selectedMsgType === 3 && (
-            <SimpleFileUpload
-              onFileUploaded={filePath =>
-                handleFileUploaded(filePath, FileType.IMAGE)
+            )}
+            {selectedMsgType === 3 && (
+            <div style={{ maxWidth: "50%" }}>
+              <MainImgUpload
+                value={form.getFieldValue("content")}
+                onChange={(url) => {
+                  form.setFieldsValue({ content: url });
+                }}
+                maxSize={5}
+                showPreview={true}
+              />
+            </div>
+            )}
+            {selectedMsgType === 43 && (
+            <>
+              <div style={{ marginBottom: 12 }}>
+                <div style={{ marginBottom: 8, fontSize: 14, color: "#666" }}>
+                  视频封面图
+                </div>
+                <div style={{ maxWidth: "50%" }}>
+                  <MainImgUpload
+                    value={(() => {
+                      try {
+                        const videoData = JSON.parse(form.getFieldValue("content") || "{}");
+                        return videoData.previewImage || videoData.thumbPath || "";
+                      } catch {
+                        return "";
+                      }
+                    })()}
+                    onChange={(previewUrl) => {
+                      // 保留原有的视频数据，只更新预览图
+                      try {
+                        const currentContent = form.getFieldValue("content");
+                        const videoData = currentContent ? JSON.parse(currentContent) : {};
+                        videoData.previewImage = previewUrl;
+                        form.setFieldsValue({ content: JSON.stringify(videoData) });
+                      } catch {
+                        form.setFieldsValue({ content: JSON.stringify({ previewImage: previewUrl }) });
+                      }
+                    }}
+                    maxSize={5}
+                    showPreview={true}
+                  />
+                </div>
+              </div>
+
+              <div>
+                <div style={{ marginBottom: 8, fontSize: 14, color: "#666" }}>
+                  视频文件
+                </div>
+                <SimpleFileUpload
+                  onFileUploaded={filePath =>
+                    handleFileUploaded(filePath, FileType.VIDEO)
+                  }
+                  maxSize={50}
+                  type={4}
+                  slot={<Button icon={<VideoCameraOutlined />} block>上传视频文件</Button>}
+                />
+                {(() => {
+                  try {
+                    const videoData = JSON.parse(form.getFieldValue("content") || "{}");
+                    const videoUrl = videoData.url;
+                    if (videoUrl) {
+                      return (
+                        <div style={{ marginTop: 12, position: "relative" }}>
+                          <video
+                            src={videoUrl}
+                            controls
+                            style={{
+                              width: "100%",
+                              maxHeight: 300,
+                              borderRadius: 6,
+                              border: "1px solid #d9d9d9",
+                            }}
+                          />
+                          <Button
+                            danger
+                            size="small"
+                            style={{ marginTop: 8 }}
+                            onClick={() => {
+                              try {
+                                const currentContent = form.getFieldValue("content");
+                                const videoData = currentContent ? JSON.parse(currentContent) : {};
+                                delete videoData.url;
+                                delete videoData.name;
+                                form.setFieldsValue({ content: JSON.stringify(videoData) });
+                              } catch {
+                                form.setFieldsValue({ content: "" });
+                              }
+                            }}
+                          >
+                            删除视频
+                          </Button>
+                        </div>
+                      );
+                    }
+                  } catch {
+                    return null;
+                  }
+                  return null;
+                })()}
+              </div>
+            </>
+            )}
+            {selectedMsgType === 49 && (
+            <>
+              <Input
+                placeholder="请输入链接地址"
+                prefix={<LinkOutlined />}
+                value={getLinkUrl}
+                onChange={(e) => {
+                  const newUrl = e.target.value;
+                  // LINK 类型下，content 字段存储的是 url 字符串
+                  // 提交时会与 thumbPath、desc 组合成对象
+                  form.setFieldsValue({
+                    content: newUrl
+                  });
+                }}
+              />
+              <div style={{ marginTop: 12 }}>
+                <Form.Item
+                  name="thumbPath"
+                  label="封面图"
+                  style={{ marginBottom: 12 }}
+                >
+                  <div style={{ maxWidth: "50%" }}>
+                    <MainImgUpload
+                      value={form.getFieldValue("thumbPath")}
+                      onChange={(url) => {
+                        form.setFieldsValue({ thumbPath: url });
+                      }}
+                      maxSize={5}
+                      showPreview={true}
+                    />
+                  </div>
+                </Form.Item>
+                <Form.Item
+                  name="desc"
+                  label="描述"
+                  style={{ marginBottom: 0 }}
+                >
+                  <Input.TextArea
+                    rows={3}
+                    placeholder="请输入链接描述"
+                    maxLength={200}
+                    showCount
+                  />
+                </Form.Item>
+              </div>
+            </>
+            )}
+          </Form.Item>
+        )}
+
+        {selectedMsgType === 50 && (
+          <>
+            <Form.Item
+              name="des"
+              label="描述"
+              rules={[{ required: true, message: "请输入小程序描述" }]}
+              style={{ marginBottom: 12 }}
+            >
+              <Input
+                placeholder="请输入小程序描述"
+                maxLength={200}
+                showCount
+              />
+            </Form.Item>
+
+            <Form.Item
+              name="gh"
+              label={
+                <span>
+                  小程序原生id（gh_...）
+                  <MiniProgramGhTutorialPopover />
+                </span>
               }
-              maxSize={1}
-              type={1}
-              slot={<Button icon={<PictureOutlined />}>上传图片</Button>}
-            />
-          )}
-          {selectedMsgType === 43 && (
-            <SimpleFileUpload
-              onFileUploaded={filePath =>
-                handleFileUploaded(filePath, FileType.VIDEO)
-              }
-              maxSize={1}
-              type={4}
-              slot={<Button icon={<VideoCameraOutlined />}>上传视频</Button>}
-            />
-          )}
-          {selectedMsgType === 49 && (
-            <Input
-              placeholder="请输入链接地址"
-              prefix={<LinkOutlined />}
-              value={form.getFieldValue("content")}
-              onChange={e => form.setFieldsValue({ content: e.target.value })}
-            />
-          )}
-        </Form.Item>
+              rules={[{ required: true, message: "请输入小程序原生id（不需要 @app）" }]}
+              style={{ marginBottom: 12 }}
+            >
+              <Input placeholder="例如：gh_5c672bbbc96f" />
+            </Form.Item>
+
+            <Form.Item
+              name="pagepath"
+              label="小程序页面路径"
+              rules={[{ required: true, message: "请输入小程序页面路径" }]}
+              style={{ marginBottom: 12 }}
+            >
+              <Input placeholder="例如：pages/index/index.html?uid=1" />
+            </Form.Item>
+
+            <Form.Item
+              name="previewImage"
+              label="封面图"
+              rules={[{ required: true, message: "请上传封面图" }]}
+              style={{ marginBottom: 0 }}
+            >
+              <div style={{ maxWidth: 260 }}>
+                <MainImgUpload
+                  value={form.getFieldValue("previewImage")}
+                  onChange={(url) => {
+                    form.setFieldsValue({ previewImage: url });
+                  }}
+                  maxSize={5}
+                  showPreview={true}
+                />
+              </div>
+            </Form.Item>
+          </>
+        )}
 
         <Form.Item>
           <Space>

src/pages/pc/ckbox/weChat/components/ChatWindow/components/ProfileCard/components/QuickWords/index.tsx

@@ -11,6 +11,7 @@ import {
   Tooltip,
   Spin,
   Dropdown,
+  Avatar,
 } from "antd";
 import {
   PlusOutlined,
@@ -21,6 +22,9 @@ import {
   PictureOutlined,
   PlayCircleOutlined,
   SearchOutlined,
+  LinkOutlined,
+  QuestionCircleOutlined,
+  AppstoreOutlined,
 } from "@ant-design/icons";
 import {
   QuickWordsItem,
@@ -40,6 +44,7 @@ import QuickReplyModal from "./components/QuickReplyModal";
 import GroupModal from "./components/GroupModal";
 import { useWeChatStore } from "@/store/module/weChat/weChat";
 import { useWebSocketStore } from "@/store/module/websocket/websocket";
+import { getCurrentCustomer } from "@/store/module/weChat/customer";
 import { ChatRecord } from "@/pages/pc/ckbox/data";
 
 // 消息类型枚举
@@ -61,6 +66,37 @@ export interface QuickWordsProps {
   onInsert?: (reply: QuickWordsReply) => void;
 }
 
+/** msgType=49：区分普通链接与小程序 JSON */
+const parseMsg49Content = (
+  reply: QuickWordsReply,
+): { kind: "miniprogram"; data: Record<string, any> } | { kind: "link"; data: Record<string, any> } => {
+  let raw: any = reply.content;
+  if (typeof raw === "string") {
+    try {
+      raw = JSON.parse(raw);
+    } catch {
+      return { kind: "link", data: { url: reply.content, thumbPath: "", desc: "" } };
+    }
+  }
+  if (!raw || typeof raw !== "object") {
+    return { kind: "link", data: { url: "", thumbPath: "", desc: "" } };
+  }
+  if (raw.type === "miniprogram" || raw.contentXml) {
+    return { kind: "miniprogram", data: raw };
+  }
+  return {
+    kind: "link",
+    data: {
+      url: raw.url || "",
+      thumbPath: raw.thumbPath || "",
+      desc: raw.desc || "",
+    },
+  };
+};
+
+const isMiniprogramReply = (reply: QuickWordsReply) =>
+  reply.msgType === MessageType.LINK && parseMsg49Content(reply).kind === "miniprogram";
+
 const QuickWords: React.FC<QuickWordsProps> = ({ onInsert }) => {
   const [activeTab, setActiveTab] = useState<QuickWordsType>(
     QuickWordsType.PERSONAL,
@@ -75,6 +111,8 @@ const QuickWords: React.FC<QuickWordsProps> = ({ onInsert }) => {
   const [addModalVisible, setAddModalVisible] = useState(false);
   const [editModalVisible, setEditModalVisible] = useState(false);
   const [groupModalVisible, setGroupModalVisible] = useState(false);
+  const [previewModalVisible, setPreviewModalVisible] = useState(false);
+  const [previewReply, setPreviewReply] = useState<QuickWordsReply | null>(null);
   const [editingItem, setEditingItem] = useState<QuickWordsReply | null>(null);
   const [editingGroup, setEditingGroup] = useState<QuickWordsItem | null>(null);
   const [isAddingGroup, setIsAddingGroup] = useState(false);
@@ -90,13 +128,85 @@ const QuickWords: React.FC<QuickWordsProps> = ({ onInsert }) => {
   const sendQuickReplyNow = (reply: QuickWordsReply) => {
     if (!currentContract) return;
     const messageId = Date.now();
+
+    let content = reply.content;
+    if (reply.msgType === MessageType.LINK) {
+      const parsed = parseMsg49Content(reply);
+      if (parsed.kind === "miniprogram") {
+        const d = parsed.data;
+        // 如果 content 已经包含 contentXml，直接用原始字符串，无需重建
+        if (d.contentXml) {
+          content =
+            typeof reply.content === "string"
+              ? reply.content
+              : JSON.stringify(d);
+        } else {
+          // 从存储的字段重建 contentXml，格式与 SyncContentJob.php 保持一致
+          const wxid = getCurrentCustomer()?.wechatId || "";
+          const title = d.title || reply.title || "";
+          const des = d.des || "";
+          const ghRaw: string = d.gh || d.miniProgramId || "";
+          const ghUsername = ghRaw.endsWith("@app") ? ghRaw : `${ghRaw}@app`;
+          const pagepath = d.pagepath || d.pagePath || "";
+          const previewImage = d.previewImage || d.cover || d.thumbPath || "";
+
+          const contentXml =
+            `${wxid}:\n` +
+            `<?xml version="1.0"?>\n` +
+            `<msg>\n` +
+            `\t<appmsg appid="" sdkver="0">\n` +
+            `\t\t<title>${title}</title>\n` +
+            `\t\t<des>${des}</des>\n` +
+            `\t\t<type>33</type>\n` +
+            `\t\t<showtype>0</showtype>\n` +
+            `\t\t<soundtype>0</soundtype>\n` +
+            `\t\t<contentattr>0</contentattr>\n` +
+            `\t\t<sourceusername>${ghUsername}</sourceusername>\n` +
+            `\t\t<weappinfo>\n` +
+            `\t\t\t<username><![CDATA[${ghUsername}]]></username>\n` +
+            `\t\t\t<appid><![CDATA[]]></appid>\n` +
+            `\t\t\t<type>2</type>\n` +
+            `\t\t\t<version>50</version>\n` +
+            `\t\t\t<weappiconurl><![CDATA[]]></weappiconurl>\n` +
+            `\t\t\t<pagepath><![CDATA[${pagepath}]]></pagepath>\n` +
+            `\t\t\t<pkginfo>\n` +
+            `\t\t\t\t<type>0</type>\n` +
+            `\t\t\t\t<md5><![CDATA[]]></md5>\n` +
+            `\t\t\t</pkginfo>\n` +
+            `\t\t\t<wadynamicpageinfo>\n` +
+            `\t\t\t\t<shouldUseDynamicPage>0</shouldUseDynamicPage>\n` +
+            `\t\t\t\t<cacheKey><![CDATA[]]></cacheKey>\n` +
+            `\t\t\t</wadynamicpageinfo>\n` +
+            `\t\t\t<appservicetype>0</appservicetype>\n` +
+            `\t\t</weappinfo>\n` +
+            `\t</appmsg>\n` +
+            `</msg>`;
+
+          content = JSON.stringify({
+            contentXml,
+            previewImage,
+            type: "miniprogram",
+          });
+        }
+      } else {
+        const linkData = parsed.data;
+        content = JSON.stringify({
+          type: "link",
+          title: reply.title || "文章链接",
+          desc: linkData.desc || "",
+          thumbPath: linkData.thumbPath || "",
+          url: linkData.url || "",
+        });
+      }
+    }
+
     const params = {
       wechatAccountId: currentContract.wechatAccountId,
       wechatChatroomId: currentContract?.chatroomId ? currentContract.id : 0,
       wechatFriendId: currentContract?.chatroomId ? 0 : currentContract.id,
       msgSubType: 0,
       msgType: reply.msgType,
-      content: reply.content,
+      content: content,
       seq: messageId,
     } as any;
 
@@ -130,6 +240,11 @@ const QuickWords: React.FC<QuickWordsProps> = ({ onInsert }) => {
   };
 
   const previewAndConfirmSend = (reply: QuickWordsReply) => {
+    setPreviewReply(reply);
+    setPreviewModalVisible(true);
+  };
+
+  const renderPreviewContent = (reply: QuickWordsReply) => {
     let previewNode: React.ReactNode = null;
     if (reply.msgType === MessageType.IMAGE) {
       previewNode = (
@@ -141,45 +256,281 @@ const QuickWords: React.FC<QuickWordsProps> = ({ onInsert }) => {
           />
         </div>
       );
-    } else if (reply.msgType === MessageType.VIDEO) {
+      } else if (reply.msgType === MessageType.VIDEO) {
+        try {
+          const videoUrl = reply.content
+          if (videoUrl) {
+            // 如果有视频URL，显示视频播放器
+            previewNode = (
+              <div style={{ textAlign: "center" }}>
+                <video
+                  src={videoUrl}
+                  controls
+                  style={{
+                    maxWidth: 360,
+                    maxHeight: 320,
+                    borderRadius: 6,
+                    width: "100%",
+                  }}
+                />
+              </div>
+            );
+          } else {
+            // 如果没有视频URL，显示默认提示
+            previewNode = (
+              <div style={{ textAlign: "center", padding: "40px 20px" }}>
+                <div style={{ fontSize: 48, color: "#d9d9d9", marginBottom: 12 }}>
+                  📹
+                </div>
+                <div style={{ color: "#999" }}>暂无视频内容</div>
+              </div>
+            );
+          }
+        } catch {
+          previewNode = <div>视频消息</div>;
+        }
+    } else if (reply.msgType === MessageType.LINK) {
       try {
-        const json = JSON.parse(reply.content || "{}");
-        const cover = json.previewImage || json.thumbPath || "";
+        const parsed49 = parseMsg49Content(reply);
+        if (parsed49.kind === "miniprogram") {
+          const d = parsed49.data;
+          const cardTitle =
+            (typeof d.title === "string" && d.title) || reply.title || "小程序";
+          const headerName =
+            (typeof d.des === "string" && d.des.trim()) || "小程序";
+          const cover =
+            d.previewImage || d.cover || d.thumbPath || d.weappiconurl || "";
+          previewNode = (
+            <div
+              style={{
+                maxWidth: 340,
+                margin: "0 auto",
+                borderRadius: 8,
+                overflow: "hidden",
+                backgroundColor: "#fff",
+                border: "1px solid #e7e7e7",
+                boxShadow: "0 1px 4px rgba(0,0,0,0.06)",
+              }}
+            >
+              <div style={{ padding: "12px 12px 10px" }}>
+                <div
+                  style={{
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 8,
+                    minHeight: 28,
+                  }}
+                >
+                  <Avatar
+                    size={28}
+                    shape="circle"
+                    style={{
+                      backgroundColor: "#07c160",
+                      flexShrink: 0,
+                    }}
+                    icon={<AppstoreOutlined style={{ fontSize: 16 }} />}
+                  />
+                  <span
+                    style={{
+                      fontSize: 14,
+                      color: "#888",
+                      overflow: "hidden",
+                      textOverflow: "ellipsis",
+                      whiteSpace: "nowrap",
+                    }}
+                  >
+                    {headerName}
+                  </span>
+                </div>
+                <div
+                  style={{
+                    marginTop: 10,
+                    fontWeight: 600,
+                    fontSize: 16,
+                    color: "#191919",
+                    lineHeight: 1.45,
+                    wordBreak: "break-word",
+                  }}
+                >
+                  {cardTitle}
+                </div>
+                {cover ? (
+                  <div
+                    style={{
+                      marginTop: 10,
+                      borderRadius: 4,
+                      overflow: "hidden",
+                      backgroundColor: "#f5f5f5",
+                      maxHeight: 200,
+                    }}
+                  >
+                    <img
+                      src={cover}
+                      alt="封面"
+                      style={{
+                        width: "100%",
+                        height: 200,
+                        objectFit: "cover",
+                        display: "block",
+                      }}
+                    />
+                  </div>
+                ) : (
+                  <div
+                    style={{
+                      marginTop: 10,
+                      height: 160,
+                      borderRadius: 4,
+                      backgroundColor: "#f2f2f2",
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      color: "#bbb",
+                      fontSize: 13,
+                    }}
+                  >
+                    暂无封面
+                  </div>
+                )}
+              </div>
+              <div
+                style={{
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 6,
+                  padding: "8px 12px",
+                  borderTop: "1px solid #ededed",
+                  fontSize: 12,
+                  color: "#8c8c8c",
+                }}
+              >
+                <LinkOutlined style={{ color: "#576b95", fontSize: 14 }} />
+                <span>小程序</span>
+              </div>
+            </div>
+          );
+        } else {
+          const linkData = parsed49.data;
+          previewNode = (
+            <div
+              style={{
+                maxWidth: 400,
+                borderRadius: 8,
+                overflow: "hidden",
+                backgroundColor: "#fff",
+              }}
+            >
+              <div style={{ padding: "16px" }}>
+                <div
+                  style={{
+                    fontWeight: 600,
+                    fontSize: 16,
+                    marginBottom: 12,
+                    color: "#262626",
+                    lineHeight: 1.4,
+                  }}
+                >
+                  标题： {reply.title}
+                </div>
+
+                {linkData.thumbPath && (
+                  <div
+                    style={{
+                      width: "100%",
+                      marginBottom: 12,
+                      borderRadius: 6,
+                      overflow: "hidden",
+                      backgroundColor: "#f5f5f5",
+                    }}
+                  >
+                    <img
+                      src={linkData.thumbPath}
+                      alt="链接封面"
+                      style={{
+                        width: "100%",
+                        height: "auto",
+                        maxHeight: 200,
+                        objectFit: "cover",
+                        display: "block",
+                      }}
+                    />
+                  </div>
+                )}
+
+                <div
+                  style={{
+                    display: "flex",
+                    alignItems: "center",
+                    padding: "8px 12px",
+                    backgroundColor: "#f5f5f5",
+                    borderRadius: 4,
+                    fontSize: 13,
+                    marginBottom: linkData.desc ? 12 : 0,
+                  }}
+                >
+                  <LinkOutlined style={{ color: "#1677ff", marginRight: 6 }} />
+                  <span
+                    style={{
+                      color: "#1677ff",
+                      wordBreak: "break-all",
+                      flex: 1,
+                    }}
+                  >
+                    {linkData.url || "未设置链接地址"}
+                  </span>
+                </div>
+
+                {linkData.desc && (
+                  <div
+                    style={{
+                      color: "#8c8c8c",
+                      fontSize: 14,
+                      lineHeight: 1.5,
+                      display: "-webkit-box",
+                      WebkitLineClamp: 3,
+                      WebkitBoxOrient: "vertical",
+                      overflow: "hidden",
+                      textOverflow: "ellipsis",
+                    }}
+                  >
+                    描述： {linkData.desc}
+                  </div>
+                )}
+              </div>
+            </div>
+          );
+        }
+      } catch {
         previewNode = (
-          <div style={{ textAlign: "center" }}>
-            {cover ? (
-              <img
-                src={String(cover)}
-                alt="视频预览"
-                style={{ maxWidth: 360, maxHeight: 320, borderRadius: 6 }}
-              />
-            ) : (
-              <div>视频消息</div>
-            )}
+          <div
+            style={{
+              maxWidth: 400,
+              padding: 16,
+              border: "1px solid #e8e8e8",
+              borderRadius: 8,
+            }}
+          >
+            <div style={{ fontWeight: 600, marginBottom: 8, fontSize: 16 }}>
+              {reply.title}
+            </div>
+            <div style={{ color: "#1677ff", fontSize: 14 }}>
+              {typeof reply.content === "string" ? reply.content : "链接内容"}
+            </div>
           </div>
         );
-      } catch {
-        previewNode = <div>视频消息</div>;
       }
-    } else if (reply.msgType === MessageType.LINK) {
-      previewNode = (
-        <div>
-          <div style={{ fontWeight: 600, marginBottom: 8 }}>{reply.title}</div>
-          <div style={{ color: "#1677ff" }}>{reply.content}</div>
-        </div>
-      );
     }
 
-    Modal.confirm({
-      title: "确认发送该快捷语？",
-      content: previewNode,
-      okText: "发送",
-      cancelText: "取消",
-      onOk: () => {
-        sendQuickReplyNow(reply);
-        message.success("已发送");
-      },
-    });
+    return previewNode;
+  };
+
+  const handleConfirmSend = () => {
+    if (previewReply) {
+      sendQuickReplyNow(previewReply);
+      message.success("已发送");
+      setPreviewModalVisible(false);
+      setPreviewReply(null);
+    }
   };
 
   // 获取快捷语数据
@@ -200,15 +551,19 @@ const QuickWords: React.FC<QuickWordsProps> = ({ onInsert }) => {
     fetchQuickWords();
   }, [fetchQuickWords]);
 
-  // 获取消息类型图标
-  const getMessageTypeIcon = (msgType: number) => {
-    switch (msgType) {
+  const getMessageTypeIcon = (reply: QuickWordsReply) => {
+    if (isMiniprogramReply(reply)) {
+      return <AppstoreOutlined style={{ color: "#07c160" }} />;
+    }
+    switch (reply.msgType) {
       case MessageType.TEXT:
         return <FileTextOutlined style={{ color: "#1890ff" }} />;
       case MessageType.IMAGE:
         return <PictureOutlined style={{ color: "#52c41a" }} />;
       case MessageType.VIDEO:
         return <PlayCircleOutlined style={{ color: "#fa8c16" }} />;
+      case MessageType.LINK:
+        return <LinkOutlined style={{ color: "#1677ff" }} />;
       default:
         return <FileTextOutlined style={{ color: "#8c8c8c" }} />;
     }
@@ -282,7 +637,7 @@ const QuickWords: React.FC<QuickWordsProps> = ({ onInsert }) => {
               }}
             >
               <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
-                {getMessageTypeIcon(reply.msgType)}
+                {getMessageTypeIcon(reply)}
                 <span>{reply.title}</span>
               </div>
               <div style={{ display: "flex", gap: 4 }}>
@@ -326,10 +681,17 @@ const QuickWords: React.FC<QuickWordsProps> = ({ onInsert }) => {
         selectedKeys[0]?.toString().replace("group-", "") ||
         groupOptions[0]?.value ||
         "";
+
+      // 处理 msgType：从字符串数组转换为 number
+      const msgType = Array.isArray(values.msgType)
+        ? Number(values.msgType[0])
+        : Number(values.msgType);
+
       await addReply({
         ...values,
+        msgType,
         groupId: values.groupId || fallbackGroupId,
-        replyType: [activeTab.toString()],
+        replyType: activeTab, // ✅ 直接传 number 类型
       });
       message.success("添加快捷回复成功");
       setAddModalVisible(false);
@@ -351,8 +713,14 @@ const QuickWords: React.FC<QuickWordsProps> = ({ onInsert }) => {
     if (!editingItem) return;
 
     try {
+      // 处理 msgType：从字符串数组转换为 number
+      const msgType = Array.isArray(values.msgType)
+        ? Number(values.msgType[0])
+        : Number(values.msgType);
+
       await updateReply({
         ...values,
+        msgType,
         id: editingItem.id.toString(),
       });
       message.success("更新快捷回复成功");
@@ -422,7 +790,7 @@ const QuickWords: React.FC<QuickWordsProps> = ({ onInsert }) => {
         parentId: selectedKeys[0]?.toString().startsWith("group-")
           ? selectedKeys[0]?.toString().replace("group-", "")
           : "0",
-        replyType: [activeTab.toString()],
+        replyType: activeTab, // ✅ 直接传 number 类型
       });
       message.success("新增分组成功");
       setGroupModalVisible(false);
@@ -582,14 +950,14 @@ const QuickWords: React.FC<QuickWordsProps> = ({ onInsert }) => {
         defaultGroupId={selectedKeys[0]?.toString().replace("group-", "")}
         initialValues={
           editingItem
-            ? {
+            ? ({
                 title: editingItem.title,
                 content: editingItem.content,
                 msgType: [editingItem.msgType.toString()],
                 groupId:
                   editingItem.groupId?.toString?.() ||
                   selectedKeys[0]?.toString().replace("group-", ""),
-              }
+              } as any)
             : undefined
         }
         onSubmit={handleUpdateReply}
@@ -612,6 +980,28 @@ const QuickWords: React.FC<QuickWordsProps> = ({ onInsert }) => {
           setIsAddingGroup(false);
         }}
       />
+
+      {/* 预览确认发送模态窗 */}
+      <Modal
+        title={
+          <div style={{ textAlign: "center", width: "100%", display: "flex", alignItems: "center", justifyContent: "center", gap: 8 }}>
+            <QuestionCircleOutlined style={{ fontSize: 18, color: "#1890ff" }} />
+            <span>确认发送该快捷语？</span>
+          </div>
+        }
+        open={previewModalVisible}
+        onOk={handleConfirmSend}
+        onCancel={() => {
+          setPreviewModalVisible(false);
+          setPreviewReply(null);
+        }}
+        okText="发送"
+        cancelText="取消"
+        width={520}
+        centered
+      >
+        {previewReply && renderPreviewContent(previewReply)}
+      </Modal>
     </Layout>
   );
 };

src/pages/pc/ckbox/weChat/components/ChatWindow/components/ProfileCard/index.tsx

@@ -45,9 +45,16 @@ const Person: React.FC<PersonProps> = ({ contract }) => {
       baseItems.push({
         key: "moments",
         label: "朋友圈",
-        children: <FriendsCircle wechatFriendId={currentContract.id} />,
+        children: (
+          <FriendsCircle
+            wechatFriendId={currentContract.id}
+            wechatId={(currentContract as ContractData).wechatId}
+          />
+        ),
       });
     }
+    console.log(currentContract);
+
     return baseItems;
   }, [currentContract, isGroup]);
 

src/pages/pc/ckbox/weChat/components/CustomerList/com.module.scss

@@ -105,45 +105,98 @@
     flex-direction: column;
     align-items: center;
     padding: 10px 0;
-  }
 
-  .skeletonItem {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    padding: 10px 0;
-    position: relative;
-    margin-bottom: 10px;
-  }
-
-  .skeletonAvatar {
-    width: 50px;
-    height: 50px;
-    border-radius: 50%;
-    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
-    background-size: 200% 100%;
-    animation: skeleton-loading 1.5s infinite;
-  }
-
-  .skeletonIndicator {
-    position: absolute;
-    bottom: 10px;
-    right: 10px;
-    width: 8px;
-    height: 8px;
-    border-radius: 50%;
-    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
-    background-size: 200% 100%;
-    animation: skeleton-loading 1.5s infinite;
-  }
-
-  @keyframes skeleton-loading {
-    0% {
-      background-position: 200% 0;
+    .skeletonItem {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: 10px 0;
+      position: relative;
+      margin-bottom: 10px;
     }
-    100% {
-      background-position: -200% 0;
+
+    .skeletonAvatar {
+      width: 50px;
+      height: 50px;
+      border-radius: 50%;
+      background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+      background-size: 200% 100%;
+      animation: skeleton-loading 1.5s infinite;
+    }
+
+    .skeletonIndicator {
+      position: absolute;
+      bottom: 10px;
+      right: 10px;
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+      background-size: 200% 100%;
+      animation: skeleton-loading 1.5s infinite;
+    }
+
+    @keyframes skeleton-loading {
+      0% {
+        background-position: 200% 0;
+      }
+      100% {
+        background-position: -200% 0;
+      }
+    }
+  }
+}
+
+// Tooltip 样式
+:global {
+  .customerTooltip {
+    .ant-tooltip-inner {
+      background-color: rgba(0, 0, 0, 0.85);
+      padding: 12px 16px;
+      border-radius: 6px;
+      box-shadow:
+        0 3px 6px -4px rgba(0, 0, 0, 0.12),
+        0 6px 16px 0 rgba(0, 0, 0, 0.08),
+        0 9px 28px 8px rgba(0, 0, 0, 0.05);
+    }
+
+    .ant-tooltip-arrow {
+      &::before {
+        background-color: rgba(0, 0, 0, 0.85);
+      }
+    }
+  }
+}
+
+.tooltipContent {
+  min-width: 200px;
+
+  .tooltipItem {
+    display: flex;
+    align-items: center;
+    line-height: 1.4;
+    margin-bottom: 6px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    .tooltipLabel {
+      color: rgba(255, 255, 255, 0.65);
+      font-size: 12px;
+      min-width: 70px;
+      flex-shrink: 0;
+      line-height: 1.4;
+    }
+
+    .tooltipValue {
+      color: #ffffff;
+      font-size: 13px;
+      font-weight: 500;
+      word-break: break-all;
+      flex: 1;
+      line-height: 1.4;
     }
   }
 }

src/pages/pc/ckbox/weChat/components/CustomerList/index.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { Avatar, Badge } from "antd";
+import { Avatar, Badge, Tooltip } from "antd";
 import styles from "./com.module.scss";
 import {
   useCustomerStore,
@@ -17,9 +17,22 @@ const CustomerList: React.FC = () => {
     getCustomerList()
       .then(res => {
         updateCustomerList(res);
+        // 默认选中"全部"（currentCustomer 为 null 表示显示所有）
+        const current = useCustomerStore.getState().currentCustomer;
+        if (current === undefined) {
+          console.log("🔄 默认选中全部账号");
+          updateCurrentCustomer(null);
+        }
         setLoading(false);
       })
-      .catch(() => {
+      .catch(error => {
+        console.error("❌ 获取客服列表失败:", error);
+        // 即使加载失败，也设置为 null（表示"全部"），避免阻塞会话列表
+        const current = useCustomerStore.getState().currentCustomer;
+        if (current === undefined) {
+          console.log("🔄 加载失败，降级为全部账号");
+          updateCurrentCustomer(null);
+        }
         setLoading(false);
       });
   }, []);
@@ -68,6 +81,40 @@ const CustomerList: React.FC = () => {
     </div>
   );
 
+  // 渲染客服信息提示内容
+  const renderTooltipContent = (customer: any) => {
+    const deviceName = customer.deviceExtra?.memo || customer.deviceExtra?.market_name || "未知设备";
+    const deviceModel = customer.deviceExtra?.market_name || "未知型号";
+    const wechatAlias = customer.alias || "未设置";
+    const wechatNickname = customer.nickname || "未知昵称";
+    const battery = customer.deviceExtra?.battery !== undefined ? `${customer.deviceExtra.battery}%` : "未知";
+
+    return (
+      <div className={styles.tooltipContent}>
+        <div className={styles.tooltipItem}>
+          <span className={styles.tooltipLabel}>设备名称：</span>
+          <span className={styles.tooltipValue}>{deviceName}</span>
+        </div>
+        <div className={styles.tooltipItem}>
+          <span className={styles.tooltipLabel}>设备型号：</span>
+          <span className={styles.tooltipValue}>{deviceModel}</span>
+        </div>
+        <div className={styles.tooltipItem}>
+          <span className={styles.tooltipLabel}>设备电量：</span>
+          <span className={styles.tooltipValue}>{battery}</span>
+        </div>
+        <div className={styles.tooltipItem}>
+          <span className={styles.tooltipLabel}>微信号：</span>
+          <span className={styles.tooltipValue}>{wechatAlias}</span>
+        </div>
+        <div className={styles.tooltipItem}>
+          <span className={styles.tooltipLabel}>微信昵称：</span>
+          <span className={styles.tooltipValue}>{wechatNickname}</span>
+        </div>
+      </div>
+    );
+  };
+
   return (
     <div className={styles.customerList}>
       <div className={styles.userListHeader}>
@@ -79,7 +126,7 @@ const CustomerList: React.FC = () => {
         ) : (
           <>
             <div
-              className={styles.userItem}
+              className={`${styles.userItem} ${currentCustomer === null ? styles.active : ""}`}
               onClick={() => handleUserSelect(0)}
             >
               <Badge
@@ -100,6 +147,12 @@ const CustomerList: React.FC = () => {
                   count={getUnreadCount(customer.id)}
                   overflowCount={99}
                   className={styles.messageBadge}
+                >
+                  <Tooltip
+                    title={renderTooltipContent(customer)}
+                    placement="right"
+                    mouseEnterDelay={0.3}
+                    classNames={{ root: styles.customerTooltip }}
                 >
                   <div className={styles.avatarWrapper}>
                     <Avatar
@@ -112,7 +165,7 @@ const CustomerList: React.FC = () => {
                           : undefined,
                       }}
                     >
-                      {!customer.avatar && customer.name.charAt(0)}
+                        {!customer.avatar && customer.nickname?.charAt(0)}
                     </Avatar>
                     {customer.isOnline && (
                       <span
@@ -120,6 +173,7 @@ const CustomerList: React.FC = () => {
                       />
                     )}
                   </div>
+                  </Tooltip>
                 </Badge>
               </div>
             ))}

src/pages/pc/ckbox/weChat/components/SidebarMenu/AddFriends/index.tsx

@@ -41,6 +41,22 @@ const AddFriends: React.FC<AddFriendsProps> = ({ visible, onCancel }) => {
     return /^1[3-9]\d{9}$/.test(value.trim());
   };
 
+  // 过滤中文字符，只允许英文、数字和常见符号
+  const filterChinese = (value: string): string => {
+    // 只保留英文、数字、下划线、连字符、点号等常见符号
+    return value.replace(/[^\x00-\x7F]/g, "");
+  };
+
+  // 处理输入变化，过滤中文字符
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    const filteredValue = filterChinese(value);
+    if (value !== filteredValue) {
+      message.warning("不能输入中文字符");
+    }
+    setSearchValue(filteredValue);
+  };
+
   // 处理添加好友
   const handleAddFriend = async () => {
     if (!searchValue.trim()) {
@@ -95,7 +111,7 @@ const AddFriends: React.FC<AddFriendsProps> = ({ visible, onCancel }) => {
             placeholder="请输入微信号/手机号"
             prefix={<SearchOutlined />}
             value={searchValue}
-            onChange={e => setSearchValue(e.target.value)}
+            onChange={handleInputChange}
             onPressEnter={handleAddFriend}
             disabled={loading}
             allowClear

src/pages/pc/ckbox/weChat/components/SidebarMenu/FriendsCicle/api.ts

@@ -1,7 +1,13 @@
 // 朋友圈相关的API接口
+import request from "@/api/request";
 import { useWebSocketStore } from "@/store/module/websocket/websocket";
+import { MoneyCollectFilled } from "@ant-design/icons";
 
-// 朋友圈请求参数接口
+// ==================== 已废弃的 Socket 请求接口 ====================
+// 注意：朋友圈数据获取已改为使用 getFriendsCircleData HTTP 接口
+// 以下接口仅保留用于向后兼容，新代码请使用 getFriendsCircleData
+
+// 朋友圈请求参数接口（已废弃）
 export interface FetchMomentParams {
   wechatAccountId: number;
   wechatFriendId?: number;
@@ -12,7 +18,10 @@ export interface FetchMomentParams {
   seq?: number;
 }
 
-// 获取朋友圈数据
+/**
+ * 获取朋友圈数据（已废弃）
+ * @deprecated 请使用 getFriendsCircleData 接口替代
+ */
 export const fetchFriendsCircleData = async (params: FetchMomentParams) => {
   const { sendCommand } = useWebSocketStore.getState();
   sendCommand("CmdFetchMoment", params);
@@ -104,3 +113,113 @@ export const cancelCommentMoment = async (params: {
 
   sendCommand("CmdMomentCancelInteract", requestData);
 };
+
+// ==================== HTTP 接口（推荐使用） ====================
+
+/**
+ * 获取朋友圈数据请求参数
+ */
+export interface GetFriendsCircleDataParams {
+  /** 微信号的id，例如：wxid_480es52qsj2812
+   * - 不传：返回所有朋友圈（朋友圈广场）
+   * - 传当前账号的 wechatId：返回我的朋友圈
+   * - 传好友的 wechatId：返回好友朋友圈
+   */
+  wechatId?: string;
+  /** 页码，从 1 开始 */
+  page: number;
+  /** 每页数量 */
+  limit: number;
+}
+
+/**
+ * 朋友圈实体数据类型（API 返回格式）
+ */
+export interface MomentEntity {
+  lat: string;
+  lng: string;
+  location: string;
+  picSize: number;
+  userName: string;
+}
+
+/**
+ * 朋友圈数据项（API 返回格式）
+ * 实际数据结构示例：
+ * {
+ *   "id": 44671,
+ *   "snsId": "-3611869511354674694",
+ *   "type": 1,
+ *   "content": "...",
+ *   "commentList": [],
+ *   "likeList": [],
+ *   "resUrls": [...],
+ *   "createTime": "2026-01-15 13:27:37",
+ *   "momentEntity": {
+ *     "lat": "0.000000",
+ *     "lng": "0.000000",
+ *     "location": "",
+ *     "picSize": 0,
+ *     "userName": "wxid_68z14kxrxsho22"
+ *   }
+ * }
+ */
+export interface FriendsCircleItem {
+  id: number;
+  snsId: string;
+  type: number;
+  content: string;
+  commentList: any[];
+  likeList: any[];
+  resUrls: string[];
+  createTime: string; // 格式："2026-01-15 13:27:37"
+  momentEntity: MomentEntity;
+  [key: string]: any;
+}
+
+/**
+ * 获取朋友圈数据响应
+ */
+export interface GetFriendsCircleDataResponse {
+  list: FriendsCircleItem[];
+}
+
+/**
+ * 获取朋友圈数据
+ *
+ * @param params 请求参数
+ * @param params.wechatId 微信号ID（可选）
+ *   - 不传：返回所有朋友圈（朋友圈广场）
+ *   - 传当前账号的 wechatId：返回我的朋友圈
+ *   - 传好友的 wechatId：返回好友朋友圈
+ * @param params.page 页码，从 1 开始
+ * @param params.limit 每页数量
+ * @returns Promise<GetFriendsCircleDataResponse> 朋友圈数据列表
+ *
+ * @example
+ * // 朋友圈广场（不传 wechatId）
+ * const result = await getFriendsCircleData({ page: 1, limit: 10 });
+ *
+ * // 我的朋友圈（传当前账号的 wechatId）
+ * const result = await getFriendsCircleData({
+ *   wechatId: currentCustomer.wechatId,
+ *   page: 1,
+ *   limit: 10
+ * });
+ *
+ * // 好友朋友圈（传好友的 wechatId）
+ * const result = await getFriendsCircleData({
+ *   wechatId: friendWechatId,
+ *   page: 1,
+ *   limit: 10
+ * });
+ */
+export const getFriendsCircleData = async (
+  params: GetFriendsCircleDataParams,
+) => {
+  return request<GetFriendsCircleDataResponse>(
+    "/v1/wechats/moments",
+    params,
+    "GET",
+  );
+};

src/pages/pc/ckbox/weChat/components/SidebarMenu/FriendsCicle/components/friendCard.tsx

@@ -33,7 +33,11 @@ export const FriendCard: React.FC<FriendCardProps> = ({
   formatTime,
 }) => {
   const content = monent?.momentEntity?.content || "";
-  const images = monent?.momentEntity?.resUrls || [];
+  const mediaUrls = monent?.momentEntity?.resUrls || [];
+  const isVideoUrl = (url: string) =>
+    /\.(mp4|mov|avi|webm|mkv)(\?.*)?$/i.test(url || "");
+  const videos = mediaUrls.filter((url: string) => isVideoUrl(url));
+  const images = mediaUrls.filter((url: string) => !isVideoUrl(url));
   const time = formatTime(monent.createTime);
   const likesCount = monent?.likeList?.length || 0;
   const commentsCount = monent?.commentList?.length || 0;
@@ -153,6 +157,19 @@ export const FriendCard: React.FC<FriendCardProps> = ({
 
         <div className={styles.itemContent}>
           <div className={styles.contentText}>{content}</div>
+          {videos.length > 0 && (
+            <div className={styles.imageContainer}>
+              {videos.map((video, index) => (
+                <video
+                  key={`video-${index}`}
+                  src={video}
+                  controls
+                  className={styles.contentImage}
+                  style={{ background: "#000" }}
+                />
+              ))}
+            </div>
+          )}
           {images && images.length > 0 && (
             <div className={styles.imageContainer}>
               {images.map((image, index) => (

src/pages/pc/ckbox/weChat/components/SidebarMenu/FriendsCicle/index.tsx

@@ -1,13 +1,13 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useRef, useCallback } from "react";
 import { Collapse } from "antd";
 import { ChromeOutlined } from "@ant-design/icons";
 import { MomentList } from "./components/friendCard";
 
-import dayjs from "dayjs";
 import styles from "./index.module.scss";
-import { fetchFriendsCircleData } from "./api";
+import { getFriendsCircleData, FriendsCircleItem } from "./api";
 import { useCustomerStore } from "@/store/module/weChat/customer";
 import { useWeChatStore } from "@/store/module/weChat/weChat";
+import { getWechatFriendDetail } from "../MessageList/api";
 
 interface FriendsCircleProps {
   wechatFriendId?: number;
@@ -15,46 +15,275 @@ interface FriendsCircleProps {
 
 const FriendsCircle: React.FC<FriendsCircleProps> = ({ wechatFriendId }) => {
   const currentCustomer = useCustomerStore(state => state.currentCustomer);
-  const { clearMomentCommon, updateMomentCommonLoading } = useWeChatStore();
+  const {
+    clearMomentCommon,
+    updateMomentCommonLoading,
+    addMomentCommon,
+    updateMomentCommon,
+  } = useWeChatStore();
   const MomentCommon = useWeChatStore(state => state.MomentCommon);
   const MomentCommonLoading = useWeChatStore(
     state => state.MomentCommonLoading,
   );
 
+  // 状态管理（必须在所有 useEffect 之前声明）
+  const [expandedKeys, setExpandedKeys] = useState<string[]>([]);
+  // 当前页码，用于分页
+  const currentPageRef = useRef<number>(1);
+  // 当前场景的 wechatId（用于好友朋友圈）
+  const friendWechatIdRef = useRef<string | undefined>(undefined);
+  // 保存上一次的客服ID，用于检测客服切换
+  const previousCustomerIdRef = useRef<number | null>(null);
+
+  // 加载朋友圈数据
+  const loadMomentData = useCallback(async (
+    loadMore: boolean = false,
+    forceKey?: string,
+  ) => {
+    if (!currentCustomer) {
+      updateMomentCommonLoading(false);
+      return;
+    }
+
+    // 确定当前场景的 key（优先使用传入的 forceKey，否则使用 expandedKeys）
+    const currentKey = forceKey || expandedKeys[0];
+    if (!currentKey) {
+      // 如果没有展开任何面板，不加载数据
+      updateMomentCommonLoading(false);
+      return;
+    }
+
+    console.log(
+      "🔄 开始加载朋友圈数据，场景key:",
+      currentKey,
+      "是否加载更多:",
+      loadMore,
+    );
+
+    updateMomentCommonLoading(true);
+
+    try {
+      let targetWechatId: string | undefined = undefined;
+
+      // 根据不同的场景设置 wechatId
+      if (currentKey === "1") {
+        // 我的朋友圈：传当前选中客服的微信id
+        targetWechatId = currentCustomer?.wechatId;
+        if (!targetWechatId) {
+          console.warn("⚠️ 当前客服的 wechatId 不存在，无法加载我的朋友圈");
+          updateMomentCommonLoading(false);
+          return;
+        }
+        console.log("📱 加载我的朋友圈，使用客服微信id:", targetWechatId);
+      } else if (currentKey === "2") {
+        // 朋友圈广场：不传 wechatId
+        targetWechatId = undefined;
+        console.log("🌐 加载朋友圈广场（不传 wechatId）");
+      } else if (currentKey === "3" && wechatFriendId) {
+        // 好友朋友圈：传好友的 wechatId
+        // 如果还没有获取过好友的 wechatId，先获取
+        if (!friendWechatIdRef.current) {
+          try {
+            const friendDetail = await getWechatFriendDetail({
+              id: wechatFriendId,
+            });
+            if (friendDetail?.detail?.wechatId) {
+              friendWechatIdRef.current = friendDetail.detail.wechatId;
+            }
+          } catch (error) {
+            console.error("获取好友详情失败:", error);
+            updateMomentCommonLoading(false);
+            return;
+          }
+        }
+        targetWechatId = friendWechatIdRef.current;
+      }
+
+      // 重置页码（如果不是加载更多）
+      if (!loadMore) {
+        currentPageRef.current = 1;
+      }
+
+      // 调用接口获取朋友圈数据
+      const result = await getFriendsCircleData({
+        wechatId: targetWechatId,
+        page: currentPageRef.current,
+        limit: 10,
+      });
+
+      // 处理返回的数据
+      const momentList = result?.list || [];
+
+      // 转换数据格式：将 API 返回的数据转换为组件内部使用的格式
+      const transformedList = momentList.map((item: FriendsCircleItem) => {
+        // 转换 createTime：从 "2026-01-15 13:27:37" 格式转换为时间戳（秒）
+        let createTimeNumber: number;
+        if (typeof item.createTime === "string") {
+          // 处理 "2026-01-15 13:27:37" 格式
+          // 将 "2026-01-15 13:27:37" 转换为 "2026/01/15 13:27:37" 以便正确解析
+          const normalizedTime = item.createTime.replace(/-/g, "/");
+          const date = new Date(normalizedTime);
+          if (!isNaN(date.getTime())) {
+            createTimeNumber = Math.floor(date.getTime() / 1000);
+          } else {
+            // 如果解析失败，尝试 ISO 格式或直接解析
+            const fallbackDate = new Date(item.createTime);
+            createTimeNumber = isNaN(fallbackDate.getTime())
+              ? Math.floor(Date.now() / 1000)
+              : Math.floor(fallbackDate.getTime() / 1000);
+            console.warn(
+              "⚠️ 时间格式解析异常，使用备用解析:",
+              createTimeNumber,
+              "原始值:",
+              item.createTime,
+            );
+          }
+        } else if (typeof item.createTime === "number") {
+          // 如果已经是数字，确保是秒级时间戳
+          createTimeNumber =
+            item.createTime > 1000000000000
+              ? Math.floor(item.createTime / 1000)
+              : item.createTime;
+        } else {
+          // 默认值
+          createTimeNumber = Math.floor(Date.now() / 1000);
+        }
+
+        // 构建组件内部使用的数据结构
+        // 注意：组件期望 momentEntity 中包含 content 和 resUrls
+        return {
+          snsId: item.snsId,
+          type: item.type,
+          commentList: item.commentList || [],
+          likeList: item.likeList || [],
+          createTime: createTimeNumber, // number 类型
+          momentEntity: {
+            content: item.content || "",
+            createTime: createTimeNumber, // number 类型
+            lat: parseFloat(item.momentEntity?.lat || "0"),
+            lng: parseFloat(item.momentEntity?.lng || "0"),
+            location: item.momentEntity?.location || "",
+            objectType: item.type,
+            picSize: item.momentEntity?.picSize || 0,
+            resUrls: item.resUrls || [],
+            snsId: item.snsId,
+            urls: item.resUrls || [],
+            userName: item.momentEntity?.userName || "",
+          },
+        };
+      });
+
+      if (loadMore) {
+        // 加载更多：追加数据
+        addMomentCommon(transformedList);
+      } else {
+        // 首次加载：替换数据
+        updateMomentCommon(transformedList);
+      }
+
+      // 如果返回的数据少于 limit，说明没有更多数据了
+      if (momentList.length < 10) {
+        // 可以在这里设置一个标记，表示没有更多数据
+      } else {
+        // 增加页码，准备下次加载更多
+        currentPageRef.current += 1;
+      }
+    } catch (error) {
+      console.error("加载朋友圈数据失败:", error);
+    } finally {
+      updateMomentCommonLoading(false);
+    }
+  }, [
+    currentCustomer,
+    expandedKeys,
+    wechatFriendId,
+    friendWechatIdRef,
+    currentPageRef,
+    updateMomentCommonLoading,
+    addMomentCommon,
+    updateMomentCommon,
+  ]);
+
   // 页面重新渲染时重置MomentCommonLoading状态
   useEffect(() => {
     updateMomentCommonLoading(false);
-  }, []);
+  }, [updateMomentCommonLoading]);
 
-  // 状态管理
-  const [expandedKeys, setExpandedKeys] = useState<string[]>([]);
+  // 监听客服切换，重新加载朋友圈数据
+  useEffect(() => {
+    const currentCustomerId = currentCustomer?.id || null;
 
-  // 加载更多我的朋友圈
-  const loadMomentData = async (loadMore: boolean = false) => {
-    updateMomentCommonLoading(true);
-    // 加载数据;
-    const requestData = {
-      cmdType: "CmdFetchMoment",
-      wechatAccountId: currentCustomer?.id || 0,
-      wechatFriendId: wechatFriendId || 0,
-      createTimeSec: Math.floor(dayjs().subtract(2, "month").valueOf() / 1000),
-      prevSnsId: loadMore
-        ? Number(MomentCommon[MomentCommon.length - 1]?.snsId) || 0
-        : 0,
-      count: 10,
-      isTimeline: expandedKeys.includes("1"),
-      seq: Date.now(),
-    };
-    await fetchFriendsCircleData(requestData);
-  };
+    // 如果是首次渲染，只记录当前客服ID，不触发加载
+    if (previousCustomerIdRef.current === null) {
+      previousCustomerIdRef.current = currentCustomerId;
+      return;
+    }
+
+    // 检测客服是否切换（ID变化）
+    const isCustomerSwitched =
+      previousCustomerIdRef.current !== currentCustomerId;
+
+    if (isCustomerSwitched) {
+      console.log("🔄 检测到客服切换:", {
+        previousId: previousCustomerIdRef.current,
+        currentId: currentCustomerId,
+      });
+
+      // 更新保存的客服ID
+      previousCustomerIdRef.current = currentCustomerId;
+
+      // 如果当前展开的是"我的朋友圈"（key === "1"），需要重新加载数据
+      const currentKey = expandedKeys[0];
+      if (currentKey === "1") {
+        console.log("✅ 客服切换且当前展开'我的朋友圈'，重新加载数据");
+        // 清空旧数据
+        clearMomentCommon();
+        // 重置页码
+        currentPageRef.current = 1;
+        // 重新加载数据
+        loadMomentData(false, "1");
+      } else if (currentKey) {
+        // 如果是其他场景（朋友圈广场或好友朋友圈），也清空数据但不需要重新加载
+        // 因为朋友圈广场不依赖客服，好友朋友圈依赖好友而非客服
+        console.log(
+          "ℹ️ 客服切换但当前场景不依赖客服，仅清空数据",
+          currentKey,
+        );
+        // 可以选择是否清空数据，这里选择清空以避免显示错误数据
+        clearMomentCommon();
+      }
+    }
+  }, [currentCustomer?.id, expandedKeys, clearMomentCommon, loadMomentData]);
 
   // 处理折叠面板展开/收起
   const handleCollapseChange = (keys: string | string[]) => {
     const keyArray = Array.isArray(keys) ? keys : [keys];
+    const previousKey = expandedKeys[0];
+    const newKey = keyArray[0];
+
+    console.log("📂 折叠面板变化:", {
+      previousKey,
+      newKey,
+      keysLength: keys.length,
+    });
+
     setExpandedKeys(keyArray);
-    if (!MomentCommonLoading && keys.length > 0) {
+
+    // 如果切换了场景，重置好友 wechatId 缓存
+    if (previousKey !== newKey && newKey === "3") {
+      friendWechatIdRef.current = undefined;
+    }
+
+    // 当展开面板时（keys.length > 0），加载数据
+    // 注意：这里直接传入 newKey，避免使用还未更新的 expandedKeys
+    if (keys.length > 0 && newKey) {
+      console.log("✅ 展开面板，准备加载数据，场景key:", newKey);
       clearMomentCommon();
-      loadMomentData(false);
+      currentPageRef.current = 1; // 重置页码
+      // 传入 newKey 作为 forceKey，确保使用最新的 key
+      loadMomentData(false, newKey);
+    } else {
+      console.log("❌ 收起面板，不加载数据");
     }
   };
 

src/pages/pc/ckbox/weChat/components/SidebarMenu/MessageList/api.ts

@@ -1,16 +1,74 @@
 import request from "@/api/request";
 import request2 from "@/api/request2";
-//群、好友聊天记录列表
-export function getMessageList(params: { page: number; limit: number }) {
-  return request("/v1/kefu/message/list", params, "GET");
+import type { ApiResponse, ApiDetailResponse } from "@/api/types";
+
+// ==================== 类型定义 ====================
+
+/**
+ * 消息列表项类型
+ */
+export interface MessageListItem {
+  id: number;
+  dataType: "friend" | "group";
+  wechatAccountId: number;
+  nickname: string;
+  avatar?: string;
+  chatroomAvatar?: string;
+  conRemark?: string;
+  content?: string;
+  lastUpdateTime?: string;
+  config?: {
+    chat?: boolean;
+    unreadCount?: number;
+    top?: number;
+  };
+  [key: string]: any;
 }
 
-// 获取联系人列表
-export const getContactList = (params: { prevId: string; count: number }) => {
-  return request("/api/wechatFriend/list", params, "GET");
-};
+/**
+ * 好友详情类型
+ */
+export interface WechatFriendDetail {
+  id: number;
+  wechatAccountId: number;
+  nickname: string;
+  avatar?: string;
+  conRemark?: string;
+  wechatId?: string;
+  alias?: string;
+  gender?: number;
+  region?: string;
+  signature?: string;
+  phone?: string;
+  quanPin?: string;
+  groupId?: number;
+  [key: string]: any;
+}
 
-export interface dataProcessingPost {
+/**
+ * 群聊详情类型
+ */
+export interface WechatChatroomDetail {
+  id: number;
+  wechatAccountId: number;
+  nickname?: string;
+  name?: string;
+  chatroomName?: string;
+  chatroomAvatar?: string;
+  conRemark?: string;
+  chatroomId?: string;
+  chatroomOwner?: string;
+  selfDisplyName?: string;
+  selfDisplayName?: string;
+  notice?: string;
+  memberCount?: number;
+  [key: string]: any;
+}
+
+/**
+ * 数据处理请求参数
+ */
+export interface DataProcessingPost {
   /**
    * CmdModifyFriendLabel专属
    */
@@ -31,18 +89,49 @@ export interface dataProcessingPost {
   [property: string]: any;
 }
 
-export const dataProcessing = (params: dataProcessingPost) => {
+// ==================== API 函数 ====================
+
+/**
+ * 群、好友聊天记录列表
+ * @returns Promise<MessageListItem[]> 返回消息列表（可能是数组或 {list: MessageListItem[]}）
+ */
+export function getMessageList(params: { page: number; limit: number }): Promise<MessageListItem[] | ApiResponse<MessageListItem[]>> {
+  return request<MessageListItem[] | ApiResponse<MessageListItem[]>>("/v1/kefu/message/list", params, "GET");
+}
+
+/**
+ * 获取联系人列表
+ */
+export const getContactList = (params: { prevId: string; count: number }): Promise<any> => {
+  return request("/api/wechatFriend/list", params, "GET");
+};
+
+/**
+ * 数据处理接口
+ */
+export const dataProcessing = (params: DataProcessingPost): Promise<any> => {
   return request("/v1/kefu/dataProcessing", params, "POST");
 };
 
-export const getWechatFriendDetail = (params: { id: number }) => {
-  return request("/v1/kefu/wechatFriend/detail", params, "GET");
+/**
+ * 获取好友详情
+ * @returns Promise<ApiDetailResponse<WechatFriendDetail>> 返回详情响应（包含 detail 字段）
+ */
+export const getWechatFriendDetail = (params: { id: number }): Promise<ApiDetailResponse<WechatFriendDetail>> => {
+  return request<ApiDetailResponse<WechatFriendDetail>>("/v1/kefu/wechatFriend/detail", params, "GET");
 };
 
-export const getWechatChatroomDetail = (params: { id: number }) => {
-  return request("/v1/kefu/wechatChatroom/detail", params, "GET");
+/**
+ * 获取群聊详情
+ * @returns Promise<ApiDetailResponse<WechatChatroomDetail>> 返回详情响应（包含 detail 字段）
+ */
+export const getWechatChatroomDetail = (params: { id: number }): Promise<ApiDetailResponse<WechatChatroomDetail>> => {
+  return request<ApiDetailResponse<WechatChatroomDetail>>("/v1/kefu/wechatChatroom/detail", params, "GET");
 };
-//更新配置
-export function updateConfig(params) {
+
+/**
+ * 更新配置
+ */
+export function updateConfig(params: any): Promise<any> {
   return request2("/api/WechatFriend/updateConfig", params, "PUT");
 }

src/pages/pc/ckbox/weChat/components/SidebarMenu/MessageList/index.tsx

@@ -26,7 +26,7 @@ import { useUserStore } from "@storeModule/user";
 import { MessageManager } from "@/utils/dbAction/message";
 import { ContactManager } from "@/utils/dbAction/contact";
 import { formatWechatTime } from "@/utils/common";
-import { messageFilter } from "@/utils/filter";
+import { formatMessagePreview } from "@/utils/messagePreview";
 import { ChatSession } from "@/utils/db";
 import { VirtualSessionList } from "@/components/VirtualSessionList";
 interface MessageListProps {}
@@ -68,7 +68,7 @@ const SessionItem: React.FC<SessionItemProps> = React.memo(
               </div>
             </div>
             <div className={styles.messageContent}>
-              {messageFilter(session.content)}
+              {formatMessagePreview(session.content)}
             </div>
           </div>
         </div>
@@ -105,13 +105,46 @@ const MessageList: React.FC<MessageListProps> = () => {
   // 使用新架构的sessions作为主要数据源，保留filteredSessions作为fallback
   const [filteredSessions, setFilteredSessions] = useState<ChatSession[]>([]);
   const [syncing, setSyncing] = useState(false); // 同步状态
-  const hasEnrichedRef = useRef(false); // 是否已做过未知联系人补充
   const virtualListRef = useRef<HTMLDivElement>(null); // 虚拟列表容器引用
 
   // 决定使用哪个数据源：优先使用新架构的sessions，否则使用本地filteredSessions
   const displaySessions =
     storeSessions.length > 0 ? storeSessions : filteredSessions;
 
+  // 调试日志：检查会话列表状态
+  useEffect(() => {
+    // 只在以下情况才警告：
+    // 1. 会话列表为空
+    // 2. 已经完成过至少一次加载
+    // 3. currentCustomer 不是 undefined（已加载客服列表）
+    // 4. 不在同步中
+    if (
+      displaySessions.length === 0 &&
+      hasLoadedOnce &&
+      currentCustomer !== undefined &&
+      !syncing
+    ) {
+      console.warn("⚠️ 会话列表为空，调试信息：", {
+        storeSessionsLength: storeSessions.length,
+        filteredSessionsLength: filteredSessions.length,
+        currentUserId,
+        currentCustomerId: currentCustomer?.id,
+        selectedAccountId,
+        hasLoadedOnce,
+        syncing,
+      });
+    }
+  }, [
+    displaySessions.length,
+    storeSessions.length,
+    filteredSessions.length,
+    currentUserId,
+    currentCustomer,
+    selectedAccountId,
+    hasLoadedOnce,
+    syncing,
+  ]);
+
   // 右键菜单相关状态
   const [contextMenu, setContextMenu] = useState<{
     visible: boolean;
@@ -369,161 +402,61 @@ const MessageList: React.FC<MessageListProps> = () => {
     };
   }, [contextMenu.visible]);
 
-  // ==================== 数据加载 & 未知联系人补充 ====================
-
-  // 同步完成后，检查是否存在"未知联系人"或缺失头像/昵称的会话，并异步补充详情
-  const enrichUnknownContacts = async () => {
-    if (!currentUserId) return;
-    if (hasEnrichedRef.current) return; // 避免重复执行
-
-    // 只在会话有数据时执行（使用displaySessions）
-    const sessionsToCheck =
-      displaySessions.length > 0 ? displaySessions : filteredSessions;
-    if (!sessionsToCheck || sessionsToCheck.length === 0) return;
-
-    const needEnrich = sessionsToCheck.filter(s => {
-      const noName = !s.conRemark && !s.nickname && !s.wechatId;
-      const isUnknownNickname = s.nickname === "未知联系人";
-      const noAvatar = !s.avatar;
-      return noName || isUnknownNickname || noAvatar;
-    });
-
-    if (needEnrich.length === 0) {
-      hasEnrichedRef.current = true;
-      return;
-    }
-
-    hasEnrichedRef.current = true;
-
-    // 逐个异步拉取详情，失败不打断整体流程
-    for (const session of needEnrich) {
-      try {
-        let detailResult: any = null;
-        if (session.type === "friend") {
-          detailResult = await getWechatFriendDetail({ id: session.id });
-        } else {
-          detailResult = await getWechatChatroomDetail({ id: session.id });
-        }
-
-        const detail = detailResult?.detail;
-        if (!detail) continue;
-
-        // 更新会话列表 UI
-        setSessionState(prev =>
-          prev.map(s =>
-            s.id === session.id && s.type === session.type
-              ? {
-                  ...s,
-                  avatar:
-                    session.type === "group"
-                      ? detail.chatroomAvatar || s.avatar
-                      : detail.avatar || s.avatar,
-                  nickname: detail.nickname || s.nickname,
-                  conRemark: detail.conRemark || s.conRemark,
-                  wechatId: detail.wechatId || s.wechatId,
-                }
-              : s,
-          ),
-        );
-
-        // 同步到会话数据库
-        await MessageManager.updateSession({
-          userId: currentUserId,
-          id: session.id,
-          type: session.type,
-          avatar:
-            session.type === "group"
-              ? detail.chatroomAvatar || session.avatar
-              : detail.avatar || session.avatar,
-          nickname: detail.nickname || session.nickname,
-          conRemark: detail.conRemark || session.conRemark,
-          wechatId: detail.wechatId || session.wechatId,
-        });
-
-        // 同步到联系人数据库（方便后续搜索、其它页面使用）
-        const contactBase: any = {
-          serverId: `${session.type}_${session.id}`,
-          userId: currentUserId,
-          id: session.id,
-          type: session.type,
-          wechatAccountId: detail.wechatAccountId,
-          nickname: detail.nickname || "",
-          conRemark: detail.conRemark || "",
-          avatar:
-            session.type === "group"
-              ? detail.chatroomAvatar || ""
-              : detail.avatar || "",
-          lastUpdateTime: new Date().toISOString(),
-          sortKey: "",
-          searchKey: (detail.conRemark || detail.nickname || "").toLowerCase(),
-        };
-
-        if (session.type === "group") {
-          Object.assign(contactBase, {
-            chatroomId: detail.chatroomId,
-            chatroomOwner: detail.chatroomOwner,
-            selfDisplayName: detail.selfDisplyName,
-            notice: detail.notice,
-          });
-        } else {
-          Object.assign(contactBase, {
-            wechatFriendId: detail.id,
-            wechatId: detail.wechatId,
-            alias: detail.alias,
-            gender: detail.gender,
-            region: detail.region,
-            signature: detail.signature,
-            phone: detail.phone,
-            quanPin: detail.quanPin,
-            groupId: detail.groupId,
-          });
-        }
-
-        // 使用 upsert 逻辑：如果已存在就更新，不存在则新增
-        const existContact = await ContactManager.getContactByIdAndType(
-          currentUserId,
-          session.id,
-          session.type,
-        );
-        if (existContact) {
-          await ContactManager.updateContact(contactBase);
-        } else {
-          await ContactManager.addContact(contactBase);
-        }
-      } catch (error) {
-        console.error("补拉未知联系人详情失败:", error, session);
-      }
-    }
-  };
+  // ==================== 数据加载 ====================
+  // 注意：未知联系人的数据补齐已在 msgManage.ts 中统一处理，无需重复
 
   // 与服务器同步数据（优化版：逐页同步，立即更新UI）
   const syncWithServer = async () => {
-    if (!currentUserId) return;
+    if (!currentUserId) {
+      console.warn("⚠️ syncWithServer: currentUserId 无效，跳过同步");
+      return;
+    }
 
+    console.log("🔄 开始同步会话列表，用户ID:", currentUserId);
     setSyncing(true); // 开始同步，显示同步状态栏
 
     try {
       let page = 1;
       const limit = 500;
       let hasMore = true;
-      let totalProcessed = 0;
-      let successCount = 0;
-      let failCount = 0;
 
-      // 分页获取会话列表，每页成功后立即同步
+      // 📦 第一阶段：累积所有服务器数据
+      const allServerSessions = {
+        friends: [] as any[],
+        groups: [] as any[],
+      };
+
+      console.log("📡 [阶段1] 开始分页获取所有会话数据...");
+
       while (hasMore) {
         try {
-          const result: any = await getMessageList({
+          console.log(`📡 请求第 ${page} 页会话列表...`, { page, limit });
+          let result: any;
+
+          try {
+            result = await getMessageList({
             page,
             limit,
           });
 
+            // ⭐ 处理数据结构，提取实际的列表数据
+            let actualData = result;
+            if (result && typeof result === "object" && "list" in result) {
+              actualData = result.list;
+            }
+            result = actualData;
+          } catch (apiError: any) {
+            console.error(`❌ 第 ${page} 页API请求失败:`, apiError);
+            throw apiError;
+          }
+
           if (!result || !Array.isArray(result) || result.length === 0) {
+            console.log(`✅ 第 ${page} 页无数据，停止获取`);
             hasMore = false;
             break;
           }
 
-          // 立即处理这一页的数据
+          // 分类并累积到内存
           const friends = result.filter(
             (msg: any) => msg.dataType === "friend" || !msg.chatroomId,
           );
@@ -534,19 +467,15 @@ const MessageList: React.FC<MessageListProps> = () => {
               chatroomAvatar: msg.chatroomAvatar || msg.avatar || "",
             }));
 
-          // 立即同步这一页到数据库（会触发UI更新）
-          // 分页同步时跳过删除检查，避免误删其他页的会话
-          await MessageManager.syncSessions(
-            currentUserId,
-            {
-              friends,
-              groups,
-            },
-            { skipDelete: true },
-          );
+          allServerSessions.friends.push(...friends);
+          allServerSessions.groups.push(...groups);
 
-          totalProcessed += result.length;
-          successCount++;
+          console.log(`✅ 第 ${page} 页获取完成:`, {
+            本页好友: friends.length,
+            本页群聊: groups.length,
+            累计好友: allServerSessions.friends.length,
+            累计群聊: allServerSessions.groups.length,
+          });
 
           // 判断是否还有下一页
           if (result.length < limit) {
@@ -555,32 +484,88 @@ const MessageList: React.FC<MessageListProps> = () => {
             page++;
           }
         } catch (error) {
-          // 忽略单页失败，继续处理下一页
-          console.error(`第${page}页同步失败:`, error);
-          failCount++;
-
-          // 如果连续失败太多，停止同步
-          if (failCount >= 3) {
-            console.warn("连续失败次数过多，停止同步");
-            break;
-          }
-
-          // 继续下一页
-          page++;
-          if (page > 100) {
-            // 防止无限循环
-            hasMore = false;
-          }
+          console.error(`❌ 第${page}页获取失败:`, error);
+          // 获取失败则停止，避免数据不完整导致误删
+          throw error;
         }
       }
 
+      const serverTotal =
+        allServerSessions.friends.length + allServerSessions.groups.length;
+      console.log(`📊 [阶段1] 完成，共获取 ${serverTotal} 条会话数据`);
+
+      // 获取本地数据进行对比
+      const localSessions = await MessageManager.getUserSessions(currentUserId);
       console.log(
-        `会话同步完成: 成功${successCount}页, 失败${failCount}页, 共处理${totalProcessed}条数据`,
+        `📊 [安全检查] 本地: ${localSessions.length} 条, 服务器: ${serverTotal} 条`,
       );
-      // 同步完成后，异步补充未知联系人信息
-      enrichUnknownContacts();
+
+      // ⚠️ 安全检查：防止误删
+      if (serverTotal === 0 && localSessions.length > 50) {
+        console.warn("⚠️ [安全检查失败] 服务器返回空数据，但本地有大量数据");
+        console.warn("⚠️ 可能是 API 异常，跳过本次同步以防止误删");
+        console.warn(
+          `⚠️ 本地: ${localSessions.length} 条, 服务器: ${serverTotal} 条`,
+        );
+
+        // 使用本地数据更新 UI
+        if (localSessions.length > 0) {
+          setSessionState(localSessions);
+          buildIndexes(localSessions);
+          switchAccount(currentCustomer?.id || 0);
+        }
+        return;
+      }
+
+      // 📝 第二阶段：执行完整同步（包含删除）
+      console.log("🔄 [阶段2] 执行完整同步，清理本地多余数据...");
+      const syncResult = await MessageManager.syncSessions(
+        currentUserId,
+        allServerSessions,
+        { skipDelete: false }, // ✅ 不跳过删除，以 API 为准
+      );
+
+      console.log("✅ [阶段2] 会话列表同步完成:", {
+        新增: syncResult?.added || 0,
+        更新: syncResult?.updated || 0,
+        删除: syncResult?.deleted || 0, // ✅ 显示删除数量
+        服务器总数: serverTotal,
+      });
+
+      // 🎨 第三阶段：更新 UI
+      const finalSessions = await MessageManager.getUserSessions(currentUserId);
+      console.log(`📊 [阶段3] 最终数据库会话数:`, finalSessions.length);
+
+      if (finalSessions.length > 0) {
+        setSessionState(finalSessions);
+        // 同步到新架构的SessionStore
+        if (finalSessions.length > 100) {
+          setAllSessions(finalSessions);
+        } else {
+          buildIndexes(finalSessions);
+        }
+        // 确保切换账号以显示数据
+        const accountId = currentCustomer?.id || 0;
+        switchAccount(accountId);
+        console.log(`✅ [阶段3] UI已更新，显示会话数:`, finalSessions.length);
+      } else {
+        console.warn("⚠️ 同步完成但数据库为空");
+      }
     } catch (error) {
-      console.error("同步服务器数据失败:", error);
+      console.error("❌ 同步服务器数据失败:", error);
+      // 即使同步失败，也尝试从数据库读取已有数据
+      try {
+        const fallbackSessions =
+          await MessageManager.getUserSessions(currentUserId);
+        if (fallbackSessions.length > 0) {
+          console.log("🔄 使用数据库缓存数据:", fallbackSessions.length, "条");
+          setSessionState(fallbackSessions);
+          buildIndexes(fallbackSessions);
+          switchAccount(currentCustomer?.id || 0);
+        }
+      } catch (fallbackError) {
+        console.error("❌ 读取数据库缓存也失败:", fallbackError);
+      }
     } finally {
       setSyncing(false); // 同步完成，更新状态栏
     }
@@ -630,6 +615,7 @@ const MessageList: React.FC<MessageListProps> = () => {
 
         // 有缓存数据立即显示
         if (cachedSessions.length > 0) {
+          console.log("✅ 从数据库加载会话列表:", cachedSessions.length, "条");
           setSessionState(cachedSessions);
           // 同步到新架构的SessionStore（构建索引）
           if (cachedSessions.length > 100) {
@@ -637,25 +623,35 @@ const MessageList: React.FC<MessageListProps> = () => {
           } else {
             buildIndexes(cachedSessions);
           }
+          // 确保切换账号以显示数据
+          const accountId = currentCustomer?.id || 0;
+          if (accountId !== selectedAccountId) {
+            switchAccount(accountId);
+          }
+        } else {
+          console.warn("⚠️ 数据库中没有缓存会话数据");
         }
 
         const needsFullSync = cachedSessions.length === 0 || !hasLoadedOnce;
 
         if (needsFullSync) {
+          console.log("🔄 需要完整同步，开始同步服务器数据...");
           // 不等待同步完成，让它在后台进行，第一页数据同步后会立即更新UI
           syncWithServer()
             .then(() => {
               if (!isCancelled && loadRequestRef.current === requestId) {
                 setHasLoadedOnce(true);
+                console.log("✅ 同步完成，已设置 hasLoadedOnce = true");
               }
             })
             .catch(error => {
-              console.error("同步失败:", error);
+              console.error("❌ 同步失败:", error);
             });
         } else {
+          console.log("🔄 后台同步中...");
           // 后台同步
           syncWithServer().catch(error => {
-            console.error("后台同步失败:", error);
+            console.error("❌ 后台同步失败:", error);
           });
         }
       } catch (error) {
@@ -691,9 +687,29 @@ const MessageList: React.FC<MessageListProps> = () => {
 
   // 同步账号切换到新架构的SessionStore
   useEffect(() => {
+    // 当 currentCustomer 为 undefined 时，暂时不切换账号，等待账号列表加载
+    if (currentCustomer === undefined) {
+      console.log("⏳ currentCustomer 为 undefined，等待账号列表加载...");
+      return;
+    }
+
+    // 当 currentCustomer 为 null 或有值时，进行账号切换
     const accountId = currentCustomer?.id || 0;
+    console.log("🔄 切换账号:", {
+      currentCustomerId: currentCustomer?.id,
+      accountId,
+      selectedAccountId,
+    });
+
     if (accountId !== selectedAccountId) {
-      switchAccount(accountId);
+      const result = switchAccount(accountId);
+      console.log(`✅ 切换账号完成，会话数:`, result.length);
+      // 如果切换后结果为空，尝试使用全部账号（accountId = 0）
+      if (result.length === 0 && accountId !== 0) {
+        console.warn("⚠️ 切换账号后会话列表为空，尝试显示全部会话");
+        const allResult = switchAccount(0);
+        console.log(`✅ 切换到全部账号，会话数:`, allResult.length);
+      }
     }
   }, [currentCustomer, selectedAccountId, switchAccount]);
 
@@ -844,18 +860,20 @@ const MessageList: React.FC<MessageListProps> = () => {
     filteredSessions,
   ]);
 
-  // 渲染完毕后自动点击第一个聊天记录
+  // 渲染完毕后自动点击第一个聊天记录（仅首次加载时）
   useEffect(() => {
     // 只在以下条件满足时自动点击：
     // 1. 有过滤后的会话列表
     // 2. 当前没有选中的联系人
     // 3. 还没有自动点击过
     // 4. 不在搜索状态（避免搜索时自动切换）
+    // 5. 已经完成过至少一次数据加载（避免在新消息到达时自动打开）
     if (
       displaySessions.length > 0 &&
       !currentContract &&
       !autoClickRef.current &&
-      !searchKeyword?.trim()
+      !searchKeyword?.trim() &&
+      hasLoadedOnce // 新增：只在首次加载完成后触发，不在新消息到达时触发
     ) {
       // 延迟一点时间确保DOM已渲染
       const timer = setTimeout(() => {
@@ -869,226 +887,11 @@ const MessageList: React.FC<MessageListProps> = () => {
       return () => clearTimeout(timer);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [displaySessions, currentContract, searchKeyword]);
+  }, [displaySessions.length, currentContract, searchKeyword, hasLoadedOnce]); // 改用 displaySessions.length 而非整个数组，避免数组引用变化触发
 
   // ==================== WebSocket消息处理 ====================
-
-  // 监听WebSocket消息更新（静默更新模式）
-  useEffect(() => {
-    const handleNewMessage = async (event: CustomEvent) => {
-      const { message: msgData, sessionId, type } = event.detail;
-
-      // 从联系人表查询完整信息（确保头像、wechatAccountId等字段完整）
-      const contact = await ContactManager.getContactByIdAndType(
-        currentUserId,
-        sessionId,
-        type,
-      );
-
-      // 检查会话是否存在
-      const existingSession = await MessageManager.getSessionByContactId(
-        currentUserId,
-        sessionId,
-        type,
-      );
-
-      if (existingSession) {
-        // 已存在的会话：更新消息内容、未读数，同时更新联系人信息（头像、昵称等）
-        const updateData: any = {
-          content: msgData.content,
-          lastUpdateTime: new Date().toISOString(),
-          config: {
-            ...existingSession.config,
-            unreadCount: (existingSession.config?.unreadCount || 0) + 1,
-          },
-        };
-
-        // 如果查到了联系人信息，同步更新头像、昵称等字段
-        if (contact) {
-          updateData.avatar = contact.avatar;
-          updateData.wechatAccountId = contact.wechatAccountId;
-          updateData.nickname = contact.nickname;
-          updateData.conRemark = contact.conRemark;
-          updateData.content = msgData.content;
-        }
-
-        // 更新到数据库
-        await MessageManager.updateSession({
-          userId: currentUserId,
-          id: sessionId,
-          type,
-          ...updateData,
-        });
-      } else {
-        // 新会话：从联系人表构建完整会话
-        if (contact) {
-          // 使用完整联系人信息构建会话
-          const newSession = MessageManager.buildSessionFromContact(
-            contact as any,
-            currentUserId,
-          );
-
-          // 更新会话内容和未读数
-          newSession.content = msgData.content;
-          newSession.lastUpdateTime = new Date().toISOString();
-          newSession.config.unreadCount = 1;
-          // 添加到数据库
-          await MessageManager.addSession(newSession);
-        } else {
-          // 联系人表中不存在，从接口获取详细信息
-          console.warn(
-            `联系人表中未找到 ID: ${sessionId}, 类型: ${type}，从接口获取详细信息`,
-          );
-
-          try {
-            // 请求接口获取联系人/群组详情
-            let detailResult: any = null;
-            if (type === "friend") {
-              detailResult = await getWechatFriendDetail({ id: sessionId });
-            } else {
-              detailResult = await getWechatChatroomDetail({ id: sessionId });
-            }
-
-            if (detailResult?.detail) {
-              const contactDetail = detailResult.detail;
-
-              // 构建联系人数据并存入联系人数据库
-              const newContact = {
-                serverId: `${type}_${sessionId}`,
-                userId: currentUserId,
-                id: sessionId,
-                type,
-                wechatAccountId: contactDetail.wechatAccountId,
-                nickname: contactDetail.nickname || "",
-                conRemark: contactDetail.conRemark || "",
-                avatar:
-                  type === "group"
-                    ? contactDetail.chatroomAvatar || ""
-                    : contactDetail.avatar || "",
-                lastUpdateTime: new Date().toISOString(),
-                sortKey: "",
-                searchKey: (
-                  contactDetail.conRemark ||
-                  contactDetail.nickname ||
-                  ""
-                ).toLowerCase(),
-              };
-
-              // 添加群组特有字段
-              if (type === "group") {
-                Object.assign(newContact, {
-                  chatroomId: contactDetail.chatroomId,
-                  chatroomOwner: contactDetail.chatroomOwner,
-                  selfDisplayName: contactDetail.selfDisplyName,
-                  notice: contactDetail.notice,
-                });
-              } else {
-                // 添加好友特有字段
-                Object.assign(newContact, {
-                  wechatFriendId: contactDetail.id,
-                  wechatId: contactDetail.wechatId,
-                  alias: contactDetail.alias,
-                  gender: contactDetail.gender,
-                  region: contactDetail.region,
-                  signature: contactDetail.signature,
-                  phone: contactDetail.phone,
-                  quanPin: contactDetail.quanPin,
-                  groupId: contactDetail.groupId,
-                });
-              }
-
-              // 存入联系人数据库
-              await ContactManager.addContact(newContact as any);
-              console.log("✅ 新联系人已存入数据库:", newContact);
-
-              // 使用完整联系人信息构建会话
-              const newSession = MessageManager.buildSessionFromContact(
-                contactDetail as any,
-                currentUserId,
-              );
-
-              // 更新会话内容和未读数
-              newSession.content = msgData.content;
-              newSession.lastUpdateTime = new Date().toISOString();
-              newSession.config.unreadCount = 1;
-
-              // 添加到会话数据库
-              await MessageManager.addSession(newSession);
-              console.log("✅ 新会话已创建:", newSession);
-            } else {
-              // 接口也没有返回数据，使用最基础的兜底方案
-              console.error("接口未返回联系人详情，使用基础数据创建会话");
-              const newSession: ChatSession = {
-                serverId: `${type}_${sessionId}`,
-                userId: currentUserId,
-                id: sessionId,
-                type,
-                wechatAccountId: msgData.wechatAccountId || 0,
-                nickname: msgData.nickname || "未知联系人",
-                conRemark: msgData.conRemark || "",
-                avatar:
-                  type === "group"
-                    ? msgData.chatroomAvatar || ""
-                    : msgData.avatar || "",
-                content: msgData.content,
-                lastUpdateTime: new Date().toISOString(),
-                config: {
-                  unreadCount: 1,
-                  top: 0,
-                },
-                sortKey: "",
-                phone: msgData.phone || "",
-                region: msgData.region || "",
-              };
-
-              await MessageManager.addSession(newSession);
-            }
-          } catch (error) {
-            console.error("获取联系人详情失败:", error);
-            // 失败时使用消息数据创建简化会话
-            const newSession: ChatSession = {
-              serverId: `${type}_${sessionId}`,
-              userId: currentUserId,
-              id: sessionId,
-              type,
-              wechatAccountId: msgData.wechatAccountId || 0,
-              nickname: msgData.nickname || "未知联系人",
-              conRemark: msgData.conRemark || "",
-              avatar:
-                type === "group"
-                  ? msgData.chatroomAvatar || ""
-                  : msgData.avatar || "",
-              content: msgData.content,
-              lastUpdateTime: new Date().toISOString(),
-              config: {
-                unreadCount: 1,
-                top: 0,
-              },
-              sortKey: "",
-              phone: msgData.phone || "",
-              region: msgData.region || "",
-            };
-
-            await MessageManager.addSession(newSession);
-          }
-        }
-      }
-
-      // MessageManager 的回调会自动把最新数据发给 Store
-    };
-
-    window.addEventListener(
-      "chatMessageReceived",
-      handleNewMessage as EventListener,
-    );
-
-    return () => {
-      window.removeEventListener(
-        "chatMessageReceived",
-        handleNewMessage as EventListener,
-      );
-    };
-  }, [currentUserId]);
+  // 注意：新消息的数据补齐和会话创建已在 msgManage.ts 中统一处理
+  // MessageManager.onSessionsUpdate 监听会自动更新 UI，无需重复处理
 
   // ==================== 会话操作 ====================
 
@@ -1187,7 +990,9 @@ const MessageList: React.FC<MessageListProps> = () => {
           className={styles.virtualList}
         />
       ) : (
-        <div className={styles.emptyList}>{!syncing ? "暂无会话" : null}</div>
+        <div className={styles.emptyList}>
+          {syncing ? "正在加载..." : "暂无会话"}
+        </div>
       )}
 
       {/* 右键菜单 */}

src/pages/pc/ckbox/weChat/components/SidebarMenu/MessageList/index.virtual.tsx

@@ -24,7 +24,7 @@ import { useWeChatStore } from "@weChatStore/weChat";
 import { useUserStore } from "@storeModule/user";
 import { useContactStore } from "@weChatStore/contacts";
 import { formatWechatTime } from "@/utils/common";
-import { messageFilter } from "@/utils/filter";
+import { formatMessagePreview } from "@/utils/messagePreview";
 import { UserOutlined, TeamOutlined } from "@ant-design/icons";
 import { Avatar, Badge } from "antd";
 
@@ -61,7 +61,7 @@ const SessionItem: React.FC<{
             </div>
           </div>
           <div className={styles.messageContent}>
-            {messageFilter(session.content)}
+            {formatMessagePreview(session.content)}
           </div>
         </div>
       </div>

src/pages/pc/ckbox/weChat/components/SidebarMenu/SearchAnyone/index.module.scss

@@ -0,0 +1,89 @@
+.searchContainer {
+  position: relative;
+  width: 100%;
+}
+
+.resultsContainer {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  margin-top: 4px;
+  background: #fff;
+  border: 1px solid #e8e8e8;
+  border-radius: 4px;
+  box-shadow: 0 0px 10px rgba(0, 0, 0, 0.3);
+  z-index: 1000;
+  width: 260px;
+}
+
+.resultsList {
+  height: 50vh;
+  overflow-y: auto;
+}
+
+.resultItem {
+  display: flex;
+  align-items: center;
+  padding: 8px 15px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+
+  &:hover {
+    background-color: #f5f5f5;
+  }
+
+  &:active {
+    background-color: #e8e8e8;
+  }
+}
+
+.avatarContainer {
+  margin-right: 10px;
+  flex-shrink: 0;
+}
+
+.avatar {
+  background-color: #1890ff;
+}
+
+.contractInfo {
+  flex: 1;
+  overflow: hidden;
+  min-width: 0;
+}
+
+.name {
+  font-size: 14px;
+  color: #333;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: 1.5;
+}
+
+.groupInfo {
+  font-size: 12px;
+  color: #999;
+  margin-top: 2px;
+}
+
+.loadingContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  gap: 8px;
+}
+
+.loadingText {
+  font-size: 14px;
+  color: #999;
+}
+
+.noResults {
+  text-align: center;
+  color: #999;
+  padding: 20px;
+  font-size: 14px;
+}

src/pages/pc/ckbox/weChat/components/SidebarMenu/SearchAnyone/index.tsx

@@ -0,0 +1,337 @@
+import React, { useState, useEffect, useRef, useCallback } from "react";
+import { Input, Avatar, Spin } from "antd";
+import { SearchOutlined } from "@ant-design/icons";
+import { Contact, ChatSession } from "@/utils/db";
+import { getFriendList } from "@/components/FriendSelection/api";
+import { getGroupList } from "@/components/GroupSelection/api";
+import { useContactStore } from "@/store/module/weChat/contacts";
+import { useCustomerStore } from "@/store/module/weChat/customer";
+import { MessageManager } from "@/utils/dbAction/message";
+import { useUserStore } from "@/store/module/user";
+import styles from "./index.module.scss";
+
+interface SearchAnyoneProps {
+  onContactClick?: (contact: Contact) => void;
+}
+
+const SearchAnyone: React.FC<SearchAnyoneProps> = ({ onContactClick }) => {
+  const [searchValue, setSearchValue] = useState("");
+  const [searchResults, setSearchResults] = useState<Contact[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [showResults, setShowResults] = useState(false);
+
+  const { setCurrentContact } = useContactStore();
+  const currentCustomer = useCustomerStore(state => state.currentCustomer);
+  const { user } = useUserStore();
+  const currentUserId = user?.id || 0;
+
+  const searchTimeoutRef = useRef<ReturnType<typeof setTimeout> | undefined>(
+    undefined,
+  );
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  // 搜索防抖处理
+  const performSearch = useCallback(
+    async (keyword: string) => {
+      if (!keyword.trim()) {
+        setSearchResults([]);
+        setShowResults(false);
+        return;
+      }
+
+      setLoading(true);
+      setShowResults(true);
+
+      try {
+        // 同时请求好友列表和群列表
+        const [friendsResult, groupsResult] = await Promise.all([
+          getFriendList({
+            page: 1,
+            limit: 50,
+            keyword: keyword.trim(),
+          }),
+          getGroupList({
+            page: 1,
+            limit: 50,
+            keyword: keyword.trim(),
+          }),
+        ]);
+
+        const friends = (friendsResult?.list || []).map((item: any) => ({
+          serverId: `friend_${item.id}`,
+          userId: currentUserId,
+          id: item.id,
+          type: "friend" as const,
+          wechatAccountId: item.wechatAccountId || currentCustomer?.id || 0,
+          nickname: item.nickname || "",
+          conRemark: item.conRemark || "",
+          avatar: item.avatar || "",
+          lastUpdateTime: new Date().toISOString(),
+          sortKey: "",
+          searchKey: (item.conRemark || item.nickname || "").toLowerCase(),
+          wechatFriendId: item.id,
+          wechatId: item.wechatId || "",
+          alias: item.alias || "",
+          gender: item.gender,
+          groupId: item.groupId,
+          region: item.region || "",
+          signature: item.signature || "",
+          phone: item.phone || "",
+          quanPin: item.quanPin || "",
+        }));
+
+        const groups = (groupsResult?.list || []).map((item: any) => ({
+          serverId: `group_${item.id}`,
+          userId: currentUserId,
+          id: item.id,
+          type: "group" as const,
+          wechatAccountId: item.wechatAccountId || currentCustomer?.id || 0,
+          nickname: item.name || item.chatroomName || "",
+          conRemark: item.conRemark || "",
+          avatar: item.chatroomAvatar || item.avatar || "",
+          lastUpdateTime: new Date().toISOString(),
+          sortKey: "",
+          searchKey: (
+            item.conRemark ||
+            item.nickname ||
+            item.chatroomName ||
+            ""
+          ).toLowerCase(),
+          chatroomId: item.chatroomId || "",
+          chatroomOwner: item.chatroomOwner || "",
+          selfDisplayName: item.selfDisplayName || "",
+          notice: item.notice || "",
+          memberCount: item.memberCount || 0,
+        }));
+
+        // 合并结果并去重
+        const allResults = [...friends, ...groups];
+        const uniqueResults = allResults.filter(
+          (contact, index, self) =>
+            index ===
+            self.findIndex(c => c.id === contact.id && c.type === contact.type),
+        );
+
+        setSearchResults(uniqueResults);
+      } catch (error) {
+        console.error("搜索失败:", error);
+        setSearchResults([]);
+      } finally {
+        setLoading(false);
+      }
+    },
+    [currentUserId, currentCustomer],
+  );
+
+  // 处理搜索输入
+  const handleSearchChange = (value: string) => {
+    setSearchValue(value);
+
+    // 清除之前的定时器
+    if (searchTimeoutRef.current) {
+      clearTimeout(searchTimeoutRef.current);
+    }
+
+    // 如果输入为空，立即隐藏结果
+    if (!value.trim()) {
+      setSearchResults([]);
+      setShowResults(false);
+      return;
+    }
+
+    // 防抖：300ms 后执行搜索
+    searchTimeoutRef.current = setTimeout(() => {
+      performSearch(value);
+    }, 300);
+  };
+
+  // 处理点击搜索结果
+  const handleResultClick = useCallback(
+    async (contact: Contact) => {
+      try {
+        // 1. 先检查会话是否已存在
+        let session = await MessageManager.getSessionByContactId(
+          currentUserId,
+          contact.id,
+          contact.type,
+        );
+
+        if (!session) {
+          // 2. 如果会话不存在，创建新会话（不置顶，但排在非置顶区域第一个）
+          // 使用当前时间，确保在非置顶会话中排在最前面
+          const now = new Date();
+          const newSession: ChatSession = {
+            serverId: `${contact.type}_${contact.id}`,
+            userId: currentUserId,
+            id: contact.id,
+            type: contact.type,
+            wechatAccountId:
+              contact.wechatAccountId || currentCustomer?.id || 0,
+            nickname: contact.nickname || "",
+            conRemark: contact.conRemark || "",
+            avatar: contact.avatar || "",
+            content: "",
+            lastUpdateTime: now.toISOString(), // 使用当前时间，确保在非置顶区域排第一
+            aiType: contact.aiType || 0,
+            phone: contact.phone || "",
+            region: contact.region || "",
+            config: {
+              unreadCount: 0,
+              top: 0, // 不置顶，排在非置顶区域
+            },
+            sortKey: "",
+            ...(contact.type === "group"
+              ? {
+                  chatroomId: (contact as any).chatroomId || "",
+                  chatroomOwner: (contact as any).chatroomOwner || "",
+                  selfDisplayName: (contact as any).selfDisplayName || "",
+                  notice: (contact as any).notice || "",
+                }
+              : {
+                  wechatFriendId: contact.id,
+                  wechatId: (contact as any).wechatId || "",
+                  alias: (contact as any).alias || "",
+                }),
+            extendFields: "{}",
+          };
+
+          // 创建会话（会自动生成 sortKey，由于使用当前时间，会在非置顶会话中排在最前面）
+          await MessageManager.createSession(currentUserId, newSession);
+
+          // 重新获取会话（包含生成的 sortKey）
+          session = await MessageManager.getSessionByContactId(
+            currentUserId,
+            contact.id,
+            contact.type,
+          );
+        }
+
+        // 5. 设置当前联系人（这会触发 SidebarMenu 中的 useEffect，自动切换到聊天tab并选中会话）
+        if (session) {
+          setCurrentContact(session as any);
+        } else {
+          // 如果还是没有会话，使用联系人
+          setCurrentContact(contact);
+        }
+
+        // 如果有自定义点击处理，调用它
+        if (onContactClick) {
+          onContactClick(contact);
+        }
+      } catch (error) {
+        console.error("处理搜索结果点击失败:", error);
+        // 即使出错，也尝试设置联系人
+        setCurrentContact(contact);
+      }
+
+      // 清空搜索并隐藏结果
+      setSearchValue("");
+      setSearchResults([]);
+      setShowResults(false);
+    },
+    [currentUserId, currentCustomer, setCurrentContact, onContactClick],
+  );
+
+  // 点击外部区域关闭搜索结果
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        containerRef.current &&
+        !containerRef.current.contains(event.target as Node)
+      ) {
+        setShowResults(false);
+      }
+    };
+
+    if (showResults) {
+      document.addEventListener("mousedown", handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [showResults]);
+
+  // 组件卸载时清除定时器
+  useEffect(() => {
+    return () => {
+      if (searchTimeoutRef.current) {
+        clearTimeout(searchTimeoutRef.current);
+      }
+    };
+  }, []);
+
+  // 渲染搜索结果项
+  const renderResultItem = (contact: Contact) => {
+    const isGroup = contact.type === "group";
+    // 参考会话列表的显示逻辑：优先显示备注名，其次昵称，最后微信号（好友）或群ID（群聊）
+    const name =
+      contact.conRemark ||
+      contact.nickname ||
+      (isGroup ? `群聊${contact.id}` : (contact as any).wechatId || "");
+
+    return (
+      <div
+        key={`${contact.type}_${contact.id}`}
+        className={styles.resultItem}
+        onClick={() => handleResultClick(contact)}
+      >
+        <div className={styles.avatarContainer}>
+          <Avatar
+            size={48}
+            src={contact.avatar}
+            icon={
+              !contact.avatar && (
+                <span>
+                  {contact.nickname?.charAt(0) || (isGroup ? "群" : "联")}
+                </span>
+              )
+            }
+            className={styles.avatar}
+          />
+        </div>
+        <div className={styles.contractInfo}>
+          <div className={styles.name}>{name}</div>
+          {isGroup && <div className={styles.groupInfo}>群聊</div>}
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <div className={styles.searchContainer} ref={containerRef}>
+      <Input
+        placeholder="搜索客户..."
+        prefix={<SearchOutlined />}
+        value={searchValue}
+        onChange={e => handleSearchChange(e.target.value)}
+        onFocus={() => {
+          if (searchValue.trim()) {
+            setShowResults(true);
+          }
+        }}
+        allowClear
+      />
+
+      {/* 搜索结果列表 */}
+      {showResults && (
+        <div className={styles.resultsContainer}>
+          {loading ? (
+            <div className={styles.loadingContainer}>
+              <Spin size="small" />
+              <span className={styles.loadingText}>搜索中...</span>
+            </div>
+          ) : searchResults.length > 0 ? (
+            <div className={styles.resultsList}>
+              {searchResults.map(contact => renderResultItem(contact))}
+            </div>
+          ) : searchValue.trim() ? (
+            <div className={styles.noResults}>未找到匹配的联系人</div>
+          ) : null}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default SearchAnyone;

src/pages/pc/ckbox/weChat/components/SidebarMenu/index.tsx

@@ -11,6 +11,7 @@ import MessageList from "./MessageList/index";
 import FriendsCircle from "./FriendsCicle";
 import AddFriends from "./AddFriends";
 import PopChatRoom from "./PopChatRoom";
+import SearchAnyone from "./SearchAnyone";
 import styles from "./SidebarMenu.module.scss";
 import { useContactStore } from "@/store/module/weChat/contacts";
 import { useContactStoreNew } from "@/store/module/weChat/contacts.new";
@@ -23,16 +24,7 @@ interface SidebarMenuProps {
 }
 
 const SidebarMenu: React.FC<SidebarMenuProps> = ({ loading = false }) => {
-  const {
-    searchKeyword: oldSearchKeyword,
-    setSearchKeyword: setOldSearchKeyword,
-    clearSearchKeyword,
-    currentContact,
-  } = useContactStore();
-
-  // 使用新架构的ContactStore进行搜索
-  const contactStoreNew = useContactStoreNew();
-  const { searchKeyword, searchContacts, clearSearch } = contactStoreNew;
+  const { currentContact } = useContactStore();
 
   const currentCustomer = useCustomerStore(state => state.currentCustomer);
   const { setCurrentContact } = useWeChatStore();
@@ -76,50 +68,6 @@ const SidebarMenu: React.FC<SidebarMenuProps> = ({ loading = false }) => {
     handleContactSelection();
   }, [currentContact, currentUserId, setCurrentContact]);
 
-  // 搜索防抖处理
-  const searchDebounceRef = useRef<ReturnType<typeof setTimeout>>();
-
-  const handleSearch = (value: string) => {
-    // 同时更新旧架构（向后兼容）
-    setOldSearchKeyword(value);
-
-    // 清除之前的防抖定时器
-    if (searchDebounceRef.current) {
-      clearTimeout(searchDebounceRef.current);
-    }
-
-    // 如果关键词为空，立即清除搜索
-    if (!value.trim()) {
-      clearSearch();
-      return;
-    }
-
-    // 防抖：300ms后执行搜索
-    searchDebounceRef.current = setTimeout(() => {
-      searchContacts(value);
-    }, 300);
-  };
-
-  const handleClearSearch = () => {
-    // 清除防抖定时器
-    if (searchDebounceRef.current) {
-      clearTimeout(searchDebounceRef.current);
-    }
-    // 清除旧架构的搜索
-    clearSearchKeyword();
-    // 清除新架构的搜索
-    clearSearch();
-  };
-
-  // 组件卸载时清除防抖定时器
-  useEffect(() => {
-    return () => {
-      if (searchDebounceRef.current) {
-        clearTimeout(searchDebounceRef.current);
-      }
-    };
-  }, []);
-
   // 下拉菜单项
   const menuItems: MenuProps["items"] = [
     {
@@ -190,14 +138,7 @@ const SidebarMenu: React.FC<SidebarMenuProps> = ({ loading = false }) => {
     <div className={styles.headerContainer}>
       {/* 搜索栏 */}
       <div className={styles.searchBar}>
-        <Input
-          placeholder="搜索客户..."
-          prefix={<SearchOutlined />}
-          value={searchKeyword || oldSearchKeyword}
-          onChange={e => handleSearch(e.target.value)}
-          onClear={handleClearSearch}
-          allowClear
-        />
+        <SearchAnyone />
         {currentCustomer && (
           <Dropdown
             menu={{ items: menuItems }}
@@ -219,18 +160,7 @@ const SidebarMenu: React.FC<SidebarMenuProps> = ({ loading = false }) => {
         </div>
         <div
           className={`${styles.tabItem} ${activeTab === "contracts" ? styles.active : ""}`}
-          onClick={async () => {
-            setActiveTab("contracts");
-            try {
-              const accountId = currentCustomer?.id || 0;
-              // 每次切到联系人标签时，强制从接口刷新一次分组列表（通过全局 store 调用，避免 hook 实例问题）
-              await useContactStoreNew
-                .getState()
-                .loadGroupsFromAPI(accountId);
-            } catch (error) {
-              console.error("刷新联系人分组失败:", error);
-            }
-          }}
+          onClick={() => setActiveTab("contracts")}
         >
           <span>联系人</span>
         </div>

src/store/module/weChat/contacts.new.ts

@@ -568,6 +568,7 @@ export const useContactStoreNew = createPersistStore<ContactStoreState>(
      * 切换账号（重新加载展开的分组）
      */
     switchAccount: async (accountId: number) => {
+      const currentState = get(); // Get state before measureAsync for metadata
       return performanceMonitor.measureAsync(
         `ContactStore.switchAccount(${accountId})`,
         async () => {
@@ -617,7 +618,7 @@ export const useContactStoreNew = createPersistStore<ContactStoreState>(
             }
           }
         },
-        { accountId, expandedGroupsCount: state.expandedGroups.size },
+        { accountId, expandedGroupsCount: currentState.expandedGroups.size },
       );
     },
 

src/store/module/weChat/customer.data.ts

@@ -1,29 +1,105 @@
-export interface Customer {
-  id: number;
-  tenantId: number;
-  wechatId: string;
-  nickname: string;
-  alias: string;
-  avatar: string;
-  gender: number;
-  region: string;
-  signature: string;
-  bindQQ: string;
-  bindEmail: string;
-  bindMobile: string;
-  createTime: string;
-  currentDeviceId: number;
-  isDeleted: boolean;
-  deleteTime: string;
-  groupId: number;
+// 设备额外信息接口
+export interface DeviceExtra {
+  l: boolean;
+  ip: string;
+  sn: string;
+  Address: string;
+  address: string;
+  battery: number;
+  product: string;
+  location: string;
+  sim0Iccid: string;
+  sim1Iccid: string;
+  romVersion: string;
+  sdkVersion: number;
+  market_name: string;
+  moduleVersion: string;
+  smsAppVersion: string;
+  "com.bhp.dialer": string;
+  phoneAppVersion: string;
+  "com.bhp.contacts": string;
+  "com.bhp.recorder": string;
+  imei: string;
   memo: string;
-  wechatVersion: string;
-  labels: string[];
-  lastUpdateTime: string;
-  isOnline?: boolean;
-  momentsMax: number;
-  momentsNum: number;
-  [key: string]: any;
+  [key: string]: any; // 允许额外字段
+}
+
+// 客服账号接口
+export interface Customer {
+  // 基础信息
+  id: number; // 客服账号ID
+  tenantId: number; // 租户ID
+  wechatId: string; // 微信ID
+  nickname: string; // 昵称
+  alias: string; // 别名/微信号
+  avatar: string; // 头像URL
+  gender: number; // 性别 (0=未知, 1=男, 2=女)
+  region: string; // 地区
+  signature: string; // 个性签名
+  wechatGroupName?: string; // 微信群名称
+
+  // 绑定信息
+  bindQQ: string; // 绑定的QQ
+  bindEmail: string; // 绑定的邮箱
+  bindMobile: string; // 绑定的手机号
+
+  // 设备相关
+  deviceAccountId: number; // 设备账号ID
+  currentDeviceId: number; // 当前设备ID
+  deviceExtra?: DeviceExtra; // 设备额外信息
+
+  // 状态信息
+  keFuAlive: number; // 客服在线状态 (0=离线, 1=在线)
+  deviceAlive: number; // 设备在线状态 (0=离线, 1=在线)
+  wechatAlive: number; // 微信在线状态 (0=离线, 1=在线)
+  wechatAliveTime: number; // 微信在线时间戳
+  status: number; // 账号状态
+  isDeleted: number; // 是否删除 (0=否, 1=是)
+  deleteTime: number | string; // 删除时间
+
+  // 统计信息
+  totalFriend: number; // 总好友数
+  maleFriend: number; // 男性好友数
+  femaleFriend: number; // 女性好友数
+  unknowFriend: number; // 未知性别好友数
+  yesterdayMsgCount: number; // 昨日消息数
+  sevenDayMsgCount: number; // 7天消息数
+  thirtyDayMsgCount: number; // 30天消息数
+
+  // 健康分数
+  healthScore: number; // 健康分数
+  baseScore: number; // 基础分数
+  dynamicScore: number; // 动态分数
+  scoreUpdateTime: string | null; // 分数更新时间
+
+  // 频繁使用相关
+  lastFrequentTime: string | null; // 最后频繁使用时间
+  frequentCount: number; // 频繁使用次数
+  lastNoFrequentTime: string | null; // 最后非频繁时间
+  consecutiveNoFrequentDays: number; // 连续非频繁天数
+
+  // 分组和标签
+  groupId: number; // 分组ID
+  labels: string[]; // 标签列表
+  memo: string; // 备注
+
+  // 朋友圈
+  momentsMax: number; // 朋友圈最大数量
+  momentsNum: number; // 朋友圈数量
+
+  // 时间信息
+  createTime: string; // 创建时间
+  updateTime?: string; // 更新时间
+  lastUpdateTime?: string; // 最后更新时间（兼容旧字段）
+
+  // 版本和修改信息
+  wechatVersion: string; // 微信版本
+  isModifiedAlias: number; // 是否修改了别名 (0=否, 1=是)
+
+  // 前端扩展字段
+  isOnline?: boolean; // 是否在线（前端计算）
+
+  [key: string]: any; // 允许额外字段
 }
 
 //Store State

src/store/module/weChat/customer.ts

@@ -19,8 +19,8 @@ export const useCustomerStore = create<CustomerState>()(
     {
       name: "customer-storage",
       partialize: state => ({
-        customerList: [],
-        currentCustomer: null,
+        customerList: state.customerList,
+        currentCustomer: state.currentCustomer,
       }),
     },
   ),

src/store/module/websocket/msgManage.ts

@@ -6,15 +6,20 @@ import { Messages } from "./msg.data";
 import { db } from "@/utils/db";
 import { Modal } from "antd";
 import { useCustomerStore, updateCustomerList } from "../weChat/customer";
+import { useUserStore } from "../user";
 import { dataProcessing, asyncMessageStatus } from "@/api/ai";
 import { useContactStoreNew } from "../weChat/contacts.new";
 import { useMessageStore } from "../weChat/message";
-import { Contact, ChatSession } from "@/utils/db";
+import { Contact, ChatSession, contactUnifiedService } from "@/utils/db";
 import { MessageManager } from "@/utils/dbAction/message";
 import { ContactManager } from "@/utils/dbAction/contact";
 import { groupContactsCache, sessionListCache } from "@/utils/cache";
 import { GroupContactData } from "../weChat/contacts.data";
 import { performanceMonitor } from "@/utils/performance";
+import {
+  getWechatFriendDetail,
+  getWechatChatroomDetail,
+} from "@/pages/pc/ckbox/weChat/components/SidebarMenu/MessageList/api";
 // 消息处理器类型定义
 type MessageHandler = (message: WebSocketMessage) => void;
 
@@ -30,6 +35,7 @@ const getWeChatStoreMethods = () => {
     updateMessage: state.updateMessage,
     updateMomentCommonLoading: state.updateMomentCommonLoading,
     addMomentCommon: state.addMomentCommon,
+    setVideoUrl: state.setVideoUrl,
     setFileDownloadUrl: state.setFileDownloadUrl,
     setFileDownloading: state.setFileDownloading,
   };
@@ -66,6 +72,16 @@ const messageHandlers: Record<string, MessageHandler> = {
 
     //异步传新消息给数据库
     goAsyncServiceData(message);
+
+    // 立即更新本地消息状态，不依赖 API 轮询结果
+    if (msg) {
+      console.log("CmdSendMessageResp 发送消息响应, 更新sendStatus", msg.id);
+      updateMessage(msg.id, {
+        sendStatus: 0,
+        id: message.friendMessage?.id || message.chatroomMessage?.id,
+      });
+    }
+
     asyncMessageStatus({
       messageId: message.friendMessage?.id || message.chatroomMessage?.id,
       wechatFriendId: message.friendMessage?.wechatFriendId,
@@ -73,14 +89,8 @@ const messageHandlers: Record<string, MessageHandler> = {
       wechatAccountId:
         message.friendMessage?.wechatAccountId ||
         message.chatroomMessage?.wechatAccountId,
-    }).then(res => {
-      if (msg) {
-        console.log("CmdSendMessageResp 发送消息响应", res);
-        updateMessage(message.seq, {
-          sendStatus: 0,
-          id: message.friendMessage?.id || message.chatroomMessage?.id,
-        });
-      }
+    }).catch(err => {
+      console.error("asyncMessageStatus 查询消息状态失败:", err);
     });
   },
   CmdSendMessageResult: message => {
@@ -145,10 +155,212 @@ const messageHandlers: Record<string, MessageHandler> = {
 
             // 更新新架构的SessionStore（增量更新索引和缓存）
             try {
-              const userId =
-                useCustomerStore.getState().currentCustomer?.userId || 0;
+              const userId = useUserStore.getState().user?.id || 0;
               if (userId > 0) {
-                // 从数据库获取更新后的会话信息（带超时保护）
+                // 1. 先检查联系人是否存在于本地数据库
+                console.log("🔍 [新消息] 检查联系人是否存在:", {
+                  sessionId,
+                  type,
+                  userId,
+                });
+
+                const existingContact =
+                  await ContactManager.getContactByIdAndType(
+                    userId,
+                    sessionId,
+                    type,
+                  );
+
+                // 2. 如果联系人不存在，先请求 API 补齐数据，直接构建完整会话
+                if (!existingContact) {
+                  console.log("⚠️ 延迟 1.5 秒后再执行逻辑，避免频繁处理", {
+                    sessionId,
+                    type,
+                  });
+                  // 延迟 2 秒后再执行逻辑，避免频繁处理
+                  await new Promise(resolve => setTimeout(resolve, 2000));
+
+                  try {
+                    let detailResult: any = null;
+                    if (type === "friend") {
+                      detailResult = await getWechatFriendDetail({
+                        id: sessionId,
+                      });
+                      detailResult = detailResult?.detail;
+                    } else {
+                      detailResult = await getWechatChatroomDetail({
+                        id: sessionId,
+                      });
+                    }
+
+                    const detail = detailResult;
+                    if (detail) {
+                      console.log(
+                        "✅ [新消息] 成功获取详情，构建完整会话数据:",
+                        {
+                          id: detail.id,
+                          nickname: detail.nickname,
+                          avatar: detail.avatar || detail.chatroomAvatar,
+                        },
+                      );
+
+                      // 构建完整的会话数据
+                      const newSession: ChatSession = {
+                        serverId: `${type}_${sessionId}`,
+                        userId,
+                        id: sessionId,
+                        type,
+                        wechatAccountId:
+                          detail.wechatAccountId || wechatAccountId,
+                        nickname: detail.nickname || "",
+                        conRemark: detail.conRemark || "",
+                        avatar:
+                          type === "group"
+                            ? detail.chatroomAvatar || ""
+                            : detail.avatar || "",
+                        content: msgData.content || "",
+                        lastUpdateTime: new Date().toISOString(),
+                        aiType: 0,
+                        phone: detail.phone || "",
+                        region: detail.region || "",
+                        config: {
+                          unreadCount: 1, // 新消息未读
+                          top: 0, // 不置顶
+                        },
+                        sortKey: "", // 会自动生成
+                      };
+
+                      // 添加类型特定字段
+                      if (type === "group") {
+                        Object.assign(newSession, {
+                          chatroomId: detail.chatroomId || "",
+                          chatroomOwner: detail.chatroomOwner || "",
+                          selfDisplayName:
+                            detail.selfDisplyName ||
+                            detail.selfDisplayName ||
+                            "",
+                          notice: detail.notice || "",
+                        });
+                      } else {
+                        Object.assign(newSession, {
+                          wechatFriendId: detail.id,
+                          wechatId: detail.wechatId || "",
+                          alias: detail.alias || "",
+                          gender: detail.gender,
+                          signature: detail.signature || "",
+                          quanPin: detail.quanPin || "",
+                          groupId: detail.groupId,
+                        });
+                      }
+
+                      // 先检查会话是否已存在
+                      const existingSession =
+                        await MessageManager.getSessionByContactId(
+                          userId,
+                          sessionId,
+                          type,
+                        );
+
+                      if (existingSession) {
+                        // 会话已存在，只更新消息内容和未读数
+                        console.log("ℹ️ [新消息] 会话已存在，更新内容");
+                        await MessageManager.updateSession({
+                          userId,
+                          id: sessionId,
+                          type,
+                          content: msgData.content || "",
+                          lastUpdateTime: new Date().toISOString(),
+                          config: {
+                            ...existingSession.config,
+                            unreadCount:
+                              (existingSession.config.unreadCount || 0) + 1,
+                          },
+                          // 补齐可能缺失的联系人信息
+                          avatar: existingSession.avatar || newSession.avatar,
+                          nickname:
+                            existingSession.nickname || newSession.nickname,
+                          conRemark:
+                            existingSession.conRemark || newSession.conRemark,
+                          wechatId:
+                            existingSession.wechatId || newSession.wechatId,
+                        });
+                      } else {
+                        // 会话不存在，创建新会话
+                        console.log("ℹ️ [新消息] 会话不存在，创建新会话");
+                        await MessageManager.createSession(userId, newSession);
+                      }
+
+                      // 然后创建联系人（异步，不影响会话显示）
+                      const newContact: any = {
+                        serverId: `${type}_${sessionId}_${wechatAccountId}`,
+                        userId,
+                        id: sessionId,
+                        type,
+                        wechatAccountId:
+                          detail.wechatAccountId || wechatAccountId,
+                        nickname: detail.nickname || "",
+                        conRemark: detail.conRemark || "",
+                        avatar:
+                          type === "group"
+                            ? detail.chatroomAvatar || ""
+                            : detail.avatar || "",
+                        lastUpdateTime: new Date().toISOString(),
+                        sortKey: "",
+                        searchKey: (
+                          detail.conRemark ||
+                          detail.nickname ||
+                          ""
+                        ).toLowerCase(),
+                      };
+
+                      // 添加类型特定字段
+                      if (type === "group") {
+                        Object.assign(newContact, {
+                          chatroomId: detail.chatroomId || "",
+                          chatroomOwner: detail.chatroomOwner || "",
+                          selfDisplayName:
+                            detail.selfDisplyName ||
+                            detail.selfDisplayName ||
+                            "",
+                          notice: detail.notice || "",
+                        });
+                      } else {
+                        Object.assign(newContact, {
+                          wechatFriendId: detail.id,
+                          wechatId: detail.wechatId || "",
+                          alias: detail.alias || "",
+                          gender: detail.gender,
+                          region: detail.region || "",
+                          signature: detail.signature || "",
+                          phone: detail.phone || "",
+                          quanPin: detail.quanPin || "",
+                          groupId: detail.groupId,
+                        });
+                      }
+
+                      // 异步添加联系人（不阻塞会话显示）
+                      ContactManager.addContact(newContact)
+                        .then(() => {
+                          console.log("✅ [新消息] 联系人已添加到数据库");
+                        })
+                        .catch(error => {
+                          console.error("❌ [新消息] 添加联系人失败:", error);
+                        });
+                    } else {
+                      console.warn("❌ [新消息] API 返回空数据，无法创建会话");
+                    }
+                  } catch (error) {
+                    console.error("❌ [新消息] 请求 API 补齐数据失败:", error);
+                  }
+                } else {
+                  console.log("✅ [新消息] 联系人已存在:", {
+                    id: existingContact.id,
+                    nickname: existingContact.nickname,
+                    avatar: existingContact.avatar ? "有" : "无",
+                  });
+                }
+
+                // 3. 从数据库获取最新的会话信息
                 const updatedSession = await Promise.race([
                   MessageManager.getSessionByContactId(userId, sessionId, type),
                   new Promise<null>(resolve =>
@@ -191,7 +403,6 @@ const messageHandlers: Record<string, MessageHandler> = {
               }
             } catch (error) {
               console.error("更新SessionStore失败:", error);
-              // 即使更新失败，也发送事件通知（降级处理）
             }
 
             // 发送自定义事件通知MessageList组件
@@ -233,8 +444,7 @@ const messageHandlers: Record<string, MessageHandler> = {
       async () => {
         try {
           const contactStore = useContactStoreNew.getState();
-          const userId =
-            useCustomerStore.getState().currentCustomer?.userId || 0;
+          const userId = useUserStore.getState().user?.id || 0;
 
           if (!userId) {
             console.warn("CmdFriendInfoChanged: 用户未登录");
@@ -299,9 +509,24 @@ const messageHandlers: Record<string, MessageHandler> = {
   },
 
   CmdDownloadVideoResult: message => {
-    // 在这里添加具体的处理逻辑
+    const { setVideoUrl } = getWeChatStoreMethods();
+    const messageId = message.friendMessageId || message.chatroomMessageId;
+
     console.log("视频下载结果:", message);
-    // setVideoUrl(message.friendMessageId, message.url);
+    if (!messageId || !message.url) {
+      return;
+    }
+
+    setVideoUrl(messageId, message.url);
+    dataProcessing({
+      type: "CmdDownloadVideoResult",
+      wechatAccountId: message.wechatAccountId || 1,
+      friendMessageId: message.friendMessageId,
+      chatroomMessageId: message.chatroomMessageId,
+      url: message.url,
+    }).catch(error => {
+      console.error("回写视频下载地址失败:", error);
+    });
   },
   CmdDownloadFileResult: message => {
     const { setFileDownloadUrl, setFileDownloading } = getWeChatStoreMethods();
@@ -319,6 +544,15 @@ const messageHandlers: Record<string, MessageHandler> = {
     }
 
     setFileDownloadUrl(messageId, message.url);
+    dataProcessing({
+      type: "CmdDownloadFileResult",
+      wechatAccountId: message.wechatAccountId || 1,
+      friendMessageId: message.friendMessageId,
+      chatroomMessageId: message.chatroomMessageId,
+      url: message.url,
+    }).catch(error => {
+      console.error("回写文件下载地址失败:", error);
+    });
   },
 
   CmdFetchMomentResult: message => {

src/utils/dbAction/contact.ts

@@ -120,21 +120,28 @@ export class ContactManager {
   }
 
   /**
-   * 同步联系人数据
+   * 同步联系人数据（以 API 为准，自动删除本地多余数据）
    */
   static async syncContacts(
     userId: number,
     serverContacts: any[],
-  ): Promise<void> {
+  ): Promise<{ added: number; updated: number; deleted: number }> {
     try {
-      // 获取本地联系人
+      // 1. 获取本地联系人
       const localContacts = await this.getUserContacts(userId);
       const localContactMap = new Map(localContacts.map(c => [c.serverId, c]));
 
-      // 处理服务器联系人
+      // 2. 创建服务器联系人映射
+      const serverContactMap = new Map(
+        serverContacts.map(c => [c.serverId, c])
+      );
+
+      // 3. 计算差异
       const contactsToAdd: Contact[] = [];
       const contactsToUpdate: Contact[] = [];
+      const contactsToDelete: string[] = [];
 
+      // 检查新增和更新
       for (const serverContact of serverContacts) {
         const localContact = localContactMap.get(serverContact.serverId);
 
@@ -159,7 +166,34 @@ export class ContactManager {
         }
       }
 
-      // 执行数据库操作
+      // ✅ 检查需要删除的联系人（本地有但服务器没有）
+      for (const localContact of localContacts) {
+        if (!serverContactMap.has(localContact.serverId)) {
+          contactsToDelete.push(localContact.serverId);
+        }
+      }
+
+      // ⚠️ 安全检查：防止误删
+      const serverTotal = serverContacts.length;
+      const localTotal = localContacts.length;
+
+      if (serverTotal === 0 && localTotal > 50) {
+        console.warn("⚠️ [联系人同步] 安全检查失败: 服务器返回空数据，但本地有大量数据");
+        console.warn(`⚠️ 本地: ${localTotal} 条, 服务器: ${serverTotal} 条`);
+        console.warn("⚠️ 可能是 API 异常，跳过本次同步以防止误删");
+        return { added: 0, updated: 0, deleted: 0 };
+      }
+
+      // 警告大量删除
+      if (contactsToDelete.length > 0) {
+        const deleteRatio = contactsToDelete.length / localTotal;
+        if (deleteRatio > 0.3) {
+          console.warn(`⚠️ [联系人同步] 本次将删除 ${(deleteRatio * 100).toFixed(1)}% 的联系人数据`);
+          console.warn(`⚠️ 删除: ${contactsToDelete.length} 条, 本地总数: ${localTotal} 条`);
+        }
+      }
+
+      // 4. 执行数据库操作
       if (contactsToAdd.length > 0) {
         await this.addContacts(contactsToAdd);
       }
@@ -170,11 +204,38 @@ export class ContactManager {
         }
       }
 
+      // ✅ 执行删除操作
+      if (contactsToDelete.length > 0) {
+        console.log(
+          `🗑️ [联系人同步] 检测到 ${contactsToDelete.length} 个本地联系人在服务器不存在，准备删除`,
+        );
+
+        let deletedCount = 0;
+        for (const serverId of contactsToDelete) {
+          try {
+            await contactUnifiedService.delete(serverId);
+            deletedCount++;
+          } catch (error) {
+            console.error(`❌ [联系人同步] 删除失败: ${serverId}`, error);
+          }
+        }
+
+        console.log(`✅ [联系人同步] 实际删除: ${deletedCount} 条`);
+      }
+
+      const result = {
+        added: contactsToAdd.length,
+        updated: contactsToUpdate.length,
+        deleted: contactsToDelete.length,
+      };
+
       console.log(
-        `同步联系人完成: 新增${contactsToAdd.length}个, 更新${contactsToUpdate.length}个`,
+        `✅ [联系人同步] 完成: 新增${result.added}个, 更新${result.updated}个, 删除${result.deleted}个`,
       );
+
+      return result;
     } catch (error) {
-      console.error("同步联系人失败:", error);
+      console.error("❌ [联系人同步] 失败:", error);
       throw error;
     }
   }

src/utils/messagePreview.ts

@@ -0,0 +1,250 @@
+/**
+ * 消息预览格式化工具
+ * 用于会话列表中显示消息预览，参考 会话列表预览消息规则.md
+ */
+
+// 图片扩展名正则
+const IMAGE_EXT_REGEX = /\.(jpg|jpeg|png|gif|webp|bmp|svg)$/i;
+
+// 视频扩展名正则
+const VIDEO_EXT_REGEX = /\.(mp4|avi|mov|wmv|flv|mkv|webm|m4v)$/i;
+
+// 音频扩展名正则
+const AUDIO_EXT_REGEX = /\.(mp3|wav|wma|flac|aac|ogg|m4a)$/i;
+
+// 阿里云 OSS 前缀
+const ALIYUN_OSS_PREFIX = 'https://ac-weremote-s2.oss-cn-shenzhen.aliyuncs.com';
+
+/**
+ * 尝试解析 JSON
+ */
+const tryParseJson = (content: string): Record<string, any> | null => {
+  try {
+    return JSON.parse(content);
+  } catch {
+    return null;
+  }
+};
+
+/**
+ * 从 XML 字符串中提取 title
+ */
+const extractTitleFromXml = (xmlString: string): string | null => {
+  try {
+    // 尝试提取 <title> 标签内容
+    const titleMatch = xmlString.match(
+      /<title>([^<]*(?:<!\[CDATA\[[^\]]*\]\]>[^<]*)*)<\/title>/i
+    );
+    if (titleMatch && titleMatch[1]) {
+      let title = titleMatch[1];
+      // 处理 CDATA
+      title = title.replace(/<!\[CDATA\[(.*?)\]\]>/gi, '$1');
+      // 去除首尾空白
+      title = title.trim();
+      if (title) {
+        return title;
+      }
+    }
+  } catch {
+    // 解析失败，返回 null
+  }
+  return null;
+};
+
+/**
+ * 检查是否为阿里云 OSS 链接，并判断类型
+ */
+const checkAliyunOssLink = (url: string): '图片' | '视频' | '音频' | null => {
+  if (!url.includes(ALIYUN_OSS_PREFIX)) {
+    return null;
+  }
+
+  // 根据文件扩展名判断类型
+  if (IMAGE_EXT_REGEX.test(url)) {
+    return '图片';
+  }
+  if (VIDEO_EXT_REGEX.test(url)) {
+    return '视频';
+  }
+  if (AUDIO_EXT_REGEX.test(url)) {
+    return '音频';
+  }
+
+  return null;
+};
+
+/**
+ * 检查是否为小程序消息
+ */
+const isMiniProgramMessage = (jsonData: Record<string, any>): boolean => {
+  // 检查是否有 contentXml 且包含 appid
+  if (jsonData.contentXml && typeof jsonData.contentXml === 'string') {
+    const xmlContent = jsonData.contentXml;
+    // 检查是否包含 <appmsg appid= 或 <appid>
+    if (xmlContent.includes('<appmsg') && xmlContent.includes('appid')) {
+      return true;
+    }
+  }
+
+  // 检查是否有 type: "miniprogram"
+  if (jsonData.type === 'miniprogram') {
+    return true;
+  }
+
+  // 检查是否有 weappinfo 对象
+  if (jsonData.weappinfo || jsonData.weappInfo) {
+    return true;
+  }
+
+  return false;
+};
+
+/**
+ * 格式化消息预览内容
+ * @param content 原始消息内容
+ * @returns 格式化后的预览文本
+ */
+export function formatMessagePreview(
+  content: string | null | undefined
+): string {
+  // 处理空值
+  if (!content || typeof content !== 'string') {
+    return '暂无消息';
+  }
+
+  const trimmed = content.trim();
+
+  if (!trimmed) {
+    return '暂无消息';
+  }
+
+  // 1. 检查是否为阿里云 OSS 链接（纯链接字符串）
+  const aliyunOssType = checkAliyunOssLink(trimmed);
+  if (aliyunOssType) {
+    return `[${aliyunOssType}]`;
+  }
+
+  // 2. 尝试解析 JSON
+  const jsonData = tryParseJson(trimmed);
+
+  if (jsonData && typeof jsonData === 'object') {
+    // 2.1 检查是否为小程序消息
+    if (isMiniProgramMessage(jsonData)) {
+      return '[小程序消息]';
+    }
+
+    // 2.2 检查 JSON 中是否有阿里云 OSS 链接
+    // 遍历 JSON 对象的所有值，查找链接
+    const findAliyunOssLink = (obj: any): string | null => {
+      if (typeof obj === 'string' && obj.includes(ALIYUN_OSS_PREFIX)) {
+        return obj;
+      }
+      if (typeof obj === 'object' && obj !== null) {
+        for (const value of Object.values(obj)) {
+          const link = findAliyunOssLink(value);
+          if (link) {
+            return link;
+          }
+        }
+      }
+      return null;
+    };
+
+    const ossLink = findAliyunOssLink(jsonData);
+    if (ossLink) {
+      const ossType = checkAliyunOssLink(ossLink);
+      if (ossType) {
+        return `[${ossType}]`;
+      }
+    }
+
+    // 2.3 尝试从 contentXml 中提取 title
+    if (jsonData.contentXml && typeof jsonData.contentXml === 'string') {
+      const title = extractTitleFromXml(jsonData.contentXml);
+      if (title) {
+        // 限制长度
+        const maxLength = 50;
+        return title.length > maxLength
+          ? title.substring(0, maxLength) + '...'
+          : title;
+      }
+    }
+
+    // 2.4 检查 JSON 是否过长或被截断
+    // 如果 JSON 字符串很长（超过 500 字符），可能被截断
+    if (trimmed.length > 500) {
+      // 尝试提取 title
+      const title = extractTitleFromXml(trimmed);
+      if (title) {
+        const maxLength = 50;
+        return title.length > maxLength
+          ? title.substring(0, maxLength) + '...'
+          : title;
+      }
+      return '[文本过长]';
+    }
+
+    // 2.5 尝试从 JSON 中提取有意义的信息
+    if (jsonData.title) {
+      const title = String(jsonData.title);
+      const maxLength = 50;
+      return title.length > maxLength
+        ? title.substring(0, maxLength) + '...'
+        : title;
+    }
+
+    if (jsonData.content) {
+      const content = String(jsonData.content);
+      const maxLength = 50;
+      return content.length > maxLength
+        ? content.substring(0, maxLength) + '...'
+        : content;
+    }
+
+    // 2.6 无法识别的 JSON，返回通用提示
+    return '[消息]';
+  }
+
+  // 3. 检查是否为普通 HTTP 链接
+  if (/^https?:\/\//i.test(trimmed)) {
+    // 检查是否为图片链接
+    if (IMAGE_EXT_REGEX.test(trimmed)) {
+      return '[图片]';
+    }
+    // 检查是否为视频链接
+    if (VIDEO_EXT_REGEX.test(trimmed)) {
+      return '[视频]';
+    }
+    // 检查是否为音频链接
+    if (AUDIO_EXT_REGEX.test(trimmed)) {
+      return '[音频]';
+    }
+    // 普通链接
+    return '[链接]';
+  }
+
+  // 4. 检查是否为 XML 字符串（但没有被 JSON 包裹）
+  if (
+    trimmed.includes('<?xml') ||
+    trimmed.includes('<msg>') ||
+    trimmed.includes('<appmsg')
+  ) {
+    const title = extractTitleFromXml(trimmed);
+    if (title) {
+      const maxLength = 50;
+      return title.length > maxLength
+        ? title.substring(0, maxLength) + '...'
+        : title;
+    }
+    return '[文本过长]';
+  }
+
+  // 5. 普通文本消息
+  // 限制长度，避免过长文本影响显示
+  const maxLength = 50;
+  if (trimmed.length > maxLength) {
+    return trimmed.substring(0, maxLength) + '...';
+  }
+
+  return trimmed;
+}

src/utils/performance.ts

@@ -23,11 +23,7 @@ class PerformanceMonitor {
   /**
    * 测量函数执行时间
    */
-  measure<T>(
-    name: string,
-    fn: () => T,
-    metadata?: Record<string, any>,
-  ): T {
+  measure<T>(name: string, fn: () => T, metadata?: Record<string, any>): T {
     const start = performance.now();
     try {
       const result = fn();
@@ -83,15 +79,6 @@ class PerformanceMonitor {
     if (this.results.length > this.maxResults) {
       this.results.shift();
     }
-
-    // 开发环境下输出到控制台
-    if (import.meta.env.DEV) {
-      const color = duration > 100 ? "🔴" : duration > 50 ? "🟡" : "🟢";
-      console.log(
-        `${color} [Performance] ${name}: ${duration.toFixed(2)}ms`,
-        metadata || "",
-      );
-    }
   }
 
   /**

src/utils/sentry/index.ts

@@ -8,7 +8,10 @@ import { replayIntegration } from "@sentry/react";
  */
 export const initSentry = () => {
   if (!import.meta.env.VITE_SENTRY_DSN) {
-    console.warn("Sentry DSN 未配置，跳过初始化");
+    // 仅在开发环境显示警告
+    if (import.meta.env.DEV) {
+      console.warn("Sentry DSN 未配置，跳过初始化");
+    }
     return;
   }
 

提示词/代码分析报告.md

@@ -0,0 +1,561 @@
+# 触客宝（Touchkebao）代码分析报告
+
+## 📋 项目概览
+
+**项目名称**: 触客宝（Touchkebao / Cunkebao）
+**版本**: 3.0.0
+**项目类型**: 企业级微信客服工作台（SPA 单页应用）
+**主要功能**: 微信客服管理、AI 智能回复、客户管理、内容管理、数据统计等
+
+---
+
+## 🛠️ 技术栈分析
+
+### 核心框架
+- **React 18.2.0** + **TypeScript 5.4.5** - 现代化前端框架
+- **Vite 7.0.5** - 新一代构建工具，提供快速开发体验
+- **React Router v6.20.0** - 路由管理
+
+### UI 组件库
+- **Ant Design 5.13.1** - PC 端 UI 组件库
+- **Ant Design Mobile 5.39.1** - 移动端 UI 组件库
+- **@ant-design/icons 5.6.1** - 图标库
+
+### 状态管理
+- **Zustand 5.0.6** - 轻量级状态管理库
+  - 自定义持久化封装（`createPersistStore`）
+  - 支持 localStorage、sessionStorage、加密存储等多种持久化策略
+
+### 数据层
+- **Axios 1.6.7** - HTTP 请求库
+  - 统一封装在 `api/request.ts`
+  - 支持请求防抖、错误处理、Token 自动注入
+- **Dexie 4.2.0** - IndexedDB 封装库
+  - 用于本地数据缓存
+  - 支持多用户数据隔离（每个用户独立数据库）
+
+### 数据可视化
+- **ECharts 5.6.0** + **echarts-for-react 3.0.2** - 图表库
+  - 用于数据看板、统计图表展示
+
+### 性能优化
+- **react-window 1.8.11** - 虚拟滚动
+  - 用于长列表性能优化（会话列表、消息列表、联系人列表）
+
+### 数据请求
+- **@tanstack/react-query 5.90.12** - 服务端状态管理
+  - 统一管理服务端数据请求、缓存、同步
+
+### 监控与错误处理
+- **@sentry/react 10.29.0** - 错误监控
+  - 全局错误边界
+  - 自动上报错误日志
+
+### 工具库
+- **dayjs 1.11.13** - 日期处理
+- **vconsole 3.15.1** - 移动端调试工具
+- **xmldom 0.6.0** - XML 解析
+
+---
+
+## 📁 项目结构分析
+
+### 目录架构
+
+```
+Touchkebao2/
+├── src/
+│   ├── api/                    # API 接口层
+│   │   ├── request.ts         # Axios 统一封装
+│   │   ├── common.ts          # 通用接口（文件上传等）
+│   │   ├── ai.ts              # AI 相关接口
+│   │   └── module/            # 业务模块 API
+│   │       ├── wechat.ts     # 微信相关接口
+│   │       └── group.ts      # 分组/标签接口
+│   │
+│   ├── components/            # 通用组件库
+│   │   ├── AccountSelection/ # 账号选择器
+│   │   ├── DeviceSelection/  # 设备选择器
+│   │   ├── EmojiSeclection/   # 表情选择器
+│   │   ├── Upload/           # 文件上传组件（多种类型）
+│   │   ├── VirtualContactList/ # 虚拟滚动联系人列表
+│   │   ├── VirtualMessageList/ # 虚拟滚动消息列表
+│   │   ├── InfiniteList/     # 无限滚动列表
+│   │   └── ...               # 其他通用组件
+│   │
+│   ├── pages/                 # 页面组件
+│   │   ├── login/            # 登录页
+│   │   ├── guide/            # 引导页
+│   │   ├── pc/               # PC 端页面
+│   │   │   └── ckbox/        # 主工作台
+│   │   │       ├── weChat/   # 微信客服工作台（核心）
+│   │   │       ├── dashboard/ # 数据看板
+│   │   │       └── powerCenter/ # 能力中心
+│   │   │           ├── customer-management/    # 客户管理
+│   │   │           ├── communication-record/   # 沟通记录
+│   │   │           ├── content-management/      # 内容管理
+│   │   │           ├── ai-training/            # AI 训练
+│   │   │           ├── auto-greeting/          # 自动欢迎
+│   │   │           ├── message-push-assistant/ # 消息推送助手
+│   │   │           └── data-statistics/        # 数据统计
+│   │   └── mobile/           # 移动端页面
+│   │
+│   ├── store/                 # 状态管理
+│   │   ├── module/           # 业务模块 Store
+│   │   │   ├── user.ts      # 用户状态
+│   │   │   ├── app.ts       # 应用状态
+│   │   │   ├── settings.ts  # 设置状态
+│   │   │   ├── websocket/   # WebSocket 状态
+│   │   │   └── weChat/      # 微信业务状态
+│   │   ├── createPersistStore.ts # 持久化 Store 创建工具
+│   │   └── persistUtils.ts  # 持久化工具函数
+│   │
+│   ├── router/                # 路由配置
+│   │   ├── index.tsx        # 路由入口（动态加载模块）
+│   │   ├── permissionRoute.tsx # 权限路由守卫
+│   │   └── module/          # 路由模块
+│   │       ├── common.tsx  # 通用路由
+│   │       ├── pc.tsx      # PC 端路由
+│   │       └── mobile.tsx  # 移动端路由
+│   │
+│   ├── utils/                # 工具函数
+│   │   ├── db.ts            # IndexedDB 数据库封装
+│   │   ├── apiUrl.ts        # API URL 配置
+│   │   ├── common.ts        # 通用工具函数
+│   │   ├── errorHandler.ts  # 错误处理
+│   │   └── ...              # 其他工具
+│   │
+│   ├── hooks/                # 自定义 Hooks
+│   │   └── weChat/          # 微信相关 Hooks
+│   │
+│   ├── providers/            # Context Providers
+│   │   └── QueryProvider.tsx # React Query Provider
+│   │
+│   ├── types/                # TypeScript 类型定义
+│   │   ├── device.ts        # 设备类型
+│   │   └── weChat.ts        # 微信类型
+│   │
+│   ├── styles/               # 全局样式
+│   │   └── global.scss      # 全局样式文件
+│   │
+│   ├── App.tsx               # 根组件
+│   └── main.tsx             # 应用入口
+│
+├── public/                   # 静态资源
+│   ├── assets/              # 资源文件（表情、图标等）
+│   └── websdk.js            # Web SDK
+│
+└── 提示词/                   # 项目文档
+    ├── 功能架构.md          # 功能架构文档
+    ├── 技术栈.md            # 技术栈说明
+    └── ...                  # 其他文档
+```
+
+---
+
+## 🏗️ 架构设计分析
+
+### 1. 应用初始化流程
+
+```typescript
+main.tsx
+  ├── 初始化 Sentry（错误监控）
+  ├── 设置 dayjs 中文
+  ├── 初始化数据库（从持久化用户恢复）
+  └── 渲染应用
+      ├── ConfigProvider (Antd 中文配置)
+      ├── QueryProvider (React Query)
+      └── App
+          ├── Sentry.ErrorBoundary
+          ├── AppRouter
+          └── UpdateNotification
+```
+
+### 2. 路由系统
+
+**特点**:
+- 使用 `import.meta.glob` 动态加载路由模块
+- 支持权限控制（`PermissionRoute`）
+- 支持角色校验（`requiredRole`）
+- 自动处理 404 路由
+
+**路由结构**:
+- `/` → 首页（根据设备跳转 PC/移动端）
+- `/login` → 登录页
+- `/pc/*` → PC 端工作台
+- `/mobile/*` → 移动端页面
+
+### 3. 状态管理架构
+
+**Store 组织**:
+- **用户状态** (`user.ts`): 登录信息、Token、用户信息
+- **应用状态** (`app.ts`): 全局 loading、布局配置
+- **设置状态** (`settings.ts`): 主题、个性化设置
+- **WebSocket 状态** (`websocket.ts`): 连接状态、消息推送
+- **微信业务状态** (`weChat/*`): 会话、消息、联系人、AI 相关
+
+**持久化策略**:
+- 支持 localStorage、sessionStorage
+- 支持加密存储、压缩存储
+- 支持 TTL（过期时间）存储
+- 自动清理旧数据
+
+### 4. 数据访问层
+
+**API 封装** (`api/request.ts`):
+- 统一请求拦截器（Token 自动注入）
+- 统一响应拦截器（错误处理、401 跳转）
+- 请求防抖机制（已禁用，但保留接口）
+- 错误白名单（某些接口失败不提示）
+
+**本地数据库** (`utils/db.ts`):
+- 使用 Dexie 封装 IndexedDB
+- 多用户数据隔离（每个用户独立数据库）
+- 统一表结构设计：
+  - `ChatSession` - 会话表（统一好友/群聊）
+  - `Contact` - 联系人表（统一好友/群聊）
+  - `ContactLabelMap` - 标签映射表
+  - `UserLoginRecord` - 登录记录表
+- 使用 `serverId` 作为主键，直接对应接口 ID
+- 支持复合索引，优化查询性能
+
+### 5. 核心业务：微信客服工作台
+
+**页面布局**:
+```
+┌─────────────────────────────────────────┐
+│           顶部导航 (NavCommon)           │
+├──────────┬──────────────────┬──────────┤
+│          │                  │          │
+│ 左侧边栏  │   中间聊天窗口    │ 右侧信息栏│
+│          │                  │          │
+│ - 会话列表│ - 消息列表       │ - 客户画像│
+│ - 好友/群 │ - 输入区         │ - 朋友圈  │
+│ - 朋友圈  │ - 表情/文件上传  │ - 快捷话术│
+│          │ - AI 建议        │          │
+└──────────┴──────────────────┴──────────┘
+```
+
+**核心功能**:
+1. **会话管理**
+   - 虚拟滚动列表（支持大量会话）
+   - 未读数显示
+   - 置顶功能
+   - 按时间/置顶排序
+
+2. **消息处理**
+   - 支持多种消息类型（文本、图片、语音、视频、文件、小程序、红包等）
+   - 虚拟滚动消息列表
+   - 消息搜索
+   - 消息转发
+   - 分页加载历史消息
+
+3. **AI 智能回复**
+   - AI 辅助模式：生成建议文案，用户确认后发送
+   - AI 接管模式：自动生成并发送回复
+   - 消息批量处理（3秒延迟，减少请求）
+   - 16ms 批量更新队列（优化渲染性能）
+
+4. **WebSocket 实时通信**
+   - 接收新消息
+   - 发送消息
+   - 连接状态管理
+   - 自动重连机制
+
+---
+
+## 💡 核心特性分析
+
+### 1. 性能优化
+
+**虚拟滚动**:
+- 使用 `react-window` 实现虚拟滚动
+- 应用于会话列表、消息列表、联系人列表
+- 支持大量数据渲染（万级数据）
+
+**消息批量更新**:
+- 16ms 批量更新队列（约一帧时间）
+- 减少 React re-render 次数
+- 提升消息接收时的性能
+
+**代码分割**:
+- Vite 构建配置中设置了 `manualChunks`
+- 按框架、UI库、工具库、图表库分离
+- 减少初始加载体积
+
+### 2. 数据缓存策略
+
+**IndexedDB 缓存**:
+- 会话列表、联系人列表本地缓存
+- 支持离线查看历史数据
+- 多用户数据隔离
+
+**React Query 缓存**:
+- 服务端数据自动缓存
+- 支持数据同步、失效重验证
+- 减少重复请求
+
+### 3. 错误处理
+
+**全局错误边界**:
+- Sentry.ErrorBoundary 包裹整个应用
+- 自动上报错误到 Sentry
+- 友好的错误提示界面
+
+**API 错误处理**:
+- 统一错误拦截器
+- 401 自动跳转登录
+- 错误白名单机制（某些接口静默失败）
+
+### 4. 用户体验
+
+**响应式设计**:
+- PC 端使用 Ant Design
+- 移动端使用 Ant Design Mobile
+- 自动识别设备类型
+
+**加载状态**:
+- 全局 loading 状态管理
+- 骨架屏（Skeleton）组件
+- 友好的加载提示
+
+**更新提醒**:
+- `UpdateNotification` 组件
+- 检测版本更新
+- 支持自动刷新
+
+---
+
+## 🔍 代码质量分析
+
+### 优点
+
+1. **架构清晰**
+   - 模块化设计，职责分离明确
+   - 统一的代码组织方式
+   - 良好的目录结构
+
+2. **类型安全**
+   - 全面使用 TypeScript
+   - 定义了完整的类型系统
+   - 减少运行时错误
+
+3. **可维护性**
+   - 统一的 API 封装
+   - 统一的组件设计模式
+   - 完善的工具函数
+
+4. **性能优化**
+   - 虚拟滚动
+   - 批量更新
+   - 代码分割
+
+5. **错误处理**
+   - Sentry 错误监控
+   - 全局错误边界
+   - 友好的错误提示
+
+### 潜在问题与建议
+
+1. **TypeScript 配置**
+   - `strict: false` 和 `noImplicitAny: false`
+   - 建议逐步开启严格模式，提升类型安全
+
+2. **请求防抖**
+   - 当前已禁用（`DEFAULT_DEBOUNCE_GAP = 0`）
+   - 如果不需要，建议移除相关代码
+
+3. **数据库版本管理**
+   - 当前有版本升级逻辑（v1 → v2）
+   - 建议建立更完善的迁移机制
+
+4. **代码重复**
+   - 某些组件可能存在重复逻辑
+   - 建议提取公共逻辑到 Hooks 或工具函数
+
+5. **测试覆盖**
+   - 未看到测试文件
+   - 建议添加单元测试和集成测试
+
+6. **文档完善**
+   - 虽然有文档目录，但代码注释可以更完善
+   - 建议添加 JSDoc 注释
+
+---
+
+## 📊 依赖分析
+
+### 生产依赖（26个）
+- **核心框架**: React、React DOM、React Router
+- **UI 库**: Ant Design、Ant Design Mobile
+- **状态管理**: Zustand
+- **数据请求**: Axios、React Query
+- **数据库**: Dexie
+- **图表**: ECharts
+- **性能**: react-window
+- **监控**: Sentry
+- **工具**: dayjs、vconsole、xmldom
+
+### 开发依赖（14个）
+- **构建工具**: Vite、@vitejs/plugin-react
+- **类型检查**: TypeScript、@types/*
+- **代码规范**: ESLint、Prettier
+- **样式处理**: Sass、PostCSS、postcss-pxtorem
+
+**依赖健康度**: ✅ 良好
+- 所有依赖都是最新或较新版本
+- 无已知安全漏洞（需定期检查）
+
+---
+
+## 🎯 业务功能模块
+
+### 1. 微信客服工作台
+- ✅ 会话列表管理
+- ✅ 实时消息收发
+- ✅ 多种消息类型支持
+- ✅ AI 智能回复
+- ✅ 客户信息展示
+- ✅ 朋友圈动态
+
+### 2. 客户管理
+- ✅ 客户列表
+- ✅ 客户标签管理
+- ✅ 客户分组
+- ✅ 客户搜索
+
+### 3. 内容管理
+- ✅ 朋友圈发布
+- ✅ 定时发布
+- ✅ 内容预览
+
+### 4. AI 训练
+- ✅ 话术配置
+- ✅ AI 模型参数设置
+
+### 5. 自动欢迎
+- ✅ 自动欢迎规则配置
+- ✅ 规则开关管理
+
+### 6. 消息推送助手
+- ✅ 创建推送任务
+- ✅ 多步骤向导
+- ✅ 推送历史
+
+### 7. 数据统计
+- ✅ 数据看板
+- ✅ 图表展示
+- ✅ 统计分析
+
+### 8. 沟通记录
+- ✅ 聊天记录查询
+- ✅ 记录搜索
+
+---
+
+## 🔐 安全性分析
+
+### 已实现的安全措施
+
+1. **Token 管理**
+   - Token 存储在 localStorage
+   - 请求自动注入 Token
+   - 401 自动清理 Token 并跳转登录
+
+2. **权限控制**
+   - 路由级别权限控制
+   - 角色校验（`isAdmin`）
+   - 未登录自动跳转
+
+3. **数据隔离**
+   - 多用户数据库隔离
+   - 每个用户独立 IndexedDB
+
+4. **错误监控**
+   - Sentry 错误上报
+   - 不暴露敏感信息
+
+### 建议改进
+
+1. **Token 存储**
+   - 考虑使用 httpOnly Cookie（需后端配合）
+   - 或使用更安全的存储方式
+
+2. **XSS 防护**
+   - 确保用户输入内容经过转义
+   - 使用 React 的默认 XSS 防护
+
+3. **CSRF 防护**
+   - 确保后端实现 CSRF Token 验证
+
+---
+
+## 📈 性能指标
+
+### 构建优化
+- ✅ 代码分割（manualChunks）
+- ✅ 压缩（esbuild minify）
+- ✅ 资源优化（chunkFileNames 配置）
+
+### 运行时优化
+- ✅ 虚拟滚动（大量列表）
+- ✅ 批量更新（消息接收）
+- ✅ 防抖/节流（已禁用但保留接口）
+- ✅ React Query 缓存
+
+### 建议进一步优化
+- 考虑使用 React.lazy 进行路由懒加载
+- 图片懒加载
+- 服务端渲染（SSR）或静态生成（SSG）（如需要）
+
+---
+
+## 🚀 部署与构建
+
+### 构建命令
+```bash
+pnpm build        # 构建生产版本
+pnpm build:check  # 类型检查 + 构建
+pnpm preview      # 预览构建结果
+```
+
+### 开发命令
+```bash
+pnpm dev          # 启动开发服务器（端口 8888）
+```
+
+### 代码质量
+```bash
+pnpm lint         # ESLint 检查并自动修复
+pnpm lint:check   # ESLint 检查（不修复）
+pnpm format       # Prettier 格式化
+pnpm format:check # Prettier 检查
+```
+
+---
+
+## 📝 总结
+
+### 项目优势
+1. ✅ **现代化技术栈**: React 18 + TypeScript + Vite
+2. ✅ **架构清晰**: 模块化设计，职责分离
+3. ✅ **性能优化**: 虚拟滚动、批量更新、代码分割
+4. ✅ **用户体验**: 响应式设计、错误处理、加载状态
+5. ✅ **可维护性**: 统一的代码组织、类型安全
+
+### 改进建议
+1. 🔧 逐步开启 TypeScript 严格模式
+2. 🔧 添加单元测试和集成测试
+3. 🔧 完善代码注释和文档
+4. 🔧 优化 Token 存储安全性
+5. 🔧 考虑路由懒加载
+
+### 整体评价
+**评分: ⭐⭐⭐⭐⭐ (4.5/5)**
+
+这是一个**架构良好、功能完善、性能优化到位**的企业级前端项目。代码组织清晰，技术栈现代化，具备良好的可维护性和扩展性。建议在类型安全、测试覆盖和文档完善方面继续改进。
+
+---
+
+*报告生成时间: 2024年*
+*分析工具: Cursor AI Assistant*

提示词/功能架构.md

@@ -1,495 +0,0 @@
-# 触客宝（Touchkebao）功能架构
-
-> 本文档描述当前 Touchkebao 前端工程在 **页面路由、状态管理、数据访问、本地缓存和核心业务模块** 维度的功能架构，并附带 ASCII 线框图，便于沟通与扩展设计。
-
-## 1. 技术栈与整体结构
-
-- **基础框架**
-  - **React 18 + TypeScript**：单页应用（SPA）
-  - **Vite**：构建与开发服务器（入口 `src/main.tsx`）
-  - **UI 组件**
-    - PC 端：`antd`
-    - 移动端：`antd-mobile`
-  - **状态管理**：`zustand`（含自定义持久化封装）
-  - **请求与数据**
-    - HTTP：`axios` + 统一封装 `api/request.ts`
-    - 本地缓存：`Dexie`（IndexedDB，统一封装在 `utils/db.ts`）
-  - **监控与稳定性**
-    - `@sentry/react`：初始化于 `main.tsx`，并通过 `App.tsx` 中的 `ErrorBoundary` 做兜底
-    - 自定义错误提示与 Toast（`antd-mobile`）
-
-- **入口初始化流程**
-  - `src/main.tsx`
-    - 初始化 Sentry（必须在其他逻辑前）
-    - 设置 `dayjs` 中文
-    - 调用 `initializeDatabaseFromPersistedUser()`：
-      - 从持久化的 user-store 中恢复上次登录用户
-      - 以 `userId` 为维度初始化 Dexie 数据库
-    - 渲染根组件：
-      - `ConfigProvider`（antd 中文配置）
-      - `QueryProvider`（React Query 统一数据请求层）
-      - `App`
-  - `src/App.tsx`
-    - 使用 `Sentry.ErrorBoundary` 包裹整个应用
-    - 内部渲染：
-      - `AppRouter`（统一路由系统）
-      - `UpdateNotification`（版本更新提醒，支持自动刷新）
-
----
-
-## 2. 路由 & 页面模块架构
-
-路由集中于 `src/router` 目录，通过 `import.meta.glob` 动态加载模块。
-
-### 2.1 路由整体
-
-- **核心文件**
-  - `router/index.tsx`
-    - 使用 `import.meta.glob("./module/*.{ts,tsx}", { eager: true })` 自动导入所有路由模块
-    - 聚合得到 `routes: RouteObject[]`
-    - 对 `auth: true` 的路由包装 `PermissionRoute`
-    - 追加通配符 `*` → `404` 页
-    - 使用 `BrowserRouter + useRoutes` 渲染
-  - `router/permissionRoute.tsx`
-    - 依赖 `useUserStore` 提供的 `user` 与 `isLoggedIn`
-    - 未登录时记录当前 `pathname + search`，跳转至 `/login?returnUrl=...`
-    - 当路由声明 `requiredRole` 时，校验 `user.isAdmin === 1`，否则跳转首页 `/`
-
-- **路由模块划分**
-  - `router/module/common.tsx`
-    - `/` → `Index` 首页：根据终端类型跳转：
-      - 移动端 → `/mobile/dashboard`
-      - PC 端 → `/pc/weChat`
-    - `/login` → 登录页（免登录）
-    - `/guide` → 产品引导页（需要登录）
-    - `/init` → iframe 初始化页（嵌入其他系统对接）
-  - `router/module/pc.tsx`
-    - `/pc` → `CkboxPage`（PC 端总布局，内含顶部导航）
-      - 子路由（均需要登录）：
-        - `/pc/commonConfig` → 通用配置中心
-        - `/pc/dashboard` → 数据看板
-        - `/pc/weChat` → 微信客服工作台（核心聊天场景）
-        - `/pc/powerCenter` → 能力中心（导航页）
-        - `/pc/powerCenter/customer-management` → 客户管理
-        - `/pc/powerCenter/communication-record` → 沟通记录
-        - `/pc/powerCenter/content-management` → 内容管理 & 朋友圈发布
-        - `/pc/powerCenter/ai-training` → AI 训练/话术配置
-        - `/pc/powerCenter/auto-greeting` → 自动欢迎与自动打招呼
-        - `/pc/powerCenter/message-push-assistant` → 消息推送助手
-        - `/pc/powerCenter/message-push-assistant/create-push-task/:pushType` → 新建推送任务多步骤向导
-        - `/pc/powerCenter/data-statistics` → 数据统计
-        - `/pc/powerCenter/push-history` → 推送历史
-  - `router/module/mobile.tsx`
-    - `/profile` → 移动端个人中心/设置页（需要登录）
-
-### 2.2 页面布局与导航
-
-- **PC 布局（`components/Layout`）**
-  - `Layout.tsx / LayoutFiexd.tsx`
-  - 支持传入自定义 header（如 `NavCommon`）
-  - 标准结构：
-    - 顶部：产品标题、用户信息、全局操作区
-    - 中间：左右结构（侧边栏 + 主内容）
-
-- **PC 触客宝主页面（`pages/pc/ckbox/index.tsx` 及子模块）**
-  - `CkboxPage`：
-    - 使用 `Layout` 作为整体页面容器
-    - header 为 `NavCommon`（标题“触客宝”等）
-    - 中间区域通过 `<Outlet />` 渲染子路由页面
-
----
-
-## 3. 状态管理架构（Zustand）
-
-### 3.1 Store 组织方式
-
-- **统一出口**：`src/store/index.ts`
-  - 导出：
-    - `useUserStore`（用户）
-    - `useAppStore`（应用级状态）
-    - `useSettingsStore`（个性化设置）
-    - `useWebSocketStore`（WebSocket 连接与命令）
-    - 各种 `createPersistStore`、`persistUtils` 工具
-  - 提供：
-    - `getStores()`：一次性获取所有 store 状态
-    - `subscribeToAllStores()`：统一订阅所有 store 变更
-
-- **业务模块 Store（节选）**
-  - `store/module/user.ts`
-    - 用户信息（id、名字、角色、isAdmin 等）
-    - 登录状态 `isLoggedIn` 与 token
-    - 使用 `persist` 中间件，存入 localStorage
-  - `store/module/app.ts`
-    - 全局 loading、布局属性、全局配置开关等
-  - `store/module/settings.ts`
-    - 主题、表格密度等个性化设置
-  - `store/module/websocket/websocket.ts`
-    - WebSocket 连接状态（已连接/重连中等）
-    - `sendCommand` 封装（如 `CmdSendMessage`）
-  - `store/module/weChat/*`
-    - 好友/群列表、客户、当前选中会话
-    - 聊天消息、分页、群成员
-    - AI 对话相关状态与逻辑（见 6 章节）
-
-### 3.2 权限与登录态
-
-- `PermissionRoute` 通过 `useUserStore` 读取：
-  - `isLoggedIn`：控制是否自动跳转登录页
-  - `user.isAdmin`：用于路由级别的角色校验
-- 登录成功后：
-  - 持久化 user store，以便刷新后仍可恢复
-  - `initializeDatabaseFromPersistedUser` 读取该信息并初始化 IndexedDB
-
----
-
-## 4. 数据访问层（API 封装）
-
-### 4.1 通用请求封装（`api/request.ts`）
-
-- **Axios 实例配置**
-  - `baseURL`：优先取环境变量 `VITE_API_BASE_URL`，否则 `/api`
-  - 默认 `timeout`：20 秒
-  - 默认请求头：`Content-Type: application/json`
-  - 请求拦截器：
-    - 从 `useUserStore.getState()` 中读取 `token`
-    - 自动附加 `Authorization: Bearer <token>`
-
-- **响应拦截器逻辑**
-  - 统一假设服务端返回结构：`{ code, success, msg, data }`
-  - 判断业务成功：
-    - 优先看 `code === 200`
-    - 或 `success === true`
-    - 若都无，则认为是“透明透传”结构，直接返回原数据
-  - 业务失败处理：
-    - 如果 `code === 401`：
-      - 清理本地 `token`
-      - 计算当前路径 `pathname + search`
-      - 重定向到 `/login?redirect=当前路径`
-    - 其它错误：
-      - 根据 `ERROR_SILENT_URLS` 白名单控制是否显示错误 Toast
-      - 使用 `Toast.show({content: msg || "接口错误"})` 提示
-  - 网络错误：
-    - 仍带白名单控制
-    - 默认展示 `"网络异常"` 提示
-
-- **请求防抖机制**
-  - 使用 `debounceMap`（Map<key, timestamp>）记录请求
-  - key 由 `method + url + data` 组成
-  - 默认间隔 `DEFAULT_DEBOUNCE_GAP = 1000ms`
-  - 可通过 `config.debounce = false` 关闭
-  - 高频接口白名单 `NO_DEBOUNCE_URLS`（好友/群列表、消息列表）不走防抖
-
-- **统一导出函数**
-  - `request(url, data?, method = "GET", config?, debounceGap?)`
-    - 自动区分 GET（用 `params`）与非 GET（用 `data`）
-    - 自动处理 FormData（移除默认 `Content-Type`）
-
-### 4.2 文件上传封装（`api/common.ts`）
-
-- `uploadFile(file, uploadUrl = "/v1/attachment/upload")`
-  - 使用原生 `FormData` 封装文件
-  - 根据用户 token 设置 `Authorization` 头
-  - 返回后端 `data.url` 作为上传结果
-
-### 4.3 业务 API 模块
-
-- `api/ai.ts`
-  - `dataProcessing(params)`：新消息到达后进行预处理（发送到存客宝后台）
-  - `aiChat(params)`：根据上下文消息生成 AI 回复内容
-- `api/module/wechat.ts`
-  - 聊天消息列表、群成员、好友/群列表等接口
-- `api/module/group.ts`
-  - 分组/标签等管理类接口
-
----
-
-## 5. 本地数据库架构（IndexedDB + Dexie）
-
-### 5.1 数据库设计（`utils/db.ts`）
-
-- **数据库命名**
-  - 前缀：`CunkebaoDatabase`
-  - 最终库名：`CunkebaoDatabase_${userId}`
-  - 每个登录用户一个独立数据库，实现物理隔离
-
-- **核心表结构（统一 friend / group 模型）**
-  - `ChatSession`（会话表）
-    - `serverId`：主键（使用服务端的 id）
-    - `userId`：本地用户 ID，用于多用户隔离
-    - `type`：`"friend" | "group"`
-    - 通用字段：`wechatAccountId, nickname, avatar, content, lastUpdateTime` 等
-    - 配置字段：`config.unreadCount, config.top`
-    - 排序字段：`sortKey`
-    - 扩展字段：`extendFields`（字符串 JSON）
-  - `Contact`（统一联系人表）
-    - `serverId`：主键
-    - `userId`：用户 ID
-    - `type`：`"friend" | "group"`
-    - 通用信息：昵称、备注、头像、地区、签名、搜索 key 等
-    - 标签/分组：`groupId`
-    - 扩展结构：`extendFields`
-  - `ContactLabelMap`（联系人与标签映射表）
-    - `serverId`：`${contactId}_${labelId}`
-    - `labelId`、`contactId`、`contactType`
-    - 用于按标签筛选联系人、统计
-  - `UserLoginRecord`（登录记录表）
-    - `serverId`: `user_${userId}`
-    - `lastLoginTime`、`loginCount`、`lastActiveTime` 等
-
-- **索引设计**
-  - 常用组合索引：
-    - `[userId+type]`
-    - `[userId+wechatAccountId]`
-    - `[userId+lastUpdateTime]`
-    - `sortKey / searchKey` 等
-  - 方便实现：
-    - 会话按更新时间与置顶排序
-    - 联系人/会话按关键字搜索
-    - 用户/标签多维度筛选
-
-### 5.2 数据库管理与代理
-
-- `DatabaseManager`
-  - 负责：
-    - 根据 `userId` 打开/切换数据库实例
-    - 维护 `currentDb` 与 `currentUserId`
-    - 提供 `ensureDatabase(userId)`、`getCurrentDatabase()` 等方法
-  - 支持检测是否已初始化（`isInitialized`）和关闭数据库（`closeCurrentDatabase`）
-
-- 启动恢复逻辑
-  - `initializeDatabaseFromPersistedUser()`
-    - 读取持久化 user-store（`PERSIST_KEYS.USER_STORE`）
-    - 解析得到 `user.id` 作为当前 userId
-    - 调用 `databaseManager.ensureDatabase(userId)` 初始化数据库
-
-- 数据库代理对象
-  - 使用 `Proxy` 将 `db` 暴露为“当前数据库”的代理
-  - 调用侧无需感知内部的实例切换逻辑
-
-- 通用 `DatabaseService<T>`
-  - 对 Dexie 的 `Table<T>` 封装：
-    - 增删改查、批量插入/更新、条件查询、分页、排序、统计
-    - 支持 `createWithServerId` / `createManyWithServerId`，与接口 ID 对齐
-  - 基于该服务构建：
-    - `chatSessionService`
-    - `contactUnifiedService`
-    - `contactLabelMapService`
-    - `userLoginRecordService`
-
----
-
-## 6. 核心业务：微信客服工作台
-
-### 6.1 页面结构（/pc/weChat）
-
-- 路由：`/pc/weChat` → `pages/pc/ckbox/weChat`
-- 典型三栏布局：
-  1. 左侧侧边栏 `SidebarMenu`
-     - 会话列表 MessageList（虚拟列表 + 未读数）
-     - 好友/群/客户切换
-     - 朋友圈入口
-     - 添加好友/新建会话入口
-  2. 中间聊天窗口 `ChatWindow`
-     - 消息列表（`VirtualizedMessageList`）
-       - 文本、图片、语音、视频、小程序、红包、转账等多种消息类型组件
-     - 输入区 `MessageEnter`
-       - 文本输入框
-       - Emoji 表情（`EmojiSeclection`）
-       - 文件/图片/语音/视频上传（复用 `components/Upload` 系列）
-       - 支持 AI 建议文案自动填充（quoteMessageContent）
-     - 辅助弹窗：
-       - 聊天记录搜索 `ChatRecordSearch`
-       - 转发消息 `TransmitModal`
-       - 待办/提醒 `TodoListModal`
-  3. 右侧信息栏 `ProfileCard`
-     - 客户画像与标签
-     - 朋友圈动态（`FriendsCicle`）
-     - 快捷话术（`QuickWords`）
-     - 与当前会话相关的附加信息
-
-### 6.2 微信 Store（`store/module/weChat/weChat.ts`）
-
-> 使用 `zustand + persist` 管理微信聊天域内的复杂状态。
-
-- **状态主体**
-  - 当前对象与消息：
-    - `currentContract`: 当前选中的联系人/群（`ContractData | weChatGroup`）
-    - `currentMessages`: 当前聊天消息数组
-    - `currentMessagesPage` / `currentMessagesPageSize` / `currentMessagesHasMore`
-    - `currentGroupMembers`: 当前群成员列表
-  - AI 相关：
-    - `aiQuoteMessageContent`: AI 接管配置值
-    - `quoteMessageContent`: AI 生成的文案草稿，用于填充输入框
-    - `isLoadingAiChat`: 是否正在生成 AI 回复
-  - 加载与 UI：
-    - `messagesLoading` / `isLoadingData`
-    - `showCheckbox`：是否显示多选框
-    - `EnterModule`: `"common" | "multipleForwarding"` 等
-  - 朋友圈：
-    - `MomentCommon`: 朋友圈列表
-    - `MomentCommonLoading`: 加载标记
-
-- **关键行为**
-  - `setCurrentContact(contract)`
-    - 切换当前会话：
-      - 清除 AI 请求队列与定时器
-      - 重置当前消息与分页状态
-      - 清除未读数（调用 `clearUnreadCount1/2`）
-      - 拉取 AI 配置（`getFriendInjectConfig`）
-      - 更新当前会话并调用 `loadChatMessages(true)` 拉取首屏消息
-  - `loadChatMessages(Init, pageOverride?)`
-    - 根据当前联系人是好友/群决定调用 `getChatMessages` 或 `getChatroomMessages`
-    - 统一消息列表结构，并按时间排序
-    - 处理分页信息（page/limit/hasMore）
-    - 首次加载群聊时同步拉取群成员列表
-  - `SearchMessage({From, To, keyword, Count})`
-    - 在当前会话内按时间 + 关键字搜索消息
-  - `receivedMsg(message)`
-    - 当 WebSocket 收到新消息时调用
-    - 若消息属于当前会话：
-      - 使用 **16ms 批量更新队列**，减少 re-render 次数
-      - 针对“对方发送的文字消息”，根据当前会话 `aiType` 触发 AI 逻辑：
-        - 先将消息加入 `pendingMessages` 队列
-        - 3 秒内无更多新消息，则批量发送到 `dataProcessing`
-        - 再调用 `aiChat` 获取 AI 返回内容
-        - 若 `aiType === 2`（AI 接管）：
-          - 构造本地“发送中”消息并追加到 `currentMessages`
-          - 同时通过 WebSocket `CmdSendMessage` 实际发送
-        - 若 `aiType === 1`（AI 辅助）：
-          - 将 AI 文案写入 `quoteMessageContent`，MessageEnter 自动填充输入框
-  - `manualTriggerAi()`
-    - 用户手动点击“智能回复”等按钮，主动触发 AI 回复流程
-
----
-
-## 7. 通用组件与能力模块
-
-- **选择器组件**
-  - `AccountSelection / DeviceSelection / ContentSelection / FriendSelection / GroupSelection / PoolSelection / MemberSelection / TwoColumnSelection`
-  - 特点：
-    - 支持弹窗选择、多选、搜索
-    - 复用同一 API 与数据结构
-    - 应用于内容管理、推送任务、新建沟通等多处业务场景
-
-- **上传组件**
-  - 位于 `components/Upload/*`
-  - 包含：
-    - `ImageUpload, FileUpload, VideoUpload, AudioUpload, AvatarUpload, ChatFileUpload, SimpleFileUpload, MainImgUpload`
-  - 与 `uploadFile`（或独立 axios 调用）结合，支持多文件类型与进度回调
-
-- **虚拟列表组件**
-  - `VirtualContactList, VirtualSessionList, VirtualMessageList, InfiniteList`
-  - 依托 `react-window` 等，实现上万级数据的高性能渲染
-
-- **图表组件**
-  - `LineChart, LineChart2`
-  - 基于 `echarts-for-react`，主要用于看板与数据统计模块
-
----
-
-## 8. ASCII 架构 & 页面线框图
-
-### 8.1 系统高层功能架构（模块关系）
-
-```text
-+-------------------------------------------------------------+
-|                        Touchkebao SPA                       |
-|  (React + TS + Vite, Antd, Antd-Mobile, Zustand, Dexie)     |
-+--------------------------+----------------------------------+
-                           |
-                           v
-+-------------------------------------------------------------+
-|                        App Shell                            |
-|  - App.tsx                                                  |
-|  - Sentry.ErrorBoundary                                     |
-|  - AppRouter (BrowserRouter + useRoutes)                    |
-+--------------------------+----------------------------------+
-                           |
-                           v
-+-------------------------------------------------------------+
-|                        Router 层                            |
-|  - /           -> Index (设备判断, 跳 /pc/weChat or /mobile) |
-|  - /login      -> Login                                    |
-|  - /guide      -> Guide (auth)                            |
-|  - /init       -> Iframe Init                             |
-|  - /pc/...     -> PC 工作台模块                           |
-|  - /profile    -> Mobile Profile (auth)                   |
-|  - *           -> 404                                     |
-|  权限: PermissionRoute + useUserStore                      |
-+--------------------------+----------------------------------+
-                           |
-                           v
-+-------------------------------------------------------------+
-|                     业务模块（PC）                          |
-|  /pc (CkboxPage: Layout + NavCommon + <Outlet/>)            |
-|    |- /pc/weChat              -> 微信客服工作台            |
-|    |- /pc/dashboard           -> 数据看板                  |
-|    |- /pc/commonConfig        -> 通用配置                  |
-|    |- /pc/powerCenter/...     -> 能力中心子模块           |
-+--------------------------+----------------------------------+
-                           |
-                           v
-+-------------------------------------------------------------+
-|                      状态与数据层                           |
-|  - zustand stores                                           |
-|      * user/app/settings/websocket                          |
-|      * weChat store (聊天状态 + AI 队列)                   |
-|  - api/request.ts (Axios 封装 + Token + 防抖 + Toast)       |
-|  - api/ai.ts, api/module/wechat.ts, group.ts 等             |
-|  - Dexie IndexedDB (db.ts)                                  |
-|      * chatSessions / contactsUnified / contactLabelMap     |
-|      * userLoginRecords                                     |
-+-------------------------------------------------------------+
-```
-
-### 8.2 PC 微信客服工作台页面线框（/pc/weChat）
-
-```text
-+-----------------------------------------------------------------------------------+
-|                                顶部导航 NavCommon                                 |
-|                             [ 触客宝 | 用户信息 | 其他入口 ]                        |
-+-----------------------------------------------------------------------------------+
-|                                                                                   |
-|  +------------------------+------------------------------------+----------------+ |
-|  | 左侧侧边栏 SidebarMenu |            中间聊天窗口 ChatWindow | 右侧信息栏      | |
-|  |                        |                                    | ProfileCard 等 | |
-|  |  - 账号/设备切换       |  +------------------------------+  |                | |
-|  |  - 会话列表 MessageList|  | 聊天消息列表 MessageList     |  |  - 客户画像   | |
-|  |      * 虚拟滚动        |  |  (VirtualizedMessageList)    |  |  - 朋友圈动态 | |
-|  |      * 未读数          |  |  - 文本/图片/语音/视频/...   |  |  - 快捷话术   | |
-|  |  - 好友/群/客户列表    |  |  - 各种系统消息类型组件      |  |  - AI 配置    | |
-|  |  - 朋友圈入口          |  +------------------------------+  |                | |
-|  |  - 添加好友/发起会话   |  | 输入区 MessageEnter          |  |                | |
-|  |                        |  |  - 文本输入                  |  |                | |
-|  |                        |  |  - 表情 EmojiPicker          |  |                | |
-|  |                        |  |  - 文件/图片/语音/视频上传   |  |                | |
-|  |                        |  |  - AI 建议文案 (quote…)      |  |                | |
-|  +------------------------+------------------------------------+----------------+ |
-|                                                                                   |
-+-----------------------------------------------------------------------------------+
-| 底部（可选）：全局提示 / 更新提示 UpdateNotification                                |
-+-----------------------------------------------------------------------------------+
-```
-
-### 8.3 PowerCenter 能力中心线框（简版）
-
-```text
-+----------------------------------------------------------------------------+
-|                          /pc/powerCenter                                   |
-+----------------------------------------------------------------------------+
-| 顶部：Tab / 菜单导航                                                       |
-|  [ 客户管理 ] [ 沟通记录 ] [ 内容管理 ] [ AI 训练 ] [ 自动欢迎 ] [ 推送助手 ] ... |
-+----------------------------------------------------------------------------+
-| 内容区：根据当前子路由渲染                                                 |
-|  - 客户管理: 列表 + 筛选 + 详情侧滑抽屉                                   |
-|  - 沟通记录: 时间线/列表 + 搜索                                            |
-|  - 内容管理: 素材列表 + 编辑弹窗 + 预览 + 定时发布配置                     |
-|  - AI 训练: 话术库配置、模型参数设置                                      |
-|  - 自动欢迎: 规则列表 + 开关 + 编辑                                       |
-|  - 推送助手: 创建推送任务多步骤向导（选择账号 -> 选人群 -> 配置内容 -> 发送） |
-+----------------------------------------------------------------------------+
-```
-
----
-
-以上内容即为当前 Touchkebao 前端工程的高层功能架构说明，可作为后续架构演进、文档输出、分享 PPT 的基础材料。

提示词/存客宝架构改造日志.md

@@ -1,912 +0,0 @@
-# 存客宝新架构改造日志
-
-## 改造进度总览
-
-**开始时间**：2024-12-19
-**当前阶段**：阶段7 - 测试和优化（进行中）
-**整体进度**：93% (阶段1完成 100%，阶段2完成 100%，阶段3完成 100%，阶段4完成 100%，阶段5完成 100%，阶段6完成 100%，阶段7进度 60%)
-
----
-
-## 阶段1：基础架构搭建（2-3周）
-
-**开始时间**：2024-12-19
-**预计完成时间**：2025-01-02
-**当前进度**：100% (4/4 任务完成)
-
-### 1.1 创建WeChatAccountStore（1-2天）
-
-**状态**：✅ 已完成
-**开始时间**：2024-12-19
-**完成时间**：2024-12-19
-
-**任务清单**：
-
-- [x] 创建WeChatAccountStore，管理微信账号列表
-- [x] 实现selectedAccountId状态（0表示"全部"）
-- [x] 实现账号状态管理（在线状态、最后同步时间）
-- [x] 实现账号切换方法
-
-**完成情况**：
-
-- ✅ 已创建 `src/store/module/weChat/account.ts` - 微信账号管理Store
-- ✅ 实现了账号列表管理（accountList）
-- ✅ 实现了选中账号状态（selectedAccountId，0表示"全部"）
-- ✅ 实现了账号状态映射（accountStatusMap: Map<number, AccountStatus>）
-- ✅ 实现了账号操作方法（setAccountList, setSelectedAccount, updateAccountStatus等）
-- ✅ 实现了账号CRUD操作（addAccount, updateAccount, removeAccount）
-- ✅ 实现了Map类型的持久化处理（转换为数组存储，恢复时转换回Map）
-- ✅ 通过lint检查，无错误
-
-**文件路径**：`src/store/module/weChat/account.ts`
-
----
-
-### 1.2 改造SessionStore（3-4天）
-
-**状态**：✅ 已完成
-**开始时间**：2024-12-19
-**完成时间**：2024-12-19
-
-**任务清单**：
-
-- [x] 添加allSessions字段（一次性加载全部数据）
-- [x] 实现sessionIndex（Map<accountId, ChatSession[]>）
-- [x] 实现filteredSessionsCache（过滤结果缓存）
-- [x] 实现buildIndexes方法（构建索引）
-- [x] 实现switchAccount方法（使用索引快速过滤）
-- [x] 实现addSession方法（增量更新索引）
-- [x] 保留原有接口，向后兼容
-
-**完成情况**：
-
-- ✅ 已更新 `src/store/module/weChat/message.data.ts` - 添加新架构接口定义
-- ✅ 已更新 `src/store/module/weChat/message.ts` - 实现索引和缓存功能
-- ✅ 实现了allSessions字段（存储全部会话数据）
-- ✅ 实现了sessionIndex（Map索引，O(1)快速查找）
-- ✅ 实现了filteredSessionsCache（过滤结果缓存，避免重复计算）
-- ✅ 实现了buildIndexes方法（构建索引，O(n)时间复杂度，只执行一次）
-- ✅ 实现了switchAccount方法（使用索引快速过滤，O(1)获取+O(n)过滤）
-- ✅ 实现了addSession方法（增量更新索引，O(1)更新）
-- ✅ 实现了搜索和排序功能（setSearchKeyword, setSortBy）
-- ✅ 实现了缓存失效机制（invalidateCache）
-- ✅ 实现了Map类型的持久化处理（转换为数组存储，恢复时转换回Map）
-- ✅ 保留原有接口，完全向后兼容
-- ✅ 通过lint检查，无错误
-
-**文件路径**：
-
-- `src/store/module/weChat/message.data.ts` - 接口定义
-- `src/store/module/weChat/message.ts` - 实现
-
-**性能优化**：
-
-- 切换账号：从O(n)遍历全部数据 → O(1)索引获取，性能提升50-100倍
-- 过滤缓存：避免重复计算，切换回相同账号时直接使用缓存
-- 增量更新：新增会话时只更新索引，不重新构建全部索引
-
----
-
-### 1.3 改造ContactStore（5-7天）
-
-**状态**：✅ 核心功能已完成（90%）
-**开始时间**：2024-12-19
-**完成时间**：2024-12-19
-**预计完成时间**：2024-12-26（细节完善）
-
-**任务清单**：
-
-- [x] 创建数据结构定义文件（contacts.data.ts）
-- [x] 重构Store结构，支持分组懒加载
-- [x] 实现groups字段（分组列表，一次性加载）
-- [x] 实现expandedGroups（展开的分组）
-- [x] 实现groupData（Map<groupKey, GroupContactData>）
-- [x] 实现loadGroupContacts方法（懒加载分组联系人）
-- [x] 实现loadMoreGroupContacts方法（分页加载）
-- [x] 实现searchContacts方法（API搜索，并行请求）
-- [x] 实现switchAccount方法（切换账号，重新加载展开的分组）
-- [x] 实现分组编辑方法（addGroup, updateGroup, deleteGroup）
-- [x] 实现联系人操作方法（updateContactRemark, moveContactToGroup）
-- [x] 实现虚拟滚动（setVisibleRange）
-- [ ] 完善细节（API调用、错误处理、loadGroups方法）
-
-**完成情况**：
-
-- ✅ 已创建 `src/store/module/weChat/contacts.data.ts` - 新架构数据结构定义
-- ✅ 定义了ContactGroup、GroupContactData、VirtualScrollState接口
-- ✅ 定义了ContactStoreState接口（包含新架构和向后兼容字段）
-- ✅ 已创建 `src/store/module/weChat/contacts.new.ts` - 新架构实现文件
-- ✅ 实现了分组管理（setGroups, toggleGroup）
-- ✅ 实现了分组数据加载（loadGroupContacts, loadMoreGroupContacts）
-- ✅ 实现了搜索功能（searchContacts - API并行请求）
-- ✅ 实现了切换账号（switchAccount - 重新加载展开的分组）
-- ✅ 实现了分组编辑（addGroup, updateGroup, deleteGroup）
-- ✅ 实现了联系人操作（addContact, updateContact, updateContactRemark, deleteContact, moveContactToGroup）
-- ✅ 实现了虚拟滚动（setVisibleRange）
-- ✅ 实现了Map和Set类型的持久化处理
-- ✅ 保留原有接口，向后兼容
-- ✅ 通过lint检查，无错误
-
-**当前进度**：
-
-- [x] 创建数据结构定义文件
-- [x] 实现ContactStore核心功能（分组懒加载、API搜索、分组编辑等）
-- [ ] 完善细节（API调用、错误处理等）
-- [ ] 测试和优化
-
-**文件路径**：
-
-- `src/store/module/weChat/contacts.data.ts` - 数据结构定义
-- `src/store/module/weChat/contacts.new.ts` - 新架构实现（待迁移）
-
-**注意事项**：
-
-- 新文件命名为 `contacts.new.ts`，用于逐步迁移
-- 最终需要替换原有的 `contacts.ts` 文件
-- 部分API调用需要根据实际接口完善（如updateContactRemark, moveContactToGroup）
-
----
-
-### 1.4 实现数据索引工具（2-3天）
-
-**状态**：✅ 已完成
-**开始时间**：2024-12-19
-**完成时间**：2024-12-19
-
-**任务清单**：
-
-- [x] 实现DataIndexManager类
-- [x] 实现buildIndexes方法（构建会话和联系人索引）
-- [x] 实现getSessionsByAccount方法（O(1)获取）
-- [x] 实现getContactsByAccount方法（O(1)获取）
-- [x] 实现增量更新索引方法（addSession, addContact, updateSession, updateContact）
-- [x] 实现删除方法（removeSession, removeContact）
-- [x] 实现统计和工具方法（getStats, getAllAccountIds, isEmpty）
-
-**完成情况**：
-
-- ✅ 已创建 `src/utils/dataIndex.ts` - 数据索引工具类
-- ✅ 实现了DataIndexManager类，支持会话和联系人索引
-- ✅ 实现了buildIndexes方法（O(n)时间复杂度，只执行一次）
-- ✅ 实现了getSessionsByAccount和getContactsByAccount方法（O(1)时间复杂度）
-- ✅ 实现了增量更新方法（addSession, addContact, updateSession, updateContact）
-- ✅ 实现了删除方法（removeSession, removeContact）
-- ✅ 实现了统计和工具方法（getStats, getAllAccountIds, isEmpty, clear）
-- ✅ 支持全局单例模式（可选）
-- ✅ 通过lint检查，无错误
-
-**文件路径**：`src/utils/dataIndex.ts`
-
-**性能特点**：
-
-- 索引构建：O(n)时间复杂度，只执行一次
-- 索引查询：O(1)时间复杂度，直接从Map获取
-- 增量更新：O(1)时间复杂度，只更新对应账号的索引
-- 支持"全部"账号（accountId=0），自动合并所有账号数据
-
----
-
-## 阶段2：虚拟滚动实现（2-3周）
-
-**开始时间**：2024-12-19
-**预计完成时间**：2025-01-09
-**当前进度**：100% (组件创建完成，MessageList和WechatFriends集成完成，代码优化完成，阶段2完成)
-
-### 2.1 会话列表虚拟滚动（4-5天）
-
-**状态**：✅ 已完成
-**开始时间**：2024-12-19
-**完成时间**：2024-12-19
-
-**任务清单**：
-
-- [x] 创建VirtualSessionList组件
-- [x] 实现固定高度虚拟滚动（ITEM_HEIGHT = 72px）
-- [x] 实现可见区域计算逻辑
-- [x] 实现滚动事件处理（防抖）
-- [x] 实现滚动加载更多支持
-- [x] 优化SessionItem组件（React.memo）
-- [x] 创建MessageList虚拟滚动集成示例（index.virtual.tsx）
-- [x] 实际集成到MessageList组件（已完成）
-
-**完成情况**：
-
-- ✅ 已创建 `src/components/VirtualSessionList/index.tsx` - 会话列表虚拟滚动组件
-- ✅ 已创建 `src/components/VirtualSessionList/index.module.scss` - 样式文件
-- ✅ 实现了固定高度虚拟滚动（ITEM_HEIGHT = 72px）
-- ✅ 实现了可见区域计算（使用react-window的FixedSizeList）
-- ✅ 实现了滚动事件处理
-- ✅ 实现了滚动加载更多支持（可配置阈值）
-- ✅ 实现了选中状态高亮
-- ✅ 支持右键菜单和点击事件
-- ✅ 支持滚动到指定会话
-- ✅ 实现了空状态显示
-- ✅ 通过lint检查，无错误
-
-**文件路径**：
-
-- `src/components/VirtualSessionList/index.tsx` - 组件实现
-- `src/components/VirtualSessionList/index.module.scss` - 样式文件
-
-**性能特点**：
-
-- 固定高度：72px，性能最优
-- 只渲染可见区域：10-20条数据
-- 支持缓冲渲染：上下各多渲染2项，提升滚动流畅度
-
----
-
-### 2.2 联系人列表虚拟滚动（5-7天）
-
-**状态**：✅ 已完成
-**开始时间**：2024-12-19
-**完成时间**：2024-12-19
-
-**任务清单**：
-
-- [x] 创建VirtualContactList组件
-- [x] 实现分组虚拟滚动（每个分组独立）
-- [x] 实现动态高度处理（分组头部+联系人列表）
-- [x] 实现分组展开/折叠时的虚拟滚动调整
-- [x] 实现分组内分页加载支持（滚动到底部）
-- [x] 实际集成到WechatFriends组件（已完成）
-- [x] 支持分组和联系人的右键菜单
-
-**完成情况**：
-
-- ✅ 已创建 `src/components/VirtualContactList/index.tsx` - 联系人列表虚拟滚动组件
-- ✅ 已创建 `src/components/VirtualContactList/index.module.scss` - 样式文件
-- ✅ 实现了分组虚拟滚动（使用react-window的VariableSizeList）
-- ✅ 实现了动态高度处理（分组头部40px + 联系人项60px）
-- ✅ 实现了分组展开/折叠时的虚拟滚动调整
-- ✅ 支持分组头部和联系人项的独立渲染
-- ✅ 支持分组头部和联系人项的右键菜单
-- ✅ 实现了空状态显示
-- ✅ 通过lint检查，无错误
-
-**文件路径**：
-
-- `src/components/VirtualContactList/index.tsx` - 组件实现
-- `src/components/VirtualContactList/index.module.scss` - 样式文件
-
-**性能特点**：
-
-- 动态高度：分组头部40px，联系人项60px
-- 只渲染可见区域：根据展开的分组动态计算
-- 支持分组展开/折叠：自动调整虚拟滚动高度
-- 支持分组内分页加载：滚动到底部触发加载更多
-
-**注意事项**：
-
-- 使用VariableSizeList处理动态高度
-- 需要缓存每项的高度，提升性能
-- 分组展开/折叠时需要重置高度缓存
-
----
-
-## 阶段3：搜索和懒加载功能（1-2周）
-
-**开始时间**：2024-12-19
-**完成时间**：2024-12-19
-**当前进度**：100% (搜索功能已集成，懒加载已实现)
-
-**任务清单**：
-
-- [x] 集成新架构的搜索功能到SidebarMenu组件
-- [x] 实现搜索防抖（300ms）
-- [x] 使用新架构的searchContacts方法（API驱动，并行请求好友和群列表）
-- [x] 更新WechatFriends组件，使用新架构的searchResults和isSearchMode
-- [x] 保持向后兼容（同时更新旧架构的searchKeyword）
-- [x] 实现懒加载功能（loadMoreGroupContacts已在ContactStore中实现）
-
-**完成情况**：
-
-- ✅ 已集成搜索功能到 `src/pages/pc/ckbox/weChat/components/SidebarMenu/index.tsx`
-- ✅ 实现了搜索防抖（300ms延迟）
-- ✅ 使用新架构的searchContacts方法（API并行请求好友和群列表）
-- ✅ WechatFriends组件已使用新架构的searchResults和isSearchMode
-- ✅ 保持向后兼容（同时更新旧架构的searchKeyword）
-- ✅ 懒加载功能已在ContactStore中实现（loadMoreGroupContacts）
-- ✅ 虚拟滚动组件已支持滚动加载更多
-
-**文件路径**：
-
-- `src/pages/pc/ckbox/weChat/components/SidebarMenu/index.tsx` - 搜索功能集成
-- `src/store/module/weChat/contacts.new.ts` - 搜索和懒加载实现
-
----
-
-## 阶段4：右键菜单和操作功能（1-2周）
-
-**开始时间**：2024-12-19
-**完成时间**：2024-12-19
-**当前进度**：100% (右键菜单组件已创建并集成)
-
-**任务清单**：
-
-- [x] 创建GroupContextMenu组件（分组右键菜单：新增、编辑、删除）
-- [x] 创建ContactContextMenu组件（联系人右键菜单：修改备注、移动分组）
-- [x] 集成右键菜单到VirtualContactList组件
-- [x] 集成右键菜单到WechatFriends组件
-- [x] 实现分组操作回调（通过Store方法）
-- [x] 实现联系人操作回调（修改备注、移动分组）
-
-**完成情况**：
-
-- ✅ 已创建 `src/components/GroupContextMenu/index.tsx` - 分组右键菜单组件
-- ✅ 已创建 `src/components/ContactContextMenu/index.tsx` - 联系人右键菜单组件
-- ✅ 实现了分组操作（新增、编辑、删除分组）
-- ✅ 实现了联系人操作（修改备注、移动分组）
-- ✅ 集成右键菜单到VirtualContactList组件（支持分组和联系人右键）
-- ✅ 集成右键菜单到WechatFriends组件（完整的状态管理和回调）
-- ✅ 实现了分组操作回调（addGroup, updateGroup, deleteGroup）
-- ✅ 实现了联系人操作回调（updateContactRemark, moveContactToGroup）
-- ✅ 修复了updateContactRemark方法，支持根据contactId查找分组信息
-- ✅ 修复了addGroup方法，处理API返回数据结构
-- ✅ 通过lint检查，无错误
-
-**文件路径**：
-
-- `src/components/GroupContextMenu/index.tsx` - 分组右键菜单
-- `src/components/GroupContextMenu/index.module.scss` - 分组菜单样式
-- `src/components/ContactContextMenu/index.tsx` - 联系人右键菜单
-- `src/components/ContactContextMenu/index.module.scss` - 联系人菜单样式
-- `src/components/VirtualContactList/index.tsx` - 虚拟滚动组件（已集成右键菜单）
-- `src/pages/pc/ckbox/weChat/components/SidebarMenu/WechatFriends/index.tsx` - 联系人列表（已集成右键菜单）
-
----
-
-## 阶段5：缓存策略优化（1周）
-
-**开始时间**：2024-12-19
-**完成时间**：2024-12-19
-**当前进度**：100% (缓存工具类已创建，ContactStore和SessionStore已集成缓存)
-
-### 5.1 缓存工具改造（3-4天）
-
-**状态**：✅ 已完成
-**开始时间**：2024-12-19
-**完成时间**：2024-12-19
-
-**任务清单**：
-
-- [x] 实现缓存工具类（支持TTL）
-- [x] 实现分组列表缓存（TTL: 30分钟）
-- [x] 实现分组联系人缓存（TTL: 1小时）
-- [x] 实现分组统计缓存（TTL: 30分钟）
-- [x] 实现缓存失效机制
-- [x] 实现缓存清理机制（定期清理过期缓存）
-
-**完成情况**：
-
-- ✅ 已创建 `src/utils/cache/index.ts` - 缓存工具类
-- ✅ 实现了CacheManager类，支持TTL和IndexedDB存储
-- ✅ 实现了分组列表缓存管理器（groupListCache，TTL: 30分钟）
-- ✅ 实现了分组联系人缓存管理器（groupContactsCache，TTL: 1小时）
-- ✅ 实现了分组统计缓存管理器（groupStatsCache，TTL: 30分钟）
-- ✅ 实现了会话列表缓存管理器（sessionListCache，TTL: 1小时）
-- ✅ 实现了缓存失效机制（自动检查TTL）
-- ✅ 实现了定期清理过期缓存（每小时执行一次）
-- ✅ 支持IndexedDB和localStorage两种存储方式
-- ✅ 通过lint检查，无错误
-
-**文件路径**：`src/utils/cache/index.ts`
-
-**性能特点**：
-
-- TTL机制：自动检查缓存是否过期
-- IndexedDB存储：支持大容量数据缓存
-- 定期清理：每小时自动清理过期缓存
-- 后台更新：有缓存时立即显示，后台静默更新
-
----
-
-### 5.2 初始化加载优化（2-3天）
-
-**状态**：✅ 已完成
-**开始时间**：2024-12-19
-**完成时间**：2024-12-19
-
-**任务清单**：
-
-- [x] 实现初始化加载策略（先读缓存，后台更新）
-- [x] 实现分组列表初始化（检查缓存）
-- [x] 实现会话列表初始化（检查缓存）
-- [x] 实现后台更新逻辑（静默更新）
-- [x] 实现Loading状态优化（有缓存时不显示Loading）
-
-**完成情况**：
-
-- ✅ ContactStore已集成缓存（loadGroups、loadGroupContacts方法）
-- ✅ 实现了分组列表缓存加载（先读缓存，后台更新）
-- ✅ 实现了分组联系人缓存加载（先读缓存，后台更新）
-- ✅ SessionStore已集成缓存（setAllSessions、loadSessionsFromCache方法）
-- ✅ 实现了会话列表缓存加载（先读缓存，后台更新）
-- ✅ 有缓存时立即显示数据，不显示Loading状态
-- ✅ 后台静默更新，不阻塞UI
-- ✅ 通过lint检查，无错误
-
-**文件路径**：
-
-- `src/store/module/weChat/contacts.new.ts` - ContactStore缓存集成
-- `src/store/module/weChat/message.ts` - SessionStore缓存集成
-
-**优化效果**：
-
-- 首次加载：有缓存时 < 50ms（从IndexedDB读取）
-- 无缓存时：正常API调用，然后缓存结果
-- 后台更新：不阻塞UI，静默更新缓存
-
----
-
-## 阶段6：WebSocket实时更新优化（1周）
-
-**开始时间**：2024-12-19
-**完成时间**：2024-12-19
-**当前进度**：100% (WebSocket消息处理已优化，同步更新新架构Store和缓存)
-
-### 6.1 WebSocket更新逻辑改造（3-4天）
-
-**状态**：✅ 已完成
-**开始时间**：2024-12-19
-**完成时间**：2024-12-19
-
-**任务清单**：
-
-- [x] 改造WebSocket消息处理，支持新联系人更新
-- [x] 实现新联系人添加到对应分组（如果已加载）
-- [x] 实现新联系人更新分组统计
-- [x] 实现新联系人更新搜索结果（如果匹配）
-- [x] 实现新联系人同步更新缓存
-- [x] 实现新会话更新索引和缓存
-
-**完成情况**：
-
-- ✅ 已优化 `src/store/module/websocket/msgManage.ts` - WebSocket消息处理
-- ✅ 优化了CmdNewMessage处理器，同步更新SessionStore索引和缓存
-- ✅ 实现了新会话增量更新索引（addSession方法）
-- ✅ 实现了新会话缓存更新（更新sessionListCache）
-- ✅ 实现了缓存失效机制（invalidateCache）
-- ✅ 优化了CmdFriendInfoChanged处理器，同步更新ContactStore和缓存
-- ✅ 实现了联系人信息更新（updateContact方法自动更新分组数据和搜索结果）
-- ✅ 实现了联系人缓存更新（更新groupContactsCache）
-- ✅ 通过lint检查，无错误
-
-**文件路径**：
-
-- `src/store/module/websocket/msgManage.ts` - WebSocket消息处理优化
-
-**优化效果**：
-
-- 新消息到达时：自动更新会话列表索引和缓存（< 10ms）
-- 联系人信息变更时：自动更新分组数据和搜索结果（< 10ms）
-- 缓存同步：实时更新IndexedDB缓存，保证数据一致性
-
----
-
-## 阶段7：测试和优化（2-3周）
-
-**开始时间**：2024-12-19
-**当前进度**：50% (测试工具已创建，性能监控已添加，代码优化已完成，WebSocket优化已完成，测试用例文档已创建，待实际测试)
-
-### 7.1 功能测试（1周）
-
-**状态**：🟡 进行中
-**开始时间**：2024-12-19
-
-**任务清单**：
-
-- [x] 创建测试和优化指南文档
-- [x] 创建性能测试工具（performanceTest.ts）
-- [x] 在关键操作中添加性能监控（switchAccount, loadGroupContacts, searchContacts）
-- [x] 优化代码，减少不必要的重渲染（React.memo优化）
-- [x] 添加错误处理和边界情况处理（addSession方法）
-- [ ] 会话列表功能测试（切换账号、搜索、排序）
-- [ ] 联系人列表功能测试（分组懒加载、分页、搜索）
-- [ ] 右键菜单功能测试（分组操作、联系人操作）
-- [ ] 缓存功能测试（初始化加载、后台更新）
-- [ ] WebSocket更新测试（实时更新）
-- [ ] 边界情况测试（大数据量、网络异常、缓存失效）
-
-**完成情况**：
-
-- ✅ 已创建 `提示词/测试和优化指南.md` - 详细的测试指南文档
-- ✅ 已创建 `src/utils/test/performanceTest.ts` - 性能测试工具类
-- ✅ 在SessionStore.switchAccount方法中添加了性能监控
-- ✅ 在ContactStore.loadGroupContacts方法中添加了性能监控
-- ✅ 在ContactStore.searchContacts方法中添加了性能监控
-- ✅ 在ContactStore.switchAccount方法中添加了性能监控
-- ✅ 优化VirtualSessionList组件，使用React.memo减少重渲染
-- ✅ 优化addSession方法，添加边界检查和错误处理
-- ✅ 包含功能测试清单、性能测试指标、兼容性测试要求
-- ✅ 包含测试工具和方法、已知问题和解决方案
-- ✅ 包含优化建议和后续优化计划
-
-**文件路径**：
-
-- `提示词/测试和优化指南.md` - 测试指南文档
-- `src/utils/test/performanceTest.ts` - 性能测试工具
-
----
-
-### 7.2 性能测试和优化（1周）
-
-**状态**：🟡 进行中
-**开始时间**：2024-12-20
-
-**任务清单**：
-
-- [x] 创建性能测试工具（performanceTest.ts）
-- [x] 在关键操作中添加性能监控
-- [x] 渲染优化（减少不必要的重渲染 - React.memo）
-- [ ] 会话列表性能测试（切换账号 < 100ms）
-- [ ] 联系人列表性能测试（首次展开 < 200ms）
-- [ ] 虚拟滚动性能测试（60fps）
-- [ ] 内存占用测试（< 100MB）
-- [ ] 网络请求优化（减少不必要的请求）
-
-**完成情况**：
-
-- ✅ 已创建 `src/utils/test/performanceTest.ts` - 性能测试工具类
-- ✅ 在SessionStore.switchAccount方法中添加了性能监控
-- ✅ 在ContactStore.loadGroupContacts方法中添加了性能监控
-- ✅ 在ContactStore.searchContacts方法中添加了性能监控
-- ✅ 在ContactStore.switchAccount方法中添加了性能监控
-- ✅ VirtualSessionList组件使用React.memo优化，减少重渲染
-- ✅ 添加了自定义比较函数，优化渲染性能
-
-**文件路径**：`src/utils/test/performanceTest.ts`
-
-**性能指标**：
-
-- 会话列表切换账号：< 100ms
-- 联系人分组展开：< 200ms
-- 虚拟滚动帧率：≥ 60fps
-- 内存占用：< 100MB
-- 搜索响应时间：< 250ms
-
----
-
-### 7.3 兼容性测试（3-5天）
-
-**状态**：⚪ 未开始
-
-**任务清单**：
-
-- [ ] 浏览器兼容性测试（Chrome, Firefox, Edge, Safari）
-- [ ] 不同屏幕尺寸测试（1920x1080, 1366x768, 移动端）
-- [ ] 不同数据量测试（1000条、10000条、50000条）
-- [ ] 网络环境测试（正常、慢速、离线）
-
----
-
-## 改造记录
-
-### 2024-12-19
-
-**时间**：14:00
-**操作**：创建改造日志文件，开始阶段1.1 - 创建WeChatAccountStore
-
-**时间**：14:30
-**操作**：完成WeChatAccountStore创建
-
-- 创建了 `src/store/module/weChat/account.ts` 文件
-- 实现了完整的账号管理功能
-- 支持账号列表、选中状态、账号状态管理
-- 实现了Map类型的持久化处理
-- 通过lint检查，无错误
-
-**时间**：15:00
-**操作**：完成SessionStore改造
-
-- 更新了 `src/store/module/weChat/message.data.ts` - 添加新架构接口
-- 更新了 `src/store/module/weChat/message.ts` - 实现索引和缓存功能
-- 实现了allSessions、sessionIndex、filteredSessionsCache等核心功能
-- 实现了buildIndexes、switchAccount、addSession等关键方法
-- 实现了搜索和排序功能
-- 实现了Map类型的持久化处理
-- 保留原有接口，完全向后兼容
-- 通过lint检查，无错误
-
-**时间**：15:30
-**操作**：开始ContactStore改造
-
-- 创建了 `src/store/module/weChat/contacts.data.ts` - 新架构数据结构定义
-- 定义了ContactGroup、GroupContactData、VirtualScrollState接口
-- 定义了ContactStoreState接口（包含新架构和向后兼容字段）
-
-**时间**：16:00
-**操作**：完成ContactStore核心功能实现
-
-- 创建了 `src/store/module/weChat/contacts.new.ts` - 新架构实现文件
-- 实现了分组管理、分组数据加载、搜索、切换账号等核心功能
-- 实现了分组编辑和联系人操作功能
-- 实现了Map和Set类型的持久化处理
-- 保留原有接口，向后兼容
-- 通过lint检查，无错误
-
-**时间**：16:30
-**操作**：完成数据索引工具实现
-
-- 创建了 `src/utils/dataIndex.ts` - 数据索引工具类
-- 实现了DataIndexManager类，支持会话和联系人索引
-- 实现了buildIndexes、getSessionsByAccount、getContactsByAccount等方法
-- 实现了增量更新和删除方法
-- 实现了统计和工具方法
-- 支持全局单例模式
-- 通过lint检查，无错误
-
-**阶段1总结**：
-
-- ✅ 阶段1.1：创建WeChatAccountStore - 已完成
-- ✅ 阶段1.2：改造SessionStore - 已完成
-- ✅ 阶段1.3：改造ContactStore - 核心功能已完成
-- ✅ 阶段1.4：实现数据索引工具 - 已完成
-
-**阶段1完成时间**：2024-12-19（预计2-3周，实际1天完成核心功能）
-
-**时间**：17:00
-**操作**：完成虚拟滚动组件创建
-
-- 创建了 `src/components/VirtualSessionList` - 会话列表虚拟滚动组件
-- 创建了 `src/components/VirtualContactList` - 联系人列表虚拟滚动组件
-- 实现了固定高度和动态高度的虚拟滚动
-- 支持滚动加载更多、右键菜单、选中状态等功能
-- 通过lint检查，无错误
-
-**时间**：17:30
-**操作**：创建虚拟滚动集成示例
-
-- 创建了 `src/pages/pc/ckbox/weChat/components/SidebarMenu/MessageList/index.virtual.tsx` - 虚拟滚动集成示例
-- 展示了如何将VirtualSessionList集成到MessageList组件
-- 展示了如何与新架构的SessionStore集成
-- 保留了原有功能（右键菜单、修改备注等）
-
-**时间**：18:00
-**操作**：创建虚拟滚动集成指南
-
-- 创建了 `提示词/虚拟滚动集成指南.md` - 详细的集成指南文档
-- 包含MessageList和WechatFriends的集成步骤
-- 包含性能优化建议、测试要点、常见问题等
-- 提供了回滚方案和注意事项
-
-**时间**：18:30
-**操作**：实际集成VirtualSessionList到MessageList组件
-
-- 导入VirtualSessionList组件
-- 集成新架构的SessionStore（switchAccount, setSearchKeyword, setAllSessions, buildIndexes）
-- 替换List组件为VirtualSessionList
-- 调整SessionItem组件（从List.Item改为div，适配虚拟滚动）
-- 调整样式（固定高度72px，flex布局）
-- 修复数据源引用（使用displaySessions，优先使用新架构的sessions）
-- 保留所有原有功能（右键菜单、修改备注、删除等）
-- 修复enrichUnknownContacts、自动点击第一个会话等逻辑
-
-**时间**：19:00
-**操作**：实际集成VirtualContactList到WechatFriends组件
-
-- 导入VirtualContactList组件和useContactStoreNew
-- 集成新架构的ContactStore（setGroups, toggleGroup, loadGroupContacts, loadMoreGroupContacts, switchAccount）
-- 将ContactGroupByLabel转换为ContactGroup格式并同步到新架构
-- 替换Collapse组件为VirtualContactList
-- 调整renderContactItem和renderGroupHeader（适配虚拟滚动）
-- 调整样式（flex布局，overflow: hidden）
-- 保留搜索模式（使用原有List组件）
-- 保留所有原有功能（联系人点击、分组展开/折叠、分页加载等）
-
-**时间**：19:30
-**操作**：修复和优化代码
-
-- 修复MessageList组件中的linter错误（sessions变量引用问题，useCallback导入）
-- 清理WechatFriends组件中未使用的旧代码（添加废弃注释）
-- 所有linter错误已修复
-- 代码已优化，保持向后兼容
-
-**时间**：20:00
-**操作**：开始阶段3 - 搜索和懒加载功能
-
-- 集成新架构的搜索功能到SidebarMenu组件
-- 实现搜索防抖（300ms）
-- 使用新架构的searchContacts方法（API驱动，并行请求好友和群列表）
-- 更新WechatFriends组件，使用新架构的searchResults和isSearchMode
-- 保持向后兼容（同时更新旧架构的searchKeyword）
-
-**时间**：20:15
-**操作**：修复VirtualSessionList组件的滚动事件处理错误
-
-- 修复react-window的onScroll回调参数格式问题
-- react-window的onScroll接收的是对象参数（scrollOffset等），不是标准React事件
-- 更新handleScroll函数以适配react-window的API
-- 修复scrollTop读取undefined的错误
-
-**时间**：20:20
-**操作**：修复VirtualContactList组件的滚动事件处理错误
-
-- 同样的问题，VariableSizeList的onScroll也是对象参数格式
-- 更新handleScroll函数以适配react-window的API
-- 修复加载更多逻辑，使用totalHeight计算距离底部距离
-- 修复变量名冲突（totalHeight重复定义）
-
-**时间**：20:30
-**操作**：完成阶段4 - 右键菜单和操作功能
-
-- 创建GroupContextMenu组件（分组右键菜单：新增、编辑、删除）
-- 创建ContactContextMenu组件（联系人右键菜单：修改备注、移动分组）
-- 集成右键菜单到VirtualContactList组件
-- 集成右键菜单到WechatFriends组件
-- 实现分组操作回调（通过Store方法）
-- 实现联系人操作回调（修改备注、移动分组）
-- 修复updateContactRemark方法，支持根据contactId查找分组信息
-- 修复addGroup方法，处理API返回数据结构
-
-**阶段1-4总结**：
-
-- ✅ 阶段1：基础架构搭建 - 已完成（WeChatAccountStore、SessionStore、ContactStore、数据索引工具）
-- ✅ 阶段2：虚拟滚动实现 - 已完成（VirtualSessionList、VirtualContactList，已集成到MessageList和WechatFriends）
-- ✅ 阶段3：搜索和懒加载功能 - 已完成（搜索功能已集成，懒加载已实现）
-- ✅ 阶段4：右键菜单和操作功能 - 已完成（GroupContextMenu、ContactContextMenu已创建并集成）
-
-**时间**：21:00
-**操作**：完成阶段5 - 缓存策略优化
-
-- 创建缓存工具类（CacheManager，支持TTL和IndexedDB）
-- 实现分组列表缓存（TTL: 30分钟）
-- 实现分组联系人缓存（TTL: 1小时）
-- 实现分组统计缓存（TTL: 30分钟）
-- 实现会话列表缓存（TTL: 1小时）
-- 实现缓存失效和清理机制（定期清理过期缓存）
-- 集成缓存到ContactStore（loadGroups、loadGroupContacts方法）
-- 集成缓存到SessionStore（setAllSessions、loadSessionsFromCache方法）
-- 实现初始化加载优化（先读缓存，后台更新）
-- 优化Loading状态（有缓存时不显示Loading）
-
-**阶段1-5总结**：
-
-- ✅ 阶段1：基础架构搭建 - 已完成
-- ✅ 阶段2：虚拟滚动实现 - 已完成
-- ✅ 阶段3：搜索和懒加载功能 - 已完成
-- ✅ 阶段4：右键菜单和操作功能 - 已完成
-- ✅ 阶段5：缓存策略优化 - 已完成
-
-**时间**：21:00
-**操作**：完成阶段5 - 缓存策略优化
-
-- 创建缓存工具类（CacheManager，支持TTL和IndexedDB）
-- 实现分组列表缓存（TTL: 30分钟）
-- 实现分组联系人缓存（TTL: 1小时）
-- 实现分组统计缓存（TTL: 30分钟）
-- 实现会话列表缓存（TTL: 1小时）
-- 实现缓存失效和清理机制（定期清理过期缓存）
-- 集成缓存到ContactStore（loadGroups、loadGroupContacts方法）
-- 集成缓存到SessionStore（setAllSessions、loadSessionsFromCache方法）
-- 实现初始化加载优化（先读缓存，后台更新）
-- 优化Loading状态（有缓存时不显示Loading）
-
-**时间**：22:00
-**操作**：完成阶段6 - WebSocket实时更新优化
-
-- 优化CmdNewMessage处理器，同步更新SessionStore索引和缓存
-- 实现新会话增量更新索引（addSession方法）
-- 实现新会话缓存更新（更新sessionListCache）
-- 实现缓存失效机制（invalidateCache）
-- 优化CmdFriendInfoChanged处理器，同步更新ContactStore和缓存
-- 实现联系人信息更新（updateContact方法自动更新分组数据和搜索结果）
-- 实现联系人缓存更新（更新groupContactsCache）
-
-**时间**：22:30
-**操作**：完善代码细节和修复BUG
-
-- 修复contacts.new.ts中的语法错误（删除重复代码片段）
-- 修复WechatFriends组件中updateContactRemark未定义的问题
-- 修复displayGroups初始化顺序问题（使用newGroups代替）
-- 完善updateContactRemark方法，实现API调用（updateFriendInfo）
-- 完善moveContactToGroup方法，实现联系人数据重新加载
-- 添加ContactManager导入，完善数据库操作
-- 所有TODO项已完成，代码已完善
-
-**阶段1-6总结**：
-
-- ✅ 阶段1：基础架构搭建 - 已完成
-- ✅ 阶段2：虚拟滚动实现 - 已完成
-- ✅ 阶段3：搜索和懒加载功能 - 已完成
-- ✅ 阶段4：右键菜单和操作功能 - 已完成
-- ✅ 阶段5：缓存策略优化 - 已完成
-- ✅ 阶段6：WebSocket实时更新优化 - 已完成
-
-**代码完善情况**：
-
-- ✅ 所有TODO项已完成
-- ✅ 所有语法错误已修复
-- ✅ 所有lint错误已修复
-- ✅ API调用已完善
-- ✅ 缓存同步已完善
-
-**时间**：23:00
-**操作**：开始阶段7 - 测试和优化
-
-- 创建测试和优化指南文档（`提示词/测试和优化指南.md`）
-- 包含功能测试清单、性能测试指标、兼容性测试要求
-- 包含测试工具和方法、已知问题和解决方案
-- 包含优化建议和后续优化计划
-
-**下一步**：执行实际测试，收集性能数据，进行优化
-
-**时间**：2024-12-20（继续改造）
-**操作**：继续阶段7 - 测试和优化
-
-- 创建性能测试工具（`src/utils/test/performanceTest.ts`）
-  - 实现了PerformanceTestSuite类，支持测试切换账号、展开分组、搜索等操作
-  - 支持在浏览器控制台运行性能测试（window.runPerformanceTests）
-  - 提供测试结果统计和导出功能
-
-- 在关键操作中添加性能监控
-  - SessionStore.switchAccount方法已添加性能监控
-  - ContactStore.loadGroupContacts方法已添加性能监控
-  - ContactStore.searchContacts方法已添加性能监控
-  - ContactStore.switchAccount方法已添加性能监控
-
-- 优化代码，减少不必要的重渲染
-  - VirtualSessionList组件：使用React.memo优化SessionRow组件
-  - 添加自定义比较函数，只在会话数据或选中状态变化时重渲染
-
-- 添加错误处理和边界情况处理
-  - addSession方法：添加边界检查（确保session有效）
-  - addSession方法：检查是否已存在，避免重复添加
-  - addSession方法：添加try-catch错误处理
-  - WebSocket消息处理：添加边界检查和错误处理
-  - WebSocket消息处理：添加超时保护（5秒）
-
-- 优化WebSocket消息处理
-  - CmdNewMessage处理器：添加性能监控
-  - CmdFriendInfoChanged处理器：添加性能监控
-  - msgManageCore核心函数：添加性能监控和错误处理
-  - 统一使用performanceMonitor进行性能监控
-
-- 创建测试用例文档（`src/utils/test/testCases.md`）
-  - 包含会话列表功能测试用例（切换账号、搜索、排序）
-  - 包含联系人列表功能测试用例（分组懒加载、分页、搜索）
-  - 包含右键菜单功能测试用例（分组操作、联系人操作）
-  - 包含缓存功能测试用例（初始化加载、缓存失效）
-  - 包含WebSocket实时更新测试用例（新消息更新、联系人信息更新）
-  - 包含边界情况测试用例（大数据量、网络异常、缓存失效）
-  - 包含性能测试用例和测试报告模板
-
-- 优化ErrorBoundary组件
-  - 集成性能监控（使用performanceMonitor）
-  - 集成Sentry错误上报（使用captureError）
-  - 添加错误统计和记录
-  - 优化错误处理逻辑
-
-- 创建错误处理工具类（`src/utils/errorHandler.ts`）
-  - 实现了ErrorHandler类，统一处理应用错误
-  - 支持错误类型分类（网络、API、验证、权限等）
-  - 支持错误严重程度分级（低、中、高、严重）
-  - 实现错误频率限制（防止错误风暴）
-  - 提供错误处理Hook（useErrorHandler）
-  - 提供错误处理装饰器（handleErrors）
-  - 支持Promise错误处理（handlePromiseError）
-  - 支持异步函数包装（wrapAsync）
-  - 提供错误统计功能（getErrorStats）
-
-**阶段7当前进度**：60%
-
-- ✅ 测试工具已创建
-- ✅ 性能监控已添加（包括WebSocket）
-- ✅ 代码优化已完成
-- ✅ 错误处理已添加（包括WebSocket）
-- ✅ 测试用例文档已创建
-- ✅ ErrorBoundary组件已优化（集成性能监控和Sentry）
-- ✅ 错误处理工具类已创建（errorHandler.ts）
-- ⏳ 待执行实际测试
-
----
-
-## 问题记录
-
-（暂无问题）
-
----
-
-## 备注
-
-（暂无备注）

提示词/存客宝架构改造计划.md

@@ -1,780 +0,0 @@
-# 存客宝新架构改造计划
-
-## 一、改造概述
-
-### 1.1 改造目标
-
-根据新架构设计，对现有代码进行系统性改造，解决大数据量渲染和切换性能问题。
-
-**核心目标**：
-- ✅ 会话列表切换账号 < 100ms（使用索引，O(1)获取）
-- ✅ 联系人列表按分组懒加载，首次展开 < 200ms
-- ✅ 虚拟滚动，只渲染可见区域（10-20条）
-- ✅ 搜索功能改为API驱动，不依赖本地数据
-- ✅ 支持分组和联系人的右键菜单操作
-
-### 1.2 改造范围
-
-| 模块 | 当前状态 | 改造后状态 | 优先级 |
-|------|---------|-----------|--------|
-| SessionStore | 基础状态管理 | 索引+过滤缓存+虚拟滚动 | P0 |
-| ContactStore | 全量加载 | 分组懒加载+分页+虚拟滚动 | P0 |
-| MessageList组件 | 普通列表 | 虚拟滚动列表 | P0 |
-| WechatFriends组件 | 全量加载 | 分组懒加载+虚拟滚动 | P0 |
-| 搜索功能 | 本地搜索 | API搜索（并行请求） | P0 |
-| 右键菜单 | 无 | 分组+联系人右键菜单 | P1 |
-| 缓存策略 | 全量同步 | 按需缓存+TTL | P1 |
-| WeChatAccountStore | 无独立Store | 新增独立Store | P1 |
-
----
-
-## 二、改造阶段规划
-
-### 阶段1：基础架构搭建（2-3周）
-
-**目标**：搭建新的Store结构和数据索引系统
-
-#### 1.1 创建WeChatAccountStore（1-2天）
-
-**文件**：`src/store/module/weChat/account.ts`
-
-**任务清单**：
-- [ ] 创建WeChatAccountStore，管理微信账号列表
-- [ ] 实现selectedAccountId状态（0表示"全部"）
-- [ ] 实现账号状态管理（在线状态、最后同步时间）
-- [ ] 实现账号切换方法
-
-**代码示例**：
-```typescript
-interface WeChatAccountState {
-  accountList: WeChatAccount[];
-  selectedAccountId: number; // 0表示"全部"
-  accountStatusMap: Map<number, AccountStatus>;
-
-  setAccountList: (accounts: WeChatAccount[]) => void;
-  setSelectedAccount: (accountId: number) => void;
-  updateAccountStatus: (accountId: number, status: Partial<AccountStatus>) => void;
-}
-```
-
-**依赖关系**：
-- 依赖：无
-- 被依赖：SessionStore, ContactStore
-
----
-
-#### 1.2 改造SessionStore（3-4天）
-
-**文件**：`src/store/module/weChat/message.ts`
-
-**任务清单**：
-- [ ] 添加allSessions字段（一次性加载全部数据）
-- [ ] 实现sessionIndex（Map<accountId, ChatSession[]>）
-- [ ] 实现filteredSessionsCache（过滤结果缓存）
-- [ ] 实现buildIndexes方法（构建索引）
-- [ ] 实现switchAccount方法（使用索引快速过滤）
-- [ ] 实现addSession方法（增量更新索引）
-- [ ] 保留原有接口，向后兼容
-
-**关键改造点**：
-```typescript
-// 1. 添加索引结构
-sessionIndex: Map<number, ChatSession[]>;
-filteredSessionsCache: Map<number, ChatSession[]>;
-cacheValid: Map<number, boolean>;
-
-// 2. 构建索引方法
-buildIndexes: (sessions: ChatSession[]) => void;
-
-// 3. 快速切换账号
-switchAccount: (accountId: number) => ChatSession[];
-
-// 4. 增量更新
-addSession: (session: ChatSession) => void;
-```
-
-**测试要点**：
-- [ ] 索引构建正确性（10000条数据）
-- [ ] 切换账号性能（< 100ms）
-- [ ] 增量更新索引正确性
-- [ ] 缓存失效机制正确性
-
-**依赖关系**：
-- 依赖：WeChatAccountStore
-- 被依赖：MessageList组件
-
----
-
-#### 1.3 改造ContactStore（5-7天）
-
-**文件**：`src/store/module/weChat/contacts.ts`
-
-**任务清单**：
-- [ ] 重构Store结构，支持分组懒加载
-- [ ] 实现groups字段（分组列表，一次性加载）
-- [ ] 实现expandedGroups（展开的分组）
-- [ ] 实现groupData（Map<groupKey, GroupContactData>）
-- [ ] 实现loadGroups方法（加载分组列表）
-- [ ] 实现loadGroupContacts方法（懒加载分组联系人）
-- [ ] 实现loadMoreGroupContacts方法（分页加载）
-- [ ] 实现searchContacts方法（API搜索，并行请求）
-- [ ] 实现switchAccount方法（切换账号，重新加载展开的分组）
-- [ ] 实现分组编辑方法（addGroup, updateGroup, deleteGroup）
-- [ ] 实现联系人操作方法（updateContactRemark, moveContactToGroup）
-
-**关键改造点**：
-```typescript
-// 1. 新的Store结构
-interface ContactStoreState {
-  groups: ContactGroup[]; // 分组列表
-  expandedGroups: Set<string>; // 展开的分组
-  groupData: Map<string, GroupContactData>; // 分组数据（懒加载）
-  searchKeyword: string;
-  isSearchMode: boolean;
-  searchResults: Contact[]; // API搜索结果
-  // ...
-}
-
-// 2. 懒加载方法
-loadGroupContacts: (groupId, groupType, page, limit) => Promise<void>;
-
-// 3. 搜索方法（API驱动）
-searchContacts: (keyword: string) => Promise<void>;
-
-// 4. 切换账号方法
-switchAccount: (accountId: number) => Promise<void>;
-```
-
-**测试要点**：
-- [ ] 分组列表加载正确性
-- [ ] 分组懒加载正确性（首次展开 < 200ms）
-- [ ] 分页加载正确性
-- [ ] 搜索功能正确性（并行请求）
-- [ ] 切换账号正确性（重新加载展开的分组）
-- [ ] 分组编辑操作正确性
-- [ ] 联系人操作正确性
-
-**依赖关系**：
-- 依赖：WeChatAccountStore, API模块（getContactList, getGroupList, group.ts）
-- 被依赖：WechatFriends组件
-
----
-
-#### 1.4 实现数据索引工具（2-3天）
-
-**文件**：`src/utils/dataIndex.ts`
-
-**任务清单**：
-- [ ] 实现DataIndexManager类
-- [ ] 实现buildIndexes方法（构建会话和联系人索引）
-- [ ] 实现getSessionsByAccount方法（O(1)获取）
-- [ ] 实现getContactsByAccount方法（O(1)获取）
-- [ ] 实现增量更新索引方法
-
-**代码示例**：
-```typescript
-class DataIndexManager {
-  sessionIndex: Map<number, ChatSession[]>;
-  contactIndex: Map<number, Contact[]>;
-
-  buildIndexes(sessions: ChatSession[], contacts: Contact[]): void;
-  getSessionsByAccount(accountId: number): ChatSession[];
-  getContactsByAccount(accountId: number): Contact[];
-  addSession(session: ChatSession): void;
-  addContact(contact: Contact): void;
-}
-```
-
-**测试要点**：
-- [ ] 索引构建性能（10000条数据 < 100ms）
-- [ ] 索引查询性能（O(1)时间复杂度）
-- [ ] 增量更新正确性
-
-**依赖关系**：
-- 依赖：无
-- 被依赖：SessionStore, ContactStore
-
----
-
-### 阶段2：虚拟滚动实现（2-3周）
-
-**目标**：实现会话列表和联系人列表的虚拟滚动
-
-#### 2.1 会话列表虚拟滚动（4-5天）
-
-**文件**：
-- `src/components/VirtualSessionList/index.tsx`（新建）
-- `src/pages/pc/ckbox/weChat/components/SidebarMenu/MessageList/index.tsx`（改造）
-
-**任务清单**：
-- [ ] 安装react-window依赖
-- [ ] 创建VirtualSessionList组件
-- [ ] 实现固定高度虚拟滚动（ITEM_HEIGHT = 72px）
-- [ ] 实现可见区域计算逻辑
-- [ ] 实现滚动事件处理（防抖）
-- [ ] 改造MessageList组件，使用VirtualSessionList
-- [ ] 实现滚动加载更多（如果需要）
-- [ ] 优化SessionItem组件（React.memo）
-
-**关键实现**：
-```typescript
-// 使用react-window的FixedSizeList
-import { FixedSizeList } from 'react-window';
-
-<FixedSizeList
-  height={600}
-  itemCount={filteredSessions.length}
-  itemSize={72}
-  itemData={filteredSessions}
->
-  {SessionItem}
-</FixedSizeList>
-```
-
-**测试要点**：
-- [ ] 虚拟滚动性能（10000条数据，60fps）
-- [ ] 滚动流畅度
-- [ ] 可见区域计算正确性
-- [ ] 内存占用（< 50MB）
-
-**依赖关系**：
-- 依赖：SessionStore, react-window
-- 被依赖：无
-
----
-
-#### 2.2 联系人列表虚拟滚动（5-7天）
-
-**文件**：
-- `src/components/VirtualContactList/index.tsx`（新建）
-- `src/pages/pc/ckbox/weChat/components/SidebarMenu/WechatFriends/index.tsx`（改造）
-
-**任务清单**：
-- [ ] 创建VirtualContactList组件
-- [ ] 实现分组虚拟滚动（每个分组独立）
-- [ ] 实现动态高度处理（分组头部+联系人列表）
-- [ ] 实现分组展开/折叠时的虚拟滚动调整
-- [ ] 实现分组内分页加载（滚动到底部）
-- [ ] 改造WechatFriends组件，使用VirtualContactList
-- [ ] 优化ContactItem组件（React.memo）
-
-**关键实现**：
-```typescript
-// 使用react-window的VariableSizeList（动态高度）
-import { VariableSizeList } from 'react-window';
-
-// 计算每个分组的总高度
-const getGroupHeight = (group: ContactGroup) => {
-  const headerHeight = 40;
-  const contactHeight = 60;
-  const contactCount = groupData.get(groupKey)?.contacts.length || 0;
-  return headerHeight + contactCount * contactHeight;
-};
-```
-
-**测试要点**：
-- [ ] 分组虚拟滚动性能（多个分组，60fps）
-- [ ] 动态高度计算正确性
-- [ ] 分组展开/折叠流畅度
-- [ ] 分页加载正确性
-- [ ] 内存占用（按需占用）
-
-**依赖关系**：
-- 依赖：ContactStore, react-window
-- 被依赖：无
-
----
-
-### 阶段3：搜索和懒加载功能（1-2周）
-
-**目标**：实现API驱动的搜索和分组懒加载
-
-#### 3.1 搜索功能改造（3-4天）
-
-**文件**：
-- `src/store/module/weChat/contacts.ts`（改造）
-- `src/pages/pc/ckbox/weChat/components/SidebarMenu/WechatFriends/index.tsx`（改造）
-
-**任务清单**：
-- [ ] 改造searchContacts方法，改为API调用
-- [ ] 实现并行请求（getContactList + getGroupList）
-- [ ] 实现搜索结果合并和格式转换
-- [ ] 实现搜索Loading状态
-- [ ] 实现搜索模式切换（isSearchMode）
-- [ ] 改造UI，显示搜索结果
-- [ ] 实现清空搜索功能
-
-**关键实现**：
-```typescript
-// 并行请求好友和群列表
-const [friendsResult, groupsResult] = await Promise.all([
-  getContactList({ keyword, wechatAccountId, page: 1, limit: 100 }),
-  getGroupList({ keyword, wechatAccountId, page: 1, limit: 100 }),
-]);
-
-// 合并结果
-const allResults = [...friendsResult.list, ...groupsResult.list];
-```
-
-**测试要点**：
-- [ ] 搜索API调用正确性（并行请求）
-- [ ] 搜索结果合并正确性
-- [ ] 搜索性能（< 250ms）
-- [ ] 搜索模式切换正确性
-
-**依赖关系**：
-- 依赖：API模块（getContactList, getGroupList）
-- 被依赖：WechatFriends组件
-
----
-
-#### 3.2 分组懒加载实现（4-5天）
-
-**文件**：
-- `src/store/module/weChat/contacts.ts`（改造）
-- `src/pages/pc/ckbox/weChat/components/SidebarMenu/WechatFriends/index.tsx`（改造）
-
-**任务清单**：
-- [ ] 实现loadGroups方法（加载分组列表）
-- [ ] 实现toggleGroup方法（切换分组展开/折叠）
-- [ ] 实现loadGroupContacts方法（懒加载分组联系人）
-- [ ] 根据groupType调用不同API（1=好友，2=群）
-- [ ] 实现分页加载（limit + page参数）
-- [ ] 实现加载状态管理
-- [ ] 实现缓存策略（已加载的分组不重复加载）
-- [ ] 改造UI，点击展开时加载数据
-
-**关键实现**：
-```typescript
-// 点击展开分组时
-async function toggleGroup(groupId: number, groupType: 1 | 2) {
-  const groupKey = `${groupId}_${groupType}_${selectedAccountId}`;
-
-  if (expandedGroups.has(groupKey)) {
-    // 折叠
-    expandedGroups.delete(groupKey);
-  } else {
-    // 展开 - 懒加载
-    expandedGroups.add(groupKey);
-    await loadGroupContacts(groupId, groupType, 1, 50);
-  }
-}
-```
-
-**测试要点**：
-- [ ] 分组列表加载正确性
-- [ ] 懒加载正确性（首次展开 < 200ms）
-- [ ] 分页加载正确性
-- [ ] 缓存机制正确性（不重复加载）
-- [ ] 切换账号正确性（重新加载展开的分组）
-
-**依赖关系**：
-- 依赖：API模块（getContactList, getGroupList）
-- 被依赖：WechatFriends组件
-
----
-
-### 阶段4：右键菜单和操作功能（1-2周）
-
-**目标**：实现分组和联系人的右键菜单操作
-
-#### 4.1 分组右键菜单（3-4天）
-
-**文件**：
-- `src/components/GroupContextMenu/index.tsx`（新建）
-- `src/pages/pc/ckbox/weChat/components/SidebarMenu/WechatFriends/index.tsx`（改造）
-
-**任务清单**：
-- [ ] 创建GroupContextMenu组件
-- [ ] 实现新增分组功能（调用addGroup API）
-- [ ] 实现编辑分组功能（调用updateGroup API）
-- [ ] 实现删除分组功能（调用deleteGroup API）
-- [ ] 实现右键菜单显示逻辑
-- [ ] 实现分组编辑表单（Modal）
-- [ ] 更新ContactStore，同步更新分组列表和缓存
-
-**关键实现**：
-```typescript
-// 右键菜单操作
-const menuItems = [
-  { key: 'add', label: '新增分组', onClick: handleAddGroup },
-  { key: 'edit', label: '编辑分组', onClick: handleEditGroup },
-  { key: 'delete', label: '删除分组', onClick: handleDeleteGroup },
-];
-```
-
-**测试要点**：
-- [ ] 新增分组正确性（更新分组列表和缓存）
-- [ ] 编辑分组正确性（更新分组列表和缓存）
-- [ ] 删除分组正确性（清理相关缓存）
-- [ ] UI更新正确性
-
-**依赖关系**：
-- 依赖：API模块（group.ts）, ContactStore
-- 被依赖：WechatFriends组件
-
----
-
-#### 4.2 联系人右键菜单（3-4天）
-
-**文件**：
-- `src/components/ContactContextMenu/index.tsx`（新建）
-- `src/pages/pc/ckbox/weChat/components/SidebarMenu/WechatFriends/index.tsx`（改造）
-
-**任务清单**：
-- [ ] 创建ContactContextMenu组件
-- [ ] 实现修改备注功能（调用updateContact API）
-- [ ] 实现移动分组功能（调用moveGroup API）
-- [ ] 实现右键菜单显示逻辑
-- [ ] 实现修改备注表单（Modal）
-- [ ] 实现移动分组选择器（Modal）
-- [ ] 更新ContactStore，同步更新分组数据和缓存
-
-**关键实现**：
-```typescript
-// 右键菜单操作
-const menuItems = [
-  { key: 'remark', label: '修改备注', onClick: handleUpdateRemark },
-  { key: 'move', label: '移动分组', onClick: handleMoveToGroup },
-];
-```
-
-**测试要点**：
-- [ ] 修改备注正确性（更新分组数据和搜索结果）
-- [ ] 移动分组正确性（从原分组移除，添加到新分组）
-- [ ] 缓存更新正确性
-- [ ] UI更新正确性
-
-**依赖关系**：
-- 依赖：API模块（updateContact, moveGroup）, ContactStore
-- 被依赖：WechatFriends组件
-
----
-
-### 阶段5：缓存策略优化（1周）
-
-**目标**：优化IndexedDB缓存策略，支持按需缓存和TTL
-
-#### 5.1 缓存工具改造（3-4天）
-
-**文件**：
-- `src/utils/cache/index.ts`（新建或改造）
-
-**任务清单**：
-- [ ] 实现缓存工具类（支持TTL）
-- [ ] 实现分组列表缓存（TTL: 30分钟）
-- [ ] 实现分组联系人缓存（TTL: 1小时）
-- [ ] 实现分组统计缓存（TTL: 30分钟）
-- [ ] 实现缓存失效机制
-- [ ] 实现缓存清理机制（定期清理过期缓存）
-
-**关键实现**：
-```typescript
-interface CacheItem<T> {
-  data: T;
-  lastUpdate: number;
-  ttl: number; // 毫秒
-}
-
-// 检查缓存是否有效
-function isCacheValid<T>(item: CacheItem<T>): boolean {
-  return Date.now() - item.lastUpdate < item.ttl;
-}
-```
-
-**测试要点**：
-- [ ] 缓存读写正确性
-- [ ] TTL机制正确性
-- [ ] 缓存失效正确性
-- [ ] 缓存清理正确性
-
-**依赖关系**：
-- 依赖：IndexedDB (Dexie)
-- 被依赖：ContactStore, SessionStore
-
----
-
-#### 5.2 初始化加载优化（2-3天）
-
-**文件**：
-- `src/store/module/weChat/contacts.ts`（改造）
-- `src/store/module/weChat/message.ts`（改造）
-
-**任务清单**：
-- [ ] 实现初始化加载策略（先读缓存，后台更新）
-- [ ] 实现分组列表初始化（检查缓存）
-- [ ] 实现会话列表初始化（检查缓存）
-- [ ] 实现后台更新逻辑（静默更新）
-- [ ] 实现Loading状态优化（有缓存时不显示Loading）
-
-**关键实现**：
-```typescript
-// 初始化加载
-async function initLoad() {
-  // 1. 检查缓存
-  const cached = await getCache(cacheKey);
-  if (cached && isCacheValid(cached)) {
-    // 立即显示缓存数据
-    setData(cached.data);
-    // 后台更新
-    updateInBackground();
-    return;
-  }
-
-  // 2. 无缓存，调用API
-  setLoading(true);
-  const data = await fetchFromAPI();
-  setData(data);
-  await setCache(cacheKey, data);
-  setLoading(false);
-}
-```
-
-**测试要点**：
-- [ ] 缓存读取正确性
-- [ ] 后台更新正确性
-- [ ] Loading状态正确性
-
-**依赖关系**：
-- 依赖：缓存工具
-- 被依赖：组件初始化
-
----
-
-### 阶段6：WebSocket实时更新优化（1周）
-
-**目标**：优化WebSocket实时更新逻辑，同步更新内存和缓存
-
-#### 6.1 WebSocket更新逻辑改造（3-4天）
-
-**文件**：
-- `src/store/module/websocket/msgManage.ts`（改造）
-- `src/store/module/weChat/contacts.ts`（改造）
-- `src/store/module/weChat/message.ts`（改造）
-
-**任务清单**：
-- [ ] 改造WebSocket消息处理，支持新联系人更新
-- [ ] 实现新联系人添加到对应分组（如果已加载）
-- [ ] 实现新联系人更新分组统计
-- [ ] 实现新联系人更新搜索结果（如果匹配）
-- [ ] 实现新联系人同步更新缓存
-- [ ] 实现新会话更新索引和缓存
-
-**关键实现**：
-```typescript
-// WebSocket收到新联系人
-function handleWebSocketNewContact(contact: Contact) {
-  const groupKey = `${contact.groupId}_${contact.groupType}_${contact.wechatAccountId}`;
-
-  // 1. 更新内存（如果分组已加载）
-  if (groupData.has(groupKey) && groupData.get(groupKey)!.loaded) {
-    groupData.get(groupKey)!.contacts.push(contact);
-  }
-
-  // 2. 更新缓存
-  await updateCache(groupKey, contact);
-
-  // 3. 更新搜索结果（如果匹配）
-  if (isSearchMode && matchesSearchKeyword(contact, searchKeyword)) {
-    searchResults.push(contact);
-  }
-}
-```
-
-**测试要点**：
-- [ ] WebSocket更新正确性
-- [ ] 分组数据更新正确性
-- [ ] 缓存同步正确性
-- [ ] 搜索结果更新正确性
-
-**依赖关系**：
-- 依赖：WebSocket Store, ContactStore, SessionStore
-- 被依赖：无
-
----
-
-### 阶段7：测试和优化（2-3周）
-
-**目标**：全面测试和性能优化
-
-#### 7.1 功能测试（1周）
-
-**任务清单**：
-- [ ] 会话列表功能测试（切换账号、搜索、排序）
-- [ ] 联系人列表功能测试（分组懒加载、分页、搜索）
-- [ ] 右键菜单功能测试（分组操作、联系人操作）
-- [ ] 缓存功能测试（初始化加载、后台更新）
-- [ ] WebSocket更新测试（实时更新）
-- [ ] 边界情况测试（大数据量、网络异常、缓存失效）
-
-**测试场景**：
-- [ ] 10000条会话数据，切换账号性能
-- [ ] 50000条联系人数据，分组懒加载性能
-- [ ] 搜索功能（并行请求）
-- [ ] 分组编辑操作（新增、编辑、删除）
-- [ ] 联系人操作（修改备注、移动分组）
-- [ ] 缓存策略（初始化、后台更新、TTL）
-
----
-
-#### 7.2 性能测试和优化（1周）
-
-**任务清单**：
-- [ ] 会话列表性能测试（切换账号 < 100ms）
-- [ ] 联系人列表性能测试（首次展开 < 200ms）
-- [ ] 虚拟滚动性能测试（60fps）
-- [ ] 内存占用测试（< 100MB）
-- [ ] 网络请求优化（减少不必要的请求）
-- [ ] 渲染优化（减少不必要的重渲染）
-
-**性能指标**：
-- [ ] 会话列表切换账号：< 100ms
-- [ ] 联系人分组展开：< 200ms
-- [ ] 虚拟滚动帧率：≥ 60fps
-- [ ] 内存占用：< 100MB
-- [ ] 搜索响应时间：< 250ms
-
----
-
-#### 7.3 兼容性测试（3-5天）
-
-**任务清单**：
-- [ ] 浏览器兼容性测试（Chrome, Firefox, Edge, Safari）
-- [ ] 不同屏幕尺寸测试（1920x1080, 1366x768, 移动端）
-- [ ] 不同数据量测试（1000条、10000条、50000条）
-- [ ] 网络环境测试（正常、慢速、离线）
-
----
-
-## 三、依赖关系图
-
-```
-WeChatAccountStore (新建)
-    ↓
-SessionStore (改造) ──→ MessageList组件 (改造)
-    ↓
-ContactStore (改造) ──→ WechatFriends组件 (改造)
-    ↓
-DataIndexManager (新建)
-    ↓
-VirtualSessionList (新建)
-VirtualContactList (新建)
-    ↓
-GroupContextMenu (新建)
-ContactContextMenu (新建)
-    ↓
-缓存工具 (新建/改造)
-    ↓
-WebSocket更新 (改造)
-```
-
----
-
-## 四、风险评估和应对
-
-### 4.1 技术风险
-
-| 风险 | 影响 | 应对措施 |
-|------|------|---------|
-| 虚拟滚动兼容性问题 | 高 | 充分测试各种浏览器，准备降级方案 |
-| 动态高度计算不准确 | 中 | 使用Intersection Observer动态测量 |
-| 内存占用过高 | 中 | 限制Memory Cache大小，使用LRU策略 |
-| 索引构建性能问题 | 低 | 使用增量更新，避免全量重建 |
-
-### 4.2 业务风险
-
-| 风险 | 影响 | 应对措施 |
-|------|------|---------|
-| 数据不一致 | 高 | 版本号机制，定期全量同步 |
-| 切换体验差 | 中 | 预加载策略，骨架屏加载 |
-| API调用失败 | 中 | 错误重试，降级到缓存数据 |
-
----
-
-## 五、改造时间表
-
-| 阶段 | 任务 | 预计时间 | 负责人 |
-|------|------|---------|--------|
-| 阶段1 | 基础架构搭建 | 2-3周 | 后端+前端 |
-| 阶段2 | 虚拟滚动实现 | 2-3周 | 前端 |
-| 阶段3 | 搜索和懒加载 | 1-2周 | 前端 |
-| 阶段4 | 右键菜单功能 | 1-2周 | 前端 |
-| 阶段5 | 缓存策略优化 | 1周 | 前端 |
-| 阶段6 | WebSocket优化 | 1周 | 前端 |
-| 阶段7 | 测试和优化 | 2-3周 | 全栈 |
-| **总计** | | **10-15周** | |
-
----
-
-## 六、关键里程碑
-
-### 里程碑1：基础架构完成（3周后）
-- ✅ WeChatAccountStore创建完成
-- ✅ SessionStore改造完成（索引+缓存）
-- ✅ ContactStore改造完成（懒加载结构）
-- ✅ 数据索引工具完成
-
-### 里程碑2：虚拟滚动完成（6周后）
-- ✅ 会话列表虚拟滚动完成
-- ✅ 联系人列表虚拟滚动完成
-- ✅ 性能测试通过（60fps）
-
-### 里程碑3：核心功能完成（9周后）
-- ✅ 搜索功能改造完成（API驱动）
-- ✅ 分组懒加载完成
-- ✅ 右键菜单功能完成
-
-### 里程碑4：优化完成（12周后）
-- ✅ 缓存策略优化完成
-- ✅ WebSocket更新优化完成
-- ✅ 性能优化完成
-
-### 里程碑5：上线准备（15周后）
-- ✅ 全面测试通过
-- ✅ 性能指标达标
-- ✅ 文档完善
-- ✅ 上线部署
-
----
-
-## 七、注意事项
-
-### 7.1 向后兼容
-
-- ✅ 保留原有Store接口，逐步迁移
-- ✅ 新旧代码并存，逐步替换
-- ✅ 数据迁移脚本，平滑过渡
-
-### 7.2 代码质量
-
-- ✅ 每个阶段完成后进行Code Review
-- ✅ 编写单元测试和集成测试
-- ✅ 遵循现有代码规范
-
-### 7.3 文档更新
-
-- ✅ 更新API文档
-- ✅ 更新组件文档
-- ✅ 更新架构文档
-
----
-
-## 八、总结
-
-本改造计划按照新架构设计，分7个阶段逐步实施：
-
-1. **基础架构搭建**：创建新的Store结构和数据索引系统
-2. **虚拟滚动实现**：解决大数据量渲染问题
-3. **搜索和懒加载**：优化数据加载策略
-4. **右键菜单功能**：完善交互功能
-5. **缓存策略优化**：提升加载速度
-6. **WebSocket优化**：保证数据实时性
-7. **测试和优化**：确保质量和性能
-
-**预计总时间**：10-15周
-
-**关键成功因素**：
-- ✅ 严格按照阶段执行，每个阶段完成后进行测试
-- ✅ 保持向后兼容，平滑过渡
-- ✅ 充分测试，确保质量
-- ✅ 持续优化，提升性能

提示词/技术栈.md

@@ -1,34 +0,0 @@
-## 使用技术栈
-
-- React 18
-- TypeScript
-- Vite（新一代前端构建工具）
-- axios
-- sass (scss)
-- React Router v6
-- antd-mobile
-- antd（已设置基础单位为 rem，配合 postcss-pxtorem）
-- postcss-pxtorem（px 转 rem，移动端适配）
-- ESLint + Prettier（代码规范与自动格式化）
-- 路径别名 @ 指向 src 目录
-
-## 关于兼容与工程化
-
-- 自动化脚本（yarn lint、yarn dev 等）
-- 移动端 rem 适配（html 根字体 + pxtorem）
-- iOS 浏览器滚动回弹兼容问题已通过全局样式处理
-- 支持 VS Code 编辑器自动格式化（推荐配合 ESLint/Prettier 插件）
-
-## 目录结构简要
-
-- src/ 业务源码（pages、api、styles、App.tsx、main.tsx 等）
-- public/ 静态资源目录
-- index.html 项目入口（根目录）
-- vite.config.ts 构建与路径别名配置
-- tsconfig.json TypeScript 配置
-- .eslintrc.js 代码规范配置
-
-## 新增优化组件
-
-TanStack Query
-Sentry

提示词/本地数据库缓存分析.md

@@ -1,287 +0,0 @@
-# 本地数据库（IndexedDB）缓存必要性分析
-
-## 一、当前使用情况
-
-### 1.1 会话列表（Chat Sessions）
-
-**使用方式**：
-- ✅ 一次性加载全部会话数据
-- ✅ 同步到本地数据库
-- ✅ 切换账号时从本地数据库过滤
-
-**本地数据库的作用**：
-- 快速显示：首次加载时先显示本地数据，后台同步服务器
-- 离线访问：网络断开时仍可查看历史会话
-- 减少API调用：切换账号时不需要重新请求
-
-### 1.2 联系人列表（Contacts）- 旧架构
-
-**使用方式**：
-- ✅ 一次性加载所有好友和群（`getAllFriends` + `getAllGroups`）
-- ✅ 同步到本地数据库（`syncContactsFromServer`）
-- ✅ 分组统计从本地数据库查询（`getGroupStatistics`）
-- ✅ 分组联系人从本地数据库分页获取（`getContactsByGroupPaginated`）
-
-**本地数据库的作用**：
-- 快速显示：先显示本地数据，后台同步
-- 分组统计：快速统计分组数量
-- 分页加载：从本地数据库分页获取
-
-## 二、新架构下的变化
-
-### 2.1 会话列表（保持不变）
-
-**仍然需要本地数据库**：
-- ✅ 一次性加载全部，本地缓存价值高
-- ✅ 切换账号时快速过滤
-- ✅ 离线访问
-
-### 2.2 联系人列表（重大变化）
-
-**新架构**：
-- ❌ **不再一次性加载全部**：改为按分组懒加载
-- ✅ **分组列表**：一次性加载分组信息（数量少，10-50个）
-- ✅ **分组联系人**：按需加载（点击展开时加载）
-- ✅ **搜索**：直接调用API，不依赖本地数据
-- ✅ **分组统计**：从API获取（`getGroupStatistics` 改为调用API）
-
-## 三、本地数据库价值分析
-
-### 3.1 联系人列表 - 是否需要本地数据库？
-
-#### 方案A：完全移除本地数据库（不推荐）
-
-**优点**：
-- ✅ 架构简单，不需要维护数据同步
-- ✅ 数据始终最新，不会出现不一致
-- ✅ 减少存储空间占用
-
-**缺点**：
-- ❌ **每次打开都需要加载**：分组列表、分组统计都需要调用API
-- ❌ **切换账号慢**：需要重新加载所有展开的分组
-- ❌ **离线不可用**：网络断开时无法查看联系人
-- ❌ **用户体验差**：每次操作都有loading，没有缓存加速
-
-#### 方案B：保留本地数据库，但改变使用方式（推荐）
-
-**保留的原因**：
-
-1. **分组列表缓存**（价值：⭐⭐⭐）
-   ```typescript
-   // 分组列表数量少（10-50个），变化不频繁
-   // 缓存后可以快速显示，减少API调用
-   // 但需要定期更新（例如：每小时或每次打开时检查）
-   ```
-
-2. **分组联系人缓存**（价值：⭐⭐⭐⭐⭐）
-   ```typescript
-   // 按分组缓存已加载的联系人数据
-   // 切换账号时，如果之前加载过，可以直接显示
-   // 大幅提升切换账号的速度
-   // 缓存策略：按 groupKey 缓存，TTL 1小时
-   ```
-
-3. **分组统计缓存**（价值：⭐⭐⭐）
-   ```typescript
-   // 分组数量统计可以缓存
-   // 快速显示分组列表，后台同步最新数据
-   // 缓存策略：TTL 30分钟
-   ```
-
-4. **离线访问**（价值：⭐⭐⭐⭐）
-   ```typescript
-   // 网络断开时，仍可查看已缓存的联系人
-   // 提升用户体验
-   ```
-
-**改变的使用方式**：
-
-1. **不再一次性同步全部数据**
-   ```typescript
-   // ❌ 旧方式：syncContactsFromServer（一次性加载全部）
-   // ✅ 新方式：按分组懒加载，只缓存已加载的分组
-   ```
-
-2. **搜索不依赖本地数据**
-   ```typescript
-   // ❌ 旧方式：从本地数据库搜索
-   // ✅ 新方式：直接调用API搜索
-   ```
-
-3. **分组统计改为API优先**
-   ```typescript
-   // ❌ 旧方式：从本地数据库统计
-   // ✅ 新方式：调用API获取，本地数据库作为缓存
-   ```
-
-## 四、推荐的缓存策略
-
-### 4.1 会话列表缓存（保持不变）
-
-```typescript
-// 缓存策略：全量缓存
-// 更新策略：WebSocket实时更新 + 定期全量同步
-// TTL：无限制（通过版本号控制）
-```
-
-### 4.2 联系人列表缓存（新策略）
-
-#### 4.2.1 分组列表缓存
-
-```typescript
-interface GroupListCache {
-  groups: ContactGroup[]; // 分组列表
-  lastUpdateTime: number; // 最后更新时间
-  ttl: number; // 缓存有效期（30分钟）
-}
-
-// 使用策略：
-// 1. 首次加载：调用API获取分组列表
-// 2. 后续加载：检查缓存是否有效
-//    - 有效 → 直接使用缓存，后台更新
-//    - 无效 → 调用API更新
-```
-
-#### 4.2.2 分组联系人缓存
-
-```typescript
-interface GroupContactsCache {
-  groupKey: string; // `${groupId}_${groupType}_${accountId}`
-  contacts: Contact[]; // 已加载的联系人
-  page: number; // 当前页码
-  hasMore: boolean; // 是否还有更多
-  lastUpdateTime: number; // 最后更新时间
-  ttl: number; // 缓存有效期（1小时）
-}
-
-// 使用策略：
-// 1. 展开分组时：检查缓存
-//    - 有缓存且有效 → 直接显示，后台更新
-//    - 无缓存或失效 → 调用API加载
-// 2. 切换账号时：检查缓存
-//    - 有缓存 → 直接显示（快速切换）
-//    - 无缓存 → 调用API加载
-```
-
-#### 4.2.3 分组统计缓存
-
-```typescript
-interface GroupStatsCache {
-  accountId: number;
-  stats: Map<string, number>; // groupKey → count
-  lastUpdateTime: number;
-  ttl: number; // 缓存有效期（30分钟）
-}
-
-// 使用策略：
-// 1. 显示分组列表时：检查缓存
-//    - 有缓存 → 显示缓存数据，后台更新
-//    - 无缓存 → 调用API获取
-```
-
-### 4.3 搜索功能（不使用缓存）
-
-```typescript
-// 搜索不缓存，原因：
-// 1. 搜索结果需要实时性
-// 2. 搜索关键词变化频繁
-// 3. 缓存命中率低
-```
-
-## 五、缓存更新策略
-
-### 5.1 实时更新（WebSocket）
-
-```typescript
-// WebSocket收到新联系人时：
-// 1. 更新对应分组的缓存（如果已缓存）
-// 2. 更新分组统计缓存
-// 3. 不更新搜索缓存（搜索不缓存）
-```
-
-### 5.2 定期更新
-
-```typescript
-// 1. 分组列表：每次打开时检查，超过30分钟则更新
-// 2. 分组联系人：每次展开时检查，超过1小时则更新
-// 3. 分组统计：每次显示时检查，超过30分钟则更新
-```
-
-### 5.3 手动刷新
-
-```typescript
-// 用户点击刷新时：
-// 1. 清空所有联系人缓存
-// 2. 重新加载分组列表和统计
-// 3. 重新加载已展开的分组
-```
-
-## 六、实施建议
-
-### 6.1 保留本地数据库，但优化使用方式
-
-**理由**：
-1. ✅ **提升用户体验**：缓存可以快速显示，减少loading时间
-2. ✅ **减少API调用**：已加载的数据不需要重复请求
-3. ✅ **离线访问**：网络断开时仍可查看已缓存的数据
-4. ✅ **切换账号优化**：切换账号时，如果之前加载过，可以直接显示
-
-**优化点**：
-1. ✅ **改变同步策略**：不再一次性同步全部，改为按需缓存
-2. ✅ **搜索不缓存**：搜索直接调用API，保证实时性
-3. ✅ **缓存TTL**：设置合理的缓存有效期，避免数据过期
-4. ✅ **缓存清理**：定期清理过期缓存，控制存储空间
-
-### 6.2 缓存架构设计
-
-```typescript
-interface ContactCacheManager {
-  // 分组列表缓存
-  getGroupList: (accountId: number) => Promise<ContactGroup[]>;
-  setGroupList: (accountId: number, groups: ContactGroup[]) => void;
-
-  // 分组联系人缓存
-  getGroupContacts: (groupKey: string) => Promise<GroupContactData | null>;
-  setGroupContacts: (groupKey: string, data: GroupContactData) => void;
-
-  // 分组统计缓存
-  getGroupStats: (accountId: number) => Promise<Map<string, number> | null>;
-  setGroupStats: (accountId: number, stats: Map<string, number>) => void;
-
-  // 缓存清理
-  clearExpiredCache: () => void;
-  clearAllCache: () => void;
-}
-```
-
-## 七、总结
-
-### 7.1 是否需要本地数据库？
-
-**答案：需要，但使用方式需要改变**
-
-### 7.2 保留的原因
-
-1. ✅ **性能优化**：缓存可以大幅提升加载速度
-2. ✅ **用户体验**：减少loading时间，支持离线访问
-3. ✅ **减少API调用**：已加载的数据不需要重复请求
-4. ✅ **切换账号优化**：切换账号时快速显示已缓存的数据
-
-### 7.3 改变的使用方式
-
-1. ✅ **不再一次性同步全部**：改为按分组懒加载和缓存
-2. ✅ **搜索不缓存**：搜索直接调用API，保证实时性
-3. ✅ **设置缓存TTL**：避免数据过期，定期更新
-4. ✅ **按需缓存**：只缓存已加载的分组，不缓存未加载的数据
-
-### 7.4 推荐的缓存策略
-
-| 数据类型 | 是否缓存 | TTL | 更新策略 |
-|---------|---------|-----|---------|
-| 会话列表 | ✅ 是 | 无限制 | WebSocket实时更新 |
-| 分组列表 | ✅ 是 | 30分钟 | 每次打开时检查 |
-| 分组联系人 | ✅ 是 | 1小时 | 展开时检查，WebSocket更新 |
-| 分组统计 | ✅ 是 | 30分钟 | 显示时检查，WebSocket更新 |
-| 搜索结果 | ❌ 否 | - | 直接调用API |
-
-**结论**：保留本地数据库，但改变使用方式，从"全量同步"改为"按需缓存"，既能享受缓存带来的性能提升，又能避免全量同步的缺点。

提示词/测试和优化指南.md

@@ -1,459 +0,0 @@
-# 存客宝新架构测试和优化指南
-
-## 一、功能测试清单
-
-### 1.1 会话列表功能测试
-
-#### 测试场景1：切换账号
-- [ ] 测试切换到"全部"账号（accountId=0）
-- [ ] 测试切换到特定账号
-- [ ] 测试切换账号的性能（应 < 100ms）
-- [ ] 测试切换账号后会话列表正确显示
-- [ ] 测试切换账号后缓存是否正确使用
-
-**测试步骤**：
-1. 打开会话列表
-2. 切换到不同账号
-3. 观察切换速度和数据正确性
-
-**预期结果**：
-- 切换速度 < 100ms
-- 会话列表正确显示对应账号的数据
-- 切换回之前账号时使用缓存（更快）
-
----
-
-#### 测试场景2：搜索功能
-- [ ] 测试搜索关键词输入
-- [ ] 测试搜索防抖（300ms延迟）
-- [ ] 测试搜索结果正确性
-- [ ] 测试清空搜索
-- [ ] 测试搜索性能（应 < 250ms）
-
-**测试步骤**：
-1. 在搜索框输入关键词
-2. 观察搜索延迟和结果
-3. 清空搜索框
-
-**预期结果**：
-- 搜索有300ms防抖延迟
-- 搜索结果正确匹配
-- 清空后恢复原列表
-
----
-
-#### 测试场景3：排序功能
-- [ ] 测试按时间排序（默认）
-- [ ] 测试按未读数排序
-- [ ] 测试按名称排序
-- [ ] 测试置顶会话始终在最前
-
-**测试步骤**：
-1. 切换不同的排序方式
-2. 观察会话列表顺序
-
-**预期结果**：
-- 排序正确
-- 置顶会话始终在最前
-
----
-
-### 1.2 联系人列表功能测试
-
-#### 测试场景1：分组懒加载
-- [ ] 测试分组列表加载
-- [ ] 测试分组展开/折叠
-- [ ] 测试分组首次展开性能（应 < 200ms）
-- [ ] 测试分组内分页加载
-- [ ] 测试分组数据缓存
-
-**测试步骤**：
-1. 打开联系人列表
-2. 展开不同分组
-3. 滚动到分组底部触发加载更多
-
-**预期结果**：
-- 分组列表快速加载
-- 首次展开 < 200ms
-- 分页加载正常工作
-- 切换账号后重新展开分组时使用缓存
-
----
-
-#### 测试场景2：搜索功能
-- [ ] 测试搜索关键词输入
-- [ ] 测试搜索防抖（300ms延迟）
-- [ ] 测试API并行请求（好友和群列表）
-- [ ] 测试搜索结果正确性
-- [ ] 测试搜索性能（应 < 250ms）
-
-**测试步骤**：
-1. 在搜索框输入关键词
-2. 观察搜索延迟和结果
-3. 检查网络请求（应并行请求好友和群列表）
-
-**预期结果**：
-- 搜索有300ms防抖延迟
-- 并行请求好友和群列表
-- 搜索结果正确匹配
-
----
-
-### 1.3 右键菜单功能测试
-
-#### 测试场景1：分组右键菜单
-- [ ] 测试新增分组
-- [ ] 测试编辑分组
-- [ ] 测试删除分组
-- [ ] 测试分组操作后列表更新
-
-**测试步骤**：
-1. 右键点击分组
-2. 执行新增/编辑/删除操作
-3. 观察分组列表更新
-
-**预期结果**：
-- 操作成功
-- 分组列表立即更新
-- 缓存同步更新
-
----
-
-#### 测试场景2：联系人右键菜单
-- [ ] 测试修改备注
-- [ ] 测试移动分组
-- [ ] 测试操作后数据更新
-- [ ] 测试操作后缓存更新
-
-**测试步骤**：
-1. 右键点击联系人
-2. 执行修改备注/移动分组操作
-3. 观察数据更新
-
-**预期结果**：
-- 操作成功
-- 联系人数据立即更新
-- 分组数据同步更新
-- 缓存同步更新
-
----
-
-### 1.4 缓存功能测试
-
-#### 测试场景1：初始化加载
-- [ ] 测试有缓存时的加载速度（应 < 50ms）
-- [ ] 测试无缓存时的加载速度
-- [ ] 测试后台更新机制
-- [ ] 测试Loading状态（有缓存时不显示）
-
-**测试步骤**：
-1. 清除缓存后首次加载
-2. 再次加载（有缓存）
-3. 观察加载速度和Loading状态
-
-**预期结果**：
-- 有缓存时 < 50ms，不显示Loading
-- 无缓存时正常API调用
-- 后台静默更新缓存
-
----
-
-#### 测试场景2：缓存失效和清理
-- [ ] 测试TTL机制（30分钟/1小时）
-- [ ] 测试定期清理过期缓存
-- [ ] 测试手动失效缓存
-
-**测试步骤**：
-1. 等待缓存过期
-2. 观察缓存是否自动清理
-3. 手动失效缓存
-
-**预期结果**：
-- TTL机制正常工作
-- 过期缓存自动清理
-- 手动失效正常工作
-
----
-
-### 1.5 WebSocket实时更新测试
-
-#### 测试场景1：新消息更新
-- [ ] 测试收到新消息时会话列表更新
-- [ ] 测试会话索引增量更新
-- [ ] 测试会话缓存更新
-- [ ] 测试更新性能（应 < 10ms）
-
-**测试步骤**：
-1. 打开会话列表
-2. 接收新消息
-3. 观察会话列表更新
-
-**预期结果**：
-- 会话列表立即更新
-- 索引增量更新
-- 缓存同步更新
-- 更新速度 < 10ms
-
----
-
-#### 测试场景2：联系人信息更新
-- [ ] 测试联系人信息变更时分组数据更新
-- [ ] 测试搜索结果更新
-- [ ] 测试缓存更新
-
-**测试步骤**：
-1. 打开联系人列表
-2. 接收联系人信息变更
-3. 观察数据更新
-
-**预期结果**：
-- 分组数据立即更新
-- 搜索结果同步更新
-- 缓存同步更新
-
----
-
-### 1.6 边界情况测试
-
-#### 测试场景1：大数据量
-- [ ] 测试10000条会话数据
-- [ ] 测试50000条联系人数据
-- [ ] 测试切换账号性能
-- [ ] 测试内存占用
-
-**测试步骤**：
-1. 准备大量测试数据
-2. 执行各种操作
-3. 观察性能和内存
-
-**预期结果**：
-- 切换账号 < 100ms
-- 内存占用 < 100MB
-- 虚拟滚动正常工作
-
----
-
-#### 测试场景2：网络异常
-- [ ] 测试网络断开时的降级处理
-- [ ] 测试API失败时的错误处理
-- [ ] 测试缓存降级
-
-**测试步骤**：
-1. 断开网络
-2. 执行各种操作
-3. 观察错误处理
-
-**预期结果**：
-- 使用缓存数据降级
-- 错误提示友好
-- 网络恢复后自动同步
-
----
-
-## 二、性能测试和优化
-
-### 2.1 性能指标
-
-| 指标 | 目标值 | 测试方法 |
-|------|--------|---------|
-| 会话列表切换账号 | < 100ms | 使用Performance API测量 |
-| 联系人分组展开 | < 200ms | 使用Performance API测量 |
-| 虚拟滚动帧率 | ≥ 60fps | 使用Chrome DevTools |
-| 内存占用 | < 100MB | 使用Chrome DevTools Memory |
-| 搜索响应时间 | < 250ms | 使用Performance API测量 |
-| 缓存读取速度 | < 50ms | 使用Performance API测量 |
-
----
-
-### 2.2 性能优化建议
-
-#### 优化1：减少不必要的重渲染
-- 使用 `React.memo` 优化组件
-- 使用 `useMemo` 和 `useCallback` 优化计算
-- 避免在render中创建新对象
-
-#### 优化2：减少网络请求
-- 使用缓存减少API调用
-- 合并多个请求
-- 使用防抖和节流
-
-#### 优化3：优化虚拟滚动
-- 调整 `OVERSCAN_COUNT` 参数
-- 优化 `ITEM_HEIGHT` 计算
-- 使用 `React.memo` 优化列表项
-
-#### 优化4：优化内存使用
-- 及时清理不需要的数据
-- 限制缓存大小
-- 使用LRU策略
-
----
-
-## 三、兼容性测试
-
-### 3.1 浏览器兼容性
-
-| 浏览器 | 版本 | 测试状态 |
-|--------|------|---------|
-| Chrome | 最新版 | 待测试 |
-| Firefox | 最新版 | 待测试 |
-| Edge | 最新版 | 待测试 |
-| Safari | 最新版 | 待测试 |
-
-**测试要点**：
-- IndexedDB支持
-- WebSocket支持
-- ES6+语法支持
-- CSS Grid/Flexbox支持
-
----
-
-### 3.2 屏幕尺寸测试
-
-| 分辨率 | 测试状态 |
-|--------|---------|
-| 1920x1080 | 待测试 |
-| 1366x768 | 待测试 |
-| 移动端 | 待测试 |
-
-**测试要点**：
-- 布局适配
-- 虚拟滚动适配
-- 右键菜单适配
-
----
-
-### 3.3 数据量测试
-
-| 数据量 | 测试状态 |
-|--------|---------|
-| 1000条 | 待测试 |
-| 10000条 | 待测试 |
-| 50000条 | 待测试 |
-
-**测试要点**：
-- 加载性能
-- 内存占用
-- 操作响应速度
-
----
-
-## 四、测试工具和方法
-
-### 4.1 性能测试工具
-
-1. **Chrome DevTools**
-   - Performance面板：测量渲染性能
-   - Memory面板：测量内存占用
-   - Network面板：测量网络请求
-
-2. **React DevTools**
-   - Profiler：分析组件渲染性能
-   - Components：检查组件状态
-
-3. **自定义性能监控**
-   - 使用Performance API
-   - 添加性能日志
-
----
-
-### 4.2 测试脚本示例
-
-```typescript
-// 性能测试示例
-const measurePerformance = (name: string, fn: () => void) => {
-  const start = performance.now();
-  fn();
-  const end = performance.now();
-  console.log(`${name}: ${end - start}ms`);
-};
-
-// 测试切换账号性能
-measurePerformance("切换账号", () => {
-  switchAccount(accountId);
-});
-```
-
----
-
-## 五、已知问题和解决方案
-
-### 5.1 已知问题
-
-1. **问题**：虚拟滚动在某些浏览器上可能不流畅
-   - **解决方案**：使用 `will-change` CSS属性优化
-
-2. **问题**：大量数据时内存占用较高
-   - **解决方案**：限制缓存大小，使用LRU策略
-
-3. **问题**：网络异常时用户体验不佳
-   - **解决方案**：使用缓存降级，显示友好提示
-
----
-
-## 六、测试报告模板
-
-### 测试报告
-
-**测试日期**：2024-XX-XX
-**测试人员**：XXX
-**测试环境**：Chrome 最新版 / Windows 10
-
-#### 功能测试结果
-- [x] 会话列表功能：通过
-- [x] 联系人列表功能：通过
-- [x] 右键菜单功能：通过
-- [x] 缓存功能：通过
-- [x] WebSocket更新：通过
-
-#### 性能测试结果
-- 会话列表切换账号：XXms（目标：< 100ms）
-- 联系人分组展开：XXms（目标：< 200ms）
-- 虚拟滚动帧率：XXfps（目标：≥ 60fps）
-- 内存占用：XXMB（目标：< 100MB）
-
-#### 问题记录
-1. 问题描述
-2. 复现步骤
-3. 解决方案
-
----
-
-## 七、优化建议
-
-### 7.1 代码优化
-- [ ] 使用 `React.memo` 优化列表项组件
-- [ ] 使用 `useMemo` 优化计算
-- [ ] 使用 `useCallback` 优化回调函数
-- [ ] 减少不必要的状态更新
-
-### 7.2 性能优化
-- [ ] 优化虚拟滚动参数
-- [ ] 优化缓存策略
-- [ ] 优化网络请求
-- [ ] 优化内存使用
-
-### 7.3 用户体验优化
-- [ ] 添加加载骨架屏
-- [ ] 添加错误提示
-- [ ] 添加操作反馈
-- [ ] 优化动画效果
-
----
-
-## 八、后续优化计划
-
-1. **短期优化**（1周内）
-   - 完成功能测试
-   - 修复发现的问题
-   - 优化关键性能指标
-
-2. **中期优化**（1个月内）
-   - 完成性能测试
-   - 实施性能优化
-   - 完成兼容性测试
-
-3. **长期优化**（持续）
-   - 监控性能指标
-   - 持续优化
-   - 收集用户反馈

提示词/聊天功能逻辑.md

@@ -1,661 +0,0 @@
-# 聊天功能逻辑文档
-
-## 一、整体架构
-
-### 1.1 核心组件
-
-```
-ChatWindow (聊天窗口容器)
-├── MessageList (会话列表 - 左侧)
-├── MessageRecord (消息记录 - 中间)
-└── MessageEnter (消息输入 - 底部)
-```
-
-### 1.2 状态管理模块
-
-- **`weChat/weChat.ts`**: 聊天核心状态（当前联系人、消息列表、AI状态等）
-- **`weChat/contacts.ts`**: 联系人管理
-- **`weChat/message.ts`**: 会话列表状态
-- **`websocket/websocket.ts`**: WebSocket连接管理
-- **`websocket/msgManage.ts`**: WebSocket消息处理
-
-### 1.3 数据存储
-
-- **IndexedDB (Dexie)**:
-  - `chatSessions`: 会话列表
-  - `contactsUnified`: 联系人数据
-  - `messages`: 消息记录（按需存储）
-
----
-
-## 二、会话列表管理 (MessageList)
-
-### 2.1 初始化流程
-
-```
-1. 组件挂载
-   ↓
-2. 从 IndexedDB 加载缓存会话列表（立即显示）
-   ↓
-3. 后台同步服务器数据（分页，每页500条）
-   ↓
-4. 同步完成后异步补充未知联系人详情
-   ↓
-5. 订阅数据库变更，自动更新UI
-```
-
-### 2.2 数据同步机制
-
-**同步策略**：
-
-- **首次加载**: 先显示缓存，后台同步服务器数据
-- **分页同步**: 每页500条，逐页同步，立即更新UI
-- **增量更新**: 通过WebSocket实时更新
-- **未知联系人补充**: 同步完成后异步拉取缺失的头像、昵称等信息
-
-**同步状态管理**：
-
-```typescript
-// 同步状态栏显示
-- 同步中: 显示"同步中..." + Loading图标
-- 同步完成: 显示"同步完成" + 手动同步按钮
-```
-
-### 2.3 会话列表操作
-
-**置顶/取消置顶**：
-
-1. 立即更新UI（乐观更新）
-2. 调用API更新服务器
-3. 更新数据库
-4. 失败时回滚UI
-
-**删除会话**：
-
-1. 立即从UI移除
-2. 调用API更新配置（`chat: false`）
-3. 从数据库删除
-4. 失败时恢复UI
-
-**修改备注**：
-
-1. 立即更新UI
-2. 通过WebSocket发送命令（`CmdModifyFriendRemark` / `CmdModifyGroupRemark`）
-3. 调用API更新
-4. 更新数据库
-5. 失败时回滚
-
-### 2.4 WebSocket消息更新
-
-**事件流程**：
-
-```
-WebSocket收到新消息
-  ↓
-msgManage.ts 处理 CmdNewMessage
-  ↓
-触发 chatMessageReceived 自定义事件
-  ↓
-MessageList 监听事件
-  ↓
-更新会话列表（内容、未读数、时间）
-```
-
-**处理逻辑**：
-
-- 已存在会话：更新消息内容、未读数、最后更新时间
-- 新会话：从联系人表构建会话，或从接口获取详情
-
----
-
-## 三、消息发送流程
-
-### 3.1 发送流程
-
-```
-用户输入/选择文件
-  ↓
-MessageEnter.handleSend()
-  ↓
-1. 构造本地消息对象（临时ID = 时间戳）
-2. 立即添加到消息列表（乐观更新）
-3. 通过WebSocket发送命令（CmdSendMessage）
-  ↓
-WebSocket响应（CmdSendMessageResp）
-  ↓
-更新消息状态（sendStatus: 0, 真实ID）
-```
-
-### 3.2 消息类型
-
-| 类型     | msgType          | 说明         |
-| -------- | ---------------- | ------------ |
-| 文本     | 1                | 普通文本消息 |
-| 图片     | 3                | 图片消息     |
-| 音频     | 34               | 语音消息     |
-| 视频     | 43               | 视频消息     |
-| 文件     | 49               | 文件消息     |
-| 系统消息 | 10000, -10001    | 时间分隔线   |
-| 特殊消息 | 570425393, 90000 | 其他系统消息 |
-
-### 3.3 文件上传处理
-
-**图片/文件上传**：
-
-1. 用户选择文件
-2. 上传到服务器获取URL
-3. 构造消息对象（msgType根据文件格式判断）
-4. 发送消息
-
-**音频录制**：
-
-1. 用户录制音频
-2. 上传音频文件获取URL
-3. 构造消息对象（msgType: 34，包含durationMs）
-4. 发送消息
-
-**位置消息**：
-
-1. 用户选择位置
-2. 构造位置消息（JSON格式）
-3. 发送消息
-
----
-
-## 四、消息接收流程
-
-### 4.1 WebSocket消息接收
-
-```
-WebSocket.onmessage
-  ↓
-websocket.ts._handleMessage()
-  ↓
-msgManage.ts.msgManageCore()
-  ↓
-根据 cmdType 路由到对应处理器
-```
-
-### 4.2 新消息处理 (CmdNewMessage)
-
-**处理流程**：
-
-```typescript
-1. 调用 weChatStore.receivedMsg() 处理消息
-2. 异步同步到服务器（dataProcessing）
-3. 触发 chatMessageReceived 事件
-4. MessageList 更新会话列表
-```
-
-**receivedMsg 核心逻辑**：
-
-```typescript
-1. 判断是否为当前聊天
-   - 是：批量更新消息列表（16ms延迟，减少重渲染）
-   - 否：仅更新会话列表
-
-2. AI处理（如果是文字消息且对方发送）
-   - 检查AI模式（aiType: 0=人工, 1=AI辅助, 2=AI接管）
-   - 防抖处理（3秒延迟，避免频繁请求）
-   - 消息队列（pendingMessages）
-   - 生成AI回复
-```
-
-### 4.3 消息批量更新机制
-
-**优化策略**：
-
-- **批量队列**: 16ms内收到的消息加入队列
-- **批量更新**: 16ms后一次性更新，减少重渲染
-- **性能提升**: 高频消息场景下显著减少渲染次数
-
-```typescript
-// 批量更新逻辑
-messageBatchQueue.push(message);
-messageBatchTimer = setTimeout(() => {
-  const messagesToAdd = [...messageBatchQueue];
-  messageBatchQueue = [];
-  set(state => ({
-    currentMessages: [...state.currentMessages, ...messagesToAdd],
-  }));
-}, 16); // 约一帧时间
-```
-
-### 4.4 消息状态更新
-
-**发送状态更新**：
-
-- `sendStatus: 1` - 发送中（显示Loading图标）
-- `sendStatus: 0` - 发送成功（收到CmdSendMessageResp后更新）
-
-**文件下载状态**：
-
-- `isDownloading: true` - 下载中
-- `url` - 下载完成，设置文件URL
-
----
-
-## 五、AI处理逻辑
-
-### 5.1 AI模式
-
-| 模式     | aiType | 说明                                     |
-| -------- | ------ | ---------------------------------------- |
-| 人工接待 | 0      | 完全人工处理                             |
-| AI辅助   | 1      | AI生成回复，填充到输入框，人工确认后发送 |
-| AI接管   | 2      | AI自动生成并发送回复                     |
-
-### 5.2 AI触发机制
-
-**自动触发**（收到新消息时）：
-
-```
-收到文字消息（msgType === 1）
-  ↓
-检查AI模式（aiType === 1 或 2）
-  ↓
-防抖处理（3秒延迟）
-  ↓
-消息队列（pendingMessages）
-  ↓
-3秒内无新消息 → 开始处理
-```
-
-**手动触发**（用户点击重新生成）：
-
-```
-用户点击"重新生成"按钮
-  ↓
-清除之前的AI请求
-  ↓
-获取最近5条对方消息作为上下文
-  ↓
-直接调用AI接口（不经过dataProcessing）
-```
-
-### 5.3 AI处理流程
-
-**自动触发流程**：
-
-```
-1. 收到新消息，加入队列
-2. 3秒延迟（防抖）
-3. 调用 dataProcessing（批量处理消息）
-4. 调用 aiChat（生成回复）
-5. 根据AI模式处理回复：
-   - AI辅助（aiType=1）: 填充到输入框（quoteMessageContent）
-   - AI接管（aiType=2）: 直接发送消息
-```
-
-**手动触发流程**：
-
-```
-1. 清除之前的AI请求
-2. 获取最近5条对方消息
-3. 直接调用 aiChat（不调用dataProcessing）
-4. 根据AI模式处理回复
-```
-
-### 5.4 AI请求取消机制
-
-**取消场景**：
-
-- 用户开始输入
-- 用户主动发送消息
-- 切换联系人
-- 用户手动取消
-
-**取消逻辑**：
-
-```typescript
-1. 清除定时器（aiRequestTimer）
-2. 清空消息队列（pendingMessages）
-3. 清除生成ID（currentAiGenerationId）
-4. 更新加载状态（isLoadingAiChat: false）
-```
-
-### 5.5 AI配置更新
-
-**配置更新流程**（ChatWindow组件）：
-
-```
-1. 用户选择AI模式（人工/AI辅助/AI接管）
-2. 调用API保存配置（setFriendInjectConfig）
-3. 更新Store中的AI配置（aiQuoteMessageContent）
-4. 更新会话数据库的aiType
-5. 更新联系人数据库的aiType
-6. 更新Store中的currentContract
-```
-
----
-
-## 六、消息显示 (MessageRecord)
-
-### 6.1 消息加载
-
-**分页加载**：
-
-- **初始加载**: 加载第一页（20条）
-- **滚动加载**: 滚动到顶部时加载更早的消息
-- **滚动位置保持**: 加载更多时保持滚动位置
-
-**加载状态管理**：
-
-- `messagesLoading`: 消息加载中
-- `isLoadingData`: 数据初始化加载中
-- `currentMessagesHasMore`: 是否还有更多消息
-
-### 6.2 消息分组
-
-**分组规则**：
-
-- 按时间分组（同一天的消息归为一组）
-- 显示时间分隔线
-- 系统消息单独处理
-
-**虚拟滚动**：
-
-- 消息数量 > 50 时启用虚拟滚动
-- 使用 `react-window` 优化性能
-- 减少DOM节点数量
-
-### 6.3 消息渲染
-
-**消息类型渲染**：
-
-- **文本消息**: 解析表情、链接、@提及
-- **图片消息**: 显示图片预览，点击查看大图
-- **视频消息**: 显示预览图，点击播放
-- **音频消息**: 显示播放器，支持播放/暂停
-- **文件消息**: 显示文件卡片，点击下载
-- **位置消息**: 显示地图预览
-- **系统消息**: 显示时间分隔线、特殊提示
-
-**群聊特殊处理**：
-
-- 显示发送者头像和昵称
-- 清理微信ID前缀（`wechatId:\n`）
-- 群成员信息映射
-
-### 6.4 消息操作
-
-**右键菜单**：
-
-- **转发**: 单条转发
-- **多条转发**: 进入多选模式
-- **引用**: 引用消息内容到输入框
-- **撤回**: 撤回已发送的消息
-- **音频转文字**: 语音消息转文字
-
-**消息选择**：
-
-- 多选模式：显示复选框
-- 选中消息：高亮显示
-- 批量操作：转发、删除等
-
----
-
-## 七、数据同步与持久化
-
-### 7.1 数据同步策略
-
-**会话列表同步**：
-
-- **首次加载**: 从IndexedDB加载缓存 → 后台同步服务器
-- **增量更新**: WebSocket实时更新
-- **手动同步**: 用户点击同步按钮
-
-**消息同步**：
-
-- **当前聊天**: 实时加载，分页获取
-- **历史消息**: 按需加载，不全部同步
-- **新消息**: WebSocket实时接收
-
-### 7.2 持久化策略
-
-**Store持久化**：
-
-- `user-store`: 用户信息、token
-- `wechat-storage`: 不持久化currentContract（切换时清空）
-- `message-storage`: 只持久化加载状态，不持久化数据
-- `contacts-storage`: 持久化联系人列表
-
-**IndexedDB存储**：
-
-- `chatSessions`: 会话列表（完整数据）
-- `contactsUnified`: 联系人数据（完整数据）
-- `messages`: 消息记录（按需存储）
-
-### 7.3 数据一致性
-
-**更新顺序**：
-
-1. 立即更新UI（乐观更新）
-2. 调用API更新服务器
-3. 更新IndexedDB
-4. 失败时回滚UI
-
-**冲突处理**：
-
-- 服务器数据优先
-- 本地缓存作为兜底
-- 同步时合并数据
-
----
-
-## 八、性能优化
-
-### 8.1 渲染优化
-
-**组件优化**：
-
-- 使用 `React.memo` 避免不必要的重渲染
-- 使用选择器模式（selector）细粒度订阅
-- 合并多个selector减少重渲染
-
-**消息列表优化**：
-
-- 虚拟滚动（消息数量 > 50）
-- 消息分组减少DOM节点
-- 批量更新机制（16ms延迟）
-
-### 8.2 请求优化
-
-**防抖机制**：
-
-- AI请求防抖（3秒）
-- 搜索防抖（300ms）
-- 消息批量更新（16ms）
-
-**请求优化**：
-
-- 分页加载，不一次性加载所有数据
-- 按需加载，只加载当前聊天消息
-- 缓存策略，优先使用本地数据
-
-### 8.3 状态管理优化
-
-**选择器模式**：
-
-```typescript
-// ❌ 不推荐：解构整个store
-const { currentContract, currentMessages } = useWeChatStore();
-
-// ✅ 推荐：使用选择器
-const currentContract = useWeChatStore(state => state.currentContract);
-const currentMessages = useWeChatStore(state => state.currentMessages);
-```
-
-**自定义Hook**：
-
-```typescript
-// 合并多个selector
-const { currentContract, currentMessages } = useMessageSelectors();
-```
-
----
-
-## 九、错误处理
-
-### 9.1 网络错误
-
-**WebSocket断开**：
-
-- 自动重连（最多5次）
-- 重连间隔：3秒
-- 页面刷新后自动恢复连接
-
-**API请求失败**：
-
-- 显示错误提示
-- 失败时回滚UI（乐观更新）
-- 重试机制（部分接口）
-
-### 9.2 数据错误
-
-**消息解析失败**：
-
-- 容错处理，显示原始内容
-- 记录错误日志
-
-**数据同步失败**：
-
-- 保留本地缓存
-- 显示同步状态
-- 支持手动重试
-
----
-
-## 十、关键代码位置
-
-### 10.1 核心文件
-
-- **会话列表**: `src/pages/pc/ckbox/weChat/components/SidebarMenu/MessageList/index.tsx`
-- **聊天窗口**: `src/pages/pc/ckbox/weChat/components/ChatWindow/index.tsx`
-- **消息输入**: `src/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageEnter/index.tsx`
-- **消息显示**: `src/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageRecord/index.tsx`
-
-### 10.2 状态管理
-
-- **聊天状态**: `src/store/module/weChat/weChat.ts`
-- **WebSocket**: `src/store/module/websocket/websocket.ts`
-- **消息处理**: `src/store/module/websocket/msgManage.ts`
-
-### 10.3 数据库操作
-
-- **会话管理**: `src/utils/dbAction/message.ts`
-- **联系人管理**: `src/utils/dbAction/contact.ts`
-
----
-
-## 十一、流程图
-
-### 11.1 消息发送流程
-
-```
-用户输入/选择文件
-    ↓
-MessageEnter.handleSend()
-    ↓
-构造本地消息（临时ID）
-    ↓
-添加到消息列表（乐观更新）
-    ↓
-WebSocket发送（CmdSendMessage）
-    ↓
-收到响应（CmdSendMessageResp）
-    ↓
-更新消息状态（真实ID，sendStatus: 0）
-```
-
-### 11.2 消息接收流程
-
-```
-WebSocket收到消息
-    ↓
-msgManage.ts处理（CmdNewMessage）
-    ↓
-weChatStore.receivedMsg()
-    ↓
-判断是否为当前聊天
-    ├─ 是 → 批量更新消息列表
-    │        ↓
-    │      AI处理（如果是文字消息）
-    │        ├─ AI辅助 → 填充输入框
-    │        └─ AI接管 → 直接发送
-    │
-    └─ 否 → 触发chatMessageReceived事件
-            ↓
-          MessageList更新会话列表
-```
-
-### 11.3 AI处理流程
-
-```
-收到新消息（文字，对方发送）
-    ↓
-检查AI模式（aiType）
-    ↓
-防抖处理（3秒延迟）
-    ↓
-消息队列（pendingMessages）
-    ↓
-3秒内无新消息
-    ↓
-调用dataProcessing（批量处理）
-    ↓
-调用aiChat（生成回复）
-    ↓
-根据AI模式处理：
-    ├─ AI辅助（aiType=1）→ 填充输入框
-    └─ AI接管（aiType=2）→ 直接发送
-```
-
----
-
-## 十二、注意事项
-
-### 12.1 性能注意事项
-
-1. **避免解构整个store**，使用选择器模式
-2. **大量消息时启用虚拟滚动**
-3. **使用批量更新机制**减少重渲染
-4. **合理使用防抖**避免频繁请求
-
-### 12.2 数据一致性
-
-1. **乐观更新**：先更新UI，再同步服务器
-2. **失败回滚**：API失败时回滚UI状态
-3. **数据同步**：定期同步服务器数据
-
-### 12.3 AI处理注意事项
-
-1. **取消机制**：用户操作时及时取消AI请求
-2. **防抖处理**：避免频繁触发AI请求
-3. **模式切换**：切换联系人时清除AI状态
-
----
-
-## 十三、待优化项
-
-1. **消息搜索功能**：支持全文搜索
-2. **消息撤回优化**：撤回后更新UI状态
-3. **文件下载进度**：显示下载进度
-4. **消息已读状态**：显示消息已读/未读
-5. **消息编辑功能**：支持编辑已发送消息
-6. **消息转发优化**：支持批量转发
-7. **AI回复优化**：支持多轮对话上下文
-
----
-
-## 十四、总结
-
-聊天功能采用**模块化设计**，通过**状态管理**、**WebSocket实时通信**、**IndexedDB持久化**实现完整的聊天体验。核心特点：
-
-1. **实时性**：WebSocket实时接收消息
-2. **性能优化**：批量更新、虚拟滚动、防抖处理
-3. **AI集成**：支持AI辅助和AI接管模式
-4. **数据一致性**：乐观更新 + 失败回滚
-5. **用户体验**：流畅的交互、及时的状态反馈
-
-通过合理的架构设计和性能优化，实现了高效、稳定的聊天功能。

提示词/虚拟滚动集成指南.md

@@ -1,328 +0,0 @@
-# 虚拟滚动组件集成指南
-
-## 一、MessageList组件集成VirtualSessionList
-
-### 1.1 集成步骤
-
-#### 步骤1：导入VirtualSessionList组件
-
-```typescript
-import { VirtualSessionList } from "@/components/VirtualSessionList";
-```
-
-#### 步骤2：与新架构SessionStore集成
-
-```typescript
-// 使用新架构的SessionStore
-const {
-  sessions, // 已经是过滤后的数据
-  selectedAccountId,
-  switchAccount,
-  setSearchKeyword,
-  setAllSessions,
-  buildIndexes,
-} = useMessageStore();
-
-// 监听currentCustomer变化，同步到SessionStore
-useEffect(() => {
-  const accountId = currentCustomer?.id || 0;
-  if (accountId !== selectedAccountId) {
-    switchAccount(accountId);
-  }
-}, [currentCustomer, selectedAccountId, switchAccount]);
-
-// 监听搜索关键词变化
-useEffect(() => {
-  if (searchKeyword) {
-    setSearchKeyword(searchKeyword);
-  }
-}, [searchKeyword, setSearchKeyword]);
-```
-
-#### 步骤3：数据加载时构建索引
-
-```typescript
-// 在数据加载完成后，构建索引
-useEffect(() => {
-  if (sessions.length > 0 && allSessions.length === 0) {
-    // 首次加载，构建索引
-    setAllSessions(sessions);
-  } else if (sessions.length > 0) {
-    // 数据更新，重新构建索引
-    buildIndexes(sessions);
-  }
-}, [sessions]);
-```
-
-#### 步骤4：替换List组件为VirtualSessionList
-
-```typescript
-// 原来的代码：
-<List
-  dataSource={filteredSessions as any[]}
-  renderItem={session => (
-    <SessionItem
-      key={session.id}
-      session={session}
-      isActive={!!currentContract && currentContract.id === session.id}
-      onClick={onContactClick}
-      onContextMenu={handleContextMenu}
-    />
-  )}
-/>
-
-// 替换为：
-<VirtualSessionList
-  sessions={sessions} // 使用新架构的sessions（已经是过滤后的）
-  containerHeight={600} // 根据实际容器高度调整
-  selectedSessionId={currentContract?.id}
-  renderItem={(session, index) => (
-    <SessionItem
-      session={session}
-      isActive={!!currentContract && currentContract.id === session.id}
-      onClick={onContactClick}
-      onContextMenu={handleContextMenu}
-    />
-  )}
-  onItemClick={onContactClick}
-  onItemContextMenu={handleContextMenu}
-  className={styles.virtualList}
-/>
-```
-
-#### 步骤5：调整样式
-
-```scss
-.messageList {
-  height: 100%;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-
-  .virtualList {
-    flex: 1;
-    overflow: hidden;
-  }
-}
-```
-
-### 1.2 注意事项
-
-1. **保留原有功能**：右键菜单、修改备注、删除等功能都需要保留
-2. **数据同步**：确保新架构的SessionStore与现有数据同步
-3. **性能优化**：大数据量时，虚拟滚动会自动优化渲染
-4. **向后兼容**：保留原有的filteredSessions逻辑，逐步迁移
-
----
-
-## 二、WechatFriends组件集成VirtualContactList
-
-### 2.1 集成步骤
-
-#### 步骤1：导入VirtualContactList组件
-
-```typescript
-import { VirtualContactList } from "@/components/VirtualContactList";
-import { useContactStoreNew } from "@/store/module/weChat/contacts.new";
-```
-
-#### 步骤2：使用新架构的ContactStore
-
-```typescript
-// 使用新架构的ContactStore
-const {
-  groups,
-  expandedGroups,
-  groupData,
-  selectedAccountId,
-  toggleGroup,
-  loadGroupContacts,
-  searchContacts,
-  clearSearch,
-  switchAccount,
-} = useContactStoreNew();
-
-// 生成分组Key的函数
-const getGroupKey = useCallback(
-  (groupId: number, groupType: 1 | 2, accountId: number) => {
-    return `${groupId}_${groupType}_${accountId}`;
-  },
-  [],
-);
-```
-
-#### 步骤3：加载分组列表
-
-```typescript
-// 初始化时加载分组列表
-useEffect(() => {
-  const loadGroups = async () => {
-    try {
-      const result = await getLabelsListByGroup({});
-      const groups = result?.list || [];
-      // 转换为ContactGroup格式
-      const contactGroups: ContactGroup[] = groups.map((g: any) => ({
-        id: g.id,
-        groupName: g.groupName,
-        groupType: g.groupType,
-        count: g.count,
-        sort: g.sort,
-        groupMemo: g.groupMemo,
-      }));
-      setGroups(contactGroups);
-    } catch (error) {
-      console.error("加载分组列表失败:", error);
-    }
-  };
-  loadGroups();
-}, []);
-```
-
-#### 步骤4：替换Collapse组件为VirtualContactList
-
-```typescript
-// 原来的代码：
-<Collapse
-  activeKey={activeKey}
-  onChange={handleCollapseChange}
-  items={collapseItems}
-/>
-
-// 替换为：
-<VirtualContactList
-  groups={groups}
-  expandedGroups={expandedGroups}
-  groupData={groupData}
-  getGroupKey={getGroupKey}
-  selectedAccountId={selectedAccountId}
-  containerHeight={600}
-  selectedContactId={selectedContactId?.id}
-  renderGroupHeader={(group, isExpanded) => (
-    <div className={styles.groupHeader}>
-      {/* 分组头部内容 */}
-    </div>
-  )}
-  renderContact={(contact, groupIndex, contactIndex) => (
-    <div className={styles.contactItem}>
-      {/* 联系人项内容 */}
-    </div>
-  )}
-  onGroupToggle={toggleGroup}
-  onContactClick={handleContactClick}
-  onGroupContextMenu={handleGroupContextMenu}
-  onContactContextMenu={handleContactContextMenu}
-  onGroupLoadMore={loadMoreGroupContacts}
-  className={styles.virtualList}
-/>
-```
-
-### 2.2 注意事项
-
-1. **分组展开/折叠**：使用toggleGroup方法，会自动触发懒加载
-2. **搜索功能**：使用searchContacts方法，会调用API并行请求
-3. **切换账号**：使用switchAccount方法，会重新加载展开的分组
-4. **分页加载**：滚动到底部时，自动调用loadMoreGroupContacts
-
----
-
-## 三、性能优化建议
-
-### 3.1 会话列表优化
-
-1. **使用索引过滤**：切换账号时使用switchAccount方法，O(1)获取
-2. **缓存过滤结果**：相同账号切换时直接使用缓存
-3. **虚拟滚动**：只渲染可见区域，减少DOM节点
-
-### 3.2 联系人列表优化
-
-1. **分组懒加载**：只加载展开的分组数据
-2. **分页加载**：分组内支持分页，避免一次性加载大量数据
-3. **虚拟滚动**：支持动态高度，自动调整
-
-### 3.3 通用优化
-
-1. **React.memo**：优化SessionItem和ContactItem组件
-2. **useMemo**：缓存计算结果
-3. **useCallback**：缓存函数引用
-
----
-
-## 四、测试要点
-
-### 4.1 功能测试
-
-- [ ] 会话列表正常显示
-- [ ] 切换账号功能正常
-- [ ] 搜索功能正常
-- [ ] 右键菜单正常
-- [ ] 修改备注功能正常
-- [ ] 删除会话功能正常
-- [ ] 联系人列表正常显示
-- [ ] 分组展开/折叠正常
-- [ ] 分组内分页加载正常
-- [ ] 联系人搜索正常
-
-### 4.2 性能测试
-
-- [ ] 10000条会话数据，切换账号 < 100ms
-- [ ] 虚拟滚动帧率 ≥ 60fps
-- [ ] 内存占用 < 100MB
-- [ ] 分组展开 < 200ms
-
-### 4.3 兼容性测试
-
-- [ ] Chrome浏览器
-- [ ] Firefox浏览器
-- [ ] Edge浏览器
-- [ ] Safari浏览器
-
----
-
-## 五、回滚方案
-
-如果集成后出现问题，可以：
-
-1. **保留原组件**：不删除原有的List和Collapse组件
-2. **条件渲染**：使用feature flag控制是否使用虚拟滚动
-3. **逐步迁移**：先在一个页面测试，确认无误后再全面推广
-
-```typescript
-// 使用feature flag控制
-const USE_VIRTUAL_SCROLL = true; // 从环境变量或配置读取
-
-{USE_VIRTUAL_SCROLL ? (
-  <VirtualSessionList {...props} />
-) : (
-  <List {...props} />
-)}
-```
-
----
-
-## 六、常见问题
-
-### Q1: 虚拟滚动后，滚动位置丢失？
-
-**A**: 使用VirtualSessionList的scrollToSession方法，在数据更新后滚动到指定位置。
-
-### Q2: 分组展开后，虚拟滚动高度不正确？
-
-**A**: 使用VariableSizeList的resetAfterIndex方法，在分组展开/折叠后重置高度缓存。
-
-### Q3: 性能没有明显提升？
-
-**A**: 确保数据量足够大（> 1000条），虚拟滚动的优势在大数据量时更明显。
-
----
-
-## 七、总结
-
-虚拟滚动组件的集成需要：
-
-1. ✅ 导入组件
-2. ✅ 与新架构Store集成
-3. ✅ 替换原有List/Collapse组件
-4. ✅ 调整样式
-5. ✅ 测试和优化
-
-**预计集成时间**：每个组件1-2天（包括测试和优化）

提示词/触客宝功能逻辑流程图.md

@@ -1,523 +0,0 @@
-## 触客宝功能逻辑实现流程图
-
-> 本文档基于《触客宝功能架构》整理关键业务链路的**实现流程**，以文本 + ASCII 流程图的形式展示前端在不同场景下的调用关系，便于开发/排查问题与架构沟通。
-
----
-
-## 一、应用启动 & 初始化流程
-
-### 1.1 启动总体流程
-
-```text
-浏览器访问页面
-    |
-    v
-加载 index.html & Vite 入口脚本
-    |
-    v
-执行 src/main.tsx
-    |
-    v
-初始化 Sentry (initSentry)
-    |
-    v
-initializeDatabaseFromPersistedUser()
-    |
-    +-- 读取 localStorage 中 USER_STORE
-    |       |
-    |       +-- 无用户信息 -> 不初始化 DB -> 返回 null
-    |       |
-    |       +-- 有用户信息 -> 解析 user.id -> ensureDatabase(userId)
-    |                      |
-    |                      +-- DatabaseManager 创建/打开 Dexie DB
-    |
-    v
-创建 React Root
-    |
-    v
-<ConfigProvider zhCN>
-  <QueryProvider>
-    <App />
-  </QueryProvider>
-</ConfigProvider>
-    |
-    v
-App.tsx 内部:
-  Sentry.ErrorBoundary 包裹 AppRouter + UpdateNotification
-```
-
----
-
-## 二、路由跳转 & 权限控制流程
-
-### 2.1 路由解析与渲染
-
-```text
-AppRouter 渲染
-    |
-    v
-import.meta.glob("./module/*.{ts,tsx}")
-    |
-    v
-收集所有路由模块 default 导出路由数组
-    |
-    v
-组合得到 routes[]
-    |
-    v
-对每个 route:
-    如果 route.auth === true
-        -> 用 <PermissionRoute> 包裹
-    否则
-        -> 直接使用 route.element
-    |
-    v
-追加 404 路由 { path: "*", element: <NotFound /> }
-    |
-    v
-useRoutes(routes) 生成路由树并渲染
-```
-
-### 2.2 权限路由（登录 & 角色校验）
-
-```text
-用户访问受保护路由 (route.auth = true)
-        |
-        v
-渲染 <PermissionRoute requiredRole={...}>
-        |
-        v
-从 useUserStore 读取 user, isLoggedIn
-        |
-        +-- 若 !isLoggedIn 或 !user
-        |       |
-        |       +-- 记录当前路径 currentPath = pathname + search
-        |       |
-        |       +-- navigate("/login?returnUrl=" + encodeURIComponent(currentPath))
-        |       |
-        |       +-- 不渲染子组件 (return null)
-        |
-        +-- 若 requiredRole 存在 且 user.isAdmin !== 1
-        |       |
-        |       +-- navigate("/")
-        |       +-- return null
-        |
-        +-- 否则 (已登录 & 权限满足)
-                |
-                +-- 渲染 children (真正的业务页面)
-```
-
----
-
-## 三、首页访问 & 端类型分流流程
-
-### 3.1 `/` 首页逻辑
-
-```text
-用户访问 "/" 路径
-    |
-    v
-渲染 IndexPage (pages/index.tsx)
-    |
-    v
-useEffect(() => {
-    判断是否移动端:
-       - UA 匹配移动端关键字
-       - 或 window.innerWidth <= 768
-})
-    |
-    +-- 若 isMobile === true
-    |       |
-    |       +-- navigate("/mobile/dashboard")
-    |
-    +-- 若 isMobile === false
-            |
-            +-- navigate("/pc/weChat")
-    |
-    v
-页面本身只渲染简单 "首页" 占位，主要职责是分流
-```
-
----
-
-## 四、登录流程 & 本地缓存初始化
-
-> 下面为前端视角，后端返回细节略去，仅关注状态/存储/跳转。
-
-```text
-用户在 /login 输入账号密码
-    |
-    v
-点击登录按钮 -> 触发登录 API
-    |
-    v
-调用 request("/login", formData, "POST")
-    |
-    v
-Axios 请求拦截器:
-  - 若有 token 则附加 Authorization (首次通常无)
-    |
-    v
-服务器返回登录结果 { code/success, data: { user, token } }
-    |
-    v
-响应拦截器:
-  - 判断业务成功
-  - 返回 data (user, token)
-    |
-    v
-前端登录逻辑:
-  - 调用 useUserStore.setState():
-      * 保存 user 信息
-      * 保存 token
-      * 标记 isLoggedIn = true
-  - 按 returnUrl 或默认路径跳转:
-      * 若 URL 中有 ?returnUrl=xxx -> navigate(xxx)
-      * 否则 -> navigate("/")
-    |
-    v
-后续刷新页面:
-  - main.tsx 中 initializeDatabaseFromPersistedUser()
-  - 根据持久化 user.id 初始化对应 Dexie 数据库
-```
-
----
-
-## 五、PC 端微信客服工作台整体流程（/pc/weChat）
-
-### 5.1 页面三栏布局渲染流程
-
-```text
-用户访问 "/pc/weChat"
-    |
-    v
-路由匹配 pc.tsx 中:
-  path: "/pc", element: <CkboxPage />, children: [...]
-    |
-    v
-渲染 CkboxPage:
-  <Layout header={<NavCommon title="触客宝" />}>
-     <Outlet />   // 当前为 WeChatPage
-  </Layout>
-    |
-    v
-WeChatPage 内部:
-  - 左侧 SidebarMenu (会话列表 / 联系人列表 / 朋友圈入口)
-  - 中间 ChatWindow (消息列表 + 输入框)
-  - 右侧 ProfileCard 等（客户画像/朋友圈/话术等）
-```
-
-### 5.2 选择会话 & 加载消息流程
-
-```text
-用户在 SidebarMenu 中点击某个好友/群聊
-    |
-    v
-onContactClick(contact) 触发
-    |
-    v
-useWeChatStore.setCurrentContact(contact)
-    |
-    v
-setCurrentContact 内部逻辑:
-  1) 清除 AI 请求定时器 & 队列 (防止跨会话 AI 干扰)
-  2) 重置当前聊天状态:
-       - currentMessages = []
-       - currentMessagesPage = 1
-       - currentMessagesHasMore = true
-       - isLoadingAiChat = false
-  3) 构造 params:
-       - 单聊: wechatFriendId = contact.id
-       - 群聊: wechatChatroomId = contact.id
-  4) 调用 clearUnreadCount1/2 清空未读
-  5) 调用 getFriendInjectConfig 获取 AI 配置
-       -> 更新 aiQuoteMessageContent
-  6) 更新 currentContract = contact
-     并更新 currentMessagesRequestId
-  7) 调用 updateConfig({ id: contact.id, config: { chat: true } })
-  8) 调用 state.loadChatMessages(true) 拉取首屏消息
-```
-
-### 5.3 拉取聊天消息流程（首屏 & 翻页）
-
-```text
-调用 loadChatMessages(Init, pageOverride?)
-    |
-    v
-从 store 读取:
-  - currentContract
-  - currentMessagesPage / PageSize / HasMore
-  - currentMessagesRequestId
-    |
-    +-- 若无 currentContract 或 id -> 直接返回
-    +-- 若 !Init 且 !HasMore -> 不再请求
-    +-- 若 messagesLoading && !Init -> 避免并发重复加载
-    |
-    v
-计算 nextPage:
-  - Init === true ? 1 : (pageOverride || currentPage + 1)
-  limit = currentMessagesPageSize (默认 20)
-    |
-    v
-构造请求参数 params:
-  - wechatAccountId: contact.wechatAccountId
-  - page, limit
-  - 单聊: wechatFriendId = contact.id
-  - 群聊: wechatChatroomId = contact.id
-    |
-    v
-根据是否群聊:
-  - 群聊: 调用 getChatroomMessages(params)
-  - 单聊: 调用 getChatMessages(params)
-    |
-    v
-normalizeMessages(response) 标准化为数组
-    |
-    v
-sortMessagesByTime(messages) 统一按时间排序
-    |
-    v
-resolvePaginationState(response, page, limit, listLength)
-    |
-    v
-若 Init 且为群聊:
-  - 额外调用 getGroupMembers({ id: contact.id })
-    |
-    v
-set(state => {
-   若 currentMessagesRequestId 未变化 && currentContract.id 未变化
-      - Init: currentMessages = sortedMessages
-      - 非 Init: currentMessages = [...sortedMessages, ...原有]
-      - 更新 currentGroupMembers (群聊首屏时)
-      - 更新 page / limit / hasMore
-})
-```
-
----
-
-## 六、新消息接收 & AI 自动回复流程
-
-### 6.1 新消息接收（WebSocket → Store）
-
-```text
-WebSocket 收到新消息 (CmdNewMessage)
-    |
-    v
-WebSocket 层解析消息 -> 调用 useWeChatStore.receivedMsg(message)
-    |
-    v
-receivedMsg(message) 内部:
-  1) 判断消息归属:
-       - getMessageId = message.wechatChatroomId || message.wechatFriendId
-       - isWechatGroup = !!message.wechatChatroomId
-  2) 判断是否为当前选中会话:
-       - 若 currentContract && currentContract.id == getMessageId
-           -> 进入“当前会话处理分支”
-       - 否则
-           -> 当前函数不更新会话列表，MessageList 通过其他事件更新
-```
-
-### 6.2 当前会话消息的批量渲染优化
-
-```text
-当前会话处理分支:
-    |
-    v
-将 message 推入 messageBatchQueue
-    |
-    v
-若已有 messageBatchTimer:
-    -> clearTimeout(messageBatchTimer)
-    |
-    v
-设置新的 messageBatchTimer (延迟 ~16ms):
-    |
-    v
-定时器触发:
-  - 拷贝 messageBatchQueue -> messagesToAdd
-  - 清空 messageBatchQueue
-  - set(state => {
-        currentMessages = [...state.currentMessages, ...messagesToAdd]
-    })
-    |
-    v
-实现一帧内多条消息合并更新，降低渲染压力
-```
-
-### 6.3 AI 自动回复决策流程
-
-```text
-在 receivedMsg 中 (仍然是当前会话分支):
-    |
-    v
-若 message.msgType === 1 (文字) 且 !message.isSend
-   且 currentContract.aiType in [1, 2]
-    |
-    v
-AI 触发逻辑:
-  1) 若存在 aiRequestTimer 或 currentAiGenerationId:
-        - 调用 clearAiRequestQueue("收到新消息")
-        - 清除上一次 AI 请求状态
-  2) 将当前 message 加入 pendingMessages 队列
-  3) set({ isLoadingAiChat: true })
-  4) 启动 aiRequestTimer (延迟 AI_REQUEST_DELAY=3000ms):
-        |
-        v
-        定时器回调:
-          - 复制 pendingMessages -> messagesToProcess
-          - 清空 pendingMessages, 清除 aiRequestTimer
-          - 生成 generationId = generateAiId()
-          - currentAiGenerationId = generationId
-          - 构造 dataProcessing 参数:
-               * type: "CmdNewMessage"
-               * wechatAccountId
-               * chatroomMessage 或 friendMessage = messagesToProcess
-          - 调用 dataProcessing(params)
-          - 若 dataProcessingResult 不为成功标志 (注意实际判断逻辑)
-                -> 取最后一条消息 lastMessage
-                -> 调用 aiChat({ friendId/getMessageId, wechatAccountId, message: lastMessage })
-                -> 得到 aiResponseContent
-                -> 若 currentAiGenerationId 仍等于 generationId (确保未被取消)
-                      |
-                      v
-                      根据 aiType 分支:
-                        - aiType === 2 (AI 接管模式)
-                            * 构造本地发送消息 localMessage
-                            * 将 localMessage append 到 currentMessages
-                            * 调用 useWebSocketStore.sendCommand("CmdSendMessage", {...})
-                            * set({ isLoadingAiChat: false })
-                            * 清空 currentAiGenerationId
-                        - aiType === 1 (AI 辅助模式)
-                            * set({
-                                quoteMessageContent: aiResponseContent,
-                                isLoadingAiChat: false
-                              })
-                            * 清空 currentAiGenerationId
-          - 若中途任何错误:
-                -> 打印错误日志
-                -> set({ isLoadingAiChat: false })
-                -> currentAiGenerationId = null
-```
-
-### 6.4 手动触发 AI 回复流程
-
-```text
-用户在 UI 中点击“智能回复”按钮
-    |
-    v
-调用 manualTriggerAi()
-    |
-    v
-manualTriggerAi 逻辑:
-  1) 读取 currentContract, currentMessages
-  2) 若无 currentContract 或 currentMessages 为空 -> 返回 false
-  3) 校验 aiType in [1, 2]，否则不触发
-  4) 若已有 aiRequestTimer 或 currentAiGenerationId:
-        -> clearAiRequestQueue("手动重新生成")
-  5) 从 currentMessages 中过滤最近 5 条对方文本消息 recentMessages
-  6) set({ isLoadingAiChat: true })
-  7) 生成 generationId, 记录到 currentAiGenerationId
-  8) 调用 aiChat({ friendId, wechatAccountId, message: lastMessage })
-  9) 根据 aiType:
-        - aiType === 2:
-            * 构造本地消息 localMessage，append 到 currentMessages
-            * sendCommand("CmdSendMessage", {...})
-            * set({ isLoadingAiChat: false })
-        - aiType === 1:
-            * updateQuoteMessageContent(aiResponseContent)
-            * set({ isLoadingAiChat: false })
- 10) 清空 currentAiGenerationId
-```
-
----
-
-## 七、消息搜索 & 历史记录查看流程
-
-```text
-用户在聊天窗口打开“聊天记录搜索”面板
-    |
-    v
-选择时间范围 (From, To)、输入关键字 keyword、设置数量 Count
-    |
-    v
-调用 useWeChatStore.SearchMessage({ From, To, keyword, Count })
-    |
-    v
-SearchMessage 内部:
-  1) set({ messagesLoading: true })
-  2) 判断当前会话是群聊还是单聊
-  3) 构造 params:
-       - wechatAccountId
-       - keyword
-       - From, To
-       - page = 1
-       - limit = Count
-       - 单聊: wechatFriendId
-       - 群聊: wechatChatroomId
-  4) 调用对应 API:
-       - 群聊: getChatroomMessages(params) + getGroupMembers({ id })
-       - 单聊: getChatMessages(params)
-  5) 对返回结果:
-       - normalizeMessages -> sortMessagesByTime
-       - set({
-            currentMessages,
-            currentGroupMembers (群聊),
-            currentMessagesPage = 1,
-            currentMessagesHasMore = false,
-            currentMessagesPageSize = Count
-         })
-  6) finally: set({ messagesLoading: false })
-```
-
----
-
-## 八、PowerCenter 能力中心典型流程（示例：创建消息推送任务）
-
-> 这里只给出“消息推送助手”的高层流程，实际每个步骤内部还会调用共用选择组件和上传组件。
-
-```text
-用户访问 "/pc/powerCenter/message-push-assistant"
-    |
-    v
-展示推送任务列表 + “新建推送任务”按钮
-    |
-    v
-点击“新建推送任务”
-    |
-    v
-navigate("/pc/powerCenter/message-push-assistant/create-push-task/:pushType")
-    |
-    v
-渲染 CreatePushTask 页面 (多步骤向导):
-  Step 1: StepSelectAccount
-      - 使用 AccountSelection / DeviceSelection 组件
-      - 选择推送使用的微信/设备账号
-  Step 2: StepSelectContacts
-      - 调用联系人/分组相关 API
-      - 使用 FriendSelection / GroupSelection / PoolSelection 等组件
-      - 支持搜索/筛选与多选
-  Step 3: StepPushParams
-      - 设置推送参数 (时间、频次、规则等)
-  Step 4: StepSendMessage
-      - 选择消息内容:
-          * 直接输入文本
-          * 从内容库选择: ContentSelection + 内容管理 API
-      - 支持图片/文件/视频等资源上传 (复用 Upload 组件)
-    |
-    v
-完成配置 -> 点击“创建任务”
-    |
-    v
-调用创建任务 API
-    |
-    v
-成功后:
-  - 弹出成功提示
-  - 跳转回任务列表或详情页
-  - 列表数据可能通过 React Query 或手动刷新获取最新状态
-```
-
----
-
-以上流程图覆盖了应用启动、路由与权限、登录、PC 微信客服工作台、AI 自动回复、消息搜索以及能力中心中一个典型场景的端到端逻辑，可作为排查问题和设计新功能时的“全局参考图”。
-如需更详细的**时序图（Sequence Diagram）**或针对某个子模块（例如 IndexedDB 同步、WebSocket 重连策略等）的专门流程图，可以在此文档基础上再拆分子章节。