From 4f7d8a92b0cfc8c6cba0d8110158d5a340ab64f5 Mon Sep 17 00:00:00 2001
From: Cmen <1176967590@qq.com>
Date: Thu, 17 Feb 2022 20:10:13 +0800
Subject: [PATCH] =?UTF-8?q?=E8=8F=9C=E5=8D=95=E6=A0=8F=E5=88=9D=E5=A7=8B?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/editor/Menu/File.tsx      | 19 +++++++++++++++++++
 src/editor/Menu/MenuGroup.tsx | 29 +++++++++++++++++++++++++++++
 src/editor/Menu/index.tsx     | 10 +++++++++-
 src/editor/Menu/style.less    |  3 +++
 src/editor/index.tsx          | 18 ++++++++++++++----
 5 files changed, 74 insertions(+), 5 deletions(-)
 create mode 100644 src/editor/Menu/File.tsx
 create mode 100644 src/editor/Menu/MenuGroup.tsx
 create mode 100644 src/editor/Menu/style.less

diff --git a/src/editor/Menu/File.tsx b/src/editor/Menu/File.tsx
new file mode 100644
index 0000000..2e0b34e
--- /dev/null
+++ b/src/editor/Menu/File.tsx
@@ -0,0 +1,19 @@
+import MenuGroup from "./MenuGroup";
+
+const FileMenu = () => {
+  const openGeoJSON = () => {};
+  return (
+    <MenuGroup
+      {...{
+        name: "文件",
+        items: [
+          { name: "新建", onClick: openGeoJSON },
+          { name: "打开", onClick: openGeoJSON },
+          { name: "另存为", onClick: openGeoJSON },
+        ],
+      }}
+    />
+  );
+};
+
+export default FileMenu;
diff --git a/src/editor/Menu/MenuGroup.tsx b/src/editor/Menu/MenuGroup.tsx
new file mode 100644
index 0000000..1fd9570
--- /dev/null
+++ b/src/editor/Menu/MenuGroup.tsx
@@ -0,0 +1,29 @@
+import { Menu, Dropdown } from "antd";
+
+export type MenuItemConfig = {
+  name: string;
+  onClick: () => void;
+};
+
+export type MenuConfig = {
+  name: string;
+  items: MenuItemConfig[];
+};
+
+const MenuGroup = (props: MenuConfig) => {
+  const menu = (
+    <Menu>
+      {props.items.map((item, index) => (
+        <Menu.Item key={index}>{item.name}</Menu.Item>
+      ))}
+    </Menu>
+  );
+
+  return (
+    <Dropdown overlay={menu} trigger={["click"]}>
+      <span className="menu-title">{props.name}</span>
+    </Dropdown>
+  );
+};
+
+export default MenuGroup;
diff --git a/src/editor/Menu/index.tsx b/src/editor/Menu/index.tsx
index 2845fc5..673dde1 100644
--- a/src/editor/Menu/index.tsx
+++ b/src/editor/Menu/index.tsx
@@ -1,5 +1,13 @@
+import FileMenu from "./File";
+
+import "./style.less";
+
 const Menu = () => {
-  return <h1>属性区域</h1>;
+  return (
+    <>
+      <FileMenu />
+    </>
+  );
 };
 
 export default Menu;
diff --git a/src/editor/Menu/style.less b/src/editor/Menu/style.less
new file mode 100644
index 0000000..0fd7580
--- /dev/null
+++ b/src/editor/Menu/style.less
@@ -0,0 +1,3 @@
+.menu-title{
+  cursor: pointer;
+}
\ No newline at end of file
diff --git a/src/editor/index.tsx b/src/editor/index.tsx
index fb73855..67fb957 100644
--- a/src/editor/index.tsx
+++ b/src/editor/index.tsx
@@ -1,21 +1,31 @@
 import { useEffect, useRef } from "react";
 import { Layout } from "antd";
 
-import "./index.less";
 import Plot from "./Plot";
+import Menu from "./Menu";
+import Catalog from "./Catalog";
+import Property from "./Property";
+
+import "./index.less";
 
 const { Header, Footer, Sider, Content } = Layout;
 
 export const Editor = () => {
   return (
     <Layout className="editor-main">
-      <Header className="editor-header">header</Header>
+      <Header className="editor-header">
+        <Menu />
+      </Header>
       <Layout className="editor-body">
-        <Sider className="editor-body-left">Sider</Sider>
+        <Sider className="editor-body-left">
+          <Catalog />
+        </Sider>
         <Content className="editor-body-center">
           <Plot />
         </Content>
-        <Sider className="editor-body-right">Sider</Sider>
+        <Sider className="editor-body-right">
+          <Property />
+        </Sider>
       </Layout>
     </Layout>
   );