smart-flow/yudao-ui-admin-vben
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
YunaiV
2025-10-25 16:23:44 +08:00
parent d550ef626c
commit 1af1a9b2d4
22 changed files with 72 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/web-ele/src/components/diy-editor/components/mobile/Carousel/property.vue
View File

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

2
apps/web-ele/src/components/diy-editor/components/mobile/Popover/property.vue
View File

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

2
apps/web-ele/src/components/diy-editor/components/mobile/coupon-card/property.vue
View File

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

6
apps/web-ele/src/components/diy-editor/components/mobile/floating-action-button/property.vue
View File

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

2
apps/web-ele/src/components/diy-editor/components/mobile/hot-zone/components/hot-zone-edit-dialog/index.vue
View File

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

2
apps/web-ele/src/components/diy-editor/components/mobile/image-bar/property.vue
View File

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

4
apps/web-ele/src/components/diy-editor/components/mobile/magic-cube/property.vue
View File

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

2
apps/web-ele/src/components/diy-editor/components/mobile/menu-grid/property.vue
View File

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

6
apps/web-ele/src/components/diy-editor/components/mobile/menu-list/property.vue
View File

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

7
apps/web-ele/src/components/diy-editor/components/mobile/menu-swiper/property.vue
View File

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

6
apps/web-ele/src/components/diy-editor/components/mobile/navigation-bar/components/cell-property.vue
View File

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

2
apps/web-ele/src/components/diy-editor/components/mobile/notice-bar/property.vue
View File

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

2
apps/web-ele/src/components/diy-editor/components/mobile/page-config/property.vue
View File

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

2
apps/web-ele/src/components/diy-editor/components/mobile/product-card/property.vue
View File

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

2
apps/web-ele/src/components/diy-editor/components/mobile/product-list/property.vue
View File

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

2
apps/web-ele/src/components/diy-editor/components/mobile/promotion-combination/property.vue
View File

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

2
apps/web-ele/src/components/diy-editor/components/mobile/promotion-seckill/property.vue
View File

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

2
apps/web-ele/src/components/diy-editor/components/mobile/tab-bar/property.vue
View File

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

6
apps/web-ele/src/components/diy-editor/components/mobile/title-bar/property.vue
View File

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

1
apps/web-ele/src/views/mall/promotion/components/index.ts
View File

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

72
apps/web-ele/src/components/magic-cube-editor/index.vue → apps/web-ele/src/views/mall/promotion/components/magic-cube-editor/index.vue
View File

@@ -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);

0
apps/web-ele/src/components/magic-cube-editor/util.ts → apps/web-ele/src/views/mall/promotion/components/magic-cube-editor/util.ts
View File