Skip to content

Commit

Permalink
monaco-editor 加载优化
Browse files Browse the repository at this point in the history
  • Loading branch information
汪航洋 committed May 30, 2024
1 parent cd905f5 commit 2ad0fa5
Show file tree
Hide file tree
Showing 10 changed files with 203 additions and 183 deletions.
8 changes: 6 additions & 2 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,12 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="/favicon.ico" />
<link rel="manifest" href="/manifest.json">
<script src="%VITE_MONACO_URL%/min/vs/loader.js"></script>
<!-- <script src="//unpkg.com/[email protected]/min/vs/loader.js"></script> -->
<script id="nonaco" src="%VITE_MONACO_URL%/min/vs/loader.js"></script>
<script>
(function(){
require.config({ paths: { vs: document.getElementById("nonaco").src.replace(/\/loader\.js/,'') } });
})();
</script>
</head>
<body>
<div id="root"></div>
Expand Down
1 change: 0 additions & 1 deletion package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

5 changes: 1 addition & 4 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
2 changes: 2 additions & 0 deletions src/App.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@ body {

.g-boder {
border: 1px solid #ccc;
border-radius: 5px;
overflow: hidden;
}

:root.theme-dark {
Expand Down
12 changes: 7 additions & 5 deletions src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<Ctx.Provider
value={{
Expand Down
140 changes: 69 additions & 71 deletions src/Pages/Manage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -141,14 +141,12 @@ const Manage = () => {
key: "new",
label: "打开新链接",
onClick: () => {
console.log(location.href);
window.open(location.href, undefined, "noopener");
},
});
return items;
}, [locals]);

console.log("gostInfo", info);
return (
<Layout style={{ height: "100vh", overflow: "hidden" }}>
<Layout.Header style={{ color: "#FFF", paddingInline: 20 }}>
Expand Down Expand Up @@ -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) {
Expand All @@ -238,74 +235,75 @@ const Manage = () => {
</Form>
</Modal>
</Layout.Header>
<Layout.Content style={{ height: "100%", overflow: "auto" }}>
<Row style={{ padding: 16, overflow: "hidden" }}>
<Row gutter={[16, 16]}>
{/* <Col {...colSpan} xxl={16}> */}
<ServiceCard colSpan={colSpan}></ServiceCard>
{/* </Col> */}
<Col {...colSpan}>
<ChainCard></ChainCard>
</Col>
<Col {...colSpan}>
<HopsCard />
</Col>
<Col {...colSpan}>
<ListCard module="auther" />
</Col>
<Col {...colSpan}>
<ListCard module="admission" />
</Col>
<Col {...colSpan}>
<ListCard module="bypass" />
</Col>
<Col {...colSpan}>
<ListCard module="host" />
</Col>
<Col {...colSpan}>
<ListCard module="ingress" />
</Col>
<Col {...colSpan}>
<ListCard module="resolver" />
</Col>
<Col {...colSpan}>
<ListCard module="sd" />
</Col>
<Col {...colSpan}>
<ListCard module="observer" />
</Col>
<Col span={24}>
<ProCard boxShadow title="限速限流">
<Row gutter={[16, 16]}>
<Col {...colSpan1}>
<ListCard module="limiter" bordered boxShadow={false} />
</Col>
<Col {...colSpan1}>
<ListCard module="rlimiter" bordered boxShadow={false} />
</Col>
<Col {...colSpan1}>
<ListCard module="climiter" bordered boxShadow={false} />
</Col>
</Row>
</ProCard>
</Col>
<Col span={24}>
<ProCard boxShadow title="All Config JSON">
{/* <pre>{jsonFormat(gostConfig!)}</pre> */}
<CodeEditor
className={"g-boder"}
value={jsonFormat(gostConfig!)}
height={500}
language="json"
options={{
// selectOnLineNumbers: true,
minimap: { enabled: false },
readOnly: true,
}}
></CodeEditor>
</ProCard>
</Col>
</Row>
<Layout.Content style={{ height: "100%", padding: 16, boxSizing:'border-box', overflow: "auto" }}>
<Row gutter={[16, 16]} style={{ overflow: "hidden" }}>
{/* <Col {...colSpan} xxl={16}> */}
<ServiceCard colSpan={colSpan}></ServiceCard>
{/* </Col> */}
<Col {...colSpan}>
<ChainCard></ChainCard>
</Col>
<Col {...colSpan}>
<HopsCard />
</Col>
<Col {...colSpan}>
<ListCard module="auther" />
</Col>
<Col {...colSpan}>
<ListCard module="admission" />
</Col>
<Col {...colSpan}>
<ListCard module="bypass" />
</Col>
<Col {...colSpan}>
<ListCard module="host" />
</Col>
<Col {...colSpan}>
<ListCard module="ingress" />
</Col>
<Col {...colSpan}>
<ListCard module="resolver" />
</Col>
<Col {...colSpan}>
<ListCard module="sd" />
</Col>
<Col {...colSpan}>
<ListCard module="observer" />
</Col>
<Col span={24}>
<ProCard boxShadow title="限速限流">
<Row gutter={[16, 16]}>
<Col {...colSpan1}>
<ListCard module="limiter" bordered boxShadow={false} />
</Col>
<Col {...colSpan1}>
<ListCard module="rlimiter" bordered boxShadow={false} />
</Col>
<Col {...colSpan1}>
<ListCard module="climiter" bordered boxShadow={false} />
</Col>
</Row>
</ProCard>
</Col>
<Col span={24}>
<ProCard
boxShadow
title="All Config JSON"
styles={{ body: { padding: 20 } }}
>
<CodeEditor
className={"g-boder"}
value={jsonFormat(gostConfig!)}
height={500}
language="json"
options={{
// selectOnLineNumbers: true,
minimap: { enabled: false },
readOnly: true,
}}
></CodeEditor>
</ProCard>
</Col>
</Row>
</Layout.Content>
</Layout>
Expand Down
1 change: 0 additions & 1 deletion src/components/Forms/Json.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -213,7 +213,6 @@ export const showJsonForm = (props: JsonFromProps) => {
}

function destroy() {
console.log("destroy");
root.unmount();
document.body.removeChild(container);
}
Expand Down
2 changes: 1 addition & 1 deletion src/uitls/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
Loading

0 comments on commit 2ad0fa5

Please sign in to comment.