From 748c82af1d81bb1416122f95db9885393c04bc4c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=80=97=E5=AD=90?= Date: Mon, 1 Dec 2025 21:05:09 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E9=87=8D=E6=9E=84monaco-editor?= =?UTF-8?q?=E5=8A=A0=E8=BD=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- web/build/plugins/copy.ts | 12 ---- web/build/plugins/index.ts | 3 +- web/package.json | 3 +- web/pnpm-lock.yaml | 23 +------ web/src/main.ts | 96 +++++++++++++++++++++++------ web/src/views/task/CreateModal.vue | 4 +- web/src/views/website/EditView.vue | 4 +- web/src/views/website/IndexView.vue | 2 +- web/src/views/website/PhpView.vue | 4 +- web/types/monaco.d.ts | 25 ++++++++ 10 files changed, 113 insertions(+), 63 deletions(-) delete mode 100644 web/build/plugins/copy.ts create mode 100644 web/types/monaco.d.ts diff --git a/web/build/plugins/copy.ts b/web/build/plugins/copy.ts deleted file mode 100644 index 021f4816..00000000 --- a/web/build/plugins/copy.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { viteStaticCopy } from 'vite-plugin-static-copy' - -export function setupStaticCopyPlugin() { - return viteStaticCopy({ - targets: [ - { - src: 'node_modules/monaco-editor/min/vs', - dest: 'assets' - } - ] - }) -} diff --git a/web/build/plugins/index.ts b/web/build/plugins/index.ts index 62852778..fadba2c6 100644 --- a/web/build/plugins/index.ts +++ b/web/build/plugins/index.ts @@ -3,10 +3,9 @@ import vue from '@vitejs/plugin-vue' import unocss from 'unocss/vite' import vueDevTools from 'vite-plugin-vue-devtools' -import { setupStaticCopyPlugin } from './copy' import { setupHtmlPlugin } from './html' import unplugins from './unplugin' export function setupVitePlugins(viteEnv: ViteEnv): PluginOption[] { - return [vue(), vueDevTools(), ...unplugins, unocss(), setupStaticCopyPlugin(), setupHtmlPlugin(viteEnv)] + return [vue(), vueDevTools(), ...unplugins, unocss(), setupHtmlPlugin(viteEnv)] } diff --git a/web/package.json b/web/package.json index 989e43f5..70f4eda5 100644 --- a/web/package.json +++ b/web/package.json @@ -47,6 +47,7 @@ "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", @@ -75,7 +76,6 @@ "eslint": "^9.38.0", "eslint-plugin-vue": "^10.5.1", "md-editor-v3": "^6.1.0", - "monaco-editor": "^0.55.0", "naive-ui": "^2.43.1", "npm-run-all2": "^8.0.4", "prettier": "^3.6.2", @@ -90,7 +90,6 @@ "vite": "^7.1.11", "vite-plugin-html": "^3.2.2", "vite-plugin-mock": "^3.0.2", - "vite-plugin-static-copy": "^3.1.4", "vite-plugin-vue-devtools": "^8.0.3", "vue-tsc": "^3.1.1" }, diff --git a/web/pnpm-lock.yaml b/web/pnpm-lock.yaml index a7a2ca93..b319ecb3 100644 --- a/web/pnpm-lock.yaml +++ b/web/pnpm-lock.yaml @@ -74,6 +74,9 @@ 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.2 @@ -153,9 +156,6 @@ importers: md-editor-v3: specifier: ^6.1.0 version: 6.2.0(vue@3.5.25(typescript@5.9.3)) - monaco-editor: - specifier: ^0.55.0 - version: 0.55.1 naive-ui: specifier: ^2.43.1 version: 2.43.2(vue@3.5.25(typescript@5.9.3)) @@ -198,9 +198,6 @@ importers: vite-plugin-mock: specifier: ^3.0.2 version: 3.0.2(esbuild@0.27.0)(mockjs@1.1.0)(vite@7.2.6(@types/node@24.10.1)(jiti@2.6.1)(sass@1.94.2)(terser@5.44.1)(tsx@4.21.0)) - vite-plugin-static-copy: - specifier: ^3.1.4 - version: 3.1.4(vite@7.2.6(@types/node@24.10.1)(jiti@2.6.1)(sass@1.94.2)(terser@5.44.1)(tsx@4.21.0)) vite-plugin-vue-devtools: specifier: ^8.0.3 version: 8.0.5(vite@7.2.6(@types/node@24.10.1)(jiti@2.6.1)(sass@1.94.2)(terser@5.44.1)(tsx@4.21.0))(vue@3.5.25(typescript@5.9.3)) @@ -3434,12 +3431,6 @@ packages: mockjs: '>=1.1.0' vite: '>=4.0.0' - vite-plugin-static-copy@3.1.4: - resolution: {integrity: sha512-iCmr4GSw4eSnaB+G8zc2f4dxSuDjbkjwpuBLLGvQYR9IW7rnDzftnUjOH5p4RYR+d4GsiBqXRvzuFhs5bnzVyw==} - engines: {node: ^18.0.0 || >=20.0.0} - peerDependencies: - vite: ^5.0.0 || ^6.0.0 || ^7.0.0 - vite-plugin-vue-devtools@8.0.5: resolution: {integrity: sha512-p619BlKFOqQXJ6uDWS1vUPQzuJOD6xJTfftj57JXBGoBD/yeQCowR7pnWcr/FEX4/HVkFbreI6w2uuGBmQOh6A==} engines: {node: '>=v14.21.3'} @@ -7244,14 +7235,6 @@ snapshots: transitivePeerDependencies: - supports-color - vite-plugin-static-copy@3.1.4(vite@7.2.6(@types/node@24.10.1)(jiti@2.6.1)(sass@1.94.2)(terser@5.44.1)(tsx@4.21.0)): - dependencies: - chokidar: 3.6.0 - p-map: 7.0.4 - picocolors: 1.1.1 - tinyglobby: 0.2.15 - vite: 7.2.6(@types/node@24.10.1)(jiti@2.6.1)(sass@1.94.2)(terser@5.44.1)(tsx@4.21.0) - vite-plugin-vue-devtools@8.0.5(vite@7.2.6(@types/node@24.10.1)(jiti@2.6.1)(sass@1.94.2)(terser@5.44.1)(tsx@4.21.0))(vue@3.5.25(typescript@5.9.3)): dependencies: '@vue/devtools-core': 8.0.5(vite@7.2.6(@types/node@24.10.1)(jiti@2.6.1)(sass@1.94.2)(terser@5.44.1)(tsx@4.21.0))(vue@3.5.25(typescript@5.9.3)) diff --git a/web/src/main.ts b/web/src/main.ts index 86b1c934..9c8f2001 100644 --- a/web/src/main.ts +++ b/web/src/main.ts @@ -10,27 +10,76 @@ import { setupRouter } from '@/router' import { setupStore, useThemeStore } from '@/store' import { gettext, setCurrent, setupNaiveDiscreteApi } from '@/utils' -import { install as VueMonacoEditorPlugin } from '@guolao/vue-monaco-editor' - -import dashboard from '@/api/panel/home' +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(VueMonacoEditorPlugin, { - paths: { - vs: window.location.origin + '/assets/vs' - }, - 'vs/nls': { - availableLanguages: { '*': 'zh-cn' } - } - }) app.use(CronNaivePlugin) await setupStore(app) await setupNaiveDiscreteApi() + await setupPanel().then(() => { app.use(gettext) }) + + await setupMonacoEditor(app) + await setupRouter(app) app.mount('#app') } @@ -38,15 +87,22 @@ async function setupApp() { const setupPanel = async () => { const themeStore = useThemeStore() setCurrent(themeStore.locale) - useRequest(dashboard.panel, { - initialData: { - name: import.meta.env.VITE_APP_TITLE, - locale: 'zh_CN' - } - }).onSuccess(({ data }: { data: any }) => { - setCurrent(data.locale) - themeStore.setLocale(data.locale) - themeStore.setName(data.name) + + return new Promise((resolve) => { + useRequest(home.panel, { + initialData: { + name: import.meta.env.VITE_APP_TITLE, + locale: 'en' + } + }).onSuccess(async ({ data }: { data: any }) => { + await loadMonacoLocale(data.locale) + + setCurrent(data.locale) + themeStore.setLocale(data.locale) + themeStore.setName(data.name) + + resolve() + }) }) } diff --git a/web/src/views/task/CreateModal.vue b/web/src/views/task/CreateModal.vue index 593213eb..72f1fcb2 100644 --- a/web/src/views/task/CreateModal.vue +++ b/web/src/views/task/CreateModal.vue @@ -1,7 +1,7 @@