初始化编辑器布局

src/editor/Catalog/index.tsx

@@ -0,0 +1,7 @@
+
+
+const Catalog = () => {
+  return <h1>属性区域</h1>;
+}
+
+export default Catalog;

src/editor/Menu/index.tsx

@@ -0,0 +1,7 @@
+
+
+const Menu = () => {
+  return <h1>属性区域</h1>;
+}
+
+export default Menu;

src/editor/Plot/index.tsx

@@ -0,0 +1,7 @@
+
+
+const Plot = () => {
+  return <h1>属性区域</h1>;
+}
+
+export default Plot;

src/editor/Property/index.tsx

@@ -0,0 +1,7 @@
+
+
+const Property = () => {
+  return <h1>属性区域</h1>;
+}
+
+export default Property;

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%;
 }

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>
+  );
 }

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(