diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
index b4afdd939..bb59abb03 100644
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -30,7 +30,7 @@ jobs:
         run: pnpm build:play
 
       - name: Sync Playground files
-        uses: SamKirkland/FTP-Deploy-Action@v4.3.5
+        uses: SamKirkland/FTP-Deploy-Action@v4.3.6
         with:
           server: ${{ secrets.PRO_FTP_HOST }}
           username: ${{ secrets.WEB_PLAYGROUND_FTP_ACCOUNT }}
@@ -54,7 +54,7 @@ jobs:
         run: pnpm build:docs
 
       - name: Sync Docs files
-        uses: SamKirkland/FTP-Deploy-Action@v4.3.5
+        uses: SamKirkland/FTP-Deploy-Action@v4.3.6
         with:
           server: ${{ secrets.PRO_FTP_HOST }}
           username: ${{ secrets.WEBSITE_FTP_ACCOUNT }}
@@ -85,7 +85,7 @@ jobs:
         run: pnpm run build:antd
 
       - name: Sync files
-        uses: SamKirkland/FTP-Deploy-Action@v4.3.5
+        uses: SamKirkland/FTP-Deploy-Action@v4.3.6
         with:
           server: ${{ secrets.PRO_FTP_HOST }}
           username: ${{ secrets.WEB_ANTD_FTP_ACCOUNT }}
@@ -116,7 +116,7 @@ jobs:
         run: pnpm run build:ele
 
       - name: Sync files
-        uses: SamKirkland/FTP-Deploy-Action@v4.3.5
+        uses: SamKirkland/FTP-Deploy-Action@v4.3.6
         with:
           server: ${{ secrets.PRO_FTP_HOST }}
           username: ${{ secrets.WEB_ELE_FTP_ACCOUNT }}
@@ -147,7 +147,7 @@ jobs:
         run: pnpm run build:naive
 
       - name: Sync files
-        uses: SamKirkland/FTP-Deploy-Action@v4.3.5
+        uses: SamKirkland/FTP-Deploy-Action@v4.3.6
         with:
           server: ${{ secrets.PRO_FTP_HOST }}
           username: ${{ secrets.WEB_NAIVE_FTP_ACCOUNT }}
diff --git a/.npmrc b/.npmrc
index 21147aff2..aeac1ae91 100644
--- a/.npmrc
+++ b/.npmrc
@@ -1,4 +1,4 @@
-registry = "https://registry.npmmirror.com"
+registry=https://registry.npmmirror.com
 public-hoist-pattern[]=lefthook
 public-hoist-pattern[]=eslint
 public-hoist-pattern[]=prettier
diff --git a/.workflow/pipeline-20251103.yml b/.workflow/pipeline-20251103.yml
new file mode 100644
index 000000000..f527e76e6
--- /dev/null
+++ b/.workflow/pipeline-20251103.yml
@@ -0,0 +1,56 @@
+version: '1.0'
+name: pipeline-20251103
+displayName: master-build
+triggers:
+  trigger: auto
+  push:
+    branches:
+      prefix:
+        - ''
+  pr:
+    branches:
+      prefix:
+        - ''
+  schedule:
+    - cron: '* * * 1 * ? *'
+stages:
+  - name: stage-72bb5db9
+    displayName: build
+    strategy: naturally
+    trigger: auto
+    executor: []
+    steps:
+      - step: build@nodejs
+        name: build_nodejs
+        displayName: Nodejs 构建
+        nodeVersion: 24.5.0
+        commands:
+          - '# 设置NPM源，提升安装速度'
+          - npm config set registry https://registry.npmmirror.com
+          - '# 安装pnpm'
+          - npm add -g pnpm
+          - '# 安装依赖'
+          - pnpm i
+          - '# 检查lint'
+          - pnpm lint
+          - '# 检查check'
+          - pnpm check
+          - '# 执行编译命令antd'
+          - pnpm build:antd
+          - '# 执行编译命令ele'
+          - pnpm build:ele
+          - '# 执行编译命令naive'
+          - pnpm build:naive
+        artifacts:
+          - name: BUILD_ARTIFACT
+            path:
+              - ./apps/web-antd/dist/
+              - ./apps/web-ele/dist/
+              - ./apps/web-naive/dist/
+        caches:
+          - ~/.npm
+          - ~/.yarn
+          - ~/.pnpm
+        notify: []
+        strategy:
+          retry: '0'
diff --git a/apps/backend-mock/api/timezone/getTimezone.ts b/apps/backend-mock/api/timezone/getTimezone.ts
new file mode 100644
index 000000000..0cbcb6ec0
--- /dev/null
+++ b/apps/backend-mock/api/timezone/getTimezone.ts
@@ -0,0 +1,12 @@
+import { eventHandler } from 'h3';
+import { verifyAccessToken } from '~/utils/jwt-utils';
+import { unAuthorizedResponse, useResponseSuccess } from '~/utils/response';
+import { getTimezone } from '~/utils/timezone-utils';
+
+export default eventHandler((event) => {
+  const userinfo = verifyAccessToken(event);
+  if (!userinfo) {
+    return unAuthorizedResponse(event);
+  }
+  return useResponseSuccess(getTimezone());
+});
diff --git a/apps/backend-mock/api/timezone/getTimezoneOptions.ts b/apps/backend-mock/api/timezone/getTimezoneOptions.ts
new file mode 100644
index 000000000..6c241864e
--- /dev/null
+++ b/apps/backend-mock/api/timezone/getTimezoneOptions.ts
@@ -0,0 +1,11 @@
+import { eventHandler } from 'h3';
+import { TIME_ZONE_OPTIONS } from '~/utils/mock-data';
+import { useResponseSuccess } from '~/utils/response';
+
+export default eventHandler(() => {
+  const data = TIME_ZONE_OPTIONS.map((o) => ({
+    label: `${o.timezone} (GMT${o.offset >= 0 ? `+${o.offset}` : o.offset})`,
+    value: o.timezone,
+  }));
+  return useResponseSuccess(data);
+});
diff --git a/apps/backend-mock/api/timezone/setTimezone.ts b/apps/backend-mock/api/timezone/setTimezone.ts
new file mode 100644
index 000000000..34d8f19e2
--- /dev/null
+++ b/apps/backend-mock/api/timezone/setTimezone.ts
@@ -0,0 +1,22 @@
+import { eventHandler, readBody } from 'h3';
+import { verifyAccessToken } from '~/utils/jwt-utils';
+import { TIME_ZONE_OPTIONS } from '~/utils/mock-data';
+import { unAuthorizedResponse, useResponseSuccess } from '~/utils/response';
+import { setTimezone } from '~/utils/timezone-utils';
+
+export default eventHandler(async (event) => {
+  const userinfo = verifyAccessToken(event);
+  if (!userinfo) {
+    return unAuthorizedResponse(event);
+  }
+  const body = await readBody<{ timezone?: unknown }>(event);
+  const timezone =
+    typeof body?.timezone === 'string' ? body.timezone : undefined;
+  const allowed = TIME_ZONE_OPTIONS.some((o) => o.timezone === timezone);
+  if (!timezone || !allowed) {
+    setResponseStatus(event, 400);
+    return useResponseError('Bad Request', 'Invalid timezone');
+  }
+  setTimezone(timezone);
+  return useResponseSuccess({});
+});
diff --git a/apps/backend-mock/utils/mock-data.ts b/apps/backend-mock/utils/mock-data.ts
index 192f30a00..ee38e8ef9 100644
--- a/apps/backend-mock/utils/mock-data.ts
+++ b/apps/backend-mock/utils/mock-data.ts
@@ -7,6 +7,11 @@ export interface UserInfo {
   homePath?: string;
 }
 
+export interface TimezoneOption {
+  offset: number;
+  timezone: string;
+}
+
 export const MOCK_USERS: UserInfo[] = [
   {
     id: 0,
@@ -276,7 +281,7 @@ export const MOCK_MENU_LIST = [
         children: [
           {
             id: 20_401,
-            pid: 201,
+            pid: 202,
             name: 'SystemDeptCreate',
             status: 1,
             type: 'button',
@@ -285,7 +290,7 @@ export const MOCK_MENU_LIST = [
           },
           {
             id: 20_402,
-            pid: 201,
+            pid: 202,
             name: 'SystemDeptEdit',
             status: 1,
             type: 'button',
@@ -294,7 +299,7 @@ export const MOCK_MENU_LIST = [
           },
           {
             id: 20_403,
-            pid: 201,
+            pid: 202,
             name: 'SystemDeptDelete',
             status: 1,
             type: 'button',
@@ -388,3 +393,29 @@ export function getMenuIds(menus: any[]) {
   });
   return ids;
 }
+
+/**
+ * 时区选项
+ */
+export const TIME_ZONE_OPTIONS: TimezoneOption[] = [
+  {
+    offset: -5,
+    timezone: 'America/New_York',
+  },
+  {
+    offset: 0,
+    timezone: 'Europe/London',
+  },
+  {
+    offset: 8,
+    timezone: 'Asia/Shanghai',
+  },
+  {
+    offset: 9,
+    timezone: 'Asia/Tokyo',
+  },
+  {
+    offset: 9,
+    timezone: 'Asia/Seoul',
+  },
+];
diff --git a/apps/backend-mock/utils/timezone-utils.ts b/apps/backend-mock/utils/timezone-utils.ts
new file mode 100644
index 000000000..da35f920f
--- /dev/null
+++ b/apps/backend-mock/utils/timezone-utils.ts
@@ -0,0 +1,9 @@
+let mockTimeZone: null | string = null;
+
+export const setTimezone = (timeZone: string) => {
+  mockTimeZone = timeZone;
+};
+
+export const getTimezone = () => {
+  return mockTimeZone;
+};
diff --git a/apps/web-antd/src/api/mall/promotion/reward/rewardActivity.ts b/apps/web-antd/src/api/mall/promotion/reward/rewardActivity.ts
index 2faf443b8..e59cad300 100644
--- a/apps/web-antd/src/api/mall/promotion/reward/rewardActivity.ts
+++ b/apps/web-antd/src/api/mall/promotion/reward/rewardActivity.ts
@@ -18,6 +18,7 @@ export namespace MallRewardActivityApi {
   export interface RewardActivity {
     id?: number; // 活动编号
     name?: string; // 活动名称
+    status?: number; // 活动状态
     startTime?: Date; // 开始时间
     endTime?: Date; // 结束时间
     startAndEndTime?: Date[]; // 开始和结束时间（仅前端使用）
diff --git a/apps/web-antd/src/components/cron-tab/cron-tab.vue b/apps/web-antd/src/components/cron-tab/cron-tab.vue
index 79dc261ae..bb0a42186 100644
--- a/apps/web-antd/src/components/cron-tab/cron-tab.vue
+++ b/apps/web-antd/src/components/cron-tab/cron-tab.vue
@@ -420,7 +420,7 @@ function inputChange() {
     @input="inputChange"
   >
     <template #addonAfter>
-      <Select v-model:value="select" placeholder="生成器" style="width: 115px">
+      <Select v-model:value="select" placeholder="生成器" class="w-36">
         <Select.Option value="0 * * * * ?">每分钟</Select.Option>
         <Select.Option value="0 0 * * * ?">每小时</Select.Option>
         <Select.Option value="0 0 0 * * ?">每天零点</Select.Option>
@@ -946,20 +946,20 @@ function inputChange() {
   padding: 0 15px;
   font-size: 12px;
   line-height: 30px;
-  background: var(--ant-primary-color-active-bg);
+  background: hsl(var(--primary) / 10%);
   border-radius: 4px;
 }
 
 .sc-cron :deep(.ant-tabs-tab.ant-tabs-tab-active) .sc-cron-num h4 {
   color: #fff;
-  background: var(--ant-primary-color);
+  background: hsl(var(--primary));
 }
 
 [data-theme='dark'] .sc-cron-num h4 {
-  background: var(--ant-color-white);
+  background: hsl(var(--white));
 }
 
 .input-with-select .ant-input-group-addon {
-  background-color: var(--ant-color-fill-alter);
+  background-color: hsl(var(--muted));
 }
 </style>
diff --git a/apps/web-antd/src/components/description/description.vue b/apps/web-antd/src/components/description/description.vue
index 3d341596e..d591e5722 100644
--- a/apps/web-antd/src/components/description/description.vue
+++ b/apps/web-antd/src/components/description/description.vue
@@ -133,9 +133,7 @@ export default defineComponent({
             >
               {() => {
                 if (item.slot) {
-                  // TODO @xingyu：这里要 inline 掉么？
-                  const slotContent = getSlot(slots, item.slot, data);
-                  return slotContent;
+                  return getSlot(slots, item.slot, data);
                 }
                 if (!contentMinWidth) {
                   return getContent();
diff --git a/apps/web-antd/src/components/shortcut-date-range-picker/shortcut-date-range-picker.vue b/apps/web-antd/src/components/shortcut-date-range-picker/shortcut-date-range-picker.vue
index e5ff39990..5a3ce0526 100644
--- a/apps/web-antd/src/components/shortcut-date-range-picker/shortcut-date-range-picker.vue
+++ b/apps/web-antd/src/components/shortcut-date-range-picker/shortcut-date-range-picker.vue
@@ -81,7 +81,7 @@ onMounted(() => {
       :value-format="rangePickerProps.valueFormat"
       :placeholder="rangePickerProps.placeholder"
       :presets="rangePickerProps.presets"
-      class="!w-[235px]"
+      class="!w-full !max-w-96"
       @change="handleDateRangeChange"
     />
     <slot></slot>
diff --git a/apps/web-antd/src/layouts/auth.vue b/apps/web-antd/src/layouts/auth.vue
index 18d415bc7..8ba66e85a 100644
--- a/apps/web-antd/src/layouts/auth.vue
+++ b/apps/web-antd/src/layouts/auth.vue
@@ -8,12 +8,14 @@ import { $t } from '#/locales';
 
 const appName = computed(() => preferences.app.name);
 const logo = computed(() => preferences.logo.source);
+const logoDark = computed(() => preferences.logo.sourceDark);
 </script>
 
 <template>
   <AuthPageLayout
     :app-name="appName"
     :logo="logo"
+    :logo-dark="logoDark"
     :page-description="$t('authentication.pageDesc')"
     :page-title="$t('authentication.pageTitle')"
   >
diff --git a/apps/web-antd/src/plugins/form-create/index.ts b/apps/web-antd/src/plugins/form-create/index.ts
index d7b59b5b7..e13f1c1f7 100644
--- a/apps/web-antd/src/plugins/form-create/index.ts
+++ b/apps/web-antd/src/plugins/form-create/index.ts
@@ -96,7 +96,7 @@ export function setupFormCreate(app: App) {
   components.forEach((component) => {
     app.component(component.name as string, component);
   });
-  // TODO @xingyu：这里为啥 app.component('AMessage', message); 看官方是没有的；
+  // TODO @xingyu：这里为啥 app.component('AMessage', message); 看官方是没有的； 需要额外引入
   app.component('AMessage', message);
   formCreate.use(install);
   app.use(formCreate);
diff --git a/apps/web-antd/src/store/mall/kefu.ts b/apps/web-antd/src/store/mall/kefu.ts
new file mode 100644
index 000000000..85f4023e7
--- /dev/null
+++ b/apps/web-antd/src/store/mall/kefu.ts
@@ -0,0 +1,102 @@
+import type { MallKefuConversationApi } from '#/api/mall/promotion/kefu/conversation';
+import type { MallKefuMessageApi } from '#/api/mall/promotion/kefu/message';
+
+import { isEmpty } from '@vben/utils';
+
+import { acceptHMRUpdate, defineStore } from 'pinia';
+
+import * as KeFuConversationApi from '#/api/mall/promotion/kefu/conversation';
+
+interface MallKefuInfoVO {
+  conversationList: MallKefuConversationApi.Conversation[]; // 会话列表
+  conversationMessageList: Map<number, MallKefuMessageApi.Message[]>; // 会话消息
+}
+
+export const useMallKefuStore = defineStore('mall-kefu', {
+  state: (): MallKefuInfoVO => ({
+    conversationList: [],
+    conversationMessageList: new Map<number, MallKefuMessageApi.Message[]>(), // key 会话，value 会话消息列表
+  }),
+  getters: {
+    getConversationList(): MallKefuConversationApi.Conversation[] {
+      return this.conversationList;
+    },
+    getConversationMessageList(): (
+      conversationId: number,
+    ) => MallKefuMessageApi.Message[] | undefined {
+      return (conversationId: number) =>
+        this.conversationMessageList.get(conversationId);
+    },
+  },
+  actions: {
+    // ======================= 会话消息相关 =======================
+    /** 缓存历史消息 */
+    saveMessageList(
+      conversationId: number,
+      messageList: MallKefuMessageApi.Message[],
+    ) {
+      this.conversationMessageList.set(conversationId, messageList);
+    },
+
+    // ======================= 会话相关 =======================
+    /** 加载会话缓存列表 */
+    async setConversationList() {
+      // TODO @jave：idea linter 告警，修复下；
+      // TODO @jave：不使用 KeFuConversationApi.，直接用 getConversationList
+      this.conversationList = await KeFuConversationApi.getConversationList();
+      this.conversationSort();
+    },
+    /** 更新会话缓存已读 */
+    async updateConversationStatus(conversationId: number) {
+      if (isEmpty(this.conversationList)) {
+        return;
+      }
+      const conversation = this.conversationList.find(
+        (item) => item.id === conversationId,
+      );
+      conversation && (conversation.adminUnreadMessageCount = 0);
+    },
+    /** 更新会话缓存 */
+    async updateConversation(conversationId: number) {
+      if (isEmpty(this.conversationList)) {
+        return;
+      }
+
+      const conversation =
+        await KeFuConversationApi.getConversation(conversationId);
+      this.deleteConversation(conversationId);
+      conversation && this.conversationList.push(conversation);
+      this.conversationSort();
+    },
+    /** 删除会话缓存 */
+    deleteConversation(conversationId: number) {
+      const index = this.conversationList.findIndex(
+        (item) => item.id === conversationId,
+      );
+      // 存在则删除
+      if (index !== -1) {
+        this.conversationList.splice(index, 1);
+      }
+    },
+    conversationSort() {
+      // 按置顶属性和最后消息时间排序
+      this.conversationList.sort((a, b) => {
+        // 按照置顶排序，置顶的会在前面
+        if (a.adminPinned !== b.adminPinned) {
+          return a.adminPinned ? -1 : 1;
+        }
+        // 按照最后消息时间排序，最近的会在前面
+        return (
+          (b.lastMessageTime as unknown as number) -
+          (a.lastMessageTime as unknown as number)
+        );
+      });
+    },
+  },
+});
+
+// 解决热更新问题
+const hot = import.meta.hot;
+if (hot) {
+  hot.accept(acceptHMRUpdate(useMallKefuStore, hot));
+}
diff --git a/apps/web-antd/src/views/ai/chat/index/components/conversation/ConversationList.vue b/apps/web-antd/src/views/ai/chat/index/components/conversation/ConversationList.vue
index 7339c9e5b..91a8281de 100644
--- a/apps/web-antd/src/views/ai/chat/index/components/conversation/ConversationList.vue
+++ b/apps/web-antd/src/views/ai/chat/index/components/conversation/ConversationList.vue
@@ -343,9 +343,9 @@ onMounted(async () => {
             v-if="conversationMap[conversationKey].length > 0"
             class="classify-title pt-2"
           >
-            <b class="mx-1">
+            <p class="mx-1">
               {{ conversationKey }}
-            </b>
+            </p>
           </div>
 
           <div
@@ -357,11 +357,9 @@ onMounted(async () => {
             class="mt-1"
           >
             <div
-              class="flex cursor-pointer flex-row items-center justify-between rounded-lg px-2 leading-10"
+              class="mb-2 flex cursor-pointer flex-row items-center justify-between rounded-lg px-2 leading-10"
               :class="[
-                conversation.id === activeConversationId
-                  ? 'bg-success-600'
-                  : '',
+                conversation.id === activeConversationId ? 'bg-success' : '',
               ]"
             >
               <div class="flex items-center">
diff --git a/apps/web-antd/src/views/ai/chat/index/index.vue b/apps/web-antd/src/views/ai/chat/index/index.vue
index 38226f5d1..9e6cc2559 100644
--- a/apps/web-antd/src/views/ai/chat/index/index.vue
+++ b/apps/web-antd/src/views/ai/chat/index/index.vue
@@ -514,7 +514,7 @@ onMounted(async () => {
       <!-- 右侧：详情部分 -->
       <Layout class="bg-card mx-4">
         <Layout.Header
-          class="!bg-card border-border flex items-center justify-between border-b"
+          class="!bg-card border-border flex !h-12 items-center justify-between border-b"
         >
           <div class="text-lg font-bold">
             {{ activeConversation?.title ? activeConversation?.title : '对话' }}
@@ -574,11 +574,9 @@ onMounted(async () => {
         </Layout.Content>
 
         <Layout.Footer class="!bg-card m-0 flex flex-col p-0">
-          <form
-            class="border-border my-5 mb-5 mt-2 flex flex-col rounded-xl border px-2 py-2.5"
-          >
+          <form class="border-border m-2 flex flex-col rounded-xl border p-2">
             <textarea
-              class="box-border h-24 resize-none overflow-auto rounded-md px-0 py-1 focus:outline-none"
+              class="box-border h-24 resize-none overflow-auto rounded-md p-2 focus:outline-none"
               v-model="prompt"
               @keydown="handleSendByKeydown"
               @input="handlePromptInput"
diff --git a/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/time-event-config/TimeEventConfig.vue b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/time-event-config/TimeEventConfig.vue
index 7c5e1f6dc..0856cbc16 100644
--- a/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/time-event-config/TimeEventConfig.vue
+++ b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/time-event-config/TimeEventConfig.vue
@@ -246,7 +246,7 @@ watch(
       <Input
         v-model:value="condition"
         :placeholder="placeholder"
-        style="width: calc(100% - 100px)"
+        class="w-[calc(100vw-25%)]"
         :readonly="type !== 'duration' && type !== 'cycle'"
         @focus="handleInputFocus"
         @blur="updateNode"
diff --git a/apps/web-antd/src/views/bpm/model/definition/data.ts b/apps/web-antd/src/views/bpm/model/definition/data.ts
index dda15f371..1e33ac84a 100644
--- a/apps/web-antd/src/views/bpm/model/definition/data.ts
+++ b/apps/web-antd/src/views/bpm/model/definition/data.ts
@@ -1,5 +1,4 @@
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { BpmProcessDefinitionApi } from '#/api/bpm/definition';
 
 import { DICT_TYPE } from '@vben/constants';
 
diff --git a/apps/web-antd/src/views/bpm/model/definition/index.vue b/apps/web-antd/src/views/bpm/model/definition/index.vue
index 759086bbb..d1c8bb7fb 100644
--- a/apps/web-antd/src/views/bpm/model/definition/index.vue
+++ b/apps/web-antd/src/views/bpm/model/definition/index.vue
@@ -32,15 +32,18 @@ function handleRefresh() {
 }
 
 /** 查看表单详情 */
-function handleFormDetail(row: BpmProcessDefinitionApi.ProcessDefinition) {
+async function handleFormDetail(
+  row: BpmProcessDefinitionApi.ProcessDefinition,
+) {
   if (row.formType === BpmModelFormType.NORMAL) {
     const data = {
       id: row.formId,
     };
     formCreateDetailModalApi.setData(data).open();
   } else {
-    // TODO 待实现 jason 这里要改么？
-    console.warn('业务表单待实现', row);
+    await router.push({
+      path: row.formCustomCreatePath,
+    });
   }
 }
 
diff --git a/apps/web-antd/src/views/bpm/model/form/index.vue b/apps/web-antd/src/views/bpm/model/form/index.vue
index 713bd440b..0a706750f 100644
--- a/apps/web-antd/src/views/bpm/model/form/index.vue
+++ b/apps/web-antd/src/views/bpm/model/form/index.vue
@@ -309,8 +309,6 @@ async function handleSave() {
     }
   } catch (error: any) {
     console.error('保存失败:', error);
-    // TODO @jason：这个提示，还要么？？？
-    // message.warning(error.msg || '请完善所有步骤的必填信息');
   }
 }
 
diff --git a/apps/web-antd/src/views/bpm/model/form/modules/bpm-model-editor.vue b/apps/web-antd/src/views/bpm/model/form/modules/bpm-model-editor.vue
index 781ab2a92..782c8974d 100644
--- a/apps/web-antd/src/views/bpm/model/form/modules/bpm-model-editor.vue
+++ b/apps/web-antd/src/views/bpm/model/form/modules/bpm-model-editor.vue
@@ -121,11 +121,9 @@ onBeforeUnmount(() => {
     />
   </ContentWrap>
 </template>
-<style lang="scss">
-// TODO @jason：tailwind？
-.process-panel__container {
-  position: absolute;
-  top: 110px;
-  right: 70px;
+
+<style scoped>
+:deep(.process-panel__container) {
+  @apply absolute right-[20px] top-[70px];
 }
 </style>
diff --git a/apps/web-antd/src/views/bpm/model/modules/category-draggable-model.vue b/apps/web-antd/src/views/bpm/model/modules/category-draggable-model.vue
index e285077d2..1188b4ea7 100644
--- a/apps/web-antd/src/views/bpm/model/modules/category-draggable-model.vue
+++ b/apps/web-antd/src/views/bpm/model/modules/category-draggable-model.vue
@@ -238,15 +238,16 @@ async function handleDeleteCategory() {
 }
 
 /** 处理表单详情点击 */
-function handleFormDetail(row: any) {
+async function handleFormDetail(row: any) {
   if (row.formType === BpmModelFormType.NORMAL) {
     const data = {
       id: row.formId,
     };
     formCreateDetailModalApi.setData(data).open();
   } else {
-    // TODO 待实现 jason：是不是已经 ok 啦？
-    console.warn('业务表单待实现', row);
+    await router.push({
+      path: row.formCustomCreatePath,
+    });
   }
 }
 
@@ -547,7 +548,7 @@ function handleRenameSuccess() {
       <Collapse
         :active-key="expandKeys"
         :bordered="false"
-        class="bg-transparent"
+        class="collapse-no-padding bg-transparent"
       >
         <Collapse.Panel
           key="1"
@@ -738,17 +739,10 @@ function handleRenameSuccess() {
   </div>
 </template>
 
-<style lang="scss" scoped>
-// @jason：看看能不能通过 tailwindcss 简化下
-.category-draggable-model {
-  // ant-collapse-header 自定义样式
-  :deep(.ant-collapse-header) {
-    padding: 0;
-  }
-
-  // 折叠面板样式
-  :deep(.ant-collapse-content-box) {
-    padding: 0;
-  }
+<style scoped>
+/* :deep() 实现样式穿透 */
+.collapse-no-padding :deep(.ant-collapse-header),
+.collapse-no-padding :deep(.ant-collapse-content-box) {
+  padding: 0;
 }
 </style>
diff --git a/apps/web-antd/src/views/bpm/processInstance/create/modules/form.vue b/apps/web-antd/src/views/bpm/processInstance/create/modules/form.vue
index d94df581a..4973fc4b5 100644
--- a/apps/web-antd/src/views/bpm/processInstance/create/modules/form.vue
+++ b/apps/web-antd/src/views/bpm/processInstance/create/modules/form.vue
@@ -24,6 +24,7 @@ import {
 } from '#/api/bpm/processInstance';
 import { decodeFields, setConfAndFields2 } from '#/components/form-create';
 import { router } from '#/router';
+import ProcessInstanceBpmnViewer from '#/views/bpm/processInstance/detail/modules/bpm-viewer.vue';
 import ProcessInstanceSimpleViewer from '#/views/bpm/processInstance/detail/modules/simple-bpm-viewer.vue';
 import ProcessInstanceTimeline from '#/views/bpm/processInstance/detail/modules/time-line.vue';
 
@@ -51,7 +52,6 @@ const props = defineProps({
 const emit = defineEmits(['cancel']);
 const { closeCurrentTab } = useTabs();
 
-const isFormReady = ref(false); // 表单就绪状态变量：表单就绪后再渲染 form-create
 const getTitle = computed(() => {
   return `流程表单 - ${props.selectProcessDefinition.name}`;
 });
@@ -122,21 +122,32 @@ async function initProcessInfo(row: any, formVariables?: any) {
     // 注意：需要从 formVariables 中，移除不在 row.formFields 的值。
     // 原因是：后端返回的 formVariables 里面，会有一些非表单的信息。例如说，某个流程节点的审批人。
     //        这样，就可能导致一个流程被审批不通过后，重新发起时，会直接后端报错！！！
-    const formApi = formCreate.create(decodeFields(row.formFields));
-    const allowedFields = formApi.fields();
-    for (const key in formVariables) {
-      if (!allowedFields.includes(key)) {
-        delete formVariables[key];
+
+    // 解析表单字段列表（不创建实例，避免重复渲染）
+    const decodedFields = decodeFields(row.formFields);
+    const allowedFields = new Set(
+      decodedFields.map((field: any) => field.field).filter(Boolean),
+    );
+
+    // 过滤掉不允许的字段
+    if (formVariables) {
+      for (const key in formVariables) {
+        if (!allowedFields.has(key)) {
+          delete formVariables[key];
+        }
       }
     }
+
     setConfAndFields2(detailForm, row.formConf, row.formFields, formVariables);
 
-    // 设置表单就绪状态
-    // TODO @jason：这个变量是必须的，有没可能简化掉？
-    isFormReady.value = true;
+    // 在配置中禁用 form-create 自带的提交和重置按钮
+    detailForm.value.option = {
+      ...detailForm.value.option,
+      submitBtn: false,
+      resetBtn: false,
+    };
 
     await nextTick();
-    fApi.value?.btn.show(false); // 隐藏提交按钮
 
     // 获取流程审批信息,当再次发起时，流程审批节点要根据原始表单参数预测出来
     await getApprovalDetail({
@@ -153,30 +164,32 @@ async function initProcessInfo(row: any, formVariables?: any) {
     }
     // 情况二：业务表单
   } else if (row.formCustomCreatePath) {
+    // 这里暂时无需加载流程图，因为跳出到另外个 Tab；
     await router.push({
       path: row.formCustomCreatePath,
     });
-    // 这里暂时无需加载流程图，因为跳出到另外个 Tab；
+    // 返回选择流程
+    emit('cancel');
   }
 }
 
 /** 预测流程节点会因为输入的参数值而产生新的预测结果值，所以需重新预测一次 */
 watch(
-  detailForm.value,
+  () => detailForm.value.value,
   (newValue) => {
-    if (newValue && Object.keys(newValue.value).length > 0) {
+    if (newValue && Object.keys(newValue).length > 0) {
       // 记录之前的节点审批人
       tempStartUserSelectAssignees.value = startUserSelectAssignees.value;
       startUserSelectAssignees.value = {};
       // 加载最新的审批详情
       getApprovalDetail({
         id: props.selectProcessDefinition.id,
-        processVariablesStr: JSON.stringify(newValue.value), // 解决 GET 无法传递对象的问题，后端 String 再转 JSON
+        processVariablesStr: JSON.stringify(newValue), // 解决 GET 无法传递对象的问题，后端 String 再转 JSON
       });
     }
   },
   {
-    immediate: true,
+    deep: true,
   },
 );
 
@@ -283,7 +296,6 @@ defineExpose({ initProcessInfo });
             class="flex-1 overflow-auto"
           >
             <form-create
-              v-if="isFormReady"
               :rule="detailForm.rule"
               v-model:api="fApi"
               v-model="detailForm.value"
@@ -307,10 +319,15 @@ defineExpose({ initProcessInfo });
         class="flex flex-1 overflow-hidden"
         :force-render="true"
       >
-        <div class="w-full">
+        <div class="h-full w-full">
+          <!-- BPMN 流程图预览 -->
+          <ProcessInstanceBpmnViewer
+            :bpmn-xml="bpmnXML"
+            v-if="BpmModelType.BPMN === selectProcessDefinition.modelType"
+          />
           <ProcessInstanceSimpleViewer
             :simple-json="simpleJson"
-            v-if="selectProcessDefinition.modelType === BpmModelType.SIMPLE"
+            v-if="BpmModelType.SIMPLE === selectProcessDefinition.modelType"
           />
         </div>
       </Tabs.TabPane>
diff --git a/apps/web-antd/src/views/bpm/processInstance/detail/index.vue b/apps/web-antd/src/views/bpm/processInstance/detail/index.vue
index 578f9aaaf..391fa1142 100644
--- a/apps/web-antd/src/views/bpm/processInstance/detail/index.vue
+++ b/apps/web-antd/src/views/bpm/processInstance/detail/index.vue
@@ -183,14 +183,11 @@ function setFieldPermission(field: string, permission: string) {
   }
 }
 
-// TODO @jason：这个还要么？
-/**
- * 操作成功后刷新
- */
-// const refresh = () => {
-//   // 重新获取详情
-//   getDetail();
-// };
+/** 操作成功后刷新 */
+const refresh = () => {
+  // 重新获取详情
+  getDetail();
+};
 
 /** 监听 Tab 切换，当切换到 "record" 标签时刷新任务列表 */
 watch(
@@ -369,7 +366,7 @@ onMounted(async () => {
             :normal-form="detailForm"
             :normal-form-api="fApi"
             :writable-fields="writableFields"
-            @success="getDetail"
+            @success="refresh"
           />
         </div>
       </template>
diff --git a/apps/web-antd/src/views/bpm/processInstance/detail/modules/bpm-viewer.vue b/apps/web-antd/src/views/bpm/processInstance/detail/modules/bpm-viewer.vue
index 585f731a4..0055df174 100644
--- a/apps/web-antd/src/views/bpm/processInstance/detail/modules/bpm-viewer.vue
+++ b/apps/web-antd/src/views/bpm/processInstance/detail/modules/bpm-viewer.vue
@@ -1,10 +1,59 @@
 <script setup lang="ts">
+import { ref, watch } from 'vue';
+
+import { MyProcessViewer } from '#/views/bpm/components/bpmn-process-designer/package';
+
 defineOptions({ name: 'ProcessInstanceBpmnViewer' });
+
+const props = withDefaults(
+  defineProps<{
+    bpmnXml?: string;
+    loading?: boolean; // 是否加载中
+    modelView?: Object;
+  }>(),
+  {
+    loading: false,
+    modelView: () => ({}),
+    bpmnXml: '',
+  },
+);
+
+// BPMN 流程图数据
+const view = ref({
+  bpmnXml: '',
+});
+
+/** 监控 modelView 更新 */
+watch(
+  () => props.modelView,
+  async (newModelView) => {
+    // 加载最新
+    if (newModelView) {
+      // @ts-ignore
+      view.value = newModelView;
+    }
+  },
+);
+
+/** 监听 bpmnXml */
+watch(
+  () => props.bpmnXml,
+  (value) => {
+    view.value.bpmnXml = value;
+  },
+);
 </script>
 
 <template>
-  <!-- TODO @jason：这里 BPMN 图的接入 -->
-  <div>
-    <h1>BPMN Viewer</h1>
+  <div
+    v-loading="loading"
+    class="h-full w-full overflow-auto rounded-lg border border-gray-200 bg-white p-4"
+  >
+    <MyProcessViewer
+      key="processViewer"
+      :xml="view.bpmnXml"
+      :view="view"
+      class="h-full min-h-[500px] w-full"
+    />
   </div>
 </template>
diff --git a/apps/web-antd/src/views/bpm/processInstance/detail/modules/operation-button.vue b/apps/web-antd/src/views/bpm/processInstance/detail/modules/operation-button.vue
index 313c70c21..63ca567e5 100644
--- a/apps/web-antd/src/views/bpm/processInstance/detail/modules/operation-button.vue
+++ b/apps/web-antd/src/views/bpm/processInstance/detail/modules/operation-button.vue
@@ -268,9 +268,6 @@ async function openPopover(type: string) {
   Object.keys(popOverVisible.value).forEach((item) => {
     if (popOverVisible.value[item]) popOverVisible.value[item] = item === type;
   });
-  // TODO @jason：下面这 2 行，要删除么？
-  // await nextTick()
-  // formRef.value.resetFields()
 }
 
 /** 关闭气泡卡 */
@@ -710,9 +707,6 @@ defineExpose({ loadTodoTask });
 </script>
 <template>
   <div class="flex items-center">
-    <!-- TODO @jason：这里要删除么？ -->
-    <!-- <div>是否处理中 {{ !!isHandleTaskStatus() }}</div> -->
-
     <!-- 【通过】按钮 -->
     <!-- z-index 设置为300 避免覆盖签名弹窗 -->
     <Space size="middle">
@@ -778,12 +772,12 @@ defineExpose({ loadTodoTask });
                 name="signPicUrl"
                 ref="approveSignFormRef"
               >
-                <Button @click="openSignatureModal" type="primary">
-                  {{ approveReasonForm.signPicUrl ? '重新签名' : '点击签名' }}
-                </Button>
-                <div class="mt-2">
+                <div class="flex items-center gap-2">
+                  <Button @click="openSignatureModal" type="primary">
+                    {{ approveReasonForm.signPicUrl ? '重新签名' : '点击签名' }}
+                  </Button>
                   <Image
-                    class="float-left h-40 w-80"
+                    class="!h-10 !w-40 object-contain"
                     v-if="approveReasonForm.signPicUrl"
                     :src="approveReasonForm.signPicUrl"
                   />
@@ -903,13 +897,12 @@ defineExpose({ loadTodoTask });
               label-width="100px"
             >
               <FormItem label="抄送人" name="copyUserIds">
-                <!-- TODO @jason：看看是不是用 看看能不能通过 tailwindcss 简化下 style -->
                 <Select
                   v-model:value="copyForm.copyUserIds"
                   :allow-clear="true"
-                  style="width: 100%"
                   mode="multiple"
                   placeholder="请选择抄送人"
+                  class="w-full"
                 >
                   <SelectOption
                     v-for="item in userOptions"
diff --git a/apps/web-antd/src/views/bpm/processInstance/detail/modules/signature.vue b/apps/web-antd/src/views/bpm/processInstance/detail/modules/signature.vue
index 3698f6594..4122c1fc0 100644
--- a/apps/web-antd/src/views/bpm/processInstance/detail/modules/signature.vue
+++ b/apps/web-antd/src/views/bpm/processInstance/detail/modules/signature.vue
@@ -5,7 +5,7 @@ import { useVbenModal } from '@vben/common-ui';
 import { IconifyIcon } from '@vben/icons';
 import { base64ToFile } from '@vben/utils';
 
-import { Button, message, Space, Tooltip } from 'ant-design-vue';
+import { Button, Space, Tooltip } from 'ant-design-vue';
 import Vue3Signature from 'vue3-signature';
 
 import { uploadFile } from '#/api/infra/file';
@@ -20,28 +20,22 @@ const signature = ref<InstanceType<typeof Vue3Signature>>();
 
 const [Modal, modalApi] = useVbenModal({
   async onConfirm() {
-    // TODO @jason：这里需要使用类似 modalApi.lock() 么？类似别的模块
-    message.success({
-      content: '签名上传中，请稍等...',
-    });
-    const signFileUrl = await uploadFile({
-      file: base64ToFile(signature?.value?.save('image/jpeg') || '', '签名'),
-    });
-    emits('success', signFileUrl);
-    // TODO @jason：是不是不用主动 close？
-    await modalApi.close();
-  },
-  // TODO @jason：这个是不是下面方法，可以删除；
-  onOpenChange(visible) {
-    if (!visible) {
-      modalApi.close();
+    modalApi.lock();
+    try {
+      const signFileUrl = await uploadFile({
+        file: base64ToFile(signature?.value?.save('image/jpeg') || '', '签名'),
+      });
+      emits('success', signFileUrl);
+      await modalApi.close();
+    } finally {
+      modalApi.unlock();
     }
   },
 });
 </script>
 
 <template>
-  <Modal title="流程签名" class="h-2/5 w-3/5">
+  <Modal title="流程签名" class="w-3/5">
     <div class="mb-2 flex justify-end">
       <Space>
         <Tooltip title="撤销上一步操作">
@@ -64,10 +58,8 @@ const [Modal, modalApi] = useVbenModal({
     </div>
 
     <Vue3Signature
-      class="mx-auto border border-solid border-gray-300"
+      class="mx-auto !h-80 border border-solid border-gray-300"
       ref="signature"
-      w="874px"
-      h="324px"
     />
   </Modal>
 </template>
diff --git a/apps/web-antd/src/views/bpm/processInstance/detail/modules/time-line.vue b/apps/web-antd/src/views/bpm/processInstance/detail/modules/time-line.vue
index 518e33ceb..88fe40728 100644
--- a/apps/web-antd/src/views/bpm/processInstance/detail/modules/time-line.vue
+++ b/apps/web-antd/src/views/bpm/processInstance/detail/modules/time-line.vue
@@ -109,11 +109,11 @@ function getApprovalNodeIcon(taskStatus: number, nodeType: BpmNodeTypeEnum) {
   }
   if (
     [
-      BpmNodeTypeEnum.START_USER_NODE,
-      BpmNodeTypeEnum.USER_TASK_NODE,
-      BpmNodeTypeEnum.TRANSACTOR_NODE,
       BpmNodeTypeEnum.CHILD_PROCESS_NODE,
       BpmNodeTypeEnum.END_EVENT_NODE,
+      BpmNodeTypeEnum.START_USER_NODE,
+      BpmNodeTypeEnum.TRANSACTOR_NODE,
+      BpmNodeTypeEnum.USER_TASK_NODE,
     ].includes(nodeType)
   ) {
     return statusIconMap[taskStatus]?.icon || 'mdi:clock-outline';
diff --git a/apps/web-antd/src/views/bpm/task/done/index.vue b/apps/web-antd/src/views/bpm/task/done/index.vue
index 0517fa4a1..8dcaa4ed1 100644
--- a/apps/web-antd/src/views/bpm/task/done/index.vue
+++ b/apps/web-antd/src/views/bpm/task/done/index.vue
@@ -6,8 +6,6 @@ import { DocAlert, Page } from '@vben/common-ui';
 
 import { message } from 'ant-design-vue';
 
-import { $t } from '#/locales';
-
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getTaskDonePage, withdrawTask } from '#/api/bpm/task';
 import { router } from '#/router';
diff --git a/apps/web-antd/src/views/infra/apiAccessLog/modules/detail.vue b/apps/web-antd/src/views/infra/apiAccessLog/modules/detail.vue
index b3de99cc7..badc9376c 100644
--- a/apps/web-antd/src/views/infra/apiAccessLog/modules/detail.vue
+++ b/apps/web-antd/src/views/infra/apiAccessLog/modules/detail.vue
@@ -14,7 +14,6 @@ const formData = ref<InfraApiAccessLogApi.ApiAccessLog>();
 const [Descriptions] = useDescription({
   bordered: true,
   column: 1,
-  class: 'mx-4',
   schema: useDetailSchema(),
 });
 
diff --git a/apps/web-antd/src/views/infra/apiErrorLog/modules/detail.vue b/apps/web-antd/src/views/infra/apiErrorLog/modules/detail.vue
index 9c4e44c9f..da52c17fa 100644
--- a/apps/web-antd/src/views/infra/apiErrorLog/modules/detail.vue
+++ b/apps/web-antd/src/views/infra/apiErrorLog/modules/detail.vue
@@ -14,7 +14,6 @@ const formData = ref<InfraApiErrorLogApi.ApiErrorLog>();
 const [Descriptions] = useDescription({
   bordered: true,
   column: 1,
-  class: 'mx-4',
   schema: useDetailSchema(),
 });
 
diff --git a/apps/web-antd/src/views/infra/job/logger/modules/detail.vue b/apps/web-antd/src/views/infra/job/logger/modules/detail.vue
index 18c868de4..ceb1b5bf1 100644
--- a/apps/web-antd/src/views/infra/job/logger/modules/detail.vue
+++ b/apps/web-antd/src/views/infra/job/logger/modules/detail.vue
@@ -15,7 +15,6 @@ const formData = ref<InfraJobLogApi.JobLog>();
 const [Descriptions] = useDescription({
   bordered: true,
   column: 1,
-  class: 'mx-4',
   schema: useDetailSchema(),
 });
 
diff --git a/apps/web-antd/src/views/infra/job/modules/detail.vue b/apps/web-antd/src/views/infra/job/modules/detail.vue
index 145a19dab..f23149e2d 100644
--- a/apps/web-antd/src/views/infra/job/modules/detail.vue
+++ b/apps/web-antd/src/views/infra/job/modules/detail.vue
@@ -16,7 +16,6 @@ const nextTimes = ref<Date[]>([]); // 下一次执行时间
 const [Descriptions] = useDescription({
   bordered: true,
   column: 1,
-  class: 'mx-4',
   schema: useDetailSchema(),
 });
 
diff --git a/apps/web-antd/src/views/iot/device/device/data.ts b/apps/web-antd/src/views/iot/device/device/data.ts
index 424f0ef92..5edd1cc0d 100644
--- a/apps/web-antd/src/views/iot/device/device/data.ts
+++ b/apps/web-antd/src/views/iot/device/device/data.ts
@@ -239,7 +239,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '设备状态',
       component: 'Select',
       componentProps: {
-        options: getDictOptions(DICT_TYPE.IOT_DEVICE_STATUS, 'number'),
+        options: getDictOptions(DICT_TYPE.IOT_DEVICE_STATE, 'number'),
         placeholder: '请选择设备状态',
         allowClear: true,
       },
@@ -295,12 +295,12 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
       slots: { default: 'groups' },
     },
     {
-      field: 'status',
+      field: 'state',
       title: '设备状态',
       minWidth: 100,
       cellRender: {
         name: 'CellDict',
-        props: { type: DICT_TYPE.IOT_DEVICE_STATUS },
+        props: { type: DICT_TYPE.IOT_DEVICE_STATE },
       },
     },
     {
diff --git a/apps/web-antd/src/views/iot/device/device/index.vue b/apps/web-antd/src/views/iot/device/device/index.vue
index f83a7c14a..d06649d66 100644
--- a/apps/web-antd/src/views/iot/device/device/index.vue
+++ b/apps/web-antd/src/views/iot/device/device/index.vue
@@ -307,7 +307,7 @@ onMounted(async () => {
           style="width: 200px"
         >
           <Select.Option
-            v-for="dict in getIntDictOptions(DICT_TYPE.IOT_DEVICE_STATUS)"
+            v-for="dict in getIntDictOptions(DICT_TYPE.IOT_DEVICE_STATE)"
             :key="dict.value"
             :value="dict.value"
           >
diff --git a/apps/web-antd/src/views/iot/device/device/modules/components/DeviceTableSelect.vue b/apps/web-antd/src/views/iot/device/device/modules/components/DeviceTableSelect.vue
index efaad5976..8f8afc3e0 100644
--- a/apps/web-antd/src/views/iot/device/device/modules/components/DeviceTableSelect.vue
+++ b/apps/web-antd/src/views/iot/device/device/modules/components/DeviceTableSelect.vue
@@ -294,7 +294,7 @@ onMounted(async () => {
             style="width: 240px"
           >
             <Select.Option
-              v-for="dict in getIntDictOptions(DICT_TYPE.IOT_DEVICE_STATUS)"
+              v-for="dict in getIntDictOptions(DICT_TYPE.IOT_DEVICE_STATE)"
               :key="dict.value"
               :value="dict.value"
             >
@@ -373,7 +373,7 @@ onMounted(async () => {
           </template>
           <template v-else-if="column.key === 'status'">
             <DictTag
-              :type="DICT_TYPE.IOT_DEVICE_STATUS"
+              :type="DICT_TYPE.IOT_DEVICE_STATE"
               :value="record.status"
             />
           </template>
diff --git a/apps/web-antd/src/views/iot/device/device/modules/detail/DeviceDetailsInfo.vue b/apps/web-antd/src/views/iot/device/device/modules/detail/DeviceDetailsInfo.vue
index d4b6b06cb..5698ad7d2 100644
--- a/apps/web-antd/src/views/iot/device/device/modules/detail/DeviceDetailsInfo.vue
+++ b/apps/web-antd/src/views/iot/device/device/modules/detail/DeviceDetailsInfo.vue
@@ -106,7 +106,7 @@ function handleAuthInfoDialogClose() {
             </Descriptions.Item>
             <Descriptions.Item label="当前状态">
               <DictTag
-                :type="DICT_TYPE.IOT_DEVICE_STATUS"
+                :type="DICT_TYPE.IOT_DEVICE_STATE"
                 :value="device.state"
               />
             </Descriptions.Item>
@@ -181,7 +181,7 @@ function handleAuthInfoDialogClose() {
               style="width: calc(100% - 80px)"
             />
             <Button @click="copyToClipboard(authInfo.clientId)" type="primary">
-              <IconifyIcon icon="ph:copy" />
+              <IconifyIcon icon="lucide:copy" />
             </Button>
           </Input.Group>
         </Form.Item>
@@ -193,7 +193,7 @@ function handleAuthInfoDialogClose() {
               style="width: calc(100% - 80px)"
             />
             <Button @click="copyToClipboard(authInfo.username)" type="primary">
-              <IconifyIcon icon="ph:copy" />
+              <IconifyIcon icon="lucide:copy" />
             </Button>
           </Input.Group>
         </Form.Item>
@@ -210,11 +210,11 @@ function handleAuthInfoDialogClose() {
               type="primary"
             >
               <IconifyIcon
-                :icon="authPasswordVisible ? 'ph:eye-slash' : 'ph:eye'"
+                :icon="authPasswordVisible ? 'lucide:eye-off' : 'lucide:eye'"
               />
             </Button>
             <Button @click="copyToClipboard(authInfo.password)" type="primary">
-              <IconifyIcon icon="ph:copy" />
+              <IconifyIcon icon="lucide:copy" />
             </Button>
           </Input.Group>
         </Form.Item>
diff --git a/apps/web-antd/src/views/iot/device/device/modules/detail/DeviceDetailsThingModelProperty.vue b/apps/web-antd/src/views/iot/device/device/modules/detail/DeviceDetailsThingModelProperty.vue
index 893cd8171..283a2d133 100644
--- a/apps/web-antd/src/views/iot/device/device/modules/detail/DeviceDetailsThingModelProperty.vue
+++ b/apps/web-antd/src/views/iot/device/device/modules/detail/DeviceDetailsThingModelProperty.vue
@@ -165,18 +165,15 @@ onMounted(() => {
           >
             <!-- 添加渐变背景层 -->
             <div
-              class="pointer-events-none absolute left-0 right-0 top-0 h-[50px] bg-gradient-to-b from-[#eefaff] to-transparent"
+              class="from-muted pointer-events-none absolute left-0 right-0 top-0 h-12 bg-gradient-to-b to-transparent"
             ></div>
             <div class="relative p-4">
               <!-- 标题区域 -->
               <div class="mb-3 flex items-center">
                 <div class="mr-2.5 flex items-center">
-                  <IconifyIcon
-                    icon="ep:cpu"
-                    class="text-[18px] text-[#0070ff]"
-                  />
+                  <IconifyIcon icon="ep:cpu" class="text-primary text-lg" />
                 </div>
-                <div class="font-600 flex-1 text-[16px]">{{ item.name }}</div>
+                <div class="flex-1 text-base font-bold">{{ item.name }}</div>
                 <!-- 标识符 -->
                 <div class="mr-2 inline-flex items-center">
                   <Tag size="small" color="blue">
@@ -198,22 +195,22 @@ onMounted(() => {
                 >
                   <IconifyIcon
                     icon="ep:data-line"
-                    class="text-[18px] text-[#0070ff]"
+                    class="text-primary text-lg"
                   />
                 </div>
               </div>
 
               <!-- 信息区域 -->
-              <div class="text-[14px]">
+              <div class="text-sm">
                 <div class="mb-2.5 last:mb-0">
-                  <span class="mr-2.5 text-[#717c8e]">属性值</span>
-                  <span class="font-600 text-[#0b1d30]">
+                  <span class="text-muted-foreground mr-2.5">属性值</span>
+                  <span class="text-foreground font-bold">
                     {{ formatValueWithUnit(item) }}
                   </span>
                 </div>
                 <div class="mb-2.5 last:mb-0">
-                  <span class="mr-2.5 text-[#717c8e]">更新时间</span>
-                  <span class="text-[12px] text-[#0b1d30]">
+                  <span class="text-muted-foreground mr-2.5">更新时间</span>
+                  <span class="text-foreground text-sm">
                     {{ item.updateTime ? formatDate(item.updateTime) : '-' }}
                   </span>
                 </div>
diff --git a/apps/web-antd/src/views/iot/device/group/data.ts b/apps/web-antd/src/views/iot/device/group/data.ts
index 0bc313e52..ca6a10a88 100644
--- a/apps/web-antd/src/views/iot/device/group/data.ts
+++ b/apps/web-antd/src/views/iot/device/group/data.ts
@@ -1,12 +1,13 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 
-import { DICT_TYPE } from '@vben/constants';
+import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
 
 import { z } from '#/adapter/form';
-import { getSimpleDeviceGroupList } from '#/api/iot/device/group';
+import { getRangePickerDefaultProps } from '#/utils';
 
-/** 新增/修改设备分组的表单 */
+/** 新增/修改的表单 */
 export function useFormSchema(): VbenFormSchema[] {
   return [
     {
@@ -30,16 +31,15 @@ export function useFormSchema(): VbenFormSchema[] {
         .max(64, '分组名称长度不能超过 64 个字符'),
     },
     {
-      fieldName: 'parentId',
-      label: '父级分组',
-      component: 'ApiTreeSelect',
+      fieldName: 'status',
+      label: '分组状态',
+      component: 'RadioGroup',
       componentProps: {
-        api: getSimpleDeviceGroupList,
-        labelField: 'name',
-        valueField: 'id',
-        placeholder: '请选择父级分组',
-        allowClear: true,
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        buttonStyle: 'solid',
+        optionType: 'button',
       },
+      rules: z.number().default(CommonStatusEnum.ENABLE),
     },
     {
       fieldName: 'description',
@@ -65,6 +65,15 @@ export function useGridFormSchema(): VbenFormSchema[] {
         allowClear: true,
       },
     },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
   ];
 }
 
@@ -72,14 +81,13 @@ export function useGridFormSchema(): VbenFormSchema[] {
 export function useGridColumns(): VxeTableGridOptions['columns'] {
   return [
     {
-      field: 'name',
-      title: '分组名称',
-      minWidth: 200,
-      treeNode: true,
+      field: 'id',
+      title: 'ID',
+      minWidth: 100,
     },
     {
-      field: 'description',
-      title: '分组描述',
+      field: 'name',
+      title: '分组名称',
       minWidth: 200,
     },
     {
@@ -92,9 +100,9 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
       },
     },
     {
-      field: 'deviceCount',
-      title: '设备数量',
-      minWidth: 100,
+      field: 'description',
+      title: '分组描述',
+      minWidth: 200,
     },
     {
       field: 'createTime',
@@ -102,6 +110,11 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
       minWidth: 180,
       formatter: 'formatDateTime',
     },
+    {
+      field: 'deviceCount',
+      title: '设备数量',
+      minWidth: 100,
+    },
     {
       title: '操作',
       width: 200,
diff --git a/apps/web-antd/src/views/iot/device/group/index.vue b/apps/web-antd/src/views/iot/device/group/index.vue
index f6a0992f8..ebf33e9be 100644
--- a/apps/web-antd/src/views/iot/device/group/index.vue
+++ b/apps/web-antd/src/views/iot/device/group/index.vue
@@ -3,7 +3,6 @@ import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { IotDeviceGroupApi } from '#/api/iot/device/group';
 
 import { Page, useVbenModal } from '@vben/common-ui';
-import { handleTree } from '@vben/utils';
 
 import { message } from 'ant-design-vue';
 
@@ -62,24 +61,14 @@ const [Grid, gridApi] = useVbenVxeGrid({
     columns: useGridColumns(),
     height: 'auto',
     keepSource: true,
-    treeConfig: {
-      transform: true,
-      rowField: 'id',
-      parentField: 'parentId',
-    },
     proxyConfig: {
       ajax: {
         query: async ({ page }, formValues) => {
-          const data = await getDeviceGroupPage({
+          return await getDeviceGroupPage({
             pageNo: page.currentPage,
             pageSize: page.pageSize,
             ...formValues,
           });
-          // 转换为树形结构
-          return {
-            ...data,
-            list: handleTree(data.list, 'id', 'parentId'),
-          };
         },
       },
     },
diff --git a/apps/web-antd/src/views/iot/device/group/modules/device-group-form.vue b/apps/web-antd/src/views/iot/device/group/modules/device-group-form.vue
index fe010aba1..26dfe29d0 100644
--- a/apps/web-antd/src/views/iot/device/group/modules/device-group-form.vue
+++ b/apps/web-antd/src/views/iot/device/group/modules/device-group-form.vue
@@ -39,8 +39,10 @@ const [Form, formApi] = useVbenForm({
   },
   schema: useFormSchema(),
   showCollapseButton: false,
+  showDefaultActions: false,
 });
 
+// TODO @haohao：参考别的 form；1）文件的命名可以简化；2）代码可以在简化下；
 const [Modal, modalApi] = useVbenModal({
   async onConfirm() {
     const { valid } = await formApi.validate();
@@ -70,9 +72,13 @@ const [Modal, modalApi] = useVbenModal({
   async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
       formData.value = undefined;
+      await formApi.resetForm();
       return;
     }
 
+    // 重置表单
+    await formApi.resetForm();
+
     const data = modalApi.getData<IotDeviceGroupApi.DeviceGroup>();
     // 如果没有数据或没有 id，表示是新增
     if (!data || !data.id) {
diff --git a/apps/web-antd/src/views/iot/product/category/data.ts b/apps/web-antd/src/views/iot/product/category/data.ts
index 2604b0406..da109b8bc 100644
--- a/apps/web-antd/src/views/iot/product/category/data.ts
+++ b/apps/web-antd/src/views/iot/product/category/data.ts
@@ -1,12 +1,13 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 
-import { DICT_TYPE } from '@vben/constants';
+import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
 
 import { z } from '#/adapter/form';
-import { getSimpleProductCategoryList } from '#/api/iot/product/category';
+import { getRangePickerDefaultProps } from '#/utils';
 
-/** 新增/修改产品分类的表单 */
+/** 新增/修改的表单 */
 export function useFormSchema(): VbenFormSchema[] {
   return [
     {
@@ -19,51 +20,37 @@ export function useFormSchema(): VbenFormSchema[] {
     },
     {
       fieldName: 'name',
-      label: '分类名称',
+      label: '分类名字',
       component: 'Input',
       componentProps: {
-        placeholder: '请输入分类名称',
+        placeholder: '请输入分类名字',
       },
       rules: z
         .string()
-        .min(1, '分类名称不能为空')
-        .max(64, '分类名称长度不能超过 64 个字符'),
-    },
-    {
-      fieldName: 'parentId',
-      label: '父级分类',
-      component: 'ApiTreeSelect',
-      componentProps: {
-        api: getSimpleProductCategoryList,
-        labelField: 'name',
-        valueField: 'id',
-        placeholder: '请选择父级分类',
-        allowClear: true,
-      },
+        .min(1, '分类名字不能为空')
+        .max(64, '分类名字长度不能超过 64 个字符'),
     },
     {
       fieldName: 'sort',
-      label: '排序',
+      label: '分类排序',
       component: 'InputNumber',
       componentProps: {
-        placeholder: '请输入排序',
+        placeholder: '请输入分类排序',
         class: 'w-full',
         min: 0,
       },
-      rules: 'required',
+      rules: z.number().min(0, '分类排序不能为空'),
     },
     {
       fieldName: 'status',
-      label: '状态',
+      label: '分类状态',
       component: 'RadioGroup',
-      defaultValue: 1,
       componentProps: {
-        options: [
-          { label: '开启', value: 1 },
-          { label: '关闭', value: 0 },
-        ],
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        buttonStyle: 'solid',
+        optionType: 'button',
       },
-      rules: 'required',
+      rules: z.number().default(CommonStatusEnum.ENABLE),
     },
     {
       fieldName: 'description',
@@ -82,10 +69,10 @@ export function useGridFormSchema(): VbenFormSchema[] {
   return [
     {
       fieldName: 'name',
-      label: '分类名称',
+      label: '分类名字',
       component: 'Input',
       componentProps: {
-        placeholder: '请输入分类名称',
+        placeholder: '请输入分类名字',
         allowClear: true,
       },
     },
@@ -94,9 +81,8 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '创建时间',
       component: 'RangePicker',
       componentProps: {
-        placeholder: ['开始日期', '结束日期'],
+        ...getRangePickerDefaultProps(),
         allowClear: true,
-        class: 'w-full',
       },
     },
   ];
@@ -114,7 +100,6 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
       field: 'name',
       title: '名字',
       minWidth: 200,
-      treeNode: true,
     },
     {
       field: 'sort',
diff --git a/apps/web-antd/src/views/iot/product/category/index.vue b/apps/web-antd/src/views/iot/product/category/index.vue
index 7344bd5de..3ccc4e830 100644
--- a/apps/web-antd/src/views/iot/product/category/index.vue
+++ b/apps/web-antd/src/views/iot/product/category/index.vue
@@ -3,7 +3,6 @@ import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { IotProductCategoryApi } from '#/api/iot/product/category';
 
 import { Page, useVbenModal } from '@vben/common-ui';
-import { handleTree } from '@vben/utils';
 
 import { message } from 'ant-design-vue';
 
@@ -70,16 +69,11 @@ const [Grid, gridApi] = useVbenVxeGrid({
     proxyConfig: {
       ajax: {
         query: async ({ page }, formValues) => {
-          const data = await getProductCategoryPage({
+          return await getProductCategoryPage({
             pageNo: page.currentPage,
             pageSize: page.pageSize,
             ...formValues,
           });
-          // 转换为树形结构
-          return {
-            ...data,
-            list: handleTree(data.list, 'id', 'parentId'),
-          };
         },
       },
     },
@@ -91,16 +85,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
       refresh: true,
       search: true,
     },
-    treeConfig: {
-      parentField: 'parentId',
-      rowField: 'id',
-      transform: true,
-      expandAll: true,
-      reserve: true,
-      trigger: 'default',
-      iconOpen: '',
-      iconClose: '',
-    },
   } as VxeTableGridOptions<IotProductCategoryApi.ProductCategory>,
 });
 </script>
@@ -121,8 +105,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
           ]"
         />
       </template>
-
-      <!-- 操作列 -->
       <template #actions="{ row }">
         <TableAction
           :actions="[
diff --git a/apps/web-antd/src/views/iot/product/category/modules/ProductCategoryForm.vue b/apps/web-antd/src/views/iot/product/category/modules/ProductCategoryForm.vue
index b508b481e..23a799e4d 100644
--- a/apps/web-antd/src/views/iot/product/category/modules/ProductCategoryForm.vue
+++ b/apps/web-antd/src/views/iot/product/category/modules/ProductCategoryForm.vue
@@ -38,6 +38,7 @@ const [Form, formApi] = useVbenForm({
   showDefaultActions: false,
 });
 
+// TODO @haohao：参考别的 form；1）文件的命名可以简化；2）代码可以在简化下；
 const [Modal, modalApi] = useVbenModal({
   async onConfirm() {
     const { valid } = await formApi.validate();
@@ -63,13 +64,17 @@ const [Modal, modalApi] = useVbenModal({
   async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
       formData.value = undefined;
+      formApi.resetForm();
       return;
     }
-    // 加载数据
-    let data = modalApi.getData<
-      IotProductCategoryApi.ProductCategory & { parentId?: number }
-    >();
-    if (!data) {
+
+    // 重置表单
+    await formApi.resetForm();
+
+    const data = modalApi.getData<IotProductCategoryApi.ProductCategory>();
+    // 如果没有数据或没有 id，表示是新增
+    if (!data || !data.id) {
+      formData.value = undefined;
       // 新增模式：设置默认值
       await formApi.setValues({
         sort: 0,
@@ -77,23 +82,12 @@ const [Modal, modalApi] = useVbenModal({
       });
       return;
     }
+
+    // 编辑模式：加载数据
     modalApi.lock();
     try {
-      if (data.id) {
-        // 编辑模式：加载完整数据
-        data = await getProductCategory(data.id);
-      } else if (data.parentId) {
-        // 新增下级分类：设置父级ID
-        await formApi.setValues({
-          parentId: data.parentId,
-          sort: 0,
-          status: 1,
-        });
-        return;
-      }
-      // 设置到 values
-      formData.value = data;
-      await formApi.setValues(data);
+      formData.value = await getProductCategory(data.id);
+      await formApi.setValues(formData.value);
     } finally {
       modalApi.unlock();
     }
diff --git a/apps/web-antd/src/views/iot/product/product/modules/ProductCardView.vue b/apps/web-antd/src/views/iot/product/product/modules/ProductCardView.vue
index 411ff50c1..cc1d25246 100644
--- a/apps/web-antd/src/views/iot/product/product/modules/ProductCardView.vue
+++ b/apps/web-antd/src/views/iot/product/product/modules/ProductCardView.vue
@@ -19,6 +19,7 @@ import {
 
 import { getProductPage } from '#/api/iot/product/product';
 
+// TODO @haohao：命名不太对；可以简化下；
 defineOptions({ name: 'ProductCardView' });
 
 const props = defineProps<Props>();
@@ -101,7 +102,7 @@ defineExpose({
 <template>
   <div class="product-card-view">
     <!-- 产品卡片列表 -->
-    <div v-loading="loading" class="min-h-[400px]">
+    <div v-loading="loading" class="min-h-96">
       <Row v-if="list.length > 0" :gutter="[16, 16]">
         <Col
           v-for="item in list"
@@ -118,7 +119,7 @@ defineExpose({
               <div class="product-icon">
                 <IconifyIcon
                   :icon="item.icon || 'ant-design:inbox-outlined'"
-                  class="text-[32px]"
+                  class="text-3xl"
                 />
               </div>
               <div class="ml-3 min-w-0 flex-1">
@@ -161,7 +162,7 @@ defineExpose({
               <div class="product-3d-icon">
                 <IconifyIcon
                   icon="ant-design:box-plot-outlined"
-                  class="text-[80px]"
+                  class="text-2xl"
                 />
               </div>
             </div>
@@ -195,16 +196,33 @@ defineExpose({
                 />
                 物模型
               </Button>
+              <Tooltip v-if="item.status === 1" title="启用状态的产品不能删除">
+                <Button
+                  size="small"
+                  danger
+                  disabled
+                  class="action-btn action-btn-delete !w-8"
+                >
+                  <IconifyIcon
+                    icon="ant-design:delete-outlined"
+                    class="text-sm"
+                  />
+                </Button>
+              </Tooltip>
               <Popconfirm
+                v-else
                 :title="`确认删除产品 ${item.name} 吗?`"
                 @confirm="emit('delete', item)"
               >
                 <Button
                   size="small"
                   danger
-                  class="action-btn action-btn-delete"
+                  class="action-btn action-btn-delete !w-8"
                 >
-                  <IconifyIcon icon="ant-design:delete-outlined" />
+                  <IconifyIcon
+                    icon="ant-design:delete-outlined"
+                    class="text-sm"
+                  />
                 </Button>
               </Popconfirm>
             </div>
diff --git a/apps/web-antd/src/views/iot/rule/scene/form/configs/CurrentTimeConditionConfig.vue b/apps/web-antd/src/views/iot/rule/scene/form/configs/CurrentTimeConditionConfig.vue
index 75c55eba0..a705b41a8 100644
--- a/apps/web-antd/src/views/iot/rule/scene/form/configs/CurrentTimeConditionConfig.vue
+++ b/apps/web-antd/src/views/iot/rule/scene/form/configs/CurrentTimeConditionConfig.vue
@@ -170,7 +170,7 @@ watch(
 </script>
 
 <template>
-  <div class="gap-16px flex flex-col">
+  <div class="flex flex-col gap-4">
     <Row :gutter="16">
       <!-- 时间操作符选择 -->
       <Col :span="8">
@@ -190,7 +190,7 @@ watch(
               :value="option.value"
             >
               <div class="flex w-full items-center justify-between">
-                <div class="gap-8px flex items-center">
+                <div class="flex items-center gap-2">
                   <IconifyIcon :icon="option.icon" :class="option.iconClass" />
                   <span>{{ option.label }}</span>
                 </div>
@@ -225,9 +225,7 @@ watch(
             value-format="YYYY-MM-DD HH:mm:ss"
             class="w-full"
           />
-          <div v-else class="text-14px text-[var(--el-text-color-placeholder)]">
-            无需设置时间值
-          </div>
+          <div v-else class="text-secondary text-sm">无需设置时间值</div>
         </Form.Item>
       </Col>
 
diff --git a/apps/web-antd/src/views/iot/rule/scene/form/configs/DeviceTriggerConfig.vue b/apps/web-antd/src/views/iot/rule/scene/form/configs/DeviceTriggerConfig.vue
index f03e05d35..ff43820bd 100644
--- a/apps/web-antd/src/views/iot/rule/scene/form/configs/DeviceTriggerConfig.vue
+++ b/apps/web-antd/src/views/iot/rule/scene/form/configs/DeviceTriggerConfig.vue
@@ -161,11 +161,11 @@ function removeConditionGroup() {
               @click="addSubGroup"
               :disabled="(trigger.conditionGroups?.length || 0) >= maxSubGroups"
             >
-              <IconifyIcon icon="ep:plus" />
+              <IconifyIcon icon="lucide:plus" />
               添加子条件组
             </Button>
             <Button danger size="small" text @click="removeConditionGroup">
-              <IconifyIcon icon="ep:delete" />
+              <IconifyIcon icon="lucide:trash-2" />
               删除条件组
             </Button>
           </div>
@@ -215,7 +215,7 @@ function removeConditionGroup() {
                     @click="removeSubGroup(subGroupIndex)"
                     class="hover:bg-red-50"
                   >
-                    <IconifyIcon icon="ep:delete" />
+                    <IconifyIcon icon="lucide:trash-2" />
                     删除组
                   </Button>
                 </div>
@@ -258,7 +258,7 @@ function removeConditionGroup() {
           class="p-24px rounded-8px border-2 border-dashed border-orange-200 bg-orange-50 text-center"
         >
           <div class="gap-12px flex flex-col items-center">
-            <IconifyIcon icon="ep:plus" class="text-32px text-orange-400" />
+            <IconifyIcon icon="lucide:plus" class="text-32px text-orange-400" />
             <div class="text-orange-600">
               <p class="text-14px font-500 mb-4px">暂无子条件组</p>
               <p class="text-12px">点击上方"添加子条件组"按钮开始配置</p>
diff --git a/apps/web-antd/src/views/iot/rule/scene/form/configs/MainConditionInnerConfig.vue b/apps/web-antd/src/views/iot/rule/scene/form/configs/MainConditionInnerConfig.vue
index 98e43ad5f..bf6610bc0 100644
--- a/apps/web-antd/src/views/iot/rule/scene/form/configs/MainConditionInnerConfig.vue
+++ b/apps/web-antd/src/views/iot/rule/scene/form/configs/MainConditionInnerConfig.vue
@@ -173,7 +173,7 @@ function handlePropertyChange(propertyInfo: any) {
 </script>
 
 <template>
-  <div class="space-y-16px">
+  <div class="space-y-4">
     <!-- 触发事件类型选择 -->
     <Form.Item label="触发事件类型" required>
       <Select
@@ -192,7 +192,7 @@ function handlePropertyChange(propertyInfo: any) {
     </Form.Item>
 
     <!-- 设备属性条件配置 -->
-    <div v-if="isDevicePropertyTrigger" class="space-y-16px">
+    <div v-if="isDevicePropertyTrigger" class="space-y-4">
       <!-- 产品设备选择 -->
       <Row :gutter="16">
         <Col :span="12">
@@ -292,7 +292,7 @@ function handlePropertyChange(propertyInfo: any) {
     </div>
 
     <!-- 设备状态条件配置 -->
-    <div v-else-if="isDeviceStatusTrigger" class="space-y-16px">
+    <div v-else-if="isDeviceStatusTrigger" class="space-y-4">
       <!-- 设备状态触发器使用简化的配置 -->
       <Row :gutter="16">
         <Col :span="12">
@@ -364,13 +364,11 @@ function handlePropertyChange(propertyInfo: any) {
     </div>
 
     <!-- 其他触发类型的提示 -->
-    <div v-else class="py-20px text-center">
-      <p class="text-14px mb-4px text-[var(--el-text-color-secondary)]">
+    <div v-else class="py-5 text-center">
+      <p class="text-secondary mb-1 text-sm">
         当前触发事件类型：{{ getTriggerTypeLabel(triggerType) }}
       </p>
-      <p class="text-12px text-[var(--el-text-color-placeholder)]">
-        此触发类型暂不需要配置额外条件
-      </p>
+      <p class="text-secondary text-xs">此触发类型暂不需要配置额外条件</p>
     </div>
   </div>
 </template>
diff --git a/apps/web-antd/src/views/iot/rule/scene/form/configs/SubConditionGroupConfig.vue b/apps/web-antd/src/views/iot/rule/scene/form/configs/SubConditionGroupConfig.vue
index 9494408a1..a37e0d477 100644
--- a/apps/web-antd/src/views/iot/rule/scene/form/configs/SubConditionGroupConfig.vue
+++ b/apps/web-antd/src/views/iot/rule/scene/form/configs/SubConditionGroupConfig.vue
@@ -83,27 +83,24 @@ function updateCondition(index: number, condition: TriggerCondition) {
 </script>
 
 <template>
-  <div class="p-16px">
+  <div class="p-4">
     <!-- 空状态 -->
-    <div v-if="!subGroup || subGroup.length === 0" class="py-24px text-center">
-      <div class="gap-12px flex flex-col items-center">
-        <IconifyIcon
-          icon="ep:plus"
-          class="text-32px text-[var(--el-text-color-placeholder)]"
-        />
-        <div class="text-[var(--el-text-color-secondary)]">
-          <p class="text-14px font-500 mb-4px">暂无条件</p>
-          <p class="text-12px">点击下方按钮添加第一个条件</p>
+    <div v-if="!subGroup || subGroup.length === 0" class="py-6 text-center">
+      <div class="flex flex-col items-center gap-3">
+        <IconifyIcon icon="lucide:plus" class="text-8 text-secondary" />
+        <div class="text-secondary">
+          <p class="mb-1 text-base font-bold">暂无条件</p>
+          <p class="text-xs">点击下方按钮添加第一个条件</p>
         </div>
         <Button type="primary" @click="addCondition">
-          <IconifyIcon icon="ep:plus" />
+          <IconifyIcon icon="lucide:plus" />
           添加条件
         </Button>
       </div>
     </div>
 
     <!-- 条件列表 -->
-    <div v-else class="space-y-16px">
+    <div v-else class="space-y-4">
       <div
         v-for="(condition, conditionIndex) in subGroup"
         :key="`condition-${conditionIndex}`"
@@ -111,20 +108,18 @@ function updateCondition(index: number, condition: TriggerCondition) {
       >
         <!-- 条件配置 -->
         <div
-          class="rounded-6px border border-[var(--el-border-color-lighter)] bg-[var(--el-fill-color-blank)] shadow-sm"
+          class="rounded-3px border-border bg-fill-color-blank border shadow-sm"
         >
           <div
-            class="p-12px rounded-t-4px flex items-center justify-between border-b border-[var(--el-border-color-lighter)] bg-[var(--el-fill-color-light)]"
+            class="rounded-t-1 border-border bg-fill-color-blank flex items-center justify-between border-b p-3"
           >
-            <div class="gap-8px flex items-center">
+            <div class="flex items-center gap-2">
               <div
-                class="w-20px h-20px text-10px flex items-center justify-center rounded-full bg-blue-500 font-bold text-white"
+                class="bg-primary flex size-5 items-center justify-center rounded-full text-xs font-bold text-white"
               >
                 {{ conditionIndex + 1 }}
               </div>
-              <span
-                class="text-12px font-500 text-[var(--el-text-color-primary)]"
-              >
+              <span class="text-primary text-base font-bold">
                 条件 {{ conditionIndex + 1 }}
               </span>
             </div>
@@ -136,11 +131,11 @@ function updateCondition(index: number, condition: TriggerCondition) {
               v-if="subGroup!.length > 1"
               class="hover:bg-red-50"
             >
-              <IconifyIcon icon="ep:delete" />
+              <IconifyIcon icon="lucide:trash-2" />
             </Button>
           </div>
 
-          <div class="p-12px">
+          <div class="p-3">
             <ConditionConfig
               :model-value="condition"
               @update:model-value="
@@ -158,15 +153,13 @@ function updateCondition(index: number, condition: TriggerCondition) {
         v-if="
           subGroup && subGroup.length > 0 && subGroup.length < maxConditions
         "
-        class="py-16px text-center"
+        class="py-4 text-center"
       >
         <Button type="primary" plain @click="addCondition">
-          <IconifyIcon icon="ep:plus" />
+          <IconifyIcon icon="lucide:plus" />
           继续添加条件
         </Button>
-        <span
-          class="mt-8px text-12px block text-[var(--el-text-color-secondary)]"
-        >
+        <span class="text-secondary mt-2 block text-xs">
           最多可添加 {{ maxConditions }} 个条件
         </span>
       </div>
diff --git a/apps/web-antd/src/views/iot/rule/scene/form/inputs/JsonParamsInput.vue b/apps/web-antd/src/views/iot/rule/scene/form/inputs/JsonParamsInput.vue
index 1da80425e..edcba724b 100644
--- a/apps/web-antd/src/views/iot/rule/scene/form/inputs/JsonParamsInput.vue
+++ b/apps/web-antd/src/views/iot/rule/scene/form/inputs/JsonParamsInput.vue
@@ -198,25 +198,25 @@ const emptyMessage = computed(() => {
 });
 
 // 计算属性：无配置消息
-const noConfigMessage = computed(() => {
-  switch (props.type) {
-    case JsonParamsInputTypeEnum.CUSTOM: {
-      return JSON_PARAMS_INPUT_CONSTANTS.NO_CONFIG_MESSAGES.CUSTOM;
-    }
-    case JsonParamsInputTypeEnum.EVENT: {
-      return JSON_PARAMS_INPUT_CONSTANTS.NO_CONFIG_MESSAGES.EVENT;
-    }
-    case JsonParamsInputTypeEnum.PROPERTY: {
-      return JSON_PARAMS_INPUT_CONSTANTS.NO_CONFIG_MESSAGES.PROPERTY;
-    }
-    case JsonParamsInputTypeEnum.SERVICE: {
-      return JSON_PARAMS_INPUT_CONSTANTS.NO_CONFIG_MESSAGES.SERVICE;
-    }
-    default: {
-      return JSON_PARAMS_INPUT_CONSTANTS.NO_CONFIG_MESSAGES.DEFAULT;
-    }
-  }
-});
+// const noConfigMessage = computed(() => {
+//   switch (props.type) {
+//     case JsonParamsInputTypeEnum.CUSTOM: {
+//       return JSON_PARAMS_INPUT_CONSTANTS.NO_CONFIG_MESSAGES.CUSTOM;
+//     }
+//     case JsonParamsInputTypeEnum.EVENT: {
+//       return JSON_PARAMS_INPUT_CONSTANTS.NO_CONFIG_MESSAGES.EVENT;
+//     }
+//     case JsonParamsInputTypeEnum.PROPERTY: {
+//       return JSON_PARAMS_INPUT_CONSTANTS.NO_CONFIG_MESSAGES.PROPERTY;
+//     }
+//     case JsonParamsInputTypeEnum.SERVICE: {
+//       return JSON_PARAMS_INPUT_CONSTANTS.NO_CONFIG_MESSAGES.SERVICE;
+//     }
+//     default: {
+//       return JSON_PARAMS_INPUT_CONSTANTS.NO_CONFIG_MESSAGES.DEFAULT;
+//     }
+//   }
+// });
 
 /**
  * 处理参数变化事件
@@ -415,7 +415,7 @@ watch(
 
 <template>
   <!-- 参数配置 -->
-  <div class="space-y-12px w-full">
+  <div class="w-full space-y-3">
     <!-- JSON 输入框 -->
     <div class="relative">
       <Input.TextArea
@@ -427,7 +427,7 @@ watch(
         :class="{ 'is-error': jsonError }"
       />
       <!-- 查看详细示例弹出层 -->
-      <div class="top-8px right-8px absolute">
+      <div class="absolute right-2 top-2">
         <Popover
           placement="leftTop"
           :width="450"
@@ -450,79 +450,64 @@ watch(
 
           <!-- 弹出层内容 -->
           <div class="json-params-detail-content">
-            <div class="gap-8px mb-16px flex items-center">
-              <IconifyIcon
-                :icon="titleIcon"
-                class="text-18px text-[var(--el-color-primary)]"
-              />
-              <span
-                class="text-16px font-600 text-[var(--el-text-color-primary)]"
-              >
+            <div class="mb-4 flex items-center gap-2">
+              <IconifyIcon :icon="titleIcon" class="text-primary text-lg" />
+              <span class="text-primary text-base font-bold">
                 {{ title }}
               </span>
             </div>
 
-            <div class="space-y-16px">
+            <div class="space-y-4">
               <!-- 参数列表 -->
               <div v-if="paramsList.length > 0">
-                <div class="gap-8px mb-8px flex items-center">
+                <div class="mb-2 flex items-center gap-2">
                   <IconifyIcon
                     :icon="paramsIcon"
-                    class="text-14px text-[var(--el-color-primary)]"
+                    class="text-primary text-base"
                   />
-                  <span
-                    class="text-14px font-500 text-[var(--el-text-color-primary)]"
-                  >
+                  <span class="text-primary text-base font-bold">
                     {{ paramsLabel }}
                   </span>
                 </div>
-                <div class="ml-22px space-y-8px">
+                <div class="ml-6 space-y-2">
                   <div
                     v-for="param in paramsList"
                     :key="param.identifier"
-                    class="p-8px rounded-4px flex items-center justify-between bg-[var(--el-fill-color-lighter)]"
+                    class="bg-card flex items-center justify-between rounded-lg p-2"
                   >
                     <div class="flex-1">
-                      <div
-                        class="text-12px font-500 text-[var(--el-text-color-primary)]"
-                      >
+                      <div class="text-primary text-base font-bold">
                         {{ param.name }}
                         <Tag
                           v-if="param.required"
                           size="small"
                           type="danger"
-                          class="ml-4px"
+                          class="ml-1"
                         >
                           {{ JSON_PARAMS_INPUT_CONSTANTS.REQUIRED_TAG }}
                         </Tag>
                       </div>
-                      <div
-                        class="text-11px text-[var(--el-text-color-secondary)]"
-                      >
+                      <div class="text-secondary text-xs">
                         {{ param.identifier }}
                       </div>
                     </div>
-                    <div class="gap-8px flex items-center">
+                    <div class="flex items-center gap-2">
                       <Tag :type="getParamTypeTag(param.dataType)" size="small">
                         {{ getParamTypeName(param.dataType) }}
                       </Tag>
-                      <span
-                        class="text-11px text-[var(--el-text-color-secondary)]"
-                      >
+                      <span class="text-secondary text-xs">
                         {{ getExampleValue(param) }}
                       </span>
                     </div>
                   </div>
                 </div>
 
-                <div class="mt-12px ml-22px">
-                  <div
-                    class="text-12px mb-6px text-[var(--el-text-color-secondary)]"
-                  >
+                <div class="ml-6 mt-3">
+                  <div class="text-secondary mb-1 text-xs">
                     {{ JSON_PARAMS_INPUT_CONSTANTS.COMPLETE_JSON_FORMAT }}
                   </div>
                   <pre
-                    class="p-12px rounded-4px text-11px border-l-3px overflow-x-auto border-[var(--el-color-primary)] bg-[var(--el-fill-color-light)] text-[var(--el-text-color-primary)]"
+                    class="bg-card border-l-3px border-primary text-primary overflow-x-auto rounded-lg p-3 text-sm"
                   >
                       <code>{{ generateExampleJson() }}</code>
                     </pre>
@@ -531,8 +516,8 @@ watch(
 
               <!-- 无参数提示 -->
               <div v-else>
-                <div class="py-16px text-center">
-                  <p class="text-14px text-[var(--el-text-color-secondary)]">
+                <div class="py-4 text-center">
+                  <p class="text-secondary text-sm">
                     {{ emptyMessage }}
                   </p>
                 </div>
@@ -545,37 +530,29 @@ watch(
 
     <!-- 验证状态和错误提示 -->
     <div class="flex items-center justify-between">
-      <div class="gap-8px flex items-center">
+      <div class="flex items-center gap-2">
         <IconifyIcon
           :icon="
             jsonError
               ? JSON_PARAMS_INPUT_ICONS.STATUS_ICONS.ERROR
               : JSON_PARAMS_INPUT_ICONS.STATUS_ICONS.SUCCESS
           "
-          :class="
-            jsonError
-              ? 'text-[var(--el-color-danger)]'
-              : 'text-[var(--el-color-success)]'
-          "
-          class="text-14px"
+          :class="jsonError ? 'text-danger' : 'text-success'"
+          class="text-sm"
         />
         <span
-          :class="
-            jsonError
-              ? 'text-[var(--el-color-danger)]'
-              : 'text-[var(--el-color-success)]'
-          "
-          class="text-12px"
+          :class="jsonError ? 'text-danger' : 'text-success'"
+          class="text-xs"
         >
           {{ jsonError || JSON_PARAMS_INPUT_CONSTANTS.JSON_FORMAT_CORRECT }}
         </span>
       </div>
 
       <!-- 快速填充按钮 -->
-      <div v-if="paramsList.length > 0" class="gap-8px flex items-center">
-        <span class="text-12px text-[var(--el-text-color-secondary)]">{{
-          JSON_PARAMS_INPUT_CONSTANTS.QUICK_FILL_LABEL
-        }}</span>
+      <div v-if="paramsList.length > 0" class="flex items-center gap-2">
+        <span class="text-secondary text-xs">
+          {{ JSON_PARAMS_INPUT_CONSTANTS.QUICK_FILL_LABEL }}
+        </span>
         <Button size="small" type="primary" plain @click="fillExampleJson">
           {{ JSON_PARAMS_INPUT_CONSTANTS.EXAMPLE_DATA_BUTTON }}
         </Button>
diff --git a/apps/web-antd/src/views/iot/rule/scene/form/inputs/ValueInput.vue b/apps/web-antd/src/views/iot/rule/scene/form/inputs/ValueInput.vue
index 979843b47..501bdd454 100644
--- a/apps/web-antd/src/views/iot/rule/scene/form/inputs/ValueInput.vue
+++ b/apps/web-antd/src/views/iot/rule/scene/form/inputs/ValueInput.vue
@@ -186,7 +186,7 @@ watch(
         operator ===
         IotRuleSceneTriggerConditionParameterOperatorEnum.BETWEEN.value
       "
-      class="w-full! gap-8px flex items-center"
+      class="w-full! flex items-center gap-2"
     >
       <Input
         v-model="rangeStart"
@@ -196,11 +196,7 @@ watch(
         class="min-w-0 flex-1"
         style="width: auto !important"
       />
-      <span
-        class="text-12px whitespace-nowrap text-[var(--el-text-color-secondary)]"
-      >
-        至
-      </span>
+      <span class="text-secondary whitespace-nowrap text-xs"> 至 </span>
       <Input
         v-model="rangeEnd"
         :type="getInputType()"
@@ -226,18 +222,16 @@ watch(
           <Tooltip content="多个值用逗号分隔，如：1,2,3" placement="top">
             <IconifyIcon
               icon="ep:question-filled"
-              class="cursor-help text-[var(--el-text-color-placeholder)]"
+              class="cursor-help text-gray-400"
             />
           </Tooltip>
         </template>
       </Input>
       <div
         v-if="listPreview.length > 0"
-        class="mt-8px gap-6px flex flex-wrap items-center"
+        class="mt-2 flex flex-wrap items-center gap-1"
       >
-        <span class="text-12px text-[var(--el-text-color-secondary)]">
-          解析结果：
-        </span>
+        <span class="text-secondary text-xs"> 解析结果： </span>
         <Tag
           v-for="(item, index) in listPreview"
           :key="index"
@@ -288,7 +282,7 @@ watch(
           :content="`单位：${propertyConfig.unit}`"
           placement="top"
         >
-          <span class="text-12px px-4px text-[var(--el-text-color-secondary)]">
+          <span class="text-secondary px-1 text-xs">
             {{ propertyConfig.unit }}
           </span>
         </Tooltip>
diff --git a/apps/web-antd/src/views/iot/rule/scene/form/sections/ActionSection.vue b/apps/web-antd/src/views/iot/rule/scene/form/sections/ActionSection.vue
index f8dfa3b5d..0affcb8f7 100644
--- a/apps/web-antd/src/views/iot/rule/scene/form/sections/ActionSection.vue
+++ b/apps/web-antd/src/views/iot/rule/scene/form/sections/ActionSection.vue
@@ -100,7 +100,7 @@ function removeAction(index: number) {
  * @param type 执行器类型
  */
 function updateActionType(index: number, type: number) {
-  actions.value[index].type = type.toString();
+  actions.value[index]!.type = type.toString();
   onActionTypeChange(actions.value[index] as Action, type);
 }
 
@@ -119,7 +119,7 @@ function updateAction(index: number, action: Action) {
  * @param alertConfigId 告警配置ID
  */
 function updateActionAlertConfig(index: number, alertConfigId?: number) {
-  actions.value[index].alertConfigId = alertConfigId;
+  actions.value[index]!.alertConfigId = alertConfigId;
   if (actions.value[index]) {
     actions.value[index].alertConfigId = alertConfigId;
   }
@@ -153,7 +153,7 @@ function onActionTypeChange(action: Action, type: any) {
 </script>
 
 <template>
-  <Card class="rounded-8px border-primary border" shadow="never">
+  <Card class="border-primary rounded-lg border" shadow="never">
     <template #title>
       <div class="flex items-center justify-between">
         <div class="gap-8px flex items-center">
@@ -186,18 +186,18 @@ function onActionTypeChange(action: Action, type: any) {
         <div
           v-for="(action, index) in actions"
           :key="`action-${index}`"
-          class="rounded-8px border-2 border-blue-200 bg-blue-50 shadow-sm transition-shadow hover:shadow-md"
+          class="rounded-lg border-2 border-blue-200 bg-blue-50 shadow-sm transition-shadow hover:shadow-md"
         >
           <!-- 执行器头部 - 蓝色主题 -->
           <div
-            class="p-16px rounded-t-6px flex items-center justify-between border-b border-blue-200 bg-gradient-to-r from-blue-50 to-sky-50"
+            class="flex items-center justify-between rounded-t-lg border-b border-blue-200 bg-gradient-to-r from-blue-50 to-sky-50 p-4"
           >
             <div class="gap-12px flex items-center">
               <div
-                class="gap-8px text-16px font-600 flex items-center text-blue-700"
+                class="font-600 flex items-center gap-2 text-base text-blue-700"
               >
                 <div
-                  class="w-24px h-24px text-12px flex items-center justify-center rounded-full bg-blue-500 font-bold text-white"
+                  class="flex size-6 items-center justify-center rounded-full bg-blue-500 text-xs font-bold text-white"
                 >
                   {{ index + 1 }}
                 </div>
@@ -220,7 +220,7 @@ function onActionTypeChange(action: Action, type: any) {
                 @click="removeAction(index)"
                 class="hover:bg-red-50"
               >
-                <IconifyIcon icon="ep:delete" />
+                <IconifyIcon icon="lucide:trash-2" />
                 删除
               </Button>
             </div>
@@ -275,16 +275,14 @@ function onActionTypeChange(action: Action, type: any) {
                 action.type ===
                 IotRuleSceneActionTypeEnum.ALERT_TRIGGER.toString()
               "
-              class="rounded-6px p-16px border-border bg-fill-color-blank border"
+              class="border-border bg-fill-color-blank rounded-lg border p-4"
             >
-              <div class="gap-8px mb-8px flex items-center">
-                <IconifyIcon icon="ep:warning" class="text-16px text-warning" />
-                <span class="text-14px font-600 text-primary">触发告警</span>
+              <div class="mb-2 flex items-center gap-2">
+                <IconifyIcon icon="ep:warning" class="text-warning text-base" />
+                <span class="font-600 text-primary text-sm">触发告警</span>
                 <Tag size="small" type="warning">自动执行</Tag>
               </div>
-              <div
-                class="text-12px leading-relaxed text-[var(--el-text-color-secondary)]"
-              >
+              <div class="text-secondary text-xs leading-relaxed">
                 当触发条件满足时，系统将自动发送告警通知，可在菜单 [告警中心 ->
                 告警配置] 管理。
               </div>
diff --git a/apps/web-antd/src/views/iot/rule/scene/form/sections/TriggerSection.vue b/apps/web-antd/src/views/iot/rule/scene/form/sections/TriggerSection.vue
index 4f938f54a..0b63019b5 100644
--- a/apps/web-antd/src/views/iot/rule/scene/form/sections/TriggerSection.vue
+++ b/apps/web-antd/src/views/iot/rule/scene/form/sections/TriggerSection.vue
@@ -71,7 +71,7 @@ function removeTrigger(index: number) {
  * @param type 触发器类型
  */
 function updateTriggerType(index: number, type: number) {
-  triggers.value[index].type = type;
+  triggers.value[index]!.type = type.toString();
   onTriggerTypeChange(index, type);
 }
 
@@ -90,7 +90,7 @@ function updateTriggerDeviceConfig(index: number, newTrigger: Trigger) {
  * @param cronExpression CRON 表达式
  */
 function updateTriggerCronConfig(index: number, cronExpression?: string) {
-  triggers.value[index].cronExpression = cronExpression;
+  triggers.value[index]!.cronExpression = cronExpression;
 }
 
 /**
@@ -99,7 +99,7 @@ function updateTriggerCronConfig(index: number, cronExpression?: string) {
  * @param _ 触发器类型（未使用）
  */
 function onTriggerTypeChange(index: number, _: number) {
-  const triggerItem = triggers.value[index];
+  const triggerItem = triggers.value[index]!;
   triggerItem.productId = undefined;
   triggerItem.deviceId = undefined;
   triggerItem.identifier = undefined;
@@ -127,7 +127,7 @@ onMounted(() => {
           <Tag size="small" type="info"> {{ triggers.length }} 个触发器 </Tag>
         </div>
         <Button type="primary" size="small" @click="addTrigger">
-          <IconifyIcon icon="ep:plus" />
+          <IconifyIcon icon="lucide:plus" />
           添加触发器
         </Button>
       </div>
@@ -173,7 +173,7 @@ onMounted(() => {
                 @click="removeTrigger(index)"
                 class="hover:bg-red-50"
               >
-                <IconifyIcon icon="ep:delete" />
+                <IconifyIcon icon="lucide:trash-2" />
                 删除
               </Button>
             </div>
@@ -203,7 +203,10 @@ onMounted(() => {
               <div
                 class="gap-8px p-12px px-16px rounded-6px border-primary bg-background flex items-center border"
               >
-                <IconifyIcon icon="ep:timer" class="text-18px text-danger" />
+                <IconifyIcon
+                  icon="lucide:timer"
+                  class="text-18px text-danger"
+                />
                 <span class="text-14px font-500 text-primary">
                   定时触发配置
                 </span>
diff --git a/apps/web-antd/src/views/mall/home/modules/shortcut-card.vue b/apps/web-antd/src/views/mall/home/modules/shortcut-card.vue
index ea3fb3a33..6780fd759 100644
--- a/apps/web-antd/src/views/mall/home/modules/shortcut-card.vue
+++ b/apps/web-antd/src/views/mall/home/modules/shortcut-card.vue
@@ -14,7 +14,7 @@ const router = useRouter();
 const menuList = [
   {
     name: '用户管理',
-    icon: 'ep:user-filled',
+    icon: 'lucide:user',
     bgColor: 'bg-red-400',
     routerName: 'MemberUser',
   },
@@ -26,7 +26,7 @@ const menuList = [
   },
   {
     name: '订单管理',
-    icon: 'ep:list',
+    icon: 'lucide:list',
     bgColor: 'bg-yellow-500',
     routerName: 'TradeOrder',
   },
@@ -44,13 +44,13 @@ const menuList = [
   },
   {
     name: '优惠券',
-    icon: 'ep:ticket',
+    icon: 'lucide:ticket',
     bgColor: 'bg-blue-500',
     routerName: 'PromotionCoupon',
   },
   {
     name: '拼团活动',
-    icon: 'fa:group',
+    icon: 'lucide:users',
     bgColor: 'bg-purple-500',
     routerName: 'PromotionBargainActivity',
   },
diff --git a/apps/web-antd/src/views/mall/product/category/components/product-category-select.vue b/apps/web-antd/src/views/mall/product/category/components/product-category-select.vue
index dedb2d2fa..a55a66a43 100644
--- a/apps/web-antd/src/views/mall/product/category/components/product-category-select.vue
+++ b/apps/web-antd/src/views/mall/product/category/components/product-category-select.vue
@@ -3,6 +3,8 @@ import { computed, onMounted, ref } from 'vue';
 
 import { handleTree } from '@vben/utils';
 
+import { TreeSelect } from 'ant-design-vue';
+
 import { getCategoryList } from '#/api/mall/product/category';
 
 /** 商品分类选择组件 */
diff --git a/apps/web-antd/src/views/mall/product/spu/components/index.ts b/apps/web-antd/src/views/mall/product/spu/components/index.ts
new file mode 100644
index 000000000..122cbcea0
--- /dev/null
+++ b/apps/web-antd/src/views/mall/product/spu/components/index.ts
@@ -0,0 +1,3 @@
+export { default as SkuTableSelect } from './sku-table-select.vue';
+export { default as SpuShowcase } from './spu-showcase.vue';
+export { default as SpuTableSelect } from './spu-table-select.vue';
diff --git a/apps/web-antd/src/views/mall/product/spu/form/modules/sku-table-select.vue b/apps/web-antd/src/views/mall/product/spu/components/sku-table-select.vue
similarity index 60%
rename from apps/web-antd/src/views/mall/product/spu/form/modules/sku-table-select.vue
rename to apps/web-antd/src/views/mall/product/spu/components/sku-table-select.vue
index 0900c360e..2679a9d4f 100644
--- a/apps/web-antd/src/views/mall/product/spu/form/modules/sku-table-select.vue
+++ b/apps/web-antd/src/views/mall/product/spu/components/sku-table-select.vue
@@ -8,8 +8,6 @@ import { computed, ref } from 'vue';
 import { useVbenModal } from '@vben/common-ui';
 import { fenToYuan } from '@vben/utils';
 
-import { Input, message } from 'ant-design-vue';
-
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getSpu } from '#/api/mall/product/spu';
 
@@ -21,18 +19,13 @@ const emit = defineEmits<{
   change: [sku: MallSpuApi.Sku];
 }>();
 
-const selectedSkuId = ref<number>();
 const spuId = ref<number>();
 
-/** 配置列 */
-// TODO @puhui999：貌似列太宽了？
+/** 表格列配置 */
 const gridColumns = computed<VxeGridProps['columns']>(() => [
   {
-    field: 'id',
-    title: '#',
-    width: 60,
-    align: 'center',
-    slots: { default: 'radio-column' },
+    type: 'radio',
+    width: 55,
   },
   {
     field: 'picUrl',
@@ -66,73 +59,65 @@ const gridColumns = computed<VxeGridProps['columns']>(() => [
   },
 ]);
 
+// TODO @芋艿：要不要直接非 pager？
 const [Grid, gridApi] = useVbenVxeGrid({
   gridOptions: {
     columns: gridColumns.value,
     height: 400,
     border: true,
     showOverflow: true,
+    radioConfig: {
+      reserve: true,
+    },
     proxyConfig: {
       ajax: {
         query: async () => {
           if (!spuId.value) {
             return { items: [], total: 0 };
           }
-          try {
-            const spu = await getSpu(spuId.value);
-            return {
-              items: spu.skus || [],
-              total: spu.skus?.length || 0,
-            };
-          } catch (error) {
-            message.error('加载 SKU 数据失败');
-            console.error(error);
-            return { items: [], total: 0 };
-          }
+          const spu = await getSpu(spuId.value);
+          return {
+            items: spu.skus || [],
+            total: spu.skus?.length || 0,
+          };
         },
       },
     },
   },
+  gridEvents: {
+    radioChange: handleRadioChange,
+  },
 });
 
 /** 处理选中 */
-function handleSelected(row: MallSpuApi.Sku) {
-  emit('change', row);
-  modalApi.close();
-  selectedSkuId.value = undefined;
+function handleRadioChange() {
+  const selectedRow = gridApi.grid.getRadioRecord() as MallSpuApi.Sku;
+  if (selectedRow) {
+    emit('change', selectedRow);
+    modalApi.close();
+  }
 }
 
 const [Modal, modalApi] = useVbenModal({
   destroyOnClose: true,
   onOpenChange: async (isOpen: boolean) => {
     if (!isOpen) {
-      selectedSkuId.value = undefined;
+      gridApi.grid.clearRadioRow();
       spuId.value = undefined;
       return;
     }
     const data = modalApi.getData<SpuData>();
-    // TODO @puhui999：这里要不 if return，让括号的层级简单点。
-    if (data?.spuId) {
-      spuId.value = data.spuId;
-      // 触发数据查询
-      await gridApi.query();
+    if (!data?.spuId) {
+      return;
     }
+    spuId.value = data.spuId;
+    await gridApi.query();
   },
 });
 </script>
 
 <template>
   <Modal class="w-[700px]" title="选择规格">
-    <Grid>
-      <template #radio-column="{ row }">
-        <Input
-          v-model="selectedSkuId"
-          :value="row.id"
-          class="cursor-pointer"
-          type="radio"
-          @change="handleSelected(row)"
-        />
-      </template>
-    </Grid>
+    <Grid />
   </Modal>
 </template>
diff --git a/apps/web-antd/src/views/mall/product/spu/components/spu-showcase.vue b/apps/web-antd/src/views/mall/product/spu/components/spu-showcase.vue
new file mode 100644
index 000000000..e1abcb255
--- /dev/null
+++ b/apps/web-antd/src/views/mall/product/spu/components/spu-showcase.vue
@@ -0,0 +1,141 @@
+<!-- 商品橱窗组件：用于展示和选择商品 SPU -->
+<script lang="ts" setup>
+import type { MallSpuApi } from '#/api/mall/product/spu';
+
+import { computed, ref, watch } from 'vue';
+
+import { CloseCircleFilled, PlusOutlined } from '@vben/icons';
+
+import { Image, Tooltip } from 'ant-design-vue';
+
+import { getSpuDetailList } from '#/api/mall/product/spu';
+
+import SpuTableSelect from './spu-table-select.vue';
+
+interface SpuShowcaseProps {
+  modelValue?: number | number[];
+  limit?: number;
+  disabled?: boolean;
+}
+
+const props = withDefaults(defineProps<SpuShowcaseProps>(), {
+  modelValue: undefined,
+  limit: Number.MAX_VALUE,
+  disabled: false,
+});
+
+const emit = defineEmits(['update:modelValue', 'change']);
+
+const productSpus = ref<MallSpuApi.Spu[]>([]); // 已选择的商品列表
+const spuTableSelectRef = ref<InstanceType<typeof SpuTableSelect>>(); // 商品选择表格组件引用
+const isMultiple = computed(() => props.limit !== 1); // 是否为多选模式
+
+/** 计算是否可以添加 */
+const canAdd = computed(() => {
+  if (props.disabled) {
+    return false;
+  }
+  if (!props.limit) {
+    return true;
+  }
+  return productSpus.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) {
+      productSpus.value = [];
+      return;
+    }
+    // 只有商品发生变化时才重新查询
+    if (
+      productSpus.value.length === 0 ||
+      productSpus.value.some((spu) => !ids.includes(spu.id!))
+    ) {
+      productSpus.value = await getSpuDetailList(ids);
+    }
+  },
+  { immediate: true },
+);
+
+/** 打开商品选择对话框 */
+function handleOpenSpuSelect() {
+  spuTableSelectRef.value?.open(productSpus.value);
+}
+
+/** 选择商品后触发 */
+function handleSpuSelected(spus: MallSpuApi.Spu | MallSpuApi.Spu[]) {
+  productSpus.value = Array.isArray(spus) ? spus : [spus];
+  emitSpuChange();
+}
+
+/** 删除商品 */
+function handleRemoveSpu(index: number) {
+  productSpus.value.splice(index, 1);
+  emitSpuChange();
+}
+
+/** 触发变更事件 */
+function emitSpuChange() {
+  if (props.limit === 1) {
+    const spu = productSpus.value.length > 0 ? productSpus.value[0] : null;
+    emit('update:modelValue', spu?.id || 0);
+    emit('change', spu);
+  } else {
+    emit(
+      'update:modelValue',
+      productSpus.value.map((spu) => spu.id!),
+    );
+    emit('change', productSpus.value);
+  }
+}
+</script>
+
+<template>
+  <div class="flex flex-wrap items-center gap-2">
+    <!-- 已选商品列表 -->
+    <div
+      v-for="(spu, index) in productSpus"
+      :key="spu.id"
+      class="group relative h-[60px] w-[60px] overflow-hidden rounded-lg"
+    >
+      <Tooltip :title="spu.name">
+        <div class="relative h-full w-full">
+          <Image
+            :src="spu.picUrl"
+            class="h-full w-full rounded-lg object-cover"
+          />
+          <!-- 删除按钮 -->
+          <!-- TODO @AI：还是使用 IconifyIcon：使用自己的 + 图标 -->
+          <CloseCircleFilled
+            v-if="!disabled"
+            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="handleRemoveSpu(index)"
+          />
+        </div>
+      </Tooltip>
+    </div>
+
+    <!-- 添加商品按钮 -->
+    <Tooltip v-if="canAdd" title="选择商品">
+      <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="handleOpenSpuSelect"
+      >
+        <!-- TODO @AI：还是使用 IconifyIcon：使用自己的 + 图标 -->
+        <PlusOutlined class="text-xl text-gray-400" />
+      </div>
+    </Tooltip>
+  </div>
+
+  <!-- 商品选择对话框 -->
+  <SpuTableSelect
+    ref="spuTableSelectRef"
+    :multiple="isMultiple"
+    @change="handleSpuSelected"
+  />
+</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
new file mode 100644
index 000000000..6647ae649
--- /dev/null
+++ b/apps/web-antd/src/views/mall/product/spu/components/spu-table-select.vue
@@ -0,0 +1,225 @@
+<!-- SPU 商品选择弹窗组件 -->
+<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 { MallSpuApi } from '#/api/mall/product/spu';
+
+import { computed, onMounted, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { handleTree } from '@vben/utils';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getCategoryList } from '#/api/mall/product/category';
+import { getSpuPage } from '#/api/mall/product/spu';
+import { getRangePickerDefaultProps } from '#/utils';
+
+interface SpuTableSelectProps {
+  multiple?: boolean; // 是否单选：true - checkbox；false - radio
+}
+
+const props = withDefaults(defineProps<SpuTableSelectProps>(), {
+  multiple: false,
+});
+
+const emit = defineEmits<{
+  change: [spu: MallSpuApi.Spu | MallSpuApi.Spu[]];
+}>();
+
+const categoryList = ref<MallCategoryApi.Category[]>([]); // 分类列表
+const categoryTreeList = ref<any[]>([]); // 分类树
+
+/** 单选：处理选中变化 */
+function handleRadioChange() {
+  const selectedRow = gridApi.grid.getRadioRecord() as MallSpuApi.Spu;
+  if (selectedRow) {
+    emit('change', selectedRow);
+    modalApi.close();
+  }
+}
+
+/** 搜索表单 Schema */
+const formSchema = computed<VbenFormSchema[]>(() => [
+  {
+    fieldName: 'name',
+    label: '商品名称',
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入商品名称',
+      allowClear: true,
+    },
+  },
+  {
+    fieldName: 'categoryId',
+    label: '商品分类',
+    component: 'TreeSelect',
+    // TODO @芋艿：可能要测试下；
+    componentProps: {
+      treeData: categoryTreeList,
+      fieldNames: {
+        label: 'name',
+        value: 'id',
+      },
+      treeCheckStrictly: true,
+      placeholder: '请选择商品分类',
+      allowClear: true,
+      showSearch: true,
+      treeNodeFilterProp: 'name',
+    },
+  },
+  {
+    fieldName: 'createTime',
+    label: '创建时间',
+    component: 'RangePicker',
+    componentProps: {
+      ...getRangePickerDefaultProps(),
+      allowClear: 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: 'name',
+      title: '商品名称',
+      minWidth: 200,
+    },
+    {
+      field: 'categoryId',
+      title: '商品分类',
+      minWidth: 120,
+      formatter: ({ cellValue }) => {
+        const category = categoryList.value?.find((c) => c.id === cellValue);
+        return category?.name || '-';
+      },
+    },
+  );
+  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 getSpuPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            tabType: 0,
+            ...formValues,
+          });
+        },
+      },
+    },
+  },
+  gridEvents: {
+    radioChange: handleRadioChange,
+  },
+});
+
+const [Modal, modalApi] = useVbenModal({
+  destroyOnClose: true,
+  showConfirmButton: props.multiple, // 特殊：radio 单选情况下，走 handleRadioChange 处理。
+  onConfirm: () => {
+    const selectedRows = gridApi.grid.getCheckboxRecords() as MallSpuApi.Spu[];
+    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<MallSpuApi.Spu | MallSpuApi.Spu[]>();
+    if (props.multiple && Array.isArray(data) && data.length > 0) {
+      setTimeout(() => {
+        const tableData = gridApi.grid.getTableData().fullData;
+        data.forEach((spu) => {
+          const row = tableData.find(
+            (item: MallSpuApi.Spu) => item.id === spu.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: MallSpuApi.Spu) => item.id === data.id,
+        );
+        if (row) {
+          gridApi.grid.setRadioRow(row);
+        }
+      }, 300);
+    }
+  },
+});
+
+/** 对外暴露的方法 */
+defineExpose({
+  open: (data?: MallSpuApi.Spu | MallSpuApi.Spu[]) => {
+    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-antd/src/views/mall/product/spu/form/index.vue b/apps/web-antd/src/views/mall/product/spu/form/index.vue
index 8e9144cca..78c5d6a4b 100644
--- a/apps/web-antd/src/views/mall/product/spu/form/index.vue
+++ b/apps/web-antd/src/views/mall/product/spu/form/index.vue
@@ -128,10 +128,6 @@ const [InfoForm, infoFormApi] = useVbenForm({
 
 const [SkuForm, skuFormApi] = useVbenForm({
   commonConfig: {
-    componentProps: {
-      class: 'w-full',
-    },
-    formItemClass: 'col-span-2',
     labelWidth: 120,
   },
   layout: 'horizontal',
@@ -364,6 +360,7 @@ onMounted(async () => {
           <template #singleSkuList>
             <SkuList
               ref="skuListRef"
+              class="w-full"
               :is-detail="isDetail"
               :prop-form-data="formData"
               :property-list="propertyList"
diff --git a/apps/web-antd/src/views/mall/product/spu/form/modules/sku-list.vue b/apps/web-antd/src/views/mall/product/spu/form/modules/sku-list.vue
index b3df262c1..efede6a5f 100644
--- a/apps/web-antd/src/views/mall/product/spu/form/modules/sku-list.vue
+++ b/apps/web-antd/src/views/mall/product/spu/form/modules/sku-list.vue
@@ -7,7 +7,12 @@ import type { MallSpuApi } from '#/api/mall/product/spu';
 
 import { ref, watch } from 'vue';
 
-import { copyValueToTarget, formatToFraction, isEmpty } from '@vben/utils';
+import {
+  copyValueToTarget,
+  formatToFraction,
+  getNestedValue,
+  isEmpty,
+} from '@vben/utils';
 
 import { Button, Image, Input, InputNumber, message } from 'ant-design-vue';
 
@@ -43,9 +48,12 @@ const emit = defineEmits<{
 
 const { isBatch, isDetail, isComponent, isActivityComponent } = props;
 
-const formData: Ref<MallSpuApi.Spu | undefined> = ref<MallSpuApi.Spu>(); // 表单数据
-const skuList = ref<MallSpuApi.Sku[]>([
-  {
+const formData: Ref<MallSpuApi.Spu | undefined> = ref<MallSpuApi.Spu>();
+const tableHeaders = ref<{ label: string; prop: string }[]>([]);
+
+/** 创建空 SKU 数据 */
+function createEmptySku(): MallSpuApi.Sku {
+  return {
     price: 0,
     marketPrice: 0,
     costPrice: 0,
@@ -56,8 +64,10 @@ const skuList = ref<MallSpuApi.Sku[]>([
     volume: 0,
     firstBrokeragePrice: 0,
     secondBrokeragePrice: 0,
-  },
-]); // 批量添加时的临时数据
+  };
+}
+
+const skuList = ref<MallSpuApi.Sku[]>([createEmptySku()]);
 
 /** 批量添加 */
 function batchAdd() {
@@ -79,34 +89,33 @@ function validateProperty() {
   }
 }
 
-/** 删除 sku */
+/** 删除 SKU */
 function deleteSku(row: MallSpuApi.Sku) {
   const index = formData.value!.skus!.findIndex(
-    // 直接把列表转成字符串比较
     (sku: MallSpuApi.Sku) =>
       JSON.stringify(sku.properties) === JSON.stringify(row.properties),
   );
-  formData.value!.skus!.splice(index, 1);
+  if (index !== -1) {
+    formData.value!.skus!.splice(index, 1);
+  }
 }
 
-const tableHeaders = ref<{ label: string; prop: string }[]>([]); // 多属性表头
-
-/** 保存时，每个商品规格的表单要校验下。例如说,销售金额最低是 0.01 这种 */
+/** 校验 SKU 数据：保存时，每个商品规格的表单要校验。例如：销售金额最低是 0.01 */
 function validateSku() {
   validateProperty();
   let warningInfo = '请检查商品各行相关属性配置，';
-  let validate = true; // 默认通过
+  let validate = true;
+
   for (const sku of formData.value!.skus!) {
-    // 作为活动组件的校验
     for (const rule of props?.ruleConfig as RuleConfig[]) {
-      const arg = getValue(sku, rule.name);
-      if (!rule.rule(arg)) {
-        validate = false; // 只要有一个不通过则直接不通过
+      const value = getNestedValue(sku, rule.name);
+      if (!rule.rule(value)) {
+        validate = false;
         warningInfo += rule.message;
         break;
       }
     }
-    // 只要有一个不通过则结束后续的校验
+
     if (!validate) {
       message.warning(warningInfo);
       throw new Error(warningInfo);
@@ -114,21 +123,6 @@ function validateSku() {
   }
 }
 
-// TODO @puhui999：是不是可以通过 getNestedValue  简化？
-function getValue(obj: any, arg: string): unknown {
-  const keys = arg.split('.');
-  let value: any = obj;
-  for (const key of keys) {
-    if (value && typeof value === 'object' && key in value) {
-      value = value[key];
-    } else {
-      value = undefined;
-      break;
-    }
-  }
-  return value;
-}
-
 /**
  * 选择时触发
  *
@@ -155,7 +149,6 @@ watch(
 
 /** 生成表数据 */
 function generateTableData(propertyList: PropertyAndValues[]) {
-  // 构建数据结构
   const propertyValues = propertyList.map((item: PropertyAndValues) =>
     (item.values || []).map((v: { id: number; name: string }) => ({
       propertyId: item.id,
@@ -164,35 +157,30 @@ function generateTableData(propertyList: PropertyAndValues[]) {
       valueName: v.name,
     })),
   );
+
   const buildSkuList = build(propertyValues);
+
   // 如果回显的 sku 属性和添加的属性不一致则重置 skus 列表
   if (!validateData(propertyList)) {
-    // 如果不一致则重置表数据，默认添加新的属性重新生成 sku 列表
     formData.value!.skus = [];
   }
+
   for (const item of buildSkuList) {
+    const properties = Array.isArray(item) ? item : [item];
     const row = {
-      properties: Array.isArray(item) ? item : [item], // 如果只有一个属性的话返回的是一个 property 对象
-      price: 0,
-      marketPrice: 0,
-      costPrice: 0,
-      barCode: '',
-      picUrl: '',
-      stock: 0,
-      weight: 0,
-      volume: 0,
-      firstBrokeragePrice: 0,
-      secondBrokeragePrice: 0,
+      ...createEmptySku(),
+      properties,
     };
+
     // 如果存在属性相同的 sku 则不做处理
-    const index = formData.value!.skus!.findIndex(
+    const exists = formData.value!.skus!.some(
       (sku: MallSpuApi.Sku) =>
         JSON.stringify(sku.properties) === JSON.stringify(row.properties),
     );
-    if (index !== -1) {
-      continue;
+
+    if (!exists) {
+      formData.value!.skus!.push(row);
     }
-    formData.value!.skus!.push(row);
   }
 }
 
@@ -224,7 +212,9 @@ function build(
     const result: MallSpuApi.Property[][] = [];
     const rest = build(propertyValuesList.slice(1));
     const firstList = propertyValuesList[0];
-    if (!firstList) return [];
+    if (!firstList) {
+      return [];
+    }
 
     for (const element of firstList) {
       for (const element_ of rest) {
@@ -248,43 +238,33 @@ watch(
     if (!formData.value!.specType) {
       return;
     }
+
     // 如果当前组件作为批量添加数据使用，则重置表数据
     if (props.isBatch) {
-      skuList.value = [
-        {
-          price: 0,
-          marketPrice: 0,
-          costPrice: 0,
-          barCode: '',
-          picUrl: '',
-          stock: 0,
-          weight: 0,
-          volume: 0,
-          firstBrokeragePrice: 0,
-          secondBrokeragePrice: 0,
-        },
-      ];
+      skuList.value = [createEmptySku()];
     }
 
     // 判断代理对象是否为空
     if (JSON.stringify(propertyList) === '[]') {
       return;
     }
-    // 重置表头
-    tableHeaders.value = [];
-    // 生成表头
-    propertyList.forEach((item, index) => {
-      // name加属性项index区分属性值
-      tableHeaders.value.push({ prop: `name${index}`, label: item.name });
-    });
+
+    // 重置并生成表头
+    tableHeaders.value = propertyList.map((item, index) => ({
+      prop: `name${index}`,
+      label: item.name,
+    }));
+
     // 如果回显的 sku 属性和添加的属性一致则不处理
     if (validateData(propertyList)) {
       return;
     }
+
     // 添加新属性没有属性值也不做处理
     if (propertyList.some((item) => !item.values || isEmpty(item.values))) {
       return;
     }
+
     // 生成 table 数据，即 sku 列表
     generateTableData(propertyList);
   },
@@ -296,26 +276,35 @@ watch(
 
 const activitySkuListRef = ref();
 
+/** 获取 SKU 表格引用 */
 function getSkuTableRef() {
   return activitySkuListRef.value;
 }
 
-defineExpose({ generateTableData, validateSku, getSkuTableRef });
+defineExpose({
+  generateTableData,
+  validateSku,
+  getSkuTableRef,
+});
 </script>
 
 <template>
-  <div>
+  <div class="w-full">
     <!-- 情况一：添加/修改 -->
-    <!-- TODO @puhui999：有可以通过 grid 来做么？主要考虑，这样不直接使用 vxe 标签，抽象程度更高； -->
     <VxeTable
       v-if="!isDetail && !isActivityComponent"
       :data="isBatch ? skuList : formData?.skus || []"
       border
       max-height="500"
+      :column-config="{
+        resizable: true,
+      }"
+      :resizable-config="{
+        dragMode: 'fixed',
+      }"
       size="small"
-      class="w-full"
     >
-      <VxeColumn align="center" title="图片" min-width="120">
+      <VxeColumn align="center" title="图片" width="120" fixed="left">
         <template #default="{ row }">
           <ImageUpload
             v-model:value="row.picUrl"
@@ -332,7 +321,8 @@ defineExpose({ generateTableData, validateSku, getSkuTableRef });
           :key="index"
           :title="item.label"
           align="center"
-          min-width="120"
+          fixed="left"
+          min-width="80"
         >
           <template #default="{ row }">
             <span class="font-bold text-[#40aaff]">
@@ -341,12 +331,12 @@ defineExpose({ generateTableData, validateSku, getSkuTableRef });
           </template>
         </VxeColumn>
       </template>
-      <VxeColumn align="center" title="商品条码" min-width="168">
+      <VxeColumn align="center" title="商品条码" width="168">
         <template #default="{ row }">
           <Input v-model:value="row.barCode" class="w-full" />
         </template>
       </VxeColumn>
-      <VxeColumn align="center" title="销售价" min-width="168">
+      <VxeColumn align="center" title="销售价" width="168">
         <template #default="{ row }">
           <InputNumber
             v-model:value="row.price"
@@ -357,7 +347,7 @@ defineExpose({ generateTableData, validateSku, getSkuTableRef });
           />
         </template>
       </VxeColumn>
-      <VxeColumn align="center" title="市场价" min-width="168">
+      <VxeColumn align="center" title="市场价" width="168">
         <template #default="{ row }">
           <InputNumber
             v-model:value="row.marketPrice"
@@ -368,7 +358,7 @@ defineExpose({ generateTableData, validateSku, getSkuTableRef });
           />
         </template>
       </VxeColumn>
-      <VxeColumn align="center" title="成本价" min-width="168">
+      <VxeColumn align="center" title="成本价" width="168">
         <template #default="{ row }">
           <InputNumber
             v-model:value="row.costPrice"
@@ -379,12 +369,12 @@ defineExpose({ generateTableData, validateSku, getSkuTableRef });
           />
         </template>
       </VxeColumn>
-      <VxeColumn align="center" title="库存" min-width="168">
+      <VxeColumn align="center" title="库存" width="168">
         <template #default="{ row }">
           <InputNumber v-model:value="row.stock" :min="0" class="w-full" />
         </template>
       </VxeColumn>
-      <VxeColumn align="center" title="重量(kg)" min-width="168">
+      <VxeColumn align="center" title="重量(kg)" width="168">
         <template #default="{ row }">
           <InputNumber
             v-model:value="row.weight"
@@ -395,7 +385,7 @@ defineExpose({ generateTableData, validateSku, getSkuTableRef });
           />
         </template>
       </VxeColumn>
-      <VxeColumn align="center" title="体积(m^3)" min-width="168">
+      <VxeColumn align="center" title="体积(m^3)" width="168">
         <template #default="{ row }">
           <InputNumber
             v-model:value="row.volume"
@@ -407,7 +397,7 @@ defineExpose({ generateTableData, validateSku, getSkuTableRef });
         </template>
       </VxeColumn>
       <template v-if="formData?.subCommissionType">
-        <VxeColumn align="center" title="一级返佣(元)" min-width="168">
+        <VxeColumn align="center" title="一级返佣(元)" width="168">
           <template #default="{ row }">
             <InputNumber
               v-model:value="row.firstBrokeragePrice"
@@ -418,7 +408,7 @@ defineExpose({ generateTableData, validateSku, getSkuTableRef });
             />
           </template>
         </VxeColumn>
-        <VxeColumn align="center" title="二级返佣(元)" min-width="168">
+        <VxeColumn align="center" title="二级返佣(元)" width="168">
           <template #default="{ row }">
             <InputNumber
               v-model:value="row.secondBrokeragePrice"
@@ -462,13 +452,18 @@ defineExpose({ generateTableData, validateSku, getSkuTableRef });
       border
       max-height="500"
       size="small"
-      class="w-full"
+      :column-config="{
+        resizable: true,
+      }"
+      :resizable-config="{
+        dragMode: 'fixed',
+      }"
       :checkbox-config="isComponent ? { reserve: true } : undefined"
       @checkbox-change="handleSelectionChange"
       @checkbox-all="handleSelectionChange"
     >
       <VxeColumn v-if="isComponent" type="checkbox" width="45" />
-      <VxeColumn align="center" title="图片" min-width="120">
+      <VxeColumn align="center" title="图片" max-width="140" fixed="left">
         <template #default="{ row }">
           <Image
             v-if="row.picUrl"
@@ -485,7 +480,8 @@ defineExpose({ generateTableData, validateSku, getSkuTableRef });
           :key="index"
           :title="item.label"
           align="center"
-          min-width="80"
+          max-width="80"
+          fixed="left"
         >
           <template #default="{ row }">
             <span class="font-bold text-[#40aaff]">
@@ -494,48 +490,48 @@ defineExpose({ generateTableData, validateSku, getSkuTableRef });
           </template>
         </VxeColumn>
       </template>
-      <VxeColumn align="center" title="商品条码" min-width="100">
+      <VxeColumn align="center" title="商品条码" width="100">
         <template #default="{ row }">
           {{ row.barCode }}
         </template>
       </VxeColumn>
-      <VxeColumn align="center" title="销售价(元)" min-width="80">
+      <VxeColumn align="center" title="销售价(元)" width="80">
         <template #default="{ row }">
           {{ row.price }}
         </template>
       </VxeColumn>
-      <VxeColumn align="center" title="市场价(元)" min-width="80">
+      <VxeColumn align="center" title="市场价(元)" width="80">
         <template #default="{ row }">
           {{ row.marketPrice }}
         </template>
       </VxeColumn>
-      <VxeColumn align="center" title="成本价(元)" min-width="80">
+      <VxeColumn align="center" title="成本价(元)" width="80">
         <template #default="{ row }">
           {{ row.costPrice }}
         </template>
       </VxeColumn>
-      <VxeColumn align="center" title="库存" min-width="80">
+      <VxeColumn align="center" title="库存" width="80">
         <template #default="{ row }">
           {{ row.stock }}
         </template>
       </VxeColumn>
-      <VxeColumn align="center" title="重量(kg)" min-width="80">
+      <VxeColumn align="center" title="重量(kg)" width="80">
         <template #default="{ row }">
           {{ row.weight }}
         </template>
       </VxeColumn>
-      <VxeColumn align="center" title="体积(m^3)" min-width="80">
+      <VxeColumn align="center" title="体积(m^3)" width="80">
         <template #default="{ row }">
           {{ row.volume }}
         </template>
       </VxeColumn>
       <template v-if="formData?.subCommissionType">
-        <VxeColumn align="center" title="一级返佣(元)" min-width="80">
+        <VxeColumn align="center" title="一级返佣(元)" width="80">
           <template #default="{ row }">
             {{ row.firstBrokeragePrice }}
           </template>
         </VxeColumn>
-        <VxeColumn align="center" title="二级返佣(元)" min-width="80">
+        <VxeColumn align="center" title="二级返佣(元)" width="80">
           <template #default="{ row }">
             {{ row.secondBrokeragePrice }}
           </template>
@@ -550,10 +546,15 @@ defineExpose({ generateTableData, validateSku, getSkuTableRef });
       border
       max-height="500"
       size="small"
-      class="w-full"
+      :column-config="{
+        resizable: true,
+      }"
+      :resizable-config="{
+        dragMode: 'fixed',
+      }"
     >
-      <VxeColumn v-if="isComponent" type="checkbox" width="45" />
-      <VxeColumn align="center" title="图片" min-width="120">
+      <VxeColumn v-if="isComponent" type="checkbox" width="45" fixed="left" />
+      <VxeColumn align="center" title="图片" max-width="140" fixed="left">
         <template #default="{ row }">
           <Image
             :src="row.picUrl"
@@ -569,7 +570,8 @@ defineExpose({ generateTableData, validateSku, getSkuTableRef });
           :key="index"
           :title="item.label"
           align="center"
-          min-width="80"
+          width="80"
+          fixed="left"
         >
           <template #default="{ row }">
             <span class="font-bold text-[#40aaff]">
@@ -578,27 +580,27 @@ defineExpose({ generateTableData, validateSku, getSkuTableRef });
           </template>
         </VxeColumn>
       </template>
-      <VxeColumn align="center" title="商品条码" min-width="100">
+      <VxeColumn align="center" title="商品条码" width="100">
         <template #default="{ row }">
           {{ row.barCode }}
         </template>
       </VxeColumn>
-      <VxeColumn align="center" title="销售价(元)" min-width="80">
+      <VxeColumn align="center" title="销售价(元)" width="80">
         <template #default="{ row }">
           {{ formatToFraction(row.price) }}
         </template>
       </VxeColumn>
-      <VxeColumn align="center" title="市场价(元)" min-width="80">
+      <VxeColumn align="center" title="市场价(元)" width="80">
         <template #default="{ row }">
           {{ formatToFraction(row.marketPrice) }}
         </template>
       </VxeColumn>
-      <VxeColumn align="center" title="成本价(元)" min-width="80">
+      <VxeColumn align="center" title="成本价(元)" width="80">
         <template #default="{ row }">
           {{ formatToFraction(row.costPrice) }}
         </template>
       </VxeColumn>
-      <VxeColumn align="center" title="库存" min-width="80">
+      <VxeColumn align="center" title="库存" width="80">
         <template #default="{ row }">
           {{ row.stock }}
         </template>
diff --git a/apps/web-antd/src/views/mall/product/spu/form/modules/spu-table-select.vue b/apps/web-antd/src/views/mall/product/spu/form/modules/spu-table-select.vue
deleted file mode 100644
index 19cb654d2..000000000
--- a/apps/web-antd/src/views/mall/product/spu/form/modules/spu-table-select.vue
+++ /dev/null
@@ -1,346 +0,0 @@
-<!-- SPU 商品选择弹窗组件 -->
-<script lang="ts" setup>
-// TODO @puhui999：这个是不是可以放到 components 里？，和商品发布，关系不大
-import type { CheckboxChangeEvent } from 'ant-design-vue/es/checkbox/interface';
-
-import type { VbenFormSchema } from '#/adapter/form';
-import type { VxeGridProps } from '#/adapter/vxe-table';
-import type { MallSpuApi } from '#/api/mall/product/spu';
-
-import { computed, onMounted, ref } from 'vue';
-
-import { useVbenModal } from '@vben/common-ui';
-import { handleTree } from '@vben/utils';
-
-import { Checkbox, Radio } from 'ant-design-vue';
-
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
-import { getCategoryList } from '#/api/mall/product/category';
-import { getSpuPage } from '#/api/mall/product/spu';
-import { getRangePickerDefaultProps } from '#/utils';
-
-interface SpuTableSelectProps {
-  multiple?: boolean; // 是否多选模式
-}
-
-const props = withDefaults(defineProps<SpuTableSelectProps>(), {
-  multiple: false,
-});
-
-const emit = defineEmits<{
-  change: [spu: MallSpuApi.Spu | MallSpuApi.Spu[]];
-}>();
-
-const selectedSpuId = ref<number>(); // 单选：选中的 SPU ID
-const checkedStatus = ref<Record<number, boolean>>({}); // 多选：选中状态 map
-const checkedSpus = ref<MallSpuApi.Spu[]>([]); // 多选：选中的 SPU 列表
-const isCheckAll = ref(false); // 多选：全选状态
-const isIndeterminate = ref(false); // 多选：半选状态
-
-const categoryList = ref<any[]>([]); // 分类列表（扁平）
-const categoryTreeList = ref<any[]>([]); // 分类树
-
-const formSchema = computed<VbenFormSchema[]>(() => {
-  return [
-    {
-      fieldName: 'name',
-      label: '商品名称',
-      component: 'Input',
-      componentProps: {
-        placeholder: '请输入商品名称',
-        allowClear: true,
-      },
-    },
-    {
-      fieldName: 'categoryId',
-      label: '商品分类',
-      component: 'TreeSelect',
-      componentProps: {
-        treeData: categoryTreeList.value,
-        fieldNames: {
-          label: 'name',
-          value: 'id',
-        },
-        treeCheckStrictly: true,
-        placeholder: '请选择商品分类',
-        allowClear: true,
-        showSearch: true,
-        treeNodeFilterProp: 'name',
-      },
-    },
-    {
-      fieldName: 'createTime',
-      label: '创建时间',
-      component: 'RangePicker',
-      componentProps: {
-        ...getRangePickerDefaultProps(),
-        allowClear: true,
-      },
-    },
-  ];
-});
-
-const gridColumns = computed<VxeGridProps['columns']>(() => {
-  const columns: VxeGridProps['columns'] = [];
-
-  // 多选模式：添加多选列
-  if (props.multiple) {
-    columns.push({
-      field: 'checkbox',
-      title: '',
-      width: 55,
-      align: 'center',
-      slots: { default: 'checkbox-column', header: 'checkbox-header' },
-    });
-  } else {
-    // 单选模式：添加单选列
-    columns.push({
-      field: 'radio',
-      title: '#',
-      width: 55,
-      align: 'center',
-      slots: { default: 'radio-column' },
-    });
-  }
-
-  // 其它列
-  columns.push(
-    {
-      field: 'id',
-      title: '商品编号',
-      minWidth: 100,
-      align: 'center',
-    },
-    {
-      field: 'picUrl',
-      title: '商品图',
-      width: 100,
-      align: 'center',
-      cellRender: {
-        name: 'CellImage',
-      },
-    },
-    {
-      field: 'name',
-      title: '商品名称',
-      minWidth: 200,
-    },
-    {
-      field: 'categoryId',
-      title: '商品分类',
-      minWidth: 120,
-      formatter: ({ cellValue }) => {
-        const category = categoryList.value?.find((c) => c.id === cellValue);
-        return category?.name || '-';
-      },
-    },
-  );
-
-  return columns;
-});
-
-const [Grid, gridApi] = useVbenVxeGrid({
-  formOptions: {
-    schema: formSchema.value,
-    layout: 'horizontal',
-    collapsed: false,
-  },
-  gridOptions: {
-    columns: gridColumns.value,
-    height: 500,
-    border: true,
-    showOverflow: true,
-    proxyConfig: {
-      ajax: {
-        async query({ page }: any, formValues: any) {
-          // TODO @puhui999：这里是不是不 try catch？
-          try {
-            const params = {
-              pageNo: page.currentPage,
-              pageSize: page.pageSize,
-              tabType: 0, // 默认获取上架的商品
-              name: formValues.name || undefined,
-              categoryId: formValues.categoryId || undefined,
-              createTime: formValues.createTime || undefined,
-            };
-
-            // TODO @puhui999：一次性的，是不是不声明 params，直接放到 getSpuPage 里？
-            const data = await getSpuPage(params);
-
-            // 初始化多选状态
-            if (props.multiple && data.list) {
-              data.list.forEach((spu) => {
-                if (checkedStatus.value[spu.id!] === undefined) {
-                  checkedStatus.value[spu.id!] = false;
-                }
-              });
-              calculateIsCheckAll();
-            }
-
-            return {
-              items: data.list || [],
-              total: data.total || 0,
-            };
-          } catch (error) {
-            console.error('加载商品数据失败:', error);
-            return { items: [], total: 0 };
-          }
-        },
-      },
-    },
-  },
-});
-
-// TODO @puhui999：如下的选中方法，可以因为 Grid 做简化么？
-/** 单选：处理选中 */
-function handleSingleSelected(row: MallSpuApi.Spu) {
-  selectedSpuId.value = row.id;
-  emit('change', row);
-  modalApi.close();
-}
-
-/** 多选：全选/全不选 */
-function handleCheckAll(e: CheckboxChangeEvent) {
-  const checked = e.target.checked;
-  isCheckAll.value = checked;
-  isIndeterminate.value = false;
-
-  const currentList = gridApi.grid.getData();
-  currentList.forEach((spu: MallSpuApi.Spu) => {
-    handleCheckOne(checked, spu, false);
-  });
-  calculateIsCheckAll();
-}
-
-/** 多选：选中单个 */
-function handleCheckOne(
-  checked: boolean,
-  spu: MallSpuApi.Spu,
-  needCalc = true,
-) {
-  if (checked) {
-    // 避免重复添加
-    const exists = checkedSpus.value.some((item) => item.id === spu.id);
-    if (!exists) {
-      checkedSpus.value.push(spu);
-    }
-    checkedStatus.value[spu.id!] = true;
-  } else {
-    const index = checkedSpus.value.findIndex((item) => item.id === spu.id);
-    if (index !== -1) {
-      checkedSpus.value.splice(index, 1);
-    }
-    checkedStatus.value[spu.id!] = false;
-    isCheckAll.value = false;
-  }
-
-  if (needCalc) {
-    calculateIsCheckAll();
-  }
-}
-
-/** 多选：计算全选状态 */
-function calculateIsCheckAll() {
-  const currentList = gridApi.grid.getData();
-  if (currentList.length === 0) {
-    isCheckAll.value = false;
-    isIndeterminate.value = false;
-    return;
-  }
-
-  const checkedCount = currentList.filter(
-    (spu: MallSpuApi.Spu) => checkedStatus.value[spu.id!],
-  ).length;
-
-  isCheckAll.value = checkedCount === currentList.length;
-  isIndeterminate.value = checkedCount > 0 && checkedCount < currentList.length;
-}
-
-const [Modal, modalApi] = useVbenModal({
-  destroyOnClose: true,
-  // 多选模式时显示确认按钮
-  onConfirm: props.multiple
-    ? () => {
-        emit('change', [...checkedSpus.value]);
-        modalApi.close();
-      }
-    : undefined,
-  async onOpenChange(isOpen: boolean) {
-    if (!isOpen) {
-      // TODO @puhui999：是不是直接清理，不要判断 selectedSpuId.value
-      if (!props.multiple) {
-        selectedSpuId.value = undefined;
-      }
-      return;
-    }
-
-    // 打开时处理初始数据
-    const data = modalApi.getData<MallSpuApi.Spu | MallSpuApi.Spu[]>();
-
-    // 重置多选状态
-    if (props.multiple) {
-      checkedSpus.value = [];
-      checkedStatus.value = {};
-      isCheckAll.value = false;
-      isIndeterminate.value = false;
-      // 恢复已选中的数据
-      if (Array.isArray(data) && data.length > 0) {
-        checkedSpus.value = [...data];
-        checkedStatus.value = Object.fromEntries(
-          data.map((spu) => [spu.id!, true]),
-        );
-      }
-    } else {
-      // 单选模式：恢复已选中的 ID
-      if (data && !Array.isArray(data)) {
-        selectedSpuId.value = data.id;
-      }
-    }
-
-    // 触发查询
-    // TODO @puhui999：貌似不用这里再查询一次，100% 会查询的，记忆中是；
-    await gridApi.query();
-  },
-});
-
-/** 初始化分类数据 */
-onMounted(async () => {
-  categoryList.value = await getCategoryList({});
-  categoryTreeList.value = handleTree(categoryList.value, 'id', 'parentId');
-});
-</script>
-
-<template>
-  <Modal :class="props.multiple ? 'w-[900px]' : 'w-[800px]'" title="选择商品">
-    <Grid>
-      <!-- 单选列 -->
-      <template v-if="!props.multiple" #radio-column="{ row }">
-        <Radio
-          :checked="selectedSpuId === row.id"
-          :value="row.id"
-          class="cursor-pointer"
-          @click="handleSingleSelected(row)"
-        />
-      </template>
-
-      <!-- 多选表头 -->
-      <template v-if="props.multiple" #checkbox-header>
-        <Checkbox
-          v-model:checked="isCheckAll"
-          :indeterminate="isIndeterminate"
-          class="cursor-pointer"
-          @change="handleCheckAll"
-        />
-      </template>
-
-      <!-- 多选列 -->
-      <template v-if="props.multiple" #checkbox-column="{ row }">
-        <Checkbox
-          v-model:checked="checkedStatus[row.id]"
-          class="cursor-pointer"
-          @change="(e) => handleCheckOne(e.target.checked, row)"
-        />
-      </template>
-    </Grid>
-  </Modal>
-</template>
diff --git a/apps/web-antd/src/views/mall/promotion/banner/data.ts b/apps/web-antd/src/views/mall/promotion/banner/data.ts
index a168e6492..0490be5dd 100644
--- a/apps/web-antd/src/views/mall/promotion/banner/data.ts
+++ b/apps/web-antd/src/views/mall/promotion/banner/data.ts
@@ -145,7 +145,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
       cellRender: {
         name: 'CellDict',
         props: {
-          dictType: DICT_TYPE.COMMON_STATUS,
+          type: DICT_TYPE.COMMON_STATUS,
         },
       },
     },
@@ -156,7 +156,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
       cellRender: {
         name: 'CellDict',
         props: {
-          dictType: DICT_TYPE.PROMOTION_BANNER_POSITION,
+          type: DICT_TYPE.PROMOTION_BANNER_POSITION,
         },
       },
     },
diff --git a/apps/web-antd/src/views/mall/promotion/components/app-link-input/app-link-select-dialog.vue b/apps/web-antd/src/views/mall/promotion/components/app-link-input/app-link-select-dialog.vue
index 2cbd8d12d..949087212 100644
--- a/apps/web-antd/src/views/mall/promotion/components/app-link-input/app-link-select-dialog.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/app-link-input/app-link-select-dialog.vue
@@ -37,9 +37,12 @@ const detailSelectDialog = ref<{
   type: undefined,
 }); // 详情选择对话框
 
-/** 打开弹窗 */
 const dialogVisible = ref(false);
-const open = (link: string) => {
+
+defineExpose({ open });
+
+/** 打开弹窗 */
+async function open(link: string) {
   activeAppLink.value.path = link;
   dialogVisible.value = true;
   // 滚动到当前的链接
@@ -54,19 +57,18 @@ const open = (link: string) => {
   );
   if (group) {
     // 使用 nextTick 的原因：可能 Dom 还没生成，导致滚动失败
-    nextTick(() => handleGroupSelected(group.name));
+    await nextTick();
+    handleGroupSelected(group.name);
   }
-};
-defineExpose({ open });
+}
 
 /** 处理 APP 链接选中 */
-const handleAppLinkSelected = (appLink: AppLink) => {
+function handleAppLinkSelected(appLink: AppLink) {
   if (!isSameLink(appLink.path, activeAppLink.value.path)) {
     activeAppLink.value = appLink;
   }
   switch (appLink.type) {
     case APP_LINK_TYPE_ENUM.PRODUCT_CATEGORY_LIST: {
-      detailSelectDialog.value.visible = true;
       detailSelectDialog.value.type = appLink.type;
       // 返显
       detailSelectDialog.value.id =
@@ -74,26 +76,30 @@ const handleAppLinkSelected = (appLink: AppLink) => {
           'id',
           `http://127.0.0.1${activeAppLink.value.path}`,
         ) || undefined;
+      detailSelectDialog.value.visible = true;
       break;
     }
     default: {
       break;
     }
   }
-};
+}
 
+/** 处理确认提交 */
 function handleSubmit() {
-  dialogVisible.value = false;
   emit('change', activeAppLink.value.path);
   emit('appLinkChange', activeAppLink.value);
+  dialogVisible.value = false;
 }
 
 /**
  * 处理右侧链接列表滚动
+ *
  * @param {object} param0 滚动事件参数
  * @param {number} param0.scrollTop 滚动条的位置
  */
-function handleScroll({ scrollTop }: { scrollTop: number }) {
+function handleScroll(event: Event) {
+  const scrollTop = (event.target as HTMLDivElement).scrollTop;
   const titleEl = groupTitleRefs.value.find((titleEl: HTMLInputElement) => {
     // 获取标题的位置信息
     const { offsetHeight, offsetTop } = titleEl;
@@ -137,27 +143,33 @@ function isSameLink(link1: string, link2: string) {
 
 /** 处理详情选择 */
 function handleProductCategorySelected(id: number) {
-  // TODO @AI：这里有点问题；activeAppLink 地址；
+  // 生成 activeAppLink
   const url = new URL(activeAppLink.value.path, 'http://127.0.0.1');
-  // 修改 id 参数
   url.searchParams.set('id', `${id}`);
-  // 排除域名
   activeAppLink.value.path = `${url.pathname}${url.search}`;
-  // 关闭对话框
+
+  // 关闭对话框，并重置 id
   detailSelectDialog.value.visible = false;
-  // 重置 id
   detailSelectDialog.value.id = undefined;
 }
 </script>
 <template>
-  <Modal v-model:open="dialogVisible" title="选择链接" width="65%">
+  <Modal
+    v-model:open="dialogVisible"
+    title="选择链接"
+    width="65%"
+    @ok="handleSubmit"
+  >
     <div class="flex h-[500px] gap-2">
       <!-- 左侧分组列表 -->
-      <div class="flex h-full flex-col overflow-y-auto" ref="groupScrollbar">
+      <div
+        class="flex h-full flex-col overflow-y-auto border-r border-gray-200 pr-2"
+        ref="groupScrollbar"
+      >
         <Button
           v-for="(group, groupIndex) in APP_LINK_GROUP_LIST"
           :key="groupIndex"
-          class="mb-1 ml-0 mr-4 w-[90px] justify-start"
+          class="!ml-0 mb-1 mr-4 !justify-start"
           :class="[{ active: activeGroup === group.name }]"
           ref="groupBtnRefs"
           :type="activeGroup === group.name ? 'primary' : 'default'"
@@ -168,16 +180,19 @@ function handleProductCategorySelected(id: number) {
       </div>
       <!-- 右侧链接列表 -->
       <div
-        class="h-full flex-1 overflow-y-auto"
+        class="h-full flex-1 overflow-y-auto pl-2"
         @scroll="handleScroll"
         ref="linkScrollbar"
       >
         <div
           v-for="(group, groupIndex) in APP_LINK_GROUP_LIST"
           :key="groupIndex"
+          class="mb-4 border-b border-gray-100 pb-4 last:mb-0 last:border-b-0"
         >
           <!-- 分组标题 -->
-          <div class="font-bold" ref="groupTitleRefs">{{ group.name }}</div>
+          <div class="mb-2 font-bold" ref="groupTitleRefs">
+            {{ group.name }}
+          </div>
           <!-- 链接列表 -->
           <Tooltip
             v-for="(appLink, appLinkIndex) in group.links"
@@ -201,13 +216,9 @@ function handleProductCategorySelected(id: number) {
         </div>
       </div>
     </div>
-    <!-- 底部对话框操作按钮 -->
-    <template #footer>
-      <Button type="primary" @click="handleSubmit">确 定</Button>
-      <Button @click="dialogVisible = false">取 消</Button>
-    </template>
   </Modal>
-  <Modal v-model:open="detailSelectDialog.visible" title="" width="50%">
+
+  <Modal v-model:open="detailSelectDialog.visible" title="选择分类" width="65%">
     <Form class="min-h-[200px]">
       <FormItem
         label="选择分类"
@@ -224,6 +235,7 @@ function handleProductCategorySelected(id: number) {
     </Form>
   </Modal>
 </template>
+
 <style lang="scss" scoped>
 :deep(.ant-btn + .ant-btn) {
   margin-left: 0 !important;
diff --git a/apps/web-antd/src/views/mall/promotion/components/app-link-input/index.vue b/apps/web-antd/src/views/mall/promotion/components/app-link-input/index.vue
index 8be7cada4..3391a41cf 100644
--- a/apps/web-antd/src/views/mall/promotion/components/app-link-input/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/app-link-input/index.vue
@@ -1,14 +1,14 @@
 <script lang="ts" setup>
 import { ref, watch } from 'vue';
 
-import { Button, Input, InputGroup } from 'ant-design-vue';
+import { Button, Input } from 'ant-design-vue';
 
 import AppLinkSelectDialog from './app-link-select-dialog.vue';
 
 /** APP 链接输入框 */
 defineOptions({ name: 'AppLinkInput' });
 
-// 定义属性
+/** 定义属性 */
 const props = defineProps({
   modelValue: {
     type: String,
@@ -23,8 +23,16 @@ const emit = defineEmits<{
 const dialogRef = ref(); // 选择对话框
 
 const appLink = ref(''); // 当前的链接
-const handleOpenDialog = () => dialogRef.value?.open(appLink.value); // 处理打开对话框
-const handleLinkSelected = (link: string) => (appLink.value = link); // 处理 APP 链接选中
+
+/** 处理打开对话框 */
+function handleOpenDialog() {
+  return dialogRef.value?.open(appLink.value);
+}
+
+/** 处理 APP 链接选中 */
+function handleLinkSelected(link: string) {
+  appLink.value = link;
+}
 
 watch(
   () => props.modelValue,
@@ -38,14 +46,15 @@ watch(
 );
 </script>
 <template>
-  <InputGroup compact>
-    <Input
-      v-model:value="appLink"
-      placeholder="输入或选择链接"
-      class="flex-1"
-    />
-    <Button @click="handleOpenDialog">选择</Button>
-  </InputGroup>
-
+  <Input v-model:value="appLink" placeholder="输入或选择链接">
+    <template #addonAfter>
+      <Button
+        @click="handleOpenDialog"
+        class="!border-none !bg-transparent !p-0"
+      >
+        选择
+      </Button>
+    </template>
+  </Input>
   <AppLinkSelectDialog ref="dialogRef" @change="handleLinkSelected" />
 </template>
diff --git a/apps/web-antd/src/views/mall/promotion/components/color-input/index.vue b/apps/web-antd/src/views/mall/promotion/components/color-input/index.vue
index 1ce5abf52..d4745a0ed 100644
--- a/apps/web-antd/src/views/mall/promotion/components/color-input/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/color-input/index.vue
@@ -1,9 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
-// import { PREDEFINE_COLORS } from '@vben/constants';
-
-import { Input, InputGroup } from 'ant-design-vue';
+import { Input } from 'ant-design-vue';
 
 /** 颜色输入框 */
 defineOptions({ name: 'ColorInput' });
@@ -28,12 +26,25 @@ const color = computed({
 </script>
 
 <template>
-  <InputGroup compact>
-    <!-- TODO 芋艿：后续在处理，antd 不支持该组件；
-    <ColorPicker v-model:value="color" :presets="PREDEFINE_COLORS" />
-    -->
-    <Input v-model:value="color" class="flex-1" />
-  </InputGroup>
+  <div class="flex gap-2">
+    <input
+      v-model="color"
+      type="color"
+      class="h-8 w-12 cursor-pointer rounded border border-gray-300"
+    />
+    <Input v-model:value="color" class="flex-1" placeholder="请输入颜色值" />
+  </div>
 </template>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+input[type='color'] {
+  &::-webkit-color-swatch-wrapper {
+    padding: 2px;
+  }
+
+  &::-webkit-color-swatch {
+    border: none;
+    border-radius: 2px;
+  }
+}
+</style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-container-property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-container-property.vue
index 10cf7ae2e..38c475f75 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-container-property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-container-property.vue
@@ -3,11 +3,13 @@ import type { ComponentStyle } from '../util';
 
 import { useVModel } from '@vueuse/core';
 import {
-  Card,
+  Col,
   Form,
   FormItem,
+  InputNumber,
   Radio,
   RadioGroup,
+  Row,
   Slider,
   TabPane,
   Tabs,
@@ -27,7 +29,7 @@ const props = defineProps<{ modelValue: ComponentStyle }>();
 const emit = defineEmits(['update:modelValue']);
 const formData = useVModel(props, 'modelValue', emit);
 
-const treeData = [
+const treeData: any[] = [
   {
     label: '外部边距',
     prop: 'margin',
@@ -96,7 +98,7 @@ const treeData = [
   },
 ];
 
-const handleSliderChange = (prop: string) => {
+function handleSliderChange(prop: string) {
   switch (prop) {
     case 'borderRadius': {
       formData.value.borderTopLeftRadius = formData.value.borderRadius;
@@ -120,7 +122,7 @@ const handleSliderChange = (prop: string) => {
       break;
     }
   }
-};
+}
 </script>
 
 <template>
@@ -131,13 +133,10 @@ const handleSliderChange = (prop: string) => {
     </TabPane>
 
     <!-- 每个组件的通用内容 -->
-    <TabPane tab="样式" key="style">
-      <Card title="组件样式" class="property-group">
-        <Form
-          :model="formData"
-          label-col="{ span: 6 }"
-          wrapper-col="{ span: 18 }"
-        >
+    <TabPane tab="样式" key="style" force-render>
+      <p class="text-lg font-bold">组件样式：</p>
+      <div class="flex flex-col gap-2 rounded-md p-4 shadow-lg">
+        <Form :model="formData">
           <FormItem label="组件背景" name="bgType">
             <RadioGroup v-model:value="formData.bgType">
               <Radio value="color">纯色</Radio>
@@ -160,31 +159,44 @@ const handleSliderChange = (prop: string) => {
               <template #tip>建议宽度 750px</template>
             </UploadImg>
           </FormItem>
-          <Tree
-            :tree-data="treeData"
-            :expand-on-click-node="false"
-            default-expand-all
-          >
-            <template #title="{ data, node }">
+          <Tree :tree-data="treeData" default-expand-all :block-node="true">
+            <template #title="{ dataRef }">
               <FormItem
-                :label="data.label"
-                :name="data.prop"
+                :label="dataRef.label"
+                :name="dataRef.prop"
+                :label-col="
+                  dataRef.children ? { span: 6 } : { span: 5, offset: 1 }
+                "
+                :wrapper-col="dataRef.children ? { span: 18 } : { span: 18 }"
                 class="mb-0 w-full"
               >
-                <Slider
-                  v-model:value="
-                    formData[data.prop as keyof ComponentStyle] as number
-                  "
-                  :max="100"
-                  :min="0"
-                  @change="handleSliderChange(data.prop)"
-                />
+                <Row>
+                  <Col :span="12">
+                    <Slider
+                      v-model:value="
+                        formData[dataRef.prop as keyof ComponentStyle]
+                      "
+                      :max="100"
+                      :min="0"
+                      @change="handleSliderChange(dataRef.prop)"
+                    />
+                  </Col>
+                  <Col :span="4">
+                    <InputNumber
+                      :max="100"
+                      :min="0"
+                      v-model:value="
+                        formData[dataRef.prop as keyof ComponentStyle]
+                      "
+                    />
+                  </Col>
+                </Row>
               </FormItem>
             </template>
           </Tree>
           <slot name="style" :style="formData"></slot>
         </Form>
-      </Card>
+      </div>
     </TabPane>
   </Tabs>
 </template>
@@ -197,4 +209,14 @@ const handleSliderChange = (prop: string) => {
 :deep(.ant-input-number) {
   width: 50px;
 }
+
+:deep(.ant-tree) {
+  .ant-tree-node-content-wrapper {
+    flex: 1;
+  }
+
+  .ant-form-item {
+    margin-bottom: 0;
+  }
+}
 </style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-container.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-container.vue
index fc8546957..6f05d921a 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-container.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-container.vue
@@ -5,7 +5,7 @@ import { computed } from 'vue';
 
 import { IconifyIcon } from '@vben/icons';
 
-import { Button, Tooltip } from 'ant-design-vue';
+import { Button } from 'ant-design-vue';
 
 import { VerticalButtonGroup } from '#/views/mall/promotion/components';
 
@@ -49,9 +49,7 @@ const emits = defineEmits<{
 type DiyComponentWithStyle = DiyComponent<any> & {
   property: { style?: ComponentStyle };
 };
-/**
- * 组件样式
- */
+/** 组件样式 */
 const style = computed(() => {
   const componentStyle = props.component.property.style;
   if (!componentStyle) {
@@ -78,38 +76,29 @@ const style = computed(() => {
   };
 });
 
-/**
- * 移动组件
- * @param direction 移动方向
- */
+/** 移动组件 */
 const handleMoveComponent = (direction: number) => {
   emits('move', direction);
 };
 
-/**
- * 复制组件
- */
+/** 复制组件 */
 const handleCopyComponent = () => {
   emits('copy');
 };
 
-/**
- * 删除组件
- */
+/** 删除组件 */
 const handleDeleteComponent = () => {
   emits('delete');
 };
 </script>
 <template>
-  <div class="component" :class="[{ active }]">
-    <div
-      :style="{
-        ...style,
-      }"
-    >
+  <div class="component relative cursor-move" :class="[{ active }]">
+    <div :style="style">
       <component :is="component.id" :property="component.property" />
     </div>
-    <div class="component-wrap">
+    <div
+      class="component-wrap absolute -bottom-1 -left-0.5 -right-0.5 -top-1 block h-full w-full"
+    >
       <!-- 左侧：组件名（悬浮的小贴条） -->
       <div class="component-name" v-if="component.name">
         {{ component.name }}
@@ -119,33 +108,61 @@ const handleDeleteComponent = () => {
         class="component-toolbar"
         v-if="showToolbar && component.name && active"
       >
-        <VerticalButtonGroup type="primary">
-          <Tooltip title="上移" placement="right">
-            <Button
-              :disabled="!canMoveUp"
-              @click.stop="handleMoveComponent(-1)"
-            >
-              <IconifyIcon icon="ep:arrow-up" />
-            </Button>
-          </Tooltip>
-          <Tooltip title="下移" placement="right">
-            <Button
-              :disabled="!canMoveDown"
-              @click.stop="handleMoveComponent(1)"
-            >
-              <IconifyIcon icon="ep:arrow-down" />
-            </Button>
-          </Tooltip>
-          <Tooltip title="复制" placement="right">
-            <Button @click.stop="handleCopyComponent()">
-              <IconifyIcon icon="ep:copy-document" />
-            </Button>
-          </Tooltip>
-          <Tooltip title="删除" placement="right">
-            <Button @click.stop="handleDeleteComponent()">
-              <IconifyIcon icon="ep:delete" />
-            </Button>
-          </Tooltip>
+        <VerticalButtonGroup size="small">
+          <Button
+            :disabled="!canMoveUp"
+            type="primary"
+            size="small"
+            @click.stop="handleMoveComponent(-1)"
+            v-tippy="{
+              content: '上移',
+              delay: 100,
+              placement: 'right',
+              arrow: true,
+            }"
+          >
+            <IconifyIcon icon="lucide:arrow-up" />
+          </Button>
+          <Button
+            :disabled="!canMoveDown"
+            type="primary"
+            size="small"
+            @click.stop="handleMoveComponent(1)"
+            v-tippy="{
+              content: '下移',
+              delay: 100,
+              placement: 'right',
+              arrow: true,
+            }"
+          >
+            <IconifyIcon icon="lucide:arrow-down" />
+          </Button>
+          <Button
+            type="primary"
+            size="small"
+            @click.stop="handleCopyComponent()"
+            v-tippy="{
+              content: '复制',
+              delay: 100,
+              placement: 'right',
+              arrow: true,
+            }"
+          >
+            <IconifyIcon icon="lucide:copy" />
+          </Button>
+          <Button
+            type="primary"
+            size="small"
+            @click.stop="handleDeleteComponent()"
+            v-tippy="{
+              content: '删除',
+              delay: 100,
+              placement: 'right',
+              arrow: true,
+            }"
+          >
+            <IconifyIcon icon="lucide:trash-2" />
+          </Button>
         </VerticalButtonGroup>
       </div>
     </div>
@@ -158,22 +175,11 @@ $hover-border-width: 1px;
 $name-position: -85px;
 $toolbar-position: -55px;
 
-/* 组件 */
 .component {
-  position: relative;
-  cursor: move;
-
   .component-wrap {
-    position: absolute;
-    top: 0;
-    left: -$active-border-width;
-    display: block;
-    width: 100%;
-    height: 100%;
-
     /* 鼠标放到组件上时 */
     &:hover {
-      border: $hover-border-width dashed var(--ant-color-primary);
+      border: $hover-border-width dashed hsl(var(--primary));
       box-shadow: 0 0 5px 0 rgb(24 144 255 / 30%);
 
       .component-name {
@@ -194,9 +200,9 @@ $toolbar-position: -55px;
       height: 25px;
       font-size: 12px;
       line-height: 25px;
-      color: #6a6a6a;
+      color: hsl(var(--text-color));
       text-align: center;
-      background: #fff;
+      background: hsl(var(--background));
       box-shadow:
         0 0 4px #00000014,
         0 2px 6px #0000000f,
@@ -211,7 +217,7 @@ $toolbar-position: -55px;
         height: 0;
         content: ' ';
         border: 5px solid transparent;
-        border-left-color: #fff;
+        border-left-color: hsl(var(--background));
       }
     }
 
@@ -231,18 +237,18 @@ $toolbar-position: -55px;
         height: 0;
         content: ' ';
         border: 5px solid transparent;
-        border-right-color: #2d8cf0;
+        border-right-color: hsl(var(--primary));
       }
     }
   }
 
-  /* 组件选中时 */
+  /* 选中状态 */
   &.active {
     margin-bottom: 4px;
 
     .component-wrap {
       margin-bottom: $active-border-width + $active-border-width;
-      border: $active-border-width solid var(--ant-color-primary) !important;
+      border: $active-border-width solid hsl(var(--primary)) !important;
       box-shadow: 0 0 10px 0 rgb(24 144 255 / 30%);
 
       .component-name {
@@ -251,10 +257,10 @@ $toolbar-position: -55px;
         /* 防止加了边框之后，位置移动 */
         left: $name-position - $active-border-width !important;
         color: #fff;
-        background: var(--ant-color-primary);
+        background: hsl(var(--primary));
 
         &::after {
-          border-left-color: var(--ant-color-primary);
+          border-left-color: hsl(var(--primary));
         }
       }
 
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-library.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-library.vue
index 56907c105..add6ecc4a 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-library.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-library.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import type { DiyComponent, DiyComponentLibrary } from '../util';
 
-import { reactive, watch } from 'vue';
+import { ref, watch } from 'vue';
 
 import { IconifyIcon } from '@vben/icons';
 import { cloneDeep } from '@vben/utils';
 
-import { Collapse, CollapsePanel } from 'ant-design-vue';
+import { Collapse } from 'ant-design-vue';
 import draggable from 'vuedraggable';
 
 import { componentConfigs } from './mobile/index';
@@ -14,34 +14,33 @@ import { componentConfigs } from './mobile/index';
 /** 组件库：目前左侧的【基础组件】、【图文组件】部分 */
 defineOptions({ name: 'ComponentLibrary' });
 
-// 组件列表
+/** 组件列表 */
 const props = defineProps<{
   list: DiyComponentLibrary[];
 }>();
-// 组件分组
-const groups = reactive<any[]>([]);
-// 展开的折叠面板
-const extendGroups = reactive<string[]>([]);
 
-// 监听 list 属性，按照 DiyComponentLibrary 的 name 分组
+const groups = ref<any[]>([]); // 组件分组
+const extendGroups = ref<string[]>([]); // 展开的折叠面板
+
+/** 监听 list 属性，按照 DiyComponentLibrary 的 name 分组 */
 watch(
   () => props.list,
   () => {
     // 清除旧数据
-    extendGroups.length = 0;
-    groups.length = 0;
+    extendGroups.value = [];
+    groups.value = [];
     // 重新生成数据
     props.list.forEach((group) => {
       // 是否展开分组
       if (group.extended) {
-        extendGroups.push(group.name);
+        extendGroups.value.push(group.name);
       }
       // 查找组件
       const components = group.components
         .map((name) => componentConfigs[name] as DiyComponent<any>)
         .filter(Boolean);
       if (components.length > 0) {
-        groups.push({
+        groups.value.push({
           name: group.name,
           components,
         });
@@ -53,165 +52,51 @@ watch(
   },
 );
 
-// 克隆组件
-const handleCloneComponent = (component: DiyComponent<any>) => {
+/** 克隆组件 */
+function handleCloneComponent(component: DiyComponent<any>) {
   const instance = cloneDeep(component);
   instance.uid = Date.now();
   return instance;
-};
+}
 </script>
 
 <template>
-  <div class="editor-left w-[261px]">
-    <div class="h-full overflow-y-auto">
-      <Collapse v-model:active-key="extendGroups">
-        <CollapsePanel
-          v-for="group in groups"
-          :key="group.name"
-          :header="group.name"
+  <div class="z-[1] max-h-[calc(80vh)] shrink-0 select-none overflow-y-auto">
+    <Collapse
+      v-model:active-key="extendGroups"
+      :bordered="false"
+      class="bg-card"
+    >
+      <Collapse.Panel
+        v-for="(group, index) in groups"
+        :key="group.name"
+        :header="group.name"
+        :force-render="true"
+      >
+        <draggable
+          class="flex flex-wrap items-center"
+          ghost-class="draggable-ghost"
+          :item-key="index.toString()"
+          :list="group.components"
+          :sort="false"
+          :group="{ name: 'component', pull: 'clone', put: false }"
+          :clone="handleCloneComponent"
+          :animation="200"
+          :force-fallback="false"
         >
-          <draggable
-            class="component-container"
-            ghost-class="draggable-ghost"
-            item-key="index"
-            :list="group.components"
-            :sort="false"
-            :group="{ name: 'component', pull: 'clone', put: false }"
-            :clone="handleCloneComponent"
-            :animation="200"
-            :force-fallback="true"
-          >
-            <template #item="{ element }">
-              <div>
-                <div class="drag-placement">组件放置区域</div>
-                <div class="component">
-                  <IconifyIcon :icon="element.icon" :size="32" />
-                  <span class="mt-1 text-xs">{{ element.name }}</span>
-                </div>
-              </div>
-            </template>
-          </draggable>
-        </CollapsePanel>
-      </Collapse>
-    </div>
+          <template #item="{ element }">
+            <div
+              class="component flex h-20 w-20 cursor-move flex-col items-center justify-center hover:border-2 hover:border-blue-500"
+            >
+              <IconifyIcon
+                :icon="element.icon"
+                class="mb-1 size-8 text-gray-500"
+              />
+              <span class="mt-1 text-xs">{{ element.name }}</span>
+            </div>
+          </template>
+        </draggable>
+      </Collapse.Panel>
+    </Collapse>
   </div>
 </template>
-
-<style scoped lang="scss">
-.editor-left {
-  z-index: 1;
-  flex-shrink: 0;
-  user-select: none;
-  box-shadow: 8px 0 8px -8px rgb(0 0 0 / 12%);
-
-  :deep(.ant-collapse) {
-    border-top: none;
-  }
-
-  :deep(.ant-collapse-item) {
-    border-bottom: none;
-  }
-
-  :deep(.ant-collapse-content) {
-    padding-bottom: 0;
-  }
-
-  :deep(.ant-collapse-header) {
-    height: 32px;
-    padding: 0 24px !important;
-    line-height: 32px;
-    background-color: var(--ant-color-bg-layout);
-    border-bottom: none;
-  }
-
-  .component-container {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-  }
-
-  .component {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    width: 86px;
-    height: 86px;
-    cursor: move;
-    border-right: 1px solid var(--ant-color-border-secondary);
-    border-bottom: 1px solid var(--ant-color-border-secondary);
-
-    .anticon {
-      margin-bottom: 4px;
-      color: gray;
-    }
-  }
-
-  .component.active,
-  .component:hover {
-    color: var(--ant-color-white);
-    background: var(--ant-color-primary);
-
-    .anticon {
-      color: var(--ant-color-white);
-    }
-  }
-
-  .component:nth-of-type(3n) {
-    border-right: none;
-  }
-}
-
-/* 拖拽占位提示，默认不显示 */
-.drag-placement {
-  display: none;
-  color: #fff;
-}
-
-.drag-area {
-  /* 拖拽到手机区域时的样式 */
-  .draggable-ghost {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 40px;
-
-    /* 条纹背景 */
-    background: linear-gradient(
-      45deg,
-      #91a8d5 0,
-      #91a8d5 10%,
-      #94b4eb 10%,
-      #94b4eb 50%,
-      #91a8d5 50%,
-      #91a8d5 60%,
-      #94b4eb 60%,
-      #94b4eb
-    );
-    background-size: 1rem 1rem;
-    transition: all 0.5s;
-
-    span {
-      display: inline-block;
-      width: 140px;
-      height: 25px;
-      font-size: 12px;
-      line-height: 25px;
-      color: #fff;
-      text-align: center;
-      background: #5487df;
-    }
-
-    /* 拖拽时隐藏组件 */
-    .component {
-      display: none;
-    }
-
-    /* 拖拽时显示占位提示 */
-    .drag-placement {
-      display: block;
-    }
-  }
-}
-</style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Carousel/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Carousel/config.ts
index f63a0bcb6..40e049d30 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Carousel/config.ts
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Carousel/config.ts
@@ -2,32 +2,24 @@ import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 轮播图属性 */
 export interface CarouselProperty {
-  // 类型：默认 | 卡片
-  type: 'card' | 'default';
-  // 指示器样式：点 | 数字
-  indicator: 'dot' | 'number';
-  // 是否自动播放
-  autoplay: boolean;
-  // 播放间隔
-  interval: number;
-  // 轮播内容
-  items: CarouselItemProperty[];
-  // 组件样式
-  style: ComponentStyle;
-}
-// 轮播内容属性
-export interface CarouselItemProperty {
-  // 类型：图片 | 视频
-  type: 'img' | 'video';
-  // 图片链接
-  imgUrl: string;
-  // 视频链接
-  videoUrl: string;
-  // 跳转链接
-  url: string;
+  type: 'card' | 'default'; // 类型：默认 | 卡片
+  indicator: 'dot' | 'number'; // 指示器样式：点 | 数字
+  autoplay: boolean; // 是否自动播放
+  interval: number; // 播放间隔
+  height: number; // 轮播高度
+  items: CarouselItemProperty[]; // 轮播内容
+  style: ComponentStyle; // 组件样式
 }
 
-// 定义组件
+/** 轮播内容属性 */
+export interface CarouselItemProperty {
+  type: 'img' | 'video'; // 类型：图片 | 视频
+  imgUrl: string; // 图片链接
+  videoUrl: string; // 视频链接
+  url: string; // 跳转链接
+}
+
+/** 定义组件 */
 export const component = {
   id: 'Carousel',
   name: '轮播图',
@@ -37,6 +29,7 @@ export const component = {
     indicator: 'dot',
     autoplay: false,
     interval: 3,
+    height: 174,
     items: [
       {
         type: 'img',
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Carousel/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Carousel/index.vue
index 74a2fcf0a..9b4dd5c16 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Carousel/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Carousel/index.vue
@@ -5,6 +5,8 @@ import { ref } from 'vue';
 
 import { IconifyIcon } from '@vben/icons';
 
+import { Carousel, Image } from 'ant-design-vue';
+
 /** 轮播图 */
 defineOptions({ name: 'Carousel' });
 
@@ -16,36 +18,36 @@ const handleIndexChange = (index: number) => {
 };
 </script>
 <template>
-  <!-- 无图片 -->
-  <div
-    class="flex h-[250px] items-center justify-center bg-gray-300"
-    v-if="property.items.length === 0"
-  >
-    <IconifyIcon icon="tdesign:image" class="text-[120px] text-gray-800" />
-  </div>
-  <div v-else class="relative">
-    <Carousel
-      :autoplay="property.autoplay"
-      :autoplay-speed="property.interval * 1000"
-      :dots="property.indicator !== 'number'"
-      @change="handleIndexChange"
-      class="h-[174px]"
-    >
-      <div v-for="(item, index) in property.items" :key="index">
-        <Image
-          class="h-full w-full object-cover"
-          :src="item.imgUrl"
-          :preview="false"
-        />
-      </div>
-    </Carousel>
+  <div>
+    <!-- 无图片 -->
     <div
-      v-if="property.indicator === 'number'"
-      class="absolute bottom-[10px] right-[10px] rounded-xl bg-black px-[8px] py-[2px] text-[10px] text-white opacity-40"
+      class="bg-card flex h-64 items-center justify-center"
+      v-if="property.items.length === 0"
     >
-      {{ currentIndex }} / {{ property.items.length }}
+      <IconifyIcon icon="tdesign:image" class="size-6 text-gray-800" />
+    </div>
+    <div v-else class="relative">
+      <Carousel
+        :autoplay="property.autoplay"
+        :autoplay-speed="property.interval * 1000"
+        :dots="property.indicator !== 'number'"
+        @change="handleIndexChange"
+        class="h-44"
+      >
+        <div v-for="(item, index) in property.items" :key="index">
+          <Image
+            class="h-full w-full object-cover"
+            :src="item.imgUrl"
+            :preview="false"
+          />
+        </div>
+      </Carousel>
+      <div
+        v-if="property.indicator === 'number'"
+        class="absolute bottom-2.5 right-2.5 rounded-xl bg-black px-2 py-1 text-xs text-white opacity-40"
+      >
+        {{ currentIndex }} / {{ property.items.length }}
+      </div>
     </div>
   </div>
 </template>
-
-<style scoped lang="scss"></style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Carousel/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Carousel/property.vue
index 3dcc075e5..9cace5f26 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Carousel/property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Carousel/property.vue
@@ -4,6 +4,16 @@ import type { CarouselProperty } from './config';
 import { IconifyIcon } from '@vben/icons';
 
 import { useVModel } from '@vueuse/core';
+import {
+  Form,
+  FormItem,
+  Radio,
+  RadioButton,
+  RadioGroup,
+  Slider,
+  Switch,
+  Tooltip,
+} from 'ant-design-vue';
 
 import UploadFile from '#/components/upload/file-upload.vue';
 import UploadImg from '#/components/upload/image-upload.vue';
@@ -21,33 +31,34 @@ const formData = useVModel(props, 'modelValue', emit);
 
 <template>
   <ComponentContainerProperty v-model="formData.style">
-    <ElForm label-width="80px" :model="formData">
-      <ElCard header="样式设置" class="property-group" shadow="never">
-        <ElFormItem label="样式" prop="type">
-          <ElRadioGroup v-model="formData.type">
-            <ElTooltip class="item" content="默认" placement="bottom">
-              <ElRadioButton value="default">
-                <IconifyIcon icon="system-uicons:carousel" />
-              </ElRadioButton>
-            </ElTooltip>
-            <ElTooltip class="item" content="卡片" placement="bottom">
-              <ElRadioButton value="card">
-                <IconifyIcon icon="ic:round-view-carousel" />
-              </ElRadioButton>
-            </ElTooltip>
-          </ElRadioGroup>
-        </ElFormItem>
-        <ElFormItem label="指示器" prop="indicator">
-          <ElRadioGroup v-model="formData.indicator">
-            <ElRadio value="dot">小圆点</ElRadio>
-            <ElRadio value="number">数字</ElRadio>
-          </ElRadioGroup>
-        </ElFormItem>
-        <ElFormItem label="是否轮播" prop="autoplay">
-          <ElSwitch v-model="formData.autoplay" />
-        </ElFormItem>
-        <ElFormItem label="播放间隔" prop="interval" v-if="formData.autoplay">
-          <ElSlider
+    <Form label-width="80px" :model="formData">
+      <p class="text-base font-bold">样式设置：</p>
+      <div class="flex flex-col gap-2 rounded-md p-4 shadow-lg">
+        <FormItem label="样式" prop="type">
+          <RadioGroup v-model="formData.type">
+            <Tooltip class="item" content="默认" placement="bottom">
+              <RadioButton value="default">
+                <IconifyIcon icon="system-uicons:carousel" class="size-6" />
+              </RadioButton>
+            </Tooltip>
+            <Tooltip class="item" content="卡片" placement="bottom">
+              <RadioButton value="card">
+                <IconifyIcon icon="ic:round-view-carousel" class="size-6" />
+              </RadioButton>
+            </Tooltip>
+          </RadioGroup>
+        </FormItem>
+        <FormItem label="指示器" prop="indicator">
+          <RadioGroup v-model="formData.indicator">
+            <Radio value="dot">小圆点</Radio>
+            <Radio value="number">数字</Radio>
+          </RadioGroup>
+        </FormItem>
+        <FormItem label="是否轮播" prop="autoplay">
+          <Switch v-model="formData.autoplay" />
+        </FormItem>
+        <FormItem label="播放间隔" prop="interval" v-if="formData.autoplay">
+          <Slider
             v-model="formData.interval"
             :max="10"
             :min="0.5"
@@ -56,24 +67,20 @@ const formData = useVModel(props, 'modelValue', emit);
             input-size="small"
             :show-input-controls="false"
           />
-          <ElText type="info">单位：秒</ElText>
-        </ElFormItem>
-      </ElCard>
-      <ElCard header="内容设置" class="property-group" shadow="never">
+          <p class="text-info">单位：秒</p>
+        </FormItem>
+      </div>
+      <p class="text-base font-bold">内容设置：</p>
+      <div class="flex flex-col gap-2 rounded-md p-4 shadow-lg">
         <Draggable v-model="formData.items" :empty-item="{ type: 'img' }">
           <template #default="{ element }">
-            <ElFormItem
-              label="类型"
-              prop="type"
-              class="mb-2"
-              label-width="40px"
-            >
-              <ElRadioGroup v-model="element.type">
-                <ElRadio value="img">图片</ElRadio>
-                <ElRadio value="video">视频</ElRadio>
-              </ElRadioGroup>
-            </ElFormItem>
-            <ElFormItem
+            <FormItem label="类型" prop="type" class="mb-2" label-width="40px">
+              <RadioGroup v-model="element.type">
+                <Radio value="img">图片</Radio>
+                <Radio value="video">视频</Radio>
+              </RadioGroup>
+            </FormItem>
+            <FormItem
               label="图片"
               class="mb-2"
               label-width="40px"
@@ -84,39 +91,37 @@ const formData = useVModel(props, 'modelValue', emit);
                 draggable="false"
                 height="80px"
                 width="100%"
-                class="min-w-[80px]"
+                class="min-w-20"
                 :show-description="false"
               />
-            </ElFormItem>
+            </FormItem>
             <template v-else>
-              <ElFormItem label="封面" class="mb-2" label-width="40px">
+              <FormItem label="封面" class="mb-2" label-width="40px">
                 <UploadImg
                   v-model="element.imgUrl"
                   draggable="false"
                   :show-description="false"
                   height="80px"
                   width="100%"
-                  class="min-w-[80px]"
+                  class="min-w-20"
                 />
-              </ElFormItem>
-              <ElFormItem label="视频" class="mb-2" label-width="40px">
+              </FormItem>
+              <FormItem label="视频" class="mb-2" label-width="40px">
                 <UploadFile
                   v-model="element.videoUrl"
                   :file-type="['mp4']"
                   :limit="1"
                   :file-size="100"
-                  class="min-w-[80px]"
+                  class="min-w-20"
                 />
-              </ElFormItem>
+              </FormItem>
             </template>
-            <ElFormItem label="链接" class="mb-2" label-width="40px">
+            <FormItem label="链接" class="mb-2" label-width="40px">
               <AppLinkInput v-model="element.url" />
-            </ElFormItem>
+            </FormItem>
           </template>
         </Draggable>
-      </ElCard>
-    </ElForm>
+      </div>
+    </Form>
   </ComponentContainerProperty>
 </template>
-
-<style scoped lang="scss"></style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Divider/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Divider/config.ts
index 17e5a79bf..3ab6eef11 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Divider/config.ts
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Divider/config.ts
@@ -2,19 +2,14 @@ import type { DiyComponent } from '../../../util';
 
 /** 分割线属性 */
 export interface DividerProperty {
-  // 高度
-  height: number;
-  // 线宽
-  lineWidth: number;
-  // 边距类型
-  paddingType: 'horizontal' | 'none';
-  // 颜色
-  lineColor: string;
-  // 类型
-  borderType: 'dashed' | 'dotted' | 'none' | 'solid';
+  height: number; // 高度
+  lineWidth: number; // 线宽
+  paddingType: 'horizontal' | 'none'; // 边距类型
+  lineColor: string; // 颜色
+  borderType: 'dashed' | 'dotted' | 'none' | 'solid'; // 类型
 }
 
-// 定义组件
+/** 定义组件 */
 export const component = {
   id: 'Divider',
   name: '分割线',
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Divider/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Divider/index.vue
index 1736db389..e07eda87e 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Divider/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Divider/index.vue
@@ -25,5 +25,3 @@ defineProps<{ property: DividerProperty }>();
     ></div>
   </div>
 </template>
-
-<style scoped lang="scss"></style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Divider/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Divider/property.vue
index 3f479b8c2..68243de31 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Divider/property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Divider/property.vue
@@ -1,4 +1,101 @@
 <script setup lang="ts">
-import { Page } from '@vben/common-ui';
+import type { DividerProperty } from './config';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { useVModel } from '@vueuse/core';
+import {
+  Form,
+  FormItem,
+  RadioButton,
+  RadioGroup,
+  Slider,
+  Tooltip,
+} from 'ant-design-vue';
+
+import { ColorInput } from '#/views/mall/promotion/components';
+
+/** 导航栏属性面板 */
+defineOptions({ name: 'DividerProperty' });
+
+const props = defineProps<{ modelValue: DividerProperty }>();
+
+const emit = defineEmits(['update:modelValue']);
+
+const BORDER_TYPES = [
+  {
+    icon: 'vaadin:line-h',
+    text: '实线',
+    type: 'solid',
+  },
+  {
+    icon: 'tabler:line-dashed',
+    text: '虚线',
+    type: 'dashed',
+  },
+  {
+    icon: 'tabler:line-dotted',
+    text: '点线',
+    type: 'dotted',
+  },
+  {
+    icon: 'entypo:progress-empty',
+    text: '无',
+    type: 'none',
+  },
+]; // 线类型
+const formData = useVModel(props, 'modelValue', emit);
 </script>
-<template><Page>待完成</Page></template>
+
+<template>
+  <Form :model="formData">
+    <FormItem label="高度" name="height">
+      <Slider v-model:value="formData.height" :min="1" :max="100" />
+    </FormItem>
+    <FormItem label="选择样式" name="borderType">
+      <RadioGroup v-model:value="formData!.borderType">
+        <Tooltip
+          placement="top"
+          v-for="(item, index) in BORDER_TYPES"
+          :key="index"
+          :title="item.text"
+        >
+          <RadioButton :value="item.type">
+            <IconifyIcon
+              :icon="item.icon"
+              class="inset-0 size-6 items-center"
+            />
+          </RadioButton>
+        </Tooltip>
+      </RadioGroup>
+    </FormItem>
+    <template v-if="formData.borderType !== 'none'">
+      <FormItem label="线宽" name="lineWidth">
+        <Slider v-model:value="formData.lineWidth" :min="1" :max="30" />
+      </FormItem>
+      <FormItem label="左右边距" name="paddingType">
+        <RadioGroup v-model:value="formData!.paddingType">
+          <Tooltip title="无边距" placement="top">
+            <RadioButton value="none">
+              <IconifyIcon
+                icon="tabler:box-padding"
+                class="inset-0 size-6 items-center"
+              />
+            </RadioButton>
+          </Tooltip>
+          <Tooltip title="左右留边" placement="top">
+            <RadioButton value="horizontal">
+              <IconifyIcon
+                icon="vaadin:padding"
+                class="inset-0 size-6 items-center"
+              />
+            </RadioButton>
+          </Tooltip>
+        </RadioGroup>
+      </FormItem>
+      <FormItem label="颜色">
+        <ColorInput v-model="formData.lineColor" />
+      </FormItem>
+    </template>
+  </Form>
+</template>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Popover/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Popover/config.ts
index 6f365b735..52bbeacdb 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Popover/config.ts
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Popover/config.ts
@@ -2,19 +2,17 @@ import type { DiyComponent } from '../../../util';
 
 /** 弹窗广告属性 */
 export interface PopoverProperty {
-  list: PopoverItemProperty[];
+  list: PopoverItemProperty[]; // 弹窗列表
 }
 
+/** 弹窗广告项目属性 */
 export interface PopoverItemProperty {
-  // 图片地址
-  imgUrl: string;
-  // 跳转连接
-  url: string;
-  // 显示类型：仅显示一次、每次启动都会显示
-  showType: 'always' | 'once';
+  imgUrl: string; // 图片地址
+  url: string; // 跳转连接
+  showType: 'always' | 'once'; // 显示类型：仅显示一次、每次启动都会显示
 }
 
-// 定义组件
+/** 定义组件 */
 export const component = {
   id: 'Popover',
   name: '弹窗广告',
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Popover/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Popover/index.vue
index b193e8366..709b62a6c 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Popover/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Popover/index.vue
@@ -33,7 +33,7 @@ const handleActive = (index: number) => {
     <Image :src="item.imgUrl" fit="contain" class="h-full w-full">
       <template #error>
         <div class="flex h-full w-full items-center justify-center">
-          <IconifyIcon icon="ep:picture" />
+          <IconifyIcon icon="lucide:image" />
         </div>
       </template>
     </Image>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Popover/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Popover/property.vue
index 3f479b8c2..bd40e4330 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Popover/property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Popover/property.vue
@@ -1,4 +1,48 @@
 <script setup lang="ts">
-import { Page } from '@vben/common-ui';
+import type { PopoverProperty } from './config';
+
+import { useVModel } from '@vueuse/core';
+import { Form, FormItem, Radio, RadioGroup, Tooltip } from 'ant-design-vue';
+
+import UploadImg from '#/components/upload/image-upload.vue';
+import { AppLinkInput, Draggable } from '#/views/mall/promotion/components';
+
+/** 弹窗广告属性面板 */
+defineOptions({ name: 'PopoverProperty' });
+
+const props = defineProps<{ modelValue: PopoverProperty }>();
+
+const emit = defineEmits(['update:modelValue']);
+
+const formData = useVModel(props, 'modelValue', emit);
 </script>
-<template><Page>待完成</Page></template>
+
+<template>
+  <Form :model="formData">
+    <Draggable v-model="formData.list" :empty-item="{ showType: 'once' }">
+      <template #default="{ element, index }">
+        <FormItem label="图片" :name="`list[${index}].imgUrl`">
+          <UploadImg
+            v-model="element.imgUrl"
+            height="56px"
+            width="56px"
+            :show-description="false"
+          />
+        </FormItem>
+        <FormItem label="跳转链接" :name="`list[${index}].url`">
+          <AppLinkInput v-model="element.url" />
+        </FormItem>
+        <FormItem label="显示次数" :name="`list[${index}].showType`">
+          <RadioGroup v-model:value="element.showType">
+            <Tooltip title="只显示一次，下次打开时不显示" placement="bottom">
+              <Radio value="once">一次</Radio>
+            </Tooltip>
+            <Tooltip title="每次打开时都会显示" placement="bottom">
+              <Radio value="always">不限</Radio>
+            </Tooltip>
+          </RadioGroup>
+        </FormItem>
+      </template>
+    </Draggable>
+  </Form>
+</template>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/config.ts
index 4392494d3..723461b4a 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/config.ts
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/config.ts
@@ -1,29 +1,20 @@
 import type { ComponentStyle, DiyComponent } from '../../../util';
 
-/** 商品卡片属性 */
+/** 优惠劵卡片属性 */
 export interface CouponCardProperty {
-  // 列数
-  columns: number;
-  // 背景图
-  bgImg: string;
-  // 文字颜色
-  textColor: string;
-  // 按钮样式
+  columns: number; // 列数
+  bgImg: string; // 背景图
+  textColor: string; // 文字颜色
   button: {
-    // 背景颜色
-    bgColor: string;
-    // 颜色
-    color: string;
-  };
-  // 间距
-  space: number;
-  // 优惠券编号列表
-  couponIds: number[];
-  // 组件样式
-  style: ComponentStyle;
+    bgColor: string; // 背景颜色
+    color: string; // 文字颜色
+  }; // 按钮样式
+  space: number; // 间距
+  couponIds: number[]; // 优惠券编号列表
+  style: ComponentStyle; // 组件样式
 }
 
-// 定义组件
+/** 定义组件 */
 export const component = {
   id: 'CouponCard',
   name: '优惠券',
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/coupon-discount-desc.tsx b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/coupon-discount-desc.tsx
index a79e1f0cb..89f360564 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/coupon-discount-desc.tsx
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/coupon-discount-desc.tsx
@@ -23,7 +23,7 @@ export const CouponDiscountDesc = defineComponent({
     const discountDesc =
       coupon.discountType === PromotionDiscountTypeEnum.PRICE.type
         ? `减${floatToFixed2(coupon.discountPrice)}元`
-        : `打${coupon.discountPercent / 10}折`;
+        : `打${(coupon.discountPercent ?? 0) / 10}折`;
     return () => (
       <div>
         <span>{useCondition}</span>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/coupon-discount.tsx b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/coupon-discount.tsx
index 9f0c7f5b4..15a95887c 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/coupon-discount.tsx
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/coupon-discount.tsx
@@ -17,7 +17,7 @@ export const CouponDiscount = defineComponent({
   setup(props) {
     const coupon = props.coupon as MallCouponTemplateApi.CouponTemplate;
     // 折扣
-    let value = `${coupon.discountPercent / 10}`;
+    let value = `${(coupon.discountPercent ?? 0) / 10}`;
     let suffix = ' 折';
     // 满减
     if (coupon.discountType === PromotionDiscountTypeEnum.PRICE.type) {
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/index.vue
index 39668774c..25b37ec8c 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/index.vue
@@ -5,6 +5,8 @@ import type { MallCouponTemplateApi } from '#/api/mall/promotion/coupon/couponTe
 
 import { onMounted, ref, watch } from 'vue';
 
+import { getCouponTemplateList } from '#/api/mall/promotion/coupon/couponTemplate';
+
 import {
   CouponDiscount,
   CouponDiscountDesc,
@@ -31,13 +33,13 @@ watch(
 );
 
 // 手机宽度
-const phoneWidth = ref(375);
+const phoneWidth = ref(384);
 // 容器
 const containerRef = ref();
 // 滚动条宽度
 const scrollbarWidth = ref('100%');
 // 优惠券的宽度
-const couponWidth = ref(375);
+const couponWidth = ref(384);
 // 计算布局参数
 watch(
   () => [props.property, phoneWidth, couponList.value.length],
@@ -56,11 +58,11 @@ watch(
 );
 onMounted(() => {
   // 提取手机宽度
-  phoneWidth.value = containerRef.value?.wrapRef?.offsetWidth || 375;
+  phoneWidth.value = containerRef.value?.wrapRef?.offsetWidth || 384;
 });
 </script>
 <template>
-  <div class="z-10 min-h-[30px]" wrap-class="w-full" ref="containerRef">
+  <div class="z-10 min-h-8" wrap-class="w-full" ref="containerRef">
     <div
       class="flex flex-row text-xs"
       :style="{
@@ -153,4 +155,3 @@ onMounted(() => {
     </div>
   </div>
 </template>
-<style scoped lang="scss"></style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/property.vue
index 3f479b8c2..40b2513d3 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/property.vue
@@ -1,4 +1,182 @@
 <script setup lang="ts">
-import { Page } from '@vben/common-ui';
+import type { CouponCardProperty } from './config';
+
+import type { MallCouponTemplateApi } from '#/api/mall/promotion/coupon/couponTemplate';
+
+import { ref, watch } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import {
+  CouponTemplateTakeTypeEnum,
+  PromotionDiscountTypeEnum,
+} from '@vben/constants';
+import { IconifyIcon } from '@vben/icons';
+import { floatToFixed2 } from '@vben/utils';
+
+import { useVModel } from '@vueuse/core';
+import {
+  Button,
+  Form,
+  FormItem,
+  RadioButton,
+  RadioGroup,
+  Slider,
+  Tooltip,
+  Typography,
+} from 'ant-design-vue';
+
+import * as CouponTemplateApi from '#/api/mall/promotion/coupon/couponTemplate';
+import UploadImg from '#/components/upload/image-upload.vue';
+import { ColorInput } from '#/views/mall/promotion/components';
+import CouponSelect from '#/views/mall/promotion/coupon/components/select.vue';
+
+import ComponentContainerProperty from '../../component-container-property.vue';
+
+/** 优惠券卡片属性面板 */
+defineOptions({ name: 'CouponCardProperty' });
+
+const props = defineProps<{ modelValue: CouponCardProperty }>();
+
+const emit = defineEmits(['update:modelValue']);
+
+const formData = useVModel(props, 'modelValue', emit);
+
+const couponList = ref<MallCouponTemplateApi.CouponTemplate[]>([]); // 已选择的优惠券列表
+
+const [CouponSelectModal, couponSelectModalApi] = useVbenModal({
+  connectedComponent: CouponSelect,
+  destroyOnClose: true,
+});
+
+/** 添加优惠劵 */
+const handleAddCoupon = () => {
+  couponSelectModalApi.open();
+};
+
+/** 处理优惠劵选择 */
+const handleCouponSelect = (
+  selectedCoupons: MallCouponTemplateApi.CouponTemplate[],
+) => {
+  couponList.value = selectedCoupons;
+  formData.value.couponIds = selectedCoupons.map((coupon) => coupon.id);
+};
+
+/** 监听优惠券 ID 变化，加载优惠券列表 */
+watch(
+  () => formData.value.couponIds,
+  async () => {
+    if (formData.value.couponIds?.length > 0) {
+      couponList.value = await CouponTemplateApi.getCouponTemplateList(
+        formData.value.couponIds,
+      );
+    }
+  },
+  {
+    immediate: true,
+    deep: true,
+  },
+);
 </script>
-<template><Page>待完成</Page></template>
+
+<template>
+  <ComponentContainerProperty v-model="formData.style">
+    <Form :model="formData">
+      <p class="text-base font-bold">优惠券列表：</p>
+      <div class="flex flex-col gap-2 rounded-md p-4 shadow-lg">
+        <div
+          v-for="(coupon, index) in couponList"
+          :key="index"
+          class="flex items-center justify-between"
+        >
+          <Typography>
+            <Typography.Title :level="5">
+              {{ coupon.name }}
+            </Typography.Title>
+            <Typography.Text type="secondary">
+              <span v-if="coupon.usePrice > 0">
+                满{{ floatToFixed2(coupon.usePrice) }}元，
+              </span>
+              <span
+                v-if="
+                  coupon.discountType === PromotionDiscountTypeEnum.PRICE.type
+                "
+              >
+                减{{ floatToFixed2(coupon.discountPrice) }}元
+              </span>
+              <span v-else> 打{{ (coupon.discountPercent ?? 0) / 10 }}折 </span>
+            </Typography.Text>
+          </Typography>
+        </div>
+        <FormItem>
+          <Button
+            @click="handleAddCoupon"
+            type="primary"
+            ghost
+            class="mt-2 w-full"
+          >
+            <IconifyIcon icon="lucide:plus" />
+            添加
+          </Button>
+        </FormItem>
+      </div>
+      <p class="text-base font-bold">优惠券样式：</p>
+      <div class="flex flex-col gap-2 rounded-md p-4 shadow-lg">
+        <FormItem label="列数" name="type">
+          <RadioGroup v-model:value="formData.columns">
+            <Tooltip title="一列" placement="bottom">
+              <RadioButton :value="1">
+                <IconifyIcon
+                  icon="fluent:text-column-one-24-filled"
+                  class="inset-0 size-6 items-center"
+                />
+              </RadioButton>
+            </Tooltip>
+            <Tooltip title="二列" placement="bottom">
+              <RadioButton :value="2">
+                <IconifyIcon
+                  icon="fluent:text-column-two-24-filled"
+                  class="size-6"
+                />
+              </RadioButton>
+            </Tooltip>
+            <Tooltip title="三列" placement="bottom">
+              <RadioButton :value="3">
+                <IconifyIcon
+                  icon="fluent:text-column-three-24-filled"
+                  class="size-6"
+                />
+              </RadioButton>
+            </Tooltip>
+          </RadioGroup>
+        </FormItem>
+        <FormItem label="背景图片" name="bgImg">
+          <UploadImg
+            v-model="formData.bgImg"
+            height="80px"
+            width="100%"
+            class="min-w-[160px]"
+            :show-description="false"
+          />
+        </FormItem>
+        <FormItem label="文字颜色" name="textColor">
+          <ColorInput v-model="formData.textColor" />
+        </FormItem>
+        <FormItem label="按钮背景" name="button.bgColor">
+          <ColorInput v-model="formData.button.bgColor" />
+        </FormItem>
+        <FormItem label="按钮文字" name="button.color">
+          <ColorInput v-model="formData.button.color" />
+        </FormItem>
+        <FormItem label="间隔" name="space">
+          <Slider v-model:value="formData.space" :max="100" :min="0" />
+        </FormItem>
+      </div>
+    </Form>
+  </ComponentContainerProperty>
+
+  <!-- 优惠券选择 -->
+  <CouponSelectModal
+    :take-type="CouponTemplateTakeTypeEnum.USER.type"
+    @success="handleCouponSelect"
+  />
+</template>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/floating-action-button/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/floating-action-button/config.ts
index 22b98581c..d93b1f462 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/floating-action-button/config.ts
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/floating-action-button/config.ts
@@ -1,28 +1,21 @@
 import type { DiyComponent } from '../../../util';
 
-// 悬浮按钮属性
+/** 悬浮按钮属性 */
 export interface FloatingActionButtonProperty {
-  // 展开方向
-  direction: 'horizontal' | 'vertical';
-  // 是否显示文字
-  showText: boolean;
-  // 按钮列表
-  list: FloatingActionButtonItemProperty[];
+  direction: 'horizontal' | 'vertical'; // 展开方向
+  showText: boolean; // 是否显示文字
+  list: FloatingActionButtonItemProperty[]; // 按钮列表
 }
 
-// 悬浮按钮项属性
+/** 悬浮按钮项属性 */
 export interface FloatingActionButtonItemProperty {
-  // 图片地址
-  imgUrl: string;
-  // 跳转连接
-  url: string;
-  // 文字
-  text: string;
-  // 文字颜色
-  textColor: string;
+  imgUrl: string; // 图片地址
+  url: string; // 跳转连接
+  text: string; // 文字
+  textColor: string; // 文字颜色
 }
 
-// 定义组件
+/** 定义组件 */
 export const component = {
   id: 'FloatingActionButton',
   name: '悬浮按钮',
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/floating-action-button/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/floating-action-button/index.vue
index 89b74ad2e..c22f62839 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/floating-action-button/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/floating-action-button/index.vue
@@ -5,7 +5,7 @@ import { ref } from 'vue';
 
 import { IconifyIcon } from '@vben/icons';
 
-import { Image, message } from 'ant-design-vue';
+import { Button, Image, message } from 'ant-design-vue';
 
 /** 悬浮按钮 */
 defineOptions({ name: 'FloatingActionButton' });
@@ -25,7 +25,7 @@ const handleActive = (index: number) => {
 </script>
 <template>
   <div
-    class="absolute bottom-8 right-[calc(50%-375px/2+32px)] z-20 flex items-center gap-3"
+    class="absolute bottom-8 right-[calc(50%-384px/2+32px)] z-20 flex items-center gap-3"
     :class="[
       {
         'flex-row': property.direction === 'horizontal',
@@ -43,7 +43,11 @@ const handleActive = (index: number) => {
         <Image :src="item.imgUrl" fit="contain" class="h-7 w-7">
           <template #error>
             <div class="flex h-full w-full items-center justify-center">
-              <IconifyIcon icon="ep:picture" :color="item.textColor" />
+              <IconifyIcon
+                icon="lucide:image"
+                :color="item.textColor"
+                class="inset-0 size-6 items-center"
+              />
             </div>
           </template>
         </Image>
@@ -57,13 +61,13 @@ const handleActive = (index: number) => {
       </div>
     </template>
     <!-- todo: @owen 使用APP主题色 -->
-    <el-button type="primary" size="large" circle @click="handleToggleFab">
+    <Button type="primary" size="large" circle @click="handleToggleFab">
       <IconifyIcon
-        icon="ep:plus"
+        icon="lucide:plus"
         class="fab-icon"
         :class="[{ active: expanded }]"
       />
-    </el-button>
+    </Button>
   </div>
   <!-- 模态背景：展开时显示，点击后折叠 -->
   <div v-if="expanded" class="modal-bg" @click="handleToggleFab"></div>
@@ -74,9 +78,9 @@ const handleActive = (index: number) => {
 .modal-bg {
   position: absolute;
   top: 0;
-  left: calc(50% - 375px / 2);
+  left: calc(50% - 384px / 2);
   z-index: 11;
-  width: 375px;
+  width: 384px;
   height: 100%;
   background-color: rgb(0 0 0 / 40%);
 }
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/floating-action-button/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/floating-action-button/property.vue
index 3f479b8c2..1b633ceeb 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/floating-action-button/property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/floating-action-button/property.vue
@@ -1,4 +1,63 @@
 <script setup lang="ts">
-import { Page } from '@vben/common-ui';
+import type { FloatingActionButtonProperty } from './config';
+
+import { useVModel } from '@vueuse/core';
+import { Form, FormItem, Radio, RadioGroup, Switch } from 'ant-design-vue';
+
+import UploadImg from '#/components/upload/image-upload.vue';
+import {
+  AppLinkInput,
+  Draggable,
+  InputWithColor,
+} from '#/views/mall/promotion/components';
+
+/** 悬浮按钮属性面板 */
+defineOptions({ name: 'FloatingActionButtonProperty' });
+
+const props = defineProps<{ modelValue: FloatingActionButtonProperty }>();
+
+const emit = defineEmits(['update:modelValue']);
+
+const formData = useVModel(props, 'modelValue', emit);
 </script>
-<template><Page>待完成</Page></template>
+
+<template>
+  <Form :model="formData">
+    <p class="text-base font-bold">按钮配置：</p>
+    <div class="flex flex-col gap-2 rounded-md p-4 shadow-lg">
+      <FormItem label="展开方向" name="direction">
+        <RadioGroup v-model:value="formData.direction">
+          <Radio value="vertical">垂直</Radio>
+          <Radio value="horizontal">水平</Radio>
+        </RadioGroup>
+      </FormItem>
+      <FormItem label="显示文字" name="showText">
+        <Switch v-model:checked="formData.showText" />
+      </FormItem>
+    </div>
+    <p class="text-base font-bold">按钮列表：</p>
+    <div class="flex flex-col gap-2 rounded-md p-4 shadow-lg">
+      <Draggable v-model="formData.list" :empty-item="{ textColor: '#fff' }">
+        <template #default="{ element, index }">
+          <FormItem label="图标" :name="`list[${index}].imgUrl`">
+            <UploadImg
+              v-model="element.imgUrl"
+              height="56px"
+              width="56px"
+              :show-description="false"
+            />
+          </FormItem>
+          <FormItem label="文字" :name="`list[${index}].text`">
+            <InputWithColor
+              v-model="element.text"
+              v-model:color="element.textColor"
+            />
+          </FormItem>
+          <FormItem label="跳转链接" :name="`list[${index}].url`">
+            <AppLinkInput v-model="element.url" />
+          </FormItem>
+        </template>
+      </Draggable>
+    </div>
+  </Form>
+</template>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/components/hot-zone-edit-dialog/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/components/hot-zone-edit-dialog/index.vue
index 3f479b8c2..27d20bada 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/components/hot-zone-edit-dialog/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/components/hot-zone-edit-dialog/index.vue
@@ -1,4 +1,245 @@
 <script setup lang="ts">
-import { Page } from '@vben/common-ui';
+import type { HotZoneItemProperty } from '../../config';
+import type { ControlDot } from './controller';
+
+import type { AppLink } from '#/views/mall/promotion/components/app-link-input/data';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+
+import { Button, Image } from 'ant-design-vue';
+
+import AppLinkSelectDialog from '#/views/mall/promotion/components/app-link-input/app-link-select-dialog.vue';
+
+import {
+  CONTROL_DOT_LIST,
+  CONTROL_TYPE_ENUM,
+  HOT_ZONE_MIN_SIZE,
+  useDraggable,
+  zoomIn,
+  zoomOut,
+} from './controller';
+
+/** 热区编辑对话框 */
+defineOptions({ name: 'HotZoneEditDialog' });
+
+/** 定义属性 */
+const props = defineProps({
+  modelValue: {
+    type: Array<HotZoneItemProperty>,
+    default: () => [],
+  },
+  imgUrl: {
+    type: String,
+    default: '',
+  },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const formData = ref<HotZoneItemProperty[]>([]);
+
+const [Modal, modalApi] = useVbenModal({
+  showCancelButton: false,
+  onConfirm() {
+    const list = zoomOut(formData.value);
+    emit('update:modelValue', list);
+    modalApi.close();
+  },
+});
+
+/** 打开弹窗 */
+function open() {
+  // 放大
+  formData.value = zoomIn(props.modelValue);
+  modalApi.open();
+}
+
+defineExpose({ open }); // 提供 open 方法，用于打开弹窗
+
+const container = ref<HTMLDivElement>(); // 热区容器
+
+/** 增加热区 */
+function handleAdd() {
+  formData.value.push({
+    width: HOT_ZONE_MIN_SIZE,
+    height: HOT_ZONE_MIN_SIZE,
+    top: 0,
+    left: 0,
+  } as HotZoneItemProperty);
+}
+
+/** 删除热区 */
+function handleRemove(hotZone: HotZoneItemProperty) {
+  formData.value = formData.value.filter((item) => item !== hotZone);
+}
+
+/** 移动热区 */
+function handleMove(item: HotZoneItemProperty, e: MouseEvent) {
+  useDraggable(item, e, (left, top, _, __, moveWidth, moveHeight) => {
+    setLeft(item, left + moveWidth);
+    setTop(item, top + moveHeight);
+  });
+}
+
+/** 调整热区大小、位置 */
+function handleResize(
+  item: HotZoneItemProperty,
+  ctrlDot: ControlDot,
+  e: MouseEvent,
+) {
+  useDraggable(item, e, (left, top, width, height, moveWidth, moveHeight) => {
+    ctrlDot.types.forEach((type) => {
+      switch (type) {
+        case CONTROL_TYPE_ENUM.HEIGHT: {
+          {
+            // 左移时，宽度为减少
+            const direction = ctrlDot.types.includes(CONTROL_TYPE_ENUM.TOP)
+              ? -1
+              : 1;
+            setHeight(item, height + moveHeight * direction);
+          }
+          break;
+        }
+        case CONTROL_TYPE_ENUM.LEFT: {
+          setLeft(item, left + moveWidth);
+          break;
+        }
+        case CONTROL_TYPE_ENUM.TOP: {
+          setTop(item, top + moveHeight);
+          break;
+        }
+        case CONTROL_TYPE_ENUM.WIDTH: {
+          {
+            // 上移时，高度为减少
+            const direction = ctrlDot.types.includes(CONTROL_TYPE_ENUM.LEFT)
+              ? -1
+              : 1;
+            setWidth(item, width + moveWidth * direction);
+          }
+          break;
+        }
+      }
+    });
+  });
+}
+
+/** 设置 X 轴坐标 */
+function setLeft(item: HotZoneItemProperty, left: number) {
+  // 不能超出容器
+  if (left >= 0 && left <= container.value!.offsetWidth - item.width) {
+    item.left = left;
+  }
+}
+
+/** 设置Y轴坐标 */
+function setTop(item: HotZoneItemProperty, top: number) {
+  // 不能超出容器
+  if (top >= 0 && top <= container.value!.offsetHeight - item.height) {
+    item.top = top;
+  }
+}
+
+/** 设置宽度 */
+const setWidth = (item: HotZoneItemProperty, width: number) => {
+  // 不能小于最小宽度 && 不能超出容器右边
+  if (
+    width >= HOT_ZONE_MIN_SIZE &&
+    item.left + width <= container.value!.offsetWidth
+  ) {
+    item.width = width;
+  }
+};
+
+/** 设置高度 */
+const setHeight = (item: HotZoneItemProperty, height: number) => {
+  // 不能小于最小高度 && 不能超出容器底部
+  if (
+    height >= HOT_ZONE_MIN_SIZE &&
+    item.top + height <= container.value!.offsetHeight
+  ) {
+    item.height = height;
+  }
+};
+
+const activeHotZone = ref<HotZoneItemProperty>();
+const appLinkDialogRef = ref();
+
+/** 显示 App 链接选择对话框 */
+const handleShowAppLinkDialog = (hotZone: HotZoneItemProperty) => {
+  activeHotZone.value = hotZone;
+  appLinkDialogRef.value.open(hotZone.url);
+};
+
+/** 处理 App 链接选择变更 */
+const handleAppLinkChange = (appLink: AppLink) => {
+  if (!appLink || !activeHotZone.value) {
+    return;
+  }
+  activeHotZone.value.name = appLink.name;
+  activeHotZone.value.url = appLink.path;
+};
 </script>
-<template><Page>待完成</Page></template>
+
+<template>
+  <Modal title="设置热区" class="w-[780px]">
+    <div ref="container" class="w-750px relative h-full">
+      <Image
+        :src="imgUrl"
+        :preview="false"
+        class="w-750px pointer-events-none h-full select-none"
+      />
+      <div
+        v-for="(item, hotZoneIndex) in formData"
+        :key="hotZoneIndex"
+        class="group 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: 'hsl(var(--primary))',
+          background:
+            'color-mix(in srgb, hsl(var(--primary)) 30%, transparent)',
+          borderColor: 'hsl(var(--primary))',
+        }"
+        @mousedown="handleMove(item, $event)"
+        @dblclick="handleShowAppLinkDialog(item)"
+      >
+        <span class="pointer-events-none select-none">
+          {{ item.name || '双击选择链接' }}
+        </span>
+        <IconifyIcon
+          icon="lucide:x"
+          class="absolute inset-0 right-0 top-0 hidden size-6 cursor-pointer items-center rounded-bl-[80%] p-[2px_2px_6px_6px] text-right text-white group-hover:block"
+          :style="{ backgroundColor: 'hsl(var(--primary))' }"
+          @click="handleRemove(item)"
+        />
+
+        <!-- 8 个控制点 -->
+        <span
+          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, border: 'inherit' }"
+          @mousedown="handleResize(item, dot, $event)"
+        ></span>
+      </div>
+    </div>
+    <template #prepend-footer>
+      <Button @click="handleAdd" type="primary" ghost>
+        <template #icon>
+          <IconifyIcon icon="lucide:plus" />
+        </template>
+        添加热区
+      </Button>
+    </template>
+  </Modal>
+
+  <AppLinkSelectDialog
+    ref="appLinkDialogRef"
+    @app-link-change="handleAppLinkChange"
+  />
+</template>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/config.ts
index 464881740..9178ae0b5 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/config.ts
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/config.ts
@@ -2,31 +2,22 @@ import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 热区属性 */
 export interface HotZoneProperty {
-  // 图片地址
-  imgUrl: string;
-  // 导航菜单列表
-  list: HotZoneItemProperty[];
-  // 组件样式
-  style: ComponentStyle;
+  imgUrl: string; // 图片地址
+  list: HotZoneItemProperty[]; // 导航菜单列表
+  style: ComponentStyle; // 组件样式
 }
 
 /** 热区项目属性 */
 export interface HotZoneItemProperty {
-  // 链接的名称
-  name: string;
-  // 链接
-  url: string;
-  // 宽
-  width: number;
-  // 高
-  height: number;
-  // 上
-  top: number;
-  // 左
-  left: number;
+  name: string; // 链接的名称
+  url: string; // 链接
+  width: number; // 宽
+  height: number; // 高
+  top: number; // 上
+  left: number; // 左
 }
 
-// 定义组件
+/** 定义组件 */
 export const component = {
   id: 'HotZone',
   name: '热区',
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/index.vue
index 37bab23f1..bd7af2d9a 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/index.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { HotZoneProperty } from './config';
 
+import { Image } from 'ant-design-vue';
 /** 热区 */
 defineOptions({ name: 'HotZone' });
 const props = defineProps<{ property: HotZoneProperty }>();
@@ -15,7 +16,7 @@ const props = defineProps<{ property: HotZoneProperty }>();
     <div
       v-for="(item, index) in props.property.list"
       :key="index"
-      class="hot-zone"
+      class="bg-primary-700 absolute z-10 flex cursor-move items-center justify-center border text-sm opacity-80"
       :style="{
         width: `${item.width}px`,
         height: `${item.height}px`,
@@ -23,23 +24,9 @@ const props = defineProps<{ property: HotZoneProperty }>();
         left: `${item.left}px`,
       }"
     >
-      {{ item.name }}
+      <p class="text-primary">
+        {{ item.name }}
+      </p>
     </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-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/property.vue
index 835434341..ca8927c19 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/property.vue
@@ -4,7 +4,7 @@ import type { HotZoneProperty } from './config';
 import { ref } from 'vue';
 
 import { useVModel } from '@vueuse/core';
-import { Button, Form, FormItem, Typography } from 'ant-design-vue';
+import { Button, Form, FormItem } from 'ant-design-vue';
 
 import UploadImg from '#/components/upload/image-upload.vue';
 
@@ -40,19 +40,14 @@ const handleOpenEditDialog = () => {
           v-model="formData.imgUrl"
           height="50px"
           width="auto"
-          class="min-w-[80px]"
+          class="min-w-20"
           :show-description="false"
-        >
-          <template #tip>
-            <Typography.Text type="secondary" class="text-xs">
-              推荐宽度 750
-            </Typography.Text>
-          </template>
-        </UploadImg>
+        />
       </FormItem>
+      <p class="text-center text-sm text-gray-500">推荐宽度 750</p>
     </Form>
 
-    <Button type="primary" class="w-full" @click="handleOpenEditDialog">
+    <Button type="primary" class="mt-4 w-full" @click="handleOpenEditDialog">
       设置热区
     </Button>
   </ComponentContainerProperty>
@@ -71,10 +66,10 @@ const handleOpenEditDialog = () => {
   align-items: center;
   justify-content: center;
   font-size: 12px;
-  color: #fff;
+  color: hsl(var(--text-color));
   cursor: move;
-  background: #409effbf;
-  border: 1px solid var(--el-color-primary);
+  background: color-mix(in srgb, hsl(var(--primary)) 30%, transparent);
+  border: 1px solid hsl(var(--primary));
 
   /* 控制点 */
   .ctrl-dot {
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/config.ts
index 0025ff4db..3b402822a 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/config.ts
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/config.ts
@@ -2,19 +2,16 @@ import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 图片展示属性 */
 export interface ImageBarProperty {
-  // 图片链接
-  imgUrl: string;
-  // 跳转链接
-  url: string;
-  // 组件样式
-  style: ComponentStyle;
+  imgUrl: string; // 图片链接
+  url: string; // 跳转链接
+  style: ComponentStyle; // 组件样式
 }
 
-// 定义组件
+/** 定义组件 */
 export const component = {
   id: 'ImageBar',
   name: '图片展示',
-  icon: 'ep:picture',
+  icon: 'lucide:image',
   property: {
     imgUrl: '',
     url: '',
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/index.vue
index 5be469d97..b61ca641e 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/index.vue
@@ -3,6 +3,8 @@ import type { ImageBarProperty } from './config';
 
 import { IconifyIcon } from '@vben/icons';
 
+import { Image } from 'ant-design-vue';
+
 /** 图片展示 */
 defineOptions({ name: 'ImageBar' });
 
@@ -11,24 +13,15 @@ defineProps<{ property: ImageBarProperty }>();
 <template>
   <!-- 无图片 -->
   <div
-    class="flex h-12 items-center justify-center bg-gray-300"
+    class="bg-card flex h-12 items-center justify-center"
     v-if="!property.imgUrl"
   >
-    <IconifyIcon icon="ep:picture" class="text-3xl text-gray-600" />
+    <IconifyIcon icon="lucide:image" class="text-3xl text-gray-600" />
   </div>
   <Image
-    class="min-h-8 w-full"
+    class="block h-full min-h-8 w-full"
     v-else
     :src="property.imgUrl"
     :preview="false"
   />
 </template>
-
-<style scoped lang="scss">
-/* 图片 */
-img {
-  display: block;
-  width: 100%;
-  height: 100%;
-}
-</style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/property.vue
index 423d6dbf1..f62d06fac 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/property.vue
@@ -30,11 +30,9 @@ 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>
-        </UploadImg>
+        />
       </FormItem>
       <FormItem label="链接" prop="url">
         <AppLinkInput v-model="formData.url" />
@@ -42,5 +40,3 @@ const formData = useVModel(props, 'modelValue', emit);
     </Form>
   </ComponentContainerProperty>
 </template>
-
-<style scoped lang="scss"></style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/config.ts
index ef03fc9a6..02c7bc1c4 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/config.ts
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/config.ts
@@ -2,39 +2,24 @@ import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 广告魔方属性 */
 export interface MagicCubeProperty {
-  // 上圆角
-  borderRadiusTop: number;
-  // 下圆角
-  borderRadiusBottom: number;
-  // 间隔
-  space: number;
-  // 导航菜单列表
-  list: MagicCubeItemProperty[];
-  // 组件样式
-  style: ComponentStyle;
+  borderRadiusTop: number; // 上圆角
+  borderRadiusBottom: number; // 下圆角
+  space: number; // 间隔
+  list: MagicCubeItemProperty[]; // 导航菜单列表
+  style: ComponentStyle; // 组件样式
 }
 
 /** 广告魔方项目属性 */
 export interface MagicCubeItemProperty {
-  // 图标链接
-  imgUrl: string;
-  // 链接
-  url: string;
-  // 宽
-  width: number;
-  // 高
-  height: number;
-  // 上
-  top: number;
-  // 左
-  left: number;
-  // 右
-  right: number;
-  // 下
-  bottom: number;
+  imgUrl: string; // 图标链接
+  url: string; // 链接
+  width: number; // 宽
+  height: number; // 高
+  top: number; // 上
+  left: number; // 左
 }
 
-// 定义组件
+/** 定义组件 */
 export const component = {
   id: 'MagicCube',
   name: '广告魔方',
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/index.vue
index 1b3418b18..c5d9ead5b 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/index.vue
@@ -5,6 +5,8 @@ import { computed } from 'vue';
 
 import { IconifyIcon } from '@vben/icons';
 
+import { Image } from 'ant-design-vue';
+
 /** 广告魔方 */
 defineOptions({ name: 'MagicCube' });
 const props = defineProps<{ property: MagicCubeProperty }>();
@@ -78,5 +80,3 @@ const rowCount = computed(() => {
     </div>
   </div>
 </template>
-
-<style scoped lang="scss"></style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/property.vue
index 3f479b8c2..2fc781939 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/property.vue
@@ -1,4 +1,75 @@
 <script setup lang="ts">
-import { Page } from '@vben/common-ui';
+import type { MagicCubeProperty } from './config';
+
+import { ref } from 'vue';
+
+import { useVModel } from '@vueuse/core';
+import { Form, FormItem, Slider } from 'ant-design-vue';
+
+import UploadImg from '#/components/upload/image-upload.vue';
+import {
+  AppLinkInput,
+  MagicCubeEditor,
+} from '#/views/mall/promotion/components';
+
+import ComponentContainerProperty from '../../component-container-property.vue';
+
+/** 广告魔方属性面板 */
+defineOptions({ name: 'MagicCubeProperty' });
+
+const props = defineProps<{ modelValue: MagicCubeProperty }>();
+
+const emit = defineEmits(['update:modelValue']);
+
+const formData = useVModel(props, 'modelValue', emit);
+
+const selectedHotAreaIndex = ref(-1); // 选中的热区
+
+/** 处理热区被选中事件 */
+const handleHotAreaSelected = (_: any, index: number) => {
+  selectedHotAreaIndex.value = index;
+};
 </script>
-<template><Page>待完成</Page></template>
+
+<template>
+  <ComponentContainerProperty v-model="formData.style">
+    <Form :model="formData" class="mt-2">
+      <p class="text-base font-bold">魔方设置：</p>
+      <MagicCubeEditor
+        class="my-4"
+        v-model="formData.list"
+        :rows="4"
+        :cols="4"
+        @hot-area-selected="handleHotAreaSelected"
+      />
+      <template v-for="(hotArea, index) in formData.list" :key="index">
+        <template v-if="selectedHotAreaIndex === index">
+          <FormItem label="上传图片" :name="`list[${index}].imgUrl`">
+            <UploadImg
+              v-model="hotArea.imgUrl"
+              height="80px"
+              width="80px"
+              :show-description="false"
+            />
+          </FormItem>
+          <FormItem label="链接" :name="`list[${index}].url`">
+            <AppLinkInput v-model="hotArea.url" />
+          </FormItem>
+        </template>
+      </template>
+      <FormItem label="上圆角" name="borderRadiusTop">
+        <Slider v-model:value="formData.borderRadiusTop" :max="100" :min="0" />
+      </FormItem>
+      <FormItem label="下圆角" name="borderRadiusBottom">
+        <Slider
+          v-model:value="formData.borderRadiusBottom"
+          :max="100"
+          :min="0"
+        />
+      </FormItem>
+      <FormItem label="间隔" name="space">
+        <Slider v-model:value="formData.space" :max="100" :min="0" />
+      </FormItem>
+    </Form>
+  </ComponentContainerProperty>
+</template>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/config.ts
index db6b55264..0bf47b15d 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/config.ts
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/config.ts
@@ -4,41 +4,28 @@ import { cloneDeep } from '@vben/utils';
 
 /** 宫格导航属性 */
 export interface MenuGridProperty {
-  // 列数
-  column: number;
-  // 导航菜单列表
-  list: MenuGridItemProperty[];
-  // 组件样式
-  style: ComponentStyle;
+  column: number; // 列数
+  list: MenuGridItemProperty[]; // 导航菜单列表
+  style: ComponentStyle; // 组件样式
 }
 
 /** 宫格导航项目属性 */
 export interface MenuGridItemProperty {
-  // 图标链接
-  iconUrl: string;
-  // 标题
-  title: string;
-  // 标题颜色
-  titleColor: string;
-  // 副标题
-  subtitle: string;
-  // 副标题颜色
-  subtitleColor: string;
-  // 链接
-  url: string;
-  // 角标
+  iconUrl: string; // 图标链接
+  title: string; // 标题
+  titleColor: string; // 标题颜色
+  subtitle: string; // 副标题
+  subtitleColor: string; // 副标题颜色
+  url: string; // 链接
   badge: {
-    // 角标背景颜色
-    bgColor: string;
-    // 是否显示
-    show: boolean;
-    // 角标文字
-    text: string;
-    // 角标文字颜色
-    textColor: string;
+    bgColor: string; // 角标背景颜色
+    show: boolean; // 是否显示
+    text: string; // 角标文字
+    textColor: string; // 角标文字颜色
   };
 }
 
+/** 宫格导航项目默认属性 */
 export const EMPTY_MENU_GRID_ITEM_PROPERTY = {
   title: '标题',
   titleColor: '#333',
@@ -51,7 +38,7 @@ export const EMPTY_MENU_GRID_ITEM_PROPERTY = {
   },
 } as MenuGridItemProperty;
 
-// 定义组件
+/** 定义组件 */
 export const component = {
   id: 'MenuGrid',
   name: '宫格导航',
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/index.vue
index c1ff5d207..a572b74ae 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/index.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import type { MenuGridProperty } from './config';
 
+import { Image } from 'ant-design-vue';
+
 /** 宫格导航 */
 defineOptions({ name: 'MenuGrid' });
 defineProps<{ property: MenuGridProperty }>();
@@ -11,13 +13,13 @@ defineProps<{ property: MenuGridProperty }>();
     <div
       v-for="(item, index) in property.list"
       :key="index"
-      class="relative flex flex-col items-center pb-3.5 pt-5"
+      class="relative flex flex-col items-center pb-4 pt-4"
       :style="{ width: `${100 * (1 / property.column)}%` }"
     >
       <!-- 右上角角标 -->
       <span
         v-if="item.badge?.show"
-        class="absolute left-1/2 top-2.5 z-10 h-5 rounded-full px-1.5 text-center text-xs leading-5"
+        class="absolute left-1/2 top-2 z-10 h-4 rounded-full px-2 text-center text-xs leading-5"
         :style="{
           color: item.badge.textColor,
           backgroundColor: item.badge.bgColor,
@@ -27,7 +29,7 @@ defineProps<{ property: MenuGridProperty }>();
       </span>
       <Image
         v-if="item.iconUrl"
-        class="h-7 w-7"
+        :width="32"
         :src="item.iconUrl"
         :preview="false"
       />
@@ -46,5 +48,3 @@ defineProps<{ property: MenuGridProperty }>();
     </div>
   </div>
 </template>
-
-<style scoped lang="scss"></style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/property.vue
index c1506a4ca..de92c23c8 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/property.vue
@@ -2,19 +2,16 @@
 import type { MenuGridProperty } from './config';
 
 import { useVModel } from '@vueuse/core';
+import { Form, FormItem, Radio, RadioGroup, Switch } from 'ant-design-vue';
+
+import UploadImg from '#/components/upload/image-upload.vue';
 import {
-  Card,
-  Form,
-  FormItem,
-  Radio,
-  RadioGroup,
-  Switch,
-} from 'ant-design-vue';
+  AppLinkInput,
+  ColorInput,
+  Draggable,
+} from '#/views/mall/promotion/components';
 
 import ComponentContainerProperty from '../../component-container-property.vue';
-import UploadImg from '#/components/upload/image-upload.vue';
-import { AppLinkInput, Draggable } from '#/views/mall/promotion/components';
-
 import { EMPTY_MENU_GRID_ITEM_PROPERTY } from './config';
 
 /** 宫格导航属性面板 */
@@ -36,7 +33,8 @@ const formData = useVModel(props, 'modelValue', emit);
         </RadioGroup>
       </FormItem>
 
-      <Card header="菜单设置" class="property-group" shadow="never">
+      <p class="text-base font-bold">菜单设置</p>
+      <div class="flex flex-col gap-2 rounded-md p-4 shadow-lg">
         <Draggable
           v-model="formData.list"
           :empty-item="EMPTY_MENU_GRID_ITEM_PROPERTY"
@@ -53,13 +51,13 @@ const formData = useVModel(props, 'modelValue', emit);
               </UploadImg>
             </FormItem>
             <FormItem label="标题" prop="title">
-              <InputWithColor
+              <ColorInput
                 v-model="element.title"
                 v-model:color="element.titleColor"
               />
             </FormItem>
             <FormItem label="副标题" prop="subtitle">
-              <InputWithColor
+              <ColorInput
                 v-model="element.subtitle"
                 v-model:color="element.subtitleColor"
               />
@@ -72,7 +70,7 @@ const formData = useVModel(props, 'modelValue', emit);
             </FormItem>
             <template v-if="element.badge.show">
               <FormItem label="角标内容" prop="badge.text">
-                <InputWithColor
+                <ColorInput
                   v-model="element.badge.text"
                   v-model:color="element.badge.textColor"
                 />
@@ -83,9 +81,7 @@ const formData = useVModel(props, 'modelValue', emit);
             </template>
           </template>
         </Draggable>
-      </Card>
+      </div>
     </Form>
   </ComponentContainerProperty>
 </template>
-
-<style scoped lang="scss"></style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-list/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-list/config.ts
index 6567c553d..375546ae3 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-list/config.ts
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-list/config.ts
@@ -4,28 +4,21 @@ import { cloneDeep } from '@vben/utils';
 
 /** 列表导航属性 */
 export interface MenuListProperty {
-  // 导航菜单列表
-  list: MenuListItemProperty[];
-  // 组件样式
-  style: ComponentStyle;
+  list: MenuListItemProperty[]; // 导航菜单列表
+  style: ComponentStyle; // 组件样式
 }
 
 /** 列表导航项目属性 */
 export interface MenuListItemProperty {
-  // 图标链接
-  iconUrl: string;
-  // 标题
-  title: string;
-  // 标题颜色
-  titleColor: string;
-  // 副标题
-  subtitle: string;
-  // 副标题颜色
-  subtitleColor: string;
-  // 链接
-  url: string;
+  iconUrl: string; // 图标链接
+  title: string; // 标题
+  titleColor: string; // 标题颜色
+  subtitle: string; // 副标题
+  subtitleColor: string; // 副标题颜色
+  url: string; // 链接
 }
 
+/** 空的列表导航项目属性 */
 export const EMPTY_MENU_LIST_ITEM_PROPERTY = {
   title: '标题',
   titleColor: '#333',
@@ -33,7 +26,7 @@ export const EMPTY_MENU_LIST_ITEM_PROPERTY = {
   subtitleColor: '#bbb',
 };
 
-// 定义组件
+/** 定义组件 */
 export const component = {
   id: 'MenuList',
   name: '列表导航',
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-list/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-list/index.vue
index 2997b98dc..e7f67ee25 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-list/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-list/index.vue
@@ -11,30 +11,24 @@ defineProps<{ property: MenuListProperty }>();
 </script>
 
 <template>
-  <div class="flex min-h-[42px] flex-col">
+  <div class="flex min-h-10 flex-col">
     <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-10 flex-row items-center justify-between gap-1 border-t border-gray-200 px-3 first:border-t-0"
     >
       <div class="flex flex-1 flex-row items-center gap-2">
         <Image v-if="item.iconUrl" class="h-4 w-4" :src="item.iconUrl" />
-        <span class="text-base" :style="{ color: item.titleColor }">{{
-          item.title
-        }}</span>
+        <span class="text-base" :style="{ color: item.titleColor }">
+          {{ item.title }}
+        </span>
       </div>
       <div class="item-center flex flex-row justify-center gap-1">
-        <span class="text-xs" :style="{ color: item.subtitleColor }">{{
-          item.subtitle
-        }}</span>
-        <IconifyIcon icon="ep:arrow-right" color="#000" :size="16" />
+        <span class="text-xs" :style="{ color: item.subtitleColor }">
+          {{ item.subtitle }}
+        </span>
+        <IconifyIcon icon="lucide:arrow-right" class="size-4" />
       </div>
     </div>
   </div>
 </template>
-
-<style scoped lang="scss">
-.item + .item {
-  border-top: 1px solid #eee;
-}
-</style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-list/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-list/property.vue
index 3f479b8c2..33bc46ac7 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-list/property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-list/property.vue
@@ -1,4 +1,64 @@
 <script setup lang="ts">
-import { Page } from '@vben/common-ui';
+import type { MenuListProperty } from './config';
+
+import { useVModel } from '@vueuse/core';
+import { Form, FormItem } from 'ant-design-vue';
+
+import UploadImg from '#/components/upload/image-upload.vue';
+import {
+  AppLinkInput,
+  Draggable,
+  InputWithColor,
+} from '#/views/mall/promotion/components';
+
+import ComponentContainerProperty from '../../component-container-property.vue';
+import { EMPTY_MENU_LIST_ITEM_PROPERTY } from './config';
+
+/** 列表导航属性面板 */
+defineOptions({ name: 'MenuListProperty' });
+
+const props = defineProps<{ modelValue: MenuListProperty }>();
+
+const emit = defineEmits(['update:modelValue']);
+
+const formData = useVModel(props, 'modelValue', emit);
 </script>
-<template><Page>待完成</Page></template>
+
+<template>
+  <ComponentContainerProperty v-model="formData.style">
+    <p class="text-base font-bold">菜单设置</p>
+    <Form :model="formData" class="mt-2">
+      <Draggable
+        v-model="formData.list"
+        :empty-item="EMPTY_MENU_LIST_ITEM_PROPERTY"
+      >
+        <template #default="{ element }">
+          <FormItem label="图标" name="iconUrl">
+            <UploadImg
+              v-model="element.iconUrl"
+              height="80px"
+              width="80px"
+              :show-description="false"
+            />
+            <p class="text-sm text-gray-500">建议尺寸：44 * 44</p>
+          </FormItem>
+          <FormItem label="标题" name="title">
+            <InputWithColor
+              v-model="element.title"
+              v-model:color="element.titleColor"
+            />
+          </FormItem>
+          <FormItem label="副标题" name="subtitle">
+            <InputWithColor
+              v-model="element.subtitle"
+              v-model:color="element.subtitleColor"
+            />
+          </FormItem>
+          <FormItem label="链接" name="url">
+            <AppLinkInput v-model="element.url" />
+          </FormItem>
+        </template>
+      </Draggable>
+    </Form>
+  </ComponentContainerProperty>
+</template>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-swiper/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-swiper/config.ts
index 27138ebee..fa83498c8 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-swiper/config.ts
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-swiper/config.ts
@@ -4,40 +4,28 @@ import { cloneDeep } from '@vben/utils';
 
 /** 菜单导航属性 */
 export interface MenuSwiperProperty {
-  // 布局： 图标+文字 | 图标
-  layout: 'icon' | 'iconText';
-  // 行数
-  row: number;
-  // 列数
-  column: number;
-  // 导航菜单列表
-  list: MenuSwiperItemProperty[];
-  // 组件样式
-  style: ComponentStyle;
-}
-/** 菜单导航项目属性 */
-export interface MenuSwiperItemProperty {
-  // 图标链接
-  iconUrl: string;
-  // 标题
-  title: string;
-  // 标题颜色
-  titleColor: string;
-  // 链接
-  url: string;
-  // 角标
-  badge: {
-    // 角标背景颜色
-    bgColor: string;
-    // 是否显示
-    show: boolean;
-    // 角标文字
-    text: string;
-    // 角标文字颜色
-    textColor: string;
-  };
+  layout: 'icon' | 'iconText'; // 布局：图标+文字 | 图标
+  row: number; // 行数
+  column: number; // 列数
+  list: MenuSwiperItemProperty[]; // 导航菜单列表
+  style: ComponentStyle; // 组件样式
 }
 
+/** 菜单导航项目属性 */
+export interface MenuSwiperItemProperty {
+  iconUrl: string; // 图标链接
+  title: string; // 标题
+  titleColor: string; // 标题颜色
+  url: string; // 链接
+  badge: {
+    bgColor: string; // 角标背景颜色
+    show: boolean; // 是否显示
+    text: string; // 角标文字
+    textColor: string; // 角标文字颜色
+  }; // 角标
+}
+
+/** 空菜单导航项目属性 */
 export const EMPTY_MENU_SWIPER_ITEM_PROPERTY = {
   title: '标题',
   titleColor: '#333',
@@ -48,7 +36,7 @@ export const EMPTY_MENU_SWIPER_ITEM_PROPERTY = {
   },
 } as MenuSwiperItemProperty;
 
-// 定义组件
+/** 定义组件 */
 export const component = {
   id: 'MenuSwiper',
   name: '菜单导航',
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-swiper/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-swiper/index.vue
index e92f0a5aa..0dcd9d468 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-swiper/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-swiper/index.vue
@@ -3,6 +3,8 @@ import type { MenuSwiperItemProperty, MenuSwiperProperty } from './config';
 
 import { ref, watch } from 'vue';
 
+import { Image } from 'ant-design-vue';
+
 /** 菜单导航 */
 defineOptions({ name: 'MenuSwiper' });
 const props = defineProps<{ property: MenuSwiperProperty }>();
@@ -122,14 +124,14 @@ watch(
     button {
       width: 6px;
       height: 6px;
-      background: #ff6000;
+      background: hsl(var(--red));
       border-radius: 6px;
     }
   }
 
   .ant-carousel-dot-active button {
     width: 12px;
-    background: #ff6000;
+    background: hsl(var(--red));
   }
 }
 </style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-swiper/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-swiper/property.vue
index 3f479b8c2..caaa091e9 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-swiper/property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-swiper/property.vue
@@ -1,4 +1,103 @@
 <script setup lang="ts">
-import { Page } from '@vben/common-ui';
+import type { MenuSwiperProperty } from './config';
+
+import { cloneDeep } from '@vben/utils';
+
+import { useVModel } from '@vueuse/core';
+import {
+  Card,
+  Form,
+  FormItem,
+  Radio,
+  RadioGroup,
+  Switch,
+} from 'ant-design-vue';
+
+import UploadImg from '#/components/upload/image-upload.vue';
+import {
+  AppLinkInput,
+  ColorInput,
+  Draggable,
+  InputWithColor,
+} from '#/views/mall/promotion/components';
+
+import ComponentContainerProperty from '../../component-container-property.vue';
+import { EMPTY_MENU_SWIPER_ITEM_PROPERTY } from './config';
+
+/** 菜单导航属性面板 */
+defineOptions({ name: 'MenuSwiperProperty' });
+
+const props = defineProps<{ modelValue: MenuSwiperProperty }>();
+
+const emit = defineEmits(['update:modelValue']);
+
+const formData = useVModel(props, 'modelValue', emit);
 </script>
-<template><Page>待完成</Page></template>
+
+<template>
+  <ComponentContainerProperty v-model="formData.style">
+    <Form :model="formData" class="mt-2">
+      <FormItem label="布局" name="layout">
+        <RadioGroup v-model:value="formData.layout">
+          <Radio value="iconText">图标+文字</Radio>
+          <Radio value="icon">仅图标</Radio>
+        </RadioGroup>
+      </FormItem>
+      <FormItem label="行数" name="row">
+        <RadioGroup v-model:value="formData.row">
+          <Radio :value="1">1行</Radio>
+          <Radio :value="2">2行</Radio>
+        </RadioGroup>
+      </FormItem>
+      <FormItem label="列数" name="column">
+        <RadioGroup v-model:value="formData.column">
+          <Radio :value="3">3列</Radio>
+          <Radio :value="4">4列</Radio>
+          <Radio :value="5">5列</Radio>
+        </RadioGroup>
+      </FormItem>
+      <Card title="菜单设置" class="property-group">
+        <Draggable
+          v-model="formData.list"
+          :empty-item="cloneDeep(EMPTY_MENU_SWIPER_ITEM_PROPERTY)"
+        >
+          <template #default="{ element }">
+            <FormItem label="图标" name="iconUrl">
+              <UploadImg
+                v-model="element.iconUrl"
+                height="80px"
+                width="80px"
+                :show-description="false"
+              >
+                <template #tip> 建议尺寸：98 * 98 </template>
+              </UploadImg>
+            </FormItem>
+            <FormItem label="标题" name="title">
+              <InputWithColor
+                v-model="element.title"
+                v-model:color="element.titleColor"
+              />
+            </FormItem>
+            <FormItem label="链接" name="url">
+              <AppLinkInput v-model="element.url" />
+            </FormItem>
+            <FormItem label="显示角标" name="badge.show">
+              <Switch v-model:checked="element.badge.show" />
+            </FormItem>
+            <template v-if="element.badge.show">
+              <FormItem label="角标内容" name="badge.text">
+                <InputWithColor
+                  v-model="element.badge.text"
+                  v-model:color="element.badge.textColor"
+                />
+              </FormItem>
+              <FormItem label="背景颜色" name="badge.bgColor">
+                <ColorInput v-model="element.badge.bgColor" />
+              </FormItem>
+            </template>
+          </template>
+        </Draggable>
+      </Card>
+    </Form>
+  </ComponentContainerProperty>
+</template>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/components/cell-property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/components/cell-property.vue
index faed4f2e9..410d555c4 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/components/cell-property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/components/cell-property.vue
@@ -6,7 +6,14 @@ import type { Rect } from '#/views/mall/promotion/components/magic-cube-editor/u
 import { computed, ref } from 'vue';
 
 import { useVModel } from '@vueuse/core';
-import { FormItem, Input, Radio, RadioGroup, Slider } from 'ant-design-vue';
+import {
+  FormItem,
+  Image,
+  Input,
+  Radio,
+  RadioGroup,
+  Slider,
+} from 'ant-design-vue';
 
 import appNavBarMp from '#/assets/imgs/diy/app-nav-bar-mp.png';
 import UploadImg from '#/components/upload/image-upload.vue';
@@ -71,12 +78,7 @@ const handleHotAreaSelected = (
       class="m-b-16px"
       @hot-area-selected="handleHotAreaSelected"
     />
-    <img
-      v-if="isMp"
-      alt=""
-      style="width: 76px; height: 30px"
-      :src="appNavBarMp"
-    />
+    <Image v-if="isMp" alt="" class="w-19 h-8" :src="appNavBarMp" />
   </div>
   <template v-for="(cell, cellIndex) in cellList" :key="cellIndex">
     <template v-if="selectedHotAreaIndex === Number(cellIndex)">
@@ -105,12 +107,10 @@ const handleHotAreaSelected = (
           <UploadImg
             v-model="cell.imgUrl"
             :limit="1"
-            height="56px"
-            width="56px"
             :show-description="false"
-          >
-            <template #tip>建议尺寸 56*56</template>
-          </UploadImg>
+            class="size-14"
+          />
+          <span class="text-xs text-gray-500">建议尺寸 56*56</span>
         </FormItem>
         <FormItem label="链接">
           <AppLinkInput v-model="cell.url" />
@@ -128,5 +128,3 @@ const handleHotAreaSelected = (
     </template>
   </template>
 </template>
-
-<style lang="scss" scoped></style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/config.ts
index fd675b16e..c2769cc51 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/config.ts
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/config.ts
@@ -2,56 +2,38 @@ import type { DiyComponent } from '../../../util';
 
 /** 顶部导航栏属性 */
 export interface NavigationBarProperty {
-  // 背景类型
-  bgType: 'color' | 'img';
-  // 背景颜色
-  bgColor: string;
-  // 图片链接
-  bgImg: string;
-  // 样式类型：默认 | 沉浸式
-  styleType: 'inner' | 'normal';
-  // 常驻显示
-  alwaysShow: boolean;
-  // 小程序单元格列表
-  mpCells: NavigationBarCellProperty[];
-  // 其它平台单元格列表
-  otherCells: NavigationBarCellProperty[];
-  // 本地变量
+  bgType: 'color' | 'img'; // 背景类型
+  bgColor: string; // 背景颜色
+  bgImg: string; // 图片链接
+  styleType: 'inner' | 'normal'; // 样式类型：默认 | 沉浸式
+  alwaysShow: boolean; // 常驻显示
+  mpCells: NavigationBarCellProperty[]; // 小程序单元格列表
+  otherCells: NavigationBarCellProperty[]; // 其它平台单元格列表
   _local: {
-    // 预览顶部导航（小程序）
-    previewMp: boolean;
-    // 预览顶部导航（非小程序）
-    previewOther: boolean;
-  };
+    previewMp: boolean; // 预览顶部导航（小程序）
+    previewOther: boolean; // 预览顶部导航（非小程序）
+  }; // 本地变量
 }
 
 /** 顶部导航栏 - 单元格 属性 */
 export interface NavigationBarCellProperty {
-  // 类型：文字 | 图片 | 搜索框
-  type: 'image' | 'search' | 'text';
-  // 宽度
-  width: number;
-  // 高度
-  height: number;
-  // 顶部位置
-  top: number;
-  // 左侧位置
-  left: number;
-  // 文字内容
-  text: string;
-  // 文字颜色
-  textColor: string;
-  // 图片地址
-  imgUrl: string;
-  // 图片链接
-  url: string;
-  // 搜索框：提示文字
-  placeholder: string;
-  // 搜索框：边框圆角半径
-  borderRadius: number;
+  type: 'image' | 'search' | 'text'; // 类型：文字 | 图片 | 搜索框
+  width: number; // 宽度
+  height: number; // 高度
+  top: number; // 顶部位置
+  left: number; // 左侧位置
+  text: string; // 文字内容
+  textColor: string; // 文字颜色
+  imgUrl: string; // 图片地址
+  url: string; // 图片链接
+  backgroundColor: string; // 搜索框：框体颜色
+  placeholder: string; // 搜索框：提示文字
+  placeholderPosition: string; // 搜索框：提示文字位置
+  showScan: boolean; // 搜索框：是否显示扫一扫
+  borderRadius: number; // 搜索框：边框圆角半径
 }
 
-// 定义组件
+/** 定义组件 */
 export const component = {
   id: 'NavigationBar',
   name: '顶部导航栏',
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/index.vue
index 9e3b17a07..2fca3af61 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/index.vue
@@ -35,8 +35,8 @@ const cellList = computed(() =>
 // 单元格宽度
 const cellWidth = computed(() => {
   return props.property._local?.previewMp
-    ? (375 - 80 - 86) / 6
-    : (375 - 90) / 8;
+    ? (384 - 80 - 86) / 6
+    : (384 - 90) / 8;
 });
 // 获得单元格样式
 const getCellStyle = (cell: NavigationBarCellProperty) => {
@@ -78,7 +78,7 @@ const getSearchProp = computed(() => (cell: NavigationBarCellProperty) => {
       v-if="property._local?.previewMp"
       :src="appNavbarMp"
       alt=""
-      style="width: 86px; height: 30px"
+      class="w-22 h-8"
     />
   </div>
 </template>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/property.vue
index 9bca36269..860ba178b 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/property.vue
@@ -130,5 +130,3 @@ if (!formData.value._local) {
     </Card>
   </Form>
 </template>
-
-<style scoped lang="scss"></style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/config.ts
index 2d4acffb2..b8fc2e910 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/config.ts
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/config.ts
@@ -2,31 +2,24 @@ import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 公告栏属性 */
 export interface NoticeBarProperty {
-  // 图标地址
-  iconUrl: string;
-  // 公告内容列表
-  contents: NoticeContentProperty[];
-  // 背景颜色
-  backgroundColor: string;
-  // 文字颜色
-  textColor: string;
-  // 组件样式
-  style: ComponentStyle;
+  iconUrl: string; // 图标地址
+  contents: NoticeContentProperty[]; // 公告内容列表
+  backgroundColor: string; // 背景颜色
+  textColor: string; // 文字颜色
+  style: ComponentStyle; // 组件样式
 }
 
 /** 内容属性 */
 export interface NoticeContentProperty {
-  // 内容文字
-  text: string;
-  // 链接地址
-  url: string;
+  text: string; // 内容文字
+  url: string; // 链接地址
 }
 
-// 定义组件
+/** 定义组件 */
 export const component = {
   id: 'NoticeBar',
   name: '公告栏',
-  icon: 'ep:bell',
+  icon: 'lucide:bell',
   property: {
     iconUrl: 'http://mall.yudao.iocoder.cn/static/images/xinjian.png',
     contents: [
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/index.vue
index d225751ed..a8fd24c02 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/index.vue
@@ -33,7 +33,7 @@ setInterval(() => {
     <div class="h-6 flex-1 truncate pr-2 leading-6">
       {{ property.contents?.[activeIndex]?.text }}
     </div>
-    <IconifyIcon icon="ep:arrow-right" />
+    <IconifyIcon icon="lucide:arrow-right" />
   </div>
 </template>
 
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/property.vue
index 3f479b8c2..fef33c016 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/property.vue
@@ -1,4 +1,61 @@
 <script setup lang="ts">
-import { Page } from '@vben/common-ui';
+import type { NoticeBarProperty } from './config';
+
+import { useVModel } from '@vueuse/core';
+import { Card, Form, FormItem, Input } from 'ant-design-vue';
+
+import UploadImg from '#/components/upload/image-upload.vue';
+import {
+  AppLinkInput,
+  ColorInput,
+  Draggable,
+} from '#/views/mall/promotion/components';
+
+import ComponentContainerProperty from '../../component-container-property.vue';
+
+/** 公告栏属性面板 */
+defineOptions({ name: 'NoticeBarProperty' });
+
+const props = defineProps<{ modelValue: NoticeBarProperty }>();
+
+const emit = defineEmits(['update:modelValue']);
+
+const formData = useVModel(props, 'modelValue', emit);
+const rules = {
+  content: [{ required: true, message: '请输入公告', trigger: 'blur' }],
+}; // 表单校验
 </script>
-<template><Page>待完成</Page></template>
+
+<template>
+  <ComponentContainerProperty v-model="formData.style">
+    <Form :model="formData" :rules="rules">
+      <FormItem label="公告图标" name="iconUrl">
+        <UploadImg
+          v-model="formData.iconUrl"
+          height="48px"
+          :show-description="false"
+        >
+          <template #tip>建议尺寸：24 * 24</template>
+        </UploadImg>
+      </FormItem>
+      <FormItem label="背景颜色" name="backgroundColor">
+        <ColorInput v-model="formData.backgroundColor" />
+      </FormItem>
+      <FormItem label="文字颜色" name="textColor">
+        <ColorInput v-model="formData.textColor" />
+      </FormItem>
+      <Card title="公告内容" class="property-group">
+        <Draggable v-model="formData.contents">
+          <template #default="{ element }">
+            <FormItem label="公告" name="text">
+              <Input v-model:value="element.text" placeholder="请输入公告" />
+            </FormItem>
+            <FormItem label="链接" name="url">
+              <AppLinkInput v-model="element.url" />
+            </FormItem>
+          </template>
+        </Draggable>
+      </Card>
+    </Form>
+  </ComponentContainerProperty>
+</template>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/page-config/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/page-config/config.ts
index 73032a84a..79661b0f3 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/page-config/config.ts
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/page-config/config.ts
@@ -2,19 +2,16 @@ import type { DiyComponent } from '../../../util';
 
 /** 页面设置属性 */
 export interface PageConfigProperty {
-  // 页面描述
-  description: string;
-  // 页面背景颜色
-  backgroundColor: string;
-  // 页面背景图片
-  backgroundImage: string;
+  description: string; // 页面描述
+  backgroundColor: string; // 页面背景颜色
+  backgroundImage: string; // 页面背景图片
 }
 
-// 定义页面组件
+/** 定义页面组件 */
 export const component = {
   id: 'PageConfig',
   name: '页面设置',
-  icon: 'ep:document',
+  icon: 'lucide:file-text',
   property: {
     description: '',
     backgroundColor: '#f5f5f5',
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-card/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-card/config.ts
index d165b01f6..82009b6b7 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-card/config.ts
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-card/config.ts
@@ -2,67 +2,44 @@ import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 商品卡片属性 */
 export interface ProductCardProperty {
-  // 布局类型：单列大图 | 单列小图 | 双列
-  layoutType: 'oneColBigImg' | 'oneColSmallImg' | 'twoCol';
-  // 商品字段
+  layoutType: 'oneColBigImg' | 'oneColSmallImg' | 'twoCol'; // 布局类型：单列大图 | 单列小图 | 双列
   fields: {
-    // 商品简介
-    introduction: ProductCardFieldProperty;
-    // 商品市场价
-    marketPrice: ProductCardFieldProperty;
-    // 商品名称
-    name: ProductCardFieldProperty;
-    // 商品价格
-    price: ProductCardFieldProperty;
-    // 商品销量
-    salesCount: ProductCardFieldProperty;
-    // 商品库存
-    stock: ProductCardFieldProperty;
-  };
-  // 角标
+    introduction: ProductCardFieldProperty; // 商品简介
+    marketPrice: ProductCardFieldProperty; // 商品市场价
+    name: ProductCardFieldProperty; // 商品名称
+    price: ProductCardFieldProperty; // 商品价格
+    salesCount: ProductCardFieldProperty; // 商品销量
+    stock: ProductCardFieldProperty; // 商品库存
+  }; // 商品字段
   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;
-  // 商品编号列表
-  spuIds: number[];
-  // 组件样式
-  style: ComponentStyle;
-}
-// 商品字段
-export interface ProductCardFieldProperty {
-  // 是否显示
-  show: boolean;
-  // 颜色
-  color: string;
+    bgBeginColor: string; // 文字按钮：背景渐变起始颜色
+    bgEndColor: string; // 文字按钮：背景渐变结束颜色
+    imgUrl: string; // 图片按钮：图片地址
+    text: string; // 文字
+    type: 'img' | 'text'; // 类型：文字 | 图片
+  }; // 按钮
+  borderRadiusTop: number; // 上圆角
+  borderRadiusBottom: number; // 下圆角
+  space: number; // 间距
+  spuIds: number[]; // 商品编号列表
+  style: ComponentStyle; // 组件样式
 }
 
-// 定义组件
+/** 商品字段属性 */
+export interface ProductCardFieldProperty {
+  show: boolean; // 是否显示
+  color: string; // 颜色
+}
+
+/** 定义组件 */
 export const component = {
   id: 'ProductCard',
   name: '商品卡片',
-  icon: 'fluent:text-column-two-left-24-filled',
+  icon: 'lucide:grid-3x3',
   property: {
     layoutType: 'oneColBigImg',
     fields: {
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-card/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-card/index.vue
index 16f91e1e1..950e8776f 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-card/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-card/index.vue
@@ -32,7 +32,7 @@ watch(
  * 计算商品的间距
  * @param index 商品索引
  */
-const calculateSpace = (index: number) => {
+function calculateSpace(index: number) {
   // 商品的列数
   const columns = props.property.layoutType === 'twoCol' ? 2 : 1;
   // 第一列没有左边距
@@ -41,19 +41,19 @@ const calculateSpace = (index: number) => {
   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') {
     width = `${(containerRef.value.offsetWidth - props.property.space) / 2}px`;
   }
   return { width };
-};
+}
 </script>
 <template>
   <div
@@ -61,7 +61,7 @@ const calculateWidth = () => {
     ref="containerRef"
   >
     <div
-      class="relative box-content flex flex-row flex-wrap overflow-hidden bg-white"
+      class="bg-card relative box-content flex flex-row flex-wrap overflow-hidden"
       :style="{
         ...calculateSpace(index),
         ...calculateWidth(),
@@ -78,30 +78,26 @@ const calculateWidth = () => {
         v-if="property.badge.show && property.badge.imgUrl"
         class="absolute left-0 top-0 z-[1] items-center justify-center"
       >
-        <Image
-          fit="cover"
-          :src="property.badge.imgUrl"
-          class="h-[26px] w-[38px]"
-        />
+        <Image fit="cover" :src="property.badge.imgUrl" class="h-6 w-8" />
       </div>
       <!-- 商品封面图 -->
       <div
-        class="h-[140px]"
+        class="h-36"
         :class="[
           {
             'w-full': property.layoutType !== 'oneColSmallImg',
-            'w-[140px]': property.layoutType === 'oneColSmallImg',
+            'w-36': property.layoutType === 'oneColSmallImg',
           },
         ]"
       >
         <Image fit="cover" class="h-full w-full" :src="spu.picUrl" />
       </div>
       <div
-        class="box-border flex flex-col gap-[8px] p-[8px]"
+        class="box-border flex flex-col gap-2 p-2"
         :class="[
           {
             'w-full': property.layoutType !== 'oneColSmallImg',
-            'w-[calc(100%-140px-16px)]':
+            'w-[calc(100vh-140px-16px)]':
               property.layoutType === 'oneColSmallImg',
           },
         ]"
@@ -109,7 +105,7 @@ const calculateWidth = () => {
         <!-- 商品名称 -->
         <div
           v-if="property.fields.name.show"
-          class="text-[14px]"
+          class="text-sm"
           :class="[
             {
               truncate: property.layoutType !== 'oneColSmallImg',
@@ -124,7 +120,7 @@ const calculateWidth = () => {
         <!-- 商品简介 -->
         <div
           v-if="property.fields.introduction.show"
-          class="truncate text-[12px]"
+          class="truncate text-xs"
           :style="{ color: property.fields.introduction.color }"
         >
           {{ spu.introduction }}
@@ -133,7 +129,7 @@ const calculateWidth = () => {
           <!-- 价格 -->
           <span
             v-if="property.fields.price.show"
-            class="text-[16px]"
+            class="text-base"
             :style="{ color: property.fields.price.color }"
           >
             ￥{{ fenToYuan(spu.price as any) }}
@@ -141,12 +137,12 @@ const calculateWidth = () => {
           <!-- 市场价 -->
           <span
             v-if="property.fields.marketPrice.show && spu.marketPrice"
-            class="ml-[4px] text-[10px] line-through"
+            class="ml-1 text-xs line-through"
             :style="{ color: property.fields.marketPrice.color }"
             >￥{{ fenToYuan(spu.marketPrice) }}
           </span>
         </div>
-        <div class="text-[12px]">
+        <div class="text-xs">
           <!-- 销量 -->
           <span
             v-if="property.fields.salesCount.show"
@@ -164,11 +160,11 @@ const calculateWidth = () => {
         </div>
       </div>
       <!-- 购买按钮 -->
-      <div class="absolute bottom-[8px] right-[8px]">
+      <div class="absolute bottom-2 right-2">
         <!-- 文字按钮 -->
         <span
           v-if="property.btnBuy.type === 'text'"
-          class="rounded-full px-[12px] py-[4px] text-[12px] text-white"
+          class="rounded-full px-3 py-1 text-sm text-white"
           :style="{
             background: `linear-gradient(to right, ${property.btnBuy.bgBeginColor}, ${property.btnBuy.bgEndColor}`,
           }"
@@ -178,7 +174,7 @@ const calculateWidth = () => {
         <!-- 图片按钮 -->
         <Image
           v-else
-          class="h-[28px] w-[28px] rounded-full"
+          class="size-7 rounded-full"
           fit="cover"
           :src="property.btnBuy.imgUrl"
         />
@@ -186,5 +182,3 @@ const calculateWidth = () => {
     </div>
   </div>
 </template>
-
-<style scoped lang="scss"></style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-card/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-card/property.vue
index 3f479b8c2..701b9f694 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-card/property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-card/property.vue
@@ -1,4 +1,175 @@
 <script setup lang="ts">
-import { Page } from '@vben/common-ui';
+import type { ProductCardProperty } from './config';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { useVModel } from '@vueuse/core';
+import {
+  Card,
+  Checkbox,
+  Form,
+  FormItem,
+  Input,
+  RadioButton,
+  RadioGroup,
+  Slider,
+  Switch,
+  Tooltip,
+} from 'ant-design-vue';
+
+import UploadImg from '#/components/upload/image-upload.vue';
+import { SpuShowcase } from '#/views/mall/product/spu/components';
+import { ColorInput } from '#/views/mall/promotion/components';
+
+import ComponentContainerProperty from '../../component-container-property.vue';
+
+/** 商品卡片属性面板 */
+defineOptions({ name: 'ProductCardProperty' });
+
+const props = defineProps<{ modelValue: ProductCardProperty }>();
+
+const emit = defineEmits(['update:modelValue']);
+
+const formData = useVModel(props, 'modelValue', emit);
 </script>
-<template><Page>待完成</Page></template>
+
+<template>
+  <ComponentContainerProperty v-model="formData.style">
+    <Form :model="formData">
+      <Card title="商品列表" class="property-group">
+        <SpuShowcase v-model="formData.spuIds" />
+      </Card>
+      <Card title="商品样式" class="property-group">
+        <FormItem label="布局" name="type">
+          <RadioGroup v-model:value="formData.layoutType">
+            <Tooltip title="单列大图" placement="bottom">
+              <RadioButton value="oneColBigImg">
+                <IconifyIcon
+                  icon="fluent:text-column-one-24-filled"
+                  class="size-6"
+                />
+              </RadioButton>
+            </Tooltip>
+            <Tooltip title="单列小图" placement="bottom">
+              <RadioButton value="oneColSmallImg">
+                <IconifyIcon
+                  icon="fluent:text-column-two-left-24-filled"
+                  class="size-6"
+                />
+              </RadioButton>
+            </Tooltip>
+            <Tooltip title="双列" placement="bottom">
+              <RadioButton value="twoCol">
+                <IconifyIcon
+                  icon="fluent:text-column-two-24-filled"
+                  class="size-6"
+                />
+              </RadioButton>
+            </Tooltip>
+          </RadioGroup>
+        </FormItem>
+        <FormItem label="商品名称" name="fields.name.show">
+          <div class="flex gap-2">
+            <ColorInput v-model="formData.fields.name.color" />
+            <Checkbox v-model:checked="formData.fields.name.show" />
+          </div>
+        </FormItem>
+        <FormItem label="商品简介" name="fields.introduction.show">
+          <div class="flex gap-2">
+            <ColorInput v-model="formData.fields.introduction.color" />
+            <Checkbox v-model:checked="formData.fields.introduction.show" />
+          </div>
+        </FormItem>
+        <FormItem label="商品价格" name="fields.price.show">
+          <div class="flex gap-2">
+            <ColorInput v-model="formData.fields.price.color" />
+            <Checkbox v-model:checked="formData.fields.price.show" />
+          </div>
+        </FormItem>
+        <FormItem label="市场价" name="fields.marketPrice.show">
+          <div class="flex gap-2">
+            <ColorInput v-model="formData.fields.marketPrice.color" />
+            <Checkbox v-model:checked="formData.fields.marketPrice.show" />
+          </div>
+        </FormItem>
+        <FormItem label="商品销量" name="fields.salesCount.show">
+          <div class="flex gap-2">
+            <ColorInput v-model="formData.fields.salesCount.color" />
+            <Checkbox v-model:checked="formData.fields.salesCount.show" />
+          </div>
+        </FormItem>
+        <FormItem label="商品库存" name="fields.stock.show">
+          <div class="flex gap-2">
+            <ColorInput v-model="formData.fields.stock.color" />
+            <Checkbox v-model:checked="formData.fields.stock.show" />
+          </div>
+        </FormItem>
+      </Card>
+      <Card title="角标" class="property-group">
+        <FormItem label="角标" name="badge.show">
+          <Switch v-model:checked="formData.badge.show" />
+        </FormItem>
+        <FormItem label="角标" name="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>
+          </UploadImg>
+        </FormItem>
+      </Card>
+      <Card title="按钮" class="property-group">
+        <FormItem label="按钮类型" name="btnBuy.type">
+          <RadioGroup v-model:value="formData.btnBuy.type">
+            <RadioButton value="text">文字</RadioButton>
+            <RadioButton value="img">图片</RadioButton>
+          </RadioGroup>
+        </FormItem>
+        <template v-if="formData.btnBuy.type === 'text'">
+          <FormItem label="按钮文字" name="btnBuy.text">
+            <Input v-model:value="formData.btnBuy.text" />
+          </FormItem>
+          <FormItem label="左侧背景" name="btnBuy.bgBeginColor">
+            <ColorInput v-model="formData.btnBuy.bgBeginColor" />
+          </FormItem>
+          <FormItem label="右侧背景" name="btnBuy.bgEndColor">
+            <ColorInput v-model="formData.btnBuy.bgEndColor" />
+          </FormItem>
+        </template>
+        <template v-else>
+          <FormItem label="图片" name="btnBuy.imgUrl">
+            <UploadImg
+              v-model="formData.btnBuy.imgUrl"
+              height="56px"
+              width="56px"
+              :show-description="false"
+            >
+              <template #tip> 建议尺寸：56 * 56 </template>
+            </UploadImg>
+          </FormItem>
+        </template>
+      </Card>
+      <Card title="商品样式" class="property-group">
+        <FormItem label="上圆角" name="borderRadiusTop">
+          <Slider
+            v-model:value="formData.borderRadiusTop"
+            :max="100"
+            :min="0"
+          />
+        </FormItem>
+        <FormItem label="下圆角" name="borderRadiusBottom">
+          <Slider
+            v-model:value="formData.borderRadiusBottom"
+            :max="100"
+            :min="0"
+          />
+        </FormItem>
+        <FormItem label="间隔" name="space">
+          <Slider v-model:value="formData.space" :max="100" :min="0" />
+        </FormItem>
+      </Card>
+    </Form>
+  </ComponentContainerProperty>
+</template>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/config.ts
index 20b4d37af..f5d3e4e5f 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/config.ts
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/config.ts
@@ -2,42 +2,29 @@ import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 商品栏属性 */
 export interface ProductListProperty {
-  // 布局类型：双列 | 三列 | 水平滑动
-  layoutType: 'horizSwiper' | 'threeCol' | 'twoCol';
-  // 商品字段
+  layoutType: 'horizSwiper' | 'threeCol' | 'twoCol'; // 布局类型：双列 | 三列 | 水平滑动
   fields: {
-    // 商品名称
-    name: ProductListFieldProperty;
-    // 商品价格
-    price: ProductListFieldProperty;
-  };
-  // 角标
+    name: ProductListFieldProperty; // 商品名称
+    price: ProductListFieldProperty; // 商品价格
+  }; // 商品字段
   badge: {
-    // 角标图片
-    imgUrl: string;
-    // 是否显示
-    show: boolean;
-  };
-  // 上圆角
-  borderRadiusTop: number;
-  // 下圆角
-  borderRadiusBottom: number;
-  // 间距
-  space: number;
-  // 商品编号列表
-  spuIds: number[];
-  // 组件样式
-  style: ComponentStyle;
-}
-// 商品字段
-export interface ProductListFieldProperty {
-  // 是否显示
-  show: boolean;
-  // 颜色
-  color: string;
+    imgUrl: string; // 角标图片
+    show: boolean; // 是否显示
+  }; // 角标
+  borderRadiusTop: number; // 上圆角
+  borderRadiusBottom: number; // 下圆角
+  space: number; // 间距
+  spuIds: number[]; // 商品编号列表
+  style: ComponentStyle; // 组件样式
 }
 
-// 定义组件
+/** 商品字段属性 */
+export interface ProductListFieldProperty {
+  show: boolean; // 是否显示
+  color: string; // 颜色
+}
+
+/** 定义组件 */
 export const component = {
   id: 'ProductList',
   name: '商品栏',
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/index.vue
index d334376ee..446b78b61 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/index.vue
@@ -7,6 +7,8 @@ import { onMounted, ref, watch } from 'vue';
 
 import { fenToYuan } from '@vben/utils';
 
+import { Image } from 'ant-design-vue';
+
 import { getSpuDetailList } from '#/api/mall/product/spu';
 
 /** 商品栏 */
@@ -26,7 +28,7 @@ watch(
   },
 );
 // 手机宽度
-const phoneWidth = ref(375);
+const phoneWidth = ref(384);
 // 容器
 const containerRef = ref();
 // 商品的列数
@@ -69,7 +71,7 @@ watch(
 );
 onMounted(() => {
   // 提取手机宽度
-  phoneWidth.value = containerRef.value?.wrapRef?.offsetWidth || 375;
+  phoneWidth.value = containerRef.value?.wrapRef?.offsetWidth || 384;
 });
 </script>
 <template>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/property.vue
index b61965680..6b069e07c 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/property.vue
@@ -46,17 +46,23 @@ const formData = useVModel(props, 'modelValue', emit);
           <RadioGroup v-model:value="formData.layoutType">
             <Tooltip title="双列" placement="bottom">
               <RadioButton value="twoCol">
-                <IconifyIcon icon="fluent:text-column-two-24-filled" />
+                <IconifyIcon
+                  icon="fluent:text-column-two-24-filled"
+                  class="size-6"
+                />
               </RadioButton>
             </Tooltip>
             <Tooltip title="三列" placement="bottom">
               <RadioButton value="threeCol">
-                <IconifyIcon icon="fluent:text-column-three-24-filled" />
+                <IconifyIcon
+                  icon="fluent:text-column-three-24-filled"
+                  class="size-6"
+                />
               </RadioButton>
             </Tooltip>
             <Tooltip title="水平滑动" placement="bottom">
               <RadioButton value="horizSwiper">
-                <IconifyIcon icon="system-uicons:carousel" />
+                <IconifyIcon icon="system-uicons:carousel" class="size-6" />
               </RadioButton>
             </Tooltip>
           </RadioGroup>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/config.ts
index 9a1fc4194..ac47bf4b5 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/config.ts
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/config.ts
@@ -2,13 +2,11 @@ import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 营销文章属性 */
 export interface PromotionArticleProperty {
-  // 文章编号
-  id: number;
-  // 组件样式
-  style: ComponentStyle;
+  id: number; // 文章编号
+  style: ComponentStyle; // 组件样式
 }
 
-// 定义组件
+/** 定义组件 */
 export const component = {
   id: 'PromotionArticle',
   name: '营销文章',
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/index.vue
index aa9fd467c..1d94558eb 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/index.vue
@@ -27,7 +27,5 @@ watch(
 );
 </script>
 <template>
-  <div class="min-h-[30px]" v-dompurify-html="article?.content"></div>
+  <div class="min-h-8" v-dompurify-html="article?.content"></div>
 </template>
-
-<style scoped lang="scss"></style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/property.vue
index d2b473ad8..6a24d9b02 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/property.vue
@@ -56,7 +56,7 @@ onMounted(() => {
           filterable
           :loading="loading"
           :options="
-            articles.map((item) => ({ label: item.title, value: item.id }))
+            articles.map((item: any) => ({ label: item.title, value: item.id }))
           "
           @search="queryArticleList"
         />
@@ -64,5 +64,3 @@ onMounted(() => {
     </Form>
   </ComponentContainerProperty>
 </template>
-
-<style scoped lang="scss"></style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/config.ts
index f0497dc19..f9db86b73 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/config.ts
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/config.ts
@@ -2,64 +2,40 @@ import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 拼团属性 */
 export interface PromotionCombinationProperty {
-  // 布局类型：单列 | 三列
-  layoutType: 'oneColBigImg' | 'oneColSmallImg' | 'twoCol';
-  // 商品字段
+  layoutType: 'oneColBigImg' | 'oneColSmallImg' | 'twoCol'; // 布局类型：单列 | 三列
   fields: {
-    // 商品简介
-    introduction: PromotionCombinationFieldProperty;
-    // 市场价
-    marketPrice: PromotionCombinationFieldProperty;
-    // 商品名称
-    name: PromotionCombinationFieldProperty;
-    // 商品价格
-    price: PromotionCombinationFieldProperty;
-    // 商品销量
-    salesCount: PromotionCombinationFieldProperty;
-    // 商品库存
-    stock: PromotionCombinationFieldProperty;
-  };
-  // 角标
+    introduction: PromotionCombinationFieldProperty; // 商品简介
+    marketPrice: PromotionCombinationFieldProperty; // 市场价
+    name: PromotionCombinationFieldProperty; // 商品名称
+    price: PromotionCombinationFieldProperty; // 商品价格
+    salesCount: PromotionCombinationFieldProperty; // 商品销量
+    stock: PromotionCombinationFieldProperty; // 商品库存
+  }; // 商品字段
   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 PromotionCombinationFieldProperty {
-  // 是否显示
-  show: boolean;
-  // 颜色
-  color: string;
+  show: boolean; // 是否显示
+  color: string; // 颜色
 }
 
-// 定义组件
+/** 定义组件 */
 export const component = {
   id: 'PromotionCombination',
   name: '拼团',
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/index.vue
index fad665dcc..86133ac70 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/index.vue
@@ -97,11 +97,11 @@ const calculateWidth = () => {
 </script>
 <template>
   <div
-    class="box-content flex min-h-[30px] w-full flex-row flex-wrap"
+    class="box-content flex min-h-8 w-full flex-row flex-wrap"
     ref="containerRef"
   >
     <div
-      class="relative box-content flex flex-row flex-wrap overflow-hidden bg-white"
+      class="bg-card relative box-content flex flex-row flex-wrap overflow-hidden"
       :style="{
         ...calculateSpace(index),
         ...calculateWidth(),
@@ -118,19 +118,15 @@ const calculateWidth = () => {
         v-if="property.badge.show"
         class="absolute left-0 top-0 z-[1] items-center justify-center"
       >
-        <Image
-          fit="cover"
-          :src="property.badge.imgUrl"
-          class="h-[26px] w-[38px]"
-        />
+        <Image fit="cover" :src="property.badge.imgUrl" class="h-6 w-8" />
       </div>
       <!-- 商品封面图 -->
       <div
-        class="h-[140px]"
+        class="h-36"
         :class="[
           {
             'w-full': property.layoutType !== 'oneColSmallImg',
-            'w-[140px]': property.layoutType === 'oneColSmallImg',
+            'w-36': property.layoutType === 'oneColSmallImg',
           },
         ]"
       >
@@ -141,7 +137,7 @@ const calculateWidth = () => {
         :class="[
           {
             'w-full': property.layoutType !== 'oneColSmallImg',
-            'w-[calc(100%-140px-16px)]':
+            'w-[calc(100vw-36px-16px)]':
               property.layoutType === 'oneColSmallImg',
           },
         ]"
@@ -149,7 +145,7 @@ const calculateWidth = () => {
         <!-- 商品名称 -->
         <div
           v-if="property.fields.name.show"
-          class="text-[14px]"
+          class="text-sm"
           :class="[
             {
               truncate: property.layoutType !== 'oneColSmallImg',
@@ -164,7 +160,7 @@ const calculateWidth = () => {
         <!-- 商品简介 -->
         <div
           v-if="property.fields.introduction.show"
-          class="truncate text-[12px]"
+          class="truncate text-xs"
           :style="{ color: property.fields.introduction.color }"
         >
           {{ spu.introduction }}
@@ -173,7 +169,7 @@ const calculateWidth = () => {
           <!-- 价格 -->
           <span
             v-if="property.fields.price.show"
-            class="text-[16px]"
+            class="text-base"
             :style="{ color: property.fields.price.color }"
           >
             ￥{{ fenToYuan(spu.price || Infinity) }}
@@ -181,13 +177,13 @@ const calculateWidth = () => {
           <!-- 市场价 -->
           <span
             v-if="property.fields.marketPrice.show && spu.marketPrice"
-            class="ml-[4px] text-[10px] line-through"
+            class="ml-1 text-xs line-through"
             :style="{ color: property.fields.marketPrice.color }"
           >
             ￥{{ fenToYuan(spu.marketPrice) }}
           </span>
         </div>
-        <div class="text-[12px]">
+        <div class="text-xs">
           <!-- 销量 -->
           <span
             v-if="property.fields.salesCount.show"
@@ -205,11 +201,11 @@ const calculateWidth = () => {
         </div>
       </div>
       <!-- 购买按钮 -->
-      <div class="absolute bottom-[8px] right-[8px]">
+      <div class="absolute bottom-2 right-2">
         <!-- 文字按钮 -->
         <span
           v-if="property.btnBuy.type === 'text'"
-          class="rounded-full px-[12px] py-[4px] text-[12px] text-white"
+          class="rounded-full px-3 py-1 text-sm text-white"
           :style="{
             background: `linear-gradient(to right, ${property.btnBuy.bgBeginColor}, ${property.btnBuy.bgEndColor}`,
           }"
@@ -219,7 +215,7 @@ const calculateWidth = () => {
         <!-- 图片按钮 -->
         <Image
           v-else
-          class="h-[28px] w-[28px] rounded-full"
+          class="size-7 rounded-full"
           fit="cover"
           :src="property.btnBuy.imgUrl"
         />
@@ -227,5 +223,3 @@ const calculateWidth = () => {
     </div>
   </div>
 </template>
-
-<style scoped lang="scss"></style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/property.vue
index a46029f10..0efe4e4d7 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/property.vue
@@ -60,17 +60,26 @@ onMounted(async () => {
           <RadioGroup v-model:value="formData.layoutType">
             <Tooltip title="单列大图" placement="bottom">
               <RadioButton value="oneColBigImg">
-                <IconifyIcon icon="fluent:text-column-one-24-filled" />
+                <IconifyIcon
+                  icon="fluent:text-column-one-24-filled"
+                  class="size-6"
+                />
               </RadioButton>
             </Tooltip>
             <Tooltip title="单列小图" placement="bottom">
               <RadioButton value="oneColSmallImg">
-                <IconifyIcon icon="fluent:text-column-two-left-24-filled" />
+                <IconifyIcon
+                  icon="fluent:text-column-two-left-24-filled"
+                  class="size-6"
+                />
               </RadioButton>
             </Tooltip>
             <Tooltip title="双列" placement="bottom">
               <RadioButton value="twoCol">
-                <IconifyIcon icon="fluent:text-column-two-24-filled" />
+                <IconifyIcon
+                  icon="fluent:text-column-two-24-filled"
+                  class="size-6"
+                />
               </RadioButton>
             </Tooltip>
           </RadioGroup>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/config.ts
index 738ca3b31..8393f8ca2 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/config.ts
+++ b/apps/web-antd/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-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/index.vue
index f10888fce..60ac6a8a8 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/index.vue
@@ -95,7 +95,7 @@ const calculateWidth = () => {
 <template>
   <div
     ref="containerRef"
-    class="box-content flex min-h-[30px] w-full flex-row flex-wrap"
+    class="box-content flex min-h-9 w-full flex-row flex-wrap"
   >
     <div
       v-for="(spu, index) in spuList"
@@ -108,26 +108,22 @@ const calculateWidth = () => {
         borderBottomLeftRadius: `${property.borderRadiusBottom}px`,
         borderBottomRightRadius: `${property.borderRadiusBottom}px`,
       }"
-      class="relative box-content flex flex-row flex-wrap overflow-hidden bg-white"
+      class="bg-card relative box-content flex flex-row flex-wrap overflow-hidden"
     >
       <!-- 角标 -->
       <div
         v-if="property.badge.show"
         class="absolute left-0 top-0 z-[1] items-center justify-center"
       >
-        <Image
-          :src="property.badge.imgUrl"
-          class="h-[26px] w-[38px]"
-          fit="cover"
-        />
+        <Image :src="property.badge.imgUrl" class="h-6 w-10" fit="cover" />
       </div>
       <!-- 商品封面图 -->
       <div
-        class="h-[140px]"
+        class="h-36"
         :class="[
           {
             'w-full': property.layoutType !== 'oneColSmallImg',
-            'w-[140px]': property.layoutType === 'oneColSmallImg',
+            'w-36': property.layoutType === 'oneColSmallImg',
           },
         ]"
       >
@@ -146,7 +142,7 @@ const calculateWidth = () => {
         <!-- 商品名称 -->
         <div
           v-if="property.fields.name.show"
-          class="text-[14px]"
+          class="text-sm"
           :class="[
             {
               truncate: property.layoutType !== 'oneColSmallImg',
@@ -162,7 +158,7 @@ const calculateWidth = () => {
         <div
           v-if="property.fields.introduction.show"
           :style="{ color: property.fields.introduction.color }"
-          class="truncate text-[12px]"
+          class="truncate text-xs"
         >
           {{ spu.introduction }}
         </div>
@@ -171,7 +167,7 @@ const calculateWidth = () => {
           <span
             v-if="property.fields.price.show"
             :style="{ color: property.fields.price.color }"
-            class="text-[16px]"
+            class="text-base"
           >
             {{ spu.point }}积分
             {{
@@ -184,12 +180,12 @@ const calculateWidth = () => {
           <span
             v-if="property.fields.marketPrice.show && spu.marketPrice"
             :style="{ color: property.fields.marketPrice.color }"
-            class="ml-[4px] text-[10px] line-through"
+            class="ml-1 text-xs line-through"
           >
             ￥{{ fenToYuan(spu.marketPrice) }}
           </span>
         </div>
-        <div class="text-[12px]">
+        <div class="text-xs">
           <!-- 销量 -->
           <span
             v-if="property.fields.salesCount.show"
@@ -207,14 +203,14 @@ const calculateWidth = () => {
         </div>
       </div>
       <!-- 购买按钮 -->
-      <div class="absolute bottom-[8px] right-[8px]">
+      <div class="absolute bottom-2 right-2">
         <!-- 文字按钮 -->
         <span
           v-if="property.btnBuy.type === 'text'"
           :style="{
             background: `linear-gradient(to right, ${property.btnBuy.bgBeginColor}, ${property.btnBuy.bgEndColor}`,
           }"
-          class="rounded-full px-[12px] py-[4px] text-[12px] text-white"
+          class="rounded-full px-3 py-1 text-sm text-white"
         >
           {{ property.btnBuy.text }}
         </span>
@@ -222,12 +218,10 @@ const calculateWidth = () => {
         <Image
           v-else
           :src="property.btnBuy.imgUrl"
-          class="h-[28px] w-[28px] rounded-full"
+          class="size-7 rounded-full"
           fit="cover"
         />
       </div>
     </div>
   </div>
 </template>
-
-<style lang="scss" scoped></style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/property.vue
index 3f479b8c2..dd01a66b0 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/property.vue
@@ -1,4 +1,173 @@
-<script setup lang="ts">
-import { Page } from '@vben/common-ui';
+<script lang="ts" setup>
+import type { PromotionPointProperty } from './config';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { useVModel } from '@vueuse/core';
+import {
+  Card,
+  Checkbox,
+  Form,
+  FormItem,
+  Input,
+  RadioButton,
+  RadioGroup,
+  Slider,
+  Switch,
+  Tooltip,
+} from 'ant-design-vue';
+
+import UploadImg from '#/components/upload/image-upload.vue';
+import { ColorInput } from '#/views/mall/promotion/components';
+import { PointShowcase } from '#/views/mall/promotion/point/components';
+
+import ComponentContainerProperty from '../../component-container-property.vue';
+
+/** 积分属性面板 */
+defineOptions({ name: 'PromotionPointProperty' });
+
+const props = defineProps<{ modelValue: PromotionPointProperty }>();
+const emit = defineEmits(['update:modelValue']);
+const formData = useVModel(props, 'modelValue', emit);
 </script>
-<template><Page>待完成</Page></template>
+
+<template>
+  <ComponentContainerProperty v-model="formData.style">
+    <Form :model="formData">
+      <Card title="积分商城活动" class="property-group">
+        <PointShowcase v-model="formData.activityIds" />
+      </Card>
+      <Card title="商品样式" class="property-group">
+        <FormItem label="布局" name="type">
+          <RadioGroup v-model:value="formData.layoutType">
+            <Tooltip title="单列大图" placement="bottom">
+              <RadioButton value="oneColBigImg">
+                <IconifyIcon
+                  icon="fluent:text-column-one-24-filled"
+                  class="size-6"
+                />
+              </RadioButton>
+            </Tooltip>
+            <Tooltip title="单列小图" placement="bottom">
+              <RadioButton value="oneColSmallImg">
+                <IconifyIcon
+                  icon="fluent:text-column-two-left-24-filled"
+                  class="size-6"
+                />
+              </RadioButton>
+            </Tooltip>
+            <Tooltip title="双列" placement="bottom">
+              <RadioButton value="twoCol">
+                <IconifyIcon
+                  icon="fluent:text-column-two-24-filled"
+                  class="size-6"
+                />
+              </RadioButton>
+            </Tooltip>
+          </RadioGroup>
+        </FormItem>
+        <FormItem label="商品名称" name="fields.name.show">
+          <div class="flex gap-2">
+            <ColorInput v-model="formData.fields.name.color" />
+            <Checkbox v-model:checked="formData.fields.name.show" />
+          </div>
+        </FormItem>
+        <FormItem label="商品简介" name="fields.introduction.show">
+          <div class="flex gap-2">
+            <ColorInput v-model="formData.fields.introduction.color" />
+            <Checkbox v-model:checked="formData.fields.introduction.show" />
+          </div>
+        </FormItem>
+        <FormItem label="商品价格" name="fields.price.show">
+          <div class="flex gap-2">
+            <ColorInput v-model="formData.fields.price.color" />
+            <Checkbox v-model:checked="formData.fields.price.show" />
+          </div>
+        </FormItem>
+        <FormItem label="市场价" name="fields.marketPrice.show">
+          <div class="flex gap-2">
+            <ColorInput v-model="formData.fields.marketPrice.color" />
+            <Checkbox v-model:checked="formData.fields.marketPrice.show" />
+          </div>
+        </FormItem>
+        <FormItem label="商品销量" name="fields.salesCount.show">
+          <div class="flex gap-2">
+            <ColorInput v-model="formData.fields.salesCount.color" />
+            <Checkbox v-model:checked="formData.fields.salesCount.show" />
+          </div>
+        </FormItem>
+        <FormItem label="商品库存" name="fields.stock.show">
+          <div class="flex gap-2">
+            <ColorInput v-model="formData.fields.stock.color" />
+            <Checkbox v-model:checked="formData.fields.stock.show" />
+          </div>
+        </FormItem>
+      </Card>
+      <Card title="角标" class="property-group">
+        <FormItem label="角标" name="badge.show">
+          <Switch v-model:checked="formData.badge.show" />
+        </FormItem>
+        <FormItem label="角标" name="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>
+          </UploadImg>
+        </FormItem>
+      </Card>
+      <Card title="按钮" class="property-group">
+        <FormItem label="按钮类型" name="btnBuy.type">
+          <RadioGroup v-model:value="formData.btnBuy.type">
+            <RadioButton value="text">文字</RadioButton>
+            <RadioButton value="img">图片</RadioButton>
+          </RadioGroup>
+        </FormItem>
+        <template v-if="formData.btnBuy.type === 'text'">
+          <FormItem label="按钮文字" name="btnBuy.text">
+            <Input v-model:value="formData.btnBuy.text" />
+          </FormItem>
+          <FormItem label="左侧背景" name="btnBuy.bgBeginColor">
+            <ColorInput v-model="formData.btnBuy.bgBeginColor" />
+          </FormItem>
+          <FormItem label="右侧背景" name="btnBuy.bgEndColor">
+            <ColorInput v-model="formData.btnBuy.bgEndColor" />
+          </FormItem>
+        </template>
+        <template v-else>
+          <FormItem label="图片" name="btnBuy.imgUrl">
+            <UploadImg
+              v-model="formData.btnBuy.imgUrl"
+              height="56px"
+              width="56px"
+              :show-description="false"
+            >
+              <template #tip> 建议尺寸：56 * 56 </template>
+            </UploadImg>
+          </FormItem>
+        </template>
+      </Card>
+      <Card title="商品样式" class="property-group">
+        <FormItem label="上圆角" name="borderRadiusTop">
+          <Slider
+            v-model:value="formData.borderRadiusTop"
+            :max="100"
+            :min="0"
+          />
+        </FormItem>
+        <FormItem label="下圆角" name="borderRadiusBottom">
+          <Slider
+            v-model:value="formData.borderRadiusBottom"
+            :max="100"
+            :min="0"
+          />
+        </FormItem>
+        <FormItem label="间隔" name="space">
+          <Slider v-model:value="formData.space" :max="100" :min="0" />
+        </FormItem>
+      </Card>
+    </Form>
+  </ComponentContainerProperty>
+</template>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-seckill/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-seckill/config.ts
index a38d9455b..87feae63b 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-seckill/config.ts
+++ b/apps/web-antd/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-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-seckill/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-seckill/index.vue
index 236cd4563..2b22f7646 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-seckill/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-seckill/index.vue
@@ -95,11 +95,11 @@ const calculateWidth = () => {
 </script>
 <template>
   <div
-    class="box-content flex min-h-[30px] w-full flex-row flex-wrap"
+    class="box-content flex min-h-9 w-full flex-row flex-wrap"
     ref="containerRef"
   >
     <div
-      class="relative box-content flex flex-row flex-wrap overflow-hidden bg-white"
+      class="bg-card relative box-content flex flex-row flex-wrap overflow-hidden"
       :style="{
         ...calculateSpace(index),
         ...calculateWidth(),
@@ -116,19 +116,15 @@ const calculateWidth = () => {
         v-if="property.badge.show"
         class="absolute left-0 top-0 z-[1] items-center justify-center"
       >
-        <Image
-          fit="cover"
-          :src="property.badge.imgUrl"
-          class="h-[26px] w-[38px]"
-        />
+        <Image fit="cover" :src="property.badge.imgUrl" class="h-6 w-8" />
       </div>
       <!-- 商品封面图 -->
       <div
-        class="h-[140px]"
+        class="h-36"
         :class="[
           {
             'w-full': property.layoutType !== 'oneColSmallImg',
-            'w-[140px]': property.layoutType === 'oneColSmallImg',
+            'w-36': property.layoutType === 'oneColSmallImg',
           },
         ]"
       >
@@ -139,7 +135,7 @@ const calculateWidth = () => {
         :class="[
           {
             'w-full': property.layoutType !== 'oneColSmallImg',
-            'w-[calc(100%-140px-16px)]':
+            'w-[calc(100vw-140px-16px)]':
               property.layoutType === 'oneColSmallImg',
           },
         ]"
@@ -179,7 +175,7 @@ const calculateWidth = () => {
           <!-- 市场价 -->
           <span
             v-if="property.fields.marketPrice.show && spu.marketPrice"
-            class="ml-1 text-[10px] line-through"
+            class="ml-1 text-xs line-through"
             :style="{ color: property.fields.marketPrice.color }"
           >
             ￥{{ fenToYuan(spu.marketPrice) }}
@@ -217,7 +213,7 @@ const calculateWidth = () => {
         <!-- 图片按钮 -->
         <Image
           v-else
-          class="h-7 w-7 rounded-full"
+          class="size-7 rounded-full"
           fit="cover"
           :src="property.btnBuy.imgUrl"
         />
@@ -225,5 +221,3 @@ const calculateWidth = () => {
     </div>
   </div>
 </template>
-
-<style scoped lang="scss"></style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-seckill/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-seckill/property.vue
index 3f479b8c2..989581dbf 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-seckill/property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-seckill/property.vue
@@ -1,4 +1,176 @@
 <script setup lang="ts">
-import { Page } from '@vben/common-ui';
+import type { PromotionSeckillProperty } from './config';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { useVModel } from '@vueuse/core';
+import {
+  Card,
+  Checkbox,
+  Form,
+  FormItem,
+  Input,
+  RadioButton,
+  RadioGroup,
+  Slider,
+  Switch,
+  Tooltip,
+} from 'ant-design-vue';
+
+import UploadImg from '#/components/upload/image-upload.vue';
+import { ColorInput } from '#/views/mall/promotion/components';
+// TODO: 添加组件
+// 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);
 </script>
-<template><Page>待完成</Page></template>
+
+<template>
+  <ComponentContainerProperty v-model="formData.style">
+    <Form :model="formData">
+      <Card title="秒杀活动" class="property-group">
+        <SeckillShowcase v-model="formData.activityIds" />
+      </Card>
+      <Card title="商品样式" class="property-group">
+        <FormItem label="布局" name="type">
+          <RadioGroup v-model:value="formData.layoutType">
+            <Tooltip title="单列大图" placement="bottom">
+              <RadioButton value="oneColBigImg">
+                <IconifyIcon
+                  icon="fluent:text-column-one-24-filled"
+                  class="size-6"
+                />
+              </RadioButton>
+            </Tooltip>
+            <Tooltip title="单列小图" placement="bottom">
+              <RadioButton value="oneColSmallImg">
+                <IconifyIcon
+                  icon="fluent:text-column-two-left-24-filled"
+                  class="size-6"
+                />
+              </RadioButton>
+            </Tooltip>
+            <Tooltip title="双列" placement="bottom">
+              <RadioButton value="twoCol">
+                <IconifyIcon
+                  icon="fluent:text-column-two-24-filled"
+                  class="size-6"
+                />
+              </RadioButton>
+            </Tooltip>
+          </RadioGroup>
+        </FormItem>
+        <FormItem label="商品名称" name="fields.name.show">
+          <div class="flex gap-2">
+            <ColorInput v-model="formData.fields.name.color" />
+            <Checkbox v-model:checked="formData.fields.name.show" />
+          </div>
+        </FormItem>
+        <FormItem label="商品简介" name="fields.introduction.show">
+          <div class="flex gap-2">
+            <ColorInput v-model="formData.fields.introduction.color" />
+            <Checkbox v-model:checked="formData.fields.introduction.show" />
+          </div>
+        </FormItem>
+        <FormItem label="商品价格" name="fields.price.show">
+          <div class="flex gap-2">
+            <ColorInput v-model="formData.fields.price.color" />
+            <Checkbox v-model:checked="formData.fields.price.show" />
+          </div>
+        </FormItem>
+        <FormItem label="市场价" name="fields.marketPrice.show">
+          <div class="flex gap-2">
+            <ColorInput v-model="formData.fields.marketPrice.color" />
+            <Checkbox v-model:checked="formData.fields.marketPrice.show" />
+          </div>
+        </FormItem>
+        <FormItem label="商品销量" name="fields.salesCount.show">
+          <div class="flex gap-2">
+            <ColorInput v-model="formData.fields.salesCount.color" />
+            <Checkbox v-model:checked="formData.fields.salesCount.show" />
+          </div>
+        </FormItem>
+        <FormItem label="商品库存" name="fields.stock.show">
+          <div class="flex gap-2">
+            <ColorInput v-model="formData.fields.stock.color" />
+            <Checkbox v-model:checked="formData.fields.stock.show" />
+          </div>
+        </FormItem>
+      </Card>
+      <Card title="角标" class="property-group">
+        <FormItem label="角标" name="badge.show">
+          <Switch v-model:checked="formData.badge.show" />
+        </FormItem>
+        <FormItem label="角标" name="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>
+          </UploadImg>
+        </FormItem>
+      </Card>
+      <Card title="按钮" class="property-group">
+        <FormItem label="按钮类型" name="btnBuy.type">
+          <RadioGroup v-model:value="formData.btnBuy.type">
+            <RadioButton value="text">文字</RadioButton>
+            <RadioButton value="img">图片</RadioButton>
+          </RadioGroup>
+        </FormItem>
+        <template v-if="formData.btnBuy.type === 'text'">
+          <FormItem label="按钮文字" name="btnBuy.text">
+            <Input v-model:value="formData.btnBuy.text" />
+          </FormItem>
+          <FormItem label="左侧背景" name="btnBuy.bgBeginColor">
+            <ColorInput v-model="formData.btnBuy.bgBeginColor" />
+          </FormItem>
+          <FormItem label="右侧背景" name="btnBuy.bgEndColor">
+            <ColorInput v-model="formData.btnBuy.bgEndColor" />
+          </FormItem>
+        </template>
+        <template v-else>
+          <FormItem label="图片" name="btnBuy.imgUrl">
+            <UploadImg
+              v-model="formData.btnBuy.imgUrl"
+              height="56px"
+              width="56px"
+              :show-description="false"
+            >
+              <template #tip> 建议尺寸：56 * 56</template>
+            </UploadImg>
+          </FormItem>
+        </template>
+      </Card>
+      <Card title="商品样式" class="property-group">
+        <FormItem label="上圆角" name="borderRadiusTop">
+          <Slider
+            v-model:value="formData.borderRadiusTop"
+            :max="100"
+            :min="0"
+          />
+        </FormItem>
+        <FormItem label="下圆角" name="borderRadiusBottom">
+          <Slider
+            v-model:value="formData.borderRadiusBottom"
+            :max="100"
+            :min="0"
+          />
+        </FormItem>
+        <FormItem label="间隔" name="space">
+          <Slider v-model:value="formData.space" :max="100" :min="0" />
+        </FormItem>
+      </Card>
+    </Form>
+  </ComponentContainerProperty>
+</template>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/config.ts
index 01d5894d1..a3c39aab7 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/config.ts
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/config.ts
@@ -13,14 +13,14 @@ export interface SearchProperty {
   style: ComponentStyle;
 }
 
-// 文字位置
+/** 文字位置 */
 export type PlaceholderPosition = 'center' | 'left';
 
-// 定义组件
+/** 定义组件 */
 export const component = {
   id: 'SearchBar',
   name: '搜索框',
-  icon: 'ep:search',
+  icon: 'lucide:search',
   property: {
     height: 28,
     showScan: false,
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/index.vue
index e7c770304..2a3ec9bce 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/index.vue
@@ -30,19 +30,16 @@ defineProps<{ property: SearchProperty }>();
           justifyContent: property.placeholderPosition,
         }"
       >
-        <IconifyIcon icon="ep:search" />
+        <IconifyIcon icon="lucide:search" />
         <span>{{ property.placeholder || '搜索商品' }}</span>
       </div>
       <div class="right">
         <!-- 搜索热词 -->
-        <span v-for="(keyword, index) in property.hotKeywords" :key="index">{{
-          keyword
-        }}</span>
+        <span v-for="(keyword, index) in property.hotKeywords" :key="index">
+          {{ keyword }}
+        </span>
         <!-- 扫一扫 -->
-        <IconifyIcon
-          icon="ant-design:scan-outlined"
-          v-show="property.showScan"
-        />
+        <IconifyIcon icon="lucide:scan-barcode" v-show="property.showScan" />
       </div>
     </div>
   </div>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/property.vue
index 3f479b8c2..eca8a0d33 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/property.vue
@@ -1,4 +1,121 @@
 <script setup lang="ts">
-import { Page } from '@vben/common-ui';
+import type { SearchProperty } from './config';
+
+import { watch } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+import { isString } from '@vben/utils';
+
+import { useVModel } from '@vueuse/core';
+import {
+  Card,
+  Form,
+  FormItem,
+  Input,
+  RadioButton,
+  RadioGroup,
+  Slider,
+  Switch,
+  Tooltip,
+} from 'ant-design-vue';
+
+import { ColorInput, Draggable } from '#/views/mall/promotion/components';
+
+import ComponentContainerProperty from '../../component-container-property.vue';
+
+/** 搜索框属性面板 */
+defineOptions({ name: 'SearchProperty' });
+
+const props = defineProps<{ modelValue: SearchProperty }>();
+
+const emit = defineEmits(['update:modelValue']);
+
+const formData = useVModel(props, 'modelValue', emit);
+
+/** 监听热词数组变化 */
+watch(
+  () => formData.value.hotKeywords,
+  (newVal) => {
+    // 找到非字符串项的索引
+    const nonStringIndex = newVal.findIndex((item) => !isString(item));
+    if (nonStringIndex !== -1) {
+      formData.value.hotKeywords[nonStringIndex] = '';
+    }
+  },
+  { deep: true, flush: 'post' },
+);
 </script>
-<template><Page>待完成</Page></template>
+
+<template>
+  <ComponentContainerProperty v-model="formData.style">
+    <Form :model="formData">
+      <Card title="搜索热词" class="property-group">
+        <Draggable
+          v-model="formData.hotKeywords"
+          :empty-item="{
+            type: 'input',
+            placeholder: '请输入热词',
+          }"
+        >
+          <template #default="{ index }">
+            <Input
+              v-model:value="formData.hotKeywords[index]"
+              placeholder="请输入热词"
+            />
+          </template>
+        </Draggable>
+      </Card>
+      <Card title="搜索样式" class="property-group">
+        <FormItem label="框体样式">
+          <RadioGroup v-model:value="formData!.borderRadius">
+            <Tooltip title="方形" placement="top">
+              <RadioButton :value="0">
+                <IconifyIcon icon="tabler:input-search" class="size-6" />
+              </RadioButton>
+            </Tooltip>
+            <Tooltip title="圆形" placement="top">
+              <RadioButton :value="10">
+                <IconifyIcon icon="iconoir:input-search" class="size-6" />
+              </RadioButton>
+            </Tooltip>
+          </RadioGroup>
+        </FormItem>
+        <FormItem label="提示文字" name="placeholder">
+          <Input v-model:value="formData.placeholder" />
+        </FormItem>
+        <FormItem label="文本位置" name="placeholderPosition">
+          <RadioGroup v-model:value="formData!.placeholderPosition">
+            <Tooltip title="居左" placement="top">
+              <RadioButton value="left">
+                <IconifyIcon
+                  icon="ant-design:align-left-outlined"
+                  class="size-6"
+                />
+              </RadioButton>
+            </Tooltip>
+            <Tooltip title="居中" placement="top">
+              <RadioButton value="center">
+                <IconifyIcon
+                  icon="ant-design:align-center-outlined"
+                  class="size-6"
+                />
+              </RadioButton>
+            </Tooltip>
+          </RadioGroup>
+        </FormItem>
+        <FormItem label="扫一扫" name="showScan">
+          <Switch v-model:checked="formData!.showScan" />
+        </FormItem>
+        <FormItem label="框体高度" name="height">
+          <Slider v-model:value="formData!.height" :max="50" :min="28" />
+        </FormItem>
+        <FormItem label="框体颜色" name="backgroundColor">
+          <ColorInput v-model="formData.backgroundColor" />
+        </FormItem>
+        <FormItem label="文本颜色" name="textColor">
+          <ColorInput v-model="formData.textColor" />
+        </FormItem>
+      </Card>
+    </Form>
+  </ComponentContainerProperty>
+</template>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/config.ts
index 0404f3647..efdb4da21 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/config.ts
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/config.ts
@@ -2,41 +2,29 @@ import type { DiyComponent } from '../../../util';
 
 /** 底部导航菜单属性 */
 export interface TabBarProperty {
-  // 选项列表
-  items: TabBarItemProperty[];
-  // 主题
-  theme: string;
-  // 样式
-  style: TabBarStyle;
+  items: TabBarItemProperty[]; // 选项列表
+  theme: string; // 主题
+  style: TabBarStyle; // 样式
 }
 
-// 选项属性
+/** 选项属性 */
 export interface TabBarItemProperty {
-  // 标签文字
-  text: string;
-  // 链接
-  url: string;
-  // 默认图标链接
-  iconUrl: string;
-  // 选中的图标链接
-  activeIconUrl: string;
+  text: string; // 标签文字
+  url: string; // 链接
+  iconUrl: string; // 默认图标链接
+  activeIconUrl: string; // 选中的图标链接
 }
 
-// 样式
+/** 样式 */
 export interface TabBarStyle {
-  // 背景类型
-  bgType: 'color' | 'img';
-  // 背景颜色
-  bgColor: string;
-  // 图片链接
-  bgImg: string;
-  // 默认颜色
-  color: string;
-  // 选中的颜色
-  activeColor: string;
+  bgType: 'color' | 'img'; // 背景类型
+  bgColor: string; // 背景颜色
+  bgImg: string; // 图片链接
+  color: string; // 默认颜色
+  activeColor: string; // 选中的颜色
 }
 
-// 定义组件
+/** 定义组件 */
 export const component = {
   id: 'TabBar',
   name: '底部导航',
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/index.vue
index 827c7358d..90747a4ed 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/index.vue
@@ -31,7 +31,7 @@ defineProps<{ property: TabBarProperty }>();
         <Image :src="index === 0 ? item.activeIconUrl : item.iconUrl">
           <template #error>
             <div class="flex h-full w-full items-center justify-center">
-              <IconifyIcon icon="ep:picture" />
+              <IconifyIcon icon="lucide:image" />
             </div>
           </template>
         </Image>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/config.ts
index f442e7dc5..2ef0eb772 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/config.ts
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/config.ts
@@ -2,46 +2,28 @@ import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 标题栏属性 */
 export interface TitleBarProperty {
-  // 背景图
-  bgImgUrl: string;
-  // 偏移
-  marginLeft: number;
-  // 显示位置
-  textAlign: 'center' | 'left';
-  // 主标题
-  title: string;
-  // 副标题
-  description: string;
-  // 标题大小
-  titleSize: number;
-  // 描述大小
-  descriptionSize: number;
-  // 标题粗细
-  titleWeight: number;
-  // 描述粗细
-  descriptionWeight: number;
-  // 标题颜色
-  titleColor: string;
-  // 描述颜色
-  descriptionColor: string;
-  // 高度
-  height: number;
-  // 查看更多
+  bgImgUrl: string; // 背景图
+  marginLeft: number; // 偏移
+  textAlign: 'center' | 'left'; // 显示位置
+  title: string; // 主标题
+  description: string; // 副标题
+  titleSize: number; // 标题大小
+  descriptionSize: number; // 描述大小
+  titleWeight: number; // 标题粗细
+  descriptionWeight: number; // 描述粗细
+  titleColor: string; // 标题颜色
+  descriptionColor: string; // 描述颜色
+  height: number; // 高度
   more: {
-    // 是否显示查看更多
-    show: false;
-    // 自定义文字
-    text: string;
-    // 样式选择
-    type: 'all' | 'icon' | 'text';
-    // 链接
-    url: string;
-  };
-  // 组件样式
-  style: ComponentStyle;
+    show: false; // 是否显示查看更多
+    text: string; // 自定义文字
+    type: 'all' | 'icon' | 'text'; // 样式选择
+    url: string; // 链接
+  }; // 查看更多
+  style: ComponentStyle; // 组件样式
 }
 
-// 定义组件
+/** 定义组件 */
 export const component = {
   id: 'TitleBar',
   name: '标题栏',
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/index.vue
index 5bd0eb977..e7daeb927 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/index.vue
@@ -60,7 +60,10 @@ defineProps<{ property: TitleBarProperty }>();
       <span v-if="property.more.type !== 'icon'">
         {{ property.more.text }}
       </span>
-      <IconifyIcon icon="ep:arrow-right" v-if="property.more.type !== 'text'" />
+      <IconifyIcon
+        icon="lucide:arrow-right"
+        v-if="property.more.type !== 'text'"
+      />
     </div>
   </div>
 </template>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/property.vue
index 3f479b8c2..63a28ae6f 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/property.vue
@@ -1,4 +1,153 @@
 <script setup lang="ts">
-import { Page } from '@vben/common-ui';
+import type { TitleBarProperty } from './config';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { useVModel } from '@vueuse/core';
+import {
+  Card,
+  Checkbox,
+  Form,
+  FormItem,
+  Input,
+  Radio,
+  RadioButton,
+  RadioGroup,
+  Slider,
+  Tooltip,
+} from 'ant-design-vue';
+
+import UploadImg from '#/components/upload/image-upload.vue';
+import {
+  AppLinkInput,
+  InputWithColor,
+} from '#/views/mall/promotion/components';
+
+import ComponentContainerProperty from '../../component-container-property.vue';
+
+/** 导航栏属性面板 */
+defineOptions({ name: 'TitleBarProperty' });
+
+const props = defineProps<{ modelValue: TitleBarProperty }>();
+
+const emit = defineEmits(['update:modelValue']);
+
+const formData = useVModel(props, 'modelValue', emit);
+
+const rules = {}; // 表单校验
 </script>
-<template><Page>待完成</Page></template>
+<template>
+  <ComponentContainerProperty v-model="formData.style">
+    <Form :model="formData" :rules="rules">
+      <Card title="风格" class="property-group">
+        <FormItem label="背景图片" name="bgImgUrl">
+          <UploadImg
+            v-model="formData.bgImgUrl"
+            width="100%"
+            height="40px"
+            :show-description="false"
+          >
+            <template #tip>建议尺寸 750*80</template>
+          </UploadImg>
+        </FormItem>
+        <FormItem label="标题位置" name="textAlign">
+          <RadioGroup v-model:value="formData!.textAlign">
+            <Tooltip title="居左" placement="top">
+              <RadioButton value="left">
+                <IconifyIcon
+                  icon="ant-design:align-left-outlined"
+                  class="size-6"
+                />
+              </RadioButton>
+            </Tooltip>
+            <Tooltip title="居中" placement="top">
+              <RadioButton value="center">
+                <IconifyIcon
+                  icon="ant-design:align-center-outlined"
+                  class="size-6"
+                />
+              </RadioButton>
+            </Tooltip>
+          </RadioGroup>
+        </FormItem>
+        <FormItem label="偏移量" name="marginLeft">
+          <Slider v-model:value="formData.marginLeft" :max="100" :min="0" />
+        </FormItem>
+        <FormItem label="高度" name="height">
+          <Slider v-model:value="formData.height" :max="200" :min="20" />
+        </FormItem>
+      </Card>
+      <Card title="主标题" class="property-group">
+        <FormItem label="文字" name="title">
+          <InputWithColor
+            v-model="formData.title"
+            v-model:color="formData.titleColor"
+            show-count
+            :maxlength="20"
+          />
+        </FormItem>
+        <FormItem label="大小" name="titleSize">
+          <Slider v-model:value="formData.titleSize" :max="60" :min="10" />
+        </FormItem>
+        <FormItem label="粗细" name="titleWeight">
+          <Slider
+            v-model:value="formData.titleWeight"
+            :min="100"
+            :max="900"
+            :step="100"
+          />
+        </FormItem>
+      </Card>
+      <Card title="副标题" class="property-group">
+        <FormItem label="文字" name="description">
+          <InputWithColor
+            v-model="formData.description"
+            v-model:color="formData.descriptionColor"
+            show-count
+            :maxlength="50"
+          />
+        </FormItem>
+        <FormItem label="大小" name="descriptionSize">
+          <Slider
+            v-model:value="formData.descriptionSize"
+            :max="60"
+            :min="10"
+          />
+        </FormItem>
+        <FormItem label="粗细" name="descriptionWeight">
+          <Slider
+            v-model:value="formData.descriptionWeight"
+            :min="100"
+            :max="900"
+            :step="100"
+          />
+        </FormItem>
+      </Card>
+      <Card title="查看更多" class="property-group">
+        <FormItem label="是否显示" name="more.show">
+          <Checkbox v-model:checked="formData.more.show" />
+        </FormItem>
+        <!-- 更多按钮的 样式选择 -->
+        <template v-if="formData.more.show">
+          <FormItem label="样式" name="more.type">
+            <RadioGroup v-model:value="formData.more.type">
+              <Radio value="text">文字</Radio>
+              <Radio value="icon">图标</Radio>
+              <Radio value="all">文字+图标</Radio>
+            </RadioGroup>
+          </FormItem>
+          <FormItem
+            label="更多文字"
+            name="more.text"
+            v-show="formData.more.type !== 'icon'"
+          >
+            <Input v-model:value="formData.more.text" />
+          </FormItem>
+          <FormItem label="跳转链接" name="more.url">
+            <AppLinkInput v-model="formData.more.url" />
+          </FormItem>
+        </template>
+      </Card>
+    </Form>
+  </ComponentContainerProperty>
+</template>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-card/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-card/config.ts
index 2dae34da2..568cfb94f 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-card/config.ts
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-card/config.ts
@@ -2,11 +2,10 @@ import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 用户卡片属性 */
 export interface UserCardProperty {
-  // 组件样式
-  style: ComponentStyle;
+  style: ComponentStyle; // 组件样式
 }
 
-// 定义组件
+/** 定义组件 */
 export const component = {
   id: 'UserCard',
   name: '用户卡片',
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-card/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-card/index.vue
index 07e0e7304..baa5ca21e 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-card/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-card/index.vue
@@ -3,6 +3,8 @@ import type { UserCardProperty } from './config';
 
 import { IconifyIcon } from '@vben/icons';
 
+import { Avatar } from 'ant-design-vue';
+
 /** 用户卡片 */
 defineOptions({ name: 'UserCard' });
 // 定义属性
@@ -10,24 +12,20 @@ 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]">
-        <Avatar :size="60">
-          <IconifyIcon icon="ep:avatar" :size="60" />
+    <div class="flex items-center justify-between px-4 py-6">
+      <div class="flex flex-1 items-center gap-4">
+        <Avatar class="size-14">
+          <IconifyIcon icon="lucide:user" class="size-14" />
         </Avatar>
-        <span class="text-[18px] font-bold">芋道源码</span>
+        <span class="text-lg font-bold">芋道源码</span>
       </div>
-      <IconifyIcon icon="tdesign:qrcode" :size="20" />
+      <IconifyIcon icon="lucide:qr-code" class="size-5" />
     </div>
-    <div
-      class="flex items-center justify-between bg-white px-[20px] py-[8px] text-[12px]"
-    >
-      <span class="text-[#ff690d]">点击绑定手机号</span>
-      <span class="rounded-[26px] bg-[#ff6100] px-[8px] py-[5px] text-white">
+    <div class="bg-card flex items-center justify-between px-5 py-2 text-xs">
+      <span class="text-orange-500">点击绑定手机号</span>
+      <span class="rounded-lg bg-orange-500 px-2 py-1 text-white">
         去绑定
       </span>
     </div>
   </div>
 </template>
-
-<style scoped lang="scss"></style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-card/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-card/property.vue
index 79a7eb080..bad6c2e53 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-card/property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-card/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-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-coupon/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-coupon/config.ts
index 7e5dcd1f9..c81926481 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-coupon/config.ts
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-coupon/config.ts
@@ -10,7 +10,7 @@ export interface UserCouponProperty {
 export const component = {
   id: 'UserCoupon',
   name: '用户卡券',
-  icon: 'ep:ticket',
+  icon: 'lucide:ticket',
   property: {
     style: {
       bgType: 'color',
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-coupon/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-coupon/index.vue
index 95d2ee6ff..6fbe90bd9 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-coupon/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-coupon/index.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import type { UserCouponProperty } from './config';
 
+import { Image } from 'ant-design-vue';
+
 /** 用户卡券 */
 defineOptions({ name: 'UserCoupon' });
 // 定义属性
@@ -11,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-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-coupon/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-coupon/property.vue
index 488bf3168..9a5633b36 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-coupon/property.vue
+++ b/apps/web-antd/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-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-order/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-order/config.ts
index 25ca85065..fcc4a6b53 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-order/config.ts
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-order/config.ts
@@ -2,15 +2,14 @@ import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 用户订单属性 */
 export interface UserOrderProperty {
-  // 组件样式
-  style: ComponentStyle;
+  style: ComponentStyle; // 组件样式
 }
 
-// 定义组件
+/** 定义组件 */
 export const component = {
   id: 'UserOrder',
   name: '用户订单',
-  icon: 'ep:list',
+  icon: 'lucide:clipboard-list',
   property: {
     style: {
       bgType: 'color',
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-order/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-order/index.vue
index 1eac1ee13..1451ac12d 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-order/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-order/index.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import type { UserOrderProperty } from './config';
 
+import { Image } from 'ant-design-vue';
+
 /** 用户订单 */
 defineOptions({ name: 'UserOrder' });
 // 定义属性
@@ -11,5 +13,3 @@ defineProps<{ property: UserOrderProperty }>();
     src="https://shopro.sheepjs.com/admin/static/images/shop/decorate/orderCardStyle.png"
   />
 </template>
-
-<style scoped lang="scss"></style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-order/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-order/property.vue
index 48f0c0a41..66c6cfdd1 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-order/property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-order/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-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-wallet/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-wallet/config.ts
index 2b10d32fb..ab48845d7 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-wallet/config.ts
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-wallet/config.ts
@@ -2,15 +2,14 @@ import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 用户资产属性 */
 export interface UserWalletProperty {
-  // 组件样式
-  style: ComponentStyle;
+  style: ComponentStyle; // 组件样式
 }
 
-// 定义组件
+/** 定义组件 */
 export const component = {
   id: 'UserWallet',
   name: '用户资产',
-  icon: 'ep:wallet-filled',
+  icon: 'lucide:wallet',
   property: {
     style: {
       bgType: 'color',
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-wallet/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-wallet/index.vue
index 7180a0c4d..9e7aa4891 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-wallet/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-wallet/index.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import type { UserWalletProperty } from './config';
 
+import { Image } from 'ant-design-vue';
+
 /** 用户资产 */
 defineOptions({ name: 'UserWallet' });
 // 定义属性
@@ -11,5 +13,3 @@ defineProps<{ property: UserWalletProperty }>();
     src="https://shopro.sheepjs.com/admin/static/images/shop/decorate/walletCardStyle.png"
   />
 </template>
-
-<style scoped lang="scss"></style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-wallet/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-wallet/property.vue
index 5c01b828e..f82113728 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-wallet/property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-wallet/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-antd/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/config.ts
index bc9195575..db001525a 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/config.ts
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/config.ts
@@ -2,27 +2,22 @@ import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 视频播放属性 */
 export interface VideoPlayerProperty {
-  // 视频链接
-  videoUrl: string;
-  // 封面链接
-  posterUrl: string;
-  // 是否自动播放
-  autoplay: boolean;
-  // 组件样式
-  style: VideoPlayerStyle;
+  videoUrl: string; // 视频链接
+  posterUrl: string; // 封面链接
+  autoplay: boolean; // 是否自动播放
+  style: VideoPlayerStyle; // 组件样式
 }
 
-// 视频播放样式
+/** 视频播放样式 */
 export interface VideoPlayerStyle extends ComponentStyle {
-  // 视频高度
-  height: number;
+  height: number; // 视频高度
 }
 
-// 定义组件
+/** 定义组件 */
 export const component = {
   id: 'VideoPlayer',
   name: '视频播放',
-  icon: 'ep:video-play',
+  icon: 'lucide:video',
   property: {
     videoUrl: '',
     posterUrl: '',
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/index.vue
index f7a105c4a..b89331eec 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/index.vue
@@ -10,10 +10,14 @@ defineProps<{ property: VideoPlayerProperty }>();
 </script>
 <template>
   <div class="w-full" :style="{ height: `${property.style.height}px` }">
-    <Image class="w-full" :src="property.posterUrl" v-if="property.posterUrl" />
+    <Image
+      class="h-full w-full"
+      :src="property.posterUrl"
+      v-if="property.posterUrl"
+    />
     <video
       v-else
-      class="w-full"
+      class="h-full w-full"
       :src="property.videoUrl"
       :poster="property.posterUrl"
       :autoplay="property.autoplay"
@@ -21,12 +25,3 @@ defineProps<{ property: VideoPlayerProperty }>();
     ></video>
   </div>
 </template>
-
-<style scoped lang="scss">
-/* 图片 */
-img {
-  display: block;
-  width: 100%;
-  height: 100%;
-}
-</style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/property.vue
index 453b23a63..aa3445b8e 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/property.vue
@@ -56,5 +56,3 @@ const formData = useVModel(props, 'modelValue', emit);
     </Form>
   </ComponentContainerProperty>
 </template>
-
-<style scoped lang="scss"></style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/index.vue
index 1ae7934ea..ec1ea1594 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/index.vue
@@ -3,12 +3,11 @@ import type { DiyComponent, DiyComponentLibrary, PageConfig } from './util';
 
 import { onMounted, ref, unref, watch } from 'vue';
 
-import { IFrame } from '@vben/common-ui';
+import { Page, useVbenModal } from '@vben/common-ui';
 import { IconifyIcon } from '@vben/icons';
 import { cloneDeep, isEmpty, isString } from '@vben/utils';
 
-import { useQRCode } from '@vueuse/integrations/useQRCode';
-import { Button, Card, Modal, Tag, Tooltip } from 'ant-design-vue';
+import { Button, Card, Col, QRCode, Row, Tag, Tooltip } from 'ant-design-vue';
 import draggable from 'vuedraggable';
 
 import statusBarImg from '#/assets/imgs/diy/statusBar.png';
@@ -37,12 +36,7 @@ const props = defineProps({
   previewUrl: { type: String, default: '' }, // 预览地址：提供了预览地址，才会显示预览按钮
 });
 
-const emits = defineEmits(['reset', 'preview', 'save', 'update:modelValue']); // 工具栏操作
-
-const qrcode = useQRCode(props.previewUrl, {
-  errorCorrectionLevel: 'H',
-  margin: 4,
-}); // 预览二维码
+const emits = defineEmits(['reset', 'save', 'update:modelValue']); // 工具栏操作
 
 const componentLibrary = ref(); // 左侧组件库
 const pageConfigComponent = ref<DiyComponent<any>>(
@@ -68,17 +62,20 @@ watch(
       isString(props.modelValue) && !isEmpty(props.modelValue)
         ? (JSON.parse(props.modelValue) as PageConfig)
         : props.modelValue;
-    // TODO @AI：这里可以简化么？idea 提示 Invalid 'typeof' check: 'modelValue' cannot have type 'string'
+    // noinspection SuspiciousTypeOfGuard
     pageConfigComponent.value.property =
       (typeof modelValue !== 'string' && modelValue?.page) ||
       PAGE_CONFIG_COMPONENT.property;
+    // noinspection SuspiciousTypeOfGuard
     navigationBarComponent.value.property =
       (typeof modelValue !== 'string' && modelValue?.navigationBar) ||
       NAVIGATION_BAR_COMPONENT.property;
+    // noinspection SuspiciousTypeOfGuard
     tabBarComponent.value.property =
       (typeof modelValue !== 'string' && modelValue?.tabBar) ||
       TAB_BAR_COMPONENT.property;
     // 查找对应的页面组件
+    // noinspection SuspiciousTypeOfGuard
     pageComponents.value = (
       (typeof modelValue !== 'string' && modelValue?.components) ||
       []
@@ -99,6 +96,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!;
   },
@@ -166,7 +168,8 @@ function handleComponentSelected(
   component: DiyComponent<any>,
   index: number = -1,
 ) {
-  selectedComponent.value = component;
+  // 使用深拷贝避免响应式追踪循环警告
+  selectedComponent.value = cloneDeep(component);
   selectedComponentIndex.value = index;
 }
 
@@ -224,7 +227,6 @@ function handleCopyComponent(index: number) {
 
 /** 删除组件 */
 function handleDeleteComponent(index: number) {
-  // 删除组件
   pageComponents.value.splice(index, 1);
   if (index < pageComponents.value.length) {
     // 1. 不是最后一个组件时，删除后选中下面的组件
@@ -251,12 +253,17 @@ function handleReset() {
   emits('reset');
 }
 
-// TODO @AI：搞成 modal 来？
+const [PreviewModal, previewModalApi] = useVbenModal({
+  showConfirmButton: false,
+  showCancelButton: false,
+  onCancel() {
+    previewModalApi.close();
+  },
+});
+
 /** 预览 */
-const previewDialogVisible = ref(false);
 function handlePreview() {
-  previewDialogVisible.value = true;
-  emits('preview');
+  previewModalApi.open();
 }
 
 /** 设置默认选中的组件 */
@@ -281,50 +288,62 @@ onMounted(() => {
 });
 </script>
 <template>
-  <div>
-    <div class="editor flex h-full flex-col">
-      <!-- 顶部：工具栏 -->
-      <div class="editor-header flex items-center">
-        <!-- 左侧操作区 -->
+  <Page auto-content-height>
+    <!-- 顶部：工具栏 -->
+    <Row class="bg-card flex max-h-12 rounded-lg">
+      <!-- 左侧操作区 -->
+      <Col :span="8">
         <slot name="toolBarLeft"></slot>
-        <!-- 中心操作区 -->
-        <div class="header-center flex flex-1 items-center justify-center">
-          <span>{{ title }}</span>
-        </div>
-        <!-- 右侧操作区 -->
-        <div class="header-right flex">
+      </Col>
+      <!-- 中心操作区 -->
+      <Col :span="8">
+        <span class="flex h-full items-center justify-center">{{ title }}</span>
+      </Col>
+      <!-- 右侧操作区 -->
+      <Col :span="8">
+        <Button.Group
+          direction="vertical"
+          size="large"
+          class="flex justify-end"
+        >
           <Tooltip title="重置">
             <Button @click="handleReset">
-              <IconifyIcon :size="24" icon="system-uicons:reset-alt" />
+              <IconifyIcon class="size-6" icon="lucide:refresh-cw" />
             </Button>
           </Tooltip>
           <Tooltip v-if="previewUrl" title="预览">
             <Button @click="handlePreview">
-              <IconifyIcon :size="24" icon="ep:view" />
+              <IconifyIcon class="size-6" icon="lucide:eye" />
             </Button>
           </Tooltip>
           <Tooltip title="保存">
             <Button @click="handleSave">
-              <IconifyIcon :size="24" icon="ep:check" />
+              <IconifyIcon class="size-6" icon="lucide:check" />
             </Button>
           </Tooltip>
-        </div>
-      </div>
-
-      <!-- 中心区域 -->
-      <div class="editor-container flex flex-1">
-        <!-- 左侧：组件库（ComponentLibrary） -->
+        </Button.Group>
+      </Col>
+    </Row>
+    <!-- 中心区域 -->
+    <Row class="mt-4 h-[calc(80vh)]">
+      <!-- 左侧：组件库（ComponentLibrary） -->
+      <Col :span="6">
         <ComponentLibrary
           v-if="libs && libs.length > 0"
           ref="componentLibrary"
           :list="libs"
         />
-        <!-- 中心：设计区域（ComponentContainer） -->
-        <div class="editor-center page-prop-area" @click="handlePageSelected">
+      </Col>
+      <!-- 中心：设计区域（ComponentContainer） -->
+      <Col :span="12">
+        <div
+          class="relative flex max-h-[calc(80vh)] w-full flex-1 flex-col justify-center overflow-y-auto"
+          @click="handlePageSelected"
+        >
           <!-- 手机顶部 -->
-          <div class="editor-design-top">
+          <div class="mx-auto flex w-96 flex-col">
             <!-- 手机顶部状态栏 -->
-            <img alt="" class="status-bar" :src="statusBarImg" />
+            <img alt="" class="bg-card h-6" :src="statusBarImg" />
             <!-- 手机顶部导航栏 -->
             <ComponentContainer
               v-if="showNavigationBar"
@@ -352,45 +371,49 @@ onMounted(() => {
           </div>
           <!-- 手机页面编辑区域 -->
           <div
-            class="editor-design-center page-prop-area phone-container overflow-y-auto"
+            class="min-h-full w-full"
             :style="{
-              backgroundColor: pageConfigComponent.property.backgroundColor,
+              // backgroundColor: pageConfigComponent.property.backgroundColor,
               backgroundImage: `url(${pageConfigComponent.property.backgroundImage})`,
-              height: 'calc(100vh - 135px - 120px)',
             }"
           >
-            <draggable
-              v-model="pageComponents"
-              :animation="200"
-              :force-fallback="true"
-              class="page-prop-area drag-area"
-              filter=".component-toolbar"
-              ghost-class="draggable-ghost"
-              group="component"
-              item-key="index"
-              @change="handleComponentChange"
+            <div
+              class="bg-size-[auto_auto] relative mx-auto my-0 min-h-full w-96 items-center justify-center bg-no-repeat"
             >
-              <template #item="{ element, index }">
-                <ComponentContainer
-                  v-if="!element.position || element.position === 'center'"
-                  :active="selectedComponentIndex === index"
-                  :can-move-down="index < pageComponents.length - 1"
-                  :can-move-up="index > 0"
-                  :component="element"
-                  @click="handleComponentSelected(element, index)"
-                  @copy="handleCopyComponent(index)"
-                  @delete="handleDeleteComponent(index)"
-                  @move="
-                    (direction: number) => handleMoveComponent(index, direction)
-                  "
-                />
-              </template>
-            </draggable>
+              <draggable
+                v-model="pageComponents"
+                :animation="200"
+                :force-fallback="false"
+                class="min-h-full w-full"
+                filter=".component-toolbar"
+                ghost-class="draggable-ghost"
+                group="component"
+                item-key="index"
+                @change="handleComponentChange"
+              >
+                <template #item="{ element, index }">
+                  <ComponentContainer
+                    v-if="!element.position || element.position === 'center'"
+                    :active="selectedComponentIndex === index"
+                    :can-move-down="index < pageComponents.length - 1"
+                    :can-move-up="index > 0"
+                    :component="element"
+                    @click="handleComponentSelected(element, index)"
+                    @copy="handleCopyComponent(index)"
+                    @delete="handleDeleteComponent(index)"
+                    @move="
+                      (direction: number) =>
+                        handleMoveComponent(index, direction)
+                    "
+                  />
+                </template>
+              </draggable>
+            </div>
           </div>
           <!-- 手机底部导航 -->
           <div
             v-if="showTabBar"
-            class="editor-design-bottom component cursor-pointer"
+            class="bottom-2 mx-auto mb-2 w-96 cursor-pointer"
           >
             <ComponentContainer
               :active="selectedComponent?.id === tabBarComponent.id"
@@ -400,7 +423,7 @@ onMounted(() => {
             />
           </div>
           <!-- 固定布局的组件 操作按钮区 -->
-          <div class="fixed-component-action-group gap-2">
+          <div class="absolute right-4 top-0 flex flex-col gap-2">
             <Tag
               v-if="showPageConfig"
               :color="
@@ -409,9 +432,13 @@ onMounted(() => {
                   : 'default'
               "
               class="cursor-pointer"
+              size="large"
               @click="handleComponentSelected(pageConfigComponent)"
             >
-              <IconifyIcon :icon="pageConfigComponent.icon" :size="12" />
+              <IconifyIcon
+                :icon="pageConfigComponent.icon"
+                class="mr-2 size-4"
+              />
               <span>{{ pageConfigComponent.name }}</span>
             </Tag>
             <template v-for="(component, index) in pageComponents" :key="index">
@@ -422,205 +449,56 @@ onMounted(() => {
                 "
                 closable
                 class="cursor-pointer"
+                size="large"
                 @click="handleComponentSelected(component)"
                 @close="handleDeleteComponent(index)"
               >
-                <IconifyIcon :icon="component.icon" :size="12" />
+                <IconifyIcon :icon="component.icon" class="size-4" />
                 <span>{{ component.name }}</span>
               </Tag>
             </template>
           </div>
         </div>
-        <!-- 右侧：属性面板（ComponentContainerProperty） -->
-        <div v-if="selectedComponent?.property" class="editor-right w-[350px]">
-          <Card
-            class="h-full"
-            :body-style="{ height: 'calc(100% - 57px)', padding: 0 }"
-          >
-            <!-- 组件名称 -->
-            <template #title>
-              <div class="flex items-center gap-2">
-                <IconifyIcon :icon="selectedComponent?.icon" color="gray" />
-                <span>{{ selectedComponent?.name }}</span>
-              </div>
-            </template>
-            <div class="property h-full overflow-y-auto p-4">
-              <component
-                :is="`${selectedComponent?.id}Property`"
-                :key="selectedComponent?.uid || selectedComponent?.id"
-                v-model="selectedComponent.property"
-              />
+      </Col>
+      <!-- 右侧：属性面板（ComponentContainerProperty） -->
+      <Col :span="6" v-if="selectedComponent?.property">
+        <Card
+          class="h-[calc(80vh)] px-2 py-4"
+          :body-style="{ padding: 0 }"
+          :head-style="{ padding: 0, minHeight: '40px' }"
+        >
+          <!-- 组件名称 -->
+          <template #title>
+            <div class="flex h-8 items-center gap-1">
+              <IconifyIcon :icon="selectedComponent?.icon" color="gray" />
+              <span>{{ selectedComponent?.name }}</span>
             </div>
-          </Card>
-        </div>
-      </div>
-    </div>
+          </template>
+          <div
+            class="property mt-0 max-h-[calc(80vh-100px)] overflow-y-auto p-4"
+          >
+            <component
+              :is="`${selectedComponent?.id}Property`"
+              :key="selectedComponent?.uid || selectedComponent?.id"
+              v-model="selectedComponent.property"
+            />
+          </div>
+        </Card>
+      </Col>
+    </Row>
 
     <!-- 预览弹框 -->
-    <Modal v-model:open="previewDialogVisible" title="预览" width="700">
+    <PreviewModal title="预览" class="w-[700px]">
       <div class="flex justify-around">
-        <IFrame
+        <iframe
           :src="previewUrl"
-          class="h-[667px] w-[375px] rounded-lg border-4 border-solid p-0.5"
-        />
+          class="h-[667px] w-96 rounded-lg border-4 border-solid p-0.5"
+        ></iframe>
         <div class="flex flex-col">
           <div class="text-base">手机扫码预览</div>
-          <img :src="qrcode" alt="qrcode" class="w-1/2" />
-          <!-- <Qrcode :text="previewUrl" logo="/logo.gif" /> -->
+          <QRCode :value="previewUrl" error-level="H" />
         </div>
       </div>
-    </Modal>
-  </div>
+    </PreviewModal>
+  </Page>
 </template>
-<style lang="scss" scoped>
-/* 手机宽度 */
-$phone-width: 375px;
-
-/* 根节点样式 */
-.editor {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-
-  /* 顶部：工具栏 */
-  .editor-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    height: 42px;
-    padding: 0;
-    background-color: var(--ant-color-bg-container);
-    border-bottom: solid 1px var(--ant-color-border);
-
-    /* 工具栏：右侧按钮 */
-    .header-right {
-      height: 100%;
-
-      .ant-btn {
-        height: 100%;
-      }
-    }
-
-    /* 隐藏工具栏按钮的边框 */
-    :deep(.ant-radio-button-wrapper),
-    :deep(.ant-btn) {
-      border-top: none !important;
-      border-bottom: none !important;
-      border-radius: 0 !important;
-    }
-  }
-
-  /* 中心操作区 */
-  .editor-container {
-    height: calc(100vh - 135px);
-
-    /* 右侧属性面板 */
-    :deep(.editor-right) {
-      flex-shrink: 0;
-      overflow: hidden;
-      box-shadow: -8px 0 8px -8px rgb(0 0 0 / 12%);
-
-      /* 属性面板顶部：减少内边距 */
-      :deep(.ant-card-head) {
-        padding: 8px 16px;
-      }
-
-      /* 属性面板分组 */
-      :deep(.property-group) {
-        margin: 0 -20px;
-
-        &.ant-card {
-          border: none;
-        }
-
-        /* 属性分组名称 */
-        .ant-card-head {
-          padding: 8px 32px;
-          background: var(--ant-color-bg-layout);
-          border: none;
-        }
-
-        .ant-card-body {
-          border: none;
-        }
-      }
-    }
-
-    /* 中心区域 */
-    .editor-center {
-      position: relative;
-      display: flex;
-      flex: 1 1 0;
-      flex-direction: column;
-      justify-content: center;
-      width: 100%;
-      margin: 16px 0 0;
-      overflow: hidden;
-      background-color: var(--app-content-bg-color);
-
-      /* 手机顶部 */
-      .editor-design-top {
-        display: flex;
-        flex-direction: column;
-        width: $phone-width;
-        margin: 0 auto;
-
-        /* 手机顶部状态栏 */
-        .status-bar {
-          width: $phone-width;
-          height: 20px;
-          background-color: #fff;
-        }
-      }
-
-      /* 手机底部导航 */
-      .editor-design-bottom {
-        width: $phone-width;
-        margin: 0 auto;
-      }
-
-      /* 手机页面编辑区域 */
-      :deep(.editor-design-center) {
-        width: 100%;
-
-        /* 主体内容 */
-        .phone-container {
-          position: relative;
-          width: $phone-width;
-          height: 100%;
-          margin: 0 auto;
-          background-repeat: no-repeat;
-          background-size: 100% 100%;
-
-          .drag-area {
-            width: 100%;
-            height: 100%;
-          }
-        }
-      }
-
-      /* 固定布局的组件 操作按钮区 */
-      .fixed-component-action-group {
-        position: absolute;
-        top: 0;
-        right: 16px;
-        display: flex;
-        flex-direction: column;
-
-        :deep(.ant-tag) {
-          display: flex;
-          align-items: center;
-          justify-content: flex-start;
-          width: 100%;
-          border: none;
-          box-shadow: 0 2px 8px 0 rgb(0 0 0 / 10%);
-
-          .anticon {
-            margin-right: 4px;
-          }
-        }
-      }
-    }
-  }
-}
-</style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/draggable/index.vue b/apps/web-antd/src/views/mall/promotion/components/draggable/index.vue
index 8bb352329..95c5a396d 100644
--- a/apps/web-antd/src/views/mall/promotion/components/draggable/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/draggable/index.vue
@@ -45,7 +45,7 @@ const handleDelete = function (index: number) {
 </script>
 
 <template>
-  <div class="text-xs text-gray-500">拖动左上角的小圆点可对其排序</div>
+  <div class="text-sm text-gray-500">拖动左上角的小圆点可对其排序</div>
   <VueDraggable
     :list="formData"
     :force-fallback="true"
@@ -58,21 +58,18 @@ const handleDelete = function (index: number) {
       <div class="mb-1 flex flex-col gap-1 rounded border border-gray-200 p-2">
         <!-- 操作按钮区 -->
         <div
-          class="-m-2 mb-1 flex flex-row items-center justify-between p-2"
-          style="background-color: var(--app-content-bg-color)"
+          class="bg-secondary -m-2 mb-1 flex flex-row items-center justify-between rounded-t p-2"
         >
           <Tooltip title="拖动排序">
             <IconifyIcon
-              icon="ic:round-drag-indicator"
-              class="drag-icon cursor-move"
-              style="color: #8a909c"
+              icon="lucide:move"
+              class="drag-icon cursor-move text-gray-500"
             />
           </Tooltip>
-          <Tooltip title="删除">
+          <Tooltip v-if="formData.length > min" title="删除">
             <IconifyIcon
-              icon="ep:delete"
-              class="cursor-pointer text-red-500"
-              v-if="formData.length > min"
+              icon="lucide:trash-2"
+              class="cursor-pointer text-red-500 hover:text-red-600"
               @click="handleDelete(index)"
             />
           </Tooltip>
@@ -82,7 +79,11 @@ const handleDelete = function (index: number) {
       </div>
     </template>
   </VueDraggable>
-  <Tooltip :title="limit < 1 ? undefined : `最多添加${limit}个`">
+  <Tooltip
+    :title="
+      limit > 0 && limit < Number.MAX_VALUE ? `最多添加${limit}个` : undefined
+    "
+  >
     <Button
       type="primary"
       ghost
@@ -90,7 +91,10 @@ const handleDelete = function (index: number) {
       :disabled="limit > 0 && formData.length >= limit"
       @click="handleAdd"
     >
-      <IconifyIcon icon="ep:plus" /><span>添加</span>
+      <template #icon>
+        <IconifyIcon icon="lucide:plus" />
+      </template>
+      添加
     </Button>
   </Tooltip>
 </template>
diff --git a/apps/web-antd/src/views/mall/promotion/components/input-with-color/index.vue b/apps/web-antd/src/views/mall/promotion/components/input-with-color/index.vue
index 25b08a03e..1671318ec 100644
--- a/apps/web-antd/src/views/mall/promotion/components/input-with-color/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/input-with-color/index.vue
@@ -1,8 +1,6 @@
 <script lang="ts" setup>
-// import { PREDEFINE_COLORS } from '@vben/constants';
-
 import { useVModels } from '@vueuse/core';
-import { Input, InputGroup } from 'ant-design-vue';
+import { Input } from 'ant-design-vue';
 
 /** 带颜色选择器输入框 */
 defineOptions({ name: 'InputWithColor' });
@@ -24,11 +22,25 @@ const { modelValue, color } = useVModels(props, emit);
 </script>
 
 <template>
-  <InputGroup compact>
+  <div class="flex gap-2">
     <Input v-model:value="modelValue" v-bind="$attrs" class="flex-1" />
-    <!-- TODO 芋艿：后续在处理，antd 不支持该组件；
-    <ColorPicker v-model:value="color" :presets="PREDEFINE_COLORS" />
-    -->
-  </InputGroup>
+    <input
+      v-model="color"
+      type="color"
+      class="h-8 w-10 cursor-pointer rounded border border-gray-300"
+    />
+  </div>
 </template>
-<style scoped lang="scss"></style>
+
+<style scoped lang="scss">
+input[type='color'] {
+  &::-webkit-color-swatch-wrapper {
+    padding: 2px;
+  }
+
+  &::-webkit-color-swatch {
+    border: none;
+    border-radius: 2px;
+  }
+}
+</style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/magic-cube-editor/index.vue b/apps/web-antd/src/views/mall/promotion/components/magic-cube-editor/index.vue
index d260ded9c..7372ec5b4 100644
--- a/apps/web-antd/src/views/mall/promotion/components/magic-cube-editor/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/magic-cube-editor/index.vue
@@ -7,16 +7,16 @@ import { IconifyIcon } from '@vben/icons';
 
 import { createRect, isContains, isOverlap } from './util';
 
-// TODO @AI: 改成标准注释
-// 魔方编辑器
-// 有两部分组成：
-// 1. 魔方矩阵：位于底层，由方块组件的二维表格，用于创建热区
-//    操作方法：
-//    1.1 点击其中一个方块就会进入热区选择模式
-//    1.2 再次点击另外一个方块时，结束热区选择模式
-//    1.3 在两个方块中间的区域创建热区
-//    如果两次点击的都是同一方块，就只创建一个格子的热区
-// 2. 热区：位于顶层，采用绝对定位，覆盖在魔方矩阵上面。
+/**
+ * 魔方编辑器，有两部分组成：
+ *  1. 魔方矩阵：位于底层，由方块组件的二维表格，用于创建热区
+ *    操作方法：
+ *       1.1 点击其中一个方块就会进入热区选择模式
+ *       1.2 再次点击另外一个方块时，结束热区选择模式
+ *       1.3 在两个方块中间的区域创建热区
+ *    如果两次点击的都是同一方块，就只创建一个格子的热区
+ *  2. 热区：位于顶层，采用绝对定位，覆盖在魔方矩阵上面。
+ */
 defineOptions({ name: 'MagicCubeEditor' });
 
 /** 定义属性 */
@@ -34,7 +34,6 @@ const props = defineProps({
     type: Number,
     default: 4,
   }, // 列数，默认 4 列
-
   cubeSize: {
     type: Number,
     default: 75,
@@ -70,6 +69,7 @@ watch(
 );
 
 const hotAreas = ref<Rect[]>([]); // 热区列表
+
 /** 初始化热区 */
 watch(
   () => props.modelValue,
@@ -86,20 +86,20 @@ const isHotAreaSelectMode = () => !!hotAreaBeginCube.value; // 是否开启了
  * @param currentRow 当前行号
  * @param currentCol 当前列号
  */
-const handleCubeClick = (currentRow: number, currentCol: number) => {
+function handleCubeClick(currentRow: number, currentCol: number) {
   const currentCube = cubes.value[currentRow]?.[currentCol];
   if (!currentCube) {
     return;
   }
 
-  // 情况1：进入热区选择模式
+  // 情况 1：进入热区选择模式
   if (!isHotAreaSelectMode()) {
     hotAreaBeginCube.value = currentCube;
     hotAreaBeginCube.value!.active = true;
     return;
   }
 
-  // 情况2：结束热区选择模式
+  // 情况 2：结束热区选择模式
   hotAreas.value.push(createRect(hotAreaBeginCube.value!, currentCube));
   // 结束热区选择模式
   exitHotAreaSelectMode();
@@ -111,7 +111,7 @@ const handleCubeClick = (currentRow: number, currentCol: number) => {
   }
   // 发送热区变动通知
   emitUpdateModelValue();
-};
+}
 
 /**
  * 处理鼠标经过方块
@@ -119,7 +119,7 @@ const handleCubeClick = (currentRow: number, currentCol: number) => {
  * @param currentRow 当前行号
  * @param currentCol 当前列号
  */
-const handleCellHover = (currentRow: number, currentCol: number) => {
+function handleCellHover(currentRow: number, currentCol: number) {
   // 当前没有进入热区选择模式
   if (!isHotAreaSelectMode()) {
     return;
@@ -138,7 +138,6 @@ const handleCellHover = (currentRow: number, currentCol: number) => {
     if (isOverlap(hotArea, currentSelectedArea)) {
       // 结束热区选择模式
       exitHotAreaSelectMode();
-
       return;
     }
   }
@@ -147,13 +146,9 @@ const handleCellHover = (currentRow: number, currentCol: number) => {
   eachCube((_, __, cube) => {
     cube.active = isContains(currentSelectedArea, cube);
   });
-};
+}
 
-/**
- * 处理热区删除
- *
- * @param index 热区索引
- */
+/** 处理热区删除 */
 function handleDeleteHotArea(index: number) {
   hotAreas.value.splice(index, 1);
   // 结束热区选择模式
@@ -165,10 +160,12 @@ function handleDeleteHotArea(index: number) {
 const emitUpdateModelValue = () => emit('update:modelValue', hotAreas.value); // 发送热区变动通知
 
 const selectedHotAreaIndex = ref(0); // 热区选中
-const handleHotAreaSelected = (hotArea: Rect, index: number) => {
+
+/** 处理热区选中 */
+function handleHotAreaSelected(hotArea: Rect, index: number) {
   selectedHotAreaIndex.value = index;
   emit('hotAreaSelected', hotArea, index);
-};
+}
 
 /**
  * 结束热区选择模式
@@ -189,7 +186,7 @@ function exitHotAreaSelectMode() {
  * 迭代魔方矩阵
  * @param callback 回调
  */
-const eachCube = (callback: (x: number, y: number, cube: Cube) => void) => {
+function eachCube(callback: (x: number, y: number, cube: Cube) => void) {
   for (const [x, row] of cubes.value.entries()) {
     if (!row) continue;
     for (const [y, cube] of row.entries()) {
@@ -198,105 +195,57 @@ const eachCube = (callback: (x: number, y: number, cube: Cube) => void) => {
       }
     }
   }
-};
+}
 </script>
 <template>
-  <div class="relative">
-    <table class="cube-table">
-      <!-- 底层：魔方矩阵 -->
-      <tbody>
-        <tr v-for="(rowCubes, row) in cubes" :key="row">
-          <td
-            v-for="(cube, col) in rowCubes"
-            :key="col"
-            class="cube"
-            :class="[{ active: cube.active }]"
-            :style="{
-              width: `${cubeSize}px`,
-              height: `${cubeSize}px`,
-            }"
-            @click="handleCubeClick(row, col)"
-            @mouseenter="handleCellHover(row, col)"
-          >
-            <IconifyIcon icon="ep-plus" />
-          </td>
-        </tr>
-      </tbody>
-      <!-- 顶层：热区 -->
-      <div
-        v-for="(hotArea, index) in hotAreas"
-        :key="index"
-        class="hot-area"
-        :style="{
-          top: `${cubeSize * hotArea.top}px`,
-          left: `${cubeSize * hotArea.left}px`,
-          height: `${cubeSize * hotArea.height}px`,
-          width: `${cubeSize * hotArea.width}px`,
-        }"
-        @click="handleHotAreaSelected(hotArea, index)"
-        @mouseover="exitHotAreaSelectMode"
-      >
-        <!-- 右上角热区删除按钮 -->
-        <div
-          v-if="
-            selectedHotAreaIndex === index && hotArea.width && hotArea.height
-          "
-          class="btn-delete"
-          @click="handleDeleteHotArea(index)"
+  <table class="relative border-collapse border-spacing-0">
+    <!-- 底层：魔方矩阵 -->
+    <tbody>
+      <tr v-for="(rowCubes, row) in cubes" :key="row">
+        <td
+          v-for="(cube, col) in rowCubes"
+          :key="col"
+          class="active:bg-primary-200 hover:bg-primary-100 box-border cursor-pointer border text-center align-middle"
+          :class="[{ active: cube.active }]"
+          :style="{
+            width: `${cubeSize}px`,
+            height: `${cubeSize}px`,
+          }"
+          @click="handleCubeClick(row, col)"
+          @mouseenter="handleCellHover(row, col)"
         >
-          <IconifyIcon icon="ep:circle-close-filled" />
-        </div>
-        <span v-if="hotArea.width">{{
-          `${hotArea.width}×${hotArea.height}`
-        }}</span>
+          <IconifyIcon icon="lucide:plus" class="inline-block size-6" />
+        </td>
+      </tr>
+    </tbody>
+    <!-- 顶层：热区 -->
+    <div
+      v-for="(hotArea, index) in hotAreas"
+      :key="index"
+      class="bg-primary-200 border-primary absolute box-border flex items-center justify-center border"
+      :style="{
+        top: `${cubeSize * hotArea.top}px`,
+        left: `${cubeSize * hotArea.left}px`,
+        height: `${cubeSize * hotArea.height}px`,
+        width: `${cubeSize * hotArea.width}px`,
+      }"
+      @click="handleHotAreaSelected(hotArea, index)"
+      @mouseover="exitHotAreaSelectMode"
+    >
+      <!-- 右上角热区删除按钮 -->
+      <div
+        v-if="selectedHotAreaIndex === index && hotArea.width && hotArea.height"
+        class="bg-card absolute -right-2 -top-2 z-[1] size-6 h-4 w-4 items-center rounded-lg"
+        @click="handleDeleteHotArea(index)"
+      >
+        <IconifyIcon
+          icon="lucide:x"
+          class="bg-primary inset-0 items-center text-white"
+        />
       </div>
-    </table>
-  </div>
+      <span v-if="hotArea.width">
+        {{ `${hotArea.width}×${hotArea.height}` }}
+      </span>
+    </div>
+  </table>
 </template>
-<style lang="scss" scoped>
-.cube-table {
-  position: relative;
-  border-spacing: 0;
-  border-collapse: collapse;
-
-  .cube {
-    box-sizing: border-box;
-    color: var(--el-text-color-secondary);
-    text-align: center;
-    cursor: pointer;
-    border: 1px solid var(--el-border-color);
-
-    &.active {
-      background: var(--el-color-primary-light-9);
-    }
-  }
-
-  .hot-area {
-    position: absolute;
-    box-sizing: border-box;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: var(--el-color-primary);
-    cursor: pointer;
-    border-spacing: 0;
-    border-collapse: collapse;
-    background: var(--el-color-primary-light-8);
-    border: 1px solid var(--el-color-primary);
-
-    .btn-delete {
-      position: absolute;
-      top: -8px;
-      right: -8px;
-      z-index: 1;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 16px;
-      height: 16px;
-      background-color: #fff;
-      border-radius: 50%;
-    }
-  }
-}
-</style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/magic-cube-editor/util.ts b/apps/web-antd/src/views/mall/promotion/components/magic-cube-editor/util.ts
index 1ee8fb5a4..6e3eb7cd2 100644
--- a/apps/web-antd/src/views/mall/promotion/components/magic-cube-editor/util.ts
+++ b/apps/web-antd/src/views/mall/promotion/components/magic-cube-editor/util.ts
@@ -1,51 +1,47 @@
-// 坐标点
+/** 坐标点 */
 export interface Point {
   x: number;
   y: number;
 }
 
-// 矩形
+/** 矩形 */
 export interface Rect {
-  // 左上角 X 轴坐标
-  left: number;
-  // 左上角 Y 轴坐标
-  top: number;
-  // 右下角 X 轴坐标
-  right: number;
-  // 右下角 Y 轴坐标
-  bottom: number;
-  // 矩形宽度
-  width: number;
-  // 矩形高度
-  height: number;
+  left: number; // 左上角 X 轴坐标
+  top: number; // 左上角 Y 轴坐标
+  right: number; // 右下角 X 轴坐标
+  bottom: number; // 右下角 Y 轴坐标
+  width: number; // 矩形宽度
+  height: number; // 矩形高度
 }
 
 /**
  * 判断两个矩形是否重叠
+ *
  * @param a 矩形 A
  * @param b 矩形 B
  */
-export const isOverlap = (a: Rect, b: Rect): boolean => {
+export function isOverlap(a: Rect, b: Rect): boolean {
   return (
     a.left < b.left + b.width &&
     a.left + a.width > b.left &&
     a.top < b.top + b.height &&
     a.height + a.top > b.top
   );
-};
+}
+
 /**
  * 检查坐标点是否在矩形内
  * @param hotArea 矩形
  * @param point 坐标
  */
-export const isContains = (hotArea: Rect, point: Point): boolean => {
+export function isContains(hotArea: Rect, point: Point): boolean {
   return (
     point.x >= hotArea.left &&
     point.x < hotArea.right &&
     point.y >= hotArea.top &&
     point.y < hotArea.bottom
   );
-};
+}
 
 /**
  * 在两个坐标点中间，创建一个矩形
@@ -59,14 +55,17 @@ export const isContains = (hotArea: Rect, point: Point): boolean => {
  * @param a 坐标点一
  * @param b 坐标点二
  */
-export const createRect = (a: Point, b: Point): Rect => {
+export function createRect(a: Point, b: Point): Rect {
   // 计算矩形的范围
-  const [left, left2] = [a.x, b.x].sort();
-  const [top, top2] = [a.y, b.y].sort();
+  let [left, left2] = [a.x, b.x].sort();
+  left = left ?? 0;
+  left2 = left2 ?? 0;
+  let [top, top2] = [a.y, b.y].sort();
+  top = top ?? 0;
+  top2 = top2 ?? 0;
   const right = left2 + 1;
   const bottom = top2 + 1;
   const height = bottom - top;
   const width = right - left;
-
   return { left, right, top, bottom, height, width };
-};
+}
diff --git a/apps/web-antd/src/views/mall/promotion/components/vertical-button-group/index.vue b/apps/web-antd/src/views/mall/promotion/components/vertical-button-group/index.vue
index f7b609c1d..99d7d194c 100644
--- a/apps/web-antd/src/views/mall/promotion/components/vertical-button-group/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/vertical-button-group/index.vue
@@ -1,17 +1,16 @@
 <script setup lang="ts">
-import { ButtonGroup } from 'ant-design-vue';
-
+import { Space } from 'ant-design-vue';
 /**
  * 垂直按钮组
- * Element 官方的按钮组只支持水平显示，通过重写样式实现垂直布局
+ * Ant Design Vue 的按钮组只支持水平显示，通过重写样式实现垂直布局
  */
 defineOptions({ name: 'VerticalButtonGroup' });
 </script>
 
 <template>
-  <ButtonGroup direction="vertical" v-bind="$attrs">
-    <slot></slot>
-  </ButtonGroup>
+  <Space v-bind="$attrs">
+    <Space.Compact direction="vertical">
+      <slot></slot>
+    </Space.Compact>
+  </Space>
 </template>
-
-<style scoped lang="scss"></style>
diff --git a/apps/web-antd/src/views/mall/promotion/coupon/components/index.ts b/apps/web-antd/src/views/mall/promotion/coupon/components/index.ts
index 00a6c3f32..24cb4e274 100644
--- a/apps/web-antd/src/views/mall/promotion/coupon/components/index.ts
+++ b/apps/web-antd/src/views/mall/promotion/coupon/components/index.ts
@@ -1,2 +1,2 @@
-export * from './data';
+export { default as CouponSelect } from './select.vue';
 export { default as CouponSendForm } from './send-form.vue';
diff --git a/apps/web-antd/src/views/mall/promotion/coupon/components/select-data.ts b/apps/web-antd/src/views/mall/promotion/coupon/components/select-data.ts
new file mode 100644
index 000000000..e8c0ad53e
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/coupon/components/select-data.ts
@@ -0,0 +1,119 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import {
+  discountFormat,
+  remainedCountFormat,
+  takeLimitCountFormat,
+  validityTypeFormat,
+} from '../formatter';
+
+/** 优惠券选择的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '优惠券名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入优惠券名称',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'discountType',
+      label: '优惠类型',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.PROMOTION_DISCOUNT_TYPE, 'number'),
+        placeholder: '请选择优惠类型',
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 优惠券选择的表格列 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    { type: 'checkbox', width: 55 },
+    {
+      field: 'name',
+      title: '优惠券名称',
+      minWidth: 140,
+    },
+    {
+      field: 'productScope',
+      title: '类型',
+      minWidth: 80,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.PROMOTION_PRODUCT_SCOPE },
+      },
+    },
+    {
+      field: 'discountType',
+      title: '优惠类型',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.PROMOTION_DISCOUNT_TYPE },
+      },
+    },
+    {
+      field: 'discountPrice',
+      title: '优惠力度',
+      minWidth: 100,
+      formatter: ({ row }) => discountFormat(row),
+    },
+    {
+      field: 'takeType',
+      title: '领取方式',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.PROMOTION_COUPON_TAKE_TYPE },
+      },
+    },
+    {
+      field: 'validityType',
+      title: '使用时间',
+      minWidth: 185,
+      align: 'center',
+      formatter: ({ row }) => validityTypeFormat(row),
+    },
+    {
+      field: 'totalCount',
+      title: '发放数量',
+      minWidth: 100,
+      align: 'center',
+    },
+    {
+      field: 'remainedCount',
+      title: '剩余数量',
+      minWidth: 100,
+      align: 'center',
+      formatter: ({ row }) => remainedCountFormat(row),
+    },
+    {
+      field: 'takeLimitCount',
+      title: '领取上限',
+      minWidth: 100,
+      align: 'center',
+      formatter: ({ row }) => takeLimitCountFormat(row),
+    },
+    {
+      field: 'status',
+      title: '状态',
+      minWidth: 80,
+      align: 'center',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/mall/promotion/coupon/components/select.vue b/apps/web-antd/src/views/mall/promotion/coupon/components/select.vue
new file mode 100644
index 000000000..073206aff
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/coupon/components/select.vue
@@ -0,0 +1,66 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MallCouponTemplateApi } from '#/api/mall/promotion/coupon/couponTemplate';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getCouponTemplatePage } from '#/api/mall/promotion/coupon/couponTemplate';
+
+import { useGridColumns, useGridFormSchema } from './select-data';
+
+defineOptions({ name: 'CouponSelect' });
+
+const props = defineProps<{
+  takeType?: number; // 领取方式
+}>();
+
+const emit = defineEmits(['success']);
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 500,
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getCouponTemplatePage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+            canTakeTypes: props.takeType ? [props.takeType] : [],
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MallCouponTemplateApi.CouponTemplate>,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    // 从 gridApi 获取选中的记录
+    const selectedRecords = (gridApi.grid?.getCheckboxRecords() ||
+      []) as MallCouponTemplateApi.CouponTemplate[];
+    await modalApi.close();
+    emit('success', selectedRecords);
+  },
+});
+</script>
+
+<template>
+  <Modal title="选择优惠券" class="w-2/3">
+    <Grid />
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/mall/promotion/coupon/components/data.ts b/apps/web-antd/src/views/mall/promotion/coupon/components/send-form-data.ts
similarity index 100%
rename from apps/web-antd/src/views/mall/promotion/coupon/components/data.ts
rename to apps/web-antd/src/views/mall/promotion/coupon/components/send-form-data.ts
diff --git a/apps/web-antd/src/views/mall/promotion/coupon/components/send-form.vue b/apps/web-antd/src/views/mall/promotion/coupon/components/send-form.vue
index 442217efe..f858cc75f 100644
--- a/apps/web-antd/src/views/mall/promotion/coupon/components/send-form.vue
+++ b/apps/web-antd/src/views/mall/promotion/coupon/components/send-form.vue
@@ -11,7 +11,7 @@ import { TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { sendCoupon } from '#/api/mall/promotion/coupon/coupon';
 import { getCouponTemplatePage } from '#/api/mall/promotion/coupon/couponTemplate';
 
-import { useFormSchema, useGridColumns } from './data';
+import { useFormSchema, useGridColumns } from './send-form-data';
 
 /** 发送优惠券 */
 async function handleSendCoupon(row: MallCouponTemplateApi.CouponTemplate) {
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/diy/template/decorate/index.vue b/apps/web-antd/src/views/mall/promotion/diy/template/decorate/index.vue
index 261d1f5e3..283708d10 100644
--- a/apps/web-antd/src/views/mall/promotion/diy/template/decorate/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/diy/template/decorate/index.vue
@@ -3,15 +3,15 @@ import type { MallDiyPageApi } from '#/api/mall/promotion/diy/page';
 import type { MallDiyTemplateApi } from '#/api/mall/promotion/diy/template';
 import type { DiyComponentLibrary } from '#/views/mall/promotion/components'; // 商城的 DIY 组件，在 DiyEditor 目录下
 
-import { onMounted, reactive, ref } from 'vue';
+import { onMounted, ref } from 'vue';
 import { useRoute } from 'vue-router';
 
 import { useTabs } from '@vben/hooks';
 import { IconifyIcon } from '@vben/icons';
 import { useAccessStore } from '@vben/stores';
-import { isEmpty } from '@vben/utils';
+import { isEmpty, isNumber } from '@vben/utils';
 
-import { message, Radio, RadioGroup, Tooltip } from 'ant-design-vue';
+import { message, Radio, RadioGroup } from 'ant-design-vue';
 
 import { updateDiyPageProperty } from '#/api/mall/promotion/diy/page';
 import {
@@ -26,28 +26,35 @@ defineOptions({ name: 'DiyTemplateDecorate' });
 const route = useRoute();
 const { refreshTab } = useTabs();
 
-const DIY_PAGE_INDEX_KEY = 'diy_page_index'; // 特殊：存储 reset 重置时，当前 selectedTemplateItem 值，从而进行恢复
+/** 特殊：存储 reset 重置时，当前 selectedTemplateItem 值，从而进行恢复 */
+const DIY_PAGE_INDEX_KEY = 'diy_page_index';
 
 const selectedTemplateItem = ref(0);
-const templateItems = reactive([
-  { name: '基础设置', icon: 'ep:iphone' },
-  { name: '首页', icon: 'ep:home-filled' },
-  { name: '我的', icon: 'ep:user-filled' },
-]); // 左上角工具栏操作按钮
+/** 左上角工具栏操作按钮 */
+const templateItems = ref([
+  { name: '基础设置', icon: 'lucide:settings' },
+  { name: '首页', icon: 'lucide:home' },
+  { name: '我的', icon: 'lucide:user' },
+]);
 
 const formData = ref<MallDiyTemplateApi.DiyTemplateProperty>();
+/** 当前编辑的属性 */
 const currentFormData = ref<
   MallDiyPageApi.DiyPage | MallDiyTemplateApi.DiyTemplateProperty
 >({
   property: '',
-} as MallDiyPageApi.DiyPage); // 当前编辑的属性
+} as MallDiyPageApi.DiyPage);
+/** templateItem 对应的缓存 */
 const currentFormDataMap = ref<
   Map<string, MallDiyPageApi.DiyPage | MallDiyTemplateApi.DiyTemplateProperty>
->(new Map()); // templateItem 对应的缓存
+>(new Map());
 
-const previewUrl = ref(''); // 商城 H5 预览地址
+/** 商城 H5 预览地址 */
+const previewUrl = ref('');
 
-const templateLibs = [] as DiyComponentLibrary[]; // 模板组件库
+/** 模板组件库 */
+const templateLibs = [] as DiyComponentLibrary[];
+/** 当前组件库 */
 const libs = ref<DiyComponentLibrary[]>(templateLibs); // 当前组件库
 
 /** 获取详情 */
@@ -69,17 +76,23 @@ async function getPageDetail(id: any) {
 }
 
 /** 模板选项切换 */
-function handleTemplateItemChange(val: any) {
+function handleTemplateItemChange(event: any) {
+  // 从事件对象中获取值
+  const val = event.target?.value ?? event;
+  // 切换模版
+  selectedTemplateItem.value = isNumber(val)
+    ? val
+    : templateItems.value.findIndex((item) => item.name === val.name);
+
   // 缓存模版编辑数据
   currentFormDataMap.value.set(
-    templateItems[selectedTemplateItem.value]?.name || '',
+    templateItems.value[selectedTemplateItem.value]?.name || '',
     currentFormData.value!,
   );
   // 读取模版缓存
-  const data = currentFormDataMap.value.get(templateItems[val]?.name || '');
-
-  // 切换模版
-  selectedTemplateItem.value = val;
+  const data = currentFormDataMap.value.get(
+    templateItems.value[selectedTemplateItem.value]?.name || '',
+  );
 
   // 情况一：编辑模板
   if (val === 0) {
@@ -92,14 +105,22 @@ function handleTemplateItemChange(val: any) {
 
   // 情况二：编辑页面
   libs.value = PAGE_LIBS;
-  currentFormData.value = (
-    isEmpty(data)
-      ? formData.value!.pages.find(
-          (page: MallDiyPageApi.DiyPage) =>
-            page.name === templateItems[val]?.name,
-        )
-      : data
-  ) as MallDiyPageApi.DiyPage | MallDiyTemplateApi.DiyTemplateProperty;
+  const pageData = isEmpty(data)
+    ? formData.value!.pages.find(
+        (page: MallDiyPageApi.DiyPage) =>
+          page.name === templateItems.value[val]?.name,
+      )
+    : data;
+
+  // 如果找不到页面数据，使用默认值
+  currentFormData.value = pageData
+    ? (pageData as
+        | MallDiyPageApi.DiyPage
+        | MallDiyTemplateApi.DiyTemplateProperty)
+    : ({
+        property: '',
+        name: templateItems.value[val]?.name || '',
+      } as MallDiyPageApi.DiyPage);
 }
 
 /** 提交表单 */
@@ -110,7 +131,7 @@ async function submitForm() {
   });
   try {
     // 对所有的 templateItems 都进行保存，有缓存则保存缓存，解决都有修改时只保存了当前所编辑的 templateItem，导致装修效果存在差异
-    for (const [i, templateItem] of templateItems.entries()) {
+    for (const [i, templateItem] of templateItems.value.entries()) {
       const data = currentFormDataMap.value.get(templateItem.name) as any;
       // 情况一：基础设置
       if (i === 0) {
@@ -191,18 +212,25 @@ onMounted(async () => {
     <template #toolBarLeft>
       <RadioGroup
         :value="selectedTemplateItem"
-        class="h-full!"
+        class="flex items-center"
+        size="large"
         @change="handleTemplateItemChange"
       >
-        <Tooltip
-          v-for="(item, index) in templateItems"
-          :key="index"
-          :title="item.name"
-        >
-          <Radio.Button :value="index">
-            <IconifyIcon :icon="item.icon" :size="24" />
+        <template v-for="(item, index) in templateItems" :key="index">
+          <Radio.Button
+            :value="item"
+            :class="
+              index === selectedTemplateItem
+                ? 'bg-primary text-primary-foreground'
+                : ''
+            "
+          >
+            <IconifyIcon
+              :icon="item.icon"
+              class="mt-2 flex size-6 items-center"
+            />
           </Radio.Button>
-        </Tooltip>
+        </template>
       </RadioGroup>
     </template>
   </DiyEditor>
diff --git a/apps/web-antd/src/views/mall/promotion/kefu/asserts/a.png b/apps/web-antd/src/views/mall/promotion/kefu/asserts/a.png
new file mode 100644
index 000000000..32939004d
Binary files /dev/null and b/apps/web-antd/src/views/mall/promotion/kefu/asserts/a.png differ
diff --git a/apps/web-antd/src/views/mall/promotion/kefu/asserts/aini.png b/apps/web-antd/src/views/mall/promotion/kefu/asserts/aini.png
new file mode 100644
index 000000000..02cf5c498
Binary files /dev/null and b/apps/web-antd/src/views/mall/promotion/kefu/asserts/aini.png differ
diff --git a/apps/web-antd/src/views/mall/promotion/kefu/asserts/aixin.png b/apps/web-antd/src/views/mall/promotion/kefu/asserts/aixin.png
new file mode 100644
index 000000000..25e642234
Binary files /dev/null and b/apps/web-antd/src/views/mall/promotion/kefu/asserts/aixin.png differ
diff --git a/apps/web-antd/src/views/mall/promotion/kefu/asserts/baiyan.png b/apps/web-antd/src/views/mall/promotion/kefu/asserts/baiyan.png
new file mode 100644
index 000000000..d16260afd
Binary files /dev/null and b/apps/web-antd/src/views/mall/promotion/kefu/asserts/baiyan.png differ
diff --git a/apps/web-antd/src/views/mall/promotion/kefu/asserts/bizui.png b/apps/web-antd/src/views/mall/promotion/kefu/asserts/bizui.png
new file mode 100644
index 000000000..a3b18002e
Binary files /dev/null and b/apps/web-antd/src/views/mall/promotion/kefu/asserts/bizui.png differ
diff --git a/apps/web-antd/src/views/mall/promotion/kefu/asserts/buhaoyisi.png b/apps/web-antd/src/views/mall/promotion/kefu/asserts/buhaoyisi.png
new file mode 100644
index 000000000..54c4b3f71
Binary files /dev/null and b/apps/web-antd/src/views/mall/promotion/kefu/asserts/buhaoyisi.png differ
diff --git a/apps/web-antd/src/views/mall/promotion/kefu/asserts/bukesiyi.png b/apps/web-antd/src/views/mall/promotion/kefu/asserts/bukesiyi.png
new file mode 100644
index 000000000..5f272e3e4
Binary files /dev/null and b/apps/web-antd/src/views/mall/promotion/kefu/asserts/bukesiyi.png differ
diff --git a/apps/web-antd/src/views/mall/promotion/kefu/asserts/dajing.png b/apps/web-antd/src/views/mall/promotion/kefu/asserts/dajing.png
new file mode 100644
index 000000000..8649727ec
Binary files /dev/null and b/apps/web-antd/src/views/mall/promotion/kefu/asserts/dajing.png differ
diff --git a/apps/web-antd/src/views/mall/promotion/kefu/asserts/danao.png b/apps/web-antd/src/views/mall/promotion/kefu/asserts/danao.png
new file mode 100644
index 000000000..aa85a2947
Binary files /dev/null and b/apps/web-antd/src/views/mall/promotion/kefu/asserts/danao.png differ
diff --git a/apps/web-antd/src/views/mall/promotion/kefu/asserts/daxiao.png b/apps/web-antd/src/views/mall/promotion/kefu/asserts/daxiao.png
new file mode 100644
index 000000000..26206bc05
Binary files /dev/null and b/apps/web-antd/src/views/mall/promotion/kefu/asserts/daxiao.png differ
diff --git a/apps/web-antd/src/views/mall/promotion/kefu/asserts/dianzan.png b/apps/web-antd/src/views/mall/promotion/kefu/asserts/dianzan.png
new file mode 100644
index 000000000..2e7f00eba
Binary files /dev/null and b/apps/web-antd/src/views/mall/promotion/kefu/asserts/dianzan.png differ
diff --git a/apps/web-antd/src/views/mall/promotion/kefu/asserts/emo.png b/apps/web-antd/src/views/mall/promotion/kefu/asserts/emo.png
new file mode 100644
index 000000000..9c8455165
Binary files /dev/null and b/apps/web-antd/src/views/mall/promotion/kefu/asserts/emo.png differ
diff --git a/apps/web-antd/src/views/mall/promotion/kefu/asserts/esi.png b/apps/web-antd/src/views/mall/promotion/kefu/asserts/esi.png
new file mode 100644
index 000000000..84e9726f1
Binary files /dev/null and b/apps/web-antd/src/views/mall/promotion/kefu/asserts/esi.png differ
diff --git a/apps/web-antd/src/views/mall/promotion/kefu/asserts/fadai.png b/apps/web-antd/src/views/mall/promotion/kefu/asserts/fadai.png
new file mode 100644
index 000000000..0772de262
Binary files /dev/null and b/apps/web-antd/src/views/mall/promotion/kefu/asserts/fadai.png differ
diff --git a/apps/web-antd/src/views/mall/promotion/kefu/asserts/fankun.png b/apps/web-antd/src/views/mall/promotion/kefu/asserts/fankun.png
new file mode 100644
index 000000000..6e18dac3e
Binary files /dev/null and b/apps/web-antd/src/views/mall/promotion/kefu/asserts/fankun.png differ
diff --git a/apps/web-antd/src/views/mall/promotion/kefu/asserts/feiwen.png b/apps/web-antd/src/views/mall/promotion/kefu/asserts/feiwen.png
new file mode 100644
index 000000000..be9761658
Binary files /dev/null and b/apps/web-antd/src/views/mall/promotion/kefu/asserts/feiwen.png differ
diff --git a/apps/web-antd/src/views/mall/promotion/kefu/asserts/fennu.png b/apps/web-antd/src/views/mall/promotion/kefu/asserts/fennu.png
new file mode 100644
index 000000000..20c57338c
Binary files /dev/null and b/apps/web-antd/src/views/mall/promotion/kefu/asserts/fennu.png differ
diff --git a/apps/web-antd/src/views/mall/promotion/kefu/asserts/ganga.png b/apps/web-antd/src/views/mall/promotion/kefu/asserts/ganga.png
new file mode 100644
index 000000000..30ec329d2
Binary files /dev/null and b/apps/web-antd/src/views/mall/promotion/kefu/asserts/ganga.png differ
diff --git a/apps/web-antd/src/views/mall/promotion/kefu/asserts/ganmao.png b/apps/web-antd/src/views/mall/promotion/kefu/asserts/ganmao.png
new file mode 100644
index 000000000..35bbb89f3
Binary files /dev/null and b/apps/web-antd/src/views/mall/promotion/kefu/asserts/ganmao.png differ
diff --git a/apps/web-antd/src/views/mall/promotion/kefu/asserts/hanyan.png b/apps/web-antd/src/views/mall/promotion/kefu/asserts/hanyan.png
new file mode 100644
index 000000000..a0bc838b1
Binary files /dev/null and b/apps/web-antd/src/views/mall/promotion/kefu/asserts/hanyan.png differ
diff --git a/apps/web-antd/src/views/mall/promotion/kefu/asserts/haochi.png b/apps/web-antd/src/views/mall/promotion/kefu/asserts/haochi.png
new file mode 100644
index 000000000..2e52b6bee
Binary files /dev/null and b/apps/web-antd/src/views/mall/promotion/kefu/asserts/haochi.png differ
diff --git a/apps/web-antd/src/views/mall/promotion/kefu/asserts/hongxin.png b/apps/web-antd/src/views/mall/promotion/kefu/asserts/hongxin.png
new file mode 100644
index 000000000..65b5de8f0
Binary files /dev/null and b/apps/web-antd/src/views/mall/promotion/kefu/asserts/hongxin.png differ
diff --git a/apps/web-antd/src/views/mall/promotion/kefu/asserts/huaixiao.png b/apps/web-antd/src/views/mall/promotion/kefu/asserts/huaixiao.png
new file mode 100644
index 000000000..bc0e76c4c
Binary files /dev/null and b/apps/web-antd/src/views/mall/promotion/kefu/asserts/huaixiao.png differ
diff --git a/apps/web-antd/src/views/mall/promotion/kefu/asserts/jingkong.png b/apps/web-antd/src/views/mall/promotion/kefu/asserts/jingkong.png
new file mode 100644
index 000000000..7aa65845f
Binary files /dev/null and b/apps/web-antd/src/views/mall/promotion/kefu/asserts/jingkong.png differ
diff --git a/apps/web-antd/src/views/mall/promotion/kefu/asserts/jingshu.png b/apps/web-antd/src/views/mall/promotion/kefu/asserts/jingshu.png
new file mode 100644
index 000000000..0e984d68d
Binary files /dev/null and b/apps/web-antd/src/views/mall/promotion/kefu/asserts/jingshu.png differ
diff --git a/apps/web-antd/src/views/mall/promotion/kefu/asserts/jingya.png b/apps/web-antd/src/views/mall/promotion/kefu/asserts/jingya.png
new file mode 100644
index 000000000..9ba6bab32
Binary files /dev/null and b/apps/web-antd/src/views/mall/promotion/kefu/asserts/jingya.png differ
diff --git a/apps/web-antd/src/views/mall/promotion/kefu/asserts/kaixin.png b/apps/web-antd/src/views/mall/promotion/kefu/asserts/kaixin.png
new file mode 100644
index 000000000..29c9f5ddb
Binary files /dev/null and b/apps/web-antd/src/views/mall/promotion/kefu/asserts/kaixin.png differ
diff --git a/apps/web-antd/src/views/mall/promotion/kefu/asserts/keai.png b/apps/web-antd/src/views/mall/promotion/kefu/asserts/keai.png
new file mode 100644
index 000000000..d3b582c69
Binary files /dev/null and b/apps/web-antd/src/views/mall/promotion/kefu/asserts/keai.png differ
diff --git a/apps/web-antd/src/views/mall/promotion/kefu/asserts/keshui.png b/apps/web-antd/src/views/mall/promotion/kefu/asserts/keshui.png
new file mode 100644
index 000000000..cef489ea4
Binary files /dev/null and b/apps/web-antd/src/views/mall/promotion/kefu/asserts/keshui.png differ
diff --git a/apps/web-antd/src/views/mall/promotion/kefu/asserts/kun.png b/apps/web-antd/src/views/mall/promotion/kefu/asserts/kun.png
new file mode 100644
index 000000000..1ddc388a6
Binary files /dev/null and b/apps/web-antd/src/views/mall/promotion/kefu/asserts/kun.png differ
diff --git a/apps/web-antd/src/views/mall/promotion/kefu/asserts/lengku.png b/apps/web-antd/src/views/mall/promotion/kefu/asserts/lengku.png
new file mode 100644
index 000000000..c5c6feebb
Binary files /dev/null and b/apps/web-antd/src/views/mall/promotion/kefu/asserts/lengku.png differ
diff --git a/apps/web-antd/src/views/mall/promotion/kefu/asserts/liuhan.png b/apps/web-antd/src/views/mall/promotion/kefu/asserts/liuhan.png
new file mode 100644
index 000000000..e6ddc6f4d
Binary files /dev/null and b/apps/web-antd/src/views/mall/promotion/kefu/asserts/liuhan.png differ
diff --git a/apps/web-antd/src/views/mall/promotion/kefu/asserts/liukoushui.png b/apps/web-antd/src/views/mall/promotion/kefu/asserts/liukoushui.png
new file mode 100644
index 000000000..3e2fba656
Binary files /dev/null and b/apps/web-antd/src/views/mall/promotion/kefu/asserts/liukoushui.png differ
diff --git a/apps/web-antd/src/views/mall/promotion/kefu/asserts/liulei.png b/apps/web-antd/src/views/mall/promotion/kefu/asserts/liulei.png
new file mode 100644
index 000000000..dbf820404
Binary files /dev/null and b/apps/web-antd/src/views/mall/promotion/kefu/asserts/liulei.png differ
diff --git a/apps/web-antd/src/views/mall/promotion/kefu/asserts/mengbi.png b/apps/web-antd/src/views/mall/promotion/kefu/asserts/mengbi.png
new file mode 100644
index 000000000..a4206eefb
Binary files /dev/null and b/apps/web-antd/src/views/mall/promotion/kefu/asserts/mengbi.png differ
diff --git a/apps/web-antd/src/views/mall/promotion/kefu/asserts/mianwubiaoqing.png b/apps/web-antd/src/views/mall/promotion/kefu/asserts/mianwubiaoqing.png
new file mode 100644
index 000000000..6f315b98e
Binary files /dev/null and b/apps/web-antd/src/views/mall/promotion/kefu/asserts/mianwubiaoqing.png differ
diff --git a/apps/web-antd/src/views/mall/promotion/kefu/asserts/nanguo.png b/apps/web-antd/src/views/mall/promotion/kefu/asserts/nanguo.png
new file mode 100644
index 000000000..19b9fb94a
Binary files /dev/null and b/apps/web-antd/src/views/mall/promotion/kefu/asserts/nanguo.png differ
diff --git a/apps/web-antd/src/views/mall/promotion/kefu/asserts/outu.png b/apps/web-antd/src/views/mall/promotion/kefu/asserts/outu.png
new file mode 100644
index 000000000..2f9a06d63
Binary files /dev/null and b/apps/web-antd/src/views/mall/promotion/kefu/asserts/outu.png differ
diff --git a/apps/web-antd/src/views/mall/promotion/kefu/asserts/picture.svg b/apps/web-antd/src/views/mall/promotion/kefu/asserts/picture.svg
new file mode 100644
index 000000000..8811d4957
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/kefu/asserts/picture.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+        "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg t="1720063872285" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6895"
+     width="200" height="200">
+    <path d="M782.16 880.98c-179.31 23.91-361 23.91-540.32 0C138.89 867.25 62 779.43 62 675.57V348.43c0-103.86 76.89-191.69 179.84-205.41 179.31-23.91 361-23.91 540.31 0C885.11 156.75 962 244.57 962 348.43v327.13c0 103.87-76.89 191.69-179.84 205.42z"
+          fill="#FF554D" p-id="6896"></path>
+    <path d="M226.11 596.86c-9.74 47.83 17.26 95.6 63.48 111.3C333.49 723.08 394.55 737 469.53 737c59.25 0 105.46-8.69 140.23-19.7 51.59-16.34 79.94-71.16 63.37-122.68-24.47-76.11-65.57-180.7-106.68-180.7-64.62 0-64.62 96.92-64.62 96.92S437.22 317 372.61 317c-82.11 0-117.85 139.12-146.5 279.86z"
+          fill="#FFFFFF" p-id="6897"></path>
+    <path d="M782 347m-60 0a60 60 0 1 0 120 0 60 60 0 1 0-120 0Z" fill="#FFBC55" p-id="6898"></path>
+</svg>
diff --git a/apps/web-antd/src/views/mall/promotion/kefu/asserts/shengqi.png b/apps/web-antd/src/views/mall/promotion/kefu/asserts/shengqi.png
new file mode 100644
index 000000000..7dce41dc9
Binary files /dev/null and b/apps/web-antd/src/views/mall/promotion/kefu/asserts/shengqi.png differ
diff --git a/apps/web-antd/src/views/mall/promotion/kefu/asserts/shuizhuo.png b/apps/web-antd/src/views/mall/promotion/kefu/asserts/shuizhuo.png
new file mode 100644
index 000000000..97d0f0a67
Binary files /dev/null and b/apps/web-antd/src/views/mall/promotion/kefu/asserts/shuizhuo.png differ
diff --git a/apps/web-antd/src/views/mall/promotion/kefu/asserts/tianshi.png b/apps/web-antd/src/views/mall/promotion/kefu/asserts/tianshi.png
new file mode 100644
index 000000000..eb922dd7a
Binary files /dev/null and b/apps/web-antd/src/views/mall/promotion/kefu/asserts/tianshi.png differ
diff --git a/apps/web-antd/src/views/mall/promotion/kefu/asserts/xiaodiaoya.png b/apps/web-antd/src/views/mall/promotion/kefu/asserts/xiaodiaoya.png
new file mode 100644
index 000000000..29fbc0e19
Binary files /dev/null and b/apps/web-antd/src/views/mall/promotion/kefu/asserts/xiaodiaoya.png differ
diff --git a/apps/web-antd/src/views/mall/promotion/kefu/asserts/xiaoku.png b/apps/web-antd/src/views/mall/promotion/kefu/asserts/xiaoku.png
new file mode 100644
index 000000000..88a169d4f
Binary files /dev/null and b/apps/web-antd/src/views/mall/promotion/kefu/asserts/xiaoku.png differ
diff --git a/apps/web-antd/src/views/mall/promotion/kefu/asserts/xinsui.png b/apps/web-antd/src/views/mall/promotion/kefu/asserts/xinsui.png
new file mode 100644
index 000000000..a0f572a11
Binary files /dev/null and b/apps/web-antd/src/views/mall/promotion/kefu/asserts/xinsui.png differ
diff --git a/apps/web-antd/src/views/mall/promotion/kefu/asserts/xiong.png b/apps/web-antd/src/views/mall/promotion/kefu/asserts/xiong.png
new file mode 100644
index 000000000..43dfd7090
Binary files /dev/null and b/apps/web-antd/src/views/mall/promotion/kefu/asserts/xiong.png differ
diff --git a/apps/web-antd/src/views/mall/promotion/kefu/asserts/yiwen.png b/apps/web-antd/src/views/mall/promotion/kefu/asserts/yiwen.png
new file mode 100644
index 000000000..4c0da7095
Binary files /dev/null and b/apps/web-antd/src/views/mall/promotion/kefu/asserts/yiwen.png differ
diff --git a/apps/web-antd/src/views/mall/promotion/kefu/asserts/yun.png b/apps/web-antd/src/views/mall/promotion/kefu/asserts/yun.png
new file mode 100644
index 000000000..56e5d0218
Binary files /dev/null and b/apps/web-antd/src/views/mall/promotion/kefu/asserts/yun.png differ
diff --git a/apps/web-antd/src/views/mall/promotion/kefu/asserts/ziya.png b/apps/web-antd/src/views/mall/promotion/kefu/asserts/ziya.png
new file mode 100644
index 000000000..593ef5e68
Binary files /dev/null and b/apps/web-antd/src/views/mall/promotion/kefu/asserts/ziya.png differ
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 59a7d2179..55e833784 100644
--- a/apps/web-antd/src/views/mall/promotion/kefu/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/kefu/index.vue
@@ -1,28 +1,122 @@
 <script lang="ts" setup>
-import { Page } from '@vben/common-ui';
+import type { MallKefuConversationApi } from '#/api/mall/promotion/kefu/conversation';
 
-import { Button } from 'ant-design-vue';
+import { 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 { useMallKefuStore } from '#/store/mall/kefu';
+
+import ConversationList from './modules/conversation-list.vue';
+import MemberInfo from './modules/member/member-info.vue';
+import MessageList from './modules/message-list.vue';
+import { WebSocketMessageTypeConstants } from './modules/tools/constants';
+
+const accessStore = useAccessStore();
+const kefuStore = useMallKefuStore(); // 客服缓存
+
+/** 组件引用 */
+const messageListRef = ref<InstanceType<typeof MessageList>>();
+const memberInfoRef = ref<InstanceType<typeof MemberInfo>>();
+const conversationListRef = ref<InstanceType<typeof ConversationList>>();
+
+// ======================= WebSocket start =======================
+const url = `${`${import.meta.env.VITE_BASE_URL}/infra/ws`.replace(
+  'http',
+  'ws',
+)}?token=${accessStore.refreshToken}`; // 使用 refreshToken() :WebSocket 无法方便的刷新访问令牌
+const server = ref(url); // WebSocket 服务地址
+
+/** 发起 WebSocket 连接 */
+const { data, close, open } = useWebSocket(server.value, {
+  autoReconnect: true,
+  heartbeat: true,
+});
+
+/** 监听 WebSocket 数据 */
+watch(
+  () => data.value,
+  (newData) => {
+    if (!newData) return;
+    try {
+      // 1. 收到心跳
+      if (newData === 'pong') return;
+
+      // 2.1 解析 type 消息类型
+      const jsonMessage = JSON.parse(newData);
+      const type = jsonMessage.type;
+      if (!type) {
+        message.error(`未知的消息类型：${newData}`);
+        return;
+      }
+
+      // 2.2 消息类型：KEFU_MESSAGE_TYPE
+      if (type === WebSocketMessageTypeConstants.KEFU_MESSAGE_TYPE) {
+        const message = JSON.parse(jsonMessage.content);
+        // 刷新会话列表
+        kefuStore.updateConversation(message.conversationId);
+        // 刷新消息列表
+        messageListRef.value?.refreshMessageList(message);
+        return;
+      }
+
+      // 2.3 消息类型：KEFU_MESSAGE_ADMIN_READ
+      if (type === WebSocketMessageTypeConstants.KEFU_MESSAGE_ADMIN_READ) {
+        // 更新会话已读
+        const message = JSON.parse(jsonMessage.content);
+        kefuStore.updateConversationStatus(message.conversationId);
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  },
+  {
+    immediate: false, // 不立即执行
+  },
+);
+// ======================= WebSocket end =======================
+
+function handleChange(conversation: MallKefuConversationApi.Conversation) {
+  messageListRef.value?.getNewMessageList(conversation);
+  memberInfoRef.value?.initHistory(conversation);
+}
+
+/** 初始化 */
+onMounted(() => {
+  // 加载会话列表
+  kefuStore.setConversationList().then(() => {
+    conversationListRef.value?.calculationLastMessageTime();
+  });
+  // 打开 websocket 连接
+  open();
+});
+
+/** 销毁 */
+onBeforeUnmount(() => {
+  // 关闭 websocket 连接
+  close();
+});
 </script>
 
 <template>
-  <Page>
-    <Button
-      danger
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3"
-    >
-      该功能支持 Vue3 + element-plus 版本！
-    </Button>
-    <br />
-    <Button
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/mall/promotion/kefu/index"
-    >
-      可参考
-      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/mall/promotion/kefu/index
-      代码，pull request 贡献给我们！
-    </Button>
+  <Page auto-content-height>
+    <div class="flex h-full antialiased">
+      <div class="flex h-full w-full flex-row overflow-x-hidden">
+        <!-- 会话列表 -->
+        <ConversationList
+          class="w-1/6"
+          ref="conversationListRef"
+          @change="handleChange"
+        />
+        <!-- 会话详情（选中会话的消息列表） -->
+        <MessageList class="w-4/6" ref="messageListRef" />
+        <!-- 会员信息（选中会话的会员信息） -->
+        <MemberInfo class="w-[280px]" ref="memberInfoRef" />
+      </div>
+    </div>
   </Page>
 </template>
diff --git a/apps/web-antd/src/views/mall/promotion/kefu/modules/conversation-list.vue b/apps/web-antd/src/views/mall/promotion/kefu/modules/conversation-list.vue
new file mode 100644
index 000000000..c9484317b
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/kefu/modules/conversation-list.vue
@@ -0,0 +1,250 @@
+<script lang="ts" setup>
+import type { MallKefuConversationApi } from '#/api/mall/promotion/kefu/conversation';
+
+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, message } from 'ant-design-vue';
+
+import {
+  deleteConversation,
+  updateConversationPinned,
+} from '#/api/mall/promotion/kefu/conversation';
+import { useMallKefuStore } from '#/store/mall/kefu';
+
+import { KeFuMessageContentTypeEnum } from './tools/constants';
+import { useEmoji } from './tools/emoji';
+
+/** 打开右侧的消息列表 */
+const emits = defineEmits<{
+  (e: 'change', v: MallKefuConversationApi.Conversation): void;
+}>();
+const kefuStore = useMallKefuStore(); // 客服缓存
+const { replaceEmoji } = useEmoji();
+const activeConversationId = ref(-1); // 选中的会话
+const collapse = ref(false); // 折叠菜单
+
+/** 计算消息最后发送时间距离现在过去了多久 */
+const lastMessageTimeMap = ref<Map<number, string>>(new Map<number, string>());
+function calculationLastMessageTime() {
+  kefuStore.getConversationList?.forEach((item) => {
+    lastMessageTimeMap.value.set(
+      item.id,
+      formatPast(item.lastMessageTime, 'YYYY-MM-DD'),
+    );
+  });
+}
+defineExpose({ calculationLastMessageTime });
+
+function openRightMessage(item: MallKefuConversationApi.Conversation) {
+  // 同一个会话则不处理
+  if (activeConversationId.value === item.id) {
+    return;
+  }
+  activeConversationId.value = item.id;
+  emits('change', item);
+}
+
+/** 获得消息类型 */
+const getConversationDisplayText = computed(
+  () => (lastMessageContentType: number, lastMessageContent: string) => {
+    switch (lastMessageContentType) {
+      case KeFuMessageContentTypeEnum.IMAGE: {
+        return '[图片消息]';
+      }
+      case KeFuMessageContentTypeEnum.ORDER: {
+        return '[订单消息]';
+      }
+      case KeFuMessageContentTypeEnum.PRODUCT: {
+        return '[商品消息]';
+      }
+      case KeFuMessageContentTypeEnum.SYSTEM: {
+        return '[系统消息]';
+      }
+      case KeFuMessageContentTypeEnum.TEXT: {
+        return replaceEmoji(
+          jsonParse(lastMessageContent).text || lastMessageContent,
+        );
+      }
+      case KeFuMessageContentTypeEnum.VIDEO: {
+        return '[视频消息]';
+      }
+      case KeFuMessageContentTypeEnum.VOICE: {
+        return '[语音消息]';
+      }
+      default: {
+        return '';
+      }
+    }
+  },
+);
+
+// ======================= 右键菜单 =======================
+const showRightMenu = ref(false); // 显示右键菜单
+const rightMenuStyle = ref<any>({}); // 右键菜单 Style
+const rightClickConversation = ref<MallKefuConversationApi.Conversation>(
+  {} as MallKefuConversationApi.Conversation,
+); // 右键选中的会话对象
+
+/** 打开右键菜单 */
+function rightClick(
+  mouseEvent: PointerEvent,
+  item: MallKefuConversationApi.Conversation,
+) {
+  rightClickConversation.value = item;
+  // 显示右键菜单
+  showRightMenu.value = true;
+  rightMenuStyle.value = {
+    top: `${mouseEvent.clientY - 110}px`,
+    left: collapse.value
+      ? `${mouseEvent.clientX - 80}px`
+      : `${mouseEvent.clientX - 210}px`,
+  };
+}
+/** 关闭右键菜单 */
+function closeRightMenu() {
+  showRightMenu.value = false;
+}
+
+/** 置顶会话 */
+async function updateConversationPinnedFn(pinned: boolean) {
+  // 1. 会话置顶/取消置顶
+  await updateConversationPinned({
+    id: rightClickConversation.value.id,
+    pinned,
+  });
+  message.success(pinned ? '置顶成功' : '取消置顶成功');
+  // 2. 关闭右键菜单，更新会话列表
+  closeRightMenu();
+  await kefuStore.updateConversation(rightClickConversation.value.id);
+}
+
+/** 删除会话 */
+async function deleteConversationFn() {
+  // 1. 删除会话
+  confirm({
+    content: '您确定要删除该会话吗？',
+  }).then(async () => {
+    await deleteConversation(rightClickConversation.value.id);
+    // 2. 关闭右键菜单，更新会话列表
+    closeRightMenu();
+    kefuStore.deleteConversation(rightClickConversation.value.id);
+  });
+}
+
+/** 监听右键菜单的显示状态，添加点击事件监听器 */
+watch(showRightMenu, (val) => {
+  if (val) {
+    document.body.addEventListener('click', closeRightMenu);
+  } else {
+    document.body.removeEventListener('click', closeRightMenu);
+  }
+});
+
+const timer = ref<any>();
+
+/** 初始化 */
+onMounted(() => {
+  timer.value = setInterval(calculationLastMessageTime, 1000 * 10); // 十秒计算一次
+});
+
+/** 组件卸载前 */
+onBeforeUnmount(() => {
+  clearInterval(timer.value);
+});
+</script>
+
+<template>
+  <div
+    class="bg-background flex flex-shrink-0 flex-col border-r border-gray-200 p-4"
+  >
+    <div class="flex h-12 w-full flex-row items-center justify-between">
+      <span class="text-lg font-bold">会话记录</span>
+      <span
+        class="flex h-4 w-4 items-center justify-center rounded-full bg-indigo-100 text-indigo-600"
+      >
+        {{ kefuStore.getConversationList.length }}
+      </span>
+    </div>
+    <div class="mt-2 flex flex-col">
+      <div class="-mx-2 mt-4 flex h-48 flex-col space-y-1 overflow-y-auto">
+        <button
+          v-for="(item, index) in kefuStore.getConversationList"
+          :key="index"
+          class="flex flex-row items-center rounded-xl p-2 hover:bg-gray-100"
+          :class="{
+            'bg-gray-500/50': item.id === activeConversationId,
+          }"
+          @click="openRightMessage(item)"
+          @contextmenu.prevent="rightClick($event as PointerEvent, item)"
+        >
+          <div
+            class="flex h-8 w-8 items-center justify-center rounded-full bg-gray-200"
+          >
+            <Avatar :src="item.userAvatar" alt="avatar" />
+          </div>
+          <div class="ml-2 text-sm font-semibold">
+            {{ item.userNickname || 'null' }}
+          </div>
+          <!-- 最后聊天内容 -->
+          <div
+            v-dompurify-html="
+              getConversationDisplayText(
+                item.lastMessageContentType,
+                item.lastMessageContent,
+              )
+            "
+            class="line-clamp-1 flex items-center text-sm text-gray-500"
+          ></div>
+          <div
+            v-if="item.adminUnreadMessageCount > 0"
+            class="ml-auto flex h-4 w-4 items-center justify-center rounded bg-red-500 text-xs leading-none text-white"
+          >
+            {{ item.adminUnreadMessageCount }}
+          </div>
+        </button>
+      </div>
+    </div>
+
+    <!-- 右键，进行操作（类似微信） -->
+    <ul
+      v-show="showRightMenu"
+      :style="rightMenuStyle"
+      class="bg-background absolute z-[9999] m-0 w-32 list-none rounded-xl p-1 shadow-md"
+    >
+      <li
+        v-show="!rightClickConversation.adminPinned"
+        class="flex cursor-pointer items-center rounded-xl px-4 py-2 transition-colors hover:bg-gray-500/50"
+        @click.stop="updateConversationPinnedFn(true)"
+      >
+        <IconifyIcon class="mr-1" icon="lucide:arrow-up-to-line" />
+        置顶会话
+      </li>
+      <li
+        v-show="rightClickConversation.adminPinned"
+        class="flex cursor-pointer items-center rounded-xl px-4 py-2 transition-colors hover:bg-gray-500/50"
+        @click.stop="updateConversationPinnedFn(false)"
+      >
+        <IconifyIcon class="mr-1" icon="lucide:arrow-down-from-line" />
+        取消置顶
+      </li>
+      <li
+        class="flex cursor-pointer items-center rounded-xl px-4 py-2 transition-colors hover:bg-gray-500/50"
+        @click.stop="deleteConversationFn"
+      >
+        <IconifyIcon class="mr-1" color="red" icon="lucide:trash-2" />
+        删除会话
+      </li>
+      <li
+        class="flex cursor-pointer items-center rounded-xl px-4 py-2 transition-colors hover:bg-gray-500/50"
+        @click.stop="closeRightMenu"
+      >
+        <IconifyIcon class="mr-1" color="red" icon="lucide:x" />
+        取消
+      </li>
+    </ul>
+  </div>
+</template>
diff --git a/apps/web-antd/src/views/mall/promotion/kefu/modules/member/member-info.vue b/apps/web-antd/src/views/mall/promotion/kefu/modules/member/member-info.vue
new file mode 100644
index 000000000..4ffad2af4
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/kefu/modules/member/member-info.vue
@@ -0,0 +1,220 @@
+<!-- 右侧信息：会员信息 + 最近浏览 + 交易订单 -->
+<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, toRefs, watch } from 'vue';
+
+import { isEmpty } from '@vben/utils';
+
+import { useScroll } from '@vueuse/core';
+import { Empty, message } from 'ant-design-vue';
+
+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';
+
+import OrderBrowsingHistory from './order-browsing-history.vue';
+import ProductBrowsingHistory from './product-browsing-history.vue';
+
+const activeTab = ref<string>('会员信息');
+
+const tabActivation = computed(() => (tab: string) => activeTab.value === tab);
+
+/** tab 切换 */
+const productBrowsingHistoryRef =
+  ref<InstanceType<typeof ProductBrowsingHistory>>();
+const orderBrowsingHistoryRef =
+  ref<InstanceType<typeof OrderBrowsingHistory>>();
+async function handleClick(tab: string) {
+  activeTab.value = tab;
+  await nextTick();
+  await getHistoryList();
+}
+
+/** 获得历史数据 */
+async function getHistoryList() {
+  switch (activeTab.value) {
+    case '交易订单': {
+      await orderBrowsingHistoryRef.value?.getHistoryList(conversation.value);
+      break;
+    }
+    case '会员信息': {
+      await getUserData();
+      await getUserWallet();
+      break;
+    }
+    case '最近浏览': {
+      await productBrowsingHistoryRef.value?.getHistoryList(conversation.value);
+      break;
+    }
+    default: {
+      break;
+    }
+  }
+}
+
+/** 加载下一页数据 */
+async function loadMore() {
+  switch (activeTab.value) {
+    case '交易订单': {
+      await orderBrowsingHistoryRef.value?.loadMore();
+      break;
+    }
+    case '会员信息': {
+      break;
+    }
+    case '最近浏览': {
+      await productBrowsingHistoryRef.value?.loadMore();
+      break;
+    }
+    default: {
+      break;
+    }
+  }
+}
+
+/** 浏览历史初始化 */
+const conversation = ref<MallKefuConversationApi.Conversation>(
+  {} as MallKefuConversationApi.Conversation,
+); // 用户会话
+async function initHistory(val: MallKefuConversationApi.Conversation) {
+  activeTab.value = '会员信息';
+  conversation.value = val;
+  await nextTick();
+  await getHistoryList();
+}
+defineExpose({ initHistory });
+
+/** 处理消息列表滚动事件(debounce 限流) */
+const scrollbarRef = ref<InstanceType<any>>();
+const { arrivedState } = useScroll(scrollbarRef);
+const { bottom } = toRefs(arrivedState);
+watch(
+  () => bottom.value,
+  async (newVal) => {
+    if (newVal) {
+      await loadMore();
+    }
+  },
+);
+
+/** 查询用户钱包信息 */
+const WALLET_INIT_DATA = {
+  balance: 0,
+  totalExpense: 0,
+  totalRecharge: 0,
+} as PayWalletApi.Wallet; // 钱包初始化数据
+const wallet = ref<PayWalletApi.Wallet>(WALLET_INIT_DATA); // 钱包信息
+
+async function getUserWallet() {
+  if (!conversation.value.userId) {
+    wallet.value = WALLET_INIT_DATA;
+    return;
+  }
+  wallet.value =
+    (await getWallet({ userId: conversation.value.userId })) ||
+    WALLET_INIT_DATA;
+}
+
+/** 获得用户 */
+const loading = ref(true); // 加载中
+const user = ref<MemberUserApi.User>({} as MemberUserApi.User);
+async function getUserData() {
+  loading.value = true;
+  try {
+    const res = await getUser(conversation.value.userId);
+    if (res) {
+      user.value = res;
+    } else {
+      user.value = {} as MemberUserApi.User;
+      message.error('会员不存在！');
+    }
+  } finally {
+    loading.value = false;
+  }
+}
+</script>
+
+<template>
+  <div class="bg-background flex h-full flex-auto flex-col">
+    <div
+      class="mt-4 flex h-12 items-center justify-around before:absolute before:bottom-0 before:left-0 before:h-1 before:w-full before:scale-y-[0.3] before:bg-gray-200 before:content-['']"
+    >
+      <div
+        :class="{
+          'before:border-primary before:border-b-2': tabActivation('会员信息'),
+        }"
+        class="relative flex w-full cursor-pointer items-center justify-center before:pointer-events-none before:absolute before:inset-0 before:content-[''] hover:before:border-b-2 hover:before:border-gray-500/50"
+        @click="handleClick('会员信息')"
+      >
+        会员信息
+      </div>
+      <div
+        :class="{
+          'before:border-primary before:border-b-2': tabActivation('最近浏览'),
+        }"
+        class="relative flex w-full cursor-pointer items-center justify-center before:pointer-events-none before:absolute before:inset-0 before:content-[''] hover:before:border-b-2 hover:before:border-gray-500/50"
+        @click="handleClick('最近浏览')"
+      >
+        最近浏览
+      </div>
+      <div
+        :class="{
+          'before:border-primary before:border-b-2': tabActivation('交易订单'),
+        }"
+        class="relative flex w-full cursor-pointer items-center justify-center before:pointer-events-none before:absolute before:inset-0 before:content-[''] hover:before:border-b-2 hover:before:border-gray-500/50"
+        @click="handleClick('交易订单')"
+      >
+        交易订单
+      </div>
+    </div>
+    <div class="relative m-0 h-full w-full overflow-x-auto p-2">
+      <template v-if="!isEmpty(conversation)">
+        <div
+          v-loading="loading"
+          v-if="activeTab === '会员信息'"
+          class="relative overflow-y-auto overflow-x-hidden"
+        >
+          <!-- 基本信息 -->
+          <BasicInfo :user="user" mode="kefu">
+            <template #title>
+              <span class="text-sm font-bold">基本信息</span>
+            </template>
+          </BasicInfo>
+          <!-- 账户信息 -->
+          <AccountInfo
+            :column="1"
+            :user="user"
+            :wallet="wallet"
+            mode="kefu"
+            class="mt-2"
+          >
+            <template #title>
+              <span class="text-sm font-bold">账户信息</span>
+            </template>
+          </AccountInfo>
+        </div>
+        <div
+          v-show="activeTab !== '会员信息'"
+          ref="scrollbarRef"
+          class="relative h-full overflow-y-auto overflow-x-hidden"
+        >
+          <!-- 最近浏览 -->
+          <ProductBrowsingHistory
+            v-if="activeTab === '最近浏览'"
+            ref="productBrowsingHistoryRef"
+          />
+          <!-- 交易订单 -->
+          <OrderBrowsingHistory
+            v-if="activeTab === '交易订单'"
+            ref="orderBrowsingHistoryRef"
+          />
+        </div>
+      </template>
+      <Empty v-else description="请选择左侧的一个会话后开始" class="mt-[20%]" />
+    </div>
+  </div>
+</template>
diff --git a/apps/web-antd/src/views/mall/promotion/kefu/modules/member/order-browsing-history.vue b/apps/web-antd/src/views/mall/promotion/kefu/modules/member/order-browsing-history.vue
new file mode 100644
index 000000000..a7a5fa65c
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/kefu/modules/member/order-browsing-history.vue
@@ -0,0 +1,47 @@
+<script lang="ts" setup>
+import type { MallKefuConversationApi } from '#/api/mall/promotion/kefu/conversation';
+
+import { computed, reactive, ref } from 'vue';
+
+import { getOrderPage } from '#/api/mall/trade/order';
+import OrderItem from '#/views/mall/promotion/kefu/modules/message/order-item.vue';
+
+const list = ref<any>([]); // 列表
+const total = ref(0); // 总数
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  userId: 0,
+});
+const skipGetMessageList = computed(() => {
+  // 已加载到最后一页的话则不触发新的消息获取
+  return (
+    total.value > 0 &&
+    Math.ceil(total.value / queryParams.pageSize) === queryParams.pageNo
+  );
+}); // 跳过消息获取
+
+/** 获得浏览记录 */
+async function getHistoryList(val: MallKefuConversationApi.Conversation) {
+  queryParams.userId = val.userId;
+  const res = await getOrderPage(queryParams);
+  total.value = res.total;
+  list.value = res.list;
+}
+
+/** 加载下一页数据 */
+async function loadMore() {
+  if (skipGetMessageList.value) {
+    return;
+  }
+  queryParams.pageNo += 1;
+  const res = await getOrderPage(queryParams);
+  total.value = res.total;
+  list.value = [...list.value, ...res.list];
+}
+defineExpose({ getHistoryList, loadMore });
+</script>
+
+<template>
+  <OrderItem v-for="item in list" :key="item.id" :order="item" />
+</template>
diff --git a/apps/web-antd/src/views/mall/promotion/kefu/modules/member/product-browsing-history.vue b/apps/web-antd/src/views/mall/promotion/kefu/modules/member/product-browsing-history.vue
new file mode 100644
index 000000000..c35d87bd9
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/kefu/modules/member/product-browsing-history.vue
@@ -0,0 +1,58 @@
+<script lang="ts" setup>
+import type { MallKefuConversationApi } from '#/api/mall/promotion/kefu/conversation';
+
+import { computed, reactive, ref } from 'vue';
+
+import { getBrowseHistoryPage } from '#/api/mall/product/history';
+import ProductItem from '#/views/mall/promotion/kefu/modules/message/product-item.vue';
+
+const list = ref<any>([]); // 列表
+const total = ref(0); // 总数
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  userId: 0,
+  userDeleted: false,
+});
+const skipGetMessageList = computed(() => {
+  // 已加载到最后一页的话则不触发新的消息获取
+  return (
+    total.value > 0 &&
+    Math.ceil(total.value / queryParams.pageSize) === queryParams.pageNo
+  );
+}); // 跳过消息获取
+
+/** 获得浏览记录 */
+async function getHistoryList(val: MallKefuConversationApi.Conversation) {
+  queryParams.userId = val.userId;
+  const res = await getBrowseHistoryPage(queryParams);
+  total.value = res.total;
+  list.value = res.list;
+}
+
+/** 加载下一页数据 */
+async function loadMore() {
+  if (skipGetMessageList.value) {
+    return;
+  }
+  queryParams.pageNo += 1;
+  const res = await getBrowseHistoryPage(queryParams);
+  total.value = res.total;
+  list.value = [...list.value, ...res.list];
+}
+defineExpose({ getHistoryList, loadMore });
+</script>
+
+<template>
+  <ProductItem
+    v-for="item in list"
+    :key="item.id"
+    :pic-url="item.picUrl"
+    :price="item.price"
+    :sales-count="item.salesCount"
+    :spu-id="item.spuId"
+    :stock="item.stock"
+    :title="item.spuName"
+    class="mb-2.5"
+  />
+</template>
diff --git a/apps/web-antd/src/views/mall/promotion/kefu/modules/message-list.vue b/apps/web-antd/src/views/mall/promotion/kefu/modules/message-list.vue
new file mode 100644
index 000000000..f71147bd6
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/kefu/modules/message-list.vue
@@ -0,0 +1,421 @@
+<script lang="ts" setup>
+import type { Emoji } from './tools/emoji';
+
+import type { MallKefuConversationApi } from '#/api/mall/promotion/kefu/conversation';
+import type { MallKefuMessageApi } from '#/api/mall/promotion/kefu/message';
+
+import { computed, reactive, ref, toRefs, unref, watch } from 'vue';
+
+import { UserTypeEnum } from '@vben/constants';
+import { IconifyIcon } from '@vben/icons';
+import { formatDate, isEmpty, jsonParse } from '@vben/utils';
+
+import { useScroll } from '@vueuse/core';
+import { Avatar, Empty, Image, notification, Textarea } from 'ant-design-vue';
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
+
+import {
+  getKeFuMessageList,
+  sendKeFuMessage,
+  updateKeFuMessageReadStatus,
+} from '#/api/mall/promotion/kefu/message';
+import { useMallKefuStore } from '#/store/mall/kefu';
+
+import MessageItem from './message/message-item.vue';
+import OrderItem from './message/order-item.vue';
+import ProductItem from './message/product-item.vue';
+import { KeFuMessageContentTypeEnum } from './tools/constants';
+import { useEmoji } from './tools/emoji';
+import EmojiSelectPopover from './tools/emoji-select-popover.vue';
+import PictureSelectUpload from './tools/picture-select-upload.vue';
+
+dayjs.extend(relativeTime);
+
+const message = ref(''); // 消息弹窗
+const { replaceEmoji } = useEmoji();
+const messageList = ref<MallKefuMessageApi.Message[]>([]); // 消息列表
+const conversation = ref<MallKefuConversationApi.Conversation>(
+  {} as MallKefuConversationApi.Conversation,
+); // 用户会话
+const showNewMessageTip = ref(false); // 显示有新消息提示
+const queryParams = reactive({
+  conversationId: 0,
+  createTime: undefined,
+});
+const total = ref(0); // 消息总条数
+const refreshContent = ref(false); // 内容刷新,主要解决会话消息页面高度不一致导致的滚动功能精度失效
+const kefuStore = useMallKefuStore(); // 客服缓存
+const skipGetMessageList = ref(false); // 跳过消息获取
+const loadHistory = ref(false); // 加载历史消息
+
+/** 获悉消息内容 */
+const getMessageContent = computed(
+  () => (item: any) => jsonParse(item.content),
+);
+
+/** 获得消息列表 */
+async function getMessageList() {
+  const res: any = await getKeFuMessageList(queryParams as any);
+  if (isEmpty(res)) {
+    // 当返回的是空列表说明没有消息或者已经查询完了历史消息
+    skipGetMessageList.value = true;
+    return;
+  }
+  queryParams.createTime = formatDate(
+    (res as any).at(-1).createTime,
+    'YYYY-MM-DD HH:mm:ss',
+  ) as any;
+
+  // 如果 createTime 存在，说明是加载历史消息，需要追加到列表
+  if (queryParams.createTime) {
+    // 情况一：加载历史消息，追加到列表
+    for (const item of res as any) {
+      pushMessage(item);
+    }
+  } else {
+    // 情况二：加载最新消息，直接替换列表
+    messageList.value = res;
+  }
+  refreshContent.value = true;
+}
+
+/** 添加消息 */
+function pushMessage(message: any) {
+  if (messageList.value.some((val) => val.id === message.id)) {
+    return;
+  }
+  messageList.value.push(message);
+}
+
+/** 按照时间倒序，获取消息列表 */
+const getMessageList0 = computed(() => {
+  // 使用展开运算符创建新数组，避免直接修改原数组
+  return [...messageList.value].sort(
+    (a: any, b: any) => a.createTime - b.createTime,
+  );
+});
+
+/** 刷新消息列表 */
+async function refreshMessageList(message?: any) {
+  if (!conversation.value) {
+    return;
+  }
+
+  if (message === undefined) {
+    queryParams.createTime = undefined;
+    await getMessageList();
+  } else {
+    // 当前查询会话与消息所属会话不一致则不做处理
+    if (message.conversationId !== conversation.value.id) {
+      return;
+    }
+    pushMessage(message);
+  }
+
+  if (loadHistory.value) {
+    // 右下角显示有新消息提示
+    showNewMessageTip.value = true;
+  } else {
+    // 滚动到最新消息处
+    await handleToNewMessage();
+  }
+}
+
+/** 获得新会话的消息列表, 点击切换时，读取缓存；然后异步获取新消息，merge 下； */
+async function getNewMessageList(val: MallKefuConversationApi.Conversation) {
+  // 1. 缓存当前会话消息列表
+  kefuStore.saveMessageList(conversation.value.id, messageList.value);
+  // 2.1 会话切换,重置相关参数
+  messageList.value = kefuStore.getConversationMessageList(val.id) || [];
+  total.value = messageList.value.length || 0;
+  loadHistory.value = false;
+  refreshContent.value = false;
+  skipGetMessageList.value = false;
+  // 2.2 设置会话相关属性
+  conversation.value = val;
+  queryParams.conversationId = val.id;
+  queryParams.createTime = undefined;
+  // 3. 获取消息
+  await refreshMessageList();
+}
+defineExpose({ getNewMessageList, refreshMessageList });
+
+/** 是否显示聊天区域 */
+function showMessageList() {
+  return !isEmpty(conversation.value);
+}
+
+/** 处理表情选择 */
+function handleEmojiSelect(item: Emoji) {
+  message.value += item.name;
+}
+
+/** 处理图片发送 */
+async function handleSendPicture(picUrl: string) {
+  // 组织发送消息
+  const msg = {
+    conversationId: conversation.value.id,
+    contentType: KeFuMessageContentTypeEnum.IMAGE,
+    content: JSON.stringify({ picUrl }),
+  };
+  await sendMessage(msg);
+}
+
+/** 发送文本消息 */
+async function handleSendMessage(event: any) {
+  // shift 不发送
+  if (event.shiftKey) {
+    return;
+  }
+  // 1. 校验消息是否为空
+  if (isEmpty(unref(message.value)?.trim())) {
+    notification.warning({ message: '请输入消息后再发送哦！' });
+    message.value = '';
+    return;
+  }
+  // 2. 组织发送消息
+  const msg = {
+    conversationId: conversation.value.id,
+    contentType: KeFuMessageContentTypeEnum.TEXT,
+    content: JSON.stringify({ text: message.value }),
+  };
+  await sendMessage(msg);
+}
+
+/** 真正发送消息 【共用】*/
+async function sendMessage(msg: MallKefuMessageApi.MessageSend) {
+  // 发送消息
+  await sendKeFuMessage(msg);
+  message.value = '';
+  // 加载消息列表
+  await refreshMessageList();
+  // 更新会话缓存
+  await kefuStore.updateConversation(conversation.value.id);
+}
+
+/** 滚动到底部 */
+const scrollbarRef = ref<HTMLElement | null>(null);
+const { y, arrivedState } = useScroll(scrollbarRef);
+
+const { bottom } = toRefs(arrivedState);
+
+async function scrollToBottom() {
+  if (!scrollbarRef.value) return;
+  // 1. 首次加载时滚动到最新消息，如果加载的是历史消息则不滚动
+  if (loadHistory.value) {
+    return;
+  }
+  // 2.1 滚动到最新消息，关闭新消息提示
+  // 使用 useScroll 监听滚动容器
+  y.value = scrollbarRef.value.scrollHeight - scrollbarRef.value!.clientHeight;
+  showNewMessageTip.value = false;
+  // 2.2 消息已读
+  await updateKeFuMessageReadStatus(conversation.value.id);
+}
+
+/** 查看新消息 */
+async function handleToNewMessage() {
+  loadHistory.value = false;
+  await scrollToBottom();
+}
+
+watch(
+  () => bottom.value,
+  (newVal) => {
+    if (newVal) {
+      if (skipGetMessageList.value) {
+        return;
+      }
+      // 滚动到底部了
+      if (newVal) {
+        loadHistory.value = false;
+        refreshMessageList();
+      }
+
+      // 触顶自动加载下一页数据
+      if (arrivedState.top) {
+        handleOldMessage();
+      }
+    }
+  },
+);
+/** 加载历史消息 */
+async function handleOldMessage() {
+  loadHistory.value = true;
+  await getMessageList();
+}
+
+/** 是否显示时间 */
+function showTime(item: MallKefuMessageApi.Message, index: number) {
+  if (unref(messageList.value)[index + 1]) {
+    const dateString = dayjs(
+      unref(messageList.value)[index + 1]!.createTime,
+    ).fromNow();
+    return dateString !== dayjs(unref(item).createTime).fromNow();
+  }
+  return false;
+}
+</script>
+
+<template>
+  <div
+    v-if="showMessageList()"
+    class="bg-background flex h-full flex-auto flex-col p-4"
+  >
+    <div class="flex h-full flex-auto flex-shrink-0 flex-col">
+      <div class="flex h-12 w-full flex-row items-center justify-between">
+        <span class="text-lg font-bold">{{ conversation.userNickname }}</span>
+      </div>
+      <div
+        ref="scrollbarRef"
+        class="mb-4 flex h-full flex-col overflow-x-auto rounded-lg bg-gray-100 p-2"
+      >
+        <div class="flex flex-col">
+          <!-- 消息列表 -->
+          <div
+            v-for="(item, index) in getMessageList0"
+            :key="item.id"
+            class="w-full"
+          >
+            <div class="mb-5 flex items-center justify-center">
+              <!-- 日期 -->
+              <div
+                v-if="
+                  item.contentType !== KeFuMessageContentTypeEnum.SYSTEM &&
+                  showTime(item, index)
+                "
+                class="w-fit rounded-lg bg-black/10 px-2 text-xs"
+              >
+                {{ formatDate(item.createTime) }}
+              </div>
+              <!-- 系统消息 -->
+              <div
+                v-if="item.contentType === KeFuMessageContentTypeEnum.SYSTEM"
+                class="w-fit rounded-lg bg-black/10 px-2 text-xs"
+              >
+                {{ item.content }}
+              </div>
+            </div>
+            <div
+              :class="[
+                item.senderType === UserTypeEnum.MEMBER
+                  ? 'justify-start'
+                  : item.senderType === UserTypeEnum.ADMIN
+                    ? 'justify-end'
+                    : '',
+              ]"
+              class="mb-5 flex w-full"
+            >
+              <Avatar
+                v-if="item.senderType === UserTypeEnum.MEMBER"
+                :src="conversation.userAvatar"
+                alt="avatar"
+                class="size-8"
+              />
+              <div
+                :class="{
+                  'w-auto max-w-[50%] p-1 font-medium text-gray-500 transition-all duration-200 hover:scale-105':
+                    KeFuMessageContentTypeEnum.TEXT === item.contentType,
+                  'm-1 break-words rounded-lg bg-gray-100':
+                    KeFuMessageContentTypeEnum.TEXT === item.contentType &&
+                    item.senderType === UserTypeEnum.MEMBER,
+                  'm-1 break-words rounded-lg bg-blue-50':
+                    KeFuMessageContentTypeEnum.TEXT === item.contentType &&
+                    item.senderType === UserTypeEnum.ADMIN,
+                }"
+              >
+                <!-- 文本消息 -->
+                <MessageItem :message="item">
+                  <template
+                    v-if="KeFuMessageContentTypeEnum.TEXT === item.contentType"
+                  >
+                    <div
+                      v-dompurify-html="
+                        replaceEmoji(
+                          getMessageContent(item).text || item.content,
+                        )
+                      "
+                      class="h-full w-full text-justify"
+                    ></div>
+                  </template>
+                </MessageItem>
+                <!-- 图片消息 -->
+                <MessageItem :message="item">
+                  <Image
+                    v-if="KeFuMessageContentTypeEnum.IMAGE === item.contentType"
+                    :initial-index="0"
+                    :preview-src-list="[
+                      getMessageContent(item).picUrl || item.content,
+                    ]"
+                    :src="getMessageContent(item).picUrl || item.content"
+                    class="mx-2 !w-52"
+                    fit="contain"
+                    preview-teleported
+                  />
+                </MessageItem>
+                <!-- 商品消息 -->
+                <MessageItem :message="item">
+                  <ProductItem
+                    v-if="
+                      KeFuMessageContentTypeEnum.PRODUCT === item.contentType
+                    "
+                    :pic-url="getMessageContent(item).picUrl"
+                    :price="getMessageContent(item).price"
+                    :sales-count="getMessageContent(item).salesCount"
+                    :spu-id="getMessageContent(item).spuId"
+                    :stock="getMessageContent(item).stock"
+                    :title="getMessageContent(item).spuName"
+                    class="mx-2 max-w-80"
+                  />
+                </MessageItem>
+                <!-- 订单消息 -->
+                <MessageItem :message="item">
+                  <OrderItem
+                    v-if="KeFuMessageContentTypeEnum.ORDER === item.contentType"
+                    :message="item"
+                    class="mx-2 max-w-full"
+                  />
+                </MessageItem>
+              </div>
+              <Avatar
+                v-if="item.senderType === UserTypeEnum.ADMIN"
+                :src="item.senderAvatar"
+                alt="avatar"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        v-show="showNewMessageTip"
+        class="absolute bottom-9 right-9 z-10 flex cursor-pointer items-center rounded-lg p-2 text-xs shadow-md"
+        @click="handleToNewMessage"
+      >
+        <span>有新消息</span>
+        <IconifyIcon class="ml-1" icon="lucide:arrow-down-from-line" />
+      </div>
+      <div class="flex flex-col">
+        <div class="-mt-2 flex flex-col rounded-xl border">
+          <div class="flex h-10 w-full items-center">
+            <EmojiSelectPopover @select-emoji="handleEmojiSelect" />
+            <PictureSelectUpload
+              class="ml-4 mt-1 cursor-pointer"
+              @send-picture="handleSendPicture"
+            />
+          </div>
+          <Textarea
+            v-model:value="message"
+            :rows="4"
+            class="border-none p-2"
+            placeholder="输入消息，Enter发送，Shift+Enter换行"
+            @press-enter="handleSendMessage"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+  <div v-else class="bg-background relative">
+    <Empty description="请选择左侧的一个会话后开始" class="mt-[20%]" />
+  </div>
+</template>
diff --git a/apps/web-antd/src/views/mall/promotion/kefu/modules/message/message-item.vue b/apps/web-antd/src/views/mall/promotion/kefu/modules/message/message-item.vue
new file mode 100644
index 000000000..7c8e3153b
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/kefu/modules/message/message-item.vue
@@ -0,0 +1,25 @@
+<script lang="ts" setup>
+import type { MallKefuMessageApi } from '#/api/mall/promotion/kefu/message';
+
+import { UserTypeEnum } from '@vben/constants';
+
+/** 消息组件 */
+
+defineProps<{
+  message: MallKefuMessageApi.Message;
+}>();
+</script>
+
+<template>
+  <div
+    :class="[
+      message.senderType === UserTypeEnum.MEMBER
+        ? `ml-2`
+        : message.senderType === UserTypeEnum.ADMIN
+          ? `mr-2`
+          : '',
+    ]"
+  >
+    <slot></slot>
+  </div>
+</template>
diff --git a/apps/web-antd/src/views/mall/promotion/kefu/modules/message/order-item.vue b/apps/web-antd/src/views/mall/promotion/kefu/modules/message/order-item.vue
new file mode 100644
index 000000000..8e73ac8ae
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/kefu/modules/message/order-item.vue
@@ -0,0 +1,121 @@
+<script lang="ts" setup>
+import type { MallKefuMessageApi } from '#/api/mall/promotion/kefu/message';
+
+import { computed } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { fenToYuan, isObject, jsonParse } from '@vben/utils';
+
+import ProductItem from './product-item.vue';
+
+const props = defineProps<{
+  message?: MallKefuMessageApi.Message;
+  order?: any;
+}>();
+
+const { push } = useRouter();
+
+const getMessageContent = computed(() =>
+  props.message === undefined
+    ? props.order
+    : jsonParse(props!.message!.content),
+);
+
+/** 查看订单详情 */
+function openDetail(id: number) {
+  push({ name: 'TradeOrderDetail', params: { id } });
+}
+
+/** 格式化订单状态的颜色 */
+function formatOrderColor(order: any) {
+  if (order.status === 0) {
+    return 'text-gray-500';
+  }
+  if (
+    order.status === 10 ||
+    order.status === 20 ||
+    (order.status === 30 && !order.commentStatus)
+  ) {
+    return 'text-orange-500';
+  }
+  if (order.status === 30 && order.commentStatus) {
+    return 'text-green-500';
+  }
+  return 'text-red-500';
+}
+
+/** 格式化订单状态 */
+function formatOrderStatus(order: any) {
+  if (order.status === 0) {
+    return '待付款';
+  }
+  if (order.status === 10 && order.deliveryType === 1) {
+    return '待发货';
+  }
+  if (order.status === 10 && order.deliveryType === 2) {
+    return '待核销';
+  }
+  if (order.status === 20) {
+    return '待收货';
+  }
+  if (order.status === 30 && !order.commentStatus) {
+    return '待评价';
+  }
+  if (order.status === 30 && order.commentStatus) {
+    return '已完成';
+  }
+  return '已关闭';
+}
+</script>
+
+<template>
+  <div
+    v-if="isObject(getMessageContent)"
+    :key="getMessageContent.id"
+    class="mb-2 rounded-md bg-gray-500/30 p-2"
+  >
+    <div class="flex h-6 items-center justify-between px-1 font-bold">
+      <div class="flex flex-row text-sm">
+        <div>订单号：</div>
+        <span
+          class="text-primary cursor-pointer hover:underline"
+          @click="openDetail(getMessageContent.id)"
+        >
+          {{ getMessageContent.no }}
+        </span>
+      </div>
+      <div
+        :class="formatOrderColor(getMessageContent)"
+        class="text-sm font-bold"
+      >
+        {{ formatOrderStatus(getMessageContent) }}
+      </div>
+    </div>
+    <div
+      v-for="item in getMessageContent.items"
+      :key="item.id"
+      class="border-b border-gray-200"
+    >
+      <ProductItem
+        :num="item.count"
+        :pic-url="item.picUrl"
+        :price="item.price"
+        :sku-text="
+          item.properties.map((property: any) => property.valueName).join(' ')
+        "
+        :spu-id="item.spuId"
+        :title="item.spuName"
+      />
+    </div>
+    <div class="flex justify-end pr-1.5 pt-2.5 font-bold">
+      <div class="flex items-center">
+        <div class="text-sm leading-normal">
+          共 {{ getMessageContent?.productCount }} 件商品,总金额:
+        </div>
+        <div class="text-sm font-medium leading-normal">
+          ￥{{ fenToYuan(getMessageContent?.payPrice) }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/apps/web-antd/src/views/mall/promotion/kefu/modules/message/product-item.vue b/apps/web-antd/src/views/mall/promotion/kefu/modules/message/product-item.vue
new file mode 100644
index 000000000..e16df5fb8
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/kefu/modules/message/product-item.vue
@@ -0,0 +1,73 @@
+<script lang="ts" setup>
+import { useRouter } from 'vue-router';
+
+import { fenToYuan } from '@vben/utils';
+
+import { Button, Image } from 'ant-design-vue';
+
+defineProps({
+  spuId: {
+    type: Number,
+    default: 0,
+  },
+  picUrl: {
+    type: String,
+    default: 'https://img1.baidu.com/it/u=1601695551,235775011&fm=26&fmt=auto',
+  },
+  title: {
+    type: String,
+    default: '',
+  },
+  price: {
+    type: [String, Number],
+    default: '',
+  },
+  salesCount: {
+    type: [String, Number],
+    default: '',
+  },
+  stock: {
+    type: [String, Number],
+    default: '',
+  },
+});
+
+const { push } = useRouter();
+
+/** 查看商品详情 */
+function openDetail(spuId: number) {
+  push({ name: 'ProductSpuDetail', params: { id: spuId } });
+}
+</script>
+
+<template>
+  <div
+    class="mb-2.5 flex w-full cursor-pointer items-center rounded-lg bg-gray-500/30 p-2.5"
+    @click.stop="openDetail(spuId)"
+  >
+    <!-- 左侧商品图片-->
+    <div class="mr-2 w-16">
+      <Image
+        :initial-index="0"
+        :preview-src-list="[picUrl]"
+        :src="picUrl"
+        class="h-full w-full rounded-lg"
+        fit="contain"
+        preview-teleported
+        @click.stop
+      />
+    </div>
+    <!-- 右侧商品信息 -->
+    <div class="flex-1">
+      <div class="line-clamp-1 w-full text-base font-bold">{{ title }}</div>
+      <div class="my-1">
+        <span class="mr-5">库存: {{ stock || 0 }}</span>
+        <span>销量: {{ salesCount || 0 }}</span>
+      </div>
+      <div class="flex items-center justify-between">
+        <span class="text-red-500">￥{{ fenToYuan(price) }}</span>
+        <Button size="small" text type="primary">详情</Button>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/apps/web-antd/src/views/mall/promotion/kefu/modules/tools/constants.ts b/apps/web-antd/src/views/mall/promotion/kefu/modules/tools/constants.ts
new file mode 100644
index 000000000..266a6cf02
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/kefu/modules/tools/constants.ts
@@ -0,0 +1,17 @@
+/** 客服消息类型枚举类 */
+export const KeFuMessageContentTypeEnum = {
+  TEXT: 1, // 文本消息
+  IMAGE: 2, // 图片消息
+  VOICE: 3, // 语音消息
+  VIDEO: 4, // 视频消息
+  SYSTEM: 5, // 系统消息
+  // ========== 商城特殊消息 ==========
+  PRODUCT: 10, //  商品消息
+  ORDER: 11, //  订单消息"
+};
+
+/** Promotion 的 WebSocket 消息类型枚举类 */
+export const WebSocketMessageTypeConstants = {
+  KEFU_MESSAGE_TYPE: 'kefu_message_type', // 客服消息类型
+  KEFU_MESSAGE_ADMIN_READ: 'kefu_message_read_status_change', // 客服消息管理员已读
+};
diff --git a/apps/web-antd/src/views/mall/promotion/kefu/modules/tools/emoji-select-popover.vue b/apps/web-antd/src/views/mall/promotion/kefu/modules/tools/emoji-select-popover.vue
new file mode 100644
index 000000000..a7a1027de
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/kefu/modules/tools/emoji-select-popover.vue
@@ -0,0 +1,48 @@
+<!-- emoji 表情选择组件 -->
+<script lang="ts" setup>
+import type { Emoji } from './emoji';
+
+import { computed } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { List, Popover } from 'ant-design-vue';
+
+import { useEmoji } from './emoji';
+
+/** 选择 emoji 表情 */
+const emits = defineEmits<{
+  (e: 'selectEmoji', v: Emoji): void;
+}>();
+const { getEmojiList } = useEmoji();
+const emojiList = computed(() => getEmojiList());
+
+function handleSelect(item: Emoji) {
+  // 整个 emoji 数据传递出去，方便以后输入框直接显示表情
+  emits('selectEmoji', item);
+}
+</script>
+
+<template>
+  <Popover placement="top" trigger="click">
+    <template #content>
+      <List height="300px" class="w-[500px]">
+        <ul class="ml-2 flex flex-wrap px-2">
+          <li
+            v-for="(item, index) in emojiList"
+            :key="index"
+            :title="item.name"
+            class="w-1/10 border-primary m-2 flex cursor-pointer items-center justify-center border border-solid p-2"
+            @click="handleSelect(item)"
+          >
+            <img :src="item.url" class="size-4" />
+          </li>
+        </ul>
+      </List>
+    </template>
+    <IconifyIcon
+      class="ml-2.5 size-6 cursor-pointer"
+      icon="twemoji:grinning-face"
+    />
+  </Popover>
+</template>
diff --git a/apps/web-antd/src/views/mall/promotion/kefu/modules/tools/emoji.ts b/apps/web-antd/src/views/mall/promotion/kefu/modules/tools/emoji.ts
new file mode 100644
index 000000000..f1bd19319
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/kefu/modules/tools/emoji.ts
@@ -0,0 +1,126 @@
+import { onMounted, ref } from 'vue';
+
+import { isEmpty } from '@vben/utils';
+
+const emojiList = [
+  { name: '[笑掉牙]', file: 'xiaodiaoya.png' },
+  { name: '[可爱]', file: 'keai.png' },
+  { name: '[冷酷]', file: 'lengku.png' },
+  { name: '[闭嘴]', file: 'bizui.png' },
+  { name: '[生气]', file: 'shengqi.png' },
+  { name: '[惊恐]', file: 'jingkong.png' },
+  { name: '[瞌睡]', file: 'keshui.png' },
+  { name: '[大笑]', file: 'daxiao.png' },
+  { name: '[爱心]', file: 'aixin.png' },
+  { name: '[坏笑]', file: 'huaixiao.png' },
+  { name: '[飞吻]', file: 'feiwen.png' },
+  { name: '[疑问]', file: 'yiwen.png' },
+  { name: '[开心]', file: 'kaixin.png' },
+  { name: '[发呆]', file: 'fadai.png' },
+  { name: '[流泪]', file: 'liulei.png' },
+  { name: '[汗颜]', file: 'hanyan.png' },
+  { name: '[惊悚]', file: 'jingshu.png' },
+  { name: '[困~]', file: 'kun.png' },
+  { name: '[心碎]', file: 'xinsui.png' },
+  { name: '[天使]', file: 'tianshi.png' },
+  { name: '[晕]', file: 'yun.png' },
+  { name: '[啊]', file: 'a.png' },
+  { name: '[愤怒]', file: 'fennu.png' },
+  { name: '[睡着]', file: 'shuizhuo.png' },
+  { name: '[面无表情]', file: 'mianwubiaoqing.png' },
+  { name: '[难过]', file: 'nanguo.png' },
+  { name: '[犯困]', file: 'fankun.png' },
+  { name: '[好吃]', file: 'haochi.png' },
+  { name: '[呕吐]', file: 'outu.png' },
+  { name: '[龇牙]', file: 'ziya.png' },
+  { name: '[懵比]', file: 'mengbi.png' },
+  { name: '[白眼]', file: 'baiyan.png' },
+  { name: '[饿死]', file: 'esi.png' },
+  { name: '[凶]', file: 'xiong.png' },
+  { name: '[感冒]', file: 'ganmao.png' },
+  { name: '[流汗]', file: 'liuhan.png' },
+  { name: '[笑哭]', file: 'xiaoku.png' },
+  { name: '[流口水]', file: 'liukoushui.png' },
+  { name: '[尴尬]', file: 'ganga.png' },
+  { name: '[惊讶]', file: 'jingya.png' },
+  { name: '[大惊]', file: 'dajing.png' },
+  { name: '[不好意思]', file: 'buhaoyisi.png' },
+  { name: '[大闹]', file: 'danao.png' },
+  { name: '[不可思议]', file: 'bukesiyi.png' },
+  { name: '[爱你]', file: 'aini.png' },
+  { name: '[红心]', file: 'hongxin.png' },
+  { name: '[点赞]', file: 'dianzan.png' },
+  { name: '[恶魔]', file: 'emo.png' },
+];
+
+export interface Emoji {
+  name: string;
+  url: string;
+}
+
+export function useEmoji() {
+  const emojiPathList = ref<any[]>([]);
+
+  /** 加载本地图片 */
+  async function initStaticEmoji() {
+    const pathList = import.meta.glob('../../asserts/*.{png,jpg,jpeg,svg}');
+    for (const path in pathList) {
+      const imageModule: any = await pathList[path]?.();
+      emojiPathList.value.push({ path, src: imageModule.default });
+    }
+  }
+
+  /** 初始化 */
+  onMounted(async () => {
+    if (isEmpty(emojiPathList.value)) {
+      await initStaticEmoji();
+    }
+  });
+
+  /**
+   * 将文本中的表情替换成图片
+   *
+   * @return 替换后的文本
+   * @param content 消息内容
+   */
+  function replaceEmoji(content: string) {
+    let newData = content;
+    if (typeof newData !== 'object') {
+      const reg = /\[(.+?)\]/g; // [] 中括号
+      const zhEmojiName = newData.match(reg);
+      if (zhEmojiName) {
+        zhEmojiName.forEach((item) => {
+          const emojiFile = getEmojiFileByName(item);
+          newData = newData.replace(
+            item,
+            `<img style="width: 20px;height: 20px;margin:0 1px 3px 1px;vertical-align: middle;" src="${emojiFile}" alt=""/>`,
+          );
+        });
+      }
+    }
+    return newData;
+  }
+
+  /** 获得所有表情 */
+  function getEmojiList(): Emoji[] {
+    return emojiList.map((item) => ({
+      url: getEmojiFileByName(item.name),
+      name: item.name,
+    })) as Emoji[];
+  }
+
+  function getEmojiFileByName(name: string) {
+    for (const emoji of emojiList) {
+      if (emoji.name === name) {
+        const emojiPath = emojiPathList.value.find(
+          (item: { path: string; src: string }) =>
+            item.path.includes(emoji.file),
+        );
+        return emojiPath ? emojiPath.src : undefined;
+      }
+    }
+    return false;
+  }
+
+  return { replaceEmoji, getEmojiList };
+}
diff --git a/apps/web-antd/src/views/mall/promotion/kefu/modules/tools/picture-select-upload.vue b/apps/web-antd/src/views/mall/promotion/kefu/modules/tools/picture-select-upload.vue
new file mode 100644
index 000000000..65f5a7516
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/kefu/modules/tools/picture-select-upload.vue
@@ -0,0 +1,91 @@
+<!-- 图片选择 -->
+<script lang="ts" setup>
+import { Image, message } from 'ant-design-vue';
+
+import { useUpload } from '#/components/upload/use-upload';
+import { $t } from '#/locales';
+import Picture from '#/views/mall/promotion/kefu/asserts/picture.svg';
+
+/** 选择并上传文件 */
+const emits = defineEmits<{
+  (e: 'sendPicture', v: string): void;
+}>();
+
+async function selectAndUpload() {
+  const files: any = await getFiles();
+  message.success($t('ui.upload.imgUploading'));
+  const res = await useUpload().httpRequest(files[0].file);
+  message.success($t('ui.upload.uploadSuccess'));
+  emits('sendPicture', res);
+}
+
+/** 唤起文件选择窗口，并获取选择的文件 */
+async function getFiles(options = {}) {
+  const { multiple, accept, limit, fileSize } = {
+    multiple: true,
+    accept: 'image/jpeg, image/png, image/gif', // 默认选择图片
+    limit: 1,
+    fileSize: 500,
+    ...options,
+  };
+
+  // 创建文件选择元素
+  const input = document.createElement('input');
+  input.type = 'file';
+  input.style.display = 'none';
+  if (multiple) input.multiple = true;
+  if (accept) input.accept = accept;
+
+  // 将文件选择元素添加到文档中
+  document.body.append(input);
+
+  // 触发文件选择元素的点击事件
+  input.click();
+
+  // 等待文件选择元素的 change 事件
+  // 移除不必要的 try/catch 包装，直接返回 Promise
+  return await new Promise((resolve, reject) => {
+    input.addEventListener('change', (event: any) => {
+      const filesArray = [...(event?.target?.files || [])];
+
+      // 从文档中移除文件选择元素
+      input.remove();
+
+      // 判断是否超出上传数量限制
+      if (filesArray.length > limit) {
+        // 使用 Error 对象作为 reject 的原因
+        reject(new Error(`超出上传数量限制，最多允许 ${limit} 个文件`));
+        return;
+      }
+      // 判断是否超出上传文件大小限制
+      const overSizedFiles = filesArray.filter(
+        (file: File) => file.size / 1024 ** 2 > fileSize,
+      );
+      if (overSizedFiles.length > 0) {
+        // 使用 Error 对象作为 reject 的原因
+        reject(new Error(`文件大小超出限制，单个文件最大允许 ${fileSize}MB`));
+        return;
+      }
+
+      // 生成文件列表，并添加 uid
+      const fileList = filesArray.map((file, index) => ({
+        file,
+        uid: Date.now() + index,
+      }));
+      resolve(fileList);
+    });
+  });
+}
+</script>
+
+<template>
+  <div>
+    <Image
+      :preview="false"
+      :src="Picture"
+      width="35px"
+      height="35px"
+      @click="selectAndUpload"
+    />
+  </div>
+</template>
diff --git a/apps/web-antd/src/views/mall/promotion/point/activity/modules/form.vue b/apps/web-antd/src/views/mall/promotion/point/activity/modules/form.vue
index 94ab444c2..b5d5c66f5 100644
--- a/apps/web-antd/src/views/mall/promotion/point/activity/modules/form.vue
+++ b/apps/web-antd/src/views/mall/promotion/point/activity/modules/form.vue
@@ -1,7 +1,8 @@
 <script lang="ts" setup>
 import type { MallPointActivityApi } from '#/api/mall/promotion/point';
 import type { RuleConfig } from '#/views/mall/product/spu/form';
-import type { SpuProperty } from '#/views/mall/promotion/components/types';
+// TODO @puhui999：有问题
+// import type { SpuProperty } from '#/views/mall/promotion/components/types';
 
 import { computed, ref } from 'vue';
 
@@ -70,7 +71,9 @@ const ruleConfig: RuleConfig[] = [
 ]; // SKU 规则配置
 
 const spuList = ref<any[]>([]); // 选择的 SPU 列表
-const spuPropertyList = ref<SpuProperty<any>[]>([]); // SPU 属性列表
+// TODO @puhui999：有问题
+// const spuPropertyList = ref<SpuProperty<any>[]>([]); // SPU 属性列表
+const spuPropertyList = ref<any[]>([]); // SPU 属性列表
 
 /** 打开商品选择器 */
 // TODO @puhui999：spuSkuSelectRef.value.open is not a function
@@ -123,7 +126,9 @@ async function getSpuDetails(
   });
   res.skus = selectSkus;
 
-  const spuProperties: SpuProperty[] = [];
+  // TODO @puhui999：有问题
+  // const spuProperties: SpuProperty[] = [];
+  const spuProperties: any[] = [];
   spuProperties.push({
     spuId: res.id!,
     spuDetail: res,
diff --git a/apps/web-antd/src/views/mall/promotion/point/components/point-showcase.vue b/apps/web-antd/src/views/mall/promotion/point/components/point-showcase.vue
index 3d7d206bb..9531557c0 100644
--- a/apps/web-antd/src/views/mall/promotion/point/components/point-showcase.vue
+++ b/apps/web-antd/src/views/mall/promotion/point/components/point-showcase.vue
@@ -137,7 +137,7 @@ watch(
           />
           <IconifyIcon
             v-show="!disabled"
-            icon="ep:circle-close-filled"
+            icon="lucide:x"
             class="absolute -right-2 -top-2 z-10 h-5 w-5 cursor-pointer text-red-500 hover:text-red-600"
             @click="handleRemoveActivity(index)"
           />
@@ -148,10 +148,10 @@ watch(
     <!-- 添加按钮 -->
     <Tooltip v-if="canAdd" title="选择活动">
       <div
-        class="flex h-[60px] w-[60px] cursor-pointer items-center justify-center rounded-lg border border-dashed border-gray-300 hover:border-blue-400"
+        class="flex h-14 w-14 cursor-pointer items-center justify-center rounded-lg border border-dashed border-gray-300 hover:border-blue-400"
         @click="openPointActivityTableSelect"
       >
-        <IconifyIcon icon="ep:plus" class="text-lg text-gray-400" />
+        <IconifyIcon icon="lucide:plus" class="text-lg text-gray-400" />
       </div>
     </Tooltip>
   </div>
diff --git a/apps/web-antd/src/views/mall/promotion/rewardActivity/components/index.ts b/apps/web-antd/src/views/mall/promotion/rewardActivity/components/index.ts
deleted file mode 100644
index 93b72c326..000000000
--- a/apps/web-antd/src/views/mall/promotion/rewardActivity/components/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default as RewardRuleCouponSelect } from './reward-rule-coupon-select.vue';
-export { default as RewardRule } from './reward-rule.vue';
diff --git a/apps/web-antd/src/views/mall/promotion/rewardActivity/data.ts b/apps/web-antd/src/views/mall/promotion/rewardActivity/data.ts
index 238a23961..46e6e9cae 100644
--- a/apps/web-antd/src/views/mall/promotion/rewardActivity/data.ts
+++ b/apps/web-antd/src/views/mall/promotion/rewardActivity/data.ts
@@ -1,10 +1,15 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 
-import { DICT_TYPE } from '@vben/constants';
+import {
+  DICT_TYPE,
+  PromotionConditionTypeEnum,
+  PromotionProductScopeEnum,
+} from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
 import { $t } from '@vben/locales';
 
+import { z } from '#/adapter/form';
 import { getRangePickerDefaultProps } from '#/utils';
 
 /** 列表的搜索表单 */
@@ -98,8 +103,8 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
 export function useFormSchema(): VbenFormSchema[] {
   return [
     {
-      component: 'Input',
       fieldName: 'id',
+      component: 'Input',
       dependencies: {
         triggerFields: [''],
         show: () => false,
@@ -109,23 +114,36 @@ export function useFormSchema(): VbenFormSchema[] {
       fieldName: 'name',
       label: '活动名称',
       component: 'Input',
+      rules: 'required',
       componentProps: {
         placeholder: '请输入活动名称',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+        rows: 4,
+        allowClear: true,
       },
-      rules: 'required',
     },
     {
       fieldName: 'startAndEndTime',
       label: '活动时间',
       component: 'RangePicker',
+      rules: 'required',
       componentProps: {
         showTime: true,
         format: 'YYYY-MM-DD HH:mm:ss',
-        placeholder: [$t('common.startTimeText'), $t('common.endTimeText')],
+        placeholder: [
+          $t('utils.rangePicker.beginTime'),
+          $t('utils.rangePicker.endTime'),
+        ],
       },
-      rules: 'required',
     },
-    // TODO @puhui999：增加一个 defaultValue
     {
       fieldName: 'conditionType',
       label: '条件类型',
@@ -135,8 +153,7 @@ export function useFormSchema(): VbenFormSchema[] {
         buttonStyle: 'solid',
         optionType: 'button',
       },
-      defaultValue: PromotionConditionTypeEnum.PRICE.type,
-      rules: 'required',
+      rules: z.number().default(PromotionConditionTypeEnum.PRICE.type),
     },
     {
       fieldName: 'productScope',
@@ -147,16 +164,28 @@ export function useFormSchema(): VbenFormSchema[] {
         buttonStyle: 'solid',
         optionType: 'button',
       },
+      rules: z.number().default(PromotionProductScopeEnum.ALL.scope),
+    },
+    // TODO @puhui999：选择完删除后，自动就退出了 modal；
+    {
+      fieldName: 'productSpuIds',
+      label: '选择商品',
+      component: 'Input',
+      dependencies: {
+        triggerFields: ['productScope'],
+        show: (values) => {
+          return values.productScope === PromotionProductScopeEnum.SPU.scope;
+        },
+      },
       rules: 'required',
     },
+    // TODO @puhui999：这里还有个分类；
     {
-      fieldName: 'remark',
-      label: '备注',
-      component: 'Textarea',
-      componentProps: {
-        placeholder: '请输入备注',
-        rows: 4,
-      },
+      fieldName: 'rules',
+      label: '优惠设置',
+      component: 'Input',
+      formItemClass: 'items-start',
+      // TODO @puhui999：这里可能要加个 rules: 'required',
     },
   ];
 }
diff --git a/apps/web-antd/src/views/mall/promotion/rewardActivity/index.vue b/apps/web-antd/src/views/mall/promotion/rewardActivity/index.vue
index c0e384190..77d038161 100644
--- a/apps/web-antd/src/views/mall/promotion/rewardActivity/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/rewardActivity/index.vue
@@ -3,6 +3,7 @@ import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { MallRewardActivityApi } from '#/api/mall/promotion/reward/rewardActivity';
 
 import { Page, useVbenModal } from '@vben/common-ui';
+import { CommonStatusEnum } from '@vben/constants';
 
 import { message } from 'ant-design-vue';
 
@@ -41,13 +42,14 @@ function handleEdit(row: MallRewardActivityApi.RewardActivity) {
 
 /** 关闭满减送活动 */
 async function handleClose(row: MallRewardActivityApi.RewardActivity) {
+  // TODO @puhui999：这个国际化，需要加下哈；closing、closeSuccess；
   const hideLoading = message.loading({
-    content: '正在关闭中...',
+    content: $t('ui.actionMessage.closing', [row.name]),
     duration: 0,
   });
   try {
     await closeRewardActivity(row.id!);
-    message.success('关闭成功');
+    message.success($t('ui.actionMessage.closeSuccess', [row.name]));
     handleRefresh();
   } finally {
     hideLoading();
@@ -96,7 +98,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       refresh: true,
       search: true,
     },
-  } as VxeTableGridOptions,
+  } as VxeTableGridOptions<MallRewardActivityApi.RewardActivity>,
 });
 </script>
 
@@ -111,19 +113,20 @@ const [Grid, gridApi] = useVbenVxeGrid({
               label: $t('ui.actionTitle.create', ['活动']),
               type: 'primary',
               icon: ACTION_ICON.ADD,
+              auth: ['promotion:reward-activity:create'],
               onClick: handleCreate,
             },
           ]"
         />
       </template>
       <template #actions="{ row }">
-        <!-- TODO @AI：table action 的权限标识；参考 /Users/yunai/Java/yudao-ui-admin-vue3/src/views/mall/promotion/rewardActivity/index.vue -->
         <TableAction
           :actions="[
             {
               label: $t('common.edit'),
               type: 'link',
               icon: ACTION_ICON.EDIT,
+              auth: ['promotion:reward-activity:update'],
               onClick: handleEdit.bind(null, row),
             },
             {
@@ -131,9 +134,10 @@ const [Grid, gridApi] = useVbenVxeGrid({
               type: 'link',
               danger: true,
               icon: ACTION_ICON.CLOSE,
-              ifShow: row.status === 0,
+              auth: ['promotion:reward-activity:close'],
+              ifShow: row.status === CommonStatusEnum.ENABLE,
               popConfirm: {
-                title: '确认关闭该满减活动吗？',
+                title: '确认关闭该满减送活动吗？',
                 confirm: handleClose.bind(null, row),
               },
             },
@@ -142,6 +146,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
               type: 'link',
               danger: true,
               icon: ACTION_ICON.DELETE,
+              auth: ['promotion:reward-activity:delete'],
               popConfirm: {
                 title: $t('ui.actionMessage.deleteConfirm', [row.name]),
                 confirm: handleDelete.bind(null, row),
diff --git a/apps/web-antd/src/views/mall/promotion/rewardActivity/modules/form.vue b/apps/web-antd/src/views/mall/promotion/rewardActivity/modules/form.vue
index 4efc7ff96..349490824 100644
--- a/apps/web-antd/src/views/mall/promotion/rewardActivity/modules/form.vue
+++ b/apps/web-antd/src/views/mall/promotion/rewardActivity/modules/form.vue
@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import type { VbenFormProps } from '#/adapter/form';
 import type { MallRewardActivityApi } from '#/api/mall/promotion/reward/rewardActivity';
 
 import { computed, nextTick, ref } from 'vue';
@@ -11,7 +10,7 @@ import {
 } from '@vben/constants';
 import { convertToInteger, formatToFraction } from '@vben/utils';
 
-import { Alert, FormItem, message } from 'ant-design-vue';
+import { message } from 'ant-design-vue';
 
 import { useVbenForm } from '#/adapter/form';
 import {
@@ -20,37 +19,41 @@ import {
   updateRewardActivity,
 } from '#/api/mall/promotion/reward/rewardActivity';
 import { $t } from '#/locales';
-// TODO @puhui999：有问题
-// import { SpuAndSkuList } from '#/views/mall/promotion/components';
+import { SpuShowcase } from '#/views/mall/product/spu/components';
 
-import RewardRule from '../components/reward-rule.vue';
 import { useFormSchema } from '../data';
+import RewardRule from './reward-rule.vue';
 
 const emit = defineEmits(['success']);
-// TODO @puhui999：代码风格，和别的 form 保持一致；
+
 const formData = ref<MallRewardActivityApi.RewardActivity>({
+  // TODO @puhui999：这里的 conditionType、productScope 是不是可以删除呀。因为 data.ts 已经搞了 defaultValue；
   conditionType: PromotionConditionTypeEnum.PRICE.type,
   productScope: PromotionProductScopeEnum.ALL.scope,
   rules: [],
 });
+
 const getTitle = computed(() => {
   return formData.value?.id
     ? $t('ui.actionTitle.edit', ['满减送'])
     : $t('ui.actionTitle.create', ['满减送']);
 });
 
+const rewardRuleRef = ref<InstanceType<typeof RewardRule>>();
+
 const [Form, formApi] = useVbenForm({
   commonConfig: {
     componentProps: {
       class: 'w-full',
     },
-  } as VbenFormProps['commonConfig'],
+    labelWidth: 100,
+  },
+  layout: 'horizontal',
   schema: useFormSchema(),
   showDefaultActions: false,
 });
 
-const rewardRuleRef = ref<InstanceType<typeof RewardRule>>();
-
+// TODO @芋艿：这里需要在简化下；
 const [Modal, modalApi] = useVbenModal({
   async onConfirm() {
     const { valid } = await formApi.validate();
@@ -58,30 +61,26 @@ const [Modal, modalApi] = useVbenModal({
       return;
     }
     modalApi.lock();
+    // 提交表单
     try {
       const data = await formApi.getValues();
-      // 设置活动规则优惠券
       rewardRuleRef.value?.setRuleCoupon();
-      // 时间段转换
       if (data.startAndEndTime && Array.isArray(data.startAndEndTime)) {
         data.startTime = data.startAndEndTime[0];
         data.endTime = data.startAndEndTime[1];
         delete data.startAndEndTime;
       }
-      // 规则元转分
       data.rules?.forEach((item: any) => {
         item.discountPrice = convertToInteger(item.discountPrice || 0);
         if (data.conditionType === PromotionConditionTypeEnum.PRICE.type) {
           item.limit = convertToInteger(item.limit || 0);
         }
       });
-      // 设置商品范围
       setProductScopeValues(data);
 
-      // 提交表单
       await (formData.value?.id
-        ? updateRewardActivity(<MallRewardActivityApi.RewardActivity>data)
-        : createRewardActivity(<MallRewardActivityApi.RewardActivity>data));
+        ? updateRewardActivity(data as MallRewardActivityApi.RewardActivity)
+        : createRewardActivity(data as MallRewardActivityApi.RewardActivity));
       // 关闭并提示
       await modalApi.close();
       emit('success');
@@ -107,21 +106,17 @@ const [Modal, modalApi] = useVbenModal({
     modalApi.lock();
     try {
       const result = await getReward(data.id);
-      // 转区段时间
-      result.startAndEndTime = [result.startTime, result.endTime];
-      // 规则分转元
+      result.startAndEndTime = [result.startTime, result.endTime] as any[];
       result.rules?.forEach((item: any) => {
         item.discountPrice = formatToFraction(item.discountPrice || 0);
         if (result.conditionType === PromotionConditionTypeEnum.PRICE.type) {
           item.limit = formatToFraction(item.limit || 0);
         }
       });
-
       formData.value = result;
       // 设置到 values
       await formApi.setValues(result);
 
-      // 获得商品范围
       await getProductScope();
     } finally {
       modalApi.unlock();
@@ -129,8 +124,6 @@ const [Modal, modalApi] = useVbenModal({
   },
 });
 
-/** 获得商品范围 */
-// TODO @puhui999：可以参考下优惠劵模版的做法；可见 /Users/yunai/Java/yudao-ui-admin-vben-v5/apps/web-antd/src/views/mall/promotion/coupon/template/data.ts 的 295 行；
 async function getProductScope() {
   switch (formData.value.productScope) {
     case PromotionProductScopeEnum.CATEGORY.scope: {
@@ -140,15 +133,12 @@ async function getProductScope() {
         Array.isArray(productCategoryIds) &&
         productCategoryIds.length === 1
       ) {
-        // 单选时使用数组不能反显
         productCategoryIds = productCategoryIds[0];
       }
-      // 设置品类编号
       formData.value.productCategoryIds = productCategoryIds;
       break;
     }
     case PromotionProductScopeEnum.SPU.scope: {
-      // 设置商品编号
       formData.value.productSpuIds = formData.value.productScopeValues;
       break;
     }
@@ -158,7 +148,7 @@ async function getProductScope() {
   }
 }
 
-/** 设置商品范围 */
+// TODO @puhui999：/Users/yunai/Java/yudao-ui-admin-vben-v5/apps/web-antd/src/views/mall/promotion/coupon/template/data.ts 可以类似 /Users/yunai/Java/yudao-ui-admin-vben-v5/apps/web-antd/src/views/mall/promotion/coupon/template/data.ts 的 productScopeValues（微信交流）
 function setProductScopeValues(data: any) {
   switch (formData.value.productScope) {
     case PromotionProductScopeEnum.CATEGORY.scope: {
@@ -179,33 +169,17 @@ function setProductScopeValues(data: any) {
 </script>
 
 <template>
-  <Modal :title="getTitle" class="!w-[65%]">
-    <!-- TODO @puhui999：貌似可以不要？ -->
-    <Alert
-      description="【营销】满减送"
-      message="提示"
-      show-icon
-      type="info"
-      class="mb-4"
-    />
-    <Form class="mx-4" />
+  <Modal :title="getTitle" class="w-2/3">
+    <Form class="mx-6">
+      <!-- 自定义插槽：优惠规则 -->
+      <template #rules>
+        <RewardRule ref="rewardRuleRef" v-model="formData" />
+      </template>
 
-    <!-- 优惠设置 -->
-    <FormItem label="优惠设置">
-      <RewardRule ref="rewardRuleRef" v-model="formData" />
-    </FormItem>
-    <!-- 商品范围选择 -->
-    <FormItem
-      v-if="formData.productScope === PromotionProductScopeEnum.SPU.scope"
-      label="选择商品"
-    >
-      <SpuAndSkuList
-        v-model:spu-ids="formData.productSpuIds"
-        :rule-config="[]"
-        :spu-property-list="[]"
-        :deletable="true"
-        :spu-list="[]"
-      />
-    </FormItem>
+      <!-- 自定义插槽：商品选择 -->
+      <template #productSpuIds>
+        <SpuShowcase v-model="formData.productSpuIds" />
+      </template>
+    </Form>
   </Modal>
 </template>
diff --git a/apps/web-antd/src/views/mall/promotion/rewardActivity/components/reward-rule-coupon-select.vue b/apps/web-antd/src/views/mall/promotion/rewardActivity/modules/reward-rule-coupon-select.vue
similarity index 57%
rename from apps/web-antd/src/views/mall/promotion/rewardActivity/components/reward-rule-coupon-select.vue
rename to apps/web-antd/src/views/mall/promotion/rewardActivity/modules/reward-rule-coupon-select.vue
index e2844fc11..b91b63398 100644
--- a/apps/web-antd/src/views/mall/promotion/rewardActivity/components/reward-rule-coupon-select.vue
+++ b/apps/web-antd/src/views/mall/promotion/rewardActivity/modules/reward-rule-coupon-select.vue
@@ -1,16 +1,19 @@
 <script lang="ts" setup>
+import type { MallCouponTemplateApi } from '#/api/mall/promotion/coupon/couponTemplate';
 import type { MallRewardActivityApi } from '#/api/mall/promotion/reward/rewardActivity';
 
 import { nextTick, onMounted, ref } from 'vue';
 
+import { CouponTemplateTakeTypeEnum, DICT_TYPE } from '@vben/constants';
+
 import { useVModel } from '@vueuse/core';
 import { Button, Input } from 'ant-design-vue';
 
-// import { CouponSelect } from '@/views/mall/promotion/coupon/components'; // TODO: 根据实际路径调整
-// import * as CouponTemplateApi from '#/api/mall/promotion/coupon/couponTemplate'; // TODO: API
-// import { discountFormat } from '@/views/mall/promotion/coupon/formatter'; // TODO: 根据实际路径调整
+import { getCouponTemplateList } from '#/api/mall/promotion/coupon/couponTemplate';
+import { DictTag } from '#/components/dict-tag';
+import { CouponSelect } from '#/views/mall/promotion/coupon/components';
+import { discountFormat } from '#/views/mall/promotion/coupon/formatter';
 
-// TODO @puhui999：这里报错了。
 defineOptions({ name: 'RewardRuleCouponSelect' });
 
 const props = defineProps<{
@@ -21,17 +24,19 @@ const emits = defineEmits<{
   (e: 'update:modelValue', v: any): void;
 }>();
 
+/** 选择赠送的优惠类型拓展 */
+interface GiveCoupon extends MallCouponTemplateApi.CouponTemplate {
+  giveCount?: number;
+}
+
 const rewardRule = useVModel(props, 'modelValue', emits);
-const list = ref<any[]>([]); // TODO: 改为 GiveCouponVO[] 类型
-
-const CouponTemplateTakeTypeEnum = {
-  ADMIN: { type: 2 },
-};
+const list = ref<GiveCoupon[]>([]); // 选择的优惠劵列表
 
+// TODO @puhui999：1）命名上，可以弱化 coupon；例如说 selectRef；原因是，本身就是 coupon-select.vue；2）相关的处理的方法，最好都带 handle，如果是处理事件；例如说 deleteCoupon 改成 handleDelete；
 /** 选择优惠券 */
-// const couponSelectRef = ref<InstanceType<typeof CouponSelect>>();
+const couponSelectRef = ref<InstanceType<typeof CouponSelect>>();
 function selectCoupon() {
-  // couponSelectRef.value?.open();
+  couponSelectRef.value?.open();
 }
 
 /** 选择优惠券后的回调 */
@@ -51,23 +56,26 @@ function deleteCoupon(index: number) {
 
 /** 初始化赠送的优惠券列表 */
 async function initGiveCouponList() {
-  // if (!rewardRule.value || !rewardRule.value.giveCouponTemplateCounts) {
-  //   return;
-  // }
-  // const tempLateIds = Object.keys(rewardRule.value.giveCouponTemplateCounts);
-  // const data = await getCouponTemplateList(tempLateIds);
-  // if (!data) {
-  //   return;
-  // }
-  // data.forEach((coupon) => {
-  //   list.value.push({
-  //     ...coupon,
-  //     giveCount: rewardRule.value.giveCouponTemplateCounts![coupon.id],
-  //   });
-  // });
+  if (!rewardRule.value || !rewardRule.value.giveCouponTemplateCounts) {
+    return;
+  }
+  const tempLateIds = Object.keys(
+    rewardRule.value.giveCouponTemplateCounts,
+  ) as unknown as number[];
+  const data = await getCouponTemplateList(tempLateIds);
+  if (!data) {
+    return;
+  }
+  data.forEach((coupon) => {
+    list.value.push({
+      ...coupon,
+      giveCount: rewardRule.value.giveCouponTemplateCounts![coupon.id],
+    });
+  });
 }
 
 /** 设置赠送的优惠券 */
+// TODO @puhui999：这个有办法不提供，就是不用 form.vue 去调用，更加透明~
 function setGiveCouponList() {
   if (!rewardRule.value) {
     return;
@@ -99,14 +107,18 @@ onMounted(async () => {
         <div>优惠券名称：{{ item.name }}</div>
         <div>
           范围：
-          <!-- <DictTag :type="DICT_TYPE.PROMOTION_PRODUCT_SCOPE" :value="item.productScope" /> -->
-          {{ item.productScope }}
+          <DictTag
+            :type="DICT_TYPE.PROMOTION_PRODUCT_SCOPE"
+            :value="item.productScope"
+          />
         </div>
         <div class="flex items-center">
           优惠：
-          <!-- <DictTag :type="DICT_TYPE.PROMOTION_DISCOUNT_TYPE" :value="item.discountType" /> -->
-          <!-- {{ discountFormat(item) }} -->
-          {{ item.discountType }}
+          <DictTag
+            :type="DICT_TYPE.PROMOTION_DISCOUNT_TYPE"
+            :value="item.discountType"
+          />
+          {{ discountFormat(item) }}
         </div>
       </div>
       <div class="coupon-list-item-right flex items-center gap-2">
@@ -123,10 +135,10 @@ onMounted(async () => {
     </div>
 
     <!-- 优惠券选择 -->
-    <!-- <CouponSelect
+    <CouponSelect
       ref="couponSelectRef"
       :take-type="CouponTemplateTakeTypeEnum.ADMIN.type"
       @change="handleCouponChange"
-    /> -->
+    />
   </div>
 </template>
diff --git a/apps/web-antd/src/views/mall/promotion/rewardActivity/components/reward-rule.vue b/apps/web-antd/src/views/mall/promotion/rewardActivity/modules/reward-rule.vue
similarity index 59%
rename from apps/web-antd/src/views/mall/promotion/rewardActivity/components/reward-rule.vue
rename to apps/web-antd/src/views/mall/promotion/rewardActivity/modules/reward-rule.vue
index 9a79230ea..9b15dfbc3 100644
--- a/apps/web-antd/src/views/mall/promotion/rewardActivity/components/reward-rule.vue
+++ b/apps/web-antd/src/views/mall/promotion/rewardActivity/modules/reward-rule.vue
@@ -1,9 +1,10 @@
 <script lang="ts" setup>
-// TODO @puhui999：在优化下代码；
 import type { MallRewardActivityApi } from '#/api/mall/promotion/reward/rewardActivity';
 
 import { computed, ref } from 'vue';
 
+import { PromotionConditionTypeEnum } from '@vben/constants';
+
 import { useVModel } from '@vueuse/core';
 import {
   Button,
@@ -33,24 +34,14 @@ const formData = useVModel(props, 'modelValue', emits);
 const rewardRuleCouponSelectRef =
   ref<InstanceType<typeof RewardRuleCouponSelect>[]>();
 
-const PromotionConditionTypeEnum = {
-  PRICE: { type: 10 },
-  COUNT: { type: 20 },
-};
-
 const isPriceCondition = computed(() => {
   return (
     formData.value?.conditionType === PromotionConditionTypeEnum.PRICE.type
   );
 });
 
-/** 删除优惠规则 */
-function deleteRule(ruleIndex: number) {
-  formData.value.rules.splice(ruleIndex, 1);
-}
-
-/** 添加优惠规则 */
-function addRule() {
+/** 处理新增 */
+function handleAdd() {
   if (!formData.value.rules) {
     formData.value.rules = [];
   }
@@ -62,7 +53,11 @@ function addRule() {
   });
 }
 
-/** 设置规则优惠券-提交时 */
+/** 处理删除 */
+function handleDelete(ruleIndex: number) {
+  formData.value.rules.splice(ruleIndex, 1);
+}
+
 function setRuleCoupon() {
   if (!rewardRuleCouponSelectRef.value) {
     return;
@@ -76,24 +71,26 @@ defineExpose({ setRuleCoupon });
 </script>
 
 <template>
-  <Row>
+  <Row :gutter="[16, 16]">
     <template v-if="formData.rules">
       <Col v-for="(rule, index) in formData.rules" :key="index" :span="24">
-        <div class="mb-4">
-          <span class="font-bold">活动层级{{ index + 1 }}</span>
+        <!-- 规则标题 -->
+        <div class="mb-4 flex items-center">
+          <span class="text-base font-bold">活动层级 {{ index + 1 }}</span>
           <Button
             v-if="index !== 0"
             type="link"
             danger
             class="ml-2"
-            @click="deleteRule(index)"
+            @click="handleDelete(index)"
           >
             删除
           </Button>
         </div>
 
-        <Form :model="rule">
-          <FormItem label="优惠门槛:" :label-col="{ span: 4 }">
+        <Form :model="rule" layout="horizontal">
+          <!-- 优惠门槛 -->
+          <FormItem label="优惠门槛" :label-col="{ span: 4 }">
             <div class="flex items-center gap-2">
               <span>满</span>
               <InputNumber
@@ -102,44 +99,47 @@ defineExpose({ setRuleCoupon });
                 :min="0"
                 :precision="2"
                 :step="0.1"
-                class="!w-150px"
-                placeholder=""
-                controls-position="right"
+                :controls="false"
+                class="!w-40"
+                placeholder="请输入金额"
               />
               <Input
                 v-else
                 v-model:value="rule.limit"
                 :min="0"
-                class="!w-150px"
-                placeholder=""
+                class="!w-40"
+                placeholder="请输入数量"
                 type="number"
               />
               <span>{{ isPriceCondition ? '元' : '件' }}</span>
             </div>
           </FormItem>
 
-          <FormItem label="优惠内容:" :label-col="{ span: 4 }">
+          <!-- 优惠内容 -->
+          <!-- TODO @puhui999：这里样式，让 AI 调整下；1）类似优惠劵折行啦；2）整体要左移点； -->
+          <FormItem label="优惠内容" :label-col="{ span: 4 }">
             <div class="flex flex-col gap-4">
               <!-- 订单金额优惠 -->
-              <div class="flex items-center gap-2">
-                <span>订单金额优惠</span>
-              </div>
-              <div class="ml-4 flex items-center gap-2">
-                <span>减</span>
-                <InputNumber
-                  v-model:value="rule.discountPrice"
-                  :min="0"
-                  :precision="2"
-                  :step="0.1"
-                  class="!w-150px"
-                  controls-position="right"
-                />
-                <span>元</span>
+              <div class="flex flex-col gap-2">
+                <div class="font-medium">订单金额优惠</div>
+                <div class="ml-4 flex items-center gap-2">
+                  <span>减</span>
+                  <InputNumber
+                    v-model:value="rule.discountPrice"
+                    :min="0"
+                    :precision="2"
+                    :step="0.1"
+                    :controls="false"
+                    class="!w-40"
+                    placeholder="请输入金额"
+                  />
+                  <span>元</span>
+                </div>
               </div>
 
               <!-- 包邮 -->
               <div class="flex items-center gap-2">
-                <span>包邮：</span>
+                <span class="font-medium">包邮：</span>
                 <Switch
                   v-model:checked="rule.freeDelivery"
                   checked-children="是"
@@ -149,20 +149,21 @@ defineExpose({ setRuleCoupon });
 
               <!-- 送积分 -->
               <div class="flex items-center gap-2">
-                <span>送积分：</span>
+                <span class="font-medium">送积分：</span>
                 <span>送</span>
-                <Input
+                <InputNumber
                   v-model:value="rule.point"
-                  class="!w-150px"
-                  placeholder=""
-                  type="number"
+                  :min="0"
+                  :controls="false"
+                  class="!w-40"
+                  placeholder="请输入积分"
                 />
                 <span>积分</span>
               </div>
 
               <!-- 送优惠券 -->
-              <div class="flex items-center gap-2">
-                <span>送优惠券：</span>
+              <div class="flex items-start gap-2">
+                <span class="font-medium">送优惠券：</span>
                 <RewardRuleCouponSelect
                   ref="rewardRuleCouponSelectRef"
                   :model-value="rule"
@@ -174,12 +175,16 @@ defineExpose({ setRuleCoupon });
       </Col>
     </template>
 
-    <Col :span="24" class="mt-4">
-      <Button type="primary" @click="addRule">添加优惠规则</Button>
+    <!-- 添加规则按钮 -->
+    <Col :span="24" class="mt-2">
+      <Button type="primary" @click="handleAdd">+ 添加优惠规则</Button>
     </Col>
 
-    <Col :span="24" class="mt-4">
-      <Tag color="warning">赠送积分为 0 时不赠送。未选优惠券时不赠送。</Tag>
+    <!-- 提示信息 -->
+    <Col :span="24" class="mt-2">
+      <Tag color="warning">
+        提示：赠送积分为 0 时不赠送；未选择优惠券时不赠送。
+      </Tag>
     </Col>
   </Row>
 </template>
diff --git a/apps/web-antd/src/views/mall/promotion/seckill/activity/data.ts b/apps/web-antd/src/views/mall/promotion/seckill/activity/data.ts
index 77124baed..8c1d52e23 100644
--- a/apps/web-antd/src/views/mall/promotion/seckill/activity/data.ts
+++ b/apps/web-antd/src/views/mall/promotion/seckill/activity/data.ts
@@ -4,6 +4,9 @@ import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import { DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
 
+import { z } from '#/adapter/form';
+import { getSimpleSeckillConfigList } from '#/api/mall/promotion/seckill/seckillConfig';
+
 /** 列表的搜索表单 */
 export function useGridFormSchema(): VbenFormSchema[] {
   return [
@@ -29,6 +32,114 @@ export function useGridFormSchema(): VbenFormSchema[] {
   ];
 }
 
+/** 新增/编辑的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '秒杀活动名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入活动名称',
+      },
+      rules: 'required',
+      formItemClass: 'col-span-2',
+    },
+    {
+      fieldName: 'startTime',
+      label: '活动开始时间',
+      component: 'DatePicker',
+      componentProps: {
+        placeholder: '请选择活动开始时间',
+        showTime: false,
+        format: 'YYYY-MM-DD',
+        valueFormat: 'x',
+        class: 'w-full',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'endTime',
+      label: '活动结束时间',
+      component: 'DatePicker',
+      componentProps: {
+        placeholder: '请选择活动结束时间',
+        showTime: false,
+        format: 'YYYY-MM-DD',
+        valueFormat: 'x',
+        class: 'w-full',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'configIds',
+      label: '秒杀时段',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择秒杀时段',
+        mode: 'multiple',
+        api: getSimpleSeckillConfigList,
+        labelField: 'name',
+        valueField: 'id',
+        class: 'w-full',
+      },
+      rules: 'required',
+      formItemClass: 'col-span-2',
+    },
+    {
+      fieldName: 'totalLimitCount',
+      label: '总限购数量',
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '请输入总限购数量',
+        min: 0,
+        class: 'w-full',
+      },
+      rules: z.number().min(0).default(0),
+    },
+    {
+      fieldName: 'singleLimitCount',
+      label: '单次限购数量',
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '请输入单次限购数量',
+        min: 0,
+        class: 'w-full',
+      },
+      rules: z.number().min(0).default(0),
+    },
+    {
+      fieldName: 'sort',
+      label: '排序',
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '请输入排序',
+        min: 0,
+        class: 'w-full',
+      },
+      rules: z.number().min(0).default(0),
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+        rows: 4,
+      },
+      formItemClass: 'col-span-2',
+    },
+  ];
+}
+
 /** 列表的字段 */
 export function useGridColumns(): VxeTableGridOptions['columns'] {
   return [
diff --git a/apps/web-antd/src/views/mall/promotion/seckill/activity/index.vue b/apps/web-antd/src/views/mall/promotion/seckill/activity/index.vue
index 83538bdd1..dfed233c2 100644
--- a/apps/web-antd/src/views/mall/promotion/seckill/activity/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/seckill/activity/index.vue
@@ -5,7 +5,6 @@ import type { MallSeckillActivityApi } from '#/api/mall/promotion/seckill/seckil
 import { onMounted } from 'vue';
 
 import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
-import { $t } from '@vben/locales';
 
 import { message, Tag } from 'ant-design-vue';
 
@@ -16,6 +15,7 @@ import {
   getSeckillActivityPage,
 } from '#/api/mall/promotion/seckill/seckillActivity';
 import { getSimpleSeckillConfigList } from '#/api/mall/promotion/seckill/seckillConfig';
+import { $t } from '#/locales';
 
 import { useGridColumns, useGridFormSchema } from './data';
 import { formatConfigNames, formatTimeRange, setConfigList } from './formatter';
diff --git a/apps/web-antd/src/views/mall/promotion/seckill/activity/modules/form.vue b/apps/web-antd/src/views/mall/promotion/seckill/activity/modules/form.vue
index 7aef17ae8..ceef1485b 100644
--- a/apps/web-antd/src/views/mall/promotion/seckill/activity/modules/form.vue
+++ b/apps/web-antd/src/views/mall/promotion/seckill/activity/modules/form.vue
@@ -1,11 +1,11 @@
 <script lang="ts" setup>
 import type { MallSeckillActivityApi } from '#/api/mall/promotion/seckill/seckillActivity';
 
-import { computed, ref } from 'vue';
+import { computed, nextTick, ref } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
 
-import { message } from 'ant-design-vue';
+import { Button, message } from 'ant-design-vue';
 
 import { useVbenForm } from '#/adapter/form';
 import {
@@ -15,59 +15,53 @@ import {
 } from '#/api/mall/promotion/seckill/seckillActivity';
 import { $t } from '#/locales';
 
+import { useFormSchema } from '../data';
+
 const emit = defineEmits(['success']);
 const formData = ref<MallSeckillActivityApi.SeckillActivity>();
+
 const getTitle = computed(() => {
   return formData.value?.id
     ? $t('ui.actionTitle.edit', ['秒杀活动'])
     : $t('ui.actionTitle.create', ['秒杀活动']);
 });
 
-// 简化的表单配置，实际项目中应该有完整的字段配置
-const formSchema = [
-  {
-    fieldName: 'id',
-    component: 'Input',
-    dependencies: {
-      triggerFields: [''],
-      show: () => false,
-    },
-  },
-  {
-    fieldName: 'name',
-    label: '活动名称',
-    component: 'Input',
-    componentProps: {
-      placeholder: '请输入活动名称',
-    },
-    rules: 'required',
-  },
-  {
-    fieldName: 'status',
-    label: '活动状态',
-    component: 'Select',
-    componentProps: {
-      placeholder: '请选择活动状态',
-      options: [
-        { label: '开启', value: 0 },
-        { label: '关闭', value: 1 },
-      ],
-    },
-    rules: 'required',
-  },
-];
+// ================= 商品选择相关 =================
+const spuId = ref<number>();
+const spuName = ref<string>('');
+const skuTableData = ref<any[]>([]);
+
+// 选择商品（占位函数，实际需要对接商品选择组件）
+const handleSelectProduct = () => {
+  message.info('商品选择功能需要对接商品选择组件');
+  // TODO: 打开商品选择弹窗
+  // 实际使用时需要：
+  // 1. 打开商品选择弹窗
+  // 2. 选择商品后调用以下逻辑设置数据：
+  //    spuId.value = selectedSpu.id;
+  //    spuName.value = selectedSpu.name;
+  //    skuTableData.value = selectedSkus.map(sku => ({
+  //      skuId: sku.id,
+  //      skuName: sku.name || '',
+  //      picUrl: sku.picUrl || selectedSpu.picUrl || '',
+  //      price: sku.price || 0,
+  //      stock: 0,
+  //      seckillPrice: 0,
+  //    }));
+};
+
+// ================= end =================
 
 const [Form, formApi] = useVbenForm({
   commonConfig: {
     componentProps: {
       class: 'w-full',
     },
-    formItemClass: 'col-span-2',
-    labelWidth: 80,
   },
   layout: 'horizontal',
-  schema: formSchema,
+  schema: useFormSchema(),
   showDefaultActions: false,
+  wrapperClass: 'grid-cols-2',
 });
 
 const [Modal, modalApi] = useVbenModal({
@@ -76,15 +70,46 @@ const [Modal, modalApi] = useVbenModal({
     if (!valid) {
       return;
     }
+
+    // 验证商品和 SKU 配置
+    if (!spuId.value) {
+      message.error('请选择秒杀商品');
+      return;
+    }
+
+    if (skuTableData.value.length === 0) {
+      message.error('请至少配置一个 SKU');
+      return;
+    }
+
+    // 验证 SKU 配置
+    const hasInvalidSku = skuTableData.value.some(
+      (sku) => sku.stock < 1 || sku.seckillPrice < 0.01,
+    );
+    if (hasInvalidSku) {
+      message.error('请正确配置 SKU 的秒杀库存（≥1）和秒杀价格（≥0.01）');
+      return;
+    }
+
     modalApi.lock();
-    // 提交表单
-    const data =
-      (await formApi.getValues()) as MallSeckillActivityApi.SeckillActivity;
     try {
+      const values = await formApi.getValues();
+
+      // 构建提交数据
+      const data: any = {
+        ...values,
+        spuId: spuId.value,
+        products: skuTableData.value.map((sku) => ({
+          skuId: sku.skuId,
+          stock: sku.stock,
+          seckillPrice: Math.round(sku.seckillPrice * 100), // 转换为分
+        })),
+      };
+
       await (formData.value?.id
         ? updateSeckillActivity(data)
         : createSeckillActivity(data));
-      // 关闭并提示
+
       await modalApi.close();
       emit('success');
       message.success($t('ui.actionMessage.operationSuccess'));
@@ -95,18 +120,27 @@ const [Modal, modalApi] = useVbenModal({
   async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
       formData.value = undefined;
+      spuId.value = undefined;
+      spuName.value = '';
+      skuTableData.value = [];
       return;
     }
-    // 加载数据
+
     const data = modalApi.getData<MallSeckillActivityApi.SeckillActivity>();
     if (!data || !data.id) {
       return;
     }
+
     modalApi.lock();
     try {
       formData.value = await getSeckillActivity(data.id);
-      // 设置到 values
+      await nextTick();
       await formApi.setValues(formData.value);
+
+      // TODO: 加载商品和 SKU 信息
+      // 需要调用商品 API 获取 SPU 详情
+      // spuId.value = formData.value.spuId;
+      // await loadProductDetails(formData.value.spuId, formData.value.products);
     } finally {
       modalApi.unlock();
     }
@@ -115,7 +149,72 @@ const [Modal, modalApi] = useVbenModal({
 </script>
 
 <template>
-  <Modal class="w-2/5" :title="getTitle">
-    <Form class="mx-4" />
+  <Modal class="w-4/5" :title="getTitle">
+    <div class="mx-4">
+      <Form />
+
+      <!-- 商品选择区域 -->
+      <div class="mt-4">
+        <div class="mb-2 flex items-center">
+          <span class="text-sm font-medium">秒杀活动商品:</span>
+          <Button class="ml-2" type="primary" @click="handleSelectProduct">
+            选择商品
+          </Button>
+          <span v-if="spuName" class="ml-4 text-sm text-gray-600">
+            已选择: {{ spuName }}
+          </span>
+        </div>
+
+        <!-- SKU 配置表格 -->
+        <div v-if="skuTableData.length > 0" class="mt-4">
+          <table class="w-full border-collapse border border-gray-300">
+            <thead>
+              <tr class="bg-gray-100">
+                <th class="border border-gray-300 px-4 py-2">商品图片</th>
+                <th class="border border-gray-300 px-4 py-2">SKU 名称</th>
+                <th class="border border-gray-300 px-4 py-2">原价(元)</th>
+                <th class="border border-gray-300 px-4 py-2">秒杀库存</th>
+                <th class="border border-gray-300 px-4 py-2">秒杀价格(元)</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="(sku, index) in skuTableData" :key="index">
+                <td class="border border-gray-300 px-4 py-2 text-center">
+                  <img
+                    v-if="sku.picUrl"
+                    :src="sku.picUrl"
+                    alt="商品图片"
+                    class="h-16 w-16 object-cover"
+                  />
+                </td>
+                <td class="border border-gray-300 px-4 py-2">
+                  {{ sku.skuName }}
+                </td>
+                <td class="border border-gray-300 px-4 py-2 text-center">
+                  ¥{{ (sku.price / 100).toFixed(2) }}
+                </td>
+                <td class="border border-gray-300 px-4 py-2">
+                  <input
+                    v-model.number="sku.stock"
+                    type="number"
+                    min="0"
+                    class="w-full rounded border border-gray-300 px-2 py-1"
+                  />
+                </td>
+                <td class="border border-gray-300 px-4 py-2">
+                  <input
+                    v-model.number="sku.seckillPrice"
+                    type="number"
+                    min="0"
+                    step="0.01"
+                    class="w-full rounded border border-gray-300 px-2 py-1"
+                  />
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
   </Modal>
 </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/afterSale/detail/index.vue b/apps/web-antd/src/views/mall/trade/afterSale/detail/index.vue
index c2a1fd9ac..21893ea9b 100644
--- a/apps/web-antd/src/views/mall/trade/afterSale/detail/index.vue
+++ b/apps/web-antd/src/views/mall/trade/afterSale/detail/index.vue
@@ -11,7 +11,7 @@ import { DICT_TYPE } from '@vben/constants';
 import { useTabs } from '@vben/hooks';
 import { $t } from '@vben/locales';
 
-import { Card, message, Tag } from 'ant-design-vue';
+import { message, Tag } from 'ant-design-vue';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
@@ -52,6 +52,7 @@ const [OrderDescriptions] = useDescription({
   title: '订单信息',
   bordered: false,
   column: 3,
+  class: 'mx-4',
   schema: useOrderInfoSchema(),
 });
 
@@ -59,6 +60,7 @@ const [AfterSaleDescriptions] = useDescription({
   title: '售后信息',
   bordered: false,
   column: 3,
+  class: 'mx-4',
   schema: useAfterSaleInfoSchema(),
 });
 
@@ -66,6 +68,7 @@ const [RefundStatusDescriptions] = useDescription({
   title: '退款状态',
   bordered: false,
   column: 1,
+  class: 'mx-4',
   schema: useRefundStatusSchema(),
 });
 
@@ -261,17 +264,17 @@ onMounted(() => {
     <DisagreeModal @success="getDetail" />
 
     <!-- 订单信息 -->
-    <Card class="mb-4">
+    <div class="mb-4">
       <OrderDescriptions :data="afterSale" />
-    </Card>
+    </div>
     <!-- 售后信息 -->
-    <Card class="mb-4">
+    <div class="mb-4">
       <AfterSaleDescriptions :data="afterSale" />
-    </Card>
+    </div>
     <!-- 退款状态 -->
-    <Card class="mb-4">
+    <div class="mb-4">
       <RefundStatusDescriptions :data="afterSale" />
-    </Card>
+    </div>
     <!-- 商品信息 -->
     <div class="mb-4">
       <ProductGrid table-title="商品信息">
diff --git a/apps/web-antd/src/views/mall/trade/order/detail/index.vue b/apps/web-antd/src/views/mall/trade/order/detail/index.vue
index 89a2a1bfa..0e7e4bfb5 100644
--- a/apps/web-antd/src/views/mall/trade/order/detail/index.vue
+++ b/apps/web-antd/src/views/mall/trade/order/detail/index.vue
@@ -15,7 +15,7 @@ import {
 } from '@vben/constants';
 import { useTabs } from '@vben/hooks';
 
-import { Card, message, Tag } from 'ant-design-vue';
+import { message, Tag } from 'ant-design-vue';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getSimpleDeliveryExpressList } from '#/api/mall/trade/delivery/express';
@@ -64,6 +64,7 @@ const [OrderInfoDescriptions] = useDescription({
   title: '订单信息',
   bordered: false,
   column: 3,
+  class: 'mx-4',
   schema: useOrderInfoSchema(),
 });
 
@@ -71,6 +72,7 @@ const [OrderStatusDescriptions] = useDescription({
   title: '订单状态',
   bordered: false,
   column: 1,
+  class: 'mx-4',
   schema: useOrderStatusSchema(),
 });
 
@@ -78,6 +80,7 @@ const [OrderPriceDescriptions] = useDescription({
   title: '费用信息',
   bordered: false,
   column: 4,
+  class: 'mx-4',
   schema: useOrderPriceSchema(),
 });
 
@@ -85,6 +88,7 @@ const [DeliveryInfoDescriptions] = useDescription({
   title: '收货信息',
   bordered: false,
   column: 3,
+  class: 'mx-4',
   schema: useDeliveryInfoSchema(),
 });
 
@@ -294,13 +298,13 @@ onMounted(async () => {
     <PriceFormModal @success="getDetail" />
 
     <!-- 订单信息 -->
-    <Card class="mb-4">
+    <div class="mb-4">
       <OrderInfoDescriptions :data="order" />
-    </Card>
+    </div>
     <!-- 订单状态 -->
-    <Card class="mb-4">
+    <div class="mb-4">
       <OrderStatusDescriptions :data="order" />
-    </Card>
+    </div>
     <!-- 商品信息 -->
     <div class="mb-4">
       <ProductGrid table-title="商品信息">
@@ -321,15 +325,15 @@ onMounted(async () => {
       </ProductGrid>
     </div>
     <!-- 费用信息 -->
-    <Card class="mb-4">
+    <div class="mb-4">
       <OrderPriceDescriptions :data="order" />
-    </Card>
+    </div>
     <!-- 收货信息 -->
-    <Card class="mb-4">
+    <div class="mb-4">
       <DeliveryInfoDescriptions :data="order" />
-    </Card>
+    </div>
     <!-- 物流详情 -->
-    <div v-if="expressTrackList.length > 0" class="mt-4">
+    <div v-if="expressTrackList.length > 0" class="mb-4">
       <ExpressTrackGrid table-title="物流详情" />
     </div>
     <!-- 操作日志 -->
@@ -337,7 +341,7 @@ onMounted(async () => {
       <OperateLogGrid table-title="操作日志">
         <template #userType="{ row }">
           <Tag v-if="row.userType === 0" color="default"> 系统 </Tag>
-          <DictTag :type="DICT_TYPE.USER_TYPE" :value="row.userType" />
+          <DictTag v-else :type="DICT_TYPE.USER_TYPE" :value="row.userType" />
         </template>
       </OperateLogGrid>
     </div>
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/mall/trade/order/modules/remark-form.vue b/apps/web-antd/src/views/mall/trade/order/modules/remark-form.vue
index 15d73efa2..c8cd87619 100644
--- a/apps/web-antd/src/views/mall/trade/order/modules/remark-form.vue
+++ b/apps/web-antd/src/views/mall/trade/order/modules/remark-form.vue
@@ -10,6 +10,7 @@ import { message } from 'ant-design-vue';
 import { useVbenForm } from '#/adapter/form';
 import { updateOrderRemark } from '#/api/mall/trade/order';
 import { $t } from '#/locales';
+
 import { useRemarkFormSchema } from '../data';
 
 const emit = defineEmits(['success']);
diff --git a/apps/web-antd/src/views/member/point/record/data.ts b/apps/web-antd/src/views/member/point/record/data.ts
index 6ae218f4e..4e0f54945 100644
--- a/apps/web-antd/src/views/member/point/record/data.ts
+++ b/apps/web-antd/src/views/member/point/record/data.ts
@@ -3,11 +3,11 @@ import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 
 import { h } from 'vue';
 
-import { Tag } from 'ant-design-vue';
-
 import { DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
 
+import { Tag } from 'ant-design-vue';
+
 import { getRangePickerDefaultProps } from '#/utils';
 
 /** 列表的搜索表单 */
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-antd/src/views/pay/notify/modules/detail.vue b/apps/web-antd/src/views/pay/notify/modules/detail.vue
index fb79db80a..90a6a67b0 100644
--- a/apps/web-antd/src/views/pay/notify/modules/detail.vue
+++ b/apps/web-antd/src/views/pay/notify/modules/detail.vue
@@ -19,7 +19,6 @@ const formData = ref<PayNotifyApi.NotifyTask>();
 const [Description] = useDescription({
   bordered: true,
   column: 2,
-  class: 'mx-4',
   schema: useDetailSchema(),
 });
 
diff --git a/apps/web-antd/src/views/pay/order/modules/detail.vue b/apps/web-antd/src/views/pay/order/modules/detail.vue
index 68b5426c2..2d4d84b10 100644
--- a/apps/web-antd/src/views/pay/order/modules/detail.vue
+++ b/apps/web-antd/src/views/pay/order/modules/detail.vue
@@ -15,7 +15,6 @@ const formData = ref<PayOrderApi.Order>();
 const [Descriptions] = useDescription({
   bordered: true,
   column: 2,
-  class: 'mx-4',
   schema: useDetailSchema(),
 });
 
diff --git a/apps/web-antd/src/views/pay/refund/modules/detail.vue b/apps/web-antd/src/views/pay/refund/modules/detail.vue
index 79adf6d65..d78ea529d 100644
--- a/apps/web-antd/src/views/pay/refund/modules/detail.vue
+++ b/apps/web-antd/src/views/pay/refund/modules/detail.vue
@@ -15,7 +15,6 @@ const formData = ref<PayRefundApi.Refund>();
 const [Descriptions] = useDescription({
   bordered: true,
   column: 2,
-  class: 'mx-4',
   schema: useDetailSchema(),
 });
 
diff --git a/apps/web-antd/src/views/pay/transfer/modules/detail.vue b/apps/web-antd/src/views/pay/transfer/modules/detail.vue
index ea9fb84b6..83150697c 100644
--- a/apps/web-antd/src/views/pay/transfer/modules/detail.vue
+++ b/apps/web-antd/src/views/pay/transfer/modules/detail.vue
@@ -15,7 +15,6 @@ const formData = ref<PayTransferApi.Transfer>();
 const [Descriptions] = useDescription({
   bordered: true,
   column: 2,
-  class: 'mx-4',
   schema: useDetailSchema(),
 });
 
diff --git a/apps/web-antd/src/views/system/loginlog/modules/detail.vue b/apps/web-antd/src/views/system/loginlog/modules/detail.vue
index a0970c5c2..4982a32b3 100644
--- a/apps/web-antd/src/views/system/loginlog/modules/detail.vue
+++ b/apps/web-antd/src/views/system/loginlog/modules/detail.vue
@@ -14,7 +14,6 @@ const formData = ref<SystemLoginLogApi.LoginLog>();
 const [Descriptions] = useDescription({
   bordered: true,
   column: 1,
-  class: 'mx-4',
   schema: useDetailSchema(),
 });
 
diff --git a/apps/web-antd/src/views/system/mail/log/modules/detail.vue b/apps/web-antd/src/views/system/mail/log/modules/detail.vue
index e9fe28d76..3b04a9d04 100644
--- a/apps/web-antd/src/views/system/mail/log/modules/detail.vue
+++ b/apps/web-antd/src/views/system/mail/log/modules/detail.vue
@@ -14,7 +14,6 @@ const formData = ref<SystemMailLogApi.MailLog>();
 const [Descriptions] = useDescription({
   bordered: true,
   column: 2,
-  class: 'mx-4',
   schema: useDetailSchema(),
 });
 
diff --git a/apps/web-antd/src/views/system/notify/message/modules/detail.vue b/apps/web-antd/src/views/system/notify/message/modules/detail.vue
index 7b4afe83e..a0e100dd4 100644
--- a/apps/web-antd/src/views/system/notify/message/modules/detail.vue
+++ b/apps/web-antd/src/views/system/notify/message/modules/detail.vue
@@ -14,7 +14,6 @@ const formData = ref<SystemNotifyMessageApi.NotifyMessage>();
 const [Descriptions] = useDescription({
   bordered: true,
   column: 1,
-  class: 'mx-4',
   schema: useDetailSchema(),
 });
 
diff --git a/apps/web-antd/src/views/system/notify/my/modules/detail.vue b/apps/web-antd/src/views/system/notify/my/modules/detail.vue
index 7b4afe83e..a0e100dd4 100644
--- a/apps/web-antd/src/views/system/notify/my/modules/detail.vue
+++ b/apps/web-antd/src/views/system/notify/my/modules/detail.vue
@@ -14,7 +14,6 @@ const formData = ref<SystemNotifyMessageApi.NotifyMessage>();
 const [Descriptions] = useDescription({
   bordered: true,
   column: 1,
-  class: 'mx-4',
   schema: useDetailSchema(),
 });
 
diff --git a/apps/web-antd/src/views/system/operatelog/modules/detail.vue b/apps/web-antd/src/views/system/operatelog/modules/detail.vue
index e69d8b20d..5ada4818a 100644
--- a/apps/web-antd/src/views/system/operatelog/modules/detail.vue
+++ b/apps/web-antd/src/views/system/operatelog/modules/detail.vue
@@ -14,7 +14,6 @@ const formData = ref<SystemOperateLogApi.OperateLog>();
 const [Descriptions] = useDescription({
   bordered: true,
   column: 1,
-  class: 'mx-4',
   schema: useDetailSchema(),
 });
 
diff --git a/apps/web-antd/src/views/system/sms/log/modules/detail.vue b/apps/web-antd/src/views/system/sms/log/modules/detail.vue
index 71cfb2c3a..2831f6ff5 100644
--- a/apps/web-antd/src/views/system/sms/log/modules/detail.vue
+++ b/apps/web-antd/src/views/system/sms/log/modules/detail.vue
@@ -14,7 +14,6 @@ const formData = ref<SystemSmsLogApi.SmsLog>();
 const [Descriptions] = useDescription({
   bordered: true,
   column: 2,
-  class: 'mx-4',
   schema: useDetailSchema(),
 });
 
diff --git a/apps/web-antd/src/views/system/social/user/modules/detail.vue b/apps/web-antd/src/views/system/social/user/modules/detail.vue
index df24c9bab..de2b35cbf 100644
--- a/apps/web-antd/src/views/system/social/user/modules/detail.vue
+++ b/apps/web-antd/src/views/system/social/user/modules/detail.vue
@@ -16,9 +16,6 @@ const formData = ref<SystemSocialUserApi.SocialUser>();
 const [Descriptions] = useDescription({
   bordered: true,
   column: 1,
-  size: 'middle',
-  class: 'mx-4',
-  labelStyle: { width: '185px' },
   schema: useDetailSchema(),
 });
 
diff --git a/apps/web-ele/src/api/mall/product/category.ts b/apps/web-ele/src/api/mall/product/category.ts
index 12d7202f4..7ec8bf833 100644
--- a/apps/web-ele/src/api/mall/product/category.ts
+++ b/apps/web-ele/src/api/mall/product/category.ts
@@ -50,7 +50,7 @@ export function getCategoryList(params: any) {
   );
 }
 
-// 获得商品分类列表
+/** 获得商品分类列表 */
 export function getCategorySimpleList() {
   return requestClient.get<MallCategoryApi.Category[]>(
     '/product/category/list',
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/kefu/conversation/index.ts b/apps/web-ele/src/api/mall/promotion/kefu/conversation/index.ts
index c2cdaf255..6510dc0ec 100644
--- a/apps/web-ele/src/api/mall/promotion/kefu/conversation/index.ts
+++ b/apps/web-ele/src/api/mall/promotion/kefu/conversation/index.ts
@@ -5,38 +5,24 @@ import { requestClient } from '#/api/request';
 export namespace MallKefuConversationApi {
   /** 客服会话 */
   export interface Conversation {
-    /** 编号 */
-    id: number;
-    /** 会话所属用户 */
-    userId: number;
-    /** 会话所属用户头像 */
-    userAvatar: string;
-    /** 会话所属用户昵称 */
-    userNickname: string;
-    /** 最后聊天时间 */
-    lastMessageTime: Date;
-    /** 最后聊天内容 */
-    lastMessageContent: string;
-    /** 最后发送的消息类型 */
-    lastMessageContentType: number;
-    /** 管理端置顶 */
-    adminPinned: boolean;
-    /** 用户是否可见 */
-    userDeleted: boolean;
-    /** 管理员是否可见 */
-    adminDeleted: boolean;
-    /** 管理员未读消息数 */
-    adminUnreadMessageCount: number;
-    /** 创建时间 */
-    createTime?: string;
+    id: number; // 编号
+    userId: number; // 会话所属用户
+    userAvatar: string; // 会话所属用户头像
+    userNickname: string; // 会话所属用户昵称
+    lastMessageTime: Date; // 最后聊天时间
+    lastMessageContent: string; // 最后聊天内容
+    lastMessageContentType: number; // 最后发送的消息类型
+    adminPinned: boolean; // 管理端置顶
+    userDeleted: boolean; // 用户是否可见
+    adminDeleted: boolean; // 管理员是否可见
+    adminUnreadMessageCount: number; // 管理员未读消息数
+    createTime?: string; // 创建时间
   }
 
   /** 会话置顶请求 */
   export interface ConversationPinnedUpdate {
-    /** 会话编号 */
-    id: number;
-    /** 是否置顶 */
-    pinned: boolean;
+    id: number; // 会话编号
+    pinned: boolean; // 是否置顶
   }
 }
 
diff --git a/apps/web-ele/src/api/mall/promotion/kefu/message/index.ts b/apps/web-ele/src/api/mall/promotion/kefu/message/index.ts
index 4bf08306e..3fb363267 100644
--- a/apps/web-ele/src/api/mall/promotion/kefu/message/index.ts
+++ b/apps/web-ele/src/api/mall/promotion/kefu/message/index.ts
@@ -5,44 +5,29 @@ import { requestClient } from '#/api/request';
 export namespace MallKefuMessageApi {
   /** 客服消息 */
   export interface Message {
-    /** 编号 */
-    id: number;
-    /** 会话编号 */
-    conversationId: number;
-    /** 发送人编号 */
-    senderId: number;
-    /** 发送人头像 */
-    senderAvatar: string;
-    /** 发送人类型 */
-    senderType: number;
-    /** 接收人编号 */
-    receiverId: number;
-    /** 接收人类型 */
-    receiverType: number;
-    /** 消息类型 */
-    contentType: number;
-    /** 消息内容 */
-    content: string;
-    /** 是否已读 */
-    readStatus: boolean;
-    /** 创建时间 */
-    createTime: Date;
+    id: number; // 编号
+    conversationId: number; // 会话编号
+    senderId: number; // 发送人编号
+    senderAvatar: string; // 发送人头像
+    senderType: number; // 发送人类型
+    receiverId: number; // 接收人编号
+    receiverType: number; // 接收人类型
+    contentType: number; // 消息类型
+    content: string; // 消息内容
+    readStatus: boolean; // 是否已读
+    createTime: Date; // 创建时间
   }
 
   /** 发送消息请求 */
   export interface MessageSend {
-    /** 会话编号 */
-    conversationId: number;
-    /** 消息类型 */
-    contentType: number;
-    /** 消息内容 */
-    content: string;
+    conversationId: number; // 会话编号
+    contentType: number; // 消息类型
+    content: string; // 消息内容
   }
 
   /** 消息列表查询参数 */
   export interface MessageQuery extends PageParam {
-    /** 会话编号 */
-    conversationId: number;
+    conversationId: number; // 会话编号
   }
 }
 
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/components/description/description.vue b/apps/web-ele/src/components/description/description.vue
index 3272748e3..23d0b9fde 100644
--- a/apps/web-ele/src/components/description/description.vue
+++ b/apps/web-ele/src/components/description/description.vue
@@ -127,9 +127,7 @@ export default defineComponent({
                 },
                 default: () => {
                   if (item.slot) {
-                    // TODO @xingyu：这里要 inline 掉么？
-                    const slotContent = getSlot(slots, item.slot, data);
-                    return slotContent;
+                    return getSlot(slots, item.slot, data);
                   }
                   if (!contentMinWidth) {
                     return getContent();
diff --git a/apps/web-ele/src/layouts/auth.vue b/apps/web-ele/src/layouts/auth.vue
index 18d415bc7..8ba66e85a 100644
--- a/apps/web-ele/src/layouts/auth.vue
+++ b/apps/web-ele/src/layouts/auth.vue
@@ -8,12 +8,14 @@ import { $t } from '#/locales';
 
 const appName = computed(() => preferences.app.name);
 const logo = computed(() => preferences.logo.source);
+const logoDark = computed(() => preferences.logo.sourceDark);
 </script>
 
 <template>
   <AuthPageLayout
     :app-name="appName"
     :logo="logo"
+    :logo-dark="logoDark"
     :page-description="$t('authentication.pageDesc')"
     :page-title="$t('authentication.pageTitle')"
   >
diff --git a/apps/web-ele/src/store/mall/kefu.ts b/apps/web-ele/src/store/mall/kefu.ts
new file mode 100644
index 000000000..85f4023e7
--- /dev/null
+++ b/apps/web-ele/src/store/mall/kefu.ts
@@ -0,0 +1,102 @@
+import type { MallKefuConversationApi } from '#/api/mall/promotion/kefu/conversation';
+import type { MallKefuMessageApi } from '#/api/mall/promotion/kefu/message';
+
+import { isEmpty } from '@vben/utils';
+
+import { acceptHMRUpdate, defineStore } from 'pinia';
+
+import * as KeFuConversationApi from '#/api/mall/promotion/kefu/conversation';
+
+interface MallKefuInfoVO {
+  conversationList: MallKefuConversationApi.Conversation[]; // 会话列表
+  conversationMessageList: Map<number, MallKefuMessageApi.Message[]>; // 会话消息
+}
+
+export const useMallKefuStore = defineStore('mall-kefu', {
+  state: (): MallKefuInfoVO => ({
+    conversationList: [],
+    conversationMessageList: new Map<number, MallKefuMessageApi.Message[]>(), // key 会话，value 会话消息列表
+  }),
+  getters: {
+    getConversationList(): MallKefuConversationApi.Conversation[] {
+      return this.conversationList;
+    },
+    getConversationMessageList(): (
+      conversationId: number,
+    ) => MallKefuMessageApi.Message[] | undefined {
+      return (conversationId: number) =>
+        this.conversationMessageList.get(conversationId);
+    },
+  },
+  actions: {
+    // ======================= 会话消息相关 =======================
+    /** 缓存历史消息 */
+    saveMessageList(
+      conversationId: number,
+      messageList: MallKefuMessageApi.Message[],
+    ) {
+      this.conversationMessageList.set(conversationId, messageList);
+    },
+
+    // ======================= 会话相关 =======================
+    /** 加载会话缓存列表 */
+    async setConversationList() {
+      // TODO @jave：idea linter 告警，修复下；
+      // TODO @jave：不使用 KeFuConversationApi.，直接用 getConversationList
+      this.conversationList = await KeFuConversationApi.getConversationList();
+      this.conversationSort();
+    },
+    /** 更新会话缓存已读 */
+    async updateConversationStatus(conversationId: number) {
+      if (isEmpty(this.conversationList)) {
+        return;
+      }
+      const conversation = this.conversationList.find(
+        (item) => item.id === conversationId,
+      );
+      conversation && (conversation.adminUnreadMessageCount = 0);
+    },
+    /** 更新会话缓存 */
+    async updateConversation(conversationId: number) {
+      if (isEmpty(this.conversationList)) {
+        return;
+      }
+
+      const conversation =
+        await KeFuConversationApi.getConversation(conversationId);
+      this.deleteConversation(conversationId);
+      conversation && this.conversationList.push(conversation);
+      this.conversationSort();
+    },
+    /** 删除会话缓存 */
+    deleteConversation(conversationId: number) {
+      const index = this.conversationList.findIndex(
+        (item) => item.id === conversationId,
+      );
+      // 存在则删除
+      if (index !== -1) {
+        this.conversationList.splice(index, 1);
+      }
+    },
+    conversationSort() {
+      // 按置顶属性和最后消息时间排序
+      this.conversationList.sort((a, b) => {
+        // 按照置顶排序，置顶的会在前面
+        if (a.adminPinned !== b.adminPinned) {
+          return a.adminPinned ? -1 : 1;
+        }
+        // 按照最后消息时间排序，最近的会在前面
+        return (
+          (b.lastMessageTime as unknown as number) -
+          (a.lastMessageTime as unknown as number)
+        );
+      });
+    },
+  },
+});
+
+// 解决热更新问题
+const hot = import.meta.hot;
+if (hot) {
+  hot.accept(acceptHMRUpdate(useMallKefuStore, hot));
+}
diff --git a/apps/web-ele/src/views/ai/music/manager/index.vue b/apps/web-ele/src/views/ai/music/manager/index.vue
index 2c27074b0..9095e1b5f 100644
--- a/apps/web-ele/src/views/ai/music/manager/index.vue
+++ b/apps/web-ele/src/views/ai/music/manager/index.vue
@@ -3,7 +3,6 @@ import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { AiMusicApi } from '#/api/ai/music';
 
 import { confirm, DocAlert, Page } from '@vben/common-ui';
-import { AiMusicStatusEnum } from '@vben/constants';
 
 import { ElButton, ElLoading, ElMessage } from 'element-plus';
 
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/infra/apiAccessLog/data.ts b/apps/web-ele/src/views/infra/apiAccessLog/data.ts
index 0abdede2d..fb59f59b6 100644
--- a/apps/web-ele/src/views/infra/apiAccessLog/data.ts
+++ b/apps/web-ele/src/views/infra/apiAccessLog/data.ts
@@ -226,7 +226,7 @@ export function useDetailSchema(): DescriptionItemSchema[] {
       label: '请求时间',
       field: 'beginTime',
       render: (val, data) => {
-        if (data?.beginTime && data?.endTime) {
+        if (val && data?.endTime) {
           return `${formatDateTime(val)} ~ ${formatDateTime(data.endTime)}`;
         }
         return '';
@@ -245,7 +245,7 @@ export function useDetailSchema(): DescriptionItemSchema[] {
       render: (val, data) => {
         if (val === 0) {
           return '正常';
-        } else if (data && data.resultMsg) {
+        } else if (val > 0 && data?.resultMsg) {
           return `失败 | ${val} | ${data.resultMsg}`;
         }
         return '';
diff --git a/apps/web-ele/src/views/infra/apiAccessLog/modules/detail.vue b/apps/web-ele/src/views/infra/apiAccessLog/modules/detail.vue
index f5b3c65a3..0b3c4c7fa 100644
--- a/apps/web-ele/src/views/infra/apiAccessLog/modules/detail.vue
+++ b/apps/web-ele/src/views/infra/apiAccessLog/modules/detail.vue
@@ -14,7 +14,6 @@ const formData = ref<InfraApiAccessLogApi.ApiAccessLog>();
 const [Descriptions] = useDescription({
   border: true,
   column: 1,
-  labelWidth: 110,
   schema: useDetailSchema(),
 });
 
diff --git a/apps/web-ele/src/views/infra/apiErrorLog/modules/detail.vue b/apps/web-ele/src/views/infra/apiErrorLog/modules/detail.vue
index bfe5fbd23..705cfdcd0 100644
--- a/apps/web-ele/src/views/infra/apiErrorLog/modules/detail.vue
+++ b/apps/web-ele/src/views/infra/apiErrorLog/modules/detail.vue
@@ -14,7 +14,6 @@ const formData = ref<InfraApiErrorLogApi.ApiErrorLog>();
 const [Descriptions] = useDescription({
   border: true,
   column: 1,
-  labelWidth: 110,
   schema: useDetailSchema(),
 });
 
diff --git a/apps/web-ele/src/views/infra/job/logger/modules/detail.vue b/apps/web-ele/src/views/infra/job/logger/modules/detail.vue
index 5a5e7a7ad..3fd440e47 100644
--- a/apps/web-ele/src/views/infra/job/logger/modules/detail.vue
+++ b/apps/web-ele/src/views/infra/job/logger/modules/detail.vue
@@ -13,8 +13,8 @@ import { useDetailSchema } from '../data';
 const formData = ref<InfraJobLogApi.JobLog>();
 
 const [Descriptions] = useDescription({
+  border: true,
   column: 1,
-  labelWidth: 140,
   schema: useDetailSchema(),
 });
 
diff --git a/apps/web-ele/src/views/infra/job/modules/detail.vue b/apps/web-ele/src/views/infra/job/modules/detail.vue
index 01528a091..4774573d1 100644
--- a/apps/web-ele/src/views/infra/job/modules/detail.vue
+++ b/apps/web-ele/src/views/infra/job/modules/detail.vue
@@ -16,7 +16,6 @@ const nextTimes = ref<Date[]>([]); // 下一次执行时间
 const [Descriptions] = useDescription({
   border: true,
   column: 1,
-  labelWidth: 140,
   schema: useDetailSchema(),
 });
 
diff --git a/apps/web-ele/src/views/mall/home/modules/operation-data-card.vue b/apps/web-ele/src/views/mall/home/modules/operation-data-card.vue
index 4f6354bfe..4e98089db 100644
--- a/apps/web-ele/src/views/mall/home/modules/operation-data-card.vue
+++ b/apps/web-ele/src/views/mall/home/modules/operation-data-card.vue
@@ -95,9 +95,9 @@ onActivated(() => {
 
 /** 初始化 */
 onMounted(() => {
-  getOrderData();
-  getProductData();
-  getWalletRechargeData();
+  loadOrderData();
+  loadProductData();
+  loadWalletRechargeData();
 });
 </script>
 
diff --git a/apps/web-ele/src/views/mall/home/modules/shortcut-card.vue b/apps/web-ele/src/views/mall/home/modules/shortcut-card.vue
index 8bd97d6e8..0e5be2b90 100644
--- a/apps/web-ele/src/views/mall/home/modules/shortcut-card.vue
+++ b/apps/web-ele/src/views/mall/home/modules/shortcut-card.vue
@@ -14,7 +14,7 @@ const router = useRouter();
 const menuList = [
   {
     name: '用户管理',
-    icon: 'ep:user-filled',
+    icon: 'lucide:user',
     bgColor: 'bg-red-400',
     routerName: 'MemberUser',
   },
@@ -26,7 +26,7 @@ const menuList = [
   },
   {
     name: '订单管理',
-    icon: 'ep:list',
+    icon: 'lucide:list',
     bgColor: 'bg-yellow-500',
     routerName: 'TradeOrder',
   },
@@ -44,13 +44,13 @@ const menuList = [
   },
   {
     name: '优惠券',
-    icon: 'ep:ticket',
+    icon: 'lucide:ticket',
     bgColor: 'bg-blue-500',
     routerName: 'PromotionCoupon',
   },
   {
     name: '拼团活动',
-    icon: 'fa:group',
+    icon: 'lucide:users',
     bgColor: 'bg-purple-500',
     routerName: 'PromotionBargainActivity',
   },
diff --git a/apps/web-ele/src/views/mall/product/brand/index.vue b/apps/web-ele/src/views/mall/product/brand/index.vue
index 664c0c072..60c169b2b 100644
--- a/apps/web-ele/src/views/mall/product/brand/index.vue
+++ b/apps/web-ele/src/views/mall/product/brand/index.vue
@@ -40,7 +40,7 @@ async function handleDelete(row: MallBrandApi.Brand) {
   });
   try {
     await deleteBrand(row.id!);
-    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
     handleRefresh();
   } finally {
     loadingInstance.close();
diff --git a/apps/web-ele/src/views/mall/product/spu/components/index.ts b/apps/web-ele/src/views/mall/product/spu/components/index.ts
new file mode 100644
index 000000000..122cbcea0
--- /dev/null
+++ b/apps/web-ele/src/views/mall/product/spu/components/index.ts
@@ -0,0 +1,3 @@
+export { default as SkuTableSelect } from './sku-table-select.vue';
+export { default as SpuShowcase } from './spu-showcase.vue';
+export { default as SpuTableSelect } from './spu-table-select.vue';
diff --git a/apps/web-ele/src/views/mall/product/spu/components/sku-table-select.vue b/apps/web-ele/src/views/mall/product/spu/components/sku-table-select.vue
new file mode 100644
index 000000000..11f9f887d
--- /dev/null
+++ b/apps/web-ele/src/views/mall/product/spu/components/sku-table-select.vue
@@ -0,0 +1,123 @@
+<!-- SKU 选择弹窗组件 -->
+<script lang="ts" setup>
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import type { MallSpuApi } from '#/api/mall/product/spu';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { fenToYuan } from '@vben/utils';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getSpu } from '#/api/mall/product/spu';
+
+interface SpuData {
+  spuId: number;
+}
+
+const emit = defineEmits<{
+  change: [sku: MallSpuApi.Sku];
+}>();
+
+const spuId = ref<number>();
+
+/** 表格列配置 */
+const gridColumns = computed<VxeGridProps['columns']>(() => [
+  {
+    type: 'radio',
+    width: 55,
+  },
+  {
+    field: 'picUrl',
+    title: '图片',
+    width: 100,
+    align: 'center',
+    cellRender: {
+      name: 'CellImage',
+    },
+  },
+  {
+    field: 'properties',
+    title: '规格',
+    minWidth: 120,
+    align: 'center',
+    formatter: ({ cellValue }) => {
+      return (
+        cellValue?.map((p: MallSpuApi.Property) => p.valueName)?.join(' ') ||
+        '-'
+      );
+    },
+  },
+  {
+    field: 'price',
+    title: '销售价(元)',
+    width: 120,
+    align: 'center',
+    formatter: ({ cellValue }) => {
+      return fenToYuan(cellValue);
+    },
+  },
+]);
+
+/** 处理选中 */
+function handleRadioChange() {
+  const selectedRow = gridApi.grid.getRadioRecord() as MallSpuApi.Sku;
+  if (selectedRow) {
+    emit('change', selectedRow);
+    modalApi.close();
+  }
+}
+
+// TODO @芋艿：要不要直接非 pager？
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: gridColumns.value,
+    height: 400,
+    border: true,
+    showOverflow: true,
+    radioConfig: {
+      reserve: true,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async () => {
+          if (!spuId.value) {
+            return { list: [], total: 0 };
+          }
+          const spu = await getSpu(spuId.value);
+          return {
+            list: spu.skus || [],
+            total: spu.skus?.length || 0,
+          };
+        },
+      },
+    },
+  },
+  gridEvents: {
+    radioChange: handleRadioChange,
+  },
+});
+
+const [Modal, modalApi] = useVbenModal({
+  destroyOnClose: true,
+  onOpenChange: async (isOpen: boolean) => {
+    if (!isOpen) {
+      gridApi.grid.clearRadioRow();
+      spuId.value = undefined;
+      return;
+    }
+    const data = modalApi.getData<SpuData>();
+    if (!data?.spuId) {
+      return;
+    }
+    spuId.value = data.spuId;
+    await gridApi.query();
+  },
+});
+</script>
+
+<template>
+  <Modal class="w-[700px]" title="选择规格">
+    <Grid />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/mall/product/spu/components/spu-showcase.vue b/apps/web-ele/src/views/mall/product/spu/components/spu-showcase.vue
new file mode 100644
index 000000000..05568e5b0
--- /dev/null
+++ b/apps/web-ele/src/views/mall/product/spu/components/spu-showcase.vue
@@ -0,0 +1,142 @@
+<!-- 商品橱窗组件：用于展示和选择商品 SPU -->
+<script lang="ts" setup>
+import type { MallSpuApi } from '#/api/mall/product/spu';
+
+import { computed, ref, watch } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { ElImage, ElTooltip } from 'element-plus';
+
+import { getSpuDetailList } from '#/api/mall/product/spu';
+
+import SpuTableSelect from './spu-table-select.vue';
+
+interface SpuShowcaseProps {
+  modelValue?: number | number[];
+  limit?: number;
+  disabled?: boolean;
+}
+
+const props = withDefaults(defineProps<SpuShowcaseProps>(), {
+  modelValue: undefined,
+  limit: Number.MAX_VALUE,
+  disabled: false,
+});
+
+const emit = defineEmits(['update:modelValue', 'change']);
+
+const productSpus = ref<MallSpuApi.Spu[]>([]); // 已选择的商品列表
+const spuTableSelectRef = ref<InstanceType<typeof SpuTableSelect>>(); // 商品选择表格组件引用
+const isMultiple = computed(() => props.limit !== 1); // 是否为多选模式
+
+/** 计算是否可以添加 */
+const canAdd = computed(() => {
+  if (props.disabled) {
+    return false;
+  }
+  if (!props.limit) {
+    return true;
+  }
+  return productSpus.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) {
+      productSpus.value = [];
+      return;
+    }
+    // 只有商品发生变化时才重新查询
+    if (
+      productSpus.value.length === 0 ||
+      productSpus.value.some((spu) => !ids.includes(spu.id!))
+    ) {
+      productSpus.value = await getSpuDetailList(ids);
+    }
+  },
+  { immediate: true },
+);
+
+/** 打开商品选择对话框 */
+function handleOpenSpuSelect() {
+  spuTableSelectRef.value?.open(productSpus.value);
+}
+
+/** 选择商品后触发 */
+function handleSpuSelected(spus: MallSpuApi.Spu | MallSpuApi.Spu[]) {
+  productSpus.value = Array.isArray(spus) ? spus : [spus];
+  emitSpuChange();
+}
+
+/** 删除商品 */
+function handleRemoveSpu(index: number) {
+  productSpus.value.splice(index, 1);
+  emitSpuChange();
+}
+
+/** 触发变更事件 */
+function emitSpuChange() {
+  if (props.limit === 1) {
+    const spu = productSpus.value.length > 0 ? productSpus.value[0] : null;
+    emit('update:modelValue', spu?.id || 0);
+    emit('change', spu);
+  } else {
+    emit(
+      'update:modelValue',
+      productSpus.value.map((spu) => spu.id!),
+    );
+    emit('change', productSpus.value);
+  }
+}
+</script>
+
+<template>
+  <div class="flex flex-wrap items-center gap-2">
+    <!-- 已选商品列表 -->
+    <div
+      v-for="(spu, index) in productSpus"
+      :key="spu.id"
+      class="group relative h-[60px] w-[60px] overflow-hidden rounded-lg"
+    >
+      <ElTooltip :content="spu.name">
+        <div class="relative h-full w-full">
+          <ElImage
+            :src="spu.picUrl"
+            class="h-full w-full rounded-lg object-cover"
+            :preview-src-list="[spu.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="handleRemoveSpu(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="handleOpenSpuSelect"
+      >
+        <IconifyIcon icon="ep:plus" class="text-xl text-gray-400" />
+      </div>
+    </ElTooltip>
+  </div>
+
+  <!-- 商品选择对话框 -->
+  <SpuTableSelect
+    ref="spuTableSelectRef"
+    :multiple="isMultiple"
+    @change="handleSpuSelected"
+  />
+</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
new file mode 100644
index 000000000..e97de6b6c
--- /dev/null
+++ b/apps/web-ele/src/views/mall/product/spu/components/spu-table-select.vue
@@ -0,0 +1,219 @@
+<!-- SPU 商品选择弹窗组件 -->
+<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 { MallSpuApi } from '#/api/mall/product/spu';
+
+import { computed, onMounted, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { handleTree } from '@vben/utils';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getCategoryList } from '#/api/mall/product/category';
+import { getSpuPage } from '#/api/mall/product/spu';
+import { getRangePickerDefaultProps } from '#/utils';
+
+interface SpuTableSelectProps {
+  multiple?: boolean; // 是否单选：true - checkbox；false - radio
+}
+
+const props = withDefaults(defineProps<SpuTableSelectProps>(), {
+  multiple: false,
+});
+
+const emit = defineEmits<{
+  change: [spu: MallSpuApi.Spu | MallSpuApi.Spu[]];
+}>();
+
+const categoryList = ref<MallCategoryApi.Category[]>([]); // 分类列表
+const categoryTreeList = ref<any[]>([]); // 分类树
+
+/** 单选：处理选中变化 */
+function handleRadioChange() {
+  const selectedRow = gridApi.grid.getRadioRecord() as MallSpuApi.Spu;
+  if (selectedRow) {
+    emit('change', selectedRow);
+    modalApi.close();
+  }
+}
+
+/** 搜索表单 Schema */
+const formSchema = computed<VbenFormSchema[]>(() => [
+  {
+    fieldName: 'name',
+    label: '商品名称',
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入商品名称',
+      clearable: true,
+    },
+  },
+  {
+    fieldName: 'categoryId',
+    label: '商品分类',
+    component: 'ApiTreeSelect',
+    componentProps: {
+      options: categoryTreeList,
+      props: { label: 'name', children: 'children' },
+      nodeKey: 'id',
+      placeholder: '请选择商品分类',
+      clearable: true,
+    },
+  },
+  {
+    fieldName: 'createTime',
+    label: '创建时间',
+    component: 'RangePicker',
+    componentProps: {
+      ...getRangePickerDefaultProps(),
+      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: 'name',
+      title: '商品名称',
+      minWidth: 200,
+    },
+    {
+      field: 'categoryId',
+      title: '商品分类',
+      minWidth: 120,
+      formatter: ({ cellValue }) => {
+        const category = categoryList.value?.find((c) => c.id === cellValue);
+        return category?.name || '-';
+      },
+    },
+  );
+  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 getSpuPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            tabType: 0,
+            ...formValues,
+          });
+        },
+      },
+    },
+  },
+  gridEvents: {
+    radioChange: handleRadioChange,
+  },
+});
+
+const [Modal, modalApi] = useVbenModal({
+  destroyOnClose: true,
+  showConfirmButton: props.multiple, // 特殊：radio 单选情况下，走 handleRadioChange 处理。
+  onConfirm: () => {
+    const selectedRows = gridApi.grid.getCheckboxRecords() as MallSpuApi.Spu[];
+    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<MallSpuApi.Spu | MallSpuApi.Spu[]>();
+    if (props.multiple && Array.isArray(data) && data.length > 0) {
+      setTimeout(() => {
+        const tableData = gridApi.grid.getTableData().fullData;
+        data.forEach((spu) => {
+          const row = tableData.find(
+            (item: MallSpuApi.Spu) => item.id === spu.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: MallSpuApi.Spu) => item.id === data.id,
+        );
+        if (row) {
+          gridApi.grid.setRadioRow(row);
+        }
+      }, 300);
+    }
+  },
+});
+
+/** 对外暴露的方法 */
+defineExpose({
+  open: (data?: MallSpuApi.Spu | MallSpuApi.Spu[]) => {
+    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/product/spu/data.ts b/apps/web-ele/src/views/mall/product/spu/data.ts
index 1037fa4f3..f667c6948 100644
--- a/apps/web-ele/src/views/mall/product/spu/data.ts
+++ b/apps/web-ele/src/views/mall/product/spu/data.ts
@@ -7,8 +7,6 @@ import { handleTree } from '@vben/utils';
 import { getCategoryList } from '#/api/mall/product/category';
 import { getRangePickerDefaultProps } from '#/utils';
 
-// TODO @霖：所有 mall 的 search 少了，请输入 xxx；表单也是类似
-
 /** 列表的搜索表单 */
 export function useGridFormSchema(): VbenFormSchema[] {
   return [
diff --git a/apps/web-ele/src/views/mall/promotion/banner/data.ts b/apps/web-ele/src/views/mall/promotion/banner/data.ts
index 37f5ac085..fe053472c 100644
--- a/apps/web-ele/src/views/mall/promotion/banner/data.ts
+++ b/apps/web-ele/src/views/mall/promotion/banner/data.ts
@@ -141,7 +141,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
       cellRender: {
         name: 'CellDict',
         props: {
-          dictType: DICT_TYPE.COMMON_STATUS,
+          type: DICT_TYPE.COMMON_STATUS,
         },
       },
     },
@@ -152,7 +152,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
       cellRender: {
         name: 'CellDict',
         props: {
-          dictType: DICT_TYPE.PROMOTION_BANNER_POSITION,
+          type: DICT_TYPE.PROMOTION_BANNER_POSITION,
         },
       },
     },
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/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..b94c10f7c 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
@@ -169,9 +169,7 @@ const handleSliderChange = (prop: string) => {
                 class="mb-0 w-full"
               >
                 <ElSlider
-                  v-model="
-                    formData[data.prop as keyof ComponentStyle] as number
-                  "
+                  v-model="formData[data.prop]"
                   :max="100"
                   :min="0"
                   show-input
@@ -197,4 +195,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-container.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/component-container.vue
index f5696f8a3..a0321879d 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/component-container.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/component-container.vue
@@ -93,15 +93,11 @@ const handleDeleteComponent = () => {
 };
 </script>
 <template>
-  <div class="component" :class="[{ active }]">
-    <div
-      :style="{
-        ...style,
-      }"
-    >
+  <div class="component relative cursor-move" :class="[{ active }]">
+    <div :style="style">
       <component :is="component.id" :property="component.property" />
     </div>
-    <div class="component-wrap">
+    <div class="component-wrap absolute left-[-2px] top-0 block h-full w-full">
       <!-- 左侧：组件名（悬浮的小贴条） -->
       <div class="component-name" v-if="component.name">
         {{ component.name }}
@@ -150,19 +146,8 @@ $hover-border-width: 1px;
 $name-position: -85px;
 $toolbar-position: -55px;
 
-/* 组件 */
 .component {
-  position: relative;
-  cursor: move;
-
   .component-wrap {
-    position: absolute;
-    top: 0;
-    left: -$active-border-width;
-    display: block;
-    width: 100%;
-    height: 100%;
-
     /* 鼠标放到组件上时 */
     &:hover {
       border: $hover-border-width dashed var(--el-color-primary);
@@ -228,7 +213,7 @@ $toolbar-position: -55px;
     }
   }
 
-  /* 组件选中时 */
+  /* 选中状态 */
   &.active {
     margin-bottom: 4px;
 
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..2d73bfc58 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
@@ -61,7 +61,10 @@ const handleCloneComponent = (component: DiyComponent<any>) => {
 </script>
 
 <template>
-  <ElAside class="editor-left" width="261px">
+  <ElAside
+    class="editor-left z-[1] shrink-0 select-none shadow-[8px_0_8px_-8px_rgb(0_0_0/0.12)]"
+    width="261px"
+  >
     <ElScrollbar>
       <ElCollapse v-model="extendGroups">
         <ElCollapseItem
@@ -71,7 +74,7 @@ const handleCloneComponent = (component: DiyComponent<any>) => {
           :title="group.name"
         >
           <draggable
-            class="component-container"
+            class="flex flex-wrap items-center"
             ghost-class="draggable-ghost"
             item-key="index"
             :list="group.components"
@@ -79,13 +82,22 @@ 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>
-                <div class="drag-placement">组件放置区域</div>
-                <div class="component">
-                  <IconifyIcon :icon="element.icon" :size="32" />
+                <div class="hidden text-white">组件放置区域</div>
+                <div
+                  class="component flex h-[86px] w-[86px] cursor-move flex-col items-center justify-center border-b border-r [&:nth-of-type(3n)]:border-r-0"
+                  :style="{
+                    borderColor: 'var(--el-border-color-lighter)',
+                  }"
+                >
+                  <IconifyIcon
+                    :icon="element.icon"
+                    :size="32"
+                    class="mb-1 text-gray-500"
+                  />
                   <span class="mt-1 text-xs">{{ element.name }}</span>
                 </div>
               </div>
@@ -99,11 +111,6 @@ const handleCloneComponent = (component: DiyComponent<any>) => {
 
 <style scoped lang="scss">
 .editor-left {
-  z-index: 1;
-  flex-shrink: 0;
-  user-select: none;
-  box-shadow: 8px 0 8px -8px rgb(0 0 0 / 12%);
-
   :deep(.el-collapse) {
     border-top: none;
   }
@@ -124,51 +131,19 @@ const handleCloneComponent = (component: DiyComponent<any>) => {
     border-bottom: none;
   }
 
-  .component-container {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    width: 261px;
-  }
-
-  .component {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    width: 86px;
-    height: 86px;
-    cursor: move;
-    border-right: 1px solid var(--el-border-color-lighter);
-    border-bottom: 1px solid var(--el-border-color-lighter);
-
-    .el-icon {
-      margin-bottom: 4px;
-      color: gray;
-    }
-  }
-
+  /* 组件 hover 和 active 状态（需要 CSS 变量） */
   .component.active,
   .component:hover {
     color: var(--el-color-white);
     background: var(--el-color-primary);
 
-    .el-icon {
+    :deep(.iconify) {
       color: var(--el-color-white);
     }
   }
-
-  .component:nth-of-type(3n) {
-    border-right: none;
-  }
-}
-
-/* 拖拽占位提示，默认不显示 */
-.drag-placement {
-  display: none;
-  color: #fff;
 }
 
+/* 拖拽区域全局样式 */
 .drag-area {
   /* 拖拽到手机区域时的样式 */
   .draggable-ghost {
@@ -204,14 +179,12 @@ const handleCloneComponent = (component: DiyComponent<any>) => {
       background: #5487df;
     }
 
-    /* 拖拽时隐藏组件 */
     .component {
-      display: none;
+      display: none; /* 拖拽时隐藏组件 */
     }
 
-    /* 拖拽时显示占位提示 */
-    .drag-placement {
-      display: block;
+    .hidden {
+      display: block !important; /* 拖拽时显示占位提示 */
     }
   }
 }
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..73e559358 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>
@@ -131,5 +141,3 @@ const formData = useVModel(props, 'modelValue', emit);
     </ElForm>
   </ComponentContainerProperty>
 </template>
-
-<style scoped lang="scss"></style>
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..7a5986658 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
@@ -56,33 +56,15 @@ function handleToggleFab() {
     <ElButton type="primary" size="large" circle @click="handleToggleFab">
       <IconifyIcon
         icon="ep:plus"
-        class="fab-icon"
-        :class="[{ active: expanded }]"
+        class="transition-transform duration-300"
+        :class="expanded ? 'rotate-[135deg]' : 'rotate-0'"
       />
     </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;
-
-  &.active {
-    transform: rotate(135deg);
-  }
-}
-</style>
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..7c4fda25b 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="group 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="absolute right-0 top-0 hidden cursor-pointer rounded-bl-[80%] p-[2px_2px_6px_6px] text-right text-white group-hover:block"
+          :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>
@@ -236,49 +240,3 @@ const handleAppLinkChange = (appLink: AppLink) => {
     @app-link-change="handleAppLinkChange"
   />
 </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%;
-  }
-
-  .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;
-    }
-  }
-}
-</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/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-grid/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/config.ts
index db6b55264..0bf47b15d 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/config.ts
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/config.ts
@@ -4,41 +4,28 @@ import { cloneDeep } from '@vben/utils';
 
 /** 宫格导航属性 */
 export interface MenuGridProperty {
-  // 列数
-  column: number;
-  // 导航菜单列表
-  list: MenuGridItemProperty[];
-  // 组件样式
-  style: ComponentStyle;
+  column: number; // 列数
+  list: MenuGridItemProperty[]; // 导航菜单列表
+  style: ComponentStyle; // 组件样式
 }
 
 /** 宫格导航项目属性 */
 export interface MenuGridItemProperty {
-  // 图标链接
-  iconUrl: string;
-  // 标题
-  title: string;
-  // 标题颜色
-  titleColor: string;
-  // 副标题
-  subtitle: string;
-  // 副标题颜色
-  subtitleColor: string;
-  // 链接
-  url: string;
-  // 角标
+  iconUrl: string; // 图标链接
+  title: string; // 标题
+  titleColor: string; // 标题颜色
+  subtitle: string; // 副标题
+  subtitleColor: string; // 副标题颜色
+  url: string; // 链接
   badge: {
-    // 角标背景颜色
-    bgColor: string;
-    // 是否显示
-    show: boolean;
-    // 角标文字
-    text: string;
-    // 角标文字颜色
-    textColor: string;
+    bgColor: string; // 角标背景颜色
+    show: boolean; // 是否显示
+    text: string; // 角标文字
+    textColor: string; // 角标文字颜色
   };
 }
 
+/** 宫格导航项目默认属性 */
 export const EMPTY_MENU_GRID_ITEM_PROPERTY = {
   title: '标题',
   titleColor: '#333',
@@ -51,7 +38,7 @@ export const EMPTY_MENU_GRID_ITEM_PROPERTY = {
   },
 } as MenuGridItemProperty;
 
-// 定义组件
+/** 定义组件 */
 export const component = {
   id: 'MenuGrid',
   name: '宫格导航',
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/index.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/index.vue
index 2036ede96..1e14dc158 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/index.vue
@@ -5,6 +5,7 @@ import { ElImage } from 'element-plus';
 
 /** 宫格导航 */
 defineOptions({ name: 'MenuGrid' });
+
 defineProps<{ property: MenuGridProperty }>();
 </script>
 
@@ -16,7 +17,6 @@ defineProps<{ property: MenuGridProperty }>();
       class="relative flex flex-col items-center pb-3.5 pt-5"
       :style="{ width: `${100 * (1 / property.column)}%` }"
     >
-      <!-- 右上角角标 -->
       <span
         v-if="item.badge?.show"
         class="absolute left-1/2 top-2.5 z-10 h-5 rounded-full px-1.5 text-center text-xs leading-5"
@@ -43,5 +43,3 @@ defineProps<{ property: MenuGridProperty }>();
     </div>
   </div>
 </template>
-
-<style scoped lang="scss"></style>
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/property.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/property.vue
index 9db7ac2ad..19b4fc814 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/property.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/property.vue
@@ -12,7 +12,12 @@ import {
 } from 'element-plus';
 
 import UploadImg from '#/components/upload/image-upload.vue';
-import { AppLinkInput, Draggable } from '#/views/mall/promotion/components';
+import {
+  AppLinkInput,
+  ColorInput,
+  Draggable,
+  InputWithColor,
+} from '#/views/mall/promotion/components';
 
 import ComponentContainerProperty from '../../component-container-property.vue';
 import { EMPTY_MENU_GRID_ITEM_PROPERTY } from './config';
@@ -21,7 +26,9 @@ import { EMPTY_MENU_GRID_ITEM_PROPERTY } from './config';
 defineOptions({ name: 'MenuGridProperty' });
 
 const props = defineProps<{ modelValue: MenuGridProperty }>();
+
 const emit = defineEmits(['update:modelValue']);
+
 const formData = useVModel(props, 'modelValue', emit);
 </script>
 
@@ -35,7 +42,6 @@ const formData = useVModel(props, 'modelValue', emit);
           <ElRadio :value="4">4个</ElRadio>
         </ElRadioGroup>
       </ElFormItem>
-
       <ElCard header="菜单设置" class="property-group" shadow="never">
         <Draggable
           v-model="formData.list"
@@ -87,5 +93,3 @@ const formData = useVModel(props, 'modelValue', emit);
     </ElForm>
   </ComponentContainerProperty>
 </template>
-
-<style scoped lang="scss"></style>
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-list/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-list/config.ts
index 6567c553d..375546ae3 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-list/config.ts
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-list/config.ts
@@ -4,28 +4,21 @@ import { cloneDeep } from '@vben/utils';
 
 /** 列表导航属性 */
 export interface MenuListProperty {
-  // 导航菜单列表
-  list: MenuListItemProperty[];
-  // 组件样式
-  style: ComponentStyle;
+  list: MenuListItemProperty[]; // 导航菜单列表
+  style: ComponentStyle; // 组件样式
 }
 
 /** 列表导航项目属性 */
 export interface MenuListItemProperty {
-  // 图标链接
-  iconUrl: string;
-  // 标题
-  title: string;
-  // 标题颜色
-  titleColor: string;
-  // 副标题
-  subtitle: string;
-  // 副标题颜色
-  subtitleColor: string;
-  // 链接
-  url: string;
+  iconUrl: string; // 图标链接
+  title: string; // 标题
+  titleColor: string; // 标题颜色
+  subtitle: string; // 副标题
+  subtitleColor: string; // 副标题颜色
+  url: string; // 链接
 }
 
+/** 空的列表导航项目属性 */
 export const EMPTY_MENU_LIST_ITEM_PROPERTY = {
   title: '标题',
   titleColor: '#333',
@@ -33,7 +26,7 @@ export const EMPTY_MENU_LIST_ITEM_PROPERTY = {
   subtitleColor: '#bbb',
 };
 
-// 定义组件
+/** 定义组件 */
 export const component = {
   id: 'MenuList',
   name: '列表导航',
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 12670dcb0..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
@@ -7,6 +7,7 @@ import { ElImage } from 'element-plus';
 
 /** 列表导航 */
 defineOptions({ name: 'MenuList' });
+
 defineProps<{ property: MenuListProperty }>();
 </script>
 
@@ -15,26 +16,20 @@ 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" />
-        <span class="text-base" :style="{ color: item.titleColor }">{{
-          item.title
-        }}</span>
+        <span class="text-base" :style="{ color: item.titleColor }">
+          {{ item.title }}
+        </span>
       </div>
       <div class="item-center flex flex-row justify-center gap-1">
-        <span class="text-xs" :style="{ color: item.subtitleColor }">{{
-          item.subtitle
-        }}</span>
+        <span class="text-xs" :style="{ color: item.subtitleColor }">
+          {{ item.subtitle }}
+        </span>
         <IconifyIcon icon="ep:arrow-right" color="#000" :size="16" />
       </div>
     </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/menu-list/property.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-list/property.vue
index c5b076936..2c5991501 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-list/property.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-list/property.vue
@@ -18,7 +18,9 @@ import { EMPTY_MENU_LIST_ITEM_PROPERTY } from './config';
 defineOptions({ name: 'MenuListProperty' });
 
 const props = defineProps<{ modelValue: MenuListProperty }>();
+
 const emit = defineEmits(['update:modelValue']);
+
 const formData = useVModel(props, 'modelValue', emit);
 </script>
 
@@ -26,8 +28,6 @@ const formData = useVModel(props, 'modelValue', emit);
   <ComponentContainerProperty v-model="formData.style">
     <ElText tag="p"> 菜单设置 </ElText>
     <ElText type="info" size="small"> 拖动左侧的小圆点可以调整顺序 </ElText>
-
-    <!-- 表单 -->
     <ElForm label-width="60px" :model="formData" class="mt-2">
       <Draggable
         v-model="formData.list"
@@ -64,5 +64,3 @@ const formData = useVModel(props, 'modelValue', emit);
     </ElForm>
   </ComponentContainerProperty>
 </template>
-
-<style scoped lang="scss"></style>
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-swiper/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-swiper/config.ts
index 27138ebee..fa83498c8 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-swiper/config.ts
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-swiper/config.ts
@@ -4,40 +4,28 @@ import { cloneDeep } from '@vben/utils';
 
 /** 菜单导航属性 */
 export interface MenuSwiperProperty {
-  // 布局： 图标+文字 | 图标
-  layout: 'icon' | 'iconText';
-  // 行数
-  row: number;
-  // 列数
-  column: number;
-  // 导航菜单列表
-  list: MenuSwiperItemProperty[];
-  // 组件样式
-  style: ComponentStyle;
-}
-/** 菜单导航项目属性 */
-export interface MenuSwiperItemProperty {
-  // 图标链接
-  iconUrl: string;
-  // 标题
-  title: string;
-  // 标题颜色
-  titleColor: string;
-  // 链接
-  url: string;
-  // 角标
-  badge: {
-    // 角标背景颜色
-    bgColor: string;
-    // 是否显示
-    show: boolean;
-    // 角标文字
-    text: string;
-    // 角标文字颜色
-    textColor: string;
-  };
+  layout: 'icon' | 'iconText'; // 布局：图标+文字 | 图标
+  row: number; // 行数
+  column: number; // 列数
+  list: MenuSwiperItemProperty[]; // 导航菜单列表
+  style: ComponentStyle; // 组件样式
 }
 
+/** 菜单导航项目属性 */
+export interface MenuSwiperItemProperty {
+  iconUrl: string; // 图标链接
+  title: string; // 标题
+  titleColor: string; // 标题颜色
+  url: string; // 链接
+  badge: {
+    bgColor: string; // 角标背景颜色
+    show: boolean; // 是否显示
+    text: string; // 角标文字
+    textColor: string; // 角标文字颜色
+  }; // 角标
+}
+
+/** 空菜单导航项目属性 */
 export const EMPTY_MENU_SWIPER_ITEM_PROPERTY = {
   title: '标题',
   titleColor: '#333',
@@ -48,7 +36,7 @@ export const EMPTY_MENU_SWIPER_ITEM_PROPERTY = {
   },
 } as MenuSwiperItemProperty;
 
-// 定义组件
+/** 定义组件 */
 export const component = {
   id: 'MenuSwiper',
   name: '菜单导航',
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-swiper/index.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-swiper/index.vue
index 0d69c7c86..fb4304522 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-swiper/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-swiper/index.vue
@@ -7,22 +7,19 @@ import { ElCarousel, ElCarouselItem, ElImage } from 'element-plus';
 
 /** 菜单导航 */
 defineOptions({ name: 'MenuSwiper' });
-const props = defineProps<{ property: MenuSwiperProperty }>();
-// 标题的高度
-const TITLE_HEIGHT = 20;
-// 图标的高度
-const ICON_SIZE = 32;
-// 垂直间距：一行上下的间距
-const SPACE_Y = 16;
 
-// 分页
-const pages = ref<MenuSwiperItemProperty[][]>([]);
-// 轮播图高度
-const carouselHeight = ref(0);
-// 行高
-const rowHeight = ref(0);
-// 列宽
-const columnWidth = ref('');
+const props = defineProps<{ property: MenuSwiperProperty }>();
+
+const TITLE_HEIGHT = 20; // 标题的高度
+const ICON_SIZE = 32; // 图标的高度
+const SPACE_Y = 16; // 垂直间距：一行上下的间距
+
+const pages = ref<MenuSwiperItemProperty[][]>([]); // 分页
+const carouselHeight = ref(0); // 轮播图高度
+
+const rowHeight = ref(0); // 行高
+const columnWidth = ref(''); // 列宽
+
 watch(
   () => props.property,
   () => {
@@ -75,9 +72,7 @@ watch(
           class="relative flex flex-col items-center justify-center"
           :style="{ width: columnWidth, height: `${rowHeight}px` }"
         >
-          <!-- 图标 + 角标 -->
           <div class="relative" :class="`h-${ICON_SIZE}px w-${ICON_SIZE}px`">
-            <!-- 右上角角标 -->
             <span
               v-if="item.badge?.show"
               class="absolute -right-2.5 -top-2.5 z-10 h-5 rounded-[10px] px-1.5 text-center text-xs leading-5"
@@ -94,7 +89,6 @@ watch(
               class="h-full w-full"
             />
           </div>
-          <!-- 标题 -->
           <span
             v-if="property.layout === 'iconText'"
             class="text-xs"
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-swiper/property.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-swiper/property.vue
index 54f58eae5..eaafa4f8e 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-swiper/property.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/menu-swiper/property.vue
@@ -28,13 +28,14 @@ import { EMPTY_MENU_SWIPER_ITEM_PROPERTY } from './config';
 defineOptions({ name: 'MenuSwiperProperty' });
 
 const props = defineProps<{ modelValue: MenuSwiperProperty }>();
+
 const emit = defineEmits(['update:modelValue']);
+
 const formData = useVModel(props, 'modelValue', emit);
 </script>
 
 <template>
   <ComponentContainerProperty v-model="formData.style">
-    <!-- 表单 -->
     <ElForm label-width="80px" :model="formData" class="mt-2">
       <ElFormItem label="布局" prop="layout">
         <ElRadioGroup v-model="formData.layout">
@@ -55,7 +56,6 @@ const formData = useVModel(props, 'modelValue', emit);
           <ElRadio :value="5">5列</ElRadio>
         </ElRadioGroup>
       </ElFormItem>
-
       <ElCard header="菜单设置" class="property-group" shadow="never">
         <Draggable
           v-model="formData.list"
@@ -101,5 +101,3 @@ const formData = useVModel(props, 'modelValue', emit);
     </ElForm>
   </ComponentContainerProperty>
 </template>
-
-<style scoped lang="scss"></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 585a0f0a7..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';
@@ -22,7 +25,7 @@ import {
   MagicCubeEditor,
 } from '#/views/mall/promotion/components';
 
-// 导航栏属性面板
+/** 导航栏单元格属性面板 */
 defineOptions({ name: 'NavigationBarCellProperty' });
 
 const props = defineProps({
@@ -35,42 +38,44 @@ const props = defineProps({
     default: () => [],
   },
 });
+
 const emit = defineEmits(['update:modelValue']);
+
 const cellList = useVModel(props, 'modelValue', emit);
 
-// 单元格数量：小程序6个（右侧胶囊按钮占了2个），其它平台8个
+/**
+ * 计算单元格数量
+ * 1. 小程序：6 个（因为右侧有胶囊按钮占据 2 个格子的空间）
+ * 2. 其它平台：8 个（全部空间可用）
+ */
 const cellCount = computed(() => (props.isMp ? 6 : 8));
 
-// 转换为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); // 选中的热区
 
-// 选中的热区
-const selectedHotAreaIndex = ref(0);
-const handleHotAreaSelected = (
+/** 处理热区被选中事件 */
+function handleHotAreaSelected(
   cellValue: NavigationBarCellProperty,
   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"
@@ -87,7 +92,10 @@ const 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>
@@ -124,9 +132,32 @@ const 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"
@@ -141,5 +172,3 @@ const handleHotAreaSelected = (
     </template>
   </template>
 </template>
-
-<style lang="scss" scoped></style>
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 fd675b16e..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
@@ -2,56 +2,38 @@ import type { DiyComponent } from '../../../util';
 
 /** 顶部导航栏属性 */
 export interface NavigationBarProperty {
-  // 背景类型
-  bgType: 'color' | 'img';
-  // 背景颜色
-  bgColor: string;
-  // 图片链接
-  bgImg: string;
-  // 样式类型：默认 | 沉浸式
-  styleType: 'inner' | 'normal';
-  // 常驻显示
-  alwaysShow: boolean;
-  // 小程序单元格列表
-  mpCells: NavigationBarCellProperty[];
-  // 其它平台单元格列表
-  otherCells: NavigationBarCellProperty[];
-  // 本地变量
+  bgType: 'color' | 'img'; // 背景类型
+  bgColor: string; // 背景颜色
+  bgImg: string; // 图片链接
+  styleType: 'inner' | 'normal'; // 样式类型：默认 | 沉浸式
+  alwaysShow: boolean; // 常驻显示
+  mpCells: NavigationBarCellProperty[]; // 小程序单元格列表
+  otherCells: NavigationBarCellProperty[]; // 其它平台单元格列表
   _local: {
-    // 预览顶部导航（小程序）
-    previewMp: boolean;
-    // 预览顶部导航（非小程序）
-    previewOther: boolean;
-  };
+    previewMp: boolean; // 预览顶部导航（小程序）
+    previewOther: boolean; // 预览顶部导航（非小程序）
+  }; // 本地变量
 }
 
 /** 顶部导航栏 - 单元格 属性 */
 export interface NavigationBarCellProperty {
-  // 类型：文字 | 图片 | 搜索框
-  type: 'image' | 'search' | 'text';
-  // 宽度
-  width: number;
-  // 高度
-  height: number;
-  // 顶部位置
-  top: number;
-  // 左侧位置
-  left: number;
-  // 文字内容
-  text: string;
-  // 文字颜色
-  textColor: string;
-  // 图片地址
-  imgUrl: string;
-  // 图片链接
-  url: string;
-  // 搜索框：提示文字
-  placeholder: string;
-  // 搜索框：边框圆角半径
-  borderRadius: number;
+  type: 'image' | 'search' | 'text'; // 类型：文字 | 图片 | 搜索框
+  width: number; // 宽度
+  height: number; // 高度
+  top: number; // 顶部位置
+  left: number; // 左侧位置
+  text: string; // 文字内容
+  textColor: string; // 文字颜色
+  imgUrl: string; // 图片地址
+  url: string; // 图片链接
+  backgroundColor: string; // 搜索框：框体颜色
+  placeholder: string; // 搜索框：提示文字
+  placeholderPosition: string; // 搜索框：提示文字位置
+  showScan: boolean; // 搜索框：是否显示扫一扫
+  borderRadius: number; // 搜索框：边框圆角半径
 }
 
-// 定义组件
+/** 定义组件 */
 export const component = {
   id: 'NavigationBar',
   name: '顶部导航栏',
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 9e3b17a07..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
@@ -18,7 +18,7 @@ defineOptions({ name: 'NavigationBar' });
 
 const props = defineProps<{ property: NavigationBarProperty }>();
 
-// 背景
+/** 计算背景样式 */
 const bgStyle = computed(() => {
   const background =
     props.property.bgType === 'img' && props.property.bgImg
@@ -26,27 +26,31 @@ const bgStyle = computed(() => {
       : props.property.bgColor;
   return { background };
 });
-// 单元格列表
+
+/** 获取当前预览的单元格列表 */
 const cellList = computed(() =>
   props.property._local?.previewMp
     ? props.property.mpCells
     : props.property.otherCells,
 );
-// 单元格宽度
+
+/** 计算单元格宽度 */
 const cellWidth = computed(() => {
   return props.property._local?.previewMp
     ? (375 - 80 - 86) / 6
     : (375 - 90) / 8;
 });
-// 获得单元格样式
-const getCellStyle = (cell: NavigationBarCellProperty) => {
+
+/** 获取单元格样式 */
+function getCellStyle(cell: NavigationBarCellProperty) {
   return {
     width: `${cell.width * cellWidth.value + (cell.width - 1) * 10}px`,
     left: `${cell.left * cellWidth.value + (cell.left + 1) * 10}px`,
     position: 'absolute',
   } as StyleValue;
-};
-// 获得搜索框属性
+}
+
+/** 获取搜索框属性配置 */
 const getSearchProp = computed(() => (cell: NavigationBarCellProperty) => {
   return {
     height: 30,
@@ -57,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"
@@ -82,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/navigation-bar/property.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/property.vue
index ce3e3f698..9703be641 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/property.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/property.vue
@@ -2,19 +2,31 @@
 import type { NavigationBarProperty } from './config';
 
 import { useVModel } from '@vueuse/core';
+import {
+  ElCard,
+  ElCheckbox,
+  ElForm,
+  ElFormItem,
+  ElRadio,
+  ElRadioGroup,
+  ElTooltip,
+} from 'element-plus';
+
+import UploadImg from '#/components/upload/image-upload.vue';
+import { ColorInput } from '#/views/mall/promotion/components';
 
 import NavigationBarCellProperty from './components/cell-property.vue';
 
-// 导航栏属性面板
+/** 导航栏属性面板 */
 defineOptions({ name: 'NavigationBarProperty' });
+
 const props = defineProps<{ modelValue: NavigationBarProperty }>();
 
 const emit = defineEmits(['update:modelValue']);
 
-// 表单校验
 const rules = {
   name: [{ required: true, message: '请输入页面名称', trigger: 'blur' }],
-};
+}; // 表单校验
 
 const formData = useVModel(props, 'modelValue', emit);
 if (!formData.value._local) {
@@ -23,47 +35,47 @@ if (!formData.value._local) {
 </script>
 
 <template>
-  <el-form label-width="80px" :model="formData" :rules="rules">
-    <el-form-item label="样式" prop="styleType">
-      <el-radio-group v-model="formData!.styleType">
-        <el-radio value="normal">标准</el-radio>
-        <el-tooltip
+  <ElForm label-width="80px" :model="formData" :rules="rules">
+    <ElFormItem label="样式" prop="styleType">
+      <ElRadioGroup v-model="formData!.styleType">
+        <ElRadio value="normal">标准</ElRadio>
+        <ElTooltip
           content="沉侵式头部仅支持微信小程序、APP，建议页面第一个组件为图片展示类组件"
           placement="top"
         >
-          <el-radio value="inner">沉浸式</el-radio>
-        </el-tooltip>
-      </el-radio-group>
-    </el-form-item>
-    <el-form-item
+          <ElRadio value="inner">沉浸式</ElRadio>
+        </ElTooltip>
+      </ElRadioGroup>
+    </ElFormItem>
+    <ElFormItem
       label="常驻显示"
       prop="alwaysShow"
       v-if="formData.styleType === 'inner'"
     >
-      <el-radio-group v-model="formData!.alwaysShow">
-        <el-radio :value="false">关闭</el-radio>
-        <el-tooltip
+      <ElRadioGroup v-model="formData!.alwaysShow">
+        <ElRadio :value="false">关闭</ElRadio>
+        <ElTooltip
           content="常驻显示关闭后,头部小组件将在页面滑动时淡入"
           placement="top"
         >
-          <el-radio :value="true">开启</el-radio>
-        </el-tooltip>
-      </el-radio-group>
-    </el-form-item>
-    <el-form-item label="背景类型" prop="bgType">
-      <el-radio-group v-model="formData.bgType">
-        <el-radio value="color">纯色</el-radio>
-        <el-radio value="img">图片</el-radio>
-      </el-radio-group>
-    </el-form-item>
-    <el-form-item
+          <ElRadio :value="true">开启</ElRadio>
+        </ElTooltip>
+      </ElRadioGroup>
+    </ElFormItem>
+    <ElFormItem label="背景类型" prop="bgType">
+      <ElRadioGroup v-model="formData.bgType">
+        <ElRadio value="color">纯色</ElRadio>
+        <ElRadio value="img">图片</ElRadio>
+      </ElRadioGroup>
+    </ElFormItem>
+    <ElFormItem
       label="背景颜色"
       prop="bgColor"
       v-if="formData.bgType === 'color'"
     >
       <ColorInput v-model="formData.bgColor" />
-    </el-form-item>
-    <el-form-item label="背景图片" prop="bgImg" v-else>
+    </ElFormItem>
+    <ElFormItem label="背景图片" prop="bgImg" v-else>
       <div class="flex items-center">
         <UploadImg
           v-model="formData.bgImg"
@@ -74,44 +86,42 @@ if (!formData.value._local) {
         />
         <span class="mb-2 ml-2 text-xs text-gray-400">建议宽度：750</span>
       </div>
-    </el-form-item>
-    <el-card class="property-group" shadow="never">
+    </ElFormItem>
+    <ElCard class="property-group" shadow="never">
       <template #header>
         <div class="flex items-center justify-between">
           <span>内容（小程序）</span>
-          <el-form-item prop="_local.previewMp" class="mb-0">
-            <el-checkbox
+          <ElFormItem prop="_local.previewMp" class="mb-0">
+            <ElCheckbox
               v-model="formData._local.previewMp"
               @change="
                 formData._local.previewOther = !formData._local.previewMp
               "
             >
               预览
-            </el-checkbox>
-          </el-form-item>
+            </ElCheckbox>
+          </ElFormItem>
         </div>
       </template>
       <NavigationBarCellProperty v-model="formData.mpCells" is-mp />
-    </el-card>
-    <el-card class="property-group" shadow="never">
+    </ElCard>
+    <ElCard class="property-group" shadow="never">
       <template #header>
         <div class="flex items-center justify-between">
           <span>内容（非小程序）</span>
-          <el-form-item prop="_local.previewOther" class="mb-0">
-            <el-checkbox
+          <ElFormItem prop="_local.previewOther" class="mb-0">
+            <ElCheckbox
               v-model="formData._local.previewOther"
               @change="
                 formData._local.previewMp = !formData._local.previewOther
               "
             >
               预览
-            </el-checkbox>
-          </el-form-item>
+            </ElCheckbox>
+          </ElFormItem>
         </div>
       </template>
       <NavigationBarCellProperty v-model="formData.otherCells" :is-mp="false" />
-    </el-card>
-  </el-form>
+    </ElCard>
+  </ElForm>
 </template>
-
-<style scoped lang="scss"></style>
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/config.ts
index 2d4acffb2..d9b68333e 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/config.ts
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/config.ts
@@ -2,27 +2,20 @@ import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 公告栏属性 */
 export interface NoticeBarProperty {
-  // 图标地址
-  iconUrl: string;
-  // 公告内容列表
-  contents: NoticeContentProperty[];
-  // 背景颜色
-  backgroundColor: string;
-  // 文字颜色
-  textColor: string;
-  // 组件样式
-  style: ComponentStyle;
+  iconUrl: string; // 图标地址
+  contents: NoticeContentProperty[]; // 公告内容列表
+  backgroundColor: string; // 背景颜色
+  textColor: string; // 文字颜色
+  style: ComponentStyle; // 组件样式
 }
 
 /** 内容属性 */
 export interface NoticeContentProperty {
-  // 内容文字
-  text: string;
-  // 链接地址
-  url: string;
+  text: string; // 内容文字
+  url: string; // 链接地址
 }
 
-// 定义组件
+/** 定义组件 */
 export const component = {
   id: 'NoticeBar',
   name: '公告栏',
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/notice-bar/property.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/property.vue
index 055aa2e10..5fdb1f06b 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/property.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/property.vue
@@ -13,18 +13,17 @@ import {
 
 import ComponentContainerProperty from '../../component-container-property.vue';
 
-// 通知栏属性面板
+/** 公告栏属性面板 */
 defineOptions({ name: 'NoticeBarProperty' });
+
 const props = defineProps<{ modelValue: NoticeBarProperty }>();
 
 const emit = defineEmits(['update:modelValue']);
 
-// 表单校验
+const formData = useVModel(props, 'modelValue', emit);
 const rules = {
   content: [{ required: true, message: '请输入公告', trigger: 'blur' }],
-};
-
-const formData = useVModel(props, 'modelValue', emit);
+}; // 表单校验
 </script>
 
 <template>
@@ -60,5 +59,3 @@ const formData = useVModel(props, 'modelValue', emit);
     </ElForm>
   </ComponentContainerProperty>
 </template>
-
-<style scoped lang="scss"></style>
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/page-config/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/page-config/config.ts
index 73032a84a..a00e6458b 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/page-config/config.ts
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/page-config/config.ts
@@ -2,15 +2,12 @@ import type { DiyComponent } from '../../../util';
 
 /** 页面设置属性 */
 export interface PageConfigProperty {
-  // 页面描述
-  description: string;
-  // 页面背景颜色
-  backgroundColor: string;
-  // 页面背景图片
-  backgroundImage: string;
+  description: string; // 页面描述
+  backgroundColor: string; // 页面背景颜色
+  backgroundImage: string; // 页面背景图片
 }
 
-// 定义页面组件
+/** 定义页面组件 */
 export const component = {
   id: 'PageConfig',
   name: '页面设置',
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/page-config/property.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/page-config/property.vue
index 9d904c0e8..27aa37bec 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/page-config/property.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/page-config/property.vue
@@ -7,24 +7,22 @@ import { ElForm, ElFormItem, ElInput } from 'element-plus';
 import UploadImg from '#/components/upload/image-upload.vue';
 import { ColorInput } from '#/views/mall/promotion/components';
 
-// 导航栏属性面板
+/** 导航栏属性面板 */
 defineOptions({ name: 'PageConfigProperty' });
+
 const props = defineProps<{ modelValue: PageConfigProperty }>();
 
 const emit = defineEmits(['update:modelValue']);
 
-// 表单校验
-const rules = {};
-
 const formData = useVModel(props, 'modelValue', emit);
 </script>
 
 <template>
-  <ElForm label-width="80px" :model="formData" :rules="rules">
+  <ElForm label-width="80px" :model="formData">
     <ElFormItem label="页面描述" prop="description">
       <ElInput
-        type="textarea"
         v-model="formData!.description"
+        type="textarea"
         placeholder="用户通过微信分享给朋友时，会自动显示页面描述"
       />
     </ElFormItem>
@@ -42,5 +40,3 @@ const formData = useVModel(props, 'modelValue', emit);
     </ElFormItem>
   </ElForm>
 </template>
-
-<style scoped lang="scss"></style>
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/Popover/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/popover/config.ts
similarity index 58%
rename from apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/Popover/config.ts
rename to apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/popover/config.ts
index 6f365b735..52bbeacdb 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/Popover/config.ts
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/popover/config.ts
@@ -2,19 +2,17 @@ import type { DiyComponent } from '../../../util';
 
 /** 弹窗广告属性 */
 export interface PopoverProperty {
-  list: PopoverItemProperty[];
+  list: PopoverItemProperty[]; // 弹窗列表
 }
 
+/** 弹窗广告项目属性 */
 export interface PopoverItemProperty {
-  // 图片地址
-  imgUrl: string;
-  // 跳转连接
-  url: string;
-  // 显示类型：仅显示一次、每次启动都会显示
-  showType: 'always' | 'once';
+  imgUrl: string; // 图片地址
+  url: string; // 跳转连接
+  showType: 'always' | 'once'; // 显示类型：仅显示一次、每次启动都会显示
 }
 
-// 定义组件
+/** 定义组件 */
 export const component = {
   id: 'Popover',
   name: '弹窗广告',
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/Popover/index.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/popover/index.vue
similarity index 81%
rename from apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/Popover/index.vue
rename to apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/popover/index.vue
index bc724eca9..694f77ed2 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/Popover/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/popover/index.vue
@@ -9,18 +9,20 @@ import { ElImage } from 'element-plus';
 
 /** 弹窗广告 */
 defineOptions({ name: 'Popover' });
-// 定义属性
-defineProps<{ property: PopoverProperty }>();
 
-// 处理选中
-const activeIndex = ref(0);
-const handleActive = (index: number) => {
+const props = defineProps<{ property: PopoverProperty }>();
+
+const activeIndex = ref(0); // 选中 index
+
+/** 处理选中 */
+function handleActive(index: number) {
   activeIndex.value = index;
-};
+}
 </script>
+
 <template>
   <div
-    v-for="(item, index) in property.list"
+    v-for="(item, index) in props.property.list"
     :key="index"
     class="absolute bottom-1/2 right-1/2 h-[454px] w-[292px] rounded border border-gray-300 bg-white p-0.5"
     :style="{
@@ -40,5 +42,3 @@ const handleActive = (index: number) => {
     <div class="absolute right-1 top-1 text-xs">{{ index + 1 }}</div>
   </div>
 </template>
-
-<style scoped lang="scss"></style>
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/Popover/property.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/popover/property.vue
similarity index 96%
rename from apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/Popover/property.vue
rename to apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/popover/property.vue
index 7f41d413c..189b6b068 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/Popover/property.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/popover/property.vue
@@ -13,11 +13,13 @@ import {
 import UploadImg from '#/components/upload/image-upload.vue';
 import { AppLinkInput, Draggable } from '#/views/mall/promotion/components';
 
-// 弹窗广告属性面板
+/** 弹窗广告属性面板 */
 defineOptions({ name: 'PopoverProperty' });
 
 const props = defineProps<{ modelValue: PopoverProperty }>();
+
 const emit = defineEmits(['update:modelValue']);
+
 const formData = useVModel(props, 'modelValue', emit);
 </script>
 
@@ -53,5 +55,3 @@ const formData = useVModel(props, 'modelValue', emit);
     </Draggable>
   </ElForm>
 </template>
-
-<style scoped lang="scss"></style>
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/product-card/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/product-card/config.ts
index d165b01f6..a9e84977b 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/product-card/config.ts
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/product-card/config.ts
@@ -2,63 +2,40 @@ import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 商品卡片属性 */
 export interface ProductCardProperty {
-  // 布局类型：单列大图 | 单列小图 | 双列
-  layoutType: 'oneColBigImg' | 'oneColSmallImg' | 'twoCol';
-  // 商品字段
+  layoutType: 'oneColBigImg' | 'oneColSmallImg' | 'twoCol'; // 布局类型：单列大图 | 单列小图 | 双列
   fields: {
-    // 商品简介
-    introduction: ProductCardFieldProperty;
-    // 商品市场价
-    marketPrice: ProductCardFieldProperty;
-    // 商品名称
-    name: ProductCardFieldProperty;
-    // 商品价格
-    price: ProductCardFieldProperty;
-    // 商品销量
-    salesCount: ProductCardFieldProperty;
-    // 商品库存
-    stock: ProductCardFieldProperty;
-  };
-  // 角标
+    introduction: ProductCardFieldProperty; // 商品简介
+    marketPrice: ProductCardFieldProperty; // 商品市场价
+    name: ProductCardFieldProperty; // 商品名称
+    price: ProductCardFieldProperty; // 商品价格
+    salesCount: ProductCardFieldProperty; // 商品销量
+    stock: ProductCardFieldProperty; // 商品库存
+  }; // 商品字段
   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;
-  // 商品编号列表
-  spuIds: number[];
-  // 组件样式
-  style: ComponentStyle;
-}
-// 商品字段
-export interface ProductCardFieldProperty {
-  // 是否显示
-  show: boolean;
-  // 颜色
-  color: string;
+    bgBeginColor: string; // 文字按钮：背景渐变起始颜色
+    bgEndColor: string; // 文字按钮：背景渐变结束颜色
+    imgUrl: string; // 图片按钮：图片地址
+    text: string; // 文字
+    type: 'img' | 'text'; // 类型：文字 | 图片
+  }; // 按钮
+  borderRadiusTop: number; // 上圆角
+  borderRadiusBottom: number; // 下圆角
+  space: number; // 间距
+  spuIds: number[]; // 商品编号列表
+  style: ComponentStyle; // 组件样式
 }
 
-// 定义组件
+/** 商品字段属性 */
+export interface ProductCardFieldProperty {
+  show: boolean; // 是否显示
+  color: string; // 颜色
+}
+
+/** 定义组件 */
 export const component = {
   id: 'ProductCard',
   name: '商品卡片',
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/product-card/index.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/product-card/index.vue
index b1cf736e8..b66c27c6a 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/product-card/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/product-card/index.vue
@@ -13,10 +13,11 @@ import * as ProductSpuApi from '#/api/mall/product/spu';
 
 /** 商品卡片 */
 defineOptions({ name: 'ProductCard' });
-// 定义属性
+
 const props = defineProps<{ property: ProductCardProperty }>();
-// 商品列表
+
 const spuList = ref<MallSpuApi.Spu[]>([]);
+
 watch(
   () => props.property.spuIds,
   async () => {
@@ -28,28 +29,21 @@ 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 = () => {
   let width = '100%';
-  // 双列时每列的宽度为：（总宽度 - 间距）/ 2
   if (props.property.layoutType === 'twoCol') {
+    // 双列时每列的宽度为：（总宽度 - 间距）/ 2
     width = `${(containerRef.value.offsetWidth - props.property.space) / 2}px`;
   }
   return { width };
@@ -136,14 +130,14 @@ const calculateWidth = () => {
             class="text-[16px]"
             :style="{ color: property.fields.price.color }"
           >
-            ￥{{ fenToYuan(spu.price as any) }}
+            ￥{{ fenToYuan(spu.price!) }}
           </span>
           <!-- 市场价 -->
           <span
             v-if="property.fields.marketPrice.show && spu.marketPrice"
             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]">
@@ -186,5 +180,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/product-card/property.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/product-card/property.vue
index 728ae7827..f7680e7a4 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/product-card/property.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/product-card/property.vue
@@ -18,15 +18,18 @@ import {
 } from 'element-plus';
 
 import UploadImg from '#/components/upload/image-upload.vue';
+import { SpuShowcase } from '#/views/mall/product/spu/components';
 import { ColorInput } from '#/views/mall/promotion/components';
-// TODO: 添加组件
-// import SpuShowcase from '#/views/mall/product/spu/components/spu-showcase.vue';
 
-// 商品卡片属性面板
+import ComponentContainerProperty from '../../component-container-property.vue';
+
+/** 商品卡片属性面板 */
 defineOptions({ name: 'ProductCardProperty' });
 
 const props = defineProps<{ modelValue: ProductCardProperty }>();
+
 const emit = defineEmits(['update:modelValue']);
+
 const formData = useVModel(props, 'modelValue', emit);
 </script>
 
@@ -34,7 +37,7 @@ const formData = useVModel(props, 'modelValue', emit);
   <ComponentContainerProperty v-model="formData.style">
     <ElForm label-width="80px" :model="formData">
       <ElCard header="商品列表" class="property-group" shadow="never">
-        <!-- <SpuShowcase v-model="formData.spuIds" /> -->
+        <SpuShowcase v-model="formData.spuIds" />
       </ElCard>
       <ElCard header="商品样式" class="property-group" shadow="never">
         <ElFormItem label="布局" prop="type">
@@ -174,5 +177,3 @@ const formData = useVModel(props, 'modelValue', emit);
     </ElForm>
   </ComponentContainerProperty>
 </template>
-
-<style scoped lang="scss"></style>
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/config.ts
index 20b4d37af..f5d3e4e5f 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/config.ts
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/config.ts
@@ -2,42 +2,29 @@ import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 商品栏属性 */
 export interface ProductListProperty {
-  // 布局类型：双列 | 三列 | 水平滑动
-  layoutType: 'horizSwiper' | 'threeCol' | 'twoCol';
-  // 商品字段
+  layoutType: 'horizSwiper' | 'threeCol' | 'twoCol'; // 布局类型：双列 | 三列 | 水平滑动
   fields: {
-    // 商品名称
-    name: ProductListFieldProperty;
-    // 商品价格
-    price: ProductListFieldProperty;
-  };
-  // 角标
+    name: ProductListFieldProperty; // 商品名称
+    price: ProductListFieldProperty; // 商品价格
+  }; // 商品字段
   badge: {
-    // 角标图片
-    imgUrl: string;
-    // 是否显示
-    show: boolean;
-  };
-  // 上圆角
-  borderRadiusTop: number;
-  // 下圆角
-  borderRadiusBottom: number;
-  // 间距
-  space: number;
-  // 商品编号列表
-  spuIds: number[];
-  // 组件样式
-  style: ComponentStyle;
-}
-// 商品字段
-export interface ProductListFieldProperty {
-  // 是否显示
-  show: boolean;
-  // 颜色
-  color: string;
+    imgUrl: string; // 角标图片
+    show: boolean; // 是否显示
+  }; // 角标
+  borderRadiusTop: number; // 上圆角
+  borderRadiusBottom: number; // 下圆角
+  space: number; // 间距
+  spuIds: number[]; // 商品编号列表
+  style: ComponentStyle; // 组件样式
 }
 
-// 定义组件
+/** 商品字段属性 */
+export interface ProductListFieldProperty {
+  show: boolean; // 是否显示
+  color: string; // 颜色
+}
+
+/** 定义组件 */
 export const component = {
   id: 'ProductList',
   name: '商品栏',
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/index.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/index.vue
index 0e7ec6e1b..54d795af0 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/index.vue
@@ -13,10 +13,11 @@ import * as ProductSpuApi from '#/api/mall/product/spu';
 
 /** 商品栏 */
 defineOptions({ name: 'ProductList' });
-// 定义属性
+
 const props = defineProps<{ property: ProductListProperty }>();
-// 商品列表
+
 const spuList = ref<MallSpuApi.Spu[]>([]);
+
 watch(
   () => props.property.spuIds,
   async () => {
@@ -27,19 +28,15 @@ watch(
     deep: true,
   },
 );
-// 手机宽度
-const phoneWidth = ref(375);
-// 容器
-const containerRef = ref();
-// 商品的列数
-const columns = ref(2);
-// 滚动条宽度
-const scrollbarWidth = ref('100%');
-// 商品图大小
-const imageSize = ref('0');
-// 商品网络列数
-const gridTemplateColumns = ref('');
-// 计算布局参数
+
+const phoneWidth = ref(375); // 手机宽度
+const containerRef = ref(); // 容器
+const columns = ref(2); // 商品的列数
+const scrollbarWidth = ref('100%'); // 滚动条宽度
+const imageSize = ref('0'); // 商品图大小
+const gridTemplateColumns = ref(''); // 商品网络列数
+
+/** 计算布局参数 */
 watch(
   () => [props.property, phoneWidth, spuList.value.length],
   () => {
@@ -69,8 +66,9 @@ watch(
   },
   { immediate: true, deep: true },
 );
+
+/** 初始化 */
 onMounted(() => {
-  // 提取手机宽度
   phoneWidth.value = containerRef.value?.wrapRef?.offsetWidth || 375;
 });
 </script>
@@ -146,5 +144,3 @@ onMounted(() => {
     </div>
   </ElScrollbar>
 </template>
-
-<style scoped lang="scss"></style>
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/property.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/property.vue
index 8e941b599..550dbfeae 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/property.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/property.vue
@@ -6,6 +6,7 @@ import { IconifyIcon } from '@vben/icons';
 import { useVModel } from '@vueuse/core';
 import {
   ElCard,
+  ElCheckbox,
   ElForm,
   ElFormItem,
   ElRadioButton,
@@ -16,17 +17,18 @@ import {
 } from 'element-plus';
 
 import UploadImg from '#/components/upload/image-upload.vue';
-import { InputWithColor as ColorInput } from '#/views/mall/promotion/components';
+import { SpuShowcase } from '#/views/mall/product/spu/components';
+import { ColorInput } from '#/views/mall/promotion/components';
 
 import ComponentContainerProperty from '../../component-container-property.vue';
-// TODO: 添加组件
-// import SpuShowcase from '#/views/mall/product/spu/components/spu-showcase.vue';
 
-// 商品栏属性面板
+/** 商品栏属性面板 */
 defineOptions({ name: 'ProductListProperty' });
 
 const props = defineProps<{ modelValue: ProductListProperty }>();
+
 const emit = defineEmits(['update:modelValue']);
+
 const formData = useVModel(props, 'modelValue', emit);
 </script>
 
@@ -34,7 +36,7 @@ const formData = useVModel(props, 'modelValue', emit);
   <ComponentContainerProperty v-model="formData.style">
     <ElForm label-width="80px" :model="formData">
       <ElCard header="商品列表" class="property-group" shadow="never">
-        <!-- <SpuShowcase v-model="formData.spuIds" /> -->
+        <SpuShowcase v-model="formData.spuIds" />
       </ElCard>
       <ElCard header="商品样式" class="property-group" shadow="never">
         <ElFormItem label="布局" prop="type">
@@ -119,5 +121,3 @@ const formData = useVModel(props, 'modelValue', emit);
     </ElForm>
   </ComponentContainerProperty>
 </template>
-
-<style scoped lang="scss"></style>
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/config.ts
index 9a1fc4194..ac47bf4b5 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/config.ts
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/config.ts
@@ -2,13 +2,11 @@ import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 营销文章属性 */
 export interface PromotionArticleProperty {
-  // 文章编号
-  id: number;
-  // 组件样式
-  style: ComponentStyle;
+  id: number; // 文章编号
+  style: ComponentStyle; // 组件样式
 }
 
-// 定义组件
+/** 定义组件 */
 export const component = {
   id: 'PromotionArticle',
   name: '营销文章',
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/index.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/index.vue
index 10e9f5aa3..09f1ff673 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/index.vue
@@ -9,10 +9,10 @@ import * as ArticleApi from '#/api/mall/promotion/article/index';
 
 /** 营销文章 */
 defineOptions({ name: 'PromotionArticle' });
-// 定义属性
-const props = defineProps<{ property: PromotionArticleProperty }>();
-// 商品列表
-const article = ref<MallArticleApi.Article>();
+
+const props = defineProps<{ property: PromotionArticleProperty }>(); // 定义属性
+
+const article = ref<MallArticleApi.Article>(); // 商品列表
 
 watch(
   () => props.property.id,
@@ -29,5 +29,3 @@ watch(
 <template>
   <div class="min-h-[30px]" v-dompurify-html="article?.content"></div>
 </template>
-
-<style scoped lang="scss"></style>
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/property.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/property.vue
index 7a701c54f..d70503b17 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/property.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/property.vue
@@ -12,18 +12,19 @@ import * as ArticleApi from '#/api/mall/promotion/article/index';
 
 import ComponentContainerProperty from '../../component-container-property.vue';
 
-// 营销文章属性面板
+/** 营销文章属性面板 */
 defineOptions({ name: 'PromotionArticleProperty' });
 
 const props = defineProps<{ modelValue: PromotionArticleProperty }>();
-const emit = defineEmits(['update:modelValue']);
-const formData = useVModel(props, 'modelValue', emit);
-// 文章列表
-const articles = ref<MallArticleApi.Article[]>([]);
 
-// 加载中
-const loading = ref(false);
-// 查询文章列表
+const emit = defineEmits(['update:modelValue']);
+
+const formData = useVModel(props, 'modelValue', emit);
+
+const articles = ref<MallArticleApi.Article[]>([]); // 文章列表
+const loading = ref(false); // 加载中
+
+/** 查询文章列表 */
 const queryArticleList = async (title?: string) => {
   loading.value = true;
   const { list } = await ArticleApi.getArticlePage({
@@ -35,7 +36,7 @@ const queryArticleList = async (title?: string) => {
   loading.value = false;
 };
 
-// 初始化
+/** 初始化 */
 onMounted(() => {
   queryArticleList();
 });
@@ -65,5 +66,3 @@ onMounted(() => {
     </ElForm>
   </ComponentContainerProperty>
 </template>
-
-<style scoped lang="scss"></style>
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/config.ts
index f0497dc19..f9db86b73 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/config.ts
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/config.ts
@@ -2,64 +2,40 @@ import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 拼团属性 */
 export interface PromotionCombinationProperty {
-  // 布局类型：单列 | 三列
-  layoutType: 'oneColBigImg' | 'oneColSmallImg' | 'twoCol';
-  // 商品字段
+  layoutType: 'oneColBigImg' | 'oneColSmallImg' | 'twoCol'; // 布局类型：单列 | 三列
   fields: {
-    // 商品简介
-    introduction: PromotionCombinationFieldProperty;
-    // 市场价
-    marketPrice: PromotionCombinationFieldProperty;
-    // 商品名称
-    name: PromotionCombinationFieldProperty;
-    // 商品价格
-    price: PromotionCombinationFieldProperty;
-    // 商品销量
-    salesCount: PromotionCombinationFieldProperty;
-    // 商品库存
-    stock: PromotionCombinationFieldProperty;
-  };
-  // 角标
+    introduction: PromotionCombinationFieldProperty; // 商品简介
+    marketPrice: PromotionCombinationFieldProperty; // 市场价
+    name: PromotionCombinationFieldProperty; // 商品名称
+    price: PromotionCombinationFieldProperty; // 商品价格
+    salesCount: PromotionCombinationFieldProperty; // 商品销量
+    stock: PromotionCombinationFieldProperty; // 商品库存
+  }; // 商品字段
   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 PromotionCombinationFieldProperty {
-  // 是否显示
-  show: boolean;
-  // 颜色
-  color: string;
+  show: boolean; // 是否显示
+  color: string; // 颜色
 }
 
-// 定义组件
+/** 定义组件 */
 export const component = {
   id: 'PromotionCombination',
   name: '拼团',
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 82f1f5bd7..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
@@ -15,10 +15,10 @@ import * as CombinationActivityApi from '#/api/mall/promotion/combination/combin
 
 /** 拼团卡片 */
 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[]
@@ -30,7 +30,7 @@ watch(
     try {
       // 新添加的拼团组件，是没有活动ID的
       const activityIds = props.property.activityIds;
-      // 检查活动ID的有效性
+      // 检查活动 ID 的有效性
       if (Array.isArray(activityIds) && activityIds.length > 0) {
         // 获取拼团活动详情列表
         combinationActivityList.value =
@@ -70,32 +70,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
@@ -117,7 +110,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
@@ -139,7 +132,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',
@@ -186,7 +179,7 @@ const calculateWidth = () => {
             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]">
@@ -229,5 +222,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-combination/property.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/property.vue
index 273580f44..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
@@ -1,17 +1,15 @@
 <script setup lang="ts">
 import type { PromotionCombinationProperty } from './config';
 
-import type { MallCombinationActivityApi } from '#/api/mall/promotion/combination/combinationActivity';
-
-import { onMounted, ref } from 'vue';
-
-import { CommonStatusEnum } from '@vben/constants';
 import { IconifyIcon } from '@vben/icons';
 
 import { useVModel } from '@vueuse/core';
 import {
+  ElCard,
+  ElCheckbox,
   ElForm,
   ElFormItem,
+  ElInput,
   ElRadioButton,
   ElRadioGroup,
   ElSlider,
@@ -19,27 +17,20 @@ import {
   ElTooltip,
 } from 'element-plus';
 
-import * as CombinationActivityApi from '#/api/mall/promotion/combination/combinationActivity';
 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';
+
+/** 拼团属性面板 */
 defineOptions({ name: 'PromotionCombinationProperty' });
 
 const props = defineProps<{ modelValue: PromotionCombinationProperty }>();
+
 const emit = defineEmits(['update:modelValue']);
+
 const formData = useVModel(props, 'modelValue', emit);
-// 活动列表
-const activityList = ref<MallCombinationActivityApi.CombinationActivity[]>([]);
-onMounted(async () => {
-  const { list } = await CombinationActivityApi.getCombinationActivityPage({
-    pageNo: 1,
-    pageSize: 10,
-    status: CommonStatusEnum.ENABLE,
-  });
-  activityList.value = list;
-});
 </script>
 
 <template>
@@ -66,8 +57,8 @@ 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" />
               </ElRadioButton>
             </ElTooltip>-->
@@ -115,8 +106,13 @@ onMounted(async () => {
           <ElSwitch v-model="formData.badge.show" />
         </ElFormItem>
         <ElFormItem label="角标" prop="badge.imgUrl" v-if="formData.badge.show">
-          <UploadImg v-model="formData.badge.imgUrl" height="44px" width="72px">
-            <template #tip> 建议尺寸：36 * 22</template>
+          <UploadImg
+            v-model="formData.badge.imgUrl"
+            height="44px"
+            width="72px"
+            :show-description="false"
+          >
+            <template #tip> 建议尺寸：36 * 22 </template>
           </UploadImg>
         </ElFormItem>
       </ElCard>
@@ -146,7 +142,7 @@ onMounted(async () => {
               width="56px"
               :show-description="false"
             >
-              <template #tip> 建议尺寸：56 * 56</template>
+              <template #tip> 建议尺寸：56 * 56 </template>
             </UploadImg>
           </ElFormItem>
         </template>
@@ -186,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/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/search-bar/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/config.ts
index 01d5894d1..c471780e1 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/config.ts
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/config.ts
@@ -13,10 +13,10 @@ export interface SearchProperty {
   style: ComponentStyle;
 }
 
-// 文字位置
+/** 文字位置 */
 export type PlaceholderPosition = 'center' | 'left';
 
-// 定义组件
+/** 定义组件 */
 export const component = {
   id: 'SearchBar',
   name: '搜索框',
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/index.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/index.vue
index e7c770304..7463d7db6 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/index.vue
@@ -5,19 +5,19 @@ import { IconifyIcon } from '@vben/icons';
 
 /** 搜索框 */
 defineOptions({ name: 'SearchBar' });
+
 defineProps<{ property: SearchProperty }>();
 </script>
 
 <template>
   <div
-    class="search-bar"
     :style="{
       color: property.textColor,
     }"
   >
     <!-- 搜索框 -->
     <div
-      class="inner"
+      class="relative flex min-h-7 items-center text-sm"
       :style="{
         height: `${property.height}px`,
         background: property.backgroundColor,
@@ -25,7 +25,7 @@ defineProps<{ property: SearchProperty }>();
       }"
     >
       <div
-        class="placeholder"
+        class="flex w-full items-center gap-0.5 overflow-hidden text-ellipsis whitespace-nowrap break-all px-2"
         :style="{
           justifyContent: property.placeholderPosition,
         }"
@@ -33,11 +33,11 @@ defineProps<{ property: SearchProperty }>();
         <IconifyIcon icon="ep:search" />
         <span>{{ property.placeholder || '搜索商品' }}</span>
       </div>
-      <div class="right">
+      <div class="absolute right-2 flex items-center justify-center gap-2">
         <!-- 搜索热词 -->
-        <span v-for="(keyword, index) in property.hotKeywords" :key="index">{{
-          keyword
-        }}</span>
+        <span v-for="(keyword, index) in property.hotKeywords" :key="index">
+          {{ keyword }}
+        </span>
         <!-- 扫一扫 -->
         <IconifyIcon
           icon="ant-design:scan-outlined"
@@ -47,37 +47,3 @@ defineProps<{ property: SearchProperty }>();
     </div>
   </div>
 </template>
-
-<style scoped lang="scss">
-.search-bar {
-  /* 搜索框 */
-  .inner {
-    position: relative;
-    display: flex;
-    align-items: center;
-    min-height: 28px;
-    font-size: 14px;
-
-    .placeholder {
-      display: flex;
-      gap: 2px;
-      align-items: center;
-      width: 100%;
-      padding: 0 8px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      word-break: break-all;
-      white-space: nowrap;
-    }
-
-    .right {
-      position: absolute;
-      right: 8px;
-      display: flex;
-      gap: 8px;
-      align-items: center;
-      justify-content: center;
-    }
-  }
-}
-</style>
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/property.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/property.vue
index 5e1822078..4dca02da7 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/property.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/property.vue
@@ -11,6 +11,7 @@ import {
   ElCard,
   ElForm,
   ElFormItem,
+  ElInput,
   ElRadioButton,
   ElRadioGroup,
   ElSlider,
@@ -18,7 +19,7 @@ import {
   ElTooltip,
 } from 'element-plus';
 
-import { Draggable } from '#/views/mall/promotion/components';
+import { ColorInput, Draggable } from '#/views/mall/promotion/components';
 
 import ComponentContainerProperty from '../../component-container-property.vue';
 
@@ -26,10 +27,12 @@ import ComponentContainerProperty from '../../component-container-property.vue';
 defineOptions({ name: 'SearchProperty' });
 
 const props = defineProps<{ modelValue: SearchProperty }>();
+
 const emit = defineEmits(['update:modelValue']);
+
 const formData = useVModel(props, 'modelValue', emit);
 
-// 监听热词数组变化
+/** 监听热词数组变化 */
 watch(
   () => formData.value.hotKeywords,
   (newVal) => {
@@ -45,8 +48,7 @@ watch(
 
 <template>
   <ComponentContainerProperty v-model="formData.style">
-    <!-- 表单 -->
-    <ElForm label-width="80px" :model="formData" class="mt-2">
+    <ElForm label-width="80px" :model="formData">
       <ElCard header="搜索热词" class="property-group" shadow="never">
         <Draggable
           v-model="formData.hotKeywords"
@@ -56,7 +58,7 @@ watch(
           }"
         >
           <template #default="{ index }">
-            <el-input
+            <ElInput
               v-model="formData.hotKeywords[index]"
               placeholder="请输入热词"
             />
@@ -79,7 +81,7 @@ watch(
           </ElRadioGroup>
         </ElFormItem>
         <ElFormItem label="提示文字" prop="placeholder">
-          <el-input v-model="formData.placeholder" />
+          <ElInput v-model="formData.placeholder" />
         </ElFormItem>
         <ElFormItem label="文本位置" prop="placeholderPosition">
           <ElRadioGroup v-model="formData!.placeholderPosition">
@@ -110,12 +112,10 @@ watch(
         <ElFormItem label="框体颜色" prop="backgroundColor">
           <ColorInput v-model="formData.backgroundColor" />
         </ElFormItem>
-        <ElFormItem class="lef" label="文本颜色" prop="textColor">
+        <ElFormItem label="文本颜色" prop="textColor">
           <ColorInput v-model="formData.textColor" />
         </ElFormItem>
       </ElCard>
     </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/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/config.ts
index 0404f3647..efdb4da21 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/config.ts
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/config.ts
@@ -2,41 +2,29 @@ import type { DiyComponent } from '../../../util';
 
 /** 底部导航菜单属性 */
 export interface TabBarProperty {
-  // 选项列表
-  items: TabBarItemProperty[];
-  // 主题
-  theme: string;
-  // 样式
-  style: TabBarStyle;
+  items: TabBarItemProperty[]; // 选项列表
+  theme: string; // 主题
+  style: TabBarStyle; // 样式
 }
 
-// 选项属性
+/** 选项属性 */
 export interface TabBarItemProperty {
-  // 标签文字
-  text: string;
-  // 链接
-  url: string;
-  // 默认图标链接
-  iconUrl: string;
-  // 选中的图标链接
-  activeIconUrl: string;
+  text: string; // 标签文字
+  url: string; // 链接
+  iconUrl: string; // 默认图标链接
+  activeIconUrl: string; // 选中的图标链接
 }
 
-// 样式
+/** 样式 */
 export interface TabBarStyle {
-  // 背景类型
-  bgType: 'color' | 'img';
-  // 背景颜色
-  bgColor: string;
-  // 图片链接
-  bgImg: string;
-  // 默认颜色
-  color: string;
-  // 选中的颜色
-  activeColor: string;
+  bgType: 'color' | 'img'; // 背景类型
+  bgColor: string; // 背景颜色
+  bgImg: string; // 图片链接
+  color: string; // 默认颜色
+  activeColor: string; // 选中的颜色
 }
 
-// 定义组件
+/** 定义组件 */
 export const component = {
   id: 'TabBar',
   name: '底部导航',
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 9c1ddd834..520081790 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
@@ -5,15 +5,15 @@ import { IconifyIcon } from '@vben/icons';
 
 import { ElImage } from 'element-plus';
 
-/** 页面底部导航栏 */
+/** 底部导航 */
 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,12 +26,18 @@ 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">
+        <ElImage
+          :src="index === 0 ? item.activeIconUrl : item.iconUrl"
+          class="h-[26px] w-[26px] rounded"
+        >
           <template #error>
             <div class="flex h-full w-full items-center justify-center">
-              <IconifyIcon icon="ep:picture" />
+              <IconifyIcon
+                icon="ep:picture"
+                class="h-[26px] w-[26px] rounded"
+              />
             </div>
           </template>
         </ElImage>
@@ -47,33 +53,3 @@ defineProps<{ property: TabBarProperty }>();
     </div>
   </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;
-      }
-    }
-  }
-}
-</style>
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/property.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/property.vue
index a258901dd..6c3368618 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/property.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/property.vue
@@ -23,7 +23,8 @@ import {
 } from '#/views/mall/promotion/components';
 
 import { component, THEME_LIST } from './config';
-// 底部导航栏
+
+/** 底部导航栏 */
 defineOptions({ name: 'TabBarProperty' });
 
 const props = defineProps<{ modelValue: TabBarProperty }>();
@@ -33,7 +34,7 @@ const formData = useVModel(props, 'modelValue', emit);
 // 将数据库的值更新到右侧属性栏
 component.property.items = formData.value.items;
 
-// 要的主题
+/** 处理主题变更 */
 const handleThemeChange = () => {
   const theme = THEME_LIST.find((theme) => theme.id === formData.value.theme);
   if (theme?.color) {
@@ -44,7 +45,6 @@ const handleThemeChange = () => {
 
 <template>
   <div class="tab-bar">
-    <!-- 表单 -->
     <ElForm :model="formData" label-width="80px">
       <ElFormItem label="主题" prop="theme">
         <ElSelect v-model="formData!.theme" @change="handleThemeChange">
@@ -89,7 +89,6 @@ const handleThemeChange = () => {
           <template #tip> 建议尺寸 375 * 50 </template>
         </UploadImg>
       </ElFormItem>
-
       <ElText tag="p">图标设置</ElText>
       <ElText type="info" size="small">
         拖动左上角的小圆点可对其排序, 图标建议尺寸 44*44
@@ -129,5 +128,3 @@ const handleThemeChange = () => {
     </ElForm>
   </div>
 </template>
-
-<style lang="scss" scoped></style>
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/config.ts
index f442e7dc5..2ef0eb772 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/config.ts
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/config.ts
@@ -2,46 +2,28 @@ import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 标题栏属性 */
 export interface TitleBarProperty {
-  // 背景图
-  bgImgUrl: string;
-  // 偏移
-  marginLeft: number;
-  // 显示位置
-  textAlign: 'center' | 'left';
-  // 主标题
-  title: string;
-  // 副标题
-  description: string;
-  // 标题大小
-  titleSize: number;
-  // 描述大小
-  descriptionSize: number;
-  // 标题粗细
-  titleWeight: number;
-  // 描述粗细
-  descriptionWeight: number;
-  // 标题颜色
-  titleColor: string;
-  // 描述颜色
-  descriptionColor: string;
-  // 高度
-  height: number;
-  // 查看更多
+  bgImgUrl: string; // 背景图
+  marginLeft: number; // 偏移
+  textAlign: 'center' | 'left'; // 显示位置
+  title: string; // 主标题
+  description: string; // 副标题
+  titleSize: number; // 标题大小
+  descriptionSize: number; // 描述大小
+  titleWeight: number; // 标题粗细
+  descriptionWeight: number; // 描述粗细
+  titleColor: string; // 标题颜色
+  descriptionColor: string; // 描述颜色
+  height: number; // 高度
   more: {
-    // 是否显示查看更多
-    show: false;
-    // 自定义文字
-    text: string;
-    // 样式选择
-    type: 'all' | 'icon' | 'text';
-    // 链接
-    url: string;
-  };
-  // 组件样式
-  style: ComponentStyle;
+    show: false; // 是否显示查看更多
+    text: string; // 自定义文字
+    type: 'all' | 'icon' | 'text'; // 样式选择
+    url: string; // 链接
+  }; // 查看更多
+  style: ComponentStyle; // 组件样式
 }
 
-// 定义组件
+/** 定义组件 */
 export const component = {
   id: 'TitleBar',
   name: '标题栏',
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/title-bar/property.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/property.vue
index 1fdafb90a..9ff872301 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/property.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/property.vue
@@ -24,15 +24,16 @@ import {
 
 import ComponentContainerProperty from '../../component-container-property.vue';
 
-// 导航栏属性面板
+/** 导航栏属性面板 */
 defineOptions({ name: 'TitleBarProperty' });
 
 const props = defineProps<{ modelValue: TitleBarProperty }>();
+
 const emit = defineEmits(['update:modelValue']);
+
 const formData = useVModel(props, 'modelValue', emit);
 
-// 表单校验
-const rules = {};
+const rules = {}; // 表单校验
 </script>
 <template>
   <ComponentContainerProperty v-model="formData.style">
@@ -167,5 +168,3 @@ const rules = {};
     </ElForm>
   </ComponentContainerProperty>
 </template>
-
-<style scoped lang="scss"></style>
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-card/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-card/config.ts
index 2dae34da2..568cfb94f 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-card/config.ts
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-card/config.ts
@@ -2,11 +2,10 @@ import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 用户卡片属性 */
 export interface UserCardProperty {
-  // 组件样式
-  style: ComponentStyle;
+  style: ComponentStyle; // 组件样式
 }
 
-// 定义组件
+/** 定义组件 */
 export const component = {
   id: 'UserCard',
   name: '用户卡片',
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 9cb312f37..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
@@ -7,13 +7,14 @@ import { ElAvatar } from 'element-plus';
 
 /** 用户卡片 */
 defineOptions({ name: 'UserCard' });
-// 定义属性
+
+/** 定义属性 */
 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>
@@ -21,15 +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>
-
-<style scoped lang="scss"></style>
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-card/property.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-card/property.vue
index 79a7eb080..46a0e16c5 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-card/property.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-card/property.vue
@@ -5,16 +5,16 @@ import { useVModel } from '@vueuse/core';
 
 import ComponentContainerProperty from '../../component-container-property.vue';
 
-// 用户卡片属性面板
+/** 用户卡片属性面板 */
 defineOptions({ name: 'UserCardProperty' });
 
 const props = defineProps<{ modelValue: UserCardProperty }>();
+
 const emit = defineEmits(['update:modelValue']);
+
 const formData = useVModel(props, 'modelValue', emit);
 </script>
 
 <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-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/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-order/config.ts
index 25ca85065..e149b22f1 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-order/config.ts
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-order/config.ts
@@ -2,11 +2,10 @@ import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 用户订单属性 */
 export interface UserOrderProperty {
-  // 组件样式
-  style: ComponentStyle;
+  style: ComponentStyle; // 组件样式
 }
 
-// 定义组件
+/** 定义组件 */
 export const component = {
   id: 'UserOrder',
   name: '用户订单',
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 ab527acee..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
@@ -5,7 +5,8 @@ import { ElImage } from 'element-plus';
 
 /** 用户订单 */
 defineOptions({ name: 'UserOrder' });
-// 定义属性
+
+/** 定义属性 */
 defineProps<{ property: UserOrderProperty }>();
 </script>
 <template>
@@ -13,5 +14,3 @@ defineProps<{ property: UserOrderProperty }>();
     src="https://shopro.sheepjs.com/admin/static/images/shop/decorate/orderCardStyle.png"
   />
 </template>
-
-<style scoped lang="scss"></style>
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 48f0c0a41..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
@@ -5,16 +5,16 @@ import { useVModel } from '@vueuse/core';
 
 import ComponentContainerProperty from '../../component-container-property.vue';
 
-// 用户订单属性面板
+/** 用户订单属性面板 */
 defineOptions({ name: 'UserOrderProperty' });
 
 const props = defineProps<{ modelValue: UserOrderProperty }>();
+
 const emit = defineEmits(['update:modelValue']);
+
 const formData = useVModel(props, 'modelValue', emit);
 </script>
 
 <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-wallet/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-wallet/config.ts
index 2b10d32fb..71d8d0245 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-wallet/config.ts
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-wallet/config.ts
@@ -2,11 +2,10 @@ import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 用户资产属性 */
 export interface UserWalletProperty {
-  // 组件样式
-  style: ComponentStyle;
+  style: ComponentStyle; // 组件样式
 }
 
-// 定义组件
+/** 定义组件 */
 export const component = {
   id: 'UserWallet',
   name: '用户资产',
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 7581e54c9..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
@@ -5,7 +5,8 @@ import { ElImage } from 'element-plus';
 
 /** 用户资产 */
 defineOptions({ name: 'UserWallet' });
-// 定义属性
+
+/** 定义属性 */
 defineProps<{ property: UserWalletProperty }>();
 </script>
 <template>
@@ -13,5 +14,3 @@ defineProps<{ property: UserWalletProperty }>();
     src="https://shopro.sheepjs.com/admin/static/images/shop/decorate/walletCardStyle.png"
   />
 </template>
-
-<style scoped lang="scss"></style>
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 5c01b828e..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
@@ -5,16 +5,16 @@ import { useVModel } from '@vueuse/core';
 
 import ComponentContainerProperty from '../../component-container-property.vue';
 
-// 用户资产属性面板
+/** 用户资产属性面板 */
 defineOptions({ name: 'UserWalletProperty' });
 
 const props = defineProps<{ modelValue: UserWalletProperty }>();
+
 const emit = defineEmits(['update:modelValue']);
+
 const formData = useVModel(props, 'modelValue', emit);
 </script>
 
 <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/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/config.ts
index bc9195575..ab7ccd311 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/config.ts
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/config.ts
@@ -2,23 +2,18 @@ import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 视频播放属性 */
 export interface VideoPlayerProperty {
-  // 视频链接
-  videoUrl: string;
-  // 封面链接
-  posterUrl: string;
-  // 是否自动播放
-  autoplay: boolean;
-  // 组件样式
-  style: VideoPlayerStyle;
+  videoUrl: string; // 视频链接
+  posterUrl: string; // 封面链接
+  autoplay: boolean; // 是否自动播放
+  style: VideoPlayerStyle; // 组件样式
 }
 
-// 视频播放样式
+/** 视频播放样式 */
 export interface VideoPlayerStyle extends ComponentStyle {
-  // 视频高度
-  height: number;
+  height: number; // 视频高度
 }
 
-// 定义组件
+/** 定义组件 */
 export const component = {
   id: 'VideoPlayer',
   name: '视频播放',
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/index.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/index.vue
index ddd448d96..b58577d5b 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/index.vue
@@ -11,13 +11,13 @@ defineProps<{ property: VideoPlayerProperty }>();
 <template>
   <div class="w-full" :style="{ height: `${property.style.height}px` }">
     <ElImage
-      class="w-full"
+      class="block h-full w-full"
       :src="property.posterUrl"
       v-if="property.posterUrl"
     />
     <video
       v-else
-      class="w-full"
+      class="h-full w-full"
       :src="property.videoUrl"
       :poster="property.posterUrl"
       :autoplay="property.autoplay"
@@ -25,12 +25,3 @@ defineProps<{ property: VideoPlayerProperty }>();
     ></video>
   </div>
 </template>
-
-<style scoped lang="scss">
-/* 图片 */
-img {
-  display: block;
-  width: 100%;
-  height: 100%;
-}
-</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 67c355905..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
@@ -9,11 +9,13 @@ import UploadImg from '#/components/upload/image-upload.vue';
 
 import ComponentContainerProperty from '../../component-container-property.vue';
 
-// 视频播放属性面板
+/** 视频播放属性面板 */
 defineOptions({ name: 'VideoPlayerProperty' });
 
 const props = defineProps<{ modelValue: VideoPlayerProperty }>();
+
 const emit = defineEmits(['update:modelValue']);
+
 const formData = useVModel(props, 'modelValue', emit);
 </script>
 
@@ -38,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">
@@ -47,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>
@@ -59,5 +61,3 @@ const formData = useVModel(props, 'modelValue', emit);
     </ElForm>
   </ComponentContainerProperty>
 </template>
-
-<style scoped lang="scss"></style>
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..172bb8d21 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!;
   },
@@ -299,9 +304,15 @@ onMounted(() => {
 </script>
 <template>
   <div>
-    <ElContainer class="editor">
+    <ElContainer class="editor flex h-full flex-col">
       <!-- 顶部：工具栏 -->
-      <ElHeader class="editor-header">
+      <ElHeader
+        class="editor-header flex !h-[42px] items-center justify-between !border-b !p-0"
+        :style="{
+          backgroundColor: 'var(--el-bg-color)',
+          borderBottomColor: 'var(--el-border-color)',
+        }"
+      >
         <!-- 左侧操作区 -->
         <slot name="toolBarLeft"></slot>
         <!-- 中心操作区 -->
@@ -329,7 +340,7 @@ onMounted(() => {
       </ElHeader>
 
       <!-- 中心区域 -->
-      <ElContainer class="editor-container">
+      <ElContainer class="editor-container h-[calc(100vh-135px)]">
         <!-- 左侧：组件库（ComponentLibrary） -->
         <ElAside width="261px" class="editor-left">
           <ComponentLibrary
@@ -339,14 +350,15 @@ onMounted(() => {
           />
         </ElAside>
         <!-- 中心：设计区域（ComponentContainer） -->
-        <ElContainer
-          class="editor-center page-prop-area"
+        <div
+          class="editor-center page-prop-area relative mt-4 flex w-full flex-1 flex-col justify-center overflow-hidden"
+          :style="{ backgroundColor: 'var(--app-content-bg-color)' }"
           @click="handlePageSelected"
         >
           <!-- 手机顶部 -->
-          <div class="editor-design-top">
+          <div class="editor-design-top mx-auto flex w-[375px] flex-col">
             <!-- 手机顶部状态栏 -->
-            <img alt="" class="status-bar" :src="statusBarImg" />
+            <img alt="" class="h-5 w-[375px] bg-white" :src="statusBarImg" />
             <!-- 手机顶部导航栏 -->
             <ComponentContainer
               v-if="showNavigationBar"
@@ -373,11 +385,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"
@@ -405,7 +425,7 @@ onMounted(() => {
           <!-- 手机底部导航 -->
           <div
             v-if="showTabBar"
-            class="editor-design-bottom component cursor-pointer"
+            class="editor-design-bottom component mx-auto w-[375px] cursor-pointer"
           >
             <ComponentContainer
               :active="selectedComponent?.id === tabBarComponent.id"
@@ -415,49 +435,57 @@ onMounted(() => {
             />
           </div>
           <!-- 固定布局的组件 操作按钮区 -->
-          <div class="fixed-component-action-group gap-2">
+          <div
+            class="fixed-component-action-group absolute right-4 top-0 flex flex-col gap-2"
+          >
             <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"
-          class="editor-right"
+          class="editor-right shrink-0 overflow-hidden shadow-[-8px_0_8px_-8px_rgb(0_0_0/0.12)]"
           width="350px"
         >
           <ElCard
             body-class="h-[calc(100%-var(--el-card-padding)-var(--el-card-padding))]"
             class="h-full"
-            :bordered="false"
+            shadow="never"
           >
             <!-- 组件名称 -->
             <template #header>
@@ -500,22 +528,8 @@ onMounted(() => {
 /* 手机宽度 */
 $phone-width: 375px;
 
-/* 根节点样式 */
 .editor {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-
-  /* 顶部：工具栏 */
   .editor-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    height: 42px;
-    padding: 0;
-    background-color: var(--el-bg-color);
-    border-bottom: solid 1px var(--el-border-color);
-
     /* 隐藏工具栏按钮的边框 */
     :deep(.el-radio-button__inner),
     :deep(.el-button) {
@@ -527,14 +541,8 @@ $phone-width: 375px;
 
   /* 中心操作区 */
   .editor-container {
-    height: calc(100vh - 135px);
-
     /* 右侧属性面板 */
     :deep(.editor-right) {
-      flex-shrink: 0;
-      overflow: hidden;
-      box-shadow: -8px 0 8px -8px rgb(0 0 0 / 12%);
-
       /* 属性面板顶部：减少内边距 */
       :deep(.el-card__header) {
         padding: 8px 16px;
@@ -563,37 +571,6 @@ $phone-width: 375px;
 
     /* 中心区域 */
     .editor-center {
-      position: relative;
-      display: flex;
-      flex: 1 1 0;
-      flex-direction: column;
-      justify-content: center;
-      width: 100%;
-      margin: 16px 0 0;
-      overflow: hidden;
-      background-color: var(--app-content-bg-color);
-
-      /* 手机顶部 */
-      .editor-design-top {
-        display: flex;
-        flex-direction: column;
-        width: $phone-width;
-        margin: 0 auto;
-
-        /* 手机顶部状态栏 */
-        .status-bar {
-          width: $phone-width;
-          height: 20px;
-          background-color: #fff;
-        }
-      }
-
-      /* 手机底部导航 */
-      .editor-design-bottom {
-        width: $phone-width;
-        margin: 0 auto;
-      }
-
       /* 手机页面编辑区域 */
       :deep(.editor-design-center) {
         width: 100%;
@@ -616,12 +593,6 @@ $phone-width: 375px;
 
       /* 固定布局的组件 操作按钮区 */
       .fixed-component-action-group {
-        position: absolute;
-        top: 0;
-        right: 16px;
-        display: flex;
-        flex-direction: column;
-
         :deep(.el-tag) {
           border: none;
           box-shadow: 0 2px 8px 0 rgb(0 0 0 / 10%);
diff --git a/apps/web-ele/src/views/mall/promotion/components/draggable/index.vue b/apps/web-ele/src/views/mall/promotion/components/draggable/index.vue
index ad7f9f3df..079cf2c7e 100644
--- a/apps/web-ele/src/views/mall/promotion/components/draggable/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/draggable/index.vue
@@ -1,10 +1,9 @@
 <script setup lang="ts">
-// TODO @芋艿：后续合并到 diy-editor 里，并不是通用的；
-
 import { IconifyIcon } from '@vben/icons';
 import { cloneDeep } from '@vben/utils';
 
 import { useVModel } from '@vueuse/core';
+import { ElButton, ElText, ElTooltip } from 'element-plus';
 import VueDraggable from 'vuedraggable';
 
 /** 拖拽组件封装 */
@@ -46,7 +45,7 @@ const handleDelete = function (index: number) {
 </script>
 
 <template>
-  <el-text type="info" size="small"> 拖动左上角的小圆点可对其排序 </el-text>
+  <ElText type="info" size="small"> 拖动左上角的小圆点可对其排序 </ElText>
   <VueDraggable
     :list="formData"
     :force-fallback="true"
@@ -58,34 +57,33 @@ const handleDelete = function (index: number) {
     <template #item="{ element, index }">
       <div class="mb-1 flex flex-col gap-1 rounded border border-gray-200 p-2">
         <!-- 操作按钮区 -->
-        <!-- TODO @AI：是不是用错了？看看项目里，有没替代的 -->
         <div
           class="-m-2 mb-1 flex flex-row items-center justify-between p-2"
-          style="background-color: var(--app-content-bg-color)"
+          style="background-color: var(--el-bg-color-page)"
         >
-          <el-tooltip content="拖动排序">
+          <ElTooltip content="拖动排序">
             <IconifyIcon
               icon="ic:round-drag-indicator"
               class="drag-icon cursor-move"
               style="color: #8a909c"
             />
-          </el-tooltip>
-          <el-tooltip content="删除">
+          </ElTooltip>
+          <ElTooltip content="删除">
             <IconifyIcon
               icon="ep:delete"
               class="cursor-pointer text-red-500"
               v-if="formData.length > min"
               @click="handleDelete(index)"
             />
-          </el-tooltip>
+          </ElTooltip>
         </div>
         <!-- 内容区 -->
         <slot :element="element" :index="index"></slot>
       </div>
     </template>
   </VueDraggable>
-  <el-tooltip :disabled="limit < 1" :content="`最多添加${limit}个`">
-    <el-button
+  <ElTooltip :disabled="limit < 1" :content="`最多添加${limit}个`">
+    <ElButton
       type="primary"
       plain
       class="mt-1 w-full"
@@ -93,8 +91,6 @@ const handleDelete = function (index: number) {
       @click="handleAdd"
     >
       <IconifyIcon icon="ep:plus" /><span>添加</span>
-    </el-button>
-  </el-tooltip>
+    </ElButton>
+  </ElTooltip>
 </template>
-
-<style scoped lang="scss"></style>
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 9223bb11c..4c59d96fa 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
@@ -196,23 +196,25 @@ const eachCube = (callback: (x: number, y: number, cube: Cube) => void) => {
 </script>
 <template>
   <div class="relative">
-    <table class="cube-table">
+    <table class="relative border-separate border-spacing-0">
       <!-- 底层：魔方矩阵 -->
       <tbody>
         <tr v-for="(rowCubes, row) in cubes" :key="row">
           <td
             v-for="(cube, col) in rowCubes"
             :key="col"
-            class="cube"
-            :class="[{ active: cube.active }]"
+            class="box-border cursor-pointer border text-center leading-none"
+            :class="cube.active ? 'bg-[var(--el-color-primary-light-9)]' : ''"
             :style="{
               width: `${cubeSize}px`,
               height: `${cubeSize}px`,
+              color: 'var(--el-text-color-secondary)',
+              borderColor: 'var(--el-border-color)',
             }"
             @click="handleCubeClick(row, col)"
             @mouseenter="handleCellHover(row, col)"
           >
-            <IconifyIcon icon="ep-plus" />
+            <IconifyIcon icon="ep-plus" class="inline-block" />
           </td>
         </tr>
       </tbody>
@@ -220,12 +222,15 @@ const eachCube = (callback: (x: number, y: number, cube: Cube) => void) => {
       <div
         v-for="(hotArea, index) in hotAreas"
         :key="index"
-        class="hot-area"
+        class="absolute box-border flex border-separate border-spacing-0 cursor-pointer items-center justify-center border"
         :style="{
           top: `${cubeSize * hotArea.top}px`,
           left: `${cubeSize * hotArea.left}px`,
           height: `${cubeSize * hotArea.height}px`,
           width: `${cubeSize * hotArea.width}px`,
+          color: 'var(--el-color-primary)',
+          background: 'var(--el-color-primary-light-8)',
+          borderColor: 'var(--el-color-primary)',
         }"
         @click="handleHotAreaSelected(hotArea, index)"
         @mouseover="exitHotAreaSelectMode"
@@ -235,7 +240,7 @@ const eachCube = (callback: (x: number, y: number, cube: Cube) => void) => {
           v-if="
             selectedHotAreaIndex === index && hotArea.width && hotArea.height
           "
-          class="btn-delete"
+          class="absolute -right-2 -top-2 z-[1] flex h-4 w-4 items-center justify-center rounded-full bg-white"
           @click="handleDeleteHotArea(index)"
         >
           <IconifyIcon icon="ep:circle-close-filled" />
@@ -247,55 +252,3 @@ const eachCube = (callback: (x: number, y: number, cube: Cube) => void) => {
     </table>
   </div>
 </template>
-<style lang="scss" scoped>
-.cube-table {
-  position: relative;
-  border-spacing: 0;
-  border-collapse: collapse;
-
-  .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);
-
-    :deep(.iconify) {
-      display: inline-block;
-    }
-
-    &.active {
-      background: var(--el-color-primary-light-9);
-    }
-  }
-
-  .hot-area {
-    position: absolute;
-    box-sizing: border-box;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: var(--el-color-primary);
-    cursor: pointer;
-    border-spacing: 0;
-    border-collapse: collapse;
-    background: var(--el-color-primary-light-8);
-    border: 1px solid var(--el-color-primary);
-
-    .btn-delete {
-      position: absolute;
-      top: -8px;
-      right: -8px;
-      z-index: 1;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 16px;
-      height: 16px;
-      background-color: #fff;
-      border-radius: 50%;
-    }
-  }
-}
-</style>
diff --git a/apps/web-ele/src/views/mall/promotion/components/vertical-button-group/index.vue b/apps/web-ele/src/views/mall/promotion/components/vertical-button-group/index.vue
index 2c076afa5..16f4b33d0 100644
--- a/apps/web-ele/src/views/mall/promotion/components/vertical-button-group/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/vertical-button-group/index.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { ElButtonGroup } from 'element-plus';
+
 /**
  * 垂直按钮组
  * Element 官方的按钮组只支持水平显示，通过重写样式实现垂直布局
@@ -7,17 +9,12 @@ defineOptions({ name: 'VerticalButtonGroup' });
 </script>
 
 <template>
-  <el-button-group v-bind="$attrs">
+  <ElButtonGroup v-bind="$attrs" class="!inline-flex !flex-col">
     <slot></slot>
-  </el-button-group>
+  </ElButtonGroup>
 </template>
 
 <style scoped lang="scss">
-.el-button-group {
-  display: inline-flex;
-  flex-direction: column;
-}
-
 .el-button-group > :deep(.el-button:first-child) {
   border-bottom-color: var(--el-button-divide-border-color);
   border-top-right-radius: var(--el-border-radius-base);
diff --git a/apps/web-ele/src/views/mall/promotion/coupon/components/select-data.ts b/apps/web-ele/src/views/mall/promotion/coupon/components/select-data.ts
index bf7c993e3..4820881d0 100644
--- a/apps/web-ele/src/views/mall/promotion/coupon/components/select-data.ts
+++ b/apps/web-ele/src/views/mall/promotion/coupon/components/select-data.ts
@@ -19,7 +19,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '优惠券名称',
       component: 'Input',
       componentProps: {
-        placeholder: '请输入优惠劵名',
+        placeholder: '请输入优惠券名称',
         clearable: true,
       },
     },
@@ -29,7 +29,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       component: 'Select',
       componentProps: {
         options: getDictOptions(DICT_TYPE.PROMOTION_DISCOUNT_TYPE, 'number'),
-        placeholder: '请选择优惠券类型',
+        placeholder: '请选择优惠类型',
         clearable: true,
       },
     },
diff --git a/apps/web-ele/src/views/mall/promotion/coupon/components/select.vue b/apps/web-ele/src/views/mall/promotion/coupon/components/select.vue
index d243a21d9..073206aff 100644
--- a/apps/web-ele/src/views/mall/promotion/coupon/components/select.vue
+++ b/apps/web-ele/src/views/mall/promotion/coupon/components/select.vue
@@ -5,14 +5,14 @@ import type { MallCouponTemplateApi } from '#/api/mall/promotion/coupon/couponTe
 import { useVbenModal } from '@vben/common-ui';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
-import * as CouponTemplateApi from '#/api/mall/promotion/coupon/couponTemplate';
+import { getCouponTemplatePage } from '#/api/mall/promotion/coupon/couponTemplate';
 
 import { useGridColumns, useGridFormSchema } from './select-data';
 
 defineOptions({ name: 'CouponSelect' });
 
 const props = defineProps<{
-  takeType: number; // 领取方式
+  takeType?: number; // 领取方式
 }>();
 
 const emit = defineEmits(['success']);
@@ -28,7 +28,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     proxyConfig: {
       ajax: {
         query: async ({ page }, formValues) => {
-          return await CouponTemplateApi.getCouponTemplatePage({
+          return await getCouponTemplatePage({
             pageNo: page.currentPage,
             pageSize: page.pageSize,
             ...formValues,
@@ -60,7 +60,7 @@ const [Modal, modalApi] = useVbenModal({
 </script>
 
 <template>
-  <Modal title="选择优惠劵" class="w-3/5">
+  <Modal title="选择优惠券" class="w-2/3">
     <Grid />
   </Modal>
 </template>
diff --git a/apps/web-ele/src/views/mall/promotion/coupon/components/send-form.vue b/apps/web-ele/src/views/mall/promotion/coupon/components/send-form.vue
index 9a8c4b192..ce609628a 100644
--- a/apps/web-ele/src/views/mall/promotion/coupon/components/send-form.vue
+++ b/apps/web-ele/src/views/mall/promotion/coupon/components/send-form.vue
@@ -11,7 +11,7 @@ import { TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { sendCoupon } from '#/api/mall/promotion/coupon/coupon';
 import { getCouponTemplatePage } from '#/api/mall/promotion/coupon/couponTemplate';
 
-import { useFormSchema, useGridColumns } from './send-form-data.ts';
+import { useFormSchema, useGridColumns } from './send-form-data';
 
 /** 发送优惠券 */
 async function handleSendCoupon(row: MallCouponTemplateApi.CouponTemplate) {
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/diy/template/decorate/index.vue b/apps/web-ele/src/views/mall/promotion/diy/template/decorate/index.vue
index 566dc0d5e..3f655becf 100644
--- a/apps/web-ele/src/views/mall/promotion/diy/template/decorate/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/diy/template/decorate/index.vue
@@ -19,9 +19,12 @@ import {
   ElTooltip,
 } from 'element-plus';
 
-import * as DiyPageApi from '#/api/mall/promotion/diy/page';
-import * as DiyTemplateApi from '#/api/mall/promotion/diy/template';
-import { DiyEditor, PAGE_LIBS } from '#/views/mall/promotion/components';
+import { updateDiyPageProperty } from '#/api/mall/promotion/diy/page';
+import {
+  getDiyTemplateProperty,
+  updateDiyTemplateProperty,
+} from '#/api/mall/promotion/diy/template';
+import { DiyEditor, PAGE_LIBS } from '#/views/mall/promotion/components'; // 特殊：存储 reset 重置时，当前 selectedTemplateItem 值，从而进行恢复
 
 /** 装修模板表单 */
 defineOptions({ name: 'DiyTemplateDecorate' });
@@ -59,7 +62,7 @@ async function getPageDetail(id: any) {
     text: '加载中...',
   });
   try {
-    formData.value = await DiyTemplateApi.getDiyTemplateProperty(id);
+    formData.value = await getDiyTemplateProperty(id);
 
     // 拼接手机预览链接
     const domain = import.meta.env.VITE_MALL_H5_DOMAIN;
@@ -116,20 +119,18 @@ async function submitForm() {
       // 情况一：基础设置
       if (i === 0) {
         // 提交模板属性
-        await DiyTemplateApi.updateDiyTemplateProperty(
-          isEmpty(data) ? formData.value! : data,
-        );
+        await updateDiyTemplateProperty(isEmpty(data) ? formData.value! : data);
         continue;
       }
       // 提交页面属性
       // 情况二：提交当前正在编辑的页面
       if (currentFormData.value?.name.includes(templateItem.name)) {
-        await DiyPageApi.updateDiyPageProperty(currentFormData.value!);
+        await updateDiyPageProperty(currentFormData.value!);
         continue;
       }
       // 情况三：提交页面编辑缓存
       if (!isEmpty(data)) {
-        await DiyPageApi.updateDiyPageProperty(data!);
+        await updateDiyPageProperty(data!);
       }
     }
     ElMessage.success('保存成功');
diff --git a/apps/web-ele/src/views/mall/promotion/kefu/asserts/a.png b/apps/web-ele/src/views/mall/promotion/kefu/asserts/a.png
new file mode 100644
index 000000000..32939004d
Binary files /dev/null and b/apps/web-ele/src/views/mall/promotion/kefu/asserts/a.png differ
diff --git a/apps/web-ele/src/views/mall/promotion/kefu/asserts/aini.png b/apps/web-ele/src/views/mall/promotion/kefu/asserts/aini.png
new file mode 100644
index 000000000..02cf5c498
Binary files /dev/null and b/apps/web-ele/src/views/mall/promotion/kefu/asserts/aini.png differ
diff --git a/apps/web-ele/src/views/mall/promotion/kefu/asserts/aixin.png b/apps/web-ele/src/views/mall/promotion/kefu/asserts/aixin.png
new file mode 100644
index 000000000..25e642234
Binary files /dev/null and b/apps/web-ele/src/views/mall/promotion/kefu/asserts/aixin.png differ
diff --git a/apps/web-ele/src/views/mall/promotion/kefu/asserts/baiyan.png b/apps/web-ele/src/views/mall/promotion/kefu/asserts/baiyan.png
new file mode 100644
index 000000000..d16260afd
Binary files /dev/null and b/apps/web-ele/src/views/mall/promotion/kefu/asserts/baiyan.png differ
diff --git a/apps/web-ele/src/views/mall/promotion/kefu/asserts/bizui.png b/apps/web-ele/src/views/mall/promotion/kefu/asserts/bizui.png
new file mode 100644
index 000000000..a3b18002e
Binary files /dev/null and b/apps/web-ele/src/views/mall/promotion/kefu/asserts/bizui.png differ
diff --git a/apps/web-ele/src/views/mall/promotion/kefu/asserts/buhaoyisi.png b/apps/web-ele/src/views/mall/promotion/kefu/asserts/buhaoyisi.png
new file mode 100644
index 000000000..54c4b3f71
Binary files /dev/null and b/apps/web-ele/src/views/mall/promotion/kefu/asserts/buhaoyisi.png differ
diff --git a/apps/web-ele/src/views/mall/promotion/kefu/asserts/bukesiyi.png b/apps/web-ele/src/views/mall/promotion/kefu/asserts/bukesiyi.png
new file mode 100644
index 000000000..5f272e3e4
Binary files /dev/null and b/apps/web-ele/src/views/mall/promotion/kefu/asserts/bukesiyi.png differ
diff --git a/apps/web-ele/src/views/mall/promotion/kefu/asserts/dajing.png b/apps/web-ele/src/views/mall/promotion/kefu/asserts/dajing.png
new file mode 100644
index 000000000..8649727ec
Binary files /dev/null and b/apps/web-ele/src/views/mall/promotion/kefu/asserts/dajing.png differ
diff --git a/apps/web-ele/src/views/mall/promotion/kefu/asserts/danao.png b/apps/web-ele/src/views/mall/promotion/kefu/asserts/danao.png
new file mode 100644
index 000000000..aa85a2947
Binary files /dev/null and b/apps/web-ele/src/views/mall/promotion/kefu/asserts/danao.png differ
diff --git a/apps/web-ele/src/views/mall/promotion/kefu/asserts/daxiao.png b/apps/web-ele/src/views/mall/promotion/kefu/asserts/daxiao.png
new file mode 100644
index 000000000..26206bc05
Binary files /dev/null and b/apps/web-ele/src/views/mall/promotion/kefu/asserts/daxiao.png differ
diff --git a/apps/web-ele/src/views/mall/promotion/kefu/asserts/dianzan.png b/apps/web-ele/src/views/mall/promotion/kefu/asserts/dianzan.png
new file mode 100644
index 000000000..2e7f00eba
Binary files /dev/null and b/apps/web-ele/src/views/mall/promotion/kefu/asserts/dianzan.png differ
diff --git a/apps/web-ele/src/views/mall/promotion/kefu/asserts/emo.png b/apps/web-ele/src/views/mall/promotion/kefu/asserts/emo.png
new file mode 100644
index 000000000..9c8455165
Binary files /dev/null and b/apps/web-ele/src/views/mall/promotion/kefu/asserts/emo.png differ
diff --git a/apps/web-ele/src/views/mall/promotion/kefu/asserts/esi.png b/apps/web-ele/src/views/mall/promotion/kefu/asserts/esi.png
new file mode 100644
index 000000000..84e9726f1
Binary files /dev/null and b/apps/web-ele/src/views/mall/promotion/kefu/asserts/esi.png differ
diff --git a/apps/web-ele/src/views/mall/promotion/kefu/asserts/fadai.png b/apps/web-ele/src/views/mall/promotion/kefu/asserts/fadai.png
new file mode 100644
index 000000000..0772de262
Binary files /dev/null and b/apps/web-ele/src/views/mall/promotion/kefu/asserts/fadai.png differ
diff --git a/apps/web-ele/src/views/mall/promotion/kefu/asserts/fankun.png b/apps/web-ele/src/views/mall/promotion/kefu/asserts/fankun.png
new file mode 100644
index 000000000..6e18dac3e
Binary files /dev/null and b/apps/web-ele/src/views/mall/promotion/kefu/asserts/fankun.png differ
diff --git a/apps/web-ele/src/views/mall/promotion/kefu/asserts/feiwen.png b/apps/web-ele/src/views/mall/promotion/kefu/asserts/feiwen.png
new file mode 100644
index 000000000..be9761658
Binary files /dev/null and b/apps/web-ele/src/views/mall/promotion/kefu/asserts/feiwen.png differ
diff --git a/apps/web-ele/src/views/mall/promotion/kefu/asserts/fennu.png b/apps/web-ele/src/views/mall/promotion/kefu/asserts/fennu.png
new file mode 100644
index 000000000..20c57338c
Binary files /dev/null and b/apps/web-ele/src/views/mall/promotion/kefu/asserts/fennu.png differ
diff --git a/apps/web-ele/src/views/mall/promotion/kefu/asserts/ganga.png b/apps/web-ele/src/views/mall/promotion/kefu/asserts/ganga.png
new file mode 100644
index 000000000..30ec329d2
Binary files /dev/null and b/apps/web-ele/src/views/mall/promotion/kefu/asserts/ganga.png differ
diff --git a/apps/web-ele/src/views/mall/promotion/kefu/asserts/ganmao.png b/apps/web-ele/src/views/mall/promotion/kefu/asserts/ganmao.png
new file mode 100644
index 000000000..35bbb89f3
Binary files /dev/null and b/apps/web-ele/src/views/mall/promotion/kefu/asserts/ganmao.png differ
diff --git a/apps/web-ele/src/views/mall/promotion/kefu/asserts/hanyan.png b/apps/web-ele/src/views/mall/promotion/kefu/asserts/hanyan.png
new file mode 100644
index 000000000..a0bc838b1
Binary files /dev/null and b/apps/web-ele/src/views/mall/promotion/kefu/asserts/hanyan.png differ
diff --git a/apps/web-ele/src/views/mall/promotion/kefu/asserts/haochi.png b/apps/web-ele/src/views/mall/promotion/kefu/asserts/haochi.png
new file mode 100644
index 000000000..2e52b6bee
Binary files /dev/null and b/apps/web-ele/src/views/mall/promotion/kefu/asserts/haochi.png differ
diff --git a/apps/web-ele/src/views/mall/promotion/kefu/asserts/hongxin.png b/apps/web-ele/src/views/mall/promotion/kefu/asserts/hongxin.png
new file mode 100644
index 000000000..65b5de8f0
Binary files /dev/null and b/apps/web-ele/src/views/mall/promotion/kefu/asserts/hongxin.png differ
diff --git a/apps/web-ele/src/views/mall/promotion/kefu/asserts/huaixiao.png b/apps/web-ele/src/views/mall/promotion/kefu/asserts/huaixiao.png
new file mode 100644
index 000000000..bc0e76c4c
Binary files /dev/null and b/apps/web-ele/src/views/mall/promotion/kefu/asserts/huaixiao.png differ
diff --git a/apps/web-ele/src/views/mall/promotion/kefu/asserts/jingkong.png b/apps/web-ele/src/views/mall/promotion/kefu/asserts/jingkong.png
new file mode 100644
index 000000000..7aa65845f
Binary files /dev/null and b/apps/web-ele/src/views/mall/promotion/kefu/asserts/jingkong.png differ
diff --git a/apps/web-ele/src/views/mall/promotion/kefu/asserts/jingshu.png b/apps/web-ele/src/views/mall/promotion/kefu/asserts/jingshu.png
new file mode 100644
index 000000000..0e984d68d
Binary files /dev/null and b/apps/web-ele/src/views/mall/promotion/kefu/asserts/jingshu.png differ
diff --git a/apps/web-ele/src/views/mall/promotion/kefu/asserts/jingya.png b/apps/web-ele/src/views/mall/promotion/kefu/asserts/jingya.png
new file mode 100644
index 000000000..9ba6bab32
Binary files /dev/null and b/apps/web-ele/src/views/mall/promotion/kefu/asserts/jingya.png differ
diff --git a/apps/web-ele/src/views/mall/promotion/kefu/asserts/kaixin.png b/apps/web-ele/src/views/mall/promotion/kefu/asserts/kaixin.png
new file mode 100644
index 000000000..29c9f5ddb
Binary files /dev/null and b/apps/web-ele/src/views/mall/promotion/kefu/asserts/kaixin.png differ
diff --git a/apps/web-ele/src/views/mall/promotion/kefu/asserts/keai.png b/apps/web-ele/src/views/mall/promotion/kefu/asserts/keai.png
new file mode 100644
index 000000000..d3b582c69
Binary files /dev/null and b/apps/web-ele/src/views/mall/promotion/kefu/asserts/keai.png differ
diff --git a/apps/web-ele/src/views/mall/promotion/kefu/asserts/keshui.png b/apps/web-ele/src/views/mall/promotion/kefu/asserts/keshui.png
new file mode 100644
index 000000000..cef489ea4
Binary files /dev/null and b/apps/web-ele/src/views/mall/promotion/kefu/asserts/keshui.png differ
diff --git a/apps/web-ele/src/views/mall/promotion/kefu/asserts/kun.png b/apps/web-ele/src/views/mall/promotion/kefu/asserts/kun.png
new file mode 100644
index 000000000..1ddc388a6
Binary files /dev/null and b/apps/web-ele/src/views/mall/promotion/kefu/asserts/kun.png differ
diff --git a/apps/web-ele/src/views/mall/promotion/kefu/asserts/lengku.png b/apps/web-ele/src/views/mall/promotion/kefu/asserts/lengku.png
new file mode 100644
index 000000000..c5c6feebb
Binary files /dev/null and b/apps/web-ele/src/views/mall/promotion/kefu/asserts/lengku.png differ
diff --git a/apps/web-ele/src/views/mall/promotion/kefu/asserts/liuhan.png b/apps/web-ele/src/views/mall/promotion/kefu/asserts/liuhan.png
new file mode 100644
index 000000000..e6ddc6f4d
Binary files /dev/null and b/apps/web-ele/src/views/mall/promotion/kefu/asserts/liuhan.png differ
diff --git a/apps/web-ele/src/views/mall/promotion/kefu/asserts/liukoushui.png b/apps/web-ele/src/views/mall/promotion/kefu/asserts/liukoushui.png
new file mode 100644
index 000000000..3e2fba656
Binary files /dev/null and b/apps/web-ele/src/views/mall/promotion/kefu/asserts/liukoushui.png differ
diff --git a/apps/web-ele/src/views/mall/promotion/kefu/asserts/liulei.png b/apps/web-ele/src/views/mall/promotion/kefu/asserts/liulei.png
new file mode 100644
index 000000000..dbf820404
Binary files /dev/null and b/apps/web-ele/src/views/mall/promotion/kefu/asserts/liulei.png differ
diff --git a/apps/web-ele/src/views/mall/promotion/kefu/asserts/mengbi.png b/apps/web-ele/src/views/mall/promotion/kefu/asserts/mengbi.png
new file mode 100644
index 000000000..a4206eefb
Binary files /dev/null and b/apps/web-ele/src/views/mall/promotion/kefu/asserts/mengbi.png differ
diff --git a/apps/web-ele/src/views/mall/promotion/kefu/asserts/mianwubiaoqing.png b/apps/web-ele/src/views/mall/promotion/kefu/asserts/mianwubiaoqing.png
new file mode 100644
index 000000000..6f315b98e
Binary files /dev/null and b/apps/web-ele/src/views/mall/promotion/kefu/asserts/mianwubiaoqing.png differ
diff --git a/apps/web-ele/src/views/mall/promotion/kefu/asserts/nanguo.png b/apps/web-ele/src/views/mall/promotion/kefu/asserts/nanguo.png
new file mode 100644
index 000000000..19b9fb94a
Binary files /dev/null and b/apps/web-ele/src/views/mall/promotion/kefu/asserts/nanguo.png differ
diff --git a/apps/web-ele/src/views/mall/promotion/kefu/asserts/outu.png b/apps/web-ele/src/views/mall/promotion/kefu/asserts/outu.png
new file mode 100644
index 000000000..2f9a06d63
Binary files /dev/null and b/apps/web-ele/src/views/mall/promotion/kefu/asserts/outu.png differ
diff --git a/apps/web-ele/src/views/mall/promotion/kefu/asserts/picture.svg b/apps/web-ele/src/views/mall/promotion/kefu/asserts/picture.svg
new file mode 100644
index 000000000..8811d4957
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/kefu/asserts/picture.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+        "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg t="1720063872285" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6895"
+     width="200" height="200">
+    <path d="M782.16 880.98c-179.31 23.91-361 23.91-540.32 0C138.89 867.25 62 779.43 62 675.57V348.43c0-103.86 76.89-191.69 179.84-205.41 179.31-23.91 361-23.91 540.31 0C885.11 156.75 962 244.57 962 348.43v327.13c0 103.87-76.89 191.69-179.84 205.42z"
+          fill="#FF554D" p-id="6896"></path>
+    <path d="M226.11 596.86c-9.74 47.83 17.26 95.6 63.48 111.3C333.49 723.08 394.55 737 469.53 737c59.25 0 105.46-8.69 140.23-19.7 51.59-16.34 79.94-71.16 63.37-122.68-24.47-76.11-65.57-180.7-106.68-180.7-64.62 0-64.62 96.92-64.62 96.92S437.22 317 372.61 317c-82.11 0-117.85 139.12-146.5 279.86z"
+          fill="#FFFFFF" p-id="6897"></path>
+    <path d="M782 347m-60 0a60 60 0 1 0 120 0 60 60 0 1 0-120 0Z" fill="#FFBC55" p-id="6898"></path>
+</svg>
diff --git a/apps/web-ele/src/views/mall/promotion/kefu/asserts/shengqi.png b/apps/web-ele/src/views/mall/promotion/kefu/asserts/shengqi.png
new file mode 100644
index 000000000..7dce41dc9
Binary files /dev/null and b/apps/web-ele/src/views/mall/promotion/kefu/asserts/shengqi.png differ
diff --git a/apps/web-ele/src/views/mall/promotion/kefu/asserts/shuizhuo.png b/apps/web-ele/src/views/mall/promotion/kefu/asserts/shuizhuo.png
new file mode 100644
index 000000000..97d0f0a67
Binary files /dev/null and b/apps/web-ele/src/views/mall/promotion/kefu/asserts/shuizhuo.png differ
diff --git a/apps/web-ele/src/views/mall/promotion/kefu/asserts/tianshi.png b/apps/web-ele/src/views/mall/promotion/kefu/asserts/tianshi.png
new file mode 100644
index 000000000..eb922dd7a
Binary files /dev/null and b/apps/web-ele/src/views/mall/promotion/kefu/asserts/tianshi.png differ
diff --git a/apps/web-ele/src/views/mall/promotion/kefu/asserts/xiaodiaoya.png b/apps/web-ele/src/views/mall/promotion/kefu/asserts/xiaodiaoya.png
new file mode 100644
index 000000000..29fbc0e19
Binary files /dev/null and b/apps/web-ele/src/views/mall/promotion/kefu/asserts/xiaodiaoya.png differ
diff --git a/apps/web-ele/src/views/mall/promotion/kefu/asserts/xiaoku.png b/apps/web-ele/src/views/mall/promotion/kefu/asserts/xiaoku.png
new file mode 100644
index 000000000..88a169d4f
Binary files /dev/null and b/apps/web-ele/src/views/mall/promotion/kefu/asserts/xiaoku.png differ
diff --git a/apps/web-ele/src/views/mall/promotion/kefu/asserts/xinsui.png b/apps/web-ele/src/views/mall/promotion/kefu/asserts/xinsui.png
new file mode 100644
index 000000000..a0f572a11
Binary files /dev/null and b/apps/web-ele/src/views/mall/promotion/kefu/asserts/xinsui.png differ
diff --git a/apps/web-ele/src/views/mall/promotion/kefu/asserts/xiong.png b/apps/web-ele/src/views/mall/promotion/kefu/asserts/xiong.png
new file mode 100644
index 000000000..43dfd7090
Binary files /dev/null and b/apps/web-ele/src/views/mall/promotion/kefu/asserts/xiong.png differ
diff --git a/apps/web-ele/src/views/mall/promotion/kefu/asserts/yiwen.png b/apps/web-ele/src/views/mall/promotion/kefu/asserts/yiwen.png
new file mode 100644
index 000000000..4c0da7095
Binary files /dev/null and b/apps/web-ele/src/views/mall/promotion/kefu/asserts/yiwen.png differ
diff --git a/apps/web-ele/src/views/mall/promotion/kefu/asserts/yun.png b/apps/web-ele/src/views/mall/promotion/kefu/asserts/yun.png
new file mode 100644
index 000000000..56e5d0218
Binary files /dev/null and b/apps/web-ele/src/views/mall/promotion/kefu/asserts/yun.png differ
diff --git a/apps/web-ele/src/views/mall/promotion/kefu/asserts/ziya.png b/apps/web-ele/src/views/mall/promotion/kefu/asserts/ziya.png
new file mode 100644
index 000000000..593ef5e68
Binary files /dev/null and b/apps/web-ele/src/views/mall/promotion/kefu/asserts/ziya.png differ
diff --git a/apps/web-ele/src/views/mall/promotion/kefu/index.vue b/apps/web-ele/src/views/mall/promotion/kefu/index.vue
index bfa96fdff..096cb0cd2 100644
--- a/apps/web-ele/src/views/mall/promotion/kefu/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/kefu/index.vue
@@ -1,26 +1,122 @@
 <script lang="ts" setup>
+import type { MallKefuConversationApi } from '#/api/mall/promotion/kefu/conversation';
+
+import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
+
 import { Page } from '@vben/common-ui';
+import { useAccessStore } from '@vben/stores';
+
+import { useWebSocket } from '@vueuse/core';
+import { ElMessage } from 'element-plus';
+
+import { useMallKefuStore } from '#/store/mall/kefu';
+
+import ConversationList from './modules/conversation-list.vue';
+import MemberInfo from './modules/member/member-info.vue';
+import MessageList from './modules/message-list.vue';
+import { WebSocketMessageTypeConstants } from './modules/tools/constants';
+
+const accessStore = useAccessStore();
+const kefuStore = useMallKefuStore(); // 客服缓存
+
+/** 组件引用 */
+const messageListRef = ref<InstanceType<typeof MessageList>>();
+const memberInfoRef = ref<InstanceType<typeof MemberInfo>>();
+const conversationListRef = ref<InstanceType<typeof ConversationList>>();
+
+// ======================= WebSocket start =======================
+const url = `${`${import.meta.env.VITE_BASE_URL}/infra/ws`.replace(
+  'http',
+  'ws',
+)}?token=${accessStore.refreshToken}`; // 使用 refreshToken() :WebSocket 无法方便的刷新访问令牌
+const server = ref(url); // WebSocket 服务地址
+
+/** 发起 WebSocket 连接 */
+const { data, close, open } = useWebSocket(server.value, {
+  autoReconnect: true,
+  heartbeat: true,
+});
+
+/** 监听 WebSocket 数据 */
+watch(
+  () => data.value,
+  (newData) => {
+    if (!newData) return;
+    try {
+      // 1. 收到心跳
+      if (newData === 'pong') return;
+
+      // 2.1 解析 type 消息类型
+      const jsonMessage = JSON.parse(newData);
+      const type = jsonMessage.type;
+      if (!type) {
+        ElMessage.error(`未知的消息类型：${newData}`);
+        return;
+      }
+
+      // 2.2 消息类型：KEFU_MESSAGE_TYPE
+      if (type === WebSocketMessageTypeConstants.KEFU_MESSAGE_TYPE) {
+        const message = JSON.parse(jsonMessage.content);
+        // 刷新会话列表
+        kefuStore.updateConversation(message.conversationId);
+        // 刷新消息列表
+        messageListRef.value?.refreshMessageList(message);
+        return;
+      }
+
+      // 2.3 消息类型：KEFU_MESSAGE_ADMIN_READ
+      if (type === WebSocketMessageTypeConstants.KEFU_MESSAGE_ADMIN_READ) {
+        // 更新会话已读
+        const message = JSON.parse(jsonMessage.content);
+        kefuStore.updateConversationStatus(message.conversationId);
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  },
+  {
+    immediate: false, // 不立即执行
+  },
+);
+// ======================= WebSocket end =======================
+
+function handleChange(conversation: MallKefuConversationApi.Conversation) {
+  messageListRef.value?.getNewMessageList(conversation);
+  memberInfoRef.value?.initHistory(conversation);
+}
+
+/** 初始化 */
+onMounted(() => {
+  // 加载会话列表
+  kefuStore.setConversationList().then(() => {
+    conversationListRef.value?.calculationLastMessageTime();
+  });
+  // 打开 websocket 连接
+  open();
+});
+
+/** 销毁 */
+onBeforeUnmount(() => {
+  // 关闭 websocket 连接
+  close();
+});
 </script>
 
 <template>
-  <Page>
-    <Button
-      danger
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3"
-    >
-      该功能支持 Vue3 + element-plus 版本！
-    </Button>
-    <br />
-    <Button
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/mall/promotion/kefu/index"
-    >
-      可参考
-      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/mall/promotion/kefu/index
-      代码，pull request 贡献给我们！
-    </Button>
+  <Page auto-content-height>
+    <div class="flex h-full antialiased">
+      <div class="flex h-full w-full flex-row overflow-x-hidden">
+        <!-- 会话列表 -->
+        <ConversationList
+          class="w-1/6"
+          ref="conversationListRef"
+          @change="handleChange"
+        />
+        <!-- 会话详情（选中会话的消息列表） -->
+        <MessageList class="w-4/6" ref="messageListRef" />
+        <!-- 会员信息（选中会话的会员信息） -->
+        <MemberInfo class="w-[280px]" ref="memberInfoRef" />
+      </div>
+    </div>
   </Page>
 </template>
diff --git a/apps/web-ele/src/views/mall/promotion/kefu/modules/conversation-list.vue b/apps/web-ele/src/views/mall/promotion/kefu/modules/conversation-list.vue
new file mode 100644
index 000000000..b05abe4eb
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/kefu/modules/conversation-list.vue
@@ -0,0 +1,250 @@
+<script lang="ts" setup>
+import type { MallKefuConversationApi } from '#/api/mall/promotion/kefu/conversation';
+
+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 { ElAvatar, ElMessage } from 'element-plus';
+
+import {
+  deleteConversation,
+  updateConversationPinned,
+} from '#/api/mall/promotion/kefu/conversation';
+import { useMallKefuStore } from '#/store/mall/kefu';
+
+import { KeFuMessageContentTypeEnum } from './tools/constants';
+import { useEmoji } from './tools/emoji';
+
+/** 打开右侧的消息列表 */
+const emits = defineEmits<{
+  (e: 'change', v: MallKefuConversationApi.Conversation): void;
+}>();
+const kefuStore = useMallKefuStore(); // 客服缓存
+const { replaceEmoji } = useEmoji();
+const activeConversationId = ref(-1); // 选中的会话
+const collapse = ref(false); // 折叠菜单
+
+/** 计算消息最后发送时间距离现在过去了多久 */
+const lastMessageTimeMap = ref<Map<number, string>>(new Map<number, string>());
+function calculationLastMessageTime() {
+  kefuStore.getConversationList?.forEach((item) => {
+    lastMessageTimeMap.value.set(
+      item.id,
+      formatPast(item.lastMessageTime, 'YYYY-MM-DD'),
+    );
+  });
+}
+defineExpose({ calculationLastMessageTime });
+
+function openRightMessage(item: MallKefuConversationApi.Conversation) {
+  // 同一个会话则不处理
+  if (activeConversationId.value === item.id) {
+    return;
+  }
+  activeConversationId.value = item.id;
+  emits('change', item);
+}
+
+/** 获得消息类型 */
+const getConversationDisplayText = computed(
+  () => (lastMessageContentType: number, lastMessageContent: string) => {
+    switch (lastMessageContentType) {
+      case KeFuMessageContentTypeEnum.IMAGE: {
+        return '[图片消息]';
+      }
+      case KeFuMessageContentTypeEnum.ORDER: {
+        return '[订单消息]';
+      }
+      case KeFuMessageContentTypeEnum.PRODUCT: {
+        return '[商品消息]';
+      }
+      case KeFuMessageContentTypeEnum.SYSTEM: {
+        return '[系统消息]';
+      }
+      case KeFuMessageContentTypeEnum.TEXT: {
+        return replaceEmoji(
+          jsonParse(lastMessageContent).text || lastMessageContent,
+        );
+      }
+      case KeFuMessageContentTypeEnum.VIDEO: {
+        return '[视频消息]';
+      }
+      case KeFuMessageContentTypeEnum.VOICE: {
+        return '[语音消息]';
+      }
+      default: {
+        return '';
+      }
+    }
+  },
+);
+
+// ======================= 右键菜单 =======================
+const showRightMenu = ref(false); // 显示右键菜单
+const rightMenuStyle = ref<any>({}); // 右键菜单 Style
+const rightClickConversation = ref<MallKefuConversationApi.Conversation>(
+  {} as MallKefuConversationApi.Conversation,
+); // 右键选中的会话对象
+
+/** 打开右键菜单 */
+function rightClick(
+  mouseEvent: PointerEvent,
+  item: MallKefuConversationApi.Conversation,
+) {
+  rightClickConversation.value = item;
+  // 显示右键菜单
+  showRightMenu.value = true;
+  rightMenuStyle.value = {
+    top: `${mouseEvent.clientY - 110}px`,
+    left: collapse.value
+      ? `${mouseEvent.clientX - 80}px`
+      : `${mouseEvent.clientX - 210}px`,
+  };
+}
+/** 关闭右键菜单 */
+function closeRightMenu() {
+  showRightMenu.value = false;
+}
+
+/** 置顶会话 */
+async function updateConversationPinnedFn(pinned: boolean) {
+  // 1. 会话置顶/取消置顶
+  await updateConversationPinned({
+    id: rightClickConversation.value.id,
+    pinned,
+  });
+  ElMessage.success(pinned ? '置顶成功' : '取消置顶成功');
+  // 2. 关闭右键菜单，更新会话列表
+  closeRightMenu();
+  await kefuStore.updateConversation(rightClickConversation.value.id);
+}
+
+/** 删除会话 */
+async function deleteConversationFn() {
+  // 1. 删除会话
+  confirm({
+    content: '您确定要删除该会话吗？',
+  }).then(async () => {
+    await deleteConversation(rightClickConversation.value.id);
+    // 2. 关闭右键菜单，更新会话列表
+    closeRightMenu();
+    kefuStore.deleteConversation(rightClickConversation.value.id);
+  });
+}
+
+/** 监听右键菜单的显示状态，添加点击事件监听器 */
+watch(showRightMenu, (val) => {
+  if (val) {
+    document.body.addEventListener('click', closeRightMenu);
+  } else {
+    document.body.removeEventListener('click', closeRightMenu);
+  }
+});
+
+const timer = ref<any>();
+
+/** 初始化 */
+onMounted(() => {
+  timer.value = setInterval(calculationLastMessageTime, 1000 * 10); // 十秒计算一次
+});
+
+/** 组件卸载前 */
+onBeforeUnmount(() => {
+  clearInterval(timer.value);
+});
+</script>
+
+<template>
+  <div
+    class="bg-background flex flex-shrink-0 flex-col border-r border-gray-200 p-4"
+  >
+    <div class="flex h-12 w-full flex-row items-center justify-between">
+      <span class="text-lg font-bold">会话记录</span>
+      <span
+        class="flex h-4 w-4 items-center justify-center rounded-full bg-indigo-100 text-indigo-600"
+      >
+        {{ kefuStore.getConversationList.length }}
+      </span>
+    </div>
+    <div class="mt-2 flex flex-col">
+      <div class="-mx-2 mt-4 flex h-48 flex-col space-y-1 overflow-y-auto">
+        <button
+          v-for="(item, index) in kefuStore.getConversationList"
+          :key="index"
+          class="flex flex-row items-center rounded-xl p-2 hover:bg-gray-100"
+          :class="{
+            'bg-gray-500/50': item.id === activeConversationId,
+          }"
+          @click="openRightMessage(item)"
+          @contextmenu.prevent="rightClick($event as PointerEvent, item)"
+        >
+          <div
+            class="flex h-8 w-8 items-center justify-center rounded-full bg-gray-200"
+          >
+            <ElAvatar :src="item.userAvatar" alt="avatar" :size="30" />
+          </div>
+          <div class="ml-2 text-sm font-semibold">
+            {{ item.userNickname || 'null' }}
+          </div>
+          <!-- 最后聊天内容 -->
+          <div
+            v-dompurify-html="
+              getConversationDisplayText(
+                item.lastMessageContentType,
+                item.lastMessageContent,
+              )
+            "
+            class="line-clamp-1 flex items-center text-sm text-gray-500"
+          ></div>
+          <div
+            v-if="item.adminUnreadMessageCount > 0"
+            class="ml-auto flex h-4 w-4 items-center justify-center rounded bg-red-500 text-xs leading-none text-white"
+          >
+            {{ item.adminUnreadMessageCount }}
+          </div>
+        </button>
+      </div>
+    </div>
+
+    <!-- 右键，进行操作（类似微信） -->
+    <ul
+      v-show="showRightMenu"
+      :style="rightMenuStyle"
+      class="bg-background absolute z-[9999] m-0 w-32 list-none rounded-xl p-1 shadow-md"
+    >
+      <li
+        v-show="!rightClickConversation.adminPinned"
+        class="flex cursor-pointer items-center rounded-xl px-4 py-2 transition-colors hover:bg-gray-500/50"
+        @click.stop="updateConversationPinnedFn(true)"
+      >
+        <IconifyIcon class="mr-1" icon="lucide:arrow-up-to-line" />
+        置顶会话
+      </li>
+      <li
+        v-show="rightClickConversation.adminPinned"
+        class="flex cursor-pointer items-center rounded-xl px-4 py-2 transition-colors hover:bg-gray-500/50"
+        @click.stop="updateConversationPinnedFn(false)"
+      >
+        <IconifyIcon class="mr-1" icon="lucide:arrow-down-from-line" />
+        取消置顶
+      </li>
+      <li
+        class="flex cursor-pointer items-center rounded-xl px-4 py-2 transition-colors hover:bg-gray-500/50"
+        @click.stop="deleteConversationFn"
+      >
+        <IconifyIcon class="mr-1" color="red" icon="lucide:trash-2" />
+        删除会话
+      </li>
+      <li
+        class="flex cursor-pointer items-center rounded-xl px-4 py-2 transition-colors hover:bg-gray-500/50"
+        @click.stop="closeRightMenu"
+      >
+        <IconifyIcon class="mr-1" color="red" icon="lucide:x" />
+        取消
+      </li>
+    </ul>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/mall/promotion/kefu/modules/member/member-info.vue b/apps/web-ele/src/views/mall/promotion/kefu/modules/member/member-info.vue
new file mode 100644
index 000000000..5812205e2
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/kefu/modules/member/member-info.vue
@@ -0,0 +1,224 @@
+<!-- 右侧信息：会员信息 + 最近浏览 + 交易订单 -->
+<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, toRefs, watch } from 'vue';
+
+import { isEmpty } from '@vben/utils';
+
+import { useScroll } from '@vueuse/core';
+import { ElEmpty, ElMessage } from 'element-plus';
+
+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';
+
+import OrderBrowsingHistory from './order-browsing-history.vue';
+import ProductBrowsingHistory from './product-browsing-history.vue';
+
+const activeTab = ref<string>('会员信息');
+
+const tabActivation = computed(() => (tab: string) => activeTab.value === tab);
+
+/** tab 切换 */
+const productBrowsingHistoryRef =
+  ref<InstanceType<typeof ProductBrowsingHistory>>();
+const orderBrowsingHistoryRef =
+  ref<InstanceType<typeof OrderBrowsingHistory>>();
+async function handleClick(tab: string) {
+  activeTab.value = tab;
+  await nextTick();
+  await getHistoryList();
+}
+
+/** 获得历史数据 */
+async function getHistoryList() {
+  switch (activeTab.value) {
+    case '交易订单': {
+      await orderBrowsingHistoryRef.value?.getHistoryList(conversation.value);
+      break;
+    }
+    case '会员信息': {
+      await getUserData();
+      await getUserWallet();
+      break;
+    }
+    case '最近浏览': {
+      await productBrowsingHistoryRef.value?.getHistoryList(conversation.value);
+      break;
+    }
+    default: {
+      break;
+    }
+  }
+}
+
+/** 加载下一页数据 */
+async function loadMore() {
+  switch (activeTab.value) {
+    case '交易订单': {
+      await orderBrowsingHistoryRef.value?.loadMore();
+      break;
+    }
+    case '会员信息': {
+      break;
+    }
+    case '最近浏览': {
+      await productBrowsingHistoryRef.value?.loadMore();
+      break;
+    }
+    default: {
+      break;
+    }
+  }
+}
+
+/** 浏览历史初始化 */
+const conversation = ref<MallKefuConversationApi.Conversation>(
+  {} as MallKefuConversationApi.Conversation,
+); // 用户会话
+async function initHistory(val: MallKefuConversationApi.Conversation) {
+  activeTab.value = '会员信息';
+  conversation.value = val;
+  await nextTick();
+  await getHistoryList();
+}
+defineExpose({ initHistory });
+
+/** 处理消息列表滚动事件(debounce 限流) */
+const scrollbarRef = ref<InstanceType<any>>();
+const { arrivedState } = useScroll(scrollbarRef);
+const { bottom } = toRefs(arrivedState);
+watch(
+  () => bottom.value,
+  async (newVal) => {
+    if (newVal) {
+      await loadMore();
+    }
+  },
+);
+
+/** 查询用户钱包信息 */
+const WALLET_INIT_DATA = {
+  balance: 0,
+  totalExpense: 0,
+  totalRecharge: 0,
+} as PayWalletApi.Wallet; // 钱包初始化数据
+const wallet = ref<PayWalletApi.Wallet>(WALLET_INIT_DATA); // 钱包信息
+
+async function getUserWallet() {
+  if (!conversation.value.userId) {
+    wallet.value = WALLET_INIT_DATA;
+    return;
+  }
+  wallet.value =
+    (await getWallet({ userId: conversation.value.userId })) ||
+    WALLET_INIT_DATA;
+}
+
+/** 获得用户 */
+const loading = ref(true); // 加载中
+const user = ref<MemberUserApi.User>({} as MemberUserApi.User);
+async function getUserData() {
+  loading.value = true;
+  try {
+    const res = await getUser(conversation.value.userId);
+    if (res) {
+      user.value = res;
+    } else {
+      user.value = {} as MemberUserApi.User;
+      ElMessage.error('会员不存在！');
+    }
+  } finally {
+    loading.value = false;
+  }
+}
+</script>
+
+<template>
+  <div class="bg-background flex h-full flex-auto flex-col">
+    <div
+      class="mt-4 flex h-12 items-center justify-around before:absolute before:bottom-0 before:left-0 before:h-1 before:w-full before:scale-y-[0.3] before:bg-gray-200 before:content-['']"
+    >
+      <div
+        :class="{
+          'before:border-primary before:border-b-2': tabActivation('会员信息'),
+        }"
+        class="relative flex w-full cursor-pointer items-center justify-center before:pointer-events-none before:absolute before:inset-0 before:content-[''] hover:before:border-b-2 hover:before:border-gray-500/50"
+        @click="handleClick('会员信息')"
+      >
+        会员信息
+      </div>
+      <div
+        :class="{
+          'before:border-primary before:border-b-2': tabActivation('最近浏览'),
+        }"
+        class="relative flex w-full cursor-pointer items-center justify-center before:pointer-events-none before:absolute before:inset-0 before:content-[''] hover:before:border-b-2 hover:before:border-gray-500/50"
+        @click="handleClick('最近浏览')"
+      >
+        最近浏览
+      </div>
+      <div
+        :class="{
+          'before:border-primary before:border-b-2': tabActivation('交易订单'),
+        }"
+        class="relative flex w-full cursor-pointer items-center justify-center before:pointer-events-none before:absolute before:inset-0 before:content-[''] hover:before:border-b-2 hover:before:border-gray-500/50"
+        @click="handleClick('交易订单')"
+      >
+        交易订单
+      </div>
+    </div>
+    <div class="relative m-0 h-full w-full overflow-x-auto p-2">
+      <template v-if="!isEmpty(conversation)">
+        <div
+          v-loading="loading"
+          v-if="activeTab === '会员信息'"
+          class="relative overflow-y-auto overflow-x-hidden"
+        >
+          <!-- 基本信息 -->
+          <BasicInfo :user="user" mode="kefu">
+            <template #title>
+              <span class="text-sm font-bold">基本信息</span>
+            </template>
+          </BasicInfo>
+          <!-- 账户信息 -->
+          <AccountInfo
+            :column="1"
+            :user="user"
+            :wallet="wallet"
+            mode="kefu"
+            class="mt-2"
+          >
+            <template #title>
+              <span class="text-sm font-bold">账户信息</span>
+            </template>
+          </AccountInfo>
+        </div>
+        <div
+          v-show="activeTab !== '会员信息'"
+          ref="scrollbarRef"
+          class="relative h-full overflow-y-auto overflow-x-hidden"
+        >
+          <!-- 最近浏览 -->
+          <ProductBrowsingHistory
+            v-if="activeTab === '最近浏览'"
+            ref="productBrowsingHistoryRef"
+          />
+          <!-- 交易订单 -->
+          <OrderBrowsingHistory
+            v-if="activeTab === '交易订单'"
+            ref="orderBrowsingHistoryRef"
+          />
+        </div>
+      </template>
+      <ElEmpty
+        v-else
+        description="请选择左侧的一个会话后开始"
+        class="mt-[20%]"
+      />
+    </div>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/mall/promotion/kefu/modules/member/order-browsing-history.vue b/apps/web-ele/src/views/mall/promotion/kefu/modules/member/order-browsing-history.vue
new file mode 100644
index 000000000..a7a5fa65c
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/kefu/modules/member/order-browsing-history.vue
@@ -0,0 +1,47 @@
+<script lang="ts" setup>
+import type { MallKefuConversationApi } from '#/api/mall/promotion/kefu/conversation';
+
+import { computed, reactive, ref } from 'vue';
+
+import { getOrderPage } from '#/api/mall/trade/order';
+import OrderItem from '#/views/mall/promotion/kefu/modules/message/order-item.vue';
+
+const list = ref<any>([]); // 列表
+const total = ref(0); // 总数
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  userId: 0,
+});
+const skipGetMessageList = computed(() => {
+  // 已加载到最后一页的话则不触发新的消息获取
+  return (
+    total.value > 0 &&
+    Math.ceil(total.value / queryParams.pageSize) === queryParams.pageNo
+  );
+}); // 跳过消息获取
+
+/** 获得浏览记录 */
+async function getHistoryList(val: MallKefuConversationApi.Conversation) {
+  queryParams.userId = val.userId;
+  const res = await getOrderPage(queryParams);
+  total.value = res.total;
+  list.value = res.list;
+}
+
+/** 加载下一页数据 */
+async function loadMore() {
+  if (skipGetMessageList.value) {
+    return;
+  }
+  queryParams.pageNo += 1;
+  const res = await getOrderPage(queryParams);
+  total.value = res.total;
+  list.value = [...list.value, ...res.list];
+}
+defineExpose({ getHistoryList, loadMore });
+</script>
+
+<template>
+  <OrderItem v-for="item in list" :key="item.id" :order="item" />
+</template>
diff --git a/apps/web-ele/src/views/mall/promotion/kefu/modules/member/product-browsing-history.vue b/apps/web-ele/src/views/mall/promotion/kefu/modules/member/product-browsing-history.vue
new file mode 100644
index 000000000..c35d87bd9
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/kefu/modules/member/product-browsing-history.vue
@@ -0,0 +1,58 @@
+<script lang="ts" setup>
+import type { MallKefuConversationApi } from '#/api/mall/promotion/kefu/conversation';
+
+import { computed, reactive, ref } from 'vue';
+
+import { getBrowseHistoryPage } from '#/api/mall/product/history';
+import ProductItem from '#/views/mall/promotion/kefu/modules/message/product-item.vue';
+
+const list = ref<any>([]); // 列表
+const total = ref(0); // 总数
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  userId: 0,
+  userDeleted: false,
+});
+const skipGetMessageList = computed(() => {
+  // 已加载到最后一页的话则不触发新的消息获取
+  return (
+    total.value > 0 &&
+    Math.ceil(total.value / queryParams.pageSize) === queryParams.pageNo
+  );
+}); // 跳过消息获取
+
+/** 获得浏览记录 */
+async function getHistoryList(val: MallKefuConversationApi.Conversation) {
+  queryParams.userId = val.userId;
+  const res = await getBrowseHistoryPage(queryParams);
+  total.value = res.total;
+  list.value = res.list;
+}
+
+/** 加载下一页数据 */
+async function loadMore() {
+  if (skipGetMessageList.value) {
+    return;
+  }
+  queryParams.pageNo += 1;
+  const res = await getBrowseHistoryPage(queryParams);
+  total.value = res.total;
+  list.value = [...list.value, ...res.list];
+}
+defineExpose({ getHistoryList, loadMore });
+</script>
+
+<template>
+  <ProductItem
+    v-for="item in list"
+    :key="item.id"
+    :pic-url="item.picUrl"
+    :price="item.price"
+    :sales-count="item.salesCount"
+    :spu-id="item.spuId"
+    :stock="item.stock"
+    :title="item.spuName"
+    class="mb-2.5"
+  />
+</template>
diff --git a/apps/web-ele/src/views/mall/promotion/kefu/modules/message-list.vue b/apps/web-ele/src/views/mall/promotion/kefu/modules/message-list.vue
new file mode 100644
index 000000000..a77da00cd
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/kefu/modules/message-list.vue
@@ -0,0 +1,429 @@
+<script lang="ts" setup>
+import type { Emoji } from './tools/emoji';
+
+import type { MallKefuConversationApi } from '#/api/mall/promotion/kefu/conversation';
+import type { MallKefuMessageApi } from '#/api/mall/promotion/kefu/message';
+
+import { computed, reactive, ref, toRefs, unref, watch } from 'vue';
+
+import { UserTypeEnum } from '@vben/constants';
+import { IconifyIcon } from '@vben/icons';
+import { formatDate, isEmpty, jsonParse } from '@vben/utils';
+
+import { useScroll } from '@vueuse/core';
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
+import {
+  ElAvatar,
+  ElEmpty,
+  ElImage,
+  ElInput,
+  ElNotification,
+} from 'element-plus';
+
+import {
+  getKeFuMessageList,
+  sendKeFuMessage,
+  updateKeFuMessageReadStatus,
+} from '#/api/mall/promotion/kefu/message';
+import { useMallKefuStore } from '#/store/mall/kefu';
+
+import MessageItem from './message/message-item.vue';
+import OrderItem from './message/order-item.vue';
+import ProductItem from './message/product-item.vue';
+import { KeFuMessageContentTypeEnum } from './tools/constants';
+import { useEmoji } from './tools/emoji';
+import EmojiSelectPopover from './tools/emoji-select-popover.vue';
+import PictureSelectUpload from './tools/picture-select-upload.vue';
+
+dayjs.extend(relativeTime);
+
+const message = ref(''); // 消息弹窗
+const { replaceEmoji } = useEmoji();
+const messageList = ref<MallKefuMessageApi.Message[]>([]); // 消息列表
+const conversation = ref<MallKefuConversationApi.Conversation>(
+  {} as MallKefuConversationApi.Conversation,
+); // 用户会话
+const showNewMessageTip = ref(false); // 显示有新消息提示
+const queryParams = reactive({
+  conversationId: 0,
+  createTime: undefined,
+});
+const total = ref(0); // 消息总条数
+const refreshContent = ref(false); // 内容刷新,主要解决会话消息页面高度不一致导致的滚动功能精度失效
+const kefuStore = useMallKefuStore(); // 客服缓存
+const skipGetMessageList = ref(false); // 跳过消息获取
+const loadHistory = ref(false); // 加载历史消息
+
+/** 获悉消息内容 */
+const getMessageContent = computed(
+  () => (item: any) => jsonParse(item.content),
+);
+
+/** 获得消息列表 */
+async function getMessageList() {
+  const res: any = await getKeFuMessageList(queryParams as any);
+  if (isEmpty(res)) {
+    // 当返回的是空列表说明没有消息或者已经查询完了历史消息
+    skipGetMessageList.value = true;
+    return;
+  }
+  queryParams.createTime = formatDate(
+    (res as any).at(-1).createTime,
+    'YYYY-MM-DD HH:mm:ss',
+  ) as any;
+
+  // 如果 createTime 存在，说明是加载历史消息，需要追加到列表
+  if (queryParams.createTime) {
+    // 情况一：加载历史消息，追加到列表
+    for (const item of res as any) {
+      pushMessage(item);
+    }
+  } else {
+    // 情况二：加载最新消息，直接替换列表
+    messageList.value = res;
+  }
+  refreshContent.value = true;
+}
+
+/** 添加消息 */
+function pushMessage(message: any) {
+  if (messageList.value.some((val) => val.id === message.id)) {
+    return;
+  }
+  messageList.value.push(message);
+}
+
+/** 按照时间倒序，获取消息列表 */
+const getMessageList0 = computed(() => {
+  // 使用展开运算符创建新数组，避免直接修改原数组
+  return [...messageList.value].sort(
+    (a: any, b: any) => a.createTime - b.createTime,
+  );
+});
+
+/** 刷新消息列表 */
+async function refreshMessageList(message?: any) {
+  if (!conversation.value) {
+    return;
+  }
+
+  if (message === undefined) {
+    queryParams.createTime = undefined;
+    await getMessageList();
+  } else {
+    // 当前查询会话与消息所属会话不一致则不做处理
+    if (message.conversationId !== conversation.value.id) {
+      return;
+    }
+    pushMessage(message);
+  }
+
+  if (loadHistory.value) {
+    // 右下角显示有新消息提示
+    showNewMessageTip.value = true;
+  } else {
+    // 滚动到最新消息处
+    await handleToNewMessage();
+  }
+}
+
+/** 获得新会话的消息列表, 点击切换时，读取缓存；然后异步获取新消息，merge 下； */
+async function getNewMessageList(val: MallKefuConversationApi.Conversation) {
+  // 1. 缓存当前会话消息列表
+  kefuStore.saveMessageList(conversation.value.id, messageList.value);
+  // 2.1 会话切换,重置相关参数
+  messageList.value = kefuStore.getConversationMessageList(val.id) || [];
+  total.value = messageList.value.length || 0;
+  loadHistory.value = false;
+  refreshContent.value = false;
+  skipGetMessageList.value = false;
+  // 2.2 设置会话相关属性
+  conversation.value = val;
+  queryParams.conversationId = val.id;
+  queryParams.createTime = undefined;
+  // 3. 获取消息
+  await refreshMessageList();
+}
+defineExpose({ getNewMessageList, refreshMessageList });
+
+/** 是否显示聊天区域 */
+function showMessageList() {
+  return !isEmpty(conversation.value);
+}
+
+/** 处理表情选择 */
+function handleEmojiSelect(item: Emoji) {
+  message.value += item.name;
+}
+
+/** 处理图片发送 */
+async function handleSendPicture(picUrl: string) {
+  // 组织发送消息
+  const msg = {
+    conversationId: conversation.value.id,
+    contentType: KeFuMessageContentTypeEnum.IMAGE,
+    content: JSON.stringify({ picUrl }),
+  };
+  await sendMessage(msg);
+}
+
+/** 发送文本消息 */
+async function handleSendMessage(event: any) {
+  // shift 不发送
+  if (event.shiftKey) {
+    return;
+  }
+  // 1. 校验消息是否为空
+  if (isEmpty(unref(message.value)?.trim())) {
+    ElNotification.warning({ message: '请输入消息后再发送哦！' });
+    message.value = '';
+    return;
+  }
+  // 2. 组织发送消息
+  const msg = {
+    conversationId: conversation.value.id,
+    contentType: KeFuMessageContentTypeEnum.TEXT,
+    content: JSON.stringify({ text: message.value }),
+  };
+  await sendMessage(msg);
+}
+
+/** 真正发送消息 【共用】*/
+async function sendMessage(msg: MallKefuMessageApi.MessageSend) {
+  // 发送消息
+  await sendKeFuMessage(msg);
+  message.value = '';
+  // 加载消息列表
+  await refreshMessageList();
+  // 更新会话缓存
+  await kefuStore.updateConversation(conversation.value.id);
+}
+
+/** 滚动到底部 */
+const scrollbarRef = ref<HTMLElement | null>(null);
+const { y, arrivedState } = useScroll(scrollbarRef);
+
+const { bottom } = toRefs(arrivedState);
+
+async function scrollToBottom() {
+  if (!scrollbarRef.value) return;
+  // 1. 首次加载时滚动到最新消息，如果加载的是历史消息则不滚动
+  if (loadHistory.value) {
+    return;
+  }
+  // 2.1 滚动到最新消息，关闭新消息提示
+  // 使用 useScroll 监听滚动容器
+  y.value = scrollbarRef.value.scrollHeight - scrollbarRef.value!.clientHeight;
+  showNewMessageTip.value = false;
+  // 2.2 消息已读
+  await updateKeFuMessageReadStatus(conversation.value.id);
+}
+
+/** 查看新消息 */
+async function handleToNewMessage() {
+  loadHistory.value = false;
+  await scrollToBottom();
+}
+
+watch(
+  () => bottom.value,
+  (newVal) => {
+    if (newVal) {
+      if (skipGetMessageList.value) {
+        return;
+      }
+      // 滚动到底部了
+      if (newVal) {
+        loadHistory.value = false;
+        refreshMessageList();
+      }
+
+      // 触顶自动加载下一页数据
+      if (arrivedState.top) {
+        handleOldMessage();
+      }
+    }
+  },
+);
+/** 加载历史消息 */
+async function handleOldMessage() {
+  loadHistory.value = true;
+  await getMessageList();
+}
+
+/** 是否显示时间 */
+function showTime(item: MallKefuMessageApi.Message, index: number) {
+  if (unref(messageList.value)[index + 1]) {
+    const dateString = dayjs(
+      unref(messageList.value)[index + 1]!.createTime,
+    ).fromNow();
+    return dateString !== dayjs(unref(item).createTime).fromNow();
+  }
+  return false;
+}
+</script>
+
+<template>
+  <div
+    v-if="showMessageList()"
+    class="bg-background flex h-full flex-auto flex-col p-4"
+  >
+    <div class="flex h-full flex-auto flex-shrink-0 flex-col">
+      <div class="flex h-12 w-full flex-row items-center justify-between">
+        <span class="text-lg font-bold">{{ conversation.userNickname }}</span>
+      </div>
+      <div
+        ref="scrollbarRef"
+        class="mb-4 flex h-full flex-col overflow-x-auto rounded-lg bg-gray-100 p-2"
+      >
+        <div class="flex flex-col">
+          <!-- 消息列表 -->
+          <div
+            v-for="(item, index) in getMessageList0"
+            :key="item.id"
+            class="w-full"
+          >
+            <div class="mb-5 flex items-center justify-center">
+              <!-- 日期 -->
+              <div
+                v-if="
+                  item.contentType !== KeFuMessageContentTypeEnum.SYSTEM &&
+                  showTime(item, index)
+                "
+                class="w-fit rounded-lg bg-black/10 px-2 text-xs"
+              >
+                {{ formatDate(item.createTime) }}
+              </div>
+              <!-- 系统消息 -->
+              <div
+                v-if="item.contentType === KeFuMessageContentTypeEnum.SYSTEM"
+                class="w-fit rounded-lg bg-black/10 px-2 text-xs"
+              >
+                {{ item.content }}
+              </div>
+            </div>
+            <div
+              :class="[
+                item.senderType === UserTypeEnum.MEMBER
+                  ? 'justify-start'
+                  : item.senderType === UserTypeEnum.ADMIN
+                    ? 'justify-end'
+                    : '',
+              ]"
+              class="mb-5 flex w-full"
+            >
+              <ElAvatar
+                v-if="item.senderType === UserTypeEnum.MEMBER"
+                :src="conversation.userAvatar"
+                alt="avatar"
+                class="size-8"
+              />
+              <div
+                :class="{
+                  'w-auto max-w-[50%] p-1 font-medium text-gray-500 transition-all duration-200 hover:scale-105':
+                    KeFuMessageContentTypeEnum.TEXT === item.contentType,
+                  'm-1 break-words rounded-lg bg-gray-100':
+                    KeFuMessageContentTypeEnum.TEXT === item.contentType &&
+                    item.senderType === UserTypeEnum.MEMBER,
+                  'm-1 break-words rounded-lg bg-blue-50':
+                    KeFuMessageContentTypeEnum.TEXT === item.contentType &&
+                    item.senderType === UserTypeEnum.ADMIN,
+                }"
+              >
+                <!-- 文本消息 -->
+                <MessageItem :message="item">
+                  <template
+                    v-if="KeFuMessageContentTypeEnum.TEXT === item.contentType"
+                  >
+                    <div
+                      v-dompurify-html="
+                        replaceEmoji(
+                          getMessageContent(item).text || item.content,
+                        )
+                      "
+                      class="h-full w-full text-justify"
+                    ></div>
+                  </template>
+                </MessageItem>
+                <!-- 图片消息 -->
+                <MessageItem :message="item">
+                  <ElImage
+                    v-if="KeFuMessageContentTypeEnum.IMAGE === item.contentType"
+                    :initial-index="0"
+                    :preview-src-list="[
+                      getMessageContent(item).picUrl || item.content,
+                    ]"
+                    :src="getMessageContent(item).picUrl || item.content"
+                    class="mx-2 !w-52"
+                    fit="contain"
+                    preview-teleported
+                  />
+                </MessageItem>
+                <!-- 商品消息 -->
+                <MessageItem :message="item">
+                  <ProductItem
+                    v-if="
+                      KeFuMessageContentTypeEnum.PRODUCT === item.contentType
+                    "
+                    :pic-url="getMessageContent(item).picUrl"
+                    :price="getMessageContent(item).price"
+                    :sales-count="getMessageContent(item).salesCount"
+                    :spu-id="getMessageContent(item).spuId"
+                    :stock="getMessageContent(item).stock"
+                    :title="getMessageContent(item).spuName"
+                    class="mx-2 max-w-80"
+                  />
+                </MessageItem>
+                <!-- 订单消息 -->
+                <MessageItem :message="item">
+                  <OrderItem
+                    v-if="KeFuMessageContentTypeEnum.ORDER === item.contentType"
+                    :message="item"
+                    class="mx-2 max-w-full"
+                  />
+                </MessageItem>
+              </div>
+              <ElAvatar
+                v-if="item.senderType === UserTypeEnum.ADMIN"
+                :src="item.senderAvatar"
+                alt="avatar"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        v-show="showNewMessageTip"
+        class="absolute bottom-9 right-9 z-10 flex cursor-pointer items-center rounded-lg p-2 text-xs shadow-md"
+        @click="handleToNewMessage"
+      >
+        <span>有新消息</span>
+        <IconifyIcon class="ml-1" icon="lucide:arrow-down-from-line" />
+      </div>
+      <div class="flex flex-col">
+        <div class="-mt-2 flex flex-col rounded-xl border">
+          <div class="flex h-10 w-full items-center">
+            <EmojiSelectPopover @select-emoji="handleEmojiSelect" />
+            <PictureSelectUpload
+              class="ml-4 mt-1 cursor-pointer"
+              @send-picture="handleSendPicture"
+            />
+          </div>
+          <ElInput
+            type="textarea"
+            v-model="message"
+            :rows="4"
+            class="border-none p-2"
+            placeholder="输入消息，Enter发送，Shift+Enter换行"
+            @keyup.enter="handleSendMessage"
+            :input-style="{ boxShadow: 'none' }"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+  <div v-else class="bg-background relative">
+    <ElEmpty description="请选择左侧的一个会话后开始" class="mt-[20%]" />
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/mall/promotion/kefu/modules/message/message-item.vue b/apps/web-ele/src/views/mall/promotion/kefu/modules/message/message-item.vue
new file mode 100644
index 000000000..7c8e3153b
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/kefu/modules/message/message-item.vue
@@ -0,0 +1,25 @@
+<script lang="ts" setup>
+import type { MallKefuMessageApi } from '#/api/mall/promotion/kefu/message';
+
+import { UserTypeEnum } from '@vben/constants';
+
+/** 消息组件 */
+
+defineProps<{
+  message: MallKefuMessageApi.Message;
+}>();
+</script>
+
+<template>
+  <div
+    :class="[
+      message.senderType === UserTypeEnum.MEMBER
+        ? `ml-2`
+        : message.senderType === UserTypeEnum.ADMIN
+          ? `mr-2`
+          : '',
+    ]"
+  >
+    <slot></slot>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/mall/promotion/kefu/modules/message/order-item.vue b/apps/web-ele/src/views/mall/promotion/kefu/modules/message/order-item.vue
new file mode 100644
index 000000000..8e73ac8ae
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/kefu/modules/message/order-item.vue
@@ -0,0 +1,121 @@
+<script lang="ts" setup>
+import type { MallKefuMessageApi } from '#/api/mall/promotion/kefu/message';
+
+import { computed } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { fenToYuan, isObject, jsonParse } from '@vben/utils';
+
+import ProductItem from './product-item.vue';
+
+const props = defineProps<{
+  message?: MallKefuMessageApi.Message;
+  order?: any;
+}>();
+
+const { push } = useRouter();
+
+const getMessageContent = computed(() =>
+  props.message === undefined
+    ? props.order
+    : jsonParse(props!.message!.content),
+);
+
+/** 查看订单详情 */
+function openDetail(id: number) {
+  push({ name: 'TradeOrderDetail', params: { id } });
+}
+
+/** 格式化订单状态的颜色 */
+function formatOrderColor(order: any) {
+  if (order.status === 0) {
+    return 'text-gray-500';
+  }
+  if (
+    order.status === 10 ||
+    order.status === 20 ||
+    (order.status === 30 && !order.commentStatus)
+  ) {
+    return 'text-orange-500';
+  }
+  if (order.status === 30 && order.commentStatus) {
+    return 'text-green-500';
+  }
+  return 'text-red-500';
+}
+
+/** 格式化订单状态 */
+function formatOrderStatus(order: any) {
+  if (order.status === 0) {
+    return '待付款';
+  }
+  if (order.status === 10 && order.deliveryType === 1) {
+    return '待发货';
+  }
+  if (order.status === 10 && order.deliveryType === 2) {
+    return '待核销';
+  }
+  if (order.status === 20) {
+    return '待收货';
+  }
+  if (order.status === 30 && !order.commentStatus) {
+    return '待评价';
+  }
+  if (order.status === 30 && order.commentStatus) {
+    return '已完成';
+  }
+  return '已关闭';
+}
+</script>
+
+<template>
+  <div
+    v-if="isObject(getMessageContent)"
+    :key="getMessageContent.id"
+    class="mb-2 rounded-md bg-gray-500/30 p-2"
+  >
+    <div class="flex h-6 items-center justify-between px-1 font-bold">
+      <div class="flex flex-row text-sm">
+        <div>订单号：</div>
+        <span
+          class="text-primary cursor-pointer hover:underline"
+          @click="openDetail(getMessageContent.id)"
+        >
+          {{ getMessageContent.no }}
+        </span>
+      </div>
+      <div
+        :class="formatOrderColor(getMessageContent)"
+        class="text-sm font-bold"
+      >
+        {{ formatOrderStatus(getMessageContent) }}
+      </div>
+    </div>
+    <div
+      v-for="item in getMessageContent.items"
+      :key="item.id"
+      class="border-b border-gray-200"
+    >
+      <ProductItem
+        :num="item.count"
+        :pic-url="item.picUrl"
+        :price="item.price"
+        :sku-text="
+          item.properties.map((property: any) => property.valueName).join(' ')
+        "
+        :spu-id="item.spuId"
+        :title="item.spuName"
+      />
+    </div>
+    <div class="flex justify-end pr-1.5 pt-2.5 font-bold">
+      <div class="flex items-center">
+        <div class="text-sm leading-normal">
+          共 {{ getMessageContent?.productCount }} 件商品,总金额:
+        </div>
+        <div class="text-sm font-medium leading-normal">
+          ￥{{ fenToYuan(getMessageContent?.payPrice) }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/mall/promotion/kefu/modules/message/product-item.vue b/apps/web-ele/src/views/mall/promotion/kefu/modules/message/product-item.vue
new file mode 100644
index 000000000..da580820a
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/kefu/modules/message/product-item.vue
@@ -0,0 +1,73 @@
+<script lang="ts" setup>
+import { useRouter } from 'vue-router';
+
+import { fenToYuan } from '@vben/utils';
+
+import { ElButton, ElImage } from 'element-plus';
+
+defineProps({
+  spuId: {
+    type: Number,
+    default: 0,
+  },
+  picUrl: {
+    type: String,
+    default: 'https://img1.baidu.com/it/u=1601695551,235775011&fm=26&fmt=auto',
+  },
+  title: {
+    type: String,
+    default: '',
+  },
+  price: {
+    type: [String, Number],
+    default: '',
+  },
+  salesCount: {
+    type: [String, Number],
+    default: '',
+  },
+  stock: {
+    type: [String, Number],
+    default: '',
+  },
+});
+
+const { push } = useRouter();
+
+/** 查看商品详情 */
+function openDetail(spuId: number) {
+  push({ name: 'ProductSpuDetail', params: { id: spuId } });
+}
+</script>
+
+<template>
+  <div
+    class="mb-2.5 flex w-full cursor-pointer items-center rounded-lg bg-gray-500/30 p-2.5"
+    @click.stop="openDetail(spuId)"
+  >
+    <!-- 左侧商品图片-->
+    <div class="mr-2 w-16">
+      <ElImage
+        :initial-index="0"
+        :preview-src-list="[picUrl]"
+        :src="picUrl"
+        class="h-full w-full rounded-lg"
+        fit="contain"
+        preview-teleported
+        @click.stop
+      />
+    </div>
+    <!-- 右侧商品信息 -->
+    <div class="flex-1">
+      <div class="line-clamp-1 w-full text-base font-bold">{{ title }}</div>
+      <div class="my-1">
+        <span class="mr-5">库存: {{ stock || 0 }}</span>
+        <span>销量: {{ salesCount || 0 }}</span>
+      </div>
+      <div class="flex items-center justify-between">
+        <span class="text-red-500">￥{{ fenToYuan(price) }}</span>
+        <ElButton size="small" type="text">详情</ElButton>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/mall/promotion/kefu/modules/tools/constants.ts b/apps/web-ele/src/views/mall/promotion/kefu/modules/tools/constants.ts
new file mode 100644
index 000000000..266a6cf02
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/kefu/modules/tools/constants.ts
@@ -0,0 +1,17 @@
+/** 客服消息类型枚举类 */
+export const KeFuMessageContentTypeEnum = {
+  TEXT: 1, // 文本消息
+  IMAGE: 2, // 图片消息
+  VOICE: 3, // 语音消息
+  VIDEO: 4, // 视频消息
+  SYSTEM: 5, // 系统消息
+  // ========== 商城特殊消息 ==========
+  PRODUCT: 10, //  商品消息
+  ORDER: 11, //  订单消息"
+};
+
+/** Promotion 的 WebSocket 消息类型枚举类 */
+export const WebSocketMessageTypeConstants = {
+  KEFU_MESSAGE_TYPE: 'kefu_message_type', // 客服消息类型
+  KEFU_MESSAGE_ADMIN_READ: 'kefu_message_read_status_change', // 客服消息管理员已读
+};
diff --git a/apps/web-ele/src/views/mall/promotion/kefu/modules/tools/emoji-select-popover.vue b/apps/web-ele/src/views/mall/promotion/kefu/modules/tools/emoji-select-popover.vue
new file mode 100644
index 000000000..2d14ec189
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/kefu/modules/tools/emoji-select-popover.vue
@@ -0,0 +1,53 @@
+<!-- emoji 表情选择组件 -->
+<script lang="ts" setup>
+import type { Emoji } from './emoji';
+
+import { computed } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { ElPopover, ElScrollbar } from 'element-plus';
+
+import { useEmoji } from './emoji';
+
+/** 选择 emoji 表情 */
+const emits = defineEmits<{
+  (e: 'selectEmoji', v: Emoji): void;
+}>();
+const { getEmojiList } = useEmoji();
+const emojiList = computed(() => getEmojiList());
+
+function handleSelect(item: Emoji) {
+  // 整个 emoji 数据传递出去，方便以后输入框直接显示表情
+  emits('selectEmoji', item);
+}
+</script>
+
+<template>
+  <ElPopover width="500px" placement="top" trigger="click">
+    <template #reference>
+      <IconifyIcon
+        :size="30"
+        class="ml-2.5 cursor-pointer"
+        icon="twemoji:grinning-face"
+      />
+    </template>
+    <ElScrollbar height="300px">
+      <ul class="ml-2 flex flex-wrap px-2">
+        <li
+          v-for="(item, index) in emojiList"
+          :key="index"
+          :style="{
+            borderColor: 'var(--primary)',
+            color: 'var(--primary)',
+          }"
+          :title="item.name"
+          class="icon-item w-1/10 mr-2 mt-1 flex cursor-pointer items-center justify-center border border-solid p-2"
+          @click="handleSelect(item)"
+        >
+          <img :src="item.url" class="h-6 w-6" />
+        </li>
+      </ul>
+    </ElScrollbar>
+  </ElPopover>
+</template>
diff --git a/apps/web-ele/src/views/mall/promotion/kefu/modules/tools/emoji.ts b/apps/web-ele/src/views/mall/promotion/kefu/modules/tools/emoji.ts
new file mode 100644
index 000000000..f1bd19319
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/kefu/modules/tools/emoji.ts
@@ -0,0 +1,126 @@
+import { onMounted, ref } from 'vue';
+
+import { isEmpty } from '@vben/utils';
+
+const emojiList = [
+  { name: '[笑掉牙]', file: 'xiaodiaoya.png' },
+  { name: '[可爱]', file: 'keai.png' },
+  { name: '[冷酷]', file: 'lengku.png' },
+  { name: '[闭嘴]', file: 'bizui.png' },
+  { name: '[生气]', file: 'shengqi.png' },
+  { name: '[惊恐]', file: 'jingkong.png' },
+  { name: '[瞌睡]', file: 'keshui.png' },
+  { name: '[大笑]', file: 'daxiao.png' },
+  { name: '[爱心]', file: 'aixin.png' },
+  { name: '[坏笑]', file: 'huaixiao.png' },
+  { name: '[飞吻]', file: 'feiwen.png' },
+  { name: '[疑问]', file: 'yiwen.png' },
+  { name: '[开心]', file: 'kaixin.png' },
+  { name: '[发呆]', file: 'fadai.png' },
+  { name: '[流泪]', file: 'liulei.png' },
+  { name: '[汗颜]', file: 'hanyan.png' },
+  { name: '[惊悚]', file: 'jingshu.png' },
+  { name: '[困~]', file: 'kun.png' },
+  { name: '[心碎]', file: 'xinsui.png' },
+  { name: '[天使]', file: 'tianshi.png' },
+  { name: '[晕]', file: 'yun.png' },
+  { name: '[啊]', file: 'a.png' },
+  { name: '[愤怒]', file: 'fennu.png' },
+  { name: '[睡着]', file: 'shuizhuo.png' },
+  { name: '[面无表情]', file: 'mianwubiaoqing.png' },
+  { name: '[难过]', file: 'nanguo.png' },
+  { name: '[犯困]', file: 'fankun.png' },
+  { name: '[好吃]', file: 'haochi.png' },
+  { name: '[呕吐]', file: 'outu.png' },
+  { name: '[龇牙]', file: 'ziya.png' },
+  { name: '[懵比]', file: 'mengbi.png' },
+  { name: '[白眼]', file: 'baiyan.png' },
+  { name: '[饿死]', file: 'esi.png' },
+  { name: '[凶]', file: 'xiong.png' },
+  { name: '[感冒]', file: 'ganmao.png' },
+  { name: '[流汗]', file: 'liuhan.png' },
+  { name: '[笑哭]', file: 'xiaoku.png' },
+  { name: '[流口水]', file: 'liukoushui.png' },
+  { name: '[尴尬]', file: 'ganga.png' },
+  { name: '[惊讶]', file: 'jingya.png' },
+  { name: '[大惊]', file: 'dajing.png' },
+  { name: '[不好意思]', file: 'buhaoyisi.png' },
+  { name: '[大闹]', file: 'danao.png' },
+  { name: '[不可思议]', file: 'bukesiyi.png' },
+  { name: '[爱你]', file: 'aini.png' },
+  { name: '[红心]', file: 'hongxin.png' },
+  { name: '[点赞]', file: 'dianzan.png' },
+  { name: '[恶魔]', file: 'emo.png' },
+];
+
+export interface Emoji {
+  name: string;
+  url: string;
+}
+
+export function useEmoji() {
+  const emojiPathList = ref<any[]>([]);
+
+  /** 加载本地图片 */
+  async function initStaticEmoji() {
+    const pathList = import.meta.glob('../../asserts/*.{png,jpg,jpeg,svg}');
+    for (const path in pathList) {
+      const imageModule: any = await pathList[path]?.();
+      emojiPathList.value.push({ path, src: imageModule.default });
+    }
+  }
+
+  /** 初始化 */
+  onMounted(async () => {
+    if (isEmpty(emojiPathList.value)) {
+      await initStaticEmoji();
+    }
+  });
+
+  /**
+   * 将文本中的表情替换成图片
+   *
+   * @return 替换后的文本
+   * @param content 消息内容
+   */
+  function replaceEmoji(content: string) {
+    let newData = content;
+    if (typeof newData !== 'object') {
+      const reg = /\[(.+?)\]/g; // [] 中括号
+      const zhEmojiName = newData.match(reg);
+      if (zhEmojiName) {
+        zhEmojiName.forEach((item) => {
+          const emojiFile = getEmojiFileByName(item);
+          newData = newData.replace(
+            item,
+            `<img style="width: 20px;height: 20px;margin:0 1px 3px 1px;vertical-align: middle;" src="${emojiFile}" alt=""/>`,
+          );
+        });
+      }
+    }
+    return newData;
+  }
+
+  /** 获得所有表情 */
+  function getEmojiList(): Emoji[] {
+    return emojiList.map((item) => ({
+      url: getEmojiFileByName(item.name),
+      name: item.name,
+    })) as Emoji[];
+  }
+
+  function getEmojiFileByName(name: string) {
+    for (const emoji of emojiList) {
+      if (emoji.name === name) {
+        const emojiPath = emojiPathList.value.find(
+          (item: { path: string; src: string }) =>
+            item.path.includes(emoji.file),
+        );
+        return emojiPath ? emojiPath.src : undefined;
+      }
+    }
+    return false;
+  }
+
+  return { replaceEmoji, getEmojiList };
+}
diff --git a/apps/web-ele/src/views/mall/promotion/kefu/modules/tools/picture-select-upload.vue b/apps/web-ele/src/views/mall/promotion/kefu/modules/tools/picture-select-upload.vue
new file mode 100644
index 000000000..b991f04a8
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/kefu/modules/tools/picture-select-upload.vue
@@ -0,0 +1,90 @@
+<!-- 图片选择 -->
+<script lang="ts" setup>
+import { ElImage, ElMessage } from 'element-plus';
+
+import { useUpload } from '#/components/upload/use-upload';
+import { $t } from '#/locales';
+import Picture from '#/views/mall/promotion/kefu/asserts/picture.svg';
+
+/** 选择并上传文件 */
+const emits = defineEmits<{
+  (e: 'sendPicture', v: string): void;
+}>();
+
+async function selectAndUpload() {
+  const files: any = await getFiles();
+  ElMessage.success($t('ui.upload.imgUploading'));
+  const res = await useUpload().httpRequest(files[0].file);
+  ElMessage.success($t('ui.upload.uploadSuccess'));
+  emits('sendPicture', res);
+}
+
+/** 唤起文件选择窗口，并获取选择的文件 */
+async function getFiles(options = {}) {
+  const { multiple, accept, limit, fileSize } = {
+    multiple: true,
+    accept: 'image/jpeg, image/png, image/gif', // 默认选择图片
+    limit: 1,
+    fileSize: 500,
+    ...options,
+  };
+
+  // 创建文件选择元素
+  const input = document.createElement('input');
+  input.type = 'file';
+  input.style.display = 'none';
+  if (multiple) input.multiple = true;
+  if (accept) input.accept = accept;
+
+  // 将文件选择元素添加到文档中
+  document.body.append(input);
+
+  // 触发文件选择元素的点击事件
+  input.click();
+
+  // 等待文件选择元素的 change 事件
+  // 移除不必要的 try/catch 包装，直接返回 Promise
+  return await new Promise((resolve, reject) => {
+    input.addEventListener('change', (event: any) => {
+      const filesArray = [...(event?.target?.files || [])];
+
+      // 从文档中移除文件选择元素
+      input.remove();
+
+      // 判断是否超出上传数量限制
+      if (filesArray.length > limit) {
+        // 使用 Error 对象作为 reject 的原因
+        reject(new Error(`超出上传数量限制，最多允许 ${limit} 个文件`));
+        return;
+      }
+      // 判断是否超出上传文件大小限制
+      const overSizedFiles = filesArray.filter(
+        (file: File) => file.size / 1024 ** 2 > fileSize,
+      );
+      if (overSizedFiles.length > 0) {
+        // 使用 Error 对象作为 reject 的原因
+        reject(new Error(`文件大小超出限制，单个文件最大允许 ${fileSize}MB`));
+        return;
+      }
+
+      // 生成文件列表，并添加 uid
+      const fileList = filesArray.map((file, index) => ({
+        file,
+        uid: Date.now() + index,
+      }));
+      resolve(fileList);
+    });
+  });
+}
+</script>
+
+<template>
+  <div>
+    <ElImage
+      :src="Picture"
+      :style="{ width: '35px', height: '35px', cursor: 'pointer' }"
+      fit="contain"
+      @click="selectAndUpload"
+    />
+  </div>
+</template>
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/statistics/trade/modules/trend-card.vue b/apps/web-ele/src/views/mall/statistics/trade/modules/trend-card.vue
index 3173e0bdd..9aa2d279a 100644
--- a/apps/web-ele/src/views/mall/statistics/trade/modules/trend-card.vue
+++ b/apps/web-ele/src/views/mall/statistics/trade/modules/trend-card.vue
@@ -27,6 +27,7 @@ import {
   getTradeStatisticsList,
 } from '#/api/mall/statistics/trade';
 import ShortcutDateRangePicker from '#/components/shortcut-date-range-picker/shortcut-date-range-picker.vue';
+import { $t } from '#/locales';
 
 import { getTradeTrendChartOptions } from './trend-chart-options';
 
@@ -138,7 +139,7 @@ async function handleExport() {
               <template #icon>
                 <IconifyIcon icon="lucide:download" />
               </template>
-              导出
+              {{ $t('page.action.export') }}
             </ElButton>
           </ShortcutDateRangePicker>
         </div>
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/afterSale/modules/disagree-form.vue b/apps/web-ele/src/views/mall/trade/afterSale/modules/disagree-form.vue
index 47f8a365a..8675c0553 100644
--- a/apps/web-ele/src/views/mall/trade/afterSale/modules/disagree-form.vue
+++ b/apps/web-ele/src/views/mall/trade/afterSale/modules/disagree-form.vue
@@ -9,7 +9,7 @@ import { $t } from '@vben/locales';
 import { ElMessage } from 'element-plus';
 
 import { useVbenForm } from '#/adapter/form';
-import * as AfterSaleApi from '#/api/mall/trade/afterSale/index';
+import { disagreeAfterSale } from '#/api/mall/trade/afterSale';
 
 import { useDisagreeFormSchema } from '../data';
 
@@ -40,7 +40,7 @@ const [Modal, modalApi] = useVbenModal({
     try {
       const data =
         (await formApi.getValues()) as MallAfterSaleApi.DisagreeRequest;
-      await AfterSaleApi.disagreeAfterSale(data);
+      await disagreeAfterSale(data);
       // 关闭并提示
       await modalApi.close();
       emit('success');
diff --git a/apps/web-ele/src/views/mall/trade/brokerage/user/index.vue b/apps/web-ele/src/views/mall/trade/brokerage/user/index.vue
index d66be3c56..5b7d958dc 100644
--- a/apps/web-ele/src/views/mall/trade/brokerage/user/index.vue
+++ b/apps/web-ele/src/views/mall/trade/brokerage/user/index.vue
@@ -93,18 +93,14 @@ async function handleBrokerageEnabledChange(
     })
       .then(async () => {
         // 更新推广资格
-        const res = await updateBrokerageEnabled({
+        await updateBrokerageEnabled({
           id: row.id!,
           enabled: newEnabled,
         });
-        if (res) {
-          // 提示并返回成功
-          ElMessage.success($t('ui.actionMessage.operationSuccess'));
-          handleRefresh();
-          resolve(true);
-        } else {
-          reject(new Error('更新失败'));
-        }
+        // 提示并返回成功
+        ElMessage.success($t('ui.actionMessage.operationSuccess'));
+        handleRefresh();
+        resolve(true);
       })
       .catch(() => {
         reject(new Error('取消操作'));
diff --git a/apps/web-ele/src/views/mall/trade/order/detail/index.vue b/apps/web-ele/src/views/mall/trade/order/detail/index.vue
index d0700e91c..bb4629305 100644
--- a/apps/web-ele/src/views/mall/trade/order/detail/index.vue
+++ b/apps/web-ele/src/views/mall/trade/order/detail/index.vue
@@ -18,9 +18,10 @@ import { useTabs } from '@vben/hooks';
 import { ElCard, ElLoading, ElMessage, ElTag } from 'element-plus';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
-import * as DeliveryExpressApi from '#/api/mall/trade/delivery/express';
-import * as DeliveryPickUpStoreApi from '#/api/mall/trade/delivery/pickUpStore';
+import { getSimpleDeliveryExpressList } from '#/api/mall/trade/delivery/express';
+import { getDeliveryPickUpStore } from '#/api/mall/trade/delivery/pickUpStore';
 import * as TradeOrderApi from '#/api/mall/trade/order';
+import { getExpressTrackList } from '#/api/mall/trade/order';
 import { useDescription } from '#/components/description';
 import { DictTag } from '#/components/dict-tag';
 import { TableAction } from '#/components/table-action';
@@ -169,12 +170,9 @@ async function getDetail() {
 
     // 如果配送方式为快递，则查询物流公司
     if (res.deliveryType === DeliveryTypeEnum.EXPRESS.type) {
-      deliveryExpressList.value =
-        await DeliveryExpressApi.getSimpleDeliveryExpressList();
+      deliveryExpressList.value = await getSimpleDeliveryExpressList();
       if (res.logisticsId) {
-        expressTrackList.value = await TradeOrderApi.getExpressTrackList(
-          res.id!,
-        );
+        expressTrackList.value = await getExpressTrackList(res.id!);
         expressTrackGridApi.setGridOptions({
           data: expressTrackList.value || [],
         });
@@ -183,9 +181,7 @@ async function getDetail() {
       res.deliveryType === DeliveryTypeEnum.PICK_UP.type &&
       res.pickUpStoreId
     ) {
-      pickUpStore.value = await DeliveryPickUpStoreApi.getDeliveryPickUpStore(
-        res.pickUpStoreId,
-      );
+      pickUpStore.value = await getDeliveryPickUpStore(res.pickUpStoreId);
     }
   } finally {
     loading.value = false;
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/mall/trade/order/modules/remark-form.vue b/apps/web-ele/src/views/mall/trade/order/modules/remark-form.vue
index 37d0d8f28..fe8dc0611 100644
--- a/apps/web-ele/src/views/mall/trade/order/modules/remark-form.vue
+++ b/apps/web-ele/src/views/mall/trade/order/modules/remark-form.vue
@@ -10,6 +10,7 @@ import { ElMessage } from 'element-plus';
 import { useVbenForm } from '#/adapter/form';
 import { updateOrderRemark } from '#/api/mall/trade/order';
 import { $t } from '#/locales';
+
 import { useRemarkFormSchema } from '../data';
 
 const emit = defineEmits(['success']);
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/apps/web-ele/src/views/mp/user/index.vue b/apps/web-ele/src/views/mp/user/index.vue
index bdcd37652..c6c3e5102 100644
--- a/apps/web-ele/src/views/mp/user/index.vue
+++ b/apps/web-ele/src/views/mp/user/index.vue
@@ -4,7 +4,7 @@ import type { MpUserApi } from '#/api/mp/user';
 
 import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
 
-import { ElMessage, ElLoading } from 'element-plus';
+import { ElLoading, ElMessage } from 'element-plus';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getUserPage, syncUser } from '#/api/mp/user';
diff --git a/apps/web-ele/src/views/pay/notify/data.ts b/apps/web-ele/src/views/pay/notify/data.ts
index d94c31865..5917b416c 100644
--- a/apps/web-ele/src/views/pay/notify/data.ts
+++ b/apps/web-ele/src/views/pay/notify/data.ts
@@ -90,7 +90,6 @@ export function useGridFormSchema(): VbenFormSchema[] {
       componentProps: {
         ...getRangePickerDefaultProps(),
         clearable: true,
-        placeholder: ['开始日期', '结束日期'],
       },
     },
   ];
diff --git a/apps/web-ele/src/views/pay/notify/modules/detail.vue b/apps/web-ele/src/views/pay/notify/modules/detail.vue
index 0375c6fa3..d5b7bb71c 100644
--- a/apps/web-ele/src/views/pay/notify/modules/detail.vue
+++ b/apps/web-ele/src/views/pay/notify/modules/detail.vue
@@ -19,8 +19,6 @@ const formData = ref<PayNotifyApi.NotifyTask>();
 const [Description] = useDescription({
   border: true,
   column: 2,
-  direction: 'horizontal',
-  labelWidth: 140,
   schema: useDetailSchema(),
 });
 
diff --git a/apps/web-ele/src/views/pay/order/modules/detail.vue b/apps/web-ele/src/views/pay/order/modules/detail.vue
index 452e63e18..99c261d77 100644
--- a/apps/web-ele/src/views/pay/order/modules/detail.vue
+++ b/apps/web-ele/src/views/pay/order/modules/detail.vue
@@ -15,7 +15,6 @@ const formData = ref<PayOrderApi.Order>();
 const [Descriptions] = useDescription({
   border: true,
   column: 2,
-  labelWidth: 140,
   schema: useDetailSchema(),
 });
 
diff --git a/apps/web-ele/src/views/pay/refund/modules/detail.vue b/apps/web-ele/src/views/pay/refund/modules/detail.vue
index 7b02d9889..1b93a77e6 100644
--- a/apps/web-ele/src/views/pay/refund/modules/detail.vue
+++ b/apps/web-ele/src/views/pay/refund/modules/detail.vue
@@ -13,8 +13,8 @@ import { useDetailSchema } from '../data';
 const formData = ref<PayRefundApi.Refund>();
 
 const [Descriptions] = useDescription({
+  border: true,
   column: 2,
-  labelWidth: 140,
   schema: useDetailSchema(),
 });
 
diff --git a/apps/web-ele/src/views/pay/transfer/modules/detail.vue b/apps/web-ele/src/views/pay/transfer/modules/detail.vue
index deb23fabf..86dd91569 100644
--- a/apps/web-ele/src/views/pay/transfer/modules/detail.vue
+++ b/apps/web-ele/src/views/pay/transfer/modules/detail.vue
@@ -13,8 +13,8 @@ import { useDetailSchema } from '../data';
 const formData = ref<PayTransferApi.Transfer>();
 
 const [Descriptions] = useDescription({
+  border: true,
   column: 2,
-  labelWidth: 140,
   schema: useDetailSchema(),
 });
 
diff --git a/apps/web-ele/src/views/system/loginlog/modules/detail.vue b/apps/web-ele/src/views/system/loginlog/modules/detail.vue
index 773069b9f..d1c9bea00 100644
--- a/apps/web-ele/src/views/system/loginlog/modules/detail.vue
+++ b/apps/web-ele/src/views/system/loginlog/modules/detail.vue
@@ -12,8 +12,8 @@ import { useDetailSchema } from '../data';
 const formData = ref<SystemLoginLogApi.LoginLog>();
 
 const [Descriptions] = useDescription({
+  border: true,
   column: 1,
-  labelWidth: 110,
   schema: useDetailSchema(),
 });
 
diff --git a/apps/web-ele/src/views/system/mail/log/modules/detail.vue b/apps/web-ele/src/views/system/mail/log/modules/detail.vue
index e70243d8b..ab0daa76e 100644
--- a/apps/web-ele/src/views/system/mail/log/modules/detail.vue
+++ b/apps/web-ele/src/views/system/mail/log/modules/detail.vue
@@ -12,8 +12,8 @@ import { useDetailSchema } from '../data';
 const formData = ref<SystemMailLogApi.MailLog>();
 
 const [Descriptions] = useDescription({
+  border: true,
   column: 2,
-  labelWidth: 140,
   schema: useDetailSchema(),
 });
 
diff --git a/apps/web-ele/src/views/system/notify/message/modules/detail.vue b/apps/web-ele/src/views/system/notify/message/modules/detail.vue
index 0db8555f5..f7dbc8f58 100644
--- a/apps/web-ele/src/views/system/notify/message/modules/detail.vue
+++ b/apps/web-ele/src/views/system/notify/message/modules/detail.vue
@@ -14,7 +14,6 @@ const formData = ref<SystemNotifyMessageApi.NotifyMessage>();
 const [Descriptions] = useDescription({
   border: true,
   column: 1,
-  labelWidth: 140,
   schema: useDetailSchema(),
 });
 
diff --git a/apps/web-ele/src/views/system/notify/my/modules/detail.vue b/apps/web-ele/src/views/system/notify/my/modules/detail.vue
index 0db8555f5..f7dbc8f58 100644
--- a/apps/web-ele/src/views/system/notify/my/modules/detail.vue
+++ b/apps/web-ele/src/views/system/notify/my/modules/detail.vue
@@ -14,7 +14,6 @@ const formData = ref<SystemNotifyMessageApi.NotifyMessage>();
 const [Descriptions] = useDescription({
   border: true,
   column: 1,
-  labelWidth: 140,
   schema: useDetailSchema(),
 });
 
diff --git a/apps/web-ele/src/views/system/operatelog/modules/detail.vue b/apps/web-ele/src/views/system/operatelog/modules/detail.vue
index d9d224f55..f4d8ae922 100644
--- a/apps/web-ele/src/views/system/operatelog/modules/detail.vue
+++ b/apps/web-ele/src/views/system/operatelog/modules/detail.vue
@@ -14,7 +14,6 @@ const formData = ref<SystemOperateLogApi.OperateLog>();
 const [Descriptions] = useDescription({
   border: true,
   column: 1,
-  labelWidth: 110,
   schema: useDetailSchema(),
 });
 
diff --git a/apps/web-ele/src/views/system/sms/log/modules/detail.vue b/apps/web-ele/src/views/system/sms/log/modules/detail.vue
index 4fcd48df9..37af10f7e 100644
--- a/apps/web-ele/src/views/system/sms/log/modules/detail.vue
+++ b/apps/web-ele/src/views/system/sms/log/modules/detail.vue
@@ -12,9 +12,8 @@ import { useDetailSchema } from '../data';
 const formData = ref<SystemSmsLogApi.SmsLog>();
 
 const [Descriptions] = useDescription({
+  border: true,
   column: 2,
-  direction: 'horizontal',
-  labelWidth: 140,
   schema: useDetailSchema(),
 });
 
diff --git a/apps/web-ele/src/views/system/social/user/modules/detail.vue b/apps/web-ele/src/views/system/social/user/modules/detail.vue
index a70a29247..a4edf0018 100644
--- a/apps/web-ele/src/views/system/social/user/modules/detail.vue
+++ b/apps/web-ele/src/views/system/social/user/modules/detail.vue
@@ -16,8 +16,6 @@ const formData = ref<SystemSocialUserApi.SocialUser>();
 const [Descriptions] = useDescription({
   border: true,
   column: 1,
-  size: 'large',
-  labelWidth: 185,
   schema: useDetailSchema(),
 });
 
diff --git a/apps/web-naive/src/layouts/auth.vue b/apps/web-naive/src/layouts/auth.vue
index 18d415bc7..8ba66e85a 100644
--- a/apps/web-naive/src/layouts/auth.vue
+++ b/apps/web-naive/src/layouts/auth.vue
@@ -8,12 +8,14 @@ import { $t } from '#/locales';
 
 const appName = computed(() => preferences.app.name);
 const logo = computed(() => preferences.logo.source);
+const logoDark = computed(() => preferences.logo.sourceDark);
 </script>
 
 <template>
   <AuthPageLayout
     :app-name="appName"
     :logo="logo"
+    :logo-dark="logoDark"
     :page-description="$t('authentication.pageDesc')"
     :page-title="$t('authentication.pageTitle')"
   >
diff --git a/cspell.json b/cspell.json
index ea6130a79..325df9358 100644
--- a/cspell.json
+++ b/cspell.json
@@ -7,19 +7,27 @@
     "acmr",
     "antd",
     "antdv",
+    "archiver",
     "astro",
+    "axios",
     "brotli",
     "clsx",
+    "cropperjs",
     "defu",
     "demi",
+    "dotenv",
     "echarts",
     "ependencies",
     "esno",
     "etag",
     "execa",
+    "gitee",
     "iconify",
     "iconoir",
     "intlify",
+    "isequal",
+    "jspm",
+    "kefu",
     "lockb",
     "lucide",
     "minh",
@@ -27,7 +35,9 @@
     "mkdist",
     "mockjs",
     "naiveui",
+    "napi",
     "nocheck",
+    "nolebase",
     "noopener",
     "noreferrer",
     "nprogress",
@@ -36,11 +46,13 @@
     "prefixs",
     "publint",
     "qrcode",
+    "rollup",
     "shadcn",
     "sonner",
     "sortablejs",
     "styl",
     "taze",
+    "Tinymce",
     "ui-kit",
     "uicons",
     "unplugin",
@@ -50,23 +62,12 @@
     "vite",
     "vitejs",
     "vitepress",
+    "vitest",
     "vnode",
     "vueuse",
-    "yxxx",
-    "archiver",
-    "axios",
-    "cropperjs",
-    "dotenv",
-    "gitee",
-    "isequal",
-    "jspm",
-    "napi",
-    "nolebase",
-    "rollup",
-    "Tinymce",
-    "vitest",
     "xingyu",
-    "yudao"
+    "yudao",
+    "yxxx"
   ],
   "ignorePaths": [
     "**/node_modules/**",
diff --git a/docs/.vitepress/components/preview-group.vue b/docs/.vitepress/components/preview-group.vue
index e712157c2..2fb02d3fd 100644
--- a/docs/.vitepress/components/preview-group.vue
+++ b/docs/.vitepress/components/preview-group.vue
@@ -12,7 +12,7 @@ import {
   TabsList,
   TabsRoot,
   TabsTrigger,
-} from 'radix-vue';
+} from 'reka-ui';
 
 defineOptions({
   inheritAttrs: false,
@@ -56,7 +56,7 @@ const toggleOpen = () => {
         <TabsList class="relative flex">
           <template v-if="open">
             <TabsIndicator
-              class="absolute bottom-0 left-0 h-[2px] w-[--radix-tabs-indicator-size] translate-x-[--radix-tabs-indicator-position] rounded-full transition-[width,transform] duration-300"
+              class="absolute bottom-0 left-0 h-[2px] w-[--reka-tabs-indicator-size] translate-x-[--reka-tabs-indicator-position] rounded-full transition-[width,transform] duration-300"
             >
               <div class="size-full bg-[var(--vp-c-indigo-1)]"></div>
             </TabsIndicator>
diff --git a/docs/package.json b/docs/package.json
index 864e450aa..f17468c70 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -22,7 +22,7 @@
     "ant-design-vue": "catalog:",
     "lucide-vue-next": "catalog:",
     "medium-zoom": "catalog:",
-    "radix-vue": "catalog:",
+    "reka-ui": "catalog:",
     "vitepress-plugin-group-icons": "catalog:"
   },
   "devDependencies": {
diff --git a/docs/src/demos/vben-vxe-table/custom-cell/index.vue b/docs/src/demos/vben-vxe-table/custom-cell/index.vue
index 517e73f38..6d6c84d8a 100644
--- a/docs/src/demos/vben-vxe-table/custom-cell/index.vue
+++ b/docs/src/demos/vben-vxe-table/custom-cell/index.vue
@@ -92,7 +92,7 @@ const [Grid] = useVbenVxeGrid({ gridOptions });
         <Image :src="row.imageUrl" height="30" width="30" />
       </template>
       <template #open="{ row }">
-        <Switch v-model:checked="row.open" />
+        <Switch v-model="row.open" />
       </template>
       <template #status="{ row }">
         <Tag :color="row.color">{{ row.status }}</Tag>
diff --git a/docs/src/en/guide/essentials/settings.md b/docs/src/en/guide/essentials/settings.md
index 59a6c5c01..ba3f860da 100644
--- a/docs/src/en/guide/essentials/settings.md
+++ b/docs/src/en/guide/essentials/settings.md
@@ -261,6 +261,7 @@ const defaultPreferences: Preferences = {
     enable: true,
     fit: 'contain',
     source: 'https://unpkg.com/@vbenjs/static-source@0.1.7/source/logo-v1.webp',
+    // sourceDark: 'https://unpkg.com/@vbenjs/static-source@0.1.7/source/logo-dark.webp', // Optional: Dark theme logo
   },
   navigation: {
     accordion: true,
@@ -457,6 +458,8 @@ interface LogoPreferences {
   fit: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
   /** Logo URL */
   source: string;
+  /** Dark theme logo URL (optional, if not set, use source) */
+  sourceDark?: string;
 }
 
 interface NavigationPreferences {
diff --git a/docs/src/guide/essentials/settings.md b/docs/src/guide/essentials/settings.md
index 9b47c04d3..f2290492b 100644
--- a/docs/src/guide/essentials/settings.md
+++ b/docs/src/guide/essentials/settings.md
@@ -260,6 +260,7 @@ const defaultPreferences: Preferences = {
     enable: true,
     fit: 'contain',
     source: 'https://unpkg.com/@vbenjs/static-source@0.1.7/source/logo-v1.webp',
+    // sourceDark: 'https://unpkg.com/@vbenjs/static-source@0.1.7/source/logo-dark.webp', // 可选：暗色主题logo
   },
   navigation: {
     accordion: true,
@@ -457,6 +458,8 @@ interface LogoPreferences {
   fit: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
   /** logo地址 */
   source: string;
+  /** 暗色主题logo地址 (可选，若不设置则使用 source) */
+  sourceDark?: string;
 }
 
 interface NavigationPreferences {
diff --git a/packages/@core/base/design/src/css/ui.css b/packages/@core/base/design/src/css/ui.css
index 0cf842a07..a1bf02423 100644
--- a/packages/@core/base/design/src/css/ui.css
+++ b/packages/@core/base/design/src/css/ui.css
@@ -1,5 +1,5 @@
 .side-content {
-  animation-duration: 0.2s;
+  animation-duration: 0.3s;
   animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
 }
 
@@ -37,7 +37,7 @@
 @keyframes slide-down {
   from {
     opacity: 0;
-    transform: translateY(-10px);
+    transform: translateY(50px);
   }
 
   to {
@@ -49,7 +49,7 @@
 @keyframes slide-left {
   from {
     opacity: 0;
-    transform: translateX(-10px);
+    transform: translateX(-50px);
   }
 
   to {
@@ -61,7 +61,7 @@
 @keyframes slide-right {
   from {
     opacity: 0;
-    transform: translateX(-10px);
+    transform: translateX(50px);
   }
 
   to {
@@ -73,7 +73,7 @@
 @keyframes slide-up {
   from {
     opacity: 0;
-    transform: translateY(10px);
+    transform: translateY(-50px);
   }
 
   to {
diff --git a/packages/@core/base/shared/src/utils/__tests__/date.test.ts b/packages/@core/base/shared/src/utils/__tests__/date.test.ts
new file mode 100644
index 000000000..46a27c588
--- /dev/null
+++ b/packages/@core/base/shared/src/utils/__tests__/date.test.ts
@@ -0,0 +1,143 @@
+import dayjs from 'dayjs';
+import timezone from 'dayjs/plugin/timezone';
+import utc from 'dayjs/plugin/utc';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import {
+  formatDate,
+  formatDateTime,
+  getCurrentTimezone,
+  getSystemTimezone,
+  isDate,
+  isDayjsObject,
+  setCurrentTimezone,
+} from '../date';
+
+dayjs.extend(utc);
+dayjs.extend(timezone);
+
+describe('dateUtils', () => {
+  const sampleISO = '2024-10-30T12:34:56Z';
+  const sampleTimestamp = Date.parse(sampleISO);
+
+  beforeEach(() => {
+    // 重置时区
+    dayjs.tz.setDefault();
+    setCurrentTimezone(); // 重置为系统默认
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  // ===============================
+  // formatDate
+  // ===============================
+  describe('formatDate', () => {
+    it('should format a valid ISO date string', () => {
+      const formatted = formatDate(sampleISO, 'YYYY/MM/DD');
+      expect(formatted).toMatch(/2024\/10\/30/);
+    });
+
+    it('should format a timestamp correctly', () => {
+      const formatted = formatDate(sampleTimestamp);
+      expect(formatted).toMatch(/2024-10-30/);
+    });
+
+    it('should format a Date object', () => {
+      const formatted = formatDate(new Date(sampleISO));
+      expect(formatted).toMatch(/2024-10-30/);
+    });
+
+    it('should format a dayjs object', () => {
+      const formatted = formatDate(dayjs(sampleISO));
+      expect(formatted).toMatch(/2024-10-30/);
+    });
+
+    it('should return original input if date is invalid', () => {
+      const invalid = 'not-a-date';
+      const spy = vi.spyOn(console, 'error').mockImplementation(() => {});
+      const formatted = formatDate(invalid);
+      expect(formatted).toBe(invalid);
+      expect(spy).toHaveBeenCalledOnce();
+    });
+
+    it('should apply given format', () => {
+      const formatted = formatDate(sampleISO, 'YYYY-MM-DD HH:mm');
+      expect(formatted).toMatch(/\d{4}-\d{2}-\d{2} \d{2}:\d{2}/);
+    });
+  });
+
+  // ===============================
+  // formatDateTime
+  // ===============================
+  describe('formatDateTime', () => {
+    it('should format date into full datetime', () => {
+      const result = formatDateTime(sampleISO);
+      expect(result).toMatch(/2024-10-30 \d{2}:\d{2}:\d{2}/);
+    });
+  });
+
+  // ===============================
+  // isDate
+  // ===============================
+  describe('isDate', () => {
+    it('should return true for Date instances', () => {
+      expect(isDate(new Date())).toBe(true);
+    });
+
+    it('should return false for non-Date values', () => {
+      expect(isDate('2024-10-30')).toBe(false);
+      expect(isDate(null)).toBe(false);
+      expect(isDate(undefined)).toBe(false);
+    });
+  });
+
+  // ===============================
+  // isDayjsObject
+  // ===============================
+  describe('isDayjsObject', () => {
+    it('should return true for dayjs objects', () => {
+      expect(isDayjsObject(dayjs())).toBe(true);
+    });
+
+    it('should return false for other values', () => {
+      expect(isDayjsObject(new Date())).toBe(false);
+      expect(isDayjsObject('string')).toBe(false);
+    });
+  });
+
+  // ===============================
+  // getSystemTimezone
+  // ===============================
+  describe('getSystemTimezone', () => {
+    it('should return a valid IANA timezone string', () => {
+      const tz = getSystemTimezone();
+      expect(typeof tz).toBe('string');
+      expect(tz).toMatch(/^[A-Z]+\/[A-Z_]+/i);
+    });
+  });
+
+  // ===============================
+  // setCurrentTimezone / getCurrentTimezone
+  // ===============================
+  describe('setCurrentTimezone & getCurrentTimezone', () => {
+    it('should set and retrieve the current timezone', () => {
+      setCurrentTimezone('Asia/Shanghai');
+      expect(getCurrentTimezone()).toBe('Asia/Shanghai');
+    });
+
+    it('should reset to system timezone when called with no args', () => {
+      const guessed = getSystemTimezone();
+      setCurrentTimezone();
+      expect(getCurrentTimezone()).toBe(guessed);
+    });
+
+    it('should update dayjs default timezone', () => {
+      setCurrentTimezone('America/New_York');
+      const d = dayjs('2024-01-01T00:00:00Z');
+      // 校验时区转换生效（小时变化）
+      expect(d.tz().format('HH')).not.toBe('00');
+    });
+  });
+});
diff --git a/packages/@core/base/shared/src/utils/date.ts b/packages/@core/base/shared/src/utils/date.ts
index 1a2a67d81..f77b824a9 100644
--- a/packages/@core/base/shared/src/utils/date.ts
+++ b/packages/@core/base/shared/src/utils/date.ts
@@ -1,30 +1,26 @@
-import dayjs, { Dayjs } from 'dayjs';
+import dayjs from 'dayjs';
+import timezone from 'dayjs/plugin/timezone';
+import utc from 'dayjs/plugin/utc';
 
-export function formatDate(
-  time: Date | Dayjs | number | string | undefined,
-  format = 'YYYY-MM-DD',
-) {
-  if (!time) {
-    return time;
-  }
+dayjs.extend(utc);
+dayjs.extend(timezone);
+
+type FormatDate = Date | dayjs.Dayjs | number | string;
+
+export function formatDate(time: FormatDate, format = 'YYYY-MM-DD') {
   try {
-    const date = dayjs(time);
+    const date = dayjs.isDayjs(time) ? time : dayjs(time);
     if (!date.isValid()) {
       throw new Error('Invalid date');
     }
-    return date.format(format);
+    return date.tz().format(format);
   } catch (error) {
     console.error(`Error formatting date: ${error}`);
-    return time;
+    return String(time);
   }
 }
 
-export function formatDateTime(
-  time: Date | Dayjs | number | string | undefined,
-) {
-  if (!time) {
-    return time;
-  }
+export function formatDateTime(time: FormatDate) {
   return formatDate(time, 'YYYY-MM-DD HH:mm:ss');
 }
 
@@ -55,3 +51,33 @@ export function isDayjsObject(value: any): value is dayjs.Dayjs {
 export function dateFormatter(_row: any, _column: any, cellValue: any): string {
   return cellValue ? formatDate(cellValue)?.toString() || '' : '';
 }
+
+/**
+ * 获取当前时区
+ * @returns 当前时区
+ */
+export const getSystemTimezone = () => {
+  return dayjs.tz.guess();
+};
+
+/**
+ * 自定义设置的时区
+ */
+let currentTimezone = getSystemTimezone();
+
+/**
+ * 设置默认时区
+ * @param timezone
+ */
+export const setCurrentTimezone = (timezone?: string) => {
+  currentTimezone = timezone || getSystemTimezone();
+  dayjs.tz.setDefault(currentTimezone);
+};
+
+/**
+ * 获取设置的时区
+ * @returns 设置的时区
+ */
+export const getCurrentTimezone = () => {
+  return currentTimezone;
+};
diff --git a/packages/@core/base/shared/src/utils/util.ts b/packages/@core/base/shared/src/utils/util.ts
index 5e2316a89..4fbae5c7d 100644
--- a/packages/@core/base/shared/src/utils/util.ts
+++ b/packages/@core/base/shared/src/utils/util.ts
@@ -99,4 +99,18 @@ export function groupBy(array: any[], key: string) {
     result[groupKey].push(item);
   }
   return result;
-}
\ No newline at end of file
+}
+
+/**
+ * 解析 JSON 字符串
+ *
+ * @param str
+ */
+export function jsonParse(str: string) {
+  try {
+    return JSON.parse(str);
+  } catch {
+    console.warn(`str[${str}] 不是一个 JSON 字符串`);
+    return str;
+  }
+}
diff --git a/packages/@core/base/typings/src/app.d.ts b/packages/@core/base/typings/src/app.d.ts
index d2e86aec4..f2b443359 100644
--- a/packages/@core/base/typings/src/app.d.ts
+++ b/packages/@core/base/typings/src/app.d.ts
@@ -93,6 +93,15 @@ type PageTransitionType = 'fade' | 'fade-down' | 'fade-slide' | 'fade-up';
  */
 type AuthPageLayoutType = 'panel-center' | 'panel-left' | 'panel-right';
 
+/**
+ * 时区选项
+ */
+interface TimezoneOption {
+  label: string;
+  offset: number;
+  timezone: string;
+}
+
 export type {
   AccessModeType,
   AuthPageLayoutType,
@@ -108,4 +117,5 @@ export type {
   PreferencesButtonPositionType,
   TabsStyleType,
   ThemeModeType,
+  TimezoneOption,
 };
diff --git a/packages/@core/composables/package.json b/packages/@core/composables/package.json
index be8ee337b..8574f3b09 100644
--- a/packages/@core/composables/package.json
+++ b/packages/@core/composables/package.json
@@ -37,7 +37,7 @@
   "dependencies": {
     "@vben-core/shared": "workspace:*",
     "@vueuse/core": "catalog:",
-    "radix-vue": "catalog:",
+    "reka-ui": "catalog:",
     "sortablejs": "catalog:",
     "vue": "catalog:"
   },
diff --git a/packages/@core/composables/src/index.ts b/packages/@core/composables/src/index.ts
index 146ff005d..2dbd4b807 100644
--- a/packages/@core/composables/src/index.ts
+++ b/packages/@core/composables/src/index.ts
@@ -10,4 +10,4 @@ export {
   useForwardExpose,
   useForwardProps,
   useForwardPropsEmits,
-} from 'radix-vue';
+} from 'reka-ui';
diff --git a/packages/@core/preferences/__tests__/__snapshots__/config.test.ts.snap b/packages/@core/preferences/__tests__/__snapshots__/config.test.ts.snap
index 1cccbbb27..a6452b399 100644
--- a/packages/@core/preferences/__tests__/__snapshots__/config.test.ts.snap
+++ b/packages/@core/preferences/__tests__/__snapshots__/config.test.ts.snap
@@ -22,6 +22,7 @@ exports[`defaultPreferences immutability test > should not modify the config obj
     "enableCheckUpdates": true,
     "enablePreferences": true,
     "enableRefreshToken": false,
+    "enableStickyPreferencesNavigationBar": true,
     "isMobile": false,
     "layout": "sidebar-nav",
     "locale": "zh-CN",
@@ -29,6 +30,7 @@ exports[`defaultPreferences immutability test > should not modify the config obj
     "name": "Vben Admin",
     "preferencesButtonPosition": "auto",
     "watermark": false,
+    "watermarkContent": "",
     "zIndex": 200,
   },
   "breadcrumb": {
@@ -131,6 +133,7 @@ exports[`defaultPreferences immutability test > should not modify the config obj
     "refresh": true,
     "sidebarToggle": true,
     "themeToggle": true,
+    "timezone": true,
   },
 }
 `;
diff --git a/packages/@core/preferences/src/config.ts b/packages/@core/preferences/src/config.ts
index b8b7212aa..5b8d72363 100644
--- a/packages/@core/preferences/src/config.ts
+++ b/packages/@core/preferences/src/config.ts
@@ -134,6 +134,7 @@ const defaultPreferences: Preferences = {
     refresh: true,
     sidebarToggle: true,
     themeToggle: true,
+    timezone: true,
   },
 };
 
diff --git a/packages/@core/preferences/src/constants.ts b/packages/@core/preferences/src/constants.ts
index 430ee3b00..7ec2007d0 100644
--- a/packages/@core/preferences/src/constants.ts
+++ b/packages/@core/preferences/src/constants.ts
@@ -1,4 +1,4 @@
-import type { BuiltinThemeType } from '@vben-core/typings';
+import type { BuiltinThemeType, TimezoneOption } from '@vben-core/typings';
 
 interface BuiltinThemePreset {
   color: string;
@@ -81,8 +81,39 @@ const BUILT_IN_THEME_PRESETS: BuiltinThemePreset[] = [
   },
 ];
 
+/**
+ * 时区选项
+ */
+const DEFAULT_TIME_ZONE_OPTIONS: TimezoneOption[] = [
+  {
+    offset: -5,
+    timezone: 'America/New_York',
+    label: 'America/New_York(GMT-5)',
+  },
+  {
+    offset: 0,
+    timezone: 'Europe/London',
+    label: 'Europe/London(GMT0)',
+  },
+  {
+    offset: 8,
+    timezone: 'Asia/Shanghai',
+    label: 'Asia/Shanghai(GMT+8)',
+  },
+  {
+    offset: 9,
+    timezone: 'Asia/Tokyo',
+    label: 'Asia/Tokyo(GMT+9)',
+  },
+  {
+    offset: 9,
+    timezone: 'Asia/Seoul',
+    label: 'Asia/Seoul(GMT+9)',
+  },
+];
+
 export const COLOR_PRESETS = [...BUILT_IN_THEME_PRESETS].slice(0, 7);
 
-export { BUILT_IN_THEME_PRESETS };
+export { BUILT_IN_THEME_PRESETS, DEFAULT_TIME_ZONE_OPTIONS };
 
 export type { BuiltinThemePreset };
diff --git a/packages/@core/preferences/src/types.ts b/packages/@core/preferences/src/types.ts
index 0c90da806..9a4d94bdf 100644
--- a/packages/@core/preferences/src/types.ts
+++ b/packages/@core/preferences/src/types.ts
@@ -146,6 +146,8 @@ interface LogoPreferences {
   fit: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
   /** logo地址 */
   source: string;
+  /** 暗色主题logo地址 (可选，若不设置则使用 source) */
+  sourceDark?: string;
 }
 
 interface NavigationPreferences {
@@ -275,6 +277,8 @@ interface WidgetPreferences {
   sidebarToggle: boolean;
   /** 是否显示主题切换部件 */
   themeToggle: boolean;
+  /** 是否显示时区部件 */
+  timezone: boolean;
 }
 
 interface Preferences {
diff --git a/packages/@core/ui-kit/layout-ui/src/vben-layout.vue b/packages/@core/ui-kit/layout-ui/src/vben-layout.vue
index e9e98dd4d..3ae529eeb 100644
--- a/packages/@core/ui-kit/layout-ui/src/vben-layout.vue
+++ b/packages/@core/ui-kit/layout-ui/src/vben-layout.vue
@@ -10,7 +10,7 @@ import {
   useLayoutFooterStyle,
   useLayoutHeaderStyle,
 } from '@vben-core/composables';
-import { Menu } from '@vben-core/icons';
+import { IconifyIcon } from '@vben-core/icons';
 import { VbenIconButton } from '@vben-core/shadcn-ui';
 import { ELEMENT_ID_MAIN_CONTENT } from '@vben-core/shared/constants';
 
@@ -559,7 +559,8 @@ const idMainContent = ELEMENT_ID_MAIN_CONTENT;
               class="my-0 mr-1 rounded-md"
               @click="handleHeaderToggle"
             >
-              <Menu class="size-4" />
+              <IconifyIcon v-if="showSidebar" icon="ep:fold" />
+              <IconifyIcon v-else icon="ep:expand" />
             </VbenIconButton>
           </template>
           <slot name="header"></slot>
diff --git a/packages/@core/ui-kit/menu-ui/src/components/sub-menu.vue b/packages/@core/ui-kit/menu-ui/src/components/sub-menu.vue
index 7a82e724b..6dfeb77f0 100644
--- a/packages/@core/ui-kit/menu-ui/src/components/sub-menu.vue
+++ b/packages/@core/ui-kit/menu-ui/src/components/sub-menu.vue
@@ -209,7 +209,7 @@ onBeforeUnmount(() => {
           is(rootMenu.theme, true),
           opened ? '' : 'hidden',
           'overflow-auto',
-          'max-h-[calc(var(--radix-hover-card-content-available-height)-20px)]',
+          'max-h-[calc(var(--reka-hover-card-content-available-height)-20px)]',
         ]"
         :content-props="contentProps"
         :open="true"
diff --git a/packages/@core/ui-kit/popup-ui/src/modal/modal.vue b/packages/@core/ui-kit/popup-ui/src/modal/modal.vue
index 89184750c..a44a616ce 100644
--- a/packages/@core/ui-kit/popup-ui/src/modal/modal.vue
+++ b/packages/@core/ui-kit/popup-ui/src/modal/modal.vue
@@ -180,7 +180,7 @@ function escapeKeyDown(e: KeyboardEvent) {
   }
 }
 
-function handerOpenAutoFocus(e: Event) {
+function handleOpenAutoFocus(e: Event) {
   if (!openAutoFocus.value) {
     e?.preventDefault();
   }
@@ -209,6 +209,12 @@ const getForceMount = computed(() => {
   return !unref(destroyOnClose) && unref(firstOpened);
 });
 
+const handleOpened = () => {
+  requestAnimationFrame(() => {
+    props.modalApi?.onOpened();
+  });
+};
+
 function handleClosed() {
   isClosed.value = true;
   props.modalApi?.onClosed();
@@ -253,8 +259,8 @@ function handleClosed() {
       @escape-key-down="escapeKeyDown"
       @focus-outside="handleFocusOutside"
       @interact-outside="interactOutside"
-      @open-auto-focus="handerOpenAutoFocus"
-      @opened="() => modalApi?.onOpened()"
+      @open-auto-focus="handleOpenAutoFocus"
+      @opened="handleOpened"
       @pointer-down-outside="pointerDownOutside"
     >
       <DialogHeader
diff --git a/packages/@core/ui-kit/shadcn-ui/package.json b/packages/@core/ui-kit/shadcn-ui/package.json
index 889c28353..6c2c4a7fb 100644
--- a/packages/@core/ui-kit/shadcn-ui/package.json
+++ b/packages/@core/ui-kit/shadcn-ui/package.json
@@ -47,7 +47,7 @@
     "@vueuse/core": "catalog:",
     "class-variance-authority": "catalog:",
     "lucide-vue-next": "catalog:",
-    "radix-vue": "catalog:",
+    "reka-ui": "catalog:",
     "vee-validate": "catalog:",
     "vue": "catalog:"
   }
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/avatar/avatar.vue b/packages/@core/ui-kit/shadcn-ui/src/components/avatar/avatar.vue
index a63f349c3..9ed840890 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/avatar/avatar.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/avatar/avatar.vue
@@ -3,7 +3,7 @@ import type {
   AvatarFallbackProps,
   AvatarImageProps,
   AvatarRootProps,
-} from 'radix-vue';
+} from 'reka-ui';
 
 import type { CSSProperties } from 'vue';
 
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/breadcrumb-view.vue b/packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/breadcrumb-view.vue
index 88ba0e628..3e73343cb 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/breadcrumb-view.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/breadcrumb/breadcrumb-view.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { BreadcrumbProps } from './types';
 
-import { useForwardPropsEmits } from 'radix-vue';
+import { useForwardPropsEmits } from 'reka-ui';
 
 import BreadcrumbBackground from './breadcrumb-background.vue';
 import Breadcrumb from './breadcrumb.vue';
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/button/button.ts b/packages/@core/ui-kit/shadcn-ui/src/components/button/button.ts
index bcb7a0c7e..dc84a18ac 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/button/button.ts
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/button/button.ts
@@ -1,4 +1,4 @@
-import type { AsTag } from 'radix-vue';
+import type { AsTag } from 'reka-ui';
 
 import type { Component } from 'vue';
 
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/button/button.vue b/packages/@core/ui-kit/shadcn-ui/src/components/button/button.vue
index cb9b3e573..8d53a1e40 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/button/button.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/button/button.vue
@@ -6,7 +6,7 @@ import { computed } from 'vue';
 import { LoaderCircle } from '@vben-core/icons';
 import { cn } from '@vben-core/shared/utils';
 
-import { Primitive } from 'radix-vue';
+import { Primitive } from 'reka-ui';
 
 import { buttonVariants } from '../../ui';
 
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/checkbox/checkbox.vue b/packages/@core/ui-kit/shadcn-ui/src/components/checkbox/checkbox.vue
index 6d812e86e..bceaa2051 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/checkbox/checkbox.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/checkbox/checkbox.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { CheckboxRootEmits, CheckboxRootProps } from 'radix-vue';
+import type { CheckboxRootEmits, CheckboxRootProps } from 'reka-ui';
 
 import { useId } from 'vue';
 
-import { useForwardPropsEmits } from 'radix-vue';
+import { useForwardPropsEmits } from 'reka-ui';
 
 import { Checkbox } from '../../ui/checkbox';
 
@@ -11,7 +11,7 @@ const props = defineProps<CheckboxRootProps & { indeterminate?: boolean }>();
 
 const emits = defineEmits<CheckboxRootEmits>();
 
-const checked = defineModel<boolean>('checked');
+const checked = defineModel<boolean>();
 
 const forwarded = useForwardPropsEmits(props, emits);
 
@@ -20,7 +20,7 @@ const id = useId();
 
 <template>
   <div class="flex items-center">
-    <Checkbox v-bind="forwarded" :id="id" v-model:checked="checked" />
+    <Checkbox v-bind="forwarded" :id="id" v-model="checked" />
     <label :for="id" class="ml-2 cursor-pointer text-sm"> <slot></slot> </label>
   </div>
 </template>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/context-menu/context-menu.vue b/packages/@core/ui-kit/shadcn-ui/src/components/context-menu/context-menu.vue
index a9bfed6e3..4b7a64cbb 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/context-menu/context-menu.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/context-menu/context-menu.vue
@@ -3,7 +3,7 @@ import type {
   ContextMenuContentProps,
   ContextMenuRootEmits,
   ContextMenuRootProps,
-} from 'radix-vue';
+} from 'reka-ui';
 
 import type { ClassType } from '@vben-core/typings';
 
@@ -11,7 +11,7 @@ import type { IContextMenuItem } from './interface';
 
 import { computed } from 'vue';
 
-import { useForwardPropsEmits } from 'radix-vue';
+import { useForwardPropsEmits } from 'reka-ui';
 
 import {
   ContextMenu,
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/hover-card/hover-card.vue b/packages/@core/ui-kit/shadcn-ui/src/components/hover-card/hover-card.vue
index 287e89191..47ddad84c 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/hover-card/hover-card.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/hover-card/hover-card.vue
@@ -3,13 +3,13 @@ import type {
   HoverCardContentProps,
   HoverCardRootEmits,
   HoverCardRootProps,
-} from 'radix-vue';
+} from 'reka-ui';
 
 import type { ClassType } from '@vben-core/typings';
 
 import { computed } from 'vue';
 
-import { useForwardPropsEmits } from 'radix-vue';
+import { useForwardPropsEmits } from 'reka-ui';
 
 import { HoverCard, HoverCardContent, HoverCardTrigger } from '../../ui';
 
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/hover-card/index.ts b/packages/@core/ui-kit/shadcn-ui/src/components/hover-card/index.ts
index 44a75808c..3582521c6 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/hover-card/index.ts
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/hover-card/index.ts
@@ -1,2 +1,2 @@
 export { default as VbenHoverCard } from './hover-card.vue';
-export type { HoverCardContentProps } from 'radix-vue';
+export type { HoverCardContentProps } from 'reka-ui';
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/logo/logo.vue b/packages/@core/ui-kit/shadcn-ui/src/components/logo/logo.vue
index d8be09a16..8ad1e81cd 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/logo/logo.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/logo/logo.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { computed } from 'vue';
+
 import { VbenAvatar } from '../avatar';
 
 interface Props {
@@ -22,6 +24,10 @@ interface Props {
    * @zh_CN Logo 图标
    */
   src?: string;
+  /**
+   * @zh_CN 暗色主题 Logo 图标 (可选，若不设置则使用 src)
+   */
+  srcDark?: string;
   /**
    * @zh_CN Logo 文本
    */
@@ -36,14 +42,27 @@ defineOptions({
   name: 'VbenLogo',
 });
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
   collapsed: false,
   href: 'javascript:void 0',
   logoSize: 32,
   src: '',
+  srcDark: '',
   theme: 'light',
   fit: 'cover',
 });
+
+/**
+ * @zh_CN 根据主题选择合适的 logo 图标
+ */
+const logoSrc = computed(() => {
+  // 如果是暗色主题且提供了 srcDark，则使用暗色主题的 logo
+  if (props.theme === 'dark' && props.srcDark) {
+    return props.srcDark;
+  }
+  // 否则使用默认的 src
+  return props.src;
+});
 </script>
 
 <template>
@@ -54,9 +73,9 @@ withDefaults(defineProps<Props>(), {
       class="flex h-full items-center gap-2 overflow-hidden px-3 text-lg leading-normal transition-all duration-500"
     >
       <VbenAvatar
-        v-if="src"
+        v-if="logoSrc"
         :alt="text"
-        :src="src"
+        :src="logoSrc"
         :size="logoSize"
         :fit="fit"
         class="relative rounded-none bg-transparent"
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/pin-input/input.vue b/packages/@core/ui-kit/shadcn-ui/src/components/pin-input/input.vue
index 9bbd456f9..a8557788d 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/pin-input/input.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/pin-input/input.vue
@@ -84,6 +84,8 @@ onBeforeUnmount(() => {
 });
 
 const id = useId();
+
+const pinType = 'text' as const;
 </script>
 
 <template>
@@ -94,7 +96,7 @@ const id = useId();
     class="flex w-full justify-between"
     otp
     placeholder="○"
-    type="number"
+    :type="pinType"
     @complete="handleComplete"
   >
     <div class="relative flex w-full">
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/popover/popover.vue b/packages/@core/ui-kit/shadcn-ui/src/components/popover/popover.vue
index c398bddc2..2350d179e 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/popover/popover.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/popover/popover.vue
@@ -3,13 +3,13 @@ import type {
   PopoverContentProps,
   PopoverRootEmits,
   PopoverRootProps,
-} from 'radix-vue';
+} from 'reka-ui';
 
 import type { ClassType } from '@vben-core/typings';
 
 import { computed } from 'vue';
 
-import { useForwardPropsEmits } from 'radix-vue';
+import { useForwardPropsEmits } from 'reka-ui';
 
 import {
   PopoverContent,
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/segmented/segmented.vue b/packages/@core/ui-kit/shadcn-ui/src/components/segmented/segmented.vue
index 27fd12ecb..79e3f0be8 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/segmented/segmented.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/segmented/segmented.vue
@@ -3,7 +3,7 @@ import type { SegmentedItem } from './types';
 
 import { computed } from 'vue';
 
-import { TabsTrigger } from 'radix-vue';
+import { TabsTrigger } from 'reka-ui';
 
 import { Tabs, TabsContent, TabsList } from '../../ui';
 import TabsIndicator from './tabs-indicator.vue';
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/segmented/tabs-indicator.vue b/packages/@core/ui-kit/shadcn-ui/src/components/segmented/tabs-indicator.vue
index 987f3ea9e..22d2aa7bd 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/segmented/tabs-indicator.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/segmented/tabs-indicator.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import type { TabsIndicatorProps } from 'radix-vue';
+import type { TabsIndicatorProps } from 'reka-ui';
 
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { TabsIndicator, useForwardProps } from 'radix-vue';
+import { TabsIndicator, useForwardProps } from 'reka-ui';
 
 const props = defineProps<TabsIndicatorProps & { class?: any }>();
 
@@ -23,7 +23,7 @@ const forwardedProps = useForwardProps(delegatedProps);
     v-bind="forwardedProps"
     :class="
       cn(
-        'absolute bottom-0 left-0 z-10 h-full w-1/2 translate-x-[--radix-tabs-indicator-position] rounded-full px-0 py-1 pr-0.5 transition-[width,transform] duration-300',
+        'absolute bottom-0 left-0 z-10 h-full w-1/2 translate-x-[--reka-tabs-indicator-position] rounded-full px-0 py-1 pr-0.5 transition-[width,transform] duration-300',
         props.class,
       )
     "
diff --git a/packages/@core/ui-kit/shadcn-ui/src/components/tooltip/tooltip.vue b/packages/@core/ui-kit/shadcn-ui/src/components/tooltip/tooltip.vue
index defb06514..61dc16278 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/components/tooltip/tooltip.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/components/tooltip/tooltip.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { TooltipContentProps } from 'radix-vue';
+import type { TooltipContentProps } from 'reka-ui';
 
 import type { StyleValue } from 'vue';
 
diff --git a/packages/@core/ui-kit/shadcn-ui/src/index.ts b/packages/@core/ui-kit/shadcn-ui/src/index.ts
index 00e1b990a..a7c9ee4ae 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/index.ts
+++ b/packages/@core/ui-kit/shadcn-ui/src/index.ts
@@ -1,3 +1,3 @@
 export * from './components';
 export * from './ui';
-export { createContext, Slot, VisuallyHidden } from 'radix-vue';
+export { createContext, Slot, VisuallyHidden } from 'reka-ui';
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/accordion/Accordion.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/accordion/Accordion.vue
index 94f5477d9..dc441ad3f 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/accordion/Accordion.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/accordion/Accordion.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { AccordionRootEmits, AccordionRootProps } from 'radix-vue';
+import type { AccordionRootEmits, AccordionRootProps } from 'reka-ui';
 
-import { AccordionRoot, useForwardPropsEmits } from 'radix-vue';
+import { AccordionRoot, useForwardPropsEmits } from 'reka-ui';
 
 const props = defineProps<AccordionRootProps>();
 const emits = defineEmits<AccordionRootEmits>();
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/accordion/AccordionContent.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/accordion/AccordionContent.vue
index 8e590efdb..cb635c88b 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/accordion/AccordionContent.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/accordion/AccordionContent.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import type { AccordionContentProps } from 'radix-vue';
+import type { AccordionContentProps } from 'reka-ui';
 
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { AccordionContent } from 'radix-vue';
+import { AccordionContent } from 'reka-ui';
 
 const props = defineProps<AccordionContentProps & { class?: any }>();
 
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/accordion/AccordionItem.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/accordion/AccordionItem.vue
index 11c1c2dd1..fe2e466a2 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/accordion/AccordionItem.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/accordion/AccordionItem.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import type { AccordionItemProps } from 'radix-vue';
+import type { AccordionItemProps } from 'reka-ui';
 
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { AccordionItem, useForwardProps } from 'radix-vue';
+import { AccordionItem, useForwardProps } from 'reka-ui';
 
 const props = defineProps<AccordionItemProps & { class?: any }>();
 
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/accordion/AccordionTrigger.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/accordion/AccordionTrigger.vue
index bbe4d5bd8..c0c6bda56 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/accordion/AccordionTrigger.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/accordion/AccordionTrigger.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import type { AccordionTriggerProps } from 'radix-vue';
+import type { AccordionTriggerProps } from 'reka-ui';
 
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
 import { ChevronDown } from 'lucide-vue-next';
-import { AccordionHeader, AccordionTrigger } from 'radix-vue';
+import { AccordionHeader, AccordionTrigger } from 'reka-ui';
 
 const props = defineProps<AccordionTriggerProps & { class?: any }>();
 
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialog.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialog.vue
index f20528872..f8033f5a8 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialog.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialog.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { AlertDialogEmits, AlertDialogProps } from 'radix-vue';
+import type { AlertDialogEmits, AlertDialogProps } from 'reka-ui';
 
-import { AlertDialogRoot, useForwardPropsEmits } from 'radix-vue';
+import { AlertDialogRoot, useForwardPropsEmits } from 'reka-ui';
 
 const props = defineProps<AlertDialogProps>();
 const emits = defineEmits<AlertDialogEmits>();
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogAction.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogAction.vue
index 6b2d75c8b..d5da3f006 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogAction.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogAction.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { AlertDialogActionProps } from 'radix-vue';
+import type { AlertDialogActionProps } from 'reka-ui';
 
-import { AlertDialogAction } from 'radix-vue';
+import { AlertDialogAction } from 'reka-ui';
 
 const props = defineProps<AlertDialogActionProps>();
 </script>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogCancel.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogCancel.vue
index 9f1d2903a..2b6f62ac0 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogCancel.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogCancel.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { AlertDialogCancelProps } from 'radix-vue';
+import type { AlertDialogCancelProps } from 'reka-ui';
 
-import { AlertDialogCancel } from 'radix-vue';
+import { AlertDialogCancel } from 'reka-ui';
 
 const props = defineProps<AlertDialogCancelProps>();
 </script>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogContent.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogContent.vue
index 522ada37b..f3184be6e 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogContent.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogContent.vue
@@ -1,8 +1,5 @@
 <script setup lang="ts">
-import type {
-  AlertDialogContentEmits,
-  AlertDialogContentProps,
-} from 'radix-vue';
+import type { AlertDialogContentEmits, AlertDialogContentProps } from 'reka-ui';
 
 import type { ClassType } from '@vben-core/typings';
 
@@ -14,7 +11,7 @@ import {
   AlertDialogContent,
   AlertDialogPortal,
   useForwardPropsEmits,
-} from 'radix-vue';
+} from 'reka-ui';
 
 import AlertDialogOverlay from './AlertDialogOverlay.vue';
 
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogDescription.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogDescription.vue
index da231989e..0b64f0c95 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogDescription.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogDescription.vue
@@ -1,11 +1,11 @@
 <script lang="ts" setup>
-import type { AlertDialogDescriptionProps } from 'radix-vue';
+import type { AlertDialogDescriptionProps } from 'reka-ui';
 
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { AlertDialogDescription, useForwardProps } from 'radix-vue';
+import { AlertDialogDescription, useForwardProps } from 'reka-ui';
 
 const props = defineProps<AlertDialogDescriptionProps & { class?: any }>();
 
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogTitle.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogTitle.vue
index 01d4759f0..fff8a21bd 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogTitle.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogTitle.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import type { AlertDialogTitleProps } from 'radix-vue';
+import type { AlertDialogTitleProps } from 'reka-ui';
 
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { AlertDialogTitle, useForwardProps } from 'radix-vue';
+import { AlertDialogTitle, useForwardProps } from 'reka-ui';
 
 const props = defineProps<AlertDialogTitleProps & { class?: any }>();
 
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/avatar/Avatar.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/avatar/Avatar.vue
index 0b0b2eb7c..0ea0ac052 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/avatar/Avatar.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/avatar/Avatar.vue
@@ -3,7 +3,7 @@ import type { AvatarVariants } from './avatar';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { AvatarRoot } from 'radix-vue';
+import { AvatarRoot } from 'reka-ui';
 
 import { avatarVariant } from './avatar';
 
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/avatar/AvatarFallback.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/avatar/AvatarFallback.vue
index 81e837fb7..9aac9312e 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/avatar/AvatarFallback.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/avatar/AvatarFallback.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { AvatarFallbackProps } from 'radix-vue';
+import type { AvatarFallbackProps } from 'reka-ui';
 
-import { AvatarFallback } from 'radix-vue';
+import { AvatarFallback } from 'reka-ui';
 
 const props = defineProps<AvatarFallbackProps>();
 </script>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/avatar/AvatarImage.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/avatar/AvatarImage.vue
index 787eeeb7e..bdf2df5d9 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/avatar/AvatarImage.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/avatar/AvatarImage.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { AvatarImageProps } from 'radix-vue';
+import type { AvatarImageProps } from 'reka-ui';
 
-import { AvatarImage } from 'radix-vue';
+import { AvatarImage } from 'reka-ui';
 
 const props = defineProps<AvatarImageProps>();
 </script>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/breadcrumb/BreadcrumbLink.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/breadcrumb/BreadcrumbLink.vue
index fb985abe8..28942f888 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/breadcrumb/BreadcrumbLink.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/breadcrumb/BreadcrumbLink.vue
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
-import type { PrimitiveProps } from 'radix-vue';
+import type { PrimitiveProps } from 'reka-ui';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { Primitive } from 'radix-vue';
+import { Primitive } from 'reka-ui';
 
 const props = withDefaults(defineProps<PrimitiveProps & { class?: any }>(), {
   as: 'a',
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/button/Button.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/button/Button.vue
index 03e67803b..0af62722b 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/button/Button.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/button/Button.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import type { PrimitiveProps } from 'radix-vue';
+import type { PrimitiveProps } from 'reka-ui';
 
 import type { ButtonVariants, ButtonVariantSize } from './types';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { Primitive } from 'radix-vue';
+import { Primitive } from 'reka-ui';
 
 import { buttonVariants } from './button';
 
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/checkbox/Checkbox.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/checkbox/Checkbox.vue
index d771d8938..39577e2c5 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/checkbox/Checkbox.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/checkbox/Checkbox.vue
@@ -1,16 +1,12 @@
 <script setup lang="ts">
-import type { CheckboxRootEmits, CheckboxRootProps } from 'radix-vue';
+import type { CheckboxRootEmits, CheckboxRootProps } from 'reka-ui';
 
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
 import { Check, Minus } from 'lucide-vue-next';
-import {
-  CheckboxIndicator,
-  CheckboxRoot,
-  useForwardPropsEmits,
-} from 'radix-vue';
+import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'reka-ui';
 
 const props = defineProps<
   CheckboxRootProps & { class?: any; indeterminate?: boolean }
@@ -31,7 +27,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
     v-bind="forwarded"
     :class="
       cn(
-        'focus-visible:ring-ring data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground border-border peer h-4 w-4 shrink-0 rounded-sm border transition focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50',
+        'focus-visible:ring-ring data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground border-border hover:border-primary peer h-4 w-4 shrink-0 rounded-sm border transition focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50',
         props.class,
       )
     "
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenu.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenu.vue
index 082636a36..128195415 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenu.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenu.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { ContextMenuRootEmits, ContextMenuRootProps } from 'radix-vue';
+import type { ContextMenuRootEmits, ContextMenuRootProps } from 'reka-ui';
 
-import { ContextMenuRoot, useForwardPropsEmits } from 'radix-vue';
+import { ContextMenuRoot, useForwardPropsEmits } from 'reka-ui';
 
 const props = withDefaults(defineProps<ContextMenuRootProps>(), {
   modal: false,
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuCheckboxItem.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuCheckboxItem.vue
index cf592485d..0af6fa1bb 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuCheckboxItem.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuCheckboxItem.vue
@@ -2,7 +2,7 @@
 import type {
   ContextMenuCheckboxItemEmits,
   ContextMenuCheckboxItemProps,
-} from 'radix-vue';
+} from 'reka-ui';
 
 import { computed } from 'vue';
 
@@ -13,7 +13,7 @@ import {
   ContextMenuCheckboxItem,
   ContextMenuItemIndicator,
   useForwardPropsEmits,
-} from 'radix-vue';
+} from 'reka-ui';
 
 const props = defineProps<ContextMenuCheckboxItemProps & { class?: any }>();
 const emits = defineEmits<ContextMenuCheckboxItemEmits>();
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuContent.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuContent.vue
index bd663b160..76701d82a 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuContent.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuContent.vue
@@ -1,8 +1,5 @@
 <script setup lang="ts">
-import type {
-  ContextMenuContentEmits,
-  ContextMenuContentProps,
-} from 'radix-vue';
+import type { ContextMenuContentEmits, ContextMenuContentProps } from 'reka-ui';
 
 import { computed } from 'vue';
 
@@ -12,7 +9,7 @@ import {
   ContextMenuContent,
   ContextMenuPortal,
   useForwardPropsEmits,
-} from 'radix-vue';
+} from 'reka-ui';
 
 const props = defineProps<ContextMenuContentProps & { class?: any }>();
 const emits = defineEmits<ContextMenuContentEmits>();
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuGroup.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuGroup.vue
index e00532610..55accfefd 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuGroup.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuGroup.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { ContextMenuGroupProps } from 'radix-vue';
+import type { ContextMenuGroupProps } from 'reka-ui';
 
-import { ContextMenuGroup } from 'radix-vue';
+import { ContextMenuGroup } from 'reka-ui';
 
 const props = defineProps<ContextMenuGroupProps>();
 </script>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuItem.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuItem.vue
index aab42115d..0fbf5715c 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuItem.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuItem.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import type { ContextMenuItemEmits, ContextMenuItemProps } from 'radix-vue';
+import type { ContextMenuItemEmits, ContextMenuItemProps } from 'reka-ui';
 
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { ContextMenuItem, useForwardPropsEmits } from 'radix-vue';
+import { ContextMenuItem, useForwardPropsEmits } from 'reka-ui';
 
 const props = defineProps<
   ContextMenuItemProps & { class?: any; inset?: boolean }
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuLabel.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuLabel.vue
index a3aa954e6..3157da445 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuLabel.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuLabel.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import type { ContextMenuLabelProps } from 'radix-vue';
+import type { ContextMenuLabelProps } from 'reka-ui';
 
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { ContextMenuLabel } from 'radix-vue';
+import { ContextMenuLabel } from 'reka-ui';
 
 const props = defineProps<
   ContextMenuLabelProps & { class?: any; inset?: boolean }
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuPortal.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuPortal.vue
index 735657914..5328f7734 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuPortal.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuPortal.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { ContextMenuPortalProps } from 'radix-vue';
+import type { ContextMenuPortalProps } from 'reka-ui';
 
-import { ContextMenuPortal } from 'radix-vue';
+import { ContextMenuPortal } from 'reka-ui';
 
 const props = defineProps<ContextMenuPortalProps>();
 </script>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuRadioGroup.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuRadioGroup.vue
index b757dd516..1d2815712 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuRadioGroup.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuRadioGroup.vue
@@ -2,9 +2,9 @@
 import type {
   ContextMenuRadioGroupEmits,
   ContextMenuRadioGroupProps,
-} from 'radix-vue';
+} from 'reka-ui';
 
-import { ContextMenuRadioGroup, useForwardPropsEmits } from 'radix-vue';
+import { ContextMenuRadioGroup, useForwardPropsEmits } from 'reka-ui';
 
 const props = defineProps<ContextMenuRadioGroupProps>();
 const emits = defineEmits<ContextMenuRadioGroupEmits>();
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuRadioItem.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuRadioItem.vue
index d37b96126..f23462dff 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuRadioItem.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuRadioItem.vue
@@ -2,7 +2,7 @@
 import type {
   ContextMenuRadioItemEmits,
   ContextMenuRadioItemProps,
-} from 'radix-vue';
+} from 'reka-ui';
 
 import { computed } from 'vue';
 
@@ -13,7 +13,7 @@ import {
   ContextMenuItemIndicator,
   ContextMenuRadioItem,
   useForwardPropsEmits,
-} from 'radix-vue';
+} from 'reka-ui';
 
 const props = defineProps<ContextMenuRadioItemProps & { class?: any }>();
 const emits = defineEmits<ContextMenuRadioItemEmits>();
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuSeparator.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuSeparator.vue
index 482e47e28..4c92e9267 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuSeparator.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuSeparator.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import type { ContextMenuSeparatorProps } from 'radix-vue';
+import type { ContextMenuSeparatorProps } from 'reka-ui';
 
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { ContextMenuSeparator } from 'radix-vue';
+import { ContextMenuSeparator } from 'reka-ui';
 
 const props = defineProps<ContextMenuSeparatorProps & { class?: any }>();
 
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuSub.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuSub.vue
index 309f19d8d..c15197264 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuSub.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuSub.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { ContextMenuSubEmits, ContextMenuSubProps } from 'radix-vue';
+import type { ContextMenuSubEmits, ContextMenuSubProps } from 'reka-ui';
 
-import { ContextMenuSub, useForwardPropsEmits } from 'radix-vue';
+import { ContextMenuSub, useForwardPropsEmits } from 'reka-ui';
 
 const props = defineProps<ContextMenuSubProps>();
 const emits = defineEmits<ContextMenuSubEmits>();
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuSubContent.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuSubContent.vue
index 9084a5d98..0b02b5e4e 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuSubContent.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuSubContent.vue
@@ -2,13 +2,13 @@
 import type {
   DropdownMenuSubContentEmits,
   DropdownMenuSubContentProps,
-} from 'radix-vue';
+} from 'reka-ui';
 
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { ContextMenuSubContent, useForwardPropsEmits } from 'radix-vue';
+import { ContextMenuSubContent, useForwardPropsEmits } from 'reka-ui';
 
 const props = defineProps<DropdownMenuSubContentProps & { class?: any }>();
 const emits = defineEmits<DropdownMenuSubContentEmits>();
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuSubTrigger.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuSubTrigger.vue
index 838f08ef6..b7ced22b9 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuSubTrigger.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuSubTrigger.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import type { ContextMenuSubTriggerProps } from 'radix-vue';
+import type { ContextMenuSubTriggerProps } from 'reka-ui';
 
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
 import { ChevronRight } from 'lucide-vue-next';
-import { ContextMenuSubTrigger, useForwardProps } from 'radix-vue';
+import { ContextMenuSubTrigger, useForwardProps } from 'reka-ui';
 
 const props = defineProps<
   ContextMenuSubTriggerProps & {
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuTrigger.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuTrigger.vue
index 242826e80..143206a26 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuTrigger.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/context-menu/ContextMenuTrigger.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { ContextMenuTriggerProps } from 'radix-vue';
+import type { ContextMenuTriggerProps } from 'reka-ui';
 
-import { ContextMenuTrigger, useForwardProps } from 'radix-vue';
+import { ContextMenuTrigger, useForwardProps } from 'reka-ui';
 
 const props = defineProps<ContextMenuTriggerProps>();
 
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/Dialog.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/Dialog.vue
index c16427230..55ae642ba 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/Dialog.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/Dialog.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { DialogRootEmits, DialogRootProps } from 'radix-vue';
+import type { DialogRootEmits, DialogRootProps } from 'reka-ui';
 
-import { DialogRoot, useForwardPropsEmits } from 'radix-vue';
+import { DialogRoot, useForwardPropsEmits } from 'reka-ui';
 
 const props = defineProps<DialogRootProps>();
 const emits = defineEmits<DialogRootEmits>();
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogClose.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogClose.vue
index 3cfcd0af9..6415a3ef1 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogClose.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogClose.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { DialogCloseProps } from 'radix-vue';
+import type { DialogCloseProps } from 'reka-ui';
 
-import { DialogClose } from 'radix-vue';
+import { DialogClose } from 'reka-ui';
 
 const props = defineProps<DialogCloseProps>();
 </script>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogContent.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogContent.vue
index ae656b979..eede68e6c 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogContent.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogContent.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { DialogContentEmits, DialogContentProps } from 'radix-vue';
+import type { DialogContentEmits, DialogContentProps } from 'reka-ui';
 
 import type { ClassType } from '@vben-core/typings';
 
@@ -8,7 +8,7 @@ import { computed, ref } from 'vue';
 import { cn } from '@vben-core/shared/utils';
 
 import { X } from 'lucide-vue-next';
-import { DialogClose, DialogContent, useForwardPropsEmits } from 'radix-vue';
+import { DialogClose, DialogContent, useForwardPropsEmits } from 'reka-ui';
 
 import DialogOverlay from './DialogOverlay.vue';
 
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogDescription.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogDescription.vue
index 436fff836..18fed13db 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogDescription.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogDescription.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import type { DialogDescriptionProps } from 'radix-vue';
+import type { DialogDescriptionProps } from 'reka-ui';
 
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { DialogDescription, useForwardProps } from 'radix-vue';
+import { DialogDescription, useForwardProps } from 'reka-ui';
 
 const props = defineProps<DialogDescriptionProps & { class?: any }>();
 
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogScrollContent.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogScrollContent.vue
index 95908abe5..141326e82 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogScrollContent.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogScrollContent.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { DialogContentEmits, DialogContentProps } from 'radix-vue';
+import type { DialogContentEmits, DialogContentProps } from 'reka-ui';
 
 import { computed } from 'vue';
 
@@ -12,7 +12,7 @@ import {
   DialogOverlay,
   DialogPortal,
   useForwardPropsEmits,
-} from 'radix-vue';
+} from 'reka-ui';
 
 const props = withDefaults(
   defineProps<DialogContentProps & { class?: any; zIndex?: number }>(),
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogTitle.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogTitle.vue
index 3804cfb4a..396e4b77d 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogTitle.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogTitle.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import type { DialogTitleProps } from 'radix-vue';
+import type { DialogTitleProps } from 'reka-ui';
 
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { DialogTitle, useForwardProps } from 'radix-vue';
+import { DialogTitle, useForwardProps } from 'reka-ui';
 
 const props = defineProps<DialogTitleProps & { class?: any }>();
 
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogTrigger.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogTrigger.vue
index 6a7b8d212..121f3870c 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogTrigger.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/dialog/DialogTrigger.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { DialogTriggerProps } from 'radix-vue';
+import type { DialogTriggerProps } from 'reka-ui';
 
-import { DialogTrigger } from 'radix-vue';
+import { DialogTrigger } from 'reka-ui';
 
 const props = defineProps<DialogTriggerProps>();
 </script>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenu.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenu.vue
index 12c20692b..d9408a0d2 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenu.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenu.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { DropdownMenuRootEmits, DropdownMenuRootProps } from 'radix-vue';
+import type { DropdownMenuRootEmits, DropdownMenuRootProps } from 'reka-ui';
 
-import { DropdownMenuRoot, useForwardPropsEmits } from 'radix-vue';
+import { DropdownMenuRoot, useForwardPropsEmits } from 'reka-ui';
 
 const props = withDefaults(defineProps<DropdownMenuRootProps>(), {
   modal: false,
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuCheckboxItem.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
index f9b4b0b24..49c074d35 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
@@ -2,7 +2,7 @@
 import type {
   DropdownMenuCheckboxItemEmits,
   DropdownMenuCheckboxItemProps,
-} from 'radix-vue';
+} from 'reka-ui';
 
 import { computed } from 'vue';
 
@@ -13,7 +13,7 @@ import {
   DropdownMenuCheckboxItem,
   DropdownMenuItemIndicator,
   useForwardPropsEmits,
-} from 'radix-vue';
+} from 'reka-ui';
 
 const props = defineProps<DropdownMenuCheckboxItemProps & { class?: any }>();
 const emits = defineEmits<DropdownMenuCheckboxItemEmits>();
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuContent.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuContent.vue
index ae1c9c161..295b91a2b 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuContent.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuContent.vue
@@ -2,7 +2,7 @@
 import type {
   DropdownMenuContentEmits,
   DropdownMenuContentProps,
-} from 'radix-vue';
+} from 'reka-ui';
 
 import { computed } from 'vue';
 
@@ -12,7 +12,7 @@ import {
   DropdownMenuContent,
   DropdownMenuPortal,
   useForwardPropsEmits,
-} from 'radix-vue';
+} from 'reka-ui';
 
 const props = withDefaults(
   defineProps<DropdownMenuContentProps & { class?: any }>(),
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuGroup.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuGroup.vue
index 2f28d1635..c0e42636c 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuGroup.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuGroup.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { DropdownMenuGroupProps } from 'radix-vue';
+import type { DropdownMenuGroupProps } from 'reka-ui';
 
-import { DropdownMenuGroup } from 'radix-vue';
+import { DropdownMenuGroup } from 'reka-ui';
 
 const props = defineProps<DropdownMenuGroupProps>();
 </script>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuItem.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuItem.vue
index c8836d47b..6d2f94d80 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuItem.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuItem.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import type { DropdownMenuItemProps } from 'radix-vue';
+import type { DropdownMenuItemProps } from 'reka-ui';
 
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { DropdownMenuItem, useForwardProps } from 'radix-vue';
+import { DropdownMenuItem, useForwardProps } from 'reka-ui';
 
 const props = defineProps<
   DropdownMenuItemProps & { class?: any; inset?: boolean }
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuLabel.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuLabel.vue
index baf202745..80c219f65 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuLabel.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuLabel.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import type { DropdownMenuLabelProps } from 'radix-vue';
+import type { DropdownMenuLabelProps } from 'reka-ui';
 
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { DropdownMenuLabel, useForwardProps } from 'radix-vue';
+import { DropdownMenuLabel, useForwardProps } from 'reka-ui';
 
 const props = defineProps<
   DropdownMenuLabelProps & { class?: any; inset?: boolean }
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuRadioGroup.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuRadioGroup.vue
index f2c3a7593..6ec3851f0 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuRadioGroup.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuRadioGroup.vue
@@ -2,9 +2,9 @@
 import type {
   DropdownMenuRadioGroupEmits,
   DropdownMenuRadioGroupProps,
-} from 'radix-vue';
+} from 'reka-ui';
 
-import { DropdownMenuRadioGroup, useForwardPropsEmits } from 'radix-vue';
+import { DropdownMenuRadioGroup, useForwardPropsEmits } from 'reka-ui';
 
 const props = defineProps<DropdownMenuRadioGroupProps>();
 const emits = defineEmits<DropdownMenuRadioGroupEmits>();
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuRadioItem.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuRadioItem.vue
index 253d5cca5..c949c0af9 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuRadioItem.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuRadioItem.vue
@@ -2,7 +2,7 @@
 import type {
   DropdownMenuRadioItemEmits,
   DropdownMenuRadioItemProps,
-} from 'radix-vue';
+} from 'reka-ui';
 
 import { computed } from 'vue';
 
@@ -13,7 +13,7 @@ import {
   DropdownMenuItemIndicator,
   DropdownMenuRadioItem,
   useForwardPropsEmits,
-} from 'radix-vue';
+} from 'reka-ui';
 
 const props = defineProps<DropdownMenuRadioItemProps & { class?: any }>();
 
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuSeparator.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuSeparator.vue
index 76847f5a5..8035b8f04 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuSeparator.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuSeparator.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import type { DropdownMenuSeparatorProps } from 'radix-vue';
+import type { DropdownMenuSeparatorProps } from 'reka-ui';
 
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { DropdownMenuSeparator } from 'radix-vue';
+import { DropdownMenuSeparator } from 'reka-ui';
 
 const props = defineProps<
   DropdownMenuSeparatorProps & {
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuSub.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuSub.vue
index 35d07726f..1bb9edc49 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuSub.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuSub.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { DropdownMenuSubEmits, DropdownMenuSubProps } from 'radix-vue';
+import type { DropdownMenuSubEmits, DropdownMenuSubProps } from 'reka-ui';
 
-import { DropdownMenuSub, useForwardPropsEmits } from 'radix-vue';
+import { DropdownMenuSub, useForwardPropsEmits } from 'reka-ui';
 
 const props = defineProps<DropdownMenuSubProps>();
 const emits = defineEmits<DropdownMenuSubEmits>();
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuSubContent.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuSubContent.vue
index e2981d36b..8dff02559 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuSubContent.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuSubContent.vue
@@ -2,13 +2,13 @@
 import type {
   DropdownMenuSubContentEmits,
   DropdownMenuSubContentProps,
-} from 'radix-vue';
+} from 'reka-ui';
 
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { DropdownMenuSubContent, useForwardPropsEmits } from 'radix-vue';
+import { DropdownMenuSubContent, useForwardPropsEmits } from 'reka-ui';
 
 const props = defineProps<DropdownMenuSubContentProps & { class?: any }>();
 const emits = defineEmits<DropdownMenuSubContentEmits>();
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuSubTrigger.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuSubTrigger.vue
index fb37508fd..4cd7445d6 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuSubTrigger.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuSubTrigger.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import type { DropdownMenuSubTriggerProps } from 'radix-vue';
+import type { DropdownMenuSubTriggerProps } from 'reka-ui';
 
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
 import { ChevronRight } from 'lucide-vue-next';
-import { DropdownMenuSubTrigger, useForwardProps } from 'radix-vue';
+import { DropdownMenuSubTrigger, useForwardProps } from 'reka-ui';
 
 const props = defineProps<DropdownMenuSubTriggerProps & { class?: any }>();
 
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuTrigger.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuTrigger.vue
index 736e80815..028d74ae5 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuTrigger.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/DropdownMenuTrigger.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { DropdownMenuTriggerProps } from 'radix-vue';
+import type { DropdownMenuTriggerProps } from 'reka-ui';
 
-import { DropdownMenuTrigger, useForwardProps } from 'radix-vue';
+import { DropdownMenuTrigger, useForwardProps } from 'reka-ui';
 
 const props = defineProps<DropdownMenuTriggerProps>();
 
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/index.ts b/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/index.ts
index c99f3196a..bde907bf2 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/index.ts
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/dropdown-menu/index.ts
@@ -13,4 +13,4 @@ export { default as DropdownMenuSub } from './DropdownMenuSub.vue';
 export { default as DropdownMenuSubContent } from './DropdownMenuSubContent.vue';
 export { default as DropdownMenuSubTrigger } from './DropdownMenuSubTrigger.vue';
 export { default as DropdownMenuTrigger } from './DropdownMenuTrigger.vue';
-export { DropdownMenuPortal } from 'radix-vue';
+export { DropdownMenuPortal } from 'reka-ui';
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/form/FormControl.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/form/FormControl.vue
index bd9ed859a..9fb69e262 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/form/FormControl.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/form/FormControl.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { Slot } from 'radix-vue';
+import { Slot } from 'reka-ui';
 
 import { useFormField } from './useFormField';
 
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/form/FormLabel.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/form/FormLabel.vue
index acd2f2b42..b387c1fb1 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/form/FormLabel.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/form/FormLabel.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { LabelProps } from 'radix-vue';
+import type { LabelProps } from 'reka-ui';
 
 import { cn } from '@vben-core/shared/utils';
 
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/hover-card/HoverCard.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/hover-card/HoverCard.vue
index f960699b9..ac2cc7392 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/hover-card/HoverCard.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/hover-card/HoverCard.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { HoverCardRootEmits, HoverCardRootProps } from 'radix-vue';
+import type { HoverCardRootEmits, HoverCardRootProps } from 'reka-ui';
 
-import { HoverCardRoot, useForwardPropsEmits } from 'radix-vue';
+import { HoverCardRoot, useForwardPropsEmits } from 'reka-ui';
 
 const props = defineProps<HoverCardRootProps>();
 const emits = defineEmits<HoverCardRootEmits>();
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/hover-card/HoverCardContent.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/hover-card/HoverCardContent.vue
index 15637208f..6d37fe431 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/hover-card/HoverCardContent.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/hover-card/HoverCardContent.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import type { HoverCardContentProps } from 'radix-vue';
+import type { HoverCardContentProps } from 'reka-ui';
 
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { HoverCardContent, HoverCardPortal, useForwardProps } from 'radix-vue';
+import { HoverCardContent, HoverCardPortal, useForwardProps } from 'reka-ui';
 
 const props = withDefaults(
   defineProps<HoverCardContentProps & { class?: any }>(),
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/hover-card/HoverCardTrigger.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/hover-card/HoverCardTrigger.vue
index 8c473c077..481d87c33 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/hover-card/HoverCardTrigger.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/hover-card/HoverCardTrigger.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { HoverCardTriggerProps } from 'radix-vue';
+import type { HoverCardTriggerProps } from 'reka-ui';
 
-import { HoverCardTrigger } from 'radix-vue';
+import { HoverCardTrigger } from 'reka-ui';
 
 const props = defineProps<HoverCardTriggerProps>();
 </script>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/input/Input.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/input/Input.vue
index 6dfd4c8b8..1696ae581 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/input/Input.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/input/Input.vue
@@ -24,7 +24,7 @@ const modelValue = useVModel(props, 'modelValue', emits, {
     v-model="modelValue"
     :class="
       cn(
-        'border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50',
+        'border-input bg-background ring-offset-background placeholder:text-muted-foreground/50 focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50',
         props.class,
       )
     "
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/label/Label.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/label/Label.vue
index ba6890a86..5c29e2e3b 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/label/Label.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/label/Label.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import type { LabelProps } from 'radix-vue';
+import type { LabelProps } from 'reka-ui';
 
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { Label } from 'radix-vue';
+import { Label } from 'reka-ui';
 
 const props = defineProps<LabelProps & { class?: any }>();
 
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/number-field/NumberField.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/number-field/NumberField.vue
index 4ba9459ba..c7c87af33 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/number-field/NumberField.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/number-field/NumberField.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import type { NumberFieldRootEmits, NumberFieldRootProps } from 'radix-vue';
+import type { NumberFieldRootEmits, NumberFieldRootProps } from 'reka-ui';
 
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { NumberFieldRoot, useForwardPropsEmits } from 'radix-vue';
+import { NumberFieldRoot, useForwardPropsEmits } from 'reka-ui';
 
 const props = defineProps<NumberFieldRootProps & { class?: any }>();
 const emits = defineEmits<NumberFieldRootEmits>();
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/number-field/NumberFieldDecrement.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/number-field/NumberFieldDecrement.vue
index b9e3417c7..aaf08b2be 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/number-field/NumberFieldDecrement.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/number-field/NumberFieldDecrement.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import type { NumberFieldDecrementProps } from 'radix-vue';
+import type { NumberFieldDecrementProps } from 'reka-ui';
 
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
 import { Minus } from 'lucide-vue-next';
-import { NumberFieldDecrement, useForwardProps } from 'radix-vue';
+import { NumberFieldDecrement, useForwardProps } from 'reka-ui';
 
 const props = defineProps<NumberFieldDecrementProps & { class?: any }>();
 
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/number-field/NumberFieldIncrement.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/number-field/NumberFieldIncrement.vue
index be81bd611..6a2b8bac8 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/number-field/NumberFieldIncrement.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/number-field/NumberFieldIncrement.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import type { NumberFieldIncrementProps } from 'radix-vue';
+import type { NumberFieldIncrementProps } from 'reka-ui';
 
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
 import { Plus } from 'lucide-vue-next';
-import { NumberFieldIncrement, useForwardProps } from 'radix-vue';
+import { NumberFieldIncrement, useForwardProps } from 'reka-ui';
 
 const props = defineProps<NumberFieldIncrementProps & { class?: any }>();
 
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/number-field/NumberFieldInput.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/number-field/NumberFieldInput.vue
index 48e621eed..5f10e74e8 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/number-field/NumberFieldInput.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/number-field/NumberFieldInput.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { cn } from '@vben-core/shared/utils';
 
-import { NumberFieldInput } from 'radix-vue';
+import { NumberFieldInput } from 'reka-ui';
 </script>
 
 <template>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/pagination/PaginationEllipsis.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/pagination/PaginationEllipsis.vue
index 14ad6721c..0090b1aa3 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/pagination/PaginationEllipsis.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/pagination/PaginationEllipsis.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import type { PaginationEllipsisProps } from 'radix-vue';
+import type { PaginationEllipsisProps } from 'reka-ui';
 
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
 import { MoreHorizontal } from 'lucide-vue-next';
-import { PaginationEllipsis } from 'radix-vue';
+import { PaginationEllipsis } from 'reka-ui';
 
 const props = defineProps<PaginationEllipsisProps & { class?: any }>();
 
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/pagination/PaginationFirst.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/pagination/PaginationFirst.vue
index 32b1e7b23..27284d39d 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/pagination/PaginationFirst.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/pagination/PaginationFirst.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import type { PaginationFirstProps } from 'radix-vue';
+import type { PaginationFirstProps } from 'reka-ui';
 
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
 import { ChevronsLeft } from 'lucide-vue-next';
-import { PaginationFirst } from 'radix-vue';
+import { PaginationFirst } from 'reka-ui';
 
 import { Button } from '../button';
 
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/pagination/PaginationLast.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/pagination/PaginationLast.vue
index a63f85bd5..29c00c1a1 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/pagination/PaginationLast.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/pagination/PaginationLast.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import type { PaginationLastProps } from 'radix-vue';
+import type { PaginationLastProps } from 'reka-ui';
 
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
 import { ChevronsRight } from 'lucide-vue-next';
-import { PaginationLast } from 'radix-vue';
+import { PaginationLast } from 'reka-ui';
 
 import { Button } from '../button';
 
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/pagination/PaginationNext.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/pagination/PaginationNext.vue
index 2166bcaf8..57ef4110e 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/pagination/PaginationNext.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/pagination/PaginationNext.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import type { PaginationNextProps } from 'radix-vue';
+import type { PaginationNextProps } from 'reka-ui';
 
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
 import { ChevronRight } from 'lucide-vue-next';
-import { PaginationNext } from 'radix-vue';
+import { PaginationNext } from 'reka-ui';
 
 import { Button } from '../button';
 
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/pagination/PaginationPrev.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/pagination/PaginationPrev.vue
index 0527f48f8..e95317d75 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/pagination/PaginationPrev.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/pagination/PaginationPrev.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import type { PaginationPrevProps } from 'radix-vue';
+import type { PaginationPrevProps } from 'reka-ui';
 
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
 import { ChevronLeft } from 'lucide-vue-next';
-import { PaginationPrev } from 'radix-vue';
+import { PaginationPrev } from 'reka-ui';
 
 import { Button } from '../button';
 
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/pagination/index.ts b/packages/@core/ui-kit/shadcn-ui/src/ui/pagination/index.ts
index 141e0740a..f060fd06e 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/pagination/index.ts
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/pagination/index.ts
@@ -7,4 +7,4 @@ export {
   PaginationRoot as Pagination,
   PaginationList,
   PaginationListItem,
-} from 'radix-vue';
+} from 'reka-ui';
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/pin-input/PinInput.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/pin-input/PinInput.vue
index 8da2b374d..95d59aeec 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/pin-input/PinInput.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/pin-input/PinInput.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import type { PinInputRootEmits, PinInputRootProps } from 'radix-vue';
+import type { PinInputRootEmits, PinInputRootProps } from 'reka-ui';
 
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { PinInputRoot, useForwardPropsEmits } from 'radix-vue';
+import { PinInputRoot, useForwardPropsEmits } from 'reka-ui';
 
 const props = defineProps<PinInputRootProps & { class?: any }>();
 const emits = defineEmits<PinInputRootEmits>();
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/pin-input/PinInputGroup.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/pin-input/PinInputGroup.vue
index 474041a47..02cf9aaf5 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/pin-input/PinInputGroup.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/pin-input/PinInputGroup.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import type { PrimitiveProps } from 'radix-vue';
+import type { PrimitiveProps } from 'reka-ui';
 
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { Primitive, useForwardProps } from 'radix-vue';
+import { Primitive, useForwardProps } from 'reka-ui';
 
 const props = defineProps<PrimitiveProps & { class?: any }>();
 const delegatedProps = computed(() => {
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/pin-input/PinInputInput.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/pin-input/PinInputInput.vue
index a70130ccf..b70ec193b 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/pin-input/PinInputInput.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/pin-input/PinInputInput.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import type { PinInputInputProps } from 'radix-vue';
+import type { PinInputInputProps } from 'reka-ui';
 
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { PinInputInput, useForwardProps } from 'radix-vue';
+import { PinInputInput, useForwardProps } from 'reka-ui';
 
 const props = defineProps<PinInputInputProps & { class?: any }>();
 
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/pin-input/PinInputSeparator.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/pin-input/PinInputSeparator.vue
index f352f8e49..d8a346aba 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/pin-input/PinInputSeparator.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/pin-input/PinInputSeparator.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { PrimitiveProps } from 'radix-vue';
+import type { PrimitiveProps } from 'reka-ui';
 
 import { Dot } from 'lucide-vue-next';
-import { Primitive, useForwardProps } from 'radix-vue';
+import { Primitive, useForwardProps } from 'reka-ui';
 
 const props = defineProps<PrimitiveProps>();
 const forwardedProps = useForwardProps(props);
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/popover/Popover.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/popover/Popover.vue
index c4ae69553..aec63fb45 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/popover/Popover.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/popover/Popover.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { PopoverRootEmits, PopoverRootProps } from 'radix-vue';
+import type { PopoverRootEmits, PopoverRootProps } from 'reka-ui';
 
-import { PopoverRoot, useForwardPropsEmits } from 'radix-vue';
+import { PopoverRoot, useForwardPropsEmits } from 'reka-ui';
 
 const props = defineProps<PopoverRootProps>();
 const emits = defineEmits<PopoverRootEmits>();
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/popover/PopoverContent.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/popover/PopoverContent.vue
index 1a025a517..b4e3f71b6 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/popover/PopoverContent.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/popover/PopoverContent.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import type { PopoverContentEmits, PopoverContentProps } from 'radix-vue';
+import type { PopoverContentEmits, PopoverContentProps } from 'reka-ui';
 
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { PopoverContent, PopoverPortal, useForwardPropsEmits } from 'radix-vue';
+import { PopoverContent, PopoverPortal, useForwardPropsEmits } from 'reka-ui';
 
 defineOptions({
   inheritAttrs: false,
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/popover/PopoverTrigger.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/popover/PopoverTrigger.vue
index 538fc320e..44dbfb090 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/popover/PopoverTrigger.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/popover/PopoverTrigger.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { PopoverTriggerProps } from 'radix-vue';
+import type { PopoverTriggerProps } from 'reka-ui';
 
-import { PopoverTrigger } from 'radix-vue';
+import { PopoverTrigger } from 'reka-ui';
 
 const props = defineProps<PopoverTriggerProps>();
 </script>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/popover/index.ts b/packages/@core/ui-kit/shadcn-ui/src/ui/popover/index.ts
index dbe007b07..7589c6802 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/popover/index.ts
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/popover/index.ts
@@ -1,4 +1,4 @@
 export { default as Popover } from './Popover.vue';
 export { default as PopoverContent } from './PopoverContent.vue';
 export { default as PopoverTrigger } from './PopoverTrigger.vue';
-export { PopoverAnchor } from 'radix-vue';
+export { PopoverAnchor } from 'reka-ui';
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/radio-group/RadioGroup.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/radio-group/RadioGroup.vue
index 0bdcafc3c..77f323a90 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/radio-group/RadioGroup.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/radio-group/RadioGroup.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import type { RadioGroupRootEmits, RadioGroupRootProps } from 'radix-vue';
+import type { RadioGroupRootEmits, RadioGroupRootProps } from 'reka-ui';
 
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { RadioGroupRoot, useForwardPropsEmits } from 'radix-vue';
+import { RadioGroupRoot, useForwardPropsEmits } from 'reka-ui';
 
 const props = defineProps<RadioGroupRootProps & { class?: any }>();
 const emits = defineEmits<RadioGroupRootEmits>();
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/radio-group/RadioGroupItem.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/radio-group/RadioGroupItem.vue
index d2bce2e9d..4e57ebbba 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/radio-group/RadioGroupItem.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/radio-group/RadioGroupItem.vue
@@ -1,16 +1,12 @@
 <script setup lang="ts">
-import type { RadioGroupItemProps } from 'radix-vue';
+import type { RadioGroupItemProps } from 'reka-ui';
 
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
 import { Circle } from 'lucide-vue-next';
-import {
-  RadioGroupIndicator,
-  RadioGroupItem,
-  useForwardProps,
-} from 'radix-vue';
+import { RadioGroupIndicator, RadioGroupItem, useForwardProps } from 'reka-ui';
 
 const props = defineProps<RadioGroupItemProps & { class?: any }>();
 
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/resizable/ResizableHandle.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/resizable/ResizableHandle.vue
index ae0b0a627..141b0ab55 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/resizable/ResizableHandle.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/resizable/ResizableHandle.vue
@@ -2,7 +2,7 @@
 import type {
   SplitterResizeHandleEmits,
   SplitterResizeHandleProps,
-} from 'radix-vue';
+} from 'reka-ui';
 
 import type { HTMLAttributes } from 'vue';
 
@@ -11,7 +11,7 @@ import { computed } from 'vue';
 import { GripVertical } from '@vben-core/icons';
 import { cn } from '@vben-core/shared/utils';
 
-import { SplitterResizeHandle, useForwardPropsEmits } from 'radix-vue';
+import { SplitterResizeHandle, useForwardPropsEmits } from 'reka-ui';
 
 const props = defineProps<
   SplitterResizeHandleProps & {
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/resizable/ResizablePanelGroup.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/resizable/ResizablePanelGroup.vue
index 09f5fded5..2e353e273 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/resizable/ResizablePanelGroup.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/resizable/ResizablePanelGroup.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { SplitterGroupEmits, SplitterGroupProps } from 'radix-vue';
+import type { SplitterGroupEmits, SplitterGroupProps } from 'reka-ui';
 
 import type { HTMLAttributes } from 'vue';
 
@@ -7,7 +7,7 @@ import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { SplitterGroup, useForwardPropsEmits } from 'radix-vue';
+import { SplitterGroup, useForwardPropsEmits } from 'reka-ui';
 
 const props = defineProps<
   SplitterGroupProps & { class?: HTMLAttributes['class'] }
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/resizable/index.ts b/packages/@core/ui-kit/shadcn-ui/src/ui/resizable/index.ts
index 75c05d589..c8ba3d46b 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/resizable/index.ts
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/resizable/index.ts
@@ -1,3 +1,3 @@
 export { default as ResizableHandle } from './ResizableHandle.vue';
 export { default as ResizablePanelGroup } from './ResizablePanelGroup.vue';
-export { SplitterPanel as ResizablePanel } from 'radix-vue';
+export { SplitterPanel as ResizablePanel } from 'reka-ui';
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/scroll-area/ScrollArea.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/scroll-area/ScrollArea.vue
index 95676542d..cdb9532c3 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/scroll-area/ScrollArea.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/scroll-area/ScrollArea.vue
@@ -1,15 +1,11 @@
 <script setup lang="ts">
-import type { ScrollAreaRootProps } from 'radix-vue';
+import type { ScrollAreaRootProps } from 'reka-ui';
 
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import {
-  ScrollAreaCorner,
-  ScrollAreaRoot,
-  ScrollAreaViewport,
-} from 'radix-vue';
+import { ScrollAreaCorner, ScrollAreaRoot, ScrollAreaViewport } from 'reka-ui';
 
 import ScrollBar from './ScrollBar.vue';
 
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/scroll-area/ScrollBar.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/scroll-area/ScrollBar.vue
index e19eb070d..1f83119bf 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/scroll-area/ScrollBar.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/scroll-area/ScrollBar.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import type { ScrollAreaScrollbarProps } from 'radix-vue';
+import type { ScrollAreaScrollbarProps } from 'reka-ui';
 
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { ScrollAreaScrollbar, ScrollAreaThumb } from 'radix-vue';
+import { ScrollAreaScrollbar, ScrollAreaThumb } from 'reka-ui';
 
 const props = withDefaults(
   defineProps<ScrollAreaScrollbarProps & { class?: any }>(),
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/select/Select.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/select/Select.vue
index f4aebbf44..553fd2a81 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/select/Select.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/select/Select.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { SelectRootEmits, SelectRootProps } from 'radix-vue';
+import type { SelectRootEmits, SelectRootProps } from 'reka-ui';
 
-import { SelectRoot, useForwardPropsEmits } from 'radix-vue';
+import { SelectRoot, useForwardPropsEmits } from 'reka-ui';
 
 const props = defineProps<SelectRootProps>();
 const emits = defineEmits<SelectRootEmits>();
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectContent.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectContent.vue
index 39f05cd22..1c2b3abce 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectContent.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectContent.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { SelectContentEmits, SelectContentProps } from 'radix-vue';
+import type { SelectContentEmits, SelectContentProps } from 'reka-ui';
 
 import { computed } from 'vue';
 
@@ -10,7 +10,7 @@ import {
   SelectPortal,
   SelectViewport,
   useForwardPropsEmits,
-} from 'radix-vue';
+} from 'reka-ui';
 
 import SelectScrollDownButton from './SelectScrollDownButton.vue';
 import SelectScrollUpButton from './SelectScrollUpButton.vue';
@@ -55,7 +55,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
           cn(
             'p-1',
             position === 'popper' &&
-              'h-[--radix-select-trigger-height] w-full min-w-[--radix-select-trigger-width]',
+              'h-[--reka-select-trigger-height] w-full min-w-[--reka-select-trigger-width]',
           )
         "
       >
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectGroup.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectGroup.vue
index 58821bc26..5b84b0d01 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectGroup.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectGroup.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import type { SelectGroupProps } from 'radix-vue';
+import type { SelectGroupProps } from 'reka-ui';
 
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { SelectGroup } from 'radix-vue';
+import { SelectGroup } from 'reka-ui';
 
 const props = defineProps<SelectGroupProps & { class?: any }>();
 
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectItem.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectItem.vue
index de1354031..2b3aba1d2 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectItem.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectItem.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { SelectItemProps } from 'radix-vue';
+import type { SelectItemProps } from 'reka-ui';
 
 import { computed } from 'vue';
 
@@ -11,7 +11,7 @@ import {
   SelectItemIndicator,
   SelectItemText,
   useForwardProps,
-} from 'radix-vue';
+} from 'reka-ui';
 
 const props = defineProps<SelectItemProps & { class?: any }>();
 
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectItemText.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectItemText.vue
index 7d7183429..ee80d9c5c 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectItemText.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectItemText.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { SelectItemTextProps } from 'radix-vue';
+import type { SelectItemTextProps } from 'reka-ui';
 
-import { SelectItemText } from 'radix-vue';
+import { SelectItemText } from 'reka-ui';
 
 const props = defineProps<SelectItemTextProps>();
 </script>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectLabel.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectLabel.vue
index 0dd694f80..031ef7c1c 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectLabel.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectLabel.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { SelectLabelProps } from 'radix-vue';
+import type { SelectLabelProps } from 'reka-ui';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { SelectLabel } from 'radix-vue';
+import { SelectLabel } from 'reka-ui';
 
 const props = defineProps<SelectLabelProps & { class?: any }>();
 </script>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectScrollDownButton.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectScrollDownButton.vue
index f79ef6765..8fa7a848a 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectScrollDownButton.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectScrollDownButton.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import type { SelectScrollDownButtonProps } from 'radix-vue';
+import type { SelectScrollDownButtonProps } from 'reka-ui';
 
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
 import { ChevronDown } from 'lucide-vue-next';
-import { SelectScrollDownButton, useForwardProps } from 'radix-vue';
+import { SelectScrollDownButton, useForwardProps } from 'reka-ui';
 
 const props = defineProps<SelectScrollDownButtonProps & { class?: any }>();
 
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectScrollUpButton.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectScrollUpButton.vue
index dce8b14a0..88346df4a 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectScrollUpButton.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectScrollUpButton.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import type { SelectScrollUpButtonProps } from 'radix-vue';
+import type { SelectScrollUpButtonProps } from 'reka-ui';
 
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
 import { ChevronUp } from 'lucide-vue-next';
-import { SelectScrollUpButton, useForwardProps } from 'radix-vue';
+import { SelectScrollUpButton, useForwardProps } from 'reka-ui';
 
 const props = defineProps<SelectScrollUpButtonProps & { class?: any }>();
 
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectSeparator.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectSeparator.vue
index 3028a09fa..cfabfab7d 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectSeparator.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectSeparator.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import type { SelectSeparatorProps } from 'radix-vue';
+import type { SelectSeparatorProps } from 'reka-ui';
 
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { SelectSeparator } from 'radix-vue';
+import { SelectSeparator } from 'reka-ui';
 
 const props = defineProps<SelectSeparatorProps & { class?: any }>();
 
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectTrigger.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectTrigger.vue
index a6fc94ef7..da2d645e7 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectTrigger.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectTrigger.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import type { SelectTriggerProps } from 'radix-vue';
+import type { SelectTriggerProps } from 'reka-ui';
 
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
 import { ChevronDown } from 'lucide-vue-next';
-import { SelectIcon, SelectTrigger, useForwardProps } from 'radix-vue';
+import { SelectIcon, SelectTrigger, useForwardProps } from 'reka-ui';
 
 const props = defineProps<SelectTriggerProps & { class?: any }>();
 
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectValue.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectValue.vue
index d2fe7ea92..2fdf41ee4 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectValue.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/select/SelectValue.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { SelectValueProps } from 'radix-vue';
+import type { SelectValueProps } from 'reka-ui';
 
-import { SelectValue } from 'radix-vue';
+import { SelectValue } from 'reka-ui';
 
 const props = defineProps<SelectValueProps>();
 </script>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/separator/Separator.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/separator/Separator.vue
index 20ea43782..3bf5879fb 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/separator/Separator.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/separator/Separator.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import type { SeparatorProps } from 'radix-vue';
+import type { SeparatorProps } from 'reka-ui';
 
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { Separator } from 'radix-vue';
+import { Separator } from 'reka-ui';
 
 const props = defineProps<SeparatorProps & { class?: any; label?: string }>();
 
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/Sheet.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/Sheet.vue
index c16427230..55ae642ba 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/Sheet.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/Sheet.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { DialogRootEmits, DialogRootProps } from 'radix-vue';
+import type { DialogRootEmits, DialogRootProps } from 'reka-ui';
 
-import { DialogRoot, useForwardPropsEmits } from 'radix-vue';
+import { DialogRoot, useForwardPropsEmits } from 'reka-ui';
 
 const props = defineProps<DialogRootProps>();
 const emits = defineEmits<DialogRootEmits>();
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/SheetClose.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/SheetClose.vue
index 3cfcd0af9..6415a3ef1 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/SheetClose.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/SheetClose.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { DialogCloseProps } from 'radix-vue';
+import type { DialogCloseProps } from 'reka-ui';
 
-import { DialogClose } from 'radix-vue';
+import { DialogClose } from 'reka-ui';
 
 const props = defineProps<DialogCloseProps>();
 </script>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/SheetContent.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/SheetContent.vue
index cab9c5a5b..d09cde89c 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/SheetContent.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/SheetContent.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { DialogContentEmits, DialogContentProps } from 'radix-vue';
+import type { DialogContentEmits, DialogContentProps } from 'reka-ui';
 
 import type { SheetVariants } from './sheet';
 
@@ -7,7 +7,7 @@ import { computed, ref } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { DialogContent, useForwardPropsEmits } from 'radix-vue';
+import { DialogContent, useForwardPropsEmits } from 'reka-ui';
 
 import { sheetVariants } from './sheet';
 import SheetOverlay from './SheetOverlay.vue';
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/SheetDescription.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/SheetDescription.vue
index 61068ed48..d0ffe20bb 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/SheetDescription.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/SheetDescription.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import type { DialogDescriptionProps } from 'radix-vue';
+import type { DialogDescriptionProps } from 'reka-ui';
 
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { DialogDescription } from 'radix-vue';
+import { DialogDescription } from 'reka-ui';
 
 const props = defineProps<DialogDescriptionProps & { class?: any }>();
 
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/SheetTitle.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/SheetTitle.vue
index 5923f2dfc..74e98db81 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/SheetTitle.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/SheetTitle.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import type { DialogTitleProps } from 'radix-vue';
+import type { DialogTitleProps } from 'reka-ui';
 
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { DialogTitle } from 'radix-vue';
+import { DialogTitle } from 'reka-ui';
 
 const props = defineProps<DialogTitleProps & { class?: any }>();
 
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/SheetTrigger.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/SheetTrigger.vue
index 6a7b8d212..121f3870c 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/SheetTrigger.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/sheet/SheetTrigger.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { DialogTriggerProps } from 'radix-vue';
+import type { DialogTriggerProps } from 'reka-ui';
 
-import { DialogTrigger } from 'radix-vue';
+import { DialogTrigger } from 'reka-ui';
 
 const props = defineProps<DialogTriggerProps>();
 </script>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/switch/Switch.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/switch/Switch.vue
index f6aa4da01..545dd8c98 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/switch/Switch.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/switch/Switch.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import type { SwitchRootEmits, SwitchRootProps } from 'radix-vue';
+import type { SwitchRootEmits, SwitchRootProps } from 'reka-ui';
 
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { SwitchRoot, SwitchThumb, useForwardPropsEmits } from 'radix-vue';
+import { SwitchRoot, SwitchThumb, useForwardPropsEmits } from 'reka-ui';
 
 const props = defineProps<SwitchRootProps & { class?: any }>();
 
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/tabs/Tabs.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/tabs/Tabs.vue
index b21d780f3..f9e68ac2b 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/tabs/Tabs.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/tabs/Tabs.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { TabsRootEmits, TabsRootProps } from 'radix-vue';
+import type { TabsRootEmits, TabsRootProps } from 'reka-ui';
 
-import { TabsRoot, useForwardPropsEmits } from 'radix-vue';
+import { TabsRoot, useForwardPropsEmits } from 'reka-ui';
 
 const props = defineProps<TabsRootProps>();
 const emits = defineEmits<TabsRootEmits>();
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/tabs/TabsContent.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/tabs/TabsContent.vue
index cf04026eb..16d9f42b7 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/tabs/TabsContent.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/tabs/TabsContent.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import type { TabsContentProps } from 'radix-vue';
+import type { TabsContentProps } from 'reka-ui';
 
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { TabsContent } from 'radix-vue';
+import { TabsContent } from 'reka-ui';
 
 const props = defineProps<TabsContentProps & { class?: any }>();
 
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/tabs/TabsList.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/tabs/TabsList.vue
index 51a5a6ae9..782cf1447 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/tabs/TabsList.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/tabs/TabsList.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import type { TabsListProps } from 'radix-vue';
+import type { TabsListProps } from 'reka-ui';
 
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { TabsList } from 'radix-vue';
+import { TabsList } from 'reka-ui';
 
 const props = defineProps<TabsListProps & { class?: any }>();
 
@@ -21,7 +21,7 @@ const delegatedProps = computed(() => {
     v-bind="delegatedProps"
     :class="
       cn(
-        'bg-muted text-muted-foreground inline-flex h-9 items-center justify-center rounded-lg p-1',
+        'bg-muted text-muted-foreground inline-flex h-9 items-center justify-center rounded-md p-1',
         props.class,
       )
     "
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/tabs/TabsTrigger.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/tabs/TabsTrigger.vue
index b8ed2eded..6b3ccd659 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/tabs/TabsTrigger.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/tabs/TabsTrigger.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import type { TabsTriggerProps } from 'radix-vue';
+import type { TabsTriggerProps } from 'reka-ui';
 
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { TabsTrigger, useForwardProps } from 'radix-vue';
+import { TabsTrigger, useForwardProps } from 'reka-ui';
 
 const props = defineProps<TabsTriggerProps & { class?: any }>();
 
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/tabs/index.ts b/packages/@core/ui-kit/shadcn-ui/src/ui/tabs/index.ts
index 571950c6b..7e98cfb7d 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/tabs/index.ts
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/tabs/index.ts
@@ -2,4 +2,4 @@ export { default as Tabs } from './Tabs.vue';
 export { default as TabsContent } from './TabsContent.vue';
 export { default as TabsList } from './TabsList.vue';
 export { default as TabsTrigger } from './TabsTrigger.vue';
-export { TabsIndicator } from 'radix-vue';
+export { TabsIndicator } from 'reka-ui';
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/toggle-group/ToggleGroup.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/toggle-group/ToggleGroup.vue
index 6d49fba31..299b6693a 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/toggle-group/ToggleGroup.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/toggle-group/ToggleGroup.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { VariantProps } from 'class-variance-authority';
-import type { ToggleGroupRootEmits, ToggleGroupRootProps } from 'radix-vue';
+import type { ToggleGroupRootEmits, ToggleGroupRootProps } from 'reka-ui';
 
 import type { toggleVariants } from '../toggle';
 
@@ -8,7 +8,7 @@ import { computed, provide } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { ToggleGroupRoot, useForwardPropsEmits } from 'radix-vue';
+import { ToggleGroupRoot, useForwardPropsEmits } from 'reka-ui';
 
 type ToggleGroupVariants = VariantProps<typeof toggleVariants>;
 
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/toggle-group/ToggleGroupItem.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/toggle-group/ToggleGroupItem.vue
index 826ca4754..615562f14 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/toggle-group/ToggleGroupItem.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/toggle-group/ToggleGroupItem.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import type { VariantProps } from 'class-variance-authority';
-import type { ToggleGroupItemProps } from 'radix-vue';
+import type { ToggleGroupItemProps } from 'reka-ui';
 
 import { computed, inject } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { ToggleGroupItem, useForwardProps } from 'radix-vue';
+import { ToggleGroupItem, useForwardProps } from 'reka-ui';
 
 import { toggleVariants } from '../toggle';
 
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/toggle/Toggle.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/toggle/Toggle.vue
index a75b2292d..779a60cdc 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/toggle/Toggle.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/toggle/Toggle.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { ToggleEmits, ToggleProps } from 'radix-vue';
+import type { ToggleEmits, ToggleProps } from 'reka-ui';
 
 import type { ToggleVariants } from './toggle';
 
@@ -7,7 +7,7 @@ import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { Toggle, useForwardPropsEmits } from 'radix-vue';
+import { Toggle, useForwardPropsEmits } from 'reka-ui';
 
 import { toggleVariants } from './toggle';
 
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/tooltip/Tooltip.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/tooltip/Tooltip.vue
index 8ab8fa6da..95aef7376 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/tooltip/Tooltip.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/tooltip/Tooltip.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { TooltipRootEmits, TooltipRootProps } from 'radix-vue';
+import type { TooltipRootEmits, TooltipRootProps } from 'reka-ui';
 
-import { TooltipRoot, useForwardPropsEmits } from 'radix-vue';
+import { TooltipRoot, useForwardPropsEmits } from 'reka-ui';
 
 const props = defineProps<TooltipRootProps>();
 const emits = defineEmits<TooltipRootEmits>();
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/tooltip/TooltipContent.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/tooltip/TooltipContent.vue
index 7537384a0..7d1d7de6a 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/tooltip/TooltipContent.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/tooltip/TooltipContent.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import type { TooltipContentEmits, TooltipContentProps } from 'radix-vue';
+import type { TooltipContentEmits, TooltipContentProps } from 'reka-ui';
 
 import { computed } from 'vue';
 
 import { cn } from '@vben-core/shared/utils';
 
-import { TooltipContent, TooltipPortal, useForwardPropsEmits } from 'radix-vue';
+import { TooltipContent, TooltipPortal, useForwardPropsEmits } from 'reka-ui';
 
 defineOptions({
   inheritAttrs: false,
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/tooltip/TooltipProvider.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/tooltip/TooltipProvider.vue
index bf843fadb..6ad95a0f5 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/tooltip/TooltipProvider.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/tooltip/TooltipProvider.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { TooltipProviderProps } from 'radix-vue';
+import type { TooltipProviderProps } from 'reka-ui';
 
-import { TooltipProvider } from 'radix-vue';
+import { TooltipProvider } from 'reka-ui';
 
 const props = defineProps<TooltipProviderProps>();
 </script>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/tooltip/TooltipTrigger.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/tooltip/TooltipTrigger.vue
index ead771e74..52d1e6493 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/tooltip/TooltipTrigger.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/tooltip/TooltipTrigger.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { TooltipTriggerProps } from 'radix-vue';
+import type { TooltipTriggerProps } from 'reka-ui';
 
-import { TooltipTrigger } from 'radix-vue';
+import { TooltipTrigger } from 'reka-ui';
 
 const props = defineProps<TooltipTriggerProps>();
 </script>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/tree/index.ts b/packages/@core/ui-kit/shadcn-ui/src/ui/tree/index.ts
index 45162b8aa..d390f6364 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/tree/index.ts
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/tree/index.ts
@@ -1,4 +1,4 @@
 export { default as VbenTree } from './tree.vue';
 export type { TreeProps } from './types';
 export { treePropsDefaults } from './types';
-export type { FlattenedItem } from 'radix-vue';
+export type { FlattenedItem } from 'reka-ui';
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/tree/tree.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/tree/tree.vue
index 459923271..bf54888ac 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/tree/tree.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/tree/tree.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { Arrayable } from '@vueuse/core';
-import type { FlattenedItem } from 'radix-vue';
+import type { FlattenedItem } from 'reka-ui';
 
 import type { ClassType, Recordable } from '@vben-core/typings';
 
@@ -11,7 +11,7 @@ import { onMounted, ref, watchEffect } from 'vue';
 import { ChevronRight, IconifyIcon } from '@vben-core/icons';
 import { cn, get } from '@vben-core/shared/utils';
 
-import { TreeItem, TreeRoot } from 'radix-vue';
+import { TreeItem, TreeRoot } from 'reka-ui';
 
 import { Checkbox } from '../checkbox';
 import { treePropsDefaults } from './types';
@@ -307,7 +307,10 @@ defineExpose({
         <Checkbox
           v-if="multiple"
           @click.stop
-          @update:checked="(checked) => (checked ? checkAll() : unCheckAll())"
+          @update:model-value="
+            (checked: boolean | 'indeterminate') =>
+              checked === true ? checkAll() : unCheckAll()
+          "
         />
       </div>
     </div>
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/tree/types.ts b/packages/@core/ui-kit/shadcn-ui/src/ui/tree/types.ts
index bf2d6ece6..53118bab7 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/tree/types.ts
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/tree/types.ts
@@ -1,5 +1,5 @@
 import type { Arrayable } from '@vueuse/core';
-import type { FlattenedItem } from 'radix-vue';
+import type { FlattenedItem } from 'reka-ui';
 
 import type { Recordable } from '@vben-core/typings';
 
diff --git a/packages/constants/src/dict-enum.ts b/packages/constants/src/dict-enum.ts
index c2ffca955..73a5c57dc 100644
--- a/packages/constants/src/dict-enum.ts
+++ b/packages/constants/src/dict-enum.ts
@@ -155,7 +155,6 @@ const IOT_DICT = {
   IOT_DATA_SINK_TYPE_ENUM: 'iot_data_sink_type_enum', // IoT 数据流转目的类型
   IOT_DATA_TYPE: 'iot_data_type', // IOT 数据类型
   IOT_DEVICE_STATE: 'iot_device_state', // IOT 设备状态
-  IOT_DEVICE_STATUS: 'iot_device_status', // IOT 设备状态
   IOT_LOCATION_TYPE: 'iot_location_type', // IOT 定位类型
   IOT_NET_TYPE: 'iot_net_type', // IOT 联网方式
   IOT_OTA_TASK_DEVICE_SCOPE: 'iot_ota_task_device_scope', // IoT OTA任务设备范围
diff --git a/packages/effects/common-ui/src/components/index.ts b/packages/effects/common-ui/src/components/index.ts
index 45409d5f9..675e55199 100644
--- a/packages/effects/common-ui/src/components/index.ts
+++ b/packages/effects/common-ui/src/components/index.ts
@@ -1,5 +1,7 @@
 export * from './api-component';
 export * from './captcha';
+export * from './card/statistic-card';
+export * from './card/summary-card';
 export * from './col-page';
 export * from './content-wrap';
 export * from './count-to';
@@ -11,8 +13,6 @@ export * from './json-viewer';
 export * from './loading';
 export * from './page';
 export * from './resize';
-export * from './card/statistic-card';
-export * from './card/summary-card';
 export * from './tippy';
 export * from './tree';
 export * from '@vben-core/form-ui';
diff --git a/packages/effects/common-ui/src/ui/authentication/login.vue b/packages/effects/common-ui/src/ui/authentication/login.vue
index e85604bcb..c2a9c4bb6 100644
--- a/packages/effects/common-ui/src/ui/authentication/login.vue
+++ b/packages/effects/common-ui/src/ui/authentication/login.vue
@@ -128,7 +128,7 @@ defineExpose({
       <div class="flex-center">
         <VbenCheckbox
           v-if="showRememberMe"
-          v-model:checked="rememberMe"
+          v-model="rememberMe"
           name="rememberMe"
         >
           {{ $t('authentication.rememberMe') }}
diff --git a/packages/effects/common-ui/src/ui/dashboard/workbench/workbench-todo.vue b/packages/effects/common-ui/src/ui/dashboard/workbench/workbench-todo.vue
index 90f20c1dd..ef34cd09d 100644
--- a/packages/effects/common-ui/src/ui/dashboard/workbench/workbench-todo.vue
+++ b/packages/effects/common-ui/src/ui/dashboard/workbench/workbench-todo.vue
@@ -39,7 +39,7 @@ withDefaults(defineProps<Props>(), {
           class="flex cursor-pointer justify-between gap-x-6 py-5"
         >
           <div class="flex min-w-0 items-center gap-x-4">
-            <VbenCheckbox v-model:checked="item.completed" name="completed" />
+            <VbenCheckbox v-model="item.completed" name="completed" />
             <div class="min-w-0 flex-auto">
               <p class="text-foreground text-sm font-semibold leading-6">
                 {{ item.title }}
diff --git a/packages/effects/layouts/src/authentication/authentication.vue b/packages/effects/layouts/src/authentication/authentication.vue
index e66954278..6d3bf8c33 100644
--- a/packages/effects/layouts/src/authentication/authentication.vue
+++ b/packages/effects/layouts/src/authentication/authentication.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import type { ToolbarType } from './types';
 
+import { computed } from 'vue';
+
 import { preferences, usePreferences } from '@vben/preferences';
 
 import { Copyright } from '../basic/copyright';
@@ -11,6 +13,7 @@ import Toolbar from './toolbar.vue';
 interface Props {
   appName?: string;
   logo?: string;
+  logoDark?: string;
   pageTitle?: string;
   pageDescription?: string;
   sloganImage?: string;
@@ -20,10 +23,11 @@ interface Props {
   clickLogo?: () => void;
 }
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
   appName: '',
   copyright: true,
   logo: '',
+  logoDark: '',
   pageDescription: '',
   pageTitle: '',
   sloganImage: '',
@@ -34,6 +38,18 @@ withDefaults(defineProps<Props>(), {
 
 const { authPanelCenter, authPanelLeft, authPanelRight, isDark } =
   usePreferences();
+
+/**
+ * @zh_CN 根据主题选择合适的 logo 图标
+ */
+const logoSrc = computed(() => {
+  // 如果是暗色主题且提供了 logoDark，则使用暗色主题的 logo
+  if (isDark.value && props.logoDark) {
+    return props.logoDark;
+  }
+  // 否则使用默认的 logo
+  return props.logo;
+});
 </script>
 
 <template>
@@ -50,7 +66,7 @@ const { authPanelCenter, authPanelLeft, authPanelRight, isDark } =
     <AuthenticationFormView
       v-if="authPanelLeft"
       class="min-h-full w-2/5 flex-1"
-      transition-name="slide-left"
+      data-side="left"
     >
       <template v-if="copyright" #copyright>
         <slot name="copyright">
@@ -65,14 +81,21 @@ const { authPanelCenter, authPanelLeft, authPanelRight, isDark } =
     <slot name="logo">
       <!-- 头部 Logo 和应用名称 -->
       <div
-        v-if="logo || appName"
+        v-if="logoSrc || appName"
         class="absolute left-0 top-0 z-10 flex flex-1"
         @click="clickLogo"
       >
         <div
           class="text-foreground lg:text-foreground ml-4 mt-4 flex flex-1 items-center sm:left-6 sm:top-6"
         >
-          <img v-if="logo" :alt="appName" :src="logo" class="mr-2" width="42" />
+          <img
+            v-if="logoSrc"
+            :key="logoSrc"
+            :alt="appName"
+            :src="logoSrc"
+            class="mr-2"
+            width="42"
+          />
           <p v-if="appName" class="m-0 text-xl font-medium">
             {{ appName }}
           </p>
@@ -86,7 +109,14 @@ const { authPanelCenter, authPanelLeft, authPanelRight, isDark } =
         class="bg-background-deep absolute inset-0 h-full w-full dark:bg-[#070709]"
       >
         <div class="login-background absolute left-0 top-0 size-full"></div>
-        <div class="flex-col-center -enter-x mr-20 h-full">
+        <div
+          :key="authPanelLeft ? 'left' : authPanelRight ? 'right' : 'center'"
+          class="flex-col-center mr-20 h-full"
+          :class="{
+            'enter-x': authPanelLeft,
+            '-enter-x': authPanelRight,
+          }"
+        >
           <template v-if="sloganImage">
             <img
               :alt="appName"
@@ -110,6 +140,7 @@ const { authPanelCenter, authPanelLeft, authPanelRight, isDark } =
       <div class="login-background absolute left-0 top-0 size-full"></div>
       <AuthenticationFormView
         class="md:bg-background shadow-primary/5 shadow-float w-full rounded-3xl pb-20 md:w-2/3 lg:w-1/2 xl:w-[36%]"
+        data-side="bottom"
       >
         <template v-if="copyright" #copyright>
           <slot name="copyright">
@@ -125,7 +156,8 @@ const { authPanelCenter, authPanelLeft, authPanelRight, isDark } =
     <!-- 右侧认证面板 -->
     <AuthenticationFormView
       v-if="authPanelRight"
-      class="min-h-full w-[34%] flex-1"
+      class="min-h-full w-2/5 flex-1"
+      data-side="right"
     >
       <template v-if="copyright" #copyright>
         <slot name="copyright">
diff --git a/packages/effects/layouts/src/authentication/form.vue b/packages/effects/layouts/src/authentication/form.vue
index 80c907493..fa73e128e 100644
--- a/packages/effects/layouts/src/authentication/form.vue
+++ b/packages/effects/layouts/src/authentication/form.vue
@@ -2,6 +2,10 @@
 defineOptions({
   name: 'AuthenticationFormView',
 });
+
+defineProps<{
+  dataSide?: 'bottom' | 'left' | 'right' | 'top';
+}>();
 </script>
 
 <template>
@@ -16,7 +20,8 @@ defineOptions({
           <component
             :is="Component"
             :key="route.fullPath"
-            class="enter-x mt-6 w-full sm:mx-auto md:max-w-md"
+            class="side-content mt-6 w-full sm:mx-auto md:max-w-md"
+            :data-side="dataSide"
           />
         </KeepAlive>
       </Transition>
diff --git a/packages/effects/layouts/src/basic/header/header.vue b/packages/effects/layouts/src/basic/header/header.vue
index 7a8cc857a..26c92a646 100644
--- a/packages/effects/layouts/src/basic/header/header.vue
+++ b/packages/effects/layouts/src/basic/header/header.vue
@@ -13,6 +13,7 @@ import {
   LanguageToggle,
   PreferencesButton,
   ThemeToggle,
+  TimezoneButton,
 } from '../../widgets';
 
 interface Props {
@@ -66,15 +67,21 @@ const rightSlots = computed(() => {
       name: 'language-toggle',
     });
   }
-  if (preferences.widget.fullscreen) {
+  if (preferences.widget.timezone) {
     list.push({
       index: REFERENCE_VALUE + 40,
+      name: 'timezone',
+    });
+  }
+  if (preferences.widget.fullscreen) {
+    list.push({
+      index: REFERENCE_VALUE + 50,
       name: 'fullscreen',
     });
   }
   if (preferences.widget.notification) {
     list.push({
-      index: REFERENCE_VALUE + 50,
+      index: REFERENCE_VALUE + 60,
       name: 'notification',
     });
   }
@@ -166,6 +173,9 @@ function clearPreferencesAndLogout() {
         <template v-else-if="slot.name === 'fullscreen'">
           <VbenFullScreen class="mr-1" />
         </template>
+        <template v-else-if="slot.name === 'timezone'">
+          <TimezoneButton class="mr-1 mt-[2px]" />
+        </template>
       </slot>
     </template>
   </div>
diff --git a/packages/effects/layouts/src/basic/layout.vue b/packages/effects/layouts/src/basic/layout.vue
index 35f28c1d3..605f3cf52 100644
--- a/packages/effects/layouts/src/basic/layout.vue
+++ b/packages/effects/layouts/src/basic/layout.vue
@@ -259,6 +259,7 @@ const headerSlots = computed(() => {
         :class="logoClass"
         :collapsed="logoCollapsed"
         :src="preferences.logo.source"
+        :src-dark="preferences.logo.sourceDark"
         :text="preferences.app.name"
         :theme="showHeaderNav ? headerTheme : theme"
         @click="clickLogo"
@@ -302,6 +303,9 @@ const headerSlots = computed(() => {
         <template #notification>
           <slot name="notification"></slot>
         </template>
+        <template #timezone>
+          <slot name="timezone"></slot>
+        </template>
         <template v-for="item in headerSlots" #[item]>
           <slot :name="item"></slot>
         </template>
@@ -347,6 +351,8 @@ const headerSlots = computed(() => {
       <VbenLogo
         v-if="preferences.logo.enable"
         :fit="preferences.logo.fit"
+        :src="preferences.logo.source"
+        :src-dark="preferences.logo.sourceDark"
         :text="preferences.app.name"
         :theme="theme"
       >
diff --git a/packages/effects/layouts/src/widgets/index.ts b/packages/effects/layouts/src/widgets/index.ts
index 0c4ef7ef6..665cdb9e9 100644
--- a/packages/effects/layouts/src/widgets/index.ts
+++ b/packages/effects/layouts/src/widgets/index.ts
@@ -10,4 +10,5 @@ export * from './notification';
 export * from './preferences';
 export * from './tenant-dropdown';
 export * from './theme-toggle';
+export * from './timezone';
 export * from './user-dropdown';
diff --git a/packages/effects/layouts/src/widgets/lock-screen/lock-screen-modal.vue b/packages/effects/layouts/src/widgets/lock-screen/lock-screen-modal.vue
index 5121d688c..908e67060 100644
--- a/packages/effects/layouts/src/widgets/lock-screen/lock-screen-modal.vue
+++ b/packages/effects/layouts/src/widgets/lock-screen/lock-screen-modal.vue
@@ -27,29 +27,30 @@ const emit = defineEmits<{
   submit: [Recordable<any>];
 }>();
 
-const [Form, { resetForm, validate, getValues }] = useVbenForm(
-  reactive({
-    commonConfig: {
-      hideLabel: true,
-      hideRequiredMark: true,
-    },
-    schema: computed(() => [
-      {
-        component: 'VbenInputPassword' as const,
-        componentProps: {
-          placeholder: $t('ui.widgets.lockScreen.placeholder'),
-        },
-        fieldName: 'lockScreenPassword',
-        formFieldProps: { validateOnBlur: false },
-        label: $t('authentication.password'),
-        rules: z
-          .string()
-          .min(1, { message: $t('ui.widgets.lockScreen.placeholder') }),
+const [Form, { resetForm, validate, getValues, getFieldComponentRef }] =
+  useVbenForm(
+    reactive({
+      commonConfig: {
+        hideLabel: true,
+        hideRequiredMark: true,
       },
-    ]),
-    showDefaultActions: false,
-  }),
-);
+      schema: computed(() => [
+        {
+          component: 'VbenInputPassword' as const,
+          componentProps: {
+            placeholder: $t('ui.widgets.lockScreen.placeholder'),
+          },
+          fieldName: 'lockScreenPassword',
+          formFieldProps: { validateOnBlur: false },
+          label: $t('authentication.password'),
+          rules: z
+            .string()
+            .min(1, { message: $t('ui.widgets.lockScreen.placeholder') }),
+        },
+      ]),
+      showDefaultActions: false,
+    }),
+  );
 
 const [Modal] = useVbenModal({
   onConfirm() {
@@ -60,6 +61,13 @@ const [Modal] = useVbenModal({
       resetForm();
     }
   },
+  onOpened() {
+    requestAnimationFrame(() => {
+      getFieldComponentRef('lockScreenPassword')
+        ?.$el?.querySelector('[name="lockScreenPassword"]')
+        ?.focus();
+    });
+  },
 });
 
 async function handleSubmit() {
diff --git a/packages/effects/layouts/src/widgets/lock-screen/lock-screen.vue b/packages/effects/layouts/src/widgets/lock-screen/lock-screen.vue
index 6fb7a54a4..3f700334f 100644
--- a/packages/effects/layouts/src/widgets/lock-screen/lock-screen.vue
+++ b/packages/effects/layouts/src/widgets/lock-screen/lock-screen.vue
@@ -37,7 +37,7 @@ const date = useDateFormat(now, 'YYYY-MM-DD dddd', { locales: locale.value });
 const showUnlockForm = ref(false);
 const { lockScreenPassword } = storeToRefs(accessStore);
 
-const [Form, { form, validate }] = useVbenForm(
+const [Form, { form, validate, getFieldComponentRef }] = useVbenForm(
   reactive({
     commonConfig: {
       hideLabel: true,
@@ -75,6 +75,13 @@ async function handleSubmit() {
 
 function toggleUnlockForm() {
   showUnlockForm.value = !showUnlockForm.value;
+  if (showUnlockForm.value) {
+    requestAnimationFrame(() => {
+      getFieldComponentRef('password')
+        ?.$el?.querySelector('[name="password"]')
+        ?.focus();
+    });
+  }
 }
 
 useScrollLock();
diff --git a/packages/effects/layouts/src/widgets/preferences/blocks/switch-item.vue b/packages/effects/layouts/src/widgets/preferences/blocks/switch-item.vue
index ccc4aacd2..33d99e99f 100644
--- a/packages/effects/layouts/src/widgets/preferences/blocks/switch-item.vue
+++ b/packages/effects/layouts/src/widgets/preferences/blocks/switch-item.vue
@@ -50,6 +50,6 @@ function handleClick() {
     <span v-if="$slots.shortcut" class="ml-auto mr-2 text-xs opacity-60">
       <slot name="shortcut"></slot>
     </span>
-    <Switch v-model:checked="checked" @click.stop />
+    <Switch v-model="checked" @click.stop />
   </div>
 </template>
diff --git a/packages/effects/layouts/src/widgets/timezone/index.ts b/packages/effects/layouts/src/widgets/timezone/index.ts
new file mode 100644
index 000000000..eef486ddb
--- /dev/null
+++ b/packages/effects/layouts/src/widgets/timezone/index.ts
@@ -0,0 +1 @@
+export { default as TimezoneButton } from './timezone-button.vue';
diff --git a/packages/effects/layouts/src/widgets/timezone/timezone-button.vue b/packages/effects/layouts/src/widgets/timezone/timezone-button.vue
new file mode 100644
index 000000000..f426b94cd
--- /dev/null
+++ b/packages/effects/layouts/src/widgets/timezone/timezone-button.vue
@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { ref, unref } from 'vue';
+
+import { createIconifyIcon } from '@vben/icons';
+import { $t } from '@vben/locales';
+import { useTimezoneStore } from '@vben/stores';
+
+import { useVbenModal } from '@vben-core/popup-ui';
+import {
+  RadioGroup,
+  RadioGroupItem,
+  VbenIconButton,
+} from '@vben-core/shadcn-ui';
+
+const TimezoneIcon = createIconifyIcon('fluent-mdl2:world-clock');
+
+const timezoneStore = useTimezoneStore();
+
+const timezoneRef = ref<string | undefined>();
+
+const timezoneOptionsRef = ref<
+  {
+    label: string;
+    value: string;
+  }[]
+>([]);
+
+const [Modal, modalApi] = useVbenModal({
+  fullscreenButton: false,
+  onConfirm: async () => {
+    try {
+      modalApi.setState({ confirmLoading: true });
+      const timezone = unref(timezoneRef);
+      if (timezone) {
+        await timezoneStore.setTimezone(timezone);
+      }
+      modalApi.close();
+    } finally {
+      modalApi.setState({ confirmLoading: false });
+    }
+  },
+  async onOpenChange(isOpen) {
+    if (isOpen) {
+      timezoneRef.value = unref(timezoneStore.timezone);
+      timezoneOptionsRef.value = await timezoneStore.getTimezoneOptions();
+    }
+  },
+});
+
+const handleClick = () => {
+  modalApi.open();
+};
+</script>
+
+<template>
+  <div>
+    <VbenIconButton
+      :tooltip="$t('ui.widgets.timezone.setTimezone')"
+      class="hover:animate-[shrink_0.3s_ease-in-out]"
+      @click="handleClick"
+    >
+      <TimezoneIcon class="text-foreground size-4" />
+    </VbenIconButton>
+    <Modal :title="$t('ui.widgets.timezone.setTimezone')">
+      <div class="timezone-container">
+        <RadioGroup v-model="timezoneRef" class="flex flex-col gap-2">
+          <div
+            class="flex cursor-pointer items-center gap-2"
+            v-for="item in timezoneOptionsRef"
+            :key="`container${item.value}`"
+          >
+            <RadioGroupItem :id="item.value" :value="item.value" />
+            <label :for="item.value" class="cursor-pointer">{{
+              item.label
+            }}</label>
+          </div>
+        </RadioGroup>
+      </div>
+    </Modal>
+  </div>
+</template>
+
+<style scoped>
+.timezone-container {
+  padding-left: 20px;
+}
+</style>
diff --git a/packages/icons/src/iconify/index.ts b/packages/icons/src/iconify/index.ts
index 784a746b6..f4f2222b9 100644
--- a/packages/icons/src/iconify/index.ts
+++ b/packages/icons/src/iconify/index.ts
@@ -60,4 +60,8 @@ export const MenuOutlined = createIconifyIcon('ant-design:menu-outlined');
 
 export const PlusOutlined = createIconifyIcon('ant-design:plus-outlined');
 
+export const CloseCircleFilled = createIconifyIcon(
+  'ant-design:close-circle-filled',
+);
+
 export const SelectOutlined = createIconifyIcon('ant-design:select-outlined');
diff --git a/packages/locales/src/langs/en-US/ui.json b/packages/locales/src/langs/en-US/ui.json
index 7af6cf7ab..1c4879b27 100644
--- a/packages/locales/src/langs/en-US/ui.json
+++ b/packages/locales/src/langs/en-US/ui.json
@@ -119,6 +119,10 @@
       "errorPasswordTip": "Password error, please re-enter",
       "backToLogin": "Back to login",
       "entry": "Enter the system"
+    },
+    "timezone": {
+      "setTimezone": "Set Timezone",
+      "setSuccess": "Timezone set successfully"
     }
   },
   "upload": {
@@ -129,7 +133,8 @@
     "maxSize": "A single file does not exceed {0}MB",
     "maxSizeMultiple": "Only upload files up to {0}MB!",
     "maxNumber": "Only upload up to {0} files",
-    "uploadSuccess": "Upload successfully"
+    "uploadSuccess": "Upload successfully",
+    "imgUploading": "Image sending, please wait..."
   },
   "cropper": {
     "selectImage": "Select Image",
diff --git a/packages/locales/src/langs/zh-CN/ui.json b/packages/locales/src/langs/zh-CN/ui.json
index 2f7df1a6e..c459286d6 100644
--- a/packages/locales/src/langs/zh-CN/ui.json
+++ b/packages/locales/src/langs/zh-CN/ui.json
@@ -119,6 +119,10 @@
       "errorPasswordTip": "密码错误，请重新输入",
       "backToLogin": "返回登录",
       "entry": "进入系统"
+    },
+    "timezone": {
+      "setTimezone": "设置时区",
+      "setSuccess": "时区设置成功"
     }
   },
   "upload": {
@@ -129,7 +133,8 @@
     "maxSize": "单个文件不超过{0}MB",
     "maxSizeMultiple": "只能上传不超过{0}MB的文件!",
     "maxNumber": "最多只能上传{0}个文件",
-    "uploadSuccess": "上传成功"
+    "uploadSuccess": "上传成功",
+    "imgUploading": "图片发送中，请稍等。。。"
   },
   "cropper": {
     "selectImage": "选择图片",
diff --git a/packages/stores/src/modules/index.ts b/packages/stores/src/modules/index.ts
index e87dbb3e0..6048fecc0 100644
--- a/packages/stores/src/modules/index.ts
+++ b/packages/stores/src/modules/index.ts
@@ -1,4 +1,5 @@
 export * from './access';
 export * from './dict';
 export * from './tabbar';
+export * from './timezone';
 export * from './user';
diff --git a/packages/stores/src/modules/timezone.ts b/packages/stores/src/modules/timezone.ts
new file mode 100644
index 000000000..24180c60f
--- /dev/null
+++ b/packages/stores/src/modules/timezone.ts
@@ -0,0 +1,132 @@
+import { ref, unref } from 'vue';
+
+import { DEFAULT_TIME_ZONE_OPTIONS } from '@vben-core/preferences';
+import {
+  getCurrentTimezone,
+  setCurrentTimezone,
+} from '@vben-core/shared/utils';
+
+import { acceptHMRUpdate, defineStore } from 'pinia';
+
+interface TimezoneHandler {
+  getTimezone?: () => Promise<null | string | undefined>;
+  getTimezoneOptions?: () => Promise<
+    {
+      label: string;
+      value: string;
+    }[]
+  >;
+  setTimezone?: (timezone: string) => Promise<void>;
+}
+
+/**
+ * 默认时区处理模块
+ * 时区存储基于pinia存储插件
+ */
+const getDefaultTimezoneHandler = (): TimezoneHandler => {
+  return {
+    getTimezoneOptions: () => {
+      return Promise.resolve(
+        DEFAULT_TIME_ZONE_OPTIONS.map((item) => {
+          return {
+            label: item.label,
+            value: item.timezone,
+          };
+        }),
+      );
+    },
+  };
+};
+
+/**
+ * 自定义时区处理模块
+ */
+let customTimezoneHandler: null | Partial<TimezoneHandler> = null;
+const setTimezoneHandler = (handler: Partial<TimezoneHandler>) => {
+  customTimezoneHandler = handler;
+};
+
+/**
+ * 获取时区处理模块
+ */
+const getTimezoneHandler = () => {
+  return {
+    ...getDefaultTimezoneHandler(),
+    ...customTimezoneHandler,
+  };
+};
+
+/**
+ * timezone支持模块
+ */
+const useTimezoneStore = defineStore(
+  'core-timezone',
+  () => {
+    const timezoneRef = ref(getCurrentTimezone());
+
+    /**
+     * 初始化时区
+     * Initialize the timezone
+     */
+    async function initTimezone() {
+      const timezoneHandler = getTimezoneHandler();
+      const timezone = await timezoneHandler.getTimezone?.();
+      if (timezone) {
+        timezoneRef.value = timezone;
+      }
+      // 设置dayjs默认时区
+      setCurrentTimezone(unref(timezoneRef));
+    }
+
+    /**
+     * 设置时区
+     * Set the timezone
+     * @param timezone 时区字符串
+     */
+    async function setTimezone(timezone: string) {
+      const timezoneHandler = getTimezoneHandler();
+      await timezoneHandler.setTimezone?.(timezone);
+      timezoneRef.value = timezone;
+      // 设置dayjs默认时区
+      setCurrentTimezone(timezone);
+    }
+
+    /**
+     * 获取时区选项
+     * Get the timezone options
+     */
+    async function getTimezoneOptions() {
+      const timezoneHandler = getTimezoneHandler();
+      return (await timezoneHandler.getTimezoneOptions?.()) || [];
+    }
+
+    initTimezone().catch((error) => {
+      console.error('Failed to initialize timezone during store setup:', error);
+    });
+
+    function $reset() {
+      timezoneRef.value = getCurrentTimezone();
+    }
+
+    return {
+      timezone: timezoneRef,
+      setTimezone,
+      getTimezoneOptions,
+      $reset,
+    };
+  },
+  {
+    persist: {
+      // 持久化
+      pick: ['timezone'],
+    },
+  },
+);
+
+export { setTimezoneHandler, useTimezoneStore };
+
+// 解决热更新问题
+const hot = import.meta.hot;
+if (hot) {
+  hot.accept(acceptHMRUpdate(useTimezoneStore, hot));
+}
diff --git a/playground/src/api/core/index.ts b/playground/src/api/core/index.ts
index 28a5aef47..7134366bc 100644
--- a/playground/src/api/core/index.ts
+++ b/playground/src/api/core/index.ts
@@ -1,3 +1,4 @@
 export * from './auth';
 export * from './menu';
+export * from './timezone';
 export * from './user';
diff --git a/playground/src/api/core/timezone.ts b/playground/src/api/core/timezone.ts
new file mode 100644
index 000000000..13d44d196
--- /dev/null
+++ b/playground/src/api/core/timezone.ts
@@ -0,0 +1,26 @@
+import { requestClient } from '#/api/request';
+
+/**
+ * 获取系统支持的时区列表
+ */
+export async function getTimezoneOptionsApi() {
+  return await requestClient.get<
+    {
+      label: string;
+      value: string;
+    }[]
+  >('/timezone/getTimezoneOptions');
+}
+/**
+ * 获取用户时区
+ */
+export async function getTimezoneApi(): Promise<null | string | undefined> {
+  return requestClient.get<null | string | undefined>('/timezone/getTimezone');
+}
+/**
+ * 设置用户时区
+ * @param timezone 时区
+ */
+export async function setTimezoneApi(timezone: string): Promise<void> {
+  return requestClient.post('/timezone/setTimezone', { timezone });
+}
diff --git a/playground/src/bootstrap.ts b/playground/src/bootstrap.ts
index f0a668b44..fed073400 100644
--- a/playground/src/bootstrap.ts
+++ b/playground/src/bootstrap.ts
@@ -15,6 +15,7 @@ import { router } from '#/router';
 import { initComponentAdapter } from './adapter/component';
 import { initSetupVbenForm } from './adapter/form';
 import App from './app.vue';
+import { initTimezone } from './timezone-init';
 
 async function bootstrap(namespace: string) {
   // 初始化组件适配器
@@ -46,6 +47,9 @@ async function bootstrap(namespace: string) {
   // 配置 pinia-tore
   await initStores(app, { namespace });
 
+  // 初始化时区HANDLER
+  initTimezone();
+
   // 安装权限指令
   registerAccessDirective(app);
 
diff --git a/playground/src/locales/langs/zh-CN/system.json b/playground/src/locales/langs/zh-CN/system.json
index b0f5e7fad..be5a7ae36 100644
--- a/playground/src/locales/langs/zh-CN/system.json
+++ b/playground/src/locales/langs/zh-CN/system.json
@@ -1,4 +1,5 @@
 {
+  "title": "系统管理",
   "dept": {
     "list": "部门列表",
     "createTime": "创建时间",
@@ -62,6 +63,5 @@
     "operation": "操作",
     "permissions": "权限",
     "setPermissions": "授权"
-  },
-  "title": "系统管理"
+  }
 }
diff --git a/playground/src/timezone-init.ts b/playground/src/timezone-init.ts
new file mode 100644
index 000000000..1d82bd473
--- /dev/null
+++ b/playground/src/timezone-init.ts
@@ -0,0 +1,20 @@
+import { setTimezoneHandler } from '@vben/stores';
+
+import { getTimezoneApi, getTimezoneOptionsApi, setTimezoneApi } from '#/api';
+
+/**
+ * 初始化时区处理，通过API保存时区设置
+ */
+export function initTimezone() {
+  setTimezoneHandler({
+    getTimezone() {
+      return getTimezoneApi();
+    },
+    setTimezone(timezone: string) {
+      return setTimezoneApi(timezone);
+    },
+    getTimezoneOptions() {
+      return getTimezoneOptionsApi();
+    },
+  });
+}
diff --git a/playground/src/views/examples/captcha/point-selection-captcha.vue b/playground/src/views/examples/captcha/point-selection-captcha.vue
index ae8ab0aff..498a97737 100644
--- a/playground/src/views/examples/captcha/point-selection-captcha.vue
+++ b/playground/src/views/examples/captcha/point-selection-captcha.vue
@@ -64,7 +64,7 @@ const handleClick = (point: CaptchaPoint) => {
         />
         <div class="ml-8 flex w-96 items-center">
           <Switch
-            v-model:checked="params.showHintImage"
+            v-model="params.showHintImage"
             :checked-children="$t('examples.captcha.hintImage')"
             :un-checked-children="$t('examples.captcha.hintText')"
             class="mr-4 w-40"
@@ -82,7 +82,7 @@ const handleClick = (point: CaptchaPoint) => {
         </div>
 
         <Switch
-          v-model:checked="params.showConfirm"
+          v-model="params.showConfirm"
           :checked-children="$t('examples.captcha.showConfirm')"
           :un-checked-children="$t('examples.captcha.hideConfirm')"
           class="ml-8 w-28"
diff --git a/playground/src/views/examples/count-to/index.vue b/playground/src/views/examples/count-to/index.vue
index ef690e9c7..1309351d4 100644
--- a/playground/src/views/examples/count-to/index.vue
+++ b/playground/src/views/examples/count-to/index.vue
@@ -115,7 +115,7 @@ function onFinished() {
           </Col>
           <Col :span="8">
             <FormItem label="禁用动画" name="disabled">
-              <Switch v-model:checked="props.disabled" />
+              <Switch v-model="props.disabled" />
             </FormItem>
           </Col>
           <Col :span="8">
diff --git a/playground/src/views/examples/form/merge.vue b/playground/src/views/examples/form/merge.vue
index 22f20fa10..95a37c67a 100644
--- a/playground/src/views/examples/form/merge.vue
+++ b/playground/src/views/examples/form/merge.vue
@@ -94,7 +94,7 @@ async function handleMergeSubmit() {
     <Card title="基础示例">
       <template #extra>
         <Switch
-          v-model:checked="needMerge"
+          v-model="needMerge"
           checked-children="开启字段合并"
           class="mr-4"
           un-checked-children="关闭字段合并"
diff --git a/playground/src/views/examples/form/scroll-to-error-test.vue b/playground/src/views/examples/form/scroll-to-error-test.vue
index 61e8815c3..89aaf50bb 100644
--- a/playground/src/views/examples/form/scroll-to-error-test.vue
+++ b/playground/src/views/examples/form/scroll-to-error-test.vue
@@ -132,10 +132,7 @@ async function fillPartialData() {
     <Card title="功能测试">
       <template #extra>
         <div class="flex items-center gap-2">
-          <Switch
-            v-model:checked="scrollEnabled"
-            @change="toggleScrollToError"
-          />
+          <Switch v-model="scrollEnabled" @change="toggleScrollToError" />
           <span>启用滚动到错误字段</span>
         </div>
       </template>
diff --git a/playground/src/views/examples/layout/col-page.vue b/playground/src/views/examples/layout/col-page.vue
index 5b18330eb..45d8651a7 100644
--- a/playground/src/views/examples/layout/col-page.vue
+++ b/playground/src/views/examples/layout/col-page.vue
@@ -22,8 +22,8 @@ const props = reactive({
   leftWidth: 30,
   resizable: true,
   rightWidth: 70,
-  splitHandle: false,
-  splitLine: false,
+  splitHandle: true,
+  splitLine: true,
 });
 const leftMinWidth = ref(props.leftMinWidth || 1);
 const leftMaxWidth = ref(props.leftMaxWidth || 100);
@@ -42,7 +42,11 @@ const leftMaxWidth = ref(props.leftMaxWidth || 100);
     <template #left="{ isCollapsed, expand }">
       <div v-if="isCollapsed" @click="expand">
         <Tooltip title="点击展开左侧">
-          <Button shape="circle" type="primary">
+          <Button
+            shape="circle"
+            type="primary"
+            class="flex items-center justify-center"
+          >
             <template #icon>
               <IconifyIcon class="text-2xl" icon="bi:arrow-right" />
             </template>
@@ -64,12 +68,10 @@ const leftMaxWidth = ref(props.leftMaxWidth || 100);
     <Card class="ml-2" title="基本使用">
       <div class="flex flex-col gap-2">
         <div class="flex gap-2">
-          <Checkbox v-model:checked="props.resizable">可拖动调整宽度</Checkbox>
-          <Checkbox v-model:checked="props.splitLine">显示拖动分隔线</Checkbox>
-          <Checkbox v-model:checked="props.splitHandle">显示拖动手柄</Checkbox>
-          <Checkbox v-model:checked="props.leftCollapsible">
-            左侧可折叠
-          </Checkbox>
+          <Checkbox v-model="props.resizable">可拖动调整宽度</Checkbox>
+          <Checkbox v-model="props.splitLine">显示拖动分隔线</Checkbox>
+          <Checkbox v-model="props.splitHandle">显示拖动手柄</Checkbox>
+          <Checkbox v-model="props.leftCollapsible"> 左侧可折叠 </Checkbox>
         </div>
         <div class="flex items-center gap-2">
           <span>左侧最小宽度百分比：</span>
diff --git a/playground/src/views/examples/vxe-table/custom-cell.vue b/playground/src/views/examples/vxe-table/custom-cell.vue
index 3bf1cb91c..262588049 100644
--- a/playground/src/views/examples/vxe-table/custom-cell.vue
+++ b/playground/src/views/examples/vxe-table/custom-cell.vue
@@ -95,7 +95,7 @@ const [Grid] = useVbenVxeGrid({ gridOptions });
         <Image :src="row.imageUrl" height="30" width="30" />
       </template>
       <template #open="{ row }">
-        <Switch v-model:checked="row.open" />
+        <Switch v-model="row.open" />
       </template>
       <template #status="{ row }">
         <Tag :color="row.color">{{ row.status }}</Tag>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7be5a7c69..2b8e0edb4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -26,13 +26,13 @@ catalogs:
       version: 19.8.1
     '@eslint/js':
       specifier: ^9.30.1
-      version: 9.38.0
+      version: 9.39.1
     '@faker-js/faker':
       specifier: ^9.9.0
       version: 9.9.0
     '@form-create/ant-design-vue':
       specifier: ^3.2.27
-      version: 3.2.31
+      version: 3.2.32
     '@form-create/antd-designer':
       specifier: ^3.3.0
       version: 3.3.2
@@ -41,10 +41,10 @@ catalogs:
       version: 3.3.1
     '@form-create/element-ui':
       specifier: ^3.2.27
-      version: 3.2.31
+      version: 3.2.32
     '@iconify/json':
       specifier: ^2.2.354
-      version: 2.2.398
+      version: 2.2.404
     '@iconify/tailwind':
       specifier: ^1.2.0
       version: 1.2.0
@@ -59,7 +59,7 @@ catalogs:
       version: 6.0.8
     '@jspm/generator':
       specifier: ^2.6.2
-      version: 2.7.4
+      version: 2.7.6
     '@manypkg/get-packages':
       specifier: ^3.0.0
       version: 3.1.0
@@ -86,22 +86,22 @@ catalogs:
       version: 0.5.19
     '@tanstack/vue-query':
       specifier: ^5.81.5
-      version: 5.90.5
+      version: 5.90.7
     '@tanstack/vue-store':
       specifier: ^0.7.1
       version: 0.7.7
     '@tinyflow-ai/vue':
       specifier: ^1.1.1
-      version: 1.1.7
+      version: 1.1.9
     '@tinymce/tinymce-vue':
       specifier: ^6.1.0
       version: 6.3.0
     '@types/archiver':
       specifier: ^6.0.3
-      version: 6.0.3
+      version: 6.0.4
     '@types/codemirror':
       specifier: ^5.60.13
-      version: 5.60.16
+      version: 5.60.17
     '@types/crypto-js':
       specifier: ^4.2.2
       version: 4.2.2
@@ -133,8 +133,8 @@ catalogs:
       specifier: ^14.1.2
       version: 14.1.2
     '@types/node':
-      specifier: ^22.16.0
-      version: 22.18.12
+      specifier: ^24.9.2
+      version: 24.10.0
     '@types/nprogress':
       specifier: ^0.2.3
       version: 0.2.3
@@ -143,19 +143,19 @@ catalogs:
       version: 14.0.3
     '@types/qrcode':
       specifier: ^1.5.5
-      version: 1.5.5
+      version: 1.5.6
     '@types/qs':
       specifier: ^6.14.0
       version: 6.14.0
     '@types/sortablejs':
       specifier: ^1.15.8
-      version: 1.15.8
+      version: 1.15.9
     '@typescript-eslint/eslint-plugin':
       specifier: ^8.35.1
-      version: 8.46.2
+      version: 8.46.3
     '@typescript-eslint/parser':
       specifier: ^8.35.1
-      version: 8.46.2
+      version: 8.46.3
     '@vee-validate/zod':
       specifier: ^4.15.1
       version: 4.15.1
@@ -173,7 +173,7 @@ catalogs:
       version: 5.1.1
     '@vue/shared':
       specifier: ^3.5.17
-      version: 3.5.22
+      version: 3.5.23
     '@vue/test-utils':
       specifier: ^2.4.6
       version: 2.4.6
@@ -181,8 +181,8 @@ catalogs:
       specifier: ^13.4.0
       version: 13.9.0
     '@vueuse/integrations':
-      specifier: ^13.4.0
-      version: 13.9.0
+      specifier: ^14.0.0
+      version: 14.0.0
     '@vueuse/motion':
       specifier: ^3.0.3
       version: 3.0.3
@@ -197,7 +197,7 @@ catalogs:
       version: 10.4.21
     axios:
       specifier: ^1.10.0
-      version: 1.12.2
+      version: 1.13.2
     axios-mock-adapter:
       specifier: ^2.1.0
       version: 2.1.0
@@ -251,7 +251,7 @@ catalogs:
       version: 8.19.4
     cssnano:
       specifier: ^7.0.7
-      version: 7.1.1
+      version: 7.1.2
     cz-git:
       specifier: ^1.11.2
       version: 1.12.0
@@ -260,7 +260,7 @@ catalogs:
       version: 1.12.0
     dayjs:
       specifier: ^1.11.13
-      version: 1.11.18
+      version: 1.11.19
     defu:
       specifier: ^6.1.4
       version: 6.1.4
@@ -278,13 +278,13 @@ catalogs:
       version: 5.6.0
     element-plus:
       specifier: ^2.10.2
-      version: 2.11.5
+      version: 2.11.7
     eslint:
       specifier: ^9.30.1
-      version: 9.38.0
+      version: 9.39.1
     eslint-config-turbo:
       specifier: ^2.5.4
-      version: 2.5.8
+      version: 2.6.0
     eslint-plugin-command:
       specifier: ^3.3.1
       version: 3.3.1
@@ -341,7 +341,7 @@ catalogs:
       version: 7.1.0
     globals:
       specifier: ^16.3.0
-      version: 16.4.0
+      version: 16.5.0
     h3:
       specifier: ^1.15.3
       version: 1.15.4
@@ -410,7 +410,7 @@ catalogs:
       version: 2.43.1
     nitropack:
       specifier: ^2.11.13
-      version: 2.12.7
+      version: 2.12.9
     nprogress:
       specifier: ^0.2.0
       version: 0.2.0
@@ -419,7 +419,7 @@ catalogs:
       version: 8.2.0
     pinia-plugin-persistedstate:
       specifier: ^4.4.1
-      version: 4.5.0
+      version: 4.7.1
     pkg-types:
       specifier: ^2.2.0
       version: 2.3.0
@@ -459,15 +459,15 @@ catalogs:
     qs:
       specifier: ^6.14.0
       version: 6.14.0
-    radix-vue:
-      specifier: ^1.9.17
-      version: 1.9.17
+    reka-ui:
+      specifier: ^2.6.0
+      version: 2.6.0
     resolve.exports:
       specifier: ^2.0.3
       version: 2.0.3
     rimraf:
       specifier: ^6.0.1
-      version: 6.0.1
+      version: 6.1.0
     rollup:
       specifier: ^4.44.1
       version: 4.52.5
@@ -476,7 +476,7 @@ catalogs:
       version: 5.14.0
     sass:
       specifier: ^1.89.2
-      version: 1.93.2
+      version: 1.93.3
     secure-ls:
       specifier: ^2.0.0
       version: 2.0.0
@@ -533,7 +533,7 @@ catalogs:
       version: 6.3.7
     turbo:
       specifier: ^2.5.4
-      version: 2.5.8
+      version: 2.6.0
     typescript:
       specifier: ^5.8.3
       version: 5.9.3
@@ -551,7 +551,7 @@ catalogs:
       version: 7.21.7
     vite:
       specifier: ^7.1.2
-      version: 7.1.11
+      version: 7.2.1
     vite-plugin-compression:
       specifier: ^0.5.1
       version: 0.5.1
@@ -575,7 +575,7 @@ catalogs:
       version: 1.6.4
     vitepress-plugin-group-icons:
       specifier: ^1.6.1
-      version: 1.6.4
+      version: 1.6.5
     vitest:
       specifier: ^3.2.4
       version: 3.2.4
@@ -608,10 +608,10 @@ catalogs:
       version: 4.1.0
     vxe-pc-ui:
       specifier: ^4.9.29
-      version: 4.10.5
+      version: 4.10.16
     vxe-table:
       specifier: ^4.16.11
-      version: 4.17.0
+      version: 4.17.10
     watermark-js-plus:
       specifier: ^1.6.2
       version: 1.6.3
@@ -639,13 +639,13 @@ importers:
         version: 0.5.1
       '@changesets/cli':
         specifier: 'catalog:'
-        version: 2.29.7(@types/node@22.18.12)
+        version: 2.29.7(@types/node@24.10.0)
       '@playwright/test':
         specifier: 'catalog:'
         version: 1.56.1
       '@types/node':
         specifier: 'catalog:'
-        version: 22.18.12
+        version: 24.10.0
       '@vben/commitlint-config':
         specifier: workspace:*
         version: link:internal/lint-configs/commitlint-config
@@ -675,10 +675,10 @@ importers:
         version: link:scripts/vsh
       '@vitejs/plugin-vue':
         specifier: 'catalog:'
-        version: 6.0.1(vite@7.1.11(@types/node@22.18.12)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))(vue@3.5.22(typescript@5.9.3))
+        version: 6.0.1(vite@7.2.1(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.3)(terser@5.44.1)(yaml@2.8.1))(vue@3.5.23(typescript@5.9.3))
       '@vitejs/plugin-vue-jsx':
         specifier: 'catalog:'
-        version: 5.1.1(vite@7.1.11(@types/node@22.18.12)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))(vue@3.5.22(typescript@5.9.3))
+        version: 5.1.1(vite@7.2.1(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.3)(terser@5.44.1)(yaml@2.8.1))(vue@3.5.23(typescript@5.9.3))
       '@vue/test-utils':
         specifier: 'catalog:'
         version: 2.4.6
@@ -705,28 +705,28 @@ importers:
         version: 1.56.1
       rimraf:
         specifier: 'catalog:'
-        version: 6.0.1
+        version: 6.1.0
       tailwindcss:
         specifier: 'catalog:'
         version: 3.4.18(yaml@2.8.1)
       turbo:
         specifier: 'catalog:'
-        version: 2.5.8
+        version: 2.6.0
       typescript:
         specifier: 'catalog:'
         version: 5.9.3
       unbuild:
         specifier: 'catalog:'
-        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))
+        version: 3.6.1(sass@1.93.3)(typescript@5.9.3)(vue-tsc@2.2.10(typescript@5.9.3))(vue@3.5.23(typescript@5.9.3))
       vite:
         specifier: 'catalog:'
-        version: 7.1.11(@types/node@22.18.12)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
+        version: 7.2.1(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.3)(terser@5.44.1)(yaml@2.8.1)
       vitest:
         specifier: 'catalog:'
-        version: 3.2.4(@types/node@22.18.12)(happy-dom@17.6.3)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
+        version: 3.2.4(@types/node@24.10.0)(happy-dom@17.6.3)(jiti@2.6.1)(less@4.4.2)(sass@1.93.3)(terser@5.44.1)(yaml@2.8.1)
       vue:
         specifier: ^3.5.17
-        version: 3.5.22(typescript@5.9.3)
+        version: 3.5.23(typescript@5.9.3)
       vue-tsc:
         specifier: 'catalog:'
         version: 2.2.10(typescript@5.9.3)
@@ -741,7 +741,7 @@ importers:
         version: 9.0.2
       nitropack:
         specifier: 'catalog:'
-        version: 2.12.7
+        version: 2.12.9
     devDependencies:
       '@types/jsonwebtoken':
         specifier: 'catalog:'
@@ -754,13 +754,13 @@ importers:
     dependencies:
       '@form-create/ant-design-vue':
         specifier: 'catalog:'
-        version: 3.2.31(vue@3.5.22(typescript@5.9.3))
+        version: 3.2.32(vue@3.5.23(typescript@5.9.3))
       '@form-create/antd-designer':
         specifier: 'catalog:'
-        version: 3.3.2(vue@3.5.22(typescript@5.9.3))
+        version: 3.3.2(vue@3.5.23(typescript@5.9.3))
       '@tinymce/tinymce-vue':
         specifier: 'catalog:'
-        version: 6.3.0(tinymce@7.9.1)(vue@3.5.22(typescript@5.9.3))
+        version: 6.3.0(tinymce@7.9.1)(vue@3.5.23(typescript@5.9.3))
       '@vben/access':
         specifier: workspace:*
         version: link:../../packages/effects/access
@@ -808,10 +808,10 @@ importers:
         version: 1.0.0(@types/video.js@7.3.58)(video.js@7.21.7)(vue@3.5.22(typescript@5.9.3))
       '@vueuse/core':
         specifier: 'catalog:'
-        version: 13.9.0(vue@3.5.22(typescript@5.9.3))
+        version: 13.9.0(vue@3.5.23(typescript@5.9.3))
       '@vueuse/integrations':
         specifier: 'catalog:'
-        version: 13.9.0(async-validator@4.2.5)(axios@1.12.2)(focus-trap@7.6.5)(nprogress@0.2.0)(qrcode@1.5.4)(sortablejs@1.15.6)(vue@3.5.22(typescript@5.9.3))
+        version: 14.0.0(async-validator@4.2.5)(axios@1.13.2)(focus-trap@7.6.6)(nprogress@0.2.0)(qrcode@1.5.4)(sortablejs@1.15.6)(vue@3.5.23(typescript@5.9.3))
       ant-design-vue:
         specifier: 'catalog:'
         version: 4.2.6(vue@3.5.22(typescript@5.9.3))
@@ -823,7 +823,7 @@ importers:
         version: 17.11.1
       bpmn-js-properties-panel:
         specifier: 'catalog:'
-        version: 5.23.0(@bpmn-io/properties-panel@3.33.0)(bpmn-js@17.11.1)(camunda-bpmn-js-behaviors@1.11.2(bpmn-js@17.11.1)(camunda-bpmn-moddle@7.0.1)(zeebe-bpmn-moddle@1.11.0))(diagram-js@12.8.1)
+        version: 5.23.0(@bpmn-io/properties-panel@3.33.2)(bpmn-js@17.11.1)(camunda-bpmn-js-behaviors@1.11.2(bpmn-js@17.11.1)(camunda-bpmn-moddle@7.0.1)(zeebe-bpmn-moddle@1.11.0))(diagram-js@12.8.1)
       bpmn-js-token-simulation:
         specifier: 'catalog:'
         version: 0.36.3
@@ -835,7 +835,7 @@ importers:
         version: 1.6.2
       dayjs:
         specifier: 'catalog:'
-        version: 1.11.18
+        version: 1.11.19
       diagram-js:
         specifier: 'catalog:'
         version: 12.8.1
@@ -847,7 +847,7 @@ importers:
         version: 11.11.1
       pinia:
         specifier: ^3.0.3
-        version: 3.0.3(typescript@5.9.3)(vue@3.5.22(typescript@5.9.3))
+        version: 3.0.4(typescript@5.9.3)(vue@3.5.23(typescript@5.9.3))
       steady-xml:
         specifier: 'catalog:'
         version: 0.1.0
@@ -859,31 +859,31 @@ importers:
         version: 7.21.7
       vue:
         specifier: ^3.5.17
-        version: 3.5.22(typescript@5.9.3)
+        version: 3.5.23(typescript@5.9.3)
       vue-dompurify-html:
         specifier: 'catalog:'
-        version: 5.3.0(vue@3.5.22(typescript@5.9.3))
+        version: 5.3.0(vue@3.5.23(typescript@5.9.3))
       vue-router:
         specifier: 'catalog:'
-        version: 4.6.3(vue@3.5.22(typescript@5.9.3))
+        version: 4.6.3(vue@3.5.23(typescript@5.9.3))
       vue3-signature:
         specifier: 'catalog:'
-        version: 0.2.4(vue@3.5.22(typescript@5.9.3))
+        version: 0.2.4(vue@3.5.23(typescript@5.9.3))
       vuedraggable:
         specifier: 'catalog:'
-        version: 4.1.0(vue@3.5.22(typescript@5.9.3))
+        version: 4.1.0(vue@3.5.23(typescript@5.9.3))
 
   apps/web-ele:
     dependencies:
       '@form-create/designer':
         specifier: 'catalog:'
-        version: 3.3.1(vue@3.5.22(typescript@5.9.3))
+        version: 3.3.1(vue@3.5.23(typescript@5.9.3))
       '@form-create/element-ui':
         specifier: 'catalog:'
-        version: 3.2.31(vue@3.5.22(typescript@5.9.3))
+        version: 3.2.32(vue@3.5.23(typescript@5.9.3))
       '@tinymce/tinymce-vue':
         specifier: 'catalog:'
-        version: 6.3.0(tinymce@7.9.1)(vue@3.5.22(typescript@5.9.3))
+        version: 6.3.0(tinymce@7.9.1)(vue@3.5.23(typescript@5.9.3))
       '@vben/access':
         specifier: workspace:*
         version: link:../../packages/effects/access
@@ -931,7 +931,7 @@ importers:
         version: 1.0.0(@types/video.js@7.3.58)(video.js@7.21.7)(vue@3.5.22(typescript@5.9.3))
       '@vueuse/core':
         specifier: 'catalog:'
-        version: 13.9.0(vue@3.5.22(typescript@5.9.3))
+        version: 13.9.0(vue@3.5.23(typescript@5.9.3))
       '@vueuse/integrations':
         specifier: 'catalog:'
         version: 13.9.0(async-validator@4.2.5)(axios@1.12.2)(focus-trap@7.6.5)(nprogress@0.2.0)(qrcode@1.5.4)(sortablejs@1.15.6)(vue@3.5.22(typescript@5.9.3))
@@ -943,16 +943,16 @@ importers:
         version: 1.6.2
       dayjs:
         specifier: 'catalog:'
-        version: 1.11.18
+        version: 1.11.19
       element-plus:
         specifier: 'catalog:'
-        version: 2.11.5(vue@3.5.22(typescript@5.9.3))
+        version: 2.11.7(vue@3.5.23(typescript@5.9.3))
       highlight.js:
         specifier: 'catalog:'
         version: 11.11.1
       pinia:
         specifier: ^3.0.3
-        version: 3.0.3(typescript@5.9.3)(vue@3.5.22(typescript@5.9.3))
+        version: 3.0.4(typescript@5.9.3)(vue@3.5.23(typescript@5.9.3))
       tinymce:
         specifier: 'catalog:'
         version: 7.9.1
@@ -961,16 +961,16 @@ importers:
         version: 7.21.7
       vue:
         specifier: ^3.5.17
-        version: 3.5.22(typescript@5.9.3)
+        version: 3.5.23(typescript@5.9.3)
       vue-dompurify-html:
         specifier: 'catalog:'
-        version: 5.3.0(vue@3.5.22(typescript@5.9.3))
+        version: 5.3.0(vue@3.5.23(typescript@5.9.3))
       vue-router:
         specifier: 'catalog:'
-        version: 4.6.3(vue@3.5.22(typescript@5.9.3))
+        version: 4.6.3(vue@3.5.23(typescript@5.9.3))
       vuedraggable:
         specifier: 'catalog:'
-        version: 4.1.0(vue@3.5.22(typescript@5.9.3))
+        version: 4.1.0(vue@3.5.23(typescript@5.9.3))
     devDependencies:
       unplugin-element-plus:
         specifier: 'catalog:'
@@ -1022,22 +1022,22 @@ importers:
         version: link:../../packages/utils
       '@vueuse/core':
         specifier: 'catalog:'
-        version: 13.9.0(vue@3.5.22(typescript@5.9.3))
+        version: 13.9.0(vue@3.5.23(typescript@5.9.3))
       dayjs:
         specifier: 'catalog:'
-        version: 1.11.18
+        version: 1.11.19
       naive-ui:
         specifier: 'catalog:'
-        version: 2.43.1(vue@3.5.22(typescript@5.9.3))
+        version: 2.43.1(vue@3.5.23(typescript@5.9.3))
       pinia:
         specifier: ^3.0.3
-        version: 3.0.3(typescript@5.9.3)(vue@3.5.22(typescript@5.9.3))
+        version: 3.0.4(typescript@5.9.3)(vue@3.5.23(typescript@5.9.3))
       vue:
         specifier: ^3.5.17
-        version: 3.5.22(typescript@5.9.3)
+        version: 3.5.23(typescript@5.9.3)
       vue-router:
         specifier: 'catalog:'
-        version: 4.6.3(vue@3.5.22(typescript@5.9.3))
+        version: 4.6.3(vue@3.5.23(typescript@5.9.3))
 
   docs:
     dependencies:
@@ -1058,41 +1058,41 @@ importers:
         version: link:../packages/styles
       ant-design-vue:
         specifier: 'catalog:'
-        version: 4.2.6(vue@3.5.22(typescript@5.9.3))
+        version: 4.2.6(vue@3.5.23(typescript@5.9.3))
       lucide-vue-next:
         specifier: 'catalog:'
-        version: 0.507.0(vue@3.5.22(typescript@5.9.3))
+        version: 0.507.0(vue@3.5.23(typescript@5.9.3))
       medium-zoom:
         specifier: 'catalog:'
         version: 1.1.0
-      radix-vue:
+      reka-ui:
         specifier: 'catalog:'
-        version: 1.9.17(vue@3.5.22(typescript@5.9.3))
+        version: 2.6.0(typescript@5.9.3)(vue@3.5.23(typescript@5.9.3))
       vitepress-plugin-group-icons:
         specifier: 'catalog:'
-        version: 1.6.4(markdown-it@14.1.0)(vite@5.4.21(@types/node@24.9.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0))
+        version: 1.6.5(vite@5.4.21(@types/node@24.10.0)(less@4.4.2)(sass@1.93.3)(terser@5.44.1))
     devDependencies:
       '@nolebase/vitepress-plugin-git-changelog':
         specifier: 'catalog:'
-        version: 2.18.2(vitepress@1.6.4(@algolia/client-search@5.40.1)(@types/node@24.9.1)(async-validator@4.2.5)(axios@1.12.2)(less@4.4.2)(nprogress@0.2.0)(postcss@8.5.6)(qrcode@1.5.4)(sass@1.93.2)(search-insights@2.17.3)(sortablejs@1.15.6)(terser@5.44.0)(typescript@5.9.3))(vue@3.5.22(typescript@5.9.3))
+        version: 2.18.2(vitepress@1.6.4(@algolia/client-search@5.42.0)(@types/node@24.10.0)(async-validator@4.2.5)(axios@1.13.2)(less@4.4.2)(nprogress@0.2.0)(postcss@8.5.6)(qrcode@1.5.4)(sass@1.93.3)(search-insights@2.17.3)(sortablejs@1.15.6)(terser@5.44.1)(typescript@5.9.3))(vue@3.5.23(typescript@5.9.3))
       '@vben/vite-config':
         specifier: workspace:*
         version: link:../internal/vite-config
       '@vite-pwa/vitepress':
         specifier: 'catalog:'
-        version: 1.0.1(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))
+        version: 1.0.1(vite-plugin-pwa@1.1.0(vite@5.4.21(@types/node@24.10.0)(less@4.4.2)(sass@1.93.3)(terser@5.44.1))(workbox-build@7.3.0)(workbox-window@7.3.0))
       vitepress:
         specifier: 'catalog:'
-        version: 1.6.4(@algolia/client-search@5.40.1)(@types/node@24.9.1)(async-validator@4.2.5)(axios@1.12.2)(less@4.4.2)(nprogress@0.2.0)(postcss@8.5.6)(qrcode@1.5.4)(sass@1.93.2)(search-insights@2.17.3)(sortablejs@1.15.6)(terser@5.44.0)(typescript@5.9.3)
+        version: 1.6.4(@algolia/client-search@5.42.0)(@types/node@24.10.0)(async-validator@4.2.5)(axios@1.13.2)(less@4.4.2)(nprogress@0.2.0)(postcss@8.5.6)(qrcode@1.5.4)(sass@1.93.3)(search-insights@2.17.3)(sortablejs@1.15.6)(terser@5.44.1)(typescript@5.9.3)
       vue:
         specifier: ^3.5.17
-        version: 3.5.22(typescript@5.9.3)
+        version: 3.5.23(typescript@5.9.3)
 
   internal/lint-configs/commitlint-config:
     dependencies:
       '@commitlint/cli':
         specifier: 'catalog:'
-        version: 19.8.1(@types/node@24.9.1)(typescript@5.9.3)
+        version: 19.8.1(@types/node@24.10.0)(typescript@5.9.3)
       '@commitlint/config-conventional':
         specifier: 'catalog:'
         version: 19.8.1
@@ -1113,74 +1113,74 @@ importers:
     dependencies:
       eslint-config-turbo:
         specifier: 'catalog:'
-        version: 2.5.8(eslint@9.38.0(jiti@2.6.1))(turbo@2.5.8)
+        version: 2.6.0(eslint@9.39.1(jiti@2.6.1))(turbo@2.6.0)
       eslint-plugin-command:
         specifier: 'catalog:'
-        version: 3.3.1(eslint@9.38.0(jiti@2.6.1))
+        version: 3.3.1(eslint@9.39.1(jiti@2.6.1))
       eslint-plugin-import-x:
         specifier: 'catalog:'
-        version: 4.16.1(@typescript-eslint/utils@8.46.2(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.38.0(jiti@2.6.1))
+        version: 4.16.1(@typescript-eslint/utils@8.46.3(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.1(jiti@2.6.1))
     devDependencies:
       '@eslint/js':
         specifier: 'catalog:'
-        version: 9.38.0
+        version: 9.39.1
       '@types/eslint':
         specifier: 'catalog:'
         version: 9.6.1
       '@typescript-eslint/eslint-plugin':
         specifier: 'catalog:'
-        version: 8.46.2(@typescript-eslint/parser@8.46.2(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)
+        version: 8.46.3(@typescript-eslint/parser@8.46.3(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3)
       '@typescript-eslint/parser':
         specifier: 'catalog:'
-        version: 8.46.2(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)
+        version: 8.46.3(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3)
       eslint:
         specifier: 'catalog:'
-        version: 9.38.0(jiti@2.6.1)
+        version: 9.39.1(jiti@2.6.1)
       eslint-plugin-eslint-comments:
         specifier: 'catalog:'
-        version: 3.2.0(eslint@9.38.0(jiti@2.6.1))
+        version: 3.2.0(eslint@9.39.1(jiti@2.6.1))
       eslint-plugin-jsdoc:
         specifier: 'catalog:'
-        version: 50.8.0(eslint@9.38.0(jiti@2.6.1))
+        version: 50.8.0(eslint@9.39.1(jiti@2.6.1))
       eslint-plugin-jsonc:
         specifier: 'catalog:'
-        version: 2.21.0(eslint@9.38.0(jiti@2.6.1))
+        version: 2.21.0(eslint@9.39.1(jiti@2.6.1))
       eslint-plugin-n:
         specifier: 'catalog:'
-        version: 17.23.1(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)
+        version: 17.23.1(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3)
       eslint-plugin-no-only-tests:
         specifier: 'catalog:'
         version: 3.3.0
       eslint-plugin-perfectionist:
         specifier: 'catalog:'
-        version: 4.15.1(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)
+        version: 4.15.1(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3)
       eslint-plugin-prettier:
         specifier: 'catalog:'
-        version: 5.5.4(@types/eslint@9.6.1)(eslint@9.38.0(jiti@2.6.1))(prettier@3.6.2)
+        version: 5.5.4(@types/eslint@9.6.1)(eslint@9.39.1(jiti@2.6.1))(prettier@3.6.2)
       eslint-plugin-regexp:
         specifier: 'catalog:'
-        version: 2.10.0(eslint@9.38.0(jiti@2.6.1))
+        version: 2.10.0(eslint@9.39.1(jiti@2.6.1))
       eslint-plugin-unicorn:
         specifier: 'catalog:'
-        version: 59.0.1(eslint@9.38.0(jiti@2.6.1))
+        version: 59.0.1(eslint@9.39.1(jiti@2.6.1))
       eslint-plugin-unused-imports:
         specifier: 'catalog:'
-        version: 4.3.0(@typescript-eslint/eslint-plugin@8.46.2(@typescript-eslint/parser@8.46.2(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.38.0(jiti@2.6.1))
+        version: 4.3.0(@typescript-eslint/eslint-plugin@8.46.3(@typescript-eslint/parser@8.46.3(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.1(jiti@2.6.1))
       eslint-plugin-vitest:
         specifier: 'catalog:'
-        version: 0.5.4(@typescript-eslint/eslint-plugin@8.46.2(@typescript-eslint/parser@8.46.2(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)(vitest@3.2.4(@types/node@24.9.1)(happy-dom@17.6.3)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))
+        version: 0.5.4(@typescript-eslint/eslint-plugin@8.46.3(@typescript-eslint/parser@8.46.3(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3)(vitest@3.2.4(@types/node@24.10.0)(happy-dom@17.6.3)(jiti@2.6.1)(less@4.4.2)(sass@1.93.3)(terser@5.44.1)(yaml@2.8.1))
       eslint-plugin-vue:
         specifier: 'catalog:'
-        version: 10.5.1(@typescript-eslint/parser@8.46.2(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.38.0(jiti@2.6.1))(vue-eslint-parser@10.2.0(eslint@9.38.0(jiti@2.6.1)))
+        version: 10.5.1(@typescript-eslint/parser@8.46.3(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.1(jiti@2.6.1))(vue-eslint-parser@10.2.0(eslint@9.39.1(jiti@2.6.1)))
       globals:
         specifier: 'catalog:'
-        version: 16.4.0
+        version: 16.5.0
       jsonc-eslint-parser:
         specifier: 'catalog:'
         version: 2.4.1
       vue-eslint-parser:
         specifier: 'catalog:'
-        version: 10.2.0(eslint@9.38.0(jiti@2.6.1))
+        version: 10.2.0(eslint@9.39.1(jiti@2.6.1))
 
   internal/lint-configs/prettier-config:
     dependencies:
@@ -1253,7 +1253,7 @@ importers:
         version: 3.4.2
       dayjs:
         specifier: 'catalog:'
-        version: 1.11.18
+        version: 1.11.19
       execa:
         specifier: 'catalog:'
         version: 9.6.0
@@ -1271,13 +1271,13 @@ importers:
         version: 3.6.2
       rimraf:
         specifier: 'catalog:'
-        version: 6.0.1
+        version: 6.1.0
 
   internal/tailwind-config:
     dependencies:
       '@iconify/json':
         specifier: 'catalog:'
-        version: 2.2.398
+        version: 2.2.404
       '@iconify/tailwind':
         specifier: 'catalog:'
         version: 1.2.0
@@ -1295,7 +1295,7 @@ importers:
         version: 10.4.21(postcss@8.5.6)
       cssnano:
         specifier: 'catalog:'
-        version: 7.1.1(postcss@8.5.6)
+        version: 7.1.2(postcss@8.5.6)
       postcss:
         specifier: 'catalog:'
         version: 8.5.6
@@ -1326,16 +1326,16 @@ importers:
         version: link:../../packages/types
       vite:
         specifier: 'catalog:'
-        version: 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)
+        version: 7.2.1(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.3)(terser@5.44.1)(yaml@2.8.1)
 
   internal/vite-config:
     dependencies:
       '@intlify/unplugin-vue-i18n':
         specifier: 'catalog:'
-        version: 6.0.8(@vue/compiler-dom@3.5.22)(eslint@9.38.0(jiti@2.6.1))(rollup@4.52.5)(typescript@5.9.3)(vue-i18n@11.1.12(vue@3.5.22(typescript@5.9.3)))(vue@3.5.22(typescript@5.9.3))
+        version: 6.0.8(@vue/compiler-dom@3.5.23)(eslint@9.39.1(jiti@2.6.1))(rollup@4.52.5)(typescript@5.9.3)(vue-i18n@11.1.12(vue@3.5.23(typescript@5.9.3)))(vue@3.5.23(typescript@5.9.3))
       '@jspm/generator':
         specifier: 'catalog:'
-        version: 2.7.4
+        version: 2.7.6
       archiver:
         specifier: 'catalog:'
         version: 7.0.1
@@ -1350,23 +1350,23 @@ importers:
         version: 7.2.0
       nitropack:
         specifier: 'catalog:'
-        version: 2.12.7
+        version: 2.12.9
       resolve.exports:
         specifier: 'catalog:'
         version: 2.0.3
       vite-plugin-pwa:
         specifier: 'catalog:'
-        version: 1.1.0(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))(workbox-build@7.3.0)(workbox-window@7.3.0)
+        version: 1.1.0(vite@7.2.1(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.3)(terser@5.44.1)(yaml@2.8.1))(workbox-build@7.3.0)(workbox-window@7.3.0)
       vite-plugin-vue-devtools:
         specifier: 'catalog:'
-        version: 7.7.7(rollup@4.52.5)(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))
+        version: 7.7.7(rollup@4.52.5)(vite@7.2.1(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.3)(terser@5.44.1)(yaml@2.8.1))(vue@3.5.23(typescript@5.9.3))
     devDependencies:
       '@pnpm/workspace.read-manifest':
         specifier: 'catalog:'
         version: 1000.2.5
       '@types/archiver':
         specifier: 'catalog:'
-        version: 6.0.3
+        version: 6.0.4
       '@types/html-minifier-terser':
         specifier: 'catalog:'
         version: 7.0.2
@@ -1375,13 +1375,13 @@ importers:
         version: link:../node-utils
       '@vitejs/plugin-vue':
         specifier: 'catalog:'
-        version: 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))
+        version: 6.0.1(vite@7.2.1(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.3)(terser@5.44.1)(yaml@2.8.1))(vue@3.5.23(typescript@5.9.3))
       '@vitejs/plugin-vue-jsx':
         specifier: 'catalog:'
-        version: 5.1.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))
+        version: 5.1.1(vite@7.2.1(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.3)(terser@5.44.1)(yaml@2.8.1))(vue@3.5.23(typescript@5.9.3))
       dayjs:
         specifier: 'catalog:'
-        version: 1.11.18
+        version: 1.11.19
       dotenv:
         specifier: 'catalog:'
         version: 16.6.1
@@ -1393,19 +1393,19 @@ importers:
         version: 5.14.0(rollup@4.52.5)
       sass:
         specifier: 'catalog:'
-        version: 1.93.2
+        version: 1.93.3
       vite:
         specifier: 'catalog:'
-        version: 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)
+        version: 7.2.1(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.3)(terser@5.44.1)(yaml@2.8.1)
       vite-plugin-compression:
         specifier: 'catalog:'
-        version: 0.5.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))
+        version: 0.5.1(vite@7.2.1(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.3)(terser@5.44.1)(yaml@2.8.1))
       vite-plugin-dts:
         specifier: 'catalog:'
-        version: 4.5.4(@types/node@24.9.1)(rollup@4.52.5)(typescript@5.9.3)(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))
+        version: 4.5.4(@types/node@24.10.0)(rollup@4.52.5)(typescript@5.9.3)(vite@7.2.1(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.3)(terser@5.44.1)(yaml@2.8.1))
       vite-plugin-html:
         specifier: 'catalog:'
-        version: 3.2.2(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))
+        version: 3.2.2(vite@7.2.1(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.3)(terser@5.44.1)(yaml@2.8.1))
       vite-plugin-lazy-import:
         specifier: 'catalog:'
         version: 1.0.7
@@ -1416,13 +1416,13 @@ importers:
     dependencies:
       '@iconify/vue':
         specifier: 'catalog:'
-        version: 5.0.0(vue@3.5.22(typescript@5.9.3))
+        version: 5.0.0(vue@3.5.23(typescript@5.9.3))
       lucide-vue-next:
         specifier: 'catalog:'
-        version: 0.507.0(vue@3.5.22(typescript@5.9.3))
+        version: 0.507.0(vue@3.5.23(typescript@5.9.3))
       vue:
         specifier: ^3.5.17
-        version: 3.5.22(typescript@5.9.3)
+        version: 3.5.23(typescript@5.9.3)
 
   packages/@core/base/shared:
     dependencies:
@@ -1431,10 +1431,10 @@ importers:
         version: 4.2.0
       '@tanstack/vue-store':
         specifier: 'catalog:'
-        version: 0.7.7(vue@3.5.22(typescript@5.9.3))
+        version: 0.7.7(vue@3.5.23(typescript@5.9.3))
       '@vue/shared':
         specifier: 'catalog:'
-        version: 3.5.22
+        version: 3.5.23
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
@@ -1443,7 +1443,7 @@ importers:
         version: 4.2.0
       dayjs:
         specifier: 'catalog:'
-        version: 1.11.18
+        version: 1.11.19
       defu:
         specifier: 'catalog:'
         version: 6.1.4
@@ -1495,10 +1495,10 @@ importers:
     dependencies:
       vue:
         specifier: ^3.5.17
-        version: 3.5.22(typescript@5.9.3)
+        version: 3.5.23(typescript@5.9.3)
       vue-router:
         specifier: 'catalog:'
-        version: 4.6.3(vue@3.5.22(typescript@5.9.3))
+        version: 4.6.3(vue@3.5.23(typescript@5.9.3))
 
   packages/@core/composables:
     dependencies:
@@ -1507,20 +1507,20 @@ importers:
         version: link:../base/shared
       '@vueuse/core':
         specifier: 'catalog:'
-        version: 13.9.0(vue@3.5.22(typescript@5.9.3))
-      radix-vue:
+        version: 13.9.0(vue@3.5.23(typescript@5.9.3))
+      reka-ui:
         specifier: 'catalog:'
-        version: 1.9.17(vue@3.5.22(typescript@5.9.3))
+        version: 2.6.0(typescript@5.9.3)(vue@3.5.23(typescript@5.9.3))
       sortablejs:
         specifier: 'catalog:'
         version: 1.15.6
       vue:
         specifier: ^3.5.17
-        version: 3.5.22(typescript@5.9.3)
+        version: 3.5.23(typescript@5.9.3)
     devDependencies:
       '@types/sortablejs':
         specifier: 'catalog:'
-        version: 1.15.8
+        version: 1.15.9
 
   packages/@core/preferences:
     dependencies:
@@ -1532,10 +1532,10 @@ importers:
         version: link:../base/typings
       '@vueuse/core':
         specifier: 'catalog:'
-        version: 13.9.0(vue@3.5.22(typescript@5.9.3))
+        version: 13.9.0(vue@3.5.23(typescript@5.9.3))
       vue:
         specifier: ^3.5.17
-        version: 3.5.22(typescript@5.9.3)
+        version: 3.5.23(typescript@5.9.3)
 
   packages/@core/ui-kit/form-ui:
     dependencies:
@@ -1556,16 +1556,16 @@ importers:
         version: link:../../base/typings
       '@vee-validate/zod':
         specifier: 'catalog:'
-        version: 4.15.1(vue@3.5.22(typescript@5.9.3))(zod@3.25.76)
+        version: 4.15.1(vue@3.5.23(typescript@5.9.3))(zod@3.25.76)
       '@vueuse/core':
         specifier: 'catalog:'
-        version: 13.9.0(vue@3.5.22(typescript@5.9.3))
+        version: 13.9.0(vue@3.5.23(typescript@5.9.3))
       vee-validate:
         specifier: 'catalog:'
-        version: 4.15.1(vue@3.5.22(typescript@5.9.3))
+        version: 4.15.1(vue@3.5.23(typescript@5.9.3))
       vue:
         specifier: ^3.5.17
-        version: 3.5.22(typescript@5.9.3)
+        version: 3.5.23(typescript@5.9.3)
       zod:
         specifier: 'catalog:'
         version: 3.25.76
@@ -1592,10 +1592,10 @@ importers:
         version: link:../../base/typings
       '@vueuse/core':
         specifier: 'catalog:'
-        version: 13.9.0(vue@3.5.22(typescript@5.9.3))
+        version: 13.9.0(vue@3.5.23(typescript@5.9.3))
       vue:
         specifier: ^3.5.17
-        version: 3.5.22(typescript@5.9.3)
+        version: 3.5.23(typescript@5.9.3)
 
   packages/@core/ui-kit/menu-ui:
     dependencies:
@@ -1616,10 +1616,10 @@ importers:
         version: link:../../base/typings
       '@vueuse/core':
         specifier: 'catalog:'
-        version: 13.9.0(vue@3.5.22(typescript@5.9.3))
+        version: 13.9.0(vue@3.5.23(typescript@5.9.3))
       vue:
         specifier: ^3.5.17
-        version: 3.5.22(typescript@5.9.3)
+        version: 3.5.23(typescript@5.9.3)
 
   packages/@core/ui-kit/popup-ui:
     dependencies:
@@ -1640,10 +1640,10 @@ importers:
         version: link:../../base/typings
       '@vueuse/core':
         specifier: 'catalog:'
-        version: 13.9.0(vue@3.5.22(typescript@5.9.3))
+        version: 13.9.0(vue@3.5.23(typescript@5.9.3))
       vue:
         specifier: ^3.5.17
-        version: 3.5.22(typescript@5.9.3)
+        version: 3.5.23(typescript@5.9.3)
 
   packages/@core/ui-kit/shadcn-ui:
     dependencies:
@@ -1661,22 +1661,22 @@ importers:
         version: link:../../base/typings
       '@vueuse/core':
         specifier: 'catalog:'
-        version: 13.9.0(vue@3.5.22(typescript@5.9.3))
+        version: 13.9.0(vue@3.5.23(typescript@5.9.3))
       class-variance-authority:
         specifier: 'catalog:'
         version: 0.7.1
       lucide-vue-next:
         specifier: 'catalog:'
-        version: 0.507.0(vue@3.5.22(typescript@5.9.3))
-      radix-vue:
+        version: 0.507.0(vue@3.5.23(typescript@5.9.3))
+      reka-ui:
         specifier: 'catalog:'
-        version: 1.9.17(vue@3.5.22(typescript@5.9.3))
+        version: 2.6.0(typescript@5.9.3)(vue@3.5.23(typescript@5.9.3))
       vee-validate:
         specifier: 'catalog:'
-        version: 4.15.1(vue@3.5.22(typescript@5.9.3))
+        version: 4.15.1(vue@3.5.23(typescript@5.9.3))
       vue:
         specifier: ^3.5.17
-        version: 3.5.22(typescript@5.9.3)
+        version: 3.5.23(typescript@5.9.3)
 
   packages/@core/ui-kit/tabs-ui:
     dependencies:
@@ -1694,10 +1694,10 @@ importers:
         version: link:../../base/typings
       '@vueuse/core':
         specifier: 'catalog:'
-        version: 13.9.0(vue@3.5.22(typescript@5.9.3))
+        version: 13.9.0(vue@3.5.23(typescript@5.9.3))
       vue:
         specifier: ^3.5.17
-        version: 3.5.22(typescript@5.9.3)
+        version: 3.5.23(typescript@5.9.3)
 
   packages/constants:
     dependencies:
@@ -1721,7 +1721,7 @@ importers:
         version: link:../../utils
       vue:
         specifier: ^3.5.17
-        version: 3.5.22(typescript@5.9.3)
+        version: 3.5.23(typescript@5.9.3)
 
   packages/effects/common-ui:
     dependencies:
@@ -1757,10 +1757,10 @@ importers:
         version: link:../../types
       '@vueuse/core':
         specifier: 'catalog:'
-        version: 13.9.0(vue@3.5.22(typescript@5.9.3))
+        version: 13.9.0(vue@3.5.23(typescript@5.9.3))
       '@vueuse/integrations':
         specifier: 'catalog:'
-        version: 13.9.0(async-validator@4.2.5)(axios@1.12.2)(focus-trap@7.6.5)(nprogress@0.2.0)(qrcode@1.5.4)(sortablejs@1.15.6)(vue@3.5.22(typescript@5.9.3))
+        version: 14.0.0(async-validator@4.2.5)(axios@1.13.2)(focus-trap@7.6.6)(nprogress@0.2.0)(qrcode@1.5.4)(sortablejs@1.15.6)(vue@3.5.23(typescript@5.9.3))
       json-bigint:
         specifier: 'catalog:'
         version: 1.0.0
@@ -1772,20 +1772,20 @@ importers:
         version: 6.3.7
       vue:
         specifier: ^3.5.17
-        version: 3.5.22(typescript@5.9.3)
+        version: 3.5.23(typescript@5.9.3)
       vue-json-viewer:
         specifier: 'catalog:'
-        version: 3.0.4(vue@3.5.22(typescript@5.9.3))
+        version: 3.0.4(vue@3.5.23(typescript@5.9.3))
       vue-router:
         specifier: 'catalog:'
-        version: 4.6.3(vue@3.5.22(typescript@5.9.3))
+        version: 4.6.3(vue@3.5.23(typescript@5.9.3))
       vue-tippy:
         specifier: 'catalog:'
-        version: 6.7.1(vue@3.5.22(typescript@5.9.3))
+        version: 6.7.1(vue@3.5.23(typescript@5.9.3))
     devDependencies:
       '@types/qrcode':
         specifier: 'catalog:'
-        version: 1.5.5
+        version: 1.5.6
 
   packages/effects/hooks:
     dependencies:
@@ -1806,13 +1806,13 @@ importers:
         version: link:../../utils
       '@vueuse/core':
         specifier: 'catalog:'
-        version: 13.9.0(vue@3.5.22(typescript@5.9.3))
+        version: 13.9.0(vue@3.5.23(typescript@5.9.3))
       vue:
         specifier: ^3.5.17
-        version: 3.5.22(typescript@5.9.3)
+        version: 3.5.23(typescript@5.9.3)
       vue-router:
         specifier: 'catalog:'
-        version: 4.6.3(vue@3.5.22(typescript@5.9.3))
+        version: 4.6.3(vue@3.5.23(typescript@5.9.3))
       watermark-js-plus:
         specifier: 'catalog:'
         version: 1.6.3
@@ -1869,19 +1869,19 @@ importers:
         version: link:../../utils
       '@vueuse/core':
         specifier: 'catalog:'
-        version: 13.9.0(vue@3.5.22(typescript@5.9.3))
+        version: 13.9.0(vue@3.5.23(typescript@5.9.3))
       vue:
         specifier: ^3.5.17
-        version: 3.5.22(typescript@5.9.3)
+        version: 3.5.23(typescript@5.9.3)
       vue-router:
         specifier: 'catalog:'
-        version: 4.6.3(vue@3.5.22(typescript@5.9.3))
+        version: 4.6.3(vue@3.5.23(typescript@5.9.3))
 
   packages/effects/plugins:
     dependencies:
       '@tinyflow-ai/vue':
         specifier: 'catalog:'
-        version: 1.1.7(svelte@5.41.1)(vue@3.5.22(typescript@5.9.3))
+        version: 1.1.9(svelte@5.43.3)(vue@3.5.23(typescript@5.9.3))
       '@vben-core/form-ui':
         specifier: workspace:*
         version: link:../../@core/ui-kit/form-ui
@@ -1911,10 +1911,10 @@ importers:
         version: link:../../utils
       '@vueuse/core':
         specifier: 'catalog:'
-        version: 13.9.0(vue@3.5.22(typescript@5.9.3))
+        version: 13.9.0(vue@3.5.23(typescript@5.9.3))
       '@vueuse/motion':
         specifier: 'catalog:'
-        version: 3.0.3(magicast@0.3.5)(vue@3.5.22(typescript@5.9.3))
+        version: 3.0.3(vue@3.5.23(typescript@5.9.3))
       codemirror:
         specifier: 'catalog:'
         version: 5.65.20
@@ -1938,17 +1938,17 @@ importers:
         version: 0.16.0(markmap-common@0.16.0)
       vue:
         specifier: ^3.5.17
-        version: 3.5.22(typescript@5.9.3)
+        version: 3.5.23(typescript@5.9.3)
       vxe-pc-ui:
         specifier: 'catalog:'
-        version: 4.10.5(vue@3.5.22(typescript@5.9.3))
+        version: 4.10.16(vue@3.5.23(typescript@5.9.3))
       vxe-table:
         specifier: 'catalog:'
-        version: 4.17.0(vue@3.5.22(typescript@5.9.3))
+        version: 4.17.10(vue@3.5.23(typescript@5.9.3))
     devDependencies:
       '@types/codemirror':
         specifier: 'catalog:'
-        version: 5.60.16
+        version: 5.60.17
       '@types/markdown-it':
         specifier: 'catalog:'
         version: 14.1.2
@@ -1966,7 +1966,7 @@ importers:
         version: link:../../utils
       axios:
         specifier: 'catalog:'
-        version: 1.12.2
+        version: 1.13.2
       qs:
         specifier: 'catalog:'
         version: 6.14.0
@@ -1976,7 +1976,7 @@ importers:
         version: 6.14.0
       axios-mock-adapter:
         specifier: 'catalog:'
-        version: 2.1.0(axios@1.12.2)
+        version: 2.1.0(axios@1.13.2)
 
   packages/icons:
     dependencies:
@@ -1994,10 +1994,10 @@ importers:
         version: link:../@core/composables
       vue:
         specifier: ^3.5.17
-        version: 3.5.22(typescript@5.9.3)
+        version: 3.5.23(typescript@5.9.3)
       vue-i18n:
         specifier: 'catalog:'
-        version: 11.1.12(vue@3.5.22(typescript@5.9.3))
+        version: 11.1.12(vue@3.5.23(typescript@5.9.3))
 
   packages/preferences:
     dependencies:
@@ -2021,19 +2021,19 @@ importers:
         version: link:../@core/base/typings
       pinia:
         specifier: ^3.0.3
-        version: 3.0.3(typescript@5.9.3)(vue@3.5.22(typescript@5.9.3))
+        version: 3.0.4(typescript@5.9.3)(vue@3.5.23(typescript@5.9.3))
       pinia-plugin-persistedstate:
         specifier: 'catalog:'
-        version: 4.5.0(@nuxt/kit@3.19.3(magicast@0.3.5))(pinia@3.0.3(typescript@5.9.3)(vue@3.5.22(typescript@5.9.3)))
+        version: 4.7.1(@nuxt/kit@3.20.0)(pinia@3.0.4(typescript@5.9.3)(vue@3.5.23(typescript@5.9.3)))
       secure-ls:
         specifier: 'catalog:'
         version: 2.0.0
       vue:
         specifier: ^3.5.17
-        version: 3.5.22(typescript@5.9.3)
+        version: 3.5.23(typescript@5.9.3)
       vue-router:
         specifier: 'catalog:'
-        version: 4.6.3(vue@3.5.22(typescript@5.9.3))
+        version: 4.6.3(vue@3.5.23(typescript@5.9.3))
 
   packages/styles:
     dependencies:
@@ -2048,10 +2048,10 @@ importers:
         version: link:../@core/base/typings
       vue:
         specifier: ^3.5.17
-        version: 3.5.22(typescript@5.9.3)
+        version: 3.5.23(typescript@5.9.3)
       vue-router:
         specifier: 'catalog:'
-        version: 4.6.3(vue@3.5.22(typescript@5.9.3))
+        version: 4.6.3(vue@3.5.23(typescript@5.9.3))
 
   packages/utils:
     dependencies:
@@ -2063,13 +2063,13 @@ importers:
         version: link:../@core/base/typings
       vue-router:
         specifier: 'catalog:'
-        version: 4.6.3(vue@3.5.22(typescript@5.9.3))
+        version: 4.6.3(vue@3.5.23(typescript@5.9.3))
 
   playground:
     dependencies:
       '@tanstack/vue-query':
         specifier: 'catalog:'
-        version: 5.90.5(vue@3.5.22(typescript@5.9.3))
+        version: 5.90.7(vue@3.5.23(typescript@5.9.3))
       '@vben-core/menu-ui':
         specifier: workspace:*
         version: link:../packages/@core/ui-kit/menu-ui
@@ -2117,25 +2117,25 @@ importers:
         version: link:../packages/utils
       '@vueuse/core':
         specifier: 'catalog:'
-        version: 13.9.0(vue@3.5.22(typescript@5.9.3))
+        version: 13.9.0(vue@3.5.23(typescript@5.9.3))
       ant-design-vue:
         specifier: 'catalog:'
-        version: 4.2.6(vue@3.5.22(typescript@5.9.3))
+        version: 4.2.6(vue@3.5.23(typescript@5.9.3))
       dayjs:
         specifier: 'catalog:'
-        version: 1.11.18
+        version: 1.11.19
       json-bigint:
         specifier: 'catalog:'
         version: 1.0.0
       pinia:
         specifier: ^3.0.3
-        version: 3.0.3(typescript@5.9.3)(vue@3.5.22(typescript@5.9.3))
+        version: 3.0.4(typescript@5.9.3)(vue@3.5.23(typescript@5.9.3))
       vue:
         specifier: ^3.5.17
-        version: 3.5.22(typescript@5.9.3)
+        version: 3.5.23(typescript@5.9.3)
       vue-router:
         specifier: 'catalog:'
-        version: 4.6.3(vue@3.5.22(typescript@5.9.3))
+        version: 4.6.3(vue@3.5.23(typescript@5.9.3))
     devDependencies:
       '@types/json-bigint':
         specifier: 'catalog:'
@@ -2176,8 +2176,8 @@ importers:
 
 packages:
 
-  '@algolia/abtesting@1.6.1':
-    resolution: {integrity: sha512-wV/gNRkzb7sI9vs1OneG129hwe3Q5zPj7zigz3Ps7M5Lpo2hSorrOnXNodHEOV+yXE/ks4Pd+G3CDFIjFTWhMQ==}
+  '@algolia/abtesting@1.8.0':
+    resolution: {integrity: sha512-Hb4BkGNnvgCj3F9XzqjiFTpA5IGkjOXwGAOV13qtc27l2qNF8X9rzSp1H5hu8XewlC0DzYtQtZZIOYzRZDyuXg==}
     engines: {node: '>= 14.0.0'}
 
   '@algolia/autocomplete-core@1.17.7':
@@ -2200,56 +2200,56 @@ packages:
       '@algolia/client-search': '>= 4.9.1 < 6'
       algoliasearch: '>= 4.9.1 < 6'
 
-  '@algolia/client-abtesting@5.40.1':
-    resolution: {integrity: sha512-cxKNATPY5t+Mv8XAVTI57altkaPH+DZi4uMrnexPxPHODMljhGYY+GDZyHwv9a+8CbZHcY372OkxXrDMZA4Lnw==}
+  '@algolia/client-abtesting@5.42.0':
+    resolution: {integrity: sha512-JLyyG7bb7XOda+w/sp8ch7rEVy6LnWs3qtxr6VJJ2XIINqGsY6U+0L3aJ6QFliBRNUeEAr2QBDxSm8u9Sal5uA==}
     engines: {node: '>= 14.0.0'}
 
-  '@algolia/client-analytics@5.40.1':
-    resolution: {integrity: sha512-XP008aMffJCRGAY8/70t+hyEyvqqV7YKm502VPu0+Ji30oefrTn2al7LXkITz7CK6I4eYXWRhN6NaIUi65F1OA==}
+  '@algolia/client-analytics@5.42.0':
+    resolution: {integrity: sha512-SkCrvtZpdSWjNq9NGu/TtOg4TbzRuUToXlQqV6lLePa2s/WQlEyFw7QYjrz4itprWG9ASuH+StDlq7n49F2sBA==}
     engines: {node: '>= 14.0.0'}
 
-  '@algolia/client-common@5.40.1':
-    resolution: {integrity: sha512-gWfQuQUBtzUboJv/apVGZMoxSaB0M4Imwl1c9Ap+HpCW7V0KhjBddqF2QQt5tJZCOFsfNIgBbZDGsEPaeKUosw==}
+  '@algolia/client-common@5.42.0':
+    resolution: {integrity: sha512-6iiFbm2tRn6B2OqFv9XDTcw5LdWPudiJWIbRk+fsTX+hkPrPm4e1/SbU+lEYBciPoaTShLkDbRge4UePEyCPMQ==}
     engines: {node: '>= 14.0.0'}
 
-  '@algolia/client-insights@5.40.1':
-    resolution: {integrity: sha512-RTLjST/t+lsLMouQ4zeLJq2Ss+UNkLGyNVu+yWHanx6kQ3LT5jv8UvPwyht9s7R6jCPnlSI77WnL80J32ZuyJg==}
+  '@algolia/client-insights@5.42.0':
+    resolution: {integrity: sha512-iEokmw2k6FBa8g/TT7ClyEriaP/FUEmz3iczRoCklEHWSgoABMkaeYrxRXrA2yx76AN+gyZoC8FX0iCJ55dsOg==}
     engines: {node: '>= 14.0.0'}
 
-  '@algolia/client-personalization@5.40.1':
-    resolution: {integrity: sha512-2FEK6bUomBzEYkTKzD0iRs7Ljtjb45rKK/VSkyHqeJnG+77qx557IeSO0qVFE3SfzapNcoytTofnZum0BQ6r3Q==}
+  '@algolia/client-personalization@5.42.0':
+    resolution: {integrity: sha512-ivVniRqX2ARd+jGvRHTxpWeOtO9VT+rK+OmiuRgkSunoTyxk0vjeDO7QkU7+lzBOXiYgakNjkZrBtIpW9c+muw==}
     engines: {node: '>= 14.0.0'}
 
-  '@algolia/client-query-suggestions@5.40.1':
-    resolution: {integrity: sha512-Nju4NtxAvXjrV2hHZNLKVJLXjOlW6jAXHef/CwNzk1b2qIrCWDO589ELi5ZHH1uiWYoYyBXDQTtHmhaOVVoyXg==}
+  '@algolia/client-query-suggestions@5.42.0':
+    resolution: {integrity: sha512-9+BIw6rerUfA+eLMIS2lF4mgoeBGTCIHiqb35PLn3699Rm3CaJXz03hChdwAWcA6SwGw0haYXYJa7LF0xI6EpA==}
     engines: {node: '>= 14.0.0'}
 
-  '@algolia/client-search@5.40.1':
-    resolution: {integrity: sha512-Mw6pAUF121MfngQtcUb5quZVqMC68pSYYjCRZkSITC085S3zdk+h/g7i6FxnVdbSU6OztxikSDMh1r7Z+4iPlA==}
+  '@algolia/client-search@5.42.0':
+    resolution: {integrity: sha512-NZR7yyHj2WzK6D5X8gn+/KOxPdzYEXOqVdSaK/biU8QfYUpUuEA0sCWg/XlO05tPVEcJelF/oLrrNY3UjRbOww==}
     engines: {node: '>= 14.0.0'}
 
-  '@algolia/ingestion@1.40.1':
-    resolution: {integrity: sha512-z+BPlhs45VURKJIxsR99NNBWpUEEqIgwt10v/fATlNxc4UlXvALdOsWzaFfe89/lbP5Bu4+mbO59nqBC87ZM/g==}
+  '@algolia/ingestion@1.42.0':
+    resolution: {integrity: sha512-MBkjRymf4BT6VOvMpJlg6kq8K+PkH9q+N+K4YMNdzTXlL40YwOa1wIWQ5LxP/Jhlz64kW5g9/oaMWY06Sy9dcw==}
     engines: {node: '>= 14.0.0'}
 
-  '@algolia/monitoring@1.40.1':
-    resolution: {integrity: sha512-VJMUMbO0wD8Rd2VVV/nlFtLJsOAQvjnVNGkMkspFiFhpBA7s/xJOb+fJvvqwKFUjbKTUA7DjiSi1ljSMYBasXg==}
+  '@algolia/monitoring@1.42.0':
+    resolution: {integrity: sha512-kmLs7YfjT4cpr4FnhhRmnoSX4psh9KYZ9NAiWt/YcUV33m0B/Os5L4QId30zVXkOqAPAEpV5VbDPWep+/aoJdQ==}
     engines: {node: '>= 14.0.0'}
 
-  '@algolia/recommend@5.40.1':
-    resolution: {integrity: sha512-ehvJLadKVwTp9Scg9NfzVSlBKH34KoWOQNTaN8i1Ac64AnO6iH2apJVSP6GOxssaghZ/s8mFQsDH3QIZoluFHA==}
+  '@algolia/recommend@5.42.0':
+    resolution: {integrity: sha512-U5yZ8+Jj+A4ZC0IMfElpPcddQ9NCoawD1dKyWmjHP49nzN2Z4284IFVMAJWR6fq/0ddGf4OMjjYO9cnF8L+5tw==}
     engines: {node: '>= 14.0.0'}
 
-  '@algolia/requester-browser-xhr@5.40.1':
-    resolution: {integrity: sha512-PbidVsPurUSQIr6X9/7s34mgOMdJnn0i6p+N6Ab+lsNhY5eiu+S33kZEpZwkITYBCIbhzDLOvb7xZD3gDi+USA==}
+  '@algolia/requester-browser-xhr@5.42.0':
+    resolution: {integrity: sha512-EbuxgteaYBlKgc2Fs3JzoPIKAIaevAIwmv1F+fakaEXeibG4pkmVNsyTUjpOZIgJ1kXeqNvDrcjRb6g3vYBJ9A==}
     engines: {node: '>= 14.0.0'}
 
-  '@algolia/requester-fetch@5.40.1':
-    resolution: {integrity: sha512-ThZ5j6uOZCF11fMw9IBkhigjOYdXGXQpj6h4k+T9UkZrF2RlKcPynFzDeRgaLdpYk8Yn3/MnFbwUmib7yxj5Lw==}
+  '@algolia/requester-fetch@5.42.0':
+    resolution: {integrity: sha512-4vnFvY5Q8QZL9eDNkywFLsk/eQCRBXCBpE8HWs8iUsFNHYoamiOxAeYMin0W/nszQj6abc+jNxMChHmejO+ftQ==}
     engines: {node: '>= 14.0.0'}
 
-  '@algolia/requester-node-http@5.40.1':
-    resolution: {integrity: sha512-H1gYPojO6krWHnUXu/T44DrEun/Wl95PJzMXRcM/szstNQczSbwq6wIFJPI9nyE95tarZfUNU3rgorT+wZ6iCQ==}
+  '@algolia/requester-node-http@5.42.0':
+    resolution: {integrity: sha512-gkLNpU+b1pCIwk1hKTJz2NWQPT8gsfGhQasnZ5QVv4jd79fKRL/1ikd86P0AzuIQs9tbbhlMwxsSTyJmlq502w==}
     engines: {node: '>= 14.0.0'}
 
   '@alloc/quick-lru@5.2.0':
@@ -2348,16 +2348,16 @@ packages:
     resolution: {integrity: sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/compat-data@7.28.4':
-    resolution: {integrity: sha512-YsmSKC29MJwf0gF8Rjjrg5LQCmyh+j/nD8/eP7f+BeoQTKYqs9RoWbjGOdy0+1Ekr68RJZMUOPVQaQisnIo4Rw==}
+  '@babel/compat-data@7.28.5':
+    resolution: {integrity: sha512-6uFXyCayocRbqhZOB+6XcuZbkMNimwfVGFji8CTZnCzOHVGvDqzvitu1re2AU5LROliz7eQPhB8CpAMvnx9EjA==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/core@7.28.4':
-    resolution: {integrity: sha512-2BCOP7TN8M+gVDj7/ht3hsaO/B/n5oDbiAyyvnRlNOs+u1o+JWNYTQrmpuNp1/Wq2gcFrI01JAW+paEKDMx/CA==}
+  '@babel/core@7.28.5':
+    resolution: {integrity: sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/generator@7.28.3':
-    resolution: {integrity: sha512-3lSpxGgvnmZznmBkCRnVREPUFJv2wrv9iAoFDvADJc0ypmdOxdUtcLeBgBJ6zE0PMeTKnxeQzyk0xTBq4Ep7zw==}
+  '@babel/generator@7.28.5':
+    resolution: {integrity: sha512-3EwLFhZ38J4VyIP6WNtt2kUdW9dokXA9Cr4IVIFHuCpZ3H8/YFOl5JjZHisrn1fATPBmKKqXzDFvh9fUwHz6CQ==}
     engines: {node: '>=6.9.0'}
 
   '@babel/helper-annotate-as-pure@7.27.3':
@@ -2368,14 +2368,14 @@ packages:
     resolution: {integrity: sha512-2+1thGUUWWjLTYTHZWK1n8Yga0ijBz1XAhUXcKy81rd5g6yh7hGqMp45v7cadSbEHc9G3OTv45SyneRN3ps4DQ==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-create-class-features-plugin@7.28.3':
-    resolution: {integrity: sha512-V9f6ZFIYSLNEbuGA/92uOvYsGCJNsuA8ESZ4ldc09bWk/j8H8TKiPw8Mk1eG6olpnO0ALHJmYfZvF4MEE4gajg==}
+  '@babel/helper-create-class-features-plugin@7.28.5':
+    resolution: {integrity: sha512-q3WC4JfdODypvxArsJQROfupPBq9+lMwjKq7C33GhbFYJsufD0yd/ziwD+hJucLeWsnFPWZjsU2DNFqBPE7jwQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0
 
-  '@babel/helper-create-regexp-features-plugin@7.27.1':
-    resolution: {integrity: sha512-uVDC72XVf8UbrH5qQTc18Agb8emwjTiZrQE11Nv3CuBEZmVvTwwE9CBUEvHku06gQCAyYf8Nv6ja1IN+6LMbxQ==}
+  '@babel/helper-create-regexp-features-plugin@7.28.5':
+    resolution: {integrity: sha512-N1EhvLtHzOvj7QQOUCCS3NrPJP8c5W6ZXCHDn7Yialuy1iu4r5EmIYkXlKNqT99Ciw+W0mDqWoR6HWMZlFP3hw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0
@@ -2389,8 +2389,8 @@ packages:
     resolution: {integrity: sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-member-expression-to-functions@7.27.1':
-    resolution: {integrity: sha512-E5chM8eWjTp/aNoVpcbfM7mLxu9XGLWYise2eBKGQomAk/Mb4XoxyqXTZbuTohbsl8EKqdlMhnDI2CCLfcs9wA==}
+  '@babel/helper-member-expression-to-functions@7.28.5':
+    resolution: {integrity: sha512-cwM7SBRZcPCLgl8a7cY0soT1SptSzAlMH39vwiRpOQkJlh53r5hdHwLSCZpQdVLT39sZt+CRpNwYG4Y2v77atg==}
     engines: {node: '>=6.9.0'}
 
   '@babel/helper-module-imports@7.27.1':
@@ -2431,8 +2431,8 @@ packages:
     resolution: {integrity: sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-validator-identifier@7.27.1':
-    resolution: {integrity: sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==}
+  '@babel/helper-validator-identifier@7.28.5':
+    resolution: {integrity: sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==}
     engines: {node: '>=6.9.0'}
 
   '@babel/helper-validator-option@7.27.1':
@@ -2447,13 +2447,13 @@ packages:
     resolution: {integrity: sha512-HFN59MmQXGHVyYadKLVumYsA9dBFun/ldYxipEjzA4196jpLZd8UjEEBLkbEkvfYreDqJhZxYAWFPtrfhNpj4w==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/parser@7.28.4':
-    resolution: {integrity: sha512-yZbBqeM6TkpP9du/I2pUZnJsRMGGvOuIrhjzC1AwHwW+6he4mni6Bp/m8ijn0iOuZuPI2BfkCoSRunpyjnrQKg==}
+  '@babel/parser@7.28.5':
+    resolution: {integrity: sha512-KKBU1VGYR7ORr3At5HAtUQ+TV3SzRCXmA/8OdDZiLDBIZxVyzXuztPjfLd3BV1PRAQGCMWWSHYhL0F8d5uHBDQ==}
     engines: {node: '>=6.0.0'}
     hasBin: true
 
-  '@babel/plugin-bugfix-firefox-class-in-computed-class-key@7.27.1':
-    resolution: {integrity: sha512-QPG3C9cCVRQLxAVwmefEmwdTanECuUBMQZ/ym5kiw3XKCGA7qkuQLcjWWHcrD/GKbn/WmJwaezfuuAOcyKlRPA==}
+  '@babel/plugin-bugfix-firefox-class-in-computed-class-key@7.28.5':
+    resolution: {integrity: sha512-87GDMS3tsmMSi/3bWOte1UblL+YUTFMV8SZPZ2eSEL17s74Cw/l63rR6NmGVKMYW2GYi85nE+/d6Hw5N0bEk2Q==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0
@@ -2559,8 +2559,8 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-block-scoping@7.28.4':
-    resolution: {integrity: sha512-1yxmvN0MJHOhPVmAsmoW5liWwoILobu/d/ShymZmj867bAdxGbehIrew1DuLpw2Ukv+qDSSPQdYW1dLNE7t11A==}
+  '@babel/plugin-transform-block-scoping@7.28.5':
+    resolution: {integrity: sha512-45DmULpySVvmq9Pj3X9B+62Xe+DJGov27QravQJU1LLcapR6/10i+gYVAucGGJpHBp5mYxIMK4nDAT/QDLr47g==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
@@ -2589,8 +2589,8 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-destructuring@7.28.0':
-    resolution: {integrity: sha512-v1nrSMBiKcodhsyJ4Gf+Z0U/yawmJDBOTpEB3mcQY52r9RIyPneGyAS/yM6seP/8I+mWI3elOMtT5dB8GJVs+A==}
+  '@babel/plugin-transform-destructuring@7.28.5':
+    resolution: {integrity: sha512-Kl9Bc6D0zTUcFUvkNuQh4eGXPKKNDOJQXVyyM4ZAQPMveniJdxi8XMJwLo+xSoW3MIq81bD33lcUe9kZpl0MCw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
@@ -2625,8 +2625,8 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-exponentiation-operator@7.27.1':
-    resolution: {integrity: sha512-uspvXnhHvGKf2r4VVtBpeFnuDWsJLQ6MF6lGJLC89jBR1uoVeqM416AZtTuhTezOfgHicpJQmoD5YUakO/YmXQ==}
+  '@babel/plugin-transform-exponentiation-operator@7.28.5':
+    resolution: {integrity: sha512-D4WIMaFtwa2NizOp+dnoFjRez/ClKiC2BqqImwKd1X28nqBtZEyCYJ2ozQrrzlxAFrcrjxo39S6khe9RNDlGzw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
@@ -2661,8 +2661,8 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-logical-assignment-operators@7.27.1':
-    resolution: {integrity: sha512-SJvDs5dXxiae4FbSL1aBJlG4wvl594N6YEVVn9e3JGulwioy6z3oPjx/sQBO3Y4NwUu5HNix6KJ3wBZoewcdbw==}
+  '@babel/plugin-transform-logical-assignment-operators@7.28.5':
+    resolution: {integrity: sha512-axUuqnUTBuXyHGcJEVVh9pORaN6wC5bYfE7FGzPiaWa3syib9m7g+/IT/4VgCOe2Upef43PHzeAvcrVek6QuuA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
@@ -2685,8 +2685,8 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-modules-systemjs@7.27.1':
-    resolution: {integrity: sha512-w5N1XzsRbc0PQStASMksmUeqECuzKuTJer7kFagK8AXgpCMkeDMO5S+aaFb7A51ZYDF7XI34qsTX+fkHiIm5yA==}
+  '@babel/plugin-transform-modules-systemjs@7.28.5':
+    resolution: {integrity: sha512-vn5Jma98LCOeBy/KpeQhXcV2WZgaRUtjwQmjoBuLNlOmkg0fB5pdvYVeWRYI69wWKwK2cD1QbMiUQnoujWvrew==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
@@ -2739,8 +2739,8 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-optional-chaining@7.27.1':
-    resolution: {integrity: sha512-BQmKPPIuc8EkZgNKsv0X4bPmOoayeu4F1YCwx2/CfmDSXDbp7GnzlUH+/ul5VGfRg1AoFPsrIThlEBj2xb4CAg==}
+  '@babel/plugin-transform-optional-chaining@7.28.5':
+    resolution: {integrity: sha512-N6fut9IZlPnjPwgiQkXNhb+cT8wQKFlJNqcZkWlcTqkcqx6/kU4ynGmLFoa4LViBSirn05YAwk+sQBbPfxtYzQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
@@ -2817,8 +2817,8 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-typescript@7.28.0':
-    resolution: {integrity: sha512-4AEiDEBPIZvLQaWlc9liCavE0xRM0dNca41WtBeM3jgFptfUOSG9z0uteLhq6+3rq+WB6jIvUwKDTpXEHPJ2Vg==}
+  '@babel/plugin-transform-typescript@7.28.5':
+    resolution: {integrity: sha512-x2Qa+v/CuEoX7Dr31iAfr0IhInrVOWZU/2vJMJ00FOR/2nM0BcBEclpaf9sWCDc+v5e9dMrhSH8/atq/kX7+bA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
@@ -2847,8 +2847,8 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0
 
-  '@babel/preset-env@7.28.3':
-    resolution: {integrity: sha512-ROiDcM+GbYVPYBOeCR6uBXKkQpBExLl8k9HO1ygXEyds39j+vCCsjmj7S8GOniZQlEs81QlkdJZe76IpLSiqpg==}
+  '@babel/preset-env@7.28.5':
+    resolution: {integrity: sha512-S36mOoi1Sb6Fz98fBfE+UZSpYw5mJm0NUHtIKrOuNcqeFauy1J6dIvXm2KRVKobOSaGq4t/hBXdN4HGU3wL9Wg==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
@@ -2858,8 +2858,8 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0 || ^8.0.0-0 <8.0.0
 
-  '@babel/preset-typescript@7.27.1':
-    resolution: {integrity: sha512-l7WfQfX0WK4M0v2RudjuQK4u99BS6yLHYEmdtVPP7lKV013zr9DygFuWNlnbvQ9LR+LS0Egz/XAvGx5U9MX0fQ==}
+  '@babel/preset-typescript@7.28.5':
+    resolution: {integrity: sha512-+bQy5WOI2V6LJZpPVxY+yp66XdZ2yifu0Mc1aP5CQKgjn4QM5IN2i5fAZ4xKop47pr8rpVhiAeu+nDQa12C8+g==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
@@ -2876,12 +2876,12 @@ packages:
     resolution: {integrity: sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/traverse@7.28.4':
-    resolution: {integrity: sha512-YEzuboP2qvQavAcjgQNVgsvHIDv6ZpwXvcvjmyySP2DIMuByS/6ioU5G9pYrWHM6T2YDfc7xga9iNzYOs12CFQ==}
+  '@babel/traverse@7.28.5':
+    resolution: {integrity: sha512-TCCj4t55U90khlYkVV/0TfkJkAkUg3jZFA3Neb7unZT8CPok7iiRfaX0F+WnqWqt7OxhOn0uBKXCw4lbL8W0aQ==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/types@7.28.4':
-    resolution: {integrity: sha512-bkFqkLhh3pMBUQQkpVgWDWq/lqzc2678eUyDlTBhRqhCHFguYYGM0Efga7tYk4TogG/3x0EEl66/OQ+WGbWB/Q==}
+  '@babel/types@7.28.5':
+    resolution: {integrity: sha512-qQ5m48eI/MFLQ5PxQj4PFaprjyCTLI37ElWMmNs0K8Lk3dVeOdNpB3ks8jc7yM5CDmVC73eMVk/trk3fgmrUpA==}
     engines: {node: '>=6.9.0'}
 
   '@bpmn-io/cm-theme@0.1.0-alpha.2':
@@ -2909,21 +2909,24 @@ packages:
   '@bpmn-io/lezer-feel@1.9.0':
     resolution: {integrity: sha512-mV+pj+x0++9zT5/RkOOUNtkT2hpKpGWbXuFR8trJlvJeRe1dL/5yPal/RBcnk3z73tILK4kP6LzXelcsshQCEw==}
 
-  '@bpmn-io/properties-panel@3.33.0':
-    resolution: {integrity: sha512-I41JNpfX7zzKTOpmB84ETt8dnyE4OLDtzNmQBN6m3wEnfFw19VuBa7C0XXMtF/Us1zvy3yFx+dAH//Hgg9e0uQ==}
+  '@bpmn-io/properties-panel@3.33.2':
+    resolution: {integrity: sha512-8KgiKzJryfcxZmQb+ArL6zjWZ8N2o/vdWMWY01EOJrL/OmasCmxQU4lIE5GejgZ/EHoi92aVo8Ij+44uaRFGNw==}
 
   '@cacheable/memoize@2.0.3':
     resolution: {integrity: sha512-hl9wfQgpiydhQEIv7fkjEzTGE+tcosCXLKFDO707wYJ/78FVOlowb36djex5GdbSyeHnG62pomYLMuV/OT8Pbw==}
 
-  '@cacheable/memory@2.0.3':
-    resolution: {integrity: sha512-R3UKy/CKOyb1LZG/VRCTMcpiMDyLH7SH3JrraRdK6kf3GweWCOU3sgvE13W3TiDRbxnDKylzKJvhUAvWl9LQOA==}
+  '@cacheable/memory@2.0.4':
+    resolution: {integrity: sha512-cCmJKCKlT1t7hNBI1+gFCwmKFd9I4pS3zqBeNGXTSODnpa0EeDmORHY8oEMTuozfdg3cgsVh8ojLaPYb6eC7Cg==}
 
-  '@cacheable/utils@2.1.0':
-    resolution: {integrity: sha512-ZdxfOiaarMqMj+H7qwlt5EBKWaeGihSYVHdQv5lUsbn8MJJOTW82OIwirQ39U5tMZkNvy3bQE+ryzC+xTAb9/g==}
+  '@cacheable/utils@2.2.0':
+    resolution: {integrity: sha512-7xaQayO3msdVcxXLYcLU5wDqJBNdQcPPPHr6mdTEIQI7N7TbtSVVTpWOTfjyhg0L6AQwQdq7miKdWtTDBoBldQ==}
 
   '@camunda/feel-builtins@0.2.0':
     resolution: {integrity: sha512-Jusm8x3Onqze9E5Y0lGGdPj66bnFKLYNwDz+uG4otsEXgSL0FpF+koGHK48LkF9Jqo67KaP1y3zr2y/HIWRePw==}
 
+  '@carbon/icons@11.70.0':
+    resolution: {integrity: sha512-pw/u032VfP3UDcAr0SZzYJlfSmtiDkOHEgQSchmU9Z1g7CmpfQ7EWSW8ExcHm4DFdun8M3Z1QCkCyu0Hq+s1gg==}
+
   '@changesets/apply-release-plan@7.0.13':
     resolution: {integrity: sha512-BIW7bofD2yAWoE8H4V40FikC+1nNFEKBisMECccS16W1rt6qqhNTBDmIw5HaqmMgtLNz9e7oiALiEUuKrQ4oHg==}
 
@@ -2995,17 +2998,17 @@ packages:
     resolution: {integrity: sha512-+tv3z+SPp+gqTIcImN9o0hqE9xyfQjI1XD9pL6NuKjua9B1y7mNYv0S9cP+QEbA4ppVgGZEmKOvHX5G5Ei1CVA==}
     engines: {node: '>=18.0.0'}
 
-  '@codemirror/autocomplete@6.19.0':
-    resolution: {integrity: sha512-61Hfv3cF07XvUxNeC3E7jhG8XNi1Yom1G0lRC936oLnlF+jrbrv8rc/J98XlYzcsAoTVupfsf5fLej1aI8kyIg==}
+  '@codemirror/autocomplete@6.19.1':
+    resolution: {integrity: sha512-q6NenYkEy2fn9+JyjIxMWcNjzTL/IhwqfzOut1/G3PrIFkrbl4AL7Wkse5tLrQUUyqGoAKU5+Pi5jnnXxH5HGw==}
 
-  '@codemirror/commands@6.9.0':
-    resolution: {integrity: sha512-454TVgjhO6cMufsyyGN70rGIfJxJEjcqjBG2x2Y03Y/+Fm99d3O/Kv1QDYWuG6hvxsgmjXmBuATikIIYvERX+w==}
+  '@codemirror/commands@6.10.0':
+    resolution: {integrity: sha512-2xUIc5mHXQzT16JnyOFkh8PvfeXuIut3pslWGfsGOhxP/lpgRm9HOl/mpzLErgt5mXDovqA0d11P21gofRLb9w==}
 
   '@codemirror/language@6.11.3':
     resolution: {integrity: sha512-9HBM2XnwDj7fnu0551HkGdrUrrqmYq/WC5iv6nbY2WdicXdGbhR/gfbZOH73Aqj4351alY1+aoG9rCNfiwS1RA==}
 
-  '@codemirror/lint@6.9.0':
-    resolution: {integrity: sha512-wZxW+9XDytH3SKvS8cQzMyQCaaazH8XL1EMHleHe00wVzsv7NBQKVW2yzEHrRhmM7ZOhVdItPbvlRBvMp9ej7A==}
+  '@codemirror/lint@6.9.2':
+    resolution: {integrity: sha512-sv3DylBiIyi+xKwRCJAAsBZZZWo82shJ/RTMymLabAdtbkV5cSKwWDeCgtUq3v8flTaXS2y1kKkICuRYtUswyQ==}
 
   '@codemirror/state@6.5.2':
     resolution: {integrity: sha512-FVqsPqtPWKVVL3dPSxy8wEF/ymIEuVzF1PK3VbUgrxXpJUSHQWWZz4JMToquRxnkw+36LTamCZG2iua2Ptq0fA==}
@@ -3115,14 +3118,14 @@ packages:
   '@cspell/dict-aws@4.0.15':
     resolution: {integrity: sha512-aPY7VVR5Os4rz36EaqXBAEy14wR4Rqv+leCJ2Ug/Gd0IglJpM30LalF3e2eJChnjje3vWoEC0Rz3+e5gpZG+Kg==}
 
-  '@cspell/dict-bash@4.2.1':
-    resolution: {integrity: sha512-SBnzfAyEAZLI9KFS7DUG6Xc1vDFuLllY3jz0WHvmxe8/4xV3ufFE3fGxalTikc1VVeZgZmxYiABw4iGxVldYEg==}
+  '@cspell/dict-bash@4.2.2':
+    resolution: {integrity: sha512-kyWbwtX3TsCf5l49gGQIZkRLaB/P8g73GDRm41Zu8Mv51kjl2H7Au0TsEvHv7jzcsRLS6aUYaZv6Zsvk1fOz+Q==}
 
-  '@cspell/dict-companies@3.2.6':
-    resolution: {integrity: sha512-cVWBk4DSUOthCsgOsoB+5L5F1Wk8lWGHnw5de75YCKSjOEV8/6kskwwDrPTIHkoGVzpIzIIQ/OdXhYwa2G+16A==}
+  '@cspell/dict-companies@3.2.7':
+    resolution: {integrity: sha512-fEyr3LmpFKTaD0LcRhB4lfW1AmULYBqzg4gWAV0dQCv06l+TsA+JQ+3pZJbUcoaZirtgsgT3dL3RUjmGPhUH0A==}
 
-  '@cspell/dict-cpp@6.0.12':
-    resolution: {integrity: sha512-N4NsCTttVpMqQEYbf0VQwCj6np+pJESov0WieCN7R/0aByz4+MXEiDieWWisaiVi8LbKzs1mEj4ZTw5K/6O2UQ==}
+  '@cspell/dict-cpp@6.0.14':
+    resolution: {integrity: sha512-dkmpSwvVfVdtoZ4mW/CK2Ep1v8mJlp6uiKpMNbSMOdJl4kq28nQS4vKNIX3B2bJa0Ha5iHHu+1mNjiLeO3g7Xg==}
 
   '@cspell/dict-cryptocurrencies@5.0.5':
     resolution: {integrity: sha512-R68hYYF/rtlE6T/dsObStzN5QZw+0aQBinAXuWCVqwdS7YZo0X33vGMfChkHaiCo3Z2+bkegqHlqxZF4TD3rUA==}
@@ -3136,8 +3139,8 @@ packages:
   '@cspell/dict-dart@2.3.1':
     resolution: {integrity: sha512-xoiGnULEcWdodXI6EwVyqpZmpOoh8RA2Xk9BNdR7DLamV/QMvEYn8KJ7NlRiTSauJKPNkHHQ5EVHRM6sTS7jdg==}
 
-  '@cspell/dict-data-science@2.0.10':
-    resolution: {integrity: sha512-vZSsz7845ugW6mY65966Ki2bMS/ZnAZoTVvpuXQ07a2rYxJhUC+6WuBMD80hFLlKwjC5T/5Llv4F/VlB00swpw==}
+  '@cspell/dict-data-science@2.0.11':
+    resolution: {integrity: sha512-Dt+83nVCcF+dQyvFSaZjCKt1H5KbsVJFtH2X7VUfmIzQu8xCnV1fUmkhBzGJ+NiFs99Oy9JA6I9EjeqExzXk7g==}
 
   '@cspell/dict-django@4.1.5':
     resolution: {integrity: sha512-AvTWu99doU3T8ifoMYOMLW2CXKvyKLukPh1auOPwFGHzueWYvBBN+OxF8wF7XwjTBMMeRleVdLh3aWCDEX/ZWg==}
@@ -3151,14 +3154,14 @@ packages:
   '@cspell/dict-elixir@4.0.8':
     resolution: {integrity: sha512-CyfphrbMyl4Ms55Vzuj+mNmd693HjBFr9hvU+B2YbFEZprE5AG+EXLYTMRWrXbpds4AuZcvN3deM2XVB80BN/Q==}
 
-  '@cspell/dict-en-common-misspellings@2.1.6':
-    resolution: {integrity: sha512-xV9yryOqZizbSqxRS7kSVRrxVEyWHUqwdY56IuT7eAWGyTCJNmitXzXa4p+AnEbhL+AB2WLynGVSbNoUC3ceFA==}
+  '@cspell/dict-en-common-misspellings@2.1.8':
+    resolution: {integrity: sha512-vDsjRFPQGuAADAiitf82z9Mz3DcqKZi6V5hPAEIFkLLKjFVBcjUsSq59SfL59ElIFb76MtBO0BLifdEbBj+DoQ==}
 
   '@cspell/dict-en-gb@1.1.33':
     resolution: {integrity: sha512-tKSSUf9BJEV+GJQAYGw5e+ouhEe2ZXE620S7BLKe3ZmpnjlNG9JqlnaBhkIMxKnNFkLY2BP/EARzw31AZnOv4g==}
 
-  '@cspell/dict-en_us@4.4.20':
-    resolution: {integrity: sha512-acAlX967bkrLwRhSJ8KGBCBUITMOe8+smwsShjei431vTB6tU5ZID6XDxR9hH/kDxfdiRTXAE8vkT3WJAHnc1Q==}
+  '@cspell/dict-en_us@4.4.24':
+    resolution: {integrity: sha512-JE+/H2YicHJTneRmgH4GSI21rS+1yGZVl1jfOQgl8iHLC+yTTMtCvueNDMK94CgJACzYAoCsQB70MqiFJJfjLQ==}
 
   '@cspell/dict-filetypes@3.0.14':
     resolution: {integrity: sha512-KSXaSMYYNMLLdHEnju1DyRRH3eQWPRYRnOXpuHUdOh2jC44VgQoxyMU7oB3NAhDhZKBPCihabzECsAGFbdKfEA==}
@@ -3181,8 +3184,8 @@ packages:
   '@cspell/dict-git@3.0.7':
     resolution: {integrity: sha512-odOwVKgfxCQfiSb+nblQZc4ErXmnWEnv8XwkaI4sNJ7cNmojnvogYVeMqkXPjvfrgEcizEEA4URRD2Ms5PDk1w==}
 
-  '@cspell/dict-golang@6.0.23':
-    resolution: {integrity: sha512-oXqUh/9dDwcmVlfUF5bn3fYFqbUzC46lXFQmi5emB0vYsyQXdNWsqi6/yH3uE7bdRE21nP7Yo0mR1jjFNyLamg==}
+  '@cspell/dict-golang@6.0.24':
+    resolution: {integrity: sha512-rY7PlC3MsHozmjrZWi0HQPUl0BVCV0+mwK0rnMT7pOIXqOe4tWCYMULDIsEk4F0gbIxb5badd2dkCPDYjLnDgA==}
 
   '@cspell/dict-google@1.0.9':
     resolution: {integrity: sha512-biL65POqialY0i4g6crj7pR6JnBkbsPovB2WDYkj3H4TuC/QXv7Pu5pdPxeUJA6TSCHI7T5twsO4VSVyRxD9CA==}
@@ -3234,11 +3237,11 @@ packages:
   '@cspell/dict-node@5.0.8':
     resolution: {integrity: sha512-AirZcN2i84ynev3p2/1NCPEhnNsHKMz9zciTngGoqpdItUb2bDt1nJBjwlsrFI78GZRph/VaqTVFwYikmncpXg==}
 
-  '@cspell/dict-npm@5.2.18':
-    resolution: {integrity: sha512-uJV1T7y9ifFysO22XmxjU7y95c+02lfCZHNsTYHw2KOL6tLjc3XK/i0xt9iGLkPpcxwNJSCdu13UpjXZGqce/Q==}
+  '@cspell/dict-npm@5.2.20':
+    resolution: {integrity: sha512-tJRv1qEdW3f8fxK/D2huoqkSvM6ogz55hAt9RTdB7tZy57wio9Tkj+xfi2DIeOlmf6e94c6pNPZIC/o5rclMhw==}
 
-  '@cspell/dict-php@4.0.15':
-    resolution: {integrity: sha512-iepGB2gtToMWSTvybesn4/lUp4LwXcEm0s8vasJLP76WWVkq1zYjmeS+WAIzNgsuURyZ/9mGqhS0CWMuo74ODw==}
+  '@cspell/dict-php@4.1.0':
+    resolution: {integrity: sha512-dTDeabyOj7eFvn2Q4Za3uVXM2+SzeFMqX8ly2P0XTo4AzbCmI2hulFD/QIADwWmwiRrInbbf8cxwFHNIYrXl4w==}
 
   '@cspell/dict-powershell@5.0.15':
     resolution: {integrity: sha512-l4S5PAcvCFcVDMJShrYD0X6Huv9dcsQPlsVsBGbH38wvuN7gS7+GxZFAjTNxDmTY1wrNi1cCatSg6Pu2BW4rgg==}
@@ -3246,8 +3249,8 @@ packages:
   '@cspell/dict-public-licenses@2.0.15':
     resolution: {integrity: sha512-cJEOs901H13Pfy0fl4dCD1U+xpWIMaEPq8MeYU83FfDZvellAuSo4GqWCripfIqlhns/L6+UZEIJSOZnjgy7Wg==}
 
-  '@cspell/dict-python@4.2.20':
-    resolution: {integrity: sha512-c1wbfb3MDMSY4UTNdGnA18NkrcX6cMlYER0HSpGYh2jLK43gS1QL3j2B49qgnRYfcLUp4xgeA05vzCQsjGbwuQ==}
+  '@cspell/dict-python@4.2.21':
+    resolution: {integrity: sha512-M9OgwXWhpZqEZqKU2psB2DFsT8q5SwEahkQeIpNIRWIErjwG7I9yYhhfvPz6s5gMCMhhb3hqcPJTnmdgqGrQyg==}
 
   '@cspell/dict-r@2.1.1':
     resolution: {integrity: sha512-71Ka+yKfG4ZHEMEmDxc6+blFkeTTvgKbKAbwiwQAuKl3zpqs1Y0vUtwW2N4b3LgmSPhV3ODVY0y4m5ofqDuKMw==}
@@ -3261,11 +3264,11 @@ packages:
   '@cspell/dict-scala@5.0.8':
     resolution: {integrity: sha512-YdftVmumv8IZq9zu1gn2U7A4bfM2yj9Vaupydotyjuc+EEZZSqAafTpvW/jKLWji2TgybM1L2IhmV0s/Iv9BTw==}
 
-  '@cspell/dict-shell@1.1.1':
-    resolution: {integrity: sha512-T37oYxE7OV1x/1D4/13Y8JZGa1QgDCXV7AVt3HLXjn0Fe3TaNDvf5sU0fGnXKmBPqFFrHdpD3uutAQb1dlp15g==}
+  '@cspell/dict-shell@1.1.2':
+    resolution: {integrity: sha512-WqOUvnwcHK1X61wAfwyXq04cn7KYyskg90j4lLg3sGGKMW9Sq13hs91pqrjC44Q+lQLgCobrTkMDw9Wyl9nRFA==}
 
-  '@cspell/dict-software-terms@5.1.9':
-    resolution: {integrity: sha512-lpiSpS1iTF2n8barqVkPmhe5qXs5291IqcDUPr5ttFRxPMZ7pgrMUdvcdNUdkajymjDOyWfUNhdYXW7JndThZw==}
+  '@cspell/dict-software-terms@5.1.11':
+    resolution: {integrity: sha512-xwARdlp6o81BK7uNl4qR5CmLBXuc9xWyEeEwzeAw/8SkBdYheVQO6F1Fey2iqMRDT9LAb5Znbg83pJVpLjgBjg==}
 
   '@cspell/dict-sql@2.2.1':
     resolution: {integrity: sha512-qDHF8MpAYCf4pWU8NKbnVGzkoxMNrFqBHyG/dgrlic5EQiKANCLELYtGlX5auIMDLmTf1inA0eNtv74tyRJ/vg==}
@@ -3629,11 +3632,11 @@ packages:
     peerDependencies:
       vue: ^3.5.17
 
-  '@emnapi/core@1.6.0':
-    resolution: {integrity: sha512-zq/ay+9fNIJJtJiZxdTnXS20PllcYMX3OE23ESc4HK/bdYu3cOWYVhsOhVnXALfU/uqJIxn5NBPd9z4v+SfoSg==}
+  '@emnapi/core@1.7.0':
+    resolution: {integrity: sha512-pJdKGq/1iquWYtv1RRSljZklxHCOCAJFJrImO5ZLKPJVJlVUcs8yFwNQlqS0Lo8xT1VAXXTCZocF9n26FWEKsw==}
 
-  '@emnapi/runtime@1.6.0':
-    resolution: {integrity: sha512-obtUmAHTMjll499P+D9A3axeJFlhdjOWdKUNs/U6QIGT7V5RjcUW1xToAzjvmgTSQhDbYn/NwfTRoJcQ2rNBxA==}
+  '@emnapi/runtime@1.7.0':
+    resolution: {integrity: sha512-oAYoQnCYaQZKVS53Fq23ceWMRxq5EhQsE0x0RdQ55jT7wagMu5k+fS39v1fiSLrtrLQlXwVINenqhLMtTrV/1Q==}
 
   '@emnapi/wasi-threads@1.1.0':
     resolution: {integrity: sha512-WI0DdZ8xFSbgMjR1sFsKABJ/C5OnRrjT06JXbZKexJGrDuPTzZdDYfFlsgcCXCyf+suG5QU2e/y1Wo2V/OapLQ==}
@@ -3807,32 +3810,32 @@ packages:
     peerDependencies:
       eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
 
-  '@eslint-community/regexpp@4.12.1':
-    resolution: {integrity: sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ==}
+  '@eslint-community/regexpp@4.12.2':
+    resolution: {integrity: sha512-EriSTlt5OC9/7SXkRSCAhfSxxoSUgBm33OH+IkwbdpgoqsSsUg7y3uh+IICI/Qg4BBWr3U2i39RpmycbxMq4ew==}
     engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
 
   '@eslint/config-array@0.21.1':
     resolution: {integrity: sha512-aw1gNayWpdI/jSYVgzN5pL0cfzU02GT3NBpeT/DXbx1/1x7ZKxFPd9bwrzygx/qiwIQiJ1sw/zD8qY/kRvlGHA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@eslint/config-helpers@0.4.1':
-    resolution: {integrity: sha512-csZAzkNhsgwb0I/UAV6/RGFTbiakPCf0ZrGmrIxQpYvGZ00PhTkSnyKNolphgIvmnJeGw6rcGVEXfTzUnFuEvw==}
+  '@eslint/config-helpers@0.4.2':
+    resolution: {integrity: sha512-gBrxN88gOIf3R7ja5K9slwNayVcZgK6SOUORm2uBzTeIEfeVaIhOpCtTox3P6R7o2jLFwLFTLnC7kU/RGcYEgw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
   '@eslint/core@0.13.0':
     resolution: {integrity: sha512-yfkgDw1KR66rkT5A8ci4irzDysN7FRpq3ttJolR88OqQikAWqwA8j5VZyas+vjyBNFIJ7MfybJ9plMILI2UrCw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@eslint/core@0.16.0':
-    resolution: {integrity: sha512-nmC8/totwobIiFcGkDza3GIKfAw1+hLiYVrh3I1nIomQ8PEr5cxg34jnkmGawul/ep52wGRAcyeDCNtWKSOj4Q==}
+  '@eslint/core@0.17.0':
+    resolution: {integrity: sha512-yL/sLrpmtDaFEiUj1osRP4TI2MDz1AddJL+jZ7KSqvBuliN4xqYY54IfdN8qD8Toa6g1iloph1fxQNkjOxrrpQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
   '@eslint/eslintrc@3.3.1':
     resolution: {integrity: sha512-gtF186CXhIl1p4pJNGZw8Yc6RlshoePRvE0X91oPGb3vZ8pM3qOS9W9NGPat9LziaBV7XrJWGylNQXkGcnM3IQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@eslint/js@9.38.0':
-    resolution: {integrity: sha512-UZ1VpFvXf9J06YG9xQBdnzU+kthors6KjhMAl6f4gH4usHyh31rUf2DLGInT8RFYIReYXNSydgPY0V2LuWgl7A==}
+  '@eslint/js@9.39.1':
+    resolution: {integrity: sha512-S26Stp4zCy88tH94QbBv3XCuzRQiZ9yXofEILmglYTh/Ug/a9/umqvgFtYBAo3Lp0nsI/5/qH1CCrbdK3AP1Tw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
   '@eslint/object-schema@2.1.7':
@@ -3843,8 +3846,8 @@ packages:
     resolution: {integrity: sha512-ZAoA40rNMPwSm+AeHpCq8STiNAwzWLJuP8Xv4CHIc9wv/PSuExjMrmjfYNj682vW0OOiZ1HKxzvjQr9XZIisQA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@eslint/plugin-kit@0.4.0':
-    resolution: {integrity: sha512-sB5uyeq+dwCWyPi31B2gQlVlo+j5brPlWx4yZBrEaRo/nhdDE8Xke1gsGgtiBdaBTxuTkceLVuVt/pclrasb0A==}
+  '@eslint/plugin-kit@0.4.1':
+    resolution: {integrity: sha512-43/qtrDUokr7LJqoF2c3+RInu/t4zfrpYdoSDfYyhg52rwLV6TnOvdG4fXm7IkSB3wErkcmJS9iEhjVtOSEjjA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
   '@faker-js/faker@9.9.0':
@@ -3863,8 +3866,8 @@ packages:
   '@floating-ui/vue@1.1.9':
     resolution: {integrity: sha512-BfNqNW6KA83Nexspgb9DZuz578R7HT8MZw1CfK9I6Ah4QReNWEJsXWHN+SdmOVLNGmTPDi+fDT535Df5PzMLbQ==}
 
-  '@form-create/ant-design-vue@3.2.31':
-    resolution: {integrity: sha512-t2Hl3DcxS0BgzTrt8FQ0y9eHVOlFXp1D6cx4wE70mQHe43oQMK5oMSaYi4O9keb9F2SKANn/ozJh7DOOfAnVdg==}
+  '@form-create/ant-design-vue@3.2.32':
+    resolution: {integrity: sha512-0W4GDqbhwK14WiVZK6PvToIu2Ug21zMHIsC93w4gtOBQ1z19qCS28iRVaOppAZ7KbQ13uOdQyRi8vCzfsa0PmA==}
     peerDependencies:
       vue: ^3.5.17
 
@@ -3909,8 +3912,8 @@ packages:
   '@form-create/component-wangeditor@3.2.14':
     resolution: {integrity: sha512-N/U/hFBdBu2OIguxoKe1Kslq5fW6XmtyhKDImLfKLn1xI6X5WUtt3r7QTaUPcVUl2vntpM9wJ/FBdG17RzF/Dg==}
 
-  '@form-create/core@3.2.31':
-    resolution: {integrity: sha512-7WTHeQk2M8bWWuQXiLKdeUQ8i6eqcoP3m5KjgcekLIcMKPb48yVqULRcAujK3jGZgLHm5IW4KVt7nw0oxWP7iQ==}
+  '@form-create/core@3.2.32':
+    resolution: {integrity: sha512-1nXMBqtE0v1jTd7vQ5V5Rm6iLzlwnDiUO/Xu/sIu5sMyWw60XX1MIbrDg3ou+0kUvVOk3cOpgckXxU1HZEuWTw==}
     peerDependencies:
       vue: ^3.5.17
 
@@ -3919,8 +3922,8 @@ packages:
     peerDependencies:
       vue: ^3.5.17
 
-  '@form-create/element-ui@3.2.31':
-    resolution: {integrity: sha512-/dyd5pSRu0GnF27LluK62dLuNNTortVNOizQ7qk3mdfUoaf1Gsx4yAzvU9/SQNtyKvvQt0AH5blxc03CWFddhA==}
+  '@form-create/element-ui@3.2.32':
+    resolution: {integrity: sha512-n3O4gcGTGKrF+oFTLs3vMO/MivLSQdYds096OAYKR8DULTNyqQB6eMsPOIE8u8FqY2kT7C+eh/5TwbBElYwSvw==}
     peerDependencies:
       vue: ^3.5.17
 
@@ -3946,20 +3949,24 @@ packages:
     resolution: {integrity: sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==}
     engines: {node: '>=18.18'}
 
-  '@iconify-json/logos@1.2.9':
-    resolution: {integrity: sha512-G6VCdFnwZcrT6Eveq3m43oJfLw/CX8plwFcE+2jgv3fiGB64pTmnU7Yd1MNZ/eA+/Re2iEDhuCfSNOWTHwwK8w==}
+  '@ibm/telemetry-js@1.10.2':
+    resolution: {integrity: sha512-F8+/NNUwtm8BuFz18O9KPvIFTFDo8GUSoyhPxPjEpk7nEyEzWGfhIiEPhL00B2NdHRLDSljh3AiCfSnL/tutiQ==}
+    hasBin: true
 
-  '@iconify-json/octicon@1.2.16':
-    resolution: {integrity: sha512-lVf3SbtRK0kNLAK7PxBoiyNGRZVdKpi+9y2/DXv8nWeFgBhU/ctK8D1s4wd0FNp1ZMyrh7K2MXmbnENcDOIUhA==}
+  '@iconify-json/logos@1.2.10':
+    resolution: {integrity: sha512-qxaXKJ6fu8jzTMPQdHtNxlfx6tBQ0jXRbHZIYy5Ilh8Lx9US9FsAdzZWUR8MXV8PnWTKGDFO4ZZee9VwerCyMA==}
 
-  '@iconify-json/simple-icons@1.2.55':
-    resolution: {integrity: sha512-9vc04pmup/zcef8hDypWU8nMwMaFVkWuUzWkxyL++DVp5AA8baoJHK6RyKN1v+cvfR2agxkUb053XVggzFFkTA==}
+  '@iconify-json/octicon@1.2.17':
+    resolution: {integrity: sha512-U/mznjeCeZzuqpP25zWGcF4amLaYnNLs9sTN2hYALa+28n33KUXj/XjLmpAjIUvsyvn91jxfwdxSE79HfM4jCg==}
 
-  '@iconify-json/vscode-icons@1.2.32':
-    resolution: {integrity: sha512-UzZmL6hF02YGu/qEbpskEVnstlNJG+c+0PNzNYTIBf/dXylWHLUVufhOXqAzuGRjkUZ2q7rPpOEwLUPkhkFHUA==}
+  '@iconify-json/simple-icons@1.2.57':
+    resolution: {integrity: sha512-/yWbO502M6WfvmcV5OjEgA4uoPN/76nrn7Hri/8g9L4GiNQ6VMgXWE9vFp4tDsmGMAe4ZCov3NbH6vJCgXZ1hA==}
 
-  '@iconify/json@2.2.398':
-    resolution: {integrity: sha512-SEUDjkyAenAKMd5hDfzNzeObZw+KgQdIHaOuWA4yv89qSf2s0dJ7L1iXhRjtEZxFnuXQ2D67uFiHmE+90jvDGQ==}
+  '@iconify-json/vscode-icons@1.2.33':
+    resolution: {integrity: sha512-2lKDybGxXXeLeeqeNT2YVDYXs5va0YMHf06w3GemS22j/0CCTpKwKDK7REaibsCq3bRV8qX0RJDM4AbREE7L+w==}
+
+  '@iconify/json@2.2.404':
+    resolution: {integrity: sha512-K11bUBMW7gb/PhzJNZvDDJDq3hEVXoJArsdbr+9LQQqd2TrWEd5+PtctNcfJLu4epgjwDppaLJnN6AEPI1BL9w==}
 
   '@iconify/tailwind@1.2.0':
     resolution: {integrity: sha512-KgpIHWOTcRYw1XcoUqyNSrmYyfLLqZYu3AmP8zdfLk0F5TqRO8YerhlvlQmGfn7rJXgPeZN569xPAJnJ53zZxA==}
@@ -4083,8 +4090,8 @@ packages:
   '@jridgewell/trace-mapping@0.3.31':
     resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
 
-  '@jspm/generator@2.7.4':
-    resolution: {integrity: sha512-DmAERvcXD0suJ4EXuoX7jCj1Tig02FnUrt280bwMs/A1ir1Dwm0Q6WRNtwh5Bw/gdVKoP3mjuonLAEYZXqwh7A==}
+  '@jspm/generator@2.7.6':
+    resolution: {integrity: sha512-rAUFW/+7kORaUngC+jevgK00mzD30wC4tErjneVZ4LDHuUYa44OQ/o78Hd3pYlf+tHocMyW7rQD52pt8jhW6lA==}
 
   '@jspm/import-map@1.2.2':
     resolution: {integrity: sha512-QrM7+lkgVE8t9NZSm9fDSzheguEOVCOxueKxSwgoOt7yUWesWKDFmmL9bQFURl4IqMcpPz7VV2Tvw9s9emaJzQ==}
@@ -4104,14 +4111,14 @@ packages:
   '@lezer/common@1.3.0':
     resolution: {integrity: sha512-L9X8uHCYU310o99L3/MpJKYxPzXPOS7S0NmBaM7UO/x2Kb2WbmMLSkfvdr1KxRIFYOpbY0Jhn7CfLSUDzL8arQ==}
 
-  '@lezer/highlight@1.2.2':
-    resolution: {integrity: sha512-z8TQwaBXXQIvG6i2g3e9cgMwUUXu9Ib7jo2qRRggdhwKpM56Dw3PM3wmexn+EGaaOZ7az0K7sjc3/gcGW7sz7A==}
+  '@lezer/highlight@1.2.3':
+    resolution: {integrity: sha512-qXdH7UqTvGfdVBINrgKhDsVTJTxactNNxLk7+UMwZhU13lMHaOBlJe9Vqp907ya56Y3+ed2tlqzys7jDkTmW0g==}
 
-  '@lezer/lr@1.4.2':
-    resolution: {integrity: sha512-pu0K1jCIdnQ12aWNaAVU5bzi7Bd1w54J3ECgANPmYLtQKP0HBj2cE/5coBD66MT10xbtIuUr7tg0Shbsvk0mDA==}
+  '@lezer/lr@1.4.3':
+    resolution: {integrity: sha512-yenN5SqAxAPv/qMnpWW0AT7l+SxVrgG+u0tNsRQWqbrz66HIl8DnEbBObvy21J5K7+I1v7gsAnlE2VQ5yYVSeA==}
 
-  '@lezer/markdown@1.5.1':
-    resolution: {integrity: sha512-F3ZFnIfNAOy/jPSk6Q0e3bs7e9grfK/n5zerkKoc5COH6Guy3Zb0vrJwXzdck79K16goBhYBRAvhf+ksqe0cMg==}
+  '@lezer/markdown@1.6.0':
+    resolution: {integrity: sha512-AXb98u3M6BEzTnreBnGtQaF7xFTiMA92Dsy5tqEjpacbjRxDSFdN4bKJo9uvU4cEEOS7D2B9MT7kvDgOEIzJSw==}
 
   '@manypkg/find-root@1.1.0':
     resolution: {integrity: sha512-mki5uBvhHzO8kYYix/WRy2WX8S3B5wdVSc9D6KcU5lQNglP2yt58/VfLuAK49glRXChosY8ap2oJ1qgma3GUVA==}
@@ -4139,11 +4146,11 @@ packages:
   '@marijn/find-cluster-break@1.0.2':
     resolution: {integrity: sha512-l0h88YhZFyKdXIFNfSWpyjStDjGHwZ/U7iobcK1cQQD8sejsONdQtTVU+1wVN1PBw40PiiHB1vA5S7VTfQiP9g==}
 
-  '@microsoft/api-extractor-model@7.31.2':
-    resolution: {integrity: sha512-d0WwxwBLZaHokTrOngqHVkQK59NlveV5RE4wEpjaybhSNmEK9N7KPCcT5n8JcpH6k5o6AhxG47g1km2D7BZw8Q==}
+  '@microsoft/api-extractor-model@7.31.3':
+    resolution: {integrity: sha512-dv4quQI46p0U03TCEpasUf6JrJL3qjMN7JUAobsPElxBv4xayYYvWW9aPpfYV+Jx6hqUcVaLVOeV7+5hxsyoFQ==}
 
-  '@microsoft/api-extractor@7.53.2':
-    resolution: {integrity: sha512-hG3+wJY6aZlkQhGpUbhq1C5F1uJLsmDjrwVea+WT18RbD1XtIGn/c4uyMF7gdXLjLNwErB47hnRk9QNjpEHUWA==}
+  '@microsoft/api-extractor@7.54.0':
+    resolution: {integrity: sha512-t0SEcbVUPy4yAVykPafTNWktBg728X6p9t8qCuGDsYr1/lz2VQFihYDP2CnBFSArP5vwJPcvxktoKVSqH326cA==}
     hasBin: true
 
   '@microsoft/fetch-event-source@2.0.1':
@@ -4185,8 +4192,8 @@ packages:
     resolution: {integrity: sha512-/xGlezI6xfGO9NwuJlnwz/K14qD1kCSAGtacBHnGzeAIuJGazcp45KP5NuyARXoKb7cwulAGWVsbeSxdG/cb0Q==}
     engines: {node: ^18.17.0 || >=20.5.0}
 
-  '@nuxt/kit@3.19.3':
-    resolution: {integrity: sha512-ze46EW5xW+UxDvinvPkYt2MzR355Az1lA3bpX8KDialgnCwr+IbkBij/udbUEC6ZFbidPkfK1eKl4ESN7gMY+w==}
+  '@nuxt/kit@3.20.0':
+    resolution: {integrity: sha512-EoF1Gf0SPj9vxgAIcGEH+a4PRLC7Dwsy21K6f5+POzylT8DgssN8zL5pwXC+X7OcfzBrwYFh7mM7phvh7ubgeg==}
     engines: {node: '>=18.12.0'}
 
   '@one-ini/wasm@0.1.1':
@@ -4336,8 +4343,8 @@ packages:
   '@poppinss/colors@4.1.5':
     resolution: {integrity: sha512-FvdDqtcRCtz6hThExcFOgW0cWX+xwSMWcRuQe5ZEb2m7cVQOAVZOIMt+/v9RxGiD9/OY16qJBXK4CVKWAPalBw==}
 
-  '@poppinss/dumper@0.6.4':
-    resolution: {integrity: sha512-iG0TIdqv8xJ3Lt9O8DrPRxw1MRLjNpoqiSGU03P/wNLP/s0ra0udPJ1J2Tx5M0J3H/cVyEgpbn8xUKRY9j59kQ==}
+  '@poppinss/dumper@0.6.5':
+    resolution: {integrity: sha512-NBdYIb90J7LfOI32dOewKI1r7wnkiH6m920puQ3qHUeZkxNkQiFnXVWoE6YtFSv6QOiPPf7ys6i+HWWecDz7sw==}
 
   '@poppinss/exception@1.2.2':
     resolution: {integrity: sha512-m7bpKCD4QMlFCjA/nKTs23fuvoVFoA83brRKmObCUNmi/9tVu8Ve3w4YQAnJu4q3Tjf5fr685HYIC/IA2zHRSg==}
@@ -4349,8 +4356,8 @@ packages:
   '@rolldown/pluginutils@1.0.0-beta.29':
     resolution: {integrity: sha512-NIJgOsMjbxAXvoGq/X0gD7VPMQ8j9g0BiDaNjVNVjvl+iKXxL3Jre0v31RmBYeLEmkbj2s02v8vFTbUXi5XS2Q==}
 
-  '@rolldown/pluginutils@1.0.0-beta.44':
-    resolution: {integrity: sha512-g6eW7Zwnr2c5RADIoqziHoVs6b3W5QTQ4+qbpfjbkMJ9x+8Og211VW/oot2dj9dVwaK/UyC6Yo+02gV+wWQVNg==}
+  '@rolldown/pluginutils@1.0.0-beta.47':
+    resolution: {integrity: sha512-8QagwMH3kNCuzD8EWL8R2YPW5e4OrHNSAHRFDdmFqEwEaD/KcNKjVoumo+gP2vW5eKB2UPbM6vTYiGZX0ixLnw==}
 
   '@rollup/plugin-alias@5.1.1':
     resolution: {integrity: sha512-PR9zDb+rOzkRb2VD+EuKB7UC41vU5DIwZ5qqCpk0KJudcWAyi8rvYOhS7+L5aZCspw1stTViLgN5v6FF1p5cgQ==}
@@ -4372,8 +4379,8 @@ packages:
       '@types/babel__core':
         optional: true
 
-  '@rollup/plugin-commonjs@28.0.8':
-    resolution: {integrity: sha512-o1Ug9PxYsF61R7/NXO/GgMZZproLd/WH2XA53Tp9ppf6bU1lMlTtC/gUM6zM3mesi2E0rypk+PNtVrELREyWEQ==}
+  '@rollup/plugin-commonjs@28.0.9':
+    resolution: {integrity: sha512-PIR4/OHZ79romx0BVVll/PkwWpJ7e5lsqFa3gFfcrFPWwLXLV39JVUzQV9RKjWerE7B845Hqjj9VYlQeieZ2dA==}
     engines: {node: '>=16.0.0 || 14 >= 14.17'}
     peerDependencies:
       rollup: ^2.68.0||^3.0.0||^4.0.0
@@ -4422,8 +4429,8 @@ packages:
     peerDependencies:
       rollup: ^1.20.0 || ^2.0.0
 
-  '@rollup/plugin-replace@6.0.2':
-    resolution: {integrity: sha512-7QaYCf8bqF04dOy7w/eHmJeNExxTYwvKAmlSAH/EaWWUzbT0h5sbF6bktFoX/0F/0qwng5/dWFMyf3gzaM8DsQ==}
+  '@rollup/plugin-replace@6.0.3':
+    resolution: {integrity: sha512-J4RZarRvQAm5IF0/LwUUg+obsm+xZhYnbMXmXROyoSE1ATJe3oXSb9L5MMppdxP2ylNSjv6zFBwKYjcKMucVfA==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
       rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
@@ -4580,8 +4587,8 @@ packages:
     cpu: [x64]
     os: [win32]
 
-  '@rushstack/node-core-library@5.17.1':
-    resolution: {integrity: sha512-Mtcsa0aRJgYJOpeTe4qElLTRBlijNohdliq/xOhqce5rlzMIfLr73j9wUuj6GYPZPbG0S+is/RL2l0m/vnL55A==}
+  '@rushstack/node-core-library@5.18.0':
+    resolution: {integrity: sha512-XDebtBdw5S3SuZIt+Ra2NieT8kQ3D2Ow1HxhDQ/2soinswnOu9e7S69VSwTOLlQnx5mpWbONu+5JJjDxMAb6Fw==}
     peerDependencies:
       '@types/node': '*'
     peerDependenciesMeta:
@@ -4599,16 +4606,16 @@ packages:
   '@rushstack/rig-package@0.6.0':
     resolution: {integrity: sha512-ZQmfzsLE2+Y91GF15c65L/slMRVhF6Hycq04D4TwtdGaUAbIXXg9c5pKA5KFU7M4QMaihoobp9JJYpYcaY3zOw==}
 
-  '@rushstack/terminal@0.19.2':
-    resolution: {integrity: sha512-SJLC+6oUrJ0OOpuuwXxhktCTE3jeYVIwtvREdNhbcnVQrYGaDJpAoBgNVfw+VH0pTPpFLBqoPHsRRz7mj7WlbA==}
+  '@rushstack/terminal@0.19.3':
+    resolution: {integrity: sha512-0P8G18gK9STyO+CNBvkKPnWGMxESxecTYqOcikHOVIHXa9uAuTK+Fw8TJq2Gng1w7W6wTC9uPX6hGNvrMll2wA==}
     peerDependencies:
       '@types/node': '*'
     peerDependenciesMeta:
       '@types/node':
         optional: true
 
-  '@rushstack/ts-command-line@5.1.2':
-    resolution: {integrity: sha512-jn0EnSefYrkZDrBGd6KGuecL84LI06DgzL4hVQ46AUijNBt2nRU/ST4HhrfII/w91siCd1J/Okvxq/BS75Me/A==}
+  '@rushstack/ts-command-line@5.1.3':
+    resolution: {integrity: sha512-Kdv0k/BnnxIYFlMVC1IxrIS0oGQd4T4b7vKfx52Y2+wk2WZSDFIvedr7JrhenzSlm3ou5KwtoTGTGd5nbODRug==}
 
   '@sec-ant/readable-stream@0.4.1':
     resolution: {integrity: sha512-831qok9r2t8AlxLko40y2ebgSDhenenCatLVeW/uBtnHPyhHOvG0C7TvfgecV+wHzIm5KUICgzmVpWS+IMEAeg==}
@@ -4640,8 +4647,8 @@ packages:
   '@simonwep/pickr@1.8.2':
     resolution: {integrity: sha512-/l5w8BIkrpP6n1xsetx9MWPWlU6OblN5YgZZphxan0Tq4BByTCETL6lyIeY8lagalS2Nbt4F2W034KHLIiunKA==}
 
-  '@sindresorhus/is@7.1.0':
-    resolution: {integrity: sha512-7F/yz2IphV39hiS2zB4QYVkivrptHHh0K8qJJd9HhuWSdvf8AN7NpebW3CcDZDBQsUPMoDKWsY2WWgW7bqOcfA==}
+  '@sindresorhus/is@7.1.1':
+    resolution: {integrity: sha512-rO92VvpgMc3kfiTjGT52LEtJ8Yc5kCWhZjLQ3LwlA4pSgPpQO7bVpYXParOD8Jwf+cVQECJo3yP/4I8aZtUQTQ==}
     engines: {node: '>=18'}
 
   '@sindresorhus/merge-streams@2.3.0':
@@ -4652,8 +4659,8 @@ packages:
     resolution: {integrity: sha512-tlqY9xq5ukxTUZBmoOp+m61cqwQD5pHJtFY3Mn8CA8ps6yghLH/Hw8UPdqg4OLmFW3IFlcXnQNmo/dh8HzXYIQ==}
     engines: {node: '>=18'}
 
-  '@speed-highlight/core@1.2.7':
-    resolution: {integrity: sha512-0dxmVj4gxg3Jg879kvFS/msl4s9F3T9UXC1InxgOf7t5NvcPD97u/WTA5vL/IxWHMn7qSxBozqrnnE2wvl1m8g==}
+  '@speed-highlight/core@1.2.12':
+    resolution: {integrity: sha512-uilwrK0Ygyri5dToHYdZSjcvpS2ZwX0w5aSt3GCEN9hrjxWCoeV4Z2DTXuxjwbntaLQIEEAlCeNQss5SoHvAEA==}
 
   '@stylistic/stylelint-plugin@3.1.3':
     resolution: {integrity: sha512-85fsmzgsIVmyG3/GFrjuYj6Cz8rAM7IZiPiXCMiSMfoDOC1lOrzrXPDk24WqviAghnPqGpx8b0caK2PuewWGFg==}
@@ -4694,8 +4701,8 @@ packages:
     resolution: {integrity: sha512-Wo1iKt2b9OT7d+YGhvEPD3DXvPv2etTusIMhMUoG7fbhmxcXCtIjJDEygy91Y2JFlwGyjqiBPRozme7UD8hoqg==}
     engines: {node: '>=12'}
 
-  '@tanstack/query-core@5.90.5':
-    resolution: {integrity: sha512-wLamYp7FaDq6ZnNehypKI5fNvxHPfTYylE0m/ZpuuzJfJqhR5Pxg9gvGBHZx4n7J+V5Rg5mZxHHTlv25Zt5u+w==}
+  '@tanstack/query-core@5.90.7':
+    resolution: {integrity: sha512-6PN65csiuTNfBMXqQUxQhCNdtm1rV+9kC9YwWAIKcaxAauq3Wu7p18j3gQY3YIBJU70jT/wzCCZ2uqto/vQgiQ==}
 
   '@tanstack/store@0.7.7':
     resolution: {integrity: sha512-xa6pTan1bcaqYDS9BDpSiS63qa6EoDkPN9RsRaxHuDdVDNntzq3xNwR5YKTU/V3SkSyC9T4YVOPh2zRQN0nhIQ==}
@@ -4703,8 +4710,8 @@ packages:
   '@tanstack/virtual-core@3.13.12':
     resolution: {integrity: sha512-1YBOJfRHV4sXUmWsFSf5rQor4Ss82G8dQWLRbnk3GA4jeP8hQt1hxXh0tmflpC0dz3VgEv/1+qwPyLeWkQuPFA==}
 
-  '@tanstack/vue-query@5.90.5':
-    resolution: {integrity: sha512-bTEmgIb6o5BqkoJPNV7ZKKsDHjiVnNydORw1n6S/x0dppb3lTT5KFOotQ5PqZG3OQY+9AwA6RJJN3pEx+9j1Pg==}
+  '@tanstack/vue-query@5.90.7':
+    resolution: {integrity: sha512-2h0esebc2qVRVDge3gFArhss5+qn/Wb4abXuaEliSy+/xPWQMrEX7Ny0UKkCy1HcMZZjvfTtNRUfpYrx+vpipw==}
     peerDependencies:
       '@vue/composition-api': ^1.1.2
       vue: ^3.5.17
@@ -4726,11 +4733,11 @@ packages:
     peerDependencies:
       vue: ^3.5.17
 
-  '@tinyflow-ai/ui@1.1.7':
-    resolution: {integrity: sha512-aFI5dvYoKyp7sOBh0PXtta2wzzSwnfiMjPDEIGqRyR5nH1op8PLrD1Uw1OxAjV0iXoP+uvVWKZEtP8SVFJyXbw==}
+  '@tinyflow-ai/ui@1.1.9':
+    resolution: {integrity: sha512-Y20B5YKJJ9T6iw6aLPDIteziekq5+9rHrMKGco4hmwLrGfzAjbfdWAk9alMrQ/9MAdeXRxDsBXTSsqYQROy+DQ==}
 
-  '@tinyflow-ai/vue@1.1.7':
-    resolution: {integrity: sha512-zRuMlUU3mz6wIxsCmzk42PGBTH2g5OYBlEB00GJ2Z4AalhKIIWotTZE8h6ixNUEVRMog+XZ+fIIhjjgicjSLVA==}
+  '@tinyflow-ai/vue@1.1.9':
+    resolution: {integrity: sha512-6UHG5AqlimsOZOvjcLldtT/lk2VYNUO8wX6i7TRBZignDdJlUsJwWZHhtF27Crj3ol9mIGnXr7cPBe6Y9P4iFw==}
     peerDependencies:
       vue: ^3.5.17
 
@@ -4746,8 +4753,8 @@ packages:
   '@tybys/wasm-util@0.10.1':
     resolution: {integrity: sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg==}
 
-  '@types/archiver@6.0.3':
-    resolution: {integrity: sha512-a6wUll6k3zX6qs5KlxIggs1P1JcYJaTCx2gnlr+f0S1yd2DoaEwoIK10HmBaLnZwWneBz+JBm0dwcZu0zECBcQ==}
+  '@types/archiver@6.0.4':
+    resolution: {integrity: sha512-ULdQpARQ3sz9WH4nb98mJDYA0ft2A8C4f4fovvUcFwINa1cgGjY36JCAYuP5YypRq4mco1lJp1/7jEMS2oR0Hg==}
 
   '@types/argparse@1.0.38':
     resolution: {integrity: sha512-ebDJ9b0e702Yr7pWgB0jzm+CX4Srzz8RcXtLJDJB+BSccqMa36uyH/zUsSYao5+BD1ytv3k3rPYCq4mAE1hsXA==}
@@ -4758,11 +4765,11 @@ packages:
   '@types/chai@5.2.3':
     resolution: {integrity: sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA==}
 
-  '@types/codemirror@5.60.16':
-    resolution: {integrity: sha512-V/yHdamffSS075jit+fDxaOAmdP2liok8NSNJnAZfDJErzOheuygHZEhAJrfmk5TEyM32MhkZjwo/idX791yxw==}
+  '@types/codemirror@5.60.17':
+    resolution: {integrity: sha512-AZq2FIsUHVMlp7VSe2hTfl5w4pcUkoFkM3zVsRKsn1ca8CXRDYvnin04+HP2REkwsxemuHqvDofdlhUWNpbwfw==}
 
-  '@types/conventional-commits-parser@5.0.1':
-    resolution: {integrity: sha512-7uz5EHdzz2TqoMfV7ee61Egf5y6NkcO4FB/1iCCQnbeiI1F3xzv3vK5dBCXUCLQgGYS+mUeigK1iKQzvED+QnQ==}
+  '@types/conventional-commits-parser@5.0.2':
+    resolution: {integrity: sha512-BgT2szDXnVypgpNxOK8aL5SGjUdaQbC++WZNjF1Qge3Og2+zhHj+RWhmehLhYyvQwqAmvezruVfOf8+3m74W+g==}
 
   '@types/crypto-js@4.2.2':
     resolution: {integrity: sha512-sDOLlVbHhXpAUAL0YHDUUwDZf3iN4Bwi4W6a0W0b+QcAezUbRtH4FVb+9J4h+XFPW7l/gQ9F8qC7P+Ec4k8QVQ==}
@@ -4932,11 +4939,8 @@ packages:
   '@types/node@12.20.55':
     resolution: {integrity: sha512-J8xLz7q2OFulZ2cyGTLE1TbbZcjpno7FaN6zdJNrgAdrJ+DZzh/uFR6YrTb4C+nXakvud8Q4+rbhoIWlYQbUFQ==}
 
-  '@types/node@22.18.12':
-    resolution: {integrity: sha512-BICHQ67iqxQGFSzfCFTT7MRQ5XcBjG5aeKh5Ok38UBbPe5fxTyE+aHFxwVrGyr8GNlqFMLKD1D3P2K/1ks8tog==}
-
-  '@types/node@24.9.1':
-    resolution: {integrity: sha512-QoiaXANRkSXK6p0Duvt56W208du4P9Uye9hWLWgGMDTEoKPhuenzNcC4vGUmrNkiOKTlIrBoyNQYNpSwfEZXSg==}
+  '@types/node@24.10.0':
+    resolution: {integrity: sha512-qzQZRBqkFsYyaSWXuEHc2WR9c0a0CXwiE5FWUvn7ZM+vdy1uZLfCunD38UzhuB7YN/J11ndbDBcTmOdxJo9Q7A==}
 
   '@types/nprogress@0.2.3':
     resolution: {integrity: sha512-k7kRA033QNtC+gLc4VPlfnue58CM1iQLgn1IMAU8VPHGOj7oIHPp9UlhedEnD/Gl8evoCjwkZjlBORtZ3JByUA==}
@@ -4947,8 +4951,8 @@ packages:
   '@types/postcss-import@14.0.3':
     resolution: {integrity: sha512-raZhRVTf6Vw5+QbmQ7LOHSDML71A5rj4+EqDzAbrZPfxfoGzFxMHRCq16VlddGIZpHELw0BG4G0YE2ANkdZiIQ==}
 
-  '@types/qrcode@1.5.5':
-    resolution: {integrity: sha512-CdfBi/e3Qk+3Z/fXYShipBT13OJ2fDO2Q2w5CIP5anLTLIndQG9z6P1cnm+8zCWSpm5dnxMFd/uREtb0EXuQzg==}
+  '@types/qrcode@1.5.6':
+    resolution: {integrity: sha512-te7NQcV2BOvdj2b1hCAHzAoMNuj65kNBMz0KBaxM6c3VGBOhU0dURQKOtH8CFNI/dsKkwlv32p26qYQTWoB5bw==}
 
   '@types/qs@6.14.0':
     resolution: {integrity: sha512-eOunJqu0K1923aExK6y8p6fsihYEn/BYuQ4g0CxAAgFc4b/ZLN4CrsRZ55srTdqoiLzU2B2evC+apEIxprEzkQ==}
@@ -4959,8 +4963,8 @@ packages:
   '@types/resolve@1.20.2':
     resolution: {integrity: sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==}
 
-  '@types/sortablejs@1.15.8':
-    resolution: {integrity: sha512-b79830lW+RZfwaztgs1aVPgbasJ8e7AXtZYHTELNXZPsERt4ymJdjV4OccDbHQAvHrCcFpbF78jkm0R6h/pZVg==}
+  '@types/sortablejs@1.15.9':
+    resolution: {integrity: sha512-7HP+rZGE2p886PKV9c9OJzLBI6BBJu1O7lJGYnPyG3fS4/duUCcngkNCjsLwIMV+WMqANe3tt4irrXHSIe68OQ==}
 
   '@types/tern@0.23.9':
     resolution: {integrity: sha512-ypzHFE/wBzh+BlH6rrBgS5I/Z7RD21pGhZ2rltb/+ZrVM1awdZwjx7hE5XfuYgHWk9uvV5HLZN3SloevCAp3Bw==}
@@ -4977,29 +4981,26 @@ packages:
   '@types/web-bluetooth@0.0.16':
     resolution: {integrity: sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ==}
 
-  '@types/web-bluetooth@0.0.20':
-    resolution: {integrity: sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==}
-
   '@types/web-bluetooth@0.0.21':
     resolution: {integrity: sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA==}
 
-  '@typescript-eslint/eslint-plugin@8.46.2':
-    resolution: {integrity: sha512-ZGBMToy857/NIPaaCucIUQgqueOiq7HeAKkhlvqVV4lm089zUFW6ikRySx2v+cAhKeUCPuWVHeimyk6Dw1iY3w==}
+  '@typescript-eslint/eslint-plugin@8.46.3':
+    resolution: {integrity: sha512-sbaQ27XBUopBkRiuY/P9sWGOWUW4rl8fDoHIUmLpZd8uldsTyB4/Zg6bWTegPoTLnKj9Hqgn3QD6cjPNB32Odw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
-      '@typescript-eslint/parser': ^8.46.2
+      '@typescript-eslint/parser': ^8.46.3
       eslint: ^8.57.0 || ^9.0.0
       typescript: '>=4.8.4 <6.0.0'
 
-  '@typescript-eslint/parser@8.46.2':
-    resolution: {integrity: sha512-BnOroVl1SgrPLywqxyqdJ4l3S2MsKVLDVxZvjI1Eoe8ev2r3kGDo+PcMihNmDE+6/KjkTubSJnmqGZZjQSBq/g==}
+  '@typescript-eslint/parser@8.46.3':
+    resolution: {integrity: sha512-6m1I5RmHBGTnUGS113G04DMu3CpSdxCAU/UvtjNWL4Nuf3MW9tQhiJqRlHzChIkhy6kZSAQmc+I1bcGjE3yNKg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: ^8.57.0 || ^9.0.0
       typescript: '>=4.8.4 <6.0.0'
 
-  '@typescript-eslint/project-service@8.46.2':
-    resolution: {integrity: sha512-PULOLZ9iqwI7hXcmL4fVfIsBi6AN9YxRc0frbvmg8f+4hQAjQ5GYNKK0DIArNo+rOKmR/iBYwkpBmnIwin4wBg==}
+  '@typescript-eslint/project-service@8.46.3':
+    resolution: {integrity: sha512-Fz8yFXsp2wDFeUElO88S9n4w1I4CWDTXDqDr9gYvZgUpwXQqmZBr9+NTTql5R3J7+hrJZPdpiWaB9VNhAKYLuQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       typescript: '>=4.8.4 <6.0.0'
@@ -5008,18 +5009,18 @@ packages:
     resolution: {integrity: sha512-jjhdIE/FPF2B7Z1uzc6i3oWKbGcHb87Qw7AWj6jmEqNOfDFbJWtjt/XfwCpvNkpGWlcJaog5vTR+VV8+w9JflA==}
     engines: {node: ^18.18.0 || >=20.0.0}
 
-  '@typescript-eslint/scope-manager@8.46.2':
-    resolution: {integrity: sha512-LF4b/NmGvdWEHD2H4MsHD8ny6JpiVNDzrSZr3CsckEgCbAGZbYM4Cqxvi9L+WqDMT+51Ozy7lt2M+d0JLEuBqA==}
+  '@typescript-eslint/scope-manager@8.46.3':
+    resolution: {integrity: sha512-FCi7Y1zgrmxp3DfWfr+3m9ansUUFoy8dkEdeQSgA9gbm8DaHYvZCdkFRQrtKiedFf3Ha6VmoqoAaP68+i+22kg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@typescript-eslint/tsconfig-utils@8.46.2':
-    resolution: {integrity: sha512-a7QH6fw4S57+F5y2FIxxSDyi5M4UfGF+Jl1bCGd7+L4KsaUY80GsiF/t0UoRFDHAguKlBaACWJRmdrc6Xfkkag==}
+  '@typescript-eslint/tsconfig-utils@8.46.3':
+    resolution: {integrity: sha512-GLupljMniHNIROP0zE7nCcybptolcH8QZfXOpCfhQDAdwJ/ZTlcaBOYebSOZotpti/3HrHSw7D3PZm75gYFsOA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       typescript: '>=4.8.4 <6.0.0'
 
-  '@typescript-eslint/type-utils@8.46.2':
-    resolution: {integrity: sha512-HbPM4LbaAAt/DjxXaG9yiS9brOOz6fabal4uvUmaUYe6l3K1phQDMQKBRUrr06BQkxkvIZVVHttqiybM9nJsLA==}
+  '@typescript-eslint/type-utils@8.46.3':
+    resolution: {integrity: sha512-ZPCADbr+qfz3aiTTYNNkCbUt+cjNwI/5McyANNrFBpVxPt7GqpEYz5ZfdwuFyGUnJ9FdDXbGODUu6iRCI6XRXw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: ^8.57.0 || ^9.0.0
@@ -5029,8 +5030,8 @@ packages:
     resolution: {integrity: sha512-iZqi+Ds1y4EDYUtlOOC+aUmxnE9xS/yCigkjA7XpTKV6nCBd3Hp/PRGGmdwnfkV2ThMyYldP1wRpm/id99spTQ==}
     engines: {node: ^18.18.0 || >=20.0.0}
 
-  '@typescript-eslint/types@8.46.2':
-    resolution: {integrity: sha512-lNCWCbq7rpg7qDsQrd3D6NyWYu+gkTENkG5IKYhUIcxSb59SQC/hEQ+MrG4sTgBVghTonNWq42bA/d4yYumldQ==}
+  '@typescript-eslint/types@8.46.3':
+    resolution: {integrity: sha512-G7Ok9WN/ggW7e/tOf8TQYMaxgID3Iujn231hfi0Pc7ZheztIJVpO44ekY00b7akqc6nZcvregk0Jpah3kep6hA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
   '@typescript-eslint/typescript-estree@7.18.0':
@@ -5042,8 +5043,8 @@ packages:
       typescript:
         optional: true
 
-  '@typescript-eslint/typescript-estree@8.46.2':
-    resolution: {integrity: sha512-f7rW7LJ2b7Uh2EiQ+7sza6RDZnajbNbemn54Ob6fRwQbgcIn+GWfyuHDHRYgRoZu1P4AayVScrRW+YfbTvPQoQ==}
+  '@typescript-eslint/typescript-estree@8.46.3':
+    resolution: {integrity: sha512-f/NvtRjOm80BtNM5OQtlaBdM5BRFUv7gf381j9wygDNL+qOYSNOgtQ/DCndiYi80iIOv76QqaTmp4fa9hwI0OA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       typescript: '>=4.8.4 <6.0.0'
@@ -5054,8 +5055,8 @@ packages:
     peerDependencies:
       eslint: ^8.56.0
 
-  '@typescript-eslint/utils@8.46.2':
-    resolution: {integrity: sha512-sExxzucx0Tud5tE0XqR0lT0psBQvEpnpiul9XbGUB1QwpWJJAps1O/Z7hJxLGiZLBKMCutjTzDgmd1muEhBnVg==}
+  '@typescript-eslint/utils@8.46.3':
+    resolution: {integrity: sha512-VXw7qmdkucEx9WkmR3ld/u6VhRyKeiF1uxWwCy/iuNfokjJ7VhsgLSOTjsol8BunSw190zABzpwdNsze2Kpo4g==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: ^8.57.0 || ^9.0.0
@@ -5065,8 +5066,8 @@ packages:
     resolution: {integrity: sha512-cDF0/Gf81QpY3xYyJKDV14Zwdmid5+uuENhjH2EqFaF0ni+yAyq/LzMaIJdhNJXZI7uLzwIlA+V7oWoyn6Curg==}
     engines: {node: ^18.18.0 || >=20.0.0}
 
-  '@typescript-eslint/visitor-keys@8.46.2':
-    resolution: {integrity: sha512-tUFMXI4gxzzMXt4xpGJEsBsTox0XbNQ1y94EwlD/CuZwFcQP79xfQqMhau9HsRc/J0cAPA/HZt1dZPtGn9V/7w==}
+  '@typescript-eslint/visitor-keys@8.46.3':
+    resolution: {integrity: sha512-uk574k8IU0rOF/AjniX8qbLSGURJVUCeM5e4MIMKBFFi8weeiLrG1fyQejyLXQpRZbU/1BuQasleV/RfHC3hHg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
   '@ungap/structured-clone@1.3.0':
@@ -5289,17 +5290,17 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@vue/compiler-core@3.5.22':
-    resolution: {integrity: sha512-jQ0pFPmZwTEiRNSb+i9Ow/I/cHv2tXYqsnHKKyCQ08irI2kdF5qmYedmF8si8mA7zepUFmJ2hqzS8CQmNOWOkQ==}
+  '@vue/compiler-core@3.5.23':
+    resolution: {integrity: sha512-nW7THWj5HOp085ROk65LwaoxuzDsjIxr485F4iu63BoxsXoSqKqmsUUoP4A7Gl67DgIgi0zJ8JFgHfvny/74MA==}
 
-  '@vue/compiler-dom@3.5.22':
-    resolution: {integrity: sha512-W8RknzUM1BLkypvdz10OVsGxnMAuSIZs9Wdx1vzA3mL5fNMN15rhrSCLiTm6blWeACwUwizzPVqGJgOGBEN/hA==}
+  '@vue/compiler-dom@3.5.23':
+    resolution: {integrity: sha512-AT8RMw0vEzzzO0JU5gY0F6iCzaWUIh/aaRVordzMBKXRpoTllTT4kocHDssByPsvodNCfump/Lkdow2mT/O5KQ==}
 
-  '@vue/compiler-sfc@3.5.22':
-    resolution: {integrity: sha512-tbTR1zKGce4Lj+JLzFXDq36K4vcSZbJ1RBu8FxcDv1IGRz//Dh2EBqksyGVypz3kXpshIfWKGOCcqpSbyGWRJQ==}
+  '@vue/compiler-sfc@3.5.23':
+    resolution: {integrity: sha512-3QTEUo4qg7FtQwaDJa8ou1CUikx5WTtZlY61rRRDu3lK2ZKrGoAGG8mvDgOpDsQ4A1bez9s+WtBB6DS2KuFCPw==}
 
-  '@vue/compiler-ssr@3.5.22':
-    resolution: {integrity: sha512-GdgyLvg4R+7T8Nk2Mlighx7XGxq/fJf9jaVofc3IL0EPesTE86cP/8DD1lT3h1JeZr2ySBvyqKQJgbS54IX1Ww==}
+  '@vue/compiler-ssr@3.5.23':
+    resolution: {integrity: sha512-Hld2xphbMjXs9Q9WKxPf2EqmE+Rq/FEDnK/wUBtmYq74HCV4XDdSCheAaB823OQXIIFGq9ig/RbAZkF9s4U0Ow==}
 
   '@vue/compiler-vue2@2.7.16':
     resolution: {integrity: sha512-qYC3Psj9S/mfu9uVi5WvNZIzq+xnXMhOwbTFKKDD7b1lhpnn71jXSFdTQ+WsIEk0ONCd7VV2IMm7ONl6tbQ86A==}
@@ -5337,29 +5338,26 @@ packages:
       typescript:
         optional: true
 
-  '@vue/reactivity@3.5.22':
-    resolution: {integrity: sha512-f2Wux4v/Z2pqc9+4SmgZC1p73Z53fyD90NFWXiX9AKVnVBEvLFOWCEgJD3GdGnlxPZt01PSlfmLqbLYzY/Fw4A==}
+  '@vue/reactivity@3.5.23':
+    resolution: {integrity: sha512-ji5w0qvrPyBmBx5Ldv4QGNsw0phgRreEvjt0iUf1lei2Sm8//9ZAi78uM2ZjsT5gk0YZilLuoRCIMvtuZlHMJw==}
 
-  '@vue/runtime-core@3.5.22':
-    resolution: {integrity: sha512-EHo4W/eiYeAzRTN5PCextDUZ0dMs9I8mQ2Fy+OkzvRPUYQEyK9yAjbasrMCXbLNhF7P0OUyivLjIy0yc6VrLJQ==}
+  '@vue/runtime-core@3.5.23':
+    resolution: {integrity: sha512-LMB0S6/G7mFJcpQeQaZrbsthFbWrIX8FVTzu5x9U3Ec8YW5MY1CGAnBBHNj+TPOBu3pIbtPpjrXtcaN04X+aBw==}
 
-  '@vue/runtime-dom@3.5.22':
-    resolution: {integrity: sha512-Av60jsryAkI023PlN7LsqrfPvwfxOd2yAwtReCjeuugTJTkgrksYJJstg1e12qle0NarkfhfFu1ox2D+cQotww==}
+  '@vue/runtime-dom@3.5.23':
+    resolution: {integrity: sha512-r/PYc8W9THzEL0UExpTkV+d31zO+Jid/RMZIDG6aS/NekOEUHuCJkJgftySWZw7JTJO/+q9Kxkg8p+i7Q7Q+ew==}
 
-  '@vue/server-renderer@3.5.22':
-    resolution: {integrity: sha512-gXjo+ao0oHYTSswF+a3KRHZ1WszxIqO7u6XwNHqcqb9JfyIL/pbWrrh/xLv7jeDqla9u+LK7yfZKHih1e1RKAQ==}
+  '@vue/server-renderer@3.5.23':
+    resolution: {integrity: sha512-NiWZsNCsXA20/VufcrW5u+Trt/PyFlpMmxaB2KERYM8eZgUoKUjXxJQb9ypq+LZ0Sp3XHJGNBR8DkhRnkKAMUw==}
     peerDependencies:
       vue: ^3.5.17
 
-  '@vue/shared@3.5.22':
-    resolution: {integrity: sha512-F4yc6palwq3TT0u+FYf0Ns4Tfl9GRFURDN2gWG7L1ecIaS/4fCIuFOjMTnCyjsu/OK6vaDKLCrGAa+KvvH+h4w==}
+  '@vue/shared@3.5.23':
+    resolution: {integrity: sha512-0YZ1DYuC5o/YJPf6pFdt2KYxVGDxkDbH/1NYJnVJWUkzr8ituBEmFVQRNX2gCaAsFEjEDnLkWpgqlZA7htgS/g==}
 
   '@vue/test-utils@2.4.6':
     resolution: {integrity: sha512-FMxEjOpYNYiFe0GkaHsnJPXFHxQ6m4t8vI/ElPGpMWxZKpmRvQ33OIrvRXemy6yha03RxhOlQuy+gZMC3CQSow==}
 
-  '@vueuse/core@10.11.1':
-    resolution: {integrity: sha512-guoy26JQktXPcz+0n3GukWIy/JDNKti9v6VEMu6kV2sYBsWuGiTU8OWdg+ADfUbHg3/3DlqySDe7JmdHrktiww==}
-
   '@vueuse/core@12.8.2':
     resolution: {integrity: sha512-HbvCmZdzAu3VGi/pWYm5Ut+Kd9mn1ZHnn4L5G8kOQTPs/IwIAmJoBrmYk2ckLArgMXZj0AW3n5CAejLUO+PhdQ==}
 
@@ -5368,6 +5366,11 @@ packages:
     peerDependencies:
       vue: ^3.5.17
 
+  '@vueuse/core@14.0.0':
+    resolution: {integrity: sha512-d6tKRWkZE8IQElX2aHBxXOMD478fHIYV+Dzm2y9Ag122ICBpNKtGICiXKOhWU3L1kKdttDD9dCMS4bGP3jhCTQ==}
+    peerDependencies:
+      vue: ^3.5.17
+
   '@vueuse/core@9.13.0':
     resolution: {integrity: sha512-pujnclbeHWxxPRqXWmdkKV5OX4Wk4YeK7wusHqRwU0Q7EFusHoqNA/aPhB6KCh9hEqJkLAJo7bb0Lh9b+OIVzw==}
 
@@ -5412,8 +5415,8 @@ packages:
       universal-cookie:
         optional: true
 
-  '@vueuse/integrations@13.9.0':
-    resolution: {integrity: sha512-SDobKBbPIOe0cVL7QxMzGkuUGHvWTdihi9zOrrWaWUgFKe15cwEcwfWmgrcNzjT6kHnNmWuTajPHoIzUjYNYYQ==}
+  '@vueuse/integrations@14.0.0':
+    resolution: {integrity: sha512-5A0X7q9qyLtM3xyghq5nK/NEESf7cpcZlkQgXTMuW4JWiAMYxc1ImdhhGrk4negFBsq3ejvAlRmLdNrkcTzk1Q==}
     peerDependencies:
       async-validator: ^4
       axios: ^1
@@ -5454,15 +5457,15 @@ packages:
       universal-cookie:
         optional: true
 
-  '@vueuse/metadata@10.11.1':
-    resolution: {integrity: sha512-IGa5FXd003Ug1qAZmyE8wF3sJ81xGLSqTqtQ6jaVfkeZ4i5kS2mwQF61yhVqojRnenVew5PldLyRgvdl4YYuSw==}
-
   '@vueuse/metadata@12.8.2':
     resolution: {integrity: sha512-rAyLGEuoBJ/Il5AmFHiziCPdQzRt88VxR+Y/A/QhJ1EWtWqPBBAxTAFaSkviwEuOEZNtW8pvkPgoCZQ+HxqW1A==}
 
   '@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==}
 
@@ -5471,9 +5474,6 @@ packages:
     peerDependencies:
       vue: ^3.5.17
 
-  '@vueuse/shared@10.11.1':
-    resolution: {integrity: sha512-LHpC8711VFZlDaYUXEBbFBCQ7GS3dVU9mjOhhMhXP6txTV4EhYQg/KGnQuvt/sPAtoUKq7VVUnL6mVtFoL42sA==}
-
   '@vueuse/shared@12.8.2':
     resolution: {integrity: sha512-dznP38YzxZoNloI0qpEfpkms8knDtaoQ6Y/sfS0L7Yki4zh40LFHEhur0odJC6xTHG5dxWVPiUWBXn+wCG2s5w==}
 
@@ -5482,25 +5482,26 @@ packages:
     peerDependencies:
       vue: ^3.5.17
 
-  '@vueuse/shared@9.13.0':
-    resolution: {integrity: sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==}
-
-  '@vxe-ui/core@4.2.12':
-    resolution: {integrity: sha512-g6gNDykKrKLzxsDDFDYTD/6tWrV9AfSaU7WIlKCO67BSXgKDMaEVTsH7ZZ7fI5qkOO9DH1vo07kbacyBNx7gSQ==}
+  '@vueuse/shared@14.0.0':
+    resolution: {integrity: sha512-mTCA0uczBgurRlwVaQHfG0Ja7UdGe4g9mwffiJmvLiTtp1G4AQyIjej6si/k8c8pUwTfVpNufck+23gXptPAkw==}
     peerDependencies:
       vue: ^3.5.17
 
-  '@xmldom/xmldom@0.8.11':
-    resolution: {integrity: sha512-cQzWCtO6C8TQiYl1ruKNn2U6Ao4o4WBBcbL61yJl84x+j5sOWWFU9X7DpND8XZG3daDppSsigMdfAIl2upQBRw==}
-    engines: {node: '>=10.0.0'}
+  '@vueuse/shared@9.13.0':
+    resolution: {integrity: sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==}
 
-  '@xyflow/svelte@1.4.0':
-    resolution: {integrity: sha512-LXokbj1nEP8FROE/y9/xU11G4dM2+mGBiMmPU714Mmk+bGnyot+nZmyR8Y7OFBUahY1mnMNfeclLPJKGy3r7tA==}
+  '@vxe-ui/core@4.2.13':
+    resolution: {integrity: sha512-c+YJg3L8WuwftsTBnHw56knMERkKJSmB+GOqPENE+MBNKPvHTohEuSV5XcY7UAK25lXwkWNKZjEkbEzNZZS5ig==}
+    peerDependencies:
+      vue: ^3.5.17
+
+  '@xyflow/svelte@1.4.1':
+    resolution: {integrity: sha512-CAegVmLMpX64G6JnhiU7ezoIOY7aX88cf1fSOV8FutKdZNMxcJBykhvaXunOBf7jjDs9X887RH8Jgdl1rMwXww==}
     peerDependencies:
       svelte: ^5.25.0
 
-  '@xyflow/system@0.0.71':
-    resolution: {integrity: sha512-O2xIK84Uv1hH8qzeY94SKsj0R1n2jXHLsX6RZnM4x1Uc4oWiVbXDFucnkbFwhnQm3IIdAxkbgd2rEDp5oTRhhQ==}
+  '@xyflow/system@0.0.72':
+    resolution: {integrity: sha512-WBI5Aau0fXTXwxHPzceLNS6QdXggSWnGjDtj/gG669crApN8+SCmEtkBth1m7r6pStNo/5fI9McEi7Dk0ymCLA==}
 
   JSONStream@1.3.5:
     resolution: {integrity: sha512-E+iruNOY8VV9s4JEbe1aNEm6MiszPRr/UfcHMz0TQh1BXSxHK+ASV1R6W4HpjBhSeS+54PIsAMCBmwD06LLsqQ==}
@@ -5568,8 +5569,8 @@ packages:
   ajv@8.17.1:
     resolution: {integrity: sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==}
 
-  algoliasearch@5.40.1:
-    resolution: {integrity: sha512-iUNxcXUNg9085TJx0HJLjqtDE0r1RZ0GOGrt8KNQqQT5ugu8lZsHuMUYW/e0lHhq6xBvmktU9Bw4CXP9VQeKrg==}
+  algoliasearch@5.42.0:
+    resolution: {integrity: sha512-X5+PtWc9EJIPafT/cj8ZG+6IU3cjRRnlHGtqMHK/9gsiupQbAyYlH5y7qt/FtsAhfX5AICHffZy69ZAsVrxWkQ==}
     engines: {node: '>= 14.0.0'}
 
   alien-signals@0.4.14:
@@ -5585,8 +5586,8 @@ packages:
     resolution: {integrity: sha512-/6w/C21Pm1A7aZitlI5Ni/2J6FFQN8i1Cvz3kHABAAbw93v/NlvKdVOqz7CCWz/3iv/JplRSEEZ83XION15ovw==}
     engines: {node: '>=6'}
 
-  ansi-escapes@7.1.1:
-    resolution: {integrity: sha512-Zhl0ErHcSRUaVfGUeUdDuLgpkEo8KIFjB4Y9uAc46ScOpdDiU1Dbyplh7qWJeJ/ZHpbyMSM26+X3BySgnIz40Q==}
+  ansi-escapes@7.2.0:
+    resolution: {integrity: sha512-g6LhBsl+GBPRWGWsBtutpzBYuIIdBkLEvad5C/va/74Db018+5TZiyA26cZJAr3Rft5lprVqOIPxf5Vid6tqAw==}
     engines: {node: '>=18'}
 
   ansi-regex@5.0.1:
@@ -5708,8 +5709,8 @@ packages:
     resolution: {integrity: sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==}
     engines: {node: '>= 4.0.0'}
 
-  atomically@2.0.3:
-    resolution: {integrity: sha512-kU6FmrwZ3Lx7/7y3hPS5QnbJfaohcIul5fGqf7ok+4KklIEk9tJ0C2IQPdacSbVUWv6zVHXEBWoWd6NrVMT7Cw==}
+  atomically@2.1.0:
+    resolution: {integrity: sha512-+gDffFXRW6sl/HCwbta7zK4uNqbPjv4YJEAdz7Vu+FLQHe77eZ4bvbJGi4hE0QPeJlMYMA3piXEr1UL3dAwx7Q==}
 
   autolinker@3.16.2:
     resolution: {integrity: sha512-JiYl7j2Z19F9NdTmirENSUUIIL/9MytEWtmzhfmsKPCp9E+G35Y0UNCMoM9tFigxT59qSc8Ml2dlZXOCVTYwuA==}
@@ -5730,8 +5731,8 @@ packages:
     peerDependencies:
       axios: '>= 0.17.0'
 
-  axios@1.12.2:
-    resolution: {integrity: sha512-vMJzPewAlRyOgxV2dU0Cuz2O8zzzx9VYtbJOaBgXFeLc4IV/Eg50n4LowmehOOR61S8ZMpc2K5Sa7g6A4jfkUw==}
+  axios@1.13.2:
+    resolution: {integrity: sha512-VPk9ebNqPcy5lRGuSlKx752IlDatOjT9paPlm8A7yOuW2Fbvp4X3JznJtT4f0GzGLLiWE9W8onz51SqLYwzGaA==}
 
   axobject-query@4.1.0:
     resolution: {integrity: sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==}
@@ -5766,8 +5767,8 @@ packages:
   balanced-match@2.0.0:
     resolution: {integrity: sha512-1ugUSr8BHXRnK23KfuYS+gVMC3LB8QGH9W1iGtDPsNWoQbgtXSExkBu2aDR4epiGWZOjZsj6lDl/N/AqqTC3UA==}
 
-  bare-events@2.8.0:
-    resolution: {integrity: sha512-AOhh6Bg5QmFIXdViHbMc2tLDsBIRxdkIaIddPslJF9Z5De3APBScuqGP2uThXnIpqFrgoxMNC6km7uXNIMLHXA==}
+  bare-events@2.8.1:
+    resolution: {integrity: sha512-oxSAxTS1hRfnyit2CL5QpAOS5ixfBjj6ex3yTNvXyY/kE719jQ/IjuESJBK2w5v4wwQRAHGseVJXx9QBYOtFGQ==}
     peerDependencies:
       bare-abort-controller: '*'
     peerDependenciesMeta:
@@ -5777,8 +5778,8 @@ packages:
   base64-js@1.5.1:
     resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
 
-  baseline-browser-mapping@2.8.19:
-    resolution: {integrity: sha512-zoKGUdu6vb2jd3YOq0nnhEDQVbPcHhco3UImJrv5dSkvxTc2pl2WjOPsjZXDwPDSl5eghIMuY3R6J9NDKF3KcQ==}
+  baseline-browser-mapping@2.8.25:
+    resolution: {integrity: sha512-2NovHVesVF5TXefsGX1yzx1xgr7+m9JQenvz6FQY3qd+YXkKkYiv+vTCc7OriP9mcDZpTC5mAOYN4ocd29+erA==}
     hasBin: true
 
   benz-amr-recorder@1.1.5:
@@ -5804,8 +5805,8 @@ packages:
   bintrees@1.0.2:
     resolution: {integrity: sha512-VOMgTMwjAaUG580SXn3LacVgjurrbMme7ZZNYGSSV7mmtY6QQRh0Eg3pwIcntQ77DErK1L0NxkbetjcoXzVwKw==}
 
-  birpc@2.6.1:
-    resolution: {integrity: sha512-LPnFhlDpdSH6FJhJyn4M0kFO7vtQ5iPw24FnG0y21q09xC7e8+1LeR31S1MAIrDAHp4m7aas4bEkTDTvMAtebQ==}
+  birpc@2.7.0:
+    resolution: {integrity: sha512-tub/wFGH49vNCm0xraykcY3TcRgX/3JsALYq/Lwrtti+bTyFHkCUAWF5wgYoie8P41wYwig2mIKiqoocr1EkEQ==}
 
   boolbase@1.0.0:
     resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==}
@@ -5842,8 +5843,8 @@ packages:
     resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
     engines: {node: '>=8'}
 
-  browserslist@4.26.3:
-    resolution: {integrity: sha512-lAUU+02RFBuCKQPj/P6NgjlbCnLBMp4UtgTx7vNHd3XSIJF87s9a5rA3aH2yw3GS9DqZAUbOtZdCCiZeVRqt0w==}
+  browserslist@4.27.0:
+    resolution: {integrity: sha512-AXVQwdhot1eqLihwasPElhX2tAZiBjWdJ9i/Zcj2S6QYIjkx62OKSfnobkriB81C3l4w0rVy3Nt4jaTBltYEpw==}
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
     hasBin: true
 
@@ -5938,8 +5939,8 @@ packages:
   caniuse-api@3.0.0:
     resolution: {integrity: sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==}
 
-  caniuse-lite@1.0.30001751:
-    resolution: {integrity: sha512-A0QJhug0Ly64Ii3eIqHu5X51ebln3k4yTUkY1j8drqpWHVreg/VLijN48cZ1bYPiqOQuqpkIKnzr/Ul8V+p6Cw==}
+  caniuse-lite@1.0.30001754:
+    resolution: {integrity: sha512-x6OeBXueoAceOmotzx3PO4Zpt4rzpeIFsSr6AAePTZxSkXiYDUmpypEl7e2+8NCd9bD7bXjqyef8CJYPC1jfxg==}
 
   ccount@2.0.1:
     resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==}
@@ -5966,8 +5967,8 @@ packages:
   character-entities-legacy@3.0.0:
     resolution: {integrity: sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==}
 
-  chardet@2.1.0:
-    resolution: {integrity: sha512-bNFETTG/pM5ryzQ9Ad0lJOTa6HWD/YsScAR3EnCPZRPlQh77JocYktSHOUHelyhm8IARL+o4c4F1bP5KVOjiRA==}
+  chardet@2.1.1:
+    resolution: {integrity: sha512-PsezH1rqdV9VvyNhxxOW32/d75r01NY7TQCmOqomRo15ZSOKbpTFVsfjghxo6JloQUCGnH4k1LGu0R4yCLlWQQ==}
 
   check-error@2.1.1:
     resolution: {integrity: sha512-OAlb+T7V4Op9OwdkjmguYRqncdlx5JiofwOAUkmTF+jNdHwzTaTs4sRAGpzLF3oOz5xAyDGrPgeIDFQmDOTiJw==}
@@ -6217,10 +6218,6 @@ packages:
   cookie-es@2.0.0:
     resolution: {integrity: sha512-RAj4E421UYRgqokKUmotqAwuplYw15qtdXfY+hGzgCJ/MBjCVZcSoHK/kH9kocfjRjcDME7IiDWR/1WX1TM2Pg==}
 
-  cookie@1.0.2:
-    resolution: {integrity: sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==}
-    engines: {node: '>=18'}
-
   copy-anything@2.0.6:
     resolution: {integrity: sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==}
 
@@ -6395,8 +6392,8 @@ packages:
     engines: {node: '>=4'}
     hasBin: true
 
-  cssnano-preset-default@7.0.9:
-    resolution: {integrity: sha512-tCD6AAFgYBOVpMBX41KjbvRh9c2uUjLXRyV7KHSIrwHiq5Z9o0TFfUCoM3TwVrRsRteN3sVXGNvjVNxYzkpTsA==}
+  cssnano-preset-default@7.0.10:
+    resolution: {integrity: sha512-6ZBjW0Lf1K1Z+0OKUAUpEN62tSXmYChXWi2NAA0afxEVsj9a+MbcB1l5qel6BHJHmULai2fCGRthCeKSFbScpA==}
     engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
     peerDependencies:
       postcss: ^8.4.32
@@ -6407,8 +6404,8 @@ packages:
     peerDependencies:
       postcss: ^8.4.32
 
-  cssnano@7.1.1:
-    resolution: {integrity: sha512-fm4D8ti0dQmFPeF8DXSAA//btEmqCOgAc/9Oa3C1LW94h5usNrJEfrON7b4FkPZgnDEn6OUs5NdxiJZmAtGOpQ==}
+  cssnano@7.1.2:
+    resolution: {integrity: sha512-HYOPBsNvoiFeR1eghKD5C3ASm64v9YVyJB4Ivnl2gqKoQYvjjN/G0rztvKQq8OxocUtC6sjqY8jwYngIB4AByA==}
     engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
     peerDependencies:
       postcss: ^8.4.32
@@ -6599,8 +6596,8 @@ packages:
   date-fns@4.1.0:
     resolution: {integrity: sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==}
 
-  dayjs@1.11.18:
-    resolution: {integrity: sha512-zFBQ7WFRvVRhKcWoUh+ZA1g2HVgUbsZm9sbddh8EC5iv93sui8DVVz1Npvz+r6meo9VKfa8NyLWBsQK1VvIKPA==}
+  dayjs@1.11.19:
+    resolution: {integrity: sha512-t5EcLVS6QPBNqM2z8fakk/NKel+Xzshgt8FFKAn+qwlD1pzZWxh0nVCrvFK7ZDb6XucZeF9z8C7CBWTRIVApAw==}
 
   db0@0.3.4:
     resolution: {integrity: sha512-RiXXi4WaNzPTHEOu8UPQKMooIbqOEyqA1t7Z6MsdxSCeb8iUC9ko3LcmsLmeUt2SM5bctfArZKkRQggKZz7JNw==}
@@ -6652,9 +6649,6 @@ packages:
   deep-is@0.1.4:
     resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
 
-  deep-pick-omit@1.2.1:
-    resolution: {integrity: sha512-2J6Kc/m3irCeqVG42T+SaUMesaK7oGWaedGnQQK/+O0gYc+2SP5bKh/KKTE7d7SJ+GCA9UUE1GRzh6oDe0EnGw==}
-
   deepmerge@4.3.1:
     resolution: {integrity: sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==}
     engines: {node: '>=0.10.0'}
@@ -6767,6 +6761,10 @@ packages:
     resolution: {integrity: sha512-k1gCAXAsNgLwEL+Y8Wvl+M6oEFj5bgazfZULpS5CneoPPXRaCCW7dm+q21Ky2VEE5X+VeRDBVg1Pcvvsr4TtNQ==}
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
 
+  diff@8.0.2:
+    resolution: {integrity: sha512-sSuxWU5j5SR9QQji/o2qMvqRNYRDOcBTgsJ/DeCf4iSN4gW+gNMXM7wFIP+fdXZxoNiAnHUTGjCr+TSWXdRDKg==}
+    engines: {node: '>=0.3.1'}
+
   dijkstrajs@1.0.3:
     resolution: {integrity: sha512-qiSlmBq9+BCdCA/L46dw8Uy93mloxsPSbwnm5yrKn2vMPiy8KyAskTF6zuV/j5BMsmOGZDPs7KjU+mjb670kfA==}
 
@@ -6886,11 +6884,11 @@ packages:
     engines: {node: '>=0.10.0'}
     hasBin: true
 
-  electron-to-chromium@1.5.238:
-    resolution: {integrity: sha512-khBdc+w/Gv+cS8e/Pbnaw/FXcBUeKrRVik9IxfXtgREOWyJhR4tj43n3amkVogJ/yeQUqzkrZcFhtIxIdqmmcQ==}
+  electron-to-chromium@1.5.245:
+    resolution: {integrity: sha512-rdmGfW47ZhL/oWEJAY4qxRtdly2B98ooTJ0pdEI4jhVLZ6tNf8fPtov2wS1IRKwFJT92le3x4Knxiwzl7cPPpQ==}
 
-  element-plus@2.11.5:
-    resolution: {integrity: sha512-O+bIVHQCjUDm4GiIznDXRoS8ar2TpWLwfOGnN/Aam0VXf5kbuc4SxdKKJdovWNxmxeqbcwjsSZPKgtXNcqys4A==}
+  element-plus@2.11.7:
+    resolution: {integrity: sha512-Bh47wuzsqaNBNDkbtlOlZER1cGcOB8GsXp/+C9b95MOrk0wvoHUV4NKKK7xMkfYNFYdYysQ752oMhnExgAL6+g==}
     peerDependencies:
       vue: ^3.5.17
 
@@ -6987,8 +6985,8 @@ packages:
     resolution: {integrity: sha512-w+5mJ3GuFL+NjVtJlvydShqE1eN3h3PbI7/5LAsYJP/2qtuMXjfL2LpHSRqo4b4eSF5K/DH1JXKUAHSB2UW50g==}
     engines: {node: '>= 0.4'}
 
-  es-toolkit@1.40.0:
-    resolution: {integrity: sha512-8o6w0KFmU0CiIl0/Q/BCEOabF2IJaELM1T2PWj6e8KqzHv1gdx+7JtFnDwOx1kJH/isJ5NwlDG1nCr1HrRF94Q==}
+  es-toolkit@1.41.0:
+    resolution: {integrity: sha512-bDd3oRmbVgqZCJS6WmeQieOrzpl3URcWBUVDXxOELlUW2FuW+0glPOz1n0KnRie+PdyvUZcXz2sOn00c6pPRIA==}
 
   esbuild@0.25.3:
     resolution: {integrity: sha512-qKA6Pvai73+M2FtftpNKRxJ78GIjmFXFxd/1DVBqGo/qNhLSfv+G12n9pNoWdytJC8U00TrViOwpjT0zgqQS8Q==}
@@ -7035,8 +7033,8 @@ packages:
     peerDependencies:
       eslint: '>=6.0.0'
 
-  eslint-config-turbo@2.5.8:
-    resolution: {integrity: sha512-wzxmN7dJNFGDwOvR/4j8U2iaIH/ruYez8qg/sCKrezJ3+ljbFMvJLmgKKt/1mDuyU9wj5aZqO6VijP3QH169FA==}
+  eslint-config-turbo@2.6.0:
+    resolution: {integrity: sha512-WdNSKL1vTl5IGyovn8w3xkaEKsK2n+l9Ybk+4oISptcom/vz9sO/9QcjEKuZSXG0zxrj9Oyx/UZA04hRxmOe+Q==}
     peerDependencies:
       eslint: '>6.6.0'
       turbo: '>2.0.0'
@@ -7139,8 +7137,8 @@ packages:
     peerDependencies:
       eslint: '>=8.44.0'
 
-  eslint-plugin-turbo@2.5.8:
-    resolution: {integrity: sha512-bVjx4vTH0oTKIyQ7EGFAXnuhZMrKIfu17qlex/dps7eScPnGQLJ3r1/nFq80l8xA+8oYjsSirSQ2tXOKbz3kEw==}
+  eslint-plugin-turbo@2.6.0:
+    resolution: {integrity: sha512-04TohZhq6YQVXBZVRvrn8ZTj1sUQYZmjUWsfwgFAlaM5Kbk5Fdh5mLBKfhGGzekB55E+Ut9qNzAGh+JW4rjiuA==}
     peerDependencies:
       eslint: '>6.6.0'
       turbo: '>2.0.0'
@@ -7199,8 +7197,8 @@ packages:
     resolution: {integrity: sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  eslint@9.38.0:
-    resolution: {integrity: sha512-t5aPOpmtJcZcz5UJyY2GbvpDlsK5E8JqRqoKtfiKE3cNh437KIqfJr3A3AKf5k64NPx6d0G3dno6XDY05PqPtw==}
+  eslint@9.39.1:
+    resolution: {integrity: sha512-BhHmn2yNOFA9H9JmmIVKJmd288g9hrVRDkdoIgRCRuSySRUHH7r/DI6aAXW9T1WwUuY3DFgrcaqB+deURBLR5g==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     hasBin: true
     peerDependencies:
@@ -7229,8 +7227,8 @@ packages:
     resolution: {integrity: sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==}
     engines: {node: '>=0.10'}
 
-  esrap@2.1.0:
-    resolution: {integrity: sha512-yzmPNpl7TBbMRC5Lj2JlJZNPml0tzqoqP5B1JXycNUwtqma9AKCO0M2wHrdgsHcy1WRW7S9rJknAMtByg3usgA==}
+  esrap@2.1.2:
+    resolution: {integrity: sha512-DgvlIQeowRNyvLPWW4PT7Gu13WznY288Du086E751mwwbsgr29ytBiYeLzAGIo0qk3Ujob0SDk8TiSaM5WQzNg==}
 
   esrecurse@4.3.0:
     resolution: {integrity: sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==}
@@ -7422,8 +7420,8 @@ packages:
   flatted@3.3.3:
     resolution: {integrity: sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==}
 
-  focus-trap@7.6.5:
-    resolution: {integrity: sha512-7Ke1jyybbbPZyZXFxEftUtxFGLMpE2n6A+z//m4CRDlj0hW+o3iYSmh8nFlYMurOiJVDmJRilUQtJr08KfIxlg==}
+  focus-trap@7.6.6:
+    resolution: {integrity: sha512-v/Z8bvMCajtx4mEXmOo7QEsIzlIOqRXTIwgUfsFOF9gEsespdbD0AkPIka1bSXZ8Y8oZ+2IVDQZePkTfEHZl7Q==}
 
   follow-redirects@1.15.11:
     resolution: {integrity: sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ==}
@@ -7625,8 +7623,8 @@ packages:
     resolution: {integrity: sha512-7ACyT3wmyp3I61S4fG682L0VA2RGD9otkqGJIwNUMF1SWUombIIk+af1unuDYgMm082aHYwD+mzJvv9Iu8dsgg==}
     engines: {node: '>=18'}
 
-  globals@16.4.0:
-    resolution: {integrity: sha512-ob/2LcVVaVGCYN+r14cnwnoDPUufjiYgSqRhiFD0Q1iI4Odora5RE8Iv1D24hAz5oMophRGkGz+yuvQmmUMnMw==}
+  globals@16.5.0:
+    resolution: {integrity: sha512-c/c15i26VrJ4IRt5Z89DnIzCGDn9EcebibhAOjw5ibqEHsE1wLUgkPn9RDmNcUKyU87GeaL633nyJ+pplFR2ZQ==}
     engines: {node: '>=18'}
 
   globalthis@1.0.4:
@@ -8309,8 +8307,8 @@ packages:
   kolorist@1.8.0:
     resolution: {integrity: sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==}
 
-  ky@1.12.0:
-    resolution: {integrity: sha512-YRLmSUHCwOJRBMArtqMRLOmO7fewn3yOoui6aB8ERkRVXupa0UiaQaKbIXteMt4jUElhbdqTMsLFHs8APxxUoQ==}
+  ky@1.14.0:
+    resolution: {integrity: sha512-Rczb6FMM6JT0lvrOlP5WUOCB7s9XKxzwgErzhKlKde1bEV90FXplV1o87fpt4PU/asJFiqjYJxAJyzJhcrxOsQ==}
     engines: {node: '>=18'}
 
   latest-version@9.0.0:
@@ -8572,11 +8570,11 @@ packages:
   magic-string@0.25.9:
     resolution: {integrity: sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==}
 
-  magic-string@0.30.19:
-    resolution: {integrity: sha512-2N21sPY9Ws53PZvsEpVtNuSW+ScYbQdp4b9qUaL+9QkHUrGFKo56Lg9Emg5s9V/qrtNBmiR01sYhUOwu3H+VOw==}
+  magic-string@0.30.21:
+    resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
 
-  magicast@0.3.5:
-    resolution: {integrity: sha512-L0WhttDl+2BOsybvEOLK7fW3UA0OQ0IQ2d6Zl2x/a6vVRs3bAY0ECOSHHeL5jD+SbOpOCUEi0y1DgHEn9Qn1AQ==}
+  magicast@0.5.1:
+    resolution: {integrity: sha512-xrHS24IxaLrvuo613F719wvOIv9xPHFWQHuvGUBmPnCA/3MQxKI3b+r7n1jAoDHmsbC5bRhTZYR77invLAxVnw==}
 
   make-dir@2.1.0:
     resolution: {integrity: sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==}
@@ -8628,8 +8626,8 @@ packages:
   mdn-data@2.12.2:
     resolution: {integrity: sha512-IEn+pegP1aManZuckezWCO+XZQDplx1366JoVhTpMpBB1sPey/SbveZQUosKiKiGYjg1wH4pMlNgXbCiYgihQA==}
 
-  mdn-data@2.24.0:
-    resolution: {integrity: sha512-i97fklrJl03tL1tdRVw0ZfLLvuDsdb6wxL+TrJ+PKkCbLrp2PCu2+OYdCKychIUm19nSM/35S6qz7pJpnXttoA==}
+  mdn-data@2.25.0:
+    resolution: {integrity: sha512-T2LPsjgUE/tgMmRXREVmwsux89DwWfNjiynOeXuLd2mX6jphGQ2YE3Ukz7LQ2VOFKiVZU/Ee1GqzHiipZCjymw==}
 
   mdurl@2.0.0:
     resolution: {integrity: sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==}
@@ -8729,6 +8727,10 @@ packages:
     resolution: {integrity: sha512-IPZ167aShDZZUMdRk66cyQAW3qr0WzbHkPdMYa8bzZhlHhO3jALbKdxcaak7W9FfT2rZNpQuUu4Od7ILEpXSaw==}
     engines: {node: 20 || >=22}
 
+  minimatch@10.1.1:
+    resolution: {integrity: sha512-enIvLvRAFZYXJzkCYG5RKmPfrFArdLv+R+lbQ53BmIMLIry74bjKzX6iHAm8WYamJkhSSEabrWN5D97XnKObjQ==}
+    engines: {node: 20 || >=22}
+
   minimatch@3.1.2:
     resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
 
@@ -8876,8 +8878,8 @@ packages:
     engines: {node: '>= 4.4.x'}
     hasBin: true
 
-  nitropack@2.12.7:
-    resolution: {integrity: sha512-HWyzMBj2d8b14J6Cfnxv97ztnuHIgXNcrGiWCruLfb2ZfKsp6OCbZYJm5T9sv/ZKl8LedhatrMKG66HWJux9Rg==}
+  nitropack@2.12.9:
+    resolution: {integrity: sha512-t6qqNBn2UDGMWogQuORjbL2UPevB8PvIPsPHmqvWpeGOlPr4P8Oc5oA8t3wFwGmaolM2M/s2SwT23nx9yARmOg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     hasBin: true
     peerDependencies:
@@ -8934,8 +8936,8 @@ packages:
   node-mock-http@1.0.3:
     resolution: {integrity: sha512-jN8dK25fsfnMrVsEhluUTPkBFY+6ybu7jSB1n+ri/vOGjJxU8J9CZhpSGkHXSkFjtUhbmoncG/YG9ta5Ludqog==}
 
-  node-releases@2.0.26:
-    resolution: {integrity: sha512-S2M9YimhSjBSvYnlr5/+umAnPHE++ODwt5e2Ij6FoX45HA/s4vHdkDx1eax2pAPeAOqu4s9b7ppahsyEFdVqQA==}
+  node-releases@2.0.27:
+    resolution: {integrity: sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA==}
 
   nopt@7.2.1:
     resolution: {integrity: sha512-taM24ViiimT/XntxbPyJQzCG+p4EKOpgD3mxFwW38mGjVUrfERQOeY4EDHjdnptttfHuHQXFx+lTP08Q+mLa/w==}
@@ -9006,8 +9008,8 @@ packages:
     resolution: {integrity: sha512-nK28WOo+QIjBkDduTINE4JkF/UJJKyf2EJxvJKfblDpyg0Q+pkOHNTL0Qwy6NP6FhE/EnzV73BxxqcJaXY9anw==}
     engines: {node: '>= 0.4'}
 
-  ofetch@1.4.1:
-    resolution: {integrity: sha512-QZj2DfGplQAr2oj9KzceK9Hwz6Whxazmn85yYeVuS3u9XTMOGMRx0kO95MQ+vLsj/S/NwBDMMLU5hpxvI6Tklw==}
+  ofetch@1.5.1:
+    resolution: {integrity: sha512-2W4oUZlVaqAPAil6FUg/difl6YhqhUR7x2eZY4bQCko22UXg3hptq9KLQdqFClV+Wu85UX7hNtdGTngi/1BxcA==}
 
   ohash@2.0.11:
     resolution: {integrity: sha512-RdR9FQrFwNBNXAr4GixM8YaRZRJ5PUWbKYbE5eOsrwAjJW0q2REGcf79oYPsLyskQCZG1PLN+S/K1V00joZAoQ==}
@@ -9245,8 +9247,8 @@ packages:
     resolution: {integrity: sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==}
     engines: {node: '>=6'}
 
-  pinia-plugin-persistedstate@4.5.0:
-    resolution: {integrity: sha512-QTkP1xJVyCdr2I2p3AKUZM84/e+IS+HktRxKGAIuDzkyaKKV48mQcYkJFVVDuvTxlI5j6X3oZObpqoVB8JnWpw==}
+  pinia-plugin-persistedstate@4.7.1:
+    resolution: {integrity: sha512-WHOqh2esDlR3eAaknPbqXrkkj0D24h8shrDPqysgCFR6ghqP/fpFfJmMPJp0gETHsvrh9YNNg6dQfo2OEtDnIQ==}
     peerDependencies:
       '@nuxt/kit': '>=3.0.0'
       '@pinia/nuxt': '>=0.10.0'
@@ -9259,10 +9261,10 @@ packages:
       pinia:
         optional: true
 
-  pinia@3.0.3:
-    resolution: {integrity: sha512-ttXO/InUULUXkMHpTdp9Fj4hLpD/2AoJdmAbAeW2yu1iy1k+pkFekQXw5VpC0/5p51IOR/jDaDRfRWRnMMsGOA==}
+  pinia@3.0.4:
+    resolution: {integrity: sha512-l7pqLUFTI/+ESXn6k3nu30ZIzW5E2WZF/LaHJEpoq6ElcLD+wduZoB2kBN19du6K/4FDpPMazY2wJr+IndBtQw==}
     peerDependencies:
-      typescript: '>=4.4.4'
+      typescript: '>=4.5.0'
       vue: ^3.5.17
     peerDependenciesMeta:
       typescript:
@@ -9351,14 +9353,14 @@ packages:
     peerDependencies:
       postcss: ^8.4
 
-  postcss-colormin@7.0.4:
-    resolution: {integrity: sha512-ziQuVzQZBROpKpfeDwmrG+Vvlr0YWmY/ZAk99XD+mGEBuEojoFekL41NCsdhyNUtZI7DPOoIWIR7vQQK9xwluw==}
+  postcss-colormin@7.0.5:
+    resolution: {integrity: sha512-ekIBP/nwzRWhEMmIxHHbXHcMdzd1HIUzBECaj5KEdLz9DVP2HzT065sEhvOx1dkLjYW7jyD0CngThx6bpFi2fA==}
     engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
     peerDependencies:
       postcss: ^8.4.32
 
-  postcss-convert-values@7.0.7:
-    resolution: {integrity: sha512-HR9DZLN04Xbe6xugRH6lS4ZQH2zm/bFh/ZyRkpedZozhvh+awAfbA0P36InO4fZfDhvYfNJeNvlTf1sjwGbw/A==}
+  postcss-convert-values@7.0.8:
+    resolution: {integrity: sha512-+XNKuPfkHTCEo499VzLMYn94TiL3r9YqRE3Ty+jP7UX4qjewUONey1t7CG21lrlTLN07GtGM8MqFVp86D4uKJg==}
     engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
     peerDependencies:
       postcss: ^8.4.32
@@ -9387,8 +9389,8 @@ packages:
     peerDependencies:
       postcss: ^8.4
 
-  postcss-discard-comments@7.0.4:
-    resolution: {integrity: sha512-6tCUoql/ipWwKtVP/xYiFf1U9QgJ0PUvxN7pTcsQ8Ns3Fnwq1pU5D5s1MhT/XySeLq6GXNvn37U46Ded0TckWg==}
+  postcss-discard-comments@7.0.5:
+    resolution: {integrity: sha512-IR2Eja8WfYgN5n32vEGSctVQ1+JARfu4UH8M7bgGh1bC+xI/obsPJXaBpQF7MAByvgwZinhpHpdrmXtvVVlKcQ==}
     engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
     peerDependencies:
       postcss: ^8.4.32
@@ -9507,8 +9509,8 @@ packages:
     peerDependencies:
       postcss: ^8.4.32
 
-  postcss-merge-rules@7.0.6:
-    resolution: {integrity: sha512-2jIPT4Tzs8K87tvgCpSukRQ2jjd+hH6Bb8rEEOUDmmhOeTcqDg5fEFK8uKIu+Pvc3//sm3Uu6FRqfyv7YF7+BQ==}
+  postcss-merge-rules@7.0.7:
+    resolution: {integrity: sha512-njWJrd/Ms6XViwowaaCc+/vqhPG3SmXn725AGrnl+BgTuRPEacjiLEaGq16J6XirMJbtKkTwnt67SS+e2WGoew==}
     engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
     peerDependencies:
       postcss: ^8.4.32
@@ -9525,8 +9527,8 @@ packages:
     peerDependencies:
       postcss: ^8.4.32
 
-  postcss-minify-params@7.0.4:
-    resolution: {integrity: sha512-3OqqUddfH8c2e7M35W6zIwv7jssM/3miF9cbCSb1iJiWvtguQjlxZGIHK9JRmc8XAKmE2PFGtHSM7g/VcW97sw==}
+  postcss-minify-params@7.0.5:
+    resolution: {integrity: sha512-FGK9ky02h6Ighn3UihsyeAH5XmLEE2MSGH5Tc4tXMFtEDx7B+zTG6hD/+/cT+fbF7PbYojsmmWjyTwFwW1JKQQ==}
     engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
     peerDependencies:
       postcss: ^8.4.32
@@ -9597,8 +9599,8 @@ packages:
     peerDependencies:
       postcss: ^8.4.32
 
-  postcss-normalize-unicode@7.0.4:
-    resolution: {integrity: sha512-LvIURTi1sQoZqj8mEIE8R15yvM+OhbR1avynMtI9bUzj5gGKR/gfZFd8O7VMj0QgJaIFzxDwxGl/ASMYAkqO8g==}
+  postcss-normalize-unicode@7.0.5:
+    resolution: {integrity: sha512-X6BBwiRxVaFHrb2WyBMddIeB5HBjJcAaUHyhLrM2FsxSq5TFqcHSsK7Zu1otag+o0ZphQGJewGH1tAyrD0zX1Q==}
     engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
     peerDependencies:
       postcss: ^8.4.32
@@ -9656,8 +9658,8 @@ packages:
     peerDependencies:
       postcss: ^8.4
 
-  postcss-reduce-initial@7.0.4:
-    resolution: {integrity: sha512-rdIC9IlMBn7zJo6puim58Xd++0HdbvHeHaPgXsimMfG1ijC5A9ULvNLSE0rUKVJOvNMcwewW4Ga21ngyJjY/+Q==}
+  postcss-reduce-initial@7.0.5:
+    resolution: {integrity: sha512-RHagHLidG8hTZcnr4FpyMB2jtgd/OcyAazjMhoy5qmWJOx1uxKh4ntk0Pb46ajKM0rkf32lRH4C8c9qQiPR6IA==}
     engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
     peerDependencies:
       postcss: ^8.4.32
@@ -9898,11 +9900,6 @@ packages:
   queue-microtask@1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
 
-  radix-vue@1.9.17:
-    resolution: {integrity: sha512-mVCu7I2vXt1L2IUYHTt0sZMz7s1K2ZtqKeTIxG3yC5mMFfLBG4FtE1FDeRMpDd+Hhg/ybi9+iXmAP1ISREndoQ==}
-    peerDependencies:
-      vue: ^3.5.17
-
   radix3@1.1.2:
     resolution: {integrity: sha512-b484I/7b8rDEdSDKckSSBA8knMpcdsXudlE/LNL639wFoHKwLbEkQFZHWEYwDC0wa0FKUcCY+GAF73Z7wxNVFA==}
 
@@ -10019,6 +10016,11 @@ packages:
     resolution: {integrity: sha512-NZQZdC5wOE/H3UT28fVGL+ikOZcEzfMGk/c3iN9UGxzWHMa1op7274oyiUVrAG4B2EuFhus8SvkaYnhvW92p9Q==}
     hasBin: true
 
+  reka-ui@2.6.0:
+    resolution: {integrity: sha512-NrGMKrABD97l890mFS3TNUzB0BLUfbL3hh0NjcJRIUSUljb288bx3Mzo31nOyUcdiiW0HqFGXJwyCBh9cWgb0w==}
+    peerDependencies:
+      vue: ^3.5.17
+
   relateurl@0.2.7:
     resolution: {integrity: sha512-G08Dxvm4iDN3MLM0EsP62EDV9IuhXPR6blNz6Utcp7zyV3tr4HVNINt6MpaRWbxoOHT3Q7YN2P+jaHX8vUbgog==}
     engines: {node: '>= 0.10'}
@@ -10086,8 +10088,8 @@ packages:
   rfdc@1.4.1:
     resolution: {integrity: sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==}
 
-  rimraf@6.0.1:
-    resolution: {integrity: sha512-9dkvaxAsk/xNXSJzMgFqqMCuFgt2+KsOFek3TMLfo8NCPfWpBmqwyNn5Y+NX56QUYfCtsyhF3ayiboEoUmJk/A==}
+  rimraf@6.1.0:
+    resolution: {integrity: sha512-DxdlA1bdNzkZK7JiNWH+BAx1x4tEJWoTofIopFo6qWUU94jYrFZ0ubY05TqH3nWPJ1nKa1JWVFDINZ3fnrle/A==}
     engines: {node: 20 || >=22}
     hasBin: true
 
@@ -10182,13 +10184,13 @@ packages:
   safer-buffer@2.1.2:
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
 
-  sass@1.93.2:
-    resolution: {integrity: sha512-t+YPtOQHpGW1QWsh1CHQ5cPIr9lbbGZLZnbihP/D/qZj/yuV68m8qarcV17nvkOX81BCrvzAlq2klCQFZghyTg==}
+  sass@1.93.3:
+    resolution: {integrity: sha512-elOcIZRTM76dvxNAjqYrucTSI0teAF/L2Lv0s6f6b7FOwcwIuA357bIE871580AjHJuSvLIRUosgV+lIWx6Rgg==}
     engines: {node: '>=14.0.0'}
     hasBin: true
 
-  sax@1.4.1:
-    resolution: {integrity: sha512-+aWOz7yVScEGoKNd4PA10LZ8sk0A/z5+nXQG5giUO5rprX9jgYsTdov9qCchZiPIZezbZH+jRut8nPodFAX4Jg==}
+  sax@1.4.3:
+    resolution: {integrity: sha512-yqYn1JhPczigF94DMS+shiDMjDowYO6y9+wB/4WgO0Y19jWYk0lQ4tuG5KI7kj4FTp1wxPj5IFfcrz/s1c3jjQ==}
 
   saxen@8.1.2:
     resolution: {integrity: sha512-xUOiiFbc3Ow7p8KMxwsGICPx46ZQvy3+qfNVhrkwfz3Vvq45eGt98Ft5IQaA1R/7Tb5B5MKh9fUR9x3c3nDTxw==}
@@ -10541,8 +10543,11 @@ packages:
   strnum@1.1.2:
     resolution: {integrity: sha512-vrN+B7DBIoTTZjnPNewwhx6cBA/H+IS7rfW68n7XxC1y7uoiGQBxaKzqucGUgavX15dJgiGztLJ8vxuEzwqBdA==}
 
-  stubborn-fs@1.2.5:
-    resolution: {integrity: sha512-H2N9c26eXjzL/S/K+i/RHHcFanE74dptvvjM8iwzwbVcWY/zjBbgRqF3K0DY4+OD+uTTASTBvDoxPDaPN02D7g==}
+  stubborn-fs@2.0.0:
+    resolution: {integrity: sha512-Y0AvSwDw8y+nlSNFXMm2g6L51rBGdAQT20J3YSOqxC53Lo3bjWRtr2BKcfYoAf352WYpsZSTURrA0tqhfgudPA==}
+
+  stubborn-utils@1.0.2:
+    resolution: {integrity: sha512-zOh9jPYI+xrNOyisSelgym4tolKTJCQd5GBhK0+0xJvcYDcwlOoxF/rnFKQ2KRZknXSG9jWAp66fwP6AxN9STg==}
 
   style-mod@4.1.3:
     resolution: {integrity: sha512-i/n8VsZydrugj3Iuzll8+x/00GH2vnYsk1eomD8QiRrSAeW6ItbCQDtfXCeJHd0iwiNagqjQkvpvREEPtW3IoQ==}
@@ -10553,8 +10558,8 @@ packages:
   style-value-types@5.1.2:
     resolution: {integrity: sha512-Vs9fNreYF9j6W2VvuDTP7kepALi7sk0xtk2Tu8Yxi9UoajJdEVpNpCov0HsLTqXvNGKX+Uv09pkozVITi1jf3Q==}
 
-  stylehacks@7.0.6:
-    resolution: {integrity: sha512-iitguKivmsueOmTO0wmxURXBP8uqOO+zikLGZ7Mm9e/94R4w5T999Js2taS/KBOnQ/wdC3jN3vNSrkGDrlnqQg==}
+  stylehacks@7.0.7:
+    resolution: {integrity: sha512-bJkD0JkEtbRrMFtwgpJyBbFIwfDDONQ1Ov3sDLZQP8HuJ73kBOyx66H4bOcAbVWmnfLdvQ0AJwXxOMkpujcO6g==}
     engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
     peerDependencies:
       postcss: ^8.4.32
@@ -10643,8 +10648,8 @@ packages:
     engines: {node: '>=16 || 14 >=14.17'}
     hasBin: true
 
-  superjson@2.2.3:
-    resolution: {integrity: sha512-ay3d+LW/S6yppKoTz3Bq4mG0xrS5bFwfWEBmQfbC7lt5wmtk+Obq0TxVuA9eYRirBTQb1K3eEpBRHMQEo0WyVw==}
+  superjson@2.2.5:
+    resolution: {integrity: sha512-zWPTX96LVsA/eVYnqOM2+ofcdPqdS1dAF1LN4TS2/MWuUpfitd9ctTa87wt4xrYnZnkLtS69xpBdSxVBP5Rm6w==}
     engines: {node: '>=16'}
 
   supports-color@10.2.2:
@@ -10667,8 +10672,8 @@ packages:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
 
-  svelte@5.41.1:
-    resolution: {integrity: sha512-0a/huwc8e2es+7KFi70esqsReRfRbrT8h1cJSY/+z1lF0yKM6TT+//HYu28Yxstr50H7ifaqZRDGd0KuKDxP7w==}
+  svelte@5.43.3:
+    resolution: {integrity: sha512-kjkAjCk41mJfvJZG56XcJNOdJSke94JxtcX8zFzzz2vrt47E0LnoBzU6azIZ1aBxJgUep8qegAkguSf1GjxLXQ==}
     engines: {node: '>=18'}
 
   sver@1.8.4:
@@ -10690,8 +10695,8 @@ packages:
     resolution: {integrity: sha512-ulAk51I9UVUyJgxlv9M6lFot2WP3e7t8Kz9+IS6D4rVba1tR9kON+Ey69f+1R4Q8cd45Lod6a4IcJIxnzGc/zA==}
     engines: {node: '>=18'}
 
-  tabbable@6.2.0:
-    resolution: {integrity: sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==}
+  tabbable@6.3.0:
+    resolution: {integrity: sha512-EIHvdY5bPLuWForiR/AN2Bxngzpuwn1is4asboytXtpTgsArc+WmSJKVLlhdh71u7jFcryDqB2A8lQvj78MkyQ==}
 
   table@6.9.0:
     resolution: {integrity: sha512-9kY+CygyYM6j02t5YFHbNz2FN5QmYGv9zAjVp4lCDjlCw7amdckXlEt/bjMhUIfj4ThGRE4gCUH5+yGnNuPo5A==}
@@ -10721,8 +10726,8 @@ packages:
   tar-stream@3.1.7:
     resolution: {integrity: sha512-qJj60CXt7IU1Ffyc3NJMjh6EkuCFej46zUqJ4J7pqYlThyd9bO0XBTmcOIhSzZJVWfsLks0+nle/j538YAW9RQ==}
 
-  tar@7.5.1:
-    resolution: {integrity: sha512-nlGpxf+hv0v7GkWBK2V9spgactGOp0qvfWRxUMjqHyzrt3SgwE48DIv/FhqPHJYLHpgW1opq3nERbz5Anq7n1g==}
+  tar@7.5.2:
+    resolution: {integrity: sha512-7NyxrTE4Anh8km8iEy7o0QYPs+0JKBTj5ZaqHg6B39erLg0qYXN3BijtShwbsNSvQ+LN75+KV+C4QR/f6Gwnpg==}
     engines: {node: '>=18'}
 
   temp-dir@2.0.0:
@@ -10737,8 +10742,8 @@ packages:
     resolution: {integrity: sha512-wK0Ri4fOGjv/XPy8SBHZChl8CM7uMc5VML7SqiQ0zG7+J5Vr+RMQDoHa2CNT6KHUnTGIXH34UDMkPzAUyapBZg==}
     engines: {node: '>=8'}
 
-  terser@5.44.0:
-    resolution: {integrity: sha512-nIVck8DK+GM/0Frwd+nIhZ84pR/BX7rmXMfYwyg+Sri5oGVE99/E3KvXqpC2xHFxyqXyGHTKBSioxxplrO4I4w==}
+  terser@5.44.1:
+    resolution: {integrity: sha512-t/R3R/n0MSwnnazuPpPNVO60LX0SKL45pyl9YlvxIdkH0Of7D5qM2EVe+yASRIlY5pZ73nclYJfNANGWPwFDZw==}
     engines: {node: '>=10'}
     hasBin: true
 
@@ -10778,8 +10783,9 @@ packages:
   tinyexec@0.3.2:
     resolution: {integrity: sha512-KQQR9yN7R5+OSwaK0XQoj22pwHoTlgYqmUscPYoknOoWCWfj/5/ABTMRi69FrKU5ffPVh5QcFikpWJI/P1ocHA==}
 
-  tinyexec@1.0.1:
-    resolution: {integrity: sha512-5uC6DDlmeqiOwCPmK9jMSdOuZTh8bU39Ys6yidB+UTt5hfZUPGAypSgFRiEp+jbi9qH40BLDvy85jIU88wKSqw==}
+  tinyexec@1.0.2:
+    resolution: {integrity: sha512-W/KYk+NFhkmsYpuHq5JykngiOCnxeVL8v8dFnqxSD8qEEdRfXk1SDM6JzNqcERbcGYj9tMrDQBYV9cjgnunFIg==}
+    engines: {node: '>=18'}
 
   tinyglobby@0.2.15:
     resolution: {integrity: sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==}
@@ -10856,38 +10862,38 @@ packages:
   tslib@2.8.1:
     resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
 
-  turbo-darwin-64@2.5.8:
-    resolution: {integrity: sha512-Dh5bCACiHO8rUXZLpKw+m3FiHtAp2CkanSyJre+SInEvEr5kIxjGvCK/8MFX8SFRjQuhjtvpIvYYZJB4AGCxNQ==}
+  turbo-darwin-64@2.6.0:
+    resolution: {integrity: sha512-6vHnLAubHj8Ib45Knu+oY0ZVCLO7WcibzAvt5b1E72YHqAs4y8meMAGMZM0jLqWPh/9maHDc16/qBCMxtW4pXg==}
     cpu: [x64]
     os: [darwin]
 
-  turbo-darwin-arm64@2.5.8:
-    resolution: {integrity: sha512-f1H/tQC9px7+hmXn6Kx/w8Jd/FneIUnvLlcI/7RGHunxfOkKJKvsoiNzySkoHQ8uq1pJnhJ0xNGTlYM48ZaJOQ==}
+  turbo-darwin-arm64@2.6.0:
+    resolution: {integrity: sha512-IU+gWMEXNBw8H0pxvE7nPEa5p6yahxbN8g/Q4Bf0AHymsAFqsScgV0peeNbWybdmY9jk1LPbALOsF2kY1I7ZiQ==}
     cpu: [arm64]
     os: [darwin]
 
-  turbo-linux-64@2.5.8:
-    resolution: {integrity: sha512-hMyvc7w7yadBlZBGl/bnR6O+dJTx3XkTeyTTH4zEjERO6ChEs0SrN8jTFj1lueNXKIHh1SnALmy6VctKMGnWfw==}
+  turbo-linux-64@2.6.0:
+    resolution: {integrity: sha512-CKoiJ2ZFJLCDsWdRlZg+ew1BkGn8iCEGdePhISVpjsGwkJwSVhVu49z2zKdBeL1IhcSKS2YALwp9ellNZANJxw==}
     cpu: [x64]
     os: [linux]
 
-  turbo-linux-arm64@2.5.8:
-    resolution: {integrity: sha512-LQELGa7bAqV2f+3rTMRPnj5G/OHAe2U+0N9BwsZvfMvHSUbsQ3bBMWdSQaYNicok7wOZcHjz2TkESn1hYK6xIQ==}
+  turbo-linux-arm64@2.6.0:
+    resolution: {integrity: sha512-WroVCdCvJbrhNxNdw7XB7wHAfPPJPV+IXY+ZKNed+9VdfBu/2mQNfKnvqTuFTH7n+Pdpv8to9qwhXRTJe26upg==}
     cpu: [arm64]
     os: [linux]
 
-  turbo-windows-64@2.5.8:
-    resolution: {integrity: sha512-3YdcaW34TrN1AWwqgYL9gUqmZsMT4T7g8Y5Azz+uwwEJW+4sgcJkIi9pYFyU4ZBSjBvkfuPZkGgfStir5BBDJQ==}
+  turbo-windows-64@2.6.0:
+    resolution: {integrity: sha512-7pZo5aGQPR+A7RMtWCZHusarJ6y15LQ+o3jOmpMxTic/W6Bad+jSeqo07TWNIseIWjCVzrSv27+0odiYRYtQdA==}
     cpu: [x64]
     os: [win32]
 
-  turbo-windows-arm64@2.5.8:
-    resolution: {integrity: sha512-eFC5XzLmgXJfnAK3UMTmVECCwuBcORrWdewoiXBnUm934DY6QN8YowC/srhNnROMpaKaqNeRpoB5FxCww3eteQ==}
+  turbo-windows-arm64@2.6.0:
+    resolution: {integrity: sha512-1Ty+NwIksQY7AtFUCPrTpcKQE7zmd/f7aRjdT+qkqGFQjIjFYctEtN7qo4vpQPBgCfS1U3ka83A2u/9CfJQ3wQ==}
     cpu: [arm64]
     os: [win32]
 
-  turbo@2.5.8:
-    resolution: {integrity: sha512-5c9Fdsr9qfpT3hA0EyYSFRZj1dVVsb6KIWubA9JBYZ/9ZEAijgUEae0BBR/Xl/wekt4w65/lYLTFaP3JmwSO8w==}
+  turbo@2.6.0:
+    resolution: {integrity: sha512-kC5VJqOXo50k0/0jnJDDjibLAXalqT9j7PQ56so0pN+81VR4Fwb2QgIE9dTzT3phqOTQuEXkPh3sCpnv5Isz2g==}
     hasBin: true
 
   type-check@0.4.0:
@@ -10902,8 +10908,8 @@ packages:
     resolution: {integrity: sha512-TeTSQ6H5YHvpqVwBRcnLDCBnDOHWYu7IvGbHT6N8AOymcr9PJGjc1GTtiWZTYg0NCgYwvnYWEkVChQAr9bjfwA==}
     engines: {node: '>=16'}
 
-  type-fest@5.1.0:
-    resolution: {integrity: sha512-wQ531tuWvB6oK+pchHIu5lHe5f5wpSCqB8Kf4dWQRbOYc9HTge7JL0G4Qd44bh6QuJCccIzL3bugb8GI0MwHrg==}
+  type-fest@5.2.0:
+    resolution: {integrity: sha512-xxCJm+Bckc6kQBknN7i9fnP/xobQRsRQxR01CztFkp/h++yfVxUUcmMgfR2HttJx/dpWjS9ubVuyspJv24Q9DA==}
     engines: {node: '>=20'}
 
   typed-array-buffer@1.0.3:
@@ -10960,9 +10966,6 @@ packages:
   unctx@2.4.1:
     resolution: {integrity: sha512-AbaYw0Nm4mK4qjhns67C+kgxR2YWiwlDBPzxrN8h8C6VtAdCgditAY5Dezu3IJy4XVqAnbrXt9oQJvsn3fyozg==}
 
-  undici-types@6.21.0:
-    resolution: {integrity: sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==}
-
   undici-types@7.16.0:
     resolution: {integrity: sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==}
 
@@ -10970,8 +10973,8 @@ packages:
     resolution: {integrity: sha512-QEg3HPMll0o3t2ourKwOeUAZ159Kn9mx5pnzHRQO8+Wixmh88YdZRiIwat0iNzNNXn0yoEtXJqFpyW7eM8BV7g==}
     engines: {node: '>=20.18.1'}
 
-  unenv@2.0.0-rc.21:
-    resolution: {integrity: sha512-Wj7/AMtE9MRnAXa6Su3Lk0LNCfqDYgfwVjwRFVum9U7wsto1imuHqk4kTm7Jni+5A0Hn7dttL6O/zjvUvoo+8A==}
+  unenv@2.0.0-rc.24:
+    resolution: {integrity: sha512-i7qRCmY42zmCwnYlh9H2SvLEypEFGye5iRmEMKjcGi7zk9UquigRjFtTLz0TYqr0ZGLZhaMHl/foy1bZR+Cwlw==}
 
   unicode-canonical-property-names-ecmascript@2.0.1:
     resolution: {integrity: sha512-dA8WbNeb2a6oQzAQ55YlT5vQAWGV9WXOsi3SskE3bcCdM0P4SDd+24zS/OCacdRq5BkdsRj9q3Pg6YyQoxIGqg==}
@@ -11059,8 +11062,8 @@ packages:
   unrs-resolver@1.11.1:
     resolution: {integrity: sha512-bSjt9pjaEBnNiGgc9rUiHGKv5l4/TGzDmYw3RhnkJGtLhbnnA/5qJj7x3dNDCRx/PJxu774LlH8lCOlB4hEfKg==}
 
-  unstorage@1.17.1:
-    resolution: {integrity: sha512-KKGwRTT0iVBCErKemkJCLs7JdxNVfqTPc/85ae1XES0+bsHbc/sFBfVi5kJp156cc51BHinIH2l3k0EZ24vOBQ==}
+  unstorage@1.17.2:
+    resolution: {integrity: sha512-cKEsD6iBWJgOMJ6vW1ID/SYuqNf8oN4yqRk8OYqaVQ3nnkJXOT1PSpaMh2QfzLs78UN5kSNRD2c/mgjT8tX7+w==}
     peerDependencies:
       '@azure/app-configuration': ^1.8.0
       '@azure/cosmos': ^4.2.0
@@ -11136,8 +11139,8 @@ packages:
     resolution: {integrity: sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg==}
     engines: {node: '>=4'}
 
-  update-browserslist-db@1.1.3:
-    resolution: {integrity: sha512-UxhIZQ+QInVdunkDAaiazvvT/+fXL5Osr0JZlJulepYu6Jd7qJtDZjlur0emRlT71EN3ScPoE7gvsuIKKNavKw==}
+  update-browserslist-db@1.1.4:
+    resolution: {integrity: sha512-q0SPT4xyU84saUX+tomz1WLkxUbuaJnR1xWt17M7fJtEJigJeWUNGUqrauFXsHnqev9y9JTRGwk13tFBuKby4A==}
     hasBin: true
     peerDependencies:
       browserslist: '>= 4.21.0'
@@ -11279,8 +11282,8 @@ packages:
       terser:
         optional: true
 
-  vite@7.1.11:
-    resolution: {integrity: sha512-uzcxnSDVjAopEUjljkWh8EIrg6tlzrjFUfMcR1EVsRDGwf/ccef0qQPRyOrROwhrTDaApueq+ja+KLPlzR/zdg==}
+  vite@7.2.1:
+    resolution: {integrity: sha512-qTl3VF7BvOupTR85Zc561sPEgxyUSNSvTQ9fit7DEMP7yPgvvIGm5Zfa1dOM+kOwWGNviK9uFM9ra77+OjK7lQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     hasBin: true
     peerDependencies:
@@ -11319,11 +11322,13 @@ packages:
       yaml:
         optional: true
 
-  vitepress-plugin-group-icons@1.6.4:
-    resolution: {integrity: sha512-YCFH0G2zTX/me51wooWy4SvaaA6VKjIxLoWDU9ON4rFx9907Yf9ZpCpa4JpwloVuvm5+82fqLXSuZ98EJ92UUQ==}
+  vitepress-plugin-group-icons@1.6.5:
+    resolution: {integrity: sha512-+pg4+GKDq2fLqKb1Sat5p1p4SuIZ5tEPxu8HjpwoeecZ/VaXKy6Bdf0wyjedjaTAyZQzXbvyavJegqAcQ+B0VA==}
     peerDependencies:
-      markdown-it: '>=14'
       vite: '>=3'
+    peerDependenciesMeta:
+      vite:
+        optional: true
 
   vitepress@1.6.4:
     resolution: {integrity: sha512-+2ym1/+0VVrbhNyRoFFesVvBvHAVMZMK0rw60E3X/5349M1GuVdKeazuksqopEdvkKwKGs21Q729jX81/bkBJg==}
@@ -11439,8 +11444,8 @@ packages:
     peerDependencies:
       vue: ^3.5.17
 
-  vue@3.5.22:
-    resolution: {integrity: sha512-toaZjQ3a/G/mYaLSbV+QsQhIdMo9x5rrqIpYRObsJ6T/J+RyCSFwN2LHNVH9v8uIcljDNa3QzPVdv3Y6b9hAJQ==}
+  vue@3.5.23:
+    resolution: {integrity: sha512-CfvZv/vI52xUhumUvHtD6iFIS78nGWfX4IJnHfBGhpqMI0CwDq2YEngXOeaBFMRmiArcqczuVrLxurvesTYT9w==}
     peerDependencies:
       typescript: '*'
     peerDependenciesMeta:
@@ -11457,11 +11462,11 @@ packages:
     peerDependencies:
       vue: ^3.5.17
 
-  vxe-pc-ui@4.10.5:
-    resolution: {integrity: sha512-ASGSBIhEXRYmro/kVzK+es5DOchWvFXegM2osqrCIKQcFTAkLzLU4mZc8jOihNaxwy212819w8kLdS9KDwpvSg==}
+  vxe-pc-ui@4.10.16:
+    resolution: {integrity: sha512-WLNvyLpMJalcvA68XvdsaiZotx0oCx8A06jcHIySR3RcqL25LYN/Lgl7bHGotDU9JIpL3SGz52f8Xxy9V5swgA==}
 
-  vxe-table@4.17.0:
-    resolution: {integrity: sha512-IpyY5uzgMt4NEgTl0brAFe/xSyrBK8U0763uCG8LUe8TbGVuWMD5bCP9DYqkjK7cBmJjXtzwxlQ6I3auzCGd3Q==}
+  vxe-table@4.17.10:
+    resolution: {integrity: sha512-jwj938wCEQ5RL6yUUjAxRAvI113zj+7NjwKvYg9JGhauscsxJIYZb+3X9aEB33HP1/+lrN+LXAEA0XsktzcPlg==}
 
   w3c-keyname@2.2.8:
     resolution: {integrity: sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==}
@@ -11510,8 +11515,8 @@ packages:
   whatwg-url@7.1.0:
     resolution: {integrity: sha512-WUu7Rg1DroM7oQvGWfOiAK21n74Gg+T4elXEQYkOhtyLeWiJFoOGLXPKI/9gzIie9CtwVLm8wtw6YJdKyxSjeg==}
 
-  when-exit@2.1.4:
-    resolution: {integrity: sha512-4rnvd3A1t16PWzrBUcSDZqcAmsUIy4minDXT/CZ8F2mVDgd65i4Aalimgz1aQkRGU0iH5eT5+6Rx2TK8o443Pg==}
+  when-exit@2.1.5:
+    resolution: {integrity: sha512-VGkKJ564kzt6Ms1dbgPP/yuIoQCrsFAnRbptpC5wOEsDaNsbCB2bnfnaA8i/vRs5tjUSEOtIuvl9/MyVsvQZCg==}
 
   which-boxed-primitive@1.1.1:
     resolution: {integrity: sha512-TbX3mj8n0odCBFVlY8AxkqcHASw3L60jIuF8jFP78az3C2YhmGvqbHBpAjTRH2/xqYunrJ9g1jSyjCjpoWzIAA==}
@@ -11710,8 +11715,8 @@ packages:
   youch-core@0.3.3:
     resolution: {integrity: sha512-ho7XuGjLaJ2hWHoK8yFnsUGy2Y5uDpqSTq1FkHLK4/oqKtyUU1AFbOOxY4IpC9f0fTLjwYbslUz0Po5BpD1wrA==}
 
-  youch@4.1.0-beta.11:
-    resolution: {integrity: sha512-sQi6PERyO/mT8w564ojOVeAlYTtVQmC2GaktQAf+IdI75/GKIggosBuvyVXvEV+FATAT6RbLdIjFoiIId4ozoQ==}
+  youch@4.1.0-beta.12:
+    resolution: {integrity: sha512-X+AQ2EdigcZb2h1XQmBMm19TrrfKXxEXWpnf8ThbARwiiSf/pA7MvRTCj5VHCI9z3vjJBsDeqWWyvaI9Bfp9Pg==}
 
   zeebe-bpmn-moddle@1.11.0:
     resolution: {integrity: sha512-v2PkIAjyZEnzuFHrm9ZhpbEGMgNjYZkUw+H17JxkA7Da+dcbPHbD7fWuBWSbPzNSCOyYYmrH+PL6wp9407ptMg==}
@@ -11744,117 +11749,117 @@ packages:
 
 snapshots:
 
-  '@algolia/abtesting@1.6.1':
+  '@algolia/abtesting@1.8.0':
     dependencies:
-      '@algolia/client-common': 5.40.1
-      '@algolia/requester-browser-xhr': 5.40.1
-      '@algolia/requester-fetch': 5.40.1
-      '@algolia/requester-node-http': 5.40.1
+      '@algolia/client-common': 5.42.0
+      '@algolia/requester-browser-xhr': 5.42.0
+      '@algolia/requester-fetch': 5.42.0
+      '@algolia/requester-node-http': 5.42.0
 
-  '@algolia/autocomplete-core@1.17.7(@algolia/client-search@5.40.1)(algoliasearch@5.40.1)(search-insights@2.17.3)':
+  '@algolia/autocomplete-core@1.17.7(@algolia/client-search@5.42.0)(algoliasearch@5.42.0)(search-insights@2.17.3)':
     dependencies:
-      '@algolia/autocomplete-plugin-algolia-insights': 1.17.7(@algolia/client-search@5.40.1)(algoliasearch@5.40.1)(search-insights@2.17.3)
-      '@algolia/autocomplete-shared': 1.17.7(@algolia/client-search@5.40.1)(algoliasearch@5.40.1)
+      '@algolia/autocomplete-plugin-algolia-insights': 1.17.7(@algolia/client-search@5.42.0)(algoliasearch@5.42.0)(search-insights@2.17.3)
+      '@algolia/autocomplete-shared': 1.17.7(@algolia/client-search@5.42.0)(algoliasearch@5.42.0)
     transitivePeerDependencies:
       - '@algolia/client-search'
       - algoliasearch
       - search-insights
 
-  '@algolia/autocomplete-plugin-algolia-insights@1.17.7(@algolia/client-search@5.40.1)(algoliasearch@5.40.1)(search-insights@2.17.3)':
+  '@algolia/autocomplete-plugin-algolia-insights@1.17.7(@algolia/client-search@5.42.0)(algoliasearch@5.42.0)(search-insights@2.17.3)':
     dependencies:
-      '@algolia/autocomplete-shared': 1.17.7(@algolia/client-search@5.40.1)(algoliasearch@5.40.1)
+      '@algolia/autocomplete-shared': 1.17.7(@algolia/client-search@5.42.0)(algoliasearch@5.42.0)
       search-insights: 2.17.3
     transitivePeerDependencies:
       - '@algolia/client-search'
       - algoliasearch
 
-  '@algolia/autocomplete-preset-algolia@1.17.7(@algolia/client-search@5.40.1)(algoliasearch@5.40.1)':
+  '@algolia/autocomplete-preset-algolia@1.17.7(@algolia/client-search@5.42.0)(algoliasearch@5.42.0)':
     dependencies:
-      '@algolia/autocomplete-shared': 1.17.7(@algolia/client-search@5.40.1)(algoliasearch@5.40.1)
-      '@algolia/client-search': 5.40.1
-      algoliasearch: 5.40.1
+      '@algolia/autocomplete-shared': 1.17.7(@algolia/client-search@5.42.0)(algoliasearch@5.42.0)
+      '@algolia/client-search': 5.42.0
+      algoliasearch: 5.42.0
 
-  '@algolia/autocomplete-shared@1.17.7(@algolia/client-search@5.40.1)(algoliasearch@5.40.1)':
+  '@algolia/autocomplete-shared@1.17.7(@algolia/client-search@5.42.0)(algoliasearch@5.42.0)':
     dependencies:
-      '@algolia/client-search': 5.40.1
-      algoliasearch: 5.40.1
+      '@algolia/client-search': 5.42.0
+      algoliasearch: 5.42.0
 
-  '@algolia/client-abtesting@5.40.1':
+  '@algolia/client-abtesting@5.42.0':
     dependencies:
-      '@algolia/client-common': 5.40.1
-      '@algolia/requester-browser-xhr': 5.40.1
-      '@algolia/requester-fetch': 5.40.1
-      '@algolia/requester-node-http': 5.40.1
+      '@algolia/client-common': 5.42.0
+      '@algolia/requester-browser-xhr': 5.42.0
+      '@algolia/requester-fetch': 5.42.0
+      '@algolia/requester-node-http': 5.42.0
 
-  '@algolia/client-analytics@5.40.1':
+  '@algolia/client-analytics@5.42.0':
     dependencies:
-      '@algolia/client-common': 5.40.1
-      '@algolia/requester-browser-xhr': 5.40.1
-      '@algolia/requester-fetch': 5.40.1
-      '@algolia/requester-node-http': 5.40.1
+      '@algolia/client-common': 5.42.0
+      '@algolia/requester-browser-xhr': 5.42.0
+      '@algolia/requester-fetch': 5.42.0
+      '@algolia/requester-node-http': 5.42.0
 
-  '@algolia/client-common@5.40.1': {}
+  '@algolia/client-common@5.42.0': {}
 
-  '@algolia/client-insights@5.40.1':
+  '@algolia/client-insights@5.42.0':
     dependencies:
-      '@algolia/client-common': 5.40.1
-      '@algolia/requester-browser-xhr': 5.40.1
-      '@algolia/requester-fetch': 5.40.1
-      '@algolia/requester-node-http': 5.40.1
+      '@algolia/client-common': 5.42.0
+      '@algolia/requester-browser-xhr': 5.42.0
+      '@algolia/requester-fetch': 5.42.0
+      '@algolia/requester-node-http': 5.42.0
 
-  '@algolia/client-personalization@5.40.1':
+  '@algolia/client-personalization@5.42.0':
     dependencies:
-      '@algolia/client-common': 5.40.1
-      '@algolia/requester-browser-xhr': 5.40.1
-      '@algolia/requester-fetch': 5.40.1
-      '@algolia/requester-node-http': 5.40.1
+      '@algolia/client-common': 5.42.0
+      '@algolia/requester-browser-xhr': 5.42.0
+      '@algolia/requester-fetch': 5.42.0
+      '@algolia/requester-node-http': 5.42.0
 
-  '@algolia/client-query-suggestions@5.40.1':
+  '@algolia/client-query-suggestions@5.42.0':
     dependencies:
-      '@algolia/client-common': 5.40.1
-      '@algolia/requester-browser-xhr': 5.40.1
-      '@algolia/requester-fetch': 5.40.1
-      '@algolia/requester-node-http': 5.40.1
+      '@algolia/client-common': 5.42.0
+      '@algolia/requester-browser-xhr': 5.42.0
+      '@algolia/requester-fetch': 5.42.0
+      '@algolia/requester-node-http': 5.42.0
 
-  '@algolia/client-search@5.40.1':
+  '@algolia/client-search@5.42.0':
     dependencies:
-      '@algolia/client-common': 5.40.1
-      '@algolia/requester-browser-xhr': 5.40.1
-      '@algolia/requester-fetch': 5.40.1
-      '@algolia/requester-node-http': 5.40.1
+      '@algolia/client-common': 5.42.0
+      '@algolia/requester-browser-xhr': 5.42.0
+      '@algolia/requester-fetch': 5.42.0
+      '@algolia/requester-node-http': 5.42.0
 
-  '@algolia/ingestion@1.40.1':
+  '@algolia/ingestion@1.42.0':
     dependencies:
-      '@algolia/client-common': 5.40.1
-      '@algolia/requester-browser-xhr': 5.40.1
-      '@algolia/requester-fetch': 5.40.1
-      '@algolia/requester-node-http': 5.40.1
+      '@algolia/client-common': 5.42.0
+      '@algolia/requester-browser-xhr': 5.42.0
+      '@algolia/requester-fetch': 5.42.0
+      '@algolia/requester-node-http': 5.42.0
 
-  '@algolia/monitoring@1.40.1':
+  '@algolia/monitoring@1.42.0':
     dependencies:
-      '@algolia/client-common': 5.40.1
-      '@algolia/requester-browser-xhr': 5.40.1
-      '@algolia/requester-fetch': 5.40.1
-      '@algolia/requester-node-http': 5.40.1
+      '@algolia/client-common': 5.42.0
+      '@algolia/requester-browser-xhr': 5.42.0
+      '@algolia/requester-fetch': 5.42.0
+      '@algolia/requester-node-http': 5.42.0
 
-  '@algolia/recommend@5.40.1':
+  '@algolia/recommend@5.42.0':
     dependencies:
-      '@algolia/client-common': 5.40.1
-      '@algolia/requester-browser-xhr': 5.40.1
-      '@algolia/requester-fetch': 5.40.1
-      '@algolia/requester-node-http': 5.40.1
+      '@algolia/client-common': 5.42.0
+      '@algolia/requester-browser-xhr': 5.42.0
+      '@algolia/requester-fetch': 5.42.0
+      '@algolia/requester-node-http': 5.42.0
 
-  '@algolia/requester-browser-xhr@5.40.1':
+  '@algolia/requester-browser-xhr@5.42.0':
     dependencies:
-      '@algolia/client-common': 5.40.1
+      '@algolia/client-common': 5.42.0
 
-  '@algolia/requester-fetch@5.40.1':
+  '@algolia/requester-fetch@5.42.0':
     dependencies:
-      '@algolia/client-common': 5.40.1
+      '@algolia/client-common': 5.42.0
 
-  '@algolia/requester-node-http@5.40.1':
+  '@algolia/requester-node-http@5.42.0':
     dependencies:
-      '@algolia/client-common': 5.40.1
+      '@algolia/client-common': 5.42.0
 
   '@alloc/quick-lru@5.2.0': {}
 
@@ -11864,16 +11869,16 @@ snapshots:
 
   '@ant-design/icons-svg@4.4.2': {}
 
-  '@ant-design/icons-vue@7.0.1(vue@3.5.22(typescript@5.9.3))':
+  '@ant-design/icons-vue@7.0.1(vue@3.5.23(typescript@5.9.3))':
     dependencies:
       '@ant-design/colors': 6.0.0
       '@ant-design/icons-svg': 4.4.2
-      vue: 3.5.22(typescript@5.9.3)
+      vue: 3.5.23(typescript@5.9.3)
 
   '@antfu/install-pkg@1.1.0':
     dependencies:
       package-manager-detector: 1.5.0
-      tinyexec: 1.0.1
+      tinyexec: 1.0.2
 
   '@antfu/utils@0.7.10': {}
 
@@ -11927,23 +11932,23 @@ snapshots:
 
   '@babel/code-frame@7.27.1':
     dependencies:
-      '@babel/helper-validator-identifier': 7.27.1
+      '@babel/helper-validator-identifier': 7.28.5
       js-tokens: 4.0.0
       picocolors: 1.1.1
 
-  '@babel/compat-data@7.28.4': {}
+  '@babel/compat-data@7.28.5': {}
 
-  '@babel/core@7.28.4':
+  '@babel/core@7.28.5':
     dependencies:
       '@babel/code-frame': 7.27.1
-      '@babel/generator': 7.28.3
+      '@babel/generator': 7.28.5
       '@babel/helper-compilation-targets': 7.27.2
-      '@babel/helper-module-transforms': 7.28.3(@babel/core@7.28.4)
+      '@babel/helper-module-transforms': 7.28.3(@babel/core@7.28.5)
       '@babel/helpers': 7.28.4
-      '@babel/parser': 7.28.4
+      '@babel/parser': 7.28.5
       '@babel/template': 7.27.2
-      '@babel/traverse': 7.28.4
-      '@babel/types': 7.28.4
+      '@babel/traverse': 7.28.5
+      '@babel/types': 7.28.5
       '@jridgewell/remapping': 2.3.5
       convert-source-map: 2.0.0
       debug: 4.4.3
@@ -11953,49 +11958,49 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/generator@7.28.3':
+  '@babel/generator@7.28.5':
     dependencies:
-      '@babel/parser': 7.28.4
-      '@babel/types': 7.28.4
+      '@babel/parser': 7.28.5
+      '@babel/types': 7.28.5
       '@jridgewell/gen-mapping': 0.3.13
       '@jridgewell/trace-mapping': 0.3.31
       jsesc: 3.1.0
 
   '@babel/helper-annotate-as-pure@7.27.3':
     dependencies:
-      '@babel/types': 7.28.4
+      '@babel/types': 7.28.5
 
   '@babel/helper-compilation-targets@7.27.2':
     dependencies:
-      '@babel/compat-data': 7.28.4
+      '@babel/compat-data': 7.28.5
       '@babel/helper-validator-option': 7.27.1
-      browserslist: 4.26.3
+      browserslist: 4.27.0
       lru-cache: 5.1.1
       semver: 6.3.1
 
-  '@babel/helper-create-class-features-plugin@7.28.3(@babel/core@7.28.4)':
+  '@babel/helper-create-class-features-plugin@7.28.5(@babel/core@7.28.5)':
     dependencies:
-      '@babel/core': 7.28.4
+      '@babel/core': 7.28.5
       '@babel/helper-annotate-as-pure': 7.27.3
-      '@babel/helper-member-expression-to-functions': 7.27.1
+      '@babel/helper-member-expression-to-functions': 7.28.5
       '@babel/helper-optimise-call-expression': 7.27.1
-      '@babel/helper-replace-supers': 7.27.1(@babel/core@7.28.4)
+      '@babel/helper-replace-supers': 7.27.1(@babel/core@7.28.5)
       '@babel/helper-skip-transparent-expression-wrappers': 7.27.1
-      '@babel/traverse': 7.28.4
+      '@babel/traverse': 7.28.5
       semver: 6.3.1
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/helper-create-regexp-features-plugin@7.27.1(@babel/core@7.28.4)':
+  '@babel/helper-create-regexp-features-plugin@7.28.5(@babel/core@7.28.5)':
     dependencies:
-      '@babel/core': 7.28.4
+      '@babel/core': 7.28.5
       '@babel/helper-annotate-as-pure': 7.27.3
       regexpu-core: 6.4.0
       semver: 6.3.1
 
-  '@babel/helper-define-polyfill-provider@0.6.5(@babel/core@7.28.4)':
+  '@babel/helper-define-polyfill-provider@0.6.5(@babel/core@7.28.5)':
     dependencies:
-      '@babel/core': 7.28.4
+      '@babel/core': 7.28.5
       '@babel/helper-compilation-targets': 7.27.2
       '@babel/helper-plugin-utils': 7.27.1
       debug: 4.4.3
@@ -12006,602 +12011,602 @@ snapshots:
 
   '@babel/helper-globals@7.28.0': {}
 
-  '@babel/helper-member-expression-to-functions@7.27.1':
+  '@babel/helper-member-expression-to-functions@7.28.5':
     dependencies:
-      '@babel/traverse': 7.28.4
-      '@babel/types': 7.28.4
+      '@babel/traverse': 7.28.5
+      '@babel/types': 7.28.5
     transitivePeerDependencies:
       - supports-color
 
   '@babel/helper-module-imports@7.27.1':
     dependencies:
-      '@babel/traverse': 7.28.4
-      '@babel/types': 7.28.4
+      '@babel/traverse': 7.28.5
+      '@babel/types': 7.28.5
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/helper-module-transforms@7.28.3(@babel/core@7.28.4)':
+  '@babel/helper-module-transforms@7.28.3(@babel/core@7.28.5)':
     dependencies:
-      '@babel/core': 7.28.4
+      '@babel/core': 7.28.5
       '@babel/helper-module-imports': 7.27.1
-      '@babel/helper-validator-identifier': 7.27.1
-      '@babel/traverse': 7.28.4
+      '@babel/helper-validator-identifier': 7.28.5
+      '@babel/traverse': 7.28.5
     transitivePeerDependencies:
       - supports-color
 
   '@babel/helper-optimise-call-expression@7.27.1':
     dependencies:
-      '@babel/types': 7.28.4
+      '@babel/types': 7.28.5
 
   '@babel/helper-plugin-utils@7.27.1': {}
 
-  '@babel/helper-remap-async-to-generator@7.27.1(@babel/core@7.28.4)':
+  '@babel/helper-remap-async-to-generator@7.27.1(@babel/core@7.28.5)':
     dependencies:
-      '@babel/core': 7.28.4
+      '@babel/core': 7.28.5
       '@babel/helper-annotate-as-pure': 7.27.3
       '@babel/helper-wrap-function': 7.28.3
-      '@babel/traverse': 7.28.4
+      '@babel/traverse': 7.28.5
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/helper-replace-supers@7.27.1(@babel/core@7.28.4)':
+  '@babel/helper-replace-supers@7.27.1(@babel/core@7.28.5)':
     dependencies:
-      '@babel/core': 7.28.4
-      '@babel/helper-member-expression-to-functions': 7.27.1
+      '@babel/core': 7.28.5
+      '@babel/helper-member-expression-to-functions': 7.28.5
       '@babel/helper-optimise-call-expression': 7.27.1
-      '@babel/traverse': 7.28.4
+      '@babel/traverse': 7.28.5
     transitivePeerDependencies:
       - supports-color
 
   '@babel/helper-skip-transparent-expression-wrappers@7.27.1':
     dependencies:
-      '@babel/traverse': 7.28.4
-      '@babel/types': 7.28.4
+      '@babel/traverse': 7.28.5
+      '@babel/types': 7.28.5
     transitivePeerDependencies:
       - supports-color
 
   '@babel/helper-string-parser@7.27.1': {}
 
-  '@babel/helper-validator-identifier@7.27.1': {}
+  '@babel/helper-validator-identifier@7.28.5': {}
 
   '@babel/helper-validator-option@7.27.1': {}
 
   '@babel/helper-wrap-function@7.28.3':
     dependencies:
       '@babel/template': 7.27.2
-      '@babel/traverse': 7.28.4
-      '@babel/types': 7.28.4
+      '@babel/traverse': 7.28.5
+      '@babel/types': 7.28.5
     transitivePeerDependencies:
       - supports-color
 
   '@babel/helpers@7.28.4':
     dependencies:
       '@babel/template': 7.27.2
-      '@babel/types': 7.28.4
+      '@babel/types': 7.28.5
 
-  '@babel/parser@7.28.4':
+  '@babel/parser@7.28.5':
     dependencies:
-      '@babel/types': 7.28.4
+      '@babel/types': 7.28.5
 
-  '@babel/plugin-bugfix-firefox-class-in-computed-class-key@7.27.1(@babel/core@7.28.4)':
+  '@babel/plugin-bugfix-firefox-class-in-computed-class-key@7.28.5(@babel/core@7.28.5)':
     dependencies:
-      '@babel/core': 7.28.4
+      '@babel/core': 7.28.5
       '@babel/helper-plugin-utils': 7.27.1
-      '@babel/traverse': 7.28.4
+      '@babel/traverse': 7.28.5
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-bugfix-safari-class-field-initializer-scope@7.27.1(@babel/core@7.28.4)':
+  '@babel/plugin-bugfix-safari-class-field-initializer-scope@7.27.1(@babel/core@7.28.5)':
     dependencies:
-      '@babel/core': 7.28.4
+      '@babel/core': 7.28.5
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@7.27.1(@babel/core@7.28.4)':
+  '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@7.27.1(@babel/core@7.28.5)':
     dependencies:
-      '@babel/core': 7.28.4
+      '@babel/core': 7.28.5
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@7.27.1(@babel/core@7.28.4)':
+  '@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@7.27.1(@babel/core@7.28.5)':
     dependencies:
-      '@babel/core': 7.28.4
+      '@babel/core': 7.28.5
       '@babel/helper-plugin-utils': 7.27.1
       '@babel/helper-skip-transparent-expression-wrappers': 7.27.1
-      '@babel/plugin-transform-optional-chaining': 7.27.1(@babel/core@7.28.4)
+      '@babel/plugin-transform-optional-chaining': 7.28.5(@babel/core@7.28.5)
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@7.28.3(@babel/core@7.28.4)':
+  '@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@7.28.3(@babel/core@7.28.5)':
     dependencies:
-      '@babel/core': 7.28.4
+      '@babel/core': 7.28.5
       '@babel/helper-plugin-utils': 7.27.1
-      '@babel/traverse': 7.28.4
+      '@babel/traverse': 7.28.5
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-proposal-decorators@7.28.0(@babel/core@7.28.4)':
+  '@babel/plugin-proposal-decorators@7.28.0(@babel/core@7.28.5)':
     dependencies:
-      '@babel/core': 7.28.4
-      '@babel/helper-create-class-features-plugin': 7.28.3(@babel/core@7.28.4)
+      '@babel/core': 7.28.5
+      '@babel/helper-create-class-features-plugin': 7.28.5(@babel/core@7.28.5)
       '@babel/helper-plugin-utils': 7.27.1
-      '@babel/plugin-syntax-decorators': 7.27.1(@babel/core@7.28.4)
+      '@babel/plugin-syntax-decorators': 7.27.1(@babel/core@7.28.5)
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-proposal-private-property-in-object@7.21.0-placeholder-for-preset-env.2(@babel/core@7.28.4)':
+  '@babel/plugin-proposal-private-property-in-object@7.21.0-placeholder-for-preset-env.2(@babel/core@7.28.5)':
     dependencies:
-      '@babel/core': 7.28.4
+      '@babel/core': 7.28.5
 
-  '@babel/plugin-syntax-decorators@7.27.1(@babel/core@7.28.4)':
+  '@babel/plugin-syntax-decorators@7.27.1(@babel/core@7.28.5)':
     dependencies:
-      '@babel/core': 7.28.4
+      '@babel/core': 7.28.5
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-syntax-import-assertions@7.27.1(@babel/core@7.28.4)':
+  '@babel/plugin-syntax-import-assertions@7.27.1(@babel/core@7.28.5)':
     dependencies:
-      '@babel/core': 7.28.4
+      '@babel/core': 7.28.5
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-syntax-import-attributes@7.27.1(@babel/core@7.28.4)':
+  '@babel/plugin-syntax-import-attributes@7.27.1(@babel/core@7.28.5)':
     dependencies:
-      '@babel/core': 7.28.4
+      '@babel/core': 7.28.5
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-syntax-import-meta@7.10.4(@babel/core@7.28.4)':
+  '@babel/plugin-syntax-import-meta@7.10.4(@babel/core@7.28.5)':
     dependencies:
-      '@babel/core': 7.28.4
+      '@babel/core': 7.28.5
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-syntax-jsx@7.27.1(@babel/core@7.28.4)':
+  '@babel/plugin-syntax-jsx@7.27.1(@babel/core@7.28.5)':
     dependencies:
-      '@babel/core': 7.28.4
+      '@babel/core': 7.28.5
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-syntax-typescript@7.27.1(@babel/core@7.28.4)':
+  '@babel/plugin-syntax-typescript@7.27.1(@babel/core@7.28.5)':
     dependencies:
-      '@babel/core': 7.28.4
+      '@babel/core': 7.28.5
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-syntax-unicode-sets-regex@7.18.6(@babel/core@7.28.4)':
+  '@babel/plugin-syntax-unicode-sets-regex@7.18.6(@babel/core@7.28.5)':
     dependencies:
-      '@babel/core': 7.28.4
-      '@babel/helper-create-regexp-features-plugin': 7.27.1(@babel/core@7.28.4)
+      '@babel/core': 7.28.5
+      '@babel/helper-create-regexp-features-plugin': 7.28.5(@babel/core@7.28.5)
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-transform-arrow-functions@7.27.1(@babel/core@7.28.4)':
+  '@babel/plugin-transform-arrow-functions@7.27.1(@babel/core@7.28.5)':
     dependencies:
-      '@babel/core': 7.28.4
+      '@babel/core': 7.28.5
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-transform-async-generator-functions@7.28.0(@babel/core@7.28.4)':
+  '@babel/plugin-transform-async-generator-functions@7.28.0(@babel/core@7.28.5)':
     dependencies:
-      '@babel/core': 7.28.4
+      '@babel/core': 7.28.5
       '@babel/helper-plugin-utils': 7.27.1
-      '@babel/helper-remap-async-to-generator': 7.27.1(@babel/core@7.28.4)
-      '@babel/traverse': 7.28.4
+      '@babel/helper-remap-async-to-generator': 7.27.1(@babel/core@7.28.5)
+      '@babel/traverse': 7.28.5
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-async-to-generator@7.27.1(@babel/core@7.28.4)':
+  '@babel/plugin-transform-async-to-generator@7.27.1(@babel/core@7.28.5)':
     dependencies:
-      '@babel/core': 7.28.4
+      '@babel/core': 7.28.5
       '@babel/helper-module-imports': 7.27.1
       '@babel/helper-plugin-utils': 7.27.1
-      '@babel/helper-remap-async-to-generator': 7.27.1(@babel/core@7.28.4)
+      '@babel/helper-remap-async-to-generator': 7.27.1(@babel/core@7.28.5)
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-block-scoped-functions@7.27.1(@babel/core@7.28.4)':
+  '@babel/plugin-transform-block-scoped-functions@7.27.1(@babel/core@7.28.5)':
     dependencies:
-      '@babel/core': 7.28.4
+      '@babel/core': 7.28.5
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-transform-block-scoping@7.28.4(@babel/core@7.28.4)':
+  '@babel/plugin-transform-block-scoping@7.28.5(@babel/core@7.28.5)':
     dependencies:
-      '@babel/core': 7.28.4
+      '@babel/core': 7.28.5
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-transform-class-properties@7.27.1(@babel/core@7.28.4)':
+  '@babel/plugin-transform-class-properties@7.27.1(@babel/core@7.28.5)':
     dependencies:
-      '@babel/core': 7.28.4
-      '@babel/helper-create-class-features-plugin': 7.28.3(@babel/core@7.28.4)
+      '@babel/core': 7.28.5
+      '@babel/helper-create-class-features-plugin': 7.28.5(@babel/core@7.28.5)
       '@babel/helper-plugin-utils': 7.27.1
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-class-static-block@7.28.3(@babel/core@7.28.4)':
+  '@babel/plugin-transform-class-static-block@7.28.3(@babel/core@7.28.5)':
     dependencies:
-      '@babel/core': 7.28.4
-      '@babel/helper-create-class-features-plugin': 7.28.3(@babel/core@7.28.4)
+      '@babel/core': 7.28.5
+      '@babel/helper-create-class-features-plugin': 7.28.5(@babel/core@7.28.5)
       '@babel/helper-plugin-utils': 7.27.1
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-classes@7.28.4(@babel/core@7.28.4)':
+  '@babel/plugin-transform-classes@7.28.4(@babel/core@7.28.5)':
     dependencies:
-      '@babel/core': 7.28.4
+      '@babel/core': 7.28.5
       '@babel/helper-annotate-as-pure': 7.27.3
       '@babel/helper-compilation-targets': 7.27.2
       '@babel/helper-globals': 7.28.0
       '@babel/helper-plugin-utils': 7.27.1
-      '@babel/helper-replace-supers': 7.27.1(@babel/core@7.28.4)
-      '@babel/traverse': 7.28.4
+      '@babel/helper-replace-supers': 7.27.1(@babel/core@7.28.5)
+      '@babel/traverse': 7.28.5
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-computed-properties@7.27.1(@babel/core@7.28.4)':
+  '@babel/plugin-transform-computed-properties@7.27.1(@babel/core@7.28.5)':
     dependencies:
-      '@babel/core': 7.28.4
+      '@babel/core': 7.28.5
       '@babel/helper-plugin-utils': 7.27.1
       '@babel/template': 7.27.2
 
-  '@babel/plugin-transform-destructuring@7.28.0(@babel/core@7.28.4)':
+  '@babel/plugin-transform-destructuring@7.28.5(@babel/core@7.28.5)':
     dependencies:
-      '@babel/core': 7.28.4
+      '@babel/core': 7.28.5
       '@babel/helper-plugin-utils': 7.27.1
-      '@babel/traverse': 7.28.4
+      '@babel/traverse': 7.28.5
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-dotall-regex@7.27.1(@babel/core@7.28.4)':
+  '@babel/plugin-transform-dotall-regex@7.27.1(@babel/core@7.28.5)':
     dependencies:
-      '@babel/core': 7.28.4
-      '@babel/helper-create-regexp-features-plugin': 7.27.1(@babel/core@7.28.4)
+      '@babel/core': 7.28.5
+      '@babel/helper-create-regexp-features-plugin': 7.28.5(@babel/core@7.28.5)
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-transform-duplicate-keys@7.27.1(@babel/core@7.28.4)':
+  '@babel/plugin-transform-duplicate-keys@7.27.1(@babel/core@7.28.5)':
     dependencies:
-      '@babel/core': 7.28.4
+      '@babel/core': 7.28.5
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-transform-duplicate-named-capturing-groups-regex@7.27.1(@babel/core@7.28.4)':
+  '@babel/plugin-transform-duplicate-named-capturing-groups-regex@7.27.1(@babel/core@7.28.5)':
     dependencies:
-      '@babel/core': 7.28.4
-      '@babel/helper-create-regexp-features-plugin': 7.27.1(@babel/core@7.28.4)
+      '@babel/core': 7.28.5
+      '@babel/helper-create-regexp-features-plugin': 7.28.5(@babel/core@7.28.5)
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-transform-dynamic-import@7.27.1(@babel/core@7.28.4)':
+  '@babel/plugin-transform-dynamic-import@7.27.1(@babel/core@7.28.5)':
     dependencies:
-      '@babel/core': 7.28.4
+      '@babel/core': 7.28.5
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-transform-explicit-resource-management@7.28.0(@babel/core@7.28.4)':
+  '@babel/plugin-transform-explicit-resource-management@7.28.0(@babel/core@7.28.5)':
     dependencies:
-      '@babel/core': 7.28.4
+      '@babel/core': 7.28.5
       '@babel/helper-plugin-utils': 7.27.1
-      '@babel/plugin-transform-destructuring': 7.28.0(@babel/core@7.28.4)
+      '@babel/plugin-transform-destructuring': 7.28.5(@babel/core@7.28.5)
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-exponentiation-operator@7.27.1(@babel/core@7.28.4)':
+  '@babel/plugin-transform-exponentiation-operator@7.28.5(@babel/core@7.28.5)':
     dependencies:
-      '@babel/core': 7.28.4
+      '@babel/core': 7.28.5
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-transform-export-namespace-from@7.27.1(@babel/core@7.28.4)':
+  '@babel/plugin-transform-export-namespace-from@7.27.1(@babel/core@7.28.5)':
     dependencies:
-      '@babel/core': 7.28.4
+      '@babel/core': 7.28.5
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-transform-for-of@7.27.1(@babel/core@7.28.4)':
+  '@babel/plugin-transform-for-of@7.27.1(@babel/core@7.28.5)':
     dependencies:
-      '@babel/core': 7.28.4
+      '@babel/core': 7.28.5
       '@babel/helper-plugin-utils': 7.27.1
       '@babel/helper-skip-transparent-expression-wrappers': 7.27.1
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-function-name@7.27.1(@babel/core@7.28.4)':
+  '@babel/plugin-transform-function-name@7.27.1(@babel/core@7.28.5)':
     dependencies:
-      '@babel/core': 7.28.4
+      '@babel/core': 7.28.5
       '@babel/helper-compilation-targets': 7.27.2
       '@babel/helper-plugin-utils': 7.27.1
-      '@babel/traverse': 7.28.4
+      '@babel/traverse': 7.28.5
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-json-strings@7.27.1(@babel/core@7.28.4)':
+  '@babel/plugin-transform-json-strings@7.27.1(@babel/core@7.28.5)':
     dependencies:
-      '@babel/core': 7.28.4
+      '@babel/core': 7.28.5
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-transform-literals@7.27.1(@babel/core@7.28.4)':
+  '@babel/plugin-transform-literals@7.27.1(@babel/core@7.28.5)':
     dependencies:
-      '@babel/core': 7.28.4
+      '@babel/core': 7.28.5
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-transform-logical-assignment-operators@7.27.1(@babel/core@7.28.4)':
+  '@babel/plugin-transform-logical-assignment-operators@7.28.5(@babel/core@7.28.5)':
     dependencies:
-      '@babel/core': 7.28.4
+      '@babel/core': 7.28.5
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-transform-member-expression-literals@7.27.1(@babel/core@7.28.4)':
+  '@babel/plugin-transform-member-expression-literals@7.27.1(@babel/core@7.28.5)':
     dependencies:
-      '@babel/core': 7.28.4
+      '@babel/core': 7.28.5
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-transform-modules-amd@7.27.1(@babel/core@7.28.4)':
+  '@babel/plugin-transform-modules-amd@7.27.1(@babel/core@7.28.5)':
     dependencies:
-      '@babel/core': 7.28.4
-      '@babel/helper-module-transforms': 7.28.3(@babel/core@7.28.4)
+      '@babel/core': 7.28.5
+      '@babel/helper-module-transforms': 7.28.3(@babel/core@7.28.5)
       '@babel/helper-plugin-utils': 7.27.1
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-modules-commonjs@7.27.1(@babel/core@7.28.4)':
+  '@babel/plugin-transform-modules-commonjs@7.27.1(@babel/core@7.28.5)':
     dependencies:
-      '@babel/core': 7.28.4
-      '@babel/helper-module-transforms': 7.28.3(@babel/core@7.28.4)
+      '@babel/core': 7.28.5
+      '@babel/helper-module-transforms': 7.28.3(@babel/core@7.28.5)
       '@babel/helper-plugin-utils': 7.27.1
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-modules-systemjs@7.27.1(@babel/core@7.28.4)':
+  '@babel/plugin-transform-modules-systemjs@7.28.5(@babel/core@7.28.5)':
     dependencies:
-      '@babel/core': 7.28.4
-      '@babel/helper-module-transforms': 7.28.3(@babel/core@7.28.4)
+      '@babel/core': 7.28.5
+      '@babel/helper-module-transforms': 7.28.3(@babel/core@7.28.5)
       '@babel/helper-plugin-utils': 7.27.1
-      '@babel/helper-validator-identifier': 7.27.1
-      '@babel/traverse': 7.28.4
+      '@babel/helper-validator-identifier': 7.28.5
+      '@babel/traverse': 7.28.5
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-modules-umd@7.27.1(@babel/core@7.28.4)':
+  '@babel/plugin-transform-modules-umd@7.27.1(@babel/core@7.28.5)':
     dependencies:
-      '@babel/core': 7.28.4
-      '@babel/helper-module-transforms': 7.28.3(@babel/core@7.28.4)
+      '@babel/core': 7.28.5
+      '@babel/helper-module-transforms': 7.28.3(@babel/core@7.28.5)
       '@babel/helper-plugin-utils': 7.27.1
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-named-capturing-groups-regex@7.27.1(@babel/core@7.28.4)':
+  '@babel/plugin-transform-named-capturing-groups-regex@7.27.1(@babel/core@7.28.5)':
     dependencies:
-      '@babel/core': 7.28.4
-      '@babel/helper-create-regexp-features-plugin': 7.27.1(@babel/core@7.28.4)
+      '@babel/core': 7.28.5
+      '@babel/helper-create-regexp-features-plugin': 7.28.5(@babel/core@7.28.5)
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-transform-new-target@7.27.1(@babel/core@7.28.4)':
+  '@babel/plugin-transform-new-target@7.27.1(@babel/core@7.28.5)':
     dependencies:
-      '@babel/core': 7.28.4
+      '@babel/core': 7.28.5
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-transform-nullish-coalescing-operator@7.27.1(@babel/core@7.28.4)':
+  '@babel/plugin-transform-nullish-coalescing-operator@7.27.1(@babel/core@7.28.5)':
     dependencies:
-      '@babel/core': 7.28.4
+      '@babel/core': 7.28.5
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-transform-numeric-separator@7.27.1(@babel/core@7.28.4)':
+  '@babel/plugin-transform-numeric-separator@7.27.1(@babel/core@7.28.5)':
     dependencies:
-      '@babel/core': 7.28.4
+      '@babel/core': 7.28.5
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-transform-object-rest-spread@7.28.4(@babel/core@7.28.4)':
+  '@babel/plugin-transform-object-rest-spread@7.28.4(@babel/core@7.28.5)':
     dependencies:
-      '@babel/core': 7.28.4
+      '@babel/core': 7.28.5
       '@babel/helper-compilation-targets': 7.27.2
       '@babel/helper-plugin-utils': 7.27.1
-      '@babel/plugin-transform-destructuring': 7.28.0(@babel/core@7.28.4)
-      '@babel/plugin-transform-parameters': 7.27.7(@babel/core@7.28.4)
-      '@babel/traverse': 7.28.4
+      '@babel/plugin-transform-destructuring': 7.28.5(@babel/core@7.28.5)
+      '@babel/plugin-transform-parameters': 7.27.7(@babel/core@7.28.5)
+      '@babel/traverse': 7.28.5
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-object-super@7.27.1(@babel/core@7.28.4)':
+  '@babel/plugin-transform-object-super@7.27.1(@babel/core@7.28.5)':
     dependencies:
-      '@babel/core': 7.28.4
+      '@babel/core': 7.28.5
       '@babel/helper-plugin-utils': 7.27.1
-      '@babel/helper-replace-supers': 7.27.1(@babel/core@7.28.4)
+      '@babel/helper-replace-supers': 7.27.1(@babel/core@7.28.5)
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-optional-catch-binding@7.27.1(@babel/core@7.28.4)':
+  '@babel/plugin-transform-optional-catch-binding@7.27.1(@babel/core@7.28.5)':
     dependencies:
-      '@babel/core': 7.28.4
+      '@babel/core': 7.28.5
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-transform-optional-chaining@7.27.1(@babel/core@7.28.4)':
+  '@babel/plugin-transform-optional-chaining@7.28.5(@babel/core@7.28.5)':
     dependencies:
-      '@babel/core': 7.28.4
+      '@babel/core': 7.28.5
       '@babel/helper-plugin-utils': 7.27.1
       '@babel/helper-skip-transparent-expression-wrappers': 7.27.1
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-parameters@7.27.7(@babel/core@7.28.4)':
+  '@babel/plugin-transform-parameters@7.27.7(@babel/core@7.28.5)':
     dependencies:
-      '@babel/core': 7.28.4
+      '@babel/core': 7.28.5
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-transform-private-methods@7.27.1(@babel/core@7.28.4)':
+  '@babel/plugin-transform-private-methods@7.27.1(@babel/core@7.28.5)':
     dependencies:
-      '@babel/core': 7.28.4
-      '@babel/helper-create-class-features-plugin': 7.28.3(@babel/core@7.28.4)
+      '@babel/core': 7.28.5
+      '@babel/helper-create-class-features-plugin': 7.28.5(@babel/core@7.28.5)
       '@babel/helper-plugin-utils': 7.27.1
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-private-property-in-object@7.27.1(@babel/core@7.28.4)':
+  '@babel/plugin-transform-private-property-in-object@7.27.1(@babel/core@7.28.5)':
     dependencies:
-      '@babel/core': 7.28.4
+      '@babel/core': 7.28.5
       '@babel/helper-annotate-as-pure': 7.27.3
-      '@babel/helper-create-class-features-plugin': 7.28.3(@babel/core@7.28.4)
+      '@babel/helper-create-class-features-plugin': 7.28.5(@babel/core@7.28.5)
       '@babel/helper-plugin-utils': 7.27.1
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-property-literals@7.27.1(@babel/core@7.28.4)':
+  '@babel/plugin-transform-property-literals@7.27.1(@babel/core@7.28.5)':
     dependencies:
-      '@babel/core': 7.28.4
+      '@babel/core': 7.28.5
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-transform-regenerator@7.28.4(@babel/core@7.28.4)':
+  '@babel/plugin-transform-regenerator@7.28.4(@babel/core@7.28.5)':
     dependencies:
-      '@babel/core': 7.28.4
+      '@babel/core': 7.28.5
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-transform-regexp-modifiers@7.27.1(@babel/core@7.28.4)':
+  '@babel/plugin-transform-regexp-modifiers@7.27.1(@babel/core@7.28.5)':
     dependencies:
-      '@babel/core': 7.28.4
-      '@babel/helper-create-regexp-features-plugin': 7.27.1(@babel/core@7.28.4)
+      '@babel/core': 7.28.5
+      '@babel/helper-create-regexp-features-plugin': 7.28.5(@babel/core@7.28.5)
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-transform-reserved-words@7.27.1(@babel/core@7.28.4)':
+  '@babel/plugin-transform-reserved-words@7.27.1(@babel/core@7.28.5)':
     dependencies:
-      '@babel/core': 7.28.4
+      '@babel/core': 7.28.5
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-transform-shorthand-properties@7.27.1(@babel/core@7.28.4)':
+  '@babel/plugin-transform-shorthand-properties@7.27.1(@babel/core@7.28.5)':
     dependencies:
-      '@babel/core': 7.28.4
+      '@babel/core': 7.28.5
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-transform-spread@7.27.1(@babel/core@7.28.4)':
+  '@babel/plugin-transform-spread@7.27.1(@babel/core@7.28.5)':
     dependencies:
-      '@babel/core': 7.28.4
+      '@babel/core': 7.28.5
       '@babel/helper-plugin-utils': 7.27.1
       '@babel/helper-skip-transparent-expression-wrappers': 7.27.1
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-sticky-regex@7.27.1(@babel/core@7.28.4)':
+  '@babel/plugin-transform-sticky-regex@7.27.1(@babel/core@7.28.5)':
     dependencies:
-      '@babel/core': 7.28.4
+      '@babel/core': 7.28.5
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-transform-template-literals@7.27.1(@babel/core@7.28.4)':
+  '@babel/plugin-transform-template-literals@7.27.1(@babel/core@7.28.5)':
     dependencies:
-      '@babel/core': 7.28.4
+      '@babel/core': 7.28.5
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-transform-typeof-symbol@7.27.1(@babel/core@7.28.4)':
+  '@babel/plugin-transform-typeof-symbol@7.27.1(@babel/core@7.28.5)':
     dependencies:
-      '@babel/core': 7.28.4
+      '@babel/core': 7.28.5
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-transform-typescript@7.28.0(@babel/core@7.28.4)':
+  '@babel/plugin-transform-typescript@7.28.5(@babel/core@7.28.5)':
     dependencies:
-      '@babel/core': 7.28.4
+      '@babel/core': 7.28.5
       '@babel/helper-annotate-as-pure': 7.27.3
-      '@babel/helper-create-class-features-plugin': 7.28.3(@babel/core@7.28.4)
+      '@babel/helper-create-class-features-plugin': 7.28.5(@babel/core@7.28.5)
       '@babel/helper-plugin-utils': 7.27.1
       '@babel/helper-skip-transparent-expression-wrappers': 7.27.1
-      '@babel/plugin-syntax-typescript': 7.27.1(@babel/core@7.28.4)
+      '@babel/plugin-syntax-typescript': 7.27.1(@babel/core@7.28.5)
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-unicode-escapes@7.27.1(@babel/core@7.28.4)':
+  '@babel/plugin-transform-unicode-escapes@7.27.1(@babel/core@7.28.5)':
     dependencies:
-      '@babel/core': 7.28.4
+      '@babel/core': 7.28.5
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-transform-unicode-property-regex@7.27.1(@babel/core@7.28.4)':
+  '@babel/plugin-transform-unicode-property-regex@7.27.1(@babel/core@7.28.5)':
     dependencies:
-      '@babel/core': 7.28.4
-      '@babel/helper-create-regexp-features-plugin': 7.27.1(@babel/core@7.28.4)
+      '@babel/core': 7.28.5
+      '@babel/helper-create-regexp-features-plugin': 7.28.5(@babel/core@7.28.5)
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-transform-unicode-regex@7.27.1(@babel/core@7.28.4)':
+  '@babel/plugin-transform-unicode-regex@7.27.1(@babel/core@7.28.5)':
     dependencies:
-      '@babel/core': 7.28.4
-      '@babel/helper-create-regexp-features-plugin': 7.27.1(@babel/core@7.28.4)
+      '@babel/core': 7.28.5
+      '@babel/helper-create-regexp-features-plugin': 7.28.5(@babel/core@7.28.5)
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-transform-unicode-sets-regex@7.27.1(@babel/core@7.28.4)':
+  '@babel/plugin-transform-unicode-sets-regex@7.27.1(@babel/core@7.28.5)':
     dependencies:
-      '@babel/core': 7.28.4
-      '@babel/helper-create-regexp-features-plugin': 7.27.1(@babel/core@7.28.4)
+      '@babel/core': 7.28.5
+      '@babel/helper-create-regexp-features-plugin': 7.28.5(@babel/core@7.28.5)
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/preset-env@7.28.3(@babel/core@7.28.4)':
+  '@babel/preset-env@7.28.5(@babel/core@7.28.5)':
     dependencies:
-      '@babel/compat-data': 7.28.4
-      '@babel/core': 7.28.4
+      '@babel/compat-data': 7.28.5
+      '@babel/core': 7.28.5
       '@babel/helper-compilation-targets': 7.27.2
       '@babel/helper-plugin-utils': 7.27.1
       '@babel/helper-validator-option': 7.27.1
-      '@babel/plugin-bugfix-firefox-class-in-computed-class-key': 7.27.1(@babel/core@7.28.4)
-      '@babel/plugin-bugfix-safari-class-field-initializer-scope': 7.27.1(@babel/core@7.28.4)
-      '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression': 7.27.1(@babel/core@7.28.4)
-      '@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining': 7.27.1(@babel/core@7.28.4)
-      '@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly': 7.28.3(@babel/core@7.28.4)
-      '@babel/plugin-proposal-private-property-in-object': 7.21.0-placeholder-for-preset-env.2(@babel/core@7.28.4)
-      '@babel/plugin-syntax-import-assertions': 7.27.1(@babel/core@7.28.4)
-      '@babel/plugin-syntax-import-attributes': 7.27.1(@babel/core@7.28.4)
-      '@babel/plugin-syntax-unicode-sets-regex': 7.18.6(@babel/core@7.28.4)
-      '@babel/plugin-transform-arrow-functions': 7.27.1(@babel/core@7.28.4)
-      '@babel/plugin-transform-async-generator-functions': 7.28.0(@babel/core@7.28.4)
-      '@babel/plugin-transform-async-to-generator': 7.27.1(@babel/core@7.28.4)
-      '@babel/plugin-transform-block-scoped-functions': 7.27.1(@babel/core@7.28.4)
-      '@babel/plugin-transform-block-scoping': 7.28.4(@babel/core@7.28.4)
-      '@babel/plugin-transform-class-properties': 7.27.1(@babel/core@7.28.4)
-      '@babel/plugin-transform-class-static-block': 7.28.3(@babel/core@7.28.4)
-      '@babel/plugin-transform-classes': 7.28.4(@babel/core@7.28.4)
-      '@babel/plugin-transform-computed-properties': 7.27.1(@babel/core@7.28.4)
-      '@babel/plugin-transform-destructuring': 7.28.0(@babel/core@7.28.4)
-      '@babel/plugin-transform-dotall-regex': 7.27.1(@babel/core@7.28.4)
-      '@babel/plugin-transform-duplicate-keys': 7.27.1(@babel/core@7.28.4)
-      '@babel/plugin-transform-duplicate-named-capturing-groups-regex': 7.27.1(@babel/core@7.28.4)
-      '@babel/plugin-transform-dynamic-import': 7.27.1(@babel/core@7.28.4)
-      '@babel/plugin-transform-explicit-resource-management': 7.28.0(@babel/core@7.28.4)
-      '@babel/plugin-transform-exponentiation-operator': 7.27.1(@babel/core@7.28.4)
-      '@babel/plugin-transform-export-namespace-from': 7.27.1(@babel/core@7.28.4)
-      '@babel/plugin-transform-for-of': 7.27.1(@babel/core@7.28.4)
-      '@babel/plugin-transform-function-name': 7.27.1(@babel/core@7.28.4)
-      '@babel/plugin-transform-json-strings': 7.27.1(@babel/core@7.28.4)
-      '@babel/plugin-transform-literals': 7.27.1(@babel/core@7.28.4)
-      '@babel/plugin-transform-logical-assignment-operators': 7.27.1(@babel/core@7.28.4)
-      '@babel/plugin-transform-member-expression-literals': 7.27.1(@babel/core@7.28.4)
-      '@babel/plugin-transform-modules-amd': 7.27.1(@babel/core@7.28.4)
-      '@babel/plugin-transform-modules-commonjs': 7.27.1(@babel/core@7.28.4)
-      '@babel/plugin-transform-modules-systemjs': 7.27.1(@babel/core@7.28.4)
-      '@babel/plugin-transform-modules-umd': 7.27.1(@babel/core@7.28.4)
-      '@babel/plugin-transform-named-capturing-groups-regex': 7.27.1(@babel/core@7.28.4)
-      '@babel/plugin-transform-new-target': 7.27.1(@babel/core@7.28.4)
-      '@babel/plugin-transform-nullish-coalescing-operator': 7.27.1(@babel/core@7.28.4)
-      '@babel/plugin-transform-numeric-separator': 7.27.1(@babel/core@7.28.4)
-      '@babel/plugin-transform-object-rest-spread': 7.28.4(@babel/core@7.28.4)
-      '@babel/plugin-transform-object-super': 7.27.1(@babel/core@7.28.4)
-      '@babel/plugin-transform-optional-catch-binding': 7.27.1(@babel/core@7.28.4)
-      '@babel/plugin-transform-optional-chaining': 7.27.1(@babel/core@7.28.4)
-      '@babel/plugin-transform-parameters': 7.27.7(@babel/core@7.28.4)
-      '@babel/plugin-transform-private-methods': 7.27.1(@babel/core@7.28.4)
-      '@babel/plugin-transform-private-property-in-object': 7.27.1(@babel/core@7.28.4)
-      '@babel/plugin-transform-property-literals': 7.27.1(@babel/core@7.28.4)
-      '@babel/plugin-transform-regenerator': 7.28.4(@babel/core@7.28.4)
-      '@babel/plugin-transform-regexp-modifiers': 7.27.1(@babel/core@7.28.4)
-      '@babel/plugin-transform-reserved-words': 7.27.1(@babel/core@7.28.4)
-      '@babel/plugin-transform-shorthand-properties': 7.27.1(@babel/core@7.28.4)
-      '@babel/plugin-transform-spread': 7.27.1(@babel/core@7.28.4)
-      '@babel/plugin-transform-sticky-regex': 7.27.1(@babel/core@7.28.4)
-      '@babel/plugin-transform-template-literals': 7.27.1(@babel/core@7.28.4)
-      '@babel/plugin-transform-typeof-symbol': 7.27.1(@babel/core@7.28.4)
-      '@babel/plugin-transform-unicode-escapes': 7.27.1(@babel/core@7.28.4)
-      '@babel/plugin-transform-unicode-property-regex': 7.27.1(@babel/core@7.28.4)
-      '@babel/plugin-transform-unicode-regex': 7.27.1(@babel/core@7.28.4)
-      '@babel/plugin-transform-unicode-sets-regex': 7.27.1(@babel/core@7.28.4)
-      '@babel/preset-modules': 0.1.6-no-external-plugins(@babel/core@7.28.4)
-      babel-plugin-polyfill-corejs2: 0.4.14(@babel/core@7.28.4)
-      babel-plugin-polyfill-corejs3: 0.13.0(@babel/core@7.28.4)
-      babel-plugin-polyfill-regenerator: 0.6.5(@babel/core@7.28.4)
+      '@babel/plugin-bugfix-firefox-class-in-computed-class-key': 7.28.5(@babel/core@7.28.5)
+      '@babel/plugin-bugfix-safari-class-field-initializer-scope': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly': 7.28.3(@babel/core@7.28.5)
+      '@babel/plugin-proposal-private-property-in-object': 7.21.0-placeholder-for-preset-env.2(@babel/core@7.28.5)
+      '@babel/plugin-syntax-import-assertions': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-syntax-import-attributes': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-syntax-unicode-sets-regex': 7.18.6(@babel/core@7.28.5)
+      '@babel/plugin-transform-arrow-functions': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-async-generator-functions': 7.28.0(@babel/core@7.28.5)
+      '@babel/plugin-transform-async-to-generator': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-block-scoped-functions': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-block-scoping': 7.28.5(@babel/core@7.28.5)
+      '@babel/plugin-transform-class-properties': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-class-static-block': 7.28.3(@babel/core@7.28.5)
+      '@babel/plugin-transform-classes': 7.28.4(@babel/core@7.28.5)
+      '@babel/plugin-transform-computed-properties': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-destructuring': 7.28.5(@babel/core@7.28.5)
+      '@babel/plugin-transform-dotall-regex': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-duplicate-keys': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-duplicate-named-capturing-groups-regex': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-dynamic-import': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-explicit-resource-management': 7.28.0(@babel/core@7.28.5)
+      '@babel/plugin-transform-exponentiation-operator': 7.28.5(@babel/core@7.28.5)
+      '@babel/plugin-transform-export-namespace-from': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-for-of': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-function-name': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-json-strings': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-literals': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-logical-assignment-operators': 7.28.5(@babel/core@7.28.5)
+      '@babel/plugin-transform-member-expression-literals': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-modules-amd': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-modules-commonjs': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-modules-systemjs': 7.28.5(@babel/core@7.28.5)
+      '@babel/plugin-transform-modules-umd': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-named-capturing-groups-regex': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-new-target': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-nullish-coalescing-operator': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-numeric-separator': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-object-rest-spread': 7.28.4(@babel/core@7.28.5)
+      '@babel/plugin-transform-object-super': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-optional-catch-binding': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-optional-chaining': 7.28.5(@babel/core@7.28.5)
+      '@babel/plugin-transform-parameters': 7.27.7(@babel/core@7.28.5)
+      '@babel/plugin-transform-private-methods': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-private-property-in-object': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-property-literals': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-regenerator': 7.28.4(@babel/core@7.28.5)
+      '@babel/plugin-transform-regexp-modifiers': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-reserved-words': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-shorthand-properties': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-spread': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-sticky-regex': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-template-literals': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-typeof-symbol': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-unicode-escapes': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-unicode-property-regex': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-unicode-regex': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-unicode-sets-regex': 7.27.1(@babel/core@7.28.5)
+      '@babel/preset-modules': 0.1.6-no-external-plugins(@babel/core@7.28.5)
+      babel-plugin-polyfill-corejs2: 0.4.14(@babel/core@7.28.5)
+      babel-plugin-polyfill-corejs3: 0.13.0(@babel/core@7.28.5)
+      babel-plugin-polyfill-regenerator: 0.6.5(@babel/core@7.28.5)
       core-js-compat: 3.46.0
       semver: 6.3.1
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/preset-modules@0.1.6-no-external-plugins(@babel/core@7.28.4)':
+  '@babel/preset-modules@0.1.6-no-external-plugins(@babel/core@7.28.5)':
     dependencies:
-      '@babel/core': 7.28.4
+      '@babel/core': 7.28.5
       '@babel/helper-plugin-utils': 7.27.1
-      '@babel/types': 7.28.4
+      '@babel/types': 7.28.5
       esutils: 2.0.3
 
-  '@babel/preset-typescript@7.27.1(@babel/core@7.28.4)':
+  '@babel/preset-typescript@7.28.5(@babel/core@7.28.5)':
     dependencies:
-      '@babel/core': 7.28.4
+      '@babel/core': 7.28.5
       '@babel/helper-plugin-utils': 7.27.1
       '@babel/helper-validator-option': 7.27.1
-      '@babel/plugin-syntax-jsx': 7.27.1(@babel/core@7.28.4)
-      '@babel/plugin-transform-modules-commonjs': 7.27.1(@babel/core@7.28.4)
-      '@babel/plugin-transform-typescript': 7.28.0(@babel/core@7.28.4)
+      '@babel/plugin-syntax-jsx': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-modules-commonjs': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-typescript': 7.28.5(@babel/core@7.28.5)
     transitivePeerDependencies:
       - supports-color
 
@@ -12614,31 +12619,31 @@ snapshots:
   '@babel/template@7.27.2':
     dependencies:
       '@babel/code-frame': 7.27.1
-      '@babel/parser': 7.28.4
-      '@babel/types': 7.28.4
+      '@babel/parser': 7.28.5
+      '@babel/types': 7.28.5
 
-  '@babel/traverse@7.28.4':
+  '@babel/traverse@7.28.5':
     dependencies:
       '@babel/code-frame': 7.27.1
-      '@babel/generator': 7.28.3
+      '@babel/generator': 7.28.5
       '@babel/helper-globals': 7.28.0
-      '@babel/parser': 7.28.4
+      '@babel/parser': 7.28.5
       '@babel/template': 7.27.2
-      '@babel/types': 7.28.4
+      '@babel/types': 7.28.5
       debug: 4.4.3
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/types@7.28.4':
+  '@babel/types@7.28.5':
     dependencies:
       '@babel/helper-string-parser': 7.27.1
-      '@babel/helper-validator-identifier': 7.27.1
+      '@babel/helper-validator-identifier': 7.28.5
 
   '@bpmn-io/cm-theme@0.1.0-alpha.2':
     dependencies:
       '@codemirror/language': 6.11.3
       '@codemirror/view': 6.38.6
-      '@lezer/highlight': 1.2.2
+      '@lezer/highlight': 1.2.3
 
   '@bpmn-io/diagram-js-ui@0.2.3':
     dependencies:
@@ -12654,13 +12659,13 @@ snapshots:
       '@bpmn-io/feel-lint': 2.1.0
       '@bpmn-io/lang-feel': 2.4.0
       '@camunda/feel-builtins': 0.2.0
-      '@codemirror/autocomplete': 6.19.0
-      '@codemirror/commands': 6.9.0
+      '@codemirror/autocomplete': 6.19.1
+      '@codemirror/commands': 6.10.0
       '@codemirror/language': 6.11.3
-      '@codemirror/lint': 6.9.0
+      '@codemirror/lint': 6.9.2
       '@codemirror/state': 6.5.2
       '@codemirror/view': 6.38.6
-      '@lezer/highlight': 1.2.2
+      '@lezer/highlight': 1.2.3
       min-dom: 4.2.1
 
   '@bpmn-io/feel-lint@1.4.0':
@@ -12676,44 +12681,48 @@ snapshots:
   '@bpmn-io/lang-feel@2.4.0':
     dependencies:
       '@bpmn-io/lezer-feel': 1.9.0
-      '@codemirror/autocomplete': 6.19.0
+      '@codemirror/autocomplete': 6.19.1
       '@codemirror/language': 6.11.3
       '@lezer/common': 1.3.0
 
   '@bpmn-io/lezer-feel@1.9.0':
     dependencies:
-      '@lezer/highlight': 1.2.2
-      '@lezer/lr': 1.4.2
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.3
       min-dash: 4.2.3
 
-  '@bpmn-io/properties-panel@3.33.0':
+  '@bpmn-io/properties-panel@3.33.2':
     dependencies:
       '@bpmn-io/feel-editor': 1.12.0
+      '@carbon/icons': 11.70.0
       '@codemirror/view': 6.38.6
       classnames: 2.5.1
       feelers: 1.4.0
-      focus-trap: 7.6.5
+      focus-trap: 7.6.6
       min-dash: 4.2.3
       min-dom: 4.2.1
 
   '@cacheable/memoize@2.0.3':
     dependencies:
-      '@cacheable/utils': 2.1.0
+      '@cacheable/utils': 2.2.0
 
-  '@cacheable/memory@2.0.3':
+  '@cacheable/memory@2.0.4':
     dependencies:
-      '@cacheable/memoize': 2.0.3
-      '@cacheable/utils': 2.1.0
+      '@cacheable/utils': 2.2.0
       '@keyv/bigmap': 1.1.0(keyv@5.5.3)
       hookified: 1.12.2
       keyv: 5.5.3
 
-  '@cacheable/utils@2.1.0':
+  '@cacheable/utils@2.2.0':
     dependencies:
       keyv: 5.5.3
 
   '@camunda/feel-builtins@0.2.0': {}
 
+  '@carbon/icons@11.70.0':
+    dependencies:
+      '@ibm/telemetry-js': 1.10.2
+
   '@changesets/apply-release-plan@7.0.13':
     dependencies:
       '@changesets/config': 3.1.1
@@ -12751,7 +12760,7 @@ snapshots:
     transitivePeerDependencies:
       - encoding
 
-  '@changesets/cli@2.29.7(@types/node@22.18.12)':
+  '@changesets/cli@2.29.7(@types/node@24.10.0)':
     dependencies:
       '@changesets/apply-release-plan': 7.0.13
       '@changesets/assemble-release-plan': 6.0.9
@@ -12767,7 +12776,7 @@ snapshots:
       '@changesets/should-skip-package': 0.1.2
       '@changesets/types': 6.1.0
       '@changesets/write': 0.4.0
-      '@inquirer/external-editor': 1.0.2(@types/node@22.18.12)
+      '@inquirer/external-editor': 1.0.2(@types/node@24.10.0)
       '@manypkg/get-packages': 1.1.3
       ansi-colors: 4.1.3
       ci-info: 3.9.0
@@ -12888,14 +12897,14 @@ snapshots:
     dependencies:
       mime: 3.0.0
 
-  '@codemirror/autocomplete@6.19.0':
+  '@codemirror/autocomplete@6.19.1':
     dependencies:
       '@codemirror/language': 6.11.3
       '@codemirror/state': 6.5.2
       '@codemirror/view': 6.38.6
       '@lezer/common': 1.3.0
 
-  '@codemirror/commands@6.9.0':
+  '@codemirror/commands@6.10.0':
     dependencies:
       '@codemirror/language': 6.11.3
       '@codemirror/state': 6.5.2
@@ -12907,11 +12916,11 @@ snapshots:
       '@codemirror/state': 6.5.2
       '@codemirror/view': 6.38.6
       '@lezer/common': 1.3.0
-      '@lezer/highlight': 1.2.2
-      '@lezer/lr': 1.4.2
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.3
       style-mod: 4.1.3
 
-  '@codemirror/lint@6.9.0':
+  '@codemirror/lint@6.9.2':
     dependencies:
       '@codemirror/state': 6.5.2
       '@codemirror/view': 6.38.6
@@ -12928,14 +12937,14 @@ snapshots:
       style-mod: 4.1.3
       w3c-keyname: 2.2.8
 
-  '@commitlint/cli@19.8.1(@types/node@24.9.1)(typescript@5.9.3)':
+  '@commitlint/cli@19.8.1(@types/node@24.10.0)(typescript@5.9.3)':
     dependencies:
       '@commitlint/format': 19.8.1
       '@commitlint/lint': 19.8.1
-      '@commitlint/load': 19.8.1(@types/node@24.9.1)(typescript@5.9.3)
+      '@commitlint/load': 19.8.1(@types/node@24.10.0)(typescript@5.9.3)
       '@commitlint/read': 19.8.1
       '@commitlint/types': 19.8.1
-      tinyexec: 1.0.1
+      tinyexec: 1.0.2
       yargs: 17.7.2
     transitivePeerDependencies:
       - '@types/node'
@@ -12979,7 +12988,7 @@ snapshots:
       '@commitlint/rules': 19.8.1
       '@commitlint/types': 19.8.1
 
-  '@commitlint/load@19.8.1(@types/node@24.9.1)(typescript@5.9.3)':
+  '@commitlint/load@19.8.1(@types/node@24.10.0)(typescript@5.9.3)':
     dependencies:
       '@commitlint/config-validator': 19.8.1
       '@commitlint/execute-rule': 19.8.1
@@ -12987,7 +12996,7 @@ snapshots:
       '@commitlint/types': 19.8.1
       chalk: 5.6.2
       cosmiconfig: 9.0.0(typescript@5.9.3)
-      cosmiconfig-typescript-loader: 6.2.0(@types/node@24.9.1)(cosmiconfig@9.0.0(typescript@5.9.3))(typescript@5.9.3)
+      cosmiconfig-typescript-loader: 6.2.0(@types/node@24.10.0)(cosmiconfig@9.0.0(typescript@5.9.3))(typescript@5.9.3)
       lodash.isplainobject: 4.0.6
       lodash.merge: 4.6.2
       lodash.uniq: 4.5.0
@@ -13009,7 +13018,7 @@ snapshots:
       '@commitlint/types': 19.8.1
       git-raw-commits: 4.0.0
       minimist: 1.2.8
-      tinyexec: 1.0.1
+      tinyexec: 1.0.2
 
   '@commitlint/resolve-extends@19.8.1':
     dependencies:
@@ -13035,7 +13044,7 @@ snapshots:
 
   '@commitlint/types@19.8.1':
     dependencies:
-      '@types/conventional-commits-parser': 5.0.1
+      '@types/conventional-commits-parser': 5.0.2
       chalk: 5.6.2
 
   '@cspell/cspell-bundled-dicts@8.19.4':
@@ -13043,21 +13052,21 @@ snapshots:
       '@cspell/dict-ada': 4.1.1
       '@cspell/dict-al': 1.1.1
       '@cspell/dict-aws': 4.0.15
-      '@cspell/dict-bash': 4.2.1
-      '@cspell/dict-companies': 3.2.6
-      '@cspell/dict-cpp': 6.0.12
+      '@cspell/dict-bash': 4.2.2
+      '@cspell/dict-companies': 3.2.7
+      '@cspell/dict-cpp': 6.0.14
       '@cspell/dict-cryptocurrencies': 5.0.5
       '@cspell/dict-csharp': 4.0.7
       '@cspell/dict-css': 4.0.18
       '@cspell/dict-dart': 2.3.1
-      '@cspell/dict-data-science': 2.0.10
+      '@cspell/dict-data-science': 2.0.11
       '@cspell/dict-django': 4.1.5
       '@cspell/dict-docker': 1.1.16
       '@cspell/dict-dotnet': 5.0.10
       '@cspell/dict-elixir': 4.0.8
-      '@cspell/dict-en-common-misspellings': 2.1.6
+      '@cspell/dict-en-common-misspellings': 2.1.8
       '@cspell/dict-en-gb': 1.1.33
-      '@cspell/dict-en_us': 4.4.20
+      '@cspell/dict-en_us': 4.4.24
       '@cspell/dict-filetypes': 3.0.14
       '@cspell/dict-flutter': 1.1.1
       '@cspell/dict-fonts': 4.0.5
@@ -13065,7 +13074,7 @@ snapshots:
       '@cspell/dict-fullstack': 3.2.7
       '@cspell/dict-gaming-terms': 1.1.2
       '@cspell/dict-git': 3.0.7
-      '@cspell/dict-golang': 6.0.23
+      '@cspell/dict-golang': 6.0.24
       '@cspell/dict-google': 1.0.9
       '@cspell/dict-haskell': 4.0.6
       '@cspell/dict-html': 4.0.12
@@ -13081,17 +13090,17 @@ snapshots:
       '@cspell/dict-markdown': 2.0.12(@cspell/dict-css@4.0.18)(@cspell/dict-html-symbol-entities@4.0.4)(@cspell/dict-html@4.0.12)(@cspell/dict-typescript@3.2.3)
       '@cspell/dict-monkeyc': 1.0.11
       '@cspell/dict-node': 5.0.8
-      '@cspell/dict-npm': 5.2.18
-      '@cspell/dict-php': 4.0.15
+      '@cspell/dict-npm': 5.2.20
+      '@cspell/dict-php': 4.1.0
       '@cspell/dict-powershell': 5.0.15
       '@cspell/dict-public-licenses': 2.0.15
-      '@cspell/dict-python': 4.2.20
+      '@cspell/dict-python': 4.2.21
       '@cspell/dict-r': 2.1.1
       '@cspell/dict-ruby': 5.0.9
       '@cspell/dict-rust': 4.0.12
       '@cspell/dict-scala': 5.0.8
-      '@cspell/dict-shell': 1.1.1
-      '@cspell/dict-software-terms': 5.1.9
+      '@cspell/dict-shell': 1.1.2
+      '@cspell/dict-software-terms': 5.1.11
       '@cspell/dict-sql': 2.2.1
       '@cspell/dict-svelte': 1.0.7
       '@cspell/dict-swift': 2.0.6
@@ -13119,13 +13128,13 @@ snapshots:
 
   '@cspell/dict-aws@4.0.15': {}
 
-  '@cspell/dict-bash@4.2.1':
+  '@cspell/dict-bash@4.2.2':
     dependencies:
-      '@cspell/dict-shell': 1.1.1
+      '@cspell/dict-shell': 1.1.2
 
-  '@cspell/dict-companies@3.2.6': {}
+  '@cspell/dict-companies@3.2.7': {}
 
-  '@cspell/dict-cpp@6.0.12': {}
+  '@cspell/dict-cpp@6.0.14': {}
 
   '@cspell/dict-cryptocurrencies@5.0.5': {}
 
@@ -13135,7 +13144,7 @@ snapshots:
 
   '@cspell/dict-dart@2.3.1': {}
 
-  '@cspell/dict-data-science@2.0.10': {}
+  '@cspell/dict-data-science@2.0.11': {}
 
   '@cspell/dict-django@4.1.5': {}
 
@@ -13145,11 +13154,11 @@ snapshots:
 
   '@cspell/dict-elixir@4.0.8': {}
 
-  '@cspell/dict-en-common-misspellings@2.1.6': {}
+  '@cspell/dict-en-common-misspellings@2.1.8': {}
 
   '@cspell/dict-en-gb@1.1.33': {}
 
-  '@cspell/dict-en_us@4.4.20': {}
+  '@cspell/dict-en_us@4.4.24': {}
 
   '@cspell/dict-filetypes@3.0.14': {}
 
@@ -13165,7 +13174,7 @@ snapshots:
 
   '@cspell/dict-git@3.0.7': {}
 
-  '@cspell/dict-golang@6.0.23': {}
+  '@cspell/dict-golang@6.0.24': {}
 
   '@cspell/dict-google@1.0.9': {}
 
@@ -13202,17 +13211,17 @@ snapshots:
 
   '@cspell/dict-node@5.0.8': {}
 
-  '@cspell/dict-npm@5.2.18': {}
+  '@cspell/dict-npm@5.2.20': {}
 
-  '@cspell/dict-php@4.0.15': {}
+  '@cspell/dict-php@4.1.0': {}
 
   '@cspell/dict-powershell@5.0.15': {}
 
   '@cspell/dict-public-licenses@2.0.15': {}
 
-  '@cspell/dict-python@4.2.20':
+  '@cspell/dict-python@4.2.21':
     dependencies:
-      '@cspell/dict-data-science': 2.0.10
+      '@cspell/dict-data-science': 2.0.11
 
   '@cspell/dict-r@2.1.1': {}
 
@@ -13222,9 +13231,9 @@ snapshots:
 
   '@cspell/dict-scala@5.0.8': {}
 
-  '@cspell/dict-shell@1.1.1': {}
+  '@cspell/dict-shell@1.1.2': {}
 
-  '@cspell/dict-software-terms@5.1.9': {}
+  '@cspell/dict-software-terms@5.1.11': {}
 
   '@cspell/dict-sql@2.2.1': {}
 
@@ -13253,9 +13262,9 @@ snapshots:
     dependencies:
       css-render: 0.15.14
 
-  '@css-render/vue3-ssr@0.15.14(vue@3.5.22(typescript@5.9.3))':
+  '@css-render/vue3-ssr@0.15.14(vue@3.5.23(typescript@5.9.3))':
     dependencies:
-      vue: 3.5.22(typescript@5.9.3)
+      vue: 3.5.23(typescript@5.9.3)
 
   '@csstools/cascade-layer-name-parser@2.0.5(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)':
     dependencies:
@@ -13554,9 +13563,9 @@ snapshots:
 
   '@docsearch/css@3.8.2': {}
 
-  '@docsearch/js@3.8.2(@algolia/client-search@5.40.1)(search-insights@2.17.3)':
+  '@docsearch/js@3.8.2(@algolia/client-search@5.42.0)(search-insights@2.17.3)':
     dependencies:
-      '@docsearch/react': 3.8.2(@algolia/client-search@5.40.1)(search-insights@2.17.3)
+      '@docsearch/react': 3.8.2(@algolia/client-search@5.42.0)(search-insights@2.17.3)
       preact: 10.27.2
     transitivePeerDependencies:
       - '@algolia/client-search'
@@ -13565,12 +13574,12 @@ snapshots:
       - react-dom
       - search-insights
 
-  '@docsearch/react@3.8.2(@algolia/client-search@5.40.1)(search-insights@2.17.3)':
+  '@docsearch/react@3.8.2(@algolia/client-search@5.42.0)(search-insights@2.17.3)':
     dependencies:
-      '@algolia/autocomplete-core': 1.17.7(@algolia/client-search@5.40.1)(algoliasearch@5.40.1)(search-insights@2.17.3)
-      '@algolia/autocomplete-preset-algolia': 1.17.7(@algolia/client-search@5.40.1)(algoliasearch@5.40.1)
+      '@algolia/autocomplete-core': 1.17.7(@algolia/client-search@5.42.0)(algoliasearch@5.42.0)(search-insights@2.17.3)
+      '@algolia/autocomplete-preset-algolia': 1.17.7(@algolia/client-search@5.42.0)(algoliasearch@5.42.0)
       '@docsearch/css': 3.8.2
-      algoliasearch: 5.40.1
+      algoliasearch: 5.42.0
     optionalDependencies:
       search-insights: 2.17.3
     transitivePeerDependencies:
@@ -13578,17 +13587,17 @@ snapshots:
 
   '@dual-bundle/import-meta-resolve@4.2.1': {}
 
-  '@element-plus/icons-vue@2.3.2(vue@3.5.22(typescript@5.9.3))':
+  '@element-plus/icons-vue@2.3.2(vue@3.5.23(typescript@5.9.3))':
     dependencies:
-      vue: 3.5.22(typescript@5.9.3)
+      vue: 3.5.23(typescript@5.9.3)
 
-  '@emnapi/core@1.6.0':
+  '@emnapi/core@1.7.0':
     dependencies:
       '@emnapi/wasi-threads': 1.1.0
       tslib: 2.8.1
     optional: true
 
-  '@emnapi/runtime@1.6.0':
+  '@emnapi/runtime@1.7.0':
     dependencies:
       tslib: 2.8.1
     optional: true
@@ -13607,7 +13616,7 @@ snapshots:
   '@es-joy/jsdoccomment@0.50.2':
     dependencies:
       '@types/estree': 1.0.8
-      '@typescript-eslint/types': 8.46.2
+      '@typescript-eslint/types': 8.46.3
       comment-parser: 1.4.1
       esquery: 1.6.0
       jsdoc-type-pratt-parser: 4.1.0
@@ -13687,12 +13696,12 @@ snapshots:
   '@esbuild/win32-x64@0.25.3':
     optional: true
 
-  '@eslint-community/eslint-utils@4.9.0(eslint@9.38.0(jiti@2.6.1))':
+  '@eslint-community/eslint-utils@4.9.0(eslint@9.39.1(jiti@2.6.1))':
     dependencies:
-      eslint: 9.38.0(jiti@2.6.1)
+      eslint: 9.39.1(jiti@2.6.1)
       eslint-visitor-keys: 3.4.3
 
-  '@eslint-community/regexpp@4.12.1': {}
+  '@eslint-community/regexpp@4.12.2': {}
 
   '@eslint/config-array@0.21.1':
     dependencies:
@@ -13702,15 +13711,15 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@eslint/config-helpers@0.4.1':
+  '@eslint/config-helpers@0.4.2':
     dependencies:
-      '@eslint/core': 0.16.0
+      '@eslint/core': 0.17.0
 
   '@eslint/core@0.13.0':
     dependencies:
       '@types/json-schema': 7.0.15
 
-  '@eslint/core@0.16.0':
+  '@eslint/core@0.17.0':
     dependencies:
       '@types/json-schema': 7.0.15
 
@@ -13728,7 +13737,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@eslint/js@9.38.0': {}
+  '@eslint/js@9.39.1': {}
 
   '@eslint/object-schema@2.1.7': {}
 
@@ -13737,9 +13746,9 @@ snapshots:
       '@eslint/core': 0.13.0
       levn: 0.4.1
 
-  '@eslint/plugin-kit@0.4.0':
+  '@eslint/plugin-kit@0.4.1':
     dependencies:
-      '@eslint/core': 0.16.0
+      '@eslint/core': 0.17.0
       levn: 0.4.1
 
   '@faker-js/faker@9.9.0': {}
@@ -13755,36 +13764,36 @@ snapshots:
 
   '@floating-ui/utils@0.2.10': {}
 
-  '@floating-ui/vue@1.1.9(vue@3.5.22(typescript@5.9.3))':
+  '@floating-ui/vue@1.1.9(vue@3.5.23(typescript@5.9.3))':
     dependencies:
       '@floating-ui/dom': 1.7.4
       '@floating-ui/utils': 0.2.10
-      vue-demi: 0.14.10(vue@3.5.22(typescript@5.9.3))
+      vue-demi: 0.14.10(vue@3.5.23(typescript@5.9.3))
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
 
-  '@form-create/ant-design-vue@3.2.31(vue@3.5.22(typescript@5.9.3))':
+  '@form-create/ant-design-vue@3.2.32(vue@3.5.23(typescript@5.9.3))':
     dependencies:
       '@form-create/component-antdv-frame': 3.2.31
       '@form-create/component-antdv-group': 3.2.31
       '@form-create/component-antdv-upload': 3.2.31
       '@form-create/component-subform': 3.1.34
-      '@form-create/core': 3.2.31(vue@3.5.22(typescript@5.9.3))
+      '@form-create/core': 3.2.32(vue@3.5.23(typescript@5.9.3))
       '@form-create/utils': 3.2.31
-      vue: 3.5.22(typescript@5.9.3)
+      vue: 3.5.23(typescript@5.9.3)
 
-  '@form-create/antd-designer@3.3.2(vue@3.5.22(typescript@5.9.3))':
+  '@form-create/antd-designer@3.3.2(vue@3.5.23(typescript@5.9.3))':
     dependencies:
-      '@form-create/ant-design-vue': 3.2.31(vue@3.5.22(typescript@5.9.3))
+      '@form-create/ant-design-vue': 3.2.32(vue@3.5.23(typescript@5.9.3))
       '@form-create/component-wangeditor': 3.2.14
       '@form-create/utils': 3.2.31
-      ant-design-vue: 4.2.6(vue@3.5.22(typescript@5.9.3))
+      ant-design-vue: 4.2.6(vue@3.5.23(typescript@5.9.3))
       codemirror: 6.65.7
       js-beautify: 1.15.4
       signature_pad: 5.1.1
-      vue: 3.5.22(typescript@5.9.3)
-      vuedraggable: 4.1.0(vue@3.5.22(typescript@5.9.3))
+      vue: 3.5.23(typescript@5.9.3)
+      vuedraggable: 4.1.0(vue@3.5.23(typescript@5.9.3))
 
   '@form-create/component-antdv-frame@3.2.31':
     dependencies:
@@ -13832,26 +13841,26 @@ snapshots:
     dependencies:
       wangeditor: 4.7.15
 
-  '@form-create/core@3.2.31(vue@3.5.22(typescript@5.9.3))':
+  '@form-create/core@3.2.32(vue@3.5.23(typescript@5.9.3))':
     dependencies:
       '@form-create/utils': 3.2.31
-      vue: 3.5.22(typescript@5.9.3)
+      vue: 3.5.23(typescript@5.9.3)
 
-  '@form-create/designer@3.3.1(vue@3.5.22(typescript@5.9.3))':
+  '@form-create/designer@3.3.1(vue@3.5.23(typescript@5.9.3))':
     dependencies:
       '@form-create/component-wangeditor': 3.2.14
-      '@form-create/element-ui': 3.2.31(vue@3.5.22(typescript@5.9.3))
+      '@form-create/element-ui': 3.2.32(vue@3.5.23(typescript@5.9.3))
       '@form-create/utils': 3.2.31
       codemirror: 6.65.7
-      element-plus: 2.11.5(vue@3.5.22(typescript@5.9.3))
+      element-plus: 2.11.7(vue@3.5.23(typescript@5.9.3))
       js-beautify: 1.15.4
       signature_pad: 5.1.1
-      vue: 3.5.22(typescript@5.9.3)
-      vuedraggable: 4.1.0(vue@3.5.22(typescript@5.9.3))
+      vue: 3.5.23(typescript@5.9.3)
+      vuedraggable: 4.1.0(vue@3.5.23(typescript@5.9.3))
     transitivePeerDependencies:
       - '@vue/composition-api'
 
-  '@form-create/element-ui@3.2.31(vue@3.5.22(typescript@5.9.3))':
+  '@form-create/element-ui@3.2.32(vue@3.5.23(typescript@5.9.3))':
     dependencies:
       '@form-create/component-elm-checkbox': 3.2.31
       '@form-create/component-elm-frame': 3.2.31
@@ -13861,9 +13870,9 @@ snapshots:
       '@form-create/component-elm-tree': 3.2.31
       '@form-create/component-elm-upload': 3.2.31
       '@form-create/component-subform': 3.1.34
-      '@form-create/core': 3.2.31(vue@3.5.22(typescript@5.9.3))
+      '@form-create/core': 3.2.32(vue@3.5.23(typescript@5.9.3))
       '@form-create/utils': 3.2.31
-      vue: 3.5.22(typescript@5.9.3)
+      vue: 3.5.23(typescript@5.9.3)
 
   '@form-create/utils@3.2.31': {}
 
@@ -13882,23 +13891,25 @@ snapshots:
 
   '@humanwhocodes/retry@0.4.3': {}
 
-  '@iconify-json/logos@1.2.9':
+  '@ibm/telemetry-js@1.10.2': {}
+
+  '@iconify-json/logos@1.2.10':
     dependencies:
       '@iconify/types': 2.0.0
 
-  '@iconify-json/octicon@1.2.16':
+  '@iconify-json/octicon@1.2.17':
     dependencies:
       '@iconify/types': 2.0.0
 
-  '@iconify-json/simple-icons@1.2.55':
+  '@iconify-json/simple-icons@1.2.57':
     dependencies:
       '@iconify/types': 2.0.0
 
-  '@iconify-json/vscode-icons@1.2.32':
+  '@iconify-json/vscode-icons@1.2.33':
     dependencies:
       '@iconify/types': 2.0.0
 
-  '@iconify/json@2.2.398':
+  '@iconify/json@2.2.404':
     dependencies:
       '@iconify/types': 2.0.0
       pathe: 2.0.3
@@ -13922,17 +13933,17 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@iconify/vue@5.0.0(vue@3.5.22(typescript@5.9.3))':
+  '@iconify/vue@5.0.0(vue@3.5.23(typescript@5.9.3))':
     dependencies:
       '@iconify/types': 2.0.0
-      vue: 3.5.22(typescript@5.9.3)
+      vue: 3.5.23(typescript@5.9.3)
 
-  '@inquirer/external-editor@1.0.2(@types/node@22.18.12)':
+  '@inquirer/external-editor@1.0.2(@types/node@24.10.0)':
     dependencies:
-      chardet: 2.1.0
+      chardet: 2.1.1
       iconv-lite: 0.7.0
     optionalDependencies:
-      '@types/node': 22.18.12
+      '@types/node': 24.10.0
 
   '@internationalized/date@3.10.0':
     dependencies:
@@ -13942,7 +13953,7 @@ snapshots:
     dependencies:
       '@swc/helpers': 0.5.17
 
-  '@intlify/bundle-utils@10.0.1(vue-i18n@11.1.12(vue@3.5.22(typescript@5.9.3)))':
+  '@intlify/bundle-utils@10.0.1(vue-i18n@11.1.12(vue@3.5.23(typescript@5.9.3)))':
     dependencies:
       '@intlify/message-compiler': 11.1.12
       '@intlify/shared': 11.1.12
@@ -13954,7 +13965,7 @@ snapshots:
       source-map-js: 1.2.1
       yaml-eslint-parser: 1.3.0
     optionalDependencies:
-      vue-i18n: 11.1.12(vue@3.5.22(typescript@5.9.3))
+      vue-i18n: 11.1.12(vue@3.5.23(typescript@5.9.3))
 
   '@intlify/core-base@11.1.12':
     dependencies:
@@ -13968,15 +13979,15 @@ snapshots:
 
   '@intlify/shared@11.1.12': {}
 
-  '@intlify/unplugin-vue-i18n@6.0.8(@vue/compiler-dom@3.5.22)(eslint@9.38.0(jiti@2.6.1))(rollup@4.52.5)(typescript@5.9.3)(vue-i18n@11.1.12(vue@3.5.22(typescript@5.9.3)))(vue@3.5.22(typescript@5.9.3))':
+  '@intlify/unplugin-vue-i18n@6.0.8(@vue/compiler-dom@3.5.23)(eslint@9.39.1(jiti@2.6.1))(rollup@4.52.5)(typescript@5.9.3)(vue-i18n@11.1.12(vue@3.5.23(typescript@5.9.3)))(vue@3.5.23(typescript@5.9.3))':
     dependencies:
-      '@eslint-community/eslint-utils': 4.9.0(eslint@9.38.0(jiti@2.6.1))
-      '@intlify/bundle-utils': 10.0.1(vue-i18n@11.1.12(vue@3.5.22(typescript@5.9.3)))
+      '@eslint-community/eslint-utils': 4.9.0(eslint@9.39.1(jiti@2.6.1))
+      '@intlify/bundle-utils': 10.0.1(vue-i18n@11.1.12(vue@3.5.23(typescript@5.9.3)))
       '@intlify/shared': 11.1.12
-      '@intlify/vue-i18n-extensions': 8.0.0(@intlify/shared@11.1.12)(@vue/compiler-dom@3.5.22)(vue-i18n@11.1.12(vue@3.5.22(typescript@5.9.3)))(vue@3.5.22(typescript@5.9.3))
+      '@intlify/vue-i18n-extensions': 8.0.0(@intlify/shared@11.1.12)(@vue/compiler-dom@3.5.23)(vue-i18n@11.1.12(vue@3.5.23(typescript@5.9.3)))(vue@3.5.23(typescript@5.9.3))
       '@rollup/pluginutils': 5.3.0(rollup@4.52.5)
-      '@typescript-eslint/scope-manager': 8.46.2
-      '@typescript-eslint/typescript-estree': 8.46.2(typescript@5.9.3)
+      '@typescript-eslint/scope-manager': 8.46.3
+      '@typescript-eslint/typescript-estree': 8.46.3(typescript@5.9.3)
       debug: 4.4.3
       fast-glob: 3.3.3
       js-yaml: 4.1.0
@@ -13985,9 +13996,9 @@ snapshots:
       picocolors: 1.1.1
       source-map-js: 1.2.1
       unplugin: 1.16.1
-      vue: 3.5.22(typescript@5.9.3)
+      vue: 3.5.23(typescript@5.9.3)
     optionalDependencies:
-      vue-i18n: 11.1.12(vue@3.5.22(typescript@5.9.3))
+      vue-i18n: 11.1.12(vue@3.5.23(typescript@5.9.3))
     transitivePeerDependencies:
       - '@vue/compiler-dom'
       - eslint
@@ -13995,14 +14006,14 @@ snapshots:
       - supports-color
       - typescript
 
-  '@intlify/vue-i18n-extensions@8.0.0(@intlify/shared@11.1.12)(@vue/compiler-dom@3.5.22)(vue-i18n@11.1.12(vue@3.5.22(typescript@5.9.3)))(vue@3.5.22(typescript@5.9.3))':
+  '@intlify/vue-i18n-extensions@8.0.0(@intlify/shared@11.1.12)(@vue/compiler-dom@3.5.23)(vue-i18n@11.1.12(vue@3.5.23(typescript@5.9.3)))(vue@3.5.23(typescript@5.9.3))':
     dependencies:
-      '@babel/parser': 7.28.4
+      '@babel/parser': 7.28.5
     optionalDependencies:
       '@intlify/shared': 11.1.12
-      '@vue/compiler-dom': 3.5.22
-      vue: 3.5.22(typescript@5.9.3)
-      vue-i18n: 11.1.12(vue@3.5.22(typescript@5.9.3))
+      '@vue/compiler-dom': 3.5.23
+      vue: 3.5.23(typescript@5.9.3)
+      vue-i18n: 11.1.12(vue@3.5.23(typescript@5.9.3))
 
   '@ioredis/commands@1.4.0': {}
 
@@ -14049,14 +14060,14 @@ snapshots:
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.5.5
 
-  '@jspm/generator@2.7.4':
+  '@jspm/generator@2.7.6':
     dependencies:
-      '@babel/core': 7.28.4
-      '@babel/plugin-syntax-import-attributes': 7.27.1(@babel/core@7.28.4)
-      '@babel/preset-typescript': 7.27.1(@babel/core@7.28.4)
+      '@babel/core': 7.28.5
+      '@babel/plugin-syntax-import-attributes': 7.27.1(@babel/core@7.28.5)
+      '@babel/preset-typescript': 7.28.5(@babel/core@7.28.5)
       '@jspm/import-map': 1.2.2
       es-module-lexer: 1.7.0
-      minimatch: 10.0.3
+      minimatch: 10.1.1
       node-fetch-cache: 5.1.0
       pako: 2.1.0
       sver: 1.8.4
@@ -14079,18 +14090,18 @@ snapshots:
 
   '@lezer/common@1.3.0': {}
 
-  '@lezer/highlight@1.2.2':
+  '@lezer/highlight@1.2.3':
     dependencies:
       '@lezer/common': 1.3.0
 
-  '@lezer/lr@1.4.2':
+  '@lezer/lr@1.4.3':
     dependencies:
       '@lezer/common': 1.3.0
 
-  '@lezer/markdown@1.5.1':
+  '@lezer/markdown@1.6.0':
     dependencies:
       '@lezer/common': 1.3.0
-      '@lezer/highlight': 1.2.2
+      '@lezer/highlight': 1.2.3
 
   '@manypkg/find-root@1.1.0':
     dependencies:
@@ -14131,30 +14142,31 @@ snapshots:
       node-fetch: 2.7.0
       nopt: 8.1.0
       semver: 7.7.3
-      tar: 7.5.1
+      tar: 7.5.2
     transitivePeerDependencies:
       - encoding
       - supports-color
 
   '@marijn/find-cluster-break@1.0.2': {}
 
-  '@microsoft/api-extractor-model@7.31.2(@types/node@24.9.1)':
+  '@microsoft/api-extractor-model@7.31.3(@types/node@24.10.0)':
     dependencies:
       '@microsoft/tsdoc': 0.15.1
       '@microsoft/tsdoc-config': 0.17.1
-      '@rushstack/node-core-library': 5.17.1(@types/node@24.9.1)
+      '@rushstack/node-core-library': 5.18.0(@types/node@24.10.0)
     transitivePeerDependencies:
       - '@types/node'
 
-  '@microsoft/api-extractor@7.53.2(@types/node@24.9.1)':
+  '@microsoft/api-extractor@7.54.0(@types/node@24.10.0)':
     dependencies:
-      '@microsoft/api-extractor-model': 7.31.2(@types/node@24.9.1)
+      '@microsoft/api-extractor-model': 7.31.3(@types/node@24.10.0)
       '@microsoft/tsdoc': 0.15.1
       '@microsoft/tsdoc-config': 0.17.1
-      '@rushstack/node-core-library': 5.17.1(@types/node@24.9.1)
+      '@rushstack/node-core-library': 5.18.0(@types/node@24.10.0)
       '@rushstack/rig-package': 0.6.0
-      '@rushstack/terminal': 0.19.2(@types/node@24.9.1)
-      '@rushstack/ts-command-line': 5.1.2(@types/node@24.9.1)
+      '@rushstack/terminal': 0.19.3(@types/node@24.10.0)
+      '@rushstack/ts-command-line': 5.1.3(@types/node@24.10.0)
+      diff: 8.0.2
       lodash: 4.17.21
       minimatch: 10.0.3
       resolve: 1.22.11
@@ -14177,8 +14189,8 @@ snapshots:
 
   '@napi-rs/wasm-runtime@0.2.12':
     dependencies:
-      '@emnapi/core': 1.6.0
-      '@emnapi/runtime': 1.6.0
+      '@emnapi/core': 1.7.0
+      '@emnapi/runtime': 1.7.0
       '@tybys/wasm-util': 0.10.1
     optional: true
 
@@ -14194,27 +14206,27 @@ snapshots:
       '@nodelib/fs.scandir': 2.1.5
       fastq: 1.19.1
 
-  '@nolebase/ui@2.18.2(vitepress@1.6.4(@algolia/client-search@5.40.1)(@types/node@24.9.1)(async-validator@4.2.5)(axios@1.12.2)(less@4.4.2)(nprogress@0.2.0)(postcss@8.5.6)(qrcode@1.5.4)(sass@1.93.2)(search-insights@2.17.3)(sortablejs@1.15.6)(terser@5.44.0)(typescript@5.9.3))(vue@3.5.22(typescript@5.9.3))':
+  '@nolebase/ui@2.18.2(vitepress@1.6.4(@algolia/client-search@5.42.0)(@types/node@24.10.0)(async-validator@4.2.5)(axios@1.13.2)(less@4.4.2)(nprogress@0.2.0)(postcss@8.5.6)(qrcode@1.5.4)(sass@1.93.3)(search-insights@2.17.3)(sortablejs@1.15.6)(terser@5.44.1)(typescript@5.9.3))(vue@3.5.23(typescript@5.9.3))':
     dependencies:
-      '@iconify-json/octicon': 1.2.16
+      '@iconify-json/octicon': 1.2.17
       less: 4.4.2
-      vitepress: 1.6.4(@algolia/client-search@5.40.1)(@types/node@24.9.1)(async-validator@4.2.5)(axios@1.12.2)(less@4.4.2)(nprogress@0.2.0)(postcss@8.5.6)(qrcode@1.5.4)(sass@1.93.2)(search-insights@2.17.3)(sortablejs@1.15.6)(terser@5.44.0)(typescript@5.9.3)
-      vue: 3.5.22(typescript@5.9.3)
+      vitepress: 1.6.4(@algolia/client-search@5.42.0)(@types/node@24.10.0)(async-validator@4.2.5)(axios@1.13.2)(less@4.4.2)(nprogress@0.2.0)(postcss@8.5.6)(qrcode@1.5.4)(sass@1.93.3)(search-insights@2.17.3)(sortablejs@1.15.6)(terser@5.44.1)(typescript@5.9.3)
+      vue: 3.5.23(typescript@5.9.3)
 
-  '@nolebase/vitepress-plugin-git-changelog@2.18.2(vitepress@1.6.4(@algolia/client-search@5.40.1)(@types/node@24.9.1)(async-validator@4.2.5)(axios@1.12.2)(less@4.4.2)(nprogress@0.2.0)(postcss@8.5.6)(qrcode@1.5.4)(sass@1.93.2)(search-insights@2.17.3)(sortablejs@1.15.6)(terser@5.44.0)(typescript@5.9.3))(vue@3.5.22(typescript@5.9.3))':
+  '@nolebase/vitepress-plugin-git-changelog@2.18.2(vitepress@1.6.4(@algolia/client-search@5.42.0)(@types/node@24.10.0)(async-validator@4.2.5)(axios@1.13.2)(less@4.4.2)(nprogress@0.2.0)(postcss@8.5.6)(qrcode@1.5.4)(sass@1.93.3)(search-insights@2.17.3)(sortablejs@1.15.6)(terser@5.44.1)(typescript@5.9.3))(vue@3.5.23(typescript@5.9.3))':
     dependencies:
-      '@iconify-json/octicon': 1.2.16
-      '@nolebase/ui': 2.18.2(vitepress@1.6.4(@algolia/client-search@5.40.1)(@types/node@24.9.1)(async-validator@4.2.5)(axios@1.12.2)(less@4.4.2)(nprogress@0.2.0)(postcss@8.5.6)(qrcode@1.5.4)(sass@1.93.2)(search-insights@2.17.3)(sortablejs@1.15.6)(terser@5.44.0)(typescript@5.9.3))(vue@3.5.22(typescript@5.9.3))
+      '@iconify-json/octicon': 1.2.17
+      '@nolebase/ui': 2.18.2(vitepress@1.6.4(@algolia/client-search@5.42.0)(@types/node@24.10.0)(async-validator@4.2.5)(axios@1.13.2)(less@4.4.2)(nprogress@0.2.0)(postcss@8.5.6)(qrcode@1.5.4)(sass@1.93.3)(search-insights@2.17.3)(sortablejs@1.15.6)(terser@5.44.1)(typescript@5.9.3))(vue@3.5.23(typescript@5.9.3))
       colorette: 2.0.20
       date-fns: 4.1.0
       defu: 6.1.4
-      es-toolkit: 1.40.0
+      es-toolkit: 1.41.0
       execa: 9.6.0
       globby: 14.1.0
       gray-matter: 4.0.3
       less: 4.4.2
       uncrypto: 0.1.3
-      vitepress: 1.6.4(@algolia/client-search@5.40.1)(@types/node@24.9.1)(async-validator@4.2.5)(axios@1.12.2)(less@4.4.2)(nprogress@0.2.0)(postcss@8.5.6)(qrcode@1.5.4)(sass@1.93.2)(search-insights@2.17.3)(sortablejs@1.15.6)(terser@5.44.0)(typescript@5.9.3)
+      vitepress: 1.6.4(@algolia/client-search@5.42.0)(@types/node@24.10.0)(async-validator@4.2.5)(axios@1.13.2)(less@4.4.2)(nprogress@0.2.0)(postcss@8.5.6)(qrcode@1.5.4)(sass@1.93.3)(search-insights@2.17.3)(sortablejs@1.15.6)(terser@5.44.1)(typescript@5.9.3)
     transitivePeerDependencies:
       - vue
 
@@ -14222,9 +14234,9 @@ snapshots:
     dependencies:
       semver: 7.7.3
 
-  '@nuxt/kit@3.19.3(magicast@0.3.5)':
+  '@nuxt/kit@3.20.0':
     dependencies:
-      c12: 3.3.1(magicast@0.3.5)
+      c12: 3.3.1(magicast@0.5.1)
       consola: 3.4.2
       defu: 6.1.4
       destr: 2.0.5
@@ -14241,11 +14253,9 @@ snapshots:
       rc9: 2.1.2
       scule: 1.3.0
       semver: 7.7.3
-      std-env: 3.10.0
       tinyglobby: 0.2.15
       ufo: 1.6.1
       unctx: 2.4.1
-      unimport: 5.5.0
       untyped: 2.0.0
     transitivePeerDependencies:
       - magicast
@@ -14362,10 +14372,10 @@ snapshots:
     dependencies:
       kleur: 4.1.5
 
-  '@poppinss/dumper@0.6.4':
+  '@poppinss/dumper@0.6.5':
     dependencies:
       '@poppinss/colors': 4.1.5
-      '@sindresorhus/is': 7.1.0
+      '@sindresorhus/is': 7.1.1
       supports-color: 10.2.2
 
   '@poppinss/exception@1.2.2': {}
@@ -14374,29 +14384,29 @@ snapshots:
 
   '@rolldown/pluginutils@1.0.0-beta.29': {}
 
-  '@rolldown/pluginutils@1.0.0-beta.44': {}
+  '@rolldown/pluginutils@1.0.0-beta.47': {}
 
   '@rollup/plugin-alias@5.1.1(rollup@4.52.5)':
     optionalDependencies:
       rollup: 4.52.5
 
-  '@rollup/plugin-babel@5.3.1(@babel/core@7.28.4)(rollup@2.79.2)':
+  '@rollup/plugin-babel@5.3.1(@babel/core@7.28.5)(rollup@2.79.2)':
     dependencies:
-      '@babel/core': 7.28.4
+      '@babel/core': 7.28.5
       '@babel/helper-module-imports': 7.27.1
       '@rollup/pluginutils': 3.1.0(rollup@2.79.2)
       rollup: 2.79.2
     transitivePeerDependencies:
       - supports-color
 
-  '@rollup/plugin-commonjs@28.0.8(rollup@4.52.5)':
+  '@rollup/plugin-commonjs@28.0.9(rollup@4.52.5)':
     dependencies:
       '@rollup/pluginutils': 5.3.0(rollup@4.52.5)
       commondir: 1.0.1
       estree-walker: 2.0.2
       fdir: 6.5.0(picomatch@4.0.3)
       is-reference: 1.2.1
-      magic-string: 0.30.19
+      magic-string: 0.30.21
       picomatch: 4.0.3
     optionalDependencies:
       rollup: 4.52.5
@@ -14405,7 +14415,7 @@ snapshots:
     dependencies:
       '@rollup/pluginutils': 5.3.0(rollup@4.52.5)
       estree-walker: 2.0.2
-      magic-string: 0.30.19
+      magic-string: 0.30.21
     optionalDependencies:
       rollup: 4.52.5
 
@@ -14441,10 +14451,10 @@ snapshots:
       magic-string: 0.25.9
       rollup: 2.79.2
 
-  '@rollup/plugin-replace@6.0.2(rollup@4.52.5)':
+  '@rollup/plugin-replace@6.0.3(rollup@4.52.5)':
     dependencies:
       '@rollup/pluginutils': 5.3.0(rollup@4.52.5)
-      magic-string: 0.30.19
+      magic-string: 0.30.21
     optionalDependencies:
       rollup: 4.52.5
 
@@ -14452,7 +14462,7 @@ snapshots:
     dependencies:
       serialize-javascript: 6.0.2
       smob: 1.5.0
-      terser: 5.44.0
+      terser: 5.44.1
     optionalDependencies:
       rollup: 2.79.2
 
@@ -14460,7 +14470,7 @@ snapshots:
     dependencies:
       serialize-javascript: 6.0.2
       smob: 1.5.0
-      terser: 5.44.0
+      terser: 5.44.1
     optionalDependencies:
       rollup: 4.52.5
 
@@ -14558,7 +14568,7 @@ snapshots:
   '@rollup/rollup-win32-x64-msvc@4.52.5':
     optional: true
 
-  '@rushstack/node-core-library@5.17.1(@types/node@24.9.1)':
+  '@rushstack/node-core-library@5.18.0(@types/node@24.10.0)':
     dependencies:
       ajv: 8.13.0
       ajv-draft-04: 1.0.0(ajv@8.13.0)
@@ -14569,28 +14579,28 @@ snapshots:
       resolve: 1.22.11
       semver: 7.5.4
     optionalDependencies:
-      '@types/node': 24.9.1
+      '@types/node': 24.10.0
 
-  '@rushstack/problem-matcher@0.1.1(@types/node@24.9.1)':
+  '@rushstack/problem-matcher@0.1.1(@types/node@24.10.0)':
     optionalDependencies:
-      '@types/node': 24.9.1
+      '@types/node': 24.10.0
 
   '@rushstack/rig-package@0.6.0':
     dependencies:
       resolve: 1.22.11
       strip-json-comments: 3.1.1
 
-  '@rushstack/terminal@0.19.2(@types/node@24.9.1)':
+  '@rushstack/terminal@0.19.3(@types/node@24.10.0)':
     dependencies:
-      '@rushstack/node-core-library': 5.17.1(@types/node@24.9.1)
-      '@rushstack/problem-matcher': 0.1.1(@types/node@24.9.1)
+      '@rushstack/node-core-library': 5.18.0(@types/node@24.10.0)
+      '@rushstack/problem-matcher': 0.1.1(@types/node@24.10.0)
       supports-color: 8.1.1
     optionalDependencies:
-      '@types/node': 24.9.1
+      '@types/node': 24.10.0
 
-  '@rushstack/ts-command-line@5.1.2(@types/node@24.9.1)':
+  '@rushstack/ts-command-line@5.1.3(@types/node@24.10.0)':
     dependencies:
-      '@rushstack/terminal': 0.19.2(@types/node@24.9.1)
+      '@rushstack/terminal': 0.19.3(@types/node@24.10.0)
       '@types/argparse': 1.0.38
       argparse: 1.0.10
       string-argv: 0.3.2
@@ -14644,13 +14654,13 @@ snapshots:
       core-js: 3.46.0
       nanopop: 2.4.2
 
-  '@sindresorhus/is@7.1.0': {}
+  '@sindresorhus/is@7.1.1': {}
 
   '@sindresorhus/merge-streams@2.3.0': {}
 
   '@sindresorhus/merge-streams@4.0.0': {}
 
-  '@speed-highlight/core@1.2.7': {}
+  '@speed-highlight/core@1.2.12': {}
 
   '@stylistic/stylelint-plugin@3.1.3(stylelint@16.25.0(typescript@5.9.3))':
     dependencies:
@@ -14671,9 +14681,9 @@ snapshots:
       magic-string: 0.25.9
       string.prototype.matchall: 4.0.12
 
-  '@svelte-put/shortcut@4.1.0(svelte@5.41.1)':
+  '@svelte-put/shortcut@4.1.0(svelte@5.43.3)':
     dependencies:
-      svelte: 5.41.1
+      svelte: 5.43.3
 
   '@sveltejs/acorn-typescript@1.0.6(acorn@8.15.0)':
     dependencies:
@@ -14699,48 +14709,48 @@ snapshots:
     dependencies:
       remove-accents: 0.5.0
 
-  '@tanstack/query-core@5.90.5': {}
+  '@tanstack/query-core@5.90.7': {}
 
   '@tanstack/store@0.7.7': {}
 
   '@tanstack/virtual-core@3.13.12': {}
 
-  '@tanstack/vue-query@5.90.5(vue@3.5.22(typescript@5.9.3))':
+  '@tanstack/vue-query@5.90.7(vue@3.5.23(typescript@5.9.3))':
     dependencies:
       '@tanstack/match-sorter-utils': 8.19.4
-      '@tanstack/query-core': 5.90.5
+      '@tanstack/query-core': 5.90.7
       '@vue/devtools-api': 6.6.4
-      vue: 3.5.22(typescript@5.9.3)
-      vue-demi: 0.14.10(vue@3.5.22(typescript@5.9.3))
+      vue: 3.5.23(typescript@5.9.3)
+      vue-demi: 0.14.10(vue@3.5.23(typescript@5.9.3))
 
-  '@tanstack/vue-store@0.7.7(vue@3.5.22(typescript@5.9.3))':
+  '@tanstack/vue-store@0.7.7(vue@3.5.23(typescript@5.9.3))':
     dependencies:
       '@tanstack/store': 0.7.7
-      vue: 3.5.22(typescript@5.9.3)
-      vue-demi: 0.14.10(vue@3.5.22(typescript@5.9.3))
+      vue: 3.5.23(typescript@5.9.3)
+      vue-demi: 0.14.10(vue@3.5.23(typescript@5.9.3))
 
-  '@tanstack/vue-virtual@3.13.12(vue@3.5.22(typescript@5.9.3))':
+  '@tanstack/vue-virtual@3.13.12(vue@3.5.23(typescript@5.9.3))':
     dependencies:
       '@tanstack/virtual-core': 3.13.12
-      vue: 3.5.22(typescript@5.9.3)
+      vue: 3.5.23(typescript@5.9.3)
 
-  '@tinyflow-ai/ui@1.1.7(svelte@5.41.1)':
+  '@tinyflow-ai/ui@1.1.9(svelte@5.43.3)':
     dependencies:
       '@floating-ui/dom': 1.7.4
-      '@xyflow/svelte': 1.4.0(svelte@5.41.1)
+      '@xyflow/svelte': 1.4.1(svelte@5.43.3)
     transitivePeerDependencies:
       - svelte
 
-  '@tinyflow-ai/vue@1.1.7(svelte@5.41.1)(vue@3.5.22(typescript@5.9.3))':
+  '@tinyflow-ai/vue@1.1.9(svelte@5.43.3)(vue@3.5.23(typescript@5.9.3))':
     dependencies:
-      '@tinyflow-ai/ui': 1.1.7(svelte@5.41.1)
-      vue: 3.5.22(typescript@5.9.3)
+      '@tinyflow-ai/ui': 1.1.9(svelte@5.43.3)
+      vue: 3.5.23(typescript@5.9.3)
     transitivePeerDependencies:
       - svelte
 
-  '@tinymce/tinymce-vue@6.3.0(tinymce@7.9.1)(vue@3.5.22(typescript@5.9.3))':
+  '@tinymce/tinymce-vue@6.3.0(tinymce@7.9.1)(vue@3.5.23(typescript@5.9.3))':
     dependencies:
-      vue: 3.5.22(typescript@5.9.3)
+      vue: 3.5.23(typescript@5.9.3)
     optionalDependencies:
       tinymce: 7.9.1
 
@@ -14749,7 +14759,7 @@ snapshots:
       tslib: 2.8.1
     optional: true
 
-  '@types/archiver@6.0.3':
+  '@types/archiver@6.0.4':
     dependencies:
       '@types/readdir-glob': 1.1.5
 
@@ -14762,13 +14772,13 @@ snapshots:
       '@types/deep-eql': 4.0.2
       assertion-error: 2.0.1
 
-  '@types/codemirror@5.60.16':
+  '@types/codemirror@5.60.17':
     dependencies:
       '@types/tern': 0.23.9
 
-  '@types/conventional-commits-parser@5.0.1':
+  '@types/conventional-commits-parser@5.0.2':
     dependencies:
-      '@types/node': 24.9.1
+      '@types/node': 24.10.0
 
   '@types/crypto-js@4.2.2': {}
 
@@ -14915,7 +14925,7 @@ snapshots:
   '@types/jsonwebtoken@9.0.10':
     dependencies:
       '@types/ms': 2.1.0
-      '@types/node': 24.9.1
+      '@types/node': 24.10.0
 
   '@types/katex@0.16.7': {}
 
@@ -14960,11 +14970,7 @@ snapshots:
 
   '@types/node@12.20.55': {}
 
-  '@types/node@22.18.12':
-    dependencies:
-      undici-types: 6.21.0
-
-  '@types/node@24.9.1':
+  '@types/node@24.10.0':
     dependencies:
       undici-types: 7.16.0
 
@@ -14976,19 +14982,19 @@ snapshots:
     dependencies:
       postcss: 8.5.6
 
-  '@types/qrcode@1.5.5':
+  '@types/qrcode@1.5.6':
     dependencies:
-      '@types/node': 24.9.1
+      '@types/node': 24.10.0
 
   '@types/qs@6.14.0': {}
 
   '@types/readdir-glob@1.1.5':
     dependencies:
-      '@types/node': 24.9.1
+      '@types/node': 24.10.0
 
   '@types/resolve@1.20.2': {}
 
-  '@types/sortablejs@1.15.8': {}
+  '@types/sortablejs@1.15.9': {}
 
   '@types/tern@0.23.9':
     dependencies:
@@ -15002,19 +15008,17 @@ snapshots:
 
   '@types/web-bluetooth@0.0.16': {}
 
-  '@types/web-bluetooth@0.0.20': {}
-
   '@types/web-bluetooth@0.0.21': {}
 
-  '@typescript-eslint/eslint-plugin@8.46.2(@typescript-eslint/parser@8.46.2(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)':
+  '@typescript-eslint/eslint-plugin@8.46.3(@typescript-eslint/parser@8.46.3(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
-      '@eslint-community/regexpp': 4.12.1
-      '@typescript-eslint/parser': 8.46.2(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)
-      '@typescript-eslint/scope-manager': 8.46.2
-      '@typescript-eslint/type-utils': 8.46.2(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)
-      '@typescript-eslint/utils': 8.46.2(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)
-      '@typescript-eslint/visitor-keys': 8.46.2
-      eslint: 9.38.0(jiti@2.6.1)
+      '@eslint-community/regexpp': 4.12.2
+      '@typescript-eslint/parser': 8.46.3(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/scope-manager': 8.46.3
+      '@typescript-eslint/type-utils': 8.46.3(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.46.3(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/visitor-keys': 8.46.3
+      eslint: 9.39.1(jiti@2.6.1)
       graphemer: 1.4.0
       ignore: 7.0.5
       natural-compare: 1.4.0
@@ -15023,22 +15027,22 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/parser@8.46.2(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)':
+  '@typescript-eslint/parser@8.46.3(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
-      '@typescript-eslint/scope-manager': 8.46.2
-      '@typescript-eslint/types': 8.46.2
-      '@typescript-eslint/typescript-estree': 8.46.2(typescript@5.9.3)
-      '@typescript-eslint/visitor-keys': 8.46.2
+      '@typescript-eslint/scope-manager': 8.46.3
+      '@typescript-eslint/types': 8.46.3
+      '@typescript-eslint/typescript-estree': 8.46.3(typescript@5.9.3)
+      '@typescript-eslint/visitor-keys': 8.46.3
       debug: 4.4.3
-      eslint: 9.38.0(jiti@2.6.1)
+      eslint: 9.39.1(jiti@2.6.1)
       typescript: 5.9.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/project-service@8.46.2(typescript@5.9.3)':
+  '@typescript-eslint/project-service@8.46.3(typescript@5.9.3)':
     dependencies:
-      '@typescript-eslint/tsconfig-utils': 8.46.2(typescript@5.9.3)
-      '@typescript-eslint/types': 8.46.2
+      '@typescript-eslint/tsconfig-utils': 8.46.3(typescript@5.9.3)
+      '@typescript-eslint/types': 8.46.3
       debug: 4.4.3
       typescript: 5.9.3
     transitivePeerDependencies:
@@ -15049,22 +15053,22 @@ snapshots:
       '@typescript-eslint/types': 7.18.0
       '@typescript-eslint/visitor-keys': 7.18.0
 
-  '@typescript-eslint/scope-manager@8.46.2':
+  '@typescript-eslint/scope-manager@8.46.3':
     dependencies:
-      '@typescript-eslint/types': 8.46.2
-      '@typescript-eslint/visitor-keys': 8.46.2
+      '@typescript-eslint/types': 8.46.3
+      '@typescript-eslint/visitor-keys': 8.46.3
 
-  '@typescript-eslint/tsconfig-utils@8.46.2(typescript@5.9.3)':
+  '@typescript-eslint/tsconfig-utils@8.46.3(typescript@5.9.3)':
     dependencies:
       typescript: 5.9.3
 
-  '@typescript-eslint/type-utils@8.46.2(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)':
+  '@typescript-eslint/type-utils@8.46.3(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
-      '@typescript-eslint/types': 8.46.2
-      '@typescript-eslint/typescript-estree': 8.46.2(typescript@5.9.3)
-      '@typescript-eslint/utils': 8.46.2(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/types': 8.46.3
+      '@typescript-eslint/typescript-estree': 8.46.3(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.46.3(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3)
       debug: 4.4.3
-      eslint: 9.38.0(jiti@2.6.1)
+      eslint: 9.39.1(jiti@2.6.1)
       ts-api-utils: 2.1.0(typescript@5.9.3)
       typescript: 5.9.3
     transitivePeerDependencies:
@@ -15072,7 +15076,7 @@ snapshots:
 
   '@typescript-eslint/types@7.18.0': {}
 
-  '@typescript-eslint/types@8.46.2': {}
+  '@typescript-eslint/types@8.46.3': {}
 
   '@typescript-eslint/typescript-estree@7.18.0(typescript@5.9.3)':
     dependencies:
@@ -15089,12 +15093,12 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/typescript-estree@8.46.2(typescript@5.9.3)':
+  '@typescript-eslint/typescript-estree@8.46.3(typescript@5.9.3)':
     dependencies:
-      '@typescript-eslint/project-service': 8.46.2(typescript@5.9.3)
-      '@typescript-eslint/tsconfig-utils': 8.46.2(typescript@5.9.3)
-      '@typescript-eslint/types': 8.46.2
-      '@typescript-eslint/visitor-keys': 8.46.2
+      '@typescript-eslint/project-service': 8.46.3(typescript@5.9.3)
+      '@typescript-eslint/tsconfig-utils': 8.46.3(typescript@5.9.3)
+      '@typescript-eslint/types': 8.46.3
+      '@typescript-eslint/visitor-keys': 8.46.3
       debug: 4.4.3
       fast-glob: 3.3.3
       is-glob: 4.0.3
@@ -15105,24 +15109,24 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/utils@7.18.0(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)':
+  '@typescript-eslint/utils@7.18.0(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
-      '@eslint-community/eslint-utils': 4.9.0(eslint@9.38.0(jiti@2.6.1))
+      '@eslint-community/eslint-utils': 4.9.0(eslint@9.39.1(jiti@2.6.1))
       '@typescript-eslint/scope-manager': 7.18.0
       '@typescript-eslint/types': 7.18.0
       '@typescript-eslint/typescript-estree': 7.18.0(typescript@5.9.3)
-      eslint: 9.38.0(jiti@2.6.1)
+      eslint: 9.39.1(jiti@2.6.1)
     transitivePeerDependencies:
       - supports-color
       - typescript
 
-  '@typescript-eslint/utils@8.46.2(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)':
+  '@typescript-eslint/utils@8.46.3(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
-      '@eslint-community/eslint-utils': 4.9.0(eslint@9.38.0(jiti@2.6.1))
-      '@typescript-eslint/scope-manager': 8.46.2
-      '@typescript-eslint/types': 8.46.2
-      '@typescript-eslint/typescript-estree': 8.46.2(typescript@5.9.3)
-      eslint: 9.38.0(jiti@2.6.1)
+      '@eslint-community/eslint-utils': 4.9.0(eslint@9.39.1(jiti@2.6.1))
+      '@typescript-eslint/scope-manager': 8.46.3
+      '@typescript-eslint/types': 8.46.3
+      '@typescript-eslint/typescript-estree': 8.46.3(typescript@5.9.3)
+      eslint: 9.39.1(jiti@2.6.1)
       typescript: 5.9.3
     transitivePeerDependencies:
       - supports-color
@@ -15132,9 +15136,9 @@ snapshots:
       '@typescript-eslint/types': 7.18.0
       eslint-visitor-keys: 3.4.3
 
-  '@typescript-eslint/visitor-keys@8.46.2':
+  '@typescript-eslint/visitor-keys@8.46.3':
     dependencies:
-      '@typescript-eslint/types': 8.46.2
+      '@typescript-eslint/types': 8.46.3
       eslint-visitor-keys: 4.2.1
 
   '@ungap/structured-clone@1.3.0': {}
@@ -15198,10 +15202,10 @@ snapshots:
   '@unrs/resolver-binding-win32-x64-msvc@1.11.1':
     optional: true
 
-  '@vee-validate/zod@4.15.1(vue@3.5.22(typescript@5.9.3))(zod@3.25.76)':
+  '@vee-validate/zod@4.15.1(vue@3.5.23(typescript@5.9.3))(zod@3.25.76)':
     dependencies:
       type-fest: 4.41.0
-      vee-validate: 4.15.1(vue@3.5.22(typescript@5.9.3))
+      vee-validate: 4.15.1(vue@3.5.23(typescript@5.9.3))
       zod: 3.25.76
     transitivePeerDependencies:
       - vue
@@ -15256,48 +15260,30 @@ snapshots:
 
   '@vite-pwa/vitepress@1.0.1(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))':
     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)
+      vite-plugin-pwa: 1.1.0(vite@5.4.21(@types/node@24.10.0)(less@4.4.2)(sass@1.93.3)(terser@5.44.1))(workbox-build@7.3.0)(workbox-window@7.3.0)
 
-  '@vitejs/plugin-vue-jsx@5.1.1(vite@7.1.11(@types/node@22.18.12)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))(vue@3.5.22(typescript@5.9.3))':
+  '@vitejs/plugin-vue-jsx@5.1.1(vite@7.2.1(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.3)(terser@5.44.1)(yaml@2.8.1))(vue@3.5.23(typescript@5.9.3))':
     dependencies:
-      '@babel/core': 7.28.4
-      '@babel/plugin-syntax-typescript': 7.27.1(@babel/core@7.28.4)
-      '@babel/plugin-transform-typescript': 7.28.0(@babel/core@7.28.4)
-      '@rolldown/pluginutils': 1.0.0-beta.44
-      '@vue/babel-plugin-jsx': 1.5.0(@babel/core@7.28.4)
-      vite: 7.1.11(@types/node@22.18.12)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
-      vue: 3.5.22(typescript@5.9.3)
+      '@babel/core': 7.28.5
+      '@babel/plugin-syntax-typescript': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-transform-typescript': 7.28.5(@babel/core@7.28.5)
+      '@rolldown/pluginutils': 1.0.0-beta.47
+      '@vue/babel-plugin-jsx': 1.5.0(@babel/core@7.28.5)
+      vite: 7.2.1(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.3)(terser@5.44.1)(yaml@2.8.1)
+      vue: 3.5.23(typescript@5.9.3)
     transitivePeerDependencies:
       - supports-color
 
-  '@vitejs/plugin-vue-jsx@5.1.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))':
+  '@vitejs/plugin-vue@5.2.4(vite@5.4.21(@types/node@24.10.0)(less@4.4.2)(sass@1.93.3)(terser@5.44.1))(vue@3.5.23(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@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)
-    transitivePeerDependencies:
-      - supports-color
+      vite: 5.4.21(@types/node@24.10.0)(less@4.4.2)(sass@1.93.3)(terser@5.44.1)
+      vue: 3.5.23(typescript@5.9.3)
 
-  '@vitejs/plugin-vue@5.2.4(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))':
-    dependencies:
-      vite: 5.4.21(@types/node@24.9.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)
-      vue: 3.5.22(typescript@5.9.3)
-
-  '@vitejs/plugin-vue@6.0.1(vite@7.1.11(@types/node@22.18.12)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))(vue@3.5.22(typescript@5.9.3))':
+  '@vitejs/plugin-vue@6.0.1(vite@7.2.1(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.3)(terser@5.44.1)(yaml@2.8.1))(vue@3.5.23(typescript@5.9.3))':
     dependencies:
       '@rolldown/pluginutils': 1.0.0-beta.29
-      vite: 7.1.11(@types/node@22.18.12)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
-      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))':
-    dependencies:
-      '@rolldown/pluginutils': 1.0.0-beta.29
-      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)
+      vite: 7.2.1(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.3)(terser@5.44.1)(yaml@2.8.1)
+      vue: 3.5.23(typescript@5.9.3)
 
   '@vitest/expect@3.2.4':
     dependencies:
@@ -15307,13 +15293,13 @@ snapshots:
       chai: 5.3.3
       tinyrainbow: 2.0.0
 
-  '@vitest/mocker@3.2.4(vite@7.1.11(@types/node@22.18.12)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))':
+  '@vitest/mocker@3.2.4(vite@7.2.1(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.3)(terser@5.44.1)(yaml@2.8.1))':
     dependencies:
       '@vitest/spy': 3.2.4
       estree-walker: 3.0.3
-      magic-string: 0.30.19
+      magic-string: 0.30.21
     optionalDependencies:
-      vite: 7.1.11(@types/node@22.18.12)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
+      vite: 7.2.1(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.3)(terser@5.44.1)(yaml@2.8.1)
 
   '@vitest/pretty-format@3.2.4':
     dependencies:
@@ -15328,7 +15314,7 @@ snapshots:
   '@vitest/snapshot@3.2.4':
     dependencies:
       '@vitest/pretty-format': 3.2.4
-      magic-string: 0.30.19
+      magic-string: 0.30.21
       pathe: 2.0.3
 
   '@vitest/spy@3.2.4':
@@ -15355,62 +15341,62 @@ snapshots:
 
   '@vue/babel-helper-vue-transform-on@1.5.0': {}
 
-  '@vue/babel-plugin-jsx@1.5.0(@babel/core@7.28.4)':
+  '@vue/babel-plugin-jsx@1.5.0(@babel/core@7.28.5)':
     dependencies:
       '@babel/helper-module-imports': 7.27.1
       '@babel/helper-plugin-utils': 7.27.1
-      '@babel/plugin-syntax-jsx': 7.27.1(@babel/core@7.28.4)
+      '@babel/plugin-syntax-jsx': 7.27.1(@babel/core@7.28.5)
       '@babel/template': 7.27.2
-      '@babel/traverse': 7.28.4
-      '@babel/types': 7.28.4
+      '@babel/traverse': 7.28.5
+      '@babel/types': 7.28.5
       '@vue/babel-helper-vue-transform-on': 1.5.0
-      '@vue/babel-plugin-resolve-type': 1.5.0(@babel/core@7.28.4)
-      '@vue/shared': 3.5.22
+      '@vue/babel-plugin-resolve-type': 1.5.0(@babel/core@7.28.5)
+      '@vue/shared': 3.5.23
     optionalDependencies:
-      '@babel/core': 7.28.4
+      '@babel/core': 7.28.5
     transitivePeerDependencies:
       - supports-color
 
-  '@vue/babel-plugin-resolve-type@1.5.0(@babel/core@7.28.4)':
+  '@vue/babel-plugin-resolve-type@1.5.0(@babel/core@7.28.5)':
     dependencies:
       '@babel/code-frame': 7.27.1
-      '@babel/core': 7.28.4
+      '@babel/core': 7.28.5
       '@babel/helper-module-imports': 7.27.1
       '@babel/helper-plugin-utils': 7.27.1
-      '@babel/parser': 7.28.4
-      '@vue/compiler-sfc': 3.5.22
+      '@babel/parser': 7.28.5
+      '@vue/compiler-sfc': 3.5.23
     transitivePeerDependencies:
       - supports-color
 
-  '@vue/compiler-core@3.5.22':
+  '@vue/compiler-core@3.5.23':
     dependencies:
-      '@babel/parser': 7.28.4
-      '@vue/shared': 3.5.22
+      '@babel/parser': 7.28.5
+      '@vue/shared': 3.5.23
       entities: 4.5.0
       estree-walker: 2.0.2
       source-map-js: 1.2.1
 
-  '@vue/compiler-dom@3.5.22':
+  '@vue/compiler-dom@3.5.23':
     dependencies:
-      '@vue/compiler-core': 3.5.22
-      '@vue/shared': 3.5.22
+      '@vue/compiler-core': 3.5.23
+      '@vue/shared': 3.5.23
 
-  '@vue/compiler-sfc@3.5.22':
+  '@vue/compiler-sfc@3.5.23':
     dependencies:
-      '@babel/parser': 7.28.4
-      '@vue/compiler-core': 3.5.22
-      '@vue/compiler-dom': 3.5.22
-      '@vue/compiler-ssr': 3.5.22
-      '@vue/shared': 3.5.22
+      '@babel/parser': 7.28.5
+      '@vue/compiler-core': 3.5.23
+      '@vue/compiler-dom': 3.5.23
+      '@vue/compiler-ssr': 3.5.23
+      '@vue/shared': 3.5.23
       estree-walker: 2.0.2
-      magic-string: 0.30.19
+      magic-string: 0.30.21
       postcss: 8.5.6
       source-map-js: 1.2.1
 
-  '@vue/compiler-ssr@3.5.22':
+  '@vue/compiler-ssr@3.5.23':
     dependencies:
-      '@vue/compiler-dom': 3.5.22
-      '@vue/shared': 3.5.22
+      '@vue/compiler-dom': 3.5.23
+      '@vue/shared': 3.5.23
 
   '@vue/compiler-vue2@2.7.16':
     dependencies:
@@ -15423,27 +15409,27 @@ snapshots:
     dependencies:
       '@vue/devtools-kit': 7.7.7
 
-  '@vue/devtools-core@7.7.7(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))':
+  '@vue/devtools-core@7.7.7(vite@7.2.1(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.3)(terser@5.44.1)(yaml@2.8.1))(vue@3.5.23(typescript@5.9.3))':
     dependencies:
       '@vue/devtools-kit': 7.7.7
       '@vue/devtools-shared': 7.7.7
       mitt: 3.0.1
       nanoid: 5.1.6
       pathe: 2.0.3
-      vite-hot-client: 2.1.0(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)
+      vite-hot-client: 2.1.0(vite@7.2.1(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.3)(terser@5.44.1)(yaml@2.8.1))
+      vue: 3.5.23(typescript@5.9.3)
     transitivePeerDependencies:
       - vite
 
   '@vue/devtools-kit@7.7.7':
     dependencies:
       '@vue/devtools-shared': 7.7.7
-      birpc: 2.6.1
+      birpc: 2.7.0
       hookable: 5.5.3
       mitt: 3.0.1
       perfect-debounce: 1.0.0
       speakingurl: 14.0.1
-      superjson: 2.2.3
+      superjson: 2.2.5
 
   '@vue/devtools-shared@7.7.7':
     dependencies:
@@ -15452,9 +15438,9 @@ snapshots:
   '@vue/language-core@2.2.0(typescript@5.9.3)':
     dependencies:
       '@volar/language-core': 2.4.23
-      '@vue/compiler-dom': 3.5.22
+      '@vue/compiler-dom': 3.5.23
       '@vue/compiler-vue2': 2.7.16
-      '@vue/shared': 3.5.22
+      '@vue/shared': 3.5.23
       alien-signals: 0.4.14
       minimatch: 9.0.5
       muggle-string: 0.4.1
@@ -15465,9 +15451,9 @@ snapshots:
   '@vue/language-core@2.2.10(typescript@5.9.3)':
     dependencies:
       '@volar/language-core': 2.4.23
-      '@vue/compiler-dom': 3.5.22
+      '@vue/compiler-dom': 3.5.23
       '@vue/compiler-vue2': 2.7.16
-      '@vue/shared': 3.5.22
+      '@vue/shared': 3.5.23
       alien-signals: 1.0.13
       minimatch: 9.0.5
       muggle-string: 0.4.1
@@ -15475,160 +15461,152 @@ snapshots:
     optionalDependencies:
       typescript: 5.9.3
 
-  '@vue/reactivity@3.5.22':
+  '@vue/reactivity@3.5.23':
     dependencies:
-      '@vue/shared': 3.5.22
+      '@vue/shared': 3.5.23
 
-  '@vue/runtime-core@3.5.22':
+  '@vue/runtime-core@3.5.23':
     dependencies:
-      '@vue/reactivity': 3.5.22
-      '@vue/shared': 3.5.22
+      '@vue/reactivity': 3.5.23
+      '@vue/shared': 3.5.23
 
-  '@vue/runtime-dom@3.5.22':
+  '@vue/runtime-dom@3.5.23':
     dependencies:
-      '@vue/reactivity': 3.5.22
-      '@vue/runtime-core': 3.5.22
-      '@vue/shared': 3.5.22
+      '@vue/reactivity': 3.5.23
+      '@vue/runtime-core': 3.5.23
+      '@vue/shared': 3.5.23
       csstype: 3.1.3
 
-  '@vue/server-renderer@3.5.22(vue@3.5.22(typescript@5.9.3))':
+  '@vue/server-renderer@3.5.23(vue@3.5.23(typescript@5.9.3))':
     dependencies:
-      '@vue/compiler-ssr': 3.5.22
-      '@vue/shared': 3.5.22
-      vue: 3.5.22(typescript@5.9.3)
+      '@vue/compiler-ssr': 3.5.23
+      '@vue/shared': 3.5.23
+      vue: 3.5.23(typescript@5.9.3)
 
-  '@vue/shared@3.5.22': {}
+  '@vue/shared@3.5.23': {}
 
   '@vue/test-utils@2.4.6':
     dependencies:
       js-beautify: 1.15.4
       vue-component-type-helpers: 2.2.12
 
-  '@vueuse/core@10.11.1(vue@3.5.22(typescript@5.9.3))':
-    dependencies:
-      '@types/web-bluetooth': 0.0.20
-      '@vueuse/metadata': 10.11.1
-      '@vueuse/shared': 10.11.1(vue@3.5.22(typescript@5.9.3))
-      vue-demi: 0.14.10(vue@3.5.22(typescript@5.9.3))
-    transitivePeerDependencies:
-      - '@vue/composition-api'
-      - vue
-
   '@vueuse/core@12.8.2(typescript@5.9.3)':
     dependencies:
       '@types/web-bluetooth': 0.0.21
       '@vueuse/metadata': 12.8.2
       '@vueuse/shared': 12.8.2(typescript@5.9.3)
-      vue: 3.5.22(typescript@5.9.3)
+      vue: 3.5.23(typescript@5.9.3)
     transitivePeerDependencies:
       - typescript
 
-  '@vueuse/core@13.9.0(vue@3.5.22(typescript@5.9.3))':
+  '@vueuse/core@13.9.0(vue@3.5.23(typescript@5.9.3))':
     dependencies:
       '@types/web-bluetooth': 0.0.21
       '@vueuse/metadata': 13.9.0
-      '@vueuse/shared': 13.9.0(vue@3.5.22(typescript@5.9.3))
-      vue: 3.5.22(typescript@5.9.3)
+      '@vueuse/shared': 13.9.0(vue@3.5.23(typescript@5.9.3))
+      vue: 3.5.23(typescript@5.9.3)
 
-  '@vueuse/core@9.13.0(vue@3.5.22(typescript@5.9.3))':
+  '@vueuse/core@14.0.0(vue@3.5.23(typescript@5.9.3))':
+    dependencies:
+      '@types/web-bluetooth': 0.0.21
+      '@vueuse/metadata': 14.0.0
+      '@vueuse/shared': 14.0.0(vue@3.5.23(typescript@5.9.3))
+      vue: 3.5.23(typescript@5.9.3)
+
+  '@vueuse/core@9.13.0(vue@3.5.23(typescript@5.9.3))':
     dependencies:
       '@types/web-bluetooth': 0.0.16
       '@vueuse/metadata': 9.13.0
-      '@vueuse/shared': 9.13.0(vue@3.5.22(typescript@5.9.3))
-      vue-demi: 0.14.10(vue@3.5.22(typescript@5.9.3))
+      '@vueuse/shared': 9.13.0(vue@3.5.23(typescript@5.9.3))
+      vue-demi: 0.14.10(vue@3.5.23(typescript@5.9.3))
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
 
-  '@vueuse/integrations@12.8.2(async-validator@4.2.5)(axios@1.12.2)(focus-trap@7.6.5)(nprogress@0.2.0)(qrcode@1.5.4)(sortablejs@1.15.6)(typescript@5.9.3)':
+  '@vueuse/integrations@12.8.2(async-validator@4.2.5)(axios@1.13.2)(focus-trap@7.6.6)(nprogress@0.2.0)(qrcode@1.5.4)(sortablejs@1.15.6)(typescript@5.9.3)':
     dependencies:
       '@vueuse/core': 12.8.2(typescript@5.9.3)
       '@vueuse/shared': 12.8.2(typescript@5.9.3)
-      vue: 3.5.22(typescript@5.9.3)
+      vue: 3.5.23(typescript@5.9.3)
     optionalDependencies:
       async-validator: 4.2.5
-      axios: 1.12.2
-      focus-trap: 7.6.5
+      axios: 1.13.2
+      focus-trap: 7.6.6
       nprogress: 0.2.0
       qrcode: 1.5.4
       sortablejs: 1.15.6
     transitivePeerDependencies:
       - typescript
 
-  '@vueuse/integrations@13.9.0(async-validator@4.2.5)(axios@1.12.2)(focus-trap@7.6.5)(nprogress@0.2.0)(qrcode@1.5.4)(sortablejs@1.15.6)(vue@3.5.22(typescript@5.9.3))':
+  '@vueuse/integrations@14.0.0(async-validator@4.2.5)(axios@1.13.2)(focus-trap@7.6.6)(nprogress@0.2.0)(qrcode@1.5.4)(sortablejs@1.15.6)(vue@3.5.23(typescript@5.9.3))':
     dependencies:
-      '@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': 14.0.0(vue@3.5.23(typescript@5.9.3))
+      '@vueuse/shared': 14.0.0(vue@3.5.23(typescript@5.9.3))
+      vue: 3.5.23(typescript@5.9.3)
     optionalDependencies:
       async-validator: 4.2.5
-      axios: 1.12.2
-      focus-trap: 7.6.5
+      axios: 1.13.2
+      focus-trap: 7.6.6
       nprogress: 0.2.0
       qrcode: 1.5.4
       sortablejs: 1.15.6
 
-  '@vueuse/metadata@10.11.1': {}
-
   '@vueuse/metadata@12.8.2': {}
 
   '@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))':
+  '@vueuse/motion@3.0.3(vue@3.5.23(typescript@5.9.3))':
     dependencies:
-      '@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))
+      '@vueuse/core': 13.9.0(vue@3.5.23(typescript@5.9.3))
+      '@vueuse/shared': 13.9.0(vue@3.5.23(typescript@5.9.3))
       defu: 6.1.4
       framesync: 6.1.2
       popmotion: 11.0.5
       style-value-types: 5.1.2
-      vue: 3.5.22(typescript@5.9.3)
+      vue: 3.5.23(typescript@5.9.3)
     optionalDependencies:
-      '@nuxt/kit': 3.19.3(magicast@0.3.5)
+      '@nuxt/kit': 3.20.0
     transitivePeerDependencies:
       - magicast
 
-  '@vueuse/shared@10.11.1(vue@3.5.22(typescript@5.9.3))':
-    dependencies:
-      vue-demi: 0.14.10(vue@3.5.22(typescript@5.9.3))
-    transitivePeerDependencies:
-      - '@vue/composition-api'
-      - vue
-
   '@vueuse/shared@12.8.2(typescript@5.9.3)':
     dependencies:
-      vue: 3.5.22(typescript@5.9.3)
+      vue: 3.5.23(typescript@5.9.3)
     transitivePeerDependencies:
       - typescript
 
-  '@vueuse/shared@13.9.0(vue@3.5.22(typescript@5.9.3))':
+  '@vueuse/shared@13.9.0(vue@3.5.23(typescript@5.9.3))':
     dependencies:
-      vue: 3.5.22(typescript@5.9.3)
+      vue: 3.5.23(typescript@5.9.3)
 
-  '@vueuse/shared@9.13.0(vue@3.5.22(typescript@5.9.3))':
+  '@vueuse/shared@14.0.0(vue@3.5.23(typescript@5.9.3))':
     dependencies:
-      vue-demi: 0.14.10(vue@3.5.22(typescript@5.9.3))
+      vue: 3.5.23(typescript@5.9.3)
+
+  '@vueuse/shared@9.13.0(vue@3.5.23(typescript@5.9.3))':
+    dependencies:
+      vue-demi: 0.14.10(vue@3.5.23(typescript@5.9.3))
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
 
-  '@vxe-ui/core@4.2.12(vue@3.5.22(typescript@5.9.3))':
+  '@vxe-ui/core@4.2.13(vue@3.5.23(typescript@5.9.3))':
     dependencies:
       dom-zindex: 1.0.6
-      vue: 3.5.22(typescript@5.9.3)
+      vue: 3.5.23(typescript@5.9.3)
       xe-utils: 3.7.9
 
-  '@xmldom/xmldom@0.8.11': {}
-
-  '@xyflow/svelte@1.4.0(svelte@5.41.1)':
+  '@xyflow/svelte@1.4.1(svelte@5.43.3)':
     dependencies:
-      '@svelte-put/shortcut': 4.1.0(svelte@5.41.1)
-      '@xyflow/system': 0.0.71
-      svelte: 5.41.1
+      '@svelte-put/shortcut': 4.1.0(svelte@5.43.3)
+      '@xyflow/system': 0.0.72
+      svelte: 5.43.3
 
-  '@xyflow/system@0.0.71':
+  '@xyflow/system@0.0.72':
     dependencies:
       '@types/d3-drag': 3.0.7
       '@types/d3-interpolate': 3.0.4
@@ -15708,22 +15686,22 @@ snapshots:
       json-schema-traverse: 1.0.0
       require-from-string: 2.0.2
 
-  algoliasearch@5.40.1:
+  algoliasearch@5.42.0:
     dependencies:
-      '@algolia/abtesting': 1.6.1
-      '@algolia/client-abtesting': 5.40.1
-      '@algolia/client-analytics': 5.40.1
-      '@algolia/client-common': 5.40.1
-      '@algolia/client-insights': 5.40.1
-      '@algolia/client-personalization': 5.40.1
-      '@algolia/client-query-suggestions': 5.40.1
-      '@algolia/client-search': 5.40.1
-      '@algolia/ingestion': 1.40.1
-      '@algolia/monitoring': 1.40.1
-      '@algolia/recommend': 5.40.1
-      '@algolia/requester-browser-xhr': 5.40.1
-      '@algolia/requester-fetch': 5.40.1
-      '@algolia/requester-node-http': 5.40.1
+      '@algolia/abtesting': 1.8.0
+      '@algolia/client-abtesting': 5.42.0
+      '@algolia/client-analytics': 5.42.0
+      '@algolia/client-common': 5.42.0
+      '@algolia/client-insights': 5.42.0
+      '@algolia/client-personalization': 5.42.0
+      '@algolia/client-query-suggestions': 5.42.0
+      '@algolia/client-search': 5.42.0
+      '@algolia/ingestion': 1.42.0
+      '@algolia/monitoring': 1.42.0
+      '@algolia/recommend': 5.42.0
+      '@algolia/requester-browser-xhr': 5.42.0
+      '@algolia/requester-fetch': 5.42.0
+      '@algolia/requester-node-http': 5.42.0
 
   alien-signals@0.4.14: {}
 
@@ -15735,7 +15713,7 @@ snapshots:
 
   ansi-colors@4.1.3: {}
 
-  ansi-escapes@7.1.1:
+  ansi-escapes@7.2.0:
     dependencies:
       environment: 1.1.0
 
@@ -15749,10 +15727,10 @@ snapshots:
 
   ansi-styles@6.2.3: {}
 
-  ant-design-vue@4.2.6(vue@3.5.22(typescript@5.9.3)):
+  ant-design-vue@4.2.6(vue@3.5.23(typescript@5.9.3)):
     dependencies:
       '@ant-design/colors': 6.0.0
-      '@ant-design/icons-vue': 7.0.1(vue@3.5.22(typescript@5.9.3))
+      '@ant-design/icons-vue': 7.0.1(vue@3.5.23(typescript@5.9.3))
       '@babel/runtime': 7.28.4
       '@ctrl/tinycolor': 4.2.0
       '@emotion/hash': 0.9.2
@@ -15761,7 +15739,7 @@ snapshots:
       array-tree-filter: 2.1.0
       async-validator: 4.2.5
       csstype: 3.1.3
-      dayjs: 1.11.18
+      dayjs: 1.11.19
       dom-align: 1.12.4
       dom-scroll-into-view: 2.0.1
       lodash: 4.17.21
@@ -15771,8 +15749,8 @@ snapshots:
       shallow-equal: 1.2.1
       stylis: 4.3.6
       throttle-debounce: 5.0.2
-      vue: 3.5.22(typescript@5.9.3)
-      vue-types: 3.0.2(vue@3.5.22(typescript@5.9.3))
+      vue: 3.5.23(typescript@5.9.3)
+      vue-types: 3.0.2(vue@3.5.23(typescript@5.9.3))
       warning: 4.0.3
 
   any-promise@1.3.0: {}
@@ -15866,10 +15844,10 @@ snapshots:
 
   at-least-node@1.0.0: {}
 
-  atomically@2.0.3:
+  atomically@2.1.0:
     dependencies:
-      stubborn-fs: 1.2.5
-      when-exit: 2.1.4
+      stubborn-fs: 2.0.0
+      when-exit: 2.1.5
 
   autolinker@3.16.2:
     dependencies:
@@ -15877,8 +15855,8 @@ snapshots:
 
   autoprefixer@10.4.21(postcss@8.5.6):
     dependencies:
-      browserslist: 4.26.3
-      caniuse-lite: 1.0.30001751
+      browserslist: 4.27.0
+      caniuse-lite: 1.0.30001754
       fraction.js: 4.3.7
       normalize-range: 0.1.2
       picocolors: 1.1.1
@@ -15889,13 +15867,13 @@ snapshots:
     dependencies:
       possible-typed-array-names: 1.1.0
 
-  axios-mock-adapter@2.1.0(axios@1.12.2):
+  axios-mock-adapter@2.1.0(axios@1.13.2):
     dependencies:
-      axios: 1.12.2
+      axios: 1.13.2
       fast-deep-equal: 3.1.3
       is-buffer: 2.0.5
 
-  axios@1.12.2:
+  axios@1.13.2:
     dependencies:
       follow-redirects: 1.15.11
       form-data: 4.0.4
@@ -15907,27 +15885,27 @@ snapshots:
 
   b4a@1.7.3: {}
 
-  babel-plugin-polyfill-corejs2@0.4.14(@babel/core@7.28.4):
+  babel-plugin-polyfill-corejs2@0.4.14(@babel/core@7.28.5):
     dependencies:
-      '@babel/compat-data': 7.28.4
-      '@babel/core': 7.28.4
-      '@babel/helper-define-polyfill-provider': 0.6.5(@babel/core@7.28.4)
+      '@babel/compat-data': 7.28.5
+      '@babel/core': 7.28.5
+      '@babel/helper-define-polyfill-provider': 0.6.5(@babel/core@7.28.5)
       semver: 6.3.1
     transitivePeerDependencies:
       - supports-color
 
-  babel-plugin-polyfill-corejs3@0.13.0(@babel/core@7.28.4):
+  babel-plugin-polyfill-corejs3@0.13.0(@babel/core@7.28.5):
     dependencies:
-      '@babel/core': 7.28.4
-      '@babel/helper-define-polyfill-provider': 0.6.5(@babel/core@7.28.4)
+      '@babel/core': 7.28.5
+      '@babel/helper-define-polyfill-provider': 0.6.5(@babel/core@7.28.5)
       core-js-compat: 3.46.0
     transitivePeerDependencies:
       - supports-color
 
-  babel-plugin-polyfill-regenerator@0.6.5(@babel/core@7.28.4):
+  babel-plugin-polyfill-regenerator@0.6.5(@babel/core@7.28.5):
     dependencies:
-      '@babel/core': 7.28.4
-      '@babel/helper-define-polyfill-provider': 0.6.5(@babel/core@7.28.4)
+      '@babel/core': 7.28.5
+      '@babel/helper-define-polyfill-provider': 0.6.5(@babel/core@7.28.5)
     transitivePeerDependencies:
       - supports-color
 
@@ -15935,11 +15913,11 @@ snapshots:
 
   balanced-match@2.0.0: {}
 
-  bare-events@2.8.0: {}
+  bare-events@2.8.1: {}
 
   base64-js@1.5.1: {}
 
-  baseline-browser-mapping@2.8.19: {}
+  baseline-browser-mapping@2.8.25: {}
 
   benz-amr-recorder@1.1.5:
     dependencies:
@@ -15961,7 +15939,7 @@ snapshots:
 
   bintrees@1.0.2: {}
 
-  birpc@2.6.1: {}
+  birpc@2.7.0: {}
 
   boolbase@1.0.0: {}
 
@@ -15976,10 +15954,10 @@ snapshots:
       widest-line: 5.0.0
       wrap-ansi: 9.0.2
 
-  bpmn-js-properties-panel@5.23.0(@bpmn-io/properties-panel@3.33.0)(bpmn-js@17.11.1)(camunda-bpmn-js-behaviors@1.11.2(bpmn-js@17.11.1)(camunda-bpmn-moddle@7.0.1)(zeebe-bpmn-moddle@1.11.0))(diagram-js@12.8.1):
+  bpmn-js-properties-panel@5.23.0(@bpmn-io/properties-panel@3.33.2)(bpmn-js@17.11.1)(camunda-bpmn-js-behaviors@1.11.2(bpmn-js@17.11.1)(camunda-bpmn-moddle@7.0.1)(zeebe-bpmn-moddle@1.11.0))(diagram-js@12.8.1):
     dependencies:
       '@bpmn-io/extract-process-variables': 0.8.0
-      '@bpmn-io/properties-panel': 3.33.0
+      '@bpmn-io/properties-panel': 3.33.2
       array-move: 4.0.0
       bpmn-js: 17.11.1
       camunda-bpmn-js-behaviors: 1.11.2(bpmn-js@17.11.1)(camunda-bpmn-moddle@7.0.1)(zeebe-bpmn-moddle@1.11.0)
@@ -16025,13 +16003,13 @@ snapshots:
     dependencies:
       fill-range: 7.1.1
 
-  browserslist@4.26.3:
+  browserslist@4.27.0:
     dependencies:
-      baseline-browser-mapping: 2.8.19
-      caniuse-lite: 1.0.30001751
-      electron-to-chromium: 1.5.238
-      node-releases: 2.0.26
-      update-browserslist-db: 1.1.3(browserslist@4.26.3)
+      baseline-browser-mapping: 2.8.25
+      caniuse-lite: 1.0.30001754
+      electron-to-chromium: 1.5.245
+      node-releases: 2.0.27
+      update-browserslist-db: 1.1.4(browserslist@4.27.0)
 
   buffer-crc32@1.0.0: {}
 
@@ -16050,7 +16028,7 @@ snapshots:
     dependencies:
       run-applescript: 7.1.0
 
-  c12@3.3.1(magicast@0.3.5):
+  c12@3.3.1(magicast@0.5.1):
     dependencies:
       chokidar: 4.0.3
       confbox: 0.2.2
@@ -16065,7 +16043,7 @@ snapshots:
       pkg-types: 2.3.0
       rc9: 2.1.2
     optionalDependencies:
-      magicast: 0.3.5
+      magicast: 0.5.1
 
   cac@6.7.14: {}
 
@@ -16086,8 +16064,8 @@ snapshots:
   cacheable@2.1.1:
     dependencies:
       '@cacheable/memoize': 2.0.3
-      '@cacheable/memory': 2.0.3
-      '@cacheable/utils': 2.1.0
+      '@cacheable/memory': 2.0.4
+      '@cacheable/utils': 2.2.0
       hookified: 1.12.2
       keyv: 5.5.3
       qified: 0.5.1
@@ -16138,12 +16116,12 @@ snapshots:
 
   caniuse-api@3.0.0:
     dependencies:
-      browserslist: 4.26.3
-      caniuse-lite: 1.0.30001751
+      browserslist: 4.27.0
+      caniuse-lite: 1.0.30001754
       lodash.memoize: 4.1.2
       lodash.uniq: 4.5.0
 
-  caniuse-lite@1.0.30001751: {}
+  caniuse-lite@1.0.30001754: {}
 
   ccount@2.0.1: {}
 
@@ -16170,7 +16148,7 @@ snapshots:
 
   character-entities-legacy@3.0.0: {}
 
-  chardet@2.1.0: {}
+  chardet@2.1.1: {}
 
   check-error@2.1.1: {}
 
@@ -16232,7 +16210,7 @@ snapshots:
   circular-dependency-scanner@2.3.0:
     dependencies:
       '@ast-grep/napi': 0.37.0
-      '@vue/compiler-sfc': 3.5.22
+      '@vue/compiler-sfc': 3.5.23
       commander: 12.1.0
       get-tsconfig: 4.13.0
       graph-cycles: 3.0.0
@@ -16399,7 +16377,7 @@ snapshots:
 
   configstore@7.1.0:
     dependencies:
-      atomically: 2.0.3
+      atomically: 2.1.0
       dot-prop: 9.0.0
       graceful-fs: 4.2.11
       xdg-basedir: 5.1.0
@@ -16431,8 +16409,6 @@ snapshots:
 
   cookie-es@2.0.0: {}
 
-  cookie@1.0.2: {}
-
   copy-anything@2.0.6:
     dependencies:
       is-what: 3.14.1
@@ -16443,7 +16419,7 @@ snapshots:
 
   core-js-compat@3.46.0:
     dependencies:
-      browserslist: 4.26.3
+      browserslist: 4.27.0
 
   core-js-pure@3.46.0: {}
 
@@ -16451,9 +16427,9 @@ snapshots:
 
   core-util-is@1.0.3: {}
 
-  cosmiconfig-typescript-loader@6.2.0(@types/node@24.9.1)(cosmiconfig@9.0.0(typescript@5.9.3))(typescript@5.9.3):
+  cosmiconfig-typescript-loader@6.2.0(@types/node@24.10.0)(cosmiconfig@9.0.0(typescript@5.9.3))(typescript@5.9.3):
     dependencies:
-      '@types/node': 24.9.1
+      '@types/node': 24.10.0
       cosmiconfig: 9.0.0(typescript@5.9.3)
       jiti: 2.6.1
       typescript: 5.9.3
@@ -16652,24 +16628,24 @@ snapshots:
 
   cssesc@3.0.0: {}
 
-  cssnano-preset-default@7.0.9(postcss@8.5.6):
+  cssnano-preset-default@7.0.10(postcss@8.5.6):
     dependencies:
-      browserslist: 4.26.3
+      browserslist: 4.27.0
       css-declaration-sorter: 7.3.0(postcss@8.5.6)
       cssnano-utils: 5.0.1(postcss@8.5.6)
       postcss: 8.5.6
       postcss-calc: 10.1.1(postcss@8.5.6)
-      postcss-colormin: 7.0.4(postcss@8.5.6)
-      postcss-convert-values: 7.0.7(postcss@8.5.6)
-      postcss-discard-comments: 7.0.4(postcss@8.5.6)
+      postcss-colormin: 7.0.5(postcss@8.5.6)
+      postcss-convert-values: 7.0.8(postcss@8.5.6)
+      postcss-discard-comments: 7.0.5(postcss@8.5.6)
       postcss-discard-duplicates: 7.0.2(postcss@8.5.6)
       postcss-discard-empty: 7.0.1(postcss@8.5.6)
       postcss-discard-overridden: 7.0.1(postcss@8.5.6)
       postcss-merge-longhand: 7.0.5(postcss@8.5.6)
-      postcss-merge-rules: 7.0.6(postcss@8.5.6)
+      postcss-merge-rules: 7.0.7(postcss@8.5.6)
       postcss-minify-font-values: 7.0.1(postcss@8.5.6)
       postcss-minify-gradients: 7.0.1(postcss@8.5.6)
-      postcss-minify-params: 7.0.4(postcss@8.5.6)
+      postcss-minify-params: 7.0.5(postcss@8.5.6)
       postcss-minify-selectors: 7.0.5(postcss@8.5.6)
       postcss-normalize-charset: 7.0.1(postcss@8.5.6)
       postcss-normalize-display-values: 7.0.1(postcss@8.5.6)
@@ -16677,11 +16653,11 @@ snapshots:
       postcss-normalize-repeat-style: 7.0.1(postcss@8.5.6)
       postcss-normalize-string: 7.0.1(postcss@8.5.6)
       postcss-normalize-timing-functions: 7.0.1(postcss@8.5.6)
-      postcss-normalize-unicode: 7.0.4(postcss@8.5.6)
+      postcss-normalize-unicode: 7.0.5(postcss@8.5.6)
       postcss-normalize-url: 7.0.1(postcss@8.5.6)
       postcss-normalize-whitespace: 7.0.1(postcss@8.5.6)
       postcss-ordered-values: 7.0.2(postcss@8.5.6)
-      postcss-reduce-initial: 7.0.4(postcss@8.5.6)
+      postcss-reduce-initial: 7.0.5(postcss@8.5.6)
       postcss-reduce-transforms: 7.0.1(postcss@8.5.6)
       postcss-svgo: 7.1.0(postcss@8.5.6)
       postcss-unique-selectors: 7.0.4(postcss@8.5.6)
@@ -16690,9 +16666,9 @@ snapshots:
     dependencies:
       postcss: 8.5.6
 
-  cssnano@7.1.1(postcss@8.5.6):
+  cssnano@7.1.2(postcss@8.5.6):
     dependencies:
-      cssnano-preset-default: 7.0.9(postcss@8.5.6)
+      cssnano-preset-default: 7.0.10(postcss@8.5.6)
       lilconfig: 3.1.3
       postcss: 8.5.6
 
@@ -16898,7 +16874,7 @@ snapshots:
 
   date-fns@4.1.0: {}
 
-  dayjs@1.11.18: {}
+  dayjs@1.11.19: {}
 
   db0@0.3.4: {}
 
@@ -16916,8 +16892,6 @@ snapshots:
 
   deep-is@0.1.4: {}
 
-  deep-pick-omit@1.2.1: {}
-
   deepmerge@4.3.1: {}
 
   default-browser-id@5.0.0: {}
@@ -16959,9 +16933,9 @@ snapshots:
 
   depcheck@1.4.7:
     dependencies:
-      '@babel/parser': 7.28.4
-      '@babel/traverse': 7.28.4
-      '@vue/compiler-sfc': 3.5.22
+      '@babel/parser': 7.28.5
+      '@babel/traverse': 7.28.5
+      '@vue/compiler-sfc': 3.5.23
       callsite: 1.0.0
       camelcase: 6.3.0
       cosmiconfig: 7.1.0
@@ -17044,6 +17018,8 @@ snapshots:
 
   diff-sequences@27.5.1: {}
 
+  diff@8.0.2: {}
+
   dijkstrajs@1.0.3: {}
 
   dir-glob@3.0.1:
@@ -17109,7 +17085,7 @@ snapshots:
 
   dot-prop@10.1.0:
     dependencies:
-      type-fest: 5.1.0
+      type-fest: 5.2.0
 
   dot-prop@5.3.0:
     dependencies:
@@ -17161,25 +17137,25 @@ snapshots:
     dependencies:
       jake: 10.9.4
 
-  electron-to-chromium@1.5.238: {}
+  electron-to-chromium@1.5.245: {}
 
-  element-plus@2.11.5(vue@3.5.22(typescript@5.9.3)):
+  element-plus@2.11.7(vue@3.5.23(typescript@5.9.3)):
     dependencies:
       '@ctrl/tinycolor': 4.2.0
-      '@element-plus/icons-vue': 2.3.2(vue@3.5.22(typescript@5.9.3))
+      '@element-plus/icons-vue': 2.3.2(vue@3.5.23(typescript@5.9.3))
       '@floating-ui/dom': 1.7.4
       '@popperjs/core': '@sxzz/popperjs-es@2.11.7'
       '@types/lodash': 4.17.20
       '@types/lodash-es': 4.17.12
-      '@vueuse/core': 9.13.0(vue@3.5.22(typescript@5.9.3))
+      '@vueuse/core': 9.13.0(vue@3.5.23(typescript@5.9.3))
       async-validator: 4.2.5
-      dayjs: 1.11.18
+      dayjs: 1.11.19
       lodash: 4.17.21
       lodash-es: 4.17.21
       lodash-unified: 1.0.3(@types/lodash-es@4.17.12)(lodash-es@4.17.21)(lodash@4.17.21)
       memoize-one: 6.0.0
       normalize-wheel-es: 1.2.0
-      vue: 3.5.22(typescript@5.9.3)
+      vue: 3.5.23(typescript@5.9.3)
     transitivePeerDependencies:
       - '@vue/composition-api'
 
@@ -17316,7 +17292,7 @@ snapshots:
       is-date-object: 1.1.0
       is-symbol: 1.1.1
 
-  es-toolkit@1.40.0: {}
+  es-toolkit@1.41.0: {}
 
   esbuild@0.25.3:
     optionalDependencies:
@@ -17366,21 +17342,21 @@ snapshots:
     optionalDependencies:
       source-map: 0.6.1
 
-  eslint-compat-utils@0.5.1(eslint@9.38.0(jiti@2.6.1)):
+  eslint-compat-utils@0.5.1(eslint@9.39.1(jiti@2.6.1)):
     dependencies:
-      eslint: 9.38.0(jiti@2.6.1)
+      eslint: 9.39.1(jiti@2.6.1)
       semver: 7.7.3
 
-  eslint-compat-utils@0.6.5(eslint@9.38.0(jiti@2.6.1)):
+  eslint-compat-utils@0.6.5(eslint@9.39.1(jiti@2.6.1)):
     dependencies:
-      eslint: 9.38.0(jiti@2.6.1)
+      eslint: 9.39.1(jiti@2.6.1)
       semver: 7.7.3
 
-  eslint-config-turbo@2.5.8(eslint@9.38.0(jiti@2.6.1))(turbo@2.5.8):
+  eslint-config-turbo@2.6.0(eslint@9.39.1(jiti@2.6.1))(turbo@2.6.0):
     dependencies:
-      eslint: 9.38.0(jiti@2.6.1)
-      eslint-plugin-turbo: 2.5.8(eslint@9.38.0(jiti@2.6.1))(turbo@2.5.8)
-      turbo: 2.5.8
+      eslint: 9.39.1(jiti@2.6.1)
+      eslint-plugin-turbo: 2.6.0(eslint@9.39.1(jiti@2.6.1))(turbo@2.6.0)
+      turbo: 2.6.0
 
   eslint-import-context@0.1.9(unrs-resolver@1.11.1):
     dependencies:
@@ -17389,55 +17365,55 @@ snapshots:
     optionalDependencies:
       unrs-resolver: 1.11.1
 
-  eslint-json-compat-utils@0.2.1(eslint@9.38.0(jiti@2.6.1))(jsonc-eslint-parser@2.4.1):
+  eslint-json-compat-utils@0.2.1(eslint@9.39.1(jiti@2.6.1))(jsonc-eslint-parser@2.4.1):
     dependencies:
-      eslint: 9.38.0(jiti@2.6.1)
+      eslint: 9.39.1(jiti@2.6.1)
       esquery: 1.6.0
       jsonc-eslint-parser: 2.4.1
 
-  eslint-plugin-command@3.3.1(eslint@9.38.0(jiti@2.6.1)):
+  eslint-plugin-command@3.3.1(eslint@9.39.1(jiti@2.6.1)):
     dependencies:
       '@es-joy/jsdoccomment': 0.50.2
-      eslint: 9.38.0(jiti@2.6.1)
+      eslint: 9.39.1(jiti@2.6.1)
 
-  eslint-plugin-es-x@7.8.0(eslint@9.38.0(jiti@2.6.1)):
+  eslint-plugin-es-x@7.8.0(eslint@9.39.1(jiti@2.6.1)):
     dependencies:
-      '@eslint-community/eslint-utils': 4.9.0(eslint@9.38.0(jiti@2.6.1))
-      '@eslint-community/regexpp': 4.12.1
-      eslint: 9.38.0(jiti@2.6.1)
-      eslint-compat-utils: 0.5.1(eslint@9.38.0(jiti@2.6.1))
+      '@eslint-community/eslint-utils': 4.9.0(eslint@9.39.1(jiti@2.6.1))
+      '@eslint-community/regexpp': 4.12.2
+      eslint: 9.39.1(jiti@2.6.1)
+      eslint-compat-utils: 0.5.1(eslint@9.39.1(jiti@2.6.1))
 
-  eslint-plugin-eslint-comments@3.2.0(eslint@9.38.0(jiti@2.6.1)):
+  eslint-plugin-eslint-comments@3.2.0(eslint@9.39.1(jiti@2.6.1)):
     dependencies:
       escape-string-regexp: 1.0.5
-      eslint: 9.38.0(jiti@2.6.1)
+      eslint: 9.39.1(jiti@2.6.1)
       ignore: 5.3.2
 
-  eslint-plugin-import-x@4.16.1(@typescript-eslint/utils@8.46.2(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.38.0(jiti@2.6.1)):
+  eslint-plugin-import-x@4.16.1(@typescript-eslint/utils@8.46.3(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.1(jiti@2.6.1)):
     dependencies:
-      '@typescript-eslint/types': 8.46.2
+      '@typescript-eslint/types': 8.46.3
       comment-parser: 1.4.1
       debug: 4.4.3
-      eslint: 9.38.0(jiti@2.6.1)
+      eslint: 9.39.1(jiti@2.6.1)
       eslint-import-context: 0.1.9(unrs-resolver@1.11.1)
       is-glob: 4.0.3
-      minimatch: 10.0.3
+      minimatch: 10.1.1
       semver: 7.7.3
       stable-hash-x: 0.2.0
       unrs-resolver: 1.11.1
     optionalDependencies:
-      '@typescript-eslint/utils': 8.46.2(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.46.3(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3)
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-jsdoc@50.8.0(eslint@9.38.0(jiti@2.6.1)):
+  eslint-plugin-jsdoc@50.8.0(eslint@9.39.1(jiti@2.6.1)):
     dependencies:
       '@es-joy/jsdoccomment': 0.50.2
       are-docs-informative: 0.0.2
       comment-parser: 1.4.1
       debug: 4.4.3
       escape-string-regexp: 4.0.0
-      eslint: 9.38.0(jiti@2.6.1)
+      eslint: 9.39.1(jiti@2.6.1)
       espree: 10.4.0
       esquery: 1.6.0
       parse-imports-exports: 0.2.4
@@ -17446,13 +17422,13 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-jsonc@2.21.0(eslint@9.38.0(jiti@2.6.1)):
+  eslint-plugin-jsonc@2.21.0(eslint@9.39.1(jiti@2.6.1)):
     dependencies:
-      '@eslint-community/eslint-utils': 4.9.0(eslint@9.38.0(jiti@2.6.1))
+      '@eslint-community/eslint-utils': 4.9.0(eslint@9.39.1(jiti@2.6.1))
       diff-sequences: 27.5.1
-      eslint: 9.38.0(jiti@2.6.1)
-      eslint-compat-utils: 0.6.5(eslint@9.38.0(jiti@2.6.1))
-      eslint-json-compat-utils: 0.2.1(eslint@9.38.0(jiti@2.6.1))(jsonc-eslint-parser@2.4.1)
+      eslint: 9.39.1(jiti@2.6.1)
+      eslint-compat-utils: 0.6.5(eslint@9.39.1(jiti@2.6.1))
+      eslint-json-compat-utils: 0.2.1(eslint@9.39.1(jiti@2.6.1))(jsonc-eslint-parser@2.4.1)
       espree: 10.4.0
       graphemer: 1.4.0
       jsonc-eslint-parser: 2.4.1
@@ -17461,12 +17437,12 @@ snapshots:
     transitivePeerDependencies:
       - '@eslint/json'
 
-  eslint-plugin-n@17.23.1(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3):
+  eslint-plugin-n@17.23.1(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3):
     dependencies:
-      '@eslint-community/eslint-utils': 4.9.0(eslint@9.38.0(jiti@2.6.1))
+      '@eslint-community/eslint-utils': 4.9.0(eslint@9.39.1(jiti@2.6.1))
       enhanced-resolve: 5.18.3
-      eslint: 9.38.0(jiti@2.6.1)
-      eslint-plugin-es-x: 7.8.0(eslint@9.38.0(jiti@2.6.1))
+      eslint: 9.39.1(jiti@2.6.1)
+      eslint-plugin-es-x: 7.8.0(eslint@9.39.1(jiti@2.6.1))
       get-tsconfig: 4.13.0
       globals: 15.15.0
       globrex: 0.1.2
@@ -17478,54 +17454,54 @@ snapshots:
 
   eslint-plugin-no-only-tests@3.3.0: {}
 
-  eslint-plugin-perfectionist@4.15.1(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3):
+  eslint-plugin-perfectionist@4.15.1(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3):
     dependencies:
-      '@typescript-eslint/types': 8.46.2
-      '@typescript-eslint/utils': 8.46.2(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)
-      eslint: 9.38.0(jiti@2.6.1)
+      '@typescript-eslint/types': 8.46.3
+      '@typescript-eslint/utils': 8.46.3(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3)
+      eslint: 9.39.1(jiti@2.6.1)
       natural-orderby: 5.0.0
     transitivePeerDependencies:
       - supports-color
       - typescript
 
-  eslint-plugin-prettier@5.5.4(@types/eslint@9.6.1)(eslint@9.38.0(jiti@2.6.1))(prettier@3.6.2):
+  eslint-plugin-prettier@5.5.4(@types/eslint@9.6.1)(eslint@9.39.1(jiti@2.6.1))(prettier@3.6.2):
     dependencies:
-      eslint: 9.38.0(jiti@2.6.1)
+      eslint: 9.39.1(jiti@2.6.1)
       prettier: 3.6.2
       prettier-linter-helpers: 1.0.0
       synckit: 0.11.11
     optionalDependencies:
       '@types/eslint': 9.6.1
 
-  eslint-plugin-regexp@2.10.0(eslint@9.38.0(jiti@2.6.1)):
+  eslint-plugin-regexp@2.10.0(eslint@9.39.1(jiti@2.6.1)):
     dependencies:
-      '@eslint-community/eslint-utils': 4.9.0(eslint@9.38.0(jiti@2.6.1))
-      '@eslint-community/regexpp': 4.12.1
+      '@eslint-community/eslint-utils': 4.9.0(eslint@9.39.1(jiti@2.6.1))
+      '@eslint-community/regexpp': 4.12.2
       comment-parser: 1.4.1
-      eslint: 9.38.0(jiti@2.6.1)
+      eslint: 9.39.1(jiti@2.6.1)
       jsdoc-type-pratt-parser: 4.8.0
       refa: 0.12.1
       regexp-ast-analysis: 0.7.1
       scslre: 0.3.0
 
-  eslint-plugin-turbo@2.5.8(eslint@9.38.0(jiti@2.6.1))(turbo@2.5.8):
+  eslint-plugin-turbo@2.6.0(eslint@9.39.1(jiti@2.6.1))(turbo@2.6.0):
     dependencies:
       dotenv: 16.0.3
-      eslint: 9.38.0(jiti@2.6.1)
-      turbo: 2.5.8
+      eslint: 9.39.1(jiti@2.6.1)
+      turbo: 2.6.0
 
-  eslint-plugin-unicorn@59.0.1(eslint@9.38.0(jiti@2.6.1)):
+  eslint-plugin-unicorn@59.0.1(eslint@9.39.1(jiti@2.6.1)):
     dependencies:
-      '@babel/helper-validator-identifier': 7.27.1
-      '@eslint-community/eslint-utils': 4.9.0(eslint@9.38.0(jiti@2.6.1))
+      '@babel/helper-validator-identifier': 7.28.5
+      '@eslint-community/eslint-utils': 4.9.0(eslint@9.39.1(jiti@2.6.1))
       '@eslint/plugin-kit': 0.2.8
       ci-info: 4.3.1
       clean-regexp: 1.0.0
       core-js-compat: 3.46.0
-      eslint: 9.38.0(jiti@2.6.1)
+      eslint: 9.39.1(jiti@2.6.1)
       esquery: 1.6.0
       find-up-simple: 1.0.1
-      globals: 16.4.0
+      globals: 16.5.0
       indent-string: 5.0.0
       is-builtin-module: 5.0.0
       jsesc: 3.1.0
@@ -17535,35 +17511,35 @@ snapshots:
       semver: 7.7.3
       strip-indent: 4.1.1
 
-  eslint-plugin-unused-imports@4.3.0(@typescript-eslint/eslint-plugin@8.46.2(@typescript-eslint/parser@8.46.2(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.38.0(jiti@2.6.1)):
+  eslint-plugin-unused-imports@4.3.0(@typescript-eslint/eslint-plugin@8.46.3(@typescript-eslint/parser@8.46.3(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.1(jiti@2.6.1)):
     dependencies:
-      eslint: 9.38.0(jiti@2.6.1)
+      eslint: 9.39.1(jiti@2.6.1)
     optionalDependencies:
-      '@typescript-eslint/eslint-plugin': 8.46.2(@typescript-eslint/parser@8.46.2(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/eslint-plugin': 8.46.3(@typescript-eslint/parser@8.46.3(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3)
 
-  eslint-plugin-vitest@0.5.4(@typescript-eslint/eslint-plugin@8.46.2(@typescript-eslint/parser@8.46.2(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)(vitest@3.2.4(@types/node@24.9.1)(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)):
+  eslint-plugin-vitest@0.5.4(@typescript-eslint/eslint-plugin@8.46.3(@typescript-eslint/parser@8.46.3(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3)(vitest@3.2.4(@types/node@24.10.0)(happy-dom@17.6.3)(jiti@2.6.1)(less@4.4.2)(sass@1.93.3)(terser@5.44.1)(yaml@2.8.1)):
     dependencies:
-      '@typescript-eslint/utils': 7.18.0(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)
-      eslint: 9.38.0(jiti@2.6.1)
+      '@typescript-eslint/utils': 7.18.0(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3)
+      eslint: 9.39.1(jiti@2.6.1)
     optionalDependencies:
-      '@typescript-eslint/eslint-plugin': 8.46.2(@typescript-eslint/parser@8.46.2(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)
-      vitest: 3.2.4(@types/node@24.9.1)(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)
+      '@typescript-eslint/eslint-plugin': 8.46.3(@typescript-eslint/parser@8.46.3(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3)
+      vitest: 3.2.4(@types/node@24.10.0)(happy-dom@17.6.3)(jiti@2.6.1)(less@4.4.2)(sass@1.93.3)(terser@5.44.1)(yaml@2.8.1)
     transitivePeerDependencies:
       - supports-color
       - typescript
 
-  eslint-plugin-vue@10.5.1(@typescript-eslint/parser@8.46.2(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.38.0(jiti@2.6.1))(vue-eslint-parser@10.2.0(eslint@9.38.0(jiti@2.6.1))):
+  eslint-plugin-vue@10.5.1(@typescript-eslint/parser@8.46.3(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.1(jiti@2.6.1))(vue-eslint-parser@10.2.0(eslint@9.39.1(jiti@2.6.1))):
     dependencies:
-      '@eslint-community/eslint-utils': 4.9.0(eslint@9.38.0(jiti@2.6.1))
-      eslint: 9.38.0(jiti@2.6.1)
+      '@eslint-community/eslint-utils': 4.9.0(eslint@9.39.1(jiti@2.6.1))
+      eslint: 9.39.1(jiti@2.6.1)
       natural-compare: 1.4.0
       nth-check: 2.1.1
       postcss-selector-parser: 6.1.2
       semver: 7.7.3
-      vue-eslint-parser: 10.2.0(eslint@9.38.0(jiti@2.6.1))
+      vue-eslint-parser: 10.2.0(eslint@9.39.1(jiti@2.6.1))
       xml-name-validator: 4.0.0
     optionalDependencies:
-      '@typescript-eslint/parser': 8.46.2(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/parser': 8.46.3(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3)
 
   eslint-scope@8.4.0:
     dependencies:
@@ -17574,16 +17550,16 @@ snapshots:
 
   eslint-visitor-keys@4.2.1: {}
 
-  eslint@9.38.0(jiti@2.6.1):
+  eslint@9.39.1(jiti@2.6.1):
     dependencies:
-      '@eslint-community/eslint-utils': 4.9.0(eslint@9.38.0(jiti@2.6.1))
-      '@eslint-community/regexpp': 4.12.1
+      '@eslint-community/eslint-utils': 4.9.0(eslint@9.39.1(jiti@2.6.1))
+      '@eslint-community/regexpp': 4.12.2
       '@eslint/config-array': 0.21.1
-      '@eslint/config-helpers': 0.4.1
-      '@eslint/core': 0.16.0
+      '@eslint/config-helpers': 0.4.2
+      '@eslint/core': 0.17.0
       '@eslint/eslintrc': 3.3.1
-      '@eslint/js': 9.38.0
-      '@eslint/plugin-kit': 0.4.0
+      '@eslint/js': 9.39.1
+      '@eslint/plugin-kit': 0.4.1
       '@humanfs/node': 0.16.7
       '@humanwhocodes/module-importer': 1.0.1
       '@humanwhocodes/retry': 0.4.3
@@ -17635,7 +17611,7 @@ snapshots:
     dependencies:
       estraverse: 5.3.0
 
-  esrap@2.1.0:
+  esrap@2.1.2:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5
 
@@ -17663,7 +17639,7 @@ snapshots:
 
   events-universal@1.0.1:
     dependencies:
-      bare-events: 2.8.0
+      bare-events: 2.8.1
     transitivePeerDependencies:
       - bare-abort-controller
 
@@ -17754,23 +17730,23 @@ snapshots:
     dependencies:
       '@bpmn-io/cm-theme': 0.1.0-alpha.2
       '@bpmn-io/feel-lint': 1.4.0
-      '@codemirror/autocomplete': 6.19.0
-      '@codemirror/commands': 6.9.0
+      '@codemirror/autocomplete': 6.19.1
+      '@codemirror/commands': 6.10.0
       '@codemirror/language': 6.11.3
-      '@codemirror/lint': 6.9.0
+      '@codemirror/lint': 6.9.2
       '@codemirror/state': 6.5.2
       '@codemirror/view': 6.38.6
       '@lezer/common': 1.3.0
-      '@lezer/highlight': 1.2.2
-      '@lezer/lr': 1.4.2
-      '@lezer/markdown': 1.5.1
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.3
+      '@lezer/markdown': 1.6.0
       feelin: 3.2.0
       lezer-feel: 1.9.0
       min-dom: 5.1.1
 
   feelin@3.2.0:
     dependencies:
-      '@lezer/lr': 1.4.2
+      '@lezer/lr': 1.4.3
       lezer-feel: 1.9.0
       luxon: 3.7.2
 
@@ -17832,7 +17808,7 @@ snapshots:
 
   fix-dts-default-cjs-exports@1.0.1:
     dependencies:
-      magic-string: 0.30.19
+      magic-string: 0.30.21
       mlly: 1.8.0
       rollup: 4.52.5
 
@@ -17854,9 +17830,9 @@ snapshots:
 
   flatted@3.3.3: {}
 
-  focus-trap@7.6.5:
+  focus-trap@7.6.6:
     dependencies:
-      tabbable: 6.2.0
+      tabbable: 6.3.0
 
   follow-redirects@1.15.11: {}
 
@@ -18034,7 +18010,7 @@ snapshots:
     dependencies:
       foreground-child: 3.3.1
       jackspeak: 4.1.1
-      minimatch: 10.0.3
+      minimatch: 10.1.1
       minipass: 7.1.2
       package-json-from-dist: 1.0.1
       path-scurry: 2.0.0
@@ -18085,7 +18061,7 @@ snapshots:
 
   globals@15.15.0: {}
 
-  globals@16.4.0: {}
+  globals@16.5.0: {}
 
   globalthis@1.0.4:
     dependencies:
@@ -18235,7 +18211,7 @@ snapshots:
       he: 1.2.0
       param-case: 3.0.4
       relateurl: 0.2.7
-      terser: 5.44.0
+      terser: 5.44.1
 
   html-minifier-terser@7.2.0:
     dependencies:
@@ -18245,7 +18221,7 @@ snapshots:
       entities: 4.5.0
       param-case: 3.0.4
       relateurl: 0.2.7
-      terser: 5.44.0
+      terser: 5.44.1
 
   html-tags@3.3.1: {}
 
@@ -18732,7 +18708,7 @@ snapshots:
 
   kolorist@1.8.0: {}
 
-  ky@1.12.0: {}
+  ky@1.14.0: {}
 
   latest-version@9.0.0:
     dependencies:
@@ -18808,8 +18784,8 @@ snapshots:
 
   lezer-feel@1.9.0:
     dependencies:
-      '@lezer/highlight': 1.2.2
-      '@lezer/lr': 1.4.2
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.3
       min-dash: 4.2.3
 
   lilconfig@3.1.3: {}
@@ -18939,7 +18915,7 @@ snapshots:
 
   log-update@6.1.0:
     dependencies:
-      ansi-escapes: 7.1.1
+      ansi-escapes: 7.2.0
       cli-cursor: 5.0.0
       slice-ansi: 7.1.2
       strip-ansi: 7.1.2
@@ -18967,9 +18943,9 @@ snapshots:
     dependencies:
       yallist: 4.0.0
 
-  lucide-vue-next@0.507.0(vue@3.5.22(typescript@5.9.3)):
+  lucide-vue-next@0.507.0(vue@3.5.23(typescript@5.9.3)):
     dependencies:
-      vue: 3.5.22(typescript@5.9.3)
+      vue: 3.5.23(typescript@5.9.3)
 
   luxon@3.7.2: {}
 
@@ -18985,14 +18961,14 @@ snapshots:
     dependencies:
       sourcemap-codec: 1.4.8
 
-  magic-string@0.30.19:
+  magic-string@0.30.21:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5
 
-  magicast@0.3.5:
+  magicast@0.5.1:
     dependencies:
-      '@babel/parser': 7.28.4
-      '@babel/types': 7.28.4
+      '@babel/parser': 7.28.5
+      '@babel/types': 7.28.5
       source-map-js: 1.2.1
 
   make-dir@2.1.0:
@@ -19072,7 +19048,7 @@ snapshots:
 
   mdn-data@2.12.2: {}
 
-  mdn-data@2.24.0: {}
+  mdn-data@2.25.0: {}
 
   mdurl@2.0.0: {}
 
@@ -19154,6 +19130,10 @@ snapshots:
     dependencies:
       '@isaacs/brace-expansion': 5.0.0
 
+  minimatch@10.1.1:
+    dependencies:
+      '@isaacs/brace-expansion': 5.0.0
+
   minimatch@3.1.2:
     dependencies:
       brace-expansion: 1.1.12
@@ -19202,11 +19182,11 @@ snapshots:
 
   mitt@3.0.1: {}
 
-  mkdist@2.4.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)):
+  mkdist@2.4.1(sass@1.93.3)(typescript@5.9.3)(vue-tsc@2.2.10(typescript@5.9.3))(vue@3.5.23(typescript@5.9.3)):
     dependencies:
       autoprefixer: 10.4.21(postcss@8.5.6)
       citty: 0.1.6
-      cssnano: 7.1.1(postcss@8.5.6)
+      cssnano: 7.1.2(postcss@8.5.6)
       defu: 6.1.4
       esbuild: 0.25.3
       jiti: 1.21.7
@@ -19218,9 +19198,9 @@ snapshots:
       semver: 7.7.3
       tinyglobby: 0.2.15
     optionalDependencies:
-      sass: 1.93.2
+      sass: 1.93.3
       typescript: 5.9.3
-      vue: 3.5.22(typescript@5.9.3)
+      vue: 3.5.23(typescript@5.9.3)
       vue-tsc: 2.2.10(typescript@5.9.3)
 
   mlly@1.8.0:
@@ -19274,10 +19254,10 @@ snapshots:
       object-assign: 4.1.1
       thenify-all: 1.6.0
 
-  naive-ui@2.43.1(vue@3.5.22(typescript@5.9.3)):
+  naive-ui@2.43.1(vue@3.5.23(typescript@5.9.3)):
     dependencies:
       '@css-render/plugin-bem': 0.15.14(css-render@0.15.14)
-      '@css-render/vue3-ssr': 0.15.14(vue@3.5.22(typescript@5.9.3))
+      '@css-render/vue3-ssr': 0.15.14(vue@3.5.23(typescript@5.9.3))
       '@types/katex': 0.16.7
       '@types/lodash': 4.17.20
       '@types/lodash-es': 4.17.12
@@ -19292,10 +19272,10 @@ snapshots:
       lodash-es: 4.17.21
       seemly: 0.3.10
       treemate: 0.3.11
-      vdirs: 0.1.8(vue@3.5.22(typescript@5.9.3))
-      vooks: 0.2.12(vue@3.5.22(typescript@5.9.3))
-      vue: 3.5.22(typescript@5.9.3)
-      vueuc: 0.4.65(vue@3.5.22(typescript@5.9.3))
+      vdirs: 0.1.8(vue@3.5.23(typescript@5.9.3))
+      vooks: 0.2.12(vue@3.5.23(typescript@5.9.3))
+      vue: 3.5.23(typescript@5.9.3)
+      vueuc: 0.4.65(vue@3.5.23(typescript@5.9.3))
 
   nanoid@3.3.11: {}
 
@@ -19312,22 +19292,22 @@ snapshots:
   needle@3.3.1:
     dependencies:
       iconv-lite: 0.6.3
-      sax: 1.4.1
+      sax: 1.4.3
     optional: true
 
-  nitropack@2.12.7:
+  nitropack@2.12.9:
     dependencies:
       '@cloudflare/kv-asset-handler': 0.4.0
       '@rollup/plugin-alias': 5.1.1(rollup@4.52.5)
-      '@rollup/plugin-commonjs': 28.0.8(rollup@4.52.5)
+      '@rollup/plugin-commonjs': 28.0.9(rollup@4.52.5)
       '@rollup/plugin-inject': 5.0.5(rollup@4.52.5)
       '@rollup/plugin-json': 6.1.0(rollup@4.52.5)
       '@rollup/plugin-node-resolve': 16.0.3(rollup@4.52.5)
-      '@rollup/plugin-replace': 6.0.2(rollup@4.52.5)
+      '@rollup/plugin-replace': 6.0.3(rollup@4.52.5)
       '@rollup/plugin-terser': 0.4.4(rollup@4.52.5)
       '@vercel/nft': 0.30.3(rollup@4.52.5)
       archiver: 7.0.1
-      c12: 3.3.1(magicast@0.3.5)
+      c12: 3.3.1(magicast@0.5.1)
       chokidar: 4.0.3
       citty: 0.1.6
       compatx: 0.2.0
@@ -19354,13 +19334,13 @@ snapshots:
       klona: 2.0.6
       knitwork: 1.2.0
       listhen: 1.9.0
-      magic-string: 0.30.19
-      magicast: 0.3.5
+      magic-string: 0.30.21
+      magicast: 0.5.1
       mime: 4.1.0
       mlly: 1.8.0
       node-fetch-native: 1.6.7
       node-mock-http: 1.0.3
-      ofetch: 1.4.1
+      ofetch: 1.5.1
       ohash: 2.0.11
       pathe: 2.0.3
       perfect-debounce: 2.0.0
@@ -19379,13 +19359,13 @@ snapshots:
       ultrahtml: 1.6.0
       uncrypto: 0.1.3
       unctx: 2.4.1
-      unenv: 2.0.0-rc.21
+      unenv: 2.0.0-rc.24
       unimport: 5.5.0
       unplugin-utils: 0.3.1
-      unstorage: 1.17.1(db0@0.3.4)(ioredis@5.8.2)
+      unstorage: 1.17.2(db0@0.3.4)(ioredis@5.8.2)
       untyped: 2.0.0
       unwasm: 0.3.11
-      youch: 4.1.0-beta.11
+      youch: 4.1.0-beta.12
       youch-core: 0.3.3
     transitivePeerDependencies:
       - '@azure/app-configuration'
@@ -19458,7 +19438,7 @@ snapshots:
 
   node-mock-http@1.0.3: {}
 
-  node-releases@2.0.26: {}
+  node-releases@2.0.27: {}
 
   nopt@7.2.1:
     dependencies:
@@ -19497,7 +19477,7 @@ snapshots:
       consola: 3.4.2
       pathe: 2.0.3
       pkg-types: 2.3.0
-      tinyexec: 1.0.1
+      tinyexec: 1.0.2
 
   object-assign@4.1.1: {}
 
@@ -19520,7 +19500,7 @@ snapshots:
       has-symbols: 1.1.0
       object-keys: 1.1.1
 
-  ofetch@1.4.1:
+  ofetch@1.5.1:
     dependencies:
       destr: 2.0.5
       node-fetch-native: 1.6.7
@@ -19630,7 +19610,7 @@ snapshots:
 
   package-json@10.0.1:
     dependencies:
-      ky: 1.12.0
+      ky: 1.14.0
       registry-auth-token: 5.1.0
       registry-url: 6.0.1
       semver: 7.7.3
@@ -19749,19 +19729,17 @@ snapshots:
 
   pify@4.0.1: {}
 
-  pinia-plugin-persistedstate@4.5.0(@nuxt/kit@3.19.3(magicast@0.3.5))(pinia@3.0.3(typescript@5.9.3)(vue@3.5.22(typescript@5.9.3))):
+  pinia-plugin-persistedstate@4.7.1(@nuxt/kit@3.20.0)(pinia@3.0.4(typescript@5.9.3)(vue@3.5.23(typescript@5.9.3))):
     dependencies:
-      deep-pick-omit: 1.2.1
       defu: 6.1.4
-      destr: 2.0.5
     optionalDependencies:
-      '@nuxt/kit': 3.19.3(magicast@0.3.5)
-      pinia: 3.0.3(typescript@5.9.3)(vue@3.5.22(typescript@5.9.3))
+      '@nuxt/kit': 3.20.0
+      pinia: 3.0.4(typescript@5.9.3)(vue@3.5.23(typescript@5.9.3))
 
-  pinia@3.0.3(typescript@5.9.3)(vue@3.5.22(typescript@5.9.3)):
+  pinia@3.0.4(typescript@5.9.3)(vue@3.5.23(typescript@5.9.3)):
     dependencies:
       '@vue/devtools-api': 7.7.7
-      vue: 3.5.22(typescript@5.9.3)
+      vue: 3.5.23(typescript@5.9.3)
     optionalDependencies:
       typescript: 5.9.3
 
@@ -19849,17 +19827,17 @@ snapshots:
       postcss: 8.5.6
       postcss-value-parser: 4.2.0
 
-  postcss-colormin@7.0.4(postcss@8.5.6):
+  postcss-colormin@7.0.5(postcss@8.5.6):
     dependencies:
-      browserslist: 4.26.3
+      browserslist: 4.27.0
       caniuse-api: 3.0.0
       colord: 2.9.3
       postcss: 8.5.6
       postcss-value-parser: 4.2.0
 
-  postcss-convert-values@7.0.7(postcss@8.5.6):
+  postcss-convert-values@7.0.8(postcss@8.5.6):
     dependencies:
-      browserslist: 4.26.3
+      browserslist: 4.27.0
       postcss: 8.5.6
       postcss-value-parser: 4.2.0
 
@@ -19893,7 +19871,7 @@ snapshots:
       postcss: 8.5.6
       postcss-selector-parser: 7.1.0
 
-  postcss-discard-comments@7.0.4(postcss@8.5.6):
+  postcss-discard-comments@7.0.5(postcss@8.5.6):
     dependencies:
       postcss: 8.5.6
       postcss-selector-parser: 7.1.0
@@ -19995,11 +19973,11 @@ snapshots:
     dependencies:
       postcss: 8.5.6
       postcss-value-parser: 4.2.0
-      stylehacks: 7.0.6(postcss@8.5.6)
+      stylehacks: 7.0.7(postcss@8.5.6)
 
-  postcss-merge-rules@7.0.6(postcss@8.5.6):
+  postcss-merge-rules@7.0.7(postcss@8.5.6):
     dependencies:
-      browserslist: 4.26.3
+      browserslist: 4.27.0
       caniuse-api: 3.0.0
       cssnano-utils: 5.0.1(postcss@8.5.6)
       postcss: 8.5.6
@@ -20017,9 +19995,9 @@ snapshots:
       postcss: 8.5.6
       postcss-value-parser: 4.2.0
 
-  postcss-minify-params@7.0.4(postcss@8.5.6):
+  postcss-minify-params@7.0.5(postcss@8.5.6):
     dependencies:
-      browserslist: 4.26.3
+      browserslist: 4.27.0
       cssnano-utils: 5.0.1(postcss@8.5.6)
       postcss: 8.5.6
       postcss-value-parser: 4.2.0
@@ -20081,9 +20059,9 @@ snapshots:
       postcss: 8.5.6
       postcss-value-parser: 4.2.0
 
-  postcss-normalize-unicode@7.0.4(postcss@8.5.6):
+  postcss-normalize-unicode@7.0.5(postcss@8.5.6):
     dependencies:
-      browserslist: 4.26.3
+      browserslist: 4.27.0
       postcss: 8.5.6
       postcss-value-parser: 4.2.0
 
@@ -20160,7 +20138,7 @@ snapshots:
       '@csstools/postcss-trigonometric-functions': 4.0.9(postcss@8.5.6)
       '@csstools/postcss-unset-value': 4.0.0(postcss@8.5.6)
       autoprefixer: 10.4.21(postcss@8.5.6)
-      browserslist: 4.26.3
+      browserslist: 4.27.0
       css-blank-pseudo: 7.0.1(postcss@8.5.6)
       css-has-pseudo: 7.0.3(postcss@8.5.6)
       css-prefers-color-scheme: 10.0.0(postcss@8.5.6)
@@ -20197,9 +20175,9 @@ snapshots:
       postcss: 8.5.6
       postcss-selector-parser: 7.1.0
 
-  postcss-reduce-initial@7.0.4(postcss@8.5.6):
+  postcss-reduce-initial@7.0.5(postcss@8.5.6):
     dependencies:
-      browserslist: 4.26.3
+      browserslist: 4.27.0
       caniuse-api: 3.0.0
       postcss: 8.5.6
 
@@ -20347,23 +20325,6 @@ snapshots:
 
   queue-microtask@1.2.3: {}
 
-  radix-vue@1.9.17(vue@3.5.22(typescript@5.9.3)):
-    dependencies:
-      '@floating-ui/dom': 1.7.4
-      '@floating-ui/vue': 1.1.9(vue@3.5.22(typescript@5.9.3))
-      '@internationalized/date': 3.10.0
-      '@internationalized/number': 3.6.5
-      '@tanstack/vue-virtual': 3.13.12(vue@3.5.22(typescript@5.9.3))
-      '@vueuse/core': 10.11.1(vue@3.5.22(typescript@5.9.3))
-      '@vueuse/shared': 10.11.1(vue@3.5.22(typescript@5.9.3))
-      aria-hidden: 1.2.6
-      defu: 6.1.4
-      fast-deep-equal: 3.1.3
-      nanoid: 5.1.6
-      vue: 3.5.22(typescript@5.9.3)
-    transitivePeerDependencies:
-      - '@vue/composition-api'
-
   radix3@1.1.2: {}
 
   randombytes@2.1.0:
@@ -20438,7 +20399,7 @@ snapshots:
 
   refa@0.12.1:
     dependencies:
-      '@eslint-community/regexpp': 4.12.1
+      '@eslint-community/regexpp': 4.12.2
 
   reflect.getprototypeof@1.0.10:
     dependencies:
@@ -20469,7 +20430,7 @@ snapshots:
 
   regexp-ast-analysis@0.7.1:
     dependencies:
-      '@eslint-community/regexpp': 4.12.1
+      '@eslint-community/regexpp': 4.12.2
       refa: 0.12.1
 
   regexp-tree@0.1.27: {}
@@ -20510,6 +20471,23 @@ snapshots:
     dependencies:
       jsesc: 3.1.0
 
+  reka-ui@2.6.0(typescript@5.9.3)(vue@3.5.23(typescript@5.9.3)):
+    dependencies:
+      '@floating-ui/dom': 1.7.4
+      '@floating-ui/vue': 1.1.9(vue@3.5.23(typescript@5.9.3))
+      '@internationalized/date': 3.10.0
+      '@internationalized/number': 3.6.5
+      '@tanstack/vue-virtual': 3.13.12(vue@3.5.23(typescript@5.9.3))
+      '@vueuse/core': 12.8.2(typescript@5.9.3)
+      '@vueuse/shared': 12.8.2(typescript@5.9.3)
+      aria-hidden: 1.2.6
+      defu: 6.1.4
+      ohash: 2.0.11
+      vue: 3.5.23(typescript@5.9.3)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - typescript
+
   relateurl@0.2.7: {}
 
   remarkable-katex@1.2.1: {}
@@ -20559,7 +20537,7 @@ snapshots:
 
   rfdc@1.4.1: {}
 
-  rimraf@6.0.1:
+  rimraf@6.1.0:
     dependencies:
       glob: 11.0.3
       package-json-from-dist: 1.0.1
@@ -20568,7 +20546,7 @@ snapshots:
 
   rollup-plugin-dts@6.2.3(rollup@4.52.5)(typescript@5.9.3):
     dependencies:
-      magic-string: 0.30.19
+      magic-string: 0.30.21
       rollup: 4.52.5
       typescript: 5.9.3
     optionalDependencies:
@@ -20671,7 +20649,7 @@ snapshots:
 
   safer-buffer@2.1.2: {}
 
-  sass@1.93.2:
+  sass@1.93.3:
     dependencies:
       chokidar: 4.0.3
       immutable: 5.1.4
@@ -20679,7 +20657,7 @@ snapshots:
     optionalDependencies:
       '@parcel/watcher': 2.5.1
 
-  sax@1.4.1: {}
+  sax@1.4.3: {}
 
   saxen@8.1.2: {}
 
@@ -20689,7 +20667,7 @@ snapshots:
 
   scslre@0.3.0:
     dependencies:
-      '@eslint-community/regexpp': 4.12.1
+      '@eslint-community/regexpp': 4.12.2
       refa: 0.12.1
       regexp-ast-analysis: 0.7.1
 
@@ -21060,7 +21038,11 @@ snapshots:
 
   strnum@1.1.2: {}
 
-  stubborn-fs@1.2.5: {}
+  stubborn-fs@2.0.0:
+    dependencies:
+      stubborn-utils: 1.0.2
+
+  stubborn-utils@1.0.2: {}
 
   style-mod@4.1.3: {}
 
@@ -21071,9 +21053,9 @@ snapshots:
       hey-listen: 1.0.8
       tslib: 2.4.0
 
-  stylehacks@7.0.6(postcss@8.5.6):
+  stylehacks@7.0.7(postcss@8.5.6):
     dependencies:
-      browserslist: 4.26.3
+      browserslist: 4.27.0
       postcss: 8.5.6
       postcss-selector-parser: 7.1.0
 
@@ -21140,7 +21122,7 @@ snapshots:
       css-tree: 3.1.0
       is-plain-object: 5.0.0
       known-css-properties: 0.36.0
-      mdn-data: 2.24.0
+      mdn-data: 2.25.0
       postcss-media-query-parser: 0.2.3
       postcss-resolve-nested-selector: 0.1.6
       postcss-selector-parser: 7.1.0
@@ -21203,7 +21185,7 @@ snapshots:
       pirates: 4.0.7
       ts-interface-checker: 0.1.13
 
-  superjson@2.2.3:
+  superjson@2.2.5:
     dependencies:
       copy-anything: 4.0.5
 
@@ -21224,7 +21206,7 @@ snapshots:
 
   supports-preserve-symlinks-flag@1.0.0: {}
 
-  svelte@5.41.1:
+  svelte@5.43.3:
     dependencies:
       '@jridgewell/remapping': 2.3.5
       '@jridgewell/sourcemap-codec': 1.5.5
@@ -21235,10 +21217,10 @@ snapshots:
       axobject-query: 4.1.0
       clsx: 2.1.1
       esm-env: 1.2.2
-      esrap: 2.1.0
+      esrap: 2.1.2
       is-reference: 3.0.3
       locate-character: 3.0.0
-      magic-string: 0.30.19
+      magic-string: 0.30.21
       zimmerframe: 1.1.4
 
   sver@1.8.4:
@@ -21255,7 +21237,7 @@ snapshots:
       css-what: 6.2.2
       csso: 5.0.5
       picocolors: 1.1.1
-      sax: 1.4.1
+      sax: 1.4.3
 
   synckit@0.11.11:
     dependencies:
@@ -21263,7 +21245,7 @@ snapshots:
 
   system-architecture@0.1.0: {}
 
-  tabbable@6.2.0: {}
+  tabbable@6.3.0: {}
 
   table@6.9.0:
     dependencies:
@@ -21320,7 +21302,7 @@ snapshots:
       - bare-abort-controller
       - react-native-b4a
 
-  tar@7.5.1:
+  tar@7.5.2:
     dependencies:
       '@isaacs/fs-minipass': 4.0.1
       chownr: 3.0.0
@@ -21339,7 +21321,7 @@ snapshots:
 
   term-size@2.2.1: {}
 
-  terser@5.44.0:
+  terser@5.44.1:
     dependencies:
       '@jridgewell/source-map': 0.3.11
       acorn: 8.15.0
@@ -21376,7 +21358,7 @@ snapshots:
 
   tinyexec@0.3.2: {}
 
-  tinyexec@1.0.1: {}
+  tinyexec@1.0.2: {}
 
   tinyglobby@0.2.15:
     dependencies:
@@ -21434,32 +21416,32 @@ snapshots:
 
   tslib@2.8.1: {}
 
-  turbo-darwin-64@2.5.8:
+  turbo-darwin-64@2.6.0:
     optional: true
 
-  turbo-darwin-arm64@2.5.8:
+  turbo-darwin-arm64@2.6.0:
     optional: true
 
-  turbo-linux-64@2.5.8:
+  turbo-linux-64@2.6.0:
     optional: true
 
-  turbo-linux-arm64@2.5.8:
+  turbo-linux-arm64@2.6.0:
     optional: true
 
-  turbo-windows-64@2.5.8:
+  turbo-windows-64@2.6.0:
     optional: true
 
-  turbo-windows-arm64@2.5.8:
+  turbo-windows-arm64@2.6.0:
     optional: true
 
-  turbo@2.5.8:
+  turbo@2.6.0:
     optionalDependencies:
-      turbo-darwin-64: 2.5.8
-      turbo-darwin-arm64: 2.5.8
-      turbo-linux-64: 2.5.8
-      turbo-linux-arm64: 2.5.8
-      turbo-windows-64: 2.5.8
-      turbo-windows-arm64: 2.5.8
+      turbo-darwin-64: 2.6.0
+      turbo-darwin-arm64: 2.6.0
+      turbo-linux-64: 2.6.0
+      turbo-linux-arm64: 2.6.0
+      turbo-windows-64: 2.6.0
+      turbo-windows-arm64: 2.6.0
 
   type-check@0.4.0:
     dependencies:
@@ -21469,7 +21451,7 @@ snapshots:
 
   type-fest@4.41.0: {}
 
-  type-fest@5.1.0:
+  type-fest@5.2.0:
     dependencies:
       tagged-tag: 1.0.0
 
@@ -21523,13 +21505,13 @@ snapshots:
       has-symbols: 1.1.0
       which-boxed-primitive: 1.1.1
 
-  unbuild@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)):
+  unbuild@3.6.1(sass@1.93.3)(typescript@5.9.3)(vue-tsc@2.2.10(typescript@5.9.3))(vue@3.5.23(typescript@5.9.3)):
     dependencies:
       '@rollup/plugin-alias': 5.1.1(rollup@4.52.5)
-      '@rollup/plugin-commonjs': 28.0.8(rollup@4.52.5)
+      '@rollup/plugin-commonjs': 28.0.9(rollup@4.52.5)
       '@rollup/plugin-json': 6.1.0(rollup@4.52.5)
       '@rollup/plugin-node-resolve': 16.0.3(rollup@4.52.5)
-      '@rollup/plugin-replace': 6.0.2(rollup@4.52.5)
+      '@rollup/plugin-replace': 6.0.3(rollup@4.52.5)
       '@rollup/pluginutils': 5.3.0(rollup@4.52.5)
       citty: 0.1.6
       consola: 3.4.2
@@ -21538,8 +21520,8 @@ snapshots:
       fix-dts-default-cjs-exports: 1.0.1
       hookable: 5.5.3
       jiti: 2.6.1
-      magic-string: 0.30.19
-      mkdist: 2.4.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))
+      magic-string: 0.30.21
+      mkdist: 2.4.1(sass@1.93.3)(typescript@5.9.3)(vue-tsc@2.2.10(typescript@5.9.3))(vue@3.5.23(typescript@5.9.3))
       mlly: 1.8.0
       pathe: 2.0.3
       pkg-types: 2.3.0
@@ -21563,22 +21545,16 @@ snapshots:
     dependencies:
       acorn: 8.15.0
       estree-walker: 3.0.3
-      magic-string: 0.30.19
+      magic-string: 0.30.21
       unplugin: 2.3.10
 
-  undici-types@6.21.0: {}
-
   undici-types@7.16.0: {}
 
   undici@7.16.0: {}
 
-  unenv@2.0.0-rc.21:
+  unenv@2.0.0-rc.24:
     dependencies:
-      defu: 6.1.4
-      exsolve: 1.0.7
-      ohash: 2.0.11
       pathe: 2.0.3
-      ufo: 1.6.1
 
   unicode-canonical-property-names-ecmascript@2.0.1: {}
 
@@ -21601,7 +21577,7 @@ snapshots:
       escape-string-regexp: 5.0.0
       estree-walker: 3.0.3
       local-pkg: 1.1.2
-      magic-string: 0.30.19
+      magic-string: 0.30.21
       mlly: 1.8.0
       pathe: 2.0.3
       picomatch: 4.0.3
@@ -21654,7 +21630,7 @@ snapshots:
   unplugin-element-plus@0.10.0:
     dependencies:
       es-module-lexer: 1.7.0
-      magic-string: 0.30.19
+      magic-string: 0.30.21
       unplugin: 2.3.10
       unplugin-utils: 0.2.5
 
@@ -21704,7 +21680,7 @@ snapshots:
       '@unrs/resolver-binding-win32-ia32-msvc': 1.11.1
       '@unrs/resolver-binding-win32-x64-msvc': 1.11.1
 
-  unstorage@1.17.1(db0@0.3.4)(ioredis@5.8.2):
+  unstorage@1.17.2(db0@0.3.4)(ioredis@5.8.2):
     dependencies:
       anymatch: 3.1.3
       chokidar: 4.0.3
@@ -21712,7 +21688,7 @@ snapshots:
       h3: 1.15.4
       lru-cache: 10.4.3
       node-fetch-native: 1.6.7
-      ofetch: 1.4.1
+      ofetch: 1.5.1
       ufo: 1.6.1
     optionalDependencies:
       db0: 0.3.4
@@ -21735,7 +21711,7 @@ snapshots:
   unwasm@0.3.11:
     dependencies:
       knitwork: 1.2.0
-      magic-string: 0.30.19
+      magic-string: 0.30.21
       mlly: 1.8.0
       pathe: 2.0.3
       pkg-types: 2.3.0
@@ -21743,9 +21719,9 @@ snapshots:
 
   upath@1.2.0: {}
 
-  update-browserslist-db@1.1.3(browserslist@4.26.3):
+  update-browserslist-db@1.1.4(browserslist@4.27.0):
     dependencies:
-      browserslist: 4.26.3
+      browserslist: 4.27.0
       escalade: 3.2.0
       picocolors: 1.1.1
 
@@ -21772,16 +21748,16 @@ snapshots:
 
   util-deprecate@1.0.2: {}
 
-  vdirs@0.1.8(vue@3.5.22(typescript@5.9.3)):
+  vdirs@0.1.8(vue@3.5.23(typescript@5.9.3)):
     dependencies:
       evtd: 0.2.4
-      vue: 3.5.22(typescript@5.9.3)
+      vue: 3.5.23(typescript@5.9.3)
 
-  vee-validate@4.15.1(vue@3.5.22(typescript@5.9.3)):
+  vee-validate@4.15.1(vue@3.5.23(typescript@5.9.3)):
     dependencies:
       '@vue/devtools-api': 7.7.7
       type-fest: 4.41.0
-      vue: 3.5.22(typescript@5.9.3)
+      vue: 3.5.23(typescript@5.9.3)
 
   vfile-message@4.0.3:
     dependencies:
@@ -21817,15 +21793,15 @@ snapshots:
 
   vite-hot-client@2.1.0(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)):
     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: 7.2.1(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.3)(terser@5.44.1)(yaml@2.8.1)
 
-  vite-node@3.2.4(@types/node@22.18.12)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1):
+  vite-node@3.2.4(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.3)(terser@5.44.1)(yaml@2.8.1):
     dependencies:
       cac: 6.7.14
       debug: 4.4.3
       es-module-lexer: 1.7.0
       pathe: 2.0.3
-      vite: 7.1.11(@types/node@22.18.12)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
+      vite: 7.2.1(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.3)(terser@5.44.1)(yaml@2.8.1)
     transitivePeerDependencies:
       - '@types/node'
       - jiti
@@ -21840,40 +21816,18 @@ snapshots:
       - tsx
       - yaml
 
-  vite-node@3.2.4(@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):
-    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@24.9.1)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
-    transitivePeerDependencies:
-      - '@types/node'
-      - jiti
-      - less
-      - lightningcss
-      - sass
-      - sass-embedded
-      - stylus
-      - sugarss
-      - supports-color
-      - terser
-      - tsx
-      - yaml
-    optional: true
-
-  vite-plugin-compression@0.5.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)):
+  vite-plugin-compression@0.5.1(vite@7.2.1(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.3)(terser@5.44.1)(yaml@2.8.1)):
     dependencies:
       chalk: 4.1.2
       debug: 4.4.3
       fs-extra: 10.1.0
-      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: 7.2.1(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.3)(terser@5.44.1)(yaml@2.8.1)
     transitivePeerDependencies:
       - supports-color
 
-  vite-plugin-dts@4.5.4(@types/node@24.9.1)(rollup@4.52.5)(typescript@5.9.3)(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-plugin-dts@4.5.4(@types/node@24.10.0)(rollup@4.52.5)(typescript@5.9.3)(vite@7.2.1(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.3)(terser@5.44.1)(yaml@2.8.1)):
     dependencies:
-      '@microsoft/api-extractor': 7.53.2(@types/node@24.9.1)
+      '@microsoft/api-extractor': 7.54.0(@types/node@24.10.0)
       '@rollup/pluginutils': 5.3.0(rollup@4.52.5)
       '@volar/typescript': 2.4.23
       '@vue/language-core': 2.2.0(typescript@5.9.3)
@@ -21881,16 +21835,16 @@ snapshots:
       debug: 4.4.3
       kolorist: 1.8.0
       local-pkg: 1.1.2
-      magic-string: 0.30.19
+      magic-string: 0.30.21
       typescript: 5.9.3
     optionalDependencies:
-      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: 7.2.1(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.3)(terser@5.44.1)(yaml@2.8.1)
     transitivePeerDependencies:
       - '@types/node'
       - rollup
       - supports-color
 
-  vite-plugin-html@3.2.2(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-plugin-html@3.2.2(vite@7.2.1(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.3)(terser@5.44.1)(yaml@2.8.1)):
     dependencies:
       '@rollup/pluginutils': 4.2.1
       colorette: 2.0.20
@@ -21904,9 +21858,9 @@ snapshots:
       html-minifier-terser: 6.1.0
       node-html-parser: 5.4.2
       pathe: 0.2.0
-      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: 7.2.1(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.3)(terser@5.44.1)(yaml@2.8.1)
 
-  vite-plugin-inspect@0.8.9(rollup@4.52.5)(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-plugin-inspect@0.8.9(rollup@4.52.5)(vite@7.2.1(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.3)(terser@5.44.1)(yaml@2.8.1)):
     dependencies:
       '@antfu/utils': 0.7.10
       '@rollup/pluginutils': 5.3.0(rollup@4.52.5)
@@ -21917,7 +21871,7 @@ snapshots:
       perfect-debounce: 1.0.0
       picocolors: 1.1.1
       sirv: 3.0.2
-      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: 7.2.1(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.3)(terser@5.44.1)(yaml@2.8.1)
     transitivePeerDependencies:
       - rollup
       - supports-color
@@ -21929,72 +21883,72 @@ snapshots:
       rollup: 4.52.5
       xe-utils: 3.7.9
 
-  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):
+  vite-plugin-pwa@1.1.0(vite@5.4.21(@types/node@24.10.0)(less@4.4.2)(sass@1.93.3)(terser@5.44.1))(workbox-build@7.3.0)(workbox-window@7.3.0):
     dependencies:
       debug: 4.4.3
       pretty-bytes: 6.1.1
       tinyglobby: 0.2.15
-      vite: 5.4.21(@types/node@24.9.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)
+      vite: 5.4.21(@types/node@24.10.0)(less@4.4.2)(sass@1.93.3)(terser@5.44.1)
       workbox-build: 7.3.0
       workbox-window: 7.3.0
     transitivePeerDependencies:
       - supports-color
 
-  vite-plugin-pwa@1.1.0(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))(workbox-build@7.3.0)(workbox-window@7.3.0):
+  vite-plugin-pwa@1.1.0(vite@7.2.1(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.3)(terser@5.44.1)(yaml@2.8.1))(workbox-build@7.3.0)(workbox-window@7.3.0):
     dependencies:
       debug: 4.4.3
       pretty-bytes: 6.1.1
       tinyglobby: 0.2.15
-      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: 7.2.1(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.3)(terser@5.44.1)(yaml@2.8.1)
       workbox-build: 7.3.0
       workbox-window: 7.3.0
     transitivePeerDependencies:
       - supports-color
 
-  vite-plugin-vue-devtools@7.7.7(rollup@4.52.5)(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)):
+  vite-plugin-vue-devtools@7.7.7(rollup@4.52.5)(vite@7.2.1(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.3)(terser@5.44.1)(yaml@2.8.1))(vue@3.5.23(typescript@5.9.3)):
     dependencies:
-      '@vue/devtools-core': 7.7.7(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))
+      '@vue/devtools-core': 7.7.7(vite@7.2.1(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.3)(terser@5.44.1)(yaml@2.8.1))(vue@3.5.23(typescript@5.9.3))
       '@vue/devtools-kit': 7.7.7
       '@vue/devtools-shared': 7.7.7
       execa: 9.6.0
       sirv: 3.0.2
-      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-plugin-inspect: 0.8.9(rollup@4.52.5)(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-plugin-vue-inspector: 5.3.2(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: 7.2.1(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.3)(terser@5.44.1)(yaml@2.8.1)
+      vite-plugin-inspect: 0.8.9(rollup@4.52.5)(vite@7.2.1(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.3)(terser@5.44.1)(yaml@2.8.1))
+      vite-plugin-vue-inspector: 5.3.2(vite@7.2.1(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.3)(terser@5.44.1)(yaml@2.8.1))
     transitivePeerDependencies:
       - '@nuxt/kit'
       - rollup
       - supports-color
       - vue
 
-  vite-plugin-vue-inspector@5.3.2(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-plugin-vue-inspector@5.3.2(vite@7.2.1(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.3)(terser@5.44.1)(yaml@2.8.1)):
     dependencies:
-      '@babel/core': 7.28.4
-      '@babel/plugin-proposal-decorators': 7.28.0(@babel/core@7.28.4)
-      '@babel/plugin-syntax-import-attributes': 7.27.1(@babel/core@7.28.4)
-      '@babel/plugin-syntax-import-meta': 7.10.4(@babel/core@7.28.4)
-      '@babel/plugin-transform-typescript': 7.28.0(@babel/core@7.28.4)
-      '@vue/babel-plugin-jsx': 1.5.0(@babel/core@7.28.4)
-      '@vue/compiler-dom': 3.5.22
+      '@babel/core': 7.28.5
+      '@babel/plugin-proposal-decorators': 7.28.0(@babel/core@7.28.5)
+      '@babel/plugin-syntax-import-attributes': 7.27.1(@babel/core@7.28.5)
+      '@babel/plugin-syntax-import-meta': 7.10.4(@babel/core@7.28.5)
+      '@babel/plugin-transform-typescript': 7.28.5(@babel/core@7.28.5)
+      '@vue/babel-plugin-jsx': 1.5.0(@babel/core@7.28.5)
+      '@vue/compiler-dom': 3.5.23
       kolorist: 1.8.0
-      magic-string: 0.30.19
-      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)
+      magic-string: 0.30.21
+      vite: 7.2.1(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.3)(terser@5.44.1)(yaml@2.8.1)
     transitivePeerDependencies:
       - supports-color
 
-  vite@5.4.21(@types/node@24.9.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0):
+  vite@5.4.21(@types/node@24.10.0)(less@4.4.2)(sass@1.93.3)(terser@5.44.1):
     dependencies:
       esbuild: 0.25.3
       postcss: 8.5.6
       rollup: 4.52.5
     optionalDependencies:
-      '@types/node': 24.9.1
+      '@types/node': 24.10.0
       fsevents: 2.3.3
       less: 4.4.2
-      sass: 1.93.2
-      terser: 5.44.0
+      sass: 1.93.3
+      terser: 5.44.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@7.2.1(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.3)(terser@5.44.1)(yaml@2.8.1):
     dependencies:
       esbuild: 0.25.3
       fdir: 6.5.0(picomatch@4.0.3)
@@ -22003,61 +21957,44 @@ snapshots:
       rollup: 4.52.5
       tinyglobby: 0.2.15
     optionalDependencies:
-      '@types/node': 22.18.12
+      '@types/node': 24.10.0
       fsevents: 2.3.3
       jiti: 2.6.1
       less: 4.4.2
-      sass: 1.93.2
-      terser: 5.44.0
+      sass: 1.93.3
+      terser: 5.44.1
       yaml: 2.8.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):
+  vitepress-plugin-group-icons@1.6.5(vite@5.4.21(@types/node@24.10.0)(less@4.4.2)(sass@1.93.3)(terser@5.44.1)):
     dependencies:
-      esbuild: 0.25.3
-      fdir: 6.5.0(picomatch@4.0.3)
-      picomatch: 4.0.3
-      postcss: 8.5.6
-      rollup: 4.52.5
-      tinyglobby: 0.2.15
-    optionalDependencies:
-      '@types/node': 24.9.1
-      fsevents: 2.3.3
-      jiti: 2.6.1
-      less: 4.4.2
-      sass: 1.93.2
-      terser: 5.44.0
-      yaml: 2.8.1
-
-  vitepress-plugin-group-icons@1.6.4(markdown-it@14.1.0)(vite@5.4.21(@types/node@24.9.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)):
-    dependencies:
-      '@iconify-json/logos': 1.2.9
-      '@iconify-json/vscode-icons': 1.2.32
+      '@iconify-json/logos': 1.2.10
+      '@iconify-json/vscode-icons': 1.2.33
       '@iconify/utils': 3.0.2
-      markdown-it: 14.1.0
-      vite: 5.4.21(@types/node@24.9.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)
+    optionalDependencies:
+      vite: 5.4.21(@types/node@24.10.0)(less@4.4.2)(sass@1.93.3)(terser@5.44.1)
     transitivePeerDependencies:
       - supports-color
 
-  vitepress@1.6.4(@algolia/client-search@5.40.1)(@types/node@24.9.1)(async-validator@4.2.5)(axios@1.12.2)(less@4.4.2)(nprogress@0.2.0)(postcss@8.5.6)(qrcode@1.5.4)(sass@1.93.2)(search-insights@2.17.3)(sortablejs@1.15.6)(terser@5.44.0)(typescript@5.9.3):
+  vitepress@1.6.4(@algolia/client-search@5.42.0)(@types/node@24.10.0)(async-validator@4.2.5)(axios@1.13.2)(less@4.4.2)(nprogress@0.2.0)(postcss@8.5.6)(qrcode@1.5.4)(sass@1.93.3)(search-insights@2.17.3)(sortablejs@1.15.6)(terser@5.44.1)(typescript@5.9.3):
     dependencies:
       '@docsearch/css': 3.8.2
-      '@docsearch/js': 3.8.2(@algolia/client-search@5.40.1)(search-insights@2.17.3)
-      '@iconify-json/simple-icons': 1.2.55
+      '@docsearch/js': 3.8.2(@algolia/client-search@5.42.0)(search-insights@2.17.3)
+      '@iconify-json/simple-icons': 1.2.57
       '@shikijs/core': 2.5.0
       '@shikijs/transformers': 2.5.0
       '@shikijs/types': 2.5.0
       '@types/markdown-it': 14.1.2
-      '@vitejs/plugin-vue': 5.2.4(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': 5.2.4(vite@5.4.21(@types/node@24.10.0)(less@4.4.2)(sass@1.93.3)(terser@5.44.1))(vue@3.5.23(typescript@5.9.3))
       '@vue/devtools-api': 7.7.7
-      '@vue/shared': 3.5.22
+      '@vue/shared': 3.5.23
       '@vueuse/core': 12.8.2(typescript@5.9.3)
-      '@vueuse/integrations': 12.8.2(async-validator@4.2.5)(axios@1.12.2)(focus-trap@7.6.5)(nprogress@0.2.0)(qrcode@1.5.4)(sortablejs@1.15.6)(typescript@5.9.3)
-      focus-trap: 7.6.5
+      '@vueuse/integrations': 12.8.2(async-validator@4.2.5)(axios@1.13.2)(focus-trap@7.6.6)(nprogress@0.2.0)(qrcode@1.5.4)(sortablejs@1.15.6)(typescript@5.9.3)
+      focus-trap: 7.6.6
       mark.js: 8.11.1
       minisearch: 7.2.0
       shiki: 2.5.0
-      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)
+      vite: 5.4.21(@types/node@24.10.0)(less@4.4.2)(sass@1.93.3)(terser@5.44.1)
+      vue: 3.5.23(typescript@5.9.3)
     optionalDependencies:
       postcss: 8.5.6
     transitivePeerDependencies:
@@ -22087,11 +22024,11 @@ snapshots:
       - typescript
       - universal-cookie
 
-  vitest@3.2.4(@types/node@22.18.12)(happy-dom@17.6.3)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1):
+  vitest@3.2.4(@types/node@24.10.0)(happy-dom@17.6.3)(jiti@2.6.1)(less@4.4.2)(sass@1.93.3)(terser@5.44.1)(yaml@2.8.1):
     dependencies:
       '@types/chai': 5.2.3
       '@vitest/expect': 3.2.4
-      '@vitest/mocker': 3.2.4(vite@7.1.11(@types/node@22.18.12)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))
+      '@vitest/mocker': 3.2.4(vite@7.2.1(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.3)(terser@5.44.1)(yaml@2.8.1))
       '@vitest/pretty-format': 3.2.4
       '@vitest/runner': 3.2.4
       '@vitest/snapshot': 3.2.4
@@ -22100,7 +22037,7 @@ snapshots:
       chai: 5.3.3
       debug: 4.4.3
       expect-type: 1.2.2
-      magic-string: 0.30.19
+      magic-string: 0.30.21
       pathe: 2.0.3
       picomatch: 4.0.3
       std-env: 3.10.0
@@ -22109,11 +22046,11 @@ snapshots:
       tinyglobby: 0.2.15
       tinypool: 1.1.1
       tinyrainbow: 2.0.0
-      vite: 7.1.11(@types/node@22.18.12)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
-      vite-node: 3.2.4(@types/node@22.18.12)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
+      vite: 7.2.1(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.3)(terser@5.44.1)(yaml@2.8.1)
+      vite-node: 3.2.4(@types/node@24.10.0)(jiti@2.6.1)(less@4.4.2)(sass@1.93.3)(terser@5.44.1)(yaml@2.8.1)
       why-is-node-running: 2.3.0
     optionalDependencies:
-      '@types/node': 22.18.12
+      '@types/node': 24.10.0
       happy-dom: 17.6.3
     transitivePeerDependencies:
       - jiti
@@ -22129,53 +22066,10 @@ snapshots:
       - tsx
       - yaml
 
-  vitest@3.2.4(@types/node@24.9.1)(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@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
-      '@vitest/spy': 3.2.4
-      '@vitest/utils': 3.2.4
-      chai: 5.3.3
-      debug: 4.4.3
-      expect-type: 1.2.2
-      magic-string: 0.30.19
-      pathe: 2.0.3
-      picomatch: 4.0.3
-      std-env: 3.10.0
-      tinybench: 2.9.0
-      tinyexec: 0.3.2
-      tinyglobby: 0.2.15
-      tinypool: 1.1.1
-      tinyrainbow: 2.0.0
-      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@24.9.1)(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': 24.9.1
-      happy-dom: 17.6.3
-    transitivePeerDependencies:
-      - jiti
-      - less
-      - lightningcss
-      - msw
-      - sass
-      - sass-embedded
-      - stylus
-      - sugarss
-      - supports-color
-      - terser
-      - tsx
-      - yaml
-    optional: true
-
-  vooks@0.2.12(vue@3.5.22(typescript@5.9.3)):
+  vooks@0.2.12(vue@3.5.23(typescript@5.9.3)):
     dependencies:
       evtd: 0.2.4
-      vue: 3.5.22(typescript@5.9.3)
+      vue: 3.5.23(typescript@5.9.3)
 
   vscode-languageserver-textdocument@1.0.12: {}
 
@@ -22183,19 +22077,19 @@ snapshots:
 
   vue-component-type-helpers@2.2.12: {}
 
-  vue-demi@0.14.10(vue@3.5.22(typescript@5.9.3)):
+  vue-demi@0.14.10(vue@3.5.23(typescript@5.9.3)):
     dependencies:
-      vue: 3.5.22(typescript@5.9.3)
+      vue: 3.5.23(typescript@5.9.3)
 
-  vue-dompurify-html@5.3.0(vue@3.5.22(typescript@5.9.3)):
+  vue-dompurify-html@5.3.0(vue@3.5.23(typescript@5.9.3)):
     dependencies:
       dompurify: 3.3.0
-      vue: 3.5.22(typescript@5.9.3)
+      vue: 3.5.23(typescript@5.9.3)
 
-  vue-eslint-parser@10.2.0(eslint@9.38.0(jiti@2.6.1)):
+  vue-eslint-parser@10.2.0(eslint@9.39.1(jiti@2.6.1)):
     dependencies:
       debug: 4.4.3
-      eslint: 9.38.0(jiti@2.6.1)
+      eslint: 9.39.1(jiti@2.6.1)
       eslint-scope: 8.4.0
       eslint-visitor-keys: 4.2.1
       espree: 10.4.0
@@ -22204,27 +22098,27 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  vue-i18n@11.1.12(vue@3.5.22(typescript@5.9.3)):
+  vue-i18n@11.1.12(vue@3.5.23(typescript@5.9.3)):
     dependencies:
       '@intlify/core-base': 11.1.12
       '@intlify/shared': 11.1.12
       '@vue/devtools-api': 6.6.4
-      vue: 3.5.22(typescript@5.9.3)
+      vue: 3.5.23(typescript@5.9.3)
 
-  vue-json-viewer@3.0.4(vue@3.5.22(typescript@5.9.3)):
+  vue-json-viewer@3.0.4(vue@3.5.23(typescript@5.9.3)):
     dependencies:
       clipboard: 2.0.11
-      vue: 3.5.22(typescript@5.9.3)
+      vue: 3.5.23(typescript@5.9.3)
 
-  vue-router@4.6.3(vue@3.5.22(typescript@5.9.3)):
+  vue-router@4.6.3(vue@3.5.23(typescript@5.9.3)):
     dependencies:
       '@vue/devtools-api': 6.6.4
-      vue: 3.5.22(typescript@5.9.3)
+      vue: 3.5.23(typescript@5.9.3)
 
-  vue-tippy@6.7.1(vue@3.5.22(typescript@5.9.3)):
+  vue-tippy@6.7.1(vue@3.5.23(typescript@5.9.3)):
     dependencies:
       tippy.js: 6.3.7
-      vue: 3.5.22(typescript@5.9.3)
+      vue: 3.5.23(typescript@5.9.3)
 
   vue-tsc@2.2.10(typescript@5.9.3):
     dependencies:
@@ -22232,52 +22126,52 @@ snapshots:
       '@vue/language-core': 2.2.10(typescript@5.9.3)
       typescript: 5.9.3
 
-  vue-types@3.0.2(vue@3.5.22(typescript@5.9.3)):
+  vue-types@3.0.2(vue@3.5.23(typescript@5.9.3)):
     dependencies:
       is-plain-object: 3.0.1
-      vue: 3.5.22(typescript@5.9.3)
+      vue: 3.5.23(typescript@5.9.3)
 
-  vue3-signature@0.2.4(vue@3.5.22(typescript@5.9.3)):
+  vue3-signature@0.2.4(vue@3.5.23(typescript@5.9.3)):
     dependencies:
       default-passive-events: 2.0.0
       signature_pad: 3.0.0-beta.4
-      vue: 3.5.22(typescript@5.9.3)
+      vue: 3.5.23(typescript@5.9.3)
 
-  vue@3.5.22(typescript@5.9.3):
+  vue@3.5.23(typescript@5.9.3):
     dependencies:
-      '@vue/compiler-dom': 3.5.22
-      '@vue/compiler-sfc': 3.5.22
-      '@vue/runtime-dom': 3.5.22
-      '@vue/server-renderer': 3.5.22(vue@3.5.22(typescript@5.9.3))
-      '@vue/shared': 3.5.22
+      '@vue/compiler-dom': 3.5.23
+      '@vue/compiler-sfc': 3.5.23
+      '@vue/runtime-dom': 3.5.23
+      '@vue/server-renderer': 3.5.23(vue@3.5.23(typescript@5.9.3))
+      '@vue/shared': 3.5.23
     optionalDependencies:
       typescript: 5.9.3
 
-  vuedraggable@4.1.0(vue@3.5.22(typescript@5.9.3)):
+  vuedraggable@4.1.0(vue@3.5.23(typescript@5.9.3)):
     dependencies:
       sortablejs: 1.14.0
-      vue: 3.5.22(typescript@5.9.3)
+      vue: 3.5.23(typescript@5.9.3)
 
-  vueuc@0.4.65(vue@3.5.22(typescript@5.9.3)):
+  vueuc@0.4.65(vue@3.5.23(typescript@5.9.3)):
     dependencies:
-      '@css-render/vue3-ssr': 0.15.14(vue@3.5.22(typescript@5.9.3))
+      '@css-render/vue3-ssr': 0.15.14(vue@3.5.23(typescript@5.9.3))
       '@juggle/resize-observer': 3.4.0
       css-render: 0.15.14
       evtd: 0.2.4
       seemly: 0.3.10
-      vdirs: 0.1.8(vue@3.5.22(typescript@5.9.3))
-      vooks: 0.2.12(vue@3.5.22(typescript@5.9.3))
-      vue: 3.5.22(typescript@5.9.3)
+      vdirs: 0.1.8(vue@3.5.23(typescript@5.9.3))
+      vooks: 0.2.12(vue@3.5.23(typescript@5.9.3))
+      vue: 3.5.23(typescript@5.9.3)
 
-  vxe-pc-ui@4.10.5(vue@3.5.22(typescript@5.9.3)):
+  vxe-pc-ui@4.10.16(vue@3.5.23(typescript@5.9.3)):
     dependencies:
-      '@vxe-ui/core': 4.2.12(vue@3.5.22(typescript@5.9.3))
+      '@vxe-ui/core': 4.2.13(vue@3.5.23(typescript@5.9.3))
     transitivePeerDependencies:
       - vue
 
-  vxe-table@4.17.0(vue@3.5.22(typescript@5.9.3)):
+  vxe-table@4.17.10(vue@3.5.23(typescript@5.9.3)):
     dependencies:
-      vxe-pc-ui: 4.10.5(vue@3.5.22(typescript@5.9.3))
+      vxe-pc-ui: 4.10.16(vue@3.5.23(typescript@5.9.3))
     transitivePeerDependencies:
       - vue
 
@@ -22324,7 +22218,7 @@ snapshots:
       tr46: 1.0.1
       webidl-conversions: 4.0.2
 
-  when-exit@2.1.4: {}
+  when-exit@2.1.5: {}
 
   which-boxed-primitive@1.1.1:
     dependencies:
@@ -22400,10 +22294,10 @@ snapshots:
   workbox-build@7.3.0:
     dependencies:
       '@apideck/better-ajv-errors': 0.3.6(ajv@8.17.1)
-      '@babel/core': 7.28.4
-      '@babel/preset-env': 7.28.3(@babel/core@7.28.4)
+      '@babel/core': 7.28.5
+      '@babel/preset-env': 7.28.5(@babel/core@7.28.5)
       '@babel/runtime': 7.28.4
-      '@rollup/plugin-babel': 5.3.1(@babel/core@7.28.4)(rollup@2.79.2)
+      '@rollup/plugin-babel': 5.3.1(@babel/core@7.28.5)(rollup@2.79.2)
       '@rollup/plugin-node-resolve': 15.3.1(rollup@2.79.2)
       '@rollup/plugin-replace': 2.4.2(rollup@2.79.2)
       '@rollup/plugin-terser': 0.4.4(rollup@2.79.2)
@@ -22615,12 +22509,12 @@ snapshots:
       '@poppinss/exception': 1.2.2
       error-stack-parser-es: 1.0.5
 
-  youch@4.1.0-beta.11:
+  youch@4.1.0-beta.12:
     dependencies:
       '@poppinss/colors': 4.1.5
-      '@poppinss/dumper': 0.6.4
-      '@speed-highlight/core': 1.2.7
-      cookie: 1.0.2
+      '@poppinss/dumper': 0.6.5
+      '@speed-highlight/core': 1.2.12
+      cookie-es: 2.0.0
       youch-core: 0.3.3
 
   zeebe-bpmn-moddle@1.11.0: {}
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 65a071919..7fe75cd3a 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -12,6 +12,7 @@ packages:
   - scripts/*
   - docs
   - playground
+
 catalog:
   '@ast-grep/napi': ^0.37.0
   '@changesets/changelog-github': ^0.5.1
@@ -58,7 +59,7 @@ catalog:
   '@types/lodash.isequal': ^4.5.8
   '@types/lodash.set': ^4.3.9
   '@types/markdown-it': ^14.1.2
-  '@types/node': ^22.16.0
+  '@types/node': ^24.9.2
   '@types/nprogress': ^0.2.3
   '@types/postcss-import': ^14.0.3
   '@types/qrcode': ^1.5.5
@@ -74,7 +75,7 @@ catalog:
   '@vue/shared': ^3.5.17
   '@vue/test-utils': ^2.4.6
   '@vueuse/core': ^13.4.0
-  '@vueuse/integrations': ^13.4.0
+  '@vueuse/integrations': ^14.0.0
   '@vueuse/motion': ^3.0.3
   '@videojs-player/vue': ^1.0.0
   ant-design-vue: ^4.2.6
@@ -170,7 +171,7 @@ catalog:
   publint: ^0.3.12
   qrcode: ^1.5.4
   qs: ^6.14.0
-  radix-vue: ^1.9.17
+  reka-ui: ^2.6.0
   resolve.exports: ^2.0.3
   rimraf: ^6.0.1
   rollup: ^4.44.1