acepanel/panel
2
0
Fork 0
mirror of https://github.com/acepanel/panel.git synced 2026-02-04 04:22:33 +08:00
Code Issues Packages Releases Activity

refactor: 移除monaco-editor，改为ace-editor

Browse Source
This commit is contained in:
耗子
2025-12-31 00:30:32 +08:00
parent 9733c6bbbd
commit 5e7093c8ec
30 changed files with 374 additions and 584 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
web/package.json
View File

@@ -28,7 +28,6 @@
"@alova/adapter-xhr": "^2.2.1",
"@eslint/eslintrc": "^3.3.1",
"@fontsource-variable/jetbrains-mono": "^5.2.8",
"@guolao/vue-monaco-editor": "^1.6.0",
"@vavt/copy2clipboard": "^1.0.3",
"@vue-js-cron/naive-ui": "^2.0.13",
"@vueuse/core": "^14.0.0",
@@ -39,6 +38,7 @@
"@xterm/addon-web-links": "^0.12.0",
"@xterm/addon-webgl": "^0.19.0",
"@xterm/xterm": "^6.0.0",
"ace-builds": "^1.43.5",
"alova": "^3.3.4",
"cronstrue": "^3.3.0",
"echarts": "^6.0.0",
@@ -47,7 +47,6 @@
"luxon": "^3.7.2",
"marked": "^17.0.0",
"mitt": "^3.0.1",
"monaco-editor": "^0.55.1",
"node-forge": "^1.3.1",
"pinia": "^3.0.3",
"pinia-plugin-persistedstate": "^4.5.0",
@@ -55,6 +54,7 @@
"vue": "^3.5.22",
"vue-echarts": "^8.0.1",
"vue-router": "^4.6.3",
"vue3-ace-editor": "^2.2.4",
"vue3-gettext": "4.0.0-beta.1"
},
"devDependencies": {

106
web/pnpm-lock.yaml generated
View File

@@ -17,9 +17,6 @@ importers:
'@fontsource-variable/jetbrains-mono':
specifier: ^5.2.8
version: 5.2.8
'@guolao/vue-monaco-editor':
specifier: ^1.6.0
version: 1.6.0(monaco-editor@0.55.1)(vue@3.5.26(typescript@5.9.3))
'@vavt/copy2clipboard':
specifier: ^1.0.3
version: 1.0.3
@@ -50,6 +47,9 @@ importers:
'@xterm/xterm':
specifier: ^6.0.0
version: 6.0.0
ace-builds:
specifier: ^1.43.5
version: 1.43.5
alova:
specifier: ^3.3.4
version: 3.4.1
@@ -74,9 +74,6 @@ importers:
mitt:
specifier: ^3.0.1
version: 3.0.1
monaco-editor:
specifier: ^0.55.1
version: 0.55.1
node-forge:
specifier: ^1.3.1
version: 1.3.3
@@ -98,6 +95,9 @@ importers:
vue-router:
specifier: ^4.6.3
version: 4.6.4(vue@3.5.26(typescript@5.9.3))
vue3-ace-editor:
specifier: ^2.2.4
version: 2.2.4(ace-builds@1.43.5)(vue@3.5.26(typescript@5.9.3))
vue3-gettext:
specifier: 4.0.0-beta.1
version: 4.0.0-beta.1(@vue/compiler-sfc@3.5.26)(vue@3.5.26(typescript@5.9.3))
@@ -667,16 +667,6 @@ packages:
'@fontsource-variable/jetbrains-mono@5.2.8':
resolution: {integrity: sha512-WBA9elru6Jdp5df2mES55wuOO0WIrn3kpXnI4+W2ek5u3ZgLS9XS4gmIlcQhiZOWEKl95meYdvK7xI+ETLCq/Q==}
'@guolao/vue-monaco-editor@1.6.0':
resolution: {integrity: sha512-w2IiJ6eJGGeuIgCK6EKZOAfhHTTUB5aZwslzwGbZ5e89Hb4avx6++GkLTW8p84Sng/arFMjLPPxSBI56cFudyQ==}
peerDependencies:
'@vue/composition-api': ^1.7.2
monaco-editor: '>=0.43.0'
vue: ^2.6.14 || >=3.0.0
peerDependenciesMeta:
'@vue/composition-api':
optional: true
'@humanfs/core@0.19.1':
resolution: {integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==}
engines: {node: '>=18.18.0'}
@@ -795,9 +785,6 @@ packages:
'@marijn/find-cluster-break@1.0.2':
resolution: {integrity: sha512-l0h88YhZFyKdXIFNfSWpyjStDjGHwZ/U7iobcK1cQQD8sejsONdQtTVU+1wVN1PBw40PiiHB1vA5S7VTfQiP9g==}
'@monaco-editor/loader@1.7.0':
resolution: {integrity: sha512-gIwR1HrJrrx+vfyOhYmCZ0/JcWqG5kbfG7+d3f/C1LXk2EvzAbHSg3MQ5lO2sMlo9izoAZ04shohfKLVT6crVA==}
'@nodelib/fs.scandir@2.1.5':
resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
engines: {node: '>= 8'}
@@ -1058,9 +1045,6 @@ packages:
'@types/node@24.10.4':
resolution: {integrity: sha512-vnDVpYPMzs4wunl27jHrfmwojOGKya0xyM3sH+UE5iv5uPS6vX7UIoh6m+vQc5LGBq52HBKPIn/zcSZVzeDEZg==}
'@types/trusted-types@2.0.7':
resolution: {integrity: sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==}
'@types/web-bluetooth@0.0.21':
resolution: {integrity: sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA==}
@@ -1378,6 +1362,9 @@ packages:
'@xterm/xterm@6.0.0':
resolution: {integrity: sha512-TQwDdQGtwwDt+2cgKDLn0IRaSxYu1tSUjgKarSDkUM0ZNiSRXFpjxEsvc/Zgc5kq5omJ+V0a8/kIM2WD3sMOYg==}
ace-builds@1.43.5:
resolution: {integrity: sha512-iH5FLBKdB7SVn9GR37UgA/tpQS8OTWIxWAuq3Ofaw+Qbc69FfPXsXd9jeW7KRG2xKpKMqBDnu0tHBrCWY5QI7A==}
acorn-jsx@5.3.2:
resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
peerDependencies:
@@ -1745,9 +1732,6 @@ packages:
resolution: {integrity: sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==}
engines: {node: '>= 4'}
dompurify@3.2.7:
resolution: {integrity: sha512-WhL/YuveyGXJaerVlMYGWhvQswa7myDG17P7Vu65EWC05o8vfeNbvNf4d/BOvH99+ZW+LlQsc1GDKMa1vNK6dw==}
domutils@2.8.0:
resolution: {integrity: sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==}
@@ -2446,11 +2430,6 @@ packages:
resolution: {integrity: sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==}
hasBin: true
marked@14.0.0:
resolution: {integrity: sha512-uIj4+faQ+MgHgwUW1l2PsPglZLOLOT1uErt06dAPtx2kjteLAkbsd/0FiYg/MGS+i7ZKLb7w2WClxHkzOOuryQ==}
engines: {node: '>= 18'}
hasBin: true
marked@17.0.1:
resolution: {integrity: sha512-boeBdiS0ghpWcSwoNm/jJBwdpFaMnZWRzjA6SkUMYb40SVaN1x7mmfGKp0jvexGcx+7y2La5zRZsYFZI6Qpypg==}
engines: {node: '>= 20'}
@@ -2518,9 +2497,6 @@ packages:
resolution: {integrity: sha512-eQsKcWzIaZzEZ07NuEyO4Nw65g0hdWAyurVol1IPl1gahRwY+svqzfgfey8U8dahLwG44d6/RwEzuK52rSa/JQ==}
hasBin: true
monaco-editor@0.55.1:
resolution: {integrity: sha512-jz4x+TJNFHwHtwuV9vA9rMujcZRb0CEilTEwG2rRSpe/A7Jdkuj8xPKttCgOh+v/lkHy7HsZ64oj+q3xoAFl9A==}
mrmime@2.0.1:
resolution: {integrity: sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ==}
engines: {node: '>=10'}
@@ -2824,6 +2800,9 @@ packages:
remove@0.1.5:
resolution: {integrity: sha512-AJMA9oWvJzdTjwIGwSQZsjGQiRx73YTmiOWmfCp1fpLa/D4n7jKcpoA+CZiVLJqKcEKUuh1Suq80c5wF+L/qVQ==}
resize-observer-polyfill@1.5.1:
resolution: {integrity: sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==}
resolve-from@4.0.0:
resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
engines: {node: '>=4'}
@@ -2956,9 +2935,6 @@ packages:
resolution: {integrity: sha512-1POYv7uv2gXoyGFpBCmpDVSNV74IfsWlDW216UPjbWufNf+bSU6GdbDsxdcxtfwb4xlI3yxzOTKClUosxARYrQ==}
engines: {node: '>=0.10.0'}
state-local@1.0.7:
resolution: {integrity: sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w==}
statuses@1.5.0:
resolution: {integrity: sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==}
engines: {node: '>= 0.6'}
@@ -3324,17 +3300,6 @@ packages:
vscode-uri@3.1.0:
resolution: {integrity: sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ==}
vue-demi@0.14.10:
resolution: {integrity: sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==}
engines: {node: '>=12'}
hasBin: true
peerDependencies:
'@vue/composition-api': ^1.0.0-rc.1
vue: ^3.0.0-0 || ^2.6.0
peerDependenciesMeta:
'@vue/composition-api':
optional: true
vue-echarts@8.0.1:
resolution: {integrity: sha512-23rJTFLu1OUEGRWjJGmdGt8fP+8+ja1gVgzMYPIPaHWpXegcO1viIAaeu2H4QHESlVeHzUAHIxKXGrwjsyXAaA==}
peerDependencies:
@@ -3361,6 +3326,12 @@ packages:
peerDependencies:
typescript: '>=5.0.0'
vue3-ace-editor@2.2.4:
resolution: {integrity: sha512-FZkEyfpbH068BwjhMyNROxfEI8135Sc+x8ouxkMdCNkuj/Tuw83VP/gStFQqZHqljyX9/VfMTCdTqtOnJZGN8g==}
peerDependencies:
ace-builds: '*'
vue: ^3
vue3-gettext@4.0.0-beta.1:
resolution: {integrity: sha512-1A46SmubgTMyy7i5hj8ay50NFl6/vzwoIVZPuGCin/X3a/NVCAs99G0EbcnfJiR7NZNTJgUjvBzppufC7Kq+4A==}
engines: {node: '>= 20.19.0'}
@@ -4054,13 +4025,6 @@ snapshots:
'@fontsource-variable/jetbrains-mono@5.2.8': {}
'@guolao/vue-monaco-editor@1.6.0(monaco-editor@0.55.1)(vue@3.5.26(typescript@5.9.3))':
dependencies:
'@monaco-editor/loader': 1.7.0
monaco-editor: 0.55.1
vue: 3.5.26(typescript@5.9.3)
vue-demi: 0.14.10(vue@3.5.26(typescript@5.9.3))
'@humanfs/core@0.19.1': {}
'@humanfs/node@0.16.7':
@@ -4225,10 +4189,6 @@ snapshots:
'@marijn/find-cluster-break@1.0.2': {}
'@monaco-editor/loader@1.7.0':
dependencies:
state-local: 1.0.7
'@nodelib/fs.scandir@2.1.5':
dependencies:
'@nodelib/fs.stat': 2.0.5
@@ -4418,9 +4378,6 @@ snapshots:
dependencies:
undici-types: 7.16.0
'@types/trusted-types@2.0.7':
optional: true
'@types/web-bluetooth@0.0.21': {}
'@typescript-eslint/eslint-plugin@8.50.1(@typescript-eslint/parser@8.50.1(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
@@ -4907,6 +4864,8 @@ snapshots:
'@xterm/xterm@6.0.0': {}
ace-builds@1.43.5: {}
acorn-jsx@5.3.2(acorn@8.15.0):
dependencies:
acorn: 8.15.0
@@ -5270,10 +5229,6 @@ snapshots:
dependencies:
domelementtype: 2.3.0
dompurify@3.2.7:
optionalDependencies:
'@types/trusted-types': 2.0.7
domutils@2.8.0:
dependencies:
dom-serializer: 1.4.1
@@ -6027,8 +5982,6 @@ snapshots:
punycode.js: 2.3.1
uc.micro: 2.1.0
marked@14.0.0: {}
marked@17.0.1: {}
math-intrinsics@1.1.0: {}
@@ -6106,11 +6059,6 @@ snapshots:
dependencies:
commander: 14.0.2
monaco-editor@0.55.1:
dependencies:
dompurify: 3.2.7
marked: 14.0.0
mrmime@2.0.1: {}
ms@2.0.0: {}
@@ -6402,6 +6350,8 @@ snapshots:
dependencies:
seq: 0.3.5
resize-observer-polyfill@1.5.1: {}
resolve-from@4.0.0: {}
resolve-pkg-maps@1.0.0: {}
@@ -6569,8 +6519,6 @@ snapshots:
speakingurl@14.0.1: {}
state-local@1.0.7: {}
statuses@1.5.0: {}
stop-iteration-iterator@1.1.0:
@@ -7007,10 +6955,6 @@ snapshots:
vscode-uri@3.1.0: {}
vue-demi@0.14.10(vue@3.5.26(typescript@5.9.3)):
dependencies:
vue: 3.5.26(typescript@5.9.3)
vue-echarts@8.0.1(echarts@6.0.0)(vue@3.5.26(typescript@5.9.3)):
dependencies:
echarts: 6.0.0
@@ -7041,6 +6985,12 @@ snapshots:
'@vue/language-core': 3.2.1
typescript: 5.9.3
vue3-ace-editor@2.2.4(ace-builds@1.43.5)(vue@3.5.26(typescript@5.9.3)):
dependencies:
ace-builds: 1.43.5
resize-observer-polyfill: 1.5.1
vue: 3.5.26(typescript@5.9.3)
vue3-gettext@4.0.0-beta.1(@vue/compiler-sfc@3.5.26)(vue@3.5.26(typescript@5.9.3)):
dependencies:
'@vue/compiler-sfc': 3.5.26

68
web/src/components/common/CodeEditor.vue
View File

@@ -1,68 +0,0 @@
<script setup lang="ts">
import file from '@/api/panel/file'
import { decodeBase64 } from '@/utils'
import { languageByPath } from '@/utils/file'
import Editor from '@guolao/vue-monaco-editor'
import { useGettext } from 'vue3-gettext'
const { $gettext } = useGettext()
const props = defineProps({
path: {
type: String,
required: true
},
readOnly: {
type: Boolean,
required: true
}
})
const disabled = ref(false) // 在出现错误的情况下禁用保存
const content = ref('')
const get = () => {
useRequest(file.content(encodeURIComponent(props.path)))
.onSuccess(({ data }) => {
content.value = decodeBase64(data.content)
window.$message.success($gettext('Retrieved successfully'))
})
.onError(() => {
disabled.value = true
})
}
const save = () => {
if (disabled.value) {
window.$message.error($gettext('Cannot save in current state'))
return
}
useRequest(file.save(props.path, content.value)).onSuccess(() => {
window.$message.success($gettext('Saved successfully'))
})
}
onMounted(() => {
get()
})
defineExpose({
get,
save
})
</script>
<template>
<Editor
v-model:value="content"
:language="languageByPath(props.path)"
theme="vs-dark"
height="60vh"
:options="{
automaticLayout: true,
smoothScrolling: true,
wordWrap: 'on'
}"
/>
</template>
<style scoped lang="scss"></style>

