feat：【mall】diy editor 的 image-bar

apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/index.ts

@@ -1,32 +1,25 @@
-import { defineAsyncComponent } from 'vue';
-
-/*
+/**
  * 组件注册
  *
- * 组件规范：
- * 1. 每个子目录就是一个独立的组件，每个目录包括以下三个文件：
- * 2. config.ts：组件配置，必选，用于定义组件、组件默认的属性、定义属性的类型
- * 3. index.vue：组件展示，用于展示组件的渲染效果。可以不提供，如 Page（页面设置），只需要属性配置表单即可
- * 4. property.vue：组件属性表单，用于配置组件，必选，
+ * 组件规范：每个子目录就是一个独立的组件，每个目录包括以下三个文件：
+ *  1. config.ts：组件配置，必选，用于定义组件、组件默认的属性、定义属性的类型
+ *  2. index.vue：组件展示，用于展示组件的渲染效果。可以不提供，如 Page（页面设置），只需要属性配置表单即可
+ *  3. property.vue：组件属性表单，用于配置组件，必选，
  *
  * 注：
- * 组件ID以config.ts中配置的id为准，与组件目录的名称无关，但还是建议组件目录的名称与组件ID保持一致
+ * 组件 ID 以 config.ts 中配置的 id 为准，与组件目录的名称无关，但还是建议组件目录的名称与组件 ID 保持一致
  */
+import { defineAsyncComponent } from 'vue';
 
-// 导入组件界面模块
-const viewModules: Record<string, any> = import.meta.glob('./*/*.vue');
-// 导入配置模块
+const viewModules: Record<string, any> = import.meta.glob('./*/*.vue'); // 导入组件界面模块
 const configModules: Record<string, any> = import.meta.glob('./*/config.ts', {
   eager: true,
-});
+}); // 导入配置模块
 
-// 界面模块
-const components: Record<string, any> = {};
-// 组件配置模块
-const componentConfigs: Record<string, any> = {};
+const components: Record<string, any> = {}; // 界面模块
+const componentConfigs: Record<string, any> = {}; // 组件配置模块
 
-// 组件界面的类型
-type ViewType = 'index' | 'property';
+type ViewType = 'index' | 'property'; // 组件界面的类型
 
 /**
  * 注册组件的界面模块

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

@@ -2,15 +2,12 @@ import type { ComponentStyle, DiyComponent } from '../../../util';
 
 /** 图片展示属性 */
 export interface ImageBarProperty {
-  // 图片链接
-  imgUrl: string;
-  // 跳转链接
-  url: string;
-  // 组件样式
-  style: ComponentStyle;
+  imgUrl: string; // 图片链接
+  url: string; // 跳转链接
+  style: ComponentStyle; // 组件样式
 }
 
-// 定义组件
+/** 定义组件 */
 export const component = {
   id: 'ImageBar',
   name: '图片展示',

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

@@ -11,21 +11,11 @@ defineOptions({ name: 'ImageBar' });
 defineProps<{ property: ImageBarProperty }>();
 </script>
 <template>
-  <!-- 无图片 -->
   <div
     class="flex h-12 items-center justify-center bg-gray-300"
     v-if="!property.imgUrl"
   >
     <IconifyIcon icon="ep:picture" class="text-3xl text-gray-600" />
   </div>
-  <ElImage class="min-h-8" v-else :src="property.imgUrl" />
+  <ElImage v-else class="block w-full h-full" :src="property.imgUrl" />
 </template>
-
-<style scoped lang="scss">
-/* 图片 */
-img {
-  display: block;
-  width: 100%;
-  height: 100%;
-}
-</style>

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

@@ -4,12 +4,12 @@ import type { ImageBarProperty } from './config';
 import { useVModel } from '@vueuse/core';
 import { ElForm, ElFormItem } from 'element-plus';
 
-import UploadImg from '#/components/upload/image-upload.vue';
+import { ImageUpload } from '#/components/upload/';
 import { AppLinkInput } from '#/views/mall/promotion/components';
 
 import ComponentContainerProperty from '../../component-container-property.vue';
 
-// 图片展示属性面板
+/** 图片展示属性面板 */
 defineOptions({ name: 'ImageBarProperty' });
 
 const props = defineProps<{ modelValue: ImageBarProperty }>();
@@ -21,7 +21,7 @@ const formData = useVModel(props, 'modelValue', emit);
   <ComponentContainerProperty v-model="formData.style">
     <ElForm label-width="80px" :model="formData">
       <ElFormItem label="上传图片" prop="imgUrl">
-        <UploadImg
+        <ImageUpload
           v-model="formData.imgUrl"
           draggable="false"
           height="80px"
@@ -30,7 +30,7 @@ const formData = useVModel(props, 'modelValue', emit);
           :show-description="false"
         >
           <template #tip> 建议宽度750 </template>
-        </UploadImg>
+        </ImageUpload>
       </ElFormItem>
       <ElFormItem label="链接" prop="url">
         <AppLinkInput v-model="formData.url" />
@@ -38,5 +38,3 @@ const formData = useVModel(props, 'modelValue', emit);
     </ElForm>
   </ComponentContainerProperty>
 </template>
-
-<style scoped lang="scss"></style>