feat：【ele】【mall】将 magic-cube-editor 迁移到 mall/promotion/components 中，聚焦一点

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' });

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' });

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';
 

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' });

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';
 

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' });

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' });

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';
 

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';
 

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';
 

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 '#/views/mall/promotion/components';
-import MagicCubeEditor from '#/components/magic-cube-editor/index.vue';
 import UploadImg from '#/components/upload/image-upload.vue';
+import { AppLinkInput, ColorInput } from '#/views/mall/promotion/components';
 
 // 导航栏属性面板
 defineOptions({ name: 'NavigationBarCellProperty' });

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' });

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' });

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';
 

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';
 

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' });

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';
 
 // 秒杀属性面板

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';
 // 底部导航栏

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' });

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';

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,
-  },
+  }, // 列数，默认 4 列
-  // 方块大小，单位px，默认75px
+
   cubeSize: {
     type: Number,
     default: 75,
-  },
+  }, // 方块大小，单位px，默认75px
 });
 
-// 发送模型更新
+const emit = defineEmits(['update:modelValue', 'hotAreaSelected']); // 发送模型更新
-const emit = defineEmits(['update:modelValue', 'hotAreaSelected']);
 
-/**
+/** 方块 */
- * 方块
+type Cube = {
- * @property active 是否激活
+  active: boolean; // 是否激活
- */
+} & Point;
-type Cube = Point & { active: boolean };
 
-// 魔方矩阵：所有的方块
+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 hotAreaBeginCube = ref<Cube>();
+const isHotAreaSelectMode = () => !!hotAreaBeginCube.value; // 是否开启了热区选择模式
-// 是否开启了热区选择模式
+
-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);