From 339a48510d5fe8de8fe9d275523f9ca4fd2343cf Mon Sep 17 00:00:00 2001
From: shunyun <ziscloud@gmail.com>
Date: Mon, 29 Jan 2024 15:03:08 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=20split=20pane?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  | 17 +++--
 .../src/layouts/workbench.less                |  6 +-
 .../editor-skeleton/src/layouts/workbench.tsx | 64 +++++++++++++------
 packages/engine/start-server.sh               |  4 ++
 4 files changed, 64 insertions(+), 27 deletions(-)
 create mode 100644 packages/engine/start-server.sh

diff --git a/package.json b/package.json
index caabbeeb13..ea1406b063 100644
--- a/package.json
+++ b/package.json
@@ -42,19 +42,19 @@
     }
   },
   "devDependencies": {
+    "@alilc/build-plugin-lce": "^0.0.3",
+    "@alilc/lowcode-test-mate": "^1.0.1",
+    "@types/react-router": "5.1.18",
+    "babel-jest": "^26.5.2",
     "del": "^6.1.1",
     "execa": "^5.1.1",
     "f2elint": "^2.0.1",
     "gulp": "^4.0.2",
     "husky": "^7.0.4",
     "lerna": "^4.0.0",
-    "typescript": "4.6.2",
-    "yarn": "^1.22.17",
     "rimraf": "^3.0.2",
-    "@types/react-router": "5.1.18",
-    "@alilc/build-plugin-lce": "^0.0.3",
-    "babel-jest": "^26.5.2",
-    "@alilc/lowcode-test-mate": "^1.0.1"
+    "typescript": "4.6.2",
+    "yarn": "^1.22.17"
   },
   "engines": {
     "node": ">=14.17.0 <18"
@@ -67,5 +67,8 @@
     "typescript": "4.6.2",
     "react-error-overlay": "6.0.9"
   },
-  "repository": "git@github.com:alibaba/lowcode-engine.git"
+  "repository": "git@github.com:alibaba/lowcode-engine.git",
+  "dependencies": {
+    "split-pane-react": "file:../split-pane-react"
+  }
 }
diff --git a/packages/editor-skeleton/src/layouts/workbench.less b/packages/editor-skeleton/src/layouts/workbench.less
index 97a017523d..ea869f796d 100644
--- a/packages/editor-skeleton/src/layouts/workbench.less
+++ b/packages/editor-skeleton/src/layouts/workbench.less
@@ -14,7 +14,7 @@
 
   --left-area-width: 48px;
   --workspace-left-area-width: 48px;
-  --right-area-width: 300px;
+  --right-area-width: 100%;
   --top-area-height: 48px;
   --toolbar-height: 36px;
   --dock-pane-width: 300px;
