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

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/components/magic-cube-editor/index.vue

@@ -1,302 +0,0 @@
-<script lang="ts" setup>
-// TODO @芋艿：后续合并到 diy-editor 里，并不是通用的；
-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)"
-          >
-            <IconifyIcon icon="ep-plus" />
-          </td>
-        </tr>
-      </tbody>
-      <!-- 顶层：热区 -->
-      <div
-        v-for="(hotArea, index) in hotAreas"
-        :key="index"
-        class="hot-area"
-        :style="{
-          top: `${cubeSize * hotArea.top}px`,
-          left: `${cubeSize * hotArea.left}px`,
-          height: `${cubeSize * hotArea.height}px`,
-          width: `${cubeSize * hotArea.width}px`,
-        }"
-        @click="handleHotAreaSelected(hotArea, index)"
-        @mouseover="exitHotAreaSelectMode"
-      >
-        <!-- 右上角热区删除按钮 -->
-        <div
-          v-if="
-            selectedHotAreaIndex === index && hotArea.width && hotArea.height
-          "
-          class="btn-delete"
-          @click="handleDeleteHotArea(index)"
-        >
-          <IconifyIcon icon="ep:circle-close-filled" />
-        </div>
-        <span v-if="hotArea.width">{{
-          `${hotArea.width}×${hotArea.height}`
-        }}</span>
-      </div>
-    </table>
-  </div>
-</template>
-<style lang="scss" scoped>
-.cube-table {
-  position: relative;
-  border-spacing: 0;
-  border-collapse: collapse;
-
-  .cube {
-    box-sizing: border-box;
-    color: var(--el-text-color-secondary);
-    text-align: center;
-    cursor: pointer;
-    border: 1px solid var(--el-border-color);
-
-    &.active {
-      background: var(--el-color-primary-light-9);
-    }
-  }
-
-  .hot-area {
-    position: absolute;
-    box-sizing: border-box;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: var(--el-color-primary);
-    cursor: pointer;
-    border-spacing: 0;
-    border-collapse: collapse;
-    background: var(--el-color-primary-light-8);
-    border: 1px solid var(--el-color-primary);
-
-    .btn-delete {
-      position: absolute;
-      top: -8px;
-      right: -8px;
-      z-index: 1;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 16px;
-      height: 16px;
-      background-color: #fff;
-      border-radius: 50%;
-    }
-  }
-}
-</style>

apps/web-ele/src/components/magic-cube-editor/util.ts

@@ -1,72 +0,0 @@
-// 坐标点
-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 };
-};