From 262b098be8eadb2fb2cd277f8922c1dd30130a92 Mon Sep 17 00:00:00 2001
From: sonjinyon <2476687577@qq.com>
Date: Mon, 4 Nov 2024 13:26:06 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=90=8E=E5=8F=B0=E5=AE=A2?=
 =?UTF-8?q?=E6=9C=8D=E7=95=8C=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../kefu/components/KeFuConversationList.vue  |  16 ++-
 .../kefu/components/KeFuMessageList.vue       |  95 +++++++-------
 .../history/MemberBrowsingHistory.vue         |   2 +-
 .../src/views/mall/promotion/kefu/index.vue   | 121 ++++++++++++++----
 4 files changed, 151 insertions(+), 83 deletions(-)

diff --git a/yudao-admin-vue3/src/views/mall/promotion/kefu/components/KeFuConversationList.vue b/yudao-admin-vue3/src/views/mall/promotion/kefu/components/KeFuConversationList.vue
index 079c415..8b7b44f 100644
--- a/yudao-admin-vue3/src/views/mall/promotion/kefu/components/KeFuConversationList.vue
+++ b/yudao-admin-vue3/src/views/mall/promotion/kefu/components/KeFuConversationList.vue
@@ -1,5 +1,6 @@
 <template>
   <div class="kefu">
+	
     <div
       v-for="item in conversationList"
       :key="item.id"
@@ -9,7 +10,7 @@
       @contextmenu.prevent="rightClick($event as PointerEvent, item)"
     >
       <div class="flex justify-center items-center w-100%">
-        <div class="flex justify-center items-center w-50px h-50px">
+        <div class="flex justify-center items-center w-40px h-40px">
           <!-- 头像 + 未读 -->
           <el-badge
             :hidden="item.adminUnreadMessageCount === 0"
@@ -19,10 +20,10 @@
             <el-avatar :src="item.userAvatar" alt="avatar" />
           </el-badge>
         </div>
-        <div class="ml-10px w-100%">
-          <div class="flex justify-between items-center w-100%">
+        <div class="ml-3px w-full">
+          <div class="flex justify-between items-center w-full">
             <span class="username">{{ item.userNickname }}</span>
-            <span class="color-[var(--left-menu-text-color)]" style="font-size: 13px">
+            <span class="color-[var(--left-menu-text-color)]" style="font-size: 12px">
               {{ formatPast(item.lastMessageTime, 'YYYY-MM-DD') }}
             </span>
           </div>
