1231

升级 @vitejs/plugin-vue 以兼容最新 vite 和 vue 版本要求

.env

@@ -1,8 +0,0 @@
-ENV = 'development'
-
-VITE_BASE=/
-VUE_APP_PREVIEW=false
-VITE_BASE_API=http://172.16.100.93:8503
-VITE_EPR_BASEURL=http://114.218.158.24:9020
-VITE_SOCKET_API=ws://172.16.100.93:8504
-VUE_APP_WEBSITE_NAME="Lumen IM"

.env.electron

@@ -1,6 +0,0 @@
-ENV = 'production'
-
-VITE_BASE=./
-VITE_ROUTER_MODE=hash
-VITE_BASE_API=https://xxx.xxx.com
-VITE_SOCKET_API=wss://xxx.xxx.com

.eslintrc.cjs

@@ -1,23 +0,0 @@
-/* eslint-env node */
-require('@rushstack/eslint-patch/modern-module-resolution')
-
-module.exports = {
-  env: {
-    node: true // 只需将该项设置为 true 即可
-  },
-  root: true,
-  'extends': [
-    'plugin:vue/vue3-essential',
-    'eslint:recommended',
-    '@vue/eslint-config-typescript',
-    '@vue/eslint-config-prettier/skip-formatting'
-  ],
-  parserOptions: {
-    ecmaVersion: 'latest'
-  },
-  rules: {
-    'vue/multi-word-component-names': 'off',
-    '@typescript-eslint/no-unused-vars': 'off',
-    "no-unused-vars":"off"
-  }
-}

.gitignore

@@ -24,3 +24,5 @@ makefile
 *.njsproj
 *.sln
 *.sw?
+components.d.ts
+auto-imports.d.ts

README.md

@@ -1,87 +1,104 @@
-# Lumen IM 即时聊天
+# IM - 在线即时通讯应用
 
-<img alt="GitHub stars badge" src="https://img.shields.io/github/stars/gzydong/LumenIM"> <img alt="GitHub forks badge" src="https://img.shields.io/github/forks/gzydong/LumenIM"> <img alt="GitHub license badge" src="https://img.shields.io/github/license/gzydong/LumenIM">
+IM 是一个基于 Vue 3 开发的现代化在线即时通讯应用，提供实时聊天、消息管理、笔记等功能。
 
-### 项目介绍
+## 功能特性
 
-Lumen IM 是一个网页版在线聊天项目，前端使用 Naive UI + Vue3，后端采用 GO 开发。
+- 📱 实时聊天：支持一对一即时通讯
+- 📝 消息管理：高效管理各类消息
+- 📓 笔记功能：支持Markdown格式的笔记编辑与管理
+- 🌓 暗色模式：支持明暗主题切换，呵护您的眼睛
+- 🔒 用户认证：完善的登录注册系统
 
-### 功能模块
+## 技术栈
 
-- 支持私聊及群聊
+- **前端框架**：Vue 3 + TypeScript
-- 支持多种聊天消息类型 例如:文本消息、代码块、群投票、图片及其它类型文件，并支持文件下载
+- **状态管理**：Pinia
-- 支持聊天消息撤回、删除(批量删除)、转发消息(逐条转发、合并转发)
+- **UI组件库**：Naive UI
-- 支持编写笔记
+- **路由管理**：Vue Router
+- **CSS预处理器**：Less
+- **构建工具**：Vite
+- **WebSocket**：用于实时通讯
+- **编辑器**：
+  - Markdown编辑器：@kangc/v-md-editor
+  - 富文本编辑器：Quill
 
-### 项目预览
+## 快速开始
 
