fix: 某些情况下storage数据不同步；简化验证逻辑；

go-gost · Jun 20, 2024 · a98f6b3 · a98f6b3
1 parent e21fb49
commit a98f6b3
Show file tree

Hide file tree

Showing 9 changed files with 142 additions and 126 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -6,9 +6,9 @@ import React, {
   useLayoutEffect,
   useContext,
 } from "react";
-import { ConfigProvider, message, theme, App as AntdApp } from "antd";
+import { ConfigProvider, message, theme, App as AntdApp, Spin } from "antd";
 import {
-  init,
+  userInit,
   logout,
   useInfo,
   useServerConfig,
@@ -24,7 +24,7 @@ import enGB from "antd/locale/en_GB";
 import { ServerComm } from "./api/local";
 import Ctx from "./uitls/ctx";
 import { useIsDark } from "./uitls/useTheme";
-import './uitls/i18n.ts';
+import "./uitls/i18n.ts";
 import { useTranslation } from "react-i18next";
 
 const Manage = React.lazy(() => import("./Pages/Manage"));
@@ -36,9 +36,7 @@ const AntdGlobal: React.FC<{ children: React.ReactNode }> = (props) => {
     ConfigProvider.config({
       theme: theme,
       holderRender: (children) => (
-        <ConfigProvider theme={theme}>
-          {children}
-        </ConfigProvider>
+        <ConfigProvider theme={theme}>{children}</ConfigProvider>
       ),
     });
   }, [locale, theme]);
