diff --git a/render-process/TreeTabs.tsx b/render-process/TreeTabs.tsx
new file mode 100644
index 0000000..c575709
--- /dev/null
+++ b/render-process/TreeTabs.tsx
@@ -0,0 +1,90 @@
+
+import * as ReactDOM from "react-dom";
+import Editor from "./Editor";
+import React, { Component } from "react";
+import { Layout, Tabs } from 'antd';
+import { ipcRenderer, remote } from 'electron';
+import * as path from 'path';
+import * as fs from 'fs';
+import * as Utils from '../common/Utils';
+import MainEventType from "../common/MainEventType";
+import Properties from "./Properties";
+import Settings from "../main-process/Settings";
+import G6 from '@antv/g6';
+
+import 'antd/dist/antd.dark.css';
+
+const { Header, Sider, Content, Footer } = Layout;
+const { TabPane } = Tabs;
+
+interface TreeTabsProps {
+}
+
+interface TreeTabsState {
+  filepaths: string[];
+  curPath?: string;
+}
+
+export default class TreeTabs extends Component<TreeTabsProps, TreeTabsState> {
+  state: TreeTabsState = {
+    filepaths: [],
+  }
+
+  componentWillMount() {
+  }
+
+  componentDidMount() {
+  }
+
+  openFile(path: string) {
+    console.log("on open file", path);
+    if (this.state.filepaths.indexOf(path) < 0) {
+      const filepaths = this.state.filepaths;
+      filepaths.push(path);
+      this.setState({ filepaths, curPath: path });
+    } else {
+      this.setState({ curPath: path });
+    }
+  }
+
+  render() {
+    console.log("render tabs");
+    const { filepaths, curPath } = this.state;
+    if (!curPath) {
+      return (<div />);
+    }
+    return (
+      <Tabs
+        hideAdd
+        className="tabs"
+        type="editable-card"
+        defaultActiveKey={curPath}
+        activeKey={curPath}
+        onChange={activeKey => {
+          this.setState({ curPath: activeKey })
+        }}
+        onEdit={(targetKey, action) => {
+          if (action == 'remove') {
+            const idx = filepaths.indexOf(targetKey as string);
+            if (idx < 0) {
+              return;
+            }
+            filepaths.splice(idx, 1);
+            const nextPath = filepaths[idx - 1];
+            this.setState({ filepaths, curPath: nextPath });
+          }
+        }}
+      >
+        {
+          filepaths.map(filepath => {
+            return (
+              <TabPane tab={path.basename(filepath)} key={filepath}>
+                <Editor filepath={filepath} />
+              </TabPane>
+            );
+          })
+        }
+      </Tabs>
+    )
+  }
+};
\ No newline at end of file
diff --git a/render-process/index.tsx b/render-process/index.tsx
index 4d0c45d..75a217e 100644
--- a/render-process/index.tsx
+++ b/render-process/index.tsx
@@ -16,6 +16,7 @@ import 'antd/dist/antd.dark.css';
 import './index.css';
 import { ModelConfig, Item } from "@antv/g6/lib/types";
 import RegisterNode from "./RegisterNode";
+import TreeTabs from "./TreeTabs";
 
 const { Header, Sider, Content, Footer } = Layout;
 const { TabPane } = Tabs;
@@ -23,17 +24,15 @@ const { TabPane } = Tabs;
 
 interface MainState {
   workspace: string;
-  filepaths: string[];
-  curPath?: string;
 }
 
 export default class Main extends Component {
   state: MainState = {
     workspace: '',
-    filepaths: [],
   }
 
   settings: Settings;
+  tabs: TreeTabs;
 
   componentWillMount() {
     this.updateSettings();
@@ -42,7 +41,7 @@ export default class Main extends Component {
 
   componentDidMount() {
     ipcRenderer.on(MainEventType.OPEN_FILE, (event: any, path: any) => {
-      this.openFile(path);
+      this.setState({ curPath: path });
     });
 
     ipcRenderer.on(MainEventType.OPEN_WORKSPACE, (event: any, workspace: any) => {
@@ -62,28 +61,9 @@ export default class Main extends Component {
     this.settings = Utils.getRemoteSettings();
   }
 
-  openFile(path: string) {
-    console.log("on open file", path);
-    if (this.state.filepaths.indexOf(path) < 0) {
-      const filepaths = this.state.filepaths;
-      filepaths.push(path);
-      this.setState({ filepaths, curPath: path });
-    } else {
-      this.setState({ curPath: path });
-    }
-  }
-
-  renderJson() {
-    const path = this.state.curPath;
-    if (path) {
-      const str = fs.readFileSync(path, 'utf8');
-      return (<div>{str}</div>)
-    }
-  }
-
   render() {
     console.log("render main");
-    const { workspace, filepaths, curPath } = this.state;
+    const { workspace } = this.state;
     document.title = `行为树编辑器 - ${workspace}`;
     return (
       <Layout className="body">
@@ -91,42 +71,16 @@ export default class Main extends Component {
           <Properties
             workspace={this.state.workspace}
             onOpenTree={(path) => {
-              this.openFile(path);
+              this.tabs.openFile(path);
             }}
           />
         </Sider>
         <Content className="content">
-          <Tabs
-            hideAdd
-            className="tabs"
-            type="editable-card"
-            defaultActiveKey={curPath}
-            activeKey={curPath}
-            onChange={activeKey => {
-              this.setState({ curPath: activeKey })
+          <TreeTabs
+            ref = {ref => {
+              this.tabs = ref;
             }}
-            onEdit={(targetKey, action) => {
-              if (action == 'remove') {
-                const idx = filepaths.indexOf(targetKey as string);
-                if (idx < 0) {
-                  return;
-                }
-                filepaths.splice(idx, 1);
-                const nextPath = filepaths[idx - 1];
-                this.setState({ filepaths, curPath: nextPath });
-              }
-            }}
-          >
-            {
-              filepaths.map(filepath => {
-                return (
-                  <TabPane tab={path.basename(filepath)} key={filepath}>
-                    <Editor filepath={filepath} />
-                  </TabPane>
-                );
-              })
-            }
-          </Tabs>
+          />
         </Content>
       </Layout>
     )