github/gost-gost-ui
4
0
Fork 0
mirror of https://github.com/go-gost/gost-ui.git synced 2024-08-11 17:53:29 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
cnwhy
2024-07-02 15:20:08 +08:00
parent bb9c354f67
commit 457bd3d31c
34 changed files with 113 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.tsx
+14 -6
View File
@@ -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
+1 -1
View File
@@ -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
+5 -5
View File
@@ -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 -1
View File
@@ -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
+2 -2
View File
@@ -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
+21 -68
View File
@@ -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
+2 -2
View File
@@ -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
+4 -3
View File
@@ -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
+3 -3
View File
@@ -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
+1 -1
View File
@@ -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
+1 -1
View File
@@ -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
+2 -2
View File
@@ -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
+2 -2
View File
@@ -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
+2 -2
View File
@@ -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 -1
View File
@@ -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 -1
View File
@@ -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
+2 -2
View File
@@ -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
+1 -1
View File
@@ -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";
src/components/viewer/hop.tsx
+2 -2
View File
@@ -1,10 +1,10 @@
import { useContext } from "react";
import { Config, HopConfig, NodeConfig } from "../../api/types";
import { viewNode, ViewNode } from "./node";
import Ctx, { getCommByName } from "../../uitls/ctx";
import Ctx, { getCommByName } from "../../utils/ctx";
import { Space, Tag, Tooltip } from "antd";
import { UpdateCtx } from "../List/Public";
import { useServerConfig } from "../../uitls/server";
import { useServerConfig } from "../../utils/server";
export default function viewHop(this: Partial<Config>, hop: HopConfig) {
let _hop = hop;
src/components/viewer/node.tsx
+2 -2
View File
@@ -1,10 +1,10 @@
import qs from "qs";
import { Config, ForwardNodeConfig, NodeConfig } from "../../api/types";
import { useContext, useMemo } from "react";
import Ctx, { CardCtx } from "../../uitls/ctx";
import Ctx, { CardCtx } from "../../utils/ctx";
import { Space, Tag, Tooltip } from "antd";
import JsonForm from "../Forms/Json";
import { jsonFormatValue, jsonParse } from "../../uitls";
import { jsonFormatValue, jsonParse } from "../../utils";
import { UpdateCtx } from "../List/Public";
import { useTranslation } from "react-i18next";
src/components/viewer/services.tsx
+1 -1
View File
@@ -6,7 +6,7 @@ import {
ServiceConfig,
} from "../../api/types";
import qs from "qs";
import Ctx, { getCommByName } from "../../uitls/ctx";
import Ctx, { getCommByName } from "../../utils/ctx";
import { UpdateCtx } from "../List/Public";
import { Space, Tag, Tooltip } from "antd";
import { ViewNode } from "./node";
src/monaco.d.ts
Vendored
+2
View File
@@ -1,3 +1,5 @@
/// <reference types="monaco-editor" />
namespace globalThis {
const monacoIsReady: Promise<any>;
const monaco: any;
src/uitls/ctx.tsx → src/utils/ctx.tsx
View File
src/uitls/events.ts → src/utils/events.ts
View File
src/uitls/getUseValue.ts → src/utils/getUseValue.ts
View File
src/uitls/i18n.ts → src/utils/i18n.ts
View File
src/uitls/index.ts → src/utils/index.ts
View File
src/uitls/require.ts → src/utils/require.ts
View File
src/uitls/server.ts → src/utils/server.ts
View File
src/uitls/storage.ts → src/utils/storage.ts
View File
src/uitls/use.ts → src/utils/use.ts
View File
src/utils/useMonacoEdit.tsx
+40
View File
@@ -0,0 +1,40 @@
import { getI18n } 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);
});
src/uitls/useTheme.ts → src/utils/useTheme.ts
View File
src/uitls/userMonacoWorker.ts.bak → src/utils/userMonacoWorker.ts.bak
View File