141
web/src/components/common/CommonEditor.vue Normal file
View File

@@ -0,0 +1,141 @@
<script setup lang="ts">
import ace from 'ace-builds'
import { VAceEditor } from 'vue3-ace-editor'
import extBeautifyUrl from 'ace-builds/src-min-noconflict/ext-beautify?url'
import extCodeLensUrl from 'ace-builds/src-min-noconflict/ext-code_lens?url'
import extCommandBarUrl from 'ace-builds/src-min-noconflict/ext-command_bar?url'
import extEmmetUrl from 'ace-builds/src-min-noconflict/ext-emmet?url'
import extErrorMarkerUrl from 'ace-builds/src-min-noconflict/ext-error_marker?url'
import extInlineAutocompleteUrl from 'ace-builds/src-min-noconflict/ext-inline_autocomplete?url'
import extKeybindingMenuUrl from 'ace-builds/src-min-noconflict/ext-keybinding_menu?url'
import extLanguageToolsUrl from 'ace-builds/src-min-noconflict/ext-language_tools?url'
import extSearchboxUrl from 'ace-builds/src-min-noconflict/ext-searchbox?url'
import extSettingsMenuUrl from 'ace-builds/src-min-noconflict/ext-settings_menu?url'
import extSpellcheckUrl from 'ace-builds/src-min-noconflict/ext-spellcheck?url'
import extWhitespaceUrl from 'ace-builds/src-min-noconflict/ext-whitespace?url'
import modeApacheConfUrl from 'ace-builds/src-min-noconflict/mode-apache_conf?url'
import modeCssUrl from 'ace-builds/src-min-noconflict/mode-css?url'
import modeCsvUrl from 'ace-builds/src-min-noconflict/mode-csv?url'
import modeDockerfileUrl from 'ace-builds/src-min-noconflict/mode-dockerfile?url'
import modeDotUrl from 'ace-builds/src-min-noconflict/mode-dot?url'
import modeGolangUrl from 'ace-builds/src-min-noconflict/mode-golang?url'
import modeHtmlUrl from 'ace-builds/src-min-noconflict/mode-html?url'
import modeIniUrl from 'ace-builds/src-min-noconflict/mode-ini?url'
import modeJavaUrl from 'ace-builds/src-min-noconflict/mode-java?url'
import modeJavascriptUrl from 'ace-builds/src-min-noconflict/mode-javascript?url'
import modeJsonUrl from 'ace-builds/src-min-noconflict/mode-json?url'
import modeLuaUrl from 'ace-builds/src-min-noconflict/mode-lua?url'
import modeMakefileUrl from 'ace-builds/src-min-noconflict/mode-makefile?url'
import modeMarkdownUrl from 'ace-builds/src-min-noconflict/mode-markdown?url'
import modeMySqlUrl from 'ace-builds/src-min-noconflict/mode-mysql?url'
import modeNginxUrl from 'ace-builds/src-min-noconflict/mode-nginx?url'
import modePgSqlUrl from 'ace-builds/src-min-noconflict/mode-pgsql?url'
import modePhpUrl from 'ace-builds/src-min-noconflict/mode-php?url'
import modePythonUrl from 'ace-builds/src-min-noconflict/mode-python?url'
import modeRubyUrl from 'ace-builds/src-min-noconflict/mode-ruby?url'
import modeRustUrl from 'ace-builds/src-min-noconflict/mode-rust?url'
import modeScssUrl from 'ace-builds/src-min-noconflict/mode-scss?url'
import modeShUrl from 'ace-builds/src-min-noconflict/mode-sh?url'
import modeSqlUrl from 'ace-builds/src-min-noconflict/mode-sql?url'
import modeSvgUrl from 'ace-builds/src-min-noconflict/mode-svg?url'
import modeTextUrl from 'ace-builds/src-min-noconflict/mode-text?url'
import modeTomlUrl from 'ace-builds/src-min-noconflict/mode-toml?url'
import modeTypescriptUrl from 'ace-builds/src-min-noconflict/mode-typescript?url'
import modeVueUrl from 'ace-builds/src-min-noconflict/mode-vue?url'
import modeXmlUrl from 'ace-builds/src-min-noconflict/mode-xml?url'
import modeYamlUrl from 'ace-builds/src-min-noconflict/mode-yaml?url'
import themeMonokaiUrl from 'ace-builds/src-min-noconflict/theme-monokai?url'
import workerBaseUrl from 'ace-builds/src-min-noconflict/worker-base?url'
import workerCssUrl from 'ace-builds/src-min-noconflict/worker-css?url'
import workerHtmlUrl from 'ace-builds/src-min-noconflict/worker-html?url'
import workerJsUrl from 'ace-builds/src-min-noconflict/worker-javascript?url'
import workerJsonUrl from 'ace-builds/src-min-noconflict/worker-json?url'
import workerLuaUrl from 'ace-builds/src-min-noconflict/worker-lua?url'
import workerPhpUrl from 'ace-builds/src-min-noconflict/worker-php?url'
import workerYamlUrl from 'ace-builds/src-min-noconflict/worker-yaml?url'
ace.config.setModuleUrl('ace/theme/monokai', themeMonokaiUrl)
ace.config.setModuleUrl('ace/ext/inline_autocomplete', extInlineAutocompleteUrl)
ace.config.setModuleUrl('ace/ext/emmet', extEmmetUrl)
ace.config.setModuleUrl('ace/ext/command_bar', extCommandBarUrl)
ace.config.setModuleUrl('ace/ext/code_lens', extCodeLensUrl)
ace.config.setModuleUrl('ace/ext/error_marker', extErrorMarkerUrl)
ace.config.setModuleUrl('ace/ext/spellcheck', extSpellcheckUrl)
ace.config.setModuleUrl('ace/ext/settings_menu', extSettingsMenuUrl)
ace.config.setModuleUrl('ace/ext/keybinding_menu', extKeybindingMenuUrl)
ace.config.setModuleUrl('ace/ext/whitespace', extWhitespaceUrl)
ace.config.setModuleUrl('ace/ext/beautify', extBeautifyUrl)
ace.config.setModuleUrl('ace/ext/searchbox', extSearchboxUrl)
ace.config.setModuleUrl('ace/ext/language_tools', extLanguageToolsUrl)
ace.config.setModuleUrl('ace/mode/apache_conf', modeApacheConfUrl)
ace.config.setModuleUrl('ace/mode/css', modeCssUrl)
ace.config.setModuleUrl('ace/mode/csv', modeCsvUrl)
ace.config.setModuleUrl('ace/mode/dockerfile', modeDockerfileUrl)
ace.config.setModuleUrl('ace/mode/dot', modeDotUrl)
ace.config.setModuleUrl('ace/mode/golang', modeGolangUrl)
ace.config.setModuleUrl('ace/mode/html', modeHtmlUrl)
ace.config.setModuleUrl('ace/mode/ini', modeIniUrl)
ace.config.setModuleUrl('ace/mode/java', modeJavaUrl)
ace.config.setModuleUrl('ace/mode/javascript', modeJavascriptUrl)
ace.config.setModuleUrl('ace/mode/json', modeJsonUrl)
ace.config.setModuleUrl('ace/mode/lua', modeLuaUrl)
ace.config.setModuleUrl('ace/mode/makefile', modeMakefileUrl)
ace.config.setModuleUrl('ace/mode/markdown', modeMarkdownUrl)
ace.config.setModuleUrl('ace/mode/mysql', modeMySqlUrl)
ace.config.setModuleUrl('ace/mode/nginx', modeNginxUrl)
ace.config.setModuleUrl('ace/mode/pgsql', modePgSqlUrl)
ace.config.setModuleUrl('ace/mode/php', modePhpUrl)
ace.config.setModuleUrl('ace/mode/python', modePythonUrl)
ace.config.setModuleUrl('ace/mode/ruby', modeRubyUrl)
ace.config.setModuleUrl('ace/mode/rust', modeRustUrl)
ace.config.setModuleUrl('ace/mode/scss', modeScssUrl)
ace.config.setModuleUrl('ace/mode/sh', modeShUrl)
ace.config.setModuleUrl('ace/mode/sql', modeSqlUrl)
ace.config.setModuleUrl('ace/mode/svg', modeSvgUrl)
ace.config.setModuleUrl('ace/mode/text', modeTextUrl)
ace.config.setModuleUrl('ace/mode/toml', modeTomlUrl)
ace.config.setModuleUrl('ace/mode/typescript', modeTypescriptUrl)
ace.config.setModuleUrl('ace/mode/vue', modeVueUrl)
ace.config.setModuleUrl('ace/mode/xml', modeXmlUrl)
ace.config.setModuleUrl('ace/mode/yaml', modeYamlUrl)
ace.config.setModuleUrl('ace/mode/base_worker', workerBaseUrl)
ace.config.setModuleUrl('ace/mode/json_worker', workerJsonUrl)
ace.config.setModuleUrl('ace/mode/css_worker', workerCssUrl)
ace.config.setModuleUrl('ace/mode/html_worker', workerHtmlUrl)
ace.config.setModuleUrl('ace/mode/javascript_worker', workerJsUrl)
ace.config.setModuleUrl('ace/mode/php_worker', workerPhpUrl)
ace.config.setModuleUrl('ace/mode/lua_worker', workerLuaUrl)
ace.config.setModuleUrl('ace/mode/yaml_worker', workerYamlUrl)
const value = defineModel<string>('value', { type: String, required: true })
const props = defineProps({
lang: {
type: String,
required: false,
default: 'ini'
},
height: {
type: String,
required: false,
default: '60vh'
},
readOnly: {
type: Boolean,
required: false
}
})
</script>
<template>
<v-ace-editor
v-model:value="value"
:lang="props.lang"
:options="{ useWorker: true }"
:readonly="props.readOnly"
theme="monokai"
:style="{ height: props.height }"
/>
</template>
<style scoped lang="scss"></style>

