From fde4b7852c9cb073987b87bf75375bb8a94a5ea9 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Mon, 3 Nov 2025 23:53:31 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E3=80=90antd=E3=80=91=E3=80=90mal?=
 =?UTF-8?q?l=E3=80=91diy-editor=20=E7=9A=84=E6=95=B4=E4=BD=93=E7=BB=A7?=
 =?UTF-8?q?=E7=BB=AD=E8=BF=81=E7=A7=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../app-link-input/app-link-select-dialog.vue |  87 ++++++-----
 .../components/app-link-input/index.vue       |  37 +++--
 .../components/color-input/index.vue          |  31 ++--
 .../component-container-property.vue          |  36 +++--
 .../components/component-container.vue        |  40 +----
 .../components/component-library.vue          |   4 +-
 .../components/mobile/search-bar/property.vue | 119 ++++++++++++++-
 .../promotion/components/diy-editor/index.vue | 141 +++++++-----------
 .../promotion/components/draggable/index.vue  |  21 +--
 .../components/input-with-color/index.vue     |  30 ++--
 .../components/magic-cube-editor/index.vue    |  66 ++++----
 .../components/magic-cube-editor/util.ts      |  45 +++---
 12 files changed, 382 insertions(+), 275 deletions(-)

diff --git a/apps/web-antd/src/views/mall/promotion/components/app-link-input/app-link-select-dialog.vue b/apps/web-antd/src/views/mall/promotion/components/app-link-input/app-link-select-dialog.vue
index 2cbd8d12d..4851fca8e 100644
--- a/apps/web-antd/src/views/mall/promotion/components/app-link-input/app-link-select-dialog.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/app-link-input/app-link-select-dialog.vue
@@ -37,9 +37,12 @@ const detailSelectDialog = ref<{
   type: undefined,
 }); // 详情选择对话框
 
-/** 打开弹窗 */
 const dialogVisible = ref(false);
-const open = (link: string) => {
+
+defineExpose({ open });
+
+/** 打开弹窗 */
+async function open(link: string) {
   activeAppLink.value.path = link;
   dialogVisible.value = true;
   // 滚动到当前的链接
@@ -54,19 +57,18 @@ const open = (link: string) => {
   );
   if (group) {
     // 使用 nextTick 的原因：可能 Dom 还没生成，导致滚动失败
-    nextTick(() => handleGroupSelected(group.name));
+    await nextTick();
+    handleGroupSelected(group.name);
   }
-};
-defineExpose({ open });
+}
 
 /** 处理 APP 链接选中 */
-const handleAppLinkSelected = (appLink: AppLink) => {
+function handleAppLinkSelected(appLink: AppLink) {
   if (!isSameLink(appLink.path, activeAppLink.value.path)) {
     activeAppLink.value = appLink;
   }
   switch (appLink.type) {
     case APP_LINK_TYPE_ENUM.PRODUCT_CATEGORY_LIST: {
-      detailSelectDialog.value.visible = true;
       detailSelectDialog.value.type = appLink.type;
       // 返显
       detailSelectDialog.value.id =
@@ -74,26 +76,30 @@ const handleAppLinkSelected = (appLink: AppLink) => {
           'id',
           `http://127.0.0.1${activeAppLink.value.path}`,
         ) || undefined;
+      detailSelectDialog.value.visible = true;
       break;
     }
     default: {
       break;
     }
   }
-};
+}
 
+/** 处理确认提交 */
 function handleSubmit() {
-  dialogVisible.value = false;
   emit('change', activeAppLink.value.path);
   emit('appLinkChange', activeAppLink.value);
+  dialogVisible.value = false;
 }
 
 /**
  * 处理右侧链接列表滚动
+ *
  * @param {object} param0 滚动事件参数
  * @param {number} param0.scrollTop 滚动条的位置
  */
