diff --git a/packages/designer/src/components/types/toolbox/pc-toolbox.json b/packages/designer/src/components/types/toolbox/pc-toolbox.json index 37a76ad4852e2de90621995114c1021945d6ee93..57d0ba4a51096f132513436257c7edd874b5dd5d 100644 --- a/packages/designer/src/components/types/toolbox/pc-toolbox.json +++ b/packages/designer/src/components/types/toolbox/pc-toolbox.json @@ -129,6 +129,32 @@ "name": "外部容器", "category": "container", "icon":"content-container" + }, + { + "id":"Tag", + "type":"tags", + "name":"标签", + "category":"container", + "icon":"tag" + } + ] + }, + { + "type": "form", + "name": "表单类控件", + "items": [ + { + "id": "Input", + "type": "input", + "name": "输入框", + "category": "form" + + }, + { + "id":"Rate", + "type":"rate", + "name":"评分", + "category":"form" } ] }, diff --git a/packages/ui-vue/components/tags/src/designer/tags.design.component.tsx b/packages/ui-vue/components/tags/src/designer/tags.design.component.tsx index fc16478c75b36c6c285249d8a327f2bfe133210a..dad1756390b8e850d36b17dde64b4d9b8776b0fa 100644 --- a/packages/ui-vue/components/tags/src/designer/tags.design.component.tsx +++ b/packages/ui-vue/components/tags/src/designer/tags.design.component.tsx @@ -1,6 +1,7 @@ import { computed, defineComponent, inject, nextTick, onMounted, ref, SetupContext, watch } from 'vue'; import { Tag, TagsProps, tagsProps } from '../tags.props'; import { useDraggable } from '../composition/use-draggable'; +import { useTagDesignerRules } from '../designer/use-designer-rules'; import { TagsInnerElement } from '../composition/types'; import { useDesignerComponent } from '../../../designer-canvas/src/composition/function/use-designer-component'; import { DesignerItemContext } from '../../../designer-canvas/src/types'; @@ -31,8 +32,10 @@ export default defineComponent({ const inputBoxRef = ref(); const elementRef = ref(); + const designerHostService = inject('designer-host-service'); const designItemContext = inject('design-item-context') as DesignerItemContext; - const componentInstance = useDesignerComponent(elementRef, designItemContext); + const designerRulesComposition = useTagDesignerRules(designItemContext.schema, designerHostService); + const componentInstance = useDesignerComponent(elementRef, designItemContext,designerRulesComposition); onMounted(() => { elementRef.value.componentInstance = componentInstance; diff --git a/packages/ui-vue/components/tags/src/designer/use-designer-rules.ts b/packages/ui-vue/components/tags/src/designer/use-designer-rules.ts new file mode 100644 index 0000000000000000000000000000000000000000..75c497a283ceaa12b258125517ee01cf6762f09f --- /dev/null +++ b/packages/ui-vue/components/tags/src/designer/use-designer-rules.ts @@ -0,0 +1,43 @@ +import { DraggingResolveContext, UseDesignerRules } from "../../../designer-canvas/src/composition/types"; +import { ComponentSchema } from "../../../designer-canvas/src/types"; +import { TagProperty } from '../property-config/tags.proprety-config'; // 假设存在这个类 + +export function useTagDesignerRules(schema: ComponentSchema, designerHostService): UseDesignerRules { + /** + * 判断是否可以接收拖拽新增的子级控件 + */ + function canAccepts(draggingContext: DraggingResolveContext): boolean { + // 假设 Tag 组件可以接受子组件（比如可以嵌套其他简单组件） + return false; + } + + function checkCanDeleteComponent() { + // Tag 组件可以被删除 + return true; + } + + function checkCanMoveComponent() { + // Tag 组件可以被移动 + return true; + } + + function hideNestedPaddingInDesginerView() { + // 不隐藏嵌套内边距 + return false; + } + + // 构造属性配置方法 + function getPropsConfig(componentId: string) { + const tagProp = new TagProperty(componentId, designerHostService); + + return tagProp.getPropertyConfig(schema); + } + + return { + canAccepts, + hideNestedPaddingInDesginerView, + getPropsConfig, + checkCanDeleteComponent, + checkCanMoveComponent + }; +} \ No newline at end of file diff --git a/packages/ui-vue/components/tags/src/property-config/tags.proprety-config.ts b/packages/ui-vue/components/tags/src/property-config/tags.proprety-config.ts new file mode 100644 index 0000000000000000000000000000000000000000..139b39c9a5205793be6a77b407de4e46b6fa24e0 --- /dev/null +++ b/packages/ui-vue/components/tags/src/property-config/tags.proprety-config.ts @@ -0,0 +1,110 @@ + +import { BaseControlProperty } from "../../../property-panel/src/composition/entity/base-property"; + + +export class TagProperty extends BaseControlProperty { + constructor(componentId: string, designerHostService: any) { + super(componentId, designerHostService); + } + + getPropertyConfig(propertyData: any) { + // 基本信息（假设由基类提供，这里可以不重复定义） + this.propertyConfig.categories['basic'] = this.getBasicPropConfig(propertyData); + + // 外观配置（自定义） + this.propertyConfig.categories['appearance'] = this.getAppearanceProperties(propertyData); + + // （可选）如果需要模板配置，可以仿照 PageHeader 添加 getTemplateConfig + // 但 Tag 通常不需要复杂模板，这里暂不实现 + + // 行为配置（假设由基类提供，如事件绑定等） + this.propertyConfig.categories['behavior'] = this.getBehaviorConfig(propertyData); + + return this.propertyConfig; + } + + /** + * 定义“外观”分类下的属性 + */ + private getAppearanceProperties(propertyData: any) { + return { + title: '外观', + description: '配置标签的外观样式', + properties: { + data: { + title: '标签文字', + type: "array", + description: '标签显示的文本内容', + editor: { + columns:[ + { field : 'id', title: '标签ID', dataType: 'string'}, + { field: 'name', title: '标签名称', dataType: 'string' }, + + ], + type:'item-collection-editor', + valueField: 'id', + nameField: 'name', + requiredFields:['id','name'], + uniqueFields: ['id','name'] + + }, + defaultValue: [{ name: '示例1' },] // 正确的默认值（数组） // 默认值 + }, + tagType: { + title: '颜色类型', + type: 'select', + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + idField: 'value', + editable: false, + data: [ + { value: 'default', name: '默认' }, + { value: 'warning', name: '警告' }, + { value: 'success', name: '成功' }, + { value: 'info', name: '消息' }, + { value: 'error', name: '异常' } + ] + }, + defaultValue: 'default' + }, + tagStyle: { + title: '显示类型', + type: 'select', + editor: { + type: 'combo-list', + textField: 'name', + valueField: 'value', + idField: 'value', + editable: false, + data: [ + { value: 'default', name: '默认' }, + { value: 'capsule', name: '胶囊体' } + ] + }, + defaultValue: 'default' + }, + + }, + setPropertyRelates(changeObject, prop) { + // 可以在这里定义属性变更时的联动逻辑 + // 例如：修改颜色后需要刷新控件样式 + switch (changeObject && changeObject.propertyID) { + case 'data': { + changeObject.needRefreshControlTree = true; + break; + } + case 'tagType': { + changeObject.needRefreshControlTree = true; + break; + } + case 'tagStyle':{ + changeObject.needRefreshControlTree = true; + break; + } + } + } + }; + } +} \ No newline at end of file diff --git a/packages/ui-vue/components/tags/src/schema/schema-resolver.ts b/packages/ui-vue/components/tags/src/schema/schema-resolver.ts index b02bdf93eec9060948f579c53aa81e3963a7d706..d2c54a0bb7223cbc272eb63e8d496d4d1adae386 100644 --- a/packages/ui-vue/components/tags/src/schema/schema-resolver.ts +++ b/packages/ui-vue/components/tags/src/schema/schema-resolver.ts @@ -1,5 +1,9 @@ import { DynamicResolver } from "../../../dynamic-resolver"; export function schemaResolver(resolver: DynamicResolver, schema: Record, context: Record): Record { + schema.data = [{ + name: '示例1' + } + ] return schema; } diff --git a/packages/ui-vue/components/tags/src/schema/tags.schema.json b/packages/ui-vue/components/tags/src/schema/tags.schema.json index ee7db4d8ba11446ae1d0b85bfba5e0f40b939f40..f162aec89f60b6dffaa95ad9e5fbc7c9b2d01b35 100644 --- a/packages/ui-vue/components/tags/src/schema/tags.schema.json +++ b/packages/ui-vue/components/tags/src/schema/tags.schema.json @@ -65,6 +65,21 @@ "description": "", "type": "boolean", "default": true + }, + "tagType": { + "description": "", + "type": "string", + "default": "default" + }, + "data": { + "description": "", + "type": "array", + "default": [] + }, + "tagStyle": { + "description": "", + "type": "string", + "default": "default" } }, "required": [ diff --git a/packages/ui-vue/components/tags/src/tags.props.ts b/packages/ui-vue/components/tags/src/tags.props.ts index 04dcdb91d4b9ebf26082ddd9932e148b173ec09c..3a173fca1dc3a9b9302511a35cf5bef7d68fbd09 100644 --- a/packages/ui-vue/components/tags/src/tags.props.ts +++ b/packages/ui-vue/components/tags/src/tags.props.ts @@ -2,7 +2,7 @@ import { ExtractPropTypes, PropType } from 'vue'; import { schemaResolver } from './schema/schema-resolver'; import { schemaMapper } from './schema/schema-mapper'; -import propertyConfig from './property-config/tags.property-config.json'; +// import propertyConfig from './property-config/tags.proprety-config'; import { createPropsResolver } from '../../dynamic-resolver/src/props-resolver'; import tagsSchema from './schema/tags.schema.json'; @@ -39,4 +39,4 @@ export const tagsProps = { } as Record; export type TagsProps = ExtractPropTypes; -export const propsResolver = createPropsResolver(tagsProps, tagsSchema, schemaMapper, schemaResolver, propertyConfig); +export const propsResolver = createPropsResolver(tagsProps, tagsSchema, schemaMapper, schemaResolver); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f5f3dfe613770e6c2298d75118fdf92f2dc360da..0025d88bced1d7dde9fce7e75debab279ab8dc10 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -23516,7 +23516,6 @@ snapshots: - '@vitest/browser' - '@vitest/ui' - encoding - - happy-dom - jsdom - less - lightningcss @@ -23525,7 +23524,6 @@ snapshots: - sugarss - supports-color - terser - - vite vite-plugin-md@0.20.6(jsdom@20.0.3)(sass@1.80.3)(terser@5.36.0): dependencies: @@ -23555,7 +23553,7 @@ snapshots: '@yankeeinlondon/happy-wrapper': 2.10.1(jsdom@20.0.3)(sass@1.80.3)(terser@5.36.0) markdown-it: 13.0.2 source-map-js: 1.2.1 - vite: 5.4.9(@types/node@18.19.57)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0) + vite: 5.4.9(@types/node@20.5.1)(sass-embedded@1.80.3)(sass@1.80.3)(terser@5.36.0) transitivePeerDependencies: - '@edge-runtime/vm' - '@vitest/browser'