diff --git a/package.json b/package.json
index 213bbc1c45..3a426ccc0a 100644
--- a/package.json
+++ b/package.json
@@ -69,5 +69,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 9c7a9815dd..5ffcf859ac 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,7 +363,7 @@ body {
       flex: 1;
       display: flex;
       flex-direction: column;
-
+      height: 100%;
       .lc-toolbar {
         display: flex;
         height: var(--toolbar-height);
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