feat: 日志剩余需求&在线调试开发 (#782)

* fix: 修复体验问题 * feat: 修复前端问题 # Reviewed, transaction id: 5345 * Merge remote-tracking branch 'base/master' , # Reviewed, transaction id: 5346 * feat: 修复前端问题 # Reviewed, transaction id: 5348 * fix: 体验问题修复 * feat: 修复前端问题 # Reviewed, transaction id: 5483 * fix: 修复体验问题 * feat: 修复前端问题 # Reviewed, transaction id: 5629 * feat: 前端版本日志 # Reviewed, transaction id: 5675 * feat: 【APIgateway1.13 】发布失败的日志点进去，时间超长 # Reviewed, transaction id: 5703 * fix: 修复体验问题 * feat: 修复前端问题 * Merge remote-tracking branch 'base/master' , # Reviewed, transaction id: 5928 * feat: 文案修改 # Reviewed, transaction id: 5951 * feat: 修复前端问题 # Reviewed, transaction id: 6015 * fix: 修复体验问题 * feat: 修复前端问题 # Reviewed, transaction id: 6094 * feat: 修复前端问题 # Reviewed, transaction id: 6095 * feat: 修复前端问题 # Reviewed, transaction id: 6197 * Merge remote-tracking branch 'base/master' , # Reviewed, transaction id: 6198 * Merge remote-tracking branch 'base/master' , # Reviewed, transaction id: 6198 , # Reviewed, transaction id: 6199 * fix: 修复体验问题 * fix: 体验问题修复 * feat: 修复前端问题 # Reviewed, transaction id: 6414 * fix: 修复体验问题 * Merge remote-tracking branch 'base/master' , # Reviewed, transaction id: 6617 * Merge remote-tracking branch 'base/master' , # Reviewed, transaction id: 6617 , # Reviewed, transaction id: 6619 * feat: 修复无法登出的问题 # Reviewed, transaction id: 6626 * fix: 体验问题修复 * feat: 修复前端问题 # Reviewed, transaction id: 6763 * fix: 体验问题修复 * fix: 修复体验问题 * fix: 体验问题修复 * feat: 修复前端问题 # Reviewed, transaction id: 7052 * fix: 修复体验问题 * fix: 修复体验问题 * fix: 修复体验问题 * feat: 【必须】点击编辑后，光标应该落在输入框内，需要支持回车与鼠标失焦都能保存 # Reviewed, transaction id: 7357 * fix: 修复体验问题 * fix: 修复体验问题 * fix: 修复体验问题 * feature: 小窗登录iframe方式改为window.open * fix: 修复体验问题 * feat: 修复前端问题 # Reviewed, transaction id: 7793 * Merge remote-tracking branch 'base/master' , # Reviewed, transaction id: 7802 * feat: 修复新建资源页面，环境配置中的超时时间是 30 秒，但添加资源时变成了 0 秒，数据未同步 * Merge remote-tracking branch 'base/master' , # Reviewed, transaction id: 7804 * fix: 修复体验问题 * fix: 修复体验问题 * fix: 变量管理编辑时才显示增加删除按钮 * feat: 国际化 * feat: 国际化 * feat: 国际化 * feat: 修复插件管理问题 * feat: 退出登录加上 is_from_logout 参数 * fix: 体验问题修复 * feat: 修复前端问题 * feat: eslint 问题 * fix: 体验问题修复 * fix: 修复体验问题 * fix: 体验问题修复 * feat: 修复基本信息编辑时,弹框中维护人员不显示的问题 * feat: 修复前端问题 * feat: 修复通知中心访问地址 # Reviewed, transaction id: 9800 * feat: 修复通知中心访问地址 # Reviewed, transaction id: 9823 * Merge remote-tracking branch 'base/master' , # Reviewed, transaction id: 9890 * feat: 修复编辑基础信息弹框中维护人员不回显的问题 # Reviewed, transaction id: 10102 * feat: 修复编辑基础信息弹框中维护人员不回显的问题 (#703) # Reviewed, transaction id: 10102 * feat: 修复编辑基础信息弹框中维护人员不回显的问题 # Reviewed, transaction id: 10119 * feat: 全局配置开发完成 * feat: 全局配置 # Reviewed, transaction id: 10271 * Merge remote-tracking branch 'base/master' , # Reviewed, transaction id: 10480 * feat: 日志优化前端功能开发&&“校验并查看地址”展示的路径不全时没有tooltips&&发布记录：导航样式不对&&通过环境概览页面发布资源后，页面下方资源信息未更新 * Merge remote-tracking branch 'base/master' , # Reviewed, transaction id: 10706 * feat: 1.14功能开发 # Reviewed, transaction id: 10707 * feat: 1.14功能开发 * feat: 修复基本信息编辑时,弹框中维护人员不显示的问题;获取全局配置 BK_APP_CODE 动态获取 # Reviewed, transaction id: 10785 * feat: 1.14版本开发 * feat: 优化全局配置相关逻辑;全局配置增加本地开发 mock 接口 # Reviewed, transaction id: 10838 * feat: 1.14版本开发 * feat: 1.14开发 * feat: 1.14功能开发 * feat: 1.14 开发 # Reviewed, transaction id: 11175 * feat: 1.14 开发 (#63) * feat: 1.14 开发 # Reviewed, transaction id: 11212 * feat: 修复编辑基础信息弹框中维护人员不回显的问题 # Reviewed, transaction id: 11297 * feat: 1.14 开发 (#64) * feat: 1.14 开发 * feat: 1.14 开发 * feat: 修复资源配置列表标签列 filter 导致页面加载错误的问题 # Reviewed, transaction id: 11334 * feat: 修复资源配置列表标签列 filter 导致页面加载错误的问题 # Reviewed, transaction id: 11425 * feat: 1.14 开发 (#65) * feat: 1.14 开发 * feat: 1.14 开发 * feat: 1.14 开发 * feat: 1.14 开发 (#66) * feat: 1.14 开发 * feat: 1.14 开发 * feat: 1.14 开发 * feat: 1.14 开发 * Merge remote-tracking branch 'base/master' , # Reviewed, transaction id: 11681 * feat: 1.14 在线调试开发 (#67) * feat: 1.14 开发 * feat: 1.14 开发 * feat: 1.14 开发 * feat: 1.14 开发 * feat: 1.14 在线调试开发 * feat: 1.14 在线调试开发 # Reviewed, transaction id: 12647 * Ft resource import(新版资源导入) (#69) * feat: 资源配置页代码编辑器静态样式 * feat: 调整样式 * feat: 编辑器行号左侧 linting 提示静态样式 * feat: 编辑器跳转和高亮 * feat: 编辑器错误消息台开关逻辑及滚动条样式 * feat: 编辑器错误消息行号解析 * feat: 完成编辑器错误代码行高亮及跳转 * feat: 错误消息显示行号列号 * feat: 代码校验后可选择是否跳转 * feat: 代码校验失败禁止跳转，行号推导逻辑优化 * feat: 用正则重写行号解析逻辑 * feat: 搜索面板切换逻辑 * fix: 修复代码样式 * feat: 编辑器页新样式 * feat: “导入资源配置”页基本样式 * feat: 表头批量修改 config 的 UI * chore: 整理代码 * feat: 批量修改认证和公开设置 * feat: 资源编辑逻辑 * fix: 修复 footer 样式 * feat: 资源名称路径快筛 * feat: 插件列 Tooltip 显示插件名称 * feat: 导入确认 Dialog * feat: 文本高亮 * feat: 接口文档 Slider * feat: 覆盖文档的 Switcher * chore: 整理代码 * feat: 编辑器语法校验button及校验通过消息 * feat: 编辑器语法校验button及校验通过消息 # Reviewed, transaction id: 13205 * feat: 语法校验按钮的loading/disabled状态 # Reviewed, transaction id: 13212 * feat: 把 json_path 展示到错误消息中 # Reviewed, transaction id: 13214 * fix: 修复行号解析逻辑 # Reviewed, transaction id: 13215 * fix: 修复router报错 # Reviewed, transaction id: 13224 * refactor: 优化并列的 await 调用 # Reviewed, transaction id: 13231 * feat: 编辑器错误消息跳转按钮 * feat: 编辑器全屏功能 * fix: 修复样式 * feat: 更新 i18n 翻译 * feat: 切换字号功能 * feat: 切换字号功能 # Reviewed, transaction id: 13338 * feat: 错误消息栏自动折叠 * refactor: 优化i18n插值调用 # Reviewed, transaction id: 13370 * feat: 新版资源导入 # Reviewed, transaction id: 13374 * feat: 1.14 在线调试 (#68) * feat: 1.14 开发 * feat: 1.14 开发 * feat: 1.14 开发 * feat: 1.14 开发 * feat: 1.14 在线调试开发 * feat: 1.14 在线调试 * feat: 1.14 在线调试 * feat: 1.14 在线调试功能开发 # Reviewed, transaction id: 13376 * Fix 编辑器高度错误 (#71) * feat: 资源配置页代码编辑器静态样式 * feat: 调整样式 * feat: 编辑器行号左侧 linting 提示静态样式 * feat: 编辑器跳转和高亮 * feat: 编辑器错误消息台开关逻辑及滚动条样式 * feat: 编辑器错误消息行号解析 * feat: 完成编辑器错误代码行高亮及跳转 * feat: 错误消息显示行号列号 * feat: 代码校验后可选择是否跳转 * feat: 代码校验失败禁止跳转，行号推导逻辑优化 * feat: 用正则重写行号解析逻辑 * feat: 搜索面板切换逻辑 * fix: 修复代码样式 * feat: 编辑器页新样式 * feat: “导入资源配置”页基本样式 * feat: 表头批量修改 config 的 UI * chore: 整理代码 * feat: 批量修改认证和公开设置 * feat: 资源编辑逻辑 * fix: 修复 footer 样式 * feat: 资源名称路径快筛 * feat: 插件列 Tooltip 显示插件名称 * feat: 导入确认 Dialog * feat: 文本高亮 * feat: 接口文档 Slider * feat: 覆盖文档的 Switcher * chore: 整理代码 * feat: 编辑器语法校验button及校验通过消息 * feat: 编辑器语法校验button及校验通过消息 # Reviewed, transaction id: 13205 * feat: 语法校验按钮的loading/disabled状态 # Reviewed, transaction id: 13212 * feat: 把 json_path 展示到错误消息中 # Reviewed, transaction id: 13214 * fix: 修复行号解析逻辑 # Reviewed, transaction id: 13215 * fix: 修复router报错 # Reviewed, transaction id: 13224 * refactor: 优化并列的 await 调用 # Reviewed, transaction id: 13231 * feat: 编辑器错误消息跳转按钮 * feat: 编辑器全屏功能 * fix: 修复样式 * feat: 更新 i18n 翻译 * feat: 切换字号功能 * feat: 切换字号功能 # Reviewed, transaction id: 13338 * feat: 错误消息栏自动折叠 * refactor: 优化i18n插值调用 # Reviewed, transaction id: 13370 * fix: 修复编辑器 ResizeLayout 折叠后的高度错误问题 # Reviewed, transaction id: 13388 * Merge branch 'master' into ft_resource_import , # Reviewed, transaction id: 13397 * Merge Master , # Reviewed, transaction id: 13401 * fix: 修复编辑器错误消息不能折叠/展开的问题 # Reviewed, transaction id: 13437 * Ft 修复、改进编辑器行号解析逻辑 (#72) * feat: 资源配置页代码编辑器静态样式 * feat: 调整样式 * feat: 编辑器行号左侧 linting 提示静态样式 * feat: 编辑器跳转和高亮 * feat: 编辑器错误消息台开关逻辑及滚动条样式 * feat: 编辑器错误消息行号解析 * feat: 完成编辑器错误代码行高亮及跳转 * feat: 错误消息显示行号列号 * feat: 代码校验后可选择是否跳转 * feat: 代码校验失败禁止跳转，行号推导逻辑优化 * feat: 用正则重写行号解析逻辑 * feat: 搜索面板切换逻辑 * fix: 修复代码样式 * feat: 编辑器页新样式 * feat: “导入资源配置”页基本样式 * feat: 表头批量修改 config 的 UI * chore: 整理代码 * feat: 批量修改认证和公开设置 * feat: 资源编辑逻辑 * fix: 修复 footer 样式 * feat: 资源名称路径快筛 * feat: 插件列 Tooltip 显示插件名称 * feat: 导入确认 Dialog * feat: 文本高亮 * feat: 接口文档 Slider * feat: 覆盖文档的 Switcher * chore: 整理代码 * feat: 编辑器语法校验button及校验通过消息 * feat: 编辑器语法校验button及校验通过消息 # Reviewed, transaction id: 13205 * feat: 语法校验按钮的loading/disabled状态 # Reviewed, transaction id: 13212 * feat: 把 json_path 展示到错误消息中 # Reviewed, transaction id: 13214 * fix: 修复行号解析逻辑 # Reviewed, transaction id: 13215 * fix: 修复router报错 # Reviewed, transaction id: 13224 * refactor: 优化并列的 await 调用 # Reviewed, transaction id: 13231 * feat: 编辑器错误消息跳转按钮 * feat: 编辑器全屏功能 * fix: 修复样式 * feat: 更新 i18n 翻译 * feat: 切换字号功能 * feat: 切换字号功能 # Reviewed, transaction id: 13338 * feat: 错误消息栏自动折叠 * refactor: 优化i18n插值调用 # Reviewed, transaction id: 13370 * fix: 修复编辑器 ResizeLayout 折叠后的高度错误问题 # Reviewed, transaction id: 13388 * Merge branch 'master' into ft_resource_import , # Reviewed, transaction id: 13397 * Merge Master , # Reviewed, transaction id: 13401 * fix: 修复编辑器错误消息不能折叠/展开的问题 # Reviewed, transaction id: 13437 * fix: 修复对数组成员的行号解析错误问题 * fix: 修复对数组成员的行号解析错误问题 # Reviewed, transaction id: 13466 * feat: 优化编辑器行号解析逻辑 * Merge branch 'master' into ft_resource_import , # Reviewed, transaction id: 13507 * chore: 整理代码 # Reviewed, transaction id: 13509 * fix: 修复整数判断 # Reviewed, transaction id: 13517 * Merge branch 'master' of https://github.com/ielgnaw/blueking-apigateway , # Reviewed, transaction id: 13733 * deps(release-note): 更新release-note版本至beta14 (#73) # Reviewed, transaction id: 13755 * feat: 日志剩余需求&在线调试开发 (#74) * feat: 1.14 开发 * feat: 1.14 开发 * feat: 1.14 开发 * feat: 1.14 开发 * feat: 1.14 在线调试开发 * feat: 1.14 在线调试 * feat: 1.14 在线调试 * feat: 日志剩余需求开发&编译器格式化等功能 * feat: 日志剩余需求&在线调试开发 # Reviewed, transaction id: 13885 --------- Co-authored-by: shuzhenyang <shuzhen.yang2@gientech.com> Co-authored-by: lhzzforever <zly2576885332@163.com> Co-authored-by: 逍遥尊者 <46641918+lhzzforever@users.noreply.github.com> Co-authored-by: wklken <wklken@gmail.com> Co-authored-by: shuzhenyang <148324706+shuzhenyang@users.noreply.github.com> Co-authored-by: KDZhu <carlmac@163.com>
TencentBlueKing · Aug 2, 2024 · 592ed84 · 592ed84
1 parent 12d81b7
commit 592ed84
Show file tree

Hide file tree

Showing 11 changed files with 324 additions and 95 deletions.
diff --git a/src/dashboard-front/bk.config.js b/src/dashboard-front/bk.config.js
@@ -1,4 +1,5 @@
 const mockServer = require('./mock-server');
+const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')
 // const { DefinePlugin } = require('webpack');
 
 module.exports = {
@@ -23,12 +24,10 @@ module.exports = {
     };
   },
 
-  // chainWebpack: config => {
-  //   config
-  //   .plugin('feature-flags')
-  //   .use(DefinePlugin, [{
-  //     "__VUE_PROD_DEVTOOLS__": true,
-  //   }]);
-  //   return config
-  // }
+  chainWebpack: config => {
+    config
+    .plugin('monaco')
+    .use(new MonacoWebpackPlugin());
+    return config
+  }
 };
