调整JsonForm；滚动条

src/App.css

@@ -24,19 +24,6 @@ body {
   }
 }
 
-.ant-space-item > .ant-tag {
-  margin-inline-end: inherit;
-}
-
-.ant-tag.editor-json {
-  cursor: pointer;
-}
-
-.antd-cord-boxShadow {
-  box-shadow: 0 1px 2px -2px #00000029,0 3px 6px #0000001f,0 5px 12px 4px #00000017;
-  border-color: transparent;
-}
-
 .home-form {
   width: 380px;
   max-width: 100%;

src/Pages/Manage.tsx

@@ -249,7 +249,7 @@ const Manage = () => {
           overflow: "auto",
         }}
       >
-        <Row gutter={[16, 16]} style={{ overflow: "hidden" }}>
+        <Row gutter={[16, 16]}>
           {/* <Col {...colSpan} xxl={16}> */}
           <ServiceCard colSpan={colSpan}></ServiceCard>
           {/* </Col> */}

src/components/Forms/AddButton.tsx

@@ -20,18 +20,32 @@ const AddButton: React.FC<Props> = (props) => {
   const { comm } = useContext(CardCtx);
   const templates = UseTemplates({ name: keyName! });
 
+  const _props = {
+    title: t("title.add", { name: title }),
+    templates: templates,
+    onFinish: async (values: any) => {
+      const { value } = values;
+      const json = jsonParse(value);
+      await comm!.addValue(json);
+      return true;
+    },
+  };
+
+  // return (
+  //   <JsonForm
+  //     trigger={<Button icon={<PlusOutlined />} size="small" />}
+  //     {..._props}
+  //   ></JsonForm>
+  // );
+
   return (
-    <JsonForm
-      title={t("title.add", { name: title })}
-      templates={templates}
-      trigger={<Button icon={<PlusOutlined />} size="small" />}
-      onFinish={async (values: any) => {
-        const { value } = values;
-        const json = jsonParse(value);
-        await comm!.addValue(json);
-        return true;
+    <Button
+      icon={<PlusOutlined />}
+      size="small"
+      onClick={() => {
+        JsonForm.show(_props);
       }}
-    ></JsonForm>
+    />
   );
 };
 export default AddButton;

src/components/Forms/Json.tsx

@@ -16,9 +16,9 @@ import { Template } from "../../templates";
 import ModalForm, { ModalFormProps } from "../ModalForm";
 import { CodeEditor } from "../../uitls/useMonacoEdit";
 import { globalConfig } from "antd/es/config-provider";
-import { HookAPI } from "antd/es/modal/useModal";
 import { useTranslation } from "react-i18next";
 import { getLabel } from "../../uitls/i18n";
+import "./index.less";
 
 const template2menu: any = (template: Template) => {
   const { children, ...other } = template;
@@ -36,28 +36,17 @@ const template2menu: any = (template: Template) => {
   }
 };
 
-{
-  /* <Dropdown menu={menuProps}>
-      <Button>
-        <Space>
-          Button
-          <DownOutlined />
-        </Space>
-      </Button>
-    </Dropdown> */
-}
-
-// const TemplateBar = (props: any) => {
-//   const { templates, onhandle } = props;
-//   return <Space></Space>;
-// };
 
 type JsonFromProps = ModalFormProps & {
   templates?: Template[];
 };
 
-const JsonForm: React.FC<JsonFromProps> = (props) => {
-  const { templates, ...other } = props;
+interface Jsonform extends React.FC<JsonFromProps> {
+  show: (props: JsonFromProps) => void;
+}
+
+const JsonForm: Jsonform = (props) => {
+  const { templates, modalProps, ...other } = props;
   const { t } = useTranslation();
   const formRef = useRef<FormInstance<any>>();
   const templateHandle = (json: string) => {
@@ -102,13 +91,11 @@ const JsonForm: React.FC<JsonFromProps> = (props) => {
         modalProps={{
           destroyOnClose: true,
           maskClosable: false,
+          ...modalProps,
         }}
       >
         {hasTemplate ? (
-          <Space
-            size={"small"}
-            style={{ marginBottom: 5, width: "100%", overflow: "auto" }}
-          >
+          <Space size={"small"} className="template-box scroll-small">
             <span>{t("terms.template")}:</span>
             {templates.map((template, index) => {
               if (template.children?.length) {
@@ -204,7 +191,7 @@ const JsonForm: React.FC<JsonFromProps> = (props) => {
   );
 };
 
-export const showJsonForm = (props: JsonFromProps) => {
+JsonForm.show = (props: JsonFromProps) => {
   const { onOpenChange, open: propOpen, ...other } = props;
   let timeoutId: ReturnType<typeof setTimeout>;
   const container = document.createDocumentFragment();
@@ -236,8 +223,4 @@ export const showJsonForm = (props: JsonFromProps) => {
   });
 };
 
-// export const showUpModelForm = (props: any) => {
-//   const { name, root, model } = props;
-// };
-
 export default JsonForm;

src/components/Forms/index.less

@@ -0,0 +1,5 @@
+.template-box {
+  padding-bottom: 5px;
+  width: 100%;
+  overflow: auto;
+}

src/components/List/Public.tsx

@@ -8,7 +8,7 @@ import React, {
 import { Button, Popconfirm, Space, Table, App } from "antd";
 import { red, green } from "@ant-design/colors";
 import { getRESTfulApi } from "../../api";
-import { showJsonForm } from "../Forms/Json";
+import JsonForm from "../Forms/Json";
 import { jsonFormatValue, jsonParse } from "../../uitls";
 import {
   CheckCircleOutlined,
@@ -22,6 +22,7 @@ import Ctx, { CardCtx } from "../../uitls/ctx";
 import { useListData1, UseTemplates } from "../ListCard/hooks";
 import { configEvent } from "../../uitls/events";
 import { useTranslation } from "react-i18next";
+const showJsonForm = JsonForm.show;
 
 export type PublicListProps = {
   name: string;
@@ -135,7 +136,7 @@ const PublicList: React.FC<PublicListProps> = (props) => {
     return () => {
       configEvent.off(`edit:${name}`, onEdit);
     };
-  }, []);
+  }, [name, t, updateLocal, updateValue]);
   return (
     <div style={{ height: 348, overflow: "auto" }}>
       <Table

src/components/ListCard/index.tsx

@@ -59,7 +59,7 @@ const ListCard: React.FC<ListCardProps> = (props) => {
       },
       ...props,
     };
-  }, [props]);
+  }, [props, t]);
   const [keyword, setKeyword] = useState("");
   const _prop = {
     title: subTitle || "",
@@ -154,7 +154,7 @@ const ListCard: React.FC<ListCardProps> = (props) => {
         // updateLocalList?.();
       },
     };
-  }, [api, dataSource, localApi, name]);
+  }, [api, dataSource, localApi, name, t]);
 
   useEffect(() => {
     return commBindEvent(name, comm);

src/components/viewer/chain.tsx

@@ -2,7 +2,7 @@ import { Space, Tag, Tooltip } from "antd";
 import { ChainConfig, Config, HopConfig } from "../../api/types";
 import { ViewHop, viewHops } from "./hop";
 import { RightOutlined } from "@ant-design/icons";
-import { showJsonForm } from "../Forms/Json";
+import JsonForm from "../Forms/Json";
 import { jsonFormatValue, jsonParse } from "../../uitls";
 import { useContext } from "react";
 import { UpdateCtx } from "../List/Public";
@@ -34,7 +34,7 @@ export function ViewHops(props: { hops: HopConfig[]; root: any }) {
                 className="editor-json"
                 title={t("text.doubleClickEdit")}
                 onDoubleClick={() => {
-                  showJsonForm({
+                  JsonForm.show({
                     title: t('base.cmd.edit'),
                     initialValues: { value: jsonFormatValue(hop) },
                     onFinish: async (values: any) => {

src/components/viewer/node.tsx

@@ -3,7 +3,7 @@ import { Config, ForwardNodeConfig, NodeConfig } from "../../api/types";
 import { useContext, useMemo } from "react";
 import Ctx, { CardCtx } from "../../uitls/ctx";
 import { Space, Tag, Tooltip } from "antd";
-import { showJsonForm } from "../Forms/Json";
+import JsonForm from "../Forms/Json";
 import { jsonFormatValue, jsonParse } from "../../uitls";
 import { UpdateCtx } from "../List/Public";
 import { useTranslation } from "react-i18next";
@@ -62,7 +62,7 @@ export function ViewNode<T extends { name: string; addr: string }>({
       return {
         className: "editor-json",
         onDoubleClick: () => {
-          showJsonForm({
+          JsonForm.show({
             title: t("base.cmd.edit"),
             initialValues: { value: jsonFormatValue(node) },
             onFinish: async (values: any) => {