diff --git a/packages/react-schema-editor/package.json b/packages/react-schema-editor/package.json
index 24f23a6555b..e528237b0eb 100644
--- a/packages/react-schema-editor/package.json
+++ b/packages/react-schema-editor/package.json
@@ -19,6 +19,7 @@
     "build": "tsc --declaration"
   },
   "devDependencies": {
+    "node-sass": "^4.13.0",
     "typescript": "^3.5.2"
   },
   "peerDependencies": {
@@ -29,8 +30,7 @@
     "react-dom": ">=16.8.0",
     "react-eva": "^1.1.7"
   },
-  "dependencies": {
-  },
+  "dependencies": {},
   "publishConfig": {
     "access": "public"
   },
diff --git a/packages/react-schema-editor/src/components/FieldEditor.css b/packages/react-schema-editor/src/components/FieldEditor.css
deleted file mode 100644
index 4f4acfd5942..00000000000
--- a/packages/react-schema-editor/src/components/FieldEditor.css
+++ /dev/null
@@ -1,16 +0,0 @@
-.field-editor .field-group-title{
-  margin-top: 15px;
-  font-size: 16px;
-}
-.field-editor .field-group-content{
-  display: flex;
-  align-items: flex-start;
-}
-.field-editor .field-group-content .field-group-form-item{
-  width: 20%;
-  margin-right: 0;
-  padding-right: 10px;
-}
-.field-editor .field-group-form-item.auto-complete .ant-form-item-control{
-  margin-top: -1px;
-}
\ No newline at end of file
diff --git a/packages/react-schema-editor/src/components/FieldEditor.tsx b/packages/react-schema-editor/src/components/FieldEditor.tsx
index fb5dd0ba5d9..bfabf5064c0 100644
--- a/packages/react-schema-editor/src/components/FieldEditor.tsx
+++ b/packages/react-schema-editor/src/components/FieldEditor.tsx
@@ -19,10 +19,11 @@ import {
   getPropertyValue,
   getExpressionValue,
   getRuleMessage,
-  fieldTypeDisabled
+  fieldTypeDisabled,
+  getDefaultXProps,
+  getDefaultXRules
 } from '../utils/fieldEditorHelpers'
 import { InputTypes, ComponentPropsTypes } from '../utils/types'
-import './FieldEditor.css'
 
 const FormItem = Form.Item
 const SelectOption = Select.Option
