feat: kefu

2025-11-06 12:44:50 +08:00
parent c8e574b6c2
commit c6732bd658
6 changed files with 46 additions and 56 deletions
--- a/apps/web-antd/src/views/mall/promotion/kefu/index.vue
+++ b/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" />
      <!-- 会话详情（选中会话的消息列表） -->
--- a/apps/web-antd/src/views/mall/promotion/kefu/modules/conversation-list.vue
+++ b/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">
-    <div class="m-4 border-b border-gray-200 pb-4 font-bold">
+  <Layout.Sider
+    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
-            :hidden="item.adminUnreadMessageCount === 0"
-            :max="99"
-            :value="item.adminUnreadMessageCount"
-          >
+          <Badge :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"
--- a/apps/web-antd/src/views/mall/promotion/kefu/modules/member/member-info.vue
+++ b/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
-            class="mt-2 h-full"
-            :body-style="{ padding: '16px' }"
-            shadow="never"
+          <AccountInfo
+            :column="1"
+            :user="user"
+            :wallet="wallet"
+            mode="kefu"
+            class="mt-2"
          >
            <template #title>
              <span class="text-sm font-bold">账户信息</span>
            </template>
-            <AccountInfo
-              :column="1"
-              :user="user"
-              :wallet="wallet"
-              mode="kefu"
-            />
-          </Card>
+          </AccountInfo>
        </div>
        <div
          v-show="activeTab !== '会员信息'"
--- a/apps/web-antd/src/views/mall/promotion/kefu/modules/message-list.vue
+++ b/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
-      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-4 mt-1 cursor-pointer"
-          @send-picture="handleSendPicture"
+    <Layout.Footer class="!bg-card m-0 flex flex-col p-0">
+      <div class="border-border flex flex-col rounded-xl border p-2">
+        <div class="flex h-11 w-full items-center">
+          <EmojiSelectPopover @select-emoji="handleEmojiSelect" />
+          <PictureSelectUpload
+            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换行"
+          @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>
--- a/apps/web-antd/src/views/mall/promotion/kefu/modules/tools/emoji-select-popover.vue
+++ b/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 cursor-pointer"
+      class="ml-2.5 size-6 cursor-pointer"
      icon="twemoji:grinning-face"
    />
  </Popover>
--- a/apps/web-antd/src/views/mall/promotion/kefu/modules/tools/emoji.ts
+++ b/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 };
-};
+}