From 1af1a9b2d4e76f96945b52b2c5b2abb2db63449c Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sat, 25 Oct 2025 16:23:44 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E3=80=90ele=E3=80=91=E3=80=90mall?=
 =?UTF-8?q?=E3=80=91=E5=B0=86=20magic-cube-editor=20=E8=BF=81=E7=A7=BB?=
 =?UTF-8?q?=E5=88=B0=20mall/promotion/components=20=E4=B8=AD=EF=BC=8C?=
 =?UTF-8?q?=E8=81=9A=E7=84=A6=E4=B8=80=E7=82=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/mobile/Carousel/property.vue   |  2 +-
 .../components/mobile/Popover/property.vue    |  2 +-
 .../mobile/coupon-card/property.vue           |  2 +-
 .../floating-action-button/property.vue       |  6 +-
 .../components/hot-zone-edit-dialog/index.vue |  2 +-
 .../components/mobile/image-bar/property.vue  |  2 +-
 .../components/mobile/magic-cube/property.vue |  4 +-
 .../components/mobile/menu-grid/property.vue  |  2 +-
 .../components/mobile/menu-list/property.vue  |  6 +-
 .../mobile/menu-swiper/property.vue           |  7 +-
 .../components/cell-property.vue              |  6 +-
 .../components/mobile/notice-bar/property.vue |  2 +-
 .../mobile/page-config/property.vue           |  2 +-
 .../mobile/product-card/property.vue          |  2 +-
 .../mobile/product-list/property.vue          |  2 +-
 .../mobile/promotion-combination/property.vue |  2 +-
 .../mobile/promotion-seckill/property.vue     |  2 +-
 .../components/mobile/tab-bar/property.vue    |  2 +-
 .../components/mobile/title-bar/property.vue  |  6 +-
 .../views/mall/promotion/components/index.ts  |  1 +
 .../components/magic-cube-editor/index.vue    | 72 +++++++++----------
 .../components/magic-cube-editor/util.ts      |  0
 22 files changed, 72 insertions(+), 62 deletions(-)
 rename apps/web-ele/src/{ => views/mall/promotion}/components/magic-cube-editor/index.vue (88%)
 rename apps/web-ele/src/{ => views/mall/promotion}/components/magic-cube-editor/util.ts (100%)

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
index eac8f35e3..789e2642e 100644
--- 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
@@ -16,11 +16,11 @@ import {
   ElTooltip,
 } from 'element-plus';
 
-import { AppLinkInput } from '#/views/mall/promotion/components';
 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';
+import { AppLinkInput } from '#/views/mall/promotion/components';
 
 // 轮播图属性面板
 defineOptions({ name: 'CarouselProperty' });
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
index 771dac6c4..8d7482c1f 100644
--- 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
@@ -10,9 +10,9 @@ import {
   ElTooltip,
 } from 'element-plus';
 
-import { AppLinkInput } from '#/views/mall/promotion/components';
 import Draggable from '#/components/draggable/index.vue';
 import UploadImg from '#/components/upload/image-upload.vue';
+import { AppLinkInput } from '#/views/mall/promotion/components';
 
 // 弹窗广告属性面板
 defineOptions({ name: 'PopoverProperty' });
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
index 839fe46f2..47cc2dc1b 100644
--- 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
@@ -24,9 +24,9 @@ import {
 } from 'element-plus';
 
 import * as CouponTemplateApi from '#/api/mall/promotion/coupon/couponTemplate';
-import { ColorInput } from '#/views/mall/promotion/components';
 import ComponentContainerProperty from '#/components/diy-editor/components/component-container-property.vue';
 import UploadImg from '#/components/upload/image-upload.vue';
+import { ColorInput } from '#/views/mall/promotion/components';
 // TODO: 添加组件
 // import CouponSelect from '#/views/mall/promotion/coupon/components/coupon-select.vue';
 
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
index be999826d..9427d4ac2 100644
--- 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
@@ -11,10 +11,12 @@ import {
   ElSwitch,
 } from 'element-plus';
 
-import { AppLinkInput } from '#/views/mall/promotion/components';
 import Draggable from '#/components/draggable/index.vue';