@@ -52,8 +53,6 @@ interface IFormItemGroupProps extends Partial<IFieldEditorProps> {
 const FormItemGroup: React.FC<IFormItemGroupProps> = ({
   title,
   schema,
-  xProps,
-  xRules,
   components,
   propsKey,
   onChange
@@ -62,8 +61,6 @@ const FormItemGroup: React.FC<IFormItemGroupProps> = ({
   const inputTypeData = getInputTypeData()
   const componentPropsData = getComponentPropsData({
     schema,
-    xProps,
-    xRules,
     components,
     componentName,
     propsKey
@@ -396,8 +393,6 @@ const FieldEditor: React.FC<IFieldEditorProps> = ({
   fieldKey,
   schema,
   components,
-  xProps,
-  xRules,
   onFieldKeyChange,
   onChange
 }) => {
@@ -499,7 +494,7 @@ const FieldEditor: React.FC<IFieldEditorProps> = ({
           components={components}
           propsKey={ComponentPropsTypes.X_PROPS}
           schema={schema}
-          xProps={xProps}
+          xProps={getDefaultXProps()}
           onChange={onChange}
         />
       )}
@@ -510,7 +505,7 @@ const FieldEditor: React.FC<IFieldEditorProps> = ({
           components={components}
           propsKey={ComponentPropsTypes.X_RULES}
           schema={schema}
-          xRules={xRules}
+          xRules={getDefaultXRules()}
           onChange={onChange}
         />
       )}
diff --git a/packages/react-schema-editor/src/components/SchemaCode.tsx b/packages/react-schema-editor/src/components/SchemaCode.tsx
index ed4124a2556..c51e7497e1f 100644
--- a/packages/react-schema-editor/src/components/SchemaCode.tsx
+++ b/packages/react-schema-editor/src/components/SchemaCode.tsx
@@ -1,95 +1,49 @@
-import React, { useState } from 'react'
-import {Drawer, Icon, Tooltip, notification } from 'antd';
+import React from 'react'
+import {Tooltip, Icon} from 'antd';
 import MonacoEditor from 'react-monaco-editor'
-import moment from 'moment';
 import { ISchemaCodeProps } from '../utils/types'
-
-// const options = {
-//   selectOnLineNumbers: true
-// };
-
-const styles = {
-  icon: {
-    fontSize: '24px',
-    color: '#fff',
-    marginBottom: '15px'
-  }
-};
+import {copySchema, downloadSchema} from '../utils/schemaTools'
 
 export const SchemaCode: React.FC<ISchemaCodeProps> = ({
   schema,
   onChange
 }) => {
-  const [showDrawer, setShowDrawer] = useState(false);
 
   if (typeof schema === 'object') {
     schema = JSON.stringify(schema, null, '\t')
   }
 
-  const copySchema = () => {
-    const oEle = document.createElement('textarea');
-    oEle.value = schema;
-    document.body.appendChild(oEle);
-    oEle.select();
-    document.execCommand('Copy'); 
-    oEle.style.display = 'none';
-    notification
-    notification.open({
-      message: 'shcema复制成功',
-      duration: 2,
-    });
-  }
-
-  const downloadSchema = () => {
-    const aEle = document.createElement('a');
-    aEle.download = `${moment().format('YYYYMMDD-HHmmss')}schema.json`;
-    aEle.style.display = 'none';
-    var blob = new Blob([schema], {type:'application/json,charset=utf-8;'});
-    aEle.href = URL.createObjectURL(blob);
-    document.body.appendChild(aEle);
-    aEle.click();
-    document.body.removeChild(aEle);
-  }
-
-  const aside = (
-    <div style={{ width: '28px', padding: '5px 0', textAlign: 'center', background: '#1890ff' }}>
-      <Tooltip placement="left" title="预览、编辑协议">
-        <Icon type="codepen" onClick={() => { setShowDrawer(true) }} style={styles.icon} />
-      </Tooltip>
-      <Tooltip placement="left" title="复制协议">
-        <Icon type="copy" onClick={copySchema} style={styles.icon} />
-      </Tooltip>
-      <Tooltip placement="left" title="下载协议">
-        <Icon type="download" onClick={downloadSchema} style={styles.icon} />
-      </Tooltip>
-    </div>
-  );
+  const styles = {
+    icon: {
+      fontSize: '20px',
+      color: '#fff',
+      paddingRight: '10px'
+    }
+  };
+
+  const ToolBar = () => {
+    return (
+      <div style={{ height: '30px', lineHeight: '30px', padding: '3px 30px', textAlign: 'right', background: '#1890ff' }}>
+        <Tooltip placement="left" title="复制协议">
+          <Icon type="copy" onClick={() => {copySchema(schema)}} style={styles.icon} />
+        </Tooltip>
+        <Tooltip placement="left" title="下载协议">
+          <Icon type="download" onClick={()=> {downloadSchema(schema)}} style={styles.icon} />
+        </Tooltip>
+      </div>
+  )};
 
   return (
-    <div style={{ height: '100%', }}>
-      {
-        !showDrawer ? aside : null
-      }
-
-      <Drawer
-        width="840"
-        placement="right"
-        visible={showDrawer}
-        closable={false}
-        bodyStyle={{ padding: 0, height: '100%' }}
-        onClose={() => setShowDrawer(false)} >
-        <div style={{ display: 'flex', flexDirection: 'row', height: '100%' }}>
-          <MonacoEditor
-            language="json"
-            theme="vs-dark"
-            onChange={(schema) => onChange(JSON.parse(schema))}
-            value={schema}
-          />
-          {
-            showDrawer ? aside : null
-          }
-        </div>
-      </Drawer>
+    <div>
+      <ToolBar></ToolBar>
+      <MonacoEditor
+        height={500}
+        language="json"
+        theme="vs-dark"
+        onChange={(schema) => onChange(JSON.parse(schema))}
+        value={schema}
+      />
     </div>
+
   )
 }
diff --git a/packages/react-schema-editor/src/components/SchemaTree.tsx b/packages/react-schema-editor/src/components/SchemaTree.tsx
index c3167fd1ddf..1a16f5c2418 100644
--- a/packages/react-schema-editor/src/components/SchemaTree.tsx
+++ b/packages/react-schema-editor/src/components/SchemaTree.tsx
@@ -1,48 +1,18 @@
 import React from 'react'
-import { Tree, Row, Col, Icon } from 'antd'
+import { Tree, Icon } from 'antd'
 import { ISchemaTreeProps } from '../utils/types'
 import * as fp from 'lodash/fp'
 import _ from 'lodash'
-import FieldEditor from './FieldEditor'
-
-const xProps = {
-  colon: {},
-  extra: {},
-  hasFeedback: {},
-  help: {},
-  htmlFor: {},
-  label: {},
-  labelCol: {},
-  labelAlign: {},
-  required: {},
-  validateStatus: {},
-  wrapperCol: {}
-}
-
-const xRules = {
-  enum: {},
-  len: {},
-  max: {},
-  min: {},
-  pattern: {},
-  required: {},
-  transform: {},
-  type: {},
-  validator: {},
-  whitespace: {}
-}
 
 const TreeNode = Tree.TreeNode
 
 export const SchemaTree: React.FC<ISchemaTreeProps> = ({
   schema,
   onChange,
-  components
+  onSelect
 }) => {
-  const [selectedPath, setSelectedPath] = React.useState(null)
-
   const handleSelect = React.useCallback((path: string[]) => {
-    setSelectedPath(path[0])
+    onSelect(path[0])
   }, [])
 
   const handleDrop = React.useCallback(
@@ -123,43 +93,17 @@ export const SchemaTree: React.FC<ISchemaTreeProps> = ({
     [schema, onChange]
   )
 
-  const selectedSchema =
-    selectedPath &&
-    (selectedPath === 'root' ? schema : fp.get(selectedPath, schema))
   return (
-    <Row>
-      <Col span={8}>
-        <Tree
-          defaultExpandAll
-          showIcon
-          showLine
-          draggable
-          onSelect={handleSelect}
-          onDrop={handleDrop}
-        >
-          {TreeNodeBySchema({ schema, path: [] })}
-        </Tree>
-      </Col>
-      <Col span={16}>
-        {selectedSchema && (
-          <FieldEditor
-            xProps={xProps}
-            xRules={xRules}
-            components={components}
-            fieldKey="fieldC"
-            onFieldKeyChange={value => {
-              console.log('onFieldKeyChange====', value)
-            }}
-            schema={selectedSchema}
-            onChange={value => {
-              const newSchema = _.clone(schema)
-              _.set(newSchema, selectedPath, value)
-              onChange(newSchema)
-            }}
-          />
-        )}
-      </Col>
-    </Row>
+      <Tree
+        defaultExpandAll
+        showIcon
+        showLine
+        draggable
+        onSelect={handleSelect}
+        onDrop={handleDrop}
+      >
+        {TreeNodeBySchema({ schema, path: [] })}
+      </Tree>
   )
 }
 
diff --git a/packages/react-schema-editor/src/index.tsx b/packages/react-schema-editor/src/index.tsx
index 365737b82ab..d6c9e4edbed 100644
--- a/packages/react-schema-editor/src/index.tsx
+++ b/packages/react-schema-editor/src/index.tsx
@@ -1,22 +1,38 @@
-import React, { useState } from 'react'
-import { Button, Row, Col, Radio } from 'antd'
+import React, {useState} from 'react'
+import { Button, Radio, Tabs } from 'antd'
+import * as fp from 'lodash/fp'
+import _ from 'lodash'
 import { SchemaTree } from './components/SchemaTree'
+import FieldEditor from './components/FieldEditor'
 import { SchemaCode } from './components/SchemaCode'
 import nextComponents from './utils/nextCompProps'
 import antdComponents from './utils/antdCompProps'
-
 import 'antd/dist/antd.css'
+import './main.scss'
 
 export const SchemaEditor: React.FC<{
   schema: any
   onChange: (schema: any) => void
 }> = ({ schema, onChange }) => {
   const [componentType, setComponentType] = useState('antd');
+  const [selectedPath, setSelectedPath] = React.useState(null);
 
-  function handleTypeChange(e) {
+  const handleTypeChange = (e) => {
     setComponentType(e.target.value);
   }
 
+  const handleTreeSelect = (path) => {
+    setSelectedPath(path)
+  }
+
+  const handleCodeChange = (code) => {
+    console.log(code);
+  }
+
+  const selectedSchema =
+  selectedPath &&
+  (selectedPath === 'root' ? schema : fp.get(selectedPath, schema))
+  console.log('selectedSchema', selectedSchema)
   return (
     <div className="schema-editor">
       <div className="schema-menus">
@@ -31,19 +47,35 @@ export const SchemaEditor: React.FC<{
             <Radio value="fusion">Fusion Design组件</Radio>
           </Radio.Group>
         </span>
-
       </div>
-      <Row className="schema-editor-main" style={{ minHeight: '350px' }}>
-        <Col span={24} className="schema-col schema-tree splitter">
-          <SchemaTree schema={schema} onChange={onChange} components={componentType === 'fusion' ? nextComponents : antdComponents}/>
-        </Col>
-        <Col
-          className="schema-col schema-code"
-          style={{ position: 'absolute', right: '0px', height: '100%' }}
-        >
-          <SchemaCode schema={schema} onChange={onChange}></SchemaCode>
-        </Col>
-      </Row>
+      <div className="schema-editor-main">
+        <div className="schema-tree">
+          <SchemaTree schema={schema} onChange={onChange} onSelect ={handleTreeSelect} />
+        </div>
+        <div className="schema-tabs">
+          <Tabs type="card">
+            <Tabs.TabPane tab="属性编辑" key="1">
+              {selectedSchema && <FieldEditor
+                  components={componentType === 'fusion' ? nextComponents : antdComponents}
+                  fieldKey="fieldC"
+                  onFieldKeyChange={value => {
+                    console.log('onFieldKeyChange====', value)
+                  }}
+                  schema={selectedSchema}
+                  onChange={value => {
+                    const newSchema = _.clone(schema)
+                    _.set(newSchema, selectedPath, value)
+                    onChange(newSchema)
+                  }}
+              />}
+            </Tabs.TabPane>
+            <Tabs.TabPane tab="Schema源码" key="2">
+              <SchemaCode schema={schema} onChange={handleCodeChange}></SchemaCode>
+            </Tabs.TabPane>
+            <Tabs.TabPane tab="预览" key="3"></Tabs.TabPane>
+          </Tabs>
+        </div>
+      </div>
     </div>
   )
 }
diff --git a/packages/react-schema-editor/src/main.scss b/packages/react-schema-editor/src/main.scss
index df8afb2654f..5ac9a63f730 100644
--- a/packages/react-schema-editor/src/main.scss
+++ b/packages/react-schema-editor/src/main.scss
@@ -23,14 +23,19 @@
   /* 编辑区 */
   .schema-editor-main {
     margin-top: 20px;
+    display: flex;
+    flex-direction: row;
+    min-height: 600px;
 
-    .schema-col {
-      padding: 20px;
-      min-height: 400px;
+    /* 树形编辑 */
+    .schema-tree {
+      float: left;
+      width: 300px;
     }
 
-    /* 树形编辑 */
-    .schema-tree {}
+    .schema-tabs {
+      flex: 1;
+    }
 
     /* 代码编辑 */
     .schema-code {
@@ -40,38 +45,59 @@
   }
 
   .field-editor {
-    margin-top: 10px;
-    padding: 5px;
-    border: 1px solid #eee;
+    .field-group-title{
+      margin-top: 15px;
+      font-size: 16px;
+    }
+    .field-group-content{
+      display: flex;
+      align-items: flex-start;
+      .field-group-form-item{
+        width: 20%;
+        margin-right: 0;
+        padding-right: 10px;
+        &.auto-complete {
+          .ant-form-item-control{
+            margin-top: -1px;
+          }
+        } 
+      }
+    }
+  }
 
-    .field-operate {
-      padding: 5px;
+  // .field-editor {
+  //   margin-top: 10px;
+  //   padding: 5px;
+  //   border: 1px solid #eee;
 
-      .op-btn {
-        margin-left: 5px;
-      }
+  //   .field-operate {
+  //     padding: 5px;
 
-      .op-btn-expand {
-        float: right !important;
-      }
-    }
+  //     .op-btn {
+  //       margin-left: 5px;
+  //     }
 
-    .field-group {
-      display: flex;
-      background-color: #F2F3F7;
-      padding: 5px;
+  //     .op-btn-expand {
+  //       float: right !important;
+  //     }
+  //   }
 
-      .field-input {
-        margin-left: 5px;
-        width: 100px;
-      }
-    }
+  //   .field-group {
+  //     display: flex;
+  //     background-color: #F2F3F7;
+  //     padding: 5px;
 
-    .field-children {
-      padding: 10px 0 0 20px;
-    }
+  //     .field-input {
+  //       margin-left: 5px;
+  //       width: 100px;
+  //     }
+  //   }
 
+  //   .field-children {
+  //     padding: 10px 0 0 20px;
+  //   }
 
-  }
+
+  // }
 
 }
diff --git a/packages/react-schema-editor/src/utils/fieldEditorHelpers.ts b/packages/react-schema-editor/src/utils/fieldEditorHelpers.ts
index 1f1eccd0897..58fad193ea9 100644
--- a/packages/react-schema-editor/src/utils/fieldEditorHelpers.ts
+++ b/packages/react-schema-editor/src/utils/fieldEditorHelpers.ts
@@ -28,6 +28,37 @@ export const getInputTypeData = () => {
   }
 }
 
+export const getDefaultXProps = () => {
+  return  {
+    colon: {},
+    extra: {},
+    hasFeedback: {},
+    help: {},
+    htmlFor: {},
+    label: {},
+    labelCol: {},
+    labelAlign: {},
+    required: {},
+    validateStatus: {},
+    wrapperCol: {}
+  }
+}
+
+export const getDefaultXRules = () => {
+  return {
+    enum: {},
+    len: {},
+    max: {},
+    min: {},
+    pattern: {},
+    required: {},
+    transform: {},
+    type: {},
+    validator: {},
+    whitespace: {}
+  }
+}
+
 const convertKeysToSelectData = keys => {
   const options = keys.map(value => ({
     label: value,
@@ -68,8 +99,6 @@ export const getComponentXRules = schema => {
 
 export const getComponentPropsData = ({
   schema,
-  xProps,
-  xRules,
   components,
   componentName,
   propsKey
@@ -85,12 +114,12 @@ export const getComponentPropsData = ({
       break
     }
     case ComponentPropsTypes.X_PROPS: {
-      allKeys = _.keys(xProps)
+      allKeys = _.keys(getDefaultXProps())
       usedKeys = _.keys(schema[propsKey])
       break
     }
     case ComponentPropsTypes.X_RULES: {
-      allKeys = _.keys(xRules)
+      allKeys = _.keys(getDefaultXRules())
       usedKeys = getComponentXRules(schema)
       break
     }
diff --git a/packages/react-schema-editor/src/utils/index.ts b/packages/react-schema-editor/src/utils/index.ts
deleted file mode 100644
index cf4f4628bfb..00000000000
--- a/packages/react-schema-editor/src/utils/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export function jsonToSchema(json?: object) {
-  let schema = json || {}
-  return schema
-}
diff --git a/packages/react-schema-editor/src/utils/schemaTools.ts b/packages/react-schema-editor/src/utils/schemaTools.ts
new file mode 100644
index 00000000000..b66f9785c87
--- /dev/null
+++ b/packages/react-schema-editor/src/utils/schemaTools.ts
@@ -0,0 +1,27 @@
+import {notification } from 'antd';
+import moment from 'moment';
+
+export const copySchema = (schema) => {
+  const oEle = document.createElement('textarea');
+  oEle.value = schema;
+  document.body.appendChild(oEle);
+  oEle.select();
+  document.execCommand('Copy'); 
+  oEle.style.display = 'none';
+  notification
+  notification.open({
+    message: 'shcema复制成功',
+    duration: 2,
+  });
+}
+
+export const downloadSchema = (schema) => {
+  const aEle = document.createElement('a');
+  aEle.download = `${moment().format('YYYYMMDD-HHmmss')}schema.json`;
+  aEle.style.display = 'none';
+  var blob = new Blob([schema], {type:'application/json,charset=utf-8;'});
+  aEle.href = URL.createObjectURL(blob);
+  document.body.appendChild(aEle);
+  aEle.click();
+  document.body.removeChild(aEle);
+}
diff --git a/packages/react-schema-editor/src/utils/types.ts b/packages/react-schema-editor/src/utils/types.ts
index 54c69ce8aaf..c3fc94fe3ba 100644
--- a/packages/react-schema-editor/src/utils/types.ts
+++ b/packages/react-schema-editor/src/utils/types.ts
@@ -5,7 +5,7 @@ export interface ISchemaCodeProps {
 
 export interface ISchemaTreeProps {
   schema: any
-  components: any
+  onSelect?: Function
   onChange?: Function
 }
 
diff --git a/packages/react-schema-editor/tsconfig.json b/packages/react-schema-editor/tsconfig.json
index 1d669c29c46..015bca7a63c 100644
--- a/packages/react-schema-editor/tsconfig.json
+++ b/packages/react-schema-editor/tsconfig.json
@@ -1,5 +1,6 @@
 {
   "extends": "../../tsconfig.json",
+  "noUnusedLocals": false,
   "compilerOptions": {
     "outDir": "./lib"
   },