feat: 聊天优化

src/api/alova-instance.ts

@@ -41,7 +41,6 @@ export const alova = createAlova({
         // 设置请求头application/json;charset=UTF-8
         // @ts-ignore
         const isUpload = method.config?.meta?.isUpload
-        console.log('the upload here', isUpload, method)
         if (isUpload && method.data) {
             method.data = Object.entries(method.data).reduce(function (q, w) {
                 if (!(w[1] instanceof File)) {

src/assets/icons/focus.svg

+<svg t="1715069371818" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2164" width="200" height="200"><path d="M554.666667 42.666667l0.042666 130.645333c154.368 19.264 276.736 141.653333 295.978667 296.021333H981.333333v85.333334l-130.645333 0.042666c-19.264 154.368-141.610667 276.693333-295.978667 295.978667L554.666667 981.333333h-85.333334v-130.645333c-154.389333-19.242667-276.757333-141.610667-296.021333-295.978667L42.666667 554.666667v-85.333334h130.645333C192.554667 314.944 314.944 192.554667 469.333333 173.312V42.666667h85.333334z m-42.666667 213.333333c-141.376 0-256 114.624-256 256s114.624 256 256 256 256-114.624 256-256-114.624-256-256-256z m0 170.666667a85.333333 85.333333 0 1 1 0 170.666666 85.333333 85.333333 0 0 1 0-170.666666z" p-id="2165"></path></svg>
\ No newline at end of file

src/views/layout/gMenu.vue

@@ -32,9 +32,11 @@ const goRoute = (name: string) => {
     color: var(--color-text-2);
     &.arco-menu-selected {
         color: rgb(var(--primary-6));
+        background: var(--color-fill-2);
     }
     &:hover {
         color: rgb(var(--primary-6));
+        background: var(--color-fill-2);
     }
 }
 :deep(.arco-menu-inline-header.arco-menu-selected) {

src/views/remote/contacts/constants/data.config.ts

@@ -31,6 +31,12 @@ export const columns: TableColumnData[] = [
         title: '会议时间',
         dataIndex: 'createdTime',
         slotName: 'createdTime'
+    },
+    {
+        title: '操作',
+        align: 'center',
+        dataIndex: 'operation',
+        slotName: 'operation'
     }
     // {
     //     title: '结束时间',
@@ -45,25 +51,3 @@ export const columns: TableColumnData[] = [
     //     dataIndex: 'attachment'
     // }
 ]
-export const tableData = reactive([
-    {
-        key: '1',
-        eventName: '2024-02-17 10:22:23远程协助事件',
-        initiator: '李豫卓',
-        position: '标签',
-        startTime: '2024-02-17 04:56:46',
-        endTime: '2024-02-14 22:33:11',
-        duration: '09:22',
-        attachment: '无附件'
-    },
-    {
-        key: '2',
-        eventName: '2024-02-17 10:22:23远程协助事件',
-        initiator: '李豫卓',
-        position: '标签',
-        startTime: '2024-02-17 04:56:46',
-        endTime: '2024-02-14 22:33:11',
-        duration: '09:22',
-        attachment: '无附件'
-    }
-])

src/views/remote/contacts/eventDetails.vue

+<template>
+    <div class="g-block ml-4 px-4">
+        <div class="flex justify-between">
+            <div class="flex items-center space-x-8">
+                <icon-left :size="20" />
+                <span>2023-10-26 10:15:54通话事件</span>
+            </div>
+            <a-radio-group v-model="active">
+                <template v-for="(item, i) in tabs" :key="i">
+                    <a-radio :value="i">
+                        <template #radio="{ checked }">
+                            <a-tag size="large" :checked="checked" checkable>{{ item.label }}</a-tag>
+                        </template>
+                    </a-radio>
+                </template>
+            </a-radio-group>
+        </div>
+        <div class="flex items-center py-8">
+            <a-avatar-group :size="40">
+                <global-avatar :icon-size="15"></global-avatar>
+                <global-avatar :icon-size="15"></global-avatar>
+            </a-avatar-group>
+            <span class="ml-2">专家1,维修1 参与过该事件</span>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { IconLeft } from '@arco-design/web-vue/es/icon'
+const details = {
+    total: '3',
+    pageIndex: '1',
+    pageSize: '10',
+    list: [
+        {
+            _id: '6539d2f6561a4d043c508871',
+            channelId: '2_1698288370581',
+            closeTime: '1970-01-01T08:00:00',
+            companyId: '1',
+            content: 'https://video.anyremote.cn:444/89169459-01e2-4594-a01a-cbbca9dd5bab/0_20231026024612670.mp4',
+            createdTime: 1698288374814,
+            fileMd5: '',
+            fileName: '0_20231026024612670.mp4',
+            fileSize: '351399',
+            fileSizeTxt: '',
+            fileType: 'video',
+            fileUploadId: '1717372034058698754',
+            fileUrl: 'https://video.anyremote.cn:444/89169459-01e2-4594-a01a-cbbca9dd5bab/0_20231026024612670.mp4',
+            fromId: '2',
+            isDel: '0',
+            isTop: '0',
+            msgId: '',
+            quoteId: '',
+            readUid: '2',
+            receiveUid: ',7,',
+            status: '',
+            toId: '-2',
+            updatedTime: 1698288374814,
+            videoDuration: '1',
+            videoDurationTxt: ''
+        },
+        {
+            _id: '6539d2f2561a4d043c508870',
+            channelId: '2_1698288370581',
+            closeTime: '1970-01-01T08:00:00',
+            companyId: '1',
+            content: '专家1加入了通话',
+            createdTime: 1698288370706,
+            fileMd5: '',
+            fileName: '',
+            fileSize: '0',
+            fileSizeTxt: '',
+            fileType: 'txt',
+            fileUploadId: '0',
+            fileUrl: '',
+            fromId: '2',
+            isDel: '0',
+            isTop: '0',
+            msgId: '',
+            quoteId: '',
+            readUid: '2',
+            receiveUid: ',7,',
+            status: '',
+            toId: '',
+            updatedTime: 1698288370706,
+            videoDuration: '0',
+            videoDurationTxt: ''
+        },
+        {
+            _id: '6539d2f2561a4d043c50886f',
+            channelId: '2_1698288370581',
+            closeTime: '1970-01-01T08:00:00',
+            companyId: '1',
+            content: '维修1加入了通话',
+            createdTime: 1698288370696,
+            fileMd5: '',
+            fileName: '',
+            fileSize: '0',
+            fileSizeTxt: '',
+            fileType: 'txt',
+            fileUploadId: '0',
+            fileUrl: '',
+            fromId: '7',
+            isDel: '0',
+            isTop: '0',
+            msgId: '',
+            quoteId: '',
+            readUid: '7',
+            receiveUid: ',7,',
+            status: '',
+            toId: '',
+            updatedTime: 1698288370696,
+            videoDuration: '0',
+            videoDurationTxt: ''
+        }
+    ]
+}
+
+const active = ref(0)
+const tabs = ref([
+    { value: 0, label: '全部' },
+    { value: 1, label: '图片' },
+    { value: 2, label: '文档' },
+    { value: 3, label: '视频' }
+])
+</script>
+<style lang="less" scoped>
+.arco-tag {
+    padding: 5px 16px;
+    &.arco-tag-checked,
+    &:hover {
+        background: var(--color-fill-2);
+        border-radius: 10px;
+        color: rgb(var(--primary-6));
+    }
+}
+.arco-radio-group .arco-radio {
+    margin-right: 12px;
+}
+</style>

src/views/remote/contacts/eventInfo.vue

+<template>
+    <!-- 事件列表 -->
+    <event-list></event-list>
+    <!-- 事件详情 -->
+    <!-- <event-details></event-details> -->
+</template>
+
+<script setup lang="ts">
+import EventList from './eventList.vue'
+import EventDetails from './eventDetails.vue'
+</script>
+<style lang="less" scoped></style>

src/views/remote/contacts/eventList.vue

@@ -28,6 +28,9 @@
                 <template #createdTime="{ record }">
                     {{ Day(parseInt(record.createdTime)).format('YYYY-MM-DD HH:mm:ss') }}
                 </template>
+                <template #operation="{ record }">
+                    <a-button type="text" @click="showDetails(record.channelId)">查看详情</a-button>
+                </template>
             </a-table>
         </div>
         <div class="px-4">
@@ -43,6 +46,7 @@ import { alova } from '@/api/alova-instance'
 import useContactsStore from '@/store/contacts/index'
 import { storeToRefs } from 'pinia'
 import Day from '@/utils/dayjs'
+import { Message } from '@arco-design/web-vue'
 
 const beginTime = ref('')
 const endTime = ref('')
@@ -118,6 +122,20 @@ const getInitiatorName = (record: any) => {
 const getParticipantsName = (userList: any[]) => {
     return userList.map((item) => item.nickname).join(',')
 }
+//显示详情
+const showDetails = async (channelId: string) => {
+    const params = {
+        uid: 2,
+        projectName: 'mu',
+        channelId
+    }
+    const res = await alova.Post<any>('/call/getChatRoomMsgList', params, { meta: { loading: true } })
+    if (res.code == 200) {
+        console.log(res.data)
+    } else {
+        Message.error(res.message)
+    }
+}
 </script>
 <style lang="less" scoped>
 :deep(.arco-table-th) {

src/views/remote/contacts/index.vue

@@ -6,13 +6,13 @@
         </a-col>
         <a-col :flex="13" class="h-full">
             <!-- 事件列表 -->
-            <event-list></event-list>
+            <event-info></event-info>
         </a-col>
     </a-row>
 </template>
 
 <script setup lang="ts">
 import ContactsInfo from './contactsInfo.vue'
-import EventList from './eventList.vue'
+import EventInfo from './eventInfo.vue'
 </script>
 <style lang="less" scoped></style>

src/views/remote/videoCall/chatDetails.vue

@@ -21,7 +21,7 @@
                         <global-icon icon="file"></global-icon>
                         <span class="ml-3">{{ data.fileName || '' }}</span>
                     </div>
-                    <global-icon icon="download" class="cursor-pointer"></global-icon>
+                    <a :href="data.src" download target="_blank"><global-icon icon="download" class="cursor-pointer"></global-icon></a>
                 </div>
             </template>
             <template v-else>
@@ -42,6 +42,5 @@ const ps = withDefaults(defineProps<Props>(), {
     type: 'txt',
     data: () => {}
 })
-console.log('pass-in-p', ps);
 </script>
 <style lang="less" scoped></style>

src/views/remote/videoCall/videoChat.vue

@@ -34,6 +34,7 @@
         </div>
         <div class="px-4 py-2">
             <a-space size="medium">
+                <a-tooltip content="发送图片">
                     <a-upload :custom-request="(option) => uploadMuFile(option, 'image')" :show-file-list="false" accept="image/*">
                         <template #upload-button>
                             <div class="flex-center px-3 py-1 rounded cursor-pointer bg-fill-bg1">
@@ -41,6 +42,8 @@
                             </div>
                         </template>
                     </a-upload>
+                </a-tooltip>
+                <a-tooltip content="发送pdf">
                     <a-upload :custom-request="(option) => uploadMuFile(option, 'pdf')" :show-file-list="false" accept=".pdf">
                         <template #upload-button>
                             <div class="flex-center px-3 py-1 rounded cursor-pointer bg-fill-bg1">
@@ -48,6 +51,8 @@
                             </div>
                         </template>
                     </a-upload>
+                </a-tooltip>
+                <a-tooltip content="发送视频">
                     <a-upload :custom-request="(option) => uploadMuFile(option, 'video')" :show-file-list="false" accept="video/*">
                         <template #upload-button>
                             <div class="flex-center px-3 py-1 rounded cursor-pointer bg-fill-bg1">
@@ -55,6 +60,7 @@
                             </div>
                         </template>
                     </a-upload>
+                </a-tooltip>
             </a-space>
             <a-textarea v-model="textMessage" allow-clear class="h-16 mt-2" placeholder="请输入" @keydown.enter="sendMessageText" />
         </div>
@@ -92,7 +98,8 @@ const uploadMuFile = (option: any, type: string) => {
         requestFrom: 6,
         uid: 4
     }
-    return alova
+    return (
+        alova
             // @ts-ignore
             .Post<any>('/admin/uploadMuFile', params, { meta: { isUpload: true } })
             .then((res) => {
@@ -121,6 +128,7 @@ const uploadMuFile = (option: any, type: string) => {
                 console.log('出现错误', error)
                 onError(error)
             }) as any
+    )
 }
 
 const mapChatMessageQueue = computed(function () {

src/views/remote/videoCall/videoTools.vue

@@ -52,6 +52,10 @@
                 <global-icon icon="mic-off" :size="21"></global-icon>
                 <span class="mt-1 color-text-2">全体静音</span>
             </div>
+            <div class="w-[120px] h-[72px] item">
+                <global-icon icon="focus" :size="21"></global-icon>
+                <span class="mt-1 color-text-2">动态标注</span>
+            </div>
         </div>
     </div>
 </template>