增加自动保存功能

src/App.tsx

@@ -89,7 +89,7 @@ function App() {
       document.title = slef.current.defaultTitle;
     }
   }, [gostInfo]);
-
+  
   return (
     <Ctx.Provider
       value={{

src/Pages/Manage.tsx

@@ -1,8 +1,20 @@
-import { Button, Col, Layout, Row, Select, Space } from "antd";
-import { logout, useGolstCofnig } from "../uitls/server";
+import { useContext, useEffect, useRef, useState } from "react";
+import {
+  Button,
+  Col,
+  Form,
+  Input,
+  Layout,
+  Modal,
+  Radio,
+  Row,
+  Select,
+  Space,
+  Switch,
+} from "antd";
+import { logout, saveLocal, useGolstCofnig } from "../uitls/server";
 import { download, jsonFormat } from "../uitls";
 import Ctx from "../uitls/ctx";
-import { useContext, useEffect } from "react";
 import * as API from "../api";
 import ListCard from "../components/ListCard";
 import ChainCard from "../components/ListCard/Chains";
@@ -11,6 +23,12 @@ import { ProCard } from "@ant-design/pro-components";
 import HopsCard from "../components/ListCard/Hops";
 import { fixOldCacheConfig } from "../api/local";
 import { configEvent } from "../uitls/events";
+import {
+  CheckCircleOutlined,
+  DownloadOutlined,
+  SaveOutlined,
+  SettingOutlined,
+} from "@ant-design/icons";
 
 const colSpan = {
   xs: 24,
@@ -28,12 +46,48 @@ const colSpan1 = {
 const Manage = () => {
   const gostInfo = useGolstCofnig()!;
   const { gostConfig } = useContext(Ctx);
+  const [show, setShow] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [isSaved, setIsSaved] = useState(true);
+
+  const ref = useRef<any>({ config: gostConfig });
+
   useEffect(() => {
     fixOldCacheConfig().then((up) => {
       up && configEvent.emit("update");
     });
-    return () => {};
+
+    const onSave = (ref.current.onSave = async () => {
+      try {
+        setLoading(true);
+        const { saveFormat, savePath } = useGolstCofnig.get() || {};
+        await API.saveCofnig(saveFormat, savePath);
+        setIsSaved(true);
+      } finally {
+        setLoading(false);
+      }
+    });
+
+    const update = () => {
+      setIsSaved(false);
+      if (!useGolstCofnig.get()?.autoSave) return;
+      return onSave();
+    };
+    const onApiUpdate = async (reqConfig: any) => {
+      setIsSaved(false);
+      if (!useGolstCofnig.get()?.autoSave) return;
+      if (reqConfig.url === API.apis.config) return;
+      return onSave();
+    };
+
+    configEvent.on("update", update);
+    configEvent.on("apiUpdate", onApiUpdate);
+    return () => {
+      configEvent.off("update", update);
+      configEvent.off("apiUpdate", onApiUpdate);
+    };
   }, []);
+  console.log('gostInfo', gostInfo)
   return (
     <Layout style={{ height: "100vh", overflow: "hidden" }}>
       <Layout.Header style={{ color: "#FFF" }}>
@@ -51,16 +105,22 @@ const Manage = () => {
           <Col>{gostInfo.addr}</Col>
           <Col>
             <Space>
+              <Space.Compact>
+                <Button
+                  icon={isSaved ? <CheckCircleOutlined /> : <SaveOutlined />}
+                  loading={loading}
+                  onClick={() => ref.current?.onSave?.()}
+                >
+                  保存到服务器
+                </Button>
+                <Button
+                  icon={<SettingOutlined />}
+                  onClick={() => setShow(true)}
+                />
+              </Space.Compact>
               <Button
                 // type="link"
-                onClick={() => {
-                  API.saveCofnig();
-                }}
-              >
-                保存配置
-              </Button>
-              <Button
-                // type="link"
+                icon={<DownloadOutlined />}
                 onClick={() => {
                   download(jsonFormat(gostConfig!), "gost.json");
                 }}
@@ -73,6 +133,39 @@ const Manage = () => {
             </Space>
           </Col>
         </Row>
+        <Modal
+          destroyOnClose
+          open={show}
+          onCancel={() => setShow(false)}
+          footer={false}
+        >
+          <Form
+            initialValues={gostInfo}
+            layout="horizontal"
+            labelCol={{span:4}}
+            onValuesChange={(v, vs) => {
+              console.log(v,vs)
+              Object.assign(gostInfo, v);
+              useGolstCofnig.set(gostInfo);
+              if (gostInfo.isLocal) {
+                saveLocal(gostInfo.addr, gostInfo);
+              }
+            }}
+          >
+            <Form.Item name="autoSave" label="自动保存" valuePropName="checked">
+              <Switch />
+            </Form.Item>
+            <Form.Item name="saveFormat" label="格式">
+              <Radio.Group optionType="button" buttonStyle="solid">
+                <Radio value="json">json</Radio>
+                <Radio value="yaml">yaml</Radio>
+              </Radio.Group>
+            </Form.Item>
+            <Form.Item name="savePath" label="保存路径" trigger="onChange">
+              <Input placeholder="指定保存，默认保存到上下文目录" />
+            </Form.Item>
+          </Form>
+        </Modal>
       </Layout.Header>
       <Layout.Content style={{ height: "100%", overflow: "auto" }}>
         <Row style={{ padding: 16, overflow: "hidden" }}>

src/api/index.ts

@@ -47,5 +47,5 @@ export const services = getRESTfulApi<Gost.ServiceConfig>(apis["services"]);
 export const getConfig = (format?: Format) => require.get(apis.config);
 
 // 保存当前config到服务器
-export const saveCofnig = (format: Format = "json") =>
-  require.post(apis.config, null, { params: { format } });
+export const saveCofnig = (format: Format = "json", path?: string | null) =>
+  require.post(apis.config, null, { params: { format, path }, noMsg: true } as any);

src/uitls/index.ts

@@ -37,6 +37,5 @@ export const download = (content: BlobPart, filename: string) => {
   link.download = filename;
   link.href = href;
   link.click();
-  document.body.removeChild(link);
   URL.revokeObjectURL(href);
 };

src/uitls/require.ts

@@ -12,7 +12,7 @@ require.interceptors.request.use((config) => {
 });
 require.interceptors.response.use(
   (res) => {
-    if (res.config.method !== "get") {
+    if (res.config.method !== "get" && !(res.config as any)?.noMsg) {
       // configEvent.emit("apiUpdate", res.config);
       message.success('操作成功！')
     }

src/uitls/server.ts

@@ -14,6 +14,10 @@ export type GostApiConfig = {
     password: string;
   };
   time?: number;
+  autoSave?: boolean | null;
+  saveFormat?: "json" | "yaml";
+  savePath?: string | null;
+  isLocal?: boolean | null;
 };
 
 export const useGolstCofnig = getUseValue<GostApiConfig | null>();
@@ -46,6 +50,7 @@ export const init = async () => {
   if (window[uselocalServerKey]) {
     const server = await getLocal(window[uselocalServerKey]);
     if (server) {
+      server.isLocal = true;
       await login(server);
       if (server) {
         server.time = Date.now();
@@ -68,7 +73,9 @@ export const login = async (arg: GostApiConfig, save?: false) => {
     window[gostServerKey] = arg;
     window.sessionStorage.setItem(gostServerKey, JSON.stringify(arg));
     if (save) {
-      saveLocal(arg.addr, arg);
+      arg.isLocal = true;
+      window[gostServerKey] = arg
+      await saveLocal(arg.addr, arg);
     }
   } catch (e: any) {
     // console.log(e);
@@ -83,7 +90,7 @@ export const logout = async () => {
 };
 
 export const saveLocal = async (id: string, arg: GostApiConfig) => {
-  return ServerComm.setServer({ ...arg, time: Date.now() });
+  return ServerComm.setServer({ ...arg, isLocal: true, time: Date.now() });
 };
 
 export const getLocal = async (