Browse Source

优化 cl-editor-monaco 加载

神仙都没用 1 year ago
parent
commit
2f56336564

+ 2 - 13
src/modules/helper/views/ai-code.vue

@@ -229,7 +229,8 @@
 						</div>
 
 						<div class="code">
-							<cl-editor-monaco
+							<cl-editor
+								name="cl-editor-monaco"
 								:ref="setRefs('editor')"
 								v-model="activeCode.content"
 								height="100%"
@@ -291,7 +292,6 @@ import { assign, isEmpty } from "lodash-es";
 import { useMenu, useAi } from "../hooks";
 import { config, isDev } from "/@/config";
 import { useForm } from "@cool-vue/crud";
-import * as monaco from "monaco-editor";
 import { sleep, storage } from "/@/cool/utils";
 import dayjs from "dayjs";
 import type { CodeItem, EpsColumn } from "../types";
@@ -303,17 +303,6 @@ const ai = useAi();
 const Form = useForm();
 const { copy } = useClipboard();
 
-// 编辑器样式
-monaco.editor.defineTheme("ai-code--dark", {
-	base: "vs-dark",
-	inherit: true,
-	rules: [],
-	colors: {
-		"editor.background": "#0f151e",
-		"editor.inactiveSelectionBackground": "#0f151e"
-	}
-});
-
 // 表单
 const form = reactive({
 	entity: "",

+ 1 - 0
src/plugins/editor-monaco/config.ts

@@ -15,6 +15,7 @@ export default (): ModuleConfig => {
 		],
 
 		components: [
+			// 依赖偏大,现用于“ai编码页面”,如不需要请注释组件
 			// 代码编辑器 https://www.npmjs.com/package/monaco-editor
 			() => import("./components/monaco.vue")
 		]

+ 1 - 0
src/plugins/editor-monaco/index.ts

@@ -1 +1,2 @@
 export * from "./utils/declare";
+export * from "./utils/theme";

+ 15 - 1
src/plugins/editor-monaco/utils/theme.ts

@@ -1,6 +1,6 @@
 import { editor } from "monaco-editor";
 
-editor.defineTheme("default", {
+defineTheme("default", {
 	base: "vs",
 	inherit: true,
 	rules: [
@@ -348,3 +348,17 @@ editor.defineTheme("default", {
 		"editor.selectionHighlightBorder": "#fafbfc"
 	}
 });
+
+defineTheme("ai-code--dark", {
+	base: "vs-dark",
+	inherit: true,
+	rules: [],
+	colors: {
+		"editor.background": "#0f151e",
+		"editor.inactiveSelectionBackground": "#0f151e"
+	}
+});
+
+export function defineTheme(name: string, data: editor.IStandaloneThemeData) {
+	editor.defineTheme(name, data);
+}