feat(@vben/web-antd):迁移客服模块

apps/web-antd/package.json

@@ -43,6 +43,7 @@
     "@vben/styles": "workspace:*",
     "@vben/types": "workspace:*",
     "@vben/utils": "workspace:*",
+    "@vueuse/components": "^14.0.0",
     "@vueuse/core": "catalog:",
     "@vueuse/integrations": "catalog:",
     "ant-design-vue": "catalog:",

apps/web-antd/src/components/card-title/CardTitle.vue

@@ -0,0 +1,37 @@
+<script lang="ts" setup>
+defineProps({
+  title: {
+    type: String,
+    required: true,
+  },
+});
+
+defineComponent({
+  name: 'CardTitle',
+});
+</script>
+
+<template>
+  <span class="card-title">{{ title }}</span>
+</template>
+
+<style scoped lang="scss">
+.card-title {
+  font-size: 14px;
+  font-weight: 600;
+
+  &::before {
+    position: relative;
+    top: 8px;
+    left: -5px;
+    display: inline-block;
+    width: 3px;
+    height: 14px;
+    content: '';
+    //background-color: #105cfb;
+    background: var(--el-color-primary);
+    border-radius: 5px;
+    transform: translateY(-50%);
+  }
+}
+</style>

apps/web-antd/src/components/card-title/index.ts

@@ -0,0 +1 @@
+export { default as CardTitle } from './CardTitle.vue';

apps/web-antd/src/store/mall/kefu.ts

@@ -0,0 +1,100 @@
+import type { MallKefuConversationApi } from '#/api/mall/promotion/kefu/conversation';
+import type { MallKefuMessageApi } from '#/api/mall/promotion/kefu/message';
+
+import { isEmpty } from '@vben/utils';
+
+import { acceptHMRUpdate, defineStore } from 'pinia';
+
+import * as KeFuConversationApi from '#/api/mall/promotion/kefu/conversation';
+
+interface MallKefuInfoVO {
+  conversationList: MallKefuConversationApi.Conversation[]; // 会话列表
+  conversationMessageList: Map<number, MallKefuMessageApi.Message[]>; // 会话消息
+}
+
+export const useMallKefuStore = defineStore('mall-kefu', {
+  state: (): MallKefuInfoVO => ({
+    conversationList: [],
+    conversationMessageList: new Map<number, MallKefuMessageApi.Message[]>(), // key 会话，value 会话消息列表
+  }),
+  getters: {
+    getConversationList(): MallKefuConversationApi.Conversation[] {
+      return this.conversationList;
+    },
+    getConversationMessageList(): (
+      conversationId: number,
+    ) => MallKefuMessageApi.Message[] | undefined {
+      return (conversationId: number) =>
+        this.conversationMessageList.get(conversationId);
+    },
+  },
+  actions: {
+    // ======================= 会话消息相关 =======================
+    /** 缓存历史消息 */
+    saveMessageList(
+      conversationId: number,
+      messageList: MallKefuMessageApi.Message[],
+    ) {
+      this.conversationMessageList.set(conversationId, messageList);
+    },
+
+    // ======================= 会话相关 =======================
+    /** 加载会话缓存列表 */
+    async setConversationList() {
+      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((a, b) => {
+        // 按照置顶排序，置顶的会在前面
+        if (a.adminPinned !== b.adminPinned) {
+          return a.adminPinned ? -1 : 1;
+        }
+        // 按照最后消息时间排序，最近的会在前面
+        return (
+          (b.lastMessageTime as unknown as number) -
+          (a.lastMessageTime as unknown as number)
+        );
+      });
+    },
+  },
+});
+
+// 解决热更新问题
+const hot = import.meta.hot;
+if (hot) {
+  hot.accept(acceptHMRUpdate(useMallKefuStore, hot));
+}

apps/web-antd/src/views/mall/promotion/kefu/asserts/picture.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+        "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg t="1720063872285" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6895"
+     width="200" height="200">
+    <path d="M782.16 880.98c-179.31 23.91-361 23.91-540.32 0C138.89 867.25 62 779.43 62 675.57V348.43c0-103.86 76.89-191.69 179.84-205.41 179.31-23.91 361-23.91 540.31 0C885.11 156.75 962 244.57 962 348.43v327.13c0 103.87-76.89 191.69-179.84 205.42z"
+          fill="#FF554D" p-id="6896"></path>
+    <path d="M226.11 596.86c-9.74 47.83 17.26 95.6 63.48 111.3C333.49 723.08 394.55 737 469.53 737c59.25 0 105.46-8.69 140.23-19.7 51.59-16.34 79.94-71.16 63.37-122.68-24.47-76.11-65.57-180.7-106.68-180.7-64.62 0-64.62 96.92-64.62 96.92S437.22 317 372.61 317c-82.11 0-117.85 139.12-146.5 279.86z"
+          fill="#FFFFFF" p-id="6897"></path>
+    <path d="M782 347m-60 0a60 60 0 1 0 120 0 60 60 0 1 0-120 0Z" fill="#FFBC55" p-id="6898"></path>
+</svg>

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

