新增功能

CHAT_INTEGRATION.md

@@ -0,0 +1,84 @@
+# 腾讯云 Chat UIKit 集成说明
+
+## 功能概述
+
+已成功将腾讯云 Chat UIKit Vue3 组件集成到预约管理系统的"聊天"按钮中，使用官方推荐的组件化方式。
+
+## 实现内容
+
+### 1. 创建聊天对话框组件
+- 文件位置: `admin/src/components/chat-dialog/index.vue`
+- 功能特性:
+  - 使用 Element Plus Dialog 作为容器
+  - 集成腾讯云 Chat UIKit 的官方组件：
+    - UIKitProvider: 提供 IM SDK 上下文
+    - ConversationList: 会话列表组件
+    - Chat: 聊天消息组件
+  - 自动获取医生签名并初始化聊天
+  - 加载状态和错误处理
+  - 响应式布局：左侧会话列表（300px）+ 右侧聊天区域
+  - 动态加载样式文件
+
+### 2. 集成到预约列表页面
+- 文件位置: `admin/src/views/tcm/appointment/list.vue`
+- 修改内容:
+  - 导入 ChatDialog 组件
+  - 添加 chatDialogRef 引用
+  - 修改 handleCreatePrescription 方法，传递患者信息和诊单ID
+  - 在模板中添加 chat-dialog 组件
+
+### 3. 使用的 API
+- 复用现有的 `getCallSignature` API (`/tcm.diagnosis/getCallSignature`)
+- 该接口返回腾讯云 IM 所需的:
+  - sdkAppId: 应用 ID
+  - userId: 当前用户 ID (医生)
+  - userSig: 用户签名
+  - patientUserId: 患者的 IM 用户 ID
+
+### 4. 使用的组件
+根据腾讯云官方文档 (https://cloud.tencent.com/document/product/269/123108)：
+- `UIKitProvider`: 提供 SDK 配置和上下文
+- `ConversationList`: 显示会话列表
+- `Chat`: 显示聊天消息和输入框
+
+## 使用方式
+
+1. 在预约列表中找到状态为"已预约"的记录
+2. 点击操作列中的"聊天"按钮
+3. 系统会自动:
+   - 获取医生的腾讯云 IM 签名
+   - 初始化聊天组件
+   - 打开聊天对话框
+4. 在对话框中可以:
+   - 查看左侧的会话列表
+   - 在右侧与患者进行实时聊天
+   - 发送文本、表情、图片等消息
+
+## 技术栈
+
+- @tencentcloud/chat-uikit-vue3: ^4.5.4
+- @tencentcloud/chat: IM SDK
+- Element Plus: 对话框和 UI 组件
+- Vue 3 Composition API
+
+## 样式处理
+
+由于 Vite 对 node_modules 中 CSS 文件的导入限制，样式文件采用动态导入方式：
+- 在组件 onMounted 时动态导入样式
+- 如果样式加载失败，功能仍可正常使用，只是缺少部分美化
+
+## 注意事项
+
+1. 需要确保后端 `/tcm.diagnosis/getCallSignature` 接口正常工作
+2. 需要配置腾讯云 IM 的 SDKAppID 和密钥
+3. 聊天功能需要患者端也集成相应的 IM 功能
+4. 确保网络环境支持 WebSocket 连接
+5. 会话ID格式为 `C2C{patientUserId}`，表示单聊（C2C = Client to Client）
+
+## 后续优化建议
+
+1. 可以自定义聊天界面的主题和样式
+2. 可以添加消息提醒功能
+3. 可以添加聊天记录的持久化存储
+4. 可以添加更多富媒体消息类型（语音、视频等）
+5. 可以优化样式加载方式，确保样式稳定加载