fix: 修改封面图片上传

apps/designer/src/api/index.ts

@@ -140,7 +140,10 @@ export const GetAllTablesAndViews = () => {
  */
 export const UploadFile = (data: FormData) => {
   return request<{
-    filePath: string;
+    code: number;
+    result: {
+      id: string
+    }[]
   }>("/fileApi/File/UploadFiles", {
     method: "POST",
     headers: {
@@ -156,10 +159,9 @@ export const UploadFile = (data: FormData) => {
  * @returns
  */
 export const GetFile = (data: {fileId: string}) => {
-  return request<{
-    filePath: string;
-  }>("/File/GetImage", {
+  return request("/File/GetImage", {
     method: "GET",
-    params: data
+    params: data,
+    responseType: "blob",
   });
 };

apps/designer/src/pages/flow/components/MenuBar/index.tsx

@@ -94,6 +94,13 @@ export default function MenuBar() {
     }
   };
 
+  useEffect(() => {
+    graph?.bindKey("ctrl+s", (e: KeyboardEvent) => {
+      e.preventDefault();
+      handleSave();
+    });
+  }, [graph]);
+
   const [name, setName] = useState(projectInfo?.graph?.name);
 
   useEffect(() => {
@@ -132,13 +139,14 @@ export default function MenuBar() {
 
       const formData = new FormData();
       formData.append("file", file);
-      const res = UploadFile(formData);
+      const res = await UploadFile(formData);
 
       await SaveAll({
         graph: {
           ...(projectInfo?.graph || {}),
           ...pageState,
-          type: GraphType.flowchart
+          type: GraphType.flowchart,
+          coverImage: res?.result?.[0]?.id
         },
         elements: elements?.filter(item => !item.data?.isPage)
       });

apps/designer/src/pages/home/ProjectCard.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { Card, Dropdown, Modal, Input, message } from "antd";
 import { GraphType } from "@/enum";
 import defaultFlowImg from "@/assets/image/flow.png";
@@ -11,7 +11,7 @@ export default function ProjectCard({
   onFresh,
   onDelete,
   onChangeLocation,
-  hideRemove
+  hideRemove,
 }: {
   record: any;
   onFresh: () => void;
@@ -24,14 +24,30 @@ export default function ProjectCard({
     const { origin, pathname } = window.location;
     const enterpriseCode = sessionStorage.getItem("enterpriseCode");
     if (record.type === GraphType.mindmap) {
-      window.open(`${origin}${pathname}#/mindmap/${record.id}?enterpriseCode=${enterpriseCode}`);
+      window.open(
+        `${origin}${pathname}#/mindmap/${record.id}?enterpriseCode=${enterpriseCode}`
+      );
     } else {
-      window.open(`${origin}${pathname}#/flow/${record.id}?enterpriseCode=${enterpriseCode}`);
+      window.open(
+        `${origin}${pathname}#/flow/${record.id}?enterpriseCode=${enterpriseCode}`
+      );
     }
   };
 
   const { confirm } = Modal;
 
+  const [coverImg, setCoverImg] = useState<string>("");
+  useEffect(() => {
+    if (record.coverImage) {
+      GetFile({ fileId: record.coverImage }).then((res) => {
+       const blob = new Blob([res], { type: "image/png" });
+       const url = URL.createObjectURL(blob);
+       console.log(url)
+       setCoverImg(url);
+      });
+    }
+  }, []);
+
   return (
     <Card
       hoverable
@@ -43,10 +59,11 @@ export default function ProjectCard({
             border: "solid 1px #f5f5f5",
           }}
           src={
-            record?.coverImage ||
-            (record.type === GraphType.mindmap
-              ? defaultMindImg
-              : defaultFlowImg)
+            record?.coverImage
+              ? coverImg
+              : record.type === GraphType.mindmap
+                ? defaultMindImg
+                : defaultFlowImg
           }
         />
       }
@@ -91,13 +108,15 @@ export default function ProjectCard({
                   });
                 },
               },
-              !hideRemove ? {
-                key: "2",
-                label: "移动",
-                onClick: () => {
-                  onChangeLocation?.(record.id);
-                }
-              }: null,
+              !hideRemove
+                ? {
+                    key: "2",
+                    label: "移动",
+                    onClick: () => {
+                      onChangeLocation?.(record.id);
+                    },
+                  }
+                : null,
               {
                 key: "3",
                 label: "删除",
@@ -139,7 +158,7 @@ export default function ProjectCard({
             {record.type === GraphType.mindmap ? (
               <i
                 className={`iconfont icon-siweidaotu_huaban1 mr-8px`}
-                style={{color: '#9ae396'}}
+                style={{ color: "#9ae396" }}
               />
             ) : (
               <i className={`iconfont icon-liuchengtu color-#067bef mr-8px`} />

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

@@ -6,10 +6,11 @@ import { useModel, Icon } from "umi";
 import { addTopic } from "../../mindMap";
 import { TopicType, GraphType } from "@/enum";
 import { selectTopic, addBorder, addSummary } from "@/utils/mindmapHander";
-import { createNew } from "@/utils";
+import { base64ToFile, createNew } from "@/utils";
 import FindReplaceModal from "@/components/FindReplaceModal";
 import { useFindReplace } from "@/hooks/useFindReplace";
 import { SaveAll } from "@/api/systemDesigner";
+import { UploadFile } from "@/api";
 
 export default function index() {
   const {
@@ -62,22 +63,44 @@ export default function index() {
 
   // 保存
   const handleSave = async () => {
-    const graphInfo = {
-      ...(mindProjectInfo || {}),
-      ...mindProjectInfo?.pageSetting,
-      id: sessionStorage.getItem("projectId"),
-      type: GraphType.mindmap
-    }
-    delete graphInfo.pageSetting;
-    delete graphInfo.topics;
-    await SaveAll({
-      graph: graphInfo,
-      elements: mindProjectInfo?.topics
+    graph?.toPNG(async (dataUri) => {
+      const file = base64ToFile(dataUri, mindProjectInfo?.name || '封面图', "image/png");
+
+      const formData = new FormData();
+      formData.append("file", file);
+      const res = await UploadFile(formData);
+
+      const graphInfo = {
+        ...(mindProjectInfo || {}),
+        ...mindProjectInfo?.pageSetting,
+        id: sessionStorage.getItem("projectId"),
+        type: GraphType.mindmap
+      }
+      delete graphInfo.pageSetting;
+      delete graphInfo.topics;
+      await SaveAll({
+        graph: {
+          ...graphInfo,
+          coverImage: res?.result?.[0]?.id
+        },
+        elements: mindProjectInfo?.topics
+      });
+  
+      message.success("保存成功");
+    }, {
+      width: 300,
+      height: 150,
+      quality: 0.2
     });
-
-    message.success("保存成功");
   };
 
+  useEffect(() => {
+    graph?.bindKey("ctrl+s", (e: KeyboardEvent) => {
+      e.preventDefault();
+      handleSave();
+    });
+  }, [graph]);
+
   // 克隆 todo
   const handleClone = () => {};
 

apps/designer/src/utils/index.ts

@@ -1,6 +1,6 @@
-export * from './hander';
+export * from "./hander";
 import { AddGraph } from "@/api/systemDesigner";
-import { GraphType } from '@/enum';
+import { GraphType } from "@/enum";
 
 /**
  * 打印图片
@@ -42,16 +42,20 @@ export function uuid() {
 /**
  * 创建新的图形
  */
-export const createNew = async (type: string, folderId: string = 'root') => {
+export const createNew = async (type: string, folderId: string = "root") => {
   const res = await AddGraph({ type, folderId });
   const id = res?.result?.graph?.id;
-  if(!id) return false;
+  if (!id) return false;
   const { origin, pathname } = window.location;
   const enterpriseCode = sessionStorage.getItem("enterpriseCode");
-  if(type === GraphType.mindmap) {
-    window.open(`${origin}${pathname}#/mindmap/${id}?enterpriseCode=${enterpriseCode}`);
+  if (type === GraphType.mindmap) {
+    window.open(
+      `${origin}${pathname}#/mindmap/${id}?enterpriseCode=${enterpriseCode}`
+    );
   } else {
-    window.open(`${origin}${pathname}#/flow/${id}?enterpriseCode=${enterpriseCode}`);
+    window.open(
+      `${origin}${pathname}#/flow/${id}?enterpriseCode=${enterpriseCode}`
+    );
   }
   return id;
 };
@@ -91,30 +95,44 @@ export const listToTree = (list: TreeNode[], parent: TreeNode): TreeNode => {
 
 /**
  * base64 转 file
- * @param base64String 
- * @param fileName 
- * @param fileType 
- * @returns 
+ * @param base64String
+ * @param fileName
+ * @param fileType
+ * @returns
  */
-export function base64ToFile(base64String: string, fileName: string, fileType: string): File {
+export function base64ToFile(
+  base64String: string,
+  fileName: string,
+  fileType: string
+): File {
   // 移除Base64字符串中的前缀（如"data:image/png;base64,"）
-  const base64Data = base64String.split(',')[1];
-  
+  const base64Data = base64String.split(",")[1];
+
   // 解码Base64字符串
   const byteCharacters = atob(base64Data);
-  
+
   // 创建一个Uint8Array来存储二进制数据
   const byteArrays = new Uint8Array(byteCharacters.length);
-  
+
   for (let i = 0; i < byteCharacters.length; i++) {
     byteArrays[i] = byteCharacters.charCodeAt(i);
   }
-  
+
   // 创建Blob对象
   const blob = new Blob([byteArrays], { type: fileType });
-  
+
   // 创建File对象
   const file = new File([blob], fileName, { type: fileType });
-  
+
   return file;
-}
+}
+
+/**
+ * 获取token
+ */
+export const getToken = () => {
+  const enterpriseCode = sessionStorage.getItem("enterpriseCode");
+  const token = localStorage.getItem("token_" + enterpriseCode);
+
+  return token;
+};