From d6faed9d0ef527a9648ba9656f2372e5dddb976b Mon Sep 17 00:00:00 2001 From: YunaiV Date: Tue, 28 Oct 2025 23:39:52 +0800 Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E3=80=90mall=E3=80=91diy=20editor?= =?UTF-8?q?=20=E7=9A=84=20image-bar?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../diy-editor/components/mobile/index.ts | 31 +++++++------------ .../components/mobile/image-bar/config.ts | 11 +++---- .../components/mobile/image-bar/index.vue | 12 +------ .../components/mobile/image-bar/property.vue | 10 +++--- 4 files changed, 21 insertions(+), 43 deletions(-) diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/index.ts b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/index.ts index 454e06a0b..5b2c4ccf9 100644 --- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/index.ts +++ b/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 = import.meta.glob('./*/*.vue'); -// 导入配置模块 +const viewModules: Record = import.meta.glob('./*/*.vue'); // 导入组件界面模块 const configModules: Record = import.meta.glob('./*/config.ts', { eager: true, -}); +}); // 导入配置模块 -// 界面模块 -const components: Record = {}; -// 组件配置模块 -const componentConfigs: Record = {}; +const components: Record = {}; // 界面模块 +const componentConfigs: Record = {}; // 组件配置模块 -// 组件界面的类型 -type ViewType = 'index' | 'property'; +type ViewType = 'index' | 'property'; // 组件界面的类型 /** * 注册组件的界面模块 diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/config.ts b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/config.ts index 0025ff4db..ade9ad597 100644 --- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/config.ts +++ b/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: '图片展示', diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/index.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/index.vue index 4562f7b32..08cf5ba34 100644 --- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/index.vue +++ b/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 }>(); - - diff --git a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/property.vue b/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/property.vue index a379a8613..33da84290 100644 --- a/apps/web-ele/src/views/mall/promotion/components/diy-editor/components/mobile/image-bar/property.vue +++ b/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); - - + @@ -38,5 +38,3 @@ const formData = useVModel(props, 'modelValue', emit); - -