feat：【mall】diy editor 的 magic-cube 注释

apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/config.ts

@@ -2,39 +2,26 @@ import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 广告魔方属性 */
 export interface MagicCubeProperty {
-  // 上圆角
+  borderRadiusTop: number; // 上圆角
-  borderRadiusTop: number;
+  borderRadiusBottom: number; // 下圆角
-  // 下圆角
+  space: number; // 间隔
-  borderRadiusBottom: number;
+  list: MagicCubeItemProperty[]; // 导航菜单列表
-  // 间隔
+  style: ComponentStyle; // 组件样式
-  space: number;
-  // 导航菜单列表
-  list: MagicCubeItemProperty[];
-  // 组件样式
-  style: ComponentStyle;
 }
 
 /** 广告魔方项目属性 */
 export interface MagicCubeItemProperty {
-  // 图标链接
+  imgUrl: string; // 图标链接
-  imgUrl: string;
+  url: string; // 链接
-  // 链接
+  width: number; // 宽
-  url: string;
+  height: number; // 高
-  // 宽
+  top: number; // 上
-  width: number;
+  left: number; // 左
-  // 高
+  right: number; // 右
-  height: number;
+  bottom: number; // 下
-  // 上
-  top: number;
-  // 左
-  left: number;
-  // 右
-  right: number;
-  // 下
-  bottom: number;
 }
 
-// 定义组件
+/** 定义组件 */
 export const component = {
   id: 'MagicCube',
   name: '广告魔方',

apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/index.vue

@@ -9,9 +9,11 @@ import { ElImage } from 'element-plus';
 
 /** 广告魔方 */
 defineOptions({ name: 'MagicCube' });
+
 const props = defineProps<{ property: MagicCubeProperty }>();
-// 一个方块的大小
+
-const CUBE_SIZE = 93.75;
+const CUBE_SIZE = 93.75; // 一个方块的大小
+
 /**
  * 计算方块的行数
  * 行数用于计算魔方的总体高度，存在以下情况：
@@ -80,5 +82,3 @@ const rowCount = computed(() => {
     </div>
   </div>
 </template>
-
-<style scoped lang="scss"></style>

apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/magic-cube/property.vue

@@ -18,11 +18,14 @@ import ComponentContainerProperty from '../../component-container-property.vue';
 defineOptions({ name: 'MagicCubeProperty' });
 
 const props = defineProps<{ modelValue: MagicCubeProperty }>();
+
 const emit = defineEmits(['update:modelValue']);
+
 const formData = useVModel(props, 'modelValue', emit);
 
-// 选中的热区
+const selectedHotAreaIndex = ref(-1); // 选中的热区
-const selectedHotAreaIndex = ref(-1);
+
+/** 处理热区被选中事件 */
 const handleHotAreaSelected = (_: any, index: number) => {
   selectedHotAreaIndex.value = index;
 };
@@ -30,7 +33,6 @@ const handleHotAreaSelected = (_: any, index: number) => {
 
 <template>
   <ComponentContainerProperty v-model="formData.style">
-    <!-- 表单 -->
     <ElForm label-width="80px" :model="formData" class="mt-2">
       <ElText tag="p"> 魔方设置 </ElText>
       <ElText type="info" size="small"> 每格尺寸187 * 187 </ElText>
@@ -89,5 +91,3 @@ const handleHotAreaSelected = (_: any, index: number) => {
     </ElForm>
   </ComponentContainerProperty>
 </template>
-
-<style scoped lang="scss"></style>