-import { InputWithColor } from '#/views/mall/promotion/components';
 import UploadImg from '#/components/upload/image-upload.vue';
+import {
+  AppLinkInput,
+  InputWithColor,
+} from '#/views/mall/promotion/components';
 
 // 悬浮按钮属性面板
 defineOptions({ name: 'FloatingActionButtonProperty' });
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
index eaaec6bbc..e520a9586 100644
--- 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
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { ControlDot } from './controller';
 
-import type { AppLink } from '#/views/mall/promotion/components/app-link-input/data';
 import type { HotZoneItemProperty } from '#/components/diy-editor/components/mobile/HotZone/config';
+import type { AppLink } from '#/views/mall/promotion/components/app-link-input/data';
 
 import { ref } from 'vue';
 
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
index 188c3b655..e9f64993f 100644
--- 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
@@ -4,9 +4,9 @@ import type { ImageBarProperty } from './config';
 import { useVModel } from '@vueuse/core';
 import { ElForm, ElFormItem } from 'element-plus';
 
-import { AppLinkInput } from '#/views/mall/promotion/components';
 import ComponentContainerProperty from '#/components/diy-editor/components/component-container-property.vue';
 import UploadImg from '#/components/upload/image-upload.vue';
+import { AppLinkInput } from '#/views/mall/promotion/components';
 
 // 图片展示属性面板
 defineOptions({ name: 'ImageBarProperty' });
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
index 440805930..9e2f60f1c 100644
--- 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
@@ -6,10 +6,10 @@ import { ref } from 'vue';
 import { useVModel } from '@vueuse/core';
 import { ElForm, ElFormItem, ElSlider, ElText } from 'element-plus';
 
-import { AppLinkInput } from '#/views/mall/promotion/components';
 import ComponentContainerProperty from '#/components/diy-editor/components/component-container-property.vue';
-import MagicCubeEditor from '#/components/magic-cube-editor/index.vue';
+import { MagicCubeEditor } from '#/views/mall/promotion/components';
 import UploadImg from '#/components/upload/image-upload.vue';
+import { AppLinkInput } from '#/views/mall/promotion/components';
 
 /** 广告魔方属性面板 */
 defineOptions({ name: 'MagicCubeProperty' });
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
index a0aa00b9d..bcb5ace43 100644
--- 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
@@ -11,10 +11,10 @@ import {
   ElSwitch,
 } from 'element-plus';
 
-import { AppLinkInput } from '#/views/mall/promotion/components';
 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 { AppLinkInput } from '#/views/mall/promotion/components';
 
 import { EMPTY_MENU_GRID_ITEM_PROPERTY } from './config';
 
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
index bedb30a52..81725e454 100644
--- 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
@@ -4,11 +4,13 @@ import type { MenuListProperty } from './config';
 import { useVModel } from '@vueuse/core';
 import { ElForm, ElFormItem, ElText } from 'element-plus';
 
-import { AppLinkInput } from '#/views/mall/promotion/components';
 import ComponentContainerProperty from '#/components/diy-editor/components/component-container-property.vue';
 import Draggable from '#/components/draggable/index.vue';
-import { InputWithColor } from '#/views/mall/promotion/components';
 import UploadImg from '#/components/upload/image-upload.vue';
+import {
+  AppLinkInput,
+  InputWithColor,
+} from '#/views/mall/promotion/components';
 
 import { EMPTY_MENU_LIST_ITEM_PROPERTY } from './config';
 
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
index ac6210be1..a26cdc05e 100644
--- 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
@@ -13,11 +13,14 @@ import {
   ElSwitch,
 } from 'element-plus';
 
-import { AppLinkInput, ColorInput } from '#/views/mall/promotion/components';
 import ComponentContainerProperty from '#/components/diy-editor/components/component-container-property.vue';
 import Draggable from '#/components/draggable/index.vue';
-import { InputWithColor } from '#/views/mall/promotion/components';
 import UploadImg from '#/components/upload/image-upload.vue';
+import {
+  AppLinkInput,
+  ColorInput,
+  InputWithColor,
+} from '#/views/mall/promotion/components';
 
 import { EMPTY_MENU_SWIPER_ITEM_PROPERTY } from './config';
 
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
index 3ea574174..b777f7662 100644
--- 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
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { NavigationBarCellProperty } from '../config';
 
