优化后台客服界面

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="ml-3px w-full">
-          <div class="flex justify-between items-center w-100%">
+          <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;
+    height: 55px;	
-    padding: 10px;
+    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; // 禁止换行

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
+							<div v-if="
-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
+						<div :class="[
-:class="[
                 item.senderType === UserTypeEnum.MEMBER
                   ? `ss-row-left`
                   : item.senderType === UserTypeEnum.ADMIN
                     ? `ss-row-right`
                     : ''
               ]" class="flex mb-20px w-[100%]">
-							<el-avatar
+							<el-avatar v-if="item.senderType === UserTypeEnum.MEMBER" :src="conversation.userAvatar"
-v-if="item.senderType === UserTypeEnum.MEMBER" :src="conversation.userAvatar"
 								alt="avatar" class="w-60px h-60px" />
-							<div
+							<div :class="{ 'kefu-message': KeFuMessageContentTypeEnum.TEXT === item.contentType }"
-: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
+									<el-image v-if="KeFuMessageContentTypeEnum.IMAGE === item.contentType"
-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
+									<ProductItem v-if="KeFuMessageContentTypeEnum.PRODUCT === item.contentType"
-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
+									<OrderItem v-if="KeFuMessageContentTypeEnum.ORDER === item.contentType"
-v-if="KeFuMessageContentTypeEnum.ORDER === item.contentType"
 										:message="item" class="max-w-100%" />
 								</MessageItem>
 							</div>
-							<el-avatar
+							<el-avatar v-if="item.senderType === UserTypeEnum.ADMIN" :src="item.senderAvatar"
-v-if="item.senderType === UserTypeEnum.ADMIN" :src="item.senderAvatar"
 								alt="avatar" />
 						</div>
 					</div>
 				</div>
 			</el-scrollbar>
-			<div
+			<div v-show="showNewMessageTip" class="newMessageTip flex items-center cursor-pointer"
-v-show="showNewMessageTip" class="newMessageTip flex items-center cursor-pointer"
 				@click="handleToNewMessage">
 				<span>有新消息</span>
 				<Icon class="ml-5px" icon="ep:bottom" />
@@ -91,12 +82,15 @@ 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="转接" />
 						</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>
@@ -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>
@@ -440,10 +437,12 @@ v-show="showNewMessageTip" class="newMessageTip flex items-center cursor-pointer
 </script>
 
 <style lang="scss" scoped>
-	
 	.hover-shadow:hover {
-	  background-color: lightgray; /* 可根据需要调整颜色 */
+		background-color: lightgray;
+		
+		/* 可根据需要调整颜色 */
 	}
+
 	.kefu {
 		&-title {
 			border-bottom: #e4e0e0 solid 1px;

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" />

yudao-admin-vue3/src/views/mall/promotion/kefu/index.vue

@@ -1,24 +1,85 @@
 <template>
-  <el-row :gutter="10" style="display: flex; justify-content: center;">
+  <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="5" >
+      <el-col :span="6">
         <ContentWrap>
           <KeFuConversationList ref="keFuConversationRef" @change="handleChange"/>
         </ContentWrap>
       </el-col>
+
       <!-- 会话详情（选中会话的消息列表） -->
-    <el-col :span="10">
+      <el-col :span="12">
         <ContentWrap>
           <KeFuMessageList ref="keFuChatBoxRef" @change="getConversationList"/>
         </ContentWrap>
       </el-col>
+
       <!-- 会员足迹（选中会话的会员足迹） -->
-    <el-col :span="5">
+      <el-col :span="6">
         <ContentWrap>
           <MemberBrowsingHistory ref="memberBrowsingHistoryRef"/>
         </ContentWrap>
       </el-col>
     </el-row>
+  </div>
 </template>
 
 
@@ -28,9 +89,12 @@
   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'})
   
+  const value6 = ref(true)
+
   const message = useMessage() // 消息弹窗
 
   // ======================= WebSocket start =======================
@@ -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>