feat: 添加思维导图历史记录

apps/designer/src/components/HistoryPanel.tsx

@@ -1,4 +1,4 @@
-import { Button, Spin, Modal } from "antd";
+import { Button, Spin, Empty, Popconfirm } from "antd";
 import React, { useState, forwardRef, useEffect } from "react";
 import { useModel } from "umi";
 import {
@@ -24,7 +24,7 @@ export default forwardRef(function HistoryPanel(
 ) {
   const { showHistory, setShowHistory } = useModel("appModel");
   const [data, setData] = useState<HistoryItem[]>();
-  const { confirm } = Modal;
+
   const { run, loading } = useRequest(HistoryList, {
     manual: true,
     defaultParams: [{ id: props.graphId }],
@@ -42,31 +42,19 @@ export default forwardRef(function HistoryPanel(
   }, [props.graphId, showHistory]);
 
   const handleDeleteHistory = (id: string) => {
-    confirm({
-      title: "确定要删除该记录吗？",
-      content: "删除后不可恢复",
-      onOk() {
-        DeleteHistory({ id }).then(() => {
-          run({
-            id: props.graphId,
-          });
-        });
-      },
+    DeleteHistory({ id }).then(() => {
+      run({
+        id: props.graphId,
+      });
     });
   };
 
   const handleRevertHistory = (id: string) => {
-    confirm({
-      title: "确定要恢复该记录吗？",
-      content: "",
-      onOk() {
-        RevertHistory({ id }).then(() => {
-          run({
-            id: props.graphId,
-          });
-          props.onRevert?.();
-        });
-      },
+    RevertHistory({ id }).then(() => {
+      run({
+        id: props.graphId,
+      });
+      props.onRevert?.();
     });
   };
 
@@ -85,20 +73,30 @@ export default forwardRef(function HistoryPanel(
         </div>
         {showBtn && (
           <div>
-            <Button
-              type="text"
-              size="small"
-              icon={<i className="iconfont icon-lishijilu" />}
-              onClick={() => {
-                handleRevertHistory(history.id);
-              }}
-            />
-            <Button
-              type="text"
-              size="small"
-              icon={<i className="iconfont icon-shanchu" />}
-              onClick={() => handleDeleteHistory(history.id)}
-            />
+            <Popconfirm
+              title="确定要恢复记录吗？"
+              okText="确定"
+              cancelText="取消"
+              onConfirm={() => handleRevertHistory(history.id)}
+            >
+              <Button
+                type="text"
+                size="small"
+                icon={<i className="iconfont icon-lishijilu" />}
+              />
+            </Popconfirm>
+            <Popconfirm
+              title="确定要删除记录吗？"
+              okText="确定"
+              cancelText="取消"
+              onConfirm={() => handleDeleteHistory(history.id)}
+            >
+              <Button
+                type="text"
+                size="small"
+                icon={<i className="iconfont icon-shanchu" />}
+              />
+            </Popconfirm>
           </div>
         )}
       </div>
@@ -120,11 +118,15 @@ export default forwardRef(function HistoryPanel(
         </div>
       </div>
       <div className="flex-1 overflow-y-auto">
-        <Spin spinning={loading}>
-          {data?.map((item: HistoryItem, i: number) => (
-            <ItemComponent history={item} key={i} />
-          ))}
-        </Spin>
+        {!loading && data?.length ? (
+          <Spin spinning={loading}>
+            {data?.map((item: HistoryItem, i: number) => (
+              <ItemComponent history={item} key={i} />
+            ))}
+          </Spin>
+        ) : (
+          <Empty className="mt-40px" description={"暂无历史记录"} />
+        )}
       </div>
     </div>
   );

apps/designer/src/pages/mindmap/components/HeaderToolbar/index.tsx

@@ -26,6 +26,8 @@ export default function index() {
     setCorrelationEdgeInfo,
   } = useModel("mindMapModel");
 
+  const { setShowHistory } = useModel("appModel");
+
   const {
     handleFind,
     handleReplace,
@@ -63,6 +65,7 @@ export default function index() {
     const graphInfo = {
       ...(mindProjectInfo || {}),
       ...mindProjectInfo?.pageSetting,
+      graphId: sessionStorage.getItem("projectId"),
       type: GraphType.mindmap
     }
     delete graphInfo.pageSetting;
@@ -78,8 +81,10 @@ export default function index() {
   // 克隆 todo
   const handleClone = () => {};
 
-  // 历史记录 todo
-  const handleHistory = () => {};
+  // 历史记录
+  const handleHistory = () => {
+    setShowHistory(true);
+  };
 
   useEffect(() => {
     graph && setInstance(graph);
@@ -223,12 +228,12 @@ export default function index() {
       icon: <i className="w-20px iconfont icon-file-image" />,
       onClick: handleExportImage,
     },
-    // {
-    //   key: "6",
-    //   label: "历史记录",
-    //   icon: <i className="w-20px iconfont icon-lishijilu" />,
-    //   onClick: handleHistory,
-    // },
+    {
+      key: "6",
+      label: "历史记录",
+      icon: <i className="w-20px iconfont icon-lishijilu" />,
+      onClick: handleHistory,
+    },
     // {
     //   key: "1-8",
     //   type: "divider",

apps/designer/src/pages/mindmap/index.tsx

@@ -13,11 +13,13 @@ import { defaultProject, topicData } from "@/config/data";
 import { TopicItem } from "@/types";
 import { buildTopic } from "./mindMap";
 import { TopicType } from "@/enum";
+import HistoryPanel from "@/components/HistoryPanel";
 
 export default function MindMap() {
   const { rightToobarActive, initMindMap, setMindProjectInfo } =
     useModel("mindMapModel");
   const graphRef = useRef<HTMLDivElement>(null);
+  const { showHistory } = useModel("appModel");
 
   useEffect(() => {
     graphRef.current && initMindMap(graphRef.current);
@@ -73,37 +75,44 @@ export default function MindMap() {
         topics.push(mainTopic);
       }
     }
-    setMindProjectInfo({
-      name: graphInfo.name,
-      desc: graphInfo?.desc || "",
-      version: graphInfo.version,
-      author: graphInfo?.author || "",
-      theme: graphInfo?.theme || defaultProject.theme,
-      structure: graphInfo?.structure || defaultProject.structure,
-      pageSetting: {
-        backgroundType:
-          graphInfo?.backgroundType ||
-          defaultProject.pageSetting.backgroundType,
-        backgroundColor:
-          graphInfo?.backgroundColor ||
-          defaultProject.pageSetting.backgroundColor,
-        backgroundImage:
-          graphInfo?.backgroundImage ||
-          defaultProject.pageSetting.backgroundImage,
-        branchY: graphInfo?.branchY || defaultProject.pageSetting.branchY,
-        branchX: graphInfo?.branchX || defaultProject.pageSetting.branchX,
-        subTopicY: graphInfo?.subTopicY || defaultProject.pageSetting.subTopicY,
-        subTopicX: graphInfo?.subTopicX || defaultProject.pageSetting.subTopicX,
-        alignSameTopic:
-          graphInfo?.alignSameTopic ||
-          defaultProject.pageSetting.alignSameTopic,
-        showWatermark:
-          graphInfo?.showWatermark || defaultProject.pageSetting.showWatermark,
-        watermarkText:
-          graphInfo?.watermarkText || defaultProject.pageSetting.watermarkText,
+    setMindProjectInfo(
+      {
+        name: graphInfo.name,
+        desc: graphInfo?.desc || "",
+        version: graphInfo.version,
+        author: graphInfo?.author || "",
+        theme: graphInfo?.theme || defaultProject.theme,
+        structure: graphInfo?.structure || defaultProject.structure,
+        pageSetting: {
+          backgroundType:
+            graphInfo?.backgroundType ||
+            defaultProject.pageSetting.backgroundType,
+          backgroundColor:
+            graphInfo?.backgroundColor ||
+            defaultProject.pageSetting.backgroundColor,
+          backgroundImage:
+            graphInfo?.backgroundImage ||
+            defaultProject.pageSetting.backgroundImage,
+          branchY: graphInfo?.branchY || defaultProject.pageSetting.branchY,
+          branchX: graphInfo?.branchX || defaultProject.pageSetting.branchX,
+          subTopicY:
+            graphInfo?.subTopicY || defaultProject.pageSetting.subTopicY,
+          subTopicX:
+            graphInfo?.subTopicX || defaultProject.pageSetting.subTopicX,
+          alignSameTopic:
+            graphInfo?.alignSameTopic ||
+            defaultProject.pageSetting.alignSameTopic,
+          showWatermark:
+            graphInfo?.showWatermark ||
+            defaultProject.pageSetting.showWatermark,
+          watermarkText:
+            graphInfo?.watermarkText ||
+            defaultProject.pageSetting.watermarkText,
+        },
+        topics,
       },
-      topics,
-    }, true);
+      true
+    );
   }, [data]);
 
   const params = useParams();
@@ -115,6 +124,12 @@ export default function MindMap() {
     }
   }, []);
 
+  const handleRevert = () => {
+    if (params?.id) {
+      run({ id: params.id });
+    }
+  };
+
   useEffect(() => {
     document.addEventListener(
       "mousewheel",
@@ -162,6 +177,14 @@ export default function MindMap() {
         <Layout className="w-100vw h-100vh">
           <Layout.Content className={styles.container + " relative"}>
             <div ref={graphRef} className="w-full h-full"></div>
+            {showHistory ? (
+              <div className="absolute bottom-0 left-0 h-95vh w-200px shadow-md">
+                <HistoryPanel
+                  graphId={params.id ? params.id : ""}
+                  onRevert={handleRevert}
+                />
+              </div>
+            ) : null}
             <HeaderToolbar />
             <RightToolbar />
             <Footer />