fix: eslint

.github/workflows/deploy.yml

@@ -30,7 +30,7 @@ jobs:
         run: pnpm build:play
 
       - name: Sync Playground files
-        uses: SamKirkland/FTP-Deploy-Action@v4.3.5
+        uses: SamKirkland/FTP-Deploy-Action@v4.3.6
         with:
           server: ${{ secrets.PRO_FTP_HOST }}
           username: ${{ secrets.WEB_PLAYGROUND_FTP_ACCOUNT }}
@@ -54,7 +54,7 @@ jobs:
         run: pnpm build:docs
 
       - name: Sync Docs files
-        uses: SamKirkland/FTP-Deploy-Action@v4.3.5
+        uses: SamKirkland/FTP-Deploy-Action@v4.3.6
         with:
           server: ${{ secrets.PRO_FTP_HOST }}
           username: ${{ secrets.WEBSITE_FTP_ACCOUNT }}
@@ -85,7 +85,7 @@ jobs:
         run: pnpm run build:antd
 
       - name: Sync files
-        uses: SamKirkland/FTP-Deploy-Action@v4.3.5
+        uses: SamKirkland/FTP-Deploy-Action@v4.3.6
         with:
           server: ${{ secrets.PRO_FTP_HOST }}
           username: ${{ secrets.WEB_ANTD_FTP_ACCOUNT }}
@@ -116,7 +116,7 @@ jobs:
         run: pnpm run build:ele
 
       - name: Sync files
-        uses: SamKirkland/FTP-Deploy-Action@v4.3.5
+        uses: SamKirkland/FTP-Deploy-Action@v4.3.6
         with:
           server: ${{ secrets.PRO_FTP_HOST }}
           username: ${{ secrets.WEB_ELE_FTP_ACCOUNT }}
@@ -147,7 +147,7 @@ jobs:
         run: pnpm run build:naive
 
       - name: Sync files
-        uses: SamKirkland/FTP-Deploy-Action@v4.3.5
+        uses: SamKirkland/FTP-Deploy-Action@v4.3.6
         with:
           server: ${{ secrets.PRO_FTP_HOST }}
           username: ${{ secrets.WEB_NAIVE_FTP_ACCOUNT }}

.npmrc

@@ -1,4 +1,4 @@
-registry = "https://registry.npmmirror.com"
+registry=https://registry.npmmirror.com
 public-hoist-pattern[]=lefthook
 public-hoist-pattern[]=eslint
 public-hoist-pattern[]=prettier

.workflow/pipeline-20251103.yml

@@ -0,0 +1,56 @@
+version: '1.0'
+name: pipeline-20251103
+displayName: master-build
+triggers:
+  trigger: auto
+  push:
+    branches:
+      prefix:
+        - ''
+  pr:
+    branches:
+      prefix:
+        - ''
+  schedule:
+    - cron: '* * * 1 * ? *'
+stages:
+  - name: stage-72bb5db9
+    displayName: build
+    strategy: naturally
+    trigger: auto
+    executor: []
+    steps:
+      - step: build@nodejs
+        name: build_nodejs
+        displayName: Nodejs 构建
+        nodeVersion: 24.5.0
+        commands:
+          - '# 设置NPM源，提升安装速度'
+          - npm config set registry https://registry.npmmirror.com
+          - '# 安装pnpm'
+          - npm add -g pnpm
+          - '# 安装依赖'
+          - pnpm i
+          - '# 检查lint'
+          - pnpm lint
+          - '# 检查check'
+          - pnpm check
+          - '# 执行编译命令antd'
+          - pnpm build:antd
+          - '# 执行编译命令ele'
+          - pnpm build:ele
+          - '# 执行编译命令naive'
+          - pnpm build:naive
+        artifacts:
+          - name: BUILD_ARTIFACT
+            path:
+              - ./apps/web-antd/dist/
+              - ./apps/web-ele/dist/
+              - ./apps/web-naive/dist/
+        caches:
+          - ~/.npm
+          - ~/.yarn
+          - ~/.pnpm
+        notify: []
+        strategy:
+          retry: '0'

apps/backend-mock/api/timezone/getTimezone.ts

@@ -0,0 +1,12 @@
+import { eventHandler } from 'h3';
+import { verifyAccessToken } from '~/utils/jwt-utils';
+import { unAuthorizedResponse, useResponseSuccess } from '~/utils/response';
+import { getTimezone } from '~/utils/timezone-utils';
+
+export default eventHandler((event) => {
+  const userinfo = verifyAccessToken(event);
+  if (!userinfo) {
+    return unAuthorizedResponse(event);
+  }
+  return useResponseSuccess(getTimezone());
+});

apps/backend-mock/api/timezone/getTimezoneOptions.ts

@@ -0,0 +1,11 @@
+import { eventHandler } from 'h3';
+import { TIME_ZONE_OPTIONS } from '~/utils/mock-data';
+import { useResponseSuccess } from '~/utils/response';
+
+export default eventHandler(() => {
+  const data = TIME_ZONE_OPTIONS.map((o) => ({
+    label: `${o.timezone} (GMT${o.offset >= 0 ? `+${o.offset}` : o.offset})`,
+    value: o.timezone,
+  }));
+  return useResponseSuccess(data);
+});

apps/backend-mock/api/timezone/setTimezone.ts

@@ -0,0 +1,22 @@
+import { eventHandler, readBody } from 'h3';
+import { verifyAccessToken } from '~/utils/jwt-utils';
+import { TIME_ZONE_OPTIONS } from '~/utils/mock-data';
+import { unAuthorizedResponse, useResponseSuccess } from '~/utils/response';
+import { setTimezone } from '~/utils/timezone-utils';
+
+export default eventHandler(async (event) => {
+  const userinfo = verifyAccessToken(event);
+  if (!userinfo) {
+    return unAuthorizedResponse(event);
+  }
+  const body = await readBody<{ timezone?: unknown }>(event);
+  const timezone =
+    typeof body?.timezone === 'string' ? body.timezone : undefined;
+  const allowed = TIME_ZONE_OPTIONS.some((o) => o.timezone === timezone);
+  if (!timezone || !allowed) {
+    setResponseStatus(event, 400);
+    return useResponseError('Bad Request', 'Invalid timezone');
+  }
+  setTimezone(timezone);
+  return useResponseSuccess({});
+});

apps/backend-mock/utils/mock-data.ts

@@ -7,6 +7,11 @@ export interface UserInfo {
   homePath?: string;
 }
 