@@ -0,0 +1,286 @@
+<script lang="ts" setup>
+import type { MallKefuConversationApi } from '#/api/mall/promotion/kefu/conversation';
+
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+import { formatPast, jsonParse } from '@vben/utils';
+
+import { Avatar, Badge, message } from 'ant-design-vue';
+
+import * as KeFuConversationApi from '#/api/mall/promotion/kefu/conversation';
+import { useMallKefuStore } from '#/store/mall/kefu';
+
+import { KeFuMessageContentTypeEnum } from './tools/constants';
+import { useEmoji } from './tools/emoji';
+
+defineOptions({ name: 'KeFuConversationList' });
+
+/** 打开右侧的消息列表 */
+const emits = defineEmits<{
+  (e: 'change', v: MallKefuConversationApi.Conversation): void;
+}>();
+const kefuStore = useMallKefuStore(); // 客服缓存
+const { replaceEmoji } = useEmoji();
+const activeConversationId = ref(-1); // 选中的会话
+const collapse = ref(false); // 折叠菜单
+
+/** 计算消息最后发送时间距离现在过去了多久 */
+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 openRightMessage = (item: MallKefuConversationApi.Conversation) => {
+  // 同一个会话则不处理
+  if (activeConversationId.value === item.id) {
+    return;
+  }
+  activeConversationId.value = item.id;
+  emits('change', item);
+};
+
+/** 获得消息类型 */
+const getConversationDisplayText = computed(
+  () => (lastMessageContentType: number, lastMessageContent: string) => {
+    switch (lastMessageContentType) {
+      case KeFuMessageContentTypeEnum.IMAGE: {
+        return '[图片消息]';
+      }
+      case KeFuMessageContentTypeEnum.ORDER: {
+        return '[订单消息]';
+      }
+      case KeFuMessageContentTypeEnum.PRODUCT: {
+        return '[商品消息]';
+      }
+      case KeFuMessageContentTypeEnum.SYSTEM: {
+        return '[系统消息]';
+      }
+      case KeFuMessageContentTypeEnum.TEXT: {
+        return replaceEmoji(
+          jsonParse(lastMessageContent).text || lastMessageContent,
+        );
+      }
+      case KeFuMessageContentTypeEnum.VIDEO: {
+        return '[视频消息]';
+      }
+      case KeFuMessageContentTypeEnum.VOICE: {
+        return '[语音消息]';
+      }
+      default: {
+        return '';
+      }
+    }
+  },
+);
+
+// ======================= 右键菜单 =======================
+const showRightMenu = ref(false); // 显示右键菜单
+const rightMenuStyle = ref<any>({}); // 右键菜单 Style
+const rightClickConversation = ref<MallKefuConversationApi.Conversation>(
+  {} as MallKefuConversationApi.Conversation,
+); // 右键选中的会话对象
+
+/** 打开右键菜单 */
+const rightClick = (
+  mouseEvent: PointerEvent,
+  item: MallKefuConversationApi.Conversation,
+) => {
+  rightClickConversation.value = item;
+  // 显示右键菜单
+  showRightMenu.value = true;
+  rightMenuStyle.value = {
+    top: `${mouseEvent.clientY - 110}px`,
+    left: collapse.value
+      ? `${mouseEvent.clientX - 80}px`
+      : `${mouseEvent.clientX - 210}px`,
+  };
+};
+/** 关闭右键菜单 */
+const closeRightMenu = () => {
+  showRightMenu.value = false;
+};
+
+/** 置顶会话 */
+const updateConversationPinned = async (adminPinned: boolean) => {
+  // 1. 会话置顶/取消置顶
+  await KeFuConversationApi.updateConversationPinned({
+    id: rightClickConversation.value.id,
+    adminPinned,
+  });
+  message.notifySuccess(adminPinned ? '置顶成功' : '取消置顶成功');
+  // 2. 关闭右键菜单，更新会话列表
+  closeRightMenu();
+  await kefuStore.updateConversation(rightClickConversation.value.id);
+};
+
+/** 删除会话 */
+const deleteConversation = async () => {
+  // 1. 删除会话
+  await message.confirm('您确定要删除该会话吗？');
+  await KeFuConversationApi.deleteConversation(rightClickConversation.value.id);
+  // 2. 关闭右键菜单，更新会话列表
+  closeRightMenu();
+  kefuStore.deleteConversation(rightClickConversation.value.id);
+};
+
+/** 监听右键菜单的显示状态，添加点击事件监听器 */
+watch(showRightMenu, (val) => {
+  if (val) {
+    document.body.addEventListener('click', closeRightMenu);
+  } else {
+    document.body.removeEventListener('click', closeRightMenu);
+  }
+});
+
+const timer = ref<any>();
+/** 初始化 */
+onMounted(() => {
+  timer.value = setInterval(calculationLastMessageTime, 1000 * 10); // 十秒计算一次
+});
+/** 组件卸载前 */
+onBeforeUnmount(() => {
+  clearInterval(timer.value);
+});
+</script>
+
+<template>
+  <a-layout-sider class="kefu h-full pt-[5px]" width="260px">
+    <div class="color-[#999] my-[10px] font-bold">
+      会话记录({{ kefuStore.getConversationList.length }})
+    </div>
+    <div
+      v-for="item in kefuStore.getConversationList"
+      :key="item.id"
+      :class="{
+        active: item.id === activeConversationId,
+        pinned: item.adminPinned,
+      }"
+      class="kefu-conversation flex items-center px-[10px]"
+      @click="openRightMessage(item)"
+      @contextmenu.prevent="rightClick($event as PointerEvent, item)"
+    >
+      <div class="!flex w-full items-center justify-center">
+        <div class="w-50[px] h-50[px] flex items-center justify-center">
+          <!-- 头像 + 未读 -->
+          <Badge
+            :hidden="item.adminUnreadMessageCount === 0"
+            :max="99"
+            :value="item.adminUnreadMessageCount"
+          >
+            <Avatar :src="item.userAvatar" alt="avatar" />
+          </Badge>
+        </div>
+        <div class="ml-[10px] w-full">
+          <div class="!flex w-full items-center justify-between">
+            <span class="username">{{ item.userNickname || 'null' }}</span>
+            <span class="color-[#999]" style="font-size: 13px">
+              {{ lastMessageTimeMap.get(item.id) ?? '计算中' }}
+            </span>
+          </div>
+          <!-- 最后聊天内容 -->
+          <div
+            v-dompurify-html="
+              getConversationDisplayText(
+                item.lastMessageContentType,
+                item.lastMessageContent,
+              )
+            "
+            class="last-message color-[#999] !flex items-center"
+          ></div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 右键，进行操作（类似微信） -->
+    <ul v-show="showRightMenu" :style="rightMenuStyle" class="right-menu-ul">
+      <li
+        v-show="!rightClickConversation.adminPinned"
+        class="flex items-center"
+        @click.stop="updateConversationPinned(true)"
+      >
+        <IconifyIcon class="mr-[5px]" icon="ep:top" />
+        置顶会话
+      </li>
+      <li
+        v-show="rightClickConversation.adminPinned"
+        class="flex items-center"
+        @click.stop="updateConversationPinned(false)"
+      >
+        <IconifyIcon class="mr-[5px]" icon="ep:bottom" />
+        取消置顶
+      </li>
+      <li class="flex items-center" @click.stop="deleteConversation">
+        <IconifyIcon class="mr-[5px]" color="red" icon="ep:delete" />
+        删除会话
+      </li>
+      <li class="flex items-center" @click.stop="closeRightMenu">
+        <IconifyIcon class="mr-[5px]" color="red" icon="ep:close" />
+        取消
+      </li>
+    </ul>
+  </a-layout-sider>
+</template>
+
+<style lang="scss" scoped>
+.kefu {
+  background-color: var(--app-content-bg-color);
+
+  &-conversation {
+    height: 60px;
+    //background-color: #fff;
+    //transition: border-left 0.05s ease-in-out; /* 设置过渡效果 */
+
+    .username {
+      min-width: 0;
+      max-width: 60%;
+    }
+
+    .last-message {
+      font-size: 13px;
+    }
+
+    .last-message,
+    .username {
+      display: -webkit-box;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      -webkit-line-clamp: 1;
+      -webkit-box-orient: vertical;
+    }
+  }
+
+  .active {
+    background-color: rgb(128 128 128 / 50%); // 透明色，暗黑模式下也能体现
+  }
+
+  .right-menu-ul {
+    position: absolute;
+    width: 130px;
+    padding: 5px;
+    margin: 0;
+    list-style-type: none; /* 移除默认的项目符号 */
+    background-color: var(--app-content-bg-color);
+    border-radius: 12px;
+    box-shadow: 0 2px 4px rgb(0 0 0 / 10%); /* 阴影效果 */
+
+    li {
+      padding: 8px 16px;
+      cursor: pointer;
+      border-radius: 12px;
+      transition: background-color 0.3s; /* 平滑过渡 */
+      &:hover {
+        background-color: var(
+          --left-menu-bg-active-color
+        ); /* 悬停时的背景颜色 */
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,563 @@
+<script lang="ts" setup>
+import type { UseScrollReturn } from '@vueuse/core';
+
+import type { Emoji } from './tools/emoji';
+
+import type { MallKefuConversationApi } from '#/api/mall/promotion/kefu/conversation';
+import type { MallKefuMessageApi } from '#/api/mall/promotion/kefu/message';
+
+import { computed, nextTick, reactive, ref, unref } from 'vue';
+
+import { UserTypeEnum } from '@vben/constants';
+import { IconifyIcon } from '@vben/icons';
+import { formatDate, isEmpty, jsonParse } from '@vben/utils';
+
+import { vScroll } from '@vueuse/components';
+import { useDebounceFn, useScroll } from '@vueuse/core';
+import { Avatar, Empty, Image, notification } from 'ant-design-vue'; // 添加 Empty 组件导入
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
+
+import * as KeFuMessageApi from '#/api/mall/promotion/kefu/message';
+import { useMallKefuStore } from '#/store/mall/kefu';
+
+import MessageItem from './message/MessageItem.vue';
+import OrderItem from './message/OrderItem.vue';
+import ProductItem from './message/ProductItem.vue';
+import { KeFuMessageContentTypeEnum } from './tools/constants';
+import { useEmoji } from './tools/emoji';
+import EmojiSelectPopover from './tools/EmojiSelectPopover.vue';
+import PictureSelectUpload from './tools/PictureSelectUpload.vue';
+
+defineOptions({ name: 'KeFuMessageList' });
+
+dayjs.extend(relativeTime);
+
+const message = ref(''); // 消息弹窗
+const { replaceEmoji } = useEmoji();
+const messageList = ref<MallKefuMessageApi.Message[]>([]); // 消息列表
+const conversation = ref<MallKefuConversationApi.Conversation>(
+  {} as MallKefuConversationApi.Conversation,
+); // 用户会话
+const showNewMessageTip = ref(false); // 显示有新消息提示
+const queryParams = reactive({
+  conversationId: 0,
+  createTime: undefined,
+});
+const total = ref(0); // 消息总条数
+const refreshContent = ref(false); // 内容刷新,主要解决会话消息页面高度不一致导致的滚动功能精度失效
+const kefuStore = useMallKefuStore(); // 客服缓存
+
+/** 获悉消息内容 */
+const getMessageContent = computed(
+  () => (item: any) => jsonParse(item.content),
+);
+/** 获得消息列表 */
+const getMessageList = async () => {
+  const res = await KeFuMessageApi.getKeFuMessageList(queryParams);
+  if (isEmpty(res)) {
+    // 当返回的是空列表说明没有消息或者已经查询完了历史消息
+    skipGetMessageList.value = true;
+    return;
+  }
+  queryParams.createTime = formatDate(res.at(-1).createTime) as any;
+
+  // 情况一：加载最新消息
+  if (queryParams.createTime) {
+    // 情况二：加载历史消息
+    for (const item of res) {
+      pushMessage(item);
+    }
+  } else {
+    messageList.value = res;
+  }
+  refreshContent.value = true;
+};
+
+/** 添加消息 */
+const pushMessage = (message: any) => {
+  if (messageList.value.some((val) => val.id === message.id)) {
+    return;
+  }
+  messageList.value.push(message);
+};
+
+/** 按照时间倒序，获取消息列表 */
+const getMessageList0 = computed(() => {
+  // 使用展开运算符创建新数组，避免直接修改原数组
+  return [...messageList.value].sort(
+    (a: any, b: any) => a.createTime - b.createTime,
+  );
+});
+
+/** 刷新消息列表 */
+const refreshMessageList = async (message?: any) => {
+  if (!conversation.value) {
+    return;
+  }
+
+  if (message === undefined) {
+    queryParams.createTime = undefined;
+    await getMessageList();
+  } else {
+    // 当前查询会话与消息所属会话不一致则不做处理
+    if (message.conversationId !== conversation.value.id) {
+      return;
+    }
+    pushMessage(message);
+  }
+
+  if (loadHistory.value) {
+    // 右下角显示有新消息提示
+    showNewMessageTip.value = true;
+  } else {
+    // 滚动到最新消息处
+    await handleToNewMessage();
+  }
+};
+
+/** 获得新会话的消息列表, 点击切换时，读取缓存；然后异步获取新消息，merge 下； */
+const getNewMessageList = async (val: MallKefuMessageApi.Message) => {
+  // 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;
+  skipGetMessageList.value = false;
+  // 2.2 设置会话相关属性
+  conversation.value = val;
+  queryParams.conversationId = val.id;
+  queryParams.createTime = undefined;
+  // 3. 获取消息
+  await refreshMessageList();
+};
+defineExpose({ getNewMessageList, refreshMessageList });
+
+const showKeFuMessageList = computed(() => !isEmpty(conversation.value)); // 是否显示聊天区域
+const skipGetMessageList = ref(false); // 跳过消息获取
+
+/** 处理表情选择 */
+const handleEmojiSelect = (item: Emoji) => {
+  message.value += item.name;
+};
+
+/** 处理图片发送 */
+const handleSendPicture = async (picUrl: string) => {
+  // 组织发送消息
+  const msg = {
+    conversationId: conversation.value.id,
+    contentType: KeFuMessageContentTypeEnum.IMAGE,
+    content: JSON.stringify({ picUrl }),
+  };
+  await sendMessage(msg);
+};
+
+/** 发送文本消息 */
+const handleSendMessage = async (event: any) => {
+  // shift 不发送
+  if (event.shiftKey) {
+    return;
+  }
+  // 1. 校验消息是否为空
+  if (isEmpty(unref(message.value)?.trim())) {
+    notification.warning({ message: '请输入消息后再发送哦！' });
+    message.value = '';
+    return;
+  }
+  // 2. 组织发送消息
+  const msg = {
+    conversationId: conversation.value.id,
+    contentType: KeFuMessageContentTypeEnum.TEXT,
+    content: JSON.stringify({ text: message.value }),
+  };
+  await sendMessage(msg);
+};
+
+/** 真正发送消息 【共用】*/
+const sendMessage = async (msg: MallKefuMessageApi.MessageSend) => {
+  // 发送消息
+  await KeFuMessageApi.sendKeFuMessage(msg);
+  message.value = '';
+  // 加载消息列表
+  await refreshMessageList();
+  // 更新会话缓存
+  await kefuStore.updateConversation(conversation.value.id);
+};
+
+/** 滚动到底部 */
+const innerRef = ref<HTMLDivElement>();
+const scrollbarRef = ref<HTMLElement | null>(null);
+const { y } = useScroll(scrollbarRef);
+
+const scrollToBottom = async () => {
+  if (!scrollbarRef.value) return;
+  // 1. 首次加载时滚动到最新消息，如果加载的是历史消息则不滚动
+  if (loadHistory.value) {
+    return;
+  }
+  // 2.1 滚动到最新消息，关闭新消息提示
+  await nextTick();
+  // 使用 useScroll 监听滚动容器
+
+  y.value = scrollbarRef.value.scrollHeight - innerRef.value!.clientHeight;
+  // scrollbarRef.value!.setScrollTop(innerRef.value!.clientHeight)
+  showNewMessageTip.value = false;
+  // 2.2 消息已读
+  await KeFuMessageApi.updateKeFuMessageReadStatus(conversation.value.id);
+};
+
+/** 查看新消息 */
+const handleToNewMessage = async () => {
+  loadHistory.value = false;
+  await scrollToBottom();
+};
+
+const loadHistory = ref(false); // 加载历史消息
+/** 处理消息列表滚动事件(debounce 限流) */
+const handleScroll = useDebounceFn((state: UseScrollReturn) => {
+  const { arrivedState } = state;
+  if (skipGetMessageList.value) {
+    return;
+  }
+  // 滚动到底部了
+  if (arrivedState.bottom) {
+    loadHistory.value = false;
+    refreshMessageList();
+  }
+
+  // 触顶自动加载下一页数据
+  if (arrivedState.top) {
+    handleOldMessage();
+  }
+}, 200);
+/** 加载历史消息 */
+const handleOldMessage = async () => {
+  // 记录已有页面高度
+  const oldPageHeight = innerRef.value?.clientHeight;
+  if (!oldPageHeight) {
+    return;
+  }
+  loadHistory.value = true;
+  await getMessageList();
+  // 等页面加载完后，获得上一页最后一条消息的位置，控制滚动到它所在位置
+  // scrollbarRef.value!.setScrollTop(innerRef.value!.clientHeight - oldPageHeight)
+  y.value =
+    scrollbarRef.value.scrollHeight -
+    innerRef.value!.clientHeight -
+    oldPageHeight;
+};
+
+/**
+ * 是否显示时间
+ *
+ * @param {*} item - 数据
+ * @param {*} index - 索引
+ */
+const showTime = computed(
+  () => (item: MallKefuMessageApi.Message, index: number) => {
+    if (unref(messageList.value)[index + 1]) {
+      const dateString = dayjs(
+        unref(messageList.value)[index + 1].createTime,
+      ).fromNow();
+      return dateString !== dayjs(unref(item).createTime).fromNow();
+    }
+    return false;
+  },
+);
+</script>
+
+<template>
+  <a-layout v-if="showKeFuMessageList" class="kefu">
+    <a-layout-header class="kefu-header">
+      <div class="kefu-title">{{ conversation.userNickname }}</div>
+    </a-layout-header>
+    <a-layout-content class="kefu-content">
+      <div
+        ref="scrollbarRef"
+        class="flex h-full overflow-y-auto"
+        v-scroll="handleScroll"
+      >
+        <div v-if="refreshContent" ref="innerRef" class="w-full px-[10px]">
+          <!-- 消息列表 -->
+          <div
+            v-for="(item, index) in getMessageList0"
+            :key="item.id"
+            class="w-full"
+          >
+            <div class="mb-[20px] flex items-center justify-center">
+              <!-- 日期 -->
+              <div
+                v-if="
+                  item.contentType !== KeFuMessageContentTypeEnum.SYSTEM &&
+                  showTime(item, index)
+                "
+                class="date-message"
+              >
+                {{ formatDate(item.createTime) }}
+              </div>
+              <!-- 系统消息 -->
+              <div
+                v-if="item.contentType === KeFuMessageContentTypeEnum.SYSTEM"
+                class="system-message"
+              >
+                {{ item.content }}
+              </div>
+            </div>
+            <div
+              :class="[
+                item.senderType === UserTypeEnum.MEMBER
+                  ? `ss-row-left`
+                  : item.senderType === UserTypeEnum.ADMIN
+                    ? `ss-row-right`
+                    : '',
+              ]"
+              class="mb-[20px] flex w-full"
+            >
+              <Avatar
+                v-if="item.senderType === UserTypeEnum.MEMBER"
+                :src="conversation.userAvatar"
+                alt="avatar"
+                class="h-[60px] w-[60px]"
+              />
+              <div
+                :class="{
+                  'kefu-message':
+                    KeFuMessageContentTypeEnum.TEXT === item.contentType,
+                }"
+              >
+                <!-- 文本消息 -->
+                <MessageItem :message="item">
+                  <template
+                    v-if="KeFuMessageContentTypeEnum.TEXT === item.contentType"
+                  >
+                    <div
+                      v-dompurify-html="
+                        replaceEmoji(
+                          getMessageContent(item).text || item.content,
+                        )
+                      "
+                      class="line-height-normal h-1/1 w-full text-justify"
+                    ></div>
+                  </template>
+                </MessageItem>
+                <!-- 图片消息 -->
+                <MessageItem :message="item">
+                  <Image
+                    v-if="KeFuMessageContentTypeEnum.IMAGE === item.contentType"
+                    :initial-index="0"
+                    :preview-src-list="[
+                      getMessageContent(item).picUrl || item.content,
+                    ]"
+                    :src="getMessageContent(item).picUrl || item.content"
+                    class="mx-[10px] w-[200px]"
+                    fit="contain"
+                    preview-teleported
+                  />
+                </MessageItem>
+                <!-- 商品消息 -->
+                <MessageItem :message="item">
+                  <ProductItem
+                    v-if="
+                      KeFuMessageContentTypeEnum.PRODUCT === item.contentType
+                    "
+                    :pic-url="getMessageContent(item).picUrl"
+                    :price="getMessageContent(item).price"
+                    :sales-count="getMessageContent(item).salesCount"
+                    :spu-id="getMessageContent(item).spuId"
+                    :stock="getMessageContent(item).stock"
+                    :title="getMessageContent(item).spuName"
+                    class="mx-[10px] max-w-[300px]"
+                  />
+                </MessageItem>
+                <!-- 订单消息 -->
+                <MessageItem :message="item">
+                  <OrderItem
+                    v-if="KeFuMessageContentTypeEnum.ORDER === item.contentType"
+                    :message="item"
+                    class="mx-[10px] max-w-full"
+                  />
+                </MessageItem>
+              </div>
+              <Avatar
+                v-if="item.senderType === UserTypeEnum.ADMIN"
+                :src="item.senderAvatar"
+                alt="avatar"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        v-show="showNewMessageTip"
+        class="newMessageTip flex cursor-pointer items-center"
+        @click="handleToNewMessage"
+      >
+        <span>有新消息</span>
+        <IconifyIcon class="ml-5px" icon="ep:bottom" />
+      </div>
+    </a-layout-content>
+    <a-layout-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>
+      <a-textarea
+        v-model:value="message"
+        :rows="6"
+        placeholder="输入消息，Enter发送，Shift+Enter换行"
+        style="border-style: none"
+        @keyup.enter.prevent="handleSendMessage"
+      />
+    </a-layout-footer>
+  </a-layout>
+  <a-layout v-else class="kefu">
+    <a-layout-content>
+      <Empty description="请选择左侧的一个会话后开始" class="mt-[50px]"/>
+    </a-layout-content>
+  </a-layout>
+</template>
+
+<style lang="scss" scoped>
+.kefu {
+  position: relative;
+  width: calc(100% - 300px - 260px);
+  background-color: var(--app-content-bg-color);
+
+  &::after {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 1px; /* 实际宽度 */
+    height: 100%;
+    content: '';
+    background-color: var(--border-color);
+    transform: scaleX(0.3); /* 缩小宽度 */
+  }
+
+  .kefu-header {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background-color: var(--app-content-bg-color);
+
+    &::before {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      height: 1px; /* 初始宽度 */
+      content: '';
+      background-color: var(-border-color);
+      transform: scaleY(0.3); /* 缩小视觉高度 */
+    }
+
+    &-title {
+      font-size: 18px;
+      font-weight: bold;
+    }
+  }
+
+  &-content {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    padding: 10px;
+    margin: 0;
+
+    .newMessageTip {
+      position: absolute;
+      right: 35px;
+      bottom: 35px;
+      padding: 10px;
+      font-size: 12px;
+      background-color: var(--app-content-bg-color);
+      border-radius: 30px;
+      box-shadow: 0 2px 4px rgb(0 0 0 / 10%); /* 阴影效果 */
+    }
+
+    .ss-row-left {
+      justify-content: flex-start;
+
+      .kefu-message {
+        margin-top: 3px;
+        margin-left: 10px;
+        background-color: #fff;
+        border-top-right-radius: 10px;
+        border-bottom-right-radius: 10px;
+        border-bottom-left-radius: 10px;
+      }
+    }
+
+    .ss-row-right {
+      justify-content: flex-end;
+
+      .kefu-message {
+        margin-top: 3px;
+        margin-right: 10px;
+        background-color: rgb(206 223 255);
+        border-top-left-radius: 10px;
+        border-bottom-right-radius: 10px;
+        border-bottom-left-radius: 10px;
+      }
+    }
+
+    // 消息气泡
+    .kefu-message {
+      width: auto;
+      max-width: 50%;
+      padding: 5px 10px;
+      font-weight: 500;
+      color: #414141;
+      //text-align: left;
+      //display: inline-block !important;
+      //word-break: break-all;
+      transition: all 0.2s;
+
+      &:hover {
+        transform: scale(1.03);
+      }
+    }
+
+    .date-message,
+    .system-message {
+      width: fit-content;
+      padding: 0 5px;
+      font-size: 10px;
+      color: #fff;
+      background-color: rgb(0 0 0 / 10%);
+      border-radius: 8px;
+    }
+  }
+
+  .kefu-footer {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    height: auto;
+    padding: 0;
+    margin: 0;
+
+    &::before {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 1px; /* 初始宽度 */
+      content: '';
+      background-color: var(-border-color);
+      transform: scaleY(0.3); /* 缩小视觉高度 */
+    }
+
+    .chat-tools {
+      width: 100%;
+      height: 44px;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,3 @@
+export { default as KeFuConversationList } from './KeFuConversationList.vue';
+export { default as KeFuMessageList } from './KeFuMessageList.vue';
+export { default as MemberInfo } from './member/MemberInfo.vue';

apps/web-antd/src/views/mall/promotion/kefu/components/member/MemberInfo.vue

@@ -0,0 +1,287 @@
+<!-- 右侧信息：会员信息 + 最近浏览 + 交易订单 -->
+<script lang="ts" setup>
+import type { MallKefuConversationApi } from '#/api/mall/promotion/kefu/conversation';
+
+import { computed, nextTick, ref } from 'vue';
+
+import { isEmpty } from '@vben/utils';
+
+// import { debounce } from 'lodash-es'
+import { useDebounceFn } from '@vueuse/core';
+import { Card, Empty,message } from 'ant-design-vue';
+
+import * as UserApi from '#/api/member/user';
+import * as WalletApi from '#/api/pay/wallet/balance';
+import { CardTitle } from '#/components/card-title';
+import AccountInfo from '#/views/member/user/detail/modules/account-info.vue';
+import BasicInfo from '#/views/member/user/detail/modules/basic-info.vue';
+
+import OrderBrowsingHistory from './OrderBrowsingHistory.vue';
+import ProductBrowsingHistory from './ProductBrowsingHistory.vue';
+
+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>>();
+const handleClick = async (tab: string) => {
+  activeTab.value = tab;
+  await nextTick();
+  await getHistoryList();
+};
+
+/** 获得历史数据 */
+const getHistoryList = async () => {
+  switch (activeTab.value) {
+    case '交易订单': {
+      await orderBrowsingHistoryRef.value?.getHistoryList(conversation.value);
+      break;
+    }
+    case '会员信息': {
+      await getUserData();
+      await getUserWallet();
+      break;
+    }
+    case '最近浏览': {
+      await productBrowsingHistoryRef.value?.getHistoryList(conversation.value);
+      break;
+    }
+    default: {
+      break;
+    }
+  }
+};
+
+/** 加载下一页数据 */
+const loadMore = async () => {
+  switch (activeTab.value) {
+    case '交易订单': {
+      await orderBrowsingHistoryRef.value?.loadMore();
+      break;
+    }
+    case '会员信息': {
+      break;
+    }
+    case '最近浏览': {
+      await productBrowsingHistoryRef.value?.loadMore();
+      break;
+    }
+    default: {
+      break;
+    }
+  }
+};
+
+/** 浏览历史初始化 */
+const conversation = ref<MallKefuConversationApi.Conversation>(
+  {} as MallKefuConversationApi.Conversation,
+); // 用户会话
+const initHistory = async (val: MallKefuConversationApi.Conversation) => {
+  activeTab.value = '会员信息';
+  conversation.value = val;
+  await nextTick();
+  await getHistoryList();
+};
+defineExpose({ initHistory });
+
+/** 处理消息列表滚动事件(debounce 限流) */
+const scrollbarRef = ref<InstanceType>();
+const handleScroll = useDebounceFn(() => {
+  const wrap = scrollbarRef.value?.wrapRef;
+  // 触底重置
+  if (Math.abs(wrap!.scrollHeight - wrap!.clientHeight - wrap!.scrollTop) < 1) {
+    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;
+  }
+  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 {
+    const res = await UserApi.getUser(conversation.value.userId);
+    if (res) {
+      user.value = res;
+    } else {
+      user.value = {} as UserApi.UserVO;
+      message.error('会员不存在！');
+    }
+  } finally {
+    loading.value = false;
+  }
+};
+</script>
+
+<template>
+  <a-layout class="kefu">
+    <a-layout-header class="kefu-header">
+      <div
+        :class="{ 'kefu-header-item-activation': tabActivation('会员信息') }"
+        class="kefu-header-item flex cursor-pointer items-center justify-center"
+        @click="handleClick('会员信息')"
+      >
+        会员信息
+      </div>
+      <div
+        :class="{ 'kefu-header-item-activation': tabActivation('最近浏览') }"
+        class="kefu-header-item flex cursor-pointer items-center justify-center"
+        @click="handleClick('最近浏览')"
+      >
+        最近浏览
+      </div>
+      <div
+        :class="{ 'kefu-header-item-activation': tabActivation('交易订单') }"
+        class="kefu-header-item flex cursor-pointer items-center justify-center"
+        @click="handleClick('交易订单')"
+      >
+        交易订单
+      </div>
+    </a-layout-header>
+    <a-layout-content class="kefu-content p-10px!">
+      <div v-if="!isEmpty(conversation)" v-loading="loading">
+        <!-- 基本信息 -->
+        <BasicInfo v-if="activeTab === '会员信息'" :user="user" mode="kefu">
+          <template #header>
+            <CardTitle title="基本信息" />
+          </template>
+        </BasicInfo>
+        <!-- 账户信息 -->
+        <Card
+          v-if="activeTab === '会员信息'"
+          class="mt-10px h-full"
+          shadow="never"
+        >
+          <template #header>
+            <CardTitle title="账户信息" />
+          </template>
+          <AccountInfo :column="1" :user="user" :wallet="wallet" />
+        </Card>
+      </div>
+      <div v-show="!isEmpty(conversation)">
+        <div ref="scrollbarRef" always @scroll="handleScroll">
+          <!-- 最近浏览 -->
+          <ProductBrowsingHistory
+            v-if="activeTab === '最近浏览'"
+            ref="productBrowsingHistoryRef"
+          />
+          <!-- 交易订单 -->
+          <OrderBrowsingHistory
+            v-if="activeTab === '交易订单'"
+            ref="orderBrowsingHistoryRef"
+          />
+        </div>
+      </div>
+      <Empty
+        v-show="isEmpty(conversation)"
+        description="请选择左侧的一个会话后开始"
+        class="mt-[50px]"
+      />
+    </a-layout-content>
+  </a-layout>
+</template>
+
+<style lang="scss" scoped>
+.kefu {
+  position: relative;
+  width: 300px !important;
+  background-color: var(--app-content-bg-color);
+
+  &::after {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 1px; /* 实际宽度 */
+    height: 100%;
+    content: '';
+    background-color: var(--el-border-color);
+    transform: scaleX(0.3); /* 缩小宽度 */
+  }
+
+  &-header {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    background-color: var(--app-content-bg-color);
+
+    &::before {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      height: 1px; /* 初始宽度 */
+      content: '';
+      background-color: var(--el-border-color);
+      transform: scaleY(0.3); /* 缩小视觉高度 */
+    }
+
+    &-title {
+      font-size: 18px;
+      font-weight: bold;
+    }
+
+    &-item {
+      position: relative;
+      width: 100%;
+      height: 100%;
+
+      &-activation::before {
+        position: absolute; /* 绝对定位 */
+        inset: 0; /* 覆盖整个元素 */
+        pointer-events: none; /* 确保点击事件不会被伪元素拦截 */
+        content: '';
+        border-bottom: 2px solid rgb(128 128 128 / 50%); /* 边框样式 */
+      }
+
+      &:hover::before {
+        position: absolute; /* 绝对定位 */
+        inset: 0; /* 覆盖整个元素 */
+        pointer-events: none; /* 确保点击事件不会被伪元素拦截 */
+        content: '';
+        border-bottom: 2px solid rgb(128 128 128 / 50%); /* 边框样式 */
+      }
+    }
+  }
+
+  &-content {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    overflow: auto;
+  }
+
+  &-tabs {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.header-title {
+  border-bottom: #e4e0e0 solid 1px;
+}
+</style>

apps/web-antd/src/views/mall/promotion/kefu/components/member/OrderBrowsingHistory.vue

@@ -0,0 +1,55 @@
+<script lang="ts" setup>
+import type { MallKefuConversationApi } from '#/api/mall/promotion/kefu/conversation';
+
+import { computed, reactive, ref } from 'vue';
+
+import { getOrderPage } from '#/api/mall/trade/order';
+import OrderItem from '#/views/mall/promotion/kefu/components/message/OrderItem.vue';
+// import { concat } from 'lodash-es'
+defineOptions({ name: 'OrderBrowsingHistory' });
+
+const list = ref<any>([]); // 列表
+const total = ref(0); // 总数
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  userId: 0,
+});
+const skipGetMessageList = computed(() => {
+  // 已加载到最后一页的话则不触发新的消息获取
+  return (
+    total.value > 0 &&
+    Math.ceil(total.value / queryParams.pageSize) === queryParams.pageNo
+  );
+}); // 跳过消息获取
+
+/** 获得浏览记录 */
+const getHistoryList = async (val: MallKefuConversationApi.Conversation) => {
+  queryParams.userId = val.userId;
+  const res = await getOrderPage(queryParams);
+  total.value = res.total;
+  list.value = res.list;
+};
+
+/** 加载下一页数据 */
+const loadMore = async () => {
+  if (skipGetMessageList.value) {
+    return;
+  }
+  queryParams.pageNo += 1;
+  const res = await getOrderPage(queryParams);
+  total.value = res.total;
+  // 使用展开运算符替代 concat 方法
+  list.value = [...list.value, ...res.list];
+};
+defineExpose({ getHistoryList, loadMore });
+</script>
+
+<template>
+  <OrderItem
+    v-for="item in list"
+    :key="item.id"
+    :order="item"
+    class="mb-[10px]"
+  />
+</template>

apps/web-antd/src/views/mall/promotion/kefu/components/member/ProductBrowsingHistory.vue

@@ -0,0 +1,64 @@
+<script lang="ts" setup>
+import type { MallKefuConversationApi } from '#/api/mall/promotion/kefu/conversation';
+
+import { computed, reactive, ref } from 'vue';
+
+import { getBrowseHistoryPage } from '#/api/mall/product/history';
+import ProductItem from '#/views/mall/promotion/kefu/components/message/ProductItem.vue';
+// import { concat } from 'lodash-es'
+
+defineOptions({ name: 'ProductBrowsingHistory' });
+
+const list = ref<any>([]); // 列表
+const total = ref(0); // 总数
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  userId: 0,
+  userDeleted: false,
+});
+const skipGetMessageList = computed(() => {
+  // 已加载到最后一页的话则不触发新的消息获取
+  return (
+    total.value > 0 &&
+    Math.ceil(total.value / queryParams.pageSize) === queryParams.pageNo
+  );
+}); // 跳过消息获取
+
+/** 获得浏览记录 */
+const getHistoryList = async (val: MallKefuConversationApi.Conversation) => {
+  queryParams.userId = val.userId;
+  const res = await getBrowseHistoryPage(queryParams);
+  total.value = res.total;
+  list.value = res.list;
+};
+
+/** 加载下一页数据 */
+const loadMore = async () => {
+  if (skipGetMessageList.value) {
+    return;
+  }
+  queryParams.pageNo += 1;
+  const res = await getBrowseHistoryPage(queryParams);
+  total.value = res.total;
+  // 使用展开运算符替代 concat 方法
+  list.value = [...list.value, ...res.list];
+};
+defineExpose({ getHistoryList, loadMore });
+</script>
+
+<template>
+  <ProductItem
+    v-for="item in list"
+    :key="item.id"
+    :pic-url="item.picUrl"
+    :price="item.price"
+    :sales-count="item.salesCount"
+    :spu-id="item.spuId"
+    :stock="item.stock"
+    :title="item.spuName"
+    class="mb-10px"
+  />
+</template>
+
+<style lang="scss" scoped></style>

apps/web-antd/src/views/mall/promotion/kefu/components/message/MessageItem.vue

@@ -0,0 +1,25 @@
+<script lang="ts" setup>
+import type { MallKefuMessageApi } from '#/api/mall/promotion/kefu/message';
+
+import { UserTypeEnum } from '@vben/constants';
+
+defineOptions({ name: 'MessageItem' });
+defineProps<{
+  message: MallKefuMessageApi.Message;
+}>();
+</script>
+
+<template>
+  <!-- 消息组件 -->
+  <div
+    :class="[
+      message.senderType === UserTypeEnum.MEMBER
+        ? `ml-[10px]`
+        : message.senderType === UserTypeEnum.ADMIN
+          ? `mr-[10px]`
+          : '',
+    ]"
+  >
+    <slot></slot>
+  </div>
+</template>

apps/web-antd/src/views/mall/promotion/kefu/components/message/OrderItem.vue

@@ -0,0 +1,205 @@
+<script lang="ts" setup>
+import type { MallKefuMessageApi } from '#/api/mall/promotion/kefu/message';
+
+import { computed } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { fenToYuan, isObject, jsonParse } from '@vben/utils';
+
+import ProductItem from '#/views/mall/promotion/kefu/components/message/ProductItem.vue';
+
+defineOptions({ name: 'OrderItem' });
+
+const props = defineProps<{
+  message?: MallKefuMessageApi.Message;
+  order?: any;
+}>();
+
+const { push } = useRouter();
+
+const getMessageContent = computed(() =>
+  props.message === undefined
+    ? props.order
+    : jsonParse(props!.message!.content),
+);
+
+/** 查看订单详情 */
+const openDetail = (id: number) => {
+  push({ name: 'TradeOrderDetail', params: { id } });
+};
+
+/**
+ * 格式化订单状态的颜色
+ *
+ * @param order 订单
+ * @return {string} 颜色的 class 名称
+ */
+function formatOrderColor(order: any) {
+  if (order.status === 0) {
+    return 'info-color';
+  }
+  if (
+    order.status === 10 ||
+    order.status === 20 ||
+    (order.status === 30 && !order.commentStatus)
+  ) {
+    return 'warning-color';
+  }
+  if (order.status === 30 && order.commentStatus) {
+    return 'success-color';
+  }
+  return 'danger-color';
+}
+
+/**
+ * 格式化订单状态
+ *
+ * @param order 订单
+ */
+function formatOrderStatus(order: any) {
+  if (order.status === 0) {
+    return '待付款';
+  }
+  if (order.status === 10 && order.deliveryType === 1) {
+    return '待发货';
+  }
+  if (order.status === 10 && order.deliveryType === 2) {
+    return '待核销';
+  }
+  if (order.status === 20) {
+    return '待收货';
+  }
+  if (order.status === 30 && !order.commentStatus) {
+    return '待评价';
+  }
+  if (order.status === 30 && order.commentStatus) {
+    return '已完成';
+  }
+  return '已关闭';
+}
+</script>
+
+<template>
+  <div v-if="isObject(getMessageContent)">
+    <div :key="getMessageContent.id" class="order-list-card-box mt-[14px]">
+      <div
+        class="order-card-header p-x-[5px] flex items-center justify-between"
+      >
+        <div class="order-no">
+          订单号：
+          <span
+            style="cursor: pointer"
+            @click="openDetail(getMessageContent.id)"
+          >
+            {{ getMessageContent.no }}
+          </span>
+        </div>
+        <div
+          :class="formatOrderColor(getMessageContent)"
+          class="order-state font-16"
+        >
+          {{ formatOrderStatus(getMessageContent) }}
+        </div>
+      </div>
+      <div
+        v-for="item in getMessageContent.items"
+        :key="item.id"
+        class="border-bottom"
+      >
+        <ProductItem
+          :num="item.count"
+          :pic-url="item.picUrl"
+          :price="item.price"
+          :sku-text="
+            item.properties.map((property: any) => property.valueName).join(' ')
+          "
+          :spu-id="item.spuId"
+          :title="item.spuName"
+        />
+      </div>
+      <div class="pay-box flex justify-end pr-[5px]">
+        <div class="flex items-center">
+          <div class="discounts-title pay-color">
+            共 {{ getMessageContent?.productCount }} 件商品,总金额:
+          </div>
+          <div class="discounts-money pay-color">
+            ￥{{ fenToYuan(getMessageContent?.payPrice) }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.order-list-card-box {
+  padding: 10px;
+  background-color: rgb(128 128 128 / 30%); // 透明色，暗黑模式下也能体现
+  border: 1px var(--el-border-color) solid;
+  border-radius: 10px;
+
+  .order-card-header {
+    height: 28px;
+    font-weight: bold;
+
+    .order-no {
+      font-size: 13px;
+
+      span {
+        &:hover {
+          color: var(--left-menu-bg-active-color);
+          text-decoration: underline;
+        }
+      }
+    }
+
+    .order-state {
+      font-size: 13px;
+    }
+  }
+
+  .pay-box {
+    padding-top: 10px;
+    font-weight: bold;
+
+    .discounts-title {
+      font-size: 16px;
+      line-height: normal;
+    }
+
+    .discounts-money {
+      font-family: OPPOSANS;
+      font-size: 16px;
+      line-height: normal;
+    }
+
+    .pay-color {
+      font-size: 13px;
+    }
+  }
+}
+
+.warning-color {
+  font-size: 11px;
+  font-weight: bold;
+  color: #faad14;
+}
+
+.danger-color {
+  font-size: 11px;
+  font-weight: bold;
+  color: #ff3000;
+}
+
+.success-color {
+  font-size: 11px;
+  font-weight: bold;
+  color: #52c41a;
+}
+
+.info-color {
+  font-size: 11px;
+  font-weight: bold;
+  color: #999;
+}
+</style>

apps/web-antd/src/views/mall/promotion/kefu/components/message/ProductItem.vue

@@ -0,0 +1,126 @@
+<script lang="ts" setup>
+import { useRouter } from 'vue-router';
+
+import { fenToYuan } from '@vben/utils';
+
+import { Button, Image } from 'ant-design-vue';
+
+defineOptions({ name: 'ProductItem' });
+
+defineProps({
+  spuId: {
+    type: Number,
+    default: 0,
+  },
+  picUrl: {
+    type: String,
+    default: 'https://img1.baidu.com/it/u=1601695551,235775011&fm=26&fmt=auto',
+  },
+  title: {
+    type: String,
+    default: '',
+  },
+  price: {
+    type: [String, Number],
+    default: '',
+  },
+  salesCount: {
+    type: [String, Number],
+    default: '',
+  },
+  stock: {
+    type: [String, Number],
+    default: '',
+  },
+});
+
+const { push } = useRouter();
+
+/** 查看商品详情 */
+const openDetail = (spuId: number) => {
+  push({ name: 'ProductSpuDetail', params: { id: spuId } });
+};
+</script>
+
+<template>
+  <div
+    class="product-warp"
+    style="cursor: pointer"
+    @click.stop="openDetail(spuId)"
+  >
+    <!-- 左侧商品图片-->
+    <div class="product-warp-left mr-[24px]">
+      <Image
+        :initial-index="0"
+        :preview-src-list="[picUrl]"
+        :src="picUrl"
+        class="product-warp-left-img"
+        fit="contain"
+        preview-teleported
+        @click.stop
+      />
+    </div>
+    <!-- 右侧商品信息 -->
+    <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 class="flex items-center justify-between">
+        <span class="price">￥{{ fenToYuan(price) }}</span>
+        <Button size="small" text type="primary">详情</Button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.button {
+  padding: 5px 10px;
+  color: white;
+  cursor: pointer;
+  background-color: #007bff;
+  border: none;
+}
+
+.product-warp {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 10px;
+  background-color: rgb(128 128 128 / 30%);
+  border: 1px solid var(--el-border-color);
+  border-radius: 8px;
+  margin-bottom: 10px;
+
+  &-left {
+    width: 70px;
+
+    &-img {
+      width: 100%;
+      height: 100%;
+      border-radius: 8px;
+    }
+  }
+
+  &-right {
+    flex: 1;
+
+    .description {
+      display: -webkit-box;
+      width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      -webkit-line-clamp: 1; /* 显示一行 */
+      font-size: 16px;
+      font-weight: bold;
+      -webkit-box-orient: vertical;
+    }
+
+    .price {
+      color: #ff3000;
+    }
+  }
+}
+</style>

apps/web-antd/src/views/mall/promotion/kefu/components/tools/EmojiSelectPopover.vue

@@ -0,0 +1,55 @@
+<!-- emoji 表情选择组件 -->
+<script lang="ts" setup>
+import type { Emoji } from './emoji';
+
+import { computed } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { List } from 'ant-design-vue';
+
+import { useEmoji } from './emoji';
+
+defineOptions({ name: 'EmojiSelectPopover' });
+
+/** 选择 emoji 表情 */
+const emits = defineEmits<{
+  (e: 'selectEmoji', v: Emoji);
+}>();
+const { getEmojiList } = useEmoji();
+const emojiList = computed(() => getEmojiList());
+
+const handleSelect = (item: Emoji) => {
+  // 整个 emoji 数据传递出去，方便以后输入框直接显示表情
+  emits('selectEmoji', item);
+};
+</script>
+
+<template>
+  <a-popover :width="500" placement="top" trigger="click">
+    <template #content>
+      <List height="300px">
+        <ul class="ml-2 flex flex-wrap px-2">
+          <li
+            v-for="(item, index) in emojiList"
+            :key="index"
+            :style="{
+              borderColor: 'var(--primary)',
+              color: '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"
+            @click="handleSelect(item)"
+          >
+            <img :src="item.url" class="h-[24px] w-[24px]" />
+          </li>
+        </ul>
+      </List>
+    </template>
+    <IconifyIcon
+      :size="30"
+      class="ml-[10px] cursor-pointer"
+      icon="twemoji:grinning-face"
+    />
+  </a-popover>
+</template>

apps/web-antd/src/views/mall/promotion/kefu/components/tools/PictureSelectUpload.vue

@@ -0,0 +1,96 @@
+<!-- 图片选择 -->
+<script lang="ts" setup>
+import message from 'ant-design-vue';
+
+import * as FileApi from '#/api/infra/file';
+import Picture from '#/views/mall/promotion/kefu/asserts/picture.svg';
+
+defineOptions({ name: 'PictureSelectUpload' });
+
+/** 选择并上传文件 */
+const emits = defineEmits<{
+  (e: 'sendPicture', v: string): void;
+}>();
+const selectAndUpload = async () => {
+  const files: any = await getFiles();
+  message.success('图片发送中请稍等。。。');
+  const res = await FileApi.updateFile({ file: files[0].file });
+  emits('sendPicture', res.data);
+};
+
+/**
+ * 唤起文件选择窗口，并获取选择的文件
+ *
+ * @param {object} options - 配置选项
+ * @param {boolean} [options.multiple] - 是否支持多选
+ * @param {string} [options.accept] - 文件上传格式限制
+ * @param {number} [options.limit] - 单次上传最大文件数
+ * @param {number} [options.fileSize] - 单个文件大小限制（单位：MB）
+ * @returns {Promise<Array>} 选择的文件列表，每个文件带有一个uid
+ */
+async function getFiles(options = {}) {
+  const { multiple, accept, limit, fileSize } = {
+    multiple: true,
+    accept: 'image/jpeg, image/png, image/gif', // 默认选择图片
+    limit: 1,
+    fileSize: 500,
+    ...options,
+  };
+
+  // 创建文件选择元素
+  const input = document.createElement('input');
+  input.type = 'file';
+  input.style.display = 'none';
+  if (multiple) input.multiple = true;
+  if (accept) input.accept = accept;
+
+  // 将文件选择元素添加到文档中
+  document.body.append(input);
+
+  // 触发文件选择元素的点击事件
+  input.click();
+
+  // 等待文件选择元素的 change 事件
+  // 移除不必要的 try/catch 包装，直接返回 Promise
+  return await new Promise((resolve, reject) => {
+    input.addEventListener('change', (event: any) => {
+      const filesArray = [...(event?.target?.files || [])];
+
+      // 从文档中移除文件选择元素
+      input.remove();
+
+      // 判断是否超出上传数量限制
+      if (filesArray.length > limit) {
+        // 使用 Error 对象作为 reject 的原因
+        reject(new Error(`超出上传数量限制，最多允许 ${limit} 个文件`));
+        return;
+      }
+
+      // 判断是否超出上传文件大小限制
+      const overSizedFiles = filesArray.filter(
+        (file: File) => file.size / 1024 ** 2 > fileSize,
+      );
+      if (overSizedFiles.length > 0) {
+        // 使用 Error 对象作为 reject 的原因
+        reject(new Error(`文件大小超出限制，单个文件最大允许 ${fileSize}MB`));
+        return;
+      }
+
+      // 生成文件列表，并添加 uid
+      const fileList = filesArray.map((file, index) => ({
+        file,
+        uid: Date.now() + index,
+      }));
+      resolve(fileList);
+    });
+  });
+}
+</script>
+
+<template>
+  <div>
+    <img :src="Picture" class="h-[35px] w-[35px]" @click="selectAndUpload" />
+  </div>
+</template>
+
+<style lang="scss" scoped></style>

apps/web-antd/src/views/mall/promotion/kefu/components/tools/constants.ts

@@ -0,0 +1,17 @@
+// 客服消息类型枚举类
+export const KeFuMessageContentTypeEnum = {
+  TEXT: 1, // 文本消息
+  IMAGE: 2, // 图片消息
+  VOICE: 3, // 语音消息
+  VIDEO: 4, // 视频消息
+  SYSTEM: 5, // 系统消息
+  // ========== 商城特殊消息 ==========
+  PRODUCT: 10, //  商品消息
+  ORDER: 11, //  订单消息"
+};
+
+// Promotion 的 WebSocket 消息类型枚举类
+export const WebSocketMessageTypeConstants = {
+  KEFU_MESSAGE_TYPE: 'kefu_message_type', // 客服消息类型
+  KEFU_MESSAGE_ADMIN_READ: 'kefu_message_read_status_change', // 客服消息管理员已读
+};

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

@@ -0,0 +1,130 @@
+import { onMounted, ref } from 'vue';
+
+import { isEmpty } from '@vben/utils';
+
+const emojiList = [
+  { name: '[笑掉牙]', file: 'xiaodiaoya.png' },
+  { name: '[可爱]', file: 'keai.png' },
+  { name: '[冷酷]', file: 'lengku.png' },
+  { name: '[闭嘴]', file: 'bizui.png' },
+  { name: '[生气]', file: 'shengqi.png' },
+  { name: '[惊恐]', file: 'jingkong.png' },
+  { name: '[瞌睡]', file: 'keshui.png' },
+  { name: '[大笑]', file: 'daxiao.png' },
+  { name: '[爱心]', file: 'aixin.png' },
+  { name: '[坏笑]', file: 'huaixiao.png' },
+  { name: '[飞吻]', file: 'feiwen.png' },
+  { name: '[疑问]', file: 'yiwen.png' },
+  { name: '[开心]', file: 'kaixin.png' },
+  { name: '[发呆]', file: 'fadai.png' },
+  { name: '[流泪]', file: 'liulei.png' },
+  { name: '[汗颜]', file: 'hanyan.png' },
+  { name: '[惊悚]', file: 'jingshu.png' },
+  { name: '[困~]', file: 'kun.png' },
+  { name: '[心碎]', file: 'xinsui.png' },
+  { name: '[天使]', file: 'tianshi.png' },
+  { name: '[晕]', file: 'yun.png' },
+  { name: '[啊]', file: 'a.png' },
+  { name: '[愤怒]', file: 'fennu.png' },
+  { name: '[睡着]', file: 'shuizhuo.png' },
+  { name: '[面无表情]', file: 'mianwubiaoqing.png' },
+  { name: '[难过]', file: 'nanguo.png' },
+  { name: '[犯困]', file: 'fankun.png' },
+  { name: '[好吃]', file: 'haochi.png' },
+  { name: '[呕吐]', file: 'outu.png' },
+  { name: '[龇牙]', file: 'ziya.png' },
+  { name: '[懵比]', file: 'mengbi.png' },
+  { name: '[白眼]', file: 'baiyan.png' },
+  { name: '[饿死]', file: 'esi.png' },
+  { name: '[凶]', file: 'xiong.png' },
+  { name: '[感冒]', file: 'ganmao.png' },
+  { name: '[流汗]', file: 'liuhan.png' },
+  { name: '[笑哭]', file: 'xiaoku.png' },
+  { name: '[流口水]', file: 'liukoushui.png' },
+  { name: '[尴尬]', file: 'ganga.png' },
+  { name: '[惊讶]', file: 'jingya.png' },
+  { name: '[大惊]', file: 'dajing.png' },
+  { name: '[不好意思]', file: 'buhaoyisi.png' },
+  { name: '[大闹]', file: 'danao.png' },
+  { name: '[不可思议]', file: 'bukesiyi.png' },
+  { name: '[爱你]', file: 'aini.png' },
+  { name: '[红心]', file: 'hongxin.png' },
+  { name: '[点赞]', file: 'dianzan.png' },
+  { name: '[恶魔]', file: 'emo.png' },
+];
+
+export interface Emoji {
+  name: string;
+  url: string;
+}
+
+export const useEmoji = () => {
+  const emojiPathList = ref<any[]>([]);
+
+  /** 加载本地图片 */
+  const initStaticEmoji = async () => {
+    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 () => {
+    if (isEmpty(emojiPathList.value)) {
+      await initStaticEmoji();
+    }
+  });
+
+  /**
+   * 将文本中的表情替换成图片
+   *
+   * @return 替换后的文本
+   * @param content 消息内容
+   */
+  const replaceEmoji = (content: string) => {
+    let newData = content;
+    if (typeof newData !== 'object') {
+      const reg = /\[(.+?)\]/g; // [] 中括号
+      const zhEmojiName = newData.match(reg);
+      if (zhEmojiName) {
+        zhEmojiName.forEach((item) => {
+          const emojiFile = getEmojiFileByName(item);
+          newData = newData.replace(
+            item,
+            `<img style="width: 20px;height: 20px;margin:0 1px 3px 1px;vertical-align: middle;" src="${emojiFile}" alt=""/>`,
+          );
+        });
+      }
+    }
+    return newData;
+  };
+
+  /**
+   * 获得所有表情
+   *
+   * @return 表情列表
+   */
+  function getEmojiList(): Emoji[] {
+    return emojiList.map((item) => ({
+      url: getEmojiFileByName(item.name),
+      name: item.name,
+    })) as Emoji[];
+  }
+
+  function getEmojiFileByName(name: string) {
+    for (const emoji of emojiList) {
+      if (emoji.name === name) {
+        const emojiPath = emojiPathList.value.find(
+          (item: { path: string; src: string }) =>
+            item.path.includes(emoji.file),
+        );
+        return emojiPath ? emojiPath.src : undefined;
+      }
+    }
+    return false;
+  }
+
+  return { replaceEmoji, getEmojiList };
+};

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

@@ -1,28 +1,132 @@
 <script lang="ts" setup>
-import { Page } from '@vben/common-ui';
+import { defineOptions, onBeforeUnmount, onMounted, ref, watch } from 'vue';
 
-import { Button } from 'ant-design-vue';
+import { Page } from '@vben/common-ui';
+import { useAccessStore } from '@vben/stores';
+
+import { useWebSocket } from '@vueuse/core';
+import message from 'ant-design-vue';
+
+import { useMallKefuStore } from '#/store/mall/kefu';
+
+import {
+  KeFuConversationList,
+  KeFuMessageList,
+  MemberInfo,
+} from './components';
+import { WebSocketMessageTypeConstants } from './components/tools/constants';
+
+defineOptions({ name: 'KeFu' });
+
+const accessStore = useAccessStore();
+const kefuStore = useMallKefuStore(); // 客服缓存
+
+// ======================= WebSocket start =======================
+const url = `${`${import.meta.env.VITE_BASE_URL}/infra/ws`.replace(
+  'http',
+  'ws',
+)}?token=${accessStore.refreshToken}`; // 使用 refreshToken() :WebSocket 无法方便的刷新访问令牌
+const server = ref(url); // WebSocket 服务地址
+
+/** 发起 WebSocket 连接 */
+const { data, close, open } = useWebSocket(server.value, {
+  autoReconnect: true,
+  heartbeat: true,
+});
+
+/** 监听 WebSocket 数据 */
+watch(
+  () => data.value,
+  (newData) => {
+    if (!newData) return;
+    try {
+      // 1. 收到心跳
+      if (newData === 'pong') return;
+
+      // 2.1 解析 type 消息类型
+      const jsonMessage = JSON.parse(newData);
+      const type = jsonMessage.type;
+      if (!type) {
+        message.error(`未知的消息类型：${newData}`);
+        return;
+      }
+
+      // 2.2 消息类型：KEFU_MESSAGE_TYPE
+      if (type === WebSocketMessageTypeConstants.KEFU_MESSAGE_TYPE) {
+        const message = JSON.parse(jsonMessage.content);
+        // 刷新会话列表
+        kefuStore.updateConversation(message.conversationId);
+        // 刷新消息列表
+        keFuChatBoxRef.value?.refreshMessageList(message);
+        return;
+      }
+
+      // 2.3 消息类型：KEFU_MESSAGE_ADMIN_READ
+      if (type === WebSocketMessageTypeConstants.KEFU_MESSAGE_ADMIN_READ) {
+        // 更新会话已读
+        const message = JSON.parse(jsonMessage.content);
+        kefuStore.updateConversationStatus(message.conversationId);
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  },
+  {
+    immediate: false, // 不立即执行
+  },
+);
+// ======================= WebSocket end =======================
+
+/** 加载指定会话的消息列表 */
+const keFuChatBoxRef = ref<InstanceType<typeof KeFuMessageList>>();
+const memberInfoRef = ref<InstanceType<typeof MemberInfo>>();
+const handleChange = (conversation: KeFuConversationRespVO) => {
+  keFuChatBoxRef.value?.getNewMessageList(conversation);
+  memberInfoRef.value?.initHistory(conversation);
+};
+
+const keFuConversationRef = ref<InstanceType<typeof KeFuConversationList>>();
+/** 初始化 */
+onMounted(() => {
+  /** 加载会话列表 */
+  kefuStore.setConversationList().then(() => {
+    keFuConversationRef.value?.calculationLastMessageTime();
+  });
+  // 打开 websocket 连接
+  open();
+});
+
+/** 销毁 */
+onBeforeUnmount(() => {
+  // 关闭 websocket 连接
+  close();
+});
 </script>
 
 <template>
   <Page>
-    <Button
-      danger
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3"
-    >
-      该功能支持 Vue3 + element-plus 版本！
-    </Button>
-    <br />
-    <Button
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/mall/promotion/kefu/index"
-    >
-      可参考
-      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/mall/promotion/kefu/index
-      代码，pull request 贡献给我们！
-    </Button>
+    <a-layout-content class="kefu-layout hrow">
+      <!-- 会话列表 -->
+      <KeFuConversationList ref="keFuConversationRef" @change="handleChange" />
+      <!-- 会话详情（选中会话的消息列表） -->
+      <KeFuMessageList ref="keFuChatBoxRef" />
+      <!-- 会员信息（选中会话的会员信息） -->
+      <MemberInfo ref="memberInfoRef" />
+    </a-layout-content>
   </Page>
 </template>
+
+<style lang="scss">
+.kefu-layout {
+  position: absolute;
+  top: 0;
+  left: 0;
+  flex: 1;
+  width: 100%;
+  height: 100%;
+}
+
+.hrow {
+  display: flex;
+}
+</style>

packages/@core/base/shared/src/utils/util.ts

@@ -99,4 +99,18 @@ export function groupBy(array: any[], key: string) {
     result[groupKey].push(item);
   }
   return result;
-}
+}
+
+/**
+ * 解析 JSON 字符串
+ *
+ * @param str
+ */
+export function jsonParse(str: string) {
+  try {
+    return JSON.parse(str);
+  } catch {
+    console.warn(`str[${str}] 不是一个 JSON 字符串`);
+    return str;
+  }
+}

pnpm-lock.yaml

@@ -669,10 +669,10 @@ importers:
         version: link:scripts/vsh
       '@vitejs/plugin-vue':
         specifier: 'catalog:'
-        version: 6.0.1(vite@7.1.11(@types/node@22.18.12)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))(vue@3.5.22(typescript@5.9.3))
+        version: 6.0.1(vite@7.1.11(@types/node@22.18.12)(jiti@1.21.7)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))(vue@3.5.22(typescript@5.9.3))
       '@vitejs/plugin-vue-jsx':
         specifier: 'catalog:'
-        version: 5.1.1(vite@7.1.11(@types/node@22.18.12)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))(vue@3.5.22(typescript@5.9.3))
+        version: 5.1.1(vite@7.1.11(@types/node@22.18.12)(jiti@1.21.7)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))(vue@3.5.22(typescript@5.9.3))
       '@vue/test-utils':
         specifier: 'catalog:'
         version: 2.4.6
