feat: 优化客服

apps/web-antd/src/views/mall/promotion/kefu/modules/conversation-list.vue

@@ -158,8 +158,8 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <Layout.Sider class="h-full bg-[var(--background)] pt-[5px]" width="260px">
+  <Layout.Sider class="bg-card h-full border-b-2 p-2" width="260px">
-    <div class="my-[10px] font-bold text-[#999]">
+    <div class="m-4 border-b border-gray-200 pb-4 font-bold">
       会话记录({{ kefuStore.getConversationList.length }})
     </div>
     <div
@@ -168,12 +168,12 @@ onBeforeUnmount(() => {
       :class="{
         'bg-gray-500/50': item.id === activeConversationId,
       }"
-      class="flex h-[60px] cursor-pointer items-center px-[10px]"
+      class="flex h-14 cursor-pointer items-center px-3"
       @click="openRightMessage(item)"
       @contextmenu.prevent="rightClick($event as PointerEvent, item)"
     >
       <div class="flex w-full items-center justify-center">
-        <div class="flex h-[50px] w-[50px] items-center justify-center">
+        <div class="flex h-12 w-12 items-center justify-center">
           <!-- 头像 + 未读 -->
           <Badge
             :hidden="item.adminUnreadMessageCount === 0"
@@ -183,12 +183,12 @@ onBeforeUnmount(() => {
             <Avatar :src="item.userAvatar" alt="avatar" />
           </Badge>
         </div>
-        <div class="ml-[10px] w-full">
+        <div class="ml-3 w-full">
           <div class="flex w-full items-center justify-between">
-            <span class="line-clamp-1 min-w-0 max-w-[60%]">{{
+            <span class="line-clamp-1 min-w-0 max-w-[60%]">
-              item.userNickname || 'null'
+              {{ item.userNickname || 'null' }}
-            }}</span>
+            </span>
-            <span class="text-[13px] text-[#999]">
+            <span class="text-sm text-gray-500">
               {{ lastMessageTimeMap.get(item.id) ?? '计算中' }}
             </span>
           </div>
@@ -200,7 +200,7 @@ onBeforeUnmount(() => {
                 item.lastMessageContent,
               )
             "
-            class="line-clamp-1 flex items-center text-[13px] text-[#999]"
+            class="line-clamp-1 flex items-center text-sm text-gray-500"
           ></div>
         </div>
       </div>
@@ -210,14 +210,14 @@ onBeforeUnmount(() => {
     <ul
       v-show="showRightMenu"
       :style="rightMenuStyle"
-      class="absolute z-[1999] m-0 w-[130px] list-none rounded-xl bg-[hsl(var(--background))] p-[5px] shadow-md"
+      class="absolute z-[1999] m-0 w-[130px] list-none rounded-xl bg-[hsl(var(--background))] p-1 shadow-md"
     >
       <li
         v-show="!rightClickConversation.adminPinned"
         class="flex cursor-pointer items-center rounded-xl px-4 py-2 transition-colors hover:bg-gray-500/50"
         @click.stop="updateConversationPinnedFn(true)"
       >
-        <IconifyIcon class="mr-[5px]" icon="ep:top" />
+        <IconifyIcon class="mr-1" icon="lucide:arrow-up-to-line" />
         置顶会话
       </li>
       <li
@@ -225,21 +225,21 @@ onBeforeUnmount(() => {
         class="flex cursor-pointer items-center rounded-xl px-4 py-2 transition-colors hover:bg-gray-500/50"
         @click.stop="updateConversationPinnedFn(false)"
       >
-        <IconifyIcon class="mr-[5px]" icon="ep:bottom" />
+        <IconifyIcon class="mr-1" icon="lucide:arrow-down-from-line" />
         取消置顶
       </li>
       <li
         class="flex cursor-pointer items-center rounded-xl px-4 py-2 transition-colors hover:bg-gray-500/50"
         @click.stop="deleteConversationFn"
       >
-        <IconifyIcon class="mr-[5px]" color="red" icon="ep:delete" />
+        <IconifyIcon class="mr-1" color="red" icon="lucide:trash-2" />
         删除会话
       </li>
       <li
         class="flex cursor-pointer items-center rounded-xl px-4 py-2 transition-colors hover:bg-gray-500/50"
         @click.stop="closeRightMenu"
       >
-        <IconifyIcon class="mr-[5px]" color="red" icon="ep:close" />
+        <IconifyIcon class="mr-1" color="red" icon="lucide:x" />
         取消
       </li>
     </ul>

apps/web-antd/src/views/mall/promotion/kefu/modules/member/member-info.vue

@@ -22,7 +22,7 @@ import BasicInfo from '#/views/member/user/detail/modules/basic-info.vue';
 import OrderBrowsingHistory from './order-browsing-history.vue';
 import ProductBrowsingHistory from './product-browsing-history.vue';
 
-const activeTab = ref<'交易订单' | '会员信息' | '最近浏览'>('会员信息');
+const activeTab = ref<string>('会员信息');
 
 const tabActivation = computed(() => (tab: string) => activeTab.value === tab);
 
@@ -140,10 +140,10 @@ async function getUserData() {
 
 <template>
   <Layout
-    class="relative w-[300px] bg-[var(--background)] after:absolute after:left-0 after:top-0 after:h-full after:w-[1px] after:scale-x-[0.3] after:bg-[var(--el-border-color)] after:content-['']"
+    class="bg-card relative w-72 after:absolute after:left-0 after:top-0 after:h-full after:w-[1px] after:scale-x-[0.3] after:bg-gray-200 after:content-['']"
   >
     <Layout.Header
-      class="relative flex items-center justify-around bg-[var(--background)] before:absolute before:bottom-0 before:left-0 before:h-[1px] before:w-full before:scale-y-[0.3] before:bg-[var(--el-border-color)] before:content-['']"
+      class="!bg-card relative flex items-center justify-around before:absolute before:bottom-0 before:left-0 before:h-[1px] before:w-full before:scale-y-[0.3] before:bg-gray-200 before:content-['']"
     >
       <div
         :class="{
@@ -176,7 +176,7 @@ async function getUserData() {
         交易订单
       </div>
     </Layout.Header>
-    <Layout.Content class="relative m-0 h-full w-full p-[10px]">
+    <Layout.Content class="relative m-0 h-full w-full p-2">
       <template v-if="!isEmpty(conversation)">
         <div
           v-loading="loading"
@@ -190,11 +190,20 @@ async function getUserData() {
             </template>
           </BasicInfo>
           <!-- 账户信息 -->
-          <Card class="mt-10px h-full" shadow="never">
+          <Card
+            class="mt-2 h-full"
+            :body-style="{ padding: '16px' }"
+            shadow="never"
+          >
             <template #title>
               <span class="text-sm font-bold">账户信息</span>
             </template>
-            <AccountInfo :column="1" :user="user" :wallet="wallet" />
+            <AccountInfo
+              :column="1"
+              :user="user"
+              :wallet="wallet"
+              mode="kefu"
+            />
           </Card>
         </div>
         <div

apps/web-antd/src/views/mall/promotion/kefu/modules/member/product-browsing-history.vue

@@ -53,6 +53,6 @@ defineExpose({ getHistoryList, loadMore });
     :spu-id="item.spuId"
     :stock="item.stock"
     :title="item.spuName"
-    class="mb-10px"
+    class="mb-2.5"
   />
 </template>

apps/web-antd/src/views/mall/promotion/kefu/modules/message-list.vue

@@ -255,7 +255,7 @@ async function handleOldMessage() {
 function showTime(item: MallKefuMessageApi.Message, index: number) {
   if (unref(messageList.value)[index + 1]) {
     const dateString = dayjs(
-      unref(messageList.value)[index + 1].createTime,
+      unref(messageList.value)[index + 1]!.createTime,
     ).fromNow();
     return dateString !== dayjs(unref(item).createTime).fromNow();
   }
@@ -286,21 +286,21 @@ function showTime(item: MallKefuMessageApi.Message, index: number) {
           :key="item.id"
           class="w-full"
         >
-          <div class="mb-[20px] flex items-center justify-center">
+          <div class="mb-5 flex items-center justify-center">
             <!-- 日期 -->
             <div
               v-if="
                 item.contentType !== KeFuMessageContentTypeEnum.SYSTEM &&
                 showTime(item, index)
               "
-              class="w-fit rounded-lg bg-black/10 px-[5px] text-[10px] text-white"
+              class="w-fit rounded-lg bg-black/10 px-2 text-xs text-white"
             >
               {{ formatDate(item.createTime) }}
             </div>
             <!-- 系统消息 -->
             <div
               v-if="item.contentType === KeFuMessageContentTypeEnum.SYSTEM"
-              class="w-fit rounded-lg bg-black/10 px-[5px] text-[10px] text-white"
+              class="w-fit rounded-lg bg-black/10 px-2 text-xs text-white"
             >
               {{ item.content }}
             </div>
@@ -313,22 +313,22 @@ function showTime(item: MallKefuMessageApi.Message, index: number) {
                   ? 'justify-end'
                   : '',
             ]"
-            class="mb-[20px] flex w-full"
+            class="mb-5 flex w-full"
           >
             <Avatar
               v-if="item.senderType === UserTypeEnum.MEMBER"
               :src="conversation.userAvatar"
               alt="avatar"
-              class="h-[60px] w-[60px]"
+              class="h-14 w-14"
             />
             <div
               :class="{
-                'w-auto max-w-[50%] px-[10px] py-[5px] font-medium text-[#414141] transition-all duration-200 hover:scale-105':
+                'w-auto max-w-[50%] px-2 py-1 font-medium text-gray-500 transition-all duration-200 hover:scale-105':
                   KeFuMessageContentTypeEnum.TEXT === item.contentType,
-                'ml-[10px] mt-[3px] rounded-bl-[10px] rounded-br-[10px] rounded-tr-[10px] bg-white':
+                'rounded-bl-2 rounded-br-2 rounded-tr-2 ml-2 mt-1 bg-white':
                   KeFuMessageContentTypeEnum.TEXT === item.contentType &&
                   item.senderType === UserTypeEnum.MEMBER,
-                'mr-[10px] mt-[3px] rounded-bl-[10px] rounded-br-[10px] rounded-tl-[10px] bg-[rgb(206_223_255)]':
+                'rounded-bl-2 rounded-br-2 rounded-tl-2 mr-2 mt-1 bg-blue-50':
                   KeFuMessageContentTypeEnum.TEXT === item.contentType &&
                   item.senderType === UserTypeEnum.ADMIN,
               }"
@@ -355,7 +355,7 @@ function showTime(item: MallKefuMessageApi.Message, index: number) {
                     getMessageContent(item).picUrl || item.content,
                   ]"
                   :src="getMessageContent(item).picUrl || item.content"
-                  class="mx-[10px] !w-[200px]"
+                  class="mx-2 !w-52"
                   fit="contain"
                   preview-teleported
                 />
@@ -370,7 +370,7 @@ function showTime(item: MallKefuMessageApi.Message, index: number) {
                   :spu-id="getMessageContent(item).spuId"
                   :stock="getMessageContent(item).stock"
                   :title="getMessageContent(item).spuName"
-                  class="mx-[10px] max-w-[300px]"
+                  class="mx-2 max-w-80"
                 />
               </MessageItem>
               <!-- 订单消息 -->
@@ -378,7 +378,7 @@ function showTime(item: MallKefuMessageApi.Message, index: number) {
                 <OrderItem
                   v-if="KeFuMessageContentTypeEnum.ORDER === item.contentType"
                   :message="item"
-                  class="mx-[10px] max-w-full"
+                  class="mx-2 max-w-full"
                 />
               </MessageItem>
             </div>
@@ -393,26 +393,28 @@ function showTime(item: MallKefuMessageApi.Message, index: number) {
       </div>
       <div
         v-show="showNewMessageTip"
-        class="absolute bottom-[35px] right-[35px] z-10 flex cursor-pointer items-center rounded-[30px] bg-[var(--background)] p-[10px] text-xs shadow-md"
+        class="bg-card absolute bottom-9 right-9 z-10 flex cursor-pointer items-center rounded-full p-2.5 text-xs shadow-md"
         @click="handleToNewMessage"
       >
         <span>有新消息</span>
-        <IconifyIcon class="ml-5px" icon="ep:bottom" />
+        <IconifyIcon class="ml-1" icon="lucide:arrow-down-from-line" />
       </div>
     </Layout.Content>
-    <Layout.Footer class="!bg-card m-0 flex flex-col p-0">
+    <Layout.Footer
-      <div class="flex h-[44px] w-full items-center">
+      class="!bg-card m-0 flex flex-col border-t-2 border-gray-200 p-0"
+    >
+      <div class="flex h-11 w-full items-center">
         <EmojiSelectPopover @select-emoji="handleEmojiSelect" />
         <PictureSelectUpload
-          class="ml-[15px] mt-[3px] cursor-pointer"
+          class="ml-4 mt-1 cursor-pointer"
           @send-picture="handleSendPicture"
         />
       </div>
       <Textarea
         v-model:value="message"
         :rows="6"
+        class="border-none"
         placeholder="输入消息，Enter发送，Shift+Enter换行"
-        style="border-style: none"
         @press-enter="handleSendMessage"
       />
     </Layout.Footer>

apps/web-antd/src/views/mall/promotion/kefu/modules/message/message-item.vue

@@ -14,9 +14,9 @@ defineProps<{
   <div
     :class="[
       message.senderType === UserTypeEnum.MEMBER
-        ? `ml-[10px]`
+        ? `ml-2`
         : message.senderType === UserTypeEnum.ADMIN
-          ? `mr-[10px]`
+          ? `mr-2`
           : '',
     ]"
   >

apps/web-antd/src/views/mall/promotion/kefu/modules/message/order-item.vue

@@ -34,19 +34,19 @@ function openDetail(id: number) {
  */
 function formatOrderColor(order: any) {
   if (order.status === 0) {
-    return 'text-[#999]';
+    return 'text-gray-500';
   }
   if (
     order.status === 10 ||
     order.status === 20 ||
     (order.status === 30 && !order.commentStatus)
   ) {
-    return 'text-[#faad14]';
+    return 'text-orange-500';
   }
   if (order.status === 30 && order.commentStatus) {
-    return 'text-[#52c41a]';
+    return 'text-green-500';
   }
-  return 'text-[#ff3000]';
+  return 'text-red-500';
 }
 
 /**
@@ -81,10 +81,10 @@ function formatOrderStatus(order: any) {
   <div
     v-if="isObject(getMessageContent)"
     :key="getMessageContent.id"
-    class="mb-[10px] rounded-[10px] bg-gray-500/30 p-[10px]"
+    class="mb-2.5 rounded-md bg-gray-500/30 p-2.5"
   >
-    <div class="flex h-[28px] items-center justify-between px-[5px] font-bold">
+    <div class="flex h-7 items-center justify-between px-1.5 font-bold">
-      <div class="text-[13px]">
+      <div class="text-sm">
         订单号：
         <span
           class="cursor-pointer hover:text-[var(--left-menu-bg-active-color)] hover:underline"
@@ -95,7 +95,7 @@ function formatOrderStatus(order: any) {
       </div>
       <div
         :class="formatOrderColor(getMessageContent)"
-        class="text-[13px] font-bold"
+        class="text-sm font-bold"
       >
         {{ formatOrderStatus(getMessageContent) }}
       </div>
@@ -103,7 +103,7 @@ function formatOrderStatus(order: any) {
     <div
       v-for="item in getMessageContent.items"
       :key="item.id"
-      class="border-b"
+      class="border-b border-gray-200"
     >
       <ProductItem
         :num="item.count"
@@ -116,12 +116,12 @@ function formatOrderStatus(order: any) {
         :title="item.spuName"
       />
     </div>
-    <div class="flex justify-end pr-[5px] pt-[10px] font-bold">
+    <div class="flex justify-end pr-1.5 pt-2.5 font-bold">
       <div class="flex items-center">
-        <div class="text-[13px] leading-normal">
+        <div class="text-sm leading-normal">
           共 {{ getMessageContent?.productCount }} 件商品,总金额:
         </div>
-        <div class="font-[OPPOSANS] text-[13px] leading-normal">
+        <div class="text-sm font-medium leading-normal">
           ￥{{ fenToYuan(getMessageContent?.payPrice) }}
         </div>
       </div>

apps/web-antd/src/views/mall/promotion/kefu/modules/message/product-item.vue

@@ -42,11 +42,11 @@ function openDetail(spuId: number) {
 
 <template>
   <div
-    class="mb-[10px] flex w-full cursor-pointer items-center rounded-lg bg-gray-500/30 p-[10px]"
+    class="mb-2.5 flex w-full cursor-pointer items-center rounded-lg bg-gray-500/30 p-2.5"
     @click.stop="openDetail(spuId)"
   >
     <!-- 左侧商品图片-->
-    <div class="mr-6 w-[70px]">
+    <div class="mr-2 w-16">
       <Image
         :initial-index="0"
         :preview-src-list="[picUrl]"
@@ -65,7 +65,7 @@ function openDetail(spuId: number) {
         <span>销量: {{ salesCount || 0 }}</span>
       </div>
       <div class="flex items-center justify-between">
-        <span class="text-[#ff3000]">￥{{ fenToYuan(price) }}</span>
+        <span class="text-red-500">￥{{ fenToYuan(price) }}</span>
         <Button size="small" text type="primary">详情</Button>
       </div>
     </div>

apps/web-antd/src/views/mall/promotion/point/components/point-showcase.vue

@@ -137,7 +137,7 @@ watch(
           />
           <IconifyIcon
             v-show="!disabled"
-            icon="ep:circle-close-filled"
+            icon="lucide:x"
             class="absolute -right-2 -top-2 z-10 h-5 w-5 cursor-pointer text-red-500 hover:text-red-600"
             @click="handleRemoveActivity(index)"
           />
@@ -148,10 +148,10 @@ watch(
     <!-- 添加按钮 -->
     <Tooltip v-if="canAdd" title="选择活动">
       <div
-        class="flex h-[60px] w-[60px] cursor-pointer items-center justify-center rounded-lg border border-dashed border-gray-300 hover:border-blue-400"
+        class="flex h-14 w-14 cursor-pointer items-center justify-center rounded-lg border border-dashed border-gray-300 hover:border-blue-400"
         @click="openPointActivityTableSelect"
       >
-        <IconifyIcon icon="ep:plus" class="text-lg text-gray-400" />
+        <IconifyIcon icon="lucide:plus" class="text-lg text-gray-400" />
       </div>
     </Tooltip>
   </div>