modify monaco-editor in service debug page

ui-vue3/src/main.ts

@@ -29,30 +29,6 @@ import Vue3ColorPicker from 'vue3-colorpicker'
 import 'vue3-colorpicker/style.css'
 import 'nprogress/nprogress.css'
 
-import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
-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'
-
-self.MonacoEnvironment = {
-  getWorker(_, 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 (label === 'typescript' || label === 'javascript') {
-      return new tsWorker()
-    }
-    return new editorWorker()
-  }
-}
-
 const app = createApp(App)
 
 app.use(Antd).use(Vue3ColorPicker).use(i18n).use(router).mount('#app')

ui-vue3/src/views/resources/services/tabs/debug.vue

@@ -48,10 +48,10 @@
             <a-tree block-node :tree-data="outputParamType" class="description-item-content" />
           </a-descriptions-item>
           <a-descriptions-item label="请求" :span="2">
-            <div ref="requestEditor" class="editor"></div>
+            <monaco-editor editorId="requestEditor" width="90%" height="300px" />
           </a-descriptions-item>
           <a-descriptions-item label="响应" :span="2">
-            <div ref="responseEditor" class="editor"></div>
+            <monaco-editor editorId="responseEditor" width="90%" height="300px" />
           </a-descriptions-item>
         </a-descriptions>
         <a-button type="primary">发送请求</a-button>
@@ -61,8 +61,8 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, onMounted } from 'vue'
-import * as monaco from 'monaco-editor'
+import { ref, reactive } from 'vue'
+import MonacoEditor from '@/components/editor/MonacoEditor.vue';
 
 const methodTabs = reactive([
   'login',
@@ -141,26 +141,8 @@ const outputParamType = [
     ]
   }
 ]
-
-const requestEditor = ref(null)
-const responseEditor = ref(null)
-
-const createEditor = (element: HTMLElement) => {
-  monaco.editor.create(element, {
-    value: '',
-    language: 'json',
-    theme: 'vs-dark',
-    automaticLayout: true,
-    fontSize: 14,
-    lineNumbers: 'off',
-    roundedSelection: true
-  })
-}
-onMounted(() => {
-  createEditor(requestEditor.value![0])
-  createEditor(responseEditor.value![0])
-})
 </script>
+
 <style lang="less" scoped>
 .__container_services_tabs_debug {
   width: 100%;
@@ -172,9 +154,5 @@ onMounted(() => {
     margin-left: 20px;
     width: 90%;
   }
-  .editor {
-    width: 90%;
-    height: 300px;
-  }
 }
 </style>