feat: kefu

apps/web-antd/src/views/mall/promotion/kefu/index.vue

@@ -104,7 +104,7 @@ onBeforeUnmount(() => {
 
 <template>
   <Page auto-content-height>
-    <Layout.Content class="absolute left-0 top-0 flex h-full w-full flex-1">
+    <Layout.Content class="absolute left-0 top-0 m-4 flex h-full w-full flex-1">
       <!-- 会话列表 -->
       <ConversationList ref="conversationListRef" @change="handleChange" />
       <!-- 会话详情（选中会话的消息列表） -->

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

@@ -158,8 +158,11 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <Layout.Sider class="bg-card h-full border-b-2 p-2" width="260px">
+  <Layout.Sider
-    <div class="m-4 border-b border-gray-200 pb-4 font-bold">
+    class="bg-card relative flex h-full flex-col justify-between overflow-hidden p-4"
+    width="260px"
+  >
+    <div class="m-4 border-b border-gray-200 pb-2 font-bold">
       会话记录({{ kefuStore.getConversationList.length }})
     </div>
     <div
@@ -175,11 +178,7 @@ onBeforeUnmount(() => {
       <div class="flex w-full items-center justify-center">
         <div class="flex h-12 w-12 items-center justify-center">
           <!-- 头像 + 未读 -->
-          <Badge
+          <Badge :max="99" :value="item.adminUnreadMessageCount">
-            :hidden="item.adminUnreadMessageCount === 0"
-            :max="99"
-            :value="item.adminUnreadMessageCount"
-          >
             <Avatar :src="item.userAvatar" alt="avatar" />
           </Badge>
         </div>
@@ -210,7 +209,7 @@ onBeforeUnmount(() => {
     <ul
       v-show="showRightMenu"
       :style="rightMenuStyle"
-      class="absolute z-[1999] m-0 w-[130px] list-none rounded-xl bg-[hsl(var(--background))] p-1 shadow-md"
+      class="bg-background absolute z-[9999] m-0 w-32 list-none rounded-xl p-1 shadow-md"
     >
       <li
         v-show="!rightClickConversation.adminPinned"

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

@@ -12,7 +12,7 @@ import { isEmpty } from '@vben/utils';
 
 import { vScroll } from '@vueuse/components';
 import { useDebounceFn } from '@vueuse/core';
-import { Card, Empty, Layout, message } from 'ant-design-vue';
+import { Empty, Layout, message } from 'ant-design-vue';
 
 import { getUser } from '#/api/member/user';
 import { getWallet } from '#/api/pay/wallet/balance';
@@ -190,21 +190,17 @@ async function getUserData() {
             </template>
           </BasicInfo>
           <!-- 账户信息 -->
-          <Card
+          <AccountInfo
-            class="mt-2 h-full"
+            :column="1"
-            :body-style="{ padding: '16px' }"
+            :user="user"
-            shadow="never"
+            :wallet="wallet"
+            mode="kefu"
+            class="mt-2"
           >
             <template #title>
               <span class="text-sm font-bold">账户信息</span>
             </template>
-            <AccountInfo
+          </AccountInfo>
-              :column="1"
-              :user="user"
-              :wallet="wallet"
-              mode="kefu"
-            />
-          </Card>
         </div>
         <div
           v-show="activeTab !== '会员信息'"

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

@@ -319,16 +319,16 @@ function showTime(item: MallKefuMessageApi.Message, index: number) {
               v-if="item.senderType === UserTypeEnum.MEMBER"
               :src="conversation.userAvatar"
               alt="avatar"
-              class="h-14 w-14"
+              class="size-8"
             />
             <div
               :class="{
-                'w-auto max-w-[50%] px-2 py-1 font-medium text-gray-500 transition-all duration-200 hover:scale-105':
+                'w-auto max-w-[50%] p-1 font-medium text-gray-500 transition-all duration-200 hover:scale-105':
                   KeFuMessageContentTypeEnum.TEXT === item.contentType,
-                'rounded-bl-2 rounded-br-2 rounded-tr-2 ml-2 mt-1 bg-white':
+                'm-1 break-words rounded-lg bg-gray-100':
                   KeFuMessageContentTypeEnum.TEXT === item.contentType &&
                   item.senderType === UserTypeEnum.MEMBER,
-                'rounded-bl-2 rounded-br-2 rounded-tl-2 mr-2 mt-1 bg-blue-50':
+                'm-1 break-words rounded-lg bg-blue-50':
                   KeFuMessageContentTypeEnum.TEXT === item.contentType &&
                   item.senderType === UserTypeEnum.ADMIN,
               }"
@@ -342,7 +342,7 @@ function showTime(item: MallKefuMessageApi.Message, index: number) {
                     v-dompurify-html="
                       replaceEmoji(getMessageContent(item).text || item.content)
                     "
-                    class="line-height-normal h-1/1 w-full text-justify"
+                    class="h-full w-full text-justify"
                   ></div>
                 </template>
               </MessageItem>
@@ -400,26 +400,26 @@ function showTime(item: MallKefuMessageApi.Message, index: number) {
         <IconifyIcon class="ml-1" icon="lucide:arrow-down-from-line" />
       </div>
     </Layout.Content>
-    <Layout.Footer
+    <Layout.Footer class="!bg-card m-0 flex flex-col p-0">
-      class="!bg-card m-0 flex flex-col border-t-2 border-gray-200 p-0"
+      <div class="border-border flex flex-col rounded-xl border p-2">
-    >
+        <div class="flex h-11 w-full items-center">
-      <div class="flex h-11 w-full items-center">
+          <EmojiSelectPopover @select-emoji="handleEmojiSelect" />
-        <EmojiSelectPopover @select-emoji="handleEmojiSelect" />
+          <PictureSelectUpload
-        <PictureSelectUpload
+            class="ml-4 mt-1 cursor-pointer"
-          class="ml-4 mt-1 cursor-pointer"
+            @send-picture="handleSendPicture"
-          @send-picture="handleSendPicture"
+          />
+        </div>
+        <Textarea
+          v-model:value="message"
+          :rows="6"
+          class="border-none"
+          placeholder="输入消息，Enter发送，Shift+Enter换行"
+          @press-enter="handleSendMessage"
         />
       </div>
-      <Textarea
-        v-model:value="message"
-        :rows="6"
-        class="border-none"
-        placeholder="输入消息，Enter发送，Shift+Enter换行"
-        @press-enter="handleSendMessage"
-      />
     </Layout.Footer>
   </Layout>
-  <Layout v-else class="bg-card relative w-[calc(100%-300px-260px)]">
+  <Layout v-else class="bg-card relative w-[calc(100vw-300px-260px)]">
     <Layout.Content>
       <Empty description="请选择左侧的一个会话后开始" class="mt-[20%]" />
     </Layout.Content>

apps/web-antd/src/views/mall/promotion/kefu/modules/tools/emoji-select-popover.vue

@@ -31,22 +31,17 @@ function handleSelect(item: Emoji) {
           <li
             v-for="(item, index) in emojiList"
             :key="index"
-            :style="{
-              borderColor: 'hsl(var(--primary))',
-              color: 'hsl(var(--primary))',
-            }"
             :title="item.name"
-            class="icon-item w-1/10 mr-2 mt-1 flex cursor-pointer items-center justify-center border border-solid p-2"
+            class="w-1/10 border-primary m-2 flex cursor-pointer items-center justify-center border border-solid p-2"
             @click="handleSelect(item)"
           >
-            <img :src="item.url" class="h-6 w-6" />
+            <img :src="item.url" class="size-4" />
           </li>
         </ul>
       </List>
     </template>
     <IconifyIcon
-      :size="30"
+      class="ml-2.5 size-6 cursor-pointer"
-      class="ml-2.5 cursor-pointer"
       icon="twemoji:grinning-face"
     />
   </Popover>

apps/web-antd/src/views/mall/promotion/kefu/modules/tools/emoji.ts

@@ -58,17 +58,17 @@ export interface Emoji {
   url: string;
 }
 
-export const useEmoji = () => {
+export function useEmoji() {
   const emojiPathList = ref<any[]>([]);
 
   /** 加载本地图片 */
-  const initStaticEmoji = async () => {
+  async function initStaticEmoji() {
     const pathList = import.meta.glob('../../asserts/*.{png,jpg,jpeg,svg}');
     for (const path in pathList) {
       const imageModule: any = await pathList[path]?.();
       emojiPathList.value.push({ path, src: imageModule.default });
     }
-  };
+  }
 
   /** 初始化 */
   onMounted(async () => {
@@ -83,7 +83,7 @@ export const useEmoji = () => {
    * @return 替换后的文本
    * @param content 消息内容
    */
-  const replaceEmoji = (content: string) => {
+  function replaceEmoji(content: string) {
     let newData = content;
     if (typeof newData !== 'object') {
       const reg = /\[(.+?)\]/g; // [] 中括号
@@ -99,7 +99,7 @@ export const useEmoji = () => {
       }
     }
     return newData;
-  };
+  }
 
   /** 获得所有表情 */
   function getEmojiList(): Emoji[] {
@@ -123,4 +123,4 @@ export const useEmoji = () => {
   }
 
   return { replaceEmoji, getEmojiList };
-};
+}