From 93ba6c579ac6b02f5c31c1082bb51c3daeeafe41 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=AE=89=E6=B5=A9=E6=B5=A9?= <1036606149@qq.com> Date: Tue, 7 May 2024 22:12:19 +0800 Subject: [PATCH 1/4] =?UTF-8?q?=E4=BF=AE=E6=94=B9=EF=BC=9A=E4=BD=BF?= =?UTF-8?q?=E7=94=A8=E5=8A=A8=E6=80=81=E7=BB=84=E4=BB=B6=E8=80=8C=E9=9D=9E?= =?UTF-8?q?=E8=B7=AF=E7=94=B1=E8=B7=B3=E8=BD=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Cropper/src/CropperAvatar.vue | 2 +- .../Im/SearchInput/src/SearchInput.vue | 2 +- src/layout/components/ImChat/src/ImChat.vue | 24 +++++++------- src/views/im/Conversation/index.vue | 31 +++++++++---------- .../im/Message/components/inputBox/index.scss | 2 +- src/views/im/Message/index.scss | 2 +- src/views/im/NavBar/index.vue | 14 ++++----- src/views/im/index.vue | 12 ++++++- 8 files changed, 49 insertions(+), 40 deletions(-) diff --git a/src/components/Cropper/src/CropperAvatar.vue b/src/components/Cropper/src/CropperAvatar.vue index 9464c2a8..dc91bd26 100644 --- a/src/components/Cropper/src/CropperAvatar.vue +++ b/src/components/Cropper/src/CropperAvatar.vue @@ -97,7 +97,7 @@ $prefix-cls: #{$namespace}--cropper-avatar; opacity: 0; transition: opacity 0.4s; - ::v-deep(svg) { + :deep(svg) { margin: auto; } } diff --git a/src/components/Im/SearchInput/src/SearchInput.vue b/src/components/Im/SearchInput/src/SearchInput.vue index 85b3cf62..a577b190 100644 --- a/src/components/Im/SearchInput/src/SearchInput.vue +++ b/src/components/Im/SearchInput/src/SearchInput.vue @@ -29,7 +29,7 @@ const querySearch = () => { diff --git a/src/views/im/Message/components/messageList/index.vue b/src/views/im/Message/components/messageList/index.vue index 006830bc..3ca84165 100644 --- a/src/views/im/Message/components/messageList/index.vue +++ b/src/views/im/Message/components/messageList/index.vue @@ -2,6 +2,15 @@ import { formatDate } from '@/utils/formatTime' /* 默认头像 */ import defaultAvatar from '@/assets/imgs/avatar.gif' +import { useUserStore } from '@/store/modules/user' +import avatarImg from '@/assets/imgs/avatar.gif' +import paseLink from '@/utils/paseLink.ts' +import fileSizeFormat from '@/utils/fileSizeFormat' +import { messageType } from '@/constant/im' +const { ALL_MESSAGE_TYPE, CUSTOM_TYPE } = messageType +// 当前用户信息 +const userStore = useUserStore() +const avatar = computed(() => userStore.user.avatar ?? avatarImg) /* props */ const props = defineProps({ messageData: { @@ -16,25 +25,14 @@ const props = defineProps({ }) const { nowPickInfo } = toRefs(props) const { messageData } = toRefs(props) -//消息类型 -const ALL_MESSAGE_TYPE = { - TEXT: 'txt', - IMAGE: 'img', - AUDIO: 'audio', - LOCAL: 'loc', - VIDEO: 'video', - FILE: 'file', - CUSTOM: 'custom', - CMD: 'cmd', - INFORM: 'inform' //这个类型不在环信消息类型内，属于自己定义的一种系统通知类的消息。 -} /* 处理时间显示间隔 */ const handleMsgTimeShow = (time, index) => { console.log('>>>>>时间显示', time, index) const msgList = Array.from(messageData.value) if (index !== 0) { const lastTime = msgList[index - 1].time - return time - lastTime > 50000 ? formatDate(time, 'MM/DD/HH:mm') : false + console.log('>>>>>时间间隔', time - lastTime, time, lastTime) + return time - lastTime > 50000 ? formatDate(time, 'MM/DD/HH:mm') : '' } else { return formatDate(time, 'MM/DD/HH:mm') } @@ -43,9 +41,15 @@ const handleMsgTimeShow = (time, index) => { const isMyself = (msgBody) => { return msgBody.from === '1' } +/* 文本中是否包含link */ +const isLink = computed(() => { + return (msg) => { + return paseLink(msg).isLink + } +}) /* 获取自己的用户信息 */ const loginUserInfo = { - avatarurl: 'https://avatars.githubusercontent.com/u/1?v=4' + avatarurl: avatar.value } /* 获取他人的用户信息 */ const otherUserInfo = (from) => { @@ -98,14 +102,14 @@ const startplayAudio = (msgBody) => { >
- {{ handleMsgTimeShow(msgBody.time, index) || '' }} + {{ handleMsgTimeShow(msgBody.time, index) }}
{ >

@@ -219,62 +217,10 @@ const startplayAudio = (msgBody) => {
- - - -
-

- {{ msgBody?.ext?.msgQuote?.msgSender }}：{{ msgBody?.ext?.msgQuote?.msgPreview }} -

-
- -
- {{ isMyself(msgBody) ? '你' : `${msgBody.from}` }}撤回了一条消息重新编辑 -
- -
-

- {{ msgBody.msg }} -

-
- - diff --git a/src/views/im/Message/index.vue b/src/views/im/Message/index.vue index 5f89bf32..3b70e5f8 100644 --- a/src/views/im/Message/index.vue +++ b/src/views/im/Message/index.vue @@ -4,6 +4,7 @@ import { messageType } from '@/constant/im' /* 组件 */ import MessageList from './components/messageList/index.vue' import InputBox from './components/inputBox/index.vue' +import * as MessageApi from '@/api/im/message' const { query } = useRoute() // 查询参数 @@ -47,34 +48,70 @@ const messageData = computed(() => [ id: 1, type: ALL_MESSAGE_TYPE.TEXT, isRecall: false, - time: '1711944000000', + time: '1711944110000', from: '1', - msg: 'Hello, world!', + msg: 'Hello, world!111', modifiedInfo: { operationCount: 1 - } + }, + customExts: { + nickname: '芋道源码', + avatar: 'https://avatars.githubusercontent.com/u/2?v=4' + }, + customEvent: { + type: '1', + data: { + type: '1', + data: 'https://avatars.githubusercontent.com/u/2?v=4' + } + }, + file_length: 0 }, { id: 2, type: ALL_MESSAGE_TYPE.TEXT, isRecall: false, - time: '1711944001000', + time: '1711944221000', from: '2', - msg: 'Hi, there!', + msg: 'Hi, there!222', modifiedInfo: { operationCount: 0 - } + }, + customExts: { + nickname: '芋道源码', + avatar: 'https://avatars.githubusercontent.com/u/2?v=4' + }, + customEvent: { + type: '1', + data: { + type: '1', + data: 'https://avatars.githubusercontent.com/u/2?v=4' + } + }, + file_length: 0 }, { id: 3, type: ALL_MESSAGE_TYPE.TEXT, - isRecall: true, - time: '1711944002000', + isRecall: false, + time: '1711944332000', from: '1', - msg: 'Hello, world!', + msg: 'Hello, world!333', modifiedInfo: { operationCount: 0 - } + }, + customExts: { + nickname: '芋道源码', + avatar: 'https://avatars.githubusercontent.com/u/2?v=4' + }, + customEvent: { + type: '1', + data: { + type: '1', + data: 'https://avatars.githubusercontent.com/u/2?v=4' + } + }, + file_length: 0 } ]) @@ -117,12 +154,7 @@ const messageQuote = (msg) => inputBox.value.handleQuoteMessage(msg)
-
+
-import { ref, defineAsyncComponent } from 'vue' +import { shallowRef, defineAsyncComponent, DefineComponent } from 'vue' import NavBar from './NavBar/index.vue' // 定义异步加载的组件 @@ -7,7 +7,7 @@ const ConversationComponent = defineAsyncComponent( () => import('@/views/im/Conversation/index.vue') ) -const currentComponent = ref(ConversationComponent) // 默认加载对话组件 +const currentComponent = shallowRef(ConversationComponent) // 默认加载对话组件 defineOptions({ name: 'IM' }) From 569b1b64bd1767ecf80ab37ef1e32447868642be Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=AE=89=E6=B5=A9=E6=B5=A9?= <1036606149@qq.com> Date: Thu, 23 May 2024 21:59:56 +0800 Subject: [PATCH 4/4] =?UTF-8?q?=E4=BF=AE=E6=94=B9=EF=BC=9A=E5=88=A0?= =?UTF-8?q?=E9=99=A4=E9=80=9A=E7=9F=A5=E8=AF=A6=E6=83=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/router/modules/remaining.ts | 12 ------------ 1 file changed, 12 deletions(-) diff --git a/src/router/modules/remaining.ts b/src/router/modules/remaining.ts index d4e129f3..4480d14c 100644 --- a/src/router/modules/remaining.ts +++ b/src/router/modules/remaining.ts @@ -591,18 +591,6 @@ const remainingRouter: AppRouteRecordRaw[] = [ }, component: () => import('@/views/im/Conversation/index.vue'), children: [ - { - // 会话详情 - path: 'informDetails', - name: 'InformDetails', - meta: { - title: '通知详情', - noCache: true, - hidden: true, - noTagsView: true - }, - component: () => import('@/views/im/InformDetails/index.vue') - }, { //聊天对话框 path: 'message',