@@ -714,10 +714,10 @@ importers:
         version: 3.6.1(sass@1.93.2)(typescript@5.9.3)(vue-tsc@2.2.10(typescript@5.9.3))(vue@3.5.22(typescript@5.9.3))
       vite:
         specifier: 'catalog:'
-        version: 7.1.11(@types/node@22.18.12)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
+        version: 7.1.11(@types/node@22.18.12)(jiti@1.21.7)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
       vitest:
         specifier: 'catalog:'
-        version: 3.2.4(@types/node@22.18.12)(happy-dom@17.6.3)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
+        version: 3.2.4(@types/node@22.18.12)(happy-dom@17.6.3)(jiti@1.21.7)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
       vue:
         specifier: ^3.5.17
         version: 3.5.22(typescript@5.9.3)
@@ -797,6 +797,9 @@ importers:
       '@vben/utils':
         specifier: workspace:*
         version: link:../../packages/utils
+      '@vueuse/components':
+        specifier: ^14.0.0
+        version: 14.0.0(vue@3.5.22(typescript@5.9.3))
       '@vueuse/core':
         specifier: 'catalog:'
         version: 13.9.0(vue@3.5.22(typescript@5.9.3))
@@ -5307,6 +5310,11 @@ packages:
   '@vue/test-utils@2.4.6':
     resolution: {integrity: sha512-FMxEjOpYNYiFe0GkaHsnJPXFHxQ6m4t8vI/ElPGpMWxZKpmRvQ33OIrvRXemy6yha03RxhOlQuy+gZMC3CQSow==}
 
