From 34fe09e2dbcd431ba51202978b6db5e31f723b9c Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Mon, 4 Nov 2024 15:25:43 +0800
Subject: [PATCH 01/23] =?UTF-8?q?=E3=80=90=E5=8A=9F=E8=83=BD=E5=AE=8C?=
 =?UTF-8?q?=E5=96=84=E3=80=91=E5=95=86=E5=9F=8E=E5=AE=A2=E6=9C=8D:=20?=
 =?UTF-8?q?=E5=AE=A2=E6=9C=8D=E5=B8=83=E5=B1=80=E6=A0=B7=E5=BC=8F=E8=B0=83?=
 =?UTF-8?q?=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../kefu/components/KeFuConversationList.vue  |  20 ++--
 .../kefu/components/KeFuMessageList.vue       | 102 ++++++++++++------
 .../mall/promotion/kefu/components/index.ts   |   4 +-
 .../MemberInfo.vue}                           |  70 +++++++++---
 .../OrderBrowsingHistory.vue                  |   0
 .../ProductBrowsingHistory.vue                |   0
 src/views/mall/promotion/kefu/index.vue       |  38 +++----
 7 files changed, 155 insertions(+), 79 deletions(-)
 rename src/views/mall/promotion/kefu/components/{history/MemberBrowsingHistory.vue => member/MemberInfo.vue} (64%)
 rename src/views/mall/promotion/kefu/components/{history => member}/OrderBrowsingHistory.vue (100%)
 rename src/views/mall/promotion/kefu/components/{history => member}/ProductBrowsingHistory.vue (100%)

diff --git a/src/views/mall/promotion/kefu/components/KeFuConversationList.vue b/src/views/mall/promotion/kefu/components/KeFuConversationList.vue
index 6e011231..11ae0ae3 100644
--- a/src/views/mall/promotion/kefu/components/KeFuConversationList.vue
+++ b/src/views/mall/promotion/kefu/components/KeFuConversationList.vue
@@ -1,5 +1,6 @@
 <template>
-  <div class="kefu">
+  <el-aside class="kefu-conversation-aside p-10px h-100%" width="260px">
+    <div class="color-[#999] font-bold my-10px">会话记录({{ conversationList.length }})</div>
     <div
       v-for="item in conversationList"
       :key="item.id"
@@ -22,7 +23,7 @@
         <div class="ml-10px w-100%">
           <div class="flex justify-between items-center w-100%">
             <span class="username">{{ item.userNickname }}</span>
-            <span class="color-[var(--left-menu-text-color)]" style="font-size: 13px">
+            <span class="color-[#999]" style="font-size: 13px">
               {{ formatPast(item.lastMessageTime, 'YYYY-MM-DD') }}
             </span>
           </div>
@@ -31,7 +32,7 @@
             v-dompurify-html="
               getConversationDisplayText(item.lastMessageContentType, item.lastMessageContent)
             "
-            class="last-message flex items-center color-[var(--left-menu-text-color)]"
+            class="last-message flex items-center color-[#999]"
           >
           </div>
         </div>
@@ -65,7 +66,7 @@
         取消
       </li>
     </ul>
-  </div>
+  </el-aside>
 </template>
 
 <script lang="ts" setup>
