diff --git a/src/editor/Catalog/index.tsx b/src/editor/Catalog/index.tsx
index d4113cf..4673222 100644
--- a/src/editor/Catalog/index.tsx
+++ b/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;
diff --git a/src/editor/Catalog/style.less b/src/editor/Catalog/style.less
new file mode 100644
index 0000000..7d9a586
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/src/store/reducers.ts b/src/store/reducers.ts
index 0a5f366..92ad219 100644
--- a/src/store/reducers.ts
+++ b/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 {
-        ...state,
-        map: {
-          ...state.map,
-          status: "createOverlay",
-          overlayType: payload as string,
-        },
-        //
-      };
+      return produce(state, (draft) => {
+        draft.map.status = "createOverlay";
+        draft.map.overlayType = payload as string;
+      });
     case ActionTypes.FinishCreateOverlay:
-      return {
-        ...state,
-        map: {
-          ...state.map,
-          status: "",
-          overlayType: "",
-          rectangles: [payload as IOverlay].concat(state.map.rectangles),
-        },
-      };
+      return produce(state, (draft) => {
+        const overlay = payload as IOverlay;
+        overlay.name = "测试矩形";
+        draft.map.status = "";
+        draft.map.overlayType = "";
+        draft.map.rectangles = state.map.rectangles.concat([overlay]);
+      });
     default:
       return state;
   }