@@ -182,12 +183,13 @@ watch(showRightMenu, (val) => {
 <style lang="scss" scoped>
 .kefu {
   &-conversation {
-    height: 60px;
-    padding: 10px;
+    height: 55px;	
+    padding: 8px;
     //background-color: #fff;
     transition: border-left 0.05s ease-in-out; /* 设置过渡效果 */
 
     .username {
+		font-size: 20%;
       min-width: 0;
       max-width: 60%;
       overflow: hidden;
@@ -198,7 +200,7 @@ watch(showRightMenu, (val) => {
     }
 
     .last-message {
-      font-size: 13px;
+      font-size: 15px;
       width: 200px;
       overflow: hidden; // 隐藏超出的文本
       white-space: nowrap; // 禁止换行
diff --git a/yudao-admin-vue3/src/views/mall/promotion/kefu/components/KeFuMessageList.vue b/yudao-admin-vue3/src/views/mall/promotion/kefu/components/KeFuMessageList.vue
index 0735fb3..399f02e 100644
--- a/yudao-admin-vue3/src/views/mall/promotion/kefu/components/KeFuMessageList.vue
+++ b/yudao-admin-vue3/src/views/mall/promotion/kefu/components/KeFuMessageList.vue
@@ -10,8 +10,7 @@
 					<div v-for="(item, index) in getMessageList0" :key="item.id" class="w-[100%]">
 						<div class="flex justify-center items-center mb-20px">
 							<!-- 日期 -->
-							<div
-v-if="
+							<div v-if="
                   item.contentType !== KeFuMessageContentTypeEnum.SYSTEM && showTime(item, index)
                 " class="date-message">
 								{{ formatDate(item.createTime) }}
@@ -21,19 +20,16 @@ v-if="
 								{{ item.content }}
 							</div>
 						</div>
-						<div
-:class="[
+						<div :class="[
                 item.senderType === UserTypeEnum.MEMBER
                   ? `ss-row-left`
                   : item.senderType === UserTypeEnum.ADMIN
                     ? `ss-row-right`
                     : ''
               ]" class="flex mb-20px w-[100%]">
-							<el-avatar
-v-if="item.senderType === UserTypeEnum.MEMBER" :src="conversation.userAvatar"
+							<el-avatar v-if="item.senderType === UserTypeEnum.MEMBER" :src="conversation.userAvatar"
 								alt="avatar" class="w-60px h-60px" />
-							<div
-:class="{ 'kefu-message': KeFuMessageContentTypeEnum.TEXT === item.contentType }"
+							<div :class="{ 'kefu-message': KeFuMessageContentTypeEnum.TEXT === item.contentType }"
 								class="p-10px">
 								<!-- 文本消息 -->
 								<MessageItem :message="item">
@@ -44,15 +40,13 @@ v-if="item.senderType === UserTypeEnum.MEMBER" :src="conversation.userAvatar"
 								</MessageItem>
 								<!-- 图片消息 -->
 								<MessageItem :message="item">
-									<el-image
-v-if="KeFuMessageContentTypeEnum.IMAGE === item.contentType"
+									<el-image v-if="KeFuMessageContentTypeEnum.IMAGE === item.contentType"
 										:initial-index="0" :preview-src-list="[item.content]" :src="item.content"
 										class="w-200px" fit="contain" preview-teleported />
 								</MessageItem>
 								<!-- 商品消息 -->
 								<MessageItem :message="item">
-									<ProductItem
-v-if="KeFuMessageContentTypeEnum.PRODUCT === item.contentType"
+									<ProductItem v-if="KeFuMessageContentTypeEnum.PRODUCT === item.contentType"
 										:spuId="getMessageContent(item).spuId" :picUrl="getMessageContent(item).picUrl"
 										:price="getMessageContent(item).price"
 										:skuText="getMessageContent(item).introduction"
@@ -61,20 +55,17 @@ v-if="KeFuMessageContentTypeEnum.PRODUCT === item.contentType"
 								</MessageItem>
 								<!-- 订单消息 -->
 								<MessageItem :message="item">
-									<OrderItem
-v-if="KeFuMessageContentTypeEnum.ORDER === item.contentType"
+									<OrderItem v-if="KeFuMessageContentTypeEnum.ORDER === item.contentType"
 										:message="item" class="max-w-100%" />
 								</MessageItem>
 							</div>
-							<el-avatar
-v-if="item.senderType === UserTypeEnum.ADMIN" :src="item.senderAvatar"
+							<el-avatar v-if="item.senderType === UserTypeEnum.ADMIN" :src="item.senderAvatar"
 								alt="avatar" />
 						</div>
 					</div>
 				</div>
 			</el-scrollbar>
-			<div
-v-show="showNewMessageTip" class="newMessageTip flex items-center cursor-pointer"
+			<div v-show="showNewMessageTip" class="newMessageTip flex items-center cursor-pointer"
 				@click="handleToNewMessage">
 				<span>有新消息</span>
 				<Icon class="ml-5px" icon="ep:bottom" />
@@ -91,18 +82,21 @@ v-show="showNewMessageTip" class="newMessageTip flex items-center cursor-pointer
 						<img :src="Picture" class="w-32px h-32px" @click="huashu" />
 					</div>
 					<!-- 转接按钮 -->
-					<el-dropdown placement="top" style="margin-left: auto;margin-right: 15px; margin-top:5px;margin-top:5px;cursor: pointer;" ref="dropdown1" trigger="contextmenu">
+					<el-dropdown placement="top"
+						style="margin-left: auto;margin-right: 15px; margin-top:5px;margin-top:5px;cursor: pointer;"
+						ref="dropdown1" trigger="contextmenu">
 						<div>
-							<img :src="Picture2" class="w-27px h-27px" @click="getOnlineStaffList"  title="转接"/>
+							<img :src="Picture2" class="w-27px h-27px" @click="getOnlineStaffList" title="转接" />
 						</div>
 						<template #dropdown>
-							<el-dropdown-item v-for="staff in onlineStaffList" :key="staff.id" :disabled="staff.id===getStaffToken()" @click="transferConversion(staff.id)">
+							<el-dropdown-item v-for="staff in onlineStaffList" :key="staff.id"
+								:disabled="staff.id===getStaffToken()" @click="transferConversion(staff.id)">
 								{{ staff.name }}
 							</el-dropdown-item>
 						</template>
 					</el-dropdown>
-					
-					
+
+
 				</div>
 				<el-input v-model="message" :rows="6" style="border-style: none" type="textarea" />
 				<div class="h-45px flex justify-end">
@@ -120,12 +114,15 @@ v-show="showNewMessageTip" class="newMessageTip flex items-center cursor-pointer
 			<!-- 左边占 30% -->
 			<div style="flex: 0 0 20%; padding: 10px;">
 				<el-menu :default-active="targetMenuId">
-				  <el-menu-item  v-for="item in huashuType" :index="item.value" :key="item.value"  @click="clickMenu(item.value)">{{item.label}}</el-menu-item>
+					<el-menu-item v-for="item in huashuType" :index="item.value" :key="item.value"
+						@click="clickMenu(item.value)">{{item.label}}</el-menu-item>
 				</el-menu>
 			</div>
 			<!-- 右边占 70% -->
 			<div style="flex: 1; padding: 5px; overflow-y: auto; max-height: 400px;">
-				<p v-for="item in verbalTrickList" :key="item.id" style="font-size: 12px;cursor: pointer;transition: background-color 0.3s;" class="hover-shadow" @click="huashuClick(item.details)">
+				<p v-for="item in verbalTrickList" :key="item.id"
+					style="font-size: 12px;cursor: pointer;transition: background-color 0.3s;" class="hover-shadow"
+					@click="huashuClick(item.details)">
 					{{item.details}}
 				</p>
 			</div>
@@ -155,11 +152,11 @@ v-show="showNewMessageTip" class="newMessageTip flex items-center cursor-pointer
 	import relativeTime from 'dayjs/plugin/relativeTime'
 	import { debounce } from 'lodash-es'
 	import { jsonParse } from '@/utils'
-	import { getStaffToken, setStaffToken} from '@/utils/auth'
+	import { getStaffToken, setStaffToken } from '@/utils/auth'
 	import type { DropdownInstance } from 'element-plus'
 	import { ref } from 'vue'
-	
-	
+
+
 	import * as DictDataApi from '@/api/system/dict/dict.data'
 	const huashuType = ref<DictDataApi.DictDataVO[]>([]) // 
 	const targetMenuId = ref('0')
@@ -170,7 +167,7 @@ v-show="showNewMessageTip" class="newMessageTip flex items-center cursor-pointer
 	let dialogVisible = ref(false) // 弹窗的是否展示
 	const dialogTitle = ref('客服话术') // 客服话术库弹窗标题
 	// 话术库的数据
-    const verbalTrickList = ref<VerbalTrickVO[]>([])
+	const verbalTrickList = ref<VerbalTrickVO[]>([])
 	const message = ref('') // 消息弹窗
 	const { replaceEmoji } = useEmoji()
 	const messageTool = useMessage()
@@ -178,10 +175,10 @@ v-show="showNewMessageTip" class="newMessageTip flex items-center cursor-pointer
 	const conversation = ref<KeFuConversationRespVO>({} as KeFuConversationRespVO) // 用户会话
 	const showNewMessageTip = ref(false) // 显示有新消息提示
 	import { SupportStaffApi, SupportStaffVO } from '@/api/mall/promotion/supportstaff' // 客服列表接口
-	import { KeFuConversationApi} from '@/api/mall/promotion/kefu/conversation'
+	import { KeFuConversationApi } from '@/api/mall/promotion/kefu/conversation'
 	import { number } from 'vue-types'
 	const onlineStaffList = ref<SupportStaffVO[]>([]) // 在线客服列表的数据
-	
+
 	const queryParams = reactive({
 		pageNo: 1,
 		pageSize: 10,
@@ -297,25 +294,25 @@ v-show="showNewMessageTip" class="newMessageTip flex items-center cursor-pointer
 	//话术分类菜单
 	const getHuaShuTypeList = async () => {
 		const data = await DictDataApi.getHuaShuTypeList()
-	    huashuType.value = data
+		huashuType.value = data
 	}
 	//话术内容
-	const getVerbalTrickList = async (id: string) => {
+	const getVerbalTrickList = async (id : string) => {
 		const response = await VerbalTrickApi.getVerbalTrickList(id);
-	    verbalTrickList.value = response; // 将数据部分赋值给 verbalTrickList
-	}	
-	
-	
+		verbalTrickList.value = response; // 将数据部分赋值给 verbalTrickList
+	}
+
+
 	/*选择话术库内容*/
-	const huashuClick = (content: string) => {
+	const huashuClick = (content : string) => {
 		message.value = content;
 		dialogVisible.value = false;
 	}
-	const clickMenu = (id: string) => {
-		console.log('1111111111',id)
+	const clickMenu = (id : string) => {
+		console.log('1111111111', id)
 		getVerbalTrickList(id)
 	}
-	
+
 
 	/** 发送文本消息 */
 	const handleSendMessage = async () => {
@@ -423,9 +420,9 @@ v-show="showNewMessageTip" class="newMessageTip flex items-center cursor-pointer
 		} finally {
 		}
 	}
-	
+
 	/** 转接客服人员列表 id：会话id kefuId：客服人员id */
-	const transferConversion = async (kefuId: number) => {
+	const transferConversion = async (kefuId : number) => {
 		try {
 			await KeFuConversationApi.transferConversion(queryParams.conversationId, kefuId)
 		} finally {
@@ -435,15 +432,17 @@ v-show="showNewMessageTip" class="newMessageTip flex items-center cursor-pointer
 	/** 初始化 **/
 	onMounted(() => {
 		getHuaShuTypeList()
-	  getVerbalTrickList(targetMenuId.value)
+		getVerbalTrickList(targetMenuId.value)
 	})
 </script>
 
 <style lang="scss" scoped>
-	
 	.hover-shadow:hover {
-	  background-color: lightgray; /* 可根据需要调整颜色 */
+		background-color: lightgray;
+		
+		/* 可根据需要调整颜色 */
 	}
+
 	.kefu {
 		&-title {
 			border-bottom: #e4e0e0 solid 1px;
@@ -487,8 +486,8 @@ v-show="showNewMessageTip" class="newMessageTip flex items-center cursor-pointer
 					}
 				}
 			}
-			
-	
+
+
 
 			.ss-row-right {
 				justify-content: flex-end;
diff --git a/yudao-admin-vue3/src/views/mall/promotion/kefu/components/history/MemberBrowsingHistory.vue b/yudao-admin-vue3/src/views/mall/promotion/kefu/components/history/MemberBrowsingHistory.vue
index 52c1095..f1c8ce2 100644
--- a/yudao-admin-vue3/src/views/mall/promotion/kefu/components/history/MemberBrowsingHistory.vue
+++ b/yudao-admin-vue3/src/views/mall/promotion/kefu/components/history/MemberBrowsingHistory.vue
@@ -1,7 +1,7 @@
 <!-- 目录是不是叫 member 好点。然后这个组件是 MemberInfo，里面有浏览足迹 -->
 <template>
   <div v-show="!isEmpty(conversation)" class="kefu">
-    <div class="header-title h-60px flex justify-center items-center">他的足迹</div>
+    <!-- <div class="header-title h-60px flex justify-center items-center">他的足迹</div> -->
     <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
       <el-tab-pane label="最近浏览" name="a" />
       <el-tab-pane label="订单列表" name="b" />
diff --git a/yudao-admin-vue3/src/views/mall/promotion/kefu/index.vue b/yudao-admin-vue3/src/views/mall/promotion/kefu/index.vue
index bf94e40..4fb14fb 100644
--- a/yudao-admin-vue3/src/views/mall/promotion/kefu/index.vue
+++ b/yudao-admin-vue3/src/views/mall/promotion/kefu/index.vue
@@ -1,35 +1,99 @@
 <template>
-  <el-row :gutter="10" style="display: flex; justify-content: center;">
-    <!-- 会话列表 -->
-    <el-col :span="5" >
-      <ContentWrap>
-        <KeFuConversationList ref="keFuConversationRef" @change="handleChange" />
-      </ContentWrap>
-    </el-col>
-    <!-- 会话详情（选中会话的消息列表） -->
-    <el-col :span="10">
-      <ContentWrap> 
-        <KeFuMessageList ref="keFuChatBoxRef" @change="getConversationList" />
-      </ContentWrap>
-    </el-col>
-    <!-- 会员足迹（选中会话的会员足迹） -->
-    <el-col :span="5">
-      <ContentWrap>
-        <MemberBrowsingHistory ref="memberBrowsingHistoryRef" />
-      </ContentWrap>
-    </el-col>
-  </el-row>
+  <div>
+    <!-- 新区域，放在头部 -->
+   <el-row style="display: flex; justify-content: center;">
+		
+      <el-col :span="24">
+        <div style="width:100%;height:70px;background-color:#3c80ff;">
+          <el-row>
+            <el-col :span="6">
+              <el-input
+                style="width: 80%;margin-top: 20px;margin-left:10px;"
+                :suffix-icon="Search"
+              />
+            </el-col>
+
+            <el-col :span="6">
+				 <span style="display: flex;  margin-top: 15px;">
+				    <el-avatar
+				      src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
+				    />
+				    <span style="margin-left:5px;margin-top: 9px;">客服桃子</span>
+				    <el-switch
+					  style="margin-top: 4px;--el-switch-on-color: #13ce66; --el-switch-off-color: #b6bac1;"
+					  v-model="value6"
+				      class="ml-2"
+				      width="60"
+				      inline-prompt
+				      active-text="在线"
+				      inactive-text="下线"
+				    />
+				  </span>
+            </el-col>
+            <el-col :span="6">
+              <el-button size="small" round style="margin-top:23px;margin-left:75%">退出登录</el-button>
+            </el-col>
+
+            <el-col :span="6">
+              <el-menu
+			  background-color="#3c80ff"
+			  text-color="white"
+			  active-text-color="white"
+				  style="width:100%;display: flex;"
+                >
+                  <el-menu-item style="width:33%;height:70px" index="1">客户信息</el-menu-item>
+                  <el-menu-item style="width:33%;height:70px" index="2">交易订单</el-menu-item>
+                  <el-menu-item style="width:34%;height:70px" index="3">商品信息</el-menu-item>
+                </el-menu>
+				
+				
+				<!-- <div style="color: #ffffff;" class="header-title h-60px flex justify-center items-center">他的足迹</div> -->
+				
+            </el-col>
+          </el-row>
+
+        </div>
+      </el-col>
+    </el-row>
+
+    <!-- 原有的三个区域 -->
+    <el-row style="display: flex; justify-content: center;">
+      <!-- 会话列表 -->
+      <el-col :span="6">
+        <ContentWrap>
+          <KeFuConversationList ref="keFuConversationRef" @change="handleChange"/>
+        </ContentWrap>
+      </el-col>
+
+      <!-- 会话详情（选中会话的消息列表） -->
+      <el-col :span="12">
+        <ContentWrap>
+          <KeFuMessageList ref="keFuChatBoxRef" @change="getConversationList"/>
+        </ContentWrap>
+      </el-col>
+
+      <!-- 会员足迹（选中会话的会员足迹） -->
+      <el-col :span="6">
+        <ContentWrap>
+          <MemberBrowsingHistory ref="memberBrowsingHistoryRef"/>
+        </ContentWrap>
+      </el-col>
+    </el-row>
+  </div>
 </template>
 
 
 <script lang="ts" setup>
-  import { KeFuConversationList, KeFuMessageList, MemberBrowsingHistory } from './components'
-  import { WebSocketMessageTypeConstants } from './components/tools/constants'
-  import { KeFuConversationRespVO } from '@/api/mall/promotion/kefu/conversation'
-  import { getRefreshToken, getAccessToken } from '@/utils/auth'
-  import { useWebSocket } from '@vueuse/core'
+  import {KeFuConversationList, KeFuMessageList, MemberBrowsingHistory} from './components'
+  import {WebSocketMessageTypeConstants} from './components/tools/constants'
+  import {KeFuConversationRespVO} from '@/api/mall/promotion/kefu/conversation'
+  import {getRefreshToken, getAccessToken} from '@/utils/auth'
+  import {useWebSocket} from '@vueuse/core'
+  import {Search} from '@element-plus/icons-vue'
 
-  defineOptions({ name: 'KeFu' })
+  defineOptions({name: 'KeFu'})
+  
+  const value6 = ref(true)
 
   const message = useMessage() // 消息弹窗
 
@@ -41,7 +105,7 @@
   ) // WebSocket 服务地址
 
   /** 发起 WebSocket 连接 */
-  const { data, close, open } = useWebSocket(server.value, {
+  const {data, close, open} = useWebSocket(server.value, {
     autoReconnect: false,
     heartbeat: true
   })
@@ -116,6 +180,7 @@
   .kefu {
     height: calc(100vh - 165px);
     overflow: auto; /* 确保内容可滚动 */
+
   }
 
   /* 定义滚动条样式 */
@@ -133,8 +198,10 @@
 
   /* 定义滑块 内阴影+圆角 */
   ::-webkit-scrollbar-thumb {
+
     border-radius: 10px;
     box-shadow: inset 0 0 0 rgba(240, 240, 240, 0.5);
     background-color: rgba(240, 240, 240, 0.5);
+
   }
 </style>