+export interface TimezoneOption {
+  offset: number;
+  timezone: string;
+}
+
 export const MOCK_USERS: UserInfo[] = [
   {
     id: 0,
@@ -276,7 +281,7 @@ export const MOCK_MENU_LIST = [
         children: [
           {
             id: 20_401,
-            pid: 201,
+            pid: 202,
             name: 'SystemDeptCreate',
             status: 1,
             type: 'button',
@@ -285,7 +290,7 @@ export const MOCK_MENU_LIST = [
           },
           {
             id: 20_402,
-            pid: 201,
+            pid: 202,
             name: 'SystemDeptEdit',
             status: 1,
             type: 'button',
@@ -294,7 +299,7 @@ export const MOCK_MENU_LIST = [
           },
           {
             id: 20_403,
-            pid: 201,
+            pid: 202,
             name: 'SystemDeptDelete',
             status: 1,
             type: 'button',
@@ -388,3 +393,29 @@ export function getMenuIds(menus: any[]) {
   });
   return ids;
 }
+
+/**
+ * 时区选项
+ */
+export const TIME_ZONE_OPTIONS: TimezoneOption[] = [
+  {
+    offset: -5,
+    timezone: 'America/New_York',
+  },
+  {
+    offset: 0,
+    timezone: 'Europe/London',
+  },
+  {
+    offset: 8,
+    timezone: 'Asia/Shanghai',
+  },
+  {
+    offset: 9,
+    timezone: 'Asia/Tokyo',
+  },
+  {
+    offset: 9,
+    timezone: 'Asia/Seoul',
+  },
+];

apps/backend-mock/utils/timezone-utils.ts

@@ -0,0 +1,9 @@
+let mockTimeZone: null | string = null;
+
+export const setTimezone = (timeZone: string) => {
+  mockTimeZone = timeZone;
+};
+
+export const getTimezone = () => {
+  return mockTimeZone;
+};

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[]; // 开始和结束时间（仅前端使用）

apps/web-antd/src/components/cron-tab/cron-tab.vue

@@ -420,7 +420,7 @@ function inputChange() {
     @input="inputChange"
   >
     <template #addonAfter>
-      <Select v-model:value="select" placeholder="生成器" style="width: 115px">
+      <Select v-model:value="select" placeholder="生成器" class="w-36">
         <Select.Option value="0 * * * * ?">每分钟</Select.Option>
         <Select.Option value="0 0 * * * ?">每小时</Select.Option>
         <Select.Option value="0 0 0 * * ?">每天零点</Select.Option>
@@ -946,20 +946,20 @@ function inputChange() {
   padding: 0 15px;
   font-size: 12px;
   line-height: 30px;
-  background: var(--ant-primary-color-active-bg);
+  background: hsl(var(--primary) / 10%);
   border-radius: 4px;
 }
 
 .sc-cron :deep(.ant-tabs-tab.ant-tabs-tab-active) .sc-cron-num h4 {
   color: #fff;
-  background: var(--ant-primary-color);
+  background: hsl(var(--primary));
 }
 
 [data-theme='dark'] .sc-cron-num h4 {
-  background: var(--ant-color-white);
+  background: hsl(var(--white));
 }
 
 .input-with-select .ant-input-group-addon {
-  background-color: var(--ant-color-fill-alter);
+  background-color: hsl(var(--muted));
 }
 </style>

apps/web-antd/src/components/description/description.vue

@@ -133,9 +133,7 @@ export default defineComponent({
             >
               {() => {
                 if (item.slot) {
-                  // TODO @xingyu：这里要 inline 掉么？
-                  const slotContent = getSlot(slots, item.slot, data);
-                  return slotContent;
+                  return getSlot(slots, item.slot, data);
                 }
                 if (!contentMinWidth) {
                   return getContent();

apps/web-antd/src/components/shortcut-date-range-picker/shortcut-date-range-picker.vue

@@ -81,7 +81,7 @@ onMounted(() => {
       :value-format="rangePickerProps.valueFormat"
       :placeholder="rangePickerProps.placeholder"
       :presets="rangePickerProps.presets"
-      class="!w-[235px]"
+      class="!w-full !max-w-96"
       @change="handleDateRangeChange"
     />
     <slot></slot>

apps/web-antd/src/layouts/auth.vue

@@ -8,12 +8,14 @@ import { $t } from '#/locales';
 
 const appName = computed(() => preferences.app.name);
 const logo = computed(() => preferences.logo.source);
+const logoDark = computed(() => preferences.logo.sourceDark);
 </script>
 
 <template>
   <AuthPageLayout
     :app-name="appName"
     :logo="logo"
+    :logo-dark="logoDark"
     :page-description="$t('authentication.pageDesc')"
     :page-title="$t('authentication.pageTitle')"
   >

apps/web-antd/src/plugins/form-create/index.ts

@@ -96,7 +96,7 @@ export function setupFormCreate(app: App) {
   components.forEach((component) => {
     app.component(component.name as string, component);
   });
-  // TODO @xingyu：这里为啥 app.component('AMessage', message); 看官方是没有的；
+  // TODO @xingyu：这里为啥 app.component('AMessage', message); 看官方是没有的； 需要额外引入
   app.component('AMessage', message);
   formCreate.use(install);
   app.use(formCreate);

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

@@ -0,0 +1,102 @@
+import type { MallKefuConversationApi } from '#/api/mall/promotion/kefu/conversation';
+import type { MallKefuMessageApi } from '#/api/mall/promotion/kefu/message';
+
+import { isEmpty } from '@vben/utils';
+
+import { acceptHMRUpdate, defineStore } from 'pinia';
+
+import * as KeFuConversationApi from '#/api/mall/promotion/kefu/conversation';
+
+interface MallKefuInfoVO {
+  conversationList: MallKefuConversationApi.Conversation[]; // 会话列表
+  conversationMessageList: Map<number, MallKefuMessageApi.Message[]>; // 会话消息
+}
+
+export const useMallKefuStore = defineStore('mall-kefu', {
+  state: (): MallKefuInfoVO => ({
+    conversationList: [],
+    conversationMessageList: new Map<number, MallKefuMessageApi.Message[]>(), // key 会话，value 会话消息列表
+  }),
+  getters: {
+    getConversationList(): MallKefuConversationApi.Conversation[] {
+      return this.conversationList;
+    },
+    getConversationMessageList(): (
+      conversationId: number,
+    ) => MallKefuMessageApi.Message[] | undefined {
+      return (conversationId: number) =>
+        this.conversationMessageList.get(conversationId);
+    },
+  },
+  actions: {
+    // ======================= 会话消息相关 =======================
+    /** 缓存历史消息 */
+    saveMessageList(
+      conversationId: number,
+      messageList: MallKefuMessageApi.Message[],
+    ) {
+      this.conversationMessageList.set(conversationId, messageList);
+    },
+
+    // ======================= 会话相关 =======================
+    /** 加载会话缓存列表 */
+    async setConversationList() {
+      // TODO @jave：idea linter 告警，修复下；
+      // TODO @jave：不使用 KeFuConversationApi.，直接用 getConversationList
+      this.conversationList = await KeFuConversationApi.getConversationList();
+      this.conversationSort();
+    },
+    /** 更新会话缓存已读 */
+    async updateConversationStatus(conversationId: number) {
+      if (isEmpty(this.conversationList)) {
+        return;
+      }
+      const conversation = this.conversationList.find(
+        (item) => item.id === conversationId,
+      );
+      conversation && (conversation.adminUnreadMessageCount = 0);
+    },
+    /** 更新会话缓存 */
+    async updateConversation(conversationId: number) {
+      if (isEmpty(this.conversationList)) {
+        return;
+      }
+
+      const conversation =
+        await KeFuConversationApi.getConversation(conversationId);
+      this.deleteConversation(conversationId);
+      conversation && this.conversationList.push(conversation);
+      this.conversationSort();
+    },
+    /** 删除会话缓存 */
+    deleteConversation(conversationId: number) {
+      const index = this.conversationList.findIndex(
+        (item) => item.id === conversationId,
+      );
+      // 存在则删除
+      if (index !== -1) {
+        this.conversationList.splice(index, 1);
+      }
+    },
+    conversationSort() {
+      // 按置顶属性和最后消息时间排序
+      this.conversationList.sort((a, b) => {
+        // 按照置顶排序，置顶的会在前面
+        if (a.adminPinned !== b.adminPinned) {
+          return a.adminPinned ? -1 : 1;
+        }
+        // 按照最后消息时间排序，最近的会在前面
+        return (
+          (b.lastMessageTime as unknown as number) -
+          (a.lastMessageTime as unknown as number)
+        );
+      });
+    },
+  },
+});
+
+// 解决热更新问题
+const hot = import.meta.hot;
+if (hot) {
+  hot.accept(acceptHMRUpdate(useMallKefuStore, hot));
+}

apps/web-antd/src/views/ai/chat/index/components/conversation/ConversationList.vue

@@ -343,9 +343,9 @@ onMounted(async () => {
             v-if="conversationMap[conversationKey].length > 0"
             class="classify-title pt-2"
           >
-            <b class="mx-1">
+            <p class="mx-1">
               {{ conversationKey }}
-            </b>
+            </p>
           </div>
 
           <div
@@ -357,11 +357,9 @@ onMounted(async () => {
             class="mt-1"
           >
             <div
-              class="flex cursor-pointer flex-row items-center justify-between rounded-lg px-2 leading-10"
+              class="mb-2 flex cursor-pointer flex-row items-center justify-between rounded-lg px-2 leading-10"
               :class="[
-                conversation.id === activeConversationId
-                  ? 'bg-success-600'
-                  : '',
+                conversation.id === activeConversationId ? 'bg-success' : '',
               ]"
             >
               <div class="flex items-center">

apps/web-antd/src/views/ai/chat/index/index.vue

@@ -514,7 +514,7 @@ onMounted(async () => {
       <!-- 右侧：详情部分 -->
       <Layout class="bg-card mx-4">
         <Layout.Header
-          class="!bg-card border-border flex items-center justify-between border-b"
+          class="!bg-card border-border flex !h-12 items-center justify-between border-b"
         >
           <div class="text-lg font-bold">
             {{ activeConversation?.title ? activeConversation?.title : '对话' }}
@@ -574,11 +574,9 @@ onMounted(async () => {
         </Layout.Content>
 
         <Layout.Footer class="!bg-card m-0 flex flex-col p-0">
-          <form
-            class="border-border my-5 mb-5 mt-2 flex flex-col rounded-xl border px-2 py-2.5"
-          >
+          <form class="border-border m-2 flex flex-col rounded-xl border p-2">
             <textarea
-              class="box-border h-24 resize-none overflow-auto rounded-md px-0 py-1 focus:outline-none"
+              class="box-border h-24 resize-none overflow-auto rounded-md p-2 focus:outline-none"
               v-model="prompt"
               @keydown="handleSendByKeydown"
               @input="handlePromptInput"

apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/time-event-config/TimeEventConfig.vue

@@ -246,7 +246,7 @@ watch(
       <Input
         v-model:value="condition"
         :placeholder="placeholder"
-        style="width: calc(100% - 100px)"
+        class="w-[calc(100vw-25%)]"
         :readonly="type !== 'duration' && type !== 'cycle'"
         @focus="handleInputFocus"
         @blur="updateNode"

apps/web-antd/src/views/bpm/model/definition/data.ts

@@ -1,5 +1,4 @@
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { BpmProcessDefinitionApi } from '#/api/bpm/definition';
 
 import { DICT_TYPE } from '@vben/constants';
 

apps/web-antd/src/views/bpm/model/definition/index.vue

@@ -32,15 +32,18 @@ function handleRefresh() {
 }
 
 /** 查看表单详情 */
-function handleFormDetail(row: BpmProcessDefinitionApi.ProcessDefinition) {
+async function handleFormDetail(
+  row: BpmProcessDefinitionApi.ProcessDefinition,
+) {
   if (row.formType === BpmModelFormType.NORMAL) {
     const data = {
       id: row.formId,
     };
     formCreateDetailModalApi.setData(data).open();
   } else {
-    // TODO 待实现 jason 这里要改么？
-    console.warn('业务表单待实现', row);
+    await router.push({
+      path: row.formCustomCreatePath,
+    });
   }
 }
 

apps/web-antd/src/views/bpm/model/form/index.vue

@@ -309,8 +309,6 @@ async function handleSave() {
     }
   } catch (error: any) {
     console.error('保存失败:', error);
-    // TODO @jason：这个提示，还要么？？？
-    // message.warning(error.msg || '请完善所有步骤的必填信息');
   }
 }
 

apps/web-antd/src/views/bpm/model/form/modules/bpm-model-editor.vue

@@ -121,11 +121,9 @@ onBeforeUnmount(() => {
     />
   </ContentWrap>
 </template>
-<style lang="scss">
-// TODO @jason：tailwind？
-.process-panel__container {
-  position: absolute;
-  top: 110px;
-  right: 70px;
+
+<style scoped>
+:deep(.process-panel__container) {
+  @apply absolute right-[20px] top-[70px];
 }
 </style>

apps/web-antd/src/views/bpm/model/modules/category-draggable-model.vue

@@ -238,15 +238,16 @@ async function handleDeleteCategory() {
 }
 
 /** 处理表单详情点击 */
-function handleFormDetail(row: any) {
+async function handleFormDetail(row: any) {
   if (row.formType === BpmModelFormType.NORMAL) {
     const data = {
       id: row.formId,
     };
     formCreateDetailModalApi.setData(data).open();
   } else {
-    // TODO 待实现 jason：是不是已经 ok 啦？
-    console.warn('业务表单待实现', row);
+    await router.push({
+      path: row.formCustomCreatePath,
+    });
   }
 }
 
@@ -547,7 +548,7 @@ function handleRenameSuccess() {
       <Collapse
         :active-key="expandKeys"
         :bordered="false"
-        class="bg-transparent"
+        class="collapse-no-padding bg-transparent"
       >
         <Collapse.Panel
           key="1"
@@ -738,17 +739,10 @@ function handleRenameSuccess() {
   </div>
 </template>
 
-<style lang="scss" scoped>
-// @jason：看看能不能通过 tailwindcss 简化下
-.category-draggable-model {
-  // ant-collapse-header 自定义样式
-  :deep(.ant-collapse-header) {
-    padding: 0;
-  }
-
-  // 折叠面板样式
-  :deep(.ant-collapse-content-box) {
-    padding: 0;
-  }
+<style scoped>
+/* :deep() 实现样式穿透 */
+.collapse-no-padding :deep(.ant-collapse-header),
+.collapse-no-padding :deep(.ant-collapse-content-box) {
+  padding: 0;
 }
 </style>

apps/web-antd/src/views/bpm/processInstance/create/modules/form.vue

@@ -24,6 +24,7 @@ import {
 } from '#/api/bpm/processInstance';
 import { decodeFields, setConfAndFields2 } from '#/components/form-create';
 import { router } from '#/router';
+import ProcessInstanceBpmnViewer from '#/views/bpm/processInstance/detail/modules/bpm-viewer.vue';
 import ProcessInstanceSimpleViewer from '#/views/bpm/processInstance/detail/modules/simple-bpm-viewer.vue';
 import ProcessInstanceTimeline from '#/views/bpm/processInstance/detail/modules/time-line.vue';
 
@@ -51,7 +52,6 @@ const props = defineProps({
 const emit = defineEmits(['cancel']);
 const { closeCurrentTab } = useTabs();
 
-const isFormReady = ref(false); // 表单就绪状态变量：表单就绪后再渲染 form-create
 const getTitle = computed(() => {
   return `流程表单 - ${props.selectProcessDefinition.name}`;
 });
@@ -122,21 +122,32 @@ async function initProcessInfo(row: any, formVariables?: any) {
     // 注意：需要从 formVariables 中，移除不在 row.formFields 的值。
     // 原因是：后端返回的 formVariables 里面，会有一些非表单的信息。例如说，某个流程节点的审批人。
     //        这样，就可能导致一个流程被审批不通过后，重新发起时，会直接后端报错！！！
-    const formApi = formCreate.create(decodeFields(row.formFields));
-    const allowedFields = formApi.fields();
-    for (const key in formVariables) {
-      if (!allowedFields.includes(key)) {
-        delete formVariables[key];
+
+    // 解析表单字段列表（不创建实例，避免重复渲染）
+    const decodedFields = decodeFields(row.formFields);
+    const allowedFields = new Set(
+      decodedFields.map((field: any) => field.field).filter(Boolean),
+    );
+
+    // 过滤掉不允许的字段
+    if (formVariables) {
+      for (const key in formVariables) {
+        if (!allowedFields.has(key)) {
+          delete formVariables[key];
+        }
       }
     }
+
     setConfAndFields2(detailForm, row.formConf, row.formFields, formVariables);
 
-    // 设置表单就绪状态
-    // TODO @jason：这个变量是必须的，有没可能简化掉？
-    isFormReady.value = true;
+    // 在配置中禁用 form-create 自带的提交和重置按钮
+    detailForm.value.option = {
+      ...detailForm.value.option,
+      submitBtn: false,
+      resetBtn: false,
+    };
 
     await nextTick();
-    fApi.value?.btn.show(false); // 隐藏提交按钮
 
     // 获取流程审批信息,当再次发起时，流程审批节点要根据原始表单参数预测出来
     await getApprovalDetail({
@@ -153,30 +164,32 @@ async function initProcessInfo(row: any, formVariables?: any) {
     }
     // 情况二：业务表单
   } else if (row.formCustomCreatePath) {
+    // 这里暂时无需加载流程图，因为跳出到另外个 Tab；
     await router.push({
       path: row.formCustomCreatePath,
     });
-    // 这里暂时无需加载流程图，因为跳出到另外个 Tab；
+    // 返回选择流程
+    emit('cancel');
   }
 }
 
 /** 预测流程节点会因为输入的参数值而产生新的预测结果值，所以需重新预测一次 */
 watch(
-  detailForm.value,
+  () => detailForm.value.value,
   (newValue) => {
-    if (newValue && Object.keys(newValue.value).length > 0) {
+    if (newValue && Object.keys(newValue).length > 0) {
       // 记录之前的节点审批人
       tempStartUserSelectAssignees.value = startUserSelectAssignees.value;
       startUserSelectAssignees.value = {};
       // 加载最新的审批详情
       getApprovalDetail({
         id: props.selectProcessDefinition.id,
-        processVariablesStr: JSON.stringify(newValue.value), // 解决 GET 无法传递对象的问题，后端 String 再转 JSON
+        processVariablesStr: JSON.stringify(newValue), // 解决 GET 无法传递对象的问题，后端 String 再转 JSON
       });
     }
   },
   {
-    immediate: true,
+    deep: true,
   },
 );
 
@@ -283,7 +296,6 @@ defineExpose({ initProcessInfo });
             class="flex-1 overflow-auto"
           >
             <form-create
-              v-if="isFormReady"
               :rule="detailForm.rule"
               v-model:api="fApi"
               v-model="detailForm.value"
@@ -307,10 +319,15 @@ defineExpose({ initProcessInfo });
         class="flex flex-1 overflow-hidden"
         :force-render="true"
       >
-        <div class="w-full">
+        <div class="h-full w-full">
+          <!-- BPMN 流程图预览 -->
+          <ProcessInstanceBpmnViewer
+            :bpmn-xml="bpmnXML"
+            v-if="BpmModelType.BPMN === selectProcessDefinition.modelType"
+          />
           <ProcessInstanceSimpleViewer
             :simple-json="simpleJson"
-            v-if="selectProcessDefinition.modelType === BpmModelType.SIMPLE"
+            v-if="BpmModelType.SIMPLE === selectProcessDefinition.modelType"
           />
         </div>
       </Tabs.TabPane>

apps/web-antd/src/views/bpm/processInstance/detail/index.vue

@@ -183,14 +183,11 @@ function setFieldPermission(field: string, permission: string) {
   }
 }
 
-// TODO @jason：这个还要么？
-/**
- * 操作成功后刷新
- */
-// const refresh = () => {
-//   // 重新获取详情
-//   getDetail();
-// };
+/** 操作成功后刷新 */
+const refresh = () => {
+  // 重新获取详情
+  getDetail();
+};
 
 /** 监听 Tab 切换，当切换到 "record" 标签时刷新任务列表 */
 watch(
@@ -369,7 +366,7 @@ onMounted(async () => {
             :normal-form="detailForm"
             :normal-form-api="fApi"
             :writable-fields="writableFields"
-            @success="getDetail"
+            @success="refresh"
           />
         </div>
       </template>

apps/web-antd/src/views/bpm/processInstance/detail/modules/bpm-viewer.vue

@@ -1,10 +1,59 @@
 <script setup lang="ts">
+import { ref, watch } from 'vue';
+
+import { MyProcessViewer } from '#/views/bpm/components/bpmn-process-designer/package';
+
 defineOptions({ name: 'ProcessInstanceBpmnViewer' });
+
+const props = withDefaults(
+  defineProps<{
+    bpmnXml?: string;
+    loading?: boolean; // 是否加载中
+    modelView?: Object;
+  }>(),
+  {
+    loading: false,
+    modelView: () => ({}),
+    bpmnXml: '',
+  },
+);
+
+// BPMN 流程图数据
+const view = ref({
+  bpmnXml: '',
+});
+
+/** 监控 modelView 更新 */
+watch(
+  () => props.modelView,
+  async (newModelView) => {
+    // 加载最新
+    if (newModelView) {
+      // @ts-ignore
+      view.value = newModelView;
+    }
+  },
+);
+
+/** 监听 bpmnXml */
+watch(
+  () => props.bpmnXml,
+  (value) => {
+    view.value.bpmnXml = value;
+  },
+);
 </script>
 
 <template>
-  <!-- TODO @jason：这里 BPMN 图的接入 -->
-  <div>
-    <h1>BPMN Viewer</h1>
+  <div
+    v-loading="loading"
+    class="h-full w-full overflow-auto rounded-lg border border-gray-200 bg-white p-4"
+  >
+    <MyProcessViewer
+      key="processViewer"
+      :xml="view.bpmnXml"
+      :view="view"
+      class="h-full min-h-[500px] w-full"
+    />
   </div>
 </template>

apps/web-antd/src/views/bpm/processInstance/detail/modules/operation-button.vue

@@ -268,9 +268,6 @@ async function openPopover(type: string) {
   Object.keys(popOverVisible.value).forEach((item) => {
     if (popOverVisible.value[item]) popOverVisible.value[item] = item === type;
   });
-  // TODO @jason：下面这 2 行，要删除么？
-  // await nextTick()
-  // formRef.value.resetFields()
 }
 
 /** 关闭气泡卡 */
@@ -710,9 +707,6 @@ defineExpose({ loadTodoTask });
 </script>
 <template>
   <div class="flex items-center">
-    <!-- TODO @jason：这里要删除么？ -->
-    <!-- <div>是否处理中 {{ !!isHandleTaskStatus() }}</div> -->
-
     <!-- 【通过】按钮 -->
     <!-- z-index 设置为300 避免覆盖签名弹窗 -->
     <Space size="middle">
@@ -778,12 +772,12 @@ defineExpose({ loadTodoTask });
                 name="signPicUrl"
                 ref="approveSignFormRef"
               >
-                <Button @click="openSignatureModal" type="primary">
-                  {{ approveReasonForm.signPicUrl ? '重新签名' : '点击签名' }}
-                </Button>
-                <div class="mt-2">
+                <div class="flex items-center gap-2">
+                  <Button @click="openSignatureModal" type="primary">
+                    {{ approveReasonForm.signPicUrl ? '重新签名' : '点击签名' }}
+                  </Button>
                   <Image
-                    class="float-left h-40 w-80"
+                    class="!h-10 !w-40 object-contain"
                     v-if="approveReasonForm.signPicUrl"
                     :src="approveReasonForm.signPicUrl"
                   />
@@ -903,13 +897,12 @@ defineExpose({ loadTodoTask });
               label-width="100px"
             >
               <FormItem label="抄送人" name="copyUserIds">
-                <!-- TODO @jason：看看是不是用 看看能不能通过 tailwindcss 简化下 style -->
                 <Select
                   v-model:value="copyForm.copyUserIds"
                   :allow-clear="true"
-                  style="width: 100%"
                   mode="multiple"
                   placeholder="请选择抄送人"
+                  class="w-full"
                 >
                   <SelectOption
                     v-for="item in userOptions"

apps/web-antd/src/views/bpm/processInstance/detail/modules/signature.vue

@@ -5,7 +5,7 @@ import { useVbenModal } from '@vben/common-ui';
 import { IconifyIcon } from '@vben/icons';
 import { base64ToFile } from '@vben/utils';
 
-import { Button, message, Space, Tooltip } from 'ant-design-vue';
+import { Button, Space, Tooltip } from 'ant-design-vue';
 import Vue3Signature from 'vue3-signature';
 
 import { uploadFile } from '#/api/infra/file';
@@ -20,28 +20,22 @@ const signature = ref<InstanceType<typeof Vue3Signature>>();
 
 const [Modal, modalApi] = useVbenModal({
   async onConfirm() {
-    // TODO @jason：这里需要使用类似 modalApi.lock() 么？类似别的模块
-    message.success({
-      content: '签名上传中，请稍等...',
-    });
-    const signFileUrl = await uploadFile({
-      file: base64ToFile(signature?.value?.save('image/jpeg') || '', '签名'),
-    });
-    emits('success', signFileUrl);
-    // TODO @jason：是不是不用主动 close？
-    await modalApi.close();
-  },
-  // TODO @jason：这个是不是下面方法，可以删除；
-  onOpenChange(visible) {
-    if (!visible) {
-      modalApi.close();
+    modalApi.lock();
+    try {
+      const signFileUrl = await uploadFile({
+        file: base64ToFile(signature?.value?.save('image/jpeg') || '', '签名'),
+      });
+      emits('success', signFileUrl);
+      await modalApi.close();
+    } finally {
+      modalApi.unlock();
     }
   },
 });
 </script>
 
 <template>
-  <Modal title="流程签名" class="h-2/5 w-3/5">
+  <Modal title="流程签名" class="w-3/5">
     <div class="mb-2 flex justify-end">
       <Space>
         <Tooltip title="撤销上一步操作">
@@ -64,10 +58,8 @@ const [Modal, modalApi] = useVbenModal({
     </div>
 
     <Vue3Signature
-      class="mx-auto border border-solid border-gray-300"
+      class="mx-auto !h-80 border border-solid border-gray-300"
       ref="signature"
-      w="874px"
-      h="324px"
     />
   </Modal>
 </template>

apps/web-antd/src/views/bpm/processInstance/detail/modules/time-line.vue

@@ -109,11 +109,11 @@ function getApprovalNodeIcon(taskStatus: number, nodeType: BpmNodeTypeEnum) {
   }
   if (
     [
-      BpmNodeTypeEnum.START_USER_NODE,
-      BpmNodeTypeEnum.USER_TASK_NODE,
-      BpmNodeTypeEnum.TRANSACTOR_NODE,
       BpmNodeTypeEnum.CHILD_PROCESS_NODE,
       BpmNodeTypeEnum.END_EVENT_NODE,
+      BpmNodeTypeEnum.START_USER_NODE,
+      BpmNodeTypeEnum.TRANSACTOR_NODE,
+      BpmNodeTypeEnum.USER_TASK_NODE,
     ].includes(nodeType)
   ) {
     return statusIconMap[taskStatus]?.icon || 'mdi:clock-outline';

apps/web-antd/src/views/bpm/task/done/index.vue

@@ -6,8 +6,6 @@ import { DocAlert, Page } from '@vben/common-ui';
 
 import { message } from 'ant-design-vue';
 
-import { $t } from '#/locales';
-
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getTaskDonePage, withdrawTask } from '#/api/bpm/task';
 import { router } from '#/router';

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(),
 });
 

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(),
 });
 

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(),
 });
 

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(),
 });
 

apps/web-antd/src/views/iot/device/device/data.ts

@@ -239,7 +239,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '设备状态',
       component: 'Select',
       componentProps: {
-        options: getDictOptions(DICT_TYPE.IOT_DEVICE_STATUS, 'number'),
+        options: getDictOptions(DICT_TYPE.IOT_DEVICE_STATE, 'number'),
         placeholder: '请选择设备状态',
         allowClear: true,
       },
@@ -295,12 +295,12 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
       slots: { default: 'groups' },
     },
     {
-      field: 'status',
+      field: 'state',
       title: '设备状态',
       minWidth: 100,
       cellRender: {
         name: 'CellDict',
-        props: { type: DICT_TYPE.IOT_DEVICE_STATUS },
+        props: { type: DICT_TYPE.IOT_DEVICE_STATE },
       },
     },
     {

apps/web-antd/src/views/iot/device/device/index.vue

@@ -307,7 +307,7 @@ onMounted(async () => {
           style="width: 200px"
         >
           <Select.Option
-            v-for="dict in getIntDictOptions(DICT_TYPE.IOT_DEVICE_STATUS)"
+            v-for="dict in getIntDictOptions(DICT_TYPE.IOT_DEVICE_STATE)"
             :key="dict.value"
             :value="dict.value"
           >

apps/web-antd/src/views/iot/device/device/modules/components/DeviceTableSelect.vue

@@ -294,7 +294,7 @@ onMounted(async () => {
             style="width: 240px"
           >
             <Select.Option
-              v-for="dict in getIntDictOptions(DICT_TYPE.IOT_DEVICE_STATUS)"
+              v-for="dict in getIntDictOptions(DICT_TYPE.IOT_DEVICE_STATE)"
               :key="dict.value"
               :value="dict.value"
             >
@@ -373,7 +373,7 @@ onMounted(async () => {
           </template>
           <template v-else-if="column.key === 'status'">
             <DictTag
-              :type="DICT_TYPE.IOT_DEVICE_STATUS"
+              :type="DICT_TYPE.IOT_DEVICE_STATE"
               :value="record.status"
             />
           </template>

apps/web-antd/src/views/iot/device/device/modules/detail/DeviceDetailsInfo.vue

@@ -106,7 +106,7 @@ function handleAuthInfoDialogClose() {
             </Descriptions.Item>
             <Descriptions.Item label="当前状态">
               <DictTag
-                :type="DICT_TYPE.IOT_DEVICE_STATUS"
+                :type="DICT_TYPE.IOT_DEVICE_STATE"
                 :value="device.state"
               />
             </Descriptions.Item>
@@ -181,7 +181,7 @@ function handleAuthInfoDialogClose() {
               style="width: calc(100% - 80px)"
             />
             <Button @click="copyToClipboard(authInfo.clientId)" type="primary">
-              <IconifyIcon icon="ph:copy" />
+              <IconifyIcon icon="lucide:copy" />
             </Button>
           </Input.Group>
         </Form.Item>
@@ -193,7 +193,7 @@ function handleAuthInfoDialogClose() {
               style="width: calc(100% - 80px)"
             />
             <Button @click="copyToClipboard(authInfo.username)" type="primary">
-              <IconifyIcon icon="ph:copy" />
+              <IconifyIcon icon="lucide:copy" />
             </Button>
           </Input.Group>
         </Form.Item>
@@ -210,11 +210,11 @@ function handleAuthInfoDialogClose() {
               type="primary"
             >
               <IconifyIcon
-                :icon="authPasswordVisible ? 'ph:eye-slash' : 'ph:eye'"
+                :icon="authPasswordVisible ? 'lucide:eye-off' : 'lucide:eye'"
               />
             </Button>
             <Button @click="copyToClipboard(authInfo.password)" type="primary">
-              <IconifyIcon icon="ph:copy" />
+              <IconifyIcon icon="lucide:copy" />
             </Button>
           </Input.Group>
         </Form.Item>

apps/web-antd/src/views/iot/device/device/modules/detail/DeviceDetailsThingModelProperty.vue

@@ -165,18 +165,15 @@ onMounted(() => {
           >
             <!-- 添加渐变背景层 -->
             <div
-              class="pointer-events-none absolute left-0 right-0 top-0 h-[50px] bg-gradient-to-b from-[#eefaff] to-transparent"
+              class="from-muted pointer-events-none absolute left-0 right-0 top-0 h-12 bg-gradient-to-b to-transparent"
             ></div>
             <div class="relative p-4">
               <!-- 标题区域 -->
               <div class="mb-3 flex items-center">
                 <div class="mr-2.5 flex items-center">
-                  <IconifyIcon
-                    icon="ep:cpu"
-                    class="text-[18px] text-[#0070ff]"
-                  />
+                  <IconifyIcon icon="ep:cpu" class="text-primary text-lg" />
                 </div>
-                <div class="font-600 flex-1 text-[16px]">{{ item.name }}</div>
+                <div class="flex-1 text-base font-bold">{{ item.name }}</div>
                 <!-- 标识符 -->
                 <div class="mr-2 inline-flex items-center">
                   <Tag size="small" color="blue">
@@ -198,22 +195,22 @@ onMounted(() => {
                 >
                   <IconifyIcon
                     icon="ep:data-line"
-                    class="text-[18px] text-[#0070ff]"
+                    class="text-primary text-lg"
                   />
                 </div>
               </div>
 
               <!-- 信息区域 -->
-              <div class="text-[14px]">
+              <div class="text-sm">
                 <div class="mb-2.5 last:mb-0">
-                  <span class="mr-2.5 text-[#717c8e]">属性值</span>
-                  <span class="font-600 text-[#0b1d30]">
+                  <span class="text-muted-foreground mr-2.5">属性值</span>
+                  <span class="text-foreground font-bold">
                     {{ formatValueWithUnit(item) }}
                   </span>
                 </div>
                 <div class="mb-2.5 last:mb-0">
-                  <span class="mr-2.5 text-[#717c8e]">更新时间</span>
-                  <span class="text-[12px] text-[#0b1d30]">
+                  <span class="text-muted-foreground mr-2.5">更新时间</span>
+                  <span class="text-foreground text-sm">
                     {{ item.updateTime ? formatDate(item.updateTime) : '-' }}
                   </span>
                 </div>

apps/web-antd/src/views/iot/device/group/data.ts

@@ -1,12 +1,13 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 
-import { DICT_TYPE } from '@vben/constants';
+import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
 
 import { z } from '#/adapter/form';
-import { getSimpleDeviceGroupList } from '#/api/iot/device/group';
+import { getRangePickerDefaultProps } from '#/utils';
 
-/** 新增/修改设备分组的表单 */
+/** 新增/修改的表单 */
 export function useFormSchema(): VbenFormSchema[] {
   return [
     {
@@ -30,16 +31,15 @@ export function useFormSchema(): VbenFormSchema[] {
         .max(64, '分组名称长度不能超过 64 个字符'),
     },
     {
-      fieldName: 'parentId',
-      label: '父级分组',
-      component: 'ApiTreeSelect',
+      fieldName: 'status',
+      label: '分组状态',
+      component: 'RadioGroup',
       componentProps: {
-        api: getSimpleDeviceGroupList,
-        labelField: 'name',
-        valueField: 'id',
-        placeholder: '请选择父级分组',
-        allowClear: true,
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        buttonStyle: 'solid',
+        optionType: 'button',
       },
+      rules: z.number().default(CommonStatusEnum.ENABLE),
     },
     {
       fieldName: 'description',
@@ -65,6 +65,15 @@ export function useGridFormSchema(): VbenFormSchema[] {
         allowClear: true,
       },
     },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
   ];
 }
 
@@ -72,14 +81,13 @@ export function useGridFormSchema(): VbenFormSchema[] {
 export function useGridColumns(): VxeTableGridOptions['columns'] {
   return [
     {
-      field: 'name',
-      title: '分组名称',
-      minWidth: 200,
-      treeNode: true,
+      field: 'id',
+      title: 'ID',
+      minWidth: 100,
     },
     {
-      field: 'description',
-      title: '分组描述',
+      field: 'name',
+      title: '分组名称',
       minWidth: 200,
     },
     {
@@ -92,9 +100,9 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
       },
     },
     {
-      field: 'deviceCount',
-      title: '设备数量',
-      minWidth: 100,
+      field: 'description',
+      title: '分组描述',
+      minWidth: 200,
     },
     {
       field: 'createTime',
@@ -102,6 +110,11 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
       minWidth: 180,
       formatter: 'formatDateTime',
     },
+    {
+      field: 'deviceCount',
+      title: '设备数量',
+      minWidth: 100,
+    },
     {
       title: '操作',
       width: 200,

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'),
-          };
         },
       },
     },

apps/web-antd/src/views/iot/device/group/modules/device-group-form.vue

@@ -39,8 +39,10 @@ const [Form, formApi] = useVbenForm({
   },
   schema: useFormSchema(),
   showCollapseButton: false,
+  showDefaultActions: false,
 });
 
+// TODO @haohao：参考别的 form；1）文件的命名可以简化；2）代码可以在简化下；
 const [Modal, modalApi] = useVbenModal({
   async onConfirm() {
     const { valid } = await formApi.validate();
@@ -70,9 +72,13 @@ const [Modal, modalApi] = useVbenModal({
   async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
       formData.value = undefined;
+      await formApi.resetForm();
       return;
     }
 
+    // 重置表单
+    await formApi.resetForm();
+
     const data = modalApi.getData<IotDeviceGroupApi.DeviceGroup>();
     // 如果没有数据或没有 id，表示是新增
     if (!data || !data.id) {

apps/web-antd/src/views/iot/product/category/data.ts

@@ -1,12 +1,13 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 
-import { DICT_TYPE } from '@vben/constants';
+import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
 
 import { z } from '#/adapter/form';
-import { getSimpleProductCategoryList } from '#/api/iot/product/category';
+import { getRangePickerDefaultProps } from '#/utils';
 
-/** 新增/修改产品分类的表单 */
+/** 新增/修改的表单 */
 export function useFormSchema(): VbenFormSchema[] {
   return [
     {
@@ -19,51 +20,37 @@ export function useFormSchema(): VbenFormSchema[] {
     },
     {
       fieldName: 'name',
-      label: '分类名称',
+      label: '分类名字',
       component: 'Input',
       componentProps: {
-        placeholder: '请输入分类名称',
+        placeholder: '请输入分类名字',
       },
       rules: z
         .string()
-        .min(1, '分类名称不能为空')
-        .max(64, '分类名称长度不能超过 64 个字符'),
-    },
-    {
-      fieldName: 'parentId',
-      label: '父级分类',
-      component: 'ApiTreeSelect',
-      componentProps: {
-        api: getSimpleProductCategoryList,
-        labelField: 'name',
-        valueField: 'id',
-        placeholder: '请选择父级分类',
-        allowClear: true,
-      },
+        .min(1, '分类名字不能为空')
+        .max(64, '分类名字长度不能超过 64 个字符'),
     },
     {
       fieldName: 'sort',
-      label: '排序',
+      label: '分类排序',
       component: 'InputNumber',
       componentProps: {
-        placeholder: '请输入排序',
+        placeholder: '请输入分类排序',
         class: 'w-full',
         min: 0,
       },
-      rules: 'required',
+      rules: z.number().min(0, '分类排序不能为空'),
     },
     {
       fieldName: 'status',
-      label: '状态',
+      label: '分类状态',
       component: 'RadioGroup',
-      defaultValue: 1,
       componentProps: {
-        options: [
-          { label: '开启', value: 1 },
-          { label: '关闭', value: 0 },
-        ],
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        buttonStyle: 'solid',
+        optionType: 'button',
       },
-      rules: 'required',
+      rules: z.number().default(CommonStatusEnum.ENABLE),
     },
     {
       fieldName: 'description',
@@ -82,10 +69,10 @@ export function useGridFormSchema(): VbenFormSchema[] {
   return [
     {
       fieldName: 'name',
-      label: '分类名称',
+      label: '分类名字',
       component: 'Input',
       componentProps: {
-        placeholder: '请输入分类名称',
+        placeholder: '请输入分类名字',
         allowClear: true,
       },
     },
@@ -94,9 +81,8 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '创建时间',
       component: 'RangePicker',
       componentProps: {
-        placeholder: ['开始日期', '结束日期'],
+        ...getRangePickerDefaultProps(),
         allowClear: true,
-        class: 'w-full',
       },
     },
   ];
@@ -114,7 +100,6 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
       field: 'name',
       title: '名字',
       minWidth: 200,
-      treeNode: true,
     },
     {
       field: 'sort',

apps/web-antd/src/views/iot/product/category/index.vue

@@ -3,7 +3,6 @@ import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { IotProductCategoryApi } from '#/api/iot/product/category';
 
 import { Page, useVbenModal } from '@vben/common-ui';
-import { handleTree } from '@vben/utils';
 
 import { message } from 'ant-design-vue';
 
@@ -70,16 +69,11 @@ const [Grid, gridApi] = useVbenVxeGrid({
     proxyConfig: {
       ajax: {
         query: async ({ page }, formValues) => {
-          const data = await getProductCategoryPage({
+          return await getProductCategoryPage({
             pageNo: page.currentPage,
             pageSize: page.pageSize,
             ...formValues,
           });
-          // 转换为树形结构
-          return {
-            ...data,
-            list: handleTree(data.list, 'id', 'parentId'),
-          };
         },
       },
     },
@@ -91,16 +85,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
       refresh: true,
       search: true,
     },
-    treeConfig: {
-      parentField: 'parentId',
-      rowField: 'id',
-      transform: true,
-      expandAll: true,
-      reserve: true,
-      trigger: 'default',
-      iconOpen: '',
-      iconClose: '',
-    },
   } as VxeTableGridOptions<IotProductCategoryApi.ProductCategory>,
 });
 </script>
@@ -121,8 +105,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
           ]"
         />
       </template>
-
-      <!-- 操作列 -->
       <template #actions="{ row }">
         <TableAction
           :actions="[

apps/web-antd/src/views/iot/product/category/modules/ProductCategoryForm.vue

@@ -38,6 +38,7 @@ const [Form, formApi] = useVbenForm({
   showDefaultActions: false,
 });
 
+// TODO @haohao：参考别的 form；1）文件的命名可以简化；2）代码可以在简化下；
 const [Modal, modalApi] = useVbenModal({
   async onConfirm() {
     const { valid } = await formApi.validate();
@@ -63,13 +64,17 @@ const [Modal, modalApi] = useVbenModal({
   async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
       formData.value = undefined;
+      formApi.resetForm();
       return;
     }
-    // 加载数据
-    let data = modalApi.getData<
-      IotProductCategoryApi.ProductCategory & { parentId?: number }
-    >();
-    if (!data) {
+
+    // 重置表单
+    await formApi.resetForm();
+
+    const data = modalApi.getData<IotProductCategoryApi.ProductCategory>();
+    // 如果没有数据或没有 id，表示是新增
+    if (!data || !data.id) {
+      formData.value = undefined;
       // 新增模式：设置默认值
       await formApi.setValues({
         sort: 0,
@@ -77,23 +82,12 @@ const [Modal, modalApi] = useVbenModal({
       });
       return;
     }
+
+    // 编辑模式：加载数据
     modalApi.lock();
     try {
-      if (data.id) {
-        // 编辑模式：加载完整数据
-        data = await getProductCategory(data.id);
-      } else if (data.parentId) {
-        // 新增下级分类：设置父级ID
-        await formApi.setValues({
-          parentId: data.parentId,
-          sort: 0,
-          status: 1,
-        });
-        return;
-      }
-      // 设置到 values
-      formData.value = data;
-      await formApi.setValues(data);
+      formData.value = await getProductCategory(data.id);
+      await formApi.setValues(formData.value);
     } finally {
       modalApi.unlock();
     }

apps/web-antd/src/views/iot/product/product/modules/ProductCardView.vue

@@ -19,6 +19,7 @@ import {
 
 import { getProductPage } from '#/api/iot/product/product';
 
+// TODO @haohao：命名不太对；可以简化下；
 defineOptions({ name: 'ProductCardView' });
 
 const props = defineProps<Props>();
@@ -101,7 +102,7 @@ defineExpose({
 <template>
   <div class="product-card-view">
     <!-- 产品卡片列表 -->
-    <div v-loading="loading" class="min-h-[400px]">
+    <div v-loading="loading" class="min-h-96">
       <Row v-if="list.length > 0" :gutter="[16, 16]">
         <Col
           v-for="item in list"
@@ -118,7 +119,7 @@ defineExpose({
               <div class="product-icon">
                 <IconifyIcon
                   :icon="item.icon || 'ant-design:inbox-outlined'"
-                  class="text-[32px]"
+                  class="text-3xl"
                 />
               </div>
               <div class="ml-3 min-w-0 flex-1">
@@ -161,7 +162,7 @@ defineExpose({
               <div class="product-3d-icon">
                 <IconifyIcon
                   icon="ant-design:box-plot-outlined"
-                  class="text-[80px]"
+                  class="text-2xl"
                 />
               </div>
             </div>
@@ -195,16 +196,33 @@ defineExpose({
                 />
                 物模型
               </Button>
+              <Tooltip v-if="item.status === 1" title="启用状态的产品不能删除">
+                <Button
+                  size="small"
+                  danger
+                  disabled
+                  class="action-btn action-btn-delete !w-8"
+                >
+                  <IconifyIcon
+                    icon="ant-design:delete-outlined"
+                    class="text-sm"
+                  />
+                </Button>
+              </Tooltip>
               <Popconfirm
+                v-else
                 :title="`确认删除产品 ${item.name} 吗?`"
                 @confirm="emit('delete', item)"
               >
                 <Button
                   size="small"
                   danger
-                  class="action-btn action-btn-delete"
+                  class="action-btn action-btn-delete !w-8"
                 >
-                  <IconifyIcon icon="ant-design:delete-outlined" />
+                  <IconifyIcon
+                    icon="ant-design:delete-outlined"
+                    class="text-sm"
+                  />
                 </Button>
               </Popconfirm>
             </div>

apps/web-antd/src/views/iot/rule/scene/form/configs/CurrentTimeConditionConfig.vue

@@ -170,7 +170,7 @@ watch(
 </script>
 
 <template>
-  <div class="gap-16px flex flex-col">
+  <div class="flex flex-col gap-4">
     <Row :gutter="16">
       <!-- 时间操作符选择 -->
       <Col :span="8">
@@ -190,7 +190,7 @@ watch(
               :value="option.value"
             >
               <div class="flex w-full items-center justify-between">
-                <div class="gap-8px flex items-center">
+                <div class="flex items-center gap-2">
                   <IconifyIcon :icon="option.icon" :class="option.iconClass" />
                   <span>{{ option.label }}</span>
                 </div>
@@ -225,9 +225,7 @@ watch(
             value-format="YYYY-MM-DD HH:mm:ss"
             class="w-full"
           />
-          <div v-else class="text-14px text-[var(--el-text-color-placeholder)]">
-            无需设置时间值
-          </div>
+          <div v-else class="text-secondary text-sm">无需设置时间值</div>
         </Form.Item>
       </Col>
 

apps/web-antd/src/views/iot/rule/scene/form/configs/DeviceTriggerConfig.vue

@@ -161,11 +161,11 @@ function removeConditionGroup() {
               @click="addSubGroup"
               :disabled="(trigger.conditionGroups?.length || 0) >= maxSubGroups"
             >
-              <IconifyIcon icon="ep:plus" />
+              <IconifyIcon icon="lucide:plus" />
               添加子条件组
             </Button>
             <Button danger size="small" text @click="removeConditionGroup">
-              <IconifyIcon icon="ep:delete" />
+              <IconifyIcon icon="lucide:trash-2" />
               删除条件组
             </Button>
           </div>
@@ -215,7 +215,7 @@ function removeConditionGroup() {
                     @click="removeSubGroup(subGroupIndex)"
                     class="hover:bg-red-50"
                   >
-                    <IconifyIcon icon="ep:delete" />
+                    <IconifyIcon icon="lucide:trash-2" />
                     删除组
                   </Button>
                 </div>
@@ -258,7 +258,7 @@ function removeConditionGroup() {
           class="p-24px rounded-8px border-2 border-dashed border-orange-200 bg-orange-50 text-center"
         >
           <div class="gap-12px flex flex-col items-center">
-            <IconifyIcon icon="ep:plus" class="text-32px text-orange-400" />
+            <IconifyIcon icon="lucide:plus" class="text-32px text-orange-400" />
             <div class="text-orange-600">
               <p class="text-14px font-500 mb-4px">暂无子条件组</p>
               <p class="text-12px">点击上方"添加子条件组"按钮开始配置</p>

apps/web-antd/src/views/iot/rule/scene/form/configs/MainConditionInnerConfig.vue

@@ -173,7 +173,7 @@ function handlePropertyChange(propertyInfo: any) {
 </script>
 
 <template>
-  <div class="space-y-16px">
+  <div class="space-y-4">
     <!-- 触发事件类型选择 -->
     <Form.Item label="触发事件类型" required>
       <Select
@@ -192,7 +192,7 @@ function handlePropertyChange(propertyInfo: any) {
     </Form.Item>
 
     <!-- 设备属性条件配置 -->
-    <div v-if="isDevicePropertyTrigger" class="space-y-16px">
+    <div v-if="isDevicePropertyTrigger" class="space-y-4">
       <!-- 产品设备选择 -->
       <Row :gutter="16">
         <Col :span="12">
@@ -292,7 +292,7 @@ function handlePropertyChange(propertyInfo: any) {
     </div>
 
     <!-- 设备状态条件配置 -->
-    <div v-else-if="isDeviceStatusTrigger" class="space-y-16px">
+    <div v-else-if="isDeviceStatusTrigger" class="space-y-4">
       <!-- 设备状态触发器使用简化的配置 -->
       <Row :gutter="16">
         <Col :span="12">
@@ -364,13 +364,11 @@ function handlePropertyChange(propertyInfo: any) {
     </div>
 
     <!-- 其他触发类型的提示 -->
-    <div v-else class="py-20px text-center">
-      <p class="text-14px mb-4px text-[var(--el-text-color-secondary)]">
+    <div v-else class="py-5 text-center">
+      <p class="text-secondary mb-1 text-sm">
         当前触发事件类型：{{ getTriggerTypeLabel(triggerType) }}
       </p>
-      <p class="text-12px text-[var(--el-text-color-placeholder)]">
-        此触发类型暂不需要配置额外条件
-      </p>
+      <p class="text-secondary text-xs">此触发类型暂不需要配置额外条件</p>
     </div>
   </div>
 </template>

apps/web-antd/src/views/iot/rule/scene/form/configs/SubConditionGroupConfig.vue

@@ -83,27 +83,24 @@ function updateCondition(index: number, condition: TriggerCondition) {
 </script>
 
 <template>
-  <div class="p-16px">
+  <div class="p-4">
     <!-- 空状态 -->
-    <div v-if="!subGroup || subGroup.length === 0" class="py-24px text-center">
-      <div class="gap-12px flex flex-col items-center">
-        <IconifyIcon
-          icon="ep:plus"
-          class="text-32px text-[var(--el-text-color-placeholder)]"
-        />
-        <div class="text-[var(--el-text-color-secondary)]">
-          <p class="text-14px font-500 mb-4px">暂无条件</p>
-          <p class="text-12px">点击下方按钮添加第一个条件</p>
+    <div v-if="!subGroup || subGroup.length === 0" class="py-6 text-center">
+      <div class="flex flex-col items-center gap-3">
+        <IconifyIcon icon="lucide:plus" class="text-8 text-secondary" />
+        <div class="text-secondary">
+          <p class="mb-1 text-base font-bold">暂无条件</p>
+          <p class="text-xs">点击下方按钮添加第一个条件</p>
         </div>
         <Button type="primary" @click="addCondition">
-          <IconifyIcon icon="ep:plus" />
+          <IconifyIcon icon="lucide:plus" />
           添加条件
         </Button>
       </div>
     </div>
 
     <!-- 条件列表 -->
-    <div v-else class="space-y-16px">
+    <div v-else class="space-y-4">
       <div
         v-for="(condition, conditionIndex) in subGroup"
         :key="`condition-${conditionIndex}`"
@@ -111,20 +108,18 @@ function updateCondition(index: number, condition: TriggerCondition) {
       >
         <!-- 条件配置 -->
         <div
-          class="rounded-6px border border-[var(--el-border-color-lighter)] bg-[var(--el-fill-color-blank)] shadow-sm"
+          class="rounded-3px border-border bg-fill-color-blank border shadow-sm"
         >
           <div
-            class="p-12px rounded-t-4px flex items-center justify-between border-b border-[var(--el-border-color-lighter)] bg-[var(--el-fill-color-light)]"
+            class="rounded-t-1 border-border bg-fill-color-blank flex items-center justify-between border-b p-3"
           >
-            <div class="gap-8px flex items-center">
+            <div class="flex items-center gap-2">
               <div
-                class="w-20px h-20px text-10px flex items-center justify-center rounded-full bg-blue-500 font-bold text-white"
+                class="bg-primary flex size-5 items-center justify-center rounded-full text-xs font-bold text-white"
               >
                 {{ conditionIndex + 1 }}
               </div>
-              <span
-                class="text-12px font-500 text-[var(--el-text-color-primary)]"
-              >
+              <span class="text-primary text-base font-bold">
                 条件 {{ conditionIndex + 1 }}
               </span>
             </div>
@@ -136,11 +131,11 @@ function updateCondition(index: number, condition: TriggerCondition) {
               v-if="subGroup!.length > 1"
               class="hover:bg-red-50"
             >
-              <IconifyIcon icon="ep:delete" />
+              <IconifyIcon icon="lucide:trash-2" />
             </Button>
           </div>
 
-          <div class="p-12px">
+          <div class="p-3">
             <ConditionConfig
               :model-value="condition"
               @update:model-value="
@@ -158,15 +153,13 @@ function updateCondition(index: number, condition: TriggerCondition) {
         v-if="
           subGroup && subGroup.length > 0 && subGroup.length < maxConditions
         "
-        class="py-16px text-center"
+        class="py-4 text-center"
       >
         <Button type="primary" plain @click="addCondition">
-          <IconifyIcon icon="ep:plus" />
+          <IconifyIcon icon="lucide:plus" />
           继续添加条件
         </Button>
-        <span
-          class="mt-8px text-12px block text-[var(--el-text-color-secondary)]"
-        >
+        <span class="text-secondary mt-2 block text-xs">
           最多可添加 {{ maxConditions }} 个条件
         </span>
       </div>

apps/web-antd/src/views/iot/rule/scene/form/inputs/JsonParamsInput.vue

@@ -198,25 +198,25 @@ const emptyMessage = computed(() => {
 });
 
 // 计算属性：无配置消息
-const noConfigMessage = computed(() => {
-  switch (props.type) {
-    case JsonParamsInputTypeEnum.CUSTOM: {
-      return JSON_PARAMS_INPUT_CONSTANTS.NO_CONFIG_MESSAGES.CUSTOM;
-    }
-    case JsonParamsInputTypeEnum.EVENT: {
-      return JSON_PARAMS_INPUT_CONSTANTS.NO_CONFIG_MESSAGES.EVENT;
-    }
-    case JsonParamsInputTypeEnum.PROPERTY: {
-      return JSON_PARAMS_INPUT_CONSTANTS.NO_CONFIG_MESSAGES.PROPERTY;
-    }
-    case JsonParamsInputTypeEnum.SERVICE: {
-      return JSON_PARAMS_INPUT_CONSTANTS.NO_CONFIG_MESSAGES.SERVICE;
-    }
-    default: {
-      return JSON_PARAMS_INPUT_CONSTANTS.NO_CONFIG_MESSAGES.DEFAULT;
-    }
-  }
-});
+// const noConfigMessage = computed(() => {
+//   switch (props.type) {
+//     case JsonParamsInputTypeEnum.CUSTOM: {
+//       return JSON_PARAMS_INPUT_CONSTANTS.NO_CONFIG_MESSAGES.CUSTOM;
+//     }
+//     case JsonParamsInputTypeEnum.EVENT: {
+//       return JSON_PARAMS_INPUT_CONSTANTS.NO_CONFIG_MESSAGES.EVENT;
+//     }
+//     case JsonParamsInputTypeEnum.PROPERTY: {
+//       return JSON_PARAMS_INPUT_CONSTANTS.NO_CONFIG_MESSAGES.PROPERTY;
+//     }
+//     case JsonParamsInputTypeEnum.SERVICE: {
+//       return JSON_PARAMS_INPUT_CONSTANTS.NO_CONFIG_MESSAGES.SERVICE;
+//     }
+//     default: {
+//       return JSON_PARAMS_INPUT_CONSTANTS.NO_CONFIG_MESSAGES.DEFAULT;
+//     }
+//   }
+// });
 
 /**
  * 处理参数变化事件
@@ -415,7 +415,7 @@ watch(
 
 <template>
   <!-- 参数配置 -->
-  <div class="space-y-12px w-full">
+  <div class="w-full space-y-3">
     <!-- JSON 输入框 -->
     <div class="relative">
       <Input.TextArea
@@ -427,7 +427,7 @@ watch(
         :class="{ 'is-error': jsonError }"
       />
       <!-- 查看详细示例弹出层 -->
-      <div class="top-8px right-8px absolute">
+      <div class="absolute right-2 top-2">
         <Popover
           placement="leftTop"
           :width="450"
@@ -450,79 +450,64 @@ watch(
 
           <!-- 弹出层内容 -->
           <div class="json-params-detail-content">
-            <div class="gap-8px mb-16px flex items-center">
-              <IconifyIcon
-                :icon="titleIcon"
-                class="text-18px text-[var(--el-color-primary)]"
-              />
-              <span
-                class="text-16px font-600 text-[var(--el-text-color-primary)]"
-              >
+            <div class="mb-4 flex items-center gap-2">
+              <IconifyIcon :icon="titleIcon" class="text-primary text-lg" />
+              <span class="text-primary text-base font-bold">
                 {{ title }}
               </span>
             </div>
 
-            <div class="space-y-16px">
+            <div class="space-y-4">
               <!-- 参数列表 -->
               <div v-if="paramsList.length > 0">
-                <div class="gap-8px mb-8px flex items-center">
+                <div class="mb-2 flex items-center gap-2">
                   <IconifyIcon
                     :icon="paramsIcon"
-                    class="text-14px text-[var(--el-color-primary)]"
+                    class="text-primary text-base"
                   />
-                  <span
-                    class="text-14px font-500 text-[var(--el-text-color-primary)]"
-                  >
+                  <span class="text-primary text-base font-bold">
                     {{ paramsLabel }}
                   </span>
                 </div>
-                <div class="ml-22px space-y-8px">
+                <div class="ml-6 space-y-2">
                   <div
                     v-for="param in paramsList"
                     :key="param.identifier"
-                    class="p-8px rounded-4px flex items-center justify-between bg-[var(--el-fill-color-lighter)]"
+                    class="bg-card flex items-center justify-between rounded-lg p-2"
                   >
                     <div class="flex-1">
-                      <div
-                        class="text-12px font-500 text-[var(--el-text-color-primary)]"
-                      >
+                      <div class="text-primary text-base font-bold">
                         {{ param.name }}
                         <Tag
                           v-if="param.required"
                           size="small"
                           type="danger"
-                          class="ml-4px"
+                          class="ml-1"
                         >
                           {{ JSON_PARAMS_INPUT_CONSTANTS.REQUIRED_TAG }}
                         </Tag>
                       </div>
-                      <div
-                        class="text-11px text-[var(--el-text-color-secondary)]"
-                      >
+                      <div class="text-secondary text-xs">
                         {{ param.identifier }}
                       </div>
                     </div>
-                    <div class="gap-8px flex items-center">
+                    <div class="flex items-center gap-2">
                       <Tag :type="getParamTypeTag(param.dataType)" size="small">
                         {{ getParamTypeName(param.dataType) }}
                       </Tag>
-                      <span
-                        class="text-11px text-[var(--el-text-color-secondary)]"
-                      >
+                      <span class="text-secondary text-xs">
                         {{ getExampleValue(param) }}
                       </span>
                     </div>
                   </div>
                 </div>
 
-                <div class="mt-12px ml-22px">
-                  <div
-                    class="text-12px mb-6px text-[var(--el-text-color-secondary)]"
-                  >
+                <div class="ml-6 mt-3">
+                  <div class="text-secondary mb-1 text-xs">
                     {{ JSON_PARAMS_INPUT_CONSTANTS.COMPLETE_JSON_FORMAT }}
                   </div>
                   <pre
-                    class="p-12px rounded-4px text-11px border-l-3px overflow-x-auto border-[var(--el-color-primary)] bg-[var(--el-fill-color-light)] text-[var(--el-text-color-primary)]"
+                    class="bg-card border-l-3px border-primary text-primary overflow-x-auto rounded-lg p-3 text-sm"
                   >
                       <code>{{ generateExampleJson() }}</code>
                     </pre>
@@ -531,8 +516,8 @@ watch(
 
               <!-- 无参数提示 -->
               <div v-else>
-                <div class="py-16px text-center">
-                  <p class="text-14px text-[var(--el-text-color-secondary)]">
+                <div class="py-4 text-center">
+                  <p class="text-secondary text-sm">
                     {{ emptyMessage }}
                   </p>
                 </div>
@@ -545,37 +530,29 @@ watch(
 
     <!-- 验证状态和错误提示 -->
     <div class="flex items-center justify-between">
-      <div class="gap-8px flex items-center">
+      <div class="flex items-center gap-2">
         <IconifyIcon
           :icon="
             jsonError
               ? JSON_PARAMS_INPUT_ICONS.STATUS_ICONS.ERROR
               : JSON_PARAMS_INPUT_ICONS.STATUS_ICONS.SUCCESS
           "
-          :class="
-            jsonError
-              ? 'text-[var(--el-color-danger)]'
-              : 'text-[var(--el-color-success)]'
-          "
-          class="text-14px"
+          :class="jsonError ? 'text-danger' : 'text-success'"
+          class="text-sm"
         />
         <span
-          :class="
-            jsonError
-              ? 'text-[var(--el-color-danger)]'
-              : 'text-[var(--el-color-success)]'
-          "
-          class="text-12px"
+          :class="jsonError ? 'text-danger' : 'text-success'"
+          class="text-xs"
         >
           {{ jsonError || JSON_PARAMS_INPUT_CONSTANTS.JSON_FORMAT_CORRECT }}
         </span>
       </div>
 
       <!-- 快速填充按钮 -->
-      <div v-if="paramsList.length > 0" class="gap-8px flex items-center">
-        <span class="text-12px text-[var(--el-text-color-secondary)]">{{
-          JSON_PARAMS_INPUT_CONSTANTS.QUICK_FILL_LABEL
-        }}</span>
+      <div v-if="paramsList.length > 0" class="flex items-center gap-2">
+        <span class="text-secondary text-xs">
+          {{ JSON_PARAMS_INPUT_CONSTANTS.QUICK_FILL_LABEL }}
+        </span>
         <Button size="small" type="primary" plain @click="fillExampleJson">
           {{ JSON_PARAMS_INPUT_CONSTANTS.EXAMPLE_DATA_BUTTON }}
         </Button>

apps/web-antd/src/views/iot/rule/scene/form/inputs/ValueInput.vue

@@ -186,7 +186,7 @@ watch(
         operator ===
         IotRuleSceneTriggerConditionParameterOperatorEnum.BETWEEN.value
       "
-      class="w-full! gap-8px flex items-center"
+      class="w-full! flex items-center gap-2"
     >
       <Input
         v-model="rangeStart"
@@ -196,11 +196,7 @@ watch(
         class="min-w-0 flex-1"
         style="width: auto !important"
       />
-      <span
-        class="text-12px whitespace-nowrap text-[var(--el-text-color-secondary)]"
-      >
-        至
-      </span>
+      <span class="text-secondary whitespace-nowrap text-xs"> 至 </span>
       <Input
         v-model="rangeEnd"
         :type="getInputType()"
@@ -226,18 +222,16 @@ watch(
           <Tooltip content="多个值用逗号分隔，如：1,2,3" placement="top">
             <IconifyIcon
               icon="ep:question-filled"
-              class="cursor-help text-[var(--el-text-color-placeholder)]"
+              class="cursor-help text-gray-400"
             />
           </Tooltip>
         </template>
       </Input>
       <div
         v-if="listPreview.length > 0"
-        class="mt-8px gap-6px flex flex-wrap items-center"
+        class="mt-2 flex flex-wrap items-center gap-1"
       >
-        <span class="text-12px text-[var(--el-text-color-secondary)]">
-          解析结果：
-        </span>
+        <span class="text-secondary text-xs"> 解析结果： </span>
         <Tag
           v-for="(item, index) in listPreview"
           :key="index"
@@ -288,7 +282,7 @@ watch(
           :content="`单位：${propertyConfig.unit}`"
           placement="top"
         >
-          <span class="text-12px px-4px text-[var(--el-text-color-secondary)]">
+          <span class="text-secondary px-1 text-xs">
             {{ propertyConfig.unit }}
           </span>
         </Tooltip>

apps/web-antd/src/views/iot/rule/scene/form/sections/ActionSection.vue

@@ -100,7 +100,7 @@ function removeAction(index: number) {
  * @param type 执行器类型
  */
 function updateActionType(index: number, type: number) {
-  actions.value[index].type = type.toString();
+  actions.value[index]!.type = type.toString();
   onActionTypeChange(actions.value[index] as Action, type);
 }
 
@@ -119,7 +119,7 @@ function updateAction(index: number, action: Action) {
  * @param alertConfigId 告警配置ID
  */
 function updateActionAlertConfig(index: number, alertConfigId?: number) {
-  actions.value[index].alertConfigId = alertConfigId;
+  actions.value[index]!.alertConfigId = alertConfigId;
   if (actions.value[index]) {
     actions.value[index].alertConfigId = alertConfigId;
   }
@@ -153,7 +153,7 @@ function onActionTypeChange(action: Action, type: any) {
 </script>
 
 <template>
-  <Card class="rounded-8px border-primary border" shadow="never">
+  <Card class="border-primary rounded-lg border" shadow="never">
     <template #title>
       <div class="flex items-center justify-between">
         <div class="gap-8px flex items-center">
@@ -186,18 +186,18 @@ function onActionTypeChange(action: Action, type: any) {
         <div
           v-for="(action, index) in actions"
           :key="`action-${index}`"
-          class="rounded-8px border-2 border-blue-200 bg-blue-50 shadow-sm transition-shadow hover:shadow-md"
+          class="rounded-lg border-2 border-blue-200 bg-blue-50 shadow-sm transition-shadow hover:shadow-md"
         >
           <!-- 执行器头部 - 蓝色主题 -->
           <div
-            class="p-16px rounded-t-6px flex items-center justify-between border-b border-blue-200 bg-gradient-to-r from-blue-50 to-sky-50"
+            class="flex items-center justify-between rounded-t-lg border-b border-blue-200 bg-gradient-to-r from-blue-50 to-sky-50 p-4"
           >
             <div class="gap-12px flex items-center">
               <div
-                class="gap-8px text-16px font-600 flex items-center text-blue-700"
+                class="font-600 flex items-center gap-2 text-base text-blue-700"
               >
                 <div
-                  class="w-24px h-24px text-12px flex items-center justify-center rounded-full bg-blue-500 font-bold text-white"
+                  class="flex size-6 items-center justify-center rounded-full bg-blue-500 text-xs font-bold text-white"
                 >
                   {{ index + 1 }}
                 </div>
@@ -220,7 +220,7 @@ function onActionTypeChange(action: Action, type: any) {
                 @click="removeAction(index)"
                 class="hover:bg-red-50"
               >
-                <IconifyIcon icon="ep:delete" />
+                <IconifyIcon icon="lucide:trash-2" />
                 删除
               </Button>
             </div>
@@ -275,16 +275,14 @@ function onActionTypeChange(action: Action, type: any) {
                 action.type ===
                 IotRuleSceneActionTypeEnum.ALERT_TRIGGER.toString()
               "
-              class="rounded-6px p-16px border-border bg-fill-color-blank border"
+              class="border-border bg-fill-color-blank rounded-lg border p-4"
             >
-              <div class="gap-8px mb-8px flex items-center">
-                <IconifyIcon icon="ep:warning" class="text-16px text-warning" />
-                <span class="text-14px font-600 text-primary">触发告警</span>
+              <div class="mb-2 flex items-center gap-2">
+                <IconifyIcon icon="ep:warning" class="text-warning text-base" />
+                <span class="font-600 text-primary text-sm">触发告警</span>
                 <Tag size="small" type="warning">自动执行</Tag>
               </div>
-              <div
-                class="text-12px leading-relaxed text-[var(--el-text-color-secondary)]"
-              >
+              <div class="text-secondary text-xs leading-relaxed">
                 当触发条件满足时，系统将自动发送告警通知，可在菜单 [告警中心 ->
                 告警配置] 管理。
               </div>

apps/web-antd/src/views/iot/rule/scene/form/sections/TriggerSection.vue

@@ -71,7 +71,7 @@ function removeTrigger(index: number) {
  * @param type 触发器类型
  */
 function updateTriggerType(index: number, type: number) {
-  triggers.value[index].type = type;
+  triggers.value[index]!.type = type.toString();
   onTriggerTypeChange(index, type);
 }
 
@@ -90,7 +90,7 @@ function updateTriggerDeviceConfig(index: number, newTrigger: Trigger) {
  * @param cronExpression CRON 表达式
  */
 function updateTriggerCronConfig(index: number, cronExpression?: string) {
-  triggers.value[index].cronExpression = cronExpression;
+  triggers.value[index]!.cronExpression = cronExpression;
 }
 
 /**
@@ -99,7 +99,7 @@ function updateTriggerCronConfig(index: number, cronExpression?: string) {
  * @param _ 触发器类型（未使用）
  */
 function onTriggerTypeChange(index: number, _: number) {
-  const triggerItem = triggers.value[index];
+  const triggerItem = triggers.value[index]!;
   triggerItem.productId = undefined;
   triggerItem.deviceId = undefined;
   triggerItem.identifier = undefined;
@@ -127,7 +127,7 @@ onMounted(() => {
           <Tag size="small" type="info"> {{ triggers.length }} 个触发器 </Tag>
         </div>
         <Button type="primary" size="small" @click="addTrigger">
-          <IconifyIcon icon="ep:plus" />
+          <IconifyIcon icon="lucide:plus" />
           添加触发器
         </Button>
       </div>
@@ -173,7 +173,7 @@ onMounted(() => {
                 @click="removeTrigger(index)"
                 class="hover:bg-red-50"
               >
-                <IconifyIcon icon="ep:delete" />
+                <IconifyIcon icon="lucide:trash-2" />
                 删除
               </Button>
             </div>
@@ -203,7 +203,10 @@ onMounted(() => {
               <div
                 class="gap-8px p-12px px-16px rounded-6px border-primary bg-background flex items-center border"
               >
-                <IconifyIcon icon="ep:timer" class="text-18px text-danger" />
+                <IconifyIcon
+                  icon="lucide:timer"
+                  class="text-18px text-danger"
+                />
                 <span class="text-14px font-500 text-primary">
                   定时触发配置
                 </span>

apps/web-antd/src/views/mall/home/modules/shortcut-card.vue

@@ -14,7 +14,7 @@ const router = useRouter();
 const menuList = [
   {
     name: '用户管理',
-    icon: 'ep:user-filled',
+    icon: 'lucide:user',
     bgColor: 'bg-red-400',
     routerName: 'MemberUser',
   },
@@ -26,7 +26,7 @@ const menuList = [
   },
   {
     name: '订单管理',
-    icon: 'ep:list',
+    icon: 'lucide:list',
     bgColor: 'bg-yellow-500',
     routerName: 'TradeOrder',
   },
@@ -44,13 +44,13 @@ const menuList = [
   },
   {
     name: '优惠券',
-    icon: 'ep:ticket',
+    icon: 'lucide:ticket',
     bgColor: 'bg-blue-500',
     routerName: 'PromotionCoupon',
   },
   {
     name: '拼团活动',
-    icon: 'fa:group',
+    icon: 'lucide:users',
     bgColor: 'bg-purple-500',
     routerName: 'PromotionBargainActivity',
   },

apps/web-antd/src/views/mall/product/category/components/product-category-select.vue

@@ -3,6 +3,8 @@ import { computed, onMounted, ref } from 'vue';
 
 import { handleTree } from '@vben/utils';
 
+import { TreeSelect } from 'ant-design-vue';
+
 import { getCategoryList } from '#/api/mall/product/category';
 
 /** 商品分类选择组件 */

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';

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>

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>

apps/web-antd/src/views/mall/product/spu/components/spu-table-select.vue

@@ -0,0 +1,225 @@
+<!-- SPU 商品选择弹窗组件 -->
+<script lang="ts" setup>
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import type { MallCategoryApi } from '#/api/mall/product/category';
+import type { MallSpuApi } from '#/api/mall/product/spu';
+
+import { computed, onMounted, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { handleTree } from '@vben/utils';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getCategoryList } from '#/api/mall/product/category';
+import { getSpuPage } from '#/api/mall/product/spu';
+import { getRangePickerDefaultProps } from '#/utils';
+
+interface SpuTableSelectProps {
+  multiple?: boolean; // 是否单选：true - checkbox；false - radio
+}
+
+const props = withDefaults(defineProps<SpuTableSelectProps>(), {
+  multiple: false,
+});
+
+const emit = defineEmits<{
+  change: [spu: MallSpuApi.Spu | MallSpuApi.Spu[]];
+}>();
+
+const categoryList = ref<MallCategoryApi.Category[]>([]); // 分类列表
+const categoryTreeList = ref<any[]>([]); // 分类树
+
+/** 单选：处理选中变化 */
+function handleRadioChange() {
+  const selectedRow = gridApi.grid.getRadioRecord() as MallSpuApi.Spu;
+  if (selectedRow) {
+    emit('change', selectedRow);
+    modalApi.close();
+  }
+}
+
+/** 搜索表单 Schema */
+const formSchema = computed<VbenFormSchema[]>(() => [
+  {
+    fieldName: 'name',
+    label: '商品名称',
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入商品名称',
+      allowClear: true,
+    },
+  },
+  {
+    fieldName: 'categoryId',
+    label: '商品分类',
+    component: 'TreeSelect',
+    // TODO @芋艿：可能要测试下；
+    componentProps: {
+      treeData: categoryTreeList,
+      fieldNames: {
+        label: 'name',
+        value: 'id',
+      },
+      treeCheckStrictly: true,
+      placeholder: '请选择商品分类',
+      allowClear: true,
+      showSearch: true,
+      treeNodeFilterProp: 'name',
+    },
+  },
+  {
+    fieldName: 'createTime',
+    label: '创建时间',
+    component: 'RangePicker',
+    componentProps: {
+      ...getRangePickerDefaultProps(),
+      allowClear: true,
+    },
+  },
+]);
+
+/** 表格列配置 */
+const gridColumns = computed<VxeGridProps['columns']>(() => {
+  const columns: VxeGridProps['columns'] = [];
+  if (props.multiple) {
+    columns.push({ type: 'checkbox', width: 55 });
+  } else {
+    columns.push({ type: 'radio', width: 55 });
+  }
+  columns.push(
+    {
+      field: 'id',
+      title: '商品编号',
+      minWidth: 100,
+      align: 'center',
+    },
+    {
+      field: 'picUrl',
+      title: '商品图',
+      width: 100,
+      align: 'center',
+      cellRender: {
+        name: 'CellImage',
+      },
+    },
+    {
+      field: 'name',
+      title: '商品名称',
+      minWidth: 200,
+    },
+    {
+      field: 'categoryId',
+      title: '商品分类',
+      minWidth: 120,
+      formatter: ({ cellValue }) => {
+        const category = categoryList.value?.find((c) => c.id === cellValue);
+        return category?.name || '-';
+      },
+    },
+  );
+  return columns;
+});
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: formSchema.value,
+    layout: 'horizontal',
+    collapsed: false,
+  },
+  gridOptions: {
+    columns: gridColumns.value,
+    height: 500,
+    border: true,
+    checkboxConfig: {
+      reserve: true,
+    },
+    radioConfig: {
+      reserve: true,
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    proxyConfig: {
+      ajax: {
+        async query({ page }: any, formValues: any) {
+          return await getSpuPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            tabType: 0,
+            ...formValues,
+          });
+        },
+      },
+    },
+  },
+  gridEvents: {
+    radioChange: handleRadioChange,
+  },
+});
+
+const [Modal, modalApi] = useVbenModal({
+  destroyOnClose: true,
+  showConfirmButton: props.multiple, // 特殊：radio 单选情况下，走 handleRadioChange 处理。
+  onConfirm: () => {
+    const selectedRows = gridApi.grid.getCheckboxRecords() as MallSpuApi.Spu[];
+    emit('change', selectedRows);
+    modalApi.close();
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      await gridApi.grid.clearCheckboxRow();
+      await gridApi.grid.clearRadioRow();
+      return;
+    }
+
+    // 1. 先查询数据
+    await gridApi.query();
+    // 2. 设置已选中行
+    const data = modalApi.getData<MallSpuApi.Spu | MallSpuApi.Spu[]>();
+    if (props.multiple && Array.isArray(data) && data.length > 0) {
+      setTimeout(() => {
+        const tableData = gridApi.grid.getTableData().fullData;
+        data.forEach((spu) => {
+          const row = tableData.find(
+            (item: MallSpuApi.Spu) => item.id === spu.id,
+          );
+          if (row) {
+            gridApi.grid.setCheckboxRow(row, true);
+          }
+        });
+      }, 300);
+    } else if (!props.multiple && data && !Array.isArray(data)) {
+      setTimeout(() => {
+        const tableData = gridApi.grid.getTableData().fullData;
+        const row = tableData.find(
+          (item: MallSpuApi.Spu) => item.id === data.id,
+        );
+        if (row) {
+          gridApi.grid.setRadioRow(row);
+        }
+      }, 300);
+    }
+  },
+});
+
+/** 对外暴露的方法 */
+defineExpose({
+  open: (data?: MallSpuApi.Spu | MallSpuApi.Spu[]) => {
+    modalApi.setData(data).open();
+  },
+});
+
+/** 初始化分类数据 */
+onMounted(async () => {
+  categoryList.value = await getCategoryList({});
+  categoryTreeList.value = handleTree(categoryList.value, 'id', 'parentId');
+});
+</script>
+
+<template>
+  <Modal title="选择商品" class="w-[950px]">
+    <Grid />
+  </Modal>
+</template>

apps/web-antd/src/views/mall/product/spu/form/index.vue

@@ -128,10 +128,6 @@ const [InfoForm, infoFormApi] = useVbenForm({
 
 const [SkuForm, skuFormApi] = useVbenForm({
   commonConfig: {
-    componentProps: {
-      class: 'w-full',
-    },
-    formItemClass: 'col-span-2',
     labelWidth: 120,
   },
   layout: 'horizontal',
@@ -364,6 +360,7 @@ onMounted(async () => {
           <template #singleSkuList>
             <SkuList
               ref="skuListRef"
+              class="w-full"
               :is-detail="isDetail"
               :prop-form-data="formData"
               :property-list="propertyList"

apps/web-antd/src/views/mall/product/spu/form/modules/sku-list.vue

@@ -7,7 +7,12 @@ import type { MallSpuApi } from '#/api/mall/product/spu';
 
 import { ref, watch } from 'vue';
 
-import { copyValueToTarget, formatToFraction, isEmpty } from '@vben/utils';
+import {
+  copyValueToTarget,
+  formatToFraction,
+  getNestedValue,
+  isEmpty,
+} from '@vben/utils';
 
 import { Button, Image, Input, InputNumber, message } from 'ant-design-vue';
 
@@ -43,9 +48,12 @@ const emit = defineEmits<{
 
 const { isBatch, isDetail, isComponent, isActivityComponent } = props;
 
-const formData: Ref<MallSpuApi.Spu | undefined> = ref<MallSpuApi.Spu>(); // 表单数据
-const skuList = ref<MallSpuApi.Sku[]>([
-  {
+const formData: Ref<MallSpuApi.Spu | undefined> = ref<MallSpuApi.Spu>();
+const tableHeaders = ref<{ label: string; prop: string }[]>([]);
+
+/** 创建空 SKU 数据 */
+function createEmptySku(): MallSpuApi.Sku {
+  return {
     price: 0,
     marketPrice: 0,
     costPrice: 0,
@@ -56,8 +64,10 @@ const skuList = ref<MallSpuApi.Sku[]>([
     volume: 0,
     firstBrokeragePrice: 0,
     secondBrokeragePrice: 0,
-  },
-]); // 批量添加时的临时数据
+  };
+}
+
+const skuList = ref<MallSpuApi.Sku[]>([createEmptySku()]);
 
 /** 批量添加 */
 function batchAdd() {
@@ -79,34 +89,33 @@ function validateProperty() {
   }
 }
 
-/** 删除 sku */
+/** 删除 SKU */
 function deleteSku(row: MallSpuApi.Sku) {
   const index = formData.value!.skus!.findIndex(
-    // 直接把列表转成字符串比较
     (sku: MallSpuApi.Sku) =>
       JSON.stringify(sku.properties) === JSON.stringify(row.properties),
   );
-  formData.value!.skus!.splice(index, 1);
+  if (index !== -1) {
+    formData.value!.skus!.splice(index, 1);
+  }
 }
 
-const tableHeaders = ref<{ label: string; prop: string }[]>([]); // 多属性表头
-
-/** 保存时，每个商品规格的表单要校验下。例如说,销售金额最低是 0.01 这种 */
+/** 校验 SKU 数据：保存时，每个商品规格的表单要校验。例如：销售金额最低是 0.01 */
 function validateSku() {
   validateProperty();
   let warningInfo = '请检查商品各行相关属性配置，';
-  let validate = true; // 默认通过
+  let validate = true;
+
   for (const sku of formData.value!.skus!) {
-    // 作为活动组件的校验
     for (const rule of props?.ruleConfig as RuleConfig[]) {
-      const arg = getValue(sku, rule.name);
-      if (!rule.rule(arg)) {
-        validate = false; // 只要有一个不通过则直接不通过
+      const value = getNestedValue(sku, rule.name);
+      if (!rule.rule(value)) {
+        validate = false;
         warningInfo += rule.message;
         break;
       }
     }
-    // 只要有一个不通过则结束后续的校验
+
     if (!validate) {
       message.warning(warningInfo);
       throw new Error(warningInfo);
@@ -114,21 +123,6 @@ function validateSku() {
   }
 }
 
-// TODO @puhui999：是不是可以通过 getNestedValue  简化？
-function getValue(obj: any, arg: string): unknown {
-  const keys = arg.split('.');
-  let value: any = obj;
-  for (const key of keys) {
-    if (value && typeof value === 'object' && key in value) {
-      value = value[key];
-    } else {
-      value = undefined;
-      break;
-    }
-  }
-  return value;
-}
-
 /**
  * 选择时触发
  *
@@ -155,7 +149,6 @@ watch(
 
 /** 生成表数据 */
 function generateTableData(propertyList: PropertyAndValues[]) {
-  // 构建数据结构
   const propertyValues = propertyList.map((item: PropertyAndValues) =>
     (item.values || []).map((v: { id: number; name: string }) => ({
       propertyId: item.id,
@@ -164,35 +157,30 @@ function generateTableData(propertyList: PropertyAndValues[]) {
       valueName: v.name,
     })),
   );
+
   const buildSkuList = build(propertyValues);
+
   // 如果回显的 sku 属性和添加的属性不一致则重置 skus 列表
   if (!validateData(propertyList)) {
-    // 如果不一致则重置表数据，默认添加新的属性重新生成 sku 列表
     formData.value!.skus = [];
   }
+
   for (const item of buildSkuList) {
+    const properties = Array.isArray(item) ? item : [item];
     const row = {
-      properties: Array.isArray(item) ? item : [item], // 如果只有一个属性的话返回的是一个 property 对象
-      price: 0,
-      marketPrice: 0,
-      costPrice: 0,
-      barCode: '',
-      picUrl: '',
-      stock: 0,
-      weight: 0,
-      volume: 0,
-      firstBrokeragePrice: 0,
-      secondBrokeragePrice: 0,
+      ...createEmptySku(),
+      properties,
     };
+
     // 如果存在属性相同的 sku 则不做处理
-    const index = formData.value!.skus!.findIndex(
+    const exists = formData.value!.skus!.some(
       (sku: MallSpuApi.Sku) =>
         JSON.stringify(sku.properties) === JSON.stringify(row.properties),
     );
-    if (index !== -1) {
-      continue;
+
+    if (!exists) {
+      formData.value!.skus!.push(row);
     }
-    formData.value!.skus!.push(row);
   }
 }
 
@@ -224,7 +212,9 @@ function build(
     const result: MallSpuApi.Property[][] = [];
     const rest = build(propertyValuesList.slice(1));
     const firstList = propertyValuesList[0];
-    if (!firstList) return [];
+    if (!firstList) {
+      return [];
+    }
 
     for (const element of firstList) {
       for (const element_ of rest) {
@@ -248,43 +238,33 @@ watch(
     if (!formData.value!.specType) {
       return;
     }
+
     // 如果当前组件作为批量添加数据使用，则重置表数据
     if (props.isBatch) {
-      skuList.value = [
-        {
-          price: 0,
-          marketPrice: 0,
-          costPrice: 0,
-          barCode: '',
-          picUrl: '',
-          stock: 0,
-          weight: 0,
-          volume: 0,
-          firstBrokeragePrice: 0,
-          secondBrokeragePrice: 0,
-        },
-      ];
+      skuList.value = [createEmptySku()];
     }
 
     // 判断代理对象是否为空
     if (JSON.stringify(propertyList) === '[]') {
       return;
     }
-    // 重置表头
-    tableHeaders.value = [];
-    // 生成表头
-    propertyList.forEach((item, index) => {
-      // name加属性项index区分属性值
-      tableHeaders.value.push({ prop: `name${index}`, label: item.name });
-    });
+
+    // 重置并生成表头
+    tableHeaders.value = propertyList.map((item, index) => ({
+      prop: `name${index}`,
+      label: item.name,
+    }));
+
     // 如果回显的 sku 属性和添加的属性一致则不处理
     if (validateData(propertyList)) {
       return;
     }
+
     // 添加新属性没有属性值也不做处理
     if (propertyList.some((item) => !item.values || isEmpty(item.values))) {
       return;
     }
+
     // 生成 table 数据，即 sku 列表
     generateTableData(propertyList);
   },
@@ -296,26 +276,35 @@ watch(
 
 const activitySkuListRef = ref();
 
+/** 获取 SKU 表格引用 */
 function getSkuTableRef() {
   return activitySkuListRef.value;
 }
 
-defineExpose({ generateTableData, validateSku, getSkuTableRef });
+defineExpose({
+  generateTableData,
+  validateSku,
+  getSkuTableRef,
+});
 </script>
 
 <template>
-  <div>
+  <div class="w-full">
     <!-- 情况一：添加/修改 -->
-    <!-- TODO @puhui999：有可以通过 grid 来做么？主要考虑，这样不直接使用 vxe 标签，抽象程度更高； -->
     <VxeTable
       v-if="!isDetail && !isActivityComponent"
       :data="isBatch ? skuList : formData?.skus || []"
       border
       max-height="500"
+      :column-config="{
+        resizable: true,
+      }"
+      :resizable-config="{
+        dragMode: 'fixed',
+      }"
       size="small"
-      class="w-full"
     >
-      <VxeColumn align="center" title="图片" min-width="120">
+      <VxeColumn align="center" title="图片" width="120" fixed="left">
         <template #default="{ row }">
           <ImageUpload
             v-model:value="row.picUrl"
@@ -332,7 +321,8 @@ defineExpose({ generateTableData, validateSku, getSkuTableRef });
           :key="index"
           :title="item.label"
           align="center"
-          min-width="120"
+          fixed="left"
+          min-width="80"
         >
           <template #default="{ row }">
             <span class="font-bold text-[#40aaff]">
@@ -341,12 +331,12 @@ defineExpose({ generateTableData, validateSku, getSkuTableRef });
           </template>
         </VxeColumn>
       </template>
-      <VxeColumn align="center" title="商品条码" min-width="168">
+      <VxeColumn align="center" title="商品条码" width="168">
         <template #default="{ row }">
           <Input v-model:value="row.barCode" class="w-full" />
         </template>
       </VxeColumn>
-      <VxeColumn align="center" title="销售价" min-width="168">
+      <VxeColumn align="center" title="销售价" width="168">
         <template #default="{ row }">
           <InputNumber
             v-model:value="row.price"
@@ -357,7 +347,7 @@ defineExpose({ generateTableData, validateSku, getSkuTableRef });
           />
         </template>
       </VxeColumn>
-      <VxeColumn align="center" title="市场价" min-width="168">
+      <VxeColumn align="center" title="市场价" width="168">
         <template #default="{ row }">
           <InputNumber
             v-model:value="row.marketPrice"
@@ -368,7 +358,7 @@ defineExpose({ generateTableData, validateSku, getSkuTableRef });
           />
         </template>
       </VxeColumn>
-      <VxeColumn align="center" title="成本价" min-width="168">
+      <VxeColumn align="center" title="成本价" width="168">
         <template #default="{ row }">
           <InputNumber
             v-model:value="row.costPrice"
@@ -379,12 +369,12 @@ defineExpose({ generateTableData, validateSku, getSkuTableRef });
           />
         </template>
       </VxeColumn>
-      <VxeColumn align="center" title="库存" min-width="168">
+      <VxeColumn align="center" title="库存" width="168">
         <template #default="{ row }">
           <InputNumber v-model:value="row.stock" :min="0" class="w-full" />
         </template>
       </VxeColumn>
-      <VxeColumn align="center" title="重量(kg)" min-width="168">
+      <VxeColumn align="center" title="重量(kg)" width="168">
         <template #default="{ row }">
           <InputNumber
             v-model:value="row.weight"
@@ -395,7 +385,7 @@ defineExpose({ generateTableData, validateSku, getSkuTableRef });
           />
         </template>
       </VxeColumn>
-      <VxeColumn align="center" title="体积(m^3)" min-width="168">
+      <VxeColumn align="center" title="体积(m^3)" width="168">
         <template #default="{ row }">
           <InputNumber
             v-model:value="row.volume"
@@ -407,7 +397,7 @@ defineExpose({ generateTableData, validateSku, getSkuTableRef });
         </template>
       </VxeColumn>
       <template v-if="formData?.subCommissionType">
-        <VxeColumn align="center" title="一级返佣(元)" min-width="168">
+        <VxeColumn align="center" title="一级返佣(元)" width="168">
           <template #default="{ row }">
             <InputNumber
               v-model:value="row.firstBrokeragePrice"
@@ -418,7 +408,7 @@ defineExpose({ generateTableData, validateSku, getSkuTableRef });
             />
           </template>
         </VxeColumn>
-        <VxeColumn align="center" title="二级返佣(元)" min-width="168">
+        <VxeColumn align="center" title="二级返佣(元)" width="168">
           <template #default="{ row }">
             <InputNumber
               v-model:value="row.secondBrokeragePrice"
@@ -462,13 +452,18 @@ defineExpose({ generateTableData, validateSku, getSkuTableRef });
       border
       max-height="500"
       size="small"
-      class="w-full"
+      :column-config="{
+        resizable: true,
+      }"
+      :resizable-config="{
+        dragMode: 'fixed',
+      }"
       :checkbox-config="isComponent ? { reserve: true } : undefined"
       @checkbox-change="handleSelectionChange"
       @checkbox-all="handleSelectionChange"
     >
       <VxeColumn v-if="isComponent" type="checkbox" width="45" />
-      <VxeColumn align="center" title="图片" min-width="120">
+      <VxeColumn align="center" title="图片" max-width="140" fixed="left">
         <template #default="{ row }">
           <Image
             v-if="row.picUrl"
@@ -485,7 +480,8 @@ defineExpose({ generateTableData, validateSku, getSkuTableRef });
           :key="index"
           :title="item.label"
           align="center"
-          min-width="80"
+          max-width="80"
+          fixed="left"
         >
           <template #default="{ row }">
             <span class="font-bold text-[#40aaff]">
@@ -494,48 +490,48 @@ defineExpose({ generateTableData, validateSku, getSkuTableRef });
           </template>
         </VxeColumn>
       </template>
-      <VxeColumn align="center" title="商品条码" min-width="100">
+      <VxeColumn align="center" title="商品条码" width="100">
         <template #default="{ row }">
           {{ row.barCode }}
         </template>
       </VxeColumn>
-      <VxeColumn align="center" title="销售价(元)" min-width="80">
+      <VxeColumn align="center" title="销售价(元)" width="80">
         <template #default="{ row }">
           {{ row.price }}
         </template>
       </VxeColumn>
-      <VxeColumn align="center" title="市场价(元)" min-width="80">
+      <VxeColumn align="center" title="市场价(元)" width="80">
         <template #default="{ row }">
           {{ row.marketPrice }}
         </template>
       </VxeColumn>
-      <VxeColumn align="center" title="成本价(元)" min-width="80">
+      <VxeColumn align="center" title="成本价(元)" width="80">
         <template #default="{ row }">
           {{ row.costPrice }}
         </template>
       </VxeColumn>
-      <VxeColumn align="center" title="库存" min-width="80">
+      <VxeColumn align="center" title="库存" width="80">
         <template #default="{ row }">
           {{ row.stock }}
         </template>
       </VxeColumn>
-      <VxeColumn align="center" title="重量(kg)" min-width="80">
+      <VxeColumn align="center" title="重量(kg)" width="80">
         <template #default="{ row }">
           {{ row.weight }}
         </template>
       </VxeColumn>
-      <VxeColumn align="center" title="体积(m^3)" min-width="80">
+      <VxeColumn align="center" title="体积(m^3)" width="80">
         <template #default="{ row }">
           {{ row.volume }}
         </template>
       </VxeColumn>
       <template v-if="formData?.subCommissionType">
-        <VxeColumn align="center" title="一级返佣(元)" min-width="80">
+        <VxeColumn align="center" title="一级返佣(元)" width="80">
           <template #default="{ row }">
             {{ row.firstBrokeragePrice }}
           </template>
         </VxeColumn>
-        <VxeColumn align="center" title="二级返佣(元)" min-width="80">
+        <VxeColumn align="center" title="二级返佣(元)" width="80">
           <template #default="{ row }">
             {{ row.secondBrokeragePrice }}
           </template>
@@ -550,10 +546,15 @@ defineExpose({ generateTableData, validateSku, getSkuTableRef });
       border
       max-height="500"
       size="small"
-      class="w-full"
+      :column-config="{
+        resizable: true,
+      }"
+      :resizable-config="{
+        dragMode: 'fixed',
+      }"
     >
-      <VxeColumn v-if="isComponent" type="checkbox" width="45" />
-      <VxeColumn align="center" title="图片" min-width="120">
+      <VxeColumn v-if="isComponent" type="checkbox" width="45" fixed="left" />
+      <VxeColumn align="center" title="图片" max-width="140" fixed="left">
         <template #default="{ row }">
           <Image
             :src="row.picUrl"
@@ -569,7 +570,8 @@ defineExpose({ generateTableData, validateSku, getSkuTableRef });
           :key="index"
           :title="item.label"
           align="center"
-          min-width="80"
+          width="80"
+          fixed="left"
         >
           <template #default="{ row }">
             <span class="font-bold text-[#40aaff]">
@@ -578,27 +580,27 @@ defineExpose({ generateTableData, validateSku, getSkuTableRef });
           </template>
         </VxeColumn>
       </template>
-      <VxeColumn align="center" title="商品条码" min-width="100">
+      <VxeColumn align="center" title="商品条码" width="100">
         <template #default="{ row }">
           {{ row.barCode }}
         </template>
       </VxeColumn>
-      <VxeColumn align="center" title="销售价(元)" min-width="80">
+      <VxeColumn align="center" title="销售价(元)" width="80">
         <template #default="{ row }">
           {{ formatToFraction(row.price) }}
         </template>
       </VxeColumn>
-      <VxeColumn align="center" title="市场价(元)" min-width="80">
+      <VxeColumn align="center" title="市场价(元)" width="80">
         <template #default="{ row }">
           {{ formatToFraction(row.marketPrice) }}
         </template>
       </VxeColumn>
-      <VxeColumn align="center" title="成本价(元)" min-width="80">
+      <VxeColumn align="center" title="成本价(元)" width="80">
         <template #default="{ row }">
           {{ formatToFraction(row.costPrice) }}
         </template>
       </VxeColumn>
-      <VxeColumn align="center" title="库存" min-width="80">
+      <VxeColumn align="center" title="库存" width="80">
         <template #default="{ row }">
           {{ row.stock }}
         </template>

apps/web-antd/src/views/mall/product/spu/form/modules/spu-table-select.vue

@@ -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>

apps/web-antd/src/views/mall/promotion/banner/data.ts

@@ -145,7 +145,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
       cellRender: {
         name: 'CellDict',
         props: {
-          dictType: DICT_TYPE.COMMON_STATUS,
+          type: DICT_TYPE.COMMON_STATUS,
         },
       },
     },
@@ -156,7 +156,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
       cellRender: {
         name: 'CellDict',
         props: {
-          dictType: DICT_TYPE.PROMOTION_BANNER_POSITION,
+          type: DICT_TYPE.PROMOTION_BANNER_POSITION,
         },
       },
     },

apps/web-antd/src/views/mall/promotion/components/app-link-input/app-link-select-dialog.vue

@@ -37,9 +37,12 @@ const detailSelectDialog = ref<{
   type: undefined,
 }); // 详情选择对话框
 
-/** 打开弹窗 */
 const dialogVisible = ref(false);
-const open = (link: string) => {
+
+defineExpose({ open });
+
+/** 打开弹窗 */
+async function open(link: string) {
   activeAppLink.value.path = link;
   dialogVisible.value = true;
   // 滚动到当前的链接
@@ -54,19 +57,18 @@ const open = (link: string) => {
   );
   if (group) {
     // 使用 nextTick 的原因：可能 Dom 还没生成，导致滚动失败
-    nextTick(() => handleGroupSelected(group.name));
+    await nextTick();
+    handleGroupSelected(group.name);
   }
-};
-defineExpose({ open });
+}
 
 /** 处理 APP 链接选中 */
-const handleAppLinkSelected = (appLink: AppLink) => {
+function handleAppLinkSelected(appLink: AppLink) {
   if (!isSameLink(appLink.path, activeAppLink.value.path)) {
     activeAppLink.value = appLink;
   }
   switch (appLink.type) {
     case APP_LINK_TYPE_ENUM.PRODUCT_CATEGORY_LIST: {
-      detailSelectDialog.value.visible = true;
       detailSelectDialog.value.type = appLink.type;
       // 返显
       detailSelectDialog.value.id =
@@ -74,26 +76,30 @@ const handleAppLinkSelected = (appLink: AppLink) => {
           'id',
           `http://127.0.0.1${activeAppLink.value.path}`,
         ) || undefined;
+      detailSelectDialog.value.visible = true;
       break;
     }
     default: {
       break;
     }
   }
-};
+}
 
+/** 处理确认提交 */
 function handleSubmit() {
-  dialogVisible.value = false;
   emit('change', activeAppLink.value.path);
   emit('appLinkChange', activeAppLink.value);
+  dialogVisible.value = false;
 }
 
 /**
  * 处理右侧链接列表滚动
+ *
  * @param {object} param0 滚动事件参数
  * @param {number} param0.scrollTop 滚动条的位置
  */
-function handleScroll({ scrollTop }: { scrollTop: number }) {
+function handleScroll(event: Event) {
+  const scrollTop = (event.target as HTMLDivElement).scrollTop;
   const titleEl = groupTitleRefs.value.find((titleEl: HTMLInputElement) => {
     // 获取标题的位置信息
     const { offsetHeight, offsetTop } = titleEl;
@@ -137,27 +143,33 @@ function isSameLink(link1: string, link2: string) {
 
 /** 处理详情选择 */
 function handleProductCategorySelected(id: number) {
-  // TODO @AI：这里有点问题；activeAppLink 地址；
+  // 生成 activeAppLink
   const url = new URL(activeAppLink.value.path, 'http://127.0.0.1');
-  // 修改 id 参数
   url.searchParams.set('id', `${id}`);
-  // 排除域名
   activeAppLink.value.path = `${url.pathname}${url.search}`;
-  // 关闭对话框
+
+  // 关闭对话框，并重置 id
   detailSelectDialog.value.visible = false;
-  // 重置 id
   detailSelectDialog.value.id = undefined;
 }
 </script>
 <template>
-  <Modal v-model:open="dialogVisible" title="选择链接" width="65%">
+  <Modal
+    v-model:open="dialogVisible"
+    title="选择链接"
+    width="65%"
+    @ok="handleSubmit"
+  >
     <div class="flex h-[500px] gap-2">
       <!-- 左侧分组列表 -->
-      <div class="flex h-full flex-col overflow-y-auto" ref="groupScrollbar">
+      <div
+        class="flex h-full flex-col overflow-y-auto border-r border-gray-200 pr-2"
+        ref="groupScrollbar"
+      >
         <Button
           v-for="(group, groupIndex) in APP_LINK_GROUP_LIST"
           :key="groupIndex"
-          class="mb-1 ml-0 mr-4 w-[90px] justify-start"
+          class="!ml-0 mb-1 mr-4 !justify-start"
           :class="[{ active: activeGroup === group.name }]"
           ref="groupBtnRefs"
           :type="activeGroup === group.name ? 'primary' : 'default'"
@@ -168,16 +180,19 @@ function handleProductCategorySelected(id: number) {
       </div>
       <!-- 右侧链接列表 -->
       <div
-        class="h-full flex-1 overflow-y-auto"
+        class="h-full flex-1 overflow-y-auto pl-2"
         @scroll="handleScroll"
         ref="linkScrollbar"
       >
         <div
           v-for="(group, groupIndex) in APP_LINK_GROUP_LIST"
           :key="groupIndex"
+          class="mb-4 border-b border-gray-100 pb-4 last:mb-0 last:border-b-0"
         >
           <!-- 分组标题 -->
-          <div class="font-bold" ref="groupTitleRefs">{{ group.name }}</div>
+          <div class="mb-2 font-bold" ref="groupTitleRefs">
+            {{ group.name }}
+          </div>
           <!-- 链接列表 -->
           <Tooltip
             v-for="(appLink, appLinkIndex) in group.links"
@@ -201,13 +216,9 @@ function handleProductCategorySelected(id: number) {
         </div>
       </div>
     </div>
-    <!-- 底部对话框操作按钮 -->
-    <template #footer>
-      <Button type="primary" @click="handleSubmit">确 定</Button>
-      <Button @click="dialogVisible = false">取 消</Button>
-    </template>
   </Modal>
-  <Modal v-model:open="detailSelectDialog.visible" title="" width="50%">
+
+  <Modal v-model:open="detailSelectDialog.visible" title="选择分类" width="65%">
     <Form class="min-h-[200px]">
       <FormItem
         label="选择分类"
@@ -224,6 +235,7 @@ function handleProductCategorySelected(id: number) {
     </Form>
   </Modal>
 </template>
+
 <style lang="scss" scoped>
 :deep(.ant-btn + .ant-btn) {
   margin-left: 0 !important;

apps/web-antd/src/views/mall/promotion/components/app-link-input/index.vue

@@ -1,14 +1,14 @@
 <script lang="ts" setup>
 import { ref, watch } from 'vue';
 
-import { Button, Input, InputGroup } from 'ant-design-vue';
+import { Button, Input } from 'ant-design-vue';
 
 import AppLinkSelectDialog from './app-link-select-dialog.vue';
 
 /** APP 链接输入框 */
 defineOptions({ name: 'AppLinkInput' });
 
-// 定义属性
+/** 定义属性 */
 const props = defineProps({
   modelValue: {
     type: String,
@@ -23,8 +23,16 @@ const emit = defineEmits<{
 const dialogRef = ref(); // 选择对话框
 
 const appLink = ref(''); // 当前的链接
-const handleOpenDialog = () => dialogRef.value?.open(appLink.value); // 处理打开对话框
-const handleLinkSelected = (link: string) => (appLink.value = link); // 处理 APP 链接选中
+
+/** 处理打开对话框 */
+function handleOpenDialog() {
+  return dialogRef.value?.open(appLink.value);
+}
+
+/** 处理 APP 链接选中 */
+function handleLinkSelected(link: string) {
+  appLink.value = link;
+}
 
 watch(
   () => props.modelValue,
@@ -38,14 +46,15 @@ watch(
 );
 </script>
 <template>
-  <InputGroup compact>
-    <Input
-      v-model:value="appLink"
-      placeholder="输入或选择链接"
-      class="flex-1"
-    />
-    <Button @click="handleOpenDialog">选择</Button>
-  </InputGroup>
-
+  <Input v-model:value="appLink" placeholder="输入或选择链接">
+    <template #addonAfter>
+      <Button
+        @click="handleOpenDialog"
+        class="!border-none !bg-transparent !p-0"
+      >
+        选择
+      </Button>
+    </template>
+  </Input>
   <AppLinkSelectDialog ref="dialogRef" @change="handleLinkSelected" />
 </template>

apps/web-antd/src/views/mall/promotion/components/color-input/index.vue

@@ -1,9 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
-// import { PREDEFINE_COLORS } from '@vben/constants';
-
-import { Input, InputGroup } from 'ant-design-vue';
+import { Input } from 'ant-design-vue';
 
 /** 颜色输入框 */
 defineOptions({ name: 'ColorInput' });
@@ -28,12 +26,25 @@ const color = computed({
 </script>
 
 <template>
-  <InputGroup compact>
-    <!-- TODO 芋艿：后续在处理，antd 不支持该组件；
-    <ColorPicker v-model:value="color" :presets="PREDEFINE_COLORS" />
-    -->
-    <Input v-model:value="color" class="flex-1" />
-  </InputGroup>
+  <div class="flex gap-2">
+    <input
+      v-model="color"
+      type="color"
+      class="h-8 w-12 cursor-pointer rounded border border-gray-300"
+    />
+    <Input v-model:value="color" class="flex-1" placeholder="请输入颜色值" />
+  </div>
 </template>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+input[type='color'] {
+  &::-webkit-color-swatch-wrapper {
+    padding: 2px;
+  }
+
+  &::-webkit-color-swatch {
+    border: none;
+    border-radius: 2px;
+  }
+}
+</style>

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-container-property.vue

@@ -3,11 +3,13 @@ import type { ComponentStyle } from '../util';
 
 import { useVModel } from '@vueuse/core';
 import {
-  Card,
+  Col,
   Form,
   FormItem,
+  InputNumber,
   Radio,
   RadioGroup,
+  Row,
   Slider,
   TabPane,
   Tabs,
@@ -27,7 +29,7 @@ const props = defineProps<{ modelValue: ComponentStyle }>();
 const emit = defineEmits(['update:modelValue']);
 const formData = useVModel(props, 'modelValue', emit);
 
-const treeData = [
+const treeData: any[] = [
   {
     label: '外部边距',
     prop: 'margin',
@@ -96,7 +98,7 @@ const treeData = [
   },
 ];
 
-const handleSliderChange = (prop: string) => {
+function handleSliderChange(prop: string) {
   switch (prop) {
     case 'borderRadius': {
       formData.value.borderTopLeftRadius = formData.value.borderRadius;
@@ -120,7 +122,7 @@ const handleSliderChange = (prop: string) => {
       break;
     }
   }
-};
+}
 </script>
 
 <template>
@@ -131,13 +133,10 @@ const handleSliderChange = (prop: string) => {
     </TabPane>
 
     <!-- 每个组件的通用内容 -->
-    <TabPane tab="样式" key="style">
-      <Card title="组件样式" class="property-group">
-        <Form
-          :model="formData"
-          label-col="{ span: 6 }"
-          wrapper-col="{ span: 18 }"
-        >
+    <TabPane tab="样式" key="style" force-render>
+      <p class="text-lg font-bold">组件样式：</p>
+      <div class="flex flex-col gap-2 rounded-md p-4 shadow-lg">
+        <Form :model="formData">
           <FormItem label="组件背景" name="bgType">
             <RadioGroup v-model:value="formData.bgType">
               <Radio value="color">纯色</Radio>
@@ -160,31 +159,44 @@ const handleSliderChange = (prop: string) => {
               <template #tip>建议宽度 750px</template>
             </UploadImg>
           </FormItem>
-          <Tree
-            :tree-data="treeData"
-            :expand-on-click-node="false"
-            default-expand-all
-          >
-            <template #title="{ data, node }">
+          <Tree :tree-data="treeData" default-expand-all :block-node="true">
+            <template #title="{ dataRef }">
               <FormItem
-                :label="data.label"
-                :name="data.prop"
+                :label="dataRef.label"
+                :name="dataRef.prop"
+                :label-col="
+                  dataRef.children ? { span: 6 } : { span: 5, offset: 1 }
+                "
+                :wrapper-col="dataRef.children ? { span: 18 } : { span: 18 }"
                 class="mb-0 w-full"
               >
-                <Slider
-                  v-model:value="
-                    formData[data.prop as keyof ComponentStyle] as number
-                  "
-                  :max="100"
-                  :min="0"
-                  @change="handleSliderChange(data.prop)"
-                />
+                <Row>
+                  <Col :span="12">
+                    <Slider
+                      v-model:value="
+                        formData[dataRef.prop as keyof ComponentStyle]
+                      "
+                      :max="100"
+                      :min="0"
+                      @change="handleSliderChange(dataRef.prop)"
+                    />
+                  </Col>
+                  <Col :span="4">
+                    <InputNumber
+                      :max="100"
+                      :min="0"
+                      v-model:value="
+                        formData[dataRef.prop as keyof ComponentStyle]
+                      "
+                    />
+                  </Col>
+                </Row>
               </FormItem>
             </template>
           </Tree>
           <slot name="style" :style="formData"></slot>
         </Form>
-      </Card>
+      </div>
     </TabPane>
   </Tabs>
 </template>
@@ -197,4 +209,14 @@ const handleSliderChange = (prop: string) => {
 :deep(.ant-input-number) {
   width: 50px;
 }
+
+:deep(.ant-tree) {
+  .ant-tree-node-content-wrapper {
+    flex: 1;
+  }
+
+  .ant-form-item {
+    margin-bottom: 0;
+  }
+}
 </style>

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-container.vue

@@ -5,7 +5,7 @@ import { computed } from 'vue';
 
 import { IconifyIcon } from '@vben/icons';
 
-import { Button, Tooltip } from 'ant-design-vue';
+import { Button } from 'ant-design-vue';
 
 import { VerticalButtonGroup } from '#/views/mall/promotion/components';
 
@@ -49,9 +49,7 @@ const emits = defineEmits<{
 type DiyComponentWithStyle = DiyComponent<any> & {
   property: { style?: ComponentStyle };
 };
-/**
- * 组件样式
- */
+/** 组件样式 */
 const style = computed(() => {
   const componentStyle = props.component.property.style;
   if (!componentStyle) {
@@ -78,38 +76,29 @@ const style = computed(() => {
   };
 });
 
-/**
- * 移动组件
- * @param direction 移动方向
- */
+/** 移动组件 */
 const handleMoveComponent = (direction: number) => {
   emits('move', direction);
 };
 
-/**
- * 复制组件
- */
+/** 复制组件 */
 const handleCopyComponent = () => {
   emits('copy');
 };
 
-/**
- * 删除组件
- */
+/** 删除组件 */
 const handleDeleteComponent = () => {
   emits('delete');
 };
 </script>
 <template>
-  <div class="component" :class="[{ active }]">
-    <div
-      :style="{
-        ...style,
-      }"
-    >
+  <div class="component relative cursor-move" :class="[{ active }]">
+    <div :style="style">
       <component :is="component.id" :property="component.property" />
     </div>
-    <div class="component-wrap">
+    <div
+      class="component-wrap absolute -bottom-1 -left-0.5 -right-0.5 -top-1 block h-full w-full"
+    >
       <!-- 左侧：组件名（悬浮的小贴条） -->
       <div class="component-name" v-if="component.name">
         {{ component.name }}
@@ -119,33 +108,61 @@ const handleDeleteComponent = () => {
         class="component-toolbar"
         v-if="showToolbar && component.name && active"
       >
-        <VerticalButtonGroup type="primary">
-          <Tooltip title="上移" placement="right">
-            <Button
-              :disabled="!canMoveUp"
-              @click.stop="handleMoveComponent(-1)"
-            >
-              <IconifyIcon icon="ep:arrow-up" />
-            </Button>
-          </Tooltip>
-          <Tooltip title="下移" placement="right">
-            <Button
-              :disabled="!canMoveDown"
-              @click.stop="handleMoveComponent(1)"
-            >
-              <IconifyIcon icon="ep:arrow-down" />
-            </Button>
-          </Tooltip>
-          <Tooltip title="复制" placement="right">
-            <Button @click.stop="handleCopyComponent()">
-              <IconifyIcon icon="ep:copy-document" />
-            </Button>
-          </Tooltip>
-          <Tooltip title="删除" placement="right">
-            <Button @click.stop="handleDeleteComponent()">
-              <IconifyIcon icon="ep:delete" />
-            </Button>
-          </Tooltip>
+        <VerticalButtonGroup size="small">
+          <Button
+            :disabled="!canMoveUp"
+            type="primary"
+            size="small"
+            @click.stop="handleMoveComponent(-1)"
+            v-tippy="{
+              content: '上移',
+              delay: 100,
+              placement: 'right',
+              arrow: true,
+            }"
+          >
+            <IconifyIcon icon="lucide:arrow-up" />
+          </Button>
+          <Button
+            :disabled="!canMoveDown"
+            type="primary"
+            size="small"
+            @click.stop="handleMoveComponent(1)"
+            v-tippy="{
+              content: '下移',
+              delay: 100,
+              placement: 'right',
+              arrow: true,
+            }"
+          >
+            <IconifyIcon icon="lucide:arrow-down" />
+          </Button>
+          <Button
+            type="primary"
+            size="small"
+            @click.stop="handleCopyComponent()"
+            v-tippy="{
+              content: '复制',
+              delay: 100,
+              placement: 'right',
+              arrow: true,
+            }"
+          >
+            <IconifyIcon icon="lucide:copy" />
+          </Button>
+          <Button
+            type="primary"
+            size="small"
+            @click.stop="handleDeleteComponent()"
+            v-tippy="{
+              content: '删除',
+              delay: 100,
+              placement: 'right',
+              arrow: true,
+            }"
+          >
+            <IconifyIcon icon="lucide:trash-2" />
+          </Button>
         </VerticalButtonGroup>
       </div>
     </div>
@@ -158,22 +175,11 @@ $hover-border-width: 1px;
 $name-position: -85px;
 $toolbar-position: -55px;
 
-/* 组件 */
 .component {
-  position: relative;
-  cursor: move;
-
   .component-wrap {
-    position: absolute;
-    top: 0;
-    left: -$active-border-width;
-    display: block;
-    width: 100%;
-    height: 100%;
-
     /* 鼠标放到组件上时 */
     &:hover {
-      border: $hover-border-width dashed var(--ant-color-primary);
+      border: $hover-border-width dashed hsl(var(--primary));
       box-shadow: 0 0 5px 0 rgb(24 144 255 / 30%);
 
       .component-name {
@@ -194,9 +200,9 @@ $toolbar-position: -55px;
       height: 25px;
       font-size: 12px;
       line-height: 25px;
-      color: #6a6a6a;
+      color: hsl(var(--text-color));
       text-align: center;
-      background: #fff;
+      background: hsl(var(--background));
       box-shadow:
         0 0 4px #00000014,
         0 2px 6px #0000000f,
@@ -211,7 +217,7 @@ $toolbar-position: -55px;
         height: 0;
         content: ' ';
         border: 5px solid transparent;
-        border-left-color: #fff;
+        border-left-color: hsl(var(--background));
       }
     }
 
@@ -231,18 +237,18 @@ $toolbar-position: -55px;
         height: 0;
         content: ' ';
         border: 5px solid transparent;
-        border-right-color: #2d8cf0;
+        border-right-color: hsl(var(--primary));
       }
     }
   }
 
-  /* 组件选中时 */
+  /* 选中状态 */
   &.active {
     margin-bottom: 4px;
 
     .component-wrap {
       margin-bottom: $active-border-width + $active-border-width;
-      border: $active-border-width solid var(--ant-color-primary) !important;
+      border: $active-border-width solid hsl(var(--primary)) !important;
       box-shadow: 0 0 10px 0 rgb(24 144 255 / 30%);
 
       .component-name {
@@ -251,10 +257,10 @@ $toolbar-position: -55px;
         /* 防止加了边框之后，位置移动 */
         left: $name-position - $active-border-width !important;
         color: #fff;
-        background: var(--ant-color-primary);
+        background: hsl(var(--primary));
 
         &::after {
-          border-left-color: var(--ant-color-primary);
+          border-left-color: hsl(var(--primary));
         }
       }
 

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-library.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import type { DiyComponent, DiyComponentLibrary } from '../util';
 
-import { reactive, watch } from 'vue';
+import { ref, watch } from 'vue';
 
 import { IconifyIcon } from '@vben/icons';
 import { cloneDeep } from '@vben/utils';
 
-import { Collapse, CollapsePanel } from 'ant-design-vue';
+import { Collapse } from 'ant-design-vue';
 import draggable from 'vuedraggable';
 
 import { componentConfigs } from './mobile/index';
@@ -14,34 +14,33 @@ import { componentConfigs } from './mobile/index';
 /** 组件库：目前左侧的【基础组件】、【图文组件】部分 */
 defineOptions({ name: 'ComponentLibrary' });
 
-// 组件列表
+/** 组件列表 */
 const props = defineProps<{
   list: DiyComponentLibrary[];
 }>();
-// 组件分组
-const groups = reactive<any[]>([]);
-// 展开的折叠面板
-const extendGroups = reactive<string[]>([]);
 
-// 监听 list 属性，按照 DiyComponentLibrary 的 name 分组
+const groups = ref<any[]>([]); // 组件分组
+const extendGroups = ref<string[]>([]); // 展开的折叠面板
+
+/** 监听 list 属性，按照 DiyComponentLibrary 的 name 分组 */
 watch(
   () => props.list,
   () => {
     // 清除旧数据
-    extendGroups.length = 0;
-    groups.length = 0;
+    extendGroups.value = [];
+    groups.value = [];
     // 重新生成数据
     props.list.forEach((group) => {
       // 是否展开分组
       if (group.extended) {
-        extendGroups.push(group.name);
+        extendGroups.value.push(group.name);
       }
       // 查找组件
       const components = group.components
         .map((name) => componentConfigs[name] as DiyComponent<any>)
         .filter(Boolean);
       if (components.length > 0) {
-        groups.push({
+        groups.value.push({
           name: group.name,
           components,
         });
@@ -53,165 +52,51 @@ watch(
   },
 );
 
-// 克隆组件
-const handleCloneComponent = (component: DiyComponent<any>) => {
+/** 克隆组件 */
+function handleCloneComponent(component: DiyComponent<any>) {
   const instance = cloneDeep(component);
   instance.uid = Date.now();
   return instance;
-};
+}
 </script>
 
 <template>
-  <div class="editor-left w-[261px]">
-    <div class="h-full overflow-y-auto">
-      <Collapse v-model:active-key="extendGroups">
-        <CollapsePanel
-          v-for="group in groups"
-          :key="group.name"
-          :header="group.name"
+  <div class="z-[1] max-h-[calc(80vh)] shrink-0 select-none overflow-y-auto">
+    <Collapse
+      v-model:active-key="extendGroups"
+      :bordered="false"
+      class="bg-card"
+    >
+      <Collapse.Panel
+        v-for="(group, index) in groups"
+        :key="group.name"
+        :header="group.name"
+        :force-render="true"
+      >
+        <draggable
+          class="flex flex-wrap items-center"
+          ghost-class="draggable-ghost"
+          :item-key="index.toString()"
+          :list="group.components"
+          :sort="false"
+          :group="{ name: 'component', pull: 'clone', put: false }"
+          :clone="handleCloneComponent"
+          :animation="200"
+          :force-fallback="false"
         >
-          <draggable
-            class="component-container"
-            ghost-class="draggable-ghost"
-            item-key="index"
-            :list="group.components"
-            :sort="false"
-            :group="{ name: 'component', pull: 'clone', put: false }"
-            :clone="handleCloneComponent"
-            :animation="200"
-            :force-fallback="true"
-          >
-            <template #item="{ element }">
-              <div>
-                <div class="drag-placement">组件放置区域</div>
-                <div class="component">
-                  <IconifyIcon :icon="element.icon" :size="32" />
-                  <span class="mt-1 text-xs">{{ element.name }}</span>
-                </div>
-              </div>
-            </template>
-          </draggable>
-        </CollapsePanel>
-      </Collapse>
-    </div>
+          <template #item="{ element }">
+            <div
+              class="component flex h-20 w-20 cursor-move flex-col items-center justify-center hover:border-2 hover:border-blue-500"
+            >
+              <IconifyIcon
+                :icon="element.icon"
+                class="mb-1 size-8 text-gray-500"
+              />
+              <span class="mt-1 text-xs">{{ element.name }}</span>
+            </div>
+          </template>
+        </draggable>
+      </Collapse.Panel>
+    </Collapse>
   </div>
 </template>
-
-<style scoped lang="scss">
-.editor-left {
-  z-index: 1;
-  flex-shrink: 0;
-  user-select: none;
-  box-shadow: 8px 0 8px -8px rgb(0 0 0 / 12%);
-
-  :deep(.ant-collapse) {
-    border-top: none;
-  }
-
-  :deep(.ant-collapse-item) {
-    border-bottom: none;
-  }
-
-  :deep(.ant-collapse-content) {
-    padding-bottom: 0;
-  }
-
-  :deep(.ant-collapse-header) {
-    height: 32px;
-    padding: 0 24px !important;
-    line-height: 32px;
-    background-color: var(--ant-color-bg-layout);
-    border-bottom: none;
-  }
-
-  .component-container {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-  }
-
-  .component {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    width: 86px;
-    height: 86px;
-    cursor: move;
-    border-right: 1px solid var(--ant-color-border-secondary);
-    border-bottom: 1px solid var(--ant-color-border-secondary);
-
-    .anticon {
-      margin-bottom: 4px;
-      color: gray;
-    }
-  }
-
-  .component.active,
-  .component:hover {
-    color: var(--ant-color-white);
-    background: var(--ant-color-primary);
-
-    .anticon {
-      color: var(--ant-color-white);
-    }
-  }
-
-  .component:nth-of-type(3n) {
-    border-right: none;
-  }
-}
-
-/* 拖拽占位提示，默认不显示 */
-.drag-placement {
-  display: none;
-  color: #fff;
-}
-
-.drag-area {
-  /* 拖拽到手机区域时的样式 */
-  .draggable-ghost {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 40px;
-
-    /* 条纹背景 */
-    background: linear-gradient(
-      45deg,
-      #91a8d5 0,
-      #91a8d5 10%,
-      #94b4eb 10%,
-      #94b4eb 50%,
-      #91a8d5 50%,
-      #91a8d5 60%,
-      #94b4eb 60%,
-      #94b4eb
-    );
-    background-size: 1rem 1rem;
-    transition: all 0.5s;
-
-    span {
-      display: inline-block;
-      width: 140px;
-      height: 25px;
-      font-size: 12px;
-      line-height: 25px;
-      color: #fff;
-      text-align: center;
-      background: #5487df;
-    }
-
-    /* 拖拽时隐藏组件 */
-    .component {
-      display: none;
-    }
-
-    /* 拖拽时显示占位提示 */
-    .drag-placement {
-      display: block;
-    }
-  }
-}
-</style>

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Carousel/config.ts

@@ -2,32 +2,24 @@ import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 轮播图属性 */
 export interface CarouselProperty {
-  // 类型：默认 | 卡片
-  type: 'card' | 'default';
-  // 指示器样式：点 | 数字
-  indicator: 'dot' | 'number';
-  // 是否自动播放
-  autoplay: boolean;
-  // 播放间隔
-  interval: number;
-  // 轮播内容
-  items: CarouselItemProperty[];
-  // 组件样式
-  style: ComponentStyle;
-}
-// 轮播内容属性
-export interface CarouselItemProperty {
-  // 类型：图片 | 视频
-  type: 'img' | 'video';
-  // 图片链接
-  imgUrl: string;
-  // 视频链接
-  videoUrl: string;
-  // 跳转链接
-  url: string;
+  type: 'card' | 'default'; // 类型：默认 | 卡片
+  indicator: 'dot' | 'number'; // 指示器样式：点 | 数字
+  autoplay: boolean; // 是否自动播放
+  interval: number; // 播放间隔
+  height: number; // 轮播高度
+  items: CarouselItemProperty[]; // 轮播内容
+  style: ComponentStyle; // 组件样式
 }
 
-// 定义组件
+/** 轮播内容属性 */
+export interface CarouselItemProperty {
+  type: 'img' | 'video'; // 类型：图片 | 视频
+  imgUrl: string; // 图片链接
+  videoUrl: string; // 视频链接
+  url: string; // 跳转链接
+}
+
+/** 定义组件 */
 export const component = {
   id: 'Carousel',
   name: '轮播图',
@@ -37,6 +29,7 @@ export const component = {
     indicator: 'dot',
     autoplay: false,
     interval: 3,
+    height: 174,
     items: [
       {
         type: 'img',

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Carousel/index.vue

@@ -5,6 +5,8 @@ import { ref } from 'vue';
 
 import { IconifyIcon } from '@vben/icons';
 
+import { Carousel, Image } from 'ant-design-vue';
+
 /** 轮播图 */
 defineOptions({ name: 'Carousel' });
 
@@ -16,36 +18,36 @@ const handleIndexChange = (index: number) => {
 };
 </script>
 <template>
-  <!-- 无图片 -->
-  <div
-    class="flex h-[250px] items-center justify-center bg-gray-300"
-    v-if="property.items.length === 0"
-  >
-    <IconifyIcon icon="tdesign:image" class="text-[120px] text-gray-800" />
-  </div>
-  <div v-else class="relative">
-    <Carousel
-      :autoplay="property.autoplay"
-      :autoplay-speed="property.interval * 1000"
-      :dots="property.indicator !== 'number'"
-      @change="handleIndexChange"
-      class="h-[174px]"
-    >
-      <div v-for="(item, index) in property.items" :key="index">
-        <Image
-          class="h-full w-full object-cover"
-          :src="item.imgUrl"
-          :preview="false"
-        />
-      </div>
-    </Carousel>
+  <div>
+    <!-- 无图片 -->
     <div
-      v-if="property.indicator === 'number'"
-      class="absolute bottom-[10px] right-[10px] rounded-xl bg-black px-[8px] py-[2px] text-[10px] text-white opacity-40"
+      class="bg-card flex h-64 items-center justify-center"
+      v-if="property.items.length === 0"
     >
-      {{ currentIndex }} / {{ property.items.length }}
+      <IconifyIcon icon="tdesign:image" class="size-6 text-gray-800" />
+    </div>
+    <div v-else class="relative">
+      <Carousel
+        :autoplay="property.autoplay"
+        :autoplay-speed="property.interval * 1000"
+        :dots="property.indicator !== 'number'"
+        @change="handleIndexChange"
+        class="h-44"
+      >
+        <div v-for="(item, index) in property.items" :key="index">
+          <Image
+            class="h-full w-full object-cover"
+            :src="item.imgUrl"
+            :preview="false"
+          />
+        </div>
+      </Carousel>
+      <div
+        v-if="property.indicator === 'number'"
+        class="absolute bottom-2.5 right-2.5 rounded-xl bg-black px-2 py-1 text-xs text-white opacity-40"
+      >
+        {{ currentIndex }} / {{ property.items.length }}
+      </div>
     </div>
   </div>
 </template>
-
-<style scoped lang="scss"></style>

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Carousel/property.vue

@@ -4,6 +4,16 @@ import type { CarouselProperty } from './config';
 import { IconifyIcon } from '@vben/icons';
 
 import { useVModel } from '@vueuse/core';
+import {
+  Form,
+  FormItem,
+  Radio,
+  RadioButton,
+  RadioGroup,
+  Slider,
+  Switch,
+  Tooltip,
+} from 'ant-design-vue';
 
 import UploadFile from '#/components/upload/file-upload.vue';
 import UploadImg from '#/components/upload/image-upload.vue';
@@ -21,33 +31,34 @@ const formData = useVModel(props, 'modelValue', emit);
 
 <template>
   <ComponentContainerProperty v-model="formData.style">
-    <ElForm label-width="80px" :model="formData">
-      <ElCard header="样式设置" class="property-group" shadow="never">
-        <ElFormItem label="样式" prop="type">
-          <ElRadioGroup v-model="formData.type">
-            <ElTooltip class="item" content="默认" placement="bottom">
-              <ElRadioButton value="default">
-                <IconifyIcon icon="system-uicons:carousel" />
-              </ElRadioButton>
-            </ElTooltip>
-            <ElTooltip class="item" content="卡片" placement="bottom">
-              <ElRadioButton value="card">
-                <IconifyIcon icon="ic:round-view-carousel" />
-              </ElRadioButton>
-            </ElTooltip>
-          </ElRadioGroup>
-        </ElFormItem>
-        <ElFormItem label="指示器" prop="indicator">
-          <ElRadioGroup v-model="formData.indicator">
-            <ElRadio value="dot">小圆点</ElRadio>
-            <ElRadio value="number">数字</ElRadio>
-          </ElRadioGroup>
-        </ElFormItem>
-        <ElFormItem label="是否轮播" prop="autoplay">
-          <ElSwitch v-model="formData.autoplay" />
-        </ElFormItem>
-        <ElFormItem label="播放间隔" prop="interval" v-if="formData.autoplay">
-          <ElSlider
+    <Form label-width="80px" :model="formData">
+      <p class="text-base font-bold">样式设置：</p>
+      <div class="flex flex-col gap-2 rounded-md p-4 shadow-lg">
+        <FormItem label="样式" prop="type">
+          <RadioGroup v-model="formData.type">
+            <Tooltip class="item" content="默认" placement="bottom">
+              <RadioButton value="default">
+                <IconifyIcon icon="system-uicons:carousel" class="size-6" />
+              </RadioButton>
+            </Tooltip>
+            <Tooltip class="item" content="卡片" placement="bottom">
+              <RadioButton value="card">
+                <IconifyIcon icon="ic:round-view-carousel" class="size-6" />
+              </RadioButton>
+            </Tooltip>
+          </RadioGroup>
+        </FormItem>
+        <FormItem label="指示器" prop="indicator">
+          <RadioGroup v-model="formData.indicator">
+            <Radio value="dot">小圆点</Radio>
+            <Radio value="number">数字</Radio>
+          </RadioGroup>
+        </FormItem>
+        <FormItem label="是否轮播" prop="autoplay">
+          <Switch v-model="formData.autoplay" />
+        </FormItem>
+        <FormItem label="播放间隔" prop="interval" v-if="formData.autoplay">
+          <Slider
             v-model="formData.interval"
             :max="10"
             :min="0.5"
@@ -56,24 +67,20 @@ const formData = useVModel(props, 'modelValue', emit);
             input-size="small"
             :show-input-controls="false"
           />
-          <ElText type="info">单位：秒</ElText>
-        </ElFormItem>
-      </ElCard>
-      <ElCard header="内容设置" class="property-group" shadow="never">
+          <p class="text-info">单位：秒</p>
+        </FormItem>
+      </div>
+      <p class="text-base font-bold">内容设置：</p>
+      <div class="flex flex-col gap-2 rounded-md p-4 shadow-lg">
         <Draggable v-model="formData.items" :empty-item="{ type: 'img' }">
           <template #default="{ element }">
-            <ElFormItem
-              label="类型"
-              prop="type"
-              class="mb-2"
-              label-width="40px"
-            >
-              <ElRadioGroup v-model="element.type">
-                <ElRadio value="img">图片</ElRadio>
-                <ElRadio value="video">视频</ElRadio>
-              </ElRadioGroup>
-            </ElFormItem>
-            <ElFormItem
+            <FormItem label="类型" prop="type" class="mb-2" label-width="40px">
+              <RadioGroup v-model="element.type">
+                <Radio value="img">图片</Radio>
+                <Radio value="video">视频</Radio>
+              </RadioGroup>
+            </FormItem>
+            <FormItem
               label="图片"
               class="mb-2"
               label-width="40px"
@@ -84,39 +91,37 @@ const formData = useVModel(props, 'modelValue', emit);
                 draggable="false"
                 height="80px"
                 width="100%"
-                class="min-w-[80px]"
+                class="min-w-20"
                 :show-description="false"
               />
-            </ElFormItem>
+            </FormItem>
             <template v-else>
-              <ElFormItem label="封面" class="mb-2" label-width="40px">
+              <FormItem label="封面" class="mb-2" label-width="40px">
                 <UploadImg
                   v-model="element.imgUrl"
                   draggable="false"
                   :show-description="false"
                   height="80px"
                   width="100%"
-                  class="min-w-[80px]"
+                  class="min-w-20"
                 />
-              </ElFormItem>
-              <ElFormItem label="视频" class="mb-2" label-width="40px">
+              </FormItem>
+              <FormItem label="视频" class="mb-2" label-width="40px">
                 <UploadFile
                   v-model="element.videoUrl"
                   :file-type="['mp4']"
                   :limit="1"
                   :file-size="100"
-                  class="min-w-[80px]"
+                  class="min-w-20"
                 />
-              </ElFormItem>
+              </FormItem>
             </template>
-            <ElFormItem label="链接" class="mb-2" label-width="40px">
+            <FormItem label="链接" class="mb-2" label-width="40px">
               <AppLinkInput v-model="element.url" />
-            </ElFormItem>
+            </FormItem>
           </template>
         </Draggable>
-      </ElCard>
-    </ElForm>
+      </div>
+    </Form>
   </ComponentContainerProperty>
 </template>
-
-<style scoped lang="scss"></style>

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Divider/config.ts

@@ -2,19 +2,14 @@ import type { DiyComponent } from '../../../util';
 
 /** 分割线属性 */
 export interface DividerProperty {
-  // 高度
-  height: number;
-  // 线宽
-  lineWidth: number;
-  // 边距类型
-  paddingType: 'horizontal' | 'none';
-  // 颜色
-  lineColor: string;
-  // 类型
-  borderType: 'dashed' | 'dotted' | 'none' | 'solid';
+  height: number; // 高度
+  lineWidth: number; // 线宽
+  paddingType: 'horizontal' | 'none'; // 边距类型
+  lineColor: string; // 颜色
+  borderType: 'dashed' | 'dotted' | 'none' | 'solid'; // 类型
 }
 
-// 定义组件
+/** 定义组件 */
 export const component = {
   id: 'Divider',
   name: '分割线',

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Divider/index.vue

@@ -25,5 +25,3 @@ defineProps<{ property: DividerProperty }>();
     ></div>
   </div>
 </template>
-
-<style scoped lang="scss"></style>

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Divider/property.vue

@@ -1,4 +1,101 @@
 <script setup lang="ts">
-import { Page } from '@vben/common-ui';
+import type { DividerProperty } from './config';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { useVModel } from '@vueuse/core';
+import {
+  Form,
+  FormItem,
+  RadioButton,
+  RadioGroup,
+  Slider,
+  Tooltip,
+} from 'ant-design-vue';
+
+import { ColorInput } from '#/views/mall/promotion/components';
+
+/** 导航栏属性面板 */
+defineOptions({ name: 'DividerProperty' });
+
+const props = defineProps<{ modelValue: DividerProperty }>();
+
+const emit = defineEmits(['update:modelValue']);
+
+const BORDER_TYPES = [
+  {
+    icon: 'vaadin:line-h',
+    text: '实线',
+    type: 'solid',
+  },
+  {
+    icon: 'tabler:line-dashed',
+    text: '虚线',
+    type: 'dashed',
+  },
+  {
+    icon: 'tabler:line-dotted',
+    text: '点线',
+    type: 'dotted',
+  },
+  {
+    icon: 'entypo:progress-empty',
+    text: '无',
+    type: 'none',
+  },
+]; // 线类型
+const formData = useVModel(props, 'modelValue', emit);
 </script>
-<template><Page>待完成</Page></template>
+
+<template>
+  <Form :model="formData">
+    <FormItem label="高度" name="height">
+      <Slider v-model:value="formData.height" :min="1" :max="100" />
+    </FormItem>
+    <FormItem label="选择样式" name="borderType">
+      <RadioGroup v-model:value="formData!.borderType">
+        <Tooltip
+          placement="top"
+          v-for="(item, index) in BORDER_TYPES"
+          :key="index"
+          :title="item.text"
+        >
+          <RadioButton :value="item.type">
+            <IconifyIcon
+              :icon="item.icon"
+              class="inset-0 size-6 items-center"
+            />
+          </RadioButton>
+        </Tooltip>
+      </RadioGroup>
+    </FormItem>
+    <template v-if="formData.borderType !== 'none'">
+      <FormItem label="线宽" name="lineWidth">
+        <Slider v-model:value="formData.lineWidth" :min="1" :max="30" />
+      </FormItem>
+      <FormItem label="左右边距" name="paddingType">
+        <RadioGroup v-model:value="formData!.paddingType">
+          <Tooltip title="无边距" placement="top">
+            <RadioButton value="none">
+              <IconifyIcon
+                icon="tabler:box-padding"
+                class="inset-0 size-6 items-center"
+              />
+            </RadioButton>
+          </Tooltip>
+          <Tooltip title="左右留边" placement="top">
+            <RadioButton value="horizontal">
+              <IconifyIcon
+                icon="vaadin:padding"
+                class="inset-0 size-6 items-center"
+              />
+            </RadioButton>
+          </Tooltip>
+        </RadioGroup>
+      </FormItem>
+      <FormItem label="颜色">
+        <ColorInput v-model="formData.lineColor" />
+      </FormItem>
+    </template>
+  </Form>
+</template>

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Popover/config.ts

@@ -2,19 +2,17 @@ import type { DiyComponent } from '../../../util';
 
 /** 弹窗广告属性 */
 export interface PopoverProperty {
-  list: PopoverItemProperty[];
+  list: PopoverItemProperty[]; // 弹窗列表
 }
 
+/** 弹窗广告项目属性 */
 export interface PopoverItemProperty {
-  // 图片地址
-  imgUrl: string;
-  // 跳转连接
-  url: string;
-  // 显示类型：仅显示一次、每次启动都会显示
-  showType: 'always' | 'once';
+  imgUrl: string; // 图片地址
+  url: string; // 跳转连接
+  showType: 'always' | 'once'; // 显示类型：仅显示一次、每次启动都会显示
 }
 
-// 定义组件
+/** 定义组件 */
 export const component = {
   id: 'Popover',
   name: '弹窗广告',

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Popover/index.vue

@@ -33,7 +33,7 @@ const handleActive = (index: number) => {
     <Image :src="item.imgUrl" fit="contain" class="h-full w-full">
       <template #error>
         <div class="flex h-full w-full items-center justify-center">
-          <IconifyIcon icon="ep:picture" />
+          <IconifyIcon icon="lucide:image" />
         </div>
       </template>
     </Image>

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Popover/property.vue

@@ -1,4 +1,48 @@
 <script setup lang="ts">
-import { Page } from '@vben/common-ui';
+import type { PopoverProperty } from './config';
+
+import { useVModel } from '@vueuse/core';
+import { Form, FormItem, Radio, RadioGroup, Tooltip } from 'ant-design-vue';
+
+import UploadImg from '#/components/upload/image-upload.vue';
+import { AppLinkInput, Draggable } from '#/views/mall/promotion/components';
+
+/** 弹窗广告属性面板 */
+defineOptions({ name: 'PopoverProperty' });
+
+const props = defineProps<{ modelValue: PopoverProperty }>();
+
+const emit = defineEmits(['update:modelValue']);
+
+const formData = useVModel(props, 'modelValue', emit);
 </script>
-<template><Page>待完成</Page></template>
+
+<template>
+  <Form :model="formData">
+    <Draggable v-model="formData.list" :empty-item="{ showType: 'once' }">
+      <template #default="{ element, index }">
+        <FormItem label="图片" :name="`list[${index}].imgUrl`">
+          <UploadImg
+            v-model="element.imgUrl"
+            height="56px"
+            width="56px"
+            :show-description="false"
+          />
+        </FormItem>
+        <FormItem label="跳转链接" :name="`list[${index}].url`">
+          <AppLinkInput v-model="element.url" />
+        </FormItem>
+        <FormItem label="显示次数" :name="`list[${index}].showType`">
+          <RadioGroup v-model:value="element.showType">
+            <Tooltip title="只显示一次，下次打开时不显示" placement="bottom">
+              <Radio value="once">一次</Radio>
+            </Tooltip>
+            <Tooltip title="每次打开时都会显示" placement="bottom">
+              <Radio value="always">不限</Radio>
+            </Tooltip>
+          </RadioGroup>
+        </FormItem>
+      </template>
+    </Draggable>
+  </Form>
+</template>

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/config.ts

@@ -1,29 +1,20 @@
 import type { ComponentStyle, DiyComponent } from '../../../util';
 
-/** 商品卡片属性 */
+/** 优惠劵卡片属性 */
 export interface CouponCardProperty {
-  // 列数
-  columns: number;
-  // 背景图
-  bgImg: string;
-  // 文字颜色
-  textColor: string;
-  // 按钮样式
+  columns: number; // 列数
+  bgImg: string; // 背景图
+  textColor: string; // 文字颜色
   button: {
-    // 背景颜色
-    bgColor: string;
-    // 颜色
-    color: string;
-  };
-  // 间距
-  space: number;
-  // 优惠券编号列表
-  couponIds: number[];
-  // 组件样式
-  style: ComponentStyle;
+    bgColor: string; // 背景颜色
+    color: string; // 文字颜色
+  }; // 按钮样式
+  space: number; // 间距
+  couponIds: number[]; // 优惠券编号列表
+  style: ComponentStyle; // 组件样式
 }
 
-// 定义组件
+/** 定义组件 */
 export const component = {
   id: 'CouponCard',
   name: '优惠券',

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/coupon-discount-desc.tsx

@@ -23,7 +23,7 @@ export const CouponDiscountDesc = defineComponent({
     const discountDesc =
       coupon.discountType === PromotionDiscountTypeEnum.PRICE.type
         ? `减${floatToFixed2(coupon.discountPrice)}元`
-        : `打${coupon.discountPercent / 10}折`;
+        : `打${(coupon.discountPercent ?? 0) / 10}折`;
     return () => (
       <div>
         <span>{useCondition}</span>

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/coupon-discount.tsx

@@ -17,7 +17,7 @@ export const CouponDiscount = defineComponent({
   setup(props) {
     const coupon = props.coupon as MallCouponTemplateApi.CouponTemplate;
     // 折扣
-    let value = `${coupon.discountPercent / 10}`;
+    let value = `${(coupon.discountPercent ?? 0) / 10}`;
     let suffix = ' 折';
     // 满减
     if (coupon.discountType === PromotionDiscountTypeEnum.PRICE.type) {

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/index.vue

@@ -5,6 +5,8 @@ import type { MallCouponTemplateApi } from '#/api/mall/promotion/coupon/couponTe
 
 import { onMounted, ref, watch } from 'vue';
 
+import { getCouponTemplateList } from '#/api/mall/promotion/coupon/couponTemplate';
+
 import {
   CouponDiscount,
   CouponDiscountDesc,
@@ -31,13 +33,13 @@ watch(
 );
 
 // 手机宽度
-const phoneWidth = ref(375);
+const phoneWidth = ref(384);
 // 容器
 const containerRef = ref();
 // 滚动条宽度
 const scrollbarWidth = ref('100%');
 // 优惠券的宽度
-const couponWidth = ref(375);
+const couponWidth = ref(384);
 // 计算布局参数
 watch(
   () => [props.property, phoneWidth, couponList.value.length],
@@ -56,11 +58,11 @@ watch(
 );
 onMounted(() => {
   // 提取手机宽度
-  phoneWidth.value = containerRef.value?.wrapRef?.offsetWidth || 375;
+  phoneWidth.value = containerRef.value?.wrapRef?.offsetWidth || 384;
 });
 </script>
 <template>
-  <div class="z-10 min-h-[30px]" wrap-class="w-full" ref="containerRef">
+  <div class="z-10 min-h-8" wrap-class="w-full" ref="containerRef">
     <div
       class="flex flex-row text-xs"
       :style="{
@@ -153,4 +155,3 @@ onMounted(() => {
     </div>
   </div>
 </template>
-<style scoped lang="scss"></style>

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/property.vue

@@ -1,4 +1,182 @@
 <script setup lang="ts">
-import { Page } from '@vben/common-ui';
+import type { CouponCardProperty } from './config';
+
+import type { MallCouponTemplateApi } from '#/api/mall/promotion/coupon/couponTemplate';
+
+import { ref, watch } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import {
+  CouponTemplateTakeTypeEnum,
+  PromotionDiscountTypeEnum,
+} from '@vben/constants';
+import { IconifyIcon } from '@vben/icons';
+import { floatToFixed2 } from '@vben/utils';
+
+import { useVModel } from '@vueuse/core';
+import {
+  Button,
+  Form,
+  FormItem,
+  RadioButton,
+  RadioGroup,
+  Slider,
+  Tooltip,
+  Typography,
+} from 'ant-design-vue';
+
+import * as CouponTemplateApi from '#/api/mall/promotion/coupon/couponTemplate';
+import UploadImg from '#/components/upload/image-upload.vue';
+import { ColorInput } from '#/views/mall/promotion/components';
+import CouponSelect from '#/views/mall/promotion/coupon/components/select.vue';
+
+import ComponentContainerProperty from '../../component-container-property.vue';
+
+/** 优惠券卡片属性面板 */
+defineOptions({ name: 'CouponCardProperty' });
+
+const props = defineProps<{ modelValue: CouponCardProperty }>();
+
+const emit = defineEmits(['update:modelValue']);
+
+const formData = useVModel(props, 'modelValue', emit);
+
+const couponList = ref<MallCouponTemplateApi.CouponTemplate[]>([]); // 已选择的优惠券列表
+
+const [CouponSelectModal, couponSelectModalApi] = useVbenModal({
+  connectedComponent: CouponSelect,
+  destroyOnClose: true,
+});
+
+/** 添加优惠劵 */
+const handleAddCoupon = () => {
+  couponSelectModalApi.open();
+};
+
+/** 处理优惠劵选择 */
+const handleCouponSelect = (
+  selectedCoupons: MallCouponTemplateApi.CouponTemplate[],
+) => {
+  couponList.value = selectedCoupons;
+  formData.value.couponIds = selectedCoupons.map((coupon) => coupon.id);
+};
+
+/** 监听优惠券 ID 变化，加载优惠券列表 */
+watch(
+  () => formData.value.couponIds,
+  async () => {
+    if (formData.value.couponIds?.length > 0) {
+      couponList.value = await CouponTemplateApi.getCouponTemplateList(
+        formData.value.couponIds,
+      );
+    }
+  },
+  {
+    immediate: true,
+    deep: true,
+  },
+);
 </script>
-<template><Page>待完成</Page></template>
+
+<template>
+  <ComponentContainerProperty v-model="formData.style">
+    <Form :model="formData">
+      <p class="text-base font-bold">优惠券列表：</p>
+      <div class="flex flex-col gap-2 rounded-md p-4 shadow-lg">
+        <div
+          v-for="(coupon, index) in couponList"
+          :key="index"
+          class="flex items-center justify-between"
+        >
+          <Typography>
+            <Typography.Title :level="5">
+              {{ coupon.name }}
+            </Typography.Title>
+            <Typography.Text type="secondary">
+              <span v-if="coupon.usePrice > 0">
+                满{{ floatToFixed2(coupon.usePrice) }}元，
+              </span>
+              <span
+                v-if="
+                  coupon.discountType === PromotionDiscountTypeEnum.PRICE.type
+                "
+              >
+                减{{ floatToFixed2(coupon.discountPrice) }}元
+              </span>
+              <span v-else> 打{{ (coupon.discountPercent ?? 0) / 10 }}折 </span>
+            </Typography.Text>
+          </Typography>
+        </div>
+        <FormItem>
+          <Button
+            @click="handleAddCoupon"
+            type="primary"
+            ghost
+            class="mt-2 w-full"
+          >
+            <IconifyIcon icon="lucide:plus" />
+            添加
+          </Button>
+        </FormItem>
+      </div>
+      <p class="text-base font-bold">优惠券样式：</p>
+      <div class="flex flex-col gap-2 rounded-md p-4 shadow-lg">
+        <FormItem label="列数" name="type">
+          <RadioGroup v-model:value="formData.columns">
+            <Tooltip title="一列" placement="bottom">
+              <RadioButton :value="1">
+                <IconifyIcon
+                  icon="fluent:text-column-one-24-filled"
+                  class="inset-0 size-6 items-center"
+                />
+              </RadioButton>
+            </Tooltip>
+            <Tooltip title="二列" placement="bottom">
+              <RadioButton :value="2">
+                <IconifyIcon
+                  icon="fluent:text-column-two-24-filled"
+                  class="size-6"
+                />
+              </RadioButton>
+            </Tooltip>
+            <Tooltip title="三列" placement="bottom">
+              <RadioButton :value="3">
+                <IconifyIcon
+                  icon="fluent:text-column-three-24-filled"
+                  class="size-6"
+                />
+              </RadioButton>
+            </Tooltip>
+          </RadioGroup>
+        </FormItem>
+        <FormItem label="背景图片" name="bgImg">
+          <UploadImg
+            v-model="formData.bgImg"
+            height="80px"
+            width="100%"
+            class="min-w-[160px]"
+            :show-description="false"
+          />
+        </FormItem>
+        <FormItem label="文字颜色" name="textColor">
+          <ColorInput v-model="formData.textColor" />
+        </FormItem>
+        <FormItem label="按钮背景" name="button.bgColor">
+          <ColorInput v-model="formData.button.bgColor" />
+        </FormItem>
+        <FormItem label="按钮文字" name="button.color">
+          <ColorInput v-model="formData.button.color" />
+        </FormItem>
+        <FormItem label="间隔" name="space">
+          <Slider v-model:value="formData.space" :max="100" :min="0" />
+        </FormItem>
+      </div>
+    </Form>
+  </ComponentContainerProperty>
+
+  <!-- 优惠券选择 -->
+  <CouponSelectModal
+    :take-type="CouponTemplateTakeTypeEnum.USER.type"
+    @success="handleCouponSelect"
+  />
+</template>

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/floating-action-button/config.ts

@@ -1,28 +1,21 @@
 import type { DiyComponent } from '../../../util';
 
-// 悬浮按钮属性
+/** 悬浮按钮属性 */
 export interface FloatingActionButtonProperty {
-  // 展开方向
-  direction: 'horizontal' | 'vertical';
-  // 是否显示文字
-  showText: boolean;
-  // 按钮列表
-  list: FloatingActionButtonItemProperty[];
+  direction: 'horizontal' | 'vertical'; // 展开方向
+  showText: boolean; // 是否显示文字
+  list: FloatingActionButtonItemProperty[]; // 按钮列表
 }
 
-// 悬浮按钮项属性
+/** 悬浮按钮项属性 */
 export interface FloatingActionButtonItemProperty {
-  // 图片地址
-  imgUrl: string;
-  // 跳转连接
-  url: string;
-  // 文字
-  text: string;
-  // 文字颜色
-  textColor: string;
+  imgUrl: string; // 图片地址
+  url: string; // 跳转连接
+  text: string; // 文字
+  textColor: string; // 文字颜色
 }
 
-// 定义组件
+/** 定义组件 */
 export const component = {
   id: 'FloatingActionButton',
   name: '悬浮按钮',

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/floating-action-button/index.vue

@@ -5,7 +5,7 @@ import { ref } from 'vue';
 
 import { IconifyIcon } from '@vben/icons';
 
-import { Image, message } from 'ant-design-vue';
+import { Button, Image, message } from 'ant-design-vue';
 
 /** 悬浮按钮 */
 defineOptions({ name: 'FloatingActionButton' });
@@ -25,7 +25,7 @@ const handleActive = (index: number) => {
 </script>
 <template>
   <div
-    class="absolute bottom-8 right-[calc(50%-375px/2+32px)] z-20 flex items-center gap-3"
+    class="absolute bottom-8 right-[calc(50%-384px/2+32px)] z-20 flex items-center gap-3"
     :class="[
       {
         'flex-row': property.direction === 'horizontal',
@@ -43,7 +43,11 @@ const handleActive = (index: number) => {
         <Image :src="item.imgUrl" fit="contain" class="h-7 w-7">
           <template #error>
             <div class="flex h-full w-full items-center justify-center">
-              <IconifyIcon icon="ep:picture" :color="item.textColor" />
+              <IconifyIcon
+                icon="lucide:image"
+                :color="item.textColor"
+                class="inset-0 size-6 items-center"
+              />
             </div>
           </template>
         </Image>
@@ -57,13 +61,13 @@ const handleActive = (index: number) => {
       </div>
     </template>
     <!-- todo: @owen 使用APP主题色 -->
-    <el-button type="primary" size="large" circle @click="handleToggleFab">
+    <Button type="primary" size="large" circle @click="handleToggleFab">
       <IconifyIcon
-        icon="ep:plus"
+        icon="lucide:plus"
         class="fab-icon"
         :class="[{ active: expanded }]"
       />
-    </el-button>
+    </Button>
   </div>
   <!-- 模态背景：展开时显示，点击后折叠 -->
   <div v-if="expanded" class="modal-bg" @click="handleToggleFab"></div>
@@ -74,9 +78,9 @@ const handleActive = (index: number) => {
 .modal-bg {
   position: absolute;
   top: 0;
-  left: calc(50% - 375px / 2);
+  left: calc(50% - 384px / 2);
   z-index: 11;
-  width: 375px;
+  width: 384px;
   height: 100%;
   background-color: rgb(0 0 0 / 40%);
 }

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/floating-action-button/property.vue

@@ -1,4 +1,63 @@
 <script setup lang="ts">
-import { Page } from '@vben/common-ui';
+import type { FloatingActionButtonProperty } from './config';
+
+import { useVModel } from '@vueuse/core';
+import { Form, FormItem, Radio, RadioGroup, Switch } from 'ant-design-vue';
+
+import UploadImg from '#/components/upload/image-upload.vue';
+import {
+  AppLinkInput,
+  Draggable,
+  InputWithColor,
+} from '#/views/mall/promotion/components';
+
+/** 悬浮按钮属性面板 */
+defineOptions({ name: 'FloatingActionButtonProperty' });
+
+const props = defineProps<{ modelValue: FloatingActionButtonProperty }>();
+
+const emit = defineEmits(['update:modelValue']);
+
+const formData = useVModel(props, 'modelValue', emit);
 </script>
-<template><Page>待完成</Page></template>
+
+<template>
+  <Form :model="formData">
+    <p class="text-base font-bold">按钮配置：</p>
+    <div class="flex flex-col gap-2 rounded-md p-4 shadow-lg">
+      <FormItem label="展开方向" name="direction">
+        <RadioGroup v-model:value="formData.direction">
+          <Radio value="vertical">垂直</Radio>
+          <Radio value="horizontal">水平</Radio>
+        </RadioGroup>
+      </FormItem>
+      <FormItem label="显示文字" name="showText">
+        <Switch v-model:checked="formData.showText" />
+      </FormItem>
+    </div>
+    <p class="text-base font-bold">按钮列表：</p>
+    <div class="flex flex-col gap-2 rounded-md p-4 shadow-lg">
+      <Draggable v-model="formData.list" :empty-item="{ textColor: '#fff' }">
+        <template #default="{ element, index }">
+          <FormItem label="图标" :name="`list[${index}].imgUrl`">
+            <UploadImg
+              v-model="element.imgUrl"
+              height="56px"
+              width="56px"
+              :show-description="false"
+            />
+          </FormItem>
+          <FormItem label="文字" :name="`list[${index}].text`">
+            <InputWithColor
+              v-model="element.text"
+              v-model:color="element.textColor"
+            />
+          </FormItem>
+          <FormItem label="跳转链接" :name="`list[${index}].url`">
+            <AppLinkInput v-model="element.url" />
+          </FormItem>
+        </template>
+      </Draggable>
+    </div>
+  </Form>
+</template>

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/components/hot-zone-edit-dialog/index.vue

@@ -1,4 +1,245 @@
 <script setup lang="ts">
-import { Page } from '@vben/common-ui';
+import type { HotZoneItemProperty } from '../../config';
+import type { ControlDot } from './controller';
+
+import type { AppLink } from '#/views/mall/promotion/components/app-link-input/data';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+
+import { Button, Image } from 'ant-design-vue';
+
+import AppLinkSelectDialog from '#/views/mall/promotion/components/app-link-input/app-link-select-dialog.vue';
+
+import {
+  CONTROL_DOT_LIST,
+  CONTROL_TYPE_ENUM,
+  HOT_ZONE_MIN_SIZE,
+  useDraggable,
+  zoomIn,
+  zoomOut,
+} from './controller';
+
+/** 热区编辑对话框 */
+defineOptions({ name: 'HotZoneEditDialog' });
+
+/** 定义属性 */
+const props = defineProps({
+  modelValue: {
+    type: Array<HotZoneItemProperty>,
+    default: () => [],
+  },
+  imgUrl: {
+    type: String,
+    default: '',
+  },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const formData = ref<HotZoneItemProperty[]>([]);
+
+const [Modal, modalApi] = useVbenModal({
+  showCancelButton: false,
+  onConfirm() {
+    const list = zoomOut(formData.value);
+    emit('update:modelValue', list);
+    modalApi.close();
+  },
+});
+
+/** 打开弹窗 */
+function open() {
+  // 放大
+  formData.value = zoomIn(props.modelValue);
+  modalApi.open();
+}
+
+defineExpose({ open }); // 提供 open 方法，用于打开弹窗
+
+const container = ref<HTMLDivElement>(); // 热区容器
+
+/** 增加热区 */
+function handleAdd() {
+  formData.value.push({
+    width: HOT_ZONE_MIN_SIZE,
+    height: HOT_ZONE_MIN_SIZE,
+    top: 0,
+    left: 0,
+  } as HotZoneItemProperty);
+}
+
+/** 删除热区 */
+function handleRemove(hotZone: HotZoneItemProperty) {
+  formData.value = formData.value.filter((item) => item !== hotZone);
+}
+
+/** 移动热区 */
+function handleMove(item: HotZoneItemProperty, e: MouseEvent) {
+  useDraggable(item, e, (left, top, _, __, moveWidth, moveHeight) => {
+    setLeft(item, left + moveWidth);
+    setTop(item, top + moveHeight);
+  });
+}
+
+/** 调整热区大小、位置 */
+function handleResize(
+  item: HotZoneItemProperty,
+  ctrlDot: ControlDot,
+  e: MouseEvent,
+) {
+  useDraggable(item, e, (left, top, width, height, moveWidth, moveHeight) => {
+    ctrlDot.types.forEach((type) => {
+      switch (type) {
+        case CONTROL_TYPE_ENUM.HEIGHT: {
+          {
+            // 左移时，宽度为减少
+            const direction = ctrlDot.types.includes(CONTROL_TYPE_ENUM.TOP)
+              ? -1
+              : 1;
+            setHeight(item, height + moveHeight * direction);
+          }
+          break;
+        }
+        case CONTROL_TYPE_ENUM.LEFT: {
+          setLeft(item, left + moveWidth);
+          break;
+        }
+        case CONTROL_TYPE_ENUM.TOP: {
+          setTop(item, top + moveHeight);
+          break;
+        }
+        case CONTROL_TYPE_ENUM.WIDTH: {
+          {
+            // 上移时，高度为减少
+            const direction = ctrlDot.types.includes(CONTROL_TYPE_ENUM.LEFT)
+              ? -1
+              : 1;
+            setWidth(item, width + moveWidth * direction);
+          }
+          break;
+        }
+      }
+    });
+  });
+}
+
+/** 设置 X 轴坐标 */
+function setLeft(item: HotZoneItemProperty, left: number) {
+  // 不能超出容器
+  if (left >= 0 && left <= container.value!.offsetWidth - item.width) {
+    item.left = left;
+  }
+}
+
+/** 设置Y轴坐标 */
+function setTop(item: HotZoneItemProperty, top: number) {
+  // 不能超出容器
+  if (top >= 0 && top <= container.value!.offsetHeight - item.height) {
+    item.top = top;
+  }
+}
+
+/** 设置宽度 */
+const setWidth = (item: HotZoneItemProperty, width: number) => {
+  // 不能小于最小宽度 && 不能超出容器右边
+  if (
+    width >= HOT_ZONE_MIN_SIZE &&
+    item.left + width <= container.value!.offsetWidth
+  ) {
+    item.width = width;
+  }
+};
+
+/** 设置高度 */
+const setHeight = (item: HotZoneItemProperty, height: number) => {
+  // 不能小于最小高度 && 不能超出容器底部
+  if (
+    height >= HOT_ZONE_MIN_SIZE &&
+    item.top + height <= container.value!.offsetHeight
+  ) {
+    item.height = height;
+  }
+};
+
+const activeHotZone = ref<HotZoneItemProperty>();
+const appLinkDialogRef = ref();
+
+/** 显示 App 链接选择对话框 */
+const handleShowAppLinkDialog = (hotZone: HotZoneItemProperty) => {
+  activeHotZone.value = hotZone;
+  appLinkDialogRef.value.open(hotZone.url);
+};
+
+/** 处理 App 链接选择变更 */
+const handleAppLinkChange = (appLink: AppLink) => {
+  if (!appLink || !activeHotZone.value) {
+    return;
+  }
+  activeHotZone.value.name = appLink.name;
+  activeHotZone.value.url = appLink.path;
+};
 </script>
-<template><Page>待完成</Page></template>
+
+<template>
+  <Modal title="设置热区" class="w-[780px]">
+    <div ref="container" class="w-750px relative h-full">
+      <Image
+        :src="imgUrl"
+        :preview="false"
+        class="w-750px pointer-events-none h-full select-none"
+      />
+      <div
+        v-for="(item, hotZoneIndex) in formData"
+        :key="hotZoneIndex"
+        class="group absolute z-10 flex cursor-move items-center justify-center border text-base opacity-80"
+        :style="{
+          width: `${item.width}px`,
+          height: `${item.height}px`,
+          top: `${item.top}px`,
+          left: `${item.left}px`,
+          color: 'hsl(var(--primary))',
+          background:
+            'color-mix(in srgb, hsl(var(--primary)) 30%, transparent)',
+          borderColor: 'hsl(var(--primary))',
+        }"
+        @mousedown="handleMove(item, $event)"
+        @dblclick="handleShowAppLinkDialog(item)"
+      >
+        <span class="pointer-events-none select-none">
+          {{ item.name || '双击选择链接' }}
+        </span>
+        <IconifyIcon
+          icon="lucide:x"
+          class="absolute inset-0 right-0 top-0 hidden size-6 cursor-pointer items-center rounded-bl-[80%] p-[2px_2px_6px_6px] text-right text-white group-hover:block"
+          :style="{ backgroundColor: 'hsl(var(--primary))' }"
+          @click="handleRemove(item)"
+        />
+
+        <!-- 8 个控制点 -->
+        <span
+          class="ctrl-dot absolute z-[11] h-2 w-2 rounded-full bg-white"
+          v-for="(dot, dotIndex) in CONTROL_DOT_LIST"
+          :key="dotIndex"
+          :style="{ ...dot.style, border: 'inherit' }"
+          @mousedown="handleResize(item, dot, $event)"
+        ></span>
+      </div>
+    </div>
+    <template #prepend-footer>
+      <Button @click="handleAdd" type="primary" ghost>
+        <template #icon>
+          <IconifyIcon icon="lucide:plus" />
+        </template>
+        添加热区
+      </Button>
+    </template>
+  </Modal>
+
+  <AppLinkSelectDialog
+    ref="appLinkDialogRef"
+    @app-link-change="handleAppLinkChange"
+  />
+</template>

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/config.ts

@@ -2,31 +2,22 @@ import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 热区属性 */
 export interface HotZoneProperty {
-  // 图片地址
-  imgUrl: string;
-  // 导航菜单列表
-  list: HotZoneItemProperty[];
-  // 组件样式
-  style: ComponentStyle;
+  imgUrl: string; // 图片地址
+  list: HotZoneItemProperty[]; // 导航菜单列表
+  style: ComponentStyle; // 组件样式
 }
 
 /** 热区项目属性 */
 export interface HotZoneItemProperty {
-  // 链接的名称
-  name: string;
-  // 链接
-  url: string;
-  // 宽
-  width: number;
-  // 高
-  height: number;
-  // 上
-  top: number;
-  // 左
-  left: number;
+  name: string; // 链接的名称
+  url: string; // 链接
+  width: number; // 宽
+  height: number; // 高
+  top: number; // 上
+  left: number; // 左
 }
 
-// 定义组件
+/** 定义组件 */
 export const component = {
   id: 'HotZone',
   name: '热区',

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/index.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { HotZoneProperty } from './config';
 
+import { Image } from 'ant-design-vue';
 /** 热区 */
 defineOptions({ name: 'HotZone' });
 const props = defineProps<{ property: HotZoneProperty }>();
@@ -15,7 +16,7 @@ const props = defineProps<{ property: HotZoneProperty }>();
     <div
       v-for="(item, index) in props.property.list"
       :key="index"
-      class="hot-zone"
+      class="bg-primary-700 absolute z-10 flex cursor-move items-center justify-center border text-sm opacity-80"
       :style="{
         width: `${item.width}px`,
         height: `${item.height}px`,
@@ -23,23 +24,9 @@ const props = defineProps<{ property: HotZoneProperty }>();
         left: `${item.left}px`,
       }"
     >
-      {{ item.name }}
+      <p class="text-primary">
+        {{ item.name }}
+      </p>
     </div>
   </div>
 </template>
-
-<style scoped lang="scss">
-.hot-zone {
-  position: absolute;
-  z-index: 10;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 14px;
-  color: var(--el-color-primary);
-  cursor: move;
-  background: var(--el-color-primary-light-7);
-  border: 1px solid var(--el-color-primary);
-  opacity: 0.8;
-}
-</style>

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/property.vue

@@ -4,7 +4,7 @@ import type { HotZoneProperty } from './config';
 import { ref } from 'vue';
 
 import { useVModel } from '@vueuse/core';
-import { Button, Form, FormItem, Typography } from 'ant-design-vue';
+import { Button, Form, FormItem } from 'ant-design-vue';
 
 import UploadImg from '#/components/upload/image-upload.vue';
 
@@ -40,19 +40,14 @@ const handleOpenEditDialog = () => {
           v-model="formData.imgUrl"
           height="50px"
           width="auto"
-          class="min-w-[80px]"
+          class="min-w-20"
           :show-description="false"
-        >
-          <template #tip>
-            <Typography.Text type="secondary" class="text-xs">
-              推荐宽度 750
-            </Typography.Text>
-          </template>
-        </UploadImg>
+        />
       </FormItem>
+      <p class="text-center text-sm text-gray-500">推荐宽度 750</p>
     </Form>
 
-    <Button type="primary" class="w-full" @click="handleOpenEditDialog">
+    <Button type="primary" class="mt-4 w-full" @click="handleOpenEditDialog">
       设置热区
     </Button>
   </ComponentContainerProperty>
@@ -71,10 +66,10 @@ const handleOpenEditDialog = () => {
   align-items: center;
   justify-content: center;
   font-size: 12px;
-  color: #fff;
+  color: hsl(var(--text-color));
   cursor: move;
-  background: #409effbf;
-  border: 1px solid var(--el-color-primary);
+  background: color-mix(in srgb, hsl(var(--primary)) 30%, transparent);
+  border: 1px solid hsl(var(--primary));
 
   /* 控制点 */
   .ctrl-dot {

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/config.ts

@@ -2,19 +2,16 @@ import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 图片展示属性 */
 export interface ImageBarProperty {
-  // 图片链接
-  imgUrl: string;
-  // 跳转链接
-  url: string;
-  // 组件样式
-  style: ComponentStyle;
+  imgUrl: string; // 图片链接
+  url: string; // 跳转链接
+  style: ComponentStyle; // 组件样式
 }
 
-// 定义组件
+/** 定义组件 */
 export const component = {
   id: 'ImageBar',
   name: '图片展示',
-  icon: 'ep:picture',
+  icon: 'lucide:image',
   property: {
     imgUrl: '',
     url: '',

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/index.vue

@@ -3,6 +3,8 @@ import type { ImageBarProperty } from './config';
 
 import { IconifyIcon } from '@vben/icons';
 
+import { Image } from 'ant-design-vue';
+
 /** 图片展示 */
 defineOptions({ name: 'ImageBar' });
 
@@ -11,24 +13,15 @@ defineProps<{ property: ImageBarProperty }>();
 <template>
   <!-- 无图片 -->
   <div
-    class="flex h-12 items-center justify-center bg-gray-300"
+    class="bg-card flex h-12 items-center justify-center"
     v-if="!property.imgUrl"
   >
-    <IconifyIcon icon="ep:picture" class="text-3xl text-gray-600" />
+    <IconifyIcon icon="lucide:image" class="text-3xl text-gray-600" />
   </div>
   <Image
-    class="min-h-8 w-full"
+    class="block h-full min-h-8 w-full"
     v-else
     :src="property.imgUrl"
     :preview="false"
   />
 </template>
-
-<style scoped lang="scss">
-/* 图片 */
-img {
-  display: block;
-  width: 100%;
-  height: 100%;
-}
-</style>

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/property.vue

@@ -30,11 +30,9 @@ const formData = useVModel(props, 'modelValue', emit);
           draggable="false"
           height="80px"
           width="100%"
-          class="min-w-[80px]"
+          class="min-w-20"
           :show-description="false"
-        >
-          <template #tip> 建议宽度750 </template>
-        </UploadImg>
+        />
       </FormItem>
       <FormItem label="链接" prop="url">
         <AppLinkInput v-model="formData.url" />
@@ -42,5 +40,3 @@ const formData = useVModel(props, 'modelValue', emit);
     </Form>
   </ComponentContainerProperty>
 </template>
-
-<style scoped lang="scss"></style>

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/config.ts

@@ -2,39 +2,24 @@ import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 广告魔方属性 */
 export interface MagicCubeProperty {
-  // 上圆角
-  borderRadiusTop: number;
-  // 下圆角
-  borderRadiusBottom: number;
-  // 间隔
-  space: number;
-  // 导航菜单列表
-  list: MagicCubeItemProperty[];
-  // 组件样式
-  style: ComponentStyle;
+  borderRadiusTop: number; // 上圆角
+  borderRadiusBottom: number; // 下圆角
+  space: number; // 间隔
+  list: MagicCubeItemProperty[]; // 导航菜单列表
+  style: ComponentStyle; // 组件样式
 }
 
 /** 广告魔方项目属性 */
 export interface MagicCubeItemProperty {
-  // 图标链接
-  imgUrl: string;
-  // 链接
-  url: string;
-  // 宽
-  width: number;
-  // 高
-  height: number;
-  // 上
-  top: number;
-  // 左
-  left: number;
-  // 右
-  right: number;
-  // 下
-  bottom: number;
+  imgUrl: string; // 图标链接
+  url: string; // 链接
+  width: number; // 宽
+  height: number; // 高
+  top: number; // 上
+  left: number; // 左
 }
 
-// 定义组件
+/** 定义组件 */
 export const component = {
   id: 'MagicCube',
   name: '广告魔方',

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/index.vue

@@ -5,6 +5,8 @@ import { computed } from 'vue';
 
 import { IconifyIcon } from '@vben/icons';
 
+import { Image } from 'ant-design-vue';
+
 /** 广告魔方 */
 defineOptions({ name: 'MagicCube' });
 const props = defineProps<{ property: MagicCubeProperty }>();
@@ -78,5 +80,3 @@ const rowCount = computed(() => {
     </div>
   </div>
 </template>
-
-<style scoped lang="scss"></style>

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/property.vue

@@ -1,4 +1,75 @@
 <script setup lang="ts">
-import { Page } from '@vben/common-ui';
+import type { MagicCubeProperty } from './config';
+
+import { ref } from 'vue';
+
+import { useVModel } from '@vueuse/core';
+import { Form, FormItem, Slider } from 'ant-design-vue';
+
+import UploadImg from '#/components/upload/image-upload.vue';
+import {
+  AppLinkInput,
+  MagicCubeEditor,
+} from '#/views/mall/promotion/components';
+
+import ComponentContainerProperty from '../../component-container-property.vue';
+
+/** 广告魔方属性面板 */
+defineOptions({ name: 'MagicCubeProperty' });
+
+const props = defineProps<{ modelValue: MagicCubeProperty }>();
+
+const emit = defineEmits(['update:modelValue']);
+
+const formData = useVModel(props, 'modelValue', emit);
+
+const selectedHotAreaIndex = ref(-1); // 选中的热区
+
+/** 处理热区被选中事件 */
+const handleHotAreaSelected = (_: any, index: number) => {
+  selectedHotAreaIndex.value = index;
+};
 </script>
-<template><Page>待完成</Page></template>
+
+<template>
+  <ComponentContainerProperty v-model="formData.style">
+    <Form :model="formData" class="mt-2">
+      <p class="text-base font-bold">魔方设置：</p>
+      <MagicCubeEditor
+        class="my-4"
+        v-model="formData.list"
+        :rows="4"
+        :cols="4"
+        @hot-area-selected="handleHotAreaSelected"
+      />
+      <template v-for="(hotArea, index) in formData.list" :key="index">
+        <template v-if="selectedHotAreaIndex === index">
+          <FormItem label="上传图片" :name="`list[${index}].imgUrl`">
+            <UploadImg
+              v-model="hotArea.imgUrl"
+              height="80px"
+              width="80px"
+              :show-description="false"
+            />
+          </FormItem>
+          <FormItem label="链接" :name="`list[${index}].url`">
+            <AppLinkInput v-model="hotArea.url" />
+          </FormItem>
+        </template>
+      </template>
+      <FormItem label="上圆角" name="borderRadiusTop">
+        <Slider v-model:value="formData.borderRadiusTop" :max="100" :min="0" />
+      </FormItem>
+      <FormItem label="下圆角" name="borderRadiusBottom">
+        <Slider
+          v-model:value="formData.borderRadiusBottom"
+          :max="100"
+          :min="0"
+        />
+      </FormItem>
+      <FormItem label="间隔" name="space">
+        <Slider v-model:value="formData.space" :max="100" :min="0" />
+      </FormItem>
+    </Form>
+  </ComponentContainerProperty>
+</template>

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/config.ts

@@ -4,41 +4,28 @@ import { cloneDeep } from '@vben/utils';
 
 /** 宫格导航属性 */
 export interface MenuGridProperty {
-  // 列数
-  column: number;
-  // 导航菜单列表
-  list: MenuGridItemProperty[];
-  // 组件样式
-  style: ComponentStyle;
+  column: number; // 列数
+  list: MenuGridItemProperty[]; // 导航菜单列表
+  style: ComponentStyle; // 组件样式
 }
 
 /** 宫格导航项目属性 */
 export interface MenuGridItemProperty {
-  // 图标链接
-  iconUrl: string;
-  // 标题
-  title: string;
-  // 标题颜色
-  titleColor: string;
-  // 副标题
-  subtitle: string;
-  // 副标题颜色
-  subtitleColor: string;
-  // 链接
-  url: string;
-  // 角标
+  iconUrl: string; // 图标链接
+  title: string; // 标题
+  titleColor: string; // 标题颜色
+  subtitle: string; // 副标题
+  subtitleColor: string; // 副标题颜色
+  url: string; // 链接
   badge: {
-    // 角标背景颜色
-    bgColor: string;
-    // 是否显示
-    show: boolean;
-    // 角标文字
-    text: string;
-    // 角标文字颜色
-    textColor: string;
+    bgColor: string; // 角标背景颜色
+    show: boolean; // 是否显示
+    text: string; // 角标文字
+    textColor: string; // 角标文字颜色
   };
 }
 
+/** 宫格导航项目默认属性 */
 export const EMPTY_MENU_GRID_ITEM_PROPERTY = {
   title: '标题',
   titleColor: '#333',
@@ -51,7 +38,7 @@ export const EMPTY_MENU_GRID_ITEM_PROPERTY = {
   },
 } as MenuGridItemProperty;
 
-// 定义组件
+/** 定义组件 */
 export const component = {
   id: 'MenuGrid',
   name: '宫格导航',

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/index.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import type { MenuGridProperty } from './config';
 
+import { Image } from 'ant-design-vue';
+
 /** 宫格导航 */
 defineOptions({ name: 'MenuGrid' });
 defineProps<{ property: MenuGridProperty }>();
@@ -11,13 +13,13 @@ defineProps<{ property: MenuGridProperty }>();
     <div
       v-for="(item, index) in property.list"
       :key="index"
-      class="relative flex flex-col items-center pb-3.5 pt-5"
+      class="relative flex flex-col items-center pb-4 pt-4"
       :style="{ width: `${100 * (1 / property.column)}%` }"
     >
       <!-- 右上角角标 -->
       <span
         v-if="item.badge?.show"
-        class="absolute left-1/2 top-2.5 z-10 h-5 rounded-full px-1.5 text-center text-xs leading-5"
+        class="absolute left-1/2 top-2 z-10 h-4 rounded-full px-2 text-center text-xs leading-5"
         :style="{
           color: item.badge.textColor,
           backgroundColor: item.badge.bgColor,
@@ -27,7 +29,7 @@ defineProps<{ property: MenuGridProperty }>();
       </span>
       <Image
         v-if="item.iconUrl"
-        class="h-7 w-7"
+        :width="32"
         :src="item.iconUrl"
         :preview="false"
       />
@@ -46,5 +48,3 @@ defineProps<{ property: MenuGridProperty }>();
     </div>
   </div>
 </template>
-
-<style scoped lang="scss"></style>

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/property.vue

@@ -2,19 +2,16 @@
 import type { MenuGridProperty } from './config';
 
 import { useVModel } from '@vueuse/core';
+import { Form, FormItem, Radio, RadioGroup, Switch } from 'ant-design-vue';
+
+import UploadImg from '#/components/upload/image-upload.vue';
 import {
-  Card,
-  Form,
-  FormItem,
-  Radio,
-  RadioGroup,
-  Switch,
-} from 'ant-design-vue';
+  AppLinkInput,
+  ColorInput,
+  Draggable,
+} from '#/views/mall/promotion/components';
 
 import ComponentContainerProperty from '../../component-container-property.vue';
-import UploadImg from '#/components/upload/image-upload.vue';
-import { AppLinkInput, Draggable } from '#/views/mall/promotion/components';
-
 import { EMPTY_MENU_GRID_ITEM_PROPERTY } from './config';
 
 /** 宫格导航属性面板 */
@@ -36,7 +33,8 @@ const formData = useVModel(props, 'modelValue', emit);
         </RadioGroup>
       </FormItem>
 
-      <Card header="菜单设置" class="property-group" shadow="never">
+      <p class="text-base font-bold">菜单设置</p>
+      <div class="flex flex-col gap-2 rounded-md p-4 shadow-lg">
         <Draggable
           v-model="formData.list"
           :empty-item="EMPTY_MENU_GRID_ITEM_PROPERTY"
@@ -53,13 +51,13 @@ const formData = useVModel(props, 'modelValue', emit);
               </UploadImg>
             </FormItem>
             <FormItem label="标题" prop="title">
-              <InputWithColor
+              <ColorInput
                 v-model="element.title"
                 v-model:color="element.titleColor"
               />
             </FormItem>
             <FormItem label="副标题" prop="subtitle">
-              <InputWithColor
+              <ColorInput
                 v-model="element.subtitle"
                 v-model:color="element.subtitleColor"
               />
@@ -72,7 +70,7 @@ const formData = useVModel(props, 'modelValue', emit);
             </FormItem>
             <template v-if="element.badge.show">
               <FormItem label="角标内容" prop="badge.text">
-                <InputWithColor
+                <ColorInput
                   v-model="element.badge.text"
                   v-model:color="element.badge.textColor"
                 />
@@ -83,9 +81,7 @@ const formData = useVModel(props, 'modelValue', emit);
             </template>
           </template>
         </Draggable>
-      </Card>
+      </div>
     </Form>
   </ComponentContainerProperty>
 </template>
-
-<style scoped lang="scss"></style>