diff --git a/packages/shared/src/setters.ts b/packages/shared/src/setters.ts index 34e5734..cf57554 100644 --- a/packages/shared/src/setters.ts +++ b/packages/shared/src/setters.ts @@ -1,3 +1,5 @@ +import type { IBaseRendererInstance } from '@alilc/lowcode-renderer-core/lib/types'; + /** * 所有设置器 */ @@ -157,3 +159,8 @@ export const STYLE_ONLY_CSS_CODE_PROP = { }, }, }; + +export const getSimulatorRenderer = () => { + const renderer = (window as any).AliLowCodeEngine.project.simulator.renderer; + return renderer[Object.getOwnPropertySymbols(renderer)[0]] as IBaseRendererInstance; +}; diff --git a/packages/yunti-ui-lowcode-materials/lowcode/Page/meta/breadcrumb.ts b/packages/yunti-ui-lowcode-materials/lowcode/Page/meta/breadcrumb.ts new file mode 100644 index 0000000..ca68e2c --- /dev/null +++ b/packages/yunti-ui-lowcode-materials/lowcode/Page/meta/breadcrumb.ts @@ -0,0 +1,126 @@ +import { IPublicTypeComponentMetadata } from '@alilc/lowcode-types'; + +import { Setters } from '../../../../shared/src/setters'; +import { COMMON_CONFIGURE_PROPS, getPriority } from '../../utils'; +import { PageBreadcrumbSnippets } from '../snippets'; + +export const PageBreadcrumbMeta: IPublicTypeComponentMetadata = { + title: 'PageBreadcrumb', + componentName: 'Page.Breadcrumb', + category: '布局', + snippets: PageBreadcrumbSnippets, + priority: getPriority('Page.Breadcrumb'), + devMode: 'proCode', + npm: { + package: '@yuntijs/ui-lowcode-materials', + version: '{{version}}', + exportName: 'Page', + destructuring: true, + subName: 'Breadcrumb', + }, + configure: { + props: [ + ...COMMON_CONFIGURE_PROPS, + { + title: '常用配置', + display: 'block', + type: 'group', + items: [ + { + name: 'items', + title: { + label: '路由栈', + }, + setter: { + ...Setters.ArraySetter, + props: { + itemSetter: { + ...Setters.ObjectSetter, + props: { + config: { + items: [ + { + name: 'title', + title: { + label: '名称', + }, + isRequired: true, + defaultValue: '名称', + setter: Setters.StringSetter, + }, + { + name: 'path', + title: { + label: '拼接路径', + tip: '每一层都会拼接前一个 path 信息,不能和 href 共用', + }, + setter: Setters.StringSetter, + }, + { + name: 'href', + title: { + label: '链接', + tip: '链接的目的地,不能和 path 共用', + }, + setter: Setters.StringSetter, + }, + ], + }, + }, + }, + }, + }, + }, + { + name: 'subTitle', + title: { + label: '副标题', + tip: '副标题或描述', + }, + defaultValue: '我是副标题', + setter: Setters.StringSetter, + }, + { + name: 'bordered', + title: { + label: '边框', + }, + defaultValue: false, + setter: Setters.BoolSetter, + }, + { + name: 'divider', + title: { + label: '分割线', + tip: '控制 header 与 content 的分割线,当 bordered 为 true 时,divider 自动设置为 false', + }, + defaultValue: true, + setter: Setters.BoolSetter, + }, + ], + }, + { + title: '高级配置', + display: 'block', + type: 'group', + items: [ + { + name: 'separator', + title: { + label: '分隔符', + }, + }, + ], + }, + ], + supports: { + loop: false, + condition: true, + style: true, + events: [], + }, + component: { + isContainer: false, + }, + }, +}; diff --git a/packages/yunti-ui-lowcode-materials/lowcode/Page/meta/content.ts b/packages/yunti-ui-lowcode-materials/lowcode/Page/meta/content.ts new file mode 100644 index 0000000..68482ff --- /dev/null +++ b/packages/yunti-ui-lowcode-materials/lowcode/Page/meta/content.ts @@ -0,0 +1,59 @@ +import { IPublicTypeComponentMetadata } from '@alilc/lowcode-types'; + +import { Setters } from '../../../../shared/src/setters'; +import { COMMON_CONFIGURE_PROPS, getPriority } from '../../utils'; +import { PageContentSnippets } from '../snippets'; + +export const PageContentMeta: IPublicTypeComponentMetadata = { + title: 'PageContent', + componentName: 'Page.Content', + category: '布局', + snippets: PageContentSnippets, + priority: getPriority('Page.Content'), + devMode: 'proCode', + npm: { + package: '@yuntijs/ui-lowcode-materials', + version: '{{version}}', + exportName: 'Page', + destructuring: true, + subName: 'Content', + }, + configure: { + props: [ + ...COMMON_CONFIGURE_PROPS, + { + title: '常用配置', + display: 'block', + type: 'group', + items: [ + { + name: 'vertical', + title: { + label: '垂直布局', + }, + defaultValue: true, + setter: Setters.BoolSetter, + }, + { + name: 'gap', + title: { + label: '间隙', + tip: '设置网格之间的间隙', + }, + defaultValue: 16, + setter: Setters.NumberSetter, + }, + ], + }, + ], + supports: { + loop: false, + condition: true, + style: true, + events: [], + }, + component: { + isContainer: true, + }, + }, +}; diff --git a/packages/yunti-ui-lowcode-materials/lowcode/Page/meta.ts b/packages/yunti-ui-lowcode-materials/lowcode/Page/meta/header.ts similarity index 66% rename from packages/yunti-ui-lowcode-materials/lowcode/Page/meta.ts rename to packages/yunti-ui-lowcode-materials/lowcode/Page/meta/header.ts index 513959e..e300730 100644 --- a/packages/yunti-ui-lowcode-materials/lowcode/Page/meta.ts +++ b/packages/yunti-ui-lowcode-materials/lowcode/Page/meta/header.ts @@ -1,129 +1,8 @@ import { IPublicTypeComponentMetadata } from '@alilc/lowcode-types'; -import { CLASS_NAME_PROP, STYLE_ONLY_CSS_CODE_PROP, Setters } from '../../../shared/src/setters'; -import { COMMON_CONFIGURE_PROPS, getPriority } from '../utils'; -import { PageBreadcrumbSnippets, PageHeaderSnippets, PageSnippets } from './snippets'; - -export const PageBreadcrumbMeta: IPublicTypeComponentMetadata = { - title: 'PageBreadcrumb', - componentName: 'Page.Breadcrumb', - category: '布局', - snippets: PageBreadcrumbSnippets, - priority: getPriority('Page.Breadcrumb'), - devMode: 'proCode', - npm: { - package: '@yuntijs/ui-lowcode-materials', - version: '{{version}}', - exportName: 'Page', - destructuring: true, - subName: 'Breadcrumb', - }, - configure: { - props: [ - ...COMMON_CONFIGURE_PROPS, - { - title: '常用配置', - display: 'block', - type: 'group', - items: [ - { - name: 'items', - title: { - label: '路由栈', - }, - setter: { - ...Setters.ArraySetter, - props: { - itemSetter: { - ...Setters.ObjectSetter, - props: { - config: { - items: [ - { - name: 'title', - title: { - label: '名称', - }, - isRequired: true, - defaultValue: '名称', - setter: Setters.StringSetter, - }, - { - name: 'path', - title: { - label: '拼接路径', - tip: '每一层都会拼接前一个 path 信息,不能和 href 共用', - }, - setter: Setters.StringSetter, - }, - { - name: 'href', - title: { - label: '链接', - tip: '链接的目的地,不能和 path 共用', - }, - setter: Setters.StringSetter, - }, - ], - }, - }, - }, - }, - }, - }, - { - name: 'subTitle', - title: { - label: '副标题', - tip: '副标题或描述', - }, - defaultValue: '我是副标题', - setter: Setters.StringSetter, - }, - { - name: 'bordered', - title: { - label: '边框', - }, - defaultValue: false, - setter: Setters.BoolSetter, - }, - { - name: 'divider', - title: { - label: '分割线', - tip: '控制 header 与 content 的分割线,当 bordered 为 true 时,divider 自动设置为 false', - }, - defaultValue: true, - setter: Setters.BoolSetter, - }, - ], - }, - { - title: '高级配置', - display: 'block', - type: 'group', - items: [ - { - name: 'separator', - title: { - label: '分隔符', - }, - }, - ], - }, - ], - supports: { - loop: false, - condition: true, - style: true, - events: [], - }, - component: { - isContainer: false, - }, - }, -}; +import { CLASS_NAME_PROP, STYLE_ONLY_CSS_CODE_PROP, Setters } from '../../../../shared/src/setters'; +import { COMMON_CONFIGURE_PROPS, getPriority } from '../../utils'; +import { PageHeaderSnippets } from '../snippets'; export const PageHeaderMeta: IPublicTypeComponentMetadata = { title: 'PageHeader', @@ -472,123 +351,3 @@ export const PageHeaderMeta: IPublicTypeComponentMetadata = { }, }, }; - -export const PageContentMeta: IPublicTypeComponentMetadata = { - title: 'PageContent', - componentName: 'Page.Content', - category: '布局', - // snippets: PageSnippets, - priority: getPriority('Page.Content'), - devMode: 'proCode', - npm: { - package: '@yuntijs/ui-lowcode-materials', - version: '{{version}}', - exportName: 'Page', - destructuring: true, - subName: 'Content', - }, - configure: { - props: [ - ...COMMON_CONFIGURE_PROPS, - { - title: '常用配置', - display: 'block', - type: 'group', - items: [ - { - name: 'vertical', - title: { - label: '垂直布局', - }, - defaultValue: true, - setter: Setters.BoolSetter, - }, - { - name: 'gap', - title: { - label: '间隙', - tip: '设置网格之间的间隙', - }, - defaultValue: 16, - setter: Setters.NumberSetter, - }, - ], - }, - ], - supports: { - loop: false, - condition: true, - style: true, - events: [], - }, - component: { - isContainer: true, - }, - }, -}; - -export const PageMeta: IPublicTypeComponentMetadata = { - title: 'Page', - componentName: 'Page', - category: '布局', - snippets: PageSnippets, - priority: getPriority('Page'), - devMode: 'proCode', - npm: { - package: '@yuntijs/ui-lowcode-materials', - version: '{{version}}', - exportName: 'Page', - destructuring: true, - subName: '', - }, - configure: { - props: [ - ...COMMON_CONFIGURE_PROPS, - { - title: '常用配置', - display: 'block', - type: 'group', - items: [ - { - name: 'loading', - title: { - label: '加载中', - }, - defaultValue: false, - setter: Setters.BoolSetter, - }, - { - name: 'status', - title: { - label: '状态', - }, - setter: { - ...Setters.RadioGroupSetter, - props: { - options: ['403', '404', '500'], - }, - }, - }, - { - name: 'gap', - title: { - label: '间隙', - tip: '设置网格之间的间隙', - }, - defaultValue: 16, - setter: Setters.NumberSetter, - }, - ], - }, - ], - supports: { - loop: false, - condition: true, - style: true, - events: [], - }, - component: { - isContainer: true, - }, - }, -}; diff --git a/packages/yunti-ui-lowcode-materials/lowcode/Page/meta/index.ts b/packages/yunti-ui-lowcode-materials/lowcode/Page/meta/index.ts new file mode 100644 index 0000000..ca77ff3 --- /dev/null +++ b/packages/yunti-ui-lowcode-materials/lowcode/Page/meta/index.ts @@ -0,0 +1,4 @@ +export * from './breadcrumb'; +export * from './content'; +export * from './header'; +export * from './page'; diff --git a/packages/yunti-ui-lowcode-materials/lowcode/Page/meta/page.ts b/packages/yunti-ui-lowcode-materials/lowcode/Page/meta/page.ts new file mode 100644 index 0000000..2b713c5 --- /dev/null +++ b/packages/yunti-ui-lowcode-materials/lowcode/Page/meta/page.ts @@ -0,0 +1,221 @@ +import { IPublicTypeComponentMetadata } from '@alilc/lowcode-types'; + +import { Setters, getSimulatorRenderer } from '../../../../shared/src/setters'; +import { COMMON_CONFIGURE_PROPS, getPriority } from '../../utils'; +import { PageSnippets } from '../snippets'; + +export const PageMeta: IPublicTypeComponentMetadata = { + title: 'Page', + componentName: 'Page', + category: '布局', + snippets: PageSnippets, + priority: getPriority('Page'), + devMode: 'proCode', + npm: { + package: '@yuntijs/ui-lowcode-materials', + version: '{{version}}', + exportName: 'Page', + destructuring: true, + subName: '', + }, + configure: { + props: [ + ...COMMON_CONFIGURE_PROPS, + { + title: '生命周期', + display: 'block', + type: 'group', + items: [ + { + name: 'sdkSwrFuncs', + title: { + label: '页面加载完成时', + tip: '页面加载完成时执行的数据请求函数', + }, + setter: { + ...Setters.ArraySetter, + props: { + itemSetter: { + ...Setters.ObjectSetter, + props: { + config: { + items: [ + { + name: 'func', + propType: 'string', + description: '执行函数', + title: '调用函数', + isRequired: true, + // initialValue: , + setter: _target => { + return { + componentName: 'SelectSetter', + props: { + showSearch: true, + options: Object.keys( + // @Todo:这里不应该写死从 bff 中取 + getSimulatorRenderer()?.context?.utils?.bff || {} + ) + .filter(key => key.startsWith('use')) + .map(value => ({ + title: '调用 ' + value, + value, + })), + }, + }; + }, + }, + { + name: 'params', + propType: 'object', + description: '函数的参数', + title: '参数', + setter: ['JsonSetter', 'VariableSetter'], + initialValue: {}, + }, + { + name: 'enableLocationSearch', + title: { + label: '列表查询', + tip: '开启后,函数的查询参数从 location.search 取值(key 为 _search),函数 fetch 方法不再生效 ', + }, + setter: ['BoolSetter', 'VariableSetter'], + }, + ], + }, + }, + }, + }, + }, + }, + ], + }, + { + title: 'mock 数据', + display: 'block', + type: 'group', + items: [ + { + name: '__mock_path', + title: { + label: '页面路由', + tip: '当前页面的路由,例如 /apps/app-075kz/pages/page-6hcz8', + }, + setter: Setters.StringSetter, + }, + ], + }, + { + title: '常用配置', + display: 'block', + type: 'group', + items: [ + { + name: 'loading', + title: { + label: '加载中', + }, + defaultValue: false, + setter: Setters.BoolSetter, + }, + { + name: 'status', + title: { + label: '状态', + }, + setter: { + ...Setters.RadioGroupSetter, + props: { + options: ['403', '404', '500'], + }, + }, + }, + { + name: 'gap', + title: { + label: '间隙', + tip: '设置网格之间的间隙', + }, + defaultValue: 16, + setter: Setters.NumberSetter, + }, + ], + }, + { + title: '高级设置', + display: 'block', + type: 'group', + items: [ + { + name: 'sdkInitFunc', + title: { + label: 'sdk 初始化函数', + tip: '如果需要定制生成 sdk,可以指定全局工具中的一个函数作为初始化函数', + }, + isRequired: false, + setter: { + componentName: 'ObjectSetter', + props: { + config: { + items: [ + { + name: 'enabled', + propType: 'boolean', + title: '启用', + isRequired: true, + setter: ['BoolSetter'], + }, + { + name: 'func', + propType: 'string', + description: '初始化函数', + title: '函数', + condition: target => { + return target.parent.getPropValue('enabled') === true; + }, + setter: _target => { + return { + componentName: 'SelectSetter', + props: { + showSearch: true, + options: Object.keys( + (window as any).AliLowCodeEngine?.project?.simulator?.renderer + ?.context?.utils || {} + ).map(value => ({ + title: value, + value, + })), + }, + }; + }, + }, + { + name: 'params', + propType: 'object', + description: '函数的参数', + title: '参数', + condition: target => { + return target.parent.getPropValue('enabled') === true; + }, + setter: ['JsonSetter', 'VariableSetter'], + initialValue: {}, + }, + ], + }, + }, + }, + }, + ], + }, + ], + supports: { + loop: false, + condition: true, + style: true, + events: [], + }, + component: { + isContainer: true, + }, + }, +};