diff --git a/.vscode/extensions.json b/.vscode/extensions.json
index e8dc9ed9..c67d983e 100644
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -21,7 +21,8 @@
     // CSS 变量提示
     "vunguyentuan.vscode-css-variables",
     // 在 package.json 中显示 PNPM catalog 的版本
-    "antfu.pnpm-catalog-lens"
+    "antfu.pnpm-catalog-lens",
+    "augment.vscode-augment"
   ],
   "unwantedRecommendations": [
     // 和 volar 冲突
diff --git a/apps/web-ele/.env.development b/apps/web-ele/.env.development
index 02edf8dd..77c13d39 100644
--- a/apps/web-ele/.env.development
+++ b/apps/web-ele/.env.development
@@ -19,3 +19,5 @@ VITE_INJECT_APP_LOADING=true
 VITE_APP_DEFAULT_USERNAME=admin
 # 默认登录密码
 VITE_APP_DEFAULT_PASSWORD=admin123
+
+VITE_MALL_H5_DOMAIN='http://mall.yudao.iocoder.cn'
diff --git a/apps/web-ele/.env.production b/apps/web-ele/.env.production
index 910fd64c..ac0408ec 100644
--- a/apps/web-ele/.env.production
+++ b/apps/web-ele/.env.production
@@ -21,3 +21,5 @@ VITE_INJECT_APP_LOADING=true
 
 # 打包后是否生成dist.zip
 VITE_ARCHIVER=true
+
+VITE_MALL_H5_DOMAIN='http://mall.yudao.iocoder.cn'
diff --git a/apps/web-ele/package.json b/apps/web-ele/package.json
index 43a43dac..45689f33 100644
--- a/apps/web-ele/package.json
+++ b/apps/web-ele/package.json
@@ -51,7 +51,9 @@
     "highlight.js": "catalog:",
     "pinia": "catalog:",
     "vue": "catalog:",
-    "vue-router": "catalog:"
+    "vue-dompurify-html": "catalog:",
+    "vue-router": "catalog:",
+    "vuedraggable": "catalog:"
   },
   "devDependencies": {
     "unplugin-element-plus": "catalog:"
diff --git a/apps/web-ele/src/api/mall/promotion/combination/combinationActivity.ts b/apps/web-ele/src/api/mall/promotion/combination/combinationActivity.ts
index c0d53d6b..486f05aa 100644
--- a/apps/web-ele/src/api/mall/promotion/combination/combinationActivity.ts
+++ b/apps/web-ele/src/api/mall/promotion/combination/combinationActivity.ts
@@ -48,6 +48,8 @@ export namespace MallCombinationActivityApi {
     combinationPrice?: number;
     /** 商品列表 */
     products: CombinationProduct[];
+    /** 图片 */
+    picUrl?: string;
   }
 
   /** 扩展 SKU 配置 */
diff --git a/apps/web-ele/src/api/mall/promotion/diy/page.ts b/apps/web-ele/src/api/mall/promotion/diy/page.ts
index daa5e4b0..afdface5 100644
--- a/apps/web-ele/src/api/mall/promotion/diy/page.ts
+++ b/apps/web-ele/src/api/mall/promotion/diy/page.ts
@@ -52,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-ele/src/api/mall/promotion/seckill/seckillActivity.ts b/apps/web-ele/src/api/mall/promotion/seckill/seckillActivity.ts
index e11e8828..9a7e121d 100644
--- a/apps/web-ele/src/api/mall/promotion/seckill/seckillActivity.ts
+++ b/apps/web-ele/src/api/mall/promotion/seckill/seckillActivity.ts
@@ -55,6 +55,8 @@ export namespace MallSeckillActivityApi {
     seckillPrice?: number;
     /** 秒杀商品列表 */
     products?: SeckillProduct[];
+    /** 图片 */
+    picUrl?: string;
   }
 
   /** 扩展 SKU 配置 */
diff --git a/apps/web-ele/src/assets/imgs/diy/app-nav-bar-mp.png b/apps/web-ele/src/assets/imgs/diy/app-nav-bar-mp.png
new file mode 100644
index 00000000..c982804c
Binary files /dev/null and b/apps/web-ele/src/assets/imgs/diy/app-nav-bar-mp.png differ
diff --git a/apps/web-ele/src/assets/imgs/diy/statusBar.png b/apps/web-ele/src/assets/imgs/diy/statusBar.png
new file mode 100644
index 00000000..b85562e4
Binary files /dev/null and b/apps/web-ele/src/assets/imgs/diy/statusBar.png differ
diff --git a/apps/web-ele/src/bootstrap.ts b/apps/web-ele/src/bootstrap.ts
index c366b278..9b31950f 100644
--- a/apps/web-ele/src/bootstrap.ts
+++ b/apps/web-ele/src/bootstrap.ts
@@ -1,4 +1,5 @@
 import { createApp, watchEffect } from 'vue';
+import VueDOMPurifyHTML from 'vue-dompurify-html';
 
 import { registerAccessDirective } from '@vben/access';
 import { registerLoadingDirective } from '@vben/common-ui';
@@ -34,7 +35,7 @@ async function bootstrap(namespace: string) {
   //   zIndex: 2000,
   // });
   const app = createApp(App);
-
+  app.use(VueDOMPurifyHTML);
   // 注册Element Plus提供的v-loading指令
   app.directive('loading', ElLoading.directive);
 
diff --git a/apps/web-ele/src/components/app-link-input/app-link-select-dialog.vue b/apps/web-ele/src/components/app-link-input/app-link-select-dialog.vue
new file mode 100644
index 00000000..06d71be7
--- /dev/null
+++ b/apps/web-ele/src/components/app-link-input/app-link-select-dialog.vue
@@ -0,0 +1,241 @@
+<script lang="ts" setup>
+import type { ButtonInstance, ScrollbarInstance } from 'element-plus';
+
+import type { AppLink } from './data';
+
+import { nextTick, ref } from 'vue';
+
+import { getUrlNumberValue } from '@vben/utils';
+
+import { ElScrollbar } from 'element-plus';
+
+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);
+// 选中的 APP 链接
+const activeAppLink = ref({} as AppLink);
+
+/** 打开弹窗 */
+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;
+    }
+  }
+};
+
+const handleSubmit = () => {
+  dialogVisible.value = false;
+  emit('change', activeAppLink.value.path);
+  emit('appLinkChange', activeAppLink.value);
+};
+
+// 分组标题引用列表
+const groupTitleRefs = ref<HTMLInputElement[]>([]);
+/**
+ * 处理右侧链接列表滚动
+ * @param {object} param0 滚动事件参数
+ * @param {number} param0.scrollTop 滚动条的位置
+ */
+const 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);
+  }
+};
+
+// 右侧滚动条
+const linkScrollbar = ref<ScrollbarInstance>();
+// 处理分组选中
+const handleGroupSelected = (group: string) => {
+  activeGroup.value = group;
+  const titleRef = groupTitleRefs.value.find(
+    (item: HTMLInputElement) => item.textContent === group,
+  );
+  if (titleRef) {
+    // 滚动分组标题
+    linkScrollbar.value?.setScrollTop(titleRef.offsetTop);
+  }
+};
+
+// 分组滚动条
+const groupScrollbar = ref<ScrollbarInstance>();
+// 分组引用列表
+const groupBtnRefs = ref<ButtonInstance[]>([]);
+// 自动滚动分组按钮，确保分组按钮保持在可视区域内
+const scrollToGroupBtn = (group: string) => {
+  const groupBtn = groupBtnRefs.value
+    .map((btn: ButtonInstance) => btn.ref)
+    .find((ref: HTMLButtonElement | undefined) => ref?.textContent === group);
+  if (groupBtn) {
+    groupScrollbar.value?.setScrollTop(groupBtn.offsetTop);
+  }
+};
+
+// 是否为相同的链接（不比较参数，只比较链接）
+const isSameLink = (link1: string, link2: string) => {
+  return link2 ? link1.split('?')[0] === link2.split('?')[0] : false;
+};
+
+// 详情选择对话框
+const detailSelectDialog = ref<{
+  id?: number;
+  type?: APP_LINK_TYPE_ENUM;
+  visible: boolean;
+}>({
+  visible: false,
+  id: undefined,
+  type: undefined,
+});
+// 处理详情选择
+const handleProductCategorySelected = (id: number) => {
+  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>
+  <el-dialog v-model="dialogVisible" title="选择链接" width="65%">
+    <div class="flex h-[500px] gap-2">
+      <!-- 左侧分组列表 -->
+      <ElScrollbar
+        wrap-class="h-full"
+        ref="groupScrollbar"
+        view-class="flex flex-col"
+      >
+        <el-button
+          v-for="(group, groupIndex) in APP_LINK_GROUP_LIST"
+          :key="groupIndex"
+          class="ml-0 mr-4 w-[90px] justify-start"
+          :class="[{ active: activeGroup === group.name }]"
+          ref="groupBtnRefs"
+          :text="activeGroup !== group.name"
+          :type="activeGroup === group.name ? 'primary' : 'default'"
+          @click="handleGroupSelected(group.name)"
+        >
+          {{ group.name }}
+        </el-button>
+      </ElScrollbar>
+      <!-- 右侧链接列表 -->
+      <ElScrollbar
+        class="h-full flex-1"
+        @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>
+          <!-- 链接列表 -->
+          <el-tooltip
+            v-for="(appLink, appLinkIndex) in group.links"
+            :key="appLinkIndex"
+            :content="appLink.path"
+            placement="bottom"
+            :show-after="300"
+          >
+            <el-button
+              class="mb-2 ml-0 mr-2"
+              :type="
+                isSameLink(appLink.path, activeAppLink.path)
+                  ? 'primary'
+                  : 'default'
+              "
+              @click="handleAppLinkSelected(appLink)"
+            >
+              {{ appLink.name }}
+            </el-button>
+          </el-tooltip>
+        </div>
+      </ElScrollbar>
+    </div>
+    <!-- 底部对话框操作按钮 -->
+    <template #footer>
+      <el-button type="primary" @click="handleSubmit">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </el-dialog>
+  <el-dialog v-model="detailSelectDialog.visible" title="" width="50%">
+    <el-form class="min-h-[200px]">
+      <el-form-item
+        label="选择分类"
+        v-if="
+          detailSelectDialog.type === APP_LINK_TYPE_ENUM.PRODUCT_CATEGORY_LIST
+        "
+      >
+        <ProductCategorySelect
+          v-model="detailSelectDialog.id"
+          :parent-id="0"
+          @update:model-value="handleProductCategorySelected"
+        />
+      </el-form-item>
+    </el-form>
+  </el-dialog>
+</template>
+<style lang="scss" scoped>
+:deep(.el-button + .el-button) {
+  margin-left: 0 !important;
+}
+</style>
diff --git a/apps/web-ele/src/components/app-link-input/data.ts b/apps/web-ele/src/components/app-link-input/data.ts
new file mode 100644
index 00000000..550b88d7
--- /dev/null
+++ b/apps/web-ele/src/components/app-link-input/data.ts
@@ -0,0 +1,236 @@
+// 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-ele/src/components/app-link-input/index.vue b/apps/web-ele/src/components/app-link-input/index.vue
new file mode 100644
index 00000000..5b608c4e
--- /dev/null
+++ b/apps/web-ele/src/components/app-link-input/index.vue
@@ -0,0 +1,48 @@
+<script lang="ts" setup>
+import { ref, watch } from 'vue';
+
+import AppLinkSelectDialog from './app-link-select-dialog.vue';
+
+// APP 链接输入框
+defineOptions({ name: 'AppLinkInput' });
+// 定义属性
+const props = defineProps({
+  // 当前选中的链接
+  modelValue: {
+    type: String,
+    default: '',
+  },
+});
+// setter
+const emit = defineEmits<{
+  'update:modelValue': [link: string];
+}>();
+// 当前的链接
+const appLink = ref('');
+// 选择对话框
+const dialogRef = ref();
+// 处理打开对话框
+const handleOpenDialog = () => dialogRef.value?.open(appLink.value);
+// 处理 APP 链接选中
+const handleLinkSelected = (link: string) => (appLink.value = link);
+
+// getter
+watch(
+  () => props.modelValue,
+  () => (appLink.value = props.modelValue),
+  { immediate: true },
+);
+
+watch(
+  () => appLink.value,
+  () => emit('update:modelValue', appLink.value),
+);
+</script>
+<template>
+  <el-input v-model="appLink" placeholder="输入或选择链接">
+    <template #append>
+      <el-button @click="handleOpenDialog">选择</el-button>
+    </template>
+  </el-input>
+  <AppLinkSelectDialog ref="dialogRef" @change="handleLinkSelected" />
+</template>
diff --git a/apps/web-ele/src/components/color-input/index.vue b/apps/web-ele/src/components/color-input/index.vue
new file mode 100644
index 00000000..16170c23
--- /dev/null
+++ b/apps/web-ele/src/components/color-input/index.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { PREDEFINE_COLORS } from '#/utils/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>
+  <el-input v-model="color">
+    <template #prepend>
+      <el-color-picker v-model="color" :predefine="PREDEFINE_COLORS" />
+    </template>
+  </el-input>
+</template>
+
+<style scoped lang="scss">
+:deep(.el-input-group__prepend) {
+  padding: 0;
+}
+</style>
diff --git a/apps/web-ele/src/components/diy-editor/components/component-container-property.vue b/apps/web-ele/src/components/diy-editor/components/component-container-property.vue
new file mode 100644
index 00000000..24062a19
--- /dev/null
+++ b/apps/web-ele/src/components/diy-editor/components/component-container-property.vue
@@ -0,0 +1,200 @@
+<script setup lang="ts">
+import type { ComponentStyle } from '#/components/diy-editor/util';
+
+import { useVModel } from '@vueuse/core';
+import {
+  ElCard,
+  ElForm,
+  ElFormItem,
+  ElRadio,
+  ElRadioGroup,
+  ElSlider,
+  ElTabPane,
+  ElTabs,
+  ElTree,
+} from 'element-plus';
+
+import ColorInput from '#/components/color-input/index.vue';
+import UploadImg from '#/components/upload/image-upload.vue';
+
+/**
+ * 组件容器属性：目前右边部分
+ * 用于包裹组件，为组件提供 背景、外边距、内边距、边框等样式
+ */
+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>
+  <ElTabs stretch>
+    <!-- 每个组件的自定义内容 -->
+    <ElTabPane label="内容" v-if="$slots.default">
+      <slot></slot>
+    </ElTabPane>
+
+    <!-- 每个组件的通用内容 -->
+    <ElTabPane label="样式" lazy>
+      <ElCard header="组件样式" class="property-group">
+        <ElForm :model="formData" label-width="80px">
+          <ElFormItem label="组件背景" prop="bgType">
+            <ElRadioGroup v-model="formData.bgType">
+              <ElRadio value="color">纯色</ElRadio>
+              <ElRadio value="img">图片</ElRadio>
+            </ElRadioGroup>
+          </ElFormItem>
+          <ElFormItem
+            label="选择颜色"
+            prop="bgColor"
+            v-if="formData.bgType === 'color'"
+          >
+            <ColorInput v-model="formData.bgColor" />
+          </ElFormItem>
+          <ElFormItem label="上传图片" prop="bgImg" v-else>
+            <UploadImg
+              v-model="formData.bgImg"
+              :limit="1"
+              :show-description="false"
+            >
+              <template #tip>建议宽度 750px</template>
+            </UploadImg>
+          </ElFormItem>
+          <ElTree
+            :data="treeData"
+            :expand-on-click-node="false"
+            default-expand-all
+          >
+            <template #default="{ node, data }">
+              <ElFormItem
+                :label="data.label"
+                :prop="data.prop"
+                :label-width="node.level === 1 ? '80px' : '62px'"
+                class="mb-0 w-full"
+              >
+                <ElSlider
+                  v-model="
+                    formData[data.prop as keyof ComponentStyle] as number
+                  "
+                  :max="100"
+                  :min="0"
+                  show-input
+                  input-size="small"
+                  :show-input-controls="false"
+                  @input="handleSliderChange(data.prop)"
+                />
+              </ElFormItem>
+            </template>
+          </ElTree>
+          <slot name="style" :style="formData"></slot>
+        </ElForm>
+      </ElCard>
+    </ElTabPane>
+  </ElTabs>
+</template>
+
+<style scoped lang="scss">
+:deep(.el-slider__runway) {
+  margin-right: 16px;
+}
+
+:deep(.el-input-number) {
+  width: 50px;
+}
+</style>
diff --git a/apps/web-ele/src/components/diy-editor/components/component-container.vue b/apps/web-ele/src/components/diy-editor/components/component-container.vue
new file mode 100644
index 00000000..5a9b803d
--- /dev/null
+++ b/apps/web-ele/src/components/diy-editor/components/component-container.vue
@@ -0,0 +1,269 @@
+<script setup lang="ts">
+import type {
+  ComponentStyle,
+  DiyComponent,
+} from '#/components/diy-editor/util';
+
+import { computed } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { ElButton, ElTooltip } from 'element-plus';
+
+import { components } from '#/components/diy-editor/components/mobile';
+import VerticalButtonGroup from '#/components/vertical-button-group/index.vue';
+
+/**
+ * 组件容器：目前在中间部分
+ * 用于包裹组件，为组件提供 背景、外边距、内边距、边框等样式
+ */
+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">
+          <ElTooltip content="上移" placement="right">
+            <ElButton
+              :disabled="!canMoveUp"
+              @click.stop="handleMoveComponent(-1)"
+            >
+              <IconifyIcon icon="ep:arrow-up" />
+            </ElButton>
+          </ElTooltip>
+          <ElTooltip content="下移" placement="right">
+            <ElButton
+              :disabled="!canMoveDown"
+              @click.stop="handleMoveComponent(1)"
+            >
+              <IconifyIcon icon="ep:arrow-down" />
+            </ElButton>
+          </ElTooltip>
+          <ElTooltip content="复制" placement="right">
+            <ElButton @click.stop="handleCopyComponent()">
+              <IconifyIcon icon="ep:copy-document" />
+            </ElButton>
+          </ElTooltip>
+          <ElTooltip content="删除" placement="right">
+            <ElButton @click.stop="handleDeleteComponent()">
+              <IconifyIcon icon="ep:delete" />
+            </ElButton>
+          </ElTooltip>
+        </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(--el-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(--el-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(--el-color-primary);
+
+        &::after {
+          border-left-color: var(--el-color-primary);
+        }
+      }
+
+      .component-toolbar {
+        display: block;
+      }
+    }
+  }
+}
+</style>
diff --git a/apps/web-ele/src/components/diy-editor/components/component-library.vue b/apps/web-ele/src/components/diy-editor/components/component-library.vue
new file mode 100644
index 00000000..628c1c55
--- /dev/null
+++ b/apps/web-ele/src/components/diy-editor/components/component-library.vue
@@ -0,0 +1,221 @@
+<script setup lang="ts">
+import type {
+  DiyComponent,
+  DiyComponentLibrary,
+} from '#/components/diy-editor/util';
+
+import { reactive, watch } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+import { cloneDeep } from '@vben/utils';
+
+import { ElAside, ElCollapse, ElCollapseItem, ElScrollbar } from 'element-plus';
+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>
+  <ElAside class="editor-left" width="261px">
+    <ElScrollbar>
+      <ElCollapse v-model="extendGroups">
+        <ElCollapseItem
+          v-for="group in groups"
+          :key="group.name"
+          :name="group.name"
+          :title="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>
+        </ElCollapseItem>
+      </ElCollapse>
+    </ElScrollbar>
+  </ElAside>
+</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(.el-collapse) {
+    border-top: none;
+  }
+
+  :deep(.el-collapse-item__wrap) {
+    border-bottom: none;
+  }
+
+  :deep(.el-collapse-item__content) {
+    padding-bottom: 0;
+  }
+
+  :deep(.el-collapse-item__header) {
+    height: 32px;
+    padding: 0 24px;
+    line-height: 32px;
+    background-color: var(--el-bg-color-page);
+    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(--el-border-color-lighter);
+    border-bottom: 1px solid var(--el-border-color-lighter);
+
+    .el-icon {
+      margin-bottom: 4px;
+      color: gray;
+    }
+  }
+
+  .component.active,
+  .component:hover {
+    color: var(--el-color-white);
+    background: var(--el-color-primary);
+
+    .el-icon {
+      color: var(--el-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-ele/src/components/diy-editor/components/mobile/Carousel/config.ts b/apps/web-ele/src/components/diy-editor/components/mobile/Carousel/config.ts
new file mode 100644
index 00000000..749d36a3
--- /dev/null
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/Carousel/config.ts
@@ -0,0 +1,61 @@
+import type {
+  ComponentStyle,
+  DiyComponent,
+} from '#/components/diy-editor/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-ele/src/components/diy-editor/components/mobile/Carousel/index.vue b/apps/web-ele/src/components/diy-editor/components/mobile/Carousel/index.vue
new file mode 100644
index 00000000..df256770
--- /dev/null
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/Carousel/index.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import type { CarouselProperty } from './config';
+
+import { ref } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { ElCarousel, ElCarouselItem, ElImage } from 'element-plus';
+
+/** 轮播图 */
+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">
+    <ElCarousel
+      height="174px"
+      :type="property.type === 'card' ? 'card' : ''"
+      :autoplay="property.autoplay"
+      :interval="property.interval * 1000"
+      :indicator-position="property.indicator === 'number' ? 'none' : undefined"
+      @change="handleIndexChange"
+    >
+      <ElCarouselItem v-for="(item, index) in property.items" :key="index">
+        <ElImage class="h-full w-full" :src="item.imgUrl" />
+      </ElCarouselItem>
+    </ElCarousel>
+    <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-ele/src/components/diy-editor/components/mobile/Carousel/property.vue b/apps/web-ele/src/components/diy-editor/components/mobile/Carousel/property.vue
new file mode 100644
index 00000000..21da4043
--- /dev/null
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/Carousel/property.vue
@@ -0,0 +1,133 @@
+<script setup lang="ts">
+import type { CarouselProperty } from './config';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { useVModel } from '@vueuse/core';
+import {
+  ElCard,
+  ElForm,
+  ElFormItem,
+  ElRadioButton,
+  ElRadioGroup,
+  ElSlider,
+  ElSwitch,
+  ElText,
+  ElTooltip,
+} from 'element-plus';
+
+import AppLinkInput from '#/components/app-link-input/index.vue';
+import ComponentContainerProperty from '#/components/diy-editor/components/component-container-property.vue';
+import Draggable from '#/components/draggable/index.vue';
+import UploadFile from '#/components/upload/file-upload.vue';
+import UploadImg from '#/components/upload/image-upload.vue';
+
+// 轮播图属性面板
+defineOptions({ name: 'CarouselProperty' });
+
+const props = defineProps<{ modelValue: CarouselProperty }>();
+const emit = defineEmits(['update:modelValue']);
+const formData = useVModel(props, 'modelValue', emit);
+</script>
+
+<template>
+  <ComponentContainerProperty v-model="formData.style">
+    <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-ele/src/components/diy-editor/components/mobile/Divider/config.ts b/apps/web-ele/src/components/diy-editor/components/mobile/Divider/config.ts
new file mode 100644
index 00000000..7147ef9b
--- /dev/null
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/Divider/config.ts
@@ -0,0 +1,29 @@
+import type { DiyComponent } from '#/components/diy-editor/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-ele/src/components/diy-editor/components/mobile/Divider/index.vue b/apps/web-ele/src/components/diy-editor/components/mobile/Divider/index.vue
new file mode 100644
index 00000000..1736db38
--- /dev/null
+++ b/apps/web-ele/src/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-ele/src/components/diy-editor/components/mobile/Divider/property.vue b/apps/web-ele/src/components/diy-editor/components/mobile/Divider/property.vue
new file mode 100644
index 00000000..7746b73b
--- /dev/null
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/Divider/property.vue
@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import type { DividerProperty } from './config';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { useVModel } from '@vueuse/core';
+import {
+  ElForm,
+  ElFormItem,
+  ElRadioButton,
+  ElRadioGroup,
+  ElSlider,
+  ElTooltip,
+} from 'element-plus';
+
+import ColorInput from '#/components/input-with-color/index.vue';
+
+// 导航栏属性面板
+defineOptions({ name: 'DividerProperty' });
+const props = defineProps<{ modelValue: DividerProperty }>();
+const emit = defineEmits(['update:modelValue']);
+const formData = useVModel(props, 'modelValue', emit);
+
+// 线类型
+const BORDER_TYPES = [
+  {
+    icon: 'vaadin:line-h',
+    text: '实线',
+    type: 'solid',
+  },
+  {
+    icon: 'tabler:line-dashed',
+    text: '虚线',
+    type: 'dashed',
+  },
+  {
+    icon: 'tabler:line-dotted',
+    text: '点线',
+    type: 'dotted',
+  },
+  {
+    icon: 'entypo:progress-empty',
+    text: '无',
+    type: 'none',
+  },
+];
+</script>
+
+<template>
+  <ElForm label-width="80px" :model="formData">
+    <ElFormItem label="高度" prop="height">
+      <ElSlider
+        v-model="formData.height"
+        :min="1"
+        :max="100"
+        show-input
+        input-size="small"
+      />
+    </ElFormItem>
+    <ElFormItem label="选择样式" prop="borderType">
+      <ElRadioGroup v-model="formData!.borderType">
+        <ElTooltip
+          placement="top"
+          v-for="(item, index) in BORDER_TYPES"
+          :key="index"
+          :content="item.text"
+        >
+          <ElRadioButton :value="item.type">
+            <IconifyIcon :icon="item.icon" />
+          </ElRadioButton>
+        </ElTooltip>
+      </ElRadioGroup>
+    </ElFormItem>
+    <template v-if="formData.borderType !== 'none'">
+      <ElFormItem label="线宽" prop="lineWidth">
+        <ElSlider
+          v-model="formData.lineWidth"
+          :min="1"
+          :max="30"
+          show-input
+          input-size="small"
+        />
+      </ElFormItem>
+      <ElFormItem label="左右边距" prop="paddingType">
+        <ElRadioGroup v-model="formData!.paddingType">
+          <ElTooltip content="无边距" placement="top">
+            <ElRadioButton value="none">
+              <IconifyIcon icon="tabler:box-padding" />
+            </ElRadioButton>
+          </ElTooltip>
+          <ElTooltip content="左右留边" placement="top">
+            <ElRadioButton value="horizontal">
+              <IconifyIcon icon="vaadin:padding" />
+            </ElRadioButton>
+          </ElTooltip>
+        </ElRadioGroup>
+      </ElFormItem>
+      <ElFormItem label="颜色">
+        <!-- 分割线颜色 -->
+        <ColorInput v-model="formData.lineColor" />
+      </ElFormItem>
+    </template>
+  </ElForm>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/Popover/config.ts b/apps/web-ele/src/components/diy-editor/components/mobile/Popover/config.ts
new file mode 100644
index 00000000..b842d19f
--- /dev/null
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/Popover/config.ts
@@ -0,0 +1,26 @@
+import type { DiyComponent } from '#/components/diy-editor/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-ele/src/components/diy-editor/components/mobile/Popover/index.vue b/apps/web-ele/src/components/diy-editor/components/mobile/Popover/index.vue
new file mode 100644
index 00000000..bc724eca
--- /dev/null
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/Popover/index.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import type { PopoverProperty } from './config';
+
+import { ref } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { ElImage } from 'element-plus';
+
+/** 弹窗广告 */
+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)"
+  >
+    <ElImage :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>
+    </ElImage>
+    <div class="absolute right-1 top-1 text-xs">{{ index + 1 }}</div>
+  </div>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/Popover/property.vue b/apps/web-ele/src/components/diy-editor/components/mobile/Popover/property.vue
new file mode 100644
index 00000000..0d69fd9d
--- /dev/null
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/Popover/property.vue
@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import type { PopoverProperty } from './config';
+
+import { useVModel } from '@vueuse/core';
+import {
+  ElForm,
+  ElFormItem,
+  ElRadio,
+  ElRadioGroup,
+  ElTooltip,
+} from 'element-plus';
+
+import AppLinkInput from '#/components/app-link-input/index.vue';
+import Draggable from '#/components/draggable/index.vue';
+import UploadImg from '#/components/upload/image-upload.vue';
+
+// 弹窗广告属性面板
+defineOptions({ name: 'PopoverProperty' });
+
+const props = defineProps<{ modelValue: PopoverProperty }>();
+const emit = defineEmits(['update:modelValue']);
+const formData = useVModel(props, 'modelValue', emit);
+</script>
+
+<template>
+  <ElForm label-width="80px" :model="formData">
+    <Draggable v-model="formData.list" :empty-item="{ showType: 'once' }">
+      <template #default="{ element, index }">
+        <ElFormItem label="图片" :prop="`list[${index}].imgUrl`">
+          <UploadImg
+            v-model="element.imgUrl"
+            height="56px"
+            width="56px"
+            :show-description="false"
+          />
+        </ElFormItem>
+        <ElFormItem label="跳转链接" :prop="`list[${index}].url`">
+          <AppLinkInput v-model="element.url" />
+        </ElFormItem>
+        <ElFormItem label="显示次数" :prop="`list[${index}].showType`">
+          <ElRadioGroup v-model="element.showType">
+            <ElTooltip
+              content="只显示一次，下次打开时不显示"
+              placement="bottom"
+            >
+              <ElRadio value="once">一次</ElRadio>
+            </ElTooltip>
+            <ElTooltip content="每次打开时都会显示" placement="bottom">
+              <ElRadio value="always">不限</ElRadio>
+            </ElTooltip>
+          </ElRadioGroup>
+        </ElFormItem>
+      </template>
+    </Draggable>
+  </ElForm>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/coupon-card/component.tsx b/apps/web-ele/src/components/diy-editor/components/mobile/coupon-card/component.tsx
new file mode 100644
index 00000000..d4dbfee4
--- /dev/null
+++ b/apps/web-ele/src/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-ele/src/components/diy-editor/components/mobile/coupon-card/config.ts b/apps/web-ele/src/components/diy-editor/components/mobile/coupon-card/config.ts
new file mode 100644
index 00000000..ddfc1857
--- /dev/null
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/coupon-card/config.ts
@@ -0,0 +1,50 @@
+import type {
+  ComponentStyle,
+  DiyComponent,
+} from '#/components/diy-editor/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-ele/src/components/diy-editor/components/mobile/coupon-card/coupon-discount-desc.tsx b/apps/web-ele/src/components/diy-editor/components/mobile/coupon-card/coupon-discount-desc.tsx
new file mode 100644
index 00000000..634cb88c
--- /dev/null
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/coupon-card/coupon-discount-desc.tsx
@@ -0,0 +1,35 @@
+import type { MallCouponTemplateApi } from '#/api/mall/promotion/coupon/couponTemplate';
+
+import { defineComponent } from 'vue';
+
+import { floatToFixed2 } from '@vben/utils';
+
+import { PromotionDiscountTypeEnum } from '#/utils/constants';
+
+// 优惠描述
+export const CouponDiscountDesc = defineComponent({
+  name: 'CouponDiscountDesc',
+  props: {
+    coupon: {
+      type: Object as () => MallCouponTemplateApi.CouponTemplate,
+      required: true,
+    },
+  },
+  setup(props) {
+    const coupon = props.coupon as MallCouponTemplateApi.CouponTemplate;
+    // 使用条件
+    const useCondition =
+      coupon.usePrice > 0 ? `满${floatToFixed2(coupon.usePrice)}元，` : '';
+    // 优惠描述
+    const discountDesc =
+      coupon.discountType === PromotionDiscountTypeEnum.PRICE.type
+        ? `减${floatToFixed2(coupon.discountPrice)}元`
+        : `打${coupon.discountPercent / 10}折`;
+    return () => (
+      <div>
+        <span>{useCondition}</span>
+        <span>{discountDesc}</span>
+      </div>
+    );
+  },
+});
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/coupon-card/coupon-discount.tsx b/apps/web-ele/src/components/diy-editor/components/mobile/coupon-card/coupon-discount.tsx
new file mode 100644
index 00000000..bde532e4
--- /dev/null
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/coupon-card/coupon-discount.tsx
@@ -0,0 +1,35 @@
+import type { MallCouponTemplateApi } from '#/api/mall/promotion/coupon/couponTemplate';
+
+import { defineComponent } from 'vue';
+
+import { floatToFixed2 } from '@vben/utils';
+
+import { PromotionDiscountTypeEnum } from '#/utils/constants';
+
+// 优惠值
+export const CouponDiscount = defineComponent({
+  name: 'CouponDiscount',
+  props: {
+    coupon: {
+      type: Object as () => MallCouponTemplateApi.CouponTemplate,
+      required: true,
+    },
+  },
+  setup(props) {
+    const coupon = props.coupon as MallCouponTemplateApi.CouponTemplate;
+    // 折扣
+    let value = `${coupon.discountPercent / 10}`;
+    let suffix = ' 折';
+    // 满减
+    if (coupon.discountType === PromotionDiscountTypeEnum.PRICE.type) {
+      value = floatToFixed2(coupon.discountPrice);
+      suffix = ' 元';
+    }
+    return () => (
+      <div>
+        <span class={'text-20px font-bold'}>{value}</span>
+        <span>{suffix}</span>
+      </div>
+    );
+  },
+});
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/coupon-card/coupon-validTerm.tsx b/apps/web-ele/src/components/diy-editor/components/mobile/coupon-card/coupon-validTerm.tsx
new file mode 100644
index 00000000..c96903f1
--- /dev/null
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/coupon-card/coupon-validTerm.tsx
@@ -0,0 +1,29 @@
+import type { MallCouponTemplateApi } from '#/api/mall/promotion/coupon/couponTemplate';
+
+import { defineComponent } from 'vue';
+
+import { formatDate } from '@vben/utils';
+
+import { CouponTemplateValidityTypeEnum } from '#/utils/constants';
+
+// 有效期
+export const CouponValidTerm = defineComponent({
+  name: 'CouponValidTerm',
+  props: {
+    coupon: {
+      type: Object as () => MallCouponTemplateApi.CouponTemplate,
+      required: true,
+    },
+  },
+  setup(props) {
+    const coupon = props.coupon as MallCouponTemplateApi.CouponTemplate;
+    const text =
+      coupon.validityType === CouponTemplateValidityTypeEnum.DATE.type
+        ? `有效期：${formatDate(coupon.validStartTime, 'YYYY-MM-DD')} 至 ${formatDate(
+            coupon.validEndTime,
+            'YYYY-MM-DD',
+          )}`
+        : `领取后第 ${coupon.fixedStartTerm} - ${coupon.fixedEndTerm} 天内可用`;
+    return () => <div>{text}</div>;
+  },
+});
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/coupon-card/index.vue b/apps/web-ele/src/components/diy-editor/components/mobile/coupon-card/index.vue
new file mode 100644
index 00000000..eb5fbb1a
--- /dev/null
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/coupon-card/index.vue
@@ -0,0 +1,162 @@
+<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 { ElScrollbar } from 'element-plus';
+
+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>
+  <ElScrollbar 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>
+  </ElScrollbar>
+</template>
+<style scoped lang="scss"></style>
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/coupon-card/property.vue b/apps/web-ele/src/components/diy-editor/components/mobile/coupon-card/property.vue
new file mode 100644
index 00000000..55332ded
--- /dev/null
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/coupon-card/property.vue
@@ -0,0 +1,161 @@
+<script setup lang="ts">
+import type { CouponCardProperty } from './config';
+
+import type { MallCouponTemplateApi } from '#/api/mall/promotion/coupon/couponTemplate';
+
+import { ref, watch } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+import { floatToFixed2 } from '@vben/utils';
+
+import { useVModel } from '@vueuse/core';
+import {
+  ElCard,
+  ElForm,
+  ElFormItem,
+  ElRadioButton,
+  ElRadioGroup,
+  ElSlider,
+  ElTooltip,
+} from 'element-plus';
+
+import * as CouponTemplateApi from '#/api/mall/promotion/coupon/couponTemplate';
+import ColorInput from '#/components/color-input/index.vue';
+import ComponentContainerProperty from '#/components/diy-editor/components/component-container-property.vue';
+import UploadImg from '#/components/upload/image-upload.vue';
+import {
+  CouponTemplateTakeTypeEnum,
+  PromotionDiscountTypeEnum,
+} from '#/utils/constants';
+import CouponSelect from '#/views/mall/promotion/coupon/components/coupon-select.vue';
+
+// 优惠券卡片属性面板
+defineOptions({ name: 'CouponCardProperty' });
+
+const props = defineProps<{ modelValue: CouponCardProperty }>();
+const emit = defineEmits(['update:modelValue']);
+const formData = useVModel(props, 'modelValue', emit);
+
+// 优惠券列表
+const couponList = ref<MallCouponTemplateApi.CouponTemplate[]>([]);
+const couponSelectDialog = ref();
+// 添加优惠券
+const handleAddCoupon = () => {
+  couponSelectDialog.value.open();
+};
+const handleCouponSelect = () => {
+  formData.value.couponIds = couponList.value.map((coupon) => coupon.id);
+};
+
+watch(
+  () => formData.value.couponIds,
+  async () => {
+    if (formData.value.couponIds?.length > 0) {
+      couponList.value = await CouponTemplateApi.getCouponTemplateList(
+        formData.value.couponIds,
+      );
+    }
+  },
+  {
+    immediate: true,
+    deep: true,
+  },
+);
+</script>
+
+<template>
+  <ComponentContainerProperty v-model="formData.style">
+    <ElForm label-width="80px" :model="formData">
+      <ElCard header="优惠券列表" class="property-group" shadow="never">
+        <div
+          v-for="(coupon, index) in couponList"
+          :key="index"
+          class="flex items-center justify-between"
+        >
+          <ElText size="large" truncated>{{ coupon.name }}</ElText>
+          <ElText type="info" truncated>
+            <span v-if="coupon.usePrice > 0">
+              满{{ floatToFixed2(coupon.usePrice) }}元，
+            </span>
+            <span
+              v-if="
+                coupon.discountType === PromotionDiscountTypeEnum.PRICE.type
+              "
+            >
+              减{{ floatToFixed2(coupon.discountPrice) }}元
+            </span>
+            <span v-else> 打{{ coupon.discountPercent }}折 </span>
+          </ElText>
+        </div>
+        <ElFormItem label-width="0">
+          <ElButton
+            @click="handleAddCoupon"
+            type="primary"
+            plain
+            class="mt-2 w-full"
+          >
+            <IconifyIcon icon="ep:plus" class="mr-1" /> 添加
+          </ElButton>
+        </ElFormItem>
+      </ElCard>
+      <ElCard header="优惠券样式" class="property-group" shadow="never">
+        <ElFormItem label="列数" prop="type">
+          <ElRadioGroup v-model="formData.columns">
+            <ElTooltip class="item" content="一列" placement="bottom">
+              <ElRadioButton :value="1">
+                <IconifyIcon icon="fluent:text-column-one-24-filled" />
+              </ElRadioButton>
+            </ElTooltip>
+            <ElTooltip class="item" content="二列" placement="bottom">
+              <ElRadioButton :value="2">
+                <IconifyIcon icon="fluent:text-column-two-24-filled" />
+              </ElRadioButton>
+            </ElTooltip>
+            <ElTooltip class="item" content="三列" placement="bottom">
+              <ElRadioButton :value="3">
+                <IconifyIcon icon="fluent:text-column-three-24-filled" />
+              </ElRadioButton>
+            </ElTooltip>
+          </ElRadioGroup>
+        </ElFormItem>
+        <ElFormItem label="背景图片" prop="bgImg">
+          <UploadImg
+            v-model="formData.bgImg"
+            height="80px"
+            width="100%"
+            class="min-w-[160px]"
+            :show-description="false"
+          />
+        </ElFormItem>
+        <ElFormItem label="文字颜色" prop="textColor">
+          <ColorInput v-model="formData.textColor" />
+        </ElFormItem>
+        <ElFormItem label="按钮背景" prop="button.bgColor">
+          <ColorInput v-model="formData.button.bgColor" />
+        </ElFormItem>
+        <ElFormItem label="按钮文字" prop="button.color">
+          <ColorInput v-model="formData.button.color" />
+        </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>
+  <!-- 优惠券选择 -->
+  <CouponSelect
+    ref="couponSelectDialog"
+    v-model:multiple-selection="couponList"
+    :take-type="CouponTemplateTakeTypeEnum.USER.type"
+    @change="handleCouponSelect"
+  />
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/floating-action-button/config.ts b/apps/web-ele/src/components/diy-editor/components/mobile/floating-action-button/config.ts
new file mode 100644
index 00000000..7972bd3b
--- /dev/null
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/floating-action-button/config.ts
@@ -0,0 +1,36 @@
+import type { DiyComponent } from '#/components/diy-editor/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-ele/src/components/diy-editor/components/mobile/floating-action-button/index.vue b/apps/web-ele/src/components/diy-editor/components/mobile/floating-action-button/index.vue
new file mode 100644
index 00000000..eb656376
--- /dev/null
+++ b/apps/web-ele/src/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 { ElImage, ElMessage } from 'element-plus';
+
+/** 悬浮按钮 */
+defineOptions({ name: 'FloatingActionButton' });
+// 定义属性
+defineProps<{ property: FloatingActionButtonProperty }>();
+
+// 是否展开
+const expanded = ref(false);
+// 处理展开/折叠
+const handleToggleFab = () => {
+  expanded.value = !expanded.value;
+};
+
+const handleActive = (index: number) => {
+  ElMessage.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)"
+      >
+        <ElImage :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>
+        </ElImage>
+        <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-ele/src/components/diy-editor/components/mobile/floating-action-button/property.vue b/apps/web-ele/src/components/diy-editor/components/mobile/floating-action-button/property.vue
new file mode 100644
index 00000000..2be023a8
--- /dev/null
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/floating-action-button/property.vue
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import type { FloatingActionButtonProperty } from './config';
+
+import { useVModel } from '@vueuse/core';
+import {
+  ElCard,
+  ElForm,
+  ElFormItem,
+  ElRadio,
+  ElRadioGroup,
+  ElSwitch,
+} from 'element-plus';
+
+import AppLinkInput from '#/components/app-link-input/index.vue';
+import Draggable from '#/components/draggable/index.vue';
+import InputWithColor from '#/components/input-with-color/index.vue';
+import UploadImg from '#/components/upload/image-upload.vue';
+
+// 悬浮按钮属性面板
+defineOptions({ name: 'FloatingActionButtonProperty' });
+
+const props = defineProps<{ modelValue: FloatingActionButtonProperty }>();
+const emit = defineEmits(['update:modelValue']);
+const formData = useVModel(props, 'modelValue', emit);
+</script>
+
+<template>
+  <ElForm label-width="80px" :model="formData">
+    <ElCard header="按钮配置" class="property-group" shadow="never">
+      <ElFormItem label="展开方向" prop="direction">
+        <ElRadioGroup v-model="formData.direction">
+          <ElRadio value="vertical">垂直</ElRadio>
+          <ElRadio value="horizontal">水平</ElRadio>
+        </ElRadioGroup>
+      </ElFormItem>
+      <ElFormItem label="显示文字" prop="showText">
+        <ElSwitch v-model="formData.showText" />
+      </ElFormItem>
+    </ElCard>
+    <ElCard header="按钮列表" class="property-group" shadow="never">
+      <Draggable v-model="formData.list" :empty-item="{ textColor: '#fff' }">
+        <template #default="{ element, index }">
+          <ElFormItem label="图标" :prop="`list[${index}].imgUrl`">
+            <UploadImg
+              v-model="element.imgUrl"
+              height="56px"
+              width="56px"
+              :show-description="false"
+            />
+          </ElFormItem>
+          <ElFormItem label="文字" :prop="`list[${index}].text`">
+            <InputWithColor
+              v-model="element.text"
+              v-model:color="element.textColor"
+            />
+          </ElFormItem>
+          <ElFormItem label="跳转链接" :prop="`list[${index}].url`">
+            <AppLinkInput v-model="element.url" />
+          </ElFormItem>
+        </template>
+      </Draggable>
+    </ElCard>
+  </ElForm>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/hot-zone/components/hot-zone-edit-dialog/controller.ts b/apps/web-ele/src/components/diy-editor/components/mobile/hot-zone/components/hot-zone-edit-dialog/controller.ts
new file mode 100644
index 00000000..93a264b5
--- /dev/null
+++ b/apps/web-ele/src/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 '#/components/diy-editor/components/mobile/HotZone/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-ele/src/components/diy-editor/components/mobile/hot-zone/components/hot-zone-edit-dialog/index.vue b/apps/web-ele/src/components/diy-editor/components/mobile/hot-zone/components/hot-zone-edit-dialog/index.vue
new file mode 100644
index 00000000..0a72633d
--- /dev/null
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/hot-zone/components/hot-zone-edit-dialog/index.vue
@@ -0,0 +1,284 @@
+<script setup lang="ts">
+import type { ControlDot } from './controller';
+
+import type { AppLink } from '#/components/app-link-input/data';
+import type { HotZoneItemProperty } from '#/components/diy-editor/components/mobile/HotZone/config';
+
+import { ref } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { ElButton, ElDialog, ElImage } from 'element-plus';
+
+import {
+  CONTROL_DOT_LIST,
+  CONTROL_TYPE_ENUM,
+  HOT_ZONE_MIN_SIZE,
+  useDraggable,
+  zoomIn,
+  zoomOut,
+} from './controller';
+
+/** 热区编辑对话框 */
+defineOptions({ name: 'HotZoneEditDialog' });
+
+// 定义属性
+const props = defineProps({
+  modelValue: {
+    type: Array<HotZoneItemProperty>,
+    default: () => [],
+  },
+  imgUrl: {
+    type: String,
+    default: '',
+  },
+});
+const emit = defineEmits(['update:modelValue']);
+const formData = ref<HotZoneItemProperty[]>([]);
+
+// 弹窗的是否显示
+const dialogVisible = ref(false);
+// 打开弹窗
+const open = () => {
+  // 放大
+  formData.value = zoomIn(props.modelValue);
+  dialogVisible.value = true;
+};
+// 提供 open 方法，用于打开弹窗
+defineExpose({ open });
+
+// 热区容器
+const container = ref<HTMLDivElement>();
+
+// 增加热区
+const handleAdd = () => {
+  formData.value.push({
+    width: HOT_ZONE_MIN_SIZE,
+    height: HOT_ZONE_MIN_SIZE,
+    top: 0,
+    left: 0,
+  } as HotZoneItemProperty);
+};
+// 删除热区
+const handleRemove = (hotZone: HotZoneItemProperty) => {
+  formData.value = formData.value.filter((item) => item !== hotZone);
+};
+
+// 移动热区
+const handleMove = (item: HotZoneItemProperty, e: MouseEvent) => {
+  useDraggable(item, e, (left, top, _, __, moveWidth, moveHeight) => {
+    setLeft(item, left + moveWidth);
+    setTop(item, top + moveHeight);
+  });
+};
+
+// 调整热区大小、位置
+const handleResize = (
+  item: HotZoneItemProperty,
+  ctrlDot: ControlDot,
+  e: MouseEvent,
+) => {
+  useDraggable(item, e, (left, top, width, height, moveWidth, moveHeight) => {
+    ctrlDot.types.forEach((type) => {
+      switch (type) {
+        case CONTROL_TYPE_ENUM.HEIGHT: {
+          {
+            // 左移时，宽度为减少
+            const direction = ctrlDot.types.includes(CONTROL_TYPE_ENUM.TOP)
+              ? -1
+              : 1;
+            setHeight(item, height + moveHeight * direction);
+          }
+          break;
+        }
+        case CONTROL_TYPE_ENUM.LEFT: {
+          setLeft(item, left + moveWidth);
+          break;
+        }
+        case CONTROL_TYPE_ENUM.TOP: {
+          setTop(item, top + moveHeight);
+          break;
+        }
+        case CONTROL_TYPE_ENUM.WIDTH: {
+          {
+            // 上移时，高度为减少
+            const direction = ctrlDot.types.includes(CONTROL_TYPE_ENUM.LEFT)
+              ? -1
+              : 1;
+            setWidth(item, width + moveWidth * direction);
+          }
+          break;
+        }
+      }
+    });
+  });
+};
+
+// 设置X轴坐标
+const setLeft = (item: HotZoneItemProperty, left: number) => {
+  // 不能超出容器
+  if (left >= 0 && left <= container.value!.offsetWidth - item.width) {
+    item.left = left;
+  }
+};
+// 设置Y轴坐标
+const setTop = (item: HotZoneItemProperty, top: number) => {
+  // 不能超出容器
+  if (top >= 0 && top <= container.value!.offsetHeight - item.height) {
+    item.top = top;
+  }
+};
+// 设置宽度
+const setWidth = (item: HotZoneItemProperty, width: number) => {
+  // 不能小于最小宽度 && 不能超出容器右边
+  if (
+    width >= HOT_ZONE_MIN_SIZE &&
+    item.left + width <= container.value!.offsetWidth
+  ) {
+    item.width = width;
+  }
+};
+// 设置高度
+const setHeight = (item: HotZoneItemProperty, height: number) => {
+  // 不能小于最小高度 && 不能超出容器底部
+  if (
+    height >= HOT_ZONE_MIN_SIZE &&
+    item.top + height <= container.value!.offsetHeight
+  ) {
+    item.height = height;
+  }
+};
+
+// 处理对话框关闭
+const handleSubmit = () => {
+  // 会自动触发handleClose
+  dialogVisible.value = false;
+};
+
+// 处理对话框关闭
+const handleClose = () => {
+  // 缩小
+  const list = zoomOut(formData.value);
+  emit('update:modelValue', list);
+};
+
+const activeHotZone = ref<HotZoneItemProperty>();
+const appLinkDialogRef = ref();
+const handleShowAppLinkDialog = (hotZone: HotZoneItemProperty) => {
+  activeHotZone.value = hotZone;
+  appLinkDialogRef.value.open(hotZone.url);
+};
+const handleAppLinkChange = (appLink: AppLink) => {
+  if (!appLink || !activeHotZone.value) return;
+  activeHotZone.value.name = appLink.name;
+  activeHotZone.value.url = appLink.path;
+};
+</script>
+
+<template>
+  <ElDialog
+    v-model="dialogVisible"
+    title="设置热区"
+    width="780"
+    @close="handleClose"
+  >
+    <div ref="container" class="w-750px relative h-full">
+      <ElImage
+        :src="imgUrl"
+        class="w-750px pointer-events-none h-full select-none"
+      />
+      <div
+        v-for="(item, hotZoneIndex) in formData"
+        :key="hotZoneIndex"
+        class="hot-zone"
+        :style="{
+          width: `${item.width}px`,
+          height: `${item.height}px`,
+          top: `${item.top}px`,
+          left: `${item.left}px`,
+        }"
+        @mousedown="handleMove(item, $event)"
+        @dblclick="handleShowAppLinkDialog(item)"
+      >
+        <span class="pointer-events-none select-none">{{
+          item.name || '双击选择链接'
+        }}</span>
+        <IconifyIcon
+          icon="ep:close"
+          class="delete"
+          :size="14"
+          @click="handleRemove(item)"
+        />
+
+        <!-- 8个控制点 -->
+        <span
+          class="ctrl-dot"
+          v-for="(dot, dotIndex) in CONTROL_DOT_LIST"
+          :key="dotIndex"
+          :style="dot.style"
+          @mousedown="handleResize(item, dot, $event)"
+        ></span>
+      </div>
+    </div>
+    <template #footer>
+      <ElButton @click="handleAdd" type="primary" plain>
+        <IconifyIcon icon="ep:plus" class="mr-5px" />
+        添加热区
+      </ElButton>
+      <ElButton @click="handleSubmit" type="primary" plain>
+        <IconifyIcon icon="ep:check" class="mr-5px" />
+        确定
+      </ElButton>
+    </template>
+  </ElDialog>
+  <AppLinkSelectDialog
+    ref="appLinkDialogRef"
+    @app-link-change="handleAppLinkChange"
+  />
+</template>
+
+<style scoped lang="scss">
+.hot-zone {
+  position: absolute;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  color: var(--el-color-primary);
+  cursor: move;
+  background: var(--el-color-primary-light-7);
+  border: 1px solid var(--el-color-primary);
+  opacity: 0.8;
+
+  /* 控制点 */
+  .ctrl-dot {
+    position: absolute;
+    z-index: 11;
+    width: 8px;
+    height: 8px;
+    background-color: #fff;
+    border: inherit;
+    border-radius: 50%;
+  }
+
+  .delete {
+    position: absolute;
+    top: 0;
+    right: 0;
+    display: none;
+    padding: 2px 2px 6px 6px;
+    color: #fff;
+    text-align: right;
+    cursor: pointer;
+    background-color: var(--el-color-primary);
+    border-radius: 0 0 0 80%;
+  }
+
+  &:hover {
+    .delete {
+      display: block;
+    }
+  }
+}
+</style>
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/hot-zone/config.ts b/apps/web-ele/src/components/diy-editor/components/mobile/hot-zone/config.ts
new file mode 100644
index 00000000..71e39d9c
--- /dev/null
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/hot-zone/config.ts
@@ -0,0 +1,46 @@
+import type {
+  ComponentStyle,
+  DiyComponent,
+} from '#/components/diy-editor/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-ele/src/components/diy-editor/components/mobile/hot-zone/index.vue b/apps/web-ele/src/components/diy-editor/components/mobile/hot-zone/index.vue
new file mode 100644
index 00000000..dd36b550
--- /dev/null
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/hot-zone/index.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import type { HotZoneProperty } from './config';
+
+import { ElImage } from 'element-plus';
+
+/** 热区 */
+defineOptions({ name: 'HotZone' });
+const props = defineProps<{ property: HotZoneProperty }>();
+</script>
+
+<template>
+  <div class="min-h-30px relative h-full w-full">
+    <ElImage
+      :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-ele/src/components/diy-editor/components/mobile/hot-zone/property.vue b/apps/web-ele/src/components/diy-editor/components/mobile/hot-zone/property.vue
new file mode 100644
index 00000000..e3c602f6
--- /dev/null
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/hot-zone/property.vue
@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import type { HotZoneProperty } from './config';
+
+import { ref } from 'vue';
+
+import { useVModel } from '@vueuse/core';
+import { ElButton, ElForm, ElFormItem, ElText } from 'element-plus';
+
+import ComponentContainerProperty from '#/components/diy-editor/components/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-ele/src/components/diy-editor/components/mobile/image-bar/config.ts b/apps/web-ele/src/components/diy-editor/components/mobile/image-bar/config.ts
new file mode 100644
index 00000000..53a87403
--- /dev/null
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/image-bar/config.ts
@@ -0,0 +1,30 @@
+import type {
+  ComponentStyle,
+  DiyComponent,
+} from '#/components/diy-editor/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-ele/src/components/diy-editor/components/mobile/image-bar/index.vue b/apps/web-ele/src/components/diy-editor/components/mobile/image-bar/index.vue
new file mode 100644
index 00000000..4562f7b3
--- /dev/null
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/image-bar/index.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { ImageBarProperty } from './config';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { ElImage } from 'element-plus';
+
+/** 图片展示 */
+defineOptions({ name: 'ImageBar' });
+
+defineProps<{ property: ImageBarProperty }>();
+</script>
+<template>
+  <!-- 无图片 -->
+  <div
+    class="flex h-12 items-center justify-center bg-gray-300"
+    v-if="!property.imgUrl"
+  >
+    <IconifyIcon icon="ep:picture" class="text-3xl text-gray-600" />
+  </div>
+  <ElImage class="min-h-8" v-else :src="property.imgUrl" />
+</template>
+
+<style scoped lang="scss">
+/* 图片 */
+img {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/image-bar/property.vue b/apps/web-ele/src/components/diy-editor/components/mobile/image-bar/property.vue
new file mode 100644
index 00000000..ce1b3ad5
--- /dev/null
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/image-bar/property.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { ImageBarProperty } from './config';
+
+import { useVModel } from '@vueuse/core';
+import { ElForm, ElFormItem } from 'element-plus';
+
+import AppLinkInput from '#/components/app-link-input/index.vue';
+import ComponentContainerProperty from '#/components/diy-editor/components/component-container-property.vue';
+import UploadImg from '#/components/upload/image-upload.vue';
+
+// 图片展示属性面板
+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-ele/src/components/diy-editor/components/mobile/index.ts b/apps/web-ele/src/components/diy-editor/components/mobile/index.ts
new file mode 100644
index 00000000..454e06a0
--- /dev/null
+++ b/apps/web-ele/src/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-ele/src/components/diy-editor/components/mobile/magic-cube/config.ts b/apps/web-ele/src/components/diy-editor/components/mobile/magic-cube/config.ts
new file mode 100644
index 00000000..b364fbb3
--- /dev/null
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/magic-cube/config.ts
@@ -0,0 +1,56 @@
+import type {
+  ComponentStyle,
+  DiyComponent,
+} from '#/components/diy-editor/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-ele/src/components/diy-editor/components/mobile/magic-cube/index.vue b/apps/web-ele/src/components/diy-editor/components/mobile/magic-cube/index.vue
new file mode 100644
index 00000000..5a3aa7e5
--- /dev/null
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/magic-cube/index.vue
@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import type { MagicCubeProperty } from './config';
+
+import { computed } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { ElImage } from 'element-plus';
+
+/** 广告魔方 */
+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`,
+      }"
+    >
+      <ElImage
+        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>
+      </ElImage>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/magic-cube/property.vue b/apps/web-ele/src/components/diy-editor/components/mobile/magic-cube/property.vue
new file mode 100644
index 00000000..80efbae6
--- /dev/null
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/magic-cube/property.vue
@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import type { MagicCubeProperty } from './config';
+
+import { ref } from 'vue';
+
+import { useVModel } from '@vueuse/core';
+import { ElForm, ElFormItem, ElSlider, ElText } from 'element-plus';
+
+import AppLinkInput from '#/components/app-link-input/index.vue';
+import ComponentContainerProperty from '#/components/diy-editor/components/component-container-property.vue';
+import MagicCubeEditor from '#/components/magic-cube-editor/index.vue';
+import UploadImg from '#/components/upload/image-upload.vue';
+
+/** 广告魔方属性面板 */
+defineOptions({ name: 'MagicCubeProperty' });
+
+const props = defineProps<{ modelValue: MagicCubeProperty }>();
+const emit = defineEmits(['update:modelValue']);
+const formData = useVModel(props, 'modelValue', emit);
+
+// 选中的热区
+const selectedHotAreaIndex = ref(-1);
+const handleHotAreaSelected = (_: any, index: number) => {
+  selectedHotAreaIndex.value = index;
+};
+</script>
+
+<template>
+  <ComponentContainerProperty v-model="formData.style">
+    <!-- 表单 -->
+    <ElForm label-width="80px" :model="formData" class="mt-2">
+      <ElText tag="p"> 魔方设置 </ElText>
+      <ElText type="info" size="small"> 每格尺寸187 * 187 </ElText>
+      <MagicCubeEditor
+        class="my-4"
+        v-model="formData.list"
+        :rows="4"
+        :cols="4"
+        @hot-area-selected="handleHotAreaSelected"
+      />
+      <template v-for="(hotArea, index) in formData.list" :key="index">
+        <template v-if="selectedHotAreaIndex === index">
+          <ElFormItem label="上传图片" :prop="`list[${index}].imgUrl`">
+            <UploadImg
+              v-model="hotArea.imgUrl"
+              height="80px"
+              width="80px"
+              :show-description="false"
+            />
+          </ElFormItem>
+          <ElFormItem label="链接" :prop="`list[${index}].url`">
+            <AppLinkInput v-model="hotArea.url" />
+          </ElFormItem>
+        </template>
+      </template>
+      <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>
+    </ElForm>
+  </ComponentContainerProperty>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/menu-grid/config.ts b/apps/web-ele/src/components/diy-editor/components/mobile/menu-grid/config.ts
new file mode 100644
index 00000000..4ae675a4
--- /dev/null
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/menu-grid/config.ts
@@ -0,0 +1,83 @@
+import type {
+  ComponentStyle,
+  DiyComponent,
+} from '#/components/diy-editor/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-ele/src/components/diy-editor/components/mobile/menu-grid/index.vue b/apps/web-ele/src/components/diy-editor/components/mobile/menu-grid/index.vue
new file mode 100644
index 00000000..2036ede9
--- /dev/null
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/menu-grid/index.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import type { MenuGridProperty } from './config';
+
+import { ElImage } from 'element-plus';
+
+/** 宫格导航 */
+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>
+      <ElImage v-if="item.iconUrl" class="h-7 w-7" :src="item.iconUrl" />
+      <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-ele/src/components/diy-editor/components/mobile/menu-grid/property.vue b/apps/web-ele/src/components/diy-editor/components/mobile/menu-grid/property.vue
new file mode 100644
index 00000000..88039d35
--- /dev/null
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/menu-grid/property.vue
@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import type { MenuGridProperty } from './config';
+
+import { useVModel } from '@vueuse/core';
+import {
+  ElCard,
+  ElForm,
+  ElFormItem,
+  ElRadio,
+  ElRadioGroup,
+  ElSwitch,
+} from 'element-plus';
+
+import AppLinkInput from '#/components/app-link-input/index.vue';
+import ComponentContainerProperty from '#/components/diy-editor/components/component-container-property.vue';
+import Draggable from '#/components/draggable/index.vue';
+import UploadImg from '#/components/upload/image-upload.vue';
+
+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-ele/src/components/diy-editor/components/mobile/menu-list/config.ts b/apps/web-ele/src/components/diy-editor/components/mobile/menu-list/config.ts
new file mode 100644
index 00000000..4be25674
--- /dev/null
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/menu-list/config.ts
@@ -0,0 +1,52 @@
+import type {
+  ComponentStyle,
+  DiyComponent,
+} from '#/components/diy-editor/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-ele/src/components/diy-editor/components/mobile/menu-list/index.vue b/apps/web-ele/src/components/diy-editor/components/mobile/menu-list/index.vue
new file mode 100644
index 00000000..12670dcb
--- /dev/null
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/menu-list/index.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { MenuListProperty } from './config';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { ElImage } from 'element-plus';
+
+/** 列表导航 */
+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">
+        <ElImage 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-ele/src/components/diy-editor/components/mobile/menu-list/property.vue b/apps/web-ele/src/components/diy-editor/components/mobile/menu-list/property.vue
new file mode 100644
index 00000000..a98edc25
--- /dev/null
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/menu-list/property.vue
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import type { MenuListProperty } from './config';
+
+import { useVModel } from '@vueuse/core';
+import { ElForm, ElFormItem, ElText } from 'element-plus';
+
+import AppLinkInput from '#/components/app-link-input/index.vue';
+import ComponentContainerProperty from '#/components/diy-editor/components/component-container-property.vue';
+import Draggable from '#/components/draggable/index.vue';
+import InputWithColor from '#/components/input-with-color/index.vue';
+import UploadImg from '#/components/upload/image-upload.vue';
+
+import { EMPTY_MENU_LIST_ITEM_PROPERTY } from './config';
+
+/** 列表导航属性面板 */
+defineOptions({ name: 'MenuListProperty' });
+
+const props = defineProps<{ modelValue: MenuListProperty }>();
+const emit = defineEmits(['update:modelValue']);
+const formData = useVModel(props, 'modelValue', emit);
+</script>
+
+<template>
+  <ComponentContainerProperty v-model="formData.style">
+    <ElText tag="p"> 菜单设置 </ElText>
+    <ElText type="info" size="small"> 拖动左侧的小圆点可以调整顺序 </ElText>
+
+    <!-- 表单 -->
+    <ElForm label-width="60px" :model="formData" class="mt-2">
+      <Draggable
+        v-model="formData.list"
+        :empty-item="EMPTY_MENU_LIST_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>
+        </template>
+      </Draggable>
+    </ElForm>
+  </ComponentContainerProperty>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/menu-swiper/config.ts b/apps/web-ele/src/components/diy-editor/components/mobile/menu-swiper/config.ts
new file mode 100644
index 00000000..535287d4
--- /dev/null
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/menu-swiper/config.ts
@@ -0,0 +1,70 @@
+import type {
+  ComponentStyle,
+  DiyComponent,
+} from '#/components/diy-editor/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-ele/src/components/diy-editor/components/mobile/menu-swiper/index.vue b/apps/web-ele/src/components/diy-editor/components/mobile/menu-swiper/index.vue
new file mode 100644
index 00000000..0d69c7c8
--- /dev/null
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/menu-swiper/index.vue
@@ -0,0 +1,137 @@
+<script setup lang="ts">
+import type { MenuSwiperItemProperty, MenuSwiperProperty } from './config';
+
+import { ref, watch } from 'vue';
+
+import { ElCarousel, ElCarouselItem, ElImage } from 'element-plus';
+
+/** 菜单导航 */
+defineOptions({ name: 'MenuSwiper' });
+const props = defineProps<{ property: MenuSwiperProperty }>();
+// 标题的高度
+const TITLE_HEIGHT = 20;
+// 图标的高度
+const ICON_SIZE = 32;
+// 垂直间距：一行上下的间距
+const SPACE_Y = 16;
+
+// 分页
+const pages = ref<MenuSwiperItemProperty[][]>([]);
+// 轮播图高度
+const carouselHeight = ref(0);
+// 行高
+const rowHeight = ref(0);
+// 列宽
+const columnWidth = ref('');
+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>
+  <ElCarousel
+    :height="`${carouselHeight}px`"
+    :autoplay="false"
+    arrow="hover"
+    indicator-position="outside"
+  >
+    <ElCarouselItem 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>
+            <ElImage
+              v-if="item.iconUrl"
+              :src="item.iconUrl"
+              class="h-full w-full"
+            />
+          </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>
+    </ElCarouselItem>
+  </ElCarousel>
+</template>
+
+<style lang="scss">
+// 重写指示器样式，与 APP 保持一致
+:root {
+  .el-carousel__indicator {
+    padding-top: 0;
+    padding-bottom: 0;
+
+    .el-carousel__button {
+      --el-carousel-indicator-height: 6px;
+      --el-carousel-indicator-width: 6px;
+      --el-carousel-indicator-out-color: #ff6000;
+
+      border-radius: 6px;
+    }
+  }
+
+  .el-carousel__indicator.is-active {
+    .el-carousel__button {
+      --el-carousel-indicator-width: 12px;
+    }
+  }
+}
+</style>
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/menu-swiper/property.vue b/apps/web-ele/src/components/diy-editor/components/mobile/menu-swiper/property.vue
new file mode 100644
index 00000000..62dd6e92
--- /dev/null
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/menu-swiper/property.vue
@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import type { MenuSwiperProperty } from './config';
+
+import { cloneDeep } from '@vben/utils';
+
+import { useVModel } from '@vueuse/core';
+import {
+  ElCard,
+  ElForm,
+  ElFormItem,
+  ElRadio,
+  ElRadioGroup,
+  ElSwitch,
+} from 'element-plus';
+
+import AppLinkInput from '#/components/app-link-input/index.vue';
+import ColorInput from '#/components/color-input/index.vue';
+import ComponentContainerProperty from '#/components/diy-editor/components/component-container-property.vue';
+import Draggable from '#/components/draggable/index.vue';
+import InputWithColor from '#/components/input-with-color/index.vue';
+import UploadImg from '#/components/upload/image-upload.vue';
+
+import { EMPTY_MENU_SWIPER_ITEM_PROPERTY } from './config';
+
+/** 菜单导航属性面板 */
+defineOptions({ name: 'MenuSwiperProperty' });
+
+const props = defineProps<{ modelValue: MenuSwiperProperty }>();
+const emit = defineEmits(['update:modelValue']);
+const formData = useVModel(props, 'modelValue', emit);
+</script>
+
+<template>
+  <ComponentContainerProperty v-model="formData.style">
+    <!-- 表单 -->
+    <ElForm label-width="80px" :model="formData" class="mt-2">
+      <ElFormItem label="布局" prop="layout">
+        <ElRadioGroup v-model="formData.layout">
+          <ElRadio value="iconText">图标+文字</ElRadio>
+          <ElRadio value="icon">仅图标</ElRadio>
+        </ElRadioGroup>
+      </ElFormItem>
+      <ElFormItem label="行数" prop="row">
+        <ElRadioGroup v-model="formData.row">
+          <ElRadio :value="1">1行</ElRadio>
+          <ElRadio :value="2">2行</ElRadio>
+        </ElRadioGroup>
+      </ElFormItem>
+      <ElFormItem label="列数" prop="column">
+        <ElRadioGroup v-model="formData.column">
+          <ElRadio :value="3">3列</ElRadio>
+          <ElRadio :value="4">4列</ElRadio>
+          <ElRadio :value="5">5列</ElRadio>
+        </ElRadioGroup>
+      </ElFormItem>
+
+      <ElCard header="菜单设置" class="property-group" shadow="never">
+        <Draggable
+          v-model="formData.list"
+          :empty-item="cloneDeep(EMPTY_MENU_SWIPER_ITEM_PROPERTY)"
+        >
+          <template #default="{ element }">
+            <ElFormItem label="图标" prop="iconUrl">
+              <UploadImg
+                v-model="element.iconUrl"
+                height="80px"
+                width="80px"
+                :show-description="false"
+              >
+                <template #tip> 建议尺寸：98 * 98 </template>
+              </UploadImg>
+            </ElFormItem>
+            <ElFormItem label="标题" prop="title">
+              <InputWithColor
+                v-model="element.title"
+                v-model:color="element.titleColor"
+              />
+            </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-ele/src/components/diy-editor/components/mobile/navigation-bar/components/cell-property.vue b/apps/web-ele/src/components/diy-editor/components/mobile/navigation-bar/components/cell-property.vue
new file mode 100644
index 00000000..b34e0091
--- /dev/null
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/navigation-bar/components/cell-property.vue
@@ -0,0 +1,143 @@
+<script lang="ts" setup>
+import type { NavigationBarCellProperty } from '../config';
+
+import type { Rect } from '#/components/magic-cube-editor/util';
+
+import { computed, ref } from 'vue';
+
+import { useVModel } from '@vueuse/core';
+import {
+  ElFormItem,
+  ElInput,
+  ElRadio,
+  ElRadioGroup,
+  ElSlider,
+} from 'element-plus';
+
+import appNavBarMp from '#/assets/imgs/diy/app-nav-bar-mp.png';
+import AppLinkInput from '#/components/app-link-input/index.vue';
+import ColorInput from '#/components/color-input/index.vue';
+import MagicCubeEditor from '#/components/magic-cube-editor/index.vue';
+import UploadImg from '#/components/upload/image-upload.vue';
+
+// 导航栏属性面板
+defineOptions({ name: 'NavigationBarCellProperty' });
+
+const props = defineProps({
+  isMp: {
+    type: Boolean,
+    default: true,
+  },
+  modelValue: {
+    type: Array as () => NavigationBarCellProperty[],
+    default: () => [],
+  },
+});
+const emit = defineEmits(['update:modelValue']);
+const cellList = useVModel(props, 'modelValue', emit);
+
+// 单元格数量：小程序6个（右侧胶囊按钮占了2个），其它平台8个
+const cellCount = computed(() => (props.isMp ? 6 : 8));
+
+// 转换为Rect格式的数据
+const rectList = computed<Rect[]>(() => {
+  return cellList.value.map((cell) => ({
+    left: cell.left,
+    top: cell.top,
+    width: cell.width,
+    height: cell.height,
+    right: cell.left + cell.width,
+    bottom: cell.top + cell.height,
+  }));
+});
+
+// 选中的热区
+const selectedHotAreaIndex = ref(0);
+const handleHotAreaSelected = (
+  cellValue: NavigationBarCellProperty,
+  index: number,
+) => {
+  selectedHotAreaIndex.value = index;
+  if (!cellValue.type) {
+    cellValue.type = 'text';
+    cellValue.textColor = '#111111';
+  }
+};
+</script>
+
+<template>
+  <div class="h-40px flex items-center justify-center">
+    <MagicCubeEditor
+      v-model="rectList"
+      :cols="cellCount"
+      :cube-size="38"
+      :rows="1"
+      class="m-b-16px"
+      @hot-area-selected="handleHotAreaSelected"
+    />
+    <img
+      v-if="isMp"
+      alt=""
+      style="width: 76px; height: 30px"
+      :src="appNavBarMp"
+    />
+  </div>
+  <template v-for="(cell, cellIndex) in cellList" :key="cellIndex">
+    <template v-if="selectedHotAreaIndex === Number(cellIndex)">
+      <ElFormItem :prop="`cell[${cellIndex}].type`" label="类型">
+        <ElRadioGroup v-model="cell.type">
+          <ElRadio value="text">文字</ElRadio>
+          <ElRadio value="image">图片</ElRadio>
+          <ElRadio value="search">搜索框</ElRadio>
+        </ElRadioGroup>
+      </ElFormItem>
+      <!-- 1. 文字 -->
+      <template v-if="cell.type === 'text'">
+        <ElFormItem :prop="`cell[${cellIndex}].text`" label="内容">
+          <ElInput v-model="cell!.text" maxlength="10" show-word-limit />
+        </ElFormItem>
+        <ElFormItem :prop="`cell[${cellIndex}].text`" label="颜色">
+          <ColorInput v-model="cell!.textColor" />
+        </ElFormItem>
+        <ElFormItem :prop="`cell[${cellIndex}].url`" label="链接">
+          <AppLinkInput v-model="cell.url" />
+        </ElFormItem>
+      </template>
+      <!-- 2. 图片 -->
+      <template v-else-if="cell.type === 'image'">
+        <ElFormItem :prop="`cell[${cellIndex}].imgUrl`" label="图片">
+          <UploadImg
+            v-model="cell.imgUrl"
+            :limit="1"
+            height="56px"
+            width="56px"
+            :show-description="false"
+          >
+            <template #tip>建议尺寸 56*56</template>
+          </UploadImg>
+        </ElFormItem>
+        <ElFormItem :prop="`cell[${cellIndex}].url`" label="链接">
+          <AppLinkInput v-model="cell.url" />
+        </ElFormItem>
+      </template>
+      <!-- 3. 搜索框 -->
+      <template v-else>
+        <ElFormItem :prop="`cell[${cellIndex}].placeholder`" label="提示文字">
+          <ElInput v-model="cell.placeholder" maxlength="10" show-word-limit />
+        </ElFormItem>
+        <ElFormItem :prop="`cell[${cellIndex}].borderRadius`" label="圆角">
+          <ElSlider
+            v-model="cell.borderRadius"
+            :max="100"
+            :min="0"
+            :show-input-controls="false"
+            input-size="small"
+            show-input
+          />
+        </ElFormItem>
+      </template>
+    </template>
+  </template>
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/navigation-bar/config.ts b/apps/web-ele/src/components/diy-editor/components/mobile/navigation-bar/config.ts
new file mode 100644
index 00000000..38325d5a
--- /dev/null
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/navigation-bar/config.ts
@@ -0,0 +1,82 @@
+import type { DiyComponent } from '#/components/diy-editor/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-ele/src/components/diy-editor/components/mobile/navigation-bar/index.vue b/apps/web-ele/src/components/diy-editor/components/mobile/navigation-bar/index.vue
new file mode 100644
index 00000000..4a32acb8
--- /dev/null
+++ b/apps/web-ele/src/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 '#/components/diy-editor/components/mobile/search-bar/config';
+
+import { computed } from 'vue';
+
+import appNavbarMp from '#/assets/imgs/diy/app-nav-bar-mp.png';
+import SearchBar from '#/components/diy-editor/components/mobile/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-ele/src/components/diy-editor/components/mobile/navigation-bar/property.vue b/apps/web-ele/src/components/diy-editor/components/mobile/navigation-bar/property.vue
new file mode 100644
index 00000000..ce3e3f69
--- /dev/null
+++ b/apps/web-ele/src/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-ele/src/components/diy-editor/components/mobile/notice-bar/config.ts b/apps/web-ele/src/components/diy-editor/components/mobile/notice-bar/config.ts
new file mode 100644
index 00000000..31dc1379
--- /dev/null
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/notice-bar/config.ts
@@ -0,0 +1,49 @@
+import type {
+  ComponentStyle,
+  DiyComponent,
+} from '#/components/diy-editor/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-ele/src/components/diy-editor/components/mobile/notice-bar/index.vue b/apps/web-ele/src/components/diy-editor/components/mobile/notice-bar/index.vue
new file mode 100644
index 00000000..589e8937
--- /dev/null
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/notice-bar/index.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import type { NoticeBarProperty } from './config';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { ElCarousel, ElCarouselItem, ElDivider, ElImage } from 'element-plus';
+
+/** 公告栏 */
+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-ele/src/components/diy-editor/components/mobile/notice-bar/property.vue b/apps/web-ele/src/components/diy-editor/components/mobile/notice-bar/property.vue
new file mode 100644
index 00000000..935e5ec4
--- /dev/null
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/notice-bar/property.vue
@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import type { NoticeBarProperty } from './config';
+
+import { useVModel } from '@vueuse/core';
+import { ElCard, ElForm, ElFormItem, ElInput } from 'element-plus';
+
+import AppLinkInput from '#/components/app-link-input/index.vue';
+import ColorInput from '#/components/color-input/index.vue';
+import ComponentContainerProperty from '#/components/diy-editor/components/component-container-property.vue';
+import Draggable from '#/components/draggable/index.vue';
+import UploadImg from '#/components/upload/image-upload.vue';
+
+// 通知栏属性面板
+defineOptions({ name: 'NoticeBarProperty' });
+const props = defineProps<{ modelValue: NoticeBarProperty }>();
+
+const emit = defineEmits(['update:modelValue']);
+
+// 表单校验
+const rules = {
+  content: [{ required: true, message: '请输入公告', trigger: 'blur' }],
+};
+
+const formData = useVModel(props, 'modelValue', emit);
+</script>
+
+<template>
+  <ComponentContainerProperty v-model="formData.style">
+    <ElForm label-width="80px" :model="formData" :rules="rules">
+      <ElFormItem label="公告图标" prop="iconUrl">
+        <UploadImg
+          v-model="formData.iconUrl"
+          height="48px"
+          :show-description="false"
+        >
+          <template #tip>建议尺寸：24 * 24</template>
+        </UploadImg>
+      </ElFormItem>
+      <ElFormItem label="背景颜色" prop="backgroundColor">
+        <ColorInput v-model="formData.backgroundColor" />
+      </ElFormItem>
+      <ElFormItem label="文字颜色" prop="文字颜色">
+        <ColorInput v-model="formData.textColor" />
+      </ElFormItem>
+      <ElCard header="公告内容" class="property-group" shadow="never">
+        <Draggable v-model="formData.contents">
+          <template #default="{ element }">
+            <ElFormItem label="公告" prop="text" label-width="40px">
+              <ElInput v-model="element.text" placeholder="请输入公告" />
+            </ElFormItem>
+            <ElFormItem label="链接" prop="url" 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-ele/src/components/diy-editor/components/mobile/page-config/config.ts b/apps/web-ele/src/components/diy-editor/components/mobile/page-config/config.ts
new file mode 100644
index 00000000..29855bb7
--- /dev/null
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/page-config/config.ts
@@ -0,0 +1,23 @@
+import type { DiyComponent } from '#/components/diy-editor/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-ele/src/components/diy-editor/components/mobile/page-config/property.vue b/apps/web-ele/src/components/diy-editor/components/mobile/page-config/property.vue
new file mode 100644
index 00000000..4dca2797
--- /dev/null
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/page-config/property.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import type { PageConfigProperty } from './config';
+
+import { useVModel } from '@vueuse/core';
+import { ElForm, ElFormItem, ElInput } from 'element-plus';
+
+import ColorInput from '#/components/input-with-color/index.vue';
+import UploadImg from '#/components/upload/image-upload.vue';
+
+// 导航栏属性面板
+defineOptions({ name: 'PageConfigProperty' });
+const props = defineProps<{ modelValue: PageConfigProperty }>();
+
+const emit = defineEmits(['update:modelValue']);
+
+// 表单校验
+const rules = {};
+
+const formData = useVModel(props, 'modelValue', emit);
+</script>
+
+<template>
+  <ElForm label-width="80px" :model="formData" :rules="rules">
+    <ElFormItem label="页面描述" prop="description">
+      <ElInput
+        type="textarea"
+        v-model="formData!.description"
+        placeholder="用户通过微信分享给朋友时，会自动显示页面描述"
+      />
+    </ElFormItem>
+    <ElFormItem label="背景颜色" prop="backgroundColor">
+      <ColorInput v-model="formData!.backgroundColor" />
+    </ElFormItem>
+    <ElFormItem label="背景图片" prop="backgroundImage">
+      <UploadImg
+        v-model="formData!.backgroundImage"
+        :limit="1"
+        :show-description="false"
+      >
+        <template #tip>建议宽度 750px</template>
+      </UploadImg>
+    </ElFormItem>
+  </ElForm>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/product-card/config.ts b/apps/web-ele/src/components/diy-editor/components/mobile/product-card/config.ts
new file mode 100644
index 00000000..ea3c9e4d
--- /dev/null
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/product-card/config.ts
@@ -0,0 +1,100 @@
+import type {
+  ComponentStyle,
+  DiyComponent,
+} from '#/components/diy-editor/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-ele/src/components/diy-editor/components/mobile/product-card/index.vue b/apps/web-ele/src/components/diy-editor/components/mobile/product-card/index.vue
new file mode 100644
index 00000000..b1cf736e
--- /dev/null
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/product-card/index.vue
@@ -0,0 +1,190 @@
+<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 { ElImage } from 'element-plus';
+
+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"
+      >
+        <ElImage
+          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',
+          },
+        ]"
+      >
+        <ElImage 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>
+        <!-- 图片按钮 -->
+        <ElImage
+          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-ele/src/components/diy-editor/components/mobile/product-card/property.vue b/apps/web-ele/src/components/diy-editor/components/mobile/product-card/property.vue
new file mode 100644
index 00000000..e0b3dfb7
--- /dev/null
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/product-card/property.vue
@@ -0,0 +1,177 @@
+<script setup lang="ts">
+import type { ProductCardProperty } from './config';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { useVModel } from '@vueuse/core';
+import {
+  ElCard,
+  ElCheckbox,
+  ElForm,
+  ElFormItem,
+  ElInput,
+  ElRadioButton,
+  ElRadioGroup,
+  ElSlider,
+  ElSwitch,
+  ElTooltip,
+} from 'element-plus';
+
+import ColorInput from '#/components/color-input/index.vue';
+import UploadImg from '#/components/upload/image-upload.vue';
+import SpuShowcase from '#/views/mall/product/spu/components/spu-showcase.vue';
+
+// 商品卡片属性面板
+defineOptions({ name: 'ProductCardProperty' });
+
+const props = defineProps<{ modelValue: ProductCardProperty }>();
+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="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>
+          </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"
+            :show-description="false"
+          >
+            <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-ele/src/components/diy-editor/components/mobile/product-list/config.ts b/apps/web-ele/src/components/diy-editor/components/mobile/product-list/config.ts
new file mode 100644
index 00000000..0f68a515
--- /dev/null
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/product-list/config.ts
@@ -0,0 +1,67 @@
+import type {
+  ComponentStyle,
+  DiyComponent,
+} from '#/components/diy-editor/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-ele/src/components/diy-editor/components/mobile/product-list/index.vue b/apps/web-ele/src/components/diy-editor/components/mobile/product-list/index.vue
new file mode 100644
index 00000000..0e7ec6e1
--- /dev/null
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/product-list/index.vue
@@ -0,0 +1,150 @@
+<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 { ElImage, ElScrollbar } from 'element-plus';
+
+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>
+  <ElScrollbar 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"
+        >
+          <ElImage
+            fit="cover"
+            :src="property.badge.imgUrl"
+            class="h-[26px] w-[38px]"
+          />
+        </div>
+        <!-- 商品封面图 -->
+        <ElImage
+          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>
+  </ElScrollbar>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/product-list/property.vue b/apps/web-ele/src/components/diy-editor/components/mobile/product-list/property.vue
new file mode 100644
index 00000000..f4e6d968
--- /dev/null
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/product-list/property.vue
@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import type { ProductListProperty } from './config';
+
+import { useVModel } from '@vueuse/core';
+import {
+  ElCard,
+  ElForm,
+  ElFormItem,
+  ElRadioButton,
+  ElRadioGroup,
+  ElSlider,
+  ElSwitch,
+  ElTooltip,
+} from 'element-plus';
+
+import ComponentContainerProperty from '#/components/diy-editor/components/component-container-property.vue';
+import ColorInput from '#/components/input-with-color/index.vue';
+import UploadImg from '#/components/upload/image-upload.vue';
+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-ele/src/components/diy-editor/components/mobile/promotion-article/config.ts b/apps/web-ele/src/components/diy-editor/components/mobile/promotion-article/config.ts
new file mode 100644
index 00000000..9ad0304b
--- /dev/null
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/promotion-article/config.ts
@@ -0,0 +1,28 @@
+import type {
+  ComponentStyle,
+  DiyComponent,
+} from '#/components/diy-editor/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-ele/src/components/diy-editor/components/mobile/promotion-article/index.vue b/apps/web-ele/src/components/diy-editor/components/mobile/promotion-article/index.vue
new file mode 100644
index 00000000..10e9f5aa
--- /dev/null
+++ b/apps/web-ele/src/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-ele/src/components/diy-editor/components/mobile/promotion-article/property.vue b/apps/web-ele/src/components/diy-editor/components/mobile/promotion-article/property.vue
new file mode 100644
index 00000000..82d3f35b
--- /dev/null
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/promotion-article/property.vue
@@ -0,0 +1,68 @@
+<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 { ElForm, ElFormItem, ElOption, ElSelect } from 'element-plus';
+
+import * as ArticleApi from '#/api/mall/promotion/article/index';
+import ComponentContainerProperty from '#/components/diy-editor/components/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-ele/src/components/diy-editor/components/mobile/promotion-combination/config.ts b/apps/web-ele/src/components/diy-editor/components/mobile/promotion-combination/config.ts
new file mode 100644
index 00000000..fba3a4a8
--- /dev/null
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/promotion-combination/config.ts
@@ -0,0 +1,99 @@
+import type {
+  ComponentStyle,
+  DiyComponent,
+} from '#/components/diy-editor/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-ele/src/components/diy-editor/components/mobile/promotion-combination/index.vue b/apps/web-ele/src/components/diy-editor/components/mobile/promotion-combination/index.vue
new file mode 100644
index 00000000..82f1f5bd
--- /dev/null
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/promotion-combination/index.vue
@@ -0,0 +1,233 @@
+<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 { ElImage } from 'element-plus';
+
+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"
+      >
+        <ElImage
+          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',
+          },
+        ]"
+      >
+        <ElImage 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>
+        <!-- 图片按钮 -->
+        <ElImage
+          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-ele/src/components/diy-editor/components/mobile/promotion-combination/property.vue b/apps/web-ele/src/components/diy-editor/components/mobile/promotion-combination/property.vue
new file mode 100644
index 00000000..da57011d
--- /dev/null
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/promotion-combination/property.vue
@@ -0,0 +1,190 @@
+<script setup lang="ts">
+import type { PromotionCombinationProperty } from './config';
+
+import type { MallCombinationActivityApi } from '#/api/mall/promotion/combination/combinationActivity';
+
+import { onMounted, ref } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { useVModel } from '@vueuse/core';
+import {
+  ElForm,
+  ElFormItem,
+  ElRadioButton,
+  ElRadioGroup,
+  ElSlider,
+  ElSwitch,
+  ElTooltip,
+} from 'element-plus';
+
+import * as CombinationActivityApi from '#/api/mall/promotion/combination/combinationActivity';
+import ColorInput from '#/components/color-input/index.vue';
+import UploadImg from '#/components/upload/image-upload.vue';
+import { CommonStatusEnum } from '#/utils';
+import CombinationShowcase from '#/views/mall/promotion/combination/components/combination-showcase.vue';
+
+// 拼团属性面板
+defineOptions({ name: 'PromotionCombinationProperty' });
+
+const props = defineProps<{ modelValue: PromotionCombinationProperty }>();
+const emit = defineEmits(['update:modelValue']);
+const formData = useVModel(props, 'modelValue', emit);
+// 活动列表
+const activityList = ref<MallCombinationActivityApi.CombinationActivity[]>([]);
+onMounted(async () => {
+  const { list } = await CombinationActivityApi.getCombinationActivityPage({
+    pageNo: 1,
+    pageSize: 10,
+    status: CommonStatusEnum.ENABLE,
+  });
+  activityList.value = list;
+});
+</script>
+
+<template>
+  <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">
+                <Icon 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-ele/src/components/diy-editor/components/mobile/promotion-point/config.ts b/apps/web-ele/src/components/diy-editor/components/mobile/promotion-point/config.ts
new file mode 100644
index 00000000..4484f312
--- /dev/null
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/promotion-point/config.ts
@@ -0,0 +1,99 @@
+import type {
+  ComponentStyle,
+  DiyComponent,
+} from '#/components/diy-editor/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-ele/src/components/diy-editor/components/mobile/promotion-point/index.vue b/apps/web-ele/src/components/diy-editor/components/mobile/promotion-point/index.vue
new file mode 100644
index 00000000..3ff8336d
--- /dev/null
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/promotion-point/index.vue
@@ -0,0 +1,234 @@
+<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 { ElImage } from 'element-plus';
+
+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"
+      >
+        <ElImage
+          :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',
+          },
+        ]"
+      >
+        <ElImage :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>
+        <!-- 图片按钮 -->
+        <ElImage
+          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-ele/src/components/diy-editor/components/mobile/promotion-point/property.vue b/apps/web-ele/src/components/diy-editor/components/mobile/promotion-point/property.vue
new file mode 100644
index 00000000..c028feac
--- /dev/null
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/promotion-point/property.vue
@@ -0,0 +1,180 @@
+<script lang="ts" setup>
+import type { PromotionPointProperty } from './config';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { useVModel } from '@vueuse/core';
+import {
+  ElCard,
+  ElForm,
+  ElFormItem,
+  ElInput,
+  ElRadioButton,
+  ElRadioGroup,
+  ElSlider,
+  ElSwitch,
+  ElTooltip,
+} from 'element-plus';
+
+import ColorInput from '#/components/color-input/index.vue';
+import PointShowcase from '#/views/mall/promotion/point/components/point-showcase.vue';
+
+// 秒杀属性面板
+defineOptions({ name: 'PromotionPointProperty' });
+
+const props = defineProps<{ modelValue: PromotionPointProperty }>();
+const emit = defineEmits(['update:modelValue']);
+const formData = useVModel(props, 'modelValue', emit);
+</script>
+
+<template>
+  <ComponentContainerProperty v-model="formData.style">
+    <ElForm :model="formData" label-width="80px">
+      <ElCard class="property-group" header="积分商城活动" shadow="never">
+        <PointShowcase v-model="formData.activityIds" />
+      </ElCard>
+      <ElCard class="property-group" header="商品样式" 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">
+                <Icon icon="fluent:text-column-three-24-filled" />
+              </el-radio-button>
+            </el-tooltip>-->
+          </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 class="property-group" header="角标" shadow="never">
+        <ElFormItem label="角标" prop="badge.show">
+          <ElSwitch v-model="formData.badge.show" />
+        </ElFormItem>
+        <ElFormItem v-if="formData.badge.show" label="角标" prop="badge.imgUrl">
+          <UploadImg
+            v-model="formData.badge.imgUrl"
+            height="44px"
+            width="72px"
+            :show-description="false"
+          >
+            <template #tip> 建议尺寸：36 * 22</template>
+          </UploadImg>
+        </ElFormItem>
+      </ElCard>
+      <ElCard class="property-group" header="按钮" 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 class="property-group" header="商品样式" shadow="never">
+        <ElFormItem label="上圆角" prop="borderRadiusTop">
+          <ElSlider
+            v-model="formData.borderRadiusTop"
+            :max="100"
+            :min="0"
+            :show-input-controls="false"
+            input-size="small"
+            show-input
+          />
+        </ElFormItem>
+        <ElFormItem label="下圆角" prop="borderRadiusBottom">
+          <ElSlider
+            v-model="formData.borderRadiusBottom"
+            :max="100"
+            :min="0"
+            :show-input-controls="false"
+            input-size="small"
+            show-input
+          />
+        </ElFormItem>
+        <ElFormItem label="间隔" prop="space">
+          <ElSlider
+            v-model="formData.space"
+            :max="100"
+            :min="0"
+            :show-input-controls="false"
+            input-size="small"
+            show-input
+          />
+        </ElFormItem>
+      </ElCard>
+    </ElForm>
+  </ComponentContainerProperty>
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/promotion-seckill/config.ts b/apps/web-ele/src/components/diy-editor/components/mobile/promotion-seckill/config.ts
new file mode 100644
index 00000000..fcba6c7e
--- /dev/null
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/promotion-seckill/config.ts
@@ -0,0 +1,99 @@
+import type {
+  ComponentStyle,
+  DiyComponent,
+} from '#/components/diy-editor/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-ele/src/components/diy-editor/components/mobile/promotion-seckill/index.vue b/apps/web-ele/src/components/diy-editor/components/mobile/promotion-seckill/index.vue
new file mode 100644
index 00000000..b497437b
--- /dev/null
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/promotion-seckill/index.vue
@@ -0,0 +1,229 @@
+<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 { ElImage } from 'element-plus';
+
+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"
+      >
+        <ElImage
+          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',
+          },
+        ]"
+      >
+        <ElImage 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>
+        <!-- 图片按钮 -->
+        <ElImage
+          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-ele/src/components/diy-editor/components/mobile/promotion-seckill/property.vue b/apps/web-ele/src/components/diy-editor/components/mobile/promotion-seckill/property.vue
new file mode 100644
index 00000000..3dd246f0
--- /dev/null
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/promotion-seckill/property.vue
@@ -0,0 +1,197 @@
+<script setup lang="ts">
+import type { PromotionSeckillProperty } from './config';
+
+import type { MallSeckillActivityApi } from '#/api/mall/promotion/seckill/seckillActivity';
+
+import { onMounted, ref } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { useVModel } from '@vueuse/core';
+import {
+  ElCard,
+  ElCheckbox,
+  ElForm,
+  ElFormItem,
+  ElInput,
+  ElRadioButton,
+  ElRadioGroup,
+  ElSlider,
+  ElSwitch,
+} from 'element-plus';
+
+import * as SeckillActivityApi from '#/api/mall/promotion/seckill/seckillActivity';
+import ColorInput from '#/components/color-input/index.vue';
+import UploadImg from '#/components/upload/image-upload.vue';
+import { CommonStatusEnum } from '#/utils/constants';
+import SeckillShowcase from '#/views/mall/promotion/seckill/components/seckill-showcase.vue';
+
+// 秒杀属性面板
+defineOptions({ name: 'PromotionSeckillProperty' });
+
+const props = defineProps<{ modelValue: PromotionSeckillProperty }>();
+const emit = defineEmits(['update:modelValue']);
+const formData = useVModel(props, 'modelValue', emit);
+// 活动列表
+const activityList = ref<MallSeckillActivityApi.SeckillActivity[]>([]);
+onMounted(async () => {
+  const { list } = await SeckillActivityApi.getSeckillActivityPage({
+    pageNo: 1,
+    pageSize: 10,
+    status: CommonStatusEnum.ENABLE,
+  });
+  activityList.value = list;
+});
+</script>
+
+<template>
+  <ComponentContainerProperty v-model="formData.style">
+    <ElForm label-width="80px" :model="formData">
+      <ElCard header="秒杀活动" class="property-group" shadow="never">
+        <SeckillShowcase 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">
+                <Icon icon="fluent:text-column-three-24-filled" />
+              </el-radio-button>
+            </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 v-if="formData.badge.show" label="角标" prop="badge.imgUrl">
+          <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="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-ele/src/components/diy-editor/components/mobile/search-bar/config.ts b/apps/web-ele/src/components/diy-editor/components/mobile/search-bar/config.ts
new file mode 100644
index 00000000..64ab098a
--- /dev/null
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/search-bar/config.ts
@@ -0,0 +1,46 @@
+import type {
+  ComponentStyle,
+  DiyComponent,
+} from '#/components/diy-editor/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-ele/src/components/diy-editor/components/mobile/search-bar/index.vue b/apps/web-ele/src/components/diy-editor/components/mobile/search-bar/index.vue
new file mode 100644
index 00000000..e7c77030
--- /dev/null
+++ b/apps/web-ele/src/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-ele/src/components/diy-editor/components/mobile/search-bar/property.vue b/apps/web-ele/src/components/diy-editor/components/mobile/search-bar/property.vue
new file mode 100644
index 00000000..149f52fc
--- /dev/null
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/search-bar/property.vue
@@ -0,0 +1,120 @@
+<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';
+import {
+  ElCard,
+  ElForm,
+  ElFormItem,
+  ElRadioButton,
+  ElRadioGroup,
+  ElSlider,
+  ElSwitch,
+  ElTooltip,
+} from 'element-plus';
+
+import ComponentContainerProperty from '#/components/diy-editor/components/component-container-property.vue';
+import Draggable from '#/components/draggable/index.vue';
+
+/** 搜索框属性面板 */
+defineOptions({ name: 'SearchProperty' });
+
+const props = defineProps<{ modelValue: SearchProperty }>();
+const emit = defineEmits(['update:modelValue']);
+const formData = useVModel(props, 'modelValue', emit);
+
+// 监听热词数组变化
+watch(
+  () => formData.value.hotKeywords,
+  (newVal) => {
+    // 找到非字符串项的索引
+    const nonStringIndex = newVal.findIndex((item) => !isString(item));
+    if (nonStringIndex !== -1) {
+      formData.value.hotKeywords[nonStringIndex] = '';
+    }
+  },
+  { deep: true, flush: 'post' },
+);
+</script>
+
+<template>
+  <ComponentContainerProperty v-model="formData.style">
+    <!-- 表单 -->
+    <ElForm label-width="80px" :model="formData" class="mt-2">
+      <ElCard header="搜索热词" class="property-group" shadow="never">
+        <Draggable
+          v-model="formData.hotKeywords"
+          :empty-item="{
+            type: 'input',
+            placeholder: '请输入热词',
+          }"
+        >
+          <template #default="{ index }">
+            <el-input
+              v-model="formData.hotKeywords[index]"
+              placeholder="请输入热词"
+            />
+          </template>
+        </Draggable>
+      </ElCard>
+      <ElCard header="搜索样式" class="property-group" shadow="never">
+        <ElFormItem label="框体样式">
+          <ElRadioGroup v-model="formData!.borderRadius">
+            <ElTooltip content="方形" placement="top">
+              <ElRadioButton :value="0">
+                <IconifyIcon icon="tabler:input-search" />
+              </ElRadioButton>
+            </ElTooltip>
+            <ElTooltip content="圆形" placement="top">
+              <ElRadioButton :value="10">
+                <IconifyIcon icon="iconoir:input-search" />
+              </ElRadioButton>
+            </ElTooltip>
+          </ElRadioGroup>
+        </ElFormItem>
+        <ElFormItem label="提示文字" prop="placeholder">
+          <el-input v-model="formData.placeholder" />
+        </ElFormItem>
+        <ElFormItem label="文本位置" prop="placeholderPosition">
+          <ElRadioGroup v-model="formData!.placeholderPosition">
+            <ElTooltip content="居左" placement="top">
+              <ElRadioButton value="left">
+                <IconifyIcon icon="ant-design:align-left-outlined" />
+              </ElRadioButton>
+            </ElTooltip>
+            <ElTooltip content="居中" placement="top">
+              <ElRadioButton value="center">
+                <IconifyIcon icon="ant-design:align-center-outlined" />
+              </ElRadioButton>
+            </ElTooltip>
+          </ElRadioGroup>
+        </ElFormItem>
+        <ElFormItem label="扫一扫" prop="showScan">
+          <ElSwitch v-model="formData!.showScan" />
+        </ElFormItem>
+        <ElFormItem label="框体高度" prop="height">
+          <ElSlider
+            v-model="formData!.height"
+            :max="50"
+            :min="28"
+            show-input
+            input-size="small"
+          />
+        </ElFormItem>
+        <ElFormItem label="框体颜色" prop="backgroundColor">
+          <ColorInput v-model="formData.backgroundColor" />
+        </ElFormItem>
+        <ElFormItem class="lef" label="文本颜色" prop="textColor">
+          <ColorInput v-model="formData.textColor" />
+        </ElFormItem>
+      </ElCard>
+    </ElForm>
+  </ComponentContainerProperty>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/tab-bar/config.ts b/apps/web-ele/src/components/diy-editor/components/mobile/tab-bar/config.ts
new file mode 100644
index 00000000..bc9488e1
--- /dev/null
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/tab-bar/config.ts
@@ -0,0 +1,172 @@
+import type { DiyComponent } from '#/components/diy-editor/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-ele/src/components/diy-editor/components/mobile/tab-bar/index.vue b/apps/web-ele/src/components/diy-editor/components/mobile/tab-bar/index.vue
new file mode 100644
index 00000000..9c1ddd83
--- /dev/null
+++ b/apps/web-ele/src/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';
+
+import { ElImage } from 'element-plus';
+
+/** 页面底部导航栏 */
+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"
+      >
+        <ElImage :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>
+        </ElImage>
+        <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-ele/src/components/diy-editor/components/mobile/tab-bar/property.vue b/apps/web-ele/src/components/diy-editor/components/mobile/tab-bar/property.vue
new file mode 100644
index 00000000..fab41b64
--- /dev/null
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/tab-bar/property.vue
@@ -0,0 +1,131 @@
+<script setup lang="ts">
+import type { TabBarProperty } from './config';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { useVModel } from '@vueuse/core';
+import {
+  ElForm,
+  ElFormItem,
+  ElInput,
+  ElOption,
+  ElRadioButton,
+  ElRadioGroup,
+  ElSelect,
+  ElText,
+} from 'element-plus';
+
+import AppLinkInput from '#/components/app-link-input/index.vue';
+import ColorInput from '#/components/color-input/index.vue';
+import Draggable from '#/components/draggable/index.vue';
+import UploadImg from '#/components/upload/image-upload.vue';
+
+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">
+    <!-- 表单 -->
+    <ElForm :model="formData" label-width="80px">
+      <ElFormItem label="主题" prop="theme">
+        <ElSelect v-model="formData!.theme" @change="handleThemeChange">
+          <ElOption
+            v-for="(theme, index) in THEME_LIST"
+            :key="index"
+            :label="theme.name"
+            :value="theme.id"
+          >
+            <template #default>
+              <div class="flex items-center justify-between">
+                <IconifyIcon :icon="theme.icon" :color="theme.color" />
+                <span>{{ theme.name }}</span>
+              </div>
+            </template>
+          </ElOption>
+        </ElSelect>
+      </ElFormItem>
+      <ElFormItem label="默认颜色">
+        <ColorInput v-model="formData!.style.color" />
+      </ElFormItem>
+      <ElFormItem label="选中颜色">
+        <ColorInput v-model="formData!.style.activeColor" />
+      </ElFormItem>
+      <ElFormItem label="导航背景">
+        <ElRadioGroup v-model="formData!.style.bgType">
+          <ElRadioButton value="color">纯色</ElRadioButton>
+          <ElRadioButton value="img">图片</ElRadioButton>
+        </ElRadioGroup>
+      </ElFormItem>
+      <ElFormItem label="选择颜色" v-if="formData!.style.bgType === 'color'">
+        <ColorInput v-model="formData!.style.bgColor" />
+      </ElFormItem>
+      <ElFormItem 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>
+      </ElFormItem>
+
+      <ElText tag="p">图标设置</ElText>
+      <ElText type="info" size="small">
+        拖动左上角的小圆点可对其排序, 图标建议尺寸 44*44
+      </ElText>
+      <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"
+              />
+              <ElText size="small">未选中</ElText>
+            </div>
+            <div>
+              <UploadImg
+                v-model="element.activeIconUrl"
+                width="40px"
+                height="40px"
+                :show-delete="false"
+                :show-description="false"
+              />
+              <ElText>已选中</ElText>
+            </div>
+          </div>
+          <ElFormItem prop="text" label="文字" label-width="48px" class="mb-2">
+            <ElInput v-model="element.text" placeholder="请输入文字" />
+          </ElFormItem>
+          <ElFormItem prop="url" label="链接" label-width="48px" class="mb-0">
+            <AppLinkInput v-model="element.url" />
+          </ElFormItem>
+        </template>
+      </Draggable>
+    </ElForm>
+  </div>
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/title-bar/config.ts b/apps/web-ele/src/components/diy-editor/components/mobile/title-bar/config.ts
new file mode 100644
index 00000000..64d49ad6
--- /dev/null
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/title-bar/config.ts
@@ -0,0 +1,76 @@
+import type {
+  ComponentStyle,
+  DiyComponent,
+} from '#/components/diy-editor/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-ele/src/components/diy-editor/components/mobile/title-bar/index.vue b/apps/web-ele/src/components/diy-editor/components/mobile/title-bar/index.vue
new file mode 100644
index 00000000..8ee389d8
--- /dev/null
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/title-bar/index.vue
@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import type { TitleBarProperty } from './config';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { ElImage } from 'element-plus';
+
+/** 标题栏 */
+defineOptions({ name: 'TitleBar' });
+
+defineProps<{ property: TitleBarProperty }>();
+</script>
+<template>
+  <div class="title-bar" :style="{ height: `${property.height}px` }">
+    <ElImage
+      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-ele/src/components/diy-editor/components/mobile/title-bar/property.vue b/apps/web-ele/src/components/diy-editor/components/mobile/title-bar/property.vue
new file mode 100644
index 00000000..45a4147c
--- /dev/null
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/title-bar/property.vue
@@ -0,0 +1,168 @@
+<script setup lang="ts">
+import type { TitleBarProperty } from './config';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { useVModel } from '@vueuse/core';
+import {
+  ElCard,
+  ElCheckbox,
+  ElForm,
+  ElFormItem,
+  ElInput,
+  ElRadioButton,
+  ElRadioGroup,
+  ElSlider,
+  ElTooltip,
+} from 'element-plus';
+
+import AppLinkInput from '#/components/app-link-input/index.vue';
+import ComponentContainerProperty from '#/components/diy-editor/components/component-container-property.vue';
+import InputWithColor from '#/components/input-with-color/index.vue';
+import UploadImg from '#/components/upload/image-upload.vue';
+
+// 导航栏属性面板
+defineOptions({ name: 'TitleBarProperty' });
+
+const props = defineProps<{ modelValue: TitleBarProperty }>();
+const emit = defineEmits(['update:modelValue']);
+const formData = useVModel(props, 'modelValue', emit);
+
+// 表单校验
+const rules = {};
+</script>
+<template>
+  <ComponentContainerProperty v-model="formData.style">
+    <ElForm label-width="85px" :model="formData" :rules="rules">
+      <ElCard header="风格" class="property-group" shadow="never">
+        <ElFormItem label="背景图片" prop="bgImgUrl">
+          <UploadImg
+            v-model="formData.bgImgUrl"
+            width="100%"
+            height="40px"
+            :show-description="false"
+          >
+            <template #tip>建议尺寸 750*80</template>
+          </UploadImg>
+        </ElFormItem>
+        <ElFormItem label="标题位置" prop="textAlign">
+          <ElRadioGroup v-model="formData!.textAlign">
+            <ElTooltip content="居左" placement="top">
+              <ElRadioButton value="left">
+                <IconifyIcon icon="ant-design:align-left-outlined" />
+              </ElRadioButton>
+            </ElTooltip>
+            <ElTooltip content="居中" placement="top">
+              <ElRadioButton value="center">
+                <IconifyIcon icon="ant-design:align-center-outlined" />
+              </ElRadioButton>
+            </ElTooltip>
+          </ElRadioGroup>
+        </ElFormItem>
+        <ElFormItem label="偏移量" prop="marginLeft" label-width="70px">
+          <ElSlider
+            v-model="formData.marginLeft"
+            :max="100"
+            :min="0"
+            show-input
+            input-size="small"
+          />
+        </ElFormItem>
+        <ElFormItem label="高度" prop="height" label-width="70px">
+          <ElSlider
+            v-model="formData.height"
+            :max="200"
+            :min="20"
+            show-input
+            input-size="small"
+          />
+        </ElFormItem>
+      </ElCard>
+      <ElCard header="主标题" class="property-group" shadow="never">
+        <ElFormItem label="文字" prop="title" label-width="40px">
+          <InputWithColor
+            v-model="formData.title"
+            v-model:color="formData.titleColor"
+            show-word-limit
+            maxlength="20"
+          />
+        </ElFormItem>
+        <ElFormItem label="大小" prop="titleSize" label-width="40px">
+          <ElSlider
+            v-model="formData.titleSize"
+            :max="60"
+            :min="10"
+            show-input
+            input-size="small"
+          />
+        </ElFormItem>
+        <ElFormItem label="粗细" prop="titleWeight" label-width="40px">
+          <ElSlider
+            v-model="formData.titleWeight"
+            :min="100"
+            :max="900"
+            :step="100"
+            show-input
+            input-size="small"
+          />
+        </ElFormItem>
+      </ElCard>
+      <ElCard header="副标题" class="property-group" shadow="never">
+        <ElFormItem label="文字" prop="description" label-width="40px">
+          <InputWithColor
+            v-model="formData.description"
+            v-model:color="formData.descriptionColor"
+            show-word-limit
+            maxlength="50"
+          />
+        </ElFormItem>
+        <ElFormItem label="大小" prop="descriptionSize" label-width="40px">
+          <ElSlider
+            v-model="formData.descriptionSize"
+            :max="60"
+            :min="10"
+            show-input
+            input-size="small"
+          />
+        </ElFormItem>
+        <ElFormItem label="粗细" prop="descriptionWeight" label-width="40px">
+          <ElSlider
+            v-model="formData.descriptionWeight"
+            :min="100"
+            :max="900"
+            :step="100"
+            show-input
+            input-size="small"
+          />
+        </ElFormItem>
+      </ElCard>
+      <ElCard header="查看更多" class="property-group" shadow="never">
+        <ElFormItem label="是否显示" prop="more.show">
+          <ElCheckbox v-model="formData.more.show" />
+        </ElFormItem>
+        <!-- 更多按钮的 样式选择 -->
+        <template v-if="formData.more.show">
+          <ElFormItem label="样式" prop="more.type">
+            <ElRadioGroup v-model="formData.more.type">
+              <ElRadio value="text">文字</ElRadio>
+              <ElRadio value="icon">图标</ElRadio>
+              <ElRadio value="all">文字+图标</ElRadio>
+            </ElRadioGroup>
+          </ElFormItem>
+          <ElFormItem
+            label="更多文字"
+            prop="more.text"
+            v-show="formData.more.type !== 'icon'"
+          >
+            <ElInput v-model="formData.more.text" />
+          </ElFormItem>
+          <ElFormItem label="跳转链接" prop="more.url">
+            <AppLinkInput v-model="formData.more.url" />
+          </ElFormItem>
+        </template>
+      </ElCard>
+    </ElForm>
+  </ComponentContainerProperty>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/user-card/config.ts b/apps/web-ele/src/components/diy-editor/components/mobile/user-card/config.ts
new file mode 100644
index 00000000..e674a0a3
--- /dev/null
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/user-card/config.ts
@@ -0,0 +1,24 @@
+import type {
+  ComponentStyle,
+  DiyComponent,
+} from '#/components/diy-editor/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-ele/src/components/diy-editor/components/mobile/user-card/index.vue b/apps/web-ele/src/components/diy-editor/components/mobile/user-card/index.vue
new file mode 100644
index 00000000..9cb312f3
--- /dev/null
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/user-card/index.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { UserCardProperty } from './config';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { ElAvatar } from 'element-plus';
+
+/** 用户卡片 */
+defineOptions({ name: 'UserCard' });
+// 定义属性
+defineProps<{ property: UserCardProperty }>();
+</script>
+<template>
+  <div class="flex flex-col">
+    <div class="flex items-center justify-between px-[18px] py-[24px]">
+      <div class="flex flex-1 items-center gap-[16px]">
+        <ElAvatar :size="60">
+          <IconifyIcon icon="ep:avatar" :size="60" />
+        </ElAvatar>
+        <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-ele/src/components/diy-editor/components/mobile/user-card/property.vue b/apps/web-ele/src/components/diy-editor/components/mobile/user-card/property.vue
new file mode 100644
index 00000000..38f5d2b5
--- /dev/null
+++ b/apps/web-ele/src/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 '#/components/diy-editor/components/component-container-property.vue';
+
+// 用户卡片属性面板
+defineOptions({ name: 'UserCardProperty' });
+
+const props = defineProps<{ modelValue: UserCardProperty }>();
+const emit = defineEmits(['update:modelValue']);
+const formData = useVModel(props, 'modelValue', emit);
+</script>
+
+<template>
+  <ComponentContainerProperty v-model="formData.style" />
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/user-coupon/config.ts b/apps/web-ele/src/components/diy-editor/components/mobile/user-coupon/config.ts
new file mode 100644
index 00000000..efcb7f2e
--- /dev/null
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/user-coupon/config.ts
@@ -0,0 +1,26 @@
+import type {
+  ComponentStyle,
+  DiyComponent,
+} from '#/components/diy-editor/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-ele/src/components/diy-editor/components/mobile/user-coupon/index.vue b/apps/web-ele/src/components/diy-editor/components/mobile/user-coupon/index.vue
new file mode 100644
index 00000000..2df2df32
--- /dev/null
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/user-coupon/index.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { UserCouponProperty } from './config';
+
+import { ElImage } from 'element-plus';
+
+/** 用户卡券 */
+defineOptions({ name: 'UserCoupon' });
+// 定义属性
+defineProps<{ property: UserCouponProperty }>();
+</script>
+<template>
+  <ElImage
+    src="https://shopro.sheepjs.com/admin/static/images/shop/decorate/couponCardStyle.png"
+  />
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/user-coupon/property.vue b/apps/web-ele/src/components/diy-editor/components/mobile/user-coupon/property.vue
new file mode 100644
index 00000000..c9fb1fbf
--- /dev/null
+++ b/apps/web-ele/src/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 '#/components/diy-editor/components/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-ele/src/components/diy-editor/components/mobile/user-order/config.ts b/apps/web-ele/src/components/diy-editor/components/mobile/user-order/config.ts
new file mode 100644
index 00000000..0c2e825a
--- /dev/null
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/user-order/config.ts
@@ -0,0 +1,26 @@
+import type {
+  ComponentStyle,
+  DiyComponent,
+} from '#/components/diy-editor/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-ele/src/components/diy-editor/components/mobile/user-order/index.vue b/apps/web-ele/src/components/diy-editor/components/mobile/user-order/index.vue
new file mode 100644
index 00000000..ab527ace
--- /dev/null
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/user-order/index.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { UserOrderProperty } from './config';
+
+import { ElImage } from 'element-plus';
+
+/** 用户订单 */
+defineOptions({ name: 'UserOrder' });
+// 定义属性
+defineProps<{ property: UserOrderProperty }>();
+</script>
+<template>
+  <ElImage
+    src="https://shopro.sheepjs.com/admin/static/images/shop/decorate/orderCardStyle.png"
+  />
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/user-order/property.vue b/apps/web-ele/src/components/diy-editor/components/mobile/user-order/property.vue
new file mode 100644
index 00000000..d403c325
--- /dev/null
+++ b/apps/web-ele/src/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 '#/components/diy-editor/components/component-container-property.vue';
+
+// 用户订单属性面板
+defineOptions({ name: 'UserOrderProperty' });
+
+const props = defineProps<{ modelValue: UserOrderProperty }>();
+const emit = defineEmits(['update:modelValue']);
+const formData = useVModel(props, 'modelValue', emit);
+</script>
+
+<template>
+  <ComponentContainerProperty v-model="formData.style" />
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/user-wallet/config.ts b/apps/web-ele/src/components/diy-editor/components/mobile/user-wallet/config.ts
new file mode 100644
index 00000000..8393760b
--- /dev/null
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/user-wallet/config.ts
@@ -0,0 +1,26 @@
+import type {
+  ComponentStyle,
+  DiyComponent,
+} from '#/components/diy-editor/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-ele/src/components/diy-editor/components/mobile/user-wallet/index.vue b/apps/web-ele/src/components/diy-editor/components/mobile/user-wallet/index.vue
new file mode 100644
index 00000000..7581e54c
--- /dev/null
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/user-wallet/index.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { UserWalletProperty } from './config';
+
+import { ElImage } from 'element-plus';
+
+/** 用户资产 */
+defineOptions({ name: 'UserWallet' });
+// 定义属性
+defineProps<{ property: UserWalletProperty }>();
+</script>
+<template>
+  <ElImage
+    src="https://shopro.sheepjs.com/admin/static/images/shop/decorate/walletCardStyle.png"
+  />
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/user-wallet/property.vue b/apps/web-ele/src/components/diy-editor/components/mobile/user-wallet/property.vue
new file mode 100644
index 00000000..851e7f2f
--- /dev/null
+++ b/apps/web-ele/src/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 '#/components/diy-editor/components/component-container-property.vue';
+
+// 用户资产属性面板
+defineOptions({ name: 'UserWalletProperty' });
+
+const props = defineProps<{ modelValue: UserWalletProperty }>();
+const emit = defineEmits(['update:modelValue']);
+const formData = useVModel(props, 'modelValue', emit);
+</script>
+
+<template>
+  <ComponentContainerProperty v-model="formData.style" />
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/apps/web-ele/src/components/diy-editor/components/mobile/video-player/config.ts b/apps/web-ele/src/components/diy-editor/components/mobile/video-player/config.ts
new file mode 100644
index 00000000..dc2dd886
--- /dev/null
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/video-player/config.ts
@@ -0,0 +1,40 @@
+import type {
+  ComponentStyle,
+  DiyComponent,
+} from '#/components/diy-editor/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-ele/src/components/diy-editor/components/mobile/video-player/index.vue b/apps/web-ele/src/components/diy-editor/components/mobile/video-player/index.vue
new file mode 100644
index 00000000..ddd448d9
--- /dev/null
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/video-player/index.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { VideoPlayerProperty } from './config';
+
+import { ElImage } from 'element-plus';
+
+/** 视频播放 */
+defineOptions({ name: 'VideoPlayer' });
+
+defineProps<{ property: VideoPlayerProperty }>();
+</script>
+<template>
+  <div class="w-full" :style="{ height: `${property.style.height}px` }">
+    <ElImage
+      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-ele/src/components/diy-editor/components/mobile/video-player/property.vue b/apps/web-ele/src/components/diy-editor/components/mobile/video-player/property.vue
new file mode 100644
index 00000000..d07835f2
--- /dev/null
+++ b/apps/web-ele/src/components/diy-editor/components/mobile/video-player/property.vue
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import type { VideoPlayerProperty } from './config';
+
+import { useVModel } from '@vueuse/core';
+import { ElForm, ElFormItem, ElSlider, ElSwitch } from 'element-plus';
+
+import ComponentContainerProperty from '#/components/diy-editor/components/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>
+      <ElFormItem label="高度" prop="height">
+        <ElSlider
+          v-model="formData.style.height"
+          :max="500"
+          :min="100"
+          show-input
+          input-size="small"
+          :show-input-controls="false"
+        />
+      </ElFormItem>
+    </template>
+    <ElForm label-width="80px" :model="formData">
+      <ElFormItem label="上传视频" prop="videoUrl">
+        <UploadFile
+          v-model="formData.videoUrl"
+          :file-type="['mp4']"
+          :limit="1"
+          :file-size="100"
+          class="min-w-[80px]"
+        />
+      </ElFormItem>
+      <ElFormItem label="上传封面" prop="posterUrl">
+        <UploadImg
+          v-model="formData.posterUrl"
+          draggable="false"
+          height="80px"
+          width="100%"
+          class="min-w-[80px]"
+          :show-description="false"
+        >
+          <template #tip> 建议宽度750 </template>
+        </UploadImg>
+      </ElFormItem>
+      <ElFormItem label="自动播放" prop="autoplay">
+        <ElSwitch v-model="formData.autoplay" />
+      </ElFormItem>
+    </ElForm>
+  </ComponentContainerProperty>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/apps/web-ele/src/components/diy-editor/index.vue b/apps/web-ele/src/components/diy-editor/index.vue
new file mode 100644
index 00000000..7f7ce0e3
--- /dev/null
+++ b/apps/web-ele/src/components/diy-editor/index.vue
@@ -0,0 +1,659 @@
+<script lang="ts" setup>
+import type { DiyComponent, DiyComponentLibrary, PageConfig } from './util';
+
+import { inject, onMounted, ref, unref, watch } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+import { cloneDeep, isEmpty, isString } from '@vben/utils';
+
+import {
+  ElAside,
+  ElButtonGroup,
+  ElCard,
+  ElContainer,
+  ElDialog,
+  ElHeader,
+  ElScrollbar,
+  ElTag,
+  ElText,
+  ElTooltip,
+} from 'element-plus';
+import draggable from 'vuedraggable';
+
+import statusBarImg from '#/assets/imgs/diy/statusBar.png';
+import {
+  componentConfigs,
+  components,
+} from '#/components/diy-editor/components/mobile';
+import { component as PAGE_CONFIG_COMPONENT } from '#/components/diy-editor/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 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');
+// 重置
+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>
+    <ElContainer class="editor">
+      <!-- 顶部：工具栏 -->
+      <ElHeader class="editor-header">
+        <!-- 左侧操作区 -->
+        <slot name="toolBarLeft"></slot>
+        <!-- 中心操作区 -->
+        <div class="header-center flex flex-1 items-center justify-center">
+          <span>{{ title }}</span>
+        </div>
+        <!-- 右侧操作区 -->
+        <ElButtonGroup class="header-right">
+          <ElTooltip content="重置">
+            <ElButton @click="handleReset">
+              <IconifyIcon :size="24" icon="system-uicons:reset-alt" />
+            </ElButton>
+          </ElTooltip>
+          <ElTooltip v-if="previewUrl" content="预览">
+            <ElButton @click="handlePreview">
+              <IconifyIcon :size="24" icon="ep:view" />
+            </ElButton>
+          </ElTooltip>
+          <ElTooltip content="保存">
+            <ElButton @click="handleSave">
+              <IconifyIcon :size="24" icon="ep:check" />
+            </ElButton>
+          </ElTooltip>
+        </ElButtonGroup>
+      </ElHeader>
+
+      <!-- 中心区域 -->
+      <ElContainer class="editor-container">
+        <!-- 左侧：组件库（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>
+          <!-- 手机页面编辑区域 -->
+          <ElScrollbar
+            :view-style="{
+              backgroundColor: pageConfigComponent.property.backgroundColor,
+              backgroundImage: `url(${pageConfigComponent.property.backgroundImage})`,
+            }"
+            view-class="phone-container"
+            wrap-class="editor-design-center page-prop-area"
+            style="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>
+          </ElScrollbar>
+          <!-- 手机底部导航 -->
+          <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">
+            <ElTag
+              v-if="showPageConfig"
+              :effect="
+                selectedComponent?.uid === pageConfigComponent.uid
+                  ? 'dark'
+                  : 'plain'
+              "
+              :type="
+                selectedComponent?.uid === pageConfigComponent.uid
+                  ? 'primary'
+                  : 'info'
+              "
+              size="large"
+              @click="handleComponentSelected(pageConfigComponent)"
+            >
+              <IconifyIcon :icon="pageConfigComponent.icon" :size="12" />
+              <span>{{ pageConfigComponent.name }}</span>
+            </ElTag>
+            <template v-for="(component, index) in pageComponents" :key="index">
+              <ElTag
+                v-if="component.position === 'fixed'"
+                :effect="
+                  selectedComponent?.uid === component.uid ? 'dark' : 'plain'
+                "
+                :type="
+                  selectedComponent?.uid === component.uid ? 'primary' : 'info'
+                "
+                closable
+                size="large"
+                @click="handleComponentSelected(component)"
+                @close="handleDeleteComponent(index)"
+              >
+                <IconifyIcon :icon="component.icon" :size="12" />
+                <span>{{ component.name }}</span>
+              </ElTag>
+            </template>
+          </div>
+        </div>
+        <!-- 右侧：属性面板（ComponentContainerProperty） -->
+        <ElAside
+          v-if="selectedComponent?.property"
+          class="editor-right"
+          width="350px"
+        >
+          <ElCard
+            body-class="h-[calc(100%-var(--el-card-padding)-var(--el-card-padding))]"
+            class="h-full"
+            shadow="never"
+          >
+            <!-- 组件名称 -->
+            <template #header>
+              <div class="flex items-center gap-2">
+                <IconifyIcon :icon="selectedComponent?.icon" color="gray" />
+                <span>{{ selectedComponent?.name }}</span>
+              </div>
+            </template>
+            <ElScrollbar
+              class="m-[calc(0px-var(--el-card-padding))]"
+              view-class="p-[var(--el-card-padding)] pb-[calc(var(--el-card-padding)+var(--el-card-padding))] property"
+            >
+              <component
+                :is="`${selectedComponent?.id}Property`"
+                :key="selectedComponent?.uid || selectedComponent?.id"
+                v-model="selectedComponent.property"
+              />
+            </ElScrollbar>
+          </ElCard>
+        </ElAside>
+      </ElContainer>
+    </ElContainer>
+
+    <!-- 预览弹框 -->
+    <ElDialog v-model="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">
+          <ElText>手机扫码预览</ElText>
+          <Qrcode :text="previewUrl" logo="/logo.gif" />
+        </div>
+      </div>
+    </ElDialog>
+  </div>
+</template>
+<style lang="scss" scoped>
+/* 手机宽度 */
+$phone-width: 375px;
+
+/* 根节点样式 */
+.editor {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+
+  /* 顶部：工具栏 */
+  .editor-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 42px;
+    padding: 0;
+    background-color: var(--el-bg-color);
+    border-bottom: solid 1px var(--el-border-color);
+
+    /* 工具栏：右侧按钮 */
+    .header-right {
+      height: 100%;
+
+      .el-button {
+        height: 100%;
+      }
+    }
+
+    /* 隐藏工具栏按钮的边框 */
+    :deep(.el-radio-button__inner),
+    :deep(.el-button) {
+      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(.el-card__header) {
+        padding: 8px 16px;
+      }
+
+      /* 属性面板分组 */
+      :deep(.property-group) {
+        margin: 0 -20px;
+
+        &.el-card {
+          border: none;
+        }
+
+        /* 属性分组名称 */
+        .el-card__header {
+          padding: 8px 32px;
+          background: var(--el-bg-color-page);
+          border: none;
+        }
+
+        .el-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(.el-tag) {
+          border: none;
+          box-shadow: 0 2px 8px 0 rgb(0 0 0 / 10%);
+
+          .el-tag__content {
+            display: flex;
+            align-items: center;
+            justify-content: flex-start;
+            width: 100%;
+
+            .el-icon {
+              margin-right: 4px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/apps/web-ele/src/components/diy-editor/util.ts b/apps/web-ele/src/components/diy-editor/util.ts
new file mode 100644
index 00000000..2d29f8a4
--- /dev/null
+++ b/apps/web-ele/src/components/diy-editor/util.ts
@@ -0,0 +1,129 @@
+import type { NavigationBarProperty } from '#/components/diy-editor/components/mobile/NavigationBar/config';
+import type { PageConfigProperty } from '#/components/diy-editor/components/mobile/PageConfig/config';
+import type { TabBarProperty } from '#/components/diy-editor/components/mobile/TabBar/config';
+
+// 页面装修组件
+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: PageConfigProperty;
+  // 顶部导航栏属性
+  navigationBar: NavigationBarProperty;
+  // 底部导航菜单属性
+  tabBar?: TabBarProperty;
+  // 页面组件列表
+  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-ele/src/components/draggable/index.vue b/apps/web-ele/src/components/draggable/index.vue
new file mode 100644
index 00000000..0aac7df5
--- /dev/null
+++ b/apps/web-ele/src/components/draggable/index.vue
@@ -0,0 +1,96 @@
+<script setup lang="ts">
+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: () => ({}),
+  },
+  // 数量限制：默认为0，表示不限制
+  limit: {
+    type: Number,
+    default: Number.MAX_VALUE,
+  },
+  // 最小数量：默认为1
+  min: {
+    type: Number,
+    default: 1,
+  },
+});
+// 定义事件
+const emit = defineEmits(['update:modelValue']);
+const formData = useVModel(props, 'modelValue', emit);
+
+// 处理添加
+const handleAdd = () => formData.value.push(cloneDeep(props.emptyItem || {}));
+// 处理删除
+const handleDelete = (index: number) => formData.value.splice(index, 1);
+</script>
+
+<template>
+  <el-text type="info" size="small"> 拖动左上角的小圆点可对其排序 </el-text>
+  <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)"
+        >
+          <el-tooltip content="拖动排序">
+            <IconifyIcon
+              icon="ic:round-drag-indicator"
+              class="drag-icon cursor-move"
+              style="color: #8a909c"
+            />
+          </el-tooltip>
+          <el-tooltip content="删除">
+            <IconifyIcon
+              icon="ep:delete"
+              class="cursor-pointer text-red-500"
+              v-if="formData.length > min"
+              @click="handleDelete(index)"
+            />
+          </el-tooltip>
+        </div>
+        <!-- 内容区 -->
+        <slot :element="element" :index="index"></slot>
+      </div>
+    </template>
+  </VueDraggable>
+  <el-tooltip :disabled="limit < 1" :content="`最多添加${limit}个`">
+    <el-button
+      type="primary"
+      plain
+      class="mt-1 w-full"
+      :disabled="limit > 0 && formData.length >= limit"
+      @click="handleAdd"
+    >
+      <IconifyIcon icon="ep:plus" /><span>添加</span>
+    </el-button>
+  </el-tooltip>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/apps/web-ele/src/components/input-with-color/index.vue b/apps/web-ele/src/components/input-with-color/index.vue
new file mode 100644
index 00000000..e2b2b51b
--- /dev/null
+++ b/apps/web-ele/src/components/input-with-color/index.vue
@@ -0,0 +1,44 @@
+<script lang="ts" setup>
+import { useVModels } from '@vueuse/core';
+import { ElColorPicker, ElInput } from 'element-plus';
+
+import { PREDEFINE_COLORS } from '#/utils/constants';
+
+/**
+ * 带颜色选择器输入框
+ */
+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>
+  <ElInput v-model="modelValue" v-bind="$attrs">
+    <template #append>
+      <ElColorPicker v-model="color" :predefine="PREDEFINE_COLORS" />
+    </template>
+  </ElInput>
+</template>
+<style scoped lang="scss">
+:deep(.el-input-group__append) {
+  padding: 0;
+
+  .el-color-picker__trigger {
+    padding: 0;
+    border-left: none;
+    border-radius: 0 var(--el-input-border-radius) var(--el-input-border-radius)
+      0;
+  }
+}
+</style>
diff --git a/apps/web-ele/src/components/magic-cube-editor/index.vue b/apps/web-ele/src/components/magic-cube-editor/index.vue
new file mode 100644
index 00000000..52bdf385
--- /dev/null
+++ b/apps/web-ele/src/components/magic-cube-editor/index.vue
@@ -0,0 +1,301 @@
+<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';
+
+// 魔方编辑器
+// 有两部分组成：
+// 1. 魔方矩阵：位于底层，由方块组件的二维表格，用于创建热区
+//    操作方法：
+//    1.1 点击其中一个方块就会进入热区选择模式
+//    1.2 再次点击另外一个方块时，结束热区选择模式
+//    1.3 在两个方块中间的区域创建热区
+//    如果两次点击的都是同一方块，就只创建一个格子的热区
+// 2. 热区：位于顶层，采用绝对定位，覆盖在魔方矩阵上面。
+defineOptions({ name: 'MagicCubeEditor' });
+
+// 定义属性
+const props = defineProps({
+  // 热区列表
+  modelValue: {
+    type: Array as () => Rect[],
+    default: () => [],
+  },
+  // 行数，默认 4 行
+  rows: {
+    type: Number,
+    default: 4,
+  },
+  // 列数，默认 4 列
+  cols: {
+    type: Number,
+    default: 4,
+  },
+  // 方块大小，单位px，默认75px
+  cubeSize: {
+    type: Number,
+    default: 75,
+  },
+});
+
+// 发送模型更新
+const emit = defineEmits(['update:modelValue', 'hotAreaSelected']);
+
+/**
+ * 方块
+ * @property active 是否激活
+ */
+type Cube = Point & { active: boolean };
+
+// 魔方矩阵：所有的方块
+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 热区索引
+ */
+const 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)"
+          >
+            <Icon 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-ele/src/components/magic-cube-editor/util.ts b/apps/web-ele/src/components/magic-cube-editor/util.ts
new file mode 100644
index 00000000..1ee8fb5a
--- /dev/null
+++ b/apps/web-ele/src/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-ele/src/components/upload/image-upload.vue b/apps/web-ele/src/components/upload/image-upload.vue
index edb3fc9c..f5777565 100644
--- a/apps/web-ele/src/components/upload/image-upload.vue
+++ b/apps/web-ele/src/components/upload/image-upload.vue
@@ -11,9 +11,9 @@ import type { UploadListType } from './typing';
 
 import type { AxiosProgressEvent } from '#/api/infra/file';
 
-import { ref, toRefs, watch } from 'vue';
+import { nextTick, ref, toRefs, watch } from 'vue';
 
-import { CloudUpload } from '@vben/icons';
+import { Plus } from '@vben/icons';
 import { $t } from '@vben/locales';
 import { isFunction, isObject, isString } from '@vben/utils';
 
@@ -33,26 +33,28 @@ const props = withDefaults(
       file: File,
       onUploadProgress?: AxiosProgressEvent,
     ) => Promise<AxiosResponse<any>>;
+    // 组件边框圆角
+    borderradius?: string;
     // 上传的目录
     directory?: string;
     disabled?: boolean;
+    // 上传框高度
+    height?: number | string;
     helpText?: string;
     listType?: UploadListType;
     // 最大数量的文件，Infinity不限制
     maxNumber?: number;
     // 文件最大多少MB
     maxSize?: number;
+    modelValue?: string | string[];
     // 是否支持多选
     multiple?: boolean;
     // support xxx.xxx.xx
     resultField?: string;
     // 是否显示下面的描述
     showDescription?: boolean;
-    modelValue?: string | string[];
     // 上传框宽度
-    width?: string | number;
-    // 上传框高度
-    height?: string | number;
+    width?: number | string;
   }>(),
   {
     modelValue: () => [],
@@ -69,11 +71,13 @@ const props = withDefaults(
     showDescription: true,
     width: '',
     height: '',
+    borderradius: '8px',
   },
 );
 
 const emit = defineEmits(['change', 'update:modelValue', 'delete']);
-const { accept, helpText, maxNumber, maxSize, width, height } = toRefs(props);
+const { accept, helpText, maxNumber, maxSize, width, height, borderradius } =
+  toRefs(props);
 const isInnerOperate = ref<boolean>(false);
 const { getStringAccept } = useUploadType({
   acceptRef: accept,
@@ -219,7 +223,6 @@ async function customRequest(options: UploadRequestOptions) {
 }
 
 function getValue() {
-  console.log(fileList.value);
   const list = (fileList.value || [])
     .filter((item) => item?.status === UploadResultStatus.SUCCESS)
     .map((item: any) => {
@@ -234,58 +237,181 @@ function getValue() {
   }
   return list;
 }
+
+// 编辑按钮：触发文件选择
+const triggerEdit = () => {
+  if (props.disabled) return;
+  // 只查找当前 upload-box 下的 input
+  nextTick(() => {
+    const uploadBox = document.querySelector('.upload-box');
+    if (uploadBox) {
+      const input = uploadBox.querySelector(
+        'input[type="file"]',
+      ) as HTMLInputElement | null;
+      if (input) input.click();
+    }
+  });
+};
 </script>
 
 <template>
-  <div>
-    <ElUpload
-      v-bind="$attrs"
-      v-model:file-list="fileList"
-      :accept="getStringAccept"
-      :before-upload="beforeUpload"
-      :http-request="customRequest"
-      :disabled="disabled"
-      :list-type="listType"
-      :limit="maxNumber"
-      :multiple="multiple"
-      :on-preview="handlePreview"
-      :on-remove="handleRemove"
-      :class="width || height ? 'custom-upload' : ''"
+  <div
+    class="upload-box"
+    :style="{
+      width: width || '150px',
+      height: height || '150px',
+      borderRadius: borderradius,
+    }"
+  >
+    <template
+      v-if="
+        fileList.length > 0 &&
+        fileList[0] &&
+        fileList[0].status === UploadResultStatus.SUCCESS
+      "
     >
-      <div
-        class="upload-content flex flex-col items-center justify-center"
-        :style="{ width: width || '', height: height || '' }"
-      >
-        <CloudUpload />
-        <div class="mt-2">{{ $t('ui.upload.imgUpload') }}</div>
+      <div class="upload-image-wrapper">
+        <img :src="fileList[0].url" class="upload-image" />
+        <div class="upload-handle">
+          <div class="handle-icon" @click="handlePreview(fileList[0]!)">
+            <i class="el-icon el-icon-zoom-in"></i>
+            <span>详情</span>
+          </div>
+          <div v-if="!disabled" class="handle-icon" @click="triggerEdit">
+            <i class="el-icon el-icon-edit"></i>
+            <span>编辑</span>
+          </div>
+          <div
+            v-if="!disabled"
+            class="handle-icon"
+            @click="handleRemove(fileList[0]!)"
+          >
+            <i class="el-icon el-icon-delete"></i>
+            <span>删除</span>
+          </div>
+        </div>
       </div>
-    </ElUpload>
+    </template>
+    <template v-else>
+      <ElUpload
+        v-bind="$attrs"
+        v-model:file-list="fileList"
+        :accept="getStringAccept"
+        :before-upload="beforeUpload"
+        :http-request="customRequest"
+        :disabled="disabled"
+        :list-type="listType"
+        :limit="maxNumber"
+        :multiple="multiple"
+        :on-preview="handlePreview"
+        :on-remove="handleRemove"
+        class="upload"
+        :style="{
+          width: width || '150px',
+          height: height || '150px',
+          borderRadius: borderradius,
+        }"
+      >
+        <div class="upload-content flex flex-col items-center justify-center">
+          <Plus />
+        </div>
+      </ElUpload>
+    </template>
     <div v-if="showDescription" class="mt-2 text-xs text-gray-500">
       {{ getStringAccept }}
     </div>
   </div>
 </template>
 
-<style>
-.ant-upload-select-picture-card {
-  @apply flex items-center justify-center;
-}
-
-.custom-upload .el-upload {
-  width: auto !important;
-  height: auto !important;
-}
-
-.custom-upload .el-upload--picture-card {
-  width: auto !important;
-  height: auto !important;
-  line-height: normal !important;
-}
-
-.custom-upload .upload-content {
+<style lang="scss" scoped>
+.upload-box {
+  position: relative;
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
   overflow: hidden;
+  background: #fafafa;
+  border: 1px dashed var(--el-border-color-darker);
+  transition: border-color 0.2s;
+
+  .upload {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100% !important;
+    height: 100% !important;
+    background: transparent;
+    border: none !important;
+  }
+
+  .upload-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
+  }
+
+  .upload-image-wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    background: #fff;
+    border-radius: inherit;
+  }
+
+  .upload-image {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    border-radius: inherit;
+  }
+
+  .upload-handle {
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 2;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
+    background: rgb(0 0 0 / 50%);
+    opacity: 0;
+    transition: opacity 0.2s;
+
+    &:hover {
+      opacity: 1;
+    }
+
+    .handle-icon {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      margin: 0 8px;
+      font-size: 18px;
+      color: #fff;
+
+      span {
+        margin-top: 2px;
+        font-size: 12px;
+      }
+    }
+  }
+
+  .upload-image-wrapper:hover .upload-handle {
+    opacity: 1;
+  }
 }
 </style>
diff --git a/apps/web-ele/src/components/vertical-button-group/index.vue b/apps/web-ele/src/components/vertical-button-group/index.vue
new file mode 100644
index 00000000..d7757ec7
--- /dev/null
+++ b/apps/web-ele/src/components/vertical-button-group/index.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+/**
+ * 垂直按钮组
+ * Element官方的按钮组只支持水平显示，通过重写样式实现垂直布局
+ */
+defineOptions({ name: 'VerticalButtonGroup' });
+</script>
+
+<template>
+  <el-button-group v-bind="$attrs">
+    <slot></slot>
+  </el-button-group>
+</template>
+
+<style scoped lang="scss">
+.el-button-group {
+  display: inline-flex;
+  flex-direction: column;
+}
+
+.el-button-group > :deep(.el-button:first-child) {
+  border-bottom-color: var(--el-button-divide-border-color);
+  border-top-right-radius: var(--el-border-radius-base);
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.el-button-group > :deep(.el-button:last-child) {
+  border-top-color: var(--el-button-divide-border-color);
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  border-bottom-left-radius: var(--el-border-radius-base);
+}
+
+.el-button-group :deep(.el-button--primary:not(:first-child, :last-child)) {
+  border-top-color: var(--el-button-divide-border-color);
+  border-bottom-color: var(--el-button-divide-border-color);
+}
+
+.el-button-group > :deep(.el-button:not(:last-child)) {
+  margin-right: 0;
+  margin-bottom: -1px;
+}
+</style>
diff --git a/apps/web-ele/src/router/routes/modules/diy.ts b/apps/web-ele/src/router/routes/modules/diy.ts
new file mode 100644
index 00000000..68ca1038
--- /dev/null
+++ b/apps/web-ele/src/router/routes/modules/diy.ts
@@ -0,0 +1,40 @@
+import type { RouteRecordRaw } from 'vue-router';
+
+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: '模板装修',
+          activeMenu: '/mall/promotion/diy-template/diy-template',
+        },
+        component: () =>
+          import('#/views/mall/promotion/diy/template/modules/decorate.vue'),
+      },
+      {
+        path: 'page/decorate/:id',
+        name: 'DiyPageDecorate',
+        meta: {
+          title: '页面装修',
+          noCache: false,
+          hidden: true,
+          activeMenu: '/mall/promotion/diy-template/diy-page',
+        },
+        component: () =>
+          import('#/views/mall/promotion/diy/page/modules/decorate.vue'),
+      },
+    ],
+  },
+];
+
+export default routes;
diff --git a/apps/web-ele/src/utils/constants.ts b/apps/web-ele/src/utils/constants.ts
index 9b684696..826a2157 100644
--- a/apps/web-ele/src/utils/constants.ts
+++ b/apps/web-ele/src/utils/constants.ts
@@ -644,3 +644,24 @@ export enum TaskStatusEnum {
    */
   WAIT = 0,
 }
+
+// 预设颜色
+export const PREDEFINE_COLORS = [
+  '#ff4500',
+  '#ff8c00',
+  '#ffd700',
+  '#90ee90',
+  '#00ced1',
+  '#1e90ff',
+  '#c71585',
+  '#409EFF',
+  '#909399',
+  '#C0C4CC',
+  '#b7390b',
+  '#ff7800',
+  '#fad400',
+  '#5b8c5f',
+  '#00babd',
+  '#1f73c3',
+  '#711f57',
+];
diff --git a/apps/web-ele/src/views/mall/product/category/components/product-category-select.vue b/apps/web-ele/src/views/mall/product/category/components/product-category-select.vue
new file mode 100644
index 00000000..441542b5
--- /dev/null
+++ b/apps/web-ele/src/views/mall/product/category/components/product-category-select.vue
@@ -0,0 +1,69 @@
+<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>
+  <el-tree-select
+    v-model="selectCategoryId"
+    :data="categoryList"
+    :props="{
+      children: 'children',
+      label: 'name',
+      value: 'id',
+      isLeaf: 'leaf',
+      emitPath: false,
+    }"
+    :multiple="multiple"
+    :show-checkbox="multiple"
+    class="w-1/1"
+    node-key="id"
+    placeholder="请选择商品分类"
+  />
+</template>
diff --git a/apps/web-ele/src/views/mall/product/spu/components/spu-showcase.vue b/apps/web-ele/src/views/mall/product/spu/components/spu-showcase.vue
new file mode 100644
index 00000000..661136a5
--- /dev/null
+++ b/apps/web-ele/src/views/mall/product/spu/components/spu-showcase.vue
@@ -0,0 +1,166 @@
+<script lang="ts" setup>
+import type { MallSpuApi } from '#/api/mall/product/spu';
+
+import { computed, ref, watch } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { ElImage, ElTooltip } from 'element-plus';
+
+import * as ProductSpuApi from '#/api/mall/product/spu';
+import SpuTableSelect from '#/views/mall/product/spu/components/spu-table-select.vue';
+
+// 商品橱窗，一般用于与商品建立关系时使用
+// 提供功能：展示商品列表、添加商品、移除商品
+defineOptions({ name: 'SpuShowcase' });
+
+const props = defineProps({
+  modelValue: {
+    type: [Number, Array],
+    required: true,
+  },
+  // 限制数量：默认不限制
+  limit: {
+    type: Number,
+    default: Number.MAX_VALUE,
+  },
+  disabled: Boolean,
+});
+
+const emit = defineEmits(['update:modelValue', 'change']);
+
+// 计算是否可以添加
+const canAdd = computed(() => {
+  // 情况一：禁用时不可以添加
+  if (props.disabled) return false;
+  // 情况二：未指定限制数量时，可以添加
+  if (!props.limit) return true;
+  // 情况三：检查已添加数量是否小于限制数量
+  return productSpus.value.length < props.limit;
+});
+
+// 商品列表
+const productSpus = ref<MallSpuApi.Spu[]>([]);
+
+watch(
+  () => props.modelValue,
+  async () => {
+    let ids: number[] = [];
+    if (Array.isArray(props.modelValue)) {
+      ids = props.modelValue as number[];
+    } else {
+      ids = props.modelValue ? [props.modelValue] : [];
+    }
+    // 不需要返显
+    if (ids.length === 0) {
+      productSpus.value = [];
+      return;
+    }
+    // 只有商品发生变化之后，才去查询商品
+    if (
+      productSpus.value.length === 0 ||
+      productSpus.value.some((spu) => !ids.includes(spu.id!))
+    ) {
+      productSpus.value = await ProductSpuApi.getSpuDetailList(ids);
+    }
+  },
+  { immediate: true },
+);
+
+/** 商品表格选择对话框 */
+const spuTableSelectRef = ref();
+// 打开对话框
+const openSpuTableSelect = () => {
+  spuTableSelectRef.value.open(productSpus.value);
+};
+
+/**
+ * 选择商品后触发
+ *
+ * @param spus 选中的商品列表
+ */
+const handleSpuSelected = (spus: MallSpuApi.Spu | MallSpuApi.Spu[]) => {
+  productSpus.value = Array.isArray(spus) ? spus : [spus];
+  emitSpuChange();
+};
+
+/**
+ * 删除商品
+ *
+ * @param index 商品索引
+ */
+const handleRemoveSpu = (index: number) => {
+  productSpus.value.splice(index, 1);
+  emitSpuChange();
+};
+const emitSpuChange = () => {
+  if (props.limit === 1) {
+    const spu = productSpus.value.length > 0 ? productSpus.value[0] : null;
+    emit('update:modelValue', spu?.id || 0);
+    emit('change', spu);
+  } else {
+    emit(
+      'update:modelValue',
+      productSpus.value.map((spu) => spu.id),
+    );
+    emit('change', productSpus.value);
+  }
+};
+</script>
+<template>
+  <div class="gap-8px flex flex-wrap items-center">
+    <div
+      v-for="(spu, index) in productSpus"
+      :key="spu.id"
+      class="select-box spu-pic"
+    >
+      <ElTooltip :content="spu.name">
+        <div class="relative h-full w-full">
+          <ElImage :src="spu.picUrl" class="h-full w-full" />
+          <IconifyIcon
+            v-show="!disabled"
+            class="del-icon"
+            icon="ep:circle-close-filled"
+            @click="handleRemoveSpu(index)"
+          />
+        </div>
+      </ElTooltip>
+    </div>
+    <ElTooltip content="选择商品" v-if="canAdd">
+      <div class="select-box" @click="openSpuTableSelect">
+        <IconifyIcon icon="ep:plus" />
+      </div>
+    </ElTooltip>
+  </div>
+  <!-- 商品选择对话框（表格形式） -->
+  <SpuTableSelect
+    ref="spuTableSelectRef"
+    :multiple="limit !== 1"
+    @change="handleSpuSelected"
+  />
+</template>
+
+<style lang="scss" scoped>
+.select-box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 60px;
+  height: 60px;
+  border: 1px dashed var(--el-border-color-darker);
+  border-radius: 8px;
+}
+
+.spu-pic {
+  position: relative;
+}
+
+.del-icon {
+  position: absolute;
+  top: -10px;
+  right: -10px;
+  z-index: 1;
+  width: 20px !important;
+  height: 20px !important;
+}
+</style>
diff --git a/apps/web-ele/src/views/mall/product/spu/components/spu-table-select.vue b/apps/web-ele/src/views/mall/product/spu/components/spu-table-select.vue
new file mode 100644
index 00000000..1c6c451f
--- /dev/null
+++ b/apps/web-ele/src/views/mall/product/spu/components/spu-table-select.vue
@@ -0,0 +1,359 @@
+<script lang="ts" setup>
+import type { MallCategoryApi } from '#/api/mall/product/category';
+import type { MallSpuApi } from '#/api/mall/product/spu';
+
+import { onMounted, ref } from 'vue';
+
+import { handleTree } from '@vben/utils';
+
+import {
+  CHANGE_EVENT,
+  ElButton,
+  ElCheckbox,
+  ElDatePicker,
+  ElDialog,
+  ElForm,
+  ElFormItem,
+  ElImage,
+  ElInput,
+  ElRadio,
+  ElTable,
+  ElTableColumn,
+  ElTreeSelect,
+} from 'element-plus';
+
+import * as ProductCategoryApi from '#/api/mall/product/category';
+import * as ProductSpuApi from '#/api/mall/product/spu';
+
+/**
+ * 商品表格选择对话框
+ * 1. 单选模式：
+ *    1.1 点击表格左侧的单选框时，结束选择，并关闭对话框
+ *    1.2 再次打开时，保持选中状态
+ * 2. 多选模式：
+ *    2.1 点击表格左侧的多选框时，记录选中的商品
+ *    2.2 切换分页时，保持商品的选中的状态
+ *    2.3 点击右下角的确定按钮时，结束选择，关闭对话框
+ *    2.4 再次打开时，保持选中状态
+ */
+defineOptions({ name: 'SpuTableSelect' });
+
+defineProps({
+  // 多选模式
+  multiple: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+/** 确认选择时的触发事件 */
+const emits = defineEmits<{
+  change: [spu: any | MallSpuApi.Spu | MallSpuApi.Spu[]];
+}>();
+// 列表的总页数
+const total = ref(0);
+// 列表的数据
+const list = ref<MallSpuApi.Spu[]>([]);
+// 列表的加载中
+const loading = ref(false);
+// 弹窗的是否展示
+const dialogVisible = ref(false);
+// 查询参数
+const queryParams = ref({
+  pageNo: 1,
+  pageSize: 10,
+  // 默认获取上架的商品
+  tabType: 0,
+  name: '',
+  categoryId: null,
+  createTime: [],
+});
+
+/** 打开弹窗 */
+const open = (spuList?: MallSpuApi.Spu[]) => {
+  // 重置
+  checkedSpus.value = [];
+  checkedStatus.value = {};
+  isCheckAll.value = false;
+  isIndeterminate.value = false;
+
+  // 处理已选中
+  if (spuList && spuList.length > 0) {
+    checkedSpus.value = [...spuList];
+    checkedStatus.value = Object.fromEntries(
+      spuList.map((spu) => [spu.id, true]),
+    );
+  }
+
+  dialogVisible.value = true;
+  resetQuery();
+};
+// 提供 open 方法，用于打开弹窗
+defineExpose({ open });
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true;
+  try {
+    const data = await ProductSpuApi.getSpuPage(queryParams.value);
+    list.value = data.list;
+    total.value = data.total;
+    // checkbox绑定undefined会有问题，需要给一个bool值
+    list.value.forEach(
+      (spu) =>
+        (checkedStatus.value[spu.id || 0] =
+          checkedStatus.value[spu.id || 0] || false),
+    );
+    // 计算全选框状态
+    calculateIsCheckAll();
+  } finally {
+    loading.value = false;
+  }
+};
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.value.pageNo = 1;
+  getList();
+};
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryParams.value = {
+    pageNo: 1,
+    pageSize: 10,
+    // 默认获取上架的商品
+    tabType: 0,
+    name: '',
+    categoryId: null,
+    createTime: [],
+  };
+  getList();
+};
+
+// 是否全选
+const isCheckAll = ref(false);
+// 全选框是否处于中间状态：不是全部选中 && 任意一个选中
+const isIndeterminate = ref(false);
+// 选中的商品
+const checkedSpus = ref<MallSpuApi.Spu[]>([]);
+// 选中状态：key为商品ID，value为是否选中
+const checkedStatus = ref<Record<string, boolean>>({});
+
+// 选中的商品 spuId
+const selectedSpuId = ref();
+/** 单选中时触发 */
+const handleSingleSelected = (spu: MallSpuApi.Spu) => {
+  emits(CHANGE_EVENT, spu);
+  // 关闭弹窗
+  dialogVisible.value = false;
+  // 记住上次选择的ID
+  selectedSpuId.value = spu.id;
+};
+
+/** 多选完成 */
+const handleEmitChange = () => {
+  // 关闭弹窗
+  dialogVisible.value = false;
+  emits(CHANGE_EVENT, [...checkedSpus.value]);
+};
+
+/** 全选/全不选 */
+const handleCheckAll = (checked: boolean) => {
+  isCheckAll.value = checked;
+  isIndeterminate.value = false;
+
+  list.value.forEach((spu) => handleCheckOne(checked, spu, false));
+};
+
+/**
+ * 选中一行
+ * @param checked 是否选中
+ * @param spu 商品
+ * @param isCalcCheckAll 是否计算全选
+ */
+const handleCheckOne = (
+  checked: boolean,
+  spu: MallSpuApi.Spu,
+  isCalcCheckAll: boolean,
+) => {
+  if (checked) {
+    checkedSpus.value.push(spu);
+    checkedStatus.value[spu.id || 0] = true;
+  } else {
+    const index = findCheckedIndex(spu);
+    if (index > -1) {
+      checkedSpus.value.splice(index, 1);
+      checkedStatus.value[spu.id || 0] = false;
+      isCheckAll.value = false;
+    }
+  }
+
+  // 计算全选框状态
+  if (isCalcCheckAll) {
+    calculateIsCheckAll();
+  }
+};
+
+// 查找商品在已选中商品列表中的索引
+const findCheckedIndex = (spu: MallSpuApi.Spu) =>
+  checkedSpus.value.findIndex((item) => item.id === spu.id);
+
+// 计算全选框状态
+const calculateIsCheckAll = () => {
+  isCheckAll.value = list.value.every(
+    (spu) => checkedStatus.value[spu.id || 0],
+  );
+  // 计算中间状态：不是全部选中 && 任意一个选中
+  isIndeterminate.value =
+    !isCheckAll.value &&
+    list.value.some((spu) => checkedStatus.value[spu.id || 0]);
+};
+
+// 分类列表
+const categoryList = ref<MallCategoryApi.Category[]>();
+// 分类树
+const categoryTreeList = ref();
+/** 初始化 */
+onMounted(async () => {
+  await getList();
+  // 获得分类树
+  categoryList.value = await ProductCategoryApi.getCategoryList({});
+  categoryTreeList.value = handleTree(categoryList.value, 'id', 'parentId');
+});
+</script>
+
+<template>
+  <ElDialog
+    v-model="dialogVisible"
+    :append-to-body="true"
+    title="选择商品"
+    width="70%"
+  >
+    <ContentWrap>
+      <ElForm
+        :inline="true"
+        :model="queryParams"
+        class="-mb-15px"
+        label-width="68px"
+      >
+        <ElFormItem label="商品名称" prop="name">
+          <ElInput
+            v-model="queryParams.name"
+            class="!w-240px"
+            clearable
+            placeholder="请输入商品名称"
+            @keyup.enter="handleQuery"
+          />
+        </ElFormItem>
+        <ElFormItem label="商品分类" prop="categoryId">
+          <ElTreeSelect
+            v-model="queryParams.categoryId"
+            :data="categoryTreeList"
+            :props="{
+              children: 'children',
+              label: 'name',
+              value: 'id',
+              isLeaf: 'leaf',
+              emitPath: false,
+            }"
+            check-strictly
+            class="!w-240px"
+            node-key="id"
+            placeholder="请选择商品分类"
+          />
+        </ElFormItem>
+        <ElFormItem label="创建时间" prop="createTime">
+          <ElDatePicker
+            v-model="queryParams.createTime"
+            :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+            class="!w-240px"
+            end-placeholder="结束日期"
+            start-placeholder="开始日期"
+            type="daterange"
+            value-format="YYYY-MM-DD HH:mm:ss"
+          />
+        </ElFormItem>
+        <ElFormItem>
+          <ElButton @click="handleQuery">
+            <Icon class="mr-5px" icon="ep:search" />
+            搜索
+          </ElButton>
+          <ElButton @click="resetQuery">
+            <Icon class="mr-5px" icon="ep:refresh" />
+            重置
+          </ElButton>
+        </ElFormItem>
+      </ElForm>
+      <ElTable v-loading="loading" :data="list" show-overflow-tooltip>
+        <!-- 1. 多选模式（不能使用type="selection"，Element会忽略Header插槽） -->
+        <ElTableColumn width="55" v-if="multiple">
+          <template #header>
+            <ElCheckbox
+              v-model="isCheckAll"
+              :indeterminate="isIndeterminate"
+              @change="handleCheckAll"
+            />
+          </template>
+          <template #default="{ row }">
+            <ElCheckbox
+              v-model="checkedStatus[row.id]"
+              @change="(checked: boolean) => handleCheckOne(checked, row, true)"
+            />
+          </template>
+        </ElTableColumn>
+        <!-- 2. 单选模式 -->
+        <ElTableColumn label="#" width="55" v-else>
+          <template #default="{ row }">
+            <ElRadio
+              :value="row.id"
+              v-model="selectedSpuId"
+              @change="handleSingleSelected(row)"
+            >
+              <!-- 空格不能省略，是为了让单选框不显示label，如果不指定label不会有选中的效果 -->
+              &nbsp;
+            </ElRadio>
+          </template>
+        </ElTableColumn>
+        <ElTableColumn
+          key="id"
+          align="center"
+          label="商品编号"
+          prop="id"
+          min-width="60"
+        />
+        <ElTableColumn label="商品图" min-width="80">
+          <template #default="{ row }">
+            <ElImage
+              :src="row.picUrl"
+              class="h-30px w-30px"
+              :preview-src-list="[row.picUrl]"
+              preview-teleported
+            />
+          </template>
+        </ElTableColumn>
+        <ElTableColumn label="商品名称" min-width="200" prop="name" />
+        <ElTableColumn label="商品分类" min-width="100" prop="categoryId">
+          <template #default="{ row }">
+            <span>{{
+              categoryList?.find(
+                (c: MallCategoryApi.Category) => c.id === row.categoryId,
+              )?.name
+            }}</span>
+          </template>
+        </ElTableColumn>
+      </ElTable>
+      <!-- 分页 -->
+      <Pagination
+        v-model:limit="queryParams.pageSize"
+        v-model:page="queryParams.pageNo"
+        :total="total"
+        @pagination="getList"
+      />
+    </ContentWrap>
+    <template #footer v-if="multiple">
+      <ElButton type="primary" @click="handleEmitChange">确 定</ElButton>
+      <ElButton @click="dialogVisible = false">取 消</ElButton>
+    </template>
+  </ElDialog>
+</template>
diff --git a/apps/web-ele/src/views/mall/promotion/combination/components/combination-showcase.vue b/apps/web-ele/src/views/mall/promotion/combination/components/combination-showcase.vue
new file mode 100644
index 00000000..0ff41171
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/combination/components/combination-showcase.vue
@@ -0,0 +1,175 @@
+<script lang="ts" setup>
+import type { MallCombinationActivityApi } from '#/api/mall/promotion/combination/combinationActivity';
+
+import { computed, ref, watch } from 'vue';
+
+import * as CombinationActivityApi from '#/api/mall/promotion/combination/combinationActivity';
+import CombinationTableSelect from '#/views/mall/promotion/combination/components/combination-table-select.vue';
+
+// 活动橱窗，一般用于装修时使用
+// 提供功能：展示活动列表、添加活动、删除活动
+defineOptions({ name: 'CombinationShowcase' });
+
+const props = defineProps({
+  modelValue: {
+    type: [Array, Number],
+    default: () => [],
+  },
+  // 限制数量：默认不限制
+  limit: {
+    type: Number,
+    default: Number.MAX_VALUE,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['update:modelValue', 'change']);
+
+// 计算是否可以添加
+const canAdd = computed(() => {
+  // 情况一：禁用时不可以添加
+  if (props.disabled) return false;
+  // 情况二：未指定限制数量时，可以添加
+  if (!props.limit) return true;
+  // 情况三：检查已添加数量是否小于限制数量
+  return Activitys.value.length < props.limit;
+});
+
+// 拼团活动列表
+const Activitys = ref<MallCombinationActivityApi.CombinationActivity[]>([]);
+
+watch(
+  () => props.modelValue,
+  async () => {
+    let ids;
+    if (Array.isArray(props.modelValue)) {
+      ids = props.modelValue;
+    } else {
+      ids = props.modelValue ? [props.modelValue] : [];
+    }
+
+    // 不需要返显
+    if (ids.length === 0) {
+      Activitys.value = [];
+      return;
+    }
+    // 只有活动发生变化之后，才会查询活动
+    if (
+      Activitys.value.length === 0 ||
+      Activitys.value.some(
+        (combinationActivity) => !ids.includes(combinationActivity.id!),
+      )
+    ) {
+      Activitys.value =
+        await CombinationActivityApi.getCombinationActivityListByIds(
+          ids as number[],
+        );
+    }
+  },
+  { immediate: true },
+);
+
+/** 活动表格选择对话框 */
+const combinationActivityTableSelectRef = ref();
+// 打开对话框
+const openCombinationActivityTableSelect = () => {
+  combinationActivityTableSelectRef.value.open(Activitys.value);
+};
+
+/**
+ * 选择活动后触发
+ * @param activityVOs 选中的活动列表
+ */
+const handleActivitySelected = (
+  activityVOs:
+    | MallCombinationActivityApi.CombinationActivity
+    | MallCombinationActivityApi.CombinationActivity[],
+) => {
+  Activitys.value = Array.isArray(activityVOs) ? activityVOs : [activityVOs];
+  emitActivityChange();
+};
+
+/**
+ * 删除活动
+ * @param index 活动索引
+ */
+const handleRemoveActivity = (index: number) => {
+  Activitys.value.splice(index, 1);
+  emitActivityChange();
+};
+const emitActivityChange = () => {
+  if (props.limit === 1) {
+    const combinationActivity =
+      Activitys.value.length > 0 ? Activitys.value[0] : null;
+    emit('update:modelValue', combinationActivity?.id || 0);
+    emit('change', combinationActivity);
+  } else {
+    emit(
+      'update:modelValue',
+      Activitys.value.map((combinationActivity) => combinationActivity.id),
+    );
+    emit('change', Activitys.value);
+  }
+};
+</script>
+<template>
+  <div class="gap-8px flex flex-wrap items-center">
+    <div
+      v-for="(combinationActivity, index) in Activitys"
+      :key="combinationActivity.id"
+      class="select-box spu-pic"
+    >
+      <el-tooltip :content="combinationActivity.name">
+        <div class="relative h-full w-full">
+          <el-image :src="combinationActivity.picUrl" class="h-full w-full" />
+          <Icon
+            v-show="!disabled"
+            class="del-icon"
+            icon="ep:circle-close-filled"
+            @click="handleRemoveActivity(index)"
+          />
+        </div>
+      </el-tooltip>
+    </div>
+    <el-tooltip content="选择活动" v-if="canAdd">
+      <div class="select-box" @click="openCombinationActivityTableSelect">
+        <Icon icon="ep:plus" />
+      </div>
+    </el-tooltip>
+  </div>
+  <!-- 拼团活动选择对话框（表格形式） -->
+  <CombinationTableSelect
+    ref="combinationActivityTableSelectRef"
+    :multiple="limit !== 1"
+    @change="handleActivitySelected"
+  />
+</template>
+
+<style lang="scss" scoped>
+.select-box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 60px;
+  height: 60px;
+  cursor: pointer;
+  border: 1px dashed var(--el-border-color-darker);
+  border-radius: 8px;
+}
+
+.spu-pic {
+  position: relative;
+}
+
+.del-icon {
+  position: absolute;
+  top: -10px;
+  right: -10px;
+  z-index: 1;
+  width: 20px !important;
+  height: 20px !important;
+}
+</style>
diff --git a/apps/web-ele/src/views/mall/promotion/combination/components/combination-table-select.vue b/apps/web-ele/src/views/mall/promotion/combination/components/combination-table-select.vue
new file mode 100644
index 00000000..2ccfe762
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/combination/components/combination-table-select.vue
@@ -0,0 +1,392 @@
+<script lang="ts" setup>
+import type { MallCombinationActivityApi } from '#/api/mall/promotion/combination/combinationActivity';
+
+import { onMounted, ref } from 'vue';
+
+import {
+  dateFormatter,
+  fenToYuan,
+  fenToYuanFormat,
+  formatDate,
+  handleTree,
+} from '@vben/utils';
+
+import { CHANGE_EVENT } from 'element-plus';
+
+import * as ProductCategoryApi from '#/api/mall/product/category';
+import * as CombinationActivityApi from '#/api/mall/promotion/combination/combinationActivity';
+import { DICT_TYPE, getIntDictOptions } from '#/utils/dict';
+
+/**
+ * 活动表格选择对话框
+ * 1. 单选模式：
+ *    1.1 点击表格左侧的单选框时，结束选择，并关闭对话框
+ *    1.2 再次打开时，保持选中状态
+ * 2. 多选模式：
+ *    2.1 点击表格左侧的多选框时，记录选中的活动
+ *    2.2 切换分页时，保持活动的选中状态
+ *    2.3 点击右下角的确定按钮时，结束选择，关闭对话框
+ *    2.4 再次打开时，保持选中状态
+ */
+defineOptions({ name: 'CombinationTableSelect' });
+
+defineProps({
+  // 多选模式
+  multiple: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+/** 确认选择时的触发事件 */
+const emits = defineEmits<{
+  change: [
+    CombinationActivityApi:
+      | any
+      | MallCombinationActivityApi.CombinationActivity
+      | MallCombinationActivityApi.CombinationActivity[],
+  ];
+}>();
+// 列表的总页数
+const total = ref(0);
+// 列表的数据
+const list = ref<MallCombinationActivityApi.CombinationActivity[]>([]);
+// 列表的加载中
+const loading = ref(false);
+// 弹窗的是否展示
+const dialogVisible = ref(false);
+// 查询参数
+const queryParams = ref({
+  pageNo: 1,
+  pageSize: 10,
+  name: undefined,
+  status: undefined,
+});
+
+/** 打开弹窗 */
+const open = (
+  CombinationList?: MallCombinationActivityApi.CombinationActivity[],
+) => {
+  // 重置
+  checkedActivitys.value = [];
+  checkedStatus.value = {};
+  isCheckAll.value = false;
+  isIndeterminate.value = false;
+
+  // 处理已选中
+  if (CombinationList && CombinationList.length > 0) {
+    checkedActivitys.value = [...CombinationList];
+    checkedStatus.value = Object.fromEntries(
+      CombinationList.map((activityVO) => [activityVO.id, true]),
+    );
+  }
+
+  dialogVisible.value = true;
+  resetQuery();
+};
+// 提供 open 方法，用于打开弹窗
+defineExpose({ open });
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true;
+  try {
+    const data = await CombinationActivityApi.getCombinationActivityPage(
+      queryParams.value,
+    );
+    list.value = data.list;
+    total.value = data.total;
+    // checkbox绑定undefined会有问题，需要给一个bool值
+    list.value.forEach(
+      (activityVO) =>
+        (checkedStatus.value[activityVO.id || ''] =
+          checkedStatus.value[activityVO.id || ''] || false),
+    );
+    // 计算全选框状态
+    calculateIsCheckAll();
+  } finally {
+    loading.value = false;
+  }
+};
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.value.pageNo = 1;
+  getList();
+};
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryParams.value = {
+    pageNo: 1,
+    pageSize: 10,
+    name: undefined,
+    status: undefined,
+  };
+  getList();
+};
+
+/**
+ * 格式化拼团价格
+ * @param products
+ */
+const formatCombinationPrice = (
+  products: MallCombinationActivityApi.CombinationActivity[],
+) => {
+  const combinationPrice = Math.min(
+    ...products.map((item) => item.combinationPrice || 0),
+  );
+  return `￥${fenToYuan(combinationPrice)}`;
+};
+
+// 是否全选
+const isCheckAll = ref(false);
+// 全选框是否处于中间状态：不是全部选中 && 任意一个选中
+const isIndeterminate = ref(false);
+// 选中的活动
+const checkedActivitys = ref<MallCombinationActivityApi.CombinationActivity[]>(
+  [],
+);
+// 选中状态：key为活动ID，value为是否选中
+const checkedStatus = ref<Record<string, boolean>>({});
+
+// 选中的活动 activityId
+const selectedActivityId = ref();
+/** 单选中时触发 */
+const handleSingleSelected = (
+  combinationActivityVO: MallCombinationActivityApi.CombinationActivity,
+) => {
+  emits(CHANGE_EVENT, combinationActivityVO);
+  // 关闭弹窗
+  dialogVisible.value = false;
+  // 记住上次选择的ID
+  selectedActivityId.value = combinationActivityVO.id;
+};
+
+/** 多选完成 */
+const handleEmitChange = () => {
+  // 关闭弹窗
+  dialogVisible.value = false;
+  emits(CHANGE_EVENT, [...checkedActivitys.value]);
+};
+
+/** 全选/全不选 */
+const handleCheckAll = (checked: boolean) => {
+  isCheckAll.value = checked;
+  isIndeterminate.value = false;
+
+  list.value.forEach((combinationActivity) =>
+    handleCheckOne(checked, combinationActivity, false),
+  );
+};
+
+/**
+ * 选中一行
+ * @param checked 是否选中
+ * @param combinationActivity 活动
+ * @param isCalcCheckAll 是否计算全选
+ */
+const handleCheckOne = (
+  checked: boolean,
+  combinationActivity: MallCombinationActivityApi.CombinationActivity,
+  isCalcCheckAll: boolean,
+) => {
+  if (checked) {
+    checkedActivitys.value.push(combinationActivity);
+    checkedStatus.value[combinationActivity.id || ''] = true;
+  } else {
+    const index = findCheckedIndex(combinationActivity);
+    if (index > -1) {
+      checkedActivitys.value.splice(index, 1);
+      checkedStatus.value[combinationActivity.id || ''] = false;
+      isCheckAll.value = false;
+    }
+  }
+
+  // 计算全选框状态
+  if (isCalcCheckAll) {
+    calculateIsCheckAll();
+  }
+};
+
+// 查找活动在已选中活动列表中的索引
+const findCheckedIndex = (
+  activityVO: MallCombinationActivityApi.CombinationActivity,
+) => checkedActivitys.value.findIndex((item) => item.id === activityVO.id);
+
+// 计算全选框状态
+const calculateIsCheckAll = () => {
+  isCheckAll.value = list.value.every(
+    (activityVO) => checkedStatus.value[activityVO.id || ''],
+  );
+  // 计算中间状态：不是全部选中 && 任意一个选中
+  isIndeterminate.value =
+    !isCheckAll.value &&
+    list.value.some((activityVO) => checkedStatus.value[activityVO.id || '']);
+};
+
+// 分类列表
+const categoryList = ref();
+// 分类树
+const categoryTreeList = ref();
+/** 初始化 */
+onMounted(async () => {
+  await getList();
+  // 获得分类树
+  categoryList.value = await ProductCategoryApi.getCategoryList({});
+  categoryTreeList.value = handleTree(categoryList.value, 'id', 'parentId');
+});
+</script>
+
+<template>
+  <Dialog
+    v-model="dialogVisible"
+    :append-to-body="true"
+    title="选择活动"
+    width="70%"
+  >
+    <ContentWrap>
+      <!-- 搜索工作栏 -->
+      <el-form
+        :inline="true"
+        :model="queryParams"
+        class="-mb-15px"
+        label-width="68px"
+      >
+        <el-form-item label="活动名称" prop="name">
+          <el-input
+            v-model="queryParams.name"
+            placeholder="请输入活动名称"
+            clearable
+            @keyup.enter="handleQuery"
+            class="!w-240px"
+          />
+        </el-form-item>
+        <el-form-item label="活动状态" prop="status">
+          <el-select
+            v-model="queryParams.status"
+            placeholder="请选择活动状态"
+            clearable
+            class="!w-240px"
+          >
+            <el-option
+              v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="handleQuery">
+            <Icon class="mr-5px" icon="ep:search" />
+            搜索
+          </el-button>
+          <el-button @click="resetQuery">
+            <Icon class="mr-5px" icon="ep:refresh" />
+            重置
+          </el-button>
+        </el-form-item>
+      </el-form>
+      <el-table v-loading="loading" :data="list" show-overflow-tooltip>
+        <!-- 1. 多选模式（不能使用type="selection"，Element会忽略Header插槽） -->
+        <el-table-column width="55" v-if="multiple">
+          <template #header>
+            <el-checkbox
+              v-model="isCheckAll"
+              :indeterminate="isIndeterminate"
+              @change="handleCheckAll"
+            />
+          </template>
+          <template #default="{ row }">
+            <el-checkbox
+              v-model="checkedStatus[row.id]"
+              @change="(checked: boolean) => handleCheckOne(checked, row, true)"
+            />
+          </template>
+        </el-table-column>
+        <!-- 2. 单选模式 -->
+        <el-table-column label="#" width="55" v-else>
+          <template #default="{ row }">
+            <el-radio
+              :value="row.id"
+              v-model="selectedActivityId"
+              @change="handleSingleSelected(row)"
+            >
+              <!-- 空格不能省略，是为了让单选框不显示label，如果不指定label不会有选中的效果 -->
+              &nbsp;
+            </el-radio>
+          </template>
+        </el-table-column>
+        <el-table-column label="活动编号" prop="id" min-width="80" />
+        <el-table-column label="活动名称" prop="name" min-width="140" />
+        <el-table-column label="活动时间" min-width="210">
+          <template #default="scope">
+            {{ formatDate(scope.row.startTime, 'YYYY-MM-DD') }}
+            ~ {{ formatDate(scope.row.endTime, 'YYYY-MM-DD') }}
+          </template>
+        </el-table-column>
+        <el-table-column label="商品图片" prop="spuName" min-width="80">
+          <template #default="scope">
+            <el-image
+              :src="scope.row.picUrl"
+              class="h-40px w-40px"
+              :preview-src-list="[scope.row.picUrl]"
+              preview-teleported
+            />
+          </template>
+        </el-table-column>
+        <el-table-column label="商品标题" prop="spuName" min-width="300" />
+        <el-table-column
+          label="原价"
+          prop="marketPrice"
+          min-width="100"
+          :formatter="fenToYuanFormat"
+        />
+        <el-table-column label="拼团价" prop="seckillPrice" min-width="100">
+          <template #default="scope">
+            {{ formatCombinationPrice(scope.row.products) }}
+          </template>
+        </el-table-column>
+        <el-table-column label="开团组数" prop="groupCount" min-width="100" />
+        <el-table-column
+          label="成团组数"
+          prop="groupSuccessCount"
+          min-width="100"
+        />
+        <el-table-column label="购买次数" prop="recordCount" min-width="100" />
+        <el-table-column
+          label="活动状态"
+          align="center"
+          prop="status"
+          min-width="100"
+        >
+          <template #default="scope">
+            <dict-tag
+              :type="DICT_TYPE.COMMON_STATUS"
+              :value="scope.row.status"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="创建时间"
+          align="center"
+          prop="createTime"
+          :formatter="dateFormatter"
+          width="180px"
+        />
+      </el-table>
+      <!-- 分页 -->
+      <Pagination
+        v-model:limit="queryParams.pageSize"
+        v-model:page="queryParams.pageNo"
+        :total="total"
+        @pagination="getList"
+      />
+    </ContentWrap>
+    <template #footer v-if="multiple">
+      <el-button type="primary" @click="handleEmitChange">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
diff --git a/apps/web-ele/src/views/mall/promotion/coupon/components/coupon-select.vue b/apps/web-ele/src/views/mall/promotion/coupon/components/coupon-select.vue
new file mode 100644
index 00000000..0c2aa84d
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/coupon/components/coupon-select.vue
@@ -0,0 +1,219 @@
+<script lang="ts" setup>
+import type { MallCouponTemplateApi } from '#/api/mall/promotion/coupon/couponTemplate';
+
+import { reactive, ref } from 'vue';
+
+import * as CouponTemplateApi from '#/api/mall/promotion/coupon/couponTemplate';
+import { CouponTemplateTakeTypeEnum } from '#/utils/constants';
+import { DICT_TYPE, getIntDictOptions } from '#/utils/dict';
+import {
+  discountFormat,
+  remainedCountFormat,
+  takeLimitCountFormat,
+  validityTypeFormat,
+} from '#/views/mall/promotion/coupon/formatter';
+
+defineOptions({ name: 'CouponSelect' });
+
+const props = defineProps<{
+  multipleSelection?: MallCouponTemplateApi.CouponTemplate[];
+  takeType: number; // 领取方式
+}>();
+const emit = defineEmits<{
+  (
+    e: 'update:multipleSelection',
+    v: MallCouponTemplateApi.CouponTemplate[],
+  ): void;
+  (e: 'change', v: MallCouponTemplateApi.CouponTemplate[]): void;
+}>();
+const dialogVisible = ref(false); // 弹窗的是否展示
+const dialogTitle = ref('选择优惠劵'); // 弹窗的标题
+const formLoading = ref(false); // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const loading = ref(true); // 列表的加载中
+const total = ref(0); // 列表的总页数
+const list = ref<MallCouponTemplateApi.CouponTemplate[]>([]); // 字典表格数据
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  name: null,
+  discountType: null,
+  canTakeTypes: [CouponTemplateTakeTypeEnum.USER.type], // 只获得直接领取的券
+});
+const queryFormRef = ref(); // 搜索的表单
+const selectedCouponList = ref<MallCouponTemplateApi.CouponTemplate[]>([]); // 选择的数据
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true;
+  try {
+    // 执行查询
+    queryParams.canTakeTypes = [props.takeType] as any;
+    const data = await CouponTemplateApi.getCouponTemplatePage(queryParams);
+    list.value = data.list;
+    total.value = data.total;
+  } finally {
+    loading.value = false;
+  }
+};
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1;
+  getList();
+};
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef?.value?.resetFields();
+  handleQuery();
+};
+
+/** 打开弹窗 */
+const open = async () => {
+  dialogVisible.value = true;
+  resetQuery();
+};
+defineExpose({ open }); // 提供 open 方法，用于打开弹窗
+
+const handleSelectionChange = (val: MallCouponTemplateApi.CouponTemplate[]) => {
+  if (props.multipleSelection) {
+    emit('update:multipleSelection', val);
+    return;
+  }
+  selectedCouponList.value = val;
+};
+
+const submitForm = () => {
+  dialogVisible.value = false;
+  emit('change', selectedCouponList.value);
+};
+</script>
+<template>
+  <Dialog v-model="dialogVisible" :title="dialogTitle" width="65%">
+    <!-- 搜索工作栏 -->
+    <ContentWrap>
+      <el-form
+        ref="queryFormRef"
+        :inline="true"
+        :model="queryParams"
+        class="-mb-15px"
+        label-width="82px"
+      >
+        <el-form-item label="优惠券名称" prop="name">
+          <el-input
+            v-model="queryParams.name"
+            class="!w-240px"
+            clearable
+            placeholder="请输入优惠劵名"
+            @keyup="handleQuery"
+          />
+        </el-form-item>
+        <el-form-item label="优惠类型" prop="discountType">
+          <el-select
+            v-model="queryParams.discountType"
+            class="!w-240px"
+            clearable
+            placeholder="请选择优惠券类型"
+          >
+            <el-option
+              v-for="dict in getIntDictOptions(
+                DICT_TYPE.PROMOTION_DISCOUNT_TYPE,
+              )"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="handleQuery">
+            <Icon class="mr-5px" icon="ep:search" />
+            搜索
+          </el-button>
+          <el-button @click="resetQuery">
+            <Icon class="mr-5px" icon="ep:refresh" />
+            重置
+          </el-button>
+        </el-form-item>
+      </el-form>
+    </ContentWrap>
+
+    <!-- 列表 -->
+    <ContentWrap>
+      <el-table
+        v-loading="loading"
+        :data="list"
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column type="selection" width="55" />
+        <el-table-column label="优惠券名称" min-width="140" prop="name" />
+        <el-table-column label="类型" min-width="80" prop="productScope">
+          <template #default="scope">
+            <dict-tag
+              :type="DICT_TYPE.PROMOTION_PRODUCT_SCOPE"
+              :value="scope.row.productScope"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column label="优惠" min-width="100" prop="discount">
+          <template #default="scope">
+            <dict-tag
+              :type="DICT_TYPE.PROMOTION_DISCOUNT_TYPE"
+              :value="scope.row.discountType"
+            />
+            {{ discountFormat(scope.row) }}
+          </template>
+        </el-table-column>
+        <el-table-column label="领取方式" min-width="100" prop="takeType">
+          <template #default="scope">
+            <dict-tag
+              :type="DICT_TYPE.PROMOTION_COUPON_TAKE_TYPE"
+              :value="scope.row.takeType"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column
+          :formatter="validityTypeFormat"
+          align="center"
+          label="使用时间"
+          prop="validityType"
+          width="185"
+        />
+        <el-table-column align="center" label="发放数量" prop="totalCount" />
+        <el-table-column
+          :formatter="remainedCountFormat"
+          align="center"
+          label="剩余数量"
+          prop="totalCount"
+        />
+        <el-table-column
+          :formatter="takeLimitCountFormat"
+          align="center"
+          label="领取上限"
+          prop="takeLimitCount"
+        />
+        <el-table-column align="center" label="状态" prop="status">
+          <template #default="scope">
+            <dict-tag
+              :type="DICT_TYPE.COMMON_STATUS"
+              :value="scope.row.status"
+            />
+          </template>
+        </el-table-column>
+      </el-table>
+      <!-- 分页 -->
+      <Pagination
+        v-model:limit="queryParams.pageSize"
+        v-model:page="queryParams.pageNo"
+        :total="total"
+        @pagination="getList"
+      />
+    </ContentWrap>
+    <template #footer>
+      <el-button :disabled="formLoading" type="primary" @click="submitForm">
+        确 定
+      </el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
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/modules/decorate.vue
new file mode 100644
index 00000000..396b11ff
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/diy/page/modules/decorate.vue
@@ -0,0 +1,75 @@
+<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 { ElMessage } from 'element-plus';
+
+import * as DiyPageApi from '#/api/mall/promotion/diy/page';
+import { PAGE_LIBS } from '#/components/diy-editor/util';
+
+/** 装修页面表单 */
+defineOptions({ name: 'DiyPageDecorate' });
+
+const formLoading = ref(false); // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formData = ref<MallDiyPageApi.DiyPage>();
+const formRef = ref(); // 表单 Ref
+
+// 获取详情
+const getPageDetail = async (id: any) => {
+  formLoading.value = true;
+  try {
+    formData.value = await DiyPageApi.getDiyPageProperty(id);
+  } finally {
+    formLoading.value = false;
+  }
+};
+
+// 提交表单
+const submitForm = async () => {
+  // 校验表单
+  if (!formRef.value) return;
+  // 提交请求
+  formLoading.value = true;
+  try {
+    await DiyPageApi.updateDiyPageProperty(unref(formData)!);
+    ElMessage.success('保存成功');
+  } finally {
+    formLoading.value = false;
+  }
+};
+
+// 重置表单
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    templateId: undefined,
+    name: '',
+    remark: '',
+    previewPicUrls: [],
+    property: '',
+  } as MallDiyPageApi.DiyPage;
+  formRef.value?.resetFields();
+};
+
+/** 初始化 */
+const route = useRoute();
+onMounted(() => {
+  resetForm();
+  if (!route.params.id) {
+    ElMessage.warning('参数错误，页面编号不能为空！');
+    return;
+  }
+  getPageDetail(route.params.id);
+});
+</script>
+<template>
+  <DiyEditor
+    v-if="formData && !formLoading"
+    v-model="formData.property"
+    :title="formData.name"
+    :libs="PAGE_LIBS"
+    @save="submitForm"
+  />
+</template>
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/modules/decorate.vue
new file mode 100644
index 00000000..7efb0ab8
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/diy/template/modules/decorate.vue
@@ -0,0 +1,223 @@
+<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 '#/components/diy-editor/util'; // 商城的 DIY 组件，在 DiyEditor 目录下
+
+import { onMounted, reactive, ref, unref } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { IconifyIcon } from '@vben/icons';
+import { isEmpty } from '@vben/utils';
+
+import { ElMessage } 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 from '#/components/diy-editor/index.vue';
+import { PAGE_LIBS } from '#/components/diy-editor/util';
+
+/** 装修模板表单 */
+defineOptions({ name: 'DiyTemplateDecorate' });
+
+// 左上角工具栏操作按钮
+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 对应的缓存
+const currentFormDataMap = ref<
+  Map<string, MallDiyPageApi.DiyPage | MallDiyTemplateApi.DiyTemplateProperty>
+>(new Map());
+// 商城 H5 预览地址
+const previewUrl = ref('');
+
+// 获取详情
+const getPageDetail = async (id: any) => {
+  formLoading.value = true;
+  try {
+    formData.value = await DiyTemplateApi.getDiyTemplateProperty(id);
+    // 拼接手机预览链接
+    const domain = import.meta.env.VITE_MALL_H5_DOMAIN;
+    previewUrl.value = `${domain}/#/pages/index/index?templateId=${formData.value.id}`;
+  } finally {
+    formLoading.value = false;
+  }
+};
+
+// 模板组件库
+const templateLibs = [] as DiyComponentLibrary[];
+// 当前组件库
+const libs = ref<DiyComponentLibrary[]>(templateLibs);
+// 模板选项切换
+const handleTemplateItemChange = (val: number) => {
+  // 缓存模版编辑数据
+  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;
+};
+
+// 提交表单
+const submitForm = async () => {
+  // 校验表单
+  if (!formRef.value) return;
+  // 提交请求
+  formLoading.value = true;
+  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) ? unref(formData)! : data,
+        );
+        continue;
+      }
+      // 提交页面属性
+      // 情况二：提交当前正在编辑的页面
+      if (currentFormData.value?.name.includes(templateItem.name)) {
+        await DiyPageApi.updateDiyPageProperty(unref(currentFormData)!);
+        continue;
+      }
+      // 情况三：提交页面编辑缓存
+      if (!isEmpty(data)) {
+        await DiyPageApi.updateDiyPageProperty(data!);
+      }
+    }
+    ElMessage.success('保存成功');
+  } finally {
+    formLoading.value = false;
+  }
+};
+
+// 重置表单
+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 = () =>
+  sessionStorage.setItem(DIY_PAGE_INDEX_KEY, `${selectedTemplateItem.value}`);
+// 2. 恢复
+const 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);
+  }
+};
+// #endregion
+
+/** 初始化 */
+const { currentRoute } = useRouter(); // 路由
+onMounted(async () => {
+  resetForm();
+  if (!currentRoute.value.params.id) {
+    ElMessage.warning('参数错误，页面编号不能为空！');
+    return;
+  }
+  // 查询详情
+  await getPageDetail(currentRoute.value.params.id);
+  // 恢复重置前的页面
+  recoverPageIndex();
+});
+</script>
+<template>
+  <DiyEditor
+    v-if="formData && !formLoading"
+    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>
+      <el-radio-group
+        :model-value="selectedTemplateItem"
+        class="h-full!"
+        @change="handleTemplateItemChange"
+      >
+        <el-tooltip
+          v-for="(item, index) in templateItems"
+          :key="index"
+          :content="item.name"
+        >
+          <el-radio-button :value="index">
+            <IconifyIcon :icon="item.icon" :size="24" />
+          </el-radio-button>
+        </el-tooltip>
+      </el-radio-group>
+    </template>
+  </DiyEditor>
+</template>
diff --git a/apps/web-ele/src/views/mall/promotion/point/components/point-showcase.vue b/apps/web-ele/src/views/mall/promotion/point/components/point-showcase.vue
new file mode 100644
index 00000000..6a39d380
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/point/components/point-showcase.vue
@@ -0,0 +1,178 @@
+<script lang="ts" setup>
+import type { MallPointActivityApi } from '#/api/mall/promotion/point';
+
+import { computed, ref, watch } from 'vue';
+
+import { ElImage, ElTooltip } from 'element-plus';
+
+import * as PointActivityApi from '#/api/mall/promotion/point';
+
+import PointTableSelect from './point-table-select.vue';
+
+// 活动橱窗，一般用于装修时使用
+// 提供功能：展示活动列表、添加活动、删除活动
+defineOptions({ name: 'PointShowcase' });
+
+const props = defineProps({
+  modelValue: {
+    type: [Number, Array],
+    required: true,
+  },
+  // 限制数量：默认不限制
+  limit: {
+    type: Number,
+    default: Number.MAX_VALUE,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['update:modelValue', 'change']);
+
+// 计算是否可以添加
+const canAdd = computed(() => {
+  // 情况一：禁用时不可以添加
+  if (props.disabled) return false;
+  // 情况二：未指定限制数量时，可以添加
+  if (!props.limit) return true;
+  // 情况三：检查已添加数量是否小于限制数量
+  return pointActivityList.value.length < props.limit;
+});
+
+// 拼团活动列表
+const pointActivityList = ref<MallPointActivityApi.PointActivity[]>([]);
+
+watch(
+  () => props.modelValue,
+  async () => {
+    let ids;
+    if (Array.isArray(props.modelValue)) {
+      ids = props.modelValue;
+    } else {
+      ids = props.modelValue ? [props.modelValue] : [];
+    }
+
+    // 不需要返显
+    if (ids.length === 0) {
+      pointActivityList.value = [];
+      return;
+    }
+    // 只有活动发生变化之后，才会查询活动
+    if (
+      pointActivityList.value.length === 0 ||
+      pointActivityList.value.some(
+        (pointActivity) => !ids.includes(pointActivity.id!),
+      )
+    ) {
+      pointActivityList.value =
+        await PointActivityApi.getPointActivityListByIds(ids as number[]);
+    }
+  },
+  { immediate: true },
+);
+
+/** 活动表格选择对话框 */
+const pointActivityTableSelectRef = ref();
+// 打开对话框
+const openSeckillActivityTableSelect = () => {
+  pointActivityTableSelectRef.value.open(pointActivityList.value);
+};
+
+/**
+ * 选择活动后触发
+ * @param activityList 选中的活动列表
+ */
+const handleActivitySelected = (
+  activityList:
+    | MallPointActivityApi.PointActivity
+    | MallPointActivityApi.PointActivity[],
+) => {
+  pointActivityList.value = Array.isArray(activityList)
+    ? activityList
+    : [activityList];
+  emitActivityChange();
+};
+
+/**
+ * 删除活动
+ * @param index 活动索引
+ */
+const handleRemoveActivity = (index: number) => {
+  pointActivityList.value.splice(index, 1);
+  emitActivityChange();
+};
+const emitActivityChange = () => {
+  if (props.limit === 1) {
+    const pointActivity =
+      pointActivityList.value.length > 0 ? pointActivityList.value[0] : null;
+    emit('update:modelValue', pointActivity?.id || 0);
+    emit('change', pointActivity);
+  } else {
+    emit(
+      'update:modelValue',
+      pointActivityList.value.map((pointActivity) => pointActivity.id),
+    );
+    emit('change', pointActivityList.value);
+  }
+};
+</script>
+<template>
+  <div class="gap-8px flex flex-wrap items-center">
+    <div
+      v-for="(pointActivity, index) in pointActivityList"
+      :key="pointActivity.id"
+      class="select-box spu-pic"
+    >
+      <ElTooltip :content="pointActivity.spuName">
+        <div class="relative h-full w-full">
+          <ElImage :src="pointActivity.picUrl" class="h-full w-full" />
+          <IconifyIcon
+            v-show="!disabled"
+            class="del-icon"
+            icon="ep:circle-close-filled"
+            @click="handleRemoveActivity(index)"
+          />
+        </div>
+      </ElTooltip>
+    </div>
+    <ElTooltip v-if="canAdd" content="选择活动">
+      <div class="select-box" @click="openSeckillActivityTableSelect">
+        <IconifyIcon icon="ep:plus" />
+      </div>
+    </ElTooltip>
+  </div>
+  <!-- 拼团活动选择对话框（表格形式） -->
+  <PointTableSelect
+    ref="pointActivityTableSelectRef"
+    :multiple="limit !== 1"
+    @change="handleActivitySelected"
+  />
+</template>
+
+<style lang="scss" scoped>
+.select-box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 60px;
+  height: 60px;
+  cursor: pointer;
+  border: 1px dashed var(--el-border-color-darker);
+  border-radius: 8px;
+}
+
+.spu-pic {
+  position: relative;
+}
+
+.del-icon {
+  position: absolute;
+  top: -10px;
+  right: -10px;
+  z-index: 1;
+  width: 20px !important;
+  height: 20px !important;
+}
+</style>
diff --git a/apps/web-ele/src/views/mall/promotion/point/components/point-table-select.vue b/apps/web-ele/src/views/mall/promotion/point/components/point-table-select.vue
new file mode 100644
index 00000000..84539c04
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/point/components/point-table-select.vue
@@ -0,0 +1,351 @@
+<script lang="ts" setup>
+import type { MallPointActivityApi } from '#/api/mall/promotion/point';
+
+import { computed, ref } from 'vue';
+
+import { dateFormatter, fenToYuanFormat } from '@vben/utils';
+
+import { CHANGE_EVENT } from 'element-plus';
+
+import * as PointActivityApi from '#/api/mall/promotion/point';
+import { DICT_TYPE, getIntDictOptions } from '#/utils/dict';
+
+/**
+ * 活动表格选择对话框
+ * 1. 单选模式：
+ *    1.1 点击表格左侧的单选框时，结束选择，并关闭对话框
+ *    1.2 再次打开时，保持选中状态
+ * 2. 多选模式：
+ *    2.1 点击表格左侧的多选框时，记录选中的活动
+ *    2.2 切换分页时，保持活动的选中状态
+ *    2.3 点击右下角的确定按钮时，结束选择，关闭对话框
+ *    2.4 再次打开时，保持选中状态
+ */
+defineOptions({ name: 'PointTableSelect' });
+
+defineProps({
+  // 多选模式
+  multiple: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+/** 确认选择时的触发事件 */
+const emits = defineEmits<{
+  (
+    e: 'change',
+    v:
+      | any
+      | MallPointActivityApi.PointActivity
+      | MallPointActivityApi.PointActivity[],
+  ): void;
+}>();
+// 列表的总页数
+const total = ref(0);
+// 列表的数据
+const list = ref<MallPointActivityApi.PointActivity[]>([]);
+// 列表的加载中
+const loading = ref(false);
+// 弹窗的是否展示
+const dialogVisible = ref(false);
+// 查询参数
+const queryParams = ref({
+  pageNo: 1,
+  pageSize: 10,
+  name: null,
+  status: undefined,
+});
+const getRedeemedQuantity = computed(
+  () => (row: any) => (row.totalStock || 0) - (row.stock || 0),
+); // 获得商品已兑换数量
+/** 打开弹窗 */
+const open = (pointList?: MallPointActivityApi.PointActivity[]) => {
+  // 重置
+  checkedActivities.value = [];
+  checkedStatus.value = {};
+  isCheckAll.value = false;
+  isIndeterminate.value = false;
+
+  // 处理已选中
+  if (pointList && pointList.length > 0) {
+    checkedActivities.value = [...pointList];
+    checkedStatus.value = Object.fromEntries(
+      pointList.map((activityVO) => [activityVO.id, true]),
+    );
+  }
+
+  dialogVisible.value = true;
+  resetQuery();
+};
+// 提供 open 方法，用于打开弹窗
+defineExpose({ open });
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true;
+  try {
+    const data = await PointActivityApi.getPointActivityPage(queryParams.value);
+    list.value = data.list;
+    total.value = data.total;
+    // checkbox绑定undefined会有问题，需要给一个bool值
+    list.value.forEach(
+      (activityVO) =>
+        (checkedStatus.value[activityVO.id] =
+          checkedStatus.value[activityVO.id] || false),
+    );
+    // 计算全选框状态
+    calculateIsCheckAll();
+  } finally {
+    loading.value = false;
+  }
+};
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.value.pageNo = 1;
+  getList();
+};
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryParams.value = {
+    pageNo: 1,
+    pageSize: 10,
+    name: null,
+    status: undefined,
+  };
+  getList();
+};
+
+// 是否全选
+const isCheckAll = ref(false);
+// 全选框是否处于中间状态：不是全部选中 && 任意一个选中
+const isIndeterminate = ref(false);
+// 选中的活动
+const checkedActivities = ref<MallPointActivityApi.PointActivity[]>([]);
+// 选中状态：key为活动ID，value为是否选中
+const checkedStatus = ref<Record<string, boolean>>({});
+
+// 选中的活动 activityId
+const selectedActivityId = ref();
+/** 单选中时触发 */
+const handleSingleSelected = (
+  pointActivityVO: MallPointActivityApi.PointActivity,
+) => {
+  emits(CHANGE_EVENT, pointActivityVO);
+  // 关闭弹窗
+  dialogVisible.value = false;
+  // 记住上次选择的ID
+  selectedActivityId.value = pointActivityVO.id;
+};
+
+/** 多选完成 */
+const handleEmitChange = () => {
+  // 关闭弹窗
+  dialogVisible.value = false;
+  emits(CHANGE_EVENT, [...checkedActivities.value]);
+};
+
+/** 全选/全不选 */
+const handleCheckAll = (checked: boolean) => {
+  isCheckAll.value = checked;
+  isIndeterminate.value = false;
+
+  list.value.forEach((pointActivity) =>
+    handleCheckOne(checked, pointActivity, false),
+  );
+};
+
+/**
+ * 选中一行
+ * @param checked 是否选中
+ * @param pointActivity 活动
+ * @param isCalcCheckAll 是否计算全选
+ */
+const handleCheckOne = (
+  checked: boolean,
+  pointActivity: MallPointActivityApi.PointActivity,
+  isCalcCheckAll: boolean,
+) => {
+  if (checked) {
+    checkedActivities.value.push(pointActivity);
+    checkedStatus.value[pointActivity.id] = true;
+  } else {
+    const index = findCheckedIndex(pointActivity);
+    if (index > -1) {
+      checkedActivities.value.splice(index, 1);
+      checkedStatus.value[pointActivity.id] = false;
+      isCheckAll.value = false;
+    }
+  }
+
+  // 计算全选框状态
+  if (isCalcCheckAll) {
+    calculateIsCheckAll();
+  }
+};
+
+// 查找活动在已选中活动列表中的索引
+const findCheckedIndex = (activityVO: MallPointActivityApi.PointActivity) =>
+  checkedActivities.value.findIndex((item) => item.id === activityVO.id);
+
+// 计算全选框状态
+const calculateIsCheckAll = () => {
+  isCheckAll.value = list.value.every(
+    (activityVO) => checkedStatus.value[activityVO.id],
+  );
+  // 计算中间状态：不是全部选中 && 任意一个选中
+  isIndeterminate.value =
+    !isCheckAll.value &&
+    list.value.some((activityVO) => checkedStatus.value[activityVO.id]);
+};
+</script>
+
+<template>
+  <Dialog
+    v-model="dialogVisible"
+    :append-to-body="true"
+    title="选择活动"
+    width="70%"
+  >
+    <ContentWrap>
+      <!-- 搜索工作栏 -->
+      <el-form
+        :inline="true"
+        :model="queryParams"
+        class="-mb-15px"
+        label-width="68px"
+      >
+        <el-form-item label="活动状态" prop="status">
+          <el-select
+            v-model="queryParams.status"
+            class="!w-240px"
+            clearable
+            placeholder="请选择活动状态"
+          >
+            <el-option
+              v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="handleQuery">
+            <Icon class="mr-5px" icon="ep:search" />
+            搜索
+          </el-button>
+          <el-button @click="resetQuery">
+            <Icon class="mr-5px" icon="ep:refresh" />
+            重置
+          </el-button>
+        </el-form-item>
+      </el-form>
+      <el-table v-loading="loading" :data="list" show-overflow-tooltip>
+        <!-- 1. 多选模式（不能使用type="selection"，Element会忽略Header插槽） -->
+        <el-table-column v-if="multiple" width="55">
+          <template #header>
+            <el-checkbox
+              v-model="isCheckAll"
+              :indeterminate="isIndeterminate"
+              @change="handleCheckAll"
+            />
+          </template>
+          <template #default="{ row }">
+            <el-checkbox
+              v-model="checkedStatus[row.id]"
+              @change="(checked: boolean) => handleCheckOne(checked, row, true)"
+            />
+          </template>
+        </el-table-column>
+        <!-- 2. 单选模式 -->
+        <el-table-column v-else label="#" width="55">
+          <template #default="{ row }">
+            <el-radio
+              v-model="selectedActivityId"
+              :value="row.id"
+              @change="handleSingleSelected(row)"
+            >
+              <!-- 空格不能省略，是为了让单选框不显示label，如果不指定label不会有选中的效果 -->
+              &nbsp;
+            </el-radio>
+          </template>
+        </el-table-column>
+        <el-table-column label="活动编号" min-width="80" prop="id" />
+        <el-table-column label="商品图片" min-width="80" prop="spuName">
+          <template #default="scope">
+            <el-image
+              :preview-src-list="[scope.row.picUrl]"
+              :src="scope.row.picUrl"
+              class="h-40px w-40px"
+              preview-teleported
+            />
+          </template>
+        </el-table-column>
+        <el-table-column label="商品标题" min-width="300" prop="spuName" />
+        <el-table-column
+          :formatter="fenToYuanFormat"
+          label="原价"
+          min-width="100"
+          prop="marketPrice"
+        />
+        <el-table-column label="原价" min-width="100" prop="marketPrice" />
+        <el-table-column
+          align="center"
+          label="活动状态"
+          min-width="100"
+          prop="status"
+        >
+          <template #default="scope">
+            <dict-tag
+              :type="DICT_TYPE.COMMON_STATUS"
+              :value="scope.row.status"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column
+          align="center"
+          label="库存"
+          min-width="80"
+          prop="stock"
+        />
+        <el-table-column
+          align="center"
+          label="总库存"
+          min-width="80"
+          prop="totalStock"
+        />
+        <el-table-column
+          align="center"
+          label="已兑换数量"
+          min-width="100"
+          prop="redeemedQuantity"
+        >
+          <template #default="{ row }">
+            {{ getRedeemedQuantity(row) }}
+          </template>
+        </el-table-column>
+        <el-table-column
+          :formatter="dateFormatter"
+          align="center"
+          label="创建时间"
+          prop="createTime"
+          width="180px"
+        />
+      </el-table>
+      <!-- 分页 -->
+      <Pagination
+        v-model:limit="queryParams.pageSize"
+        v-model:page="queryParams.pageNo"
+        :total="total"
+        @pagination="getList"
+      />
+    </ContentWrap>
+    <template v-if="multiple" #footer>
+      <el-button type="primary" @click="handleEmitChange">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
diff --git a/apps/web-ele/src/views/mall/promotion/seckill/components/seckill-showcase.vue b/apps/web-ele/src/views/mall/promotion/seckill/components/seckill-showcase.vue
new file mode 100644
index 00000000..b5699e82
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/seckill/components/seckill-showcase.vue
@@ -0,0 +1,177 @@
+<script lang="ts" setup>
+import type { MallSeckillActivityApi } from '#/api/mall/promotion/seckill/seckillActivity';
+
+import { computed, ref, watch } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { ElImage, ElTooltip } from 'element-plus';
+
+import * as SeckillActivityApi from '#/api/mall/promotion/seckill/seckillActivity';
+import SeckillTableSelect from '#/views/mall/promotion/seckill/components/seckill-table-select.vue';
+
+// 活动橱窗，一般用于装修时使用
+// 提供功能：展示活动列表、添加活动、删除活动
+defineOptions({ name: 'SeckillShowcase' });
+
+const props = defineProps({
+  modelValue: {
+    type: [Number, Array],
+    required: true,
+  },
+  // 限制数量：默认不限制
+  limit: {
+    type: Number,
+    default: Number.MAX_VALUE,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['update:modelValue', 'change']);
+
+// 计算是否可以添加
+const canAdd = computed(() => {
+  // 情况一：禁用时不可以添加
+  if (props.disabled) return false;
+  // 情况二：未指定限制数量时，可以添加
+  if (!props.limit) return true;
+  // 情况三：检查已添加数量是否小于限制数量
+  return Activitys.value.length < props.limit;
+});
+
+// 拼团活动列表
+const Activitys = ref<MallSeckillActivityApi.SeckillActivity[]>([]);
+
+watch(
+  () => props.modelValue,
+  async () => {
+    let ids;
+    if (Array.isArray(props.modelValue)) {
+      ids = props.modelValue;
+    } else {
+      ids = props.modelValue ? [props.modelValue] : [];
+    }
+    // 不需要返显
+    if (ids.length === 0) {
+      Activitys.value = [];
+      return;
+    }
+    // 只有活动发生变化之后，才会查询活动
+    if (
+      Activitys.value.length === 0 ||
+      Activitys.value.some(
+        (seckillActivity) => !ids.includes(seckillActivity.id!),
+      )
+    ) {
+      Activitys.value = await SeckillActivityApi.getSeckillActivityListByIds(
+        ids as number[],
+      );
+    }
+  },
+  { immediate: true },
+);
+
+/** 活动表格选择对话框 */
+const seckillActivityTableSelectRef = ref();
+// 打开对话框
+const openSeckillActivityTableSelect = () => {
+  seckillActivityTableSelectRef.value.open(Activitys.value);
+};
+
+/**
+ * 选择活动后触发
+ * @param activityVOs 选中的活动列表
+ */
+const handleActivitySelected = (
+  activityVOs:
+    | MallSeckillActivityApi.SeckillActivity
+    | MallSeckillActivityApi.SeckillActivity[],
+) => {
+  Activitys.value = Array.isArray(activityVOs) ? activityVOs : [activityVOs];
+  emitActivityChange();
+};
+
+/**
+ * 删除活动
+ * @param index 活动索引
+ */
+const handleRemoveActivity = (index: number) => {
+  Activitys.value.splice(index, 1);
+  emitActivityChange();
+};
+const emitActivityChange = () => {
+  if (props.limit === 1) {
+    const seckillActivity =
+      Activitys.value.length > 0 ? Activitys.value[0] : null;
+    emit('update:modelValue', seckillActivity?.id || 0);
+    emit('change', seckillActivity);
+  } else {
+    emit(
+      'update:modelValue',
+      Activitys.value.map((seckillActivity) => seckillActivity.id),
+    );
+    emit('change', Activitys.value);
+  }
+};
+</script>
+<template>
+  <div class="gap-8px flex flex-wrap items-center">
+    <div
+      v-for="(seckillActivity, index) in Activitys"
+      :key="seckillActivity.id"
+      class="select-box spu-pic"
+    >
+      <ElTooltip :content="seckillActivity.name">
+        <div class="relative h-full w-full">
+          <ElImage :src="seckillActivity.picUrl" class="h-full w-full" />
+          <IconifyIcon
+            v-show="!disabled"
+            class="del-icon"
+            icon="ep:circle-close-filled"
+            @click="handleRemoveActivity(index)"
+          />
+        </div>
+      </ElTooltip>
+    </div>
+    <ElTooltip content="选择活动" v-if="canAdd">
+      <div class="select-box" @click="openSeckillActivityTableSelect">
+        <IconifyIcon icon="ep:plus" />
+      </div>
+    </ElTooltip>
+  </div>
+  <!-- 拼团活动选择对话框（表格形式） -->
+  <SeckillTableSelect
+    ref="seckillActivityTableSelectRef"
+    :multiple="limit !== 1"
+    @change="handleActivitySelected"
+  />
+</template>
+
+<style lang="scss" scoped>
+.select-box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 60px;
+  height: 60px;
+  cursor: pointer;
+  border: 1px dashed var(--el-border-color-darker);
+  border-radius: 8px;
+}
+
+.spu-pic {
+  position: relative;
+}
+
+.del-icon {
+  position: absolute;
+  top: -10px;
+  right: -10px;
+  z-index: 1;
+  width: 20px !important;
+  height: 20px !important;
+}
+</style>
diff --git a/apps/web-ele/src/views/mall/promotion/seckill/components/seckill-table-select.vue b/apps/web-ele/src/views/mall/promotion/seckill/components/seckill-table-select.vue
new file mode 100644
index 00000000..881a7ada
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/seckill/components/seckill-table-select.vue
@@ -0,0 +1,385 @@
+<script lang="ts" setup>
+import type { MallSeckillActivityApi } from '#/api/mall/promotion/seckill/seckillActivity';
+
+import { onMounted, ref } from 'vue';
+
+import {
+  dateFormatter,
+  fenToYuan,
+  fenToYuanFormat,
+  formatDate,
+  handleTree,
+} from '@vben/utils';
+
+import { CHANGE_EVENT } from 'element-plus';
+
+import * as ProductCategoryApi from '#/api/mall/product/category';
+import * as SeckillActivityApi from '#/api/mall/promotion/seckill/seckillActivity';
+import { DICT_TYPE, getIntDictOptions } from '#/utils/dict';
+
+/**
+ * 活动表格选择对话框
+ * 1. 单选模式：
+ *    1.1 点击表格左侧的单选框时，结束选择，并关闭对话框
+ *    1.2 再次打开时，保持选中状态
+ * 2. 多选模式：
+ *    2.1 点击表格左侧的多选框时，记录选中的活动
+ *    2.2 切换分页时，保持活动的选中状态
+ *    2.3 点击右下角的确定按钮时，结束选择，关闭对话框
+ *    2.4 再次打开时，保持选中状态
+ */
+defineOptions({ name: 'SeckillTableSelect' });
+
+defineProps({
+  // 多选模式
+  multiple: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+/** 确认选择时的触发事件 */
+const emits = defineEmits<{
+  change: [
+    SeckillActivityApi:
+      | any
+      | MallSeckillActivityApi.SeckillActivity
+      | MallSeckillActivityApi.SeckillActivity[],
+  ];
+}>();
+// 列表的总页数
+const total = ref(0);
+// 列表的数据
+const list = ref<MallSeckillActivityApi.SeckillActivity[]>([]);
+// 列表的加载中
+const loading = ref(false);
+// 弹窗的是否展示
+const dialogVisible = ref(false);
+// 查询参数
+const queryParams = ref({
+  pageNo: 1,
+  pageSize: 10,
+  name: undefined,
+  status: undefined,
+});
+
+/** 打开弹窗 */
+const open = (SeckillList?: MallSeckillActivityApi.SeckillActivity[]) => {
+  // 重置
+  checkedActivitys.value = [];
+  checkedStatus.value = {};
+  isCheckAll.value = false;
+  isIndeterminate.value = false;
+
+  // 处理已选中
+  if (SeckillList && SeckillList.length > 0) {
+    checkedActivitys.value = [...SeckillList];
+    checkedStatus.value = Object.fromEntries(
+      SeckillList.map((activityVO) => [activityVO.id, true]),
+    );
+  }
+
+  dialogVisible.value = true;
+  resetQuery();
+};
+// 提供 open 方法，用于打开弹窗
+defineExpose({ open });
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true;
+  try {
+    const data = await SeckillActivityApi.getSeckillActivityPage(
+      queryParams.value,
+    );
+    list.value = data.list;
+    total.value = data.total;
+    // checkbox绑定undefined会有问题，需要给一个bool值
+    list.value.forEach(
+      (activityVO) =>
+        (checkedStatus.value[activityVO.id || ''] =
+          checkedStatus.value[activityVO.id || ''] || false),
+    );
+    // 计算全选框状态
+    calculateIsCheckAll();
+  } finally {
+    loading.value = false;
+  }
+};
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.value.pageNo = 1;
+  getList();
+};
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryParams.value = {
+    pageNo: 1,
+    pageSize: 10,
+    name: undefined,
+    status: undefined,
+  };
+  getList();
+};
+
+/**
+ * 格式化拼团价格
+ * @param products
+ */
+const formatSeckillPrice = (
+  products: MallSeckillActivityApi.SeckillProduct[],
+) => {
+  const seckillPrice = Math.min(...products.map((item) => item.seckillPrice));
+  return `￥${fenToYuan(seckillPrice)}`;
+};
+
+// 是否全选
+const isCheckAll = ref(false);
+// 全选框是否处于中间状态：不是全部选中 && 任意一个选中
+const isIndeterminate = ref(false);
+// 选中的活动
+const checkedActivitys = ref<MallSeckillActivityApi.SeckillActivity[]>([]);
+// 选中状态：key为活动ID，value为是否选中
+const checkedStatus = ref<Record<string, boolean>>({});
+
+// 选中的活动 activityId
+const selectedActivityId = ref();
+/** 单选中时触发 */
+const handleSingleSelected = (
+  seckillActivityVO: MallSeckillActivityApi.SeckillActivity,
+) => {
+  emits(CHANGE_EVENT, seckillActivityVO);
+  // 关闭弹窗
+  dialogVisible.value = false;
+  // 记住上次选择的ID
+  selectedActivityId.value = seckillActivityVO.id;
+};
+
+/** 多选完成 */
+const handleEmitChange = () => {
+  // 关闭弹窗
+  dialogVisible.value = false;
+  emits(CHANGE_EVENT, [...checkedActivitys.value]);
+};
+
+/** 全选/全不选 */
+const handleCheckAll = (checked: boolean) => {
+  isCheckAll.value = checked;
+  isIndeterminate.value = false;
+
+  list.value.forEach((seckillActivity) =>
+    handleCheckOne(checked, seckillActivity, false),
+  );
+};
+
+/**
+ * 选中一行
+ * @param checked 是否选中
+ * @param seckillActivity 活动
+ * @param isCalcCheckAll 是否计算全选
+ */
+const handleCheckOne = (
+  checked: boolean,
+  seckillActivity: MallSeckillActivityApi.SeckillActivity,
+  isCalcCheckAll: boolean,
+) => {
+  if (checked) {
+    checkedActivitys.value.push(seckillActivity);
+    checkedStatus.value[seckillActivity.id || ''] = true;
+  } else {
+    const index = findCheckedIndex(seckillActivity);
+    if (index > -1) {
+      checkedActivitys.value.splice(index, 1);
+      checkedStatus.value[seckillActivity.id || ''] = false;
+      isCheckAll.value = false;
+    }
+  }
+
+  // 计算全选框状态
+  if (isCalcCheckAll) {
+    calculateIsCheckAll();
+  }
+};
+
+// 查找活动在已选中活动列表中的索引
+const findCheckedIndex = (activityVO: MallSeckillActivityApi.SeckillActivity) =>
+  checkedActivitys.value.findIndex((item) => item.id === activityVO.id);
+
+// 计算全选框状态
+const calculateIsCheckAll = () => {
+  isCheckAll.value = list.value.every(
+    (activityVO) => checkedStatus.value[activityVO.id || ''],
+  );
+  // 计算中间状态：不是全部选中 && 任意一个选中
+  isIndeterminate.value =
+    !isCheckAll.value &&
+    list.value.some((activityVO) => checkedStatus.value[activityVO.id || '']);
+};
+
+// 分类列表
+const categoryList = ref();
+// 分类树
+const categoryTreeList = ref();
+/** 初始化 */
+onMounted(async () => {
+  await getList();
+  // 获得分类树
+  categoryList.value = await ProductCategoryApi.getCategoryList({});
+  categoryTreeList.value = handleTree(categoryList.value, 'id', 'parentId');
+});
+</script>
+
+<template>
+  <Dialog
+    v-model="dialogVisible"
+    :append-to-body="true"
+    title="选择活动"
+    width="70%"
+  >
+    <ContentWrap>
+      <!-- 搜索工作栏 -->
+      <el-form
+        :inline="true"
+        :model="queryParams"
+        class="-mb-15px"
+        label-width="68px"
+      >
+        <el-form-item label="活动名称" prop="name">
+          <el-input
+            v-model="queryParams.name"
+            placeholder="请输入活动名称"
+            clearable
+            @keyup.enter="handleQuery"
+            class="!w-240px"
+          />
+        </el-form-item>
+        <el-form-item label="活动状态" prop="status">
+          <el-select
+            v-model="queryParams.status"
+            placeholder="请选择活动状态"
+            clearable
+            class="!w-240px"
+          >
+            <el-option
+              v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="handleQuery">
+            <Icon class="mr-5px" icon="ep:search" />
+            搜索
+          </el-button>
+          <el-button @click="resetQuery">
+            <Icon class="mr-5px" icon="ep:refresh" />
+            重置
+          </el-button>
+        </el-form-item>
+      </el-form>
+      <el-table v-loading="loading" :data="list" show-overflow-tooltip>
+        <!-- 1. 多选模式（不能使用type="selection"，Element会忽略Header插槽） -->
+        <el-table-column width="55" v-if="multiple">
+          <template #header>
+            <el-checkbox
+              v-model="isCheckAll"
+              :indeterminate="isIndeterminate"
+              @change="handleCheckAll"
+            />
+          </template>
+          <template #default="{ row }">
+            <el-checkbox
+              v-model="checkedStatus[row.id]"
+              @change="(checked: boolean) => handleCheckOne(checked, row, true)"
+            />
+          </template>
+        </el-table-column>
+        <!-- 2. 单选模式 -->
+        <el-table-column label="#" width="55" v-else>
+          <template #default="{ row }">
+            <el-radio
+              :value="row.id"
+              v-model="selectedActivityId"
+              @change="handleSingleSelected(row)"
+            >
+              <!-- 空格不能省略，是为了让单选框不显示label，如果不指定label不会有选中的效果 -->
+              &nbsp;
+            </el-radio>
+          </template>
+        </el-table-column>
+        <el-table-column label="活动编号" prop="id" min-width="80" />
+        <el-table-column label="活动名称" prop="name" min-width="140" />
+        <el-table-column label="活动时间" min-width="210">
+          <template #default="scope">
+            {{ formatDate(scope.row.startTime, 'YYYY-MM-DD') }}
+            ~ {{ formatDate(scope.row.endTime, 'YYYY-MM-DD') }}
+          </template>
+        </el-table-column>
+        <el-table-column label="商品图片" prop="spuName" min-width="80">
+          <template #default="scope">
+            <el-image
+              :src="scope.row.picUrl"
+              class="h-40px w-40px"
+              :preview-src-list="[scope.row.picUrl]"
+              preview-teleported
+            />
+          </template>
+        </el-table-column>
+        <el-table-column label="商品标题" prop="spuName" min-width="300" />
+        <el-table-column
+          label="原价"
+          prop="marketPrice"
+          min-width="100"
+          :formatter="fenToYuanFormat"
+        />
+        <el-table-column label="拼团价" prop="seckillPrice" min-width="100">
+          <template #default="scope">
+            {{ formatSeckillPrice(scope.row.products) }}
+          </template>
+        </el-table-column>
+        <el-table-column label="开团组数" prop="groupCount" min-width="100" />
+        <el-table-column
+          label="成团组数"
+          prop="groupSuccessCount"
+          min-width="100"
+        />
+        <el-table-column label="购买次数" prop="recordCount" min-width="100" />
+        <el-table-column
+          label="活动状态"
+          align="center"
+          prop="status"
+          min-width="100"
+        >
+          <template #default="scope">
+            <dict-tag
+              :type="DICT_TYPE.COMMON_STATUS"
+              :value="scope.row.status"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="创建时间"
+          align="center"
+          prop="createTime"
+          :formatter="dateFormatter"
+          width="180px"
+        />
+      </el-table>
+      <!-- 分页 -->
+      <Pagination
+        v-model:limit="queryParams.pageSize"
+        v-model:page="queryParams.pageNo"
+        :total="total"
+        @pagination="getList"
+      />
+    </ContentWrap>
+    <template #footer v-if="multiple">
+      <el-button type="primary" @click="handleEmitChange">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
diff --git a/apps/web-ele/src/views/mall/statistics/member/components/member-region-card.vue b/apps/web-ele/src/views/mall/statistics/member/components/member-region-card.vue
index 4a29d1e5..9d154932 100644
--- a/apps/web-ele/src/views/mall/statistics/member/components/member-region-card.vue
+++ b/apps/web-ele/src/views/mall/statistics/member/components/member-region-card.vue
@@ -7,7 +7,7 @@ import { onMounted, reactive, ref } from 'vue';
 
 import { AnalysisChartCard } from '@vben/common-ui';
 import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
-import { fenToYuan } from '@vben/utils';
+import { fenToYuan, fenToYuanFormat } from '@vben/utils';
 
 import { ElRow } from 'element-plus';
 
@@ -70,11 +70,6 @@ const getMemberAreaStatisticsList = async () => {
   areaChartOptions.visualMap.max = max;
 };
 
-// 格式化为元
-const fenToYuanFormat = (row: any, column: any, cellValue: any) => {
-  return fenToYuan(cellValue);
-};
-
 onMounted(async () => {
   await getMemberAreaStatisticsList();
   renderEcharts(areaChartOptions);
diff --git a/apps/web-ele/src/views/mall/statistics/product/components/product-rank.vue b/apps/web-ele/src/views/mall/statistics/product/components/product-rank.vue
index 09ba064c..c01ea352 100644
--- a/apps/web-ele/src/views/mall/statistics/product/components/product-rank.vue
+++ b/apps/web-ele/src/views/mall/statistics/product/components/product-rank.vue
@@ -4,7 +4,7 @@ import type { MallProductStatisticsApi } from '#/api/mall/statistics/product';
 import { onMounted, reactive, ref } from 'vue';
 
 import { AnalysisChartCard } from '@vben/common-ui';
-import { buildSortingField, floatToFixed2 } from '@vben/utils';
+import { buildSortingField, fenToYuanFormat } from '@vben/utils';
 
 import * as ProductStatisticsApi from '#/api/mall/statistics/product';
 import ShortcutDateRangePicker from '#/views/mall/home/components/shortcut-date-range-picker.vue';
@@ -52,12 +52,6 @@ const getSpuList = async () => {
   }
 };
 
-// 格式化金额【分转元】
-// @ts-ignore
-const fenToYuanFormat = (_, __, cellValue: any, ___) => {
-  return `￥${floatToFixed2(cellValue)}`;
-};
-
 /** 初始化 */
 onMounted(async () => {
   await getSpuList();
diff --git a/packages/@core/base/shared/src/utils/date.ts b/packages/@core/base/shared/src/utils/date.ts
index 8cc41b41..2f8e68a7 100644
--- a/packages/@core/base/shared/src/utils/date.ts
+++ b/packages/@core/base/shared/src/utils/date.ts
@@ -42,3 +42,14 @@ export function isDate(value: any): value is Date {
 export function isDayjsObject(value: any): value is dayjs.Dayjs {
   return dayjs.isDayjs(value);
 }
+
+/**
+ * element plus 的时间 Formatter 实现，使用 YYYY-MM-DD HH:mm:ss 格式
+ *
+ * @param _row
+ * @param _column
+ * @param cellValue 字段值
+ */
+export function dateFormatter(_row: any, _column: any, cellValue: any): string {
+  return cellValue ? formatDate(cellValue)?.toString() || '' : '';
+}
diff --git a/packages/@core/base/shared/src/utils/formatNumber.ts b/packages/@core/base/shared/src/utils/formatNumber.ts
index 4af124e5..47708112 100644
--- a/packages/@core/base/shared/src/utils/formatNumber.ts
+++ b/packages/@core/base/shared/src/utils/formatNumber.ts
@@ -75,6 +75,11 @@ export function fenToYuan(price: number | string): string {
   return formatToFraction(price);
 }
 
+// 格式化金额【分转元】
+export const fenToYuanFormat = (_: any, __: any, cellValue: any, ___: any) => {
+  return `￥${floatToFixed2(cellValue)}`;
+};
+
 /**
  * 计算环比
  *
diff --git a/packages/@core/base/shared/src/utils/util.ts b/packages/@core/base/shared/src/utils/util.ts
index 6ed9591d..ea7ddbed 100644
--- a/packages/@core/base/shared/src/utils/util.ts
+++ b/packages/@core/base/shared/src/utils/util.ts
@@ -44,11 +44,27 @@ export function getNestedValue<T>(obj: T, path: string): any {
 }
 
 /**
- * 获取 URL 参数值
- * @param key - 参数键
- * @returns 参数值，或者未找到时返回空字符串
+ * 获取链接的参数值（值类型）
+ * @param key 参数键名
+ * @param urlStr 链接地址，默认为当前浏览器的地址
  */
-export function getUrlValue(key: string): string {
-  const url = new URL(decodeURIComponent(location.href));
+export const getUrlNumberValue = (
+  key: string,
+  urlStr: string = location.href,
+): number => {
+  return Number(getUrlValue(key, urlStr));
+};
+
+/**
+ * 获取链接的参数值
+ * @param key 参数键名
+ * @param urlStr 链接地址，默认为当前浏览器的地址
+ */
+export const getUrlValue = (
+  key: string,
+  urlStr: string = location.href,
+): string => {
+  if (!urlStr || !key) return '';
+  const url = new URL(decodeURIComponent(urlStr));
   return url.searchParams.get(key) ?? '';
-}
+};
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c5f4d89f..1870372c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -564,6 +564,9 @@ catalogs:
     vue3-signature:
       specifier: ^0.2.4
       version: 0.2.4
+    vuedraggable:
+      specifier: ^4.1.0
+      version: 4.1.0
     vxe-pc-ui:
       specifier: ^4.7.12
       version: 4.7.16
@@ -879,9 +882,15 @@ importers:
       vue:
         specifier: ^3.5.17
         version: 3.5.17(typescript@5.8.3)
+      vue-dompurify-html:
+        specifier: 'catalog:'
+        version: 5.3.0(vue@3.5.17(typescript@5.8.3))
       vue-router:
         specifier: 'catalog:'
         version: 4.5.1(vue@3.5.17(typescript@5.8.3))
+      vuedraggable:
+        specifier: 'catalog:'
+        version: 4.1.0(vue@3.5.17(typescript@5.8.3))
     devDependencies:
       unplugin-element-plus:
         specifier: 'catalog:'
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 59d65267..40379d90 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -211,3 +211,4 @@ catalog:
   zod-defaults: ^0.1.3
   highlight.js: ^11.11.1
   vue3-signature: ^0.2.4
+  vuedraggable: ^4.1.0