feat: 初始化目录面板

src/editor/Catalog/index.tsx

@@ -1,5 +1,22 @@
+import { Collapse } from "antd";
+
+import "./style.less";
+
+const { Panel } = Collapse;
+
 const Catalog = () => {
-  return <h1>属性区域</h1>;
+  const callback = (key: string | string[]) => console.log(key);
+  return (
+    <Collapse
+      defaultActiveKey={["1"]}
+      onChange={callback}
+      expandIconPosition="right"
+    >
+      <Panel header="矩形" key="1"></Panel>
+      <Panel header="多边形" key="2"></Panel>
+      <Panel header="线段" key="3"></Panel>
+    </Collapse>
+  );
 };
 
 export default Catalog;

src/editor/Catalog/style.less

@@ -0,0 +1,5 @@
+.ant-collapse-icon-position-right > .ant-collapse-item > .ant-collapse-header{
+  padding: 6px 8px;
+  font-size: 12px;
+  background-color: #f7fafc;
+}

src/store/reducers.ts

@@ -1,4 +1,4 @@
-import { createStore } from "redux";
+import produce from "immer";
 import { initState } from "./initState";
 import { ActionTypes } from "./actions";
 import { IEditorState, IOverlay } from "./type";
@@ -12,25 +12,18 @@ export function reducer(state = initState, action: Action): IEditorState {
   const { type, payload } = action;
   switch (type) {
     case ActionTypes.CreateOverlay:
-      return {
+      return produce(state, (draft) => {
-        ...state,
+        draft.map.status = "createOverlay";
-        map: {
+        draft.map.overlayType = payload as string;
-          ...state.map,
+      });
-          status: "createOverlay",
-          overlayType: payload as string,
-        },
-        //
-      };
     case ActionTypes.FinishCreateOverlay:
-      return {
+      return produce(state, (draft) => {
-        ...state,
+        const overlay = payload as IOverlay;
-        map: {
+        overlay.name = "测试矩形";
-          ...state.map,
+        draft.map.status = "";
-          status: "",
+        draft.map.overlayType = "";
-          overlayType: "",
+        draft.map.rectangles = state.map.rectangles.concat([overlay]);
-          rectangles: [payload as IOverlay].concat(state.map.rectangles),
+      });
-        },
-      };
     default:
       return state;
   }