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/product/spu/components/spu-table-select.vue b/apps/web-antd/src/views/mall/product/spu/components/spu-table-select.vue
index 236d4c264..6647ae649 100644
--- a/apps/web-antd/src/views/mall/product/spu/components/spu-table-select.vue
+++ b/apps/web-antd/src/views/mall/product/spu/components/spu-table-select.vue
@@ -169,8 +169,8 @@ const [Modal, modalApi] = useVbenModal({
   },
   async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
-      gridApi.grid.clearCheckboxRow();
-      gridApi.grid.clearRadioRow();
+      await gridApi.grid.clearCheckboxRow();
+      await gridApi.grid.clearRadioRow();
       return;
     }
 
diff --git a/apps/web-antd/src/views/mall/promotion/coupon/data.ts b/apps/web-antd/src/views/mall/promotion/coupon/data.ts
index 3d104b51c..6f30c5597 100644
--- a/apps/web-antd/src/views/mall/promotion/coupon/data.ts
+++ b/apps/web-antd/src/views/mall/promotion/coupon/data.ts
@@ -101,6 +101,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
       formatter: 'formatDateTime',
     },
     {
+      field: 'actions',
       title: '操作',
       width: 100,
       fixed: 'right',
diff --git a/apps/web-antd/src/views/mall/promotion/coupon/index.vue b/apps/web-antd/src/views/mall/promotion/coupon/index.vue
index 110dd01ba..5a442b1de 100644
--- a/apps/web-antd/src/views/mall/promotion/coupon/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/coupon/index.vue
@@ -7,7 +7,6 @@ import { ref } from 'vue';
 import { DocAlert, Page } from '@vben/common-ui';
 import { DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
-import { $t } from '@vben/locales';
 
 import { message, TabPane, Tabs } from 'ant-design-vue';
 
@@ -32,7 +31,7 @@ function handleRefresh() {
 /** 删除优惠券 */
 async function handleDelete(row: MallCouponApi.Coupon) {
   const hideLoading = message.loading({
-    content: $t('ui.actionMessage.deleting', [row.name]),
+    content: '回收中...',
     duration: 0,
   });
   try {
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-antd/src/views/mall/trade/afterSale/data.ts b/apps/web-antd/src/views/mall/trade/afterSale/data.ts
index 150a9fff9..2daee4757 100644
--- a/apps/web-antd/src/views/mall/trade/afterSale/data.ts
+++ b/apps/web-antd/src/views/mall/trade/afterSale/data.ts
@@ -131,7 +131,6 @@ export function useGridColumns(): VxeGridPropTypes.Columns {
     {
       field: 'user.nickname',
       title: '买家',
-      align: 'center',
       minWidth: 120,
     },
     {
@@ -144,11 +143,10 @@ export function useGridColumns(): VxeGridPropTypes.Columns {
       field: 'status',
       title: '售后状态',
       width: 100,
-      align: 'center',
       cellRender: {
         name: 'CellDict',
         props: {
-          dictType: DICT_TYPE.TRADE_AFTER_SALE_STATUS,
+          type: DICT_TYPE.TRADE_AFTER_SALE_STATUS,
         },
       },
     },
@@ -156,11 +154,10 @@ export function useGridColumns(): VxeGridPropTypes.Columns {
       field: 'way',
       title: '售后方式',
       width: 100,
-      align: 'center',
       cellRender: {
         name: 'CellDict',
         props: {
-          dictType: DICT_TYPE.TRADE_AFTER_SALE_WAY,
+          type: DICT_TYPE.TRADE_AFTER_SALE_WAY,
         },
       },
     },
diff --git a/apps/web-antd/src/views/mall/trade/order/index.vue b/apps/web-antd/src/views/mall/trade/order/index.vue
index 84387940e..dbd2e2145 100644
--- a/apps/web-antd/src/views/mall/trade/order/index.vue
+++ b/apps/web-antd/src/views/mall/trade/order/index.vue
@@ -117,7 +117,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
                   <Tag
                     color="blue"
                     v-for="property in item.properties"
-                    :key="property.id"
+                    :key="property.propertyId"
                   >
                     {{ property.propertyName }} : {{ property.valueName }}
                   </Tag>
diff --git a/apps/web-antd/src/views/member/user/detail/index.vue b/apps/web-antd/src/views/member/user/detail/index.vue
index 991c3fa49..f0def1afb 100644
--- a/apps/web-antd/src/views/member/user/detail/index.vue
+++ b/apps/web-antd/src/views/member/user/detail/index.vue
@@ -17,9 +17,14 @@ import { $t } from '#/locales';
 import Form from '../modules/form.vue';
 import AccountInfo from './modules/account-info.vue';
 import AddressList from './modules/address-list.vue';
+import AfterSaleList from './modules/after-sale-list.vue';
 import BalanceList from './modules/balance-list.vue';
 import BasicInfo from './modules/basic-info.vue';
+import BrokerageList from './modules/brokerage-list.vue';
+import CouponList from './modules/coupon-list.vue';
 import ExperienceRecordList from './modules/experience-record-list.vue';
+import FavoriteList from './modules/favorite-list.vue';
+import OrderList from './modules/order-list.vue';
 import PointList from './modules/point-list.vue';
 import SignList from './modules/sign-list.vue';
 
@@ -100,34 +105,19 @@ onMounted(async () => {
             <AddressList class="h-full" :user-id="userId" />
           </TabPane>
           <TabPane tab="订单管理" key="OrderList">
-            <!-- Todo: 商城模块 -->
-            <div class="h-full">
-              <h1>订单管理</h1>
-            </div>
+            <OrderList class="h-full" :user-id="userId" />
           </TabPane>
           <TabPane tab="售后管理" key="AfterSaleList">
-            <!-- Todo: 商城模块 -->
-            <div class="h-full">
-              <h1>售后管理</h1>
-            </div>
+            <AfterSaleList class="h-full" :user-id="userId" />
           </TabPane>
           <TabPane tab="收藏记录" key="FavoriteList">
-            <!-- Todo: 商城模块 -->
-            <div class="h-full">
-              <h1>收藏记录</h1>
-            </div>
+            <FavoriteList class="h-full" :user-id="userId" />
           </TabPane>
           <TabPane tab="优惠劵" key="CouponList">
-            <!-- Todo: 商城模块 -->
-            <div class="h-full">
-              <h1>优惠劵</h1>
-            </div>
+            <CouponList class="h-full" :user-id="userId" />
           </TabPane>
           <TabPane tab="推广用户" key="BrokerageList">
-            <!-- Todo: 商城模块 -->
-            <div class="h-full">
-              <h1>推广用户</h1>
-            </div>
+            <BrokerageList class="h-full" :user-id="userId" />
           </TabPane>
         </Tabs>
       </Card>
diff --git a/apps/web-antd/src/views/member/user/detail/modules/account-info.vue b/apps/web-antd/src/views/member/user/detail/modules/account-info.vue
index d148e5158..1bc7a0c9c 100644
--- a/apps/web-antd/src/views/member/user/detail/modules/account-info.vue
+++ b/apps/web-antd/src/views/member/user/detail/modules/account-info.vue
@@ -8,7 +8,7 @@ import { Card } from 'ant-design-vue';
 
 import { useDescription } from '#/components/description';
 
-withDefaults(
+const props = withDefaults(
   defineProps<{
     mode?: 'kefu' | 'member';
     user: MemberUserApi.User;
@@ -20,6 +20,8 @@ withDefaults(
 );
 
 const [Descriptions] = useDescription({
+  bordered: false,
+  column: props.mode === 'member' ? 2 : 1,
   schema: [
     {
       field: 'levelName',
diff --git a/apps/web-antd/src/views/member/user/detail/modules/address-list.vue b/apps/web-antd/src/views/member/user/detail/modules/address-list.vue
index e94e2b19f..488058e07 100644
--- a/apps/web-antd/src/views/member/user/detail/modules/address-list.vue
+++ b/apps/web-antd/src/views/member/user/detail/modules/address-list.vue
@@ -2,9 +2,7 @@
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { MemberAddressApi } from '#/api/member/address';
 
-import { h } from 'vue';
-
-import { Tag } from 'ant-design-vue';
+import { DICT_TYPE } from '@vben/constants';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getAddressList } from '#/api/member/address';
@@ -13,58 +11,52 @@ const props = defineProps<{
   userId: number;
 }>();
 
+const columns = [
+  {
+    field: 'id',
+    title: '地址编号',
+    minWidth: 100,
+  },
+  {
+    field: 'name',
+    title: '收件人名称',
+    minWidth: 120,
+  },
+  {
+    field: 'mobile',
+    title: '手机号',
+    minWidth: 130,
+  },
+  {
+    field: 'areaId',
+    title: '地区编码',
+    minWidth: 120,
+  },
+  {
+    field: 'detailAddress',
+    title: '收件详细地址',
+    minWidth: 200,
+  },
+  {
+    field: 'defaultStatus',
+    title: '是否默认',
+    minWidth: 100,
+    cellRender: {
+      name: 'CellDict',
+      props: { type: DICT_TYPE.INFRA_BOOLEAN_STRING },
+    },
+  },
+  {
+    field: 'createTime',
+    title: '创建时间',
+    formatter: 'formatDateTime',
+    minWidth: 160,
+  },
+];
+
 const [Grid] = useVbenVxeGrid({
   gridOptions: {
-    columns: [
-      {
-        field: 'id',
-        title: '地址编号',
-        minWidth: 100,
-      },
-      {
-        field: 'name',
-        title: '收件人名称',
-        minWidth: 120,
-      },
-      {
-        field: 'mobile',
-        title: '手机号',
-        minWidth: 130,
-      },
-      {
-        field: 'areaId',
-        title: '地区编码',
-        minWidth: 120,
-      },
-      {
-        field: 'detailAddress',
-        title: '收件详细地址',
-        minWidth: 200,
-      },
-      {
-        field: 'defaultStatus',
-        title: '是否默认',
-        minWidth: 100,
-        slots: {
-          default: ({ row }) => {
-            return h(
-              Tag,
-              {
-                class: 'mr-1',
-                color: row.defaultStatus ? 'blue' : 'red',
-              },
-              () => (row.defaultStatus ? '是' : '否'),
-            );
-          },
-        },
-      },
-      {
-        field: 'createTime',
-        title: '创建时间',
-        minWidth: 180,
-        formatter: 'formatDateTime',
-      },
-    ],
+    columns,
     keepSource: true,
     pagerConfig: {
       enabled: false,
diff --git a/apps/web-antd/src/views/member/user/detail/modules/after-sale-list.vue b/apps/web-antd/src/views/member/user/detail/modules/after-sale-list.vue
new file mode 100644
index 000000000..db51216ac
--- /dev/null
+++ b/apps/web-antd/src/views/member/user/detail/modules/after-sale-list.vue
@@ -0,0 +1,155 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MallAfterSaleApi } from '#/api/mall/trade/afterSale';
+
+import { onMounted, ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { Button, Image, Tabs, Tag } from 'ant-design-vue';
+
+import { TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getAfterSalePage } from '#/api/mall/trade/afterSale';
+import {
+  useGridColumns,
+  useGridFormSchema,
+} from '#/views/mall/trade/afterSale/data';
+
+const props = defineProps<{
+  userId: number;
+}>();
+
+const { push } = useRouter();
+
+const statusTabs = ref([
+  {
+    label: '全部',
+    value: '0',
+  },
+]);
+const statusTab = ref(statusTabs.value[0]!.value);
+
+/** 处理退款 */
+function handleOpenAfterSaleDetail(row: MallAfterSaleApi.AfterSale) {
+  push({ name: 'TradeAfterSaleDetail', params: { id: row.id } });
+}
+
+/** 查看订单详情 */
+function handleOpenOrderDetail(row: MallAfterSaleApi.AfterSale) {
+  push({ name: 'TradeOrderDetail', params: { id: row.orderId } });
+}
+
+/** 切换售后状态 */
+function handleChangeStatus(key: number | string) {
+  statusTab.value = key.toString();
+  gridApi.query();
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    cellConfig: {
+      height: 60,
+    },
+    columns: useGridColumns(),
+    keepSource: true,
+    pagerConfig: {
+      pageSize: 10,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getAfterSalePage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            userId: props.userId,
+            status:
+              statusTab.value === '0' ? undefined : Number(statusTab.value),
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MallAfterSaleApi.AfterSale>,
+});
+
+/** 初始化 */
+onMounted(() => {
+  for (const dict of getDictOptions(DICT_TYPE.TRADE_AFTER_SALE_STATUS)) {
+    statusTabs.value.push({
+      label: dict.label,
+      value: dict.value.toString(),
+    });
+  }
+});
+</script>
+
+<template>
+  <Grid>
+    <template #toolbar-actions>
+      <Tabs
+        v-model:active-key="statusTab"
+        class="w-full"
+        @change="handleChangeStatus"
+      >
+        <Tabs.TabPane
+          v-for="tab in statusTabs"
+          :key="tab.value"
+          :tab="tab.label"
+        />
+      </Tabs>
+    </template>
+    <template #orderNo="{ row }">
+      <Button type="link" @click="handleOpenOrderDetail(row)">
+        {{ row.orderNo }}
+      </Button>
+    </template>
+    <template #productInfo="{ row }">
+      <div class="flex items-start gap-2 text-left">
+        <Image
+          v-if="row.picUrl"
+          :src="row.picUrl"
+          :width="40"
+          :height="40"
+          :preview="{ src: row.picUrl }"
+        />
+        <div class="flex flex-1 flex-col gap-1">
+          <span class="text-sm">{{ row.spuName }}</span>
+          <div class="mt-1 flex flex-wrap gap-1">
+            <Tag
+              v-for="property in row.properties"
+              :key="property.propertyId!"
+              size="small"
+              color="blue"
+            >
+              {{ property.propertyName }}: {{ property.valueName }}
+            </Tag>
+          </div>
+        </div>
+      </div>
+    </template>
+    <template #actions="{ row }">
+      <TableAction
+        :actions="[
+          {
+            label: '处理退款',
+            type: 'link',
+            onClick: handleOpenAfterSaleDetail.bind(null, row),
+          },
+        ]"
+      />
+    </template>
+  </Grid>
+</template>
diff --git a/apps/web-antd/src/views/member/user/detail/modules/balance-list.vue b/apps/web-antd/src/views/member/user/detail/modules/balance-list.vue
index 76d805f19..86b148ce7 100644
--- a/apps/web-antd/src/views/member/user/detail/modules/balance-list.vue
+++ b/apps/web-antd/src/views/member/user/detail/modules/balance-list.vue
@@ -4,6 +4,7 @@ import type { WalletTransactionApi } from '#/api/pay/wallet/transaction';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getTransactionPage } from '#/api/pay/wallet/transaction';
+import { useTransactionGridColumns } from '#/views/pay/wallet/balance/data';
 
 const props = defineProps<{
   walletId: number | undefined;
@@ -11,36 +12,7 @@ const props = defineProps<{
 
 const [Grid] = useVbenVxeGrid({
   gridOptions: {
-    columns: [
-      {
-        field: 'id',
-        title: '编号',
-        minWidth: 100,
-      },
-      {
-        field: 'title',
-        title: '关联业务标题',
-        minWidth: 200,
-      },
-      {
-        field: 'price',
-        title: '交易金额',
-        minWidth: 120,
-        formatter: 'formatFenToYuanAmount',
-      },
-      {
-        field: 'balance',
-        title: '钱包余额',
-        minWidth: 120,
-        formatter: 'formatFenToYuanAmount',
-      },
-      {
-        field: 'createTime',
-        title: '交易时间',
-        minWidth: 180,
-        formatter: 'formatDateTime',
-      },
-    ],
+    columns: useTransactionGridColumns(),
     keepSource: true,
     proxyConfig: {
       ajax: {
diff --git a/apps/web-antd/src/views/member/user/detail/modules/basic-info.vue b/apps/web-antd/src/views/member/user/detail/modules/basic-info.vue
index e19dd298f..c3a8b4294 100644
--- a/apps/web-antd/src/views/member/user/detail/modules/basic-info.vue
+++ b/apps/web-antd/src/views/member/user/detail/modules/basic-info.vue
@@ -11,7 +11,7 @@ import { Avatar, Card, Col, Row } from 'ant-design-vue';
 import { useDescription } from '#/components/description';
 import { DictTag } from '#/components/dict-tag';
 
-withDefaults(
+const props = withDefaults(
   defineProps<{ mode?: 'kefu' | 'member'; user: MemberUserApi.User }>(),
   {
     mode: 'member',
@@ -19,6 +19,8 @@ withDefaults(
 );
 
 const [Descriptions] = useDescription({
+  bordered: false,
+  column: props.mode === 'member' ? 2 : 1,
   schema: [
     {
       field: 'name',
@@ -35,10 +37,10 @@ const [Descriptions] = useDescription({
     {
       field: 'sex',
       label: '性别',
-      content: (data) =>
+      render: (val) =>
         h(DictTag, {
           type: DICT_TYPE.SYSTEM_USER_SEX,
-          value: data.sex,
+          value: val,
         }),
     },
     {
@@ -52,17 +54,17 @@ const [Descriptions] = useDescription({
     {
       field: 'birthday',
       label: '生日',
-      content: (data) => formatDate(data.birthday)?.toString() || '-',
+      render: (val) => formatDate(val)?.toString() || '-',
     },
     {
       field: 'createTime',
       label: '注册时间',
-      content: (data) => formatDate(data.createTime)?.toString() || '-',
+      render: (val) => formatDate(val)?.toString() || '-',
     },
     {
       field: 'loginDate',
       label: '最后登录时间',
-      content: (data) => formatDate(data.loginDate)?.toString() || '-',
+      render: (val) => formatDate(val)?.toString() || '-',
     },
   ],
 });
diff --git a/apps/web-antd/src/views/member/user/detail/modules/brokerage-list.vue b/apps/web-antd/src/views/member/user/detail/modules/brokerage-list.vue
new file mode 100644
index 000000000..5adb98f20
--- /dev/null
+++ b/apps/web-antd/src/views/member/user/detail/modules/brokerage-list.vue
@@ -0,0 +1,125 @@
+<script setup lang="ts">
+import type {
+  VxeGridPropTypes,
+  VxeTableGridOptions,
+} from '#/adapter/vxe-table';
+import type { MallBrokerageUserApi } from '#/api/mall/trade/brokerage/user';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getBrokerageUserPage } from '#/api/mall/trade/brokerage/user';
+import { getRangePickerDefaultProps } from '#/utils';
+
+defineOptions({ name: 'BrokerageList' });
+
+const props = defineProps<{
+  userId: number;
+}>();
+
+const formSchema = (): any[] => {
+  return [
+    {
+      fieldName: 'level',
+      label: '用户类型',
+      component: 'Select',
+      componentProps: {
+        options: [
+          {
+            label: '全部',
+            value: 0,
+          },
+          {
+            label: '一级',
+            value: 1,
+          },
+          {
+            label: '二级',
+            value: 2,
+          },
+        ],
+        placeholder: '请选择用户类型',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'bindUserTime',
+      label: '绑定时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        clearable: true,
+      },
+    },
+  ];
+};
+
+const columns = (): VxeGridPropTypes.Columns => {
+  return [
+    {
+      field: 'id',
+      title: '用户编号',
+    },
+    {
+      field: 'avatar',
+      title: '头像',
+      cellRender: {
+        name: 'CellImage',
+        props: {
+          height: 40,
+          width: 40,
+          shape: 'circle',
+        },
+      },
+    },
+    {
+      field: 'nickname',
+      title: '昵称',
+    },
+    {
+      field: 'level',
+      title: '等级',
+      formatter: (row: any) => {
+        return row.level === 1 ? '一级' : '二级';
+      },
+    },
+    {
+      field: 'bindUserTime',
+      title: '绑定时间',
+      formatter: 'formatDateTime',
+    },
+  ];
+};
+
+const [Grid] = useVbenVxeGrid({
+  formOptions: {
+    schema: formSchema(),
+  },
+  gridOptions: {
+    columns: columns(),
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getBrokerageUserPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            bindUserId: props.userId,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MallBrokerageUserApi.BrokerageUser>,
+});
+</script>
+
+<template>
+  <Grid />
+</template>
diff --git a/apps/web-antd/src/views/member/user/detail/modules/coupon-list.vue b/apps/web-antd/src/views/member/user/detail/modules/coupon-list.vue
new file mode 100644
index 000000000..5d64482fa
--- /dev/null
+++ b/apps/web-antd/src/views/member/user/detail/modules/coupon-list.vue
@@ -0,0 +1,148 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MallCouponApi } from '#/api/mall/promotion/coupon/coupon';
+
+import { ref } from 'vue';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { message, TabPane, Tabs } from 'ant-design-vue';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteCoupon,
+  getCouponPage,
+} from '#/api/mall/promotion/coupon/coupon';
+import {
+  useGridColumns as useCouponGridColumns,
+  useGridFormSchema as useCouponGridFormSchema,
+} from '#/views/mall/promotion/coupon/data';
+
+const props = defineProps<{
+  userId: number;
+}>();
+
+const activeTab = ref('all');
+const statusTabs = ref(getStatusTabs());
+
+/** 列表的搜索表单（过滤掉会员相关字段） */
+function useGridFormSchema() {
+  const excludeFields = new Set(['nickname']);
+  return useCouponGridFormSchema().filter(
+    (item) => !excludeFields.has(item.fieldName),
+  );
+}
+
+/** 列表的字段（过滤掉会员相关字段） */
+function useGridColumns() {
+  const excludeFields = new Set(['nickname']);
+  return useCouponGridColumns()?.filter(
+    (item) => item.field && !excludeFields.has(item.field),
+  );
+}
+
+/** 获取状态选项卡配置 */
+function getStatusTabs() {
+  const tabs = [
+    {
+      label: '全部',
+      value: 'all',
+    },
+  ];
+  const statusOptions = getDictOptions(DICT_TYPE.PROMOTION_COUPON_STATUS);
+  for (const option of statusOptions) {
+    tabs.push({
+      label: option.label,
+      value: String(option.value),
+    });
+  }
+  return tabs;
+}
+
+/** Tab 切换 */
+function handleTabChange(tabName: any) {
+  activeTab.value = tabName;
+  gridApi.query();
+}
+
+/** 删除优惠券 */
+async function handleDelete(row: MallCouponApi.Coupon) {
+  const hideLoading = message.loading({
+    content: '回收中...',
+    duration: 0,
+  });
+  try {
+    await deleteCoupon(row.id!);
+    message.success('回收成功');
+    await gridApi.query();
+  } finally {
+    hideLoading();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    keepSource: true,
+    pagerConfig: {
+      pageSize: 10,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          const params = {
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            userId: props.userId,
+            ...formValues,
+            // Tab状态过滤
+            status:
+              activeTab.value === 'all' ? undefined : Number(activeTab.value),
+          };
+          return await getCouponPage(params);
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MallCouponApi.Coupon>,
+});
+</script>
+
+<template>
+  <Grid>
+    <template #toolbar-actions>
+      <Tabs class="w-full" @change="handleTabChange">
+        <TabPane v-for="tab in statusTabs" :key="tab.value" :tab="tab.label" />
+      </Tabs>
+    </template>
+    <template #actions="{ row }">
+      <TableAction
+        :actions="[
+          {
+            label: '回收',
+            type: 'link',
+            danger: true,
+            icon: ACTION_ICON.DELETE,
+            auth: ['promotion:coupon:delete'],
+            popConfirm: {
+              title:
+                '回收将会收回会员领取的待使用的优惠券，已使用的将无法回收，确定要回收所选优惠券吗？',
+              confirm: handleDelete.bind(null, row),
+            },
+          },
+        ]"
+      />
+    </template>
+  </Grid>
+</template>
diff --git a/apps/web-antd/src/views/member/user/detail/modules/experience-record-list.vue b/apps/web-antd/src/views/member/user/detail/modules/experience-record-list.vue
index 9c9674266..770bdef76 100644
--- a/apps/web-antd/src/views/member/user/detail/modules/experience-record-list.vue
+++ b/apps/web-antd/src/views/member/user/detail/modules/experience-record-list.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeGridProps, VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { MemberExperienceRecordApi } from '#/api/member/experience-record';
 
 import { h } from 'vue';
@@ -17,103 +18,109 @@ const props = defineProps<{
   userId: number;
 }>();
 
+/** 表单搜索 schema */
+function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'bizType',
+      label: '业务类型',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.MEMBER_EXPERIENCE_BIZ_TYPE, 'number'),
+        placeholder: '请选择业务类型',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'title',
+      label: '标题',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入标题',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'createDate',
+      label: '获得时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 表格列配置 */
+function useGridColumns(): VxeGridProps['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '编号',
+      minWidth: 100,
+    },
+    {
+      field: 'createTime',
+      title: '获得时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'experience',
+      title: '经验',
+      minWidth: 100,
+      slots: {
+        default: ({ row }) => {
+          return h(
+            Tag,
+            {
+              class: 'mr-1',
+              color: row.experience > 0 ? 'blue' : 'red',
+            },
+            () => (row.experience > 0 ? `+${row.experience}` : row.experience),
+          );
+        },
+      },
+    },
+    {
+      field: 'totalExperience',
+      title: '总经验',
+      minWidth: 100,
+    },
+    {
+      field: 'title',
+      title: '标题',
+      minWidth: 200,
+    },
+    {
+      field: 'description',
+      title: '描述',
+      minWidth: 250,
+    },
+    {
+      field: 'bizId',
+      title: '业务编号',
+      minWidth: 120,
+    },
+    {
+      field: 'bizType',
+      title: '业务类型',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.MEMBER_EXPERIENCE_BIZ_TYPE },
+      },
+    },
+  ];
+}
+
 const [Grid] = useVbenVxeGrid({
   formOptions: {
-    schema: [
-      {
-        fieldName: 'bizType',
-        label: '业务类型',
-        component: 'Select',
-        componentProps: {
-          options: getDictOptions(
-            DICT_TYPE.MEMBER_EXPERIENCE_BIZ_TYPE,
-            'number',
-          ),
-          placeholder: '请选择业务类型',
-          allowClear: true,
-        },
-      },
-      {
-        fieldName: 'title',
-        label: '标题',
-        component: 'Input',
-        componentProps: {
-          placeholder: '请输入标题',
-          allowClear: true,
-        },
-      },
-      {
-        fieldName: 'createDate',
-        label: '获得时间',
-        component: 'RangePicker',
-        componentProps: {
-          ...getRangePickerDefaultProps(),
-          allowClear: true,
-        },
-      },
-    ],
+    schema: useGridFormSchema(),
   },
   gridOptions: {
-    columns: [
-      {
-        field: 'id',
-        title: '编号',
-        minWidth: 100,
-      },
-      {
-        field: 'createTime',
-        title: '获得时间',
-        minWidth: 180,
-        formatter: 'formatDateTime',
-      },
-      {
-        field: 'experience',
-        title: '经验',
-        minWidth: 100,
-        slots: {
-          default: ({ row }) => {
-            return h(
-              Tag,
-              {
-                class: 'mr-1',
-                color: row.experience > 0 ? 'blue' : 'red',
-              },
-              () =>
-                row.experience > 0 ? `+${row.experience}` : row.experience,
-            );
-          },
-        },
-      },
-      {
-        field: 'totalExperience',
-        title: '总经验',
-        minWidth: 100,
-      },
-      {
-        field: 'title',
-        title: '标题',
-        minWidth: 200,
-      },
-      {
-        field: 'description',
-        title: '描述',
-        minWidth: 250,
-      },
-      {
-        field: 'bizId',
-        title: '业务编号',
-        minWidth: 120,
-      },
-      {
-        field: 'bizType',
-        title: '业务类型',
-        minWidth: 120,
-        cellRender: {
-          name: 'CellDict',
-          props: { type: DICT_TYPE.MEMBER_EXPERIENCE_BIZ_TYPE },
-        },
-      },
-    ],
+    columns: useGridColumns(),
     keepSource: true,
     proxyConfig: {
       ajax: {
@@ -136,7 +143,6 @@ const [Grid] = useVbenVxeGrid({
       search: true,
     },
   } as VxeTableGridOptions<MemberExperienceRecordApi.ExperienceRecord>,
-  separator: false,
 });
 </script>
 
diff --git a/apps/web-ele/src/views/member/user/detail/modules/user-favorite-list.vue b/apps/web-antd/src/views/member/user/detail/modules/favorite-list.vue
similarity index 53%
rename from apps/web-ele/src/views/member/user/detail/modules/user-favorite-list.vue
rename to apps/web-antd/src/views/member/user/detail/modules/favorite-list.vue
index 2c12a7ca7..f91a2c3e0 100644
--- a/apps/web-ele/src/views/member/user/detail/modules/user-favorite-list.vue
+++ b/apps/web-antd/src/views/member/user/detail/modules/favorite-list.vue
@@ -11,59 +11,64 @@ const props = defineProps<{
   userId: number;
 }>();
 
+const columns = [
+  {
+    field: 'id',
+    title: '商品编号',
+    minWidth: 100,
+  },
+  {
+    field: 'picUrl',
+    title: '商品图',
+    minWidth: 100,
+    cellRender: {
+      name: 'CellImage',
+      props: {
+        width: 24,
+        height: 24,
+      },
+    },
+  },
+  {
+    field: 'name',
+    title: '商品名称',
+    minWidth: 200,
+  },
+  {
+    field: 'price',
+    title: '商品售价',
+    formatter: 'formatAmount2',
+    minWidth: 120,
+  },
+  {
+    field: 'salesCount',
+    title: '销量',
+    minWidth: 100,
+  },
+  {
+    field: 'createTime',
+    title: '收藏时间',
+    formatter: 'formatDateTime',
+    minWidth: 160,
+  },
+  {
+    field: 'status',
+    title: '状态',
+    minWidth: 100,
+    cellRender: {
+      name: 'CellDict',
+      props: { type: DICT_TYPE.PRODUCT_SPU_STATUS },
+    },
+  },
+];
+
 const [Grid] = useVbenVxeGrid({
   gridOptions: {
-    columns: [
-      {
-        field: 'id',
-        title: '商品编号',
-      },
-      {
-        field: 'picUrl',
-        title: '商品图',
-        cellRender: {
-          name: 'CellImage',
-          props: {
-            height: 40,
-            width: 40,
-          },
-        },
-      },
-      {
-        field: 'name',
-        title: '商品名称',
-      },
-      {
-        field: 'price',
-        title: '商品售价',
-      },
-      {
-        field: 'salesCount',
-        title: '销量',
-      },
-      {
-        field: 'createTime',
-        title: '收藏时间',
-        formatter: 'formatDateTime',
-      },
-      {
-        field: 'status',
-        title: '状态',
-        cellRender: {
-          name: 'CellDict',
-          props: { type: DICT_TYPE.PRODUCT_SPU_STATUS },
-        },
-      },
-    ],
+    columns,
     keepSource: true,
     pagerConfig: {
       pageSize: 10,
     },
-    expandConfig: {
-      trigger: 'row',
-      expandAll: true,
-      padding: true,
-    },
     proxyConfig: {
       ajax: {
         query: async ({ page }, formValues) => {
@@ -78,13 +83,13 @@ const [Grid] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<MallFavoriteApi.Favorite>,
-  separator: false,
 });
 </script>
 
diff --git a/apps/web-antd/src/views/member/user/detail/modules/order-list.vue b/apps/web-antd/src/views/member/user/detail/modules/order-list.vue
new file mode 100644
index 000000000..23b5e1b30
--- /dev/null
+++ b/apps/web-antd/src/views/member/user/detail/modules/order-list.vue
@@ -0,0 +1,128 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MallOrderApi } from '#/api/mall/trade/order';
+
+import { useRouter } from 'vue-router';
+
+import { DICT_TYPE } from '@vben/constants';
+import { fenToYuan } from '@vben/utils';
+
+import { Image, List, Tag } from 'ant-design-vue';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getOrderPage } from '#/api/mall/trade/order';
+import { DictTag } from '#/components/dict-tag';
+import { $t } from '#/locales';
+import {
+  useGridColumns,
+  useGridFormSchema as useOrderGridFormSchema,
+} from '#/views/mall/trade/order/data';
+
+const props = defineProps<{
+  userId: number;
+}>();
+
+const { push } = useRouter();
+
+/** 列表的搜索表单（过滤掉用户相关字段） */
+function useGridFormSchema() {
+  const excludeFields = new Set(['userId', 'userNickname']);
+  return useOrderGridFormSchema().filter(
+    (item) => !excludeFields.has(item.fieldName),
+  );
+}
+
+/** 详情 */
+function handleDetail(row: MallOrderApi.Order) {
+  push({ name: 'TradeOrderDetail', params: { id: row.id } });
+}
+
+const [Grid] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    expandConfig: {
+      trigger: 'row',
+      expandAll: true,
+      padding: true,
+    },
+    columns: useGridColumns(),
+    keepSource: true,
+    pagerConfig: {
+      pageSize: 10,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getOrderPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            userId: props.userId,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MallOrderApi.Order>,
+});
+</script>
+
+<template>
+  <Grid table-title="订单列表">
+    <template #expand_content="{ row }">
+      <List item-layout="vertical" :data-source="row.items">
+        <template #renderItem="{ item }">
+          <List.Item>
+            <List.Item.Meta>
+              <template #title>
+                {{ item.spuName }}
+                <Tag
+                  color="blue"
+                  v-for="property in item.properties"
+                  :key="property.propertyId"
+                >
+                  {{ property.propertyName }} : {{ property.valueName }}
+                </Tag>
+              </template>
+              <template #avatar>
+                <Image :src="item.picUrl" :width="40" :height="40" />
+              </template>
+              <template #description>
+                {{
+                  `原价：${fenToYuan(item.price)} 元 / 数量：${item.count} 个`
+                }}
+                |
+                <DictTag
+                  :type="DICT_TYPE.TRADE_ORDER_ITEM_AFTER_SALE_STATUS"
+                  :value="item.afterSaleStatus"
+                />
+              </template>
+            </List.Item.Meta>
+          </List.Item>
+        </template>
+      </List>
+    </template>
+    <template #actions="{ row }">
+      <TableAction
+        :actions="[
+          {
+            label: $t('common.detail'),
+            type: 'link',
+            icon: ACTION_ICON.VIEW,
+            auth: ['trade:order:query'],
+            onClick: handleDetail.bind(null, row),
+          },
+        ]"
+      />
+    </template>
+  </Grid>
+</template>
diff --git a/apps/web-antd/src/views/member/user/detail/modules/point-list.vue b/apps/web-antd/src/views/member/user/detail/modules/point-list.vue
index 77e698eb9..40ef48271 100644
--- a/apps/web-antd/src/views/member/user/detail/modules/point-list.vue
+++ b/apps/web-antd/src/views/member/user/detail/modules/point-list.vue
@@ -2,54 +2,43 @@
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { MemberPointRecordApi } from '#/api/member/point/record';
 
-import { DICT_TYPE } from '@vben/constants';
-import { getDictOptions } from '@vben/hooks';
-
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getRecordPage } from '#/api/member/point/record';
-import { getRangePickerDefaultProps } from '#/utils';
-import { useGridColumns } from '#/views/member/point/record/data';
+import {
+  useGridColumns as usePointGridColumns,
+  useGridFormSchema as usePointGridFormSchema,
+} from '#/views/member/point/record/data';
 
 const props = defineProps<{
   userId: number;
 }>();
 
+/** 列表的搜索表单（过滤掉用户相关字段） */
+function useGridFormSchema() {
+  const excludeFields = new Set(['nickname']);
+  return usePointGridFormSchema().filter(
+    (item) => !excludeFields.has(item.fieldName),
+  );
+}
+
+/** 列表的字段（过滤掉用户相关字段） */
+function useGridColumns() {
+  const excludeFields = new Set(['nickname']);
+  return usePointGridColumns()?.filter(
+    (item) => item.field && !excludeFields.has(item.field),
+  );
+}
+
 const [Grid] = useVbenVxeGrid({
   formOptions: {
-    schema: [
-      {
-        fieldName: 'bizType',
-        label: '业务类型',
-        component: 'Select',
-        componentProps: {
-          options: getDictOptions(DICT_TYPE.MEMBER_POINT_BIZ_TYPE, 'number'),
-          placeholder: '请选择业务类型',
-          allowClear: true,
-        },
-      },
-      {
-        fieldName: 'title',
-        label: '积分标题',
-        component: 'Input',
-        componentProps: {
-          placeholder: '请输入积分标题',
-          allowClear: true,
-        },
-      },
-      {
-        fieldName: 'createDate',
-        label: '获得时间',
-        component: 'RangePicker',
-        componentProps: {
-          ...getRangePickerDefaultProps(),
-          allowClear: true,
-        },
-      },
-    ],
+    schema: useGridFormSchema(),
   },
   gridOptions: {
     columns: useGridColumns(),
     keepSource: true,
+    pagerConfig: {
+      pageSize: 10,
+    },
     proxyConfig: {
       ajax: {
         query: async ({ page }, formValues) => {
@@ -71,7 +60,6 @@ const [Grid] = useVbenVxeGrid({
       search: true,
     },
   } as VxeTableGridOptions<MemberPointRecordApi.Record>,
-  separator: false,
 });
 </script>
 
diff --git a/apps/web-antd/src/views/member/user/detail/modules/sign-list.vue b/apps/web-antd/src/views/member/user/detail/modules/sign-list.vue
index 5b46aa29c..afede6537 100644
--- a/apps/web-antd/src/views/member/user/detail/modules/sign-list.vue
+++ b/apps/web-antd/src/views/member/user/detail/modules/sign-list.vue
@@ -4,35 +4,34 @@ import type { MemberSignInRecordApi } from '#/api/member/signin/record';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getSignInRecordPage } from '#/api/member/signin/record';
-import { getRangePickerDefaultProps } from '#/utils';
-import { useGridColumns } from '#/views/member/signin/record/data';
+import {
+  useGridColumns as useSignInGridColumns,
+  useGridFormSchema as useSignInGridFormSchema,
+} from '#/views/member/signin/record/data';
 
 const props = defineProps<{
   userId: number;
 }>();
 
+/** 列表的搜索表单（过滤掉用户相关字段） */
+function useGridFormSchema() {
+  const excludeFields = new Set(['nickname']);
+  return useSignInGridFormSchema().filter(
+    (item) => !excludeFields.has(item.fieldName),
+  );
+}
+
+/** 列表的字段（过滤掉用户相关字段） */
+function useGridColumns() {
+  const excludeFields = new Set(['nickname']);
+  return useSignInGridColumns()?.filter(
+    (item) => item.field && !excludeFields.has(item.field),
+  );
+}
+
 const [Grid] = useVbenVxeGrid({
   formOptions: {
-    schema: [
-      {
-        fieldName: 'day',
-        label: '签到天数',
-        component: 'Input',
-        componentProps: {
-          placeholder: '请输入签到天数',
-          allowClear: true,
-        },
-      },
-      {
-        fieldName: 'createTime',
-        label: '签到时间',
-        component: 'RangePicker',
-        componentProps: {
-          ...getRangePickerDefaultProps(),
-          allowClear: true,
-        },
-      },
-    ],
+    schema: useGridFormSchema(),
   },
   gridOptions: {
     columns: useGridColumns(),
@@ -58,7 +57,6 @@ const [Grid] = useVbenVxeGrid({
       search: true,
     },
   } as VxeTableGridOptions<MemberSignInRecordApi.SignInRecord>,
-  separator: false,
 });
 </script>
 
diff --git a/apps/web-ele/src/api/mall/promotion/combination/combinationActivity.ts b/apps/web-ele/src/api/mall/promotion/combination/combinationActivity.ts
index 486f05aa6..f8123eb70 100644
--- a/apps/web-ele/src/api/mall/promotion/combination/combinationActivity.ts
+++ b/apps/web-ele/src/api/mall/promotion/combination/combinationActivity.ts
@@ -50,6 +50,10 @@ export namespace MallCombinationActivityApi {
     products: CombinationProduct[];
     /** 图片 */
     picUrl?: string;
+    /** 商品名称 */
+    spuName?: string;
+    /** 市场价 */
+    marketPrice?: number;
   }
 
   /** 扩展 SKU 配置 */
diff --git a/apps/web-ele/src/api/mall/promotion/seckill/seckillActivity.ts b/apps/web-ele/src/api/mall/promotion/seckill/seckillActivity.ts
index 9a7e121dd..58bd2a62a 100644
--- a/apps/web-ele/src/api/mall/promotion/seckill/seckillActivity.ts
+++ b/apps/web-ele/src/api/mall/promotion/seckill/seckillActivity.ts
@@ -57,6 +57,10 @@ export namespace MallSeckillActivityApi {
     products?: SeckillProduct[];
     /** 图片 */
     picUrl?: string;
+    /** 商品名称 */
+    spuName?: string;
+    /** 市场价 */
+    marketPrice?: number;
   }
 
   /** 扩展 SKU 配置 */
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/product/spu/components/spu-table-select.vue b/apps/web-ele/src/views/mall/product/spu/components/spu-table-select.vue
index 84a5b44c4..e97de6b6c 100644
--- a/apps/web-ele/src/views/mall/product/spu/components/spu-table-select.vue
+++ b/apps/web-ele/src/views/mall/product/spu/components/spu-table-select.vue
@@ -163,8 +163,8 @@ const [Modal, modalApi] = useVbenModal({
   },
   async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
-      gridApi.grid.clearCheckboxRow();
-      gridApi.grid.clearRadioRow();
+      await gridApi.grid.clearCheckboxRow();
+      await gridApi.grid.clearRadioRow();
       return;
     }
 
diff --git a/apps/web-ele/src/views/mall/promotion/combination/components/combination-showcase.vue b/apps/web-ele/src/views/mall/promotion/combination/components/combination-showcase.vue
deleted file mode 100644
index 2a3d74e1d..000000000
--- a/apps/web-ele/src/views/mall/promotion/combination/components/combination-showcase.vue
+++ /dev/null
@@ -1,177 +0,0 @@
-<script lang="ts" setup>
-import type { MallCombinationActivityApi } from '#/api/mall/promotion/combination/combinationActivity';
-
-import { computed, ref, watch } from 'vue';
-
-import { IconifyIcon } from '@vben/icons';
-
-import * as CombinationActivityApi from '#/api/mall/promotion/combination/combinationActivity';
-import CombinationTableSelect from '#/views/mall/promotion/combination/components/combination-table-select.vue';
-
-// 活动橱窗，一般用于装修时使用
-// 提供功能：展示活动列表、添加活动、删除活动
-defineOptions({ name: 'CombinationShowcase' });
-
-const props = defineProps({
-  modelValue: {
-    type: [Array, Number],
-    default: () => [],
-  },
-  // 限制数量：默认不限制
-  limit: {
-    type: Number,
-    default: Number.MAX_VALUE,
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-const emit = defineEmits(['update:modelValue', 'change']);
-
-// 计算是否可以添加
-const canAdd = computed(() => {
-  // 情况一：禁用时不可以添加
-  if (props.disabled) return false;
-  // 情况二：未指定限制数量时，可以添加
-  if (!props.limit) return true;
-  // 情况三：检查已添加数量是否小于限制数量
-  return Activitys.value.length < props.limit;
-});
-
-// 拼团活动列表
-const Activitys = ref<MallCombinationActivityApi.CombinationActivity[]>([]);
-
-watch(
-  () => props.modelValue,
-  async () => {
-    let ids;
-    if (Array.isArray(props.modelValue)) {
-      ids = props.modelValue;
-    } else {
-      ids = props.modelValue ? [props.modelValue] : [];
-    }
-
-    // 不需要返显
-    if (ids.length === 0) {
-      Activitys.value = [];
-      return;
-    }
-    // 只有活动发生变化之后，才会查询活动
-    if (
-      Activitys.value.length === 0 ||
-      Activitys.value.some(
-        (combinationActivity) => !ids.includes(combinationActivity.id!),
-      )
-    ) {
-      Activitys.value =
-        await CombinationActivityApi.getCombinationActivityListByIds(
-          ids as number[],
-        );
-    }
-  },
-  { immediate: true },
-);
-
-/** 活动表格选择对话框 */
-const combinationActivityTableSelectRef = ref();
-// 打开对话框
-const openCombinationActivityTableSelect = () => {
-  combinationActivityTableSelectRef.value.open(Activitys.value);
-};
-
-/**
- * 选择活动后触发
- * @param activityVOs 选中的活动列表
- */
-const handleActivitySelected = (
-  activityVOs:
-    | MallCombinationActivityApi.CombinationActivity
-    | MallCombinationActivityApi.CombinationActivity[],
-) => {
-  Activitys.value = Array.isArray(activityVOs) ? activityVOs : [activityVOs];
-  emitActivityChange();
-};
-
-/**
- * 删除活动
- * @param index 活动索引
- */
-const handleRemoveActivity = (index: number) => {
-  Activitys.value.splice(index, 1);
-  emitActivityChange();
-};
-const emitActivityChange = () => {
-  if (props.limit === 1) {
-    const combinationActivity =
-      Activitys.value.length > 0 ? Activitys.value[0] : null;
-    emit('update:modelValue', combinationActivity?.id || 0);
-    emit('change', combinationActivity);
-  } else {
-    emit(
-      'update:modelValue',
-      Activitys.value.map((combinationActivity) => combinationActivity.id),
-    );
-    emit('change', Activitys.value);
-  }
-};
-</script>
-<template>
-  <div class="gap-8px flex flex-wrap items-center">
-    <div
-      v-for="(combinationActivity, index) in Activitys"
-      :key="combinationActivity.id"
-      class="select-box spu-pic"
-    >
-      <el-tooltip :content="combinationActivity.name">
-        <div class="relative h-full w-full">
-          <el-image :src="combinationActivity.picUrl" class="h-full w-full" />
-          <IconifyIcon
-            v-show="!disabled"
-            class="del-icon"
-            icon="ep:circle-close-filled"
-            @click="handleRemoveActivity(index)"
-          />
-        </div>
-      </el-tooltip>
-    </div>
-    <el-tooltip content="选择活动" v-if="canAdd">
-      <div class="select-box" @click="openCombinationActivityTableSelect">
-        <IconifyIcon icon="ep:plus" />
-      </div>
-    </el-tooltip>
-  </div>
-  <!-- 拼团活动选择对话框（表格形式） -->
-  <CombinationTableSelect
-    ref="combinationActivityTableSelectRef"
-    :multiple="limit !== 1"
-    @change="handleActivitySelected"
-  />
-</template>
-
-<style lang="scss" scoped>
-.select-box {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 60px;
-  height: 60px;
-  cursor: pointer;
-  border: 1px dashed var(--el-border-color-darker);
-  border-radius: 8px;
-}
-
-.spu-pic {
-  position: relative;
-}
-
-.del-icon {
-  position: absolute;
-  top: -10px;
-  right: -10px;
-  z-index: 1;
-  width: 20px !important;
-  height: 20px !important;
-}
-</style>
diff --git a/apps/web-ele/src/views/mall/promotion/combination/components/combination-table-select.vue b/apps/web-ele/src/views/mall/promotion/combination/components/combination-table-select.vue
deleted file mode 100644
index fde43f2ec..000000000
--- a/apps/web-ele/src/views/mall/promotion/combination/components/combination-table-select.vue
+++ /dev/null
@@ -1,395 +0,0 @@
-<script lang="ts" setup>
-import type { MallCombinationActivityApi } from '#/api/mall/promotion/combination/combinationActivity';
-
-import { onMounted, ref } from 'vue';
-
-import { ContentWrap } from '@vben/common-ui';
-import { DICT_TYPE } from '@vben/constants';
-import { getDictOptions } from '@vben/hooks';
-import { IconifyIcon } from '@vben/icons';
-import {
-  dateFormatter,
-  fenToYuan,
-  fenToYuanFormat,
-  formatDate,
-  handleTree,
-} from '@vben/utils';
-
-import { CHANGE_EVENT } from 'element-plus';
-
-import * as ProductCategoryApi from '#/api/mall/product/category';
-import * as CombinationActivityApi from '#/api/mall/promotion/combination/combinationActivity';
-
-/**
- * 活动表格选择对话框
- * 1. 单选模式：
- *    1.1 点击表格左侧的单选框时，结束选择，并关闭对话框
- *    1.2 再次打开时，保持选中状态
- * 2. 多选模式：
- *    2.1 点击表格左侧的多选框时，记录选中的活动
- *    2.2 切换分页时，保持活动的选中状态
- *    2.3 点击右下角的确定按钮时，结束选择，关闭对话框
- *    2.4 再次打开时，保持选中状态
- */
-defineOptions({ name: 'CombinationTableSelect' });
-
-defineProps({
-  // 多选模式
-  multiple: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-/** 确认选择时的触发事件 */
-const emits = defineEmits<{
-  change: [
-    CombinationActivityApi:
-      | any
-      | MallCombinationActivityApi.CombinationActivity
-      | MallCombinationActivityApi.CombinationActivity[],
-  ];
-}>();
-// 列表的总页数
-const total = ref(0);
-// 列表的数据
-const list = ref<MallCombinationActivityApi.CombinationActivity[]>([]);
-// 列表的加载中
-const loading = ref(false);
-// 弹窗的是否展示
-const dialogVisible = ref(false);
-// 查询参数
-const queryParams = ref({
-  pageNo: 1,
-  pageSize: 10,
-  name: undefined,
-  status: undefined,
-});
-
-/** 打开弹窗 */
-const open = (
-  CombinationList?: MallCombinationActivityApi.CombinationActivity[],
-) => {
-  // 重置
-  checkedActivitys.value = [];
-  checkedStatus.value = {};
-  isCheckAll.value = false;
-  isIndeterminate.value = false;
-
-  // 处理已选中
-  if (CombinationList && CombinationList.length > 0) {
-    checkedActivitys.value = [...CombinationList];
-    checkedStatus.value = Object.fromEntries(
-      CombinationList.map((activityVO) => [activityVO.id, true]),
-    );
-  }
-
-  dialogVisible.value = true;
-  resetQuery();
-};
-// 提供 open 方法，用于打开弹窗
-defineExpose({ open });
-
-/** 查询列表 */
-const getList = async () => {
-  loading.value = true;
-  try {
-    const data = await CombinationActivityApi.getCombinationActivityPage(
-      queryParams.value,
-    );
-    list.value = data.list;
-    total.value = data.total;
-    // checkbox绑定undefined会有问题，需要给一个bool值
-    list.value.forEach(
-      (activityVO) =>
-        (checkedStatus.value[activityVO.id || ''] =
-          checkedStatus.value[activityVO.id || ''] || false),
-    );
-    // 计算全选框状态
-    calculateIsCheckAll();
-  } finally {
-    loading.value = false;
-  }
-};
-
-/** 搜索按钮操作 */
-const handleQuery = () => {
-  queryParams.value.pageNo = 1;
-  getList();
-};
-
-/** 重置按钮操作 */
-const resetQuery = () => {
-  queryParams.value = {
-    pageNo: 1,
-    pageSize: 10,
-    name: undefined,
-    status: undefined,
-  };
-  getList();
-};
-
-/**
- * 格式化拼团价格
- * @param products
- */
-const formatCombinationPrice = (
-  products: MallCombinationActivityApi.CombinationActivity[],
-) => {
-  const combinationPrice = Math.min(
-    ...products.map((item) => item.combinationPrice || 0),
-  );
-  return `￥${fenToYuan(combinationPrice)}`;
-};
-
-// 是否全选
-const isCheckAll = ref(false);
-// 全选框是否处于中间状态：不是全部选中 && 任意一个选中
-const isIndeterminate = ref(false);
-// 选中的活动
-const checkedActivitys = ref<MallCombinationActivityApi.CombinationActivity[]>(
-  [],
-);
-// 选中状态：key为活动ID，value为是否选中
-const checkedStatus = ref<Record<string, boolean>>({});
-
-// 选中的活动 activityId
-const selectedActivityId = ref();
-/** 单选中时触发 */
-const handleSingleSelected = (
-  combinationActivityVO: MallCombinationActivityApi.CombinationActivity,
-) => {
-  emits(CHANGE_EVENT, combinationActivityVO);
-  // 关闭弹窗
-  dialogVisible.value = false;
-  // 记住上次选择的ID
-  selectedActivityId.value = combinationActivityVO.id;
-};
-
-/** 多选完成 */
-const handleEmitChange = () => {
-  // 关闭弹窗
-  dialogVisible.value = false;
-  emits(CHANGE_EVENT, [...checkedActivitys.value]);
-};
-
-/** 全选/全不选 */
-const handleCheckAll = (checked: boolean) => {
-  isCheckAll.value = checked;
-  isIndeterminate.value = false;
-
-  list.value.forEach((combinationActivity) =>
-    handleCheckOne(checked, combinationActivity, false),
-  );
-};
-
-/**
- * 选中一行
- * @param checked 是否选中
- * @param combinationActivity 活动
- * @param isCalcCheckAll 是否计算全选
- */
-const handleCheckOne = (
-  checked: boolean,
-  combinationActivity: MallCombinationActivityApi.CombinationActivity,
-  isCalcCheckAll: boolean,
-) => {
-  if (checked) {
-    checkedActivitys.value.push(combinationActivity);
-    checkedStatus.value[combinationActivity.id || ''] = true;
-  } else {
-    const index = findCheckedIndex(combinationActivity);
-    if (index > -1) {
-      checkedActivitys.value.splice(index, 1);
-      checkedStatus.value[combinationActivity.id || ''] = false;
-      isCheckAll.value = false;
-    }
-  }
-
-  // 计算全选框状态
-  if (isCalcCheckAll) {
-    calculateIsCheckAll();
-  }
-};
-
-// 查找活动在已选中活动列表中的索引
-const findCheckedIndex = (
-  activityVO: MallCombinationActivityApi.CombinationActivity,
-) => checkedActivitys.value.findIndex((item) => item.id === activityVO.id);
-
-// 计算全选框状态
-const calculateIsCheckAll = () => {
-  isCheckAll.value = list.value.every(
-    (activityVO) => checkedStatus.value[activityVO.id || ''],
-  );
-  // 计算中间状态：不是全部选中 && 任意一个选中
-  isIndeterminate.value =
-    !isCheckAll.value &&
-    list.value.some((activityVO) => checkedStatus.value[activityVO.id || '']);
-};
-
-// 分类列表
-const categoryList = ref();
-// 分类树
-const categoryTreeList = ref();
-/** 初始化 */
-onMounted(async () => {
-  await getList();
-  // 获得分类树
-  categoryList.value = await ProductCategoryApi.getCategoryList({});
-  categoryTreeList.value = handleTree(categoryList.value, 'id', 'parentId');
-});
-</script>
-
-<template>
-  <Dialog
-    v-model="dialogVisible"
-    :append-to-body="true"
-    title="选择活动"
-    width="70%"
-  >
-    <ContentWrap>
-      <!-- 搜索工作栏 -->
-      <el-form
-        :inline="true"
-        :model="queryParams"
-        class="-mb-15px"
-        label-width="68px"
-      >
-        <el-form-item label="活动名称" prop="name">
-          <el-input
-            v-model="queryParams.name"
-            placeholder="请输入活动名称"
-            clearable
-            @keyup.enter="handleQuery"
-            class="!w-240px"
-          />
-        </el-form-item>
-        <el-form-item label="活动状态" prop="status">
-          <el-select
-            v-model="queryParams.status"
-            placeholder="请选择活动状态"
-            clearable
-            class="!w-240px"
-          >
-            <el-option
-              v-for="dict in getDictOptions(DICT_TYPE.COMMON_STATUS, 'number')"
-              :key="dict.value"
-              :label="dict.label"
-              :value="dict.value"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item>
-          <el-button @click="handleQuery">
-            <IconifyIcon class="mr-5px" icon="ep:search" />
-            搜索
-          </el-button>
-          <el-button @click="resetQuery">
-            <IconifyIcon class="mr-5px" icon="ep:refresh" />
-            重置
-          </el-button>
-        </el-form-item>
-      </el-form>
-      <el-table v-loading="loading" :data="list" show-overflow-tooltip>
-        <!-- 1. 多选模式（不能使用type="selection"，Element会忽略Header插槽） -->
-        <el-table-column width="55" v-if="multiple">
-          <template #header>
-            <el-checkbox
-              v-model="isCheckAll"
-              :indeterminate="isIndeterminate"
-              @change="handleCheckAll"
-            />
-          </template>
-          <template #default="{ row }">
-            <el-checkbox
-              v-model="checkedStatus[row.id]"
-              @change="(checked: boolean) => handleCheckOne(checked, row, true)"
-            />
-          </template>
-        </el-table-column>
-        <!-- 2. 单选模式 -->
-        <el-table-column label="#" width="55" v-else>
-          <template #default="{ row }">
-            <el-radio
-              :value="row.id"
-              v-model="selectedActivityId"
-              @change="handleSingleSelected(row)"
-            >
-              <!-- 空格不能省略，是为了让单选框不显示label，如果不指定label不会有选中的效果 -->
-              &nbsp;
-            </el-radio>
-          </template>
-        </el-table-column>
-        <el-table-column label="活动编号" prop="id" min-width="80" />
-        <el-table-column label="活动名称" prop="name" min-width="140" />
-        <el-table-column label="活动时间" min-width="210">
-          <template #default="scope">
-            {{ formatDate(scope.row.startTime, 'YYYY-MM-DD') }}
-            ~ {{ formatDate(scope.row.endTime, 'YYYY-MM-DD') }}
-          </template>
-        </el-table-column>
-        <el-table-column label="商品图片" prop="spuName" min-width="80">
-          <template #default="scope">
-            <el-image
-              :src="scope.row.picUrl"
-              class="h-40px w-40px"
-              :preview-src-list="[scope.row.picUrl]"
-              preview-teleported
-            />
-          </template>
-        </el-table-column>
-        <el-table-column label="商品标题" prop="spuName" min-width="300" />
-        <el-table-column
-          label="原价"
-          prop="marketPrice"
-          min-width="100"
-          :formatter="fenToYuanFormat"
-        />
-        <el-table-column label="拼团价" prop="seckillPrice" min-width="100">
-          <template #default="scope">
-            {{ formatCombinationPrice(scope.row.products) }}
-          </template>
-        </el-table-column>
-        <el-table-column label="开团组数" prop="groupCount" min-width="100" />
-        <el-table-column
-          label="成团组数"
-          prop="groupSuccessCount"
-          min-width="100"
-        />
-        <el-table-column label="购买次数" prop="recordCount" min-width="100" />
-        <el-table-column
-          label="活动状态"
-          align="center"
-          prop="status"
-          min-width="100"
-        >
-          <template #default="scope">
-            <dict-tag
-              :type="DICT_TYPE.COMMON_STATUS"
-              :value="scope.row.status"
-            />
-          </template>
-        </el-table-column>
-        <el-table-column
-          label="创建时间"
-          align="center"
-          prop="createTime"
-          :formatter="dateFormatter"
-          width="180px"
-        />
-      </el-table>
-      <!-- 分页 -->
-      <Pagination
-        v-model:limit="queryParams.pageSize"
-        v-model:page="queryParams.pageNo"
-        :total="total"
-        @pagination="getList"
-      />
-    </ContentWrap>
-    <template #footer v-if="multiple">
-      <el-button type="primary" @click="handleEmitChange">确 定</el-button>
-      <el-button @click="dialogVisible = false">取 消</el-button>
-    </template>
-  </Dialog>
-</template>
diff --git a/apps/web-ele/src/views/mall/promotion/combination/components/index.ts b/apps/web-ele/src/views/mall/promotion/combination/components/index.ts
new file mode 100644
index 000000000..36d56af42
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/combination/components/index.ts
@@ -0,0 +1 @@
+export { default as CombinationShowcase } from './showcase.vue';
diff --git a/apps/web-ele/src/views/mall/promotion/combination/components/showcase.vue b/apps/web-ele/src/views/mall/promotion/combination/components/showcase.vue
new file mode 100644
index 000000000..748db18b8
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/combination/components/showcase.vue
@@ -0,0 +1,148 @@
+<!-- 拼团活动橱窗组件：用于展示和选择拼团活动 -->
+<script lang="ts" setup>
+import type { MallCombinationActivityApi } from '#/api/mall/promotion/combination/combinationActivity';
+
+import { computed, ref, watch } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { ElImage, ElTooltip } from 'element-plus';
+
+import { getCombinationActivityListByIds } from '#/api/mall/promotion/combination/combinationActivity';
+
+import CombinationTableSelect from './table-select.vue';
+
+interface CombinationShowcaseProps {
+  modelValue?: number | number[];
+  limit?: number;
+  disabled?: boolean;
+}
+
+const props = withDefaults(defineProps<CombinationShowcaseProps>(), {
+  modelValue: undefined,
+  limit: Number.MAX_VALUE,
+  disabled: false,
+});
+
+const emit = defineEmits(['update:modelValue', 'change']);
+
+const activityList = ref<MallCombinationActivityApi.CombinationActivity[]>([]); // 已选择的活动列表
+const combinationTableSelectRef =
+  ref<InstanceType<typeof CombinationTableSelect>>(); // 活动选择表格组件引用
+const isMultiple = computed(() => props.limit !== 1); // 是否为多选模式
+
+/** 计算是否可以添加 */
+const canAdd = computed(() => {
+  if (props.disabled) {
+    return false;
+  }
+  if (!props.limit) {
+    return true;
+  }
+  return activityList.value.length < props.limit;
+});
+
+/** 监听 modelValue 变化，加载活动详情 */
+watch(
+  () => props.modelValue,
+  async (newValue) => {
+    // eslint-disable-next-line unicorn/no-nested-ternary
+    const ids = Array.isArray(newValue) ? newValue : newValue ? [newValue] : [];
+    if (ids.length === 0) {
+      activityList.value = [];
+      return;
+    }
+    // 只有活动发生变化时才重新查询
+    if (
+      activityList.value.length === 0 ||
+      activityList.value.some((activity) => !ids.includes(activity.id!))
+    ) {
+      activityList.value = await getCombinationActivityListByIds(ids);
+    }
+  },
+  { immediate: true },
+);
+
+/** 打开活动选择对话框 */
+function handleOpenActivitySelect() {
+  combinationTableSelectRef.value?.open(activityList.value);
+}
+
+/** 选择活动后触发 */
+function handleActivitySelected(
+  activities:
+    | MallCombinationActivityApi.CombinationActivity
+    | MallCombinationActivityApi.CombinationActivity[],
+) {
+  activityList.value = Array.isArray(activities) ? activities : [activities];
+  emitActivityChange();
+}
+
+/** 删除活动 */
+function handleRemoveActivity(index: number) {
+  activityList.value.splice(index, 1);
+  emitActivityChange();
+}
+
+/** 触发变更事件 */
+function emitActivityChange() {
+  if (props.limit === 1) {
+    const activity =
+      activityList.value.length > 0 ? activityList.value[0] : null;
+    emit('update:modelValue', activity?.id || 0);
+    emit('change', activity);
+  } else {
+    emit(
+      'update:modelValue',
+      activityList.value.map((activity) => activity.id!),
+    );
+    emit('change', activityList.value);
+  }
+}
+</script>
+
+<template>
+  <div class="flex flex-wrap items-center gap-2">
+    <!-- 已选活动列表 -->
+    <div
+      v-for="(activity, index) in activityList"
+      :key="activity.id"
+      class="group relative h-[60px] w-[60px] overflow-hidden rounded-lg"
+    >
+      <ElTooltip :content="activity.name">
+        <div class="relative h-full w-full">
+          <ElImage
+            :src="activity.picUrl"
+            class="h-full w-full rounded-lg object-cover"
+            :preview-src-list="[activity.picUrl!]"
+            fit="cover"
+          />
+          <!-- 删除按钮 -->
+          <IconifyIcon
+            v-if="!disabled"
+            icon="ep:circle-close-filled"
+            class="absolute -right-2 -top-2 cursor-pointer text-xl text-red-500 opacity-0 transition-opacity hover:text-red-600 group-hover:opacity-100"
+            @click="handleRemoveActivity(index)"
+          />
+        </div>
+      </ElTooltip>
+    </div>
+
+    <!-- 添加活动按钮 -->
+    <ElTooltip v-if="canAdd" content="选择活动">
+      <div
+        class="hover:border-primary hover:bg-primary/5 flex h-[60px] w-[60px] cursor-pointer items-center justify-center rounded-lg border-2 border-dashed transition-colors"
+        @click="handleOpenActivitySelect"
+      >
+        <IconifyIcon icon="ep:plus" class="text-xl text-gray-400" />
+      </div>
+    </ElTooltip>
+  </div>
+
+  <!-- 活动选择对话框 -->
+  <CombinationTableSelect
+    ref="combinationTableSelectRef"
+    :multiple="isMultiple"
+    @change="handleActivitySelected"
+  />
+</template>
diff --git a/apps/web-ele/src/views/mall/promotion/combination/components/table-select.vue b/apps/web-ele/src/views/mall/promotion/combination/components/table-select.vue
new file mode 100644
index 000000000..f36a2b588
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/combination/components/table-select.vue
@@ -0,0 +1,285 @@
+<!-- 拼团活动选择弹窗组件 -->
+<script lang="ts" setup>
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import type { MallCategoryApi } from '#/api/mall/product/category';
+import type { MallCombinationActivityApi } from '#/api/mall/promotion/combination/combinationActivity';
+
+import { computed, onMounted, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+import { fenToYuan, formatDate, handleTree } from '@vben/utils';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getCategoryList } from '#/api/mall/product/category';
+import { getCombinationActivityPage } from '#/api/mall/promotion/combination/combinationActivity';
+
+interface CombinationTableSelectProps {
+  multiple?: boolean; // 是否多选：true - checkbox；false - radio
+}
+
+const props = withDefaults(defineProps<CombinationTableSelectProps>(), {
+  multiple: false,
+});
+
+const emit = defineEmits<{
+  change: [
+    activity:
+      | MallCombinationActivityApi.CombinationActivity
+      | MallCombinationActivityApi.CombinationActivity[],
+  ];
+}>();
+
+const categoryList = ref<MallCategoryApi.Category[]>([]); // 分类列表
+const categoryTreeList = ref<any[]>([]); // 分类树
+
+/** 单选：处理选中变化 */
+function handleRadioChange() {
+  const selectedRow =
+    gridApi.grid.getRadioRecord() as MallCombinationActivityApi.CombinationActivity;
+  if (selectedRow) {
+    emit('change', selectedRow);
+    modalApi.close();
+  }
+}
+
+/**
+ * 格式化拼团价格
+ * @param products
+ */
+const formatCombinationPrice = (
+  products: MallCombinationActivityApi.CombinationProduct[],
+) => {
+  if (!products || products.length === 0) return '-';
+  const combinationPrice = Math.min(
+    ...products.map((item) => item.combinationPrice || 0),
+  );
+  return `￥${fenToYuan(combinationPrice)}`;
+};
+
+/** 搜索表单 Schema */
+const formSchema = computed<VbenFormSchema[]>(() => [
+  {
+    fieldName: 'name',
+    label: '活动名称',
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入活动名称',
+      clearable: true,
+    },
+  },
+  {
+    fieldName: 'status',
+    label: '活动状态',
+    component: 'Select',
+    componentProps: {
+      placeholder: '请选择活动状态',
+      clearable: true,
+      options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+    },
+  },
+]);
+
+/** 表格列配置 */
+const gridColumns = computed<VxeGridProps['columns']>(() => {
+  const columns: VxeGridProps['columns'] = [];
+  if (props.multiple) {
+    columns.push({ type: 'checkbox', width: 55 });
+  } else {
+    columns.push({ type: 'radio', width: 55 });
+  }
+  columns.push(
+    {
+      field: 'id',
+      title: '活动编号',
+      minWidth: 80,
+    },
+    {
+      field: 'name',
+      title: '活动名称',
+      minWidth: 140,
+    },
+    {
+      field: 'activityTime',
+      title: '活动时间',
+      minWidth: 210,
+      formatter: ({ row }) => {
+        return `${formatDate(row.startTime, 'YYYY-MM-DD')} ~ ${formatDate(row.endTime, 'YYYY-MM-DD')}`;
+      },
+    },
+    {
+      field: 'picUrl',
+      title: '商品图片',
+      width: 100,
+      cellRender: {
+        name: 'CellImage',
+      },
+    },
+    {
+      field: 'spuName',
+      title: '商品标题',
+      minWidth: 300,
+    },
+    {
+      field: 'marketPrice',
+      title: '原价',
+      minWidth: 100,
+      formatter: ({ cellValue }) => {
+        return cellValue ? `￥${fenToYuan(cellValue)}` : '-';
+      },
+    },
+    {
+      field: 'products',
+      title: '拼团价',
+      minWidth: 100,
+      formatter: ({ cellValue }) => {
+        return formatCombinationPrice(cellValue);
+      },
+    },
+    {
+      field: 'groupCount',
+      title: '开团组数',
+      minWidth: 100,
+    },
+    {
+      field: 'groupSuccessCount',
+      title: '成团组数',
+      minWidth: 100,
+    },
+    {
+      field: 'recordCount',
+      title: '购买次数',
+      minWidth: 100,
+    },
+    {
+      field: 'status',
+      title: '活动状态',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      width: 180,
+      formatter: 'formatDateTime',
+    },
+  );
+  return columns;
+});
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: formSchema.value,
+    layout: 'horizontal',
+    collapsed: false,
+  },
+  gridOptions: {
+    columns: gridColumns.value,
+    height: 500,
+    border: true,
+    checkboxConfig: {
+      reserve: true,
+    },
+    radioConfig: {
+      reserve: true,
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    proxyConfig: {
+      ajax: {
+        async query({ page }: any, formValues: any) {
+          return await getCombinationActivityPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+  },
+  gridEvents: {
+    radioChange: handleRadioChange,
+  },
+});
+
+const [Modal, modalApi] = useVbenModal({
+  destroyOnClose: true,
+  showConfirmButton: props.multiple, // 特殊：radio 单选情况下，走 handleRadioChange 处理。
+  onConfirm: () => {
+    const selectedRows =
+      gridApi.grid.getCheckboxRecords() as MallCombinationActivityApi.CombinationActivity[];
+    emit('change', selectedRows);
+    modalApi.close();
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      gridApi.grid.clearCheckboxRow();
+      gridApi.grid.clearRadioRow();
+      return;
+    }
+
+    // 1. 先查询数据
+    await gridApi.query();
+    // 2. 设置已选中行
+    const data = modalApi.getData<
+      | MallCombinationActivityApi.CombinationActivity
+      | MallCombinationActivityApi.CombinationActivity[]
+    >();
+    if (props.multiple && Array.isArray(data) && data.length > 0) {
+      setTimeout(() => {
+        const tableData = gridApi.grid.getTableData().fullData;
+        data.forEach((activity) => {
+          const row = tableData.find(
+            (item: MallCombinationActivityApi.CombinationActivity) =>
+              item.id === activity.id,
+          );
+          if (row) {
+            gridApi.grid.setCheckboxRow(row, true);
+          }
+        });
+      }, 300);
+    } else if (!props.multiple && data && !Array.isArray(data)) {
+      setTimeout(() => {
+        const tableData = gridApi.grid.getTableData().fullData;
+        const row = tableData.find(
+          (item: MallCombinationActivityApi.CombinationActivity) =>
+            item.id === data.id,
+        );
+        if (row) {
+          gridApi.grid.setRadioRow(row);
+        }
+      }, 300);
+    }
+  },
+});
+
+/** 对外暴露的方法 */
+defineExpose({
+  open: (
+    data?:
+      | MallCombinationActivityApi.CombinationActivity
+      | MallCombinationActivityApi.CombinationActivity[],
+  ) => {
+    modalApi.setData(data).open();
+  },
+});
+
+/** 初始化分类数据 */
+onMounted(async () => {
+  categoryList.value = await getCategoryList({});
+  categoryTreeList.value = handleTree(categoryList.value, 'id', 'parentId');
+});
+</script>
+
+<template>
+  <Modal title="选择活动" class="w-[950px]">
+    <Grid />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/mall/promotion/components/color-input/index.vue b/apps/web-ele/src/views/mall/promotion/components/color-input/index.vue
index 996863b5b..f80b9fcb5 100644
--- a/apps/web-ele/src/views/mall/promotion/components/color-input/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/color-input/index.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
-import { ElColorPicker, ElInput } from 'element-plus';
-
 import { PREDEFINE_COLORS } from '@vben/constants';
 
+import { ElColorPicker, ElInput } from 'element-plus';
+
 /** 颜色输入框 */
 defineOptions({ name: 'ColorInput' });
 
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/component-container-property.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/component-container-property.vue
index beb68711d..8915fde8c 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/component-container-property.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/component-container-property.vue
@@ -197,4 +197,14 @@ const handleSliderChange = (prop: string) => {
 :deep(.el-input-number) {
   width: 50px;
 }
+
+:deep(.el-tree) {
+  .el-tree-node__expand-icon {
+    margin-right: -15px;
+  }
+
+  .el-form-item {
+    margin-bottom: 0;
+  }
+}
 </style>
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/component-library.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/component-library.vue
index 9428a4187..e87221794 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/component-library.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/component-library.vue
@@ -79,7 +79,7 @@ const handleCloneComponent = (component: DiyComponent<any>) => {
             :group="{ name: 'component', pull: 'clone', put: false }"
             :clone="handleCloneComponent"
             :animation="200"
-            :force-fallback="true"
+            :force-fallback="false"
           >
             <template #item="{ element }">
               <div>
@@ -128,7 +128,6 @@ const handleCloneComponent = (component: DiyComponent<any>) => {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
-    width: 261px;
   }
 
   .component {
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/carousel/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/carousel/config.ts
index 4d040e325..40e049d30 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/carousel/config.ts
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/carousel/config.ts
@@ -6,6 +6,7 @@ export interface CarouselProperty {
   indicator: 'dot' | 'number'; // 指示器样式：点 | 数字
   autoplay: boolean; // 是否自动播放
   interval: number; // 播放间隔
+  height: number; // 轮播高度
   items: CarouselItemProperty[]; // 轮播内容
   style: ComponentStyle; // 组件样式
 }
@@ -28,6 +29,7 @@ export const component = {
     indicator: 'dot',
     autoplay: false,
     interval: 3,
+    height: 174,
     items: [
       {
         type: 'img',
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/carousel/index.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/carousel/index.vue
index 0f204bd18..beffc3a32 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/carousel/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/carousel/index.vue
@@ -29,7 +29,7 @@ const handleIndexChange = (index: number) => {
   </div>
   <div v-else class="relative">
     <ElCarousel
-      height="174px"
+      :height="`${property.height}px`"
       :type="property.type === 'card' ? 'card' : ''"
       :autoplay="property.autoplay"
       :interval="property.interval * 1000"
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/carousel/property.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/carousel/property.vue
index 1cd60005f..63fb5335d 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/carousel/property.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/carousel/property.vue
@@ -8,6 +8,8 @@ import {
   ElCard,
   ElForm,
   ElFormItem,
+  ElInputNumber,
+  ElRadio,
   ElRadioButton,
   ElRadioGroup,
   ElSlider,
@@ -50,6 +52,14 @@ const formData = useVModel(props, 'modelValue', emit);
             </ElTooltip>
           </ElRadioGroup>
         </ElFormItem>
+        <ElFormItem label="高度" prop="height">
+          <ElInputNumber
+            class="mr-[10px] !w-1/2"
+            controls-position="right"
+            v-model="formData.height"
+          />
+          px
+        </ElFormItem>
         <ElFormItem label="指示器" prop="indicator">
           <ElRadioGroup v-model="formData.indicator">
             <ElRadio value="dot">小圆点</ElRadio>
@@ -130,6 +140,4 @@ const formData = useVModel(props, 'modelValue', emit);
       </ElCard>
     </ElForm>
   </ComponentContainerProperty>
-</template>
-
-<style scoped lang="scss"></style>
+</template>
\ No newline at end of file
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/floating-action-button/index.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/floating-action-button/index.vue
index d0c2ae410..82e1a6fff 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/floating-action-button/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/floating-action-button/index.vue
@@ -62,21 +62,14 @@ function handleToggleFab() {
     </ElButton>
   </div>
   <!-- 模态背景：展开时显示，点击后折叠 -->
-  <div v-if="expanded" class="modal-bg" @click="handleToggleFab"></div>
+  <div
+    v-if="expanded"
+    class="absolute left-[calc(50%-375px/2)] top-0 z-[11] h-full w-[375px] bg-black/40"
+    @click="handleToggleFab"
+  ></div>
 </template>
 
 <style scoped lang="scss">
-/* 模态背景 */
-.modal-bg {
-  position: absolute;
-  top: 0;
-  left: calc(50% - 375px / 2);
-  z-index: 11;
-  width: 375px;
-  height: 100%;
-  background-color: rgb(0 0 0 / 40%);
-}
-
 .fab-icon {
   transform: rotate(0deg);
   transition: transform 0.3s;
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/components/hot-zone-edit-dialog/index.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/components/hot-zone-edit-dialog/index.vue
index c232854eb..c797ef9aa 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/components/hot-zone-edit-dialog/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/components/hot-zone-edit-dialog/index.vue
@@ -193,12 +193,15 @@ const handleAppLinkChange = (appLink: AppLink) => {
       <div
         v-for="(item, hotZoneIndex) in formData"
         :key="hotZoneIndex"
-        class="hot-zone"
+        class="hot-zone absolute z-10 flex cursor-move items-center justify-center border text-base opacity-80"
         :style="{
           width: `${item.width}px`,
           height: `${item.height}px`,
           top: `${item.top}px`,
           left: `${item.left}px`,
+          color: 'var(--el-color-primary)',
+          background: 'var(--el-color-primary-light-7)',
+          borderColor: 'var(--el-color-primary)',
         }"
         @mousedown="handleMove(item, $event)"
         @dblclick="handleShowAppLinkDialog(item)"
@@ -208,17 +211,18 @@ const handleAppLinkChange = (appLink: AppLink) => {
         </span>
         <IconifyIcon
           icon="ep:close"
-          class="delete"
+          class="delete absolute right-0 top-0 hidden cursor-pointer rounded-bl-[80%] p-[2px_2px_6px_6px] text-right text-white"
+          :style="{ backgroundColor: 'var(--el-color-primary)' }"
           :size="14"
           @click="handleRemove(item)"
         />
 
         <!-- 8 个控制点 -->
         <span
-          class="ctrl-dot"
+          class="ctrl-dot absolute z-[11] h-2 w-2 rounded-full bg-white"
           v-for="(dot, dotIndex) in CONTROL_DOT_LIST"
           :key="dotIndex"
-          :style="dot.style"
+          :style="{ ...dot.style, border: 'inherit' }"
           @mousedown="handleResize(item, dot, $event)"
         ></span>
       </div>
@@ -238,47 +242,9 @@ const handleAppLinkChange = (appLink: AppLink) => {
 </template>
 
 <style scoped lang="scss">
-.hot-zone {
-  position: absolute;
-  z-index: 10;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 16px;
-  color: var(--el-color-primary);
-  cursor: move;
-  background: var(--el-color-primary-light-7);
-  border: 1px solid var(--el-color-primary);
-  opacity: 0.8;
-
-  /* 控制点 */
-  .ctrl-dot {
-    position: absolute;
-    z-index: 11;
-    width: 8px;
-    height: 8px;
-    background-color: #fff;
-    border: inherit;
-    border-radius: 50%;
-  }
-
+.hot-zone:hover {
   .delete {
-    position: absolute;
-    top: 0;
-    right: 0;
-    display: none;
-    padding: 2px 2px 6px 6px;
-    color: #fff;
-    text-align: right;
-    cursor: pointer;
-    background-color: var(--el-color-primary);
-    border-radius: 0 0 0 80%;
-  }
-
-  &:hover {
-    .delete {
-      display: block;
-    }
+    display: block;
   }
 }
 </style>
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/index.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/index.vue
index 958d0749c..8a9e4f37b 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/index.vue
@@ -18,31 +18,18 @@ const props = defineProps<{ property: HotZoneProperty }>();
     <div
       v-for="(item, index) in props.property.list"
       :key="index"
-      class="hot-zone"
+      class="absolute z-10 flex cursor-move items-center justify-center border text-sm opacity-80"
       :style="{
         width: `${item.width}px`,
         height: `${item.height}px`,
         top: `${item.top}px`,
         left: `${item.left}px`,
+        color: 'var(--el-color-primary)',
+        background: 'var(--el-color-primary-light-7)',
+        borderColor: 'var(--el-color-primary)',
       }"
     >
       {{ item.name }}
     </div>
   </div>
 </template>
-
-<style scoped lang="scss">
-.hot-zone {
-  position: absolute;
-  z-index: 10;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 14px;
-  color: var(--el-color-primary);
-  cursor: move;
-  background: var(--el-color-primary-light-7);
-  border: 1px solid var(--el-color-primary);
-  opacity: 0.8;
-}
-</style>
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/property.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/property.vue
index 9702db917..47877b41e 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/property.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/property.vue
@@ -59,26 +59,3 @@ const handleOpenEditDialog = () => {
     :img-url="formData.imgUrl"
   />
 </template>
-
-<style scoped lang="scss">
-.hot-zone {
-  position: absolute;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 12px;
-  color: #fff;
-  cursor: move;
-  background: #409effbf;
-  border: 1px solid var(--el-color-primary);
-
-  /* 控制点 */
-  .ctrl-dot {
-    position: absolute;
-    width: 4px;
-    height: 4px;
-    background-color: #fff;
-    border-radius: 50%;
-  }
-}
-</style>
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/magic-cube/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/config.ts
index 13b1c4721..02c7bc1c4 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/config.ts
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/config.ts
@@ -17,8 +17,6 @@ export interface MagicCubeItemProperty {
   height: number; // 高
   top: number; // 上
   left: number; // 左
-  right: number; // 右
-  bottom: number; // 下
 }
 
 /** 定义组件 */
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-list/index.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-list/index.vue
index 0a05a6c7b..03e2961f0 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-list/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-list/index.vue
@@ -16,7 +16,7 @@ defineProps<{ property: MenuListProperty }>();
     <div
       v-for="(item, index) in property.list"
       :key="index"
-      class="item flex h-[42px] flex-row items-center justify-between gap-1 px-3"
+      class="flex h-[42px] flex-row items-center justify-between gap-1 border-t border-[#eee] px-3 first:border-t-0"
     >
       <div class="flex flex-1 flex-row items-center gap-2">
         <ElImage v-if="item.iconUrl" class="h-4 w-4" :src="item.iconUrl" />
@@ -33,9 +33,3 @@ defineProps<{ property: MenuListProperty }>();
     </div>
   </div>
 </template>
-
-<style scoped lang="scss">
-.item + .item {
-  border-top: 1px solid #eee;
-}
-</style>
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/components/cell-property.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/components/cell-property.vue
index 366723d88..96031a28e 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/components/cell-property.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/components/cell-property.vue
@@ -1,17 +1,20 @@
 <script lang="ts" setup>
 import type { NavigationBarCellProperty } from '../config';
 
-import type { Rect } from '#/views/mall/promotion/components/magic-cube-editor/util';
-
 import { computed, ref } from 'vue';
 
+import { IconifyIcon } from '@vben/icons';
+
 import { useVModel } from '@vueuse/core';
 import {
   ElFormItem,
   ElInput,
   ElRadio,
+  ElRadioButton,
   ElRadioGroup,
   ElSlider,
+  ElSwitch,
+  ElTooltip,
 } from 'element-plus';
 
 import appNavBarMp from '#/assets/imgs/diy/app-nav-bar-mp.png';
@@ -47,18 +50,6 @@ const cellList = useVModel(props, 'modelValue', emit);
  */
 const cellCount = computed(() => (props.isMp ? 6 : 8));
 
-/** 转换为 Rect 格式的数据：MagicCubeEditor 组件需要 Rect 格式的数据来渲染热区 */
-const rectList = computed<Rect[]>(() => {
-  return cellList.value.map((cell) => ({
-    left: cell.left,
-    top: cell.top,
-    width: cell.width,
-    height: cell.height,
-    right: cell.left + cell.width,
-    bottom: cell.top + cell.height,
-  }));
-});
-
 const selectedHotAreaIndex = ref(0); // 选中的热区
 
 /** 处理热区被选中事件 */
@@ -67,17 +58,24 @@ function handleHotAreaSelected(
   index: number,
 ) {
   selectedHotAreaIndex.value = index;
+  // 默认设置为选中文字，并设置属性
   if (!cellValue.type) {
     cellValue.type = 'text';
     cellValue.textColor = '#111111';
   }
+  // 如果点击的是搜索框，则初始化搜索框的属性
+  if (cellValue.type === 'search') {
+    cellValue.placeholderPosition = 'left';
+    cellValue.backgroundColor = '#EEEEEE';
+    cellValue.textColor = '#969799';
+  }
 }
 </script>
 
 <template>
   <div class="h-40px flex items-center justify-center">
     <MagicCubeEditor
-      v-model="rectList"
+      v-model="cellList as any"
       :cols="cellCount"
       :cube-size="38"
       :rows="1"
@@ -94,7 +92,10 @@ function handleHotAreaSelected(
   <template v-for="(cell, cellIndex) in cellList" :key="cellIndex">
     <template v-if="selectedHotAreaIndex === Number(cellIndex)">
       <ElFormItem :prop="`cell[${cellIndex}].type`" label="类型">
-        <ElRadioGroup v-model="cell.type">
+        <ElRadioGroup
+          v-model="cell.type"
+          @change="handleHotAreaSelected(cell, cellIndex)"
+        >
           <ElRadio value="text">文字</ElRadio>
           <ElRadio value="image">图片</ElRadio>
           <ElRadio value="search">搜索框</ElRadio>
@@ -131,9 +132,32 @@ function handleHotAreaSelected(
       </template>
       <!-- 3. 搜索框 -->
       <template v-else>
+        <ElFormItem label="框体颜色" prop="backgroundColor">
+          <ColorInput v-model="cell.backgroundColor" />
+        </ElFormItem>
+        <ElFormItem class="lef" label="文本颜色" prop="textColor">
+          <ColorInput v-model="cell.textColor" />
+        </ElFormItem>
         <ElFormItem :prop="`cell[${cellIndex}].placeholder`" label="提示文字">
           <ElInput v-model="cell.placeholder" maxlength="10" show-word-limit />
         </ElFormItem>
+        <ElFormItem label="文本位置" prop="placeholderPosition">
+          <ElRadioGroup v-model="cell!.placeholderPosition">
+            <ElTooltip content="居左" placement="top">
+              <ElRadioButton value="left">
+                <IconifyIcon icon="ant-design:align-left-outlined" />
+              </ElRadioButton>
+            </ElTooltip>
+            <ElTooltip content="居中" placement="top">
+              <ElRadioButton value="center">
+                <IconifyIcon icon="ant-design:align-center-outlined" />
+              </ElRadioButton>
+            </ElTooltip>
+          </ElRadioGroup>
+        </ElFormItem>
+        <ElFormItem label="扫一扫" prop="showScan">
+          <ElSwitch v-model="cell!.showScan" />
+        </ElFormItem>
         <ElFormItem :prop="`cell[${cellIndex}].borderRadius`" label="圆角">
           <ElSlider
             v-model="cell.borderRadius"
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/config.ts
index f898ce9e8..c2769cc51 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/config.ts
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/config.ts
@@ -26,7 +26,10 @@ export interface NavigationBarCellProperty {
   textColor: string; // 文字颜色
   imgUrl: string; // 图片地址
   url: string; // 图片链接
+  backgroundColor: string; // 搜索框：框体颜色
   placeholder: string; // 搜索框：提示文字
+  placeholderPosition: string; // 搜索框：提示文字位置
+  showScan: boolean; // 搜索框：是否显示扫一扫
   borderRadius: number; // 搜索框：边框圆角半径
 }
 
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/index.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/index.vue
index 3460ee53e..923e65d5e 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/index.vue
@@ -61,7 +61,10 @@ const getSearchProp = computed(() => (cell: NavigationBarCellProperty) => {
 });
 </script>
 <template>
-  <div class="navigation-bar" :style="bgStyle">
+  <div
+    class="flex h-[50px] items-center justify-between bg-white px-[6px]"
+    :style="bgStyle"
+  >
     <div class="flex h-full w-full items-center">
       <div
         v-for="(cell, cellIndex) in cellList"
@@ -86,31 +89,3 @@ const getSearchProp = computed(() => (cell: NavigationBarCellProperty) => {
     />
   </div>
 </template>
-<style lang="scss" scoped>
-.navigation-bar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  height: 50px;
-  padding: 0 6px;
-  background: #fff;
-
-  /* 左边 */
-  .left {
-    margin-left: 8px;
-  }
-
-  .center {
-    flex: 1;
-    font-size: 14px;
-    line-height: 35px;
-    color: #333;
-    text-align: center;
-  }
-
-  /* 右边 */
-  .right {
-    margin-right: 8px;
-  }
-}
-</style>
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/index.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/index.vue
index 589e89373..7babd44d8 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/index.vue
@@ -34,5 +34,3 @@ defineProps<{ property: NoticeBarProperty }>();
     <IconifyIcon icon="ep:arrow-right" />
   </div>
 </template>
-
-<style scoped lang="scss"></style>
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/index.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/index.vue
index 4be26abf4..cb0659748 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/index.vue
@@ -18,7 +18,7 @@ defineOptions({ name: 'PromotionCombination' });
 
 const props = defineProps<{ property: PromotionCombinationProperty }>();
 
-const spuList = ref<MallSpuApi.Spu[]>([]);
+const spuList = ref<MallSpuApi.Spu[]>([]); // 商品列表
 const spuIdList = ref<number[]>([]);
 const combinationActivityList = ref<
   MallCombinationActivityApi.CombinationActivity[]
@@ -81,14 +81,14 @@ function calculateSpace(index: number) {
 const containerRef = ref();
 
 /** 计算商品的宽度 */
-const calculateWidth = () => {
+function calculateWidth() {
   let width = '100%';
   if (props.property.layoutType === 'twoCol') {
     // 双列时每列的宽度为：（总宽度 - 间距）/ 2
     width = `${(containerRef.value.offsetWidth - props.property.space) / 2}px`;
   }
   return { width };
-};
+}
 </script>
 <template>
   <div
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/property.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/property.vue
index fe222be0b..ca3f8b231 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/property.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/property.vue
@@ -18,7 +18,7 @@ import {
 } from 'element-plus';
 
 import UploadImg from '#/components/upload/image-upload.vue';
-import CombinationShowcase from '#/views/mall/promotion/combination/components/combination-showcase.vue';
+import { CombinationShowcase } from '#/views/mall/promotion/combination/components';
 import { ColorInput } from '#/views/mall/promotion/components';
 
 import ComponentContainerProperty from '../../component-container-property.vue';
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/config.ts
index 738ca3b31..8393f8ca2 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/config.ts
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/config.ts
@@ -2,64 +2,41 @@ import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 积分商城属性 */
 export interface PromotionPointProperty {
-  // 布局类型：单列 | 三列
-  layoutType: 'oneColBigImg' | 'oneColSmallImg' | 'twoCol';
-  // 商品字段
+  layoutType: 'oneColBigImg' | 'oneColSmallImg' | 'twoCol'; // 布局类型：单列 | 三列
   fields: {
-    // 商品简介
-    introduction: PromotionPointFieldProperty;
-    // 市场价
-    marketPrice: PromotionPointFieldProperty;
-    // 商品名称
-    name: PromotionPointFieldProperty;
-    // 商品价格
-    price: PromotionPointFieldProperty;
-    // 商品销量
-    salesCount: PromotionPointFieldProperty;
-    // 商品库存
-    stock: PromotionPointFieldProperty;
-  };
-  // 角标
+    introduction: PromotionPointFieldProperty; // 商品简介
+    marketPrice: PromotionPointFieldProperty; // 市场价
+    name: PromotionPointFieldProperty; // 商品名称
+    price: PromotionPointFieldProperty; // 商品价格
+    salesCount: PromotionPointFieldProperty; // 商品销量
+    stock: PromotionPointFieldProperty; // 商品库存
+  }; // 商品字段
   badge: {
-    // 角标图片
-    imgUrl: string;
-    // 是否显示
-    show: boolean;
-  };
+    imgUrl: string; // 角标图片
+    show: boolean; // 是否显示
+  }; // 角标
   // 按钮
   btnBuy: {
-    // 文字按钮：背景渐变起始颜色
-    bgBeginColor: string;
-    // 文字按钮：背景渐变结束颜色
-    bgEndColor: string;
-    // 图片按钮：图片地址
-    imgUrl: string;
-    // 文字
-    text: string;
-    // 类型：文字 | 图片
-    type: 'img' | 'text';
-  };
-  // 上圆角
-  borderRadiusTop: number;
-  // 下圆角
-  borderRadiusBottom: number;
-  // 间距
-  space: number;
-  // 秒杀活动编号
-  activityIds: number[];
-  // 组件样式
-  style: ComponentStyle;
+    bgBeginColor: string; // 文字按钮：背景渐变起始颜色
+    bgEndColor: string; // 文字按钮：背景渐变结束颜色
+    imgUrl: string; // 图片按钮：图片地址
+    text: string; // 文字
+    type: 'img' | 'text'; // 类型：文字 | 图片
+  }; // 按钮
+  borderRadiusTop: number; // 上圆角
+  borderRadiusBottom: number; // 下圆角
+  space: number; // 间距
+  activityIds: number[]; // 积分活动编号
+  style: ComponentStyle; // 组件样式
 }
 
-// 商品字段
+/** 商品字段属性 */
 export interface PromotionPointFieldProperty {
-  // 是否显示
-  show: boolean;
-  // 颜色
-  color: string;
+  show: boolean; // 是否显示
+  color: string; // 颜色
 }
 
-// 定义组件
+/** 定义组件 */
 export const component = {
   id: 'PromotionPoint',
   name: '积分商城',
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/index.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/index.vue
index 3ff8336dd..139fc63d6 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/index.vue
@@ -14,10 +14,10 @@ import * as PointActivityApi from '#/api/mall/promotion/point';
 
 /** 积分商城卡片 */
 defineOptions({ name: 'PromotionPoint' });
-// 定义属性
+
 const props = defineProps<{ property: PromotionPointProperty }>();
-// 商品列表
-const spuList = ref<MallPointActivityApi.SpuExtensionWithPoint[]>([]);
+
+const spuList = ref<MallPointActivityApi.SpuExtensionWithPoint[]>([]); // 商品列表
 const spuIdList = ref<number[]>([]);
 const pointActivityList = ref<MallPointActivityApi.PointActivity[]>([]);
 
@@ -27,7 +27,7 @@ watch(
     try {
       // 新添加的积分商城组件，是没有活动ID的
       const activityIds = props.property.activityIds;
-      // 检查活动ID的有效性
+      // 检查活动 ID 的有效性
       if (Array.isArray(activityIds) && activityIds.length > 0) {
         // 获取积分商城活动详情列表
         pointActivityList.value =
@@ -66,41 +66,33 @@ watch(
   },
 );
 
-/**
- * 计算商品的间距
- * @param index 商品索引
- */
-const calculateSpace = (index: number) => {
-  // 商品的列数
-  const columns = props.property.layoutType === 'twoCol' ? 2 : 1;
-  // 第一列没有左边距
-  const marginLeft = index % columns === 0 ? '0' : `${props.property.space}px`;
-  // 第一行没有上边距
-  const marginTop = index < columns ? '0' : `${props.property.space}px`;
-
+/** 计算商品的间距 */
+function calculateSpace(index: number) {
+  const columns = props.property.layoutType === 'twoCol' ? 2 : 1; // 商品的列数
+  const marginLeft = index % columns === 0 ? '0' : `${props.property.space}px`; // 第一列没有左边距
+  const marginTop = index < columns ? '0' : `${props.property.space}px`; // 第一行没有上边距
   return { marginLeft, marginTop };
-};
+}
 
-// 容器
 const containerRef = ref();
-// 计算商品的宽度
-const calculateWidth = () => {
+
+/** 计算商品的宽度 */
+function calculateWidth() {
   let width = '100%';
-  // 双列时每列的宽度为：（总宽度 - 间距）/ 2
   if (props.property.layoutType === 'twoCol') {
+    // 双列时每列的宽度为：（总宽度 - 间距）/ 2
     width = `${(containerRef.value.offsetWidth - props.property.space) / 2}px`;
   }
   return { width };
-};
+}
 </script>
 <template>
   <div
-    ref="containerRef"
     class="box-content flex min-h-[30px] w-full flex-row flex-wrap"
+    ref="containerRef"
   >
     <div
-      v-for="(spu, index) in spuList"
-      :key="index"
+      class="relative box-content flex flex-row flex-wrap overflow-hidden bg-white"
       :style="{
         ...calculateSpace(index),
         ...calculateWidth(),
@@ -109,17 +101,18 @@ const calculateWidth = () => {
         borderBottomLeftRadius: `${property.borderRadiusBottom}px`,
         borderBottomRightRadius: `${property.borderRadiusBottom}px`,
       }"
-      class="relative box-content flex flex-row flex-wrap overflow-hidden bg-white"
+      v-for="(spu, index) in spuList"
+      :key="index"
     >
       <!-- 角标 -->
       <div
-        v-if="property.badge.show"
+        v-if="property.badge.show && property.badge.imgUrl"
         class="absolute left-0 top-0 z-[1] items-center justify-center"
       >
         <ElImage
+          fit="cover"
           :src="property.badge.imgUrl"
           class="h-[26px] w-[38px]"
-          fit="cover"
         />
       </div>
       <!-- 商品封面图 -->
@@ -132,10 +125,10 @@ const calculateWidth = () => {
           },
         ]"
       >
-        <ElImage :src="spu.picUrl" class="h-full w-full" fit="cover" />
+        <ElImage fit="cover" class="h-full w-full" :src="spu.picUrl" />
       </div>
       <div
-        class="box-border flex flex-col gap-2 p-2"
+        class="box-border flex flex-col gap-[8px] p-[8px]"
         :class="[
           {
             'w-full': property.layoutType !== 'oneColSmallImg',
@@ -162,8 +155,8 @@ const calculateWidth = () => {
         <!-- 商品简介 -->
         <div
           v-if="property.fields.introduction.show"
-          :style="{ color: property.fields.introduction.color }"
           class="truncate text-[12px]"
+          :style="{ color: property.fields.introduction.color }"
         >
           {{ spu.introduction }}
         </div>
@@ -171,8 +164,8 @@ const calculateWidth = () => {
           <!-- 积分 -->
           <span
             v-if="property.fields.price.show"
-            :style="{ color: property.fields.price.color }"
             class="text-[16px]"
+            :style="{ color: property.fields.price.color }"
           >
             {{ spu.point }}积分
             {{
@@ -184,10 +177,10 @@ const calculateWidth = () => {
           <!-- 市场价 -->
           <span
             v-if="property.fields.marketPrice.show && spu.marketPrice"
-            :style="{ color: property.fields.marketPrice.color }"
             class="ml-[4px] text-[10px] line-through"
+            :style="{ color: property.fields.marketPrice.color }"
           >
-            ￥{{ fenToYuan(spu.marketPrice) }}
+            ￥{{ fenToYuan(spu.marketPrice!) }}
           </span>
         </div>
         <div class="text-[12px]">
@@ -212,23 +205,21 @@ const calculateWidth = () => {
         <!-- 文字按钮 -->
         <span
           v-if="property.btnBuy.type === 'text'"
+          class="rounded-full px-[12px] py-[4px] text-[12px] text-white"
           :style="{
             background: `linear-gradient(to right, ${property.btnBuy.bgBeginColor}, ${property.btnBuy.bgEndColor}`,
           }"
-          class="rounded-full px-[12px] py-[4px] text-[12px] text-white"
         >
           {{ property.btnBuy.text }}
         </span>
         <!-- 图片按钮 -->
         <ElImage
           v-else
-          :src="property.btnBuy.imgUrl"
           class="h-[28px] w-[28px] rounded-full"
           fit="cover"
+          :src="property.btnBuy.imgUrl"
         />
       </div>
     </div>
   </div>
 </template>
-
-<style lang="scss" scoped></style>
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/property.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/property.vue
index 6ce0b5099..69465b223 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/property.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/property.vue
@@ -16,10 +16,13 @@ import {
   ElTooltip,
 } from 'element-plus';
 
+import UploadImg from '#/components/upload/image-upload.vue';
 import { ColorInput } from '#/views/mall/promotion/components';
-import PointShowcase from '#/views/mall/promotion/point/components/point-showcase.vue';
+import { PointShowcase } from '#/views/mall/promotion/point/components';
 
-// 秒杀属性面板
+import ComponentContainerProperty from '../../component-container-property.vue';
+
+/** 积分属性面板 */
 defineOptions({ name: 'PromotionPointProperty' });
 
 const props = defineProps<{ modelValue: PromotionPointProperty }>();
@@ -29,11 +32,11 @@ const formData = useVModel(props, 'modelValue', emit);
 
 <template>
   <ComponentContainerProperty v-model="formData.style">
-    <ElForm :model="formData" label-width="80px">
-      <ElCard class="property-group" header="积分商城活动" shadow="never">
+    <ElForm label-width="80px" :model="formData">
+      <ElCard header="积分商城活动" class="property-group" shadow="never">
         <PointShowcase v-model="formData.activityIds" />
       </ElCard>
-      <ElCard class="property-group" header="商品样式" shadow="never">
+      <ElCard header="商品样式" class="property-group" shadow="never">
         <ElFormItem label="布局" prop="type">
           <ElRadioGroup v-model="formData.layoutType">
             <ElTooltip class="item" content="单列大图" placement="bottom">
@@ -51,11 +54,11 @@ const formData = useVModel(props, 'modelValue', emit);
                 <IconifyIcon icon="fluent:text-column-two-24-filled" />
               </ElRadioButton>
             </ElTooltip>
-            <!--<el-tooltip class="item" content="三列" placement="bottom">
-              <el-radio-button value="threeCol">
+            <!--<ElTooltip class="item" content="三列" placement="bottom">
+              <ElRadioButton value="threeCol">
                 <IconifyIcon icon="fluent:text-column-three-24-filled" />
-              </el-radio-button>
-            </el-tooltip>-->
+              </ElRadioButton>
+            </ElTooltip>-->
           </ElRadioGroup>
         </ElFormItem>
         <ElFormItem label="商品名称" prop="fields.name.show">
@@ -95,22 +98,22 @@ const formData = useVModel(props, 'modelValue', emit);
           </div>
         </ElFormItem>
       </ElCard>
-      <ElCard class="property-group" header="角标" shadow="never">
+      <ElCard header="角标" class="property-group" shadow="never">
         <ElFormItem label="角标" prop="badge.show">
           <ElSwitch v-model="formData.badge.show" />
         </ElFormItem>
-        <ElFormItem v-if="formData.badge.show" label="角标" prop="badge.imgUrl">
+        <ElFormItem label="角标" prop="badge.imgUrl" v-if="formData.badge.show">
           <UploadImg
             v-model="formData.badge.imgUrl"
             height="44px"
             width="72px"
             :show-description="false"
           >
-            <template #tip> 建议尺寸：36 * 22</template>
+            <template #tip> 建议尺寸：36 * 22 </template>
           </UploadImg>
         </ElFormItem>
       </ElCard>
-      <ElCard class="property-group" header="按钮" shadow="never">
+      <ElCard header="按钮" class="property-group" shadow="never">
         <ElFormItem label="按钮类型" prop="btnBuy.type">
           <ElRadioGroup v-model="formData.btnBuy.type">
             <ElRadioButton value="text">文字</ElRadioButton>
@@ -136,20 +139,20 @@ const formData = useVModel(props, 'modelValue', emit);
               width="56px"
               :show-description="false"
             >
-              <template #tip> 建议尺寸：56 * 56</template>
+              <template #tip> 建议尺寸：56 * 56 </template>
             </UploadImg>
           </ElFormItem>
         </template>
       </ElCard>
-      <ElCard class="property-group" header="商品样式" shadow="never">
+      <ElCard header="商品样式" class="property-group" shadow="never">
         <ElFormItem label="上圆角" prop="borderRadiusTop">
           <ElSlider
             v-model="formData.borderRadiusTop"
             :max="100"
             :min="0"
-            :show-input-controls="false"
-            input-size="small"
             show-input
+            input-size="small"
+            :show-input-controls="false"
           />
         </ElFormItem>
         <ElFormItem label="下圆角" prop="borderRadiusBottom">
@@ -157,9 +160,9 @@ const formData = useVModel(props, 'modelValue', emit);
             v-model="formData.borderRadiusBottom"
             :max="100"
             :min="0"
-            :show-input-controls="false"
-            input-size="small"
             show-input
+            input-size="small"
+            :show-input-controls="false"
           />
         </ElFormItem>
         <ElFormItem label="间隔" prop="space">
@@ -167,14 +170,12 @@ const formData = useVModel(props, 'modelValue', emit);
             v-model="formData.space"
             :max="100"
             :min="0"
-            :show-input-controls="false"
-            input-size="small"
             show-input
+            input-size="small"
+            :show-input-controls="false"
           />
         </ElFormItem>
       </ElCard>
     </ElForm>
   </ComponentContainerProperty>
 </template>
-
-<style lang="scss" scoped></style>
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-seckill/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-seckill/config.ts
index a38d9455b..87feae63b 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-seckill/config.ts
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-seckill/config.ts
@@ -2,64 +2,40 @@ import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 秒杀属性 */
 export interface PromotionSeckillProperty {
-  // 布局类型：单列 | 三列
-  layoutType: 'oneColBigImg' | 'oneColSmallImg' | 'twoCol';
-  // 商品字段
+  layoutType: 'oneColBigImg' | 'oneColSmallImg' | 'twoCol'; // 布局类型：单列 | 三列
   fields: {
-    // 商品简介
-    introduction: PromotionSeckillFieldProperty;
-    // 市场价
-    marketPrice: PromotionSeckillFieldProperty;
-    // 商品名称
-    name: PromotionSeckillFieldProperty;
-    // 商品价格
-    price: PromotionSeckillFieldProperty;
-    // 商品销量
-    salesCount: PromotionSeckillFieldProperty;
-    // 商品库存
-    stock: PromotionSeckillFieldProperty;
-  };
-  // 角标
+    introduction: PromotionSeckillFieldProperty; // 商品简介
+    marketPrice: PromotionSeckillFieldProperty; // 市场价
+    name: PromotionSeckillFieldProperty; // 商品名称
+    price: PromotionSeckillFieldProperty; // 商品价格
+    salesCount: PromotionSeckillFieldProperty; // 商品销量
+    stock: PromotionSeckillFieldProperty; // 商品库存
+  }; // 商品字段
   badge: {
-    // 角标图片
-    imgUrl: string;
-    // 是否显示
-    show: boolean;
-  };
-  // 按钮
+    imgUrl: string; // 角标图片
+    show: boolean; // 是否显示
+  }; // 角标
   btnBuy: {
-    // 文字按钮：背景渐变起始颜色
-    bgBeginColor: string;
-    // 文字按钮：背景渐变结束颜色
-    bgEndColor: string;
-    // 图片按钮：图片地址
-    imgUrl: string;
-    // 文字
-    text: string;
-    // 类型：文字 | 图片
-    type: 'img' | 'text';
-  };
-  // 上圆角
-  borderRadiusTop: number;
-  // 下圆角
-  borderRadiusBottom: number;
-  // 间距
-  space: number;
-  // 秒杀活动编号
-  activityIds: number[];
-  // 组件样式
-  style: ComponentStyle;
+    bgBeginColor: string; // 文字按钮：背景渐变起始颜色
+    bgEndColor: string; // 文字按钮：背景渐变结束颜色
+    imgUrl: string; // 图片按钮：图片地址
+    text: string; // 文字
+    type: 'img' | 'text'; // 类型：文字 | 图片
+  }; // 按钮
+  borderRadiusTop: number; // 上圆角
+  borderRadiusBottom: number; // 下圆角
+  space: number; // 间距
+  activityIds: number[]; // 秒杀活动编号
+  style: ComponentStyle; // 组件样式
 }
 
-// 商品字段
+/** 商品字段属性 */
 export interface PromotionSeckillFieldProperty {
-  // 是否显示
-  show: boolean;
-  // 颜色
-  color: string;
+  show: boolean; // 是否显示
+  color: string; // 颜色
 }
 
-// 定义组件
+/** 定义组件 */
 export const component = {
   id: 'PromotionSeckill',
   name: '秒杀',
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-seckill/index.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-seckill/index.vue
index b497437b0..207ecabcf 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-seckill/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-seckill/index.vue
@@ -15,10 +15,9 @@ import * as SeckillActivityApi from '#/api/mall/promotion/seckill/seckillActivit
 
 /** 秒杀卡片 */
 defineOptions({ name: 'PromotionSeckill' });
-// 定义属性
 const props = defineProps<{ property: PromotionSeckillProperty }>();
-// 商品列表
-const spuList = ref<MallSpuApi.Spu[]>([]);
+
+const spuList = ref<MallSpuApi.Spu[]>([]); // 商品列表
 const spuIdList = ref<number[]>([]);
 const seckillActivityList = ref<MallSeckillActivityApi.SeckillActivity[]>([]);
 
@@ -28,7 +27,7 @@ watch(
     try {
       // 新添加的秒杀组件，是没有活动ID的
       const activityIds = props.property.activityIds;
-      // 检查活动ID的有效性
+      // 检查活动 ID 的有效性
       if (Array.isArray(activityIds) && activityIds.length > 0) {
         // 获取秒杀活动详情列表
         seckillActivityList.value =
@@ -66,32 +65,25 @@ watch(
   },
 );
 
-/**
- * 计算商品的间距
- * @param index 商品索引
- */
-const calculateSpace = (index: number) => {
-  // 商品的列数
-  const columns = props.property.layoutType === 'twoCol' ? 2 : 1;
-  // 第一列没有左边距
-  const marginLeft = index % columns === 0 ? '0' : `${props.property.space}px`;
-  // 第一行没有上边距
-  const marginTop = index < columns ? '0' : `${props.property.space}px`;
-
+/** 计算商品的间距 */
+function calculateSpace(index: number) {
+  const columns = props.property.layoutType === 'twoCol' ? 2 : 1; // 商品的列数
+  const marginLeft = index % columns === 0 ? '0' : `${props.property.space}px`; // 第一列没有左边距
+  const marginTop = index < columns ? '0' : `${props.property.space}px`; // 第一行没有上边距
   return { marginLeft, marginTop };
-};
+}
 
-// 容器
 const containerRef = ref();
-// 计算商品的宽度
-const calculateWidth = () => {
+
+/** 计算商品的宽度 */
+function calculateWidth() {
   let width = '100%';
-  // 双列时每列的宽度为：（总宽度 - 间距）/ 2
   if (props.property.layoutType === 'twoCol') {
+    // 双列时每列的宽度为：（总宽度 - 间距）/ 2
     width = `${(containerRef.value.offsetWidth - props.property.space) / 2}px`;
   }
   return { width };
-};
+}
 </script>
 <template>
   <div
@@ -113,7 +105,7 @@ const calculateWidth = () => {
     >
       <!-- 角标 -->
       <div
-        v-if="property.badge.show"
+        v-if="property.badge.show && property.badge.imgUrl"
         class="absolute left-0 top-0 z-[1] items-center justify-center"
       >
         <ElImage
@@ -135,7 +127,7 @@ const calculateWidth = () => {
         <ElImage fit="cover" class="h-full w-full" :src="spu.picUrl" />
       </div>
       <div
-        class="box-border flex flex-col gap-2 p-2"
+        class="box-border flex flex-col gap-[8px] p-[8px]"
         :class="[
           {
             'w-full': property.layoutType !== 'oneColSmallImg',
@@ -147,7 +139,7 @@ const calculateWidth = () => {
         <!-- 商品名称 -->
         <div
           v-if="property.fields.name.show"
-          class="text-sm"
+          class="text-[14px]"
           :class="[
             {
               truncate: property.layoutType !== 'oneColSmallImg',
@@ -162,7 +154,7 @@ const calculateWidth = () => {
         <!-- 商品简介 -->
         <div
           v-if="property.fields.introduction.show"
-          class="truncate text-xs"
+          class="truncate text-[12px]"
           :style="{ color: property.fields.introduction.color }"
         >
           {{ spu.introduction }}
@@ -171,7 +163,7 @@ const calculateWidth = () => {
           <!-- 价格 -->
           <span
             v-if="property.fields.price.show"
-            class="text-base"
+            class="text-[16px]"
             :style="{ color: property.fields.price.color }"
           >
             ￥{{ fenToYuan(spu.price || Infinity) }}
@@ -179,13 +171,13 @@ const calculateWidth = () => {
           <!-- 市场价 -->
           <span
             v-if="property.fields.marketPrice.show && spu.marketPrice"
-            class="ml-1 text-[10px] line-through"
+            class="ml-[4px] text-[10px] line-through"
             :style="{ color: property.fields.marketPrice.color }"
           >
-            ￥{{ fenToYuan(spu.marketPrice) }}
+            ￥{{ fenToYuan(spu.marketPrice!) }}
           </span>
         </div>
-        <div class="text-xs">
+        <div class="text-[12px]">
           <!-- 销量 -->
           <span
             v-if="property.fields.salesCount.show"
@@ -203,11 +195,11 @@ const calculateWidth = () => {
         </div>
       </div>
       <!-- 购买按钮 -->
-      <div class="absolute bottom-2 right-2">
+      <div class="absolute bottom-[8px] right-[8px]">
         <!-- 文字按钮 -->
         <span
           v-if="property.btnBuy.type === 'text'"
-          class="rounded-full px-3 py-1 text-xs text-white"
+          class="rounded-full px-[12px] py-[4px] text-[12px] text-white"
           :style="{
             background: `linear-gradient(to right, ${property.btnBuy.bgBeginColor}, ${property.btnBuy.bgEndColor}`,
           }"
@@ -217,7 +209,7 @@ const calculateWidth = () => {
         <!-- 图片按钮 -->
         <ElImage
           v-else
-          class="h-7 w-7 rounded-full"
+          class="h-[28px] w-[28px] rounded-full"
           fit="cover"
           :src="property.btnBuy.imgUrl"
         />
@@ -225,5 +217,3 @@ const calculateWidth = () => {
     </div>
   </div>
 </template>
-
-<style scoped lang="scss"></style>
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-seckill/property.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-seckill/property.vue
index db6bf9b4a..1b2d2288b 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-seckill/property.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-seckill/property.vue
@@ -1,11 +1,6 @@
 <script setup lang="ts">
 import type { PromotionSeckillProperty } from './config';
 
-import type { MallSeckillActivityApi } from '#/api/mall/promotion/seckill/seckillActivity';
-
-import { onMounted, ref } from 'vue';
-
-import { CommonStatusEnum } from '@vben/constants';
 import { IconifyIcon } from '@vben/icons';
 
 import { useVModel } from '@vueuse/core';
@@ -19,29 +14,23 @@ import {
   ElRadioGroup,
   ElSlider,
   ElSwitch,
+  ElTooltip,
 } from 'element-plus';
 
-import * as SeckillActivityApi from '#/api/mall/promotion/seckill/seckillActivity';
 import UploadImg from '#/components/upload/image-upload.vue';
 import { ColorInput } from '#/views/mall/promotion/components';
-import SeckillShowcase from '#/views/mall/promotion/seckill/components/seckill-showcase.vue';
+import { SeckillShowcase } from '#/views/mall/promotion/seckill/components';
 
-// 秒杀属性面板
+import ComponentContainerProperty from '../../component-container-property.vue';
+
+/** 秒杀属性面板 */
 defineOptions({ name: 'PromotionSeckillProperty' });
 
 const props = defineProps<{ modelValue: PromotionSeckillProperty }>();
+
 const emit = defineEmits(['update:modelValue']);
+
 const formData = useVModel(props, 'modelValue', emit);
-// 活动列表
-const activityList = ref<MallSeckillActivityApi.SeckillActivity[]>([]);
-onMounted(async () => {
-  const { list } = await SeckillActivityApi.getSeckillActivityPage({
-    pageNo: 1,
-    pageSize: 10,
-    status: CommonStatusEnum.ENABLE,
-  });
-  activityList.value = list;
-});
 </script>
 
 <template>
@@ -68,10 +57,10 @@ onMounted(async () => {
                 <IconifyIcon icon="fluent:text-column-two-24-filled" />
               </ElRadioButton>
             </ElTooltip>
-            <!--<el-tooltip class="item" content="三列" placement="bottom">
-              <el-radio-button value="threeCol">
+            <!--<ElTooltip class="item" content="三列" placement="bottom">
+              <ElRadioButton value="threeCol">
                 <IconifyIcon icon="fluent:text-column-three-24-filled" />
-              </el-radio-button>
+              </ElRadioButton>
             </ElTooltip>-->
           </ElRadioGroup>
         </ElFormItem>
@@ -116,14 +105,14 @@ onMounted(async () => {
         <ElFormItem label="角标" prop="badge.show">
           <ElSwitch v-model="formData.badge.show" />
         </ElFormItem>
-        <ElFormItem v-if="formData.badge.show" label="角标" prop="badge.imgUrl">
+        <ElFormItem label="角标" prop="badge.imgUrl" v-if="formData.badge.show">
           <UploadImg
             v-model="formData.badge.imgUrl"
             height="44px"
             width="72px"
             :show-description="false"
           >
-            <template #tip> 建议尺寸：36 * 22</template>
+            <template #tip> 建议尺寸：36 * 22 </template>
           </UploadImg>
         </ElFormItem>
       </ElCard>
@@ -193,5 +182,3 @@ onMounted(async () => {
     </ElForm>
   </ComponentContainerProperty>
 </template>
-
-<style scoped lang="scss"></style>
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/index.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/index.vue
index aa7484d63..937c4648d 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/index.vue
@@ -11,9 +11,9 @@ defineOptions({ name: 'TabBar' });
 defineProps<{ property: TabBarProperty }>();
 </script>
 <template>
-  <div class="tab-bar">
+  <div class="z-[2] w-full">
     <div
-      class="tab-bar-bg"
+      class="flex flex-row items-center justify-around py-2"
       :style="{
         background:
           property.style.bgType === 'color'
@@ -26,7 +26,7 @@ defineProps<{ property: TabBarProperty }>();
       <div
         v-for="(item, index) in property.items"
         :key="index"
-        class="tab-bar-item"
+        class="tab-bar-item flex w-full flex-col items-center justify-center text-xs"
       >
         <ElImage :src="index === 0 ? item.activeIconUrl : item.iconUrl">
           <template #error>
@@ -48,32 +48,12 @@ defineProps<{ property: TabBarProperty }>();
   </div>
 </template>
 <style lang="scss" scoped>
-.tab-bar {
-  z-index: 2;
-  width: 100%;
-
-  .tab-bar-bg {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-around;
-    padding: 8px 0;
-
-    .tab-bar-item {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      width: 100%;
-      font-size: 12px;
-
-      :deep(img),
-      .el-icon {
-        width: 26px;
-        height: 26px;
-        border-radius: 4px;
-      }
-    }
+.tab-bar-item {
+  :deep(img),
+  .el-icon {
+    width: 26px;
+    height: 26px;
+    border-radius: 4px;
   }
 }
 </style>
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/index.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/index.vue
index 8ee389d88..21731b8a6 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/index.vue
@@ -11,7 +11,10 @@ defineOptions({ name: 'TitleBar' });
 defineProps<{ property: TitleBarProperty }>();
 </script>
 <template>
-  <div class="title-bar" :style="{ height: `${property.height}px` }">
+  <div
+    class="relative box-border min-h-[20px] w-full"
+    :style="{ height: `${property.height}px` }"
+  >
     <ElImage
       v-if="property.bgImgUrl"
       :src="property.bgImgUrl"
@@ -51,7 +54,7 @@ defineProps<{ property: TitleBarProperty }>();
     </div>
     <!-- 更多 -->
     <div
-      class="more"
+      class="absolute bottom-0 right-2 top-0 m-auto flex items-center justify-center text-[10px] text-[#969799]"
       v-show="property.more.show"
       :style="{
         color: property.descriptionColor,
@@ -64,25 +67,3 @@ defineProps<{ property: TitleBarProperty }>();
     </div>
   </div>
 </template>
-<style scoped lang="scss">
-.title-bar {
-  position: relative;
-  box-sizing: border-box;
-  width: 100%;
-  min-height: 20px;
-
-  /* 更多 */
-  .more {
-    position: absolute;
-    top: 0;
-    right: 8px;
-    bottom: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin: auto;
-    font-size: 10px;
-    color: #969799;
-  }
-}
-</style>
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-coupon/index.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-coupon/index.vue
index 2df2df328..981e99424 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-coupon/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-coupon/index.vue
@@ -13,5 +13,3 @@ defineProps<{ property: UserCouponProperty }>();
     src="https://shopro.sheepjs.com/admin/static/images/shop/decorate/couponCardStyle.png"
   />
 </template>
-
-<style scoped lang="scss"></style>
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-coupon/property.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-coupon/property.vue
index 488bf3168..9a5633b36 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-coupon/property.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-coupon/property.vue
@@ -16,5 +16,3 @@ const formData = useVModel(props, 'modelValue', emit);
 <template>
   <ComponentContainerProperty v-model="formData.style" />
 </template>
-
-<style scoped lang="scss"></style>
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/user-wallet/property.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-wallet/property.vue
index 74b374535..fc7adf438 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-wallet/property.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-wallet/property.vue
@@ -18,5 +18,3 @@ const formData = useVModel(props, 'modelValue', emit);
 <template>
   <ComponentContainerProperty v-model="formData.style" />
 </template>
-
-<style scoped lang="scss"></style>
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/diy-editor/index.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/index.vue
index 8d3fda28b..97fc7aa3a 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/index.vue
@@ -112,6 +112,11 @@ watch(
     if (!val || selectedComponentIndex.value === -1) {
       return;
     }
+    // 如果是基础设置页，默认选中的索引改成 -1，为了防止删除组件后切换到此页导致报错
+    // https://gitee.com/yudaocode/yudao-ui-admin-vue3/pulls/792
+    if (props.showTabBar) {
+      selectedComponentIndex.value = -1;
+    }
     pageComponents.value[selectedComponentIndex.value] =
       selectedComponent.value!;
   },
@@ -339,10 +344,7 @@ onMounted(() => {
           />
         </ElAside>
         <!-- 中心：设计区域（ComponentContainer） -->
-        <ElContainer
-          class="editor-center page-prop-area"
-          @click="handlePageSelected"
-        >
+        <div class="editor-center page-prop-area" @click="handlePageSelected">
           <!-- 手机顶部 -->
           <div class="editor-design-top">
             <!-- 手机顶部状态栏 -->
@@ -373,11 +375,19 @@ onMounted(() => {
             />
           </div>
           <!-- 手机页面编辑区域 -->
-          <ElScrollbar class="phone-container">
+          <ElScrollbar
+            :view-style="{
+              backgroundColor: pageConfigComponent.property.backgroundColor,
+              backgroundImage: `url(${pageConfigComponent.property.backgroundImage})`,
+            }"
+            height="100%"
+            view-class="phone-container"
+            wrap-class="editor-design-center page-prop-area"
+          >
             <draggable
               v-model="pageComponents"
               :animation="200"
-              :force-fallback="true"
+              :force-fallback="false"
               class="page-prop-area drag-area"
               filter=".component-toolbar"
               ghost-class="draggable-ghost"
@@ -415,39 +425,45 @@ onMounted(() => {
             />
           </div>
           <!-- 固定布局的组件 操作按钮区 -->
-          <div class="fixed-component-action-group gap-2">
+          <div class="fixed-component-action-group">
             <ElTag
               v-if="showPageConfig"
-              :color="
+              :effect="
                 selectedComponent?.uid === pageConfigComponent.uid
-                  ? 'blue'
-                  : 'default'
+                  ? 'dark'
+                  : 'plain'
+              "
+              :type="
+                selectedComponent?.uid === pageConfigComponent.uid
+                  ? 'primary'
+                  : 'info'
               "
-              :bordered="false"
               size="large"
               @click="handleComponentSelected(pageConfigComponent)"
             >
               <IconifyIcon :icon="pageConfigComponent.icon" :size="12" />
-              <ElText>{{ pageConfigComponent.name }}</ElText>
+              <span>{{ pageConfigComponent.name }}</span>
             </ElTag>
             <template v-for="(component, index) in pageComponents" :key="index">
               <ElTag
                 v-if="component.position === 'fixed'"
-                :color="
-                  selectedComponent?.uid === component.uid ? 'blue' : 'default'
+                :effect="
+                  selectedComponent?.uid === component.uid ? 'dark' : 'plain'
+                "
+                :type="
+                  selectedComponent?.uid === component.uid ? 'primary' : 'info'
                 "
-                :bordered="false"
                 closable
                 size="large"
                 @click="handleComponentSelected(component)"
                 @close="handleDeleteComponent(index)"
               >
                 <IconifyIcon :icon="component.icon" :size="12" />
-                <ElText>{{ component.name }}</ElText>
+                <span>{{ component.name }}</span>
               </ElTag>
             </template>
           </div>
-        </ElContainer>
+        </div>
         <!-- 右侧：属性面板（ComponentContainerProperty） -->
         <ElAside
           v-if="selectedComponent?.property"
@@ -457,7 +473,7 @@ onMounted(() => {
           <ElCard
             body-class="h-[calc(100%-var(--el-card-padding)-var(--el-card-padding))]"
             class="h-full"
-            :bordered="false"
+            shadow="never"
           >
             <!-- 组件名称 -->
             <template #header>
@@ -621,6 +637,7 @@ $phone-width: 375px;
         right: 16px;
         display: flex;
         flex-direction: column;
+        gap: 8px;
 
         :deep(.el-tag) {
           border: none;
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/apps/web-ele/src/views/mall/promotion/coupon/data.ts b/apps/web-ele/src/views/mall/promotion/coupon/data.ts
index c16369b58..2c5dc8b40 100644
--- a/apps/web-ele/src/views/mall/promotion/coupon/data.ts
+++ b/apps/web-ele/src/views/mall/promotion/coupon/data.ts
@@ -101,6 +101,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
       formatter: 'formatDateTime',
     },
     {
+      field: 'actions',
       title: '操作',
       width: 100,
       fixed: 'right',
diff --git a/apps/web-ele/src/views/mall/promotion/coupon/index.vue b/apps/web-ele/src/views/mall/promotion/coupon/index.vue
index 9e626dff6..17580fcfd 100644
--- a/apps/web-ele/src/views/mall/promotion/coupon/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/coupon/index.vue
@@ -7,7 +7,6 @@ import { ref } from 'vue';
 import { DocAlert, Page } from '@vben/common-ui';
 import { DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
-import { $t } from '@vben/locales';
 
 import { ElLoading, ElMessage, ElTabPane, ElTabs } from 'element-plus';
 
@@ -32,7 +31,7 @@ function handleRefresh() {
 /** 删除优惠券 */
 async function handleDelete(row: MallCouponApi.Coupon) {
   const loadingInstance = ElLoading.service({
-    text: $t('ui.actionMessage.deleting', [row.name]),
+    text: '回收中...',
   });
   try {
     await deleteCoupon(row.id!);
diff --git a/apps/web-ele/src/views/mall/promotion/point/components/index.ts b/apps/web-ele/src/views/mall/promotion/point/components/index.ts
new file mode 100644
index 000000000..bb0194057
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/point/components/index.ts
@@ -0,0 +1 @@
+export { default as PointShowcase } from './showcase.vue';
diff --git a/apps/web-ele/src/views/mall/promotion/point/components/point-showcase.vue b/apps/web-ele/src/views/mall/promotion/point/components/point-showcase.vue
deleted file mode 100644
index 6a39d3803..000000000
--- a/apps/web-ele/src/views/mall/promotion/point/components/point-showcase.vue
+++ /dev/null
@@ -1,178 +0,0 @@
-<script lang="ts" setup>
-import type { MallPointActivityApi } from '#/api/mall/promotion/point';
-
-import { computed, ref, watch } from 'vue';
-
-import { ElImage, ElTooltip } from 'element-plus';
-
-import * as PointActivityApi from '#/api/mall/promotion/point';
-
-import PointTableSelect from './point-table-select.vue';
-
-// 活动橱窗，一般用于装修时使用
-// 提供功能：展示活动列表、添加活动、删除活动
-defineOptions({ name: 'PointShowcase' });
-
-const props = defineProps({
-  modelValue: {
-    type: [Number, Array],
-    required: true,
-  },
-  // 限制数量：默认不限制
-  limit: {
-    type: Number,
-    default: Number.MAX_VALUE,
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-const emit = defineEmits(['update:modelValue', 'change']);
-
-// 计算是否可以添加
-const canAdd = computed(() => {
-  // 情况一：禁用时不可以添加
-  if (props.disabled) return false;
-  // 情况二：未指定限制数量时，可以添加
-  if (!props.limit) return true;
-  // 情况三：检查已添加数量是否小于限制数量
-  return pointActivityList.value.length < props.limit;
-});
-
-// 拼团活动列表
-const pointActivityList = ref<MallPointActivityApi.PointActivity[]>([]);
-
-watch(
-  () => props.modelValue,
-  async () => {
-    let ids;
-    if (Array.isArray(props.modelValue)) {
-      ids = props.modelValue;
-    } else {
-      ids = props.modelValue ? [props.modelValue] : [];
-    }
-
-    // 不需要返显
-    if (ids.length === 0) {
-      pointActivityList.value = [];
-      return;
-    }
-    // 只有活动发生变化之后，才会查询活动
-    if (
-      pointActivityList.value.length === 0 ||
-      pointActivityList.value.some(
-        (pointActivity) => !ids.includes(pointActivity.id!),
-      )
-    ) {
-      pointActivityList.value =
-        await PointActivityApi.getPointActivityListByIds(ids as number[]);
-    }
-  },
-  { immediate: true },
-);
-
-/** 活动表格选择对话框 */
-const pointActivityTableSelectRef = ref();
-// 打开对话框
-const openSeckillActivityTableSelect = () => {
-  pointActivityTableSelectRef.value.open(pointActivityList.value);
-};
-
-/**
- * 选择活动后触发
- * @param activityList 选中的活动列表
- */
-const handleActivitySelected = (
-  activityList:
-    | MallPointActivityApi.PointActivity
-    | MallPointActivityApi.PointActivity[],
-) => {
-  pointActivityList.value = Array.isArray(activityList)
-    ? activityList
-    : [activityList];
-  emitActivityChange();
-};
-
-/**
- * 删除活动
- * @param index 活动索引
- */
-const handleRemoveActivity = (index: number) => {
-  pointActivityList.value.splice(index, 1);
-  emitActivityChange();
-};
-const emitActivityChange = () => {
-  if (props.limit === 1) {
-    const pointActivity =
-      pointActivityList.value.length > 0 ? pointActivityList.value[0] : null;
-    emit('update:modelValue', pointActivity?.id || 0);
-    emit('change', pointActivity);
-  } else {
-    emit(
-      'update:modelValue',
-      pointActivityList.value.map((pointActivity) => pointActivity.id),
-    );
-    emit('change', pointActivityList.value);
-  }
-};
-</script>
-<template>
-  <div class="gap-8px flex flex-wrap items-center">
-    <div
-      v-for="(pointActivity, index) in pointActivityList"
-      :key="pointActivity.id"
-      class="select-box spu-pic"
-    >
-      <ElTooltip :content="pointActivity.spuName">
-        <div class="relative h-full w-full">
-          <ElImage :src="pointActivity.picUrl" class="h-full w-full" />
-          <IconifyIcon
-            v-show="!disabled"
-            class="del-icon"
-            icon="ep:circle-close-filled"
-            @click="handleRemoveActivity(index)"
-          />
-        </div>
-      </ElTooltip>
-    </div>
-    <ElTooltip v-if="canAdd" content="选择活动">
-      <div class="select-box" @click="openSeckillActivityTableSelect">
-        <IconifyIcon icon="ep:plus" />
-      </div>
-    </ElTooltip>
-  </div>
-  <!-- 拼团活动选择对话框（表格形式） -->
-  <PointTableSelect
-    ref="pointActivityTableSelectRef"
-    :multiple="limit !== 1"
-    @change="handleActivitySelected"
-  />
-</template>
-
-<style lang="scss" scoped>
-.select-box {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 60px;
-  height: 60px;
-  cursor: pointer;
-  border: 1px dashed var(--el-border-color-darker);
-  border-radius: 8px;
-}
-
-.spu-pic {
-  position: relative;
-}
-
-.del-icon {
-  position: absolute;
-  top: -10px;
-  right: -10px;
-  z-index: 1;
-  width: 20px !important;
-  height: 20px !important;
-}
-</style>
diff --git a/apps/web-ele/src/views/mall/promotion/point/components/point-table-select.vue b/apps/web-ele/src/views/mall/promotion/point/components/point-table-select.vue
deleted file mode 100644
index e850d8eb3..000000000
--- a/apps/web-ele/src/views/mall/promotion/point/components/point-table-select.vue
+++ /dev/null
@@ -1,354 +0,0 @@
-<script lang="ts" setup>
-import type { MallPointActivityApi } from '#/api/mall/promotion/point';
-
-import { computed, ref } from 'vue';
-
-import { ContentWrap } from '@vben/common-ui';
-import { DICT_TYPE } from '@vben/constants';
-import { getDictOptions } from '@vben/hooks';
-import { IconifyIcon } from '@vben/icons';
-import { dateFormatter, fenToYuanFormat } from '@vben/utils';
-
-import { CHANGE_EVENT } from 'element-plus';
-
-import * as PointActivityApi from '#/api/mall/promotion/point';
-
-/**
- * 活动表格选择对话框
- * 1. 单选模式：
- *    1.1 点击表格左侧的单选框时，结束选择，并关闭对话框
- *    1.2 再次打开时，保持选中状态
- * 2. 多选模式：
- *    2.1 点击表格左侧的多选框时，记录选中的活动
- *    2.2 切换分页时，保持活动的选中状态
- *    2.3 点击右下角的确定按钮时，结束选择，关闭对话框
- *    2.4 再次打开时，保持选中状态
- */
-defineOptions({ name: 'PointTableSelect' });
-
-defineProps({
-  // 多选模式
-  multiple: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-/** 确认选择时的触发事件 */
-const emits = defineEmits<{
-  (
-    e: 'change',
-    v:
-      | any
-      | MallPointActivityApi.PointActivity
-      | MallPointActivityApi.PointActivity[],
-  ): void;
-}>();
-// 列表的总页数
-const total = ref(0);
-// 列表的数据
-const list = ref<MallPointActivityApi.PointActivity[]>([]);
-// 列表的加载中
-const loading = ref(false);
-// 弹窗的是否展示
-const dialogVisible = ref(false);
-// 查询参数
-const queryParams = ref({
-  pageNo: 1,
-  pageSize: 10,
-  name: null,
-  status: undefined,
-});
-const getRedeemedQuantity = computed(
-  () => (row: any) => (row.totalStock || 0) - (row.stock || 0),
-); // 获得商品已兑换数量
-/** 打开弹窗 */
-const open = (pointList?: MallPointActivityApi.PointActivity[]) => {
-  // 重置
-  checkedActivities.value = [];
-  checkedStatus.value = {};
-  isCheckAll.value = false;
-  isIndeterminate.value = false;
-
-  // 处理已选中
-  if (pointList && pointList.length > 0) {
-    checkedActivities.value = [...pointList];
-    checkedStatus.value = Object.fromEntries(
-      pointList.map((activityVO) => [activityVO.id, true]),
-    );
-  }
-
-  dialogVisible.value = true;
-  resetQuery();
-};
-// 提供 open 方法，用于打开弹窗
-defineExpose({ open });
-
-/** 查询列表 */
-const getList = async () => {
-  loading.value = true;
-  try {
-    const data = await PointActivityApi.getPointActivityPage(queryParams.value);
-    list.value = data.list;
-    total.value = data.total;
-    // checkbox绑定undefined会有问题，需要给一个bool值
-    list.value.forEach(
-      (activityVO) =>
-        (checkedStatus.value[activityVO.id] =
-          checkedStatus.value[activityVO.id] || false),
-    );
-    // 计算全选框状态
-    calculateIsCheckAll();
-  } finally {
-    loading.value = false;
-  }
-};
-
-/** 搜索按钮操作 */
-const handleQuery = () => {
-  queryParams.value.pageNo = 1;
-  getList();
-};
-
-/** 重置按钮操作 */
-const resetQuery = () => {
-  queryParams.value = {
-    pageNo: 1,
-    pageSize: 10,
-    name: null,
-    status: undefined,
-  };
-  getList();
-};
-
-// 是否全选
-const isCheckAll = ref(false);
-// 全选框是否处于中间状态：不是全部选中 && 任意一个选中
-const isIndeterminate = ref(false);
-// 选中的活动
-const checkedActivities = ref<MallPointActivityApi.PointActivity[]>([]);
-// 选中状态：key为活动ID，value为是否选中
-const checkedStatus = ref<Record<string, boolean>>({});
-
-// 选中的活动 activityId
-const selectedActivityId = ref();
-/** 单选中时触发 */
-const handleSingleSelected = (
-  pointActivityVO: MallPointActivityApi.PointActivity,
-) => {
-  emits(CHANGE_EVENT, pointActivityVO);
-  // 关闭弹窗
-  dialogVisible.value = false;
-  // 记住上次选择的ID
-  selectedActivityId.value = pointActivityVO.id;
-};
-
-/** 多选完成 */
-const handleEmitChange = () => {
-  // 关闭弹窗
-  dialogVisible.value = false;
-  emits(CHANGE_EVENT, [...checkedActivities.value]);
-};
-
-/** 全选/全不选 */
-const handleCheckAll = (checked: boolean) => {
-  isCheckAll.value = checked;
-  isIndeterminate.value = false;
-
-  list.value.forEach((pointActivity) =>
-    handleCheckOne(checked, pointActivity, false),
-  );
-};
-
-/**
- * 选中一行
- * @param checked 是否选中
- * @param pointActivity 活动
- * @param isCalcCheckAll 是否计算全选
- */
-const handleCheckOne = (
-  checked: boolean,
-  pointActivity: MallPointActivityApi.PointActivity,
-  isCalcCheckAll: boolean,
-) => {
-  if (checked) {
-    checkedActivities.value.push(pointActivity);
-    checkedStatus.value[pointActivity.id] = true;
-  } else {
-    const index = findCheckedIndex(pointActivity);
-    if (index > -1) {
-      checkedActivities.value.splice(index, 1);
-      checkedStatus.value[pointActivity.id] = false;
-      isCheckAll.value = false;
-    }
-  }
-
-  // 计算全选框状态
-  if (isCalcCheckAll) {
-    calculateIsCheckAll();
-  }
-};
-
-// 查找活动在已选中活动列表中的索引
-const findCheckedIndex = (activityVO: MallPointActivityApi.PointActivity) =>
-  checkedActivities.value.findIndex((item) => item.id === activityVO.id);
-
-// 计算全选框状态
-const calculateIsCheckAll = () => {
-  isCheckAll.value = list.value.every(
-    (activityVO) => checkedStatus.value[activityVO.id],
-  );
-  // 计算中间状态：不是全部选中 && 任意一个选中
-  isIndeterminate.value =
-    !isCheckAll.value &&
-    list.value.some((activityVO) => checkedStatus.value[activityVO.id]);
-};
-</script>
-
-<template>
-  <Dialog
-    v-model="dialogVisible"
-    :append-to-body="true"
-    title="选择活动"
-    width="70%"
-  >
-    <ContentWrap>
-      <!-- 搜索工作栏 -->
-      <el-form
-        :inline="true"
-        :model="queryParams"
-        class="-mb-15px"
-        label-width="68px"
-      >
-        <el-form-item label="活动状态" prop="status">
-          <el-select
-            v-model="queryParams.status"
-            class="!w-240px"
-            clearable
-            placeholder="请选择活动状态"
-          >
-            <el-option
-              v-for="dict in getDictOptions(DICT_TYPE.COMMON_STATUS, 'number')"
-              :key="dict.value"
-              :label="dict.label"
-              :value="dict.value"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item>
-          <el-button @click="handleQuery">
-            <IconifyIcon class="mr-5px" icon="ep:search" />
-            搜索
-          </el-button>
-          <el-button @click="resetQuery">
-            <IconifyIcon class="mr-5px" icon="ep:refresh" />
-            重置
-          </el-button>
-        </el-form-item>
-      </el-form>
-      <el-table v-loading="loading" :data="list" show-overflow-tooltip>
-        <!-- 1. 多选模式（不能使用type="selection"，Element会忽略Header插槽） -->
-        <el-table-column v-if="multiple" width="55">
-          <template #header>
-            <el-checkbox
-              v-model="isCheckAll"
-              :indeterminate="isIndeterminate"
-              @change="handleCheckAll"
-            />
-          </template>
-          <template #default="{ row }">
-            <el-checkbox
-              v-model="checkedStatus[row.id]"
-              @change="(checked: boolean) => handleCheckOne(checked, row, true)"
-            />
-          </template>
-        </el-table-column>
-        <!-- 2. 单选模式 -->
-        <el-table-column v-else label="#" width="55">
-          <template #default="{ row }">
-            <el-radio
-              v-model="selectedActivityId"
-              :value="row.id"
-              @change="handleSingleSelected(row)"
-            >
-              <!-- 空格不能省略，是为了让单选框不显示label，如果不指定label不会有选中的效果 -->
-              &nbsp;
-            </el-radio>
-          </template>
-        </el-table-column>
-        <el-table-column label="活动编号" min-width="80" prop="id" />
-        <el-table-column label="商品图片" min-width="80" prop="spuName">
-          <template #default="scope">
-            <el-image
-              :preview-src-list="[scope.row.picUrl]"
-              :src="scope.row.picUrl"
-              class="h-40px w-40px"
-              preview-teleported
-            />
-          </template>
-        </el-table-column>
-        <el-table-column label="商品标题" min-width="300" prop="spuName" />
-        <el-table-column
-          :formatter="fenToYuanFormat"
-          label="原价"
-          min-width="100"
-          prop="marketPrice"
-        />
-        <el-table-column label="原价" min-width="100" prop="marketPrice" />
-        <el-table-column
-          align="center"
-          label="活动状态"
-          min-width="100"
-          prop="status"
-        >
-          <template #default="scope">
-            <dict-tag
-              :type="DICT_TYPE.COMMON_STATUS"
-              :value="scope.row.status"
-            />
-          </template>
-        </el-table-column>
-        <el-table-column
-          align="center"
-          label="库存"
-          min-width="80"
-          prop="stock"
-        />
-        <el-table-column
-          align="center"
-          label="总库存"
-          min-width="80"
-          prop="totalStock"
-        />
-        <el-table-column
-          align="center"
-          label="已兑换数量"
-          min-width="100"
-          prop="redeemedQuantity"
-        >
-          <template #default="{ row }">
-            {{ getRedeemedQuantity(row) }}
-          </template>
-        </el-table-column>
-        <el-table-column
-          :formatter="dateFormatter"
-          align="center"
-          label="创建时间"
-          prop="createTime"
-          width="180px"
-        />
-      </el-table>
-      <!-- 分页 -->
-      <Pagination
-        v-model:limit="queryParams.pageSize"
-        v-model:page="queryParams.pageNo"
-        :total="total"
-        @pagination="getList"
-      />
-    </ContentWrap>
-    <template v-if="multiple" #footer>
-      <el-button type="primary" @click="handleEmitChange">确 定</el-button>
-      <el-button @click="dialogVisible = false">取 消</el-button>
-    </template>
-  </Dialog>
-</template>
diff --git a/apps/web-ele/src/views/mall/promotion/point/components/showcase.vue b/apps/web-ele/src/views/mall/promotion/point/components/showcase.vue
new file mode 100644
index 000000000..95aceb9ec
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/point/components/showcase.vue
@@ -0,0 +1,149 @@
+<!-- 积分商城活动橱窗组件：用于展示和选择积分商城活动 -->
+<script lang="ts" setup>
+import type { MallPointActivityApi } from '#/api/mall/promotion/point';
+
+import { computed, ref, watch } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { ElImage, ElTooltip } from 'element-plus';
+
+import { getPointActivityListByIds } from '#/api/mall/promotion/point';
+
+import PointTableSelect from './table-select.vue';
+
+interface PointShowcaseProps {
+  modelValue?: number | number[];
+  limit?: number;
+  disabled?: boolean;
+}
+
+const props = withDefaults(defineProps<PointShowcaseProps>(), {
+  modelValue: undefined,
+  limit: Number.MAX_VALUE,
+  disabled: false,
+});
+
+const emit = defineEmits(['update:modelValue', 'change']);
+
+const pointActivityList = ref<MallPointActivityApi.PointActivity[]>([]); // 已选择的活动列表
+const pointTableSelectRef = ref<InstanceType<typeof PointTableSelect>>(); // 活动选择表格组件引用
+const isMultiple = computed(() => props.limit !== 1); // 是否为多选模式
+
+/** 计算是否可以添加 */
+const canAdd = computed(() => {
+  if (props.disabled) {
+    return false;
+  }
+  if (!props.limit) {
+    return true;
+  }
+  return pointActivityList.value.length < props.limit;
+});
+
+/** 监听 modelValue 变化，加载活动详情 */
+watch(
+  () => props.modelValue,
+  async (newValue) => {
+    // eslint-disable-next-line unicorn/no-nested-ternary
+    const ids = Array.isArray(newValue) ? newValue : newValue ? [newValue] : [];
+    if (ids.length === 0) {
+      pointActivityList.value = [];
+      return;
+    }
+    // 只有活动发生变化时才重新查询
+    if (
+      pointActivityList.value.length === 0 ||
+      pointActivityList.value.some((activity) => !ids.includes(activity.id!))
+    ) {
+      pointActivityList.value = await getPointActivityListByIds(ids);
+    }
+  },
+  { immediate: true },
+);
+
+/** 打开活动选择对话框 */
+function handleOpenActivitySelect() {
+  pointTableSelectRef.value?.open(pointActivityList.value);
+}
+
+/** 选择活动后触发 */
+function handleActivitySelected(
+  activities:
+    | MallPointActivityApi.PointActivity
+    | MallPointActivityApi.PointActivity[],
+) {
+  pointActivityList.value = Array.isArray(activities)
+    ? activities
+    : [activities];
+  emitActivityChange();
+}
+
+/** 删除活动 */
+function handleRemoveActivity(index: number) {
+  pointActivityList.value.splice(index, 1);
+  emitActivityChange();
+}
+
+/** 触发变更事件 */
+function emitActivityChange() {
+  if (props.limit === 1) {
+    const activity =
+      pointActivityList.value.length > 0 ? pointActivityList.value[0] : null;
+    emit('update:modelValue', activity?.id || 0);
+    emit('change', activity);
+  } else {
+    emit(
+      'update:modelValue',
+      pointActivityList.value.map((activity) => activity.id!),
+    );
+    emit('change', pointActivityList.value);
+  }
+}
+</script>
+
+<template>
+  <div class="flex flex-wrap items-center gap-2">
+    <!-- 已选活动列表 -->
+    <div
+      v-for="(activity, index) in pointActivityList"
+      :key="activity.id"
+      class="group relative h-[60px] w-[60px] overflow-hidden rounded-lg"
+    >
+      <ElTooltip :content="activity.spuName">
+        <div class="relative h-full w-full">
+          <ElImage
+            :src="activity.picUrl"
+            class="h-full w-full rounded-lg object-cover"
+            :preview-src-list="[activity.picUrl!]"
+            fit="cover"
+          />
+          <!-- 删除按钮 -->
+          <IconifyIcon
+            v-if="!disabled"
+            icon="ep:circle-close-filled"
+            class="absolute -right-2 -top-2 cursor-pointer text-xl text-red-500 opacity-0 transition-opacity hover:text-red-600 group-hover:opacity-100"
+            @click="handleRemoveActivity(index)"
+          />
+        </div>
+      </ElTooltip>
+    </div>
+
+    <!-- 添加活动按钮 -->
+    <ElTooltip v-if="canAdd" content="选择活动">
+      <div
+        class="hover:border-primary hover:bg-primary/5 flex h-[60px] w-[60px] cursor-pointer items-center justify-center rounded-lg border-2 border-dashed transition-colors"
+        @click="handleOpenActivitySelect"
+      >
+        <IconifyIcon icon="ep:plus" class="text-xl text-gray-400" />
+      </div>
+    </ElTooltip>
+  </div>
+
+  <!-- 活动选择对话框 -->
+  <PointTableSelect
+    ref="pointTableSelectRef"
+    :multiple="isMultiple"
+    @change="handleActivitySelected"
+  />
+</template>
diff --git a/apps/web-ele/src/views/mall/promotion/point/components/table-select.vue b/apps/web-ele/src/views/mall/promotion/point/components/table-select.vue
new file mode 100644
index 000000000..eff545cba
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/point/components/table-select.vue
@@ -0,0 +1,239 @@
+<!-- 积分商城活动选择弹窗组件 -->
+<script lang="ts" setup>
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import type { MallPointActivityApi } from '#/api/mall/promotion/point';
+
+import { computed } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+import { dateFormatter, fenToYuanFormat } from '@vben/utils';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getPointActivityPage } from '#/api/mall/promotion/point';
+
+interface PointTableSelectProps {
+  multiple?: boolean; // 是否单选：true - checkbox；false - radio
+}
+
+const props = withDefaults(defineProps<PointTableSelectProps>(), {
+  multiple: false,
+});
+
+const emit = defineEmits<{
+  change: [
+    activity:
+      | MallPointActivityApi.PointActivity
+      | MallPointActivityApi.PointActivity[],
+  ];
+}>();
+
+/** 单选：处理选中变化 */
+function handleRadioChange() {
+  const selectedRow =
+    gridApi.grid.getRadioRecord() as MallPointActivityApi.PointActivity;
+  if (selectedRow) {
+    emit('change', selectedRow);
+    modalApi.close();
+  }
+}
+
+/** 计算已兑换数量 */
+const getRedeemedQuantity = (row: MallPointActivityApi.PointActivity) =>
+  (row.totalStock || 0) - (row.stock || 0);
+
+/** 搜索表单 Schema */
+const formSchema = computed<VbenFormSchema[]>(() => [
+  {
+    fieldName: 'status',
+    label: '活动状态',
+    component: 'Select',
+    componentProps: {
+      options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+      placeholder: '请选择活动状态',
+      clearable: true,
+    },
+  },
+]);
+
+/** 表格列配置 */
+const gridColumns = computed<VxeGridProps['columns']>(() => {
+  const columns: VxeGridProps['columns'] = [];
+  if (props.multiple) {
+    columns.push({ type: 'checkbox', width: 55 });
+  } else {
+    columns.push({ type: 'radio', width: 55 });
+  }
+  columns.push(
+    {
+      field: 'id',
+      title: '活动编号',
+      minWidth: 100,
+      align: 'center',
+    },
+    {
+      field: 'picUrl',
+      title: '商品图片',
+      width: 100,
+      align: 'center',
+      cellRender: {
+        name: 'CellImage',
+      },
+    },
+    {
+      field: 'spuName',
+      title: '商品标题',
+      minWidth: 200,
+    },
+    {
+      field: 'marketPrice',
+      title: '原价',
+      minWidth: 100,
+      align: 'center',
+      formatter: ({ cellValue }) => fenToYuanFormat(cellValue),
+    },
+    {
+      field: 'status',
+      title: '活动状态',
+      minWidth: 100,
+      align: 'center',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      field: 'stock',
+      title: '库存',
+      minWidth: 80,
+      align: 'center',
+    },
+    {
+      field: 'totalStock',
+      title: '总库存',
+      minWidth: 80,
+      align: 'center',
+    },
+    {
+      field: 'redeemedQuantity',
+      title: '已兑换数量',
+      minWidth: 100,
+      align: 'center',
+      formatter: ({ row }) => getRedeemedQuantity(row),
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      width: 180,
+      align: 'center',
+      formatter: ({ cellValue }) => dateFormatter(cellValue),
+    },
+  );
+  return columns;
+});
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: formSchema.value,
+    layout: 'horizontal',
+    collapsed: false,
+  },
+  gridOptions: {
+    columns: gridColumns.value,
+    height: 500,
+    border: true,
+    checkboxConfig: {
+      reserve: true,
+    },
+    radioConfig: {
+      reserve: true,
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    proxyConfig: {
+      ajax: {
+        async query({ page }: any, formValues: any) {
+          return await getPointActivityPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+  },
+  gridEvents: {
+    radioChange: handleRadioChange,
+  },
+});
+
+const [Modal, modalApi] = useVbenModal({
+  destroyOnClose: true,
+  showConfirmButton: props.multiple, // 特殊：radio 单选情况下，走 handleRadioChange 处理。
+  onConfirm: () => {
+    const selectedRows =
+      gridApi.grid.getCheckboxRecords() as MallPointActivityApi.PointActivity[];
+    emit('change', selectedRows);
+    modalApi.close();
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      await gridApi.grid.clearCheckboxRow();
+      await gridApi.grid.clearRadioRow();
+      return;
+    }
+
+    // 1. 先查询数据
+    await gridApi.query();
+    // 2. 设置已选中行
+    const data = modalApi.getData<
+      MallPointActivityApi.PointActivity | MallPointActivityApi.PointActivity[]
+    >();
+    if (props.multiple && Array.isArray(data) && data.length > 0) {
+      setTimeout(() => {
+        const tableData = gridApi.grid.getTableData().fullData;
+        data.forEach((activity) => {
+          const row = tableData.find(
+            (item: MallPointActivityApi.PointActivity) =>
+              item.id === activity.id,
+          );
+          if (row) {
+            gridApi.grid.setCheckboxRow(row, true);
+          }
+        });
+      }, 300);
+    } else if (!props.multiple && data && !Array.isArray(data)) {
+      setTimeout(() => {
+        const tableData = gridApi.grid.getTableData().fullData;
+        const row = tableData.find(
+          (item: MallPointActivityApi.PointActivity) => item.id === data.id,
+        );
+        if (row) {
+          gridApi.grid.setRadioRow(row);
+        }
+      }, 300);
+    }
+  },
+});
+
+/** 对外暴露的方法 */
+defineExpose({
+  open: (
+    data?:
+      | MallPointActivityApi.PointActivity
+      | MallPointActivityApi.PointActivity[],
+  ) => {
+    modalApi.setData(data).open();
+  },
+});
+</script>
+
+<template>
+  <Modal title="选择活动" class="w-[950px]">
+    <Grid />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/mall/promotion/seckill/components/index.ts b/apps/web-ele/src/views/mall/promotion/seckill/components/index.ts
new file mode 100644
index 000000000..dd452161c
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/seckill/components/index.ts
@@ -0,0 +1 @@
+export { default as SeckillShowcase } from './showcase.vue';
diff --git a/apps/web-ele/src/views/mall/promotion/seckill/components/seckill-showcase.vue b/apps/web-ele/src/views/mall/promotion/seckill/components/seckill-showcase.vue
deleted file mode 100644
index b5699e828..000000000
--- a/apps/web-ele/src/views/mall/promotion/seckill/components/seckill-showcase.vue
+++ /dev/null
@@ -1,177 +0,0 @@
-<script lang="ts" setup>
-import type { MallSeckillActivityApi } from '#/api/mall/promotion/seckill/seckillActivity';
-
-import { computed, ref, watch } from 'vue';
-
-import { IconifyIcon } from '@vben/icons';
-
-import { ElImage, ElTooltip } from 'element-plus';
-
-import * as SeckillActivityApi from '#/api/mall/promotion/seckill/seckillActivity';
-import SeckillTableSelect from '#/views/mall/promotion/seckill/components/seckill-table-select.vue';
-
-// 活动橱窗，一般用于装修时使用
-// 提供功能：展示活动列表、添加活动、删除活动
-defineOptions({ name: 'SeckillShowcase' });
-
-const props = defineProps({
-  modelValue: {
-    type: [Number, Array],
-    required: true,
-  },
-  // 限制数量：默认不限制
-  limit: {
-    type: Number,
-    default: Number.MAX_VALUE,
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-const emit = defineEmits(['update:modelValue', 'change']);
-
-// 计算是否可以添加
-const canAdd = computed(() => {
-  // 情况一：禁用时不可以添加
-  if (props.disabled) return false;
-  // 情况二：未指定限制数量时，可以添加
-  if (!props.limit) return true;
-  // 情况三：检查已添加数量是否小于限制数量
-  return Activitys.value.length < props.limit;
-});
-
-// 拼团活动列表
-const Activitys = ref<MallSeckillActivityApi.SeckillActivity[]>([]);
-
-watch(
-  () => props.modelValue,
-  async () => {
-    let ids;
-    if (Array.isArray(props.modelValue)) {
-      ids = props.modelValue;
-    } else {
-      ids = props.modelValue ? [props.modelValue] : [];
-    }
-    // 不需要返显
-    if (ids.length === 0) {
-      Activitys.value = [];
-      return;
-    }
-    // 只有活动发生变化之后，才会查询活动
-    if (
-      Activitys.value.length === 0 ||
-      Activitys.value.some(
-        (seckillActivity) => !ids.includes(seckillActivity.id!),
-      )
-    ) {
-      Activitys.value = await SeckillActivityApi.getSeckillActivityListByIds(
-        ids as number[],
-      );
-    }
-  },
-  { immediate: true },
-);
-
-/** 活动表格选择对话框 */
-const seckillActivityTableSelectRef = ref();
-// 打开对话框
-const openSeckillActivityTableSelect = () => {
-  seckillActivityTableSelectRef.value.open(Activitys.value);
-};
-
-/**
- * 选择活动后触发
- * @param activityVOs 选中的活动列表
- */
-const handleActivitySelected = (
-  activityVOs:
-    | MallSeckillActivityApi.SeckillActivity
-    | MallSeckillActivityApi.SeckillActivity[],
-) => {
-  Activitys.value = Array.isArray(activityVOs) ? activityVOs : [activityVOs];
-  emitActivityChange();
-};
-
-/**
- * 删除活动
- * @param index 活动索引
- */
-const handleRemoveActivity = (index: number) => {
-  Activitys.value.splice(index, 1);
-  emitActivityChange();
-};
-const emitActivityChange = () => {
-  if (props.limit === 1) {
-    const seckillActivity =
-      Activitys.value.length > 0 ? Activitys.value[0] : null;
-    emit('update:modelValue', seckillActivity?.id || 0);
-    emit('change', seckillActivity);
-  } else {
-    emit(
-      'update:modelValue',
-      Activitys.value.map((seckillActivity) => seckillActivity.id),
-    );
-    emit('change', Activitys.value);
-  }
-};
-</script>
-<template>
-  <div class="gap-8px flex flex-wrap items-center">
-    <div
-      v-for="(seckillActivity, index) in Activitys"
-      :key="seckillActivity.id"
-      class="select-box spu-pic"
-    >
-      <ElTooltip :content="seckillActivity.name">
-        <div class="relative h-full w-full">
-          <ElImage :src="seckillActivity.picUrl" class="h-full w-full" />
-          <IconifyIcon
-            v-show="!disabled"
-            class="del-icon"
-            icon="ep:circle-close-filled"
-            @click="handleRemoveActivity(index)"
-          />
-        </div>
-      </ElTooltip>
-    </div>
-    <ElTooltip content="选择活动" v-if="canAdd">
-      <div class="select-box" @click="openSeckillActivityTableSelect">
-        <IconifyIcon icon="ep:plus" />
-      </div>
-    </ElTooltip>
-  </div>
-  <!-- 拼团活动选择对话框（表格形式） -->
-  <SeckillTableSelect
-    ref="seckillActivityTableSelectRef"
-    :multiple="limit !== 1"
-    @change="handleActivitySelected"
-  />
-</template>
-
-<style lang="scss" scoped>
-.select-box {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 60px;
-  height: 60px;
-  cursor: pointer;
-  border: 1px dashed var(--el-border-color-darker);
-  border-radius: 8px;
-}
-
-.spu-pic {
-  position: relative;
-}
-
-.del-icon {
-  position: absolute;
-  top: -10px;
-  right: -10px;
-  z-index: 1;
-  width: 20px !important;
-  height: 20px !important;
-}
-</style>
diff --git a/apps/web-ele/src/views/mall/promotion/seckill/components/seckill-table-select.vue b/apps/web-ele/src/views/mall/promotion/seckill/components/seckill-table-select.vue
deleted file mode 100644
index d188f315a..000000000
--- a/apps/web-ele/src/views/mall/promotion/seckill/components/seckill-table-select.vue
+++ /dev/null
@@ -1,388 +0,0 @@
-<script lang="ts" setup>
-import type { MallSeckillActivityApi } from '#/api/mall/promotion/seckill/seckillActivity';
-
-import { onMounted, ref } from 'vue';
-
-import { ContentWrap } from '@vben/common-ui';
-import { DICT_TYPE } from '@vben/constants';
-import { getDictOptions } from '@vben/hooks';
-import { IconifyIcon } from '@vben/icons';
-import {
-  dateFormatter,
-  fenToYuan,
-  fenToYuanFormat,
-  formatDate,
-  handleTree,
-} from '@vben/utils';
-
-import { CHANGE_EVENT } from 'element-plus';
-
-import * as ProductCategoryApi from '#/api/mall/product/category';
-import * as SeckillActivityApi from '#/api/mall/promotion/seckill/seckillActivity';
-
-/**
- * 活动表格选择对话框
- * 1. 单选模式：
- *    1.1 点击表格左侧的单选框时，结束选择，并关闭对话框
- *    1.2 再次打开时，保持选中状态
- * 2. 多选模式：
- *    2.1 点击表格左侧的多选框时，记录选中的活动
- *    2.2 切换分页时，保持活动的选中状态
- *    2.3 点击右下角的确定按钮时，结束选择，关闭对话框
- *    2.4 再次打开时，保持选中状态
- */
-defineOptions({ name: 'SeckillTableSelect' });
-
-defineProps({
-  // 多选模式
-  multiple: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-/** 确认选择时的触发事件 */
-const emits = defineEmits<{
-  change: [
-    SeckillActivityApi:
-      | any
-      | MallSeckillActivityApi.SeckillActivity
-      | MallSeckillActivityApi.SeckillActivity[],
-  ];
-}>();
-// 列表的总页数
-const total = ref(0);
-// 列表的数据
-const list = ref<MallSeckillActivityApi.SeckillActivity[]>([]);
-// 列表的加载中
-const loading = ref(false);
-// 弹窗的是否展示
-const dialogVisible = ref(false);
-// 查询参数
-const queryParams = ref({
-  pageNo: 1,
-  pageSize: 10,
-  name: undefined,
-  status: undefined,
-});
-
-/** 打开弹窗 */
-const open = (SeckillList?: MallSeckillActivityApi.SeckillActivity[]) => {
-  // 重置
-  checkedActivitys.value = [];
-  checkedStatus.value = {};
-  isCheckAll.value = false;
-  isIndeterminate.value = false;
-
-  // 处理已选中
-  if (SeckillList && SeckillList.length > 0) {
-    checkedActivitys.value = [...SeckillList];
-    checkedStatus.value = Object.fromEntries(
-      SeckillList.map((activityVO) => [activityVO.id, true]),
-    );
-  }
-
-  dialogVisible.value = true;
-  resetQuery();
-};
-// 提供 open 方法，用于打开弹窗
-defineExpose({ open });
-
-/** 查询列表 */
-const getList = async () => {
-  loading.value = true;
-  try {
-    const data = await SeckillActivityApi.getSeckillActivityPage(
-      queryParams.value,
-    );
-    list.value = data.list;
-    total.value = data.total;
-    // checkbox绑定undefined会有问题，需要给一个bool值
-    list.value.forEach(
-      (activityVO) =>
-        (checkedStatus.value[activityVO.id || ''] =
-          checkedStatus.value[activityVO.id || ''] || false),
-    );
-    // 计算全选框状态
-    calculateIsCheckAll();
-  } finally {
-    loading.value = false;
-  }
-};
-
-/** 搜索按钮操作 */
-const handleQuery = () => {
-  queryParams.value.pageNo = 1;
-  getList();
-};
-
-/** 重置按钮操作 */
-const resetQuery = () => {
-  queryParams.value = {
-    pageNo: 1,
-    pageSize: 10,
-    name: undefined,
-    status: undefined,
-  };
-  getList();
-};
-
-/**
- * 格式化拼团价格
- * @param products
- */
-const formatSeckillPrice = (
-  products: MallSeckillActivityApi.SeckillProduct[],
-) => {
-  const seckillPrice = Math.min(...products.map((item) => item.seckillPrice));
-  return `￥${fenToYuan(seckillPrice)}`;
-};
-
-// 是否全选
-const isCheckAll = ref(false);
-// 全选框是否处于中间状态：不是全部选中 && 任意一个选中
-const isIndeterminate = ref(false);
-// 选中的活动
-const checkedActivitys = ref<MallSeckillActivityApi.SeckillActivity[]>([]);
-// 选中状态：key为活动ID，value为是否选中
-const checkedStatus = ref<Record<string, boolean>>({});
-
-// 选中的活动 activityId
-const selectedActivityId = ref();
-/** 单选中时触发 */
-const handleSingleSelected = (
-  seckillActivityVO: MallSeckillActivityApi.SeckillActivity,
-) => {
-  emits(CHANGE_EVENT, seckillActivityVO);
-  // 关闭弹窗
-  dialogVisible.value = false;
-  // 记住上次选择的ID
-  selectedActivityId.value = seckillActivityVO.id;
-};
-
-/** 多选完成 */
-const handleEmitChange = () => {
-  // 关闭弹窗
-  dialogVisible.value = false;
-  emits(CHANGE_EVENT, [...checkedActivitys.value]);
-};
-
-/** 全选/全不选 */
-const handleCheckAll = (checked: boolean) => {
-  isCheckAll.value = checked;
-  isIndeterminate.value = false;
-
-  list.value.forEach((seckillActivity) =>
-    handleCheckOne(checked, seckillActivity, false),
-  );
-};
-
-/**
- * 选中一行
- * @param checked 是否选中
- * @param seckillActivity 活动
- * @param isCalcCheckAll 是否计算全选
- */
-const handleCheckOne = (
-  checked: boolean,
-  seckillActivity: MallSeckillActivityApi.SeckillActivity,
-  isCalcCheckAll: boolean,
-) => {
-  if (checked) {
-    checkedActivitys.value.push(seckillActivity);
-    checkedStatus.value[seckillActivity.id || ''] = true;
-  } else {
-    const index = findCheckedIndex(seckillActivity);
-    if (index > -1) {
-      checkedActivitys.value.splice(index, 1);
-      checkedStatus.value[seckillActivity.id || ''] = false;
-      isCheckAll.value = false;
-    }
-  }
-
-  // 计算全选框状态
-  if (isCalcCheckAll) {
-    calculateIsCheckAll();
-  }
-};
-
-// 查找活动在已选中活动列表中的索引
-const findCheckedIndex = (activityVO: MallSeckillActivityApi.SeckillActivity) =>
-  checkedActivitys.value.findIndex((item) => item.id === activityVO.id);
-
-// 计算全选框状态
-const calculateIsCheckAll = () => {
-  isCheckAll.value = list.value.every(
-    (activityVO) => checkedStatus.value[activityVO.id || ''],
-  );
-  // 计算中间状态：不是全部选中 && 任意一个选中
-  isIndeterminate.value =
-    !isCheckAll.value &&
-    list.value.some((activityVO) => checkedStatus.value[activityVO.id || '']);
-};
-
-// 分类列表
-const categoryList = ref();
-// 分类树
-const categoryTreeList = ref();
-/** 初始化 */
-onMounted(async () => {
-  await getList();
-  // 获得分类树
-  categoryList.value = await ProductCategoryApi.getCategoryList({});
-  categoryTreeList.value = handleTree(categoryList.value, 'id', 'parentId');
-});
-</script>
-
-<template>
-  <Dialog
-    v-model="dialogVisible"
-    :append-to-body="true"
-    title="选择活动"
-    width="70%"
-  >
-    <ContentWrap>
-      <!-- 搜索工作栏 -->
-      <el-form
-        :inline="true"
-        :model="queryParams"
-        class="-mb-15px"
-        label-width="68px"
-      >
-        <el-form-item label="活动名称" prop="name">
-          <el-input
-            v-model="queryParams.name"
-            placeholder="请输入活动名称"
-            clearable
-            @keyup.enter="handleQuery"
-            class="!w-240px"
-          />
-        </el-form-item>
-        <el-form-item label="活动状态" prop="status">
-          <el-select
-            v-model="queryParams.status"
-            placeholder="请选择活动状态"
-            clearable
-            class="!w-240px"
-          >
-            <el-option
-              v-for="dict in getDictOptions(DICT_TYPE.COMMON_STATUS, 'number')"
-              :key="dict.value"
-              :label="dict.label"
-              :value="dict.value"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item>
-          <el-button @click="handleQuery">
-            <IconifyIcon class="mr-5px" icon="ep:search" />
-            搜索
-          </el-button>
-          <el-button @click="resetQuery">
-            <IconifyIcon class="mr-5px" icon="ep:refresh" />
-            重置
-          </el-button>
-        </el-form-item>
-      </el-form>
-      <el-table v-loading="loading" :data="list" show-overflow-tooltip>
-        <!-- 1. 多选模式（不能使用type="selection"，Element会忽略Header插槽） -->
-        <el-table-column width="55" v-if="multiple">
-          <template #header>
-            <el-checkbox
-              v-model="isCheckAll"
-              :indeterminate="isIndeterminate"
-              @change="handleCheckAll"
-            />
-          </template>
-          <template #default="{ row }">
-            <el-checkbox
-              v-model="checkedStatus[row.id]"
-              @change="(checked: boolean) => handleCheckOne(checked, row, true)"
-            />
-          </template>
-        </el-table-column>
-        <!-- 2. 单选模式 -->
-        <el-table-column label="#" width="55" v-else>
-          <template #default="{ row }">
-            <el-radio
-              :value="row.id"
-              v-model="selectedActivityId"
-              @change="handleSingleSelected(row)"
-            >
-              <!-- 空格不能省略，是为了让单选框不显示label，如果不指定label不会有选中的效果 -->
-              &nbsp;
-            </el-radio>
-          </template>
-        </el-table-column>
-        <el-table-column label="活动编号" prop="id" min-width="80" />
-        <el-table-column label="活动名称" prop="name" min-width="140" />
-        <el-table-column label="活动时间" min-width="210">
-          <template #default="scope">
-            {{ formatDate(scope.row.startTime, 'YYYY-MM-DD') }}
-            ~ {{ formatDate(scope.row.endTime, 'YYYY-MM-DD') }}
-          </template>
-        </el-table-column>
-        <el-table-column label="商品图片" prop="spuName" min-width="80">
-          <template #default="scope">
-            <el-image
-              :src="scope.row.picUrl"
-              class="h-40px w-40px"
-              :preview-src-list="[scope.row.picUrl]"
-              preview-teleported
-            />
-          </template>
-        </el-table-column>
-        <el-table-column label="商品标题" prop="spuName" min-width="300" />
-        <el-table-column
-          label="原价"
-          prop="marketPrice"
-          min-width="100"
-          :formatter="fenToYuanFormat"
-        />
-        <el-table-column label="拼团价" prop="seckillPrice" min-width="100">
-          <template #default="scope">
-            {{ formatSeckillPrice(scope.row.products) }}
-          </template>
-        </el-table-column>
-        <el-table-column label="开团组数" prop="groupCount" min-width="100" />
-        <el-table-column
-          label="成团组数"
-          prop="groupSuccessCount"
-          min-width="100"
-        />
-        <el-table-column label="购买次数" prop="recordCount" min-width="100" />
-        <el-table-column
-          label="活动状态"
-          align="center"
-          prop="status"
-          min-width="100"
-        >
-          <template #default="scope">
-            <dict-tag
-              :type="DICT_TYPE.COMMON_STATUS"
-              :value="scope.row.status"
-            />
-          </template>
-        </el-table-column>
-        <el-table-column
-          label="创建时间"
-          align="center"
-          prop="createTime"
-          :formatter="dateFormatter"
-          width="180px"
-        />
-      </el-table>
-      <!-- 分页 -->
-      <Pagination
-        v-model:limit="queryParams.pageSize"
-        v-model:page="queryParams.pageNo"
-        :total="total"
-        @pagination="getList"
-      />
-    </ContentWrap>
-    <template #footer v-if="multiple">
-      <el-button type="primary" @click="handleEmitChange">确 定</el-button>
-      <el-button @click="dialogVisible = false">取 消</el-button>
-    </template>
-  </Dialog>
-</template>
diff --git a/apps/web-ele/src/views/mall/promotion/seckill/components/showcase.vue b/apps/web-ele/src/views/mall/promotion/seckill/components/showcase.vue
new file mode 100644
index 000000000..d368f7e5e
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/seckill/components/showcase.vue
@@ -0,0 +1,147 @@
+<!-- 秒杀活动橱窗组件：用于展示和选择秒杀活动 -->
+<script lang="ts" setup>
+import type { MallSeckillActivityApi } from '#/api/mall/promotion/seckill/seckillActivity';
+
+import { computed, ref, watch } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { ElImage, ElTooltip } from 'element-plus';
+
+import { getSeckillActivityListByIds } from '#/api/mall/promotion/seckill/seckillActivity';
+
+import SeckillTableSelect from './table-select.vue';
+
+interface SeckillShowcaseProps {
+  modelValue?: number | number[];
+  limit?: number;
+  disabled?: boolean;
+}
+
+const props = withDefaults(defineProps<SeckillShowcaseProps>(), {
+  modelValue: undefined,
+  limit: Number.MAX_VALUE,
+  disabled: false,
+});
+
+const emit = defineEmits(['update:modelValue', 'change']);
+
+const activityList = ref<MallSeckillActivityApi.SeckillActivity[]>([]); // 已选择的活动列表
+const seckillTableSelectRef = ref<InstanceType<typeof SeckillTableSelect>>(); // 活动选择表格组件引用
+const isMultiple = computed(() => props.limit !== 1); // 是否为多选模式
+
+/** 计算是否可以添加 */
+const canAdd = computed(() => {
+  if (props.disabled) {
+    return false;
+  }
+  if (!props.limit) {
+    return true;
+  }
+  return activityList.value.length < props.limit;
+});
+
+/** 监听 modelValue 变化，加载活动详情 */
+watch(
+  () => props.modelValue,
+  async (newValue) => {
+    // eslint-disable-next-line unicorn/no-nested-ternary
+    const ids = Array.isArray(newValue) ? newValue : newValue ? [newValue] : [];
+    if (ids.length === 0) {
+      activityList.value = [];
+      return;
+    }
+    // 只有活动发生变化时才重新查询
+    if (
+      activityList.value.length === 0 ||
+      activityList.value.some((activity) => !ids.includes(activity.id!))
+    ) {
+      activityList.value = await getSeckillActivityListByIds(ids as number[]);
+    }
+  },
+  { immediate: true },
+);
+
+/** 打开活动选择对话框 */
+function handleOpenActivitySelect() {
+  seckillTableSelectRef.value?.open(activityList.value);
+}
+
+/** 选择活动后触发 */
+function handleActivitySelected(
+  activities:
+    | MallSeckillActivityApi.SeckillActivity
+    | MallSeckillActivityApi.SeckillActivity[],
+) {
+  activityList.value = Array.isArray(activities) ? activities : [activities];
+  emitActivityChange();
+}
+
+/** 删除活动 */
+function handleRemoveActivity(index: number) {
+  activityList.value.splice(index, 1);
+  emitActivityChange();
+}
+
+/** 触发变更事件 */
+function emitActivityChange() {
+  if (props.limit === 1) {
+    const activity =
+      activityList.value.length > 0 ? activityList.value[0] : null;
+    emit('update:modelValue', activity?.id || 0);
+    emit('change', activity);
+  } else {
+    emit(
+      'update:modelValue',
+      activityList.value.map((activity) => activity.id!),
+    );
+    emit('change', activityList.value);
+  }
+}
+</script>
+
+<template>
+  <div class="flex flex-wrap items-center gap-2">
+    <!-- 已选活动列表 -->
+    <div
+      v-for="(activity, index) in activityList"
+      :key="activity.id"
+      class="group relative h-[60px] w-[60px] overflow-hidden rounded-lg"
+    >
+      <ElTooltip :content="activity.name">
+        <div class="relative h-full w-full">
+          <ElImage
+            :src="activity.picUrl"
+            class="h-full w-full rounded-lg object-cover"
+            :preview-src-list="[activity.picUrl!]"
+            fit="cover"
+          />
+          <!-- 删除按钮 -->
+          <IconifyIcon
+            v-if="!disabled"
+            icon="ep:circle-close-filled"
+            class="absolute -right-2 -top-2 cursor-pointer text-xl text-red-500 opacity-0 transition-opacity hover:text-red-600 group-hover:opacity-100"
+            @click="handleRemoveActivity(index)"
+          />
+        </div>
+      </ElTooltip>
+    </div>
+
+    <!-- 添加活动按钮 -->
+    <ElTooltip v-if="canAdd" content="选择活动">
+      <div
+        class="hover:border-primary hover:bg-primary/5 flex h-[60px] w-[60px] cursor-pointer items-center justify-center rounded-lg border-2 border-dashed transition-colors"
+        @click="handleOpenActivitySelect"
+      >
+        <IconifyIcon icon="ep:plus" class="text-xl text-gray-400" />
+      </div>
+    </ElTooltip>
+  </div>
+
+  <!-- 活动选择对话框 -->
+  <SeckillTableSelect
+    ref="seckillTableSelectRef"
+    :multiple="isMultiple"
+    @change="handleActivitySelected"
+  />
+</template>
diff --git a/apps/web-ele/src/views/mall/promotion/seckill/components/table-select.vue b/apps/web-ele/src/views/mall/promotion/seckill/components/table-select.vue
new file mode 100644
index 000000000..ec3315b1a
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/seckill/components/table-select.vue
@@ -0,0 +1,277 @@
+<!-- 秒杀活动选择弹窗组件 -->
+<script lang="ts" setup>
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import type { MallCategoryApi } from '#/api/mall/product/category';
+import type { MallSeckillActivityApi } from '#/api/mall/promotion/seckill/seckillActivity';
+
+import { computed, onMounted, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+import { fenToYuan, formatDate, handleTree } from '@vben/utils';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getCategoryList } from '#/api/mall/product/category';
+import { getSeckillActivityPage } from '#/api/mall/promotion/seckill/seckillActivity';
+
+interface SeckillTableSelectProps {
+  multiple?: boolean; // 是否多选：true - checkbox；false - radio
+}
+
+const props = withDefaults(defineProps<SeckillTableSelectProps>(), {
+  multiple: false,
+});
+
+const emit = defineEmits<{
+  change: [
+    activity:
+      | MallSeckillActivityApi.SeckillActivity
+      | MallSeckillActivityApi.SeckillActivity[],
+  ];
+}>();
+
+const categoryList = ref<MallCategoryApi.Category[]>([]); // 分类列表
+const categoryTreeList = ref<any[]>([]); // 分类树
+
+/** 单选：处理选中变化 */
+function handleRadioChange() {
+  const selectedRow =
+    gridApi.grid.getRadioRecord() as MallSeckillActivityApi.SeckillActivity;
+  if (selectedRow) {
+    emit('change', selectedRow);
+    modalApi.close();
+  }
+}
+
+/**
+ * 格式化秒杀价格
+ * @param products
+ */
+const formatSeckillPrice = (
+  products: MallSeckillActivityApi.SeckillProduct[],
+) => {
+  if (!products || products.length === 0) return '-';
+  const seckillPrice = Math.min(
+    ...products.map((item) => item.seckillPrice || 0),
+  );
+  return `￥${fenToYuan(seckillPrice)}`;
+};
+
+/** 搜索表单 Schema */
+const formSchema = computed<VbenFormSchema[]>(() => [
+  {
+    fieldName: 'name',
+    label: '活动名称',
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入活动名称',
+      clearable: true,
+    },
+  },
+  {
+    fieldName: 'status',
+    label: '活动状态',
+    component: 'Select',
+    componentProps: {
+      placeholder: '请选择活动状态',
+      clearable: true,
+      options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+    },
+  },
+]);
+
+/** 表格列配置 */
+const gridColumns = computed<VxeGridProps['columns']>(() => {
+  const columns: VxeGridProps['columns'] = [];
+  if (props.multiple) {
+    columns.push({ type: 'checkbox', width: 55 });
+  } else {
+    columns.push({ type: 'radio', width: 55 });
+  }
+  columns.push(
+    {
+      field: 'id',
+      title: '活动编号',
+      minWidth: 80,
+      align: 'center',
+    },
+    {
+      field: 'name',
+      title: '活动名称',
+      minWidth: 140,
+    },
+    {
+      field: 'activityTime',
+      title: '活动时间',
+      minWidth: 210,
+      formatter: ({ row }) => {
+        return `${formatDate(row.startTime, 'YYYY-MM-DD')} ~ ${formatDate(row.endTime, 'YYYY-MM-DD')}`;
+      },
+    },
+    {
+      field: 'picUrl',
+      title: '商品图片',
+      width: 100,
+      align: 'center',
+      cellRender: {
+        name: 'CellImage',
+      },
+    },
+    {
+      field: 'spuName',
+      title: '商品标题',
+      minWidth: 300,
+    },
+    {
+      field: 'marketPrice',
+      title: '原价',
+      minWidth: 100,
+      align: 'center',
+      formatter: ({ cellValue }) => {
+        return cellValue ? `￥${fenToYuan(cellValue)}` : '-';
+      },
+    },
+    {
+      field: 'products',
+      title: '秒杀价',
+      minWidth: 100,
+      align: 'center',
+      formatter: ({ cellValue }) => {
+        return formatSeckillPrice(cellValue);
+      },
+    },
+    {
+      field: 'status',
+      title: '活动状态',
+      minWidth: 100,
+      align: 'center',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      width: 180,
+      align: 'center',
+      cellRender: {
+        name: 'CellDatetime',
+      },
+    },
+  );
+  return columns;
+});
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: formSchema.value,
+    layout: 'horizontal',
+    collapsed: false,
+  },
+  gridOptions: {
+    columns: gridColumns.value,
+    height: 500,
+    border: true,
+    checkboxConfig: {
+      reserve: true,
+    },
+    radioConfig: {
+      reserve: true,
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    proxyConfig: {
+      ajax: {
+        async query({ page }: any, formValues: any) {
+          return await getSeckillActivityPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+  },
+  gridEvents: {
+    radioChange: handleRadioChange,
+  },
+});
+
+const [Modal, modalApi] = useVbenModal({
+  destroyOnClose: true,
+  showConfirmButton: props.multiple, // 特殊：radio 单选情况下，走 handleRadioChange 处理。
+  onConfirm: () => {
+    const selectedRows =
+      gridApi.grid.getCheckboxRecords() as MallSeckillActivityApi.SeckillActivity[];
+    emit('change', selectedRows);
+    modalApi.close();
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      await gridApi.grid.clearCheckboxRow();
+      await gridApi.grid.clearRadioRow();
+      return;
+    }
+
+    // 1. 先查询数据
+    await gridApi.query();
+    // 2. 设置已选中行
+    const data = modalApi.getData<
+      | MallSeckillActivityApi.SeckillActivity
+      | MallSeckillActivityApi.SeckillActivity[]
+    >();
+    if (props.multiple && Array.isArray(data) && data.length > 0) {
+      setTimeout(() => {
+        const tableData = gridApi.grid.getTableData().fullData;
+        data.forEach((activity) => {
+          const row = tableData.find(
+            (item: MallSeckillActivityApi.SeckillActivity) =>
+              item.id === activity.id,
+          );
+          if (row) {
+            gridApi.grid.setCheckboxRow(row, true);
+          }
+        });
+      }, 300);
+    } else if (!props.multiple && data && !Array.isArray(data)) {
+      setTimeout(() => {
+        const tableData = gridApi.grid.getTableData().fullData;
+        const row = tableData.find(
+          (item: MallSeckillActivityApi.SeckillActivity) => item.id === data.id,
+        );
+        if (row) {
+          gridApi.grid.setRadioRow(row);
+        }
+      }, 300);
+    }
+  },
+});
+
+/** 对外暴露的方法 */
+defineExpose({
+  open: (
+    data?:
+      | MallSeckillActivityApi.SeckillActivity
+      | MallSeckillActivityApi.SeckillActivity[],
+  ) => {
+    modalApi.setData(data).open();
+  },
+});
+
+/** 初始化分类数据 */
+onMounted(async () => {
+  categoryList.value = await getCategoryList({});
+  categoryTreeList.value = handleTree(categoryList.value, 'id', 'parentId');
+});
+</script>
+
+<template>
+  <Modal title="选择活动" class="w-[950px]">
+    <Grid />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/mall/trade/afterSale/data.ts b/apps/web-ele/src/views/mall/trade/afterSale/data.ts
index a995b0b96..2aa4ecc69 100644
--- a/apps/web-ele/src/views/mall/trade/afterSale/data.ts
+++ b/apps/web-ele/src/views/mall/trade/afterSale/data.ts
@@ -131,7 +131,6 @@ export function useGridColumns(): VxeGridPropTypes.Columns {
     {
       field: 'user.nickname',
       title: '买家',
-      align: 'center',
       minWidth: 120,
     },
     {
@@ -144,11 +143,10 @@ export function useGridColumns(): VxeGridPropTypes.Columns {
       field: 'status',
       title: '售后状态',
       width: 100,
-      align: 'center',
       cellRender: {
         name: 'CellDict',
         props: {
-          dictType: DICT_TYPE.TRADE_AFTER_SALE_STATUS,
+          type: DICT_TYPE.TRADE_AFTER_SALE_STATUS,
         },
       },
     },
@@ -156,11 +154,10 @@ export function useGridColumns(): VxeGridPropTypes.Columns {
       field: 'way',
       title: '售后方式',
       width: 100,
-      align: 'center',
       cellRender: {
         name: 'CellDict',
         props: {
-          dictType: DICT_TYPE.TRADE_AFTER_SALE_WAY,
+          type: DICT_TYPE.TRADE_AFTER_SALE_WAY,
         },
       },
     },
diff --git a/apps/web-ele/src/views/mall/trade/order/index.vue b/apps/web-ele/src/views/mall/trade/order/index.vue
index ac9a14238..c19b0fdf4 100644
--- a/apps/web-ele/src/views/mall/trade/order/index.vue
+++ b/apps/web-ele/src/views/mall/trade/order/index.vue
@@ -122,7 +122,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
                 {{ item.spuName }}
                 <ElTag
                   v-for="property in item.properties"
-                  :key="property.id"
+                  :key="property.propertyId"
                   class="ml-1"
                   size="small"
                 >
@@ -133,7 +133,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
                 class="flex items-center justify-between text-xs text-gray-500"
               >
                 <span>
-                  原价：{{ fenToYuan(item.price) }} 元 / 数量：{{
+                  原价：{{ fenToYuan(item.price!) }} 元 / 数量：{{
                     item.count
                   }}个
                 </span>
diff --git a/apps/web-ele/src/views/member/user/detail/index.vue b/apps/web-ele/src/views/member/user/detail/index.vue
index 19d3b5e69..bf2ef4c4b 100644
--- a/apps/web-ele/src/views/member/user/detail/index.vue
+++ b/apps/web-ele/src/views/member/user/detail/index.vue
@@ -16,17 +16,17 @@ import { $t } from '#/locales';
 
 import Form from '../modules/form.vue';
 import AccountInfo from './modules/account-info.vue';
+import AddressList from './modules/address-list.vue';
+import AfterSaleList from './modules/after-sale-list.vue';
 import BalanceList from './modules/balance-list.vue';
 import BasicInfo from './modules/basic-info.vue';
+import BrokerageList from './modules/brokerage-list.vue';
+import CouponList from './modules/coupon-list.vue';
 import ExperienceRecordList from './modules/experience-record-list.vue';
+import FavoriteList from './modules/favorite-list.vue';
+import OrderList from './modules/order-list.vue';
 import PointList from './modules/point-list.vue';
 import SignList from './modules/sign-list.vue';
-import UserAddressList from './modules/user-address-list.vue';
-import UserAfterSaleList from './modules/user-after-sale-list.vue';
-import UserBrokerageList from './modules/user-brokerage-list.vue';
-import UserCouponList from './modules/user-coupon-list.vue';
-import UserFavoriteList from './modules/user-favorite-list.vue';
-import UserOrderList from './modules/user-order-list.vue';
 
 const route = useRoute();
 const { closeCurrentTab, refreshTab } = useTabs();
@@ -103,37 +103,22 @@ onMounted(async () => {
             <BalanceList class="h-full" :wallet-id="wallet?.id" />
           </ElTabPane>
           <ElTabPane label="收货地址" name="AddressList">
-            <UserAddressList class="h-full" :user-id="userId" />
+            <AddressList class="h-full" :user-id="userId" />
           </ElTabPane>
           <ElTabPane label="订单管理" name="OrderList">
-            <!-- Todo: 商城模块 -->
-            <div class="h-full">
-              <UserOrderList class="h-full" :user-id="userId" />
-            </div>
+            <OrderList class="h-full" :user-id="userId" />
           </ElTabPane>
           <ElTabPane label="售后管理" name="AfterSaleList">
-            <!-- Todo: 商城模块 -->
-            <div class="h-full">
-              <UserAfterSaleList class="h-full" :user-id="userId" />
-            </div>
+            <AfterSaleList class="h-full" :user-id="userId" />
           </ElTabPane>
           <ElTabPane label="收藏记录" name="FavoriteList">
-            <!-- Todo: 商城模块 -->
-            <div class="h-full">
-              <UserFavoriteList class="h-full" :user-id="userId" />
-            </div>
+            <FavoriteList class="h-full" :user-id="userId" />
           </ElTabPane>
           <ElTabPane label="优惠劵" name="CouponList">
-            <!-- Todo: 商城模块 -->
-            <div class="h-full">
-              <UserCouponList class="h-full" :user-id="userId" />
-            </div>
+            <CouponList class="h-full" :user-id="userId" />
           </ElTabPane>
           <ElTabPane label="推广用户" name="BrokerageList">
-            <!-- Todo: 商城模块 -->
-            <div class="h-full">
-              <UserBrokerageList class="h-full" :user-id="userId" />
-            </div>
+            <BrokerageList class="h-full" :user-id="userId" />
           </ElTabPane>
         </ElTabs>
       </ElCard>
diff --git a/apps/web-ele/src/views/member/user/detail/modules/account-info.vue b/apps/web-ele/src/views/member/user/detail/modules/account-info.vue
index f95cccad4..d99cbf0ce 100644
--- a/apps/web-ele/src/views/member/user/detail/modules/account-info.vue
+++ b/apps/web-ele/src/views/member/user/detail/modules/account-info.vue
@@ -22,7 +22,6 @@ const props = withDefaults(
 const [Descriptions] = useDescription({
   border: false,
   column: props.mode === 'member' ? 2 : 1,
-  labelWidth: 140,
   schema: [
     {
       field: 'levelName',
@@ -65,11 +64,10 @@ const [Descriptions] = useDescription({
 
 <template>
   <ElCard>
-    <template #title>
-      <slot name="title"></slot>
-    </template>
-    <template #extra>
-      <slot name="extra"></slot>
+    <template #header>
+      <span class="font-medium">
+        <slot name="title"></slot>
+      </span>
     </template>
     <Descriptions
       :data="{
diff --git a/apps/web-ele/src/views/member/user/detail/modules/address-list.vue b/apps/web-ele/src/views/member/user/detail/modules/address-list.vue
new file mode 100644
index 000000000..488058e07
--- /dev/null
+++ b/apps/web-ele/src/views/member/user/detail/modules/address-list.vue
@@ -0,0 +1,87 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MemberAddressApi } from '#/api/member/address';
+
+import { DICT_TYPE } from '@vben/constants';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getAddressList } from '#/api/member/address';
+
+const props = defineProps<{
+  userId: number;
+}>();
+
+const columns = [
+  {
+    field: 'id',
+    title: '地址编号',
+    minWidth: 100,
+  },
+  {
+    field: 'name',
+    title: '收件人名称',
+    minWidth: 120,
+  },
+  {
+    field: 'mobile',
+    title: '手机号',
+    minWidth: 130,
+  },
+  {
+    field: 'areaId',
+    title: '地区编码',
+    minWidth: 120,
+  },
+  {
+    field: 'detailAddress',
+    title: '收件详细地址',
+    minWidth: 200,
+  },
+  {
+    field: 'defaultStatus',
+    title: '是否默认',
+    minWidth: 100,
+    cellRender: {
+      name: 'CellDict',
+      props: { type: DICT_TYPE.INFRA_BOOLEAN_STRING },
+    },
+  },
+  {
+    field: 'createTime',
+    title: '创建时间',
+    formatter: 'formatDateTime',
+    minWidth: 160,
+  },
+];
+
+const [Grid] = useVbenVxeGrid({
+  gridOptions: {
+    columns,
+    keepSource: true,
+    pagerConfig: {
+      enabled: false,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async () => {
+          return await getAddressList({
+            userId: props.userId,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MemberAddressApi.Address>,
+});
+</script>
+
+<template>
+  <Grid />
+</template>
diff --git a/apps/web-ele/src/views/member/user/detail/modules/after-sale-list.vue b/apps/web-ele/src/views/member/user/detail/modules/after-sale-list.vue
new file mode 100644
index 000000000..5661f01f3
--- /dev/null
+++ b/apps/web-ele/src/views/member/user/detail/modules/after-sale-list.vue
@@ -0,0 +1,156 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MallAfterSaleApi } from '#/api/mall/trade/afterSale';
+
+import { onMounted, ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { ElButton, ElImage, ElTabs, ElTag } from 'element-plus';
+
+import { TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getAfterSalePage } from '#/api/mall/trade/afterSale';
+import {
+  useGridColumns,
+  useGridFormSchema,
+} from '#/views/mall/trade/afterSale/data';
+
+const props = defineProps<{
+  userId: number;
+}>();
+
+const { push } = useRouter();
+
+const statusTabs = ref([
+  {
+    label: '全部',
+    value: '0',
+  },
+]);
+const statusTab = ref(statusTabs.value[0]!.value);
+
+/** 处理退款 */
+function handleOpenAfterSaleDetail(row: MallAfterSaleApi.AfterSale) {
+  push({ name: 'TradeAfterSaleDetail', params: { id: row.id } });
+}
+
+/** 查看订单详情 */
+function handleOpenOrderDetail(row: MallAfterSaleApi.AfterSale) {
+  push({ name: 'TradeOrderDetail', params: { id: row.orderId } });
+}
+
+/** 切换售后状态 */
+function handleChangeStatus(key: number | string) {
+  statusTab.value = key.toString();
+  gridApi.query();
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    cellConfig: {
+      height: 60,
+    },
+    columns: useGridColumns(),
+    keepSource: true,
+    pagerConfig: {
+      pageSize: 10,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getAfterSalePage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            userId: props.userId,
+            status:
+              statusTab.value === '0' ? undefined : Number(statusTab.value),
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MallAfterSaleApi.AfterSale>,
+});
+
+/** 初始化 */
+onMounted(() => {
+  for (const dict of getDictOptions(DICT_TYPE.TRADE_AFTER_SALE_STATUS)) {
+    statusTabs.value.push({
+      label: dict.label,
+      value: dict.value.toString(),
+    });
+  }
+});
+</script>
+
+<template>
+  <Grid>
+    <template #toolbar-actions>
+      <ElTabs
+        v-model="statusTab"
+        class="w-full"
+        @tab-change="handleChangeStatus"
+      >
+        <ElTabs.TabPane
+          v-for="tab in statusTabs"
+          :key="tab.value"
+          :label="tab.label"
+          :name="tab.value"
+        />
+      </ElTabs>
+    </template>
+    <template #orderNo="{ row }">
+      <ElButton type="primary" link @click="handleOpenOrderDetail(row)">
+        {{ row.orderNo }}
+      </ElButton>
+    </template>
+    <template #productInfo="{ row }">
+      <div class="flex items-start gap-2 text-left">
+        <ElImage
+          v-if="row.picUrl"
+          :src="row.picUrl"
+          style="width: 40px; height: 40px"
+          :preview-src-list="[row.picUrl]"
+        />
+        <div class="flex flex-1 flex-col gap-1">
+          <span class="text-sm">{{ row.spuName }}</span>
+          <div class="mt-1 flex flex-wrap gap-1">
+            <ElTag
+              v-for="property in row.properties"
+              :key="property.propertyId!"
+              size="small"
+              type="info"
+            >
+              {{ property.propertyName }}: {{ property.valueName }}
+            </ElTag>
+          </div>
+        </div>
+      </div>
+    </template>
+    <template #actions="{ row }">
+      <TableAction
+        :actions="[
+          {
+            label: '处理退款',
+            type: 'primary',
+            link: true,
+            onClick: handleOpenAfterSaleDetail.bind(null, row),
+          },
+        ]"
+      />
+    </template>
+  </Grid>
+</template>
diff --git a/apps/web-ele/src/views/member/user/detail/modules/balance-list.vue b/apps/web-ele/src/views/member/user/detail/modules/balance-list.vue
index 76d805f19..86b148ce7 100644
--- a/apps/web-ele/src/views/member/user/detail/modules/balance-list.vue
+++ b/apps/web-ele/src/views/member/user/detail/modules/balance-list.vue
@@ -4,6 +4,7 @@ import type { WalletTransactionApi } from '#/api/pay/wallet/transaction';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getTransactionPage } from '#/api/pay/wallet/transaction';
+import { useTransactionGridColumns } from '#/views/pay/wallet/balance/data';
 
 const props = defineProps<{
   walletId: number | undefined;
@@ -11,36 +12,7 @@ const props = defineProps<{
 
 const [Grid] = useVbenVxeGrid({
   gridOptions: {
-    columns: [
-      {
-        field: 'id',
-        title: '编号',
-        minWidth: 100,
-      },
-      {
-        field: 'title',
-        title: '关联业务标题',
-        minWidth: 200,
-      },
-      {
-        field: 'price',
-        title: '交易金额',
-        minWidth: 120,
-        formatter: 'formatFenToYuanAmount',
-      },
-      {
-        field: 'balance',
-        title: '钱包余额',
-        minWidth: 120,
-        formatter: 'formatFenToYuanAmount',
-      },
-      {
-        field: 'createTime',
-        title: '交易时间',
-        minWidth: 180,
-        formatter: 'formatDateTime',
-      },
-    ],
+    columns: useTransactionGridColumns(),
     keepSource: true,
     proxyConfig: {
       ajax: {
diff --git a/apps/web-ele/src/views/member/user/detail/modules/basic-info.vue b/apps/web-ele/src/views/member/user/detail/modules/basic-info.vue
index 55f1e0d9c..c6e3891cc 100644
--- a/apps/web-ele/src/views/member/user/detail/modules/basic-info.vue
+++ b/apps/web-ele/src/views/member/user/detail/modules/basic-info.vue
@@ -21,7 +21,6 @@ const props = withDefaults(
 const [Descriptions] = useDescription({
   border: false,
   column: props.mode === 'member' ? 2 : 1,
-  labelWidth: 140,
   schema: [
     {
       field: 'name',
@@ -73,11 +72,15 @@ const [Descriptions] = useDescription({
 
 <template>
   <ElCard>
-    <template #title>
-      <slot name="title"></slot>
-    </template>
-    <template #extra>
-      <slot name="extra"></slot>
+    <template #header>
+      <div class="flex justify-between">
+        <span class="font-medium">
+          <slot name="title"></slot>
+        </span>
+        <div class="h-[10px]">
+          <slot name="extra"></slot>
+        </div>
+      </div>
     </template>
     <ElRow v-if="mode === 'member'" :gutter="24">
       <ElCol :span="6">
diff --git a/apps/web-ele/src/views/member/user/detail/modules/brokerage-list.vue b/apps/web-ele/src/views/member/user/detail/modules/brokerage-list.vue
new file mode 100644
index 000000000..5adb98f20
--- /dev/null
+++ b/apps/web-ele/src/views/member/user/detail/modules/brokerage-list.vue
@@ -0,0 +1,125 @@
+<script setup lang="ts">
+import type {
+  VxeGridPropTypes,
+  VxeTableGridOptions,
+} from '#/adapter/vxe-table';
+import type { MallBrokerageUserApi } from '#/api/mall/trade/brokerage/user';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getBrokerageUserPage } from '#/api/mall/trade/brokerage/user';
+import { getRangePickerDefaultProps } from '#/utils';
+
+defineOptions({ name: 'BrokerageList' });
+
+const props = defineProps<{
+  userId: number;
+}>();
+
+const formSchema = (): any[] => {
+  return [
+    {
+      fieldName: 'level',
+      label: '用户类型',
+      component: 'Select',
+      componentProps: {
+        options: [
+          {
+            label: '全部',
+            value: 0,
+          },
+          {
+            label: '一级',
+            value: 1,
+          },
+          {
+            label: '二级',
+            value: 2,
+          },
+        ],
+        placeholder: '请选择用户类型',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'bindUserTime',
+      label: '绑定时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        clearable: true,
+      },
+    },
+  ];
+};
+
+const columns = (): VxeGridPropTypes.Columns => {
+  return [
+    {
+      field: 'id',
+      title: '用户编号',
+    },
+    {
+      field: 'avatar',
+      title: '头像',
+      cellRender: {
+        name: 'CellImage',
+        props: {
+          height: 40,
+          width: 40,
+          shape: 'circle',
+        },
+      },
+    },
+    {
+      field: 'nickname',
+      title: '昵称',
+    },
+    {
+      field: 'level',
+      title: '等级',
+      formatter: (row: any) => {
+        return row.level === 1 ? '一级' : '二级';
+      },
+    },
+    {
+      field: 'bindUserTime',
+      title: '绑定时间',
+      formatter: 'formatDateTime',
+    },
+  ];
+};
+
+const [Grid] = useVbenVxeGrid({
+  formOptions: {
+    schema: formSchema(),
+  },
+  gridOptions: {
+    columns: columns(),
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getBrokerageUserPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            bindUserId: props.userId,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MallBrokerageUserApi.BrokerageUser>,
+});
+</script>
+
+<template>
+  <Grid />
+</template>
diff --git a/apps/web-ele/src/views/member/user/detail/modules/coupon-list.vue b/apps/web-ele/src/views/member/user/detail/modules/coupon-list.vue
new file mode 100644
index 000000000..51b908f7a
--- /dev/null
+++ b/apps/web-ele/src/views/member/user/detail/modules/coupon-list.vue
@@ -0,0 +1,156 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MallCouponApi } from '#/api/mall/promotion/coupon/coupon';
+
+import { ref } from 'vue';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { ElLoading, ElMessage, ElTabPane, ElTabs } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteCoupon,
+  getCouponPage,
+} from '#/api/mall/promotion/coupon/coupon';
+import {
+  useGridColumns as useCouponGridColumns,
+  useGridFormSchema as useCouponGridFormSchema,
+} from '#/views/mall/promotion/coupon/data';
+
+const props = defineProps<{
+  userId: number;
+}>();
+
+const activeTab = ref('all');
+const statusTabs = ref(getStatusTabs());
+
+/** 列表的搜索表单（过滤掉会员相关字段） */
+function useGridFormSchema() {
+  const excludeFields = new Set(['nickname']);
+  return useCouponGridFormSchema().filter(
+    (item) => !excludeFields.has(item.fieldName),
+  );
+}
+
+/** 列表的字段（过滤掉会员相关字段） */
+function useGridColumns() {
+  const excludeFields = new Set(['nickname']);
+  return useCouponGridColumns()?.filter(
+    (item) => item.field && !excludeFields.has(item.field),
+  );
+}
+
+/** 获取状态选项卡配置 */
+function getStatusTabs() {
+  const tabs = [
+    {
+      label: '全部',
+      value: 'all',
+    },
+  ];
+  const statusOptions = getDictOptions(DICT_TYPE.PROMOTION_COUPON_STATUS);
+  for (const option of statusOptions) {
+    tabs.push({
+      label: option.label,
+      value: String(option.value),
+    });
+  }
+  return tabs;
+}
+
+/** Tab 切换 */
+function handleTabChange(tabName: any) {
+  activeTab.value = tabName;
+  gridApi.query();
+}
+
+/** 删除优惠券 */
+async function handleDelete(row: MallCouponApi.Coupon) {
+  const loadingInstance = ElLoading.service({
+    text: '回收中...',
+  });
+  try {
+    await deleteCoupon(row.id!);
+    ElMessage.success('回收成功');
+    await gridApi.query();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    keepSource: true,
+    pagerConfig: {
+      pageSize: 10,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          const params = {
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            userId: props.userId,
+            ...formValues,
+            // Tab状态过滤
+            status:
+              activeTab.value === 'all' ? undefined : Number(activeTab.value),
+          };
+          return await getCouponPage(params);
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MallCouponApi.Coupon>,
+});
+</script>
+
+<template>
+  <Grid>
+    <template #toolbar-actions>
+      <ElTabs
+        :model-value="activeTab"
+        class="w-full"
+        @tab-change="handleTabChange"
+      >
+        <ElTabPane
+          v-for="tab in statusTabs"
+          :key="tab.value"
+          :label="tab.label"
+          :name="tab.value"
+        />
+      </ElTabs>
+    </template>
+    <template #actions="{ row }">
+      <TableAction
+        :actions="[
+          {
+            label: '回收',
+            type: 'danger',
+            link: true,
+            icon: ACTION_ICON.DELETE,
+            auth: ['promotion:coupon:delete'],
+            popConfirm: {
+              title:
+                '回收将会收回会员领取的待使用的优惠券，已使用的将无法回收，确定要回收所选优惠券吗？',
+              confirm: handleDelete.bind(null, row),
+            },
+          },
+        ]"
+      />
+    </template>
+  </Grid>
+</template>
diff --git a/apps/web-ele/src/views/member/user/detail/modules/experience-record-list.vue b/apps/web-ele/src/views/member/user/detail/modules/experience-record-list.vue
index 9f038594f..cd3d71e40 100644
--- a/apps/web-ele/src/views/member/user/detail/modules/experience-record-list.vue
+++ b/apps/web-ele/src/views/member/user/detail/modules/experience-record-list.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeGridProps, VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { MemberExperienceRecordApi } from '#/api/member/experience-record';
 
 import { h } from 'vue';
@@ -17,102 +18,108 @@ const props = defineProps<{
   userId: number;
 }>();
 
+/** 表单搜索 schema */
+function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'bizType',
+      label: '业务类型',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.MEMBER_EXPERIENCE_BIZ_TYPE, 'number'),
+        placeholder: '请选择业务类型',
+        clearable: true,
+      },
+    },
+    {
+      fieldName: 'title',
+      label: '标题',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入标题',
+        clearable: true,
+      },
+    },
+    {
+      fieldName: 'createDate',
+      label: '获得时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        clearable: true,
+      },
+    },
+  ];
+}
+
+/** 表格列配置 */
+function useGridColumns(): VxeGridProps['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '编号',
+      minWidth: 100,
+    },
+    {
+      field: 'createTime',
+      title: '获得时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'experience',
+      title: '经验',
+      minWidth: 100,
+      slots: {
+        default: ({ row }) => {
+          return h(
+            ElTag,
+            {
+              type: row.experience > 0 ? 'primary' : 'danger',
+            },
+            () => (row.experience > 0 ? `+${row.experience}` : row.experience),
+          );
+        },
+      },
+    },
+    {
+      field: 'totalExperience',
+      title: '总经验',
+      minWidth: 100,
+    },
+    {
+      field: 'title',
+      title: '标题',
+      minWidth: 200,
+    },
+    {
+      field: 'description',
+      title: '描述',
+      minWidth: 250,
+    },
+    {
+      field: 'bizId',
+      title: '业务编号',
+      minWidth: 120,
+    },
+    {
+      field: 'bizType',
+      title: '业务类型',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.MEMBER_EXPERIENCE_BIZ_TYPE },
+      },
+    },
+  ];
+}
+
 const [Grid] = useVbenVxeGrid({
   formOptions: {
-    schema: [
-      {
-        fieldName: 'bizType',
-        label: '业务类型',
-        component: 'Select',
-        componentProps: {
-          options: getDictOptions(
-            DICT_TYPE.MEMBER_EXPERIENCE_BIZ_TYPE,
-            'number',
-          ),
-          placeholder: '请选择业务类型',
-          clearable: true,
-        },
-      },
-      {
-        fieldName: 'title',
-        label: '标题',
-        component: 'Input',
-        componentProps: {
-          placeholder: '请输入标题',
-          clearable: true,
-        },
-      },
-      {
-        fieldName: 'createDate',
-        label: '获得时间',
-        component: 'RangePicker',
-        componentProps: {
-          ...getRangePickerDefaultProps(),
-          clearable: true,
-        },
-      },
-    ],
+    schema: useGridFormSchema(),
   },
   gridOptions: {
-    columns: [
-      {
-        field: 'id',
-        title: '编号',
-        minWidth: 100,
-      },
-      {
-        field: 'createTime',
-        title: '获得时间',
-        minWidth: 180,
-        formatter: 'formatDateTime',
-      },
-      {
-        field: 'experience',
-        title: '经验',
-        minWidth: 100,
-        slots: {
-          default: ({ row }) => {
-            return h(
-              ElTag,
-              {
-                type: row.point > 0 ? 'primary' : 'danger',
-              },
-              () =>
-                row.experience > 0 ? `+${row.experience}` : row.experience,
-            );
-          },
-        },
-      },
-      {
-        field: 'totalExperience',
-        title: '总经验',
-        minWidth: 100,
-      },
-      {
-        field: 'title',
-        title: '标题',
-        minWidth: 200,
-      },
-      {
-        field: 'description',
-        title: '描述',
-        minWidth: 250,
-      },
-      {
-        field: 'bizId',
-        title: '业务编号',
-        minWidth: 120,
-      },
-      {
-        field: 'bizType',
-        title: '业务类型',
-        minWidth: 120,
-        cellRender: {
-          name: 'CellDict',
-          props: { type: DICT_TYPE.MEMBER_EXPERIENCE_BIZ_TYPE },
-        },
-      },
-    ],
+    columns: useGridColumns(),
     keepSource: true,
     proxyConfig: {
       ajax: {
@@ -135,7 +142,6 @@ const [Grid] = useVbenVxeGrid({
       search: true,
     },
   } as VxeTableGridOptions<MemberExperienceRecordApi.ExperienceRecord>,
-  separator: false,
 });
 </script>
 
diff --git a/apps/web-ele/src/views/member/user/detail/modules/favorite-list.vue b/apps/web-ele/src/views/member/user/detail/modules/favorite-list.vue
new file mode 100644
index 000000000..f91a2c3e0
--- /dev/null
+++ b/apps/web-ele/src/views/member/user/detail/modules/favorite-list.vue
@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MallFavoriteApi } from '#/api/mall/product/favorite';
+
+import { DICT_TYPE } from '@vben/constants';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import * as FavoriteApi from '#/api/mall/product/favorite';
+
+const props = defineProps<{
+  userId: number;
+}>();
+
+const columns = [
+  {
+    field: 'id',
+    title: '商品编号',
+    minWidth: 100,
+  },
+  {
+    field: 'picUrl',
+    title: '商品图',
+    minWidth: 100,
+    cellRender: {
+      name: 'CellImage',
+      props: {
+        width: 24,
+        height: 24,
+      },
+    },
+  },
+  {
+    field: 'name',
+    title: '商品名称',
+    minWidth: 200,
+  },
+  {
+    field: 'price',
+    title: '商品售价',
+    formatter: 'formatAmount2',
+    minWidth: 120,
+  },
+  {
+    field: 'salesCount',
+    title: '销量',
+    minWidth: 100,
+  },
+  {
+    field: 'createTime',
+    title: '收藏时间',
+    formatter: 'formatDateTime',
+    minWidth: 160,
+  },
+  {
+    field: 'status',
+    title: '状态',
+    minWidth: 100,
+    cellRender: {
+      name: 'CellDict',
+      props: { type: DICT_TYPE.PRODUCT_SPU_STATUS },
+    },
+  },
+];
+
+const [Grid] = useVbenVxeGrid({
+  gridOptions: {
+    columns,
+    keepSource: true,
+    pagerConfig: {
+      pageSize: 10,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await FavoriteApi.getFavoritePage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            userId: props.userId,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MallFavoriteApi.Favorite>,
+});
+</script>
+
+<template>
+  <Grid />
+</template>
diff --git a/apps/web-ele/src/views/member/user/detail/modules/order-list.vue b/apps/web-ele/src/views/member/user/detail/modules/order-list.vue
new file mode 100644
index 000000000..37b562b51
--- /dev/null
+++ b/apps/web-ele/src/views/member/user/detail/modules/order-list.vue
@@ -0,0 +1,133 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MallOrderApi } from '#/api/mall/trade/order';
+
+import { useRouter } from 'vue-router';
+
+import { DICT_TYPE } from '@vben/constants';
+import { fenToYuan } from '@vben/utils';
+
+import { ElImage, ElTag } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getOrderPage } from '#/api/mall/trade/order';
+import { DictTag } from '#/components/dict-tag';
+import { $t } from '#/locales';
+import {
+  useGridColumns,
+  useGridFormSchema as useOrderGridFormSchema,
+} from '#/views/mall/trade/order/data';
+
+const props = defineProps<{
+  userId: number;
+}>();
+
+const { push } = useRouter();
+
+/** 列表的搜索表单（过滤掉用户相关字段） */
+function useGridFormSchema() {
+  const excludeFields = new Set(['userId', 'userNickname']);
+  return useOrderGridFormSchema().filter(
+    (item) => !excludeFields.has(item.fieldName),
+  );
+}
+
+/** 详情 */
+function handleDetail(row: MallOrderApi.Order) {
+  push({ name: 'TradeOrderDetail', params: { id: row.id } });
+}
+
+const [Grid] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    expandConfig: {
+      trigger: 'row',
+      expandAll: true,
+      padding: true,
+    },
+    columns: useGridColumns(),
+    keepSource: true,
+    pagerConfig: {
+      pageSize: 10,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getOrderPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            userId: props.userId,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MallOrderApi.Order>,
+});
+</script>
+
+<template>
+  <Grid table-title="订单列表">
+    <template #expand_content="{ row }">
+      <div class="py-2">
+        <div
+          v-for="item in row.items"
+          :key="item.id!"
+          class="flex items-start border-b border-gray-100 py-2 last:border-b-0"
+        >
+          <div class="mr-3 flex-shrink-0">
+            <ElImage :src="item.picUrl" class="h-10 w-10" />
+          </div>
+          <div class="flex-1">
+            <div class="mb-1 font-medium">
+              {{ item.spuName }}
+              <ElTag
+                v-for="property in item.properties"
+                :key="property.propertyId"
+                class="ml-1"
+                size="small"
+              >
+                {{ property.propertyName }}: {{ property.valueName }}
+              </ElTag>
+            </div>
+            <div
+              class="flex items-center justify-between text-xs text-gray-500"
+            >
+              <span>
+                原价：{{ fenToYuan(item.price!) }} 元 / 数量：{{ item.count }}个
+              </span>
+              <DictTag
+                :type="DICT_TYPE.TRADE_ORDER_ITEM_AFTER_SALE_STATUS"
+                :value="item.afterSaleStatus"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+    <template #actions="{ row }">
+      <TableAction
+        :actions="[
+          {
+            label: $t('common.detail'),
+            type: 'primary',
+            link: true,
+            icon: ACTION_ICON.VIEW,
+            auth: ['trade:order:query'],
+            onClick: handleDetail.bind(null, row),
+          },
+        ]"
+      />
+    </template>
+  </Grid>
+</template>
diff --git a/apps/web-ele/src/views/member/user/detail/modules/point-list.vue b/apps/web-ele/src/views/member/user/detail/modules/point-list.vue
index 9f782017e..40ef48271 100644
--- a/apps/web-ele/src/views/member/user/detail/modules/point-list.vue
+++ b/apps/web-ele/src/views/member/user/detail/modules/point-list.vue
@@ -4,44 +4,34 @@ import type { MemberPointRecordApi } from '#/api/member/point/record';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getRecordPage } from '#/api/member/point/record';
-import { DICT_TYPE } from '@vben/constants';
-import { getDictOptions } from '@vben/hooks';
-
-import { getRangePickerDefaultProps } from '#/utils';
-import { useGridColumns } from '#/views/member/point/record/data';
+import {
+  useGridColumns as usePointGridColumns,
+  useGridFormSchema as usePointGridFormSchema,
+} from '#/views/member/point/record/data';
 
 const props = defineProps<{
   userId: number;
 }>();
 
+/** 列表的搜索表单（过滤掉用户相关字段） */
+function useGridFormSchema() {
+  const excludeFields = new Set(['nickname']);
+  return usePointGridFormSchema().filter(
+    (item) => !excludeFields.has(item.fieldName),
+  );
+}
+
+/** 列表的字段（过滤掉用户相关字段） */
+function useGridColumns() {
+  const excludeFields = new Set(['nickname']);
+  return usePointGridColumns()?.filter(
+    (item) => item.field && !excludeFields.has(item.field),
+  );
+}
+
 const [Grid] = useVbenVxeGrid({
   formOptions: {
-    schema: [
-      {
-        fieldName: 'bizType',
-        label: '业务类型',
-        component: 'Select',
-        componentProps: {
-          clearable: true,
-          placeholder: '请选择业务类型',
-          options: getDictOptions(DICT_TYPE.MEMBER_POINT_BIZ_TYPE, 'number'),
-        },
-      },
-      {
-        fieldName: 'title',
-        label: '积分标题',
-        component: 'Input',
-      },
-      {
-        fieldName: 'createDate',
-        label: '获得时间',
-        component: 'RangePicker',
-        componentProps: {
-          ...getRangePickerDefaultProps(),
-          clearable: true,
-        },
-      },
-    ],
+    schema: useGridFormSchema(),
   },
   gridOptions: {
     columns: useGridColumns(),
@@ -63,13 +53,13 @@ const [Grid] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,
       search: true,
     },
   } as VxeTableGridOptions<MemberPointRecordApi.Record>,
-  separator: false,
 });
 </script>
 
diff --git a/apps/web-ele/src/views/member/user/detail/modules/sign-list.vue b/apps/web-ele/src/views/member/user/detail/modules/sign-list.vue
index 39e31190f..afede6537 100644
--- a/apps/web-ele/src/views/member/user/detail/modules/sign-list.vue
+++ b/apps/web-ele/src/views/member/user/detail/modules/sign-list.vue
@@ -4,35 +4,34 @@ import type { MemberSignInRecordApi } from '#/api/member/signin/record';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getSignInRecordPage } from '#/api/member/signin/record';
-import { getRangePickerDefaultProps } from '#/utils';
-import { useGridColumns } from '#/views/member/signin/record/data';
+import {
+  useGridColumns as useSignInGridColumns,
+  useGridFormSchema as useSignInGridFormSchema,
+} from '#/views/member/signin/record/data';
 
 const props = defineProps<{
   userId: number;
 }>();
 
+/** 列表的搜索表单（过滤掉用户相关字段） */
+function useGridFormSchema() {
+  const excludeFields = new Set(['nickname']);
+  return useSignInGridFormSchema().filter(
+    (item) => !excludeFields.has(item.fieldName),
+  );
+}
+
+/** 列表的字段（过滤掉用户相关字段） */
+function useGridColumns() {
+  const excludeFields = new Set(['nickname']);
+  return useSignInGridColumns()?.filter(
+    (item) => item.field && !excludeFields.has(item.field),
+  );
+}
+
 const [Grid] = useVbenVxeGrid({
   formOptions: {
-    schema: [
-      {
-        fieldName: 'day',
-        label: '签到天数',
-        component: 'Input',
-        componentProps: {
-          placeholder: '请输入签到天数',
-          clearable: true,
-        },
-      },
-      {
-        fieldName: 'createTime',
-        label: '签到时间',
-        component: 'RangePicker',
-        componentProps: {
-          ...getRangePickerDefaultProps(),
-          clearable: true,
-        },
-      },
-    ],
+    schema: useGridFormSchema(),
   },
   gridOptions: {
     columns: useGridColumns(),
@@ -58,7 +57,6 @@ const [Grid] = useVbenVxeGrid({
       search: true,
     },
   } as VxeTableGridOptions<MemberSignInRecordApi.SignInRecord>,
-  separator: false,
 });
 </script>
 
diff --git a/apps/web-ele/src/views/member/user/detail/modules/user-address-list.vue b/apps/web-ele/src/views/member/user/detail/modules/user-address-list.vue
deleted file mode 100644
index a897234fd..000000000
--- a/apps/web-ele/src/views/member/user/detail/modules/user-address-list.vue
+++ /dev/null
@@ -1,94 +0,0 @@
-<script lang="ts" setup>
-import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { MemberAddressApi } from '#/api/member/address';
-
-import { h } from 'vue';
-
-import { ElTag } from 'element-plus';
-
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
-import { getAddressList } from '#/api/member/address';
-
-const props = defineProps<{
-  userId: number;
-}>();
-
-const [Grid] = useVbenVxeGrid({
-  gridOptions: {
-    columns: [
-      {
-        field: 'id',
-        title: '地址编号',
-        minWidth: 100,
-      },
-      {
-        field: 'name',
-        title: '收件人名称',
-        minWidth: 120,
-      },
-      {
-        field: 'mobile',
-        title: '手机号',
-        minWidth: 130,
-      },
-      {
-        field: 'areaId',
-        title: '地区编码',
-        minWidth: 120,
-      },
-      {
-        field: 'detailAddress',
-        title: '收件详细地址',
-        minWidth: 200,
-      },
-      {
-        field: 'defaultStatus',
-        title: '是否默认',
-        minWidth: 100,
-        slots: {
-          default: ({ row }) => {
-            return h(
-              ElTag,
-              {
-                class: 'mr-1',
-                type: row.defaultStatus ? 'primary' : 'danger',
-              },
-              () => (row.defaultStatus ? '是' : '否'),
-            );
-          },
-        },
-      },
-      {
-        field: 'createTime',
-        title: '创建时间',
-        formatter: 'formatDateTime',
-        minWidth: 160,
-      },
-    ],
-    keepSource: true,
-    pagerConfig: {
-      enabled: false,
-    },
-    proxyConfig: {
-      ajax: {
-        query: async () => {
-          return await getAddressList({
-            userId: props.userId,
-          });
-        },
-      },
-    },
-    rowConfig: {
-      keyField: 'id',
-    },
-    toolbarConfig: {
-      refresh: true,
-      search: true,
-    },
-  } as VxeTableGridOptions<MemberAddressApi.Address>,
-});
-</script>
-
-<template>
-  <Grid />
-</template>
diff --git a/apps/web-ele/src/views/member/user/detail/modules/user-after-sale-list.vue b/apps/web-ele/src/views/member/user/detail/modules/user-after-sale-list.vue
deleted file mode 100644
index 08b815945..000000000
--- a/apps/web-ele/src/views/member/user/detail/modules/user-after-sale-list.vue
+++ /dev/null
@@ -1,150 +0,0 @@
-<script setup lang="ts">
-import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { MallAfterSaleApi } from '#/api/mall/trade/afterSale/index';
-
-import { ref, watch } from 'vue';
-
-import { ElTabPane, ElTabs } from 'element-plus';
-
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
-import { getAfterSalePage } from '#/api/mall/trade/afterSale';
-import { DICT_TYPE } from '@vben/constants';
-import { getDictOptions } from '@vben/hooks';
-
-import { getRangePickerDefaultProps } from '#/utils';
-import { useGridColumns } from '#/views/mall/trade/order/data';
-
-const props = defineProps<{
-  userId: number;
-}>();
-
-// 添加当前选中的售后状态
-const activeStatus = ref<number | string>('all');
-
-const [Grid, gridApi] = useVbenVxeGrid({
-  formOptions: {
-    schema: [
-      {
-        fieldName: 'spuName',
-        label: '商品名称',
-        component: 'Input',
-      },
-      {
-        fieldName: 'no',
-        label: '退款编号',
-        component: 'Input',
-      },
-      {
-        fieldName: 'orderNo',
-        label: '订单编号',
-        component: 'Input',
-      },
-      {
-        fieldName: 'status',
-        label: '售后状态',
-        component: 'Select',
-        componentProps: {
-          options: getDictOptions(DICT_TYPE.TRADE_AFTER_SALE_STATUS, 'number'),
-        },
-      },
-      {
-        fieldName: 'type',
-        label: '售后方式',
-        component: 'Select',
-        componentProps: {
-          options: getDictOptions(DICT_TYPE.TRADE_AFTER_SALE_WAY, 'number'),
-        },
-      },
-      {
-        fieldName: 'type',
-        label: '售后类型',
-        component: 'Select',
-        componentProps: {
-          options: getDictOptions(DICT_TYPE.TRADE_AFTER_SALE_TYPE, 'number'),
-        },
-      },
-      {
-        fieldName: 'createTime',
-        label: '创建时间',
-        component: 'RangePicker',
-        componentProps: {
-          ...getRangePickerDefaultProps(),
-          clearable: true,
-        },
-      },
-    ],
-    // 监听表单值变化
-    handleValuesChange: (values, changedFields) => {
-      // 如果状态字段发生变化
-      if (changedFields.includes('status')) {
-        // 同步更新标签页选中状态
-        activeStatus.value = values.status ? String(values.status) : 'all';
-      }
-    },
-  },
-  gridOptions: {
-    columns: useGridColumns(),
-    keepSource: true,
-    pagerConfig: {
-      pageSize: 10,
-    },
-    proxyConfig: {
-      ajax: {
-        query: async ({ page }, formValues) => {
-          return await getAfterSalePage({
-            pageNo: page.currentPage,
-            pageSize: page.pageSize,
-            userId: props.userId,
-            ...formValues,
-          });
-        },
-      },
-    },
-    rowConfig: {
-      keyField: 'id',
-    },
-    toolbarConfig: {
-      refresh: true,
-      search: true,
-      slots: {
-        buttons: 'customTop',
-      },
-    },
-  } as VxeTableGridOptions<MallAfterSaleApi.AfterSale>,
-  separator: false,
-});
-
-// 监听标签页变化，更新表单状态值并触发查询
-watch(activeStatus, (val) => {
-  // 使用formApi获取表单对象
-  if (gridApi.formApi) {
-    // 设置状态值
-    gridApi.formApi.setFieldValue(
-      'status',
-      val === 'all' ? undefined : Number(val),
-    );
-
-    // 触发查询
-    gridApi.query({ status: val === 'all' ? undefined : Number(val) });
-  }
-});
-</script>
-
-<template>
-  <Grid>
-    <template #customTop>
-      <ElTabs v-model="activeStatus">
-        <ElTabPane label="全部" name="all" />
-        <ElTabPane
-          v-for="item in getDictOptions(
-            DICT_TYPE.TRADE_AFTER_SALE_STATUS,
-            'number',
-          )"
-          :key="String(item.value)"
-          :label="item.label"
-          :name="String(item.value)"
-        />
-      </ElTabs>
-    </template>
-  </Grid>
-</template>
diff --git a/apps/web-ele/src/views/member/user/detail/modules/user-brokerage-list.vue b/apps/web-ele/src/views/member/user/detail/modules/user-brokerage-list.vue
deleted file mode 100644
index f39a9f514..000000000
--- a/apps/web-ele/src/views/member/user/detail/modules/user-brokerage-list.vue
+++ /dev/null
@@ -1,139 +0,0 @@
-<script setup lang="ts">
-import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { MallBrokerageUserApi } from '#/api/mall/trade/brokerage/user';
-
-import { ref, watch } from 'vue';
-
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
-import * as BrokerageUserApi from '#/api/mall/trade/brokerage/user';
-import { getRangePickerDefaultProps } from '#/utils';
-
-const props = defineProps<{
-  userId: number;
-}>();
-
-// 添加当前选中的状态
-const activeStatus = ref<number | string>('all');
-
-const [Grid, gridApi] = useVbenVxeGrid({
-  formOptions: {
-    schema: [
-      {
-        fieldName: 'level',
-        label: '用户类型',
-        component: 'RadioGroup',
-        componentProps: {
-          options: [
-            {
-              label: '全部',
-              value: 0,
-            },
-            {
-              label: '一级',
-              value: 1,
-            },
-            {
-              label: '二级',
-              value: 2,
-            },
-          ],
-          isButton: true,
-        },
-      },
-      {
-        fieldName: 'bindUserTime',
-        label: '绑定时间',
-        component: 'RangePicker',
-        componentProps: {
-          ...getRangePickerDefaultProps(),
-          clearable: true,
-        },
-      },
-    ],
-  },
-  gridOptions: {
-    columns: [
-      {
-        field: 'id',
-        title: '用户编号',
-      },
-      {
-        field: 'avatar',
-        title: '头像',
-        cellRender: {
-          name: 'CellImage',
-          props: {
-            height: 40,
-            width: 40,
-            shape: 'circle',
-          },
-        },
-      },
-      {
-        field: 'nickname',
-        title: '昵称',
-      },
-      {
-        field: 'level',
-        title: '等级',
-        formatter: (row: any) => {
-          return row.level === 1 ? '一级' : '二级';
-        },
-      },
-      {
-        field: 'bindUserTime',
-        title: '绑定时间',
-        formatter: 'formatDateTime',
-      },
-    ],
-    keepSource: true,
-    pagerConfig: {
-      pageSize: 10,
-    },
-    expandConfig: {
-      trigger: 'row',
-      expandAll: true,
-      padding: true,
-    },
-    proxyConfig: {
-      ajax: {
-        query: async ({ page }, formValues) => {
-          return await BrokerageUserApi.getBrokerageUserPage({
-            pageNo: page.currentPage,
-            pageSize: page.pageSize,
-            userId: props.userId,
-            ...formValues,
-          });
-        },
-      },
-    },
-    rowConfig: {
-      keyField: 'id',
-    },
-    toolbarConfig: {
-      refresh: true,
-      search: true,
-    },
-  } as VxeTableGridOptions<MallBrokerageUserApi.BrokerageUser>,
-  separator: false,
-});
-
-// 监听标签页变化，更新表单状态值并触发查询
-watch(activeStatus, (val) => {
-  // 使用formApi获取表单对象
-  if (gridApi.formApi) {
-    // 设置状态值
-    gridApi.formApi.setFieldValue(
-      'status',
-      val === 'all' ? undefined : Number(val),
-    );
-
-    // 触发查询
-    gridApi.query({ status: val === 'all' ? undefined : Number(val) });
-  }
-});
-</script>
-
-<template>
-  <Grid />
-</template>
diff --git a/apps/web-ele/src/views/member/user/detail/modules/user-coupon-list.vue b/apps/web-ele/src/views/member/user/detail/modules/user-coupon-list.vue
deleted file mode 100644
index 8d644e7f4..000000000
--- a/apps/web-ele/src/views/member/user/detail/modules/user-coupon-list.vue
+++ /dev/null
@@ -1,183 +0,0 @@
-<script setup lang="ts">
-import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { MallCouponApi } from '#/api/mall/promotion/coupon/coupon';
-
-import { ref, watch } from 'vue';
-
-import { DICT_TYPE } from '@vben/constants';
-import { getDictOptions } from '@vben/hooks';
-
-import { ElLoading, ElMessage, ElTabPane, ElTabs } from 'element-plus';
-
-import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
-import {
-  deleteCoupon,
-  getCouponPage,
-} from '#/api/mall/promotion/coupon/coupon';
-import { getRangePickerDefaultProps } from '#/utils';
-
-const props = defineProps<{
-  userId: number;
-}>();
-
-// 添加当前选中的状态
-const activeStatus = ref<number | string>('all');
-
-/** 删除按钮操作 */
-const handleDelete = async (row: MallCouponApi.Coupon) => {
-  const loadingInstance = ElLoading.service({
-    text: '回收将会收回会员领取的待使用的优惠券，已使用的将无法回收，确定要回收所选优惠券吗？',
-  });
-  try {
-    await deleteCoupon(row.id as number);
-    ElMessage.success('回收成功');
-    // 重新加载列表
-    gridApi.query();
-  } finally {
-    loadingInstance.close();
-  }
-};
-
-const [Grid, gridApi] = useVbenVxeGrid({
-  formOptions: {
-    schema: [
-      {
-        fieldName: 'createTime',
-        label: '创建时间',
-        component: 'RangePicker',
-        componentProps: {
-          ...getRangePickerDefaultProps(),
-          clearable: true,
-        },
-      },
-    ],
-  },
-  gridOptions: {
-    columns: [
-      {
-        field: 'name',
-        title: '优惠劵',
-      },
-      {
-        field: 'discountType',
-        title: 'discountType',
-        cellRender: {
-          name: 'CellDict',
-          props: { type: DICT_TYPE.PROMOTION_DISCOUNT_TYPE },
-        },
-      },
-      {
-        field: 'takeType',
-        title: '领取方式',
-        cellRender: {
-          name: 'CellDict',
-          props: { type: DICT_TYPE.PROMOTION_COUPON_TAKE_TYPE },
-        },
-      },
-      {
-        field: 'status',
-        title: '状态',
-        cellRender: {
-          name: 'CellDict',
-          props: { type: DICT_TYPE.PROMOTION_COUPON_STATUS },
-        },
-      },
-      {
-        field: 'createTime',
-        title: '领取时间',
-        formatter: 'formatDateTime',
-      },
-      {
-        field: 'useTime',
-        title: '使用时间',
-        formatter: 'formatDateTime',
-      },
-      {
-        title: '操作',
-        width: 180,
-        fixed: 'right',
-        slots: { default: 'actions' },
-      },
-    ],
-    keepSource: true,
-    pagerConfig: {
-      pageSize: 10,
-    },
-    expandConfig: {
-      trigger: 'row',
-      expandAll: true,
-      padding: true,
-    },
-    proxyConfig: {
-      ajax: {
-        query: async ({ page }, formValues) => {
-          return await getCouponPage({
-            pageNo: page.currentPage,
-            pageSize: page.pageSize,
-            userId: props.userId,
-            ...formValues,
-          });
-        },
-      },
-    },
-    rowConfig: {
-      keyField: 'id',
-    },
-    toolbarConfig: {
-      refresh: true,
-      search: true,
-      slots: {
-        buttons: 'customTop',
-      },
-    },
-  } as VxeTableGridOptions<MallCouponApi.Coupon>,
-  separator: false,
-});
-
-// 监听标签页变化，更新表单状态值并触发查询
-watch(activeStatus, (val) => {
-  // 使用formApi获取表单对象
-  if (gridApi.formApi) {
-    // 设置状态值
-    gridApi.formApi.setFieldValue(
-      'status',
-      val === 'all' ? undefined : Number(val),
-    );
-
-    // 触发查询
-    gridApi.query({ status: val === 'all' ? undefined : Number(val) });
-  }
-});
-</script>
-
-<template>
-  <Grid>
-    <template #customTop>
-      <ElTabs v-model="activeStatus">
-        <ElTabPane label="全部" name="all" />
-        <ElTabPane
-          v-for="item in getDictOptions(
-            DICT_TYPE.PROMOTION_COUPON_STATUS,
-            'number',
-          )"
-          :key="String(item.value)"
-          :label="item.label"
-          :name="String(item.value)"
-        />
-      </ElTabs>
-    </template>
-    <template #actions="{ row }">
-      <TableAction
-        :actions="[
-          {
-            label: '回收',
-            link: true,
-            icon: ACTION_ICON.EDIT,
-            auth: ['promotion:coupon:delete'],
-            onClick: handleDelete.bind(null, row),
-          },
-        ]"
-      />
-    </template>
-  </Grid>
-</template>
diff --git a/apps/web-ele/src/views/member/user/detail/modules/user-order-list.vue b/apps/web-ele/src/views/member/user/detail/modules/user-order-list.vue
deleted file mode 100644
index c00784265..000000000
--- a/apps/web-ele/src/views/member/user/detail/modules/user-order-list.vue
+++ /dev/null
@@ -1,264 +0,0 @@
-<script setup lang="ts">
-import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { MallDeliveryPickUpStoreApi } from '#/api/mall/trade/delivery/pickUpStore';
-import type { MallOrderApi } from '#/api/mall/trade/order/index';
-
-import { ref } from 'vue';
-import { useRouter } from 'vue-router';
-
-import { DeliveryTypeEnum, DICT_TYPE } from '@vben/constants';
-import { getDictOptions } from '@vben/hooks';
-import { $t } from '@vben/locales';
-import { fenToYuan } from '@vben/utils';
-
-import { ElImage, ElTag } from 'element-plus';
-
-import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
-import { getSimpleDeliveryExpressList } from '#/api/mall/trade/delivery/express';
-import { getSimpleDeliveryPickUpStoreList } from '#/api/mall/trade/delivery/pickUpStore';
-import * as OrderApi from '#/api/mall/trade/order/index';
-import { DictTag } from '#/components/dict-tag';
-import { getRangePickerDefaultProps } from '#/utils';
-import { useGridColumns } from '#/views/mall/trade/order/data';
-
-const props = defineProps<{
-  userId: number;
-}>();
-
-const pickUpStoreList = ref<MallDeliveryPickUpStoreApi.PickUpStore[]>([]);
-
-getSimpleDeliveryPickUpStoreList().then((res) => {
-  pickUpStoreList.value = res;
-});
-const { push } = useRouter();
-/** 详情 */
-function handleDetail(row: MallOrderApi.Order) {
-  push({ name: 'TradeOrderDetail', params: { id: row.id } });
-}
-
-const [Grid] = useVbenVxeGrid({
-  formOptions: {
-    schema: [
-      {
-        fieldName: 'bizType',
-        label: '订单状态',
-        component: 'Select',
-        componentProps: {
-          clearable: true,
-          options: getDictOptions(DICT_TYPE.TRADE_ORDER_STATUS, 'number'),
-          placeholder: '全部',
-        },
-      },
-      {
-        fieldName: 'payChannelCode',
-        label: '支付方式',
-        component: 'Select',
-        componentProps: {
-          clearable: true,
-          options: getDictOptions(DICT_TYPE.PAY_CHANNEL_CODE, 'number'),
-          placeholder: '全部',
-        },
-      },
-      {
-        fieldName: 'createTime',
-        label: '创建时间',
-        component: 'RangePicker',
-        componentProps: {
-          ...getRangePickerDefaultProps(),
-          clearable: true,
-        },
-      },
-      {
-        fieldName: 'terminal',
-        label: '订单来源',
-        component: 'Select',
-        componentProps: {
-          clearable: true,
-          options: getDictOptions(DICT_TYPE.TERMINAL, 'number'),
-          placeholder: '全部',
-        },
-      },
-      {
-        fieldName: 'type',
-        label: '订单类型',
-        component: 'Select',
-        componentProps: {
-          clearable: true,
-          options: getDictOptions(DICT_TYPE.TRADE_ORDER_TYPE, 'number'),
-          placeholder: '全部',
-        },
-      },
-      {
-        fieldName: 'deliveryType',
-        label: '配送方式',
-        component: 'Select',
-        componentProps: {
-          clearable: true,
-          options: getDictOptions(DICT_TYPE.TRADE_DELIVERY_TYPE, 'number'),
-          placeholder: '全部',
-        },
-      },
-      {
-        fieldName: 'logisticsId',
-        label: '快递公司',
-        component: 'ApiSelect',
-        componentProps: {
-          clearable: true,
-          api: getSimpleDeliveryExpressList,
-          labelField: 'name',
-          valueField: 'id',
-          placeholder: '全部',
-        },
-        dependencies: {
-          triggerFields: ['deliveryType'],
-          show: (values) =>
-            values.deliveryType === DeliveryTypeEnum.EXPRESS.type,
-        },
-      },
-      {
-        fieldName: 'pickUpStoreId',
-        label: '自提门店',
-        component: 'ApiSelect',
-        componentProps: {
-          api: getSimpleDeliveryPickUpStoreList,
-          labelField: 'name',
-          valueField: 'id',
-        },
-        dependencies: {
-          triggerFields: ['deliveryType'],
-          show: (values) =>
-            values.deliveryType === DeliveryTypeEnum.PICK_UP.type,
-        },
-      },
-      {
-        fieldName: 'pickUpVerifyCode',
-        label: '核销码',
-        component: 'Input',
-        dependencies: {
-          triggerFields: ['deliveryType'],
-          show: (values) =>
-            values.deliveryType === DeliveryTypeEnum.PICK_UP.type,
-        },
-      },
-    ],
-  },
-  gridOptions: {
-    columns: useGridColumns(),
-    keepSource: true,
-    pagerConfig: {
-      pageSize: 10,
-    },
-    expandConfig: {
-      trigger: 'row',
-      expandAll: true,
-      padding: true,
-    },
-    proxyConfig: {
-      ajax: {
-        query: async ({ page }, formValues) => {
-          return await OrderApi.getOrderPage({
-            pageNo: page.currentPage,
-            pageSize: page.pageSize,
-            userId: props.userId,
-            ...formValues,
-          });
-        },
-      },
-    },
-    rowConfig: {
-      keyField: 'id',
-    },
-    toolbarConfig: {
-      refresh: true,
-      search: true,
-    },
-  } as VxeTableGridOptions<MallOrderApi.Order>,
-  separator: false,
-});
-</script>
-
-<template>
-  <Grid table-title="订单列表">
-    <template #expand_content="{ row }">
-      <div class="order-items">
-        <div v-for="(item, index) in row.items" :key="index" class="order-item">
-          <div class="order-item-image">
-            <ElImage :src="item.picUrl" :width="40" :height="40" />
-          </div>
-          <div class="order-item-content">
-            <div class="order-item-name">
-              {{ item.spuName }}
-              <ElTag
-                v-for="property in item.properties"
-                :key="property.id"
-                class="ml-1"
-              >
-                {{ property.propertyName }}: {{ property.valueName }}
-              </ElTag>
-            </div>
-            <div class="order-item-info">
-              <span>
-                原价：{{ fenToYuan(item.price) }} 元 / 数量：{{ item.count }} 个
-              </span>
-              <DictTag
-                :type="DICT_TYPE.TRADE_ORDER_ITEM_AFTER_SALE_STATUS"
-                :value="item.afterSaleStatus"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </template>
-    <template #actions="{ row }">
-      <TableAction
-        :actions="[
-          {
-            label: $t('common.detail'),
-            link: true,
-            icon: ACTION_ICON.VIEW,
-            auth: ['trade:order:query'],
-            onClick: handleDetail.bind(null, row),
-          },
-        ]"
-      />
-    </template>
-  </Grid>
-</template>
-<style lang="scss" scoped>
-.order-items {
-  padding: 8px 0;
-}
-
-.order-item {
-  display: flex;
-  align-items: flex-start;
-  padding: 8px 0;
-  border-bottom: 1px solid #f0f0f0;
-
-  &:last-child {
-    border-bottom: none;
-  }
-}
-
-.order-item-image {
-  flex-shrink: 0;
-  margin-right: 12px;
-}
-
-.order-item-content {
-  flex: 1;
-}
-
-.order-item-name {
-  margin-bottom: 4px;
-  font-weight: 500;
-}
-
-.order-item-info {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  font-size: 13px;
-  color: #666;
-}
-</style>
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