diff --git a/apps/web-antd/package.json b/apps/web-antd/package.json
index 99859205e..140c90e8c 100644
--- a/apps/web-antd/package.json
+++ b/apps/web-antd/package.json
@@ -43,7 +43,7 @@
     "@vben/styles": "workspace:*",
     "@vben/types": "workspace:*",
     "@vben/utils": "workspace:*",
-    "@vueuse/components": "^14.0.0",
+    "@vueuse/components": "catalog:",
     "@vueuse/core": "catalog:",
     "@vueuse/integrations": "catalog:",
     "ant-design-vue": "catalog:",
diff --git a/apps/web-antd/src/components/card-title/CardTitle.vue b/apps/web-antd/src/components/card-title/CardTitle.vue
index 99f9d1131..b59ed966c 100644
--- a/apps/web-antd/src/components/card-title/CardTitle.vue
+++ b/apps/web-antd/src/components/card-title/CardTitle.vue
@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+defineOptions({ name: 'CardTitle' });
+
 // TODO @jawe from xingyu：https://gitee.com/yudaocode/yudao-ui-admin-vben/pulls/243/files#diff_note_47350213；这个组件没有必要，直接用antdv card 的slot去做就行了，只有这一个地方用，没有必要单独写一个组件
 defineProps({
   title: {
@@ -6,10 +8,6 @@ defineProps({
     required: true,
   },
 });
-
-defineComponent({
-  name: 'CardTitle',
-});
 </script>
 
 <template>
diff --git a/apps/web-antd/src/views/mall/promotion/kefu/components/KeFuConversationList.vue b/apps/web-antd/src/views/mall/promotion/kefu/components/KeFuConversationList.vue
index 0d99777fa..16d8f349a 100644
--- a/apps/web-antd/src/views/mall/promotion/kefu/components/KeFuConversationList.vue
+++ b/apps/web-antd/src/views/mall/promotion/kefu/components/KeFuConversationList.vue
@@ -3,12 +3,16 @@ import type { MallKefuConversationApi } from '#/api/mall/promotion/kefu/conversa
 
 import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
 
+import { confirm } from '@vben/common-ui';
 import { IconifyIcon } from '@vben/icons';
 import { formatPast, jsonParse } from '@vben/utils';
 
-import { Avatar, Badge, message } from 'ant-design-vue';
+import { Avatar, Badge, Layout, message } from 'ant-design-vue';
 
-import * as KeFuConversationApi from '#/api/mall/promotion/kefu/conversation';
+import {
+  deleteConversation,
+  updateConversationPinned,
+} from '#/api/mall/promotion/kefu/conversation';
 import { useMallKefuStore } from '#/store/mall/kefu';
 
 import { KeFuMessageContentTypeEnum } from './tools/constants';
@@ -108,27 +112,29 @@ function closeRightMenu() {
 }
 
 /** 置顶会话 */
-async function updateConversationPinned(adminPinned: boolean) {
+async function updateConversationPinnedFn(pinned: boolean) {
   // 1. 会话置顶/取消置顶
-  await KeFuConversationApi.updateConversationPinned({
+  await updateConversationPinned({
     id: rightClickConversation.value.id,
-    adminPinned,
+    pinned,
   });
-  message.success(adminPinned ? '置顶成功' : '取消置顶成功');
+  message.success(pinned ? '置顶成功' : '取消置顶成功');
   // 2. 关闭右键菜单，更新会话列表
   closeRightMenu();
   await kefuStore.updateConversation(rightClickConversation.value.id);
 }
 
 /** 删除会话 */
-async function deleteConversation() {
+async function deleteConversationFn() {
   // 1. 删除会话
-  // TODO @jave：使用全局的 confirm，这样 ele 和 antd 可以相对复用；
-  await message.confirm('您确定要删除该会话吗？');
-  await KeFuConversationApi.deleteConversation(rightClickConversation.value.id);
-  // 2. 关闭右键菜单，更新会话列表
-  closeRightMenu();
-  kefuStore.deleteConversation(rightClickConversation.value.id);
+  confirm({
+    content: '您确定要删除该会话吗？',
+  }).then(async () => {
+    await deleteConversation(rightClickConversation.value.id);
+    // 2. 关闭右键菜单，更新会话列表
+    closeRightMenu();
+    kefuStore.deleteConversation(rightClickConversation.value.id);
+  });
 }
 
 /** 监听右键菜单的显示状态，添加点击事件监听器 */
@@ -154,7 +160,7 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <a-layout-sider class="kefu h-full pt-[5px]" width="260px">
+  <Layout.Sider class="kefu h-full pt-[5px]" width="260px">
     <div class="color-[#999] my-[10px] font-bold">
       会话记录({{ kefuStore.getConversationList.length }})
     </div>
@@ -206,7 +212,7 @@ onBeforeUnmount(() => {
       <li
         v-show="!rightClickConversation.adminPinned"
         class="flex items-center"
-        @click.stop="updateConversationPinned(true)"
+        @click.stop="updateConversationPinnedFn(true)"
       >
         <IconifyIcon class="mr-[5px]" icon="ep:top" />
         置顶会话
@@ -214,12 +220,12 @@ onBeforeUnmount(() => {
       <li
         v-show="rightClickConversation.adminPinned"
         class="flex items-center"
-        @click.stop="updateConversationPinned(false)"
+        @click.stop="updateConversationPinnedFn(false)"
       >
         <IconifyIcon class="mr-[5px]" icon="ep:bottom" />
         取消置顶
       </li>
-      <li class="flex items-center" @click.stop="deleteConversation">
+      <li class="flex items-center" @click.stop="deleteConversationFn">
         <IconifyIcon class="mr-[5px]" color="red" icon="ep:delete" />
         删除会话
       </li>
@@ -228,7 +234,7 @@ onBeforeUnmount(() => {
         取消
       </li>
     </ul>
-  </a-layout-sider>
+  </Layout.Sider>
 </template>
 
 <style lang="scss" scoped>
diff --git a/apps/web-antd/src/views/mall/promotion/kefu/components/KeFuMessageList.vue b/apps/web-antd/src/views/mall/promotion/kefu/components/KeFuMessageList.vue
index aaad8966b..5b1c1d39e 100644
--- a/apps/web-antd/src/views/mall/promotion/kefu/components/KeFuMessageList.vue
+++ b/apps/web-antd/src/views/mall/promotion/kefu/components/KeFuMessageList.vue
@@ -14,11 +14,22 @@ 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 {
+  Avatar,
+  Empty,
+  Image,
+  Layout,
+  notification,
+  Textarea,
+} from 'ant-design-vue';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
 
-import * as KeFuMessageApi from '#/api/mall/promotion/kefu/message';
+import {
+  getKeFuMessageList,
+  sendKeFuMessage,
+  updateKeFuMessageReadStatus,
+} from '#/api/mall/promotion/kefu/message';
 import { useMallKefuStore } from '#/store/mall/kefu';
 
 import MessageItem from './message/MessageItem.vue';
@@ -56,18 +67,18 @@ const getMessageContent = computed(
 /** 获得消息列表 */
 // TODO @jave：idea 的 linter 报错，处理下；
 async function getMessageList() {
-  const res = await KeFuMessageApi.getKeFuMessageList(queryParams);
+  const res: any = await getKeFuMessageList(queryParams as any);
   if (isEmpty(res)) {
     // 当返回的是空列表说明没有消息或者已经查询完了历史消息
     skipGetMessageList.value = true;
     return;
   }
-  queryParams.createTime = formatDate(res.at(-1).createTime) as any;
+  queryParams.createTime = formatDate((res as any).at(-1).createTime) as any;
 
   // 情况一：加载最新消息
   if (queryParams.createTime) {
     // 情况二：加载历史消息
-    for (const item of res) {
+    for (const item of res as any) {
       pushMessage(item);
     }
   } else {
@@ -184,7 +195,7 @@ async function handleSendMessage(event: any) {
 /** 真正发送消息 【共用】*/
 async function sendMessage(msg: MallKefuMessageApi.MessageSend) {
   // 发送消息
-  await KeFuMessageApi.sendKeFuMessage(msg);
+  await sendKeFuMessage(msg);
   message.value = '';
   // 加载消息列表
   await refreshMessageList();
@@ -211,7 +222,7 @@ async function scrollToBottom() {
   // scrollbarRef.value!.setScrollTop(innerRef.value!.clientHeight)
   showNewMessageTip.value = false;
   // 2.2 消息已读
-  await KeFuMessageApi.updateKeFuMessageReadStatus(conversation.value.id);
+  await updateKeFuMessageReadStatus(conversation.value.id);
 }
 
 /** 查看新消息 */
@@ -268,11 +279,11 @@ function showTime(item: MallKefuMessageApi.Message, index: number) {
 </script>
 
 <template>
-  <a-layout v-if="showKeFuMessageList" class="kefu">
-    <a-layout-header class="kefu-header">
+  <Layout v-if="showKeFuMessageList()" class="kefu">
+    <Layout.Header class="kefu-header">
       <div class="kefu-title">{{ conversation.userNickname }}</div>
-    </a-layout-header>
-    <a-layout-content class="kefu-content">
+    </Layout.Header>
+    <Layout.Content class="kefu-content">
       <div
         ref="scrollbarRef"
         class="flex h-full overflow-y-auto"
@@ -396,8 +407,8 @@ function showTime(item: MallKefuMessageApi.Message, index: number) {
         <span>有新消息</span>
         <IconifyIcon class="ml-5px" icon="ep:bottom" />
       </div>
-    </a-layout-content>
-    <a-layout-footer class="kefu-footer">
+    </Layout.Content>
+    <Layout.Footer class="kefu-footer">
       <div class="chat-tools flex items-center">
         <EmojiSelectPopover @select-emoji="handleEmojiSelect" />
         <PictureSelectUpload
@@ -405,20 +416,20 @@ function showTime(item: MallKefuMessageApi.Message, index: number) {
           @send-picture="handleSendPicture"
         />
       </div>
-      <a-textarea
+      <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>
+    </Layout.Footer>
+  </Layout>
+  <Layout v-else class="kefu">
+    <Layout.Content>
       <Empty description="请选择左侧的一个会话后开始" class="mt-[50px]" />
-    </a-layout-content>
-  </a-layout>
+    </Layout.Content>
+  </Layout>
 </template>
 
 <style lang="scss" scoped>
diff --git a/apps/web-antd/src/views/mall/promotion/kefu/components/index.ts b/apps/web-antd/src/views/mall/promotion/kefu/components/index.ts
index 390e55425..90ddd0df4 100644
--- a/apps/web-antd/src/views/mall/promotion/kefu/components/index.ts
+++ b/apps/web-antd/src/views/mall/promotion/kefu/components/index.ts
@@ -3,4 +3,4 @@ export { default as KeFuMessageList } from './KeFuMessageList.vue';
 export { default as MemberInfo } from './member/MemberInfo.vue';
 
 // TODO @jawe：components =》modules；在 vben 里，modules 是给自己用的，把一个大 vue 拆成 n 个小 vue；components 是给别的模块使用的；
-// TODO @jawe：1）组件名小写，类似 conversation-list.vue；2）KeFu 开头可以去掉，因为已经是当前模块下，不用重复拼写；
\ No newline at end of file
+// TODO @jawe：1）组件名小写，类似 conversation-list.vue；2）KeFu 开头可以去掉，因为已经是当前模块下，不用重复拼写；
diff --git a/apps/web-antd/src/views/mall/promotion/kefu/components/member/MemberInfo.vue b/apps/web-antd/src/views/mall/promotion/kefu/components/member/MemberInfo.vue
index 141a9ea8e..1a5fb9d0d 100644
--- a/apps/web-antd/src/views/mall/promotion/kefu/components/member/MemberInfo.vue
+++ b/apps/web-antd/src/views/mall/promotion/kefu/components/member/MemberInfo.vue
@@ -1,6 +1,8 @@
 <!-- 右侧信息：会员信息 + 最近浏览 + 交易订单 -->
 <script lang="ts" setup>
 import type { MallKefuConversationApi } from '#/api/mall/promotion/kefu/conversation';
+import type { MemberUserApi } from '#/api/member/user';
+import type { PayWalletApi } from '#/api/pay/wallet/balance';
 
 import { computed, nextTick, ref } from 'vue';
 
@@ -9,11 +11,10 @@ import { isEmpty } from '@vben/utils';
 // TODO @jawe：debounce 是不是还是需要的哈；应该有 2 处需要；可以微信沟通哈；
 // import { debounce } from 'lodash-es'
 import { useDebounceFn } from '@vueuse/core';
-import { Card, Empty, message } from 'ant-design-vue';
+import { Card, Empty, Layout, 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 { getUser } from '#/api/member/user';
+import { getWallet } from '#/api/pay/wallet/balance';
 import AccountInfo from '#/views/member/user/detail/modules/account-info.vue';
 import BasicInfo from '#/views/member/user/detail/modules/basic-info.vue';
 
@@ -91,12 +92,12 @@ async function initHistory(val: MallKefuConversationApi.Conversation) {
 defineExpose({ initHistory });
 
 /** 处理消息列表滚动事件(debounce 限流) */
-const scrollbarRef = ref<InstanceType>();
-const handleScroll = useDebounceFn(() => {
+const scrollbarRef = ref<InstanceType<any>>();
+const handleScroll = useDebounceFn(async () => {
   const wrap = scrollbarRef.value?.wrapRef;
   // 触底重置
   if (Math.abs(wrap!.scrollHeight - wrap!.clientHeight - wrap!.scrollTop) < 1) {
-    loadMore();
+    await loadMore();
   }
 }, 200);
 
@@ -106,8 +107,8 @@ const WALLET_INIT_DATA = {
   balance: 0,
   totalExpense: 0,
   totalRecharge: 0,
-} as WalletApi.WalletVO; // 钱包初始化数据
-const wallet = ref<WalletApi.WalletVO>(WALLET_INIT_DATA); // 钱包信息
+} as PayWalletApi.Wallet; // 钱包初始化数据
+const wallet = ref<PayWalletApi.Wallet>(WALLET_INIT_DATA); // 钱包信息
 
 async function getUserWallet() {
   if (!conversation.value.userId) {
@@ -115,21 +116,21 @@ async function getUserWallet() {
     return;
   }
   wallet.value =
-    (await WalletApi.getWallet({ userId: conversation.value.userId })) ||
+    (await getWallet({ userId: conversation.value.userId })) ||
     WALLET_INIT_DATA;
 }
 
 /** 获得用户 */
 const loading = ref(true); // 加载中
-const user = ref<UserApi.UserVO>({} as UserApi.UserVO);
+const user = ref<MemberUserApi.User>({} as MemberUserApi.User);
 async function getUserData() {
   loading.value = true;
   try {
-    const res = await UserApi.getUser(conversation.value.userId);
+    const res = await getUser(conversation.value.userId);
     if (res) {
       user.value = res;
     } else {
-      user.value = {} as UserApi.UserVO;
+      user.value = {} as MemberUserApi.User;
       message.error('会员不存在！');
     }
   } finally {
@@ -140,8 +141,8 @@ async function getUserData() {
 
 <template>
   <!-- TODO @jave：from xingyu：a- 换成大写的方式，另外组件没有进行导入，其他页面也有这个问题 -->
-  <a-layout class="kefu">
-    <a-layout-header class="kefu-header">
+  <Layout class="kefu">
+    <Layout.Header class="kefu-header">
       <div
         :class="{ 'kefu-header-item-activation': tabActivation('会员信息') }"
         class="kefu-header-item flex cursor-pointer items-center justify-center"
@@ -163,13 +164,13 @@ async function getUserData() {
       >
         交易订单
       </div>
-    </a-layout-header>
-    <a-layout-content class="kefu-content p-10px!">
+    </Layout.Header>
+    <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 #title>
+            <span class="text-sm font-bold">基本信息</span>
           </template>
         </BasicInfo>
         <!-- 账户信息 -->
@@ -178,8 +179,8 @@ async function getUserData() {
           class="mt-10px h-full"
           shadow="never"
         >
-          <template #header>
-            <CardTitle title="账户信息" />
+          <template #title>
+            <span class="text-sm font-bold">账户信息</span>
           </template>
           <AccountInfo :column="1" :user="user" :wallet="wallet" />
         </Card>
@@ -203,8 +204,8 @@ async function getUserData() {
         description="请选择左侧的一个会话后开始"
         class="mt-[50px]"
       />
-    </a-layout-content>
-  </a-layout>
+    </Layout.Content>
+  </Layout>
 </template>
 
 <style lang="scss" scoped>
diff --git a/apps/web-antd/src/views/mall/promotion/kefu/components/message/ProductItem.vue b/apps/web-antd/src/views/mall/promotion/kefu/components/message/ProductItem.vue
index ee1be0734..78ccf86c1 100644
--- a/apps/web-antd/src/views/mall/promotion/kefu/components/message/ProductItem.vue
+++ b/apps/web-antd/src/views/mall/promotion/kefu/components/message/ProductItem.vue
@@ -43,13 +43,9 @@ function openDetail(spuId: number) {
 </script>
 
 <template>
-  <div
-    class="product-warp"
-    style="cursor: pointer"
-    @click.stop="openDetail(spuId)"
-  >
+  <div class="product-warp cursor-pointer" @click.stop="openDetail(spuId)">
     <!-- 左侧商品图片-->
-    <div class="product-warp-left mr-[24px]">
+    <div class="product-warp-left mr-6">
       <Image
         :initial-index="0"
         :preview-src-list="[picUrl]"
@@ -63,8 +59,8 @@ function openDetail(spuId: number) {
     <!-- 右侧商品信息 -->
     <div class="product-warp-right">
       <div class="description">{{ title }}</div>
-      <div class="my-[5px]">
-        <span class="mr-[20px]">库存: {{ stock || 0 }}</span>
+      <div class="my-1">
+        <span class="mr-5">库存: {{ stock || 0 }}</span>
         <span>销量: {{ salesCount || 0 }}</span>
       </div>
       <div class="flex items-center justify-between">
diff --git a/apps/web-antd/src/views/mall/promotion/kefu/components/tools/EmojiSelectPopover.vue b/apps/web-antd/src/views/mall/promotion/kefu/components/tools/EmojiSelectPopover.vue
index 2274ce456..b50bc11dd 100644
--- a/apps/web-antd/src/views/mall/promotion/kefu/components/tools/EmojiSelectPopover.vue
+++ b/apps/web-antd/src/views/mall/promotion/kefu/components/tools/EmojiSelectPopover.vue
@@ -6,16 +6,15 @@ import { computed } from 'vue';
 
 import { IconifyIcon } from '@vben/icons';
 
-import { List } from 'ant-design-vue';
+import { List, Popover } from 'ant-design-vue';
 
 import { useEmoji } from './emoji';
 
 defineOptions({ name: 'EmojiSelectPopover' });
 
 /** 选择 emoji 表情 */
-// TODO @jawe：这里有 linter 告警，看看要不要处理下；
 const emits = defineEmits<{
-  (e: 'selectEmoji', v: Emoji);
+  (e: 'selectEmoji', v: Emoji): void;
 }>();
 const { getEmojiList } = useEmoji();
 const emojiList = computed(() => getEmojiList());
@@ -27,7 +26,7 @@ function handleSelect(item: Emoji) {
 </script>
 
 <template>
-  <a-popover :width="500" placement="top" trigger="click">
+  <Popover :width="500" placement="top" trigger="click">
     <template #content>
       <List height="300px">
         <ul class="ml-2 flex flex-wrap px-2">
@@ -42,15 +41,15 @@ function handleSelect(item: Emoji) {
             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]" />
+            <img :src="item.url" class="h-6 w-6" />
           </li>
         </ul>
       </List>
     </template>
     <IconifyIcon
       :size="30"
-      class="ml-[10px] cursor-pointer"
+      class="ml-2.5 cursor-pointer"
       icon="twemoji:grinning-face"
     />
-  </a-popover>
+  </Popover>
 </template>
diff --git a/apps/web-antd/src/views/mall/promotion/kefu/components/tools/PictureSelectUpload.vue b/apps/web-antd/src/views/mall/promotion/kefu/components/tools/PictureSelectUpload.vue
index 468295531..3912f2e74 100644
--- a/apps/web-antd/src/views/mall/promotion/kefu/components/tools/PictureSelectUpload.vue
+++ b/apps/web-antd/src/views/mall/promotion/kefu/components/tools/PictureSelectUpload.vue
@@ -2,7 +2,7 @@
 <script lang="ts" setup>
 import { message } from 'ant-design-vue';
 
-import * as FileApi from '#/api/infra/file';
+import { uploadFile } from '#/api/infra/file';
 import Picture from '#/views/mall/promotion/kefu/asserts/picture.svg';
 
 defineOptions({ name: 'PictureSelectUpload' });
@@ -17,7 +17,7 @@ async function selectAndUpload() {
   message.success('图片发送中请稍等。。。');
   // TODO @jawe：直接使用 updateFile，不通过 FileApi。vben 这里的规范；
   // TODO @jawe：这里的上传，看看能不能替换成 export function useUpload(directory?: string) {；它支持前端直传，更统一；
-  const res = await FileApi.updateFile({ file: files[0].file });
+  const res = await uploadFile({ file: files[0].file });
   emits('sendPicture', res.data);
 }
 
diff --git a/apps/web-antd/src/views/mall/promotion/kefu/components/tools/emoji.ts b/apps/web-antd/src/views/mall/promotion/kefu/components/tools/emoji.ts
index 628696807..69b948d01 100644
--- a/apps/web-antd/src/views/mall/promotion/kefu/components/tools/emoji.ts
+++ b/apps/web-antd/src/views/mall/promotion/kefu/components/tools/emoji.ts
@@ -65,7 +65,7 @@ export const useEmoji = () => {
   const initStaticEmoji = async () => {
     const pathList = import.meta.glob('../../asserts/*.{png,jpg,jpeg,svg}');
     for (const path in pathList) {
-      const imageModule: any = await pathList[path]();
+      const imageModule: any = await pathList[path]?.();
       emojiPathList.value.push({ path, src: imageModule.default });
     }
   };
diff --git a/apps/web-antd/src/views/mall/promotion/kefu/index.vue b/apps/web-antd/src/views/mall/promotion/kefu/index.vue
index 1d52a1179..c45defe83 100644
--- a/apps/web-antd/src/views/mall/promotion/kefu/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/kefu/index.vue
@@ -1,11 +1,13 @@
 <script lang="ts" setup>
+import type { MallKefuConversationApi } from '#/api/mall/promotion/kefu/conversation';
+
 import { defineOptions, onBeforeUnmount, onMounted, ref, watch } from 'vue';
 
 import { Page } from '@vben/common-ui';
 import { useAccessStore } from '@vben/stores';
 
 import { useWebSocket } from '@vueuse/core';
-import { message } from 'ant-design-vue';
+import { Layout, message } from 'ant-design-vue';
 
 import { useMallKefuStore } from '#/store/mall/kefu';
 
@@ -81,10 +83,10 @@ watch(
 const keFuChatBoxRef = ref<InstanceType<typeof KeFuMessageList>>();
 const memberInfoRef = ref<InstanceType<typeof MemberInfo>>();
 // TODO @jawe：这里没导入
-const handleChange = (conversation: KeFuConversationRespVO) => {
-  keFuChatBoxRef.value?.getNewMessageList(conversation);
+function handleChange(conversation: MallKefuConversationApi.Conversation) {
+  keFuChatBoxRef.value?.getNewMessageList(conversation as any);
   memberInfoRef.value?.initHistory(conversation);
-};
+}
 
 const keFuConversationRef = ref<InstanceType<typeof KeFuConversationList>>();
 /** 初始化 */
@@ -107,14 +109,14 @@ onBeforeUnmount(() => {
 <template>
   <Page>
     <!-- TODO @jawe：style 使用 tailwindcss，AI 友好； -->
-    <a-layout-content class="kefu-layout hrow">
+    <Layout.Content class="kefu-layout hrow">
       <!-- 会话列表 -->
       <KeFuConversationList ref="keFuConversationRef" @change="handleChange" />
       <!-- 会话详情（选中会话的消息列表） -->
       <KeFuMessageList ref="keFuChatBoxRef" />
       <!-- 会员信息（选中会话的会员信息） -->
       <MemberInfo ref="memberInfoRef" />
-    </a-layout-content>
+    </Layout.Content>
   </Page>
 </template>
 
diff --git a/apps/web-ele/src/views/bpm/processInstance/index.vue b/apps/web-ele/src/views/bpm/processInstance/index.vue
index d23bb872c..776e2c1a2 100644
--- a/apps/web-ele/src/views/bpm/processInstance/index.vue
+++ b/apps/web-ele/src/views/bpm/processInstance/index.vue
@@ -203,5 +203,3 @@ const [Grid, gridApi] = useVbenVxeGrid({
     </Grid>
   </Page>
 </template>
-
-
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/index.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/index.vue
index 08cf5ba34..5e9d2a53d 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/index.vue
@@ -17,5 +17,5 @@ defineProps<{ property: ImageBarProperty }>();
   >
     <IconifyIcon icon="ep:picture" class="text-3xl text-gray-600" />
   </div>
-  <ElImage v-else class="block w-full h-full" :src="property.imgUrl" />
+  <ElImage v-else class="block h-full w-full" :src="property.imgUrl" />
 </template>
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-card/index.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-card/index.vue
index e1cd58bc6..1092b097b 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-card/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-card/index.vue
@@ -13,8 +13,8 @@ defineProps<{ property: UserCardProperty }>();
 </script>
 <template>
   <div class="flex flex-col">
-    <div class="flex items-center justify-between px-[18px] py-[24px]">
-      <div class="flex flex-1 items-center gap-[16px]">
+    <div class="flex items-center justify-between px-4 py-6">
+      <div class="flex flex-1 items-center gap-4">
         <ElAvatar :size="60">
           <IconifyIcon icon="ep:avatar" :size="60" />
         </ElAvatar>
@@ -22,13 +22,11 @@ defineProps<{ property: UserCardProperty }>();
       </div>
       <IconifyIcon icon="tdesign:qrcode" :size="20" />
     </div>
-    <div
-      class="flex items-center justify-between bg-white px-[20px] py-[8px] text-[12px]"
-    >
+    <div class="flex items-center justify-between bg-white px-5 py-2 text-xs">
       <span class="text-[#ff690d]">点击绑定手机号</span>
-      <span class="rounded-[26px] bg-[#ff6100] px-[8px] py-[5px] text-white">
+      <span class="rounded-[26px] bg-[#ff6100] px-2 py-1.5 text-white">
         去绑定
       </span>
     </div>
   </div>
-</template>
\ No newline at end of file
+</template>
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-order/index.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-order/index.vue
index 1c171b3eb..b22c9e576 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-order/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-order/index.vue
@@ -13,4 +13,4 @@ defineProps<{ property: UserOrderProperty }>();
   <ElImage
     src="https://shopro.sheepjs.com/admin/static/images/shop/decorate/orderCardStyle.png"
   />
-</template>
\ No newline at end of file
+</template>
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-order/property.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-order/property.vue
index 2f9abe556..e670a1e44 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-order/property.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-order/property.vue
@@ -17,4 +17,4 @@ const formData = useVModel(props, 'modelValue', emit);
 
 <template>
   <ComponentContainerProperty v-model="formData.style" />
-</template>
\ No newline at end of file
+</template>
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-wallet/index.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-wallet/index.vue
index 4eabad045..f23986193 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-wallet/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-wallet/index.vue
@@ -13,4 +13,4 @@ defineProps<{ property: UserWalletProperty }>();
   <ElImage
     src="https://shopro.sheepjs.com/admin/static/images/shop/decorate/walletCardStyle.png"
   />
-</template>
\ No newline at end of file
+</template>
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/property.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/property.vue
index c576d8f76..248777f55 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/property.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/property.vue
@@ -40,7 +40,7 @@ const formData = useVModel(props, 'modelValue', emit);
           :file-type="['mp4']"
           :limit="1"
           :file-size="100"
-          class="min-w-[80px]"
+          class="min-w-20"
         />
       </ElFormItem>
       <ElFormItem label="上传封面" prop="posterUrl">
@@ -49,7 +49,7 @@ const formData = useVModel(props, 'modelValue', emit);
           draggable="false"
           height="80px"
           width="100%"
-          class="min-w-[80px]"
+          class="min-w-20"
           :show-description="false"
         >
           <template #tip> 建议宽度750 </template>
@@ -60,4 +60,4 @@ const formData = useVModel(props, 'modelValue', emit);
       </ElFormItem>
     </ElForm>
   </ComponentContainerProperty>
-</template>
\ No newline at end of file
+</template>
diff --git a/apps/web-ele/src/views/mall/promotion/components/magic-cube-editor/index.vue b/apps/web-ele/src/views/mall/promotion/components/magic-cube-editor/index.vue
index b985a8142..9223bb11c 100644
--- a/apps/web-ele/src/views/mall/promotion/components/magic-cube-editor/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/magic-cube-editor/index.vue
@@ -255,11 +255,11 @@ const eachCube = (callback: (x: number, y: number, cube: Cube) => void) => {
 
   .cube {
     box-sizing: border-box;
+    line-height: 1;
     color: var(--el-text-color-secondary);
     text-align: center;
     cursor: pointer;
     border: 1px solid var(--el-border-color);
-    line-height: 1;
 
     :deep(.iconify) {
       display: inline-block;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 204d6a872..654a6e56f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -174,6 +174,9 @@ catalogs:
     '@vue/test-utils':
       specifier: ^2.4.6
       version: 2.4.6
+    '@vueuse/components':
+      specifier: ^13.4.0
+      version: 13.9.0
     '@vueuse/core':
       specifier: ^13.4.0
       version: 13.9.0
@@ -669,10 +672,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@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))
+        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))
       '@vitejs/plugin-vue-jsx':
         specifier: 'catalog:'
-        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))
+        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))
       '@vue/test-utils':
         specifier: 'catalog:'
         version: 2.4.6
@@ -714,10 +717,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@1.21.7)(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@2.6.1)(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@1.21.7)(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@2.6.1)(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)
@@ -798,8 +801,8 @@ importers:
         specifier: workspace:*
         version: link:../../packages/utils
       '@vueuse/components':
-        specifier: ^14.0.0
-        version: 14.0.0(vue@3.5.22(typescript@5.9.3))
+        specifier: 'catalog:'
+        version: 13.9.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))
@@ -5310,8 +5313,8 @@ packages:
   '@vue/test-utils@2.4.6':
     resolution: {integrity: sha512-FMxEjOpYNYiFe0GkaHsnJPXFHxQ6m4t8vI/ElPGpMWxZKpmRvQ33OIrvRXemy6yha03RxhOlQuy+gZMC3CQSow==}
 
-  '@vueuse/components@14.0.0':
-    resolution: {integrity: sha512-0PFAbAzKo+Ipt45R0OVHvZwjTj9oDZJQ/lc77d020fKl9GrxEIRvVIzMW1CZVn1vwmGhXEZPIF3erjixW2yqpg==}
+  '@vueuse/components@13.9.0':
+    resolution: {integrity: sha512-0DDFpjG3hEEK+3YgSzE/OzOGqpo/KmxcXWzW2YdmgahZvaoUdegn68GmbdcHRJE7CH55dDj13Cz47iN8QoI3jQ==}
     peerDependencies:
       vue: ^3.5.17
 
@@ -5326,11 +5329,6 @@ 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==}
 
@@ -5426,9 +5424,6 @@ 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==}
 
@@ -5448,11 +5443,6 @@ 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==}
 
@@ -15133,14 +15123,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@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@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))':
     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@1.21.7)(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@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)
     transitivePeerDependencies:
       - supports-color
@@ -15162,10 +15152,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@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@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))':
     dependencies:
       '@rolldown/pluginutils': 1.0.0-beta.29
-      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: 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@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))':
@@ -15182,13 +15172,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@1.21.7)(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@2.6.1)(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@1.21.7)(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@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
 
   '@vitest/pretty-format@3.2.4':
     dependencies:
@@ -15379,10 +15369,10 @@ 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))':
+  '@vueuse/components@13.9.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))
+      '@vueuse/core': 13.9.0(vue@3.5.22(typescript@5.9.3))
+      '@vueuse/shared': 13.9.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))':
@@ -15411,13 +15401,6 @@ 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
@@ -15462,8 +15445,6 @@ 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))':
@@ -15497,10 +15478,6 @@ 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))
@@ -21627,13 +21604,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@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@2.6.1)(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@1.21.7)(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@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
     transitivePeerDependencies:
       - '@types/node'
       - jiti
@@ -21802,7 +21779,7 @@ snapshots:
       sass: 1.93.2
       terser: 5.44.0
 
-  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@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):
     dependencies:
       esbuild: 0.25.3
       fdir: 6.5.0(picomatch@4.0.3)
@@ -21813,7 +21790,7 @@ snapshots:
     optionalDependencies:
       '@types/node': 22.18.12
       fsevents: 2.3.3
-      jiti: 1.21.7
+      jiti: 2.6.1
       less: 4.4.2
       sass: 1.93.2
       terser: 5.44.0
@@ -21895,11 +21872,11 @@ snapshots:
       - typescript
       - universal-cookie
 
-  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):
+  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):
     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@1.21.7)(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@2.6.1)(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
@@ -21917,8 +21894,8 @@ snapshots:
       tinyglobby: 0.2.15
       tinypool: 1.1.1
       tinyrainbow: 2.0.0
-      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)
+      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)
       why-is-node-running: 2.3.0
     optionalDependencies:
       '@types/node': 22.18.12
@@ -21941,7 +21918,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@1.21.7)(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@2.6.1)(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
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 53e1e50a3..5031b8161 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -73,6 +73,7 @@ catalog:
   '@vue/reactivity': ^3.5.17
   '@vue/shared': ^3.5.17
   '@vue/test-utils': ^2.4.6
+  '@vueuse/components': ^13.4.0
   '@vueuse/core': ^13.4.0
   '@vueuse/integrations': ^13.4.0
   '@vueuse/motion': ^3.0.3