mirror of
https://github.com/1Panel-dev/1Panel.git
synced 2025-10-31 11:15:58 +08:00
fix: 解决打开文件编辑，控制台报错的问题
This commit is contained in:
zhengkunwang223
f2c-ci-robot[bot]
parent
4c6d8cd20c
commit
7de80e9d5a
4 changed files with 67 additions and 38 deletions
15
frontend/package-lock.json
generated
15
frontend/package-lock.json
generated
|
|
@ -30,7 +30,6 @@
|
|||
"sass-loader": "^13.0.2",
|
||||
"screenfull": "^6.0.2",
|
||||
"unplugin-vue-define-options": "^0.7.3",
|
||||
"vite-plugin-monaco-editor": "^1.1.0",
|
||||
"vue": "^3.2.25",
|
||||
"vue-clipboard3": "^2.0.0",
|
||||
"vue-codemirror": "^6.1.1",
|
||||
|
|
@ -10274,14 +10273,6 @@
|
|||
"entities": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/vite-plugin-monaco-editor": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/vite-plugin-monaco-editor/-/vite-plugin-monaco-editor-1.1.0.tgz",
|
||||
"integrity": "sha512-IvtUqZotrRoVqwT0PBBDIZPNraya3BxN/bfcNfnxZ5rkJiGcNtO5eAOWWSgT7zullIAEqQwxMU83yL9J5k7gww==",
|
||||
"peerDependencies": {
|
||||
"monaco-editor": ">=0.33.0"
|
||||
}
|
||||
},
|
||||
"node_modules/vite-plugin-vue-setup-extend": {
|
||||
"version": "0.4.0",
|
||||
"resolved": "https://registry.npmjs.org/vite-plugin-vue-setup-extend/-/vite-plugin-vue-setup-extend-0.4.0.tgz",
|
||||
|
|
@ -18367,12 +18358,6 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"vite-plugin-monaco-editor": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/vite-plugin-monaco-editor/-/vite-plugin-monaco-editor-1.1.0.tgz",
|
||||
"integrity": "sha512-IvtUqZotrRoVqwT0PBBDIZPNraya3BxN/bfcNfnxZ5rkJiGcNtO5eAOWWSgT7zullIAEqQwxMU83yL9J5k7gww==",
|
||||
"requires": {}
|
||||
},
|
||||
"vite-plugin-vue-setup-extend": {
|
||||
"version": "0.4.0",
|
||||
"resolved": "https://registry.npmjs.org/vite-plugin-vue-setup-extend/-/vite-plugin-vue-setup-extend-0.4.0.tgz",
|
||||
|
|
|
|||
|
|
@ -42,7 +42,6 @@
|
|||
"sass-loader": "^13.0.2",
|
||||
"screenfull": "^6.0.2",
|
||||
"unplugin-vue-define-options": "^0.7.3",
|
||||
"vite-plugin-monaco-editor": "^1.1.0",
|
||||
"vue": "^3.2.25",
|
||||
"vue-clipboard3": "^2.0.0",
|
||||
"vue-codemirror": "^6.1.1",
|
||||
|
|
|
|||
|
|
@ -9,12 +9,12 @@
|
|||
>
|
||||
<el-form :inline="true" :model="config">
|
||||
<el-form-item :label="$t('file.theme')">
|
||||
<el-select v-model="config.theme" @change="initEditor()">
|
||||
<el-select v-model="config.theme" @change="changeTheme()">
|
||||
<el-option v-for="item in themes" :key="item.label" :value="item.value" :label="item.label" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('file.language')">
|
||||
<el-select v-model="config.language" @change="initEditor()">
|
||||
<el-select v-model="config.language" @change="changeLanguage()">
|
||||
<el-option v-for="lang in Languages" :key="lang.label" :value="lang.value" :label="lang.label" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
|
@ -36,11 +36,34 @@ import { SaveFileContent } from '@/api/modules/files';
|
|||
import i18n from '@/lang';
|
||||
import { MsgSuccess } from '@/utils/message';
|
||||
import * as monaco from 'monaco-editor';
|
||||
import { reactive, ref } from 'vue';
|
||||
import { nextTick, onBeforeUnmount, reactive, ref } from 'vue';
|
||||
import { Languages } from '@/global/mimetype';
|
||||
import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
|
||||
import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker';
|
||||
import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker';
|
||||
import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
|
||||
import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
|
||||
|
||||
let editor: monaco.editor.IStandaloneCodeEditor | undefined;
|
||||
|
||||
self.MonacoEnvironment = {
|
||||
getWorker(workerId, label) {
|
||||
if (label === 'json') {
|
||||
return new jsonWorker();
|
||||
}
|
||||
if (label === 'css' || label === 'scss' || label === 'less') {
|
||||
return new cssWorker();
|
||||
}
|
||||
if (label === 'html' || label === 'handlebars' || label === 'razor') {
|
||||
return new htmlWorker();
|
||||
}
|
||||
if (['typescript', 'javascript'].includes(label)) {
|
||||
return new tsWorker();
|
||||
}
|
||||
return new EditorWorker();
|
||||
},
|
||||
};
|
||||
|
||||
interface EditProps {
|
||||
language: string;
|
||||
content: string;
|
||||
|
|
@ -90,29 +113,39 @@ const handleClose = () => {
|
|||
}
|
||||
em('close', false);
|
||||
};
|
||||
const changeLanguage = () => {
|
||||
monaco.editor.setModelLanguage(editor.getModel(), config.language);
|
||||
};
|
||||
|
||||
const changeTheme = () => {
|
||||
monaco.editor.setTheme(config.theme);
|
||||
};
|
||||
|
||||
const initEditor = () => {
|
||||
if (editor) {
|
||||
editor.dispose();
|
||||
}
|
||||
const codeBox = document.getElementById('codeBox');
|
||||
editor = monaco.editor.create(codeBox as HTMLElement, {
|
||||
theme: config.theme,
|
||||
value: form.value.content,
|
||||
readOnly: false,
|
||||
automaticLayout: true,
|
||||
language: config.language,
|
||||
folding: true,
|
||||
roundedSelection: false,
|
||||
});
|
||||
nextTick(() => {
|
||||
const codeBox = document.getElementById('codeBox');
|
||||
editor = monaco.editor.create(codeBox as HTMLElement, {
|
||||
theme: config.theme,
|
||||
value: form.value.content,
|
||||
readOnly: false,
|
||||
automaticLayout: true,
|
||||
language: config.language,
|
||||
folding: true,
|
||||
roundedSelection: false,
|
||||
overviewRulerBorder: false,
|
||||
});
|
||||
|
||||
editor.onDidChangeModelContent(() => {
|
||||
if (editor) {
|
||||
form.value.content = editor.getValue();
|
||||
}
|
||||
});
|
||||
editor.onDidChangeModelContent(() => {
|
||||
if (editor) {
|
||||
form.value.content = editor.getValue();
|
||||
}
|
||||
});
|
||||
|
||||
editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, quickSave);
|
||||
editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, quickSave);
|
||||
});
|
||||
};
|
||||
|
||||
const quickSave = () => {
|
||||
|
|
@ -139,6 +172,12 @@ const onOpen = () => {
|
|||
initEditor();
|
||||
};
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
if (editor) {
|
||||
editor.dispose();
|
||||
}
|
||||
});
|
||||
|
||||
defineExpose({ acceptParams });
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -8,12 +8,13 @@ import VueSetupExtend from 'vite-plugin-vue-setup-extend';
|
|||
import eslintPlugin from 'vite-plugin-eslint';
|
||||
import vueJsx from '@vitejs/plugin-vue-jsx';
|
||||
import DefineOptions from 'unplugin-vue-define-options/vite';
|
||||
import MonacoEditorPlugin from 'vite-plugin-monaco-editor';
|
||||
|
||||
import AutoImport from 'unplugin-auto-import/vite';
|
||||
import Components from 'unplugin-vue-components/vite';
|
||||
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
|
||||
|
||||
const prefix = `monaco-editor/esm/vs`;
|
||||
|
||||
export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
|
||||
const env = loadEnv(mode, process.cwd());
|
||||
const viteEnv = wrapperEnv(env);
|
||||
|
|
@ -50,8 +51,6 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
|
|||
}),
|
||||
vueJsx(),
|
||||
VueSetupExtend(),
|
||||
|
||||
MonacoEditorPlugin({}),
|
||||
viteEnv.VITE_REPORT && visualizer(),
|
||||
viteEnv.VITE_BUILD_GZIP &&
|
||||
viteCompression({
|
||||
|
|
@ -87,6 +86,13 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
|
|||
chunkFileNames: 'assets/js/[name]-[hash].js',
|
||||
entryFileNames: 'assets/js/[name]-[hash].js',
|
||||
assetFileNames: 'assets/[ext]/[name]-[hash].[ext]',
|
||||
manualChunks: {
|
||||
jsonWorker: [`${prefix}/language/json/json.worker`],
|
||||
cssWorker: [`${prefix}/language/css/css.worker`],
|
||||
htmlWorker: [`${prefix}/language/html/html.worker`],
|
||||
tsWorker: [`${prefix}/language/typescript/ts.worker`],
|
||||
editorWorker: [`${prefix}/editor/editor.worker`],
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue