From d8f4979a476d8353c280e4d9881faefc407deed5 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sat, 25 Oct 2025 21:02:09 +0800
Subject: [PATCH 1/5] =?UTF-8?q?feat=EF=BC=9A=E3=80=90ele=E3=80=91=E3=80=90?=
 =?UTF-8?q?mall=E3=80=91diy/page=20=E4=BB=A3=E7=A0=81=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../web-ele/src/router/routes/modules/mall.ts |   4 +-
 .../promotion/components/diy-editor/index.vue |   2 +-
 .../decorate.vue => decorate/index.vue}       |   0
 .../views/mall/promotion/diy/template/data.ts |   7 +-
 .../decorate.vue => decorate/index.vue}       | 140 ++++++++----------
 .../mall/promotion/diy/template/index.vue     |  22 ++-
 .../promotion/diy/template/modules/form.vue   |  13 +-
 7 files changed, 86 insertions(+), 102 deletions(-)
 rename apps/web-ele/src/views/mall/promotion/diy/page/{modules/decorate.vue => decorate/index.vue} (100%)
 rename apps/web-ele/src/views/mall/promotion/diy/template/{modules/decorate.vue => decorate/index.vue} (68%)

diff --git a/apps/web-ele/src/router/routes/modules/mall.ts b/apps/web-ele/src/router/routes/modules/mall.ts
index 6d9303943..1c2f40496 100644
--- a/apps/web-ele/src/router/routes/modules/mall.ts
+++ b/apps/web-ele/src/router/routes/modules/mall.ts
@@ -98,7 +98,7 @@ const routes: RouteRecordRaw[] = [
           activePath: '/mall/promotion/diy-template/diy-template',
         },
         component: () =>
-          import('#/views/mall/promotion/diy/template/modules/decorate.vue'),
+          import('#/views/mall/promotion/diy/template/decorate/index.vue'),
       },
       {
         path: 'page/decorate/:id',
@@ -110,7 +110,7 @@ const routes: RouteRecordRaw[] = [
           activePath: '/mall/promotion/diy-template/diy-page',
         },
         component: () =>
-          import('#/views/mall/promotion/diy/page/modules/decorate.vue'),
+          import('#/views/mall/promotion/diy/page/decorate/index.vue'),
       },
     ],
   },
diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/index.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/index.vue
index b2e5a2556..f9f7d9c89 100644
--- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/diy-editor/index.vue
@@ -267,7 +267,7 @@ const handleDeleteComponent = (index: number) => {
 };
 
 // 注入无感刷新页面函数
-const reload = inject<() => void>('reload');
+const reload = inject<() => void>('reload'); // TODO @芋艿：是 vue3 + element-plus 独有的，可以清理掉。
 // 重置
 const handleReset = () => {
   if (reload) reload();
diff --git a/apps/web-ele/src/views/mall/promotion/diy/page/modules/decorate.vue b/apps/web-ele/src/views/mall/promotion/diy/page/decorate/index.vue
similarity index 100%
rename from apps/web-ele/src/views/mall/promotion/diy/page/modules/decorate.vue
rename to apps/web-ele/src/views/mall/promotion/diy/page/decorate/index.vue
diff --git a/apps/web-ele/src/views/mall/promotion/diy/template/data.ts b/apps/web-ele/src/views/mall/promotion/diy/template/data.ts
index ca09c59fa..e3c8f1421 100644
--- a/apps/web-ele/src/views/mall/promotion/diy/template/data.ts
+++ b/apps/web-ele/src/views/mall/promotion/diy/template/data.ts
@@ -3,6 +3,8 @@ import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 
 import { DICT_TYPE } from '@vben/constants';
 
+import { getRangePickerDefaultProps } from '#/utils';
+
 /** 表单配置 */
 export function useFormSchema(): VbenFormSchema[] {
   return [
@@ -61,9 +63,8 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '创建时间',
       component: 'RangePicker',
       componentProps: {
-        placeholder: ['开始时间', '结束时间'],
-        clearable: true,
-        valueFormat: 'YYYY-MM-DD HH:mm:ss',
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
       },
     },
   ];
diff --git a/apps/web-ele/src/views/mall/promotion/diy/template/modules/decorate.vue b/apps/web-ele/src/views/mall/promotion/diy/template/decorate/index.vue
similarity index 68%
rename from apps/web-ele/src/views/mall/promotion/diy/template/modules/decorate.vue
rename to apps/web-ele/src/views/mall/promotion/diy/template/decorate/index.vue
index 6beff4f2b..566dc0d5e 100644
--- a/apps/web-ele/src/views/mall/promotion/diy/template/modules/decorate.vue
+++ b/apps/web-ele/src/views/mall/promotion/diy/template/decorate/index.vue
@@ -3,67 +3,75 @@ import type { MallDiyPageApi } from '#/api/mall/promotion/diy/page';
 import type { MallDiyTemplateApi } from '#/api/mall/promotion/diy/template';
 import type { DiyComponentLibrary } from '#/views/mall/promotion/components'; // 商城的 DIY 组件，在 DiyEditor 目录下
 
-import { onMounted, reactive, ref, unref } from 'vue';
-import { useRouter } from 'vue-router';
+import { onMounted, reactive, ref } from 'vue';
+import { useRoute } from 'vue-router';
 
+import { useTabs } from '@vben/hooks';
 import { IconifyIcon } from '@vben/icons';
 import { useAccessStore } from '@vben/stores';
 import { isEmpty } from '@vben/utils';
 
-import { ElMessage } from 'element-plus';
+import {
+  ElLoading,
+  ElMessage,
+  ElRadioButton,
+  ElRadioGroup,
+  ElTooltip,
+} from 'element-plus';
 
 import * as DiyPageApi from '#/api/mall/promotion/diy/page';
-// TODO @疯狂：要不要建个 decorate 目录，然后挪进去，改成 index.vue，这样可以更明确看到是个独立界面哈，更好找
 import * as DiyTemplateApi from '#/api/mall/promotion/diy/template';
 import { DiyEditor, PAGE_LIBS } from '#/views/mall/promotion/components';
 
 /** 装修模板表单 */
 defineOptions({ name: 'DiyTemplateDecorate' });
 
-// 左上角工具栏操作按钮
+const route = useRoute();
+const { refreshTab } = useTabs();
+
+const DIY_PAGE_INDEX_KEY = 'diy_page_index'; // 特殊：存储 reset 重置时，当前 selectedTemplateItem 值，从而进行恢复
+
 const selectedTemplateItem = ref(0);
 const templateItems = reactive([
   { name: '基础设置', icon: 'ep:iphone' },
   { name: '首页', icon: 'ep:home-filled' },
   { name: '我的', icon: 'ep:user-filled' },
-]);
+]); // 左上角工具栏操作按钮
 
-const formLoading = ref(false); // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
 const formData = ref<MallDiyTemplateApi.DiyTemplateProperty>();
-const formRef = ref(); // 表单 Ref
-// 当前编辑的属性
 const currentFormData = ref<
   MallDiyPageApi.DiyPage | MallDiyTemplateApi.DiyTemplateProperty
 >({
   property: '',
-} as MallDiyPageApi.DiyPage);
-// templateItem 对应的缓存
+} as MallDiyPageApi.DiyPage); // 当前编辑的属性
 const currentFormDataMap = ref<
   Map<string, MallDiyPageApi.DiyPage | MallDiyTemplateApi.DiyTemplateProperty>
->(new Map());
-// 商城 H5 预览地址
-const previewUrl = ref('');
+>(new Map()); // templateItem 对应的缓存
 
-// 获取详情
-const getPageDetail = async (id: any) => {
-  formLoading.value = true;
+const previewUrl = ref(''); // 商城 H5 预览地址
+
+const templateLibs = [] as DiyComponentLibrary[]; // 模板组件库
+const libs = ref<DiyComponentLibrary[]>(templateLibs); // 当前组件库
+
+/** 获取详情 */
+async function getPageDetail(id: any) {
+  const loadingInstance = ElLoading.service({
+    text: '加载中...',
+  });
   try {
     formData.value = await DiyTemplateApi.getDiyTemplateProperty(id);
+
     // 拼接手机预览链接
     const domain = import.meta.env.VITE_MALL_H5_DOMAIN;
     const accessStore = useAccessStore();
     previewUrl.value = `${domain}?templateId=${formData.value.id}&${accessStore.tenantId}`;
   } finally {
-    formLoading.value = false;
+    loadingInstance.close();
   }
-};
+}
 
-// 模板组件库
-const templateLibs = [] as DiyComponentLibrary[];
-// 当前组件库
-const libs = ref<DiyComponentLibrary[]>(templateLibs);
-// 模板选项切换
-const handleTemplateItemChange = (val: number) => {
+/** 模板选项切换 */
+function handleTemplateItemChange(val: any) {
   // 缓存模版编辑数据
   currentFormDataMap.value.set(
     templateItems[selectedTemplateItem.value]?.name || '',
@@ -74,7 +82,8 @@ const handleTemplateItemChange = (val: number) => {
 
   // 切换模版
   selectedTemplateItem.value = val;
-  // 编辑模板
+
+  // 情况一：编辑模板
   if (val === 0) {
     libs.value = templateLibs;
     currentFormData.value = (isEmpty(data) ? formData.value : data) as
@@ -83,7 +92,7 @@ const handleTemplateItemChange = (val: number) => {
     return;
   }
 
-  // 编辑页面
+  // 情况二：编辑页面
   libs.value = PAGE_LIBS;
   currentFormData.value = (
     isEmpty(data)
@@ -93,14 +102,13 @@ const handleTemplateItemChange = (val: number) => {
         )
       : data
   ) as MallDiyPageApi.DiyPage | MallDiyTemplateApi.DiyTemplateProperty;
-};
+}
 
-// 提交表单
-const submitForm = async () => {
-  // 校验表单
-  if (!formRef.value) return;
-  // 提交请求
-  formLoading.value = true;
+/** 提交表单 */
+async function submitForm() {
+  const loadingInstance = ElLoading.service({
+    text: '保存中...',
+  });
   try {
     // 对所有的 templateItems 都进行保存，有缓存则保存缓存，解决都有修改时只保存了当前所编辑的 templateItem，导致装修效果存在差异
     for (const [i, templateItem] of templateItems.entries()) {
@@ -109,14 +117,14 @@ const submitForm = async () => {
       if (i === 0) {
         // 提交模板属性
         await DiyTemplateApi.updateDiyTemplateProperty(
-          isEmpty(data) ? unref(formData)! : data,
+          isEmpty(data) ? formData.value! : data,
         );
         continue;
       }
       // 提交页面属性
       // 情况二：提交当前正在编辑的页面
       if (currentFormData.value?.name.includes(templateItem.name)) {
-        await DiyPageApi.updateDiyPageProperty(unref(currentFormData)!);
+        await DiyPageApi.updateDiyPageProperty(currentFormData.value!);
         continue;
       }
       // 情况三：提交页面编辑缓存
@@ -126,36 +134,18 @@ const submitForm = async () => {
     }
     ElMessage.success('保存成功');
   } finally {
-    formLoading.value = false;
+    loadingInstance.close();
   }
-};
+}
 
-// 重置表单
-const resetForm = () => {
-  formData.value = {
-    id: undefined,
-    name: '',
-    used: false,
-    usedTime: undefined,
-    remark: '',
-    previewPicUrls: [],
-    property: '',
-    pages: [],
-  } as MallDiyTemplateApi.DiyTemplateProperty;
-  formRef.value?.resetFields();
-};
-
-// 重置时记录当前编辑的页面
-const handleEditorReset = () => storePageIndex();
-
-// #region 无感刷新
-// 记录标识
-const DIY_PAGE_INDEX_KEY = 'diy_page_index';
-// 1. 记录
-const storePageIndex = () =>
+/** 刷新当前 Tab */
+function handleEditorReset() {
   sessionStorage.setItem(DIY_PAGE_INDEX_KEY, `${selectedTemplateItem.value}`);
-// 2. 恢复
-const recoverPageIndex = () => {
+  refreshTab();
+}
+
+/** 恢复当前 Tab 之前的 index（selectedTemplateItem） */
+function recoverPageIndex() {
   // 恢复重置前的页面，默认是第一个页面
   const pageIndex = Number(sessionStorage.getItem(DIY_PAGE_INDEX_KEY)) || 0;
   // 移除标记
@@ -173,26 +163,24 @@ const recoverPageIndex = () => {
   if (pageIndex !== selectedTemplateItem.value) {
     handleTemplateItemChange(pageIndex);
   }
-};
-// #endregion
+}
 
 /** 初始化 */
-const { currentRoute } = useRouter();
 onMounted(async () => {
-  resetForm();
-  if (!currentRoute.value.params.id) {
+  if (!route.params.id) {
     ElMessage.warning('参数错误，页面编号不能为空！');
     return;
   }
   // 查询详情
-  await getPageDetail(currentRoute.value.params.id);
+  formData.value = {} as MallDiyTemplateApi.DiyTemplateProperty;
+  await getPageDetail(route.params.id);
   // 恢复重置前的页面
   recoverPageIndex();
 });
 </script>
 <template>
   <DiyEditor
-    v-if="formData && !formLoading"
+    v-if="formData?.id"
     v-model="currentFormData!.property"
     :libs="libs"
     :preview-url="previewUrl"
@@ -204,21 +192,21 @@ onMounted(async () => {
     @save="submitForm"
   >
     <template #toolBarLeft>
-      <el-radio-group
+      <ElRadioGroup
         :model-value="selectedTemplateItem"
         class="h-full!"
         @change="handleTemplateItemChange"
       >
-        <el-tooltip
+        <ElTooltip
           v-for="(item, index) in templateItems"
           :key="index"
           :content="item.name"
         >
-          <el-radio-button :value="index">
+          <ElRadioButton :value="index">
             <IconifyIcon :icon="item.icon" :size="24" />
-          </el-radio-button>
-        </el-tooltip>
-      </el-radio-group>
+          </ElRadioButton>
+        </ElTooltip>
+      </ElRadioGroup>
     </template>
   </DiyEditor>
 </template>
diff --git a/apps/web-ele/src/views/mall/promotion/diy/template/index.vue b/apps/web-ele/src/views/mall/promotion/diy/template/index.vue
index 74abcb732..456b50d13 100644
--- a/apps/web-ele/src/views/mall/promotion/diy/template/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/diy/template/index.vue
@@ -33,32 +33,38 @@ function handleRefresh() {
   gridApi.query();
 }
 
-/** 创建DIY模板 */
+/** 创建 DIY 模板 */
 function handleCreate() {
   formModalApi.setData(null).open();
 }
 
-/** 编辑DIY模板 */
+/** 编辑 DIY 模板 */
 function handleEdit(row: MallDiyTemplateApi.DiyTemplate) {
   formModalApi.setData(row).open();
 }
 
 /** 装修模板 */
 function handleDecorate(row: MallDiyTemplateApi.DiyTemplate) {
-  // 跳转到装修页面
   router.push({ name: 'DiyTemplateDecorate', params: { id: row.id } });
 }
 
 /** 使用模板 */
 async function handleUse(row: MallDiyTemplateApi.DiyTemplate) {
   await confirm(`是否使用模板"${row.name}"?`);
-  // 发起删除
-  await useDiyTemplate(row.id as number);
-  ElMessage.success('使用成功');
-  handleRefresh();
+  
+  const loadingInstance = ElLoading.service({
+    text: `正在使用模板"${row.name}"...`,
+  });
+  try {
+    await useDiyTemplate(row.id as number);
+    ElMessage.success('使用成功');
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
 }
 
-/** 删除DIY模板 */
+/** 删除 DIY 模板 */
 async function handleDelete(row: MallDiyTemplateApi.DiyTemplate) {
   const loadingInstance = ElLoading.service({
     text: $t('ui.actionMessage.deleting', [row.name]),
diff --git a/apps/web-ele/src/views/mall/promotion/diy/template/modules/form.vue b/apps/web-ele/src/views/mall/promotion/diy/template/modules/form.vue
index 886d3946e..8e088d7cf 100644
--- a/apps/web-ele/src/views/mall/promotion/diy/template/modules/form.vue
+++ b/apps/web-ele/src/views/mall/promotion/diy/template/modules/form.vue
@@ -16,9 +16,7 @@ import { $t } from '#/locales';
 
 import { useFormSchema } from '../data';
 
-/** 提交表单 */
 const emit = defineEmits(['success']);
-
 const formData = ref<MallDiyTemplateApi.DiyTemplate>();
 const getTitle = computed(() => {
   return formData.value?.id
@@ -47,15 +45,6 @@ const [Modal, modalApi] = useVbenModal({
     modalApi.lock();
     // 提交表单
     const data = (await formApi.getValues()) as MallDiyTemplateApi.DiyTemplate;
-
-    // 确保必要的默认值
-    if (!data.previewPicUrls) {
-      data.previewPicUrls = [];
-    }
-    if (data.used === undefined) {
-      data.used = false;
-    }
-
     try {
       await (formData.value?.id
         ? updateDiyTemplate(data)
@@ -91,7 +80,7 @@ const [Modal, modalApi] = useVbenModal({
 </script>
 
 <template>
-  <Modal class="w-2/5" :title="getTitle">
+  <Modal :title="getTitle" class="w-2/5">
     <Form />
   </Modal>
 </template>

From 5e259eb685f70626b2d578d40d01f275a07d5469 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sat, 25 Oct 2025 21:27:37 +0800
Subject: [PATCH 2/5] =?UTF-8?q?feat=EF=BC=9A=E3=80=90antd=E3=80=91?=
 =?UTF-8?q?=E3=80=90mall=E3=80=91diy=20=E4=B8=BB=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E7=9A=84=E8=BF=81=E7=A7=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/api/mall/promotion/diy/page.ts        |  20 +-
 .../src/api/mall/promotion/diy/template.ts    |  24 +-
 .../src/router/routes/modules/mall.ts         |  34 +++
 .../promotion/components/diy-editor/index.vue |  44 ++++
 .../promotion/components/diy-editor/util.ts   | 125 +++++++++++
 .../views/mall/promotion/components/index.ts  |   2 +
 .../src/views/mall/promotion/diy/page/data.ts |   7 +-
 .../promotion/diy/page/decorate/index.vue     |  64 ++++++
 .../views/mall/promotion/diy/page/index.vue   |  16 +-
 .../mall/promotion/diy/page/modules/form.vue  |   8 +-
 .../views/mall/promotion/diy/template/data.ts |   7 +-
 .../promotion/diy/template/decorate/index.vue | 208 ++++++++++++++++++
 .../mall/promotion/diy/template/index.vue     |  34 ++-
 .../promotion/diy/template/modules/form.vue   |  13 +-
 .../mall/promotion/diy/template/index.vue     |   1 -
 15 files changed, 552 insertions(+), 55 deletions(-)
 create mode 100644 apps/web-antd/src/views/mall/promotion/components/diy-editor/index.vue
 create mode 100644 apps/web-antd/src/views/mall/promotion/components/diy-editor/util.ts
 create mode 100644 apps/web-antd/src/views/mall/promotion/diy/page/decorate/index.vue
 create mode 100644 apps/web-antd/src/views/mall/promotion/diy/template/decorate/index.vue

diff --git a/apps/web-antd/src/api/mall/promotion/diy/page.ts b/apps/web-antd/src/api/mall/promotion/diy/page.ts
index d332cc09e..afdface5a 100644
--- a/apps/web-antd/src/api/mall/promotion/diy/page.ts
+++ b/apps/web-antd/src/api/mall/promotion/diy/page.ts
@@ -5,12 +5,18 @@ import { requestClient } from '#/api/request';
 export namespace MallDiyPageApi {
   /** 装修页面 */
   export interface DiyPage {
-    id?: number; // 页面编号
-    templateId?: number; // 模板编号
-    name: string; // 页面名称
-    remark: string; // 备注
-    previewPicUrls: string[]; // 预览图片地址数组
-    property: string; // 页面属性
+    /** 页面编号 */
+    id?: number;
+    /** 模板编号 */
+    templateId?: number;
+    /** 页面名称 */
+    name: string;
+    /** 备注 */
+    remark: string;
+    /** 预览图片地址数组 */
+    previewPicUrls: string[];
+    /** 页面属性 */
+    property: string;
   }
 }
 
@@ -46,7 +52,7 @@ export function deleteDiyPage(id: number) {
 
 /** 获得装修页面属性 */
 export function getDiyPageProperty(id: number) {
-  return requestClient.get<string>(`/promotion/diy-page/get-property?id=${id}`);
+  return requestClient.get(`/promotion/diy-page/get-property?id=${id}`);
 }
 
 /** 更新装修页面属性 */
diff --git a/apps/web-antd/src/api/mall/promotion/diy/template.ts b/apps/web-antd/src/api/mall/promotion/diy/template.ts
index 9b7596e85..f7d82d352 100644
--- a/apps/web-antd/src/api/mall/promotion/diy/template.ts
+++ b/apps/web-antd/src/api/mall/promotion/diy/template.ts
@@ -7,18 +7,26 @@ import { requestClient } from '#/api/request';
 export namespace MallDiyTemplateApi {
   /** 装修模板 */
   export interface DiyTemplate {
-    id?: number; // 模板编号
-    name: string; // 模板名称
-    used: boolean; // 是否使用
-    usedTime?: Date; // 使用时间
-    remark: string; // 备注
-    previewPicUrls: string[]; // 预览图片地址数组
-    property: string; // 模板属性
+    /** 模板编号 */
+    id?: number;
+    /** 模板名称 */
+    name: string;
+    /** 是否使用 */
+    used: boolean;
+    /** 使用时间 */
+    usedTime?: Date;
+    /** 备注 */
+    remark: string;
+    /** 预览图片地址数组 */
+    previewPicUrls: string[];
+    /** 模板属性 */
+    property: string;
   }
 
   /** 装修模板属性（包含页面列表） */
   export interface DiyTemplateProperty extends DiyTemplate {
-    pages: MallDiyPageApi.DiyPage[]; // 页面列表
+    /** 页面列表 */
+    pages: MallDiyPageApi.DiyPage[];
   }
 }
 
diff --git a/apps/web-antd/src/router/routes/modules/mall.ts b/apps/web-antd/src/router/routes/modules/mall.ts
index 870c111f5..db8fcab5e 100644
--- a/apps/web-antd/src/router/routes/modules/mall.ts
+++ b/apps/web-antd/src/router/routes/modules/mall.ts
@@ -71,6 +71,40 @@ const routes: RouteRecordRaw[] = [
       },
     ],
   },
+  {
+    path: '/diy',
+    name: 'DiyCenter',
+    meta: {
+      title: '营销中心',
+      icon: 'lucide:shopping-bag',
+      keepAlive: true,
+      hideInMenu: true,
+    },
+    children: [
+      {
+        path: String.raw`template/decorate/:id(\d+)`,
+        name: 'DiyTemplateDecorate',
+        meta: {
+          title: '模板装修',
+          activePath: '/mall/promotion/diy-template/diy-template',
+        },
+        component: () =>
+          import('#/views/mall/promotion/diy/template/decorate/index.vue'),
+      },
+      {
+        path: 'page/decorate/:id',
+        name: 'DiyPageDecorate',
+        meta: {
+          title: '页面装修',
+          noCache: false,
+          hidden: true,
+          activePath: '/mall/promotion/diy-template/diy-page',
+        },
+        component: () =>
+          import('#/views/mall/promotion/diy/page/decorate/index.vue'),
+      },
+    ],
+  },
 ];
 
 export default routes;
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/index.vue
new file mode 100644
index 000000000..4f0124fe3
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/index.vue
@@ -0,0 +1,44 @@
+<template>
+  <div class="diy-editor-placeholder">
+    <div class="text-center py-20">
+      <h2>DiyEditor 组件</h2>
+      <p class="text-gray-500">此组件待实现</p>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+// 暂时的占位符组件
+// TODO: 实现完整的 DiyEditor 功能
+
+interface Props {
+  modelValue?: any;
+  title?: string;
+  libs?: any[];
+  previewUrl?: string;
+  showNavigationBar?: boolean;
+  showPageConfig?: boolean;
+  showTabBar?: boolean;
+}
+
+defineProps<Props>();
+
+const emit = defineEmits<{
+  'update:modelValue': [value: any];
+  save: [];
+  reset: [];
+}>();
+
+// 占位符，暂时什么都不做
+</script>
+
+<style scoped>
+.diy-editor-placeholder {
+  min-height: 400px;
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/util.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/util.ts
new file mode 100644
index 000000000..b273e8a92
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/util.ts
@@ -0,0 +1,125 @@
+// 页面装修组件
+export interface DiyComponent<T> {
+  // 用于区分同一种组件的不同实例
+  uid?: number;
+  // 组件唯一标识
+  id: string;
+  // 组件名称
+  name: string;
+  // 组件图标
+  icon: string;
+  /*
+   组件位置：
+   top: 固定于手机顶部，例如 顶部的导航栏
+   bottom: 固定于手机底部，例如 底部的菜单导航栏
+   center: 位于手机中心，每个组件占一行，顺序向下排列
+   空：同center
+   fixed: 由组件自己决定位置，如弹窗位于手机中心、浮动按钮一般位于手机右下角
+  */
+  position?: '' | 'bottom' | 'center' | 'fixed' | 'top';
+  // 组件属性
+  property: T;
+}
+
+// 页面装修组件库
+export interface DiyComponentLibrary {
+  // 组件库名称
+  name: string;
+  // 是否展开
+  extended: boolean;
+  // 组件列表
+  components: string[];
+}
+
+// 组件样式
+export interface ComponentStyle {
+  // 背景类型
+  bgType: 'color' | 'img';
+  // 背景颜色
+  bgColor: string;
+  // 背景图片
+  bgImg: string;
+  // 外边距
+  margin: number;
+  marginTop: number;
+  marginRight: number;
+  marginBottom: number;
+  marginLeft: number;
+  // 内边距
+  padding: number;
+  paddingTop: number;
+  paddingRight: number;
+  paddingBottom: number;
+  paddingLeft: number;
+  // 边框圆角
+  borderRadius: number;
+  borderTopLeftRadius: number;
+  borderTopRightRadius: number;
+  borderBottomRightRadius: number;
+  borderBottomLeftRadius: number;
+}
+
+// 页面配置
+export interface PageConfig {
+  // 页面属性
+  page: any;
+  // 顶部导航栏属性
+  navigationBar: any;
+  // 底部导航菜单属性
+  tabBar?: any;
+  // 页面组件列表
+  components: PageComponent[];
+}
+// 页面组件，只保留组件ID，组件属性
+export type PageComponent = Pick<DiyComponent<any>, 'id' | 'property'>;
+
+// 页面组件库
+export const PAGE_LIBS = [
+  {
+    name: '基础组件',
+    extended: true,
+    components: [
+      'SearchBar',
+      'NoticeBar',
+      'MenuSwiper',
+      'MenuGrid',
+      'MenuList',
+      'Popover',
+      'FloatingActionButton',
+    ],
+  },
+  {
+    name: '图文组件',
+    extended: true,
+    components: [
+      'ImageBar',
+      'Carousel',
+      'TitleBar',
+      'VideoPlayer',
+      'Divider',
+      'MagicCube',
+      'HotZone',
+    ],
+  },
+  {
+    name: '商品组件',
+    extended: true,
+    components: ['ProductCard', 'ProductList'],
+  },
+  {
+    name: '用户组件',
+    extended: true,
+    components: ['UserCard', 'UserOrder', 'UserWallet', 'UserCoupon'],
+  },
+  {
+    name: '营销组件',
+    extended: true,
+    components: [
+      'PromotionCombination',
+      'PromotionSeckill',
+      'PromotionPoint',
+      'CouponCard',
+      'PromotionArticle',
+    ],
+  },
+] as DiyComponentLibrary[];
diff --git a/apps/web-antd/src/views/mall/promotion/components/index.ts b/apps/web-antd/src/views/mall/promotion/components/index.ts
index b28e0c632..a382904c1 100644
--- a/apps/web-antd/src/views/mall/promotion/components/index.ts
+++ b/apps/web-antd/src/views/mall/promotion/components/index.ts
@@ -1,3 +1,5 @@
+export { default as DiyEditor } from './diy-editor/index.vue';
+export { type DiyComponentLibrary, PAGE_LIBS } from './diy-editor/util';
 export { default as SpuAndSkuList } from './spu-and-sku-list.vue';
 export { default as SpuSkuSelect } from './spu-sku-select.vue';
 
diff --git a/apps/web-antd/src/views/mall/promotion/diy/page/data.ts b/apps/web-antd/src/views/mall/promotion/diy/page/data.ts
index 5e6682825..cec26ffcf 100644
--- a/apps/web-antd/src/views/mall/promotion/diy/page/data.ts
+++ b/apps/web-antd/src/views/mall/promotion/diy/page/data.ts
@@ -1,6 +1,8 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 
+import { getRangePickerDefaultProps } from '#/utils';
+
 /** 表单配置 */
 export function useFormSchema(): VbenFormSchema[] {
   return [
@@ -51,7 +53,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       component: 'Input',
       componentProps: {
         placeholder: '请输入页面名称',
-        allowClear: true,
+        clearable: true,
       },
     },
     {
@@ -59,9 +61,8 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '创建时间',
       component: 'RangePicker',
       componentProps: {
-        placeholder: ['开始时间', '结束时间'],
+        ...getRangePickerDefaultProps(),
         allowClear: true,
-        valueFormat: 'YYYY-MM-DD HH:mm:ss',
       },
     },
   ];
diff --git a/apps/web-antd/src/views/mall/promotion/diy/page/decorate/index.vue b/apps/web-antd/src/views/mall/promotion/diy/page/decorate/index.vue
new file mode 100644
index 000000000..d2ba2441e
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/diy/page/decorate/index.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import type { MallDiyPageApi } from '#/api/mall/promotion/diy/page';
+
+import { onMounted, ref, unref } from 'vue';
+import { useRoute } from 'vue-router';
+
+import { message } from 'ant-design-vue';
+
+import * as DiyPageApi from '#/api/mall/promotion/diy/page';
+import { DiyEditor, PAGE_LIBS } from '#/views/mall/promotion/components';
+
+/** 装修页面表单 */
+defineOptions({ name: 'DiyPageDecorate' });
+
+const route = useRoute();
+
+const formData = ref<MallDiyPageApi.DiyPage>();
+
+/** 获取详情 */
+async function getPageDetail(id: any) {
+  const hideLoading = message.loading({
+    content: '加载中...',
+    duration: 0,
+  });
+  try {
+    formData.value = await DiyPageApi.getDiyPageProperty(id);
+  } finally {
+    hideLoading();
+  }
+}
+
+/** 提交表单 */
+async function submitForm() {
+  const hideLoading = message.loading({
+    content: '保存中...',
+    duration: 0,
+  });
+  try {
+    await DiyPageApi.updateDiyPageProperty(unref(formData)!);
+    message.success('保存成功');
+  } finally {
+    hideLoading();
+  }
+}
+
+/** 初始化 */
+onMounted(() => {
+  if (!route.params.id) {
+    message.warning('参数错误，页面编号不能为空！');
+    return;
+  }
+  formData.value = {} as MallDiyPageApi.DiyPage;
+  getPageDetail(route.params.id);
+});
+</script>
+<template>
+  <DiyEditor
+    v-if="formData?.id"
+    v-model="formData!.property"
+    :title="formData!.name"
+    :libs="PAGE_LIBS"
+    @save="submitForm"
+  />
+</template>
diff --git a/apps/web-antd/src/views/mall/promotion/diy/page/index.vue b/apps/web-antd/src/views/mall/promotion/diy/page/index.vue
index 65bc4da59..c1af949b1 100644
--- a/apps/web-antd/src/views/mall/promotion/diy/page/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/diy/page/index.vue
@@ -6,6 +6,8 @@ import { useRouter } from 'vue-router';
 
 import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
 
+import { message } from 'ant-design-vue';
+
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { deleteDiyPage, getDiyPagePage } from '#/api/mall/promotion/diy/page';
 import { $t } from '#/locales';
@@ -37,7 +39,6 @@ function handleEdit(row: MallDiyPageApi.DiyPage) {
   formModalApi.setData(row).open();
 }
 
-// TODO @xingyu：装修未实现
 /** 装修页面 */
 function handleDecorate(row: MallDiyPageApi.DiyPage) {
   push({ name: 'DiyPageDecorate', params: { id: row.id } });
@@ -45,8 +46,17 @@ function handleDecorate(row: MallDiyPageApi.DiyPage) {
 
 /** 删除 DIY 页面 */
 async function handleDelete(row: MallDiyPageApi.DiyPage) {
-  await deleteDiyPage(row.id as number);
-  handleRefresh();
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.name]),
+    duration: 0,
+  });
+  try {
+    await deleteDiyPage(row.id as number);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
+  } finally {
+    hideLoading();
+  }
 }
 
 const [Grid, gridApi] = useVbenVxeGrid({
diff --git a/apps/web-antd/src/views/mall/promotion/diy/page/modules/form.vue b/apps/web-antd/src/views/mall/promotion/diy/page/modules/form.vue
index 5045bf240..b3e383e83 100644
--- a/apps/web-antd/src/views/mall/promotion/diy/page/modules/form.vue
+++ b/apps/web-antd/src/views/mall/promotion/diy/page/modules/form.vue
@@ -45,12 +45,6 @@ const [Modal, modalApi] = useVbenModal({
     modalApi.lock();
     // 提交表单
     const data = (await formApi.getValues()) as MallDiyPageApi.DiyPage;
-
-    // 确保必要的默认值
-    if (!data.previewPicUrls) {
-      data.previewPicUrls = [];
-    }
-
     try {
       await (formData.value?.id ? updateDiyPage(data) : createDiyPage(data));
       // 关闭并提示
@@ -84,7 +78,7 @@ const [Modal, modalApi] = useVbenModal({
 </script>
 
 <template>
-  <Modal class="w-2/5" :title="getTitle">
+  <Modal :title="getTitle" class="w-2/5">
     <Form />
   </Modal>
 </template>
diff --git a/apps/web-antd/src/views/mall/promotion/diy/template/data.ts b/apps/web-antd/src/views/mall/promotion/diy/template/data.ts
index 8c736f1ac..e3c8f1421 100644
--- a/apps/web-antd/src/views/mall/promotion/diy/template/data.ts
+++ b/apps/web-antd/src/views/mall/promotion/diy/template/data.ts
@@ -3,6 +3,8 @@ import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 
 import { DICT_TYPE } from '@vben/constants';
 
+import { getRangePickerDefaultProps } from '#/utils';
+
 /** 表单配置 */
 export function useFormSchema(): VbenFormSchema[] {
   return [
@@ -53,7 +55,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       component: 'Input',
       componentProps: {
         placeholder: '请输入模板名称',
-        allowClear: true,
+        clearable: true,
       },
     },
     {
@@ -61,9 +63,8 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '创建时间',
       component: 'RangePicker',
       componentProps: {
-        placeholder: ['开始时间', '结束时间'],
+        ...getRangePickerDefaultProps(),
         allowClear: true,
-        valueFormat: 'YYYY-MM-DD HH:mm:ss',
       },
     },
   ];
diff --git a/apps/web-antd/src/views/mall/promotion/diy/template/decorate/index.vue b/apps/web-antd/src/views/mall/promotion/diy/template/decorate/index.vue
new file mode 100644
index 000000000..efe233077
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/diy/template/decorate/index.vue
@@ -0,0 +1,208 @@
+<script lang="ts" setup>
+import type { MallDiyPageApi } from '#/api/mall/promotion/diy/page';
+import type { MallDiyTemplateApi } from '#/api/mall/promotion/diy/template';
+import type { DiyComponentLibrary } from '#/views/mall/promotion/components'; // 商城的 DIY 组件，在 DiyEditor 目录下
+
+import { onMounted, reactive, ref } from 'vue';
+import { useRoute } from 'vue-router';
+
+import { useTabs } from '@vben/hooks';
+import { IconifyIcon } from '@vben/icons';
+import { useAccessStore } from '@vben/stores';
+import { isEmpty } from '@vben/utils';
+
+import { message, Radio, RadioGroup, Tooltip } from 'ant-design-vue';
+
+import * as DiyPageApi from '#/api/mall/promotion/diy/page';
+import * as DiyTemplateApi from '#/api/mall/promotion/diy/template';
+import { DiyEditor, PAGE_LIBS } from '#/views/mall/promotion/components';
+
+/** 装修模板表单 */
+defineOptions({ name: 'DiyTemplateDecorate' });
+
+const route = useRoute();
+const { refreshTab } = useTabs();
+
+const DIY_PAGE_INDEX_KEY = 'diy_page_index'; // 特殊：存储 reset 重置时，当前 selectedTemplateItem 值，从而进行恢复
+
+const selectedTemplateItem = ref(0);
+const templateItems = reactive([
+  { name: '基础设置', icon: 'ep:iphone' },
+  { name: '首页', icon: 'ep:home-filled' },
+  { name: '我的', icon: 'ep:user-filled' },
+]); // 左上角工具栏操作按钮
+
+const formData = ref<MallDiyTemplateApi.DiyTemplateProperty>();
+const currentFormData = ref<
+  MallDiyPageApi.DiyPage | MallDiyTemplateApi.DiyTemplateProperty
+>({
+  property: '',
+} as MallDiyPageApi.DiyPage); // 当前编辑的属性
+const currentFormDataMap = ref<
+  Map<string, MallDiyPageApi.DiyPage | MallDiyTemplateApi.DiyTemplateProperty>
+>(new Map()); // templateItem 对应的缓存
+
+const previewUrl = ref(''); // 商城 H5 预览地址
+
+const templateLibs = [] as DiyComponentLibrary[]; // 模板组件库
+const libs = ref<DiyComponentLibrary[]>(templateLibs); // 当前组件库
+
+/** 获取详情 */
+async function getPageDetail(id: any) {
+  const hideLoading = message.loading({
+    content: '加载中...',
+    duration: 0,
+  });
+  try {
+    formData.value = await DiyTemplateApi.getDiyTemplateProperty(id);
+
+    // 拼接手机预览链接
+    const domain = import.meta.env.VITE_MALL_H5_DOMAIN;
+    const accessStore = useAccessStore();
+    previewUrl.value = `${domain}?templateId=${formData.value.id}&${accessStore.tenantId}`;
+  } finally {
+    hideLoading();
+  }
+}
+
+/** 模板选项切换 */
+function handleTemplateItemChange(val: any) {
+  // 缓存模版编辑数据
+  currentFormDataMap.value.set(
+    templateItems[selectedTemplateItem.value]?.name || '',
+    currentFormData.value!,
+  );
+  // 读取模版缓存
+  const data = currentFormDataMap.value.get(templateItems[val]?.name || '');
+
+  // 切换模版
+  selectedTemplateItem.value = val;
+
+  // 情况一：编辑模板
+  if (val === 0) {
+    libs.value = templateLibs;
+    currentFormData.value = (isEmpty(data) ? formData.value : data) as
+      | MallDiyPageApi.DiyPage
+      | MallDiyTemplateApi.DiyTemplateProperty;
+    return;
+  }
+
+  // 情况二：编辑页面
+  libs.value = PAGE_LIBS;
+  currentFormData.value = (
+    isEmpty(data)
+      ? formData.value!.pages.find(
+          (page: MallDiyPageApi.DiyPage) =>
+            page.name === templateItems[val]?.name,
+        )
+      : data
+  ) as MallDiyPageApi.DiyPage | MallDiyTemplateApi.DiyTemplateProperty;
+}
+
+/** 提交表单 */
+async function submitForm() {
+  const hideLoading = message.loading({
+    content: '保存中...',
+    duration: 0,
+  });
+  try {
+    // 对所有的 templateItems 都进行保存，有缓存则保存缓存，解决都有修改时只保存了当前所编辑的 templateItem，导致装修效果存在差异
+    for (const [i, templateItem] of templateItems.entries()) {
+      const data = currentFormDataMap.value.get(templateItem.name) as any;
+      // 情况一：基础设置
+      if (i === 0) {
+        // 提交模板属性
+        await DiyTemplateApi.updateDiyTemplateProperty(
+          isEmpty(data) ? formData.value! : data,
+        );
+        continue;
+      }
+      // 提交页面属性
+      // 情况二：提交当前正在编辑的页面
+      if (currentFormData.value?.name.includes(templateItem.name)) {
+        await DiyPageApi.updateDiyPageProperty(currentFormData.value!);
+        continue;
+      }
+      // 情况三：提交页面编辑缓存
+      if (!isEmpty(data)) {
+        await DiyPageApi.updateDiyPageProperty(data!);
+      }
+    }
+    message.success('保存成功');
+  } finally {
+    hideLoading();
+  }
+}
+
+/** 刷新当前 Tab */
+function handleEditorReset() {
+  sessionStorage.setItem(DIY_PAGE_INDEX_KEY, `${selectedTemplateItem.value}`);
+  refreshTab();
+}
+
+/** 恢复当前 Tab 之前的 index（selectedTemplateItem） */
+function recoverPageIndex() {
+  // 恢复重置前的页面，默认是第一个页面
+  const pageIndex = Number(sessionStorage.getItem(DIY_PAGE_INDEX_KEY)) || 0;
+  // 移除标记
+  sessionStorage.removeItem(DIY_PAGE_INDEX_KEY);
+
+  // 重新初始化数据
+  currentFormData.value = formData.value as
+    | MallDiyPageApi.DiyPage
+    | MallDiyTemplateApi.DiyTemplateProperty;
+  currentFormDataMap.value = new Map<
+    string,
+    MallDiyPageApi.DiyPage | MallDiyTemplateApi.DiyTemplateProperty
+  >();
+  // 切换页面
+  if (pageIndex !== selectedTemplateItem.value) {
+    handleTemplateItemChange(pageIndex);
+  }
+}
+
+/** 初始化 */
+onMounted(async () => {
+  if (!route.params.id) {
+    message.warning('参数错误，页面编号不能为空！');
+    return;
+  }
+  // 查询详情
+  formData.value = {} as MallDiyTemplateApi.DiyTemplateProperty;
+  await getPageDetail(route.params.id);
+  // 恢复重置前的页面
+  recoverPageIndex();
+});
+</script>
+<template>
+  <DiyEditor
+    v-if="formData?.id"
+    v-model="currentFormData!.property"
+    :libs="libs"
+    :preview-url="previewUrl"
+    :show-navigation-bar="selectedTemplateItem !== 0"
+    :show-page-config="selectedTemplateItem !== 0"
+    :show-tab-bar="selectedTemplateItem === 0"
+    :title="templateItems[selectedTemplateItem]?.name || ''"
+    @reset="handleEditorReset"
+    @save="submitForm"
+  >
+    <template #toolBarLeft>
+      <RadioGroup
+        :value="selectedTemplateItem"
+        class="h-full!"
+        @change="handleTemplateItemChange"
+      >
+        <Tooltip
+          v-for="(item, index) in templateItems"
+          :key="index"
+          :title="item.name"
+        >
+          <Radio.Button :value="index">
+            <IconifyIcon :icon="item.icon" :size="24" />
+          </Radio.Button>
+        </Tooltip>
+      </RadioGroup>
+    </template>
+  </DiyEditor>
+</template>
diff --git a/apps/web-antd/src/views/mall/promotion/diy/template/index.vue b/apps/web-antd/src/views/mall/promotion/diy/template/index.vue
index da7be750e..ec43bcea0 100644
--- a/apps/web-antd/src/views/mall/promotion/diy/template/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/diy/template/index.vue
@@ -43,7 +43,6 @@ function handleEdit(row: MallDiyTemplateApi.DiyTemplate) {
   formModalApi.setData(row).open();
 }
 
-// TODO @xingyu：装修未实现
 /** 装修模板 */
 function handleDecorate(row: MallDiyTemplateApi.DiyTemplate) {
   router.push({ name: 'DiyTemplateDecorate', params: { id: row.id } });
@@ -51,20 +50,33 @@ function handleDecorate(row: MallDiyTemplateApi.DiyTemplate) {
 
 /** 使用模板 */
 async function handleUse(row: MallDiyTemplateApi.DiyTemplate) {
-  confirm({
-    content: `是否使用模板"${row.name}"?`,
-  }).then(async () => {
-    // 发起删除
+  await confirm(`是否使用模板"${row.name}"?`);
+  const hideLoading = message.loading({
+    content: `正在使用模板"${row.name}"...`,
+    duration: 0,
+  });
+  try {
     await useDiyTemplate(row.id as number);
     message.success('使用成功');
     handleRefresh();
-  });
+  } finally {
+    hideLoading();
+  }
 }
 
-/** 删除DIY模板 */
+/** 删除 DIY 模板 */
 async function handleDelete(row: MallDiyTemplateApi.DiyTemplate) {
-  await deleteDiyTemplate(row.id as number);
-  handleRefresh();
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.name]),
+    duration: 0,
+  });
+  try {
+    await deleteDiyTemplate(row.id as number);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
+  } finally {
+    hideLoading();
+  }
 }
 
 const [Grid, gridApi] = useVbenVxeGrid({
@@ -142,14 +154,14 @@ const [Grid, gridApi] = useVbenVxeGrid({
             },
             {
               label: '使用',
-              type: 'link' as const,
+              type: 'link',
               auth: ['promotion:diy-template:use'],
               ifShow: !row.used,
               onClick: handleUse.bind(null, row),
             },
             {
               label: $t('common.delete'),
-              type: 'link' as const,
+              type: 'link',
               danger: true,
               icon: ACTION_ICON.DELETE,
               auth: ['promotion:diy-template:delete'],
diff --git a/apps/web-antd/src/views/mall/promotion/diy/template/modules/form.vue b/apps/web-antd/src/views/mall/promotion/diy/template/modules/form.vue
index c262b70c7..339c949e9 100644
--- a/apps/web-antd/src/views/mall/promotion/diy/template/modules/form.vue
+++ b/apps/web-antd/src/views/mall/promotion/diy/template/modules/form.vue
@@ -16,9 +16,7 @@ import { $t } from '#/locales';
 
 import { useFormSchema } from '../data';
 
-/** 提交表单 */
 const emit = defineEmits(['success']);
-
 const formData = ref<MallDiyTemplateApi.DiyTemplate>();
 const getTitle = computed(() => {
   return formData.value?.id
@@ -47,15 +45,6 @@ const [Modal, modalApi] = useVbenModal({
     modalApi.lock();
     // 提交表单
     const data = (await formApi.getValues()) as MallDiyTemplateApi.DiyTemplate;
-
-    // 确保必要的默认值
-    if (!data.previewPicUrls) {
-      data.previewPicUrls = [];
-    }
-    if (data.used === undefined) {
-      data.used = false;
-    }
-
     try {
       await (formData.value?.id
         ? updateDiyTemplate(data)
@@ -91,7 +80,7 @@ const [Modal, modalApi] = useVbenModal({
 </script>
 
 <template>
-  <Modal class="w-2/5" :title="getTitle">
+  <Modal :title="getTitle" class="w-2/5">
     <Form />
   </Modal>
 </template>
diff --git a/apps/web-ele/src/views/mall/promotion/diy/template/index.vue b/apps/web-ele/src/views/mall/promotion/diy/template/index.vue
index 456b50d13..df68ff883 100644
--- a/apps/web-ele/src/views/mall/promotion/diy/template/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/diy/template/index.vue
@@ -51,7 +51,6 @@ function handleDecorate(row: MallDiyTemplateApi.DiyTemplate) {
 /** 使用模板 */
 async function handleUse(row: MallDiyTemplateApi.DiyTemplate) {
   await confirm(`是否使用模板"${row.name}"?`);
-  
   const loadingInstance = ElLoading.service({
     text: `正在使用模板"${row.name}"...`,
   });

From db1b3be27a68cb941bc312fc73d75eebdc8ac2ee Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sat, 25 Oct 2025 23:18:55 +0800
Subject: [PATCH 3/5] =?UTF-8?q?feat=EF=BC=9A=E3=80=90antd=E3=80=91?=
 =?UTF-8?q?=E3=80=90mall=E3=80=91diy-editor=20=E5=88=9D=E5=A7=8B=E5=8C=96?=
 =?UTF-8?q?=EF=BC=88=E6=9A=82=E6=97=B6=E4=B8=8D=E5=8F=AF=E7=94=A8=EF=BC=8C?=
 =?UTF-8?q?=E4=BF=9D=E8=AF=81=E7=95=8C=E9=9D=A2=E5=85=88=E6=9C=89=E3=80=82?=
 =?UTF-8?q?=E3=80=82=E3=80=82=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web-antd/package.json                    |   3 +-
 .../src/assets/imgs/diy/app-nav-bar-mp.png    | Bin 0 -> 3595 bytes
 .../src/assets/imgs/diy/statusBar.png         | Bin 0 -> 8917 bytes
 .../components/product-category-select.vue    |  68 ++
 .../app-link-input/app-link-select-dialog.vue | 231 ++++++
 .../components/app-link-input/data.ts         | 220 ++++++
 .../components/app-link-input/index.vue       |  47 ++
 .../components/color-input/index.vue          |  36 +
 .../component-container-property.vue          | 185 +++++
 .../components/component-container.vue        | 268 +++++++
 .../components/component-library.vue          | 219 ++++++
 .../components/mobile/Carousel/config.ts      |  61 ++
 .../components/mobile/Carousel/index.vue      |  48 ++
 .../components/mobile/Carousel/property.vue   | 121 ++++
 .../components/mobile/Divider/config.ts       |  29 +
 .../components/mobile/Divider/index.vue       |  29 +
 .../components/mobile/Divider/property.vue    |   6 +
 .../components/mobile/Popover/config.ts       |  26 +
 .../components/mobile/Popover/index.vue       |  43 ++
 .../components/mobile/Popover/property.vue    |   4 +
 .../mobile/coupon-card/component.tsx          |   4 +
 .../components/mobile/coupon-card/config.ts   |  50 ++
 .../coupon-card/coupon-discount-desc.tsx      |  34 +
 .../mobile/coupon-card/coupon-discount.tsx    |  34 +
 .../mobile/coupon-card/coupon-validTerm.tsx   |  28 +
 .../components/mobile/coupon-card/index.vue   | 161 +++++
 .../mobile/coupon-card/property.vue           |   7 +
 .../mobile/floating-action-button/config.ts   |  36 +
 .../mobile/floating-action-button/index.vue   |  92 +++
 .../floating-action-button/property.vue       |   4 +
 .../hot-zone-edit-dialog/controller.ts        | 175 +++++
 .../components/hot-zone-edit-dialog/index.vue |  11 +
 .../components/mobile/hot-zone/config.ts      |  46 ++
 .../components/mobile/hot-zone/index.vue      |  46 ++
 .../components/mobile/hot-zone/property.vue   |  80 +++
 .../components/mobile/image-bar/config.ts     |  30 +
 .../components/mobile/image-bar/index.vue     |  30 +
 .../components/mobile/image-bar/property.vue  |  40 ++
 .../diy-editor/components/mobile/index.ts     |  69 ++
 .../components/mobile/magic-cube/config.ts    |  56 ++
 .../components/mobile/magic-cube/index.vue    |  83 +++
 .../components/mobile/magic-cube/property.vue |   9 +
 .../components/mobile/menu-grid/config.ts     |  83 +++
 .../components/mobile/menu-grid/index.vue     |  46 ++
 .../components/mobile/menu-grid/property.vue  |  90 +++
 .../components/mobile/menu-list/config.ts     |  52 ++
 .../components/mobile/menu-list/index.vue     |  39 +
 .../components/mobile/menu-list/property.vue  |   7 +
 .../components/mobile/menu-swiper/config.ts   |  70 ++
 .../components/mobile/menu-swiper/index.vue   | 136 ++++
 .../mobile/menu-swiper/property.vue           |   6 +
 .../components/cell-property.vue              |   8 +
 .../mobile/navigation-bar/config.ts           |  82 +++
 .../mobile/navigation-bar/index.vue           | 112 +++
 .../mobile/navigation-bar/property.vue        | 117 +++
 .../components/mobile/notice-bar/config.ts    |  49 ++
 .../components/mobile/notice-bar/index.vue    |  37 +
 .../components/mobile/notice-bar/property.vue |   7 +
 .../components/mobile/page-config/config.ts   |  23 +
 .../mobile/page-config/property.vue           |  45 ++
 .../components/mobile/product-card/config.ts  | 100 +++
 .../components/mobile/product-card/index.vue  | 189 +++++
 .../mobile/product-card/property.vue          |   6 +
 .../components/mobile/product-list/config.ts  |  67 ++
 .../components/mobile/product-list/index.vue  | 149 ++++
 .../mobile/product-list/property.vue          | 112 +++
 .../mobile/promotion-article/config.ts        |  28 +
 .../mobile/promotion-article/index.vue        |  33 +
 .../mobile/promotion-article/property.vue     |  67 ++
 .../mobile/promotion-combination/config.ts    |  99 +++
 .../mobile/promotion-combination/index.vue    | 232 ++++++
 .../mobile/promotion-combination/property.vue | 181 +++++
 .../mobile/promotion-point/config.ts          |  99 +++
 .../mobile/promotion-point/index.vue          | 233 ++++++
 .../mobile/promotion-point/property.vue       |   6 +
 .../mobile/promotion-seckill/config.ts        |  99 +++
 .../mobile/promotion-seckill/index.vue        | 228 ++++++
 .../mobile/promotion-seckill/property.vue     |  11 +
 .../components/mobile/search-bar/config.ts    |  46 ++
 .../components/mobile/search-bar/index.vue    |  83 +++
 .../components/mobile/search-bar/property.vue |   9 +
 .../components/mobile/tab-bar/config.ts       | 172 +++++
 .../components/mobile/tab-bar/index.vue       |  79 +++
 .../components/mobile/tab-bar/property.vue    | 121 ++++
 .../components/mobile/title-bar/config.ts     |  76 ++
 .../components/mobile/title-bar/index.vue     |  87 +++
 .../components/mobile/title-bar/property.vue  |   6 +
 .../components/mobile/user-card/config.ts     |  24 +
 .../components/mobile/user-card/index.vue     |  34 +
 .../components/mobile/user-card/property.vue  |  20 +
 .../components/mobile/user-coupon/config.ts   |  26 +
 .../components/mobile/user-coupon/index.vue   |  16 +
 .../mobile/user-coupon/property.vue           |  20 +
 .../components/mobile/user-order/config.ts    |  26 +
 .../components/mobile/user-order/index.vue    |  16 +
 .../components/mobile/user-order/property.vue |  20 +
 .../components/mobile/user-wallet/config.ts   |  26 +
 .../components/mobile/user-wallet/index.vue   |  16 +
 .../mobile/user-wallet/property.vue           |  20 +
 .../components/mobile/video-player/config.ts  |  40 ++
 .../components/mobile/video-player/index.vue  |  35 +
 .../mobile/video-player/property.vue          |  58 ++
 .../promotion/components/diy-editor/index.vue | 667 +++++++++++++++++-
 .../promotion/components/diy-editor/util.ts   |  10 +-
 .../promotion/components/draggable/index.vue  |  99 +++
 .../views/mall/promotion/components/index.ts  |  10 +-
 .../components/input-with-color/index.vue     |  31 +
 .../components/magic-cube-editor/index.vue    | 302 ++++++++
 .../components/magic-cube-editor/util.ts      |  72 ++
 .../promotion/components/spu-and-sku-list.vue | 238 -------
 .../promotion/components/spu-sku-select.vue   | 316 ---------
 .../views/mall/promotion/components/types.ts  |  11 -
 .../vertical-button-group/index.vue           |  15 +
 113 files changed, 7955 insertions(+), 609 deletions(-)
 create mode 100644 apps/web-antd/src/assets/imgs/diy/app-nav-bar-mp.png
 create mode 100644 apps/web-antd/src/assets/imgs/diy/statusBar.png
 create mode 100644 apps/web-antd/src/views/mall/product/category/components/product-category-select.vue
 create mode 100644 apps/web-antd/src/views/mall/promotion/components/app-link-input/app-link-select-dialog.vue
 create mode 100644 apps/web-antd/src/views/mall/promotion/components/app-link-input/data.ts
 create mode 100644 apps/web-antd/src/views/mall/promotion/components/app-link-input/index.vue
 create mode 100644 apps/web-antd/src/views/mall/promotion/components/color-input/index.vue
 create mode 100644 apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-container-property.vue
 create mode 100644 apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-container.vue
 create mode 100644 apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-library.vue
 create mode 100644 apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Carousel/config.ts
 create mode 100644 apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Carousel/index.vue
 create mode 100644 apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Carousel/property.vue
 create mode 100644 apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Divider/config.ts
 create mode 100644 apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Divider/index.vue
 create mode 100644 apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Divider/property.vue
 create mode 100644 apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Popover/config.ts
 create mode 100644 apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Popover/index.vue
 create mode 100644 apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Popover/property.vue
 create mode 100644 apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/component.tsx
 create mode 100644 apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/config.ts
 create mode 100644 apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/coupon-discount-desc.tsx
 create mode 100644 apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/coupon-discount.tsx
 create mode 100644 apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/coupon-validTerm.tsx
 create mode 100644 apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/index.vue
 create mode 100644 apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/property.vue
 create mode 100644 apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/floating-action-button/config.ts
 create mode 100644 apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/floating-action-button/index.vue
 create mode 100644 apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/floating-action-button/property.vue
 create mode 100644 apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/components/hot-zone-edit-dialog/controller.ts
 create mode 100644 apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/components/hot-zone-edit-dialog/index.vue
 create mode 100644 apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/config.ts
 create mode 100644 apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/index.vue
 create mode 100644 apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/property.vue
 create mode 100644 apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/config.ts
 create mode 100644 apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/index.vue
 create mode 100644 apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/property.vue
 create mode 100644 apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/index.ts
 create mode 100644 apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/config.ts
 create mode 100644 apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/index.vue
 create mode 100644 apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/property.vue
 create mode 100644 apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/config.ts
 create mode 100644 apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/index.vue
 create mode 100644 apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/property.vue
 create mode 100644 apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-list/config.ts
 create mode 100644 apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-list/index.vue
 create mode 100644 apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-list/property.vue
 create mode 100644 apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-swiper/config.ts
 create mode 100644 apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-swiper/index.vue
 create mode 100644 apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-swiper/property.vue
 create mode 100644 apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/components/cell-property.vue
 create mode 100644 apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/config.ts
 create mode 100644 apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/index.vue
 create mode 100644 apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/property.vue
 create mode 100644 apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/config.ts
 create mode 100644 apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/index.vue
 create mode 100644 apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/property.vue
 create mode 100644 apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/page-config/config.ts
 create mode 100644 apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/page-config/property.vue
 create mode 100644 apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-card/config.ts
 create mode 100644 apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-card/index.vue
 create mode 100644 apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-card/property.vue
 create mode 100644 apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/config.ts
 create mode 100644 apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/index.vue
 create mode 100644 apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/property.vue
 create mode 100644 apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/config.ts
 create mode 100644 apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/index.vue
 create mode 100644 apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/property.vue
 create mode 100644 apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/config.ts
 create mode 100644 apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/index.vue
 create mode 100644 apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/property.vue
 create mode 100644 apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/config.ts
 create mode 100644 apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/index.vue
 create mode 100644 apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/property.vue
 create mode 100644 apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-seckill/config.ts
 create mode 100644 apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-seckill/index.vue
 create mode 100644 apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-seckill/property.vue
 create mode 100644 apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/config.ts
 create mode 100644 apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/index.vue
 create mode 100644 apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/property.vue
 create mode 100644 apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/config.ts
 create mode 100644 apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/index.vue
 create mode 100644 apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/property.vue
 create mode 100644 apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/config.ts
 create mode 100644 apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/index.vue
 create mode 100644 apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/property.vue
 create mode 100644 apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-card/config.ts
 create mode 100644 apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-card/index.vue
 create mode 100644 apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-card/property.vue
 create mode 100644 apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-coupon/config.ts
 create mode 100644 apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-coupon/index.vue
 create mode 100644 apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-coupon/property.vue
 create mode 100644 apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-order/config.ts
 create mode 100644 apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-order/index.vue
 create mode 100644 apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-order/property.vue
 create mode 100644 apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-wallet/config.ts
 create mode 100644 apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-wallet/index.vue
 create mode 100644 apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-wallet/property.vue
 create mode 100644 apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/config.ts
 create mode 100644 apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/index.vue
 create mode 100644 apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/property.vue
 create mode 100644 apps/web-antd/src/views/mall/promotion/components/draggable/index.vue
 create mode 100644 apps/web-antd/src/views/mall/promotion/components/input-with-color/index.vue
 create mode 100644 apps/web-antd/src/views/mall/promotion/components/magic-cube-editor/index.vue
 create mode 100644 apps/web-antd/src/views/mall/promotion/components/magic-cube-editor/util.ts
 delete mode 100644 apps/web-antd/src/views/mall/promotion/components/spu-and-sku-list.vue
 delete mode 100644 apps/web-antd/src/views/mall/promotion/components/spu-sku-select.vue
 delete mode 100644 apps/web-antd/src/views/mall/promotion/components/types.ts
 create mode 100644 apps/web-antd/src/views/mall/promotion/components/vertical-button-group/index.vue

diff --git a/apps/web-antd/package.json b/apps/web-antd/package.json
index c2237dda6..dd8b2435c 100644
--- a/apps/web-antd/package.json
+++ b/apps/web-antd/package.json
@@ -61,6 +61,7 @@
     "vue": "catalog:",
     "vue-dompurify-html": "catalog:",
     "vue-router": "catalog:",
-    "vue3-signature": "catalog:"
+    "vue3-signature": "catalog:",
+    "vuedraggable": "catalog:"
   }
 }
diff --git a/apps/web-antd/src/assets/imgs/diy/app-nav-bar-mp.png b/apps/web-antd/src/assets/imgs/diy/app-nav-bar-mp.png
new file mode 100644
index 0000000000000000000000000000000000000000..c982804c7287c904468dad6252fd393c6cbd271f
GIT binary patch
literal 3595
zcmV+m4)pPfP)<h;3K|Lk000e1NJLTq00682002A)1^@s6`&Ut$00001b5ch_0Itp)
z=>Px?#Ysd#RCr$PUENaD*c#2=X%(*MKd`K_5R^`HH3#$oM(_a~=l+}#?~jTPFp3W_
z$P0|<12{VOBlrMEdoD?Hq~XTWCY|O=JCN+tE49N(r;|?7ouomMD#|K*XYcGUD__?4
z8zRJXsH&RPb^Rt|Y>rZTg%C0)2tt-IHWky7>9j+T03oC%2m=0^x~~5%2*PG2ld0r#
zxn>-fL!z7%AQc4R0b>k6y&2`)>0GBv0)&vwwvu`+2*R6OE(btIazp~ydcA&A6vf95
zkTw}(6+sa2)Kv__sOY-hymaYOWEUTa1ky<clE9}=pQbXI%oHI6$_h&AA8oL9C@X+h
z*Y%b0@$t=p783+vAi%l+6(HSYjIG7_S{QWG>G|<Wz@md~MfDRQ<QLm&JCxGpTrT&f
z-z(?~u&Sy~F~*+TG-}f@41n}mT->GK4W{P}R|3EaY#BnxV?hus`(>R{y3!9-2n|?O
zRUa6J@dO4Gh;|Cp;R50`tzNI!pHNDnaRFRtTY&aOm^}mrEH|hg8;0=^3xH4)LY7jE
z8b;jdSgvuO*r>v4p-^}fR5F183$Pl7u^|WoTvO1hAkfc(E|QK*CE%2Rq9{;&pb1$*
z$Ol5m&p{}HFJSRRaIiv+*C?fTa=9F=|MW;DFpvbA&E~YO>u+roVbKq?Jpt<i)&;)_
z2iie;@|lx>3uv$RqM1Dbt0>9`P6MD>Q?Q;nI3=@TJ7_sQfTneglz9SHRn=8)V5MM9
z=DwZjRUDeu(-3n7?Ee1#T|&rn7+93j`IH6($C9Eb45JH$g0FoLeAdB7&d$!lcYfP2
zj5!{Of?E=QI1uouAuj+?saC7?rdF#Z9+CX=<;%P%ir}<kf*?F96bfC2eV0(}ywxy_
z<<uJx4lE}Pu%%MzZrkVii!)s6x2ra|VY#o#vK-1!>Nl_7?~0-<3xe=lJ10e@l!DK8
zJUCr|-QV9|=RUIaLZPtaw?O)Prvy$4V9Vw50%PoVTXd=4TeZ`6yRRe#T*eqtRrOUn
z4+UY}jeI`8Xut3d!0zwwW6&SmeU%zneca+<19oa^DtqqSxyOVMGr$w!v8rj>(^{<-
zOWL6QIys+x4{Bf-#-crGrUS5wqTp$Q-xYxYgkRGmqy&Zu*mAi%Z5YNYo_p+f<u%3_
zz}F;%z{egWPkBevw8bR&Ef3@3!Ryen$ACrV6{Qr>tXiQ^nD*Ok`n$UXh6PxFl`&>H
z;oU9{hSiI9LjCKbqoaybQ$jOmG8rV>gY*8_1Hg%Zw%KgvbY1`G)UwBbZ8RDi$iBh_
zhfPRG!TWy+3<I!}laslTkrBK?-LxdM=$fW!&w{?r;ZZOQ1HeV-wCjLDc6fLQO&cpc
zaMQ9TV7X@ibU>h#PN#0H{vW|10G5<WrQbX_>p<GjM{BRjvK%;Rr5}mfwJfDHk6?lc
z*m}MGkW#wZenL~vKtGbTos%?ROQq5hAq3uljw3292<?60!iBdkyqLit+TPwCxQf6_
z<aUpNWmlPiwb6l}2FV5=@LqoxrzZ?pB1sZ>o|6hdvtEztmED7K?8vfwHO?DXuh$nS
zrFdXW;|o47qz<Z_4&>7O*1^P|Bw#(XE7LUXs+T1{J3D(**LAorZ(Bg;wRe@n!^0J?
z^Ef>KPqw0C5EP<%OL6*WowR^h-T~BN6^q4%!ERT2c7lKfcYW{js)m!l%Ox4YKkMml
zl_UxCIt{T6S(ZDT`%$8R(}K5*u^*Az3c#Xl0Tr)n#bPmPXLDcI4&k0ZfBr$+#Rf~&
zeBA}n0(~tO@kvPmmTNrF0sG-<WcA>ouDkc*znmIi%?>TwOQR1eUI126lvP5=eZw#w
zkw&BO2f|>K(i6d7B}qcf50W12Lb2}~j_#GMt*sMT@sJc?B}uYk?#Hr0VQ95lz2^W)
zFE2tbJh^!RFc-iBWnvwS5b`L_`=KZbQUqXFJ_le;|Epmb3sKaK5AsBn%Vjj-2nxiz
zadM}A_mL1_VQjrZ8MPfaZdSX8CJwSaS1-V|Yu6TdMwQ=#5@d})V^me0Hw@#wnUK?H
zG<MKFNYk|GsGD5C0j=x$bE{2JI~n}7rfJJ=#GX5=kudJ1S)H3};+owo;V|n4l30jA
zNdeY{zrxtcJLCaiBTdxa8zAs*pggM8Dm3}=!D&ImNk!uH7Vz8xP>~(*gIMx6djJqX
zn|Fd%lBD%M1lwg`gk3lA-3vG{E_pg%^O7V1H1>zv&Bf$pm<8O8;5w&^D@~PUIUjV=
zu;ajE8;ynmQzkaRN|J=EFZ(OY{tDTwR;wKziBhSA{7Y2jhB<0&TF{aA5O&=#iv<~*
zAYgF=?T4GS4h`!Z7i1gO7$(aybv`U^+TCSbn00!NO$xB4=Jq(6vMlH9ze$qRYrN+~
zvMhIGocYYtwQgim<r57NupeYuzV4!lQ@{qf$&w@?7~#oBLjo-fU_-4NWG`XHBna3*
zl)xhr7IaHq4}mkfmK-IB%jl9M38`*gfr!_#EZ=cxSTh$ls3iHgiY&|Xj(I|@8*)A0
z;RyoP2^v?U%f$`lyN6>w;Nm9pFuL4;9e5qTfli~#Eald9eSTtMBC-Y<-1tE#ujAE^
z<S-uR?x@xAh@$v$oAqk7+EK<6c3nSVh5bE2z&fpeS2xtm%#4-i9Cj<NAzog31EpX;
zx)e~@#d?jm@(J3}t_@<<a52V~ip3%<^~eqm9u$<p_(JYvMbor<Zf-3e-GbI|0^I9*
zT!D|lVb+aovwWh204tQs<%f(hWY`@ah*nmsRcEx)&Drm_ZN}&7aA~2X8u#Y>%f2ij
zWO-|AYt3)cet+NJ-@ii$L7mrYgl5gu!jll1MTI9%mGdi+jy<~4uW%CtEGi6~p;<h{
zNPOu?tmdKFzX%~6^vPq704ox-Z#n1j$dB!rY}2nCZL|cQtY?Ife<Q^Z8rCd4L_K;w
zpC5Yi%goFS9-v=)Xj+vq_NZE|M*21wRIt|hNdXqxu2d=^?atYnzgO}Lx(43w(a74=
ztUPPWSxo@#io_RZ@=L7z)t>x<NS-~t5KS{sZ4hhOLl9u_S2_}M(0<(V&4Tm33{&b6
zWUZ*jBnVi6zmdRY?T6ZGwQlV0?wS=O&cjQ#jIlR(<!*0pzjHgUR4QF1g#6d>8(fhH
zk-v;uj@EoUy$~J|hN^>(1n!fNPY~C}lbSb4z;aIMn!x?-+qWBgdwXV{^PoqMQkmEj
zxNZD(qgX61S|u`OiXoa5=kxgvchjJoJ!|JD3|PU-3jiM4YPD_+3fjw;FXu-`N5Oxc
zQOMY}D^D#%W0!yGy1qOyF|lS9AzD=jCx#ZBR-h*hSk7ggDSwvub^uy0df+2taO7!1
z$X_o0aW5}Iq_@rHe+3=5isIO=GVipB#$YlZ0$>FnF90;*N~_g+xx2dyJHRglP9`TO
zvm+xT$a%$|TeR|{rfD~#su}Z=xRnPB|10PK#<?}pNVV($m>mXSak-plLK}KDK|!aN
z&9<g``St79%HH0d)Af}d9UYx(e@_iwBluap!s-K+jt3PjPj~@8zrt-R(-`dVciNJ<
z(^f@6CF>YBEWic?t^I1PRz>*03c%?X76%PLq2kYRw<-cyo6ROZ00S4=PN7gZuFUNK
ztgT&9QxwJP*=*L;HPYw3JQJr46R;34FE;e^w}!nJz5KIb=kgtIYi@jnF?Od|EFOP|
zt}CL{Xf#lvxR81beC6soVAz1QE{gkT5rBc_^otyNZ5DjDW*Ekjmw&cDDS4k|_YCmH
zE*&*$UJZ?{q?Kj2F33?|<o7h+Ndc@Kxb0pk_ib(|Kk!;c89KVG#~BoG-giy~@Zmz_
zNZ`YBU0;=Py?Fi&C7gs$iZ4z~Odz8xJpxETQ4}*_x=<)MGxY<U9p4bEWjyNpQNzbu
zY#z6a=WXL*lvP@-)}L|nRJWZro6W1buKx!e3wcw*t_Ygv(^jw7S1F~){HckexR~<U
z_`sCTEC_bqiqFB0kB>Vu#Y{2v`ie{z{YKj{W@PxJpiNN~n*{7%kYS9yFBXe8ycYBO
zupA;_;Ir`UrJ#-NmYv;+!+s6XkAPdfW07H=g7)m<D)OCk0}Fu)Gz5Vs<0GZ?mS1mT
zU%=u@(eRithKz5}14Kxk=JR<Z)%u0`BHw5_;pvxv%^QHgz!(yBL{S7-eN$Tl0oD=`
zH^dNM#(C?aC_YV%vC|Krq;>$H9vmE?9X%>s(C!m;Xlt2FW+ez%dm3F{o8VtbghSe-
z2<@cr7ujrfCDpb`-S*SB4hJfXc=%YYgc?=X^%bNHhS^al4QovdilFN{@@LVr33C9r
z0PVZ6u`zu9F{KJ&?!tFE)&r;r^KOcwc+Zcox{0MPz*-aWdN5SQ+QWbAjIlp6nat+c
z*qF&lQUHIah;(cV0L6bD92{g14-e-=QA9UNd_oBU3KOX9F-WX(EyD>SrGWrz<F+>m
zA-~!R;>>wb*k~BW-|dDP@9+^bUDs<DFJ4Uiqq{)_k&fw40-ryBo}!dyMNyn<*M#9a
zUq9eq3#6De3ZPn77YShPR6!7g+q$mbc7nG*ainLRG6@`0K@QS)nM`Ias6iEEuaN@Q
zz92sKaddQqCk@*72Rv~hJ`ow@+S4&7LjqP_ZABEtimvOsqA0$L5~TKR{tv=!$47!w
RVWI#4002ovPDHLkV1jf&x=a87

literal 0
HcmV?d00001

diff --git a/apps/web-antd/src/assets/imgs/diy/statusBar.png b/apps/web-antd/src/assets/imgs/diy/statusBar.png
new file mode 100644
index 0000000000000000000000000000000000000000..b85562e4236852358c93161735671f8f0466db71
GIT binary patch
literal 8917
zcmc(F^;;ax5-zd?hs6o*?h**@9^BpCEy3O0J-9<~hsE831a}MWF5zy@z0di+^B3It
zVV>FQ-m<Cbu70Z`6y+t65%3ToARv&XrNopWAfU^@&zx{j;Cny2k{<*F352wmu<AF+
zv-PhN9BN&#mx#u_f%?4e;-}$onze=(a5cvIvfc*xB>8|CV`C1y6aa=OM<gX4IWCMa
zX0ov)WCu<M8Jwn&uvK74fwN#*k{4S>PR6>$*WBN3xxYL7Y|SmEKD!+7{(gAz@iQ~$
z>iF|~@=l*i0t5sK0pXy8N#FnhB(*DOOWsWehCi79{`zO=l^BW?qy_tbC;dON4O9Sd
zlhY~7CE<U_;CayhL-_wVk8xo@?SL%kANzm+Dv2#-zo&5rzn9g9DV~#AS?0IZ%|G`w
zes4BAKV0lv2eEb5cCcGo*U#)9dSC@Ei5^;q)phJR$Kgf1ErgkU{>7|z1^Bp2{QlTa
z{O7W9PX1-;E9fRn@D&msbl!gQ>6iG%;}92U($3yxv17w6P0!t9ZI|ewHjMvN{%iZ(
zeA4pi^GQu^`%N@q4d~fgKrG~1f~$QdRma|ATxY}iwD#cj!tdS7wqeEaW|C{uwqf#k
zI%Sz<)bGzt?xMa|H6q9AHLYcq!c(hh%MBG*TSP9sV1G(4sRcaLJ1HETMsnO!IB~py
zGgn$$!pSx1;Qkz!t<}L{bZLnK(%rkoiJJY2r505K1*OWtQHR{Gi02<PFF`$c!g*2{
zTDU;{9f?tvw-rS;41}Bnw;8lVan3JfPU3vS&0-?aa_dHT7#rnmxrK28&ltIn1985$
zg<0#T=3HGzUt(B{9`-HOd%6!YZT?)v`SI<b#eEx<)xUoIEl8|x!rbk`mc_Q?bzENR
zdul@ba-`s=ZBFI=c4{H`;t!2-m~H9u+u;3qvHSh)B88O;HO4;ZL&o=Dg}D11GgSHa
z6NC56{@a_}_t)!j=I+z_aqm@W^gl15({>JCI_Kl=t9C8BvAi39?pt!bm8RG#Z;_#F
zFd!@5r@?N!@O|h&WbTar(7o7oF1`&%Ist<$5hYQOMzLFl$5ZN{IT?u_-;gD5hM(b7
ztgysR?JSWCno~;D&~*xNKxvLxe?8#3uvuPlaJ=Erd5$bGe$qz1W{0cd1VoAfc|LS1
zd~14|bntb#U$(%wd|CS~0FH+o>blcFe>wz9>VoGySbocs>J}n;C(O(tP!mB(5lw2Z
zRcDyMZ9a5Gxd&H7_jRa(-}9W{%kuQO*XE1Bg~#-&+oIluV;HZTGvlPwL2JylzW3GO
zU;j)ZRHIY)Tm})p`or@1n`iAXbRl>~)}^itPCjltfT(@-dGtN@Q^L0>g1ql44c=B3
zLFOrPvrA)O53MU6OXE#1g{t&TyiOzMx=ekRbca}W(@Rx)(kzkhz10>Hu-`}n-BO|(
zD+%n8qW1b<Z3#qVI@uo)0T!sBCZN?^Uay7`^>m#_DWN_%3SnP;eyVpnSx5jGjk8AM
zmkYk#&I!IhO^+i9fFq#P?i}p+ICoZLp6zs#*r$DFKWQ^!@5|mm8WlKR!X3Je`{ous
z*BNo9?YcOh)1erANd=AjY`;HG#7`rVn#L>Uas2m=br{+p2cHw2+@}c(rq(Se^E=KO
zj~JlrCT+bST$LvPsM7Z`s^ELQ<}&TGM^4<f>H89cu40<TDQT75ukZFtjpAIrr5$Vi
zx=fNE!Rd6*f=_efQAv_8#K721irowx1b<X=pH;^IULOZj=c3+cK6Ch^)$UOXTt&or
zOqc{uOW;R!pqWza{i^Z3+glluqv7z}1=~g3wH<UftFg8<qf#|Nq+yK`pI@oKy$#^n
zNmh|>d+54Yhd*7SwUgPQ&sNl`iD>pkk;{QM>RQVR_*B503`%_f2RiZFp(JW!_97|b
z15WqjAgb?W5c@P=QoLp|l@(!Jtig_`TlfBm|J&oR;KA?~i1(~<jvpKwDX2<|Pp0H>
zRd|3y$b3ZCn`ri_Jf60N;HYQwY&cr1UX^v1Y5taV_tk*bBNn{qg}=;`<ar`G*;Q{f
zE4yy$)pnR{BRFtANi!-!AxT&6QwT1rwg>JPI!-JrmNox$EB!K?uFfh--tZCC@3FsS
z**vSxf>lQ*T5r3BcQ6zgf5=@rh@_SdjmDRXl;>&yBkHF|RRy5-_^#k%_J&Cuzq(Yc
zaof1wd7vARKcQyx{m(<EJ%g4O9lb%v5=k41&o-jL&xBba9k+pF*UuN7H)H*#(>~`e
zcNM{EIB1Q3A2Csui^d4Z)|c3=$Ezu;o9a}4@?lPaUje<c0;gL=_(Ae<^W`zvi9YRU
zPeT=7q8Iv(22bVkKIzmUS15Bpa<;FopWp9M3oc{%JdGQa6p{$86MUk)%CR5v9EE}C
z(>ub4%w^j4*?>qZW`~$t{967}Eq=&ekQyRhf~3ngM6!_Ue_rk2V}qy>IuqRHPg$#4
z(48$6)f60D?Myti+|vDaRx0>*)X9}^P-%Ca(mroh>I2lggR51z7Rd##YFL%<T_Xz-
zAjO=4$S-6z1ytx3zM$J;=9C$mm1yZ6BaM-ZQR-Z|W7gBDS|?WDg3fd<9gzvEXz33Z
zHlkfDJ@R2A^$M-L<J1V8a)n0(DE{zrBHn{P9xo3slp&9@T<&25#Kj<B?~KyA!HW+z
z88=;LG6Y>;X|YB6BQ@VPd@|C4u=gc<2FB}YA@Lhcdvr_0fjU908jo;mnwa1|twMsT
zuqi9H^K*=YH*`RLCU;}vuTaJ=sXD3OPQ!$fF<XU^x<>@$Bt%Or`V=8*O+f9y(#+4#
zq|6j`x(fX6K|1m-1vF$Z2%j#U0eX);SSiuVOK1nHJ(R6H+}(%b%mrmIZC~JV96U&p
za$QLyYQ*vtHpSa5xM^f}huEFHOZLa-(4bHJZ9BoAidoE`+fu;{EZ)fL>n=<*?eNqN
z<Ua%-bjdiPDa#Gf7|C~3BmLJ$>Z|@nl1|mhVoggG<AUQR2tVgd*bo;|IzRVyk2?2x
zz7#h|19Y7-?R~(0@oktlm5D&sI>5(sn0LczFG2FW^JdBwrjC%P)+6~eNvnXaTbjH9
zn8-Kz!A!@rAbE_{ia@(hUN8DnmLn?t3BxH_%zF_vzjSuQIO9~2r$hRqGC9%bo;%qE
zH~$$P7^3OtV>asp>THWlm;g0@e~wsmT64TBvd(DE2pc_|N=BiV^RL}mI5MMBaU<Pn
zpC~Z(cyE7-&KOikn6U^bc2tIAieujnrl9g&3JLExk3@vufYT1hyKLguEm$Y@iTs~h
z2r<q1LWfKqMDPT9au8`-<+IS=lqf;oCcC>JZM=r>UlWm!i#z*;tMIIZS>w2O;8IY3
zI3=FDIEc<UUnud4<47fF8GUU$pGUAxQnQ^P%;d>4>*cL8Wn6fB*xW>S`h7g}WUm>%
z`F8%*;ALe|hTpLd$$t52R{yaNhsgJF`?Zq`bQLr0G3COb2uc0YW`BxtB8#*qpnqSV
zM(Dm|gmja&`D!lPkjWIKY4%;zTbRoW<T7O`Y#2l0e_W@gTErmZ5!~ppUC#<o@r_Si
zjJ~rbBJ9vBs0J@$UbZwNN&Y9NB7!6dns)*(r#JU4-FmcsO>#MBVPCH^^e_=A9A)cT
zX+Hi!hmg>OeP(Oth*10?g)Y0iI7@PyKJdd4(`9v$0i3&N3kgYtx59gzcU*wN2%N(;
zcgrpd`o1xyMs$zSa?Xw8Ids3>Ka*K|PnCrBE)5*udS*iU0r6~h%5i3^{)}xEd^7DN
zpls9R#x7e?n{PP9q#lAXi-QTOL?=1zb7a%gd_>_r_4nc!HaKoJQc8gAs+)%_wN#kQ
z6z%Gvm9TWz+6b@7VnjXkO;)L36TSejWwEF4HV>M<(e7iLDUrWKTk!RZ46wcQ;jg%u
zt;vt~&1M)=QGOpt)r_)_pbVd?4@|8RfpIyEUQC3|RZgx(hK|nk5=iJ0Uj7^?!Or@G
zn32%+u+h<A=@YqJA`8@1fm2L|A_5@yitlRo9a6sp@OqlVT%}}u93gLVEaVB+7QD?z
zt&>~RAcS|Q{PJ`J34MjntoQr5UQPU%S4X}+iK&=)Lida?Nn)LKC{V&3K?9YBRYRj*
zj_zy1!Ldn;{FpRQK6T$TVlwsKo^xcHq}CnSL#&D!K8UWb-m3D=3IYo;yab3pYR%6#
z)|%ww?JrE-$)Q|#@YsmT*@yAzn=BE`NExOlbOzcmr-;!H-CGf%x2me1=D7UUsuY}A
zFXR6E&K;~87FF3h#yb?ewGmL-ic{>_H~|kVCSF*zGnzJH!?Eq$N?YeZn!@gs*2n#-
z0+cNsft_*cyoK)Tl$!7WmD|1_YvtO+bM4N8jOu5MDB_<N9xQ|EymZm(E4{;dYdeLe
zmFTS`ZFM4|d$rIie<uIbqFD8%Lf9M}`7&KyKS^oWXe*n(k}8;D$-<Cuh}m3+AsYlf
z`N$yit4aOj8ONmvAuz@oP?XJ4hWtV`OvENd#EGj`63BHMo#=0j7qgp!mg7IJno6NC
zPUilJXk+x$XchO9U`9~&P?}5v9~M`iI%UF#aOPEM80iS>r$C&}9=O8D5G&Ta6ZCU8
zJ>4td<~DC)VI@A~LbjU(>q~Ijh+zRhQ7#QaolV<l28~`#GX#1I1gLEkp1&juU>r!Z
z#-l75fyl+K*_xX*F%#MgV7mT-^*G;vsjdwx%wB8l`g1FAc<p7yS<N2vJG_w_6^HwH
z)M4k|J|zg<CFPE%E7#upH=p_DsQM@r&24j0*{KEpiPrJ`htMWdGy}|}5DetZ*vIR=
zBAG!wT#5kw0S(-t5t`Q39-cAhisK|BQ`sdY)uoE2HCA)_RlXUsAj9c<IP^+WYFs>)
ze!h|QubW+ShN!w4C@=veia<lubXar^0q9zikRr_&W4^Jh2+I%V{aLdg1<B{n@uIG1
zSV$T=Z6HaRHOnM*@SC=3n*1VjJ1spWVwj`K+~ZU8L|d1McoK99uTF`J8}`Mx>)@E&
z2Bbz*X1*03#Jf9>ejhX%jF~?9Zk%|84p2vi0$4w4169oRm_l&I9KYh(@I^;nzFX|I
zcrJcJ<DqXB7gX(A;lpXSmE&mPGgU`<qSdELm4qQ(YhR61&wvj7QZTNli7lu*`CAy4
zu;{iRu8B*b<>zYrZ2`W<7qihDM8epvY_Km)6a;HNOk{cIhN%XN9^RJnpIOoDc77nn
z9ZuZ&O}i)V!l>eb+&s5y|H>$Sb&TzJHFLf<04uC9VF>8OXI8zI^kzun)caIx@t{Cq
z)#!B(K5w(YLm@%i`A^hAk`>xYSK`#mI{YN!Q!}Pl4!p7IC%#YrlsfABjYG`45#1n0
zNz_P*jG?EegQ^I6pv7%S%a^XaZ=}vq$+Rjh!NqOOoYe{;OyFbec`b-;vR2=-T&(n1
zJVlGOxIhd9)6Tv3Gu^ED2p^!%55-2|3MUZhdjFIiQq7}{ha>06i2$oX)yK%nfP7n^
z3CFuG!i$wlz)#ZFX}`fd7&3n>dmr-akcT5jJ}(at@ylKbQ8Vuf*|HQ>*+?^Yik<0p
zG7#0G$7CSz#3uYvhD>pJj1J&5Xb2GG@u}HwZA#6Asra)VdX*t6G1H$uQ5~|uSNKaE
zJ3CADA**)wo01Xg@VC;$0>m(xfKC|gEHiR27Ew$lbfgl96n$8wtrKfz1Gw+Mfe6`_
z{#Yjw@@P$)DH|r$_sCRG&Agi*)qRybam9eB)?n;8wA@9WO+Gn5R$}(uy*{U2EuG&c
ztU7kc>4Xw7?59*RR{znq<xz>ce0;>691H!)zNHK~K*@U3_V3Gxga|0$I)p`Pn$}M%
zB-7P?P8Kf1gU7Z_SK;TeT`rU*1r<AO_YzsD<<j;@UJkA_Uf~%sv5GKkSO`%p-8g;=
zS5<S0b3zgnkBuRh6r;pzz9@?7Fu2X}tU`rCF&L>rGbs8(h|8`hzbg+%7jA%(>jsh>
zd<v1@e_1nRJ~4`)_rQ$&yoqrabD+DBTet%<54?j4e%ms<>Zd^VAWdh@8jxGDdNVqn
zja{fLOH8F)=o7)0Id`V4w%Qao^8;$S0)mC+5%Zg+@*i~Tg@WrWKNw3v5Ejta>10TH
zd5=-57+XVYBDx1&(eOT1)<^2I7iss@HWIwlv3U-aFS8d1BbAn30oU;Kjo&T#hT<5-
z&L=w^WctMUtOq+_fLn$wci3rHZ6_q?;zTjAi>b?C3@MMqzq5V?6H#*hD>cJC&hL!;
z#n#5&^rzL<`dA;RDAnY`V%8lS)ZACK8qXBm+$v1u5@wCH{to4}Vr!ALFW18+?g-3Q
z@RDfziKF?OkL}kYV{B$I&r_=&Scr8P^BDT`RRd{E_ZtV=BlL1mYbg{UW0ndFiVM|m
zBj%pY@)9*zqcjf_150t%tEclV00STL$-9NVsZs~RMe{=ZDVvBJKBN)-dU~=}bIJwd
zF1lbtFS#C`Ay+2@i8Sd0zVId>DRGHw<W1}pg%=nV>)DXXU3^G==TSBpu4HHvU!4d&
z#U+#a@W#-mBZPrDljdt^TNYT4!Fe0pWKlfIIlkRNq-|feEVZp~r02Q@P0u0CPaZ?M
z)IU`oc)9H*>$Ff<jT`{);C_=x#Y(CO_q-sxRq1t;iIG2Z=zF!Nvwp)44s|N1^h(q$
zc@2&Su9k77&0?p|rdj#K=i%bG>iB({nvhn-CG!%I7?oNDO$5cgmY;W`^+?da>;D2#
zv=U&YsWuH7sV7q+mAXfz?{0Fymzd&BmNVTpS7PfEgy(V9*sJgGK0j(x_D;?*%zbK(
z<gK@^cb@0(V<gx)kNqAi(jwCdow2AEtBv8VO|w%Y!d>QaX2yvdjMFqfQaNbqk@4Y#
zCVGH}&aez#-NF^YCawCqH*^x4UHykWBbzy$^HObkwkLT#8o*rGzlp@`&uQ4a3R)l0
zM!%30tz@bY_dtiiYcDc}$llp)d1+-6z$^|4FN?HRhHtby+@VtVtd#&?*SMTw4563P
z&uRHUYvK!yM!Mv)6uOoFqw$UTxso<{xK>#Lu!05C`%sA0B*;q%FJ_)Va21R>x{~>m
zD&pbN`OFUc5URnRT3YE22}3Aq0wgf2fI%}?<1-?-96yjLJXATiI-J)({2ndrjGcw{
z)+S<DIFTj|i)S53W0x~~ibEm@LV3Lm6J$`AGRcdm41H_|Rz!>7m)%uBtfZ$rej3)^
zwxgHs8G^RcG;s>TY)Zyr;lZF+XnWAvxW+ch@@#Z8*c_wSLpk=9)#4r&EMrW0)Gl0@
zgM=mMS(A~Jp-Kf_Aos3SYT>vngbs2Vh0Z;qM}ZN@6Gq9zo+QMR>aV2u!iMgEaIA+!
z3eR(4>ku`?lM+lBe=#+PofFJ?xCG2KLKbLlN(XGt+XekLkwn?z`J)tFiZ9BxDWcq5
z%ehh9_;W~KzMn9ej(dHDznlM5l)l7gG3)~q`f(71$eJr+mmhFsJZkv^P0{+wVe{3|
zi6rk%>*~Oxfe^634V5fG3hJ}iYs5eXG!ihz$l?<uqmZ__!i*B0S(X+)a%eFzwEg-J
zV#!lBMHX|KvUea_J@d^qFs)09VVB}QZ(M@pLgsb9mGA!YI<4EAvg={t_4i{^2@FgM
z(}Cu0bpI|h%avQ!n?dF?mU?d%Etmb;;q%Pc6ry`supwjbN{@_q=0`?8H7%WW2Tqn4
zS+lO<4tULk4Vj^2>;{Xc%%XN4Y+3)#coPDRDJ8{ah3h<mu;T2fj4F+U7;x%FB2=HA
z@fYhj&VwsNg)atrOJzI4iHtU~;6gh(WnoRvz#}Ebq?XN!OHud)66ZSh!8g|SK%4aM
zHEN?|7hC{~g}+=aO|Gfb673NEaz+_7u(HBqg6%ll1^v)IgT;$EVhad)#LIPOvx}Qj
zl=NXA{R5Vo2?xZkfId={p|2JH96d(WBs2<~o^5qaQ<h+NL?z^nV2&74i`QsJOtbvn
z=#qt?+)YulziI7pu)<xlLnF+!k_S5Mk$$^n#O<`s)=6GeQ?apJ4Ssg#yDBEjimMS;
zEHZui6I^gp5_^uhhqHQ_+jAQ5m765fcH%Izl2D6be!;*>2idJOWlV|&rQ|KkZIq!n
z#YlKDRd$6&R~_d!deC-ouVVaAcD4BntJ`?&Hd@vd2N63T;i&#>)hzd47;_0rL?b#(
zOf$dv%dXgKSC*Wncme?on}1vdw|h9&XE4Ac`Pr;ac~5UYrIpsX+#5S?&sL!<99I6z
z;3!;%zu0$=)R9R`FB}m{Wro=tTOndUPU1UNHf<4MYraFua^=R2&>RlZUtB!j{*&!Q
zLR1LVeXEc=0|q2A_NwSi(jW&?)zjmadx8km8V0!3?Zr&CCaalz$p$Rx)yUoWPLt9=
zzjOTrewk9eo}u4yF#HNzKh{4HOu!KIi6^ETOp+>Gv2|rzX_ZS;gqyGo!den7&lIH|
z#t<s%Fzu(h0*<K;V;Hc8F6`PstTzteJUhpl?;D|v2d4hs$%}(N>~K*xby2GKQ!j$q
zUbeH{;D%l=<=vyosCYQjTEqTA7@U7+6fhF;N#IWL6L@<_$AP*PU^<N8NPzgxSZTOd
z(n?yc>>HeXta|myQ6KsBiP~mnS)we3$#`RaaaJ6YV=U@X-dL3fwu(0=;SFQl$QaEa
z4p|jneKi?*ASW?lz_p7=@q`@2lq);UL+6&4nT#_2HKX%hlQZc^tUBR8n}Yx#9v1b!
zEPux%7To~Em6lkwoq3Czqc|k&onRP;EHwkSu(C;J=Pa4XLS~%UZ(>jvNNFP0US-g|
zF*5j-@<<BJiHV?PYEyyuIyQhK#mLT3lo_K$5T;^=A|?cfA9i2+)T&uG!wv_EKR^Wk
zzy!rS93ibC%81zwZ#RNDhbdBV_zq+2?l;wP{HclqbuH;5sqt}jl8WvV!bJA+?k}xY
zHbTa8`Y{nH%*XZwpC|_y^K=zJz^@p8mS_au9ja|nSq`m2DLR_~6?A200$c1bqxj_S
z4tnwCffLPEa~a71l7`=?HtAe;^SZRPb0IUCIgihk)D@!Yk^Jnfm4_-g=HYi0$2VWZ
zO<G)KHz(B|Cgc&(Ja$$a>?t+(1JY|Z1O~u>uq&C6!$?39IqDSKq3$N00S4J#lgy$b
z)e6wawjN33HwnZodT!FiWPVd=<fpLgVfoyjf+i6)4TjT28y@@v>TN*%@sARLXf_y2
zMqz~6+Q}N3<6Pxm%M><fnHED%Q$VhH*2)OTce5=RVP@+`^Ujw0?;l%F0#lOlpBK5_
z>ykbycn_o0B_iVznHpf_9P2yb9k1G8Fi?H9G{p0!WohE82)K9Qqj)`cpk*M3K~<+#
z7~eW4t3Oxb8*lt^_xU@ADERaQ0oe>tDI!LbL}gpOWU4KIwM4x?Xx)u9`Opcaa$7uv
z>Wazh1h;$JEPJOUMUioLB>IaaHqp#8^vP)YS)0jCP_`eCnMDSuD~5C<wH&B_W>Qaj
zn*&|AmVG8?^xm?|gOZKp*h3I+dRejX1J?j^;D8)~qPJy;quAKQjQOTA#gI?eeq4Kt
zvbc>_u|hZ=gOR1jn-8FeqmXoKi5^x01%L;AhCh9IS`^Vwz7NU#2VIp-mqqclmhcZN
z3OG(FX1UzcGE8k(-{5d^*f4w5aCo;;v*1HWKqm$B!Wl$vMt#uFr5;w}buljim_a*+
zKO;qO%UGNR*V{@?Kdq0NUx*7MT4~A=(0Xgsopx;8{iwsaxF1JvPiRmuj6@rOa2S>0
zIW8-lShIZtqg7sKW-|_bW*mbdMPPJ<0Wbg^tOl;d<o+$gY>0&lr{d_Z)G+iaVD-q2
z`@Wn}7tM5XEK`VOc&1b;k@w2W5o%kabj;he6T#q&8}(b(W>TNw!{(^<_aq~*war5A
z$leGI@e=fqm5Ji8+Nuct`pK1hiV9Up1bM5J{17jS;&Gz08Ce~<MF!Gjc%LgY@01a6
zhj(t;U=Q~kTQMm<yw2LVrP2$h_%6geDpsD*lVb4DzL@Z4gv4KPES4MurMhlovKp*S
zHqvl+t#psLL#H8RN{jHmzGSQGm4aL$#FUd*<gE(-k{;dDE0neX=kg9O5ijz$1ljtm
z^QWiX?SyXJ;P?nT`mx~E77GU!`u^;RWyp%bXTFl}_mW5$s|x?FJDY8_sLQLBCwKb@
z2fWhL??1HI1B0a?3zux2Py{G23~?`{FYfsRvkbmCJQgTTCCM-#T34}CyP?h#ZWK?6
z>132m6IO?3p233o-AFP+=;lgnMbo%KPU~{Ca%|~SKBT*=p|SDy#sjSvRUZZ9V7zU`
zI6=B87z}v#2BbUB{PcNP*XV_wI<96;MnVoMHpJOTCOe6`YbJA*qQD~oNIV%j2O1Ax
zOJ4%*XtkHX#VSk+q}H|Yn1-KL@)TU+W}M<n%?VES@H91c2^5P&>2zkY1V7uJYX_T^
zsMsGUu+G7NWf(nfgNq@XkLaY0;5Fk~r9g~1#=yY!(>-Gs|5Mu#hQUEVVV*=0(y;}5
zJd3C5uIKZ1p_GNqp7|z^luLhgK@FGf(w3g#<Xiu$G7_#uWsI2-X?xQIe&H++&qHn^
zjInGg)y_CKBmJ-MFMI5UKutvejg1+SF*MP3;zc3Xl@#wNxluC1iQLmN?Ft<(x!Z`1
zU1pLzfeh{U=pvwOb=`^WX!>@cJiqj5a4OK!h>cbP!~Wyc%+=AIc6}2B1XTRrUI3lq
z-~us}wv8RDxl|@Gxt75!PWAZ{%AG1I(Io`QI>-3~{Ef>GB_U&k{2Jg5wJ8*$p0cnH
z(GH&3h*Y;2R|7gg8eP)CuqzprGRV+XSpuNpRS_CR-&SOd(bZoA$Ez->^ivg@<U}e<
z31uF0XLWh0{0O<e>b(2g%YkUYiD2E=Scm3AEsxL9;q`FjBFyuao;hb4hSYWvy<}Ia
z*##(cQ6I9NJF|N2TW>B;CbT8jS>`HgKB%N_sac+W`5eM~T=q-Fx8fJ~QBl&dk`Jx1
z8f5>?=*-`?f*xhGyh9rM5^<prsN$#{Zzin%MpUT382&u)BUXx-HEY9Y3R0IC@0Cbf
zUih7+#VSX(Y!mg+sV=5A^%ddwv!y~Z7%~vl&=lFSy{AbBg9`L*&ewo_lL)eXlM_&A
zDeLz~l!xj6$oi-HUkilWONl{r%3>S+tHgf?w9w$La<F=D!5aLh3*tXxns5LSZ=9V^
zW{LkI!a+5V0e5)m1CNOR^?wpD<KRc80lP7Zf3*hy0p{W)17FnvbAsSg-G2odk^<qb
z^ukw@r9b>bB!QcV6biqnf-CvE4*yqRj|d5HrvunRn}qZa5uA8nfjcj>(B$6#%k;0>
zAwpnjr1mOQAOEcy3q81Vqk$~_&wrWzH5)MiEKOvsM2_u$R8t3=Y$49__CHo&Lj}CU
Y)KD1lT9stKL4Yr5ae1*HB8Gwg2lSJ;0RR91

literal 0
HcmV?d00001

diff --git a/apps/web-antd/src/views/mall/product/category/components/product-category-select.vue b/apps/web-antd/src/views/mall/product/category/components/product-category-select.vue
new file mode 100644
index 000000000..b54c6f0d2
--- /dev/null
+++ b/apps/web-antd/src/views/mall/product/category/components/product-category-select.vue
@@ -0,0 +1,68 @@
+<script lang="ts" setup>
+import { computed, onMounted, ref } from 'vue';
+
+import { handleTree } from '@vben/utils';
+
+import * as ProductCategoryApi from '#/api/mall/product/category';
+
+/** 商品分类选择组件 */
+defineOptions({ name: 'ProductCategorySelect' });
+
+const props = defineProps({
+  // 选中的ID
+  modelValue: {
+    type: [Number, Array<Number>],
+    default: undefined,
+  },
+  // 是否多选
+  multiple: {
+    type: Boolean,
+    default: false,
+  },
+  // 上级品类的编号
+  parentId: {
+    type: Number,
+    default: undefined,
+  },
+});
+
+/** 分类选择 */
+const emit = defineEmits(['update:modelValue']);
+
+/** 选中的分类 ID */
+const selectCategoryId = computed({
+  get: () => {
+    return props.modelValue;
+  },
+  set: (val: number | number[]) => {
+    emit('update:modelValue', val);
+  },
+});
+
+/** 初始化 */
+const categoryList = ref<any[]>([]); // 分类树
+onMounted(async () => {
+  // 获得分类树
+  const data = await ProductCategoryApi.getCategoryList({
+    parentId: props.parentId,
+  });
+  categoryList.value = handleTree(data, 'id', 'parentId');
+});
+</script>
+<template>
+  <TreeSelect
+    v-model:value="selectCategoryId"
+    :tree-data="categoryList"
+    :field-names="{
+      children: 'children',
+      label: 'name',
+      value: 'id',
+    }"
+    :multiple="multiple"
+    :tree-checkable="multiple"
+    class="w-1/1"
+    placeholder="请选择商品分类"
+    allow-clear
+    tree-default-expand-all
+  />
+</template>
diff --git a/apps/web-antd/src/views/mall/promotion/components/app-link-input/app-link-select-dialog.vue b/apps/web-antd/src/views/mall/promotion/components/app-link-input/app-link-select-dialog.vue
new file mode 100644
index 000000000..4102d7063
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/app-link-input/app-link-select-dialog.vue
@@ -0,0 +1,231 @@
+<script lang="ts" setup>
+import type { AppLink } from './data';
+
+import { nextTick, ref } from 'vue';
+
+import { getUrlNumberValue } from '@vben/utils';
+
+import ProductCategorySelect from '#/views/mall/product/category/components/product-category-select.vue';
+
+import { APP_LINK_GROUP_LIST, APP_LINK_TYPE_ENUM } from './data';
+
+/** APP 链接选择弹框 */
+defineOptions({ name: 'AppLinkSelectDialog' });
+
+const emit = defineEmits<{
+  appLinkChange: [appLink: AppLink];
+  change: [link: string];
+}>();
+
+const activeGroup = ref(APP_LINK_GROUP_LIST[0]?.name); // 选中的分组，默认选中第一个
+const activeAppLink = ref({} as AppLink); // 选中的 APP 链接
+
+const linkScrollbar = ref<HTMLDivElement>(); // 右侧滚动条
+const groupTitleRefs = ref<HTMLInputElement[]>([]); // 分组标题引用列表
+const groupScrollbar = ref<HTMLDivElement>(); // 分组滚动条
+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 open = (link: string) => {
+  activeAppLink.value.path = link;
+  dialogVisible.value = true;
+  // 滚动到当前的链接
+  const group = APP_LINK_GROUP_LIST.find((group) =>
+    group.links.some((linkItem) => {
+      const sameLink = isSameLink(linkItem.path, link);
+      if (sameLink) {
+        activeAppLink.value = { ...linkItem, path: link };
+      }
+      return sameLink;
+    }),
+  );
+  if (group) {
+    // 使用 nextTick 的原因：可能 Dom 还没生成，导致滚动失败
+    nextTick(() => handleGroupSelected(group.name));
+  }
+};
+defineExpose({ open });
+
+/** 处理 APP 链接选中 */
+const handleAppLinkSelected = (appLink: AppLink) => {
+  if (!isSameLink(appLink.path, activeAppLink.value.path)) {
+    activeAppLink.value = appLink;
+  }
+  switch (appLink.type) {
+    case APP_LINK_TYPE_ENUM.PRODUCT_CATEGORY_LIST: {
+      detailSelectDialog.value.visible = true;
+      detailSelectDialog.value.type = appLink.type;
+      // 返显
+      detailSelectDialog.value.id =
+        getUrlNumberValue(
+          'id',
+          `http://127.0.0.1${activeAppLink.value.path}`,
+        ) || undefined;
+      break;
+    }
+    default: {
+      break;
+    }
+  }
+};
+
+function handleSubmit() {
+  dialogVisible.value = false;
+  emit('change', activeAppLink.value.path);
+  emit('appLinkChange', activeAppLink.value);
+}
+
+/**
+ * 处理右侧链接列表滚动
+ * @param {object} param0 滚动事件参数
+ * @param {number} param0.scrollTop 滚动条的位置
+ */
+function handleScroll({ scrollTop }: { scrollTop: number }) {
+  const titleEl = groupTitleRefs.value.find((titleEl: HTMLInputElement) => {
+    // 获取标题的位置信息
+    const { offsetHeight, offsetTop } = titleEl;
+    // 判断标题是否在可视范围内
+    return scrollTop >= offsetTop && scrollTop < offsetTop + offsetHeight;
+  });
+  // 只需处理一次
+  if (titleEl && activeGroup.value !== titleEl.textContent) {
+    activeGroup.value = titleEl.textContent || '';
+    // 同步左侧的滚动条位置
+    scrollToGroupBtn(activeGroup.value);
+  }
+}
+
+/** 处理分组选中 */
+function handleGroupSelected(group: string) {
+  activeGroup.value = group;
+  const titleRef = groupTitleRefs.value.find(
+    (item: HTMLInputElement) => item.textContent === group,
+  );
+  if (titleRef && linkScrollbar.value) {
+    // 滚动分组标题
+    linkScrollbar.value.scrollTop = titleRef.offsetTop;
+  }
+}
+
+/** 自动滚动分组按钮，确保分组按钮保持在可视区域内 */
+function scrollToGroupBtn(group: string) {
+  const groupBtn = groupBtnRefs.value
+    .find((ref: HTMLButtonElement | undefined) => ref?.textContent === group);
+  if (groupBtn && groupScrollbar.value) {
+    groupScrollbar.value.scrollTop = groupBtn.offsetTop;
+  }
+}
+
+/** 是否为相同的链接（不比较参数，只比较链接） */
+function isSameLink(link1: string, link2: string) {
+  return link2 ? link1.split('?')[0] === link2.split('?')[0] : false;
+}
+
+/** 处理详情选择 */
+function handleProductCategorySelected(id: number) {
+  // TODO @AI：这里有点问题；activeAppLink 地址；
+  const url = new URL(activeAppLink.value.path, 'http://127.0.0.1');
+  // 修改 id 参数
+  url.searchParams.set('id', `${id}`);
+  // 排除域名
+  activeAppLink.value.path = `${url.pathname}${url.search}`;
+  // 关闭对话框
+  detailSelectDialog.value.visible = false;
+  // 重置 id
+  detailSelectDialog.value.id = undefined;
+}
+</script>
+<template>
+  <Modal v-model:open="dialogVisible" title="选择链接" width="65%">
+    <div class="flex h-[500px] gap-2">
+      <!-- 左侧分组列表 -->
+      <div
+        class="h-full overflow-y-auto flex flex-col"
+        ref="groupScrollbar"
+      >
+        <Button
+          v-for="(group, groupIndex) in APP_LINK_GROUP_LIST"
+          :key="groupIndex"
+          class="ml-0 mr-4 w-[90px] justify-start mb-1"
+          :class="[{ active: activeGroup === group.name }]"
+          ref="groupBtnRefs"
+          :type="activeGroup === group.name ? 'primary' : 'default'"
+          @click="handleGroupSelected(group.name)"
+        >
+          {{ group.name }}
+        </Button>
+      </div>
+      <!-- 右侧链接列表 -->
+      <div
+        class="h-full flex-1 overflow-y-auto"
+        @scroll="handleScroll"
+        ref="linkScrollbar"
+      >
+        <div
+          v-for="(group, groupIndex) in APP_LINK_GROUP_LIST"
+          :key="groupIndex"
+        >
+          <!-- 分组标题 -->
+          <div class="font-bold" ref="groupTitleRefs">{{ group.name }}</div>
+          <!-- 链接列表 -->
+          <Tooltip
+            v-for="(appLink, appLinkIndex) in group.links"
+            :key="appLinkIndex"
+            :title="appLink.path"
+            placement="bottom"
+            :mouse-enter-delay="0.3"
+          >
+            <Button
+              class="mb-2 ml-0 mr-2"
+              :type="
+                isSameLink(appLink.path, activeAppLink.path)
+                  ? 'primary'
+                  : 'default'
+              "
+              @click="handleAppLinkSelected(appLink)"
+            >
+              {{ appLink.name }}
+            </Button>
+          </Tooltip>
+        </div>
+      </div>
+    </div>
+    <!-- 底部对话框操作按钮 -->
+    <template #footer>
+      <Button type="primary" @click="handleSubmit">确 定</Button>
+      <Button @click="dialogVisible = false">取 消</Button>
+    </template>
+  </Modal>
+  <Modal v-model:open="detailSelectDialog.visible" title="" width="50%">
+    <Form class="min-h-[200px]">
+      <FormItem
+        label="选择分类"
+        v-if="
+          detailSelectDialog.type === APP_LINK_TYPE_ENUM.PRODUCT_CATEGORY_LIST
+        "
+      >
+        <ProductCategorySelect
+          v-model="detailSelectDialog.id"
+          :parent-id="0"
+          @update:model-value="handleProductCategorySelected"
+        />
+      </FormItem>
+    </Form>
+  </Modal>
+</template>
+<style lang="scss" scoped>
+:deep(.ant-btn + .ant-btn) {
+  margin-left: 0 !important;
+}
+</style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/app-link-input/data.ts b/apps/web-antd/src/views/mall/promotion/components/app-link-input/data.ts
new file mode 100644
index 000000000..3eb3db71f
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/app-link-input/data.ts
@@ -0,0 +1,220 @@
+/** APP 链接分组 */
+export interface AppLinkGroup {
+  name: string; // 分组名称
+  links: AppLink[]; // 链接列表
+}
+
+/** APP 链接 */
+export interface AppLink {
+  name: string; // 链接名称
+  path: string; // 链接地址
+  type?: APP_LINK_TYPE_ENUM; // 链接的类型
+}
+
+/** APP 链接类型（需要特殊处理，例如商品详情） */
+export enum APP_LINK_TYPE_ENUM {
+  ACTIVITY_COMBINATION, // 拼团活动
+  ACTIVITY_POINT, // 积分商城活动
+  ACTIVITY_SECKILL, // 秒杀活动
+  ARTICLE_DETAIL, // 文章详情
+  COUPON_DETAIL, // 优惠券详情
+  DIY_PAGE_DETAIL, // 自定义页面详情
+  PRODUCT_CATEGORY_LIST, // 品类列表
+  PRODUCT_DETAIL_COMBINATION, // 拼团商品详情
+  PRODUCT_DETAIL_NORMAL, // 商品详情
+  PRODUCT_DETAIL_SECKILL, // 秒杀商品详情
+  PRODUCT_LIST, // 商品列表
+}
+
+/** APP 链接列表（做一下持久化？） */
+export const APP_LINK_GROUP_LIST = [
+  {
+    name: '商城',
+    links: [
+      {
+        name: '首页',
+        path: '/pages/index/index',
+      },
+      {
+        name: '商品分类',
+        path: '/pages/index/category',
+        type: APP_LINK_TYPE_ENUM.PRODUCT_CATEGORY_LIST,
+      },
+      {
+        name: '购物车',
+        path: '/pages/index/cart',
+      },
+      {
+        name: '个人中心',
+        path: '/pages/index/user',
+      },
+      {
+        name: '商品搜索',
+        path: '/pages/index/search',
+      },
+      {
+        name: '自定义页面',
+        path: '/pages/index/page',
+        type: APP_LINK_TYPE_ENUM.DIY_PAGE_DETAIL,
+      },
+      {
+        name: '客服',
+        path: '/pages/chat/index',
+      },
+      {
+        name: '系统设置',
+        path: '/pages/public/setting',
+      },
+      {
+        name: '常见问题',
+        path: '/pages/public/faq',
+      },
+    ],
+  },
+  {
+    name: '商品',
+    links: [
+      {
+        name: '商品列表',
+        path: '/pages/goods/list',
+        type: APP_LINK_TYPE_ENUM.PRODUCT_LIST,
+      },
+      {
+        name: '商品详情',
+        path: '/pages/goods/index',
+        type: APP_LINK_TYPE_ENUM.PRODUCT_DETAIL_NORMAL,
+      },
+      {
+        name: '拼团商品详情',
+        path: '/pages/goods/groupon',
+        type: APP_LINK_TYPE_ENUM.PRODUCT_DETAIL_COMBINATION,
+      },
+      {
+        name: '秒杀商品详情',
+        path: '/pages/goods/seckill',
+        type: APP_LINK_TYPE_ENUM.PRODUCT_DETAIL_SECKILL,
+      },
+    ],
+  },
+  {
+    name: '营销活动',
+    links: [
+      {
+        name: '拼团订单',
+        path: '/pages/activity/groupon/order',
+      },
+      {
+        name: '营销商品',
+        path: '/pages/activity/index',
+      },
+      {
+        name: '拼团活动',
+        path: '/pages/activity/groupon/list',
+        type: APP_LINK_TYPE_ENUM.ACTIVITY_COMBINATION,
+      },
+      {
+        name: '秒杀活动',
+        path: '/pages/activity/seckill/list',
+        type: APP_LINK_TYPE_ENUM.ACTIVITY_SECKILL,
+      },
+      {
+        name: '积分商城活动',
+        path: '/pages/activity/point/list',
+        type: APP_LINK_TYPE_ENUM.ACTIVITY_POINT,
+      },
+      {
+        name: '签到中心',
+        path: '/pages/app/sign',
+      },
+      {
+        name: '优惠券中心',
+        path: '/pages/coupon/list',
+      },
+      {
+        name: '优惠券详情',
+        path: '/pages/coupon/detail',
+        type: APP_LINK_TYPE_ENUM.COUPON_DETAIL,
+      },
+      {
+        name: '文章详情',
+        path: '/pages/public/richtext',
+        type: APP_LINK_TYPE_ENUM.ARTICLE_DETAIL,
+      },
+    ],
+  },
+  {
+    name: '分销商城',
+    links: [
+      {
+        name: '分销中心',
+        path: '/pages/commission/index',
+      },
+      {
+        name: '推广商品',
+        path: '/pages/commission/goods',
+      },
+      {
+        name: '分销订单',
+        path: '/pages/commission/order',
+      },
+      {
+        name: '我的团队',
+        path: '/pages/commission/team',
+      },
+    ],
+  },
+  {
+    name: '支付',
+    links: [
+      {
+        name: '充值余额',
+        path: '/pages/pay/recharge',
+      },
+      {
+        name: '充值记录',
+        path: '/pages/pay/recharge-log',
+      },
+    ],
+  },
+  {
+    name: '用户中心',
+    links: [
+      {
+        name: '用户信息',
+        path: '/pages/user/info',
+      },
+      {
+        name: '用户订单',
+        path: '/pages/order/list',
+      },
+      {
+        name: '售后订单',
+        path: '/pages/order/aftersale/list',
+      },
+      {
+        name: '商品收藏',
+        path: '/pages/user/goods-collect',
+      },
+      {
+        name: '浏览记录',
+        path: '/pages/user/goods-log',
+      },
+      {
+        name: '地址管理',
+        path: '/pages/user/address/list',
+      },
+      {
+        name: '用户佣金',
+        path: '/pages/user/wallet/commission',
+      },
+      {
+        name: '用户余额',
+        path: '/pages/user/wallet/money',
+      },
+      {
+        name: '用户积分',
+        path: '/pages/user/wallet/score',
+      },
+    ],
+  },
+] as AppLinkGroup[];
diff --git a/apps/web-antd/src/views/mall/promotion/components/app-link-input/index.vue b/apps/web-antd/src/views/mall/promotion/components/app-link-input/index.vue
new file mode 100644
index 000000000..368ca6500
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/app-link-input/index.vue
@@ -0,0 +1,47 @@
+<script lang="ts" setup>
+// TODO @AI：改成 El 标签风格，而不是 el-
+// TODO @AI：一些 modal 是否使用 Modal 组件，而不是 el-modal？
+import { ref, watch } from 'vue';
+
+import AppLinkSelectDialog from './app-link-select-dialog.vue';
+
+/** APP 链接输入框 */
+defineOptions({ name: 'AppLinkInput' });
+
+// 定义属性
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: '',
+  }, // 当前选中的链接
+});
+
+const emit = defineEmits<{
+  'update:modelValue': [link: string];
+}>();
+
+const dialogRef = ref(); // 选择对话框
+
+const appLink = ref(''); // 当前的链接
+const handleOpenDialog = () => dialogRef.value?.open(appLink.value); // 处理打开对话框
+const handleLinkSelected = (link: string) => (appLink.value = link); // 处理 APP 链接选中
+
+watch(
+  () => props.modelValue,
+  () => (appLink.value = props.modelValue),
+  { immediate: true },
+);
+
+watch(
+  () => appLink.value,
+  () => emit('update:modelValue', appLink.value),
+);
+</script>
+<template>
+  <InputGroup compact>
+    <Input v-model:value="appLink" placeholder="输入或选择链接" class="flex-1" />
+    <Button @click="handleOpenDialog">选择</Button>
+  </InputGroup>
+
+  <AppLinkSelectDialog ref="dialogRef" @change="handleLinkSelected" />
+</template>
diff --git a/apps/web-antd/src/views/mall/promotion/components/color-input/index.vue b/apps/web-antd/src/views/mall/promotion/components/color-input/index.vue
new file mode 100644
index 000000000..96c9b3b5f
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/color-input/index.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+// TODO @AI：改成 El 风格，而不是iel- 风格；
+import { computed } from 'vue';
+
+import { PREDEFINE_COLORS } from '@vben/constants';
+
+/** 颜色输入框 */
+defineOptions({ name: 'ColorInput' });
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: '',
+  },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const color = computed({
+  get: () => {
+    return props.modelValue;
+  },
+  set: (val: string) => {
+    emit('update:modelValue', val);
+  },
+});
+</script>
+
+<template>
+  <InputGroup compact>
+    <ColorPicker v-model:value="color" :presets="PREDEFINE_COLORS" />
+    <Input v-model:value="color" class="flex-1" />
+  </InputGroup>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-container-property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-container-property.vue
new file mode 100644
index 000000000..700faa796
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-container-property.vue
@@ -0,0 +1,185 @@
+<script setup lang="ts">
+import type { ComponentStyle } from '../util';
+
+import { useVModel } from '@vueuse/core';
+
+import UploadImg from '#/components/upload/image-upload.vue';
+import { ColorInput } from '#/views/mall/promotion/components';
+
+/**
+ * 组件容器属性：目前右边部分
+ * 用于包裹组件，为组件提供 背景、外边距、内边距、边框等样式
+ */
+defineOptions({ name: 'ComponentContainer' });
+
+const props = defineProps<{ modelValue: ComponentStyle }>();
+const emit = defineEmits(['update:modelValue']);
+const formData = useVModel(props, 'modelValue', emit);
+
+const treeData = [
+  {
+    label: '外部边距',
+    prop: 'margin',
+    children: [
+      {
+        label: '上',
+        prop: 'marginTop',
+      },
+      {
+        label: '右',
+        prop: 'marginRight',
+      },
+      {
+        label: '下',
+        prop: 'marginBottom',
+      },
+      {
+        label: '左',
+        prop: 'marginLeft',
+      },
+    ],
+  },
+  {
+    label: '内部边距',
+    prop: 'padding',
+    children: [
+      {
+        label: '上',
+        prop: 'paddingTop',
+      },
+      {
+        label: '右',
+        prop: 'paddingRight',
+      },
+      {
+        label: '下',
+        prop: 'paddingBottom',
+      },
+      {
+        label: '左',
+        prop: 'paddingLeft',
+      },
+    ],
+  },
+  {
+    label: '边框圆角',
+    prop: 'borderRadius',
+    children: [
+      {
+        label: '上左',
+        prop: 'borderTopLeftRadius',
+      },
+      {
+        label: '上右',
+        prop: 'borderTopRightRadius',
+      },
+      {
+        label: '下右',
+        prop: 'borderBottomRightRadius',
+      },
+      {
+        label: '下左',
+        prop: 'borderBottomLeftRadius',
+      },
+    ],
+  },
+];
+
+const handleSliderChange = (prop: string) => {
+  switch (prop) {
+    case 'borderRadius': {
+      formData.value.borderTopLeftRadius = formData.value.borderRadius;
+      formData.value.borderTopRightRadius = formData.value.borderRadius;
+      formData.value.borderBottomRightRadius = formData.value.borderRadius;
+      formData.value.borderBottomLeftRadius = formData.value.borderRadius;
+      break;
+    }
+    case 'margin': {
+      formData.value.marginTop = formData.value.margin;
+      formData.value.marginRight = formData.value.margin;
+      formData.value.marginBottom = formData.value.margin;
+      formData.value.marginLeft = formData.value.margin;
+      break;
+    }
+    case 'padding': {
+      formData.value.paddingTop = formData.value.padding;
+      formData.value.paddingRight = formData.value.padding;
+      formData.value.paddingBottom = formData.value.padding;
+      formData.value.paddingLeft = formData.value.padding;
+      break;
+    }
+  }
+};
+</script>
+
+<template>
+  <Tabs>
+    <!-- 每个组件的自定义内容 -->
+    <TabPane tab="内容" key="content" v-if="$slots.default">
+      <slot></slot>
+    </TabPane>
+
+    <!-- 每个组件的通用内容 -->
+    <TabPane tab="样式" key="style">
+      <Card title="组件样式" class="property-group">
+        <Form :model="formData" labelCol="{ span: 6 }" wrapperCol="{ span: 18 }">
+          <FormItem label="组件背景" name="bgType">
+            <RadioGroup v-model:value="formData.bgType">
+              <Radio value="color">纯色</Radio>
+              <Radio value="img">图片</Radio>
+            </RadioGroup>
+          </FormItem>
+          <FormItem
+            label="选择颜色"
+            name="bgColor"
+            v-if="formData.bgType === 'color'"
+          >
+            <ColorInput v-model="formData.bgColor" />
+          </FormItem>
+          <FormItem label="上传图片" name="bgImg" v-else>
+            <UploadImg
+              v-model="formData.bgImg"
+              :limit="1"
+              :show-description="false"
+            >
+              <template #tip>建议宽度 750px</template>
+            </UploadImg>
+          </FormItem>
+          <Tree
+            :tree-data="treeData"
+            :expand-on-click-node="false"
+            default-expand-all
+          >
+            <template #title="{ data, node }">
+              <FormItem
+                :label="data.label"
+                :name="data.prop"
+                class="mb-0 w-full"
+              >
+                <Slider
+                  v-model:value="
+                    formData[data.prop as keyof ComponentStyle] as number
+                  "
+                  :max="100"
+                  :min="0"
+                  @change="handleSliderChange(data.prop)"
+                />
+              </FormItem>
+            </template>
+          </Tree>
+          <slot name="style" :style="formData"></slot>
+        </Form>
+      </Card>
+    </TabPane>
+  </Tabs>
+</template>
+
+<style scoped lang="scss">
+:deep(.ant-slider) {
+  margin-right: 16px;
+}
+
+:deep(.ant-input-number) {
+  width: 50px;
+}
+</style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-container.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-container.vue
new file mode 100644
index 000000000..4cfae8d55
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-container.vue
@@ -0,0 +1,268 @@
+<script setup lang="ts">
+import type {
+  ComponentStyle,
+  DiyComponent,
+} from '../util';
+
+import { computed } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+
+import { components } from './mobile';
+import { VerticalButtonGroup } from '#/views/mall/promotion/components';
+
+/**
+ * 组件容器：目前在中间部分
+ * 用于包裹组件，为组件提供 背景、外边距、内边距、边框等样式
+ */
+defineOptions({ name: 'ComponentContainer', components });
+
+const props = defineProps({
+  component: {
+    type: Object as () => DiyComponentWithStyle,
+    required: true,
+  },
+  active: {
+    type: Boolean,
+    default: false,
+  },
+  canMoveUp: {
+    type: Boolean,
+    default: false,
+  },
+  canMoveDown: {
+    type: Boolean,
+    default: false,
+  },
+  showToolbar: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+const emits = defineEmits<{
+  (e: 'move', direction: number): void;
+  (e: 'copy'): void;
+  (e: 'delete'): void;
+}>();
+
+type DiyComponentWithStyle = DiyComponent<any> & {
+  property: { style?: ComponentStyle };
+};
+/**
+ * 组件样式
+ */
+const style = computed(() => {
+  const componentStyle = props.component.property.style;
+  if (!componentStyle) {
+    return {};
+  }
+  return {
+    marginTop: `${componentStyle.marginTop || 0}px`,
+    marginBottom: `${componentStyle.marginBottom || 0}px`,
+    marginLeft: `${componentStyle.marginLeft || 0}px`,
+    marginRight: `${componentStyle.marginRight || 0}px`,
+    paddingTop: `${componentStyle.paddingTop || 0}px`,
+    paddingRight: `${componentStyle.paddingRight || 0}px`,
+    paddingBottom: `${componentStyle.paddingBottom || 0}px`,
+    paddingLeft: `${componentStyle.paddingLeft || 0}px`,
+    borderTopLeftRadius: `${componentStyle.borderTopLeftRadius || 0}px`,
+    borderTopRightRadius: `${componentStyle.borderTopRightRadius || 0}px`,
+    borderBottomRightRadius: `${componentStyle.borderBottomRightRadius || 0}px`,
+    borderBottomLeftRadius: `${componentStyle.borderBottomLeftRadius || 0}px`,
+    overflow: 'hidden',
+    background:
+      componentStyle.bgType === 'color'
+        ? componentStyle.bgColor
+        : `url(${componentStyle.bgImg})`,
+  };
+});
+
+/**
+ * 移动组件
+ * @param direction 移动方向
+ */
+const handleMoveComponent = (direction: number) => {
+  emits('move', direction);
+};
+
+/**
+ * 复制组件
+ */
+const handleCopyComponent = () => {
+  emits('copy');
+};
+
+/**
+ * 删除组件
+ */
+const handleDeleteComponent = () => {
+  emits('delete');
+};
+</script>
+<template>
+  <div class="component" :class="[{ active }]">
+    <div
+      :style="{
+        ...style,
+      }"
+    >
+      <component :is="component.id" :property="component.property" />
+    </div>
+    <div class="component-wrap">
+      <!-- 左侧：组件名（悬浮的小贴条） -->
+      <div class="component-name" v-if="component.name">
+        {{ component.name }}
+      </div>
+      <!-- 右侧：组件操作工具栏 -->
+      <div
+        class="component-toolbar"
+        v-if="showToolbar && component.name && active"
+      >
+        <VerticalButtonGroup type="primary">
+          <Tooltip title="上移" placement="right">
+            <Button
+              :disabled="!canMoveUp"
+              @click.stop="handleMoveComponent(-1)"
+            >
+              <IconifyIcon icon="ep:arrow-up" />
+            </Button>
+          </Tooltip>
+          <Tooltip title="下移" placement="right">
+            <Button
+              :disabled="!canMoveDown"
+              @click.stop="handleMoveComponent(1)"
+            >
+              <IconifyIcon icon="ep:arrow-down" />
+            </Button>
+          </Tooltip>
+          <Tooltip title="复制" placement="right">
+            <Button @click.stop="handleCopyComponent()">
+              <IconifyIcon icon="ep:copy-document" />
+            </Button>
+          </Tooltip>
+          <Tooltip title="删除" placement="right">
+            <Button @click.stop="handleDeleteComponent()">
+              <IconifyIcon icon="ep:delete" />
+            </Button>
+          </Tooltip>
+        </VerticalButtonGroup>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+$active-border-width: 2px;
+$hover-border-width: 1px;
+$name-position: -85px;
+$toolbar-position: -55px;
+
+/* 组件 */
+.component {
+  position: relative;
+  cursor: move;
+
+  .component-wrap {
+    position: absolute;
+    top: 0;
+    left: -$active-border-width;
+    display: block;
+    width: 100%;
+    height: 100%;
+
+    /* 鼠标放到组件上时 */
+    &:hover {
+      border: $hover-border-width dashed var(--ant-color-primary);
+      box-shadow: 0 0 5px 0 rgb(24 144 255 / 30%);
+
+      .component-name {
+        top: $hover-border-width;
+
+        /* 防止加了边框之后，位置移动 */
+        left: $name-position - $hover-border-width;
+      }
+    }
+
+    /* 左侧：组件名称 */
+    .component-name {
+      position: absolute;
+      top: $active-border-width;
+      left: $name-position;
+      display: block;
+      width: 80px;
+      height: 25px;
+      font-size: 12px;
+      line-height: 25px;
+      color: #6a6a6a;
+      text-align: center;
+      background: #fff;
+      box-shadow:
+        0 0 4px #00000014,
+        0 2px 6px #0000000f,
+        0 4px 8px 2px #0000000a;
+
+      /* 右侧小三角 */
+      &::after {
+        position: absolute;
+        top: 7.5px;
+        right: -10px;
+        width: 0;
+        height: 0;
+        content: ' ';
+        border: 5px solid transparent;
+        border-left-color: #fff;
+      }
+    }
+
+    /* 右侧：组件操作工具栏 */
+    .component-toolbar {
+      position: absolute;
+      top: 0;
+      right: $toolbar-position;
+      display: none;
+
+      /* 左侧小三角 */
+      &::before {
+        position: absolute;
+        top: 10px;
+        left: -10px;
+        width: 0;
+        height: 0;
+        content: ' ';
+        border: 5px solid transparent;
+        border-right-color: #2d8cf0;
+      }
+    }
+  }
+
+  /* 组件选中时 */
+  &.active {
+    margin-bottom: 4px;
+
+    .component-wrap {
+      margin-bottom: $active-border-width + $active-border-width;
+      border: $active-border-width solid var(--ant-color-primary) !important;
+      box-shadow: 0 0 10px 0 rgb(24 144 255 / 30%);
+
+      .component-name {
+        top: 0 !important;
+
+        /* 防止加了边框之后，位置移动 */
+        left: $name-position - $active-border-width !important;
+        color: #fff;
+        background: var(--ant-color-primary);
+
+        &::after {
+          border-left-color: var(--ant-color-primary);
+        }
+      }
+
+      .component-toolbar {
+        display: block;
+      }
+    }
+  }
+}
+</style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-library.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-library.vue
new file mode 100644
index 000000000..4ae265286
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-library.vue
@@ -0,0 +1,219 @@
+<script setup lang="ts">
+import type {
+  DiyComponent,
+  DiyComponentLibrary,
+} from '../util';
+
+import { reactive, watch } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+import { cloneDeep } from '@vben/utils';
+
+import draggable from 'vuedraggable';
+
+import { componentConfigs } from './mobile/index';
+
+/** 组件库：目前左侧的【基础组件】、【图文组件】部分 */
+defineOptions({ name: 'ComponentLibrary' });
+
+// 组件列表
+const props = defineProps<{
+  list: DiyComponentLibrary[];
+}>();
+// 组件分组
+const groups = reactive<any[]>([]);
+// 展开的折叠面板
+const extendGroups = reactive<string[]>([]);
+
+// 监听 list 属性，按照 DiyComponentLibrary 的 name 分组
+watch(
+  () => props.list,
+  () => {
+    // 清除旧数据
+    extendGroups.length = 0;
+    groups.length = 0;
+    // 重新生成数据
+    props.list.forEach((group) => {
+      // 是否展开分组
+      if (group.extended) {
+        extendGroups.push(group.name);
+      }
+      // 查找组件
+      const components = group.components
+        .map((name) => componentConfigs[name] as DiyComponent<any>)
+        .filter(Boolean);
+      if (components.length > 0) {
+        groups.push({
+          name: group.name,
+          components,
+        });
+      }
+    });
+  },
+  {
+    immediate: true,
+  },
+);
+
+// 克隆组件
+const handleCloneComponent = (component: DiyComponent<any>) => {
+  const instance = cloneDeep(component);
+  instance.uid = Date.now();
+  return instance;
+};
+</script>
+
+<template>
+  <div class="editor-left w-[261px]">
+    <div class="h-full overflow-y-auto">
+      <Collapse v-model:activeKey="extendGroups">
+        <CollapsePanel
+          v-for="group in groups"
+          :key="group.name"
+          :header="group.name"
+        >
+          <draggable
+            class="component-container"
+            ghost-class="draggable-ghost"
+            item-key="index"
+            :list="group.components"
+            :sort="false"
+            :group="{ name: 'component', pull: 'clone', put: false }"
+            :clone="handleCloneComponent"
+            :animation="200"
+            :force-fallback="true"
+          >
+            <template #item="{ element }">
+              <div>
+                <div class="drag-placement">组件放置区域</div>
+                <div class="component">
+                  <IconifyIcon :icon="element.icon" :size="32" />
+                  <span class="mt-1 text-xs">{{ element.name }}</span>
+                </div>
+              </div>
+            </template>
+          </draggable>
+        </CollapsePanel>
+      </Collapse>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.editor-left {
+  z-index: 1;
+  flex-shrink: 0;
+  user-select: none;
+  box-shadow: 8px 0 8px -8px rgb(0 0 0 / 12%);
+
+  :deep(.ant-collapse) {
+    border-top: none;
+  }
+
+  :deep(.ant-collapse-item) {
+    border-bottom: none;
+  }
+
+  :deep(.ant-collapse-content) {
+    padding-bottom: 0;
+  }
+
+  :deep(.ant-collapse-header) {
+    height: 32px;
+    padding: 0 24px !important;
+    line-height: 32px;
+    background-color: var(--ant-color-bg-layout);
+    border-bottom: none;
+  }
+
+  .component-container {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+  }
+
+  .component {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 86px;
+    height: 86px;
+    cursor: move;
+    border-right: 1px solid var(--ant-color-border-secondary);
+    border-bottom: 1px solid var(--ant-color-border-secondary);
+
+    .anticon {
+      margin-bottom: 4px;
+      color: gray;
+    }
+  }
+
+  .component.active,
+  .component:hover {
+    color: var(--ant-color-white);
+    background: var(--ant-color-primary);
+
+    .anticon {
+      color: var(--ant-color-white);
+    }
+  }
+
+  .component:nth-of-type(3n) {
+    border-right: none;
+  }
+}
+
+/* 拖拽占位提示，默认不显示 */
+.drag-placement {
+  display: none;
+  color: #fff;
+}
+
+.drag-area {
+  /* 拖拽到手机区域时的样式 */
+  .draggable-ghost {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 40px;
+
+    /* 条纹背景 */
+    background: linear-gradient(
+      45deg,
+      #91a8d5 0,
+      #91a8d5 10%,
+      #94b4eb 10%,
+      #94b4eb 50%,
+      #91a8d5 50%,
+      #91a8d5 60%,
+      #94b4eb 60%,
+      #94b4eb
+    );
+    background-size: 1rem 1rem;
+    transition: all 0.5s;
+
+    span {
+      display: inline-block;
+      width: 140px;
+      height: 25px;
+      font-size: 12px;
+      line-height: 25px;
+      color: #fff;
+      text-align: center;
+      background: #5487df;
+    }
+
+    /* 拖拽时隐藏组件 */
+    .component {
+      display: none;
+    }
+
+    /* 拖拽时显示占位提示 */
+    .drag-placement {
+      display: block;
+    }
+  }
+}
+</style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Carousel/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Carousel/config.ts
new file mode 100644
index 000000000..514f45e89
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Carousel/config.ts
@@ -0,0 +1,61 @@
+import type {
+  ComponentStyle,
+  DiyComponent,
+} from '../../../util';
+
+/** 轮播图属性 */
+export interface CarouselProperty {
+  // 类型：默认 | 卡片
+  type: 'card' | 'default';
+  // 指示器样式：点 | 数字
+  indicator: 'dot' | 'number';
+  // 是否自动播放
+  autoplay: boolean;
+  // 播放间隔
+  interval: number;
+  // 轮播内容
+  items: CarouselItemProperty[];
+  // 组件样式
+  style: ComponentStyle;
+}
+// 轮播内容属性
+export interface CarouselItemProperty {
+  // 类型：图片 | 视频
+  type: 'img' | 'video';
+  // 图片链接
+  imgUrl: string;
+  // 视频链接
+  videoUrl: string;
+  // 跳转链接
+  url: string;
+}
+
+// 定义组件
+export const component = {
+  id: 'Carousel',
+  name: '轮播图',
+  icon: 'system-uicons:carousel',
+  property: {
+    type: 'default',
+    indicator: 'dot',
+    autoplay: false,
+    interval: 3,
+    items: [
+      {
+        type: 'img',
+        imgUrl: 'https://static.iocoder.cn/mall/banner-01.jpg',
+        videoUrl: '',
+      },
+      {
+        type: 'img',
+        imgUrl: 'https://static.iocoder.cn/mall/banner-02.jpg',
+        videoUrl: '',
+      },
+    ] as CarouselItemProperty[],
+    style: {
+      bgType: 'color',
+      bgColor: '#fff',
+      marginBottom: 8,
+    } as ComponentStyle,
+  },
+} as DiyComponent<CarouselProperty>;
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Carousel/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Carousel/index.vue
new file mode 100644
index 000000000..b79872625
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Carousel/index.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import type { CarouselProperty } from './config';
+
+import { ref } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+
+/** 轮播图 */
+defineOptions({ name: 'Carousel' });
+
+defineProps<{ property: CarouselProperty }>();
+
+const currentIndex = ref(0);
+const handleIndexChange = (index: number) => {
+  currentIndex.value = index + 1;
+};
+</script>
+<template>
+  <!-- 无图片 -->
+  <div
+    class="flex h-[250px] items-center justify-center bg-gray-300"
+    v-if="property.items.length === 0"
+  >
+    <IconifyIcon icon="tdesign:image" class="text-[120px] text-gray-800" />
+  </div>
+  <div v-else class="relative">
+    <Carousel
+      :autoplay="property.autoplay"
+      :autoplaySpeed="property.interval * 1000"
+      :dots="property.indicator !== 'number'"
+      @change="handleIndexChange"
+      class="h-[174px]"
+    >
+      <div v-for="(item, index) in property.items" :key="index">
+        <Image class="h-full w-full object-cover" :src="item.imgUrl" :preview="false" />
+      </div>
+    </Carousel>
+    <div
+      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>
+
+<style scoped lang="scss"></style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Carousel/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Carousel/property.vue
new file mode 100644
index 000000000..6437898bd
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Carousel/property.vue
@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import type { CarouselProperty } from './config';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { useVModel } from '@vueuse/core';
+
+import ComponentContainerProperty from '../../component-container-property.vue';
+import UploadFile from '#/components/upload/file-upload.vue';
+import UploadImg from '#/components/upload/image-upload.vue';
+import { AppLinkInput, Draggable } from '#/views/mall/promotion/components';
+
+// 轮播图属性面板
+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">
+    <ElForm label-width="80px" :model="formData">
+      <ElCard header="样式设置" class="property-group" shadow="never">
+        <ElFormItem label="样式" prop="type">
+          <ElRadioGroup v-model="formData.type">
+            <ElTooltip class="item" content="默认" placement="bottom">
+              <ElRadioButton value="default">
+                <IconifyIcon icon="system-uicons:carousel" />
+              </ElRadioButton>
+            </ElTooltip>
+            <ElTooltip class="item" content="卡片" placement="bottom">
+              <ElRadioButton value="card">
+                <IconifyIcon icon="ic:round-view-carousel" />
+              </ElRadioButton>
+            </ElTooltip>
+          </ElRadioGroup>
+        </ElFormItem>
+        <ElFormItem label="指示器" prop="indicator">
+          <ElRadioGroup v-model="formData.indicator">
+            <ElRadio value="dot">小圆点</ElRadio>
+            <ElRadio value="number">数字</ElRadio>
+          </ElRadioGroup>
+        </ElFormItem>
+        <ElFormItem label="是否轮播" prop="autoplay">
+          <ElSwitch v-model="formData.autoplay" />
+        </ElFormItem>
+        <ElFormItem label="播放间隔" prop="interval" v-if="formData.autoplay">
+          <ElSlider
+            v-model="formData.interval"
+            :max="10"
+            :min="0.5"
+            :step="0.5"
+            show-input
+            input-size="small"
+            :show-input-controls="false"
+          />
+          <ElText type="info">单位：秒</ElText>
+        </ElFormItem>
+      </ElCard>
+      <ElCard header="内容设置" class="property-group" shadow="never">
+        <Draggable v-model="formData.items" :empty-item="{ type: 'img' }">
+          <template #default="{ element }">
+            <ElFormItem
+              label="类型"
+              prop="type"
+              class="mb-2"
+              label-width="40px"
+            >
+              <ElRadioGroup v-model="element.type">
+                <ElRadio value="img">图片</ElRadio>
+                <ElRadio value="video">视频</ElRadio>
+              </ElRadioGroup>
+            </ElFormItem>
+            <ElFormItem
+              label="图片"
+              class="mb-2"
+              label-width="40px"
+              v-if="element.type === 'img'"
+            >
+              <UploadImg
+                v-model="element.imgUrl"
+                draggable="false"
+                height="80px"
+                width="100%"
+                class="min-w-[80px]"
+                :show-description="false"
+              />
+            </ElFormItem>
+            <template v-else>
+              <ElFormItem label="封面" class="mb-2" label-width="40px">
+                <UploadImg
+                  v-model="element.imgUrl"
+                  draggable="false"
+                  :show-description="false"
+                  height="80px"
+                  width="100%"
+                  class="min-w-[80px]"
+                />
+              </ElFormItem>
+              <ElFormItem label="视频" class="mb-2" label-width="40px">
+                <UploadFile
+                  v-model="element.videoUrl"
+                  :file-type="['mp4']"
+                  :limit="1"
+                  :file-size="100"
+                  class="min-w-[80px]"
+                />
+              </ElFormItem>
+            </template>
+            <ElFormItem label="链接" class="mb-2" label-width="40px">
+              <AppLinkInput v-model="element.url" />
+            </ElFormItem>
+          </template>
+        </Draggable>
+      </ElCard>
+    </ElForm>
+  </ComponentContainerProperty>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Divider/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Divider/config.ts
new file mode 100644
index 000000000..17e5a79bf
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Divider/config.ts
@@ -0,0 +1,29 @@
+import type { DiyComponent } from '../../../util';
+
+/** 分割线属性 */
+export interface DividerProperty {
+  // 高度
+  height: number;
+  // 线宽
+  lineWidth: number;
+  // 边距类型
+  paddingType: 'horizontal' | 'none';
+  // 颜色
+  lineColor: string;
+  // 类型
+  borderType: 'dashed' | 'dotted' | 'none' | 'solid';
+}
+
+// 定义组件
+export const component = {
+  id: 'Divider',
+  name: '分割线',
+  icon: 'tdesign:component-divider-vertical',
+  property: {
+    height: 30,
+    lineWidth: 1,
+    paddingType: 'none',
+    lineColor: '#dcdfe6',
+    borderType: 'solid',
+  },
+} as DiyComponent<DividerProperty>;
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Divider/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Divider/index.vue
new file mode 100644
index 000000000..1736db389
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Divider/index.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { DividerProperty } from './config';
+
+/** 页面顶部导航栏 */
+defineOptions({ name: 'Divider' });
+
+defineProps<{ property: DividerProperty }>();
+</script>
+
+<template>
+  <div
+    class="flex items-center"
+    :style="{
+      height: `${property.height}px`,
+    }"
+  >
+    <div
+      class="w-full"
+      :style="{
+        borderTopStyle: property.borderType,
+        borderTopColor: property.lineColor,
+        borderTopWidth: `${property.lineWidth}px`,
+        margin: property.paddingType === 'none' ? '0' : '0px 16px',
+      }"
+    ></div>
+  </div>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Divider/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Divider/property.vue
new file mode 100644
index 000000000..d683e0b5c
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Divider/property.vue
@@ -0,0 +1,6 @@
+<script setup lang="ts">
+import type { DividerProperty } from './config';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { useVModel } from '@vueuse/core';
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Popover/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Popover/config.ts
new file mode 100644
index 000000000..6f365b735
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Popover/config.ts
@@ -0,0 +1,26 @@
+import type { DiyComponent } from '../../../util';
+
+/** 弹窗广告属性 */
+export interface PopoverProperty {
+  list: PopoverItemProperty[];
+}
+
+export interface PopoverItemProperty {
+  // 图片地址
+  imgUrl: string;
+  // 跳转连接
+  url: string;
+  // 显示类型：仅显示一次、每次启动都会显示
+  showType: 'always' | 'once';
+}
+
+// 定义组件
+export const component = {
+  id: 'Popover',
+  name: '弹窗广告',
+  icon: 'carbon:popup',
+  position: 'fixed',
+  property: {
+    list: [{ showType: 'once' }],
+  },
+} as DiyComponent<PopoverProperty>;
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Popover/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Popover/index.vue
new file mode 100644
index 000000000..3f9610825
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Popover/index.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import type { PopoverProperty } from './config';
+
+import { ref } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+
+/** 弹窗广告 */
+defineOptions({ name: 'Popover' });
+// 定义属性
+defineProps<{ property: PopoverProperty }>();
+
+// 处理选中
+const activeIndex = ref(0);
+const handleActive = (index: number) => {
+  activeIndex.value = index;
+};
+</script>
+<template>
+  <div
+    v-for="(item, index) in 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="{
+      zIndex: 100 + index + (activeIndex === index ? 100 : 0),
+      marginRight: `${-146 - index * 20}px`,
+      marginBottom: `${-227 - index * 20}px`,
+    }"
+    @click="handleActive(index)"
+  >
+    <Image :src="item.imgUrl" fit="contain" class="h-full w-full">
+      <template #error>
+        <div class="flex h-full w-full items-center justify-center">
+          <IconifyIcon icon="ep:picture" />
+        </div>
+      </template>
+    </Image>
+    <div class="absolute right-1 top-1 text-xs">{{ index + 1 }}</div>
+  </div>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Popover/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Popover/property.vue
new file mode 100644
index 000000000..de599eb63
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Popover/property.vue
@@ -0,0 +1,4 @@
+<script setup lang="ts">
+import type { PopoverProperty } from './config';
+
+import { useVModel } from '@vueuse/core';
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/component.tsx b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/component.tsx
new file mode 100644
index 000000000..d4dbfee44
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/component.tsx
@@ -0,0 +1,4 @@
+// 导出所有优惠券相关组件
+export { CouponDiscount } from './coupon-discount';
+export { CouponDiscountDesc } from './coupon-discount-desc';
+export { CouponValidTerm } from './coupon-validTerm';
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/config.ts
new file mode 100644
index 000000000..89cc71703
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/config.ts
@@ -0,0 +1,50 @@
+import type {
+  ComponentStyle,
+  DiyComponent,
+} from '../../../util';
+
+/** 商品卡片属性 */
+export interface CouponCardProperty {
+  // 列数
+  columns: number;
+  // 背景图
+  bgImg: string;
+  // 文字颜色
+  textColor: string;
+  // 按钮样式
+  button: {
+    // 背景颜色
+    bgColor: string;
+    // 颜色
+    color: string;
+  };
+  // 间距
+  space: number;
+  // 优惠券编号列表
+  couponIds: number[];
+  // 组件样式
+  style: ComponentStyle;
+}
+
+// 定义组件
+export const component = {
+  id: 'CouponCard',
+  name: '优惠券',
+  icon: 'ep:ticket',
+  property: {
+    columns: 1,
+    bgImg: '',
+    textColor: '#E9B461',
+    button: {
+      color: '#434343',
+      bgColor: '',
+    },
+    space: 0,
+    couponIds: [],
+    style: {
+      bgType: 'color',
+      bgColor: '',
+      marginBottom: 8,
+    } as ComponentStyle,
+  },
+} as DiyComponent<CouponCardProperty>;
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/coupon-discount-desc.tsx b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/coupon-discount-desc.tsx
new file mode 100644
index 000000000..a79e1f0cb
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/coupon-discount-desc.tsx
@@ -0,0 +1,34 @@
+import type { MallCouponTemplateApi } from '#/api/mall/promotion/coupon/couponTemplate';
+
+import { defineComponent } from 'vue';
+
+import { PromotionDiscountTypeEnum } from '@vben/constants';
+import { floatToFixed2 } from '@vben/utils';
+
+// 优惠描述
+export const CouponDiscountDesc = defineComponent({
+  name: 'CouponDiscountDesc',
+  props: {
+    coupon: {
+      type: Object as () => MallCouponTemplateApi.CouponTemplate,
+      required: true,
+    },
+  },
+  setup(props) {
+    const coupon = props.coupon as MallCouponTemplateApi.CouponTemplate;
+    // 使用条件
+    const useCondition =
+      coupon.usePrice > 0 ? `满${floatToFixed2(coupon.usePrice)}元，` : '';
+    // 优惠描述
+    const discountDesc =
+      coupon.discountType === PromotionDiscountTypeEnum.PRICE.type
+        ? `减${floatToFixed2(coupon.discountPrice)}元`
+        : `打${coupon.discountPercent / 10}折`;
+    return () => (
+      <div>
+        <span>{useCondition}</span>
+        <span>{discountDesc}</span>
+      </div>
+    );
+  },
+});
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/coupon-discount.tsx b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/coupon-discount.tsx
new file mode 100644
index 000000000..9f0c7f5b4
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/coupon-discount.tsx
@@ -0,0 +1,34 @@
+import type { MallCouponTemplateApi } from '#/api/mall/promotion/coupon/couponTemplate';
+
+import { defineComponent } from 'vue';
+
+import { PromotionDiscountTypeEnum } from '@vben/constants';
+import { floatToFixed2 } from '@vben/utils';
+
+// 优惠值
+export const CouponDiscount = defineComponent({
+  name: 'CouponDiscount',
+  props: {
+    coupon: {
+      type: Object as () => MallCouponTemplateApi.CouponTemplate,
+      required: true,
+    },
+  },
+  setup(props) {
+    const coupon = props.coupon as MallCouponTemplateApi.CouponTemplate;
+    // 折扣
+    let value = `${coupon.discountPercent / 10}`;
+    let suffix = ' 折';
+    // 满减
+    if (coupon.discountType === PromotionDiscountTypeEnum.PRICE.type) {
+      value = floatToFixed2(coupon.discountPrice);
+      suffix = ' 元';
+    }
+    return () => (
+      <div>
+        <span class={'text-20px font-bold'}>{value}</span>
+        <span>{suffix}</span>
+      </div>
+    );
+  },
+});
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/coupon-validTerm.tsx b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/coupon-validTerm.tsx
new file mode 100644
index 000000000..7b2e373b2
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/coupon-validTerm.tsx
@@ -0,0 +1,28 @@
+import type { MallCouponTemplateApi } from '#/api/mall/promotion/coupon/couponTemplate';
+
+import { defineComponent } from 'vue';
+
+import { CouponTemplateValidityTypeEnum } from '@vben/constants';
+import { formatDate } from '@vben/utils';
+
+// 有效期
+export const CouponValidTerm = defineComponent({
+  name: 'CouponValidTerm',
+  props: {
+    coupon: {
+      type: Object as () => MallCouponTemplateApi.CouponTemplate,
+      required: true,
+    },
+  },
+  setup(props) {
+    const coupon = props.coupon as MallCouponTemplateApi.CouponTemplate;
+    const text =
+      coupon.validityType === CouponTemplateValidityTypeEnum.DATE.type
+        ? `有效期：${formatDate(coupon.validStartTime, 'YYYY-MM-DD')} 至 ${formatDate(
+            coupon.validEndTime,
+            'YYYY-MM-DD',
+          )}`
+        : `领取后第 ${coupon.fixedStartTerm} - ${coupon.fixedEndTerm} 天内可用`;
+    return () => <div>{text}</div>;
+  },
+});
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/index.vue
new file mode 100644
index 000000000..2c134c946
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/index.vue
@@ -0,0 +1,161 @@
+<script setup lang="ts">
+import type { CouponCardProperty } from './config';
+
+import type { MallCouponTemplateApi } from '#/api/mall/promotion/coupon/couponTemplate';
+
+import { onMounted, ref, watch } from 'vue';
+
+
+import * as CouponTemplateApi from '#/api/mall/promotion/coupon/couponTemplate';
+
+import {
+  CouponDiscount,
+  CouponDiscountDesc,
+  CouponValidTerm,
+} from './component';
+
+/** 商品卡片 */
+defineOptions({ name: 'CouponCard' });
+// 定义属性
+const props = defineProps<{ property: CouponCardProperty }>();
+// 商品列表
+const couponList = ref<MallCouponTemplateApi.CouponTemplate[]>([]);
+watch(
+  () => props.property.couponIds,
+  async () => {
+    if (props.property.couponIds?.length > 0) {
+      couponList.value = await CouponTemplateApi.getCouponTemplateList(
+        props.property.couponIds,
+      );
+    }
+  },
+  {
+    immediate: true,
+    deep: true,
+  },
+);
+
+// 手机宽度
+const phoneWidth = ref(375);
+// 容器
+const containerRef = ref();
+// 滚动条宽度
+const scrollbarWidth = ref('100%');
+// 优惠券的宽度
+const couponWidth = ref(375);
+// 计算布局参数
+watch(
+  () => [props.property, phoneWidth, couponList.value.length],
+  () => {
+    // 每列的宽度为：（总宽度 - 间距 * (列数 - 1)）/ 列数
+    couponWidth.value =
+      (phoneWidth.value - props.property.space * (props.property.columns - 1)) /
+      props.property.columns;
+    // 显示滚动条
+    scrollbarWidth.value = `${
+      couponWidth.value * couponList.value.length +
+      props.property.space * (couponList.value.length - 1)
+    }px`;
+  },
+  { immediate: true, deep: true },
+);
+onMounted(() => {
+  // 提取手机宽度
+  phoneWidth.value = containerRef.value?.wrapRef?.offsetWidth || 375;
+});
+</script>
+<template>
+  <div class="z-10 min-h-[30px]" wrap-class="w-full" ref="containerRef">
+    <div
+      class="flex flex-row text-xs"
+      :style="{
+        gap: `${property.space}px`,
+        width: scrollbarWidth,
+      }"
+    >
+      <div
+        class="box-content"
+        :style="{
+          background: property.bgImg
+            ? `url(${property.bgImg}) 100% center / 100% 100% no-repeat`
+            : '#fff',
+          width: `${couponWidth}px`,
+          color: property.textColor,
+        }"
+        v-for="(coupon, index) in couponList"
+        :key="index"
+      >
+        <!-- 布局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">
+            <div
+              class="rounded-full px-2 py-0.5"
+              :style="{
+                color: property.button.color,
+                background: property.button.bgColor,
+              }"
+            >
+              立即领取
+            </div>
+          </div>
+        </div>
+        <!-- 布局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>
+            <div v-else-if="coupon.totalCount === -1">仅剩：不限制</div>
+          </div>
+          <div class="flex flex-col">
+            <div
+              class="h-full w-5 rounded-full px-0.5 py-2 text-center"
+              :style="{
+                color: property.button.color,
+                background: property.button.bgColor,
+              }"
+            >
+              立即领取
+            </div>
+          </div>
+        </div>
+        <!-- 布局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"
+            :style="{
+              color: property.button.color,
+              background: property.button.bgColor,
+            }"
+          >
+            立即领取
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<style scoped lang="scss"></style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/property.vue
new file mode 100644
index 000000000..19f2f7bc2
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/property.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import type { CouponCardProperty } from './config';
+
+import type { MallCouponTemplateApi } from '#/api/mall/promotion/coupon/couponTemplate';
+
+import { ref, watch } from 'vue';
+
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/floating-action-button/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/floating-action-button/config.ts
new file mode 100644
index 000000000..22b98581c
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/floating-action-button/config.ts
@@ -0,0 +1,36 @@
+import type { DiyComponent } from '../../../util';
+
+// 悬浮按钮属性
+export interface FloatingActionButtonProperty {
+  // 展开方向
+  direction: 'horizontal' | 'vertical';
+  // 是否显示文字
+  showText: boolean;
+  // 按钮列表
+  list: FloatingActionButtonItemProperty[];
+}
+
+// 悬浮按钮项属性
+export interface FloatingActionButtonItemProperty {
+  // 图片地址
+  imgUrl: string;
+  // 跳转连接
+  url: string;
+  // 文字
+  text: string;
+  // 文字颜色
+  textColor: string;
+}
+
+// 定义组件
+export const component = {
+  id: 'FloatingActionButton',
+  name: '悬浮按钮',
+  icon: 'tabler:float-right',
+  position: 'fixed',
+  property: {
+    direction: 'vertical',
+    showText: true,
+    list: [{ textColor: '#fff' }],
+  },
+} as DiyComponent<FloatingActionButtonProperty>;
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/floating-action-button/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/floating-action-button/index.vue
new file mode 100644
index 000000000..0612a37d2
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/floating-action-button/index.vue
@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import type { FloatingActionButtonProperty } from './config';
+
+import { ref } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { message } from 'ant-design-vue';
+
+/** 悬浮按钮 */
+defineOptions({ name: 'FloatingActionButton' });
+// 定义属性
+defineProps<{ property: FloatingActionButtonProperty }>();
+
+// 是否展开
+const expanded = ref(false);
+// 处理展开/折叠
+const handleToggleFab = () => {
+  expanded.value = !expanded.value;
+};
+
+const handleActive = (index: number) => {
+  message.success(`点击了${index}`);
+};
+</script>
+<template>
+  <div
+    class="absolute bottom-8 right-[calc(50%-375px/2+32px)] z-20 flex items-center gap-3"
+    :class="[
+      {
+        'flex-row': property.direction === 'horizontal',
+        'flex-col': property.direction === 'vertical',
+      },
+    ]"
+  >
+    <template v-if="expanded">
+      <div
+        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">
+          <template #error>
+            <div class="flex h-full w-full items-center justify-center">
+              <IconifyIcon icon="ep:picture" :color="item.textColor" />
+            </div>
+          </template>
+        </Image>
+        <span
+          v-if="property.showText"
+          class="mt-1 text-xs"
+          :style="{ color: item.textColor }"
+        >
+          {{ item.text }}
+        </span>
+      </div>
+    </template>
+    <!-- todo: @owen 使用APP主题色 -->
+    <el-button type="primary" size="large" circle @click="handleToggleFab">
+      <IconifyIcon
+        icon="ep:plus"
+        class="fab-icon"
+        :class="[{ active: expanded }]"
+      />
+    </el-button>
+  </div>
+  <!-- 模态背景：展开时显示，点击后折叠 -->
+  <div v-if="expanded" class="modal-bg" @click="handleToggleFab"></div>
+</template>
+
+<style scoped lang="scss">
+/* 模态背景 */
+.modal-bg {
+  position: absolute;
+  top: 0;
+  left: calc(50% - 375px / 2);
+  z-index: 11;
+  width: 375px;
+  height: 100%;
+  background-color: rgb(0 0 0 / 40%);
+}
+
+.fab-icon {
+  transform: rotate(0deg);
+  transition: transform 0.3s;
+
+  &.active {
+    transform: rotate(135deg);
+  }
+}
+</style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/floating-action-button/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/floating-action-button/property.vue
new file mode 100644
index 000000000..bf3c071d8
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/floating-action-button/property.vue
@@ -0,0 +1,4 @@
+<script setup lang="ts">
+import type { FloatingActionButtonProperty } from './config';
+
+import { useVModel } from '@vueuse/core';
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/components/hot-zone-edit-dialog/controller.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/components/hot-zone-edit-dialog/controller.ts
new file mode 100644
index 000000000..2bac4c39e
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/components/hot-zone-edit-dialog/controller.ts
@@ -0,0 +1,175 @@
+import type { StyleValue } from 'vue';
+
+import type { HotZoneItemProperty } from '../../config';
+
+// 热区的最小宽高
+export const HOT_ZONE_MIN_SIZE = 100;
+
+// 控制的类型
+export enum CONTROL_TYPE_ENUM {
+  LEFT,
+  TOP,
+  WIDTH,
+  HEIGHT,
+}
+
+// 定义热区的控制点
+export interface ControlDot {
+  position: string;
+  types: CONTROL_TYPE_ENUM[];
+  style: StyleValue;
+}
+
+// 热区的8个控制点
+export const CONTROL_DOT_LIST = [
+  {
+    position: '左上角',
+    types: [
+      CONTROL_TYPE_ENUM.LEFT,
+      CONTROL_TYPE_ENUM.TOP,
+      CONTROL_TYPE_ENUM.WIDTH,
+      CONTROL_TYPE_ENUM.HEIGHT,
+    ],
+    style: { left: '-5px', top: '-5px', cursor: 'nwse-resize' },
+  },
+  {
+    position: '上方中间',
+    types: [CONTROL_TYPE_ENUM.TOP, CONTROL_TYPE_ENUM.HEIGHT],
+    style: {
+      left: '50%',
+      top: '-5px',
+      cursor: 'n-resize',
+      transform: 'translateX(-50%)',
+    },
+  },
+  {
+    position: '右上角',
+    types: [
+      CONTROL_TYPE_ENUM.TOP,
+      CONTROL_TYPE_ENUM.WIDTH,
+      CONTROL_TYPE_ENUM.HEIGHT,
+    ],
+    style: { right: '-5px', top: '-5px', cursor: 'nesw-resize' },
+  },
+  {
+    position: '右侧中间',
+    types: [CONTROL_TYPE_ENUM.WIDTH],
+    style: {
+      right: '-5px',
+      top: '50%',
+      cursor: 'e-resize',
+      transform: 'translateX(-50%)',
+    },
+  },
+  {
+    position: '右下角',
+    types: [CONTROL_TYPE_ENUM.WIDTH, CONTROL_TYPE_ENUM.HEIGHT],
+    style: { right: '-5px', bottom: '-5px', cursor: 'nwse-resize' },
+  },
+  {
+    position: '下方中间',
+    types: [CONTROL_TYPE_ENUM.HEIGHT],
+    style: {
+      left: '50%',
+      bottom: '-5px',
+      cursor: 's-resize',
+      transform: 'translateX(-50%)',
+    },
+  },
+  {
+    position: '左下角',
+    types: [
+      CONTROL_TYPE_ENUM.LEFT,
+      CONTROL_TYPE_ENUM.WIDTH,
+      CONTROL_TYPE_ENUM.HEIGHT,
+    ],
+    style: { left: '-5px', bottom: '-5px', cursor: 'nesw-resize' },
+  },
+  {
+    position: '左侧中间',
+    types: [CONTROL_TYPE_ENUM.LEFT, CONTROL_TYPE_ENUM.WIDTH],
+    style: {
+      left: '-5px',
+      top: '50%',
+      cursor: 'w-resize',
+      transform: 'translateX(-50%)',
+    },
+  },
+] as ControlDot[];
+
+// region 热区的缩放
+// 热区的缩放比例
+export const HOT_ZONE_SCALE_RATE = 2;
+// 缩小：缩回适合手机屏幕的大小
+export const zoomOut = (list?: HotZoneItemProperty[]) => {
+  return (
+    list?.map((hotZone) => ({
+      ...hotZone,
+      left: (hotZone.left /= HOT_ZONE_SCALE_RATE),
+      top: (hotZone.top /= HOT_ZONE_SCALE_RATE),
+      width: (hotZone.width /= HOT_ZONE_SCALE_RATE),
+      height: (hotZone.height /= HOT_ZONE_SCALE_RATE),
+    })) || []
+  );
+};
+// 放大：作用是为了方便在电脑屏幕上编辑
+export const zoomIn = (list?: HotZoneItemProperty[]) => {
+  return (
+    list?.map((hotZone) => ({
+      ...hotZone,
+      left: (hotZone.left *= HOT_ZONE_SCALE_RATE),
+      top: (hotZone.top *= HOT_ZONE_SCALE_RATE),
+      width: (hotZone.width *= HOT_ZONE_SCALE_RATE),
+      height: (hotZone.height *= HOT_ZONE_SCALE_RATE),
+    })) || []
+  );
+};
+// endregion
+
+/**
+ * 封装热区拖拽
+ *
+ * 注：为什么不使用vueuse的useDraggable。在本场景下，其使用方式比较复杂
+ * @param hotZone 热区
+ * @param downEvent 鼠标按下事件
+ * @param callback 回调函数
+ */
+export const useDraggable = (
+  hotZone: HotZoneItemProperty,
+  downEvent: MouseEvent,
+  callback: (
+    left: number,
+    top: number,
+    width: number,
+    height: number,
+    moveWidth: number,
+    moveHeight: number,
+  ) => void,
+) => {
+  // 阻止事件冒泡
+  downEvent.stopPropagation();
+
+  // 移动前的鼠标坐标
+  const { clientX: startX, clientY: startY } = downEvent;
+  // 移动前的热区坐标、大小
+  const { left, top, width, height } = hotZone;
+
+  // 监听鼠标移动
+  const handleMouseMove = (e: MouseEvent) => {
+    // 移动宽度
+    const moveWidth = e.clientX - startX;
+    // 移动高度
+    const moveHeight = e.clientY - startY;
+    // 移动回调
+    callback(left, top, width, height, moveWidth, moveHeight);
+  };
+
+  // 松开鼠标后，结束拖拽
+  const handleMouseUp = () => {
+    document.removeEventListener('mousemove', handleMouseMove);
+    document.removeEventListener('mouseup', handleMouseUp);
+  };
+
+  document.addEventListener('mousemove', handleMouseMove);
+  document.addEventListener('mouseup', handleMouseUp);
+};
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/components/hot-zone-edit-dialog/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/components/hot-zone-edit-dialog/index.vue
new file mode 100644
index 000000000..4aa2a2903
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/components/hot-zone-edit-dialog/index.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import type { ControlDot } from './controller';
+
+import type { HotZoneItemProperty } from '../../config';
+import type { AppLink } from '#/views/mall/promotion/components/app-link-input/data';
+
+import { ref } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/config.ts
new file mode 100644
index 000000000..fdb06b983
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/config.ts
@@ -0,0 +1,46 @@
+import type {
+  ComponentStyle,
+  DiyComponent,
+} from '../../../util';
+
+/** 热区属性 */
+export interface HotZoneProperty {
+  // 图片地址
+  imgUrl: string;
+  // 导航菜单列表
+  list: HotZoneItemProperty[];
+  // 组件样式
+  style: ComponentStyle;
+}
+
+/** 热区项目属性 */
+export interface HotZoneItemProperty {
+  // 链接的名称
+  name: string;
+  // 链接
+  url: string;
+  // 宽
+  width: number;
+  // 高
+  height: number;
+  // 上
+  top: number;
+  // 左
+  left: number;
+}
+
+// 定义组件
+export const component = {
+  id: 'HotZone',
+  name: '热区',
+  icon: 'tabler:hand-click',
+  property: {
+    imgUrl: '',
+    list: [] as HotZoneItemProperty[],
+    style: {
+      bgType: 'color',
+      bgColor: '#fff',
+      marginBottom: 8,
+    } as ComponentStyle,
+  },
+} as DiyComponent<HotZoneProperty>;
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/index.vue
new file mode 100644
index 000000000..efbe5be06
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/index.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import type { HotZoneProperty } from './config';
+
+
+/** 热区 */
+defineOptions({ name: 'HotZone' });
+const props = defineProps<{ property: HotZoneProperty }>();
+</script>
+
+<template>
+  <div class="min-h-30px relative h-full w-full">
+    <Image
+      :src="props.property.imgUrl"
+      class="pointer-events-none h-full w-full select-none"
+    />
+    <div
+      v-for="(item, index) in props.property.list"
+      :key="index"
+      class="hot-zone"
+      :style="{
+        width: `${item.width}px`,
+        height: `${item.height}px`,
+        top: `${item.top}px`,
+        left: `${item.left}px`,
+      }"
+    >
+      {{ item.name }}
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.hot-zone {
+  position: absolute;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  color: var(--el-color-primary);
+  cursor: move;
+  background: var(--el-color-primary-light-7);
+  border: 1px solid var(--el-color-primary);
+  opacity: 0.8;
+}
+</style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/property.vue
new file mode 100644
index 000000000..b0b9596e4
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/property.vue
@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import type { HotZoneProperty } from './config';
+
+import { ref } from 'vue';
+
+import { useVModel } from '@vueuse/core';
+
+import ComponentContainerProperty from '../../component-container-property.vue';
+import UploadImg from '#/components/upload/image-upload.vue';
+
+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 = () => {
+  editDialogRef.value.open();
+};
+</script>
+
+<template>
+  <ComponentContainerProperty v-model="formData.style">
+    <!-- 表单 -->
+    <ElForm label-width="80px" :model="formData" class="mt-2">
+      <ElFormItem label="上传图片" prop="imgUrl">
+        <UploadImg
+          v-model="formData.imgUrl"
+          height="50px"
+          width="auto"
+          class="min-w-[80px]"
+          :show-description="false"
+        >
+          <template #tip>
+            <ElText type="info" size="small"> 推荐宽度 750</ElText>
+          </template>
+        </UploadImg>
+      </ElFormItem>
+    </ElForm>
+
+    <ElButton type="primary" plain class="w-full" @click="handleOpenEditDialog">
+      设置热区
+    </ElButton>
+  </ComponentContainerProperty>
+  <!-- 热区编辑对话框 -->
+  <HotZoneEditDialog
+    ref="editDialogRef"
+    v-model="formData.list"
+    :img-url="formData.imgUrl"
+  />
+</template>
+
+<style scoped lang="scss">
+.hot-zone {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  color: #fff;
+  cursor: move;
+  background: #409effbf;
+  border: 1px solid var(--el-color-primary);
+
+  /* 控制点 */
+  .ctrl-dot {
+    position: absolute;
+    width: 4px;
+    height: 4px;
+    background-color: #fff;
+    border-radius: 50%;
+  }
+}
+</style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/config.ts
new file mode 100644
index 000000000..1d2c4ac01
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/config.ts
@@ -0,0 +1,30 @@
+import type {
+  ComponentStyle,
+  DiyComponent,
+} from '../../../util';
+
+/** 图片展示属性 */
+export interface ImageBarProperty {
+  // 图片链接
+  imgUrl: string;
+  // 跳转链接
+  url: string;
+  // 组件样式
+  style: ComponentStyle;
+}
+
+// 定义组件
+export const component = {
+  id: 'ImageBar',
+  name: '图片展示',
+  icon: 'ep:picture',
+  property: {
+    imgUrl: '',
+    url: '',
+    style: {
+      bgType: 'color',
+      bgColor: '#fff',
+      marginBottom: 8,
+    } as ComponentStyle,
+  },
+} as DiyComponent<ImageBarProperty>;
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/index.vue
new file mode 100644
index 000000000..201831030
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/index.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { ImageBarProperty } from './config';
+
+import { IconifyIcon } from '@vben/icons';
+
+
+/** 图片展示 */
+defineOptions({ name: 'ImageBar' });
+
+defineProps<{ property: ImageBarProperty }>();
+</script>
+<template>
+  <!-- 无图片 -->
+  <div
+    class="flex h-12 items-center justify-center bg-gray-300"
+    v-if="!property.imgUrl"
+  >
+    <IconifyIcon icon="ep:picture" class="text-3xl text-gray-600" />
+  </div>
+  <Image class="min-h-8 w-full" v-else :src="property.imgUrl" :preview="false" />
+</template>
+
+<style scoped lang="scss">
+/* 图片 */
+img {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/property.vue
new file mode 100644
index 000000000..b32213318
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/property.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { ImageBarProperty } from './config';
+
+import { useVModel } from '@vueuse/core';
+
+import ComponentContainerProperty from '../../component-container-property.vue';
+import UploadImg from '#/components/upload/image-upload.vue';
+import { AppLinkInput } from '#/views/mall/promotion/components';
+
+// 图片展示属性面板
+defineOptions({ name: 'ImageBarProperty' });
+
+const props = defineProps<{ modelValue: ImageBarProperty }>();
+const emit = defineEmits(['update:modelValue']);
+const formData = useVModel(props, 'modelValue', emit);
+</script>
+
+<template>
+  <ComponentContainerProperty v-model="formData.style">
+    <ElForm label-width="80px" :model="formData">
+      <ElFormItem label="上传图片" prop="imgUrl">
+        <UploadImg
+          v-model="formData.imgUrl"
+          draggable="false"
+          height="80px"
+          width="100%"
+          class="min-w-[80px]"
+          :show-description="false"
+        >
+          <template #tip> 建议宽度750 </template>
+        </UploadImg>
+      </ElFormItem>
+      <ElFormItem label="链接" prop="url">
+        <AppLinkInput v-model="formData.url" />
+      </ElFormItem>
+    </ElForm>
+  </ComponentContainerProperty>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/index.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/index.ts
new file mode 100644
index 000000000..454e06a0b
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/index.ts
@@ -0,0 +1,69 @@
+import { defineAsyncComponent } from 'vue';
+
+/*
+ * 组件注册
+ *
+ * 组件规范：
+ * 1. 每个子目录就是一个独立的组件，每个目录包括以下三个文件：
+ * 2. config.ts：组件配置，必选，用于定义组件、组件默认的属性、定义属性的类型
+ * 3. index.vue：组件展示，用于展示组件的渲染效果。可以不提供，如 Page（页面设置），只需要属性配置表单即可
+ * 4. property.vue：组件属性表单，用于配置组件，必选，
+ *
+ * 注：
+ * 组件ID以config.ts中配置的id为准，与组件目录的名称无关，但还是建议组件目录的名称与组件ID保持一致
+ */
+
+// 导入组件界面模块
+const viewModules: Record<string, any> = import.meta.glob('./*/*.vue');
+// 导入配置模块
+const configModules: Record<string, any> = import.meta.glob('./*/config.ts', {
+  eager: true,
+});
+
+// 界面模块
+const components: Record<string, any> = {};
+// 组件配置模块
+const componentConfigs: Record<string, any> = {};
+
+// 组件界面的类型
+type ViewType = 'index' | 'property';
+
+/**
+ * 注册组件的界面模块
+ *
+ * @param componentId 组件ID
+ * @param configPath 配置模块的文件路径
+ * @param viewType 组件界面的类型
+ */
+const registerComponentViewModule = (
+  componentId: string,
+  configPath: string,
+  viewType: ViewType,
+) => {
+  const viewPath = configPath.replace('config.ts', `${viewType}.vue`);
+  const viewModule = viewModules[viewPath];
+  if (viewModule) {
+    // 定义异步组件
+    components[componentId] = defineAsyncComponent(viewModule);
+  }
+};
+
+// 注册
+Object.keys(configModules).forEach((modulePath: string) => {
+  const component = configModules[modulePath].component;
+  const componentId = component?.id;
+  if (componentId) {
+    // 注册组件
+    componentConfigs[componentId] = component;
+    // 注册预览界面
+    registerComponentViewModule(componentId, modulePath, 'index');
+    // 注册属性配置表单
+    registerComponentViewModule(
+      `${componentId}Property`,
+      modulePath,
+      'property',
+    );
+  }
+});
+
+export { componentConfigs, components };
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/config.ts
new file mode 100644
index 000000000..ff9cbb8f0
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/config.ts
@@ -0,0 +1,56 @@
+import type {
+  ComponentStyle,
+  DiyComponent,
+} from '../../../util';
+
+/** 广告魔方属性 */
+export interface MagicCubeProperty {
+  // 上圆角
+  borderRadiusTop: number;
+  // 下圆角
+  borderRadiusBottom: number;
+  // 间隔
+  space: number;
+  // 导航菜单列表
+  list: MagicCubeItemProperty[];
+  // 组件样式
+  style: ComponentStyle;
+}
+
+/** 广告魔方项目属性 */
+export interface MagicCubeItemProperty {
+  // 图标链接
+  imgUrl: string;
+  // 链接
+  url: string;
+  // 宽
+  width: number;
+  // 高
+  height: number;
+  // 上
+  top: number;
+  // 左
+  left: number;
+  // 右
+  right: number;
+  // 下
+  bottom: number;
+}
+
+// 定义组件
+export const component = {
+  id: 'MagicCube',
+  name: '广告魔方',
+  icon: 'bi:columns',
+  property: {
+    borderRadiusTop: 0,
+    borderRadiusBottom: 0,
+    space: 0,
+    list: [],
+    style: {
+      bgType: 'color',
+      bgColor: '#fff',
+      marginBottom: 8,
+    } as ComponentStyle,
+  },
+} as DiyComponent<MagicCubeProperty>;
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/index.vue
new file mode 100644
index 000000000..d2c6d6779
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/index.vue
@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import type { MagicCubeProperty } from './config';
+
+import { computed } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+
+/** 广告魔方 */
+defineOptions({ name: 'MagicCube' });
+const props = defineProps<{ property: MagicCubeProperty }>();
+// 一个方块的大小
+const CUBE_SIZE = 93.75;
+/**
+ * 计算方块的行数
+ * 行数用于计算魔方的总体高度，存在以下情况：
+ * 1. 没有数据时，默认就只显示一行的高度
+ * 2. 底部的空白不算高度，例如只有第一行有数据，那么就只显示一行的高度
+ * 3. 顶部及中间的空白算高度，例如一共有四行，只有最后一行有数据，那么也显示四行的高度
+ */
+const rowCount = computed(() => {
+  let count = 0;
+  if (props.property.list.length > 0) {
+    // 最大行号
+    count = Math.max(
+      ...props.property.list.map((item) => item.top + item.height),
+    );
+  }
+  // 保证至少有一行
+  return count === 0 ? 1 : count;
+});
+</script>
+
+<template>
+  <div
+    class="relative"
+    :style="{
+      height: `${rowCount * CUBE_SIZE}px`,
+      width: `${4 * CUBE_SIZE}px`,
+      padding: `${property.space}px`,
+    }"
+  >
+    <div
+      v-for="(item, index) in property.list"
+      :key="index"
+      class="absolute"
+      :style="{
+        width: `${item.width * CUBE_SIZE - property.space}px`,
+        height: `${item.height * CUBE_SIZE - property.space}px`,
+        top: `${item.top * CUBE_SIZE}px`,
+        left: `${item.left * CUBE_SIZE}px`,
+      }"
+    >
+      <Image
+        class="h-full w-full"
+        fit="cover"
+        :src="item.imgUrl"
+        :style="{
+          borderTopLeftRadius: `${property.borderRadiusTop}px`,
+          borderTopRightRadius: `${property.borderRadiusTop}px`,
+          borderBottomLeftRadius: `${property.borderRadiusBottom}px`,
+          borderBottomRightRadius: `${property.borderRadiusBottom}px`,
+        }"
+      >
+        <template #error>
+          <div class="image-slot">
+            <div
+              class="flex items-center justify-center"
+              :style="{
+                width: `${item.width * CUBE_SIZE}px`,
+                height: `${item.height * CUBE_SIZE}px`,
+              }"
+            >
+              <IconifyIcon icon="ep-picture" color="gray" :size="CUBE_SIZE" />
+            </div>
+          </div>
+        </template>
+      </Image>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/property.vue
new file mode 100644
index 000000000..ce5578a0c
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/property.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import type { MagicCubeProperty } from './config';
+
+import { ref } from 'vue';
+
+import { useVModel } from '@vueuse/core';
+
+import ComponentContainerProperty from '../../component-container-property.vue';
+import UploadImg from '#/components/upload/image-upload.vue';
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/config.ts
new file mode 100644
index 000000000..65bc9f4ca
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/config.ts
@@ -0,0 +1,83 @@
+import type {
+  ComponentStyle,
+  DiyComponent,
+} from '../../../util';
+
+import { cloneDeep } from '@vben/utils';
+
+/** 宫格导航属性 */
+export interface MenuGridProperty {
+  // 列数
+  column: number;
+  // 导航菜单列表
+  list: MenuGridItemProperty[];
+  // 组件样式
+  style: ComponentStyle;
+}
+
+/** 宫格导航项目属性 */
+export interface MenuGridItemProperty {
+  // 图标链接
+  iconUrl: string;
+  // 标题
+  title: string;
+  // 标题颜色
+  titleColor: string;
+  // 副标题
+  subtitle: string;
+  // 副标题颜色
+  subtitleColor: string;
+  // 链接
+  url: string;
+  // 角标
+  badge: {
+    // 角标背景颜色
+    bgColor: string;
+    // 是否显示
+    show: boolean;
+    // 角标文字
+    text: string;
+    // 角标文字颜色
+    textColor: string;
+  };
+}
+
+export const EMPTY_MENU_GRID_ITEM_PROPERTY = {
+  title: '标题',
+  titleColor: '#333',
+  subtitle: '副标题',
+  subtitleColor: '#bbb',
+  badge: {
+    show: false,
+    textColor: '#fff',
+    bgColor: '#FF6000',
+  },
+} as MenuGridItemProperty;
+
+// 定义组件
+export const component = {
+  id: 'MenuGrid',
+  name: '宫格导航',
+  icon: 'bi:grid-3x3-gap',
+  property: {
+    column: 3,
+    list: [cloneDeep(EMPTY_MENU_GRID_ITEM_PROPERTY)],
+    style: {
+      bgType: 'color',
+      bgColor: '#fff',
+      marginBottom: 8,
+      marginLeft: 8,
+      marginRight: 8,
+      padding: 8,
+      paddingTop: 8,
+      paddingRight: 8,
+      paddingBottom: 8,
+      paddingLeft: 8,
+      borderRadius: 8,
+      borderTopLeftRadius: 8,
+      borderTopRightRadius: 8,
+      borderBottomRightRadius: 8,
+      borderBottomLeftRadius: 8,
+    } as ComponentStyle,
+  },
+} as DiyComponent<MenuGridProperty>;
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/index.vue
new file mode 100644
index 000000000..e82c04ca6
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/index.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import type { MenuGridProperty } from './config';
+
+
+/** 宫格导航 */
+defineOptions({ name: 'MenuGrid' });
+defineProps<{ property: MenuGridProperty }>();
+</script>
+
+<template>
+  <div class="flex flex-row flex-wrap">
+    <div
+      v-for="(item, index) in property.list"
+      :key="index"
+      class="relative flex flex-col items-center pb-3.5 pt-5"
+      :style="{ width: `${100 * (1 / property.column)}%` }"
+    >
+      <!-- 右上角角标 -->
+      <span
+        v-if="item.badge?.show"
+        class="absolute left-1/2 top-2.5 z-10 h-5 rounded-full px-1.5 text-center text-xs leading-5"
+        :style="{
+          color: item.badge.textColor,
+          backgroundColor: item.badge.bgColor,
+        }"
+      >
+        {{ item.badge.text }}
+      </span>
+      <Image v-if="item.iconUrl" class="h-7 w-7" :src="item.iconUrl" :preview="false" />
+      <span
+        class="mt-2 h-4 text-xs leading-4"
+        :style="{ color: item.titleColor }"
+      >
+        {{ item.title }}
+      </span>
+      <span
+        class="mt-1.5 h-3 text-xs leading-3"
+        :style="{ color: item.subtitleColor }"
+      >
+        {{ item.subtitle }}
+      </span>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/property.vue
new file mode 100644
index 000000000..45a92daec
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/property.vue
@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import type { MenuGridProperty } from './config';
+
+import { useVModel } from '@vueuse/core';
+import {
+  ElCard,
+  ElForm,
+  ElFormItem,
+  ElRadio,
+  ElRadioGroup,
+  ElSwitch,
+
+import ComponentContainerProperty from '../../component-container-property.vue';
+import UploadImg from '#/components/upload/image-upload.vue';
+import { AppLinkInput, Draggable } from '#/views/mall/promotion/components';
+
+import { EMPTY_MENU_GRID_ITEM_PROPERTY } from './config';
+
+/** 宫格导航属性面板 */
+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">
+    <!-- 表单 -->
+    <ElForm label-width="80px" :model="formData" class="mt-2">
+      <ElFormItem label="每行数量" prop="column">
+        <ElRadioGroup v-model="formData.column">
+          <ElRadio :value="3">3个</ElRadio>
+          <ElRadio :value="4">4个</ElRadio>
+        </ElRadioGroup>
+      </ElFormItem>
+
+      <ElCard header="菜单设置" class="property-group" shadow="never">
+        <Draggable
+          v-model="formData.list"
+          :empty-item="EMPTY_MENU_GRID_ITEM_PROPERTY"
+        >
+          <template #default="{ element }">
+            <ElFormItem label="图标" prop="iconUrl">
+              <UploadImg
+                v-model="element.iconUrl"
+                height="80px"
+                width="80px"
+                :show-description="false"
+              >
+                <template #tip> 建议尺寸：44 * 44 </template>
+              </UploadImg>
+            </ElFormItem>
+            <ElFormItem label="标题" prop="title">
+              <InputWithColor
+                v-model="element.title"
+                v-model:color="element.titleColor"
+              />
+            </ElFormItem>
+            <ElFormItem label="副标题" prop="subtitle">
+              <InputWithColor
+                v-model="element.subtitle"
+                v-model:color="element.subtitleColor"
+              />
+            </ElFormItem>
+            <ElFormItem label="链接" prop="url">
+              <AppLinkInput v-model="element.url" />
+            </ElFormItem>
+            <ElFormItem label="显示角标" prop="badge.show">
+              <ElSwitch v-model="element.badge.show" />
+            </ElFormItem>
+            <template v-if="element.badge.show">
+              <ElFormItem label="角标内容" prop="badge.text">
+                <InputWithColor
+                  v-model="element.badge.text"
+                  v-model:color="element.badge.textColor"
+                />
+              </ElFormItem>
+              <ElFormItem label="背景颜色" prop="badge.bgColor">
+                <ColorInput v-model="element.badge.bgColor" />
+              </ElFormItem>
+            </template>
+          </template>
+        </Draggable>
+      </ElCard>
+    </ElForm>
+  </ComponentContainerProperty>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-list/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-list/config.ts
new file mode 100644
index 000000000..389982595
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-list/config.ts
@@ -0,0 +1,52 @@
+import type {
+  ComponentStyle,
+  DiyComponent,
+} from '../../../util';
+
+import { cloneDeep } from '@vben/utils';
+
+/** 列表导航属性 */
+export interface MenuListProperty {
+  // 导航菜单列表
+  list: MenuListItemProperty[];
+  // 组件样式
+  style: ComponentStyle;
+}
+
+/** 列表导航项目属性 */
+export interface MenuListItemProperty {
+  // 图标链接
+  iconUrl: string;
+  // 标题
+  title: string;
+  // 标题颜色
+  titleColor: string;
+  // 副标题
+  subtitle: string;
+  // 副标题颜色
+  subtitleColor: string;
+  // 链接
+  url: string;
+}
+
+export const EMPTY_MENU_LIST_ITEM_PROPERTY = {
+  title: '标题',
+  titleColor: '#333',
+  subtitle: '副标题',
+  subtitleColor: '#bbb',
+};
+
+// 定义组件
+export const component = {
+  id: 'MenuList',
+  name: '列表导航',
+  icon: 'fa-solid:list',
+  property: {
+    list: [cloneDeep(EMPTY_MENU_LIST_ITEM_PROPERTY)],
+    style: {
+      bgType: 'color',
+      bgColor: '#fff',
+      marginBottom: 8,
+    } as ComponentStyle,
+  },
+} as DiyComponent<MenuListProperty>;
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-list/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-list/index.vue
new file mode 100644
index 000000000..cfe38a9ae
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-list/index.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { MenuListProperty } from './config';
+
+import { IconifyIcon } from '@vben/icons';
+
+
+/** 列表导航 */
+defineOptions({ name: 'MenuList' });
+defineProps<{ property: MenuListProperty }>();
+</script>
+
+<template>
+  <div class="flex min-h-[42px] flex-col">
+    <div
+      v-for="(item, index) in property.list"
+      :key="index"
+      class="item flex h-[42px] flex-row items-center justify-between gap-1 px-3"
+    >
+      <div class="flex flex-1 flex-row items-center gap-2">
+        <Image v-if="item.iconUrl" class="h-4 w-4" :src="item.iconUrl" />
+        <span class="text-base" :style="{ color: item.titleColor }">{{
+          item.title
+        }}</span>
+      </div>
+      <div class="item-center flex flex-row justify-center gap-1">
+        <span class="text-xs" :style="{ color: item.subtitleColor }">{{
+          item.subtitle
+        }}</span>
+        <IconifyIcon icon="ep:arrow-right" color="#000" :size="16" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.item + .item {
+  border-top: 1px solid #eee;
+}
+</style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-list/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-list/property.vue
new file mode 100644
index 000000000..f2de06c79
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-list/property.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import type { MenuListProperty } from './config';
+
+import { useVModel } from '@vueuse/core';
+
+import ComponentContainerProperty from '../../component-container-property.vue';
+import UploadImg from '#/components/upload/image-upload.vue';
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-swiper/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-swiper/config.ts
new file mode 100644
index 000000000..b73213ac7
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-swiper/config.ts
@@ -0,0 +1,70 @@
+import type {
+  ComponentStyle,
+  DiyComponent,
+} from '../../../util';
+
+import { cloneDeep } from '@vben/utils';
+
+/** 菜单导航属性 */
+export interface MenuSwiperProperty {
+  // 布局： 图标+文字 | 图标
+  layout: 'icon' | 'iconText';
+  // 行数
+  row: number;
+  // 列数
+  column: number;
+  // 导航菜单列表
+  list: MenuSwiperItemProperty[];
+  // 组件样式
+  style: ComponentStyle;
+}
+/** 菜单导航项目属性 */
+export interface MenuSwiperItemProperty {
+  // 图标链接
+  iconUrl: string;
+  // 标题
+  title: string;
+  // 标题颜色
+  titleColor: string;
+  // 链接
+  url: string;
+  // 角标
+  badge: {
+    // 角标背景颜色
+    bgColor: string;
+    // 是否显示
+    show: boolean;
+    // 角标文字
+    text: string;
+    // 角标文字颜色
+    textColor: string;
+  };
+}
+
+export const EMPTY_MENU_SWIPER_ITEM_PROPERTY = {
+  title: '标题',
+  titleColor: '#333',
+  badge: {
+    show: false,
+    textColor: '#fff',
+    bgColor: '#FF6000',
+  },
+} as MenuSwiperItemProperty;
+
+// 定义组件
+export const component = {
+  id: 'MenuSwiper',
+  name: '菜单导航',
+  icon: 'bi:grid-3x2-gap',
+  property: {
+    layout: 'iconText',
+    row: 1,
+    column: 3,
+    list: [cloneDeep(EMPTY_MENU_SWIPER_ITEM_PROPERTY)],
+    style: {
+      bgType: 'color',
+      bgColor: '#fff',
+      marginBottom: 8,
+    } as ComponentStyle,
+  },
+} as DiyComponent<MenuSwiperProperty>;
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-swiper/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-swiper/index.vue
new file mode 100644
index 000000000..0f3b1bb6a
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-swiper/index.vue
@@ -0,0 +1,136 @@
+<script setup lang="ts">
+import type { MenuSwiperItemProperty, MenuSwiperProperty } from './config';
+
+import { ref, watch } from '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('');
+watch(
+  () => props.property,
+  () => {
+    // 计算列宽：每一列的百分比
+    columnWidth.value = `${100 * (1 / props.property.column)}%`;
+    // 计算行高：图标 + 文字（仅显示图片时为0） + 垂直间距 * 2
+    rowHeight.value =
+      (props.property.layout === 'iconText'
+        ? ICON_SIZE + TITLE_HEIGHT
+        : ICON_SIZE) +
+      SPACE_Y * 2;
+    // 计算轮播的高度：行数 * 行高
+    carouselHeight.value = props.property.row * rowHeight.value;
+
+    // 每页数量：行数 * 列数
+    const pageSize = props.property.row * props.property.column;
+    // 清空分页
+    pages.value = [];
+    // 每一页的菜单
+    let pageItems: MenuSwiperItemProperty[] = [];
+    for (const item of props.property.list) {
+      // 本页满员，新建下一页
+      if (pageItems.length === pageSize) {
+        pageItems = [];
+      }
+      // 增加一页
+      if (pageItems.length === 0) {
+        pages.value.push(pageItems);
+      }
+      // 本页增加一个
+      pageItems.push(item);
+    }
+  },
+  { immediate: true, deep: true },
+);
+</script>
+
+<template>
+  <Carousel
+    :autoplay="false"
+    arrows
+    dots
+    :style="{ height: `${carouselHeight}px` }"
+  >
+    <div v-for="(page, pageIndex) in pages" :key="pageIndex">
+      <div class="flex flex-row flex-wrap">
+        <div
+          v-for="(item, index) in page"
+          :key="index"
+          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"
+              :style="{
+                color: item.badge.textColor,
+                backgroundColor: item.badge.bgColor,
+              }"
+            >
+              {{ item.badge.text }}
+            </span>
+            <Image
+              v-if="item.iconUrl"
+              :src="item.iconUrl"
+              class="h-full w-full"
+              :preview="false"
+            />
+          </div>
+          <!-- 标题 -->
+          <span
+            v-if="property.layout === 'iconText'"
+            class="text-xs"
+            :style="{
+              color: item.titleColor,
+              height: `${TITLE_HEIGHT}px`,
+              lineHeight: `${TITLE_HEIGHT}px`,
+            }"
+          >
+            {{ item.title }}
+          </span>
+        </div>
+      </div>
+    </div>
+  </Carousel>
+</template>
+
+<style lang="scss">
+// Ant Design Vue Carousel 样式调整
+:deep(.ant-carousel .ant-carousel-dots) {
+  .ant-carousel-dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 6px;
+    
+    button {
+      width: 6px;
+      height: 6px;
+      border-radius: 6px;
+      background: #ff6000;
+    }
+  }
+  
+  .ant-carousel-dot-active button {
+    width: 12px;
+    background: #ff6000;
+  }
+}
+</style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-swiper/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-swiper/property.vue
new file mode 100644
index 000000000..201db0f29
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-swiper/property.vue
@@ -0,0 +1,6 @@
+<script setup lang="ts">
+import type { MenuSwiperProperty } from './config';
+
+import { cloneDeep } from '@vben/utils';
+
+import { useVModel } from '@vueuse/core';
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/components/cell-property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/components/cell-property.vue
new file mode 100644
index 000000000..96729174f
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/components/cell-property.vue
@@ -0,0 +1,8 @@
+<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 { useVModel } from '@vueuse/core';
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/config.ts
new file mode 100644
index 000000000..fd675b16e
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/config.ts
@@ -0,0 +1,82 @@
+import type { DiyComponent } from '../../../util';
+
+/** 顶部导航栏属性 */
+export interface NavigationBarProperty {
+  // 背景类型
+  bgType: 'color' | 'img';
+  // 背景颜色
+  bgColor: string;
+  // 图片链接
+  bgImg: string;
+  // 样式类型：默认 | 沉浸式
+  styleType: 'inner' | 'normal';
+  // 常驻显示
+  alwaysShow: boolean;
+  // 小程序单元格列表
+  mpCells: NavigationBarCellProperty[];
+  // 其它平台单元格列表
+  otherCells: NavigationBarCellProperty[];
+  // 本地变量
+  _local: {
+    // 预览顶部导航（小程序）
+    previewMp: boolean;
+    // 预览顶部导航（非小程序）
+    previewOther: boolean;
+  };
+}
+
+/** 顶部导航栏 - 单元格 属性 */
+export interface NavigationBarCellProperty {
+  // 类型：文字 | 图片 | 搜索框
+  type: 'image' | 'search' | 'text';
+  // 宽度
+  width: number;
+  // 高度
+  height: number;
+  // 顶部位置
+  top: number;
+  // 左侧位置
+  left: number;
+  // 文字内容
+  text: string;
+  // 文字颜色
+  textColor: string;
+  // 图片地址
+  imgUrl: string;
+  // 图片链接
+  url: string;
+  // 搜索框：提示文字
+  placeholder: string;
+  // 搜索框：边框圆角半径
+  borderRadius: number;
+}
+
+// 定义组件
+export const component = {
+  id: 'NavigationBar',
+  name: '顶部导航栏',
+  icon: 'tabler:layout-navbar',
+  property: {
+    bgType: 'color',
+    bgColor: '#fff',
+    bgImg: '',
+    styleType: 'normal',
+    alwaysShow: true,
+    mpCells: [
+      {
+        type: 'text',
+        textColor: '#111111',
+      },
+    ],
+    otherCells: [
+      {
+        type: 'text',
+        textColor: '#111111',
+      },
+    ],
+    _local: {
+      previewMp: true,
+      previewOther: false,
+    },
+  },
+} as DiyComponent<NavigationBarProperty>;
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/index.vue
new file mode 100644
index 000000000..28376f73e
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/index.vue
@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import type { StyleValue } from 'vue';
+
+import type {
+  NavigationBarCellProperty,
+  NavigationBarProperty,
+} from './config';
+
+import type { SearchProperty } from '../search-bar/config';
+
+import { computed } from 'vue';
+
+import appNavbarMp from '#/assets/imgs/diy/app-nav-bar-mp.png';
+import SearchBar from '../search-bar/index.vue';
+
+/** 页面顶部导航栏 */
+defineOptions({ name: 'NavigationBar' });
+
+const props = defineProps<{ property: NavigationBarProperty }>();
+
+// 背景
+const bgStyle = computed(() => {
+  const background =
+    props.property.bgType === 'img' && props.property.bgImg
+      ? `url(${props.property.bgImg}) no-repeat top center / 100% 100%`
+      : props.property.bgColor;
+  return { background };
+});
+// 单元格列表
+const cellList = computed(() =>
+  props.property._local?.previewMp
+    ? props.property.mpCells
+    : props.property.otherCells,
+);
+// 单元格宽度
+const cellWidth = computed(() => {
+  return props.property._local?.previewMp
+    ? (375 - 80 - 86) / 6
+    : (375 - 90) / 8;
+});
+// 获得单元格样式
+const getCellStyle = (cell: NavigationBarCellProperty) => {
+  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,
+    showScan: false,
+    placeholder: cell.placeholder,
+    borderRadius: cell.borderRadius,
+  } as SearchProperty;
+});
+</script>
+<template>
+  <div class="navigation-bar" :style="bgStyle">
+    <div class="flex h-full w-full items-center">
+      <div
+        v-for="(cell, cellIndex) in cellList"
+        :key="cellIndex"
+        :style="getCellStyle(cell)"
+      >
+        <span v-if="cell.type === 'text'">{{ cell.text }}</span>
+        <img
+          v-else-if="cell.type === 'image'"
+          :src="cell.imgUrl"
+          alt=""
+          class="h-full w-full"
+        />
+        <SearchBar v-else :property="getSearchProp(cell)" />
+      </div>
+    </div>
+    <img
+      v-if="property._local?.previewMp"
+      :src="appNavbarMp"
+      alt=""
+      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>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/property.vue
new file mode 100644
index 000000000..ce3e3f698
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/property.vue
@@ -0,0 +1,117 @@
+<script setup lang="ts">
+import type { NavigationBarProperty } from './config';
+
+import { useVModel } from '@vueuse/core';
+
+import NavigationBarCellProperty from './components/cell-property.vue';
+
+// 导航栏属性面板
+defineOptions({ name: 'NavigationBarProperty' });
+const props = defineProps<{ modelValue: NavigationBarProperty }>();
+
+const emit = defineEmits(['update:modelValue']);
+
+// 表单校验
+const rules = {
+  name: [{ required: true, message: '请输入页面名称', trigger: 'blur' }],
+};
+
+const formData = useVModel(props, 'modelValue', emit);
+if (!formData.value._local) {
+  formData.value._local = { previewMp: true, previewOther: false };
+}
+</script>
+
+<template>
+  <el-form label-width="80px" :model="formData" :rules="rules">
+    <el-form-item label="样式" prop="styleType">
+      <el-radio-group v-model="formData!.styleType">
+        <el-radio value="normal">标准</el-radio>
+        <el-tooltip
+          content="沉侵式头部仅支持微信小程序、APP，建议页面第一个组件为图片展示类组件"
+          placement="top"
+        >
+          <el-radio value="inner">沉浸式</el-radio>
+        </el-tooltip>
+      </el-radio-group>
+    </el-form-item>
+    <el-form-item
+      label="常驻显示"
+      prop="alwaysShow"
+      v-if="formData.styleType === 'inner'"
+    >
+      <el-radio-group v-model="formData!.alwaysShow">
+        <el-radio :value="false">关闭</el-radio>
+        <el-tooltip
+          content="常驻显示关闭后,头部小组件将在页面滑动时淡入"
+          placement="top"
+        >
+          <el-radio :value="true">开启</el-radio>
+        </el-tooltip>
+      </el-radio-group>
+    </el-form-item>
+    <el-form-item label="背景类型" prop="bgType">
+      <el-radio-group v-model="formData.bgType">
+        <el-radio value="color">纯色</el-radio>
+        <el-radio value="img">图片</el-radio>
+      </el-radio-group>
+    </el-form-item>
+    <el-form-item
+      label="背景颜色"
+      prop="bgColor"
+      v-if="formData.bgType === 'color'"
+    >
+      <ColorInput v-model="formData.bgColor" />
+    </el-form-item>
+    <el-form-item label="背景图片" prop="bgImg" v-else>
+      <div class="flex items-center">
+        <UploadImg
+          v-model="formData.bgImg"
+          :limit="1"
+          width="56px"
+          height="56px"
+          :show-description="false"
+        />
+        <span class="mb-2 ml-2 text-xs text-gray-400">建议宽度：750</span>
+      </div>
+    </el-form-item>
+    <el-card class="property-group" shadow="never">
+      <template #header>
+        <div class="flex items-center justify-between">
+          <span>内容（小程序）</span>
+          <el-form-item prop="_local.previewMp" class="mb-0">
+            <el-checkbox
+              v-model="formData._local.previewMp"
+              @change="
+                formData._local.previewOther = !formData._local.previewMp
+              "
+            >
+              预览
+            </el-checkbox>
+          </el-form-item>
+        </div>
+      </template>
+      <NavigationBarCellProperty v-model="formData.mpCells" is-mp />
+    </el-card>
+    <el-card class="property-group" shadow="never">
+      <template #header>
+        <div class="flex items-center justify-between">
+          <span>内容（非小程序）</span>
+          <el-form-item prop="_local.previewOther" class="mb-0">
+            <el-checkbox
+              v-model="formData._local.previewOther"
+              @change="
+                formData._local.previewMp = !formData._local.previewOther
+              "
+            >
+              预览
+            </el-checkbox>
+          </el-form-item>
+        </div>
+      </template>
+      <NavigationBarCellProperty v-model="formData.otherCells" :is-mp="false" />
+    </el-card>
+  </el-form>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/config.ts
new file mode 100644
index 000000000..9eb1ca8e1
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/config.ts
@@ -0,0 +1,49 @@
+import type {
+  ComponentStyle,
+  DiyComponent,
+} from '../../../util';
+
+/** 公告栏属性 */
+export interface NoticeBarProperty {
+  // 图标地址
+  iconUrl: string;
+  // 公告内容列表
+  contents: NoticeContentProperty[];
+  // 背景颜色
+  backgroundColor: string;
+  // 文字颜色
+  textColor: string;
+  // 组件样式
+  style: ComponentStyle;
+}
+
+/** 内容属性 */
+export interface NoticeContentProperty {
+  // 内容文字
+  text: string;
+  // 链接地址
+  url: string;
+}
+
+// 定义组件
+export const component = {
+  id: 'NoticeBar',
+  name: '公告栏',
+  icon: 'ep:bell',
+  property: {
+    iconUrl: 'http://mall.yudao.iocoder.cn/static/images/xinjian.png',
+    contents: [
+      {
+        text: '',
+        url: '',
+      },
+    ],
+    backgroundColor: '#fff',
+    textColor: '#333',
+    style: {
+      bgType: 'color',
+      bgColor: '#fff',
+      marginBottom: 8,
+    } as ComponentStyle,
+  },
+} as DiyComponent<NoticeBarProperty>;
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/index.vue
new file mode 100644
index 000000000..a087c6ef8
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/index.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import type { NoticeBarProperty } from './config';
+
+import { IconifyIcon } from '@vben/icons';
+
+
+/** 公告栏 */
+defineOptions({ name: 'NoticeBar' });
+
+defineProps<{ property: NoticeBarProperty }>();
+</script>
+
+<template>
+  <div
+    class="flex items-center py-1 text-xs"
+    :style="{
+      backgroundColor: property.backgroundColor,
+      color: property.textColor,
+    }"
+  >
+    <ElImage :src="property.iconUrl" class="h-[18px]" />
+    <ElDivider direction="vertical" />
+    <ElCarousel
+      height="24px"
+      direction="vertical"
+      :autoplay="true"
+      class="flex-1 pr-2"
+    >
+      <ElCarouselItem v-for="(item, index) in property.contents" :key="index">
+        <div class="h-6 truncate leading-6">{{ item.text }}</div>
+      </ElCarouselItem>
+    </ElCarousel>
+    <IconifyIcon icon="ep:arrow-right" />
+  </div>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/property.vue
new file mode 100644
index 000000000..10c482958
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/property.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import type { NoticeBarProperty } from './config';
+
+import { useVModel } from '@vueuse/core';
+
+import ComponentContainerProperty from '../../component-container-property.vue';
+import UploadImg from '#/components/upload/image-upload.vue';
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/page-config/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/page-config/config.ts
new file mode 100644
index 000000000..73032a84a
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/page-config/config.ts
@@ -0,0 +1,23 @@
+import type { DiyComponent } from '../../../util';
+
+/** 页面设置属性 */
+export interface PageConfigProperty {
+  // 页面描述
+  description: string;
+  // 页面背景颜色
+  backgroundColor: string;
+  // 页面背景图片
+  backgroundImage: string;
+}
+
+// 定义页面组件
+export const component = {
+  id: 'PageConfig',
+  name: '页面设置',
+  icon: 'ep:document',
+  property: {
+    description: '',
+    backgroundColor: '#f5f5f5',
+    backgroundImage: '',
+  },
+} as DiyComponent<PageConfigProperty>;
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/page-config/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/page-config/property.vue
new file mode 100644
index 000000000..951730f5c
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/page-config/property.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import type { PageConfigProperty } from './config';
+
+import { useVModel } from '@vueuse/core';
+
+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" labelCol="{ span: 6 }" wrapperCol="{ span: 18 }">
+    <FormItem label="页面描述" name="description">
+      <Textarea
+        v-model:value="formData!.description"
+        placeholder="用户通过微信分享给朋友时，会自动显示页面描述"
+        :rows="3"
+      />
+    </FormItem>
+    <FormItem label="背景颜色" name="backgroundColor">
+      <ColorInput v-model="formData!.backgroundColor" />
+    </FormItem>
+    <FormItem label="背景图片" name="backgroundImage">
+      <UploadImg
+        v-model="formData!.backgroundImage"
+        :limit="1"
+        :show-description="false"
+      >
+        <template #tip>建议宽度 750px</template>
+      </UploadImg>
+    </FormItem>
+  </Form>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-card/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-card/config.ts
new file mode 100644
index 000000000..1dd88d7b8
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-card/config.ts
@@ -0,0 +1,100 @@
+import type {
+  ComponentStyle,
+  DiyComponent,
+} from '../../../util';
+
+/** 商品卡片属性 */
+export interface ProductCardProperty {
+  // 布局类型：单列大图 | 单列小图 | 双列
+  layoutType: 'oneColBigImg' | 'oneColSmallImg' | 'twoCol';
+  // 商品字段
+  fields: {
+    // 商品简介
+    introduction: ProductCardFieldProperty;
+    // 商品市场价
+    marketPrice: ProductCardFieldProperty;
+    // 商品名称
+    name: ProductCardFieldProperty;
+    // 商品价格
+    price: ProductCardFieldProperty;
+    // 商品销量
+    salesCount: ProductCardFieldProperty;
+    // 商品库存
+    stock: ProductCardFieldProperty;
+  };
+  // 角标
+  badge: {
+    // 角标图片
+    imgUrl: string;
+    // 是否显示
+    show: boolean;
+  };
+  // 按钮
+  btnBuy: {
+    // 文字按钮：背景渐变起始颜色
+    bgBeginColor: string;
+    // 文字按钮：背景渐变结束颜色
+    bgEndColor: string;
+    // 图片按钮：图片地址
+    imgUrl: string;
+    // 文字
+    text: string;
+    // 类型：文字 | 图片
+    type: 'img' | 'text';
+  };
+  // 上圆角
+  borderRadiusTop: number;
+  // 下圆角
+  borderRadiusBottom: number;
+  // 间距
+  space: number;
+  // 商品编号列表
+  spuIds: number[];
+  // 组件样式
+  style: ComponentStyle;
+}
+// 商品字段
+export interface ProductCardFieldProperty {
+  // 是否显示
+  show: boolean;
+  // 颜色
+  color: string;
+}
+
+// 定义组件
+export const component = {
+  id: 'ProductCard',
+  name: '商品卡片',
+  icon: 'fluent:text-column-two-left-24-filled',
+  property: {
+    layoutType: 'oneColBigImg',
+    fields: {
+      name: { show: true, color: '#000' },
+      introduction: { show: true, color: '#999' },
+      price: { show: true, color: '#ff3000' },
+      marketPrice: { show: true, color: '#c4c4c4' },
+      salesCount: { show: true, color: '#c4c4c4' },
+      stock: { show: false, color: '#c4c4c4' },
+    },
+    badge: { show: false, imgUrl: '' },
+    btnBuy: {
+      type: 'text',
+      text: '立即购买',
+      // todo: @owen 根据主题色配置
+      bgBeginColor: '#FF6000',
+      bgEndColor: '#FE832A',
+      imgUrl: '',
+    },
+    borderRadiusTop: 6,
+    borderRadiusBottom: 6,
+    space: 8,
+    spuIds: [],
+    style: {
+      bgType: 'color',
+      bgColor: '',
+      marginLeft: 8,
+      marginRight: 8,
+      marginBottom: 8,
+    } as ComponentStyle,
+  },
+} as DiyComponent<ProductCardProperty>;
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-card/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-card/index.vue
new file mode 100644
index 000000000..1a5deb3dd
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-card/index.vue
@@ -0,0 +1,189 @@
+<script setup lang="ts">
+import type { ProductCardProperty } from './config';
+
+import type { MallSpuApi } from '#/api/mall/product/spu';
+
+import { ref, watch } from 'vue';
+
+import { fenToYuan } from '@vben/utils';
+
+
+import * as ProductSpuApi from '#/api/mall/product/spu';
+
+/** 商品卡片 */
+defineOptions({ name: 'ProductCard' });
+// 定义属性
+const props = defineProps<{ property: ProductCardProperty }>();
+// 商品列表
+const spuList = ref<MallSpuApi.Spu[]>([]);
+watch(
+  () => props.property.spuIds,
+  async () => {
+    spuList.value = await ProductSpuApi.getSpuDetailList(props.property.spuIds);
+  },
+  {
+    immediate: true,
+    deep: true,
+  },
+);
+
+/**
+ * 计算商品的间距
+ * @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`;
+
+  return { marginLeft, marginTop };
+};
+
+// 容器
+const containerRef = ref();
+// 计算商品的宽度
+const calculateWidth = () => {
+  let width = '100%';
+  // 双列时每列的宽度为：（总宽度 - 间距）/ 2
+  if (props.property.layoutType === 'twoCol') {
+    width = `${(containerRef.value.offsetWidth - props.property.space) / 2}px`;
+  }
+  return { width };
+};
+</script>
+<template>
+  <div
+    class="box-content flex min-h-[30px] w-full flex-row flex-wrap"
+    ref="containerRef"
+  >
+    <div
+      class="relative box-content flex flex-row flex-wrap overflow-hidden bg-white"
+      :style="{
+        ...calculateSpace(index),
+        ...calculateWidth(),
+        borderTopLeftRadius: `${property.borderRadiusTop}px`,
+        borderTopRightRadius: `${property.borderRadiusTop}px`,
+        borderBottomLeftRadius: `${property.borderRadiusBottom}px`,
+        borderBottomRightRadius: `${property.borderRadiusBottom}px`,
+      }"
+      v-for="(spu, index) in spuList"
+      :key="index"
+    >
+      <!-- 角标 -->
+      <div
+        v-if="property.badge.show && property.badge.imgUrl"
+        class="absolute left-0 top-0 z-[1] items-center justify-center"
+      >
+        <Image
+          fit="cover"
+          :src="property.badge.imgUrl"
+          class="h-[26px] w-[38px]"
+        />
+      </div>
+      <!-- 商品封面图 -->
+      <div
+        class="h-[140px]"
+        :class="[
+          {
+            'w-full': property.layoutType !== 'oneColSmallImg',
+            'w-[140px]': property.layoutType === 'oneColSmallImg',
+          },
+        ]"
+      >
+        <Image fit="cover" class="h-full w-full" :src="spu.picUrl" />
+      </div>
+      <div
+        class="box-border flex flex-col gap-[8px] p-[8px]"
+        :class="[
+          {
+            'w-full': property.layoutType !== 'oneColSmallImg',
+            'w-[calc(100%-140px-16px)]':
+              property.layoutType === 'oneColSmallImg',
+          },
+        ]"
+      >
+        <!-- 商品名称 -->
+        <div
+          v-if="property.fields.name.show"
+          class="text-[14px]"
+          :class="[
+            {
+              truncate: property.layoutType !== 'oneColSmallImg',
+              'line-clamp-2 overflow-ellipsis':
+                property.layoutType === 'oneColSmallImg',
+            },
+          ]"
+          :style="{ color: property.fields.name.color }"
+        >
+          {{ spu.name }}
+        </div>
+        <!-- 商品简介 -->
+        <div
+          v-if="property.fields.introduction.show"
+          class="truncate text-[12px]"
+          :style="{ color: property.fields.introduction.color }"
+        >
+          {{ spu.introduction }}
+        </div>
+        <div>
+          <!-- 价格 -->
+          <span
+            v-if="property.fields.price.show"
+            class="text-[16px]"
+            :style="{ color: property.fields.price.color }"
+          >
+            ￥{{ fenToYuan(spu.price as any) }}
+          </span>
+          <!-- 市场价 -->
+          <span
+            v-if="property.fields.marketPrice.show && spu.marketPrice"
+            class="ml-[4px] text-[10px] line-through"
+            :style="{ color: property.fields.marketPrice.color }"
+            >￥{{ fenToYuan(spu.marketPrice) }}
+          </span>
+        </div>
+        <div class="text-[12px]">
+          <!-- 销量 -->
+          <span
+            v-if="property.fields.salesCount.show"
+            :style="{ color: property.fields.salesCount.color }"
+          >
+            已售{{ (spu.salesCount || 0) + (spu.virtualSalesCount || 0) }}件
+          </span>
+          <!-- 库存 -->
+          <span
+            v-if="property.fields.stock.show"
+            :style="{ color: property.fields.stock.color }"
+          >
+            库存{{ spu.stock || 0 }}
+          </span>
+        </div>
+      </div>
+      <!-- 购买按钮 -->
+      <div class="absolute bottom-[8px] right-[8px]">
+        <!-- 文字按钮 -->
+        <span
+          v-if="property.btnBuy.type === 'text'"
+          class="rounded-full px-[12px] py-[4px] text-[12px] text-white"
+          :style="{
+            background: `linear-gradient(to right, ${property.btnBuy.bgBeginColor}, ${property.btnBuy.bgEndColor}`,
+          }"
+        >
+          {{ property.btnBuy.text }}
+        </span>
+        <!-- 图片按钮 -->
+        <Image
+          v-else
+          class="h-[28px] w-[28px] rounded-full"
+          fit="cover"
+          :src="property.btnBuy.imgUrl"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-card/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-card/property.vue
new file mode 100644
index 000000000..e5ea04063
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-card/property.vue
@@ -0,0 +1,6 @@
+<script setup lang="ts">
+import type { ProductCardProperty } from './config';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { useVModel } from '@vueuse/core';
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/config.ts
new file mode 100644
index 000000000..069dcabdc
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/config.ts
@@ -0,0 +1,67 @@
+import type {
+  ComponentStyle,
+  DiyComponent,
+} from '../../../util';
+
+/** 商品栏属性 */
+export interface ProductListProperty {
+  // 布局类型：双列 | 三列 | 水平滑动
+  layoutType: 'horizSwiper' | 'threeCol' | 'twoCol';
+  // 商品字段
+  fields: {
+    // 商品名称
+    name: ProductListFieldProperty;
+    // 商品价格
+    price: ProductListFieldProperty;
+  };
+  // 角标
+  badge: {
+    // 角标图片
+    imgUrl: string;
+    // 是否显示
+    show: boolean;
+  };
+  // 上圆角
+  borderRadiusTop: number;
+  // 下圆角
+  borderRadiusBottom: number;
+  // 间距
+  space: number;
+  // 商品编号列表
+  spuIds: number[];
+  // 组件样式
+  style: ComponentStyle;
+}
+// 商品字段
+export interface ProductListFieldProperty {
+  // 是否显示
+  show: boolean;
+  // 颜色
+  color: string;
+}
+
+// 定义组件
+export const component = {
+  id: 'ProductList',
+  name: '商品栏',
+  icon: 'fluent:text-column-two-24-filled',
+  property: {
+    layoutType: 'twoCol',
+    fields: {
+      name: { show: true, color: '#000' },
+      price: { show: true, color: '#ff3000' },
+    },
+    badge: { show: false, imgUrl: '' },
+    borderRadiusTop: 8,
+    borderRadiusBottom: 8,
+    space: 8,
+    spuIds: [],
+    style: {
+      bgType: 'color',
+      bgColor: '',
+      marginLeft: 8,
+      marginRight: 8,
+      marginBottom: 8,
+    } as ComponentStyle,
+  },
+} as DiyComponent<ProductListProperty>;
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/index.vue
new file mode 100644
index 000000000..319ee21b7
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/index.vue
@@ -0,0 +1,149 @@
+<script setup lang="ts">
+import type { ProductListProperty } from './config';
+
+import type { MallSpuApi } from '#/api/mall/product/spu';
+
+import { onMounted, ref, watch } from 'vue';
+
+import { fenToYuan } from '@vben/utils';
+
+
+import * as ProductSpuApi from '#/api/mall/product/spu';
+
+/** 商品栏 */
+defineOptions({ name: 'ProductList' });
+// 定义属性
+const props = defineProps<{ property: ProductListProperty }>();
+// 商品列表
+const spuList = ref<MallSpuApi.Spu[]>([]);
+watch(
+  () => props.property.spuIds,
+  async () => {
+    spuList.value = await ProductSpuApi.getSpuDetailList(props.property.spuIds);
+  },
+  {
+    immediate: true,
+    deep: true,
+  },
+);
+// 手机宽度
+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],
+  () => {
+    // 计算列数
+    columns.value = props.property.layoutType === 'twoCol' ? 2 : 3;
+    // 每列的宽度为：（总宽度 - 间距 * (列数 - 1)）/ 列数
+    const productWidth =
+      (phoneWidth.value - props.property.space * (columns.value - 1)) /
+      columns.value;
+    // 商品图布局：2列时，左右布局 3列时，上下布局
+    imageSize.value = columns.value === 2 ? '64px' : `${productWidth}px`;
+    // 根据布局类型，计算行数、列数
+    if (props.property.layoutType === 'horizSwiper') {
+      // 单行显示
+      gridTemplateColumns.value = `repeat(auto-fill, ${productWidth}px)`;
+      // 显示滚动条
+      scrollbarWidth.value = `${
+        productWidth * spuList.value.length +
+        props.property.space * (spuList.value.length - 1)
+      }px`;
+    } else {
+      // 指定列数
+      gridTemplateColumns.value = `repeat(${columns.value}, auto)`;
+      // 不滚动
+      scrollbarWidth.value = '100%';
+    }
+  },
+  { immediate: true, deep: true },
+);
+onMounted(() => {
+  // 提取手机宽度
+  phoneWidth.value = containerRef.value?.wrapRef?.offsetWidth || 375;
+});
+</script>
+<template>
+  <div class="z-10 min-h-[30px]" wrap-class="w-full" ref="containerRef">
+    <!-- 商品网格 -->
+    <div
+      class="grid overflow-x-auto"
+      :style="{
+        gridGap: `${property.space}px`,
+        gridTemplateColumns,
+        width: scrollbarWidth,
+      }"
+    >
+      <!-- 商品 -->
+      <div
+        class="relative box-content flex flex-row flex-wrap overflow-hidden bg-white"
+        :style="{
+          borderTopLeftRadius: `${property.borderRadiusTop}px`,
+          borderTopRightRadius: `${property.borderRadiusTop}px`,
+          borderBottomLeftRadius: `${property.borderRadiusBottom}px`,
+          borderBottomRightRadius: `${property.borderRadiusBottom}px`,
+        }"
+        v-for="(spu, index) in spuList"
+        :key="index"
+      >
+        <!-- 角标 -->
+        <div
+          v-if="property.badge.show"
+          class="absolute left-0 top-0 z-10 items-center justify-center"
+        >
+          <Image
+            fit="cover"
+            :src="property.badge.imgUrl"
+            class="h-[26px] w-[38px]"
+          />
+        </div>
+        <!-- 商品封面图 -->
+        <Image
+          fit="cover"
+          :src="spu.picUrl"
+          :style="{ width: imageSize, height: imageSize }"
+        />
+        <div
+          class="box-border flex flex-col gap-2 p-2"
+          :class="[
+            {
+              'w-[calc(100%-64px)]': columns === 2,
+              'w-full': columns === 3,
+            },
+          ]"
+        >
+          <!-- 商品名称 -->
+          <div
+            v-if="property.fields.name.show"
+            class="truncate text-xs"
+            :style="{ color: property.fields.name.color }"
+          >
+            {{ spu.name }}
+          </div>
+          <div>
+            <!-- 商品价格 -->
+            <span
+              v-if="property.fields.price.show"
+              class="text-xs"
+              :style="{ color: property.fields.price.color }"
+            >
+              ￥{{ fenToYuan(spu.price || 0) }}
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/property.vue
new file mode 100644
index 000000000..a2e35a9ae
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/property.vue
@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import type { ProductListProperty } from './config';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { useVModel } from '@vueuse/core';
+
+import ComponentContainerProperty from '../../component-container-property.vue';
+import UploadImg from '#/components/upload/image-upload.vue';
+import { InputWithColor as ColorInput } from '#/views/mall/promotion/components';
+// 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>
+
+<template>
+  <ComponentContainerProperty v-model="formData.style">
+    <ElForm label-width="80px" :model="formData">
+      <ElCard header="商品列表" class="property-group" shadow="never">
+        <!-- <SpuShowcase v-model="formData.spuIds" /> -->
+      </ElCard>
+      <ElCard header="商品样式" class="property-group" shadow="never">
+        <ElFormItem label="布局" prop="type">
+          <ElRadioGroup v-model="formData.layoutType">
+            <ElTooltip class="item" content="双列" placement="bottom">
+              <ElRadioButton value="twoCol">
+                <IconifyIcon icon="fluent:text-column-two-24-filled" />
+              </ElRadioButton>
+            </ElTooltip>
+            <ElTooltip class="item" content="三列" placement="bottom">
+              <ElRadioButton value="threeCol">
+                <IconifyIcon icon="fluent:text-column-three-24-filled" />
+              </ElRadioButton>
+            </ElTooltip>
+            <ElTooltip class="item" content="水平滑动" placement="bottom">
+              <ElRadioButton value="horizSwiper">
+                <IconifyIcon icon="system-uicons:carousel" />
+              </ElRadioButton>
+            </ElTooltip>
+          </ElRadioGroup>
+        </ElFormItem>
+        <ElFormItem label="商品名称" prop="fields.name.show">
+          <div class="flex gap-2">
+            <ColorInput v-model="formData.fields.name.color" />
+            <ElCheckbox v-model="formData.fields.name.show" />
+          </div>
+        </ElFormItem>
+        <ElFormItem label="商品价格" prop="fields.price.show">
+          <div class="flex gap-2">
+            <ColorInput v-model="formData.fields.price.color" />
+            <ElCheckbox v-model="formData.fields.price.show" />
+          </div>
+        </ElFormItem>
+      </ElCard>
+      <ElCard header="角标" class="property-group" shadow="never">
+        <ElFormItem label="角标" prop="badge.show">
+          <ElSwitch v-model="formData.badge.show" />
+        </ElFormItem>
+        <ElFormItem label="角标" prop="badge.imgUrl" v-if="formData.badge.show">
+          <UploadImg
+            v-model="formData.badge.imgUrl"
+            height="44px"
+            width="72px"
+            :show-description="false"
+          >
+            <template #tip> 建议尺寸：36 * 22 </template>
+          </UploadImg>
+        </ElFormItem>
+      </ElCard>
+      <ElCard header="商品样式" class="property-group" shadow="never">
+        <ElFormItem label="上圆角" prop="borderRadiusTop">
+          <ElSlider
+            v-model="formData.borderRadiusTop"
+            :max="100"
+            :min="0"
+            show-input
+            input-size="small"
+            :show-input-controls="false"
+          />
+        </ElFormItem>
+        <ElFormItem label="下圆角" prop="borderRadiusBottom">
+          <ElSlider
+            v-model="formData.borderRadiusBottom"
+            :max="100"
+            :min="0"
+            show-input
+            input-size="small"
+            :show-input-controls="false"
+          />
+        </ElFormItem>
+        <ElFormItem label="间隔" prop="space">
+          <ElSlider
+            v-model="formData.space"
+            :max="100"
+            :min="0"
+            show-input
+            input-size="small"
+            :show-input-controls="false"
+          />
+        </ElFormItem>
+      </ElCard>
+    </ElForm>
+  </ComponentContainerProperty>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/config.ts
new file mode 100644
index 000000000..c477994aa
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/config.ts
@@ -0,0 +1,28 @@
+import type {
+  ComponentStyle,
+  DiyComponent,
+} from '../../../util';
+
+/** 营销文章属性 */
+export interface PromotionArticleProperty {
+  // 文章编号
+  id: number;
+  // 组件样式
+  style: ComponentStyle;
+}
+
+// 定义组件
+export const component = {
+  id: 'PromotionArticle',
+  name: '营销文章',
+  icon: 'ph:article-medium',
+  property: {
+    style: {
+      bgType: 'color',
+      bgColor: '',
+      marginLeft: 8,
+      marginRight: 8,
+      marginBottom: 8,
+    } as ComponentStyle,
+  },
+} as DiyComponent<PromotionArticleProperty>;
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/index.vue
new file mode 100644
index 000000000..10e9f5aa3
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/index.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { PromotionArticleProperty } from './config';
+
+import type { MallArticleApi } from '#/api/mall/promotion/article';
+
+import { ref, watch } from 'vue';
+
+import * as ArticleApi from '#/api/mall/promotion/article/index';
+
+/** 营销文章 */
+defineOptions({ name: 'PromotionArticle' });
+// 定义属性
+const props = defineProps<{ property: PromotionArticleProperty }>();
+// 商品列表
+const article = ref<MallArticleApi.Article>();
+
+watch(
+  () => props.property.id,
+  async () => {
+    if (props.property.id) {
+      article.value = await ArticleApi.getArticle(props.property.id);
+    }
+  },
+  {
+    immediate: true,
+  },
+);
+</script>
+<template>
+  <div class="min-h-[30px]" v-dompurify-html="article?.content"></div>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/property.vue
new file mode 100644
index 000000000..939adce8d
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/property.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import type { PromotionArticleProperty } from './config';
+
+import type { MallArticleApi } from '#/api/mall/promotion/article';
+
+import { onMounted, ref } from 'vue';
+
+import { useVModel } from '@vueuse/core';
+
+import * as ArticleApi from '#/api/mall/promotion/article/index';
+import ComponentContainerProperty from '../../component-container-property.vue';
+
+// 营销文章属性面板
+defineOptions({ name: 'PromotionArticleProperty' });
+
+const props = defineProps<{ modelValue: PromotionArticleProperty }>();
+const emit = defineEmits(['update:modelValue']);
+const formData = useVModel(props, 'modelValue', emit);
+// 文章列表
+const articles = ref<MallArticleApi.Article[]>([]);
+
+// 加载中
+const loading = ref(false);
+// 查询文章列表
+const queryArticleList = async (title?: string) => {
+  loading.value = true;
+  const { list } = await ArticleApi.getArticlePage({
+    title,
+    pageNo: 1,
+    pageSize: 10,
+  });
+  articles.value = list;
+  loading.value = false;
+};
+
+// 初始化
+onMounted(() => {
+  queryArticleList();
+});
+</script>
+
+<template>
+  <ComponentContainerProperty v-model="formData.style">
+    <ElForm label-width="40px" :model="formData">
+      <ElFormItem label="文章" prop="id">
+        <ElSelect
+          v-model="formData.id"
+          placeholder="请选择文章"
+          class="w-full"
+          filterable
+          remote
+          :remote-method="queryArticleList"
+          :loading="loading"
+        >
+          <ElOption
+            v-for="article in articles"
+            :key="article.id"
+            :label="article.title"
+            :value="article.id"
+          />
+        </ElSelect>
+      </ElFormItem>
+    </ElForm>
+  </ComponentContainerProperty>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/config.ts
new file mode 100644
index 000000000..3860ccd56
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/config.ts
@@ -0,0 +1,99 @@
+import type {
+  ComponentStyle,
+  DiyComponent,
+} from '../../../util';
+
+/** 拼团属性 */
+export interface PromotionCombinationProperty {
+  // 布局类型：单列 | 三列
+  layoutType: 'oneColBigImg' | 'oneColSmallImg' | 'twoCol';
+  // 商品字段
+  fields: {
+    // 商品简介
+    introduction: PromotionCombinationFieldProperty;
+    // 市场价
+    marketPrice: PromotionCombinationFieldProperty;
+    // 商品名称
+    name: PromotionCombinationFieldProperty;
+    // 商品价格
+    price: PromotionCombinationFieldProperty;
+    // 商品销量
+    salesCount: PromotionCombinationFieldProperty;
+    // 商品库存
+    stock: PromotionCombinationFieldProperty;
+  };
+  // 角标
+  badge: {
+    // 角标图片
+    imgUrl: string;
+    // 是否显示
+    show: boolean;
+  };
+  // 按钮
+  btnBuy: {
+    // 文字按钮：背景渐变起始颜色
+    bgBeginColor: string;
+    // 文字按钮：背景渐变结束颜色
+    bgEndColor: string;
+    // 图片按钮：图片地址
+    imgUrl: string;
+    // 文字
+    text: string;
+    // 类型：文字 | 图片
+    type: 'img' | 'text';
+  };
+  // 上圆角
+  borderRadiusTop: number;
+  // 下圆角
+  borderRadiusBottom: number;
+  // 间距
+  space: number;
+  // 拼团活动编号
+  activityIds: number[];
+  // 组件样式
+  style: ComponentStyle;
+}
+
+// 商品字段
+export interface PromotionCombinationFieldProperty {
+  // 是否显示
+  show: boolean;
+  // 颜色
+  color: string;
+}
+
+// 定义组件
+export const component = {
+  id: 'PromotionCombination',
+  name: '拼团',
+  icon: 'mdi:account-group',
+  property: {
+    layoutType: 'oneColBigImg',
+    fields: {
+      name: { show: true, color: '#000' },
+      introduction: { show: true, color: '#999' },
+      price: { show: true, color: '#ff3000' },
+      marketPrice: { show: true, color: '#c4c4c4' },
+      salesCount: { show: true, color: '#c4c4c4' },
+      stock: { show: false, color: '#c4c4c4' },
+    },
+    badge: { show: false, imgUrl: '' },
+    btnBuy: {
+      type: 'text',
+      text: '去拼团',
+      bgBeginColor: '#FF6000',
+      bgEndColor: '#FE832A',
+      imgUrl: '',
+    },
+    borderRadiusTop: 8,
+    borderRadiusBottom: 8,
+    space: 8,
+    style: {
+      bgType: 'color',
+      bgColor: '',
+      marginLeft: 8,
+      marginRight: 8,
+      marginBottom: 8,
+    } as ComponentStyle,
+  },
+} as DiyComponent<PromotionCombinationProperty>;
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/index.vue
new file mode 100644
index 000000000..b98c763b6
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/index.vue
@@ -0,0 +1,232 @@
+<script setup lang="ts">
+import type { PromotionCombinationProperty } from './config';
+
+import type { MallSpuApi } from '#/api/mall/product/spu';
+import type { MallCombinationActivityApi } from '#/api/mall/promotion/combination/combinationActivity';
+
+import { ref, watch } from 'vue';
+
+import { fenToYuan } from '@vben/utils';
+
+
+import * as ProductSpuApi from '#/api/mall/product/spu';
+import * as CombinationActivityApi from '#/api/mall/promotion/combination/combinationActivity';
+
+/** 拼团卡片 */
+defineOptions({ name: 'PromotionCombination' });
+// 定义属性
+const props = defineProps<{ property: PromotionCombinationProperty }>();
+// 商品列表
+const spuList = ref<MallSpuApi.Spu[]>([]);
+const spuIdList = ref<number[]>([]);
+const combinationActivityList = ref<
+  MallCombinationActivityApi.CombinationActivity[]
+>([]);
+
+watch(
+  () => props.property.activityIds,
+  async () => {
+    try {
+      // 新添加的拼团组件，是没有活动ID的
+      const activityIds = props.property.activityIds;
+      // 检查活动ID的有效性
+      if (Array.isArray(activityIds) && activityIds.length > 0) {
+        // 获取拼团活动详情列表
+        combinationActivityList.value =
+          await CombinationActivityApi.getCombinationActivityListByIds(
+            activityIds,
+          );
+
+        // 获取拼团活动的 SPU 详情列表
+        spuList.value = [];
+        spuIdList.value = combinationActivityList.value
+          .map((activity) => activity.spuId)
+          .filter((spuId): spuId is number => typeof spuId === 'number');
+        if (spuIdList.value.length > 0) {
+          spuList.value = await ProductSpuApi.getSpuDetailList(spuIdList.value);
+        }
+
+        // 更新 SPU 的最低价格
+        combinationActivityList.value.forEach((activity) => {
+          // 匹配spuId
+          const spu = spuList.value.find((spu) => spu.id === activity.spuId);
+          if (spu) {
+            // 赋值活动价格，哪个最便宜就赋值哪个
+            spu.price = Math.min(
+              activity.combinationPrice || Infinity,
+              spu.price || Infinity,
+            );
+          }
+        });
+      }
+    } catch (error) {
+      console.error('获取拼团活动细节或 SPU 细节时出错:', error);
+    }
+  },
+  {
+    immediate: true,
+    deep: true,
+  },
+);
+
+/**
+ * 计算商品的间距
+ * @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`;
+
+  return { marginLeft, marginTop };
+};
+
+// 容器
+const containerRef = ref();
+// 计算商品的宽度
+const calculateWidth = () => {
+  let width = '100%';
+  // 双列时每列的宽度为：（总宽度 - 间距）/ 2
+  if (props.property.layoutType === 'twoCol') {
+    width = `${(containerRef.value.offsetWidth - props.property.space) / 2}px`;
+  }
+  return { width };
+};
+</script>
+<template>
+  <div
+    class="box-content flex min-h-[30px] w-full flex-row flex-wrap"
+    ref="containerRef"
+  >
+    <div
+      class="relative box-content flex flex-row flex-wrap overflow-hidden bg-white"
+      :style="{
+        ...calculateSpace(index),
+        ...calculateWidth(),
+        borderTopLeftRadius: `${property.borderRadiusTop}px`,
+        borderTopRightRadius: `${property.borderRadiusTop}px`,
+        borderBottomLeftRadius: `${property.borderRadiusBottom}px`,
+        borderBottomRightRadius: `${property.borderRadiusBottom}px`,
+      }"
+      v-for="(spu, index) in spuList"
+      :key="index"
+    >
+      <!-- 角标 -->
+      <div
+        v-if="property.badge.show"
+        class="absolute left-0 top-0 z-[1] items-center justify-center"
+      >
+        <Image
+          fit="cover"
+          :src="property.badge.imgUrl"
+          class="h-[26px] w-[38px]"
+        />
+      </div>
+      <!-- 商品封面图 -->
+      <div
+        class="h-[140px]"
+        :class="[
+          {
+            'w-full': property.layoutType !== 'oneColSmallImg',
+            'w-[140px]': property.layoutType === 'oneColSmallImg',
+          },
+        ]"
+      >
+        <Image fit="cover" class="h-full w-full" :src="spu.picUrl" />
+      </div>
+      <div
+        class="box-border flex flex-col gap-2 p-2"
+        :class="[
+          {
+            'w-full': property.layoutType !== 'oneColSmallImg',
+            'w-[calc(100%-140px-16px)]':
+              property.layoutType === 'oneColSmallImg',
+          },
+        ]"
+      >
+        <!-- 商品名称 -->
+        <div
+          v-if="property.fields.name.show"
+          class="text-[14px]"
+          :class="[
+            {
+              truncate: property.layoutType !== 'oneColSmallImg',
+              'line-clamp-2 overflow-ellipsis':
+                property.layoutType === 'oneColSmallImg',
+            },
+          ]"
+          :style="{ color: property.fields.name.color }"
+        >
+          {{ spu.name }}
+        </div>
+        <!-- 商品简介 -->
+        <div
+          v-if="property.fields.introduction.show"
+          class="truncate text-[12px]"
+          :style="{ color: property.fields.introduction.color }"
+        >
+          {{ spu.introduction }}
+        </div>
+        <div>
+          <!-- 价格 -->
+          <span
+            v-if="property.fields.price.show"
+            class="text-[16px]"
+            :style="{ color: property.fields.price.color }"
+          >
+            ￥{{ fenToYuan(spu.price || Infinity) }}
+          </span>
+          <!-- 市场价 -->
+          <span
+            v-if="property.fields.marketPrice.show && spu.marketPrice"
+            class="ml-[4px] text-[10px] line-through"
+            :style="{ color: property.fields.marketPrice.color }"
+          >
+            ￥{{ fenToYuan(spu.marketPrice) }}
+          </span>
+        </div>
+        <div class="text-[12px]">
+          <!-- 销量 -->
+          <span
+            v-if="property.fields.salesCount.show"
+            :style="{ color: property.fields.salesCount.color }"
+          >
+            已售{{ (spu.salesCount || 0) + (spu.virtualSalesCount || 0) }}件
+          </span>
+          <!-- 库存 -->
+          <span
+            v-if="property.fields.stock.show"
+            :style="{ color: property.fields.stock.color }"
+          >
+            库存{{ spu.stock || 0 }}
+          </span>
+        </div>
+      </div>
+      <!-- 购买按钮 -->
+      <div class="absolute bottom-[8px] right-[8px]">
+        <!-- 文字按钮 -->
+        <span
+          v-if="property.btnBuy.type === 'text'"
+          class="rounded-full px-[12px] py-[4px] text-[12px] text-white"
+          :style="{
+            background: `linear-gradient(to right, ${property.btnBuy.bgBeginColor}, ${property.btnBuy.bgEndColor}`,
+          }"
+        >
+          {{ property.btnBuy.text }}
+        </span>
+        <!-- 图片按钮 -->
+        <Image
+          v-else
+          class="h-[28px] w-[28px] rounded-full"
+          fit="cover"
+          :src="property.btnBuy.imgUrl"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/property.vue
new file mode 100644
index 000000000..37d37a9d1
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/property.vue
@@ -0,0 +1,181 @@
+<script setup lang="ts">
+import type { PromotionCombinationProperty } from './config';
+
+import type { MallCombinationActivityApi } from '#/api/mall/promotion/combination/combinationActivity';
+
+import { onMounted, ref } from 'vue';
+
+import { CommonStatusEnum } from '@vben/constants';
+import { IconifyIcon } from '@vben/icons';
+
+import { useVModel } from '@vueuse/core';
+
+import * as CombinationActivityApi from '#/api/mall/promotion/combination/combinationActivity';
+import UploadImg from '#/components/upload/image-upload.vue';
+import CombinationShowcase from '#/views/mall/promotion/combination/components/combination-showcase.vue';
+import { ColorInput } from '#/views/mall/promotion/components';
+
+// 拼团属性面板
+defineOptions({ name: 'PromotionCombinationProperty' });
+
+const props = defineProps<{ modelValue: PromotionCombinationProperty }>();
+const emit = defineEmits(['update:modelValue']);
+const formData = useVModel(props, 'modelValue', emit);
+// 活动列表
+const activityList = ref<MallCombinationActivityApi.CombinationActivity[]>([]);
+onMounted(async () => {
+  const { list } = await CombinationActivityApi.getCombinationActivityPage({
+    pageNo: 1,
+    pageSize: 10,
+    status: CommonStatusEnum.ENABLE,
+  });
+  activityList.value = list;
+});
+</script>
+
+<template>
+  <ComponentContainerProperty v-model="formData.style">
+    <ElForm label-width="80px" :model="formData">
+      <ElCard header="拼团活动" class="property-group" shadow="never">
+        <CombinationShowcase v-model="formData.activityIds" />
+      </ElCard>
+      <ElCard header="商品样式" class="property-group" shadow="never">
+        <ElFormItem label="布局" prop="type">
+          <ElRadioGroup v-model="formData.layoutType">
+            <ElTooltip class="item" content="单列大图" placement="bottom">
+              <ElRadioButton value="oneColBigImg">
+                <IconifyIcon icon="fluent:text-column-one-24-filled" />
+              </ElRadioButton>
+            </ElTooltip>
+            <ElTooltip class="item" content="单列小图" placement="bottom">
+              <ElRadioButton value="oneColSmallImg">
+                <IconifyIcon icon="fluent:text-column-two-left-24-filled" />
+              </ElRadioButton>
+            </ElTooltip>
+            <ElTooltip class="item" content="双列" placement="bottom">
+              <ElRadioButton value="twoCol">
+                <IconifyIcon icon="fluent:text-column-two-24-filled" />
+              </ElRadioButton>
+            </ElTooltip>
+            <!--<el-tooltip class="item" content="三列" placement="bottom">
+              <el-radio-button value="threeCol">
+                <IconifyIcon icon="fluent:text-column-three-24-filled" />
+              </ElRadioButton>
+            </ElTooltip>-->
+          </ElRadioGroup>
+        </ElFormItem>
+        <ElFormItem label="商品名称" prop="fields.name.show">
+          <div class="flex gap-2">
+            <ColorInput v-model="formData.fields.name.color" />
+            <ElCheckbox v-model="formData.fields.name.show" />
+          </div>
+        </ElFormItem>
+        <ElFormItem label="商品简介" prop="fields.introduction.show">
+          <div class="flex gap-2">
+            <ColorInput v-model="formData.fields.introduction.color" />
+            <ElCheckbox v-model="formData.fields.introduction.show" />
+          </div>
+        </ElFormItem>
+        <ElFormItem label="商品价格" prop="fields.price.show">
+          <div class="flex gap-2">
+            <ColorInput v-model="formData.fields.price.color" />
+            <ElCheckbox v-model="formData.fields.price.show" />
+          </div>
+        </ElFormItem>
+        <ElFormItem label="市场价" prop="fields.marketPrice.show">
+          <div class="flex gap-2">
+            <ColorInput v-model="formData.fields.marketPrice.color" />
+            <ElCheckbox v-model="formData.fields.marketPrice.show" />
+          </div>
+        </ElFormItem>
+        <ElFormItem label="商品销量" prop="fields.salesCount.show">
+          <div class="flex gap-2">
+            <ColorInput v-model="formData.fields.salesCount.color" />
+            <ElCheckbox v-model="formData.fields.salesCount.show" />
+          </div>
+        </ElFormItem>
+        <ElFormItem label="商品库存" prop="fields.stock.show">
+          <div class="flex gap-2">
+            <ColorInput v-model="formData.fields.stock.color" />
+            <ElCheckbox v-model="formData.fields.stock.show" />
+          </div>
+        </ElFormItem>
+      </ElCard>
+      <ElCard header="角标" class="property-group" shadow="never">
+        <ElFormItem label="角标" prop="badge.show">
+          <ElSwitch v-model="formData.badge.show" />
+        </ElFormItem>
+        <ElFormItem label="角标" prop="badge.imgUrl" v-if="formData.badge.show">
+          <UploadImg v-model="formData.badge.imgUrl" height="44px" width="72px">
+            <template #tip> 建议尺寸：36 * 22</template>
+          </UploadImg>
+        </ElFormItem>
+      </ElCard>
+      <ElCard header="按钮" class="property-group" shadow="never">
+        <ElFormItem label="按钮类型" prop="btnBuy.type">
+          <ElRadioGroup v-model="formData.btnBuy.type">
+            <ElRadioButton value="text">文字</ElRadioButton>
+            <ElRadioButton value="img">图片</ElRadioButton>
+          </ElRadioGroup>
+        </ElFormItem>
+        <template v-if="formData.btnBuy.type === 'text'">
+          <ElFormItem label="按钮文字" prop="btnBuy.text">
+            <ElInput v-model="formData.btnBuy.text" />
+          </ElFormItem>
+          <ElFormItem label="左侧背景" prop="btnBuy.bgBeginColor">
+            <ColorInput v-model="formData.btnBuy.bgBeginColor" />
+          </ElFormItem>
+          <ElFormItem label="右侧背景" prop="btnBuy.bgEndColor">
+            <ColorInput v-model="formData.btnBuy.bgEndColor" />
+          </ElFormItem>
+        </template>
+        <template v-else>
+          <ElFormItem label="图片" prop="btnBuy.imgUrl">
+            <UploadImg
+              v-model="formData.btnBuy.imgUrl"
+              height="56px"
+              width="56px"
+              :show-description="false"
+            >
+              <template #tip> 建议尺寸：56 * 56</template>
+            </UploadImg>
+          </ElFormItem>
+        </template>
+      </ElCard>
+      <ElCard header="商品样式" class="property-group" shadow="never">
+        <ElFormItem label="上圆角" prop="borderRadiusTop">
+          <ElSlider
+            v-model="formData.borderRadiusTop"
+            :max="100"
+            :min="0"
+            show-input
+            input-size="small"
+            :show-input-controls="false"
+          />
+        </ElFormItem>
+        <ElFormItem label="下圆角" prop="borderRadiusBottom">
+          <ElSlider
+            v-model="formData.borderRadiusBottom"
+            :max="100"
+            :min="0"
+            show-input
+            input-size="small"
+            :show-input-controls="false"
+          />
+        </ElFormItem>
+        <ElFormItem label="间隔" prop="space">
+          <ElSlider
+            v-model="formData.space"
+            :max="100"
+            :min="0"
+            show-input
+            input-size="small"
+            :show-input-controls="false"
+          />
+        </ElFormItem>
+      </ElCard>
+    </ElForm>
+  </ComponentContainerProperty>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/config.ts
new file mode 100644
index 000000000..bdb5cacc4
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/config.ts
@@ -0,0 +1,99 @@
+import type {
+  ComponentStyle,
+  DiyComponent,
+} from '../../../util';
+
+/** 积分商城属性 */
+export interface PromotionPointProperty {
+  // 布局类型：单列 | 三列
+  layoutType: 'oneColBigImg' | 'oneColSmallImg' | 'twoCol';
+  // 商品字段
+  fields: {
+    // 商品简介
+    introduction: PromotionPointFieldProperty;
+    // 市场价
+    marketPrice: PromotionPointFieldProperty;
+    // 商品名称
+    name: PromotionPointFieldProperty;
+    // 商品价格
+    price: PromotionPointFieldProperty;
+    // 商品销量
+    salesCount: PromotionPointFieldProperty;
+    // 商品库存
+    stock: PromotionPointFieldProperty;
+  };
+  // 角标
+  badge: {
+    // 角标图片
+    imgUrl: string;
+    // 是否显示
+    show: boolean;
+  };
+  // 按钮
+  btnBuy: {
+    // 文字按钮：背景渐变起始颜色
+    bgBeginColor: string;
+    // 文字按钮：背景渐变结束颜色
+    bgEndColor: string;
+    // 图片按钮：图片地址
+    imgUrl: string;
+    // 文字
+    text: string;
+    // 类型：文字 | 图片
+    type: 'img' | 'text';
+  };
+  // 上圆角
+  borderRadiusTop: number;
+  // 下圆角
+  borderRadiusBottom: number;
+  // 间距
+  space: number;
+  // 秒杀活动编号
+  activityIds: number[];
+  // 组件样式
+  style: ComponentStyle;
+}
+
+// 商品字段
+export interface PromotionPointFieldProperty {
+  // 是否显示
+  show: boolean;
+  // 颜色
+  color: string;
+}
+
+// 定义组件
+export const component = {
+  id: 'PromotionPoint',
+  name: '积分商城',
+  icon: 'ep:present',
+  property: {
+    layoutType: 'oneColBigImg',
+    fields: {
+      name: { show: true, color: '#000' },
+      introduction: { show: true, color: '#999' },
+      price: { show: true, color: '#ff3000' },
+      marketPrice: { show: true, color: '#c4c4c4' },
+      salesCount: { show: true, color: '#c4c4c4' },
+      stock: { show: false, color: '#c4c4c4' },
+    },
+    badge: { show: false, imgUrl: '' },
+    btnBuy: {
+      type: 'text',
+      text: '立即兑换',
+      bgBeginColor: '#FF6000',
+      bgEndColor: '#FE832A',
+      imgUrl: '',
+    },
+    borderRadiusTop: 8,
+    borderRadiusBottom: 8,
+    space: 8,
+    style: {
+      bgType: 'color',
+      bgColor: '',
+      marginLeft: 8,
+      marginRight: 8,
+      marginBottom: 8,
+    } as ComponentStyle,
+  },
+} as DiyComponent<PromotionPointProperty>;
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/index.vue
new file mode 100644
index 000000000..83301ff7b
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/index.vue
@@ -0,0 +1,233 @@
+<script lang="ts" setup>
+import type { PromotionPointProperty } from './config';
+
+import type { MallPointActivityApi } from '#/api/mall/promotion/point';
+
+import { ref, watch } from 'vue';
+
+import { fenToYuan } from '@vben/utils';
+
+
+import * as ProductSpuApi from '#/api/mall/product/spu';
+import * as PointActivityApi from '#/api/mall/promotion/point';
+
+/** 积分商城卡片 */
+defineOptions({ name: 'PromotionPoint' });
+// 定义属性
+const props = defineProps<{ property: PromotionPointProperty }>();
+// 商品列表
+const spuList = ref<MallPointActivityApi.SpuExtensionWithPoint[]>([]);
+const spuIdList = ref<number[]>([]);
+const pointActivityList = ref<MallPointActivityApi.PointActivity[]>([]);
+
+watch(
+  () => props.property.activityIds,
+  async () => {
+    try {
+      // 新添加的积分商城组件，是没有活动ID的
+      const activityIds = props.property.activityIds;
+      // 检查活动ID的有效性
+      if (Array.isArray(activityIds) && activityIds.length > 0) {
+        // 获取积分商城活动详情列表
+        pointActivityList.value =
+          await PointActivityApi.getPointActivityListByIds(activityIds);
+
+        // 获取积分商城活动的 SPU 详情列表
+        spuList.value = [];
+        spuIdList.value = pointActivityList.value.map(
+          (activity) => activity.spuId,
+        );
+        if (spuIdList.value.length > 0) {
+          spuList.value = (await ProductSpuApi.getSpuDetailList(
+            spuIdList.value,
+          )) as MallPointActivityApi.SpuExtensionWithPoint[];
+        }
+
+        // 更新 SPU 的最低兑换积分和所需兑换金额
+        pointActivityList.value.forEach((activity) => {
+          // 匹配spuId
+          const spu = spuList.value.find((spu) => spu.id === activity.spuId);
+          if (spu) {
+            spu.pointStock = activity.stock;
+            spu.pointTotalStock = activity.totalStock;
+            spu.point = activity.point;
+            spu.pointPrice = activity.price;
+          }
+        });
+      }
+    } catch (error) {
+      console.error('获取积分商城活动细节或 SPU 细节时出错:', error);
+    }
+  },
+  {
+    immediate: true,
+    deep: true,
+  },
+);
+
+/**
+ * 计算商品的间距
+ * @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`;
+
+  return { marginLeft, marginTop };
+};
+
+// 容器
+const containerRef = ref();
+// 计算商品的宽度
+const calculateWidth = () => {
+  let width = '100%';
+  // 双列时每列的宽度为：（总宽度 - 间距）/ 2
+  if (props.property.layoutType === 'twoCol') {
+    width = `${(containerRef.value.offsetWidth - props.property.space) / 2}px`;
+  }
+  return { width };
+};
+</script>
+<template>
+  <div
+    ref="containerRef"
+    class="box-content flex min-h-[30px] w-full flex-row flex-wrap"
+  >
+    <div
+      v-for="(spu, index) in spuList"
+      :key="index"
+      :style="{
+        ...calculateSpace(index),
+        ...calculateWidth(),
+        borderTopLeftRadius: `${property.borderRadiusTop}px`,
+        borderTopRightRadius: `${property.borderRadiusTop}px`,
+        borderBottomLeftRadius: `${property.borderRadiusBottom}px`,
+        borderBottomRightRadius: `${property.borderRadiusBottom}px`,
+      }"
+      class="relative box-content flex flex-row flex-wrap overflow-hidden bg-white"
+    >
+      <!-- 角标 -->
+      <div
+        v-if="property.badge.show"
+        class="absolute left-0 top-0 z-[1] items-center justify-center"
+      >
+        <Image
+          :src="property.badge.imgUrl"
+          class="h-[26px] w-[38px]"
+          fit="cover"
+        />
+      </div>
+      <!-- 商品封面图 -->
+      <div
+        class="h-[140px]"
+        :class="[
+          {
+            'w-full': property.layoutType !== 'oneColSmallImg',
+            'w-[140px]': property.layoutType === 'oneColSmallImg',
+          },
+        ]"
+      >
+        <Image :src="spu.picUrl" class="h-full w-full" fit="cover" />
+      </div>
+      <div
+        class="box-border flex flex-col gap-2 p-2"
+        :class="[
+          {
+            'w-full': property.layoutType !== 'oneColSmallImg',
+            'w-[calc(100%-140px-16px)]':
+              property.layoutType === 'oneColSmallImg',
+          },
+        ]"
+      >
+        <!-- 商品名称 -->
+        <div
+          v-if="property.fields.name.show"
+          class="text-[14px]"
+          :class="[
+            {
+              truncate: property.layoutType !== 'oneColSmallImg',
+              'line-clamp-2 overflow-ellipsis':
+                property.layoutType === 'oneColSmallImg',
+            },
+          ]"
+          :style="{ color: property.fields.name.color }"
+        >
+          {{ spu.name }}
+        </div>
+        <!-- 商品简介 -->
+        <div
+          v-if="property.fields.introduction.show"
+          :style="{ color: property.fields.introduction.color }"
+          class="truncate text-[12px]"
+        >
+          {{ spu.introduction }}
+        </div>
+        <div>
+          <!-- 积分 -->
+          <span
+            v-if="property.fields.price.show"
+            :style="{ color: property.fields.price.color }"
+            class="text-[16px]"
+          >
+            {{ spu.point }}积分
+            {{
+              !spu.pointPrice || spu.pointPrice === 0
+                ? ''
+                : `+${fenToYuan(spu.pointPrice)}元`
+            }}
+          </span>
+          <!-- 市场价 -->
+          <span
+            v-if="property.fields.marketPrice.show && spu.marketPrice"
+            :style="{ color: property.fields.marketPrice.color }"
+            class="ml-[4px] text-[10px] line-through"
+          >
+            ￥{{ fenToYuan(spu.marketPrice) }}
+          </span>
+        </div>
+        <div class="text-[12px]">
+          <!-- 销量 -->
+          <span
+            v-if="property.fields.salesCount.show"
+            :style="{ color: property.fields.salesCount.color }"
+          >
+            已兑{{ (spu.pointTotalStock || 0) - (spu.pointStock || 0) }}件
+          </span>
+          <!-- 库存 -->
+          <span
+            v-if="property.fields.stock.show"
+            :style="{ color: property.fields.stock.color }"
+          >
+            库存{{ spu.pointTotalStock || 0 }}
+          </span>
+        </div>
+      </div>
+      <!-- 购买按钮 -->
+      <div class="absolute bottom-[8px] right-[8px]">
+        <!-- 文字按钮 -->
+        <span
+          v-if="property.btnBuy.type === 'text'"
+          :style="{
+            background: `linear-gradient(to right, ${property.btnBuy.bgBeginColor}, ${property.btnBuy.bgEndColor}`,
+          }"
+          class="rounded-full px-[12px] py-[4px] text-[12px] text-white"
+        >
+          {{ property.btnBuy.text }}
+        </span>
+        <!-- 图片按钮 -->
+        <Image
+          v-else
+          :src="property.btnBuy.imgUrl"
+          class="h-[28px] w-[28px] rounded-full"
+          fit="cover"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/property.vue
new file mode 100644
index 000000000..ea798e3dd
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/property.vue
@@ -0,0 +1,6 @@
+<script lang="ts" setup>
+import type { PromotionPointProperty } from './config';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { useVModel } from '@vueuse/core';
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-seckill/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-seckill/config.ts
new file mode 100644
index 000000000..289fc4e80
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-seckill/config.ts
@@ -0,0 +1,99 @@
+import type {
+  ComponentStyle,
+  DiyComponent,
+} from '../../../util';
+
+/** 秒杀属性 */
+export interface PromotionSeckillProperty {
+  // 布局类型：单列 | 三列
+  layoutType: 'oneColBigImg' | 'oneColSmallImg' | 'twoCol';
+  // 商品字段
+  fields: {
+    // 商品简介
+    introduction: PromotionSeckillFieldProperty;
+    // 市场价
+    marketPrice: PromotionSeckillFieldProperty;
+    // 商品名称
+    name: PromotionSeckillFieldProperty;
+    // 商品价格
+    price: PromotionSeckillFieldProperty;
+    // 商品销量
+    salesCount: PromotionSeckillFieldProperty;
+    // 商品库存
+    stock: PromotionSeckillFieldProperty;
+  };
+  // 角标
+  badge: {
+    // 角标图片
+    imgUrl: string;
+    // 是否显示
+    show: boolean;
+  };
+  // 按钮
+  btnBuy: {
+    // 文字按钮：背景渐变起始颜色
+    bgBeginColor: string;
+    // 文字按钮：背景渐变结束颜色
+    bgEndColor: string;
+    // 图片按钮：图片地址
+    imgUrl: string;
+    // 文字
+    text: string;
+    // 类型：文字 | 图片
+    type: 'img' | 'text';
+  };
+  // 上圆角
+  borderRadiusTop: number;
+  // 下圆角
+  borderRadiusBottom: number;
+  // 间距
+  space: number;
+  // 秒杀活动编号
+  activityIds: number[];
+  // 组件样式
+  style: ComponentStyle;
+}
+
+// 商品字段
+export interface PromotionSeckillFieldProperty {
+  // 是否显示
+  show: boolean;
+  // 颜色
+  color: string;
+}
+
+// 定义组件
+export const component = {
+  id: 'PromotionSeckill',
+  name: '秒杀',
+  icon: 'mdi:calendar-time',
+  property: {
+    layoutType: 'oneColBigImg',
+    fields: {
+      name: { show: true, color: '#000' },
+      introduction: { show: true, color: '#999' },
+      price: { show: true, color: '#ff3000' },
+      marketPrice: { show: true, color: '#c4c4c4' },
+      salesCount: { show: true, color: '#c4c4c4' },
+      stock: { show: false, color: '#c4c4c4' },
+    },
+    badge: { show: false, imgUrl: '' },
+    btnBuy: {
+      type: 'text',
+      text: '立即秒杀',
+      bgBeginColor: '#FF6000',
+      bgEndColor: '#FE832A',
+      imgUrl: '',
+    },
+    borderRadiusTop: 8,
+    borderRadiusBottom: 8,
+    space: 8,
+    style: {
+      bgType: 'color',
+      bgColor: '',
+      marginLeft: 8,
+      marginRight: 8,
+      marginBottom: 8,
+    } as ComponentStyle,
+  },
+} as DiyComponent<PromotionSeckillProperty>;
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-seckill/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-seckill/index.vue
new file mode 100644
index 000000000..efc9ead79
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-seckill/index.vue
@@ -0,0 +1,228 @@
+<script setup lang="ts">
+import type { PromotionSeckillProperty } from './config';
+
+import type { MallSpuApi } from '#/api/mall/product/spu';
+import type { MallSeckillActivityApi } from '#/api/mall/promotion/seckill/seckillActivity';
+
+import { ref, watch } from 'vue';
+
+import { fenToYuan } from '@vben/utils';
+
+
+import * as ProductSpuApi from '#/api/mall/product/spu';
+import * as SeckillActivityApi from '#/api/mall/promotion/seckill/seckillActivity';
+
+/** 秒杀卡片 */
+defineOptions({ name: 'PromotionSeckill' });
+// 定义属性
+const props = defineProps<{ property: PromotionSeckillProperty }>();
+// 商品列表
+const spuList = ref<MallSpuApi.Spu[]>([]);
+const spuIdList = ref<number[]>([]);
+const seckillActivityList = ref<MallSeckillActivityApi.SeckillActivity[]>([]);
+
+watch(
+  () => props.property.activityIds,
+  async () => {
+    try {
+      // 新添加的秒杀组件，是没有活动ID的
+      const activityIds = props.property.activityIds;
+      // 检查活动ID的有效性
+      if (Array.isArray(activityIds) && activityIds.length > 0) {
+        // 获取秒杀活动详情列表
+        seckillActivityList.value =
+          await SeckillActivityApi.getSeckillActivityListByIds(activityIds);
+
+        // 获取秒杀活动的 SPU 详情列表
+        spuList.value = [];
+        spuIdList.value = seckillActivityList.value
+          .map((activity) => activity.spuId)
+          .filter((spuId): spuId is number => typeof spuId === 'number');
+        if (spuIdList.value.length > 0) {
+          spuList.value = await ProductSpuApi.getSpuDetailList(spuIdList.value);
+        }
+
+        // 更新 SPU 的最低价格
+        seckillActivityList.value.forEach((activity) => {
+          // 匹配spuId
+          const spu = spuList.value.find((spu) => spu.id === activity.spuId);
+          if (spu) {
+            // 赋值活动价格，哪个最便宜就赋值哪个
+            spu.price = Math.min(
+              activity.seckillPrice || Infinity,
+              spu.price || Infinity,
+            );
+          }
+        });
+      }
+    } catch (error) {
+      console.error('获取秒杀活动细节或 SPU 细节时出错:', error);
+    }
+  },
+  {
+    immediate: true,
+    deep: true,
+  },
+);
+
+/**
+ * 计算商品的间距
+ * @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`;
+
+  return { marginLeft, marginTop };
+};
+
+// 容器
+const containerRef = ref();
+// 计算商品的宽度
+const calculateWidth = () => {
+  let width = '100%';
+  // 双列时每列的宽度为：（总宽度 - 间距）/ 2
+  if (props.property.layoutType === 'twoCol') {
+    width = `${(containerRef.value.offsetWidth - props.property.space) / 2}px`;
+  }
+  return { width };
+};
+</script>
+<template>
+  <div
+    class="box-content flex min-h-[30px] w-full flex-row flex-wrap"
+    ref="containerRef"
+  >
+    <div
+      class="relative box-content flex flex-row flex-wrap overflow-hidden bg-white"
+      :style="{
+        ...calculateSpace(index),
+        ...calculateWidth(),
+        borderTopLeftRadius: `${property.borderRadiusTop}px`,
+        borderTopRightRadius: `${property.borderRadiusTop}px`,
+        borderBottomLeftRadius: `${property.borderRadiusBottom}px`,
+        borderBottomRightRadius: `${property.borderRadiusBottom}px`,
+      }"
+      v-for="(spu, index) in spuList"
+      :key="index"
+    >
+      <!-- 角标 -->
+      <div
+        v-if="property.badge.show"
+        class="absolute left-0 top-0 z-[1] items-center justify-center"
+      >
+        <Image
+          fit="cover"
+          :src="property.badge.imgUrl"
+          class="h-[26px] w-[38px]"
+        />
+      </div>
+      <!-- 商品封面图 -->
+      <div
+        class="h-[140px]"
+        :class="[
+          {
+            'w-full': property.layoutType !== 'oneColSmallImg',
+            'w-[140px]': property.layoutType === 'oneColSmallImg',
+          },
+        ]"
+      >
+        <Image fit="cover" class="h-full w-full" :src="spu.picUrl" />
+      </div>
+      <div
+        class="box-border flex flex-col gap-2 p-2"
+        :class="[
+          {
+            'w-full': property.layoutType !== 'oneColSmallImg',
+            'w-[calc(100%-140px-16px)]':
+              property.layoutType === 'oneColSmallImg',
+          },
+        ]"
+      >
+        <!-- 商品名称 -->
+        <div
+          v-if="property.fields.name.show"
+          class="text-sm"
+          :class="[
+            {
+              truncate: property.layoutType !== 'oneColSmallImg',
+              'line-clamp-2 overflow-ellipsis':
+                property.layoutType === 'oneColSmallImg',
+            },
+          ]"
+          :style="{ color: property.fields.name.color }"
+        >
+          {{ spu.name }}
+        </div>
+        <!-- 商品简介 -->
+        <div
+          v-if="property.fields.introduction.show"
+          class="truncate text-xs"
+          :style="{ color: property.fields.introduction.color }"
+        >
+          {{ spu.introduction }}
+        </div>
+        <div>
+          <!-- 价格 -->
+          <span
+            v-if="property.fields.price.show"
+            class="text-base"
+            :style="{ color: property.fields.price.color }"
+          >
+            ￥{{ fenToYuan(spu.price || Infinity) }}
+          </span>
+          <!-- 市场价 -->
+          <span
+            v-if="property.fields.marketPrice.show && spu.marketPrice"
+            class="ml-1 text-[10px] line-through"
+            :style="{ color: property.fields.marketPrice.color }"
+          >
+            ￥{{ fenToYuan(spu.marketPrice) }}
+          </span>
+        </div>
+        <div class="text-xs">
+          <!-- 销量 -->
+          <span
+            v-if="property.fields.salesCount.show"
+            :style="{ color: property.fields.salesCount.color }"
+          >
+            已售{{ (spu.salesCount || 0) + (spu.virtualSalesCount || 0) }}件
+          </span>
+          <!-- 库存 -->
+          <span
+            v-if="property.fields.stock.show"
+            :style="{ color: property.fields.stock.color }"
+          >
+            库存{{ spu.stock || 0 }}
+          </span>
+        </div>
+      </div>
+      <!-- 购买按钮 -->
+      <div class="absolute bottom-2 right-2">
+        <!-- 文字按钮 -->
+        <span
+          v-if="property.btnBuy.type === 'text'"
+          class="rounded-full px-3 py-1 text-xs text-white"
+          :style="{
+            background: `linear-gradient(to right, ${property.btnBuy.bgBeginColor}, ${property.btnBuy.bgEndColor}`,
+          }"
+        >
+          {{ property.btnBuy.text }}
+        </span>
+        <!-- 图片按钮 -->
+        <Image
+          v-else
+          class="h-7 w-7 rounded-full"
+          fit="cover"
+          :src="property.btnBuy.imgUrl"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-seckill/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-seckill/property.vue
new file mode 100644
index 000000000..459744bf1
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-seckill/property.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import type { PromotionSeckillProperty } from './config';
+
+import type { MallSeckillActivityApi } from '#/api/mall/promotion/seckill/seckillActivity';
+
+import { onMounted, ref } from 'vue';
+
+import { CommonStatusEnum } from '@vben/constants';
+import { IconifyIcon } from '@vben/icons';
+
+import { useVModel } from '@vueuse/core';
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/config.ts
new file mode 100644
index 000000000..d30952a02
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/config.ts
@@ -0,0 +1,46 @@
+import type {
+  ComponentStyle,
+  DiyComponent,
+} from '../../../util';
+
+/** 搜索框属性 */
+export interface SearchProperty {
+  height: number; // 搜索栏高度
+  showScan: boolean; // 显示扫一扫
+  borderRadius: number; // 框体样式
+  placeholder: string; // 占位文字
+  placeholderPosition: PlaceholderPosition; // 占位文字位置
+  backgroundColor: string; // 框体颜色
+  textColor: string; // 字体颜色
+  hotKeywords: string[]; // 热词
+  style: ComponentStyle;
+}
+
+// 文字位置
+export type PlaceholderPosition = 'center' | 'left';
+
+// 定义组件
+export const component = {
+  id: 'SearchBar',
+  name: '搜索框',
+  icon: 'ep:search',
+  property: {
+    height: 28,
+    showScan: false,
+    borderRadius: 0,
+    placeholder: '搜索商品',
+    placeholderPosition: 'left',
+    backgroundColor: 'rgb(238, 238, 238)',
+    textColor: 'rgb(150, 151, 153)',
+    hotKeywords: [],
+    style: {
+      bgType: 'color',
+      bgColor: '#fff',
+      marginBottom: 8,
+      paddingTop: 8,
+      paddingRight: 8,
+      paddingBottom: 8,
+      paddingLeft: 8,
+    } as ComponentStyle,
+  },
+} as DiyComponent<SearchProperty>;
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/index.vue
new file mode 100644
index 000000000..e7c770304
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/index.vue
@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import type { SearchProperty } from './config';
+
+import { IconifyIcon } from '@vben/icons';
+
+/** 搜索框 */
+defineOptions({ name: 'SearchBar' });
+defineProps<{ property: SearchProperty }>();
+</script>
+
+<template>
+  <div
+    class="search-bar"
+    :style="{
+      color: property.textColor,
+    }"
+  >
+    <!-- 搜索框 -->
+    <div
+      class="inner"
+      :style="{
+        height: `${property.height}px`,
+        background: property.backgroundColor,
+        borderRadius: `${property.borderRadius}px`,
+      }"
+    >
+      <div
+        class="placeholder"
+        :style="{
+          justifyContent: property.placeholderPosition,
+        }"
+      >
+        <IconifyIcon icon="ep:search" />
+        <span>{{ property.placeholder || '搜索商品' }}</span>
+      </div>
+      <div class="right">
+        <!-- 搜索热词 -->
+        <span v-for="(keyword, index) in property.hotKeywords" :key="index">{{
+          keyword
+        }}</span>
+        <!-- 扫一扫 -->
+        <IconifyIcon
+          icon="ant-design:scan-outlined"
+          v-show="property.showScan"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.search-bar {
+  /* 搜索框 */
+  .inner {
+    position: relative;
+    display: flex;
+    align-items: center;
+    min-height: 28px;
+    font-size: 14px;
+
+    .placeholder {
+      display: flex;
+      gap: 2px;
+      align-items: center;
+      width: 100%;
+      padding: 0 8px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      word-break: break-all;
+      white-space: nowrap;
+    }
+
+    .right {
+      position: absolute;
+      right: 8px;
+      display: flex;
+      gap: 8px;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+}
+</style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/property.vue
new file mode 100644
index 000000000..e978ebc36
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/property.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import type { SearchProperty } from './config';
+
+import { watch } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+import { isString } from '@vben/utils';
+
+import { useVModel } from '@vueuse/core';
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/config.ts
new file mode 100644
index 000000000..0404f3647
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/config.ts
@@ -0,0 +1,172 @@
+import type { DiyComponent } from '../../../util';
+
+/** 底部导航菜单属性 */
+export interface TabBarProperty {
+  // 选项列表
+  items: TabBarItemProperty[];
+  // 主题
+  theme: string;
+  // 样式
+  style: TabBarStyle;
+}
+
+// 选项属性
+export interface TabBarItemProperty {
+  // 标签文字
+  text: string;
+  // 链接
+  url: string;
+  // 默认图标链接
+  iconUrl: string;
+  // 选中的图标链接
+  activeIconUrl: string;
+}
+
+// 样式
+export interface TabBarStyle {
+  // 背景类型
+  bgType: 'color' | 'img';
+  // 背景颜色
+  bgColor: string;
+  // 图片链接
+  bgImg: string;
+  // 默认颜色
+  color: string;
+  // 选中的颜色
+  activeColor: string;
+}
+
+// 定义组件
+export const component = {
+  id: 'TabBar',
+  name: '底部导航',
+  icon: 'fluent:table-bottom-row-16-filled',
+  property: {
+    theme: 'red',
+    style: {
+      bgType: 'color',
+      bgColor: '#fff',
+      color: '#282828',
+      activeColor: '#fc4141',
+    },
+    items: [
+      {
+        text: '首页',
+        url: '/pages/index/index',
+        iconUrl: 'http://mall.yudao.iocoder.cn/static/images/1-001.png',
+        activeIconUrl: 'http://mall.yudao.iocoder.cn/static/images/1-002.png',
+      },
+      {
+        text: '分类',
+        url: '/pages/index/category?id=3',
+        iconUrl: 'http://mall.yudao.iocoder.cn/static/images/2-001.png',
+        activeIconUrl: 'http://mall.yudao.iocoder.cn/static/images/2-002.png',
+      },
+      {
+        text: '购物车',
+        url: '/pages/index/cart',
+        iconUrl: 'http://mall.yudao.iocoder.cn/static/images/3-001.png',
+        activeIconUrl: 'http://mall.yudao.iocoder.cn/static/images/3-002.png',
+      },
+      {
+        text: '我的',
+        url: '/pages/index/user',
+        iconUrl: 'http://mall.yudao.iocoder.cn/static/images/4-001.png',
+        activeIconUrl: 'http://mall.yudao.iocoder.cn/static/images/4-002.png',
+      },
+    ],
+  },
+} as DiyComponent<TabBarProperty>;
+
+export const THEME_LIST = [
+  {
+    id: 'red',
+    name: '中国红',
+    icon: 'icon-park-twotone:theme',
+    color: '#d10019',
+  },
+  {
+    id: 'orange',
+    name: '桔橙',
+    icon: 'icon-park-twotone:theme',
+    color: '#f37b1d',
+  },
+  {
+    id: 'gold',
+    name: '明黄',
+    icon: 'icon-park-twotone:theme',
+    color: '#fbbd08',
+  },
+  {
+    id: 'green',
+    name: '橄榄绿',
+    icon: 'icon-park-twotone:theme',
+    color: '#8dc63f',
+  },
+  {
+    id: 'cyan',
+    name: '天青',
+    icon: 'icon-park-twotone:theme',
+    color: '#1cbbb4',
+  },
+  {
+    id: 'blue',
+    name: '海蓝',
+    icon: 'icon-park-twotone:theme',
+    color: '#0081ff',
+  },
+  {
+    id: 'purple',
+    name: '姹紫',
+    icon: 'icon-park-twotone:theme',
+    color: '#6739b6',
+  },
+  {
+    id: 'brightRed',
+    name: '嫣红',
+    icon: 'icon-park-twotone:theme',
+    color: '#e54d42',
+  },
+  {
+    id: 'forestGreen',
+    name: '森绿',
+    icon: 'icon-park-twotone:theme',
+    color: '#39b54a',
+  },
+  {
+    id: 'mauve',
+    name: '木槿',
+    icon: 'icon-park-twotone:theme',
+    color: '#9c26b0',
+  },
+  {
+    id: 'pink',
+    name: '桃粉',
+    icon: 'icon-park-twotone:theme',
+    color: '#e03997',
+  },
+  {
+    id: 'brown',
+    name: '棕褐',
+    icon: 'icon-park-twotone:theme',
+    color: '#a5673f',
+  },
+  {
+    id: 'grey',
+    name: '玄灰',
+    icon: 'icon-park-twotone:theme',
+    color: '#8799a3',
+  },
+  {
+    id: 'gray',
+    name: '草灰',
+    icon: 'icon-park-twotone:theme',
+    color: '#aaaaaa',
+  },
+  {
+    id: 'black',
+    name: '墨黑',
+    icon: 'icon-park-twotone:theme',
+    color: '#333333',
+  },
+];
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/index.vue
new file mode 100644
index 000000000..8a0d1d17c
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/index.vue
@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import type { TabBarProperty } from './config';
+
+import { IconifyIcon } from '@vben/icons';
+
+
+
+/** 页面底部导航栏 */
+defineOptions({ name: 'TabBar' });
+
+defineProps<{ property: TabBarProperty }>();
+</script>
+<template>
+  <div class="tab-bar">
+    <div
+      class="tab-bar-bg"
+      :style="{
+        background:
+          property.style.bgType === 'color'
+            ? property.style.bgColor
+            : `url(${property.style.bgImg})`,
+        backgroundSize: '100% 100%',
+        backgroundRepeat: 'no-repeat',
+      }"
+    >
+      <div
+        v-for="(item, index) in property.items"
+        :key="index"
+        class="tab-bar-item"
+      >
+        <Image :src="index === 0 ? item.activeIconUrl : item.iconUrl">
+          <template #error>
+            <div class="flex h-full w-full items-center justify-center">
+              <IconifyIcon icon="ep:picture" />
+            </div>
+          </template>
+        </Image>
+        <span
+          :style="{
+            color:
+              index === 0 ? property.style.activeColor : property.style.color,
+          }"
+        >
+          {{ item.text }}
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+<style lang="scss" scoped>
+.tab-bar {
+  z-index: 2;
+  width: 100%;
+
+  .tab-bar-bg {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+    padding: 8px 0;
+
+    .tab-bar-item {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      font-size: 12px;
+
+      :deep(img),
+      .el-icon {
+        width: 26px;
+        height: 26px;
+        border-radius: 4px;
+      }
+    }
+  }
+}
+</style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/property.vue
new file mode 100644
index 000000000..13040b873
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/property.vue
@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import type { TabBarProperty } from './config';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { useVModel } from '@vueuse/core';
+
+import UploadImg from '#/components/upload/image-upload.vue';
+import {
+  AppLinkInput,
+  ColorInput,
+  Draggable,
+} from '#/views/mall/promotion/components';
+
+import { component, THEME_LIST } from './config';
+// 底部导航栏
+defineOptions({ name: 'TabBarProperty' });
+
+const props = defineProps<{ modelValue: TabBarProperty }>();
+const emit = defineEmits(['update:modelValue']);
+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) {
+    formData.value.style.activeColor = theme.color;
+  }
+};
+</script>
+
+<template>
+  <div class="tab-bar">
+    <!-- 表单 -->
+    <Form :model="formData" labelCol="{ span: 6 }" wrapperCol="{ span: 18 }">
+      <FormItem label="主题" name="theme">
+        <Select v-model:value="formData!.theme" @change="handleThemeChange">
+          <SelectOption
+            v-for="(theme, index) in THEME_LIST"
+            :key="index"
+            :label="theme.name"
+            :value="theme.id"
+          >
+            <div class="flex items-center justify-between">
+              <IconifyIcon :icon="theme.icon" :color="theme.color" />
+              <span>{{ theme.name }}</span>
+            </div>
+          </SelectOption>
+        </Select>
+      </FormItem>
+      <FormItem label="默认颜色">
+        <ColorInput v-model="formData!.style.color" />
+      </FormItem>
+      <FormItem label="选中颜色">
+        <ColorInput v-model="formData!.style.activeColor" />
+      </FormItem>
+      <FormItem label="导航背景">
+        <RadioGroup v-model:value="formData!.style.bgType">
+          <RadioButton value="color">纯色</RadioButton>
+          <RadioButton value="img">图片</RadioButton>
+        </RadioGroup>
+      </FormItem>
+      <FormItem label="选择颜色" v-if="formData!.style.bgType === 'color'">
+        <ColorInput v-model="formData!.style.bgColor" />
+      </FormItem>
+      <FormItem label="选择图片" v-if="formData!.style.bgType === 'img'">
+        <UploadImg
+          v-model="formData!.style.bgImg"
+          width="100%"
+          height="50px"
+          class="min-w-[200px]"
+          :show-description="false"
+        >
+          <template #tip> 建议尺寸 375 * 50 </template>
+        </UploadImg>
+      </FormItem>
+
+      <div class="text-base mb-2">图标设置</div>
+      <div class="text-xs text-gray-500 mb-2">
+        拖动左上角的小圆点可对其排序, 图标建议尺寸 44*44
+      </div>
+      <Draggable v-model="formData.items" :limit="5">
+        <template #default="{ element }">
+          <div class="mb-2 flex items-center justify-around">
+            <div class="flex flex-col items-center justify-between">
+              <UploadImg
+                v-model="element.iconUrl"
+                width="40px"
+                height="40px"
+                :show-delete="false"
+                :show-description="false"
+              />
+              <div class="text-xs">未选中</div>
+            </div>
+            <div>
+              <UploadImg
+                v-model="element.activeIconUrl"
+                width="40px"
+                height="40px"
+                :show-delete="false"
+                :show-description="false"
+              />
+              <div class="text-xs">已选中</div>
+            </div>
+          </div>
+          <FormItem name="text" label="文字" labelCol="{ span: 4 }" wrapperCol="{ span: 20 }" class="mb-2">
+            <Input v-model:value="element.text" placeholder="请输入文字" />
+          </FormItem>
+          <FormItem name="url" label="链接" labelCol="{ span: 4 }" wrapperCol="{ span: 20 }" class="mb-0">
+            <AppLinkInput v-model="element.url" />
+          </FormItem>
+        </template>
+      </Draggable>
+    </Form>
+  </div>
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/config.ts
new file mode 100644
index 000000000..71a61cef8
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/config.ts
@@ -0,0 +1,76 @@
+import type {
+  ComponentStyle,
+  DiyComponent,
+} from '../../../util';
+
+/** 标题栏属性 */
+export interface TitleBarProperty {
+  // 背景图
+  bgImgUrl: string;
+  // 偏移
+  marginLeft: number;
+  // 显示位置
+  textAlign: 'center' | 'left';
+  // 主标题
+  title: string;
+  // 副标题
+  description: string;
+  // 标题大小
+  titleSize: number;
+  // 描述大小
+  descriptionSize: number;
+  // 标题粗细
+  titleWeight: number;
+  // 描述粗细
+  descriptionWeight: number;
+  // 标题颜色
+  titleColor: string;
+  // 描述颜色
+  descriptionColor: string;
+  // 高度
+  height: number;
+  // 查看更多
+  more: {
+    // 是否显示查看更多
+    show: false;
+    // 自定义文字
+    text: string;
+    // 样式选择
+    type: 'all' | 'icon' | 'text';
+    // 链接
+    url: string;
+  };
+  // 组件样式
+  style: ComponentStyle;
+}
+
+// 定义组件
+export const component = {
+  id: 'TitleBar',
+  name: '标题栏',
+  icon: 'material-symbols:line-start',
+  property: {
+    title: '主标题',
+    description: '副标题',
+    titleSize: 16,
+    descriptionSize: 12,
+    titleWeight: 400,
+    textAlign: 'left',
+    descriptionWeight: 200,
+    titleColor: 'rgba(50, 50, 51, 10)',
+    descriptionColor: 'rgba(150, 151, 153, 10)',
+    marginLeft: 0,
+    height: 40,
+    more: {
+      // 查看更多
+      show: false,
+      type: 'icon',
+      text: '查看更多',
+      url: '',
+    },
+    style: {
+      bgType: 'color',
+      bgColor: '#fff',
+    } as ComponentStyle,
+  },
+} as DiyComponent<TitleBarProperty>;
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/index.vue
new file mode 100644
index 000000000..89113d098
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/index.vue
@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import type { TitleBarProperty } from './config';
+
+import { IconifyIcon } from '@vben/icons';
+
+
+/** 标题栏 */
+defineOptions({ name: 'TitleBar' });
+
+defineProps<{ property: TitleBarProperty }>();
+</script>
+<template>
+  <div class="title-bar" :style="{ height: `${property.height}px` }">
+    <Image
+      v-if="property.bgImgUrl"
+      :src="property.bgImgUrl"
+      fit="cover"
+      class="w-full"
+    />
+    <div
+      class="absolute left-0 top-0 flex h-full w-full flex-col justify-center"
+    >
+      <!-- 标题 -->
+      <div
+        :style="{
+          fontSize: `${property.titleSize}px`,
+          fontWeight: property.titleWeight,
+          color: property.titleColor,
+          textAlign: property.textAlign,
+          marginLeft: `${property.marginLeft}px`,
+          marginBottom: '4px',
+        }"
+        v-if="property.title"
+      >
+        {{ property.title }}
+      </div>
+      <!-- 副标题 -->
+      <div
+        :style="{
+          fontSize: `${property.descriptionSize}px`,
+          fontWeight: property.descriptionWeight,
+          color: property.descriptionColor,
+          textAlign: property.textAlign,
+          marginLeft: `${property.marginLeft}px`,
+        }"
+        v-if="property.description"
+      >
+        {{ property.description }}
+      </div>
+    </div>
+    <!-- 更多 -->
+    <div
+      class="more"
+      v-show="property.more.show"
+      :style="{
+        color: property.descriptionColor,
+      }"
+    >
+      <span v-if="property.more.type !== 'icon'">
+        {{ property.more.text }}
+      </span>
+      <IconifyIcon icon="ep:arrow-right" v-if="property.more.type !== 'text'" />
+    </div>
+  </div>
+</template>
+<style scoped lang="scss">
+.title-bar {
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 20px;
+
+  /* 更多 */
+  .more {
+    position: absolute;
+    top: 0;
+    right: 8px;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: auto;
+    font-size: 10px;
+    color: #969799;
+  }
+}
+</style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/property.vue
new file mode 100644
index 000000000..52bfa481a
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/property.vue
@@ -0,0 +1,6 @@
+<script setup lang="ts">
+import type { TitleBarProperty } from './config';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { useVModel } from '@vueuse/core';
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-card/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-card/config.ts
new file mode 100644
index 000000000..7cb187c28
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-card/config.ts
@@ -0,0 +1,24 @@
+import type {
+  ComponentStyle,
+  DiyComponent,
+} from '../../../util';
+
+/** 用户卡片属性 */
+export interface UserCardProperty {
+  // 组件样式
+  style: ComponentStyle;
+}
+
+// 定义组件
+export const component = {
+  id: 'UserCard',
+  name: '用户卡片',
+  icon: 'mdi:user-card-details',
+  property: {
+    style: {
+      bgType: 'color',
+      bgColor: '',
+      marginBottom: 8,
+    } as ComponentStyle,
+  },
+} as DiyComponent<UserCardProperty>;
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-card/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-card/index.vue
new file mode 100644
index 000000000..fe994a92f
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-card/index.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { UserCardProperty } from './config';
+
+import { IconifyIcon } from '@vben/icons';
+
+
+/** 用户卡片 */
+defineOptions({ name: 'UserCard' });
+// 定义属性
+defineProps<{ property: UserCardProperty }>();
+</script>
+<template>
+  <div class="flex flex-col">
+    <div class="flex items-center justify-between px-[18px] py-[24px]">
+      <div class="flex flex-1 items-center gap-[16px]">
+        <Avatar :size="60">
+          <IconifyIcon icon="ep:avatar" :size="60" />
+        </Avatar>
+        <span class="text-[18px] font-bold">芋道源码</span>
+      </div>
+      <IconifyIcon icon="tdesign:qrcode" :size="20" />
+    </div>
+    <div
+      class="flex items-center justify-between bg-white px-[20px] py-[8px] text-[12px]"
+    >
+      <span class="text-[#ff690d]">点击绑定手机号</span>
+      <span class="rounded-[26px] bg-[#ff6100] px-[8px] py-[5px] text-white">
+        去绑定
+      </span>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-card/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-card/property.vue
new file mode 100644
index 000000000..79a7eb080
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-card/property.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { UserCardProperty } from './config';
+
+import { useVModel } from '@vueuse/core';
+
+import ComponentContainerProperty from '../../component-container-property.vue';
+
+// 用户卡片属性面板
+defineOptions({ name: 'UserCardProperty' });
+
+const props = defineProps<{ modelValue: UserCardProperty }>();
+const emit = defineEmits(['update:modelValue']);
+const formData = useVModel(props, 'modelValue', emit);
+</script>
+
+<template>
+  <ComponentContainerProperty v-model="formData.style" />
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-coupon/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-coupon/config.ts
new file mode 100644
index 000000000..5b5728185
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-coupon/config.ts
@@ -0,0 +1,26 @@
+import type {
+  ComponentStyle,
+  DiyComponent,
+} from '../../../util';
+
+/** 用户卡券属性 */
+export interface UserCouponProperty {
+  // 组件样式
+  style: ComponentStyle;
+}
+
+// 定义组件
+export const component = {
+  id: 'UserCoupon',
+  name: '用户卡券',
+  icon: 'ep:ticket',
+  property: {
+    style: {
+      bgType: 'color',
+      bgColor: '',
+      marginLeft: 8,
+      marginRight: 8,
+      marginBottom: 8,
+    } as ComponentStyle,
+  },
+} as DiyComponent<UserCouponProperty>;
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-coupon/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-coupon/index.vue
new file mode 100644
index 000000000..1702e454e
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-coupon/index.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { UserCouponProperty } from './config';
+
+
+/** 用户卡券 */
+defineOptions({ name: 'UserCoupon' });
+// 定义属性
+defineProps<{ property: UserCouponProperty }>();
+</script>
+<template>
+  <Image
+    src="https://shopro.sheepjs.com/admin/static/images/shop/decorate/couponCardStyle.png"
+  />
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-coupon/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-coupon/property.vue
new file mode 100644
index 000000000..488bf3168
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-coupon/property.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { UserCouponProperty } from './config';
+
+import { useVModel } from '@vueuse/core';
+
+import ComponentContainerProperty from '../../component-container-property.vue';
+
+// 用户卡券属性面板
+defineOptions({ name: 'UserCouponProperty' });
+
+const props = defineProps<{ modelValue: UserCouponProperty }>();
+const emit = defineEmits(['update:modelValue']);
+const formData = useVModel(props, 'modelValue', emit);
+</script>
+
+<template>
+  <ComponentContainerProperty v-model="formData.style" />
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-order/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-order/config.ts
new file mode 100644
index 000000000..5cea121ac
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-order/config.ts
@@ -0,0 +1,26 @@
+import type {
+  ComponentStyle,
+  DiyComponent,
+} from '../../../util';
+
+/** 用户订单属性 */
+export interface UserOrderProperty {
+  // 组件样式
+  style: ComponentStyle;
+}
+
+// 定义组件
+export const component = {
+  id: 'UserOrder',
+  name: '用户订单',
+  icon: 'ep:list',
+  property: {
+    style: {
+      bgType: 'color',
+      bgColor: '',
+      marginLeft: 8,
+      marginRight: 8,
+      marginBottom: 8,
+    } as ComponentStyle,
+  },
+} as DiyComponent<UserOrderProperty>;
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-order/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-order/index.vue
new file mode 100644
index 000000000..4ead72186
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-order/index.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { UserOrderProperty } from './config';
+
+
+/** 用户订单 */
+defineOptions({ name: 'UserOrder' });
+// 定义属性
+defineProps<{ property: UserOrderProperty }>();
+</script>
+<template>
+  <Image
+    src="https://shopro.sheepjs.com/admin/static/images/shop/decorate/orderCardStyle.png"
+  />
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-order/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-order/property.vue
new file mode 100644
index 000000000..48f0c0a41
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-order/property.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { UserOrderProperty } from './config';
+
+import { useVModel } from '@vueuse/core';
+
+import ComponentContainerProperty from '../../component-container-property.vue';
+
+// 用户订单属性面板
+defineOptions({ name: 'UserOrderProperty' });
+
+const props = defineProps<{ modelValue: UserOrderProperty }>();
+const emit = defineEmits(['update:modelValue']);
+const formData = useVModel(props, 'modelValue', emit);
+</script>
+
+<template>
+  <ComponentContainerProperty v-model="formData.style" />
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-wallet/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-wallet/config.ts
new file mode 100644
index 000000000..dd9c56d31
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-wallet/config.ts
@@ -0,0 +1,26 @@
+import type {
+  ComponentStyle,
+  DiyComponent,
+} from '../../../util';
+
+/** 用户资产属性 */
+export interface UserWalletProperty {
+  // 组件样式
+  style: ComponentStyle;
+}
+
+// 定义组件
+export const component = {
+  id: 'UserWallet',
+  name: '用户资产',
+  icon: 'ep:wallet-filled',
+  property: {
+    style: {
+      bgType: 'color',
+      bgColor: '',
+      marginLeft: 8,
+      marginRight: 8,
+      marginBottom: 8,
+    } as ComponentStyle,
+  },
+} as DiyComponent<UserWalletProperty>;
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-wallet/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-wallet/index.vue
new file mode 100644
index 000000000..dd3d60475
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-wallet/index.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { UserWalletProperty } from './config';
+
+
+/** 用户资产 */
+defineOptions({ name: 'UserWallet' });
+// 定义属性
+defineProps<{ property: UserWalletProperty }>();
+</script>
+<template>
+  <Image
+    src="https://shopro.sheepjs.com/admin/static/images/shop/decorate/walletCardStyle.png"
+  />
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-wallet/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-wallet/property.vue
new file mode 100644
index 000000000..5c01b828e
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-wallet/property.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { UserWalletProperty } from './config';
+
+import { useVModel } from '@vueuse/core';
+
+import ComponentContainerProperty from '../../component-container-property.vue';
+
+// 用户资产属性面板
+defineOptions({ name: 'UserWalletProperty' });
+
+const props = defineProps<{ modelValue: UserWalletProperty }>();
+const emit = defineEmits(['update:modelValue']);
+const formData = useVModel(props, 'modelValue', emit);
+</script>
+
+<template>
+  <ComponentContainerProperty v-model="formData.style" />
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/config.ts
new file mode 100644
index 000000000..ec160c0bc
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/config.ts
@@ -0,0 +1,40 @@
+import type {
+  ComponentStyle,
+  DiyComponent,
+} from '../../../util';
+
+/** 视频播放属性 */
+export interface VideoPlayerProperty {
+  // 视频链接
+  videoUrl: string;
+  // 封面链接
+  posterUrl: string;
+  // 是否自动播放
+  autoplay: boolean;
+  // 组件样式
+  style: VideoPlayerStyle;
+}
+
+// 视频播放样式
+export interface VideoPlayerStyle extends ComponentStyle {
+  // 视频高度
+  height: number;
+}
+
+// 定义组件
+export const component = {
+  id: 'VideoPlayer',
+  name: '视频播放',
+  icon: 'ep:video-play',
+  property: {
+    videoUrl: '',
+    posterUrl: '',
+    autoplay: false,
+    style: {
+      bgType: 'color',
+      bgColor: '#fff',
+      marginBottom: 8,
+      height: 300,
+    } as VideoPlayerStyle,
+  },
+} as DiyComponent<VideoPlayerProperty>;
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/index.vue
new file mode 100644
index 000000000..34b48e4d9
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/index.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { VideoPlayerProperty } from './config';
+
+
+/** 视频播放 */
+defineOptions({ name: 'VideoPlayer' });
+
+defineProps<{ property: VideoPlayerProperty }>();
+</script>
+<template>
+  <div class="w-full" :style="{ height: `${property.style.height}px` }">
+    <Image
+      class="w-full"
+      :src="property.posterUrl"
+      v-if="property.posterUrl"
+    />
+    <video
+      v-else
+      class="w-full"
+      :src="property.videoUrl"
+      :poster="property.posterUrl"
+      :autoplay="property.autoplay"
+      controls
+    ></video>
+  </div>
+</template>
+
+<style scoped lang="scss">
+/* 图片 */
+img {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/property.vue
new file mode 100644
index 000000000..5a0ac5696
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/property.vue
@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import type { VideoPlayerProperty } from './config';
+
+import { useVModel } from '@vueuse/core';
+
+import ComponentContainerProperty from '../../component-container-property.vue';
+import UploadFile from '#/components/upload/file-upload.vue';
+import UploadImg from '#/components/upload/image-upload.vue';
+
+// 视频播放属性面板
+defineOptions({ name: 'VideoPlayerProperty' });
+
+const props = defineProps<{ modelValue: VideoPlayerProperty }>();
+const emit = defineEmits(['update:modelValue']);
+const formData = useVModel(props, 'modelValue', emit);
+</script>
+
+<template>
+  <ComponentContainerProperty v-model="formData.style">
+    <template #style>
+      <FormItem label="高度" name="height">
+        <Slider
+          v-model:value="formData.style.height"
+          :max="500"
+          :min="100"
+        />
+      </FormItem>
+    </template>
+    <Form :model="formData" labelCol="{ span: 6 }" wrapperCol="{ span: 18 }">
+      <FormItem label="上传视频" name="videoUrl">
+        <UploadFile
+          v-model="formData.videoUrl"
+          :file-type="['mp4']"
+          :limit="1"
+          :file-size="100"
+          class="min-w-[80px]"
+        />
+      </FormItem>
+      <FormItem label="上传封面" name="posterUrl">
+        <UploadImg
+          v-model="formData.posterUrl"
+          draggable="false"
+          height="80px"
+          width="100%"
+          class="min-w-[80px]"
+          :show-description="false"
+        >
+          <template #tip> 建议宽度750 </template>
+        </UploadImg>
+      </FormItem>
+      <FormItem label="自动播放" name="autoplay">
+        <Switch v-model:checked="formData.autoplay" />
+      </FormItem>
+    </Form>
+  </ComponentContainerProperty>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/index.vue
index 4f0124fe3..b23517c35 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/index.vue
@@ -1,44 +1,639 @@
+<script lang="ts" setup>
+import type { DiyComponent, DiyComponentLibrary, PageConfig } from './util';
+
+import { inject, onMounted, ref, unref, watch } from 'vue';
+
+import { IFrame } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+import { cloneDeep, isEmpty, isString } from '@vben/utils';
+
+import { useQRCode } from '@vueuse/integrations/useQRCode';
+import draggable from 'vuedraggable';
+
+import statusBarImg from '#/assets/imgs/diy/statusBar.png';
+import {
+  componentConfigs,
+  components,
+} from './components/mobile';
+import { component as PAGE_CONFIG_COMPONENT } from './components/mobile/page-config/config';
+
+import ComponentContainer from './components/component-container.vue';
+import ComponentLibrary from './components/component-library.vue';
+import { component as NAVIGATION_BAR_COMPONENT } from './components/mobile/navigation-bar/config';
+import { component as TAB_BAR_COMPONENT } from './components/mobile/tab-bar/config';
+/** 页面装修详情页 */
+defineOptions({
+  name: 'DiyPageDetail',
+  components,
+});
+// 定义属性
+const props = defineProps({
+  // 页面配置，支持Json字符串
+  modelValue: { type: [String, Object], required: true },
+  // 标题
+  title: { type: String, default: '' },
+  // 组件库
+  libs: { type: Array<DiyComponentLibrary>, default: () => [] },
+  // 是否显示顶部导航栏
+  showNavigationBar: { type: Boolean, default: true },
+  // 是否显示底部导航菜单
+  showTabBar: { type: Boolean, default: false },
+  // 是否显示页面配置
+  showPageConfig: { type: Boolean, default: true },
+  // 预览地址：提供了预览地址，才会显示预览按钮
+  previewUrl: { type: String, default: '' },
+});
+// 工具栏操作
+const emits = defineEmits(['reset', 'preview', 'save', 'update:modelValue']);
+
+const qrcode = useQRCode(props.previewUrl, {
+  errorCorrectionLevel: 'H',
+  margin: 4,
+});
+
+// 左侧组件库
+const componentLibrary = ref();
+// 页面设置组件
+const pageConfigComponent = ref<DiyComponent<any>>(
+  cloneDeep(PAGE_CONFIG_COMPONENT),
+);
+// 顶部导航栏
+const navigationBarComponent = ref<DiyComponent<any>>(
+  cloneDeep(NAVIGATION_BAR_COMPONENT),
+);
+// 底部导航菜单
+const tabBarComponent = ref<DiyComponent<any>>(cloneDeep(TAB_BAR_COMPONENT));
+
+// 选中的组件，默认选中顶部导航栏
+const selectedComponent = ref<DiyComponent<any>>();
+// 选中的组件索引
+const selectedComponentIndex = ref<number>(-1);
+// 组件列表
+const pageComponents = ref<DiyComponent<any>[]>([]);
+// 监听传入的页面配置
+// 解析出 pageConfigComponent 页面整体的配置，navigationBarComponent、pageComponents、tabBarComponent 页面上、中、下的配置
+watch(
+  () => props.modelValue,
+  () => {
+    const modelValue =
+      isString(props.modelValue) && !isEmpty(props.modelValue)
+        ? (JSON.parse(props.modelValue) as PageConfig)
+        : props.modelValue;
+    pageConfigComponent.value.property =
+      (typeof modelValue !== 'string' && modelValue?.page) ||
+      PAGE_CONFIG_COMPONENT.property;
+    navigationBarComponent.value.property =
+      (typeof modelValue !== 'string' && modelValue?.navigationBar) ||
+      NAVIGATION_BAR_COMPONENT.property;
+    tabBarComponent.value.property =
+      (typeof modelValue !== 'string' && modelValue?.tabBar) ||
+      TAB_BAR_COMPONENT.property;
+    // 查找对应的页面组件
+    pageComponents.value = (
+      (typeof modelValue !== 'string' && modelValue?.components) ||
+      []
+    ).map((item: any) => {
+      const component = componentConfigs[item.id];
+      return { ...component, property: item.property };
+    });
+  },
+  {
+    immediate: true,
+  },
+);
+
+/** 选择组件修改其属性后更新它的配置 */
+watch(
+  selectedComponent,
+  (val: any) => {
+    if (!val || selectedComponentIndex.value === -1) {
+      return;
+    }
+    pageComponents.value[selectedComponentIndex.value] =
+      selectedComponent.value!;
+  },
+  { deep: true },
+);
+
+// 保存
+const handleSave = () => {
+  // 发送保存通知
+  emits('save');
+};
+// 监听配置修改
+const pageConfigChange = () => {
+  const pageConfig = {
+    page: pageConfigComponent.value.property,
+    navigationBar: navigationBarComponent.value.property,
+    tabBar: tabBarComponent.value.property,
+    components: pageComponents.value.map((component) => {
+      // 只保留APP有用的字段
+      return { id: component.id, property: component.property };
+    }),
+  } as PageConfig;
+  if (!props.showTabBar) {
+    delete pageConfig.tabBar;
+  }
+  // 发送数据更新通知
+  const modelValue = isString(props.modelValue)
+    ? JSON.stringify(pageConfig)
+    : pageConfig;
+  emits('update:modelValue', modelValue);
+};
+watch(
+  () => [
+    pageConfigComponent.value.property,
+    navigationBarComponent.value.property,
+    tabBarComponent.value.property,
+    pageComponents.value,
+  ],
+  () => {
+    pageConfigChange();
+  },
+  { deep: true },
+);
+// 处理页面选中：显示属性表单
+const handlePageSelected = (event: any) => {
+  if (!props.showPageConfig) return;
+
+  // 配置了样式 page-prop-area 的元素，才显示页面设置
+  if (event?.target?.classList?.contains('page-prop-area')) {
+    handleComponentSelected(unref(pageConfigComponent));
+  }
+};
+
+/**
+ * 选中组件
+ *
+ * @param component 组件
+ * @param index 组件的索引
+ */
+const handleComponentSelected = (
+  component: DiyComponent<any>,
+  index: number = -1,
+) => {
+  selectedComponent.value = component;
+  selectedComponentIndex.value = index;
+};
+
+// 选中顶部导航栏
+const handleNavigationBarSelected = () => {
+  handleComponentSelected(unref(navigationBarComponent));
+};
+
+// 选中底部导航菜单
+const handleTabBarSelected = () => {
+  handleComponentSelected(unref(tabBarComponent));
+};
+
+// 组件变动（拖拽）
+const handleComponentChange = (dragEvent: any) => {
+  // 新增，即从组件库拖拽添加组件
+  if (dragEvent.added) {
+    const { element, newIndex } = dragEvent.added;
+    handleComponentSelected(element, newIndex);
+  } else if (dragEvent.moved) {
+    // 拖拽排序
+    const { newIndex } = dragEvent.moved;
+    // 保持选中
+    selectedComponentIndex.value = newIndex;
+  }
+};
+
+// 交换组件
+const swapComponent = (oldIndex: number, newIndex: number) => {
+  const temp = pageComponents.value[oldIndex]!;
+  pageComponents.value[oldIndex] = pageComponents.value[newIndex]!;
+  pageComponents.value[newIndex] = temp;
+  // 保持选中
+  selectedComponentIndex.value = newIndex;
+};
+
+/** 移动组件（上移、下移） */
+const handleMoveComponent = (index: number, direction: number) => {
+  const newIndex = index + direction;
+  if (newIndex < 0 || newIndex >= pageComponents.value.length) return;
+
+  swapComponent(index, newIndex);
+};
+
+/** 复制组件 */
+const handleCopyComponent = (index: number) => {
+  const component = pageComponents.value[index];
+  if (component) {
+    const clonedComponent = cloneDeep(component);
+    clonedComponent.uid = Date.now();
+    pageComponents.value.splice(index + 1, 0, clonedComponent);
+  }
+};
+
+/**
+ * 删除组件
+ * @param index 当前组件index
+ */
+const handleDeleteComponent = (index: number) => {
+  // 删除组件
+  pageComponents.value.splice(index, 1);
+  if (index < pageComponents.value.length) {
+    // 1. 不是最后一个组件时，删除后选中下面的组件
+    const bottomIndex = index;
+    const component = pageComponents.value[bottomIndex];
+    if (component) {
+      handleComponentSelected(component, bottomIndex);
+    }
+  } else if (pageComponents.value.length > 0) {
+    // 2. 不是第一个组件时，删除后选中上面的组件
+    const topIndex = index - 1;
+    const component = pageComponents.value[topIndex];
+    if (component) {
+      handleComponentSelected(component, topIndex);
+    }
+  } else {
+    // 3. 组件全部删除之后，显示页面设置
+    handleComponentSelected(unref(pageConfigComponent));
+  }
+};
+
+// 注入无感刷新页面函数
+const reload = inject<() => void>('reload'); // TODO @芋艿：是 vue3 + element-plus 独有的，可以清理掉。
+// 重置
+const handleReset = () => {
+  if (reload) reload();
+  emits('reset');
+};
+
+// 预览
+const previewDialogVisible = ref(false);
+const handlePreview = () => {
+  previewDialogVisible.value = true;
+  emits('preview');
+};
+
+// 设置默认选中的组件
+const setDefaultSelectedComponent = () => {
+  if (props.showPageConfig) {
+    selectedComponent.value = unref(pageConfigComponent);
+  } else if (props.showNavigationBar) {
+    selectedComponent.value = unref(navigationBarComponent);
+  } else if (props.showTabBar) {
+    selectedComponent.value = unref(tabBarComponent);
+  }
+};
+
+watch(
+  () => [props.showPageConfig, props.showNavigationBar, props.showTabBar],
+  () => setDefaultSelectedComponent(),
+);
+onMounted(() => {
+  setDefaultSelectedComponent();
+});
+</script>
 <template>
-  <div class="diy-editor-placeholder">
-    <div class="text-center py-20">
-      <h2>DiyEditor 组件</h2>
-      <p class="text-gray-500">此组件待实现</p>
+  <div>
+    <div class="editor flex flex-col h-full">
+      <!-- 顶部：工具栏 -->
+      <div class="editor-header flex items-center">
+        <!-- 左侧操作区 -->
+        <slot name="toolBarLeft"></slot>
+        <!-- 中心操作区 -->
+        <div class="header-center flex flex-1 items-center justify-center">
+          <span>{{ title }}</span>
+        </div>
+        <!-- 右侧操作区 -->
+        <div class="header-right flex">
+          <Tooltip title="重置">
+            <Button @click="handleReset">
+              <IconifyIcon :size="24" icon="system-uicons:reset-alt" />
+            </Button>
+          </Tooltip>
+          <Tooltip v-if="previewUrl" title="预览">
+            <Button @click="handlePreview">
+              <IconifyIcon :size="24" icon="ep:view" />
+            </Button>
+          </Tooltip>
+          <Tooltip title="保存">
+            <Button @click="handleSave">
+              <IconifyIcon :size="24" icon="ep:check" />
+            </Button>
+          </Tooltip>
+        </div>
+      </div>
+
+      <!-- 中心区域 -->
+      <div class="editor-container flex flex-1">
+        <!-- 左侧：组件库（ComponentLibrary） -->
+        <ComponentLibrary
+          v-if="libs && libs.length > 0"
+          ref="componentLibrary"
+          :list="libs"
+        />
+        <!-- 中心：设计区域（ComponentContainer） -->
+        <div class="editor-center page-prop-area" @click="handlePageSelected">
+          <!-- 手机顶部 -->
+          <div class="editor-design-top">
+            <!-- 手机顶部状态栏 -->
+            <img alt="" class="status-bar" :src="statusBarImg" />
+            <!-- 手机顶部导航栏 -->
+            <ComponentContainer
+              v-if="showNavigationBar"
+              :active="selectedComponent?.id === navigationBarComponent.id"
+              :component="navigationBarComponent"
+              :show-toolbar="false"
+              class="cursor-pointer"
+              @click="handleNavigationBarSelected"
+            />
+          </div>
+          <!-- 绝对定位的组件：例如 弹窗、浮动按钮等 -->
+          <div
+            v-for="(component, index) in pageComponents"
+            :key="index"
+            @click="handleComponentSelected(component, index)"
+          >
+            <component
+              :is="component.id"
+              v-if="
+                component.position === 'fixed' &&
+                selectedComponent?.uid === component.uid
+              "
+              :property="component.property"
+            />
+          </div>
+          <!-- 手机页面编辑区域 -->
+          <div
+            class="editor-design-center page-prop-area overflow-y-auto phone-container"
+            :style="{
+              backgroundColor: pageConfigComponent.property.backgroundColor,
+              backgroundImage: `url(${pageConfigComponent.property.backgroundImage})`,
+              height: 'calc(100vh - 135px - 120px)'
+            }"
+          >
+            <draggable
+              v-model="pageComponents"
+              :animation="200"
+              :force-fallback="true"
+              class="page-prop-area drag-area"
+              filter=".component-toolbar"
+              ghost-class="draggable-ghost"
+              group="component"
+              item-key="index"
+              @change="handleComponentChange"
+            >
+              <template #item="{ element, index }">
+                <ComponentContainer
+                  v-if="!element.position || element.position === 'center'"
+                  :active="selectedComponentIndex === index"
+                  :can-move-down="index < pageComponents.length - 1"
+                  :can-move-up="index > 0"
+                  :component="element"
+                  @click="handleComponentSelected(element, index)"
+                  @copy="handleCopyComponent(index)"
+                  @delete="handleDeleteComponent(index)"
+                  @move="
+                    (direction: number) => handleMoveComponent(index, direction)
+                  "
+                />
+              </template>
+            </draggable>
+          </div>
+          <!-- 手机底部导航 -->
+          <div
+            v-if="showTabBar"
+            class="editor-design-bottom component cursor-pointer"
+          >
+            <ComponentContainer
+              :active="selectedComponent?.id === tabBarComponent.id"
+              :component="tabBarComponent"
+              :show-toolbar="false"
+              @click="handleTabBarSelected"
+            />
+          </div>
+          <!-- 固定布局的组件 操作按钮区 -->
+          <div class="fixed-component-action-group gap-2">
+            <Tag
+              v-if="showPageConfig"
+              :color="
+                selectedComponent?.uid === pageConfigComponent.uid
+                  ? 'blue'
+                  : 'default'
+              "
+              class="cursor-pointer"
+              @click="handleComponentSelected(pageConfigComponent)"
+            >
+              <IconifyIcon :icon="pageConfigComponent.icon" :size="12" />
+              <span>{{ pageConfigComponent.name }}</span>
+            </Tag>
+            <template v-for="(component, index) in pageComponents" :key="index">
+              <Tag
+                v-if="component.position === 'fixed'"
+                :color="
+                  selectedComponent?.uid === component.uid ? 'blue' : 'default'
+                "
+                closable
+                class="cursor-pointer"
+                @click="handleComponentSelected(component)"
+                @close="handleDeleteComponent(index)"
+              >
+                <IconifyIcon :icon="component.icon" :size="12" />
+                <span>{{ component.name }}</span>
+              </Tag>
+            </template>
+          </div>
+        </div>
+        <!-- 右侧：属性面板（ComponentContainerProperty） -->
+        <div
+          v-if="selectedComponent?.property"
+          class="editor-right w-[350px]"
+        >
+          <Card
+            class="h-full"
+            :bodyStyle="{ height: 'calc(100% - 57px)', padding: 0 }"
+          >
+            <!-- 组件名称 -->
+            <template #title>
+              <div class="flex items-center gap-2">
+                <IconifyIcon :icon="selectedComponent?.icon" color="gray" />
+                <span>{{ selectedComponent?.name }}</span>
+              </div>
+            </template>
+            <div
+              class="h-full overflow-y-auto p-4 property"
+            >
+              <component
+                :is="`${selectedComponent?.id}Property`"
+                :key="selectedComponent?.uid || selectedComponent?.id"
+                v-model="selectedComponent.property"
+              />
+            </div>
+          </Card>
+        </div>
+      </div>
     </div>
+
+    <!-- 预览弹框 -->
+    <Modal v-model:open="previewDialogVisible" title="预览" width="700">
+      <div class="flex justify-around">
+        <IFrame
+          :src="previewUrl"
+          class="h-[667px] w-[375px] rounded-lg border-4 border-solid p-0.5"
+        />
+        <div class="flex flex-col">
+          <div class="text-base">手机扫码预览</div>
+          <img :src="qrcode" alt="qrcode" class="w-1/2" />
+          <!-- <Qrcode :text="previewUrl" logo="/logo.gif" /> -->
+        </div>
+      </div>
+    </Modal>
   </div>
 </template>
+<style lang="scss" scoped>
+/* 手机宽度 */
+$phone-width: 375px;
 
-<script lang="ts" setup>
-// 暂时的占位符组件
-// TODO: 实现完整的 DiyEditor 功能
-
-interface Props {
-  modelValue?: any;
-  title?: string;
-  libs?: any[];
-  previewUrl?: string;
-  showNavigationBar?: boolean;
-  showPageConfig?: boolean;
-  showTabBar?: boolean;
-}
-
-defineProps<Props>();
-
-const emit = defineEmits<{
-  'update:modelValue': [value: any];
-  save: [];
-  reset: [];
-}>();
-
-// 占位符，暂时什么都不做
-</script>
-
-<style scoped>
-.diy-editor-placeholder {
-  min-height: 400px;
-  border: 1px dashed #d9d9d9;
-  border-radius: 6px;
+/* 根节点样式 */
+.editor {
   display: flex;
-  align-items: center;
-  justify-content: center;
+  flex-direction: column;
+  height: 100%;
+
+  /* 顶部：工具栏 */
+  .editor-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 42px;
+    padding: 0;
+    background-color: var(--ant-color-bg-container);
+    border-bottom: solid 1px var(--ant-color-border);
+
+    /* 工具栏：右侧按钮 */
+    .header-right {
+      height: 100%;
+
+      .ant-btn {
+        height: 100%;
+      }
+    }
+
+    /* 隐藏工具栏按钮的边框 */
+    :deep(.ant-radio-button-wrapper),
+    :deep(.ant-btn) {
+      border-top: none !important;
+      border-bottom: none !important;
+      border-radius: 0 !important;
+    }
+  }
+
+  /* 中心操作区 */
+  .editor-container {
+    height: calc(100vh - 135px);
+
+    /* 右侧属性面板 */
+    :deep(.editor-right) {
+      flex-shrink: 0;
+      overflow: hidden;
+      box-shadow: -8px 0 8px -8px rgb(0 0 0 / 12%);
+
+      /* 属性面板顶部：减少内边距 */
+      :deep(.ant-card-head) {
+        padding: 8px 16px;
+      }
+
+      /* 属性面板分组 */
+      :deep(.property-group) {
+        margin: 0 -20px;
+
+        &.ant-card {
+          border: none;
+        }
+
+        /* 属性分组名称 */
+        .ant-card-head {
+          padding: 8px 32px;
+          background: var(--ant-color-bg-layout);
+          border: none;
+        }
+
+        .ant-card-body {
+          border: none;
+        }
+      }
+    }
+
+    /* 中心区域 */
+    .editor-center {
+      position: relative;
+      display: flex;
+      flex: 1 1 0;
+      flex-direction: column;
+      justify-content: center;
+      width: 100%;
+      margin: 16px 0 0;
+      overflow: hidden;
+      background-color: var(--app-content-bg-color);
+
+      /* 手机顶部 */
+      .editor-design-top {
+        display: flex;
+        flex-direction: column;
+        width: $phone-width;
+        margin: 0 auto;
+
+        /* 手机顶部状态栏 */
+        .status-bar {
+          width: $phone-width;
+          height: 20px;
+          background-color: #fff;
+        }
+      }
+
+      /* 手机底部导航 */
+      .editor-design-bottom {
+        width: $phone-width;
+        margin: 0 auto;
+      }
+
+      /* 手机页面编辑区域 */
+      :deep(.editor-design-center) {
+        width: 100%;
+
+        /* 主体内容 */
+        .phone-container {
+          position: relative;
+          width: $phone-width;
+          height: 100%;
+          margin: 0 auto;
+          background-repeat: no-repeat;
+          background-size: 100% 100%;
+
+          .drag-area {
+            width: 100%;
+            height: 100%;
+          }
+        }
+      }
+
+      /* 固定布局的组件 操作按钮区 */
+      .fixed-component-action-group {
+        position: absolute;
+        top: 0;
+        right: 16px;
+        display: flex;
+        flex-direction: column;
+
+        :deep(.ant-tag) {
+          border: none;
+          box-shadow: 0 2px 8px 0 rgb(0 0 0 / 10%);
+          display: flex;
+          align-items: center;
+          justify-content: flex-start;
+          width: 100%;
+
+          .anticon {
+            margin-right: 4px;
+          }
+        }
+      }
+    }
+  }
 }
 </style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/util.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/util.ts
index b273e8a92..3666a4711 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/util.ts
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/util.ts
@@ -1,3 +1,7 @@
+import type { NavigationBarProperty } from './components/mobile/navigation-bar/config';
+import type { PageConfigProperty } from './components/mobile/page-config/config';
+import type { TabBarProperty } from './components/mobile/tab-bar/config';
+
 // 页面装修组件
 export interface DiyComponent<T> {
   // 用于区分同一种组件的不同实例
@@ -62,11 +66,11 @@ export interface ComponentStyle {
 // 页面配置
 export interface PageConfig {
   // 页面属性
-  page: any;
+  page: PageConfigProperty;
   // 顶部导航栏属性
-  navigationBar: any;
+  navigationBar: NavigationBarProperty;
   // 底部导航菜单属性
-  tabBar?: any;
+  tabBar?: TabBarProperty;
   // 页面组件列表
   components: PageComponent[];
 }
diff --git a/apps/web-antd/src/views/mall/promotion/components/draggable/index.vue b/apps/web-antd/src/views/mall/promotion/components/draggable/index.vue
new file mode 100644
index 000000000..aaca15c97
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/draggable/index.vue
@@ -0,0 +1,99 @@
+<script setup lang="ts">
+// TODO @芋艿：后续合并到 diy-editor 里，并不是通用的；
+
+import { IconifyIcon } from '@vben/icons';
+import { cloneDeep } from '@vben/utils';
+
+import { useVModel } from '@vueuse/core';
+import VueDraggable from 'vuedraggable';
+
+/** 拖拽组件封装 */
+defineOptions({ name: 'Draggable' });
+
+/** 定义属性 */
+const props = defineProps({
+  modelValue: {
+    type: Array,
+    default: () => [],
+  }, // 绑定值
+  emptyItem: {
+    type: Object,
+    default: () => ({}),
+  }, // 空的元素：点击添加按钮时，创建元素并添加到列表；默认为空对象
+  limit: {
+    type: Number,
+    default: Number.MAX_VALUE,
+  }, // 数量限制：默认为 0，表示不限制
+  min: {
+    type: Number,
+    default: 1,
+  }, // 最小数量：默认为1
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const formData = useVModel(props, 'modelValue', emit);
+
+/** 处理添加 */
+function handleAdd() {
+  return formData.value.push(cloneDeep(props.emptyItem || {}));
+}
+
+/** 处理删除 */
+const handleDelete = function (index: number) {
+  return formData.value.splice(index, 1);
+};
+</script>
+
+<template>
+  <div class="text-xs text-gray-500"> 拖动左上角的小圆点可对其排序 </div>
+  <VueDraggable
+    :list="formData"
+    :force-fallback="true"
+    :animation="200"
+    handle=".drag-icon"
+    class="mt-2"
+    item-key="index"
+  >
+    <template #item="{ element, index }">
+      <div class="mb-1 flex flex-col gap-1 rounded border border-gray-200 p-2">
+        <!-- 操作按钮区 -->
+        <div
+          class="-m-2 mb-1 flex flex-row items-center justify-between p-2"
+          style="background-color: var(--app-content-bg-color)"
+        >
+          <Tooltip title="拖动排序">
+            <IconifyIcon
+              icon="ic:round-drag-indicator"
+              class="drag-icon cursor-move"
+              style="color: #8a909c"
+            />
+          </Tooltip>
+          <Tooltip title="删除">
+            <IconifyIcon
+              icon="ep:delete"
+              class="cursor-pointer text-red-500"
+              v-if="formData.length > min"
+              @click="handleDelete(index)"
+            />
+          </Tooltip>
+        </div>
+        <!-- 内容区 -->
+        <slot :element="element" :index="index"></slot>
+      </div>
+    </template>
+  </VueDraggable>
+  <Tooltip :title="limit < 1 ? undefined : `最多添加${limit}个`">
+    <Button
+      type="primary"
+      ghost
+      class="mt-1 w-full"
+      :disabled="limit > 0 && formData.length >= limit"
+      @click="handleAdd"
+    >
+      <IconifyIcon icon="ep:plus" /><span>添加</span>
+    </Button>
+  </Tooltip>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/index.ts b/apps/web-antd/src/views/mall/promotion/components/index.ts
index a382904c1..a088806e2 100644
--- a/apps/web-antd/src/views/mall/promotion/components/index.ts
+++ b/apps/web-antd/src/views/mall/promotion/components/index.ts
@@ -1,7 +1,9 @@
+export { default as AppLinkInput } from './app-link-input/index.vue';
+export { default as ColorInput } from './color-input/index.vue';
 export { default as DiyEditor } from './diy-editor/index.vue';
 export { type DiyComponentLibrary, PAGE_LIBS } from './diy-editor/util';
-export { default as SpuAndSkuList } from './spu-and-sku-list.vue';
-export { default as SpuSkuSelect } from './spu-sku-select.vue';
+export { default as Draggable } from './draggable/index.vue';
+export { default as InputWithColor } from './input-with-color/index.vue';
 
-export type * from './types';
-// TODO @puhui999：这个要不要也放到 product/spu/components 下？相当于各种商品的 select 能力，统一由 spu 提供组件化能力！
+export { default as MagicCubeEditor } from './magic-cube-editor/index.vue';
+export { default as VerticalButtonGroup } from './vertical-button-group/index.vue';
diff --git a/apps/web-antd/src/views/mall/promotion/components/input-with-color/index.vue b/apps/web-antd/src/views/mall/promotion/components/input-with-color/index.vue
new file mode 100644
index 000000000..2e6336f5f
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/input-with-color/index.vue
@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+import { PREDEFINE_COLORS } from '@vben/constants';
+
+import { useVModels } from '@vueuse/core';
+
+/** 带颜色选择器输入框 */
+defineOptions({ name: 'InputWithColor' });
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: '',
+  },
+  color: {
+    type: String,
+    default: '',
+  },
+});
+
+const emit = defineEmits(['update:modelValue', 'update:color']);
+
+const { modelValue, color } = useVModels(props, emit);
+</script>
+
+<template>
+  <InputGroup compact>
+    <Input v-model:value="modelValue" v-bind="$attrs" class="flex-1" />
+    <ColorPicker v-model:value="color" :presets="PREDEFINE_COLORS" />
+  </InputGroup>
+</template>
+<style scoped lang="scss"></style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/magic-cube-editor/index.vue b/apps/web-antd/src/views/mall/promotion/components/magic-cube-editor/index.vue
new file mode 100644
index 000000000..d260ded9c
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/magic-cube-editor/index.vue
@@ -0,0 +1,302 @@
+<script lang="ts" setup>
+import type { Point, Rect } from './util';
+
+import { ref, watch } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { createRect, isContains, isOverlap } from './util';
+
+// TODO @AI: 改成标准注释
+// 魔方编辑器
+// 有两部分组成：
+// 1. 魔方矩阵：位于底层，由方块组件的二维表格，用于创建热区
+//    操作方法：
+//    1.1 点击其中一个方块就会进入热区选择模式
+//    1.2 再次点击另外一个方块时，结束热区选择模式
+//    1.3 在两个方块中间的区域创建热区
+//    如果两次点击的都是同一方块，就只创建一个格子的热区
+// 2. 热区：位于顶层，采用绝对定位，覆盖在魔方矩阵上面。
+defineOptions({ name: 'MagicCubeEditor' });
+
+/** 定义属性 */
+const props = defineProps({
+  modelValue: {
+    type: Array as () => Rect[],
+    default: () => [],
+  }, // 热区列表
+  rows: {
+    type: Number,
+    default: 4,
+  }, // 行数，默认 4 行
+
+  cols: {
+    type: Number,
+    default: 4,
+  }, // 列数，默认 4 列
+
+  cubeSize: {
+    type: Number,
+    default: 75,
+  }, // 方块大小，单位px，默认75px
+});
+
+const emit = defineEmits(['update:modelValue', 'hotAreaSelected']); // 发送模型更新
+
+/** 方块 */
+type Cube = {
+  active: boolean; // 是否激活
+} & Point;
+
+const cubes = ref<Cube[][]>([]); // 魔方矩阵：所有的方块
+
+/** 监听行数、列数变化 */
+watch(
+  () => [props.rows, props.cols],
+  () => {
+    // 清空魔方
+    cubes.value = [];
+    if (!props.rows || !props.cols) return;
+
+    // 初始化魔方
+    for (let row = 0; row < props.rows; row++) {
+      cubes.value[row] = [];
+      for (let col = 0; col < props.cols; col++) {
+        cubes.value[row]!.push({ x: col, y: row, active: false });
+      }
+    }
+  },
+  { immediate: true },
+);
+
+const hotAreas = ref<Rect[]>([]); // 热区列表
+/** 初始化热区 */
+watch(
+  () => props.modelValue,
+  () => (hotAreas.value = props.modelValue || []),
+  { immediate: true },
+);
+
+const hotAreaBeginCube = ref<Cube>(); // 热区起始方块
+const isHotAreaSelectMode = () => !!hotAreaBeginCube.value; // 是否开启了热区选择模式
+
+/**
+ * 处理鼠标点击方块
+ *
+ * @param currentRow 当前行号
+ * @param currentCol 当前列号
+ */
+const handleCubeClick = (currentRow: number, currentCol: number) => {
+  const currentCube = cubes.value[currentRow]?.[currentCol];
+  if (!currentCube) {
+    return;
+  }
+
+  // 情况1：进入热区选择模式
+  if (!isHotAreaSelectMode()) {
+    hotAreaBeginCube.value = currentCube;
+    hotAreaBeginCube.value!.active = true;
+    return;
+  }
+
+  // 情况2：结束热区选择模式
+  hotAreas.value.push(createRect(hotAreaBeginCube.value!, currentCube));
+  // 结束热区选择模式
+  exitHotAreaSelectMode();
+  // 创建后就选中热区
+  const hotAreaIndex = hotAreas.value.length - 1;
+  const hotArea = hotAreas.value[hotAreaIndex];
+  if (hotArea) {
+    handleHotAreaSelected(hotArea, hotAreaIndex);
+  }
+  // 发送热区变动通知
+  emitUpdateModelValue();
+};
+
+/**
+ * 处理鼠标经过方块
+ *
+ * @param currentRow 当前行号
+ * @param currentCol 当前列号
+ */
+const handleCellHover = (currentRow: number, currentCol: number) => {
+  // 当前没有进入热区选择模式
+  if (!isHotAreaSelectMode()) {
+    return;
+  }
+
+  // 当前已选的区域
+  const currentCube = cubes.value[currentRow]?.[currentCol];
+  if (!currentCube) {
+    return;
+  }
+
+  const currentSelectedArea = createRect(hotAreaBeginCube.value!, currentCube);
+  // 热区不允许重叠
+  for (const hotArea of hotAreas.value) {
+    // 检查是否重叠
+    if (isOverlap(hotArea, currentSelectedArea)) {
+      // 结束热区选择模式
+      exitHotAreaSelectMode();
+
+      return;
+    }
+  }
+
+  // 激活选中区域内部的方块
+  eachCube((_, __, cube) => {
+    cube.active = isContains(currentSelectedArea, cube);
+  });
+};
+
+/**
+ * 处理热区删除
+ *
+ * @param index 热区索引
+ */
+function handleDeleteHotArea(index: number) {
+  hotAreas.value.splice(index, 1);
+  // 结束热区选择模式
+  exitHotAreaSelectMode();
+  // 发送热区变动通知
+  emitUpdateModelValue();
+}
+
+const emitUpdateModelValue = () => emit('update:modelValue', hotAreas.value); // 发送热区变动通知
+
+const selectedHotAreaIndex = ref(0); // 热区选中
+const handleHotAreaSelected = (hotArea: Rect, index: number) => {
+  selectedHotAreaIndex.value = index;
+  emit('hotAreaSelected', hotArea, index);
+};
+
+/**
+ * 结束热区选择模式
+ */
+function exitHotAreaSelectMode() {
+  // 移除方块激活标记
+  eachCube((_, __, cube) => {
+    if (cube.active) {
+      cube.active = false;
+    }
+  });
+
+  // 清除起点
+  hotAreaBeginCube.value = undefined;
+}
+
+/**
+ * 迭代魔方矩阵
+ * @param callback 回调
+ */
+const eachCube = (callback: (x: number, y: number, cube: Cube) => void) => {
+  for (const [x, row] of cubes.value.entries()) {
+    if (!row) continue;
+    for (const [y, cube] of row.entries()) {
+      if (cube) {
+        callback(x, y, cube);
+      }
+    }
+  }
+};
+</script>
+<template>
+  <div class="relative">
+    <table class="cube-table">
+      <!-- 底层：魔方矩阵 -->
+      <tbody>
+        <tr v-for="(rowCubes, row) in cubes" :key="row">
+          <td
+            v-for="(cube, col) in rowCubes"
+            :key="col"
+            class="cube"
+            :class="[{ active: cube.active }]"
+            :style="{
+              width: `${cubeSize}px`,
+              height: `${cubeSize}px`,
+            }"
+            @click="handleCubeClick(row, col)"
+            @mouseenter="handleCellHover(row, col)"
+          >
+            <IconifyIcon icon="ep-plus" />
+          </td>
+        </tr>
+      </tbody>
+      <!-- 顶层：热区 -->
+      <div
+        v-for="(hotArea, index) in hotAreas"
+        :key="index"
+        class="hot-area"
+        :style="{
+          top: `${cubeSize * hotArea.top}px`,
+          left: `${cubeSize * hotArea.left}px`,
+          height: `${cubeSize * hotArea.height}px`,
+          width: `${cubeSize * hotArea.width}px`,
+        }"
+        @click="handleHotAreaSelected(hotArea, index)"
+        @mouseover="exitHotAreaSelectMode"
+      >
+        <!-- 右上角热区删除按钮 -->
+        <div
+          v-if="
+            selectedHotAreaIndex === index && hotArea.width && hotArea.height
+          "
+          class="btn-delete"
+          @click="handleDeleteHotArea(index)"
+        >
+          <IconifyIcon icon="ep:circle-close-filled" />
+        </div>
+        <span v-if="hotArea.width">{{
+          `${hotArea.width}×${hotArea.height}`
+        }}</span>
+      </div>
+    </table>
+  </div>
+</template>
+<style lang="scss" scoped>
+.cube-table {
+  position: relative;
+  border-spacing: 0;
+  border-collapse: collapse;
+
+  .cube {
+    box-sizing: border-box;
+    color: var(--el-text-color-secondary);
+    text-align: center;
+    cursor: pointer;
+    border: 1px solid var(--el-border-color);
+
+    &.active {
+      background: var(--el-color-primary-light-9);
+    }
+  }
+
+  .hot-area {
+    position: absolute;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--el-color-primary);
+    cursor: pointer;
+    border-spacing: 0;
+    border-collapse: collapse;
+    background: var(--el-color-primary-light-8);
+    border: 1px solid var(--el-color-primary);
+
+    .btn-delete {
+      position: absolute;
+      top: -8px;
+      right: -8px;
+      z-index: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 16px;
+      height: 16px;
+      background-color: #fff;
+      border-radius: 50%;
+    }
+  }
+}
+</style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/magic-cube-editor/util.ts b/apps/web-antd/src/views/mall/promotion/components/magic-cube-editor/util.ts
new file mode 100644
index 000000000..1ee8fb5a4
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/magic-cube-editor/util.ts
@@ -0,0 +1,72 @@
+// 坐标点
+export interface Point {
+  x: number;
+  y: number;
+}
+
+// 矩形
+export interface Rect {
+  // 左上角 X 轴坐标
+  left: number;
+  // 左上角 Y 轴坐标
+  top: number;
+  // 右下角 X 轴坐标
+  right: number;
+  // 右下角 Y 轴坐标
+  bottom: number;
+  // 矩形宽度
+  width: number;
+  // 矩形高度
+  height: number;
+}
+
+/**
+ * 判断两个矩形是否重叠
+ * @param a 矩形 A
+ * @param b 矩形 B
+ */
+export const isOverlap = (a: Rect, b: Rect): boolean => {
+  return (
+    a.left < b.left + b.width &&
+    a.left + a.width > b.left &&
+    a.top < b.top + b.height &&
+    a.height + a.top > b.top
+  );
+};
+/**
+ * 检查坐标点是否在矩形内
+ * @param hotArea 矩形
+ * @param point 坐标
+ */
+export const isContains = (hotArea: Rect, point: Point): boolean => {
+  return (
+    point.x >= hotArea.left &&
+    point.x < hotArea.right &&
+    point.y >= hotArea.top &&
+    point.y < hotArea.bottom
+  );
+};
+
+/**
+ * 在两个坐标点中间，创建一个矩形
+ *
+ * 存在以下情况：
+ * 1. 两个坐标点是同一个位置，只占一个位置的正方形，宽高都为 1
+ * 2. X 轴坐标相同，只占一行的矩形，高度为 1
+ * 3. Y 轴坐标相同，只占一列的矩形，宽度为 1
+ * 4. 多行多列的矩形
+ *
+ * @param a 坐标点一
+ * @param b 坐标点二
+ */
+export const createRect = (a: Point, b: Point): Rect => {
+  // 计算矩形的范围
+  const [left, left2] = [a.x, b.x].sort();
+  const [top, top2] = [a.y, b.y].sort();
+  const right = left2 + 1;
+  const bottom = top2 + 1;
+  const height = bottom - top;
+  const width = right - left;
+
+  return { left, right, top, bottom, height, width };
+};
diff --git a/apps/web-antd/src/views/mall/promotion/components/spu-and-sku-list.vue b/apps/web-antd/src/views/mall/promotion/components/spu-and-sku-list.vue
deleted file mode 100644
index 4c3aacc8a..000000000
--- a/apps/web-antd/src/views/mall/promotion/components/spu-and-sku-list.vue
+++ /dev/null
@@ -1,238 +0,0 @@
-<!-- SPU 和 SKU 列表展示组件 -->
-<script lang="ts" setup generic="T extends MallSpuApi.Spu">
-import type { SpuProperty } from './types';
-
-import type { VxeGridProps } from '#/adapter/vxe-table';
-import type { MallSpuApi } from '#/api/mall/product/spu';
-import type { RuleConfig } from '#/views/mall/product/spu/form';
-
-import { computed, ref, watch } from 'vue';
-
-import { confirm } from '@vben/common-ui';
-import { fenToYuan } from '@vben/utils';
-
-import { TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
-import { SkuList } from '#/views/mall/product/spu/form';
-
-interface SpuAndSkuListProps {
-  spuList: T[]; // SPU 列表
-  ruleConfig: RuleConfig[]; // 规则配置
-  spuPropertyList: SpuProperty<T>[]; // SPU 属性列表
-  deletable?: boolean; // 是否可删除
-}
-
-const props = withDefaults(defineProps<SpuAndSkuListProps>(), {
-  deletable: false,
-});
-
-const emit = defineEmits<{
-  delete: [spuId: number];
-}>();
-
-const spuData = ref<MallSpuApi.Spu[]>([]);
-const spuPropertyListData = ref<SpuProperty<T>[]>([]);
-const expandedRowKeys = ref<number[]>([]);
-const skuListRef = ref<InstanceType<typeof SkuList>>();
-
-const columns = computed<VxeGridProps['columns']>(() => {
-  const cols: VxeGridProps['columns'] = [
-    {
-      type: 'expand',
-      width: 50,
-      slots: { content: 'expand-content' },
-    },
-    {
-      field: 'id',
-      title: '商品编号',
-      minWidth: 100,
-      align: 'center',
-    },
-    {
-      field: 'picUrl',
-      title: '商品图',
-      width: 100,
-      align: 'center',
-      cellRender: {
-        name: 'CellImage',
-      },
-    },
-    {
-      field: 'name',
-      title: '商品名称',
-      minWidth: 300,
-      showOverflow: true,
-    },
-    {
-      field: 'price',
-      title: '商品售价',
-      minWidth: 120,
-      align: 'center',
-      formatter: ({ cellValue }) => `¥${fenToYuan(cellValue)}`,
-    },
-    {
-      field: 'salesCount',
-      title: '销量',
-      minWidth: 100,
-      align: 'center',
-    },
-    {
-      field: 'stock',
-      title: '库存',
-      minWidth: 100,
-      align: 'center',
-    },
-  ];
-
-  // 如果可删除且有多个 SPU，添加操作列
-  if (props.deletable && spuData.value.length > 1) {
-    cols.push({
-      title: '操作',
-      width: 100,
-      fixed: 'right',
-      align: 'center',
-      slots: { default: 'actions' },
-    });
-  }
-
-  return cols;
-});
-
-const [Grid, gridApi] = useVbenVxeGrid({
-  gridOptions: {
-    columns: columns.value,
-    data: spuData.value,
-    border: true,
-    showOverflow: true,
-    rowConfig: {
-      keyField: 'id',
-      isHover: true,
-    },
-    expandConfig: {
-      trigger: 'row',
-      expandRowKeys: expandedRowKeys.value,
-    },
-  },
-});
-
-/** 删除 SPU */
-async function handleDelete(row: MallSpuApi.Spu) {
-  // TODO @puhui999：可以使用 TableAction 的 popConfirm 哈？
-  await confirm({
-    content: `是否删除商品编号为 ${row.id} 的数据？`,
-  });
-  const index = spuData.value.findIndex((item) => item.id === row.id);
-  if (index !== -1) {
-    spuData.value.splice(index, 1);
-    emit('delete', row.id!);
-  }
-}
-
-/**
- * 获取所有 SKU 活动配置
- *
- * @param extendedAttribute 在 SKU 上扩展的属性名称
- */
-function getSkuConfigs(extendedAttribute: string) {
-  if (skuListRef.value) {
-    skuListRef.value.validateSku();
-  }
-
-  const configs: any[] = [];
-  spuPropertyListData.value.forEach((item) => {
-    item.spuDetail.skus?.forEach((sku: any) => {
-      if (sku[extendedAttribute]) {
-        configs.push(sku[extendedAttribute]);
-      }
-    });
-  });
-
-  return configs;
-}
-
-defineExpose({
-  getSkuConfigs,
-});
-
-/** 监听 spuList 变化 */
-watch(
-  () => props.spuList,
-  (data) => {
-    if (!data) {
-      return;
-    }
-    spuData.value = data as MallSpuApi.Spu[];
-    // 更新表格列配置和数据
-    gridApi.grid.reloadData(spuData.value);
-    gridApi.grid.reloadColumn(columns.value as any[]);
-  },
-  { deep: true, immediate: true },
-);
-
-/** 监听 spuPropertyList 变化 */
-watch(
-  () => props.spuPropertyList,
-  (data) => {
-    if (!data) {
-      return;
-    }
-    spuPropertyListData.value = data as SpuProperty<T>[];
-
-    // 延迟展开所有行，确保 SKU 列表正确渲染
-    // TODO @puhui999：只能 setTimeout 么？await 之类可以么？
-    setTimeout(() => {
-      expandedRowKeys.value = data.map((item) => item.spuId);
-      // 手动展开每一行
-      data.forEach((item) => {
-        gridApi.grid.setRowExpand(
-          spuData.value.find((spu) => spu.id === item.spuId),
-          true,
-        );
-      });
-    }, 200);
-  },
-  { deep: true, immediate: true },
-);
-</script>
-
-<template>
-  <Grid>
-    <!-- 展开内容：SKU 列表 -->
-    <template #expand-content="{ row }">
-      <div class="p-4">
-        <SkuList
-          ref="skuListRef"
-          :is-activity-component="true"
-          :prop-form-data="
-            spuPropertyListData.find((item) => item.spuId === row.id)?.spuDetail
-          "
-          :property-list="
-            spuPropertyListData.find((item) => item.spuId === row.id)
-              ?.propertyList
-          "
-          :rule-config="props.ruleConfig"
-        >
-          <!-- 扩展插槽 -->
-          <template #extension>
-            <slot></slot>
-          </template>
-        </SkuList>
-      </div>
-    </template>
-    <!-- 操作列 -->
-    <template
-      v-if="props.deletable && props.spuList.length > 1"
-      #actions="{ row }"
-    >
-      <TableAction
-        :actions="[
-          {
-            label: '删除',
-            type: 'link',
-            danger: true,
-            onClick: () => handleDelete(row),
-          },
-        ]"
-      />
-    </template>
-  </Grid>
-</template>
diff --git a/apps/web-antd/src/views/mall/promotion/components/spu-sku-select.vue b/apps/web-antd/src/views/mall/promotion/components/spu-sku-select.vue
deleted file mode 100644
index 8b1ff79d5..000000000
--- a/apps/web-antd/src/views/mall/promotion/components/spu-sku-select.vue
+++ /dev/null
@@ -1,316 +0,0 @@
-<!-- SPU 和 SKU 联合选择弹窗组件 -->
-<script lang="ts" setup>
-import type { VbenFormSchema } from '#/adapter/form';
-import type { VxeGridProps } from '#/adapter/vxe-table';
-import type { MallSpuApi } from '#/api/mall/product/spu';
-
-import { computed, onMounted, ref } from 'vue';
-
-import { useVbenModal } from '@vben/common-ui';
-import { handleTree } from '@vben/utils';
-
-import { message, Radio } from 'ant-design-vue';
-
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
-import { getCategoryList } from '#/api/mall/product/category';
-import { getSpu, getSpuPage } from '#/api/mall/product/spu';
-import { getRangePickerDefaultProps } from '#/utils';
-import { getPropertyList, SkuList } from '#/views/mall/product/spu/form';
-
-interface SpuSkuSelectProps {
-  isSelectSku?: boolean; // 是否选择 SKU
-  radio?: boolean; // 是否单选 SKU
-}
-
-const props = withDefaults(defineProps<SpuSkuSelectProps>(), {
-  isSelectSku: false,
-  radio: false,
-});
-
-const emit = defineEmits<{
-  confirm: [spuId: number, skuIds?: number[]];
-}>();
-
-const selectedSpuId = ref<number>(); // 单选：选中的 SPU ID
-const selectedSkuIds = ref<number[]>([]); // 选中的 SKU ID 列表
-const spuData = ref<MallSpuApi.Spu>();
-const propertyList = ref<any[]>([]);
-const isExpand = ref(false);
-const expandRowKeys = ref<number[]>([]);
-const skuListRef = ref<InstanceType<typeof SkuList>>();
-
-const categoryList = ref<any[]>([]); // 分类列表（扁平）
-const categoryTreeList = ref<any[]>([]); // 分类树
-
-const formSchema = computed<VbenFormSchema[]>(() => {
-  return [
-    {
-      fieldName: 'name',
-      label: '商品名称',
-      component: 'Input',
-      componentProps: {
-        placeholder: '请输入商品名称',
-        allowClear: true,
-      },
-    },
-    {
-      fieldName: 'categoryId',
-      label: '商品分类',
-      component: 'TreeSelect',
-      componentProps: {
-        treeData: categoryTreeList.value,
-        fieldNames: {
-          label: 'name',
-          value: 'id',
-        },
-        treeCheckStrictly: true,
-        placeholder: '请选择商品分类',
-        allowClear: true,
-        showSearch: true,
-        treeNodeFilterProp: 'name',
-      },
-    },
-    {
-      fieldName: 'createTime',
-      label: '创建时间',
-      component: 'RangePicker',
-      componentProps: {
-        ...getRangePickerDefaultProps(),
-        allowClear: true,
-      },
-    },
-  ];
-});
-
-const gridColumns = computed<VxeGridProps['columns']>(() => {
-  const columns: VxeGridProps['columns'] = [];
-  // 如果需要选择 SKU，添加展开列
-  if (props.isSelectSku) {
-    columns.push({
-      type: 'expand',
-      width: 50,
-      slots: { content: 'expand-content' },
-    });
-  }
-  // 单选列
-  columns.push(
-    {
-      field: 'radio',
-      title: '#',
-      width: 55,
-      align: 'center',
-      slots: { default: 'radio-column' },
-    },
-    {
-      field: 'id',
-      title: '商品编号',
-      minWidth: 100,
-      align: 'center',
-    },
-    {
-      field: 'picUrl',
-      title: '商品图',
-      width: 100,
-      align: 'center',
-      cellRender: {
-        name: 'CellImage',
-      },
-    },
-    {
-      field: 'name',
-      title: '商品名称',
-      minWidth: 200,
-    },
-    {
-      field: 'categoryId',
-      title: '商品分类',
-      minWidth: 120,
-      formatter: ({ cellValue }) => {
-        const category = categoryList.value?.find((c) => c.id === cellValue);
-        return category?.name || '-';
-      },
-    },
-  );
-  return columns;
-});
-
-const [Grid, gridApi] = useVbenVxeGrid({
-  formOptions: {
-    schema: formSchema.value,
-    layout: 'horizontal',
-    collapsed: false,
-  },
-  gridOptions: {
-    columns: gridColumns.value,
-    height: 500,
-    border: true,
-    showOverflow: true,
-    expandConfig: {
-      expandRowKeys: expandRowKeys.value,
-    },
-    proxyConfig: {
-      ajax: {
-        async query({ page }: any, formValues: any) {
-          try {
-            // TODO @puhui999：1）try catch 可以去掉？；2）params 直接放到 getSpuPage 里哇？
-            const params = {
-              pageNo: page.currentPage,
-              pageSize: page.pageSize,
-              tabType: 0, // 默认获取上架的商品
-              name: formValues.name || undefined,
-              categoryId: formValues.categoryId || undefined,
-              createTime: formValues.createTime || undefined,
-            };
-
-            const data = await getSpuPage(params);
-
-            return {
-              items: data.list || [],
-              total: data.total || 0,
-            };
-          } catch (error) {
-            console.error('加载商品数据失败:', error);
-            return { items: [], total: 0 };
-          }
-        },
-      },
-    },
-  },
-});
-
-/** 单选：处理选中 SPU */
-async function handleSingleSelected(row: MallSpuApi.Spu) {
-  selectedSpuId.value = row.id;
-  // 如果需要选择 SKU，展开行
-  if (props.isSelectSku) {
-    await expandChange(row, [row]);
-  }
-}
-
-/** 选择 SKU */
-function selectSku(skus: MallSpuApi.Sku[]) {
-  if (!selectedSpuId.value) {
-    message.warning('请先选择商品再选择相应的规格！');
-    return;
-  }
-  if (skus.length === 0) {
-    selectedSkuIds.value = [];
-    return;
-  }
-  props.radio
-    ? (selectedSkuIds.value = [skus[0]?.id!])
-    : (selectedSkuIds.value = skus.map((sku) => sku.id!));
-}
-
-/** 展开行，加载 SKU 列表 */
-async function expandChange(
-  row: MallSpuApi.Spu,
-  expandedRows?: MallSpuApi.Spu[],
-) {
-  // 检查是否是当前选中的 SPU
-  if (selectedSpuId.value && row.id !== selectedSpuId.value) {
-    message.warning('你已选择商品，请先取消');
-    expandRowKeys.value = [selectedSpuId.value];
-    return;
-  }
-  // 如果已经展开且是同一个 SPU，不重复加载
-  if (isExpand.value && spuData.value?.id === row.id) {
-    return;
-  }
-
-  // 重置数据
-  spuData.value = undefined;
-  propertyList.value = [];
-  isExpand.value = false;
-  if (!expandedRows || expandedRows.length === 0) {
-    expandRowKeys.value = [];
-    return;
-  }
-
-  // 加载 SPU 详情
-  const res = await getSpu(row.id!);
-  propertyList.value = getPropertyList(res);
-  spuData.value = res;
-  isExpand.value = true;
-  expandRowKeys.value = [row.id!];
-}
-
-/** 确认选择 */
-function handleConfirm() {
-  if (!selectedSpuId.value) {
-    message.warning('没有选择任何商品');
-    return;
-  }
-  if (props.isSelectSku && selectedSkuIds.value.length === 0) {
-    message.warning('没有选择任何商品属性');
-    return;
-  }
-
-  // 返回选中的数据
-  emit(
-    'confirm',
-    selectedSpuId.value,
-    props.isSelectSku ? selectedSkuIds.value : undefined,
-  );
-  // 关闭弹窗
-  modalApi.close();
-}
-
-const [Modal, modalApi] = useVbenModal({
-  onConfirm: handleConfirm,
-  async onOpenChange(isOpen: boolean) {
-    if (!isOpen) {
-      // 关闭时清理状态
-      selectedSpuId.value = undefined;
-      selectedSkuIds.value = [];
-      spuData.value = undefined;
-      propertyList.value = [];
-      isExpand.value = false;
-      expandRowKeys.value = [];
-      return;
-    }
-
-    // 打开时触发查询
-    await gridApi.query();
-  },
-});
-defineExpose({
-  open: modalApi.open,
-  close: modalApi.close,
-});
-/** 初始化分类数据 */
-onMounted(async () => {
-  categoryList.value = await getCategoryList({});
-  categoryTreeList.value = handleTree(categoryList.value, 'id', 'parentId');
-});
-</script>
-
-<template>
-  <Modal class="w-[900px]" title="商品选择">
-    <Grid>
-      <!-- 单选列 -->
-      <template #radio-column="{ row }">
-        <Radio
-          :checked="selectedSpuId === row.id"
-          :value="row.id"
-          class="cursor-pointer"
-          @click="handleSingleSelected(row)"
-        />
-      </template>
-
-      <!-- SKU 展开内容 -->
-      <template v-if="props.isSelectSku" #expand-content>
-        <div v-if="isExpand" class="p-4">
-          <SkuList
-            ref="skuListRef"
-            :is-component="true"
-            :is-detail="true"
-            :prop-form-data="spuData"
-            :property-list="propertyList"
-            @selection-change="selectSku"
-          />
-        </div>
-      </template>
-    </Grid>
-  </Modal>
-</template>
diff --git a/apps/web-antd/src/views/mall/promotion/components/types.ts b/apps/web-antd/src/views/mall/promotion/components/types.ts
deleted file mode 100644
index ff4ecc96f..000000000
--- a/apps/web-antd/src/views/mall/promotion/components/types.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import type { PropertyAndValues } from '#/views/mall/product/spu/form';
-
-/**
- * SPU 属性配置
- * 用于活动商品选择中，关联 SPU 和其属性列表
- */
-export interface SpuProperty<T = any> {
-  spuId: number; // SPU ID
-  spuDetail: T; // SPU 详情
-  propertyList: PropertyAndValues[]; // 属性列表
-}
diff --git a/apps/web-antd/src/views/mall/promotion/components/vertical-button-group/index.vue b/apps/web-antd/src/views/mall/promotion/components/vertical-button-group/index.vue
new file mode 100644
index 000000000..7af14dbcc
--- /dev/null
+++ b/apps/web-antd/src/views/mall/promotion/components/vertical-button-group/index.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+/**
+ * 垂直按钮组
+ * Element 官方的按钮组只支持水平显示，通过重写样式实现垂直布局
+ */
+defineOptions({ name: 'VerticalButtonGroup' });
+</script>
+
+<template>
+  <ButtonGroup direction="vertical" v-bind="$attrs">
+    <slot></slot>
+  </ButtonGroup>
+</template>
+
+<style scoped lang="scss"></style>

From 0fb4f0f9ebe79ce7bf19b90c94f64aa8420b6d34 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sat, 25 Oct 2025 23:40:03 +0800
Subject: [PATCH 4/5] =?UTF-8?q?feat=EF=BC=9A=E3=80=90antd=E3=80=91?=
 =?UTF-8?q?=E3=80=90mall=E3=80=91diy-editor=20=E5=88=9D=E5=A7=8B=E5=8C=96?=
 =?UTF-8?q?=EF=BC=88=E6=9A=82=E6=97=B6=E4=B8=8D=E5=8F=AF=E7=94=A8=EF=BC=8C?=
 =?UTF-8?q?=E4=BF=9D=E8=AF=81=E7=95=8C=E9=9D=A2=E5=85=88=E6=9C=89=E3=80=82?=
 =?UTF-8?q?=E3=80=82=E3=80=82=EF=BC=89linter?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../app-link-input/app-link-select-dialog.vue | 12 ++++------
 .../components/app-link-input/index.vue       |  6 ++++-
 .../component-container-property.vue          |  6 ++++-
 .../components/component-container.vue        |  7 ++----
 .../components/component-library.vue          |  7 ++----
 .../components/mobile/Carousel/config.ts      |  5 +---
 .../components/mobile/Carousel/index.vue      |  9 ++++---
 .../components/mobile/Carousel/property.vue   |  3 ++-
 .../components/mobile/Divider/property.vue    |  5 ++--
 .../components/mobile/Popover/index.vue       |  1 -
 .../components/mobile/Popover/property.vue    |  3 +--
 .../components/mobile/coupon-card/config.ts   |  5 +---
 .../components/mobile/coupon-card/index.vue   |  1 -
 .../mobile/coupon-card/property.vue           |  4 +---
 .../floating-action-button/property.vue       |  3 +--
 .../components/hot-zone-edit-dialog/index.vue | 13 ++++------
 .../components/mobile/hot-zone/config.ts      |  5 +---
 .../components/mobile/hot-zone/index.vue      |  1 -
 .../components/mobile/hot-zone/property.vue   |  2 +-
 .../components/mobile/image-bar/config.ts     |  5 +---
 .../components/mobile/image-bar/index.vue     |  8 +++++--
 .../components/mobile/image-bar/property.vue  |  3 ++-
 .../components/mobile/magic-cube/config.ts    |  5 +---
 .../components/mobile/magic-cube/index.vue    |  1 -
 .../components/mobile/magic-cube/property.vue |  7 ++----
 .../components/mobile/menu-grid/config.ts     |  5 +---
 .../components/mobile/menu-grid/index.vue     |  8 +++++--
 .../components/mobile/menu-list/config.ts     |  5 +---
 .../components/mobile/menu-list/index.vue     |  1 -
 .../components/mobile/menu-list/property.vue  |  5 +---
 .../components/mobile/menu-swiper/config.ts   |  5 +---
 .../components/mobile/menu-swiper/index.vue   |  5 ++--
 .../mobile/menu-swiper/property.vue           |  5 ++--
 .../components/cell-property.vue              |  6 ++---
 .../mobile/navigation-bar/index.vue           |  4 ++--
 .../components/mobile/notice-bar/config.ts    |  5 +---
 .../components/mobile/notice-bar/index.vue    |  1 -
 .../components/mobile/notice-bar/property.vue |  5 +---
 .../mobile/page-config/property.vue           |  7 +++++-
 .../components/mobile/product-card/config.ts  |  5 +---
 .../components/mobile/product-card/index.vue  |  1 -
 .../mobile/product-card/property.vue          |  5 ++--
 .../components/mobile/product-list/config.ts  |  5 +---
 .../components/mobile/product-list/index.vue  |  1 -
 .../mobile/product-list/property.vue          |  3 ++-
 .../mobile/promotion-article/config.ts        |  5 +---
 .../mobile/promotion-article/property.vue     |  1 +
 .../mobile/promotion-combination/config.ts    |  5 +---
 .../mobile/promotion-combination/index.vue    |  1 -
 .../mobile/promotion-point/config.ts          |  5 +---
 .../mobile/promotion-point/index.vue          |  1 -
 .../mobile/promotion-point/property.vue       |  5 ++--
 .../mobile/promotion-seckill/config.ts        |  5 +---
 .../mobile/promotion-seckill/index.vue        |  1 -
 .../mobile/promotion-seckill/property.vue     |  9 +++----
 .../components/mobile/search-bar/config.ts    |  5 +---
 .../components/mobile/search-bar/property.vue |  7 ++----
 .../components/mobile/tab-bar/index.vue       |  2 --
 .../components/mobile/tab-bar/property.vue    | 22 +++++++++++++----
 .../components/mobile/title-bar/config.ts     |  5 +---
 .../components/mobile/title-bar/index.vue     |  1 -
 .../components/mobile/title-bar/property.vue  |  5 ++--
 .../components/mobile/user-card/config.ts     |  5 +---
 .../components/mobile/user-card/index.vue     |  1 -
 .../components/mobile/user-coupon/config.ts   |  5 +---
 .../components/mobile/user-coupon/index.vue   |  1 -
 .../components/mobile/user-order/config.ts    |  5 +---
 .../components/mobile/user-order/index.vue    |  1 -
 .../components/mobile/user-wallet/config.ts   |  5 +---
 .../components/mobile/user-wallet/index.vue   |  1 -
 .../components/mobile/video-player/config.ts  |  5 +---
 .../components/mobile/video-player/index.vue  |  7 +-----
 .../mobile/video-player/property.vue          | 11 ++++-----
 .../promotion/components/diy-editor/index.vue | 24 +++++++------------
 .../promotion/components/draggable/index.vue  |  2 +-
 75 files changed, 137 insertions(+), 235 deletions(-)

diff --git a/apps/web-antd/src/views/mall/promotion/components/app-link-input/app-link-select-dialog.vue b/apps/web-antd/src/views/mall/promotion/components/app-link-input/app-link-select-dialog.vue
index 4102d7063..6f87ab295 100644
--- a/apps/web-antd/src/views/mall/promotion/components/app-link-input/app-link-select-dialog.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/app-link-input/app-link-select-dialog.vue
@@ -120,8 +120,9 @@ function handleGroupSelected(group: string) {
 
 /** 自动滚动分组按钮，确保分组按钮保持在可视区域内 */
 function scrollToGroupBtn(group: string) {
-  const groupBtn = groupBtnRefs.value
-    .find((ref: HTMLButtonElement | undefined) => ref?.textContent === group);
+  const groupBtn = groupBtnRefs.value.find(
+    (ref: HTMLButtonElement | undefined) => ref?.textContent === group,
+  );
   if (groupBtn && groupScrollbar.value) {
     groupScrollbar.value.scrollTop = groupBtn.offsetTop;
   }
@@ -150,14 +151,11 @@ function handleProductCategorySelected(id: number) {
   <Modal v-model:open="dialogVisible" title="选择链接" width="65%">
     <div class="flex h-[500px] gap-2">
       <!-- 左侧分组列表 -->
-      <div
-        class="h-full overflow-y-auto flex flex-col"
-        ref="groupScrollbar"
-      >
+      <div class="flex h-full flex-col overflow-y-auto" ref="groupScrollbar">
         <Button
           v-for="(group, groupIndex) in APP_LINK_GROUP_LIST"
           :key="groupIndex"
-          class="ml-0 mr-4 w-[90px] justify-start mb-1"
+          class="mb-1 ml-0 mr-4 w-[90px] justify-start"
           :class="[{ active: activeGroup === group.name }]"
           ref="groupBtnRefs"
           :type="activeGroup === group.name ? 'primary' : 'default'"
diff --git a/apps/web-antd/src/views/mall/promotion/components/app-link-input/index.vue b/apps/web-antd/src/views/mall/promotion/components/app-link-input/index.vue
index 368ca6500..dc5741ca6 100644
--- a/apps/web-antd/src/views/mall/promotion/components/app-link-input/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/app-link-input/index.vue
@@ -39,7 +39,11 @@ watch(
 </script>
 <template>
   <InputGroup compact>
-    <Input v-model:value="appLink" placeholder="输入或选择链接" class="flex-1" />
+    <Input
+      v-model:value="appLink"
+      placeholder="输入或选择链接"
+      class="flex-1"
+    />
     <Button @click="handleOpenDialog">选择</Button>
   </InputGroup>
 
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-container-property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-container-property.vue
index 700faa796..96a4adf43 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-container-property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-container-property.vue
@@ -122,7 +122,11 @@ const handleSliderChange = (prop: string) => {
     <!-- 每个组件的通用内容 -->
     <TabPane tab="样式" key="style">
       <Card title="组件样式" class="property-group">
-        <Form :model="formData" labelCol="{ span: 6 }" wrapperCol="{ span: 18 }">
+        <Form
+          :model="formData"
+          label-col="{ span: 6 }"
+          wrapper-col="{ span: 18 }"
+        >
           <FormItem label="组件背景" name="bgType">
             <RadioGroup v-model:value="formData.bgType">
               <Radio value="color">纯色</Radio>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-container.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-container.vue
index 4cfae8d55..add4b6f82 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-container.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-container.vue
@@ -1,16 +1,13 @@
 <script setup lang="ts">
-import type {
-  ComponentStyle,
-  DiyComponent,
-} from '../util';
+import type { ComponentStyle, DiyComponent } from '../util';
 
 import { computed } from 'vue';
 
 import { IconifyIcon } from '@vben/icons';
 
+import { VerticalButtonGroup } from '#/views/mall/promotion/components';
 
 import { components } from './mobile';
-import { VerticalButtonGroup } from '#/views/mall/promotion/components';
 
 /**
  * 组件容器：目前在中间部分
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-library.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-library.vue
index 4ae265286..a86f5b4d5 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-library.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-library.vue
@@ -1,8 +1,5 @@
 <script setup lang="ts">
-import type {
-  DiyComponent,
-  DiyComponentLibrary,
-} from '../util';
+import type { DiyComponent, DiyComponentLibrary } from '../util';
 
 import { reactive, watch } from 'vue';
 
@@ -66,7 +63,7 @@ const handleCloneComponent = (component: DiyComponent<any>) => {
 <template>
   <div class="editor-left w-[261px]">
     <div class="h-full overflow-y-auto">
-      <Collapse v-model:activeKey="extendGroups">
+      <Collapse v-model:active-key="extendGroups">
         <CollapsePanel
           v-for="group in groups"
           :key="group.name"
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Carousel/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Carousel/config.ts
index 514f45e89..f63a0bcb6 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Carousel/config.ts
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Carousel/config.ts
@@ -1,7 +1,4 @@
-import type {
-  ComponentStyle,
-  DiyComponent,
-} from '../../../util';
+import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 轮播图属性 */
 export interface CarouselProperty {
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Carousel/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Carousel/index.vue
index b79872625..74a2fcf0a 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Carousel/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Carousel/index.vue
@@ -5,7 +5,6 @@ import { ref } from 'vue';
 
 import { IconifyIcon } from '@vben/icons';
 
-
 /** 轮播图 */
 defineOptions({ name: 'Carousel' });
 
@@ -27,13 +26,17 @@ const handleIndexChange = (index: number) => {
   <div v-else class="relative">
     <Carousel
       :autoplay="property.autoplay"
-      :autoplaySpeed="property.interval * 1000"
+      :autoplay-speed="property.interval * 1000"
       :dots="property.indicator !== 'number'"
       @change="handleIndexChange"
       class="h-[174px]"
     >
       <div v-for="(item, index) in property.items" :key="index">
-        <Image class="h-full w-full object-cover" :src="item.imgUrl" :preview="false" />
+        <Image
+          class="h-full w-full object-cover"
+          :src="item.imgUrl"
+          :preview="false"
+        />
       </div>
     </Carousel>
     <div
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Carousel/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Carousel/property.vue
index 6437898bd..3dcc075e5 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Carousel/property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Carousel/property.vue
@@ -5,11 +5,12 @@ import { IconifyIcon } from '@vben/icons';
 
 import { useVModel } from '@vueuse/core';
 
-import ComponentContainerProperty from '../../component-container-property.vue';
 import UploadFile from '#/components/upload/file-upload.vue';
 import UploadImg from '#/components/upload/image-upload.vue';
 import { AppLinkInput, Draggable } from '#/views/mall/promotion/components';
 
+import ComponentContainerProperty from '../../component-container-property.vue';
+
 // 轮播图属性面板
 defineOptions({ name: 'CarouselProperty' });
 
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Divider/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Divider/property.vue
index d683e0b5c..67e4a545b 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Divider/property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Divider/property.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import type { DividerProperty } from './config';
 
-import { IconifyIcon } from '@vben/icons';
 
-import { useVModel } from '@vueuse/core';
+
+
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Popover/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Popover/index.vue
index 3f9610825..d6b5d4396 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Popover/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Popover/index.vue
@@ -5,7 +5,6 @@ import { ref } from 'vue';
 
 import { IconifyIcon } from '@vben/icons';
 
-
 /** 弹窗广告 */
 defineOptions({ name: 'Popover' });
 // 定义属性
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Popover/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Popover/property.vue
index de599eb63..f7d85cda2 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Popover/property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/Popover/property.vue
@@ -1,4 +1,3 @@
 <script setup lang="ts">
-import type { PopoverProperty } from './config';
 
-import { useVModel } from '@vueuse/core';
+
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/config.ts
index 89cc71703..4392494d3 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/config.ts
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/config.ts
@@ -1,7 +1,4 @@
-import type {
-  ComponentStyle,
-  DiyComponent,
-} from '../../../util';
+import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 商品卡片属性 */
 export interface CouponCardProperty {
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/index.vue
index 2c134c946..23216b9a8 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/index.vue
@@ -5,7 +5,6 @@ import type { MallCouponTemplateApi } from '#/api/mall/promotion/coupon/couponTe
 
 import { onMounted, ref, watch } from 'vue';
 
-
 import * as CouponTemplateApi from '#/api/mall/promotion/coupon/couponTemplate';
 
 import {
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/property.vue
index 19f2f7bc2..67e4a545b 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/property.vue
@@ -1,7 +1,5 @@
 <script setup lang="ts">
-import type { CouponCardProperty } from './config';
 
-import type { MallCouponTemplateApi } from '#/api/mall/promotion/coupon/couponTemplate';
 
-import { ref, watch } from 'vue';
+
 
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/floating-action-button/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/floating-action-button/property.vue
index bf3c071d8..f7d85cda2 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/floating-action-button/property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/floating-action-button/property.vue
@@ -1,4 +1,3 @@
 <script setup lang="ts">
-import type { FloatingActionButtonProperty } from './config';
 
-import { useVModel } from '@vueuse/core';
+
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/components/hot-zone-edit-dialog/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/components/hot-zone-edit-dialog/index.vue
index 4aa2a2903..df0c9d510 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/components/hot-zone-edit-dialog/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/components/hot-zone-edit-dialog/index.vue
@@ -1,11 +1,8 @@
 <script setup lang="ts">
-import type { ControlDot } from './controller';
-
-import type { HotZoneItemProperty } from '../../config';
-import type { AppLink } from '#/views/mall/promotion/components/app-link-input/data';
-
-import { ref } from 'vue';
-
-import { IconifyIcon } from '@vben/icons';
+
+
+
+
+
 
 
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/config.ts
index fdb06b983..464881740 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/config.ts
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/config.ts
@@ -1,7 +1,4 @@
-import type {
-  ComponentStyle,
-  DiyComponent,
-} from '../../../util';
+import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 热区属性 */
 export interface HotZoneProperty {
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/index.vue
index efbe5be06..37bab23f1 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/index.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { HotZoneProperty } from './config';
 
-
 /** 热区 */
 defineOptions({ name: 'HotZone' });
 const props = defineProps<{ property: HotZoneProperty }>();
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/property.vue
index b0b9596e4..edc7751fd 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/property.vue
@@ -5,9 +5,9 @@ import { ref } from 'vue';
 
 import { useVModel } from '@vueuse/core';
 
-import ComponentContainerProperty from '../../component-container-property.vue';
 import UploadImg from '#/components/upload/image-upload.vue';
 
+import ComponentContainerProperty from '../../component-container-property.vue';
 import HotZoneEditDialog from './components/hot-zone-edit-dialog/index.vue';
 
 /** 热区属性面板 */
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/config.ts
index 1d2c4ac01..0025ff4db 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/config.ts
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/config.ts
@@ -1,7 +1,4 @@
-import type {
-  ComponentStyle,
-  DiyComponent,
-} from '../../../util';
+import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 图片展示属性 */
 export interface ImageBarProperty {
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/index.vue
index 201831030..5be469d97 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/index.vue
@@ -3,7 +3,6 @@ import type { ImageBarProperty } from './config';
 
 import { IconifyIcon } from '@vben/icons';
 
-
 /** 图片展示 */
 defineOptions({ name: 'ImageBar' });
 
@@ -17,7 +16,12 @@ defineProps<{ property: ImageBarProperty }>();
   >
     <IconifyIcon icon="ep:picture" class="text-3xl text-gray-600" />
   </div>
-  <Image class="min-h-8 w-full" v-else :src="property.imgUrl" :preview="false" />
+  <Image
+    class="min-h-8 w-full"
+    v-else
+    :src="property.imgUrl"
+    :preview="false"
+  />
 </template>
 
 <style scoped lang="scss">
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/property.vue
index b32213318..09e35204c 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/property.vue
@@ -3,10 +3,11 @@ import type { ImageBarProperty } from './config';
 
 import { useVModel } from '@vueuse/core';
 
-import ComponentContainerProperty from '../../component-container-property.vue';
 import UploadImg from '#/components/upload/image-upload.vue';
 import { AppLinkInput } from '#/views/mall/promotion/components';
 
+import ComponentContainerProperty from '../../component-container-property.vue';
+
 // 图片展示属性面板
 defineOptions({ name: 'ImageBarProperty' });
 
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/config.ts
index ff9cbb8f0..ef03fc9a6 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/config.ts
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/config.ts
@@ -1,7 +1,4 @@
-import type {
-  ComponentStyle,
-  DiyComponent,
-} from '../../../util';
+import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 广告魔方属性 */
 export interface MagicCubeProperty {
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/index.vue
index d2c6d6779..1b3418b18 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/index.vue
@@ -5,7 +5,6 @@ import { computed } from 'vue';
 
 import { IconifyIcon } from '@vben/icons';
 
-
 /** 广告魔方 */
 defineOptions({ name: 'MagicCube' });
 const props = defineProps<{ property: MagicCubeProperty }>();
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/property.vue
index ce5578a0c..ed9f0defc 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/property.vue
@@ -1,9 +1,6 @@
 <script setup lang="ts">
-import type { MagicCubeProperty } from './config';
 
-import { ref } from 'vue';
 
-import { useVModel } from '@vueuse/core';
 
-import ComponentContainerProperty from '../../component-container-property.vue';
-import UploadImg from '#/components/upload/image-upload.vue';
+
+
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/config.ts
index 65bc9f4ca..db6b55264 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/config.ts
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/config.ts
@@ -1,7 +1,4 @@
-import type {
-  ComponentStyle,
-  DiyComponent,
-} from '../../../util';
+import type { ComponentStyle, DiyComponent } from '../../../util';
 
 import { cloneDeep } from '@vben/utils';
 
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/index.vue
index e82c04ca6..c1ff5d207 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-grid/index.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { MenuGridProperty } from './config';
 
-
 /** 宫格导航 */
 defineOptions({ name: 'MenuGrid' });
 defineProps<{ property: MenuGridProperty }>();
@@ -26,7 +25,12 @@ defineProps<{ property: MenuGridProperty }>();
       >
         {{ item.badge.text }}
       </span>
-      <Image v-if="item.iconUrl" class="h-7 w-7" :src="item.iconUrl" :preview="false" />
+      <Image
+        v-if="item.iconUrl"
+        class="h-7 w-7"
+        :src="item.iconUrl"
+        :preview="false"
+      />
       <span
         class="mt-2 h-4 text-xs leading-4"
         :style="{ color: item.titleColor }"
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-list/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-list/config.ts
index 389982595..6567c553d 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-list/config.ts
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-list/config.ts
@@ -1,7 +1,4 @@
-import type {
-  ComponentStyle,
-  DiyComponent,
-} from '../../../util';
+import type { ComponentStyle, DiyComponent } from '../../../util';
 
 import { cloneDeep } from '@vben/utils';
 
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-list/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-list/index.vue
index cfe38a9ae..acfbb467f 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-list/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-list/index.vue
@@ -3,7 +3,6 @@ import type { MenuListProperty } from './config';
 
 import { IconifyIcon } from '@vben/icons';
 
-
 /** 列表导航 */
 defineOptions({ name: 'MenuList' });
 defineProps<{ property: MenuListProperty }>();
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-list/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-list/property.vue
index f2de06c79..67473946a 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-list/property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-list/property.vue
@@ -1,7 +1,4 @@
 <script setup lang="ts">
-import type { MenuListProperty } from './config';
 
-import { useVModel } from '@vueuse/core';
 
-import ComponentContainerProperty from '../../component-container-property.vue';
-import UploadImg from '#/components/upload/image-upload.vue';
+
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-swiper/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-swiper/config.ts
index b73213ac7..27138ebee 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-swiper/config.ts
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-swiper/config.ts
@@ -1,7 +1,4 @@
-import type {
-  ComponentStyle,
-  DiyComponent,
-} from '../../../util';
+import type { ComponentStyle, DiyComponent } from '../../../util';
 
 import { cloneDeep } from '@vben/utils';
 
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-swiper/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-swiper/index.vue
index 0f3b1bb6a..cfbc7517a 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-swiper/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-swiper/index.vue
@@ -3,7 +3,6 @@ import type { MenuSwiperItemProperty, MenuSwiperProperty } from './config';
 
 import { ref, watch } from 'vue';
 
-
 /** 菜单导航 */
 defineOptions({ name: 'MenuSwiper' });
 const props = defineProps<{ property: MenuSwiperProperty }>();
@@ -119,7 +118,7 @@ watch(
     width: 6px;
     height: 6px;
     border-radius: 6px;
-    
+
     button {
       width: 6px;
       height: 6px;
@@ -127,7 +126,7 @@ watch(
       background: #ff6000;
     }
   }
-  
+
   .ant-carousel-dot-active button {
     width: 12px;
     background: #ff6000;
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-swiper/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-swiper/property.vue
index 201db0f29..67e4a545b 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-swiper/property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-swiper/property.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import type { MenuSwiperProperty } from './config';
 
-import { cloneDeep } from '@vben/utils';
 
-import { useVModel } from '@vueuse/core';
+
+
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/components/cell-property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/components/cell-property.vue
index 96729174f..c71c2c528 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/components/cell-property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/components/cell-property.vue
@@ -1,8 +1,6 @@
 <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 { useVModel } from '@vueuse/core';
+
+
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/index.vue
index 28376f73e..9e3b17a07 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/index.vue
@@ -1,16 +1,16 @@
 <script setup lang="ts">
 import type { StyleValue } from 'vue';
 
+import type { SearchProperty } from '../search-bar/config';
 import type {
   NavigationBarCellProperty,
   NavigationBarProperty,
 } from './config';
 
-import type { SearchProperty } from '../search-bar/config';
-
 import { computed } from 'vue';
 
 import appNavbarMp from '#/assets/imgs/diy/app-nav-bar-mp.png';
+
 import SearchBar from '../search-bar/index.vue';
 
 /** 页面顶部导航栏 */
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/config.ts
index 9eb1ca8e1..2d4acffb2 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/config.ts
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/config.ts
@@ -1,7 +1,4 @@
-import type {
-  ComponentStyle,
-  DiyComponent,
-} from '../../../util';
+import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 公告栏属性 */
 export interface NoticeBarProperty {
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/index.vue
index a087c6ef8..eef5a37d8 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/index.vue
@@ -3,7 +3,6 @@ import type { NoticeBarProperty } from './config';
 
 import { IconifyIcon } from '@vben/icons';
 
-
 /** 公告栏 */
 defineOptions({ name: 'NoticeBar' });
 
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/property.vue
index 10c482958..67473946a 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/notice-bar/property.vue
@@ -1,7 +1,4 @@
 <script setup lang="ts">
-import type { NoticeBarProperty } from './config';
 
-import { useVModel } from '@vueuse/core';
 
-import ComponentContainerProperty from '../../component-container-property.vue';
-import UploadImg from '#/components/upload/image-upload.vue';
+
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/page-config/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/page-config/property.vue
index 951730f5c..7f9e8b9d7 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/page-config/property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/page-config/property.vue
@@ -19,7 +19,12 @@ const formData = useVModel(props, 'modelValue', emit);
 </script>
 
 <template>
-  <Form :model="formData" :rules="rules" labelCol="{ span: 6 }" wrapperCol="{ span: 18 }">
+  <Form
+    :model="formData"
+    :rules="rules"
+    label-col="{ span: 6 }"
+    wrapper-col="{ span: 18 }"
+  >
     <FormItem label="页面描述" name="description">
       <Textarea
         v-model:value="formData!.description"
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-card/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-card/config.ts
index 1dd88d7b8..d165b01f6 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-card/config.ts
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-card/config.ts
@@ -1,7 +1,4 @@
-import type {
-  ComponentStyle,
-  DiyComponent,
-} from '../../../util';
+import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 商品卡片属性 */
 export interface ProductCardProperty {
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-card/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-card/index.vue
index 1a5deb3dd..fb064c366 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-card/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-card/index.vue
@@ -7,7 +7,6 @@ import { ref, watch } from 'vue';
 
 import { fenToYuan } from '@vben/utils';
 
-
 import * as ProductSpuApi from '#/api/mall/product/spu';
 
 /** 商品卡片 */
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-card/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-card/property.vue
index e5ea04063..67e4a545b 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-card/property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-card/property.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import type { ProductCardProperty } from './config';
 
-import { IconifyIcon } from '@vben/icons';
 
-import { useVModel } from '@vueuse/core';
+
+
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/config.ts
index 069dcabdc..20b4d37af 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/config.ts
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/config.ts
@@ -1,7 +1,4 @@
-import type {
-  ComponentStyle,
-  DiyComponent,
-} from '../../../util';
+import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 商品栏属性 */
 export interface ProductListProperty {
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/index.vue
index 319ee21b7..a1322b217 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/index.vue
@@ -7,7 +7,6 @@ import { onMounted, ref, watch } from 'vue';
 
 import { fenToYuan } from '@vben/utils';
 
-
 import * as ProductSpuApi from '#/api/mall/product/spu';
 
 /** 商品栏 */
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/property.vue
index a2e35a9ae..dfdc977bb 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/property.vue
@@ -5,9 +5,10 @@ import { IconifyIcon } from '@vben/icons';
 
 import { useVModel } from '@vueuse/core';
 
-import ComponentContainerProperty from '../../component-container-property.vue';
 import UploadImg from '#/components/upload/image-upload.vue';
 import { InputWithColor as 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';
 
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/config.ts
index c477994aa..9a1fc4194 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/config.ts
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/config.ts
@@ -1,7 +1,4 @@
-import type {
-  ComponentStyle,
-  DiyComponent,
-} from '../../../util';
+import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 营销文章属性 */
 export interface PromotionArticleProperty {
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/property.vue
index 939adce8d..9cd1df023 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/property.vue
@@ -8,6 +8,7 @@ import { onMounted, ref } from 'vue';
 import { useVModel } from '@vueuse/core';
 
 import * as ArticleApi from '#/api/mall/promotion/article/index';
+
 import ComponentContainerProperty from '../../component-container-property.vue';
 
 // 营销文章属性面板
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/config.ts
index 3860ccd56..f0497dc19 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/config.ts
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/config.ts
@@ -1,7 +1,4 @@
-import type {
-  ComponentStyle,
-  DiyComponent,
-} from '../../../util';
+import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 拼团属性 */
 export interface PromotionCombinationProperty {
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/index.vue
index b98c763b6..566bb5d07 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/index.vue
@@ -8,7 +8,6 @@ import { ref, watch } from 'vue';
 
 import { fenToYuan } from '@vben/utils';
 
-
 import * as ProductSpuApi from '#/api/mall/product/spu';
 import * as CombinationActivityApi from '#/api/mall/promotion/combination/combinationActivity';
 
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/config.ts
index bdb5cacc4..738ca3b31 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/config.ts
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/config.ts
@@ -1,7 +1,4 @@
-import type {
-  ComponentStyle,
-  DiyComponent,
-} from '../../../util';
+import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 积分商城属性 */
 export interface PromotionPointProperty {
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/index.vue
index 83301ff7b..a33969044 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/index.vue
@@ -7,7 +7,6 @@ import { ref, watch } from 'vue';
 
 import { fenToYuan } from '@vben/utils';
 
-
 import * as ProductSpuApi from '#/api/mall/product/spu';
 import * as PointActivityApi from '#/api/mall/promotion/point';
 
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/property.vue
index ea798e3dd..32257e1b4 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/property.vue
@@ -1,6 +1,5 @@
 <script lang="ts" setup>
-import type { PromotionPointProperty } from './config';
 
-import { IconifyIcon } from '@vben/icons';
 
-import { useVModel } from '@vueuse/core';
+
+
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-seckill/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-seckill/config.ts
index 289fc4e80..a38d9455b 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-seckill/config.ts
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-seckill/config.ts
@@ -1,7 +1,4 @@
-import type {
-  ComponentStyle,
-  DiyComponent,
-} from '../../../util';
+import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 秒杀属性 */
 export interface PromotionSeckillProperty {
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-seckill/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-seckill/index.vue
index efc9ead79..8a9eb5a00 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-seckill/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-seckill/index.vue
@@ -8,7 +8,6 @@ import { ref, watch } from 'vue';
 
 import { fenToYuan } from '@vben/utils';
 
-
 import * as ProductSpuApi from '#/api/mall/product/spu';
 import * as SeckillActivityApi from '#/api/mall/promotion/seckill/seckillActivity';
 
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-seckill/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-seckill/property.vue
index 459744bf1..df0c9d510 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-seckill/property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-seckill/property.vue
@@ -1,11 +1,8 @@
 <script setup lang="ts">
-import type { PromotionSeckillProperty } from './config';
 
-import type { MallSeckillActivityApi } from '#/api/mall/promotion/seckill/seckillActivity';
 
-import { onMounted, ref } from 'vue';
 
-import { CommonStatusEnum } from '@vben/constants';
-import { IconifyIcon } from '@vben/icons';
 
-import { useVModel } from '@vueuse/core';
+
+
+
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/config.ts
index d30952a02..01d5894d1 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/config.ts
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/config.ts
@@ -1,7 +1,4 @@
-import type {
-  ComponentStyle,
-  DiyComponent,
-} from '../../../util';
+import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 搜索框属性 */
 export interface SearchProperty {
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/property.vue
index e978ebc36..ed9f0defc 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/property.vue
@@ -1,9 +1,6 @@
 <script setup lang="ts">
-import type { SearchProperty } from './config';
 
-import { watch } from 'vue';
 
-import { IconifyIcon } from '@vben/icons';
-import { isString } from '@vben/utils';
 
-import { useVModel } from '@vueuse/core';
+
+
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/index.vue
index 8a0d1d17c..59fda8a81 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/index.vue
@@ -3,8 +3,6 @@ import type { TabBarProperty } from './config';
 
 import { IconifyIcon } from '@vben/icons';
 
-
-
 /** 页面底部导航栏 */
 defineOptions({ name: 'TabBar' });
 
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/property.vue
index 13040b873..c5f37404a 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/tab-bar/property.vue
@@ -35,7 +35,7 @@ const handleThemeChange = () => {
 <template>
   <div class="tab-bar">
     <!-- 表单 -->
-    <Form :model="formData" labelCol="{ span: 6 }" wrapperCol="{ span: 18 }">
+    <Form :model="formData" label-col="{ span: 6 }" wrapper-col="{ span: 18 }">
       <FormItem label="主题" name="theme">
         <Select v-model:value="formData!.theme" @change="handleThemeChange">
           <SelectOption
@@ -78,8 +78,8 @@ const handleThemeChange = () => {
         </UploadImg>
       </FormItem>
 
-      <div class="text-base mb-2">图标设置</div>
-      <div class="text-xs text-gray-500 mb-2">
+      <div class="mb-2 text-base">图标设置</div>
+      <div class="mb-2 text-xs text-gray-500">
         拖动左上角的小圆点可对其排序, 图标建议尺寸 44*44
       </div>
       <Draggable v-model="formData.items" :limit="5">
@@ -106,10 +106,22 @@ const handleThemeChange = () => {
               <div class="text-xs">已选中</div>
             </div>
           </div>
-          <FormItem name="text" label="文字" labelCol="{ span: 4 }" wrapperCol="{ span: 20 }" class="mb-2">
+          <FormItem
+            name="text"
+            label="文字"
+            label-col="{ span: 4 }"
+            wrapper-col="{ span: 20 }"
+            class="mb-2"
+          >
             <Input v-model:value="element.text" placeholder="请输入文字" />
           </FormItem>
-          <FormItem name="url" label="链接" labelCol="{ span: 4 }" wrapperCol="{ span: 20 }" class="mb-0">
+          <FormItem
+            name="url"
+            label="链接"
+            label-col="{ span: 4 }"
+            wrapper-col="{ span: 20 }"
+            class="mb-0"
+          >
             <AppLinkInput v-model="element.url" />
           </FormItem>
         </template>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/config.ts
index 71a61cef8..f442e7dc5 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/config.ts
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/config.ts
@@ -1,7 +1,4 @@
-import type {
-  ComponentStyle,
-  DiyComponent,
-} from '../../../util';
+import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 标题栏属性 */
 export interface TitleBarProperty {
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/index.vue
index 89113d098..c3464c2b0 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/index.vue
@@ -3,7 +3,6 @@ import type { TitleBarProperty } from './config';
 
 import { IconifyIcon } from '@vben/icons';
 
-
 /** 标题栏 */
 defineOptions({ name: 'TitleBar' });
 
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/property.vue
index 52bfa481a..67e4a545b 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/property.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import type { TitleBarProperty } from './config';
 
-import { IconifyIcon } from '@vben/icons';
 
-import { useVModel } from '@vueuse/core';
+
+
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-card/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-card/config.ts
index 7cb187c28..2dae34da2 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-card/config.ts
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-card/config.ts
@@ -1,7 +1,4 @@
-import type {
-  ComponentStyle,
-  DiyComponent,
-} from '../../../util';
+import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 用户卡片属性 */
 export interface UserCardProperty {
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-card/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-card/index.vue
index fe994a92f..07e0e7304 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-card/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-card/index.vue
@@ -3,7 +3,6 @@ import type { UserCardProperty } from './config';
 
 import { IconifyIcon } from '@vben/icons';
 
-
 /** 用户卡片 */
 defineOptions({ name: 'UserCard' });
 // 定义属性
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-coupon/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-coupon/config.ts
index 5b5728185..7e5dcd1f9 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-coupon/config.ts
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-coupon/config.ts
@@ -1,7 +1,4 @@
-import type {
-  ComponentStyle,
-  DiyComponent,
-} from '../../../util';
+import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 用户卡券属性 */
 export interface UserCouponProperty {
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-coupon/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-coupon/index.vue
index 1702e454e..95d2ee6ff 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-coupon/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-coupon/index.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { UserCouponProperty } from './config';
 
-
 /** 用户卡券 */
 defineOptions({ name: 'UserCoupon' });
 // 定义属性
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-order/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-order/config.ts
index 5cea121ac..25ca85065 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-order/config.ts
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-order/config.ts
@@ -1,7 +1,4 @@
-import type {
-  ComponentStyle,
-  DiyComponent,
-} from '../../../util';
+import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 用户订单属性 */
 export interface UserOrderProperty {
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-order/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-order/index.vue
index 4ead72186..1eac1ee13 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-order/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-order/index.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { UserOrderProperty } from './config';
 
-
 /** 用户订单 */
 defineOptions({ name: 'UserOrder' });
 // 定义属性
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-wallet/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-wallet/config.ts
index dd9c56d31..2b10d32fb 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-wallet/config.ts
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-wallet/config.ts
@@ -1,7 +1,4 @@
-import type {
-  ComponentStyle,
-  DiyComponent,
-} from '../../../util';
+import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 用户资产属性 */
 export interface UserWalletProperty {
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-wallet/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-wallet/index.vue
index dd3d60475..7180a0c4d 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-wallet/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-wallet/index.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { UserWalletProperty } from './config';
 
-
 /** 用户资产 */
 defineOptions({ name: 'UserWallet' });
 // 定义属性
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/config.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/config.ts
index ec160c0bc..bc9195575 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/config.ts
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/config.ts
@@ -1,7 +1,4 @@
-import type {
-  ComponentStyle,
-  DiyComponent,
-} from '../../../util';
+import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 视频播放属性 */
 export interface VideoPlayerProperty {
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/index.vue
index 34b48e4d9..b1846cc32 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/index.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { VideoPlayerProperty } from './config';
 
-
 /** 视频播放 */
 defineOptions({ name: 'VideoPlayer' });
 
@@ -9,11 +8,7 @@ defineProps<{ property: VideoPlayerProperty }>();
 </script>
 <template>
   <div class="w-full" :style="{ height: `${property.style.height}px` }">
-    <Image
-      class="w-full"
-      :src="property.posterUrl"
-      v-if="property.posterUrl"
-    />
+    <Image class="w-full" :src="property.posterUrl" v-if="property.posterUrl" />
     <video
       v-else
       class="w-full"
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/property.vue
index 5a0ac5696..762f6193c 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/property.vue
@@ -3,10 +3,11 @@ import type { VideoPlayerProperty } from './config';
 
 import { useVModel } from '@vueuse/core';
 
-import ComponentContainerProperty from '../../component-container-property.vue';
 import UploadFile from '#/components/upload/file-upload.vue';
 import UploadImg from '#/components/upload/image-upload.vue';
 
+import ComponentContainerProperty from '../../component-container-property.vue';
+
 // 视频播放属性面板
 defineOptions({ name: 'VideoPlayerProperty' });
 
@@ -19,14 +20,10 @@ const formData = useVModel(props, 'modelValue', emit);
   <ComponentContainerProperty v-model="formData.style">
     <template #style>
       <FormItem label="高度" name="height">
-        <Slider
-          v-model:value="formData.style.height"
-          :max="500"
-          :min="100"
-        />
+        <Slider v-model:value="formData.style.height" :max="500" :min="100" />
       </FormItem>
     </template>
-    <Form :model="formData" labelCol="{ span: 6 }" wrapperCol="{ span: 18 }">
+    <Form :model="formData" label-col="{ span: 6 }" wrapper-col="{ span: 18 }">
       <FormItem label="上传视频" name="videoUrl">
         <UploadFile
           v-model="formData.videoUrl"
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/index.vue
index b23517c35..19985bde5 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/index.vue
@@ -11,15 +11,12 @@ import { useQRCode } from '@vueuse/integrations/useQRCode';
 import draggable from 'vuedraggable';
 
 import statusBarImg from '#/assets/imgs/diy/statusBar.png';
-import {
-  componentConfigs,
-  components,
-} from './components/mobile';
-import { component as PAGE_CONFIG_COMPONENT } from './components/mobile/page-config/config';
 
 import ComponentContainer from './components/component-container.vue';
 import ComponentLibrary from './components/component-library.vue';
+import { componentConfigs, components } from './components/mobile';
 import { component as NAVIGATION_BAR_COMPONENT } from './components/mobile/navigation-bar/config';
+import { component as PAGE_CONFIG_COMPONENT } from './components/mobile/page-config/config';
 import { component as TAB_BAR_COMPONENT } from './components/mobile/tab-bar/config';
 /** 页面装修详情页 */
 defineOptions({
@@ -290,7 +287,7 @@ onMounted(() => {
 </script>
 <template>
   <div>
-    <div class="editor flex flex-col h-full">
+    <div class="editor flex h-full flex-col">
       <!-- 顶部：工具栏 -->
       <div class="editor-header flex items-center">
         <!-- 左侧操作区 -->
@@ -360,11 +357,11 @@ onMounted(() => {
           </div>
           <!-- 手机页面编辑区域 -->
           <div
-            class="editor-design-center page-prop-area overflow-y-auto phone-container"
+            class="editor-design-center page-prop-area phone-container overflow-y-auto"
             :style="{
               backgroundColor: pageConfigComponent.property.backgroundColor,
               backgroundImage: `url(${pageConfigComponent.property.backgroundImage})`,
-              height: 'calc(100vh - 135px - 120px)'
+              height: 'calc(100vh - 135px - 120px)',
             }"
           >
             <draggable
@@ -440,13 +437,10 @@ onMounted(() => {
           </div>
         </div>
         <!-- 右侧：属性面板（ComponentContainerProperty） -->
-        <div
-          v-if="selectedComponent?.property"
-          class="editor-right w-[350px]"
-        >
+        <div v-if="selectedComponent?.property" class="editor-right w-[350px]">
           <Card
             class="h-full"
-            :bodyStyle="{ height: 'calc(100% - 57px)', padding: 0 }"
+            :body-style="{ height: 'calc(100% - 57px)', padding: 0 }"
           >
             <!-- 组件名称 -->
             <template #title>
@@ -455,9 +449,7 @@ onMounted(() => {
                 <span>{{ selectedComponent?.name }}</span>
               </div>
             </template>
-            <div
-              class="h-full overflow-y-auto p-4 property"
-            >
+            <div class="property h-full overflow-y-auto p-4">
               <component
                 :is="`${selectedComponent?.id}Property`"
                 :key="selectedComponent?.uid || selectedComponent?.id"
diff --git a/apps/web-antd/src/views/mall/promotion/components/draggable/index.vue b/apps/web-antd/src/views/mall/promotion/components/draggable/index.vue
index aaca15c97..3fe2877cf 100644
--- a/apps/web-antd/src/views/mall/promotion/components/draggable/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/draggable/index.vue
@@ -46,7 +46,7 @@ const handleDelete = function (index: number) {
 </script>
 
 <template>
-  <div class="text-xs text-gray-500"> 拖动左上角的小圆点可对其排序 </div>
+  <div class="text-xs text-gray-500">拖动左上角的小圆点可对其排序</div>
   <VueDraggable
     :list="formData"
     :force-fallback="true"

From 289f6e3de4469ead824548cd6b13990b49d89d4e Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sun, 26 Oct 2025 00:02:51 +0800
Subject: [PATCH 5/5] =?UTF-8?q?feat=EF=BC=9A=E3=80=90antd=E3=80=91?=
 =?UTF-8?q?=E3=80=90mall=E3=80=91diy-editor=20=E4=BF=AE=E5=A4=8D=20element?=
 =?UTF-8?q?-plus=20=E7=BB=84=E4=BB=B6=E4=B9=8B=E8=B7=AF=EF=BC=9A=E9=83=A8?=
 =?UTF-8?q?=E5=88=86=E8=A7=A3=E5=86=B3=2010%?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../app-link-input/app-link-select-dialog.vue |   2 +
 .../components/app-link-input/index.vue       |   4 +-
 .../components/color-input/index.vue          |   3 +-
 .../component-container-property.vue          |  11 ++
 .../components/component-container.vue        |   2 +
 .../components/component-library.vue          |   1 +
 .../mobile/navigation-bar/property.vue        | 113 ++++++++++--------
 .../promotion/components/diy-editor/index.vue |   1 +
 .../promotion/components/draggable/index.vue  |   3 +-
 .../components/input-with-color/index.vue     |   1 +
 .../vertical-button-group/index.vue           |   2 +
 11 files changed, 90 insertions(+), 53 deletions(-)

diff --git a/apps/web-antd/src/views/mall/promotion/components/app-link-input/app-link-select-dialog.vue b/apps/web-antd/src/views/mall/promotion/components/app-link-input/app-link-select-dialog.vue
index 6f87ab295..2cbd8d12d 100644
--- a/apps/web-antd/src/views/mall/promotion/components/app-link-input/app-link-select-dialog.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/app-link-input/app-link-select-dialog.vue
@@ -5,6 +5,8 @@ import { nextTick, ref } from 'vue';
 
 import { getUrlNumberValue } from '@vben/utils';
 
+import { Button, Form, FormItem, Modal, Tooltip } from 'ant-design-vue';
+
 import ProductCategorySelect from '#/views/mall/product/category/components/product-category-select.vue';
 
 import { APP_LINK_GROUP_LIST, APP_LINK_TYPE_ENUM } from './data';
diff --git a/apps/web-antd/src/views/mall/promotion/components/app-link-input/index.vue b/apps/web-antd/src/views/mall/promotion/components/app-link-input/index.vue
index dc5741ca6..8be7cada4 100644
--- a/apps/web-antd/src/views/mall/promotion/components/app-link-input/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/app-link-input/index.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-// TODO @AI：改成 El 标签风格，而不是 el-
-// TODO @AI：一些 modal 是否使用 Modal 组件，而不是 el-modal？
 import { ref, watch } from 'vue';
 
+import { Button, Input, InputGroup } from 'ant-design-vue';
+
 import AppLinkSelectDialog from './app-link-select-dialog.vue';
 
 /** APP 链接输入框 */
diff --git a/apps/web-antd/src/views/mall/promotion/components/color-input/index.vue b/apps/web-antd/src/views/mall/promotion/components/color-input/index.vue
index 96c9b3b5f..192dfab15 100644
--- a/apps/web-antd/src/views/mall/promotion/components/color-input/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/color-input/index.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
-// TODO @AI：改成 El 风格，而不是iel- 风格；
 import { computed } from 'vue';
 
 import { PREDEFINE_COLORS } from '@vben/constants';
 
+import { Input, InputGroup } from 'ant-design-vue';
+
 /** 颜色输入框 */
 defineOptions({ name: 'ColorInput' });
 
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-container-property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-container-property.vue
index 96a4adf43..10cf7ae2e 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-container-property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-container-property.vue
@@ -2,6 +2,17 @@
 import type { ComponentStyle } from '../util';
 
 import { useVModel } from '@vueuse/core';
+import {
+  Card,
+  Form,
+  FormItem,
+  Radio,
+  RadioGroup,
+  Slider,
+  TabPane,
+  Tabs,
+  Tree,
+} from 'ant-design-vue';
 
 import UploadImg from '#/components/upload/image-upload.vue';
 import { ColorInput } from '#/views/mall/promotion/components';
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-container.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-container.vue
index add4b6f82..fc8546957 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-container.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-container.vue
@@ -5,6 +5,8 @@ import { computed } from 'vue';
 
 import { IconifyIcon } from '@vben/icons';
 
+import { Button, Tooltip } from 'ant-design-vue';
+
 import { VerticalButtonGroup } from '#/views/mall/promotion/components';
 
 import { components } from './mobile';
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-library.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-library.vue
index a86f5b4d5..56907c105 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-library.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-library.vue
@@ -6,6 +6,7 @@ import { reactive, watch } from 'vue';
 import { IconifyIcon } from '@vben/icons';
 import { cloneDeep } from '@vben/utils';
 
+import { Collapse, CollapsePanel } from 'ant-design-vue';
 import draggable from 'vuedraggable';
 
 import { componentConfigs } from './mobile/index';
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/property.vue
index ce3e3f698..21f3849af 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/property.vue
@@ -2,6 +2,18 @@
 import type { NavigationBarProperty } from './config';
 
 import { useVModel } from '@vueuse/core';
+import {
+  Card,
+  Checkbox,
+  Form,
+  FormItem,
+  Radio,
+  RadioGroup,
+  Tooltip,
+} from 'ant-design-vue';
+
+import UploadImg from '#/components/upload/image-upload.vue';
+import { ColorInput } from '#/views/mall/promotion/components';
 
 import NavigationBarCellProperty from './components/cell-property.vue';
 
@@ -23,47 +35,52 @@ if (!formData.value._local) {
 </script>
 
 <template>
-  <el-form label-width="80px" :model="formData" :rules="rules">
-    <el-form-item label="样式" prop="styleType">
-      <el-radio-group v-model="formData!.styleType">
-        <el-radio value="normal">标准</el-radio>
-        <el-tooltip
-          content="沉侵式头部仅支持微信小程序、APP，建议页面第一个组件为图片展示类组件"
+  <Form
+    :label-col="{ span: 6 }"
+    :wrapper-col="{ span: 18 }"
+    :model="formData"
+    :rules="rules"
+  >
+    <FormItem label="样式" name="styleType">
+      <RadioGroup v-model:value="formData!.styleType">
+        <Radio value="normal">标准</Radio>
+        <Tooltip
+          title="沉侵式头部仅支持微信小程序、APP，建议页面第一个组件为图片展示类组件"
           placement="top"
         >
-          <el-radio value="inner">沉浸式</el-radio>
-        </el-tooltip>
-      </el-radio-group>
-    </el-form-item>
-    <el-form-item
+          <Radio value="inner">沉浸式</Radio>
+        </Tooltip>
+      </RadioGroup>
+    </FormItem>
+    <FormItem
       label="常驻显示"
-      prop="alwaysShow"
+      name="alwaysShow"
       v-if="formData.styleType === 'inner'"
     >
-      <el-radio-group v-model="formData!.alwaysShow">
-        <el-radio :value="false">关闭</el-radio>
-        <el-tooltip
-          content="常驻显示关闭后,头部小组件将在页面滑动时淡入"
+      <RadioGroup v-model:value="formData!.alwaysShow">
+        <Radio :value="false">关闭</Radio>
+        <Tooltip
+          title="常驻显示关闭后,头部小组件将在页面滑动时淡入"
           placement="top"
         >
-          <el-radio :value="true">开启</el-radio>
-        </el-tooltip>
-      </el-radio-group>
-    </el-form-item>
-    <el-form-item label="背景类型" prop="bgType">
-      <el-radio-group v-model="formData.bgType">
-        <el-radio value="color">纯色</el-radio>
-        <el-radio value="img">图片</el-radio>
-      </el-radio-group>
-    </el-form-item>
-    <el-form-item
+          <Radio :value="true">开启</Radio>
+        </Tooltip>
+      </RadioGroup>
+    </FormItem>
+    <FormItem label="背景类型" name="bgType">
+      <RadioGroup v-model:value="formData.bgType">
+        <Radio value="color">纯色</Radio>
+        <Radio value="img">图片</Radio>
+      </RadioGroup>
+    </FormItem>
+    <FormItem
       label="背景颜色"
-      prop="bgColor"
+      name="bgColor"
       v-if="formData.bgType === 'color'"
     >
       <ColorInput v-model="formData.bgColor" />
-    </el-form-item>
-    <el-form-item label="背景图片" prop="bgImg" v-else>
+    </FormItem>
+    <FormItem label="背景图片" name="bgImg" v-else>
       <div class="flex items-center">
         <UploadImg
           v-model="formData.bgImg"
@@ -74,44 +91,44 @@ if (!formData.value._local) {
         />
         <span class="mb-2 ml-2 text-xs text-gray-400">建议宽度：750</span>
       </div>
-    </el-form-item>
-    <el-card class="property-group" shadow="never">
-      <template #header>
+    </FormItem>
+    <Card class="property-group" :bordered="false">
+      <template #title>
         <div class="flex items-center justify-between">
           <span>内容（小程序）</span>
-          <el-form-item prop="_local.previewMp" class="mb-0">
-            <el-checkbox
-              v-model="formData._local.previewMp"
+          <FormItem name="_local.previewMp" class="mb-0">
+            <Checkbox
+              v-model:checked="formData._local.previewMp"
               @change="
                 formData._local.previewOther = !formData._local.previewMp
               "
             >
               预览
-            </el-checkbox>
-          </el-form-item>
+            </Checkbox>
+          </FormItem>
         </div>
       </template>
       <NavigationBarCellProperty v-model="formData.mpCells" is-mp />
-    </el-card>
-    <el-card class="property-group" shadow="never">
-      <template #header>
+    </Card>
+    <Card class="property-group" :bordered="false">
+      <template #title>
         <div class="flex items-center justify-between">
           <span>内容（非小程序）</span>
-          <el-form-item prop="_local.previewOther" class="mb-0">
-            <el-checkbox
-              v-model="formData._local.previewOther"
+          <FormItem name="_local.previewOther" class="mb-0">
+            <Checkbox
+              v-model:checked="formData._local.previewOther"
               @change="
                 formData._local.previewMp = !formData._local.previewOther
               "
             >
               预览
-            </el-checkbox>
-          </el-form-item>
+            </Checkbox>
+          </FormItem>
         </div>
       </template>
       <NavigationBarCellProperty v-model="formData.otherCells" :is-mp="false" />
-    </el-card>
-  </el-form>
+    </Card>
+  </Form>
 </template>
 
 <style scoped lang="scss"></style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/index.vue
index 19985bde5..244762af8 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/index.vue
@@ -8,6 +8,7 @@ import { IconifyIcon } from '@vben/icons';
 import { cloneDeep, isEmpty, isString } from '@vben/utils';
 
 import { useQRCode } from '@vueuse/integrations/useQRCode';
+import { Button, Card, Modal, Tag, Tooltip } from 'ant-design-vue';
 import draggable from 'vuedraggable';
 
 import statusBarImg from '#/assets/imgs/diy/statusBar.png';
diff --git a/apps/web-antd/src/views/mall/promotion/components/draggable/index.vue b/apps/web-antd/src/views/mall/promotion/components/draggable/index.vue
index 3fe2877cf..8bb352329 100644
--- a/apps/web-antd/src/views/mall/promotion/components/draggable/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/draggable/index.vue
@@ -1,10 +1,9 @@
 <script setup lang="ts">
-// TODO @芋艿：后续合并到 diy-editor 里，并不是通用的；
-
 import { IconifyIcon } from '@vben/icons';
 import { cloneDeep } from '@vben/utils';
 
 import { useVModel } from '@vueuse/core';
+import { Button, Tooltip } from 'ant-design-vue';
 import VueDraggable from 'vuedraggable';
 
 /** 拖拽组件封装 */
diff --git a/apps/web-antd/src/views/mall/promotion/components/input-with-color/index.vue b/apps/web-antd/src/views/mall/promotion/components/input-with-color/index.vue
index 2e6336f5f..879ba756b 100644
--- a/apps/web-antd/src/views/mall/promotion/components/input-with-color/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/input-with-color/index.vue
@@ -2,6 +2,7 @@
 import { PREDEFINE_COLORS } from '@vben/constants';
 
 import { useVModels } from '@vueuse/core';
+import { Input, InputGroup } from 'ant-design-vue';
 
 /** 带颜色选择器输入框 */
 defineOptions({ name: 'InputWithColor' });
diff --git a/apps/web-antd/src/views/mall/promotion/components/vertical-button-group/index.vue b/apps/web-antd/src/views/mall/promotion/components/vertical-button-group/index.vue
index 7af14dbcc..f7b609c1d 100644
--- a/apps/web-antd/src/views/mall/promotion/components/vertical-button-group/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/vertical-button-group/index.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { ButtonGroup } from 'ant-design-vue';
+
 /**
  * 垂直按钮组
  * Element 官方的按钮组只支持水平显示，通过重写样式实现垂直布局