feat: 细化 Area 类型，优化 IWidgetBaseConfig 及相关的类型代码

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 = {
+        const config: Partial<IWidgetBaseConfig> = {
-          area,
+          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 parsedConfig = this.parseConfig(config);
-    const panel = new Panel(this, 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 {
+  private parseConfig(config: IWidgetBaseConfig) {
-    if ((config as any).parsed) {
+    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) {
+  add(config: IWidgetBaseConfig, extraConfig?: Record<string, any>) {
-    const parsedConfig: any = {
+    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
     }

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<string, any>;
   content?: any;
-  contentProps?: object;
+  contentProps?: Record<string, any>;
   // 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<any> | PanelConfig[]; // content for pane
 }

packages/editor-skeleton/src/widget/panel.ts

@@ -78,7 +78,7 @@ export default class Panel implements IWidget {
 
   private container?: WidgetContainer<Panel, PanelConfig>;
 
-  @obx.ref private parent?: WidgetContainer;
+  @obx.ref public parent?: WidgetContainer;
 
   constructor(readonly skeleton: Skeleton, readonly config: PanelConfig) {
     makeObservable(this);

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;