diff --git a/docs/docs/api/commonUI.md b/docs/docs/api/commonUI.md new file mode 100644 index 000000000..9d1f70652 --- /dev/null +++ b/docs/docs/api/commonUI.md @@ -0,0 +1,118 @@ +--- +title: commonUI - UI 组件库 +sidebar_position: 11 +--- + +## 简介 +CommonUI API 是一个专为低代码引擎设计的组件 UI 库,使用它开发的插件,可以保证在不同项目和主题切换中能够保持一致性和兼容性。 + +## 组件列表 + +### Tip + +提示组件 + +| 参数 | 说明 | 类型 | 默认值 | +|-----------|--------------|---------------------------------------|--------| +| className | className | string (optional) | | +| children | tip 的内容 | IPublicTypeI18nData \| ReactNode | | +| direction | tip 的方向 | 'top' \| 'bottom' \| 'left' \| 'right' | | + + +### Title + +标题组件 + +| 参数 | 说明 | 类型 | 默认值 | +|-----------|------------|-----------------------------|--------| +| title | 标题内容 | IPublicTypeTitleContent | | +| className | className | string (optional) | | +| onClick | 点击事件 | () => void (optional) | | + +### Balloon +详细文档: [Balloon Documentation](https://fusion.design/pc/component/balloon) + +### Breadcrumb +详细文档: [Breadcrumb Documentation](https://fusion.design/pc/component/breadcrumb) + +### Button +详细文档: [Button Documentation](https://fusion.design/pc/component/button) + +### Card +详细文档: [Card Documentation](https://fusion.design/pc/component/card) + +### Checkbox +详细文档: [Checkbox Documentation](https://fusion.design/pc/component/checkbox) + +### DatePicker +详细文档: [DatePicker Documentation](https://fusion.design/pc/component/datepicker) + +### Dialog +详细文档: [Dialog Documentation](https://fusion.design/pc/component/dialog) + +### Dropdown +详细文档: [Dropdown Documentation](https://fusion.design/pc/component/dropdown) + +### Form +详细文档: [Form Documentation](https://fusion.design/pc/component/form) + +### Icon +详细文档: [Icon Documentation](https://fusion.design/pc/component/icon) + +引擎默认主题支持的 icon 列表:https://fusion.design/64063/component/icon?themeid=20133 + + +### Input +详细文档: [Input Documentation](https://fusion.design/pc/component/input) + +### Loading +详细文档: [Loading Documentation](https://fusion.design/pc/component/loading) + +### Message +详细文档: [Message Documentation](https://fusion.design/pc/component/message) + +### Overlay +详细文档: [Overlay Documentation](https://fusion.design/pc/component/overlay) + +### Pagination +详细文档: [Pagination Documentation](https://fusion.design/pc/component/pagination) + +### Radio +详细文档: [Radio Documentation](https://fusion.design/pc/component/radio) + +### Search +详细文档: [Search Documentation](https://fusion.design/pc/component/search) + +### Select +详细文档: [Select Documentation](https://fusion.design/pc/component/select) + +### SplitButton +详细文档: [SplitButton Documentation](https://fusion.design/pc/component/splitbutton) + +### Step +详细文档: [Step Documentation](https://fusion.design/pc/component/step) + +### Switch +详细文档: [Switch Documentation](https://fusion.design/pc/component/switch) + +### Tab +详细文档: [Tab Documentation](https://fusion.design/pc/component/tab) + +### Table +详细文档: [Table Documentation](https://fusion.design/pc/component/table) + +### Tree +详细文档: [Tree Documentation](https://fusion.design/pc/component/tree) + +### TreeSelect +详细文档: [TreeSelect Documentation](https://fusion.design/pc/component/treeselect) + +### Upload +详细文档: [Upload Documentation](https://fusion.design/pc/component/upload) + +### Divider +详细文档: [Divider Documentation](https://fusion.design/pc/component/divider) + +## 说明 + +如果需要其他组件,可以提issue给我们 \ No newline at end of file diff --git a/packages/designer/src/component-meta.ts b/packages/designer/src/component-meta.ts index 00c495621..1ee1154f1 100644 --- a/packages/designer/src/component-meta.ts +++ b/packages/designer/src/component-meta.ts @@ -48,13 +48,17 @@ export function buildFilter(rule?: string | string[] | RegExp | IPublicTypeNesti return rule; } if (isRegExp(rule)) { - return (testNode: Node | IPublicTypeNodeSchema) => rule.test(testNode.componentName); + return (testNode: Node | IPublicTypeNodeSchema) => { + return rule.test(testNode.componentName); + }; } const list = ensureAList(rule); if (!list) { return null; } - return (testNode: Node | IPublicTypeNodeSchema) => list.includes(testNode.componentName); + return (testNode: Node | IPublicTypeNodeSchema) => { + return list.includes(testNode.componentName); + }; } export interface IComponentMeta extends IPublicModelComponentMeta { diff --git a/packages/designer/src/plugin/plugin-context.ts b/packages/designer/src/plugin/plugin-context.ts index 94e296fd1..7f26a2b4f 100644 --- a/packages/designer/src/plugin/plugin-context.ts +++ b/packages/designer/src/plugin/plugin-context.ts @@ -19,6 +19,7 @@ import { IPublicApiWorkspace, IPublicEnumPluginRegisterLevel, IPublicModelWindow, + IPublicApiCommonUI, } from '@alilc/lowcode-types'; import { IPluginContextOptions, @@ -45,6 +46,8 @@ export default class PluginContext implements workspace: IPublicApiWorkspace; registerLevel: IPublicEnumPluginRegisterLevel; editorWindow: IPublicModelWindow; + commonUI: IPublicApiCommonUI; + isPluginRegisteredInWorkspace: false; constructor( options: IPluginContextOptions, diff --git a/packages/designer/src/plugin/plugin-types.ts b/packages/designer/src/plugin/plugin-types.ts index 6091170f0..d648067a3 100644 --- a/packages/designer/src/plugin/plugin-types.ts +++ b/packages/designer/src/plugin/plugin-types.ts @@ -18,6 +18,7 @@ import { IPublicTypePluginRegisterOptions, IPublicModelWindow, IPublicEnumPluginRegisterLevel, + IPublicApiCommonUI, } from '@alilc/lowcode-types'; import PluginContext from './plugin-context'; @@ -61,6 +62,7 @@ export interface ILowCodePluginContextPrivate { set editorWindow(window: IPublicModelWindow); set registerLevel(level: IPublicEnumPluginRegisterLevel); set isPluginRegisteredInWorkspace(flag: boolean); + set commonUI(commonUI: IPublicApiCommonUI); } export interface ILowCodePluginContextApiAssembler { assembleApis( diff --git a/packages/editor-core/src/widgets/title/index.tsx b/packages/editor-core/src/widgets/title/index.tsx index 88a15ab29..7df2676f9 100644 --- a/packages/editor-core/src/widgets/title/index.tsx +++ b/packages/editor-core/src/widgets/title/index.tsx @@ -1,7 +1,7 @@ import { Component, isValidElement, ReactNode } from 'react'; import classNames from 'classnames'; import { createIcon, isI18nData, isTitleConfig } from '@alilc/lowcode-utils'; -import { IPublicTypeTitleContent, IPublicTypeI18nData, IPublicTypeTitleConfig } from '@alilc/lowcode-types'; +import { IPublicTypeI18nData, IPublicTypeTitleConfig, IPublicTypeTitleProps } from '@alilc/lowcode-types'; import { intl } from '../../intl'; import { Tip } from '../tip'; import './title.less'; @@ -36,13 +36,7 @@ import './title.less'; return fragments; } -export class Title extends Component<{ - title: IPublicTypeTitleContent; - className?: string; - onClick?: () => void; - match?: boolean; - keywords?: string; -}> { +export class Title extends Component { constructor(props: any) { super(props); this.handleClick = this.handleClick.bind(this); diff --git a/packages/engine/src/engine-core.ts b/packages/engine/src/engine-core.ts index 3ac4c32a7..9f29046fb 100644 --- a/packages/engine/src/engine-core.ts +++ b/packages/engine/src/engine-core.ts @@ -51,6 +51,7 @@ import { Canvas, Workspace, Config, + CommonUI, } from '@alilc/lowcode-shell'; import { isPlainObject } from '@alilc/lowcode-utils'; import './modules/live-editing'; @@ -111,10 +112,12 @@ const innerSetters = new InnerSetters(); const setters = new Setters(innerSetters); const material = new Material(editor); +const commonUI = new CommonUI(); editor.set('project', project); editor.set('setters' as any, setters); editor.set('material', material); editor.set('innerHotkey', innerHotkey); +editor.set('commonUI' as any, commonUI); const config = new Config(engineConfig); const event = new Event(commonEvent, { prefix: 'common' }); const logger = new Logger({ level: 'warn', bizName: 'common' }); @@ -138,6 +141,7 @@ const pluginContextApiAssembler: ILowCodePluginContextApiAssembler = { context.plugins = plugins; context.logger = new Logger({ level: 'warn', bizName: `plugin:${pluginName}` }); context.workspace = workspace; + context.commonUI = commonUI; context.registerLevel = IPublicEnumPluginRegisterLevel.Default; context.isPluginRegisteredInWorkspace = false; }, @@ -161,6 +165,7 @@ export { common, workspace, canvas, + commonUI, }; // declare this is open-source version export const isOpenSource = true; diff --git a/packages/shell/src/api/commonUI.ts b/packages/shell/src/api/commonUI.ts new file mode 100644 index 000000000..718b40970 --- /dev/null +++ b/packages/shell/src/api/commonUI.ts @@ -0,0 +1,43 @@ +import { IPublicApiCommonUI } from '@alilc/lowcode-types'; +import { + Tip as InnerTip, + Title as InnerTitle, + } from '@alilc/lowcode-editor-core'; +import { Balloon, Breadcrumb, Button, Card, Checkbox, DatePicker, Dialog, Dropdown, Form, Icon, Input, Loading, Message, Overlay, Pagination, Radio, Search, Select, SplitButton, Step, Switch, Tab, Table, Tree, TreeSelect, Upload, Divider } from '@alifd/next'; + +export class CommonUI implements IPublicApiCommonUI { + Balloon = Balloon; + Breadcrumb = Breadcrumb; + Button = Button; + Card = Card; + Checkbox = Checkbox; + DatePicker = DatePicker; + Dialog = Dialog; + Dropdown = Dropdown; + Form = Form; + Icon = Icon; + Input = Input; + Loading = Loading; + Message = Message; + Overlay = Overlay; + Pagination = Pagination; + Radio = Radio; + Search = Search; + Select = Select; + SplitButton = SplitButton; + Step = Step; + Switch = Switch; + Tab = Tab; + Table = Table; + Tree = Tree; + TreeSelect = TreeSelect; + Upload = Upload; + Divider = Divider; + + get Tip() { + return InnerTip; + } + get Title() { + return InnerTitle; + } +} diff --git a/packages/shell/src/api/index.ts b/packages/shell/src/api/index.ts index 4114926e1..3726020de 100644 --- a/packages/shell/src/api/index.ts +++ b/packages/shell/src/api/index.ts @@ -10,4 +10,5 @@ export * from './simulator-host'; export * from './skeleton'; export * from './canvas'; export * from './workspace'; -export * from './config'; \ No newline at end of file +export * from './config'; +export * from './commonUI'; \ No newline at end of file diff --git a/packages/shell/src/index.ts b/packages/shell/src/index.ts index 6f79c78bc..ce09ccaaa 100644 --- a/packages/shell/src/index.ts +++ b/packages/shell/src/index.ts @@ -28,6 +28,7 @@ import { Workspace, SimulatorHost, Config, + CommonUI, } from './api'; export * from './symbols'; @@ -68,4 +69,5 @@ export { Config, SettingField, SkeletonItem, + CommonUI, }; diff --git a/packages/types/src/shell/api/commonUI.ts b/packages/types/src/shell/api/commonUI.ts new file mode 100644 index 000000000..3d7bb57bf --- /dev/null +++ b/packages/types/src/shell/api/commonUI.ts @@ -0,0 +1,48 @@ +import { IPublicTypeTitleContent } from '../type'; +import { Balloon, Breadcrumb, Button, Card, Checkbox, DatePicker, Dialog, Dropdown, Form, Icon, Input, Loading, Message, Overlay, Pagination, Radio, Search, Select, SplitButton, Step, Switch, Tab, Table, Tree, TreeSelect, Upload, Divider } from '@alifd/next'; + +export interface IPublicApiCommonUI { + Balloon: typeof Balloon; + Breadcrumb: typeof Breadcrumb; + Button: typeof Button; + Card: typeof Card; + Checkbox: typeof Checkbox; + DatePicker: typeof DatePicker; + Dialog: typeof Dialog; + Dropdown: typeof Dropdown; + Form: typeof Form; + Icon: typeof Icon; + Input: typeof Input; + Loading: typeof Loading; + Message: typeof Message; + Overlay: typeof Overlay; + Pagination: typeof Pagination; + Radio: typeof Radio; + Search: typeof Search; + Select: typeof Select; + SplitButton: typeof SplitButton; + Step: typeof Step; + Switch: typeof Switch; + Tab: typeof Tab; + Table: typeof Table; + Tree: typeof Tree; + TreeSelect: typeof TreeSelect; + Upload: typeof Upload; + Divider: typeof Divider; + + /** + * Title 组件 + * @experimental unstable API, pay extra caution when trying to use this + */ + get Tip(): React.ComponentClass<{}>; + + /** + * Tip 组件 + * @experimental unstable API, pay extra caution when trying to use this + */ + get Title(): React.ComponentClass<{ + title: IPublicTypeTitleContent | undefined; + match?: boolean; + keywords?: string | null; + }>; +} \ No newline at end of file diff --git a/packages/types/src/shell/api/index.ts b/packages/types/src/shell/api/index.ts index 3d7d76559..79f1b0dc7 100644 --- a/packages/types/src/shell/api/index.ts +++ b/packages/types/src/shell/api/index.ts @@ -10,3 +10,4 @@ export * from './plugins'; export * from './logger'; export * from './canvas'; export * from './workspace'; +export * from './commonUI'; diff --git a/packages/types/src/shell/model/plugin-context.ts b/packages/types/src/shell/model/plugin-context.ts index 35e7e38af..45568424d 100644 --- a/packages/types/src/shell/model/plugin-context.ts +++ b/packages/types/src/shell/model/plugin-context.ts @@ -11,6 +11,7 @@ import { IPluginPreferenceMananger, IPublicApiPlugins, IPublicApiWorkspace, + IPublicApiCommonUI, } from '../api'; import { IPublicEnumPluginRegisterLevel } from '../enum'; import { IPublicModelEngineConfig, IPublicModelWindow } from './'; @@ -102,6 +103,12 @@ export interface IPublicModelPluginContext { */ get workspace(): IPublicApiWorkspace; + /** + * commonUI API + * @tutorial https://lowcode-engine.cn/site/docs/api/commonUI + */ + get commonUI(): IPublicApiCommonUI; + /** * 插件注册层级 * @since v1.1.7 diff --git a/packages/types/src/shell/type/tip-config.ts b/packages/types/src/shell/type/tip-config.ts index fa82ab96f..f8b271c90 100644 --- a/packages/types/src/shell/type/tip-config.ts +++ b/packages/types/src/shell/type/tip-config.ts @@ -2,8 +2,20 @@ import { IPublicTypeI18nData } from '..'; import { ReactNode } from 'react'; export interface IPublicTypeTipConfig { + + /** + * className + */ className?: string; + + /** + * tip 的内容 + */ children?: IPublicTypeI18nData | ReactNode; theme?: string; + + /** + * tip 的方向 + */ direction?: 'top' | 'bottom' | 'left' | 'right'; } diff --git a/packages/types/src/shell/type/title-config.ts b/packages/types/src/shell/type/title-config.ts index 571502bc5..f8de28759 100644 --- a/packages/types/src/shell/type/title-config.ts +++ b/packages/types/src/shell/type/title-config.ts @@ -1,26 +1,51 @@ import { ReactNode } from 'react'; -import { IPublicTypeI18nData, IPublicTypeIconType, TipContent } from './'; +import { IPublicTypeI18nData, IPublicTypeIconType, IPublicTypeTitleContent, TipContent } from './'; + +export interface IPublicTypeTitleProps { + + /** + * 标题内容 + */ + title: IPublicTypeTitleContent; + + /** + * className + */ + className?: string; + + /** + * 点击事件 + */ + onClick?: () => void; + match?: boolean; + keywords?: string; +} /** * 描述 props 的 setter title */ export interface IPublicTypeTitleConfig { + /** * 文字描述 */ label?: IPublicTypeI18nData | ReactNode; + /** * hover 后的展现内容 */ tip?: TipContent; + /** * 文档链接,暂未实现 */ docUrl?: string; + /** * 图标 */ icon?: IPublicTypeIconType; + /** * CSS 类 */ diff --git a/packages/workspace/src/context/base-context.ts b/packages/workspace/src/context/base-context.ts index 78f32079f..e090d1e37 100644 --- a/packages/workspace/src/context/base-context.ts +++ b/packages/workspace/src/context/base-context.ts @@ -32,6 +32,7 @@ import { Workspace, Window, Canvas, + CommonUI, } from '@alilc/lowcode-shell'; import { IPluginPreferenceMananger, @@ -127,11 +128,13 @@ export class BasicContext implements IBasicContext { const logger = getLogger({ level: 'warn', bizName: 'common' }); const skeleton = new Skeleton(innerSkeleton, 'any', true); const canvas = new Canvas(editor, true); + const commonUI = new CommonUI(); editor.set('setters', setters); editor.set('project', project); editor.set('material', material); editor.set('hotkey', hotkey); editor.set('innerHotkey', innerHotkey); + editor.set('commonUI' as any, commonUI); this.innerSetters = innerSetters; this.innerSkeleton = innerSkeleton; this.skeleton = skeleton; @@ -166,6 +169,7 @@ export class BasicContext implements IBasicContext { context.plugins = plugins; context.logger = new Logger({ level: 'warn', bizName: `plugin:${pluginName}` }); context.canvas = canvas; + context.commonUI = commonUI; if (editorWindow) { context.editorWindow = new Window(editorWindow); }