Compare commits

..

No commits in common. "main" and "main-backup" have entirely different histories.

174 changed files with 4243 additions and 21617 deletions
.env.env.electron.env.production.eslintrc.cjs.gitignoreREADME.md
electron
env
index.htmlpackage.jsonpnpm-lock.yaml
src

8
.env Normal file
View File

@ -0,0 +1,8 @@
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"

6
.env.electron Normal file
View File

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

7
.env.production Normal file
View File

@ -0,0 +1,7 @@
# just a flag
ENV = 'production'
VITE_BASE=/
VITE_ROUTER_MODE=history
VITE_BASE_API=https://xxxx.xxx.com
VITE_SOCKET_API=wss://xxxx.xxxx.com

23
.eslintrc.cjs Normal file
View File

@ -0,0 +1,23 @@
/* 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"
}
}

2
.gitignore vendored
View File

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

143
README.md
View File

@ -1,104 +1,87 @@
# IM - 在线即时通讯应用 # Lumen IM 即时聊天
IM 是一个基于 Vue 3 开发的现代化在线即时通讯应用,提供实时聊天、消息管理、笔记等功能。 <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">
## 功能特性 ### 项目介绍
- 📱 实时聊天:支持一对一即时通讯 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 ```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 配置信息
```bash ```env
# 测试环境 VITE_BASE_API=http://127.0.0.1:8503
pnpm dev:test VITE_SOCKET_API=ws://127.0.0.1:8504
# 生产环境
pnpm dev:prod
``` ```
### 打包构建 ###### 关于 Nginx 的一些配置
```bash ```nginx
# 测试环境构建 server {
pnpm build:test listen 80;
server_name www.yourdomain.com;
# 生产环境构建 root /project-path/dist;
pnpm build:prod index index.html;
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

92
electron/main.js Normal file
View File

@ -0,0 +1,92 @@
// 控制应用生命周期和创建原生浏览器窗口的模组
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)
})

46
electron/preload.js Normal file
View File

@ -0,0 +1,46 @@
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])
}
})

16
env/.env.prod vendored
View File

@ -1,16 +0,0 @@
# just a flag
ENV = 'production'
VITE_BASE=/
VITE_ROUTER_MODE=history
VUE_APP_PREVIEW=false
VUE_APP_WEBSITE_NAME=""
# baseUrl
VITE_BASE_API = 'https://chat.szjixun.cn' #体制内
#VITE_SOCKET_API
VITE_SOCKET_API = 'wss://chat.szjixun.cn' #体制内
# EPRAPI baseUrl
VITE_EPR_BASEURL = 'https://erpapi.fontree.cn' #体制内
# 文档查看器
VITE_PAGE_URL = https://chat-pc.szjixun.cn #体制内

16
env/.env.prodOut vendored
View File

@ -1,16 +0,0 @@
# just a flag
ENV = 'production'
VITE_BASE=/
VITE_ROUTER_MODE=history
VUE_APP_PREVIEW=false
VUE_APP_WEBSITE_NAME=""
# baseUrl
VITE_BASE_API = 'https://chat-out.szjixun.cn' #体制外
#VITE_SOCKET_API
VITE_SOCKET_API = 'wss://chat-out.szjixun.cn' #体制外
# EPRAPI baseUrl
VITE_EPR_BASEURL = 'https://erpapi-out.szjixun.cn' #体制外
# 文档查看器
VITE_PAGE_URL = https://chat-pc-out.szjixun.cn #体制外

12
env/.env.test vendored
View File

@ -1,12 +0,0 @@
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=""

View File

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

View File

@ -1,60 +1,33 @@
{ {
"name": "IM", "name": "LumenIM",
"private": true, "private": true,
"version": "0.0.0", "version": "0.0.0",
"type": "module", "main": "electron/main.js",
"scripts": { "scripts": {
"dev:test": "vite --mode test --port 5273", "dev": "vite --mode development --port 5273",
"dev:prod": "vite --mode prod --port 5273", "build": "vite build",
"dev:prod:out": "vite --mode prodOut --port 5273",
"build:test": "vite build --mode test",
"build:prod": "vite build --mode prod",
"build:prod:out": "vite build --mode prodOut",
"preview": "vite preview", "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", "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", "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
"format": "prettier --write src/" "format": "prettier --write src/"
}, },
"dependencies": { "dependencies": {
"@ant-design/icons-vue": "^7.0.1",
"@floating-ui/dom": "^1.7.2",
"@highlightjs/vue-plugin": "^2.1.0", "@highlightjs/vue-plugin": "^2.1.0",
"@iconify-json/ion": "^1.2.3",
"@kangc/v-md-editor": "^2.3.18", "@kangc/v-md-editor": "^2.3.18",
"@onlyoffice/document-editor-vue": "^1.5.0",
"@soerenmartius/vue3-clipboard": "^0.1.2",
"@tiptap/core": "^2.23.1",
"@tiptap/extension-blockquote": "^2.23.1",
"@tiptap/extension-emoji": "^2.23.1",
"@tiptap/extension-image": "^2.23.1",
"@tiptap/extension-link": "^2.23.1",
"@tiptap/extension-mention": "^2.23.1",
"@tiptap/extension-placeholder": "^2.23.1",
"@tiptap/pm": "^2.23.1",
"@tiptap/starter-kit": "^2.23.1",
"@tiptap/vue-3": "^2.23.1",
"@vicons/fluent": "^0.13.0",
"@vicons/ionicons4": "^0.13.0",
"@vicons/ionicons5": "^0.13.0",
"@vueup/vue-quill": "^1.2.0", "@vueup/vue-quill": "^1.2.0",
"@vueuse/core": "^10.7.0", "@vueuse/core": "^10.7.0",
"@vueuse/rxjs": "^13.4.0",
"ant-design-vue": "^4.2.6",
"axios": "^1.6.2", "axios": "^1.6.2",
"dayjs": "^1.11.13",
"dexie": "^4.0.11",
"highlight.js": "^11.5.0", "highlight.js": "^11.5.0",
"js-audio-recorder": "^1.0.7", "js-audio-recorder": "^1.0.7",
"lodash-es": "^4.17.21",
"pinia": "^2.1.7", "pinia": "^2.1.7",
"pinia-plugin-persistedstate": "^3.2.0", "pinia-plugin-persistedstate": "^3.2.0",
"pnpm": "^10.10.0",
"quill": "^1.3.7", "quill": "^1.3.7",
"quill-image-uploader": "^1.3.0", "quill-image-uploader": "^1.3.0",
"quill-mention": "^4.1.0", "quill-mention": "^4.1.0",
"rxjs": "^7.8.2",
"sortablejs": "^1.15.6",
"viewerjs": "^1.11.7",
"vue": "^3.3.11", "vue": "^3.3.11",
"vue-cropper": "^1.1.1", "vue-cropper": "^1.1.1",
"vue-router": "^4.2.5", "vue-router": "^4.2.5",
@ -64,41 +37,44 @@
}, },
"devDependencies": { "devDependencies": {
"@icon-park/vue-next": "^1.4.2", "@icon-park/vue-next": "^1.4.2",
"@rushstack/eslint-patch": "^1.3.3",
"@tsconfig/node18": "^18.2.2", "@tsconfig/node18": "^18.2.2",
"@types/node": "^18.18.5", "@types/node": "^18.18.5",
"@types/vue": "^2.0.0", "@types/vue": "^2.0.0",
"@unocss/reset": "^66.1.1",
"@vitejs/plugin-vue": "^4.4.0", "@vitejs/plugin-vue": "^4.4.0",
"@vitejs/plugin-vue-jsx": "^3.0.2", "@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", "@vue/tsconfig": "^0.4.0",
"concurrently": "^7.3.0", "concurrently": "^7.3.0",
"cross-env": "^7.0.3", "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": "^4.2.0",
"less-loader": "^11.1.3", "less-loader": "^11.1.3",
"naive-ui": "^2.35.0", "naive-ui": "^2.35.0",
"npm-run-all2": "^6.1.1", "npm-run-all2": "^6.1.1",
"prettier": "^3.1.0", "prettier": "^3.1.0",
"sass": "^1.88.0",
"typescript": "~5.2.0", "typescript": "~5.2.0",
"unocss": "0.58.0", "vite": "^4.5.1",
"unplugin-auto-import": "^19.2.0",
"unplugin-vue-components": "^28.5.0",
"vite": "^6.3.5",
"vite-plugin-compression": "^0.5.1", "vite-plugin-compression": "^0.5.1",
"vite-plugin-vue-devtools": "^7.7.6",
"vue-tsc": "^1.8.25", "vue-tsc": "^1.8.25",
"wait-on": "^6.0.1" "wait-on": "^6.0.1"
}, },
"build": { "build": {
"appId": "com.gzydong.im", "appId": "com.gzydong.lumenim",
"productName": "IM", "productName": "LumenIM",
"copyright": "Copyright © 2023 IM", "copyright": "Copyright © 2023 LumenIM",
"mac": { "mac": {
"category": "public.app-category.utilities", "category": "public.app-category.utilities",
"icon": "build/icons/-im-mac.png" "icon": "build/icons/lumen-im-mac.png"
}, },
"win": { "win": {
"icon": "build/icons/-im-mac.png", "icon": "build/icons/lumen-im-mac.png",
"target": [ "target": [
{ {
"target": "nsis" "target": "nsis"
@ -108,12 +84,20 @@
"nsis": { "nsis": {
"oneClick": false, "oneClick": false,
"allowToChangeInstallationDirectory": true, "allowToChangeInstallationDirectory": true,
"installerIcon": "build/icons/-im-win.ico", "installerIcon": "build/icons/lumen-im-win.ico",
"uninstallerIcon": "build/icons/-im-win.ico", "uninstallerIcon": "build/icons/lumen-im-win.ico",
"installerHeaderIcon": "build/icons/-im-win.ico", "installerHeaderIcon": "build/icons/lumen-im-win.ico",
"createDesktopShortcut": true, "createDesktopShortcut": true,
"createStartMenuShortcut": true, "createStartMenuShortcut": true,
"shortcutName": "lumeim-icon" "shortcutName": "lumeim-icon"
},
"files": [
"dist/**/*",
"electron/**/*"
],
"directories": {
"buildResources": "assets",
"output": "dist_electron"
} }
} }
} }