@@ -55,6 +53,7 @@ function App() {
   const localConfig = useLocalConfig();
   const isDark = useIsDark();
   // const [userTheme, setUserTheme] = useState<any>(null); // 用户主题
+  const [isInit, setIsInit] = useState<any>(false);
   const [serverLoading, setServerLoading] = useState<any>(false);
   const [localLoading, setLocalLoading] = useState<any>(false);
   const [locale, setLocale] = useState<any>(zhCN);
@@ -102,9 +101,9 @@ function App() {
   });
 
   useEffect(() => {
-    init();
-    const apiUpdate = async (reqConfig: any) => {
-      if (reqConfig?.url === API.apis.config) return;
+    userInit().then(() => setIsInit(true));
+    const apiUpdate = async () => {
+      // if (reqConfig?.url === API.apis.config) return;
       return useServerConfig.set((await API.getConfig()) as any);
     };
     const localUpdate = async () => {
@@ -143,11 +142,11 @@ function App() {
       (window as any)?.monaco?.editor.setTheme("vs");
     }
   }, [isDark]);
-  
+
   useEffect(() => {
     const lang = i18n.resolvedLanguage;
-    setLocale(lang === 'zh' ? zhCN : enGB);
-  },[i18n.resolvedLanguage])
+    setLocale(lang === "zh" ? zhCN : enGB);
+  }, [i18n.resolvedLanguage]);
 
   return (
     <Ctx.Provider
@@ -162,8 +161,8 @@ function App() {
         locale={locale}
       >
         <AntdGlobal>
-          <React.Suspense fallback="loading...">
-            {info ? <Manage /> : <Home />}
+          <React.Suspense fallback={<Spin fullscreen size="large" />}>
+            {isInit ? info ? <Manage /> : <Home /> : <Spin fullscreen  size="large" />}
           </React.Suspense>
         </AntdGlobal>
       </ConfigProvider>

diff --git a/src/Pages/Manage.tsx b/src/Pages/Manage.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useContext, useEffect, useMemo, useRef, useState } from "react";
 import {
   Button,
   Col,
@@ -38,6 +38,7 @@ import {
 import { ThemeButton } from "../components/Theme";
 import { LanguageButton } from "../components/Language";
 import { useTranslation } from "react-i18next";
+import Ctx from "../uitls/ctx";
 
 const colSpan = {
   xs: 24,
@@ -53,6 +54,7 @@ const colSpan1 = {
 };
 
 const Manage = () => {
+  const { isLoading } = useContext(Ctx);
   const info = useInfo()!;
   const { t } = useTranslation();
   const gostConfig = useServerConfig();
@@ -62,8 +64,8 @@ const Manage = () => {
   const [locals, setLocals] = useState<any[]>([]);
   const ref = useRef<any>({});
 
-  const updateList = useCallback(async () => {
-    return getLocalServers()
+  useEffect(() => {
+    getLocalServers()
       .then((local) => {
         return local.sort((a, b) => {
           const t1 = a.time || 0;
@@ -74,24 +76,21 @@ const Manage = () => {
       .then((list) =>
         setLocals(
           list
-            .filter((item) => {
-              if (item.addr === info.addr) return false;
-              return true;
-            })
+            // .filter((item) => {
+            //   if (item.addr === info.addr) return false;
+            //   return true;
+            // })
             .map((item) => ({
               key: item.addr,
               label: <a href={`./?use=${item.addr}`}>{item.addr}</a>,
-              // onClick: () => {
-              //   window.open(`./?use=${item.addr}`, undefined, "noopener");
-              // },
             }))
         )
       );
-  }, []);
+  }, [info.addr]);
 
   useEffect(() => {
     fixOldCacheConfig().then((up) => {
-      up && configEvent.emit("update");
+      up && configEvent.emit("update", false);
     });
 
     const onSave = (ref.current.onSave = async () => {
@@ -105,24 +104,16 @@ const Manage = () => {
       }
     });
 
-    const update = () => {
-      setIsSaved(false);
-      if (!useInfo.get()?.autoSave) return;
-      return onSave();
-    };
-
-    const onApiUpdate = async (reqConfig: any) => {
-      setIsSaved(false);
-      if (!useInfo.get()?.autoSave) return;
-      if (reqConfig?.url === API.apis.config) return;
+    const onAutoSave = (autoSave = false) => {
+      if (autoSave) setIsSaved(false);
+      if (!useInfo.get()?.autoSave || !autoSave) return;
       return onSave();
     };
-    updateList();
-    configEvent.on("update", update);
-    configEvent.on("apiUpdate", onApiUpdate);
+    configEvent.on("update", onAutoSave);
+    configEvent.on("apiUpdate", onAutoSave);
     return () => {
-      configEvent.off("update", update);
-      configEvent.off("apiUpdate", onApiUpdate);
+      configEvent.off("update", onAutoSave);
+      configEvent.off("apiUpdate", onAutoSave);
     };
   }, []);
 
@@ -160,9 +151,10 @@ const Manage = () => {
           <Col color="">
             <Button
               type="link"
+              loading={isLoading}
               icon={<ReloadOutlined />}
               onClick={async () => {
-                useServerConfig.set((await API.getConfig()) as any);
+                configEvent.emit("update");
               }}
             >
               {t("manage.cmd.reload")}
@@ -193,7 +185,10 @@ const Manage = () => {
               >
                 {t("manage.cmd.download")}
               </Button>
-              <Dropdown.Button menu={{ items }} onClick={logout}>
+              <Dropdown.Button
+                menu={{ activeKey: info.addr, items }}
+                onClick={logout}
+              >
                 {t("manage.cmd.logout")}
               </Dropdown.Button>
               <ThemeButton />

diff --git a/src/components/List/Public.tsx b/src/components/List/Public.tsx
@@ -71,7 +71,7 @@ const PublicList: React.FC<PublicListProps> = (props) => {
   const {
     deleteValue,
     updateValue,
-    dispatch,
+    disable,
     enable,
     updateLocal,
     deleteLocal,
@@ -195,7 +195,7 @@ const PublicList: React.FC<PublicListProps> = (props) => {
                         type="link"
                         size={"small"}
                         onClick={async () => {
-                          await dispatch(record);
+                          await disable(record);
                         }}
                       >
                         {/* 禁用 */}

diff --git a/src/components/ListCard/index.tsx b/src/components/ListCard/index.tsx
@@ -88,11 +88,11 @@ const ListCard: React.FC<ListCardProps> = (props) => {
     return {
       updateValue: async (id: string, value: any, update = true) => {
         await api.put(id, value);
-        update && configEvent.emit("apiUpdate", {});
+        update && configEvent.emit("apiUpdate", true);
       },
       deleteValue: async (value: any, update = true) => {
         await api.delete(value.name);
-        update && configEvent.emit("apiUpdate", {});
+        update && configEvent.emit("apiUpdate", true);
       },
       addValue: async (json: any, update = true) => {
         let addName = json.name || `${name}-0`;
@@ -124,20 +124,20 @@ const ListCard: React.FC<ListCardProps> = (props) => {
             description: t("msg.fixName", { name: addName }),
             message: t("msg.autofix"),
           });
-        update && configEvent.emit("apiUpdate", {});
+        update && configEvent.emit("apiUpdate", true);
       },
-      dispatch: async (value: any) => {
+      disable: async (value: any) => {
         if (!localApi) return;
         await api.delete(value.name);
         await localApi.add(value);
-        configEvent.emit("update");
+        configEvent.emit("update", true);
         // updateLocalList?.();
       },
       enable: async (value: any) => {
         if (!localApi) return;
         await api.post(value);
         await localApi.delete(value.name);
-        configEvent.emit("update");
+        configEvent.emit("update", true);
         // updateLocalList?.();
       },
       updateLocal: async (key: string, value: any) => {

diff --git a/src/uitls/ctx.tsx b/src/uitls/ctx.tsx
@@ -13,7 +13,7 @@ export type Comm = {
   updateValue: (id: string, value: any) => Promise<void>;
   deleteValue: (value: any) => Promise<void>;
   addValue: (json: any) => Promise<void>;
-  dispatch: (value: any) => Promise<void>;
+  disable: (value: any) => Promise<void>;
   enable: (value: any) => Promise<void>;
   updateLocal: (key: string, value: any) => Promise<void>;
   deleteLocal: (value: any) => Promise<void>;

diff --git a/src/uitls/require.ts b/src/uitls/require.ts
@@ -14,7 +14,6 @@ require.interceptors.request.use((config) => {
 require.interceptors.response.use(
   (res) => {
     if (res.config.method !== "get" && !(res.config as any)?.noMsg) {
-      // configEvent.emit("apiUpdate", res.config);
       message.success(t("msg.success"));
     }
     if (res.data) {