diff --git a/apps/web-ele/src/views/mall/promotion/components/magic-cube-editor/index.vue b/apps/web-ele/src/views/mall/promotion/components/magic-cube-editor/index.vue index d260ded9c..0e30219f3 100644 --- a/apps/web-ele/src/views/mall/promotion/components/magic-cube-editor/index.vue +++ b/apps/web-ele/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' }); /** 定义属性 */ @@ -29,12 +29,10 @@ const props = defineProps({ type: Number, default: 4, }, // 行数，默认 4 行 - cols: { type: Number, default: 4, }, // 列数，默认 4 列 - cubeSize: { type: Number, default: 75, @@ -70,6 +68,7 @@ watch( ); const hotAreas = ref([]); // 热区列表 + /** 初始化热区 */ watch( () => props.modelValue, @@ -86,20 +85,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 +110,7 @@ const handleCubeClick = (currentRow: number, currentCol: number) => { } // 发送热区变动通知 emitUpdateModelValue(); -}; +} /** * 处理鼠标经过方块 @@ -119,7 +118,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 +137,6 @@ const handleCellHover = (currentRow: number, currentCol: number) => { if (isOverlap(hotArea, currentSelectedArea)) { // 结束热区选择模式 exitHotAreaSelectMode(); - return; } } @@ -147,13 +145,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,14 +159,14 @@ 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); -}; +} -/** - * 结束热区选择模式 - */ +/** 结束热区选择模式 */ function exitHotAreaSelectMode() { // 移除方块激活标记 eachCube((_, __, cube) => { @@ -246,9 +240,9 @@ const eachCube = (callback: (x: number, y: number, cube: Cube) => void) => { > - {{ - `${hotArea.width}×${hotArea.height}` - }} + + {{ `${hotArea.width}×${hotArea.height}`}} + diff --git a/apps/web-ele/src/views/mall/promotion/components/magic-cube-editor/util.ts b/apps/web-ele/src/views/mall/promotion/components/magic-cube-editor/util.ts index 1ee8fb5a4..152ce0cbe 100644 --- a/apps/web-ele/src/views/mall/promotion/components/magic-cube-editor/util.ts +++ b/apps/web-ele/src/views/mall/promotion/components/magic-cube-editor/util.ts @@ -1,52 +1,49 @@ -// 坐标点 +/** 坐标点 */ 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 ); -}; +} +// TODO @AI：linter 修复 /** * 在两个坐标点中间，创建一个矩形 * @@ -59,7 +56,7 @@ 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(); @@ -67,6 +64,5 @@ export const createRect = (a: Point, b: Point): Rect => { const bottom = top2 + 1; const height = bottom - top; const width = right - left; - return { left, right, top, bottom, height, width }; -}; +}