fix: json编辑器字体调整bug; 调整代码结构；

src/App.tsx

@@ -13,18 +13,18 @@ import {
   useInfo,
   useServerConfig,
   useLocalConfig,
-} from "./uitls/server";
+} from "./utils/server";
 import * as API from "./api";
 import Home from "./Pages/Home";
 import "./App.css";
-import { configEvent } from "./uitls/events";
+import { configEvent } from "./utils/events";
 
 import zhCN from "antd/locale/zh_CN";
 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 Ctx from "./utils/ctx";
+import { useIsDark } from "./utils/useTheme";
+import "./utils/i18n";
 import { useTranslation } from "react-i18next";
 
 const Manage = React.lazy(() => import("./Pages/Manage"));
@@ -162,7 +162,15 @@ function App() {
       >
         <AntdGlobal>
           <React.Suspense fallback={<Spin fullscreen size="large" />}>
-            {isInit ? info ? <Manage /> : <Home /> : <Spin fullscreen  size="large" />}
+            {isInit ? (
+              info ? (
+                <Manage />
+              ) : (
+                <Home />
+              )
+            ) : (
+              <Spin fullscreen size="large" />
+            )}
           </React.Suspense>
         </AntdGlobal>
       </ConfigProvider>

src/Pages/Home.tsx

@@ -2,7 +2,7 @@
 import React from "react";
 import { GlobalOutlined, LockOutlined, UserOutlined } from "@ant-design/icons";
 import { Button, Checkbox, Form, Input, Space } from "antd";
-import { login } from "../uitls/server";
+import { login } from "../utils/server";
 import LocalServers from "../components/LocalServers";
 import { ThemeButton } from "../components/Theme";
 import { useTranslation, Trans } from 'react-i18next';

src/Pages/Manage.tsx

@@ -18,16 +18,16 @@ import {
   saveLocal,
   useInfo,
   useServerConfig,
-} from "../uitls/server";
-import { download, jsonFormat } from "../uitls";
-import { CodeEditor } from "../uitls/useMonacoEdit";
+} from "../utils/server";
+import { download, jsonFormat } from "../utils";
+import { CodeEditor } from "../components/CodeEditor";
 import * as API from "../api";
 import ListCard, { ProCard } from "../components/ListCard";
 import ChainCard from "../components/ListCard/Chains";
 import ServiceCard from "../components/ListCard/Services";
 import HopsCard from "../components/ListCard/Hops";
 import { fixOldCacheConfig } from "../api/local";
-import { configEvent } from "../uitls/events";
+import { configEvent } from "../utils/events";
 import {
   CheckCircleOutlined,
   DownloadOutlined,
@@ -38,7 +38,7 @@ import {
 import { ThemeButton } from "../components/Theme";
 import { LanguageButton } from "../components/Language";
 import { useTranslation } from "react-i18next";
-import Ctx from "../uitls/ctx";
+import Ctx from "../utils/ctx";
 
 const colSpan = {
   xs: 24,

src/api/index.ts

@@ -1,4 +1,4 @@
-import require from "../uitls/require";
+import require from "../utils/require";
 import type * as Gost from "./types";
 
 type Format = "json" | "yaml";

src/api/local.ts

@@ -1,7 +1,7 @@
 import { getIdb, updatedIdb } from "./db";
 import type * as Gost from "./types";
-import { getInfo } from "../uitls/server";
-import { configEvent } from "../uitls/events";
+import { getInfo } from "../utils/server";
+import { configEvent } from "../utils/events";
 const localCache = "localCache";
 const savedServer = "savedServer";
 

src/uitls/useMonacoEdit.tsx → src/components/CodeEditor/index.tsx

@@ -1,49 +1,11 @@
 import React, { useEffect, useMemo, useRef, useState } from "react";
-import { useBindValue } from "./use";
 import type * as Monaco from "monaco-editor";
-import classnames from "classnames";
-import { useIsDark } from "./useTheme";
 import { Input } from "antd";
-import { getI18n, useTranslation } from "react-i18next";
-
-const langMap: Record<string, string> = {
-  zh: "zh-cn",
-  en: "",
-};
-
-(function () {
-  const require = (window as any).require;
-  if (require) {
-    const i18n = getI18n();
-    // DOTO: monaco 动态设置语言未实现
-    // i18n.on('languageChanged',(event)=>{
-    //   console.log('languageChanged', event)
-    // })
-    require.config({
-      "vs/nls": {
-        availableLanguages: {
-          "*": langMap[i18n.resolvedLanguage!] ?? "",
-        },
-      },
-    });
-  }
-  (window as any).monacoIsReady = new Promise((resolve, reject) => {
-    if (!require) return reject("Not loaded monaco loader.js");
-    require(["vs/editor/editor.main"], function () {
-      resolve(monaco);
-    });
-  });
-})();
-
-monacoIsReady.then(() => {
-  // monacoPython.register(); //注册 关键字，内置函数 代码提示 ；
-  monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
-    allowComments: true,
-    trailingCommas: "warning",
-    validate: true,
-  });
-  // monaco.languages.typescript.typescriptDefaults.setEagerModelSync(true);
-});
+import classnames from "classnames";
+import { useTranslation } from "react-i18next";
+import { useBindValue } from "../../utils/use";
+import { useIsDark } from "../../utils/useTheme";
+import "../../utils/useMonacoEdit";
 
 type CodeEditorProps = {
   className?: string;
@@ -71,6 +33,7 @@ const CodeEditor_: React.ForwardRefRenderFunction<
   const [language, setLanguage] = useBindValue(props.language, "javascript");
   const [value, setValue] = useBindValue(props.value, props.defaultValue, "");
   const [isReady, setReady] = useState(false);
+  const [editor, setEditor] = useState<Monaco.editor.IStandaloneCodeEditor>();
   const divEl = useRef<HTMLDivElement>(null);
   const refEditor = useRef<Monaco.editor.IStandaloneCodeEditor>(null);
   const self = useRef<any>({});
@@ -80,18 +43,18 @@ const CodeEditor_: React.ForwardRefRenderFunction<
     return isDark ? "vs-dark" : "vs";
   }, [theme, isDark]);
 
