feat: 添加json导入导出

src/views/designer/index.vue

@@ -8,6 +8,14 @@
         <MenuBar />
       </div>
       <div class="header-right">
+        <Upload :before-upload="handleUpload" :show-upload-list="false" accept=".json">
+          <Button size="small" style="margin-right: 8px"
+            ><ImportOutlined />导入json</Button
+          >
+        </Upload>
+        <Button size="small" style="margin-right: 8px" @click="handleJson"
+          ><ExportOutlined />导出json</Button
+        >
         <Button size="small" style="margin-right: 8px" @click="handlePreview"
           ><DesktopOutlined />预览</Button
         >
@@ -53,8 +61,9 @@ import {
   LayoutContent,
   Button,
   message,
+  Upload,
 } from "ant-design-vue";
-import { DesktopOutlined, SaveOutlined } from "@ant-design/icons-vue";
+import { DesktopOutlined, SaveOutlined, ImportOutlined, ExportOutlined } from "@ant-design/icons-vue";
 import { useProjectStore } from "@/store/modules/project";
 import { useStageStore } from "@/store/modules/stage";
 import { useRoute } from "vue-router";
@@ -133,6 +142,42 @@ const handleSave = async () => {
     loading.value = false;
   }
 };
+
+const handleJson = () => {
+  const json = JSON.stringify(projectStore.projectInfo);
+  const blob = new Blob([json], { type: "application/json" });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = projectStore.projectInfo.name + ".json";
+  a.click();
+  URL.revokeObjectURL(url);
+};
+
+const handleUpload = (file: File) => {
+  appStore.setPageLoading(true);
+  const reader = new FileReader();
+  reader.onload = (e) => {
+    const result = e.target?.result;
+    if (typeof result === "string") {
+      try {
+        const json = JSON.parse(result);
+        projectStore.setProjectInfo(json);
+        message.success("导入成功");
+      } catch (e) {
+        message.error("文件格式错误");
+      } finally {
+        appStore.setPageLoading(false);
+      }
+    }
+  };
+  reader.readAsText(file);
+  reader.onerror = () => {
+    appStore.setPageLoading(false);
+    message.error("文件读取失败");
+  };
+  return false;
+};
 </script>
 
 <style lang="less" scoped>
@@ -154,7 +199,7 @@ const handleSave = async () => {
     text-overflow: ellipsis;
   }
   .header-right {
-    width: 300px;
+    width: 500px;
     text-align: right;
   }
 }