Implement simple monaco

apache · Jan 28, 2024 · e207cac · e207cac
1 parent 574d314
commit e207cac
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 17 deletions.
diff --git a/ui-vue3/package.json b/ui-vue3/package.json
@@ -30,6 +30,7 @@
     "less": "^4.2.0",
     "lodash": "^4.17.21",
     "mockjs": "^1.1.0",
+    "monaco-editor": "^0.45.0",
     "nprogress": "^0.2.0",
     "pinia": "^2.1.7",
     "pinyin-pro": "^3.19.3",

diff --git a/ui-vue3/src/base/i18n/zh.ts b/ui-vue3/src/base/i18n/zh.ts
@@ -277,7 +277,6 @@ const words: I18nType = {
   noPageTip: '抱歉，你访问的页面不存在',
   globalSearchTip: '搜索ip，应用，实例，服务',
 
-  globalSearchTip: '搜索ip，应用，实例，服务',
   placeholder: {
     typeAppName: '请输入应用名，支持前缀搜索',
     typeDefault: '请输入'

diff --git a/ui-vue3/src/views/resources/services/tabs/debug.vue b/ui-vue3/src/views/resources/services/tabs/debug.vue
@@ -48,20 +48,10 @@
             <a-tree block-node :tree-data="outputParamType" class="description-item-content" />
           </a-descriptions-item>
           <a-descriptions-item label="请求" :span="2">
-            <a-textarea
-              v-model="requestValue"
-              placeholder="请输入"
-              :rows="4"
-              class="description-item-content"
-            />
+            <div ref="requestEditor" class="editor"></div>
           </a-descriptions-item>
           <a-descriptions-item label="响应" :span="2">
-            <a-textarea
-              v-model="responseValue"
-              placeholder="请输入"
-              :rows="4"
-              class="description-item-content"
-            />
+            <div ref="responseEditor" class="editor"></div>
           </a-descriptions-item>
         </a-descriptions>
         <a-button type="primary">发送请求</a-button>
@@ -71,7 +61,8 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive } from 'vue'
+import { ref, reactive, onMounted } from 'vue'
+import * as monaco from 'monaco-editor'
 
 const methodTabs = reactive([
   'login',
@@ -151,8 +142,25 @@ const outputParamType = [
   }
 ]
 
-const requestValue = ref('')
-const responseValue = ref('')
+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 {
@@ -165,5 +173,9 @@ const responseValue = ref('')
     margin-left: 20px;
     width: 90%;
   }
+  .editor {
+    width: 90%;
+    height: 300px;
+  }
 }
 </style>
diff --git a/ui-vue3/vite.config.ts b/ui-vue3/vite.config.ts
@@ -42,7 +42,8 @@ export default defineConfig({
     ],
     resolve: {
         alias: {
-            '@': fileURLToPath(new URL('./src', import.meta.url))
+            '@': fileURLToPath(new URL('./src', import.meta.url)),
+            'monaco-editor': 'monaco-editor/esm/vs/editor/editor.api.js'
         },
         // ignore suffix
         extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']

diff --git a/ui-vue3/yarn.lock b/ui-vue3/yarn.lock
@@ -4134,6 +4134,11 @@ mockjs@^1.1.0:
   dependencies:
     commander "*"
 
+monaco-editor@^0.45.0:
+  version "0.45.0"
+  resolved "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.45.0.tgz#6939123a6254aea9fea2d647697f846306dd4448"
+  integrity sha512-mjv1G1ZzfEE3k9HZN0dQ2olMdwIfaeAAjFiwNprLfYNRSz7ctv9XuCT7gPtBGrMUeV1/iZzYKj17Khu1hxoHOA==
+
 [email protected]:
   version "2.1.2"
   resolved "https://registry.npmmirror.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"