diff --git a/src/dashboard-front/package.json b/src/dashboard-front/package.json
@@ -48,6 +48,7 @@
     "mitt": "^3.0.1",
     "moment": "^2.29.4",
     "monaco-editor": "^0.44.0",
+    "monaco-editor-webpack-plugin": "^7.0.0",
     "pinia": "^2.0.23",
     "request": "^2.88.2",
     "semver": "^7.6.0",

diff --git a/src/dashboard-front/src/components/ag-editor.vue b/src/dashboard-front/src/components/ag-editor.vue
@@ -1,13 +1,20 @@
 <template>
   <div class="codemirror">
     <div id="monacoEditor" class="monaco-editor" ref="monacoEditor" :style="style"></div>
+    <div class="tools">
+      <cog-shape class="tool-icon" v-if="showFormat" @click="handleFormat" />
+      <copy-shape class="tool-icon" v-if="showCopy" @click="handleCopy" />
+      <filliscreen-line class="tool-icon" v-if="showFullScreen" @click="handleFullScreen" />
+    </div>
   </div>
 </template>
 <script setup>
 // 引入vue模块
 import { ref, onMounted, toRefs, computed, watch, onBeforeMount } from 'vue';
 // 引入monaco编辑器
 import * as monaco from 'monaco-editor';