171
web/src/components/common/FileEditor.vue Normal file
View File

@@ -0,0 +1,171 @@
<script setup lang="ts">
import file from '@/api/panel/file'
import { decodeBase64 } from '@/utils'
import { languageByPath } from '@/utils/file'
import ace from 'ace-builds'
import { VAceEditor } from 'vue3-ace-editor'
import { useGettext } from 'vue3-gettext'
import extBeautifyUrl from 'ace-builds/src-min-noconflict/ext-beautify?url'
import extCodeLensUrl from 'ace-builds/src-min-noconflict/ext-code_lens?url'
import extCommandBarUrl from 'ace-builds/src-min-noconflict/ext-command_bar?url'
import extEmmetUrl from 'ace-builds/src-min-noconflict/ext-emmet?url'
import extErrorMarkerUrl from 'ace-builds/src-min-noconflict/ext-error_marker?url'
import extInlineAutocompleteUrl from 'ace-builds/src-min-noconflict/ext-inline_autocomplete?url'
import extKeybindingMenuUrl from 'ace-builds/src-min-noconflict/ext-keybinding_menu?url'
import extLanguageToolsUrl from 'ace-builds/src-min-noconflict/ext-language_tools?url'
import extSearchboxUrl from 'ace-builds/src-min-noconflict/ext-searchbox?url'
import extSettingsMenuUrl from 'ace-builds/src-min-noconflict/ext-settings_menu?url'
import extSpellcheckUrl from 'ace-builds/src-min-noconflict/ext-spellcheck?url'
import extWhitespaceUrl from 'ace-builds/src-min-noconflict/ext-whitespace?url'
import modeApacheConfUrl from 'ace-builds/src-min-noconflict/mode-apache_conf?url'
import modeCssUrl from 'ace-builds/src-min-noconflict/mode-css?url'
import modeCsvUrl from 'ace-builds/src-min-noconflict/mode-csv?url'
import modeDockerfileUrl from 'ace-builds/src-min-noconflict/mode-dockerfile?url'
import modeDotUrl from 'ace-builds/src-min-noconflict/mode-dot?url'
import modeGolangUrl from 'ace-builds/src-min-noconflict/mode-golang?url'
import modeHtmlUrl from 'ace-builds/src-min-noconflict/mode-html?url'
import modeIniUrl from 'ace-builds/src-min-noconflict/mode-ini?url'
import modeJavaUrl from 'ace-builds/src-min-noconflict/mode-java?url'
import modeJavascriptUrl from 'ace-builds/src-min-noconflict/mode-javascript?url'
import modeJsonUrl from 'ace-builds/src-min-noconflict/mode-json?url'
import modeLuaUrl from 'ace-builds/src-min-noconflict/mode-lua?url'
import modeMakefileUrl from 'ace-builds/src-min-noconflict/mode-makefile?url'
import modeMarkdownUrl from 'ace-builds/src-min-noconflict/mode-markdown?url'
import modeMySqlUrl from 'ace-builds/src-min-noconflict/mode-mysql?url'
import modeNginxUrl from 'ace-builds/src-min-noconflict/mode-nginx?url'
import modePgSqlUrl from 'ace-builds/src-min-noconflict/mode-pgsql?url'
import modePhpUrl from 'ace-builds/src-min-noconflict/mode-php?url'
import modePythonUrl from 'ace-builds/src-min-noconflict/mode-python?url'
import modeRubyUrl from 'ace-builds/src-min-noconflict/mode-ruby?url'
import modeRustUrl from 'ace-builds/src-min-noconflict/mode-rust?url'
import modeScssUrl from 'ace-builds/src-min-noconflict/mode-scss?url'
import modeShUrl from 'ace-builds/src-min-noconflict/mode-sh?url'
import modeSqlUrl from 'ace-builds/src-min-noconflict/mode-sql?url'
import modeSvgUrl from 'ace-builds/src-min-noconflict/mode-svg?url'
import modeTextUrl from 'ace-builds/src-min-noconflict/mode-text?url'
import modeTomlUrl from 'ace-builds/src-min-noconflict/mode-toml?url'
import modeTypescriptUrl from 'ace-builds/src-min-noconflict/mode-typescript?url'
import modeVueUrl from 'ace-builds/src-min-noconflict/mode-vue?url'
import modeXmlUrl from 'ace-builds/src-min-noconflict/mode-xml?url'
import modeYamlUrl from 'ace-builds/src-min-noconflict/mode-yaml?url'
import themeMonokaiUrl from 'ace-builds/src-min-noconflict/theme-monokai?url'
import workerBaseUrl from 'ace-builds/src-min-noconflict/worker-base?url'
import workerCssUrl from 'ace-builds/src-min-noconflict/worker-css?url'
import workerHtmlUrl from 'ace-builds/src-min-noconflict/worker-html?url'
import workerJsUrl from 'ace-builds/src-min-noconflict/worker-javascript?url'
import workerJsonUrl from 'ace-builds/src-min-noconflict/worker-json?url'
import workerLuaUrl from 'ace-builds/src-min-noconflict/worker-lua?url'
import workerPhpUrl from 'ace-builds/src-min-noconflict/worker-php?url'
import workerYamlUrl from 'ace-builds/src-min-noconflict/worker-yaml?url'
ace.config.setModuleUrl('ace/theme/monokai', themeMonokaiUrl)
ace.config.setModuleUrl('ace/ext/inline_autocomplete', extInlineAutocompleteUrl)
ace.config.setModuleUrl('ace/ext/emmet', extEmmetUrl)
ace.config.setModuleUrl('ace/ext/command_bar', extCommandBarUrl)
ace.config.setModuleUrl('ace/ext/code_lens', extCodeLensUrl)
ace.config.setModuleUrl('ace/ext/error_marker', extErrorMarkerUrl)
ace.config.setModuleUrl('ace/ext/spellcheck', extSpellcheckUrl)
ace.config.setModuleUrl('ace/ext/settings_menu', extSettingsMenuUrl)
ace.config.setModuleUrl('ace/ext/keybinding_menu', extKeybindingMenuUrl)
ace.config.setModuleUrl('ace/ext/whitespace', extWhitespaceUrl)
ace.config.setModuleUrl('ace/ext/beautify', extBeautifyUrl)
ace.config.setModuleUrl('ace/ext/searchbox', extSearchboxUrl)
ace.config.setModuleUrl('ace/ext/language_tools', extLanguageToolsUrl)
ace.config.setModuleUrl('ace/mode/apache_conf', modeApacheConfUrl)
ace.config.setModuleUrl('ace/mode/css', modeCssUrl)
ace.config.setModuleUrl('ace/mode/csv', modeCsvUrl)
ace.config.setModuleUrl('ace/mode/dockerfile', modeDockerfileUrl)
ace.config.setModuleUrl('ace/mode/dot', modeDotUrl)
ace.config.setModuleUrl('ace/mode/golang', modeGolangUrl)
ace.config.setModuleUrl('ace/mode/html', modeHtmlUrl)
ace.config.setModuleUrl('ace/mode/ini', modeIniUrl)
ace.config.setModuleUrl('ace/mode/java', modeJavaUrl)
ace.config.setModuleUrl('ace/mode/javascript', modeJavascriptUrl)
ace.config.setModuleUrl('ace/mode/json', modeJsonUrl)
ace.config.setModuleUrl('ace/mode/lua', modeLuaUrl)
ace.config.setModuleUrl('ace/mode/makefile', modeMakefileUrl)
ace.config.setModuleUrl('ace/mode/markdown', modeMarkdownUrl)
ace.config.setModuleUrl('ace/mode/mysql', modeMySqlUrl)
ace.config.setModuleUrl('ace/mode/nginx', modeNginxUrl)
ace.config.setModuleUrl('ace/mode/pgsql', modePgSqlUrl)
ace.config.setModuleUrl('ace/mode/php', modePhpUrl)
ace.config.setModuleUrl('ace/mode/python', modePythonUrl)
ace.config.setModuleUrl('ace/mode/ruby', modeRubyUrl)
ace.config.setModuleUrl('ace/mode/rust', modeRustUrl)
ace.config.setModuleUrl('ace/mode/scss', modeScssUrl)
ace.config.setModuleUrl('ace/mode/sh', modeShUrl)
ace.config.setModuleUrl('ace/mode/sql', modeSqlUrl)
ace.config.setModuleUrl('ace/mode/svg', modeSvgUrl)
ace.config.setModuleUrl('ace/mode/text', modeTextUrl)
ace.config.setModuleUrl('ace/mode/toml', modeTomlUrl)
ace.config.setModuleUrl('ace/mode/typescript', modeTypescriptUrl)
ace.config.setModuleUrl('ace/mode/vue', modeVueUrl)
ace.config.setModuleUrl('ace/mode/xml', modeXmlUrl)
ace.config.setModuleUrl('ace/mode/yaml', modeYamlUrl)
ace.config.setModuleUrl('ace/mode/base_worker', workerBaseUrl)
ace.config.setModuleUrl('ace/mode/json_worker', workerJsonUrl)
ace.config.setModuleUrl('ace/mode/css_worker', workerCssUrl)
ace.config.setModuleUrl('ace/mode/html_worker', workerHtmlUrl)
ace.config.setModuleUrl('ace/mode/javascript_worker', workerJsUrl)
ace.config.setModuleUrl('ace/mode/php_worker', workerPhpUrl)
ace.config.setModuleUrl('ace/mode/lua_worker', workerLuaUrl)
ace.config.setModuleUrl('ace/mode/yaml_worker', workerYamlUrl)
const { $gettext } = useGettext()
const props = defineProps({
path: {
type: String,
required: true
},
readOnly: {
type: Boolean,
required: true
}
})
const disabled = ref(false) // 在出现错误的情况下禁用保存
const content = ref('')
const get = () => {
useRequest(file.content(encodeURIComponent(props.path)))
.onSuccess(({ data }) => {
content.value = decodeBase64(data.content)
window.$message.success($gettext('Retrieved successfully'))
})
.onError(() => {
disabled.value = true
})
}
const save = () => {
if (disabled.value) {
window.$message.error($gettext('Cannot save in current state'))
return
}
useRequest(file.save(props.path, content.value)).onSuccess(() => {
window.$message.success($gettext('Saved successfully'))
})
}
onMounted(() => {
get()
})
defineExpose({
get,
save
})
</script>
<template>
<v-ace-editor
v-model:value="content"
:lang="languageByPath(props.path)"
:options="{ useWorker: true }"
theme="monokai"
style="height: 60vh"
/>
</template>
<style scoped lang="scss"></style>

