feat：【mall】diy editor 的 popover 优化

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

@@ -2,19 +2,17 @@ import type { DiyComponent } from '../../../util';
 
 /** 弹窗广告属性 */
 export interface PopoverProperty {
-  list: PopoverItemProperty[];
+  list: PopoverItemProperty[]; // 弹窗列表
 }
 
+/** 弹窗广告项目属性 */
 export interface PopoverItemProperty {
-  // 图片地址
+  imgUrl: string; // 图片地址
-  imgUrl: string;
+  url: string; // 跳转连接
-  // 跳转连接
+  showType: 'always' | 'once'; // 显示类型：仅显示一次、每次启动都会显示
-  url: string;
-  // 显示类型：仅显示一次、每次启动都会显示
-  showType: 'always' | 'once';
 }
 
-// 定义组件
+/** 定义组件 */
 export const component = {
   id: 'Popover',
   name: '弹窗广告',

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

@@ -9,18 +9,20 @@ import { ElImage } from 'element-plus';
 
 /** 弹窗广告 */
 defineOptions({ name: 'Popover' });
-// 定义属性
-defineProps<{ property: PopoverProperty }>();
 
-// 处理选中
+const props = defineProps<{ property: PopoverProperty }>();
-const activeIndex = ref(0);
+
-const handleActive = (index: number) => {
+const activeIndex = ref(0); // 选中 index
+
+/** 处理选中 */
+function handleActive(index: number) {
   activeIndex.value = index;
-};
+}
 </script>
+
 <template>
   <div
-    v-for="(item, index) in property.list"
+    v-for="(item, index) in props.property.list"
     :key="index"
     class="absolute bottom-1/2 right-1/2 h-[454px] w-[292px] rounded border border-gray-300 bg-white p-0.5"
     :style="{
@@ -40,5 +42,3 @@ const handleActive = (index: number) => {
     <div class="absolute right-1 top-1 text-xs">{{ index + 1 }}</div>
   </div>
 </template>
-
-<style scoped lang="scss"></style>

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

@@ -13,11 +13,13 @@ import {
 import UploadImg from '#/components/upload/image-upload.vue';
 import { AppLinkInput, Draggable } from '#/views/mall/promotion/components';
 
-// 弹窗广告属性面板
+/** 弹窗广告属性面板 */
 defineOptions({ name: 'PopoverProperty' });
 
 const props = defineProps<{ modelValue: PopoverProperty }>();
+
 const emit = defineEmits(['update:modelValue']);
+
 const formData = useVModel(props, 'modelValue', emit);
 </script>
 
@@ -53,5 +55,3 @@ const formData = useVModel(props, 'modelValue', emit);
     </Draggable>
   </ElForm>
 </template>
-
-<style scoped lang="scss"></style>