github
/
1Panel
mirror of https://github.com/1Panel-dev/1Panel
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix: 解决打开文件编辑，控制台报错的问题

pull/259/head
zhengkunwang223 2023-03-16 17:24:25 +08:00 committed by f2c-ci-robot[bot]
parent 4c6d8cd20c
commit 7de80e9d5a
4 changed files with 67 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
frontend/package-lock.json generated
View File

@ -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",

1
frontend/package.json
View File

@ -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",

77
frontend/src/views/host/file-management/code-editor/index.vue
View File

@ -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>

12
frontend/vite.config.ts
View File

@ -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`],
},
},
},
},