引入MonacoEditor 及 jsonc , 让模板支持注释

Author: 汪航洋

package-lock.json

@@ -17,10 +17,13 @@
     "events": "^3.3.0",
     "i": "^0.3.7",
     "jsonc": "^2.0.0",
+    "jsonc-parser": "^3.2.0",
+    "monaco-editor": "^0.39.0",
     "npm": "^10.2.3",
     "qs": "^6.11.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-monaco-editor": "^0.54.0",
     "uuid": "^9.0.1"
   },
   "devDependencies": {

package.json

@@ -1,3 +1,6 @@
 #root {
   width: 100%;
 }
+.g-boder {
+  border: 1px solid #ccc;
+}

src/App.css

@@ -15,13 +15,12 @@ import Ctx from "./uitls/ctx";
 import { init, logout, useGolstCofnig } from "./uitls/server";
 import * as API from "./api";
 import Home from "./Pages/Home";
-import Services from "./components/List/Services";
-import Chains from "./components/List/Chains";
+// import Services from "./components/List/Services";
+// import Chains from "./components/List/Chains";
+// import PublicList from "./components/List/Public";
 import "./App.css";
 import { configEvent } from "./uitls/events";
-import PublicList from "./components/List/Public";
 import { download, jsonFormat } from "./uitls";
-import { saveCofnig } from "./api";
 import ListCard from "./components/ListCard";
 import ChainCard from "./components/ListCard/Chains";
 import ServiceCard from "./components/ListCard/Services";