-- 地址： [http://im.gzydong.com](http://im.gzydong.com)
+### 环境要求
 
-### 项目安装
+- Node.js >= 14.0.0
+- pnpm >= 6.0.0
 
-###### 下载安装
+### 安装依赖
 
 ```bash
-## 克隆项目源码包
+pnpm install
-git clone https://gitee.com/gzydong/LumenIM.git
-或
-git clone https://github.com/gzydong/LumenIM.git
-
-## 安装项目依赖扩展组件
-yarn install
-
-# 启动本地开发环境
-yarn dev
-# 启动本地开发环境桌面客户端
-yarn electron:dev
-
-## 生产环境构建项目
-yarn build
-
-## 生产环境桌面客户端打包
-yarn electron:build
 ```
 
-###### 修改 .env 配置信息
+### 开发环境运行
 
-```env
+```bash
-VITE_BASE_API=http://127.0.0.1:8503
+# 测试环境
-VITE_SOCKET_API=ws://127.0.0.1:8504
+pnpm dev:test
+
+# 生产环境
+pnpm dev:prod
 ```
 
-###### 关于 Nginx 的一些配置
+### 打包构建
 
-```nginx
+```bash
-server {
+# 测试环境构建
-    listen       80;
+pnpm build:test
-    server_name  www.yourdomain.com;
 
-    root /project-path/dist;
+# 生产环境构建
-    index  index.html;
+pnpm build:prod
-
-    location / {
-      try_files $uri $uri/ /index.html;
-    }
-
-    location ~ .*\.(gif|jpg|jpeg|png|bmp|swf|flv|ico)$ {
-        expires 7d;
-    }
-
-    location ~ .*\.(js|css)?$ {
-        expires 7d;
-    }
-}
 ```
 
-### 项目源码
+### 预览构建后的项目
 
-| 代码仓库 | 前端源码                           | 后端源码                           |
+```bash
-| -------- | ---------------------------------- | ---------------------------------- |
+pnpm preview
-| Github   | https://github.com/gzydong/LumenIM | https://github.com/gzydong/go-chat |
+```
-| 码云     | https://gitee.com/gzydong/LumenIM  | https://gitee.com/gzydong/go-chat  |
 
-#### 联系方式
+## 项目结构
 
-QQ作者 : 837215079
+```
+src/
+├── api/          # API请求
+├── assets/       # 静态资源
+├── components/   # 公共组件
+├── connect.ts    # WebSocket连接管理
+├── constant/     # 常量定义
+├── directive/    # 自定义指令
+├── event/        # 事件管理
+├── hooks/        # 自定义钩子
+├── layout/       # 布局组件
+├── main.ts       # 入口文件
+├── plugins/      # 插件配置
+├── router/       # 路由配置
+├── store/        # 状态管理
+├── types/        # 类型定义
+├── utils/        # 工具函数
+└── views/        # 页面视图
+```
 
-### 如果你觉得还不错，请 Star , Fork 给作者鼓励一下。
+## 环境变量配置
+
+项目支持不同环境配置，环境变量文件位于`env/`目录下。
+
+## 浏览器支持
+
+支持现代浏览器，如Chrome、Firefox、Safari、Edge等。
+
+## 相关链接
+
+- [Vue 3](https://v3.vuejs.org/)
+- [Vite](https://vitejs.dev/)
+- [Naive UI](https://www.naiveui.com/)
+- [Pinia](https://pinia.vuejs.org/)
+
+## 许可证
+
+Copyright © 2023 IM

electron/main.js

@@ -1,92 +0,0 @@
-// 控制应用生命周期和创建原生浏览器窗口的模组
-const { app, BrowserWindow, ipcMain, Menu, MenuItem } = require('electron')
-const path = require('path')
-
-const { shell } = require('electron')
-
-const NODE_ENV = process.env.NODE_ENV
-
-function loadHtmlUrl() {
-  return NODE_ENV === 'development'
-    ? `http://localhost:${process.env.PROT}`
-    : `file://${path.join(__dirname, '../dist/index.html')}`
-}
-
-function createWindow() {
-  // 创建浏览器窗口
-  const win = new BrowserWindow({
-    width: 1200,
-    height: 800,
-    minWidth: 900,
-    minHeight: 600,
-    frame: false,
-    titleBarStyle: 'hidden',
-    webPreferences: {
-      preload: path.join(__dirname, 'preload.js'),
-      contextIsolation: true,
-    },
-  })
-
-  // 加载 index.html
-  win.loadURL(loadHtmlUrl())
-
-  // 打开开发工具
-  if (NODE_ENV === 'development') {
-    win.webContents.openDevTools()
-  }
-
-  // 进入全屏模式
-  win.on('enter-full-screen', function () {
-    win.webContents.send('full-screen', 'enter')
-  })
-
-  // 退出全屏模式
-  win.on('leave-full-screen', function () {
-    win.webContents.send('full-screen', 'leave')
-  })
-
-  ipcMain.on('get-full-screen', (e, data) => {
-    e.returnValue = win.isFullScreen()
-  })
-
-  ipcMain.on('app-info', (e, data) => {
-    e.returnValue = {
-      platform: process.platform,
-      version: app.getVersion(),
-      appPath: app.getAppPath(),
-    }
-  })
-}
-
-// 这段程序将会在 Electron 结束初始化
-// 和创建浏览器窗口的时候调用
-// 部分 API 在 ready 事件触发后才能使用。
-app.whenReady().then(() => {
-  createWindow()
-
-  app.on('activate', function () {
-    // 通常在 macOS 上，当点击 dock 中的应用程序图标时，如果没有其他
-    // 打开的窗口，那么程序会重新创建一个窗口。
-    if (BrowserWindow.getAllWindows().length === 0) createWindow()
-  })
-})
-
-// 除了 macOS 外，当所有窗口都被关闭的时候退出程序。 因此，通常对程序和它们在
-// 任务栏上的图标来说，应当保持活跃状态，直到用户使用 Cmd + Q 退出。
-app.on('window-all-closed', function () {
-  if (process.platform !== 'darwin') app.quit()
-})
-
-// 在这个文件中，你可以包含应用程序剩余的所有部分的代码，
-// 也可以拆分成几个文件，然后用 require 导入。
-
-ipcMain.on('ipc:set-badge', async (event, num) => {
-  if (process.platform === 'darwin') {
-    app.dock.setBadge(num > 99 ? '99+' : num)
-  }
-})
-
-ipcMain.on('ipc:open-link', async (event, link) => {
-  // Open a link in the default browser
-  shell.openExternal(link)
-})

electron/preload.js

@@ -1,46 +0,0 @@
-const { contextBridge, ipcRenderer } = require('electron')
-
-// 暴露方法给渲染进程调用
-contextBridge.exposeInMainWorld('electron', {
-  // 设置消息未读数
-  setBadge: num => {
-    ipcRenderer.send('ipc:set-badge', num == 0 ? '' : `${num}`)
-  },
-  // 获取窗口全屏状态
-  getFullScreenStatus: () => {
-    return ipcRenderer.sendSync('get-full-screen', '')
-  },
-  // 系统信息
-  getAppPlatform: () => {
-    return ipcRenderer.sendSync('app-info', '')
-  },
-
-  openLink: link => {
-    ipcRenderer.send('ipc:open-link', link)
-  },
-})
-
-// 窗口变化事件
-ipcRenderer.on('full-screen', function (event, value) {
-  // isFullScreenStatus = value == 'enter'
-
-  document.dispatchEvent(
-    new CustomEvent('full-screen-event', { detail: value })
-  )
-})
-
-// 触发自定义事件
-// document.dispatchEvent(new CustomEvent('myTestEvent', {num: i}))
-// document.addEventListener('myTestEvent', e => {console.log(e)})
-// 所有Node.js API都可以在预加载过程中使用。
-// 它拥有与Chrome扩展一样的沙盒。
-window.addEventListener('DOMContentLoaded', () => {
-  const replaceText = (selector, text) => {
-    const element = document.getElementById(selector)
-    if (element) element.innerText = text
-  }
-
-  for (const dependency of ['chrome', 'node', 'electron']) {
-    replaceText(`${dependency}-version`, process.versions[dependency])
-  }
-})

env/.env.test

@@ -0,0 +1,12 @@
+ENV = 'development'
+
+VITE_BASE=/
+VUE_APP_PREVIEW=false
+#VITE_BASE_API=http://192.168.88.21:9503
+
+#VITE_SOCKET_API=ws://192.168.88.21:9504
+ VITE_BASE_API=http://114.218.158.24:8503
+ VITE_SOCKET_API=ws://114.218.158.24:8504
+VITE_EPR_BASEURL=http://114.218.158.24:9020
+VITE_PAGE_URL=http://172.16.100.93:9032
+VUE_APP_WEBSITE_NAME=""

index.html

@@ -5,7 +5,7 @@
   <meta charset="UTF-8" />
   <link rel="icon" href="./src/assets/image/favicon.png" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Lumen IM 在线聊天</title>
+  <title> 在线聊天</title>
   <style>
     .outer,
     .middle,

package.json

@@ -1,33 +1,43 @@
 {
-  "name": "LumenIM",
+  "name": "IM",
   "private": true,
   "version": "0.0.0",
-  "main": "electron/main.js",
+  "type": "module",
   "scripts": {
-    "dev": "vite --mode development --port 5273",
+    "dev:test": "vite --mode test --port 5273",
-    "build": "vite build",
+    "dev:prod": "vite --mode prod --port 5273",
+    "build:test": "vite build --mode test",
+    "build:prod": "vite build --mode test",
     "preview": "vite preview",
-    "electron": "wait-on tcp:5174 && cross-env NODE_ENV=development PROT=5174 electron .",
-    "electron:dev": "concurrently -k \"npm run dev\" \"npm run electron\"",
-    "electron:build": "vite build --mode electron && electron-builder --mac && electron-builder --win --x64",
-    "electron:build-mac": "vite build --mode electron && electron-builder --mac",
     "type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false",
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
     "format": "prettier --write src/"
   },
   "dependencies": {
+    "@ant-design/icons-vue": "^7.0.1",
     "@highlightjs/vue-plugin": "^2.1.0",
+    "@iconify-json/ion": "^1.2.3",
     "@kangc/v-md-editor": "^2.3.18",
+    "@onlyoffice/document-editor-vue": "^1.5.0",
+    "@vicons/fluent": "^0.13.0",
+    "@vicons/ionicons4": "^0.13.0",
+    "@vicons/ionicons5": "^0.13.0",
     "@vueup/vue-quill": "^1.2.0",
     "@vueuse/core": "^10.7.0",
+    "ant-design-vue": "^4.2.6",
     "axios": "^1.6.2",
+    "dayjs": "^1.11.13",
     "highlight.js": "^11.5.0",
     "js-audio-recorder": "^1.0.7",
+    "lodash-es": "^4.17.21",
     "pinia": "^2.1.7",
     "pinia-plugin-persistedstate": "^3.2.0",
+    "pnpm": "^10.10.0",
     "quill": "^1.3.7",
     "quill-image-uploader": "^1.3.0",
     "quill-mention": "^4.1.0",
+    "sortablejs": "^1.15.6",
+    "viewerjs": "^1.11.7",
     "vue": "^3.3.11",
     "vue-cropper": "^1.1.1",
     "vue-router": "^4.2.5",
@@ -37,44 +47,41 @@
   },
   "devDependencies": {
     "@icon-park/vue-next": "^1.4.2",
-    "@rushstack/eslint-patch": "^1.3.3",
     "@tsconfig/node18": "^18.2.2",
     "@types/node": "^18.18.5",
     "@types/vue": "^2.0.0",
+    "@unocss/reset": "^66.1.1",
     "@vitejs/plugin-vue": "^4.4.0",
     "@vitejs/plugin-vue-jsx": "^3.0.2",
-    "@vue/eslint-config-prettier": "^8.0.0",
-    "@vue/eslint-config-typescript": "^12.0.0",
     "@vue/tsconfig": "^0.4.0",
     "concurrently": "^7.3.0",
     "cross-env": "^7.0.3",
-    "electron": "^19.1.9",
-    "electron-builder": "^23.6.0",
-    "eslint": "^8.49.0",
-    "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-prettier": "^5.0.1",
-    "eslint-plugin-vue": "^9.17.0",
     "less": "^4.2.0",
     "less-loader": "^11.1.3",
     "naive-ui": "^2.35.0",
     "npm-run-all2": "^6.1.1",
     "prettier": "^3.1.0",
+    "sass": "^1.88.0",
     "typescript": "~5.2.0",
-    "vite": "^4.5.1",
+    "unocss": "0.58.0",
+    "unplugin-auto-import": "^19.2.0",
+    "unplugin-vue-components": "^28.5.0",
+    "vite": "^6.3.5",
     "vite-plugin-compression": "^0.5.1",
+    "vite-plugin-vue-devtools": "^7.7.6",
     "vue-tsc": "^1.8.25",
     "wait-on": "^6.0.1"
   },
   "build": {
-    "appId": "com.gzydong.lumenim",
+    "appId": "com.gzydong.im",
-    "productName": "LumenIM",
+    "productName": "IM",
-    "copyright": "Copyright © 2023 LumenIM",
+    "copyright": "Copyright © 2023 IM",
     "mac": {
       "category": "public.app-category.utilities",
-      "icon": "build/icons/lumen-im-mac.png"
+      "icon": "build/icons/-im-mac.png"
     },
     "win": {
-      "icon": "build/icons/lumen-im-mac.png",
+      "icon": "build/icons/-im-mac.png",
       "target": [
         {
           "target": "nsis"
@@ -84,20 +91,12 @@
     "nsis": {
       "oneClick": false,
       "allowToChangeInstallationDirectory": true,
-      "installerIcon": "build/icons/lumen-im-win.ico",
+      "installerIcon": "build/icons/-im-win.ico",
-      "uninstallerIcon": "build/icons/lumen-im-win.ico",
+      "uninstallerIcon": "build/icons/-im-win.ico",
-      "installerHeaderIcon": "build/icons/lumen-im-win.ico",
+      "installerHeaderIcon": "build/icons/-im-win.ico",
       "createDesktopShortcut": true,
       "createStartMenuShortcut": true,
       "shortcutName": "lumeim-icon"
-    },
-    "files": [
-      "dist/**/*",
-      "electron/**/*"
-    ],
-    "directories": {
-      "buildResources": "assets",
-      "output": "dist_electron"
     }
   }
 }

src/App.vue

@@ -36,7 +36,7 @@ IconProvider({
   strokeLinejoin: 'bevel'
 })
 
-const { uid: showUserId, isShow: isShowUser } = useProvideUserModal()
+const { uid: showUserId, isShow: isShowUser,euid } = useProvideUserModal()
 const { getDarkTheme, getThemeOverride } = useThemeMode()
 
 const userStore = useUserStore()
@@ -94,6 +94,7 @@ useClickEvent()
       <UserCardModal
         v-model:show="isShowUser"
         v-model:uid="showUserId"
+        :euid="euid"
         @update-remark="onChangeRemark"
       />
     </n-layout-content>

src/api/auth.js

@@ -25,3 +25,7 @@ export const ServeRefreshToken = () => {
 export const ServeForgetPassword = (data) => {
   return post('/api/v1/auth/forget', data)
 }
+// 获取用户信息服务
+export const GetUserInfo = (data) => {
+  return post('/api/v1/users/info', data)
+}

src/api/chat.js

@@ -9,7 +9,10 @@ export const ServeGetTalkList = (data = {}) => {
 export const ServeCreateTalkList = (data = {}) => {
   return post('/api/v1/talk/create', data)
 }
-
+// 聊天列表创建服务接口
+export const voiceToText = (data = {}) => {
+  return post('/api/v1/talk/message/voice-to-text', data)
+}
 // 删除聊天列表服务接口
 export const ServeDeleteTalkList = (data = {}) => {
   return post('/api/v1/talk/delete', data)
@@ -32,7 +35,7 @@ export const ServeTalkRecords = (data = {}) => {
 
 // 获取转发会话记录详情列表服务接口
 export const ServeGetForwardRecords = (data = {}) => {
-  return get('/api/v1/talk/records/forward', data)
+  return get('/api/v1/talk/records/forward/v2', data)
 }
 
 // 对话列表置顶服务接口
@@ -86,3 +89,23 @@ export const ServeSendVote = (data = {}) => {
 export const ServeConfirmVoteHandle = (data = {}) => {
   return post('/api/v1/talk/message/vote/handle', data)
 }
+
+//清空聊天记录
+export const ServeEmptyMessage = (data) => {
+  return post('/api/v1/talk/message/empty', data)
+}
+
+//获取消息已读未读详情
+export const ServeMessageReadDetail = (data) => {
+  return post('/api/v1/talk/my-records/read/condition', data)
+}
+
+// 主动添加好友（单向好友）
+export const ServeAddFriend = (data) => {
+  return post('/api/v1/contact/friend/add', data)
+}
+
+// 检测是否需要加好友
+export const ServeCheckFriend = (data) => {
+  return post('/api/v1/contact/friend/check', data)
+}

src/api/components.js

@@ -0,0 +1,22 @@
+import _axios from '@/utils/erpRequest'
+export default {
+    deleteDataByParams: (url, data) => _axios.fetch(url, data, 'DELETE'),
+    putDataByParams: (url, data) => _axios.fetch(url, data, 'PUT'),
+    postDataByParams: (url, data) => _axios.fetch(url, data, 'POST'),
+    findDates: ( data) => _axios.fetch('/report/find/dates', data, 'GET'),
+    postBlobByParams: (url, data) => _axios.fetch(url, data, 'POST', 'blob'),
+    getDataByParams: (url, data) => _axios.fetch(url, data, 'GET'),
+    getBlobByParams: (url, data) => _axios.fetch(url, data, 'GET', 'blob'),
+    uploadFormData: (url, data) => _axios.fetch(url, data, 'POST', 'json', '', true, true),
+    viewDetails: (data) => _axios.fetch('/health/info', data, 'POST'),
+    healthDelex: (data) => _axios.fetch('/health/delex', data, 'POST'),
+    healthDrde: (data) => _axios.fetch('/health/drde', data, 'POST'),
+    healthEdit: (data) => _axios.fetch('/health/edit', data, 'POST'),
+    healthAdddr: (data) => _axios.fetch('/health/adddr', data, 'POST'),
+    healthEditStreet: (data) => _axios.fetch('/health/editstreet', data, 'POST'),
+    healthIllmessage: (data) => _axios.fetch('/health/illmessage', data, 'POST'),
+    healthCall: (url, data) => _axios.fetch(url, data, 'POST'),
+    promotionDownload: (data) => _axios.fetch('/collections/extend', data, 'POST', 'blob'),
+    //只能看到我所在的组织机构树
+    viewMyTree: (data) => _axios.fetch('/department/v2/tree/my', data, 'POST'),
+}

src/api/contact.js

@@ -45,10 +45,12 @@ export const ServeFindFriendApplyNum = () => {
 }
 
 // 搜索用户信息服务接口
+// export const ServeSearchUser = (data) => {
+//   return get('/api/v1/contact/detail', data)
+// }
 export const ServeSearchUser = (data) => {
-  return get('/api/v1/contact/detail', data)
+  return post('/api/v1/users/info', data)
 }
-
 // 搜索用户信息服务接口
 export const ServeContactGroupList = (data) => {
   return get('/api/v1/contact/group/list', data)

src/api/group.js

@@ -77,6 +77,11 @@ export const ServeEditGroupNotice = (data) => {
   return post('/api/v1/group/notice/edit', data)
 }
 
+//  删除群公告
+export const ServeDeleteGroupNotice = (data) => {
+  return post('/api/v1/group/notice/delete', data)
+}
+
 export const ServeGetGroupApplyList = (data) => {
   return get('/api/v1/group/apply/list', data)
 }

src/api/index.js

@@ -0,0 +1,18 @@
+// 使用 `import.meta.glob` 来同步导入所有匹配的模块
+// 使用 `{ eager: true }` 选项来立即加载这些模块
+const modules = import.meta.glob('./*.js', { eager: true });
+
+const HTTP = {};
+for (const path in modules) {
+  if (Object.hasOwnProperty.call(modules, path)) {
+    // 正确移除 './' 和 '.js'，只保留文件名
+    const componentName = path.replace(/^\.\/(.*)\.\w+$/, '$1');
+    if (componentName !== 'index') {
+      // 确保我们只获取模块的默认导出
+      HTTP[componentName] = modules[path]?.default;
+    }
+  }
+}
+
+// 导出 HTTP 对象
+export default { HTTP };

src/api/search.js

@@ -0,0 +1,36 @@
+import { post, get, upload } from '@/utils/request'
+
+//ES搜索-主页搜索什么都有、指定用户、指定群、群与用户概览
+export const ServeSeachQueryAll = (data = {}) => {
+  return post('/api/v1/elasticsearch/query-all/v2', data)
+}
+
+// ES搜索用户数据
+export const ServeQueryUser = (data) => {
+  return post('/api/v1/elasticsearch/query-user/v2', data)
+}
+
+// ES搜索群组数据
+export const ServeQueryGroup = (data) => {
+  return post('/api/v1/elasticsearch/query-group', data)
+}
+
+//ES搜索聊天记录-主页搜索什么都有、聊天记录
+export const ServeQueryTalkRecord = (data = {}) => {
+  return post('/api/v1/elasticsearch/query-talk-record', data)
+}
+
+//查看存在聊天记录的天数
+export const ServeTalkDate = (data) => {
+  return post('/api/v1/talk/date', data)
+}
+
+//获取会话Id
+export const ServeGetSessionId = (data) => {
+  return post('/api/v1/talk/session/getId', data)
+}
+
+//获取用户所在群聊列表
+export const ServeUserGroupChatList = (data) => {
+  return post('/api/v1/group/user/list', data)
+}

src/api/upload.js

@@ -21,6 +21,9 @@ export const ServeFileSubareaUpload = (data = {}, options = {}) => {
 }
 
 // 上传图片文件或者视频
-export const uploadImg = (data) => {
+export const uploadImg = (data, signal) => {
-  return post('/upload/img', data,{baseURL:import.meta.env.VITE_EPR_BASEURL})
+  return post('/upload/img', data, {
+    baseURL: import.meta.env.VITE_EPR_BASEURL,
+    signal: signal
+  })
 }

src/api/user.js

@@ -29,3 +29,8 @@ export const ServeGetUserDetail = () => {
 export const ServeGetUserSetting = () => {
   return get('/api/v1/users/setting')
 }
+
+//根据erpUserId查询聊天系统用户详情
+export const getUserInfoByERPUserId = (data) => {
+  return post('/api/v1/users/info', data)
+}

src/assets/css/define/global.less

@@ -1,6 +1,7 @@
 * {
   margin: 0;
   padding: 0;
+  box-sizing: border-box!important;
 }
 
 @font-face {
@@ -15,6 +16,7 @@
 
 body,
 html {
+  margin-right: 0!important;
   height: 100%;
   min-width: 500px;
   color: #333;
@@ -204,7 +206,7 @@ textarea {
   border-radius: 2px;
   cursor: default;
   user-select: none;
-  background-color: #dee0e3;
+
   transform: scale(0.84);
   transform-origin: left;
   flex-shrink: 0;

src/assets/css/define/theme.less

@@ -1,10 +1,10 @@
 // 默认主题
 html {
-  --im-primary-color: #1890ff;
+  --im-primary-color: #462AA0;
   --im-bg-color: #ffffff;
   --line-border-color: #f5f5f5;
   --border-color: #eeeaea;
-  --im-text-color: #333;
+  --im-text-color: #BABABA;
   --im-text-color-grey: #333;
   --im-active-bg-color: #f5f5f5;
   --im-hover-bg-color: #f5f5f5;
@@ -21,15 +21,15 @@ html {
   // message
   --im-message-bg-color: #f7f7f7;
   --im-message-border-color: #efeff5;
-  --im-message-left-bg-color: #eff0f1;
+  --im-message-left-bg-color: #fff;
   --im-message-left-text-color: #333;
-  --im-message-right-bg-color: #daf3fd;
+  --im-message-right-bg-color: #46299D;
-  --im-message-right-text-color: #333;
+  --im-message-right-text-color: #fff;
 }
 
 // 黑色主题
 html[theme-mode='dark'] {
-  --im-primary-color: #1890ff;
+  --im-primary-color: #462AA0;
   --im-bg-color: #202124;
   --line-border-color: rgb(255 255 255 / 9%);
   --border-color: rgb(255 255 255 / 9%);

src/assets/css/dropsize.less

@@ -12,7 +12,7 @@
 
   &:hover,
   &.dropsize-resizing {
-    background-color: #1890ff;
+    background-color: #462AA0;
   }
 
   &.dropsize-line-top {

src/assets/css/naive-ui-adjust.less

@@ -0,0 +1,68 @@
+/* naive ui 部分样式调整*/
+/*表格排序图标颜色问题 */
+.n-data-table-sorter{
+  color: #fff!important;
+}
+
+.n-checkbox-box-wrapper .n-checkbox-box{
+  border-radius: 50%;
+}
+/*表格头多选框颜色调整避免和表头颜色冲突*/
+.n-data-table-thead .n-data-table-tr .n-checkbox-box{
+background: #fff;
+  .n-checkbox-icon{
+    .check-icon{
+      fill:#462AA0 ;
+    }
+    svg{
+      fill:#462AA0 ;
+    }
+  }
+  .n-checkbox-box__border{
+    border: #fff!important;
+  }
+}
+/*弹窗内表格背景颜色调整*/
+.n-data-table .n-data-table-th {
+  background-color: #462AA0;
+}
+/*
+naive ui 消息提示框 样式调整
+*/
+.n-message-wrapper{
+  .n-message{
+    &.n-message--info-type{
+      border: 1px solid #C7DFFB;
+      background-color: #EDF5FE;
+    }
+    &.n-message--warning-type{
+      border: 1px solid #FAE0B5;
+      background-color: #FEF7ED;
+    }
+    &.n-message--error-type{
+      border: 1px solid #F3CBD3;
+      background-color:#FBEEF1;
+    }
+    &.n-message--success-type{
+      border: 1px solid #C5E7D5;
+      background-color:#EDF7F2;
+    }
+    &.n-message--loading-type{
+      border: 1px solid #B2A6D6;
+      background-color:#EDF7F2;
+    }
+  }
+}
+/*
+n-image 图片放大查看器工具栏样式调整 样式污染问题
+*/
+.n-base-icon{
+  box-sizing: initial!important;
+}
+/*表格排序列背景颜色问题*/
+.n-data-table .n-data-table-th.n-data-table-th--sortable{
+  background-color: #462AA0;
+}
+.n-data-table .n-data-table-th.n-data-table-th--sortable:hover{
+  background-color: #462AA0;
+}

src/components/avatar-module/index.vue

@@ -0,0 +1,144 @@
+<template>
+<div class="relative">
+  <div class="avatar-module" :style="[customStyle, { background: avatar ? '#fff' : '' }]">
+    <img :src="avatar" v-if="avatar" />
+    <span v-else :style="customTextStyle">{{ text_avatar }}</span>
+  </div>
+  <div 
+    v-if="[2,3,4].includes(groupType)&&showGroupType" 
+    class="absolute border-2px border-solid rounded-3px bg-#fff flex justify-center items-center leading-none" 
+    :style="[
+      groupLabelStyle,
+      `color:${labelColor.find(x=>x.group_type===groupType)?.color};border-color:${labelColor.find(x=>x.group_type===groupType)?.color}`
+    ]"
+  >
+    {{ labelColor.find(x=>x.group_type===groupType)?.label }}
+  </div>
+</div>
+</template>
+<script setup>
+//群聊默认头像
+import groupNormal from '@/assets/image/groupNormal.png'
+import groupDepartment from '@/assets/image/groupDepartment.png'
+import groupProject from '@/assets/image/groupProject.png'
+import groupCompany from '@/assets/image/groupCompany.png'
+import { computed, defineProps } from 'vue'
+//群类型：1=普通群；2=部门群；3=项目群；4=总群/公司群
+const labelColor=[
+  {group_type:2,color:'#377EC6',label:'部门'},
+  {group_type:3,color:'#C1691C',label:'项目'},
+  {group_type:4,color:'#7A58DE',label:'公司'},
+]
+const props = defineProps({
+  mode: {
+    //模式：1=人；2=群
+    type: Number,
+    default: 0,
+  },
+  showGroupType:{
+    type:Boolean,
+    default:false
+  },
+  avatar: {
+    //头像
+    type: String,
+    default: '',
+  },
+  userName: {
+    //用户名称
+    type: String,
+    default: '',
+  },
+  groupType: {
+    //群类型：1=普通群；2=部门群；3=项目群；4=总群/公司群
+    type: Number,
+    default: 0,
+  },
+  customStyle: {
+    //自定义样式
+    type: Object,
+    default() {
+      return {}
+    },
+  },
+  customTextStyle: {
+    //自定义文字样式
+    type: Object,
+    default() {
+      return {}
+    },
+  },
+})
+
+//头像
+const avatar = computed(() => {
+  let avatar_img = props?.avatar
+  if (!avatar_img) {
+    if (props?.mode === 1) {
+    } else if (props?.mode === 2) {
+      if (props?.groupType === 1) {
+        avatar_img = groupNormal
+      } else if (props?.groupType === 2) {
+        avatar_img = groupDepartment
+      } else if (props?.groupType === 3) {
+        avatar_img = groupProject
+      } else if (props?.groupType === 4) {
+        avatar_img = groupCompany
+      }
+    }
+  }
+  return avatar_img
+})
+
+//文字头像
+const text_avatar = computed(() => {
+  return props?.userName.length >= 2
+    ? props?.userName.slice(-2)
+    : props?.userName
+})
+
+// 计算群标签的动态样式
+const groupLabelStyle = computed(() => {
+  // 获取头像的宽高
+  const avatarWidth = parseInt(props.customStyle.width) || 42
+  const avatarHeight = parseInt(props.customStyle.height) || 42
+  
+  // 计算标签的尺寸比例（基于原始尺寸：头像42px，标签宽32px高18px，文字10px）
+  const widthRatio = avatarWidth / 42
+  const heightRatio = avatarHeight / 42
+  
+  // 计算标签的尺寸
+  const labelWidth = Math.round(32 * widthRatio)
+  const labelHeight = Math.round(18 * heightRatio)
+  const fontSize = Math.round(10 * widthRatio)
+  
+  // 计算标签的位置（基于原始位置：top-28px）
+  const topPosition = Math.round(28 * heightRatio)
+  
+  return {
+    width: `${labelWidth}px`,
+    height: `${labelHeight}px`,
+    fontSize: `${fontSize}px`,
+    top: `${topPosition}px`,
+    left: '50%',
+    transform: 'translateX(-50%)'
+  }
+})
+</script>
+<style lang="less" scoped>
+.avatar-module {
+  border-radius: 50%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(to right, #674bbc, #46299d);
+  flex-shrink: 0;
+  img {
+    width: 42px;
+    height: 42px;
+    object-fit: cover;
+  }
+}
+</style>

src/components/base/Loading.vue

@@ -44,7 +44,7 @@
   font-feature-settings: 'tnum';
   position: absolute;
   display: none;
-  color: #1890ff;
+  color: #462AA0;
   text-align: center;
   vertical-align: middle;
   opacity: 0;
@@ -177,7 +177,7 @@
   display: block;
   width: 9px;
   height: 9px;
-  background-color: #1890ff;
+  background-color: #462AA0;
   border-radius: 100%;
   -webkit-transform: scale(0.75);
   transform: scale(0.75);

src/components/common/customBtn.vue

@@ -0,0 +1,20 @@
+<template>
+  <n-button
+    v-bind="$attrs"
+  >
+    <template
+      v-for="(slot, name) in $slots"
+      :key="name"
+      #[name]
+    >
+      <slot :name="name"></slot>
+    </template>
+  </n-button>
+</template>
+
+<script setup>
+import { NButton } from 'naive-ui'
+</script>
+
+<style scoped lang="scss">
+</style>

src/components/common/customModal.vue

@@ -0,0 +1,156 @@
+<template>
+  <xNModal v-model:show="show" v-bind="$attrs">
+    <template #header>
+      <div class="custom-modal-header">
+        <div class="header-content">
+          <template v-if="$slots.header">
+            <slot name="header"></slot>
+          </template>
+          <template v-else>
+            {{ title }}
+          </template>
+          <div class="custom-close-btn" v-if="customCloseBtn">
+            <img src="@/assets/image/icon/close-btn-grey.png" alt="" @click="handleCloseModal" />
+          </div>
+        </div>
+      </div>
+    </template>
+    <slot name="content"></slot>
+    <template #footer v-if="actionBtns?.cancelBtn || actionBtns?.confirmBtn">
+      <div
+        class="custom-modal-btns"
+        :style="props?.customModalBtnsStyle ? props.customModalBtnsStyle : ''"
+      >
+        <customBtn
+          color="#C7C7C9"
+          style="width: 161px; height: 34px;"
+          @click="handleCancel"
+          v-if="actionBtns?.cancelBtn"
+          >{{ actionBtns?.cancelBtn?.text || '取消' }}</customBtn
+        >
+        <customBtn
+          color="#46299D"
+          style="width: 161px; height: 34px;"
+          @click="handleConfirm"
+          :disabled="actionBtns?.confirmBtn?.disabled"
+          :loading="state.confirmBtnLoading && actionBtns?.confirmBtn?.doLoading"
+          v-if="actionBtns?.confirmBtn"
+          >{{ actionBtns?.confirmBtn?.text || '确定' }}</customBtn
+        >
+      </div>
+    </template>
+  </xNModal>
+</template>
+
+<script setup>
+import { reactive, computed } from 'vue'
+import xNModal from '@/components/x-naive-ui/x-n-modal/index.vue'
+import customBtn from '@/components/common/customBtn.vue'
+
+const props = defineProps({
+  show: {
+    // 是否显示模态框
+    type: Boolean,
+    default: false
+  },
+  title: {
+    // 模态框标题
+    type: String,
+    default: ''
+  },
+  actionBtns: {
+    // 操作按钮
+    type: Object,
+    default: () => ({})
+  },
+  customCloseBtn: {
+    // 是否显示自定义关闭按钮
+    type: Boolean,
+    default: false
+  },
+  customModalBtnsStyle: {
+    // 自定义按钮样式
+    type: String,
+    default: ''
+  },
+  customCloseEvent: {
+    // 是否自定义关闭事件
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits(['update:show', 'cancel', 'confirm', 'customCloseModal'])
+
+const show = computed({
+  get: () => props.show,
+  set: (val) => emit('update:show', val)
+})
+
+const handleCancel = () => {
+  if (props.actionBtns?.cancelBtn?.hideModal) {
+    show.value = false
+  }
+  emit('cancel')
+}
+
+const handleConfirm = () => {
+  if (props.actionBtns?.confirmBtn?.doLoading) {
+    state.confirmBtnLoading = true
+  }
+  emit('confirm', closeLoading)
+}
+
+const closeLoading = () => {
+  state.confirmBtnLoading = false
+}
+
+const state = reactive({
+  confirmBtnLoading: false // 确定按钮loading
+})
+
+const handleCloseModal = () => {
+  if (props.customCloseEvent) {
+    emit('customCloseModal')
+  } else {
+    show.value = false
+  }
+}
+</script>
+
+<style scoped lang="less">
+.custom-modal-header {
+  border-bottom: 1px solid #e5e5e5;
+  margin: 0 12px;
+
+  .header-content {
+    padding: 0 0 15px;
+    text-align: center;
+    color: #1f2225;
+    font-size: 20px;
+    font-weight: 600;
+    line-height: 28px;
+    position: relative;
+
+    .custom-close-btn {
+      position: absolute;
+      right: 0;
+      top: 0;
+      cursor: pointer;
+      img {
+        width: 30px;
+        height: 30px;
+      }
+    }
+  }
+}
+
+.custom-modal-btns {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  padding: 0 0 50px;
+}
+</style>

src/components/confirm-box/index.vue

@@ -0,0 +1,49 @@
+<script setup>
+import { ref, watch } from 'vue'
+import XNModal from '@/components/x-naive-ui/x-n-modal/index.vue'
+const emit = defineEmits(['cancel','confirm'])
+const show=defineModel('show')
+const props = defineProps({
+  title:{
+    type:String,
+    default:'提示'
+  },
+  content:{
+    type:String,
+    default:'内容'
+  },
+  cancelText:{
+    type:String,
+    default:'取消'
+  },
+  confirmText:{
+    type:String,
+    default:'确定'
+  }
+})
+
+
+</script>
+
+<template>
+    
+  <XNModal v-model:show="show" :closable="false" class="w-724px"    content-style="padding:0px"  @after-leave="emit('after-leave')">
+   <div class="flex flex-col w-full px-25px pb-49px">
+    <div class="text-20px text-#1F2225 w-full text-center border-b-1px border-b-solid border-b-#E9E9E9 py-20px">{{ title }}</div>
+    <div class="py-60px text-center text-20px text-#1F2225">
+        {{ content }}
+    </div>
+    <div class="flex w-full justify-center">
+        <n-button color="#C7C7C9" class="text-14px text-#fff w-161px h-34px mr-10px"
+          @click="() => { show=false; emit('cancel') }"
+        >{{ cancelText }}</n-button>
+        <n-button color="#46299D" class="text-14px text-#fff w-161px h-34px"
+          @click="() => { show=false; emit('confirm') }"
+        >{{ confirmText }}</n-button>
+    </div>
+   </div>
+  </XNModal>
+</template>
+
+<style scoped>
+</style>

src/components/confirm-box/service.js

@@ -0,0 +1,32 @@
+import { createVNode, nextTick, render } from 'vue'
+import ConfirmBox from './index.vue'
+
+export function confirmBox(options) {
+  return new Promise((resolve, reject) => {
+    const container = document.createElement('div')
+    document.body.appendChild(container)
+
+    const props = {
+      ...options,
+      show: false,
+      onCancel: () => {
+        reject()
+
+      },
+      onAfterLeave:()=>{
+        render(null, container)
+        document.body.removeChild(container)
+      },
+      onConfirm: () => {
+        resolve()
+    
+      },
+    }
+
+    const vnode = createVNode(ConfirmBox, props)
+    render(vnode, container)
+    nextTick(() => {
+      vnode.component.props.show = true
+    })
+  })
+}

src/components/editor/Editor.vue

@@ -1,81 +1,116 @@
 <script lang="ts" setup>
+// 引入Quill编辑器的样式文件
 import '@vueup/vue-quill/dist/vue-quill.snow.css'
+// 引入图片上传插件的样式
 import 'quill-image-uploader/dist/quill.imageUploader.min.css'
+// 引入自定义的提及功能样式
 import '@/assets/css/editor-mention.less'
+// 引入Vue核心功能
 import { reactive, watch, ref, markRaw, computed, onMounted, onUnmounted } from 'vue'
+// 引入Naive UI的弹出框组件
 import { NPopover } from 'naive-ui'
+// 引入图标组件
 import {
-  Voice as IconVoice,
+  Voice as IconVoice,    // 语音图标
-  SourceCode,
+  SourceCode,            // 代码图标
-  Local,
+  Local,                 // 地理位置图标
-  SmilingFace,
+  SmilingFace,           // 表情图标
-  Pic,
+  Pic,                   // 图片图标
-  FolderUpload,
+  FolderUpload,          // 文件上传图标
-  Ranking,
+  Ranking,               // 排名图标（用于投票）
-  History
+  History                // 历史记录图标
 } from '@icon-park/vue-next'
+// 引入Quill编辑器及其核心实例
 import { QuillEditor, Quill } from '@vueup/vue-quill'
+// 引入图片上传插件
 import ImageUploader from 'quill-image-uploader'
+// 引入自定义表情符号格式
 import EmojiBlot from './formats/emoji'
+// 引入自定义引用格式
 import QuoteBlot from './formats/quote'
+// 引入提及功能
 import 'quill-mention'
+// 引入状态管理
 import { useDialogueStore, useEditorDraftStore } from '@/store'
+// 引入编辑器工具函数
 import { deltaToMessage, deltaToString, isEmptyDelta } from './util'
+// 引入获取图片信息的工具函数
 import { getImageInfo } from '@/utils/functions'
+// 引入编辑器常量定义
 import { EditorConst } from '@/constant/event-bus'
+// 引入事件调用工具
 import { emitCall } from '@/utils/common'
+// 引入默认头像常量
 import { defAvatar } from '@/constant/default'
-import MeEditorVote from './MeEditorVote.vue'
+// 引入编辑器各子组件
-import MeEditorEmoticon from './MeEditorEmoticon.vue'
+import MeEditorVote from './MeEditorVote.vue'            // 投票组件
-import MeEditorCode from './MeEditorCode.vue'
+import MeEditorEmoticon from './MeEditorEmoticon.vue'    // 表情组件
-import MeEditorRecorder from './MeEditorRecorder.vue'
+import MeEditorCode from './MeEditorCode.vue'            // 代码编辑组件
+import MeEditorRecorder from './MeEditorRecorder.vue'    // 录音组件
+// 引入上传API
 import { ServeUploadImage } from '@/api/upload'
 import { uploadImg } from '@/api/upload'
+// 引入事件总线钩子
 import { useEventBus } from '@/hooks'
+// 注册Quill编辑器的自定义格式
+Quill.register('formats/emoji', EmojiBlot)       // 注册表情格式
+Quill.register('formats/quote', QuoteBlot)       // 注册引用格式
+Quill.register('modules/imageUploader', ImageUploader)  // 注册图片上传模块
 
-Quill.register('formats/emoji', EmojiBlot)
+// 定义组件的事件
-Quill.register('formats/quote', QuoteBlot)
-Quill.register('modules/imageUploader', ImageUploader)
-
 const emit = defineEmits(['editor-event'])
+// 获取对话状态管理
 const dialogueStore = useDialogueStore()
+// 获取编辑器草稿状态管理
 const editorDraftStore = useEditorDraftStore()
+// 定义组件props
 const props = defineProps({
   vote: {
     type: Boolean,
-    default: false
+    default: false  // 是否显示投票功能
   },
   members: {
-    default: () => []
+    default: () => []  // 聊天成员列表，用于@功能
   }
 })
 
+// 编辑器引用
 const editor = ref()
 
+// 获取Quill编辑器实例
 const getQuill = () => {
   return editor.value?.getQuill()
 }
 
+// 获取当前编辑器光标位置
 const getQuillSelectionIndex = () => {
   let quill = getQuill()
 
   return (quill.getSelection() || {}).index || quill.getLength()
 }
 
+// 计算当前对话索引名称（标识当前聊天）
 const indexName = computed(() => dialogueStore.index_name)
+// 控制是否显示编辑器的投票界面
 const isShowEditorVote = ref(false)
+// 控制是否显示编辑器的代码界面
 const isShowEditorCode = ref(false)
+// 控制是否显示录音界面
 const isShowEditorRecorder = ref(false)
+// 图片文件上传DOM引用
 const fileImageRef = ref()
+// 文件上传DOM引用
 const uploadFileRef = ref()
+// 表情面板引用
 const emoticonRef = ref()
 
+// 编辑器配置选项
 const editorOption = {
   debug: false,
   modules: {
-    toolbar: false,
+    toolbar: false,  // 禁用默认工具栏
     clipboard: {
-      // 粘贴版，处理粘贴时候的自带样式
+      // 粘贴处理，去除粘贴时的自带样式
       matchers: [[Node.ELEMENT_NODE, onClipboardMatcher]]
     },
 
@@ -83,19 +118,22 @@ const editorOption = {
       bindings: {
         enter: {
           key: 13,
-          handler: onSendMessage
+          handler: onSendMessage  // 按Enter键发送消息
         }
       }
     },
 
+    // 图片上传配置
     imageUploader: {
       upload: onEditorUpload
     },
 
+    // @功能配置
     mention: {
-      allowedChars: /^[\u4e00-\u9fa5]*$/,
+      allowedChars: /^[\u4e00-\u9fa5]*$/,  // 允许中文字符
-      mentionDenotationChars: ['@'],
+      mentionDenotationChars: ['@'],       // @符号触发
-      positioningStrategy: 'fixed',
+      positioningStrategy: 'fixed',        // 定位策略
+      // 渲染@项目的函数
       renderItem: (data: any) => {
         const el = document.createElement('div')
         el.className = 'ed-member-item'
@@ -103,16 +141,18 @@ const editorOption = {
         el.innerHTML += `<span class="nickname">${data.nickname}</span>`
         return el
       },
+      // 数据源函数，过滤匹配的用户
       source: function (searchTerm: string, renderList: any) {
+        console.log("source")
         if (!props.members.length) {
           return renderList([])
         }
-
         let list = [
-          { id: 0, nickname: '所有人', avatar: defAvatar, value: '所有人' },
           ...props.members
-        ]
+        ] as any
-
+if((dialogueStore.groupInfo as any).is_manager){
+  list.unshift({ id: 0, nickname: '所有人', avatar: defAvatar, value: '所有人' })
+}
         const items = list.filter(
           (item: any) => item.nickname.toLowerCase().indexOf(searchTerm) !== -1
         )
@@ -123,66 +163,73 @@ const editorOption = {
     }
   },
   placeholder: '按Enter发送 / Shift+Enter 换行',
-  theme: 'snow'
+  theme: 'snow'  // 使用snow主题
 }
 
+// 底部工具栏配置
 const navs = reactive([
   {
     title: '图片',
     icon: markRaw(Pic),
     show: true,
     click: () => {
-      fileImageRef.value.click()
+      fileImageRef.value.click()  // 触发图片上传
     }
   },
   {
-    title: '附件',
+    title: '文件',
     icon: markRaw(FolderUpload),
     show: true,
     click: () => {
-      uploadFileRef.value.click()
+      uploadFileRef.value.click()  // 触发文件上传
     }
   },
-  {
+  // 以下功能已被注释掉，但保留代码
-    title: '代码',
+  // {
-    icon: markRaw(SourceCode),
+  //   title: '代码',
-    show: true,
+  //   icon: markRaw(SourceCode),
-    click: () => {
+  //   show: true,
-      isShowEditorCode.value = true
+  //   click: () => {
-    }
+  //     isShowEditorCode.value = true
-  },
+  //   }
-  {
+  // },
-    title: '语音消息',
+  // {
-    icon: markRaw(IconVoice),
+  //   title: '语音消息',
-    show: true,
+  //   icon: markRaw(IconVoice),
-    click: () => {
+  //   show: true,
-      isShowEditorRecorder.value = true
+  //   click: () => {
-    }
+  //     isShowEditorRecorder.value = true
-  },
+  //   }
-  {
+  // },
-    title: '地理位置',
+  // {
-    icon: markRaw(Local),
+  //   title: '地理位置',
-    show: true,
+  //   icon: markRaw(Local),
-    click: () => {}
+  //   show: true,
-  },
+  //   click: () => {}
-  {
+  // },
-    title: '群投票',
+  // {
-    icon: markRaw(Ranking),
+  //   title: '群投票',
-    show: computed(() => props.vote),
+  //   icon: markRaw(Ranking),
-    click: () => {
+  //   show: computed(() => props.vote),
-      isShowEditorVote.value = true
+  //   click: () => {
-    }
+  //     isShowEditorVote.value = true
-  },
+  //   }
-  {
+  // },
-    title: '历史记录',
+  // {
-    icon: markRaw(History),
+  //   title: '历史记录',
-    show: true,
+  //   icon: markRaw(History),
-    click: () => {
+  //   show: true,
-      emit('editor-event', emitCall('history_event'))
+  //   click: () => {
-    }
+  //     emit('editor-event', emitCall('history_event'))
-  }
+  //   }
+  // }
 ])
 
+/**
+ * 上传图片函数
+ * @param file 文件对象
+ * @returns Promise，成功时返回图片URL
+ */
 function onUploadImage(file: File) {
   return new Promise((resolve) => {
     let image = new Image()
@@ -190,35 +237,44 @@ function onUploadImage(file: File) {
     image.onload = () => {
       const form = new FormData()
       form.append('file', file)
-      form.append("source", "fonchain-chat");
+      form.append("source", "fonchain-chat");  // 图片来源标识
-      // form.append('width', image.width.toString())
+      // 添加图片尺寸信息作为URL参数
-      // form.append('height', image.height.toString())
       form.append("urlParam", `width=${image.width}&height=${image.height}`);
 
+      // 调用上传API
       uploadImg(form).then(({ code, data, message }) => {
         if (code == 0) {
-          resolve(data.ori_url)
+          resolve(data.ori_url)  // 返回原始图片URL
         } else {
           resolve('')
-          window['$message'].error(message)
+          window['$message'].error(message)  // 显示错误信息
         }
       })
     }
   })
 }
 
+/**
+ * 编辑器上传处理函数
+ * @param file 要上传的文件
+ * @returns Promise
+ */
 function onEditorUpload(file: File) {
   async function fn(file: File, resolve: Function, reject: Function) {
     if (file.type.indexOf('image/') === 0) {
+      // 如果是图片，使用图片上传处理
       return resolve(await onUploadImage(file))
     }
 
     reject()
 
+    // 非图片文件的处理
     if (file.type.indexOf('video/') === 0) {
+      // 视频文件
       let fn = emitCall('video_event', file, () => {})
       emit('editor-event', fn)
     } else {
+      // 其他文件
       let fn = emitCall('file_event', file, () => {})
       emit('editor-event', fn)
     }
@@ -229,29 +285,40 @@ function onEditorUpload(file: File) {
   })
 }
 
+/**
+ * 投票事件处理
+ * @param data 投票数据
+ */
 function onVoteEvent(data: any) {
   const msg = emitCall('vote_event', data, (ok: boolean) => {
     if (ok) {
-      isShowEditorVote.value = false
+      isShowEditorVote.value = false  // 成功后关闭投票界面
     }
   })
 
   emit('editor-event', msg)
 }
 
+/**
+ * 表情事件处理
+ * @param data 表情数据
+ */
 function onEmoticonEvent(data: any) {
-  emoticonRef.value.setShow(false)
+  emoticonRef.value.setShow(false)  // 关闭表情面板
 
   if (data.type == 1) {
+    // 插入文本表情
     const quill = getQuill()
     let index = getQuillSelectionIndex()
 
+    // 删除编辑器中多余的换行符
     if (index == 1 && quill.getLength() == 1 && quill.getText(0, 1) == '\n') {
       quill.deleteText(0, 1)
       index = 0
     }
 
     if (data.img) {
+      // 插入图片表情
       quill.insertEmbed(index, 'emoji', {
         alt: data.value,
         src: data.img,
@@ -259,74 +326,87 @@ function onEmoticonEvent(data: any) {
         height: '24px'
       })
     } else {
+      // 插入文本表情
       quill.insertText(index, data.value)
     }
 
+    // 设置光标位置
     quill.setSelection(index + 1, 0, 'user')
   } else {
+    // 发送整个表情包
     let fn = emitCall('emoticon_event', data.value, () => {})
     emit('editor-event', fn)
   }
 }
 
+/**
+ * 代码事件处理
+ * @param data 代码数据
+ */
 function onCodeEvent(data: any) {
   const msg = emitCall('code_event', data, (ok: boolean) => {
-    isShowEditorCode.value = false
+    isShowEditorCode.value = false  // 成功后关闭代码界面
   })
 
   emit('editor-event', msg)
 }
 
+/**
+ * 文件上传处理
+ * @param e 上传事件对象
+ */
 async function onUploadFile(e: any) {
   let file = e.target.files[0]
 
-  e.target.value = null
+  e.target.value = null  // 清空input，允许再次选择相同文件
 
   console.log("文件类型"+file.type)
   if (file.type.indexOf('image/') === 0) {
     console.log("进入图片")
-    const quill = getQuill()
+    // 处理图片文件 - 立即显示临时消息，然后上传
-    let index = getQuillSelectionIndex()
+    let fn = emitCall('image_event', file, () => {})
-
+    emit('editor-event', fn)
-    if (index == 1 && quill.getLength() == 1 && quill.getText(0, 1) == '\n') {
-      quill.deleteText(0, 1)
-      index = 0
-    }
-
-    let src = await onUploadImage(file)
-    if (src) {
-      quill.insertEmbed(index, 'image', src)
-      quill.setSelection(index + 1)
-    }
 
     return
   }
 
   if (file.type.indexOf('video/') === 0) {
     console.log("进入视频")
+    // 处理视频文件
     let fn = emitCall('video_event', file, () => {})
     emit('editor-event', fn)
   } else {
     console.log("进入其他")
+    // 处理其他类型文件
     let fn = emitCall('file_event', file, () => {})
     emit('editor-event', fn)
   }
 }
 
+/**
+ * 录音事件处理
+ * @param file 录音文件
+ */
 function onRecorderEvent(file: any) {
   emit('editor-event', emitCall('file_event', file))
-  isShowEditorRecorder.value = false
+  isShowEditorRecorder.value = false  // 关闭录音界面
 }
 
+/**
+ * 粘贴内容处理，移除粘贴内容中的样式
+ * @param node DOM节点
+ * @param Delta Quill Delta对象
+ * @returns 处理后的Delta
+ */
 function onClipboardMatcher(node: any, Delta) {
   const ops: any[] = []
 
   Delta.ops.forEach((op) => {
-    // 如果粘贴了图片，这里会是一个对象，所以可以这样处理
+    // 处理粘贴内容
     if (op.insert && typeof op.insert === 'string') {
       ops.push({
         insert: op.insert, // 文字内容
-        attributes: {} //文字样式（包括背景色和文字颜色等）
+        attributes: {} // 移除所有样式
       })
     } else {
       ops.push(op)
@@ -337,12 +417,15 @@ function onClipboardMatcher(node: any, Delta) {
   return Delta
 }
 
+/**
+ * 发送消息处理
+ * 根据编辑器内容类型发送不同类型的消息
+ */
 function onSendMessage() {
   var delta = getQuill().getContents()
-  let data = deltaToMessage(delta)
+  let data = deltaToMessage(delta)  // 转换Delta为消息格式
-
+  if (data.items.length === 0||!data.items[0].content.trim()) {
-  if (data.items.length === 0) {
+    return  // 没有内容不发送
-    return
   }
 
   switch (data.msgType) {
@@ -351,60 +434,72 @@ function onSendMessage() {
         return window['$message'].info('发送内容超长，请分条发送')
       }
 
+      // 发送文本消息
       emit(
         'editor-event',
         emitCall('text_event', data, (ok: any) => {
-          ok && getQuill().setContents([], Quill.sources.USER)
+          ok && getQuill().setContents([], Quill.sources.USER)  // 成功发送后清空编辑器
         })
       )
       break
     case 3: // 图片消息
+      // 发送图片消息
       emit(
         'editor-event',
         emitCall(
           'image_event',
           { ...getImageInfo(data.items[0].content), url: data.items[0].content, size: 10000 },
           (ok: any) => {
-            ok && getQuill().setContents([])
+            ok && getQuill().setContents([])  // 成功发送后清空编辑器
           }
         )
       )
       break
-    case 12: // 图文消息
+    case 12: // 图文混合消息
+      // 发送混合消息
       emit(
         'editor-event',
         emitCall('mixed_event', data, (ok: any) => {
-          ok && getQuill().setContents([])
+          ok && getQuill().setContents([])  // 成功发送后清空编辑器
         })
       )
       break
   }
 }
 
+/**
+ * 编辑器内容改变时的处理
+ * 保存草稿并触发输入事件
+ */
 function onEditorChange() {
   let delta = getQuill().getContents()
-
+  let text = deltaToString(delta)  // 将Delta转为纯文本
-  let text = deltaToString(delta)
 
   if (!isEmptyDelta(delta)) {
+    // 保存草稿到store
     editorDraftStore.items[indexName.value || ''] = JSON.stringify({
       text: text,
       ops: delta.ops
     })
   } else {
-    // 删除 editorDraftStore.items 下的元素
+    // 编辑器为空时删除对应草稿
     delete editorDraftStore.items[indexName.value || '']
   }
 
+  // 触发输入事件
   emit('editor-event', emitCall('input_event', text))
 }
 
+/**
+ * 加载编辑器草稿内容
+ * 当切换聊天对象时，加载对应的草稿
+ */
 function loadEditorDraftText() {
   if (!editor.value) return
 
-  // 这里延迟处理，不然会有问题
+  // 延迟处理，确保DOM已渲染
   setTimeout(() => {
-    hideMentionDom()
+    hideMentionDom()  // 隐藏@菜单
 
     const quill = getQuill()
 
@@ -415,33 +510,47 @@ function loadEditorDraftText() {
     if (draft) {
       quill.setContents(JSON.parse(draft)?.ops || [])
     } else {
-      quill.setContents([])
+      quill.setContents([])  // 没有草稿则清空编辑器
     }
 
+    // 设置光标位置到末尾
     const index = getQuillSelectionIndex()
     quill.setSelection(index, 0, 'user')
   }, 0)
 }
 
+/**
+ * 处理@成员事件
+ * @param data @成员数据
+ */
 function onSubscribeMention(data: any) {
   const mention = getQuill().getModule('mention')
-
+  // 插入@项
   mention.insertItem({ id: data?.id, denotationChar: '@', value: data.value }, true)
 }
 
+/**
+ * 处理引用事件
+ * @param data 引用数据
+ */
 function onSubscribeQuote(data: any) {
+  // 检查是否已有引用内容
   const delta = getQuill().getContents()
   if (delta.ops?.some((item: any) => item.insert.quote)) {
-    return
+    return  // 已有引用则不再添加
   }
 
   const quill = getQuill()
   const index = getQuillSelectionIndex()
 
+  // 在编辑器开头插入引用
   quill.insertEmbed(0, 'quote', data)
-  quill.setSelection(index + 1, 0, 'user')
+  quill.setSelection(index + 1, 0, 'user')  // 设置光标到引用后
 }
 
+/**
+ * 隐藏@成员DOM元素
+ */
 function hideMentionDom() {
   let el = document.querySelector('.ql-mention-list-container')
   if (el) {
@@ -449,27 +558,54 @@ function hideMentionDom() {
   }
 }
 
+/**
+ * 处理编辑消息事件
+ * @param data 消息数据
+ */
+function onSubscribeEdit(data: any) {
+  const quill = getQuill()
+  if (!quill) return
+  
+  // 清空当前编辑器内容
+  quill.setContents([])
+  
+  // 插入要编辑的文本内容
+  quill.setText(data.content)
+  
+  // 设置光标位置到末尾
+  const index = quill.getLength() - 1
+  quill.setSelection(index > 0 ? index : 0, 0, 'user')
+}
+
+// 监听聊天索引变化，切换聊天时加载对应草稿
 watch(indexName, loadEditorDraftText, { immediate: true })
 
+// 组件挂载时初始化
 onMounted(() => {
   loadEditorDraftText()
 })
 
+// 组件卸载时清理
 onUnmounted(() => {
   hideMentionDom()
 })
 
+// 订阅编辑器相关事件总线事件
 useEventBus([
-  { name: EditorConst.Mention, event: onSubscribeMention },
+  { name: EditorConst.Mention, event: onSubscribeMention },  // @成员事件
-  { name: EditorConst.Quote, event: onSubscribeQuote }
+  { name: EditorConst.Quote, event: onSubscribeQuote },       // 引用事件
+  { name: EditorConst.Edit, event: onSubscribeEdit }          // 编辑消息事件
 ])
 </script>
 
 <template>
+  <!-- 编辑器容器 -->
   <section class="el-container editor">
     <section class="el-container is-vertical">
+      <!-- 工具栏区域 -->
       <header class="el-header toolbar bdr-t">
         <div class="tools">
+          <!-- 表情选择器弹出框 -->
           <n-popover
             placement="top-start"
             trigger="click"
@@ -489,6 +625,7 @@ useEventBus([
             <MeEditorEmoticon @on-select="onEmoticonEvent" />
           </n-popover>
 
+          <!-- 工具栏其他功能按钮 -->
           <div
             class="item pointer"
             v-for="nav in navs"
@@ -502,6 +639,7 @@ useEventBus([
         </div>
       </header>
 
+      <!-- 编辑器主体区域 -->
       <main class="el-main height100">
         <QuillEditor
           ref="editor"
@@ -514,11 +652,13 @@ useEventBus([
     </section>
   </section>
 
+  <!-- 隐藏的文件上传表单 -->
   <form enctype="multipart/form-data" style="display: none">
     <input type="file" ref="fileImageRef" accept="image/*" @change="onUploadFile" />
     <input type="file" ref="uploadFileRef" @change="onUploadFile" />
   </form>
 
+  <!-- 条件渲染的功能组件 -->
   <MeEditorVote v-if="isShowEditorVote" @close="isShowEditorVote = false" @submit="onVoteEvent" />
 
   <MeEditorCode
@@ -536,7 +676,7 @@ useEventBus([
 
 <style lang="less" scoped>
 .editor {
-  --tip-bg-color: rgb(241 241 241 / 90%);
+  --tip-bg-color: rgb(241 241 241 / 90%);  /* 提示背景颜色 */
 
   height: 100%;
 
@@ -559,7 +699,7 @@ useEventBus([
         user-select: none;
 
         .tip-title {
-          display: none;
+          display: none;  /* 默认隐藏提示文字 */
           position: absolute;
           top: 40px;
           left: 0px;
@@ -577,7 +717,7 @@ useEventBus([
 
         &:hover {
           .tip-title {
-            display: block;
+            display: block;  /* 悬停时显示提示文字 */
           }
         }
       }
@@ -585,6 +725,7 @@ useEventBus([
   }
 }
 
+/* 暗色模式样式调整 */
 html[theme-mode='dark'] {
   .editor {
     --tip-bg-color: #48484d;
@@ -593,13 +734,16 @@ html[theme-mode='dark'] {
 </style>
 
 <style lang="less">
+/* 全局编辑器样式 */
 #editor {
   overflow: hidden;
 }
 
+/* 编辑器主体区域样式 */
 .ql-editor {
   padding: 8px;
 
+  /* 滚动条样式 */
   &::-webkit-scrollbar {
     width: 3px;
     height: 3px;
@@ -611,6 +755,7 @@ html[theme-mode='dark'] {
     background-color: transparent;
   }
 
+  /* 悬停时显示滚动条 */
   &:hover {
     &::-webkit-scrollbar-thumb {
       background-color: var(--im-scrollbar-thumb);
@@ -618,6 +763,7 @@ html[theme-mode='dark'] {
   }
 }
 
+/* 编辑器占位符样式 */
 .ql-editor.ql-blank::before {
   font-family:
     PingFang SC,
@@ -626,6 +772,7 @@ html[theme-mode='dark'] {
   left: 8px;
 }
 
+/* 编辑器中图片样式 */
 .ql-snow .ql-editor img {
   max-width: 100px;
   border-radius: 3px;
@@ -633,6 +780,7 @@ html[theme-mode='dark'] {
   margin: 0px 2px;
 }
 
+/* 图片上传中样式 */
 .image-uploading {
   display: flex;
   width: 100px;
@@ -646,15 +794,18 @@ html[theme-mode='dark'] {
   }
 }
 
+/* 表情符号样式 */
 .ed-emoji {
   background-color: unset !important;
 }
 
+/* 编辑器占位符样式 */
 .ql-editor.ql-blank::before {
   font-style: unset;
   color: #b8b3b3;
 }
 
+/* 引用卡片样式 */
 .quote-card-content {
   display: flex;
   background-color: #f6f6f6;
@@ -691,6 +842,7 @@ html[theme-mode='dark'] {
   }
 }
 
+/* 暗色模式下的样式调整 */
 html[theme-mode='dark'] {
   .ql-editor.ql-blank::before {
     color: #57575a;

src/components/editor/MeEditorEmoticon.vue

@@ -48,10 +48,10 @@ const onSendEmoticon = (type: any, value: any, img = '') => {
     <input type="file" ref="fileImageRef" accept="image/*" @change="onUpload" />
   </form>
 
-  <section class="el-container is-vertical section height100">
+  <section class="el-container is-vertical section height100 p-10px">
-    <header class="el-header em-header bdr-b">
+    <!-- <header class="el-header em-header bdr-b">
       <span>{{ items[tabIndex].name }}</span>
-    </header>
+    </header> -->
 
     <main class="el-main em-main me-scrollbar me-scrollbar-thumb">
       <div class="symbol-box" v-if="tabIndex == 0">
@@ -82,7 +82,7 @@ const onSendEmoticon = (type: any, value: any, img = '') => {
       </div>
     </main>
 
-    <footer class="el-footer em-footer tabs">
+    <!-- <footer class="el-footer em-footer tabs">
       <div
         class="tab pointer"
         v-for="(item, index) in items"
@@ -93,7 +93,7 @@ const onSendEmoticon = (type: any, value: any, img = '') => {
         <p class="tip">{{ item.name }}</p>
         <img width="20" height="20" :src="item.icon" />
       </div>
-    </footer>
+    </footer> -->
   </section>
 </template>
 <style lang="less" scoped>
@@ -186,15 +186,20 @@ const onSendEmoticon = (type: any, value: any, img = '') => {
       flex-wrap: wrap;
 
       .option{
-        height: 32px;
+        padding: 7px;
-        width: 32px;
+        border-radius: 4px;
-        margin: 2px;
+        &:hover {
-        font-size: 24px;
+          background-color: #F2F2F2;
+        }
+        :deep(.emoji){
+          height: 22px;
+        width: 22px;
         user-select: none;
         transition: all 0.5s;
 
-        &:hover {
+        // &:hover {
-          transform: scale(1.5);
+        //   transform: scale(1.5);
+        // }
         }
       }
     }

src/components/flnlayout/tree/flnindex.vue

@@ -0,0 +1,121 @@
+<template>
+  <div class="fl-tree width-100 fl-mt-md">
+    <n-tree v-if="state.treeLoading"
+            block-line
+            :default-expanded-keys="state.expandedKeys"
+            :default-selected-keys="state.clickKey"
+            label-field="name"
+            key-field="key"
+            :expand-on-click="true"
+            :render-label="renderLabel"
+            :data="state.treeData"
+            @update:selected-keys="handleSelectTree" />
+  </div>
+</template>
+<script setup>
+import {
+  ref,
+  reactive,
+  onBeforeMount,
+  onMounted,
+  getCurrentInstance,
+  computed,
+  defineEmits,
+  watch,
+  nextTick,
+  h
+} from "vue";
+
+import { PlusCircleOutlined, MinusCircleOutlined, EditOutlined, PlusOutlined, MinusOutlined, CloseOutlined, CheckOutlined } from '@ant-design/icons-vue';
+
+import treeLabel from "./treelabel.vue";
+import { NTree } from 'naive-ui';
+
+const currentInstance = getCurrentInstance();
+const { $request } = currentInstance.appContext.config.globalProperties;
+let props = defineProps({
+  data: Object,
+  refreshCount: Number,
+  config: Object,
+  expandedKeys: Array,
+  clickKey: [String, Number]
+})
+const state = reactive({
+  expandedKeys: [],
+  editTitle: '',
+  treeData: [],
+  clickKey: [],
+  treeLoading: true
+});
+
+watch(() => props.refreshCount, () => {
+  state.clickKey = [props.clickKey]
+  state.treeLoading = false
+  nextTick(() => {
+    state.treeData = props.data
+    calcDefaultConfig(state.treeData, 1)
+    state.treeLoading = true
+  })
+});
+
+watch(() => props.expandedKeys, () => {
+  state.clickKey = [props.clickKey]
+  state.expandedKeys = props.expandedKeys
+}, { deep: true });
+
+onBeforeMount(() => {
+  state.clickKey = [props.clickKey]
+  state.treeData = props.data
+  calcDefaultConfig(state.treeData, 1);
+  state.expandedKeys = state.treeData.map(item => item.key)
+});
+
+onMounted(() => {
+});
+
+const emit = defineEmits(["triggerTreeAction", "triggerTreeClick", "triggerTreeDefaultClick"]);
+const handleSelectTree = (keys, option, meta) => {
+  if (keys.length === 1) {
+    emit('triggerTreeClick', { selectedKey: keys[0], tree: option[0] })
+  } else {
+    emit('triggerTreeDefaultClick')
+  }
+}
+const renderLabel = (option, checked) => {
+  return h(
+    treeLabel,
+    {
+      dataRef: option,
+      checked: checked,
+      config: props.config,
+      clickKey: props.clickKey,
+      onTriggerTreeAction: handleTreeAction
+    },
+    {}
+  )
+}
+
+const calcDefaultConfig = (data, level) => {
+  for (let item of data) {
+    if (!item.key) {
+      item.key = item.title + '_' + level;
+    }
+    item.edit = false
+    if (item.children) {
+      calcDefaultConfig(item.children, level + 1);
+    }
+  }
+}
+
+const override = ({ option }) => {
+  if (option.children) {
+    return "toggleExpand";
+  }
+  return "default";
+};
+const handleTreeAction = ({ type, val }) => {
+  emit('triggerTreeAction', { type, val })
+}
+</script>
+<style lang="scss" scoped>
+</style>

src/components/flnlayout/tree/treelabel.vue

@@ -0,0 +1,121 @@
+<template>
+  <div class="row items-center">
+    <div v-if="state.treeData.edit">
+      <n-input v-model:value="state.editTitle"
+               style="max-width:200px" />
+    </div>
+
+    <n-popover trigger="hover"
+               v-else>
+      <template #trigger>
+        <div style="max-width:200px"
+             class="fl-px-sm sf-text-ellipsis">{{ state.treeData.title + '（' + state.treeData.staffNum + '）' }}</div>
+      </template>
+      <div>{{ state.treeData.title }}</div>
+    </n-popover>
+    <n-icon :component="CreateOutline"
+            class="fl-ml-sm"
+            size="20"
+            v-if="config?.actions.includes('edit')&&!state.treeData.edit"
+            @click.stop="handleTreeEdit(state.treeData)" />
+    <n-icon :component="Remove"
+            size="20"
+            v-if="config?.actions.includes('subtraction')&&!state.treeData.edit&&visibleFormItem(config.subtractionShow, state.treeData)"
+            class="fl-ml-sm"
+            @click.stop="handleTreeSubtraction(state.treeData)" />
+    <n-icon :component="Add"
+            size="20"
+            v-if="config?.actions.includes('add')&&!state.treeData.edit&&visibleFormItem(config.addShow, state.treeData)"
+            class="fl-ml-sm"
+            @click.stop="handleTreeAdd(state.treeData)" />
+    <drag-outlined v-if="config?.actions.includes('move')&&!state.treeData.edit&&visibleFormItem(config.moveShow, state.treeData)"
+                   class="fl-ml-sm"
+                   @click.stop="handleTreeMove(state.treeData)" />
+
+    <!-- <n-icon :component="MoveOutline"
+            size="20"
+            v-if="config?.actions.includes('move')&&!state.treeData.edit&&visibleFormItem(config.moveShow, state.treeData)"
+            class="fl-ml-sm"
+            @click.stop="handleTreeMove(state.treeData)" /> -->
+
+    <n-icon :component="Checkmark"
+            size="20"
+            v-if="state.treeData.edit"
+            class="fl-ml-sm"
+            @click.stop="handleTreeSave(state.treeData)" />
+    <n-icon :component="Close"
+            size="20"
+            v-if="state.treeData.edit"
+            class="fl-ml-md"
+            @click.stop="handleTreeNotSave(state.treeData)" />
+
+  </div>
+</template>
+
+<script setup>
+import {
+  onBeforeMount,
+  onMounted,
+  watch,
+  reactive
+} from "vue";
+import {
+  visibleFormItem,
+} from "@/utils/helper/form";
+import {
+  UpOutlined,
+  DownOutlined,
+  CloseCircleOutlined,
+  PlusOutlined,
+  DragOutlined,
+} from "@ant-design/icons-vue";
+import { Add, Checkmark, Close, CreateOutline, Remove, MoveOutline } from "@vicons/ionicons5";
+import { NPopover, NInput, NIcon } from "naive-ui";
+let props = defineProps({
+  dataRef: Object,
+  checked: Boolean,
+  config: Object,
+  clickKey: [String, Number]
+})
+const state = reactive({
+  expandedKeys: [],
+  editTitle: '',
+  treeData: [],
+});
+onBeforeMount(() => {
+  state.treeData = props.dataRef.option
+})
+watch(() => props.dataRef.option, (val) => {
+  state.treeData = props.dataRef.option
+}, { deep: true })
+
+onMounted(() => {
+})
+const emit = defineEmits(["triggerTreeAction", "triggerTreeClick"]);
+
+// const myComponentRef = ref(null);
+const handleTreeEdit = () => {
+  state.editTitle = state.treeData.title
+  state.treeData.edit = true
+  // myComponentRef.value.$forceUpdate();
+}
+const handleTreeAdd = () => {
+  emit('triggerTreeAction', { type: 'add', val: state.treeData })
+}
+const handleTreeMove = () => {
+  emit('triggerTreeAction', { type: 'move', val: state.treeData })
+}
+
+const handleTreeSubtraction = () => {
+  emit('triggerTreeAction', { type: 'subtraction', val: state.treeData })
+}
+const handleTreeSave = () => {
+  state.treeData.title = state.editTitle
+  emit('triggerTreeAction', { type: 'save', val: state.treeData })
+}
+const handleTreeNotSave = () => {
+  state.editTitle = ''
+  emit('triggerTreeAction', { type: 'cancel', val: state.treeData })
+}
+</script>
+

src/components/search/highLightText.vue

@@ -0,0 +1,70 @@
+<template>
+  <span>
+    <template v-for="(part, index) in parts" :key="index">
+      <span v-if="part.highlighted" :class="highlightClass">
+        {{ part.text }}
+      </span>
+      <span v-else>{{ part.text }}</span>
+    </template>
+  </span>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  text: {
+    type: String,
+    required: true,
+  },
+  searchText: {
+    type: String,
+    default: '',
+  },
+  highlightClass: {
+    type: String,
+    default: 'highlight',
+  },
+})
+
+const escapedSearchText = computed(() =>
+  String(props.searchText).replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'),
+)
+
+const pattern = computed(() => new RegExp(escapedSearchText.value, 'gi'))
+
+const parts = computed(() => {
+  if (!props.searchText || !props.text)
+    return [{ text: props.text, highlighted: false }];
+
+  const result = [];
+  let currentIndex = 0;
+  const escapedSearchTextValue = escapedSearchText.value;
+  const searchPattern = new RegExp(`(${escapedSearchTextValue})`, 'gi');
+
+  props.text.replace(searchPattern, (match, p1, offset) => {
+    // 添加非高亮文本
+    if (currentIndex < offset) {
+      result.push({ text: props.text.slice(currentIndex, offset), highlighted: false });
+    }
+    // 添加高亮文本
+    result.push({ text: p1, highlighted: true });
+    // 更新当前索引
+    currentIndex = offset + p1.length;
+    return p1; // 这个返回值不影响最终结果，只是replace方法的要求
+  });
+
+  // 添加剩余的非高亮文本（如果有的话）
+  if (currentIndex < props.text.length) {
+    result.push({ text: props.text.slice(currentIndex), highlighted: false });
+  }
+
+  return result;
+});
+</script>
+
+<style scoped>
+.highlight {
+  color: #7a58de;
+}
+</style>

src/components/search/searchItem.vue

@@ -0,0 +1,527 @@
+<template>
+  <div
+    class="search-item"
+    :class="props?.conditionType ? 'search-item-condition' : ''"
+    v-if="resultName"
+    :style="{
+      margin: props.searchResultKey === 'talk_record_infos_receiver' ? '12px 0 0' : '',
+      'background-color': props.isClickStay ? '#EEE9F8' : ''
+    }"
+  >
+    <div class="search-item-avatar">
+      <avatarModule
+        :mode="props.searchItem?.group_type === 0 ? 1 : 2"
+        :avatar="avatarImg"
+        :userName="resultName"
+        :groupType="props.searchItem?.group_type"
+        :customStyle="{
+          width: props?.conditionType ? '32px' : '42px',
+          height: props?.conditionType ? '32px' : '42px',
+          margin: props?.conditionType ? '0 9px 0 0' : '0 10px 0 0'
+        }"
+        :customTextStyle="{
+          fontSize: props?.conditionType ? '10px' : '14px',
+          fontWeight: 'bold',
+          color: '#fff',
+          lineHeight: '24px'
+        }"
+      ></avatarModule>
+      <div
+        class="info-tag"
+        v-if="resultType && !searchRecordDetail"
+        :style="'border-color:' + resultTypeColor"
+      >
+        <span class="text-[10px] font-medium" :style="'color:' + resultTypeColor">
+          {{ resultType }}
+        </span>
+      </div>
+    </div>
+    <div class="result-info">
+      <div class="info-name" :class="searchRecordDetail ? 'info-name-searchRecordDetail' : ''">
+        <HighlightText
+          :class="
+            props?.conditionType
+              ? 'text-[14px] font-medium'
+              : searchRecordDetail
+              ? 'text-[12px] font-medium'
+              : 'text-[14px] font-bold'
+          "
+          :text="resultName"
+          :searchText="props.searchText"
+        />
+        <div class="info_num" v-if="groupNum">
+          <span class="text-[14px] font-medium">
+            {{ '（' + groupNum + '）' }}
+          </span>
+        </div>
+        <div v-if="searchRecordDetail && chatRecordCreatedAt">
+          <span class="text-[12px] font-medium">
+            {{ chatRecordCreatedAt }}
+          </span>
+        </div>
+      </div>
+      <div
+        class="info-detail"
+        v-if="resultDetail"
+        :class="searchRecordDetail ? 'info-detail-searchRecordDetail' : ''"
+      >
+        <HighlightText
+          class="text-[12px] font-regular"
+          :text="resultDetail"
+          :searchText="props.searchText"
+          v-if="props.searchItem?.msg_type !== 3 && props.searchItem?.msg_type !== 6"
+        />
+        <div class="message-component-wrapper" v-if="props.searchItem?.msg_type === 3" @click.stop>
+          <component
+            :is="MessageComponents[props.searchItem?.msg_type] || 'unknown-message'"
+            :extra="resultDetail"
+            :data="props?.searchItem"
+          />
+        </div>
+        <div class="file-message-wrapper" v-if="props.searchItem?.msg_type === 6" @click.stop>
+          <div class="condition-each-result-attachments" @click="previewPDF(resultDetail.path)">
+            <div class="attachment-avatar">
+              <img :src="resultDetail?.file_avatar" />
+            </div>
+            <div class="attachment-info">
+              <div class="attachment-info-title">
+                <span class="text-[14px] font-regular">
+                  {{ resultDetail?.name }}
+                </span>
+                <span
+                  class="text-[14px] font-regular"
+                  style="color: #999999; flex-shrink: 0; margin: 0 0 0 20px;"
+                >
+                  {{ resultDetail?.dateTime }}
+                </span>
+              </div>
+              <div class="attachment-sub-info">
+                <span class="text-[12px] font-regular">
+                  {{ resultDetail?.typeText }}
+                </span>
+                <span class="text-[12px] font-regular" style="flex-shrink: 0; margin: 0 0 0 20px;">
+                  {{ resultDetail?.fileSize }}
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="searchRecordDetail-fastLocal" v-if="searchRecordDetail">
+          <span>定位到聊天位置</span>
+        </div>
+      </div>
+    </div>
+    <div class="search-item-pointer" v-if="pointerIconSrc">
+      <img :src="pointerIconSrc" />
+    </div>
+  </div>
+</template>
+<script setup>
+import avatarModule from '@/components/avatar-module/index.vue'
+import { ref, watch, computed, onMounted, onUnmounted, reactive, defineProps } from 'vue'
+import HighlightText from './highLightText.vue'
+import { beautifyTime } from '@/utils/datetime'
+import { ChatMsgTypeMapping, MessageComponents } from '@/constant/message'
+const props = defineProps({
+  searchItem: Object | Number,
+  searchResultKey: {
+    type: String,
+    default: ''
+  },
+  searchText: {
+    type: String,
+    default: ''
+  }, //搜索内容
+  searchRecordDetail: {
+    type: Boolean,
+    default: false
+  }, //是否是搜索聊天记录详情
+  pointerIconSrc: {
+    type: String,
+    default: ''
+  }, //箭头图标
+  conditionType: {
+    type: Number,
+    default: 0
+  }, //搜索类型
+  isClickStay: {
+    type: Boolean,
+    default: false
+  } //是否点击停留
+})
+// 映射表-查找对应结构下的属性名
+const keyMapping = {
+  user_infos: { avatar: 'avatar', name: 'nickname' },
+  group_infos: { avatar: 'avatar', name: 'name', group_num: 'group_num' },
+  group_member_infos: {
+    avatar: 'group_avatar',
+    name: 'group_name',
+    detailKey: 'user_name',
+    group_num: 'group_num'
+  },
+  combinedGroup: {
+    avatar: props.searchItem?.groupTempType
+      ? props.searchItem?.groupTempType === 'group_infos'
+        ? 'avatar'
+        : props.searchItem?.groupTempType === 'group_member_infos'
+        ? 'group_avatar'
+        : ''
+      : '',
+    name: props.searchItem?.groupTempType
+      ? props.searchItem?.groupTempType === 'group_infos'
+        ? 'name'
+        : props.searchItem?.groupTempType === 'group_member_infos'
+        ? 'group_name'
+        : ''
+      : '',
+    detailKey: props.searchItem?.groupTempType
+      ? props.searchItem?.groupTempType === 'group_member_infos'
+        ? 'user_name'
+        : ''
+      : '',
+    group_num: props.searchItem?.groupTempType
+      ? props.searchItem?.groupTempType === 'group_infos'
+        ? 'group_num'
+        : props.searchItem?.groupTempType === 'group_member_infos'
+        ? 'group_num'
+        : ''
+      : ''
+  },
+  general_infos: {
+    avatar: 'receiver_avatar',
+    name: 'receiver_name',
+    detailKey: 'count',
+    group_num: 'group_num'
+  },
+  talk_record_infos: {
+    avatar: 'user_avatar',
+    name: 'user_name',
+    detailKey: 'extra',
+    created_at: 'created_at'
+  },
+  talk_record_infos_receiver: {
+    avatar: 'receiver_avatar',
+    name: 'receiver_name',
+    group_num: 'group_num'
+  },
+  search_by_member_condition: {
+    avatar: 'avatar',
+    name: 'nickname',
+    created_at: 'created_at',
+    msg_type: 'msg_type',
+    detailKey: 'chatMessageType'
+  }
+}
+//获取key对应值
+const getKeyValue = (keys) => {
+  let keyValue = ''
+  if (keys) {
+    keyValue = props?.searchItem ? props?.searchItem[keys] : ''
+  }
+  return keyValue
+}
+//头像
+const avatarImg = computed(() => {
+  let avatar = getKeyValue(keyMapping[props.searchResultKey]?.avatar)
+  if (props?.conditionType) {
+    avatar = props.searchItem.avatar
+  }
+  return avatar
+})
+//名称
+const resultName = computed(() => {
+  let result_name = getKeyValue(keyMapping[props.searchResultKey]?.name)
+  if (props?.conditionType) {
+    result_name = props.searchItem.nickname
+  }
+  return result_name
+})
+//文字头像
+const imgText = computed(() => {
+  return resultName.value.length >= 2 ? resultName.value.slice(-2) : resultName.value
+})
+// 映射表-根据groupType设置对应值
+const groupTypeMapping = {
+  0: {},
+  1: {},
+  2: {
+    result_type: '部门',
+    result_type_color: '#377EC6'
+  },
+  3: {
+    result_type: '项目',
+    result_type_color: '#C1681C'
+  },
+  4: {
+    result_type: '公司',
+    result_type_color: '#7A58DE'
+  }
+}
+//群人数
+const groupNum = computed(() => {
+  return getKeyValue(keyMapping[props.searchResultKey]?.group_num)
+})
+//群类型tag
+const resultType = computed(() => {
+  return groupTypeMapping[props.searchItem?.group_type]?.result_type
+})
+//群类型tag颜色
+const resultTypeColor = computed(() => {
+  return groupTypeMapping[props.searchItem?.group_type]?.result_type_color
+})
+//搜索聊天记录详情-时间
+const chatRecordCreatedAt = computed(() => {
+  let created_at = getKeyValue(keyMapping[props.searchResultKey]?.created_at)
+  return beautifyTime(created_at)
+})
+//详细内容
+const resultDetail = computed(() => {
+  let result_detail = props.searchItem[keyMapping[props.searchResultKey]?.detailKey]
+  switch (keyMapping[props.searchResultKey]?.detailKey) {
+    case 'count':
+      result_detail = result_detail + '条聊天记录'
+      break
+    case 'user_name':
+      result_detail = '包含：' + result_detail
+      break
+    case 'extra':
+      result_detail = props.searchItem?.extra
+      break
+    case 'chatMessageType':
+      result_detail =
+        props.searchItem?.msg_type === 1
+          ? props.searchItem?.extra?.content
+          : props.searchItem?.msg_type === 3 || props.searchItem?.msg_type === 6
+          ? props.searchItem?.extra
+          : ChatMsgTypeMapping[props.searchItem?.msg_type]
+      break
+    default:
+      result_detail = ''
+  }
+  return result_detail
+})
+
+const previewPDF = (item) => {
+  console.log(item)
+  // if (typeof plus !== 'undefined') {
+  //   downloadAndOpenFile(item)
+  // } else {
+  //   document.addEventListener('plusready', () => {
+  //     downloadAndOpenFile(item)
+  //   })
+  // }
+  window.open(
+    `${import.meta.env.VITE_PAGE_URL}/office?url=${item}`,
+    '_blank',
+    'width=1200,height=900,left=200,top=200,toolbar=no,menubar=no,scrollbars=yes,resizable=yes,location=no,status=no'
+  )
+}
+</script>
+<style lang="scss" scoped>
+.search-item {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 11px 10px 12px;
+  cursor: pointer;
+  position: relative;
+
+  .search-item-avatar {
+    position: relative;
+    .info-tag {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: center;
+      padding: 0px 6px;
+      border: 1px solid #000;
+      border-radius: 3px;
+      flex-shrink: 0;
+      background-color: #fff;
+      position: absolute;
+      bottom: 0;
+      left: 4px;
+      span {
+        line-height: 14px;
+      }
+    }
+  }
+
+  .result-info {
+    width: 100%;
+    .info-name {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: flex-start;
+      span {
+        color: #191919;
+        line-height: 22px;
+      }
+    }
+    .info-name-searchRecordDetail {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-between;
+      span {
+        color: #999999;
+        line-height: 17px;
+      }
+    }
+    .info-detail {
+      span {
+        color: #999999;
+        line-height: 20px;
+      }
+      .file-message-wrapper {
+        .condition-each-result-attachments {
+          width: 289px;
+          height: 62px;
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          justify-content: flex-start;
+          padding: 12px 15px;
+          background-color: #f3f3f3;
+          border-radius: 4px;
+          border-bottom: 1px solid #f8f8f8;
+          box-sizing: border-box;
+
+          .attachment-avatar {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            justify-content: center;
+            flex-shrink: 0;
+            img {
+              width: 38px;
+              height: 38px;
+            }
+          }
+          .attachment-info {
+            display: flex;
+            flex-direction: column;
+            align-items: flex-start;
+            justify-content: center;
+            margin: 0 0 0 11px;
+            width: calc(100% - 38px - 11px);
+            .attachment-info-title {
+              display: flex;
+              flex-direction: row;
+              align-items: center;
+              justify-content: flex-start;
+              width: 100%;
+              span {
+                line-height: 20px;
+                color: #191919;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+              }
+            }
+            .attachment-sub-info {
+              display: flex;
+              flex-direction: row;
+              align-items: center;
+              justify-content: flex-start;
+              width: 100%;
+              span {
+                line-height: 17px;
+                color: #999999;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+              }
+            }
+          }
+        }
+      }
+    }
+    .info-detail-searchRecordDetail {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-between;
+      span {
+        color: #191919;
+        word-break: break-all;
+      }
+      .searchRecordDetail-fastLocal {
+        display: none;
+        line-height: 20px;
+        flex-shrink: 0;
+        span {
+          color: #46299d;
+          font-size: 12px;
+          font-weight: 400;
+          line-height: 17px;
+        }
+      }
+    }
+  }
+  .search-item-pointer {
+    width: 5.5px;
+    height: 9px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+.search-item::after {
+  content: '';
+  display: block;
+  width: 100%;
+  height: 1px;
+  position: absolute;
+  bottom: 0;
+  left: 10px;
+  width: calc(100% - 20px);
+  background-color: #f8f8f8;
+}
+.search-item-condition {
+  border: 0;
+}
+.search-item:hover {
+  background-color: rgba(70, 41, 157, 0.1);
+
+  .info-detail-searchRecordDetail {
+    .searchRecordDetail-fastLocal {
+      display: block;
+    }
+  }
+}
+
+.message-component-wrapper {
+  width: 154px;
+  height: 100px;
+  display: inline-block;
+  overflow: hidden;
+  position: relative;
+
+  .im-message-video,
+  .im-message-image,
+  .image-container {
+    width: 100% !important;
+    height: 100% !important;
+  }
+
+  :deep(.n-image) {
+    width: 100% !important;
+    height: 100% !important;
+  }
+
+  :deep(img),
+  :deep(video) {
+    width: 100% !important;
+    height: 100% !important;
+    object-fit: cover !important;
+  }
+}
+</style>

src/components/search/searchList.vue

@@ -0,0 +1,833 @@
+<template>
+  <div class="search-list">
+    <n-infinite-scroll
+      :style="{ maxHeight: props.searchResultMaxHeight }"
+      :distance="47"
+      @load="doLoadMore"
+    >
+      <div class="search-result">
+        <div class="search-result-list">
+          <div
+            class="search-result-each-part"
+            v-for="(searchResultValue, searchResultKey, searchResultIndex) in state.searchResult"
+            :key="searchResultKey"
+          >
+            <div
+              class="search-result-part"
+              v-if="
+                Array.isArray(state?.searchResult[searchResultKey]) &&
+                state?.searchResult[searchResultKey].length > 0 &&
+                searchResultKey !== 'group_infos' &&
+                searchResultKey !== 'group_member_infos'
+              "
+              :style="{ margin: props.useCustomTitle ? '0' : '' }"
+            >
+              <!-- <div class="result-title" v-if="!props.useCustomTitle">
+                <span class="text-[14px] font-regular">
+                  {{ getResultKeysValue(searchResultKey) }}
+                </span>
+              </div> -->
+              <slot
+                name="result-title"
+                :getResultKeysValue="getResultKeysValue"
+                :searchResultKey="searchResultKey"
+                :searchResultIndex="searchResultIndex"
+              ></slot>
+              <div class="result-list">
+                <div
+                  class="result-list-each"
+                  v-for="(item, index) in state?.searchResult[searchResultKey]"
+                  :key="index"
+                >
+                  <searchItem
+                    @click="clickSearchItem(searchResultKey, item)"
+                    v-if="
+                      (searchResultKey === 'user_infos'
+                        ? state.userInfosShowAll || (props.listLimit && index < 3)
+                        : searchResultKey === 'combinedGroup'
+                        ? state.groupInfosShowAll || (props.listLimit && index < 3)
+                        : props.listLimit && index < 3) || !props.listLimit
+                    "
+                    :searchResultKey="searchResultKey"
+                    :searchItem="item"
+                    :searchText="state.searchText"
+                    :searchRecordDetail="props.searchRecordDetail"
+                    :isClickStay="
+                      props.useClickStay &&
+                      typeof state.clickStayItem === 'string' &&
+                      state.clickStayItem === `${item.talk_type}_${item.receiver_id}`
+                    "
+                  ></searchItem>
+                </div>
+              </div>
+              <div
+                class="result-has-more"
+                v-if="
+                  getHasMoreResult(searchResultKey) &&
+                  !(
+                    (searchResultKey === 'user_infos' && state.userInfosExpand) ||
+                    (searchResultKey === 'combinedGroup' && state.groupInfosExpand)
+                  )
+                "
+                @click="onMoreResultClick(searchResultKey)"
+              >
+                <span class="text-[14px] font-regular">
+                  {{ getHasMoreResult(searchResultKey) }}
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </n-infinite-scroll>
+    <!-- <ZPaging
+      ref="zPaging"
+      :show-scrollbar="false"
+      v-model="state.searchResultList"
+      @query="queryAllSearch"
+      :default-page-no="state.pageNum"
+      :default-page-size="props.searchResultPageSize"
+      :loading-more-default-as-loading="true"
+      :inside-more="true"
+      :empty-view-img="searchNoData"
+      :empty-view-text="'检索您要查找的内容吧～'"
+      :empty-view-img-style="{ width: '238px', height: '131px' }"
+      :empty-view-title-style="{
+        color: '#999999',
+        margin: '-10px 0 0',
+        'line-height': '20px',
+        'font-size': '14px',
+        'font-weight': 400,
+      }"
+      :refresher-enabled="false"
+    >
+      <template #top>
+        <div class="searchRoot">
+          <customInput
+            :searchText="state.searchText"
+            :first_talk_record_infos="state.first_talk_record_infos"
+            @inputSearchText="inputSearchText"
+          ></customInput>
+          <span
+            class="searchRoot_cancelBtn text-[16px] font-medium"
+            @click="cancelSearch"
+          >
+            取消
+          </span>
+        </div>
+      </template>
+      <div
+        class="search-record-detail"
+        v-if="props.searchRecordDetail && !props?.hideFirstRecord"
+      >
+        <searchItem
+          @click="
+            clickSearchItem(
+              'talk_record_infos_receiver',
+              state?.first_talk_record_infos,
+            )
+          "
+          searchResultKey="talk_record_infos_receiver"
+          :searchItem="state?.first_talk_record_infos"
+          :pointerIconSrc="pointerIconSrc"
+        ></searchItem>
+      </div>
+      <div
+        class="search-result"
+        :style="
+          !state.searchText ? 'align-items:center;justify-content:center;' : ''
+        "
+      >
+        
+      </div>
+    </ZPaging> -->
+  </div>
+</template>
+<script setup>
+// import searchNoData from '@/static/image/search/search-no-data.png'
+// import customInput from '@/components/custom-input/custom-input.vue'
+// import pointerIconSrc from '@/static/image/search/search-item-pointer.png'
+// import lodash from 'lodash'
+// import { useUserStore } from '@/store'
+// const userStore = useUserStore()
+
+// import ZPaging from '@/uni_modules/z-paging/components/z-paging/z-paging.vue'
+// import useZPaging from '@/uni_modules/z-paging/components/z-paging/js/hooks/useZPaging.js'
+// const zPaging = ref()
+// useZPaging(zPaging)
+
+import { NInfiniteScroll } from 'naive-ui'
+import searchItem from './searchItem.vue'
+import { ref, reactive, defineEmits, defineProps, onMounted, watch } from 'vue'
+import { ServeQueryUser, ServeQueryGroup } from '@/api/search'
+
+const emits = defineEmits([
+  'toMoreResultPage',
+  'lastIdChange',
+  'clickSearchItem',
+  'clickStayItemChange',
+  'resultTotalCount'
+])
+
+const state = reactive({
+  searchText: '', //搜索内容
+  searchResultList: [], //搜素结果列表
+  searchResult: null, //搜索结果
+  pageNum: 1, //当前请求数据页数
+  uid: 12303, //当前用户id
+  clickStayItem: '', //点击停留的item
+  hasMore: true, //是否还有更多数据
+  loading: false, //加载锁
+  userInfosExpand: false, // 控制通讯录全部加载完
+  userInfosLoading: false, // 控制通讯录加载更多状态
+  userInfosLastId: undefined, // 记录通讯录分页的 last_id
+  userInfosShowAll: false, // 只要点过"更多通讯录"就为 true
+  groupInfosExpand: false, // 控制群聊全部加载完
+  groupInfosLoading: false, // 控制群聊加载更多状态
+  groupInfosLastGroupId: 0, // 记录群聊分页的 last_group_id
+  groupInfosLastMemberId: 0, // 记录群聊分页的 last_member_id
+  groupInfosShowAll: false // 只要点过"更多群聊"就为 true
+})
+
+const props = defineProps({
+  searchResultPageSize: {
+    type: Number,
+    default: 0
+  }, //搜索结果每页数据量
+  listLimit: {
+    type: Boolean,
+    default: false
+  }, //是否限制列表内数据数量
+  apiParams: {
+    type: String,
+    default: ''
+  }, //请求参数
+  apiRequest: Function, //请求
+  searchText: {
+    type: String,
+    default: ''
+  }, //搜索内容
+  isPagination: {
+    type: Boolean,
+    default: false
+  }, //是否分页
+  searchRecordDetail: {
+    type: Boolean,
+    default: false
+  }, //是否是搜索聊天记录的详情
+  first_talk_record_infos: {
+    type: Object,
+    default() {
+      return {}
+    }
+  }, //接受者信息
+  hideFirstRecord: {
+    type: Boolean,
+    default: false
+  }, //是否隐藏前缀及搜索群/用户主体信息
+  useClickStay: {
+    type: Boolean,
+    default: false
+  }, //是否使用点击停留样式
+  searchResultMaxHeight: {
+    type: String,
+    default: '677px'
+  }, //搜索结果最大高度
+  useCustomTitle: {
+    type: Boolean,
+    default: false
+  }, //是否使用自定义标题
+  selectItemInList: {
+    type: String,
+    default: ''
+  } //在列表选中的聊天记录搜索项
+})
+
+onMounted(() => {
+  if (props.searchText) {
+    state.searchText = props.searchText
+    queryAllSearch()
+  }
+})
+
+// 监听每页数量变化
+watch(
+  () => props.searchResultPageSize,
+  (newVal, oldVal) => {
+    queryAllSearch()
+  }
+)
+
+// 监听搜索文本变化
+watch(
+  () => props.searchText,
+  (newVal, oldVal) => {
+    // 同步更新 state.searchText
+    state.searchText = newVal
+    // 清空搜索结果
+    state.searchResult = null
+    // 重置页码
+    state.pageNum = 1
+    //重置点击停留列表项
+    state.clickStayItem = ''
+    emits('clickStayItemChange', state.clickStayItem)
+    //重置搜索条件
+    emits('lastIdChange', 0, 0, 0, '', '')
+    state.userInfosExpand = false
+    state.userInfosShowAll = false
+    state.userInfosLastId = undefined
+    state.groupInfosExpand = false
+    state.groupInfosShowAll = false
+    state.groupInfosLastGroupId = 0
+    state.groupInfosLastMemberId = 0
+    queryAllSearch()
+  }
+)
+
+// ES搜索聊天记录-主页搜索什么都有、指定用户、指定群、群与用户概览
+const queryAllSearch = (doClearSearchResult) => {
+  if (doClearSearchResult) {
+    state.searchResult = null
+  }
+  let params = {
+    key: state.searchText, //关键字
+    size: props.searchResultPageSize
+  }
+  if (props.apiParams) {
+    let apiParams = JSON.parse(decodeURIComponent(props.apiParams))
+    params = Object.assign({}, params, apiParams)
+  }
+
+  const resp = props.apiRequest(params)
+  resp.then(({ code, data }) => {
+    console.log(data)
+    if (code == 200) {
+      if ((data.user_infos || []).length > 0) {
+        ;(data.user_infos || []).forEach((item) => {
+          item.group_type = 0
+        })
+      }
+      if ((data.group_infos || []).length > 0) {
+        ;(data.group_infos || []).forEach((item) => {
+          item.group_type = item.type
+          item.groupTempType = 'group_infos'
+        })
+      }
+      if ((data.group_member_infos || []).length > 0) {
+        ;(data.group_member_infos || []).forEach((item) => {
+          item.groupTempType = 'group_member_infos'
+        })
+      }
+      if ((data.talk_record_infos || []).length > 0) {
+        let receiverInfo = JSON.parse(JSON.stringify(data.talk_record_infos[0]))
+        if (receiverInfo.talk_type === 1) {
+          //单聊才需此判断
+          if (receiverInfo.user_id === state.uid) {
+            //发送人是自己，接收人不需要变
+          }
+          if (receiverInfo.receiver_id === state.uid) {
+            //接收人是自己，这里需要变成对方
+            let temp_id = receiverInfo.receiver_id
+            let temp_name = receiverInfo.receiver_name
+            let temp_avatar = receiverInfo.receiver_avatar
+            receiverInfo.receiver_id = receiverInfo.user_id
+            receiverInfo.receiver_name = receiverInfo.user_name
+            receiverInfo.receiver_avatar = receiverInfo.user_avatar
+            receiverInfo.user_id = temp_id
+            receiverInfo.user_name = temp_name
+            receiverInfo.user_avatar = temp_avatar
+          }
+        }
+        state.first_talk_record_infos = Object.assign(
+          {},
+          state.first_talk_record_infos,
+          receiverInfo
+        )
+        ;(data.talk_record_infos || []).forEach((item) => {
+          item.group_type = 0
+        })
+      }
+
+      let tempGeneral_infos = Array.isArray(data.general_infos)
+        ? [...data.general_infos]
+        : data.general_infos
+      delete data.general_infos
+      data.combinedGroup = (data.group_infos || []).concat(data.group_member_infos || [])
+      data.general_infos = tempGeneral_infos
+
+      // 检查数据是否为空
+      let isEmpty = true
+      let dataKeys = Object.keys(data)
+      let paginationKey = ''
+      dataKeys.forEach((item) => {
+        if (Array.isArray(data[item]) && data[item].length > 0) {
+          paginationKey = item
+          isEmpty = false
+        }
+      })
+
+      if (isEmpty) {
+        if (state.pageNum === 1) {
+          // 第一页请求且为空，清空结果
+          state.searchResult = null
+          // zPaging.value?.complete([])
+        } else {
+          // 加载更多且为空，保持原列表不变
+          // zPaging.value?.complete(state.searchResult ? [state.searchResult] : [])
+        }
+      } else {
+        if (props.isPagination) {
+          if (state.pageNum === 1) {
+            // 第一页请求，直接设置新数据
+            state.searchResult = data
+          } else {
+            // 加载更多，合并数据
+            data[paginationKey] = (state.searchResult?.[paginationKey] || []).concat(
+              data[paginationKey]
+            )
+            state.searchResult = data
+          }
+
+          emits(
+            'lastIdChange',
+            data.last_id,
+            data.last_group_id,
+            data.last_member_id,
+            data.last_receiver_user_name,
+            data.last_receiver_group_name
+          )
+          let total = data.count
+          if (props.searchRecordDetail) {
+            if (state?.first_talk_record_infos?.talk_type === 1) {
+              total = data.user_record_count
+            } else if (state?.first_talk_record_infos?.talk_type === 2) {
+              total = data.group_record_count
+            }
+            let noMoreSearchResultRecord = true
+            if (
+              Object.keys(data).includes('talk_record_infos') &&
+              state.searchResult['talk_record_infos']?.length > 0
+            ) {
+              //搜聊天记录详情
+              if (state.searchResult['talk_record_infos']?.length < total) {
+                noMoreSearchResultRecord = false
+              }
+            }
+            if (noMoreSearchResultRecord) {
+              state.hasMore = false
+            } else {
+              state.hasMore = true
+            }
+          } else {
+            let noMoreSearchResultUser = true
+            let noMoreSearchResultGroup = true
+            let noMoreSearchResultGeneral = true
+            if (
+              Object.keys(data).includes('user_infos') &&
+              state.searchResult['user_infos']?.length > 0
+            ) {
+              //搜人
+              if (state.searchResult['user_infos']?.length < total) {
+                noMoreSearchResultUser = false
+              }
+            }
+            if (
+              Object.keys(data).includes('group_member_infos' || 'group_infos') &&
+              state.searchResult['combinedGroup']?.length > 0
+            ) {
+              //搜群
+              if (state.searchResult['combinedGroup']?.length < total) {
+                noMoreSearchResultGroup = false
+              }
+            }
+            if (
+              Object.keys(data).includes('general_infos') &&
+              state.searchResult['general_infos']?.length > 0
+            ) {
+              //搜聊天记录
+              if (state.searchResult['general_infos']?.length < total) {
+                noMoreSearchResultGeneral = false
+              }
+            }
+            if (noMoreSearchResultUser && noMoreSearchResultGroup && noMoreSearchResultGeneral) {
+              state.hasMore = false
+            } else {
+              state.hasMore = true
+            }
+          }
+          emits('resultTotalCount', total)
+          // zPaging.value?.completeByTotal([data], total)
+        } else {
+          state.searchResult = data
+          // zPaging.value?.complete([data])
+        }
+      }
+      state.pageNum = state.pageNum + 1
+      // 同步 userInfosLastId
+      if (typeof data.last_id !== 'undefined') {
+        state.userInfosLastId = data.last_id
+      } else {
+        state.userInfosLastId = undefined
+      }
+    } else {
+      if (state.pageNum === 1) {
+        // 第一页请求失败，清空结果
+        state.searchResult = null
+        // zPaging.value?.complete([])
+      } else {
+        // 加载更多失败，保持原列表不变
+        // zPaging.value?.complete(state.searchResult ? [state.searchResult] : [])
+      }
+    }
+  })
+
+  resp.catch(() => {
+    if (state.pageNum === 1) {
+      // 第一页请求异常，清空结果
+      state.searchResult = null
+      // zPaging.value?.complete([])
+    } else {
+      // 加载更多异常，保持原列表不变
+      // zPaging.value?.complete(state.searchResult ? [state.searchResult] : [])
+    }
+  })
+  return resp
+}
+
+//点击取消搜索
+const cancelSearch = () => {
+  const pages = getCurrentPages()
+  if (pages.length > 1) {
+    uni.navigateBack({
+      delta: 1
+    })
+  } else {
+    uni.reLaunch({
+      url: '/pages/index/index'
+    })
+  }
+}
+
+//获取key对应值
+const getResultKeysValue = (keys) => {
+  let resultKey = ''
+  switch (keys) {
+    case 'user_infos':
+      resultKey = '通讯录'
+      break
+    case 'group_infos':
+      resultKey = '群聊'
+      break
+    case 'group_member_infos':
+      resultKey = '群聊'
+      break
+    case 'combinedGroup':
+      resultKey = '群聊'
+      break
+    case 'general_infos':
+      resultKey = '聊天记录'
+      break
+    case 'talk_record_infos':
+      resultKey = '相关聊天记录'
+      break
+    default:
+      resultKey = ''
+  }
+  return resultKey
+}
+
+//是否还有更多数据
+const getHasMoreResult = (searchResultKey) => {
+  let has_more_result = ''
+  switch (searchResultKey) {
+    case 'user_infos':
+      if (state.searchResult['user_count'] && state.searchResult['user_count'] > 3) {
+        has_more_result = '更多通讯录'
+      }
+      break
+    case 'group_infos':
+      if (state.searchResult['group_count'] && state.searchResult['group_count'] > 3) {
+        has_more_result = '更多群聊'
+      }
+      break
+    case 'group_member_infos':
+      if (state.searchResult['group_count'] && state.searchResult['group_count'] > 3) {
+        has_more_result = '更多群聊'
+      }
+      break
+    case 'combinedGroup':
+      if (state.searchResult['group_count'] && state.searchResult['group_count'] > 3) {
+        has_more_result = '更多群聊'
+      }
+      break
+    case 'general_infos':
+      if (state.searchResult['record_count'] && state.searchResult['record_count'] >= 3) {
+        has_more_result = '更多聊天记录'
+      }
+      break
+    default:
+  }
+  return has_more_result
+}
+
+//点击跳转到更多结果页面
+const toMoreResultPage = (searchResultKey) => {
+  emits('toMoreResultPage', searchResultKey, state.searchText)
+}
+
+//点击了搜索结果项
+const clickSearchItem = (searchResultKey, searchItem) => {
+  console.log(searchResultKey, searchItem)
+  if (props.useClickStay) {
+    state.clickStayItem = searchItem.talk_type + '_' + searchItem.receiver_id
+  } else {
+    state.clickStayItem = ''
+  }
+  emits('clickStayItemChange', state.clickStayItem)
+  let talk_type = searchItem.talk_type
+  let receiver_id = searchItem.receiver_id
+  if (searchResultKey === 'user_infos') {
+    talk_type = 1
+    receiver_id = searchItem.id
+  } else if (searchResultKey === 'combinedGroup') {
+    talk_type = searchItem.type || 2
+    receiver_id = searchItem.group_id || searchItem.id
+  } else if (searchResultKey === 'general_infos') {
+    if (searchItem.talk_type === 1) {
+      if (searchItem.user_id === state.uid) {
+        //发送人是自己，接收人不需要变
+      }
+      if (searchItem.receiver_id === state.uid) {
+        //接收人是自己，这里需要变成对方
+        let temp_id = searchItem.receiver_id
+        let temp_name = searchItem.receiver_name
+        let temp_avatar = searchItem.receiver_avatar
+        searchItem.receiver_id = searchItem.user_id
+        searchItem.receiver_name = searchItem.user_name
+        searchItem.receiver_avatar = searchItem.user_avatar
+        searchItem.user_id = temp_id
+        searchItem.user_name = temp_name
+        searchItem.user_avatar = temp_avatar
+      }
+    }
+  }
+  emits(
+    'clickSearchItem',
+    state.searchText,
+    searchResultKey,
+    talk_type,
+    receiver_id,
+    encodeURIComponent(JSON.stringify(searchItem))
+  )
+}
+
+//加载更多数据
+const doLoadMore = (doClearSearchResult) => {
+  if (
+    state.userInfosLoading ||
+    state.userInfosShowAll ||
+    state.groupInfosShowAll // 新增判断，群聊展开后不再触发 queryAllSearch
+  ) {
+    return
+  }
+  if (!state.hasMore || state.loading) {
+    return
+  }
+  state.loading = true
+  queryAllSearch(doClearSearchResult).finally(() => {
+    state.loading = false
+  })
+}
+
+watch(
+  () => props.selectItemInList,
+  (newVal, oldVal) => {
+    if (newVal) {
+      const selectedItem = JSON.parse(decodeURIComponent(newVal))
+      clickSearchItem('general_infos', selectedItem)
+    }
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+// 单独维护通讯录加载更多逻辑，基于 last_id 分页
+async function loadMoreUserInfos() {
+  if (state.userInfosLoading) return
+  state.userInfosLoading = true
+  try {
+    let params = {
+      key: state.searchText,
+      last_id: state.userInfosLastId,
+      size: 10
+    }
+    const resp = await ServeQueryUser(params)
+    if (resp.code === 200 && Array.isArray(resp.data.user_infos)) {
+      if (!state.userInfosLastId) {
+        // 第一次加载，直接替换
+        state.searchResult = {
+          ...state.searchResult,
+          user_infos: resp.data.user_infos
+        }
+      } else {
+        // 后续加载，追加
+        state.searchResult = {
+          ...state.searchResult,
+          user_infos: (state.searchResult.user_infos || []).concat(resp.data.user_infos)
+        }
+      }
+      state.userInfosLastId = resp.data.last_id
+      // 判断是否全部加载完
+      if (
+        !resp.data.last_id ||
+        (Array.isArray(resp.data.user_infos) && resp.data.user_infos.length < 10)
+      ) {
+        state.userInfosExpand = true
+      }
+    }
+  } finally {
+    state.userInfosLoading = false
+  }
+}
+
+// 处理"更多通讯录"、 "更多群聊"点击，调用新方法
+function onMoreResultClick(searchResultKey) {
+  if (searchResultKey === 'user_infos') {
+    state.userInfosShowAll = true
+    loadMoreUserInfos()
+  } else if (searchResultKey === 'combinedGroup') {
+    state.groupInfosShowAll = true
+    loadMoreGroupInfos()
+  } else {
+    emits('toMoreResultPage', searchResultKey, state.searchText)
+  }
+}
+
+// 单独维护群聊加载更多逻辑，基于 last_id 分页
+async function loadMoreGroupInfos() {
+  if (state.groupInfosLoading) return
+  state.groupInfosLoading = true
+  try {
+    let params = {
+      key: state.searchText,
+      last_group_id: state.groupInfosLastGroupId,
+      last_member_id: state.groupInfosLastMemberId,
+      size: 10
+    }
+    const resp = await ServeQueryGroup(params)
+    if (resp.code === 200) {
+      const groupInfos = Array.isArray(resp.data.group_infos) ? resp.data.group_infos : []
+      const groupMemberInfos = Array.isArray(resp.data.group_member_infos)
+        ? resp.data.group_member_infos
+        : []
+
+      // 给新数据加上 groupTempType
+      groupInfos.forEach((item) => {
+        item.groupTempType = 'group_infos'
+        item.group_type = item.type // 保持一致性
+      })
+      groupMemberInfos.forEach((item) => {
+        item.groupTempType = 'group_member_infos'
+      })
+
+      const isFirstLoad =
+        (!state.groupInfosLastGroupId && !state.groupInfosLastMemberId) ||
+        (state.groupInfosLastGroupId === 0 && state.groupInfosLastMemberId === 0)
+      if (isFirstLoad) {
+        // 第一次加载，直接替换
+        state.searchResult = {
+          ...state.searchResult,
+          group_infos: groupInfos,
+          group_member_infos: groupMemberInfos,
+          combinedGroup: groupInfos.concat(groupMemberInfos)
+        }
+      } else {
+        // 后续加载，追加
+        const allGroupInfos = (state.searchResult.group_infos || []).concat(groupInfos)
+        const allGroupMemberInfos = (state.searchResult.group_member_infos || []).concat(
+          groupMemberInfos
+        )
+        state.searchResult = {
+          ...state.searchResult,
+          group_infos: allGroupInfos,
+          group_member_infos: allGroupMemberInfos,
+          combinedGroup: allGroupInfos.concat(allGroupMemberInfos)
+        }
+      }
+      state.groupInfosLastGroupId = resp.data.last_group_id
+      state.groupInfosLastMemberId = resp.data.last_member_id
+      // 判断是否全部加载完
+      const noMoreData =
+        (!groupInfos.length && !groupMemberInfos.length) ||
+        (resp.data.last_group_id === 0 && resp.data.last_member_id === 0)
+      if (noMoreData) {
+        state.groupInfosExpand = true
+      }
+    }
+  } finally {
+    state.groupInfosLoading = false
+  }
+}
+</script>
+<style lang="scss" scoped>
+.search-list {
+  .searchRoot {
+    padding: 10px 24px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+
+    .searchRoot_cancelBtn {
+      line-height: 22px;
+      color: #46299d;
+      margin: 0 0 0 10px;
+      flex-shrink: 0;
+    }
+  }
+  .search-record-detail {
+    padding: 0 25px;
+  }
+  .search-result {
+    width: 100%;
+    // padding: 0 10px;
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    justify-content: flex-start;
+    box-sizing: border-box;
+
+    .search-result-list {
+      width: 100%;
+      // padding: 0 10px;
+
+      .search-result-part {
+        // margin: 18px 0 0;
+
+        .result-title {
+          padding: 0 10px 5px;
+          border-bottom: 1px solid #f8f8f8;
+          span {
+            line-height: 20px;
+            color: #999999;
+          }
+        }
+        .result-has-more {
+          padding: 10px;
+          border-bottom: 1px solid #f8f8f8;
+          cursor: pointer;
+          span {
+            color: #191919;
+            line-height: 20px;
+          }
+        }
+        .result-has-more:hover {
+          background-color: rgba(70, 41, 157, 0.1);
+        }
+      }
+    }
+  }
+}
+</style>

src/components/talk/ForwardRecord.vue

@@ -5,43 +5,126 @@ import { ServeGetForwardRecords } from '@/api/chat'
 import { MessageComponents } from '@/constant/message'
 import { ITalkRecord } from '@/types/chat'
 import { useInject } from '@/hooks'
-
+import customModal  from '@/components/common/customModal.vue'
-const emit = defineEmits(['close'])
+import { voiceToText } from '@/api/chat.js'
+import { parseTime } from '@/utils/datetime'
 const props = defineProps({
   msgId: {
     type: String,
     required: true
-  }
+  },
+  createdAt: {
+    type: String,
+    required: false  
+  },
+  modalTitle: {
+    type: String,
+    required: true
+  },
 })
-
+const isShow=defineModel<boolean>('show')
 const { showUserInfoModal } = useInject()
-const isShow = ref(true)
 const items = ref<ITalkRecord[]>([])
-const title = ref('会话记录')
+const title = ref(props?.modalTitle || '会话记录')
 
 const onMaskClick = () => {
-  emit('close')
+  isShow.value=false
 }
 
 const onLoadData = () => {
   ServeGetForwardRecords({
-    msg_id: props.msgId
+    msg_id: props.msgId,
+    biz_date: parseTime(new Date(props.createdAt || ''), '{y}{m}')
   }).then((res) => {
     if (res.code == 200) {
       items.value = res.data.items || []
 
-      title.value = `会话记录(${items.value.length})`
+      // title.value = `会话记录(${items.value.length})`
     }
   })
 }
+const dropdown=ref({
+  show:false,
+  x:'',
+  y:'',
+  options:[] as any,
+  item:{} as ITalkRecord,
+})
+const onConvertText =async (data: ITalkRecord) => {
+  data.is_convert_text = 1
+  const res = await voiceToText({msgId:data.msg_id,voiceUrl:data.extra.url})
+  if(res.code == 200){
+    data.extra.content = res.data.convText
+
+  }
+}
+const onloseConvertText=(data: ITalkRecord)=>{
+  data.is_convert_text = 0
+}
+const evnets = {
+  convertText: onConvertText,
+  closeConvertText:onloseConvertText
+}
+
+const onContextMenuHandle=(key:string)=>{
+  evnets[key] && evnets[key](dropdown.value.item)
+  closeDropdownMenu()
+}
+const closeDropdownMenu=()=>{
+  dropdown.value.show=false
+}
 
 onMounted(() => {
   onLoadData()
 })
+const onContextMenu = (e:any,item: ITalkRecord) => {
+  dropdown.value.show=true
+
+  dropdown.value.x=e.clientX
+  dropdown.value.y=e.clientY
+  if(item.is_convert_text === 1){
+    dropdown.value.options=[{ label: '关闭转文字', key: 'closeConvertText' }]
+  }else{
+    dropdown.value.options=[{ label: '转文字', key: 'convertText' }]
+  }
+  
+  dropdown.value.item=item
+}
 </script>
 
 <template>
-  <n-modal
+  <customModal   :closable="false" customCloseBtn v-model:show="isShow"   :title="title" style="width: 997px;background-color: #F9F9FD;"   :on-after-leave="onMaskClick">
+    <template #content>
+      <div class="main-box bg-#fff me-scrollbar me-scrollbar-thumb">
+      <Loading v-if="items.length === 0" />
+
+      <div v-for="item in items" :key="item.msg_id" class="message-item">
+        <div class="left-box pointer" @click="showUserInfoModal(item.erp_user_id)">
+          <im-avatar :src="item.avatar" :size="38" :username="item.nickname" />
+        </div>
+
+        <div class="right-box">
+          <div class="msg-header">
+            <span class="name">{{ item.nickname }}</span>
+            <span class="time"> {{ item.created_at }}</span>
+          </div>
+
+          <component
+          @contextmenu.prevent="onContextMenu($event,item)"
+            :is="MessageComponents[item.msg_type] || 'unknown-message'"
+            :extra="item.extra"
+            :data="item"
+          />
+        </div>
+      </div>
+    </div>
+     <!-- 右键菜单 -->
+  <n-dropdown :show="dropdown.show" :x="dropdown.x" :y="dropdown.y" style="width: 142px;" :options="dropdown.options"
+    @select="onContextMenuHandle" @clickoutside="closeDropdownMenu" />
+    </template>
+   
+  </customModal>
+  <!-- <n-modal
     v-model:show="isShow"
     preset="card"
     :title="title"
@@ -80,7 +163,7 @@ onMounted(() => {
         </div>
       </div>
     </div>
-  </n-modal>
+  </n-modal> -->
 </template>
 
 <style lang="less" scoped>
@@ -94,10 +177,12 @@ onMounted(() => {
   min-height: 38px;
   display: flex;
   margin-bottom: 10px;
-  padding: 5px 15px;
+  padding: 24px 42px;
-
+  .im-message-text{
+    background-color: #fff;
+  }
   .left-box {
-    width: 30px;
+    width: 38px;
     display: flex;
     user-select: none;
     padding-top: 8px;

src/components/talk/message/AudioMessage.vue

@@ -3,7 +3,7 @@ import { ref, reactive } from 'vue'
 import { PlayOne, PauseOne } from '@icon-park/vue-next'
 import { ITalkRecordExtraAudio, ITalkRecord } from '@/types/chat'
 
-defineProps<{
+const props = defineProps<{
   extra: ITalkRecordExtraAudio
   data: ITalkRecord
   maxWidth?: Boolean
@@ -18,7 +18,8 @@ const state = reactive({
   progress: 0,
   duration: 0,
   currentTime: 0,
-  loading: true
+  loading: true,
+  showText: false
 })
 
 const onPlay = () => {
@@ -40,6 +41,12 @@ const onCanplay = () => {
   state.duration = audioRef.value.duration
   durationDesc.value = formatTime(parseInt(audioRef.value.duration))
   state.loading = false
+
+  if (props.data.is_convert_text === 1 && props.data.extra.content) {
+    setTimeout(() => {
+      state.showText = true
+    }, 300)
+  }
 }
 
 const onError = (e: any) => {
@@ -61,17 +68,13 @@ const formatTime = (value: number = 0) => {
     return '-'
   }
 
-  const minutes = Math.floor(value / 60)
+  return `${Math.floor(value)}"`
-  let seconds = value
-  if (minutes > 0) {
-    seconds = Math.floor(value - minutes * 60)
-  }
-
-  return `${minutes}'${seconds}"`
 }
 </script>
 <template>
-  <div class="im-message-audio">
+  <div class="pointer w-200px bg-#F3F4FD rounded-10px px-11px">
+    <div class="im-message-audio h-44px">
+      <aTrumpet :isPlay="false" color="black" :size="30"></aTrumpet>
       <audio
         ref="audioRef"
         preload="auto"
@@ -85,33 +88,53 @@ const formatTime = (value: number = 0) => {
 
       <div class="play">
         <div class="btn pointer" @click.stop="onPlay">
-        <n-icon :size="18" :component="state.isAudioPlay ? PauseOne : PlayOne" />
+          <!-- <n-icon :size="18" :component="state.isAudioPlay ? PauseOne : PlayOne" /> -->
+          <img
+            v-if="!state.isAudioPlay"
+            src="@/assets/image/yuyin.png"
+            class="w-[16px] h-[16px]"
+            alt=""
+          />
+          <img v-else src="@/assets/image/bofang.png" class="w-[16px] h-[16px]" alt="" />
         </div>
       </div>
-    <div class="desc">
+      <!-- <div class="desc">
       <span class="line" v-for="i in 23" :key="i"></span>
       <span
         class="indicator"
         :style="{ left: state.progress + '%' }"
         v-show="state.progress > 0"
       ></span>
+    </div> -->
+      <!-- <div class="time">{{ durationDesc }}</div> -->
+      <div>{{ durationDesc.split('"')[0] }}s</div>
     </div>
-    <div class="time">{{ durationDesc }}</div>
+
+    <transition name="expand">
+      <div
+        class="text-container py-12px border-t-1px border-t-solid border-t-#E2E2EB"
+        v-if="data.is_convert_text === 1"
+      >
+        <div
+          class="flex justify-center items-center"
+          v-if="data.is_convert_text === 1 && !data.extra.content"
+        >
+          <n-spin :stroke-width="3" size="small" />
+        </div>
+        <transition name="fade">
+          <div class="text-content" v-if="data.extra.content">{{ data.extra.content }}</div>
+        </transition>
+      </div>
+    </transition>
   </div>
 </template>
 <style lang="less" scoped>
 .im-message-audio {
   --audio-bg-color: #f5f5f5;
   --audio-btn-bg-color: #ffffff;
-
-  width: 200px;
-  height: 45px;
-  border-radius: 10px;
   display: flex;
   align-items: center;
   overflow: hidden;
-  background-color: var(--audio-bg-color);
-
   > div {
     display: flex;
     align-items: center;
@@ -126,12 +149,13 @@ const formatTime = (value: number = 0) => {
     .btn {
       width: 26px;
       height: 26px;
-      background-color: var(--audio-btn-bg-color);
+      // background-color: var(--audio-btn-bg-color);
       border-radius: 50%;
       color: rgb(24, 24, 24);
       display: flex;
       align-items: center;
       justify-content: center;
+      transition: all 0.3s ease;
     }
   }
 
@@ -230,6 +254,7 @@ const formatTime = (value: number = 0) => {
       height: 70%;
       width: 1px;
       background-color: #9b9595;
+      transition: left 0.1s linear;
     }
   }
 
@@ -241,6 +266,40 @@ const formatTime = (value: number = 0) => {
   }
 }
 
+.expand-enter-active,
+.expand-leave-active {
+  transition: all 0.5s ease;
+  overflow: hidden;
+}
+
+.expand-enter-from,
+.expand-leave-to {
+  max-height: 0;
+  opacity: 0;
+  padding: 0;
+  border-top-width: 0;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.text-container {
+  overflow: hidden;
+  transition: all 0.2s ease;
+}
+
+.text-content {
+  line-height: 1.5;
+  transition: all 0.2s ease;
+}
+
 html[theme-mode='dark'] {
   .im-message-audio {
     --audio-bg-color: #2c2c32;

src/components/talk/message/FileMessage.vue

@@ -1,118 +1,281 @@
-<script lang="ts" setup>
+<script setup>
 import { fileFormatSize } from '@/utils/strings'
-import { download, getFileNameSuffix } from '@/utils/functions'
+import { ref, computed } from 'vue'
-import { ITalkRecordExtraFile, ITalkRecord } from '@/types/chat'
+import { useUploadsStore } from '@/store'
+import pptText from '@/assets/image/ppt-text.png'
+import excelText from '@/assets/image/excel-text.png'
+import wordText from '@/assets/image/word-text.png'
+import pdfText from '@/assets/image/pdf-text.png'
+import fileText from '@/assets/image/file-text.png'
+import { ArrowDownload16Filled } from '@vicons/fluent'
+import { download } from '@/utils/functions.js'
+// 定义组件属性
+const props = defineProps({
+  // 文件的额外信息
+  extra: {
+    type: Object,
+    required: true
+  },
+  // 聊天记录数据
+  data: {
+    type: Object,
+    required: true
+  },
+  // 是否使用最大宽度
+  maxWidth: {
+    type: Boolean,
+    default: false
+  }
+})
 
-defineProps<{
+const uploadsStore = useUploadsStore()
-  extra: ITalkRecordExtraFile
+const isPlaying = ref(false)
-  data: ITalkRecord
+
-  maxWidth?: Boolean
+// 文件类型配置
-}>()
+const fileTypes = {
+  PDF: { icon: pdfText, color: '#DE4E4E', type: 'PDF' },
+  PPT: { icon: pptText, color: '#B74B2B', type: 'PPT' },
+  EXCEL: { icon: excelText, color: '#3C7F4B', type: 'EXCEL' },
+  WORD: { icon: wordText, color: '#2750B2', type: 'WORD' },
+  DEFAULT: { icon: fileText, color: '#747474', type: '文件' }
+}
+
+// Excel文件扩展名映射
+const EXCEL_EXTENSIONS = ['XLS', 'XLSX', 'CSV']
+// Word文件扩展名映射
+const WORD_EXTENSIONS = ['DOC', 'DOCX', 'RTF', 'DOT', 'DOTX']
+// PPT文件扩展名映射
+const PPT_EXTENSIONS = ['PPT', 'PPTX', 'PPS', 'PPSX']
+
+// 获取文件类型信息
+const fileInfo = computed(() => {
+  const extension = getFileExtension(props.extra.path)
+  if (EXCEL_EXTENSIONS.includes(extension)) {
+    return fileTypes.EXCEL
+  }
+  if (WORD_EXTENSIONS.includes(extension)) {
+    return fileTypes.WORD
+  }
+  if (PPT_EXTENSIONS.includes(extension)) {
+    return fileTypes.PPT
+  }
+  return fileTypes[extension] || fileTypes.DEFAULT
+})
+
+// 判断文件是否可以预览
+const canPreview = computed(() => {
+  const extension = getFileExtension(props.extra.path)
+  return extension === 'PDF' || 
+         EXCEL_EXTENSIONS.includes(extension) || 
+         WORD_EXTENSIONS.includes(extension) || 
+         PPT_EXTENSIONS.includes(extension)
+})
+
+// 获取文件扩展名
+function getFileExtension(filepath) {
+  const parts = filepath?.split('.')
+  return parts?.length > 1 ? parts?.pop()?.toUpperCase() : ''
+}
+
+// 切换播放状态
+const togglePlay = () => {
+  isPlaying.value = !isPlaying.value
+  if (props.extra.is_uploading && props.extra.upload_id) {
+    const action = isPlaying.value ? 'pauseUpload' : 'resumeUpload'
+    uploadsStore[action](props.extra.upload_id)
+  }
+}
+
+// 计算SVG圆环进度条的参数
+const radius = 9
+const circumference = computed(() => 2 * Math.PI * radius)
+const strokeDashoffset = computed(() => 
+  circumference.value * (1 - (props.extra.percentage || 0) / 100)
+)
+
+// 处理文件点击事件
+const handleClick = () => {
+  // 只有在不上传中且文件类型支持预览时才打开预览窗口
+  if(!props.extra.is_uploading) {
+    if(canPreview.value){
+      window.open(
+      `${import.meta.env.VITE_PAGE_URL}/office?url=${props.extra.path}`,
+      '_blank',
+      'width=1200,height=900,left=200,top=200,toolbar=no,menubar=no,scrollbars=yes,resizable=yes,location=no,status=no'
+    );
+    }else{
+      window['$message'].warning('暂不支持在线预览该类型文件')
+    }
+  
+  }
+}
+
+ function downloadFileWithProgress(resourceUrl, filename) {
+  const iframe = document.createElement('iframe');
+  iframe.style.display = 'none';
+  iframe.src = resourceUrl;
+  document.body.appendChild(iframe);
+  setTimeout(() => {
+    document.body.removeChild(iframe);
+  }, 60000);
+}
+
+
+// 处理下载事件
+const handleDownload = () => {
+  downloadFileWithProgress(props.extra.path,props.extra.name)
+}
 </script>
 
 <template>
-  <section class="file-message">
+  <div class="file-message flex flex-col can-preview"  @click="handleClick">
-    <div class="main">
+    <!-- 文件头部信息 -->
-      <div class="ext">{{ getFileNameSuffix(extra.name) }}</div>
+    <div class="file-header">
-      <div class="file-box">
+      <!-- 文件名 -->
-        <p class="info">
+      <div class="file-name">{{ extra.name }}</div>
-          <span class="name">{{ extra.name }}</span>
+      <!-- 文件图标区域 -->
-          <span class="size">({{ fileFormatSize(extra.size) }})</span>
+      <div  class="file-icon-container">
-        </p>
+        <img class="file-icon" :src="fileInfo.icon" alt="文件图标">
-        <p class="notice">文件已成功发送, 文件助手永久保存</p>
+            
+        <!-- 上传进度圆环 - 上传状态 -->
+        <div v-if="extra.is_uploading&&extra.percentage!==-1" class="progress-overlay">
+          <div class="circle-progress-container" @click.stop="togglePlay">
+            <svg class="circle-progress" width="20" height="20" viewBox="0 0 20 20">
+              <!-- 底色圆环 -->
+              <circle 
+                cx="10" 
+                cy="10" 
+                r="9"
+                fill="transparent"
+                stroke="#EEEEEE"
+                stroke-width="2"
+              />
+              <!-- 进度圆环 -->
+              <circle 
+                cx="10" 
+                cy="10" 
+                r="9"
+                fill="transparent"
+                :stroke="fileInfo.color"
+                stroke-width="2"
+                :stroke-dasharray="circumference"
+                :stroke-dashoffset="strokeDashoffset"
+                transform="rotate(-90 10 10)"
+                class="progress-circle"
+              />
+              
+              <!-- 暂停/播放图标 -->
+             
+              <g v-if="isPlaying" class="play-icon">
+                <rect x="6" y="6" width="8" height="8" :fill="fileInfo.color" />
+              </g>
+              <g v-else class="pause-icon">
+                <rect x="7" y="5" width="2" height="10" :fill="fileInfo.color" />
+                <rect x="11" y="5" width="2" height="10" :fill="fileInfo.color" />
+              </g>
+            </svg>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 文件大小信息 -->
+    <div class="flex justify-between items-center grow-1">
+      <div class="file-size">{{ fileFormatSize(extra.size) }}</div>
+      <div class="flex items-center" v-if="!extra.is_uploading">
+        <div class="flex items-center" @click.stop="handleDownload"> <img class="w-11.7px h-11.74px mr-7px" src="@/assets/image/dofd.png" alt=""> <span class="text-12px text-#46299D">下载</span></div>
+       
+    
       </div>
     </div>
-    <div class="footer">
-      <a @click="download(data.msg_id)">下载</a>
-      <a>在线预览</a>
   </div>
-  </section>
 </template>
 
 <style lang="less" scoped>
 .file-message {
-  width: 250px;
+  width: 243px;
-  min-height: 85px;
+  background-color: #fff;
-  padding: 10px;
+  height: 110px;
-  border-radius: 10px;
+  border-radius: 8px;
-  border: 1px solid var(--im-message-border-color);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  padding: 0 14px;
 
-  .main {
+}
-    height: 45px;
+
+.can-preview {
+  cursor: pointer;
+  &:hover {
+    background-color: #f9f9f9;
+  }
+}
+
+.file-header {
   display: flex;
-    flex-direction: row;
+  padding: 14px 5px 14px 0;
-    margin-top: 5px;
+  justify-content: space-between;
+  width: 100%;
+  border-bottom: 1px solid #EEEEEE;
+}
 
-    .ext {
+.file-name {
+  height: 50px;
+  color: #1A1A1A;
+  font-size: 14px;
+  word-break: break-word;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+.file-icon-container {
+  height: 48px;
+  position: relative;
+}
+
+.file-icon {
+  width: 48px;
+  height: 48px;
+}
+
+.progress-overlay {
+  background-color: #fff;
+  position: absolute;
+  top: 6px;
+  left: 11px;
+  width: 30px;
+  height: 30px;
   display: flex;
   justify-content: center;
   align-items: center;
-      width: 45px;
+}
-      height: 45px;
+
-      color: #ffffff;
+.file-size {
-      background: #49a4ff;
+  color: #747474;
-      border-radius: 5px;
   font-size: 12px;
 }
 
-    .file-box {
+.circle-progress-container {
-      flex: 1 1;
+  width: 20px;
-      height: 45px;
+  height: 20px;
-      margin-left: 10px;
+  position: relative;
-      overflow: hidden;
-
-      .info {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        overflow: hidden;
-        height: 24px;
-        font-size: 14px;
-
-        .name {
-          flex: 1 auto;
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-        }
-
-        .size {
-          font-size: 12px;
-          color: #cac6c6;
-          flex-shrink: 0;
-        }
-      }
-
-      .notice {
-        height: 25px;
-        line-height: 25px;
-        font-size: 12px;
-        color: #929191;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-    }
-  }
-
-  .footer {
-    height: 30px;
-    line-height: 37px;
-    text-align: right;
-    font-size: 12px;
-    border-top: 1px solid var(--border-color);
-    margin-top: 10px;
-
-    a {
-      margin: 0 3px;
-      user-select: none;
   cursor: pointer;
-      color: var(--im-text-color);
+}
 
-      &:hover {
+.circle-progress {
-        color: royalblue;
+  transform: rotate(-90deg);
+  transform-origin: center;
 }
+
+.progress-circle {
+  transition: stroke-dashoffset 0.3s ease;
 }
+
+.pause-icon, .play-icon {
+  transform-origin: center;
 }
+
+.pause-icon {
+  transform: rotate(90deg);
 }
 </style>

src/components/talk/message/ForwardMessage.vue

@@ -12,7 +12,13 @@ const props = defineProps<{
 const isShowRecord = ref(false)
 
 const title = computed(() => {
-  return [...new Set(props.extra.records.map((v) => v.nickname))].join('、')
+  const uniqueNames = [...new Set(props.extra.records.map(v => v.nickname))];
+  if (uniqueNames.length <= 2) {
+    return uniqueNames.join('和');
+  } else {
+    return uniqueNames.slice(0, 2).join('和') + '等';
+  }
+  // return [...new Set(props.extra.records.map((v) => v.nickname))].join('和')
 })
 
 const onClick = () => {
@@ -21,7 +27,7 @@ const onClick = () => {
 </script>
 <template>
   <section class="im-message-forward pointer" @click="onClick">
-    <div class="title">{{ title }} 的会话记录</div>
+    <div class="title">{{ extra.forward_name || title}}的会话记录</div>
     <div class="list" v-for="(record, index) in extra.records" :key="index">
       <p>
         <span>{{ record.nickname }}: </span>
@@ -33,7 +39,7 @@ const onClick = () => {
       <span>转发：聊天会话记录 ({{ extra.msg_ids.length }}条)</span>
     </div>
 
-    <ForwardRecord v-if="isShowRecord" :msg-id="data.msg_id" @close="isShowRecord = false" />
+    <ForwardRecord v-model:show="isShowRecord"  :msg-id="data.msg_id" @close="isShowRecord = false" :created-at="data.created_at" :modalTitle="(extra.forward_name || title) + '的会话记录'"/>
   </section>
 </template>
 
@@ -41,19 +47,21 @@ const onClick = () => {
 .im-message-forward {
   width: 250px;
   min-height: 95px;
-  max-height: 150px;
+  max-height: 190px;
   border-radius: 10px;
   padding: 8px 10px;
   border: 1px solid var(--im-message-border-color);
   user-select: none;
 
   .title {
-    height: 30px;
+    max-height: 60px;
     line-height: 30px;
     font-size: 15px;
     overflow: hidden;
     text-overflow: ellipsis;
-    white-space: nowrap;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
     font-weight: 400;
     margin-bottom: 5px;
   }

src/components/talk/message/GroupNoticeMessage.vue

@@ -11,12 +11,20 @@ defineProps<{
 let show = ref(false)
 </script>
 <template>
-  <section class="im-message-group-notice pointer" @click="show = !show">
+  <section
+    class="im-message-group-notice pointer"
+    @click="show = !show"
+    :class="{
+      left: data.float === 'left',
+      right: data.float === 'right'
+    }"
+  >
     <div class="title">
-      <n-tag :bordered="false" size="small" type="primary"> 群公告 </n-tag>
+      <!-- <n-tag :bordered="false" size="small" type="primary"> 群公告 </n-tag>
-      《{{ extra.title }}》
+      《{{ extra.title }}》 -->
+      <text>群公告</text>
     </div>
-    <div class="content" :class="{ ellipsis: !show }">
+    <div class="title" :class="{ ellipsis: !show }">
       {{ extra.content }}
     </div>
   </section>
@@ -30,14 +38,14 @@ let show = ref(false)
   padding: 8px 10px;
   border: 1px solid var(--im-message-border-color);
   user-select: none;
+  background-color: #fff;
 
   .title {
-    height: 30px;
+    line-height: 44rpx;
-    line-height: 30px;
+    font-size: 32rpx;
-    font-size: 14px;
+    // overflow: hidden;
-    overflow: hidden;
+    // text-overflow: ellipsis;
-    text-overflow: ellipsis;
+    // white-space: nowrap;
-    white-space: nowrap;
     font-weight: 400;
     margin-bottom: 5px;
     position: relative;
@@ -56,5 +64,18 @@ let show = ref(false)
       white-space: nowrap;
     }
   }
+
+  &.left {
+    background-color: #fff;
+    border-radius: 0 16rpx 16rpx 16rpx;
+  }
+
+  &.right {
+    background-color: #46299d;
+    border-radius: 16rpx 0 16rpx 16rpx;
+    .title {
+      color: #fff;
+    }
+  }
 }
 </style>

src/components/talk/message/ImageMessage.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
-import { NImage } from 'naive-ui'
+import { NImage, NSpin } from 'naive-ui'
 import { getImageInfo } from '@/utils/functions'
 import { ITalkRecordExtraImage, ITalkRecord } from '@/types/chat'
 
-defineProps<{
+const props = defineProps<{
   extra: ITalkRecordExtraImage
   data: ITalkRecord
   maxWidth?: Boolean
@@ -35,7 +35,13 @@ const img = (src: string, width = 200) => {
     :class="{ left: data.float === 'left' }"
     :style="img(extra.url, 350)"
   >
-    <n-image :src="extra.url" />
+    <div class="image-container">
+      <n-image class="h-149px" :src="extra.url" />
+      <!-- 上传中的loading蒙版 -->
+      <div v-if="extra.is_uploading" class="loading-overlay">
+        <n-spin size="large" />
+      </div>
+    </div>
   </section>
 </template>
 <style lang="less" scoped>
@@ -44,11 +50,30 @@ const img = (src: string, width = 200) => {
   padding: 5px;
   border-radius: 5px;
   background: var(--im-message-left-bg-color);
-  min-width: 30px;
+  height:149px;
-  min-height: 30px;
   
   &.left {
-    background: var(--im-message-right-bg-color);
+    background: #F4F4FC;
+  }
+
+  .image-container {
+    position: relative;
+    width: 100%;
+    height: 100%;
+  }
+
+  .loading-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 5px;
+    z-index: 1;
   }
 
   :deep(.n-image img) {

src/components/talk/message/LinkMessage.vue

@@ -0,0 +1,95 @@
+<!-- 完全复制的textMessage组件，没有用处，仅兜底真有14类型时的场景。后续会单独做制作分享卡片功能，到时再根据分享卡片样式重做本页面 -->
+<!-- 完全复制的textMessage组件，没有用处，仅兜底真有14类型时的场景。后续会单独做制作分享卡片功能，到时再根据分享卡片样式重做本页面 -->
+<!-- 完全复制的textMessage组件，没有用处，仅兜底真有14类型时的场景。后续会单独做制作分享卡片功能，到时再根据分享卡片样式重做本页面 -->
+<!-- 完全复制的textMessage组件，没有用处，仅兜底真有14类型时的场景。后续会单独做制作分享卡片功能，到时再根据分享卡片样式重做本页面 -->
+<!-- 完全复制的textMessage组件，没有用处，仅兜底真有14类型时的场景。后续会单独做制作分享卡片功能，到时再根据分享卡片样式重做本页面 -->
+<!-- 完全复制的textMessage组件，没有用处，仅兜底真有14类型时的场景。后续会单独做制作分享卡片功能，到时再根据分享卡片样式重做本页面 -->
+<!-- 完全复制的textMessage组件，没有用处，仅兜底真有14类型时的场景。后续会单独做制作分享卡片功能，到时再根据分享卡片样式重做本页面 -->
+<!-- 完全复制的textMessage组件，没有用处，仅兜底真有14类型时的场景。后续会单独做制作分享卡片功能，到时再根据分享卡片样式重做本页面 -->
+<!-- 完全复制的textMessage组件，没有用处，仅兜底真有14类型时的场景。后续会单独做制作分享卡片功能，到时再根据分享卡片样式重做本页面 -->
+<!-- 完全复制的textMessage组件，没有用处，仅兜底真有14类型时的场景。后续会单独做制作分享卡片功能，到时再根据分享卡片样式重做本页面 -->
+<script lang="ts" setup>
+import { textReplaceEmoji } from '@/utils/emojis'
+import { textReplaceLink, textReplaceMention } from '@/utils/strings'
+import { ITalkRecordExtraText, ITalkRecord } from '@/types/chat'
+
+const props = defineProps<{
+  extra: ITalkRecordExtraText
+  data: ITalkRecord
+  maxWidth?: boolean
+  source?: 'panel' | 'forward' | 'history'
+}>()
+
+const float = props.data.float
+
+let textContent = props.extra?.content || ''
+
+textContent = textReplaceLink(textContent)
+
+if (props.data.talk_type == 2) {
+  textContent = textReplaceMention(textContent, '#462AA0')
+}
+
+textContent = textReplaceEmoji(textContent)
+</script>
+
+<template>
+  <div
+    class="im-message-text"
+    :class="{
+      left: float == 'left',
+      right: float == 'right',
+      maxwidth: maxWidth,
+      'radius-reset': source != 'panel',
+    }"
+  >
+    <pre v-html="textContent" />
+  </div>
+</template>
+
+<style lang="less" scoped>
+.im-message-text {
+  min-width: 40rpx;
+  min-height: 40rpx;
+  padding: 22rpx 30rpx;
+  color: #1a1a1a;
+  background: #ffffff;
+  border-radius: 0 16rpx 16rpx 16rpx;
+
+  &.right {
+    background-color: #46299d;
+    color: #ffffff;
+    border-radius: 16rpx 0 16rpx 16rpx;
+  }
+
+  &.maxwidth {
+    max-width: 486rpx;
+  }
+
+  &.radius-reset {
+    border-radius: 0;
+  }
+
+  pre {
+    white-space: pre-wrap;
+    overflow: hidden;
+    word-break: break-word;
+    word-wrap: break-word;
+    font-size: 32rpx;
+    font-family: 'PingFang SC', 'Microsoft YaHei', 'Alibaba PuHuiTi 2.0 45';
+    line-height: 44rpx;
+
+    :deep(.emoji) {
+      vertical-align: text-bottom;
+      margin: 0 10rpx;
+      width: 44rpx;
+      height: 44rpx;
+    }
+
+    :deep(a) {
+      color: #2196f3;
+      text-decoration: revert;
+    }
+  }
+}
+</style>

src/components/talk/message/RevokeMessage.vue

@@ -1,7 +1,9 @@
 <script setup>
 import { formatTime } from '@/utils/datetime'
+import { bus } from '@/utils/event-bus'
+import { EditorConst } from '@/constant/event-bus'
 
-defineProps({
+const props = defineProps({
   login_uid: {
     type: Number,
     default: 0
@@ -21,18 +23,121 @@ defineProps({
   datetime: {
     type: String,
     default: ''
+  },
+  data: {
+    type: Object,
+    default: () => {}
+  },
+  revokeInfo: {
+    type: Object,
+    default() {
+      return {}
+    }
+  },
+  extra: {
+    type: String,
+    default: ''
   }
 })
+
+const onRevoke = () => {
+  // 只处理文本消息
+  if (props.data.msg_type === 1 && props.data.extra?.content) {
+    // 通过事件总线发送编辑消息事件
+    bus.emit(EditorConst.Edit, {
+      content: props.data.extra.content
+    })
+  }
+}
 </script>
 <template>
   <div class="im-message-revoke">
-    <div class="content">
+    <div class="content" v-if="JSON.stringify(revokeInfo) !== '{}'">
-      <span v-if="login_uid == user_id"> 你撤回了一条消息 | {{ formatTime(datetime) }} </span>
+      <span v-if="talk_type === 1 && login_uid === revokeInfo.withdraw_id">
-      <span v-else-if="talk_type == 1"> 对方撤回了一条消息 | {{ formatTime(datetime) }} </span>
+        你撤回了一条消息 | {{ formatTime(datetime) }}
-      <span v-else>
+      </span>
-        "{{ nickname }}" 撤回了一条消息 |
+      <span v-if="talk_type === 1 && login_uid !== revokeInfo.withdraw_id">
+        {{ revokeInfo.withdraw_name }}撤回了一条消息 | {{ formatTime(datetime) }}
+      </span>
+      <span
+        v-if="
+          talk_type === 2 &&
+          login_uid === revokeInfo.withdraw_id &&
+          login_uid === revokeInfo.retracted_id
+        "
+      >
+        你撤回了一条消息 |
+        {{ formatTime(datetime) }}
+        <slot></slot>
+      </span>
+      <span
+        v-if="
+          talk_type === 2 &&
+          login_uid === revokeInfo.withdraw_id &&
+          login_uid !== revokeInfo.retracted_id
+        "
+      >
+        你撤回了{{ revokeInfo.retracted_name }}一条消息 |
         {{ formatTime(datetime) }}
       </span>
+      <span
+        v-if="
+          talk_type === 2 &&
+          login_uid !== revokeInfo.withdraw_id &&
+          revokeInfo.withdraw_id === revokeInfo.retracted_id
+        "
+      >
+        {{ revokeInfo.withdraw_name }}撤回了一条消息 |
+        {{ formatTime(datetime) }}
+      </span>
+
+      <span
+        v-if="
+          talk_type === 2 &&
+          login_uid !== revokeInfo.withdraw_id &&
+          login_uid === revokeInfo.retracted_id &&
+          revokeInfo.withdraw_id !== revokeInfo.retracted_id
+        "
+      >
+        {{ revokeInfo.withdraw_name }}撤回了你一条消息 |
+        {{ formatTime(datetime) }}
+      </span>
+      <span
+        v-if="
+          talk_type === 2 &&
+          login_uid !== revokeInfo.withdraw_id &&
+          login_uid !== revokeInfo.retracted_id &&
+          revokeInfo.withdraw_id !== revokeInfo.retracted_id
+        "
+      >
+        {{ revokeInfo.withdraw_name }}撤回了{{ revokeInfo.retracted_name }}一条消息 |
+        {{ formatTime(datetime) }}
+      </span>
+
+      <div style="display: inline-block;" v-if="login_uid === user_id">
+        <n-button @click="onRevoke" v-if="data.msg_type === 1&&data.extra?.content&&data.is_self_action" text class="text-#46299D text-11px">重新编辑</n-button>
+      </div>
+      <!-- <span v-if="login_uid == user_idA"> 你撤回B了一条消息 | {{ formatTime(datetime) }} </span>
+      <span v-else-if="login_uid == user_idB"> A撤回你了一条消息 | {{ formatTime(datetime) }} </span>
+      <span v-else> A撤回B了一条消息 | {{ formatTime(datetime) }} </span> -->
+    </div>
+    <div class="content" v-if="JSON.stringify(revokeInfo) === '{}'">
+      <span v-if="talk_type === 1 && login_uid === user_id">
+        你撤回了一条消息 | {{ formatTime(datetime) }}
+      </span>
+      <span v-if="talk_type === 1 && login_uid !== user_id">
+        {{ nickname }}撤回了一条消息 | {{ formatTime(datetime) }}
+      </span>
+      <span v-if="talk_type === 2 && !extra && login_uid === user_id">
+        你撤回了一条消息 | {{ formatTime(datetime) }}
+      </span>
+      <span v-if="talk_type === 2 && !extra && login_uid !== user_id">
+        {{ nickname }}撤回了一条消息 | {{ formatTime(datetime) }}
+      </span>
+      <span v-if="talk_type === 2 && extra"> {{ extra }} | {{ formatTime(datetime) }} </span>
+      <div style="display: inline-block;" v-if="login_uid === user_id">
+        <n-button @click="onRevoke" v-if="data.msg_type === 1&&data.extra?.content&&data.is_self_action" text class="text-#46299D text-11px">重新编辑</n-button>
+      </div>
     </div>
   </div>
 </template>

src/components/talk/message/TextMessage.vue

@@ -17,7 +17,7 @@ let textContent = props.extra?.content || ''
 textContent = textReplaceLink(textContent)
 
 if (props.data.talk_type == 2) {
-  textContent = textReplaceMention(textContent, '#1890ff')
+  textContent = textReplaceMention(textContent, float==='right'?'#fff':'#462AA0')
 }
 
 textContent = textReplaceEmoji(textContent)
@@ -43,9 +43,9 @@ textContent = textReplaceEmoji(textContent)
   min-height: 30px;
   padding: 3px;
   color: var(--im-message-left-text-color);
-  background: var(--im-message-left-bg-color);
+  background: #F4F4FC;
   border-radius: 0px 10px 10px 10px;
-
+  font-size: 14px;
   &.right {
     background-color: var(--im-message-right-bg-color);
     color: var(--im-message-right-text-color);
@@ -71,6 +71,8 @@ textContent = textReplaceEmoji(textContent)
     line-height: 25px;
 
     :deep(.emoji) {
+      width: 22px;
+      height: 22px;
       vertical-align: text-bottom;
       margin: 0 5px;
     }

src/components/talk/message/VideoMessage.vue

@@ -1,11 +1,17 @@
 <script lang="ts" setup>
 import 'xgplayer/dist/index.min.css'
-import { ref, nextTick } from 'vue'
+import { ref, nextTick, watch, computed } from 'vue'
-import { NImage, NModal, NCard } from 'naive-ui'
+import { NImage, NModal, NCard, NProgress, NPopconfirm } from 'naive-ui'
-import { Play, Close } from '@icon-park/vue-next'
+import { Play, Close, Pause, Right, Attention } from '@icon-park/vue-next'
 import { getImageInfo } from '@/utils/functions'
+import {PauseOutline} from '@vicons/ionicons5'
 import Player from 'xgplayer'
 import { ITalkRecordExtraVideo, ITalkRecord } from '@/types/chat'
+import { useUploadsStore } from '@/store'
+// @ts-ignore
+const message = window.$message
+
+const uploadsStore = useUploadsStore()
 
 const props = defineProps<{
   extra: ITalkRecordExtraVideo
@@ -13,35 +19,75 @@ const props = defineProps<{
   maxWidth?: Boolean
 }>()
 
-const img = (src: string, width = 200) => {
+// const img = (src: string, width = 200) => {
-  const info: any = getImageInfo(src)
+//   const info: any = getImageInfo(src)
 
-  if (info.width == 0 || info.height == 0) {
+//   if (info.width == 0 || info.height == 0) {
-    return {}
+//     return {}
-  }
+//   }
 
-  if (info.height > 300) {
+//   if (info.height > 300) {
-    return {
+//     return {
-      height: '300px'
+//       height: '300px'
-    }
+//     }
-  }
+//   }
 
-  if (info.width < width) {
+//   if (info.width < width) {
-    return {
+//     return {
-      width: `${info.width}px`,
+//       width: `${info.width}px`,
-      height: `${info.height}px`
+//       height: `${info.height}px`
-    }
+//     }
-  }
+//   }
 
-  return {
+//   return {
-    width: width + 'px',
+//     width: width + 'px',
-    height: info.height / (info.width / width) + 'px'
+//     height: info.height / (info.width / width) + 'px'
-  }
+//   }
-}
+// }
 
 const open = ref(false)
+const isPaused = ref(false)
+const uploadFailed = ref(false)
+
+// 查找上传项并检查状态
+const updatePauseStatus = () => {
+  if (props.extra.is_uploading && props.extra.upload_id) {
+    // 使用新的查找方法
+    const item = uploadsStore.findItemByClientId(props.extra.upload_id)
+    
+    if (item && item.is_paused !== undefined) {
+      isPaused.value = item.is_paused
+    }
+  }
+}
+
+// 初始化时检查状态
+updatePauseStatus()
+
+// 创建视频封面的URL
+const videoSrc = computed(() => {
+  // 即使在上传过程中也返回视频URL，这样可以显示视频封面
+  return props.extra.url || ''
+})
+// // 监听关键道具变化
+// watch(() => props.extra.percentage, (newVal: number | undefined) => {
+//   // 确保进度更新时 UI 也实时更新  
+//   // 检测上传失败状态 (-1表示上传失败)
+//   if (newVal === -1) {
+//     uploadFailed.value = true
+//     // 显示上传失败提示
+//     message.error('视频发送失败，请点击红色感叹号重试')
+//   } else if (newVal !== undefined && newVal > 0) {
+//     uploadFailed.value = false
+//   }
+// }, { immediate: true })
 
 async function onPlay() {
+  // 如果视频正在上传，不执行播放操作
+  if (props.extra.is_uploading) {
+    return
+  }
+  
   open.value = true
 
   await nextTick()
@@ -54,18 +100,86 @@ async function onPlay() {
     lang: 'zh-cn'
   })
 }
+
+// 暂停上传
+function pauseUpload(e) {
+  e.stopPropagation()
+  if (props.extra.is_uploading && props.extra.upload_id) {
+    uploadsStore.pauseUpload(props.extra.upload_id)
+    isPaused.value = true
+  }
+}
+
+// 继续上传
+function resumeUpload(e) {
+  console.log('resumeUpload')
+  e.stopPropagation()
+  if (props.extra.is_uploading && props.extra.upload_id) {
+    uploadsStore.resumeUpload(props.extra.upload_id)
+    isPaused.value = false
+  }
+}
+
+// 重新上传视频
+// function retryUpload(e) {
+//   e.stopPropagation()
+//   if (props.extra.upload_id) {
+//     // 重置失败状态
+//     uploadFailed.value = false
+    
+//     // 恢复上传
+//     uploadsStore.resumeUpload(props.extra.upload_id)
+//     message.success('正在重新上传视频...')
+//   }
+// }
 </script>
 <template>
   <section
     class="im-message-video"
     :class="{ left: data.float === 'left' }"
-    :style="img(extra.cover, 350)"
     @click="onPlay"
   >
-    <n-image :src="extra.cover" preview-disabled />
   
-    <div class="btn-video">
+    <!-- <n-image :src="extra.cover" preview-disabled /> -->
-      <n-icon :component="Play" size="36" />
+    <video :src="videoSrc" :controls="false"></video>
+    <!-- 上传进度时的黑色半透明蒙层 -->
+    <div v-if="extra.is_uploading && !uploadFailed" class="upload-mask"></div>
+    <!-- 上传进度显示 -->
+    <div v-if="extra.is_uploading && !uploadFailed" class="upload-progress">
+      <n-progress
+  
+        type="circle"
+        :percentage="Math.round(extra.percentage || 0)"
+        :show-indicator="false"
+        :stroke-width="6"
+        color="#fff"
+        rail-color="#E3E3E3"
+      />
+      
+      <!-- 暂停/继续按钮移到圆圈内部 -->
+      <div class="upload-control" @click.stop>
+        <n-icon 
+          v-if="!isPaused" 
+          class="control-btn" 
+          :component="PauseOutline" 
+          size="20" 
+          @click="pauseUpload" 
+        />
+        <div v-else class="w-15px h-15px bg-#fff rounded-4px"  @click="resumeUpload" >
+
+        </div>
+        <!-- <n-icon 
+          v-else 
+          class="control-btn" 
+          :component="Right" 
+          size="20" 
+          @click="resumeUpload" 
+        /> -->
+      </div>
+    </div>
+    <!-- 播放按钮，仅在视频不是上传状态且未失败时显示 -->
+    <div v-if="!extra.is_uploading && !uploadFailed" class="btn-video">
+      <n-icon :component="Play" size="40" />
     </div>
 
     <n-modal v-model:show="open">
@@ -92,23 +206,25 @@ async function onPlay() {
   min-height: 30px;
   display: inline-flex;
   position: relative;
-
+  height:149px;
+  width: 225px;
   &.left {
     background: var(--im-message-right-bg-color);
   }
 
-  :deep(.n-image img) {
+  video {
     width: 100%;
     height: 100%;
     border-radius: 5px;
+    object-fit: cover;
+    background-color: #333; /* 添加背景色，避免默认显示为灰色 */
   }
 
   .btn-video {
-    width: 30px;
+    left: 50%;
-    height: 20px;
+    top: 50%;
+    transform: translate(-50%, -50%);
     position: absolute;
-    left: calc(50% - 15px);
-    top: calc(50% - 10px);
     cursor: pointer;
     color: #ffffff;
   }
@@ -134,4 +250,66 @@ async function onPlay() {
   align-items: center;
   justify-content: center;
 }
+
+.upload-mask {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.3); /* 降低不透明度，从0.45改为0.3，让视频封面能够显示 */
+  z-index: 1;
+  border-radius: 5px;
+}
+
+.upload-progress {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 40px;
+  height: 40px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 2;
+  
+  .upload-control {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    
+    .control-btn {
+      color: white;
+      z-index: 2;
+    }
+  }
+}
+
+/* 上传失败样式 */
+.upload-failed {
+  position: absolute;
+  left: 10px;
+  bottom: 10px;
+  z-index: 2;
+  
+  .failed-icon {
+    width: 30px;
+    height: 30px;
+    background-color: rgba(0, 0, 0, 0.7);
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.9);
+    }
+  }
+}
 </style>

src/components/talk/message/VoteMessage.vue

@@ -121,7 +121,7 @@ onMounted(() => {
                 :height="5"
                 :show-indicator="false"
                 :percentage="parseInt(option.progress)"
-                color="#1890ff"
+                color="#462AA0"
               />
             </p>
           </div>

src/components/talk/message/system/SysGroupAdminMessage.vue

@@ -0,0 +1,25 @@
+<script setup>
+import './sys-message.less'
+import { useInject } from '@/hooks'
+
+defineProps({
+  extra: Object,
+  data: Object
+})
+
+const { showUserInfoModal } = useInject()
+</script>
+
+<template>
+  <div class="im-message-sys-text">
+    <div class="sys-text">
+
+      <template v-for="(user, index) in extra.members" :key="index">
+        <a>{{ user.nickname }}</a>
+        <em v-show="index < extra.members.length - 1">、</em>
+      </template>
+
+      <span>已成为管理员</span>
+    </div>
+  </div>
+</template>

src/components/talk/message/system/SysGroupCancelMutedMessage.vue

@@ -13,7 +13,7 @@ defineProps({
 <template>
   <div class="im-message-sys-text">
     <div class="sys-text">
-      <a @click="showUserInfoModal(extra.owner_id)">
+      <a >
         {{ extra.owner_name }}
       </a>
 

src/components/talk/message/system/SysGroupCreateMessage.vue

@@ -13,14 +13,15 @@ const { showUserInfoModal } = useInject()
 <template>
   <div class="im-message-sys-text">
     <div class="sys-text">
-      <a @click="showUserInfoModal(extra.owner_id)">
+      
+      <a >
         {{ extra.owner_name }}
       </a>
 
       <span>创建了群聊，并邀请了</span>
 
       <template v-for="(user, index) in extra.members" :key="index">
-        <a @click="showUserInfoModal(user.user_id)">{{ user.nickname }}</a>
+        <a >{{ user.nickname }}</a>
         <em v-show="index < extra.members.length - 1">、</em>
       </template>
     </div>

src/components/talk/message/system/SysGroupDismissed.vue

@@ -0,0 +1,19 @@
+<script setup>
+import './sys-message.less'
+import { useInject } from '@/hooks'
+
+const { showUserInfoModal } = useInject()
+
+defineProps({
+  extra: Object,
+  data: Object
+})
+</script>
+
+<template>
+  <div class="im-message-sys-text">
+    <div class="sys-text">
+      <span>{{ extra.content }}</span>
+    </div>
+  </div>
+</template>

src/components/talk/message/system/SysGroupInfoChangeMessage.vue

@@ -0,0 +1,25 @@
+<script setup>
+import './sys-message.less'
+import { useInject } from '@/hooks'
+
+const { showUserInfoModal } = useInject()
+
+defineProps({
+  extra: Object,
+  data: Object
+})
+</script>
+
+<template>
+  <div class="im-message-sys-text">
+    <div class="sys-text">
+      <a>
+        <!-- {{ data.nickname }} -->
+          管理员
+      </a>
+      <!-- <span>修改群名为</span>
+      <span>"{{ extra.group_name }}"</span> -->
+      <span>修改了群信息</span>
+    </div>
+  </div>
+</template>

src/components/talk/message/system/SysGroupJoinMessage.vue

@@ -13,14 +13,14 @@ const { showUserInfoModal } = useInject()
 <template>
   <div class="im-message-sys-text">
     <div class="sys-text">
-      <a @click="showUserInfoModal(extra.owner_id)">
+      <a >
         {{ extra.owner_name }}
       </a>
 
       <span>邀请了</span>
 
       <template v-for="(user, index) in extra.members" :key="index">
-        <a @click="showUserInfoModal(user.user_id)">{{ user.nickname }}</a>
+        <a>{{ user.nickname }}</a>
         <em v-show="index < extra.members.length - 1">、</em>
       </template>
 

src/components/talk/message/system/SysGroupMemberCancelMutedMessage.vue

@@ -13,14 +13,14 @@ const { showUserInfoModal } = useInject()
 <template>
   <div class="im-message-sys-text">
     <div class="sys-text">
-      <a @click="showUserInfoModal(extra.owner_id)">
+      <a >
         {{ extra.owner_name }}
       </a>
 
       <span>解除了</span>
 
       <template v-for="(user, index) in extra.members" :key="index">
-        <a @click="showUserInfoModal(user.user_id)">{{ user.nickname }}</a>
+        <a >{{ user.nickname }}</a>
         <em v-show="index < extra.members.length - 1">、</em>
       </template>
 

src/components/talk/message/system/SysGroupMemberKickedMessage.vue

@@ -13,18 +13,18 @@ const { showUserInfoModal } = useInject()
 <template>
   <div class="im-message-sys-text">
     <div class="sys-text">
-      <a @click="showUserInfoModal(extra.owner_id)">
+      <a>
         {{ extra.owner_name }}
       </a>
 
       <span>将</span>
 
       <template v-for="(user, index) in extra.members" :key="index">
-        <a @click="showUserInfoModal(user.user_id)">{{ user.nickname }}</a>
+        <a>{{ user.nickname }}</a>
         <em v-show="index < extra.members.length - 1">、</em>
       </template>
 
-      <span>踢出群聊</span>
+      <span>移出群聊</span>
     </div>
   </div>
 </template>

src/components/talk/message/system/SysGroupMemberMutedMessage.vue

@@ -13,14 +13,14 @@ const { showUserInfoModal } = useInject()
 <template>
   <div class="im-message-sys-text">
     <div class="sys-text">
-      <a @click="showUserInfoModal(extra.owner_id)">
+      <a>
         {{ extra.owner_name }}
       </a>
 
       <span>设置了</span>
 
       <template v-for="(user, index) in extra.members" :key="index">
-        <a @click="showUserInfoModal(user.user_id)">{{ user.nickname }}</a>
+        <a>{{ user.nickname }}</a>
         <em v-show="index < extra.members.length - 1">、</em>
       </template>
 

src/components/talk/message/system/SysGroupMemberQuitMessage.vue

@@ -13,7 +13,7 @@ const { showUserInfoModal } = useInject()
 <template>
   <div class="im-message-sys-text">
     <div class="sys-text">
-      <a @click="showUserInfoModal(extra.owner_id)">
+      <a >
         {{ extra.owner_name }}
       </a>
 

src/components/talk/message/system/SysGroupMemberRemovedMessage.vue

@@ -0,0 +1,23 @@
+<script setup>
+import './sys-message.less'
+import { useInject } from '@/hooks'
+
+const { showUserInfoModal } = useInject()
+
+defineProps({
+  extra: Object,
+  data: Object,
+})
+</script>
+
+<template>
+  <div class="im-message-sys-text">
+    <div class="sys-text">
+      <template v-for="(user, index) in extra?.members" :key="index">
+        <a >{{ user.nickname }}</a>
+        <em v-show="index < extra.members.length - 1">、</em>
+      </template>
+      <span>已离开此群</span>
+    </div>
+  </div>
+</template>

src/components/talk/message/system/SysGroupMutedMessage.vue

@@ -13,7 +13,7 @@ const { showUserInfoModal } = useInject()
 <template>
   <div class="im-message-sys-text">
     <div class="sys-text">
-      <a @click="showUserInfoModal(extra.owner_id)">
+      <a >
         {{ extra.owner_name }}
       </a>
 

src/components/talk/message/system/SysGroupTransferMessage.vue

@@ -13,9 +13,9 @@ const { showUserInfoModal } = useInject()
 <template>
   <div class="im-message-sys-text">
     <div class="sys-text">
-      <a @click="showUserInfoModal(extra.old_owner_id)">{{ extra.old_owner_name }}</a>
+      <a >{{ extra.old_owner_name }}</a>
       <span>将群主转让给</span>
-      <a @click="showUserInfoModal(extra.new_owner_id)">{{ extra.new_owner_name }}</a>
+      <a >{{ extra.new_owner_name }}</a>
     </div>
   </div>
 </template>

src/components/talk/message/system/sys-message.less

@@ -10,7 +10,6 @@
     padding: 0 8px;
     word-wrap: break-word;
     color: #979191;
-    user-select: none;
     font-weight: 300;
     display: inline-block;
     border-radius: 3px;
@@ -23,13 +22,11 @@
 
     a {
       color: #939596;
-      cursor: pointer;
+    
       font-size: 12px;
       font-weight: 400;
 
-      &:hover {
+      
-        color: #1890ff;
-      }
     }
   }
 }