营销：适配商城装修组件【广告魔方】

src/components/MagicCubeEditor/index.vue

@@ -0,0 +1,270 @@
+<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', { active: cube.active }]"
+            :style="{
+              width: `${cubeSize}px`,
+              height: `${cubeSize}px`
+            }"
+            @click="handleCubeClick(row, col)"
+            @mouseenter="handleCellHover(row, col)"
+          >
+            <Icon icon="ep-plus" />
+          </td>
+        </tr>
+      </tbody>
+      <!-- 顶层：热区 -->
+      <div
+        v-for="(hotArea, index) in hotAreas"
+        :key="index"
+        class="hot-area"
+        :style="{
+          top: `${cubeSize * hotArea.top}px`,
+          left: `${cubeSize * hotArea.left}px`,
+          height: `${cubeSize * hotArea.height}px`,
+          width: `${cubeSize * hotArea.width}px`
+        }"
+        @click="handleHotAreaSelected(hotArea, index)"
+        @mouseover="exitHotAreaSelectMode"
+      >
+        <!-- 右上角热区删除按钮 -->
+        <div
+          v-if="selectedHotAreaIndex === index"
+          class="btn-delete"
+          @click="handleDeleteHotArea(index)"
+        >
+          <Icon icon="ep:circle-close-filled" />
+        </div>
+        {{ `${hotArea.width}×${hotArea.height}` }}
+      </div>
+    </table>
+  </div>
+</template>
+<script lang="ts" setup>
+import { propTypes } from '@/utils/propTypes'
+import * as vueTypes from 'vue-types'
+import { Point, Rect, isContains, isOverlap, createRect } from './util'
+
+// 魔方编辑器
+// 有两部分组成：
+// 1. 魔方矩阵：位于底层，由方块组件的二维表格，用于创建热区
+//    操作方法：
+//    1.1 点击其中一个方块就会进入热区选择模式
+//    1.2 再次点击另外一个方块时，结束热区选择模式
+//    1.3 在两个方块中间的区域创建热区
+//    如果两次点击的都是同一方块，就只创建一个格子的热区
+// 2. 热区：位于顶层，采用绝对定位，覆盖在魔方矩阵上面。
+defineOptions({ name: 'MagicCubeEditor' })
+
+/**
+ * 方块
+ * @property active 是否激活
+ */
+type Cube = Point & { active: boolean }
+
+// 定义属性
+const props = defineProps({
+  // 热区列表
+  modelValue: vueTypes.array<any>().isRequired,
+  // 行数，默认 4 行
+  rows: propTypes.number.def(4),
+  // 列数，默认 4 列
+  cols: propTypes.number.def(4),
+  // 方块大小，单位px，默认75px
+  cubeSize: propTypes.number.def(75)
+})
+
+// 魔方矩阵：所有的方块
+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]
+  // 情况1：进入热区选择模式
+  if (!isHotAreaSelectMode()) {
+    hotAreaBeginCube.value = currentCube
+    hotAreaBeginCube.value.active = true
+    return
+  }
+
+  // 情况2：结束热区选择模式
+  hotAreas.value.push(createRect(hotAreaBeginCube.value!, currentCube))
+  // 结束热区选择模式
+  exitHotAreaSelectMode()
+  // 创建后就选中热区
+  let hotAreaIndex = hotAreas.value.length - 1
+  handleHotAreaSelected(hotAreas.value[hotAreaIndex], hotAreaIndex)
+  // 发送热区变动通知
+  emitUpdateModelValue()
+}
+/**
+ * 处理鼠标经过方块
+ *
+ * @param currentRow 当前行号
+ * @param currentCol 当前列号
+ */
+const handleCellHover = (currentRow: number, currentCol: number) => {
+  // 当前没有进入热区选择模式
+  if (!isHotAreaSelectMode()) return
+
+  // 当前已选的区域
+  const currentSelectedArea = createRect(
+    hotAreaBeginCube.value!,
+    cubes.value[currentRow][currentCol]
+  )
+  // 热区不允许重叠
+  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 emit = defineEmits(['update:modelValue', 'hotAreaSelected'])
+// 发送热区变动通知
+const emitUpdateModelValue = () => emit('update:modelValue', hotAreas)
+
+// 热区选中
+const selectedHotAreaIndex = ref(-1)
+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 (let x = 0; x < cubes.value.length; x++) {
+    for (let y = 0; y < cubes.value[x].length; y++) {
+      callback(x, y, cubes.value[x][y])
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.cube-table {
+  position: relative;
+  border-spacing: 0;
+  border-collapse: collapse;
+
+  .cube {
+    border: 1px solid var(--el-border-color);
+    text-align: center;
+    color: var(--el-text-color-secondary);
+    cursor: pointer;
+    box-sizing: border-box;
+    &.active {
+      background: var(--el-color-primary-light-9);
+    }
+  }
+
+  .hot-area {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid var(--el-color-primary);
+    background: var(--el-color-primary-light-8);
+    color: var(--el-color-primary);
+    box-sizing: border-box;
+    border-spacing: 0;
+    border-collapse: collapse;
+    cursor: pointer;
+
+    .btn-delete {
+      z-index: 1;
+      position: absolute;
+      top: -8px;
+      right: -8px;
+      height: 16px;
+      width: 16px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 50%;
+      background-color: #fff;
+    }
+  }
+}
+</style>

src/components/MagicCubeEditor/util.ts

@@ -0,0 +1,72 @@
+// 坐标点
+export interface Point {
+  x: number
+  y: number
+}
+
+// 矩形
+export interface Rect {
+  // 左上角 X 轴坐标
+  left: number
+  // 左上角 Y 轴坐标
+  top: number
+  // 右下角 X 轴坐标
+  right: number
+  // 右下角 Y 轴坐标
+  bottom: number
+  // 矩形宽度
+  width: number
+  // 矩形高度
+  height: number
+}
+
+/**
+ * 判断两个矩形是否重叠
+ * @param a 矩形 A
+ * @param b 矩形 B
+ */
+export const isOverlap = (a: Rect, b: Rect): boolean => {
+  return (
+    a.left < b.left + b.width &&
+    a.left + a.width > b.left &&
+    a.top < b.top + b.height &&
+    a.height + a.top > b.top
+  )
+}
+/**
+ * 检查坐标点是否在矩形内
+ * @param hotArea 矩形
+ * @param point 坐标
+ */
+export const isContains = (hotArea: Rect, point: Point): boolean => {
+  return (
+    point.x >= hotArea.left &&
+    point.x < hotArea.right &&
+    point.y >= hotArea.top &&
+    point.y < hotArea.bottom
+  )
+}
+
+/**
+ * 在两个坐标点中间，创建一个矩形
+ *
+ * 存在以下情况：
+ * 1. 两个坐标点是同一个位置，只占一个位置的正方形，宽高都为 1
+ * 2. X 轴坐标相同，只占一行的矩形，高度为 1
+ * 3. Y 轴坐标相同，只占一列的矩形，宽度为 1
+ * 4. 多行多列的矩形
+ *
+ * @param a 坐标点一
+ * @param b 坐标点二
+ */
+export const createRect = (a: Point, b: Point): Rect => {
+  // 计算矩形的范围
+  const [left, left2] = [a.x, b.x].sort()
+  const [top, top2] = [a.y, b.y].sort()
+  const right = left2 + 1
+  const bottom = top2 + 1
+  const height = bottom - top
+  const width = right - left
+
+  return { left, right, top, bottom, height, width }
+}