feat：【mall】diy editor 的 menu-list 优化

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

@@ -4,28 +4,21 @@ import { cloneDeep } from '@vben/utils';
 
 /** 列表导航属性 */
 export interface MenuListProperty {
-  // 导航菜单列表
+  list: MenuListItemProperty[]; // 导航菜单列表
-  list: MenuListItemProperty[];
+  style: ComponentStyle; // 组件样式
-  // 组件样式
-  style: ComponentStyle;
 }
 
 /** 列表导航项目属性 */
 export interface MenuListItemProperty {
-  // 图标链接
+  iconUrl: string; // 图标链接
-  iconUrl: string;
+  title: string; // 标题
-  // 标题
+  titleColor: string; // 标题颜色
-  title: string;
+  subtitle: string; // 副标题
-  // 标题颜色
+  subtitleColor: string; // 副标题颜色
-  titleColor: string;
+  url: string; // 链接
-  // 副标题
-  subtitle: string;
-  // 副标题颜色
-  subtitleColor: string;
-  // 链接
-  url: string;
 }
 
+/** 空的列表导航项目属性 */
 export const EMPTY_MENU_LIST_ITEM_PROPERTY = {
   title: '标题',
   titleColor: '#333',
@@ -33,7 +26,7 @@ export const EMPTY_MENU_LIST_ITEM_PROPERTY = {
   subtitleColor: '#bbb',
 };
 
-// 定义组件
+/** 定义组件 */
 export const component = {
   id: 'MenuList',
   name: '列表导航',

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

@@ -7,6 +7,7 @@ import { ElImage } from 'element-plus';
 
 /** 列表导航 */
 defineOptions({ name: 'MenuList' });
+
 defineProps<{ property: MenuListProperty }>();
 </script>
 
@@ -19,14 +20,14 @@ defineProps<{ property: MenuListProperty }>();
     >
       <div class="flex flex-1 flex-row items-center gap-2">
         <ElImage v-if="item.iconUrl" class="h-4 w-4" :src="item.iconUrl" />
-        <span class="text-base" :style="{ color: item.titleColor }">{{
+        <span class="text-base" :style="{ color: item.titleColor }">
-          item.title
+          {{ item.title }}
-        }}</span>
+        </span>
       </div>
       <div class="item-center flex flex-row justify-center gap-1">
-        <span class="text-xs" :style="{ color: item.subtitleColor }">{{
+        <span class="text-xs" :style="{ color: item.subtitleColor }">
-          item.subtitle
+          {{ item.subtitle }}
-        }}</span>
+        </span>
         <IconifyIcon icon="ep:arrow-right" color="#000" :size="16" />
       </div>
     </div>

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

@@ -18,7 +18,9 @@ import { EMPTY_MENU_LIST_ITEM_PROPERTY } from './config';
 defineOptions({ name: 'MenuListProperty' });
 
 const props = defineProps<{ modelValue: MenuListProperty }>();
+
 const emit = defineEmits(['update:modelValue']);
+
 const formData = useVModel(props, 'modelValue', emit);
 </script>
 
@@ -26,8 +28,6 @@ const formData = useVModel(props, 'modelValue', emit);
   <ComponentContainerProperty v-model="formData.style">
     <ElText tag="p"> 菜单设置 </ElText>
     <ElText type="info" size="small"> 拖动左侧的小圆点可以调整顺序 </ElText>
-
-    <!-- 表单 -->
     <ElForm label-width="60px" :model="formData" class="mt-2">
       <Draggable
         v-model="formData.list"
@@ -64,5 +64,3 @@ const formData = useVModel(props, 'modelValue', emit);
     </ElForm>
   </ComponentContainerProperty>
 </template>
-
-<style scoped lang="scss"></style>