调整本地数据结构, 增加module属性映射

src/Pages/Manage.tsx

@@ -79,82 +79,34 @@ const Manage = () => {
               <HopsCard />
             </Col>
             <Col {...colSpan}>
-              <ListCard
-                title="认证器(Auther)"
-                subTitle="认证器"
-                name="authers"
-                api={API.authers}
-              ></ListCard>
+              <ListCard module="auther" />
             </Col>
             <Col {...colSpan}>
-              <ListCard
-                title="准入控制器(Admission)"
-                subTitle="准入控制器"
-                name="admissions"
-                api={API.admissions}
-              ></ListCard>
+              <ListCard module="admission" />
             </Col>
             <Col {...colSpan}>
-              <ListCard
-                title="分流器(Bypass)"
-                subTitle="分流器"
-                name="bypasses"
-                api={API.bypasses}
-              ></ListCard>
+              <ListCard module="bypass" />
             </Col>
             <Col {...colSpan}>
-              <ListCard
-                title="主机映射器(Hosts)"
-                subTitle="主机映射器"
-                name="hosts"
-                api={API.hosts}
-              ></ListCard>
+              <ListCard module="host" />
             </Col>
             <Col {...colSpan}>
-              <ListCard
-                title="Ingress"
-                subTitle="Ingress"
-                name="ingresses"
-                api={API.ingresses}
-              ></ListCard>
+              <ListCard module="ingress" />
             </Col>
             <Col {...colSpan}>
-              <ListCard
-                title="域名解析器(Resolver)"
-                subTitle="Resolver"
-                name="resolvers"
-                api={API.resolvers}
-              ></ListCard>
+              <ListCard module="resolver" />
             </Col>
             <Col span={24}>
               <ProCard boxShadow title="限速限流">
                 <Row gutter={[16, 16]}>
                   <Col {...colSpan1}>
-                    <ListCard
-                      title="流量速率限制"
-                      subTitle=""
-                      name="limiters"
-                      api={API.limiters}
-                      bordered
-                    ></ListCard>
+                    <ListCard module="limiter" bordered />
                   </Col>
                   <Col {...colSpan1}>
-                    <ListCard
-                      title="请求速率限制"
-                      subTitle=""
-                      name="rlimiters"
-                      api={API.rlimiters}
-                      bordered
-                    ></ListCard>
+                    <ListCard module="rlimiter" bordered />
                   </Col>
                   <Col {...colSpan1}>
-                    <ListCard
-                      title="并发连接数限制"
-                      subTitle=""
-                      name="climiters"
-                      api={API.climiters}
-                      bordered
-                    ></ListCard>
+                    <ListCard module="climiter" bordered />
                   </Col>
                 </Row>
               </ProCard>

src/api/local.ts

@@ -3,37 +3,48 @@ import type * as Gost from "./types";
 import { getGost } from "../uitls/server";
 
 export class GostCommit<T = any> {
-  private name: string;
-  constructor(name: string) {
-    this.name = name;
+  private storeName: string;
+  constructor(storeName: string) {
+    this.storeName = storeName;
+  }
+  private get key() {
+    return getGost()?.addr;
   }
-  private _getStoreName = () => {
-    const { addr } = getGost() || {};
-    if (!addr) throw "no Server";
-    return `${this.name}-${encodeURIComponent(addr)}`;
-  };
   private _getIdb = () => {
-    return getIdb(`${this._getStoreName()}|name`);
+    return getIdb(`${this.storeName}|++id,_key_,[name+_key_]`);
   };
   getList = async () => {
     const idb = await this._getIdb();
-    return idb.getAll(this._getStoreName());
+    return idb.getAllFromIndex(this.storeName,'_key_',this.key);
   };
-  get = async (key: string) => {
+  get = async (name: string) => {
     const idb = await this._getIdb();
-    return idb.get(this._getStoreName(), key);
+    // return idb.get(this.name);
+    return idb.getFromIndex(
+      this.storeName,
+      "[name+_key_]",
+      IDBKeyRange.only([name, this.key])
+    );
   };
   add = async (obj: any) => {
     const idb = await this._getIdb();
-    return idb.add(this._getStoreName(), obj);
+    return idb.add(this.storeName, { ...obj, _key_: this.key });
   };
-  put = async (key: string, obj: any) => {
+  put = async (name: string, obj: any) => {
     const idb = await this._getIdb();
-    return idb.put(this._getStoreName(), obj);
+    const t = idb.transaction(this.storeName, "readwrite");
+    const os = t.objectStore(this.storeName);
+    const old = await os.index('[name+_key_]').get(IDBKeyRange.only([name, this.key]));
+    await os.put(obj, old.id);
+    return t.done;
   };
-  delete = async (key: string) => {
+  delete = async (name: string) => {
     const idb = await this._getIdb();
-    return idb.delete(this._getStoreName(), key);
+    const t = idb.transaction(this.storeName, "readwrite");
+    const os = t.objectStore(this.storeName);
+    const old = await os.index('[name+_key_]').get(IDBKeyRange.only([name, this.key]));
+    await os.delete(old.id);
+    return t.done
   };
 }
 
@@ -72,4 +83,3 @@ export class ServerComm {
     return idb.delete(this._storeName, key);
   }
 }
-

src/api/modules.ts

@@ -0,0 +1,101 @@
+import * as API from ".";
+import * as LocalApi from "./local";
+
+type Module = {
+  name: string;
+  keyName: string;
+  title: string;
+  subTitle?: string;
+  api: ReturnType<typeof API.getRESTfulApi>;
+  localApi?: LocalApi.GostCommit;
+  rowKey?: string;
+};
+
+const getAttr = (keyName: string) => ({
+  keyName,
+  api: (API as any)[keyName],
+  // localApi: (API as any)[keyName],
+  rowKey: "name",
+});
+
+const modules: Module[] = [
+  {
+    name: "admission",
+    title: "准入控制器(Admission)",
+    subTitle: "准入控制器",
+    ...getAttr("admissions"),
+  },
+  {
+    name: "auther",
+    title: "认证器(Auther)",
+    subTitle: "认证器",
+    ...getAttr("authers"),
+  },
+  {
+    name: "bypass",
+    title: "分流器(Bypass)",
+    subTitle: "分流器",
+    ...getAttr("bypasses"),
+  },
+  {
+    name: "chain",
+    title: "转发链(Chain)",
+    subTitle: "转发链",
+    ...getAttr("chains"),
+  },
+  {
+    name: "climiter",
+    title: "并发连接数限制",
+    subTitle: "",
+    ...getAttr("climiters"),
+  },
+  {
+    name: "limiter",
+    title: "流量速率限制",
+    subTitle: "",
+    ...getAttr("limiters"),
+  },
+  {
+    name: "rlimiter",
+    title: "请求速率限制",
+    subTitle: "",
+    ...getAttr("rlimiters"),
+  },
+  {
+    name: "hop",
+    title: "跳跃点(Hop)",
+    subTitle: "跳跃点",
+    ...getAttr("hops"),
+  },
+  {
+    name: "host",
+    title: "主机映射器(Hosts)",
+    subTitle: "主机映射器",
+    ...getAttr("hosts"),
+  },
+  {
+    name: "ingress",
+    title: "Ingress",
+    subTitle: "Ingress",
+    ...getAttr("ingresses"),
+  },
+  {
+    name: "resolver",
+    title: "域名解析器(Resolver)",
+    subTitle: "域名解析器",
+    ...getAttr("resolvers"),
+  },
+  {
+    name: "service",
+    title: "服务(Service)",
+    subTitle: "服务",
+    // localApi: (API as any)['services'],
+    localApi: (LocalApi as any)['services'],
+    ...getAttr("services"),
+  },
+];
+
+export const getModule = (name: string) =>
+  modules.find((item) => item.name === name);
+
+export default modules;

src/components/Forms/AddButton.tsx

@@ -9,17 +9,14 @@ import { GostCommit } from "../../api/local";
 import { UseTemplates } from "../ListCard/hooks";
 
 type Props = {
-  name: string;
+  keyName: string;
   title: string;
-  api: ReturnType<typeof getRESTfulApi>;
-  localApi?: GostCommit;
-  keyName?: string;
 };
 
 const AddButton: React.FC<Props> = (props) => {
-  const { name, title } = props;
+  const { keyName, title } = props;
   const { comm } = useContext(CardCtx);
-  const templates = UseTemplates({ name });
+  const templates = UseTemplates({ name: keyName! });
   
   return (
     <JsonForm

src/components/List/Public.tsx

@@ -20,7 +20,8 @@ type Props = {
   title: string;
   api: ReturnType<typeof getRESTfulApi>;
   localApi?: GostCommit;
-  keyName?: string;
+  keyName: string;
+  rowKey?: string;
   renderConfig?: (v: any, r: any, i: number) => React.ReactNode;
 };
 
@@ -34,22 +35,23 @@ const PublicList: React.FC<Props> = (props) => {
     title,
     api,
     localApi,
-    keyName = "name",
+    keyName, 
+    rowKey = "name",
     renderConfig = defaultRenderConfig,
   } = props;
   const { localList, comm } = useContext(CardCtx);
-  const { dataList, dataSource } = UseListData({ localList, name });
-  const templates = UseTemplates({ name });
+  const { dataList, dataSource } = UseListData({ localList, name: keyName });
+  const templates = UseTemplates({ name: keyName });
 
   return (
     <div style={{ height: 348, overflow: "auto" }}>
       <Table
-        rowKey={'name'}
+        rowKey={(obj) => obj.id || obj.name}
         scroll={{ y: 246 }}
         size="small"
         dataSource={dataSource}
         columns={[
-          { title: keyName, dataIndex: keyName, ellipsis: true, width: 100 },
+          { title: rowKey, dataIndex: rowKey, ellipsis: true, width: 100 },
           {
             title: "详情",
             ellipsis: true,
@@ -63,9 +65,9 @@ const PublicList: React.FC<Props> = (props) => {
           },
           {
             title: "操作",
-            width: name === "services" ? 120 : 90,
+            width: name === "service" ? 120 : 90,
             align: "right",
-            dataIndex: keyName,
+            dataIndex: rowKey,
             render: (value, record, index) => {
               // console.log("render", record);
               const {

src/components/ListCard/Chains.tsx

@@ -24,11 +24,7 @@ import Ctx from "../../uitls/ctx";
 const ChainCard: React.FC = (props) => {
   const { gostConfig } = useContext(Ctx);
   const _prop = {
-    title: "转发链(Chain)",
-    subTitle: "转发链",
-    name: "chains",
-    api: chains,
-    keyName: "name",
+    module: 'chain',
     renderConfig: (value: any, record: ChainConfig, index: number) => {
       return viewChain.call(gostConfig!, record);
     },

src/components/ListCard/Hops.tsx

@@ -10,10 +10,7 @@ const HopsCard: React.FC = (props) => {
   const { gostConfig } = useContext(Ctx);
   return (
     <ListCard
-      title="跳跃点(Hop)"
-      subTitle="跳跃点"
-      name="hops"
-      api={hops}
+      module="hop"
       renderConfig={(value: any, record: HopConfig, index: number) => {
         return viewHop.call(gostConfig!, record);
       }}

src/components/ListCard/Services.tsx

@@ -6,6 +6,7 @@ import ListCard from ".";
 import { useContext } from "react";
 import Ctx from "../../uitls/ctx";
 import viewService from "../viewer/services";
+import { getModule } from "../../api/modules";
 
 // const record = (value: any, record: ServiceConfig, index: number) => {
 //   const { handler, listener, addr, forwarder } = record;
@@ -26,12 +27,8 @@ import viewService from "../viewer/services";
 const ServiceCard: React.FC = (props) => {
   const { gostConfig } = useContext(Ctx);
   const _prop = {
-    title: "服务(Service)",
-    subTitle: "服务",
-    name: "services",
-    api: services,
-    keyName: "name",
-    localApi: localServices,
+    // ...getModule('services'),
+    module: 'service',
     renderConfig: (value: any, record: ServiceConfig, index: number) => {
       return viewService.call(gostConfig!, record);
     },

src/components/ListCard/index.tsx

@@ -1,9 +1,4 @@
-import {
-  useCallback,
-  useEffect,
-  useState,
-  useMemo,
-} from "react";
+import { useCallback, useEffect, useState, useMemo } from "react";
 import { getRESTfulApi } from "../../api";
 import { ProCard } from "@ant-design/pro-components";
 import PublicList from "../List/Public";
@@ -13,16 +8,19 @@ import { CardCtx, Comm } from "../../uitls/ctx";
 import { jsonParse } from "../../uitls";
 import { UseListData } from "./hooks";
 import { Modal, notification } from "antd";
+import { getModule } from "../../api/modules";
 
 export type ListCardProps = {
-  name: string;
-  title: string;
-  subTitle: string;
-  api: ReturnType<typeof getRESTfulApi>;
+  module?: string;
+  name?: string;
+  title?: string;
+  subTitle?: string;
+  api?: ReturnType<typeof getRESTfulApi>;
   keyName?: string;
+  rowKey?: string;
+  localApi?: GostCommit;
   boxShadow?: boolean;
   bordered?: boolean;
-  localApi?: GostCommit;
   renderConfig?: (v: any, r: any, i: number) => React.ReactNode;
 };
 
@@ -31,18 +29,22 @@ const ListCard: React.FC<ListCardProps> = (props) => {
     title,
     subTitle,
     name,
+    keyName,
     api,
     boxShadow = true,
     bordered = false,
-    keyName = "name",
+    rowKey = "name",
     renderConfig,
     localApi,
-  } = props;
+  } = useMemo(() => {
+    return { ...getModule(props.module || "")!, ...props };
+  }, [props]);
   const _prop = {
-    title: subTitle,
+    title: subTitle || "",
     name,
     api,
     keyName,
+    rowKey,
     localApi,
     renderConfig,
   };
@@ -65,7 +67,7 @@ const ListCard: React.FC<ListCardProps> = (props) => {
     updateLocalList();
   }, [updateLocalList]);
 
-  const { dataSource } = UseListData({ name, localList });
+  const { dataSource } = UseListData({ name: keyName, localList });
 
   const comm = useMemo<Comm>(
     () => ({
@@ -101,7 +103,7 @@ const ListCard: React.FC<ListCardProps> = (props) => {
           });
         }
         await addService(JSON.stringify({ ...json, name: addName }));
-        (json.name !== addName) &&
+        json.name !== addName &&
           notification.info({
             description: `新分配 name 为 "${addName}"`,
             message: "自动修正提醒",

src/uitls/server.ts

@@ -1,4 +1,3 @@
-import { v4 } from "uuid";
 import getUseValue from "./getUseValue";
 import axios from "axios";
 import qs from "qs";
@@ -6,7 +5,6 @@ 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;
@@ -19,7 +17,6 @@ export type GostApiConfig = {
 };
 
 export const useGolstCofnig = getUseValue<GostApiConfig | null>();
-
 Object.defineProperty(window, gostServerKey, {
   get: useGolstCofnig.get,
   set: useGolstCofnig.set,