@@ -23,7 +23,7 @@
 
 @media (min-width: 1860px) {
   :root {
-    --right-area-width: 400px;
+    --right-area-width: 100%;
     --dock-pane-width: 452px;
     --dock-fixed-pane-width: 350px;
   }
@@ -363,6 +363,7 @@ body {
       flex: 1;
       display: flex;
       flex-direction: column;
+      height: 100%;
       z-index: 10;
       .lc-toolbar {
         display: flex;
@@ -378,6 +379,7 @@ body {
       }
       .lc-main-area {
         flex: 1;
+        height: 100%;
         background-color: var(--color-background);
       }
       .lc-bottom-area {
diff --git a/packages/editor-skeleton/src/layouts/workbench.tsx b/packages/editor-skeleton/src/layouts/workbench.tsx
index 1e412ed678..eaeaf5d324 100644
--- a/packages/editor-skeleton/src/layouts/workbench.tsx
+++ b/packages/editor-skeleton/src/layouts/workbench.tsx
@@ -1,7 +1,7 @@
-import { Component } from 'react';
-import { TipContainer, observer } from '@alilc/lowcode-editor-core';
+import {Component} from 'react';
+import {TipContainer, observer} from '@alilc/lowcode-editor-core';
 import classNames from 'classnames';
-import { ISkeleton } from '../skeleton';
+import {ISkeleton} from '../skeleton';
 import TopArea from './top-area';
 import LeftArea from './left-area';
 import LeftFixedPane from './left-fixed-pane';
@@ -11,8 +11,14 @@ import MainArea from './main-area';
 import BottomArea from './bottom-area';
 import RightArea from './right-area';
 import './workbench.less';
-import { SkeletonContext } from '../context';
-import { EditorConfig, PluginClassSet } from '@alilc/lowcode-types';
+import {SkeletonContext} from '../context';
+import {EditorConfig, PluginClassSet} from '@alilc/lowcode-types';
+import SplitPane, {Pane} from "split-pane-react";
+import 'split-pane-react/esm/themes/default.css';
+
+interface SizeState {
+  sizes: (string | number)[];
+}
 
 @observer
 export class Workbench extends Component<{
@@ -21,11 +27,22 @@ export class Workbench extends Component<{
   components?: PluginClassSet;
   className?: string;
   topAreaItemClassName?: string;
-}> {
+}, SizeState> {
   constructor(props: any) {
     super(props);
-    const { config, components, skeleton } = this.props;
+    const {config, components, skeleton} = this.props;
     skeleton.buildFromConfig(config, components);
+    this.state = {sizes: ['70%', 'auto']}
+  }
+
+  setSizes(newsize: any[]) {
+    this.setState({sizes: newsize});
+  }
+
+  componentDidUpdate() {
+    console.log(document.querySelector('.lc-main-area')?.parentElement.parentElement)
+    const a =document.querySelector('.lc-main-area')?.parentElement.parentElement.style.width;
+    console.log('aaa', a)
   }
 
   render() {
@@ -37,19 +54,30 @@ export class Workbench extends Component<{
     return (
       <div className={classNames('lc-workbench', className)}>
         <SkeletonContext.Provider value={this.props.skeleton}>
-          <TopArea area={skeleton.topArea} itemClassName={topAreaItemClassName} />
+          <TopArea area={skeleton.topArea} itemClassName={topAreaItemClassName}/>
           <div className="lc-workbench-body">
-            <LeftArea area={skeleton.leftArea} />
-            <LeftFloatPane area={skeleton.leftFloatArea} />
-            <LeftFixedPane area={skeleton.leftFixedArea} />
-            <div className="lc-workbench-center">
-              <Toolbar area={skeleton.toolbar} />
-              <MainArea area={skeleton.mainArea} />
-              <BottomArea area={skeleton.bottomArea} />
-            </div>
-            <RightArea area={skeleton.rightArea} />
+            <LeftArea area={skeleton.leftArea}/>
+            <LeftFloatPane area={skeleton.leftFloatArea}/>
+            <LeftFixedPane area={skeleton.leftFixedArea}/>
+            <SplitPane
+              split='vertical'
+              sizes={this.state.sizes}
+              onChange={(sizes:(string|number)[])=>{
+                this.setSizes(sizes);
+              }}>
+              <Pane minSize={450} maxSize='100%'>
+                <div className="lc-workbench-center">
+                  <Toolbar area={skeleton.toolbar}/>
+                  <MainArea area={skeleton.mainArea}/>
+                  <BottomArea area={skeleton.bottomArea}/>
+                </div>
+              </Pane>
+              <Pane minSize={300} maxSize='50%'>
+                <RightArea area={skeleton.rightArea}/>
+              </Pane>
+            </SplitPane>
           </div>
-          <TipContainer />
+          <TipContainer/>
         </SkeletonContext.Provider>
       </div>
     );
diff --git a/packages/engine/start-server.sh b/packages/engine/start-server.sh
new file mode 100644
index 0000000000..b04c62ef63
--- /dev/null
+++ b/packages/engine/start-server.sh
@@ -0,0 +1,4 @@
+#!/bin/bash
+
+cd ./dist
+python3 -m http.server 8081