+  '@vueuse/components@14.0.0':
+    resolution: {integrity: sha512-0PFAbAzKo+Ipt45R0OVHvZwjTj9oDZJQ/lc77d020fKl9GrxEIRvVIzMW1CZVn1vwmGhXEZPIF3erjixW2yqpg==}
+    peerDependencies:
+      vue: ^3.5.17
+
   '@vueuse/core@10.11.1':
     resolution: {integrity: sha512-guoy26JQktXPcz+0n3GukWIy/JDNKti9v6VEMu6kV2sYBsWuGiTU8OWdg+ADfUbHg3/3DlqySDe7JmdHrktiww==}
 
@@ -5318,6 +5326,11 @@ packages:
     peerDependencies:
       vue: ^3.5.17
 
+  '@vueuse/core@14.0.0':
+    resolution: {integrity: sha512-d6tKRWkZE8IQElX2aHBxXOMD478fHIYV+Dzm2y9Ag122ICBpNKtGICiXKOhWU3L1kKdttDD9dCMS4bGP3jhCTQ==}
+    peerDependencies:
+      vue: ^3.5.17
+
   '@vueuse/core@9.13.0':
     resolution: {integrity: sha512-pujnclbeHWxxPRqXWmdkKV5OX4Wk4YeK7wusHqRwU0Q7EFusHoqNA/aPhB6KCh9hEqJkLAJo7bb0Lh9b+OIVzw==}
 
