【新增】：mall 客服消息样式设计

src/views/mall/promotion/kefu/components/KeFuChatBox.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-container class="kefu">
+  <el-container v-if="showChatBox" class="kefu">
     <el-header>
       <div class="kefu-title">{{ keFuConversation.userNickname }}</div>
     </el-header>
@@ -46,6 +46,7 @@
         />
       </div>
     </el-main>
+    <!-- TODO puhui999: 发送下次提交完善 -->
     <el-footer height="230px">
       <div class="h-[100%]">
         <div class="chat-tools">
@@ -58,7 +59,7 @@
       </div>
     </el-footer>
   </el-container>
-  <!-- 没选择左侧会话时显示空界面 -->
+  <el-empty v-else description="请选择左侧的一个会话后开始" />
 </template>
 
 <script lang="ts" setup>
@@ -67,6 +68,7 @@ import { KeFuConversationRespVO } from '@/api/mall/promotion/kefu/conversation'
 import { UserTypeEnum } from '@/utils/constants'
 import { replaceEmoji } from '@/views/mall/promotion/kefu/components/emoji'
 import { KeFuMessageContentTypeEnum } from '@/views/mall/promotion/kefu/components/constants'
+import { isEmpty } from '@/utils/is'
 
 defineOptions({ name: 'KeFuMessageBox' })
 const message = ref('') // 消息
@@ -82,6 +84,8 @@ const getMessageList = async (conversation: KeFuConversationRespVO) => {
   messageList.value = list
 }
 defineExpose({ getMessageList })
+// 是否显示聊天区域
+const showChatBox = computed(() => !isEmpty(keFuConversation.value))
 </script>
 
 <style lang="scss" scoped>

src/views/mall/promotion/kefu/components/KeFuConversationBox.vue

@@ -7,19 +7,21 @@
       class="kefu-conversation flex justify-between items-center"
       @click="openRightMessage(item, index)"
     >
-      <div class="kefu-conversation-left flex justify-center items-center">
+      <div class="flex justify-center items-center w-100%">
         <el-avatar :src="item.userAvatar" alt="avatar" />
-        <div class="ml-10px">
-          <div class="nickname">{{ item.userNickname }}</div>
+        <div class="ml-10px w-100%">
+          <div class="flex justify-between items-center w-100%">
+            <span>{{ item.userNickname }}</span>
+            <span class="color-[#989EA6]">
+              {{ formatDate(item.lastMessageTime) }}
+            </span>
+          </div>
           <div
             v-dompurify-html="replaceEmoji(item.lastMessageContent)"
             class="last-message flex items-center color-[#989EA6]"
           ></div>
         </div>
       </div>
-      <div class="kefu-conversation-right color-[#989EA6]">
-        {{ formatDate(item.lastMessageTime) }}
-      </div>
     </div>
   </div>
 </template>
@@ -30,7 +32,7 @@ import { replaceEmoji } from '@/views/mall/promotion/kefu/components/emoji'
 import { formatDate, getNowDateTime } from '@/utils/formatTime'
 
 defineOptions({ name: 'KeFuConversationBox' })
-const activeConversationIndex = ref(0) // 默认激活第一个
+const activeConversationIndex = ref(-1) // 选中的会话
 const conversationList = ref<KeFuConversationRespVO[]>([]) // 会话列表
 const getConversationList = async () => {
   conversationList.value = await KeFuConversationApi.getConversationList()
@@ -43,7 +45,8 @@ const getConversationList = async () => {
         'https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTKMezSxtOImrC9lbhwHiazYwck3xwrEcO7VJfG6WQo260whaeVNoByE5RreiaGsGfOMlIiaDhSaA991w/132',
       userNickname: '辉辉鸭' + i,
       lastMessageTime: getNowDateTime(),
-      lastMessageContent: '[爱心][爱心]你好哇',
+      lastMessageContent:
+        '[爱心][爱心]你好哇你好哇你好哇你好哇你好哇你好哇你好哇你好哇你好哇你好哇你好哇你好哇你好哇你好哇你好哇你好哇你好哇你好哇',
       lastMessageContentType: 1,
       adminPinned: false,
       userDeleted: false,
@@ -71,13 +74,11 @@ const openRightMessage = (item: KeFuConversationRespVO, index: number) => {
     background-color: #fff;
     transition: border-left 0.05s ease-in-out; /* 设置过渡效果 */
 
-    &-left {
-      .last-message {
-        width: 300px;
-        overflow: hidden; // 隐藏超出的文本
-        white-space: nowrap; // 禁止换行
-        text-overflow: ellipsis; // 添加省略号
-      }
+    .last-message {
+      width: 200px;
+      overflow: hidden; // 隐藏超出的文本
+      white-space: nowrap; // 禁止换行
+      text-overflow: ellipsis; // 添加省略号
     }
   }