-import type { Rect } from '#/components/magic-cube-editor/util';
+import type { Rect } from '#/views/mall/promotion/components/magic-cube-editor/util';
 
 import { computed, ref } from 'vue';
 
@@ -15,9 +15,9 @@ import {
 } from 'element-plus';
 
 import appNavBarMp from '#/assets/imgs/diy/app-nav-bar-mp.png';
-import { AppLinkInput, ColorInput } from '#/views/mall/promotion/components';
-import MagicCubeEditor from '#/components/magic-cube-editor/index.vue';
+import { MagicCubeEditor } from '#/views/mall/promotion/components';
 import UploadImg from '#/components/upload/image-upload.vue';
+import { AppLinkInput, ColorInput } from '#/views/mall/promotion/components';
 
 // 导航栏属性面板
 defineOptions({ name: 'NavigationBarCellProperty' });
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
index e143fbfac..162df7431 100644
--- 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
@@ -4,10 +4,10 @@ import type { NoticeBarProperty } from './config';
 import { useVModel } from '@vueuse/core';
 import { ElCard, ElForm, ElFormItem, ElInput } from 'element-plus';
 
-import { AppLinkInput, ColorInput } from '#/views/mall/promotion/components';
 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 { AppLinkInput, ColorInput } from '#/views/mall/promotion/components';
 
 // 通知栏属性面板
 defineOptions({ name: 'NoticeBarProperty' });
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
index bfa6be9a9..9d904c0e8 100644
--- 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
@@ -4,8 +4,8 @@ import type { PageConfigProperty } from './config';
 import { useVModel } from '@vueuse/core';
 import { ElForm, ElFormItem, ElInput } from 'element-plus';
 
-import { ColorInput } from '#/views/mall/promotion/components';
 import UploadImg from '#/components/upload/image-upload.vue';
+import { ColorInput } from '#/views/mall/promotion/components';
 
 // 导航栏属性面板
 defineOptions({ name: 'PageConfigProperty' });
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
index 2d138b893..728ae7827 100644
--- 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
@@ -17,8 +17,8 @@ import {
   ElTooltip,
 } from 'element-plus';
 
-import { ColorInput } from '#/views/mall/promotion/components';
 import UploadImg from '#/components/upload/image-upload.vue';
+import { ColorInput } from '#/views/mall/promotion/components';
 // TODO: 添加组件
 // import SpuShowcase from '#/views/mall/product/spu/components/spu-showcase.vue';
 
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
index de99e72bc..ca3b5f95a 100644
--- 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
@@ -16,8 +16,8 @@ import {
 } from 'element-plus';
 
 import ComponentContainerProperty from '#/components/diy-editor/components/component-container-property.vue';
-import { InputWithColor as ColorInput } from '#/views/mall/promotion/components';
 import UploadImg from '#/components/upload/image-upload.vue';
+import { InputWithColor as ColorInput } from '#/views/mall/promotion/components';
 // TODO: 添加组件
 // import SpuShowcase from '#/views/mall/product/spu/components/spu-showcase.vue';
 
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
index b166d63ab..273580f44 100644
--- 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
@@ -20,9 +20,9 @@ import {
 } from 'element-plus';
 
 import * as CombinationActivityApi from '#/api/mall/promotion/combination/combinationActivity';
-import { ColorInput } from '#/views/mall/promotion/components';
 import UploadImg from '#/components/upload/image-upload.vue';
 import CombinationShowcase from '#/views/mall/promotion/combination/components/combination-showcase.vue';
+import { ColorInput } from '#/views/mall/promotion/components';
 
 // 拼团属性面板
 defineOptions({ name: 'PromotionCombinationProperty' });
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
index 51a5108d2..db6bf9b4a 100644
--- 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
@@ -22,8 +22,8 @@ import {
 } from 'element-plus';
 
 import * as SeckillActivityApi from '#/api/mall/promotion/seckill/seckillActivity';
-import { ColorInput } from '#/views/mall/promotion/components';
 import UploadImg from '#/components/upload/image-upload.vue';