@@ -5413,6 +5426,9 @@ packages:
   '@vueuse/metadata@13.9.0':
     resolution: {integrity: sha512-1AFRvuiGphfF7yWixZa0KwjYH8ulyjDCC0aFgrGRz8+P4kvDFSdXLVfTk5xAN9wEuD1J6z4/myMoYbnHoX07zg==}
 
+  '@vueuse/metadata@14.0.0':
+    resolution: {integrity: sha512-6yoGqbJcMldVCevkFiHDBTB1V5Hq+G/haPlGIuaFZHpXC0HADB0EN1ryQAAceiW+ryS3niUwvdFbGiqHqBrfVA==}
+
   '@vueuse/metadata@9.13.0':
     resolution: {integrity: sha512-gdU7TKNAUVlXXLbaF+ZCfte8BjRJQWPCa2J55+7/h+yDtzw3vOoGQDRXzI6pyKyo6bXFT5/QoPE4hAknExjRLQ==}
 
@@ -5432,6 +5448,11 @@ packages:
     peerDependencies:
       vue: ^3.5.17
 
+  '@vueuse/shared@14.0.0':
+    resolution: {integrity: sha512-mTCA0uczBgurRlwVaQHfG0Ja7UdGe4g9mwffiJmvLiTtp1G4AQyIjej6si/k8c8pUwTfVpNufck+23gXptPAkw==}
+    peerDependencies:
+      vue: ^3.5.17
+
   '@vueuse/shared@9.13.0':
     resolution: {integrity: sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==}
 
