diff --git a/apps/web-antd/src/api/iot/ota/task/record/index.ts b/apps/web-antd/src/api/iot/ota/task/record/index.ts
index 8d41d1b74..2d66a422f 100644
--- a/apps/web-antd/src/api/iot/ota/task/record/index.ts
+++ b/apps/web-antd/src/api/iot/ota/task/record/index.ts
@@ -22,6 +22,7 @@ export namespace IoTOtaTaskRecordApi {
   }
 }
 
+// TODO @AI：这里应该拿到 IoTOtaTaskRecordApi 里
 /** IoT OTA 升级任务记录 */
 export interface OtaTaskRecord {
   id?: number;
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/form-create/rules/use-dict-select.ts b/apps/web-antd/src/components/form-create/rules/use-dict-select.ts
index 0054cd41e..c486b6716 100644
--- a/apps/web-antd/src/components/form-create/rules/use-dict-select.ts
+++ b/apps/web-antd/src/components/form-create/rules/use-dict-select.ts
@@ -1,8 +1,10 @@
+import type { SystemDictTypeApi } from '#/api/system/dict/type';
+
 import { onMounted, ref } from 'vue';
 
 import { buildUUID, cloneDeep } from '@vben/utils';
 
-import * as DictDataApi from '#/api/system/dict/type';
+import { getSimpleDictTypeList } from '#/api/system/dict/type';
 import {
   localeProps,
   makeRequiredRule,
@@ -18,12 +20,12 @@ export function useDictSelectRule() {
   const rules = cloneDeep(selectRule);
   const dictOptions = ref<{ label: string; value: string }[]>([]); // 字典类型下拉数据
   onMounted(async () => {
-    const data = await DictDataApi.getSimpleDictTypeList();
+    const data = await getSimpleDictTypeList();
     if (!data || data.length === 0) {
       return;
     }
     dictOptions.value =
-      data?.map((item: DictDataApi.SystemDictTypeApi.DictType) => ({
+      data?.map((item: SystemDictTypeApi.DictType) => ({
         label: item.name,
         value: item.type,
       })) ?? [];
diff --git a/apps/web-antd/src/views/bpm/model/form/modules/extra-setting.vue b/apps/web-antd/src/views/bpm/model/form/modules/extra-setting.vue
index c07d73ff0..2a4361cba 100644
--- a/apps/web-antd/src/views/bpm/model/form/modules/extra-setting.vue
+++ b/apps/web-antd/src/views/bpm/model/form/modules/extra-setting.vue
@@ -26,7 +26,7 @@ import {
 } from 'ant-design-vue';
 import dayjs from 'dayjs';
 
-import * as FormApi from '#/api/bpm/form';
+import { getForm } from '#/api/bpm/form';
 import {
   HttpRequestSetting,
   parseFormFields,
@@ -229,7 +229,7 @@ watch(
   () => modelData.value.formId,
   async (newFormId) => {
     if (newFormId && modelData.value.formType === BpmModelFormType.NORMAL) {
-      const data = await FormApi.getForm(newFormId);
+      const data = await getForm(newFormId);
       const result: Array<{ field: string; title: string }> = [];
       if (data.fields) {
         unParsedFormFields.value = data.fields;
diff --git a/apps/web-antd/src/views/bpm/processInstance/create/index.vue b/apps/web-antd/src/views/bpm/processInstance/create/index.vue
index c4cefbbfc..691cf0bbb 100644
--- a/apps/web-antd/src/views/bpm/processInstance/create/index.vue
+++ b/apps/web-antd/src/views/bpm/processInstance/create/index.vue
@@ -284,6 +284,17 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 // @jason：看看能不能通过 tailwindcss 简化下
+@keyframes bounce {
+  0%,
+  50% {
+    transform: translateY(-5px);
+  }
+
+  100% {
+    transform: translateY(0);
+  }
+}
+
 .process-definition-container {
   .definition-item-card {
     .flow-icon-img {
@@ -310,15 +321,4 @@ onMounted(() => {
     }
   }
 }
-
-@keyframes bounce {
-  0%,
-  100% {
-    transform: translateY(0);
-  }
-
-  50% {
-    transform: translateY(-5px);
-  }
-}
 </style>
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 c7536dc15..e07a58dfc 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
@@ -4,6 +4,7 @@ import type { FormInstance } from 'ant-design-vue';
 import type { Rule } from 'ant-design-vue/es/form';
 
 import type { BpmProcessInstanceApi } from '#/api/bpm/processInstance';
+import type { SystemUserApi } from '#/api/system/user';
 
 import { computed, nextTick, reactive, ref, watch } from 'vue';
 import { useRouter } from 'vue-router';
@@ -42,8 +43,17 @@ import {
   cancelProcessInstanceByStartUser,
   getNextApprovalNodes,
 } from '#/api/bpm/processInstance';
-import * as TaskApi from '#/api/bpm/task';
-import * as UserApi from '#/api/system/user';
+import {
+  approveTask,
+  copyTask,
+  delegateTask,
+  getTaskListByReturn,
+  rejectTask,
+  returnTask,
+  signCreateTask,
+  signDeleteTask,
+  transferTask,
+} from '#/api/bpm/task';
 import { setConfAndFields2 } from '#/components/form-create';
 import { $t } from '#/locales';
 
@@ -57,7 +67,7 @@ const props = defineProps<{
   normalFormApi: any; // 流程表单 formCreate Api
   processDefinition: any; // 流程定义信息
   processInstance: any; // 流程实例信息
-  userOptions: UserApi.SystemUserApi.User[];
+  userOptions: SystemUserApi.User[];
   writableFields: string[]; // 流程表单可以编辑的字段
 }>(); // 当前登录的编号
 const emit = defineEmits(['success']);
@@ -249,7 +259,7 @@ async function openPopover(type: string) {
   }
   if (type === 'return') {
     // 获取退回节点
-    returnList.value = await TaskApi.getTaskListByReturn(runningTask.value.id);
+    returnList.value = await getTaskListByReturn(runningTask.value.id);
     if (returnList.value.length === 0) {
       message.warning('当前没有可退回的节点');
       return;
@@ -375,7 +385,7 @@ async function handleAudit(pass: boolean, formRef: FormInstance | undefined) {
         await formCreateApi.validate();
         data.variables = approveForm.value.value;
       }
-      await TaskApi.approveTask(data);
+      await approveTask(data);
       popOverVisible.value.approve = false;
       nextAssigneesActivityNode.value = [];
       // 清理 Timeline 组件中的自定义审批人数据
@@ -389,7 +399,7 @@ async function handleAudit(pass: boolean, formRef: FormInstance | undefined) {
         id: runningTask.value.id,
         reason: rejectReasonForm.reason,
       };
-      await TaskApi.rejectTask(data);
+      await rejectTask(data);
       popOverVisible.value.reject = false;
       message.success('审批不通过成功');
     }
@@ -415,7 +425,7 @@ async function handleCopy() {
       reason: copyForm.copyReason,
       copyUserIds: copyForm.copyUserIds,
     };
-    await TaskApi.copyTask(data);
+    await copyTask(data);
     copyFormRef.value.resetFields();
     popOverVisible.value.copy = false;
     message.success($t('ui.actionMessage.operationSuccess'));
@@ -439,7 +449,7 @@ async function handleTransfer() {
       reason: transferForm.reason,
       assigneeUserId: transferForm.assigneeUserId,
     };
-    await TaskApi.transferTask(data);
+    await transferTask(data);
     transferFormRef.value.resetFields();
     popOverVisible.value.transfer = false;
     message.success($t('ui.actionMessage.operationSuccess'));
@@ -463,7 +473,7 @@ async function handleDelegate() {
       reason: delegateForm.reason,
       delegateUserId: delegateForm.delegateUserId,
     };
-    await TaskApi.delegateTask(data);
+    await delegateTask(data);
     popOverVisible.value.delegate = false;
     delegateFormRef.value.resetFields();
     message.success($t('ui.actionMessage.operationSuccess'));
@@ -488,7 +498,7 @@ async function handlerAddSign(type: string) {
       reason: addSignForm.reason,
       userIds: addSignForm.addSignUserIds,
     };
-    await TaskApi.signCreateTask(data);
+    await signCreateTask(data);
     message.success($t('ui.actionMessage.operationSuccess'));
     addSignFormRef.value.resetFields();
     popOverVisible.value.addSign = false;
@@ -512,7 +522,7 @@ async function handleReturn() {
       reason: returnForm.returnReason,
       targetTaskDefinitionKey: returnForm.targetTaskDefinitionKey,
     };
-    await TaskApi.returnTask(data);
+    await returnTask(data);
     popOverVisible.value.return = false;
     returnFormRef.value.resetFields();
     message.success($t('ui.actionMessage.operationSuccess'));
@@ -573,7 +583,7 @@ async function handlerDeleteSign() {
       id: deleteSignForm.deleteSignTaskId,
       reason: deleteSignForm.reason,
     };
-    await TaskApi.signDeleteTask(data);
+    await signDeleteTask(data);
     message.success('减签成功');
     deleteSignFormRef.value.resetFields();
     popOverVisible.value.deleteSign = false;
diff --git a/apps/web-antd/src/views/crm/backlog/index.vue b/apps/web-antd/src/views/crm/backlog/index.vue
index 7c51c3890..b461f18a7 100644
--- a/apps/web-antd/src/views/crm/backlog/index.vue
+++ b/apps/web-antd/src/views/crm/backlog/index.vue
@@ -5,11 +5,18 @@ import { Page } from '@vben/common-ui';
 
 import { Badge, Card, List } from 'ant-design-vue';
 
-import * as ClueApi from '#/api/crm/clue';
-import * as ContractApi from '#/api/crm/contract';
-import * as CustomerApi from '#/api/crm/customer';
-import * as ReceivableApi from '#/api/crm/receivable';
-import * as ReceivablePlanApi from '#/api/crm/receivable/plan';
+import { getFollowClueCount } from '#/api/crm/clue';
+import {
+  getAuditContractCount,
+  getRemindContractCount,
+} from '#/api/crm/contract';
+import {
+  getFollowCustomerCount,
+  getPutPoolRemindCustomerCount,
+  getTodayContactCustomerCount,
+} from '#/api/crm/customer';
+import { getAuditReceivableCount } from '#/api/crm/receivable';
+import { getReceivablePlanRemindCount } from '#/api/crm/receivable/plan';
 
 import { useLeftSides } from './data';
 import ClueFollowList from './modules/clue-follow-list.vue';
@@ -64,17 +71,14 @@ function sideClick(item: { menu: string }) {
 
 /** 获取数量 */
 async function getCount() {
-  customerTodayContactCount.value =
-    await CustomerApi.getTodayContactCustomerCount();
-  customerPutPoolRemindCount.value =
-    await CustomerApi.getPutPoolRemindCustomerCount();
-  customerFollowCount.value = await CustomerApi.getFollowCustomerCount();
-  clueFollowCount.value = await ClueApi.getFollowClueCount();
-  contractAuditCount.value = await ContractApi.getAuditContractCount();
-  contractRemindCount.value = await ContractApi.getRemindContractCount();
-  receivableAuditCount.value = await ReceivableApi.getAuditReceivableCount();
-  receivablePlanRemindCount.value =
-    await ReceivablePlanApi.getReceivablePlanRemindCount();
+  customerTodayContactCount.value = await getTodayContactCustomerCount();
+  customerPutPoolRemindCount.value = await getPutPoolRemindCustomerCount();
+  customerFollowCount.value = await getFollowCustomerCount();
+  clueFollowCount.value = await getFollowClueCount();
+  contractAuditCount.value = await getAuditContractCount();
+  contractRemindCount.value = await getRemindContractCount();
+  receivableAuditCount.value = await getAuditReceivableCount();
+  receivablePlanRemindCount.value = await getReceivablePlanRemindCount();
 }
 
 /** 激活时 */
diff --git a/apps/web-antd/src/views/infra/apiAccessLog/data.ts b/apps/web-antd/src/views/infra/apiAccessLog/data.ts
index 73662e3a3..83b2977c0 100644
--- a/apps/web-antd/src/views/infra/apiAccessLog/data.ts
+++ b/apps/web-antd/src/views/infra/apiAccessLog/data.ts
@@ -245,7 +245,7 @@ export function useDetailSchema(): DescriptionItemSchema[] {
       render: (val, data) => {
         if (val === 0) {
           return '正常';
-        } else if (val > 0 && data?.resultCode > 0) {
+        } else if (val > 0 && data?.resultMsg) {
           return `失败 | ${val} | ${data.resultMsg}`;
         }
         return '';
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/group/data.ts b/apps/web-antd/src/views/iot/device/group/data.ts
index 0bc313e52..01b4cc3f9 100644
--- a/apps/web-antd/src/views/iot/device/group/data.ts
+++ b/apps/web-antd/src/views/iot/device/group/data.ts
@@ -1,10 +1,11 @@
 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[] {
@@ -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..28168c0b4 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,6 +39,7 @@ const [Form, formApi] = useVbenForm({
   },
   schema: useFormSchema(),
   showCollapseButton: false,
+  showDefaultActions: false,
 });
 
 const [Modal, modalApi] = useVbenModal({
@@ -70,9 +71,13 @@ const [Modal, modalApi] = useVbenModal({
   async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
       formData.value = undefined;
+      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/ota/modules/detail/index.vue b/apps/web-antd/src/views/iot/ota/modules/detail/index.vue
index a19a03117..ca6613146 100644
--- a/apps/web-antd/src/views/iot/ota/modules/detail/index.vue
+++ b/apps/web-antd/src/views/iot/ota/modules/detail/index.vue
@@ -8,8 +8,8 @@ import { formatDate } from '@vben/utils';
 
 import { Card, Col, Descriptions, Row } from 'ant-design-vue';
 
-import * as IoTOtaFirmwareApi from '#/api/iot/ota/firmware';
-import * as IoTOtaTaskRecordApi from '#/api/iot/ota/task/record';
+import { getOtaFirmware } from '#/api/iot/ota/firmware';
+import { getOtaTaskRecordStatusStatistics } from '#/api/iot/ota/task/record';
 import { IoTOtaTaskRecordStatusEnum } from '#/views/iot/utils/constants';
 
 import OtaTaskList from '../task/OtaTaskList.vue';
@@ -30,7 +30,7 @@ const firmwareStatistics = ref<Record<string, number>>({});
 async function getFirmwareInfo() {
   firmwareLoading.value = true;
   try {
-    firmware.value = await IoTOtaFirmwareApi.getOtaFirmware(firmwareId.value);
+    firmware.value = await getOtaFirmware(firmwareId.value);
   } finally {
     firmwareLoading.value = false;
   }
@@ -40,10 +40,9 @@ async function getFirmwareInfo() {
 async function getStatistics() {
   firmwareStatisticsLoading.value = true;
   try {
-    firmwareStatistics.value =
-      await IoTOtaTaskRecordApi.getOtaTaskRecordStatusStatistics(
-        firmwareId.value,
-      );
+    firmwareStatistics.value = await getOtaTaskRecordStatusStatistics(
+      firmwareId.value,
+    );
   } finally {
     firmwareStatisticsLoading.value = false;
   }
diff --git a/apps/web-antd/src/views/iot/ota/modules/firmware-detail/index.vue b/apps/web-antd/src/views/iot/ota/modules/firmware-detail/index.vue
index 8bd43420c..04533924d 100644
--- a/apps/web-antd/src/views/iot/ota/modules/firmware-detail/index.vue
+++ b/apps/web-antd/src/views/iot/ota/modules/firmware-detail/index.vue
@@ -8,8 +8,8 @@ import { formatDate } from '@vben/utils';
 
 import { Card, Col, Descriptions, Row } from 'ant-design-vue';
 
-import * as IoTOtaFirmwareApi from '#/api/iot/ota/firmware';
-import * as IoTOtaTaskRecordApi from '#/api/iot/ota/task/record';
+import { getOtaFirmware } from '#/api/iot/ota/firmware';
+import { getOtaTaskRecordStatusStatistics } from '#/api/iot/ota/task/record';
 import { IoTOtaTaskRecordStatusEnum } from '#/views/iot/utils/constants';
 
 import OtaTaskList from '../task/OtaTaskList.vue';
@@ -30,7 +30,7 @@ const firmwareStatistics = ref<Record<string, number>>({});
 async function getFirmwareInfo() {
   firmwareLoading.value = true;
   try {
-    firmware.value = await IoTOtaFirmwareApi.getOtaFirmware(firmwareId.value);
+    firmware.value = await getOtaFirmware(firmwareId.value);
   } finally {
     firmwareLoading.value = false;
   }
@@ -40,10 +40,9 @@ async function getFirmwareInfo() {
 async function getStatistics() {
   firmwareStatisticsLoading.value = true;
   try {
-    firmwareStatistics.value =
-      await IoTOtaTaskRecordApi.getOtaTaskRecordStatusStatistics(
-        firmwareId.value,
-      );
+    firmwareStatistics.value = await getOtaTaskRecordStatusStatistics(
+      firmwareId.value,
+    );
   } finally {
     firmwareStatisticsLoading.value = false;
   }
diff --git a/apps/web-antd/src/views/iot/ota/modules/task/OtaTaskDetail.vue b/apps/web-antd/src/views/iot/ota/modules/task/OtaTaskDetail.vue
index 8a19d63d7..8768c2bf6 100644
--- a/apps/web-antd/src/views/iot/ota/modules/task/OtaTaskDetail.vue
+++ b/apps/web-antd/src/views/iot/ota/modules/task/OtaTaskDetail.vue
@@ -21,8 +21,12 @@ import {
   Tag,
 } from 'ant-design-vue';
 
-import * as IoTOtaTaskApi from '#/api/iot/ota/task';
-import * as IoTOtaTaskRecordApi from '#/api/iot/ota/task/record';
+import { getOtaTask } from '#/api/iot/ota/task';
+import {
+  cancelOtaTaskRecord,
+  getOtaTaskRecordPage,
+  getOtaTaskRecordStatusStatistics,
+} from '#/api/iot/ota/task/record';
 import { IoTOtaTaskRecordStatusEnum } from '#/views/iot/utils/constants';
 
 /** OTA 任务详情组件 */
@@ -119,7 +123,7 @@ async function getTaskInfo() {
   }
   taskLoading.value = true;
   try {
-    task.value = await IoTOtaTaskApi.getOtaTask(taskId.value);
+    task.value = await getOtaTask(taskId.value);
   } finally {
     taskLoading.value = false;
   }
@@ -132,11 +136,10 @@ async function getStatistics() {
   }
   taskStatisticsLoading.value = true;
   try {
-    taskStatistics.value =
-      await IoTOtaTaskRecordApi.getOtaTaskRecordStatusStatistics(
-        undefined,
-        taskId.value,
-      );
+    taskStatistics.value = await getOtaTaskRecordStatusStatistics(
+      undefined,
+      taskId.value,
+    );
   } finally {
     taskStatisticsLoading.value = false;
   }
@@ -150,7 +153,7 @@ async function getRecordList() {
   recordLoading.value = true;
   try {
     queryParams.taskId = taskId.value;
-    const data = await IoTOtaTaskRecordApi.getOtaTaskRecordPage(queryParams);
+    const data = await getOtaTaskRecordPage(queryParams);
     recordList.value = data.list || [];
     recordTotal.value = data.total || 0;
   } finally {
@@ -181,7 +184,7 @@ async function handleCancelUpgrade(record: OtaTaskRecord) {
     content: '确认要取消该设备的升级任务吗？',
     async onOk() {
       try {
-        await IoTOtaTaskRecordApi.cancelOtaTaskRecord(record.id!);
+        await cancelOtaTaskRecord(record.id!);
         message.success('取消成功');
         await getRecordList();
         await getStatistics();
diff --git a/apps/web-antd/src/views/iot/ota/modules/task/OtaTaskForm.vue b/apps/web-antd/src/views/iot/ota/modules/task/OtaTaskForm.vue
index 0971ac2ef..bb3818cc5 100644
--- a/apps/web-antd/src/views/iot/ota/modules/task/OtaTaskForm.vue
+++ b/apps/web-antd/src/views/iot/ota/modules/task/OtaTaskForm.vue
@@ -8,8 +8,8 @@ import { useVbenModal } from '@vben/common-ui';
 
 import { Form, Input, message, Select, Spin } from 'ant-design-vue';
 
-import * as DeviceApi from '#/api/iot/device/device';
-import * as IoTOtaTaskApi from '#/api/iot/ota/task';
+import { getDeviceListByProductId } from '#/api/iot/device/device';
+import { createOtaTask } from '#/api/iot/ota/task';
 import { IoTOtaTaskDeviceScopeEnum } from '#/views/iot/utils/constants';
 
 /** IoT OTA 升级任务表单 */
@@ -82,7 +82,7 @@ const [Modal, modalApi] = useVbenModal({
     try {
       await formRef.value.validate();
       modalApi.lock();
-      await IoTOtaTaskApi.createOtaTask(formData.value);
+      await createOtaTask(formData.value);
       message.success('创建成功');
       await modalApi.close();
       emit('success');
@@ -98,8 +98,7 @@ const [Modal, modalApi] = useVbenModal({
     // 加载设备列表
     formLoading.value = true;
     try {
-      devices.value =
-        (await DeviceApi.getDeviceListByProductId(props.productId)) || [];
+      devices.value = (await getDeviceListByProductId(props.productId)) || [];
     } finally {
       formLoading.value = false;
     }
diff --git a/apps/web-antd/src/views/iot/ota/modules/task/OtaTaskList.vue b/apps/web-antd/src/views/iot/ota/modules/task/OtaTaskList.vue
index 130f344fc..14f8cfa98 100644
--- a/apps/web-antd/src/views/iot/ota/modules/task/OtaTaskList.vue
+++ b/apps/web-antd/src/views/iot/ota/modules/task/OtaTaskList.vue
@@ -19,7 +19,7 @@ import {
   Tag,
 } from 'ant-design-vue';
 
-import * as IoTOtaTaskApi from '#/api/iot/ota/task';
+import { getOtaTaskPage } from '#/api/iot/ota/task';
 import { IoTOtaTaskStatusEnum } from '#/views/iot/utils/constants';
 
 import OtaTaskDetail from './OtaTaskDetail.vue';
@@ -52,7 +52,7 @@ const taskDetailRef = ref(); // 任务详情引用
 async function getTaskList() {
   taskLoading.value = true;
   try {
-    const data = await IoTOtaTaskApi.getOtaTaskPage(queryParams);
+    const data = await getOtaTaskPage(queryParams);
     taskList.value = data.list;
     taskTotal.value = data.total;
   } finally {
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..4857bc7d2 100644
--- a/apps/web-antd/src/views/iot/product/category/data.ts
+++ b/apps/web-antd/src/views/iot/product/category/data.ts
@@ -1,10 +1,11 @@
 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[] {
@@ -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..476c5991e 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>
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..d80ee2602 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
@@ -63,13 +63,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 +81,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/mall/home/modules/member-statistics-card.vue b/apps/web-antd/src/views/mall/home/modules/member-statistics-card.vue
index 3b7e0db48..770249117 100644
--- a/apps/web-antd/src/views/mall/home/modules/member-statistics-card.vue
+++ b/apps/web-antd/src/views/mall/home/modules/member-statistics-card.vue
@@ -10,7 +10,7 @@ import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
 import { Card, Radio, RadioGroup, Spin } from 'ant-design-vue';
 import dayjs from 'dayjs';
 
-import * as MemberStatisticsApi from '#/api/mall/statistics/member';
+import { getMemberRegisterCountList } from '#/api/mall/statistics/member';
 
 import {
   getMemberStatisticsChartOptions,
@@ -71,13 +71,13 @@ async function handleTimeRangeTypeChange() {
     }
   }
   // 发送时间范围选中事件
-  await getMemberRegisterCountList(beginTime, endTime);
+  await loadMemberRegisterCountList(beginTime, endTime);
 }
 
-async function getMemberRegisterCountList(beginTime: Dayjs, endTime: Dayjs) {
+async function loadMemberRegisterCountList(beginTime: Dayjs, endTime: Dayjs) {
   loading.value = true;
   try {
-    const list = await MemberStatisticsApi.getMemberRegisterCountList(
+    const list = await getMemberRegisterCountList(
       beginTime.toDate(),
       endTime.toDate(),
     );
diff --git a/apps/web-antd/src/views/mall/home/modules/operation-data-card.vue b/apps/web-antd/src/views/mall/home/modules/operation-data-card.vue
index 22d9c855e..a0f46c2aa 100644
--- a/apps/web-antd/src/views/mall/home/modules/operation-data-card.vue
+++ b/apps/web-antd/src/views/mall/home/modules/operation-data-card.vue
@@ -6,9 +6,9 @@ import { CountTo } from '@vben/common-ui';
 
 import { Card } from 'ant-design-vue';
 
-import * as ProductSpuApi from '#/api/mall/product/spu';
-import * as PayStatisticsApi from '#/api/mall/statistics/pay';
-import * as TradeStatisticsApi from '#/api/mall/statistics/trade';
+import { getTabsCount } from '#/api/mall/product/spu';
+import { getWalletRechargePrice } from '#/api/mall/statistics/pay';
+import { getOrderCount } from '#/api/mall/statistics/trade';
 
 /** 运营数据卡片 */
 defineOptions({ name: 'OperationDataCard' });
@@ -51,8 +51,8 @@ const data = reactive({
 });
 
 /** 查询订单数据 */
-async function getOrderData() {
-  const orderCount = await TradeStatisticsApi.getOrderCount();
+async function loadOrderData() {
+  const orderCount = await getOrderCount();
   if (orderCount.undelivered) {
     data.orderUndelivered.value = orderCount.undelivered;
   }
@@ -68,16 +68,16 @@ async function getOrderData() {
 }
 
 /** 查询商品数据 */
-async function getProductData() {
-  const productCount = await ProductSpuApi.getTabsCount();
+async function loadProductData() {
+  const productCount = await getTabsCount();
   data.productForSale.value = productCount['0'] || 0;
   data.productInWarehouse.value = productCount['1'] || 0;
   data.productAlertStock.value = productCount['3'] || 0;
 }
 
 /** 查询钱包充值数据 */
-async function getWalletRechargeData() {
-  const paySummary = await PayStatisticsApi.getWalletRechargePrice();
+async function loadWalletRechargeData() {
+  const paySummary = await getWalletRechargePrice();
   data.rechargePrice.value = paySummary.rechargePrice;
 }
 
@@ -88,16 +88,16 @@ function handleClick(routerName: string) {
 
 /** 激活时 */
 onActivated(() => {
-  getOrderData();
-  getProductData();
-  getWalletRechargeData();
+  loadOrderData();
+  loadProductData();
+  loadWalletRechargeData();
 });
 
 /** 初始化 */
 onMounted(() => {
-  getOrderData();
-  getProductData();
-  getWalletRechargeData();
+  loadOrderData();
+  loadProductData();
+  loadWalletRechargeData();
 });
 </script>
 
diff --git a/apps/web-antd/src/views/mall/home/modules/trade-trend-card.vue b/apps/web-antd/src/views/mall/home/modules/trade-trend-card.vue
index 1d5a1cf6a..2c9d72583 100644
--- a/apps/web-antd/src/views/mall/home/modules/trade-trend-card.vue
+++ b/apps/web-antd/src/views/mall/home/modules/trade-trend-card.vue
@@ -11,7 +11,7 @@ import { fenToYuan } from '@vben/utils';
 import { Card, Radio, RadioGroup, Spin } from 'ant-design-vue';
 import dayjs from 'dayjs';
 
-import * as TradeStatisticsApi from '#/api/mall/statistics/trade';
+import { getOrderCountTrendComparison } from '#/api/mall/statistics/trade';
 
 import {
   getTradeTrendChartOptions,
@@ -76,15 +76,15 @@ async function handleTimeRangeTypeChange() {
     }
   }
   // 发送时间范围选中事件
-  await getOrderCountTrendComparison(beginTime, endTime);
+  await loadOrderCountTrendComparison(beginTime, endTime);
 }
 
 /** 查询订单数量趋势对照数据 */
-async function getOrderCountTrendComparison(beginTime: Dayjs, endTime: Dayjs) {
+async function loadOrderCountTrendComparison(beginTime: Dayjs, endTime: Dayjs) {
   loading.value = true;
   try {
     // 1. 查询数据
-    const list = await TradeStatisticsApi.getOrderCountTrendComparison(
+    const list = await getOrderCountTrendComparison(
       timeRangeType.value,
       beginTime.toDate(),
       endTime.toDate(),
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 b54c6f0d2..dedb2d2fa 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,7 +3,7 @@ import { computed, onMounted, ref } from 'vue';
 
 import { handleTree } from '@vben/utils';
 
-import * as ProductCategoryApi from '#/api/mall/product/category';
+import { getCategoryList } from '#/api/mall/product/category';
 
 /** 商品分类选择组件 */
 defineOptions({ name: 'ProductCategorySelect' });
@@ -42,8 +42,7 @@ const selectCategoryId = computed({
 /** 初始化 */
 const categoryList = ref<any[]>([]); // 分类树
 onMounted(async () => {
-  // 获得分类树
-  const data = await ProductCategoryApi.getCategoryList({
+  const data = await getCategoryList({
     parentId: props.parentId,
   });
   categoryList.value = handleTree(data, 'id', 'parentId');
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..236d4c264
--- /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) {
+      gridApi.grid.clearCheckboxRow();
+      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/data.ts b/apps/web-antd/src/views/mall/product/spu/form/data.ts
index d2ff7eeb5..3ca6e5c79 100644
--- a/apps/web-antd/src/views/mall/product/spu/form/data.ts
+++ b/apps/web-antd/src/views/mall/product/spu/form/data.ts
@@ -102,6 +102,7 @@ export function useInfoFormSchema(): VbenFormSchema[] {
 }
 
 /** 价格库存的表单 */
+// TODO @puhui999：貌似太宽了。。。屏幕小的，整个 table 展示补全哈~~
 export function useSkuFormSchema(
   propertyList: any[] = [],
   isDetail: boolean = false,
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..348f5f22a 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,17 +276,21 @@ watch(
 
 const activitySkuListRef = ref();
 
+/** 获取 SKU 表格引用 */
 function getSkuTableRef() {
   return activitySkuListRef.value;
 }
 
-defineExpose({ generateTableData, validateSku, getSkuTableRef });
+defineExpose({
+  generateTableData,
+  validateSku,
+  getSkuTableRef,
+});
 </script>
 
 <template>
   <div>
     <!-- 情况一：添加/修改 -->
-    <!-- TODO @puhui999：有可以通过 grid 来做么？主要考虑，这样不直接使用 vxe 标签，抽象程度更高； -->
     <VxeTable
       v-if="!isDetail && !isActivityComponent"
       :data="isBatch ? skuList : formData?.skus || []"
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/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 67e4a545b..3f479b8c2 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,5 +1,4 @@
 <script setup lang="ts">
-
-
-
-
+import { Page } from '@vben/common-ui';
+</script>
+<template><Page>待完成</Page></template>
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 f7d85cda2..3f479b8c2 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,3 +1,4 @@
 <script setup lang="ts">
-
-
+import { Page } from '@vben/common-ui';
+</script>
+<template><Page>待完成</Page></template>
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 23216b9a8..39668774c 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,8 +5,6 @@ import type { MallCouponTemplateApi } from '#/api/mall/promotion/coupon/couponTe
 
 import { onMounted, ref, watch } from 'vue';
 
-import * as CouponTemplateApi from '#/api/mall/promotion/coupon/couponTemplate';
-
 import {
   CouponDiscount,
   CouponDiscountDesc,
@@ -23,9 +21,7 @@ watch(
   () => props.property.couponIds,
   async () => {
     if (props.property.couponIds?.length > 0) {
-      couponList.value = await CouponTemplateApi.getCouponTemplateList(
-        props.property.couponIds,
-      );
+      couponList.value = await getCouponTemplateList(props.property.couponIds);
     }
   },
   {
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 67e4a545b..3f479b8c2 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,5 +1,4 @@
 <script setup lang="ts">
-
-
-
-
+import { Page } from '@vben/common-ui';
+</script>
+<template><Page>待完成</Page></template>
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 f7d85cda2..3f479b8c2 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,3 +1,4 @@
 <script setup lang="ts">
-
-
+import { Page } from '@vben/common-ui';
+</script>
+<template><Page>待完成</Page></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 df0c9d510..3f479b8c2 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,8 +1,4 @@
 <script setup lang="ts">
-
-
-
-
-
-
-
+import { Page } from '@vben/common-ui';
+</script>
+<template><Page>待完成</Page></template>
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 4f4702812..835434341 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,6 @@ import type { HotZoneProperty } from './config';
 import { ref } from 'vue';
 
 import { useVModel } from '@vueuse/core';
-
 import { Button, Form, FormItem, Typography } from 'ant-design-vue';
 
 import UploadImg from '#/components/upload/image-upload.vue';
@@ -30,7 +29,12 @@ const handleOpenEditDialog = () => {
 <template>
   <ComponentContainerProperty v-model="formData.style">
     <!-- 表单 -->
-    <Form :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" :model="formData" class="mt-2">
+    <Form
+      :label-col="{ span: 6 }"
+      :wrapper-col="{ span: 18 }"
+      :model="formData"
+      class="mt-2"
+    >
       <FormItem label="上传图片" prop="imgUrl">
         <UploadImg
           v-model="formData.imgUrl"
@@ -40,7 +44,9 @@ const handleOpenEditDialog = () => {
           :show-description="false"
         >
           <template #tip>
-            <Typography.Text type="secondary" class="text-xs"> 推荐宽度 750</Typography.Text>
+            <Typography.Text type="secondary" class="text-xs">
+              推荐宽度 750
+            </Typography.Text>
           </template>
         </UploadImg>
       </FormItem>
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 1b54f850c..423d6dbf1 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
@@ -2,7 +2,6 @@
 import type { ImageBarProperty } from './config';
 
 import { useVModel } from '@vueuse/core';
-
 import { Form, FormItem } from 'ant-design-vue';
 
 import UploadImg from '#/components/upload/image-upload.vue';
@@ -20,7 +19,11 @@ const formData = useVModel(props, 'modelValue', emit);
 
 <template>
   <ComponentContainerProperty v-model="formData.style">
-    <Form :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" :model="formData">
+    <Form
+      :label-col="{ span: 6 }"
+      :wrapper-col="{ span: 18 }"
+      :model="formData"
+    >
       <FormItem label="上传图片" prop="imgUrl">
         <UploadImg
           v-model="formData.imgUrl"
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/index.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/index.ts
index 454e06a0b..5b2c4ccf9 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/index.ts
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/index.ts
@@ -1,32 +1,25 @@
-import { defineAsyncComponent } from 'vue';
-
-/*
+/**
  * 组件注册
  *
- * 组件规范：
- * 1. 每个子目录就是一个独立的组件，每个目录包括以下三个文件：
- * 2. config.ts：组件配置，必选，用于定义组件、组件默认的属性、定义属性的类型
- * 3. index.vue：组件展示，用于展示组件的渲染效果。可以不提供，如 Page（页面设置），只需要属性配置表单即可
- * 4. property.vue：组件属性表单，用于配置组件，必选，
+ * 组件规范：每个子目录就是一个独立的组件，每个目录包括以下三个文件：
+ *  1. config.ts：组件配置，必选，用于定义组件、组件默认的属性、定义属性的类型
+ *  2. index.vue：组件展示，用于展示组件的渲染效果。可以不提供，如 Page（页面设置），只需要属性配置表单即可
+ *  3. property.vue：组件属性表单，用于配置组件，必选，
  *
  * 注：
- * 组件ID以config.ts中配置的id为准，与组件目录的名称无关，但还是建议组件目录的名称与组件ID保持一致
+ * 组件 ID 以 config.ts 中配置的 id 为准，与组件目录的名称无关，但还是建议组件目录的名称与组件 ID 保持一致
  */
+import { defineAsyncComponent } from 'vue';
 
-// 导入组件界面模块
-const viewModules: Record<string, any> = import.meta.glob('./*/*.vue');
-// 导入配置模块
+const viewModules: Record<string, any> = import.meta.glob('./*/*.vue'); // 导入组件界面模块
 const configModules: Record<string, any> = import.meta.glob('./*/config.ts', {
   eager: true,
-});
+}); // 导入配置模块
 
-// 界面模块
-const components: Record<string, any> = {};
-// 组件配置模块
-const componentConfigs: Record<string, any> = {};
+const components: Record<string, any> = {}; // 界面模块
+const componentConfigs: Record<string, any> = {}; // 组件配置模块
 
-// 组件界面的类型
-type ViewType = 'index' | 'property';
+type ViewType = 'index' | 'property'; // 组件界面的类型
 
 /**
  * 注册组件的界面模块
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 ed9f0defc..3f479b8c2 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,6 +1,4 @@
 <script setup lang="ts">
-
-
-
-
-
+import { Page } from '@vben/common-ui';
+</script>
+<template><Page>待完成</Page></template>
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 67473946a..3f479b8c2 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,4 @@
 <script setup lang="ts">
-
-
-
+import { Page } from '@vben/common-ui';
+</script>
+<template><Page>待完成</Page></template>
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 cfbc7517a..e92f0a5aa 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
@@ -122,8 +122,8 @@ watch(
     button {
       width: 6px;
       height: 6px;
-      border-radius: 6px;
       background: #ff6000;
+      border-radius: 6px;
     }
   }
 
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 67e4a545b..3f479b8c2 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,5 +1,4 @@
 <script setup lang="ts">
-
-
-
-
+import { Page } from '@vben/common-ui';
+</script>
+<template><Page>待完成</Page></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 d922eb64a..faed4f2e9 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,13 +6,7 @@ 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, 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';
@@ -86,7 +80,7 @@ const handleHotAreaSelected = (
   </div>
   <template v-for="(cell, cellIndex) in cellList" :key="cellIndex">
     <template v-if="selectedHotAreaIndex === Number(cellIndex)">
-      <FormItem :label="`类型`">
+      <FormItem label="类型">
         <RadioGroup v-model:value="cell.type">
           <Radio value="text">文字</Radio>
           <Radio value="image">图片</Radio>
@@ -95,19 +89,19 @@ const handleHotAreaSelected = (
       </FormItem>
       <!-- 1. 文字 -->
       <template v-if="cell.type === 'text'">
-        <FormItem :label="`内容`">
+        <FormItem label="内容">
           <Input v-model:value="cell!.text" :maxlength="10" show-count />
         </FormItem>
-        <FormItem :label="`颜色`">
+        <FormItem label="颜色">
           <ColorInput v-model="cell!.textColor" />
         </FormItem>
-        <FormItem :label="`链接`">
+        <FormItem label="链接">
           <AppLinkInput v-model="cell.url" />
         </FormItem>
       </template>
       <!-- 2. 图片 -->
       <template v-else-if="cell.type === 'image'">
-        <FormItem :label="`图片`">
+        <FormItem label="图片">
           <UploadImg
             v-model="cell.imgUrl"
             :limit="1"
@@ -118,21 +112,17 @@ const handleHotAreaSelected = (
             <template #tip>建议尺寸 56*56</template>
           </UploadImg>
         </FormItem>
-        <FormItem :label="`链接`">
+        <FormItem label="链接">
           <AppLinkInput v-model="cell.url" />
         </FormItem>
       </template>
       <!-- 3. 搜索框 -->
       <template v-else>
-        <FormItem :label="`提示文字`">
+        <FormItem label="提示文字">
           <Input v-model:value="cell.placeholder" :maxlength="10" show-count />
         </FormItem>
-        <FormItem :label="`圆角`">
-          <Slider
-            v-model:value="cell.borderRadius"
-            :max="100"
-            :min="0"
-          />
+        <FormItem label="圆角">
+          <Slider v-model:value="cell.borderRadius" :max="100" :min="0" />
         </FormItem>
       </template>
     </template>
@@ -140,8 +130,3 @@ const handleHotAreaSelected = (
 </template>
 
 <style lang="scss" scoped></style>
-
-
-
-
-
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 21f3849af..9bca36269 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
@@ -24,7 +24,7 @@ const props = defineProps<{ modelValue: NavigationBarProperty }>();
 const emit = defineEmits(['update:modelValue']);
 
 // 表单校验
-const rules = {
+const rules: Record<string, any> = {
   name: [{ required: true, message: '请输入页面名称', trigger: 'blur' }],
 };
 
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 d74b741d4..d225751ed 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
@@ -30,7 +30,7 @@ setInterval(() => {
   >
     <Image :src="property.iconUrl" class="h-[18px]" :preview="false" />
     <Divider type="vertical" />
-    <div class="flex-1 pr-2 h-6 truncate leading-6">
+    <div class="h-6 flex-1 truncate pr-2 leading-6">
       {{ property.contents?.[activeIndex]?.text }}
     </div>
     <IconifyIcon icon="ep:arrow-right" />
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 67473946a..3f479b8c2 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,4 @@
 <script setup lang="ts">
-
-
-
+import { Page } from '@vben/common-ui';
+</script>
+<template><Page>待完成</Page></template>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/page-config/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/page-config/property.vue
index 498f334be..135d303d2 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/page-config/property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/page-config/property.vue
@@ -2,7 +2,6 @@
 import type { PageConfigProperty } from './config';
 
 import { useVModel } from '@vueuse/core';
-
 import { Form, FormItem, Textarea } from 'ant-design-vue';
 
 import UploadImg from '#/components/upload/image-upload.vue';
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 13f1c0fbc..16f91e1e1 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
@@ -9,7 +9,7 @@ import { fenToYuan } from '@vben/utils';
 
 import { Image } from 'ant-design-vue';
 
-import * as ProductSpuApi from '#/api/mall/product/spu';
+import { getSpuDetailList } from '#/api/mall/product/spu';
 
 /** 商品卡片 */
 defineOptions({ name: 'ProductCard' });
@@ -20,7 +20,7 @@ const spuList = ref<MallSpuApi.Spu[]>([]);
 watch(
   () => props.property.spuIds,
   async () => {
-    spuList.value = await ProductSpuApi.getSpuDetailList(props.property.spuIds);
+    spuList.value = await getSpuDetailList(props.property.spuIds);
   },
   {
     immediate: true,
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 67e4a545b..3f479b8c2 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,5 +1,4 @@
 <script setup lang="ts">
-
-
-
-
+import { Page } from '@vben/common-ui';
+</script>
+<template><Page>待完成</Page></template>
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 a1322b217..d334376ee 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,7 +7,7 @@ import { onMounted, ref, watch } from 'vue';
 
 import { fenToYuan } from '@vben/utils';
 
-import * as ProductSpuApi from '#/api/mall/product/spu';
+import { getSpuDetailList } from '#/api/mall/product/spu';
 
 /** 商品栏 */
 defineOptions({ name: 'ProductList' });
@@ -18,7 +18,7 @@ const spuList = ref<MallSpuApi.Spu[]>([]);
 watch(
   () => props.property.spuIds,
   async () => {
-    spuList.value = await ProductSpuApi.getSpuDetailList(props.property.spuIds);
+    spuList.value = await getSpuDetailList(props.property.spuIds);
   },
   {
     immediate: true,
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 598f304d1..b61965680 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
@@ -4,7 +4,6 @@ import type { ProductListProperty } from './config';
 import { IconifyIcon } from '@vben/icons';
 
 import { useVModel } from '@vueuse/core';
-
 import {
   Card,
   Checkbox,
@@ -34,7 +33,11 @@ const formData = useVModel(props, 'modelValue', emit);
 
 <template>
   <ComponentContainerProperty v-model="formData.style">
-    <Form :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" :model="formData">
+    <Form
+      :label-col="{ span: 6 }"
+      :wrapper-col="{ span: 18 }"
+      :model="formData"
+    >
       <Card title="商品列表" class="property-group" :bordered="false">
         <!-- <SpuShowcase v-model="formData.spuIds" /> -->
       </Card>
@@ -102,11 +105,7 @@ const formData = useVModel(props, 'modelValue', emit);
           />
         </FormItem>
         <FormItem label="间隔" prop="space">
-          <Slider
-            v-model:value="formData.space"
-            :max="100"
-            :min="0"
-          />
+          <Slider v-model:value="formData.space" :max="100" :min="0" />
         </FormItem>
       </Card>
     </Form>
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 10e9f5aa3..aa9fd467c 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
@@ -5,7 +5,7 @@ import type { MallArticleApi } from '#/api/mall/promotion/article';
 
 import { ref, watch } from 'vue';
 
-import * as ArticleApi from '#/api/mall/promotion/article/index';
+import { getArticle } from '#/api/mall/promotion/article';
 
 /** 营销文章 */
 defineOptions({ name: 'PromotionArticle' });
@@ -18,7 +18,7 @@ watch(
   () => props.property.id,
   async () => {
     if (props.property.id) {
-      article.value = await ArticleApi.getArticle(props.property.id);
+      article.value = await getArticle(props.property.id);
     }
   },
   {
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 fb6852fb2..d2b473ad8 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
@@ -6,10 +6,9 @@ import type { MallArticleApi } from '#/api/mall/promotion/article';
 import { onMounted, ref } from 'vue';
 
 import { useVModel } from '@vueuse/core';
-
 import { Form, FormItem, Select } from 'ant-design-vue';
 
-import * as ArticleApi from '#/api/mall/promotion/article/index';
+import { getArticlePage } from '#/api/mall/promotion/article';
 
 import ComponentContainerProperty from '../../component-container-property.vue';
 
@@ -27,7 +26,7 @@ const loading = ref(false);
 // 查询文章列表
 const queryArticleList = async (title?: string) => {
   loading.value = true;
-  const { list } = await ArticleApi.getArticlePage({
+  const { list } = await getArticlePage({
     title,
     pageNo: 1,
     pageSize: 10,
@@ -44,7 +43,11 @@ onMounted(() => {
 
 <template>
   <ComponentContainerProperty v-model="formData.style">
-    <Form :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" :model="formData">
+    <Form
+      :label-col="{ span: 6 }"
+      :wrapper-col="{ span: 18 }"
+      :model="formData"
+    >
       <FormItem label="文章" prop="id">
         <Select
           v-model:value="formData.id"
@@ -52,7 +55,9 @@ onMounted(() => {
           class="w-full"
           filterable
           :loading="loading"
-          :options="articles.map((item) => ({ label: item.title, value: item.id }))"
+          :options="
+            articles.map((item) => ({ label: item.title, value: item.id }))
+          "
           @search="queryArticleList"
         />
       </FormItem>
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 08ff86d1e..fad665dcc 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
@@ -10,8 +10,8 @@ import { fenToYuan } from '@vben/utils';
 
 import { Image } from 'ant-design-vue';
 
-import * as ProductSpuApi from '#/api/mall/product/spu';
-import * as CombinationActivityApi from '#/api/mall/promotion/combination/combinationActivity';
+import { getSpuDetailList } from '#/api/mall/product/spu';
+import { getCombinationActivityListByIds } from '#/api/mall/promotion/combination/combinationActivity';
 
 /** 拼团卡片 */
 defineOptions({ name: 'PromotionCombination' });
@@ -34,9 +34,7 @@ watch(
       if (Array.isArray(activityIds) && activityIds.length > 0) {
         // 获取拼团活动详情列表
         combinationActivityList.value =
-          await CombinationActivityApi.getCombinationActivityListByIds(
-            activityIds,
-          );
+          await getCombinationActivityListByIds(activityIds);
 
         // 获取拼团活动的 SPU 详情列表
         spuList.value = [];
@@ -44,7 +42,7 @@ watch(
           .map((activity) => activity.spuId)
           .filter((spuId): spuId is number => typeof spuId === 'number');
         if (spuIdList.value.length > 0) {
-          spuList.value = await ProductSpuApi.getSpuDetailList(spuIdList.value);
+          spuList.value = await getSpuDetailList(spuIdList.value);
         }
 
         // 更新 SPU 的最低价格
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 3732af95a..a46029f10 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
@@ -9,14 +9,12 @@ import { CommonStatusEnum } from '@vben/constants';
 import { IconifyIcon } from '@vben/icons';
 
 import { useVModel } from '@vueuse/core';
-
 import {
   Card,
   Checkbox,
   Form,
   FormItem,
   Input,
-  Radio,
   RadioButton,
   RadioGroup,
   Slider,
@@ -24,9 +22,9 @@ import {
   Tooltip,
 } from 'ant-design-vue';
 
-import * as CombinationActivityApi from '#/api/mall/promotion/combination/combinationActivity';
+import { getCombinationActivityPage } 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/combination-showcase.vue';
 import { ColorInput } from '#/views/mall/promotion/components';
 
 // 拼团属性面板
@@ -38,7 +36,7 @@ const formData = useVModel(props, 'modelValue', emit);
 // 活动列表
 const activityList = ref<MallCombinationActivityApi.CombinationActivity[]>([]);
 onMounted(async () => {
-  const { list } = await CombinationActivityApi.getCombinationActivityPage({
+  const { list } = await getCombinationActivityPage({
     pageNo: 1,
     pageSize: 10,
     status: CommonStatusEnum.ENABLE,
@@ -49,7 +47,11 @@ onMounted(async () => {
 
 <template>
   <ComponentContainerProperty v-model="formData.style">
-    <Form :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" :model="formData">
+    <Form
+      :label-col="{ span: 6 }"
+      :wrapper-col="{ span: 18 }"
+      :model="formData"
+    >
       <Card title="拼团活动" class="property-group" :bordered="false">
         <CombinationShowcase v-model="formData.activityIds" />
       </Card>
@@ -167,11 +169,7 @@ onMounted(async () => {
           />
         </FormItem>
         <FormItem label="间隔" prop="space">
-          <Slider
-            v-model:value="formData.space"
-            :max="100"
-            :min="0"
-          />
+          <Slider v-model:value="formData.space" :max="100" :min="0" />
         </FormItem>
       </Card>
     </Form>
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 174b20218..f10888fce 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
@@ -9,8 +9,8 @@ import { fenToYuan } from '@vben/utils';
 
 import { Image } from 'ant-design-vue';
 
-import * as ProductSpuApi from '#/api/mall/product/spu';
-import * as PointActivityApi from '#/api/mall/promotion/point';
+import { getSpuDetailList } from '#/api/mall/product/spu';
+import { getPointActivityListByIds } from '#/api/mall/promotion/point';
 
 /** 积分商城卡片 */
 defineOptions({ name: 'PromotionPoint' });
@@ -30,8 +30,7 @@ watch(
       // 检查活动ID的有效性
       if (Array.isArray(activityIds) && activityIds.length > 0) {
         // 获取积分商城活动详情列表
-        pointActivityList.value =
-          await PointActivityApi.getPointActivityListByIds(activityIds);
+        pointActivityList.value = await getPointActivityListByIds(activityIds);
 
         // 获取积分商城活动的 SPU 详情列表
         spuList.value = [];
@@ -39,7 +38,7 @@ watch(
           (activity) => activity.spuId,
         );
         if (spuIdList.value.length > 0) {
-          spuList.value = (await ProductSpuApi.getSpuDetailList(
+          spuList.value = (await getSpuDetailList(
             spuIdList.value,
           )) as MallPointActivityApi.SpuExtensionWithPoint[];
         }
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 32257e1b4..3f479b8c2 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,5 +1,4 @@
-<script lang="ts" setup>
-
-
-
-
+<script setup lang="ts">
+import { Page } from '@vben/common-ui';
+</script>
+<template><Page>待完成</Page></template>
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 0c1226df7..236cd4563 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
@@ -10,8 +10,8 @@ import { fenToYuan } from '@vben/utils';
 
 import { Image } from 'ant-design-vue';
 
-import * as ProductSpuApi from '#/api/mall/product/spu';
-import * as SeckillActivityApi from '#/api/mall/promotion/seckill/seckillActivity';
+import { getSpuDetailList } from '#/api/mall/product/spu';
+import { getSeckillActivityListByIds } from '#/api/mall/promotion/seckill/seckillActivity';
 
 /** 秒杀卡片 */
 defineOptions({ name: 'PromotionSeckill' });
@@ -32,7 +32,7 @@ watch(
       if (Array.isArray(activityIds) && activityIds.length > 0) {
         // 获取秒杀活动详情列表
         seckillActivityList.value =
-          await SeckillActivityApi.getSeckillActivityListByIds(activityIds);
+          await getSeckillActivityListByIds(activityIds);
 
         // 获取秒杀活动的 SPU 详情列表
         spuList.value = [];
@@ -40,7 +40,7 @@ watch(
           .map((activity) => activity.spuId)
           .filter((spuId): spuId is number => typeof spuId === 'number');
         if (spuIdList.value.length > 0) {
-          spuList.value = await ProductSpuApi.getSpuDetailList(spuIdList.value);
+          spuList.value = await getSpuDetailList(spuIdList.value);
         }
 
         // 更新 SPU 的最低价格
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 df0c9d510..3f479b8c2 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,8 +1,4 @@
 <script setup lang="ts">
-
-
-
-
-
-
-
+import { Page } from '@vben/common-ui';
+</script>
+<template><Page>待完成</Page></template>
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 ed9f0defc..3f479b8c2 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,6 +1,4 @@
 <script setup lang="ts">
-
-
-
-
-
+import { Page } from '@vben/common-ui';
+</script>
+<template><Page>待完成</Page></template>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/property.vue
index 6eb9ac0ef..ec0cb01c7 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/property.vue
@@ -4,7 +4,6 @@ import type { TabBarProperty } from './config';
 import { IconifyIcon } from '@vben/icons';
 
 import { useVModel } from '@vueuse/core';
-
 import {
   Form,
   FormItem,
@@ -45,7 +44,11 @@ const handleThemeChange = () => {
 <template>
   <div class="tab-bar">
     <!-- 表单 -->
-    <Form :model="formData" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
+    <Form
+      :model="formData"
+      :label-col="{ span: 6 }"
+      :wrapper-col="{ span: 18 }"
+    >
       <FormItem label="主题" name="theme">
         <Select v-model:value="formData!.theme" @change="handleThemeChange">
           <SelectOption
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 67e4a545b..3f479b8c2 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,5 +1,4 @@
 <script setup lang="ts">
-
-
-
-
+import { Page } from '@vben/common-ui';
+</script>
+<template><Page>待完成</Page></template>
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 1e96e7364..453b23a63 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
@@ -2,7 +2,6 @@
 import type { VideoPlayerProperty } from './config';
 
 import { useVModel } from '@vueuse/core';
-
 import { Form, FormItem, Slider, Switch } from 'ant-design-vue';
 
 import UploadFile from '#/components/upload/file-upload.vue';
@@ -25,7 +24,11 @@ const formData = useVModel(props, 'modelValue', emit);
         <Slider v-model:value="formData.style.height" :max="500" :min="100" />
       </FormItem>
     </template>
-    <Form :model="formData" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
+    <Form
+      :model="formData"
+      :label-col="{ span: 6 }"
+      :wrapper-col="{ span: 18 }"
+    >
       <FormItem label="上传视频" name="videoUrl">
         <UploadFile
           v-model="formData.videoUrl"
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 a3ebac5ff..1ae7934ea 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
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { DiyComponent, DiyComponentLibrary, PageConfig } from './util';
 
-import { inject, onMounted, ref, unref, watch } from 'vue';
+import { onMounted, ref, unref, watch } from 'vue';
 
 import { IFrame } from '@vben/common-ui';
 import { IconifyIcon } from '@vben/icons';
@@ -19,57 +19,48 @@ import { componentConfigs, components } from './components/mobile';
 import { component as NAVIGATION_BAR_COMPONENT } from './components/mobile/navigation-bar/config';
 import { component as PAGE_CONFIG_COMPONENT } from './components/mobile/page-config/config';
 import { component as TAB_BAR_COMPONENT } from './components/mobile/tab-bar/config';
+
 /** 页面装修详情页 */
 defineOptions({
   name: 'DiyPageDetail',
   components,
 });
-// 定义属性
+
+/** 定义属性 */
 const props = defineProps({
-  // 页面配置，支持Json字符串
-  modelValue: { type: [String, Object], required: true },
-  // 标题
-  title: { type: String, default: '' },
-  // 组件库
-  libs: { type: Array<DiyComponentLibrary>, default: () => [] },
-  // 是否显示顶部导航栏
-  showNavigationBar: { type: Boolean, default: true },
-  // 是否显示底部导航菜单
-  showTabBar: { type: Boolean, default: false },
-  // 是否显示页面配置
-  showPageConfig: { type: Boolean, default: true },
-  // 预览地址：提供了预览地址，才会显示预览按钮
-  previewUrl: { type: String, default: '' },
+  modelValue: { type: [String, Object], required: true }, // 页面配置，支持 Json 字符串
+  title: { type: String, default: '' }, // 标题
+  libs: { type: Array<DiyComponentLibrary>, default: () => [] }, // 组件库
+  showNavigationBar: { type: Boolean, default: true }, // 是否显示顶部导航栏
+  showTabBar: { type: Boolean, default: false }, // 是否显示底部导航菜单
+  showPageConfig: { type: Boolean, default: true }, // 是否显示页面配置
+  previewUrl: { type: String, default: '' }, // 预览地址：提供了预览地址，才会显示预览按钮
 });
-// 工具栏操作
-const emits = defineEmits(['reset', 'preview', 'save', 'update:modelValue']);
+
+const emits = defineEmits(['reset', 'preview', 'save', 'update:modelValue']); // 工具栏操作
 
 const qrcode = useQRCode(props.previewUrl, {
   errorCorrectionLevel: 'H',
   margin: 4,
-});
+}); // 预览二维码
 
-// 左侧组件库
-const componentLibrary = ref();
-// 页面设置组件
+const componentLibrary = ref(); // 左侧组件库
 const pageConfigComponent = ref<DiyComponent<any>>(
   cloneDeep(PAGE_CONFIG_COMPONENT),
-);
-// 顶部导航栏
+); // 页面设置组件
 const navigationBarComponent = ref<DiyComponent<any>>(
   cloneDeep(NAVIGATION_BAR_COMPONENT),
-);
-// 底部导航菜单
-const tabBarComponent = ref<DiyComponent<any>>(cloneDeep(TAB_BAR_COMPONENT));
+); // 顶部导航栏
+const tabBarComponent = ref<DiyComponent<any>>(cloneDeep(TAB_BAR_COMPONENT)); // 底部导航菜单
 
-// 选中的组件，默认选中顶部导航栏
-const selectedComponent = ref<DiyComponent<any>>();
-// 选中的组件索引
-const selectedComponentIndex = ref<number>(-1);
-// 组件列表
-const pageComponents = ref<DiyComponent<any>[]>([]);
-// 监听传入的页面配置
-// 解析出 pageConfigComponent 页面整体的配置，navigationBarComponent、pageComponents、tabBarComponent 页面上、中、下的配置
+const selectedComponent = ref<DiyComponent<any>>(); // 选中的组件，默认选中顶部导航栏
+const selectedComponentIndex = ref<number>(-1); // 选中的组件索引
+const pageComponents = ref<DiyComponent<any>[]>([]); // 组件列表
+
+/**
+ * 监听传入的页面配置
+ * 解析出 pageConfigComponent 页面整体的配置，navigationBarComponent、pageComponents、tabBarComponent 页面上、中、下的配置
+ */
 watch(
   () => props.modelValue,
   () => {
@@ -77,6 +68,7 @@ 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'
     pageConfigComponent.value.property =
       (typeof modelValue !== 'string' && modelValue?.page) ||
       PAGE_CONFIG_COMPONENT.property;
@@ -113,19 +105,20 @@ watch(
   { deep: true },
 );
 
-// 保存
-const handleSave = () => {
-  // 发送保存通知
+/** 保存 */
+function handleSave() {
+  // 发送保存通知，由外部保存
   emits('save');
-};
-// 监听配置修改
-const pageConfigChange = () => {
+}
+
+/** 监听配置修改 */
+function pageConfigChange() {
   const pageConfig = {
     page: pageConfigComponent.value.property,
     navigationBar: navigationBarComponent.value.property,
     tabBar: tabBarComponent.value.property,
     components: pageComponents.value.map((component) => {
-      // 只保留APP有用的字段
+      // 只保留 APP 有用的字段
       return { id: component.id, property: component.property };
     }),
   } as PageConfig;
@@ -137,7 +130,8 @@ const pageConfigChange = () => {
     ? JSON.stringify(pageConfig)
     : pageConfig;
   emits('update:modelValue', modelValue);
-};
+}
+
 watch(
   () => [
     pageConfigComponent.value.property,
@@ -150,15 +144,17 @@ watch(
   },
   { deep: true },
 );
-// 处理页面选中：显示属性表单
-const handlePageSelected = (event: any) => {
-  if (!props.showPageConfig) return;
 
+/** 处理页面选中：显示属性表单 */
+function handlePageSelected(event: any) {
+  if (!props.showPageConfig) {
+    return;
+  }
   // 配置了样式 page-prop-area 的元素，才显示页面设置
   if (event?.target?.classList?.contains('page-prop-area')) {
     handleComponentSelected(unref(pageConfigComponent));
   }
-};
+}
 
 /**
  * 选中组件
@@ -166,26 +162,26 @@ const handlePageSelected = (event: any) => {
  * @param component 组件
  * @param index 组件的索引
  */
-const handleComponentSelected = (
+function handleComponentSelected(
   component: DiyComponent<any>,
   index: number = -1,
-) => {
+) {
   selectedComponent.value = component;
   selectedComponentIndex.value = index;
-};
+}
 
-// 选中顶部导航栏
-const handleNavigationBarSelected = () => {
+/** 选中顶部导航栏 */
+function handleNavigationBarSelected() {
   handleComponentSelected(unref(navigationBarComponent));
-};
+}
 
-// 选中底部导航菜单
-const handleTabBarSelected = () => {
+/** 选中底部导航菜单 */
+function handleTabBarSelected() {
   handleComponentSelected(unref(tabBarComponent));
-};
+}
 
-// 组件变动（拖拽）
-const handleComponentChange = (dragEvent: any) => {
+/** 组件变动（拖拽） */
+function handleComponentChange(dragEvent: any) {
   // 新增，即从组件库拖拽添加组件
   if (dragEvent.added) {
     const { element, newIndex } = dragEvent.added;
@@ -196,40 +192,38 @@ const handleComponentChange = (dragEvent: any) => {
     // 保持选中
     selectedComponentIndex.value = newIndex;
   }
-};
+}
 
-// 交换组件
-const swapComponent = (oldIndex: number, newIndex: number) => {
+/** 交换组件 */
+function swapComponent(oldIndex: number, newIndex: number) {
   const temp = pageComponents.value[oldIndex]!;
   pageComponents.value[oldIndex] = pageComponents.value[newIndex]!;
   pageComponents.value[newIndex] = temp;
   // 保持选中
   selectedComponentIndex.value = newIndex;
-};
+}
 
 /** 移动组件（上移、下移） */
-const handleMoveComponent = (index: number, direction: number) => {
+function handleMoveComponent(index: number, direction: number) {
   const newIndex = index + direction;
-  if (newIndex < 0 || newIndex >= pageComponents.value.length) return;
-
+  if (newIndex < 0 || newIndex >= pageComponents.value.length) {
+    return;
+  }
   swapComponent(index, newIndex);
-};
+}
 
 /** 复制组件 */
-const handleCopyComponent = (index: number) => {
+function handleCopyComponent(index: number) {
   const component = pageComponents.value[index];
   if (component) {
     const clonedComponent = cloneDeep(component);
     clonedComponent.uid = Date.now();
     pageComponents.value.splice(index + 1, 0, clonedComponent);
   }
-};
+}
 
-/**
- * 删除组件
- * @param index 当前组件index
- */
-const handleDeleteComponent = (index: number) => {
+/** 删除组件 */
+function handleDeleteComponent(index: number) {
   // 删除组件
   pageComponents.value.splice(index, 1);
   if (index < pageComponents.value.length) {
@@ -250,25 +244,23 @@ const handleDeleteComponent = (index: number) => {
     // 3. 组件全部删除之后，显示页面设置
     handleComponentSelected(unref(pageConfigComponent));
   }
-};
+}
 
-// // 注入无感刷新页面函数
-// const reload = inject<() => void>('reload'); // TODO @芋艿：是 vue3 + element-plus 独有的，可以清理掉。
-// // 重置
-// const handleReset = () => {
-//   if (reload) reload();
-//   emits('reset');
-// };
+/** 重置 */
+function handleReset() {
+  emits('reset');
+}
 
-// 预览
+// TODO @AI：搞成 modal 来？
+/** 预览 */
 const previewDialogVisible = ref(false);
-const handlePreview = () => {
+function handlePreview() {
   previewDialogVisible.value = true;
   emits('preview');
-};
+}
 
-// 设置默认选中的组件
-const setDefaultSelectedComponent = () => {
+/** 设置默认选中的组件 */
+function setDefaultSelectedComponent() {
   if (props.showPageConfig) {
     selectedComponent.value = unref(pageConfigComponent);
   } else if (props.showNavigationBar) {
@@ -276,12 +268,14 @@ const setDefaultSelectedComponent = () => {
   } else if (props.showTabBar) {
     selectedComponent.value = unref(tabBarComponent);
   }
-};
+}
 
 watch(
   () => [props.showPageConfig, props.showNavigationBar, props.showTabBar],
   () => setDefaultSelectedComponent(),
 );
+
+/** 初始化 */
 onMounted(() => {
   setDefaultSelectedComponent();
 });
@@ -614,12 +608,12 @@ $phone-width: 375px;
         flex-direction: column;
 
         :deep(.ant-tag) {
-          border: none;
-          box-shadow: 0 2px 8px 0 rgb(0 0 0 / 10%);
           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;
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/util.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/util.ts
index 3666a4711..a8f33d2fa 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/util.ts
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/util.ts
@@ -2,37 +2,29 @@ import type { NavigationBarProperty } from './components/mobile/navigation-bar/c
 import type { PageConfigProperty } from './components/mobile/page-config/config';
 import type { TabBarProperty } from './components/mobile/tab-bar/config';
 
-// 页面装修组件
+/** 页面装修组件 */
 export interface DiyComponent<T> {
-  // 用于区分同一种组件的不同实例
-  uid?: number;
-  // 组件唯一标识
-  id: string;
-  // 组件名称
-  name: string;
-  // 组件图标
-  icon: string;
+  uid?: number; // 用于区分同一种组件的不同实例
+  id: string; // 组件唯一标识
+  name: string; // 组件名称
+  icon: string; // 组件图标
   /*
    组件位置：
-   top: 固定于手机顶部，例如 顶部的导航栏
-   bottom: 固定于手机底部，例如 底部的菜单导航栏
-   center: 位于手机中心，每个组件占一行，顺序向下排列
-   空：同center
-   fixed: 由组件自己决定位置，如弹窗位于手机中心、浮动按钮一般位于手机右下角
+    top: 固定于手机顶部，例如 顶部的导航栏
+    bottom: 固定于手机底部，例如 底部的菜单导航栏
+    center: 位于手机中心，每个组件占一行，顺序向下排列
+    空：同 center
+    fixed: 由组件自己决定位置，如弹窗位于手机中心、浮动按钮一般位于手机右下角
   */
   position?: '' | 'bottom' | 'center' | 'fixed' | 'top';
-  // 组件属性
-  property: T;
+  property: T; // 组件属性
 }
 
-// 页面装修组件库
+/** 页面装修组件库 */
 export interface DiyComponentLibrary {
-  // 组件库名称
-  name: string;
-  // 是否展开
-  extended: boolean;
-  // 组件列表
-  components: string[];
+  name: string; // 组件库名称
+  extended: boolean; // 是否展开
+  components: string[]; // 组件列表
 }
 
 // 组件样式
@@ -63,21 +55,18 @@ export interface ComponentStyle {
   borderBottomLeftRadius: number;
 }
 
-// 页面配置
+/** 页面配置 */
 export interface PageConfig {
-  // 页面属性
-  page: PageConfigProperty;
-  // 顶部导航栏属性
-  navigationBar: NavigationBarProperty;
-  // 底部导航菜单属性
-  tabBar?: TabBarProperty;
-  // 页面组件列表
-  components: PageComponent[];
-}
-// 页面组件，只保留组件ID，组件属性
-export type PageComponent = Pick<DiyComponent<any>, 'id' | 'property'>;
+  page: PageConfigProperty; // 页面属性
+  navigationBar: NavigationBarProperty; // 顶部导航栏属性
+  tabBar?: TabBarProperty; // 底部导航菜单属性
 
-// 页面组件库
+  components: PageComponent[]; // 页面组件列表
+}
+
+export type PageComponent = Pick<DiyComponent<any>, 'id' | 'property'>; // 页面组件，只保留组件 ID，组件属性
+
+/** 页面组件库 */
 export const PAGE_LIBS = [
   {
     name: '基础组件',
diff --git a/apps/web-antd/src/views/mall/promotion/coupon/components/coupon-select.vue b/apps/web-antd/src/views/mall/promotion/coupon/components/coupon-select.vue
new file mode 100644
index 000000000..ecf960120
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/coupon/components/coupon-select.vue
@@ -0,0 +1,117 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MallCouponTemplateApi } from '#/api/mall/promotion/coupon/couponTemplate';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { DICT_TYPE } from '@vben/constants';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getCouponTemplatePage } from '#/api/mall/promotion/coupon/couponTemplate';
+import { DictTag } from '#/components/dict-tag';
+
+import { discountFormat } from '../formatter';
+import { useCouponSelectFormSchema, useCouponSelectGridColumns } from './data';
+
+defineOptions({ name: 'CouponSelect' });
+
+const props = defineProps<{
+  takeType?: number; // 领取方式
+}>();
+
+const emit = defineEmits<{
+  change: [value: MallCouponTemplateApi.CouponTemplate[]];
+}>();
+
+const selectedCoupons = ref<MallCouponTemplateApi.CouponTemplate[]>([]);
+
+/** Grid 配置 */
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useCouponSelectFormSchema(),
+  },
+  gridOptions: {
+    columns: useCouponSelectGridColumns(),
+    height: '500px',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        // TODO @芋艿：要不要 ele 和 antd 统一下；
+        query: async ({ page }, formValues) => {
+          const params: any = {
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          };
+
+          // 如果有 takeType 参数，添加到查询条件
+          if (props.takeType !== undefined) {
+            params.canTakeTypes = [props.takeType];
+          }
+
+          return await getCouponTemplatePage(params);
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MallCouponTemplateApi.CouponTemplate>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
+});
+
+/** 复选框变化处理 */
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: MallCouponTemplateApi.CouponTemplate[];
+}) {
+  selectedCoupons.value = records;
+}
+
+/** Modal 配置 */
+const [Modal, modalApi] = useVbenModal({
+  onConfirm() {
+    emit('change', selectedCoupons.value);
+    modalApi.close();
+  },
+  onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      selectedCoupons.value = [];
+      return;
+    }
+    gridApi.query();
+  },
+});
+
+/** 打开弹窗 */
+function open() {
+  modalApi.open();
+}
+
+defineExpose({ open });
+</script>
+
+<template>
+  <Modal title="选择优惠券" class="w-2/3">
+    <Grid table-title="优惠券列表">
+      <!-- 优惠列自定义渲染 -->
+      <template #discount="{ row }">
+        <DictTag
+          :type="DICT_TYPE.PROMOTION_DISCOUNT_TYPE"
+          :value="row.discountType"
+        />
+        <span class="ml-1">{{ discountFormat(row) }}</span>
+      </template>
+    </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/data.ts
index 35a823b79..2b45327bd 100644
--- a/apps/web-antd/src/views/mall/promotion/coupon/components/data.ts
+++ b/apps/web-antd/src/views/mall/promotion/coupon/components/data.ts
@@ -1,13 +1,42 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeGridProps } from '#/adapter/vxe-table';
 
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
 import {
   discountFormat,
   remainedCountFormat,
+  takeLimitCountFormat,
   usePriceFormat,
   validityTypeFormat,
 } from '../formatter';
 
+/** 优惠券选择弹窗的搜索表单 schema */
+export function useCouponSelectFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'name',
+      label: '优惠券名称',
+      componentProps: {
+        placeholder: '请输入优惠券名称',
+        allowClear: true,
+      },
+    },
+    {
+      component: 'Select',
+      fieldName: 'discountType',
+      label: '优惠类型',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.PROMOTION_DISCOUNT_TYPE, 'number'),
+        placeholder: '请选择优惠类型',
+        allowClear: true,
+      },
+    },
+  ];
+}
+
 /** 搜索表单的 schema */
 export function useFormSchema(): VbenFormSchema[] {
   return [
@@ -23,6 +52,78 @@ export function useFormSchema(): VbenFormSchema[] {
   ];
 }
 
+/** 优惠券选择弹窗的表格列配置 */
+export function useCouponSelectGridColumns(): VxeGridProps['columns'] {
+  return [
+    { type: 'checkbox', width: 55 },
+    {
+      title: '优惠券名称',
+      field: 'name',
+      minWidth: 140,
+    },
+    {
+      title: '类型',
+      field: 'productScope',
+      minWidth: 80,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.PROMOTION_PRODUCT_SCOPE },
+      },
+    },
+    {
+      title: '优惠',
+      field: 'discount',
+      minWidth: 100,
+      slots: { default: 'discount' },
+    },
+    {
+      title: '领取方式',
+      field: 'takeType',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.PROMOTION_COUPON_TAKE_TYPE },
+      },
+    },
+    {
+      title: '使用时间',
+      field: 'validityType',
+      minWidth: 185,
+      align: 'center',
+      formatter: ({ row }) => validityTypeFormat(row),
+    },
+    {
+      title: '发放数量',
+      field: 'totalCount',
+      align: 'center',
+      minWidth: 100,
+    },
+    {
+      title: '剩余数量',
+      minWidth: 100,
+      align: 'center',
+      formatter: ({ row }) => remainedCountFormat(row),
+    },
+    {
+      title: '领取上限',
+      field: 'takeLimitCount',
+      minWidth: 100,
+      align: 'center',
+      formatter: ({ row }) => takeLimitCountFormat(row),
+    },
+    {
+      title: '状态',
+      field: 'status',
+      align: 'center',
+      minWidth: 80,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+  ];
+}
+
 /** 表格列配置 */
 export function useGridColumns(): VxeGridProps['columns'] {
   return [
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..99fca49f3 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,3 @@
+export { default as CouponSelect } from './coupon-select.vue';
 export * from './data';
 export { default as CouponSendForm } from './send-form.vue';
diff --git a/apps/web-antd/src/views/mall/promotion/diy/page/decorate/index.vue b/apps/web-antd/src/views/mall/promotion/diy/page/decorate/index.vue
index d2ba2441e..322ad56c8 100644
--- a/apps/web-antd/src/views/mall/promotion/diy/page/decorate/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/diy/page/decorate/index.vue
@@ -6,7 +6,10 @@ import { useRoute } from 'vue-router';
 
 import { message } from 'ant-design-vue';
 
-import * as DiyPageApi from '#/api/mall/promotion/diy/page';
+import {
+  getDiyPageProperty,
+  updateDiyPageProperty,
+} from '#/api/mall/promotion/diy/page';
 import { DiyEditor, PAGE_LIBS } from '#/views/mall/promotion/components';
 
 /** 装修页面表单 */
@@ -23,7 +26,7 @@ async function getPageDetail(id: any) {
     duration: 0,
   });
   try {
-    formData.value = await DiyPageApi.getDiyPageProperty(id);
+    formData.value = await getDiyPageProperty(id);
   } finally {
     hideLoading();
   }
@@ -36,7 +39,7 @@ async function submitForm() {
     duration: 0,
   });
   try {
-    await DiyPageApi.updateDiyPageProperty(unref(formData)!);
+    await updateDiyPageProperty(unref(formData)!);
     message.success('保存成功');
   } finally {
     hideLoading();
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 efe233077..261d1f5e3 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
@@ -13,8 +13,11 @@ import { isEmpty } from '@vben/utils';
 
 import { message, Radio, RadioGroup, Tooltip } from 'ant-design-vue';
 
-import * as DiyPageApi from '#/api/mall/promotion/diy/page';
-import * as DiyTemplateApi from '#/api/mall/promotion/diy/template';
+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';
 
 /** 装修模板表单 */
@@ -54,7 +57,7 @@ async function getPageDetail(id: any) {
     duration: 0,
   });
   try {
-    formData.value = await DiyTemplateApi.getDiyTemplateProperty(id);
+    formData.value = await getDiyTemplateProperty(id);
 
     // 拼接手机预览链接
     const domain = import.meta.env.VITE_MALL_H5_DOMAIN;
@@ -112,20 +115,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!);
       }
     }
     message.success('保存成功');
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 5727cb347..94ab444c2 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
@@ -21,7 +21,8 @@ import {
 import { $t } from '#/locales';
 import { getPropertyList } from '#/views/mall/product/spu/form';
 
-import { SpuAndSkuList, SpuSkuSelect } from '../../../components';
+// TODO @puhui999：有问题
+// import { SpuAndSkuList, SpuSkuSelect } from '../../../components';
 import { useFormSchema } from '../data';
 
 const emit = defineEmits(['success']);
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 d32122407..3d7d206bb 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
@@ -1,3 +1,4 @@
+<!-- eslint-disable unicorn/no-nested-ternary -->
 <!-- 积分活动橱窗组件 - 用于装修时展示和选择积分活动 -->
 <script lang="ts" setup>
 // TODO @puhui999：看看是不是整体优化下代码风格，参考别的模块
@@ -95,9 +96,9 @@ watch(
   async () => {
     const ids = Array.isArray(props.modelValue)
       ? props.modelValue
-      : (props.modelValue
+      : props.modelValue
         ? [props.modelValue]
-        : []);
+        : [];
 
     // 不需要返显
     if (ids.length === 0) {
@@ -158,7 +159,7 @@ watch(
   <!-- 积分活动选择对话框 -->
   <PointTableSelect
     ref="pointActivityTableSelectRef"
-    :multiple="limit != 1"
+    :multiple="limit !== 1"
     @change="handleActivitySelected"
   />
 </template>
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..1cdc848bd 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,24 @@ export function useFormSchema(): VbenFormSchema[] {
       fieldName: 'name',
       label: '活动名称',
       component: 'Input',
+      rules: 'required',
       componentProps: {
         placeholder: '请输入活动名称',
+        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')],
+        allowClear: true,
       },
-      rules: 'required',
     },
-    // TODO @puhui999：增加一个 defaultValue
     {
       fieldName: 'conditionType',
       label: '条件类型',
@@ -135,8 +141,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,7 +152,7 @@ export function useFormSchema(): VbenFormSchema[] {
         buttonStyle: 'solid',
         optionType: 'button',
       },
-      rules: 'required',
+      rules: z.number().default(PromotionProductScopeEnum.ALL.scope),
     },
     {
       fieldName: 'remark',
@@ -156,6 +161,24 @@ export function useFormSchema(): VbenFormSchema[] {
       componentProps: {
         placeholder: '请输入备注',
         rows: 4,
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'rules',
+      label: '优惠设置',
+      component: 'Input',
+      formItemClass: 'items-start',
+    },
+    {
+      fieldName: 'productSpuIds',
+      label: '选择商品',
+      component: 'Input',
+      dependencies: {
+        triggerFields: ['productScope'],
+        show: (values) => {
+          return values.productScope === PromotionProductScopeEnum.SPU.scope;
+        },
       },
     },
   ];
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 044ef6df4..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),
@@ -153,4 +158,3 @@ const [Grid, gridApi] = useVbenVxeGrid({
     </Grid>
   </Page>
 </template>
-
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 8458f89b8..016e38581 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,18 +19,19 @@ import {
   updateRewardActivity,
 } from '#/api/mall/promotion/reward/rewardActivity';
 import { $t } from '#/locales';
-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>({
   conditionType: PromotionConditionTypeEnum.PRICE.type,
   productScope: PromotionProductScopeEnum.ALL.scope,
   rules: [],
 });
+
 const getTitle = computed(() => {
   return formData.value?.id
     ? $t('ui.actionTitle.edit', ['满减送'])
@@ -43,13 +43,16 @@ const [Form, formApi] = useVbenForm({
     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();
@@ -59,29 +62,28 @@ const [Modal, modalApi] = useVbenModal({
     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');
       message.success($t('ui.actionMessage.operationSuccess'));
@@ -98,17 +100,18 @@ const [Modal, modalApi] = useVbenModal({
       };
       return;
     }
-    // 加载数据
+
     const data = modalApi.getData<MallRewardActivityApi.RewardActivity>();
     if (!data || !data.id) {
       return;
     }
+
     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) {
@@ -117,10 +120,8 @@ const [Modal, modalApi] = useVbenModal({
       });
 
       formData.value = result;
-      // 设置到 values
       await formApi.setValues(result);
 
-      // 获得商品范围
       await getProductScope();
     } finally {
       modalApi.unlock();
@@ -128,8 +129,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: {
@@ -139,15 +138,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;
     }
@@ -157,7 +153,6 @@ async function getProductScope() {
   }
 }
 
-/** 设置商品范围 */
 function setProductScopeValues(data: any) {
   switch (formData.value.productScope) {
     case PromotionProductScopeEnum.CATEGORY.scope: {
@@ -178,32 +173,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 63%
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 20be01d5b..3404b2b59 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 { 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,22 @@ 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 list = ref<GiveCoupon[]>([]);
 
 const CouponTemplateTakeTypeEnum = {
   ADMIN: { type: 2 },
 };
 
 /** 选择优惠券 */
-// const couponSelectRef = ref<InstanceType<typeof CouponSelect>>();
+const couponSelectRef = ref<InstanceType<typeof CouponSelect>>();
 function selectCoupon() {
-  // couponSelectRef.value?.open();
+  couponSelectRef.value?.open();
 }
 
 /** 选择优惠券后的回调 */
@@ -51,20 +59,22 @@ function deleteCoupon(index: number) {
 
 /** 初始化赠送的优惠券列表 */
 async function initGiveCouponList() {
-  // if (!rewardRule.value || !rewardRule.value.giveCouponTemplateCounts) {
-  //   return;
-  // }
-  // const tempLateIds = Object.keys(rewardRule.value.giveCouponTemplateCounts);
-  // const data = await CouponTemplateApi.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],
+    });
+  });
 }
 
 /** 设置赠送的优惠券 */
@@ -99,14 +109,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 +137,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 62%
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 153fe32ff..aa52844b4 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,23 +34,12 @@ 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() {
   if (!formData.value.rules) {
     formData.value.rules = [];
@@ -62,7 +52,10 @@ function addRule() {
   });
 }
 
-/** 设置规则优惠券-提交时 */
+function deleteRule(ruleIndex: number) {
+  formData.value.rules.splice(ruleIndex, 1);
+}
+
 function setRuleCoupon() {
   if (!rewardRuleCouponSelectRef.value) {
     return;
@@ -76,11 +69,12 @@ 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"
@@ -92,8 +86,9 @@ defineExpose({ setRuleCoupon });
           </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 +97,46 @@ 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 }">
+          <!-- 优惠内容 -->
+          <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,23 +146,24 @@ 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"
-                  v-model="rule"
+                  :model-value="rule"
                 />
               </div>
             </div>
@@ -174,12 +172,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="addRule">+ 添加优惠规则</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/statistics/member/index.vue b/apps/web-antd/src/views/mall/statistics/member/index.vue
index da8c8b243..8ccd67237 100644
--- a/apps/web-antd/src/views/mall/statistics/member/index.vue
+++ b/apps/web-antd/src/views/mall/statistics/member/index.vue
@@ -8,7 +8,7 @@ import { fenToYuan } from '@vben/utils';
 
 import { Col, Row } from 'ant-design-vue';
 
-import * as MemberStatisticsApi from '#/api/mall/statistics/member';
+import { getMemberSummary } from '#/api/mall/statistics/member';
 
 import MemberAreaCard from './modules/area-card.vue';
 import MemberFunnelCard from './modules/funnel-card.vue';
@@ -22,15 +22,15 @@ const loading = ref(true); // 加载中
 const summary = ref<MallMemberStatisticsApi.Summary>(); // 会员统计数据
 
 /** 查询会员统计 */
-async function getMemberSummary() {
-  summary.value = await MemberStatisticsApi.getMemberSummary();
+async function loadMemberSummary() {
+  summary.value = await getMemberSummary();
 }
 
 /** 初始化 */
 onMounted(async () => {
   loading.value = true;
   try {
-    await getMemberSummary();
+    await loadMemberSummary();
   } finally {
     loading.value = false;
   }
diff --git a/apps/web-antd/src/views/mall/statistics/member/modules/area-card.vue b/apps/web-antd/src/views/mall/statistics/member/modules/area-card.vue
index 9f2440ff4..dc7c67e1a 100644
--- a/apps/web-antd/src/views/mall/statistics/member/modules/area-card.vue
+++ b/apps/web-antd/src/views/mall/statistics/member/modules/area-card.vue
@@ -10,7 +10,7 @@ import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
 import { Card, Spin } from 'ant-design-vue';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
-import * as MemberStatisticsApi from '#/api/mall/statistics/member';
+import { getMemberAreaStatisticsList } from '#/api/mall/statistics/member';
 
 import { getAreaChartOptions, getAreaTableColumns } from './area-chart-options';
 
@@ -44,10 +44,10 @@ const [Grid, gridApi] = useVbenVxeGrid({
 });
 
 /** 按照省份，查询会员统计列表 */
-async function getMemberAreaStatisticsList() {
+async function loadMemberAreaStatisticsList() {
   loading.value = true;
   try {
-    const list = await MemberStatisticsApi.getMemberAreaStatisticsList();
+    const list = await getMemberAreaStatisticsList();
     areaStatisticsList.value = list.map(
       (item: MallMemberStatisticsApi.AreaStatistics) => ({
         ...item,
@@ -80,7 +80,7 @@ function areaReplace(areaName: string): string {
 
 /** 初始化 */
 onMounted(() => {
-  getMemberAreaStatisticsList();
+  loadMemberAreaStatisticsList();
 });
 </script>
 
diff --git a/apps/web-antd/src/views/mall/statistics/member/modules/funnel-card.vue b/apps/web-antd/src/views/mall/statistics/member/modules/funnel-card.vue
index 72437d9fe..fc1a7a4a0 100644
--- a/apps/web-antd/src/views/mall/statistics/member/modules/funnel-card.vue
+++ b/apps/web-antd/src/views/mall/statistics/member/modules/funnel-card.vue
@@ -7,7 +7,7 @@ import { fenToYuan } from '@vben/utils';
 
 import { Card } from 'ant-design-vue';
 
-import * as MemberStatisticsApi from '#/api/mall/statistics/member';
+import { getMemberAnalyse } from '#/api/mall/statistics/member';
 import { ShortcutDateRangePicker } from '#/components/shortcut-date-range-picker';
 
 /** 会员概览卡片 */
@@ -23,7 +23,7 @@ async function loadData(times: [Dayjs, Dayjs]) {
   }
   loading.value = true;
   try {
-    analyseData.value = await MemberStatisticsApi.getMemberAnalyse({
+    analyseData.value = await getMemberAnalyse({
       times,
     });
   } finally {
diff --git a/apps/web-antd/src/views/mall/statistics/member/modules/sex-card.vue b/apps/web-antd/src/views/mall/statistics/member/modules/sex-card.vue
index 2938b8eb3..567ecc424 100644
--- a/apps/web-antd/src/views/mall/statistics/member/modules/sex-card.vue
+++ b/apps/web-antd/src/views/mall/statistics/member/modules/sex-card.vue
@@ -11,7 +11,7 @@ import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
 
 import { Card, Spin } from 'ant-design-vue';
 
-import * as MemberStatisticsApi from '#/api/mall/statistics/member';
+import { getMemberSexStatisticsList } from '#/api/mall/statistics/member';
 
 import { getSexChartOptions } from './sex-chart-options';
 
@@ -23,10 +23,10 @@ const chartRef = ref<EchartsUIType>();
 const { renderEcharts } = useEcharts(chartRef);
 
 /** 按照性别，查询会员统计列表 */
-async function getMemberSexStatisticsList() {
+async function loadMemberSexStatisticsList() {
   loading.value = true;
   try {
-    const list = await MemberStatisticsApi.getMemberSexStatisticsList();
+    const list = await getMemberSexStatisticsList();
     const dictDataList = getDictOptions(DICT_TYPE.SYSTEM_USER_SEX, 'number');
     dictDataList.push({ label: '未知', value: null } as any);
     const chartData = dictDataList.map((dictData: any) => {
@@ -49,7 +49,7 @@ async function getMemberSexStatisticsList() {
 
 /** 初始化 */
 onMounted(() => {
-  getMemberSexStatisticsList();
+  loadMemberSexStatisticsList();
 });
 </script>
 
diff --git a/apps/web-antd/src/views/mall/statistics/member/modules/terminal-card.vue b/apps/web-antd/src/views/mall/statistics/member/modules/terminal-card.vue
index fc5075504..bb3103704 100644
--- a/apps/web-antd/src/views/mall/statistics/member/modules/terminal-card.vue
+++ b/apps/web-antd/src/views/mall/statistics/member/modules/terminal-card.vue
@@ -8,7 +8,7 @@ import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
 
 import { Card, Spin } from 'ant-design-vue';
 
-import * as MemberStatisticsApi from '#/api/mall/statistics/member';
+import { getMemberTerminalStatisticsList } from '#/api/mall/statistics/member';
 
 import { getTerminalChartOptions } from './terminal-chart-options';
 
@@ -20,10 +20,10 @@ const chartRef = ref<EchartsUIType>();
 const { renderEcharts } = useEcharts(chartRef);
 
 /** 按照终端，查询会员统计列表 */
-const getMemberTerminalStatisticsList = async () => {
+const loadMemberTerminalStatisticsList = async () => {
   loading.value = true;
   try {
-    const list = await MemberStatisticsApi.getMemberTerminalStatisticsList();
+    const list = await getMemberTerminalStatisticsList();
     const dictDataList = getDictOptions('terminal', 'number');
     const chartData = dictDataList.map((dictData: any) => {
       const userCount = list.find(
@@ -43,7 +43,7 @@ const getMemberTerminalStatisticsList = async () => {
 
 /** 初始化 */
 onMounted(() => {
-  getMemberTerminalStatisticsList();
+  loadMemberTerminalStatisticsList();
 });
 </script>
 
diff --git a/apps/web-antd/src/views/mall/statistics/product/modules/rank-card.vue b/apps/web-antd/src/views/mall/statistics/product/modules/rank-card.vue
index a2f9fdea5..ea58c3986 100644
--- a/apps/web-antd/src/views/mall/statistics/product/modules/rank-card.vue
+++ b/apps/web-antd/src/views/mall/statistics/product/modules/rank-card.vue
@@ -11,7 +11,7 @@ import { formatDateTime } from '@vben/utils';
 import { Card } from 'ant-design-vue';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
-import * as ProductStatisticsApi from '#/api/mall/statistics/product';
+import { getProductStatisticsRankPage } from '#/api/mall/statistics/product';
 import ShortcutDateRangePicker from '#/components/shortcut-date-range-picker/shortcut-date-range-picker.vue';
 
 /** 商品排行 */
@@ -104,7 +104,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     proxyConfig: {
       ajax: {
         query: async ({ page, sorts }) => {
-          return await ProductStatisticsApi.getProductStatisticsRankPage({
+          return await getProductStatisticsRankPage({
             pageNo: page.currentPage,
             pageSize: page.pageSize,
             times: searchTimes.value.length > 0 ? searchTimes.value : undefined,
diff --git a/apps/web-antd/src/views/mall/statistics/product/modules/summary-card.vue b/apps/web-antd/src/views/mall/statistics/product/modules/summary-card.vue
index dfc076368..9f2fde400 100644
--- a/apps/web-antd/src/views/mall/statistics/product/modules/summary-card.vue
+++ b/apps/web-antd/src/views/mall/statistics/product/modules/summary-card.vue
@@ -21,8 +21,13 @@ import {
 import { Button, Card, Col, Row, Spin } from 'ant-design-vue';
 import dayjs from 'dayjs';
 
-import * as ProductStatisticsApi from '#/api/mall/statistics/product';
+import {
+  exportProductStatisticsExcel,
+  getProductStatisticsAnalyse,
+  getProductStatisticsList,
+} from '#/api/mall/statistics/product';
 import ShortcutDateRangePicker from '#/components/shortcut-date-range-picker/shortcut-date-range-picker.vue';
+import { $t } from '#/locales';
 
 import { getProductSummaryChartOptions } from './summary-chart-options';
 
@@ -51,7 +56,7 @@ const calculateRelativeRate = (value?: number, reference?: number): string => {
 /** 处理日期范围变化 */
 const handleDateRangeChange = (times?: [Dayjs, Dayjs]) => {
   if (times?.length !== 2) {
-    getProductTrendData();
+    loadProductTrendData();
     return;
   }
   // 处理时间: 开始与截止在同一天的, 折线图出不来, 需要延长一天
@@ -65,29 +70,29 @@ const handleDateRangeChange = (times?: [Dayjs, Dayjs]) => {
   ];
 
   // 查询数据
-  getProductTrendData();
+  loadProductTrendData();
 };
 
 /** 处理商品状况查询 */
-const getProductTrendData = async () => {
+const loadProductTrendData = async () => {
   trendLoading.value = true;
   try {
-    await Promise.all([getProductTrendSummary(), getProductStatisticsList()]);
+    await Promise.all([loadProductTrendSummary(), loadProductStatisticsList()]);
   } finally {
     trendLoading.value = false;
   }
 };
 
 /** 查询商品状况数据统计 */
-async function getProductTrendSummary() {
-  trendSummary.value = await ProductStatisticsApi.getProductStatisticsAnalyse({
+async function loadProductTrendSummary() {
+  trendSummary.value = await getProductStatisticsAnalyse({
     times: searchTimes.value.length > 0 ? searchTimes.value : undefined,
   });
 }
 
 /** 查询商品状况数据列表 */
-async function getProductStatisticsList() {
-  const list = await ProductStatisticsApi.getProductStatisticsList({
+async function loadProductStatisticsList() {
+  const list = await getProductStatisticsList({
     times: searchTimes.value.length > 0 ? searchTimes.value : undefined,
   });
 
@@ -104,7 +109,7 @@ async function handleExport() {
     });
     // 发起导出
     exportLoading.value = true;
-    const data = await ProductStatisticsApi.exportProductStatisticsExcel({
+    const data = await exportProductStatisticsExcel({
       times: searchTimes.value.length > 0 ? searchTimes.value : undefined,
     });
     // 处理下载
@@ -125,7 +130,7 @@ async function handleExport() {
             <template #icon>
               <IconifyIcon icon="lucide:download" />
             </template>
-            导出
+            {{ $t('page.action.export') }}
           </Button>
         </ShortcutDateRangePicker>
       </div>
diff --git a/apps/web-antd/src/views/mall/statistics/trade/index.vue b/apps/web-antd/src/views/mall/statistics/trade/index.vue
index 8cc2aa71c..6e87786f9 100644
--- a/apps/web-antd/src/views/mall/statistics/trade/index.vue
+++ b/apps/web-antd/src/views/mall/statistics/trade/index.vue
@@ -9,7 +9,7 @@ import { fenToYuan } from '@vben/utils';
 
 import { Col, Row } from 'ant-design-vue';
 
-import * as TradeStatisticsApi from '#/api/mall/statistics/trade';
+import { getTradeStatisticsSummary } from '#/api/mall/statistics/trade';
 
 import TradeTrendCard from './modules/trend-card.vue';
 
@@ -31,14 +31,14 @@ function calculateRelativeRate(value?: number, reference?: number): string {
 }
 
 /** 查询交易统计 */
-async function getTradeStatisticsSummary() {
-  summary.value = await TradeStatisticsApi.getTradeStatisticsSummary();
+async function loadTradeStatisticsSummary() {
+  summary.value = await getTradeStatisticsSummary();
 }
 
 /** 初始化 */
 onMounted(async () => {
   loading.value = true;
-  await getTradeStatisticsSummary();
+  await loadTradeStatisticsSummary();
   loading.value = false;
 });
 </script>
diff --git a/apps/web-antd/src/views/mall/statistics/trade/modules/trend-card.vue b/apps/web-antd/src/views/mall/statistics/trade/modules/trend-card.vue
index 78117cde7..1dd4fc24b 100644
--- a/apps/web-antd/src/views/mall/statistics/trade/modules/trend-card.vue
+++ b/apps/web-antd/src/views/mall/statistics/trade/modules/trend-card.vue
@@ -21,8 +21,13 @@ import {
 import { Button, Card, Col, Row, Spin } from 'ant-design-vue';
 import dayjs from 'dayjs';
 
-import * as TradeStatisticsApi from '#/api/mall/statistics/trade';
+import {
+  exportTradeStatisticsExcel,
+  getTradeStatisticsAnalyse,
+  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';
 
@@ -51,7 +56,7 @@ const calculateRelativeRate = (value?: number, reference?: number): string => {
 /** 处理日期范围变化 */
 const handleDateRangeChange = (times?: [Dayjs, Dayjs]) => {
   if (times?.length !== 2) {
-    getTradeTrendData();
+    loadTradeTrendData();
     return;
   }
   // 处理时间: 开始与截止在同一天的, 折线图出不来, 需要延长一天
@@ -65,29 +70,32 @@ const handleDateRangeChange = (times?: [Dayjs, Dayjs]) => {
   ];
 
   // 查询数据
-  getTradeTrendData();
+  loadTradeTrendData();
 };
 
 /** 处理交易状况查询 */
-async function getTradeTrendData() {
+async function loadTradeTrendData() {
   trendLoading.value = true;
   try {
-    await Promise.all([getTradeStatisticsAnalyse(), getTradeStatisticsList()]);
+    await Promise.all([
+      loadTradeStatisticsAnalyse(),
+      loadTradeStatisticsList(),
+    ]);
   } finally {
     trendLoading.value = false;
   }
 }
 
 /** 查询交易状况数据统计 */
-async function getTradeStatisticsAnalyse() {
-  trendSummary.value = await TradeStatisticsApi.getTradeStatisticsAnalyse({
+async function loadTradeStatisticsAnalyse() {
+  trendSummary.value = await getTradeStatisticsAnalyse({
     times: searchTimes.value.length > 0 ? searchTimes.value : undefined,
   });
 }
 
 /** 查询交易状况数据列表 */
-async function getTradeStatisticsList() {
-  const list = await TradeStatisticsApi.getTradeStatisticsList({
+async function loadTradeStatisticsList() {
+  const list = await getTradeStatisticsList({
     times: searchTimes.value.length > 0 ? searchTimes.value : undefined,
   });
 
@@ -104,7 +112,7 @@ async function handleExport() {
     });
     // 发起导出
     exportLoading.value = true;
-    const data = await TradeStatisticsApi.exportTradeStatisticsExcel({
+    const data = await exportTradeStatisticsExcel({
       times: searchTimes.value.length > 0 ? searchTimes.value : undefined,
     });
     // 处理下载
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..85c513261 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
@@ -48,6 +48,7 @@ const afterSale = ref<MallAfterSaleApi.AfterSale>({
   logs: [],
 });
 
+// TODO @xingyu：貌似 antd 相比 antd 来说，多了一个框？有啥办法只有 1 个么？
 const [OrderDescriptions] = useDescription({
   title: '订单信息',
   bordered: false,
diff --git a/apps/web-antd/src/views/mall/trade/afterSale/modules/disagree-form.vue b/apps/web-antd/src/views/mall/trade/afterSale/modules/disagree-form.vue
index 3fa89a4d1..434d31ec4 100644
--- a/apps/web-antd/src/views/mall/trade/afterSale/modules/disagree-form.vue
+++ b/apps/web-antd/src/views/mall/trade/afterSale/modules/disagree-form.vue
@@ -9,7 +9,7 @@ import { $t } from '@vben/locales';
 import { message } from 'ant-design-vue';
 
 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-antd/src/views/mall/trade/order/detail/index.vue b/apps/web-antd/src/views/mall/trade/order/detail/index.vue
index e0e17325a..14c0db8c5 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
@@ -18,9 +18,13 @@ import { useTabs } from '@vben/hooks';
 import { Card, message, Tag } from 'ant-design-vue';
 
 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 * as TradeOrderApi from '#/api/mall/trade/order';
+import { getSimpleDeliveryExpressList } from '#/api/mall/trade/delivery/express';
+import { getDeliveryPickUpStore } from '#/api/mall/trade/delivery/pickUpStore';
+import {
+  getExpressTrackList,
+  getOrder,
+  pickUpOrder,
+} from '#/api/mall/trade/order';
 import { useDescription } from '#/components/description';
 import { DictTag } from '#/components/dict-tag';
 import { TableAction } from '#/components/table-action';
@@ -56,6 +60,7 @@ const deliveryExpressList = ref<MallDeliveryExpressApi.SimpleDeliveryExpress[]>(
 const expressTrackList = ref<any[]>([]);
 const pickUpStore = ref<MallDeliveryPickUpStoreApi.PickUpStore | undefined>();
 
+// TODO @xingyu：貌似 antd 相比 antd 来说，多了一个框？有啥办法只有 1 个么？
 const [OrderInfoDescriptions] = useDescription({
   title: '订单信息',
   bordered: false,
@@ -157,7 +162,7 @@ const [PriceFormModal, priceFormModalApi] = useVbenModal({
 async function getDetail() {
   loading.value = true;
   try {
-    const res = await TradeOrderApi.getOrder(orderId.value);
+    const res = await getOrder(orderId.value);
     if (res === null) {
       message.error('交易订单不存在');
       handleBack();
@@ -169,12 +174,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 +185,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;
@@ -217,7 +217,7 @@ const handlePickUp = async () => {
     duration: 0,
   });
   try {
-    await TradeOrderApi.pickUpOrder(order.value.id!);
+    await pickUpOrder(order.value.id!);
     message.success('核销成功');
     await getDetail();
   } finally {
@@ -338,7 +338,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/pay/notify/modules/detail.vue b/apps/web-antd/src/views/pay/notify/modules/detail.vue
index 7914903da..90a6a67b0 100644
--- a/apps/web-antd/src/views/pay/notify/modules/detail.vue
+++ b/apps/web-antd/src/views/pay/notify/modules/detail.vue
@@ -17,11 +17,8 @@ import { useDetailLogColumns, useDetailSchema } from '../data';
 const formData = ref<PayNotifyApi.NotifyTask>();
 
 const [Description] = useDescription({
-  componentProps: {
-    bordered: true,
-    column: 2,
-    class: 'mx-4',
-  },
+  bordered: true,
+  column: 2,
   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 dea8cdad4..2d4d84b10 100644
--- a/apps/web-antd/src/views/pay/order/modules/detail.vue
+++ b/apps/web-antd/src/views/pay/order/modules/detail.vue
@@ -13,11 +13,8 @@ import { useDetailSchema } from '../data';
 const formData = ref<PayOrderApi.Order>();
 
 const [Descriptions] = useDescription({
-  componentProps: {
-    bordered: true,
-    column: 2,
-    class: 'mx-4',
-  },
+  bordered: true,
+  column: 2,
   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 1617b1d60..d78ea529d 100644
--- a/apps/web-antd/src/views/pay/refund/modules/detail.vue
+++ b/apps/web-antd/src/views/pay/refund/modules/detail.vue
@@ -13,11 +13,8 @@ import { useDetailSchema } from '../data';
 const formData = ref<PayRefundApi.Refund>();
 
 const [Descriptions] = useDescription({
-  componentProps: {
-    bordered: true,
-    column: 2,
-    class: 'mx-4',
-  },
+  bordered: true,
+  column: 2,
   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 f3841f080..83150697c 100644
--- a/apps/web-antd/src/views/pay/transfer/modules/detail.vue
+++ b/apps/web-antd/src/views/pay/transfer/modules/detail.vue
@@ -13,11 +13,8 @@ import { useDetailSchema } from '../data';
 const formData = ref<PayTransferApi.Transfer>();
 
 const [Descriptions] = useDescription({
-  componentProps: {
-    bordered: true,
-    column: 2,
-    class: 'mx-4',
-  },
+  bordered: true,
+  column: 2,
   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 61bcc89b6..4982a32b3 100644
--- a/apps/web-antd/src/views/system/loginlog/modules/detail.vue
+++ b/apps/web-antd/src/views/system/loginlog/modules/detail.vue
@@ -12,11 +12,8 @@ import { useDetailSchema } from '../data';
 const formData = ref<SystemLoginLogApi.LoginLog>();
 
 const [Descriptions] = useDescription({
-  componentProps: {
-    bordered: true,
-    column: 1,
-    class: 'mx-4',
-  },
+  bordered: true,
+  column: 1,
   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 f4f465982..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
@@ -12,11 +12,8 @@ import { useDetailSchema } from '../data';
 const formData = ref<SystemMailLogApi.MailLog>();
 
 const [Descriptions] = useDescription({
-  componentProps: {
-    bordered: true,
-    column: 2,
-    class: 'mx-4',
-  },
+  bordered: true,
+  column: 2,
   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 0a3597176..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
@@ -12,11 +12,8 @@ import { useDetailSchema } from '../data';
 const formData = ref<SystemNotifyMessageApi.NotifyMessage>();
 
 const [Descriptions] = useDescription({
-  componentProps: {
-    bordered: true,
-    column: 1,
-    class: 'mx-4',
-  },
+  bordered: true,
+  column: 1,
   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 0a3597176..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
@@ -12,11 +12,8 @@ import { useDetailSchema } from '../data';
 const formData = ref<SystemNotifyMessageApi.NotifyMessage>();
 
 const [Descriptions] = useDescription({
-  componentProps: {
-    bordered: true,
-    column: 1,
-    class: 'mx-4',
-  },
+  bordered: true,
+  column: 1,
   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 ad77e52ba..5ada4818a 100644
--- a/apps/web-antd/src/views/system/operatelog/modules/detail.vue
+++ b/apps/web-antd/src/views/system/operatelog/modules/detail.vue
@@ -12,11 +12,8 @@ import { useDetailSchema } from '../data';
 const formData = ref<SystemOperateLogApi.OperateLog>();
 
 const [Descriptions] = useDescription({
-  componentProps: {
-    bordered: true,
-    column: 1,
-    class: 'mx-4',
-  },
+  bordered: true,
+  column: 1,
   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 e440a8de3..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
@@ -12,11 +12,8 @@ import { useDetailSchema } from '../data';
 const formData = ref<SystemSmsLogApi.SmsLog>();
 
 const [Descriptions] = useDescription({
-  componentProps: {
-    bordered: true,
-    column: 2,
-    class: 'mx-4',
-  },
+  bordered: true,
+  column: 2,
   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 6234ae279..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
@@ -14,13 +14,8 @@ import { useDetailSchema } from '../data';
 const formData = ref<SystemSocialUserApi.SocialUser>();
 
 const [Descriptions] = useDescription({
-  componentProps: {
-    bordered: true,
-    column: 1,
-    size: 'middle',
-    class: 'mx-4',
-    labelStyle: { width: '185px' },
-  },
+  bordered: true,
+  column: 1,
   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/components/description/description.vue b/apps/web-ele/src/components/description/description.vue
index 527c886f2..3272748e3 100644
--- a/apps/web-ele/src/components/description/description.vue
+++ b/apps/web-ele/src/components/description/description.vue
@@ -10,8 +10,7 @@ import { get, getNestedValue, isFunction } from '@vben/utils';
 import { ElDescriptions, ElDescriptionsItem } from 'element-plus';
 
 const props = {
-  // TODO @星语：bordered 不生效；之前好像是 border
-  bordered: { default: true, type: Boolean },
+  border: { default: true, type: Boolean },
   column: {
     default: () => {
       return { lg: 3, md: 3, sm: 2, xl: 3, xs: 1, xxl: 4 };
diff --git a/apps/web-ele/src/components/description/typing.ts b/apps/web-ele/src/components/description/typing.ts
index eb16c33d2..fca7f62c3 100644
--- a/apps/web-ele/src/components/description/typing.ts
+++ b/apps/web-ele/src/components/description/typing.ts
@@ -32,8 +32,6 @@ export interface DescriptionProps extends ElDescriptionProps {
   schema: DescriptionItemSchema[];
   // 数据
   data: Recordable<any>;
-  // 是否包含边框
-  bordered?: boolean;
 }
 
 export interface DescInstance {
diff --git a/apps/web-ele/src/components/form-create/rules/use-dict-select.ts b/apps/web-ele/src/components/form-create/rules/use-dict-select.ts
index c9c438e8b..104277195 100644
--- a/apps/web-ele/src/components/form-create/rules/use-dict-select.ts
+++ b/apps/web-ele/src/components/form-create/rules/use-dict-select.ts
@@ -1,8 +1,10 @@
+import type { SystemDictTypeApi } from '#/api/system/dict/type';
+
 import { onMounted, ref } from 'vue';
 
 import { buildUUID, cloneDeep } from '@vben/utils';
 
-import * as DictDataApi from '#/api/system/dict/type';
+import { getSimpleDictTypeList } from '#/api/system/dict/type';
 import {
   localeProps,
   makeRequiredRule,
@@ -18,12 +20,12 @@ export const useDictSelectRule = () => {
   const rules = cloneDeep(selectRule);
   const dictOptions = ref<{ label: string; value: string }[]>([]); // 字典类型下拉数据
   onMounted(async () => {
-    const data = await DictDataApi.getSimpleDictTypeList();
+    const data = await getSimpleDictTypeList();
     if (!data || data.length === 0) {
       return;
     }
     dictOptions.value =
-      data?.map((item: DictDataApi.SystemDictTypeApi.DictType) => ({
+      data?.map((item: SystemDictTypeApi.DictType) => ({
         label: item.name,
         value: item.type,
       })) ?? [];
diff --git a/apps/web-ele/src/views/infra/apiAccessLog/data.ts b/apps/web-ele/src/views/infra/apiAccessLog/data.ts
index f10d3be8e..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.resultCode > 0) {
+        } 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 3b0186176..0b3c4c7fa 100644
--- a/apps/web-ele/src/views/infra/apiAccessLog/modules/detail.vue
+++ b/apps/web-ele/src/views/infra/apiAccessLog/modules/detail.vue
@@ -11,10 +11,9 @@ import { useDetailSchema } from '../data';
 
 const formData = ref<InfraApiAccessLogApi.ApiAccessLog>();
 
-// TODO @xingyu：antd 和 el 这 2 个组件在这个模块的 detail.vue 不一样，看看是不是统一？还是就是区分的哈？
 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 40a3a8aa2..705cfdcd0 100644
--- a/apps/web-ele/src/views/infra/apiErrorLog/modules/detail.vue
+++ b/apps/web-ele/src/views/infra/apiErrorLog/modules/detail.vue
@@ -12,8 +12,8 @@ import { useDetailSchema } from '../data';
 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 0ee8e5133..4774573d1 100644
--- a/apps/web-ele/src/views/infra/job/modules/detail.vue
+++ b/apps/web-ele/src/views/infra/job/modules/detail.vue
@@ -14,8 +14,8 @@ const formData = ref<InfraJobApi.Job>(); // 任务详情
 const nextTimes = ref<Date[]>([]); // 下一次执行时间
 
 const [Descriptions] = useDescription({
+  border: true,
   column: 1,
-  labelWidth: 140,
   schema: useDetailSchema(),
 });
 
diff --git a/apps/web-ele/src/views/infra/redis/modules/info.vue b/apps/web-ele/src/views/infra/redis/modules/info.vue
index bee9922bb..95859e3c0 100644
--- a/apps/web-ele/src/views/infra/redis/modules/info.vue
+++ b/apps/web-ele/src/views/infra/redis/modules/info.vue
@@ -8,7 +8,7 @@ defineProps<{
 }>();
 
 const [Descriptions] = useDescription({
-  bordered: false,
+  border: false,
   column: 6,
   schema: [
     {
diff --git a/apps/web-ele/src/views/mall/home/modules/member-statistics-card.vue b/apps/web-ele/src/views/mall/home/modules/member-statistics-card.vue
index e9e83c86e..91661214d 100644
--- a/apps/web-ele/src/views/mall/home/modules/member-statistics-card.vue
+++ b/apps/web-ele/src/views/mall/home/modules/member-statistics-card.vue
@@ -7,10 +7,10 @@ import { onMounted, ref } from 'vue';
 
 import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
 
-import { ElCard, ElRadio, ElRadioGroup } from 'element-plus';
 import dayjs from 'dayjs';
+import { ElCard, ElRadio, ElRadioGroup } from 'element-plus';
 
-import * as MemberStatisticsApi from '#/api/mall/statistics/member';
+import { getMemberRegisterCountList } from '#/api/mall/statistics/member';
 
 import {
   getMemberStatisticsChartOptions,
@@ -41,7 +41,7 @@ const timeRangeConfig = {
 const timeRangeType = ref(TimeRangeTypeEnum.DAY30); // 日期快捷选择按钮, 默认 30 天
 
 /** 时间范围类型单选按钮选中 */
-const handleTimeRangeTypeChange = async () => {
+async function handleTimeRangeTypeChange() {
   // 设置时间范围
   let beginTime: Dayjs;
   let endTime: Dayjs;
@@ -71,13 +71,13 @@ const handleTimeRangeTypeChange = async () => {
     }
   }
   // 发送时间范围选中事件
-  await getMemberRegisterCountList(beginTime, endTime);
-};
+  await loadMemberRegisterCountList(beginTime, endTime);
+}
 
-async function getMemberRegisterCountList(beginTime: Dayjs, endTime: Dayjs) {
+async function loadMemberRegisterCountList(beginTime: Dayjs, endTime: Dayjs) {
   loading.value = true;
   try {
-    const list = await MemberStatisticsApi.getMemberRegisterCountList(
+    const list = await getMemberRegisterCountList(
       beginTime.toDate(),
       endTime.toDate(),
     );
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 f193e62f1..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
@@ -6,9 +6,9 @@ import { CountTo } from '@vben/common-ui';
 
 import { ElCard } from 'element-plus';
 
-import * as ProductSpuApi from '#/api/mall/product/spu';
-import * as PayStatisticsApi from '#/api/mall/statistics/pay';
-import * as TradeStatisticsApi from '#/api/mall/statistics/trade';
+import { getTabsCount } from '#/api/mall/product/spu';
+import { getWalletRechargePrice } from '#/api/mall/statistics/pay';
+import { getOrderCount } from '#/api/mall/statistics/trade';
 
 /** 运营数据卡片 */
 defineOptions({ name: 'OperationDataCard' });
@@ -51,8 +51,8 @@ const data = reactive({
 });
 
 /** 查询订单数据 */
-async function getOrderData() {
-  const orderCount = await TradeStatisticsApi.getOrderCount();
+async function loadOrderData() {
+  const orderCount = await getOrderCount();
   if (orderCount.undelivered) {
     data.orderUndelivered.value = orderCount.undelivered;
   }
@@ -68,16 +68,16 @@ async function getOrderData() {
 }
 
 /** 查询商品数据 */
-async function getProductData() {
-  const productCount = await ProductSpuApi.getTabsCount();
+async function loadProductData() {
+  const productCount = await getTabsCount();
   data.productForSale.value = productCount['0'] || 0;
   data.productInWarehouse.value = productCount['1'] || 0;
   data.productAlertStock.value = productCount['3'] || 0;
 }
 
 /** 查询钱包充值数据 */
-async function getWalletRechargeData() {
-  const paySummary = await PayStatisticsApi.getWalletRechargePrice();
+async function loadWalletRechargeData() {
+  const paySummary = await getWalletRechargePrice();
   data.rechargePrice.value = paySummary.rechargePrice;
 }
 
@@ -88,16 +88,16 @@ function handleClick(routerName: string) {
 
 /** 激活时 */
 onActivated(() => {
-  getOrderData();
-  getProductData();
-  getWalletRechargeData();
+  loadOrderData();
+  loadProductData();
+  loadWalletRechargeData();
 });
 
 /** 初始化 */
 onMounted(() => {
-  getOrderData();
-  getProductData();
-  getWalletRechargeData();
+  loadOrderData();
+  loadProductData();
+  loadWalletRechargeData();
 });
 </script>
 
diff --git a/apps/web-ele/src/views/mall/home/modules/trade-trend-card.vue b/apps/web-ele/src/views/mall/home/modules/trade-trend-card.vue
index 0f63f3a9c..70bca614e 100644
--- a/apps/web-ele/src/views/mall/home/modules/trade-trend-card.vue
+++ b/apps/web-ele/src/views/mall/home/modules/trade-trend-card.vue
@@ -11,7 +11,7 @@ import { fenToYuan } from '@vben/utils';
 import dayjs from 'dayjs';
 import { ElCard, ElRadio, ElRadioGroup } from 'element-plus';
 
-import * as TradeStatisticsApi from '#/api/mall/statistics/trade';
+import { getOrderCountTrendComparison } from '#/api/mall/statistics/trade';
 
 import {
   getTradeTrendChartOptions,
@@ -76,15 +76,15 @@ async function handleTimeRangeTypeChange() {
     }
   }
   // 发送时间范围选中事件
-  await getOrderCountTrendComparison(beginTime, endTime);
+  await loadOrderCountTrendComparison(beginTime, endTime);
 }
 
 /** 查询订单数量趋势对照数据 */
-async function getOrderCountTrendComparison(beginTime: Dayjs, endTime: Dayjs) {
+async function loadOrderCountTrendComparison(beginTime: Dayjs, endTime: Dayjs) {
   loading.value = true;
   try {
     // 1. 查询数据
-    const list = await TradeStatisticsApi.getOrderCountTrendComparison(
+    const list = await getOrderCountTrendComparison(
       timeRangeType.value,
       beginTime.toDate(),
       endTime.toDate(),
diff --git a/apps/web-ele/src/views/mall/product/category/components/product-category-select.vue b/apps/web-ele/src/views/mall/product/category/components/category-select.vue
similarity index 78%
rename from apps/web-ele/src/views/mall/product/category/components/product-category-select.vue
rename to apps/web-ele/src/views/mall/product/category/components/category-select.vue
index 441542b5d..814ec22ae 100644
--- a/apps/web-ele/src/views/mall/product/category/components/product-category-select.vue
+++ b/apps/web-ele/src/views/mall/product/category/components/category-select.vue
@@ -3,32 +3,33 @@ import { computed, onMounted, ref } from 'vue';
 
 import { handleTree } from '@vben/utils';
 
-import * as ProductCategoryApi from '#/api/mall/product/category';
+import { ElTreeSelect } from 'element-plus';
+
+import { getCategoryList } from '#/api/mall/product/category';
 
 /** 商品分类选择组件 */
 defineOptions({ name: 'ProductCategorySelect' });
 
 const props = defineProps({
-  // 选中的ID
   modelValue: {
     type: [Number, Array<Number>],
     default: undefined,
-  },
-  // 是否多选
+  }, // 选中的 ID
   multiple: {
     type: Boolean,
     default: false,
-  },
-  // 上级品类的编号
+  }, // 是否多选
   parentId: {
     type: Number,
     default: undefined,
-  },
+  }, // 上级品类的编号
 });
 
 /** 分类选择 */
 const emit = defineEmits(['update:modelValue']);
 
+const categoryList = ref<any[]>([]); // 分类树
+
 /** 选中的分类 ID */
 const selectCategoryId = computed({
   get: () => {
@@ -40,30 +41,27 @@ const selectCategoryId = computed({
 });
 
 /** 初始化 */
-const categoryList = ref<any[]>([]); // 分类树
 onMounted(async () => {
-  // 获得分类树
-  const data = await ProductCategoryApi.getCategoryList({
+  const data = await getCategoryList({
     parentId: props.parentId,
   });
   categoryList.value = handleTree(data, 'id', 'parentId');
 });
 </script>
 <template>
-  <el-tree-select
+  <ElTreeSelect
     v-model="selectCategoryId"
     :data="categoryList"
+    node-key="id"
     :props="{
       children: 'children',
       label: 'name',
-      value: 'id',
-      isLeaf: 'leaf',
-      emitPath: false,
     }"
     :multiple="multiple"
     :show-checkbox="multiple"
-    class="w-1/1"
-    node-key="id"
+    check-strictly
+    default-expand-all
+    class="w-full"
     placeholder="请选择商品分类"
   />
 </template>
diff --git a/apps/web-ele/src/views/mall/product/category/components/index.ts b/apps/web-ele/src/views/mall/product/category/components/index.ts
new file mode 100644
index 000000000..aa1424405
--- /dev/null
+++ b/apps/web-ele/src/views/mall/product/category/components/index.ts
@@ -0,0 +1 @@
+export { default as ProductCategorySelect } from './category-select.vue';
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..84a5b44c4
--- /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) {
+      gridApi.grid.clearCheckboxRow();
+      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/components/app-link-input/index.vue b/apps/web-ele/src/views/mall/promotion/components/app-link-input/index.vue
index 2118dda5b..e1060efaa 100644
--- a/apps/web-ele/src/views/mall/promotion/components/app-link-input/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/app-link-input/index.vue
@@ -1,14 +1,15 @@
 <script lang="ts" setup>
-// TODO @AI：改成 El 标签风格，而不是 el-
 // TODO @AI：一些 modal 是否使用 Modal 组件，而不是 el-modal？
 import { ref, watch } from 'vue';
 
-import AppLinkSelectDialog from './app-link-select-dialog.vue';
+import { ElButton, ElInput } from 'element-plus';
+
+import AppLinkSelectDialog from './select-dialog.vue';
 
 /** APP 链接输入框 */
 defineOptions({ name: 'AppLinkInput' });
 
-// 定义属性
+/** 定义属性 */
 const props = defineProps({
   modelValue: {
     type: String,
@@ -23,8 +24,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,11 +47,11 @@ watch(
 );
 </script>
 <template>
-  <el-input v-model="appLink" placeholder="输入或选择链接">
+  <ElInput v-model="appLink" placeholder="输入或选择链接">
     <template #append>
-      <el-button @click="handleOpenDialog">选择</el-button>
+      <ElButton @click="handleOpenDialog">选择</ElButton>
     </template>
-  </el-input>
+  </ElInput>
 
   <AppLinkSelectDialog ref="dialogRef" @change="handleLinkSelected" />
 </template>
diff --git a/apps/web-ele/src/views/mall/promotion/components/app-link-input/app-link-select-dialog.vue b/apps/web-ele/src/views/mall/promotion/components/app-link-input/select-dialog.vue
similarity index 69%
rename from apps/web-ele/src/views/mall/promotion/components/app-link-input/app-link-select-dialog.vue
rename to apps/web-ele/src/views/mall/promotion/components/app-link-input/select-dialog.vue
index b2362962a..3ab7d7fa6 100644
--- a/apps/web-ele/src/views/mall/promotion/components/app-link-input/app-link-select-dialog.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/app-link-input/select-dialog.vue
@@ -5,11 +5,18 @@ import type { AppLink } from './data';
 
 import { nextTick, ref } from 'vue';
 
+import { useVbenModal } from '@vben/common-ui';
 import { getUrlNumberValue } from '@vben/utils';
 
-import { ElScrollbar } from 'element-plus';
+import {
+  ElButton,
+  ElForm,
+  ElFormItem,
+  ElScrollbar,
+  ElTooltip,
+} from 'element-plus';
 
-import ProductCategorySelect from '#/views/mall/product/category/components/product-category-select.vue';
+import { ProductCategorySelect } from '#/views/mall/product/category/components/';
 
 import { APP_LINK_GROUP_LIST, APP_LINK_TYPE_ENUM } from './data';
 
@@ -32,18 +39,31 @@ const groupBtnRefs = ref<ButtonInstance[]>([]); // 分组引用列表
 const detailSelectDialog = ref<{
   id?: number;
   type?: APP_LINK_TYPE_ENUM;
-  visible: boolean;
 }>({
-  visible: false,
   id: undefined,
   type: undefined,
 }); // 详情选择对话框
 
+const [Modal, modalApi] = useVbenModal({
+  onConfirm() {
+    emit('change', activeAppLink.value.path);
+    emit('appLinkChange', activeAppLink.value);
+    modalApi.close();
+  },
+});
+
+const [DetailSelectModal, detailSelectModalApi] = useVbenModal({
+  onConfirm() {
+    detailSelectModalApi.close();
+  },
+});
+
+defineExpose({ open });
+
 /** 打开弹窗 */
-const dialogVisible = ref(false);
-const open = (link: string) => {
+async function open(link: string) {
   activeAppLink.value.path = link;
-  dialogVisible.value = true;
+  modalApi.open();
   // 滚动到当前的链接
   const group = APP_LINK_GROUP_LIST.find((group) =>
     group.links.some((linkItem) => {
@@ -56,19 +76,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 =
@@ -76,22 +95,18 @@ const handleAppLinkSelected = (appLink: AppLink) => {
           'id',
           `http://127.0.0.1${activeAppLink.value.path}`,
         ) || undefined;
+      detailSelectModalApi.open();
       break;
     }
     default: {
       break;
     }
   }
-};
-
-function handleSubmit() {
-  dialogVisible.value = false;
-  emit('change', activeAppLink.value.path);
-  emit('appLinkChange', activeAppLink.value);
 }
 
 /**
  * 处理右侧链接列表滚动
+ *
  * @param {object} param0 滚动事件参数
  * @param {number} param0.scrollTop 滚动条的位置
  */
@@ -134,66 +149,70 @@ function scrollToGroupBtn(group: string) {
 
 /** 是否为相同的链接（不比较参数，只比较链接） */
 function isSameLink(link1: string, link2: string) {
-  return link2 ? link1.split('?')[0] === link2.split('?')[0] : false;
+  return link2 ? link1?.split('?')[0] === link2.split('?')[0] : false;
 }
 
 /** 处理详情选择 */
 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}`;
-  // 关闭对话框
-  detailSelectDialog.value.visible = false;
-  // 重置 id
+
+  // 关闭对话框，并重置 id
+  detailSelectModalApi.close();
   detailSelectDialog.value.id = undefined;
 }
 </script>
 <template>
-  <el-dialog v-model="dialogVisible" title="选择链接" width="65%">
+  <Modal title="选择链接" class="w-[65%]">
     <div class="flex h-[500px] gap-2">
-      <!-- 左侧分组列表 -->
-      <ElScrollbar
-        wrap-class="h-full"
-        ref="groupScrollbar"
-        view-class="flex flex-col"
-      >
-        <el-button
-          v-for="(group, groupIndex) in APP_LINK_GROUP_LIST"
-          :key="groupIndex"
-          class="ml-0 mr-4 w-[90px] justify-start"
-          :class="[{ active: activeGroup === group.name }]"
-          ref="groupBtnRefs"
-          :text="activeGroup !== group.name"
-          :type="activeGroup === group.name ? 'primary' : 'default'"
-          @click="handleGroupSelected(group.name)"
+      <div class="flex flex-col">
+        <!-- 左侧分组列表 -->
+        <ElScrollbar
+          wrap-class="h-full"
+          ref="groupScrollbar"
+          view-class="flex flex-col"
+          class="border-r border-gray-200 pr-2"
         >
-          {{ group.name }}
-        </el-button>
-      </ElScrollbar>
+          <ElButton
+            v-for="(group, groupIndex) in APP_LINK_GROUP_LIST"
+            :key="groupIndex"
+            class="!ml-0 mb-1 mr-4 !justify-start"
+            :class="[{ active: activeGroup === group.name }]"
+            ref="groupBtnRefs"
+            :text="activeGroup !== group.name"
+            :type="activeGroup === group.name ? 'primary' : 'default'"
+            @click="handleGroupSelected(group.name)"
+          >
+            {{ group.name }}
+          </ElButton>
+        </ElScrollbar>
+      </div>
       <!-- 右侧链接列表 -->
       <ElScrollbar
-        class="h-full flex-1"
+        class="h-full flex-1 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>
           <!-- 链接列表 -->
-          <el-tooltip
+          <ElTooltip
             v-for="(appLink, appLinkIndex) in group.links"
             :key="appLinkIndex"
             :content="appLink.path"
             placement="bottom"
             :show-after="300"
           >
-            <el-button
+            <ElButton
               class="mb-2 ml-0 mr-2"
               :type="
                 isSameLink(appLink.path, activeAppLink.path)
@@ -203,20 +222,16 @@ function handleProductCategorySelected(id: number) {
               @click="handleAppLinkSelected(appLink)"
             >
               {{ appLink.name }}
-            </el-button>
-          </el-tooltip>
+            </ElButton>
+          </ElTooltip>
         </div>
       </ElScrollbar>
     </div>
-    <!-- 底部对话框操作按钮 -->
-    <template #footer>
-      <el-button type="primary" @click="handleSubmit">确 定</el-button>
-      <el-button @click="dialogVisible = false">取 消</el-button>
-    </template>
-  </el-dialog>
-  <el-dialog v-model="detailSelectDialog.visible" title="" width="50%">
-    <el-form class="min-h-[200px]">
-      <el-form-item
+  </Modal>
+
+  <DetailSelectModal title="选择分类" class="w-[65%]">
+    <ElForm class="min-h-[200px]">
+      <ElFormItem
         label="选择分类"
         v-if="
           detailSelectDialog.type === APP_LINK_TYPE_ENUM.PRODUCT_CATEGORY_LIST
@@ -227,12 +242,7 @@ function handleProductCategorySelected(id: number) {
           :parent-id="0"
           @update:model-value="handleProductCategorySelected"
         />
-      </el-form-item>
-    </el-form>
-  </el-dialog>
+      </ElFormItem>
+    </ElForm>
+  </DetailSelectModal>
 </template>
-<style lang="scss" scoped>
-:deep(.el-button + .el-button) {
-  margin-left: 0 !important;
-}
-</style>
diff --git a/apps/web-ele/src/views/mall/promotion/components/color-input/index.vue b/apps/web-ele/src/views/mall/promotion/components/color-input/index.vue
index fdc881853..996863b5b 100644
--- a/apps/web-ele/src/views/mall/promotion/components/color-input/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/color-input/index.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
-// TODO @AI：改成 El 风格，而不是iel- 风格；
 import { computed } from 'vue';
 
+import { ElColorPicker, ElInput } from 'element-plus';
+
 import { PREDEFINE_COLORS } from '@vben/constants';
 
 /** 颜色输入框 */
@@ -27,11 +28,11 @@ const color = computed({
 </script>
 
 <template>
-  <el-input v-model="color">
+  <ElInput v-model="color">
     <template #prepend>
-      <el-color-picker v-model="color" :predefine="PREDEFINE_COLORS" />
+      <ElColorPicker v-model="color" :predefine="PREDEFINE_COLORS" />
     </template>
-  </el-input>
+  </ElInput>
 </template>
 
 <style scoped lang="scss">
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 a3181d594..f5696f8a3 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
@@ -49,9 +49,8 @@ const emits = defineEmits<{
 type DiyComponentWithStyle = DiyComponent<any> & {
   property: { style?: ComponentStyle };
 };
-/**
- * 组件样式
- */
+
+/** 组件样式 */
 const style = computed(() => {
   const componentStyle = props.component.property.style;
   if (!componentStyle) {
@@ -78,24 +77,17 @@ const style = computed(() => {
   };
 });
 
-/**
- * 移动组件
- * @param direction 移动方向
- */
+/** 移动组件 */
 const handleMoveComponent = (direction: number) => {
   emits('move', direction);
 };
 
-/**
- * 复制组件
- */
+/** 复制组件 */
 const handleCopyComponent = () => {
   emits('copy');
 };
 
-/**
- * 删除组件
- */
+/** 删除组件 */
 const handleDeleteComponent = () => {
   emits('delete');
 };
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 4220ad08b..9428a4187 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
@@ -14,16 +14,15 @@ 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 = reactive<any[]>([]); // 组件分组
+const extendGroups = reactive<string[]>([]); // 展开的折叠面板
+
+/** 监听 list 属性，按照 DiyComponentLibrary 的 name 分组 */
 watch(
   () => props.list,
   () => {
@@ -53,7 +52,7 @@ watch(
   },
 );
 
-// 克隆组件
+/** 克隆组件 */
 const handleCloneComponent = (component: DiyComponent<any>) => {
   const instance = cloneDeep(component);
   instance.uid = Date.now();
@@ -129,6 +128,7 @@ const handleCloneComponent = (component: DiyComponent<any>) => {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
+    width: 261px;
   }
 
   .component {
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/Carousel/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/carousel/config.ts
similarity index 61%
rename from apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/Carousel/config.ts
rename to apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/carousel/config.ts
index f63a0bcb6..4d040e325 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
@@ -2,32 +2,23 @@ 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; // 播放间隔
+  items: CarouselItemProperty[]; // 轮播内容
+  style: ComponentStyle; // 组件样式
 }
 
-// 定义组件
+/** 轮播内容属性 */
+export interface CarouselItemProperty {
+  type: 'img' | 'video'; // 类型：图片 | 视频
+  imgUrl: string; // 图片链接
+  videoUrl: string; // 视频链接
+  url: string; // 跳转链接
+}
+
+/** 定义组件 */
 export const component = {
   id: 'Carousel',
   name: '轮播图',
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
similarity index 95%
rename from apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/Carousel/index.vue
rename to apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/carousel/index.vue
index df256770c..0f204bd18 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
@@ -12,7 +12,9 @@ defineOptions({ name: 'Carousel' });
 
 defineProps<{ property: CarouselProperty }>();
 
-const currentIndex = ref(0);
+const currentIndex = ref(0); // 当前索引
+
+/** 处理索引变化 */
 const handleIndexChange = (index: number) => {
   currentIndex.value = index + 1;
 };
@@ -46,5 +48,3 @@ const handleIndexChange = (index: number) => {
     </div>
   </div>
 </template>
-
-<style scoped lang="scss"></style>
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
similarity index 99%
rename from apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/Carousel/property.vue
rename to apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/carousel/property.vue
index 1e23b0e32..1cd60005f 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
@@ -26,7 +26,9 @@ import ComponentContainerProperty from '../../component-container-property.vue';
 defineOptions({ name: 'CarouselProperty' });
 
 const props = defineProps<{ modelValue: CarouselProperty }>();
+
 const emit = defineEmits(['update:modelValue']);
+
 const formData = useVModel(props, 'modelValue', emit);
 </script>
 
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/component.tsx b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/component.tsx
index d4dbfee44..b09a30966 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/component.tsx
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/component.tsx
@@ -1,4 +1,87 @@
-// 导出所有优惠券相关组件
-export { CouponDiscount } from './coupon-discount';
-export { CouponDiscountDesc } from './coupon-discount-desc';
-export { CouponValidTerm } from './coupon-validTerm';
+import type { MallCouponTemplateApi } from '#/api/mall/promotion/coupon/couponTemplate';
+
+import { defineComponent } from 'vue';
+
+import {
+  CouponTemplateValidityTypeEnum,
+  PromotionDiscountTypeEnum,
+} from '@vben/constants';
+import { floatToFixed2, formatDate } from '@vben/utils';
+
+/** 有效期 */
+export const CouponValidTerm = defineComponent({
+  name: 'CouponValidTerm',
+  props: {
+    coupon: {
+      type: Object as () => MallCouponTemplateApi.CouponTemplate,
+      required: true,
+    },
+  },
+  setup(props) {
+    const coupon = props.coupon as MallCouponTemplateApi.CouponTemplate;
+    const text =
+      coupon.validityType === CouponTemplateValidityTypeEnum.DATE.type
+        ? `有效期：${formatDate(coupon.validStartTime, 'YYYY-MM-DD')} 至 ${formatDate(
+            coupon.validEndTime,
+            'YYYY-MM-DD',
+          )}`
+        : `领取后第 ${coupon.fixedStartTerm} - ${coupon.fixedEndTerm} 天内可用`;
+    return () => <div>{text}</div>;
+  },
+});
+
+/** 优惠值 */
+export const CouponDiscount = defineComponent({
+  name: 'CouponDiscount',
+  props: {
+    coupon: {
+      type: Object as () => MallCouponTemplateApi.CouponTemplate,
+      required: true,
+    },
+  },
+  setup(props) {
+    const coupon = props.coupon as MallCouponTemplateApi.CouponTemplate;
+    // 折扣
+    let value = `${(coupon.discountPercent ?? 0) / 10}`;
+    let suffix = ' 折';
+    // 满减
+    if (coupon.discountType === PromotionDiscountTypeEnum.PRICE.type) {
+      value = floatToFixed2(coupon.discountPrice);
+      suffix = ' 元';
+    }
+    return () => (
+      <div>
+        <span class={'text-20px font-bold'}>{value}</span>
+        <span>{suffix}</span>
+      </div>
+    );
+  },
+});
+
+/** 优惠描述 */
+export const CouponDiscountDesc = defineComponent({
+  name: 'CouponDiscountDesc',
+  props: {
+    coupon: {
+      type: Object as () => MallCouponTemplateApi.CouponTemplate,
+      required: true,
+    },
+  },
+  setup(props) {
+    const coupon = props.coupon as MallCouponTemplateApi.CouponTemplate;
+    // 使用条件
+    const useCondition =
+      coupon.usePrice > 0 ? `满${floatToFixed2(coupon.usePrice)}元，` : '';
+    // 优惠描述
+    const discountDesc =
+      coupon.discountType === PromotionDiscountTypeEnum.PRICE.type
+        ? `减${floatToFixed2(coupon.discountPrice)}元`
+        : `打${(coupon.discountPercent ?? 0) / 10}折`;
+    return () => (
+      <div>
+        <span>{useCondition}</span>
+        <span>{discountDesc}</span>
+      </div>
+    );
+  },
+});
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/config.ts
index 4392494d3..723461b4a 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/config.ts
+++ b/apps/web-ele/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-ele/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/coupon-discount-desc.tsx b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/coupon-discount-desc.tsx
deleted file mode 100644
index a79e1f0cb..000000000
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/coupon-discount-desc.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import type { MallCouponTemplateApi } from '#/api/mall/promotion/coupon/couponTemplate';
-
-import { defineComponent } from 'vue';
-
-import { PromotionDiscountTypeEnum } from '@vben/constants';
-import { floatToFixed2 } from '@vben/utils';
-
-// 优惠描述
-export const CouponDiscountDesc = defineComponent({
-  name: 'CouponDiscountDesc',
-  props: {
-    coupon: {
-      type: Object as () => MallCouponTemplateApi.CouponTemplate,
-      required: true,
-    },
-  },
-  setup(props) {
-    const coupon = props.coupon as MallCouponTemplateApi.CouponTemplate;
-    // 使用条件
-    const useCondition =
-      coupon.usePrice > 0 ? `满${floatToFixed2(coupon.usePrice)}元，` : '';
-    // 优惠描述
-    const discountDesc =
-      coupon.discountType === PromotionDiscountTypeEnum.PRICE.type
-        ? `减${floatToFixed2(coupon.discountPrice)}元`
-        : `打${coupon.discountPercent / 10}折`;
-    return () => (
-      <div>
-        <span>{useCondition}</span>
-        <span>{discountDesc}</span>
-      </div>
-    );
-  },
-});
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/coupon-discount.tsx b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/coupon-discount.tsx
deleted file mode 100644
index 9f0c7f5b4..000000000
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/coupon-discount.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import type { MallCouponTemplateApi } from '#/api/mall/promotion/coupon/couponTemplate';
-
-import { defineComponent } from 'vue';
-
-import { PromotionDiscountTypeEnum } from '@vben/constants';
-import { floatToFixed2 } from '@vben/utils';
-
-// 优惠值
-export const CouponDiscount = defineComponent({
-  name: 'CouponDiscount',
-  props: {
-    coupon: {
-      type: Object as () => MallCouponTemplateApi.CouponTemplate,
-      required: true,
-    },
-  },
-  setup(props) {
-    const coupon = props.coupon as MallCouponTemplateApi.CouponTemplate;
-    // 折扣
-    let value = `${coupon.discountPercent / 10}`;
-    let suffix = ' 折';
-    // 满减
-    if (coupon.discountType === PromotionDiscountTypeEnum.PRICE.type) {
-      value = floatToFixed2(coupon.discountPrice);
-      suffix = ' 元';
-    }
-    return () => (
-      <div>
-        <span class={'text-20px font-bold'}>{value}</span>
-        <span>{suffix}</span>
-      </div>
-    );
-  },
-});
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/coupon-validTerm.tsx b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/coupon-validTerm.tsx
deleted file mode 100644
index 7b2e373b2..000000000
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/coupon-validTerm.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import type { MallCouponTemplateApi } from '#/api/mall/promotion/coupon/couponTemplate';
-
-import { defineComponent } from 'vue';
-
-import { CouponTemplateValidityTypeEnum } from '@vben/constants';
-import { formatDate } from '@vben/utils';
-
-// 有效期
-export const CouponValidTerm = defineComponent({
-  name: 'CouponValidTerm',
-  props: {
-    coupon: {
-      type: Object as () => MallCouponTemplateApi.CouponTemplate,
-      required: true,
-    },
-  },
-  setup(props) {
-    const coupon = props.coupon as MallCouponTemplateApi.CouponTemplate;
-    const text =
-      coupon.validityType === CouponTemplateValidityTypeEnum.DATE.type
-        ? `有效期：${formatDate(coupon.validStartTime, 'YYYY-MM-DD')} 至 ${formatDate(
-            coupon.validEndTime,
-            'YYYY-MM-DD',
-          )}`
-        : `领取后第 ${coupon.fixedStartTerm} - ${coupon.fixedEndTerm} 天内可用`;
-    return () => <div>{text}</div>;
-  },
-});
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/index.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/index.vue
index eb5fbb1a2..5f6bcbb32 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/index.vue
@@ -15,12 +15,19 @@ import {
   CouponValidTerm,
 } from './component';
 
-/** 商品卡片 */
+/** 优惠劵卡片 */
 defineOptions({ name: 'CouponCard' });
-// 定义属性
+
+/** 定义属性 */
 const props = defineProps<{ property: CouponCardProperty }>();
-// 商品列表
-const couponList = ref<MallCouponTemplateApi.CouponTemplate[]>([]);
+
+const couponList = ref<MallCouponTemplateApi.CouponTemplate[]>([]); // 优惠劵列表
+const phoneWidth = ref(375); // 手机宽度
+const containerRef = ref(); // 容器引用
+const scrollbarWidth = ref('100%'); // 滚动条宽度
+const couponWidth = ref(375); // 优惠券宽度
+
+/** 监听优惠券 ID 变化，加载优惠券列表 */
 watch(
   () => props.property.couponIds,
   async () => {
@@ -36,15 +43,7 @@ watch(
   },
 );
 
-// 手机宽度
-const phoneWidth = ref(375);
-// 容器
-const containerRef = ref();
-// 滚动条宽度
-const scrollbarWidth = ref('100%');
-// 优惠券的宽度
-const couponWidth = ref(375);
-// 计算布局参数
+/** 计算布局参数 */
 watch(
   () => [props.property, phoneWidth, couponList.value.length],
   () => {
@@ -60,8 +59,9 @@ watch(
   },
   { immediate: true, deep: true },
 );
+
+/** 初始化 */
 onMounted(() => {
-  // 提取手机宽度
   phoneWidth.value = containerRef.value?.wrapRef?.offsetWidth || 375;
 });
 </script>
@@ -86,17 +86,14 @@ onMounted(() => {
         v-for="(coupon, index) in couponList"
         :key="index"
       >
-        <!-- 布局1：1列-->
+        <!-- 布局 1：1 列-->
         <div
           v-if="property.columns === 1"
           class="ml-4 flex flex-row justify-between p-2"
         >
           <div class="flex flex-col justify-evenly gap-1">
-            <!-- 优惠值 -->
             <CouponDiscount :coupon="coupon" />
-            <!-- 优惠描述 -->
             <CouponDiscountDesc :coupon="coupon" />
-            <!-- 有效期 -->
             <CouponValidTerm :coupon="coupon" />
           </div>
           <div class="flex flex-col justify-evenly">
@@ -111,17 +108,14 @@ onMounted(() => {
             </div>
           </div>
         </div>
-        <!-- 布局2：2列-->
+        <!-- 布局 2：2 列-->
         <div
           v-else-if="property.columns === 2"
           class="ml-4 flex flex-row justify-between p-2"
         >
           <div class="flex flex-col justify-evenly gap-1">
-            <!-- 优惠值 -->
             <CouponDiscount :coupon="coupon" />
-            <!-- 优惠描述 -->
             <CouponDiscountDesc :coupon="coupon" />
-            <!-- 领取说明 -->
             <div v-if="coupon.totalCount >= 0">
               仅剩：{{ coupon.totalCount - coupon.takeCount }}张
             </div>
@@ -139,11 +133,9 @@ onMounted(() => {
             </div>
           </div>
         </div>
-        <!-- 布局3：3列-->
+        <!-- 布局 3：3 列-->
         <div v-else class="flex flex-col items-center justify-around gap-1 p-1">
-          <!-- 优惠值 -->
           <CouponDiscount :coupon="coupon" />
-          <!-- 优惠描述 -->
           <CouponDiscountDesc :coupon="coupon" />
           <div
             class="rounded-full px-2 py-0.5"
@@ -159,4 +151,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/coupon-card/property.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/property.vue
index 9778fdd62..d84038775 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/property.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/property.vue
@@ -5,6 +5,7 @@ import type { MallCouponTemplateApi } from '#/api/mall/promotion/coupon/couponTe
 
 import { ref, watch } from 'vue';
 
+import { useVbenModal } from '@vben/common-ui';
 import {
   CouponTemplateTakeTypeEnum,
   PromotionDiscountTypeEnum,
@@ -26,29 +27,40 @@ import {
 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';
-// TODO: 添加组件
-// import CouponSelect from '#/views/mall/promotion/coupon/components/coupon-select.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 couponSelectDialog = ref();
-// 添加优惠券
+const couponList = ref<MallCouponTemplateApi.CouponTemplate[]>([]); // 已选择的优惠券列表
+
+const [CouponSelectModal, couponSelectModalApi] = useVbenModal({
+  connectedComponent: CouponSelect,
+  destroyOnClose: true,
+});
+
+/** 添加优惠劵 */
 const handleAddCoupon = () => {
-  couponSelectDialog.value.open();
-};
-const handleCouponSelect = () => {
-  formData.value.couponIds = couponList.value.map((coupon) => coupon.id);
+  couponSelectModalApi.open();
 };
 
+/** 处理优惠劵选择 */
+const handleCouponSelect = (
+  selectedCoupons: MallCouponTemplateApi.CouponTemplate[],
+) => {
+  couponList.value = selectedCoupons;
+  formData.value.couponIds = selectedCoupons.map((coupon) => coupon.id);
+};
+
+/** 监听优惠券 ID 变化，加载优惠券列表 */
 watch(
   () => formData.value.couponIds,
   async () => {
@@ -151,13 +163,10 @@ watch(
       </ElCard>
     </ElForm>
   </ComponentContainerProperty>
+
   <!-- 优惠券选择 -->
-  <CouponSelect
-    ref="couponSelectDialog"
-    v-model:multiple-selection="couponList"
+  <CouponSelectModal
     :take-type="CouponTemplateTakeTypeEnum.USER.type"
-    @change="handleCouponSelect"
+    @success="handleCouponSelect"
   />
 </template>
-
-<style scoped lang="scss"></style>
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/Divider/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/divider/config.ts
similarity index 62%
rename from apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/Divider/config.ts
rename to apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/divider/config.ts
index 17e5a79bf..3ab6eef11 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/Divider/config.ts
+++ b/apps/web-ele/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-ele/src/views/mall/promotion/components/diy-editor/components/mobile/Divider/index.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/divider/index.vue
similarity index 94%
rename from apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/Divider/index.vue
rename to apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/divider/index.vue
index 1736db389..e07eda87e 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/Divider/index.vue
+++ b/apps/web-ele/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-ele/src/views/mall/promotion/components/diy-editor/components/mobile/Divider/property.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/divider/property.vue
similarity index 93%
rename from apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/Divider/property.vue
rename to apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/divider/property.vue
index 27df10576..4308e4ced 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/Divider/property.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/divider/property.vue
@@ -13,15 +13,15 @@ import {
   ElTooltip,
 } from 'element-plus';
 
-import { InputWithColor as ColorInput } from '#/views/mall/promotion/components';
+import { ColorInput } from '#/views/mall/promotion/components';
 
-// 导航栏属性面板
+/** 导航栏属性面板 */
 defineOptions({ name: 'DividerProperty' });
-const props = defineProps<{ modelValue: DividerProperty }>();
-const emit = defineEmits(['update:modelValue']);
-const formData = useVModel(props, 'modelValue', emit);
 
-// 线类型
+const props = defineProps<{ modelValue: DividerProperty }>();
+
+const emit = defineEmits(['update:modelValue']);
+
 const BORDER_TYPES = [
   {
     icon: 'vaadin:line-h',
@@ -43,7 +43,8 @@ const BORDER_TYPES = [
     text: '无',
     type: 'none',
   },
-];
+]; // 线类型
+const formData = useVModel(props, 'modelValue', emit);
 </script>
 
 <template>
@@ -96,11 +97,8 @@ const BORDER_TYPES = [
         </ElRadioGroup>
       </ElFormItem>
       <ElFormItem label="颜色">
-        <!-- 分割线颜色 -->
         <ColorInput v-model="formData.lineColor" />
       </ElFormItem>
     </template>
   </ElForm>
 </template>
-
-<style scoped lang="scss"></style>
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/floating-action-button/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/floating-action-button/config.ts
index 22b98581c..d93b1f462 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/floating-action-button/config.ts
+++ b/apps/web-ele/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-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 eb6563766..d0c2ae410 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
@@ -5,23 +5,20 @@ import { ref } from 'vue';
 
 import { IconifyIcon } from '@vben/icons';
 
-import { ElImage, ElMessage } from 'element-plus';
+import { ElButton, ElImage } from 'element-plus';
 
 /** 悬浮按钮 */
 defineOptions({ name: 'FloatingActionButton' });
-// 定义属性
+
+/** 定义属性 */
 defineProps<{ property: FloatingActionButtonProperty }>();
 
-// 是否展开
-const expanded = ref(false);
-// 处理展开/折叠
-const handleToggleFab = () => {
-  expanded.value = !expanded.value;
-};
+const expanded = ref(false); // 是否展开
 
-const handleActive = (index: number) => {
-  ElMessage.success(`点击了${index}`);
-};
+/** 处理展开/折叠 */
+function handleToggleFab() {
+  expanded.value = !expanded.value;
+}
 </script>
 <template>
   <div
@@ -38,7 +35,6 @@ const handleActive = (index: number) => {
         v-for="(item, index) in property.list"
         :key="index"
         class="flex flex-col items-center"
-        @click="handleActive(index)"
       >
         <ElImage :src="item.imgUrl" fit="contain" class="h-7 w-7">
           <template #error>
@@ -57,13 +53,13 @@ const handleActive = (index: number) => {
       </div>
     </template>
     <!-- todo: @owen 使用APP主题色 -->
-    <el-button type="primary" size="large" circle @click="handleToggleFab">
+    <ElButton type="primary" size="large" circle @click="handleToggleFab">
       <IconifyIcon
         icon="ep:plus"
         class="fab-icon"
         :class="[{ active: expanded }]"
       />
-    </el-button>
+    </ElButton>
   </div>
   <!-- 模态背景：展开时显示，点击后折叠 -->
   <div v-if="expanded" class="modal-bg" @click="handleToggleFab"></div>
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/floating-action-button/property.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/floating-action-button/property.vue
index d6b0eb40b..d589c86c1 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/floating-action-button/property.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/floating-action-button/property.vue
@@ -18,11 +18,13 @@ import {
   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>
 
@@ -64,5 +66,3 @@ const formData = useVModel(props, 'modelValue', emit);
     </ElCard>
   </ElForm>
 </template>
-
-<style scoped lang="scss"></style>
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/components/hot-zone-edit-dialog/controller.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/components/hot-zone-edit-dialog/controller.ts
index 2bac4c39e..b4000eccc 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/components/hot-zone-edit-dialog/controller.ts
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/components/hot-zone-edit-dialog/controller.ts
@@ -2,10 +2,9 @@ import type { StyleValue } from 'vue';
 
 import type { HotZoneItemProperty } from '../../config';
 
-// 热区的最小宽高
-export const HOT_ZONE_MIN_SIZE = 100;
+export const HOT_ZONE_MIN_SIZE = 100; // 热区的最小宽高
 
-// 控制的类型
+/** 控制的类型 */
 export enum CONTROL_TYPE_ENUM {
   LEFT,
   TOP,
@@ -13,14 +12,14 @@ export enum CONTROL_TYPE_ENUM {
   HEIGHT,
 }
 
-// 定义热区的控制点
+/** 定义热区的控制点 */
 export interface ControlDot {
   position: string;
   types: CONTROL_TYPE_ENUM[];
   style: StyleValue;
 }
 
-// 热区的8个控制点
+/** 热区的 8 个控制点 */
 export const CONTROL_DOT_LIST = [
   {
     position: '左上角',
@@ -98,10 +97,10 @@ export const CONTROL_DOT_LIST = [
 ] as ControlDot[];
 
 // region 热区的缩放
-// 热区的缩放比例
-export const HOT_ZONE_SCALE_RATE = 2;
-// 缩小：缩回适合手机屏幕的大小
-export const zoomOut = (list?: HotZoneItemProperty[]) => {
+export const HOT_ZONE_SCALE_RATE = 2; // 热区的缩放比例
+
+/** 缩小：缩回适合手机屏幕的大小 */
+export function zoomOut(list?: HotZoneItemProperty[]) {
   return (
     list?.map((hotZone) => ({
       ...hotZone,
@@ -111,9 +110,10 @@ export const zoomOut = (list?: HotZoneItemProperty[]) => {
       height: (hotZone.height /= HOT_ZONE_SCALE_RATE),
     })) || []
   );
-};
-// 放大：作用是为了方便在电脑屏幕上编辑
-export const zoomIn = (list?: HotZoneItemProperty[]) => {
+}
+
+/** 放大：作用是为了方便在电脑屏幕上编辑 */
+export function zoomIn(list?: HotZoneItemProperty[]) {
   return (
     list?.map((hotZone) => ({
       ...hotZone,
@@ -123,7 +123,8 @@ export const zoomIn = (list?: HotZoneItemProperty[]) => {
       height: (hotZone.height *= HOT_ZONE_SCALE_RATE),
     })) || []
   );
-};
+}
+
 // endregion
 
 /**
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 f59459a3f..c232854eb 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
@@ -6,9 +6,12 @@ import type { AppLink } from '#/views/mall/promotion/components/app-link-input/d
 
 import { ref } from 'vue';
 
+import { useVbenModal } from '@vben/common-ui';
 import { IconifyIcon } from '@vben/icons';
 
-import { ElButton, ElDialog, ElImage } from 'element-plus';
+import { ElButton, ElImage } from 'element-plus';
+
+import { AppLinkSelectDialog } from '#/views/mall/promotion/components';
 
 import {
   CONTROL_DOT_LIST,
@@ -22,7 +25,7 @@ import {
 /** 热区编辑对话框 */
 defineOptions({ name: 'HotZoneEditDialog' });
 
-// 定义属性
+/** 定义属性 */
 const props = defineProps({
   modelValue: {
     type: Array<HotZoneItemProperty>,
@@ -33,51 +36,60 @@ const props = defineProps({
     default: '',
   },
 });
+
 const emit = defineEmits(['update:modelValue']);
+
 const formData = ref<HotZoneItemProperty[]>([]);
 
-// 弹窗的是否显示
-const dialogVisible = ref(false);
-// 打开弹窗
-const open = () => {
+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);
-  dialogVisible.value = true;
-};
-// 提供 open 方法，用于打开弹窗
-defineExpose({ open });
+  modalApi.open();
+}
 
-// 热区容器
-const container = ref<HTMLDivElement>();
+defineExpose({ open }); // 提供 open 方法，用于打开弹窗
 
-// 增加热区
-const handleAdd = () => {
+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);
-};
-// 删除热区
-const handleRemove = (hotZone: HotZoneItemProperty) => {
-  formData.value = formData.value.filter((item) => item !== hotZone);
-};
+}
 
-// 移动热区
-const handleMove = (item: HotZoneItemProperty, e: MouseEvent) => {
+/** 删除热区 */
+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);
   });
-};
+}
 
-// 调整热区大小、位置
-const handleResize = (
+/** 调整热区大小、位置 */
+function handleResize(
   item: HotZoneItemProperty,
   ctrlDot: ControlDot,
   e: MouseEvent,
-) => {
+) {
   useDraggable(item, e, (left, top, width, height, moveWidth, moveHeight) => {
     ctrlDot.types.forEach((type) => {
       switch (type) {
@@ -112,23 +124,25 @@ const handleResize = (
       }
     });
   });
-};
+}
 
-// 设置X轴坐标
-const setLeft = (item: HotZoneItemProperty, left: number) => {
+/** 设置 X 轴坐标 */
+function setLeft(item: HotZoneItemProperty, left: number) {
   // 不能超出容器
   if (left >= 0 && left <= container.value!.offsetWidth - item.width) {
     item.left = left;
   }
-};
-// 设置Y轴坐标
-const setTop = (item: HotZoneItemProperty, top: number) => {
+}
+
+/** 设置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 (
@@ -138,7 +152,8 @@ const setWidth = (item: HotZoneItemProperty, width: number) => {
     item.width = width;
   }
 };
-// 设置高度
+
+/** 设置高度 */
 const setHeight = (item: HotZoneItemProperty, height: number) => {
   // 不能小于最小高度 && 不能超出容器底部
   if (
@@ -149,39 +164,27 @@ const setHeight = (item: HotZoneItemProperty, height: number) => {
   }
 };
 
-// 处理对话框关闭
-const handleSubmit = () => {
-  // 会自动触发handleClose
-  dialogVisible.value = false;
-};
-
-// 处理对话框关闭
-const handleClose = () => {
-  // 缩小
-  const list = zoomOut(formData.value);
-  emit('update:modelValue', list);
-};
-
 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;
+  if (!appLink || !activeHotZone.value) {
+    return;
+  }
   activeHotZone.value.name = appLink.name;
   activeHotZone.value.url = appLink.path;
 };
 </script>
 
 <template>
-  <ElDialog
-    v-model="dialogVisible"
-    title="设置热区"
-    width="780"
-    @close="handleClose"
-  >
+  <Modal title="设置热区" class="w-[780px]">
     <div ref="container" class="w-750px relative h-full">
       <ElImage
         :src="imgUrl"
@@ -200,9 +203,9 @@ const handleAppLinkChange = (appLink: AppLink) => {
         @mousedown="handleMove(item, $event)"
         @dblclick="handleShowAppLinkDialog(item)"
       >
-        <span class="pointer-events-none select-none">{{
-          item.name || '双击选择链接'
-        }}</span>
+        <span class="pointer-events-none select-none">
+          {{ item.name || '双击选择链接' }}
+        </span>
         <IconifyIcon
           icon="ep:close"
           class="delete"
@@ -210,7 +213,7 @@ const handleAppLinkChange = (appLink: AppLink) => {
           @click="handleRemove(item)"
         />
 
-        <!-- 8个控制点 -->
+        <!-- 8 个控制点 -->
         <span
           class="ctrl-dot"
           v-for="(dot, dotIndex) in CONTROL_DOT_LIST"
@@ -220,17 +223,14 @@ const handleAppLinkChange = (appLink: AppLink) => {
         ></span>
       </div>
     </div>
-    <template #footer>
+    <template #prepend-footer>
       <ElButton @click="handleAdd" type="primary" plain>
         <IconifyIcon icon="ep:plus" class="mr-5px" />
         添加热区
       </ElButton>
-      <ElButton @click="handleSubmit" type="primary" plain>
-        <IconifyIcon icon="ep:check" class="mr-5px" />
-        确定
-      </ElButton>
     </template>
-  </ElDialog>
+  </Modal>
+
   <AppLinkSelectDialog
     ref="appLinkDialogRef"
     @app-link-change="handleAppLinkChange"
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/config.ts
index 464881740..9178ae0b5 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/config.ts
+++ b/apps/web-ele/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-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 dd36b550f..958d0749c 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
@@ -5,6 +5,7 @@ import { ElImage } from 'element-plus';
 
 /** 热区 */
 defineOptions({ name: 'HotZone' });
+
 const props = defineProps<{ property: HotZoneProperty }>();
 </script>
 
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 bb3ebb667..9702db917 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
@@ -15,12 +15,14 @@ import HotZoneEditDialog from './components/hot-zone-edit-dialog/index.vue';
 defineOptions({ name: 'HotZoneProperty' });
 
 const props = defineProps<{ modelValue: HotZoneProperty }>();
+
 const emit = defineEmits(['update:modelValue']);
+
 const formData = useVModel(props, 'modelValue', emit);
 
-// 热区编辑对话框
-const editDialogRef = ref();
-// 打开热区编辑对话框
+const editDialogRef = ref(); // 热区编辑对话框
+
+/** 打开热区编辑对话框 */
 const handleOpenEditDialog = () => {
   editDialogRef.value.open();
 };
@@ -49,6 +51,7 @@ const handleOpenEditDialog = () => {
       设置热区
     </ElButton>
   </ComponentContainerProperty>
+
   <!-- 热区编辑对话框 -->
   <HotZoneEditDialog
     ref="editDialogRef"
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/config.ts
index 0025ff4db..ade9ad597 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/config.ts
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/config.ts
@@ -2,15 +2,12 @@ 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: '图片展示',
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/index.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/index.vue
index 4562f7b32..08cf5ba34 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/index.vue
@@ -11,21 +11,11 @@ defineOptions({ name: 'ImageBar' });
 defineProps<{ property: ImageBarProperty }>();
 </script>
 <template>
-  <!-- 无图片 -->
   <div
     class="flex h-12 items-center justify-center bg-gray-300"
     v-if="!property.imgUrl"
   >
     <IconifyIcon icon="ep:picture" class="text-3xl text-gray-600" />
   </div>
-  <ElImage class="min-h-8" v-else :src="property.imgUrl" />
+  <ElImage v-else class="block w-full h-full" :src="property.imgUrl" />
 </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/image-bar/property.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/property.vue
index a379a8613..33da84290 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/property.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/property.vue
@@ -4,12 +4,12 @@ import type { ImageBarProperty } from './config';
 import { useVModel } from '@vueuse/core';
 import { ElForm, ElFormItem } from 'element-plus';
 
-import UploadImg from '#/components/upload/image-upload.vue';
+import { ImageUpload } from '#/components/upload/';
 import { AppLinkInput } from '#/views/mall/promotion/components';
 
 import ComponentContainerProperty from '../../component-container-property.vue';
 
-// 图片展示属性面板
+/** 图片展示属性面板 */
 defineOptions({ name: 'ImageBarProperty' });
 
 const props = defineProps<{ modelValue: ImageBarProperty }>();
@@ -21,7 +21,7 @@ const formData = useVModel(props, 'modelValue', emit);
   <ComponentContainerProperty v-model="formData.style">
     <ElForm label-width="80px" :model="formData">
       <ElFormItem label="上传图片" prop="imgUrl">
-        <UploadImg
+        <ImageUpload
           v-model="formData.imgUrl"
           draggable="false"
           height="80px"
@@ -30,7 +30,7 @@ const formData = useVModel(props, 'modelValue', emit);
           :show-description="false"
         >
           <template #tip> 建议宽度750 </template>
-        </UploadImg>
+        </ImageUpload>
       </ElFormItem>
       <ElFormItem label="链接" prop="url">
         <AppLinkInput v-model="formData.url" />
@@ -38,5 +38,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/magic-cube/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/config.ts
index ef03fc9a6..13b1c4721 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
@@ -2,39 +2,26 @@ 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; // 左
+  right: number; // 右
+  bottom: number; // 下
 }
 
-// 定义组件
+/** 定义组件 */
 export const component = {
   id: 'MagicCube',
   name: '广告魔方',
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/index.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/index.vue
index 5a3aa7e57..1965bde82 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/index.vue
@@ -9,9 +9,11 @@ import { ElImage } from 'element-plus';
 
 /** 广告魔方 */
 defineOptions({ name: 'MagicCube' });
+
 const props = defineProps<{ property: MagicCubeProperty }>();
-// 一个方块的大小
-const CUBE_SIZE = 93.75;
+
+const CUBE_SIZE = 93.75; // 一个方块的大小
+
 /**
  * 计算方块的行数
  * 行数用于计算魔方的总体高度，存在以下情况：
@@ -80,5 +82,3 @@ const rowCount = computed(() => {
     </div>
   </div>
 </template>
-
-<style scoped lang="scss"></style>
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/property.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/property.vue
index 1f23095c6..ddccd8d0f 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/property.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/property.vue
@@ -18,11 +18,14 @@ 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 selectedHotAreaIndex = ref(-1); // 选中的热区
+
+/** 处理热区被选中事件 */
 const handleHotAreaSelected = (_: any, index: number) => {
   selectedHotAreaIndex.value = index;
 };
@@ -30,7 +33,6 @@ const handleHotAreaSelected = (_: any, index: number) => {
 
 <template>
   <ComponentContainerProperty v-model="formData.style">
-    <!-- 表单 -->
     <ElForm label-width="80px" :model="formData" class="mt-2">
       <ElText tag="p"> 魔方设置 </ElText>
       <ElText type="info" size="small"> 每格尺寸187 * 187 </ElText>
@@ -89,5 +91,3 @@ const handleHotAreaSelected = (_: any, index: number) => {
     </ElForm>
   </ComponentContainerProperty>
 </template>
-
-<style scoped lang="scss"></style>
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..0a05a6c7b 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>
 
@@ -19,14 +20,14 @@ defineProps<{ property: MenuListProperty }>();
     >
       <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>
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..366723d88 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
@@ -22,7 +22,7 @@ import {
   MagicCubeEditor,
 } from '#/views/mall/promotion/components';
 
-// 导航栏属性面板
+/** 导航栏单元格属性面板 */
 defineOptions({ name: 'NavigationBarCellProperty' });
 
 const props = defineProps({
@@ -35,13 +35,19 @@ 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格式的数据
+/** 转换为 Rect 格式的数据：MagicCubeEditor 组件需要 Rect 格式的数据来渲染热区 */
 const rectList = computed<Rect[]>(() => {
   return cellList.value.map((cell) => ({
     left: cell.left,
@@ -53,18 +59,19 @@ const rectList = computed<Rect[]>(() => {
   }));
 });
 
-// 选中的热区
-const selectedHotAreaIndex = ref(0);
-const handleHotAreaSelected = (
+const selectedHotAreaIndex = ref(0); // 选中的热区
+
+/** 处理热区被选中事件 */
+function handleHotAreaSelected(
   cellValue: NavigationBarCellProperty,
   index: number,
-) => {
+) {
   selectedHotAreaIndex.value = index;
   if (!cellValue.type) {
     cellValue.type = 'text';
     cellValue.textColor = '#111111';
   }
-};
+}
 </script>
 
 <template>
@@ -141,5 +148,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..f898ce9e8 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,35 @@ 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; // 图片链接
+  placeholder: string; // 搜索框：提示文字
+  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..3460ee53e 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,
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/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..4be26abf4 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,9 +15,9 @@ import * as CombinationActivityApi from '#/api/mall/promotion/combination/combin
 
 /** 拼团卡片 */
 defineOptions({ name: 'PromotionCombination' });
-// 定义属性
+
 const props = defineProps<{ property: PromotionCombinationProperty }>();
-// 商品列表
+
 const spuList = ref<MallSpuApi.Spu[]>([]);
 const spuIdList = ref<number[]>([]);
 const combinationActivityList = ref<
@@ -30,7 +30,7 @@ watch(
     try {
       // 新添加的拼团组件，是没有活动ID的
       const activityIds = props.property.activityIds;
-      // 检查活动ID的有效性
+      // 检查活动 ID 的有效性
       if (Array.isArray(activityIds) && activityIds.length > 0) {
         // 获取拼团活动详情列表
         combinationActivityList.value =
@@ -70,28 +70,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 };
@@ -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..fe222be0b 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 { 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/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..aa7484d63 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,7 +5,7 @@ import { IconifyIcon } from '@vben/icons';
 
 import { ElImage } from 'element-plus';
 
-/** 页面底部导航栏 */
+/** 底部导航 */
 defineOptions({ name: 'TabBar' });
 
 defineProps<{ property: TabBarProperty }>();
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/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..e1cd58bc6 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,7 +7,8 @@ import { ElAvatar } from 'element-plus';
 
 /** 用户卡片 */
 defineOptions({ name: 'UserCard' });
-// 定义属性
+
+/** 定义属性 */
 defineProps<{ property: UserCardProperty }>();
 </script>
 <template>
@@ -30,6 +31,4 @@ defineProps<{ property: UserCardProperty }>();
       </span>
     </div>
   </div>
-</template>
-
-<style scoped lang="scss"></style>
+</template>
\ No newline at end of file
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/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-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..1c171b3eb 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,13 +5,12 @@ import { ElImage } from 'element-plus';
 
 /** 用户订单 */
 defineOptions({ name: 'UserOrder' });
-// 定义属性
+
+/** 定义属性 */
 defineProps<{ property: UserOrderProperty }>();
 </script>
 <template>
   <ElImage
     src="https://shopro.sheepjs.com/admin/static/images/shop/decorate/orderCardStyle.png"
   />
-</template>
-
-<style scoped lang="scss"></style>
+</template>
\ No newline at end of file
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-order/property.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-order/property.vue
index 48f0c0a41..2f9abe556 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>
+</template>
\ No newline at end of file
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..4eabad045 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,13 +5,12 @@ import { ElImage } from 'element-plus';
 
 /** 用户资产 */
 defineOptions({ name: 'UserWallet' });
-// 定义属性
+
+/** 定义属性 */
 defineProps<{ property: UserWalletProperty }>();
 </script>
 <template>
   <ElImage
     src="https://shopro.sheepjs.com/admin/static/images/shop/decorate/walletCardStyle.png"
   />
-</template>
-
-<style scoped lang="scss"></style>
+</template>
\ No newline at end of file
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-wallet/property.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/user-wallet/property.vue
index 5c01b828e..74b374535 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,11 +5,13 @@ 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>
 
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..c576d8f76 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>
 
@@ -58,6 +60,4 @@ const formData = useVModel(props, 'modelValue', emit);
       </ElFormItem>
     </ElForm>
   </ComponentContainerProperty>
-</template>
-
-<style scoped lang="scss"></style>
+</template>
\ No newline at end of file
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/index.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/index.vue
index 5afc427a9..8d3fda28b 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
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import type { DiyComponent, DiyComponentLibrary, PageConfig } from './util';
 
-import { inject, onMounted, ref, unref, watch } from 'vue';
+import { onMounted, ref, unref, watch } from 'vue';
 
-import { IFrame } from '@vben/common-ui';
+import { useVbenModal } from '@vben/common-ui';
 import { IconifyIcon } from '@vben/icons';
 import { cloneDeep, isEmpty, isString } from '@vben/utils';
 
@@ -12,13 +12,14 @@ import {
   ElAside,
   ElCard,
   ElContainer,
-  ElDialog,
   ElHeader,
+  ElImage,
   ElScrollbar,
   ElTag,
   ElText,
   ElTooltip,
 } from 'element-plus';
+import draggable from 'vuedraggable';
 
 import statusBarImg from '#/assets/imgs/diy/statusBar.png';
 
@@ -28,57 +29,48 @@ import { componentConfigs, components } from './components/mobile';
 import { component as NAVIGATION_BAR_COMPONENT } from './components/mobile/navigation-bar/config';
 import { component as PAGE_CONFIG_COMPONENT } from './components/mobile/page-config/config';
 import { component as TAB_BAR_COMPONENT } from './components/mobile/tab-bar/config';
+
 /** 页面装修详情页 */
 defineOptions({
   name: 'DiyPageDetail',
   components,
 });
-// 定义属性
+
+/** 定义属性 */
 const props = defineProps({
-  // 页面配置，支持Json字符串
-  modelValue: { type: [String, Object], required: true },
-  // 标题
-  title: { type: String, default: '' },
-  // 组件库
-  libs: { type: Array<DiyComponentLibrary>, default: () => [] },
-  // 是否显示顶部导航栏
-  showNavigationBar: { type: Boolean, default: true },
-  // 是否显示底部导航菜单
-  showTabBar: { type: Boolean, default: false },
-  // 是否显示页面配置
-  showPageConfig: { type: Boolean, default: true },
-  // 预览地址：提供了预览地址，才会显示预览按钮
-  previewUrl: { type: String, default: '' },
+  modelValue: { type: [String, Object], required: true }, // 页面配置，支持 Json 字符串
+  title: { type: String, default: '' }, // 标题
+  libs: { type: Array<DiyComponentLibrary>, default: () => [] }, // 组件库
+  showNavigationBar: { type: Boolean, default: true }, // 是否显示顶部导航栏
+  showTabBar: { type: Boolean, default: false }, // 是否显示底部导航菜单
+  showPageConfig: { type: Boolean, default: true }, // 是否显示页面配置
+  previewUrl: { type: String, default: '' }, // 预览地址：提供了预览地址，才会显示预览按钮
 });
-// 工具栏操作
-const emits = defineEmits(['reset', 'preview', 'save', 'update:modelValue']);
+
+const emits = defineEmits(['reset', 'save', 'update:modelValue']); // 工具栏操作
 
 const qrcode = useQRCode(props.previewUrl, {
   errorCorrectionLevel: 'H',
   margin: 4,
-});
+}); // 预览二维码
 
-// 左侧组件库
-const componentLibrary = ref();
-// 页面设置组件
+const componentLibrary = ref(); // 左侧组件库
 const pageConfigComponent = ref<DiyComponent<any>>(
   cloneDeep(PAGE_CONFIG_COMPONENT),
-);
-// 顶部导航栏
+); // 页面设置组件
 const navigationBarComponent = ref<DiyComponent<any>>(
   cloneDeep(NAVIGATION_BAR_COMPONENT),
-);
-// 底部导航菜单
-const tabBarComponent = ref<DiyComponent<any>>(cloneDeep(TAB_BAR_COMPONENT));
+); // 顶部导航栏
+const tabBarComponent = ref<DiyComponent<any>>(cloneDeep(TAB_BAR_COMPONENT)); // 底部导航菜单
 
-// 选中的组件，默认选中顶部导航栏
-const selectedComponent = ref<DiyComponent<any>>();
-// 选中的组件索引
-const selectedComponentIndex = ref<number>(-1);
-// 组件列表
-const pageComponents = ref<DiyComponent<any>[]>([]);
-// 监听传入的页面配置
-// 解析出 pageConfigComponent 页面整体的配置，navigationBarComponent、pageComponents、tabBarComponent 页面上、中、下的配置
+const selectedComponent = ref<DiyComponent<any>>(); // 选中的组件，默认选中顶部导航栏
+const selectedComponentIndex = ref<number>(-1); // 选中的组件索引
+const pageComponents = ref<DiyComponent<any>[]>([]); // 组件列表
+
+/**
+ * 监听传入的页面配置
+ * 解析出 pageConfigComponent 页面整体的配置，navigationBarComponent、pageComponents、tabBarComponent 页面上、中、下的配置
+ */
 watch(
   () => props.modelValue,
   () => {
@@ -86,16 +78,20 @@ watch(
       isString(props.modelValue) && !isEmpty(props.modelValue)
         ? (JSON.parse(props.modelValue) as PageConfig)
         : props.modelValue;
+    // 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) ||
       []
@@ -122,19 +118,20 @@ watch(
   { deep: true },
 );
 
-// 保存
-const handleSave = () => {
-  // 发送保存通知
+/** 保存 */
+function handleSave() {
+  // 发送保存通知，由外部保存
   emits('save');
-};
-// 监听配置修改
-const pageConfigChange = () => {
+}
+
+/** 监听配置修改 */
+function pageConfigChange() {
   const pageConfig = {
     page: pageConfigComponent.value.property,
     navigationBar: navigationBarComponent.value.property,
     tabBar: tabBarComponent.value.property,
     components: pageComponents.value.map((component) => {
-      // 只保留APP有用的字段
+      // 只保留 APP 有用的字段
       return { id: component.id, property: component.property };
     }),
   } as PageConfig;
@@ -146,7 +143,8 @@ const pageConfigChange = () => {
     ? JSON.stringify(pageConfig)
     : pageConfig;
   emits('update:modelValue', modelValue);
-};
+}
+
 watch(
   () => [
     pageConfigComponent.value.property,
@@ -159,15 +157,17 @@ watch(
   },
   { deep: true },
 );
-// 处理页面选中：显示属性表单
-const handlePageSelected = (event: any) => {
-  if (!props.showPageConfig) return;
 
+/** 处理页面选中：显示属性表单 */
+function handlePageSelected(event: any) {
+  if (!props.showPageConfig) {
+    return;
+  }
   // 配置了样式 page-prop-area 的元素，才显示页面设置
   if (event?.target?.classList?.contains('page-prop-area')) {
     handleComponentSelected(unref(pageConfigComponent));
   }
-};
+}
 
 /**
  * 选中组件
@@ -175,26 +175,26 @@ const handlePageSelected = (event: any) => {
  * @param component 组件
  * @param index 组件的索引
  */
-const handleComponentSelected = (
+function handleComponentSelected(
   component: DiyComponent<any>,
   index: number = -1,
-) => {
+) {
   selectedComponent.value = component;
   selectedComponentIndex.value = index;
-};
+}
 
-// 选中顶部导航栏
-const handleNavigationBarSelected = () => {
+/** 选中顶部导航栏 */
+function handleNavigationBarSelected() {
   handleComponentSelected(unref(navigationBarComponent));
-};
+}
 
-// 选中底部导航菜单
-const handleTabBarSelected = () => {
+/** 选中底部导航菜单 */
+function handleTabBarSelected() {
   handleComponentSelected(unref(tabBarComponent));
-};
+}
 
-// 组件变动（拖拽）
-const handleComponentChange = (dragEvent: any) => {
+/** 组件变动（拖拽） */
+function handleComponentChange(dragEvent: any) {
   // 新增，即从组件库拖拽添加组件
   if (dragEvent.added) {
     const { element, newIndex } = dragEvent.added;
@@ -205,41 +205,38 @@ const handleComponentChange = (dragEvent: any) => {
     // 保持选中
     selectedComponentIndex.value = newIndex;
   }
-};
+}
 
-// 交换组件
-const swapComponent = (oldIndex: number, newIndex: number) => {
+/** 交换组件 */
+function swapComponent(oldIndex: number, newIndex: number) {
   const temp = pageComponents.value[oldIndex]!;
   pageComponents.value[oldIndex] = pageComponents.value[newIndex]!;
   pageComponents.value[newIndex] = temp;
   // 保持选中
   selectedComponentIndex.value = newIndex;
-};
+}
 
 /** 移动组件（上移、下移） */
-const handleMoveComponent = (index: number, direction: number) => {
+function handleMoveComponent(index: number, direction: number) {
   const newIndex = index + direction;
-  if (newIndex < 0 || newIndex >= pageComponents.value.length) return;
-
+  if (newIndex < 0 || newIndex >= pageComponents.value.length) {
+    return;
+  }
   swapComponent(index, newIndex);
-};
+}
 
 /** 复制组件 */
-const handleCopyComponent = (index: number) => {
+function handleCopyComponent(index: number) {
   const component = pageComponents.value[index];
   if (component) {
     const clonedComponent = cloneDeep(component);
     clonedComponent.uid = Date.now();
     pageComponents.value.splice(index + 1, 0, clonedComponent);
   }
-};
+}
 
-/**
- * 删除组件
- * @param index 当前组件index
- */
-const handleDeleteComponent = (index: number) => {
-  // 删除组件
+/** 删除组件 */
+function handleDeleteComponent(index: number) {
   pageComponents.value.splice(index, 1);
   if (index < pageComponents.value.length) {
     // 1. 不是最后一个组件时，删除后选中下面的组件
@@ -259,25 +256,28 @@ const handleDeleteComponent = (index: number) => {
     // 3. 组件全部删除之后，显示页面设置
     handleComponentSelected(unref(pageConfigComponent));
   }
-};
+}
 
-// // 注入无感刷新页面函数
-// const reload = inject<() => void>('reload'); // TODO @芋艿：是 vue3 + element-plus 独有的，可以清理掉。
-// // 重置
-// const handleReset = () => {
-//   if (reload) reload();
-//   emits('reset');
-// };
+/** 重置 */
+function handleReset() {
+  emits('reset');
+}
 
-// 预览
-const previewDialogVisible = ref(false);
-const handlePreview = () => {
-  previewDialogVisible.value = true;
-  emits('preview');
-};
+const [PreviewModal, previewModalApi] = useVbenModal({
+  showConfirmButton: false,
+  showCancelButton: false,
+  onCancel() {
+    previewModalApi.close();
+  },
+});
 
-// 设置默认选中的组件
-const setDefaultSelectedComponent = () => {
+/** 预览 */
+function handlePreview() {
+  previewModalApi.open();
+}
+
+/** 设置默认选中的组件 */
+function setDefaultSelectedComponent() {
   if (props.showPageConfig) {
     selectedComponent.value = unref(pageConfigComponent);
   } else if (props.showNavigationBar) {
@@ -285,12 +285,14 @@ const setDefaultSelectedComponent = () => {
   } else if (props.showTabBar) {
     selectedComponent.value = unref(tabBarComponent);
   }
-};
+}
 
 watch(
   () => [props.showPageConfig, props.showNavigationBar, props.showTabBar],
   () => setDefaultSelectedComponent(),
 );
+
+/** 初始化 */
 onMounted(() => {
   setDefaultSelectedComponent();
 });
@@ -307,19 +309,19 @@ onMounted(() => {
           <span>{{ title }}</span>
         </div>
         <!-- 右侧操作区 -->
-        <div class="header-right">
-          <ElTooltip title="重置">
-            <ElButton @click="handleReset">
+        <div>
+          <ElTooltip content="重置">
+            <ElButton class="!m-0 !border-l !border-r-0" @click="handleReset">
               <IconifyIcon :size="24" icon="system-uicons:reset-alt" />
             </ElButton>
           </ElTooltip>
-          <ElTooltip v-if="previewUrl" title="预览">
-            <ElButton @click="handlePreview">
+          <ElTooltip v-if="previewUrl" content="预览">
+            <ElButton class="!m-0 !border-l !border-r-0" @click="handlePreview">
               <IconifyIcon :size="24" icon="ep:view" />
             </ElButton>
           </ElTooltip>
-          <ElTooltip title="保存">
-            <ElButton @click="handleSave">
+          <ElTooltip content="保存">
+            <ElButton class="!m-0 !border-l !border-r-0" @click="handleSave">
               <IconifyIcon :size="24" icon="ep:check" />
             </ElButton>
           </ElTooltip>
@@ -329,7 +331,7 @@ onMounted(() => {
       <!-- 中心区域 -->
       <ElContainer class="editor-container">
         <!-- 左侧：组件库（ComponentLibrary） -->
-        <ElAside width="200px" class="editor-left">
+        <ElAside width="261px" class="editor-left">
           <ComponentLibrary
             v-if="libs && libs.length > 0"
             ref="componentLibrary"
@@ -480,19 +482,18 @@ onMounted(() => {
     </ElContainer>
 
     <!-- 预览弹框 -->
-    <ElDialog 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"
-        />
+        ></iframe>
         <div class="flex flex-col">
           <ElText>手机扫码预览</ElText>
-          <img :src="qrcode" alt="qrcode" class="w-1/2" />
-          <!-- <Qrcode :text="previewUrl" logo="/logo.gif" /> -->
+          <ElImage :src="qrcode" alt="qrcode" />
         </div>
       </div>
-    </ElDialog>
+    </PreviewModal>
   </div>
 </template>
 <style lang="scss" scoped>
@@ -515,15 +516,6 @@ $phone-width: 375px;
     background-color: var(--el-bg-color);
     border-bottom: solid 1px var(--el-border-color);
 
-    /* 工具栏：右侧按钮 */
-    .header-right {
-      height: 100%;
-
-      .el-button {
-        height: 100%;
-      }
-    }
-
     /* 隐藏工具栏按钮的边框 */
     :deep(.el-radio-button__inner),
     :deep(.el-button) {
@@ -549,7 +541,7 @@ $phone-width: 375px;
       }
 
       /* 属性面板分组 */
-      :deep(.property-group) {
+      .property-group {
         margin: 0 -20px;
 
         &.el-card {
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/util.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/util.ts
index 3666a4711..a8f33d2fa 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/util.ts
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/util.ts
@@ -2,37 +2,29 @@ import type { NavigationBarProperty } from './components/mobile/navigation-bar/c
 import type { PageConfigProperty } from './components/mobile/page-config/config';
 import type { TabBarProperty } from './components/mobile/tab-bar/config';
 
-// 页面装修组件
+/** 页面装修组件 */
 export interface DiyComponent<T> {
-  // 用于区分同一种组件的不同实例
-  uid?: number;
-  // 组件唯一标识
-  id: string;
-  // 组件名称
-  name: string;
-  // 组件图标
-  icon: string;
+  uid?: number; // 用于区分同一种组件的不同实例
+  id: string; // 组件唯一标识
+  name: string; // 组件名称
+  icon: string; // 组件图标
   /*
    组件位置：
-   top: 固定于手机顶部，例如 顶部的导航栏
-   bottom: 固定于手机底部，例如 底部的菜单导航栏
-   center: 位于手机中心，每个组件占一行，顺序向下排列
-   空：同center
-   fixed: 由组件自己决定位置，如弹窗位于手机中心、浮动按钮一般位于手机右下角
+    top: 固定于手机顶部，例如 顶部的导航栏
+    bottom: 固定于手机底部，例如 底部的菜单导航栏
+    center: 位于手机中心，每个组件占一行，顺序向下排列
+    空：同 center
+    fixed: 由组件自己决定位置，如弹窗位于手机中心、浮动按钮一般位于手机右下角
   */
   position?: '' | 'bottom' | 'center' | 'fixed' | 'top';
-  // 组件属性
-  property: T;
+  property: T; // 组件属性
 }
 
-// 页面装修组件库
+/** 页面装修组件库 */
 export interface DiyComponentLibrary {
-  // 组件库名称
-  name: string;
-  // 是否展开
-  extended: boolean;
-  // 组件列表
-  components: string[];
+  name: string; // 组件库名称
+  extended: boolean; // 是否展开
+  components: string[]; // 组件列表
 }
 
 // 组件样式
@@ -63,21 +55,18 @@ export interface ComponentStyle {
   borderBottomLeftRadius: number;
 }
 
-// 页面配置
+/** 页面配置 */
 export interface PageConfig {
-  // 页面属性
-  page: PageConfigProperty;
-  // 顶部导航栏属性
-  navigationBar: NavigationBarProperty;
-  // 底部导航菜单属性
-  tabBar?: TabBarProperty;
-  // 页面组件列表
-  components: PageComponent[];
-}
-// 页面组件，只保留组件ID，组件属性
-export type PageComponent = Pick<DiyComponent<any>, 'id' | 'property'>;
+  page: PageConfigProperty; // 页面属性
+  navigationBar: NavigationBarProperty; // 顶部导航栏属性
+  tabBar?: TabBarProperty; // 底部导航菜单属性
 
-// 页面组件库
+  components: PageComponent[]; // 页面组件列表
+}
+
+export type PageComponent = Pick<DiyComponent<any>, 'id' | 'property'>; // 页面组件，只保留组件 ID，组件属性
+
+/** 页面组件库 */
 export const PAGE_LIBS = [
   {
     name: '基础组件',
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/index.ts b/apps/web-ele/src/views/mall/promotion/components/index.ts
index a088806e2..6dbe001fe 100644
--- a/apps/web-ele/src/views/mall/promotion/components/index.ts
+++ b/apps/web-ele/src/views/mall/promotion/components/index.ts
@@ -1,4 +1,5 @@
 export { default as AppLinkInput } from './app-link-input/index.vue';
+export { default as AppLinkSelectDialog } from './app-link-input/select-dialog.vue';
 export { default as ColorInput } from './color-input/index.vue';
 export { default as DiyEditor } from './diy-editor/index.vue';
 export { type DiyComponentLibrary, PAGE_LIBS } from './diy-editor/util';
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 d260ded9c..b985a8142 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
@@ -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' });
 
 /** 定义属性 */
@@ -29,12 +29,10 @@ const props = defineProps({
     type: Number,
     default: 4,
   }, // 行数，默认 4 行
-
   cols: {
     type: Number,
     default: 4,
   }, // 列数，默认 4 列
-
   cubeSize: {
     type: Number,
     default: 75,
@@ -70,6 +68,7 @@ watch(
 );
 
 const hotAreas = ref<Rect[]>([]); // 热区列表
+
 /** 初始化热区 */
 watch(
   () => props.modelValue,
@@ -86,20 +85,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 +110,7 @@ const handleCubeClick = (currentRow: number, currentCol: number) => {
   }
   // 发送热区变动通知
   emitUpdateModelValue();
-};
+}
 
 /**
  * 处理鼠标经过方块
@@ -119,7 +118,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 +137,6 @@ const handleCellHover = (currentRow: number, currentCol: number) => {
     if (isOverlap(hotArea, currentSelectedArea)) {
       // 结束热区选择模式
       exitHotAreaSelectMode();
-
       return;
     }
   }
@@ -147,13 +145,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,14 +159,14 @@ 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);
-};
+}
 
-/**
- * 结束热区选择模式
- */
+/** 结束热区选择模式 */
 function exitHotAreaSelectMode() {
   // 移除方块激活标记
   eachCube((_, __, cube) => {
@@ -246,9 +240,9 @@ const eachCube = (callback: (x: number, y: number, cube: Cube) => void) => {
         >
           <IconifyIcon icon="ep:circle-close-filled" />
         </div>
-        <span v-if="hotArea.width">{{
-          `${hotArea.width}×${hotArea.height}`
-        }}</span>
+        <span v-if="hotArea.width">
+          {{ `${hotArea.width}×${hotArea.height}` }}
+        </span>
       </div>
     </table>
   </div>
@@ -265,6 +259,11 @@ const eachCube = (callback: (x: number, y: number, cube: Cube) => void) => {
     text-align: center;
     cursor: pointer;
     border: 1px solid var(--el-border-color);
+    line-height: 1;
+
+    :deep(.iconify) {
+      display: inline-block;
+    }
 
     &.active {
       background: var(--el-color-primary-light-9);
diff --git a/apps/web-ele/src/views/mall/promotion/components/magic-cube-editor/util.ts b/apps/web-ele/src/views/mall/promotion/components/magic-cube-editor/util.ts
index 1ee8fb5a4..6e3eb7cd2 100644
--- a/apps/web-ele/src/views/mall/promotion/components/magic-cube-editor/util.ts
+++ b/apps/web-ele/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-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..d900eab41 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,9 +9,9 @@ defineOptions({ name: 'VerticalButtonGroup' });
 </script>
 
 <template>
-  <el-button-group v-bind="$attrs">
+  <ElButtonGroup v-bind="$attrs">
     <slot></slot>
-  </el-button-group>
+  </ElButtonGroup>
 </template>
 
 <style scoped lang="scss">
diff --git a/apps/web-ele/src/views/mall/promotion/coupon/components/index.ts b/apps/web-ele/src/views/mall/promotion/coupon/components/index.ts
index 00a6c3f32..24cb4e274 100644
--- a/apps/web-ele/src/views/mall/promotion/coupon/components/index.ts
+++ b/apps/web-ele/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-ele/src/views/mall/promotion/coupon/components/select-data.ts b/apps/web-ele/src/views/mall/promotion/coupon/components/select-data.ts
new file mode 100644
index 000000000..bf7c993e3
--- /dev/null
+++ b/apps/web-ele/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: '请输入优惠劵名',
+        clearable: true,
+      },
+    },
+    {
+      fieldName: 'discountType',
+      label: '优惠类型',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.PROMOTION_DISCOUNT_TYPE, 'number'),
+        placeholder: '请选择优惠券类型',
+        clearable: 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-ele/src/views/mall/promotion/coupon/components/select.vue b/apps/web-ele/src/views/mall/promotion/coupon/components/select.vue
new file mode 100644
index 000000000..8d75c2388
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/coupon/components/select.vue
@@ -0,0 +1,69 @@
+<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 * as CouponTemplateApi 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 CouponTemplateApi.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-3/5">
+    <Grid />
+  </Modal>
+</template>
+
diff --git a/apps/web-ele/src/views/mall/promotion/coupon/components/data.ts b/apps/web-ele/src/views/mall/promotion/coupon/components/send-form-data.ts
similarity index 100%
rename from apps/web-ele/src/views/mall/promotion/coupon/components/data.ts
rename to apps/web-ele/src/views/mall/promotion/coupon/components/send-form-data.ts
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 83e989227..9a8c4b192 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 './data';
+import { useFormSchema, useGridColumns } from './send-form-data.ts';
 
 /** 发送优惠券 */
 async function handleSendCoupon(row: MallCouponTemplateApi.CouponTemplate) {
diff --git a/apps/web-ele/src/views/mall/promotion/diy/page/decorate/index.vue b/apps/web-ele/src/views/mall/promotion/diy/page/decorate/index.vue
index a15e3b99c..2dddd5941 100644
--- a/apps/web-ele/src/views/mall/promotion/diy/page/decorate/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/diy/page/decorate/index.vue
@@ -6,7 +6,10 @@ import { useRoute } from 'vue-router';
 
 import { ElLoading, ElMessage } from 'element-plus';
 
-import * as DiyPageApi from '#/api/mall/promotion/diy/page';
+import {
+  getDiyPageProperty,
+  updateDiyPageProperty,
+} from '#/api/mall/promotion/diy/page';
 import { DiyEditor, PAGE_LIBS } from '#/views/mall/promotion/components';
 
 /** 装修页面表单 */
@@ -22,7 +25,7 @@ async function getPageDetail(id: any) {
     text: '加载中...',
   });
   try {
-    formData.value = await DiyPageApi.getDiyPageProperty(id);
+    formData.value = await getDiyPageProperty(id);
   } finally {
     loadingInstance.close();
   }
@@ -34,7 +37,7 @@ async function submitForm() {
     text: '保存中...',
   });
   try {
-    await DiyPageApi.updateDiyPageProperty(unref(formData)!);
+    await updateDiyPageProperty(unref(formData)!);
     ElMessage.success('保存成功');
   } finally {
     loadingInstance.close();
diff --git a/apps/web-ele/src/views/mall/statistics/member/index.vue b/apps/web-ele/src/views/mall/statistics/member/index.vue
index 8b99dbde2..5a1a9221a 100644
--- a/apps/web-ele/src/views/mall/statistics/member/index.vue
+++ b/apps/web-ele/src/views/mall/statistics/member/index.vue
@@ -8,7 +8,7 @@ import { fenToYuan } from '@vben/utils';
 
 import { ElCol, ElRow } from 'element-plus';
 
-import * as MemberStatisticsApi from '#/api/mall/statistics/member';
+import { getMemberSummary } from '#/api/mall/statistics/member';
 
 import MemberAreaCard from './modules/area-card.vue';
 import MemberFunnelCard from './modules/funnel-card.vue';
@@ -22,15 +22,15 @@ const loading = ref(true); // 加载中
 const summary = ref<MallMemberStatisticsApi.Summary>(); // 会员统计数据
 
 /** 查询会员统计 */
-async function getMemberSummary() {
-  summary.value = await MemberStatisticsApi.getMemberSummary();
+async function loadMemberSummary() {
+  summary.value = await getMemberSummary();
 }
 
 /** 初始化 */
 onMounted(async () => {
   loading.value = true;
   try {
-    await getMemberSummary();
+    await loadMemberSummary();
   } finally {
     loading.value = false;
   }
diff --git a/apps/web-ele/src/views/mall/statistics/member/modules/area-card.vue b/apps/web-ele/src/views/mall/statistics/member/modules/area-card.vue
index 43d41aac7..9e2c820ed 100644
--- a/apps/web-ele/src/views/mall/statistics/member/modules/area-card.vue
+++ b/apps/web-ele/src/views/mall/statistics/member/modules/area-card.vue
@@ -10,7 +10,7 @@ import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
 import { ElCard } from 'element-plus';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
-import * as MemberStatisticsApi from '#/api/mall/statistics/member';
+import { getMemberAreaStatisticsList } from '#/api/mall/statistics/member';
 
 import { getAreaChartOptions, getAreaTableColumns } from './area-chart-options';
 
@@ -44,10 +44,10 @@ const [Grid, gridApi] = useVbenVxeGrid({
 });
 
 /** 按照省份，查询会员统计列表 */
-async function getMemberAreaStatisticsList() {
+async function loadMemberAreaStatisticsList() {
   loading.value = true;
   try {
-    const list = await MemberStatisticsApi.getMemberAreaStatisticsList();
+    const list = await getMemberAreaStatisticsList();
     areaStatisticsList.value = list.map(
       (item: MallMemberStatisticsApi.AreaStatistics) => ({
         ...item,
@@ -80,7 +80,7 @@ function areaReplace(areaName: string): string {
 
 /** 初始化 */
 onMounted(() => {
-  getMemberAreaStatisticsList();
+  loadMemberAreaStatisticsList();
 });
 </script>
 
diff --git a/apps/web-ele/src/views/mall/statistics/member/modules/funnel-card.vue b/apps/web-ele/src/views/mall/statistics/member/modules/funnel-card.vue
index e2d3252e2..845fd8502 100644
--- a/apps/web-ele/src/views/mall/statistics/member/modules/funnel-card.vue
+++ b/apps/web-ele/src/views/mall/statistics/member/modules/funnel-card.vue
@@ -7,7 +7,7 @@ import { fenToYuan } from '@vben/utils';
 
 import { ElCard } from 'element-plus';
 
-import * as MemberStatisticsApi from '#/api/mall/statistics/member';
+import { getMemberAnalyse } from '#/api/mall/statistics/member';
 import { ShortcutDateRangePicker } from '#/components/shortcut-date-range-picker';
 
 /** 会员概览卡片 */
@@ -23,7 +23,7 @@ async function loadData(times: [Dayjs, Dayjs]) {
   }
   loading.value = true;
   try {
-    analyseData.value = await MemberStatisticsApi.getMemberAnalyse({
+    analyseData.value = await getMemberAnalyse({
       times,
     });
   } finally {
diff --git a/apps/web-ele/src/views/mall/statistics/member/modules/sex-card.vue b/apps/web-ele/src/views/mall/statistics/member/modules/sex-card.vue
index 54a254dee..a41d8b469 100644
--- a/apps/web-ele/src/views/mall/statistics/member/modules/sex-card.vue
+++ b/apps/web-ele/src/views/mall/statistics/member/modules/sex-card.vue
@@ -11,7 +11,7 @@ import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
 
 import { ElCard } from 'element-plus';
 
-import * as MemberStatisticsApi from '#/api/mall/statistics/member';
+import { getMemberSexStatisticsList } from '#/api/mall/statistics/member';
 
 import { getSexChartOptions } from './sex-chart-options';
 
@@ -23,10 +23,10 @@ const chartRef = ref<EchartsUIType>();
 const { renderEcharts } = useEcharts(chartRef);
 
 /** 按照性别，查询会员统计列表 */
-async function getMemberSexStatisticsList() {
+async function loadMemberSexStatisticsList() {
   loading.value = true;
   try {
-    const list = await MemberStatisticsApi.getMemberSexStatisticsList();
+    const list = await getMemberSexStatisticsList();
     const dictDataList = getDictOptions(DICT_TYPE.SYSTEM_USER_SEX, 'number');
     dictDataList.push({ label: '未知', value: null } as any);
     const chartData = dictDataList.map((dictData: any) => {
@@ -49,7 +49,7 @@ async function getMemberSexStatisticsList() {
 
 /** 初始化 */
 onMounted(() => {
-  getMemberSexStatisticsList();
+  loadMemberSexStatisticsList();
 });
 </script>
 
diff --git a/apps/web-ele/src/views/mall/statistics/member/modules/terminal-card.vue b/apps/web-ele/src/views/mall/statistics/member/modules/terminal-card.vue
index 624dcf25c..50c088c19 100644
--- a/apps/web-ele/src/views/mall/statistics/member/modules/terminal-card.vue
+++ b/apps/web-ele/src/views/mall/statistics/member/modules/terminal-card.vue
@@ -8,7 +8,7 @@ import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
 
 import { ElCard } from 'element-plus';
 
-import * as MemberStatisticsApi from '#/api/mall/statistics/member';
+import { getMemberTerminalStatisticsList } from '#/api/mall/statistics/member';
 
 import { getTerminalChartOptions } from './terminal-chart-options';
 
@@ -20,10 +20,10 @@ const chartRef = ref<EchartsUIType>();
 const { renderEcharts } = useEcharts(chartRef);
 
 /** 按照终端，查询会员统计列表 */
-const getMemberTerminalStatisticsList = async () => {
+const loadMemberTerminalStatisticsList = async () => {
   loading.value = true;
   try {
-    const list = await MemberStatisticsApi.getMemberTerminalStatisticsList();
+    const list = await getMemberTerminalStatisticsList();
     const dictDataList = getDictOptions('terminal', 'number');
     const chartData = dictDataList.map((dictData: any) => {
       const userCount = list.find(
@@ -43,7 +43,7 @@ const getMemberTerminalStatisticsList = async () => {
 
 /** 初始化 */
 onMounted(() => {
-  getMemberTerminalStatisticsList();
+  loadMemberTerminalStatisticsList();
 });
 </script>
 
diff --git a/apps/web-ele/src/views/mall/statistics/product/modules/rank-card.vue b/apps/web-ele/src/views/mall/statistics/product/modules/rank-card.vue
index 2c6fbca6a..0a7e34e74 100644
--- a/apps/web-ele/src/views/mall/statistics/product/modules/rank-card.vue
+++ b/apps/web-ele/src/views/mall/statistics/product/modules/rank-card.vue
@@ -11,7 +11,7 @@ import { formatDateTime } from '@vben/utils';
 import { ElCard } from 'element-plus';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
-import * as ProductStatisticsApi from '#/api/mall/statistics/product';
+import { getProductStatisticsRankPage } from '#/api/mall/statistics/product';
 import ShortcutDateRangePicker from '#/components/shortcut-date-range-picker/shortcut-date-range-picker.vue';
 
 /** 商品排行 */
@@ -104,7 +104,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     proxyConfig: {
       ajax: {
         query: async ({ page, sorts }) => {
-          return await ProductStatisticsApi.getProductStatisticsRankPage({
+          return await getProductStatisticsRankPage({
             pageNo: page.currentPage,
             pageSize: page.pageSize,
             times: searchTimes.value.length > 0 ? searchTimes.value : undefined,
diff --git a/apps/web-ele/src/views/mall/statistics/product/modules/summary-card.vue b/apps/web-ele/src/views/mall/statistics/product/modules/summary-card.vue
index 38b174e81..156aace69 100644
--- a/apps/web-ele/src/views/mall/statistics/product/modules/summary-card.vue
+++ b/apps/web-ele/src/views/mall/statistics/product/modules/summary-card.vue
@@ -21,8 +21,13 @@ import {
 import dayjs from 'dayjs';
 import { ElButton, ElCard, ElCol, ElRow } from 'element-plus';
 
-import * as ProductStatisticsApi from '#/api/mall/statistics/product';
+import {
+  exportProductStatisticsExcel,
+  getProductStatisticsAnalyse,
+  getProductStatisticsList,
+} from '#/api/mall/statistics/product';
 import ShortcutDateRangePicker from '#/components/shortcut-date-range-picker/shortcut-date-range-picker.vue';
+import { $t } from '#/locales';
 
 import { getProductSummaryChartOptions } from './summary-chart-options';
 
@@ -51,7 +56,7 @@ const calculateRelativeRate = (value?: number, reference?: number): string => {
 /** 处理日期范围变化 */
 const handleDateRangeChange = (times?: [Dayjs, Dayjs]) => {
   if (times?.length !== 2) {
-    getProductTrendData();
+    loadProductTrendData();
     return;
   }
   // 处理时间: 开始与截止在同一天的, 折线图出不来, 需要延长一天
@@ -65,29 +70,29 @@ const handleDateRangeChange = (times?: [Dayjs, Dayjs]) => {
   ];
 
   // 查询数据
-  getProductTrendData();
+  loadProductTrendData();
 };
 
 /** 处理商品状况查询 */
-const getProductTrendData = async () => {
+const loadProductTrendData = async () => {
   trendLoading.value = true;
   try {
-    await Promise.all([getProductTrendSummary(), getProductStatisticsList()]);
+    await Promise.all([loadProductTrendSummary(), loadProductStatisticsList()]);
   } finally {
     trendLoading.value = false;
   }
 };
 
 /** 查询商品状况数据统计 */
-async function getProductTrendSummary() {
-  trendSummary.value = await ProductStatisticsApi.getProductStatisticsAnalyse({
+async function loadProductTrendSummary() {
+  trendSummary.value = await getProductStatisticsAnalyse({
     times: searchTimes.value.length > 0 ? searchTimes.value : undefined,
   });
 }
 
 /** 查询商品状况数据列表 */
-async function getProductStatisticsList() {
-  const list = await ProductStatisticsApi.getProductStatisticsList({
+async function loadProductStatisticsList() {
+  const list = await getProductStatisticsList({
     times: searchTimes.value.length > 0 ? searchTimes.value : undefined,
   });
 
@@ -104,13 +109,11 @@ async function handleExport() {
     });
     // 发起导出
     exportLoading.value = true;
-    const data = await ProductStatisticsApi.exportProductStatisticsExcel({
+    const data = await exportProductStatisticsExcel({
       times: searchTimes.value.length > 0 ? searchTimes.value : undefined,
     });
     // 处理下载
     downloadFileFromBlobPart({ fileName: '商品状况.xlsx', source: data });
-  } catch {
-    // 用户取消导出
   } finally {
     exportLoading.value = false;
   }
diff --git a/apps/web-ele/src/views/mall/statistics/trade/index.vue b/apps/web-ele/src/views/mall/statistics/trade/index.vue
index 153de4d0c..334c95b95 100644
--- a/apps/web-ele/src/views/mall/statistics/trade/index.vue
+++ b/apps/web-ele/src/views/mall/statistics/trade/index.vue
@@ -9,7 +9,7 @@ import { fenToYuan } from '@vben/utils';
 
 import { ElCol, ElRow } from 'element-plus';
 
-import * as TradeStatisticsApi from '#/api/mall/statistics/trade';
+import { getTradeStatisticsSummary } from '#/api/mall/statistics/trade';
 
 import TradeTrendCard from './modules/trend-card.vue';
 
@@ -31,14 +31,14 @@ function calculateRelativeRate(value?: number, reference?: number): string {
 }
 
 /** 查询交易统计 */
-async function getTradeStatisticsSummary() {
-  summary.value = await TradeStatisticsApi.getTradeStatisticsSummary();
+async function loadTradeStatisticsSummary() {
+  summary.value = await getTradeStatisticsSummary();
 }
 
 /** 初始化 */
 onMounted(async () => {
   loading.value = true;
-  await getTradeStatisticsSummary();
+  await loadTradeStatisticsSummary();
   loading.value = false;
 });
 </script>
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 0e5df93a5..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
@@ -21,8 +21,13 @@ import {
 import dayjs from 'dayjs';
 import { ElButton, ElCard, ElCol, ElRow } from 'element-plus';
 
-import * as TradeStatisticsApi from '#/api/mall/statistics/trade';
+import {
+  exportTradeStatisticsExcel,
+  getTradeStatisticsAnalyse,
+  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';
 
@@ -51,7 +56,7 @@ const calculateRelativeRate = (value?: number, reference?: number): string => {
 /** 处理日期范围变化 */
 const handleDateRangeChange = (times?: [Dayjs, Dayjs]) => {
   if (times?.length !== 2) {
-    getTradeTrendData();
+    loadTradeTrendData();
     return;
   }
   // 处理时间: 开始与截止在同一天的, 折线图出不来, 需要延长一天
@@ -65,29 +70,32 @@ const handleDateRangeChange = (times?: [Dayjs, Dayjs]) => {
   ];
 
   // 查询数据
-  getTradeTrendData();
+  loadTradeTrendData();
 };
 
 /** 处理交易状况查询 */
-async function getTradeTrendData() {
+async function loadTradeTrendData() {
   trendLoading.value = true;
   try {
-    await Promise.all([getTradeStatisticsAnalyse(), getTradeStatisticsList()]);
+    await Promise.all([
+      loadTradeStatisticsAnalyse(),
+      loadTradeStatisticsList(),
+    ]);
   } finally {
     trendLoading.value = false;
   }
 }
 
 /** 查询交易状况数据统计 */
-async function getTradeStatisticsAnalyse() {
-  trendSummary.value = await TradeStatisticsApi.getTradeStatisticsAnalyse({
+async function loadTradeStatisticsAnalyse() {
+  trendSummary.value = await getTradeStatisticsAnalyse({
     times: searchTimes.value.length > 0 ? searchTimes.value : undefined,
   });
 }
 
 /** 查询交易状况数据列表 */
-async function getTradeStatisticsList() {
-  const list = await TradeStatisticsApi.getTradeStatisticsList({
+async function loadTradeStatisticsList() {
+  const list = await getTradeStatisticsList({
     times: searchTimes.value.length > 0 ? searchTimes.value : undefined,
   });
 
@@ -104,7 +112,7 @@ async function handleExport() {
     });
     // 发起导出
     exportLoading.value = true;
-    const data = await TradeStatisticsApi.exportTradeStatisticsExcel({
+    const data = await exportTradeStatisticsExcel({
       times: searchTimes.value.length > 0 ? searchTimes.value : undefined,
     });
     // 处理下载
@@ -131,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/detail/data.ts b/apps/web-ele/src/views/mall/trade/afterSale/detail/data.ts
index 9cdc2ec37..1e532c935 100644
--- a/apps/web-ele/src/views/mall/trade/afterSale/detail/data.ts
+++ b/apps/web-ele/src/views/mall/trade/afterSale/detail/data.ts
@@ -1,4 +1,3 @@
-import type { MallAfterSaleApi } from '#/api/mall/trade/afterSale';
 import type { DescriptionItemSchema } from '#/components/description';
 
 import { h } from 'vue';
@@ -20,19 +19,19 @@ export function useOrderInfoSchema(): DescriptionItemSchema[] {
     {
       field: 'order.deliveryType',
       label: '配送方式',
-      content: (data: MallAfterSaleApi.AfterSale) =>
+      render: (val) =>
         h(DictTag, {
           type: DICT_TYPE.TRADE_DELIVERY_TYPE,
-          value: data?.order?.deliveryType,
+          value: val,
         }),
     },
     {
       field: 'order.type',
       label: '订单类型',
-      content: (data: MallAfterSaleApi.AfterSale) =>
+      render: (val) =>
         h(DictTag, {
           type: DICT_TYPE.TRADE_ORDER_TYPE,
-          value: data?.order?.type,
+          value: val,
         }),
     },
     {
@@ -46,10 +45,10 @@ export function useOrderInfoSchema(): DescriptionItemSchema[] {
     {
       field: 'order.terminal',
       label: '订单来源',
-      content: (data: MallAfterSaleApi.AfterSale) =>
+      render: (val) =>
         h(DictTag, {
           type: DICT_TYPE.TERMINAL,
-          value: data?.order?.terminal,
+          value: val,
         }),
     },
     {
@@ -67,10 +66,10 @@ export function useOrderInfoSchema(): DescriptionItemSchema[] {
     {
       field: 'order.payChannelCode',
       label: '付款方式',
-      content: (data: MallAfterSaleApi.AfterSale) =>
+      render: (val) =>
         h(DictTag, {
           type: DICT_TYPE.PAY_CHANNEL_CODE,
-          value: data?.order?.payChannelCode,
+          value: val,
         }),
     },
     {
@@ -90,32 +89,30 @@ export function useAfterSaleInfoSchema(): DescriptionItemSchema[] {
     {
       field: 'auditTime',
       label: '申请时间',
-      content: (data: MallAfterSaleApi.AfterSale) =>
-        formatDate(data?.auditTime) as string,
+      render: (val) => formatDate(val) as string,
     },
     {
       field: 'type',
       label: '售后类型',
-      content: (data: MallAfterSaleApi.AfterSale) =>
+      render: (val) =>
         h(DictTag, {
           type: DICT_TYPE.TRADE_AFTER_SALE_TYPE,
-          value: data?.type,
+          value: val,
         }),
     },
     {
       field: 'way',
       label: '售后方式',
-      content: (data: MallAfterSaleApi.AfterSale) =>
+      render: (val) =>
         h(DictTag, {
           type: DICT_TYPE.TRADE_AFTER_SALE_WAY,
-          value: data?.way,
+          value: val,
         }),
     },
     {
       field: 'refundPrice',
       label: '退款金额',
-      content: (data: MallAfterSaleApi.AfterSale) =>
-        fenToYuan(data?.refundPrice ?? 0),
+      render: (val) => fenToYuan(val ?? 0),
     },
     {
       field: 'applyReason',
@@ -128,8 +125,8 @@ export function useAfterSaleInfoSchema(): DescriptionItemSchema[] {
     {
       field: 'applyPicUrls',
       label: '凭证图片',
-      content: (data) => {
-        const images = data?.applyPicUrls || [];
+      render: (val) => {
+        const images = val || [];
         return h(
           'div',
           { class: 'flex gap-10px' },
@@ -153,16 +150,16 @@ export function useRefundStatusSchema(): DescriptionItemSchema[] {
     {
       field: 'status',
       label: '退款状态',
-      content: (data) =>
+      render: (val) =>
         h(DictTag, {
           type: DICT_TYPE.TRADE_AFTER_SALE_STATUS,
-          value: data?.status,
+          value: val,
         }),
     },
     {
       field: 'reminder',
       label: '提醒',
-      content: () =>
+      render: () =>
         h('div', { class: 'text-red-500 mb-10px' }, [
           h('div', '如果未发货，请点击同意退款给买家。'),
           h('div', '如果实际已发货，请主动与买家联系。'),
diff --git a/apps/web-ele/src/views/mall/trade/afterSale/detail/index.vue b/apps/web-ele/src/views/mall/trade/afterSale/detail/index.vue
index c5230f2c6..66d4e6bdd 100644
--- a/apps/web-ele/src/views/mall/trade/afterSale/detail/index.vue
+++ b/apps/web-ele/src/views/mall/trade/afterSale/detail/index.vue
@@ -49,38 +49,29 @@ const afterSale = ref<MallAfterSaleApi.AfterSale>({
 });
 
 const [OrderDescriptions] = useDescription({
-  componentProps: {
-    title: '订单信息',
-    border: false,
-    column: 3,
-    direction: 'horizontal',
-    labelWidth: 140,
-    extra: '',
-  },
+  title: '订单信息',
+  border: false,
+  column: 3,
+  direction: 'horizontal',
+  labelWidth: 140,
   schema: useOrderInfoSchema(),
 });
 
 const [AfterSaleDescriptions] = useDescription({
-  componentProps: {
-    title: '售后信息',
-    border: false,
-    column: 3,
-    direction: 'horizontal',
-    labelWidth: 140,
-    extra: '',
-  },
+  title: '售后信息',
+  border: false,
+  column: 3,
+  direction: 'horizontal',
+  labelWidth: 140,
   schema: useAfterSaleInfoSchema(),
 });
 
 const [RefundStatusDescriptions] = useDescription({
-  componentProps: {
-    title: '退款状态',
-    border: false,
-    column: 1,
-    direction: 'horizontal',
-    labelWidth: 140,
-    extra: '',
-  },
+  title: '退款状态',
+  border: false,
+  column: 1,
+  direction: 'horizontal',
+  labelWidth: 140,
   schema: useRefundStatusSchema(),
 });
 
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/data.ts b/apps/web-ele/src/views/mall/trade/order/detail/data.ts
index 74dfbcfda..febf4ed5e 100644
--- a/apps/web-ele/src/views/mall/trade/order/detail/data.ts
+++ b/apps/web-ele/src/views/mall/trade/order/detail/data.ts
@@ -1,5 +1,4 @@
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { MallOrderApi } from '#/api/mall/trade/order';
 import type { DescriptionItemSchema } from '#/components/description';
 
 import { h } from 'vue';
@@ -23,19 +22,19 @@ export function useOrderInfoSchema(): DescriptionItemSchema[] {
     {
       field: 'type',
       label: '订单类型',
-      content: (data: MallOrderApi.Order) =>
+      render: (val) =>
         h(DictTag, {
           type: DICT_TYPE.TRADE_ORDER_TYPE,
-          value: data?.type,
+          value: val,
         }),
     },
     {
       field: 'terminal',
       label: '订单来源',
-      content: (data: MallOrderApi.Order) =>
+      render: (val) =>
         h(DictTag, {
           type: DICT_TYPE.TERMINAL,
-          value: data?.terminal,
+          value: val,
         }),
     },
     {
@@ -53,10 +52,10 @@ export function useOrderInfoSchema(): DescriptionItemSchema[] {
     {
       field: 'payChannelCode',
       label: '付款方式',
-      content: (data: MallOrderApi.Order) =>
+      render: (val) =>
         h(DictTag, {
           type: DICT_TYPE.PAY_CHANNEL_CODE,
-          value: data?.payChannelCode,
+          value: val,
         }),
     },
     {
@@ -72,16 +71,16 @@ export function useOrderStatusSchema(): DescriptionItemSchema[] {
     {
       field: 'status',
       label: '订单状态',
-      content: (data: MallOrderApi.Order) =>
+      render: (val) =>
         h(DictTag, {
           type: DICT_TYPE.TRADE_ORDER_STATUS,
-          value: data?.status,
+          value: val,
         }),
     },
     {
       field: 'reminder',
       label: '提醒',
-      content: () =>
+      render: () =>
         h('div', { class: 'space-y-1' }, [
           h('div', '买家付款成功后，货款将直接进入您的商户号（微信、支付宝）'),
           h('div', '请及时关注你发出的包裹状态，确保可以配送至买家手中'),
@@ -100,66 +99,46 @@ export function useOrderPriceSchema(): DescriptionItemSchema[] {
     {
       field: 'totalPrice',
       label: '商品总额',
-      content: (data: MallOrderApi.Order) =>
-        `${fenToYuan(data?.totalPrice ?? 0)} 元`,
+      render: (val) => `${fenToYuan(val ?? 0)} 元`,
     },
     {
       field: 'deliveryPrice',
       label: '运费金额',
-      content: (data: MallOrderApi.Order) =>
-        `${fenToYuan(data?.deliveryPrice ?? 0)} 元`,
+      render: (val) => `${fenToYuan(val ?? 0)} 元`,
     },
     {
       field: 'adjustPrice',
       label: '订单调价',
-      content: (data: MallOrderApi.Order) =>
-        `${fenToYuan(data?.adjustPrice ?? 0)} 元`,
+      render: (val) => `${fenToYuan(val ?? 0)} 元`,
     },
     {
       field: 'couponPrice',
       label: '优惠劵优惠',
-      content: (data: MallOrderApi.Order) =>
-        h(
-          'span',
-          { class: 'text-red-500' },
-          `${fenToYuan(data?.couponPrice ?? 0)} 元`,
-        ),
+      render: (val) =>
+        h('span', { class: 'text-red-500' }, `${fenToYuan(val ?? 0)} 元`),
     },
     {
       field: 'vipPrice',
       label: 'VIP 优惠',
-      content: (data: MallOrderApi.Order) =>
-        h(
-          'span',
-          { class: 'text-red-500' },
-          `${fenToYuan(data?.vipPrice ?? 0)} 元`,
-        ),
+      render: (val) =>
+        h('span', { class: 'text-red-500' }, `${fenToYuan(val ?? 0)} 元`),
     },
     {
       field: 'discountPrice',
       label: '活动优惠',
-      content: (data: MallOrderApi.Order) =>
-        h(
-          'span',
-          { class: 'text-red-500' },
-          `${fenToYuan(data?.discountPrice ?? 0)} 元`,
-        ),
+      render: (val) =>
+        h('span', { class: 'text-red-500' }, `${fenToYuan(val ?? 0)} 元`),
     },
     {
       field: 'pointPrice',
       label: '积分抵扣',
-      content: (data: MallOrderApi.Order) =>
-        h(
-          'span',
-          { class: 'text-red-500' },
-          `${fenToYuan(data?.pointPrice ?? 0)} 元`,
-        ),
+      render: (val) =>
+        h('span', { class: 'text-red-500' }, `${fenToYuan(val ?? 0)} 元`),
     },
     {
       field: 'payPrice',
       label: '应付金额',
-      content: (data: MallOrderApi.Order) =>
-        `${fenToYuan(data?.payPrice ?? 0)} 元`,
+      render: (val) => `${fenToYuan(val ?? 0)} 元`,
     },
   ];
 }
@@ -170,10 +149,10 @@ export function useDeliveryInfoSchema(): DescriptionItemSchema[] {
     {
       field: 'deliveryType',
       label: '配送方式',
-      content: (data: MallOrderApi.Order) =>
+      render: (val) =>
         h(DictTag, {
           type: DICT_TYPE.TRADE_DELIVERY_TYPE,
-          value: data?.deliveryType,
+          value: val,
         }),
     },
     {
@@ -187,14 +166,12 @@ export function useDeliveryInfoSchema(): DescriptionItemSchema[] {
     {
       field: 'receiverAddress',
       label: '收货地址',
-      content: (data: MallOrderApi.Order) =>
-        `${data?.receiverAreaName} ${data?.receiverDetailAddress}`.trim(),
+      render: (val, data) => `${data?.receiverAreaName} ${val}`.trim(),
     },
     {
       field: 'deliveryTime',
       label: '发货时间',
-      content: (data: MallOrderApi.Order) =>
-        formatDateTime(data?.deliveryTime) as string,
+      render: (val) => formatDateTime(val) as string,
     },
   ];
 }
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 dbae802ef..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';
@@ -57,38 +58,30 @@ const expressTrackList = ref<any[]>([]);
 const pickUpStore = ref<MallDeliveryPickUpStoreApi.PickUpStore | undefined>();
 
 const [OrderInfoDescriptions] = useDescription({
-  componentProps: {
-    title: '订单信息',
-    border: false,
-    column: 3,
-  },
+  title: '订单信息',
+  border: false,
+  column: 3,
   schema: useOrderInfoSchema(),
 });
 
 const [OrderStatusDescriptions] = useDescription({
-  componentProps: {
-    title: '订单状态',
-    border: false,
-    column: 1,
-  },
+  title: '订单状态',
+  border: false,
+  column: 1,
   schema: useOrderStatusSchema(),
 });
 
 const [OrderPriceDescriptions] = useDescription({
-  componentProps: {
-    title: '费用信息',
-    border: false,
-    column: 4,
-  },
+  title: '费用信息',
+  border: false,
+  column: 4,
   schema: useOrderPriceSchema(),
 });
 
 const [DeliveryInfoDescriptions] = useDescription({
-  componentProps: {
-    title: '收货信息',
-    border: false,
-    column: 3,
-  },
+  title: '收货信息',
+  border: false,
+  column: 3,
   schema: useDeliveryInfoSchema(),
 });
 
@@ -177,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 || [],
         });
@@ -191,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/pay/notify/data.ts b/apps/web-ele/src/views/pay/notify/data.ts
index 8d301628d..5917b416c 100644
--- a/apps/web-ele/src/views/pay/notify/data.ts
+++ b/apps/web-ele/src/views/pay/notify/data.ts
@@ -1,6 +1,5 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { PayNotifyApi } from '#/api/pay/notify';
 import type { DescriptionItemSchema } from '#/components/description';
 
 import { h } from 'vue';
@@ -91,7 +90,6 @@ export function useGridFormSchema(): VbenFormSchema[] {
       componentProps: {
         ...getRangePickerDefaultProps(),
         clearable: true,
-        placeholder: ['开始日期', '结束日期'],
       },
     },
   ];
@@ -182,10 +180,10 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'type',
       label: '通知类型',
-      content: (data: PayNotifyApi.NotifyTask) =>
+      render: (val) =>
         h(DictTag, {
           type: DICT_TYPE.PAY_NOTIFY_TYPE,
-          value: data?.type,
+          value: val,
         }),
     },
     {
@@ -195,10 +193,10 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'status',
       label: '通知状态',
-      content: (data: PayNotifyApi.NotifyTask) =>
+      render: (val) =>
         h(DictTag, {
           type: DICT_TYPE.PAY_NOTIFY_STATUS,
-          value: data?.status,
+          value: val,
         }),
     },
     {
@@ -208,14 +206,12 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'lastExecuteTime',
       label: '最后通知时间',
-      content: (data: PayNotifyApi.NotifyTask) =>
-        formatDateTime(data?.lastExecuteTime) as string,
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'nextNotifyTime',
       label: '下次通知时间',
-      content: (data: PayNotifyApi.NotifyTask) =>
-        formatDateTime(data?.nextNotifyTime) as string,
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'notifyTimes',
@@ -228,14 +224,12 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'createTime',
       label: '创建时间',
-      content: (data: PayNotifyApi.NotifyTask) =>
-        formatDateTime(data?.createTime) as string,
+      render: (val) => formatDateTime(val) as string,
     },
     {
       field: 'updateTime',
       label: '更新时间',
-      content: (data: PayNotifyApi.NotifyTask) =>
-        formatDateTime(data?.updateTime) as string,
+      render: (val) => formatDateTime(val) as string,
     },
   ];
 }
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 26bc4a747..d5b7bb71c 100644
--- a/apps/web-ele/src/views/pay/notify/modules/detail.vue
+++ b/apps/web-ele/src/views/pay/notify/modules/detail.vue
@@ -17,14 +17,8 @@ import { useDetailLogColumns, useDetailSchema } from '../data';
 const formData = ref<PayNotifyApi.NotifyTask>();
 
 const [Description] = useDescription({
-  componentProps: {
-    border: true,
-    column: 2,
-    direction: 'horizontal',
-    labelWidth: 140,
-    title: '',
-    extra: '',
-  },
+  border: true,
+  column: 2,
   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 4072e4e45..99c261d77 100644
--- a/apps/web-ele/src/views/pay/order/modules/detail.vue
+++ b/apps/web-ele/src/views/pay/order/modules/detail.vue
@@ -13,8 +13,8 @@ import { useDetailSchema } from '../data';
 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 8d9385ab9..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
@@ -12,8 +12,8 @@ import { useDetailSchema } from '../data';
 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 8d9385ab9..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
@@ -12,8 +12,8 @@ import { useDetailSchema } from '../data';
 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 cf892c0f1..f4d8ae922 100644
--- a/apps/web-ele/src/views/system/operatelog/modules/detail.vue
+++ b/apps/web-ele/src/views/system/operatelog/modules/detail.vue
@@ -12,9 +12,8 @@ import { useDetailSchema } from '../data';
 const formData = ref<SystemOperateLogApi.OperateLog>();
 
 const [Descriptions] = useDescription({
+  border: true,
   column: 1,
-  direction: 'horizontal',
-  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 ffae89ce5..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
@@ -14,8 +14,8 @@ import { useDetailSchema } from '../data';
 const formData = ref<SystemSocialUserApi.SocialUser>();
 
 const [Descriptions] = useDescription({
+  border: true,
   column: 1,
-  labelWidth: 185,
   schema: useDetailSchema(),
 });
 
diff --git a/package.json b/package.json
index f7c29406c..0745b1137 100644
--- a/package.json
+++ b/package.json
@@ -95,8 +95,8 @@
     "vue-tsc": "catalog:"
   },
   "engines": {
-    "node": ">=20.10.0",
-    "pnpm": ">=9.12.0"
+    "node": ">=20.12.0",
+    "pnpm": ">=10.14.0"
   },
   "packageManager": "pnpm@10.14.0",
   "pnpm": {
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/pnpm-lock.yaml b/pnpm-lock.yaml
index d74811fa4..a8a91aa6e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -74,7 +74,7 @@ catalogs:
       version: 1.56.1
     '@pnpm/workspace.read-manifest':
       specifier: ^1000.2.0
-      version: 1000.2.4
+      version: 1000.2.5
     '@stylistic/stylelint-plugin':
       specifier: ^3.1.3
       version: 3.1.3
@@ -134,7 +134,7 @@ catalogs:
       version: 14.1.2
     '@types/node':
       specifier: ^22.16.0
-      version: 22.18.11
+      version: 22.18.12
     '@types/nprogress':
       specifier: ^0.2.3
       version: 0.2.3
@@ -152,10 +152,10 @@ catalogs:
       version: 1.15.8
     '@typescript-eslint/eslint-plugin':
       specifier: ^8.35.1
-      version: 8.46.1
+      version: 8.46.2
     '@typescript-eslint/parser':
       specifier: ^8.35.1
-      version: 8.46.1
+      version: 8.46.2
     '@vee-validate/zod':
       specifier: ^4.15.1
       version: 4.15.1
@@ -602,7 +602,7 @@ catalogs:
       version: 4.1.0
     vxe-pc-ui:
       specifier: ^4.9.29
-      version: 4.10.2
+      version: 4.10.5
     vxe-table:
       specifier: ^4.16.11
       version: 4.17.0
@@ -633,13 +633,13 @@ importers:
         version: 0.5.1
       '@changesets/cli':
         specifier: 'catalog:'
-        version: 2.29.7(@types/node@22.18.11)
+        version: 2.29.7(@types/node@22.18.12)
       '@playwright/test':
         specifier: 'catalog:'
         version: 1.56.1
       '@types/node':
         specifier: 'catalog:'
-        version: 22.18.11
+        version: 22.18.12
       '@vben/commitlint-config':
         specifier: workspace:*
         version: link:internal/lint-configs/commitlint-config
@@ -669,10 +669,10 @@ importers:
         version: link:scripts/vsh
       '@vitejs/plugin-vue':
         specifier: 'catalog:'
-        version: 6.0.1(vite@7.1.11(@types/node@22.18.11)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))(vue@3.5.22(typescript@5.9.3))
+        version: 6.0.1(vite@7.1.11(@types/node@22.18.12)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))(vue@3.5.22(typescript@5.9.3))
       '@vitejs/plugin-vue-jsx':
         specifier: 'catalog:'
-        version: 5.1.1(vite@7.1.11(@types/node@22.18.11)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))(vue@3.5.22(typescript@5.9.3))
+        version: 5.1.1(vite@7.1.11(@types/node@22.18.12)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))(vue@3.5.22(typescript@5.9.3))
       '@vue/test-utils':
         specifier: 'catalog:'
         version: 2.4.6
@@ -714,10 +714,10 @@ importers:
         version: 3.6.1(sass@1.93.2)(typescript@5.9.3)(vue-tsc@2.2.10(typescript@5.9.3))(vue@3.5.22(typescript@5.9.3))
       vite:
         specifier: 'catalog:'
-        version: 7.1.11(@types/node@22.18.11)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
+        version: 7.1.11(@types/node@22.18.12)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
       vitest:
         specifier: 'catalog:'
-        version: 3.2.4(@types/node@22.18.11)(happy-dom@17.6.3)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
+        version: 3.2.4(@types/node@22.18.12)(happy-dom@17.6.3)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
       vue:
         specifier: ^3.5.17
         version: 3.5.22(typescript@5.9.3)
@@ -854,6 +854,9 @@ importers:
       vue3-signature:
         specifier: 'catalog:'
         version: 0.2.4(vue@3.5.22(typescript@5.9.3))
+      vuedraggable:
+        specifier: 'catalog:'
+        version: 4.1.0(vue@3.5.22(typescript@5.9.3))
 
   apps/web-ele:
     dependencies:
@@ -1043,20 +1046,20 @@ importers:
         version: 1.9.17(vue@3.5.22(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.8.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0))
+        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))
     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.8.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.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))
       '@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.8.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.9.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0))(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.8.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.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:
         specifier: ^3.5.17
         version: 3.5.22(typescript@5.9.3)
@@ -1065,7 +1068,7 @@ importers:
     dependencies:
       '@commitlint/cli':
         specifier: 'catalog:'
-        version: 19.8.1(@types/node@24.8.1)(typescript@5.9.3)
+        version: 19.8.1(@types/node@24.9.1)(typescript@5.9.3)
       '@commitlint/config-conventional':
         specifier: 'catalog:'
         version: 19.8.1
@@ -1092,7 +1095,7 @@ importers:
         version: 3.3.1(eslint@9.38.0(jiti@2.6.1))
       eslint-plugin-import-x:
         specifier: 'catalog:'
-        version: 4.16.1(@typescript-eslint/utils@8.46.1(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.2(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.38.0(jiti@2.6.1))
     devDependencies:
       '@eslint/js':
         specifier: 'catalog:'
@@ -1102,10 +1105,10 @@ importers:
         version: 9.6.1
       '@typescript-eslint/eslint-plugin':
         specifier: 'catalog:'
-        version: 8.46.1(@typescript-eslint/parser@8.46.1(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.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/parser':
         specifier: 'catalog:'
-        version: 8.46.1(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)
+        version: 8.46.2(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)
       eslint:
         specifier: 'catalog:'
         version: 9.38.0(jiti@2.6.1)
@@ -1138,13 +1141,13 @@ importers:
         version: 59.0.1(eslint@9.38.0(jiti@2.6.1))
       eslint-plugin-unused-imports:
         specifier: 'catalog:'
-        version: 4.3.0(@typescript-eslint/eslint-plugin@8.46.1(@typescript-eslint/parser@8.46.1(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.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-vitest:
         specifier: 'catalog:'
-        version: 0.5.4(@typescript-eslint/eslint-plugin@8.46.1(@typescript-eslint/parser@8.46.1(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.8.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.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-vue:
         specifier: 'catalog:'
-        version: 10.5.1(@typescript-eslint/parser@8.46.1(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.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)))
       globals:
         specifier: 'catalog:'
         version: 16.4.0
@@ -1299,7 +1302,7 @@ importers:
         version: link:../../packages/types
       vite:
         specifier: 'catalog:'
-        version: 7.1.11(@types/node@24.8.1)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
+        version: 7.1.11(@types/node@24.9.1)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
 
   internal/vite-config:
     dependencies:
@@ -1329,14 +1332,14 @@ importers:
         version: 2.0.3
       vite-plugin-pwa:
         specifier: 'catalog:'
-        version: 1.1.0(vite@7.1.11(@types/node@24.8.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.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-vue-devtools:
         specifier: 'catalog:'
-        version: 7.7.7(rollup@4.52.5)(vite@7.1.11(@types/node@24.8.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.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))
     devDependencies:
       '@pnpm/workspace.read-manifest':
         specifier: 'catalog:'
-        version: 1000.2.4
+        version: 1000.2.5
       '@types/archiver':
         specifier: 'catalog:'
         version: 6.0.3
@@ -1348,10 +1351,10 @@ importers:
         version: link:../node-utils
       '@vitejs/plugin-vue':
         specifier: 'catalog:'
-        version: 6.0.1(vite@7.1.11(@types/node@24.8.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.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-jsx':
         specifier: 'catalog:'
-        version: 5.1.1(vite@7.1.11(@types/node@24.8.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.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))
       dayjs:
         specifier: 'catalog:'
         version: 1.11.18
@@ -1369,16 +1372,16 @@ importers:
         version: 1.93.2
       vite:
         specifier: 'catalog:'
-        version: 7.1.11(@types/node@24.8.1)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
+        version: 7.1.11(@types/node@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:
         specifier: 'catalog:'
-        version: 0.5.1(vite@7.1.11(@types/node@24.8.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.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:
         specifier: 'catalog:'
-        version: 4.5.4(@types/node@24.8.1)(rollup@4.52.5)(typescript@5.9.3)(vite@7.1.11(@types/node@24.8.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.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-html:
         specifier: 'catalog:'
-        version: 3.2.2(vite@7.1.11(@types/node@24.8.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.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-lazy-import:
         specifier: 'catalog:'
         version: 1.0.7
@@ -1914,7 +1917,7 @@ importers:
         version: 3.5.22(typescript@5.9.3)
       vxe-pc-ui:
         specifier: 'catalog:'
-        version: 4.10.2(vue@3.5.22(typescript@5.9.3))
+        version: 4.10.5(vue@3.5.22(typescript@5.9.3))
       vxe-table:
         specifier: 'catalog:'
         version: 4.17.0(vue@3.5.22(typescript@5.9.3))
@@ -3599,11 +3602,11 @@ packages:
     peerDependencies:
       vue: ^3.5.17
 
-  '@emnapi/core@1.5.0':
-    resolution: {integrity: sha512-sbP8GzB1WDzacS8fgNPpHlp6C9VZe+SJP3F90W9rLemaQj2PzIuTEl1qDOYQf58YIpyjViI24y9aPWCjEzY2cg==}
+  '@emnapi/core@1.6.0':
+    resolution: {integrity: sha512-zq/ay+9fNIJJtJiZxdTnXS20PllcYMX3OE23ESc4HK/bdYu3cOWYVhsOhVnXALfU/uqJIxn5NBPd9z4v+SfoSg==}
 
-  '@emnapi/runtime@1.5.0':
-    resolution: {integrity: sha512-97/BJ3iXHww3djw6hYIfErCZFee7qCtrneuLa20UXFCOTCfBM2cvQHjWJ2EG0s0MtdNwInarqCTz35i4wWXHsQ==}
+  '@emnapi/runtime@1.6.0':
+    resolution: {integrity: sha512-obtUmAHTMjll499P+D9A3axeJFlhdjOWdKUNs/U6QIGT7V5RjcUW1xToAzjvmgTSQhDbYn/NwfTRoJcQ2rNBxA==}
 
   '@emnapi/wasi-threads@1.1.0':
     resolution: {integrity: sha512-WI0DdZ8xFSbgMjR1sFsKABJ/C5OnRrjT06JXbZKexJGrDuPTzZdDYfFlsgcCXCyf+suG5QU2e/y1Wo2V/OapLQ==}
@@ -4109,11 +4112,11 @@ packages:
   '@marijn/find-cluster-break@1.0.2':
     resolution: {integrity: sha512-l0h88YhZFyKdXIFNfSWpyjStDjGHwZ/U7iobcK1cQQD8sejsONdQtTVU+1wVN1PBw40PiiHB1vA5S7VTfQiP9g==}
 
-  '@microsoft/api-extractor-model@7.31.1':
-    resolution: {integrity: sha512-Dhnip5OFKbl85rq/ICHBFGhV4RA5UQSl8AC/P/zoGvs+CBudPkatt5kIhMGiYgVPnUWmfR6fcp38+1AFLYNtUw==}
+  '@microsoft/api-extractor-model@7.31.2':
+    resolution: {integrity: sha512-d0WwxwBLZaHokTrOngqHVkQK59NlveV5RE4wEpjaybhSNmEK9N7KPCcT5n8JcpH6k5o6AhxG47g1km2D7BZw8Q==}
 
-  '@microsoft/api-extractor@7.53.1':
-    resolution: {integrity: sha512-bul5eTNxijLdDBqLye74u9494sRmf+9QULtec9Od0uHnifahGeNt8CC4/xCdn7mVyEBrXIQyQ5+sc4Uc0QfBSA==}
+  '@microsoft/api-extractor@7.53.2':
+    resolution: {integrity: sha512-hG3+wJY6aZlkQhGpUbhq1C5F1uJLsmDjrwVea+WT18RbD1XtIGn/c4uyMF7gdXLjLNwErB47hnRk9QNjpEHUWA==}
     hasBin: true
 
   '@microsoft/fetch-event-source@2.0.1':
@@ -4289,12 +4292,12 @@ packages:
     resolution: {integrity: sha512-c83qWb22rNRuB0UaVCI0uRPNRr8Z0FWnEIvT47jiHAmOIUHbBOg5XvV7pM5x+rKn9HRpjxquDbXYSXr3fAKFcw==}
     engines: {node: '>=12'}
 
-  '@pnpm/types@1000.8.0':
-    resolution: {integrity: sha512-yx86CGHHquWAI0GgKIuV/RnYewcf5fVFZemC45C/K2cX0uV8GB8TUP541ZrokWola2fZx5sn1vL7xzbceRZfoQ==}
+  '@pnpm/types@1000.9.0':
+    resolution: {integrity: sha512-UvDTCxnbyqkTg2X0dBOuZ4IdFJ8g4UFu0Ybv/5/cZAxCWVhNl1hC/Xc9hR4tZrlBL0NRFePLRhO/iw9LmA1lbw==}
     engines: {node: '>=18.12'}
 
-  '@pnpm/workspace.read-manifest@1000.2.4':
-    resolution: {integrity: sha512-MxzprPLd17yNKs/w5a2+c+Cg9hfB0VAjFxcrR+McI49IYoWA17rViDyXDOX595xy2ntycUCkq6ZgQeWpfgl89w==}
+  '@pnpm/workspace.read-manifest@1000.2.5':
+    resolution: {integrity: sha512-kiFdZbwoIqNEwfBVSprSXuaKHdlORingq2uR4ofH9F8r8lwpIY/2bACl6VuFASHGSZ1Bs3Oy6VicSMPQRsKTJg==}
     engines: {node: '>=18.12'}
 
   '@polka/url@1.0.0-next.29':
@@ -4550,8 +4553,8 @@ packages:
     cpu: [x64]
     os: [win32]
 
-  '@rushstack/node-core-library@5.17.0':
-    resolution: {integrity: sha512-24vt1GbHN6kyIglRMTVpyEiNRRRJK8uZHc1XoGAhmnTDKnrWet8OmOpImMswJIe6gM78eV8cMg1HXwuUHkSSgg==}
+  '@rushstack/node-core-library@5.17.1':
+    resolution: {integrity: sha512-Mtcsa0aRJgYJOpeTe4qElLTRBlijNohdliq/xOhqce5rlzMIfLr73j9wUuj6GYPZPbG0S+is/RL2l0m/vnL55A==}
     peerDependencies:
       '@types/node': '*'
     peerDependenciesMeta:
@@ -4569,16 +4572,16 @@ packages:
   '@rushstack/rig-package@0.6.0':
     resolution: {integrity: sha512-ZQmfzsLE2+Y91GF15c65L/slMRVhF6Hycq04D4TwtdGaUAbIXXg9c5pKA5KFU7M4QMaihoobp9JJYpYcaY3zOw==}
 
-  '@rushstack/terminal@0.19.1':
-    resolution: {integrity: sha512-jsBuSad67IDVMO2yp0hDfs0OdE4z3mDIjIL2pclDT3aEJboeZXE85e1HjuD0F6JoW3XgHvDwoX+WOV+AVTDQeA==}
+  '@rushstack/terminal@0.19.2':
+    resolution: {integrity: sha512-SJLC+6oUrJ0OOpuuwXxhktCTE3jeYVIwtvREdNhbcnVQrYGaDJpAoBgNVfw+VH0pTPpFLBqoPHsRRz7mj7WlbA==}
     peerDependencies:
       '@types/node': '*'
     peerDependenciesMeta:
       '@types/node':
         optional: true
 
-  '@rushstack/ts-command-line@5.1.1':
-    resolution: {integrity: sha512-HPzFsUcr+wZ3oQI08Ec/E6cuiAVHKzrXZGHhwiwIGygAFiqN5QzX+ff30n70NU2WyE26CykgMwBZZSSyHCJrzA==}
+  '@rushstack/ts-command-line@5.1.2':
+    resolution: {integrity: sha512-jn0EnSefYrkZDrBGd6KGuecL84LI06DgzL4hVQ46AUijNBt2nRU/ST4HhrfII/w91siCd1J/Okvxq/BS75Me/A==}
 
   '@sec-ant/readable-stream@0.4.1':
     resolution: {integrity: sha512-831qok9r2t8AlxLko40y2ebgSDhenenCatLVeW/uBtnHPyhHOvG0C7TvfgecV+wHzIm5KUICgzmVpWS+IMEAeg==}
@@ -4725,8 +4728,8 @@ packages:
   '@types/bintrees@1.0.6':
     resolution: {integrity: sha512-pZWT4Bz+tWwxlDspSjdoIza4PE5lbGI4Xvs3FZV/2v5m5SDA8LwNpU8AXxlndmARO7OaQ1Vf3zFenOsNMzaRkQ==}
 
-  '@types/chai@5.2.2':
-    resolution: {integrity: sha512-8kB30R7Hwqf40JPiKhVzodJs2Qc1ZJ5zuT3uzw5Hq/dhNCl3G3l83jfpdI1e20BP348+fV7VIL/+FxaXkqBmWg==}
+  '@types/chai@5.2.3':
+    resolution: {integrity: sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA==}
 
   '@types/codemirror@5.60.16':
     resolution: {integrity: sha512-V/yHdamffSS075jit+fDxaOAmdP2liok8NSNJnAZfDJErzOheuygHZEhAJrfmk5TEyM32MhkZjwo/idX791yxw==}
@@ -4902,11 +4905,11 @@ packages:
   '@types/node@12.20.55':
     resolution: {integrity: sha512-J8xLz7q2OFulZ2cyGTLE1TbbZcjpno7FaN6zdJNrgAdrJ+DZzh/uFR6YrTb4C+nXakvud8Q4+rbhoIWlYQbUFQ==}
 
-  '@types/node@22.18.11':
-    resolution: {integrity: sha512-Gd33J2XIrXurb+eT2ktze3rJAfAp9ZNjlBdh4SVgyrKEOADwCbdUDaK7QgJno8Ue4kcajscsKqu6n8OBG3hhCQ==}
+  '@types/node@22.18.12':
+    resolution: {integrity: sha512-BICHQ67iqxQGFSzfCFTT7MRQ5XcBjG5aeKh5Ok38UBbPe5fxTyE+aHFxwVrGyr8GNlqFMLKD1D3P2K/1ks8tog==}
 
-  '@types/node@24.8.1':
-    resolution: {integrity: sha512-alv65KGRadQVfVcG69MuB4IzdYVpRwMG/mq8KWOaoOdyY617P5ivaDiMCGOFDWD2sAn5Q0mR3mRtUOgm99hL9Q==}
+  '@types/node@24.9.1':
+    resolution: {integrity: sha512-QoiaXANRkSXK6p0Duvt56W208du4P9Uye9hWLWgGMDTEoKPhuenzNcC4vGUmrNkiOKTlIrBoyNQYNpSwfEZXSg==}
 
   '@types/nprogress@0.2.3':
     resolution: {integrity: sha512-k7kRA033QNtC+gLc4VPlfnue58CM1iQLgn1IMAU8VPHGOj7oIHPp9UlhedEnD/Gl8evoCjwkZjlBORtZ3JByUA==}
@@ -4950,23 +4953,23 @@ packages:
   '@types/web-bluetooth@0.0.21':
     resolution: {integrity: sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA==}
 
-  '@typescript-eslint/eslint-plugin@8.46.1':
-    resolution: {integrity: sha512-rUsLh8PXmBjdiPY+Emjz9NX2yHvhS11v0SR6xNJkm5GM1MO9ea/1GoDKlHHZGrOJclL/cZ2i/vRUYVtjRhrHVQ==}
+  '@typescript-eslint/eslint-plugin@8.46.2':
+    resolution: {integrity: sha512-ZGBMToy857/NIPaaCucIUQgqueOiq7HeAKkhlvqVV4lm089zUFW6ikRySx2v+cAhKeUCPuWVHeimyk6Dw1iY3w==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
-      '@typescript-eslint/parser': ^8.46.1
+      '@typescript-eslint/parser': ^8.46.2
       eslint: ^8.57.0 || ^9.0.0
       typescript: '>=4.8.4 <6.0.0'
 
-  '@typescript-eslint/parser@8.46.1':
-    resolution: {integrity: sha512-6JSSaBZmsKvEkbRUkf7Zj7dru/8ZCrJxAqArcLaVMee5907JdtEbKGsZ7zNiIm/UAkpGUkaSMZEXShnN2D1HZA==}
+  '@typescript-eslint/parser@8.46.2':
+    resolution: {integrity: sha512-BnOroVl1SgrPLywqxyqdJ4l3S2MsKVLDVxZvjI1Eoe8ev2r3kGDo+PcMihNmDE+6/KjkTubSJnmqGZZjQSBq/g==}
     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.1':
-    resolution: {integrity: sha512-FOIaFVMHzRskXr5J4Jp8lFVV0gz5ngv3RHmn+E4HYxSJ3DgDzU7fVI1/M7Ijh1zf6S7HIoaIOtln1H5y8V+9Zg==}
+  '@typescript-eslint/project-service@8.46.2':
+    resolution: {integrity: sha512-PULOLZ9iqwI7hXcmL4fVfIsBi6AN9YxRc0frbvmg8f+4hQAjQ5GYNKK0DIArNo+rOKmR/iBYwkpBmnIwin4wBg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       typescript: '>=4.8.4 <6.0.0'
@@ -4975,18 +4978,18 @@ packages:
     resolution: {integrity: sha512-jjhdIE/FPF2B7Z1uzc6i3oWKbGcHb87Qw7AWj6jmEqNOfDFbJWtjt/XfwCpvNkpGWlcJaog5vTR+VV8+w9JflA==}
     engines: {node: ^18.18.0 || >=20.0.0}
 
-  '@typescript-eslint/scope-manager@8.46.1':
-    resolution: {integrity: sha512-weL9Gg3/5F0pVQKiF8eOXFZp8emqWzZsOJuWRUNtHT+UNV2xSJegmpCNQHy37aEQIbToTq7RHKhWvOsmbM680A==}
+  '@typescript-eslint/scope-manager@8.46.2':
+    resolution: {integrity: sha512-LF4b/NmGvdWEHD2H4MsHD8ny6JpiVNDzrSZr3CsckEgCbAGZbYM4Cqxvi9L+WqDMT+51Ozy7lt2M+d0JLEuBqA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@typescript-eslint/tsconfig-utils@8.46.1':
-    resolution: {integrity: sha512-X88+J/CwFvlJB+mK09VFqx5FE4H5cXD+H/Bdza2aEWkSb8hnWIQorNcscRl4IEo1Cz9VI/+/r/jnGWkbWPx54g==}
+  '@typescript-eslint/tsconfig-utils@8.46.2':
+    resolution: {integrity: sha512-a7QH6fw4S57+F5y2FIxxSDyi5M4UfGF+Jl1bCGd7+L4KsaUY80GsiF/t0UoRFDHAguKlBaACWJRmdrc6Xfkkag==}
     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.1':
-    resolution: {integrity: sha512-+BlmiHIiqufBxkVnOtFwjah/vrkF4MtKKvpXrKSPLCkCtAp8H01/VV43sfqA98Od7nJpDcFnkwgyfQbOG0AMvw==}
+  '@typescript-eslint/type-utils@8.46.2':
+    resolution: {integrity: sha512-HbPM4LbaAAt/DjxXaG9yiS9brOOz6fabal4uvUmaUYe6l3K1phQDMQKBRUrr06BQkxkvIZVVHttqiybM9nJsLA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: ^8.57.0 || ^9.0.0
@@ -4996,8 +4999,8 @@ packages:
     resolution: {integrity: sha512-iZqi+Ds1y4EDYUtlOOC+aUmxnE9xS/yCigkjA7XpTKV6nCBd3Hp/PRGGmdwnfkV2ThMyYldP1wRpm/id99spTQ==}
     engines: {node: ^18.18.0 || >=20.0.0}
 
-  '@typescript-eslint/types@8.46.1':
-    resolution: {integrity: sha512-C+soprGBHwWBdkDpbaRC4paGBrkIXxVlNohadL5o0kfhsXqOC6GYH2S/Obmig+I0HTDl8wMaRySwrfrXVP8/pQ==}
+  '@typescript-eslint/types@8.46.2':
+    resolution: {integrity: sha512-lNCWCbq7rpg7qDsQrd3D6NyWYu+gkTENkG5IKYhUIcxSb59SQC/hEQ+MrG4sTgBVghTonNWq42bA/d4yYumldQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
   '@typescript-eslint/typescript-estree@7.18.0':
@@ -5009,8 +5012,8 @@ packages:
       typescript:
         optional: true
 
-  '@typescript-eslint/typescript-estree@8.46.1':
-    resolution: {integrity: sha512-uIifjT4s8cQKFQ8ZBXXyoUODtRoAd7F7+G8MKmtzj17+1UbdzFl52AzRyZRyKqPHhgzvXunnSckVu36flGy8cg==}
+  '@typescript-eslint/typescript-estree@8.46.2':
+    resolution: {integrity: sha512-f7rW7LJ2b7Uh2EiQ+7sza6RDZnajbNbemn54Ob6fRwQbgcIn+GWfyuHDHRYgRoZu1P4AayVScrRW+YfbTvPQoQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       typescript: '>=4.8.4 <6.0.0'
@@ -5021,8 +5024,8 @@ packages:
     peerDependencies:
       eslint: ^8.56.0
 
-  '@typescript-eslint/utils@8.46.1':
-    resolution: {integrity: sha512-vkYUy6LdZS7q1v/Gxb2Zs7zziuXN0wxqsetJdeZdRe/f5dwJFglmuvZBfTUivCtjH725C1jWCDfpadadD95EDQ==}
+  '@typescript-eslint/utils@8.46.2':
+    resolution: {integrity: sha512-sExxzucx0Tud5tE0XqR0lT0psBQvEpnpiul9XbGUB1QwpWJJAps1O/Z7hJxLGiZLBKMCutjTzDgmd1muEhBnVg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: ^8.57.0 || ^9.0.0
@@ -5032,8 +5035,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.1':
-    resolution: {integrity: sha512-ptkmIf2iDkNUjdeu2bQqhFPV1m6qTnFFjg7PPDjxKWaMaP0Z6I9l30Jr3g5QqbZGdw8YdYvLp+XnqnWWZOg/NA==}
+  '@typescript-eslint/visitor-keys@8.46.2':
+    resolution: {integrity: sha512-tUFMXI4gxzzMXt4xpGJEsBsTox0XbNQ1y94EwlD/CuZwFcQP79xfQqMhau9HsRc/J0cAPA/HZt1dZPtGn9V/7w==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
   '@ungap/structured-clone@1.3.0':
@@ -5717,8 +5720,8 @@ packages:
   base64-js@1.5.1:
     resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
 
-  baseline-browser-mapping@2.8.18:
-    resolution: {integrity: sha512-UYmTpOBwgPScZpS4A+YbapwWuBwasxvO/2IOHArSsAhL/+ZdmATBXTex3t+l2hXwLVYK382ibr/nKoY9GKe86w==}
+  baseline-browser-mapping@2.8.19:
+    resolution: {integrity: sha512-zoKGUdu6vb2jd3YOq0nnhEDQVbPcHhco3UImJrv5dSkvxTc2pl2WjOPsjZXDwPDSl5eghIMuY3R6J9NDKF3KcQ==}
     hasBin: true
 
   better-path-resolve@1.0.0:
@@ -6158,9 +6161,9 @@ packages:
   copy-anything@2.0.6:
     resolution: {integrity: sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==}
 
-  copy-anything@3.0.5:
-    resolution: {integrity: sha512-yCEafptTtb4bk7GLEQoM8KVJpxAfdBJYaXyzQEgQQQgYrZiDp8SJmGKlYza6CYjEDNstAdNdKA3UuoULlEbS6w==}
-    engines: {node: '>=12.13'}
+  copy-anything@4.0.5:
+    resolution: {integrity: sha512-7Vv6asjS4gMOuILabD3l739tsaxFQmC+a7pLZm02zyvs8p977bL3zEgq3yDk5rn9B0PbYgIv++jmHcuUab4RhA==}
+    engines: {node: '>=18'}
 
   core-js-compat@3.46.0:
     resolution: {integrity: sha512-p9hObIIEENxSV8xIu+V68JjSeARg6UVMG5mR+JEUguG3sI6MsiS1njz2jHmyJDvA+8jX/sytkBHup6kxhM9law==}
@@ -6817,8 +6820,8 @@ packages:
     engines: {node: '>=0.10.0'}
     hasBin: true
 
-  electron-to-chromium@1.5.237:
-    resolution: {integrity: sha512-icUt1NvfhGLar5lSWH3tHNzablaA5js3HVHacQimfP8ViEBOQv+L7DKEuHdbTZ0SKCO1ogTJTIL1Gwk9S6Qvcg==}
+  electron-to-chromium@1.5.238:
+    resolution: {integrity: sha512-khBdc+w/Gv+cS8e/Pbnaw/FXcBUeKrRVik9IxfXtgREOWyJhR4tj43n3amkVogJ/yeQUqzkrZcFhtIxIdqmmcQ==}
 
   element-plus@2.11.5:
     resolution: {integrity: sha512-O+bIVHQCjUDm4GiIznDXRoS8ar2TpWLwfOGnN/Aam0VXf5kbuc4SxdKKJdovWNxmxeqbcwjsSZPKgtXNcqys4A==}
@@ -7492,8 +7495,8 @@ packages:
     resolution: {integrity: sha512-w9UMqWwJxHNOvoNzSJ2oPF5wvYcvP7jUvYzhp67yEhTi17ZDBBC1z9pTdGuzjD+EFIqLSYRweZjqfiPzQ06Ebg==}
     engines: {node: '>= 0.4'}
 
-  get-tsconfig@4.12.0:
-    resolution: {integrity: sha512-LScr2aNr2FbjAjZh2C6X6BxRx1/x+aTDExct/xyq2XKbYOiG5c0aK7pMsSuyc0brz3ibr/lbQiHD9jzt4lccJw==}
+  get-tsconfig@4.13.0:
+    resolution: {integrity: sha512-1VKTZJCwBrvbd+Wn3AOgQP/2Av+TfTCOlE4AcRJE72W1ksZXbAx8PPBR9RzgTeSPzlPMHrbANMH3LbltH73wxQ==}
 
   giget@2.0.0:
     resolution: {integrity: sha512-L5bGsVkxJbJgdnwyuheIunkGatUF/zssUoxxjACCseZYAVbaqdh9Tsmmlkl8vYan09H7sbvKt4pS8GqKLBrEzA==}
@@ -7802,8 +7805,8 @@ packages:
     resolution: {integrity: sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==}
     engines: {node: '>=12'}
 
-  ioredis@5.8.1:
-    resolution: {integrity: sha512-Qho8TgIamqEPdgiMadJwzRMW3TudIg6vpg4YONokGDudy4eqRIJtDbVX72pfLBcWxvbn3qm/40TyGUObdW4tLQ==}
+  ioredis@5.8.2:
+    resolution: {integrity: sha512-C6uC+kleiIMmjViJINWk80sOQw5lEzse1ZmvD+S/s8p8CWapftSaC+kocGTx6xrbrJ4WmYQGC08ffHLr6ToR6Q==}
     engines: {node: '>=12.22.0'}
 
   iron-webcrypto@1.2.1:
@@ -8044,9 +8047,9 @@ packages:
   is-what@3.14.1:
     resolution: {integrity: sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==}
 
-  is-what@4.1.16:
-    resolution: {integrity: sha512-ZhMwEosbFJkA0YhFnNDgTM4ZxDRsS6HqTo7qsZM08fehyRYIYa0yHu5R6mgo1n/8MgaPBXiPimPD77baVFYg+A==}
-    engines: {node: '>=12.13'}
+  is-what@5.5.0:
+    resolution: {integrity: sha512-oG7cgbmg5kLYae2N5IVd3jm2s+vldjxJzK1pcu9LfpGuQ93MQSzo0okvRna+7y5ifrD+20FE8FvjusyGaz14fw==}
+    engines: {node: '>=18'}
 
   is-windows@1.0.2:
     resolution: {integrity: sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==}
@@ -8838,8 +8841,8 @@ packages:
   node-mock-http@1.0.3:
     resolution: {integrity: sha512-jN8dK25fsfnMrVsEhluUTPkBFY+6ybu7jSB1n+ri/vOGjJxU8J9CZhpSGkHXSkFjtUhbmoncG/YG9ta5Ludqog==}
 
-  node-releases@2.0.25:
-    resolution: {integrity: sha512-4auku8B/vw5psvTiiN9j1dAOsXvMoGqJuKJcR+dTdqiXEK20mMTk1UEo3HS16LeGQsVG6+qKTPM9u/qQ2LqATA==}
+  node-releases@2.0.26:
+    resolution: {integrity: sha512-S2M9YimhSjBSvYnlr5/+umAnPHE++ODwt5e2Ij6FoX45HA/s4vHdkDx1eax2pAPeAOqu4s9b7ppahsyEFdVqQA==}
 
   nopt@7.2.1:
     resolution: {integrity: sha512-taM24ViiimT/XntxbPyJQzCG+p4EKOpgD3mxFwW38mGjVUrfERQOeY4EDHjdnptttfHuHQXFx+lTP08Q+mLa/w==}
@@ -9970,8 +9973,8 @@ packages:
     resolution: {integrity: sha512-OcXjMsGdhL4XnbShKpAcSqPMzQoYkYyhbEaeSko47MjRP9NfEQMhZkXL1DoFlt9LWQn4YttrdnV6X2OiyzBi+A==}
     engines: {node: '>=10'}
 
-  resolve@1.22.10:
-    resolution: {integrity: sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==}
+  resolve@1.22.11:
+    resolution: {integrity: sha512-RfqAvLnMl313r7c9oclB1HhUEAezcpLjz95wFH4LVuhk9JF/r22qmVP9AMmOU4vMX7Q8pN8jwNg/CSpdFnMjTQ==}
     engines: {node: '>= 0.4'}
     hasBin: true
 
@@ -10537,8 +10540,8 @@ packages:
     engines: {node: '>=16 || 14 >=14.17'}
     hasBin: true
 
-  superjson@2.2.2:
-    resolution: {integrity: sha512-5JRxVqC8I8NuOUjzBbvVJAKNM8qoVuH0O77h4WInc/qC2q5IreqKxYwgkga3PfA22OayK2ikceb/B26dztPl+Q==}
+  superjson@2.2.3:
+    resolution: {integrity: sha512-ay3d+LW/S6yppKoTz3Bq4mG0xrS5bFwfWEBmQfbC7lt5wmtk+Obq0TxVuA9eYRirBTQb1K3eEpBRHMQEo0WyVw==}
     engines: {node: '>=16'}
 
   supports-color@10.2.2:
@@ -10857,8 +10860,8 @@ packages:
   undici-types@6.21.0:
     resolution: {integrity: sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==}
 
-  undici-types@7.14.0:
-    resolution: {integrity: sha512-QQiYxHuyZ9gQUIrmPo3IA+hUl4KYk8uSA7cHrcKd/l3p1OTpZcM0Tbp9x7FAtXdAYhlasd60ncPpgu6ihG6TOA==}
+  undici-types@7.16.0:
+    resolution: {integrity: sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==}
 
   undici@7.16.0:
     resolution: {integrity: sha512-QEg3HPMll0o3t2ourKwOeUAZ159Kn9mx5pnzHRQO8+Wixmh88YdZRiIwat0iNzNNXn0yoEtXJqFpyW7eM8BV7g==}
@@ -11339,8 +11342,8 @@ packages:
     peerDependencies:
       vue: ^3.5.17
 
-  vxe-pc-ui@4.10.2:
-    resolution: {integrity: sha512-qEU9h/DLLdFDAXQEKmRRO4Eo1Sh7n66pHJGUflzkGFB85PYxDxzqDLtx4iiS+q0pxVz1bGWG3phLgi20Dx48Zg==}
+  vxe-pc-ui@4.10.5:
+    resolution: {integrity: sha512-ASGSBIhEXRYmro/kVzK+es5DOchWvFXegM2osqrCIKQcFTAkLzLU4mZc8jOihNaxwy212819w8kLdS9KDwpvSg==}
 
   vxe-table@4.17.0:
     resolution: {integrity: sha512-IpyY5uzgMt4NEgTl0brAFe/xSyrBK8U0763uCG8LUe8TbGVuWMD5bCP9DYqkjK7cBmJjXtzwxlQ6I3auzCGd3Q==}
@@ -11882,7 +11885,7 @@ snapshots:
       '@babel/helper-plugin-utils': 7.27.1
       debug: 4.4.3
       lodash.debounce: 4.0.8
-      resolve: 1.22.10
+      resolve: 1.22.11
     transitivePeerDependencies:
       - supports-color
 
@@ -12633,7 +12636,7 @@ snapshots:
     transitivePeerDependencies:
       - encoding
 
-  '@changesets/cli@2.29.7(@types/node@22.18.11)':
+  '@changesets/cli@2.29.7(@types/node@22.18.12)':
     dependencies:
       '@changesets/apply-release-plan': 7.0.13
       '@changesets/assemble-release-plan': 6.0.9
@@ -12649,7 +12652,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.11)
+      '@inquirer/external-editor': 1.0.2(@types/node@22.18.12)
       '@manypkg/get-packages': 1.1.3
       ansi-colors: 4.1.3
       ci-info: 3.9.0
@@ -12810,11 +12813,11 @@ snapshots:
       style-mod: 4.1.3
       w3c-keyname: 2.2.8
 
-  '@commitlint/cli@19.8.1(@types/node@24.8.1)(typescript@5.9.3)':
+  '@commitlint/cli@19.8.1(@types/node@24.9.1)(typescript@5.9.3)':
     dependencies:
       '@commitlint/format': 19.8.1
       '@commitlint/lint': 19.8.1
-      '@commitlint/load': 19.8.1(@types/node@24.8.1)(typescript@5.9.3)
+      '@commitlint/load': 19.8.1(@types/node@24.9.1)(typescript@5.9.3)
       '@commitlint/read': 19.8.1
       '@commitlint/types': 19.8.1
       tinyexec: 1.0.1
@@ -12861,7 +12864,7 @@ snapshots:
       '@commitlint/rules': 19.8.1
       '@commitlint/types': 19.8.1
 
-  '@commitlint/load@19.8.1(@types/node@24.8.1)(typescript@5.9.3)':
+  '@commitlint/load@19.8.1(@types/node@24.9.1)(typescript@5.9.3)':
     dependencies:
       '@commitlint/config-validator': 19.8.1
       '@commitlint/execute-rule': 19.8.1
@@ -12869,7 +12872,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.8.1)(cosmiconfig@9.0.0(typescript@5.9.3))(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)
       lodash.isplainobject: 4.0.6
       lodash.merge: 4.6.2
       lodash.uniq: 4.5.0
@@ -13464,13 +13467,13 @@ snapshots:
     dependencies:
       vue: 3.5.22(typescript@5.9.3)
 
-  '@emnapi/core@1.5.0':
+  '@emnapi/core@1.6.0':
     dependencies:
       '@emnapi/wasi-threads': 1.1.0
       tslib: 2.8.1
     optional: true
 
-  '@emnapi/runtime@1.5.0':
+  '@emnapi/runtime@1.6.0':
     dependencies:
       tslib: 2.8.1
     optional: true
@@ -13489,7 +13492,7 @@ snapshots:
   '@es-joy/jsdoccomment@0.50.2':
     dependencies:
       '@types/estree': 1.0.8
-      '@typescript-eslint/types': 8.46.1
+      '@typescript-eslint/types': 8.46.2
       comment-parser: 1.4.1
       esquery: 1.6.0
       jsdoc-type-pratt-parser: 4.1.0
@@ -13809,12 +13812,12 @@ snapshots:
       '@iconify/types': 2.0.0
       vue: 3.5.22(typescript@5.9.3)
 
-  '@inquirer/external-editor@1.0.2(@types/node@22.18.11)':
+  '@inquirer/external-editor@1.0.2(@types/node@22.18.12)':
     dependencies:
       chardet: 2.1.0
       iconv-lite: 0.7.0
     optionalDependencies:
-      '@types/node': 22.18.11
+      '@types/node': 22.18.12
 
   '@internationalized/date@3.10.0':
     dependencies:
@@ -13857,8 +13860,8 @@ snapshots:
       '@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))
       '@rollup/pluginutils': 5.3.0(rollup@4.52.5)
-      '@typescript-eslint/scope-manager': 8.46.1
-      '@typescript-eslint/typescript-estree': 8.46.1(typescript@5.9.3)
+      '@typescript-eslint/scope-manager': 8.46.2
+      '@typescript-eslint/typescript-estree': 8.46.2(typescript@5.9.3)
       debug: 4.4.3
       fast-glob: 3.3.3
       js-yaml: 4.1.0
@@ -14020,26 +14023,26 @@ snapshots:
 
   '@marijn/find-cluster-break@1.0.2': {}
 
-  '@microsoft/api-extractor-model@7.31.1(@types/node@24.8.1)':
+  '@microsoft/api-extractor-model@7.31.2(@types/node@24.9.1)':
     dependencies:
       '@microsoft/tsdoc': 0.15.1
       '@microsoft/tsdoc-config': 0.17.1
-      '@rushstack/node-core-library': 5.17.0(@types/node@24.8.1)
+      '@rushstack/node-core-library': 5.17.1(@types/node@24.9.1)
     transitivePeerDependencies:
       - '@types/node'
 
-  '@microsoft/api-extractor@7.53.1(@types/node@24.8.1)':
+  '@microsoft/api-extractor@7.53.2(@types/node@24.9.1)':
     dependencies:
-      '@microsoft/api-extractor-model': 7.31.1(@types/node@24.8.1)
+      '@microsoft/api-extractor-model': 7.31.2(@types/node@24.9.1)
       '@microsoft/tsdoc': 0.15.1
       '@microsoft/tsdoc-config': 0.17.1
-      '@rushstack/node-core-library': 5.17.0(@types/node@24.8.1)
+      '@rushstack/node-core-library': 5.17.1(@types/node@24.9.1)
       '@rushstack/rig-package': 0.6.0
-      '@rushstack/terminal': 0.19.1(@types/node@24.8.1)
-      '@rushstack/ts-command-line': 5.1.1(@types/node@24.8.1)
+      '@rushstack/terminal': 0.19.2(@types/node@24.9.1)
+      '@rushstack/ts-command-line': 5.1.2(@types/node@24.9.1)
       lodash: 4.17.21
       minimatch: 10.0.3
-      resolve: 1.22.10
+      resolve: 1.22.11
       semver: 7.5.4
       source-map: 0.6.1
       typescript: 5.8.2
@@ -14053,14 +14056,14 @@ snapshots:
       '@microsoft/tsdoc': 0.15.1
       ajv: 8.12.0
       jju: 1.4.0
-      resolve: 1.22.10
+      resolve: 1.22.11
 
   '@microsoft/tsdoc@0.15.1': {}
 
   '@napi-rs/wasm-runtime@0.2.12':
     dependencies:
-      '@emnapi/core': 1.5.0
-      '@emnapi/runtime': 1.5.0
+      '@emnapi/core': 1.6.0
+      '@emnapi/runtime': 1.6.0
       '@tybys/wasm-util': 0.10.1
     optional: true
 
@@ -14076,17 +14079,17 @@ 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.8.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.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))':
     dependencies:
       '@iconify-json/octicon': 1.2.16
       less: 4.4.2
-      vitepress: 1.6.4(@algolia/client-search@5.40.1)(@types/node@24.8.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.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.40.1)(@types/node@24.8.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.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))':
     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.8.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.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))
       colorette: 2.0.20
       date-fns: 4.1.0
       defu: 6.1.4
@@ -14096,7 +14099,7 @@ snapshots:
       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.8.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.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)
     transitivePeerDependencies:
       - vue
 
@@ -14227,13 +14230,13 @@ snapshots:
       '@pnpm/network.ca-file': 1.0.2
       config-chain: 1.1.13
 
-  '@pnpm/types@1000.8.0': {}
+  '@pnpm/types@1000.9.0': {}
 
-  '@pnpm/workspace.read-manifest@1000.2.4':
+  '@pnpm/workspace.read-manifest@1000.2.5':
     dependencies:
       '@pnpm/constants': 1001.3.1
       '@pnpm/error': 1000.0.5
-      '@pnpm/types': 1000.8.0
+      '@pnpm/types': 1000.9.0
       read-yaml-file: 2.1.0
 
   '@polka/url@1.0.0-next.29': {}
@@ -14303,7 +14306,7 @@ snapshots:
       '@types/resolve': 1.20.2
       deepmerge: 4.3.1
       is-module: 1.0.0
-      resolve: 1.22.10
+      resolve: 1.22.11
     optionalDependencies:
       rollup: 2.79.2
 
@@ -14313,7 +14316,7 @@ snapshots:
       '@types/resolve': 1.20.2
       deepmerge: 4.3.1
       is-module: 1.0.0
-      resolve: 1.22.10
+      resolve: 1.22.11
     optionalDependencies:
       rollup: 4.52.5
 
@@ -14440,7 +14443,7 @@ snapshots:
   '@rollup/rollup-win32-x64-msvc@4.52.5':
     optional: true
 
-  '@rushstack/node-core-library@5.17.0(@types/node@24.8.1)':
+  '@rushstack/node-core-library@5.17.1(@types/node@24.9.1)':
     dependencies:
       ajv: 8.13.0
       ajv-draft-04: 1.0.0(ajv@8.13.0)
@@ -14448,31 +14451,31 @@ snapshots:
       fs-extra: 11.3.2
       import-lazy: 4.0.0
       jju: 1.4.0
-      resolve: 1.22.10
+      resolve: 1.22.11
       semver: 7.5.4
     optionalDependencies:
-      '@types/node': 24.8.1
+      '@types/node': 24.9.1
 
-  '@rushstack/problem-matcher@0.1.1(@types/node@24.8.1)':
+  '@rushstack/problem-matcher@0.1.1(@types/node@24.9.1)':
     optionalDependencies:
-      '@types/node': 24.8.1
+      '@types/node': 24.9.1
 
   '@rushstack/rig-package@0.6.0':
     dependencies:
-      resolve: 1.22.10
+      resolve: 1.22.11
       strip-json-comments: 3.1.1
 
-  '@rushstack/terminal@0.19.1(@types/node@24.8.1)':
+  '@rushstack/terminal@0.19.2(@types/node@24.9.1)':
     dependencies:
-      '@rushstack/node-core-library': 5.17.0(@types/node@24.8.1)
-      '@rushstack/problem-matcher': 0.1.1(@types/node@24.8.1)
+      '@rushstack/node-core-library': 5.17.1(@types/node@24.9.1)
+      '@rushstack/problem-matcher': 0.1.1(@types/node@24.9.1)
       supports-color: 8.1.1
     optionalDependencies:
-      '@types/node': 24.8.1
+      '@types/node': 24.9.1
 
-  '@rushstack/ts-command-line@5.1.1(@types/node@24.8.1)':
+  '@rushstack/ts-command-line@5.1.2(@types/node@24.9.1)':
     dependencies:
-      '@rushstack/terminal': 0.19.1(@types/node@24.8.1)
+      '@rushstack/terminal': 0.19.2(@types/node@24.9.1)
       '@types/argparse': 1.0.38
       argparse: 1.0.10
       string-argv: 0.3.2
@@ -14639,9 +14642,10 @@ snapshots:
 
   '@types/bintrees@1.0.6': {}
 
-  '@types/chai@5.2.2':
+  '@types/chai@5.2.3':
     dependencies:
       '@types/deep-eql': 4.0.2
+      assertion-error: 2.0.1
 
   '@types/codemirror@5.60.16':
     dependencies:
@@ -14649,7 +14653,7 @@ snapshots:
 
   '@types/conventional-commits-parser@5.0.1':
     dependencies:
-      '@types/node': 24.8.1
+      '@types/node': 24.9.1
 
   '@types/crypto-js@4.2.2': {}
 
@@ -14796,7 +14800,7 @@ snapshots:
   '@types/jsonwebtoken@9.0.10':
     dependencies:
       '@types/ms': 2.1.0
-      '@types/node': 24.8.1
+      '@types/node': 24.9.1
 
   '@types/katex@0.16.7': {}
 
@@ -14841,13 +14845,13 @@ snapshots:
 
   '@types/node@12.20.55': {}
 
-  '@types/node@22.18.11':
+  '@types/node@22.18.12':
     dependencies:
       undici-types: 6.21.0
 
-  '@types/node@24.8.1':
+  '@types/node@24.9.1':
     dependencies:
-      undici-types: 7.14.0
+      undici-types: 7.16.0
 
   '@types/nprogress@0.2.3': {}
 
@@ -14859,13 +14863,13 @@ snapshots:
 
   '@types/qrcode@1.5.5':
     dependencies:
-      '@types/node': 24.8.1
+      '@types/node': 24.9.1
 
   '@types/qs@6.14.0': {}
 
   '@types/readdir-glob@1.1.5':
     dependencies:
-      '@types/node': 24.8.1
+      '@types/node': 24.9.1
 
   '@types/resolve@1.20.2': {}
 
@@ -14885,14 +14889,14 @@ snapshots:
 
   '@types/web-bluetooth@0.0.21': {}
 
-  '@typescript-eslint/eslint-plugin@8.46.1(@typescript-eslint/parser@8.46.1(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.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)':
     dependencies:
       '@eslint-community/regexpp': 4.12.1
-      '@typescript-eslint/parser': 8.46.1(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)
-      '@typescript-eslint/scope-manager': 8.46.1
-      '@typescript-eslint/type-utils': 8.46.1(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)
-      '@typescript-eslint/utils': 8.46.1(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)
-      '@typescript-eslint/visitor-keys': 8.46.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)
       graphemer: 1.4.0
       ignore: 7.0.5
@@ -14902,22 +14906,22 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/parser@8.46.1(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)':
+  '@typescript-eslint/parser@8.46.2(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
-      '@typescript-eslint/scope-manager': 8.46.1
-      '@typescript-eslint/types': 8.46.1
-      '@typescript-eslint/typescript-estree': 8.46.1(typescript@5.9.3)
-      '@typescript-eslint/visitor-keys': 8.46.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)
+      '@typescript-eslint/visitor-keys': 8.46.2
       debug: 4.4.3
       eslint: 9.38.0(jiti@2.6.1)
       typescript: 5.9.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/project-service@8.46.1(typescript@5.9.3)':
+  '@typescript-eslint/project-service@8.46.2(typescript@5.9.3)':
     dependencies:
-      '@typescript-eslint/tsconfig-utils': 8.46.1(typescript@5.9.3)
-      '@typescript-eslint/types': 8.46.1
+      '@typescript-eslint/tsconfig-utils': 8.46.2(typescript@5.9.3)
+      '@typescript-eslint/types': 8.46.2
       debug: 4.4.3
       typescript: 5.9.3
     transitivePeerDependencies:
@@ -14928,20 +14932,20 @@ snapshots:
       '@typescript-eslint/types': 7.18.0
       '@typescript-eslint/visitor-keys': 7.18.0
 
-  '@typescript-eslint/scope-manager@8.46.1':
+  '@typescript-eslint/scope-manager@8.46.2':
     dependencies:
-      '@typescript-eslint/types': 8.46.1
-      '@typescript-eslint/visitor-keys': 8.46.1
+      '@typescript-eslint/types': 8.46.2
+      '@typescript-eslint/visitor-keys': 8.46.2
 
-  '@typescript-eslint/tsconfig-utils@8.46.1(typescript@5.9.3)':
+  '@typescript-eslint/tsconfig-utils@8.46.2(typescript@5.9.3)':
     dependencies:
       typescript: 5.9.3
 
-  '@typescript-eslint/type-utils@8.46.1(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)':
+  '@typescript-eslint/type-utils@8.46.2(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
-      '@typescript-eslint/types': 8.46.1
-      '@typescript-eslint/typescript-estree': 8.46.1(typescript@5.9.3)
-      '@typescript-eslint/utils': 8.46.1(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)
+      '@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)
       debug: 4.4.3
       eslint: 9.38.0(jiti@2.6.1)
       ts-api-utils: 2.1.0(typescript@5.9.3)
@@ -14951,7 +14955,7 @@ snapshots:
 
   '@typescript-eslint/types@7.18.0': {}
 
-  '@typescript-eslint/types@8.46.1': {}
+  '@typescript-eslint/types@8.46.2': {}
 
   '@typescript-eslint/typescript-estree@7.18.0(typescript@5.9.3)':
     dependencies:
@@ -14968,12 +14972,12 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/typescript-estree@8.46.1(typescript@5.9.3)':
+  '@typescript-eslint/typescript-estree@8.46.2(typescript@5.9.3)':
     dependencies:
-      '@typescript-eslint/project-service': 8.46.1(typescript@5.9.3)
-      '@typescript-eslint/tsconfig-utils': 8.46.1(typescript@5.9.3)
-      '@typescript-eslint/types': 8.46.1
-      '@typescript-eslint/visitor-keys': 8.46.1
+      '@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
       debug: 4.4.3
       fast-glob: 3.3.3
       is-glob: 4.0.3
@@ -14995,12 +14999,12 @@ snapshots:
       - supports-color
       - typescript
 
-  '@typescript-eslint/utils@8.46.1(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)':
     dependencies:
       '@eslint-community/eslint-utils': 4.9.0(eslint@9.38.0(jiti@2.6.1))
-      '@typescript-eslint/scope-manager': 8.46.1
-      '@typescript-eslint/types': 8.46.1
-      '@typescript-eslint/typescript-estree': 8.46.1(typescript@5.9.3)
+      '@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)
       typescript: 5.9.3
     transitivePeerDependencies:
@@ -15011,9 +15015,9 @@ snapshots:
       '@typescript-eslint/types': 7.18.0
       eslint-visitor-keys: 3.4.3
 
-  '@typescript-eslint/visitor-keys@8.46.1':
+  '@typescript-eslint/visitor-keys@8.46.2':
     dependencies:
-      '@typescript-eslint/types': 8.46.1
+      '@typescript-eslint/types': 8.46.2
       eslint-visitor-keys: 4.2.1
 
   '@ungap/structured-clone@1.3.0': {}
@@ -15104,66 +15108,66 @@ snapshots:
       - rollup
       - supports-color
 
-  '@vite-pwa/vitepress@1.0.1(vite-plugin-pwa@1.1.0(vite@5.4.21(@types/node@24.8.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0))(workbox-build@7.3.0)(workbox-window@7.3.0))':
+  '@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.8.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.9.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0))(workbox-build@7.3.0)(workbox-window@7.3.0)
 
-  '@vitejs/plugin-vue-jsx@5.1.1(vite@7.1.11(@types/node@22.18.11)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))(vue@3.5.22(typescript@5.9.3))':
+  '@vitejs/plugin-vue-jsx@5.1.1(vite@7.1.11(@types/node@22.18.12)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))(vue@3.5.22(typescript@5.9.3))':
     dependencies:
       '@babel/core': 7.28.4
       '@babel/plugin-syntax-typescript': 7.27.1(@babel/core@7.28.4)
       '@babel/plugin-transform-typescript': 7.28.0(@babel/core@7.28.4)
       '@rolldown/pluginutils': 1.0.0-beta.44
       '@vue/babel-plugin-jsx': 1.5.0(@babel/core@7.28.4)
-      vite: 7.1.11(@types/node@22.18.11)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
+      vite: 7.1.11(@types/node@22.18.12)(jiti@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
 
-  '@vitejs/plugin-vue-jsx@5.1.1(vite@7.1.11(@types/node@24.8.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-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))':
     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.8.1)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
+      vite: 7.1.11(@types/node@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
 
-  '@vitejs/plugin-vue@5.2.4(vite@5.4.21(@types/node@24.8.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.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.8.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.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)
 
-  '@vitejs/plugin-vue@6.0.1(vite@7.1.11(@types/node@22.18.11)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))(vue@3.5.22(typescript@5.9.3))':
+  '@vitejs/plugin-vue@6.0.1(vite@7.1.11(@types/node@22.18.12)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))(vue@3.5.22(typescript@5.9.3))':
     dependencies:
       '@rolldown/pluginutils': 1.0.0-beta.29
-      vite: 7.1.11(@types/node@22.18.11)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
+      vite: 7.1.11(@types/node@22.18.12)(jiti@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.8.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@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.8.1)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
+      vite: 7.1.11(@types/node@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)
 
   '@vitest/expect@3.2.4':
     dependencies:
-      '@types/chai': 5.2.2
+      '@types/chai': 5.2.3
       '@vitest/spy': 3.2.4
       '@vitest/utils': 3.2.4
       chai: 5.3.3
       tinyrainbow: 2.0.0
 
-  '@vitest/mocker@3.2.4(vite@7.1.11(@types/node@22.18.11)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))':
+  '@vitest/mocker@3.2.4(vite@7.1.11(@types/node@22.18.12)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))':
     dependencies:
       '@vitest/spy': 3.2.4
       estree-walker: 3.0.3
       magic-string: 0.30.19
     optionalDependencies:
-      vite: 7.1.11(@types/node@22.18.11)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
+      vite: 7.1.11(@types/node@22.18.12)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
 
   '@vitest/pretty-format@3.2.4':
     dependencies:
@@ -15273,14 +15277,14 @@ snapshots:
     dependencies:
       '@vue/devtools-kit': 7.7.7
 
-  '@vue/devtools-core@7.7.7(vite@7.1.11(@types/node@24.8.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.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:
       '@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.8.1)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))
+      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)
     transitivePeerDependencies:
       - vite
@@ -15293,7 +15297,7 @@ snapshots:
       mitt: 3.0.1
       perfect-debounce: 1.0.0
       speakingurl: 14.0.1
-      superjson: 2.2.2
+      superjson: 2.2.3
 
   '@vue/devtools-shared@7.7.7':
     dependencies:
@@ -15780,7 +15784,7 @@ snapshots:
 
   base64-js@1.5.1: {}
 
-  baseline-browser-mapping@2.8.18: {}
+  baseline-browser-mapping@2.8.19: {}
 
   better-path-resolve@1.0.0:
     dependencies:
@@ -15862,10 +15866,10 @@ snapshots:
 
   browserslist@4.26.3:
     dependencies:
-      baseline-browser-mapping: 2.8.18
+      baseline-browser-mapping: 2.8.19
       caniuse-lite: 1.0.30001751
-      electron-to-chromium: 1.5.237
-      node-releases: 2.0.25
+      electron-to-chromium: 1.5.238
+      node-releases: 2.0.26
       update-browserslist-db: 1.1.3(browserslist@4.26.3)
 
   buffer-crc32@1.0.0: {}
@@ -16069,7 +16073,7 @@ snapshots:
       '@ast-grep/napi': 0.37.0
       '@vue/compiler-sfc': 3.5.22
       commander: 12.1.0
-      get-tsconfig: 4.12.0
+      get-tsconfig: 4.13.0
       graph-cycles: 3.0.0
       listr2: 8.3.3
       minimatch: 9.0.5
@@ -16272,9 +16276,9 @@ snapshots:
     dependencies:
       is-what: 3.14.1
 
-  copy-anything@3.0.5:
+  copy-anything@4.0.5:
     dependencies:
-      is-what: 4.1.16
+      is-what: 5.5.0
 
   core-js-compat@3.46.0:
     dependencies:
@@ -16286,9 +16290,9 @@ snapshots:
 
   core-util-is@1.0.3: {}
 
-  cosmiconfig-typescript-loader@6.2.0(@types/node@24.8.1)(cosmiconfig@9.0.0(typescript@5.9.3))(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):
     dependencies:
-      '@types/node': 24.8.1
+      '@types/node': 24.9.1
       cosmiconfig: 9.0.0(typescript@5.9.3)
       jiti: 2.6.1
       typescript: 5.9.3
@@ -16813,7 +16817,7 @@ snapshots:
       please-upgrade-node: 3.2.0
       readdirp: 3.6.0
       require-package-name: 2.0.1
-      resolve: 1.22.10
+      resolve: 1.22.11
       resolve-from: 5.0.0
       semver: 7.7.3
       yargs: 16.2.0
@@ -16994,7 +16998,7 @@ snapshots:
     dependencies:
       jake: 10.9.4
 
-  electron-to-chromium@1.5.237: {}
+  electron-to-chromium@1.5.238: {}
 
   element-plus@2.11.5(vue@3.5.22(typescript@5.9.3)):
     dependencies:
@@ -17217,7 +17221,7 @@ snapshots:
 
   eslint-import-context@0.1.9(unrs-resolver@1.11.1):
     dependencies:
-      get-tsconfig: 4.12.0
+      get-tsconfig: 4.13.0
       stable-hash-x: 0.2.0
     optionalDependencies:
       unrs-resolver: 1.11.1
@@ -17246,9 +17250,9 @@ snapshots:
       eslint: 9.38.0(jiti@2.6.1)
       ignore: 5.3.2
 
-  eslint-plugin-import-x@4.16.1(@typescript-eslint/utils@8.46.1(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.2(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.38.0(jiti@2.6.1)):
     dependencies:
-      '@typescript-eslint/types': 8.46.1
+      '@typescript-eslint/types': 8.46.2
       comment-parser: 1.4.1
       debug: 4.4.3
       eslint: 9.38.0(jiti@2.6.1)
@@ -17259,7 +17263,7 @@ snapshots:
       stable-hash-x: 0.2.0
       unrs-resolver: 1.11.1
     optionalDependencies:
-      '@typescript-eslint/utils': 8.46.1(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)
     transitivePeerDependencies:
       - supports-color
 
@@ -17300,7 +17304,7 @@ snapshots:
       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))
-      get-tsconfig: 4.12.0
+      get-tsconfig: 4.13.0
       globals: 15.15.0
       globrex: 0.1.2
       ignore: 5.3.2
@@ -17313,8 +17317,8 @@ snapshots:
 
   eslint-plugin-perfectionist@4.15.1(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3):
     dependencies:
-      '@typescript-eslint/types': 8.46.1
-      '@typescript-eslint/utils': 8.46.1(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)
+      '@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)
       natural-orderby: 5.0.0
     transitivePeerDependencies:
@@ -17368,24 +17372,24 @@ snapshots:
       semver: 7.7.3
       strip-indent: 4.1.1
 
-  eslint-plugin-unused-imports@4.3.0(@typescript-eslint/eslint-plugin@8.46.1(@typescript-eslint/parser@8.46.1(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.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)):
     dependencies:
       eslint: 9.38.0(jiti@2.6.1)
     optionalDependencies:
-      '@typescript-eslint/eslint-plugin': 8.46.1(@typescript-eslint/parser@8.46.1(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.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-plugin-vitest@0.5.4(@typescript-eslint/eslint-plugin@8.46.1(@typescript-eslint/parser@8.46.1(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.8.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.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)):
     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)
     optionalDependencies:
-      '@typescript-eslint/eslint-plugin': 8.46.1(@typescript-eslint/parser@8.46.1(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.8.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.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)
     transitivePeerDependencies:
       - supports-color
       - typescript
 
-  eslint-plugin-vue@10.5.1(@typescript-eslint/parser@8.46.1(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.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))):
     dependencies:
       '@eslint-community/eslint-utils': 4.9.0(eslint@9.38.0(jiti@2.6.1))
       eslint: 9.38.0(jiti@2.6.1)
@@ -17396,7 +17400,7 @@ snapshots:
       vue-eslint-parser: 10.2.0(eslint@9.38.0(jiti@2.6.1))
       xml-name-validator: 4.0.0
     optionalDependencies:
-      '@typescript-eslint/parser': 8.46.1(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/parser': 8.46.2(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)
 
   eslint-scope@8.4.0:
     dependencies:
@@ -17827,7 +17831,7 @@ snapshots:
       es-errors: 1.3.0
       get-intrinsic: 1.3.0
 
-  get-tsconfig@4.12.0:
+  get-tsconfig@4.13.0:
     dependencies:
       resolve-pkg-maps: 1.0.0
 
@@ -18175,7 +18179,7 @@ snapshots:
 
   internmap@2.0.3: {}
 
-  ioredis@5.8.1:
+  ioredis@5.8.2:
     dependencies:
       '@ioredis/commands': 1.4.0
       cluster-key-slot: 1.1.2
@@ -18388,7 +18392,7 @@ snapshots:
 
   is-what@3.14.1: {}
 
-  is-what@4.1.16: {}
+  is-what@5.5.0: {}
 
   is-windows@1.0.2: {}
 
@@ -19149,7 +19153,7 @@ snapshots:
       h3: 1.15.4
       hookable: 5.5.3
       httpxy: 0.1.7
-      ioredis: 5.8.1
+      ioredis: 5.8.2
       jiti: 2.6.1
       klona: 2.0.6
       knitwork: 1.2.0
@@ -19182,7 +19186,7 @@ snapshots:
       unenv: 2.0.0-rc.21
       unimport: 5.5.0
       unplugin-utils: 0.3.1
-      unstorage: 1.17.1(db0@0.3.4)(ioredis@5.8.1)
+      unstorage: 1.17.1(db0@0.3.4)(ioredis@5.8.2)
       untyped: 2.0.0
       unwasm: 0.3.11
       youch: 4.1.0-beta.11
@@ -19258,7 +19262,7 @@ snapshots:
 
   node-mock-http@1.0.3: {}
 
-  node-releases@2.0.25: {}
+  node-releases@2.0.26: {}
 
   nopt@7.2.1:
     dependencies:
@@ -19749,14 +19753,14 @@ snapshots:
       postcss: 8.5.6
       postcss-value-parser: 4.2.0
       read-cache: 1.0.0
-      resolve: 1.22.10
+      resolve: 1.22.11
 
   postcss-import@16.1.1(postcss@8.5.6):
     dependencies:
       postcss: 8.5.6
       postcss-value-parser: 4.2.0
       read-cache: 1.0.0
-      resolve: 1.22.10
+      resolve: 1.22.11
 
   postcss-js@4.1.0(postcss@8.5.6):
     dependencies:
@@ -20340,7 +20344,7 @@ snapshots:
 
   resolve.exports@2.0.3: {}
 
-  resolve@1.22.10:
+  resolve@1.22.11:
     dependencies:
       is-core-module: 2.16.1
       path-parse: 1.0.7
@@ -20991,9 +20995,9 @@ snapshots:
       pirates: 4.0.7
       ts-interface-checker: 0.1.13
 
-  superjson@2.2.2:
+  superjson@2.2.3:
     dependencies:
-      copy-anything: 3.0.5
+      copy-anything: 4.0.5
 
   supports-color@10.2.2: {}
 
@@ -21091,7 +21095,7 @@ snapshots:
       postcss-load-config: 6.0.1(jiti@1.21.7)(postcss@8.5.6)(yaml@2.8.1)
       postcss-nested: 6.2.0(postcss@8.5.6)
       postcss-selector-parser: 6.1.2
-      resolve: 1.22.10
+      resolve: 1.22.11
       sucrase: 3.35.0
     transitivePeerDependencies:
       - tsx
@@ -21356,7 +21360,7 @@ snapshots:
 
   undici-types@6.21.0: {}
 
-  undici-types@7.14.0: {}
+  undici-types@7.16.0: {}
 
   undici@7.16.0: {}
 
@@ -21492,7 +21496,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.1):
+  unstorage@1.17.1(db0@0.3.4)(ioredis@5.8.2):
     dependencies:
       anymatch: 3.1.3
       chokidar: 4.0.3
@@ -21504,7 +21508,7 @@ snapshots:
       ufo: 1.6.1
     optionalDependencies:
       db0: 0.3.4
-      ioredis: 5.8.1
+      ioredis: 5.8.2
 
   untun@0.1.3:
     dependencies:
@@ -21579,17 +21583,17 @@ snapshots:
       '@types/unist': 3.0.3
       vfile-message: 4.0.3
 
-  vite-hot-client@2.1.0(vite@7.1.11(@types/node@24.8.1)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)):
+  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.8.1)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
+      vite: 7.1.11(@types/node@24.9.1)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
 
-  vite-node@3.2.4(@types/node@22.18.11)(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):
     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.11)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
+      vite: 7.1.11(@types/node@22.18.12)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
     transitivePeerDependencies:
       - '@types/node'
       - jiti
@@ -21604,13 +21608,13 @@ snapshots:
       - tsx
       - yaml
 
-  vite-node@3.2.4(@types/node@24.8.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):
     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.8.1)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
+      vite: 7.1.11(@types/node@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
@@ -21626,18 +21630,18 @@ snapshots:
       - yaml
     optional: true
 
-  vite-plugin-compression@0.5.1(vite@7.1.11(@types/node@24.8.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.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:
       chalk: 4.1.2
       debug: 4.4.3
       fs-extra: 10.1.0
-      vite: 7.1.11(@types/node@24.8.1)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
+      vite: 7.1.11(@types/node@24.9.1)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
     transitivePeerDependencies:
       - supports-color
 
-  vite-plugin-dts@4.5.4(@types/node@24.8.1)(rollup@4.52.5)(typescript@5.9.3)(vite@7.1.11(@types/node@24.8.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.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)):
     dependencies:
-      '@microsoft/api-extractor': 7.53.1(@types/node@24.8.1)
+      '@microsoft/api-extractor': 7.53.2(@types/node@24.9.1)
       '@rollup/pluginutils': 5.3.0(rollup@4.52.5)
       '@volar/typescript': 2.4.23
       '@vue/language-core': 2.2.0(typescript@5.9.3)
@@ -21648,13 +21652,13 @@ snapshots:
       magic-string: 0.30.19
       typescript: 5.9.3
     optionalDependencies:
-      vite: 7.1.11(@types/node@24.8.1)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
+      vite: 7.1.11(@types/node@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'
       - rollup
       - supports-color
 
-  vite-plugin-html@3.2.2(vite@7.1.11(@types/node@24.8.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.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:
       '@rollup/pluginutils': 4.2.1
       colorette: 2.0.20
@@ -21668,9 +21672,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.8.1)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
+      vite: 7.1.11(@types/node@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.8.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)):
     dependencies:
       '@antfu/utils': 0.7.10
       '@rollup/pluginutils': 5.3.0(rollup@4.52.5)
@@ -21681,7 +21685,7 @@ snapshots:
       perfect-debounce: 1.0.0
       picocolors: 1.1.1
       sirv: 3.0.2
-      vite: 7.1.11(@types/node@24.8.1)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
+      vite: 7.1.11(@types/node@24.9.1)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
     transitivePeerDependencies:
       - rollup
       - supports-color
@@ -21693,45 +21697,45 @@ snapshots:
       rollup: 4.52.5
       xe-utils: 3.7.9
 
-  vite-plugin-pwa@1.1.0(vite@5.4.21(@types/node@24.8.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.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:
       debug: 4.4.3
       pretty-bytes: 6.1.1
       tinyglobby: 0.2.15
-      vite: 5.4.21(@types/node@24.8.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.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
     transitivePeerDependencies:
       - supports-color
 
-  vite-plugin-pwa@1.1.0(vite@7.1.11(@types/node@24.8.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.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):
     dependencies:
       debug: 4.4.3
       pretty-bytes: 6.1.1
       tinyglobby: 0.2.15
-      vite: 7.1.11(@types/node@24.8.1)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
+      vite: 7.1.11(@types/node@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
     transitivePeerDependencies:
       - supports-color
 
-  vite-plugin-vue-devtools@7.7.7(rollup@4.52.5)(vite@7.1.11(@types/node@24.8.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.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:
-      '@vue/devtools-core': 7.7.7(vite@7.1.11(@types/node@24.8.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.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-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.8.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.8.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.8.1)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))
+      vite: 7.1.11(@types/node@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))
     transitivePeerDependencies:
       - '@nuxt/kit'
       - rollup
       - supports-color
       - vue
 
-  vite-plugin-vue-inspector@5.3.2(vite@7.1.11(@types/node@24.8.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)):
     dependencies:
       '@babel/core': 7.28.4
       '@babel/plugin-proposal-decorators': 7.28.0(@babel/core@7.28.4)
@@ -21742,23 +21746,23 @@ snapshots:
       '@vue/compiler-dom': 3.5.22
       kolorist: 1.8.0
       magic-string: 0.30.19
-      vite: 7.1.11(@types/node@24.8.1)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
+      vite: 7.1.11(@types/node@24.9.1)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
     transitivePeerDependencies:
       - supports-color
 
-  vite@5.4.21(@types/node@24.8.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0):
+  vite@5.4.21(@types/node@24.9.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0):
     dependencies:
       esbuild: 0.25.3
       postcss: 8.5.6
       rollup: 4.52.5
     optionalDependencies:
-      '@types/node': 24.8.1
+      '@types/node': 24.9.1
       fsevents: 2.3.3
       less: 4.4.2
       sass: 1.93.2
       terser: 5.44.0
 
-  vite@7.1.11(@types/node@22.18.11)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1):
+  vite@7.1.11(@types/node@22.18.12)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1):
     dependencies:
       esbuild: 0.25.3
       fdir: 6.5.0(picomatch@4.0.3)
@@ -21767,7 +21771,7 @@ snapshots:
       rollup: 4.52.5
       tinyglobby: 0.2.15
     optionalDependencies:
-      '@types/node': 22.18.11
+      '@types/node': 22.18.12
       fsevents: 2.3.3
       jiti: 2.6.1
       less: 4.4.2
@@ -21775,7 +21779,7 @@ snapshots:
       terser: 5.44.0
       yaml: 2.8.1
 
-  vite@7.1.11(@types/node@24.8.1)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1):
+  vite@7.1.11(@types/node@24.9.1)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1):
     dependencies:
       esbuild: 0.25.3
       fdir: 6.5.0(picomatch@4.0.3)
@@ -21784,7 +21788,7 @@ snapshots:
       rollup: 4.52.5
       tinyglobby: 0.2.15
     optionalDependencies:
-      '@types/node': 24.8.1
+      '@types/node': 24.9.1
       fsevents: 2.3.3
       jiti: 2.6.1
       less: 4.4.2
@@ -21792,17 +21796,17 @@ snapshots:
       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.8.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)):
+  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/utils': 3.0.2
       markdown-it: 14.1.0
-      vite: 5.4.21(@types/node@24.8.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)
+      vite: 5.4.21(@types/node@24.9.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)
     transitivePeerDependencies:
       - supports-color
 
-  vitepress@1.6.4(@algolia/client-search@5.40.1)(@types/node@24.8.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.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):
     dependencies:
       '@docsearch/css': 3.8.2
       '@docsearch/js': 3.8.2(@algolia/client-search@5.40.1)(search-insights@2.17.3)
@@ -21811,7 +21815,7 @@ snapshots:
       '@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.8.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.9.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0))(vue@3.5.22(typescript@5.9.3))
       '@vue/devtools-api': 7.7.7
       '@vue/shared': 3.5.22
       '@vueuse/core': 12.8.2(typescript@5.9.3)
@@ -21820,7 +21824,7 @@ snapshots:
       mark.js: 8.11.1
       minisearch: 7.2.0
       shiki: 2.5.0
-      vite: 5.4.21(@types/node@24.8.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.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)
     optionalDependencies:
       postcss: 8.5.6
@@ -21851,11 +21855,11 @@ snapshots:
       - typescript
       - universal-cookie
 
-  vitest@3.2.4(@types/node@22.18.11)(happy-dom@17.6.3)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1):
+  vitest@3.2.4(@types/node@22.18.12)(happy-dom@17.6.3)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1):
     dependencies:
-      '@types/chai': 5.2.2
+      '@types/chai': 5.2.3
       '@vitest/expect': 3.2.4
-      '@vitest/mocker': 3.2.4(vite@7.1.11(@types/node@22.18.11)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))
+      '@vitest/mocker': 3.2.4(vite@7.1.11(@types/node@22.18.12)(jiti@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
@@ -21873,11 +21877,11 @@ snapshots:
       tinyglobby: 0.2.15
       tinypool: 1.1.1
       tinyrainbow: 2.0.0
-      vite: 7.1.11(@types/node@22.18.11)(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.11)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
+      vite: 7.1.11(@types/node@22.18.12)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
+      vite-node: 3.2.4(@types/node@22.18.12)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
       why-is-node-running: 2.3.0
     optionalDependencies:
-      '@types/node': 22.18.11
+      '@types/node': 22.18.12
       happy-dom: 17.6.3
     transitivePeerDependencies:
       - jiti
@@ -21893,11 +21897,11 @@ snapshots:
       - tsx
       - yaml
 
-  vitest@3.2.4(@types/node@24.8.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):
+  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.2
+      '@types/chai': 5.2.3
       '@vitest/expect': 3.2.4
-      '@vitest/mocker': 3.2.4(vite@7.1.11(@types/node@22.18.11)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1))
+      '@vitest/mocker': 3.2.4(vite@7.1.11(@types/node@22.18.12)(jiti@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
@@ -21915,11 +21919,11 @@ snapshots:
       tinyglobby: 0.2.15
       tinypool: 1.1.1
       tinyrainbow: 2.0.0
-      vite: 7.1.11(@types/node@24.8.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.8.1)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(yaml@2.8.1)
+      vite: 7.1.11(@types/node@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.8.1
+      '@types/node': 24.9.1
       happy-dom: 17.6.3
     transitivePeerDependencies:
       - jiti
@@ -22033,7 +22037,7 @@ snapshots:
       vooks: 0.2.12(vue@3.5.22(typescript@5.9.3))
       vue: 3.5.22(typescript@5.9.3)
 
-  vxe-pc-ui@4.10.2(vue@3.5.22(typescript@5.9.3)):
+  vxe-pc-ui@4.10.5(vue@3.5.22(typescript@5.9.3)):
     dependencies:
       '@vxe-ui/core': 4.2.12(vue@3.5.22(typescript@5.9.3))
     transitivePeerDependencies:
@@ -22041,7 +22045,7 @@ snapshots:
 
   vxe-table@4.17.0(vue@3.5.22(typescript@5.9.3)):
     dependencies:
-      vxe-pc-ui: 4.10.2(vue@3.5.22(typescript@5.9.3))
+      vxe-pc-ui: 4.10.5(vue@3.5.22(typescript@5.9.3))
     transitivePeerDependencies:
       - vue