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

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

@@ -4,41 +4,28 @@ import { cloneDeep } from '@vben/utils';
 
 /** 宫格导航属性 */
 export interface MenuGridProperty {
-  // 列数
+  column: number; // 列数
-  column: number;
+  list: MenuGridItemProperty[]; // 导航菜单列表
-  // 导航菜单列表
+  style: ComponentStyle; // 组件样式
-  list: MenuGridItemProperty[];
-  // 组件样式
-  style: ComponentStyle;
 }
 
 /** 宫格导航项目属性 */
 export interface MenuGridItemProperty {
-  // 图标链接
+  iconUrl: string; // 图标链接
-  iconUrl: string;
+  title: string; // 标题
-  // 标题
+  titleColor: string; // 标题颜色
-  title: string;
+  subtitle: string; // 副标题
-  // 标题颜色
+  subtitleColor: string; // 副标题颜色
-  titleColor: string;
+  url: string; // 链接
-  // 副标题
-  subtitle: string;
-  // 副标题颜色
-  subtitleColor: string;
-  // 链接
-  url: string;
-  // 角标
   badge: {
-    // 角标背景颜色
+    bgColor: string; // 角标背景颜色
-    bgColor: string;
+    show: boolean; // 是否显示
-    // 是否显示
+    text: string; // 角标文字
-    show: boolean;
+    textColor: string; // 角标文字颜色
-    // 角标文字
-    text: string;
-    // 角标文字颜色
-    textColor: string;
   };
 }
 
+/** 宫格导航项目默认属性 */
 export const EMPTY_MENU_GRID_ITEM_PROPERTY = {
   title: '标题',
   titleColor: '#333',
@@ -51,7 +38,7 @@ export const EMPTY_MENU_GRID_ITEM_PROPERTY = {
   },
 } as MenuGridItemProperty;
 
-// 定义组件
+/** 定义组件 */
 export const component = {
   id: 'MenuGrid',
   name: '宫格导航',

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

@@ -5,6 +5,7 @@ import { ElImage } from 'element-plus';
 
 /** 宫格导航 */
 defineOptions({ name: 'MenuGrid' });
+
 defineProps<{ property: MenuGridProperty }>();
 </script>
 
@@ -16,7 +17,6 @@ defineProps<{ property: MenuGridProperty }>();
       class="relative flex flex-col items-center pb-3.5 pt-5"
       :style="{ width: `${100 * (1 / property.column)}%` }"
     >
-      <!-- 右上角角标 -->
       <span
         v-if="item.badge?.show"
         class="absolute left-1/2 top-2.5 z-10 h-5 rounded-full px-1.5 text-center text-xs leading-5"
@@ -43,5 +43,3 @@ defineProps<{ property: MenuGridProperty }>();
     </div>
   </div>
 </template>
-
-<style scoped lang="scss"></style>

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

@@ -12,7 +12,12 @@ import {
 } from 'element-plus';
 
 import UploadImg from '#/components/upload/image-upload.vue';
-import { AppLinkInput, Draggable } from '#/views/mall/promotion/components';
+import {
+  AppLinkInput,
+  ColorInput,
+  Draggable,
+  InputWithColor,
+} from '#/views/mall/promotion/components';
 
 import ComponentContainerProperty from '../../component-container-property.vue';
 import { EMPTY_MENU_GRID_ITEM_PROPERTY } from './config';
@@ -21,7 +26,9 @@ import { EMPTY_MENU_GRID_ITEM_PROPERTY } from './config';
 defineOptions({ name: 'MenuGridProperty' });
 
 const props = defineProps<{ modelValue: MenuGridProperty }>();
+
 const emit = defineEmits(['update:modelValue']);
+
 const formData = useVModel(props, 'modelValue', emit);
 </script>
 
@@ -35,7 +42,6 @@ const formData = useVModel(props, 'modelValue', emit);
           <ElRadio :value="4">4个</ElRadio>
         </ElRadioGroup>
       </ElFormItem>
-
       <ElCard header="菜单设置" class="property-group" shadow="never">
         <Draggable
           v-model="formData.list"
@@ -87,5 +93,3 @@ const formData = useVModel(props, 'modelValue', emit);
     </ElForm>
   </ComponentContainerProperty>
 </template>
-
-<style scoped lang="scss"></style>