feat: add resource layer layout in workspace mode

packages/types/src/shell/type/resource-list.ts

@@ -1,7 +1,7 @@
 export interface IPublicResourceData {
   resourceName: string;
   title: string;
-  category: string;
+  category?: string;
   options: {
     [key: string]: any;
   };

packages/workspace/src/context/base-context.ts

@@ -1,5 +1,3 @@
-/* eslint-disable no-param-reassign */
-/* eslint-disable max-len */
 import {
   Editor,
   engineConfig, Setters as InnerSetters,
@@ -33,8 +31,8 @@ import {
   IPublicTypePluginMeta,
 } from '@alilc/lowcode-types';
 import { getLogger } from '@alilc/lowcode-utils';
-import { Workspace as InnerWorkspace } from './workspace';
+import { Workspace as InnerWorkspace } from '../workspace';
-import { EditorWindow } from './editor-window/context';
+import { EditorWindow } from '../window';
 
 export class BasicContext {
   skeleton: Skeleton;

packages/workspace/src/context/view-context.ts

@@ -2,8 +2,8 @@ import { makeObservable, obx } from '@alilc/lowcode-editor-core';
 import { IPublicEditorViewConfig, IPublicTypeEditorView } from '@alilc/lowcode-types';
 import { flow } from 'mobx';
 import { Workspace as InnerWorkspace } from '../workspace';
-import { BasicContext } from '../base-context';
+import { BasicContext } from './base-context';
-import { EditorWindow } from '../editor-window/context';
+import { EditorWindow } from '../window';
 import { getWebviewPlugin } from '../inner-plugins/webview';
 
 export class Context extends BasicContext {
@@ -17,6 +17,10 @@ export class Context extends BasicContext {
 
   @obx isInit: boolean = false;
 
+  get active() {
+    return this._activate;
+  }
+
   init = flow(function* (this: any) {
     if (this.viewType === 'webview') {
       const url = yield this.instance?.url?.();
@@ -44,10 +48,6 @@ export class Context extends BasicContext {
     this.innerHotkey.activate(this._activate);
   };
 
-  get active() {
-    return this._activate;
-  }
-
   async save() {
     return await this.instance?.save?.();
   }

packages/workspace/src/index.ts

@@ -1,4 +1,4 @@
 export { Workspace } from './workspace';
-export * from './editor-window/context';
+export * from './window';
 export * from './layouts/workbench';
 export { Resource } from './resource';

packages/workspace/src/layouts/workbench.tsx

@@ -1,6 +1,6 @@
 import { Component } from 'react';
 import { TipContainer, observer } from '@alilc/lowcode-editor-core';
-import { EditorWindowView } from '../editor-window/view';
+import { WindowView } from '../view/window-view';
 import classNames from 'classnames';
 import TopArea from './top-area';
 import LeftArea from './left-area';
@@ -46,9 +46,9 @@ export class Workbench extends Component<{
                 <div className="lc-workspace-workbench-window">
                   {
                     workspace.windows.map(d => (
-                      <EditorWindowView
+                      <WindowView
                         active={d.id === workspace.window.id}
-                        editorWindow={d}
+                        window={d}
                         key={d.id}
                       />
                     ))

packages/workspace/src/resource.ts

@@ -1,6 +1,6 @@
 import { IPublicTypeEditorView, IPublicModelResource, IPublicResourceData, IPublicResourceTypeConfig } from '@alilc/lowcode-types';
 import { Logger } from '@alilc/lowcode-utils';
-import { BasicContext } from './base-context';
+import { BasicContext } from './context/base-context';
 import { ResourceType } from './resource-type';
 import { Workspace as InnerWorkSpace } from './workspace';
 
@@ -13,20 +13,6 @@ export class Resource implements IPublicModelResource {
 
   editorViewMap: Map<string, IPublicTypeEditorView> = new Map<string, IPublicTypeEditorView>();
 
-  constructor(readonly resourceData: IPublicResourceData, readonly resourceType: ResourceType, workspace: InnerWorkSpace) {
-    this.context = new BasicContext(workspace, '');
-    this.resourceTypeInstance = resourceType.resourceTypeModel(this.context, {});
-    this.init();
-    if (this.resourceTypeInstance.editorViews) {
-      this.resourceTypeInstance.editorViews.forEach((d: any) => {
-        this.editorViewMap.set(d.viewName, d);
-      });
-    }
-    if (!resourceType) {
-      logger.error(`resourceType[${resourceType}] is unValid.`);
-    }
-  }
-
   get name() {
     return this.resourceType.name;
   }
@@ -55,6 +41,24 @@ export class Resource implements IPublicModelResource {
     return this.resourceData?.category;
   }
 
+  get skeleton() {
+    return this.context.innerSkeleton;
+  }
+
+  constructor(readonly resourceData: IPublicResourceData, readonly resourceType: ResourceType, workspace: InnerWorkSpace) {
+    this.context = new BasicContext(workspace, `resource-${resourceData.resourceName || resourceType.name}`);
+    this.resourceTypeInstance = resourceType.resourceTypeModel(this.context, {});
+    this.init();
+    if (this.resourceTypeInstance.editorViews) {
+      this.resourceTypeInstance.editorViews.forEach((d: any) => {
+        this.editorViewMap.set(d.viewName, d);
+      });
+    }
+    if (!resourceType) {
+      logger.error(`resourceType[${resourceType}] is unValid.`);
+    }
+  }
+
   async init() {
     await this.resourceTypeInstance.init?.();
     await this.context.innerPlugins.init();
@@ -63,6 +67,7 @@ export class Resource implements IPublicModelResource {
   async import(schema: any) {
     return await this.resourceTypeInstance.import?.(schema);
   }
+
   async save(value: any) {
     return await this.resourceTypeInstance.save?.(value);
   }

packages/workspace/src/view/editor-view.tsx

@@ -4,9 +4,9 @@ import {
   Workbench,
 } from '@alilc/lowcode-editor-skeleton';
 import { PureComponent } from 'react';
-import { Context } from './context';
+import { Context } from '../context/view-context';
 
-export * from '../base-context';
+export * from '../context/base-context';
 
 @observer
 export class EditorView extends PureComponent<{
@@ -23,13 +23,11 @@ export class EditorView extends PureComponent<{
     }
 
     return (
-      <>
+      <Workbench
-        <Workbench
+        skeleton={skeleton}
-          skeleton={skeleton}
+        className={active ? 'active engine-editor-view' : 'engine-editor-view'}
-          className={active ? 'active engine-editor-view' : 'engine-editor-view'}
+        topAreaItemClassName="engine-actionitem"
-          topAreaItemClassName="engine-actionitem"
+      />
-        />
-      </>
     );
   }
 }

packages/workspace/src/view/resource-view.less

@@ -0,0 +1,14 @@
+.workspace-resource-view {
+  display: flex;
+  position: absolute;
+  flex-direction: column;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+.workspace-editor-body {
+  position: relative;
+  height: 100%;
+}

packages/workspace/src/view/resource-view.tsx

@@ -0,0 +1,36 @@
+import { PureComponent } from 'react';
+import { EditorView } from './editor-view';
+import { observer } from '@alilc/lowcode-editor-core';
+import TopArea from '../layouts/top-area';
+import { Resource } from '../resource';
+import { EditorWindow } from '../window';
+import './resource-view.less';
+
+@observer
+export class ResourceView extends PureComponent<{
+  window: EditorWindow;
+  resource: Resource;
+}, any> {
+  render() {
+    const { skeleton } = this.props.resource;
+    const { editorViews } = this.props.window;
+    return (
+      <div className="workspace-resource-view">
+        <TopArea area={skeleton.topArea} itemClassName="engine-actionitem" />
+        <div className="workspace-editor-body">
+          {
+            Array.from(editorViews.values()).map((editorView: any) => {
+              return (
+                <EditorView
+                  key={editorView.name}
+                  active={editorView.active}
+                  editorView={editorView}
+                />
+              );
+            })
+          }
+        </div>
+      </div>
+    );
+  }
+}

packages/workspace/src/view/window-view.tsx

@@ -1,17 +1,17 @@
 import { PureComponent } from 'react';
-import { EditorView } from '../editor-view/view';
+import { ResourceView } from './resource-view';
 import { engineConfig, observer } from '@alilc/lowcode-editor-core';
-import { EditorWindow } from './context';
+import { EditorWindow } from '../window';
 import { BuiltinLoading } from '@alilc/lowcode-designer';
 
 @observer
-export class EditorWindowView extends PureComponent<{
+export class WindowView extends PureComponent<{
-  editorWindow: EditorWindow;
+  window: EditorWindow;
   active: boolean;
 }, any> {
   render() {
     const { active } = this.props;
-    const { editorView, editorViews } = this.props.editorWindow;
+    const { editorView, resource } = this.props.window;
     if (!editorView) {
       const Loading = engineConfig.get('loadingComponent', BuiltinLoading);
       return (
@@ -23,17 +23,10 @@ export class EditorWindowView extends PureComponent<{
 
     return (
       <div className={`workspace-engine-main ${active ? 'active' : ''}`}>
-        {
+        <ResourceView
-          Array.from(editorViews.values()).map((editorView: any) => {
+          resource={resource}
-            return (
+          window={this.props.window}
-              <EditorView
+        />
-                key={editorView.name}
-                active={editorView.active}
-                editorView={editorView}
-              />
-            );
-          })
-        }
       </div>
     );
   }

packages/workspace/src/window.ts

@@ -1,8 +1,8 @@
 import { uniqueId } from '@alilc/lowcode-utils';
 import { makeObservable, obx } from '@alilc/lowcode-editor-core';
-import { Context } from '../editor-view/context';
+import { Context } from './context/view-context';
-import { Workspace } from '../workspace';
+import { Workspace } from './workspace';
-import { Resource } from '../resource';
+import { Resource } from './resource';
 
 export class EditorWindow {
   id: string = uniqueId('window');

packages/workspace/src/workspace.ts

@@ -2,8 +2,8 @@ import { Designer } from '@alilc/lowcode-designer';
 import { createModuleEventBus, Editor, IEventBus, makeObservable, obx } from '@alilc/lowcode-editor-core';
 import { Plugins } from '@alilc/lowcode-shell';
 import { IPublicApiWorkspace, IPublicResourceList, IPublicTypeResourceType } from '@alilc/lowcode-types';
-import { BasicContext } from './base-context';
+import { BasicContext } from './context/base-context';
-import { EditorWindow } from './editor-window/context';
+import { EditorWindow } from './window';
 import { Resource } from './resource';
 import { ResourceType } from './resource-type';
 
@@ -20,6 +20,12 @@ export class Workspace implements IPublicApiWorkspace {
 
   private emitter: IEventBus = createModuleEventBus('workspace');
 
+  private _isActive = false;
+
+  private resourceTypeMap: Map<string, ResourceType> = new Map();
+
+  private resourceList: Resource[] = [];
+
   get skeleton() {
     return this.context.innerSkeleton;
   }
@@ -28,7 +34,17 @@ export class Workspace implements IPublicApiWorkspace {
     return this.context.innerPlugins;
   }
 
-  private _isActive = false;
+  get isActive() {
+    return this._isActive;
+  }
+
+  get defaultResourceType(): ResourceType | null {
+    if (this.resourceTypeMap.size >= 1) {
+      return Array.from(this.resourceTypeMap.values())[0];
+    }
+
+    return null;
+  }
 
   windows: EditorWindow[] = [];
 
@@ -36,10 +52,6 @@ export class Workspace implements IPublicApiWorkspace {
 
   @obx.ref window: EditorWindow;
 
-  private resourceTypeMap: Map<string, ResourceType> = new Map();
-
-  private resourceList: Resource[] = [];
-
   constructor(
     readonly registryInnerPlugin: (designer: Designer, editor: Editor, plugins: Plugins) => Promise<void>,
     readonly shellModelFactory: any,
@@ -66,10 +78,6 @@ export class Workspace implements IPublicApiWorkspace {
     this.emitChangeActiveWindow();
   }
 
-  get isActive() {
-    return this._isActive;
-  }
-
   setActive(value: boolean) {
     this._isActive = value;
   }
@@ -105,14 +113,6 @@ export class Workspace implements IPublicApiWorkspace {
     return this.resourceTypeMap.get(resourceName)!;
   }
 
-  get defaultResourceType(): ResourceType | null {
-    if (this.resourceTypeMap.size >= 1) {
-      return Array.from(this.resourceTypeMap.values())[0];
-    }
-
-    return null;
-  }
-
   removeResourceType(resourceName: string) {
     if (this.resourceTypeMap.has(resourceName)) {
       this.resourceTypeMap.delete(resourceName);
@@ -153,13 +153,17 @@ export class Workspace implements IPublicApiWorkspace {
       console.error(`${name} is not available`);
       return;
     }
-    const filterWindows = this.windows.filter(d => (d.resource.name === name && d.title == title));
+    const filterWindows = this.windows.filter(d => (d.resource.name === name && d.resource.title == title));
     if (filterWindows && filterWindows.length) {
       this.window = filterWindows[0];
       this.emitChangeActiveWindow();
       return;
     }
-    const resource = new Resource({}, resourceType, this);
+    const resource = new Resource({
+      resourceName: name,
+      title,
+      options,
+    }, resourceType, this);
     this.window = new EditorWindow(resource, this, title, options);
     this.windows.push(this.window);
     this.editorWindowMap.set(this.window.id, this.window);