diff --git a/index.html b/index.html index b9fcb63..1230aaf 100644 --- a/index.html +++ b/index.html @@ -6,8 +6,12 @@ - - + +
diff --git a/package-lock.json b/package-lock.json index 740d01f..c299fb6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7,7 +7,6 @@ "": { "name": "gost-ui", "version": "0.0.0", - "hasInstallScript": true, "dependencies": { "@ant-design/icons": "^5.2.6", "antd": "^5.11.0", diff --git a/package.json b/package.json index e3e8dc1..a470f4d 100644 --- a/package.json +++ b/package.json @@ -10,10 +10,7 @@ "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0", "preview": "vite preview", "init:monaco": "cpx ./node_modules/monaco-editor/min/** ./public/monaco-editor/min", - "postinstall": "npm run init:monaco", - "predev": "npm run init:monaco", - "prebuild": "npm run init:monaco", - "preanalyzer": "npm run init:monaco" + "prebuild": "npm run init:monaco" }, "dependencies": { "@ant-design/icons": "^5.2.6", diff --git a/src/App.css b/src/App.css index 672e838..f8eb48e 100644 --- a/src/App.css +++ b/src/App.css @@ -14,6 +14,8 @@ body { .g-boder { border: 1px solid #ccc; + border-radius: 5px; + overflow: hidden; } :root.theme-dark { diff --git a/src/App.tsx b/src/App.tsx index 134bb79..046acc7 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -105,12 +105,14 @@ function App() { } }, [info]); useEffect(() => { - if(isDark){ - document.documentElement.classList.add("theme-dark") - }else{ - document.documentElement.classList.remove("theme-dark") + if (isDark) { + document.documentElement.classList.add("theme-dark"); + (window as any)?.monaco?.editor.setTheme("vs-dark"); + } else { + document.documentElement.classList.remove("theme-dark"); + (window as any)?.monaco?.editor.setTheme("vs"); } - },[isDark]) + }, [isDark]); return ( { key: "new", label: "打开新链接", onClick: () => { - console.log(location.href); window.open(location.href, undefined, "noopener"); }, }); return items; }, [locals]); - console.log("gostInfo", info); return ( @@ -215,7 +213,6 @@ const Manage = () => { layout="horizontal" labelCol={{ span: 4 }} onValuesChange={(v, vs) => { - console.log(v, vs); Object.assign(info, v); useInfo.set(info); if (info.isLocal) { @@ -238,74 +235,75 @@ const Manage = () => { - - - - {/* */} - - {/* */} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - {/* 
{jsonFormat(gostConfig!)}
*/} - - - - + + + {/* */} + + {/* */} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/Forms/Json.tsx b/src/components/Forms/Json.tsx index 60f5d61..9c5f57b 100644 --- a/src/components/Forms/Json.tsx +++ b/src/components/Forms/Json.tsx @@ -213,7 +213,6 @@ export const showJsonForm = (props: JsonFromProps) => { } function destroy() { - console.log("destroy"); root.unmount(); document.body.removeChild(container); } diff --git a/src/uitls/index.ts b/src/uitls/index.ts index 7f1bce9..34b5c0b 100644 --- a/src/uitls/index.ts +++ b/src/uitls/index.ts @@ -38,7 +38,7 @@ export const jsonParse = (str: string) => { const errs: any[] = []; const obj = parse(str, errs, { allowTrailingComma: true }); if (errs.length) { - console.log(errs); + console.error(errs); throw errs[0]; } return obj; diff --git a/src/uitls/useMonacoEdit.tsx b/src/uitls/useMonacoEdit.tsx index 6697189..a507522 100644 --- a/src/uitls/useMonacoEdit.tsx +++ b/src/uitls/useMonacoEdit.tsx @@ -3,37 +3,41 @@ import { useBindValue } from "./use"; import type * as Monaco from "monaco-editor"; import classnames from "classnames"; import { useIsDark } from "./useTheme"; +import { Input } from "antd"; (function () { const require = (window as any).require; - let monacoURL; - const MONACO_URL = import.meta.env.VITE_MONACO_URL || '/monaco-editor'; - if(/^(http[s]:)?\/\//.test(MONACO_URL)){ - monacoURL = MONACO_URL + '/min/vs' - }else{ - const baseURL = new URL(import.meta.env.BASE_URL, location.href).href; - monacoURL = new URL(`${MONACO_URL}/min/vs`, baseURL).href; - } - + // let monacoURL; + // const MONACO_URL = import.meta.env.VITE_MONACO_URL || '/monaco-editor'; + // if(/^(http[s]:)?\/\//.test(MONACO_URL)){ + // monacoURL = MONACO_URL + '/min/vs' + // }else{ + // const baseURL = new URL(import.meta.env.BASE_URL, location.href).href; + // monacoURL = new URL(`${MONACO_URL}/min/vs`, baseURL).href; + // } + // if(import.meta.env.PROD && import.meta.env.VITE_MONACO_URL){ // monacoURL = import.meta.env.VITE_MONACO_URL + '/min/vs'; // }else{ // const baseURL = new URL(import.meta.env.BASE_URL, location.href).href; // monacoURL = new URL("./monaco-editor/min/vs", baseURL).href; // } - + // console.log(`import_meta_env_BASE_URL`, import.meta.env.BASE_URL); // console.log("baseURL", baseURL); // const monacoURL = `//unpkg.com/monaco-editor@0.47.0/min/vs` - require.config({ paths: { vs: `${monacoURL}` } }); - require.config({ - "vs/nls": { - availableLanguages: { - "*": "zh-cn", + // require.config({ paths: { vs: `${monacoURL}` } }); + if (require) { + require.config({ + "vs/nls": { + availableLanguages: { + "*": "zh-cn", + }, }, - }, - }); + }); + } (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); }); @@ -79,10 +83,10 @@ const CodeEditor_: React.ForwardRefRenderFunction< const editor = useRef(null); const self = useRef({}); const isDark = useIsDark(); - const _theme = useMemo(()=>{ - if(theme) return theme; - return isDark ? 'vs-dark' : 'vs' - },[theme, isDark]) + const _theme = useMemo(() => { + if (theme) return theme; + return isDark ? "vs-dark" : "vs"; + }, [theme, isDark]); React.useImperativeHandle(ref, () => { return editor.current!; @@ -97,82 +101,87 @@ const CodeEditor_: React.ForwardRefRenderFunction< }, [onChange] ); - useEffect(() => { - // let editor: any; - if (divEl.current) { - const el = divEl.current; - let _editor: Monaco.editor.IStandaloneCodeEditor; - monacoIsReady.then(() => { - _editor = editor.current = monaco.editor.create(el, { - value: value, - language: language, - theme: _theme, - ...defOptions, - ...options, - }); - console.log("editor.current", editor.current.getDomNode()); - _editor.onDidChangeModelContent(function (event: any) { - const _value = _editor.getValue(); - setValue(_value); - self.current?.onChange?.(_value); - }); - - _editor.addCommand(monaco.KeyMod.Alt | monaco.KeyCode.KeyX, (e) => { - _editor.getAction("my-autoWrap-toggle")?.run(); - }); - - _editor.addAction({ - id: "my-autoWrap-toggle", - label: "切换自动换行", - keybindings: [ - monaco.KeyMod.Alt | monaco.KeyCode.KeyZ, - // monaco.KeyMod.chord( - // monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyK, - // monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyM - // ), - ], - - // A precondition for this action. - // precondition: null, - - // A rule to evaluate on top of the precondition in order to dispatch the keybindings. - // keybindingContext: null, - - // contextMenuGroupId: "navigation", - // contextMenuOrder: 1.5, - - // Method that will be executed when the action is triggered. - // @param editor The editor instance is passed in as a convenience - run: function (ed, arg) { - // alert("i'm running => " + ed.getPosition()); - // console.log("my-autoWrap-toggle", arg); - const workWrap = ed.getOption(monaco.editor.EditorOption.wordWrap); - ed.updateOptions({ - wordWrap: workWrap === "on" ? "off" : "on", - }); - }, + monacoIsReady.then(() => { + setReady(true); + }); + }, []); + useEffect(() => { + if (isReady) { + if (divEl.current) { + const devel = divEl.current; + let _editor: Monaco.editor.IStandaloneCodeEditor; + monacoIsReady.then(() => { + _editor = editor.current = monaco.editor.create(devel, { + value: value, + language: language, + theme: _theme, + ...defOptions, + ...options, + }); + _editor.onDidChangeModelContent(function (event: any) { + const _value = _editor.getValue(); + setValue(_value); + self.current?.onChange?.(_value); + }); + + _editor.addCommand(monaco.KeyMod.Alt | monaco.KeyCode.KeyX, (e) => { + _editor.getAction("my-autoWrap-toggle")?.run(); + }); + + _editor.addAction({ + id: "my-autoWrap-toggle", + label: "切换自动换行", + keybindings: [ + monaco.KeyMod.Alt | monaco.KeyCode.KeyZ, + // monaco.KeyMod.chord( + // monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyK, + // monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyM + // ), + ], + + // A precondition for this action. + // precondition: null, + + // A rule to evaluate on top of the precondition in order to dispatch the keybindings. + // keybindingContext: null, + + // contextMenuGroupId: "navigation", + // contextMenuOrder: 1.5, + + // Method that will be executed when the action is triggered. + // @param editor The editor instance is passed in as a convenience + run: function (ed, arg) { + // alert("i'm running => " + ed.getPosition()); + // console.log("my-autoWrap-toggle", arg); + const workWrap = ed.getOption( + monaco.editor.EditorOption.wordWrap + ); + ed.updateOptions({ + wordWrap: workWrap === "on" ? "off" : "on", + }); + }, + }); }); - - setReady(true); - }); - // 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); - // resizeObserver.disconnect(); - }; + // 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); + // resizeObserver.disconnect(); + }; + } } - }, []); + // let editor: any; + }, [isReady]); useEffect(() => { if (editor.current) { @@ -182,7 +191,7 @@ const CodeEditor_: React.ForwardRefRenderFunction< } }, [value]); - return ( + return isReady ? (
+ ) : ( + { + const _value = event.target.value; + setValue(_value); + self.current?.onChange?.(_value); + }} + > ); }; diff --git a/vite.config.ts b/vite.config.ts index 744786c..2ced219 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -6,9 +6,8 @@ import { analyzer } from "vite-bundle-analyzer"; export default defineConfig(({ command, mode }) => { const config: UserConfig = { base: "./", - plugins: [ - react() - ], + plugins: [react()], + define: {}, }; if (mode === "development") {