diff --git a/src/editor/Catalog/index.tsx b/src/editor/Catalog/index.tsx
new file mode 100644
index 0000000..0b328d9
--- /dev/null
+++ b/src/editor/Catalog/index.tsx
@@ -0,0 +1,7 @@
+
+
+const Catalog = () => {
+  return <h1>属性区域</h1>;
+}
+
+export default Catalog;
\ No newline at end of file
diff --git a/src/editor/Menu/index.tsx b/src/editor/Menu/index.tsx
new file mode 100644
index 0000000..6982a87
--- /dev/null
+++ b/src/editor/Menu/index.tsx
@@ -0,0 +1,7 @@
+
+
+const Menu = () => {
+  return <h1>属性区域</h1>;
+}
+
+export default Menu;
\ No newline at end of file
diff --git a/src/editor/Plot/index.tsx b/src/editor/Plot/index.tsx
new file mode 100644
index 0000000..77b4801
--- /dev/null
+++ b/src/editor/Plot/index.tsx
@@ -0,0 +1,7 @@
+
+
+const Plot = () => {
+  return <h1>属性区域</h1>;
+}
+
+export default Plot;
\ No newline at end of file
diff --git a/src/editor/Property/index.tsx b/src/editor/Property/index.tsx
new file mode 100644
index 0000000..51aa238
--- /dev/null
+++ b/src/editor/Property/index.tsx
@@ -0,0 +1,7 @@
+
+
+const Property = () => {
+  return <h1>属性区域</h1>;
+}
+
+export default Property;
\ No newline at end of file
diff --git a/src/editor/index.less b/src/editor/index.less
index 265de49..2d7af32 100644
--- a/src/editor/index.less
+++ b/src/editor/index.less
@@ -1,4 +1,11 @@
 
+.editor-main{
+  height: 100%;
+}
+.editor-header, .editor-body-left, .editor-body-right{
+  background-color: #fff;
+}
+
 #mapStage{
   height: 100%;
 }
\ No newline at end of file
diff --git a/src/editor/index.tsx b/src/editor/index.tsx
index 0a1552e..7df82c4 100644
--- a/src/editor/index.tsx
+++ b/src/editor/index.tsx
@@ -1,15 +1,20 @@
 import { useEffect, useRef } from "react";
+import { Layout } from "antd";
 import { MapStage } from "../mapStage";
 
 import "./index.less";
 
-export const Editor = () => {
-  const mapStageRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    const mapStage = new MapStage(mapStageRef.current!);
-    mapStage.init();
-  });
+const { Header, Footer, Sider, Content } = Layout;
 
-  return <div id="mapStage" ref={mapStageRef}></div>
+export const Editor = () => {
+  return (
+    <Layout className="editor-main">
+      <Header className="editor-header">header</Header>
+      <Layout className="editor-body">
+        <Sider className="editor-body-left">Sider</Sider>
+        <Content className="editor-body-center">Content</Content>
+        <Sider className="editor-body-right">Sider</Sider>
+      </Layout>
+    </Layout>
+  );
 }
\ No newline at end of file
diff --git a/src/index.tsx b/src/index.tsx
index dc87461..428bbb1 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,9 +1,10 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 
+import 'antd/dist/antd.css';
+
 import { store, StoreContext } from './store';
 import { Editor } from './editor';
-
 import './index.less';
 
 ReactDOM.render(