feat: 重构monaco-editor加载

web/build/plugins/copy.ts

@@ -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'
-      }
-    ]
-  })
-}

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)]
 }

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

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

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<void>((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()
+    })
   })
 }
 

web/src/views/task/CreateModal.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import app from '@/api/panel/app'
 import cron from '@/api/panel/cron'
-import dashboard from '@/api/panel/home'
+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'
@@ -25,7 +25,7 @@ const createModel = ref({
 
 const websites = ref<any>([])
 
-const { data: installedDbAndPhp } = useRequest(dashboard.installedDbAndPhp, {
+const { data: installedDbAndPhp } = useRequest(home.installedDbAndPhp, {
   initialData: {
     db: [
       {

web/src/views/website/EditView.vue

@@ -9,7 +9,7 @@ import { NButton } from 'naive-ui'
 import { useGettext } from 'vue3-gettext'
 
 import cert from '@/api/panel/cert'
-import dashboard from '@/api/panel/home'
+import home from '@/api/panel/home'
 import website from '@/api/panel/website'
 import ProxyBuilderModal from '@/views/website/ProxyBuilderModal.vue'
 
@@ -47,7 +47,7 @@ const { data: setting, send: fetchSetting } = useRequest(website.config(Number(i
     error_log: ''
   }
 })
-const { data: installedDbAndPhp } = useRequest(dashboard.installedDbAndPhp, {
+const { data: installedDbAndPhp } = useRequest(home.installedDbAndPhp, {
   initialData: {
     php: [
       {

web/src/views/website/IndexView.vue

@@ -14,7 +14,7 @@ const currentTab = ref('proxy')
     <template #tabbar>
       <n-tabs v-model:value="currentTab" animated>
         <n-tab name="proxy" :tab="$gettext('Reverse Proxy')" />
-        <n-tab name="php" :tab="$gettext('Classic PHP')" />
+        <n-tab name="php" :tab="$gettext('PHP')" />
         <n-tab name="static" :tab="$gettext('Pure Static')" />
         <n-tab name="setting" :tab="$gettext('Settings')" />
       </n-tabs>

web/src/views/website/PhpView.vue

@@ -2,7 +2,7 @@
 import { NButton, NCheckbox, NDataTable, NFlex, NInput, NPopconfirm, NSwitch, NTag } from 'naive-ui'
 import { useGettext } from 'vue3-gettext'
 
-import dashboard from '@/api/panel/home'
+import home from '@/api/panel/home'
 import website from '@/api/panel/website'
 import { useFileStore } from '@/store'
 import { generateRandomString, isNullOrUndef } from '@/utils'
@@ -222,7 +222,7 @@ const deleteModel = ref({
   db: false
 })
 
-const { data: installedDbAndPhp } = useRequest(dashboard.installedDbAndPhp, {
+const { data: installedDbAndPhp } = useRequest(home.installedDbAndPhp, {
   initialData: {
     php: [
       {

web/types/monaco.d.ts

@@ -0,0 +1,25 @@
+// 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
+}