@@ -15112,14 +15133,14 @@ snapshots:
     dependencies:
       vite-plugin-pwa: 1.1.0(vite@5.4.21(@types/node@24.9.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0))(workbox-build@7.3.0)(workbox-window@7.3.0)
 
-  '@vitejs/plugin-vue-jsx@5.1.1(vite@7.1.11(@types/node@22.18.12)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))(vue@3.5.22(typescript@5.9.3))':
+  '@vitejs/plugin-vue-jsx@5.1.1(vite@7.1.11(@types/node@22.18.12)(jiti@1.21.7)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))(vue@3.5.22(typescript@5.9.3))':
     dependencies:
       '@babel/core': 7.28.4
       '@babel/plugin-syntax-typescript': 7.27.1(@babel/core@7.28.4)
       '@babel/plugin-transform-typescript': 7.28.0(@babel/core@7.28.4)
       '@rolldown/pluginutils': 1.0.0-beta.44
       '@vue/babel-plugin-jsx': 1.5.0(@babel/core@7.28.4)
-      vite: 7.1.11(@types/node@22.18.12)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
+      vite: 7.1.11(@types/node@22.18.12)(jiti@1.21.7)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
       vue: 3.5.22(typescript@5.9.3)
     transitivePeerDependencies:
       - supports-color
