temp:新增日志编辑器组件(未测试)

package.json

@@ -86,7 +86,7 @@
     "unocss": "^66.3.3",
     "unplugin-auto-import": "^20.0.0",
     "unplugin-vue-components": "^28.8.0",
-    "vite": "npm:rolldown-vite@^7.0.9",
+    "vite": "npm:rolldown-vite@^7.3.1",
     "vite-plugin-compression": "^0.5.1",
     "vite-plugin-html": "^3.2.2",
     "vite-plugin-vue-devtools": "^7.7.7",

src/utils/log-monaco/LogMonacoEditor.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { onMounted, onBeforeUnmount, ref, watch } from 'vue'
+import * as monaco from 'monaco-editor'
+import { initMonaco } from '.'
+import { createEditor, createModel } from './editor'
+import { LOG_LANGUAGE_ID } from './languages/log'
+
+const props = defineProps<{
+  modelValue: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', v: string): void
+}>()
+
+const container = ref<HTMLDivElement>()
+
+let editor: monaco.editor.IStandaloneCodeEditor
+let model: monaco.editor.ITextModel
+
+onMounted(() => {
+  initMonaco()
+
+  model = createModel(props.modelValue, LOG_LANGUAGE_ID)
+
+  editor = createEditor(container.value!, {
+    model,
+    theme: 'log-dark',
+    readOnly: false
+  })
+
+  editor.onDidChangeModelContent(() => {
+    emit('update:modelValue', model.getValue())
+  })
+})
+
+watch(
+  () => props.modelValue,
+  v => {
+    if (v !== model?.getValue()) {
+      model?.setValue(v)
+    }
+  }
+)
+
+onBeforeUnmount(() => {
+  editor?.dispose()
+  model?.dispose()
+})
+</script>
+
+<template>
+  <div ref="container" style="width: 100%; height: 100%" />
+</template>

src/utils/log-monaco/decorations/index.ts

@@ -0,0 +1,5 @@
+
+
+export function registerDecorations() {
+
+}

src/utils/log-monaco/editor.ts

@@ -0,0 +1,28 @@
+import * as monaco from 'monaco-editor'
+
+export function createEditor(
+  el: HTMLElement,
+  options: monaco.editor.IStandaloneEditorConstructionOptions
+) {
+  return monaco.editor.create(el, {
+    // 默认选项
+    automaticLayout: true,
+    minimap: { enabled: false },
+    scrollBeyondLastLine: false,
+    fontSize: 13,
+    glyphMargin: true,
+    ...options
+  })
+}
+
+export function createModel(
+  value: string,
+  language: string,
+  uri?: string
+) {
+  return monaco.editor.createModel(
+    value,
+    language,
+    uri ? monaco.Uri.parse(uri) : undefined
+  )
+}

src/utils/log-monaco/index.ts

@@ -0,0 +1,17 @@
+import * as monaco from 'monaco-editor'
+import { setupMonacoWorkers } from './workers/setup'
+import { registerDarkTheme } from './themes/dark'
+import { registerLanguages } from './languages'
+
+let initialized = false
+
+export function initMonaco() {
+  if (initialized) return monaco
+  initialized = true
+
+  setupMonacoWorkers()
+  registerDarkTheme()
+  registerLanguages()
+
+  return monaco
+}

src/utils/log-monaco/languages/index.ts

@@ -0,0 +1,5 @@
+import { registerLogLanguage } from './log'
+
+export function registerLanguages() {
+  registerLogLanguage()
+}

src/utils/log-monaco/languages/log.ts