59
web/src/main.ts
View File

@@ -13,61 +13,6 @@ import { gettext, setCurrent, setupNaiveDiscreteApi } from '@/utils'
import home from '@/api/panel/home'
import CronNaivePlugin from '@vue-js-cron/naive-ui'
async function loadMonacoLocale(locale: string) {
try {
switch (locale) {
case 'zh_CN':
await import('monaco-editor/esm/nls.messages.zh-cn.js')
break
case 'zh_TW':
await import('monaco-editor/esm/nls.messages.zh-tw.js')
break
default:
// 英语不需要加载
break
}
} catch (error) {
console.warn(`Failed to load monaco-editor locale: ${locale}`, error)
}
}
async function setupMonacoEditor(app: any) {
const [editorWorker, jsonWorker, cssWorker, htmlWorker, tsWorker] = await Promise.all([
import('monaco-editor/esm/vs/editor/editor.worker?worker'),
import('monaco-editor/esm/vs/language/json/json.worker?worker'),
import('monaco-editor/esm/vs/language/css/css.worker?worker'),
import('monaco-editor/esm/vs/language/html/html.worker?worker'),
import('monaco-editor/esm/vs/language/typescript/ts.worker?worker')
])
self.MonacoEnvironment = {
getWorker(_: any, label: string) {
if (label === 'json') {
return new jsonWorker.default()
}
if (label === 'css' || label === 'scss' || label === 'less') {
return new cssWorker.default()
}
if (label === 'html' || label === 'handlebars' || label === 'razor') {
return new htmlWorker.default()
}
if (label === 'typescript' || label === 'javascript') {
return new tsWorker.default()
}
return new editorWorker.default()
}
}
const [{ install: VueMonacoEditorPlugin }, monaco] = await Promise.all([
import('@guolao/vue-monaco-editor'),
import('monaco-editor')
])
app.use(VueMonacoEditorPlugin, {
monaco
})
}
async function setupApp() {
const app = createApp(App)
app.use(CronNaivePlugin)
@@ -78,8 +23,6 @@ async function setupApp() {
app.use(gettext)
})
await setupMonacoEditor(app)
await setupRouter(app)
app.mount('#app')
}
@@ -95,8 +38,6 @@ const setupPanel = async () => {
locale: 'en'
}
}).onSuccess(async ({ data }: { data: any }) => {
await loadMonacoLocale(data.locale)
setCurrent(data.locale)
themeStore.setLocale(data.locale)
themeStore.setName(data.name)

13
web/src/views/apps/codeserver/IndexView.vue
View File

@@ -3,7 +3,6 @@ defineOptions({
name: 'apps-codeserver-index'
})
import Editor from '@guolao/vue-monaco-editor'
import { NButton } from 'naive-ui'
import { useGettext } from 'vue3-gettext'
@@ -41,17 +40,7 @@ const handleSaveConfig = () => {
)
}}
</n-alert>
<Editor
v-model:value="config"
language="ini"
theme="vs-dark"
height="60vh"
mt-8
:options="{
automaticLayout: true,
smoothScrolling: true
}"
/>
<common-editor v-model:value="config" height="60vh" />
<n-flex>
<n-button type="primary" @click="handleSaveConfig">
{{ $gettext('Save') }}