@@ -15141,10 +15162,10 @@ snapshots:
       vite: 5.4.21(@types/node@24.9.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)
       vue: 3.5.22(typescript@5.9.3)
 
-  '@vitejs/plugin-vue@6.0.1(vite@7.1.11(@types/node@22.18.12)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))(vue@3.5.22(typescript@5.9.3))':
+  '@vitejs/plugin-vue@6.0.1(vite@7.1.11(@types/node@22.18.12)(jiti@1.21.7)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))(vue@3.5.22(typescript@5.9.3))':
     dependencies:
       '@rolldown/pluginutils': 1.0.0-beta.29
-      vite: 7.1.11(@types/node@22.18.12)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
+      vite: 7.1.11(@types/node@22.18.12)(jiti@1.21.7)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
       vue: 3.5.22(typescript@5.9.3)
 
   '@vitejs/plugin-vue@6.0.1(vite@7.1.11(@types/node@24.9.1)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))(vue@3.5.22(typescript@5.9.3))':
@@ -15161,13 +15182,13 @@ snapshots:
       chai: 5.3.3
       tinyrainbow: 2.0.0
 
-  '@vitest/mocker@3.2.4(vite@7.1.11(@types/node@22.18.12)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))':
+  '@vitest/mocker@3.2.4(vite@7.1.11(@types/node@22.18.12)(jiti@1.21.7)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))':
     dependencies:
       '@vitest/spy': 3.2.4
       estree-walker: 3.0.3
       magic-string: 0.30.19
     optionalDependencies:
-      vite: 7.1.11(@types/node@22.18.12)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
+      vite: 7.1.11(@types/node@22.18.12)(jiti@1.21.7)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
 
   '@vitest/pretty-format@3.2.4':
     dependencies:
@@ -15358,6 +15379,12 @@ snapshots:
       js-beautify: 1.15.4
       vue-component-type-helpers: 2.2.12
 
+  '@vueuse/components@14.0.0(vue@3.5.22(typescript@5.9.3))':
+    dependencies:
+      '@vueuse/core': 14.0.0(vue@3.5.22(typescript@5.9.3))
+      '@vueuse/shared': 14.0.0(vue@3.5.22(typescript@5.9.3))
+      vue: 3.5.22(typescript@5.9.3)
+
   '@vueuse/core@10.11.1(vue@3.5.22(typescript@5.9.3))':
     dependencies:
       '@types/web-bluetooth': 0.0.20
@@ -15384,6 +15411,13 @@ snapshots:
       '@vueuse/shared': 13.9.0(vue@3.5.22(typescript@5.9.3))
       vue: 3.5.22(typescript@5.9.3)
 
+  '@vueuse/core@14.0.0(vue@3.5.22(typescript@5.9.3))':
+    dependencies:
+      '@types/web-bluetooth': 0.0.21
+      '@vueuse/metadata': 14.0.0
+      '@vueuse/shared': 14.0.0(vue@3.5.22(typescript@5.9.3))
+      vue: 3.5.22(typescript@5.9.3)
+
   '@vueuse/core@9.13.0(vue@3.5.22(typescript@5.9.3))':
     dependencies:
       '@types/web-bluetooth': 0.0.16
@@ -15428,6 +15462,8 @@ snapshots:
 
   '@vueuse/metadata@13.9.0': {}
 
+  '@vueuse/metadata@14.0.0': {}
+
   '@vueuse/metadata@9.13.0': {}
 
   '@vueuse/motion@3.0.3(magicast@0.3.5)(vue@3.5.22(typescript@5.9.3))':
@@ -15461,6 +15497,10 @@ snapshots:
     dependencies:
       vue: 3.5.22(typescript@5.9.3)
 
+  '@vueuse/shared@14.0.0(vue@3.5.22(typescript@5.9.3))':
+    dependencies:
+      vue: 3.5.22(typescript@5.9.3)
+
   '@vueuse/shared@9.13.0(vue@3.5.22(typescript@5.9.3))':
     dependencies:
       vue-demi: 0.14.10(vue@3.5.22(typescript@5.9.3))
@@ -21587,13 +21627,13 @@ snapshots:
     dependencies:
       vite: 7.1.11(@types/node@24.9.1)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
 
-  vite-node@3.2.4(@types/node@22.18.12)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1):
+  vite-node@3.2.4(@types/node@22.18.12)(jiti@1.21.7)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1):
     dependencies:
       cac: 6.7.14
       debug: 4.4.3
       es-module-lexer: 1.7.0
       pathe: 2.0.3
-      vite: 7.1.11(@types/node@22.18.12)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
+      vite: 7.1.11(@types/node@22.18.12)(jiti@1.21.7)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
     transitivePeerDependencies:
       - '@types/node'
       - jiti
@@ -21762,7 +21802,7 @@ snapshots:
       sass: 1.93.2
       terser: 5.44.0
 
-  vite@7.1.11(@types/node@22.18.12)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1):
+  vite@7.1.11(@types/node@22.18.12)(jiti@1.21.7)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1):
     dependencies:
       esbuild: 0.25.3
       fdir: 6.5.0(picomatch@4.0.3)
@@ -21773,7 +21813,7 @@ snapshots:
     optionalDependencies:
       '@types/node': 22.18.12
       fsevents: 2.3.3
-      jiti: 2.6.1
+      jiti: 1.21.7
       less: 4.4.2
       sass: 1.93.2
       terser: 5.44.0
@@ -21855,11 +21895,11 @@ snapshots:
       - typescript
       - universal-cookie
 
-  vitest@3.2.4(@types/node@22.18.12)(happy-dom@17.6.3)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1):
+  vitest@3.2.4(@types/node@22.18.12)(happy-dom@17.6.3)(jiti@1.21.7)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1):
     dependencies:
       '@types/chai': 5.2.3
       '@vitest/expect': 3.2.4
-      '@vitest/mocker': 3.2.4(vite@7.1.11(@types/node@22.18.12)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))
+      '@vitest/mocker': 3.2.4(vite@7.1.11(@types/node@22.18.12)(jiti@1.21.7)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))
       '@vitest/pretty-format': 3.2.4
       '@vitest/runner': 3.2.4
       '@vitest/snapshot': 3.2.4
@@ -21877,8 +21917,8 @@ snapshots:
       tinyglobby: 0.2.15
       tinypool: 1.1.1
       tinyrainbow: 2.0.0
-      vite: 7.1.11(@types/node@22.18.12)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
-      vite-node: 3.2.4(@types/node@22.18.12)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
+      vite: 7.1.11(@types/node@22.18.12)(jiti@1.21.7)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
+      vite-node: 3.2.4(@types/node@22.18.12)(jiti@1.21.7)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
       why-is-node-running: 2.3.0
     optionalDependencies:
       '@types/node': 22.18.12
@@ -21901,7 +21941,7 @@ snapshots:
     dependencies:
       '@types/chai': 5.2.3
       '@vitest/expect': 3.2.4
-      '@vitest/mocker': 3.2.4(vite@7.1.11(@types/node@22.18.12)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))
+      '@vitest/mocker': 3.2.4(vite@7.1.11(@types/node@22.18.12)(jiti@1.21.7)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))
       '@vitest/pretty-format': 3.2.4
       '@vitest/runner': 3.2.4
       '@vitest/snapshot': 3.2.4