+import { ColorInput } from '#/views/mall/promotion/components';
 import SeckillShowcase from '#/views/mall/promotion/seckill/components/seckill-showcase.vue';
 
 // 秒杀属性面板
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
index 9da5b3eb0..d003c665e 100644
--- 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
@@ -15,9 +15,9 @@ import {
   ElText,
 } from 'element-plus';
 
-import { AppLinkInput, ColorInput } from '#/views/mall/promotion/components';
 import Draggable from '#/components/draggable/index.vue';
 import UploadImg from '#/components/upload/image-upload.vue';
+import { AppLinkInput, ColorInput } from '#/views/mall/promotion/components';
 
 import { component, THEME_LIST } from './config';
 // 底部导航栏
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
index a1e4c014e..decb4a6f3 100644
--- 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
@@ -16,10 +16,12 @@ import {
   ElTooltip,
 } from 'element-plus';
 
-import { AppLinkInput } from '#/views/mall/promotion/components';
 import ComponentContainerProperty from '#/components/diy-editor/components/component-container-property.vue';
-import { InputWithColor } from '#/views/mall/promotion/components';
 import UploadImg from '#/components/upload/image-upload.vue';
+import {
+  AppLinkInput,
+  InputWithColor,
+} from '#/views/mall/promotion/components';
 
 // 导航栏属性面板
 defineOptions({ name: 'TitleBarProperty' });
diff --git a/apps/web-ele/src/views/mall/promotion/components/index.ts b/apps/web-ele/src/views/mall/promotion/components/index.ts
index c7a53de09..f5d8dc439 100644
--- a/apps/web-ele/src/views/mall/promotion/components/index.ts
+++ b/apps/web-ele/src/views/mall/promotion/components/index.ts
@@ -1,4 +1,5 @@
 export { default as AppLinkInput } from './app-link-input/index.vue';
 export { default as ColorInput } from './color-input/index.vue';
 export { default as InputWithColor } from './input-with-color/index.vue';
+export { default as MagicCubeEditor } from './magic-cube-editor/index.vue';
 export { default as VerticalButtonGroup } from './vertical-button-group/index.vue';
diff --git a/apps/web-ele/src/components/magic-cube-editor/index.vue b/apps/web-ele/src/views/mall/promotion/components/magic-cube-editor/index.vue
similarity index 88%
rename from apps/web-ele/src/components/magic-cube-editor/index.vue
rename to apps/web-ele/src/views/mall/promotion/components/magic-cube-editor/index.vue
index 809991d95..d260ded9c 100644
--- a/apps/web-ele/src/components/magic-cube-editor/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/components/magic-cube-editor/index.vue
@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-// TODO @芋艿：后续合并到 diy-editor 里，并不是通用的；
 import type { Point, Rect } from './util';
 
 import { ref, watch } from 'vue';
@@ -8,6 +7,7 @@ import { IconifyIcon } from '@vben/icons';
 
 import { createRect, isContains, isOverlap } from './util';
 
+// TODO @AI: 改成标准注释
 // 魔方编辑器
 // 有两部分组成：
 // 1. 魔方矩阵：位于底层，由方块组件的二维表格，用于创建热区
@@ -19,42 +19,38 @@ import { createRect, isContains, isOverlap } from './util';
 // 2. 热区：位于顶层，采用绝对定位，覆盖在魔方矩阵上面。
 defineOptions({ name: 'MagicCubeEditor' });
 
-// 定义属性
+/** 定义属性 */
 const props = defineProps({
-  // 热区列表
   modelValue: {
     type: Array as () => Rect[],
     default: () => [],
-  },
-  // 行数，默认 4 行
+  }, // 热区列表
   rows: {
     type: Number,
     default: 4,
-  },
-  // 列数，默认 4 列
+  }, // 行数，默认 4 行
+
   cols: {
     type: Number,
     default: 4,
-  },
-  // 方块大小，单位px，默认75px
+  }, // 列数，默认 4 列
+
   cubeSize: {
     type: Number,
     default: 75,
-  },
+  }, // 方块大小，单位px，默认75px
 });
 
-// 发送模型更新
-const emit = defineEmits(['update:modelValue', 'hotAreaSelected']);
+const emit = defineEmits(['update:modelValue', 'hotAreaSelected']); // 发送模型更新
 