File diff suppressed because it is too large Load Diff

View File

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

View File

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

View File

@ -9,10 +9,7 @@ export const ServeGetTalkList = (data = {}) => {
export const ServeCreateTalkList = (data = {}) => { export const ServeCreateTalkList = (data = {}) => {
return post('/api/v1/talk/create', 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 = {}) => { export const ServeDeleteTalkList = (data = {}) => {
return post('/api/v1/talk/delete', data) return post('/api/v1/talk/delete', data)
@ -35,7 +32,7 @@ export const ServeTalkRecords = (data = {}) => {
// 获取转发会话记录详情列表服务接口 // 获取转发会话记录详情列表服务接口
export const ServeGetForwardRecords = (data = {}) => { export const ServeGetForwardRecords = (data = {}) => {
return get('/api/v1/talk/records/forward/v2', data) return get('/api/v1/talk/records/forward', data)
} }
// 对话列表置顶服务接口 // 对话列表置顶服务接口
@ -89,33 +86,3 @@ export const ServeSendVote = (data = {}) => {
export const ServeConfirmVoteHandle = (data = {}) => { export const ServeConfirmVoteHandle = (data = {}) => {
return post('/api/v1/talk/message/vote/handle', 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)
}
// 检测是否需要加好友
export const GetContactFriendList = (data) => {
return post('/api/v1/contact/friend/list', data)
}
// 搜索好友
export const GetFriendList = (data) => {
return post('/api/v1/contact/friend/search', data)
}

View File

@ -1,22 +0,0 @@
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'),
}

View File

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

View File

@ -77,11 +77,6 @@ export const ServeEditGroupNotice = (data) => {
return post('/api/v1/group/notice/edit', 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) => { export const ServeGetGroupApplyList = (data) => {
return get('/api/v1/group/apply/list', data) return get('/api/v1/group/apply/list', data)
} }

View File

@ -1,18 +0,0 @@
// 使用 `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 };

View File

@ -1,38 +0,0 @@
import { post, get, upload } from '@/utils/request'
//ES搜索-主页搜索什么都有、指定用户、指定群、群与用户概览
export const ServeSeachQueryAll = (data = {}) => {
return post('/api/v1/elasticsearch/query-all', data)
// return post('/api/v1/elasticsearch/query-all/v2', data)
}
// ES搜索用户数据
export const ServeQueryUser = (data) => {
return post('/api/v1/elasticsearch/query-user', 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)
}

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -1,68 +0,0 @@
/* 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;
}

Binary file not shown.

Before

(image error) Size: 2.0 KiB

Binary file not shown.

Before

(image error) Size: 2.0 KiB

Binary file not shown.

Before

(image error) Size: 530 B

Binary file not shown.

Before

(image error) Size: 657 B

Binary file not shown.

Before

(image error) Size: 6.7 KiB

Binary file not shown.

Before

(image error) Size: 337 B

Binary file not shown.

Before

(image error) Size: 486 B

Binary file not shown.

Before

(image error) Size: 473 B

Binary file not shown.

Before

(image error) Size: 1.2 KiB

Binary file not shown.

Before

(image error) Size: 396 B

Binary file not shown.

Before

(image error) Size: 2.3 KiB

Binary file not shown.

Before

(image error) Size: 1.2 KiB

Binary file not shown.

Before

(image error) Size: 2.2 KiB

Binary file not shown.

Before

(image error) Size: 607 B

Binary file not shown.

Before

(image error) Size: 5.5 KiB

Binary file not shown.

Before

(image error) Size: 5.6 KiB

Binary file not shown.

Before

(image error) Size: 6.3 KiB

Binary file not shown.

Before

(image error) Size: 5.1 KiB

Binary file not shown.

Before

(image error) Size: 163 B

Binary file not shown.

Before

(image error) Size: 286 B

Binary file not shown.

Before

(image error) Size: 1.2 KiB

Binary file not shown.

Before

(image error) Size: 436 B

Binary file not shown.

Before

(image error) Size: 1.8 KiB

Binary file not shown.

Before

(image error) Size: 1.5 KiB

Binary file not shown.

Before

(image error) Size: 2.9 KiB

Binary file not shown.

Before

(image error) Size: 684 B

Binary file not shown.

Before

(image error) Size: 3.3 KiB

Binary file not shown.

Before

(image error) Size: 3.3 KiB

Binary file not shown.

Before

(image error) Size: 26 KiB

Binary file not shown.

Before

(image error) Size: 118 KiB

Binary file not shown.

Before

(image error) Size: 4.3 KiB

Binary file not shown.

Before

(image error) Size: 4.5 KiB

Binary file not shown.

Before

(image error) Size: 4.5 KiB

Binary file not shown.

Before

(image error) Size: 1.3 KiB

View File

@ -1,144 +0,0 @@
<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
// 42px32px18px10px
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>

View File

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

View File

@ -1,20 +0,0 @@
<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>

View File

@ -1,156 +0,0 @@
<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>

View File

@ -1,49 +0,0 @@
<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>

View File

@ -1,32 +0,0 @@
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
})
})
}

File diff suppressed because it is too large Load Diff

View File

@ -1,116 +1,81 @@
<script lang="ts" setup> <script lang="ts" setup>
// Quill
import '@vueup/vue-quill/dist/vue-quill.snow.css' import '@vueup/vue-quill/dist/vue-quill.snow.css'
//
import 'quill-image-uploader/dist/quill.imageUploader.min.css' import 'quill-image-uploader/dist/quill.imageUploader.min.css'
//
import '@/assets/css/editor-mention.less' import '@/assets/css/editor-mention.less'
// Vue
import { reactive, watch, ref, markRaw, computed, onMounted, onUnmounted } from 'vue' import { reactive, watch, ref, markRaw, computed, onMounted, onUnmounted } from 'vue'
// Naive UI
import { NPopover } from 'naive-ui' import { NPopover } from 'naive-ui'
//
import { 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' } from '@icon-park/vue-next'
// Quill
import { QuillEditor, Quill } from '@vueup/vue-quill' import { QuillEditor, Quill } from '@vueup/vue-quill'
//
import ImageUploader from 'quill-image-uploader' import ImageUploader from 'quill-image-uploader'
//
import EmojiBlot from './formats/emoji' import EmojiBlot from './formats/emoji'
//
import QuoteBlot from './formats/quote' import QuoteBlot from './formats/quote'
//
import 'quill-mention' import 'quill-mention'
//
import { useDialogueStore, useEditorDraftStore } from '@/store' import { useDialogueStore, useEditorDraftStore } from '@/store'
//
import { deltaToMessage, deltaToString, isEmptyDelta } from './util' import { deltaToMessage, deltaToString, isEmptyDelta } from './util'
//
import { getImageInfo } from '@/utils/functions' import { getImageInfo } from '@/utils/functions'
//
import { EditorConst } from '@/constant/event-bus' import { EditorConst } from '@/constant/event-bus'
//
import { emitCall } from '@/utils/common' import { emitCall } from '@/utils/common'
//
import { defAvatar } from '@/constant/default' import { defAvatar } from '@/constant/default'
// import MeEditorVote from './MeEditorVote.vue'
import MeEditorVote from './MeEditorVote.vue' // import MeEditorEmoticon from './MeEditorEmoticon.vue'
import MeEditorEmoticon from './MeEditorEmoticon.vue' // import MeEditorCode from './MeEditorCode.vue'
import MeEditorCode from './MeEditorCode.vue' // import MeEditorRecorder from './MeEditorRecorder.vue'
import MeEditorRecorder from './MeEditorRecorder.vue' //
// API
import { ServeUploadImage } from '@/api/upload' import { ServeUploadImage } from '@/api/upload'
import { uploadImg } from '@/api/upload' import { uploadImg } from '@/api/upload'
// 线
import { useEventBus } from '@/hooks' 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 emit = defineEmits(['editor-event'])
//
const dialogueStore = useDialogueStore() const dialogueStore = useDialogueStore()
// 稿
const editorDraftStore = useEditorDraftStore() const editorDraftStore = useEditorDraftStore()
// props
const props = defineProps({ const props = defineProps({
vote: { vote: {
type: Boolean, type: Boolean,
default: false // default: false
}, },
members: { members: {
default: () => [] // @ default: () => []
} }
}) })
//
const editor = ref() const editor = ref()
// Quill
const getQuill = () => { const getQuill = () => {
return editor.value?.getQuill() return editor.value?.getQuill()
} }
//
const getQuillSelectionIndex = () => { const getQuillSelectionIndex = () => {
let quill = getQuill() let quill = getQuill()
return (quill.getSelection() || {}).index || quill.getLength() return (quill.getSelection() || {}).index || quill.getLength()
} }
//
const indexName = computed(() => dialogueStore.index_name) const indexName = computed(() => dialogueStore.index_name)
//
const isShowEditorVote = ref(false) const isShowEditorVote = ref(false)
//
const isShowEditorCode = ref(false) const isShowEditorCode = ref(false)
//
const isShowEditorRecorder = ref(false) const isShowEditorRecorder = ref(false)
// DOM
const fileImageRef = ref() const fileImageRef = ref()
// DOM
const uploadFileRef = ref() const uploadFileRef = ref()
//
const emoticonRef = ref() const emoticonRef = ref()
//
const editorOption = { const editorOption = {
debug: false, debug: false,
modules: { modules: {
toolbar: false, // toolbar: false,
clipboard: { clipboard: {
// //
matchers: [[Node.ELEMENT_NODE, onClipboardMatcher]] matchers: [[Node.ELEMENT_NODE, onClipboardMatcher]]
}, },
@ -118,22 +83,19 @@ const editorOption = {
bindings: { bindings: {
enter: { enter: {
key: 13, key: 13,
handler: onSendMessage // Enter handler: onSendMessage
} }
} }
}, },
//
imageUploader: { imageUploader: {
upload: onEditorUpload upload: onEditorUpload
}, },
// @
mention: { mention: {
allowedChars: /^[\u4e00-\u9fa5]*$/, // allowedChars: /^[\u4e00-\u9fa5]*$/,
mentionDenotationChars: ['@'], // @ mentionDenotationChars: ['@'],
positioningStrategy: 'fixed', // positioningStrategy: 'fixed',
// @
renderItem: (data: any) => { renderItem: (data: any) => {
const el = document.createElement('div') const el = document.createElement('div')
el.className = 'ed-member-item' el.className = 'ed-member-item'
@ -141,18 +103,16 @@ const editorOption = {
el.innerHTML += `<span class="nickname">${data.nickname}</span>` el.innerHTML += `<span class="nickname">${data.nickname}</span>`
return el return el
}, },
//
source: function (searchTerm: string, renderList: any) { source: function (searchTerm: string, renderList: any) {
console.log("source")
if (!props.members.length) { if (!props.members.length) {
return renderList([]) return renderList([])
} }
let list = [ let list = [
{ id: 0, nickname: '所有人', avatar: defAvatar, value: '所有人' },
...props.members ...props.members
] as any ]
if((dialogueStore.groupInfo as any).is_manager){
list.unshift({ id: 0, nickname: '所有人', avatar: defAvatar, value: '所有人' })
}
const items = list.filter( const items = list.filter(
(item: any) => item.nickname.toLowerCase().indexOf(searchTerm) !== -1 (item: any) => item.nickname.toLowerCase().indexOf(searchTerm) !== -1
) )
@ -163,73 +123,66 @@ if((dialogueStore.groupInfo as any).is_manager){
} }
}, },
placeholder: '按Enter发送 / Shift+Enter 换行', placeholder: '按Enter发送 / Shift+Enter 换行',
theme: 'snow' // 使snow theme: 'snow'
} }
//
const navs = reactive([ const navs = reactive([
{ {
title: '图片', title: '图片',
icon: markRaw(Pic), icon: markRaw(Pic),
show: true, show: true,
click: () => { click: () => {
fileImageRef.value.click() // fileImageRef.value.click()
} }
}, },
{ {
title: '件', title: '件',
icon: markRaw(FolderUpload), icon: markRaw(FolderUpload),
show: true, show: true,
click: () => { click: () => {
uploadFileRef.value.click() // uploadFileRef.value.click()
} }
}, },
// {
// { title: '代码',
// title: '', icon: markRaw(SourceCode),
// icon: markRaw(SourceCode), show: true,
// show: true, click: () => {
// click: () => { isShowEditorCode.value = true
// isShowEditorCode.value = true }
// } },
// }, {
// { title: '语音消息',
// title: '', icon: markRaw(IconVoice),
// icon: markRaw(IconVoice), show: true,
// show: true, click: () => {
// click: () => { isShowEditorRecorder.value = true
// isShowEditorRecorder.value = true }
// } },
// }, {
// { title: '地理位置',
// title: '', icon: markRaw(Local),
// icon: markRaw(Local), show: true,
// show: true, click: () => {}
// click: () => {} },
// }, {
// { title: '群投票',
// title: '', icon: markRaw(Ranking),
// icon: markRaw(Ranking), show: computed(() => props.vote),
// show: computed(() => props.vote), click: () => {
// click: () => { isShowEditorVote.value = true
// isShowEditorVote.value = true }
// } },
// }, {
// { title: '历史记录',
// title: '', icon: markRaw(History),
// icon: markRaw(History), show: true,
// show: true, click: () => {
// click: () => { emit('editor-event', emitCall('history_event'))
// emit('editor-event', emitCall('history_event')) }
// } }
// }
]) ])
/**
* 上传图片函数
* @param file 文件对象
* @returns Promise成功时返回图片URL
*/
function onUploadImage(file: File) { function onUploadImage(file: File) {
return new Promise((resolve) => { return new Promise((resolve) => {
let image = new Image() let image = new Image()
@ -237,44 +190,35 @@ function onUploadImage(file: File) {
image.onload = () => { image.onload = () => {
const form = new FormData() const form = new FormData()
form.append('file', file) form.append('file', file)
form.append("source", "fonchain-chat"); // form.append("source", "fonchain-chat");
// URL // form.append('width', image.width.toString())
// form.append('height', image.height.toString())
form.append("urlParam", `width=${image.width}&height=${image.height}`); form.append("urlParam", `width=${image.width}&height=${image.height}`);
// API
uploadImg(form).then(({ code, data, message }) => { uploadImg(form).then(({ code, data, message }) => {
if (code == 0) { if (code == 0) {
resolve(data.ori_url) // URL resolve(data.ori_url)
} else { } else {
resolve('') resolve('')
window['$message'].error(message) // window['$message'].error(message)
} }
}) })
} }
}) })
} }
/**
* 编辑器上传处理函数
* @param file 要上传的文件
* @returns Promise
*/
function onEditorUpload(file: File) { function onEditorUpload(file: File) {
async function fn(file: File, resolve: Function, reject: Function) { async function fn(file: File, resolve: Function, reject: Function) {
if (file.type.indexOf('image/') === 0) { if (file.type.indexOf('image/') === 0) {
// 使
return resolve(await onUploadImage(file)) return resolve(await onUploadImage(file))
} }
reject() reject()
//
if (file.type.indexOf('video/') === 0) { if (file.type.indexOf('video/') === 0) {
//
let fn = emitCall('video_event', file, () => {}) let fn = emitCall('video_event', file, () => {})
emit('editor-event', fn) emit('editor-event', fn)
} else { } else {
//
let fn = emitCall('file_event', file, () => {}) let fn = emitCall('file_event', file, () => {})
emit('editor-event', fn) emit('editor-event', fn)
} }
@ -285,40 +229,29 @@ function onEditorUpload(file: File) {
}) })
} }
/**
* 投票事件处理
* @param data 投票数据
*/
function onVoteEvent(data: any) { function onVoteEvent(data: any) {
const msg = emitCall('vote_event', data, (ok: boolean) => { const msg = emitCall('vote_event', data, (ok: boolean) => {
if (ok) { if (ok) {
isShowEditorVote.value = false // isShowEditorVote.value = false
} }
}) })
emit('editor-event', msg) emit('editor-event', msg)
} }
/**
* 表情事件处理
* @param data 表情数据
*/
function onEmoticonEvent(data: any) { function onEmoticonEvent(data: any) {
emoticonRef.value.setShow(false) // emoticonRef.value.setShow(false)
if (data.type == 1) { if (data.type == 1) {
//
const quill = getQuill() const quill = getQuill()
let index = getQuillSelectionIndex() let index = getQuillSelectionIndex()
//
if (index == 1 && quill.getLength() == 1 && quill.getText(0, 1) == '\n') { if (index == 1 && quill.getLength() == 1 && quill.getText(0, 1) == '\n') {
quill.deleteText(0, 1) quill.deleteText(0, 1)
index = 0 index = 0
} }
if (data.img) { if (data.img) {
//
quill.insertEmbed(index, 'emoji', { quill.insertEmbed(index, 'emoji', {
alt: data.value, alt: data.value,
src: data.img, src: data.img,
@ -326,87 +259,74 @@ function onEmoticonEvent(data: any) {
height: '24px' height: '24px'
}) })
} else { } else {
//
quill.insertText(index, data.value) quill.insertText(index, data.value)
} }
//
quill.setSelection(index + 1, 0, 'user') quill.setSelection(index + 1, 0, 'user')
} else { } else {
//
let fn = emitCall('emoticon_event', data.value, () => {}) let fn = emitCall('emoticon_event', data.value, () => {})
emit('editor-event', fn) emit('editor-event', fn)
} }
} }
/**
* 代码事件处理
* @param data 代码数据
*/
function onCodeEvent(data: any) { function onCodeEvent(data: any) {
const msg = emitCall('code_event', data, (ok: boolean) => { const msg = emitCall('code_event', data, (ok: boolean) => {
isShowEditorCode.value = false // isShowEditorCode.value = false
}) })
emit('editor-event', msg) emit('editor-event', msg)
} }
/**
* 文件上传处理
* @param e 上传事件对象
*/
async function onUploadFile(e: any) { async function onUploadFile(e: any) {
let file = e.target.files[0] let file = e.target.files[0]
e.target.value = null // input e.target.value = null
console.log("文件类型"+file.type) console.log("文件类型"+file.type)
if (file.type.indexOf('image/') === 0) { if (file.type.indexOf('image/') === 0) {
console.log("进入图片") console.log("进入图片")
// - const quill = getQuill()
let fn = emitCall('image_event', file, () => {}) let index = getQuillSelectionIndex()
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 return
} }
if (file.type.indexOf('video/') === 0) { if (file.type.indexOf('video/') === 0) {
console.log("进入视频") console.log("进入视频")
//
let fn = emitCall('video_event', file, () => {}) let fn = emitCall('video_event', file, () => {})
emit('editor-event', fn) emit('editor-event', fn)
} else { } else {
console.log("进入其他") console.log("进入其他")
//
let fn = emitCall('file_event', file, () => {}) let fn = emitCall('file_event', file, () => {})
emit('editor-event', fn) emit('editor-event', fn)
} }
} }
/**
* 录音事件处理
* @param file 录音文件
*/
function onRecorderEvent(file: any) { function onRecorderEvent(file: any) {
emit('editor-event', emitCall('file_event', file)) 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) { function onClipboardMatcher(node: any, Delta) {
const ops: any[] = [] const ops: any[] = []
Delta.ops.forEach((op) => { Delta.ops.forEach((op) => {
// //
if (op.insert && typeof op.insert === 'string') { if (op.insert && typeof op.insert === 'string') {
ops.push({ ops.push({
insert: op.insert, // insert: op.insert, //
attributes: {} // attributes: {} //
}) })
} else { } else {
ops.push(op) ops.push(op)
@ -417,15 +337,12 @@ function onClipboardMatcher(node: any, Delta) {
return Delta return Delta
} }
/**
* 发送消息处理
* 根据编辑器内容类型发送不同类型的消息
*/
function onSendMessage() { function onSendMessage() {
var delta = getQuill().getContents() var delta = getQuill().getContents()
let data = deltaToMessage(delta) // Delta let data = deltaToMessage(delta)
if (data.items.length === 0||!data.items[0].content.trim()) {
return // if (data.items.length === 0) {
return
} }
switch (data.msgType) { switch (data.msgType) {
@ -434,72 +351,60 @@ function onSendMessage() {
return window['$message'].info('发送内容超长,请分条发送') return window['$message'].info('发送内容超长,请分条发送')
} }
//
emit( emit(
'editor-event', 'editor-event',
emitCall('text_event', data, (ok: any) => { emitCall('text_event', data, (ok: any) => {
ok && getQuill().setContents([], Quill.sources.USER) // ok && getQuill().setContents([], Quill.sources.USER)
}) })
) )
break break
case 3: // case 3: //
//
emit( emit(
'editor-event', 'editor-event',
emitCall( emitCall(
'image_event', 'image_event',
{ ...getImageInfo(data.items[0].content), url: data.items[0].content, size: 10000 }, { ...getImageInfo(data.items[0].content), url: data.items[0].content, size: 10000 },
(ok: any) => { (ok: any) => {
ok && getQuill().setContents([]) // ok && getQuill().setContents([])
} }
) )
) )
break break
case 12: // case 12: //
//
emit( emit(
'editor-event', 'editor-event',
emitCall('mixed_event', data, (ok: any) => { emitCall('mixed_event', data, (ok: any) => {
ok && getQuill().setContents([]) // ok && getQuill().setContents([])
}) })
) )
break break
} }
} }
/**
* 编辑器内容改变时的处理
* 保存草稿并触发输入事件
*/
function onEditorChange() { function onEditorChange() {
let delta = getQuill().getContents() let delta = getQuill().getContents()
let text = deltaToString(delta) // Delta
let text = deltaToString(delta)
if (!isEmptyDelta(delta)) { if (!isEmptyDelta(delta)) {
// 稿store
editorDraftStore.items[indexName.value || ''] = JSON.stringify({ editorDraftStore.items[indexName.value || ''] = JSON.stringify({
text: text, text: text,
ops: delta.ops ops: delta.ops
}) })
} else { } else {
// 稿 // editorDraftStore.items
delete editorDraftStore.items[indexName.value || ''] delete editorDraftStore.items[indexName.value || '']
} }
//
emit('editor-event', emitCall('input_event', text)) emit('editor-event', emitCall('input_event', text))
} }
/**
* 加载编辑器草稿内容
* 当切换聊天对象时加载对应的草稿
*/
function loadEditorDraftText() { function loadEditorDraftText() {
if (!editor.value) return if (!editor.value) return
// DOM //
setTimeout(() => { setTimeout(() => {
hideMentionDom() // @ hideMentionDom()
const quill = getQuill() const quill = getQuill()
@ -510,47 +415,33 @@ function loadEditorDraftText() {
if (draft) { if (draft) {
quill.setContents(JSON.parse(draft)?.ops || []) quill.setContents(JSON.parse(draft)?.ops || [])
} else { } else {
quill.setContents([]) // 稿 quill.setContents([])
} }
//
const index = getQuillSelectionIndex() const index = getQuillSelectionIndex()
quill.setSelection(index, 0, 'user') quill.setSelection(index, 0, 'user')
}, 0) }, 0)
} }
/**
* 处理@成员事件
* @param data @成员数据
*/
function onSubscribeMention(data: any) { function onSubscribeMention(data: any) {
const mention = getQuill().getModule('mention') const mention = getQuill().getModule('mention')
// @
mention.insertItem({ id: data?.id, denotationChar: '@', value: data.value }, true) mention.insertItem({ id: data?.id, denotationChar: '@', value: data.value }, true)
} }
/**
* 处理引用事件
* @param data 引用数据
*/
function onSubscribeQuote(data: any) { function onSubscribeQuote(data: any) {
//
const delta = getQuill().getContents() const delta = getQuill().getContents()
if (delta.ops?.some((item: any) => item.insert.quote)) { if (delta.ops?.some((item: any) => item.insert.quote)) {
return // return
} }
const quill = getQuill() const quill = getQuill()
const index = getQuillSelectionIndex() const index = getQuillSelectionIndex()
//
quill.insertEmbed(0, 'quote', data) quill.insertEmbed(0, 'quote', data)
quill.setSelection(index + 1, 0, 'user') // quill.setSelection(index + 1, 0, 'user')
} }
/**
* 隐藏@成员DOM元素
*/
function hideMentionDom() { function hideMentionDom() {
let el = document.querySelector('.ql-mention-list-container') let el = document.querySelector('.ql-mention-list-container')
if (el) { if (el) {
@ -558,54 +449,27 @@ 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 }) watch(indexName, loadEditorDraftText, { immediate: true })
//
onMounted(() => { onMounted(() => {
loadEditorDraftText() loadEditorDraftText()
}) })
//
onUnmounted(() => { onUnmounted(() => {
hideMentionDom() hideMentionDom()
}) })
// 线
useEventBus([ 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> </script>
<template> <template>
<!-- 编辑器容器 -->
<section class="el-container editor"> <section class="el-container editor">
<section class="el-container is-vertical"> <section class="el-container is-vertical">
<!-- 工具栏区域 -->
<header class="el-header toolbar bdr-t"> <header class="el-header toolbar bdr-t">
<div class="tools"> <div class="tools">
<!-- 表情选择器弹出框 -->
<n-popover <n-popover
placement="top-start" placement="top-start"
trigger="click" trigger="click"
@ -625,7 +489,6 @@ useEventBus([
<MeEditorEmoticon @on-select="onEmoticonEvent" /> <MeEditorEmoticon @on-select="onEmoticonEvent" />
</n-popover> </n-popover>
<!-- 工具栏其他功能按钮 -->
<div <div
class="item pointer" class="item pointer"
v-for="nav in navs" v-for="nav in navs"
@ -639,7 +502,6 @@ useEventBus([
</div> </div>
</header> </header>
<!-- 编辑器主体区域 -->
<main class="el-main height100"> <main class="el-main height100">
<QuillEditor <QuillEditor
ref="editor" ref="editor"
@ -652,13 +514,11 @@ useEventBus([
</section> </section>
</section> </section>
<!-- 隐藏的文件上传表单 -->
<form enctype="multipart/form-data" style="display: none"> <form enctype="multipart/form-data" style="display: none">
<input type="file" ref="fileImageRef" accept="image/*" @change="onUploadFile" /> <input type="file" ref="fileImageRef" accept="image/*" @change="onUploadFile" />
<input type="file" ref="uploadFileRef" @change="onUploadFile" /> <input type="file" ref="uploadFileRef" @change="onUploadFile" />
</form> </form>
<!-- 条件渲染的功能组件 -->
<MeEditorVote v-if="isShowEditorVote" @close="isShowEditorVote = false" @submit="onVoteEvent" /> <MeEditorVote v-if="isShowEditorVote" @close="isShowEditorVote = false" @submit="onVoteEvent" />
<MeEditorCode <MeEditorCode
@ -676,7 +536,7 @@ useEventBus([
<style lang="less" scoped> <style lang="less" scoped>
.editor { .editor {
--tip-bg-color: rgb(241 241 241 / 90%); /* 提示背景颜色 */ --tip-bg-color: rgb(241 241 241 / 90%);
height: 100%; height: 100%;
@ -699,7 +559,7 @@ useEventBus([
user-select: none; user-select: none;
.tip-title { .tip-title {
display: none; /* 默认隐藏提示文字 */ display: none;
position: absolute; position: absolute;
top: 40px; top: 40px;
left: 0px; left: 0px;
@ -717,7 +577,7 @@ useEventBus([
&:hover { &:hover {
.tip-title { .tip-title {
display: block; /* 悬停时显示提示文字 */ display: block;
} }
} }
} }
@ -725,7 +585,6 @@ useEventBus([
} }
} }
/* 暗色模式样式调整 */
html[theme-mode='dark'] { html[theme-mode='dark'] {
.editor { .editor {
--tip-bg-color: #48484d; --tip-bg-color: #48484d;
@ -734,16 +593,13 @@ html[theme-mode='dark'] {
</style> </style>
<style lang="less"> <style lang="less">
/* 全局编辑器样式 */
#editor { #editor {
overflow: hidden; overflow: hidden;
} }
/* 编辑器主体区域样式 */
.ql-editor { .ql-editor {
padding: 8px; padding: 8px;
/* 滚动条样式 */
&::-webkit-scrollbar { &::-webkit-scrollbar {
width: 3px; width: 3px;
height: 3px; height: 3px;
@ -755,7 +611,6 @@ html[theme-mode='dark'] {
background-color: transparent; background-color: transparent;
} }
/* 悬停时显示滚动条 */
&:hover { &:hover {
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
background-color: var(--im-scrollbar-thumb); background-color: var(--im-scrollbar-thumb);
@ -763,7 +618,6 @@ html[theme-mode='dark'] {
} }
} }
/* 编辑器占位符样式 */
.ql-editor.ql-blank::before { .ql-editor.ql-blank::before {
font-family: font-family:
PingFang SC, PingFang SC,
@ -772,7 +626,6 @@ html[theme-mode='dark'] {
left: 8px; left: 8px;
} }
/* 编辑器中图片样式 */
.ql-snow .ql-editor img { .ql-snow .ql-editor img {
max-width: 100px; max-width: 100px;
border-radius: 3px; border-radius: 3px;
@ -780,7 +633,6 @@ html[theme-mode='dark'] {
margin: 0px 2px; margin: 0px 2px;
} }
/* 图片上传中样式 */
.image-uploading { .image-uploading {
display: flex; display: flex;
width: 100px; width: 100px;
@ -794,18 +646,15 @@ html[theme-mode='dark'] {
} }
} }
/* 表情符号样式 */
.ed-emoji { .ed-emoji {
background-color: unset !important; background-color: unset !important;
} }
/* 编辑器占位符样式 */
.ql-editor.ql-blank::before { .ql-editor.ql-blank::before {
font-style: unset; font-style: unset;
color: #b8b3b3; color: #b8b3b3;
} }
/* 引用卡片样式 */
.quote-card-content { .quote-card-content {
display: flex; display: flex;
background-color: #f6f6f6; background-color: #f6f6f6;
@ -842,7 +691,6 @@ html[theme-mode='dark'] {
} }
} }
/* 暗色模式下的样式调整 */
html[theme-mode='dark'] { html[theme-mode='dark'] {
.ql-editor.ql-blank::before { .ql-editor.ql-blank::before {
color: #57575a; color: #57575a;

View File

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

View File

@ -1,197 +0,0 @@
<template>
<div class="dropdown-menu" ref="dropdownMenuRef">
<n-virtual-list
ref="virtualListRef"
style="max-height: 240px"
:item-size="50"
:items="props.items"
>
<template #default="{ item }">
<button
:class="{ 'is-selected': props.items[selectedIndex] === item }"
@click="selectItem(item)"
>
<img :src="item.avatar" class="avatar" />
<span class="nickname">{{ item.nickname }}</span>
</button>
</template>
</n-virtual-list>
</div>
</template>
<script setup>
import { ref, watch, defineProps, defineExpose, onMounted, onUnmounted } from 'vue'
const props = defineProps({
items: {
type: Array,
required: true
},
command: {
type: Function,
required: true
}
})
const selectedIndex = ref(0)
const virtualListRef = ref(null)
const dropdownMenuRef = ref(null)
let observer = null
let isViewport = ref(true)
const handleIntersection = (entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
isViewport.value = true
//
} else {
isViewport.value = false
//
}
})
}
onMounted(() => {
observer = new IntersectionObserver(handleIntersection, {
root: null, // null
rootMargin: '0px',
threshold: 0.1 // 10%
})
if (dropdownMenuRef.value) {
observer.observe(dropdownMenuRef.value)
}
})
onUnmounted(() => {
if (observer && dropdownMenuRef.value) {
observer.unobserve(dropdownMenuRef.value)
observer.disconnect()
}
})
watch(
() => props.items,
() => {
selectedIndex.value = 0
}
)
const onKeyDown = ({ event }) => {
console.log('event', event)
if(!isViewport.value) return false
if (event.key === 'ArrowUp') {
upHandler()
return true
}
if (event.key === 'ArrowDown') {
downHandler()
return true
}
if (event.key === 'Enter') {
enterHandler()
return true
}
return false
}
const upHandler = () => {
selectedIndex.value =
(selectedIndex.value + props.items.length - 1) % props.items.length
virtualListRef.value?.scrollTo({ index: selectedIndex.value })
}
const downHandler = () => {
selectedIndex.value = (selectedIndex.value + 1) % props.items.length
virtualListRef.value?.scrollTo({ index: selectedIndex.value })
}
const enterHandler = () => {
selectItem(props.items[selectedIndex.value])
}
const selectItem = item => {
if (item) {
props.command({ id: item.id, label: item.nickname })
}
}
defineExpose({
onKeyDown
})
</script>
<style lang="scss">
.dropdown-menu {
background: var(--white, #fff);
border: 1px solid var(--gray-1, #e0e0e0);
border-radius: 0.7rem;
box-shadow: var(--shadow, 0 2px 12px 0 rgba(0, 0, 0, 0.1));
display: flex;
flex-direction: column;
gap: 0.1rem;
overflow: auto;
padding: 0.4rem;
position: relative;
max-height: 200px;
width: 200px;
button {
align-items: center;
background-color: transparent;
display: flex;
gap: 0.25rem;
text-align: left;
width: 100%;
padding: 5px 10px;
border: none;
cursor: pointer;
&:hover,
&:hover.is-selected {
background-color: var(--gray-3, #f5f7fa);
}
&.is-selected {
background-color: var(--gray-2, #f0f0f0);
}
.avatar {
width: 24px;
height: 24px;
border-radius: 50%;
margin-right: 8px;
}
.nickname {
font-size: 14px;
}
}
}
/* 暗色模式下的样式调整 */
html[theme-mode='dark'] {
.dropdown-menu {
background-color: #1e1e1e;
border-color: #333;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);
button {
&:hover,
&:hover.is-selected {
background-color: #2c2c2c;
}
&.is-selected {
background-color: #333;
}
.nickname {
color: #e0e0e0;
}
}
}
}
</style>

File diff suppressed because it is too large Load Diff

View File

@ -1,117 +0,0 @@
import { computePosition, flip, shift } from '@floating-ui/dom'
import { posToDOMRect, VueRenderer } from '@tiptap/vue-3'
import MentionList from './MentionList.vue'
import { defAvatar } from '@/constant/default'
const updatePosition = (editor, element) => {
const virtualElement = {
getBoundingClientRect: () => posToDOMRect(editor.view, editor.state.selection.from, editor.state.selection.to),
}
computePosition(virtualElement, element, {
placement: 'bottom-start',
strategy: 'absolute',
middleware: [shift(), flip()],
}).then(({ x, y, strategy }) => {
element.style.position = strategy
if (window.__POWERED_BY_WUJIE__) {
element.style.left = `${x + 200}px`
element.style.top = `${y + 100}px`
} else {
element.style.left = `${x}px`
element.style.top = `${y}px`
}
})
}
export default {
items: ({ query, editor, props }) => {
if (!props.members || !props.members.length) {
return []
}
let list = [...props.members]
// 如果是群组管理员,添加"所有人"选项
if (props.isGroupManager) {
list.unshift({ id: 0, nickname: '所有人', avatar: defAvatar })
}
// 排除掉自己
list.splice(list.findIndex((item) => item.id === props.uid), 1)
const filteredItems = list.filter(
(item) => item.nickname.toLowerCase().includes(query.toLowerCase())
)
// 如果没有匹配项,返回空数组以关闭弹窗
if (filteredItems.length === 0) {
return []
}
return filteredItems
},
render: () => {
let component
return {
onStart: props => {
// 如果没有匹配项,不创建弹窗
if (!props.items || props.items.length === 0) {
return
}
component = new VueRenderer(MentionList, {
// Vue 3 props格式
props,
editor: props.editor,
})
if (!props.clientRect) {
return
}
component.element.style.position = 'absolute'
document.body.appendChild(component.element)
updatePosition(props.editor, component.element)
},
onUpdate(props) {
component.updateProps(props)
if (props.items.length === 0) {
this.onExit()
return
}
if (!props.clientRect) {
return
}
updatePosition(props.editor, component.element)
},
onKeyDown(props) {
if (props.event.key === 'Escape') {
this.onExit()
return true
}
if(!component?.props.items?.length){
return false
}
return component.ref.onKeyDown(props)
},
onExit() {
console.log('component.element',component.element)
component.element.remove()
component.destroy()
},
}
},
}

View File

@ -1,121 +0,0 @@
<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>

View File

@ -1,121 +0,0 @@
<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>

File diff suppressed because it is too large Load Diff

View File

@ -1,172 +0,0 @@
<template>
<span>
<template v-if="isHtml">
<span v-html="highlightedHtml" />
</template>
<template v-else>
<span class="text-content">
<template v-for="(part, index) in parts" :key="index">
<span
v-if="part.highlighted"
:class="highlightClass"
v-html="textReplaceEmoji(part.text)"
/>
<span v-else v-html="textReplaceEmoji(part.text)" />
</template>
</span>
</template>
</span>
</template>
<script setup>
import { computed } from 'vue'
import { textReplaceEmoji } from '@/utils/emojis'
const props = defineProps({
text: {
type: String,
required: true
},
searchText: {
type: String,
default: ''
},
highlightClass: {
type: String,
default: 'highlight'
}
})
// HTML
const isHtml = computed(() => {
return /<[^>]*>/g.test(props.text)
})
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
})
//
const processSpecialChars = (text) => {
return (
text
//
.replace(/\n/g, '<br>')
//
.replace(/\t/g, '&nbsp;&nbsp;&nbsp;&nbsp;')
// &nbsp;
.replace(/ {2,}/g, (match) => {
return '&nbsp;'.repeat(match.length)
})
//
.replace(/[\u200B-\u200D\uFEFF]/g, '')
)
}
// HTML - 使
const highlightedHtml = computed(() => {
if (!props.searchText || !props.text) {
//
return textReplaceEmoji(processSpecialChars(props.text))
}
// 使
// HTML
// HTML
const parts = []
let lastIndex = 0
const tagRegex = /<[^>]*>/g
let tagMatch
// lastIndex
tagRegex.lastIndex = 0
while ((tagMatch = tagRegex.exec(props.text)) !== null) {
//
if (tagMatch.index > lastIndex) {
const textBeforeTag = props.text.slice(lastIndex, tagMatch.index)
if (textBeforeTag) {
//
const processedText = processSpecialChars(textBeforeTag)
const searchPattern = new RegExp(`(${escapedSearchText.value})`, 'gi')
const highlightedText = processedText.replace(
searchPattern,
`<span class="${props.highlightClass}">$1</span>`
)
parts.push(highlightedText)
}
}
//
parts.push(tagMatch[0])
lastIndex = tagMatch.index + tagMatch[0].length
}
//
if (lastIndex < props.text.length) {
const textAfterLastTag = props.text.slice(lastIndex)
if (textAfterLastTag) {
//
const processedText = processSpecialChars(textAfterLastTag)
const searchPattern = new RegExp(`(${escapedSearchText.value})`, 'gi')
const highlightedText = processedText.replace(
searchPattern,
`<span class="${props.highlightClass}">$1</span>`
)
parts.push(highlightedText)
}
}
let html = parts.join('')
//
return textReplaceEmoji(html)
})
</script>
<style scoped>
.highlight {
color: #7a58de;
}
.text-content {
white-space: pre-wrap;
word-break: break-word;
:deep(.emoji) {
vertical-align: text-bottom!important;
margin: 0 5px !important;
width: 22px !important;
height: 22px !important;
}
}
</style>

File diff suppressed because it is too large Load Diff

View File

@ -1,545 +0,0 @@
<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 !== 5 &&
props.searchItem?.msg_type !== 6
"
/>
<div
class="message-component-wrapper"
v-if="props.searchItem?.msg_type === 3 || props.searchItem?.msg_type === 5"
@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'
import { checkFileCanPreview } from '@/utils/helper/form'
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 === 5 ||
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)
// })
// }
if (checkFileCanPreview(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'
)
} else {
//
window['$message'].warning('暂不支持在线预览该类型文件')
}
}
</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 {
min-width: 289px;
max-width: 660px;
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;
max-width: 660px;
}
.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>

View File

@ -1,833 +0,0 @@
<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>

View File

@ -5,125 +5,43 @@ import { ServeGetForwardRecords } from '@/api/chat'
import { MessageComponents } from '@/constant/message' import { MessageComponents } from '@/constant/message'
import { ITalkRecord } from '@/types/chat' import { ITalkRecord } from '@/types/chat'
import { useInject } from '@/hooks' import { useInject } from '@/hooks'
import customModal from '@/components/common/customModal.vue'
import { voiceToText } from '@/api/chat.js' const emit = defineEmits(['close'])
import { parseTime } from '@/utils/datetime'
const props = defineProps({ const props = defineProps({
msgId: { msgId: {
type: String, type: String,
required: true required: true
}, }
createdAt: {
type: String,
required: false
},
modalTitle: {
type: String,
required: true
},
}) })
const isShow=defineModel<boolean>('show')
const { showUserInfoModal } = useInject() const { showUserInfoModal } = useInject()
const isShow = ref(true)
const items = ref<ITalkRecord[]>([]) const items = ref<ITalkRecord[]>([])
const title = ref(props?.modalTitle || '会话记录') const title = ref('会话记录')
const onMaskClick = () => { const onMaskClick = () => {
isShow.value=false emit('close')
} }
const onLoadData = () => { const onLoadData = () => {
ServeGetForwardRecords({ ServeGetForwardRecords({
msg_id: props.msgId, msg_id: props.msgId
biz_date: parseTime(new Date(props.createdAt || ''), '{y}{m}')
}).then((res) => { }).then((res) => {
if (res.code == 200) { if (res.code == 200) {
items.value = res.data.items || [] 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
}else data.is_convert_text = 0
}
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(() => { onMounted(() => {
onLoadData() 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> </script>
<template> <template>
<customModal :closable="false" customCloseBtn v-model:show="isShow" :title="title" style="width: 997px;background-color: #F9F9FD;" :on-after-leave="onMaskClick"> <n-modal
<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" v-model:show="isShow"
preset="card" preset="card"
:title="title" :title="title"
@ -162,7 +80,7 @@ const onContextMenu = (e:any,item: ITalkRecord) => {
</div> </div>
</div> </div>
</div> </div>
</n-modal> --> </n-modal>
</template> </template>
<style lang="less" scoped> <style lang="less" scoped>
@ -176,12 +94,10 @@ const onContextMenu = (e:any,item: ITalkRecord) => {
min-height: 38px; min-height: 38px;
display: flex; display: flex;
margin-bottom: 10px; margin-bottom: 10px;
padding: 24px 42px; padding: 5px 15px;
.im-message-text{
background-color: #fff;
}
.left-box { .left-box {
width: 38px; width: 30px;
display: flex; display: flex;
user-select: none; user-select: none;
padding-top: 8px; padding-top: 8px;

View File

@ -1,16 +1,9 @@
<script lang="ts" setup> <script lang="ts" setup>
import { ref, reactive, computed } from 'vue' import { ref, reactive } from 'vue'
import { PlayOne, PauseOne } from '@icon-park/vue-next' import { PlayOne, PauseOne } from '@icon-park/vue-next'
import { ITalkRecordExtraAudio, ITalkRecord } from '@/types/chat' import { ITalkRecordExtraAudio, ITalkRecord } from '@/types/chat'
import { onClickOutside } from '@vueuse/core'
import { useTemplateRef } from 'vue'
import yuyin from "@/assets/image/yuyin.png"
import yuyin1 from "@/assets/image/yuyin1.png"
import bofang from "@/assets/image/bofang.png"
import bofang1 from "@/assets/image/bofang1.png"
defineProps<{
const props = defineProps<{
extra: ITalkRecordExtraAudio extra: ITalkRecordExtraAudio
data: ITalkRecord data: ITalkRecord
maxWidth?: Boolean maxWidth?: Boolean
@ -25,26 +18,18 @@ const state = reactive({
progress: 0, progress: 0,
duration: 0, duration: 0,
currentTime: 0, currentTime: 0,
loading: true, loading: true
showText: false
}) })
const target = useTemplateRef<HTMLElement>('target')
const onPlay = () => { const onPlay = () => {
if (state.isAudioPlay) { if (state.isAudioPlay) {
audioRef.value.pause() audioRef.value.pause()
state.isAudioPlay = false
} else { } else {
audioRef.value.play() audioRef.value.play()
state.isAudioPlay = true
onClickOutside(target, () => {
console.log('点击了外部区域')
audioRef.value.pause() //
state.isAudioPlay = false
})
} }
}
state.isAudioPlay = !state.isAudioPlay
}
const onPlayEnd = () => { const onPlayEnd = () => {
state.isAudioPlay = false state.isAudioPlay = false
@ -55,12 +40,6 @@ const onCanplay = () => {
state.duration = audioRef.value.duration state.duration = audioRef.value.duration
durationDesc.value = formatTime(parseInt(audioRef.value.duration)) durationDesc.value = formatTime(parseInt(audioRef.value.duration))
state.loading = false state.loading = false
if (props.data.is_convert_text === 1 && props.data.extra.content) {
setTimeout(() => {
state.showText = true
}, 300)
}
} }
const onError = (e: any) => { const onError = (e: any) => {
@ -82,85 +61,57 @@ const formatTime = (value: number = 0) => {
return '-' return '-'
} }
return `${Math.floor(value)}"` const minutes = Math.floor(value / 60)
let seconds = value
if (minutes > 0) {
seconds = Math.floor(value - minutes * 60)
}
return `${minutes}'${seconds}"`
} }
const right = computed(() => props.data.float === 'right')
</script> </script>
<template> <template>
<div <div class="im-message-audio">
class="pointer w-200px bg-#F3F4FD rounded-10px px-11px" <audio
:class="{ ref="audioRef"
'!bg-[var(--im-message-right-bg-color)] !text-[var(--im-message-right-text-color)]': right preload="auto"
}" type="audio/mp3,audio/wav"
@click.stop="onPlay" :src="extra.url"
ref="target" @timeupdate="onTimeUpdate"
> @ended="onPlayEnd"
<div class="im-message-audio h-44px" :class="{ right }"> @canplay="onCanplay"
<aTrumpet :isPlay="false" color="black" :size="30"></aTrumpet> @error="onError"
<audio />
ref="audioRef"
preload="auto"
type="audio/mp3,audio/wav"
:src="extra.url"
@timeupdate="onTimeUpdate"
@ended="onPlayEnd"
@canplay="onCanplay"
@error="onError"
/>
<div class="play"> <div class="play">
<div class="btn pointer"> <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="right ? yuyin1 : yuyin"
class="w-[16px] h-[16px]"
alt=""
:style="{ transform: right && 'rotate(180deg)' }"
/>
<img v-else :src="right ? bofang1 : bofang" class="w-[16px] h-[16px]" alt="" />
</div>
</div> </div>
<!-- <div class="desc"> </div>
<div class="desc">
<span class="line" v-for="i in 23" :key="i"></span> <span class="line" v-for="i in 23" :key="i"></span>
<span <span
class="indicator" class="indicator"
:style="{ left: state.progress + '%' }" :style="{ left: state.progress + '%' }"
v-show="state.progress > 0" v-show="state.progress > 0"
></span> ></span>
</div> -->
<!-- <div class="time">{{ durationDesc }}</div> -->
<div>{{ durationDesc.split('"')[0] }}s</div>
</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> </div>
</template> </template>
<style lang="less" scoped> <style lang="less" scoped>
.right {
flex-direction: row-reverse !important;
}
.im-message-audio { .im-message-audio {
--audio-bg-color: #f5f5f5; --audio-bg-color: #f5f5f5;
--audio-btn-bg-color: #ffffff; --audio-btn-bg-color: #ffffff;
width: 200px;
height: 45px;
border-radius: 10px;
display: flex; display: flex;
align-items: center; align-items: center;
overflow: hidden; overflow: hidden;
background-color: var(--audio-bg-color);
> div { > div {
display: flex; display: flex;
align-items: center; align-items: center;
@ -175,13 +126,12 @@ const right = computed(() => props.data.float === 'right')
.btn { .btn {
width: 26px; width: 26px;
height: 26px; height: 26px;
// background-color: var(--audio-btn-bg-color); background-color: var(--audio-btn-bg-color);
border-radius: 50%; border-radius: 50%;
color: rgb(24, 24, 24); color: rgb(24, 24, 24);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
transition: all 0.3s ease;
} }
} }
@ -280,7 +230,6 @@ const right = computed(() => props.data.float === 'right')
height: 70%; height: 70%;
width: 1px; width: 1px;
background-color: #9b9595; background-color: #9b9595;
transition: left 0.1s linear;
} }
} }
@ -292,40 +241,6 @@ const right = computed(() => props.data.float === 'right')
} }
} }
.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'] { html[theme-mode='dark'] {
.im-message-audio { .im-message-audio {
--audio-bg-color: #2c2c32; --audio-bg-color: #2c2c32;

View File

@ -1,281 +1,118 @@
<script setup> <script lang="ts" setup>
import { fileFormatSize } from '@/utils/strings' import { fileFormatSize } from '@/utils/strings'
import { ref, computed } from 'vue' import { download, getFileNameSuffix } from '@/utils/functions'
import { useUploadsStore } from '@/store' import { ITalkRecordExtraFile, ITalkRecord } from '@/types/chat'
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
}
})
const uploadsStore = useUploadsStore() defineProps<{
const isPlaying = ref(false) extra: ITalkRecordExtraFile
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> </script>
<template> <template>
<div class="file-message flex flex-col can-preview" @click="handleClick"> <section class="file-message">
<!-- 文件头部信息 --> <div class="main">
<div class="file-header"> <div class="ext">{{ getFileNameSuffix(extra.name) }}</div>
<!-- 文件名 --> <div class="file-box">
<div class="file-name">{{ extra.name }}</div> <p class="info">
<!-- 文件图标区域 --> <span class="name">{{ extra.name }}</span>
<div class="file-icon-container"> <span class="size">({{ fileFormatSize(extra.size) }})</span>
<img class="file-icon" :src="fileInfo.icon" alt="文件图标"> </p>
<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> </div>
<!-- 文件大小信息 --> <div class="footer">
<div class="flex justify-between items-center grow-1"> <a @click="download(data.msg_id)">下载</a>
<div class="file-size">{{ fileFormatSize(extra.size) }}</div> <a>在线预览</a>
<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>
</div> </section>
</template> </template>
<style lang="less" scoped> <style lang="less" scoped>
.file-message { .file-message {
width: 243px; width: 250px;
background-color: #fff; min-height: 85px;
height: 110px; padding: 10px;
border-radius: 8px; border-radius: 10px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); border: 1px solid var(--im-message-border-color);
padding: 0 14px;
} .main {
height: 45px;
display: flex;
flex-direction: row;
margin-top: 5px;
.can-preview { .ext {
cursor: pointer; display: flex;
&:hover { justify-content: center;
background-color: #f9f9f9; align-items: center;
width: 45px;
height: 45px;
color: #ffffff;
background: #49a4ff;
border-radius: 5px;
font-size: 12px;
}
.file-box {
flex: 1 1;
height: 45px;
margin-left: 10px;
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 {
color: royalblue;
}
}
} }
} }
.file-header {
display: flex;
padding: 14px 5px 14px 0;
justify-content: space-between;
width: 100%;
border-bottom: 1px solid #EEEEEE;
}
.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;
}
.file-size {
color: #747474;
font-size: 12px;
}
.circle-progress-container {
width: 20px;
height: 20px;
position: relative;
cursor: pointer;
}
.circle-progress {
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> </style>

View File

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

View File

@ -11,20 +11,12 @@ defineProps<{
let show = ref(false) let show = ref(false)
</script> </script>
<template> <template>
<section <section class="im-message-group-notice pointer" @click="show = !show">
class="im-message-group-notice pointer"
@click="show = !show"
:class="{
left: data.float === 'left',
right: data.float === 'right'
}"
>
<div class="title"> <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>
<div class="title" :class="{ ellipsis: !show }"> <div class="content" :class="{ ellipsis: !show }">
{{ extra.content }} {{ extra.content }}
</div> </div>
</section> </section>
@ -38,14 +30,14 @@ let show = ref(false)
padding: 8px 10px; padding: 8px 10px;
border: 1px solid var(--im-message-border-color); border: 1px solid var(--im-message-border-color);
user-select: none; user-select: none;
background-color: #fff;
.title { .title {
line-height: 44rpx; height: 30px;
font-size: 32rpx; line-height: 30px;
// overflow: hidden; font-size: 14px;
// text-overflow: ellipsis; overflow: hidden;
// white-space: nowrap; text-overflow: ellipsis;
white-space: nowrap;
font-weight: 400; font-weight: 400;
margin-bottom: 5px; margin-bottom: 5px;
position: relative; position: relative;
@ -64,18 +56,5 @@ let show = ref(false)
white-space: nowrap; 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> </style>

View File

@ -1,9 +1,9 @@
<script lang="ts" setup> <script lang="ts" setup>
import { NImage, NSpin } from 'naive-ui' import { NImage } from 'naive-ui'
import { getImageInfo } from '@/utils/functions' import { getImageInfo } from '@/utils/functions'
import { ITalkRecordExtraImage, ITalkRecord } from '@/types/chat' import { ITalkRecordExtraImage, ITalkRecord } from '@/types/chat'
const props = defineProps<{ defineProps<{
extra: ITalkRecordExtraImage extra: ITalkRecordExtraImage
data: ITalkRecord data: ITalkRecord
maxWidth?: Boolean maxWidth?: Boolean
@ -35,13 +35,7 @@ const img = (src: string, width = 200) => {
:class="{ left: data.float === 'left' }" :class="{ left: data.float === 'left' }"
:style="img(extra.url, 350)" :style="img(extra.url, 350)"
> >
<div class="image-container"> <n-image :src="extra.url" />
<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> </section>
</template> </template>
<style lang="less" scoped> <style lang="less" scoped>
@ -50,30 +44,11 @@ const img = (src: string, width = 200) => {
padding: 5px; padding: 5px;
border-radius: 5px; border-radius: 5px;
background: var(--im-message-left-bg-color); background: var(--im-message-left-bg-color);
height:149px; min-width: 30px;
min-height: 30px;
&.left { &.left {
background: #F4F4FC; background: var(--im-message-right-bg-color);
}
.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) { :deep(.n-image img) {

View File

@ -1,95 +0,0 @@
<!-- 完全复制的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>

View File

@ -1,9 +1,7 @@
<script setup> <script setup>
import { formatTime } from '@/utils/datetime' import { formatTime } from '@/utils/datetime'
import { bus } from '@/utils/event-bus'
import { EditorConst } from '@/constant/event-bus'
const props = defineProps({ defineProps({
login_uid: { login_uid: {
type: Number, type: Number,
default: 0 default: 0
@ -23,121 +21,18 @@ const props = defineProps({
datetime: { datetime: {
type: String, type: String,
default: '' 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> </script>
<template> <template>
<div class="im-message-revoke"> <div class="im-message-revoke">
<div class="content" v-if="JSON.stringify(revokeInfo) !== '{}'"> <div class="content">
<span v-if="talk_type === 1 && login_uid === revokeInfo.withdraw_id"> <span v-if="login_uid == user_id"> 你撤回了一条消息 | {{ formatTime(datetime) }} </span>
你撤回了一条消息 | {{ formatTime(datetime) }} <span v-else-if="talk_type == 1"> 对方撤回了一条消息 | {{ formatTime(datetime) }} </span>
</span> <span v-else>
<span v-if="talk_type === 1 && login_uid !== revokeInfo.withdraw_id"> "{{ nickname }}" 撤回了一条消息 |
{{ 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) }} {{ formatTime(datetime) }}
</span> </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>
</div> </div>
</template> </template>

View File

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

View File

@ -1,17 +1,11 @@
<script lang="ts" setup> <script lang="ts" setup>
import 'xgplayer/dist/index.min.css' import 'xgplayer/dist/index.min.css'
import { ref, nextTick, watch, computed } from 'vue' import { ref, nextTick } from 'vue'
import { NImage, NModal, NCard, NProgress, NPopconfirm } from 'naive-ui' import { NImage, NModal, NCard } from 'naive-ui'
import { Play, Close, Pause, Right, Attention } from '@icon-park/vue-next' import { Play, Close } from '@icon-park/vue-next'
import { getImageInfo } from '@/utils/functions' import { getImageInfo } from '@/utils/functions'
import {PauseOutline} from '@vicons/ionicons5'
import Player from 'xgplayer' import Player from 'xgplayer'
import { ITalkRecordExtraVideo, ITalkRecord } from '@/types/chat' import { ITalkRecordExtraVideo, ITalkRecord } from '@/types/chat'
import { useUploadsStore } from '@/store'
// @ts-ignore
const message = window.$message
const uploadsStore = useUploadsStore()
const props = defineProps<{ const props = defineProps<{
extra: ITalkRecordExtraVideo extra: ITalkRecordExtraVideo
@ -19,75 +13,35 @@ const props = defineProps<{
maxWidth?: Boolean 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) {
// return {
// width: `${info.width}px`,
// height: `${info.height}px`
// }
// }
// return {
// 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
} }
} }
if (info.width < width) {
return {
width: `${info.width}px`,
height: `${info.height}px`
}
}
return {
width: width + 'px',
height: info.height / (info.width / width) + 'px'
}
} }
// const open = ref(false)
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() { async function onPlay() {
//
if (props.extra.is_uploading) {
return
}
open.value = true open.value = true
await nextTick() await nextTick()
@ -100,86 +54,18 @@ async function onPlay() {
lang: 'zh-cn' 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> </script>
<template> <template>
<section <section
class="im-message-video" class="im-message-video"
:class="{ left: data.float === 'left' }" :class="{ left: data.float === 'left' }"
:style="img(extra.cover, 350)"
@click="onPlay" @click="onPlay"
> >
<n-image :src="extra.cover" preview-disabled />
<!-- <n-image :src="extra.cover" preview-disabled /> --> <div class="btn-video">
<video :src="videoSrc" :controls="false"></video> <n-icon :component="Play" size="36" />
<!-- 上传进度时的黑色半透明蒙层 -->
<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> </div>
<n-modal v-model:show="open"> <n-modal v-model:show="open">
@ -206,25 +92,23 @@ function resumeUpload(e) {
min-height: 30px; min-height: 30px;
display: inline-flex; display: inline-flex;
position: relative; position: relative;
height:149px;
width: 225px;
&.left { &.left {
background: var(--im-message-right-bg-color); background: var(--im-message-right-bg-color);
} }
video { :deep(.n-image img) {
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 5px; border-radius: 5px;
object-fit: cover;
background-color: #333; /* 添加背景色,避免默认显示为灰色 */
} }
.btn-video { .btn-video {
left: 50%; width: 30px;
top: 50%; height: 20px;
transform: translate(-50%, -50%);
position: absolute; position: absolute;
left: calc(50% - 15px);
top: calc(50% - 10px);
cursor: pointer; cursor: pointer;
color: #ffffff; color: #ffffff;
} }
@ -250,66 +134,4 @@ function resumeUpload(e) {
align-items: center; align-items: center;
justify-content: 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> </style>

View File

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

View File

@ -1,25 +0,0 @@
<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>

View File

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

View File

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

View File

@ -1,19 +0,0 @@
<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>

View File

@ -1,25 +0,0 @@
<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>

View File

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

View File

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

Some files were not shown because too many files have changed in this diff Show More