13
web/src/views/apps/docker/IndexView.vue
View File

@@ -3,7 +3,6 @@ defineOptions({
name: 'apps-docker-index'
})
import Editor from '@guolao/vue-monaco-editor'
import { NButton } from 'naive-ui'
import { useGettext } from 'vue3-gettext'
@@ -37,17 +36,7 @@ const handleSaveConfig = () => {
<n-alert type="warning">
{{ $gettext('This modifies the Docker configuration file (/etc/docker/daemon.json)') }}
</n-alert>
<Editor
v-model:value="config"
language="ini"
theme="vs-dark"
height="60vh"
mt-8
:options="{
automaticLayout: true,
smoothScrolling: true
}"
/>
<common-editor v-model:value="config" height="60vh" />
<n-flex>
<n-button type="primary" @click="handleSaveConfig">
{{ $gettext('Save') }}

25
web/src/views/apps/frp/IndexView.vue
View File

@@ -3,7 +3,6 @@ defineOptions({
name: 'apps-frp-index'
})
import Editor from '@guolao/vue-monaco-editor'
import { NButton } from 'naive-ui'
import { useGettext } from 'vue3-gettext'
@@ -47,17 +46,7 @@ onMounted(() => {
{{ $gettext('Save') }}
</n-button>
</template>
<Editor
v-model:value="config.frps"
language="ini"
theme="vs-dark"
height="60vh"
mt-8
:options="{
automaticLayout: true,
smoothScrolling: true
}"
/>
<common-editor v-model:value="config.frps" height="60vh" />
</n-card>
</n-flex>
</n-tab-pane>
@@ -70,17 +59,7 @@ onMounted(() => {
{{ $gettext('Save') }}
</n-button>
</template>
<Editor
v-model:value="config.frpc"
language="ini"
theme="vs-dark"
height="60vh"
mt-8
:options="{
automaticLayout: true,
smoothScrolling: true
}"
/>
<common-editor v-model:value="config.frpc" height="60vh" />
</n-card>
</n-flex>
</n-tab-pane>

13
web/src/views/apps/gitea/IndexView.vue
View File

@@ -3,7 +3,6 @@ defineOptions({
name: 'apps-gitea-index'
})
import Editor from '@guolao/vue-monaco-editor'
import { NButton } from 'naive-ui'
import { useGettext } from 'vue3-gettext'
@@ -39,17 +38,7 @@ const handleSaveConfig = () => {
)
}}
</n-alert>
<Editor
v-model:value="config"
language="ini"
theme="vs-dark"
height="60vh"
mt-8
:options="{
automaticLayout: true,
smoothScrolling: true
}"
/>
<common-editor v-model:value="config" height="60vh" />
<n-flex>
<n-button type="primary" @click="handleSaveConfig">
{{ $gettext('Save') }}