-/**
- * 方块
- * @property active 是否激活
- */
-type Cube = Point & { active: boolean };
+/** 方块 */
+type Cube = {
+  active: boolean; // 是否激活
+} & Point;
 
-// 魔方矩阵：所有的方块
-const cubes = ref<Cube[][]>([]);
-// 监听行数、列数变化
+const cubes = ref<Cube[][]>([]); // 魔方矩阵：所有的方块
+
+/** 监听行数、列数变化 */
 watch(
   () => [props.rows, props.cols],
   () => {
@@ -73,19 +69,17 @@ watch(
   { immediate: true },
 );
 
-// 热区列表
-const hotAreas = ref<Rect[]>([]);
-// 初始化热区
+const hotAreas = ref<Rect[]>([]); // 热区列表
+/** 初始化热区 */
 watch(
   () => props.modelValue,
   () => (hotAreas.value = props.modelValue || []),
   { immediate: true },
 );
 
-// 热区起始方块
-const hotAreaBeginCube = ref<Cube>();
-// 是否开启了热区选择模式
-const isHotAreaSelectMode = () => !!hotAreaBeginCube.value;
+const hotAreaBeginCube = ref<Cube>(); // 热区起始方块
+const isHotAreaSelectMode = () => !!hotAreaBeginCube.value; // 是否开启了热区选择模式
+
 /**
  * 处理鼠标点击方块
  *
@@ -94,7 +88,9 @@ const isHotAreaSelectMode = () => !!hotAreaBeginCube.value;
  */
 const handleCubeClick = (currentRow: number, currentCol: number) => {
   const currentCube = cubes.value[currentRow]?.[currentCol];
-  if (!currentCube) return;
+  if (!currentCube) {
+    return;
+  }
 
   // 情况1：进入热区选择模式
   if (!isHotAreaSelectMode()) {
@@ -116,6 +112,7 @@ const handleCubeClick = (currentRow: number, currentCol: number) => {
   // 发送热区变动通知
   emitUpdateModelValue();
 };
+
 /**
  * 处理鼠标经过方块
  *
@@ -124,11 +121,15 @@ const handleCubeClick = (currentRow: number, currentCol: number) => {
  */
 const handleCellHover = (currentRow: number, currentCol: number) => {
   // 当前没有进入热区选择模式
-  if (!isHotAreaSelectMode()) return;
+  if (!isHotAreaSelectMode()) {
+    return;
+  }
 
   // 当前已选的区域
   const currentCube = cubes.value[currentRow]?.[currentCol];
-  if (!currentCube) return;
+  if (!currentCube) {
+    return;
+  }
 
   const currentSelectedArea = createRect(hotAreaBeginCube.value!, currentCube);
   // 热区不允许重叠
@@ -147,24 +148,23 @@ const handleCellHover = (currentRow: number, currentCol: number) => {
     cube.active = isContains(currentSelectedArea, cube);
   });
 };
+
 /**
  * 处理热区删除
  *
  * @param index 热区索引
  */
-const handleDeleteHotArea = (index: number) => {
+function handleDeleteHotArea(index: number) {
   hotAreas.value.splice(index, 1);
   // 结束热区选择模式
   exitHotAreaSelectMode();
   // 发送热区变动通知
   emitUpdateModelValue();
-};
+}
 
-// 发送热区变动通知
-const emitUpdateModelValue = () => emit('update:modelValue', hotAreas.value);
+const emitUpdateModelValue = () => emit('update:modelValue', hotAreas.value); // 发送热区变动通知
 
-// 热区选中
-const selectedHotAreaIndex = ref(0);
+const selectedHotAreaIndex = ref(0); // 热区选中
 const handleHotAreaSelected = (hotArea: Rect, index: number) => {
   selectedHotAreaIndex.value = index;
   emit('hotAreaSelected', hotArea, index);
diff --git a/apps/web-ele/src/components/magic-cube-editor/util.ts b/apps/web-ele/src/views/mall/promotion/components/magic-cube-editor/util.ts
similarity index 100%
rename from apps/web-ele/src/components/magic-cube-editor/util.ts
rename to apps/web-ele/src/views/mall/promotion/components/magic-cube-editor/util.ts