From 24bc9e6c59749c2e8aeb4e0634933e10000db27d Mon Sep 17 00:00:00 2001 From: lijiangkun Date: Thu, 10 Jul 2025 09:41:58 +0800 Subject: [PATCH 1/5] =?UTF-8?q?chore:=20=E4=BF=AE=E5=A4=8D=E5=BC=B9?= =?UTF-8?q?=E6=A1=86=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../composition/use-external-component-property.ts | 2 ++ packages/ui-vue/components/dynamic-view/src/components/maps.ts | 2 ++ 2 files changed, 4 insertions(+) diff --git a/packages/designer/src/components/components/form-designer/components/external-component-panel/composition/use-external-component-property.ts b/packages/designer/src/components/components/form-designer/components/external-component-panel/composition/use-external-component-property.ts index 024366a2aab..a79b2d2dd14 100644 --- a/packages/designer/src/components/components/form-designer/components/external-component-panel/composition/use-external-component-property.ts +++ b/packages/designer/src/components/components/form-designer/components/external-component-panel/composition/use-external-component-property.ts @@ -52,6 +52,8 @@ export function useExternalComponentProperty(designerHostService: DesignerHostSe externalLookupPropertyConfig.events.forEach(event => { convertedPropertyData[event.label] = propertyData[event.label]; }) + }else{ + convertedPropertyData = propertyData; } return convertedPropertyData; diff --git a/packages/ui-vue/components/dynamic-view/src/components/maps.ts b/packages/ui-vue/components/dynamic-view/src/components/maps.ts index 62809978b0e..f0b435a3198 100644 --- a/packages/ui-vue/components/dynamic-view/src/components/maps.ts +++ b/packages/ui-vue/components/dynamic-view/src/components/maps.ts @@ -70,6 +70,7 @@ import FExpressionEditor from '@farris/ui-vue/components/expression-editor'; import FCodeEditor from '@farris/ui-vue/components/code-editor'; import FHtmlTemplate from '@farris/ui-vue/components/html-template'; import FCollectionPropertyEditor from '@farris/ui-vue/components/collection-property-editor'; +import FModal from '@farris/ui-vue/components/modal'; const componentMap: Record = {}; const componentPropsConverter: Record = {}; @@ -156,6 +157,7 @@ function loadRegister() { FCodeEditor.register(componentMap, componentPropsConverter, componentPropertyConfigConverter, resolverMap); FHtmlTemplate.register(componentMap, componentPropsConverter, componentPropertyConfigConverter, resolverMap); FCollectionPropertyEditor.register(componentMap, componentPropsConverter, componentPropertyConfigConverter, resolverMap); + FModal.register(componentMap, componentPropsConverter, componentPropertyConfigConverter, resolverMap); } } -- Gitee From ac1917368805be5b0e464be75a74bf2ffcee2237 Mon Sep 17 00:00:00 2001 From: lijiangkun Date: Thu, 31 Jul 2025 13:54:48 +0800 Subject: [PATCH 2/5] =?UTF-8?q?chore:=20=E8=A7=A3=E5=86=B3=E5=86=B2?= =?UTF-8?q?=E7=AA=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/form-designer/form-designer.component.tsx | 7 ------- 1 file changed, 7 deletions(-) diff --git a/packages/designer/src/components/components/form-designer/form-designer.component.tsx b/packages/designer/src/components/components/form-designer/form-designer.component.tsx index 02a56ffa71b..00669c530e6 100644 --- a/packages/designer/src/components/components/form-designer/form-designer.component.tsx +++ b/packages/designer/src/components/components/form-designer/form-designer.component.tsx @@ -288,14 +288,7 @@ export default defineComponent({ components={componentsToRegister} canvasMode={designerMode} > -<<<<<<< HEAD - - -======= {renderExternalComponentPanel()} ->>>>>>> 90b5396d0a375fd0a85804d7b58a8ae919983e8f Date: Fri, 25 Jul 2025 14:48:17 +0800 Subject: [PATCH 3/5] =?UTF-8?q?feature:=20PC=E7=AB=AF=E9=9B=B6=E4=BB=A3?= =?UTF-8?q?=E7=A0=81=E6=8E=A5=E5=85=A5Vue=E8=AE=BE=E8=AE=A1=E5=99=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../composition/command.service.tsx | 8 +++ .../designer-context/use-designer-context.ts | 19 ++++-- .../use-pc-nocode-designer-context.ts | 60 +++++++++++++++++++ .../form-metadata-nocode.service.ts | 47 +++++++++++++++ .../composition/metadata.service.ts | 16 +++-- .../src/components/types/designer-context.ts | 12 +++- 6 files changed, 148 insertions(+), 14 deletions(-) create mode 100644 packages/designer/src/components/composition/designer-context/use-pc-nocode-designer-context.ts create mode 100644 packages/designer/src/components/composition/form-metadata-nocode.service.ts diff --git a/packages/designer/src/components/composition/command.service.tsx b/packages/designer/src/components/composition/command.service.tsx index 4fa5dc66715..757957d7db0 100644 --- a/packages/designer/src/components/composition/command.service.tsx +++ b/packages/designer/src/components/composition/command.service.tsx @@ -157,10 +157,18 @@ export function useFormCommandService(formSchemaService: UseFormSchema, useFormS });; }); } + + function hasNoCustomCommands(): boolean { + return [DesignerMode.PC_NoCode, DesignerMode.Mobile_NoCode].includes(formSchemaService.designerMode); + } + /** * 将当前表单相关的自定义构件追加到webCmds中 */ function loadCommandsInCurrentPath(): Promise { + if (hasNoCustomCommands()) { + return Promise.resolve(); + } const commandsInfos = formSchemaService.getCommands(); const metadataInfo = formSchemaService.getFormMetadataBasicInfo(); const formCode = formSchemaService.designerMode === DesignerMode.PC_RTC ? metadataInfo.rtcCode : metadataInfo.code; diff --git a/packages/designer/src/components/composition/designer-context/use-designer-context.ts b/packages/designer/src/components/composition/designer-context/use-designer-context.ts index 2b204cdd421..5dac78fdd7b 100644 --- a/packages/designer/src/components/composition/designer-context/use-designer-context.ts +++ b/packages/designer/src/components/composition/designer-context/use-designer-context.ts @@ -1,14 +1,15 @@ import { DesignerMode, UseDesignerContext } from "../../types/designer-context"; import { useLocation } from "../use-location"; -import { useMobileDesignerContext } from "./use-mobile-designer-context"; import { usePCDesignerContext } from "./use-pc-designer-context"; import { usePCRtcDesignerContext } from "./use-pc-rtc-designer-context"; +import { usePCNocodeDesignerContext } from "./use-pc-nocode-designer-context"; /** * 设计器上下文 * @returns */ export function useDesignerContext(): UseDesignerContext { + /** * 判断的当前设计器运行环境 */ @@ -20,6 +21,12 @@ export function useDesignerContext(): UseDesignerContext { if (designerEnvType === 'runtimeCustom') { return DesignerMode.PC_RTC; } + if (designerEnvType === 'noCode') { + return DesignerMode.PC_NoCode; + } + if (designerEnvType === 'mobileNoCode') { + return DesignerMode.Mobile_NoCode; + } if (metadataPath && metadataPath.includes('.mfrm')) { return DesignerMode.Mobile; } @@ -30,12 +37,14 @@ export function useDesignerContext(): UseDesignerContext { const designerMode = getDesignerMode(); switch (designerMode) { - case DesignerMode.PC: case DesignerMode.Mobile: { + case DesignerMode.PC: + case DesignerMode.Mobile: { return usePCDesignerContext(); } - // { - // return useMobileDesignerContext(); - // } + case DesignerMode.PC_NoCode: + case DesignerMode.Mobile_NoCode: { + return usePCNocodeDesignerContext(); + } case DesignerMode.PC_RTC: { return usePCRtcDesignerContext(); } diff --git a/packages/designer/src/components/composition/designer-context/use-pc-nocode-designer-context.ts b/packages/designer/src/components/composition/designer-context/use-pc-nocode-designer-context.ts new file mode 100644 index 00000000000..5ad97612201 --- /dev/null +++ b/packages/designer/src/components/composition/designer-context/use-pc-nocode-designer-context.ts @@ -0,0 +1,60 @@ +import { DesignerMode, UseDesignerContext } from "../../types/designer-context"; +import ToolboxItems from '../../types/toolbox/pc-toolbox.json'; +import { usePCControlCreator } from "../control-creator/use-pc-control-creator.service"; +import SupportedControllers from '../../composition/command/supported-controllers/pc-supported-controller.json'; +import { FormComponent, UseFormSchema } from "../../../components/types"; +import ControllCategories from '../schema-repository/controller/pc-categories'; +import { useNocodeFormMetadata } from "../form-metadata-nocode.service"; +import { useCommandBuilderService as useCommandBuilder } from "../command-builder.service"; + +export function usePCNocodeDesignerContext(): UseDesignerContext { + + /** 设计器模式 */ + const designerMode: DesignerMode = DesignerMode.PC_NoCode; + + /** 工具箱的数据 */ + const toolboxItems: any[] = ToolboxItems; + + /** 要注册的UI组件 */ + const componentsToRegister: any = null; + + /** 支持的控制器 */ + const supportedControllers: any = SupportedControllers; + + /** 控制器分类 */ + const controllCategories: any = ControllCategories; + + /** 控件创建服务 */ + const useControlCreator = usePCControlCreator; + + /** 表单元数据服务 */ + const useFormMetadataService = useNocodeFormMetadata; + + /** 表单构件元数据服务 */ + const useCommandBuilderService = useCommandBuilder; + + /** + * 获取所有的页面组件 + * @returns + */ + function getPageComponents(useFormSchema: UseFormSchema): FormComponent[] { + const pageComponents: FormComponent[] = []; + const pageComponent = useFormSchema.getComponentById('root-component'); + if (pageComponent) { + pageComponents.push(pageComponent); + } + return pageComponents; + } + + return { + designerMode, + toolboxItems, + componentsToRegister, + supportedControllers, + controllCategories, + useControlCreator, + getPageComponents, + useFormMetadataService, + useCommandBuilderService + }; +} diff --git a/packages/designer/src/components/composition/form-metadata-nocode.service.ts b/packages/designer/src/components/composition/form-metadata-nocode.service.ts new file mode 100644 index 00000000000..85a685ee0d1 --- /dev/null +++ b/packages/designer/src/components/composition/form-metadata-nocode.service.ts @@ -0,0 +1,47 @@ +import axios from 'axios'; +import { omit } from 'lodash-es'; +import { DesignerProps } from '../designer.props'; +import { FormMetadaDataDom, MetadataDto, UseFormSchema, UseFormMetadata, FormMetaDataModule } from '../types'; +import { useLocation } from './use-location'; +import { useFormMetadata } from './form-metadata.service'; + +export function useNocodeFormMetadata(props: DesignerProps, useFormSchemaComposition: UseFormSchema): UseFormMetadata { + + const nocodeMetadataUrl = '/api/dev/nocode/v1.0/micro-apps/metadatas'; + + function queryMetadata(): Promise { + const { getHrefParam } = useLocation(); + const metadataId = getHrefParam('metadataId'); + const url = `${nocodeMetadataUrl}/${metadataId}`; + return axios.get(url).then((response: any) => { + const formSchema = JSON.parse(response.data.content).Contents; + const formMetadataBasicInfo = omit(response.data, 'content') as MetadataDto; + + useFormSchemaComposition.setFormMetadataBasicInfo(formMetadataBasicInfo); + useFormSchemaComposition.setFormSchema(formSchema); + return formSchema; + }); + } + + function saveFormMetadata() { + return Promise.resolve(); + } + + function queryFormTemplateRule(formModule: FormMetaDataModule): Promise { + return useFormMetadata(props, useFormSchemaComposition).queryFormTemplateRule(formModule); + } + + function runForm(loadingService: any, messageBoxService: any) { + } + + function publishMenu(messageBoxService: any, notifyService: any) { + } + + return { + queryMetadata, + saveFormMetadata, + queryFormTemplateRule, + runForm, + publishMenu, + }; +} diff --git a/packages/designer/src/components/composition/metadata.service.ts b/packages/designer/src/components/composition/metadata.service.ts index 1047d6b16f9..921e414e25e 100644 --- a/packages/designer/src/components/composition/metadata.service.ts +++ b/packages/designer/src/components/composition/metadata.service.ts @@ -40,7 +40,7 @@ export class MetadataService { */ public getMetadataListByType(relativePath: string, metadataType: string): Promise { let url; - if (this.designerMode === DesignerMode.PC_RTC) { + if (this.shouldUseRtcApi()) { url = `${this.rtcMetadataBasePath}?metadataTypes=${metadataType}`; } else { url = `${this.metadataBasePath}?path=${relativePath}&metadataTypeList=${metadataType}`; @@ -58,7 +58,7 @@ export class MetadataService { */ public getRefMetadata(relativePath: string, metadataId: string): Promise { let url; - if (this.designerMode === DesignerMode.PC_RTC) { + if (this.shouldUseRtcApi()) { url = `${this.rtcMetadataBasePath}/${metadataId}`; } else { url = `${this.metadataBasePath}/relied?metadataPath=${relativePath}&metadataID=${metadataId}`; @@ -103,7 +103,7 @@ export class MetadataService { public getAllMetadataList(relativePath: string, metadataType: string, pageSize = 1000) { let url = `${this.metadataServicePath}/unionmdlist?path=${relativePath}&`; - if (this.designerMode === DesignerMode.PC_RTC) { + if (this.shouldUseRtcApi()) { url = `${this.rtcMetadataBasePath}/rtmetadatalist?`; } return axios.get(`${url}pageIndex=1&pageSize=${pageSize}&metadataTypeList=${metadataType}`).then((res: any) => { @@ -116,7 +116,7 @@ export class MetadataService { } public getPickMetadata(relativePath: string, data: any) { - if (this.designerMode === DesignerMode.PC_RTC) { + if (this.shouldUseRtcApi()) { const url = `${this.rtcMetadataBasePath}/${data?.id}`; return axios.get(url, data).then((res: any) => { return { metadata: res.data }; @@ -130,7 +130,7 @@ export class MetadataService { } public saveMetadata(metadataDto: any, formBasicInfo?: any) { - if (this.designerMode === DesignerMode.PC_RTC) { + if (this.shouldUseRtcApi()) { const { dimension1, dimension2 } = formBasicInfo; return axios.post(this.rtcMetadataBasePath, { metadataDto, @@ -140,7 +140,6 @@ export class MetadataService { } else { return axios.put(this.metadataBasePath, metadataDto); } - } public validateRepeatName(path: string, fileName: string) { @@ -240,4 +239,9 @@ export class MetadataService { return { ok: res.status === 204 }; }); } + + private shouldUseRtcApi(): boolean { + const rtcModes = [DesignerMode.PC_RTC, DesignerMode.PC_NoCode, DesignerMode.Mobile_NoCode]; + return rtcModes.includes(this.designerMode); + } } diff --git a/packages/designer/src/components/types/designer-context.ts b/packages/designer/src/components/types/designer-context.ts index 0570a255278..8c4f6612dc5 100644 --- a/packages/designer/src/components/types/designer-context.ts +++ b/packages/designer/src/components/types/designer-context.ts @@ -11,12 +11,18 @@ export enum DesignerMode { /** 移动设计器 */ Mobile = 'Mobile', - /** PC 运行时定制设计器 */ - PC_RTC = 'PC_RTC' + /** PC运行时定制设计器 */ + PC_RTC = 'PC_RTC', + + /** PC零代码设计器 */ + PC_NoCode = 'PC_NoCode', + + /** 移动端零代码设计器 */ + Mobile_NoCode = 'Mobile_NoCode', } export interface UseDesignerContext { - instances: Record; + instances?: Record; designerMode: DesignerMode; toolboxItems: any[]; componentsToRegister: any[]; -- Gitee From 39015e385d909dc78e45c769dc6c646ad5bea49f Mon Sep 17 00:00:00 2001 From: lijiangkun Date: Thu, 14 Aug 2025 14:25:43 +0800 Subject: [PATCH 4/5] =?UTF-8?q?fix:=20=E7=A7=BB=E5=8A=A8=E8=BE=93=E5=85=A5?= =?UTF-8?q?=E6=8E=A7=E4=BB=B6=E5=92=8C=E6=8C=89=E9=92=AE=E6=8E=A7=E4=BB=B6?= =?UTF-8?q?=E5=AE=8C=E5=96=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/button-group/index.ts | 2 +- .../button-group/src/button-group.props.ts | 2 +- .../button-group/src/button-group.scss | 1 + ....tsx => button-group.design.component.tsx} | 10 +- .../src/designer/use-designer-rules.ts | 10 +- .../button-group.property-config.ts | 2 +- .../src/schema/button-group.schema.json | 2 +- .../button/src/schema/button.schema.json | 9 +- .../date-picker.property-config.ts | 2 +- .../src/schema/date-picker.schema.json | 2 +- .../components/designer-canvas/index.ts | 8 - .../components/designer-item.component.tsx | 340 ------------------ .../designer-canvas/src/components/maps.ts | 49 --- .../src/composition/function/drag-resolve.tsx | 230 ------------ .../src/designer-canvas.component.tsx | 143 -------- .../input-group/src/input-group.scss | 1 + .../src/designer/use-designer-rules.ts | 6 +- .../navbar/src/schema/navbar.schema.json | 2 +- .../components/number-input/index.ts | 2 +- .../number-input.property-config.ts | 2 +- .../src/schema/number-input.schema.json | 4 +- .../designer-canvas/src/components/maps.ts | 2 +- 22 files changed, 40 insertions(+), 791 deletions(-) rename packages/mobile-ui-vue/components/button-group/src/designer/{card.design.component.tsx => button-group.design.component.tsx} (84%) delete mode 100644 packages/mobile-ui-vue/components/designer-canvas/index.ts delete mode 100644 packages/mobile-ui-vue/components/designer-canvas/src/components/designer-item.component.tsx delete mode 100644 packages/mobile-ui-vue/components/designer-canvas/src/components/maps.ts delete mode 100644 packages/mobile-ui-vue/components/designer-canvas/src/composition/function/drag-resolve.tsx delete mode 100644 packages/mobile-ui-vue/components/designer-canvas/src/designer-canvas.component.tsx diff --git a/packages/mobile-ui-vue/components/button-group/index.ts b/packages/mobile-ui-vue/components/button-group/index.ts index f825aa66e68..54ce956647f 100644 --- a/packages/mobile-ui-vue/components/button-group/index.ts +++ b/packages/mobile-ui-vue/components/button-group/index.ts @@ -1,7 +1,7 @@ import { withInstall, withRegister, withRegisterDesigner } from '@farris/mobile-ui-vue/common'; import ButtonGroupInstallless from './src/button-group.component'; import { propsResolverGenerator } from './src/button-group.props'; -import ButtonGroupDesign from './src/designer/card.design.component'; +import ButtonGroupDesign from './src/designer/button-group.design.component'; const BUTTON_GROUP_REGISTERED_NAME = 'button-group'; diff --git a/packages/mobile-ui-vue/components/button-group/src/button-group.props.ts b/packages/mobile-ui-vue/components/button-group/src/button-group.props.ts index ec5f39d8c95..fc19278a527 100644 --- a/packages/mobile-ui-vue/components/button-group/src/button-group.props.ts +++ b/packages/mobile-ui-vue/components/button-group/src/button-group.props.ts @@ -31,7 +31,7 @@ export const buttonGroupProps = { mode: { type: String as PropType, default: 'default' }, /** 按钮大小 */ - size: { type: String as PropType, default: 'normal' }, + size: { type: String as PropType, default: 'middle' }, /** 按钮样式 */ type: { type: String as PropType, default: 'primary' }, diff --git a/packages/mobile-ui-vue/components/button-group/src/button-group.scss b/packages/mobile-ui-vue/components/button-group/src/button-group.scss index 5660c571295..923bfdb58e3 100644 --- a/packages/mobile-ui-vue/components/button-group/src/button-group.scss +++ b/packages/mobile-ui-vue/components/button-group/src/button-group.scss @@ -45,6 +45,7 @@ &--block { display: flex; + width: 100%; } &--vertical { diff --git a/packages/mobile-ui-vue/components/button-group/src/designer/card.design.component.tsx b/packages/mobile-ui-vue/components/button-group/src/designer/button-group.design.component.tsx similarity index 84% rename from packages/mobile-ui-vue/components/button-group/src/designer/card.design.component.tsx rename to packages/mobile-ui-vue/components/button-group/src/designer/button-group.design.component.tsx index 145466524ca..a96eb98b5dd 100644 --- a/packages/mobile-ui-vue/components/button-group/src/designer/card.design.component.tsx +++ b/packages/mobile-ui-vue/components/button-group/src/designer/button-group.design.component.tsx @@ -28,8 +28,16 @@ export default defineComponent({ elementRef.value?.click?.(); } + const buttonGroupProps = computed(() => { + return { + ...props, + customStyle: '' + }; + }); + + return () => ( - + ); } }); diff --git a/packages/mobile-ui-vue/components/button-group/src/designer/use-designer-rules.ts b/packages/mobile-ui-vue/components/button-group/src/designer/use-designer-rules.ts index e5c930c80df..32fe586f60a 100644 --- a/packages/mobile-ui-vue/components/button-group/src/designer/use-designer-rules.ts +++ b/packages/mobile-ui-vue/components/button-group/src/designer/use-designer-rules.ts @@ -12,6 +12,13 @@ export function useDesignerRulesForButtonGroup(designItemContext: DesignerItemCo return ''; } + function getDesignerClass(): string{ + if(designItemContext.schema.block){ + return ' fm-button-group--block '; + } + return ''; + } + function checkCanMoveComponent() { return true; } @@ -36,6 +43,7 @@ export function useDesignerRulesForButtonGroup(designItemContext: DesignerItemCo checkCanMoveComponent, checkCanDeleteComponent, hideNestedPaddingInDesginerView, - getPropsConfig + getPropsConfig, + getDesignerClass }; } diff --git a/packages/mobile-ui-vue/components/button-group/src/property-config/button-group.property-config.ts b/packages/mobile-ui-vue/components/button-group/src/property-config/button-group.property-config.ts index bfa8c6387fa..71f11600eed 100644 --- a/packages/mobile-ui-vue/components/button-group/src/property-config/button-group.property-config.ts +++ b/packages/mobile-ui-vue/components/button-group/src/property-config/button-group.property-config.ts @@ -86,7 +86,7 @@ export class ButtonGroupProperty extends BaseControlProperty { valueField: 'value', data: [ { value: 'large', text: '大号按钮' }, - { value: 'normal', text: '普通按钮' }, + { value: 'middle', text: '普通按钮' }, { value: 'small', text: '小号按钮' }, { value: 'mini', text: '迷你按钮' }, ], diff --git a/packages/mobile-ui-vue/components/button-group/src/schema/button-group.schema.json b/packages/mobile-ui-vue/components/button-group/src/schema/button-group.schema.json index f9f7c17b46d..e89da23926e 100644 --- a/packages/mobile-ui-vue/components/button-group/src/schema/button-group.schema.json +++ b/packages/mobile-ui-vue/components/button-group/src/schema/button-group.schema.json @@ -55,7 +55,7 @@ "size": { "description": "按钮大小", "type": "string", - "default": "normal" + "default": "middle" }, "items": { "description": "按钮项集合", diff --git a/packages/mobile-ui-vue/components/button/src/schema/button.schema.json b/packages/mobile-ui-vue/components/button/src/schema/button.schema.json index adb0613d6d7..2d9556ee2b7 100644 --- a/packages/mobile-ui-vue/components/button/src/schema/button.schema.json +++ b/packages/mobile-ui-vue/components/button/src/schema/button.schema.json @@ -40,21 +40,22 @@ "displayType": { "description": "显示类型", "type": "string", - "default": "default" + "default": "primary" }, "text": { "description": "文本", - "type": "string" + "type": "string", + "default": "按钮" }, "block": { "description": "沾满整行", "type": "boolean", - "default": false + "default": true }, "round": { "description": "圆角按钮", "type": "boolean", - "default": false + "default": true }, "plain": { "description": "朴素按钮", diff --git a/packages/mobile-ui-vue/components/date-picker/src/property-config/date-picker.property-config.ts b/packages/mobile-ui-vue/components/date-picker/src/property-config/date-picker.property-config.ts index 14815dbae02..e915e2bd227 100644 --- a/packages/mobile-ui-vue/components/date-picker/src/property-config/date-picker.property-config.ts +++ b/packages/mobile-ui-vue/components/date-picker/src/property-config/date-picker.property-config.ts @@ -10,7 +10,7 @@ export class DatePickerProperty extends InputBaseProperty { const displayFormatOptions = this.getDateFormatOptions(propertyData?.editor); return this.getComponentConfig( propertyData, - {}, + { type: 'date-picker' }, { title: { description: '', diff --git a/packages/mobile-ui-vue/components/date-picker/src/schema/date-picker.schema.json b/packages/mobile-ui-vue/components/date-picker/src/schema/date-picker.schema.json index f0216d49dcc..7309b42382c 100644 --- a/packages/mobile-ui-vue/components/date-picker/src/schema/date-picker.schema.json +++ b/packages/mobile-ui-vue/components/date-picker/src/schema/date-picker.schema.json @@ -81,5 +81,5 @@ }, "events": ["onUpdate:modelValue"], "required": ["type"], - "ignore": ["id", "type", "appearance"] + "ignore": ["id", "appearance"] } diff --git a/packages/mobile-ui-vue/components/designer-canvas/index.ts b/packages/mobile-ui-vue/components/designer-canvas/index.ts deleted file mode 100644 index d2d31b946fc..00000000000 --- a/packages/mobile-ui-vue/components/designer-canvas/index.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { DgControl } from './src/composition/dg-control'; -import type { DesignerHostService, UseDesignerRules } from './src/composition/types'; -export * from './src/composition/props/designer-canvas.props'; -export * from './src/composition/function/use-designer-component'; -export * from './src/composition/function/use-designer-inner-component'; -export * from './src/types'; - -export { DgControl, UseDesignerRules, DesignerHostService }; diff --git a/packages/mobile-ui-vue/components/designer-canvas/src/components/designer-item.component.tsx b/packages/mobile-ui-vue/components/designer-canvas/src/components/designer-item.component.tsx deleted file mode 100644 index 10b54bee926..00000000000 --- a/packages/mobile-ui-vue/components/designer-canvas/src/components/designer-item.component.tsx +++ /dev/null @@ -1,340 +0,0 @@ - -import { Ref, SetupContext, computed, defineComponent, inject, onMounted, provide, ref, watch, onBeforeUnmount } from 'vue'; -import { DesignerItemPropsType, designerItemProps } from '../composition/props/designer-item.props'; -import { componentMap, componentPropsConverter } from './maps'; -import { UseDragula } from '../composition/types'; -import { ComponentSchema, DesignerComponentInstance, DesignerItemContext } from '../types'; -import FDesignerPlaceholder from './designer-placeholder.component'; -import { canvasChanged, setPositionOfButtonGroup } from '../composition/designer-canvas-changed'; -import { getCustomClass } from '@farris/mobile-ui-vue/common'; - -const FDesignerItem = defineComponent({ - name: 'FDesignerItem', - props: designerItemProps, - emits: ['selectionChange'], - setup(props: DesignerItemPropsType, context) { - const id = ref(`${props.modelValue.id}-component`); - const canMove = ref(props.canMove); - const canDelete = ref(props.canDelete); - const canNested = ref(false); - const schema = ref(props.modelValue); - const componentId = ref(props.componentId || ''); - const designComponentStyle = ref(''); - const designComponentClass = ref(''); - const designCustomClass = ref(props.customClass); - const designerItemElementRef = ref(); - const useDragulaComposition = inject('canvas-dragula'); - const componentInstance = ref() as Ref; - const parent = inject('design-item-context'); - const designItemContext = { designerItemElementRef, componentInstance, schema: schema.value, parent, setupContext: context as SetupContext }; - provide('design-item-context', designItemContext); - const useFormSchema = inject('useFormSchema'); - - const designerItemClass = computed(() => { - const componentClass = props.modelValue.appearance ? (props.modelValue.appearance.class as string) || '' : ''; - const customButtons = componentInstance.value?.getCustomButtons && componentInstance.value.getCustomButtons(); - let classObject = { - 'farris-component': true, - // 受position-relative影响，整个容器的高度不能被撑起 - 'flex-fill': schema.value.id === 'root-component', - 'position-relative': canMove.value && canDelete.value || (customButtons?.length), - 'farris-nested': canNested.value, - 'can-move': canMove.value, - 'd-none': designerItemElementRef.value && (designerItemElementRef.value as HTMLElement).classList.contains('d-none'), - 'dgComponentSelected': designerItemElementRef.value && (designerItemElementRef.value as HTMLElement).classList.contains('dgComponentSelected'), - 'dgComponentFocused': designerItemElementRef.value && (designerItemElementRef.value as HTMLElement).classList.contains('dgComponentFocused'), - } as Record; - classObject[`farris-component-${schema.value.type}`] = true; - classObject = getCustomClass(classObject, componentClass); - classObject = getCustomClass(classObject, designComponentClass.value); - classObject = getCustomClass(classObject, designCustomClass.value); - return classObject; - }); - - const desginerItemStyle = computed(() => { - const styleObject = {} as Record; - const componentStyle = props.modelValue.appearance ? (props.modelValue.appearance.style as string) || '' : ''; - if (componentStyle) { - componentStyle.split(';').reduce((result: Record, styleString: string) => { - const [styleKey, styleValue] = styleString.split(':'); - result[styleKey] = styleValue; - return result; - }, styleObject); - } - if (designComponentStyle.value) { - designComponentStyle.value.split(';').reduce((result: Record, styleString: string) => { - const [styleKey, styleValue] = styleString.split(':'); - if (styleKey) { - result[styleKey] = styleValue; - } - return result; - }, styleObject); - } - return styleObject; - }); - - function onClickDeleteButton(payload: MouseEvent, schemaToRemove: ComponentSchema) { - if (payload) { - payload.preventDefault(); - payload.stopPropagation(); - } - - // 连同所属组件一起删除，使用场景如data-grid、form控件等。 - if (componentInstance.value.triggerBelongedComponentToDeleteWhenDeleted) { - const belongedComponentInstance = componentInstance.value.getBelongedComponentInstance(componentInstance); - if (belongedComponentInstance && belongedComponentInstance.parent) { - const belongedComponentInstanceParent = ref(belongedComponentInstance?.parent) as any; - const indexToRemove = belongedComponentInstanceParent.value.contents.findIndex( - (contentItem: ComponentSchema) => contentItem.id === belongedComponentInstance.schema.id - ); - belongedComponentInstanceParent.value?.contents?.splice(indexToRemove, 1); - - canvasChanged.value++; - } - return; - } - componentInstance.value.onRemoveComponent(); - let parentContext = parent; - let locatePredicate: any = (contentItem: ComponentSchema) => contentItem.id === schemaToRemove.id; - if (schemaToRemove.type === 'component') { - parentContext = parent?.parent; - locatePredicate = (contentItem: ComponentSchema) => contentItem.component === schemaToRemove.id; - - } - if (parentContext && parentContext.schema.contents) { - const indexToRemove = parentContext.schema.contents.findIndex(locatePredicate); - parentContext.schema.contents.splice(indexToRemove, 1); - - canvasChanged.value++; - context.emit('selectionChange'); - - } - - } - - function renderDeleteButton(componentSchema: ComponentSchema) { - return ( - canDelete.value && ( -
{ - onClickDeleteButton(payload, componentSchema); - }}> - -
- ) - ); - } - - function renderMoveButton() { - return ( - canMove.value && ( -
- -
- ) - ); - } - - function renderCustomButtons() { - const customButtons = componentInstance.value?.getCustomButtons && componentInstance.value.getCustomButtons(); - - return ( - customButtons && - !!customButtons.length && - customButtons.map((buttonConfig: any) => { - return ( -
buttonConfig.onClick && buttonConfig.onClick(payload)}> - -
- ); - }) - ); - } - - function renderIconPanel(componentSchema: ComponentSchema) { - return ( -
-
- {renderDeleteButton(componentSchema)} - {renderMoveButton()} - {renderCustomButtons()} -
-
- ); - } - - function onSelectionChange(schemaType: string, schemaValue: ComponentSchema, componentId: string, componentInstance: DesignerComponentInstance) { - context.emit('selectionChange', schemaType, schemaValue, componentId, componentInstance); - } - - function renderContent(viewSchema: ComponentSchema) { - const componentKey = viewSchema.type; - const Component = componentMap[componentKey]; - const propsConverter = componentPropsConverter[componentKey]; - const viewProps = propsConverter ? propsConverter(viewSchema) : {}; - viewProps.customClass = props.ignore ? viewProps.customClass : ''; - viewProps.componentId = componentId.value; - viewProps.id = viewSchema.id; - const shouldShowPlaceholder = viewSchema.contents && viewSchema.contents.length === 0; - const hasContent = viewSchema.contents && !!viewSchema.contents.length; - return hasContent && Component ? ( - - {(viewSchema.contents as ComponentSchema[]).map((contentSchema: any) => ( - - ))} - - ) : Component ? ( - shouldShowPlaceholder ? ( - - - - ) : ( - - ) - ) : ( -
- ); - } - - function renderChildComponentContent(viewSchema: ComponentSchema) { - const componentKey = viewSchema.type; - if (componentKey === 'component-ref') { - // eslint-disable-next-line prefer-const - let componentSchema = useFormSchema?.getFormSchema().module.components - .find((component: any) => component.id === viewSchema.component); - if (componentSchema) { - - return ; - } - } - } - watch( - () => props.modelValue, - (value: any) => { - schema.value = value; - id.value = `${value.id}-component`; - componentId.value = value.id; - } - ); - - function updatePositionOfButtonGroup(event: Event | any) { - const targetElement = event?.target as any; - setPositionOfButtonGroup(targetElement); - } - /** - * 记录滚动区域 - */ - function recordScrollContainer(element: HTMLElement) { - if (!window['scrollContainerList']) { window['scrollContainerList'] = new Set(); } - - const id = element.getAttribute('id'); - if (id) { - window['scrollContainerList'].add(id); - } - } - - function updatePositionOfBtnGroupWhenScroll(event: Event | any) { - const targetElement = event?.target as any; - recordScrollContainer(targetElement); - updatePositionOfButtonGroup(event); - } - function bindingScrollEvent() { - if (schema.value?.contents?.length && designerItemElementRef.value) { - designerItemElementRef.value.addEventListener('scroll', updatePositionOfBtnGroupWhenScroll); - } - } - - onMounted(() => { - if (designerItemElementRef.value && componentInstance.value && componentInstance.value.schema) { - const draggableContainer = designerItemElementRef.value.querySelector( - `[data-dragref='${componentInstance.value.schema.id}-container']` - ); - if (useDragulaComposition && draggableContainer) { - useDragulaComposition.attachComponents(draggableContainer, schema.value); - } - canNested.value = componentInstance.value.canNested !== undefined ? componentInstance.value.canNested : canNested.value; - canDelete.value = componentInstance.value.canDelete !== undefined ? componentInstance.value.canDelete : canDelete.value; - canMove.value = componentInstance.value.canMove !== undefined ? componentInstance.value.canMove : canMove.value; - designComponentStyle.value = componentInstance.value.styles || ''; - designComponentClass.value = componentInstance.value.designerClass || ''; - if (designerItemElementRef.value) { - designerItemElementRef.value.componentInstance = componentInstance; - designerItemElementRef.value.designItemContext = designItemContext; - } - componentInstance.value.belongedComponentId = componentId.value; - - } - bindingScrollEvent(); - - canvasChanged.value++; - }); - - onBeforeUnmount(() => { - if (designerItemElementRef.value) { - designerItemElementRef.value.removeEventListener('scroll', updatePositionOfButtonGroup); - } - }); - - function onClickDesignerItem(payload: MouseEvent) { - if (payload) { - payload.preventDefault(); - payload.stopPropagation(); - } - let draggabledesignerItemElementRef: any = designItemContext.designerItemElementRef; - const designerItemElement = designerItemElementRef.value as HTMLElement; - if (designerItemElement) { - const currentFocusedElements = document.getElementsByClassName('dgComponentFocused') as HTMLCollectionOf; - // 重复点击 - const duplicateClick = - currentFocusedElements && - currentFocusedElements.length === 1 && - currentFocusedElements[0] === designerItemElementRef.value; - if (!duplicateClick) { - Array.from(currentFocusedElements).forEach((element: HTMLElement) => element.classList.remove('dgComponentFocused')); - Array.from(document.getElementsByClassName('dgComponentSelected') as HTMLCollectionOf).forEach( - (element: HTMLElement) => element.classList.remove('dgComponentSelected') - ); - - designerItemElement.classList.add('dgComponentFocused'); - context.emit('selectionChange', schema.value.type, schema.value, componentId.value, componentInstance.value); - if (componentInstance.value.getDraggableDesignItemElement) { - draggabledesignerItemElementRef = componentInstance.value.getDraggableDesignItemElement(designItemContext); - if (draggabledesignerItemElementRef && draggabledesignerItemElementRef.value) { - draggabledesignerItemElementRef.value.classList.add('dgComponentSelected'); - - } - } - - } - } - - updatePositionOfButtonGroup({ target: draggabledesignerItemElementRef?.value }); - } - - return () => { - return ( - schema.value.type === 'component-ref' ? - renderChildComponentContent(schema.value) : -
- {renderIconPanel(schema.value)} - {renderContent(schema.value)} -
- ); - }; - } -}); -export default FDesignerItem; diff --git a/packages/mobile-ui-vue/components/designer-canvas/src/components/maps.ts b/packages/mobile-ui-vue/components/designer-canvas/src/components/maps.ts deleted file mode 100644 index 329fd482b8e..00000000000 --- a/packages/mobile-ui-vue/components/designer-canvas/src/components/maps.ts +++ /dev/null @@ -1,49 +0,0 @@ -import { CheckboxGroup, ContentContainer, DatePicker, FormItem, PageHeaderContainer, Picker, RadioGroup, Switch } from "@farris/mobile-ui-vue"; -import Button from "@farris/mobile-ui-vue/button"; -import Component from "@farris/mobile-ui-vue/component"; -import FloatContainer from "@farris/mobile-ui-vue/float-container"; -import Form from "@farris/mobile-ui-vue/form"; -import InputGroup from "@farris/mobile-ui-vue/input-group"; -import ListView from "@farris/mobile-ui-vue/list-view"; -import Navbar from "@farris/mobile-ui-vue/navbar"; -import PageBodyContainer from "@farris/mobile-ui-vue/page-body-container"; -import PageContainer from "@farris/mobile-ui-vue/page-container"; -import PageFooterContainer from "@farris/mobile-ui-vue/page-footer-container"; -import Textarea from "@farris/mobile-ui-vue/textarea"; - -const componentMap: Record = {}; -const componentPropsConverter: Record = {}; -const componentPropertyConfigConverter: Record = {}; - - -let hasLoaded = false; -/** - * 加载设计时组件 - */ -function loadDesignerRegister() { - if (!hasLoaded) { - hasLoaded = true; - Button.registerDesigner(componentMap, componentPropsConverter, componentPropertyConfigConverter); - PageContainer.registerDesigner(componentMap, componentPropsConverter, componentPropertyConfigConverter); - PageHeaderContainer.registerDesigner(componentMap, componentPropsConverter, componentPropertyConfigConverter); - PageBodyContainer.registerDesigner(componentMap, componentPropsConverter, componentPropertyConfigConverter); - PageFooterContainer.registerDesigner(componentMap, componentPropsConverter, componentPropertyConfigConverter); - Navbar.registerDesigner(componentMap, componentPropsConverter, componentPropertyConfigConverter); - Component.registerDesigner(componentMap, componentPropsConverter, componentPropertyConfigConverter); - ListView.registerDesigner(componentMap, componentPropsConverter, componentPropertyConfigConverter); - Form.registerDesigner(componentMap, componentPropsConverter, componentPropertyConfigConverter); - InputGroup.registerDesigner(componentMap, componentPropsConverter, componentPropertyConfigConverter); - FloatContainer.registerDesigner(componentMap, componentPropsConverter, componentPropertyConfigConverter); - ContentContainer.registerDesigner(componentMap, componentPropsConverter, componentPropertyConfigConverter); - FormItem.registerDesigner(componentMap, componentPropsConverter, componentPropertyConfigConverter); - DatePicker.registerDesigner(componentMap, componentPropsConverter, componentPropertyConfigConverter); - Textarea.registerDesigner(componentMap, componentPropsConverter, componentPropertyConfigConverter); - RadioGroup.registerDesigner(componentMap, componentPropsConverter, componentPropertyConfigConverter); - Switch.registerDesigner(componentMap, componentPropsConverter, componentPropertyConfigConverter); - Picker.registerDesigner(componentMap, componentPropsConverter, componentPropertyConfigConverter); - CheckboxGroup.registerDesigner(componentMap, componentPropsConverter, componentPropertyConfigConverter); - - } -} - -export { componentMap, componentPropsConverter, componentPropertyConfigConverter, loadDesignerRegister }; diff --git a/packages/mobile-ui-vue/components/designer-canvas/src/composition/function/drag-resolve.tsx b/packages/mobile-ui-vue/components/designer-canvas/src/composition/function/drag-resolve.tsx deleted file mode 100644 index 05dbcb49147..00000000000 --- a/packages/mobile-ui-vue/components/designer-canvas/src/composition/function/drag-resolve.tsx +++ /dev/null @@ -1,230 +0,0 @@ -import { ModalFunctions } from "../../../../modal/src/composition/type"; -import { ComponentBindingSourceContext, DesignerHostService, DesignerHTMLElement, DraggingResolveContext } from "../types"; -import { DesignViewModelField, FormVariable } from "../../../../common/src/entity/entity-schema"; -import { merge } from "lodash-es"; -import { DgControl } from "../dg-control"; -import { DesignerComponentInstance } from "@farris/mobile-ui-vue"; - -export function dragResolveService(designerHostService: DesignerHostService) { - /** 弹窗实例 */ - let modalEditorRef: ModalFunctions; - /** 拖拽上下文 */ - let componentResolveContext: DraggingResolveContext; - - /** - * 获取拖拽上下文信息 - */ - function getComponentResolveContext(sourceElement: DesignerHTMLElement, sourceContainer: DesignerHTMLElement, targetContainer: DesignerHTMLElement) - : DraggingResolveContext { - - const resolveContext: DraggingResolveContext = { - componentType: String(sourceElement.getAttribute('data-controltype')), - componentFeature: String(sourceElement.getAttribute('data-feature')), - componentCategory: String(sourceElement.getAttribute('data-category')), - label: String(sourceElement.getAttribute('data-controlTypeName')), - sourceType: String(sourceElement.getAttribute('data-sourceType') || 'move'), - parentComponentInstance: targetContainer.componentInstance.value, - sourceElement, - sourceContainer, - targetContainer, - bindingSourceContext: null - }; - - // 现有控件移动位置：从控件实例上获取控件类型 - if (sourceElement.componentInstance) { - resolveContext.componentType = sourceElement.componentInstance.value.schema?.type; - // resolveContext.componentCategory = sourceElement.componentInstance.value.category; - } - - return resolveContext; - } - /** - * 选择绑定实体后事件 - */ - function onSubmitEntitySelctor(bindingSourceContext: ComponentBindingSourceContext) { - componentResolveContext.bindingSourceContext = bindingSourceContext; - - if (modalEditorRef?.modalRef?.value.close) { - modalEditorRef?.modalRef?.value.close(); - } - } - /** - * 取消绑定实体 - */ - function onCancelEntitySelector() { - componentResolveContext.bindingSourceContext = undefined; - if (modalEditorRef?.modalRef?.value.close) { - modalEditorRef?.modalRef?.value.close(); - } - } - /** - * 选择绑定实体窗口 - */ - function renderEntityComponent() { - const { componentType } = componentResolveContext; - const FEntityBindingSelector = designerHostService.uiProviderService.getUiComponent('FEntityBindingSelector'); - return () => (<> ); - } - /** - * 弹出实体绑定窗口 - */ - function triggerBindingEntity() { - return new Promise((resolve, reject) => { - modalEditorRef = designerHostService.modalService.open({ - title: '选择绑定', - width: 800, - height: 600, - fitContent: false, - showButtons: false, - render: renderEntityComponent(), - rejectCallback:()=>{ - componentResolveContext.bindingSourceContext = undefined; - }, - closedCallback: () => { - resolve(componentResolveContext); - }, - draggable: true - }); - }); - } - /** - * 取消绑定字段后事件 - */ - function onCancelFieldSelector() { - componentResolveContext.bindingSourceContext = undefined; - if (modalEditorRef?.modalRef?.value.close) { - modalEditorRef?.modalRef?.value.close(); - } - } - /** - * 获取控件拖拽后的分组信息，以便于后续记录到视图模型 - */ - function getFieldGroupInfo(parentComponentInstance: DesignerComponentInstance) { - let groupId = ''; - let groupName = ''; - if (DgControl['field-set'] && parentComponentInstance.schema.type === DgControl['field-set'].type) { - groupId = parentComponentInstance.schema.id; - groupName = parentComponentInstance.schema.title; - } - return { groupId, groupName }; - } - /** - * 选择绑定字段后事件 - */ - function onSubmitFieldSelctor(data: { selectedData: any, bindingType: any }) { - if (!data || !data.selectedData || !data.bindingType) { - return; - } - const { selectedData, bindingType } = data; - // 若添加到小分组内，需要向vm保存groupId和groupName - const { groupId, groupName } = getFieldGroupInfo(componentResolveContext.parentComponentInstance); - const bindingSourceContext: ComponentBindingSourceContext = { bindingType: 'field' }; - - if (bindingType === 'Form') { - // 绑定字段 - const entityField = selectedData as DesignViewModelField; - bindingSourceContext.entityFieldNode = entityField; - - bindingSourceContext.designViewModelField = merge({}, entityField, { groupId, groupName }); - - componentResolveContext.bindingSourceContext = bindingSourceContext; - } else { - // 绑定变量 - const varibleField = selectedData as FormVariable; - bindingSourceContext.variableFieldNode = merge({}, varibleField, { groupId, groupName }); - componentResolveContext.bindingSourceContext = bindingSourceContext; - } - - if (modalEditorRef?.modalRef?.value.close) { - modalEditorRef?.modalRef?.value.close(); - } - } - /** - * 绑定字段弹窗 - */ - function renderFieldComponent() { - const { parentComponentInstance } = componentResolveContext; - const viewModelId = designerHostService.formSchemaUtils.getViewModelIdByComponentId(parentComponentInstance?.belongedComponentId); - const editorParams = { - viewModelId, - designerHostService, - disableOccupiedFields: true, - componentSchema: { editor: { type: componentResolveContext.componentType } } - }; - const bindingSettings = { enable: false }; - - const FBindingSelectorContainer = designerHostService.uiProviderService.getUiComponent('FBindingSelectorContainer'); - - return () => (<> ); - } - /** - * 弹出绑定字段的窗口 - */ - function triggerBindingField() { - return new Promise((resolve, reject) => { - modalEditorRef = designerHostService.modalService.open({ - title: '选择绑定', - width: 800, - height: 600, - fitContent: false, - showButtons: false, - render: renderFieldComponent(), - rejectCallback:()=>{ - componentResolveContext.bindingSourceContext = undefined; - }, - closedCallback: () => { - resolve(componentResolveContext); - }, - draggable: true - }); - }); - } - /** - * 生成控件schema结构 - */ - function resolveComponentSchema() { - const { parentComponentInstance } = componentResolveContext; - const componentSchema = parentComponentInstance.addNewChildComponentSchema(componentResolveContext, designerHostService); - componentResolveContext.componentSchema = componentSchema; - } - /** - * 解析拖拽元素，并根据场景展示不同的绑定窗口 - */ - async function resolveBindingSource() { - const { componentCategory } = componentResolveContext; - - switch (componentCategory) { - case 'input': { - await triggerBindingField(); - break; - } - case 'dataCollection': { - await triggerBindingEntity(); - break; - } - - } - } - /** - * 根据拖拽元素解析并创建控件 - */ - async function resolveComponentCreationContextByDrop(sourceElement: DesignerHTMLElement, sourceContainer: DesignerHTMLElement, targetContainer: DesignerHTMLElement): Promise { - componentResolveContext = getComponentResolveContext(sourceElement, sourceContainer, targetContainer); - - await resolveBindingSource(); - - // 若返回 undefined 代表终止后续生成 - if (componentResolveContext.bindingSourceContext === undefined) { - return null; - } else { - resolveComponentSchema(); - return componentResolveContext; - } - - } - - return { - getComponentResolveContext, - resolveComponentCreationContextByDrop - }; -} diff --git a/packages/mobile-ui-vue/components/designer-canvas/src/designer-canvas.component.tsx b/packages/mobile-ui-vue/components/designer-canvas/src/designer-canvas.component.tsx deleted file mode 100644 index a8b6a7287e1..00000000000 --- a/packages/mobile-ui-vue/components/designer-canvas/src/designer-canvas.component.tsx +++ /dev/null @@ -1,143 +0,0 @@ - -import { computed, defineComponent, inject, onMounted, onUnmounted, provide, ref, watch } from 'vue'; -import { ComponentSchema, DesignerComponentInstance, DesignerItemContext } from './types'; -import { canvasChanged, setPositionOfButtonGroup } from './composition/designer-canvas-changed'; -import { designerCanvasProps, DesignerCanvasPropsType } from './composition/props/designer-canvas.props'; -import { useDragula } from './composition/function/use-dragula'; -import { DesignerHostService, UseDragula } from './composition/types'; -import FDesignerItem from './components/designer-item.component'; -import './composition/class/designer-canvas.css'; -import './composition/class/control.css'; -import { loadDesignerRegister } from './components/maps'; -import { FM_MODAL_SERVICE_TOKEN } from '../../modal'; -import { FM_UI_PROVIDER_SERVICE_TOKEN } from '@farris/mobile-ui-vue/common'; - -export default defineComponent({ - name: 'FDesignerCanvas', - props: designerCanvasProps, - emits: ['init', 'selectionChange', 'canvasChanged'], - setup(props: DesignerCanvasPropsType, context) { - const schema = ref(); - const componentSchema = ref(); - const designerCanvasElementRef = ref(); - const designerCanvasContainerElementRef = ref(); - const designerItemElementRef = ref(); - const componentInstance = ref(); - const componentId = ref(props.componentId); - let resizeObserver: ResizeObserver | null; - let resizeObserverTimer; - - const designerHostService = { - eventsEditorUtils: inject('eventsEditorUtils'), - formSchemaUtils: inject('useFormSchema'), - formMetadataConverter: inject('formMetadataConverter'), - designViewModelUtils: inject('designViewModelUtils'), - controlCreatorUtils: inject('controlCreatorUtils'), - metadataService: inject('Meatdata_Http_Service_Token'), - schemaService: inject('schemaService'), - useFormCommand: inject('useFormCommand'), - modalService: inject(FM_MODAL_SERVICE_TOKEN), - formStateMachineUtils: inject('useFormStateMachine'), - uiProviderService: inject(FM_UI_PROVIDER_SERVICE_TOKEN), - - }; - provide('designer-host-service', designerHostService); - - const useDragulaComposition = useDragula(designerHostService); - loadDesignerRegister(); - - provide('canvas-dragula', useDragulaComposition); - provide('design-item-context', { - designerItemElementRef, - componentInstance, - schema: componentSchema.value, - parent: undefined - }); - - const designerCanvasClass = computed(() => { - const classObject = { - 'd-flex': true, - 'flex-fill': true, - 'flex-column': true - } as Record; - return classObject; - }); - - /** - * 用于在设计器里 - * @param designerItem - */ - function updateDesignerItem(item: any, compId: string) { - schema.value = item; - componentId.value = compId; - } - - watch(canvasChanged, () => { - setPositionOfButtonGroup(designerCanvasElementRef.value); - - context.emit('canvasChanged'); - }, { flush: 'post' }); - - /** - * 监听画布尺寸变化，重新计算操作图标位置 - */ - function registerResizeListenner() { - resizeObserver = new ResizeObserver(() => { - if (resizeObserverTimer) { - clearTimeout(resizeObserverTimer); - } - - resizeObserverTimer = setTimeout(() => { - setPositionOfButtonGroup(designerCanvasElementRef.value); - }); - }); - resizeObserver.observe(designerCanvasElementRef.value); - } - - function onSelectionChange(schemaType: string, schemaValue: ComponentSchema, cmpId: string, componentInst: DesignerComponentInstance) { - context.emit('selectionChange', schemaType, schemaValue, cmpId, componentInst); - } - - /** - * 监听画布父容器横向滚动条的滚动，重新计算操作图标位置 - */ - function registerEditorPanelScrollEvent() { - designerCanvasContainerElementRef.value.addEventListener('scroll', (e) => { - setPositionOfButtonGroup(designerCanvasElementRef.value); - }); - } - onMounted(() => { - if (designerCanvasElementRef.value) { - useDragulaComposition.initializeDragula(designerCanvasElementRef.value); - } - schema.value = props.modelValue; - context.emit('init', useDragulaComposition); - registerResizeListenner(); - registerEditorPanelScrollEvent(); - }); - - onUnmounted(() => { - if (resizeObserver) { - resizeObserver.unobserve(designerCanvasElementRef.value); - resizeObserver.disconnect(); - resizeObserver = null; - } - }); - - context.expose({ - updateDesignerItem - }); - - return () => { - return ( -
-
-
- {schema.value && } -
-
-
- ); - }; - } -}); diff --git a/packages/mobile-ui-vue/components/input-group/src/input-group.scss b/packages/mobile-ui-vue/components/input-group/src/input-group.scss index a88f7777506..b7c0776a8eb 100644 --- a/packages/mobile-ui-vue/components/input-group/src/input-group.scss +++ b/packages/mobile-ui-vue/components/input-group/src/input-group.scss @@ -42,6 +42,7 @@ background-color: transparent; &::placeholder { color: var(--fm-input-group-sub-color); + font-size: var(--fm-input-group-size); } &:disabled { opacity: 1; diff --git a/packages/mobile-ui-vue/components/list-view/src/designer/use-designer-rules.ts b/packages/mobile-ui-vue/components/list-view/src/designer/use-designer-rules.ts index eba98e41793..63b69455ba5 100644 --- a/packages/mobile-ui-vue/components/list-view/src/designer/use-designer-rules.ts +++ b/packages/mobile-ui-vue/components/list-view/src/designer/use-designer-rules.ts @@ -20,14 +20,14 @@ export function useDesignerRules(designItemContext: DesignerItemContext, designe } function checkCanMoveComponent() { - return !isInFixedContextRules; + return true; } function checkCanDeleteComponent() { - return !isInFixedContextRules; + return true; } function hideNestedPaddingInDesginerView() { - return hideNestedPadding; + return false; } function getStyles(): string { diff --git a/packages/mobile-ui-vue/components/navbar/src/schema/navbar.schema.json b/packages/mobile-ui-vue/components/navbar/src/schema/navbar.schema.json index 2de5cdc461a..f59dc40179f 100644 --- a/packages/mobile-ui-vue/components/navbar/src/schema/navbar.schema.json +++ b/packages/mobile-ui-vue/components/navbar/src/schema/navbar.schema.json @@ -35,7 +35,7 @@ "title": { "description": "标题", "type": "string", - "default": "" + "default": "导航栏" }, "leftArrow": { "description": "左侧返回按钮", diff --git a/packages/mobile-ui-vue/components/number-input/index.ts b/packages/mobile-ui-vue/components/number-input/index.ts index 3f43cf190a4..9003f2c043a 100644 --- a/packages/mobile-ui-vue/components/number-input/index.ts +++ b/packages/mobile-ui-vue/components/number-input/index.ts @@ -5,7 +5,7 @@ import NumberInputDesign from './src/designer/number-input.design.component'; export * from './src/number-input.props'; -const NUMBER_INPUT_REGISTERED_NAME = 'number-input'; +const NUMBER_INPUT_REGISTERED_NAME = 'number-spinner'; const NumberInput = withInstall(NumberInputInstallless); diff --git a/packages/mobile-ui-vue/components/number-input/src/property-config/number-input.property-config.ts b/packages/mobile-ui-vue/components/number-input/src/property-config/number-input.property-config.ts index 3d51c021344..b54c783ecea 100644 --- a/packages/mobile-ui-vue/components/number-input/src/property-config/number-input.property-config.ts +++ b/packages/mobile-ui-vue/components/number-input/src/property-config/number-input.property-config.ts @@ -8,7 +8,7 @@ export class NumberInputProperty extends InputBaseProperty { getEditorProperties(propertyData: any) { return this.getComponentConfig( propertyData, - { type: 'number-input' }, + { type: 'number-spinner' }, { precision: { description: '', diff --git a/packages/mobile-ui-vue/components/number-input/src/schema/number-input.schema.json b/packages/mobile-ui-vue/components/number-input/src/schema/number-input.schema.json index 9e63068025a..d480151a9a7 100644 --- a/packages/mobile-ui-vue/components/number-input/src/schema/number-input.schema.json +++ b/packages/mobile-ui-vue/components/number-input/src/schema/number-input.schema.json @@ -1,7 +1,7 @@ { "$schema": "https://json-schema.org/draft/2020-12/schema", "$id": "https://farris-design.gitee.io/textarea.schema.json", - "title": "number-input", + "title": "number-spinner", "description": "数字输入框", "type": "object", "properties": { @@ -12,7 +12,7 @@ "type": { "description": "控件类型", "type": "string", - "default": "number-input" + "default": "number-spinner" }, "appearance": { "description": "外观", diff --git a/packages/ui-vue/components/designer-canvas/src/components/maps.ts b/packages/ui-vue/components/designer-canvas/src/components/maps.ts index 8b28d9d155f..f09d63307bd 100644 --- a/packages/ui-vue/components/designer-canvas/src/components/maps.ts +++ b/packages/ui-vue/components/designer-canvas/src/components/maps.ts @@ -153,7 +153,7 @@ function registerDesignerComponents(components: any[]) { }; components.forEach(component => { - component.registerDesigner(componentMap, componentPropsConverter, componentPropertyConfigConverter, registerContext); + component.registerDesigner && component.registerDesigner(componentMap, componentPropsConverter, componentPropertyConfigConverter, registerContext); }); } -- Gitee From ba4769c5ae2596221ef10e642c736b2b3d2f8a3b Mon Sep 17 00:00:00 2001 From: lijiangkun Date: Thu, 14 Aug 2025 15:08:03 +0800 Subject: [PATCH 5/5] =?UTF-8?q?fix:=20=E5=AE=8C=E5=96=84=E6=8C=89=E9=92=AE?= =?UTF-8?q?=E6=8E=A7=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/designer/button-group.design.component.tsx | 10 +++++++--- .../button-group/src/designer/use-designer-rules.ts | 2 +- .../button-group/src/schema/button-group.schema.json | 2 +- .../components/button/src/schema/button.schema.json | 2 +- 4 files changed, 10 insertions(+), 6 deletions(-) diff --git a/packages/mobile-ui-vue/components/button-group/src/designer/button-group.design.component.tsx b/packages/mobile-ui-vue/components/button-group/src/designer/button-group.design.component.tsx index a96eb98b5dd..0168446c921 100644 --- a/packages/mobile-ui-vue/components/button-group/src/designer/button-group.design.component.tsx +++ b/packages/mobile-ui-vue/components/button-group/src/designer/button-group.design.component.tsx @@ -30,12 +30,16 @@ export default defineComponent({ const buttonGroupProps = computed(() => { return { - ...props, - customStyle: '' + items: props.items, + mode: props.mode, + size: props.size, + type: props.type, + round: props.round, + block: props.block, + vertical: props.vertical, }; }); - return () => ( ); diff --git a/packages/mobile-ui-vue/components/button-group/src/designer/use-designer-rules.ts b/packages/mobile-ui-vue/components/button-group/src/designer/use-designer-rules.ts index 32fe586f60a..da7c1b905f6 100644 --- a/packages/mobile-ui-vue/components/button-group/src/designer/use-designer-rules.ts +++ b/packages/mobile-ui-vue/components/button-group/src/designer/use-designer-rules.ts @@ -13,7 +13,7 @@ export function useDesignerRulesForButtonGroup(designItemContext: DesignerItemCo } function getDesignerClass(): string{ - if(designItemContext.schema.block){ + if(designItemContext.schema.block !== false){ return ' fm-button-group--block '; } return ''; diff --git a/packages/mobile-ui-vue/components/button-group/src/schema/button-group.schema.json b/packages/mobile-ui-vue/components/button-group/src/schema/button-group.schema.json index e89da23926e..3b0aaa2ba42 100644 --- a/packages/mobile-ui-vue/components/button-group/src/schema/button-group.schema.json +++ b/packages/mobile-ui-vue/components/button-group/src/schema/button-group.schema.json @@ -38,7 +38,7 @@ "default": false }, "block": { - "description": "块级元素", + "description": "占满整行", "type": "boolean", "default": true }, diff --git a/packages/mobile-ui-vue/components/button/src/schema/button.schema.json b/packages/mobile-ui-vue/components/button/src/schema/button.schema.json index 2d9556ee2b7..99b32da4d13 100644 --- a/packages/mobile-ui-vue/components/button/src/schema/button.schema.json +++ b/packages/mobile-ui-vue/components/button/src/schema/button.schema.json @@ -48,7 +48,7 @@ "default": "按钮" }, "block": { - "description": "沾满整行", + "description": "占满整行", "type": "boolean", "default": true }, -- Gitee