From b999c0e142852eba9598ac9b221313d519afb41e Mon Sep 17 00:00:00 2001 From: LuPing Zou <“zouluping@inspur.com”> Date: Mon, 21 Jul 2025 11:17:17 +0800 Subject: [PATCH 1/2] =?UTF-8?q?fix:=20=E5=AE=8C=E5=96=84=E9=9A=90=E8=97=8F?= =?UTF-8?q?=E5=8C=BA=E5=9F=9F=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- how_to_develop_component.md | 2 +- .../farris-theme/components/VPHero.vue | 2 +- .../external-component-selector.component.tsx | 5 +- ...external-component-container.component.tsx | 57 ++++++-------- .../composition/types.ts | 7 +- .../use-external-component-property.ts | 11 ++- .../composition/use-external-component.ts | 24 +++++- .../external-component-panel.component.tsx | 56 +++++++------ .../external-component-panel.props.ts | 3 +- .../external-component-panel.scss | 34 ++++++-- .../form-designer/form-designer.component.tsx | 78 +++++++++++++------ .../composition/command.service.tsx | 9 ++- .../types/toolbox/pc-rtc-toolbox.json | 2 +- .../components/types/toolbox/pc-toolbox.json | 2 +- .../farris-admin/public/assets/functions.json | 2 +- packages/farris-admin/src/assets/data.json | 2 +- packages/farris-theme/README.md | 2 +- .../farris-theme/theme/components/Readme.md | 2 +- .../theme/components/list-nav.scss | 2 +- .../theme/components/scrollspy.scss | 2 +- .../theme/interface/page-tmpl/_base.scss | 2 +- .../farris-theme/components/VPHero.vue | 2 +- .../src/designer-canvas.component.tsx | 5 +- .../property-config/lookup.property-config.ts | 10 ++- .../property-config/modal.property-config.ts | 10 ++- .../page-header.property-config.ts | 4 +- .../uploader/src/composition/use-uploader.ts | 4 +- .../designer/uploader.design.component.tsx | 18 ++--- .../uploader/src/uploader.component.tsx | 24 +++--- packages/ui-vue/demos/input-group/extend.vue | 2 +- .../farris-theme/components/VPHero.vue | 2 +- .../docs/components/input-group/index.md | 2 +- .../docs/components/search-box/index.md | 2 +- .../ui-vue/docs/components/tooltip/index.md | 2 +- style-guide/vue_component_style_guide.md | 2 +- 35 files changed, 248 insertions(+), 147 deletions(-) diff --git a/how_to_develop_component.md b/how_to_develop_component.md index 32ce3b98364..a4aee81ae28 100644 --- a/how_to_develop_component.md +++ b/how_to_develop_component.md @@ -420,7 +420,7 @@ export { componentMap, componentPropsConverter }; { "id": "HtmlTemplate", "type": "HtmlTemplate", - "name": "模版容器", + "name": "模板容器", "category": "container" }, { diff --git a/packages/charts-vue/docs/.vitepress/farris-theme/components/VPHero.vue b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPHero.vue index 9db1aee6dfc..4d25d078a07 100644 --- a/packages/charts-vue/docs/.vitepress/farris-theme/components/VPHero.vue +++ b/packages/charts-vue/docs/.vitepress/farris-theme/components/VPHero.vue @@ -34,7 +34,7 @@ const curTheme = inject('current-theme') as Ref; diff --git a/packages/designer/src/components/components/form-designer/components/external-component-panel/components/external-component-selector/external-component-selector.component.tsx b/packages/designer/src/components/components/form-designer/components/external-component-panel/components/external-component-selector/external-component-selector.component.tsx index bcb7d10ac41..d6ea25cf0ae 100644 --- a/packages/designer/src/components/components/form-designer/components/external-component-panel/components/external-component-selector/external-component-selector.component.tsx +++ b/packages/designer/src/components/components/form-designer/components/external-component-panel/components/external-component-selector/external-component-selector.component.tsx @@ -83,10 +83,13 @@ export default defineComponent({ const targetFormId = formMetadataDom.module.id; const isCurrentFormSelected = targetFormId === formBasicInfo.id; if (isCurrentFormSelected || containsNestedForm(formMetadataDom)) { - const message = `表单【${formSchema.name}】嵌套了外部表单，不支持作为弹窗使用。`; + const message = isCurrentFormSelected + ? `不支持将当前表单作为弹窗使用。` + : `表单【${formSchema.name}】嵌套了外部表单，不支持作为弹窗使用。`; FMessageBoxService.warning(message, ''); return false; } + selectedComponent.value = result.metadata; // 使用更详细的元数据信息 return true; }).catch((error) => { FMessageBoxService.error(error?.error || `查询表单【${formSchema.name}】失败`, ''); diff --git a/packages/designer/src/components/components/form-designer/components/external-component-panel/components/external-component/external-component-container.component.tsx b/packages/designer/src/components/components/form-designer/components/external-component-panel/components/external-component/external-component-container.component.tsx index aa8fe479573..efbbfd63966 100644 --- a/packages/designer/src/components/components/form-designer/components/external-component-panel/components/external-component/external-component-container.component.tsx +++ b/packages/designer/src/components/components/form-designer/components/external-component-panel/components/external-component/external-component-container.component.tsx @@ -1,93 +1,82 @@ -import { computed, inject, onMounted, Ref, ref, SetupContext } from "vue"; +import { computed, onMounted, ref } from "vue"; import { useExternalComponentDragula } from "../../composition/use-external-component-dragula"; -import { ExternalComponentPanelProps } from "../../external-component-panel.props"; import FExternalComponent from './external-component.component'; -import useExternalComponent from "../../composition/use-external-component"; -import { ExternalComponentSchema } from "../../composition/types"; +import { ExternalComponentSchema, UseExternalComponent } from "../../composition/types"; export default function ( - props: ExternalComponentPanelProps, - context: SetupContext, + externalComponentComposition: UseExternalComponent, ) { /** 外部组件的容器 */ const componentContainerRef = ref(); - /** 选中的外部组件的内码 */ - const selectedComponentId: Ref = ref(); - const externalComponentComposition = useExternalComponent(); /** 拖拽相关方法 */ const { initDragula, attachToDragulaContainer } = useExternalComponentDragula(externalComponentComposition); const externalComponents = externalComponentComposition.getComponents(); + const { isSelected } = externalComponentComposition; + /** 存在外部组件 */ const hasExternalComponents = computed(() => { return externalComponents.value.length > 0; - }) - /** 外部组件是否选中 */ - const isSelected = computed(() => { - return (externalComponentSchema: ExternalComponentSchema) => externalComponentSchema.id === selectedComponentId.value; - }) + }); /** * 点击外部组件 - * @param selectedComponent - * @param componentInstance + * @param selectedComponent 被点击的外部组件 */ - function onClick(selectedComponent: ExternalComponentSchema, componentInstance: any) { - selectedComponentId.value = selectedComponent.id; - context.emit('selectionChange', selectedComponent, componentInstance); + function onClick(selectedComponent: ExternalComponentSchema) { + externalComponentComposition.selectExternalComponent(selectedComponent); } /** * 删除外部组件 - * @param component */ function onDelete(externalComponentSchema: ExternalComponentSchema) { - selectedComponentId.value = ''; externalComponentComposition.deleteComponent(externalComponentSchema); } onMounted(() => { initDragula(componentContainerRef.value); attachToDragulaContainer(); - }) + }); /** * 渲染外部组件 - * @returns */ function renderComponent(externalComponentSchema: ExternalComponentSchema) { return ( - + - ) + ); } /** * 渲染外部组件所在的容器 - * @returns */ function renderComponentContainer() { return (
{externalComponents.value.map(renderComponent)}
- ) + ); } /** * 渲染空容器 - * @returns */ function renderEmptyContainer() { return (
-
- 从右侧拖拽模版到这里 +
+ 从右侧拖拽模板到这里
- ) + ); } return () => { @@ -99,7 +88,7 @@ export default function ( }}> {hasExternalComponents.value ? renderComponentContainer() : renderEmptyContainer()}
- ) - } + ); + }; } diff --git a/packages/designer/src/components/components/form-designer/components/external-component-panel/composition/types.ts b/packages/designer/src/components/components/form-designer/components/external-component-panel/composition/types.ts index 933087a52d2..2184d5279da 100644 --- a/packages/designer/src/components/components/form-designer/components/external-component-panel/composition/types.ts +++ b/packages/designer/src/components/components/form-designer/components/external-component-panel/composition/types.ts @@ -1,5 +1,5 @@ import { SchemaItem } from "@farris/ui-vue/components"; -import { Ref } from "vue"; +import { Ref, ComputedRef } from "vue"; export type ExternalComponentType = 'Implant' | 'Independence' | 'Lookup'; @@ -14,4 +14,7 @@ export interface UseExternalComponent { getComponents(): Ref; addComponent: (component: SchemaItem, componentType: ExternalComponentType) => void; deleteComponent: (hiddenComponentSchema: ExternalComponentSchema) => void; -} \ No newline at end of file + selectExternalComponent: (externalComponentSchema?: ExternalComponentSchema) => void; + clearExternalComponentSelection: () => void; + isSelected: ComputedRef<(externalComponentSchema: ExternalComponentSchema) => boolean>; +} 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 1e5864660e9..d9fd8b1ea99 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,7 +52,16 @@ export function useExternalComponentProperty(designerHostService: DesignerHostSe editor: propertyData }; externalLookupPropertyConfig.events.forEach(event => { - convertedPropertyData[event.label] = propertyData[event.label]; + Object.defineProperty(convertedPropertyData, event.label, { + get(): any { + return propertyData[event.label]; + }, + set(value: any) { + propertyData[event.label] = value; + }, + enumerable: true, + configurable: true, + }); }); } else { convertedPropertyData = propertyData; diff --git a/packages/designer/src/components/components/form-designer/components/external-component-panel/composition/use-external-component.ts b/packages/designer/src/components/components/form-designer/components/external-component-panel/composition/use-external-component.ts index fed8f4e9bea..67c5f5a7b74 100644 --- a/packages/designer/src/components/components/form-designer/components/external-component-panel/composition/use-external-component.ts +++ b/packages/designer/src/components/components/form-designer/components/external-component-panel/composition/use-external-component.ts @@ -1,11 +1,11 @@ -import { inject, Ref, ref } from "vue"; +import { inject, Ref, ref, SetupContext, computed } from "vue"; import { ExternalComponentSchema, ExternalComponentType, UseExternalComponent } from "./types"; import { SchemaItem, FNotifyService, getSchemaByType, lookupDataSourceConverter } from "@farris/ui-vue/components"; import { UseFormSchema } from "../../../../../../components/types"; import { IdService } from "../../../../../../components/components/view-model-designer/method-manager/service/id.service"; import { MetadataService } from "../../../../../../components/composition/metadata.service"; -export default function (): UseExternalComponent { +export default function (context: SetupContext): UseExternalComponent { const notifyService = new FNotifyService(); notifyService.globalConfig = { position: 'top-center' }; @@ -109,6 +109,17 @@ export default function (): UseExternalComponent { return propertyValue; } + const selectedComponentId: Ref = ref(); + + function selectExternalComponent(externalComponentSchema?: ExternalComponentSchema): void { + selectedComponentId.value = externalComponentSchema?.id || ''; + context.emit('selectionChange', externalComponentSchema); + } + + function clearExternalComponentSelection(): void { + selectExternalComponent(); + } + /** * 添加外部组件 * @param component 目标元数据 @@ -122,10 +133,12 @@ export default function (): UseExternalComponent { getLookupPropertyValue(component).then(propertyValue => { const helpPropertyValue = { id: propertyValueId, ...propertyValue.editor }; externalComponents.value.push(helpPropertyValue); + selectExternalComponent(helpPropertyValue); }); } else { const propertyValue = { id: propertyValueId, ...getModalPropertyValue(component) }; externalComponents.value.push(propertyValue); + selectExternalComponent(propertyValue); } } @@ -138,12 +151,19 @@ export default function (): UseExternalComponent { if (componentIndex > -1) { externalComponents.value.splice(componentIndex, 1); } + clearExternalComponentSelection(); } + const isSelected = computed(() => { + return (externalComponentSchema: ExternalComponentSchema) => externalComponentSchema.id === selectedComponentId.value; + }); return { getComponents, addComponent, deleteComponent, + selectExternalComponent, + clearExternalComponentSelection, + isSelected, }; } diff --git a/packages/designer/src/components/components/form-designer/components/external-component-panel/external-component-panel.component.tsx b/packages/designer/src/components/components/form-designer/components/external-component-panel/external-component-panel.component.tsx index e41fcfa9580..4bc0de65290 100644 --- a/packages/designer/src/components/components/form-designer/components/external-component-panel/external-component-panel.component.tsx +++ b/packages/designer/src/components/components/form-designer/components/external-component-panel/external-component-panel.component.tsx @@ -1,8 +1,8 @@ -import { defineComponent, ref, watch } from 'vue'; +import { computed, defineComponent, ref, CSSProperties } from 'vue'; import { ExternalComponentPanelProps, externalComponentPanelProps } from './external-component-panel.props'; import getExternalComponentTemplateRender from './components/external-component-template/external-component-template.component'; import getExternalComponentContainerRender from './components/external-component/external-component-container.component'; -import './external-component-panel.scss' +import './external-component-panel.scss'; import useExternalComponent from './composition/use-external-component'; export default defineComponent({ @@ -11,13 +11,15 @@ export default defineComponent({ emits: ['selectionChange'] as (string[] & ThisType) | undefined, setup(props: ExternalComponentPanelProps, context) { const showExternalComponent = ref(false); - const panelStyle = ref(`width:${props.width}px`); - const externalComponentComposition = useExternalComponent(); + const MIN_WIDTH = 200; + const BUTTON_HEIGHT = 30; + + const externalComponentComposition = useExternalComponent(context); const externalComponents = externalComponentComposition.getComponents(); /** 渲染外部组件的容器 */ - const renderExternalComponentContainer = getExternalComponentContainerRender(props, context); + const renderExternalComponentContainer = getExternalComponentContainerRender(externalComponentComposition); /** 渲染外部组件的模板 */ const renderExternalComponentTemplate = getExternalComponentTemplateRender(); @@ -35,53 +37,60 @@ export default defineComponent({ showExternalComponent.value = false; } - watch(() => props.width, (newWidth: number) => { - panelStyle.value = `width:${newWidth}px` - }) + const panelStyle = computed(() => ({ + width: `${Math.max(MIN_WIDTH, props.width)}px`, + })); + const panelTrackStyle = computed(() => ({ + maxHeight: `${Math.max(0, props.maxHeight - BUTTON_HEIGHT)}px`, + })); + + function clearSelection(): void { + externalComponentComposition.clearExternalComponentSelection(); + } + + context.expose({ clearSelection }); /** * 渲染收起面板按钮 - * @returns */ function renderShowedTopBar() { return (
- + - + 收起面板
- ) + ); } /** * 渲染隐藏区域按钮 - * @returns */ function renderCollapsedTopBar() { return (
- + - + fill="#F0F2F8" stroke="#ffffff" stroke-width="2" /> + 隐藏区域 - { externalComponents.value.length } + {externalComponents.value.length}
- ) + ); } return () => { @@ -90,15 +99,16 @@ export default defineComponent({
{showExternalComponent.value ? renderShowedTopBar() : renderCollapsedTopBar()} - ); - } + }; } }); - diff --git a/packages/designer/src/components/components/form-designer/components/external-component-panel/external-component-panel.props.ts b/packages/designer/src/components/components/form-designer/components/external-component-panel/external-component-panel.props.ts index 90cc52664b3..1981dfcc07c 100644 --- a/packages/designer/src/components/components/form-designer/components/external-component-panel/external-component-panel.props.ts +++ b/packages/designer/src/components/components/form-designer/components/external-component-panel/external-component-panel.props.ts @@ -3,7 +3,8 @@ import { ExtractPropTypes } from "vue"; export const externalComponentPanelProps = { id: { type: String, default: '' }, modelValue: { type: Object }, - width: { type: Number, default: 900 } + width: { type: Number, default: 900 }, + maxHeight: { type: Number, default: 430 }, } as Record; export type ExternalComponentPanelProps = ExtractPropTypes; diff --git a/packages/designer/src/components/components/form-designer/components/external-component-panel/external-component-panel.scss b/packages/designer/src/components/components/form-designer/components/external-component-panel/external-component-panel.scss index 64eb6ee1630..3e45ddc9314 100644 --- a/packages/designer/src/components/components/form-designer/components/external-component-panel/external-component-panel.scss +++ b/packages/designer/src/components/components/form-designer/components/external-component-panel/external-component-panel.scss @@ -6,18 +6,37 @@ padding-bottom: 40px; } -.f-external-component-panel-main-content { - display: flex; - height: 400px; +.f-external-component-panel-track { + overflow: auto; background: #F8FAFC; border-radius: 10px 10px 0px 0px; box-shadow: 0px -10px 10px -10px rgba(215, 223, 244, 1); } -.f-external-component-panel-top-bar-container { +.f-external-component-panel-main-content { display: flex; - justify-content: flex-end; - padding-right: 30px; + height: 400px; + min-width: 370px; +} + +.f-external-component-panel-top-bar-container { + display: inline-flex; + position: absolute; + top: -30px; + right: 30px; +} + +.f-external-component-panel-top-bar-container .f-icon { + position: absolute; + top: 10px; +} + +.f-external-component-panel-top-bar-container .f-icon.f-legend-show { + left: 10px; +} + +.f-external-component-panel-top-bar-container .f-icon.f-legend-collapse { + left: 8px; } .f-external-component-panel-mask { @@ -33,6 +52,8 @@ background: white; margin: 10px 10px 10px 0px; width: 15%; + min-width: 160px; + flex-shrink: 0; display: flex; flex-direction: column; align-items: center; @@ -68,6 +89,7 @@ display: flex; align-items: center; } + .f-external-component-template-text-container div { margin: auto; text-overflow: ellipsis; 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 00669c530e6..f603575d5c2 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 @@ -37,18 +37,19 @@ export default defineComponent({ dragulaCompostion.value = dragula; } const canvasRef = ref(); + const externalComponentPanelRef = ref(); const propertyConfig = ref(); const propertyName = ref(); const focusingSchema = ref(); const schemaService = useComponentSchemaService(schema); const externalComponentPanelWidth = ref(900); + const externalComponentPanelMaxHeight = ref(430); const externalComponentPanelResizeObserver = new ResizeObserver(() => { - const { designerCanvasElementRef } = canvasRef.value; - const { width } = designerCanvasElementRef.getBoundingClientRect(); - if (externalComponentPanelWidth.value !== width) { - externalComponentPanelWidth.value = width; - } + const { designerCanvasContainerElementRef } = canvasRef.value; + const { width, height } = designerCanvasContainerElementRef.getBoundingClientRect(); + externalComponentPanelWidth.value = width; + externalComponentPanelMaxHeight.value = height; }); schemaService.load(componentSchema.value); provide('SchemaService', schemaService); @@ -57,7 +58,9 @@ export default defineComponent({ const formCommandService = inject('useFormCommand') as UseFormCommandService; const useFormSchema: any = inject('useFormSchema') as UseFormSchema; - function onDesignItemClicked(schemaType: string, schemaValue: ComponentSchema, componentId: string, componentInstance: DesignerComponentInstance) { + + function onDesignItemClicked(schemaType?: string, schemaValue?: ComponentSchema, componentId?: string, componentInstance?: DesignerComponentInstance) { + clearExternalComponentSelection(); propertyName.value = schemaType; propertyPanelInstance?.value?.updateDesignerItem(componentInstance, componentId); focusingSchema.value = schemaValue; @@ -67,6 +70,10 @@ export default defineComponent({ } } + function clearExternalComponentSelection(): void { + externalComponentPanelRef.value?.clearSelection(); + } + function onCanvasChanged() { // 重组设计时viewmodel designViewModelUtils.assembleDesignViewModel(); @@ -118,13 +125,33 @@ export default defineComponent({ } } + function clearPropertyPanel(): void { + propertyName.value = undefined; + propertyPanelInstance?.value?.updateDesignerItem(undefined, undefined); + focusingSchema.value = undefined; + propertyPanelInstance.value.updatePropertyConfig({}, {}, true); + } + + function unselectCanvasDesignItem(): void { + clearPropertyPanel(); + controlTreeRef.value?.selectControlTreeNode(undefined); + clearComponentSelectionStyles(); + } + function onClickExternalComponent(propertyData: ExternalComponentSchema) { + if (!propertyData) { + clearPropertyPanel(); + return; + } + unselectCanvasDesignItem(); // 点击外部组件后，更新属性面板 - const externalComponentProperty = useExternalComponentProperty(canvasRef.value.designerHostService, propertyData); - const propertyConfig = externalComponentProperty.getPropConfig(componentId.value); - const convertedPropertyData = externalComponentProperty.getConvertedPropertyData(); - propertyPanelInstance.value.updatePropertyConfig(propertyConfig, convertedPropertyData, true); - propertyPanelInstance?.value?.updateDesignerItem(externalComponentProperty, componentId); + nextTick(() => { + const externalComponentProperty = useExternalComponentProperty(canvasRef.value.designerHostService, propertyData); + const propertyConfig = externalComponentProperty.getPropConfig(componentId.value); + const convertedPropertyData = externalComponentProperty.getConvertedPropertyData(); + propertyPanelInstance.value.updatePropertyConfig(propertyConfig, convertedPropertyData, true); + propertyPanelInstance?.value?.updateDesignerItem(externalComponentProperty, componentId); + }); } const showDesignerView = computed(() => (itemType: string) => { @@ -162,7 +189,9 @@ export default defineComponent({ function renderExternalComponentPanel() { return shouldRenderExternalComponentPanel && ( ); @@ -182,6 +211,16 @@ export default defineComponent({ } } + /** 清除画布中的已选样式 */ + function clearComponentSelectionStyles(): void { + Array.from(document.getElementsByClassName('dgComponentSelected') as HTMLCollectionOf).forEach( + (element: HTMLElement) => element.classList.remove('dgComponentSelected') + ); + Array.from(document.getElementsByClassName('dgComponentFocused') as HTMLCollectionOf).forEach( + (element: HTMLElement) => element.classList.remove('dgComponentFocused') + ); + } + function onOutlineChanged(selectionNode: any) { const selectionSchema = selectionNode.rawSchema; @@ -190,13 +229,7 @@ export default defineComponent({ propertyPanelInstance?.value?.updateDesignerItem(null, selectionSchema.id); focusingSchema.value = selectionSchema; - // 清除画布中的已选样式 - Array.from(document.getElementsByClassName('dgComponentSelected') as HTMLCollectionOf).forEach( - (element: HTMLElement) => element.classList.remove('dgComponentSelected') - ); - Array.from(document.getElementsByClassName('dgComponentFocused') as HTMLCollectionOf).forEach( - (element: HTMLElement) => element.classList.remove('dgComponentFocused') - ); + clearComponentSelectionStyles(); } if (activeDesignerView.value === 'formDesignerCode' && selectionSchema) { @@ -244,18 +277,17 @@ export default defineComponent({ } onMounted(() => { - const { designerCanvasElementRef } = canvasRef.value; - designerCanvasElementRef && externalComponentPanelResizeObserver.observe(designerCanvasElementRef); + const { designerCanvasContainerElementRef } = canvasRef.value; + designerCanvasContainerElementRef && externalComponentPanelResizeObserver.observe(designerCanvasContainerElementRef); }); onUnmounted(() => { if (externalComponentPanelResizeObserver) { - const { designerCanvasElementRef } = canvasRef.value; - designerCanvasElementRef && externalComponentPanelResizeObserver.unobserve(designerCanvasElementRef); + const { designerCanvasContainerElementRef } = canvasRef.value; + designerCanvasContainerElementRef && externalComponentPanelResizeObserver.unobserve(designerCanvasContainerElementRef); } }); - return () => { return ( diff --git a/packages/designer/src/components/composition/command.service.tsx b/packages/designer/src/components/composition/command.service.tsx index 1293e5220e9..5f2647cb771 100644 --- a/packages/designer/src/components/composition/command.service.tsx +++ b/packages/designer/src/components/composition/command.service.tsx @@ -1040,6 +1040,13 @@ export function useFormCommandService(formSchemaService: UseFormSchema, useFormS return results; } + function getControlName(propertyData: any, controlInfo: any): string { + if (propertyData.type === 'lookup' && propertyData.name && typeof propertyData.name === 'string') { + return propertyData.name; + } + return propertyData.title || propertyData.text || propertyData.label || controlInfo.name; + } + /** * 交互面板跳转到代码视图前，收集控件信息，用于自动绑定新增的方法 * @param propertyData 控件schema值 @@ -1059,7 +1066,7 @@ export function useFormCommandService(formSchemaService: UseFormSchema, useFormS const { controlInfo } = parameters; if (controlInfo) { const controlType = controlInfo.type; - const controlName = propertyData.title || propertyData.text || propertyData.label || controlInfo.name; + const controlName = getControlName(propertyData, controlInfo); if (controlType && controlType.length > 1 && controlName) { const lowerControlType = controlType.slice(0, 1).toLowerCase() + controlType.slice(1); methodCode = `${lowerControlType}${upperEventCode}`.replace(/_/g, '').replace(/-/g, ''); diff --git a/packages/designer/src/components/types/toolbox/pc-rtc-toolbox.json b/packages/designer/src/components/types/toolbox/pc-rtc-toolbox.json index 2a5084fb695..6531439aedb 100644 --- a/packages/designer/src/components/types/toolbox/pc-rtc-toolbox.json +++ b/packages/designer/src/components/types/toolbox/pc-rtc-toolbox.json @@ -102,7 +102,7 @@ { "id": "HtmlTemplate", "type": "html-template", - "name": "模版容器", + "name": "模板容器", "category": "container" }, { diff --git a/packages/designer/src/components/types/toolbox/pc-toolbox.json b/packages/designer/src/components/types/toolbox/pc-toolbox.json index fe406f53b40..45fa3db54e7 100644 --- a/packages/designer/src/components/types/toolbox/pc-toolbox.json +++ b/packages/designer/src/components/types/toolbox/pc-toolbox.json @@ -109,7 +109,7 @@ { "id": "HtmlTemplate", "type": "html-template", - "name": "模版容器", + "name": "模板容器", "category": "container" }, { diff --git a/packages/farris-admin/public/assets/functions.json b/packages/farris-admin/public/assets/functions.json index 9d7dc26d255..5ac52a1074f 100644 --- a/packages/farris-admin/public/assets/functions.json +++ b/packages/farris-admin/public/assets/functions.json @@ -4577,7 +4577,7 @@ { "id": "ea049e81-2865-d0dc-ac61-ab9b9d90be2d", "code": "PromptMgr", - "name": "提示词模版管理", + "name": "提示词模板管理", "parentId": "ea14eea9-701b-6949-92b6-3759cdfd4636", "layer": "4", "menuType": "SysMenu", diff --git a/packages/farris-admin/src/assets/data.json b/packages/farris-admin/src/assets/data.json index 2062d038a0e..312cc94c6ed 100644 --- a/packages/farris-admin/src/assets/data.json +++ b/packages/farris-admin/src/assets/data.json @@ -4579,7 +4579,7 @@ { "id": "ea049e81-2865-d0dc-ac61-ab9b9d90be2d", "code": "PromptMgr", - "name": "提示词模版管理", + "name": "提示词模板管理", "parentId": "ea14eea9-701b-6949-92b6-3759cdfd4636", "layer": "4", "menuType": "SysMenu", diff --git a/packages/farris-theme/README.md b/packages/farris-theme/README.md index 52151b85e0c..ff0725c0ff6 100644 --- a/packages/farris-theme/README.md +++ b/packages/farris-theme/README.md @@ -57,7 +57,7 @@ │ ├── components/ 组件样式，比如基础样式、标签页、按钮、树组件等 │ - ├── interface/ 非组件类的界面展示样式，比如页面模版、面包屑导航、输入控件等 + ├── interface/ 非组件类的界面展示样式，比如页面模板、面包屑导航、输入控件等 │ ├── farris-all.css 所有样式合集 │ diff --git a/packages/farris-theme/theme/components/Readme.md b/packages/farris-theme/theme/components/Readme.md index bef31a62530..15d44d32856 100644 --- a/packages/farris-theme/theme/components/Readme.md +++ b/packages/farris-theme/theme/components/Readme.md @@ -36,7 +36,7 @@ | input-group | 输入框组 | | Input、Icon | | input-append | 输入控件扩展 | ----- | | | layout | Layout 布局 | | | -| list-nav | ListNav 列表导航 实际依赖 页面模版样式 | | | +| list-nav | ListNav 列表导航 实际依赖 页面模板样式 | | | | listview | 列表视图 | | | | loading | 加载 | | | | message | Message Box 消息弹窗 | | | diff --git a/packages/farris-theme/theme/components/list-nav.scss b/packages/farris-theme/theme/components/list-nav.scss index a0f52989ff8..48139f342e6 100644 --- a/packages/farris-theme/theme/components/list-nav.scss +++ b/packages/farris-theme/theme/components/list-nav.scss @@ -90,7 +90,7 @@ .splitter-pane-collapse-animate { transition: width 0.5s ease 0s; } -/**与模版相关*/ +/**与模板相关*/ .f-template-listnav-row { .list-nav-link { diff --git a/packages/farris-theme/theme/components/scrollspy.scss b/packages/farris-theme/theme/components/scrollspy.scss index 2d4f3cad2d0..529197b5e0b 100644 --- a/packages/farris-theme/theme/components/scrollspy.scss +++ b/packages/farris-theme/theme/components/scrollspy.scss @@ -36,7 +36,7 @@ // 左右、两侧滚动监听 .f-scrollspy.f-scrollspy-sidetabs { - //避免距离模版外层太近，导致阴影被隐藏 + //避免距离模板外层太近，导致阴影被隐藏 padding:2px 0 2px 2px; .f-scrollspy-sidetabs-inner { background: $f-scrollspy-sidetabs-bg; diff --git a/packages/farris-theme/theme/interface/page-tmpl/_base.scss b/packages/farris-theme/theme/interface/page-tmpl/_base.scss index 73c1a355bd8..f2a130be3ac 100644 --- a/packages/farris-theme/theme/interface/page-tmpl/_base.scss +++ b/packages/farris-theme/theme/interface/page-tmpl/_base.scss @@ -193,7 +193,7 @@ Visual 外观 } /******************************* - 向导模版 + 向导模板 *******************************/ .#{$f-page-prefix}-is-wizard { .#{$f-page-prefix}-main { diff --git a/packages/mobile-ui-vue/docs/.vitepress/farris-theme/components/VPHero.vue b/packages/mobile-ui-vue/docs/.vitepress/farris-theme/components/VPHero.vue index fa831512aa0..4ece870b9d0 100644 --- a/packages/mobile-ui-vue/docs/.vitepress/farris-theme/components/VPHero.vue +++ b/packages/mobile-ui-vue/docs/.vitepress/farris-theme/components/VPHero.vue @@ -34,7 +34,7 @@ const curTheme = inject('current-theme') as Ref; diff --git a/packages/ui-vue/components/designer-canvas/src/designer-canvas.component.tsx b/packages/ui-vue/components/designer-canvas/src/designer-canvas.component.tsx index fc83f2e3acb..7f541e6569f 100644 --- a/packages/ui-vue/components/designer-canvas/src/designer-canvas.component.tsx +++ b/packages/ui-vue/components/designer-canvas/src/designer-canvas.component.tsx @@ -87,7 +87,6 @@ export default defineComponent({ return classObject; }); - watch([() => props.modelValue, () => props.componentId], ([newSchema, newComponentId]) => { schema.value = newSchema; @@ -148,7 +147,9 @@ export default defineComponent({ resizeObserver = null; } }); - context.expose({ refreshCanvas, changeCanvas, designerCanvasElementRef, designerHostService }); + + context.expose({ refreshCanvas, changeCanvas, designerCanvasElementRef, designerCanvasContainerElementRef, designerHostService }); + return () => { return (
diff --git a/packages/ui-vue/components/lookup/src/property-config/lookup.property-config.ts b/packages/ui-vue/components/lookup/src/property-config/lookup.property-config.ts index 1979274201f..afa00f9f34e 100644 --- a/packages/ui-vue/components/lookup/src/property-config/lookup.property-config.ts +++ b/packages/ui-vue/components/lookup/src/property-config/lookup.property-config.ts @@ -587,24 +587,26 @@ export class LookupPropertyConfig extends InputBaseProperty { visible: propertyData.editor.openType !== 'Popup' }, width: { - description: "窗口宽度，最小值：300px", + description: "窗口宽度，最小值：300px，最大值：3000px", title: "宽度", type: "number", refreshPanelAfterChanged: true, $converter: lookupDialogOptionsConverter, editor: { ...this.numberEditor, - min: this.showNavigatiorWidth(propertyData.editor) ? 520 : 300 + min: this.showNavigatiorWidth(propertyData.editor) ? 520 : 300, + max: 3000, } }, height: { - description: "窗口高度，最小值：200px", + description: "窗口高度，最小值：200px，最大值：2000px", title: "高度", type: "number", $converter: lookupDialogOptionsConverter, editor: { ...this.numberEditor, - min: 200 + min: 200, + max: 2000, } }, showNavigation: { diff --git a/packages/ui-vue/components/modal/src/property-config/modal.property-config.ts b/packages/ui-vue/components/modal/src/property-config/modal.property-config.ts index 1fe57437782..72a57b7d066 100644 --- a/packages/ui-vue/components/modal/src/property-config/modal.property-config.ts +++ b/packages/ui-vue/components/modal/src/property-config/modal.property-config.ts @@ -32,21 +32,23 @@ export class ModalProperty extends BaseControlProperty { visible: true }, width: { - description: "窗口宽度，最小值：300px", + description: "窗口宽度，最小值：300px，最大值：3000px", title: "宽度", type: "number", editor: { ...this.numberEditor, - min: 300 + min: 300, + max: 3000, } }, height: { - description: "窗口高度，最小值：200px", + description: "窗口高度，最小值：200px，最大值：2000px", title: "高度", type: "number", editor: { ...this.numberEditor, - min: 200 + min: 200, + max: 2000, } }, resizeable: { diff --git a/packages/ui-vue/components/page-header/src/property-config/page-header.property-config.ts b/packages/ui-vue/components/page-header/src/property-config/page-header.property-config.ts index 31600ddf207..88f10709748 100644 --- a/packages/ui-vue/components/page-header/src/property-config/page-header.property-config.ts +++ b/packages/ui-vue/components/page-header/src/property-config/page-header.property-config.ts @@ -82,7 +82,7 @@ export class PageHeaderProperty extends BaseControlProperty { contentHtml: { title: '内容模板', type: 'string', - description: '设置页头中间区域的模版', + description: '设置页头中间区域的模板', refreshPanelAfterChanged: true, editor: { type: "code-editor", @@ -97,7 +97,7 @@ export class PageHeaderProperty extends BaseControlProperty { downContentHtml: { title: '扩展模板', type: 'string', - description: '设置页头下方区域的模版', + description: '设置页头下方区域的模板', refreshPanelAfterChanged: true, editor: { type: "code-editor", diff --git a/packages/ui-vue/components/uploader/src/composition/use-uploader.ts b/packages/ui-vue/components/uploader/src/composition/use-uploader.ts index d4421e28f50..9697ab6fd53 100644 --- a/packages/ui-vue/components/uploader/src/composition/use-uploader.ts +++ b/packages/ui-vue/components/uploader/src/composition/use-uploader.ts @@ -35,7 +35,7 @@ export function useUploader(props: UploaderProps, ctx: SetupContext, fileSelectR const previewSelectAllBtnChecked = ref(false); // 记录选中数据 const previewMultiSelected: Ref> = ref([]); - // 用于模版的展示 + // 用于模板的展示 const previewMultiSelectedLength = computed(() => { return previewMultiSelected.value.length; }); @@ -112,7 +112,7 @@ export function useUploader(props: UploaderProps, ctx: SetupContext, fileSelectR }; /** - * 找到模版 + * 找到模板 */ const hasColumnHtmlFunc = (columnInfo: FUploadPreviewColumn, type = 'preview') => { if (columnInfo.formatter) { diff --git a/packages/ui-vue/components/uploader/src/designer/uploader.design.component.tsx b/packages/ui-vue/components/uploader/src/designer/uploader.design.component.tsx index 28ef40e0448..b0794e529e4 100644 --- a/packages/ui-vue/components/uploader/src/designer/uploader.design.component.tsx +++ b/packages/ui-vue/components/uploader/src/designer/uploader.design.component.tsx @@ -38,7 +38,7 @@ export default defineComponent({ const innerFileInfos = [{ id: "attach01", name: "" }, { id: "attach02", name: "" }]; /** - * 获取模版相关参数 + * 获取模板相关参数 */ const { disabled, @@ -105,7 +105,7 @@ export default defineComponent({ return null; } /** - * 返回预览文件的名称模版 + * 返回预览文件的名称模板 * @param previewInfo * @returns */ @@ -121,7 +121,7 @@ export default defineComponent({ }; /** - * 返回文件大小的模版 + * 返回文件大小的模板 * @param state * @param fileInfo * @returns @@ -147,7 +147,7 @@ export default defineComponent({
; } /** - * 返回预览按钮模版 + * 返回预览按钮模板 * @param previewInfo * @returns */ @@ -178,7 +178,7 @@ export default defineComponent({ return
; }; /** - * 找到模版 + * 找到模板 */ function findColumnHtmlFunc(state, previewInfo: any, columnInfo: FUploadPreviewColumn) { let result = null; @@ -207,7 +207,7 @@ export default defineComponent({ return result; }; /** - * 获取附件上传子组件模版 + * 获取附件上传子组件模板 * @returns */ function getFileSelectHtml() { @@ -219,7 +219,7 @@ export default defineComponent({ return null; } /** - * 获取头部按钮的模版 + * 获取头部按钮的模板 */ function getHeaderButtonHtml() { const canShowOneButton = !downloadButtonDisable.value || !props.deleteButtonDisable; @@ -233,7 +233,7 @@ export default defineComponent({ return null; } /** - * 获取列表头部模版 + * 获取列表头部模板 */ function getListHeaderHtml() { return previewColumns.value.map((column: FUploadPreviewColumn) => ( @@ -250,7 +250,7 @@ export default defineComponent({ )); } /** - * 获取预览列表模版 + * 获取预览列表模板 */ function getPreviewListHtml() { return innerFileInfos.map((previewInfo: FUploadFileExtend) => ( diff --git a/packages/ui-vue/components/uploader/src/uploader.component.tsx b/packages/ui-vue/components/uploader/src/uploader.component.tsx index fc389706b7e..110d24b89be 100644 --- a/packages/ui-vue/components/uploader/src/uploader.component.tsx +++ b/packages/ui-vue/components/uploader/src/uploader.component.tsx @@ -46,7 +46,7 @@ export default defineComponent({ const fileSelectRef = ref(null); /** - * 获取模版相关参数 + * 获取模板相关参数 */ const { disabled, @@ -148,7 +148,7 @@ export default defineComponent({ } /** - * 返回上传附件的名称模版 + * 返回上传附件的名称模板 * @param uploadInfo * @returns */ @@ -172,7 +172,7 @@ export default defineComponent({ }; /** - * 返回预览文件的名称模版 + * 返回预览文件的名称模板 * @param previewInfo * @returns */ @@ -195,7 +195,7 @@ export default defineComponent({ }; /** - * 返回文件大小的模版 + * 返回文件大小的模板 * @param state * @param fileInfo * @returns @@ -246,7 +246,7 @@ export default defineComponent({ ); }; /** - * 返回预览按钮模版 + * 返回预览按钮模板 * @param previewInfo * @returns */ @@ -278,7 +278,7 @@ export default defineComponent({ }; /** - * 找到模版 + * 找到模板 */ function findColumnHtmlFunc(state, uploadInfo: UploadOutput | null, previewInfo: any, columnInfo: FUploadPreviewColumn) { let result; @@ -327,7 +327,7 @@ export default defineComponent({ return result; }; /** - * 获取附件上传子组件模版 + * 获取附件上传子组件模板 * @returns */ function getFileSelectHtml() { @@ -340,7 +340,7 @@ export default defineComponent({ return null; } /** - * 获取附件个数、附件已选信息的模版 + * 获取附件个数、附件已选信息的模板 * @returns */ function getAttachCountHtml() { @@ -356,7 +356,7 @@ export default defineComponent({ return null; } /** - * 获取头部按钮的模版 + * 获取头部按钮的模板 */ function getHeaderButtonHtml() { const canShowOneButton = !downloadButtonDisable.value || !props.deleteButtonDisable; @@ -375,7 +375,7 @@ export default defineComponent({ return null; } /** - * 获取列表头部模版 + * 获取列表头部模板 */ function getListHeaderHtml() { return previewColumns.value.map((column: FUploadPreviewColumn) => ( @@ -393,7 +393,7 @@ export default defineComponent({ )); } /** - * 获取上传列表模版 + * 获取上传列表模板 */ function getUploadListHtml() { return uploadFiles.value.map((uploadInfo: UploadOutput) => ( @@ -416,7 +416,7 @@ export default defineComponent({ )); } /** - * 获取预览列表模版 + * 获取预览列表模板 */ function getPreviewListHtml() { return innerFileInfos.value.map((previewInfo: FUploadFileExtend) => ( diff --git a/packages/ui-vue/demos/input-group/extend.vue b/packages/ui-vue/demos/input-group/extend.vue index 5293b20944a..f2a0d8d78dd 100644 --- a/packages/ui-vue/demos/input-group/extend.vue +++ b/packages/ui-vue/demos/input-group/extend.vue @@ -47,7 +47,7 @@ function onUpdateExtendInfo() {
- +