feat: 在线调试体验问题修复 (#789)

* 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 * feat: 在线调试体验问题修复 (#75) * feat: 1.14 开发 * feat: 1.14 开发 * feat: 1.14 开发 * feat: 1.14 开发 * feat: 1.14 在线调试开发 * feat: 1.14 在线调试 * feat: 1.14 在线调试 * feat: 日志剩余需求开发&编译器格式化等功能 * feat: 在线调试体验问题修复 * feat: 在线调试体验问题修复 * feat: 在线调试请求详情接口对接&资源列表接口替换&日志图表和下载参数修改 * feat: 在线调试体验问题修复 (#76) * feat: 1.14 开发 * feat: 1.14 开发 * feat: 1.14 开发 * feat: 1.14 开发 * feat: 1.14 在线调试开发 * feat: 1.14 在线调试 * feat: 1.14 在线调试 * feat: 日志剩余需求开发&编译器格式化等功能 * feat: 在线调试体验问题修复 * feat: 在线调试体验问题修复 * feat: 在线调试请求详情接口对接&资源列表接口替换&日志图表和下载参数修改 * feat: 在线调试体验问题修复 --------- 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 6, 2024 · c93d757 · c93d757
1 parent 059ca6c
commit c93d757
Show file tree

Hide file tree

Showing 9 changed files with 277 additions and 113 deletions.
diff --git a/src/dashboard-front/src/language/lang.ts b/src/dashboard-front/src/language/lang.ts
@@ -1409,6 +1409,7 @@ const lang: ILANG = {
   '当前后端服务（{name}）已绑定以下 {num} 个环境，所有修改都将发布到这些环境中：{names}': ['The current backend service ({name}) has bound the following {num} environments to which all changes will be published: {names}'],
   '网关环境【prod】中的配置【后端服务地址】不合法。请在网关 `后端服务` 中进行配置。': ['The back-end service address configured in gateway environment prod is invalid. Please configure in Gateway back-end services.'],
   '最大 300s': ['Maximum 300s'],
+  '后端服务内容保存成功': ['The back-end service content is saved successfully. Procedure'],
   '恢复初始值': ['Reset to default'],
   '请输入超时时间': ['Please enter the timeout period'],
   '批量修改超时时间': ['Batch modify timeout period'],

diff --git a/src/dashboard-front/src/views/backend-service/add.vue b/src/dashboard-front/src/views/backend-service/add.vue
@@ -412,21 +412,22 @@ const handleConfirm = async () => {
   };
   isSaveLoading.value = true;
   try {
+    let res: any = {};
     if (!props.editId) {
-      await createBackendService(apigwId, params);
+      res = await createBackendService(apigwId, params);
     } else {
-      await updateBackendService(apigwId, curServiceDetail.value.id, params);
+      res = await updateBackendService(apigwId, curServiceDetail.value.id, params);
     }
     if (isPublish.value && props.editId) {
       sidesliderConfi.isShow = false;
 
-      const stageNames = stageConfig.value?.map((item: any) => {
-        return item.name;
-      });
+      // const stageNames = stageConfig.value?.map((item: any) => {
+      //   return item.name;
+      // });
 
-      if (stageNames?.length) {
+      if (res?.updated_stages?.length) {
         publishDialog.isShow = true;
-        publishDialog.stageNames = stageNames;
+        publishDialog.stageNames = res?.updated_stages;
       } else {
         InfoBox({
           title: t('后端服务内容保存成功'),

diff --git a/src/dashboard-front/src/views/online-debug/components/edit-table.vue b/src/dashboard-front/src/views/online-debug/components/edit-table.vue
@@ -175,6 +175,8 @@ const props = defineProps({
   },
 });
 
+const emit = defineEmits(['change']);
+
 const isShowVarPopover = ref(false);
 
 const formRefs = ref(new Map());
@@ -398,6 +400,13 @@ watch(
   },
 );
 
+watch(
+  () => tableData.value,
+  (v) => {
+    emit('change', v);
+  },
+);
+
 defineExpose({
   validate,
   getTableData,

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
@@ -44,8 +44,16 @@
           </div>
         </div> -->
     </div>
-    <edit-table v-show="type === 'data'" ref="dataRef" :list="fromDataList" />
-    <edit-table v-show="type === 'urlencoded'" ref="urlencodedRef" :list="urlencodedList" />
+    <edit-table
+      v-show="type === 'data'"
+      ref="dataRef"
+      @change="handleDataChange"
+      :list="fromDataList" />
+    <edit-table
+      v-show="type === 'urlencoded'"
+      ref="urlencodedRef"
+      @change="handleUrlencodedChange"
+      :list="urlencodedList" />
     <div class="raw-content" v-show="type === 'raw'">
       <editor-monaco
         v-model="editorText"
@@ -80,6 +88,8 @@ const props = defineProps({
   },
 });
 
+const emit = defineEmits(['dataChange', 'urlencodedChange']);
+
 const type = ref<string>('raw');
 const rawType = ref<string>('JSON');
 const dataRef = ref();
@@ -127,6 +137,14 @@ const getData = () => {
   };
 };
 
+const handleDataChange = (list: any) => {
+  emit('dataChange', list);
+};
+
+const handleUrlencodedChange = (list: any) => {
+  emit('urlencodedChange', list);
+};
+
 watch(
   () => props.fromDataPayload,
   (v: any) => {

diff --git a/src/dashboard-front/src/views/online-debug/components/payload-headers.vue b/src/dashboard-front/src/views/online-debug/components/payload-headers.vue
@@ -14,7 +14,7 @@
       </template>
       <template #content>
         <div>
-          <edit-table ref="editTableRef" :list="headerList" />
+          <edit-table ref="editTableRef" :list="headerList" @change="handleChange" />
         </div>
       </template>
     </bk-collapse-panel>
@@ -36,6 +36,8 @@ const props = defineProps({
   },
 });
 
+const emit = defineEmits(['change']);
+
 const activeIndex = ref<number[]>([1]);
 const editTableRef = ref();
 const headerList = ref<any[]>([]);
@@ -48,6 +50,10 @@ const getData = () => {
   return editTableRef.value?.getTableData();
 };
 
+const handleChange = (list: any) => {
+  emit('change', list);
+};
+
 watch(
   () => props.headersPayload,
   (v: any) => {

diff --git a/src/dashboard-front/src/views/online-debug/components/payload-params.vue b/src/dashboard-front/src/views/online-debug/components/payload-params.vue
@@ -14,7 +14,7 @@
       </template>
       <template #content>
         <div>
-          <edit-table ref="queryRef" :list="queryList" />
+          <edit-table ref="queryRef" :list="queryList" @change="handleQueryChange" />
         </div>
       </template>
     </bk-collapse-panel>
@@ -29,7 +29,7 @@
       </template>
       <template #content>
         <div>
-          <edit-table ref="pathRef" :list="pathList" />
+          <edit-table ref="pathRef" :list="pathList" @change="handlePathChange" />
         </div>
       </template>
     </bk-collapse-panel>
@@ -59,6 +59,8 @@ const props = defineProps({
   },
 });
 
+const emit = defineEmits(['queryChange', 'pathChange']);
+
 const queryRef = ref();
 const queryList = ref<any[]>([]);
 const pathRef = ref();
@@ -82,6 +84,14 @@ const getData = () => {
   };
 };
 
+const handleQueryChange = (list: any) => {
+  emit('queryChange', list);
+};
+
+const handlePathChange = (list: any) => {
+  emit('pathChange', list);
+};
+
 watch(
   () => [props.queryPayload, props.pathPayload, props.priorityPath],
   ([v1, v2, v3]) => {

diff --git a/src/dashboard-front/src/views/online-debug/components/request-payload.vue b/src/dashboard-front/src/views/online-debug/components/request-payload.vue
@@ -5,21 +5,44 @@
     class="payload-tab"
   >
     <bk-tab-panel label="Body" name="Body">
+      <template #label>
+        <div :class="['tab-label', active?.includes('Body') ? 'active' : '']">
+          <span class="title">Body</span>
+          <!-- <span class="count">{{ Number(dataList?.length + urlencodedList?.length) || 0 }}</span> -->
+        </div>
+      </template>
       <payload-body
         ref="payloadBodyRef"
         :from-data-payload="schema.fromDataPayload"
-        :raw-payload="schema.rawPayload" />
+        :raw-payload="schema.rawPayload"
+        @data-change="dataChange"
+        @urlencoded-change="urlencodedChange" />
     </bk-tab-panel>
     <bk-tab-panel label="Params" name="Params">
+      <template #label>
+        <div :class="['tab-label', active?.includes('Params') ? 'active' : '']">
+          <span class="title">Params</span>
+          <span class="count">{{ Number(queryList?.length + pathList?.length) || 0 }}</span>
+        </div>
+      </template>
       <payload-params
         :query-payload="schema.queryPayload"
         :path-payload="schema.pathPayload"
         :priority-path="schema.priorityPath"
+        @query-change="queryChange"
+        @path-change="pathChange"
         ref="payloadParamsRef" />
     </bk-tab-panel>
     <bk-tab-panel label="Headers" name="Headers">
+      <template #label>
+        <div :class="['tab-label', active?.includes('Headers') ? 'active' : '']">
+          <span class="title">Headers</span>
+          <span class="count">{{ headersList?.length || 0 }}</span>
+        </div>
+      </template>
       <payload-headers
         :headers-payload="schema.headersPayload"
+        @change="headersChange"
         ref="payloadHeadersRef" />
     </bk-tab-panel>
   </bk-tab>
@@ -66,6 +89,31 @@ const getData = () => {
   };
 };
 
+const headersList = ref<any>([]);
+const headersChange = (list: any) => {
+  headersList.value = list;
+};
+
+const queryList = ref<any>([]);
+const queryChange = (list: any) => {
+  queryList.value = list;
+};
+
+const pathList = ref<any>([]);
+const pathChange = (list: any) => {
+  pathList.value = list;
+};
+
+const dataList = ref<any>([]);
+const dataChange = (list: any) => {
+  dataList.value = list;
+};
+
+const urlencodedList = ref<any>([]);
+const urlencodedChange = (list: any) => {
+  urlencodedList.value = list;
+};
+
 watch(
   () => props.tab,
   (v) => {
@@ -85,5 +133,28 @@ defineExpose({
   :deep(.bk-tab-content) {
     padding: 12px 24px 12px 0px;
   }
+  .tab-label {
+    .title {
+      font-size: 14px;
+      color: #63656E;
+      margin-right: 4px;
+    }
+    .count {
+      padding: 0px 8px;
+      font-size: 12px;
+      color: #979BA5;
+      background: #F0F1F5;
+      border-radius: 8px;
+    }
+    &.active {
+      .title {
+        color: #3A84FF;
+      }
+      .count {
+        color: #3A84FF;
+        background: #E1ECFF;
+      }
+    }
+  }
 }
-</style>
+</style>
diff --git a/src/dashboard-front/src/views/online-debug/components/request-record.vue b/src/dashboard-front/src/views/online-debug/components/request-record.vue
@@ -3,6 +3,7 @@
     v-model:isShow="isShow"
     :title="t('调用历史')"
     :width="960"
+    class="sutra-scrollbar"
     quick-close>
     <template #default>
       <div class="history-container">
@@ -237,9 +238,16 @@ defineExpose({
       max-height: 600px;
       padding: 12px 0;
       background: #FFFFFF;
-      border: 1px solid #DCDEE5;
       border-radius: 2px;
     }
   }
 }
+.sutra-scrollbar {
+  :deep(.bk-modal-content) {
+    scrollbar-gutter: auto;
+  }
+  :deep(.bk-table-body) {
+    scrollbar-gutter: auto;
+  }
+}
 </style>