diff --git a/packages/editor-skeleton/src/skeleton.ts b/packages/editor-skeleton/src/skeleton.ts index 97f202236..dff568d30 100644 --- a/packages/editor-skeleton/src/skeleton.ts +++ b/packages/editor-skeleton/src/skeleton.ts @@ -11,6 +11,7 @@ import { isPanelConfig, DividerConfig, isDividerConfig, + IWidgetConfigArea, } from './types'; import Panel, { isPanel } from './widget/panel'; import WidgetContainer from './widget/widget-container'; @@ -221,8 +222,8 @@ export class Skeleton { Object.keys(plugins).forEach((area) => { plugins[area].forEach((item) => { const { pluginKey, type, props = {}, pluginProps } = item; - const config: any = { - area, + const config: Partial = { + area: area as IWidgetConfigArea, type: 'Widget', name: pluginKey, contentProps: pluginProps, @@ -249,7 +250,7 @@ export class Skeleton { if (pluginKey in components) { config.content = components[pluginKey]; } - this.add(config); + this.add(config as IWidgetBaseConfig); }); }); } @@ -296,8 +297,8 @@ export class Skeleton { } createPanel(config: PanelConfig) { - config = this.parseConfig(config); - const panel = new Panel(this, config); + const parsedConfig = this.parseConfig(config); + const panel = new Panel(this, parsedConfig as PanelConfig); this.panels.set(panel.name, panel); return panel; } @@ -316,7 +317,7 @@ export class Skeleton { area: 'stages', ...config, }); - return stage?.getName(); + return stage?.getName?.(); } createContainer( @@ -331,8 +332,8 @@ export class Skeleton { return container; } - private parseConfig(config: IWidgetBaseConfig): any { - if ((config as any).parsed) { + private parseConfig(config: IWidgetBaseConfig) { + if (config.parsed) { return config; } const { content, ...restConfig } = config; @@ -357,8 +358,8 @@ export class Skeleton { return restConfig; } - add(config: IWidgetBaseConfig & { area?: string }, extraConfig?: object) { - const parsedConfig: any = { + add(config: IWidgetBaseConfig, extraConfig?: Record) { + const parsedConfig = { ...this.parseConfig(config), ...extraConfig, }; @@ -375,29 +376,29 @@ export class Skeleton { switch (area) { case 'leftArea': case 'left': - return this.leftArea.add(parsedConfig); + return this.leftArea.add(parsedConfig as PanelDockConfig); case 'rightArea': case 'right': - return this.rightArea.add(parsedConfig); + return this.rightArea.add(parsedConfig as PanelConfig); case 'topArea': case 'top': - return this.topArea.add(parsedConfig); + return this.topArea.add(parsedConfig as PanelDockConfig); case 'toolbar': - return this.toolbar.add(parsedConfig); + return this.toolbar.add(parsedConfig as PanelDockConfig); case 'mainArea': case 'main': case 'center': case 'centerArea': - return this.mainArea.add(parsedConfig); + return this.mainArea.add(parsedConfig as PanelConfig); case 'bottomArea': case 'bottom': - return this.bottomArea.add(parsedConfig); + return this.bottomArea.add(parsedConfig as PanelConfig); case 'leftFixedArea': - return this.leftFixedArea.add(parsedConfig); + return this.leftFixedArea.add(parsedConfig as PanelConfig); case 'leftFloatArea': - return this.leftFloatArea.add(parsedConfig); + return this.leftFloatArea.add(parsedConfig as PanelConfig); case 'stages': - return this.stages.add(parsedConfig); + return this.stages.add(parsedConfig as StageConfig); default: // do nothing } diff --git a/packages/editor-skeleton/src/types.ts b/packages/editor-skeleton/src/types.ts index 521b008a6..569737534 100644 --- a/packages/editor-skeleton/src/types.ts +++ b/packages/editor-skeleton/src/types.ts @@ -2,13 +2,30 @@ import { ReactElement, ComponentType } from 'react'; import { TitleContent, IconType, I18nData, TipContent } from '@ali/lowcode-types'; import { IWidget } from './widget/widget'; +/** + * 所有可能的停靠位置 + */ +export type IWidgetConfigArea = + | 'leftArea' | 'left' | 'rightArea' + | 'right' | 'topArea' | 'top' + | 'toolbar' | 'mainArea' | 'main' + | 'center' | 'centerArea' | 'bottomArea' + | 'bottom' | 'leftFixedArea' + | 'leftFloatArea' | 'stages'; + export interface IWidgetBaseConfig { type: string; name: string; - area?: string; // 停靠位置, 默认 float, 如果添加非固定区, - props?: object; + /** + * 停靠位置: + * 当 type 为 'Panel' 时自动为 'leftFloatArea'; + * 当 type 为 'Widget' 时自动为 'mainArea'; + * 其他时候自动为 'leftArea'; + */ + area?: IWidgetConfigArea; + props?: Record; content?: any; - contentProps?: object; + contentProps?: Record; // index?: number; [extra: string]: any; } @@ -111,7 +128,7 @@ export interface PanelDockConfig extends IDockBaseConfig { type: 'PanelDock'; panelName?: string; panelProps?: PanelProps & { - area?: string; + area?: IWidgetConfigArea; }; content?: string | ReactElement | ComponentType | PanelConfig[]; // content for pane } diff --git a/packages/editor-skeleton/src/widget/panel.ts b/packages/editor-skeleton/src/widget/panel.ts index 3de55a643..c0d6ebff0 100644 --- a/packages/editor-skeleton/src/widget/panel.ts +++ b/packages/editor-skeleton/src/widget/panel.ts @@ -78,7 +78,7 @@ export default class Panel implements IWidget { private container?: WidgetContainer; - @obx.ref private parent?: WidgetContainer; + @obx.ref public parent?: WidgetContainer; constructor(readonly skeleton: Skeleton, readonly config: PanelConfig) { makeObservable(this); diff --git a/packages/editor-skeleton/src/widget/widget.ts b/packages/editor-skeleton/src/widget/widget.ts index 9c3c58314..9dae8ff1c 100644 --- a/packages/editor-skeleton/src/widget/widget.ts +++ b/packages/editor-skeleton/src/widget/widget.ts @@ -12,7 +12,7 @@ export interface IWidget { readonly align?: string; readonly isWidget: true; readonly visible: boolean; - readonly disabled: boolean; + readonly disabled?: boolean; readonly body: ReactNode; readonly skeleton: Skeleton; readonly config: IWidgetBaseConfig;