13
web/src/views/apps/memcached/IndexView.vue
View File

@@ -3,7 +3,6 @@ defineOptions({
name: 'apps-memcached-index'
})
import Editor from '@guolao/vue-monaco-editor'
import { NButton, NDataTable } from 'naive-ui'
import { useGettext } from 'vue3-gettext'
@@ -54,17 +53,7 @@ const handleSaveConfig = () => {
</n-tab-pane>
<n-tab-pane name="config" :tab="$gettext('Service Configuration')">
<n-flex vertical>
<Editor
v-model:value="config"
language="ini"
theme="vs-dark"
height="60vh"
mt-8
:options="{
automaticLayout: true,
smoothScrolling: true
}"
/>
<common-editor v-model:value="config" height="60vh" />
<n-flex>
<n-button type="primary" @click="handleSaveConfig">
{{ $gettext('Save') }}

13
web/src/views/apps/minio/IndexView.vue
View File

@@ -3,7 +3,6 @@ defineOptions({
name: 'apps-minio-index'
})
import Editor from '@guolao/vue-monaco-editor'
import { NButton } from 'naive-ui'
import { useGettext } from 'vue3-gettext'
@@ -39,17 +38,7 @@ const handleSaveEnv = () => {
)
}}
</n-alert>
<Editor
v-model:value="env"
language="ini"
theme="vs-dark"
height="60vh"
mt-8
:options="{
automaticLayout: true,
smoothScrolling: true
}"
/>
<common-editor v-model:value="env" height="60vh" />
<n-flex>
<n-button type="primary" @click="handleSaveEnv">
{{ $gettext('Save') }}

13
web/src/views/apps/mysql/IndexView.vue
View File

@@ -3,7 +3,6 @@ defineOptions({
name: 'apps-mysql-index'
})
import Editor from '@guolao/vue-monaco-editor'
import { NButton, NDataTable, NInput } from 'naive-ui'
import { useGettext } from 'vue3-gettext'
@@ -91,17 +90,7 @@ const handleSetRootPassword = async () => {
)
}}
</n-alert>
<Editor
v-model:value="config"
language="ini"
theme="vs-dark"
height="60vh"
mt-8
:options="{
automaticLayout: true,
smoothScrolling: true
}"
/>
<common-editor v-model:value="config" height="60vh" />
<n-flex>
<n-button type="primary" @click="handleSaveConfig">
{{ $gettext('Save') }}

13
web/src/views/apps/nginx/IndexView.vue
View File

@@ -3,7 +3,6 @@ defineOptions({
name: 'apps-nginx-index'
})
import Editor from '@guolao/vue-monaco-editor'
import { NButton, NDataTable } from 'naive-ui'
import { useGettext } from 'vue3-gettext'
@@ -67,17 +66,7 @@ const handleClearErrorLog = () => {
)
}}
</n-alert>
<Editor
v-model:value="config"
language="ini"
theme="vs-dark"
height="60vh"
mt-8
:options="{
automaticLayout: true,
smoothScrolling: true
}"
/>
<common-editor v-model:value="config" lang="nginx" height="60vh" />
<n-flex>
<n-button type="primary" @click="handleSaveConfig">
{{ $gettext('Save') }}

25
web/src/views/apps/php/PhpView.vue
View File

@@ -1,5 +1,4 @@
<script setup lang="ts">
import Editor from '@guolao/vue-monaco-editor'
import { NButton, NDataTable, NPopconfirm } from 'naive-ui'
import { useGettext } from 'vue3-gettext'
@@ -209,17 +208,7 @@ const handleUninstallExtension = async (name: string) => {
)
}}
</n-alert>
<Editor
v-model:value="config"
language="ini"
theme="vs-dark"
height="60vh"
mt-8
:options="{
automaticLayout: true,
smoothScrolling: true
}"
/>
<common-editor v-model:value="config" height="60vh" />
<n-flex>
<n-button type="primary" @click="handleSaveConfig">
{{ $gettext('Save') }}
@@ -237,17 +226,7 @@ const handleUninstallExtension = async (name: string) => {
)
}}
</n-alert>
<Editor
v-model:value="fpmConfig"
language="ini"
theme="vs-dark"
height="60vh"
mt-8
:options="{
automaticLayout: true,
smoothScrolling: true
}"
/>
<common-editor v-model:value="fpmConfig" height="60vh" />
<n-flex>
<n-button type="primary" @click="handleSaveFPMConfig">
{{ $gettext('Save') }}

