优化配置展现方式

src/App.css

@@ -4,3 +4,12 @@
 .g-boder {
   border: 1px solid #ccc;
 }
+
+.ant-space-item > .ant-tag {
+  margin-inline-end: inherit;
+}
+
+.ant-tag.editor-json {
+  cursor: pointer;
+}
+

src/App.tsx

@@ -1,7 +1,12 @@
 import { useState, useEffect, useRef, useMemo, useCallback } from "react";
-import { ConfigProvider, theme } from "antd";
-import Ctx from "./uitls/ctx";
-import { init, logout, useInfo } from "./uitls/server";
+import { ConfigProvider, message, theme } from "antd";
+import {
+  init,
+  logout,
+  useInfo,
+  useServerConfig,
+  useLocalConfig,
+} from "./uitls/server";
 import * as API from "./api";
 import Home from "./Pages/Home";
 import "./App.css";
@@ -10,30 +15,46 @@ import { configEvent } from "./uitls/events";
 import zhCN from "antd/locale/zh_CN";
 import Manage from "./Pages/Manage";
 import { ServerComm } from "./api/local";
+import Ctx from "./uitls/ctx";
 
 function App() {
   const info = useInfo();
-  const [gostConfig, setGostConfig] = useState<any>(null);
-  const [localConfig, setLocalConfig] = useState<any>(null);
+  // const [gostConfig, setGostConfig] = useState<any>(null);
+  // const [localConfig, setLocalConfig] = useState<any>(null);
+  const gostConfig = useServerConfig();
+  const localConfig = useLocalConfig();
   const [userTheme, setUserTheme] = useState<any>(null); // 用户主题
+  const [serverLoading, setServerLoading] = useState<any>(false);
+  const [localLoading, setLocalLoading] = useState<any>(false);
   const [isDark, setIsDark] = useState(
     window.matchMedia("(prefers-color-scheme: dark)").matches
   );
-
+  const isLoading = useMemo(
+    () => serverLoading || localLoading,
+    [serverLoading, localLoading]
+  );
   const slef = useRef({
     update: async () => {
-      // console.log("update");
-      const [l1, l2] = await Promise.all([
-        API.getConfig(),
-        slef.current.updateLocalConfig(useInfo.get()?.addr),
-      ]);
-      setGostConfig(l1);
-      setLocalConfig(l2);
-      return [l1, l2];
+      try {
+        setServerLoading(true);
+        setLocalLoading(true);
+        const [l1, l2] = await Promise.all([
+          API.getConfig(),
+          slef.current.updateLocalConfig(useInfo.get()?.addr),
+        ]);
+        useServerConfig.set(l1 as any);
+        useLocalConfig.set(l2);
+        return [l1, l2];  
+      } finally {
+        setServerLoading(false);
+        setLocalLoading(false);
+      }
     },
-    updateLocalConfig: (key?: string) => {
-      if (!key) setLocalConfig(null);
-      return ServerComm.getAllCacheConfig(key).then((data) => {
+    updateLocalConfig: async (key?: string) => {
+      try {
+        if (!key) useLocalConfig.set(null);
+        setLocalLoading(true);
+        const data = await ServerComm.getAllCacheConfig(key);
         const localConfig: any = {};
         data.forEach((item: any) => {
           const { _type_ } = item;
@@ -42,23 +63,22 @@ function App() {
             : (localConfig[_type_] = []);
           list.push(item);
         });
-        // setLocalConfig(localConfig);
         return localConfig;
-      });
+      } finally {
+        setLocalLoading(false);
+      }
     },
     defaultTitle: document.title,
   });
 
   useEffect(() => {
     init();
     const apiUpdate = async (reqConfig: any) => {
-      // console.log("reqConfig", reqConfig);
-      if (reqConfig.url === API.apis.config) return;
-      return setGostConfig(await API.getConfig());
+      if (reqConfig?.url === API.apis.config) return;
+      return useServerConfig.set((await API.getConfig()) as any);
     };
     const localUpdate = async () => {
-      // console.log("localUpdate");
-      return setLocalConfig(
+      return useLocalConfig.set(
         await slef.current.updateLocalConfig(useInfo.get()?.addr)
       );
     };
@@ -82,20 +102,21 @@ function App() {
   useEffect(() => {
     if (info) {
       slef.current.update().then(([data]) => {
-        setGostConfig(data);
+        // setGostConfig(data);
+        useServerConfig.set(data);
         document.title = info.addr.replace(/^(https?:)?\/\//, "");
       });
     } else {
       document.title = slef.current.defaultTitle;
     }
   }, [info]);
-  
+
   return (
     <Ctx.Provider
       value={{
         gostConfig,
         localConfig,
-        logout,
+        isLoading,
       }}
     >
       <ConfigProvider

src/Pages/Manage.tsx

@@ -1,7 +1,15 @@
-import { useContext, useEffect, useRef, useState } from "react";
+import {
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import {
   Button,
   Col,
+  Dropdown,
   Form,
   Input,
   Layout,
@@ -12,8 +20,15 @@ import {
   Space,
   Switch,
 } from "antd";
-import { logout, saveLocal, useInfo } from "../uitls/server";
+import {
+  getLocalServers,
+  logout,
+  saveLocal,
+  useInfo,
+  useServerConfig,
+} from "../uitls/server";
 import { download, jsonFormat } from "../uitls";
+import { MonacoEditor } from "../uitls/userMonacoWorker";
 import Ctx from "../uitls/ctx";
 import * as API from "../api";
 import ListCard from "../components/ListCard";
@@ -26,6 +41,7 @@ import { configEvent } from "../uitls/events";
 import {
   CheckCircleOutlined,
   DownloadOutlined,
+  ReloadOutlined,
   SaveOutlined,
   SettingOutlined,
 } from "@ant-design/icons";
@@ -45,12 +61,40 @@ const colSpan1 = {
 
 const Manage = () => {
   const info = useInfo()!;
-  const { gostConfig } = useContext(Ctx);
+  const gostConfig = useServerConfig();
   const [show, setShow] = useState(false);
   const [loading, setLoading] = useState(false);
   const [isSaved, setIsSaved] = useState(true);
+  const [locals, setLocals] = useState<any[]>([]);
 
-  const ref = useRef<any>({ config: gostConfig });
+  const ref = useRef<any>({});
+
+  const updateList = useCallback(async () => {
+    return getLocalServers()
+      .then((local) => {
+        return local.sort((a, b) => {
+          const t1 = a.time || 0;
+          const t2 = b.time || 0;
+          return t2 - t1;
+        });
+      })
+      .then((list) =>
+        setLocals(
+          list
+            .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");
+              // },
+            }))
+        )
+      );
+  }, []);
 
   useEffect(() => {
     fixOldCacheConfig().then((up) => {
@@ -73,21 +117,46 @@ const Manage = () => {
       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;
+      if (reqConfig?.url === API.apis.config) return;
       return onSave();
     };
-
+    updateList();
     configEvent.on("update", update);
     configEvent.on("apiUpdate", onApiUpdate);
     return () => {
       configEvent.off("update", update);
       configEvent.off("apiUpdate", onApiUpdate);
     };
   }, []);
-  console.log('gostInfo', info)
+
+  const items = useMemo<any[]>(() => {
+    const items = [];
+    if (locals.length) {
+      items.push({
+        key: "2",
+        label: " 切换 ",
+        children: locals,
+      });
+      items.push({
+        type: "divider",
+      });
+    }
+    items.push({
+      key: "new",
+      label: "打开新链接",
+      onClick: () => {
+        console.log(location.href);
+        window.open(location.href, undefined, "noopener");
+      },
+    });
+    return items;
+  }, [locals]);
+
+  console.log("gostInfo", info);
   return (
     <Layout style={{ height: "100vh", overflow: "hidden" }}>
       <Layout.Header style={{ color: "#FFF" }}>
@@ -98,9 +167,11 @@ const Manage = () => {
           // style={{ padding: "0 15px" }}
         >
           <Col color="">
-            <Space>
-              <Select placeholder="快捷操作"></Select>
-            </Space>
+            <Button type="link" icon={<ReloadOutlined />} onClick={async () => {
+                  useServerConfig.set((await API.getConfig()) as any)
+            }}>
+              刷新配置
+            </Button>
           </Col>
           <Col>{info.addr}</Col>
           <Col>
@@ -127,9 +198,12 @@ const Manage = () => {
               >
                 下载当前配置
               </Button>
-              <Button type="link" onClick={logout}>
-                切换连接
-              </Button>
+              <Dropdown.Button menu={{ items }} onClick={logout}>
+                退出
+                {/* <Button type="link" onClick={logout}>
+                  切换连接
+                </Button> */}
+              </Dropdown.Button>
             </Space>
           </Col>
         </Row>
@@ -142,9 +216,9 @@ const Manage = () => {
           <Form
             initialValues={info}
             layout="horizontal"
-            labelCol={{span:4}}
+            labelCol={{ span: 4 }}
             onValuesChange={(v, vs) => {
-              console.log(v,vs)
+              console.log(v, vs);
               Object.assign(info, v);
               useInfo.set(info);
               if (info.isLocal) {
@@ -170,9 +244,9 @@ const Manage = () => {
       <Layout.Content style={{ height: "100%", overflow: "auto" }}>
         <Row style={{ padding: 16, overflow: "hidden" }}>
           <Row gutter={[16, 16]}>
-            <Col {...colSpan}>
-              <ServiceCard></ServiceCard>
-            </Col>
+            {/* <Col {...colSpan} xxl={16}> */}
+            <ServiceCard colSpan={colSpan}></ServiceCard>
+            {/* </Col> */}
             <Col {...colSpan}>
               <ChainCard></ChainCard>
             </Col>
@@ -214,7 +288,18 @@ const Manage = () => {
             </Col>
             <Col span={24}>
               <ProCard boxShadow title="All Config JSON">
-                <pre>{jsonFormat(gostConfig!)}</pre>
+                {/* <pre>{jsonFormat(gostConfig!)}</pre> */}
+                <MonacoEditor
+                  className={"g-boder"}
+                  value={jsonFormat(gostConfig!)}
+                  height={"500"}
+                  language="json"
+                  options={{
+                    // selectOnLineNumbers: true,
+                    minimap: { enabled: false },
+                    readOnly: true,
+                  }}
+                ></MonacoEditor>
               </ProCard>
             </Col>
           </Row>

src/api/types.ts

@@ -105,7 +105,7 @@ export type ForwarderConfig = {
   nodes: ForwardNodeConfig[];
   selector: SelectorConfig;
   //   description: "DEPRECATED by nodes since beta.4";
-  targets: string[];
+  targets?: string[];
 };
 export type HTTPLoader = {
   timeout: Duration;