-  React.useImperativeHandle(ref, () => {
-    return refEditor.current!;
-  });
+  React.useImperativeHandle(ref, () => editor!, [editor]);
+  React.useImperativeHandle(refEditor, () => editor!, [editor]);
 
   React.useImperativeHandle(
     self,
     () => {
       return {
         onChange,
+        editor
       };
     },
-    [onChange]
+    [onChange, editor]
   );
   useEffect(() => {
     monacoIsReady.then(() => {
@@ -102,15 +65,14 @@ const CodeEditor_: React.ForwardRefRenderFunction<
     if (isReady) {
       if (divEl.current) {
         const devel = divEl.current;
-        let _editor: Monaco.editor.IStandaloneCodeEditor;
-        monacoIsReady.then(() => {
-          _editor = (refEditor.current as any) = monaco.editor.create(devel, {
+        const _editor: Monaco.editor.IStandaloneCodeEditor = monaco.editor.create(devel, {
             value: value,
             language: language,
             theme: _theme,
             ...defOptions,
             ...options,
           });
+          setEditor(_editor);
           _editor.onDidChangeModelContent(function (event: any) {
             const _value = _editor.getValue();
             setValue(_value);
@@ -154,17 +116,6 @@ const CodeEditor_: React.ForwardRefRenderFunction<
               });
             },
           });
-        });
-        // let xc: any;
-        // const resizeObserver = new ResizeObserver((entries) => {
-        //   // _editor?.layout();
-        //   // console.log("resizeObserver");
-        //   if (xc) clearTimeout(xc);
-        //   xc = setTimeout(() => {
-        //     _editor?.layout();
-        //   }, 100);
-        // });
-        // resizeObserver.observe(el);
         return () => {
           _editor?.dispose?.();
           // resizeObserver.unobserve(el);
@@ -176,16 +127,18 @@ const CodeEditor_: React.ForwardRefRenderFunction<
   }, [isReady]);
 
   useEffect(() => {
-    if (refEditor.current) {
-      const editor = refEditor.current;
+    if (self.current?.editor) {
+      const editor = self.current.editor;
       if (value != editor.getValue()) {
         // editor.setValue(value);
         // 支持回退
-        editor.executeEdits(null,[{
-          range: editor.getModel()!.getFullModelRange(),
-          text: value,
-          forceMoveMarkers: false,
-        }]);
+        editor.executeEdits(null, [
+          {
+            range: editor.getModel()!.getFullModelRange(),
+            text: value,
+            forceMoveMarkers: false,
+          },
+        ]);
       }
     }
   }, [value]);

src/components/Forms/AddButton.tsx

@@ -3,8 +3,8 @@ import JsonForm from "./Json";
 import { Button } from "antd";
 import { getRESTfulApi } from "../../api";
 import { PlusOutlined } from "@ant-design/icons";
-import { CardCtx } from "../../uitls/ctx";
-import { jsonParse } from "../../uitls";
+import { CardCtx } from "../../utils/ctx";
+import { jsonParse } from "../../utils";
 import { GostCommit } from "../../api/local";
 import { UseTemplates } from "../ListCard/hooks";
 import { useTranslation } from "react-i18next";

src/components/Forms/Json.tsx

@@ -17,16 +17,16 @@ import {
   ZoomInOutlined,
   ZoomOutOutlined,
 } from "@ant-design/icons";
-import { jsonFormat, jsonStringFormat, jsonParse, jsonEdit } from "../../uitls";
+import { jsonFormat, jsonStringFormat, jsonParse, jsonEdit } from "../../utils";
 import { Template } from "../../templates";
 // import { render } from "react-dom";
 // import { useServerConfig } from "../../uitls/server";
 import ModalForm, { ModalFormProps } from "../ModalForm";
-import { CodeEditor } from "../../uitls/useMonacoEdit";
 import { globalConfig } from "antd/es/config-provider";
 import { useTranslation } from "react-i18next";
-import { getLabel } from "../../uitls/i18n";
+import { getLabel } from "../../utils/i18n";
 import { v4 as uuid } from "uuid";
+import { CodeEditor } from "../CodeEditor";
 
 const template2data: any = (template: Template) => {
   const { children, label, ...other } = template;
@@ -81,6 +81,7 @@ const JsonForm: Jsonform = (props) => {
   }, [templates]);
 
   const runAction = useCallback((action: string) => {
+    console.log('editorRef', editorRef);
     editorRef.current?.getAction(action)?.run();
   }, []);
   const hasTemplate = templates?.length;

src/components/List/Public.tsx

@@ -9,7 +9,7 @@ import { Button, Popconfirm, Space, Table, App } from "antd";
 import { red, green } from "@ant-design/colors";
 import { getRESTfulApi } from "../../api";
 import JsonForm from "../Forms/Json";
-import { jsonFormatValue, jsonParse } from "../../uitls";
+import { jsonFormatValue, jsonParse } from "../../utils";
 import {
   CheckCircleOutlined,
   CopyOutlined,
@@ -18,9 +18,9 @@ import {
   StopOutlined,
 } from "@ant-design/icons";
 import { GostCommit } from "../../api/local";
-import Ctx, { CardCtx } from "../../uitls/ctx";
+import Ctx, { CardCtx } from "../../utils/ctx";
 import { useListData1, UseTemplates } from "../ListCard/hooks";
-import { configEvent } from "../../uitls/events";
+import { configEvent } from "../../utils/events";
 import { useTranslation } from "react-i18next";
 const showJsonForm = JsonForm.show;
 

src/components/ListCard/Chains.tsx

@@ -3,7 +3,7 @@ import { ChainConfig } from "../../api/types";
 import ListCard, { ListCardProps } from ".";
 import viewChain, { ViewChain } from "../viewer/chain";
 import { useContext } from "react";
-import Ctx from "../../uitls/ctx";
+import Ctx from "../../utils/ctx";
 
 // const record = (value: any, record: ChainConfig, index: number) => {
 //   const { hops } = record;

src/components/ListCard/Hops.tsx

@@ -3,7 +3,7 @@ import { HopConfig } from "../../api/types";
 import ListCard from ".";
 import viewChain from "../viewer/chain";
 import { useContext } from "react";
-import Ctx from "../../uitls/ctx";
+import Ctx from "../../utils/ctx";
 import {ViewHop} from "../viewer/hop";
 
 const HopsCard: React.FC = (props) => {

src/components/ListCard/Services.tsx

@@ -4,10 +4,10 @@ import { ServiceConfig } from "../../api/types";
 import qs from "qs";
 import ListCard from ".";
 import { useContext } from "react";
-import Ctx from "../../uitls/ctx";
+import Ctx from "../../utils/ctx";
 import viewService, { ViewService } from "../viewer/services";
 import { getModule } from "../../api/modules";
-import { useServerConfig } from "../../uitls/server";
+import { useServerConfig } from "../../utils/server";
 import { Col } from "antd";
 
 // const record = (value: any, record: ServiceConfig, index: number) => {

src/components/ListCard/hooks.ts

@@ -1,7 +1,7 @@
-import Ctx, { CardCtx } from "../../uitls/ctx";
+import Ctx, { CardCtx } from "../../utils/ctx";
 import ConfigTemplates from "../../templates";
 import { useContext, useMemo } from "react";
-import { useLocalConfig, useServerConfig } from "../../uitls/server";
+import { useLocalConfig, useServerConfig } from "../../utils/server";
 
 type UseListDataProps = {
   name: string;

src/components/ListCard/index.tsx

@@ -4,11 +4,11 @@ import { Card, CardProps } from "antd";
 import PublicList, { PublicListProps } from "../List/Public";
 import AddButton from "../Forms/AddButton";
 import { GostCommit } from "../../api/local";
-import Ctx, { CardCtx, Comm, commBindEvent } from "../../uitls/ctx";
+import Ctx, { CardCtx, Comm, commBindEvent } from "../../utils/ctx";
 import { useListData, useListData1 } from "./hooks";
 import { Button, Input, Modal, Space, notification } from "antd";
 import { getModule } from "../../api/modules";
-import { configEvent } from "../../uitls/events";
+import { configEvent } from "../../utils/events";
 import { CloseOutlined } from "@ant-design/icons";
 import classnames from "classnames";
 import { useTranslation } from "react-i18next";

src/components/LocalServers.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useState } from "react";
 import { Col, Flex, Row, Space } from "antd";
 import { DeleteOutlined } from "@ant-design/icons";
-import { GostApiConfig, getLocalServers, deleteLocal } from "../uitls/server";
+import { GostApiConfig, getLocalServers, deleteLocal } from "../utils/server";
 import { useTranslation } from "react-i18next";
 
 const LocalServers = () => {

src/components/ModalForm.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useMemo } from "react";
 import { Form, Modal } from "antd";
 import type { FormInstance, FormProps, ModalProps } from "antd";
-import { useBindValue } from "../uitls/use";
+import { useBindValue } from "../utils/use";
 import classnames from "classnames";
 
 export type ModalFormProps<T = Record<string, any>> = Omit<

src/components/Theme.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Button, ButtonProps } from "antd";
-import { useIsDark } from "../uitls/useTheme";
-import { useSettings } from "../uitls/server";
+import { useIsDark } from "../utils/useTheme";
+import { useSettings } from "../utils/server";
 import { SunOutlined, MoonOutlined } from "@ant-design/icons";
 
 export const ThemeButton = (props: ButtonProps) => {

src/components/viewer/chain.tsx

@@ -3,7 +3,7 @@ import { ChainConfig, Config, HopConfig } from "../../api/types";
 import { ViewHop, viewHops } from "./hop";
 import { RightOutlined } from "@ant-design/icons";
 import JsonForm from "../Forms/Json";
-import { jsonFormatValue, jsonParse } from "../../uitls";
+import { jsonFormatValue, jsonParse } from "../../utils";
 import { useContext } from "react";
 import { UpdateCtx } from "../List/Public";
 import { useTranslation } from "react-i18next";