+import { copy } from '@/common/util';
+import { CogShape, CopyShape, FilliscreenLine } from 'bkui-vue/lib/icon';
 
 let editor = null; // 编辑器实例
 const monacoEditor = ref(null);
@@ -27,6 +34,10 @@ const props = defineProps({
   width: { type: [String, Number], default: '100%' },
   height: { type: [String, Number], default: '100%' },
   theme: { type: String, default: 'vs-dark' },
+  minimap: { type: Boolean, default: true },
+  showFormat: { type: Boolean, default: false },
+  showCopy: { type: Boolean, default: false },
+  showFullScreen: { type: Boolean, default: false },
 });
 
 const { modelValue, language, readOnly, width, height, theme } = toRefs(props);
@@ -95,6 +106,9 @@ const initEditor = () => {
     readOnly: readOnly.value, // 是否只读  取值 true | false
     lineHeight: 24,
     glyphMargin: true,  // 是否显示行号左侧装饰，用于显示当前行的错误信息等级：error | warning
+    minimap: {
+      enabled: props.minimap, // 小地图
+    },
   });
 
   editorMounted(); // 编辑器初始化后
@@ -182,6 +196,46 @@ const switchFontSize = () => {
   });
 };
 
+const handleFormat = () => {
+  if (language.value === 'json') { // 格式化 JSON 文档
+    editor.trigger('a', 'editor.action.formatDocument');
+  }
+  // yaml 格式 需 npm i yamljs 拓展支持
+};
+
+const handleCopy = () => {
+  copy(editor.getValue());
+};
+
+// 全屏开关变量
+let isFullScreen = false;
+const handleFullScreen = () => {
+  const domNode = editor.getDomNode();
+  const container = (domNode.parentNode).parentNode;
+  const toolsDom = container.querySelector('.tools');
+
+  if (isFullScreen) {
+    document.body.style.overflow = '';
+    container.style.position = 'relative';
+    container.style.zIndex = '0';
+    toolsDom.style.zIndex = '0';
+    editor.layout();
+    isFullScreen = false;
+  } else {
+    document.body.style.overflow = 'hidden';
+    container.style.position = 'fixed';
+    container.style.zIndex = '6003';
+    container.style.overflow = 'hidden';
+    container.style.width = '100%';
+    container.style.height = '100%';
+    container.style.left = 0;
+    container.style.top = 0;
+    toolsDom.style.zIndex = '6004';
+    editor.layout();
+    isFullScreen = true;
+  }
+};
+
 defineExpose({
   setValue,
   setCursorPos,
@@ -196,10 +250,24 @@ defineExpose({
 });
 
 </script>
-<style scoped>
+<style scoped lang="scss">
 .codemirror,
 .monaco-editor {
   width: 100%;
   height: 100%;
 }
+.codemirror {
+  position: relative;
+  .tools {
+    position: absolute;
+    top: 5px;
+    right: 28px;
+    .tool-icon {
+      cursor: pointer;
+      font-size: 16px;
+      color: #979BA5;
+      margin-left: 12px;
+    }
+  }
+}
 </style>
diff --git a/src/dashboard-front/src/http/online-test.ts b/src/dashboard-front/src/http/online-test.ts
@@ -46,3 +46,10 @@ export const getUserAuthType = () => fetch.get(`${BK_DASHBOARD_URL}/settings/use
  * @returns
  */
 export const resourceSchema = (gatewayId: number, stageId: number, resourceId: number) => fetch.get(`${BK_DASHBOARD_URL}/gateways/${gatewayId}/releases/stages/${stageId}/resources/${resourceId}/schema/`);
+
+/**
+ *  在线调试历史记录列表
+ * @param apigwId 网关id
+ * @returns
+ */
+export const getTestHistories = (apigwId: number, data: any) => fetch.get(`${BK_DASHBOARD_URL}/gateways/${apigwId}/tests/histories/?${json2Query(data)}`);
diff --git a/src/dashboard-front/src/http/report.ts b/src/dashboard-front/src/http/report.ts
@@ -1,5 +1,5 @@
 import fetch from './fetch';
-import { json2Query } from '@/common/util';
+import { json2Query, blobDownLoad } from '@/common/util';
 
 const { BK_DASHBOARD_URL } = window;
 
@@ -20,3 +20,13 @@ export const getApigwStages = (apigwId: number, params: any) => fetch.get(`${BK_
  * @param apigwId 网关id
  */
 export const getApigwResources = (apigwId: number, params: any) => fetch.get(`${BK_DASHBOARD_URL}/gateways/${apigwId}/resources/?${json2Query(params)}`);
+
+/**
+ *  日志导出
+ * @param apigwId 网关id
+ * @param data 导出参数
+ */
+export const exportLogs = async (apigwId: number, data: any) => {
+  const res = await fetch.get(`${BK_DASHBOARD_URL}/gateways/${apigwId}/logs/export/`, data, { responseType: 'blob' });
+  return blobDownLoad(res);
+};
diff --git a/src/dashboard-front/src/language/lang.ts b/src/dashboard-front/src/language/lang.ts
@@ -1300,6 +1300,12 @@ const lang: ILANG = {
   '查看日志': ['View logs'],
   '发布人': ['Releaser'],
   '发布资源': ['Release resource'],
+  '响应状态码': ['Response status code'],
+  '调用时间': ['Call time'],
+  '请求记录': ['Request record'],
+  '检索项：': ['Search terms:'],
+  '清除': ['Clear away'],
+  '下载日志': ['Download log'],
   '下架': ['Unpublish'],
   '今天': ['Today'],
   '近7天': ['Last 7 days'],

diff --git a/src/dashboard-front/src/views/online-debug/components/doc.vue b/src/dashboard-front/src/views/online-debug/components/doc.vue
@@ -58,7 +58,7 @@
           <!-- eslint-disable-next-line vue/no-v-html -->
           <div class="ag-markdown-view" id="markdown" :key="renderHtmlIndex" v-html="curComponent.markdownHtml"></div>
         </bk-tab-panel>
-        <bk-tab-panel
+        <!-- <bk-tab-panel
           :name="'sdk'"
           :label="t('SDK及示例')"
           v-if="userStore.featureFlags?.ENABLE_SDK"
@@ -80,17 +80,18 @@
             </div>
 
             <h3 class="f16 mt20"> {{ t('SDK使用样例') }} </h3>
-            <!-- eslint-disable-next-line vue/no-v-html -->
             <div class="ag-markdown-view mt20" :key="renderHtmlIndex" v-html="sdkMarkdownHtml"></div>
           </div>
-        </bk-tab-panel>
+        </bk-tab-panel> -->
       </bk-tab>
     </div>
 
   </div>
 </template>
 
 <script setup lang="ts">
+/* eslint-disable max-len */
+
 import { ref, computed, nextTick } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useUser, useCommon } from '@/store';
@@ -146,7 +147,7 @@ const userList = computed(() => {
 });
 const chatName = computed(() => `${t('[蓝鲸网关API咨询] 网关')}${curApigw.value?.name}`);
 const chatContent = computed(() => `${t('网关API文档')}:${location.href}`);
-const SDKInfo = computed(() => t('网关当前环境【{curStageText}】对应的资源版本未生成 SDK，可联系网关负责人生成 SDK', { curStageText: props.stageName }));
+// const SDKInfo = computed(() => t('网关当前环境【{curStageText}】对应的资源版本未生成 SDK，可联系网关负责人生成 SDK', { curStageText: props.stageName }));
 
 const md = new MarkdownIt({
   linkify: false,

diff --git a/src/dashboard-front/src/views/online-debug/components/payload-body.vue b/src/dashboard-front/src/views/online-debug/components/payload-body.vue
@@ -47,7 +47,16 @@
     <edit-table v-show="type === 'data'" ref="dataRef" :list="fromDataList" />
     <edit-table v-show="type === 'urlencoded'" ref="urlencodedRef" :list="urlencodedList" />
     <div class="raw-content" v-show="type === 'raw'">
-      <editor-monaco v-model="editorText" theme="Visual Studio" ref="resourceEditorRef" />
+      <editor-monaco
+        v-model="editorText"
+        theme="Visual Studio"
+        language="json"
+        ref="resourceEditorRef"
+        :minimap="false"
+        :show-format="true"
+        :show-copy="true"
+        :show-full-screen="true"
+      />
     </div>
   </div>
 </template>