MonocaEditor采用异步加载,优化整体加载速度

This commit is contained in:
fofolee
2024-01-23 00:03:34 +08:00
parent 325c6c746a
commit 632adf11e1
2 changed files with 33 additions and 12 deletions

View File

@@ -211,7 +211,8 @@
class="absolute-bottom"
:placeholder="true"
ref="editor"
@typing="(val) => (quickcommandInfo.cmd = val)"
@loaded="monacoInit"
@typing="(val) => monacoTyping(val)"
@keyStroke="monacoKeyStroke"
:style="{
top: languageBarHeight + 'px',
@@ -225,11 +226,15 @@
</template>
<script>
import MonacoEditor from "components/MonacoEditor";
import { defineAsyncComponent } from "vue";
import CommandSideBar from "components/CommandSideBar";
import CommandRunResult from "components/CommandRunResult";
import QuickAction from "components/popup/QuickAction";
import KeyRecorder from "components/popup/KeyRecorder";
// Monaco改用异步加载
const MonacoEditor = defineAsyncComponent(() =>
import("components/MonacoEditor")
);
export default {
components: {
@@ -270,8 +275,11 @@ export default {
props: {
action: Object,
},
created() {
this.commandInit();
},
mounted() {
this.init();
this.sidebarInit();
},
computed: {
configurationPage() {
@@ -288,23 +296,29 @@ export default {
},
},
methods: {
init() {
// 命令初始化
commandInit() {
let quickCommandInfo =
this.action.type === "run"
? this.$root.utools.getDB("cfg_codeHistory")
: this.action.data;
quickCommandInfo?.program &&
Object.assign(this.quickcommandInfo, _.cloneDeep(quickCommandInfo));
// monaco 相关
this.$refs.editor.setEditorValue(this.quickcommandInfo.cmd);
this.setLanguage(this.quickcommandInfo.program);
this.$refs.editor.setCursorPosition(this.quickcommandInfo.cursorPosition);
// 默认命令不可编辑
if (this.quickcommandInfo.tags?.includes("默认") && !utools.isDev()) {
this.canCommandSave = false;
}
},
// 侧边栏初始化
sidebarInit() {
this.$refs.sidebar?.init();
},
// Monaco编辑器初始化Monaco异步加载完执行
monacoInit() {
this.$refs.editor.setEditorValue(this.quickcommandInfo.cmd);
this.setLanguage(this.quickcommandInfo.program);
this.$refs.editor.setCursorPosition(this.quickcommandInfo.cursorPosition);
},
programChanged(value) {
this.setLanguage(value);
if (value === "custom") this.$refs.settings.show();
@@ -373,6 +387,9 @@ export default {
command.cursorPosition = this.$refs.editor.getCursorPosition();
this.$root.utools.putDB(command, "cfg_codeHistory");
},
monacoTyping(val) {
this.quickcommandInfo.cmd = val;
},
monacoKeyStroke(event, data) {
switch (event) {
case "run":

View File

@@ -46,6 +46,7 @@ export default {
},
mounted() {
this.initEditor();
this.$emit("loaded");
},
props: {
placeholder: Boolean,
@@ -213,10 +214,13 @@ export default {
}
);
// alt + z 换行
this.rawEditor().addCommand(monaco.KeyMod.Alt | monaco.KeyCode.KeyZ, () => {
that.wordWrap = that.wordWrap === "off" ? "on" : "off";
that.rawEditor.updateOptions({ wordWrap: that.wordWrap });
});
this.rawEditor().addCommand(
monaco.KeyMod.Alt | monaco.KeyCode.KeyZ,
() => {
that.wordWrap = that.wordWrap === "off" ? "on" : "off";
that.rawEditor.updateOptions({ wordWrap: that.wordWrap });
}
);
// ctrl + s 保存
this.rawEditor().addCommand(
monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS,