本地保存的服务移入idb

src/Pages/Home.tsx

@@ -45,22 +45,17 @@ const columns: ProFormColumnsType<DataItem>[] = [
 ];
 
 const LocalServers = () => {
-  const [list, setList] = useState<{ id: string; config: GostApiConfig }[]>();
+  const [list, setList] = useState<GostApiConfig[]>();
   // const [local, setLocal] = useState<Record<string, GostApiConfig>>();
 
   const updateList = useCallback(async () => {
     return getLocalServers()
       .then((local) => {
-        return Object.keys(local)
-          .map((key) => {
-            return {
-              id: key,
-              config: local[key],
-            };
-          })
+      
+        return local
           .sort((a, b) => {
-            const t1 = a.config.time || 0;
-            const t2 = b.config.time || 0;
+            const t1 = a.time || 0;
+            const t2 = b.time || 0;
             return t2 - t1;
           });
       })
@@ -80,9 +75,9 @@ const LocalServers = () => {
             {list.map((item) => {
               return (
                 <Col
-                  key={item.id}
+                  key={item.addr}
                   span={12}
-                  title={item.config.addr}
+                  title={item.addr}
                   style={{
                     overflow: "hidden",
                     textOverflow: "ellipsis",
@@ -95,14 +90,14 @@ const LocalServers = () => {
                         textOverflow: "ellipsis",
                         flex: "auto",
                       }}
-                      href={`?use=${item.id}`}
+                      href={`?use=${item.addr}`}
                     >
-                      {item.config.addr}
+                      {item.addr}
                     </a>
                     <DeleteOutlined
                       style={{ color: "red" }}
                       onClick={async () => {
-                        await deleteLocal(item.id);
+                        await deleteLocal(item.addr);
                         updateList();
                       }}
                     />

src/api/local.ts

@@ -49,3 +49,27 @@ export const hosts = new GostCommit<Gost.HostsConfig>("hosts");
 export const ingresses = new GostCommit<Gost.IngressConfig>("ingresses");
 export const resolvers = new GostCommit<Gost.ResolverConfig>("resolvers");
 export const services = new GostCommit<Gost.ServiceConfig>("services");
+
+export class ServerComm {
+  private static _storeName = "savedServer";
+  private static _getIdb() {
+    return getIdb(`${this._storeName}|addr`);
+  }
+  static async getAll() {
+    const idb = await this._getIdb();
+    return idb.getAll(this._storeName);
+  }
+  static async get(key: string) {
+    const idb = await this._getIdb();
+    return idb.get(this._storeName, key);
+  }
+  static async set(value: any) {
+    const idb = await this._getIdb();
+    return idb.put(this._storeName, value);
+  }
+  static async delete(key: string) {
+    const idb = await this._getIdb();
+    return idb.delete(this._storeName, key);
+  }
+}
+

src/uitls/server.ts

@@ -3,11 +3,13 @@ import getUseValue from "./getUseValue";
 import axios from "axios";
 import qs from "qs";
 import { message } from "antd";
+import { ServerComm } from "../api/local";
 const gostServerKey = "__GOST_SERVER__";
 const uselocalServerKey = "__USE_SERVER__";
 const localServersKey = "__GOST_SERVERS__";
 
 export type GostApiConfig = {
+  key?: string;
   addr: string;
   auth?: {
     username: string;
@@ -59,22 +61,22 @@ export const init = async () => {
 const verify = async (arg: GostApiConfig) => {
   const baseUrl = arg.addr.replace(/\/+$/, "");
   return axios.get(baseUrl + "/config", {
-    auth: arg.auth
+    auth: arg.auth,
   });
 };
 
 export const login = async (arg: GostApiConfig, save?: false) => {
-  try{
+  try {
     await verify(arg);
     window[gostServerKey] = arg;
     window.sessionStorage.setItem(gostServerKey, JSON.stringify(arg));
     if (save) {
       saveLocal(arg.addr, arg);
     }
-  }catch(e:any){
+  } catch (e: any) {
     // console.log(e);
-    message.error(e?.message || '链接失败');
-    throw(e);
+    message.error(e?.message || "链接失败");
+    throw e;
   }
 };
 
@@ -84,45 +86,24 @@ export const logout = async () => {
 };
 
 export const saveLocal = async (id: string, arg: GostApiConfig) => {
-  let servers: Record<string, GostApiConfig> = {};
-  try {
-    servers = await getLocalServers();
-  } catch (e) {
-    /* empty */
-  }
-  servers[id] = { ...arg, time: Date.now() };
-  localStorage.setItem(localServersKey, JSON.stringify(servers));
+  return ServerComm.set({ ...arg, time: Date.now() });
 };
 
 export const getLocal = async (
   id: string
 ): Promise<GostApiConfig | undefined> => {
-  const servers = await getLocalServers();
-  const server = servers[id];
-  return server;
+  return ServerComm.get(id);
 };
 
 export const deleteLocal = async (id: string) => {
-  let servers: Record<string, GostApiConfig> = {};
-  try {
-    servers = await getLocalServers();
-  } catch (e) {
-    /* empty */
-  }
-  delete servers[id];
-  localStorage.setItem(localServersKey, JSON.stringify(servers));
+  return ServerComm.delete(id);
 };
 
 export const getLocalServers = async (): Promise<
-  Record<string, GostApiConfig>
+  // Record<string, GostApiConfig>
+  GostApiConfig[]
 > => {
-  try {
-    const serversJson = localStorage.getItem(localServersKey);
-    const servers = serversJson ? JSON.parse(serversJson) : {};
-    return servers;
-  } catch (e) {
-    return {};
-  }
+  return ServerComm.getAll();
 };
 
 // 把链接信息保存到本要，下次可以继续使用