@@ -54,7 +53,9 @@ function App() {
 
   useEffect(() => {
     init();
-    const updateConfig = () => {
+    const updateConfig = (reqConfig: any) => {
+      console.log("reqConfig", reqConfig);
+      if(reqConfig.url === API.apis.config) return;
       return API.getConfig().then((data) => {
         setGostConfig(data);
         return data;
@@ -103,7 +104,7 @@ function App() {
                     <Button
                       // type="link"
                       onClick={() => {
-                        saveCofnig();
+                        API.saveCofnig();
                       }}
                     >
                       保存配置

src/App.tsx

@@ -1,7 +1,9 @@
 import require from "../uitls/require";
 import type * as Gost from "./types";
 
-const apis = {
+type Format = "json" | "yaml";
+
+export const apis = {
   config: "/config",
   admissions: "/config/admissions",
   authers: "/config/authers",
@@ -42,8 +44,8 @@ export const resolvers = getRESTfulApi<Gost.ResolverConfig>(apis["resolvers"]);
 export const services = getRESTfulApi<Gost.ServiceConfig>(apis["services"]);
 
 // 获取当前config
-export const getConfig = () =>
-  require.get(apis.config);
+export const getConfig = (format?: Format) => require.get(apis.config);
 
-// 保存当前config(使之重启也生效)
-export const saveCofnig = () => require.post(apis.config)
+// 保存当前config到服务器
+export const saveCofnig = (format: Format = "json") =>
+  require.post(apis.config, null, { params: { format } });

src/api/index.ts

@@ -5,6 +5,7 @@ import { Button, message } from "antd";
 import { getRESTfulApi } from "../../api";
 import { PlusOutlined } from "@ant-design/icons";
 import Ctx from "../../uitls/ctx";
+import { jsonParse } from "../../uitls";
 
 type Props = {
   name: string;
@@ -22,7 +23,7 @@ const AddButton: React.FC<Props> = (props) => {
   }, []);
 
   const addService = async (servic: any) => {
-    const data = JSON.parse(servic);
+    const data = jsonParse(servic);
     await api.post(data);
   };
 
@@ -37,7 +38,7 @@ const AddButton: React.FC<Props> = (props) => {
         // return true;
 
         const { value } = values;
-        const json = JSON.parse(value);
+        const json = jsonParse(value);
         let addName = json.name || `${name}-0`;
         let rename = json.name ? false : true;
         const hasName = () => {

src/components/Forms/AddButton.tsx

@@ -4,9 +4,11 @@ import {
   ModalForm,
   ProFormInstance,
 } from "@ant-design/pro-components";
-import { Button, Dropdown, Space } from "antd";
+import { Button, Dropdown, Form, Space } from "antd";
 import { DownOutlined } from "@ant-design/icons";
-import { jsonFormat, jsonStringFormat } from "../../uitls";
+import { jsonFormat, jsonStringFormat, jsonParse } from "../../uitls";
+import MonacoEditor, { MonacoEditorProps } from "react-monaco-editor";
+import "./userMonacoWorker";
 
 type Template = {
   label: string;
@@ -53,8 +55,8 @@ const JsonForm: React.FC<any> = (props) => {
   const templateHandle = (json: string) => {
     let value;
     if (props.initialValues?.value) {
-      const _json = JSON.parse(json);
-      const _old = JSON.parse(props.initialValues.value);
+      const _json = jsonParse(json);
+      const _old = jsonParse(props.initialValues.value);
       _json.name = _old.name ? _old.name : _json.name;
       value = jsonFormat(_json);
     } else {
@@ -146,21 +148,51 @@ const JsonForm: React.FC<any> = (props) => {
             })}
           </Space>
         )}
-        <ProFormTextArea
-          fieldProps={{ rows: 16 }}
+        {/* <ProFormTextArea
+          fieldProps={{ rows: 8 }}
           name="value"
           rules={[
             { required: true, message: "不能为空" },
             {
               validator: (rule, value) => {
                 return new Promise((resolve, reject) => {
-                  if (value) JSON.parse(value);
+                  if (value) jsonParse(value);
                   resolve(null);
                 });
-              }
+              },
+            },
+          ]}
+        ></ProFormTextArea> */}
+        <Form.Item
+          name="value"
+          rules={[
+            { required: true, message: "不能为空" },
+            {
+              validator: (rule, value) => {
+                return new Promise((resolve, reject) => {
+                  if (value) {
+                    jsonParse(value);
+                  }
+                  resolve(null)
+                }).catch((err) => {
+                  console.error(err);
+                  throw new Error('json 格式错误');
+                } );
+              },
             },
           ]}
-        ></ProFormTextArea>
+        >
+          <MonacoEditor
+            className={"g-boder"}
+            height={300}
+            language="json"
+            options={{
+              // selectOnLineNumbers: true,
+              minimap: { enabled: false },
+              // readOnly: readOnly,
+            }}
+          ></MonacoEditor>
+        </Form.Item>
       </ModalForm>
     </>
   );

src/components/Forms/Json.tsx

@@ -0,0 +1,37 @@
+/* eslint-disable */
+import * as monaco from "monaco-editor";
+import editorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker";
+import jsonWorker from "monaco-editor/esm/vs/language/json/json.worker?worker";
+// import cssWorker from "monaco-editor/esm/vs/language/css/css.worker?worker";
+// import htmlWorker from "monaco-editor/esm/vs/language/html/html.worker?worker";
+// import tsWorker from "monaco-editor/esm/vs/language/typescript/ts.worker?worker";
+// @ts-ignore 
+import { language as yamlLanguage } from "monaco-editor/esm/vs/basic-languages/yaml/yaml";
+
+// eslint-disable-next-line
+// @ts-ignore
+self.MonacoEnvironment = {
+  getWorker(_: any, label: string) {
+	console.log('[label]',label);
+    // setLocaleData(zh_CN.contents);
+    if (label === "json") {
+      return new jsonWorker();
+    }
+    // if (label === "css" || label === "scss" || label === "less") {
+    //   return new cssWorker();
+    // }
+    // if (label === "html" || label === "handlebars" || label === "razor") {
+    //   return new htmlWorker();
+    // }
+    // if (label === "typescript" || label === "javascript") {
+    //   return new tsWorker();
+    // }
+    return new editorWorker();
+  },
+};
+monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
+	allowComments: true,
+	trailingCommas: 'warning',
+})
+monaco.languages.typescript.typescriptDefaults.setEagerModelSync(true);
+