@@ -0,0 +1,43 @@
+import * as monaco from 'monaco-editor'
+
+export const LOG_LANGUAGE_ID = 'log'
+
+export function registerLogLanguage() {
+  monaco.languages.register({ id: LOG_LANGUAGE_ID })
+
+  monaco.languages.setMonarchTokensProvider(LOG_LANGUAGE_ID, {
+    tokenizer: {
+      root: [
+        // 时间戳
+        [/\d{4}-\d{2}-\d{2}[ T]\d{2}:\d{2}:\d{2}(?:\.\d+)?/, 'log.timestamp'],
+
+        // level
+        [/\b(\[INFO\]|\[Info\]|\[info\]|\[I\])\b/, 'log.info'],
+        [/\b(\[WARN\]|\[Warn\]|\[warn\]|\[WARNING\]|\[W\])\b/, 'log.warn'],
+        [/\b(\[ERROR\]|\[Error\]|\[error\]|\[E\])\b/, 'log.error'],
+        [/\b(\[DEBUG\]|\[Debug\]|\[debug\]|\[D\])\b/, 'log.debug'],
+
+        // 数字
+        [/\b\d+\b/, 'number'],
+
+        // 路径
+        [/(\/[a-zA-Z0-9._-]+)+/, 'string']
+      ]
+    }
+  })
+
+  // 悬浮提示（可选）
+  monaco.languages.registerHoverProvider(LOG_LANGUAGE_ID, {
+    provideHover(model, position) {
+      const word = model.getWordAtPosition(position)
+      if (!word) return null
+
+      if (word.word.toUpperCase() === 'ERROR') {
+        return {
+          contents: [{ value: '**ERROR** 日志级别' }]
+        }
+      }
+      return null
+    }
+  })
+}

src/utils/log-monaco/themes/dark.ts

@@ -0,0 +1,18 @@
+import * as monaco from 'monaco-editor'
+
+export function registerDarkTheme() {
+  monaco.editor.defineTheme('log-dark', {
+    base: 'vs-dark',
+    inherit: true,
+    rules: [
+      { token: 'log.info', foreground: '4FC1FF' },
+      { token: 'log.warn', foreground: 'D7BA7D' },
+      { token: 'log.error', foreground: 'F44747' },
+      { token: 'log.debug', foreground: 'B5CEA8' },
+      { token: 'log.timestamp', foreground: '808080' }
+    ],
+    colors: {
+      'editor.background': '#0f0f0f'
+    }
+  })
+}

src/utils/log-monaco/workers/setup.ts

@@ -0,0 +1,17 @@
+export function setupMonacoWorkers() {
+  self.MonacoEnvironment = {
+    getWorker(_, label) {
+      if (label === 'json') {
+        return new Worker(
+          new URL('monaco-editor/esm/vs/language/json/json.worker', import.meta.url),
+          { type: 'module' }
+        )
+      }
+
+      return new Worker(
+        new URL('monaco-editor/esm/vs/editor/editor.worker', import.meta.url),
+        { type: 'module' }
+      )
+    }
+  }
+}

src/views/batch-download/page/viewLog.vue

@@ -1,25 +1,34 @@
 <template>
   <div style="height: 400px;">
-    <CodeEditor v-model:value="code" language="javascript" theme="vs-dark" :options="editorOptions" />
+    <CodeEditor v-model:value="code" language="javascript" theme="vs-dark" :options="editorOptions" @editor-did-mount="editorDidMount" />
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue';
-// import { CodeEditor } from 'monaco-editor-vue3';
+import type { EditorOptions } from 'monaco-editor-vue3';
+import type { editor }  from 'monaco-editor'
+import { rules } from 'unocss/preset-wind4';
+
+const monacoEditor = await import('monaco-editor')
 
 // 改为动态载入，提升加载速度
 const CodeEditor = defineAsyncComponent(() =>
   import('monaco-editor-vue3')
 );
 
+const editorDidMount = (editor: editor.IStandaloneCodeEditor) => {
+  editor
+}
+
 const code = ref(`function hello() {
   console.log('Hello, Monaco Editor Vue3!');
 }`);
 
-const editorOptions = {
+const editorOptions: EditorOptions = {
   fontSize: 14,
   minimap: { enabled: false },
-  automaticLayout: true
+  automaticLayout: true,
+
 };
 </script>

vite.config.ts

@@ -52,8 +52,9 @@ export default defineConfig(({ mode }) => {
     },
     build: {
       sourcemap: true, // ✅ 生成 source map
-      // rolldownOptions: {
-      //   output: {
+      rolldownOptions: {
+        output: {
+          
       //     advancedChunks: {
       //       includeDependenciesRecursively: true,
       //       minSize: 50 * 1024, // 全局最小 50KB
@@ -103,8 +104,8 @@ export default defineConfig(({ mode }) => {
       //         },
       //       ],
       //     },
-      //   },
-      // },
+        },
+      },
     },
   }
 })