13
web/src/views/apps/phpmyadmin/IndexView.vue
View File

@@ -3,7 +3,6 @@ defineOptions({
name: 'apps-phpmyadmin-index'
})
import Editor from '@guolao/vue-monaco-editor'
import { NButton } from 'naive-ui'
import { useGettext } from 'vue3-gettext'
@@ -80,17 +79,7 @@ onMounted(() => {
)
}}
</n-alert>
<Editor
v-model:value="config"
language="ini"
theme="vs-dark"
height="60vh"
mt-8
:options="{
automaticLayout: true,
smoothScrolling: true
}"
/>
<common-editor v-model:value="config" height="60vh" />
<n-flex>
<n-button type="primary" @click="handleSaveConfig">
{{ $gettext('Save') }}

25
web/src/views/apps/podman/IndexView.vue
View File

@@ -3,7 +3,6 @@ defineOptions({
name: 'apps-podman-index'
})
import Editor from '@guolao/vue-monaco-editor'
import { NButton } from 'naive-ui'
import { useGettext } from 'vue3-gettext'
@@ -58,17 +57,7 @@ const handleSaveStorageConfig = () => {
)
}}
</n-alert>
<Editor
v-model:value="registryConfig"
language="ini"
theme="vs-dark"
height="60vh"
mt-8
:options="{
automaticLayout: true,
smoothScrolling: true
}"
/>
<common-editor v-model:value="registryConfig" height="60vh" />
<n-flex>
<n-button type="primary" @click="handleSaveRegistryConfig">
{{ $gettext('Save') }}
@@ -85,17 +74,7 @@ const handleSaveStorageConfig = () => {
)
}}
</n-alert>
<Editor
v-model:value="storageConfig"
language="ini"
theme="vs-dark"
height="60vh"
mt-8
:options="{
automaticLayout: true,
smoothScrolling: true
}"
/>
<common-editor v-model:value="storageConfig" height="60vh" />
<n-flex>
<n-button type="primary" @click="handleSaveStorageConfig">
{{ $gettext('Save') }}

25
web/src/views/apps/postgresql/IndexView.vue
View File

@@ -3,7 +3,6 @@ defineOptions({
name: 'apps-postgresql-index'
})
import Editor from '@guolao/vue-monaco-editor'
import { NButton, NDataTable } from 'naive-ui'
import { useGettext } from 'vue3-gettext'
@@ -73,17 +72,7 @@ const handleClearLog = async () => {
)
}}
</n-alert>
<Editor
v-model:value="config"
language="ini"
theme="vs-dark"
height="60vh"
mt-8
:options="{
automaticLayout: true,
smoothScrolling: true
}"
/>
<common-editor v-model:value="config" height="60vh" />
<n-flex>
<n-button type="primary" @click="handleSaveConfig">
{{ $gettext('Save') }}
@@ -100,17 +89,7 @@ const handleClearLog = async () => {
)
}}
</n-alert>
<Editor
v-model:value="userConfig"
language="ini"
theme="vs-dark"
height="60vh"
mt-8
:options="{
automaticLayout: true,
smoothScrolling: true
}"
/>
<common-editor v-model:value="userConfig" height="60vh" />
<n-flex>
<n-button type="primary" @click="handleSaveUserConfig">
{{ $gettext('Save') }}

13
web/src/views/apps/redis/IndexView.vue
View File

@@ -3,7 +3,6 @@ defineOptions({
name: 'apps-redis-index'
})
import Editor from '@guolao/vue-monaco-editor'
import { NButton, NDataTable } from 'naive-ui'
import { useGettext } from 'vue3-gettext'
@@ -58,17 +57,7 @@ const handleSaveConfig = () => {
)
}}
</n-alert>
<Editor
v-model:value="config"
language="ini"
theme="vs-dark"
height="60vh"
mt-8
:options="{
automaticLayout: true,
smoothScrolling: true
}"
/>
<common-editor v-model:value="config" height="60vh" />
<n-flex>
<n-button type="primary" @click="handleSaveConfig">
{{ $gettext('Save') }}

13
web/src/views/apps/rsync/IndexView.vue
View File

@@ -3,7 +3,6 @@ defineOptions({
name: 'apps-rsync-index'
})
import Editor from '@guolao/vue-monaco-editor'
import { NButton, NDataTable, NInput, NPopconfirm } from 'naive-ui'
import { useGettext } from 'vue3-gettext'
@@ -230,17 +229,7 @@ onMounted(() => {
)
}}
</n-alert>
<Editor
v-model:value="config"
language="ini"
theme="vs-dark"
height="60vh"
mt-8
:options="{
automaticLayout: true,
smoothScrolling: true
}"
/>
<common-editor v-model:value="config" height="60vh" />
<n-flex>
<n-button type="primary" @click="handleSaveConfig">
{{ $gettext('Save') }}

25
web/src/views/apps/supervisor/IndexView.vue
View File