@@ -179,7 +180,9 @@ watch(showRightMenu, (val) => {
 </script>
 
 <style lang="scss" scoped>
-.kefu {
+.kefu-conversation-aside {
+  background-color: #fff;
+
   &-conversation {
     height: 60px;
     padding: 10px;
@@ -206,12 +209,13 @@ watch(showRightMenu, (val) => {
   }
 
   .active {
-    border-left: 5px #3271ff solid;
-    background-color: var(--login-bg-color);
+    //border-left: 5px #96afea solid;
+    background-color: rgba(128, 128, 128, 0.5); // 透明色，暗黑模式下也能体现
+    border-radius: 8px;
   }
 
   .pinned {
-    background-color: var(--left-menu-bg-active-color);
+    background-color: rgba(128, 128, 128, 0.5); // 透明色，暗黑模式下也能体现
   }
 
   .right-menu-ul {
diff --git a/src/views/mall/promotion/kefu/components/KeFuMessageList.vue b/src/views/mall/promotion/kefu/components/KeFuMessageList.vue
index 483fdc24..1ab840bd 100644
--- a/src/views/mall/promotion/kefu/components/KeFuMessageList.vue
+++ b/src/views/mall/promotion/kefu/components/KeFuMessageList.vue
@@ -1,11 +1,11 @@
 <template>
   <el-container v-if="showKeFuMessageList" class="kefu">
-    <el-header>
+    <el-header class="kefu-header">
       <div class="kefu-title">{{ conversation.userNickname }}</div>
     </el-header>
     <el-main class="kefu-content overflow-visible">
-      <el-scrollbar ref="scrollbarRef" always height="calc(100vh - 495px)" @scroll="handleScroll">
-        <div v-if="refreshContent" ref="innerRef" class="w-[100%] pb-3px">
+      <el-scrollbar ref="scrollbarRef" always @scroll="handleScroll">
+        <div v-if="refreshContent" ref="innerRef" class="w-[100%] px-10px">
           <!-- 消息列表 -->
           <div v-for="(item, index) in getMessageList0" :key="item.id" class="w-[100%]">
             <div class="flex justify-center items-center mb-20px">
@@ -43,7 +43,9 @@
                 class="w-60px h-60px"
               />
               <div
-                :class="{ 'kefu-message': KeFuMessageContentTypeEnum.TEXT === item.contentType }"
+                :class="{
+                  'kefu-message': KeFuMessageContentTypeEnum.TEXT === item.contentType
+                }"
                 class="p-10px"
               >
                 <!-- 文本消息 -->
@@ -71,10 +73,10 @@
                 <MessageItem :message="item">
                   <ProductItem
                     v-if="KeFuMessageContentTypeEnum.PRODUCT === item.contentType"
-                    :spuId="getMessageContent(item).spuId"
                     :picUrl="getMessageContent(item).picUrl"
                     :price="getMessageContent(item).price"
                     :skuText="getMessageContent(item).introduction"
+                    :spuId="getMessageContent(item).spuId"
                     :title="getMessageContent(item).spuName"
                     :titleWidth="400"
                     class="max-w-70%"
@@ -108,23 +110,29 @@
         <Icon class="ml-5px" icon="ep:bottom" />
       </div>
     </el-main>
-    <el-footer height="230px">
-      <div class="h-[100%]">
-        <div class="chat-tools flex items-center">
-          <EmojiSelectPopover @select-emoji="handleEmojiSelect" />
-          <PictureSelectUpload
-            class="ml-15px mt-3px cursor-pointer"
-            @send-picture="handleSendPicture"
-          />
-        </div>
-        <el-input v-model="message" :rows="6" style="border-style: none" type="textarea" />
-        <div class="h-45px flex justify-end">
-          <el-button class="mt-10px" type="primary" @click="handleSendMessage">发送</el-button>
-        </div>
+    <el-footer class="kefu-footer">
+      <div class="chat-tools flex items-center">
+        <EmojiSelectPopover @select-emoji="handleEmojiSelect" />
+        <PictureSelectUpload
+          class="ml-15px mt-3px cursor-pointer"
+          @send-picture="handleSendPicture"
+        />
       </div>
+      <el-input
+        v-model="message"
+        :rows="6"
+        placeholder="输入消息，Enter发送，Shift+Enter换行"
+        style="border-style: none"
+        type="textarea"
+        @keyup.enter.prevent="handleSendMessage"
+      />
     </el-footer>
   </el-container>
-  <el-empty v-else description="请选择左侧的一个会话后开始" />
+  <el-container v-else class="kefu">
+    <el-main>
+      <el-empty description="请选择左侧的一个会话后开始" />
+    </el-main>
+  </el-container>
 </template>
 
 <script lang="ts" setup>
@@ -262,7 +270,11 @@ const handleSendPicture = async (picUrl: string) => {
 }
 
 /** 发送文本消息 */
-const handleSendMessage = async () => {
+const handleSendMessage = async (event: any) => {
+  // shift 不发送
+  if (event.shiftKey) {
+    return
+  }
   // 1. 校验消息是否为空
   if (isEmpty(unref(message.value))) {
     messageTool.notifyWarning('请输入消息后再发送哦！')
@@ -357,14 +369,29 @@ const showTime = computed(() => (item: KeFuMessageRespVO, index: number) => {
 
 <style lang="scss" scoped>
 .kefu {
-  &-title {
-    border-bottom: #e4e0e0 solid 1px;
-    height: 60px;
-    line-height: 60px;
+  background-color: #fff;
+  width: calc(100% - 300px - 260px);
+  border-left: var(--el-border-color) solid 1px;
+
+  .kefu-header {
+    background: #fbfbfb;
+    box-shadow: 0 0 0 0 #dcdfe6;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    &-title {
+      font-size: 18px;
+      font-weight: bold;
+    }
   }
 
   &-content {
+    margin: 0;
+    padding: 0;
     position: relative;
+    height: 100%;
+    width: 100%;
 
     .newMessageTip {
       position: absolute;
@@ -447,21 +474,36 @@ const showTime = computed(() => (item: KeFuMessageRespVO, index: number) => {
       border-radius: 12rpx;
       padding: 8rpx 16rpx;
       margin-bottom: 16rpx;
-      //background-color: #e8e8e8;
       color: #999;
       font-size: 24rpx;
     }
   }
 
-  .chat-tools {
-    width: 100%;
-    border: var(--el-border-color) solid 1px;
-    border-radius: 10px;
-    height: 44px;
+  .kefu-footer {
+    display: flex;
+    flex-direction: column;
+    height: auto;
+    margin: 0;
+    padding: 0;
+    border-top: var(--el-border-color) solid 1px;
+
+    .chat-tools {
+      width: 100%;
+      height: 44px;
+    }
   }
 
   ::v-deep(textarea) {
     resize: none;
   }
+
+  :deep(.el-input__wrapper) {
+    box-shadow: none !important;
+    border-radius: 0;
+  }
+
+  ::v-deep(.el-textarea__inner) {
+    box-shadow: none !important;
+  }
 }
 </style>
diff --git a/src/views/mall/promotion/kefu/components/index.ts b/src/views/mall/promotion/kefu/components/index.ts
index 585d0da7..0f60a6e4 100644
--- a/src/views/mall/promotion/kefu/components/index.ts
+++ b/src/views/mall/promotion/kefu/components/index.ts
@@ -1,5 +1,5 @@
 import KeFuConversationList from './KeFuConversationList.vue'
 import KeFuMessageList from './KeFuMessageList.vue'
-import MemberBrowsingHistory from './history/MemberBrowsingHistory.vue'
+import MemberInfo from './member/MemberInfo.vue'
 
-export { KeFuConversationList, KeFuMessageList, MemberBrowsingHistory }
+export { KeFuConversationList, KeFuMessageList, MemberInfo }
diff --git a/src/views/mall/promotion/kefu/components/history/MemberBrowsingHistory.vue b/src/views/mall/promotion/kefu/components/member/MemberInfo.vue
similarity index 64%
rename from src/views/mall/promotion/kefu/components/history/MemberBrowsingHistory.vue
rename to src/views/mall/promotion/kefu/components/member/MemberInfo.vue
index 52c1095b..287c3174 100644
--- a/src/views/mall/promotion/kefu/components/history/MemberBrowsingHistory.vue
+++ b/src/views/mall/promotion/kefu/components/member/MemberInfo.vue
@@ -1,21 +1,24 @@
 <!-- 目录是不是叫 member 好点。然后这个组件是 MemberInfo，里面有浏览足迹 -->
 <template>
-  <div v-show="!isEmpty(conversation)" class="kefu">
-    <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" />
-    </el-tabs>
-    <div>
-      <el-scrollbar ref="scrollbarRef" always height="calc(115vh - 400px)" @scroll="handleScroll">
-        <!-- 最近浏览 -->
-        <ProductBrowsingHistory v-if="activeName === 'a'" ref="productBrowsingHistoryRef" />
-        <!-- 订单列表 -->
-        <OrderBrowsingHistory v-if="activeName === 'b'" ref="orderBrowsingHistoryRef" />
-      </el-scrollbar>
-    </div>
-  </div>
-  <el-empty v-show="isEmpty(conversation)" description="请选择左侧的一个会话后开始" />
+  <el-container class="kefu">
+    <el-header class="kefu-header">
+      <el-tabs v-model="activeName" class="kefu-tabs" @tab-click="handleClick">
+        <el-tab-pane label="最近浏览" name="a" />
+        <el-tab-pane label="订单列表" name="b" />
+      </el-tabs>
+    </el-header>
+    <el-main class="kefu-content">
+      <div v-show="!isEmpty(conversation)">
+        <el-scrollbar ref="scrollbarRef" always @scroll="handleScroll">
+          <!-- 最近浏览 -->
+          <ProductBrowsingHistory v-if="activeName === 'a'" ref="productBrowsingHistoryRef" />
+          <!-- 订单列表 -->
+          <OrderBrowsingHistory v-if="activeName === 'b'" ref="orderBrowsingHistoryRef" />
+        </el-scrollbar>
+      </div>
+      <el-empty v-show="isEmpty(conversation)" description="请选择左侧的一个会话后开始" />
+    </el-main>
+  </el-container>
 </template>
 
 <script lang="ts" setup>
@@ -91,6 +94,41 @@ const handleScroll = debounce(() => {
 </script>
 
 <style lang="scss" scoped>
+.kefu {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  width: 300px !important;
+  background-color: #fff;
+  border-left: var(--el-border-color) solid 1px;
+
+  &-header {
+    background: #fbfbfb;
+    box-shadow: 0 0 0 0 #dcdfe6;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &-title {
+      font-size: 18px;
+      font-weight: bold;
+    }
+  }
+
+  &-content {
+    margin: 0;
+    padding: 0;
+    position: relative;
+    height: 100%;
+    width: 100%;
+  }
+
+  &-tabs {
+    height: 100%;
+    width: 100%;
+  }
+}
+
 .header-title {
   border-bottom: #e4e0e0 solid 1px;
 }
diff --git a/src/views/mall/promotion/kefu/components/history/OrderBrowsingHistory.vue b/src/views/mall/promotion/kefu/components/member/OrderBrowsingHistory.vue
similarity index 100%
rename from src/views/mall/promotion/kefu/components/history/OrderBrowsingHistory.vue
rename to src/views/mall/promotion/kefu/components/member/OrderBrowsingHistory.vue
diff --git a/src/views/mall/promotion/kefu/components/history/ProductBrowsingHistory.vue b/src/views/mall/promotion/kefu/components/member/ProductBrowsingHistory.vue
similarity index 100%
rename from src/views/mall/promotion/kefu/components/history/ProductBrowsingHistory.vue
rename to src/views/mall/promotion/kefu/components/member/ProductBrowsingHistory.vue
diff --git a/src/views/mall/promotion/kefu/index.vue b/src/views/mall/promotion/kefu/index.vue
index 2b54026b..08f69913 100644
--- a/src/views/mall/promotion/kefu/index.vue
+++ b/src/views/mall/promotion/kefu/index.vue
@@ -1,28 +1,16 @@
 <template>
-  <el-row :gutter="10">
+  <el-container class="kefu-layout">
     <!-- 会话列表 -->
-    <el-col :span="6">
-      <ContentWrap>
-        <KeFuConversationList ref="keFuConversationRef" @change="handleChange" />
-      </ContentWrap>
-    </el-col>
+    <KeFuConversationList ref="keFuConversationRef" @change="handleChange" />
     <!-- 会话详情（选中会话的消息列表） -->
-    <el-col :span="12">
-      <ContentWrap>
-        <KeFuMessageList ref="keFuChatBoxRef" @change="getConversationList" />
-      </ContentWrap>
-    </el-col>
+    <KeFuMessageList ref="keFuChatBoxRef" @change="getConversationList" />
     <!-- 会员足迹（选中会话的会员足迹） -->
-    <el-col :span="6">
-      <ContentWrap>
-        <MemberBrowsingHistory ref="memberBrowsingHistoryRef" />
-      </ContentWrap>
-    </el-col>
-  </el-row>
+    <MemberInfo ref="memberInfoRef" />
+  </el-container>
 </template>
 
 <script lang="ts" setup>
-import { KeFuConversationList, KeFuMessageList, MemberBrowsingHistory } from './components'
+import { KeFuConversationList, KeFuMessageList, MemberInfo } from './components'
 import { WebSocketMessageTypeConstants } from './components/tools/constants'
 import { KeFuConversationRespVO } from '@/api/mall/promotion/kefu/conversation'
 import { getRefreshToken } from '@/utils/auth'
@@ -91,10 +79,10 @@ const getConversationList = () => {
 
 /** 加载指定会话的消息列表 */
 const keFuChatBoxRef = ref<InstanceType<typeof KeFuMessageList>>()
-const memberBrowsingHistoryRef = ref<InstanceType<typeof MemberBrowsingHistory>>()
+const memberInfoRef = ref<InstanceType<typeof MemberInfo>>()
 const handleChange = (conversation: KeFuConversationRespVO) => {
   keFuChatBoxRef.value?.getNewMessageList(conversation)
-  memberBrowsingHistoryRef.value?.initHistory(conversation)
+  memberInfoRef.value?.initHistory(conversation)
 }
 
 /** 初始化 */
@@ -112,9 +100,13 @@ onBeforeUnmount(() => {
 </script>
 
 <style lang="scss">
-.kefu {
-  height: calc(100vh - 165px);
-  overflow: auto; /* 确保内容可滚动 */
+.kefu-layout {
+  position: absolute;
+  flex: 1;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
 }
 
 /* 定义滚动条样式 */

From 40d7f5786dc38e37057d32f9d9cc38ee0fe548d4 Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Mon, 4 Nov 2024 16:14:58 +0800
Subject: [PATCH 02/23] =?UTF-8?q?=E3=80=90=E5=8A=9F=E8=83=BD=E5=AE=8C?=
 =?UTF-8?q?=E5=96=84=E3=80=91=E5=95=86=E5=9F=8E=E5=AE=A2=E6=9C=8D:=20?=
 =?UTF-8?q?=E4=BC=9A=E5=91=98=E8=B6=B3=E8=BF=B9=E6=A0=B7=E5=BC=8F=E8=B0=83?=
 =?UTF-8?q?=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../kefu/components/member/MemberInfo.vue     | 92 ++++++++++++++-----
 1 file changed, 68 insertions(+), 24 deletions(-)

diff --git a/src/views/mall/promotion/kefu/components/member/MemberInfo.vue b/src/views/mall/promotion/kefu/components/member/MemberInfo.vue
index 287c3174..1faac4a6 100644
--- a/src/views/mall/promotion/kefu/components/member/MemberInfo.vue
+++ b/src/views/mall/promotion/kefu/components/member/MemberInfo.vue
@@ -2,18 +2,35 @@
 <template>
   <el-container class="kefu">
     <el-header class="kefu-header">
-      <el-tabs v-model="activeName" class="kefu-tabs" @tab-click="handleClick">
-        <el-tab-pane label="最近浏览" name="a" />
-        <el-tab-pane label="订单列表" name="b" />
-      </el-tabs>
+      <div
+        :class="{ 'kefu-header-item-activation': tabActivation('会员信息') }"
+        class="kefu-header-item cursor-pointer flex items-center justify-center"
+        @click="handleClick('会员信息')"
+      >
+        会员信息
+      </div>
+      <div
+        :class="{ 'kefu-header-item-activation': tabActivation('最近浏览') }"
+        class="kefu-header-item cursor-pointer flex items-center justify-center"
+        @click="handleClick('最近浏览')"
+      >
+        最近浏览
+      </div>
+      <div
+        :class="{ 'kefu-header-item-activation': tabActivation('交易订单') }"
+        class="kefu-header-item cursor-pointer flex items-center justify-center"
+        @click="handleClick('交易订单')"
+      >
+        交易订单
+      </div>
     </el-header>
     <el-main class="kefu-content">
       <div v-show="!isEmpty(conversation)">
         <el-scrollbar ref="scrollbarRef" always @scroll="handleScroll">
           <!-- 最近浏览 -->
-          <ProductBrowsingHistory v-if="activeName === 'a'" ref="productBrowsingHistoryRef" />
-          <!-- 订单列表 -->
-          <OrderBrowsingHistory v-if="activeName === 'b'" ref="orderBrowsingHistoryRef" />
+          <ProductBrowsingHistory v-if="activeTab === '最近浏览'" ref="productBrowsingHistoryRef" />
+          <!-- 交易订单 -->
+          <OrderBrowsingHistory v-if="activeTab === '交易订单'" ref="orderBrowsingHistoryRef" />
         </el-scrollbar>
       </div>
       <el-empty v-show="isEmpty(conversation)" description="请选择左侧的一个会话后开始" />
@@ -22,7 +39,6 @@
 </template>
 
 <script lang="ts" setup>
-import type { TabsPaneContext } from 'element-plus'
 import ProductBrowsingHistory from './ProductBrowsingHistory.vue'
 import OrderBrowsingHistory from './OrderBrowsingHistory.vue'
 import { KeFuConversationRespVO } from '@/api/mall/promotion/kefu/conversation'
@@ -32,25 +48,26 @@ import { ElScrollbar as ElScrollbarType } from 'element-plus/es/components/scrol
 
 defineOptions({ name: 'MemberBrowsingHistory' })
 
-const activeName = ref('a')
-
+const activeTab = ref('会员信息')
+const tabActivation = computed(() => (tab: string) => activeTab.value === tab)
 /** tab 切换 */
 const productBrowsingHistoryRef = ref<InstanceType<typeof ProductBrowsingHistory>>()
 const orderBrowsingHistoryRef = ref<InstanceType<typeof OrderBrowsingHistory>>()
-const handleClick = async (tab: TabsPaneContext) => {
-  activeName.value = tab.paneName as string
+const handleClick = async (tab: string) => {
+  activeTab.value = tab
   await nextTick()
   await getHistoryList()
 }
 
 /** 获得历史数据 */
-// TODO @puhui：不要用 a、b 哈。就订单列表、浏览列表这种噶
 const getHistoryList = async () => {
-  switch (activeName.value) {
-    case 'a':
+  switch (activeTab.value) {
+    case '会员信息':
+      break
+    case '最近浏览':
       await productBrowsingHistoryRef.value?.getHistoryList(conversation.value)
       break
-    case 'b':
+    case '交易订单':
       await orderBrowsingHistoryRef.value?.getHistoryList(conversation.value)
       break
     default:
@@ -60,11 +77,13 @@ const getHistoryList = async () => {
 
 /** 加载下一页数据 */
 const loadMore = async () => {
-  switch (activeName.value) {
-    case 'a':
+  switch (activeTab.value) {
+    case '会员信息':
+      break
+    case '最近浏览':
       await productBrowsingHistoryRef.value?.loadMore()
       break
-    case 'b':
+    case '交易订单':
       await orderBrowsingHistoryRef.value?.loadMore()
       break
     default:
@@ -75,7 +94,7 @@ const loadMore = async () => {
 /** 浏览历史初始化 */
 const conversation = ref<KeFuConversationRespVO>({} as KeFuConversationRespVO) // 用户会话
 const initHistory = async (val: KeFuConversationRespVO) => {
-  activeName.value = 'a'
+  activeTab.value = '会员信息'
   conversation.value = val
   await nextTick()
   await getHistoryList()
@@ -95,9 +114,6 @@ const handleScroll = debounce(() => {
 
 <style lang="scss" scoped>
 .kefu {
-  margin: 0;
-  padding: 0;
-  height: 100%;
   width: 300px !important;
   background-color: #fff;
   border-left: var(--el-border-color) solid 1px;
@@ -107,12 +123,40 @@ const handleScroll = debounce(() => {
     box-shadow: 0 0 0 0 #dcdfe6;
     display: flex;
     align-items: center;
-    justify-content: center;
+    justify-content: space-around;
 
     &-title {
       font-size: 18px;
       font-weight: bold;
     }
+
+    &-item {
+      height: 100%;
+      width: 100%;
+      position: relative;
+
+      &-activation::before {
+        content: '';
+        position: absolute; /* 绝对定位 */
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0; /* 覆盖整个元素 */
+        border-bottom: 2px solid black; /* 边框样式 */
+        pointer-events: none; /* 确保点击事件不会被伪元素拦截 */
+      }
+
+      &:hover::before {
+        content: '';
+        position: absolute; /* 绝对定位 */
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0; /* 覆盖整个元素 */
+        border-bottom: 2px solid black; /* 边框样式 */
+        pointer-events: none; /* 确保点击事件不会被伪元素拦截 */
+      }
+    }
   }
 
   &-content {

From ce3380fa3fe39e69ee97e06a0dec678dfdb9044d Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Mon, 4 Nov 2024 16:44:10 +0800
Subject: [PATCH 03/23] =?UTF-8?q?=E3=80=90=E5=8A=9F=E8=83=BD=E5=AE=8C?=
 =?UTF-8?q?=E5=96=84=E3=80=91=E5=95=86=E5=9F=8E=E5=AE=A2=E6=9C=8D:=20?=
 =?UTF-8?q?=E6=B6=88=E6=81=AF=E6=A0=B7=E5=BC=8F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../kefu/components/KeFuConversationList.vue  | 15 ++----
 .../kefu/components/KeFuMessageList.vue       | 49 ++++++-------------
 .../kefu/components/member/MemberInfo.vue     |  4 +-
 3 files changed, 21 insertions(+), 47 deletions(-)

diff --git a/src/views/mall/promotion/kefu/components/KeFuConversationList.vue b/src/views/mall/promotion/kefu/components/KeFuConversationList.vue
index 11ae0ae3..5e57266f 100644
--- a/src/views/mall/promotion/kefu/components/KeFuConversationList.vue
+++ b/src/views/mall/promotion/kefu/components/KeFuConversationList.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-aside class="kefu-conversation-aside p-10px h-100%" width="260px">
+  <el-aside class="kefu p-5px h-100%" width="260px">
     <div class="color-[#999] font-bold my-10px">会话记录({{ conversationList.length }})</div>
     <div
       v-for="item in conversationList"
@@ -180,14 +180,13 @@ watch(showRightMenu, (val) => {
 </script>
 
 <style lang="scss" scoped>
-.kefu-conversation-aside {
+.kefu {
   background-color: #fff;
 
   &-conversation {
     height: 60px;
-    padding: 10px;
     //background-color: #fff;
-    transition: border-left 0.05s ease-in-out; /* 设置过渡效果 */
+    //transition: border-left 0.05s ease-in-out; /* 设置过渡效果 */
 
     .username {
       min-width: 0;
@@ -208,14 +207,10 @@ watch(showRightMenu, (val) => {
     }
   }
 
-  .active {
-    //border-left: 5px #96afea solid;
-    background-color: rgba(128, 128, 128, 0.5); // 透明色，暗黑模式下也能体现
-    border-radius: 8px;
-  }
-
+  .active,
   .pinned {
     background-color: rgba(128, 128, 128, 0.5); // 透明色，暗黑模式下也能体现
+    border-radius: 8px;
   }
 
   .right-menu-ul {
diff --git a/src/views/mall/promotion/kefu/components/KeFuMessageList.vue b/src/views/mall/promotion/kefu/components/KeFuMessageList.vue
index 1ab840bd..15179495 100644
--- a/src/views/mall/promotion/kefu/components/KeFuMessageList.vue
+++ b/src/views/mall/promotion/kefu/components/KeFuMessageList.vue
@@ -408,21 +408,12 @@ const showTime = computed(() => (item: KeFuMessageRespVO, index: number) => {
       justify-content: flex-start;
 
       .kefu-message {
-        margin-left: 20px;
-        position: relative;
-
-        &::before {
-          content: '';
-          width: 10px;
-          height: 10px;
-          left: -19px;
-          top: calc(50% - 10px);
-          position: absolute;
-          border-left: 5px solid transparent;
-          border-bottom: 5px solid transparent;
-          border-top: 5px solid transparent;
-          border-right: 5px solid var(--app-content-bg-color);
-        }
+        background-color: rgb(245, 245, 245);
+        margin-left: 10px;
+        margin-top: 18px;
+        border-top-right-radius: 10px;
+        border-bottom-right-radius: 10px;
+        border-bottom-left-radius: 10px;
       }
     }
 
@@ -430,37 +421,25 @@ const showTime = computed(() => (item: KeFuMessageRespVO, index: number) => {
       justify-content: flex-end;
 
       .kefu-message {
-        margin-right: 20px;
-        position: relative;
-
-        &::after {
-          content: '';
-          width: 10px;
-          height: 10px;
-          right: -19px;
-          top: calc(50% - 10px);
-          position: absolute;
-          border-left: 5px solid var(--app-content-bg-color);
-          border-bottom: 5px solid transparent;
-          border-top: 5px solid transparent;
-          border-right: 5px solid transparent;
-        }
+        background-color: rgb(206, 223, 255);
+        margin-right: 10px;
+        margin-top: 18px;
+        border-top-left-radius: 10px;
+        border-bottom-right-radius: 10px;
+        border-bottom-left-radius: 10px;
       }
     }
 
     // 消息气泡
     .kefu-message {
-      color: #a9a9a9;
-      border-radius: 5px;
-      box-shadow: 3px 3px 5px rgba(220, 220, 220, 0.1);
+      color: #414141;
+      font-weight: 500;
       padding: 5px 10px;
       width: auto;
       max-width: 50%;
       text-align: left;
       display: inline-block !important;
-      position: relative;
       word-break: break-all;
-      background-color: var(--app-content-bg-color);
       transition: all 0.2s;
 
       &:hover {
diff --git a/src/views/mall/promotion/kefu/components/member/MemberInfo.vue b/src/views/mall/promotion/kefu/components/member/MemberInfo.vue
index 1faac4a6..855e3d60 100644
--- a/src/views/mall/promotion/kefu/components/member/MemberInfo.vue
+++ b/src/views/mall/promotion/kefu/components/member/MemberInfo.vue
@@ -142,7 +142,7 @@ const handleScroll = debounce(() => {
         left: 0;
         right: 0;
         bottom: 0; /* 覆盖整个元素 */
-        border-bottom: 2px solid black; /* 边框样式 */
+        border-bottom: 2px solid rgba(128, 128, 128, 0.5); /* 边框样式 */
         pointer-events: none; /* 确保点击事件不会被伪元素拦截 */
       }
 
@@ -153,7 +153,7 @@ const handleScroll = debounce(() => {
         left: 0;
         right: 0;
         bottom: 0; /* 覆盖整个元素 */
-        border-bottom: 2px solid black; /* 边框样式 */
+        border-bottom: 2px solid rgba(128, 128, 128, 0.5); /* 边框样式 */
         pointer-events: none; /* 确保点击事件不会被伪元素拦截 */
       }
     }

From 70abc5fc1748d009737baf3cc40cfd6c6c8e0aac Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Mon, 4 Nov 2024 17:59:30 +0800
Subject: [PATCH 04/23] =?UTF-8?q?=E3=80=90=E5=8A=9F=E8=83=BD=E5=AE=8C?=
 =?UTF-8?q?=E5=96=84=E3=80=91=E5=95=86=E5=9F=8E=E5=AE=A2=E6=9C=8D:=20?=
 =?UTF-8?q?=E6=B6=88=E6=81=AF=E8=8E=B7=E5=8F=96=E6=94=B9=E4=B8=BA=E6=B8=B8?=
 =?UTF-8?q?=E6=A0=87=E6=9F=A5=E8=AF=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/mall/promotion/kefu/message/index.ts  |  6 +--
 src/store/modules/mall/kefu.ts                | 37 +++++++++++++++++++
 .../kefu/components/KeFuMessageList.vue       | 33 ++++++++---------
 3 files changed, 56 insertions(+), 20 deletions(-)
 create mode 100644 src/store/modules/mall/kefu.ts

diff --git a/src/api/mall/promotion/kefu/message/index.ts b/src/api/mall/promotion/kefu/message/index.ts
index a12167fa..acf23b5c 100644
--- a/src/api/mall/promotion/kefu/message/index.ts
+++ b/src/api/mall/promotion/kefu/message/index.ts
@@ -29,8 +29,8 @@ export const KeFuMessageApi = {
       url: '/promotion/kefu-message/update-read-status?conversationId=' + conversationId
     })
   },
-  // 获得消息分页数据
-  getKeFuMessagePage: async (params: any) => {
-    return await request.get({ url: '/promotion/kefu-message/page', params })
+  // 获得消息数据
+  getKeFuMessageList: async (params: any) => {
+    return await request.get({ url: '/promotion/kefu-message/list', params })
   }
 }
diff --git a/src/store/modules/mall/kefu.ts b/src/store/modules/mall/kefu.ts
new file mode 100644
index 00000000..f3afc03b
--- /dev/null
+++ b/src/store/modules/mall/kefu.ts
@@ -0,0 +1,37 @@
+import { store } from '@/store'
+import { defineStore } from 'pinia'
+import { KeFuConversationApi, KeFuConversationRespVO } from '@/api/mall/promotion/kefu/conversation'
+import { KeFuMessageRespVO } from '@/api/mall/promotion/kefu/message'
+
+// TODO puhui999: 待优化完善
+interface MallKefuInfoVO {
+  conversationList: KeFuConversationRespVO[] // 会话列表
+  conversationMessageList: Map<number, KeFuMessageRespVO[]> // 会话消息
+}
+
+export const useMallKefuStore = defineStore('mall-kefu', {
+  state: (): MallKefuInfoVO => ({
+    conversationList: [],
+    conversationMessageList: new Map<number, KeFuMessageRespVO[]>() // key 会话，value 会话消息列表
+  }),
+  getters: {
+    getConversationList(): KeFuConversationRespVO[] {
+      return this.conversationList
+    },
+    getConversationMessageList(): Map<number, KeFuMessageRespVO[]> {
+      return this.conversationMessageList
+    }
+  },
+  actions: {
+    async setConversationList() {
+      const list = await KeFuConversationApi.getConversationList()
+      list.sort((a: KeFuConversationRespVO, _) => (a.adminPinned ? -1 : 1))
+      this.conversationList = list
+    }
+    // async setConversationMessageList(conversationId: number) {}
+  }
+})
+
+export const useUserStoreWithOut = () => {
+  return useMallKefuStore(store)
+}
diff --git a/src/views/mall/promotion/kefu/components/KeFuMessageList.vue b/src/views/mall/promotion/kefu/components/KeFuMessageList.vue
index 15179495..7d1b1631 100644
--- a/src/views/mall/promotion/kefu/components/KeFuMessageList.vue
+++ b/src/views/mall/promotion/kefu/components/KeFuMessageList.vue
@@ -164,9 +164,8 @@ const messageList = ref<KeFuMessageRespVO[]>([]) // 消息列表
 const conversation = ref<KeFuConversationRespVO>({} as KeFuConversationRespVO) // 用户会话
 const showNewMessageTip = ref(false) // 显示有新消息提示
 const queryParams = reactive({
-  pageNo: 1,
-  pageSize: 10,
-  conversationId: 0
+  conversationId: 0,
+  createTime: undefined
 })
 const total = ref(0) // 消息总条数
 const refreshContent = ref(false) // 内容刷新,主要解决会话消息页面高度不一致导致的滚动功能精度失效
@@ -175,14 +174,20 @@ const refreshContent = ref(false) // 内容刷新,主要解决会话消息页面
 const getMessageContent = computed(() => (item: any) => jsonParse(item.content))
 /** 获得消息列表 */
 const getMessageList = async () => {
-  const res = await KeFuMessageApi.getKeFuMessagePage(queryParams)
-  total.value = res.total
+  const res = await KeFuMessageApi.getKeFuMessageList(queryParams)
+  if (isEmpty(res)) {
+    // 当返回的是空列表说明没有消息或者已经查询完了历史消息
+    skipGetMessageList.value = true
+    return
+  }
+  queryParams.createTime = formatDate(res.at(-1).createTime) as any
+
   // 情况一：加载最新消息
-  if (queryParams.pageNo === 1) {
-    messageList.value = res.list
+  if (!queryParams.createTime) {
+    messageList.value = res
   } else {
     // 情况二：加载历史消息
-    for (const item of res.list) {
+    for (const item of res) {
       pushMessage(item)
     }
   }
@@ -216,8 +221,7 @@ const refreshMessageList = async (message?: any) => {
     }
     pushMessage(message)
   } else {
-    // TODO @puhui999：不基于 page 做。而是流式分页；通过 createTime 排序查询；
-    queryParams.pageNo = 1
+    queryParams.createTime = undefined
     await getMessageList()
   }
 
@@ -234,7 +238,6 @@ const refreshMessageList = async (message?: any) => {
 // TODO @puhui999：可优化：可以考虑本地做每个会话的消息 list 缓存；然后点击切换时，读取缓存；然后异步获取新消息，merge 下；
 const getNewMessageList = async (val: KeFuConversationRespVO) => {
   // 会话切换,重置相关参数
-  queryParams.pageNo = 1
   messageList.value = []
   total.value = 0
   loadHistory.value = false
@@ -242,16 +245,14 @@ const getNewMessageList = async (val: KeFuConversationRespVO) => {
   // 设置会话相关属性
   conversation.value = val
   queryParams.conversationId = val.id
+  queryParams.createTime = undefined
   // 获取消息
   await refreshMessageList()
 }
 defineExpose({ getNewMessageList, refreshMessageList })
 
 const showKeFuMessageList = computed(() => !isEmpty(conversation.value)) // 是否显示聊天区域
-const skipGetMessageList = computed(() => {
-  // 已加载到最后一页的话则不触发新的消息获取
-  return total.value > 0 && Math.ceil(total.value / queryParams.pageSize) === queryParams.pageNo
-}) // 跳过消息获取
+const skipGetMessageList = ref(false) // 跳过消息获取
 
 /** 处理表情选择 */
 const handleEmojiSelect = (item: Emoji) => {
@@ -345,8 +346,6 @@ const handleOldMessage = async () => {
     return
   }
   loadHistory.value = true
-  // 加载消息列表
-  queryParams.pageNo += 1
   await getMessageList()
   // 等页面加载完后，获得上一页最后一条消息的位置，控制滚动到它所在位置
   scrollbarRef.value!.setScrollTop(innerRef.value!.clientHeight - oldPageHeight)

From 6f5cc3248fb1abacc28a79e4024987e29d338d05 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Tue, 5 Nov 2024 09:50:47 +0800
Subject: [PATCH 05/23] =?UTF-8?q?=E3=80=90=E4=BB=A3=E7=A0=81=E8=AF=84?=
 =?UTF-8?q?=E5=AE=A1=E3=80=91=E5=95=86=E5=9F=8E=EF=BC=9A=E5=AE=8C=E5=96=84?=
 =?UTF-8?q?=20MemberInfo.vue=20=E7=9A=84=E6=B3=A8=E9=87=8A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/mall/promotion/kefu/message/index.ts                   | 2 +-
 src/views/mall/promotion/kefu/components/member/MemberInfo.vue | 2 +-
 src/views/mall/promotion/kefu/index.vue                        | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/api/mall/promotion/kefu/message/index.ts b/src/api/mall/promotion/kefu/message/index.ts
index acf23b5c..4c3bed88 100644
--- a/src/api/mall/promotion/kefu/message/index.ts
+++ b/src/api/mall/promotion/kefu/message/index.ts
@@ -29,7 +29,7 @@ export const KeFuMessageApi = {
       url: '/promotion/kefu-message/update-read-status?conversationId=' + conversationId
     })
   },
-  // 获得消息数据
+  // 获得消息列表（流式加载）
   getKeFuMessageList: async (params: any) => {
     return await request.get({ url: '/promotion/kefu-message/list', params })
   }
diff --git a/src/views/mall/promotion/kefu/components/member/MemberInfo.vue b/src/views/mall/promotion/kefu/components/member/MemberInfo.vue
index 855e3d60..952d34c8 100644
--- a/src/views/mall/promotion/kefu/components/member/MemberInfo.vue
+++ b/src/views/mall/promotion/kefu/components/member/MemberInfo.vue
@@ -1,4 +1,4 @@
-<!-- 目录是不是叫 member 好点。然后这个组件是 MemberInfo，里面有浏览足迹 -->
+<!-- 右侧信息：会员信息 + 最近浏览 + 交易订单 -->
 <template>
   <el-container class="kefu">
     <el-header class="kefu-header">
diff --git a/src/views/mall/promotion/kefu/index.vue b/src/views/mall/promotion/kefu/index.vue
index 08f69913..6b9b59e0 100644
--- a/src/views/mall/promotion/kefu/index.vue
+++ b/src/views/mall/promotion/kefu/index.vue
@@ -4,7 +4,7 @@
     <KeFuConversationList ref="keFuConversationRef" @change="handleChange" />
     <!-- 会话详情（选中会话的消息列表） -->
     <KeFuMessageList ref="keFuChatBoxRef" @change="getConversationList" />
-    <!-- 会员足迹（选中会话的会员足迹） -->
+    <!-- 会员信息（选中会话的会员信息） -->
     <MemberInfo ref="memberInfoRef" />
   </el-container>
 </template>

From 078407fa10ed24deb1b68427b05644b54e4a0856 Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Tue, 5 Nov 2024 16:07:44 +0800
Subject: [PATCH 06/23] =?UTF-8?q?=E3=80=90=E5=8A=9F=E8=83=BD=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E3=80=91=E5=95=86=E5=9F=8E:=20=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?=E6=B4=BB=E5=8A=A8=E9=80=89=E6=8B=A9=E5=95=86=E5=93=81=E6=97=B6?=
 =?UTF-8?q?=20sku=20=E4=BB=B7=E6=A0=BC=E6=98=BE=E7=A4=BA=E4=B8=8D=E6=AD=A3?=
 =?UTF-8?q?=E7=A1=AE=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/mall/promotion/components/SpuSelect.vue | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/views/mall/promotion/components/SpuSelect.vue b/src/views/mall/promotion/components/SpuSelect.vue
index fd7dffe0..648a8635 100644
--- a/src/views/mall/promotion/components/SpuSelect.vue
+++ b/src/views/mall/promotion/components/SpuSelect.vue
@@ -115,7 +115,7 @@ import { getPropertyList, PropertyAndValues, SkuList } from '@/views/mall/produc
 import { ElTable } from 'element-plus'
 import { dateFormatter } from '@/utils/formatTime'
 import { createImageViewer } from '@/components/ImageViewer'
-import { formatToFraction } from '@/utils'
+import { floatToFixed2, formatToFraction } from '@/utils'
 import { defaultProps, handleTree } from '@/utils/tree'
 
 import * as ProductCategoryApi from '@/api/mall/product/category'
@@ -228,6 +228,13 @@ const expandChange = async (row: ProductSpuApi.Spu, expandedRows?: ProductSpuApi
   }
   // 获取 SPU 详情
   const res = (await ProductSpuApi.getSpu(row.id as number)) as ProductSpuApi.Spu
+  res.skus?.forEach((item) => {
+    item.price = floatToFixed2(item.price)
+    item.marketPrice = floatToFixed2(item.marketPrice)
+    item.costPrice = floatToFixed2(item.costPrice)
+    item.firstBrokeragePrice = floatToFixed2(item.firstBrokeragePrice)
+    item.secondBrokeragePrice = floatToFixed2(item.secondBrokeragePrice)
+  })
   propertyList.value = getPropertyList(res)
   spuData.value = res
   isExpand.value = true

From e342e91f793c2a711c9600d8dc89c29716c9c925 Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Sat, 9 Nov 2024 16:58:32 +0800
Subject: [PATCH 07/23] =?UTF-8?q?=E3=80=90=E5=8A=9F=E8=83=BD=E5=AE=8C?=
 =?UTF-8?q?=E5=96=84=E3=80=91=E5=95=86=E5=9F=8E:=20=E5=AE=A2=E6=9C=8D?=
 =?UTF-8?q?=E4=BC=9A=E8=AF=9D=E7=BC=93=E5=AD=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../mall/promotion/kefu/conversation/index.ts |  6 +-
 src/store/modules/mall/kefu.ts                | 77 +++++++++++++++++--
 .../kefu/components/KeFuConversationList.vue  | 21 ++---
 .../kefu/components/KeFuMessageList.vue       |  4 +
 src/views/mall/promotion/kefu/index.vue       | 22 +++---
 5 files changed, 99 insertions(+), 31 deletions(-)

diff --git a/src/api/mall/promotion/kefu/conversation/index.ts b/src/api/mall/promotion/kefu/conversation/index.ts
index 1b8d5389..eb6eb9c9 100644
--- a/src/api/mall/promotion/kefu/conversation/index.ts
+++ b/src/api/mall/promotion/kefu/conversation/index.ts
@@ -21,6 +21,10 @@ export const KeFuConversationApi = {
   getConversationList: async () => {
     return await request.get({ url: '/promotion/kefu-conversation/list' })
   },
+  // 获得客服会话
+  getConversation: async (id: number) => {
+    return await request.get({ url: `/promotion/kefu-conversation/get?id=` + id })
+  },
   // 客服会话置顶
   updateConversationPinned: async (data: any) => {
     return await request.put({
@@ -30,6 +34,6 @@ export const KeFuConversationApi = {
   },
   // 删除客服会话
   deleteConversation: async (id: number) => {
-    return await request.delete({ url: `/promotion/kefu-conversation/delete?id=${id}`})
+    return await request.delete({ url: `/promotion/kefu-conversation/delete?id=${id}` })
   }
 }
diff --git a/src/store/modules/mall/kefu.ts b/src/store/modules/mall/kefu.ts
index f3afc03b..89e88d84 100644
--- a/src/store/modules/mall/kefu.ts
+++ b/src/store/modules/mall/kefu.ts
@@ -2,6 +2,7 @@ import { store } from '@/store'
 import { defineStore } from 'pinia'
 import { KeFuConversationApi, KeFuConversationRespVO } from '@/api/mall/promotion/kefu/conversation'
 import { KeFuMessageRespVO } from '@/api/mall/promotion/kefu/message'
+import { isEmpty } from '@/utils/is'
 
 // TODO puhui999: 待优化完善
 interface MallKefuInfoVO {
@@ -23,15 +24,81 @@ export const useMallKefuStore = defineStore('mall-kefu', {
     }
   },
   actions: {
+    /** 加载会话缓存列表 */
     async setConversationList() {
-      const list = await KeFuConversationApi.getConversationList()
-      list.sort((a: KeFuConversationRespVO, _) => (a.adminPinned ? -1 : 1))
-      this.conversationList = list
+      this.conversationList = await KeFuConversationApi.getConversationList()
+      this.conversationSort()
+    },
+    /** 更新会话缓存已读 */
+    async updateConversationStatus(conversationId: number) {
+      if (isEmpty(this.conversationList)) {
+        return
+      }
+      const conversation = this.conversationList.find((item) => item.id === conversationId)
+      conversation && (conversation.adminUnreadMessageCount = 0)
+    },
+    /** 更新会话缓存 */
+    async updateConversation(conversationId: number) {
+      if (isEmpty(this.conversationList)) {
+        return
+      }
+
+      const conversation = await KeFuConversationApi.getConversation(conversationId)
+      this.deleteConversation(conversationId)
+      conversation && this.conversationList.push(conversation)
+      this.conversationSort()
+    },
+    /** 删除会话缓存 */
+    deleteConversation(conversationId: number) {
+      const index = this.conversationList.findIndex((item) => item.id === conversationId)
+      // 存在则删除
+      if (index > -1) {
+        this.conversationList.splice(index, 1)
+      }
+    },
+    conversationSort() {
+      this.conversationList.sort((obj1, obj2) => {
+        // 如果 obj1.adminPinned 为 true，obj2.adminPinned 为 false，obj1 应该排在前面
+        if (obj1.adminPinned && !obj2.adminPinned) return -1
+        // 如果 obj1.adminPinned 为 false，obj2.adminPinned 为 true，obj2 应该排在前面
+        if (!obj1.adminPinned && obj2.adminPinned) return 1
+
+        // 如果 obj1.adminPinned 和 obj2.adminPinned 都为 true，比较 adminUnreadMessageCount 的值
+        if (obj1.adminPinned && obj2.adminPinned) {
+          return obj1.adminUnreadMessageCount - obj2.adminUnreadMessageCount
+        }
+
+        // 如果 obj1.adminPinned 和 obj2.adminPinned 都为 false，比较 adminUnreadMessageCount 的值
+        if (!obj1.adminPinned && !obj2.adminPinned) {
+          return obj1.adminUnreadMessageCount - obj2.adminUnreadMessageCount
+        }
+
+        // 如果 obj1.adminPinned 为 true，obj2.adminPinned 为 true，且 b 都大于 0，比较 adminUnreadMessageCount 的值
+        if (
+          obj1.adminPinned &&
+          obj2.adminPinned &&
+          obj1.adminUnreadMessageCount > 0 &&
+          obj2.adminUnreadMessageCount > 0
+        ) {
+          return obj1.adminUnreadMessageCount - obj2.adminUnreadMessageCount
+        }
+
+        // 如果 obj1.adminPinned 为 false，obj2.adminPinned 为 false，且 b 都大于 0，比较 adminUnreadMessageCount 的值
+        if (
+          !obj1.adminPinned &&
+          !obj2.adminPinned &&
+          obj1.adminUnreadMessageCount > 0 &&
+          obj2.adminUnreadMessageCount > 0
+        ) {
+          return obj1.adminUnreadMessageCount - obj2.adminUnreadMessageCount
+        }
+
+        return 0
+      })
     }
-    // async setConversationMessageList(conversationId: number) {}
   }
 })
 
-export const useUserStoreWithOut = () => {
+export const useMallKefuStoreWithOut = () => {
   return useMallKefuStore(store)
 }
diff --git a/src/views/mall/promotion/kefu/components/KeFuConversationList.vue b/src/views/mall/promotion/kefu/components/KeFuConversationList.vue
index 5e57266f..cd2c2e96 100644
--- a/src/views/mall/promotion/kefu/components/KeFuConversationList.vue
+++ b/src/views/mall/promotion/kefu/components/KeFuConversationList.vue
@@ -1,8 +1,10 @@
 <template>
   <el-aside class="kefu p-5px h-100%" width="260px">
-    <div class="color-[#999] font-bold my-10px">会话记录({{ conversationList.length }})</div>
+    <div class="color-[#999] font-bold my-10px"
+      >会话记录({{ kefuStore.getConversationList.length }})
+    </div>
     <div
-      v-for="item in conversationList"
+      v-for="item in kefuStore.getConversationList"
       :key="item.id"
       :class="{ active: item.id === activeConversationId, pinned: item.adminPinned }"
       class="kefu-conversation flex items-center"
@@ -75,24 +77,17 @@ import { useEmoji } from './tools/emoji'
 import { formatPast } from '@/utils/formatTime'
 import { KeFuMessageContentTypeEnum } from './tools/constants'
 import { useAppStore } from '@/store/modules/app'
+import { useMallKefuStore } from '@/store/modules/mall/kefu'
 
 defineOptions({ name: 'KeFuConversationList' })
 
 const message = useMessage() // 消息弹窗
 const appStore = useAppStore()
+const kefuStore = useMallKefuStore() // 客服缓存
 const { replaceEmoji } = useEmoji()
-const conversationList = ref<KeFuConversationRespVO[]>([]) // 会话列表
 const activeConversationId = ref(-1) // 选中的会话
 const collapse = computed(() => appStore.getCollapse) // 折叠菜单
 
-/** 加载会话列表 */
-const getConversationList = async () => {
-  const list = await KeFuConversationApi.getConversationList()
-  list.sort((a: KeFuConversationRespVO, _) => (a.adminPinned ? -1 : 1))
-  conversationList.value = list
-}
-defineExpose({ getConversationList })
-
 /** 打开右侧的消息列表 */
 const emits = defineEmits<{
   (e: 'change', v: KeFuConversationRespVO): void
@@ -156,7 +151,7 @@ const updateConversationPinned = async (adminPinned: boolean) => {
   message.notifySuccess(adminPinned ? '置顶成功' : '取消置顶成功')
   // 2. 关闭右键菜单，更新会话列表
   closeRightMenu()
-  await getConversationList()
+  await kefuStore.updateConversation(rightClickConversation.value.id)
 }
 
 /** 删除会话 */
@@ -166,7 +161,7 @@ const deleteConversation = async () => {
   await KeFuConversationApi.deleteConversation(rightClickConversation.value.id)
   // 2. 关闭右键菜单，更新会话列表
   closeRightMenu()
-  await getConversationList()
+  kefuStore.deleteConversation(rightClickConversation.value.id)
 }
 
 /** 监听右键菜单的显示状态，添加点击事件监听器 */
diff --git a/src/views/mall/promotion/kefu/components/KeFuMessageList.vue b/src/views/mall/promotion/kefu/components/KeFuMessageList.vue
index 7d1b1631..80131a65 100644
--- a/src/views/mall/promotion/kefu/components/KeFuMessageList.vue
+++ b/src/views/mall/promotion/kefu/components/KeFuMessageList.vue
@@ -152,6 +152,7 @@ import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
 import { debounce } from 'lodash-es'
 import { jsonParse } from '@/utils'
+import { useMallKefuStore } from '@/store/modules/mall/kefu'
 
 dayjs.extend(relativeTime)
 
@@ -169,6 +170,7 @@ const queryParams = reactive({
 })
 const total = ref(0) // 消息总条数
 const refreshContent = ref(false) // 内容刷新,主要解决会话消息页面高度不一致导致的滚动功能精度失效
+const kefuStore = useMallKefuStore() // 客服缓存
 
 /** 获悉消息内容 */
 const getMessageContent = computed(() => (item: any) => jsonParse(item.content))
@@ -297,6 +299,8 @@ const sendMessage = async (msg: any) => {
   message.value = ''
   // 加载消息列表
   await refreshMessageList()
+  // 异步刷新
+  kefuStore.updateConversation(conversation.value.id)
 }
 
 /** 滚动到底部 */
diff --git a/src/views/mall/promotion/kefu/index.vue b/src/views/mall/promotion/kefu/index.vue
index 6b9b59e0..e5bc14cd 100644
--- a/src/views/mall/promotion/kefu/index.vue
+++ b/src/views/mall/promotion/kefu/index.vue
@@ -3,7 +3,7 @@
     <!-- 会话列表 -->
     <KeFuConversationList ref="keFuConversationRef" @change="handleChange" />
     <!-- 会话详情（选中会话的消息列表） -->
-    <KeFuMessageList ref="keFuChatBoxRef" @change="getConversationList" />
+    <KeFuMessageList ref="keFuChatBoxRef" />
     <!-- 会员信息（选中会话的会员信息） -->
     <MemberInfo ref="memberInfoRef" />
   </el-container>
@@ -15,10 +15,12 @@ import { WebSocketMessageTypeConstants } from './components/tools/constants'
 import { KeFuConversationRespVO } from '@/api/mall/promotion/kefu/conversation'
 import { getRefreshToken } from '@/utils/auth'
 import { useWebSocket } from '@vueuse/core'
+import { useMallKefuStore } from '@/store/modules/mall/kefu'
 
 defineOptions({ name: 'KeFu' })
 
 const message = useMessage() // 消息弹窗
+const kefuStore = useMallKefuStore() // 客服缓存
 
 // ======================= WebSocket start =======================
 const server = ref(
@@ -53,29 +55,24 @@ watchEffect(() => {
     }
     // 2.2 消息类型：KEFU_MESSAGE_TYPE
     if (type === WebSocketMessageTypeConstants.KEFU_MESSAGE_TYPE) {
+      const message = JSON.parse(jsonMessage.content)
       // 刷新会话列表
       // TODO @puhui999：不应该刷新列表，而是根据消息，本地 update 列表的数据；
-      getConversationList()
+      kefuStore.updateConversation(message.conversationId)
       // 刷新消息列表
-      keFuChatBoxRef.value?.refreshMessageList(JSON.parse(jsonMessage.content))
+      keFuChatBoxRef.value?.refreshMessageList(message)
       return
     }
     // 2.3 消息类型：KEFU_MESSAGE_ADMIN_READ
     if (type === WebSocketMessageTypeConstants.KEFU_MESSAGE_ADMIN_READ) {
-      // 刷新会话列表
-      // TODO @puhui999：不应该刷新列表，而是根据消息，本地 update 列表的数据；
-      getConversationList()
+      // 更新会话已读
+      kefuStore.updateConversationStatus(JSON.parse(jsonMessage.content)?.id)
     }
   } catch (error) {
     console.error(error)
   }
 })
 // ======================= WebSocket end =======================
-/** 加载会话列表 */
-const keFuConversationRef = ref<InstanceType<typeof KeFuConversationList>>()
-const getConversationList = () => {
-  keFuConversationRef.value?.getConversationList()
-}
 
 /** 加载指定会话的消息列表 */
 const keFuChatBoxRef = ref<InstanceType<typeof KeFuMessageList>>()
@@ -87,7 +84,8 @@ const handleChange = (conversation: KeFuConversationRespVO) => {
 
 /** 初始化 */
 onMounted(() => {
-  getConversationList()
+  /** 加载会话列表 */
+  kefuStore.setConversationList()
   // 打开 websocket 连接
   open()
 })

From df34f65df8ecd160dc92b21760589df846a213fb Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Sat, 9 Nov 2024 17:29:49 +0800
Subject: [PATCH 08/23] =?UTF-8?q?=E3=80=90=E5=8A=9F=E8=83=BD=E5=AE=8C?=
 =?UTF-8?q?=E5=96=84=E3=80=91=E5=95=86=E5=9F=8E:=20=E5=AE=A2=E6=9C=8D?=
 =?UTF-8?q?=E4=BC=9A=E8=AF=9D=E6=B6=88=E6=81=AF=E7=BC=93=E5=AD=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/store/modules/mall/kefu.ts                | 11 ++++++++---
 .../kefu/components/KeFuConversationList.vue  |  4 ++++
 .../kefu/components/KeFuMessageList.vue       | 19 ++++++++++---------
 3 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/src/store/modules/mall/kefu.ts b/src/store/modules/mall/kefu.ts
index 89e88d84..fae52f70 100644
--- a/src/store/modules/mall/kefu.ts
+++ b/src/store/modules/mall/kefu.ts
@@ -4,7 +4,6 @@ import { KeFuConversationApi, KeFuConversationRespVO } from '@/api/mall/promotio
 import { KeFuMessageRespVO } from '@/api/mall/promotion/kefu/message'
 import { isEmpty } from '@/utils/is'
 
-// TODO puhui999: 待优化完善
 interface MallKefuInfoVO {
   conversationList: KeFuConversationRespVO[] // 会话列表
   conversationMessageList: Map<number, KeFuMessageRespVO[]> // 会话消息
@@ -19,11 +18,17 @@ export const useMallKefuStore = defineStore('mall-kefu', {
     getConversationList(): KeFuConversationRespVO[] {
       return this.conversationList
     },
-    getConversationMessageList(): Map<number, KeFuMessageRespVO[]> {
-      return this.conversationMessageList
+    getConversationMessageList(): (conversationId: number) => KeFuMessageRespVO[] | undefined {
+      return (conversationId: number) => this.conversationMessageList.get(conversationId)
     }
   },
   actions: {
+    //======================= 会话消息相关 =======================
+    /** 缓存历史消息 */
+    saveMessageList(conversationId: number, messageList: KeFuMessageRespVO[]) {
+      this.conversationMessageList.set(conversationId, messageList)
+    },
+    //======================= 会话相关 =======================
     /** 加载会话缓存列表 */
     async setConversationList() {
       this.conversationList = await KeFuConversationApi.getConversationList()
diff --git a/src/views/mall/promotion/kefu/components/KeFuConversationList.vue b/src/views/mall/promotion/kefu/components/KeFuConversationList.vue
index cd2c2e96..7afa711e 100644
--- a/src/views/mall/promotion/kefu/components/KeFuConversationList.vue
+++ b/src/views/mall/promotion/kefu/components/KeFuConversationList.vue
@@ -93,6 +93,10 @@ const emits = defineEmits<{
   (e: 'change', v: KeFuConversationRespVO): void
 }>()
 const openRightMessage = (item: KeFuConversationRespVO) => {
+  // 同一个会话则不处理
+  if (activeConversationId.value === item.id) {
+    return
+  }
   activeConversationId.value = item.id
   emits('change', item)
 }
diff --git a/src/views/mall/promotion/kefu/components/KeFuMessageList.vue b/src/views/mall/promotion/kefu/components/KeFuMessageList.vue
index 80131a65..afea61ca 100644
--- a/src/views/mall/promotion/kefu/components/KeFuMessageList.vue
+++ b/src/views/mall/promotion/kefu/components/KeFuMessageList.vue
@@ -236,19 +236,20 @@ const refreshMessageList = async (message?: any) => {
   }
 }
 
-/** 获得新会话的消息列表 */
-// TODO @puhui999：可优化：可以考虑本地做每个会话的消息 list 缓存；然后点击切换时，读取缓存；然后异步获取新消息，merge 下；
+/** 获得新会话的消息列表, 点击切换时，读取缓存；然后异步获取新消息，merge 下； */
 const getNewMessageList = async (val: KeFuConversationRespVO) => {
-  // 会话切换,重置相关参数
-  messageList.value = []
-  total.value = 0
+  // 1. 缓存当前会话消息列表
+  kefuStore.saveMessageList(conversation.value.id, messageList.value)
+  // 2.1 会话切换,重置相关参数
+  messageList.value = kefuStore.getConversationMessageList(val.id) || []
+  total.value = messageList.value.length || 0
   loadHistory.value = false
   refreshContent.value = false
-  // 设置会话相关属性
+  // 2.2 设置会话相关属性
   conversation.value = val
   queryParams.conversationId = val.id
   queryParams.createTime = undefined
-  // 获取消息
+  // 3. 获取消息
   await refreshMessageList()
 }
 defineExpose({ getNewMessageList, refreshMessageList })
@@ -299,8 +300,8 @@ const sendMessage = async (msg: any) => {
   message.value = ''
   // 加载消息列表
   await refreshMessageList()
-  // 异步刷新
-  kefuStore.updateConversation(conversation.value.id)
+  // 更新会话缓存
+  await kefuStore.updateConversation(conversation.value.id)
 }
 
 /** 滚动到底部 */

From 8b0778ca0cdfa4f76f188082a4daeea2147be398 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sat, 9 Nov 2024 19:10:46 +0800
Subject: [PATCH 09/23] =?UTF-8?q?=E3=80=90=E4=BB=A3=E7=A0=81=E8=AF=84?=
 =?UTF-8?q?=E5=AE=A1=E3=80=91=E5=95=86=E5=9F=8E=EF=BC=9A=E5=9C=A8=E7=BA=BF?=
 =?UTF-8?q?=E5=AE=A2=E6=9C=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/store/modules/mall/kefu.ts | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/store/modules/mall/kefu.ts b/src/store/modules/mall/kefu.ts
index fae52f70..16f1dfc2 100644
--- a/src/store/modules/mall/kefu.ts
+++ b/src/store/modules/mall/kefu.ts
@@ -23,12 +23,13 @@ export const useMallKefuStore = defineStore('mall-kefu', {
     }
   },
   actions: {
-    //======================= 会话消息相关 =======================
+    // ======================= 会话消息相关 =======================
     /** 缓存历史消息 */
     saveMessageList(conversationId: number, messageList: KeFuMessageRespVO[]) {
       this.conversationMessageList.set(conversationId, messageList)
     },
-    //======================= 会话相关 =======================
+
+    // ======================= 会话相关 =======================
     /** 加载会话缓存列表 */
     async setConversationList() {
       this.conversationList = await KeFuConversationApi.getConversationList()
@@ -62,11 +63,16 @@ export const useMallKefuStore = defineStore('mall-kefu', {
       }
     },
     conversationSort() {
+      // TODO @puhui999：1）逻辑上，先按照置顶、再按照最后消息时间；2）感觉写的有一丢丢小复杂，发给大模型，看看有没可能简化哈。
       this.conversationList.sort((obj1, obj2) => {
         // 如果 obj1.adminPinned 为 true，obj2.adminPinned 为 false，obj1 应该排在前面
-        if (obj1.adminPinned && !obj2.adminPinned) return -1
+        if (obj1.adminPinned && !obj2.adminPinned) {
+          return -1
+        }
         // 如果 obj1.adminPinned 为 false，obj2.adminPinned 为 true，obj2 应该排在前面
-        if (!obj1.adminPinned && obj2.adminPinned) return 1
+        if (!obj1.adminPinned && obj2.adminPinned) {
+          return 1
+        }
 
         // 如果 obj1.adminPinned 和 obj2.adminPinned 都为 true，比较 adminUnreadMessageCount 的值
         if (obj1.adminPinned && obj2.adminPinned) {

From 33a4100ed4c851fda542213d0aa6f66be309f4cc Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Sun, 10 Nov 2024 13:09:27 +0800
Subject: [PATCH 10/23] =?UTF-8?q?=E3=80=90=E5=8A=9F=E8=83=BD=E5=AE=8C?=
 =?UTF-8?q?=E5=96=84=E3=80=91=E5=95=86=E5=9F=8E:=20=E5=AE=A2=E6=9C=8D?=
 =?UTF-8?q?=E4=BC=9A=E8=AF=9D=E6=8E=92=E5=BA=8F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/store/modules/mall/kefu.ts | 48 +++++-----------------------------
 1 file changed, 7 insertions(+), 41 deletions(-)

diff --git a/src/store/modules/mall/kefu.ts b/src/store/modules/mall/kefu.ts
index 16f1dfc2..2aecee0d 100644
--- a/src/store/modules/mall/kefu.ts
+++ b/src/store/modules/mall/kefu.ts
@@ -63,48 +63,14 @@ export const useMallKefuStore = defineStore('mall-kefu', {
       }
     },
     conversationSort() {
-      // TODO @puhui999：1）逻辑上，先按照置顶、再按照最后消息时间；2）感觉写的有一丢丢小复杂，发给大模型，看看有没可能简化哈。
-      this.conversationList.sort((obj1, obj2) => {
-        // 如果 obj1.adminPinned 为 true，obj2.adminPinned 为 false，obj1 应该排在前面
-        if (obj1.adminPinned && !obj2.adminPinned) {
-          return -1
+      // 按置顶属性和最后消息时间排序
+      this.conversationList.sort((a, b) => {
+        // 按照置顶排序，置顶的会在前面
+        if (a.adminPinned !== b.adminPinned) {
+          return a.adminPinned ? -1 : 1
         }
-        // 如果 obj1.adminPinned 为 false，obj2.adminPinned 为 true，obj2 应该排在前面
-        if (!obj1.adminPinned && obj2.adminPinned) {
-          return 1
-        }
-
-        // 如果 obj1.adminPinned 和 obj2.adminPinned 都为 true，比较 adminUnreadMessageCount 的值
-        if (obj1.adminPinned && obj2.adminPinned) {
-          return obj1.adminUnreadMessageCount - obj2.adminUnreadMessageCount
-        }
-
-        // 如果 obj1.adminPinned 和 obj2.adminPinned 都为 false，比较 adminUnreadMessageCount 的值
-        if (!obj1.adminPinned && !obj2.adminPinned) {
-          return obj1.adminUnreadMessageCount - obj2.adminUnreadMessageCount
-        }
-
-        // 如果 obj1.adminPinned 为 true，obj2.adminPinned 为 true，且 b 都大于 0，比较 adminUnreadMessageCount 的值
-        if (
-          obj1.adminPinned &&
-          obj2.adminPinned &&
-          obj1.adminUnreadMessageCount > 0 &&
-          obj2.adminUnreadMessageCount > 0
-        ) {
-          return obj1.adminUnreadMessageCount - obj2.adminUnreadMessageCount
-        }
-
-        // 如果 obj1.adminPinned 为 false，obj2.adminPinned 为 false，且 b 都大于 0，比较 adminUnreadMessageCount 的值
-        if (
-          !obj1.adminPinned &&
-          !obj2.adminPinned &&
-          obj1.adminUnreadMessageCount > 0 &&
-          obj2.adminUnreadMessageCount > 0
-        ) {
-          return obj1.adminUnreadMessageCount - obj2.adminUnreadMessageCount
-        }
-
-        return 0
+        // 按照最后消息时间排序，最近的会在前面
+        return (b.lastMessageTime as unknown as number) - (a.lastMessageTime as unknown as number)
       })
     }
   }

From fdee8d8628ad48bdb2df36e0696a484c71f22329 Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Sun, 10 Nov 2024 14:15:15 +0800
Subject: [PATCH 11/23] =?UTF-8?q?=E3=80=90=E5=8A=9F=E8=83=BD=E5=AE=8C?=
 =?UTF-8?q?=E5=96=84=E3=80=91=E5=95=86=E5=9F=8E:=20=E5=AE=A2=E6=9C=8D?=
 =?UTF-8?q?=E4=BC=9A=E5=91=98=E4=BF=A1=E6=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../kefu/components/member/MemberInfo.vue     | 54 +++++++++++
 .../member/user/detail/UserAccountInfo.vue    |  6 +-
 .../member/user/detail/UserBasicInfo.vue      | 95 +++++++++++++++----
 3 files changed, 136 insertions(+), 19 deletions(-)

diff --git a/src/views/mall/promotion/kefu/components/member/MemberInfo.vue b/src/views/mall/promotion/kefu/components/member/MemberInfo.vue
index 952d34c8..15192808 100644
--- a/src/views/mall/promotion/kefu/components/member/MemberInfo.vue
+++ b/src/views/mall/promotion/kefu/components/member/MemberInfo.vue
@@ -25,6 +25,21 @@
       </div>
     </el-header>
     <el-main class="kefu-content">
+      <div v-if="!isEmpty(conversation)" v-loading="loading">
+        <!-- 基本信息 -->
+        <UserBasicInfo v-if="activeTab === '会员信息'" :user="user" mode="kefu">
+          <template #header>
+            <CardTitle title="基本信息" />
+          </template>
+        </UserBasicInfo>
+        <!-- 账户信息 -->
+        <el-card v-if="activeTab === '会员信息'" class="h-full" shadow="never">
+          <template #header>
+            <CardTitle title="账户信息" />
+          </template>
+          <UserAccountInfo :column="1" :user="user" :wallet="wallet" />
+        </el-card>
+      </div>
       <div v-show="!isEmpty(conversation)">
         <el-scrollbar ref="scrollbarRef" always @scroll="handleScroll">
           <!-- 最近浏览 -->
@@ -45,11 +60,17 @@ import { KeFuConversationRespVO } from '@/api/mall/promotion/kefu/conversation'
 import { isEmpty } from '@/utils/is'
 import { debounce } from 'lodash-es'
 import { ElScrollbar as ElScrollbarType } from 'element-plus/es/components/scrollbar/index'
+import { CardTitle } from '@/components/Card'
+import UserBasicInfo from '@/views/member/user/detail/UserBasicInfo.vue'
+import UserAccountInfo from '@/views/member/user/detail/UserAccountInfo.vue'
+import * as UserApi from '@/api/member/user'
+import * as WalletApi from '@/api/pay/wallet/balance'
 
 defineOptions({ name: 'MemberBrowsingHistory' })
 
 const activeTab = ref('会员信息')
 const tabActivation = computed(() => (tab: string) => activeTab.value === tab)
+
 /** tab 切换 */
 const productBrowsingHistoryRef = ref<InstanceType<typeof ProductBrowsingHistory>>()
 const orderBrowsingHistoryRef = ref<InstanceType<typeof OrderBrowsingHistory>>()
@@ -63,6 +84,8 @@ const handleClick = async (tab: string) => {
 const getHistoryList = async () => {
   switch (activeTab.value) {
     case '会员信息':
+      await getUserData()
+      await getUserWallet()
       break
     case '最近浏览':
       await productBrowsingHistoryRef.value?.getHistoryList(conversation.value)
@@ -110,6 +133,37 @@ const handleScroll = debounce(() => {
     loadMore()
   }
 }, 200)
+
+/* 用户钱包相关信息 */
+const WALLET_INIT_DATA = {
+  balance: 0,
+  totalExpense: 0,
+  totalRecharge: 0
+} as WalletApi.WalletVO // 钱包初始化数据
+const wallet = ref<WalletApi.WalletVO>(WALLET_INIT_DATA) // 钱包信息
+
+/** 查询用户钱包信息 */
+const getUserWallet = async () => {
+  if (!conversation.value.userId) {
+    wallet.value = WALLET_INIT_DATA
+    return
+  }
+  const params = { userId: conversation.value.userId }
+  wallet.value = (await WalletApi.getWallet(params)) || WALLET_INIT_DATA
+}
+
+const loading = ref(true) // 加载中
+const user = ref<UserApi.UserVO>({} as UserApi.UserVO)
+
+/** 获得用户 */
+const getUserData = async () => {
+  loading.value = true
+  try {
+    user.value = await UserApi.getUser(conversation.value.userId)
+  } finally {
+    loading.value = false
+  }
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/member/user/detail/UserAccountInfo.vue b/src/views/member/user/detail/UserAccountInfo.vue
index 49071fdb..5d9085b2 100644
--- a/src/views/member/user/detail/UserAccountInfo.vue
+++ b/src/views/member/user/detail/UserAccountInfo.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-descriptions :column="2">
+  <el-descriptions :column="column">
     <el-descriptions-item>
       <template #label>
         <descriptions-item-label icon="svg-icon:member_level" label=" 等级 " />
@@ -50,7 +50,9 @@ import * as UserApi from '@/api/member/user'
 import * as WalletApi from '@/api/pay/wallet/balance'
 import { fenToYuan } from '@/utils'
 
-defineProps<{ user: UserApi.UserVO; wallet: WalletApi.WalletVO }>() // 用户信息
+withDefaults(defineProps<{ user: UserApi.UserVO; wallet: WalletApi.WalletVO; column?: number }>(), {
+  column: 2
+}) // 用户信息
 </script>
 <style lang="scss" scoped>
 .cell-item {
diff --git a/src/views/member/user/detail/UserBasicInfo.vue b/src/views/member/user/detail/UserBasicInfo.vue
index 075450e9..efb1f288 100644
--- a/src/views/member/user/detail/UserBasicInfo.vue
+++ b/src/views/member/user/detail/UserBasicInfo.vue
@@ -3,80 +3,141 @@
     <template #header>
       <slot name="header"></slot>
     </template>
-    <el-row>
+    <el-row v-if="mode === 'member'">
       <el-col :span="4">
-        <ElAvatar shape="square" :size="140" :src="user.avatar || undefined" />
+        <ElAvatar :size="140" :src="user.avatar || undefined" shape="square" />
       </el-col>
       <el-col :span="20">
         <el-descriptions :column="2">
           <el-descriptions-item>
             <template #label>
-              <descriptions-item-label label="用户名" icon="ep:user" />
+              <descriptions-item-label icon="ep:user" label="用户名" />
             </template>
             {{ user.name || '空' }}
           </el-descriptions-item>
           <el-descriptions-item>
             <template #label>
-              <descriptions-item-label label="昵称" icon="ep:user" />
+              <descriptions-item-label icon="ep:user" label="昵称" />
             </template>
             {{ user.nickname }}
           </el-descriptions-item>
           <el-descriptions-item label="手机号">
             <template #label>
-              <descriptions-item-label label="手机号" icon="ep:phone" />
+              <descriptions-item-label icon="ep:phone" label="手机号" />
             </template>
             {{ user.mobile }}
           </el-descriptions-item>
           <el-descriptions-item>
             <template #label>
-              <descriptions-item-label label="性别" icon="fa:mars-double" />
+              <descriptions-item-label icon="fa:mars-double" label="性别" />
             </template>
             <dict-tag :type="DICT_TYPE.SYSTEM_USER_SEX" :value="user.sex" />
           </el-descriptions-item>
           <el-descriptions-item>
             <template #label>
-              <descriptions-item-label label="所在地" icon="ep:location" />
+              <descriptions-item-label icon="ep:location" label="所在地" />
             </template>
             {{ user.areaName }}
           </el-descriptions-item>
           <el-descriptions-item>
             <template #label>
-              <descriptions-item-label label="注册 IP" icon="ep:position" />
+              <descriptions-item-label icon="ep:position" label="注册 IP" />
             </template>
             {{ user.registerIp }}
           </el-descriptions-item>
           <el-descriptions-item>
             <template #label>
-              <descriptions-item-label label="生日" icon="fa:birthday-cake" />
+              <descriptions-item-label icon="fa:birthday-cake" label="生日" />
             </template>
-            {{ user.birthday ? formatDate(user.birthday) : '空' }}
+            {{ user.birthday ? formatDate(user.birthday as any) : '空' }}
           </el-descriptions-item>
           <el-descriptions-item>
             <template #label>
-              <descriptions-item-label label="注册时间" icon="ep:calendar" />
+              <descriptions-item-label icon="ep:calendar" label="注册时间" />
             </template>
-            {{ user.createTime ? formatDate(user.createTime) : '空' }}
+            {{ user.createTime ? formatDate(user.createTime as any) : '空' }}
           </el-descriptions-item>
           <el-descriptions-item>
             <template #label>
-              <descriptions-item-label label="最后登录时间" icon="ep:calendar" />
+              <descriptions-item-label icon="ep:calendar" label="最后登录时间" />
             </template>
-            {{ user.loginDate ? formatDate(user.loginDate) : '空' }}
+            {{ user.loginDate ? formatDate(user.loginDate as any) : '空' }}
           </el-descriptions-item>
         </el-descriptions>
       </el-col>
     </el-row>
+    <template v-if="mode === 'kefu'">
+      <ElAvatar :size="140" :src="user.avatar || undefined" shape="square" />
+      <el-descriptions :column="1">
+        <el-descriptions-item>
+          <template #label>
+            <descriptions-item-label icon="ep:user" label="用户名" />
+          </template>
+          {{ user.name || '空' }}
+        </el-descriptions-item>
+        <el-descriptions-item>
+          <template #label>
+            <descriptions-item-label icon="ep:user" label="昵称" />
+          </template>
+          {{ user.nickname }}
+        </el-descriptions-item>
+        <el-descriptions-item label="手机号">
+          <template #label>
+            <descriptions-item-label icon="ep:phone" label="手机号" />
+          </template>
+          {{ user.mobile }}
+        </el-descriptions-item>
+        <el-descriptions-item>
+          <template #label>
+            <descriptions-item-label icon="fa:mars-double" label="性别" />
+          </template>
+          <dict-tag :type="DICT_TYPE.SYSTEM_USER_SEX" :value="user.sex" />
+        </el-descriptions-item>
+        <el-descriptions-item>
+          <template #label>
+            <descriptions-item-label icon="ep:location" label="所在地" />
+          </template>
+          {{ user.areaName }}
+        </el-descriptions-item>
+        <el-descriptions-item>
+          <template #label>
+            <descriptions-item-label icon="ep:position" label="注册 IP" />
+          </template>
+          {{ user.registerIp }}
+        </el-descriptions-item>
+        <el-descriptions-item>
+          <template #label>
+            <descriptions-item-label icon="fa:birthday-cake" label="生日" />
+          </template>
+          {{ user.birthday ? formatDate(user.birthday as any) : '空' }}
+        </el-descriptions-item>
+        <el-descriptions-item>
+          <template #label>
+            <descriptions-item-label icon="ep:calendar" label="注册时间" />
+          </template>
+          {{ user.createTime ? formatDate(user.createTime as any) : '空' }}
+        </el-descriptions-item>
+        <el-descriptions-item>
+          <template #label>
+            <descriptions-item-label icon="ep:calendar" label="最后登录时间" />
+          </template>
+          {{ user.loginDate ? formatDate(user.loginDate as any) : '空' }}
+        </el-descriptions-item>
+      </el-descriptions>
+    </template>
   </el-card>
 </template>
-<script setup lang="ts">
+<script lang="ts" setup>
 import { DICT_TYPE } from '@/utils/dict'
 import { formatDate } from '@/utils/formatTime'
 import * as UserApi from '@/api/member/user'
 import { DescriptionsItemLabel } from '@/components/Descriptions/index'
 
-const { user } = defineProps<{ user: UserApi.UserVO }>()
+withDefaults(defineProps<{ user: UserApi.UserVO; mode?: string }>(), {
+  mode: 'member'
+})
 </script>
-<style scoped lang="scss">
+<style lang="scss" scoped>
 .card-header {
   display: flex;
   justify-content: space-between;

From 649c24ed51585c1367adf00afe6341f49dc99c74 Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Sun, 10 Nov 2024 15:25:27 +0800
Subject: [PATCH 12/23] =?UTF-8?q?=E3=80=90=E5=8A=9F=E8=83=BD=E5=AE=8C?=
 =?UTF-8?q?=E5=96=84=E3=80=91=E5=95=86=E5=9F=8E:=20=E5=AE=A2=E6=9C=8D?=
 =?UTF-8?q?=E5=95=86=E5=93=81=E7=BB=84=E4=BB=B6=E6=98=BE=E7=A4=BA=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/index.ts                            |   2 +-
 .../kefu/components/KeFuMessageList.vue       |   9 +-
 .../kefu/components/member/MemberInfo.vue     |   4 +-
 .../member/ProductBrowsingHistory.vue         |   7 +-
 .../kefu/components/message/ProductItem.vue   | 214 ++++++------------
 5 files changed, 73 insertions(+), 163 deletions(-)

diff --git a/src/utils/index.ts b/src/utils/index.ts
index 2c2fbbd0..031a9140 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -1,4 +1,4 @@
-import { toNumber } from 'lodash-es'
+import {toNumber} from 'lodash-es'
 
 /**
  *
diff --git a/src/views/mall/promotion/kefu/components/KeFuMessageList.vue b/src/views/mall/promotion/kefu/components/KeFuMessageList.vue
index afea61ca..68a54d03 100644
--- a/src/views/mall/promotion/kefu/components/KeFuMessageList.vue
+++ b/src/views/mall/promotion/kefu/components/KeFuMessageList.vue
@@ -75,12 +75,11 @@
                     v-if="KeFuMessageContentTypeEnum.PRODUCT === item.contentType"
                     :picUrl="getMessageContent(item).picUrl"
                     :price="getMessageContent(item).price"
-                    :skuText="getMessageContent(item).introduction"
+                    :sales-count="getMessageContent(item).salesCount"
                     :spuId="getMessageContent(item).spuId"
+                    :stock="getMessageContent(item).stock"
                     :title="getMessageContent(item).spuName"
-                    :titleWidth="400"
-                    class="max-w-70%"
-                    priceColor="#FF3000"
+                    class="max-w-300px"
                   />
                 </MessageItem>
                 <!-- 订单消息 -->
@@ -392,7 +391,7 @@ const showTime = computed(() => (item: KeFuMessageRespVO, index: number) => {
 
   &-content {
     margin: 0;
-    padding: 0;
+    padding: 10px;
     position: relative;
     height: 100%;
     width: 100%;
diff --git a/src/views/mall/promotion/kefu/components/member/MemberInfo.vue b/src/views/mall/promotion/kefu/components/member/MemberInfo.vue
index 15192808..29c3cb27 100644
--- a/src/views/mall/promotion/kefu/components/member/MemberInfo.vue
+++ b/src/views/mall/promotion/kefu/components/member/MemberInfo.vue
@@ -24,7 +24,7 @@
         交易订单
       </div>
     </el-header>
-    <el-main class="kefu-content">
+    <el-main class="kefu-content p-10px!">
       <div v-if="!isEmpty(conversation)" v-loading="loading">
         <!-- 基本信息 -->
         <UserBasicInfo v-if="activeTab === '会员信息'" :user="user" mode="kefu">
@@ -33,7 +33,7 @@
           </template>
         </UserBasicInfo>
         <!-- 账户信息 -->
-        <el-card v-if="activeTab === '会员信息'" class="h-full" shadow="never">
+        <el-card v-if="activeTab === '会员信息'" class="h-full mt-10px" shadow="never">
           <template #header>
             <CardTitle title="账户信息" />
           </template>
diff --git a/src/views/mall/promotion/kefu/components/member/ProductBrowsingHistory.vue b/src/views/mall/promotion/kefu/components/member/ProductBrowsingHistory.vue
index 8bc4aeaf..a9b38561 100644
--- a/src/views/mall/promotion/kefu/components/member/ProductBrowsingHistory.vue
+++ b/src/views/mall/promotion/kefu/components/member/ProductBrowsingHistory.vue
@@ -1,15 +1,14 @@
 <template>
   <ProductItem
     v-for="item in list"
-    :spu-id="item.spuId"
     :key="item.id"
     :picUrl="item.picUrl"
     :price="item.price"
-    :skuText="item.introduction"
+    :sales-count="item.salesCount"
+    :spu-id="item.spuId"
+    :stock="item.stock"
     :title="item.spuName"
-    :titleWidth="400"
     class="mb-10px"
-    priceColor="#FF3000"
   />
 </template>
 
diff --git a/src/views/mall/promotion/kefu/components/message/ProductItem.vue b/src/views/mall/promotion/kefu/components/message/ProductItem.vue
index 4e59365b..9dc62c0b 100644
--- a/src/views/mall/promotion/kefu/components/message/ProductItem.vue
+++ b/src/views/mall/promotion/kefu/components/message/ProductItem.vue
@@ -1,51 +1,27 @@
 <template>
-  <div @click.stop="openDetail(props.spuId)" style="cursor: pointer;">
-    <div>
-      <slot name="top"></slot>
+  <div class="product-warp" style="cursor: pointer" @click.stop="openDetail(spuId)">
+    <!-- 左侧商品图片-->
+    <div class="product-warp-left mr-24px">
+      <el-image
+        :initial-index="0"
+        :preview-src-list="[picUrl]"
+        :src="picUrl"
+        class="product-warp-left-img"
+        fit="contain"
+        preview-teleported
+        @click.stop
+      />
     </div>
-    <div
-      :style="[{ borderRadius: radius + 'px', marginBottom: marginBottom + 'px' }]"
-      class="ss-order-card-warp flex items-stretch justify-between bg-white"
-    >
-      <div class="img-box mr-24px">
-        <el-image
-          :initial-index="0"
-          :preview-src-list="[picUrl]"
-          :src="picUrl"
-          class="order-img"
-          fit="contain"
-          preview-teleported
-          @click.stop
-        />
+    <!-- 右侧商品信息 -->
+    <div class="product-warp-right">
+      <div class="description">{{ title }}</div>
+      <div class="my-5px">
+        <span class="mr-20px">库存: {{ stock || 0 }}</span>
+        <span>销量: {{ salesCount || 0 }}</span>
       </div>
-      <div
-        :style="[{ width: titleWidth ? titleWidth + 'px' : '' }]"
-        class="box-right flex flex-col justify-between"
-      >
-        <div v-if="title" class="title-text ss-line-2">{{ title }}</div>
-        <div v-if="skuString" class="spec-text mt-8px mb-12px">{{ skuString }}</div>
-        <div class="groupon-box">
-          <slot name="groupon"></slot>
-        </div>
-        <div class="flex">
-          <div class="flex items-center">
-            <div
-              v-if="price && Number(price) > 0"
-              :style="[{ color: priceColor }]"
-              class="price-text flex items-center"
-            >
-              ￥{{ fenToYuan(price) }}
-            </div>
-            <div v-if="num" class="total-text flex items-center">x {{ num }}</div>
-            <slot name="priceSuffix"></slot>
-          </div>
-        </div>
-        <div class="tool-box">
-          <slot name="tool"></slot>
-        </div>
-        <div>
-          <slot name="rightBottom"></slot>
-        </div>
+      <div class="flex justify-between items-center">
+        <span class="price">￥{{ fenToYuan(price) }}</span>
+        <el-button size="small" text type="primary">详情</el-button>
       </div>
     </div>
   </div>
@@ -57,7 +33,7 @@ import { fenToYuan } from '@/utils'
 const { push } = useRouter()
 
 defineOptions({ name: 'ProductItem' })
-const props = defineProps({
+defineProps({
   spuId: {
     type: Number,
     default: 0
@@ -70,134 +46,70 @@ const props = defineProps({
     type: String,
     default: ''
   },
-  titleWidth: {
-    type: Number,
-    default: 0
-  },
-  skuText: {
-    type: [String, Array],
-    default: ''
-  },
   price: {
     type: [String, Number],
     default: ''
   },
-  priceColor: {
-    type: [String],
-    default: ''
-  },
-  num: {
-    type: [String, Number],
-    default: 0
-  },
-  score: {
+  salesCount: {
     type: [String, Number],
     default: ''
   },
-  radius: {
-    type: [String],
-    default: ''
-  },
-  marginBottom: {
-    type: [String],
+  stock: {
+    type: [String, Number],
     default: ''
   }
 })
 
-/** SKU 展示字符串 */
-const skuString = computed(() => {
-  if (!props.skuText) {
-    return ''
-  }
-  if (typeof props.skuText === 'object') {
-    return props.skuText.join(',')
-  }
-  return props.skuText
-})
-
 /** 查看商品详情 */
 const openDetail = (spuId: number) => {
-  console.log(props.spuId)
   push({ name: 'ProductSpuDetail', params: { id: spuId } })
 }
 </script>
 
 <style lang="scss" scoped>
-.ss-order-card-warp {
-  padding: 20px;
-  border-radius: 10px;
-  border: 1px var(--el-border-color) solid;
-  background-color: var(--app-content-bg-color);
-
-  .img-box {
-    width: 80px;
-    height: 80px;
-    border-radius: 10px;
-    overflow: hidden;
-
-    .order-img {
-      width: 80px;
-      height: 80px;
-    }
-  }
-
-  .box-right {
-    flex: 1;
-    position: relative;
-
-    .tool-box {
-      position: absolute;
-      right: 0;
-      bottom: -10px;
-    }
-  }
-
-  .title-text {
-    font-size: 13px;
-    font-weight: 500;
-    line-height: 20px;
-  }
-
-  .spec-text {
-    font-size: 10px;
-    font-weight: 400;
-    color: #999999;
-    min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: -webkit-box;
-    -webkit-line-clamp: 1;
-    -webkit-box-orient: vertical;
-  }
-
-  .price-text {
-    font-size: 11px;
-    font-weight: 500;
-    font-family: OPPOSANS;
-  }
-
-  .total-text {
-    font-size: 10px;
-    font-weight: 400;
-    line-height: 16px;
-    color: #999999;
-    margin-left: 8px;
-  }
+.button {
+  background-color: #007bff;
+  color: white;
+  border: none;
+  padding: 5px 10px;
+  cursor: pointer;
 }
 
-.ss-line {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
+.product-warp {
+  width: 100%;
+  background-color: rgba(128, 128, 128, 0.5); // 透明色，暗黑模式下也能体现
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  padding: 10px;
 
-  &-1 {
-    -webkit-line-clamp: 1;
+  &-left {
+    width: 70px;
+
+    &-img {
+      width: 100%;
+      height: 100%;
+      border-radius: 8px;
+    }
   }
 
-  &-2 {
-    -webkit-line-clamp: 2;
+  &-right {
+    flex: 1;
+
+    .description {
+      width: 100%;
+      font-size: 16px;
+      font-weight: bold;
+      display: -webkit-box;
+      -webkit-line-clamp: 1; /* 显示一行 */
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .price {
+      color: #ff3000;
+    }
   }
 }
 </style>

From b9e1529623b35cbf659a7b28c70ad548b1f93a2f Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Sun, 10 Nov 2024 16:36:05 +0800
Subject: [PATCH 13/23] =?UTF-8?q?=E3=80=90=E5=8A=9F=E8=83=BD=E5=AE=8C?=
 =?UTF-8?q?=E5=96=84=E3=80=91=E5=95=86=E5=9F=8E:=20=E5=AE=A2=E6=9C=8D?=
 =?UTF-8?q?=E6=B6=88=E6=81=AFJSON=20=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../kefu/components/KeFuConversationList.vue    |  7 ++++---
 .../kefu/components/KeFuMessageList.vue         | 11 ++++++-----
 .../kefu/components/message/OrderItem.vue       | 17 ++++++++++-------
 src/views/mall/promotion/kefu/index.vue         |  3 +--
 4 files changed, 21 insertions(+), 17 deletions(-)

diff --git a/src/views/mall/promotion/kefu/components/KeFuConversationList.vue b/src/views/mall/promotion/kefu/components/KeFuConversationList.vue
index 7afa711e..3f28f9c2 100644
--- a/src/views/mall/promotion/kefu/components/KeFuConversationList.vue
+++ b/src/views/mall/promotion/kefu/components/KeFuConversationList.vue
@@ -1,7 +1,7 @@
 <template>
   <el-aside class="kefu p-5px h-100%" width="260px">
-    <div class="color-[#999] font-bold my-10px"
-      >会话记录({{ kefuStore.getConversationList.length }})
+    <div class="color-[#999] font-bold my-10px">
+      会话记录({{ kefuStore.getConversationList.length }})
     </div>
     <div
       v-for="item in kefuStore.getConversationList"
@@ -78,6 +78,7 @@ import { formatPast } from '@/utils/formatTime'
 import { KeFuMessageContentTypeEnum } from './tools/constants'
 import { useAppStore } from '@/store/modules/app'
 import { useMallKefuStore } from '@/store/modules/mall/kefu'
+import { jsonParse } from '@/utils'
 
 defineOptions({ name: 'KeFuConversationList' })
 
@@ -118,7 +119,7 @@ const getConversationDisplayText = computed(
       case KeFuMessageContentTypeEnum.VOICE:
         return '[语音消息]'
       case KeFuMessageContentTypeEnum.TEXT:
-        return replaceEmoji(lastMessageContent)
+        return replaceEmoji(jsonParse(lastMessageContent).text || lastMessageContent)
       default:
         return ''
     }
diff --git a/src/views/mall/promotion/kefu/components/KeFuMessageList.vue b/src/views/mall/promotion/kefu/components/KeFuMessageList.vue
index 68a54d03..87c0112d 100644
--- a/src/views/mall/promotion/kefu/components/KeFuMessageList.vue
+++ b/src/views/mall/promotion/kefu/components/KeFuMessageList.vue
@@ -52,7 +52,7 @@
                 <MessageItem :message="item">
                   <template v-if="KeFuMessageContentTypeEnum.TEXT === item.contentType">
                     <div
-                      v-dompurify-html="replaceEmoji(item.content)"
+                      v-dompurify-html="replaceEmoji(getMessageContent(item).text || item.content)"
                       class="flex items-center"
                     ></div>
                   </template>
@@ -62,8 +62,8 @@
                   <el-image
                     v-if="KeFuMessageContentTypeEnum.IMAGE === item.contentType"
                     :initial-index="0"
-                    :preview-src-list="[item.content]"
-                    :src="item.content"
+                    :preview-src-list="[getMessageContent(item).picUrl || item.content]"
+                    :src="getMessageContent(item).picUrl || item.content"
                     class="w-200px"
                     fit="contain"
                     preview-teleported
@@ -244,6 +244,7 @@ const getNewMessageList = async (val: KeFuConversationRespVO) => {
   total.value = messageList.value.length || 0
   loadHistory.value = false
   refreshContent.value = false
+  skipGetMessageList.value = false
   // 2.2 设置会话相关属性
   conversation.value = val
   queryParams.conversationId = val.id
@@ -267,7 +268,7 @@ const handleSendPicture = async (picUrl: string) => {
   const msg = {
     conversationId: conversation.value.id,
     contentType: KeFuMessageContentTypeEnum.IMAGE,
-    content: picUrl
+    content: JSON.stringify({ picUrl })
   }
   await sendMessage(msg)
 }
@@ -287,7 +288,7 @@ const handleSendMessage = async (event: any) => {
   const msg = {
     conversationId: conversation.value.id,
     contentType: KeFuMessageContentTypeEnum.TEXT,
-    content: message.value
+    content: JSON.stringify({ text: message.value })
   }
   await sendMessage(msg)
 }
diff --git a/src/views/mall/promotion/kefu/components/message/OrderItem.vue b/src/views/mall/promotion/kefu/components/message/OrderItem.vue
index c50d7c5d..4dfcfa4b 100644
--- a/src/views/mall/promotion/kefu/components/message/OrderItem.vue
+++ b/src/views/mall/promotion/kefu/components/message/OrderItem.vue
@@ -14,11 +14,11 @@
       </div>
       <div v-for="item in getMessageContent.items" :key="item.id" class="border-bottom">
         <ProductItem
-          :spu-id="item.spuId"
           :num="item.count"
           :picUrl="item.picUrl"
           :price="item.price"
           :skuText="item.properties.map((property: any) => property.valueName).join(' ')"
+          :spu-id="item.spuId"
           :title="item.spuName"
         />
       </div>
@@ -112,14 +112,14 @@ function formatOrderStatus(order: any) {
   border-radius: 10px;
   padding: 10px;
   border: 1px var(--el-border-color) solid;
-  background-color: var(--app-content-bg-color);
+  background-color: rgba(128, 128, 128, 0.5); // 透明色，暗黑模式下也能体现
 
   .order-card-header {
     height: 28px;
+    font-weight: bold;
 
     .order-no {
-      font-size: 12px;
-      font-weight: 500;
+      font-size: 13px;
 
       span {
         &:hover {
@@ -128,27 +128,30 @@ function formatOrderStatus(order: any) {
         }
       }
     }
+
+    .order-state {
+      font-size: 13px;
+    }
   }
 
   .pay-box {
     padding-top: 10px;
+    color: #fff;
+    font-weight: bold;
 
     .discounts-title {
       font-size: 16px;
       line-height: normal;
-      color: #999999;
     }
 
     .discounts-money {
       font-size: 16px;
       line-height: normal;
-      color: #999;
       font-family: OPPOSANS;
     }
 
     .pay-color {
       font-size: 13px;
-      color: var(--left-menu-text-color);
     }
   }
 }
diff --git a/src/views/mall/promotion/kefu/index.vue b/src/views/mall/promotion/kefu/index.vue
index e5bc14cd..35778766 100644
--- a/src/views/mall/promotion/kefu/index.vue
+++ b/src/views/mall/promotion/kefu/index.vue
@@ -57,7 +57,6 @@ watchEffect(() => {
     if (type === WebSocketMessageTypeConstants.KEFU_MESSAGE_TYPE) {
       const message = JSON.parse(jsonMessage.content)
       // 刷新会话列表
-      // TODO @puhui999：不应该刷新列表，而是根据消息，本地 update 列表的数据；
       kefuStore.updateConversation(message.conversationId)
       // 刷新消息列表
       keFuChatBoxRef.value?.refreshMessageList(message)
@@ -66,7 +65,7 @@ watchEffect(() => {
     // 2.3 消息类型：KEFU_MESSAGE_ADMIN_READ
     if (type === WebSocketMessageTypeConstants.KEFU_MESSAGE_ADMIN_READ) {
       // 更新会话已读
-      kefuStore.updateConversationStatus(JSON.parse(jsonMessage.content)?.id)
+      kefuStore.updateConversationStatus(JSON.parse(jsonMessage.content))
     }
   } catch (error) {
     console.error(error)

From 5e7afae972fe848719c1670bfa157d8777f57d17 Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Sun, 10 Nov 2024 18:09:22 +0800
Subject: [PATCH 14/23] =?UTF-8?q?=E3=80=90=E5=8A=9F=E8=83=BD=E5=AE=8C?=
 =?UTF-8?q?=E5=96=84=E3=80=91=E5=95=86=E5=9F=8E:=20=E5=AE=A2=E6=9C=8D?=
 =?UTF-8?q?=E6=B6=88=E6=81=AFJSON=20=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/mall/promotion/kefu/index.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/views/mall/promotion/kefu/index.vue b/src/views/mall/promotion/kefu/index.vue
index 35778766..553f69c2 100644
--- a/src/views/mall/promotion/kefu/index.vue
+++ b/src/views/mall/promotion/kefu/index.vue
@@ -16,6 +16,7 @@ import { KeFuConversationRespVO } from '@/api/mall/promotion/kefu/conversation'
 import { getRefreshToken } from '@/utils/auth'
 import { useWebSocket } from '@vueuse/core'
 import { useMallKefuStore } from '@/store/modules/mall/kefu'
+import { jsonParse } from '@/utils'
 
 defineOptions({ name: 'KeFu' })
 
@@ -30,6 +31,7 @@ const server = ref(
 ) // WebSocket 服务地址
 
 /** 发起 WebSocket 连接 */
+// TODO puhui999: websocket 连接有点问题收不到消息 🤣
 const { data, close, open } = useWebSocket(server.value, {
   autoReconnect: true,
   heartbeat: true
@@ -45,9 +47,9 @@ watchEffect(() => {
     if (data.value === 'pong') {
       return
     }
-
     // 2.1 解析 type 消息类型
     const jsonMessage = JSON.parse(data.value)
+    console.log(jsonMessage)
     const type = jsonMessage.type
     if (!type) {
       message.error('未知的消息类型：' + data.value)
@@ -65,7 +67,7 @@ watchEffect(() => {
     // 2.3 消息类型：KEFU_MESSAGE_ADMIN_READ
     if (type === WebSocketMessageTypeConstants.KEFU_MESSAGE_ADMIN_READ) {
       // 更新会话已读
-      kefuStore.updateConversationStatus(JSON.parse(jsonMessage.content))
+      kefuStore.updateConversationStatus(jsonParse(jsonMessage.content))
     }
   } catch (error) {
     console.error(error)

From 3b49f7dec9b408a607feb32197f9ee15ee4ed181 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sun, 10 Nov 2024 18:49:04 +0800
Subject: [PATCH 15/23] =?UTF-8?q?=E3=80=90=E5=8A=9F=E8=83=BD=E5=AE=8C?=
 =?UTF-8?q?=E5=96=84=E3=80=91=E5=95=86=E5=9F=8E:=20=E5=AE=8C=E5=96=84?=
 =?UTF-8?q?=E7=9B=B8=E5=85=B3=E6=B3=A8=E9=87=8A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/index.ts                                    |  2 +-
 .../promotion/kefu/components/member/MemberInfo.vue   | 11 ++++-------
 2 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/src/utils/index.ts b/src/utils/index.ts
index 031a9140..2c2fbbd0 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -1,4 +1,4 @@
-import {toNumber} from 'lodash-es'
+import { toNumber } from 'lodash-es'
 
 /**
  *
diff --git a/src/views/mall/promotion/kefu/components/member/MemberInfo.vue b/src/views/mall/promotion/kefu/components/member/MemberInfo.vue
index 29c3cb27..522518ca 100644
--- a/src/views/mall/promotion/kefu/components/member/MemberInfo.vue
+++ b/src/views/mall/promotion/kefu/components/member/MemberInfo.vue
@@ -134,28 +134,25 @@ const handleScroll = debounce(() => {
   }
 }, 200)
 
-/* 用户钱包相关信息 */
+/** 查询用户钱包信息 */
 const WALLET_INIT_DATA = {
   balance: 0,
   totalExpense: 0,
   totalRecharge: 0
 } as WalletApi.WalletVO // 钱包初始化数据
 const wallet = ref<WalletApi.WalletVO>(WALLET_INIT_DATA) // 钱包信息
-
-/** 查询用户钱包信息 */
 const getUserWallet = async () => {
   if (!conversation.value.userId) {
     wallet.value = WALLET_INIT_DATA
     return
   }
-  const params = { userId: conversation.value.userId }
-  wallet.value = (await WalletApi.getWallet(params)) || WALLET_INIT_DATA
+  wallet.value =
+    (await WalletApi.getWallet({ userId: conversation.value.userId })) || WALLET_INIT_DATA
 }
 
+/** 获得用户 */
 const loading = ref(true) // 加载中
 const user = ref<UserApi.UserVO>({} as UserApi.UserVO)
-
-/** 获得用户 */
 const getUserData = async () => {
   loading.value = true
   try {

From 4d2c038972602271d700c78d88095b9b689a7199 Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Wed, 20 Nov 2024 23:44:25 +0800
Subject: [PATCH 16/23] =?UTF-8?q?=E3=80=90=E5=8A=9F=E8=83=BD=E5=AE=8C?=
 =?UTF-8?q?=E5=96=84=E3=80=91=E5=95=86=E5=9F=8E:=20=E5=AE=A2=E6=9C=8D?=
 =?UTF-8?q?=E5=8A=A8=E6=80=81=E8=AE=A1=E7=AE=97=E6=B6=88=E6=81=AF=E6=9C=80?=
 =?UTF-8?q?=E5=90=8E=E5=8F=91=E9=80=81=E6=97=B6=E9=97=B4=E8=B7=9D=E7=A6=BB?=
 =?UTF-8?q?=E7=8E=B0=E5=9C=A8=E8=BF=87=E5=8E=BB=E4=BA=86=E5=A4=9A=E4=B9=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../kefu/components/KeFuConversationList.vue  | 20 ++++++++++++++++++-
 .../kefu/components/KeFuMessageList.vue       | 12 +++++------
 src/views/mall/promotion/kefu/index.vue       |  7 ++++---
 3 files changed, 29 insertions(+), 10 deletions(-)

diff --git a/src/views/mall/promotion/kefu/components/KeFuConversationList.vue b/src/views/mall/promotion/kefu/components/KeFuConversationList.vue
index 3f28f9c2..042a29fd 100644
--- a/src/views/mall/promotion/kefu/components/KeFuConversationList.vue
+++ b/src/views/mall/promotion/kefu/components/KeFuConversationList.vue
@@ -26,7 +26,7 @@
           <div class="flex justify-between items-center w-100%">
             <span class="username">{{ item.userNickname }}</span>
             <span class="color-[#999]" style="font-size: 13px">
-              {{ formatPast(item.lastMessageTime, 'YYYY-MM-DD') }}
+              {{ lastMessageTimeMap.get(item.id) ?? '计算中' }}
             </span>
           </div>
           <!-- 最后聊天内容 -->
@@ -89,6 +89,14 @@ const { replaceEmoji } = useEmoji()
 const activeConversationId = ref(-1) // 选中的会话
 const collapse = computed(() => appStore.getCollapse) // 折叠菜单
 
+const lastMessageTimeMap = ref<Map<number, string>>(new Map<number, string>())
+/** 计算消息最后发送时间距离现在过去了多久 */
+const calculationLastMessageTime = () => {
+  kefuStore.getConversationList?.forEach((item) => {
+    lastMessageTimeMap.value.set(item.id, formatPast(item.lastMessageTime, 'YYYY-MM-DD'))
+  })
+}
+defineExpose({ calculationLastMessageTime })
 /** 打开右侧的消息列表 */
 const emits = defineEmits<{
   (e: 'change', v: KeFuConversationRespVO): void
@@ -177,6 +185,16 @@ watch(showRightMenu, (val) => {
     document.body.removeEventListener('click', closeRightMenu)
   }
 })
+
+const timer = ref<any>()
+/** 初始化 */
+onMounted(() => {
+  timer.value = setInterval(calculationLastMessageTime, 1000 * 10) // 十秒计算一次
+})
+/** 组件卸载前 */
+onBeforeUnmount(() => {
+  clearInterval(timer.value)
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/mall/promotion/kefu/components/KeFuMessageList.vue b/src/views/mall/promotion/kefu/components/KeFuMessageList.vue
index 87c0112d..68bd4324 100644
--- a/src/views/mall/promotion/kefu/components/KeFuMessageList.vue
+++ b/src/views/mall/promotion/kefu/components/KeFuMessageList.vue
@@ -414,7 +414,7 @@ const showTime = computed(() => (item: KeFuMessageRespVO, index: number) => {
       .kefu-message {
         background-color: rgb(245, 245, 245);
         margin-left: 10px;
-        margin-top: 18px;
+        margin-top: 3px;
         border-top-right-radius: 10px;
         border-bottom-right-radius: 10px;
         border-bottom-left-radius: 10px;
@@ -427,7 +427,7 @@ const showTime = computed(() => (item: KeFuMessageRespVO, index: number) => {
       .kefu-message {
         background-color: rgb(206, 223, 255);
         margin-right: 10px;
-        margin-top: 18px;
+        margin-top: 3px;
         border-top-left-radius: 10px;
         border-bottom-right-radius: 10px;
         border-bottom-left-radius: 10px;
@@ -454,11 +454,11 @@ const showTime = computed(() => (item: KeFuMessageRespVO, index: number) => {
     .date-message,
     .system-message {
       width: fit-content;
-      border-radius: 12rpx;
-      padding: 8rpx 16rpx;
-      margin-bottom: 16rpx;
+      background-color: rgba(0, 0, 0, 0.1);
+      border-radius: 8px;
+      padding: 0 5px;
       color: #999;
-      font-size: 24rpx;
+      font-size: 10px;
     }
   }
 
diff --git a/src/views/mall/promotion/kefu/index.vue b/src/views/mall/promotion/kefu/index.vue
index 553f69c2..f0fa2a02 100644
--- a/src/views/mall/promotion/kefu/index.vue
+++ b/src/views/mall/promotion/kefu/index.vue
@@ -31,7 +31,6 @@ const server = ref(
 ) // WebSocket 服务地址
 
 /** 发起 WebSocket 连接 */
-// TODO puhui999: websocket 连接有点问题收不到消息 🤣
 const { data, close, open } = useWebSocket(server.value, {
   autoReconnect: true,
   heartbeat: true
@@ -49,7 +48,6 @@ watchEffect(() => {
     }
     // 2.1 解析 type 消息类型
     const jsonMessage = JSON.parse(data.value)
-    console.log(jsonMessage)
     const type = jsonMessage.type
     if (!type) {
       message.error('未知的消息类型：' + data.value)
@@ -83,10 +81,13 @@ const handleChange = (conversation: KeFuConversationRespVO) => {
   memberInfoRef.value?.initHistory(conversation)
 }
 
+const keFuConversationRef = ref<InstanceType<typeof KeFuConversationList>>()
 /** 初始化 */
 onMounted(() => {
   /** 加载会话列表 */
-  kefuStore.setConversationList()
+  kefuStore.setConversationList().then(() => {
+    keFuConversationRef.value?.calculationLastMessageTime()
+  })
   // 打开 websocket 连接
   open()
 })

From 7895d184e87b1665aa5ed51576b2d8947faea75a Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Thu, 21 Nov 2024 10:00:19 +0800
Subject: [PATCH 17/23] =?UTF-8?q?=E3=80=90=E5=8A=9F=E8=83=BD=E5=AE=8C?=
 =?UTF-8?q?=E5=96=84=E3=80=91=E5=95=86=E5=9F=8E:=20=E5=AE=A2=E6=9C=8D?=
 =?UTF-8?q?=E5=8A=A8=E6=80=81=E8=AE=A1=E7=AE=97=E6=B6=88=E6=81=AF=E6=9C=80?=
 =?UTF-8?q?=E5=90=8E=E5=8F=91=E9=80=81=E6=97=B6=E9=97=B4=E8=B7=9D=E7=A6=BB?=
 =?UTF-8?q?=E7=8E=B0=E5=9C=A8=E8=BF=87=E5=8E=BB=E4=BA=86=E5=A4=9A=E4=B9=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../mall/promotion/kefu/components/KeFuConversationList.vue    | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/views/mall/promotion/kefu/components/KeFuConversationList.vue b/src/views/mall/promotion/kefu/components/KeFuConversationList.vue
index 042a29fd..328120fb 100644
--- a/src/views/mall/promotion/kefu/components/KeFuConversationList.vue
+++ b/src/views/mall/promotion/kefu/components/KeFuConversationList.vue
@@ -89,14 +89,15 @@ const { replaceEmoji } = useEmoji()
 const activeConversationId = ref(-1) // 选中的会话
 const collapse = computed(() => appStore.getCollapse) // 折叠菜单
 
-const lastMessageTimeMap = ref<Map<number, string>>(new Map<number, string>())
 /** 计算消息最后发送时间距离现在过去了多久 */
+const lastMessageTimeMap = ref<Map<number, string>>(new Map<number, string>())
 const calculationLastMessageTime = () => {
   kefuStore.getConversationList?.forEach((item) => {
     lastMessageTimeMap.value.set(item.id, formatPast(item.lastMessageTime, 'YYYY-MM-DD'))
   })
 }
 defineExpose({ calculationLastMessageTime })
+
 /** 打开右侧的消息列表 */
 const emits = defineEmits<{
   (e: 'change', v: KeFuConversationRespVO): void

From 90c71804e27c7c7102348c151805fee7b81c6c8e Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Sun, 24 Nov 2024 11:35:40 +0800
Subject: [PATCH 18/23] =?UTF-8?q?=E3=80=90=E5=8A=9F=E8=83=BD=E5=AE=8C?=
 =?UTF-8?q?=E5=96=84=E3=80=91=E5=95=86=E5=9F=8E:=20=E5=AE=A2=E6=9C=8D?=
 =?UTF-8?q?=E4=BC=9A=E8=AF=9D=E5=88=97=E8=A1=A8=E7=9A=84=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../kefu/components/KeFuConversationList.vue  | 24 +++++++++----------
 1 file changed, 11 insertions(+), 13 deletions(-)

diff --git a/src/views/mall/promotion/kefu/components/KeFuConversationList.vue b/src/views/mall/promotion/kefu/components/KeFuConversationList.vue
index 328120fb..01479de4 100644
--- a/src/views/mall/promotion/kefu/components/KeFuConversationList.vue
+++ b/src/views/mall/promotion/kefu/components/KeFuConversationList.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-aside class="kefu p-5px h-100%" width="260px">
+  <el-aside class="kefu pt-5px h-100%" width="260px">
     <div class="color-[#999] font-bold my-10px">
       会话记录({{ kefuStore.getConversationList.length }})
     </div>
@@ -7,7 +7,7 @@
       v-for="item in kefuStore.getConversationList"
       :key="item.id"
       :class="{ active: item.id === activeConversationId, pinned: item.adminPinned }"
-      class="kefu-conversation flex items-center"
+      class="kefu-conversation px-10px flex items-center"
       @click="openRightMessage(item)"
       @contextmenu.prevent="rightClick($event as PointerEvent, item)"
     >
@@ -210,26 +210,24 @@ onBeforeUnmount(() => {
     .username {
       min-width: 0;
       max-width: 60%;
+    }
+
+    .last-message {
+      font-size: 13px;
+    }
+
+    .last-message,
+    .username {
       overflow: hidden;
       text-overflow: ellipsis;
       display: -webkit-box;
       -webkit-box-orient: vertical;
       -webkit-line-clamp: 1;
     }
-
-    .last-message {
-      font-size: 13px;
-      width: 200px;
-      overflow: hidden; // 隐藏超出的文本
-      white-space: nowrap; // 禁止换行
-      text-overflow: ellipsis; // 添加省略号
-    }
   }
 
-  .active,
-  .pinned {
+  .active {
     background-color: rgba(128, 128, 128, 0.5); // 透明色，暗黑模式下也能体现
-    border-radius: 8px;
   }
 
   .right-menu-ul {

From 64e2ddfa1840f3207a60d8ec9698df1564050dc9 Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Sun, 24 Nov 2024 11:52:24 +0800
Subject: [PATCH 19/23] =?UTF-8?q?=E3=80=90=E5=8A=9F=E8=83=BD=E5=AE=8C?=
 =?UTF-8?q?=E5=96=84=E3=80=91=E5=95=86=E5=9F=8E:=20=E5=AE=A2=E6=9C=8D?=
 =?UTF-8?q?=E6=95=B4=E4=BD=93=E7=9A=84=E6=AF=8F=E4=B8=AA=E5=8C=BA=E5=9F=9F?=
 =?UTF-8?q?=E7=9A=84=E7=BA=BF=E6=A1=86=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../kefu/components/KeFuMessageList.vue       | 26 +++++++++++++++++--
 .../kefu/components/member/MemberInfo.vue     | 13 +++++++++-
 2 files changed, 36 insertions(+), 3 deletions(-)

diff --git a/src/views/mall/promotion/kefu/components/KeFuMessageList.vue b/src/views/mall/promotion/kefu/components/KeFuMessageList.vue
index 68bd4324..b3840a87 100644
--- a/src/views/mall/promotion/kefu/components/KeFuMessageList.vue
+++ b/src/views/mall/promotion/kefu/components/KeFuMessageList.vue
@@ -374,8 +374,19 @@ const showTime = computed(() => (item: KeFuMessageRespVO, index: number) => {
 <style lang="scss" scoped>
 .kefu {
   background-color: #fff;
+  position: relative;
   width: calc(100% - 300px - 260px);
-  border-left: var(--el-border-color) solid 1px;
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 1px; /* 实际宽度 */
+    height: 100%;
+    background-color: var(--el-border-color);
+    transform: scaleX(0.3); /* 缩小宽度 */
+  }
 
   .kefu-header {
     background: #fbfbfb;
@@ -463,12 +474,23 @@ const showTime = computed(() => (item: KeFuMessageRespVO, index: number) => {
   }
 
   .kefu-footer {
+    position: relative;
     display: flex;
     flex-direction: column;
     height: auto;
     margin: 0;
     padding: 0;
-    border-top: var(--el-border-color) solid 1px;
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 1px; /* 初始宽度 */
+      background-color: var(--el-border-color);
+      transform: scaleY(0.3); /* 缩小视觉高度 */
+    }
 
     .chat-tools {
       width: 100%;
diff --git a/src/views/mall/promotion/kefu/components/member/MemberInfo.vue b/src/views/mall/promotion/kefu/components/member/MemberInfo.vue
index 522518ca..11947fa2 100644
--- a/src/views/mall/promotion/kefu/components/member/MemberInfo.vue
+++ b/src/views/mall/promotion/kefu/components/member/MemberInfo.vue
@@ -165,9 +165,20 @@ const getUserData = async () => {
 
 <style lang="scss" scoped>
 .kefu {
+  position: relative;
   width: 300px !important;
   background-color: #fff;
-  border-left: var(--el-border-color) solid 1px;
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 1px; /* 实际宽度 */
+    height: 100%;
+    background-color: var(--el-border-color);
+    transform: scaleX(0.3); /* 缩小宽度 */
+  }
 
   &-header {
     background: #fbfbfb;

From 5cdc15387c241a501f523030fb28e654051b8c47 Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Sun, 24 Nov 2024 12:37:27 +0800
Subject: [PATCH 20/23] =?UTF-8?q?=E3=80=90=E5=8A=9F=E8=83=BD=E5=AE=8C?=
 =?UTF-8?q?=E5=96=84=E3=80=91=E5=95=86=E5=9F=8E:=20=E5=AE=A2=E6=9C=8D?=
 =?UTF-8?q?=E6=96=87=E6=9C=AC=E6=B6=88=E6=81=AF=E6=A0=B7=E5=BC=8F=E8=B0=83?=
 =?UTF-8?q?=E6=95=B4=EF=BC=8C=E5=86=85=E5=AE=B9=E5=B1=85=E4=B8=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../kefu/components/KeFuConversationList.vue  |  2 +-
 .../kefu/components/KeFuMessageList.vue       | 37 ++++++++++++-------
 .../kefu/components/member/MemberInfo.vue     | 17 +++++++--
 .../promotion/kefu/components/tools/emoji.ts  |  2 +-
 4 files changed, 40 insertions(+), 18 deletions(-)

diff --git a/src/views/mall/promotion/kefu/components/KeFuConversationList.vue b/src/views/mall/promotion/kefu/components/KeFuConversationList.vue
index 01479de4..075edc33 100644
--- a/src/views/mall/promotion/kefu/components/KeFuConversationList.vue
+++ b/src/views/mall/promotion/kefu/components/KeFuConversationList.vue
@@ -200,7 +200,7 @@ onBeforeUnmount(() => {
 
 <style lang="scss" scoped>
 .kefu {
-  background-color: #fff;
+  background-color: #e5e4e4;
 
   &-conversation {
     height: 60px;
diff --git a/src/views/mall/promotion/kefu/components/KeFuMessageList.vue b/src/views/mall/promotion/kefu/components/KeFuMessageList.vue
index b3840a87..f7b96cee 100644
--- a/src/views/mall/promotion/kefu/components/KeFuMessageList.vue
+++ b/src/views/mall/promotion/kefu/components/KeFuMessageList.vue
@@ -46,14 +46,13 @@
                 :class="{
                   'kefu-message': KeFuMessageContentTypeEnum.TEXT === item.contentType
                 }"
-                class="p-10px"
               >
                 <!-- 文本消息 -->
                 <MessageItem :message="item">
                   <template v-if="KeFuMessageContentTypeEnum.TEXT === item.contentType">
                     <div
                       v-dompurify-html="replaceEmoji(getMessageContent(item).text || item.content)"
-                      class="flex items-center"
+                      class="flex items-center h-1/1"
                     ></div>
                   </template>
                 </MessageItem>
@@ -64,7 +63,7 @@
                     :initial-index="0"
                     :preview-src-list="[getMessageContent(item).picUrl || item.content]"
                     :src="getMessageContent(item).picUrl || item.content"
-                    class="w-200px"
+                    class="w-200px mx-10px"
                     fit="contain"
                     preview-teleported
                   />
@@ -79,7 +78,7 @@
                     :spuId="getMessageContent(item).spuId"
                     :stock="getMessageContent(item).stock"
                     :title="getMessageContent(item).spuName"
-                    class="max-w-300px"
+                    class="max-w-300px mx-10px"
                   />
                 </MessageItem>
                 <!-- 订单消息 -->
@@ -87,7 +86,7 @@
                   <OrderItem
                     v-if="KeFuMessageContentTypeEnum.ORDER === item.contentType"
                     :message="item"
-                    class="max-w-100%"
+                    class="max-w-100% mx-10px"
                   />
                 </MessageItem>
               </div>
@@ -373,7 +372,7 @@ const showTime = computed(() => (item: KeFuMessageRespVO, index: number) => {
 
 <style lang="scss" scoped>
 .kefu {
-  background-color: #fff;
+  background-color: #f5f5f5;
   position: relative;
   width: calc(100% - 300px - 260px);
 
@@ -389,12 +388,23 @@ const showTime = computed(() => (item: KeFuMessageRespVO, index: number) => {
   }
 
   .kefu-header {
-    background: #fbfbfb;
-    box-shadow: 0 0 0 0 #dcdfe6;
+    background-color: #f5f5f5;
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: space-between;
 
+    &::before {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      height: 1px; /* 初始宽度 */
+      background-color: var(--el-border-color);
+      transform: scaleY(0.3); /* 缩小视觉高度 */
+    }
+
     &-title {
       font-size: 18px;
       font-weight: bold;
@@ -423,7 +433,7 @@ const showTime = computed(() => (item: KeFuMessageRespVO, index: number) => {
       justify-content: flex-start;
 
       .kefu-message {
-        background-color: rgb(245, 245, 245);
+        background-color: #fff;
         margin-left: 10px;
         margin-top: 3px;
         border-top-right-radius: 10px;
@@ -452,9 +462,9 @@ const showTime = computed(() => (item: KeFuMessageRespVO, index: number) => {
       padding: 5px 10px;
       width: auto;
       max-width: 50%;
-      text-align: left;
-      display: inline-block !important;
-      word-break: break-all;
+      //text-align: left;
+      //display: inline-block !important;
+      //word-break: break-all;
       transition: all 0.2s;
 
       &:hover {
@@ -468,7 +478,7 @@ const showTime = computed(() => (item: KeFuMessageRespVO, index: number) => {
       background-color: rgba(0, 0, 0, 0.1);
       border-radius: 8px;
       padding: 0 5px;
-      color: #999;
+      color: #fff;
       font-size: 10px;
     }
   }
@@ -500,6 +510,7 @@ const showTime = computed(() => (item: KeFuMessageRespVO, index: number) => {
 
   ::v-deep(textarea) {
     resize: none;
+    background-color: #f5f5f5;
   }
 
   :deep(.el-input__wrapper) {
diff --git a/src/views/mall/promotion/kefu/components/member/MemberInfo.vue b/src/views/mall/promotion/kefu/components/member/MemberInfo.vue
index 11947fa2..849992b3 100644
--- a/src/views/mall/promotion/kefu/components/member/MemberInfo.vue
+++ b/src/views/mall/promotion/kefu/components/member/MemberInfo.vue
@@ -167,7 +167,7 @@ const getUserData = async () => {
 .kefu {
   position: relative;
   width: 300px !important;
-  background-color: #fff;
+  background-color: #f5f5f5;
 
   &::after {
     content: '';
@@ -181,12 +181,23 @@ const getUserData = async () => {
   }
 
   &-header {
-    background: #fbfbfb;
-    box-shadow: 0 0 0 0 #dcdfe6;
+    background-color: #f5f5f5;
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: space-around;
 
+    &::before {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      height: 1px; /* 初始宽度 */
+      background-color: var(--el-border-color);
+      transform: scaleY(0.3); /* 缩小视觉高度 */
+    }
+
     &-title {
       font-size: 18px;
       font-weight: bold;
diff --git a/src/views/mall/promotion/kefu/components/tools/emoji.ts b/src/views/mall/promotion/kefu/components/tools/emoji.ts
index 0cbf95af..8aa59c8c 100644
--- a/src/views/mall/promotion/kefu/components/tools/emoji.ts
+++ b/src/views/mall/promotion/kefu/components/tools/emoji.ts
@@ -93,7 +93,7 @@ export const useEmoji = () => {
           const emojiFile = getEmojiFileByName(item)
           newData = newData.replace(
             item,
-            `<img class="chat-img" style="width: 24px;height: 24px;margin: 0 3px;" src="${emojiFile}" alt=""/>`
+            `<img class="chat-img" style="width: 24px;height: 24px;margin: 0 3px;vertical-align: middle;" src="${emojiFile}" alt=""/>`
           )
         })
       }

From d228df5210fe898b6195f33c638616900e0df0b7 Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Sun, 24 Nov 2024 12:41:39 +0800
Subject: [PATCH 21/23] =?UTF-8?q?=E3=80=90=E5=8A=9F=E8=83=BD=E5=AE=8C?=
 =?UTF-8?q?=E5=96=84=E3=80=91=E5=95=86=E5=9F=8E:=20=E5=AE=A2=E6=9C=8D?=
 =?UTF-8?q?=E5=95=86=E5=9F=8E=E7=9A=84=E9=85=8D=E8=89=B2=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/mall/promotion/kefu/components/message/OrderItem.vue | 3 +--
 .../mall/promotion/kefu/components/message/ProductItem.vue     | 2 +-
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/views/mall/promotion/kefu/components/message/OrderItem.vue b/src/views/mall/promotion/kefu/components/message/OrderItem.vue
index 4dfcfa4b..9385f10b 100644
--- a/src/views/mall/promotion/kefu/components/message/OrderItem.vue
+++ b/src/views/mall/promotion/kefu/components/message/OrderItem.vue
@@ -112,7 +112,7 @@ function formatOrderStatus(order: any) {
   border-radius: 10px;
   padding: 10px;
   border: 1px var(--el-border-color) solid;
-  background-color: rgba(128, 128, 128, 0.5); // 透明色，暗黑模式下也能体现
+  background-color: #fff; // 透明色，暗黑模式下也能体现
 
   .order-card-header {
     height: 28px;
@@ -136,7 +136,6 @@ function formatOrderStatus(order: any) {
 
   .pay-box {
     padding-top: 10px;
-    color: #fff;
     font-weight: bold;
 
     .discounts-title {
diff --git a/src/views/mall/promotion/kefu/components/message/ProductItem.vue b/src/views/mall/promotion/kefu/components/message/ProductItem.vue
index 9dc62c0b..bc6cd979 100644
--- a/src/views/mall/promotion/kefu/components/message/ProductItem.vue
+++ b/src/views/mall/promotion/kefu/components/message/ProductItem.vue
@@ -77,7 +77,7 @@ const openDetail = (spuId: number) => {
 
 .product-warp {
   width: 100%;
-  background-color: rgba(128, 128, 128, 0.5); // 透明色，暗黑模式下也能体现
+  background-color: #fff;
   border-radius: 8px;
   display: flex;
   align-items: center;

From 101c704a8faf0d14ec0efca13a3fcdee228d3874 Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Sun, 24 Nov 2024 16:17:10 +0800
Subject: [PATCH 22/23] =?UTF-8?q?=E3=80=90=E5=8A=9F=E8=83=BD=E5=AE=8C?=
 =?UTF-8?q?=E5=96=84=E3=80=91=E5=95=86=E5=9F=8E:=20=E4=BC=9A=E5=91=98?=
 =?UTF-8?q?=E4=BF=A1=E6=81=AF=E7=9A=84=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../member/user/detail/UserAccountInfo.vue    | 21 ++++++++++++++++-
 .../member/user/detail/UserBasicInfo.vue      | 23 +++++++++++++++++--
 2 files changed, 41 insertions(+), 3 deletions(-)

diff --git a/src/views/member/user/detail/UserAccountInfo.vue b/src/views/member/user/detail/UserAccountInfo.vue
index 5d9085b2..fad174a8 100644
--- a/src/views/member/user/detail/UserAccountInfo.vue
+++ b/src/views/member/user/detail/UserAccountInfo.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-descriptions :column="column">
+  <el-descriptions :class="{ 'kefu-descriptions': column === 1 }" :column="column">
     <el-descriptions-item>
       <template #label>
         <descriptions-item-label icon="svg-icon:member_level" label=" 等级 " />
@@ -62,4 +62,23 @@ withDefaults(defineProps<{ user: UserApi.UserVO; wallet: WalletApi.WalletVO; col
 .cell-item::after {
   content: ':';
 }
+
+.kefu-descriptions {
+  ::v-deep(.el-descriptions__cell) {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .el-descriptions__label {
+      width: 120px;
+      display: block;
+      text-align: left;
+    }
+
+    .el-descriptions__content {
+      flex: 1;
+      text-align: end;
+    }
+  }
+}
 </style>
diff --git a/src/views/member/user/detail/UserBasicInfo.vue b/src/views/member/user/detail/UserBasicInfo.vue
index efb1f288..0fe25380 100644
--- a/src/views/member/user/detail/UserBasicInfo.vue
+++ b/src/views/member/user/detail/UserBasicInfo.vue
@@ -68,7 +68,7 @@
     </el-row>
     <template v-if="mode === 'kefu'">
       <ElAvatar :size="140" :src="user.avatar || undefined" shape="square" />
-      <el-descriptions :column="1">
+      <el-descriptions :column="1" class="kefu-descriptions">
         <el-descriptions-item>
           <template #label>
             <descriptions-item-label icon="ep:user" label="用户名" />
@@ -81,7 +81,7 @@
           </template>
           {{ user.nickname }}
         </el-descriptions-item>
-        <el-descriptions-item label="手机号">
+        <el-descriptions-item>
           <template #label>
             <descriptions-item-label icon="ep:phone" label="手机号" />
           </template>
@@ -143,4 +143,23 @@ withDefaults(defineProps<{ user: UserApi.UserVO; mode?: string }>(), {
   justify-content: space-between;
   align-items: center;
 }
+
+::v-deep(.kefu-descriptions) {
+  .el-descriptions__cell {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .el-descriptions__label {
+      width: 120px;
+      display: block;
+      text-align: left;
+    }
+
+    .el-descriptions__content {
+      flex: 1;
+      text-align: end;
+    }
+  }
+}
 </style>

From ad0d4803e292868aadbccc37b28289a16d33fa7c Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Mon, 25 Nov 2024 11:58:16 +0800
Subject: [PATCH 23/23] =?UTF-8?q?=E3=80=90=E5=8A=9F=E8=83=BD=E5=AE=8C?=
 =?UTF-8?q?=E5=96=84=E3=80=91=E5=95=86=E5=9F=8E:=20=E5=AE=A2=E6=9C=8D?=
 =?UTF-8?q?=E6=96=87=E6=9C=AC=E6=B6=88=E6=81=AF=E6=A0=B7=E5=BC=8F=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=EF=BC=8C=E6=96=87=E5=AD=97=E4=B8=A4=E7=AB=AF=E5=AF=B9?=
 =?UTF-8?q?=E9=BD=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/mall/promotion/kefu/components/KeFuMessageList.vue | 2 +-
 src/views/mall/promotion/kefu/components/tools/emoji.ts      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/views/mall/promotion/kefu/components/KeFuMessageList.vue b/src/views/mall/promotion/kefu/components/KeFuMessageList.vue
index f7b96cee..577df673 100644
--- a/src/views/mall/promotion/kefu/components/KeFuMessageList.vue
+++ b/src/views/mall/promotion/kefu/components/KeFuMessageList.vue
@@ -52,7 +52,7 @@
                   <template v-if="KeFuMessageContentTypeEnum.TEXT === item.contentType">
                     <div
                       v-dompurify-html="replaceEmoji(getMessageContent(item).text || item.content)"
-                      class="flex items-center h-1/1"
+                      class="line-height-normal text-justify h-1/1 w-full"
                     ></div>
                   </template>
                 </MessageItem>
diff --git a/src/views/mall/promotion/kefu/components/tools/emoji.ts b/src/views/mall/promotion/kefu/components/tools/emoji.ts
index 8aa59c8c..3755e38b 100644
--- a/src/views/mall/promotion/kefu/components/tools/emoji.ts
+++ b/src/views/mall/promotion/kefu/components/tools/emoji.ts
@@ -93,7 +93,7 @@ export const useEmoji = () => {
           const emojiFile = getEmojiFileByName(item)
           newData = newData.replace(
             item,
-            `<img class="chat-img" style="width: 24px;height: 24px;margin: 0 3px;vertical-align: middle;" src="${emojiFile}" alt=""/>`
+            `<img style="width: 20px;height: 20px;margin:0 1px 3px 1px;vertical-align: middle;" src="${emojiFile}" alt=""/>`
           )
         })
       }