feat：【mall】diy editor 的 image-bar

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>