@@ -3,7 +3,6 @@ defineOptions({
name: 'apps-supervisor-index'
})
import Editor from '@guolao/vue-monaco-editor'
import { NButton, NDataTable, NInput, NPopconfirm } from 'naive-ui'
import { useGettext } from 'vue3-gettext'
@@ -337,17 +336,7 @@ onUnmounted(() => {
)
}}
</n-alert>
<Editor
v-model:value="config"
language="ini"
theme="vs-dark"
height="60vh"
mt-8
:options="{
automaticLayout: true,
smoothScrolling: true
}"
/>
<common-editor v-model:value="config" height="60vh" />
<n-flex>
<n-button type="primary" @click="handleSaveConfig">
{{ $gettext('Save') }}
@@ -430,16 +419,6 @@ onUnmounted(() => {
:segmented="false"
@close="handleSaveProcessConfig"
>
<Editor
v-model:value="editProcessModel.config"
language="ini"
theme="vs-dark"
height="60vh"
mt-8
:options="{
automaticLayout: true,
smoothScrolling: true
}"
/>
<common-editor v-model:value="editProcessModel.config" height="60vh" />
</n-modal>
</template>

23
web/src/views/cert/CertView.vue
View File

@@ -1,5 +1,4 @@
<script setup lang="ts">
import Editor from '@guolao/vue-monaco-editor'
import type { MessageReactive } from 'naive-ui'
import { NButton, NDataTable, NFlex, NPopconfirm, NSpace, NSwitch, NTag } from 'naive-ui'
import { useGettext } from 'vue3-gettext'
@@ -572,28 +571,10 @@ onUnmounted(() => {
>
<n-tabs type="line" animated>
<n-tab-pane name="cert" :tab="$gettext('Certificate')">
<Editor
v-model:value="showModel.cert"
theme="vs-dark"
height="60vh"
mt-8
:options="{
readOnly: true,
automaticLayout: true
}"
/>
<common-editor v-model:value="showModel.cert" height="60vh" read-only />
</n-tab-pane>
<n-tab-pane name="key" :tab="$gettext('Private Key')">
<Editor
v-model:value="showModel.key"
theme="vs-dark"
height="60vh"
mt-8
:options="{
readOnly: true,
automaticLayout: true
}"
/>
<common-editor v-model:value="showModel.key" height="60vh" read-only />
</n-tab-pane>
</n-tabs>
</n-modal>

14
web/src/views/container/ContainerView.vue
View File

@@ -1,5 +1,4 @@
<script setup lang="ts">
import Editor from '@guolao/vue-monaco-editor'
import { NButton, NDataTable, NDropdown, NFlex, NInput, NSwitch, NTag } from 'naive-ui'
import { useGettext } from 'vue3-gettext'
@@ -449,18 +448,7 @@ onMounted(() => {
:bordered="false"
:segmented="false"
>
<Editor
v-model:value="logs"
language="ini"
theme="vs-dark"
height="60vh"
mt-8
:options="{
automaticLayout: true,
smoothScrolling: true,
readOnly: true
}"
/>
<common-editor v-model:value="logs" height="60vh" read-only />
</n-modal>
<n-modal
v-model:show="renameModal"

3
web/src/views/file/EditModal.vue
View File

@@ -1,4 +1,5 @@
<script setup lang="ts">
import FileEditor from '@/components/common/FileEditor.vue'
import { useGettext } from 'vue3-gettext'
const { $gettext } = useGettext()
@@ -31,7 +32,7 @@ const handleSave = () => {
<n-button type="primary" @click="handleSave"> {{ $gettext('Save') }} </n-button>
</n-flex>
</template>
<code-editor ref="editor" :path="file" :read-only="false" />
<file-editor ref="editor" :path="file" :read-only="false" />
</n-modal>
</template>

13
web/src/views/task/CreateModal.vue
View File

@@ -3,7 +3,6 @@ import app from '@/api/panel/app'
import cron from '@/api/panel/cron'
import home from '@/api/panel/home'
import website from '@/api/panel/website'
import Editor from '@guolao/vue-monaco-editor'
import { CronNaive } from '@vue-js-cron/naive-ui'
import { NInput } from 'naive-ui'
import { useGettext } from 'vue3-gettext'
@@ -112,17 +111,7 @@ onMounted(() => {
</n-form-item>
<div v-if="createModel.type === 'shell'">
<n-text>{{ $gettext('Script Content') }}</n-text>
<Editor
v-model:value="createModel.script"
language="shell"
theme="vs-dark"
height="40vh"
mt-8
:options="{
automaticLayout: true,
smoothScrolling: true
}"
/>
<common-editor v-model:value="createModel.script" lang="sh" height="40vh" />
</div>
<n-form-item v-if="createModel.type === 'backup'" :label="$gettext('Backup Type')">
<n-radio-group v-model:value="createModel.backup_type">

13
web/src/views/task/CronView.vue
View File

@@ -2,7 +2,6 @@
import cronstrue from 'cronstrue'
import 'cronstrue/locales/zh_CN'
import Editor from '@guolao/vue-monaco-editor'
import { NButton, NDataTable, NInput, NPopconfirm, NSwitch, NTag } from 'naive-ui'
import { useGettext } from 'vue3-gettext'
@@ -258,16 +257,6 @@ onUnmounted(() => {
<cron-naive v-model="editTask.time" locale="zh-cn"></cron-naive>
</n-form-item>
</n-form>
<Editor
v-model:value="editTask.script"
language="shell"
theme="vs-dark"
height="60vh"
mt-8
:options="{
automaticLayout: true,
smoothScrolling: true
}"
/>
<common-editor v-model:value="editTask.script" height="60vh" />
</n-modal>
</template>

13
web/src/views/toolbox/SystemView.vue
View File

@@ -3,7 +3,6 @@ defineOptions({
name: 'toolbox-system'
})
import Editor from '@guolao/vue-monaco-editor'
import { DateTime } from 'luxon'
import { useGettext } from 'vue3-gettext'
@@ -143,17 +142,7 @@ const handleSyncTime = () => {
/>
</n-form-item>
<n-form-item :label="$gettext('Hosts')">
<Editor
v-model:value="hosts"
language="ini"
theme="vs-dark"
height="60vh"
mt-8
:options="{
automaticLayout: true,
smoothScrolling: true
}"
/>
<common-editor v-model:value="hosts" height="60vh" />
</n-form-item>
</n-form>
<n-button type="primary" @click="handleUpdateHost">

13
web/src/views/website/EditView.vue
View File

@@ -3,7 +3,6 @@ defineOptions({
name: 'website-edit'
})
import Editor from '@guolao/vue-monaco-editor'
import type { MessageReactive } from 'naive-ui'
import { NButton } from 'naive-ui'
import { useGettext } from 'vue3-gettext'
@@ -356,17 +355,7 @@ const hasArg = (args: string[], arg: string) => {
/>
</n-form-item>
</n-form>
<Editor
v-if="setting"
v-model:value="setting.rewrite"
language="ini"
theme="vs-dark"
height="60vh"
:options="{
automaticLayout: true,
smoothScrolling: true
}"
/>
<common-editor v-if="setting" v-model:content="setting.rewrite" height="60vh" />
</n-flex>
</n-tab-pane>
<n-tab-pane name="config" :tab="$gettext('Configuration')">

37
web/src/views/website/SettingView.vue
View File

@@ -1,6 +1,5 @@
<script setup lang="ts">
import website from '@/api/panel/website'
import Editor from '@guolao/vue-monaco-editor'
import { useGettext } from 'vue3-gettext'
const { $gettext } = useGettext()
@@ -39,17 +38,7 @@ onMounted(() => {
<n-tabs v-model:value="currentTab" type="line" placement="left" animated>
<n-tab-pane name="default-page" :tab="$gettext('Default Page')">
<n-flex vertical>
<Editor
v-model:value="defaultPageModel.index"
language="html"
theme="vs-dark"
height="60vh"
mt-8
:options="{
automaticLayout: true,
smoothScrolling: true
}"
/>
<common-editor v-model:value="defaultPageModel.index" height="60vh" />
<n-flex>
<n-button type="primary">
{{ $gettext('Save Changes') }}
@@ -59,17 +48,7 @@ onMounted(() => {
</n-tab-pane>
<n-tab-pane name="404-page" :tab="$gettext('404 Page')">
<n-flex>
<Editor
v-model:value="defaultPageModel.not_found"
language="html"
theme="vs-dark"
height="60vh"
mt-8
:options="{
automaticLayout: true,
smoothScrolling: true
}"
/>
<common-editor v-model:value="defaultPageModel.not_found" height="60vh" />
<n-flex>
<n-button type="primary">
{{ $gettext('Save Changes') }}
@@ -79,17 +58,7 @@ onMounted(() => {
</n-tab-pane>
<n-tab-pane name="stop-page" :tab="$gettext('Stop Page')">
<n-flex>
<Editor
v-model:value="defaultPageModel.stop"
language="html"
theme="vs-dark"
height="60vh"
mt-8
:options="{
automaticLayout: true,
smoothScrolling: true
}"
/>
<common-editor v-model:value="defaultPageModel.stop" height="60vh" />
<n-flex>
<n-button type="primary">
{{ $gettext('Save Changes') }}

25
web/types/monaco.d.ts vendored
View File

@@ -1,25 +0,0 @@
// Monaco Editor 本地化模块声明
declare module 'monaco-editor/esm/nls.messages.zh-cn.js'
declare module 'monaco-editor/esm/nls.messages.zh-tw.js'
// Monaco Editor Worker 模块声明
declare module 'monaco-editor/esm/vs/editor/editor.worker?worker' {
const EditorWorker: new () => Worker
export default EditorWorker
}
declare module 'monaco-editor/esm/vs/language/json/json.worker?worker' {
const JsonWorker: new () => Worker
export default JsonWorker
}
declare module 'monaco-editor/esm/vs/language/css/css.worker?worker' {
const CssWorker: new () => Worker
export default CssWorker
}
declare module 'monaco-editor/esm/vs/language/html/html.worker?worker' {
const HtmlWorker: new () => Worker
export default HtmlWorker
}
declare module 'monaco-editor/esm/vs/language/typescript/ts.worker?worker' {
const TsWorker: new () => Worker
export default TsWorker
}