-function handleScroll({ scrollTop }: { scrollTop: number }) {
+function handleScroll(event: Event) {
+  const scrollTop = (event.target as HTMLDivElement).scrollTop;
   const titleEl = groupTitleRefs.value.find((titleEl: HTMLInputElement) => {
     // 获取标题的位置信息
     const { offsetHeight, offsetTop } = titleEl;
@@ -137,47 +143,59 @@ function isSameLink(link1: string, link2: string) {
 
 /** 处理详情选择 */
 function handleProductCategorySelected(id: number) {
-  // TODO @AI：这里有点问题；activeAppLink 地址；
+  // 生成 activeAppLink
   const url = new URL(activeAppLink.value.path, 'http://127.0.0.1');
-  // 修改 id 参数
   url.searchParams.set('id', `${id}`);
-  // 排除域名
   activeAppLink.value.path = `${url.pathname}${url.search}`;
-  // 关闭对话框
+
+  // 关闭对话框，并重置 id
   detailSelectDialog.value.visible = false;
-  // 重置 id
   detailSelectDialog.value.id = undefined;
 }
 </script>
 <template>
-  <Modal v-model:open="dialogVisible" title="选择链接" width="65%">
+  <Modal
+    v-model:open="dialogVisible"
+    title="选择链接"
+    width="65%"
+    @ok="handleSubmit"
+  >
     <div class="flex h-[500px] gap-2">
-      <!-- 左侧分组列表 -->
-      <div class="flex h-full flex-col overflow-y-auto" ref="groupScrollbar">
-        <Button
-          v-for="(group, groupIndex) in APP_LINK_GROUP_LIST"
-          :key="groupIndex"
-          class="mb-1 ml-0 mr-4 w-[90px] justify-start"
-          :class="[{ active: activeGroup === group.name }]"
-          ref="groupBtnRefs"
-          :type="activeGroup === group.name ? 'primary' : 'default'"
-          @click="handleGroupSelected(group.name)"
+      <div class="flex flex-col">
+        <!-- 左侧分组列表 -->
+        <div
+          class="h-full overflow-y-auto border-r border-gray-200 pr-2"
+          ref="groupScrollbar"
         >
-          {{ group.name }}
-        </Button>
+          <Button
+            v-for="(group, groupIndex) in APP_LINK_GROUP_LIST"
+            :key="groupIndex"
+            class="!ml-0 mb-1 mr-4 !justify-start"
+            :class="[{ active: activeGroup === group.name }]"
+            ref="groupBtnRefs"
+            :type="activeGroup === group.name ? 'primary' : 'default'"
+            :ghost="activeGroup !== group.name"
+            @click="handleGroupSelected(group.name)"
+          >
+            {{ group.name }}
+          </Button>
+        </div>
       </div>
       <!-- 右侧链接列表 -->
       <div
-        class="h-full flex-1 overflow-y-auto"
+        class="h-full flex-1 overflow-y-auto pl-2"
         @scroll="handleScroll"
         ref="linkScrollbar"
       >
         <div
           v-for="(group, groupIndex) in APP_LINK_GROUP_LIST"
           :key="groupIndex"
+          class="mb-4 border-b border-gray-100 pb-4 last:mb-0 last:border-b-0"
         >
           <!-- 分组标题 -->
-          <div class="font-bold" ref="groupTitleRefs">{{ group.name }}</div>
+          <div class="mb-2 font-bold" ref="groupTitleRefs">
+            {{ group.name }}
+          </div>
           <!-- 链接列表 -->
           <Tooltip
             v-for="(appLink, appLinkIndex) in group.links"
@@ -201,13 +219,9 @@ function handleProductCategorySelected(id: number) {
         </div>
       </div>
     </div>
-    <!-- 底部对话框操作按钮 -->
-    <template #footer>
-      <Button type="primary" @click="handleSubmit">确 定</Button>
-      <Button @click="dialogVisible = false">取 消</Button>
-    </template>
   </Modal>
-  <Modal v-model:open="detailSelectDialog.visible" title="" width="50%">
+
+  <Modal v-model:open="detailSelectDialog.visible" title="选择分类" width="65%">
     <Form class="min-h-[200px]">
       <FormItem
         label="选择分类"
@@ -224,6 +238,7 @@ function handleProductCategorySelected(id: number) {
     </Form>
   </Modal>
 </template>
+
 <style lang="scss" scoped>
 :deep(.ant-btn + .ant-btn) {
   margin-left: 0 !important;
diff --git a/apps/web-antd/src/views/mall/promotion/components/app-link-input/index.vue b/apps/web-antd/src/views/mall/promotion/components/app-link-input/index.vue
index 8be7cada4..73df4fd15 100644
--- a/apps/web-antd/src/views/mall/promotion/components/app-link-input/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/app-link-input/index.vue
@@ -1,14 +1,14 @@
 <script lang="ts" setup>
 import { ref, watch } from 'vue';
 
-import { Button, Input, InputGroup } from 'ant-design-vue';
+import { Button, Input } from 'ant-design-vue';
 
 import AppLinkSelectDialog from './app-link-select-dialog.vue';
 
 /** APP 链接输入框 */
 defineOptions({ name: 'AppLinkInput' });
 
-// 定义属性
+/** 定义属性 */
 const props = defineProps({
   modelValue: {
     type: String,
@@ -23,8 +23,16 @@ const emit = defineEmits<{
 const dialogRef = ref(); // 选择对话框
 
 const appLink = ref(''); // 当前的链接
-const handleOpenDialog = () => dialogRef.value?.open(appLink.value); // 处理打开对话框
-const handleLinkSelected = (link: string) => (appLink.value = link); // 处理 APP 链接选中
+
+/** 处理打开对话框 */
+function handleOpenDialog() {
+  return dialogRef.value?.open(appLink.value);
+}
+
+/** 处理 APP 链接选中 */
+function handleLinkSelected(link: string) {
+  appLink.value = link;
+}
 
 watch(
   () => props.modelValue,
@@ -38,14 +46,19 @@ watch(
 );
 </script>
 <template>
-  <InputGroup compact>
-    <Input
-      v-model:value="appLink"
-      placeholder="输入或选择链接"
-      class="flex-1"
-    />
-    <Button @click="handleOpenDialog">选择</Button>
-  </InputGroup>
+  <Input v-model:value="appLink" placeholder="输入或选择链接">
+    <template #addonAfter>
+      <Button @click="handleOpenDialog" class="!border-none">选择</Button>
+    </template>
+  </Input>
 
   <AppLinkSelectDialog ref="dialogRef" @change="handleLinkSelected" />
 </template>
+
+<style scoped lang="scss">
+:deep(.ant-input-group-addon) {
+  padding: 0;
+  background: transparent;
+  border: 0;
+}
+</style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/color-input/index.vue b/apps/web-antd/src/views/mall/promotion/components/color-input/index.vue
index 1ce5abf52..d4745a0ed 100644
--- a/apps/web-antd/src/views/mall/promotion/components/color-input/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/color-input/index.vue
@@ -1,9 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
-// import { PREDEFINE_COLORS } from '@vben/constants';
-
-import { Input, InputGroup } from 'ant-design-vue';
+import { Input } from 'ant-design-vue';
 
 /** 颜色输入框 */
 defineOptions({ name: 'ColorInput' });
@@ -28,12 +26,25 @@ const color = computed({
 </script>
 
 <template>
-  <InputGroup compact>
-    <!-- TODO 芋艿：后续在处理，antd 不支持该组件；
-    <ColorPicker v-model:value="color" :presets="PREDEFINE_COLORS" />
-    -->
-    <Input v-model:value="color" class="flex-1" />
-  </InputGroup>
+  <div class="flex gap-2">
+    <input
+      v-model="color"
+      type="color"
+      class="h-8 w-12 cursor-pointer rounded border border-gray-300"
+    />
+    <Input v-model:value="color" class="flex-1" placeholder="请输入颜色值" />
+  </div>
 </template>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+input[type='color'] {
+  &::-webkit-color-swatch-wrapper {
+    padding: 2px;
+  }
+
+  &::-webkit-color-swatch {
+    border: none;
+    border-radius: 2px;
+  }
+}
+</style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-container-property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-container-property.vue
index 10cf7ae2e..4ac5f3b7a 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-container-property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-container-property.vue
@@ -131,13 +131,9 @@ const handleSliderChange = (prop: string) => {
     </TabPane>
 
     <!-- 每个组件的通用内容 -->
-    <TabPane tab="样式" key="style">
+    <TabPane tab="样式" key="style" force-render>
       <Card title="组件样式" class="property-group">
-        <Form
-          :model="formData"
-          label-col="{ span: 6 }"
-          wrapper-col="{ span: 18 }"
-        >
+        <Form :model="formData">
           <FormItem label="组件背景" name="bgType">
             <RadioGroup v-model:value="formData.bgType">
               <Radio value="color">纯色</Radio>
@@ -160,24 +156,22 @@ const handleSliderChange = (prop: string) => {
               <template #tip>建议宽度 750px</template>
             </UploadImg>
           </FormItem>
-          <Tree
-            :tree-data="treeData"
-            :expand-on-click-node="false"
-            default-expand-all
-          >
-            <template #title="{ data, node }">
+          <Tree :tree-data="treeData" default-expand-all>
+            <template #title="{ dataRef }">
               <FormItem
-                :label="data.label"
-                :name="data.prop"
+                :label="dataRef.label"
+                :name="dataRef.prop"
+                :label-col="dataRef.children ? { span: 6 } : { span: 5, offset: 1 }"
+                :wrapper-col="dataRef.children ? { span: 18 } : { span: 18 }"
                 class="mb-0 w-full"
               >
                 <Slider
                   v-model:value="
-                    formData[data.prop as keyof ComponentStyle] as number
+                    formData[dataRef.prop as keyof ComponentStyle] as number
                   "
                   :max="100"
                   :min="0"
-                  @change="handleSliderChange(data.prop)"
+                  @change="handleSliderChange(dataRef.prop)"
                 />
               </FormItem>
             </template>
@@ -197,4 +191,14 @@ const handleSliderChange = (prop: string) => {
 :deep(.ant-input-number) {
   width: 50px;
 }
+
+:deep(.ant-tree) {
+  .ant-tree-node-content-wrapper {
+    flex: 1;
+  }
+
+  .ant-form-item {
+    margin-bottom: 0;
+  }
+}
 </style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-container.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-container.vue
index fc8546957..ebdf462b9 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-container.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-container.vue
@@ -49,9 +49,7 @@ const emits = defineEmits<{
 type DiyComponentWithStyle = DiyComponent<any> & {
   property: { style?: ComponentStyle };
 };
-/**
- * 组件样式
- */
+/** 组件样式 */
 const style = computed(() => {
   const componentStyle = props.component.property.style;
   if (!componentStyle) {
@@ -78,38 +76,27 @@ const style = computed(() => {
   };
 });
 
-/**
- * 移动组件
- * @param direction 移动方向
- */
+/** 移动组件 */
 const handleMoveComponent = (direction: number) => {
   emits('move', direction);
 };
 
-/**
- * 复制组件
- */
+/** 复制组件 */
 const handleCopyComponent = () => {
   emits('copy');
 };
 
-/**
- * 删除组件
- */
+/** 删除组件 */
 const handleDeleteComponent = () => {
   emits('delete');
 };
 </script>
 <template>
-  <div class="component" :class="[{ active }]">
-    <div
-      :style="{
-        ...style,
-      }"
-    >
+  <div class="component relative cursor-move" :class="[{ active }]">
+    <div :style="style">
       <component :is="component.id" :property="component.property" />
     </div>
-    <div class="component-wrap">
+    <div class="component-wrap absolute left-[-2px] top-0 block h-full w-full">
       <!-- 左侧：组件名（悬浮的小贴条） -->
       <div class="component-name" v-if="component.name">
         {{ component.name }}
@@ -158,19 +145,8 @@ $hover-border-width: 1px;
 $name-position: -85px;
 $toolbar-position: -55px;
 
-/* 组件 */
 .component {
-  position: relative;
-  cursor: move;
-
   .component-wrap {
-    position: absolute;
-    top: 0;
-    left: -$active-border-width;
-    display: block;
-    width: 100%;
-    height: 100%;
-
     /* 鼠标放到组件上时 */
     &:hover {
       border: $hover-border-width dashed var(--ant-color-primary);
@@ -236,7 +212,7 @@ $toolbar-position: -55px;
     }
   }
 
-  /* 组件选中时 */
+  /* 选中状态 */
   &.active {
     margin-bottom: 4px;
 
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-library.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-library.vue
index 9c6959f75..80c566079 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-library.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-library.vue
@@ -61,7 +61,7 @@ const handleCloneComponent = (component: DiyComponent<any>) => {
 </script>
 
 <template>
-  <div
+  <aside
     class="editor-left z-[1] w-[261px] shrink-0 select-none shadow-[8px_0_8px_-8px_rgb(0_0_0/0.12)]"
   >
     <div class="h-full overflow-y-auto">
@@ -104,7 +104,7 @@ const handleCloneComponent = (component: DiyComponent<any>) => {
         </CollapsePanel>
       </Collapse>
     </div>
-  </div>
+  </aside>
 </template>
 
 <style scoped lang="scss">
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/property.vue
index 3f479b8c2..3b782b2b7 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/search-bar/property.vue
@@ -1,4 +1,119 @@
 <script setup lang="ts">
-import { Page } from '@vben/common-ui';
+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 {
+  Card,
+  Form,
+  FormItem,
+  Input,
+  RadioButton,
+  RadioGroup,
+  Slider,
+  Switch,
+  Tooltip,
+} from 'ant-design-vue';
+
+import { ColorInput, Draggable } from '#/views/mall/promotion/components';
+
+import ComponentContainerProperty from '../../component-container-property.vue';
+
+/** 搜索框属性面板 */
+defineOptions({ name: 'SearchProperty' });
+
+const props = defineProps<{ modelValue: SearchProperty }>();
+
+const emit = defineEmits(['update:modelValue']);
+
+const formData = useVModel(props, 'modelValue', emit);
+
+/** 监听热词数组变化 */
+watch(
+  () => formData.value.hotKeywords,
+  (newVal) => {
+    // 找到非字符串项的索引
+    const nonStringIndex = newVal.findIndex((item) => !isString(item));
+    if (nonStringIndex !== -1) {
+      formData.value.hotKeywords[nonStringIndex] = '';
+    }
+  },
+  { deep: true, flush: 'post' },
+);
 </script>
-<template><Page>待完成</Page></template>
+
+<template>
+  <ComponentContainerProperty v-model="formData.style">
+    <Form :model="formData">
+      <Card title="搜索热词" class="property-group">
+        <Draggable
+          v-model="formData.hotKeywords"
+          :empty-item="{
+            type: 'input',
+            placeholder: '请输入热词',
+          }"
+        >
+          <template #default="{ index }">
+            <Input
+              v-model:value="formData.hotKeywords[index]"
+              placeholder="请输入热词"
+            />
+          </template>
+        </Draggable>
+      </Card>
+      <Card title="搜索样式" class="property-group">
+        <FormItem label="框体样式">
+          <RadioGroup v-model:value="formData!.borderRadius">
+            <Tooltip title="方形" placement="top">
+              <RadioButton :value="0">
+                <IconifyIcon icon="tabler:input-search" />
+              </RadioButton>
+            </Tooltip>
+            <Tooltip title="圆形" placement="top">
+              <RadioButton :value="10">
+                <IconifyIcon icon="iconoir:input-search" />
+              </RadioButton>
+            </Tooltip>
+          </RadioGroup>
+        </FormItem>
+        <FormItem label="提示文字" name="placeholder">
+          <Input v-model:value="formData.placeholder" />
+        </FormItem>
+        <FormItem label="文本位置" name="placeholderPosition">
+          <RadioGroup v-model:value="formData!.placeholderPosition">
+            <Tooltip title="居左" placement="top">
+              <RadioButton value="left">
+                <IconifyIcon icon="ant-design:align-left-outlined" />
+              </RadioButton>
+            </Tooltip>
+            <Tooltip title="居中" placement="top">
+              <RadioButton value="center">
+                <IconifyIcon icon="ant-design:align-center-outlined" />
+              </RadioButton>
+            </Tooltip>
+          </RadioGroup>
+        </FormItem>
+        <FormItem label="扫一扫" name="showScan">
+          <Switch v-model:checked="formData!.showScan" />
+        </FormItem>
+        <FormItem label="框体高度" name="height">
+          <Slider
+            v-model:value="formData!.height"
+            :max="50"
+            :min="28"
+          />
+        </FormItem>
+        <FormItem label="框体颜色" name="backgroundColor">
+          <ColorInput v-model="formData.backgroundColor" />
+        </FormItem>
+        <FormItem label="文本颜色" name="textColor">
+          <ColorInput v-model="formData.textColor" />
+        </FormItem>
+      </Card>
+    </Form>
+  </ComponentContainerProperty>
+</template>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/index.vue
index ee012ab47..a0a34ae12 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/index.vue
@@ -232,7 +232,6 @@ function handleCopyComponent(index: number) {
 
 /** 删除组件 */
 function handleDeleteComponent(index: number) {
-  // 删除组件
   pageComponents.value.splice(index, 1);
   if (index < pageComponents.value.length) {
     // 1. 不是最后一个组件时，删除后选中下面的组件
@@ -325,7 +324,7 @@ onMounted(() => {
       </div>
 
       <!-- 中心区域 -->
-      <div class="editor-container flex flex-1">
+      <div class="editor-container h-[calc(100vh-135px)]">
         <!-- 左侧：组件库（ComponentLibrary） -->
         <ComponentLibrary
           v-if="libs && libs.length > 0"
@@ -333,11 +332,15 @@ onMounted(() => {
           :list="libs"
         />
         <!-- 中心：设计区域（ComponentContainer） -->
-        <div class="editor-center page-prop-area" @click="handlePageSelected">
+        <div
+          class="editor-center page-prop-area relative mt-4 flex w-full flex-1 flex-col justify-center overflow-hidden"
+          :style="{ backgroundColor: 'var(--app-content-bg-color)' }"
+          @click="handlePageSelected"
+        >
           <!-- 手机顶部 -->
-          <div class="editor-design-top">
+          <div class="editor-design-top mx-auto flex w-[375px] flex-col">
             <!-- 手机顶部状态栏 -->
-            <img alt="" class="status-bar" :src="statusBarImg" />
+            <img alt="" class="h-5 w-[375px] bg-white" :src="statusBarImg" />
             <!-- 手机顶部导航栏 -->
             <ComponentContainer
               v-if="showNavigationBar"
@@ -365,45 +368,46 @@ onMounted(() => {
           </div>
           <!-- 手机页面编辑区域 -->
           <div
-            class="editor-design-center page-prop-area phone-container overflow-y-auto"
+            class="editor-design-center page-prop-area h-full w-full overflow-y-auto"
             :style="{
               backgroundColor: pageConfigComponent.property.backgroundColor,
               backgroundImage: `url(${pageConfigComponent.property.backgroundImage})`,
-              height: 'calc(100vh - 135px - 120px)',
             }"
           >
-            <draggable
-              v-model="pageComponents"
-              :animation="200"
-              :force-fallback="true"
-              class="page-prop-area drag-area"
-              filter=".component-toolbar"
-              ghost-class="draggable-ghost"
-              group="component"
-              item-key="index"
-              @change="handleComponentChange"
-            >
-              <template #item="{ element, index }">
-                <ComponentContainer
-                  v-if="!element.position || element.position === 'center'"
-                  :active="selectedComponentIndex === index"
-                  :can-move-down="index < pageComponents.length - 1"
-                  :can-move-up="index > 0"
-                  :component="element"
-                  @click="handleComponentSelected(element, index)"
-                  @copy="handleCopyComponent(index)"
-                  @delete="handleDeleteComponent(index)"
-                  @move="
-                    (direction: number) => handleMoveComponent(index, direction)
-                  "
-                />
-              </template>
-            </draggable>
+            <div class="phone-container">
+              <draggable
+                v-model="pageComponents"
+                :animation="200"
+                :force-fallback="false"
+                class="page-prop-area drag-area"
+                filter=".component-toolbar"
+                ghost-class="draggable-ghost"
+                group="component"
+                item-key="index"
+                @change="handleComponentChange"
+              >
+                <template #item="{ element, index }">
+                  <ComponentContainer
+                    v-if="!element.position || element.position === 'center'"
+                    :active="selectedComponentIndex === index"
+                    :can-move-down="index < pageComponents.length - 1"
+                    :can-move-up="index > 0"
+                    :component="element"
+                    @click="handleComponentSelected(element, index)"
+                    @copy="handleCopyComponent(index)"
+                    @delete="handleDeleteComponent(index)"
+                    @move="
+                      (direction: number) => handleMoveComponent(index, direction)
+                    "
+                  />
+                </template>
+              </draggable>
+            </div>
           </div>
           <!-- 手机底部导航 -->
           <div
             v-if="showTabBar"
-            class="editor-design-bottom component cursor-pointer"
+            class="editor-design-bottom component mx-auto w-[375px] cursor-pointer"
           >
             <ComponentContainer
               :active="selectedComponent?.id === tabBarComponent.id"
@@ -413,7 +417,9 @@ onMounted(() => {
             />
           </div>
           <!-- 固定布局的组件 操作按钮区 -->
-          <div class="fixed-component-action-group gap-2">
+          <div
+            class="fixed-component-action-group absolute right-4 top-0 flex flex-col gap-2"
+          >
             <Tag
               v-if="showPageConfig"
               :color="
@@ -422,6 +428,7 @@ onMounted(() => {
                   : 'default'
               "
               class="cursor-pointer"
+              size="large"
               @click="handleComponentSelected(pageConfigComponent)"
             >
               <IconifyIcon :icon="pageConfigComponent.icon" :size="12" />
@@ -435,6 +442,7 @@ onMounted(() => {
                 "
                 closable
                 class="cursor-pointer"
+                size="large"
                 @click="handleComponentSelected(component)"
                 @close="handleDeleteComponent(index)"
               >
@@ -445,11 +453,11 @@ onMounted(() => {
           </div>
         </div>
         <!-- 右侧：属性面板（ComponentContainerProperty） -->
-        <div v-if="selectedComponent?.property" class="editor-right w-[350px]">
-          <Card
-            class="h-full"
-            :body-style="{ height: 'calc(100% - 57px)', padding: 0 }"
-          >
+        <aside
+          v-if="selectedComponent?.property"
+          class="editor-right w-[350px] shrink-0 overflow-hidden shadow-[-8px_0_8px_-8px_rgb(0_0_0/0.12)]"
+        >
+          <Card class="h-full" :body-style="{ padding: 0, height: 'calc(100% - 57px)' }">
             <!-- 组件名称 -->
             <template #title>
               <div class="flex items-center gap-2">
@@ -465,7 +473,7 @@ onMounted(() => {
               />
             </div>
           </Card>
-        </div>
+        </aside>
       </div>
     </div>
 
@@ -524,14 +532,10 @@ $phone-width: 375px;
 
   /* 中心操作区 */
   .editor-container {
-    height: calc(100vh - 135px);
+    display: flex;
 
     /* 右侧属性面板 */
     :deep(.editor-right) {
-      flex-shrink: 0;
-      overflow: hidden;
-      box-shadow: -8px 0 8px -8px rgb(0 0 0 / 12%);
-
       /* 属性面板顶部：减少内边距 */
       :deep(.ant-card-head) {
         padding: 8px 16px;
@@ -560,37 +564,6 @@ $phone-width: 375px;
 
     /* 中心区域 */
     .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%;
@@ -613,21 +586,11 @@ $phone-width: 375px;
 
       /* 固定布局的组件 操作按钮区 */
       .fixed-component-action-group {
-        position: absolute;
-        top: 0;
-        right: 16px;
-        display: flex;
-        flex-direction: column;
-
         :deep(.ant-tag) {
-          display: flex;
-          align-items: center;
-          justify-content: flex-start;
-          width: 100%;
           border: none;
           box-shadow: 0 2px 8px 0 rgb(0 0 0 / 10%);
 
-          .anticon {
+          .ant-tag-icon {
             margin-right: 4px;
           }
         }
diff --git a/apps/web-antd/src/views/mall/promotion/components/draggable/index.vue b/apps/web-antd/src/views/mall/promotion/components/draggable/index.vue
index 8bb352329..f4fadae5d 100644
--- a/apps/web-antd/src/views/mall/promotion/components/draggable/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/draggable/index.vue
@@ -45,7 +45,7 @@ const handleDelete = function (index: number) {
 </script>
 
 <template>
-  <div class="text-xs text-gray-500">拖动左上角的小圆点可对其排序</div>
+  <div class="text-sm text-gray-500">拖动左上角的小圆点可对其排序</div>
   <VueDraggable
     :list="formData"
     :force-fallback="true"
@@ -58,21 +58,19 @@ const handleDelete = function (index: number) {
       <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)"
+          class="-m-2 mb-1 flex flex-row items-center justify-between rounded-t p-2"
+          style="background-color: var(--ant-color-bg-container-secondary)"
         >
           <Tooltip title="拖动排序">
             <IconifyIcon
               icon="ic:round-drag-indicator"
-              class="drag-icon cursor-move"
-              style="color: #8a909c"
+              class="drag-icon cursor-move text-gray-500"
             />
           </Tooltip>
-          <Tooltip title="删除">
+          <Tooltip v-if="formData.length > min" title="删除">
             <IconifyIcon
               icon="ep:delete"
-              class="cursor-pointer text-red-500"
-              v-if="formData.length > min"
+              class="cursor-pointer text-red-500 hover:text-red-600"
               @click="handleDelete(index)"
             />
           </Tooltip>
@@ -82,7 +80,7 @@ const handleDelete = function (index: number) {
       </div>
     </template>
   </VueDraggable>
-  <Tooltip :title="limit < 1 ? undefined : `最多添加${limit}个`">
+  <Tooltip :title="limit > 0 && limit < Number.MAX_VALUE ? `最多添加${limit}个` : undefined">
     <Button
       type="primary"
       ghost
@@ -90,7 +88,10 @@ const handleDelete = function (index: number) {
       :disabled="limit > 0 && formData.length >= limit"
       @click="handleAdd"
     >
-      <IconifyIcon icon="ep:plus" /><span>添加</span>
+      <template #icon>
+        <IconifyIcon icon="ep:plus" />
+      </template>
+      添加
     </Button>
   </Tooltip>
 </template>
diff --git a/apps/web-antd/src/views/mall/promotion/components/input-with-color/index.vue b/apps/web-antd/src/views/mall/promotion/components/input-with-color/index.vue
index 25b08a03e..1671318ec 100644
--- a/apps/web-antd/src/views/mall/promotion/components/input-with-color/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/input-with-color/index.vue
@@ -1,8 +1,6 @@
 <script lang="ts" setup>
-// import { PREDEFINE_COLORS } from '@vben/constants';
-
 import { useVModels } from '@vueuse/core';
-import { Input, InputGroup } from 'ant-design-vue';
+import { Input } from 'ant-design-vue';
 
 /** 带颜色选择器输入框 */
 defineOptions({ name: 'InputWithColor' });
@@ -24,11 +22,25 @@ const { modelValue, color } = useVModels(props, emit);
 </script>
 
 <template>
-  <InputGroup compact>
+  <div class="flex gap-2">
     <Input v-model:value="modelValue" v-bind="$attrs" class="flex-1" />
-    <!-- TODO 芋艿：后续在处理，antd 不支持该组件；
-    <ColorPicker v-model:value="color" :presets="PREDEFINE_COLORS" />
-    -->
-  </InputGroup>
+    <input
+      v-model="color"
+      type="color"
+      class="h-8 w-10 cursor-pointer rounded border border-gray-300"
+    />
+  </div>
 </template>
-<style scoped lang="scss"></style>
+
+<style scoped lang="scss">
+input[type='color'] {
+  &::-webkit-color-swatch-wrapper {
+    padding: 2px;
+  }
+
+  &::-webkit-color-swatch {
+    border: none;
+    border-radius: 2px;
+  }
+}
+</style>
diff --git a/apps/web-antd/src/views/mall/promotion/components/magic-cube-editor/index.vue b/apps/web-antd/src/views/mall/promotion/components/magic-cube-editor/index.vue
index d260ded9c..6785a5c48 100644
--- a/apps/web-antd/src/views/mall/promotion/components/magic-cube-editor/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/magic-cube-editor/index.vue
@@ -7,16 +7,16 @@ import { IconifyIcon } from '@vben/icons';
 
 import { createRect, isContains, isOverlap } from './util';
 
-// TODO @AI: 改成标准注释
-// 魔方编辑器
-// 有两部分组成：
-// 1. 魔方矩阵：位于底层，由方块组件的二维表格，用于创建热区
-//    操作方法：
-//    1.1 点击其中一个方块就会进入热区选择模式
-//    1.2 再次点击另外一个方块时，结束热区选择模式
-//    1.3 在两个方块中间的区域创建热区
-//    如果两次点击的都是同一方块，就只创建一个格子的热区
-// 2. 热区：位于顶层，采用绝对定位，覆盖在魔方矩阵上面。
+/**
+ * 魔方编辑器，有两部分组成：
+ *  1. 魔方矩阵：位于底层，由方块组件的二维表格，用于创建热区
+ *    操作方法：
+ *       1.1 点击其中一个方块就会进入热区选择模式
+ *       1.2 再次点击另外一个方块时，结束热区选择模式
+ *       1.3 在两个方块中间的区域创建热区
+ *    如果两次点击的都是同一方块，就只创建一个格子的热区
+ *  2. 热区：位于顶层，采用绝对定位，覆盖在魔方矩阵上面。
+ */
 defineOptions({ name: 'MagicCubeEditor' });
 
 /** 定义属性 */
@@ -34,7 +34,6 @@ const props = defineProps({
     type: Number,
     default: 4,
   }, // 列数，默认 4 列
-
   cubeSize: {
     type: Number,
     default: 75,
@@ -70,6 +69,7 @@ watch(
 );
 
 const hotAreas = ref<Rect[]>([]); // 热区列表
+
 /** 初始化热区 */
 watch(
   () => props.modelValue,
@@ -86,20 +86,20 @@ const isHotAreaSelectMode = () => !!hotAreaBeginCube.value; // 是否开启了
  * @param currentRow 当前行号
  * @param currentCol 当前列号
  */
-const handleCubeClick = (currentRow: number, currentCol: number) => {
+function handleCubeClick(currentRow: number, currentCol: number) {
   const currentCube = cubes.value[currentRow]?.[currentCol];
   if (!currentCube) {
     return;
   }
 
-  // 情况1：进入热区选择模式
+  // 情况 1：进入热区选择模式
   if (!isHotAreaSelectMode()) {
     hotAreaBeginCube.value = currentCube;
     hotAreaBeginCube.value!.active = true;
     return;
   }
 
-  // 情况2：结束热区选择模式
+  // 情况 2：结束热区选择模式
   hotAreas.value.push(createRect(hotAreaBeginCube.value!, currentCube));
   // 结束热区选择模式
   exitHotAreaSelectMode();
@@ -111,7 +111,7 @@ const handleCubeClick = (currentRow: number, currentCol: number) => {
   }
   // 发送热区变动通知
   emitUpdateModelValue();
-};
+}
 
 /**
  * 处理鼠标经过方块
@@ -119,7 +119,7 @@ const handleCubeClick = (currentRow: number, currentCol: number) => {
  * @param currentRow 当前行号
  * @param currentCol 当前列号
  */
-const handleCellHover = (currentRow: number, currentCol: number) => {
+function handleCellHover(currentRow: number, currentCol: number) {
   // 当前没有进入热区选择模式
   if (!isHotAreaSelectMode()) {
     return;
@@ -138,7 +138,6 @@ const handleCellHover = (currentRow: number, currentCol: number) => {
     if (isOverlap(hotArea, currentSelectedArea)) {
       // 结束热区选择模式
       exitHotAreaSelectMode();
-
       return;
     }
   }
@@ -147,13 +146,9 @@ const handleCellHover = (currentRow: number, currentCol: number) => {
   eachCube((_, __, cube) => {
     cube.active = isContains(currentSelectedArea, cube);
   });
-};
+}
 
-/**
- * 处理热区删除
- *
- * @param index 热区索引
- */
+/** 处理热区删除 */
 function handleDeleteHotArea(index: number) {
   hotAreas.value.splice(index, 1);
   // 结束热区选择模式
@@ -165,10 +160,12 @@ function handleDeleteHotArea(index: number) {
 const emitUpdateModelValue = () => emit('update:modelValue', hotAreas.value); // 发送热区变动通知
 
 const selectedHotAreaIndex = ref(0); // 热区选中
-const handleHotAreaSelected = (hotArea: Rect, index: number) => {
+
+/** 处理热区选中 */
+function handleHotAreaSelected(hotArea: Rect, index: number) {
   selectedHotAreaIndex.value = index;
   emit('hotAreaSelected', hotArea, index);
-};
+}
 
 /**
  * 结束热区选择模式
@@ -189,7 +186,7 @@ function exitHotAreaSelectMode() {
  * 迭代魔方矩阵
  * @param callback 回调
  */
-const eachCube = (callback: (x: number, y: number, cube: Cube) => void) => {
+function 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()) {
@@ -198,7 +195,7 @@ const eachCube = (callback: (x: number, y: number, cube: Cube) => void) => {
       }
     }
   }
-};
+}
 </script>
 <template>
   <div class="relative">
@@ -261,13 +258,14 @@ const eachCube = (callback: (x: number, y: number, cube: Cube) => void) => {
 
   .cube {
     box-sizing: border-box;
-    color: var(--el-text-color-secondary);
+    color: var(--ant-color-text-secondary);
     text-align: center;
+    line-height: 1;
     cursor: pointer;
-    border: 1px solid var(--el-border-color);
+    border: 1px solid var(--ant-color-border);
 
     &.active {
-      background: var(--el-color-primary-light-9);
+      background: color-mix(in srgb, var(--ant-color-primary) 10%, transparent);
     }
   }
 
@@ -277,12 +275,12 @@ const eachCube = (callback: (x: number, y: number, cube: Cube) => void) => {
     display: flex;
     align-items: center;
     justify-content: center;
-    color: var(--el-color-primary);
+    color: var(--ant-color-primary);
     cursor: pointer;
     border-spacing: 0;
     border-collapse: collapse;
-    background: var(--el-color-primary-light-8);
-    border: 1px solid var(--el-color-primary);
+    background: color-mix(in srgb, var(--ant-color-primary) 20%, transparent);
+    border: 1px solid var(--ant-color-primary);
 
     .btn-delete {
       position: absolute;
@@ -294,7 +292,7 @@ const eachCube = (callback: (x: number, y: number, cube: Cube) => void) => {
       justify-content: center;
       width: 16px;
       height: 16px;
-      background-color: #fff;
+      background-color: var(--ant-color-bg-container);
       border-radius: 50%;
     }
   }
diff --git a/apps/web-antd/src/views/mall/promotion/components/magic-cube-editor/util.ts b/apps/web-antd/src/views/mall/promotion/components/magic-cube-editor/util.ts
index 1ee8fb5a4..6e3eb7cd2 100644
--- a/apps/web-antd/src/views/mall/promotion/components/magic-cube-editor/util.ts
+++ b/apps/web-antd/src/views/mall/promotion/components/magic-cube-editor/util.ts
@@ -1,51 +1,47 @@
-// 坐标点
+/** 坐标点 */
 export interface Point {
   x: number;
   y: number;
 }
 
-// 矩形
+/** 矩形 */
 export interface Rect {
-  // 左上角 X 轴坐标
-  left: number;
-  // 左上角 Y 轴坐标
-  top: number;
-  // 右下角 X 轴坐标
-  right: number;
-  // 右下角 Y 轴坐标
-  bottom: number;
-  // 矩形宽度
-  width: number;
-  // 矩形高度
-  height: number;
+  left: number; // 左上角 X 轴坐标
+  top: number; // 左上角 Y 轴坐标
+  right: number; // 右下角 X 轴坐标
+  bottom: number; // 右下角 Y 轴坐标
+  width: number; // 矩形宽度
+  height: number; // 矩形高度
 }
 
 /**
  * 判断两个矩形是否重叠
+ *
  * @param a 矩形 A
  * @param b 矩形 B
  */
-export const isOverlap = (a: Rect, b: Rect): boolean => {
+export function isOverlap(a: Rect, b: Rect): boolean {
   return (
     a.left < b.left + b.width &&
     a.left + a.width > b.left &&
     a.top < b.top + b.height &&
     a.height + a.top > b.top
   );
-};
+}
+
 /**
  * 检查坐标点是否在矩形内
  * @param hotArea 矩形
  * @param point 坐标
  */
-export const isContains = (hotArea: Rect, point: Point): boolean => {
+export function isContains(hotArea: Rect, point: Point): boolean {
   return (
     point.x >= hotArea.left &&
     point.x < hotArea.right &&
     point.y >= hotArea.top &&
     point.y < hotArea.bottom
   );
-};
+}
 
 /**
  * 在两个坐标点中间，创建一个矩形
@@ -59,14 +55,17 @@ export const isContains = (hotArea: Rect, point: Point): boolean => {
  * @param a 坐标点一
  * @param b 坐标点二
  */
-export const createRect = (a: Point, b: Point): Rect => {
+export function createRect(a: Point, b: Point): Rect {
   // 计算矩形的范围
-  const [left, left2] = [a.x, b.x].sort();
-  const [top, top2] = [a.y, b.y].sort();
+  let [left, left2] = [a.x, b.x].sort();
+  left = left ?? 0;
+  left2 = left2 ?? 0;
+  let [top, top2] = [a.y, b.y].sort();
+  top = top ?? 0;
+  top2 = top2 ?? 0;
   const right = left2 + 1;
   const bottom = top2 + 1;
   const height = bottom - top;
   const width = right - left;
-
   return { left, right, top, bottom, height, width };
-};
+}