菜单栏初始化

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;

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;

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;

src/editor/Menu/style.less

@@ -0,0 +1,3 @@
+.menu-title{
+  cursor: pointer;
+}

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