fix: 冲突

apps/web-antd/.env.development

@@ -4,9 +4,9 @@ VITE_PORT=5666
 VITE_BASE=/
 
 # 请求路径
-VITE_BASE_URL=http://127.0.0.1:48080
+VITE_BASE_URL=http://47.103.66.220:48080
 # 接口地址
-VITE_GLOB_API_URL=/admin-api
+VITE_GLOB_API_URL=http://47.103.66.220:48080/admin-api
 # 文件上传类型：server - 后端上传， client - 前端直连上传，仅支持S3服务
 VITE_UPLOAD_TYPE=server
 # 是否打开 devtools，true 为打开，false 为关闭

apps/web-antd/src/api/ai/knowledge/document/index.ts

@@ -26,10 +26,12 @@ export function getKnowledgeDocumentPage(params: PageParam) {
 export function getKnowledgeDocument(id: number) {
   return requestClient.get(`/ai/knowledge/document/get?id=${id}`);
 }
+
 // 新增知识库文档（单个）
 export function createKnowledge(data: any) {
   return requestClient.post('/ai/knowledge/document/create', data);
 }
+
 // 新增知识库文档（多个）
 export function createKnowledgeDocumentList(data: any) {
   return requestClient.post('/ai/knowledge/document/create-list', data);
@@ -44,6 +46,7 @@ export function updateKnowledgeDocument(data: any) {
 export function updateKnowledgeDocumentStatus(data: any) {
   return requestClient.put('/ai/knowledge/document/update-status', data);
 }
+
 // 删除知识库文档
 export function deleteKnowledgeDocument(id: number) {
   return requestClient.delete(`/ai/knowledge/document/delete?id=${id}`);

apps/web-antd/src/api/ai/knowledge/knowledge/index.ts

@@ -27,6 +27,7 @@ export function getKnowledge(id: number) {
     `/ai/knowledge/get?id=${id}`,
   );
 }
+
 // 新增知识库
 export function createKnowledge(data: AiKnowledgeKnowledgeApi.Knowledge) {
   return requestClient.post('/ai/knowledge/create', data);

apps/web-antd/src/api/ai/knowledge/segment/index.ts

@@ -32,6 +32,7 @@ export function getKnowledgeSegment(id: number) {
     `/ai/knowledge/segment/get?id=${id}`,
   );
 }
+
 // 新增知识库分段
 export function createKnowledgeSegment(
   data: AiKnowledgeSegmentApi.KnowledgeSegment,
@@ -47,9 +48,13 @@ export function updateKnowledgeSegment(
 }
 
 // 修改知识库分段状态
-export function updateKnowledgeSegmentStatus(data: any) {
-  return requestClient.put('/ai/knowledge/segment/update-status', data);
+export function updateKnowledgeSegmentStatus(id: number, status: number) {
+  return requestClient.put('/ai/knowledge/segment/update-status', {
+    id,
+    status,
+  });
 }
+
 // 删除知识库分段
 export function deleteKnowledgeSegment(id: number) {
   return requestClient.delete(`/ai/knowledge/segment/delete?id=${id}`);

apps/web-antd/src/api/mall/promotion/kefu/conversation/index.ts

@@ -1,5 +1,3 @@
-import type { PageResult } from '@vben/request';
-
 import { requestClient } from '#/api/request';
 
 export namespace MallKefuConversationApi {
@@ -28,7 +26,7 @@ export namespace MallKefuConversationApi {
 
 /** 获得客服会话列表 */
 export function getConversationList() {
-  return requestClient.get<PageResult<MallKefuConversationApi.Conversation>>(
+  return requestClient.get<MallKefuConversationApi.Conversation[]>(
     '/promotion/kefu-conversation/list',
   );
 }

apps/web-antd/src/api/mp/account/index.ts

@@ -5,18 +5,19 @@ import { requestClient } from '#/api/request';
 export namespace MpAccountApi {
   /** 公众号账号信息 */
   export interface Account {
-    id?: number;
+    id: number;
     name: string;
-    account: string;
-    appId: string;
-    appSecret: string;
-    token: string;
+    account?: string;
+    appId?: string;
+    appSecret?: string;
+    token?: string;
     aesKey?: string;
     qrCodeUrl?: string;
     remark?: string;
     createTime?: Date;
   }
 
+  // TODO @dylan：这个直接使用 Account，简化一点；
   export interface AccountSimple {
     id: number;
     name: string;

apps/web-antd/src/components/table-action/icons.ts

@@ -11,4 +11,5 @@ export const ACTION_ICON = {
   VIEW: 'lucide:eye',
   COPY: 'lucide:copy',
   CLOSE: 'lucide:x',
+  BOOK: 'lucide:book',
 };

apps/web-antd/src/locales/langs/en-US/page.json

@@ -29,5 +29,11 @@
   "tenant": {
     "placeholder": "Please select tenant",
     "success": "Switch tenant success"
+  },
+  "mp": {
+    "upload": {
+      "invalidFormat": "Invalid {0} format!",
+      "maxSize": "{0} size cannot exceed {1}M!"
+    }
   }
 }

apps/web-antd/src/locales/langs/zh-CN/page.json

@@ -29,5 +29,11 @@
   "tenant": {
     "placeholder": "请选择租户",
     "success": "切换租户成功"
+  },
+  "mp": {
+    "upload": {
+      "invalidFormat": "上传{0}格式不对!",
+      "maxSize": "上传{0}大小不能超过{1}M!"
+    }
   }
 }

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

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

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

@@ -5,7 +5,10 @@ import { isEmpty } from '@vben/utils';
 
 import { acceptHMRUpdate, defineStore } from 'pinia';
 
-import * as KeFuConversationApi from '#/api/mall/promotion/kefu/conversation';
+import {
+  getConversation,
+  getConversationList,
+} from '#/api/mall/promotion/kefu/conversation';
 
 interface MallKefuInfoVO {
   conversationList: MallKefuConversationApi.Conversation[]; // 会话列表
@@ -41,9 +44,7 @@ export const useMallKefuStore = defineStore('mall-kefu', {
     // ======================= 会话相关 =======================
     /** 加载会话缓存列表 */
     async setConversationList() {
-      // TODO @jave：idea linter 告警，修复下；
-      // TODO @jave：不使用 KeFuConversationApi.，直接用 getConversationList
-      this.conversationList = await KeFuConversationApi.getConversationList();
+      this.conversationList = await getConversationList();
       this.conversationSort();
     },
     /** 更新会话缓存已读 */
@@ -51,8 +52,11 @@ export const useMallKefuStore = defineStore('mall-kefu', {
       if (isEmpty(this.conversationList)) {
         return;
       }
-      const conversation = this.conversationList.find(
-        (item) => item.id === conversationId,
+      const conversationList = this
+        .conversationList as MallKefuConversationApi.Conversation[];
+      const conversation = conversationList.find(
+        (item: MallKefuConversationApi.Conversation) =>
+          item.id === conversationId,
       );
       conversation && (conversation.adminUnreadMessageCount = 0);
     },
@@ -62,10 +66,16 @@ export const useMallKefuStore = defineStore('mall-kefu', {
         return;
       }
 
-      const conversation =
-        await KeFuConversationApi.getConversation(conversationId);
+      const conversation = await getConversation(conversationId);
       this.deleteConversation(conversationId);
-      conversation && this.conversationList.push(conversation);
+      if (conversation && this.conversationList) {
+        const conversationList = this
+          .conversationList as MallKefuConversationApi.Conversation[];
+        this.conversationList = [
+          ...conversationList,
+          conversation as MallKefuConversationApi.Conversation,
+        ];
+      }
       this.conversationSort();
     },
     /** 删除会话缓存 */

apps/web-antd/src/views/ai/knowledge/document/data.ts

@@ -1,11 +1,13 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { AiKnowledgeDocumentApi } from '#/api/ai/knowledge/document';
 
 import { AiModelTypeEnum, CommonStatusEnum, DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
 
 import { z } from '#/adapter/form';
 import { getModelSimpleList } from '#/api/ai/model/model';
+
 /** 新增/修改的表单 */
 export function useFormSchema(): VbenFormSchema[] {
   return [
@@ -92,12 +94,17 @@ export function useGridFormSchema(): VbenFormSchema[] {
       fieldName: 'name',
       label: '文件名称',
       component: 'Input',
+      componentProps: {
+        placeholder: '请输入文件名称',
+        allowClear: true,
+      },
     },
     {
       fieldName: 'status',
       label: '是否启用',
       component: 'Select',
       componentProps: {
+        placeholder: '请选择是否启用',
         allowClear: true,
         options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
       },
@@ -106,45 +113,66 @@ export function useGridFormSchema(): VbenFormSchema[] {
 }
 
 /** 列表的字段 */
-export function useGridColumns(): VxeTableGridOptions['columns'] {
+export function useGridColumns(
+  onStatusChange?: (
+    newStatus: number,
+    row: AiKnowledgeDocumentApi.KnowledgeDocument,
+  ) => PromiseLike<boolean | undefined>,
+): VxeTableGridOptions['columns'] {
   return [
     {
       field: 'id',
       title: '文档编号',
+      minWidth: 100,
     },
     {
       field: 'name',
       title: '文件名称',
+      minWidth: 200,
     },
     {
       field: 'contentLength',
       title: '字符数',
+      minWidth: 100,
     },
     {
       field: 'tokens',
       title: 'Token 数',
+      minWidth: 100,
     },
     {
       field: 'segmentMaxTokens',
       title: '分片最大 Token 数',
+      minWidth: 150,
     },
     {
       field: 'retrievalCount',
       title: '召回次数',
+      minWidth: 100,
     },
     {
       field: 'status',
       title: '是否启用',
-      slots: { default: 'status' },
+      minWidth: 100,
+      align: 'center',
+      cellRender: {
+        attrs: { beforeChange: onStatusChange },
+        name: 'CellSwitch',
+        props: {
+          checkedValue: CommonStatusEnum.ENABLE,
+          unCheckedValue: CommonStatusEnum.DISABLE,
+        },
+      },
     },
     {
       field: 'createTime',
       title: '上传时间',
+      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
       title: '操作',
-      width: 150,
+      minWidth: 150,
       fixed: 'right',
       slots: { default: 'actions' },
     },

apps/web-antd/src/views/ai/knowledge/document/form/index.vue

@@ -16,14 +16,13 @@ import { Card } from 'ant-design-vue';
 
 import { getKnowledgeDocument } from '#/api/ai/knowledge/document';
 
-import ProcessStep from './ProcessStep.vue';
-import SplitStep from './SplitStep.vue';
-import UploadStep from './UploadStep.vue';
+import ProcessStep from './modules/process-step.vue';
+import SplitStep from './modules/split-step.vue';
+import UploadStep from './modules/upload-step.vue';
 
 const route = useRoute();
 const router = useRouter();
 
-// 组件引用
 const uploadDocumentRef = ref();
 const documentSegmentRef = ref();
 const processCompleteRef = ref();
@@ -59,9 +58,9 @@ const tabs = useTabs();
 function handleBack() {
   // 关闭当前页签
   tabs.closeCurrentTab();
-  // 跳转到列表页，使用路径， 目前后端的路由 name： 'name'+ menuId
+  // 跳转到列表页
   router.push({
-    path: `/ai/knowledge/document`,
+    name: 'AiKnowledgeDocument',
     query: {
       knowledgeId: route.query.knowledgeId,
     },
@@ -92,6 +91,7 @@ async function initData() {
     goToNextStep();
   }
 }
+
 /** 切换到下一步 */
 function goToNextStep() {
   if (currentStep.value < steps.length - 1) {
@@ -106,11 +106,6 @@ function goToPrevStep() {
   }
 }
 
-/** 初始化 */
-onMounted(async () => {
-  await initData();
-});
-
 /** 添加组件卸载前的清理代码 */
 onBeforeUnmount(() => {
   // 清理所有的引用
@@ -118,12 +113,18 @@ onBeforeUnmount(() => {
   documentSegmentRef.value = null;
   processCompleteRef.value = null;
 });
+
 /** 暴露方法给子组件使用 */
 defineExpose({
   goToNextStep,
   goToPrevStep,
   handleBack,
 });
+
+/** 初始化 */
+onMounted(async () => {
+  await initData();
+});
 </script>
 
 <template>
@@ -168,13 +169,14 @@ defineExpose({
               >
                 {{ index + 1 }}
               </div>
-              <span class="whitespace-nowrap text-base font-bold">{{
-                step.title
-              }}</span>
+              <span class="whitespace-nowrap text-base font-bold">
+                {{ step.title }}
+              </span>
             </div>
           </div>
         </div>
       </div>
+
       <!-- 主体内容 -->
       <Card :body-style="{ padding: '10px' }" class="mb-4">
         <div class="mt-12">

apps/web-antd/src/views/ai/knowledge/document/form/modules/split-step.vue

@@ -67,6 +67,7 @@ async function splitContentFile(file: any) {
     splitLoading.value = false;
   }
 }
+
 /** 处理预览分段 */
 async function handleAutoSegment() {
   // 如果没有选中文件，默认选中第一个
@@ -228,7 +229,7 @@ onMounted(async () => {
               >
                 {{ file.name }}
                 <span v-if="file.segments" class="ml-1 text-sm text-gray-500">
-                  ({{ file.segments.length }}个分片)
+                  ({{ file.segments.length }} 个分片)
                 </span>
               </Menu.Item>
             </Menu>

apps/web-antd/src/views/ai/knowledge/document/form/modules/upload-step.vue

@@ -9,7 +9,6 @@ import type { AxiosProgressEvent } from '#/api/infra/file';
 import { computed, getCurrentInstance, inject, onMounted, ref } from 'vue';
 
 import { IconifyIcon } from '@vben/icons';
-import { $t } from '@vben/locales';
 import { generateAcceptedFileTypes } from '@vben/utils';
 
 import { Button, Form, message, UploadDragger } from 'ant-design-vue';
@@ -31,7 +30,6 @@ const { uploadUrl, httpRequest } = useUpload(); // 使用上传组件的钩子
 const fileList = ref<UploadProps['fileList']>([]); // 文件列表
 const uploadingCount = ref(0); // 上传中的文件数量
 
-// 支持的文件类型和大小限制
 const supportedFileTypes = [
   'TXT',
   'MARKDOWN',
@@ -51,16 +49,14 @@ const supportedFileTypes = [
   'PPT',
   'MD',
   'HTM',
-];
+]; // 支持的文件类型和大小限制
 const allowedExtensions = new Set(
   supportedFileTypes.map((ext) => ext.toLowerCase()),
 ); // 小写的扩展名列表
 const maxFileSize = 15; // 最大文件大小(MB)
-
-// 构建 accept 属性值，用于限制文件选择对话框中可见的文件类型
 const acceptedFileTypes = computed(() =>
   generateAcceptedFileTypes(supportedFileTypes),
-);
+); // 构建 accept 属性值，用于限制文件选择对话框中可见的文件类型
 
 /** 表单数据 */
 const modelData = computed({
@@ -69,6 +65,7 @@ const modelData = computed({
   },
   set: (val) => emit('update:modelValue', val),
 });
+
 /** 确保 list 属性存在 */
 function ensureListExists() {
   if (!props.modelValue.list) {
@@ -78,6 +75,7 @@ function ensureListExists() {
     });
   }
 }
+
 /** 是否所有文件都已上传完成 */
 const isAllUploaded = computed(() => {
   return (
@@ -113,7 +111,8 @@ function beforeUpload(file: any) {
   uploadingCount.value++;
   return true;
 }
-async function customRequest(info: UploadRequestOption<any>) {
+
+async function customRequest(info: UploadRequestOption) {
   const file = info.file as File;
   const name = file?.name;
   try {
@@ -124,7 +123,7 @@ async function customRequest(info: UploadRequestOption<any>) {
     };
     const res = await httpRequest(info.file as File, progressEvent);
     info.onSuccess!(res);
-    message.success($t('ui.upload.uploadSuccess'));
+    message.success('上传成功');
     ensureListExists();
     emit('update:modelValue', {
       ...props.modelValue,
@@ -143,6 +142,7 @@ async function customRequest(info: UploadRequestOption<any>) {
     uploadingCount.value = Math.max(0, uploadingCount.value - 1);
   }
 }
+
 /**
  * 从列表中移除文件
  *
@@ -232,9 +232,9 @@ onMounted(() => {
           >
             <div class="flex items-center">
               <IconifyIcon icon="lucide:file-text" class="mr-2 text-blue-500" />
-              <span class="break-all text-sm text-gray-600">{{
-                file.name
-              }}</span>
+              <span class="break-all text-sm text-gray-600">
+                {{ file.name }}
+              </span>
             </div>
             <Button
               danger

apps/web-antd/src/views/ai/knowledge/document/index.vue

@@ -5,11 +5,11 @@ import type { AiKnowledgeDocumentApi } from '#/api/ai/knowledge/document';
 import { onMounted } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
-import { useAccess } from '@vben/access';
 import { confirm, Page } from '@vben/common-ui';
-import { CommonStatusEnum } from '@vben/constants';
+import { DICT_TYPE } from '@vben/constants';
+import { getDictLabel } from '@vben/hooks';
 
-import { message, Switch } from 'ant-design-vue';
+import { message } from 'ant-design-vue';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
@@ -21,18 +21,18 @@ import { $t } from '#/locales';
 
 import { useGridColumns, useGridFormSchema } from './data';
 
-/** AI 知识库文档 列表 */
+/** AI 知识库文档列表 */
 defineOptions({ name: 'AiKnowledgeDocument' });
-const { hasAccessByCodes } = useAccess();
 
 const route = useRoute();
 const router = useRouter();
+
 /** 刷新表格 */
 function handleRefresh() {
   gridApi.query();
 }
 
-/** 创建 */
+/** 创建知识库文档 */
 function handleCreate() {
   router.push({
     name: 'AiKnowledgeDocumentCreate',
@@ -40,7 +40,7 @@ function handleCreate() {
   });
 }
 
-/** 编辑 */
+/** 编辑知识库文档 */
 function handleEdit(id: number) {
   router.push({
     name: 'AiKnowledgeDocumentUpdate',
@@ -48,7 +48,7 @@ function handleEdit(id: number) {
   });
 }
 
-/** 删除 */
+/** 删除知识库文档 */
 async function handleDelete(row: AiKnowledgeDocumentApi.KnowledgeDocument) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.name]),
@@ -56,14 +56,13 @@ async function handleDelete(row: AiKnowledgeDocumentApi.KnowledgeDocument) {
   });
   try {
     await deleteKnowledgeDocument(row.id as number);
-    message.success({
-      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
-    });
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
     handleRefresh();
   } finally {
     hideLoading();
   }
 }
+
 /** 跳转到知识库分段页面 */
 function handleSegment(id: number) {
   router.push({
@@ -71,33 +70,38 @@ function handleSegment(id: number) {
     query: { documentId: id },
   });
 }
-/** 修改是否发布 */
+
+/** 更新文档状态 */
 async function handleStatusChange(
+  newStatus: number,
   row: AiKnowledgeDocumentApi.KnowledgeDocument,
-) {
-  try {
-    // 修改状态的二次确认
-    const text = row.status ? '启用' : '禁用';
-    await confirm(`确认要"${text}"${row.name}文档吗?`).then(async () => {
-      await updateKnowledgeDocumentStatus({
-        id: row.id,
-        status: row.status,
+): Promise<boolean | undefined> {
+  return new Promise((resolve, reject) => {
+    confirm({
+      content: `你要将${row.name}的状态切换为【${getDictLabel(DICT_TYPE.COMMON_STATUS, newStatus)}】吗？`,
+    })
+      .then(async () => {
+        // 更新文档状态
+        await updateKnowledgeDocumentStatus({
+          id: row.id,
+          status: newStatus,
+        });
+        // 提示并返回成功
+        message.success($t('ui.actionMessage.operationSuccess'));
+        resolve(true);
+      })
+      .catch(() => {
+        reject(new Error('取消操作'));
       });
-      handleRefresh();
-    });
-  } catch {
-    row.status =
-      row.status === CommonStatusEnum.ENABLE
-        ? CommonStatusEnum.DISABLE
-        : CommonStatusEnum.ENABLE;
-  }
+  });
 }
+
 const [Grid, gridApi] = useVbenVxeGrid({
   formOptions: {
     schema: useGridFormSchema(),
   },
   gridOptions: {
-    columns: useGridColumns(),
+    columns: useGridColumns(handleStatusChange),
     height: 'auto',
     keepSource: true,
     proxyConfig: {
@@ -114,6 +118,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,
@@ -121,6 +126,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
   } as VxeTableGridOptions<AiKnowledgeDocumentApi.KnowledgeDocument>,
 });
+
 /** 初始化 */
 onMounted(() => {
   // 如果知识库 ID 不存在，显示错误提示并关闭页面
@@ -148,15 +154,6 @@ onMounted(() => {
           ]"
         />
       </template>
-      <template #status="{ row }">
-        <Switch
-          v-model:checked="row.status"
-          :checked-value="0"
-          :un-checked-value="1"
-          @change="handleStatusChange(row)"
-          :disabled="!hasAccessByCodes(['ai:knowledge:update'])"
-        />
-      </template>
       <template #actions="{ row }">
         <TableAction
           :actions="[
@@ -178,6 +175,8 @@ onMounted(() => {
             {
               label: $t('common.delete'),
               type: 'link',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
               auth: ['ai:knowledge:delete'],
               popConfirm: {
                 title: $t('ui.actionMessage.deleteConfirm', [row.name]),

apps/web-antd/src/views/ai/knowledge/knowledge/data.ts

@@ -23,6 +23,9 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'Input',
       fieldName: 'name',
       label: '知识库名称',
+      componentProps: {
+        placeholder: '请输入知识库名称',
+      },
       rules: 'required',
     },
     {
@@ -53,7 +56,6 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'InputNumber',
       componentProps: {
         placeholder: '请输入检索 topK',
-        class: 'w-full',
         min: 0,
         max: 10,
       },
@@ -65,7 +67,6 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'InputNumber',
       componentProps: {
         placeholder: '请输入检索相似度阈值',
-        class: 'w-full',
         min: 0,
         max: 1,
         step: 0.01,
@@ -94,14 +95,19 @@ export function useGridFormSchema(): VbenFormSchema[] {
       fieldName: 'name',
       label: '知识库名称',
       component: 'Input',
+      componentProps: {
+        placeholder: '请输入知识库名称',
+        allowClear: true,
+      },
     },
     {
       fieldName: 'status',
       label: '是否启用',
       component: 'Select',
       componentProps: {
-        allowClear: true,
         options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        placeholder: '请选择是否启用',
+        allowClear: true,
       },
     },
     {
@@ -122,22 +128,27 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'id',
       title: '编号',
+      minWidth: 100,
     },
     {
       field: 'name',
       title: '知识库名称',
+      minWidth: 150,
     },
     {
       field: 'description',
       title: '知识库描述',
+      minWidth: 200,
     },
     {
       field: 'embeddingModel',
       title: '向量化模型',
+      minWidth: 150,
     },
     {
       field: 'status',
       title: '是否启用',
+      minWidth: 100,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.COMMON_STATUS },
@@ -146,11 +157,12 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'createTime',
       title: '创建时间',
+      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
       title: '操作',
-      width: 150,
+      width: 280,
       fixed: 'right',
       slots: { default: 'actions' },
     },

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

@@ -28,17 +28,17 @@ function handleRefresh() {
   gridApi.query();
 }
 
-/** 创建 */
+/** 创建知识库 */
 function handleCreate() {
   formModalApi.setData(null).open();
 }
 
-/** 编辑 */
+/** 编辑知识库 */
 function handleEdit(row: AiKnowledgeKnowledgeApi.Knowledge) {
   formModalApi.setData(row).open();
 }
 
-/** 删除 */
+/** 删除知识库 */
 async function handleDelete(row: AiKnowledgeKnowledgeApi.Knowledge) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.name]),
@@ -46,15 +46,14 @@ async function handleDelete(row: AiKnowledgeKnowledgeApi.Knowledge) {
   });
   try {
     await deleteKnowledge(row.id as number);
-    message.success({
-      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
-    });
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
     handleRefresh();
   } finally {
     hideLoading();
   }
 }
-/** 文档按钮操作 */
+
+/** 跳转到知识库文档页面 */
 const router = useRouter();
 function handleDocument(id: number) {
   router.push({
@@ -92,6 +91,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,
@@ -131,23 +131,25 @@ const [Grid, gridApi] = useVbenVxeGrid({
               auth: ['ai:knowledge:update'],
               onClick: handleEdit.bind(null, row),
             },
-          ]"
-          :drop-down-actions="[
             {
               label: $t('ui.widgets.document'),
               type: 'link',
+              icon: ACTION_ICON.BOOK,
               auth: ['ai:knowledge:query'],
               onClick: handleDocument.bind(null, row.id),
             },
             {
               label: '召回测试',
               type: 'link',
+              icon: ACTION_ICON.SEARCH,
               auth: ['ai:knowledge:query'],
               onClick: handleRetrieval.bind(null, row.id),
             },
             {
               label: $t('common.delete'),
               type: 'link',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
               auth: ['ai:knowledge:delete'],
               popConfirm: {
                 title: $t('ui.actionMessage.deleteConfirm', [row.name]),

apps/web-antd/src/views/ai/knowledge/knowledge/modules/form.vue

@@ -83,7 +83,7 @@ const [Modal, modalApi] = useVbenModal({
 </script>
 
 <template>
-  <Modal class="w-2/5" :title="getTitle">
+  <Modal :title="getTitle" class="w-2/5">
     <Form class="mx-4" />
   </Modal>
 </template>

apps/web-antd/src/views/ai/knowledge/knowledge/retrieval/index.vue

@@ -17,7 +17,7 @@ import {
 import { getKnowledge } from '#/api/ai/knowledge/knowledge';
 import { searchKnowledgeSegment } from '#/api/ai/knowledge/segment';
 
-/** 文档召回测试 */
+/** 知识库文档召回测试 */
 defineOptions({ name: 'KnowledgeDocumentRetrieval' });
 
 const route = useRoute();
@@ -32,7 +32,7 @@ const queryParams = reactive({
   similarityThreshold: 0.5,
 });
 
-/** 调用文档召回测试接口 */
+/** 执行召回测试 */
 async function getRetrievalResult() {
   if (!queryParams.content) {
     message.warning('请输入查询文本');
@@ -50,19 +50,17 @@ async function getRetrievalResult() {
       similarityThreshold: queryParams.similarityThreshold,
     });
     segments.value = data || [];
-  } catch (error) {
-    console.error(error);
   } finally {
     loading.value = false;
   }
 }
 
-/** 展开/收起段落内容 */
+/** 切换段落展开状态 */
 function toggleExpand(segment: any) {
   segment.expanded = !segment.expanded;
 }
 
-/** 获取知识库信息 */
+/** 获取知识库配置信息 */
 async function getKnowledgeInfo(id: number) {
   try {
     const knowledge = await getKnowledge(id);
@@ -157,43 +155,44 @@ onMounted(() => {
             <div
               v-for="(segment, index) in segments"
               :key="index"
-              class="p-15 mb-20 rounded border border-solid border-gray-200"
+              class="mt-2 rounded border border-solid border-gray-200 px-2 py-2"
             >
-              <div class="mb-5 flex justify-between text-sm text-gray-500">
+              <div
+                class="mb-2 flex items-center justify-between gap-8 text-sm text-gray-500"
+              >
                 <span>
                   分段({{ segment.id }}) · {{ segment.contentLength }} 字符数 ·
                   {{ segment.tokens }} Token
                 </span>
                 <span
-                  class="rounded-full bg-blue-50 py-4 text-sm font-bold text-blue-500"
+                  class="whitespace-nowrap rounded-full bg-blue-50 px-2 py-1 text-sm text-blue-500"
                 >
                   score: {{ segment.score }}
                 </span>
               </div>
               <div
-                class="mb-10 overflow-hidden whitespace-pre-wrap rounded bg-gray-50 p-10 text-sm transition-all duration-100"
+                class="mb-2 overflow-hidden whitespace-pre-wrap rounded bg-gray-50 text-sm transition-all duration-100"
                 :class="{
-                  'max-h-50 line-clamp-2': !segment.expanded,
+                  'line-clamp-2 max-h-40': !segment.expanded,
                   'max-h-[1500px]': segment.expanded,
                 }"
               >
                 {{ segment.content }}
               </div>
-              <div class="flex items-center justify-between">
-                <div class="flex items-center text-sm text-gray-500">
-                  <IconifyIcon icon="lucide:file-text" class="mr-5" />
+              <div class="flex items-center justify-between gap-8">
+                <div class="flex items-center gap-1 text-sm text-gray-500">
+                  <IconifyIcon icon="lucide:file-text" />
                   <span>{{ segment.documentName || '未知文档' }}</span>
                 </div>
                 <Button size="small" @click="toggleExpand(segment)">
                   {{ segment.expanded ? '收起' : '展开' }}
-                  <span
-                    class="mr-5"
-                    :class="
+                  <IconifyIcon
+                    :icon="
                       segment.expanded
                         ? 'lucide:chevron-up'
                         : 'lucide:chevron-down'
                     "
-                  ></span>
+                  />
                 </Button>
               </div>
             </div>

apps/web-antd/src/views/ai/knowledge/segment/data.ts

@@ -1,7 +1,8 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { AiKnowledgeSegmentApi } from '#/api/ai/knowledge/segment';
 
-import { DICT_TYPE } from '@vben/constants';
+import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
 
 /** 新增/修改的表单 */
@@ -43,12 +44,17 @@ export function useGridFormSchema(): VbenFormSchema[] {
       fieldName: 'documentId',
       label: '文档编号',
       component: 'Input',
+      componentProps: {
+        placeholder: '请输入文档编号',
+        allowClear: true,
+      },
     },
     {
       fieldName: 'status',
       label: '是否启用',
       component: 'Select',
       componentProps: {
+        placeholder: '请选择是否启用',
         allowClear: true,
         options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
       },
@@ -57,11 +63,17 @@ export function useGridFormSchema(): VbenFormSchema[] {
 }
 
 /** 列表的字段 */
-export function useGridColumns(): VxeTableGridOptions['columns'] {
+export function useGridColumns(
+  onStatusChange?: (
+    newStatus: number,
+    row: AiKnowledgeSegmentApi.KnowledgeSegment,
+  ) => PromiseLike<boolean | undefined>,
+): VxeTableGridOptions['columns'] {
   return [
     {
       field: 'id',
       title: '分段编号',
+      minWidth: 100,
     },
     {
       type: 'expand',
@@ -76,23 +88,36 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'contentLength',
       title: '字符数',
+      minWidth: 100,
     },
     {
       field: 'tokens',
       title: 'token 数量',
+      minWidth: 120,
     },
     {
       field: 'retrievalCount',
       title: '召回次数',
+      minWidth: 100,
     },
     {
       field: 'status',
-      title: '是否启用',
-      slots: { default: 'status' },
+      title: '状态',
+      minWidth: 100,
+      align: 'center',
+      cellRender: {
+        attrs: { beforeChange: onStatusChange },
+        name: 'CellSwitch',
+        props: {
+          checkedValue: CommonStatusEnum.ENABLE,
+          unCheckedValue: CommonStatusEnum.DISABLE,
+        },
+      },
     },
     {
       field: 'createTime',
       title: '创建时间',
+      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {

apps/web-antd/src/views/ai/knowledge/segment/index.vue

@@ -5,11 +5,11 @@ import type { AiKnowledgeSegmentApi } from '#/api/ai/knowledge/segment';
 import { onMounted } from 'vue';
 import { useRoute } from 'vue-router';
 
-import { useAccess } from '@vben/access';
 import { confirm, Page, useVbenModal } from '@vben/common-ui';
-import { CommonStatusEnum } from '@vben/constants';
+import { DICT_TYPE } from '@vben/constants';
+import { getDictLabel } from '@vben/hooks';
 
-import { message, Switch } from 'ant-design-vue';
+import { message } from 'ant-design-vue';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
@@ -23,7 +23,7 @@ import { useGridColumns, useGridFormSchema } from './data';
 import Form from './modules/form.vue';
 
 const route = useRoute();
-const { hasAccessByCodes } = useAccess();
+
 const [FormModal, formModalApi] = useVbenModal({
   connectedComponent: Form,
   destroyOnClose: true,
@@ -34,17 +34,17 @@ function handleRefresh() {
   gridApi.query();
 }
 
-/** 创建 */
+/** 创建知识库片段 */
 function handleCreate() {
   formModalApi.setData({ documentId: route.query.documentId }).open();
 }
 
-/** 编辑 */
+/** 编辑知识库片段 */
 function handleEdit(row: AiKnowledgeSegmentApi.KnowledgeSegment) {
   formModalApi.setData(row).open();
 }
 
-/** 删除 */
+/** 删除知识库片段 */
 async function handleDelete(row: AiKnowledgeSegmentApi.KnowledgeSegment) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.id]),
@@ -52,21 +52,41 @@ async function handleDelete(row: AiKnowledgeSegmentApi.KnowledgeSegment) {
   });
   try {
     await deleteKnowledgeSegment(row.id as number);
-    message.success({
-      content: $t('ui.actionMessage.deleteSuccess', [row.id]),
-    });
+    message.success($t('ui.actionMessage.deleteSuccess', [row.id]));
     handleRefresh();
   } finally {
     hideLoading();
   }
 }
 
+/** 更新知识库片段状态 */
+async function handleStatusChange(
+  newStatus: number,
+  row: AiKnowledgeSegmentApi.KnowledgeSegment,
+): Promise<boolean | undefined> {
+  return new Promise((resolve, reject) => {
+    confirm({
+      content: `你要将片段 ${row.id} 的状态切换为【${getDictLabel(DICT_TYPE.COMMON_STATUS, newStatus)}】吗？`,
+    })
+      .then(async () => {
+        // 更新片段状态
+        await updateKnowledgeSegmentStatus(row.id!, newStatus);
+        // 提示并返回成功
+        message.success($t('ui.actionMessage.operationSuccess'));
+        resolve(true);
+      })
+      .catch(() => {
+        reject(new Error('取消操作'));
+      });
+  });
+}
+
 const [Grid, gridApi] = useVbenVxeGrid({
   formOptions: {
     schema: useGridFormSchema(),
   },
   gridOptions: {
-    columns: useGridColumns(),
+    columns: useGridColumns(handleStatusChange),
     height: 'auto',
     keepSource: true,
     proxyConfig: {
@@ -82,6 +102,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,
@@ -90,26 +111,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
   } as VxeTableGridOptions<AiKnowledgeSegmentApi.KnowledgeSegment>,
 });
 
-/** 修改是否发布 */
-async function handleStatusChange(row: AiKnowledgeSegmentApi.KnowledgeSegment) {
-  try {
-    // 修改状态的二次确认
-    const text = row.status ? '启用' : '禁用';
-    await confirm(`确认要"${text}"该分段吗?`).then(async () => {
-      await updateKnowledgeSegmentStatus({
-        id: row.id,
-        status: row.status,
-      });
-      gridApi.reload();
-    });
-  } catch {
-    row.status =
-      row.status === CommonStatusEnum.ENABLE
-        ? CommonStatusEnum.DISABLE
-        : CommonStatusEnum.ENABLE;
-  }
-}
-
+/** 初始化 */
 onMounted(() => {
   gridApi.formApi.setFieldValue('documentId', route.query.documentId);
 });
@@ -132,15 +134,6 @@ onMounted(() => {
           ]"
         />
       </template>
-      <template #status="{ row }">
-        <Switch
-          v-model:checked="row.status"
-          :checked-value="0"
-          :un-checked-value="1"
-          @change="handleStatusChange(row)"
-          :disabled="!hasAccessByCodes(['ai:knowledge:update'])"
-        />
-      </template>
       <template #expand_content="{ row }">
         <div
           class="whitespace-pre-wrap border-l-4 border-blue-500 px-2.5 py-5 leading-5"

apps/web-antd/src/views/ai/knowledge/segment/modules/form.vue

@@ -68,7 +68,6 @@ const [Modal, modalApi] = useVbenModal({
     // 加载数据
     const data = modalApi.getData<AiKnowledgeSegmentApi.KnowledgeSegment>();
     if (!data || !data.id) {
-      await formApi.setValues(data);
       return;
     }
     modalApi.lock();

apps/web-antd/src/views/mall/product/category/components/index.ts

@@ -0,0 +1 @@
+export { default as ProductCategorySelect } from './select.vue';

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

@@ -11,26 +11,25 @@ import { getCategoryList } from '#/api/mall/product/category';
 defineOptions({ name: 'ProductCategorySelect' });
 
 const props = defineProps({
-  // 选中的ID
   modelValue: {
     type: [Number, Array<Number>],
     default: undefined,
-  },
-  // 是否多选
+  }, // 选中的 ID
   multiple: {
     type: Boolean,
     default: false,
-  },
-  // 上级品类的编号
+  }, // 是否多选
   parentId: {
     type: Number,
     default: undefined,
-  },
+  }, // 上级品类的编号
 });
 
 /** 分类选择 */
 const emit = defineEmits(['update:modelValue']);
 
+const categoryList = ref<any[]>([]); // 分类树
+
 /** 选中的分类 ID */
 const selectCategoryId = computed({
   get: () => {
@@ -42,7 +41,6 @@ const selectCategoryId = computed({
 });
 
 /** 初始化 */
-const categoryList = ref<any[]>([]); // 分类树
 onMounted(async () => {
   const data = await getCategoryList({
     parentId: props.parentId,
@@ -61,7 +59,7 @@ onMounted(async () => {
     }"
     :multiple="multiple"
     :tree-checkable="multiple"
-    class="w-1/1"
+    class="w-full"
     placeholder="请选择商品分类"
     allow-clear
     tree-default-expand-all

apps/web-antd/src/views/mall/promotion/combination/components/index.ts

@@ -0,0 +1 @@
+export { default as CombinationShowcase } from './showcase.vue';

apps/web-antd/src/views/mall/promotion/combination/components/showcase.vue

@@ -0,0 +1,145 @@
+<!-- 拼团活动橱窗组件：用于展示和选择拼团活动 -->
+<script lang="ts" setup>
+import type { MallCombinationActivityApi } from '#/api/mall/promotion/combination/combinationActivity';
+
+import { computed, ref, watch } from 'vue';
+
+import { CloseCircleFilled, PlusOutlined } from '@vben/icons';
+
+import { Image, Tooltip } from 'ant-design-vue';
+
+import { getCombinationActivityListByIds } from '#/api/mall/promotion/combination/combinationActivity';
+
+import CombinationTableSelect from './table-select.vue';
+
+interface CombinationShowcaseProps {
+  modelValue?: number | number[];
+  limit?: number;
+  disabled?: boolean;
+}
+
+const props = withDefaults(defineProps<CombinationShowcaseProps>(), {
+  modelValue: undefined,
+  limit: Number.MAX_VALUE,
+  disabled: false,
+});
+
+const emit = defineEmits(['update:modelValue', 'change']);
+
+const activityList = ref<MallCombinationActivityApi.CombinationActivity[]>([]); // 已选择的活动列表
+const combinationTableSelectRef =
+  ref<InstanceType<typeof CombinationTableSelect>>(); // 活动选择表格组件引用
+const isMultiple = computed(() => props.limit !== 1); // 是否为多选模式
+
+/** 计算是否可以添加 */
+const canAdd = computed(() => {
+  if (props.disabled) {
+    return false;
+  }
+  if (!props.limit) {
+    return true;
+  }
+  return activityList.value.length < props.limit;
+});
+
+/** 监听 modelValue 变化，加载活动详情 */
+watch(
+  () => props.modelValue,
+  async (newValue) => {
+    // eslint-disable-next-line unicorn/no-nested-ternary
+    const ids = Array.isArray(newValue) ? newValue : newValue ? [newValue] : [];
+    if (ids.length === 0) {
+      activityList.value = [];
+      return;
+    }
+    // 只有活动发生变化时才重新查询
+    if (
+      activityList.value.length === 0 ||
+      activityList.value.some((activity) => !ids.includes(activity.id!))
+    ) {
+      activityList.value = await getCombinationActivityListByIds(ids);
+    }
+  },
+  { immediate: true },
+);
+
+/** 打开活动选择对话框 */
+function handleOpenActivitySelect() {
+  combinationTableSelectRef.value?.open(activityList.value);
+}
+
+/** 选择活动后触发 */
+function handleActivitySelected(
+  activities:
+    | MallCombinationActivityApi.CombinationActivity
+    | MallCombinationActivityApi.CombinationActivity[],
+) {
+  activityList.value = Array.isArray(activities) ? activities : [activities];
+  emitActivityChange();
+}
+
+/** 删除活动 */
+function handleRemoveActivity(index: number) {
+  activityList.value.splice(index, 1);
+  emitActivityChange();
+}
+
+/** 触发变更事件 */
+function emitActivityChange() {
+  if (props.limit === 1) {
+    const activity =
+      activityList.value.length > 0 ? activityList.value[0] : null;
+    emit('update:modelValue', activity?.id || 0);
+    emit('change', activity);
+  } else {
+    emit(
+      'update:modelValue',
+      activityList.value.map((activity) => activity.id!),
+    );
+    emit('change', activityList.value);
+  }
+}
+</script>
+
+<template>
+  <div class="flex flex-wrap items-center gap-2">
+    <!-- 已选活动列表 -->
+    <div
+      v-for="(activity, index) in activityList"
+      :key="activity.id"
+      class="group relative h-[60px] w-[60px] overflow-hidden rounded-lg"
+    >
+      <Tooltip :title="activity.name">
+        <div class="relative h-full w-full">
+          <Image
+            :src="activity.picUrl"
+            class="h-full w-full rounded-lg object-cover"
+          />
+          <!-- 删除按钮 -->
+          <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="handleRemoveActivity(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="handleOpenActivitySelect"
+      >
+        <PlusOutlined class="text-xl text-gray-400" />
+      </div>
+    </Tooltip>
+  </div>
+
+  <!-- 活动选择对话框 -->
+  <CombinationTableSelect
+    ref="combinationTableSelectRef"
+    :multiple="isMultiple"
+    @change="handleActivitySelected"
+  />
+</template>

apps/web-antd/src/views/mall/promotion/combination/components/table-select.vue

@@ -0,0 +1,285 @@
+<!-- 拼团活动选择弹窗组件 -->
+<script lang="ts" setup>
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+import type { MallCategoryApi } from '#/api/mall/product/category';
+import type { MallCombinationActivityApi } from '#/api/mall/promotion/combination/combinationActivity';
+
+import { computed, onMounted, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+import { fenToYuan, formatDate, handleTree } from '@vben/utils';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getCategoryList } from '#/api/mall/product/category';
+import { getCombinationActivityPage } from '#/api/mall/promotion/combination/combinationActivity';
+
+interface CombinationTableSelectProps {
+  multiple?: boolean; // 是否多选：true - checkbox；false - radio
+}
+
+const props = withDefaults(defineProps<CombinationTableSelectProps>(), {
+  multiple: false,
+});
+
+const emit = defineEmits<{
+  change: [
+    activity:
+      | MallCombinationActivityApi.CombinationActivity
+      | MallCombinationActivityApi.CombinationActivity[],
+  ];
+}>();
+
+const categoryList = ref<MallCategoryApi.Category[]>([]); // 分类列表
+const categoryTreeList = ref<any[]>([]); // 分类树
+
+/** 单选：处理选中变化 */
+function handleRadioChange() {
+  const selectedRow =
+    gridApi.grid.getRadioRecord() as MallCombinationActivityApi.CombinationActivity;
+  if (selectedRow) {
+    emit('change', selectedRow);
+    modalApi.close();
+  }
+}
+
+/**
+ * 格式化拼团价格
+ * @param products
+ */
+const formatCombinationPrice = (
+  products: MallCombinationActivityApi.CombinationProduct[],
+) => {
+  if (!products || products.length === 0) return '-';
+  const combinationPrice = Math.min(
+    ...products.map((item) => item.combinationPrice || 0),
+  );
+  return `￥${fenToYuan(combinationPrice)}`;
+};
+
+/** 搜索表单 Schema */
+const formSchema = computed<VbenFormSchema[]>(() => [
+  {
+    fieldName: 'name',
+    label: '活动名称',
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入活动名称',
+      clearable: true,
+    },
+  },
+  {
+    fieldName: 'status',
+    label: '活动状态',
+    component: 'Select',
+    componentProps: {
+      placeholder: '请选择活动状态',
+      clearable: true,
+      options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+    },
+  },
+]);
+
+/** 表格列配置 */
+const gridColumns = computed<VxeGridProps['columns']>(() => {
+  const columns: VxeGridProps['columns'] = [];
+  if (props.multiple) {
+    columns.push({ type: 'checkbox', width: 55 });
+  } else {
+    columns.push({ type: 'radio', width: 55 });
+  }
+  columns.push(
+    {
+      field: 'id',
+      title: '活动编号',
+      minWidth: 80,
+    },
+    {
+      field: 'name',
+      title: '活动名称',
+      minWidth: 140,
+    },
+    {
+      field: 'activityTime',
+      title: '活动时间',
+      minWidth: 210,
+      formatter: ({ row }) => {
+        return `${formatDate(row.startTime, 'YYYY-MM-DD')} ~ ${formatDate(row.endTime, 'YYYY-MM-DD')}`;
+      },
+    },
+    {
+      field: 'picUrl',
+      title: '商品图片',
+      width: 100,
+      cellRender: {
+        name: 'CellImage',
+      },
+    },
+    {
+      field: 'spuName',
+      title: '商品标题',
+      minWidth: 300,
+    },
+    {
+      field: 'marketPrice',
+      title: '原价',
+      minWidth: 100,
+      formatter: ({ cellValue }) => {
+        return cellValue ? `￥${fenToYuan(cellValue)}` : '-';
+      },
+    },
+    {
+      field: 'products',
+      title: '拼团价',
+      minWidth: 100,
+      formatter: ({ cellValue }) => {
+        return formatCombinationPrice(cellValue);
+      },
+    },
+    {
+      field: 'groupCount',
+      title: '开团组数',
+      minWidth: 100,
+    },
+    {
+      field: 'groupSuccessCount',
+      title: '成团组数',
+      minWidth: 100,
+    },
+    {
+      field: 'recordCount',
+      title: '购买次数',
+      minWidth: 100,
+    },
+    {
+      field: 'status',
+      title: '活动状态',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      width: 180,
+      formatter: 'formatDateTime',
+    },
+  );
+  return columns;
+});
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: formSchema.value,
+    layout: 'horizontal',
+    collapsed: false,
+  },
+  gridOptions: {
+    columns: gridColumns.value,
+    height: 500,
+    border: true,
+    checkboxConfig: {
+      reserve: true,
+    },
+    radioConfig: {
+      reserve: true,
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    proxyConfig: {
+      ajax: {
+        async query({ page }: any, formValues: any) {
+          return await getCombinationActivityPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+  },
+  gridEvents: {
+    radioChange: handleRadioChange,
+  },
+});
+
+const [Modal, modalApi] = useVbenModal({
+  destroyOnClose: true,
+  showConfirmButton: props.multiple, // 特殊：radio 单选情况下，走 handleRadioChange 处理。
+  onConfirm: () => {
+    const selectedRows =
+      gridApi.grid.getCheckboxRecords() as MallCombinationActivityApi.CombinationActivity[];
+    emit('change', selectedRows);
+    modalApi.close();
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      gridApi.grid.clearCheckboxRow();
+      gridApi.grid.clearRadioRow();
+      return;
+    }
+
+    // 1. 先查询数据
+    await gridApi.query();
+    // 2. 设置已选中行
+    const data = modalApi.getData<
+      | MallCombinationActivityApi.CombinationActivity
+      | MallCombinationActivityApi.CombinationActivity[]
+    >();
+    if (props.multiple && Array.isArray(data) && data.length > 0) {
+      setTimeout(() => {
+        const tableData = gridApi.grid.getTableData().fullData;
+        data.forEach((activity) => {
+          const row = tableData.find(
+            (item: MallCombinationActivityApi.CombinationActivity) =>
+              item.id === activity.id,
+          );
+          if (row) {
+            gridApi.grid.setCheckboxRow(row, true);
+          }
+        });
+      }, 300);
+    } else if (!props.multiple && data && !Array.isArray(data)) {
+      setTimeout(() => {
+        const tableData = gridApi.grid.getTableData().fullData;
+        const row = tableData.find(
+          (item: MallCombinationActivityApi.CombinationActivity) =>
+            item.id === data.id,
+        );
+        if (row) {
+          gridApi.grid.setRadioRow(row);
+        }
+      }, 300);
+    }
+  },
+});
+
+/** 对外暴露的方法 */
+defineExpose({
+  open: (
+    data?:
+      | MallCombinationActivityApi.CombinationActivity
+      | MallCombinationActivityApi.CombinationActivity[],
+  ) => {
+    modalApi.setData(data).open();
+  },
+});
+
+/** 初始化分类数据 */
+onMounted(async () => {
+  categoryList.value = await getCategoryList({});
+  categoryTreeList.value = handleTree(categoryList.value, 'id', 'parentId');
+});
+</script>
+
+<template>
+  <Modal title="选择活动" class="w-[950px]">
+    <Grid />
+  </Modal>
+</template>

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

@@ -3,7 +3,7 @@ import { ref, watch } from 'vue';
 
 import { Button, Input } from 'ant-design-vue';
 
-import AppLinkSelectDialog from './app-link-select-dialog.vue';
+import AppLinkSelectDialog from './select-dialog.vue';
 
 /** APP 链接输入框 */
 defineOptions({ name: 'AppLinkInput' });
@@ -56,5 +56,6 @@ watch(
       </Button>
     </template>
   </Input>
+
   <AppLinkSelectDialog ref="dialogRef" @change="handleLinkSelected" />
 </template>

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

@@ -3,11 +3,12 @@ import type { AppLink } from './data';
 
 import { nextTick, ref } from 'vue';
 
+import { useVbenModal } from '@vben/common-ui';
 import { getUrlNumberValue } from '@vben/utils';
 
-import { Button, Form, FormItem, Modal, Tooltip } from 'ant-design-vue';
+import { Button, Form, FormItem, Tooltip } from 'ant-design-vue';
 
-import ProductCategorySelect from '#/views/mall/product/category/components/product-category-select.vue';
+import { ProductCategorySelect } from '#/views/mall/product/category/components/';
 
 import { APP_LINK_GROUP_LIST, APP_LINK_TYPE_ENUM } from './data';
 
@@ -30,21 +31,31 @@ const groupBtnRefs = ref<HTMLButtonElement[]>([]); // 分组引用列表
 const detailSelectDialog = ref<{
   id?: number;
   type?: APP_LINK_TYPE_ENUM;
-  visible: boolean;
 }>({
-  visible: false,
   id: undefined,
   type: undefined,
 }); // 详情选择对话框
 
-const dialogVisible = ref(false);
+const [Modal, modalApi] = useVbenModal({
+  onConfirm() {
+    emit('change', activeAppLink.value.path);
+    emit('appLinkChange', activeAppLink.value);
+    modalApi.close();
+  },
+});
+
+const [DetailSelectModal, detailSelectModalApi] = useVbenModal({
+  onConfirm() {
+    detailSelectModalApi.close();
+  },
+});
 
 defineExpose({ open });
 
 /** 打开弹窗 */
 async function open(link: string) {
   activeAppLink.value.path = link;
-  dialogVisible.value = true;
+  modalApi.open();
   // 滚动到当前的链接
   const group = APP_LINK_GROUP_LIST.find((group) =>
     group.links.some((linkItem) => {
@@ -76,7 +87,7 @@ function handleAppLinkSelected(appLink: AppLink) {
           'id',
           `http://127.0.0.1${activeAppLink.value.path}`,
         ) || undefined;
-      detailSelectDialog.value.visible = true;
+      detailSelectModalApi.open();
       break;
     }
     default: {
@@ -85,13 +96,6 @@ function handleAppLinkSelected(appLink: AppLink) {
   }
 }
 
-/** 处理确认提交 */
-function handleSubmit() {
-  emit('change', activeAppLink.value.path);
-  emit('appLinkChange', activeAppLink.value);
-  dialogVisible.value = false;
-}
-
 /**
  * 处理右侧链接列表滚动
  *
@@ -138,7 +142,7 @@ function scrollToGroupBtn(group: string) {
 
 /** 是否为相同的链接（不比较参数，只比较链接） */
 function isSameLink(link1: string, link2: string) {
-  return link2 ? link1.split('?')[0] === link2.split('?')[0] : false;
+  return link2 ? link1?.split('?')[0] === link2.split('?')[0] : false;
 }
 
 /** 处理详情选择 */
@@ -149,17 +153,12 @@ function handleProductCategorySelected(id: number) {
   activeAppLink.value.path = `${url.pathname}${url.search}`;
 
   // 关闭对话框，并重置 id
-  detailSelectDialog.value.visible = false;
+  detailSelectModalApi.close();
   detailSelectDialog.value.id = undefined;
 }
 </script>
 <template>
-  <Modal
-    v-model:open="dialogVisible"
-    title="选择链接"
-    width="65%"
-    @ok="handleSubmit"
-  >
+  <Modal title="选择链接" class="w-[65%]">
     <div class="flex h-[500px] gap-2">
       <!-- 左侧分组列表 -->
       <div
@@ -218,7 +217,7 @@ function handleProductCategorySelected(id: number) {
     </div>
   </Modal>
 
-  <Modal v-model:open="detailSelectDialog.visible" title="选择分类" width="65%">
+  <DetailSelectModal title="选择分类" class="w-[65%]">
     <Form class="min-h-[200px]">
       <FormItem
         label="选择分类"
@@ -233,11 +232,5 @@ function handleProductCategorySelected(id: number) {
         />
       </FormItem>
     </Form>
-  </Modal>
+  </DetailSelectModal>
 </template>
-
-<style lang="scss" scoped>
-:deep(.ant-btn + .ant-btn) {
-  margin-left: 0 !important;
-}
-</style>

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

@@ -133,11 +133,16 @@ function handleSliderChange(prop: string) {
     </TabPane>
 
     <!-- 每个组件的通用内容 -->
+    <!-- TODO @xingyu：这里的样式，貌似没 ele 版本的好看。 -->
     <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">
+          <FormItem
+            label="组件背景"
+            name="bgType"
+            :label-col="{ style: { width: '109px' } }"
+          >
             <RadioGroup v-model:value="formData.bgType">
               <Radio value="color">纯色</Radio>
               <Radio value="img">图片</Radio>
@@ -146,11 +151,17 @@ function handleSliderChange(prop: string) {
           <FormItem
             label="选择颜色"
             name="bgColor"
+            :label-col="{ style: { width: '109px' } }"
             v-if="formData.bgType === 'color'"
           >
             <ColorInput v-model="formData.bgColor" />
           </FormItem>
-          <FormItem label="上传图片" name="bgImg" v-else>
+          <FormItem
+            label="上传图片"
+            name="bgImg"
+            :label-col="{ style: { width: '109px' } }"
+            v-else
+          >
             <UploadImg
               v-model="formData.bgImg"
               :limit="1"
@@ -164,14 +175,13 @@ function handleSliderChange(prop: string) {
               <FormItem
                 :label="dataRef.label"
                 :name="dataRef.prop"
-                :label-col="
-                  dataRef.children ? { span: 6 } : { span: 5, offset: 1 }
-                "
-                :wrapper-col="dataRef.children ? { span: 18 } : { span: 18 }"
+                :label-col="{
+                  style: { width: dataRef.children ? '80px' : '58px' },
+                }"
                 class="mb-0 w-full"
               >
                 <Row>
-                  <Col :span="12">
+                  <Col :span="11">
                     <Slider
                       v-model:value="
                         formData[dataRef.prop as keyof ComponentStyle]
@@ -179,9 +189,10 @@ function handleSliderChange(prop: string) {
                       :max="100"
                       :min="0"
                       @change="handleSliderChange(dataRef.prop)"
+                      class="mr-[16px]"
                     />
                   </Col>
-                  <Col :span="4">
+                  <Col :span="2">
                     <InputNumber
                       :max="100"
                       :min="0"
@@ -200,23 +211,3 @@ function handleSliderChange(prop: string) {
     </TabPane>
   </Tabs>
 </template>
-
-<style scoped lang="scss">
-:deep(.ant-slider) {
-  margin-right: 16px;
-}
-
-: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

@@ -49,6 +49,7 @@ const emits = defineEmits<{
 type DiyComponentWithStyle = DiyComponent<any> & {
   property: { style?: ComponentStyle };
 };
+
 /** 组件样式 */
 const style = computed(() => {
   const componentStyle = props.component.property.style;
@@ -108,6 +109,8 @@ const handleDeleteComponent = () => {
         class="component-toolbar"
         v-if="showToolbar && component.name && active"
       >
+        <!-- TODO @xingyu：按钮少的时候，会存在遮住的情况； -->
+        <!-- TODO @xingyu：貌似中间的选中框框，没全部框柱。上面多了点，下面少了点。 -->
         <VerticalButtonGroup size="small">
           <Button
             :disabled="!canMoveUp"

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

@@ -19,6 +19,7 @@ const props = defineProps<{
   list: DiyComponentLibrary[];
 }>();
 
+// TODO @xingyu：要不要换成 reactive，和 ele 一致
 const groups = ref<any[]>([]); // 组件分组
 const extendGroups = ref<string[]>([]); // 展开的折叠面板
 
@@ -99,4 +100,5 @@ function handleCloneComponent(component: DiyComponent<any>) {
       </Collapse.Panel>
     </Collapse>
   </div>
+  <!-- TODO @xingyu：ele 里面有一些 style，看看是不是都迁移完了；特别是 drag-area 是全局样式； -->
 </template>

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

@@ -1,53 +0,0 @@
-<script setup lang="ts">
-import type { CarouselProperty } from './config';
-
-import { ref } from 'vue';
-
-import { IconifyIcon } from '@vben/icons';
-
-import { Carousel, Image } from 'ant-design-vue';
-
-/** 轮播图 */
-defineOptions({ name: 'Carousel' });
-
-defineProps<{ property: CarouselProperty }>();
-
-const currentIndex = ref(0);
-const handleIndexChange = (index: number) => {
-  currentIndex.value = index + 1;
-};
-</script>
-<template>
-  <div>
-    <!-- 无图片 -->
-    <div
-      class="bg-card flex h-64 items-center justify-center"
-      v-if="property.items.length === 0"
-    >
-      <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>

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

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import type { CarouselProperty } from './config';
+
+import { ref } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { Carousel, Image } from 'ant-design-vue';
+
+/** 轮播图 */
+defineOptions({ name: 'Carousel' });
+
+defineProps<{ property: CarouselProperty }>();
+
+const currentIndex = ref(0); // 当前索引
+
+/** 处理索引变化 */
+const handleIndexChange = (index: number) => {
+  currentIndex.value = index + 1;
+};
+</script>
+<template>
+  <!-- 无图片 -->
+  <div
+    class="flex items-center justify-center bg-gray-300"
+    :style="{
+      height: property.items.length === 0 ? '250px' : `${property.height}px`,
+    }"
+    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"
+      :style="{ height: `${property.height}px` }"
+    >
+      <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-[10px] right-[10px] rounded-xl bg-black px-[8px] py-[2px] text-[10px] text-white opacity-40"
+    >
+      {{ currentIndex }} / {{ property.items.length }}
+    </div>
+  </div>
+</template>

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

@@ -7,6 +7,7 @@ import { useVModel } from '@vueuse/core';
 import {
   Form,
   FormItem,
+  InputNumber,
   Radio,
   RadioButton,
   RadioGroup,
@@ -21,51 +22,61 @@ import { AppLinkInput, Draggable } from '#/views/mall/promotion/components';
 
 import ComponentContainerProperty from '../../component-container-property.vue';
 
-// 轮播图属性面板
+/** 轮播图属性面板 */
 defineOptions({ name: 'CarouselProperty' });
 
 const props = defineProps<{ modelValue: CarouselProperty }>();
+
 const emit = defineEmits(['update:modelValue']);
+
 const formData = useVModel(props, 'modelValue', emit);
 </script>
 
 <template>
   <ComponentContainerProperty v-model="formData.style">
-    <Form label-width="80px" :model="formData">
+    <Form
+      :model="formData"
+      :label-col="{ style: { width: '80px' } }"
+      label-align="right"
+    >
       <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">
+        <FormItem label="样式">
+          <RadioGroup v-model:value="formData.type">
+            <Tooltip class="item" title="默认" placement="bottom">
               <RadioButton value="default">
                 <IconifyIcon icon="system-uicons:carousel" class="size-6" />
               </RadioButton>
             </Tooltip>
-            <Tooltip class="item" content="卡片" placement="bottom">
+            <Tooltip class="item" title="卡片" 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">
+        <FormItem label="高度">
+          <InputNumber
+            v-model:value="formData.height"
+            class="mr-[10px] !w-1/2"
+          />
+          px
+        </FormItem>
+        <FormItem label="指示器">
+          <RadioGroup v-model:value="formData.indicator">
             <Radio value="dot">小圆点</Radio>
             <Radio value="number">数字</Radio>
           </RadioGroup>
         </FormItem>
-        <FormItem label="是否轮播" prop="autoplay">
-          <Switch v-model="formData.autoplay" />
+        <FormItem label="是否轮播">
+          <Switch v-model:checked="formData.autoplay" />
         </FormItem>
-        <FormItem label="播放间隔" prop="interval" v-if="formData.autoplay">
+        <FormItem label="播放间隔" v-if="formData.autoplay">
           <Slider
-            v-model="formData.interval"
+            v-model:value="formData.interval"
             :max="10"
             :min="0.5"
             :step="0.5"
-            show-input
-            input-size="small"
-            :show-input-controls="false"
           />
           <p class="text-info">单位：秒</p>
         </FormItem>
@@ -74,18 +85,13 @@ const formData = useVModel(props, 'modelValue', emit);
       <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 }">
-            <FormItem label="类型" prop="type" class="mb-2" label-width="40px">
-              <RadioGroup v-model="element.type">
+            <FormItem label="类型" name="type">
+              <RadioGroup v-model:value="element.type">
                 <Radio value="img">图片</Radio>
                 <Radio value="video">视频</Radio>
               </RadioGroup>
             </FormItem>
-            <FormItem
-              label="图片"
-              class="mb-2"
-              label-width="40px"
-              v-if="element.type === 'img'"
-            >
+            <FormItem label="图片" v-if="element.type === 'img'">
               <UploadImg
                 v-model="element.imgUrl"
                 draggable="false"
@@ -96,7 +102,7 @@ const formData = useVModel(props, 'modelValue', emit);
               />
             </FormItem>
             <template v-else>
-              <FormItem label="封面" class="mb-2" label-width="40px">
+              <FormItem label="封面">
                 <UploadImg
                   v-model="element.imgUrl"
                   draggable="false"
@@ -106,7 +112,7 @@ const formData = useVModel(props, 'modelValue', emit);
                   class="min-w-20"
                 />
               </FormItem>
-              <FormItem label="视频" class="mb-2" label-width="40px">
+              <FormItem label="视频">
                 <UploadFile
                   v-model="element.videoUrl"
                   :file-type="['mp4']"
@@ -116,7 +122,7 @@ const formData = useVModel(props, 'modelValue', emit);
                 />
               </FormItem>
             </template>
-            <FormItem label="链接" class="mb-2" label-width="40px">
+            <FormItem label="链接">
               <AppLinkInput v-model="element.url" />
             </FormItem>
           </template>

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

@@ -1,4 +1,89 @@
-// 导出所有优惠券相关组件
-export { CouponDiscount } from './coupon-discount';
-export { CouponDiscountDesc } from './coupon-discount-desc';
-export { CouponValidTerm } from './coupon-validTerm';
+/*  eslint-disable vue/one-component-per-file */
+// TODO @YunaiV eslint检测了
+import type { MallCouponTemplateApi } from '#/api/mall/promotion/coupon/couponTemplate';
+
+import { defineComponent } from 'vue';
+
+import {
+  CouponTemplateValidityTypeEnum,
+  PromotionDiscountTypeEnum,
+} from '@vben/constants';
+import { floatToFixed2, formatDate } from '@vben/utils';
+
+/** 有效期 */
+export const CouponValidTerm = defineComponent({
+  name: 'CouponValidTerm',
+  props: {
+    coupon: {
+      type: Object as () => MallCouponTemplateApi.CouponTemplate,
+      required: true,
+    },
+  },
+  setup(props) {
+    const coupon = props.coupon as MallCouponTemplateApi.CouponTemplate;
+    const text =
+      coupon.validityType === CouponTemplateValidityTypeEnum.DATE.type
+        ? `有效期：${formatDate(coupon.validStartTime, 'YYYY-MM-DD')} 至 ${formatDate(
+            coupon.validEndTime,
+            'YYYY-MM-DD',
+          )}`
+        : `领取后第 ${coupon.fixedStartTerm} - ${coupon.fixedEndTerm} 天内可用`;
+    return () => <div>{text}</div>;
+  },
+});
+
+/** 优惠值 */
+export const CouponDiscount = defineComponent({
+  name: 'CouponDiscount',
+  props: {
+    coupon: {
+      type: Object as () => MallCouponTemplateApi.CouponTemplate,
+      required: true,
+    },
+  },
+  setup(props) {
+    const coupon = props.coupon as MallCouponTemplateApi.CouponTemplate;
+    // 折扣
+    let value = `${(coupon.discountPercent ?? 0) / 10}`;
+    let suffix = ' 折';
+    // 满减
+    if (coupon.discountType === PromotionDiscountTypeEnum.PRICE.type) {
+      value = floatToFixed2(coupon.discountPrice);
+      suffix = ' 元';
+    }
+    return () => (
+      <div>
+        <span class={'text-20px font-bold'}>{value}</span>
+        <span>{suffix}</span>
+      </div>
+    );
+  },
+});
+
+/** 优惠描述 */
+export const CouponDiscountDesc = defineComponent({
+  name: 'CouponDiscountDesc',
+  props: {
+    coupon: {
+      type: Object as () => MallCouponTemplateApi.CouponTemplate,
+      required: true,
+    },
+  },
+  setup(props) {
+    const coupon = props.coupon as MallCouponTemplateApi.CouponTemplate;
+    // 使用条件
+    const useCondition =
+      coupon.usePrice > 0 ? `满${floatToFixed2(coupon.usePrice)}元，` : '';
+    // 优惠描述
+    const discountDesc =
+      coupon.discountType === PromotionDiscountTypeEnum.PRICE.type
+        ? `减${floatToFixed2(coupon.discountPrice)}元`
+        : `打${(coupon.discountPercent ?? 0) / 10}折`;
+    return () => (
+      <div>
+        <span>{useCondition}</span>
+        <span>{discountDesc}</span>
+      </div>
+    );
+  },
+});

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

@@ -1,34 +0,0 @@
-import type { MallCouponTemplateApi } from '#/api/mall/promotion/coupon/couponTemplate';
-
-import { defineComponent } from 'vue';
-
-import { PromotionDiscountTypeEnum } from '@vben/constants';
-import { floatToFixed2 } from '@vben/utils';
-
-// 优惠描述
-export const CouponDiscountDesc = defineComponent({
-  name: 'CouponDiscountDesc',
-  props: {
-    coupon: {
-      type: Object as () => MallCouponTemplateApi.CouponTemplate,
-      required: true,
-    },
-  },
-  setup(props) {
-    const coupon = props.coupon as MallCouponTemplateApi.CouponTemplate;
-    // 使用条件
-    const useCondition =
-      coupon.usePrice > 0 ? `满${floatToFixed2(coupon.usePrice)}元，` : '';
-    // 优惠描述
-    const discountDesc =
-      coupon.discountType === PromotionDiscountTypeEnum.PRICE.type
-        ? `减${floatToFixed2(coupon.discountPrice)}元`
-        : `打${(coupon.discountPercent ?? 0) / 10}折`;
-    return () => (
-      <div>
-        <span>{useCondition}</span>
-        <span>{discountDesc}</span>
-      </div>
-    );
-  },
-});

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

@@ -1,34 +0,0 @@
-import type { MallCouponTemplateApi } from '#/api/mall/promotion/coupon/couponTemplate';
-
-import { defineComponent } from 'vue';
-
-import { PromotionDiscountTypeEnum } from '@vben/constants';
-import { floatToFixed2 } from '@vben/utils';
-
-// 优惠值
-export const CouponDiscount = defineComponent({
-  name: 'CouponDiscount',
-  props: {
-    coupon: {
-      type: Object as () => MallCouponTemplateApi.CouponTemplate,
-      required: true,
-    },
-  },
-  setup(props) {
-    const coupon = props.coupon as MallCouponTemplateApi.CouponTemplate;
-    // 折扣
-    let value = `${(coupon.discountPercent ?? 0) / 10}`;
-    let suffix = ' 折';
-    // 满减
-    if (coupon.discountType === PromotionDiscountTypeEnum.PRICE.type) {
-      value = floatToFixed2(coupon.discountPrice);
-      suffix = ' 元';
-    }
-    return () => (
-      <div>
-        <span class={'text-20px font-bold'}>{value}</span>
-        <span>{suffix}</span>
-      </div>
-    );
-  },
-});

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

@@ -1,28 +0,0 @@
-import type { MallCouponTemplateApi } from '#/api/mall/promotion/coupon/couponTemplate';
-
-import { defineComponent } from 'vue';
-
-import { CouponTemplateValidityTypeEnum } from '@vben/constants';
-import { formatDate } from '@vben/utils';
-
-// 有效期
-export const CouponValidTerm = defineComponent({
-  name: 'CouponValidTerm',
-  props: {
-    coupon: {
-      type: Object as () => MallCouponTemplateApi.CouponTemplate,
-      required: true,
-    },
-  },
-  setup(props) {
-    const coupon = props.coupon as MallCouponTemplateApi.CouponTemplate;
-    const text =
-      coupon.validityType === CouponTemplateValidityTypeEnum.DATE.type
-        ? `有效期：${formatDate(coupon.validStartTime, 'YYYY-MM-DD')} 至 ${formatDate(
-            coupon.validEndTime,
-            'YYYY-MM-DD',
-          )}`
-        : `领取后第 ${coupon.fixedStartTerm} - ${coupon.fixedEndTerm} 天内可用`;
-    return () => <div>{text}</div>;
-  },
-});

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

@@ -13,12 +13,19 @@ import {
   CouponValidTerm,
 } from './component';
 
-/** 商品卡片 */
+/** 优惠劵卡片 */
 defineOptions({ name: 'CouponCard' });
-// 定义属性
+
+/** 定义属性 */
 const props = defineProps<{ property: CouponCardProperty }>();
-// 商品列表
-const couponList = ref<MallCouponTemplateApi.CouponTemplate[]>([]);
+
+const couponList = ref<MallCouponTemplateApi.CouponTemplate[]>([]); // 优惠劵列表
+const phoneWidth = ref(375); // 手机宽度
+const containerRef = ref(); // 容器引用
+const scrollbarWidth = ref('100%'); // 滚动条宽度
+const couponWidth = ref(375); // 优惠券宽度
+
+/** 监听优惠券 ID 变化，加载优惠券列表 */
 watch(
   () => props.property.couponIds,
   async () => {
@@ -32,15 +39,7 @@ watch(
   },
 );
 
-// 手机宽度
-const phoneWidth = ref(384);
-// 容器
-const containerRef = ref();
-// 滚动条宽度
-const scrollbarWidth = ref('100%');
-// 优惠券的宽度
-const couponWidth = ref(384);
-// 计算布局参数
+/** 计算布局参数 */
 watch(
   () => [props.property, phoneWidth, couponList.value.length],
   () => {
@@ -56,13 +55,14 @@ watch(
   },
   { immediate: true, deep: true },
 );
+
+/** 初始化 */
 onMounted(() => {
-  // 提取手机宽度
-  phoneWidth.value = containerRef.value?.wrapRef?.offsetWidth || 384;
+  phoneWidth.value = containerRef.value?.offsetWidth || 375;
 });
 </script>
 <template>
-  <div class="z-10 min-h-8" wrap-class="w-full" ref="containerRef">
+  <div class="z-10 min-h-8 overflow-x-auto" ref="containerRef">
     <div
       class="flex flex-row text-xs"
       :style="{
@@ -82,17 +82,14 @@ onMounted(() => {
         v-for="(coupon, index) in couponList"
         :key="index"
       >
-        <!-- 布局1：1列-->
+        <!-- 布局 1：1 列-->
         <div
           v-if="property.columns === 1"
           class="ml-4 flex flex-row justify-between p-2"
         >
           <div class="flex flex-col justify-evenly gap-1">
-            <!-- 优惠值 -->
             <CouponDiscount :coupon="coupon" />
-            <!-- 优惠描述 -->
             <CouponDiscountDesc :coupon="coupon" />
-            <!-- 有效期 -->
             <CouponValidTerm :coupon="coupon" />
           </div>
           <div class="flex flex-col justify-evenly">
@@ -107,17 +104,14 @@ onMounted(() => {
             </div>
           </div>
         </div>
-        <!-- 布局2：2列-->
+        <!-- 布局 2：2 列-->
         <div
           v-else-if="property.columns === 2"
           class="ml-4 flex flex-row justify-between p-2"
         >
           <div class="flex flex-col justify-evenly gap-1">
-            <!-- 优惠值 -->
             <CouponDiscount :coupon="coupon" />
-            <!-- 优惠描述 -->
             <CouponDiscountDesc :coupon="coupon" />
-            <!-- 领取说明 -->
             <div v-if="coupon.totalCount >= 0">
               仅剩：{{ coupon.totalCount - coupon.takeCount }}张
             </div>
@@ -135,11 +129,9 @@ onMounted(() => {
             </div>
           </div>
         </div>
-        <!-- 布局3：3列-->
+        <!-- 布局 3：3 列-->
         <div v-else class="flex flex-col items-center justify-around gap-1 p-1">
-          <!-- 优惠值 -->
           <CouponDiscount :coupon="coupon" />
-          <!-- 优惠描述 -->
           <CouponDiscountDesc :coupon="coupon" />
           <div
             class="rounded-full px-2 py-0.5"

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

@@ -25,7 +25,7 @@ import {
   Typography,
 } from 'ant-design-vue';
 
-import * as CouponTemplateApi from '#/api/mall/promotion/coupon/couponTemplate';
+import { getCouponTemplateList } 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';
@@ -66,9 +66,7 @@ watch(
   () => formData.value.couponIds,
   async () => {
     if (formData.value.couponIds?.length > 0) {
-      couponList.value = await CouponTemplateApi.getCouponTemplateList(
-        formData.value.couponIds,
-      );
+      couponList.value = await getCouponTemplateList(formData.value.couponIds);
     }
   },
   {
@@ -103,7 +101,7 @@ watch(
               >
                 减{{ floatToFixed2(coupon.discountPrice) }}元
               </span>
-              <span v-else> 打{{ (coupon.discountPercent ?? 0) / 10 }}折 </span>
+              <span v-else> 打{{ coupon.discountPercent }}折 </span>
             </Typography.Text>
           </Typography>
         </div>

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

@@ -5,23 +5,20 @@ import { ref } from 'vue';
 
 import { IconifyIcon } from '@vben/icons';
 
-import { Button, Image, message } from 'ant-design-vue';
+import { Button, Image } from 'ant-design-vue';
 
 /** 悬浮按钮 */
 defineOptions({ name: 'FloatingActionButton' });
-// 定义属性
+
+/** 定义属性 */
 defineProps<{ property: FloatingActionButtonProperty }>();
 
-// 是否展开
-const expanded = ref(false);
-// 处理展开/折叠
-const handleToggleFab = () => {
-  expanded.value = !expanded.value;
-};
+const expanded = ref(false); // 是否展开
 
-const handleActive = (index: number) => {
-  message.success(`点击了${index}`);
-};
+/** 处理展开/折叠 */
+function handleToggleFab() {
+  expanded.value = !expanded.value;
+}
 </script>
 <template>
   <div
@@ -38,9 +35,8 @@ const handleActive = (index: number) => {
         v-for="(item, index) in property.list"
         :key="index"
         class="flex flex-col items-center"
-        @click="handleActive(index)"
       >
-        <Image :src="item.imgUrl" fit="contain" class="h-7 w-7">
+        <Image :src="item.imgUrl" :width="28" :height="28" :preview="false">
           <template #error>
             <div class="flex h-full w-full items-center justify-center">
               <IconifyIcon
@@ -61,36 +57,18 @@ const handleActive = (index: number) => {
       </div>
     </template>
     <!-- todo: @owen 使用APP主题色 -->
-    <Button type="primary" size="large" circle @click="handleToggleFab">
+    <Button type="primary" size="large" shape="circle" @click="handleToggleFab">
       <IconifyIcon
         icon="lucide:plus"
-        class="fab-icon"
-        :class="[{ active: expanded }]"
+        class="transition-transform duration-300"
+        :class="expanded ? 'rotate-[135deg]' : 'rotate-0'"
       />
     </Button>
   </div>
   <!-- 模态背景：展开时显示，点击后折叠 -->
-  <div v-if="expanded" class="modal-bg" @click="handleToggleFab"></div>
+  <div
+    v-if="expanded"
+    class="absolute left-[calc(50%-375px/2)] top-0 z-[11] h-full w-[375px] bg-black/40"
+    @click="handleToggleFab"
+  ></div>
 </template>
-
-<style scoped lang="scss">
-/* 模态背景 */
-.modal-bg {
-  position: absolute;
-  top: 0;
-  left: calc(50% - 384px / 2);
-  z-index: 11;
-  width: 384px;
-  height: 100%;
-  background-color: rgb(0 0 0 / 40%);
-}
-
-.fab-icon {
-  transform: rotate(0deg);
-  transition: transform 0.3s;
-
-  &.active {
-    transform: rotate(135deg);
-  }
-}
-</style>

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

@@ -2,10 +2,9 @@ import type { StyleValue } from 'vue';
 
 import type { HotZoneItemProperty } from '../../config';
 
-// 热区的最小宽高
-export const HOT_ZONE_MIN_SIZE = 100;
+export const HOT_ZONE_MIN_SIZE = 100; // 热区的最小宽高
 
-// 控制的类型
+/** 控制的类型 */
 export enum CONTROL_TYPE_ENUM {
   LEFT,
   TOP,
@@ -13,14 +12,14 @@ export enum CONTROL_TYPE_ENUM {
   HEIGHT,
 }
 
-// 定义热区的控制点
+/** 定义热区的控制点 */
 export interface ControlDot {
   position: string;
   types: CONTROL_TYPE_ENUM[];
   style: StyleValue;
 }
 
-// 热区的8个控制点
+/** 热区的 8 个控制点 */
 export const CONTROL_DOT_LIST = [
   {
     position: '左上角',
@@ -98,10 +97,10 @@ export const CONTROL_DOT_LIST = [
 ] as ControlDot[];
 
 // region 热区的缩放
-// 热区的缩放比例
-export const HOT_ZONE_SCALE_RATE = 2;
-// 缩小：缩回适合手机屏幕的大小
-export const zoomOut = (list?: HotZoneItemProperty[]) => {
+export const HOT_ZONE_SCALE_RATE = 2; // 热区的缩放比例
+
+/** 缩小：缩回适合手机屏幕的大小 */
+export function zoomOut(list?: HotZoneItemProperty[]) {
   return (
     list?.map((hotZone) => ({
       ...hotZone,
@@ -111,9 +110,10 @@ export const zoomOut = (list?: HotZoneItemProperty[]) => {
       height: (hotZone.height /= HOT_ZONE_SCALE_RATE),
     })) || []
   );
-};
-// 放大：作用是为了方便在电脑屏幕上编辑
-export const zoomIn = (list?: HotZoneItemProperty[]) => {
+}
+
+/** 放大：作用是为了方便在电脑屏幕上编辑 */
+export function zoomIn(list?: HotZoneItemProperty[]) {
   return (
     list?.map((hotZone) => ({
       ...hotZone,
@@ -123,7 +123,8 @@ export const zoomIn = (list?: HotZoneItemProperty[]) => {
       height: (hotZone.height *= HOT_ZONE_SCALE_RATE),
     })) || []
   );
-};
+}
+
 // endregion
 
 /**

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

@@ -11,7 +11,7 @@ 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 { AppLinkSelectDialog } from '#/views/mall/promotion/components';
 
 import {
   CONTROL_DOT_LIST,
@@ -213,8 +213,9 @@ const handleAppLinkChange = (appLink: AppLink) => {
         </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"
+          class="absolute right-0 top-0 hidden cursor-pointer rounded-bl-[80%] p-[2px_2px_6px_6px] text-right text-white group-hover:block"
           :style="{ backgroundColor: 'hsl(var(--primary))' }"
+          :size="14"
           @click="handleRemove(item)"
         />
 
@@ -230,9 +231,7 @@ const handleAppLinkChange = (appLink: AppLink) => {
     </div>
     <template #prepend-footer>
       <Button @click="handleAdd" type="primary" ghost>
-        <template #icon>
-          <IconifyIcon icon="lucide:plus" />
-        </template>
+        <IconifyIcon icon="lucide:plus" class="mr-5px" />
         添加热区
       </Button>
     </template>

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

@@ -2,8 +2,10 @@
 import type { HotZoneProperty } from './config';
 
 import { Image } from 'ant-design-vue';
+
 /** 热区 */
 defineOptions({ name: 'HotZone' });
+
 const props = defineProps<{ property: HotZoneProperty }>();
 </script>
 
@@ -12,21 +14,23 @@ const props = defineProps<{ property: HotZoneProperty }>();
     <Image
       :src="props.property.imgUrl"
       class="pointer-events-none h-full w-full select-none"
+      :preview="false"
     />
     <div
       v-for="(item, index) in props.property.list"
       :key="index"
-      class="bg-primary-700 absolute z-10 flex cursor-move items-center justify-center border text-sm opacity-80"
+      class="absolute z-10 flex cursor-move items-center justify-center border text-sm opacity-80"
       :style="{
         width: `${item.width}px`,
         height: `${item.height}px`,
         top: `${item.top}px`,
         left: `${item.left}px`,
+        color: 'hsl(var(--primary))',
+        background: 'color-mix(in srgb, hsl(var(--primary)) 30%, transparent)',
+        borderColor: 'hsl(var(--primary))',
       }"
     >
-      <p class="text-primary">
-        {{ item.name }}
-      </p>
+      {{ item.name }}
     </div>
   </div>
 </template>

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

@@ -15,42 +15,46 @@ import HotZoneEditDialog from './components/hot-zone-edit-dialog/index.vue';
 defineOptions({ name: 'HotZoneProperty' });
 
 const props = defineProps<{ modelValue: HotZoneProperty }>();
+
 const emit = defineEmits(['update:modelValue']);
+
 const formData = useVModel(props, 'modelValue', emit);
 
-// 热区编辑对话框
-const editDialogRef = ref();
-// 打开热区编辑对话框
-const handleOpenEditDialog = () => {
+const editDialogRef = ref(); // 热区编辑对话框
+
+/** 打开热区编辑对话框 */
+function handleOpenEditDialog() {
   editDialogRef.value.open();
-};
+}
 </script>
 
 <template>
   <ComponentContainerProperty v-model="formData.style">
     <!-- 表单 -->
     <Form
-      :label-col="{ span: 6 }"
-      :wrapper-col="{ span: 18 }"
+      :label-col="{ style: { width: '80px' } }"
       :model="formData"
       class="mt-2"
     >
-      <FormItem label="上传图片" prop="imgUrl">
+      <FormItem label="上传图片" name="imgUrl">
         <UploadImg
           v-model="formData.imgUrl"
           height="50px"
           width="auto"
-          class="min-w-20"
+          class="min-w-[80px]"
           :show-description="false"
-        />
+        >
+          <!-- TODO @芋艿：这里不提示；是不是组件得封装下；-->
+          <template #tip> 推荐宽度 750 </template>
+        </UploadImg>
       </FormItem>
-      <p class="text-center text-sm text-gray-500">推荐宽度 750</p>
     </Form>
 
-    <Button type="primary" class="mt-4 w-full" @click="handleOpenEditDialog">
+    <Button type="primary" ghost class="w-full" @click="handleOpenEditDialog">
       设置热区
     </Button>
   </ComponentContainerProperty>
+
   <!-- 热区编辑对话框 -->
   <HotZoneEditDialog
     ref="editDialogRef"
@@ -58,26 +62,3 @@ const handleOpenEditDialog = () => {
     :img-url="formData.imgUrl"
   />
 </template>
-
-<style scoped lang="scss">
-.hot-zone {
-  position: absolute;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 12px;
-  color: hsl(var(--text-color));
-  cursor: move;
-  background: color-mix(in srgb, hsl(var(--primary)) 30%, transparent);
-  border: 1px solid hsl(var(--primary));
-
-  /* 控制点 */
-  .ctrl-dot {
-    position: absolute;
-    width: 4px;
-    height: 4px;
-    background-color: #fff;
-    border-radius: 50%;
-  }
-}
-</style>

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

@@ -11,7 +11,6 @@ defineOptions({ name: 'ImageBar' });
 defineProps<{ property: ImageBarProperty }>();
 </script>
 <template>
-  <!-- 无图片 -->
   <div
     class="bg-card flex h-12 items-center justify-center"
     v-if="!property.imgUrl"

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

@@ -9,11 +9,13 @@ import { AppLinkInput } from '#/views/mall/promotion/components';
 
 import ComponentContainerProperty from '../../component-container-property.vue';
 
-// 图片展示属性面板
+/** 图片展示属性面板 */
 defineOptions({ name: 'ImageBarProperty' });
 
 const props = defineProps<{ modelValue: ImageBarProperty }>();
+
 const emit = defineEmits(['update:modelValue']);
+
 const formData = useVModel(props, 'modelValue', emit);
 </script>
 
@@ -24,7 +26,7 @@ const formData = useVModel(props, 'modelValue', emit);
       :wrapper-col="{ span: 18 }"
       :model="formData"
     >
-      <FormItem label="上传图片" prop="imgUrl">
+      <FormItem label="上传图片" name="imgUrl">
         <UploadImg
           v-model="formData.imgUrl"
           draggable="false"
@@ -32,9 +34,12 @@ const formData = useVModel(props, 'modelValue', emit);
           width="100%"
           class="min-w-20"
           :show-description="false"
-        />
+        >
+          <!-- TODO @芋艿：这里不提示；是不是组件得封装下；-->
+          <template #tip> 建议宽度750 </template>
+        </UploadImg>
       </FormItem>
-      <FormItem label="链接" prop="url">
+      <FormItem label="链接" name="url">
         <AppLinkInput v-model="formData.url" />
       </FormItem>
     </Form>

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

@@ -9,9 +9,11 @@ import { Image } from 'ant-design-vue';
 
 /** 广告魔方 */
 defineOptions({ name: 'MagicCube' });
+
 const props = defineProps<{ property: MagicCubeProperty }>();
-// 一个方块的大小
-const CUBE_SIZE = 93.75;
+
+const CUBE_SIZE = 93.75; // 一个方块的大小
+
 /**
  * 计算方块的行数
  * 行数用于计算魔方的总体高度，存在以下情况：
@@ -53,9 +55,9 @@ const rowCount = computed(() => {
       }"
     >
       <Image
-        class="h-full w-full"
-        fit="cover"
+        class="h-full w-full object-cover"
         :src="item.imgUrl"
+        :preview="false"
         :style="{
           borderTopLeftRadius: `${property.borderRadiusTop}px`,
           borderTopRightRadius: `${property.borderRadiusTop}px`,

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

@@ -33,30 +33,36 @@ const handleHotAreaSelected = (_: any, index: number) => {
 
 <template>
   <ComponentContainerProperty v-model="formData.style">
-    <Form :model="formData" class="mt-2">
+    <Form
+      :model="formData"
+      :label-col="{ style: { width: '80px' } }"
+      label-align="right"
+    >
       <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>
+      <div class="flex flex-col gap-2 rounded-md p-4 shadow-lg">
+        <p class="text-xs text-gray-500">每格尺寸 187 * 187</p>
+        <MagicCubeEditor
+          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>
-      </template>
+      </div>
       <FormItem label="上圆角" name="borderRadiusTop">
         <Slider v-model:value="formData.borderRadiusTop" :max="100" :min="0" />
       </FormItem>

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

@@ -5,6 +5,7 @@ import { Image } from 'ant-design-vue';
 
 /** 宫格导航 */
 defineOptions({ name: 'MenuGrid' });
+
 defineProps<{ property: MenuGridProperty }>();
 </script>
 

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

@@ -9,6 +9,7 @@ import {
   AppLinkInput,
   ColorInput,
   Draggable,
+  InputWithColor,
 } from '#/views/mall/promotion/components';
 
 import ComponentContainerProperty from '../../component-container-property.vue';
@@ -18,21 +19,26 @@ import { EMPTY_MENU_GRID_ITEM_PROPERTY } from './config';
 defineOptions({ name: 'MenuGridProperty' });
 
 const props = defineProps<{ modelValue: MenuGridProperty }>();
+
 const emit = defineEmits(['update:modelValue']);
+
 const formData = useVModel(props, 'modelValue', emit);
 </script>
 
 <template>
   <ComponentContainerProperty v-model="formData.style">
     <!-- 表单 -->
-    <Form label-width="80px" :model="formData" class="mt-2">
-      <FormItem label="每行数量" prop="column">
-        <RadioGroup v-model="formData.column">
+    <Form
+      :label-col="{ style: { width: '80px' } }"
+      :model="formData"
+      class="mt-2"
+    >
+      <FormItem label="每行数量" name="column">
+        <RadioGroup v-model:value="formData.column">
           <Radio :value="3">3个</Radio>
           <Radio :value="4">4个</Radio>
         </RadioGroup>
       </FormItem>
-
       <p class="text-base font-bold">菜单设置</p>
       <div class="flex flex-col gap-2 rounded-md p-4 shadow-lg">
         <Draggable
@@ -40,42 +46,43 @@ const formData = useVModel(props, 'modelValue', emit);
           :empty-item="EMPTY_MENU_GRID_ITEM_PROPERTY"
         >
           <template #default="{ element }">
-            <FormItem label="图标" prop="iconUrl">
+            <FormItem label="图标" name="iconUrl">
               <UploadImg
                 v-model="element.iconUrl"
                 height="80px"
                 width="80px"
                 :show-description="false"
               >
-                <template #tip> 建议尺寸：44 * 44 </template>
+                <!-- TODO @芋艿：这里不提示；是不是组件得封装下；-->
+                <template #tip> 建议尺寸：44 * 44</template>
               </UploadImg>
             </FormItem>
-            <FormItem label="标题" prop="title">
-              <ColorInput
+            <FormItem label="标题" name="title">
+              <InputWithColor
                 v-model="element.title"
                 v-model:color="element.titleColor"
               />
             </FormItem>
-            <FormItem label="副标题" prop="subtitle">
-              <ColorInput
+            <FormItem label="副标题" name="subtitle">
+              <InputWithColor
                 v-model="element.subtitle"
                 v-model:color="element.subtitleColor"
               />
             </FormItem>
-            <FormItem label="链接" prop="url">
+            <FormItem label="链接" name="url">
               <AppLinkInput v-model="element.url" />
             </FormItem>
-            <FormItem label="显示角标" prop="badge.show">
-              <Switch v-model="element.badge.show" />
+            <FormItem label="显示角标" name="badge.show">
+              <Switch v-model:checked="element.badge.show" />
             </FormItem>
             <template v-if="element.badge.show">
-              <FormItem label="角标内容" prop="badge.text">
-                <ColorInput
+              <FormItem label="角标内容" name="badge.text">
+                <InputWithColor
                   v-model="element.badge.text"
                   v-model:color="element.badge.textColor"
                 />
               </FormItem>
-              <FormItem label="背景颜色" prop="badge.bgColor">
+              <FormItem label="背景颜色" name="badge.bgColor">
                 <ColorInput v-model="element.badge.bgColor" />
               </FormItem>
             </template>

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

@@ -7,6 +7,7 @@ import { Image } from 'ant-design-vue';
 
 /** 列表导航 */
 defineOptions({ name: 'MenuList' });
+
 defineProps<{ property: MenuListProperty }>();
 </script>
 
@@ -18,7 +19,12 @@ defineProps<{ property: MenuListProperty }>();
       class="flex h-10 flex-row items-center justify-between gap-1 border-t border-gray-200 px-3 first:border-t-0"
     >
       <div class="flex flex-1 flex-row items-center gap-2">
-        <Image v-if="item.iconUrl" class="h-4 w-4" :src="item.iconUrl" />
+        <Image
+          v-if="item.iconUrl"
+          class="h-4 w-4"
+          :src="item.iconUrl"
+          :preview="false"
+        />
         <span class="text-base" :style="{ color: item.titleColor }">
           {{ item.title }}
         </span>
@@ -27,7 +33,7 @@ defineProps<{ property: MenuListProperty }>();
         <span class="text-xs" :style="{ color: item.subtitleColor }">
           {{ item.subtitle }}
         </span>
-        <IconifyIcon icon="lucide:arrow-right" class="size-4" />
+        <IconifyIcon icon="ep:arrow-right" color="#000" :size="16" />
       </div>
     </div>
   </div>

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

@@ -27,7 +27,12 @@ const formData = useVModel(props, 'modelValue', emit);
 <template>
   <ComponentContainerProperty v-model="formData.style">
     <p class="text-base font-bold">菜单设置</p>
-    <Form :model="formData" class="mt-2">
+    <p class="text-xs text-gray-500">拖动左侧的小圆点可以调整顺序</p>
+    <Form
+      :label-col="{ style: { width: '60px' } }"
+      :model="formData"
+      class="mt-2"
+    >
       <Draggable
         v-model="formData.list"
         :empty-item="EMPTY_MENU_LIST_ITEM_PROPERTY"
@@ -39,8 +44,10 @@ const formData = useVModel(props, 'modelValue', emit);
               height="80px"
               width="80px"
               :show-description="false"
-            />
-            <p class="text-sm text-gray-500">建议尺寸：44 * 44</p>
+            >
+              <!-- TODO @芋艿：这里不提示；是不是组件得封装下；-->
+              <template #tip> 建议尺寸：44 * 44 </template>
+            </UploadImg>
           </FormItem>
           <FormItem label="标题" name="title">
             <InputWithColor

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

@@ -3,26 +3,23 @@ import type { MenuSwiperItemProperty, MenuSwiperProperty } from './config';
 
 import { ref, watch } from 'vue';
 
-import { Image } from 'ant-design-vue';
+import { Carousel, Image } from 'ant-design-vue';
 
 /** 菜单导航 */
 defineOptions({ name: 'MenuSwiper' });
-const props = defineProps<{ property: MenuSwiperProperty }>();
-// 标题的高度
-const TITLE_HEIGHT = 20;
-// 图标的高度
-const ICON_SIZE = 32;
-// 垂直间距：一行上下的间距
-const SPACE_Y = 16;
 
-// 分页
-const pages = ref<MenuSwiperItemProperty[][]>([]);
-// 轮播图高度
-const carouselHeight = ref(0);
-// 行高
-const rowHeight = ref(0);
-// 列宽
-const columnWidth = ref('');
+const props = defineProps<{ property: MenuSwiperProperty }>();
+
+const TITLE_HEIGHT = 20; // 标题的高度
+const ICON_SIZE = 32; // 图标的高度
+const SPACE_Y = 16; // 垂直间距：一行上下的间距
+
+const pages = ref<MenuSwiperItemProperty[][]>([]); // 分页
+const carouselHeight = ref(0); // 轮播图高度
+
+const rowHeight = ref(0); // 行高
+const columnWidth = ref(''); // 列宽
+
 watch(
   () => props.property,
   () => {
@@ -75,9 +72,7 @@ watch(
           class="relative flex flex-col items-center justify-center"
           :style="{ width: columnWidth, height: `${rowHeight}px` }"
         >
-          <!-- 图标 + 角标 -->
           <div class="relative" :class="`h-${ICON_SIZE}px w-${ICON_SIZE}px`">
-            <!-- 右上角角标 -->
             <span
               v-if="item.badge?.show"
               class="absolute -right-2.5 -top-2.5 z-10 h-5 rounded-[10px] px-1.5 text-center text-xs leading-5"
@@ -95,7 +90,6 @@ watch(
               :preview="false"
             />
           </div>
-          <!-- 标题 -->
           <span
             v-if="property.layout === 'iconText'"
             class="text-xs"

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

@@ -69,6 +69,7 @@ const formData = useVModel(props, 'modelValue', emit);
                 width="80px"
                 :show-description="false"
               >
+                <!-- TODO @芋艿：这里不提示；是不是组件得封装下；-->
                 <template #tip> 建议尺寸：98 * 98 </template>
               </UploadImg>
             </FormItem>

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

@@ -1,18 +1,20 @@
 <script lang="ts" setup>
 import type { NavigationBarCellProperty } from '../config';
 
-import type { Rect } from '#/views/mall/promotion/components/magic-cube-editor/util';
-
 import { computed, ref } from 'vue';
 
+import { IconifyIcon } from '@vben/icons';
+
 import { useVModel } from '@vueuse/core';
 import {
   FormItem,
-  Image,
   Input,
   Radio,
+  RadioButton,
   RadioGroup,
   Slider,
+  Switch,
+  Tooltip,
 } from 'ant-design-vue';
 
 import appNavBarMp from '#/assets/imgs/diy/app-nav-bar-mp.png';
@@ -23,7 +25,7 @@ import {
   MagicCubeEditor,
 } from '#/views/mall/promotion/components';
 
-// 导航栏属性面板
+/** 导航栏单元格属性面板 */
 defineOptions({ name: 'NavigationBarCellProperty' });
 
 const props = defineProps({
@@ -36,54 +38,64 @@ const props = defineProps({
     default: () => [],
   },
 });
+
 const emit = defineEmits(['update:modelValue']);
+
 const cellList = useVModel(props, 'modelValue', emit);
 
-// 单元格数量：小程序6个（右侧胶囊按钮占了2个），其它平台8个
+/**
+ * 计算单元格数量
+ * 1. 小程序：6 个（因为右侧有胶囊按钮占据 2 个格子的空间）
+ * 2. 其它平台：8 个（全部空间可用）
+ */
 const cellCount = computed(() => (props.isMp ? 6 : 8));
 
-// 转换为Rect格式的数据
-const rectList = computed<Rect[]>(() => {
-  return cellList.value.map((cell) => ({
-    left: cell.left,
-    top: cell.top,
-    width: cell.width,
-    height: cell.height,
-    right: cell.left + cell.width,
-    bottom: cell.top + cell.height,
-  }));
-});
+const selectedHotAreaIndex = ref(0); // 选中的热区
 
-// 选中的热区
-const selectedHotAreaIndex = ref(0);
-const handleHotAreaSelected = (
+/** 处理热区被选中事件 */
+function handleHotAreaSelected(
   cellValue: NavigationBarCellProperty,
   index: number,
-) => {
+) {
   selectedHotAreaIndex.value = index;
+  // 默认设置为选中文字，并设置属性
   if (!cellValue.type) {
     cellValue.type = 'text';
     cellValue.textColor = '#111111';
   }
-};
+  // 如果点击的是搜索框，则初始化搜索框的属性
+  if (cellValue.type === 'search') {
+    cellValue.placeholderPosition = 'left';
+    cellValue.backgroundColor = '#EEEEEE';
+    cellValue.textColor = '#969799';
+  }
+}
 </script>
 
 <template>
   <div class="h-40px flex items-center justify-center">
     <MagicCubeEditor
-      v-model="rectList"
+      v-model="cellList as any"
       :cols="cellCount"
       :cube-size="38"
       :rows="1"
       class="m-b-16px"
       @hot-area-selected="handleHotAreaSelected"
     />
-    <Image v-if="isMp" alt="" class="w-19 h-8" :src="appNavBarMp" />
+    <img
+      v-if="isMp"
+      alt=""
+      style="width: 76px; height: 30px"
+      :src="appNavBarMp"
+    />
   </div>
   <template v-for="(cell, cellIndex) in cellList" :key="cellIndex">
     <template v-if="selectedHotAreaIndex === Number(cellIndex)">
-      <FormItem label="类型">
-        <RadioGroup v-model:value="cell.type">
+      <FormItem :name="`cell[${cellIndex}].type`" label="类型">
+        <RadioGroup
+          v-model:value="cell.type"
+          @change="handleHotAreaSelected(cell, cellIndex)"
+        >
           <Radio value="text">文字</Radio>
           <Radio value="image">图片</Radio>
           <Radio value="search">搜索框</Radio>
@@ -91,37 +103,61 @@ const handleHotAreaSelected = (
       </FormItem>
       <!-- 1. 文字 -->
       <template v-if="cell.type === 'text'">
-        <FormItem label="内容">
+        <FormItem :name="`cell[${cellIndex}].text`" label="内容">
           <Input v-model:value="cell!.text" :maxlength="10" show-count />
         </FormItem>
-        <FormItem label="颜色">
+        <FormItem :name="`cell[${cellIndex}].text`" label="颜色">
           <ColorInput v-model="cell!.textColor" />
         </FormItem>
-        <FormItem label="链接">
+        <FormItem :name="`cell[${cellIndex}].url`" label="链接">
           <AppLinkInput v-model="cell.url" />
         </FormItem>
       </template>
       <!-- 2. 图片 -->
       <template v-else-if="cell.type === 'image'">
-        <FormItem label="图片">
+        <FormItem :name="`cell[${cellIndex}].imgUrl`" label="图片">
           <UploadImg
             v-model="cell.imgUrl"
             :limit="1"
+            height="56px"
+            width="56px"
             :show-description="false"
-            class="size-14"
           />
           <span class="text-xs text-gray-500">建议尺寸 56*56</span>
         </FormItem>
-        <FormItem label="链接">
+        <FormItem :name="`cell[${cellIndex}].url`" label="链接">
           <AppLinkInput v-model="cell.url" />
         </FormItem>
       </template>
       <!-- 3. 搜索框 -->
       <template v-else>
-        <FormItem label="提示文字">
+        <FormItem label="框体颜色" name="backgroundColor">
+          <ColorInput v-model="cell.backgroundColor" />
+        </FormItem>
+        <FormItem class="lef" label="文本颜色" name="textColor">
+          <ColorInput v-model="cell.textColor" />
+        </FormItem>
+        <FormItem :name="`cell[${cellIndex}].placeholder`" label="提示文字">
           <Input v-model:value="cell.placeholder" :maxlength="10" show-count />
         </FormItem>
-        <FormItem label="圆角">
+        <FormItem label="文本位置" name="placeholderPosition">
+          <RadioGroup v-model:value="cell!.placeholderPosition">
+            <Tooltip title="居左" placement="top">
+              <RadioButton value="left">
+                <IconifyIcon icon="ant-design:align-left-outlined" />
+              </RadioButton>
+            </Tooltip>
+            <Tooltip title="居中" placement="top">
+              <RadioButton value="center">
+                <IconifyIcon icon="ant-design:align-center-outlined" />
+              </RadioButton>
+            </Tooltip>
+          </RadioGroup>
+        </FormItem>
+        <FormItem label="扫一扫" name="showScan">
+          <Switch v-model:checked="cell!.showScan" />
+        </FormItem>
+        <FormItem :name="`cell[${cellIndex}].borderRadius`" label="圆角">
           <Slider v-model:value="cell.borderRadius" :max="100" :min="0" />
         </FormItem>
       </template>

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

@@ -18,7 +18,7 @@ defineOptions({ name: 'NavigationBar' });
 
 const props = defineProps<{ property: NavigationBarProperty }>();
 
-// 背景
+/** 计算背景样式 */
 const bgStyle = computed(() => {
   const background =
     props.property.bgType === 'img' && props.property.bgImg
@@ -26,27 +26,31 @@ const bgStyle = computed(() => {
       : props.property.bgColor;
   return { background };
 });
-// 单元格列表
+
+/** 获取当前预览的单元格列表 */
 const cellList = computed(() =>
   props.property._local?.previewMp
     ? props.property.mpCells
     : props.property.otherCells,
 );
-// 单元格宽度
+
+/** 计算单元格宽度 */
 const cellWidth = computed(() => {
   return props.property._local?.previewMp
-    ? (384 - 80 - 86) / 6
-    : (384 - 90) / 8;
+    ? (375 - 80 - 86) / 6
+    : (375 - 90) / 8;
 });
-// 获得单元格样式
-const getCellStyle = (cell: NavigationBarCellProperty) => {
+
+/** 获取单元格样式 */
+function getCellStyle(cell: NavigationBarCellProperty) {
   return {
     width: `${cell.width * cellWidth.value + (cell.width - 1) * 10}px`,
     left: `${cell.left * cellWidth.value + (cell.left + 1) * 10}px`,
     position: 'absolute',
   } as StyleValue;
-};
-// 获得搜索框属性
+}
+
+/** 获取搜索框属性配置 */
 const getSearchProp = computed(() => (cell: NavigationBarCellProperty) => {
   return {
     height: 30,
@@ -57,7 +61,10 @@ const getSearchProp = computed(() => (cell: NavigationBarCellProperty) => {
 });
 </script>
 <template>
-  <div class="navigation-bar" :style="bgStyle">
+  <div
+    class="flex h-[50px] items-center justify-between bg-white px-[6px]"
+    :style="bgStyle"
+  >
     <div class="flex h-full w-full items-center">
       <div
         v-for="(cell, cellIndex) in cellList"
@@ -78,35 +85,7 @@ const getSearchProp = computed(() => (cell: NavigationBarCellProperty) => {
       v-if="property._local?.previewMp"
       :src="appNavbarMp"
       alt=""
-      class="w-22 h-8"
+      style="width: 86px; height: 30px"
     />
   </div>
 </template>
-<style lang="scss" scoped>
-.navigation-bar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  height: 50px;
-  padding: 0 6px;
-  background: #fff;
-
-  /* 左边 */
-  .left {
-    margin-left: 8px;
-  }
-
-  .center {
-    flex: 1;
-    font-size: 14px;
-    line-height: 35px;
-    color: #333;
-    text-align: center;
-  }
-
-  /* 右边 */
-  .right {
-    margin-right: 8px;
-  }
-}
-</style>

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

@@ -17,16 +17,16 @@ import { ColorInput } from '#/views/mall/promotion/components';
 
 import NavigationBarCellProperty from './components/cell-property.vue';
 
-// 导航栏属性面板
+/** 导航栏属性面板 */
 defineOptions({ name: 'NavigationBarProperty' });
+
 const props = defineProps<{ modelValue: NavigationBarProperty }>();
 
 const emit = defineEmits(['update:modelValue']);
 
-// 表单校验
 const rules: Record<string, any> = {
   name: [{ required: true, message: '请输入页面名称', trigger: 'blur' }],
-};
+}; // 表单校验
 
 const formData = useVModel(props, 'modelValue', emit);
 if (!formData.value._local) {

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

@@ -1,23 +1,14 @@
 <script setup lang="ts">
 import type { NoticeBarProperty } from './config';
 
-import { ref } from 'vue';
-
 import { IconifyIcon } from '@vben/icons';
 
-import { Divider, Image } from 'ant-design-vue';
+import { Carousel, Divider, Image } from 'ant-design-vue';
 
 /** 公告栏 */
 defineOptions({ name: 'NoticeBar' });
 
-const props = defineProps<{ property: NoticeBarProperty }>();
-
-// 自动轮播
-const activeIndex = ref(0);
-setInterval(() => {
-  const contents = props.property.contents || [];
-  activeIndex.value = (activeIndex.value + 1) % (contents.length || 1);
-}, 3000);
+defineProps<{ property: NoticeBarProperty }>();
 </script>
 
 <template>
@@ -30,11 +21,17 @@ setInterval(() => {
   >
     <Image :src="property.iconUrl" class="h-[18px]" :preview="false" />
     <Divider type="vertical" />
-    <div class="h-6 flex-1 truncate pr-2 leading-6">
-      {{ property.contents?.[activeIndex]?.text }}
-    </div>
+    <Carousel
+      :autoplay="true"
+      :dots="false"
+      vertical
+      class="flex-1 pr-2"
+      style="height: 24px"
+    >
+      <div v-for="(item, index) in property.contents" :key="index">
+        <div class="h-6 truncate leading-6">{{ item.text }}</div>
+      </div>
+    </Carousel>
     <IconifyIcon icon="lucide:arrow-right" />
   </div>
 </template>
-
-<style scoped lang="scss"></style>

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

@@ -35,6 +35,7 @@ const rules = {
           height="48px"
           :show-description="false"
         >
+          <!-- TODO @芋艿：这里不提示；是不是组件得封装下；-->
           <template #tip>建议尺寸：24 * 24</template>
         </UploadImg>
       </FormItem>

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

@@ -7,25 +7,18 @@ import { Form, FormItem, Textarea } from 'ant-design-vue';
 import UploadImg from '#/components/upload/image-upload.vue';
 import { ColorInput } from '#/views/mall/promotion/components';
 
-// 导航栏属性面板
+/** 导航栏属性面板 */
 defineOptions({ name: 'PageConfigProperty' });
+
 const props = defineProps<{ modelValue: PageConfigProperty }>();
 
 const emit = defineEmits(['update:modelValue']);
 
-// 表单校验
-const rules = {};
-
 const formData = useVModel(props, 'modelValue', emit);
 </script>
 
 <template>
-  <Form
-    :model="formData"
-    :rules="rules"
-    :label-col="{ span: 6 }"
-    :wrapper-col="{ span: 18 }"
-  >
+  <Form :model="formData" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
     <FormItem label="页面描述" name="description">
       <Textarea
         v-model:value="formData!.description"
@@ -42,10 +35,9 @@ const formData = useVModel(props, 'modelValue', emit);
         :limit="1"
         :show-description="false"
       >
+        <!-- TODO @芋艿：这里不提示；是不是组件得封装下；-->
         <template #tip>建议宽度 750px</template>
       </UploadImg>
     </FormItem>
   </Form>
 </template>
-
-<style scoped lang="scss"></style>

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

@@ -9,18 +9,19 @@ import { Image } from 'ant-design-vue';
 
 /** 弹窗广告 */
 defineOptions({ name: 'Popover' });
-// 定义属性
-defineProps<{ property: PopoverProperty }>();
 
-// 处理选中
-const activeIndex = ref(0);
-const handleActive = (index: number) => {
+const props = defineProps<{ property: PopoverProperty }>();
+
+const activeIndex = ref(0); // 选中 index
+
+/** 处理选中 */
+function handleActive(index: number) {
   activeIndex.value = index;
-};
+}
 </script>
 <template>
   <div
-    v-for="(item, index) in property.list"
+    v-for="(item, index) in props.property.list"
     :key="index"
     class="absolute bottom-1/2 right-1/2 h-[454px] w-[292px] rounded border border-gray-300 bg-white p-0.5"
     :style="{
@@ -30,7 +31,11 @@ const handleActive = (index: number) => {
     }"
     @click="handleActive(index)"
   >
-    <Image :src="item.imgUrl" fit="contain" class="h-full w-full">
+    <Image
+      :src="item.imgUrl"
+      :preview="false"
+      class="h-full w-full object-contain"
+    >
       <template #error>
         <div class="flex h-full w-full items-center justify-center">
           <IconifyIcon icon="lucide:image" />
@@ -40,5 +45,3 @@ const handleActive = (index: number) => {
     <div class="absolute right-1 top-1 text-xs">{{ index + 1 }}</div>
   </div>
 </template>
-
-<style scoped lang="scss"></style>

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

@@ -18,7 +18,7 @@ const formData = useVModel(props, 'modelValue', emit);
 </script>
 
 <template>
-  <Form :model="formData">
+  <Form :label-col="{ style: { width: '80px' } }" :model="formData">
     <Draggable v-model="formData.list" :empty-item="{ showType: 'once' }">
       <template #default="{ element, index }">
         <FormItem label="图片" :name="`list[${index}].imgUrl`">

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

@@ -13,10 +13,11 @@ import { getSpuDetailList } from '#/api/mall/product/spu';
 
 /** 商品卡片 */
 defineOptions({ name: 'ProductCard' });
-// 定义属性
+
 const props = defineProps<{ property: ProductCardProperty }>();
-// 商品列表
-const spuList = ref<MallSpuApi.Spu[]>([]);
+
+const spuList = ref<MallSpuApi.Spu[]>([]); // 商品列表
+
 watch(
   () => props.property.spuIds,
   async () => {
@@ -28,28 +29,21 @@ watch(
   },
 );
 
-/**
- * 计算商品的间距
- * @param index 商品索引
- */
+/** 计算商品的间距 */
 function calculateSpace(index: number) {
-  // 商品的列数
-  const columns = props.property.layoutType === 'twoCol' ? 2 : 1;
-  // 第一列没有左边距
-  const marginLeft = index % columns === 0 ? '0' : `${props.property.space}px`;
-  // 第一行没有上边距
-  const marginTop = index < columns ? '0' : `${props.property.space}px`;
-
+  const columns = props.property.layoutType === 'twoCol' ? 2 : 1; // 商品的列数
+  const marginLeft = index % columns === 0 ? '0' : `${props.property.space}px`; // 第一列没有左边距
+  const marginTop = index < columns ? '0' : `${props.property.space}px`; // 第一行没有上边距
   return { marginLeft, marginTop };
 }
 
-// 容器
-const containerRef = ref();
-// 计算商品的宽度
+const containerRef = ref(); // 容器
+
+/** 计算商品的宽度 */
 function calculateWidth() {
   let width = '100%';
-  // 双列时每列的宽度为：（总宽度 - 间距）/ 2
   if (props.property.layoutType === 'twoCol') {
+    // 双列时每列的宽度为：（总宽度 - 间距）/ 2
     width = `${(containerRef.value.offsetWidth - props.property.space) / 2}px`;
   }
   return { width };
@@ -61,7 +55,7 @@ function calculateWidth() {
     ref="containerRef"
   >
     <div
-      class="bg-card relative box-content flex flex-row flex-wrap overflow-hidden"
+      class="relative box-content flex flex-row flex-wrap overflow-hidden"
       :style="{
         ...calculateSpace(index),
         ...calculateWidth(),
@@ -78,7 +72,11 @@ function calculateWidth() {
         v-if="property.badge.show && property.badge.imgUrl"
         class="absolute left-0 top-0 z-[1] items-center justify-center"
       >
-        <Image fit="cover" :src="property.badge.imgUrl" class="h-6 w-8" />
+        <Image
+          :src="property.badge.imgUrl"
+          :preview="false"
+          class="h-6 w-8 object-cover"
+        />
       </div>
       <!-- 商品封面图 -->
       <div
@@ -90,7 +88,11 @@ function calculateWidth() {
           },
         ]"
       >
-        <Image fit="cover" class="h-full w-full" :src="spu.picUrl" />
+        <Image
+          class="h-full w-full object-cover"
+          :src="spu.picUrl"
+          :preview="false"
+        />
       </div>
       <div
         class="box-border flex flex-col gap-2 p-2"
@@ -174,9 +176,9 @@ function calculateWidth() {
         <!-- 图片按钮 -->
         <Image
           v-else
-          class="size-7 rounded-full"
-          fit="cover"
+          class="size-7 rounded-full object-cover"
           :src="property.btnBuy.imgUrl"
+          :preview="false"
         />
       </div>
     </div>

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

@@ -116,6 +116,7 @@ const formData = useVModel(props, 'modelValue', emit);
             width="72px"
             :show-description="false"
           >
+            <!-- TODO @芋艿：这里不提示；是不是组件得封装下；-->
             <template #tip> 建议尺寸：36 * 22 </template>
           </UploadImg>
         </FormItem>
@@ -146,6 +147,7 @@ const formData = useVModel(props, 'modelValue', emit);
               width="56px"
               :show-description="false"
             >
+              <!-- TODO @芋艿：这里不提示；是不是组件得封装下；-->
               <template #tip> 建议尺寸：56 * 56 </template>
             </UploadImg>
           </FormItem>

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

@@ -13,10 +13,11 @@ import { getSpuDetailList } from '#/api/mall/product/spu';
 
 /** 商品栏 */
 defineOptions({ name: 'ProductList' });
-// 定义属性
+
 const props = defineProps<{ property: ProductListProperty }>();
-// 商品列表
+
 const spuList = ref<MallSpuApi.Spu[]>([]);
+
 watch(
   () => props.property.spuIds,
   async () => {
@@ -27,19 +28,15 @@ watch(
     deep: true,
   },
 );
-// 手机宽度
-const phoneWidth = ref(384);
-// 容器
-const containerRef = ref();
-// 商品的列数
-const columns = ref(2);
-// 滚动条宽度
-const scrollbarWidth = ref('100%');
-// 商品图大小
-const imageSize = ref('0');
-// 商品网络列数
-const gridTemplateColumns = ref('');
-// 计算布局参数
+
+const phoneWidth = ref(375); // 手机宽度
+const containerRef = ref(); // 容器
+const columns = ref(2); // 商品的列数
+const scrollbarWidth = ref('100%'); // 滚动条宽度
+const imageSize = ref('0'); // 商品图大小
+const gridTemplateColumns = ref(''); // 商品网络列数
+
+/** 计算布局参数 */
 watch(
   () => [props.property, phoneWidth, spuList.value.length],
   () => {
@@ -69,13 +66,14 @@ watch(
   },
   { immediate: true, deep: true },
 );
+
+/** 初始化 */
 onMounted(() => {
-  // 提取手机宽度
-  phoneWidth.value = containerRef.value?.wrapRef?.offsetWidth || 384;
+  phoneWidth.value = containerRef.value?.offsetWidth || 375;
 });
 </script>
 <template>
-  <div class="z-10 min-h-[30px]" wrap-class="w-full" ref="containerRef">
+  <div class="z-10 min-h-[30px] w-full" ref="containerRef">
     <!-- 商品网格 -->
     <div
       class="grid overflow-x-auto"
@@ -103,16 +101,16 @@ onMounted(() => {
           class="absolute left-0 top-0 z-10 items-center justify-center"
         >
           <Image
-            fit="cover"
             :src="property.badge.imgUrl"
-            class="h-[26px] w-[38px]"
+            :preview="false"
+            class="h-[26px] w-[38px] object-cover"
           />
         </div>
         <!-- 商品封面图 -->
         <Image
-          fit="cover"
           :src="spu.picUrl"
-          :style="{ width: imageSize, height: imageSize }"
+          :style="{ width: imageSize, height: imageSize, objectFit: 'cover' }"
+          :preview="false"
         />
         <div
           class="box-border flex flex-col gap-2 p-2"
@@ -146,5 +144,3 @@ onMounted(() => {
     </div>
   </div>
 </template>
-
-<style scoped lang="scss"></style>

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

@@ -17,17 +17,18 @@ import {
 } from 'ant-design-vue';
 
 import UploadImg from '#/components/upload/image-upload.vue';
-import { InputWithColor as ColorInput } from '#/views/mall/promotion/components';
+import SpuShowcase from '#/views/mall/product/spu/components/spu-showcase.vue';
+import { ColorInput } from '#/views/mall/promotion/components';
 
 import ComponentContainerProperty from '../../component-container-property.vue';
-// TODO: 添加组件
-// import SpuShowcase from '#/views/mall/product/spu/components/spu-showcase.vue';
 
-// 商品栏属性面板
+/** 商品栏属性面板 */
 defineOptions({ name: 'ProductListProperty' });
 
 const props = defineProps<{ modelValue: ProductListProperty }>();
+
 const emit = defineEmits(['update:modelValue']);
+
 const formData = useVModel(props, 'modelValue', emit);
 </script>
 
@@ -39,10 +40,10 @@ const formData = useVModel(props, 'modelValue', emit);
       :model="formData"
     >
       <Card title="商品列表" class="property-group" :bordered="false">
-        <!-- <SpuShowcase v-model="formData.spuIds" /> -->
+        <SpuShowcase v-model="formData.spuIds" />
       </Card>
       <Card title="商品样式" class="property-group" :bordered="false">
-        <FormItem label="布局" prop="type">
+        <FormItem label="布局" name="type">
           <RadioGroup v-model:value="formData.layoutType">
             <Tooltip title="双列" placement="bottom">
               <RadioButton value="twoCol">
@@ -67,13 +68,13 @@ const formData = useVModel(props, 'modelValue', emit);
             </Tooltip>
           </RadioGroup>
         </FormItem>
-        <FormItem label="商品名称" prop="fields.name.show">
+        <FormItem label="商品名称" name="fields.name.show">
           <div class="flex gap-2">
             <ColorInput v-model="formData.fields.name.color" />
             <Checkbox v-model:checked="formData.fields.name.show" />
           </div>
         </FormItem>
-        <FormItem label="商品价格" prop="fields.price.show">
+        <FormItem label="商品价格" name="fields.price.show">
           <div class="flex gap-2">
             <ColorInput v-model="formData.fields.price.color" />
             <Checkbox v-model:checked="formData.fields.price.show" />
@@ -81,41 +82,40 @@ const formData = useVModel(props, 'modelValue', emit);
         </FormItem>
       </Card>
       <Card title="角标" class="property-group" :bordered="false">
-        <FormItem label="角标" prop="badge.show">
+        <FormItem label="角标" name="badge.show">
           <Switch v-model:checked="formData.badge.show" />
         </FormItem>
-        <FormItem label="角标" prop="badge.imgUrl" v-if="formData.badge.show">
+        <FormItem label="角标" name="badge.imgUrl" v-if="formData.badge.show">
           <UploadImg
             v-model="formData.badge.imgUrl"
             height="44px"
             width="72px"
             :show-description="false"
           >
+            <!-- TODO @芋艿：这里不提示；是不是组件得封装下；-->
             <template #tip> 建议尺寸：36 * 22 </template>
           </UploadImg>
         </FormItem>
       </Card>
       <Card title="商品样式" class="property-group" :bordered="false">
-        <FormItem label="上圆角" prop="borderRadiusTop">
+        <FormItem label="上圆角" name="borderRadiusTop">
           <Slider
             v-model:value="formData.borderRadiusTop"
             :max="100"
             :min="0"
           />
         </FormItem>
-        <FormItem label="下圆角" prop="borderRadiusBottom">
+        <FormItem label="下圆角" name="borderRadiusBottom">
           <Slider
             v-model:value="formData.borderRadiusBottom"
             :max="100"
             :min="0"
           />
         </FormItem>
-        <FormItem label="间隔" prop="space">
+        <FormItem label="间隔" name="space">
           <Slider v-model:value="formData.space" :max="100" :min="0" />
         </FormItem>
       </Card>
     </Form>
   </ComponentContainerProperty>
 </template>
-
-<style scoped lang="scss"></style>

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

@@ -9,10 +9,10 @@ import { getArticle } from '#/api/mall/promotion/article';
 
 /** 营销文章 */
 defineOptions({ name: 'PromotionArticle' });
-// 定义属性
-const props = defineProps<{ property: PromotionArticleProperty }>();
-// 商品列表
-const article = ref<MallArticleApi.Article>();
+
+const props = defineProps<{ property: PromotionArticleProperty }>(); // 定义属性
+
+const article = ref<MallArticleApi.Article>(); // 商品列表
 
 watch(
   () => props.property.id,
@@ -27,5 +27,5 @@ watch(
 );
 </script>
 <template>
-  <div class="min-h-8" v-dompurify-html="article?.content"></div>
+  <div class="min-h-[30px]" v-dompurify-html="article?.content"></div>
 </template>

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

@@ -12,18 +12,18 @@ import { getArticlePage } from '#/api/mall/promotion/article';
 
 import ComponentContainerProperty from '../../component-container-property.vue';
 
-// 营销文章属性面板
+/** 营销文章属性面板 */
 defineOptions({ name: 'PromotionArticleProperty' });
 
 const props = defineProps<{ modelValue: PromotionArticleProperty }>();
+
 const emit = defineEmits(['update:modelValue']);
 const formData = useVModel(props, 'modelValue', emit);
-// 文章列表
-const articles = ref<MallArticleApi.Article[]>([]);
 
-// 加载中
-const loading = ref(false);
-// 查询文章列表
+const articles = ref<MallArticleApi.Article[]>([]); // 文章列表
+const loading = ref(false); // 加载中
+
+/** 查询文章列表 */
 const queryArticleList = async (title?: string) => {
   loading.value = true;
   const { list } = await getArticlePage({
@@ -35,7 +35,7 @@ const queryArticleList = async (title?: string) => {
   loading.value = false;
 };
 
-// 初始化
+/** 初始化 */
 onMounted(() => {
   queryArticleList();
 });
@@ -48,12 +48,12 @@ onMounted(() => {
       :wrapper-col="{ span: 18 }"
       :model="formData"
     >
-      <FormItem label="文章" prop="id">
+      <FormItem label="文章" name="id">
         <Select
           v-model:value="formData.id"
           placeholder="请选择文章"
           class="w-full"
-          filterable
+          :show-search="true"
           :loading="loading"
           :options="
             articles.map((item: any) => ({ label: item.title, value: item.id }))

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

@@ -15,10 +15,10 @@ import { getCombinationActivityListByIds } from '#/api/mall/promotion/combinatio
 
 /** 拼团卡片 */
 defineOptions({ name: 'PromotionCombination' });
-// 定义属性
+
 const props = defineProps<{ property: PromotionCombinationProperty }>();
-// 商品列表
-const spuList = ref<MallSpuApi.Spu[]>([]);
+
+const spuList = ref<MallSpuApi.Spu[]>([]); // 商品列表
 const spuIdList = ref<number[]>([]);
 const combinationActivityList = ref<
   MallCombinationActivityApi.CombinationActivity[]
@@ -30,7 +30,7 @@ watch(
     try {
       // 新添加的拼团组件，是没有活动ID的
       const activityIds = props.property.activityIds;
-      // 检查活动ID的有效性
+      // 检查活动 ID 的有效性
       if (Array.isArray(activityIds) && activityIds.length > 0) {
         // 获取拼团活动详情列表
         combinationActivityList.value =
@@ -68,32 +68,25 @@ watch(
   },
 );
 
-/**
- * 计算商品的间距
- * @param index 商品索引
- */
-const calculateSpace = (index: number) => {
-  // 商品的列数
-  const columns = props.property.layoutType === 'twoCol' ? 2 : 1;
-  // 第一列没有左边距
-  const marginLeft = index % columns === 0 ? '0' : `${props.property.space}px`;
-  // 第一行没有上边距
-  const marginTop = index < columns ? '0' : `${props.property.space}px`;
-
+/** 计算商品的间距 */
+function calculateSpace(index: number) {
+  const columns = props.property.layoutType === 'twoCol' ? 2 : 1; // 商品的列数
+  const marginLeft = index % columns === 0 ? '0' : `${props.property.space}px`; // 第一列没有左边距
+  const marginTop = index < columns ? '0' : `${props.property.space}px`; // 第一行没有上边距
   return { marginLeft, marginTop };
-};
+}
 
-// 容器
-const containerRef = ref();
-// 计算商品的宽度
-const calculateWidth = () => {
+const containerRef = ref(); // 容器
+
+/** 计算商品的宽度 */
+function calculateWidth() {
   let width = '100%';
-  // 双列时每列的宽度为：（总宽度 - 间距）/ 2
   if (props.property.layoutType === 'twoCol') {
+    // 双列时每列的宽度为：（总宽度 - 间距）/ 2
     width = `${(containerRef.value.offsetWidth - props.property.space) / 2}px`;
   }
   return { width };
-};
+}
 </script>
 <template>
   <div
@@ -118,26 +111,34 @@ const calculateWidth = () => {
         v-if="property.badge.show"
         class="absolute left-0 top-0 z-[1] items-center justify-center"
       >
-        <Image fit="cover" :src="property.badge.imgUrl" class="h-6 w-8" />
+        <Image
+          :src="property.badge.imgUrl"
+          class="h-6 w-8 object-cover"
+          :preview="false"
+        />
       </div>
       <!-- 商品封面图 -->
       <div
-        class="h-36"
+        class="h-[140px]"
         :class="[
           {
             'w-full': property.layoutType !== 'oneColSmallImg',
-            'w-36': property.layoutType === 'oneColSmallImg',
+            'w-[140px]': property.layoutType === 'oneColSmallImg',
           },
         ]"
       >
-        <Image fit="cover" class="h-full w-full" :src="spu.picUrl" />
+        <Image
+          class="h-full w-full object-cover"
+          :src="spu.picUrl"
+          :preview="false"
+        />
       </div>
       <div
         class="box-border flex flex-col gap-2 p-2"
         :class="[
           {
             'w-full': property.layoutType !== 'oneColSmallImg',
-            'w-[calc(100vw-36px-16px)]':
+            'w-[calc(100%-140px-16px)]':
               property.layoutType === 'oneColSmallImg',
           },
         ]"
@@ -215,9 +216,9 @@ const calculateWidth = () => {
         <!-- 图片按钮 -->
         <Image
           v-else
-          class="size-7 rounded-full"
-          fit="cover"
+          class="size-7 rounded-full object-cover"
           :src="property.btnBuy.imgUrl"
+          :preview="false"
         />
       </div>
     </div>

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

@@ -1,11 +1,6 @@
 <script setup lang="ts">
 import type { PromotionCombinationProperty } from './config';
 
-import type { MallCombinationActivityApi } from '#/api/mall/promotion/combination/combinationActivity';
-
-import { onMounted, ref } from 'vue';
-
-import { CommonStatusEnum } from '@vben/constants';
 import { IconifyIcon } from '@vben/icons';
 
 import { useVModel } from '@vueuse/core';
@@ -22,27 +17,20 @@ import {
   Tooltip,
 } from 'ant-design-vue';
 
-import { getCombinationActivityPage } from '#/api/mall/promotion/combination/combinationActivity';
 import UploadImg from '#/components/upload/image-upload.vue';
-// import CombinationShowcase from '#/views/mall/promotion/combination/components/combination-showcase.vue';
+import { CombinationShowcase } from '#/views/mall/promotion/combination/components';
 import { ColorInput } from '#/views/mall/promotion/components';
 
-// 拼团属性面板
+import ComponentContainerProperty from '../../component-container-property.vue';
+
+/** 拼团属性面板 */
 defineOptions({ name: 'PromotionCombinationProperty' });
 
 const props = defineProps<{ modelValue: PromotionCombinationProperty }>();
+
 const emit = defineEmits(['update:modelValue']);
+
 const formData = useVModel(props, 'modelValue', emit);
-// 活动列表
-const activityList = ref<MallCombinationActivityApi.CombinationActivity[]>([]);
-onMounted(async () => {
-  const { list } = await getCombinationActivityPage({
-    pageNo: 1,
-    pageSize: 10,
-    status: CommonStatusEnum.ENABLE,
-  });
-  activityList.value = list;
-});
 </script>
 
 <template>
@@ -56,7 +44,7 @@ onMounted(async () => {
         <CombinationShowcase v-model="formData.activityIds" />
       </Card>
       <Card title="商品样式" class="property-group" :bordered="false">
-        <FormItem label="布局" prop="type">
+        <FormItem label="布局" name="type">
           <RadioGroup v-model:value="formData.layoutType">
             <Tooltip title="单列大图" placement="bottom">
               <RadioButton value="oneColBigImg">
@@ -84,37 +72,37 @@ onMounted(async () => {
             </Tooltip>
           </RadioGroup>
         </FormItem>
-        <FormItem label="商品名称" prop="fields.name.show">
+        <FormItem label="商品名称" name="fields.name.show">
           <div class="flex gap-2">
             <ColorInput v-model="formData.fields.name.color" />
             <Checkbox v-model:checked="formData.fields.name.show" />
           </div>
         </FormItem>
-        <FormItem label="商品简介" prop="fields.introduction.show">
+        <FormItem label="商品简介" name="fields.introduction.show">
           <div class="flex gap-2">
             <ColorInput v-model="formData.fields.introduction.color" />
             <Checkbox v-model:checked="formData.fields.introduction.show" />
           </div>
         </FormItem>
-        <FormItem label="商品价格" prop="fields.price.show">
+        <FormItem label="商品价格" name="fields.price.show">
           <div class="flex gap-2">
             <ColorInput v-model="formData.fields.price.color" />
             <Checkbox v-model:checked="formData.fields.price.show" />
           </div>
         </FormItem>
-        <FormItem label="市场价" prop="fields.marketPrice.show">
+        <FormItem label="市场价" name="fields.marketPrice.show">
           <div class="flex gap-2">
             <ColorInput v-model="formData.fields.marketPrice.color" />
             <Checkbox v-model:checked="formData.fields.marketPrice.show" />
           </div>
         </FormItem>
-        <FormItem label="商品销量" prop="fields.salesCount.show">
+        <FormItem label="商品销量" name="fields.salesCount.show">
           <div class="flex gap-2">
             <ColorInput v-model="formData.fields.salesCount.color" />
             <Checkbox v-model:checked="formData.fields.salesCount.show" />
           </div>
         </FormItem>
-        <FormItem label="商品库存" prop="fields.stock.show">
+        <FormItem label="商品库存" name="fields.stock.show">
           <div class="flex gap-2">
             <ColorInput v-model="formData.fields.stock.color" />
             <Checkbox v-model:checked="formData.fields.stock.show" />
@@ -122,67 +110,67 @@ onMounted(async () => {
         </FormItem>
       </Card>
       <Card title="角标" class="property-group" :bordered="false">
-        <FormItem label="角标" prop="badge.show">
+        <FormItem label="角标" name="badge.show">
           <Switch v-model:checked="formData.badge.show" />
         </FormItem>
-        <FormItem label="角标" prop="badge.imgUrl" v-if="formData.badge.show">
+        <FormItem label="角标" name="badge.imgUrl" v-if="formData.badge.show">
           <UploadImg v-model="formData.badge.imgUrl" height="44px" width="72px">
+            <!-- TODO @芋艿：这里不提示；是不是组件得封装下；-->
             <template #tip> 建议尺寸：36 * 22</template>
           </UploadImg>
         </FormItem>
       </Card>
       <Card title="按钮" class="property-group" :bordered="false">
-        <FormItem label="按钮类型" prop="btnBuy.type">
+        <FormItem label="按钮类型" name="btnBuy.type">
           <RadioGroup v-model:value="formData.btnBuy.type">
             <RadioButton value="text">文字</RadioButton>
             <RadioButton value="img">图片</RadioButton>
           </RadioGroup>
         </FormItem>
         <template v-if="formData.btnBuy.type === 'text'">
-          <FormItem label="按钮文字" prop="btnBuy.text">
+          <FormItem label="按钮文字" name="btnBuy.text">
             <Input v-model:value="formData.btnBuy.text" />
           </FormItem>
-          <FormItem label="左侧背景" prop="btnBuy.bgBeginColor">
+          <FormItem label="左侧背景" name="btnBuy.bgBeginColor">
             <ColorInput v-model="formData.btnBuy.bgBeginColor" />
           </FormItem>
-          <FormItem label="右侧背景" prop="btnBuy.bgEndColor">
+          <FormItem label="右侧背景" name="btnBuy.bgEndColor">
             <ColorInput v-model="formData.btnBuy.bgEndColor" />
           </FormItem>
         </template>
         <template v-else>
-          <FormItem label="图片" prop="btnBuy.imgUrl">
+          <FormItem label="图片" name="btnBuy.imgUrl">
             <UploadImg
               v-model="formData.btnBuy.imgUrl"
               height="56px"
               width="56px"
               :show-description="false"
             >
+              <!-- TODO @芋艿：这里不提示；是不是组件得封装下；-->
               <template #tip> 建议尺寸：56 * 56</template>
             </UploadImg>
           </FormItem>
         </template>
       </Card>
       <Card title="商品样式" class="property-group" :bordered="false">
-        <FormItem label="上圆角" prop="borderRadiusTop">
+        <FormItem label="上圆角" name="borderRadiusTop">
           <Slider
             v-model:value="formData.borderRadiusTop"
             :max="100"
             :min="0"
           />
         </FormItem>
-        <FormItem label="下圆角" prop="borderRadiusBottom">
+        <FormItem label="下圆角" name="borderRadiusBottom">
           <Slider
             v-model:value="formData.borderRadiusBottom"
             :max="100"
             :min="0"
           />
         </FormItem>
-        <FormItem label="间隔" prop="space">
+        <FormItem label="间隔" name="space">
           <Slider v-model:value="formData.space" :max="100" :min="0" />
         </FormItem>
       </Card>
     </Form>
   </ComponentContainerProperty>
 </template>
-
-<style scoped lang="scss"></style>

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

@@ -14,10 +14,10 @@ import { getPointActivityListByIds } from '#/api/mall/promotion/point';
 
 /** 积分商城卡片 */
 defineOptions({ name: 'PromotionPoint' });
-// 定义属性
+
 const props = defineProps<{ property: PromotionPointProperty }>();
-// 商品列表
-const spuList = ref<MallPointActivityApi.SpuExtensionWithPoint[]>([]);
+
+const spuList = ref<MallPointActivityApi.SpuExtensionWithPoint[]>([]); // 商品列表
 const spuIdList = ref<number[]>([]);
 const pointActivityList = ref<MallPointActivityApi.PointActivity[]>([]);
 
@@ -27,7 +27,7 @@ watch(
     try {
       // 新添加的积分商城组件，是没有活动ID的
       const activityIds = props.property.activityIds;
-      // 检查活动ID的有效性
+      // 检查活动 ID 的有效性
       if (Array.isArray(activityIds) && activityIds.length > 0) {
         // 获取积分商城活动详情列表
         pointActivityList.value = await getPointActivityListByIds(activityIds);
@@ -65,37 +65,30 @@ watch(
   },
 );
 
-/**
- * 计算商品的间距
- * @param index 商品索引
- */
-const calculateSpace = (index: number) => {
-  // 商品的列数
-  const columns = props.property.layoutType === 'twoCol' ? 2 : 1;
-  // 第一列没有左边距
-  const marginLeft = index % columns === 0 ? '0' : `${props.property.space}px`;
-  // 第一行没有上边距
-  const marginTop = index < columns ? '0' : `${props.property.space}px`;
-
+/** 计算商品的间距 */
+function calculateSpace(index: number) {
+  const columns = props.property.layoutType === 'twoCol' ? 2 : 1; // 商品的列数
+  const marginLeft = index % columns === 0 ? '0' : `${props.property.space}px`; // 第一列没有左边距
+  const marginTop = index < columns ? '0' : `${props.property.space}px`; // 第一行没有上边距
   return { marginLeft, marginTop };
-};
+}
 
-// 容器
-const containerRef = ref();
-// 计算商品的宽度
-const calculateWidth = () => {
+const containerRef = ref(); // 容器
+
+/** 计算商品的宽度 */
+function calculateWidth() {
   let width = '100%';
-  // 双列时每列的宽度为：（总宽度 - 间距）/ 2
   if (props.property.layoutType === 'twoCol') {
+    // 双列时每列的宽度为：（总宽度 - 间距）/ 2
     width = `${(containerRef.value.offsetWidth - props.property.space) / 2}px`;
   }
   return { width };
-};
+}
 </script>
 <template>
   <div
     ref="containerRef"
-    class="box-content flex min-h-9 w-full flex-row flex-wrap"
+    class="box-content flex min-h-[30px] w-full flex-row flex-wrap"
   >
     <div
       v-for="(spu, index) in spuList"
@@ -115,19 +108,27 @@ const calculateWidth = () => {
         v-if="property.badge.show"
         class="absolute left-0 top-0 z-[1] items-center justify-center"
       >
-        <Image :src="property.badge.imgUrl" class="h-6 w-10" fit="cover" />
+        <Image
+          :src="property.badge.imgUrl"
+          class="h-6 w-10 object-cover"
+          :preview="false"
+        />
       </div>
       <!-- 商品封面图 -->
       <div
-        class="h-36"
+        class="h-[140px]"
         :class="[
           {
             'w-full': property.layoutType !== 'oneColSmallImg',
-            'w-36': property.layoutType === 'oneColSmallImg',
+            'w-[140px]': property.layoutType === 'oneColSmallImg',
           },
         ]"
       >
-        <Image :src="spu.picUrl" class="h-full w-full" fit="cover" />
+        <Image
+          :src="spu.picUrl"
+          class="h-full w-full object-cover"
+          :preview="false"
+        />
       </div>
       <div
         class="box-border flex flex-col gap-2 p-2"
@@ -218,8 +219,8 @@ const calculateWidth = () => {
         <Image
           v-else
           :src="property.btnBuy.imgUrl"
-          class="size-7 rounded-full"
-          fit="cover"
+          class="size-7 rounded-full object-cover"
+          :preview="false"
         />
       </div>
     </div>

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

@@ -33,7 +33,11 @@ const formData = useVModel(props, 'modelValue', emit);
 
 <template>
   <ComponentContainerProperty v-model="formData.style">
-    <Form :model="formData">
+    <Form
+      :model="formData"
+      :label-col="{ span: 6 }"
+      :wrapper-col="{ span: 18 }"
+    >
       <Card title="积分商城活动" class="property-group">
         <PointShowcase v-model="formData.activityIds" />
       </Card>
@@ -114,6 +118,7 @@ const formData = useVModel(props, 'modelValue', emit);
             width="72px"
             :show-description="false"
           >
+            <!-- TODO @芋艿：这里不提示；是不是组件得封装下；-->
             <template #tip> 建议尺寸：36 * 22 </template>
           </UploadImg>
         </FormItem>
@@ -144,6 +149,7 @@ const formData = useVModel(props, 'modelValue', emit);
               width="56px"
               :show-description="false"
             >
+              <!-- TODO @芋艿：这里不提示；是不是组件得封装下；-->
               <template #tip> 建议尺寸：56 * 56 </template>
             </UploadImg>
           </FormItem>

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

@@ -15,10 +15,9 @@ import { getSeckillActivityListByIds } from '#/api/mall/promotion/seckill/seckil
 
 /** 秒杀卡片 */
 defineOptions({ name: 'PromotionSeckill' });
-// 定义属性
 const props = defineProps<{ property: PromotionSeckillProperty }>();
-// 商品列表
-const spuList = ref<MallSpuApi.Spu[]>([]);
+
+const spuList = ref<MallSpuApi.Spu[]>([]); // 商品列表
 const spuIdList = ref<number[]>([]);
 const seckillActivityList = ref<MallSeckillActivityApi.SeckillActivity[]>([]);
 
@@ -28,7 +27,7 @@ watch(
     try {
       // 新添加的秒杀组件，是没有活动ID的
       const activityIds = props.property.activityIds;
-      // 检查活动ID的有效性
+      // 检查活动 ID 的有效性
       if (Array.isArray(activityIds) && activityIds.length > 0) {
         // 获取秒杀活动详情列表
         seckillActivityList.value =
@@ -66,36 +65,29 @@ watch(
   },
 );
 
-/**
- * 计算商品的间距
- * @param index 商品索引
- */
-const calculateSpace = (index: number) => {
-  // 商品的列数
-  const columns = props.property.layoutType === 'twoCol' ? 2 : 1;
-  // 第一列没有左边距
-  const marginLeft = index % columns === 0 ? '0' : `${props.property.space}px`;
-  // 第一行没有上边距
-  const marginTop = index < columns ? '0' : `${props.property.space}px`;
-
+/** 计算商品的间距 */
+function calculateSpace(index: number) {
+  const columns = props.property.layoutType === 'twoCol' ? 2 : 1; // 商品的列数
+  const marginLeft = index % columns === 0 ? '0' : `${props.property.space}px`; // 第一列没有左边距
+  const marginTop = index < columns ? '0' : `${props.property.space}px`; // 第一行没有上边距
   return { marginLeft, marginTop };
-};
+}
 
-// 容器
-const containerRef = ref();
-// 计算商品的宽度
-const calculateWidth = () => {
+const containerRef = ref(); // 容器
+
+/** 计算商品的宽度 */
+function calculateWidth() {
   let width = '100%';
-  // 双列时每列的宽度为：（总宽度 - 间距）/ 2
   if (props.property.layoutType === 'twoCol') {
+    // 双列时每列的宽度为：（总宽度 - 间距）/ 2
     width = `${(containerRef.value.offsetWidth - props.property.space) / 2}px`;
   }
   return { width };
-};
+}
 </script>
 <template>
   <div
-    class="box-content flex min-h-9 w-full flex-row flex-wrap"
+    class="box-content flex min-h-[30px] w-full flex-row flex-wrap"
     ref="containerRef"
   >
     <div
@@ -116,26 +108,34 @@ const calculateWidth = () => {
         v-if="property.badge.show"
         class="absolute left-0 top-0 z-[1] items-center justify-center"
       >
-        <Image fit="cover" :src="property.badge.imgUrl" class="h-6 w-8" />
+        <Image
+          :src="property.badge.imgUrl"
+          class="h-6 w-8 object-cover"
+          :preview="false"
+        />
       </div>
       <!-- 商品封面图 -->
       <div
-        class="h-36"
+        class="h-[140px]"
         :class="[
           {
             'w-full': property.layoutType !== 'oneColSmallImg',
-            'w-36': property.layoutType === 'oneColSmallImg',
+            'w-[140px]': property.layoutType === 'oneColSmallImg',
           },
         ]"
       >
-        <Image fit="cover" class="h-full w-full" :src="spu.picUrl" />
+        <Image
+          class="h-full w-full object-cover"
+          :src="spu.picUrl"
+          :preview="false"
+        />
       </div>
       <div
         class="box-border flex flex-col gap-2 p-2"
         :class="[
           {
             'w-full': property.layoutType !== 'oneColSmallImg',
-            'w-[calc(100vw-140px-16px)]':
+            'w-[calc(100%-140px-16px)]':
               property.layoutType === 'oneColSmallImg',
           },
         ]"
@@ -213,9 +213,9 @@ const calculateWidth = () => {
         <!-- 图片按钮 -->
         <Image
           v-else
-          class="size-7 rounded-full"
-          fit="cover"
+          class="size-7 rounded-full object-cover"
           :src="property.btnBuy.imgUrl"
+          :preview="false"
         />
       </div>
     </div>

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

@@ -19,8 +19,7 @@ import {
 
 import UploadImg from '#/components/upload/image-upload.vue';
 import { ColorInput } from '#/views/mall/promotion/components';
-// TODO: 添加组件
-// import { SeckillShowcase } from '#/views/mall/promotion/seckill/components';
+import { SeckillShowcase } from '#/views/mall/promotion/seckill/components';
 
 import ComponentContainerProperty from '../../component-container-property.vue';
 
@@ -36,7 +35,11 @@ const formData = useVModel(props, 'modelValue', emit);
 
 <template>
   <ComponentContainerProperty v-model="formData.style">
-    <Form :model="formData">
+    <Form
+      :model="formData"
+      :label-col="{ span: 6 }"
+      :wrapper-col="{ span: 18 }"
+    >
       <Card title="秒杀活动" class="property-group">
         <SeckillShowcase v-model="formData.activityIds" />
       </Card>
@@ -117,6 +120,7 @@ const formData = useVModel(props, 'modelValue', emit);
             width="72px"
             :show-description="false"
           >
+            <!-- TODO @芋艿：这里不提示；是不是组件得封装下；-->
             <template #tip> 建议尺寸：36 * 22 </template>
           </UploadImg>
         </FormItem>
@@ -147,6 +151,7 @@ const formData = useVModel(props, 'modelValue', emit);
               width="56px"
               :show-description="false"
             >
+              <!-- TODO @芋艿：这里不提示；是不是组件得封装下；-->
               <template #tip> 建议尺寸：56 * 56</template>
             </UploadImg>
           </FormItem>

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

@@ -5,19 +5,19 @@ import { IconifyIcon } from '@vben/icons';
 
 /** 搜索框 */
 defineOptions({ name: 'SearchBar' });
+
 defineProps<{ property: SearchProperty }>();
 </script>
 
 <template>
   <div
-    class="search-bar"
     :style="{
       color: property.textColor,
     }"
   >
     <!-- 搜索框 -->
     <div
-      class="inner"
+      class="relative flex min-h-7 items-center text-sm"
       :style="{
         height: `${property.height}px`,
         background: property.backgroundColor,
@@ -25,7 +25,7 @@ defineProps<{ property: SearchProperty }>();
       }"
     >
       <div
-        class="placeholder"
+        class="flex w-full items-center gap-0.5 overflow-hidden text-ellipsis whitespace-nowrap break-all px-2"
         :style="{
           justifyContent: property.placeholderPosition,
         }"
@@ -33,7 +33,7 @@ defineProps<{ property: SearchProperty }>();
         <IconifyIcon icon="lucide:search" />
         <span>{{ property.placeholder || '搜索商品' }}</span>
       </div>
-      <div class="right">
+      <div class="absolute right-2 flex items-center justify-center gap-2">
         <!-- 搜索热词 -->
         <span v-for="(keyword, index) in property.hotKeywords" :key="index">
           {{ keyword }}
@@ -44,37 +44,3 @@ defineProps<{ property: SearchProperty }>();
     </div>
   </div>
 </template>
-
-<style scoped lang="scss">
-.search-bar {
-  /* 搜索框 */
-  .inner {
-    position: relative;
-    display: flex;
-    align-items: center;
-    min-height: 28px;
-    font-size: 14px;
-
-    .placeholder {
-      display: flex;
-      gap: 2px;
-      align-items: center;
-      width: 100%;
-      padding: 0 8px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      word-break: break-all;
-      white-space: nowrap;
-    }
-
-    .right {
-      position: absolute;
-      right: 8px;
-      display: flex;
-      gap: 8px;
-      align-items: center;
-      justify-content: center;
-    }
-  }
-}
-</style>

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

@@ -48,7 +48,7 @@ watch(
 
 <template>
   <ComponentContainerProperty v-model="formData.style">
-    <Form :model="formData">
+    <Form :model="formData" :label-col="{ style: { width: '80px' } }">
       <Card title="搜索热词" class="property-group">
         <Draggable
           v-model="formData.hotKeywords"

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

@@ -11,9 +11,9 @@ defineOptions({ name: 'TabBar' });
 defineProps<{ property: TabBarProperty }>();
 </script>
 <template>
-  <div class="tab-bar">
+  <div class="z-[2] w-full">
     <div
-      class="tab-bar-bg"
+      class="flex flex-row items-center justify-around py-2"
       :style="{
         background:
           property.style.bgType === 'color'
@@ -26,12 +26,19 @@ defineProps<{ property: TabBarProperty }>();
       <div
         v-for="(item, index) in property.items"
         :key="index"
-        class="tab-bar-item"
+        class="flex w-full flex-col items-center justify-center text-xs"
       >
-        <Image :src="index === 0 ? item.activeIconUrl : item.iconUrl">
+        <Image
+          :src="index === 0 ? item.activeIconUrl : item.iconUrl"
+          class="!h-[26px] w-[26px] rounded"
+          :preview="false"
+        >
           <template #error>
             <div class="flex h-full w-full items-center justify-center">
-              <IconifyIcon icon="lucide:image" />
+              <IconifyIcon
+                icon="lucide:image"
+                class="h-[26px] w-[26px] rounded"
+              />
             </div>
           </template>
         </Image>
@@ -47,33 +54,3 @@ defineProps<{ property: TabBarProperty }>();
     </div>
   </div>
 </template>
-<style lang="scss" scoped>
-.tab-bar {
-  z-index: 2;
-  width: 100%;
-
-  .tab-bar-bg {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-around;
-    padding: 8px 0;
-
-    .tab-bar-item {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      width: 100%;
-      font-size: 12px;
-
-      :deep(img),
-      .el-icon {
-        width: 26px;
-        height: 26px;
-        border-radius: 4px;
-      }
-    }
-  }
-}
-</style>

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

@@ -22,7 +22,8 @@ import {
 } from '#/views/mall/promotion/components';
 
 import { component, THEME_LIST } from './config';
-// 底部导航栏
+
+/** 底部导航栏 */
 defineOptions({ name: 'TabBarProperty' });
 
 const props = defineProps<{ modelValue: TabBarProperty }>();
@@ -32,7 +33,7 @@ const formData = useVModel(props, 'modelValue', emit);
 // 将数据库的值更新到右侧属性栏
 component.property.items = formData.value.items;
 
-// 要的主题
+/** 处理主题变更 */
 const handleThemeChange = () => {
   const theme = THEME_LIST.find((theme) => theme.id === formData.value.theme);
   if (theme?.color) {
@@ -42,7 +43,7 @@ const handleThemeChange = () => {
 </script>
 
 <template>
-  <div class="tab-bar">
+  <div>
     <!-- 表单 -->
     <Form
       :model="formData"
@@ -87,6 +88,7 @@ const handleThemeChange = () => {
           class="min-w-[200px]"
           :show-description="false"
         >
+          <!-- TODO @芋艿：这里不提示；是不是组件得封装下；-->
           <template #tip> 建议尺寸 375 * 50 </template>
         </UploadImg>
       </FormItem>
@@ -142,5 +144,3 @@ const handleThemeChange = () => {
     </Form>
   </div>
 </template>
-
-<style lang="scss" scoped></style>

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

@@ -11,12 +11,15 @@ defineOptions({ name: 'TitleBar' });
 defineProps<{ property: TitleBarProperty }>();
 </script>
 <template>
-  <div class="title-bar" :style="{ height: `${property.height}px` }">
+  <div
+    class="relative box-border min-h-[20px] w-full"
+    :style="{ height: `${property.height}px` }"
+  >
     <Image
       v-if="property.bgImgUrl"
       :src="property.bgImgUrl"
-      fit="cover"
-      class="w-full"
+      :preview="false"
+      class="w-full object-cover"
     />
     <div
       class="absolute left-0 top-0 flex h-full w-full flex-col justify-center"
@@ -51,7 +54,7 @@ defineProps<{ property: TitleBarProperty }>();
     </div>
     <!-- 更多 -->
     <div
-      class="more"
+      class="absolute bottom-0 right-2 top-0 m-auto flex items-center justify-center text-[10px] text-[#969799]"
       v-show="property.more.show"
       :style="{
         color: property.descriptionColor,
@@ -67,25 +70,3 @@ defineProps<{ property: TitleBarProperty }>();
     </div>
   </div>
 </template>
-<style scoped lang="scss">
-.title-bar {
-  position: relative;
-  box-sizing: border-box;
-  width: 100%;
-  min-height: 20px;
-
-  /* 更多 */
-  .more {
-    position: absolute;
-    top: 0;
-    right: 8px;
-    bottom: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin: auto;
-    font-size: 10px;
-    color: #969799;
-  }
-}
-</style>

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

@@ -47,6 +47,7 @@ const rules = {}; // 表单校验
             height="40px"
             :show-description="false"
           >
+            <!-- TODO @芋艿：这里不提示；是不是组件得封装下；-->
             <template #tip>建议尺寸 750*80</template>
           </UploadImg>
         </FormItem>

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

@@ -14,12 +14,12 @@ defineProps<{ property: UserCardProperty }>();
   <div class="flex flex-col">
     <div class="flex items-center justify-between px-4 py-6">
       <div class="flex flex-1 items-center gap-4">
-        <Avatar class="size-14">
-          <IconifyIcon icon="lucide:user" class="size-14" />
+        <Avatar :size="60">
+          <IconifyIcon icon="ep:avatar" :size="60" />
         </Avatar>
-        <span class="text-lg font-bold">芋道源码</span>
+        <span class="text-[18px] font-bold">芋道源码</span>
       </div>
-      <IconifyIcon icon="lucide:qr-code" class="size-5" />
+      <IconifyIcon icon="tdesign:qrcode" :size="20" />
     </div>
     <div class="bg-card flex items-center justify-between px-5 py-2 text-xs">
       <span class="text-orange-500">点击绑定手机号</span>

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

@@ -5,11 +5,13 @@ import { useVModel } from '@vueuse/core';
 
 import ComponentContainerProperty from '../../component-container-property.vue';
 
-// 用户卡片属性面板
+/** 用户卡片属性面板 */
 defineOptions({ name: 'UserCardProperty' });
 
 const props = defineProps<{ modelValue: UserCardProperty }>();
+
 const emit = defineEmits(['update:modelValue']);
+
 const formData = useVModel(props, 'modelValue', emit);
 </script>
 

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

@@ -2,11 +2,10 @@ import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 用户卡券属性 */
 export interface UserCouponProperty {
-  // 组件样式
-  style: ComponentStyle;
+  style: ComponentStyle; // 组件样式
 }
 
-// 定义组件
+/** 定义组件 */
 export const component = {
   id: 'UserCoupon',
   name: '用户卡券',

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

@@ -11,5 +11,6 @@ defineProps<{ property: UserCouponProperty }>();
 <template>
   <Image
     src="https://shopro.sheepjs.com/admin/static/images/shop/decorate/couponCardStyle.png"
+    :preview="false"
   />
 </template>

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

@@ -5,11 +5,13 @@ import { Image } from 'ant-design-vue';
 
 /** 用户订单 */
 defineOptions({ name: 'UserOrder' });
-// 定义属性
+
+/** 定义属性 */
 defineProps<{ property: UserOrderProperty }>();
 </script>
 <template>
   <Image
     src="https://shopro.sheepjs.com/admin/static/images/shop/decorate/orderCardStyle.png"
+    :preview="false"
   />
 </template>

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

@@ -5,11 +5,13 @@ import { useVModel } from '@vueuse/core';
 
 import ComponentContainerProperty from '../../component-container-property.vue';
 
-// 用户订单属性面板
+/** 用户订单属性面板 */
 defineOptions({ name: 'UserOrderProperty' });
 
 const props = defineProps<{ modelValue: UserOrderProperty }>();
+
 const emit = defineEmits(['update:modelValue']);
+
 const formData = useVModel(props, 'modelValue', emit);
 </script>
 

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

@@ -5,11 +5,13 @@ import { Image } from 'ant-design-vue';
 
 /** 用户资产 */
 defineOptions({ name: 'UserWallet' });
-// 定义属性
+
+/** 定义属性 */
 defineProps<{ property: UserWalletProperty }>();
 </script>
 <template>
   <Image
     src="https://shopro.sheepjs.com/admin/static/images/shop/decorate/walletCardStyle.png"
+    :preview="false"
   />
 </template>

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

@@ -5,11 +5,13 @@ import { useVModel } from '@vueuse/core';
 
 import ComponentContainerProperty from '../../component-container-property.vue';
 
-// 用户资产属性面板
+/** 用户资产属性面板 */
 defineOptions({ name: 'UserWalletProperty' });
 
 const props = defineProps<{ modelValue: UserWalletProperty }>();
+
 const emit = defineEmits(['update:modelValue']);
+
 const formData = useVModel(props, 'modelValue', emit);
 </script>
 

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

@@ -14,6 +14,7 @@ defineProps<{ property: VideoPlayerProperty }>();
       class="h-full w-full"
       :src="property.posterUrl"
       v-if="property.posterUrl"
+      :preview="false"
     />
     <video
       v-else

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

@@ -9,11 +9,13 @@ import UploadImg from '#/components/upload/image-upload.vue';
 
 import ComponentContainerProperty from '../../component-container-property.vue';
 
-// 视频播放属性面板
+/** 视频播放属性面板 */
 defineOptions({ name: 'VideoPlayerProperty' });
 
 const props = defineProps<{ modelValue: VideoPlayerProperty }>();
+
 const emit = defineEmits(['update:modelValue']);
+
 const formData = useVModel(props, 'modelValue', emit);
 </script>
 
@@ -47,6 +49,7 @@ const formData = useVModel(props, 'modelValue', emit);
           class="min-w-[80px]"
           :show-description="false"
         >
+          <!-- TODO @芋艿：这里不提示；是不是组件得封装下；-->
           <template #tip> 建议宽度750 </template>
         </UploadImg>
       </FormItem>

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

@@ -38,6 +38,12 @@ const props = defineProps({
 
 const emits = defineEmits(['reset', 'save', 'update:modelValue']); // 工具栏操作
 
+// TODO @xingyu：要不要加这个？
+// const qrcode = useQRCode(props.previewUrl, {
+//   errorCorrectionLevel: 'H',
+//   margin: 4,
+// }); // 预览二维码
+
 const componentLibrary = ref(); // 左侧组件库
 const pageConfigComponent = ref<DiyComponent<any>>(
   cloneDeep(PAGE_CONFIG_COMPONENT),
@@ -169,6 +175,7 @@ function handleComponentSelected(
   index: number = -1,
 ) {
   // 使用深拷贝避免响应式追踪循环警告
+  // TODO @xingyu：这个是必须的么？ele 没有哈。
   selectedComponent.value = cloneDeep(component);
   selectedComponentIndex.value = index;
 }
@@ -308,17 +315,17 @@ onMounted(() => {
         >
           <Tooltip title="重置">
             <Button @click="handleReset">
-              <IconifyIcon class="size-6" icon="lucide:refresh-cw" />
+              <IconifyIcon class="size-5" icon="lucide:refresh-cw" />
             </Button>
           </Tooltip>
           <Tooltip v-if="previewUrl" title="预览">
             <Button @click="handlePreview">
-              <IconifyIcon class="size-6" icon="lucide:eye" />
+              <IconifyIcon class="size-5" icon="lucide:eye" />
             </Button>
           </Tooltip>
           <Tooltip title="保存">
             <Button @click="handleSave">
-              <IconifyIcon class="size-6" icon="lucide:check" />
+              <IconifyIcon class="size-5" icon="lucide:check" />
             </Button>
           </Tooltip>
         </Button.Group>
@@ -501,4 +508,5 @@ onMounted(() => {
       </div>
     </PreviewModal>
   </Page>
+  <!-- TODO @xingyu：这里改造完后，类似 web-ele/src/views/mall/promotion/components/diy-editor/index.vue 里的全局样式（递推到子组件）里的就没没了，类似 property-group -->
 </template>