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

* 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: 修复编辑基础信息弹框中维护人员不回显的问题 (TencentBlueKing#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: 在线调试请求详情接口对接&资源列表接口替换&日志图表和下载参数修改 --------- 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>
ielgnaw · Aug 5, 2024 · 26278f1 · 26278f1
1 parent 7728221
commit 26278f1
Show file tree

Hide file tree

Showing 13 changed files with 266 additions and 113 deletions.
diff --git a/src/dashboard-front/src/http/access-log.ts b/src/dashboard-front/src/http/access-log.ts
@@ -14,7 +14,7 @@ export const fetchApigwAccessLogList = (apigwId: number, params: ChartInterface,
  *  获取流程日志chart
  * @param apigwId 网关id
  */
-export const fetchApigwAccessLogChart = (apigwId: number, params: ChartInterface)  => fetch.get(`${BK_DASHBOARD_URL}/gateways/${apigwId}/logs/timechart/?${json2Query(params)}`);
+export const fetchApigwAccessLogChart = (apigwId: number, params: ChartInterface, extraStr?: string)  => fetch.get(`${BK_DASHBOARD_URL}/gateways/${apigwId}/logs/timechart/?${json2Query(params)}${extraStr}`);
 
 /**
  *  获取流程日志link

diff --git a/src/dashboard-front/src/http/online-test.ts b/src/dashboard-front/src/http/online-test.ts
@@ -17,6 +17,14 @@ export const getReleaseResources = (apigwId: number, stageId: string) => fetch.g
  */
 export const getStages = (apigwId: number, data: any) => fetch.get(`${BK_DASHBOARD_URL}/gateways/${apigwId}/stages/?${json2Query(data)}`);
 
+/**
+ *  获取环境下可用的资源列表接口(在线调试)
+ * @param apigwId 网关id
+ * @returns
+ */
+export const getResourcesOnline = (apigwId: number, stageId: number, data: any) => fetch.get(`${BK_DASHBOARD_URL}/gateways/${apigwId}/releases/stages/${stageId}/resources/?${json2Query(data)}`);
+
+
 /**
  *  在线调试发起请求
  * @param apigwId 网关id
@@ -53,3 +61,10 @@ export const resourceSchema = (gatewayId: number, stageId: number, resourceId: n
  * @returns
  */
 export const getTestHistories = (apigwId: number, data: any) => fetch.get(`${BK_DASHBOARD_URL}/gateways/${apigwId}/tests/histories/?${json2Query(data)}`);
+
+/**
+ *  获取调用历史详情
+ * @param apigwId 网关id
+ * @returns
+ */
+export const getTestHistoriesDetails = (apigwId: number, id: number) => fetch.get(`${BK_DASHBOARD_URL}/gateways/${apigwId}/tests/histories/${id}/`);
diff --git a/src/dashboard-front/src/http/report.ts b/src/dashboard-front/src/http/report.ts
@@ -26,7 +26,7 @@ export const getApigwResources = (apigwId: number, params: any) => fetch.get(`${
  * @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' });
+export const exportLogs = async (apigwId: number, data: any, extraStr?: string) => {
+  const res = await fetch.get(`${BK_DASHBOARD_URL}/gateways/${apigwId}/logs/export/?${json2Query(data)}${extraStr}`, {}, { responseType: 'blob' });
   return blobDownLoad(res);
 };
diff --git a/src/dashboard-front/src/language/lang.ts b/src/dashboard-front/src/language/lang.ts
@@ -1301,6 +1301,7 @@ const lang: ILANG = {
   '发布人': ['Releaser'],
   '发布资源': ['Release resource'],
   '响应状态码': ['Response status code'],
+  '返回响应': ['Return response'],
   '调用时间': ['Call time'],
   '请求记录': ['Request record'],
   '检索项：': ['Search terms:'],

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
@@ -91,7 +91,7 @@
         <div
           class="td-text"
           @click="(event) => handleCellClick({ event, column, rowIndex: index })"
-          v-if="!row?.isEdit">
+          v-if="!row?.editType">
           <bk-tag
             theme="info"
             @click="(event) => handleCellClick({ event, column, rowIndex: index })">
@@ -109,6 +109,7 @@
                 :clearable="false"
                 :filterable="false"
                 v-model="row.type"
+                @toggle="(v) => handleTypeChange(index, v)"
                 @change="handleCellBlur(index)"
                 :ref="(el) => setInputRefs(el, `type-input-${index}-${column?.index}`)"
               >
@@ -196,22 +197,23 @@ const getDefaultTbRow = () => {
     type: 'string',
     instructions: '',
     isEdit: true,
+    editType: false,
   };
 };
 
 const tableData = ref<any>(props?.list?.length ? props.list : [getDefaultTbRow()]);
 
 const typeList = ref<any[]>([
   {
-    label: 'String',
+    label: 'string',
     value: 'string',
   },
   {
-    label: 'Number',
+    label: 'number',
     value: 'number',
   },
   {
-    label: 'Boolean',
+    label: 'boolean',
     value: 'boolean',
   },
 ]);
@@ -230,6 +232,10 @@ const handleCellClick = async ({ event, column, rowIndex }: any) => {
     return;
   };
   tableData.value[rowIndex].isEdit = true;
+  if (field === 'type') {
+    tableData.value[rowIndex].editType = true;
+  }
+
   nextTick(() => {
     if (field === 'type') {
       // formInputRef.value?.get(`${field}-input-${rowIndex}-${index}`)?.showPopover();
@@ -268,6 +274,10 @@ const handleCellBlur = async (index: number) => {
   }
 };
 
+const handleTypeChange = (index: number, v: boolean) => {
+  tableData.value[index].editType = v;
+};
+
 const addRow = (index: number) => {
   tableData.value?.splice(index + 1, 0, getDefaultTbRow());
 };
@@ -365,6 +375,7 @@ watch(
     v?.forEach((item: any) => {
       list.push({
         isEdit: false,
+        editType: false,
         name: item.name,
         value: item.schema?.default || '',
         instructions: item.description,

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
@@ -179,29 +179,29 @@ defineExpose({
         color: #FFFFFF;
         background: #3A84FF;
         position: relative;
-        padding-left: 36px;
-        &::before {
-          position: absolute;
-          content: ' ';
-          width: 16px;
-          height: 16px;
-          border-radius: 50%;
-          border: 1px solid #fff;
-          top: 50%;
-          transform: translateY(-50%);
-          left: 12px;
-        }
-        &::after {
-          position: absolute;
-          content: ' ';
-          width: 10px;
-          height: 10px;
-          border-radius: 50%;
-          background: #FFFFFF;
-          top: 50%;
-          transform: translateY(-50%);
-          left: 16px;
-        }
+        // padding-left: 36px;
+        // &::before {
+        //   position: absolute;
+        //   content: ' ';
+        //   width: 16px;
+        //   height: 16px;
+        //   border-radius: 50%;
+        //   border: 1px solid #fff;
+        //   top: 50%;
+        //   transform: translateY(-50%);
+        //   left: 12px;
+        // }
+        // &::after {
+        //   position: absolute;
+        //   content: ' ';
+        //   width: 10px;
+        //   height: 10px;
+        //   border-radius: 50%;
+        //   background: #FFFFFF;
+        //   top: 50%;
+        //   transform: translateY(-50%);
+        //   left: 16px;
+        // }
       }
     }
   }

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
@@ -7,7 +7,8 @@
       <template #header>
         <div class="params-header">
           <div class="params-header-title">
-            <angle-up-fill class="params-header-fold" /><span>{{ t('Headers 参数') }}</span>
+            <angle-up-fill :class="['params-header-fold', activeIndex?.includes(1) ? '' : 'fold']" />
+            <span>{{ t('Headers 参数') }}</span>
           </div>
         </div>
       </template>
@@ -78,8 +79,11 @@ defineExpose({
     display: flex;
     align-items: center;
     .params-header-fold {
-      margin-top: 2px;
       margin-right: 8px;
+      transition: all .2s;
+      &.fold {
+        transform: rotate(-90deg);
+      }
     }
   }
 }

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
@@ -7,7 +7,8 @@
       <template #header>
         <div class="params-header">
           <div class="params-header-title">
-            <angle-up-fill class="params-header-fold" /><span>{{ t('Query 参数') }}</span>
+            <angle-up-fill :class="['params-header-fold', activeIndex?.includes(1) ? '' : 'fold']" />
+            <span>{{ t('Query 参数') }}</span>
           </div>
         </div>
       </template>
@@ -21,7 +22,8 @@
       <template #header>
         <div class="params-header">
           <div class="params-header-title">
-            <angle-up-fill class="params-header-fold" /><span>{{ t('Path 参数') }}</span>
+            <angle-up-fill :class="['params-header-fold', activeIndex?.includes(2) ? '' : 'fold']" />
+            <span>{{ t('Path 参数') }}</span>
           </div>
         </div>
       </template>
@@ -51,13 +53,17 @@ const props = defineProps({
     type: Array,
     default: [],
   },
+  priorityPath: {
+    type: Array,
+    default: [],
+  },
 });
 
 const queryRef = ref();
 const queryList = ref<any[]>([]);
 const pathRef = ref();
 const pathList = ref<any[]>([]);
-const activeIndex = ref<number[]>([1, 2]);
+const activeIndex = ref<number[]>([1]);
 
 const validate = async () => {
   const query = await queryRef.value?.validate();
@@ -77,16 +83,27 @@ const getData = () => {
 };
 
 watch(
-  () => [props.queryPayload, props.pathPayload],
-  ([v1, v2]) => {
+  () => [props.queryPayload, props.pathPayload, props.priorityPath],
+  ([v1, v2, v3]) => {
     queryList.value = v1;
-    pathList.value = v2;
+    pathList.value = v3?.length ? v3 : v2;
   },
   {
     deep: true,
   },
 );
 
+watch(
+  () => pathList.value,
+  (v) => {
+    if (v?.length && v[0]?.name) {
+      activeIndex.value = [1, 2];
+    } else {
+      activeIndex.value = [1];
+    }
+  },
+);
+
 defineExpose({
   validate,
   getData,
@@ -108,8 +125,11 @@ defineExpose({
     display: flex;
     align-items: center;
     .params-header-fold {
-      margin-top: 2px;
       margin-right: 8px;
+      transition: all .2s;
+      &.fold {
+        transform: rotate(-90deg);
+      }
     }
   }
 }

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
@@ -2,6 +2,7 @@
   <bk-tab
     v-model:active="active"
     type="unborder-card"
+    class="payload-tab"
   >
     <bk-tab-panel label="Body" name="Body">
       <payload-body
@@ -13,6 +14,7 @@
       <payload-params
         :query-payload="schema.queryPayload"
         :path-payload="schema.pathPayload"
+        :priority-path="schema.priorityPath"
         ref="payloadParamsRef" />
     </bk-tab-panel>
     <bk-tab-panel label="Headers" name="Headers">
@@ -24,23 +26,27 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
+import { ref, watch } from 'vue';
 import payloadBody from './payload-body.vue';
 import payloadParams from './payload-params.vue';
 import payloadHeaders from './payload-headers.vue';
 
-const active = ref<string>('Body');
-const payloadBodyRef = ref();
-const payloadParamsRef = ref();
-const payloadHeadersRef = ref();
-
-defineProps({
+const props = defineProps({
+  tab: {
+    type: String,
+    default: 'Params',
+  },
   schema: {
     type: Object,
     default: {},
   },
 });
 
+const active = ref<string>(props.tab);
+const payloadBodyRef = ref();
+const payloadParamsRef = ref();
+const payloadHeadersRef = ref();
+
 const validate = async () => {
   const bodyValidate = await payloadBodyRef.value?.validate();
   const paramsValidate = await payloadParamsRef.value?.validate();
@@ -60,6 +66,13 @@ const getData = () => {
   };
 };
 
+watch(
+  () => props.tab,
+  (v) => {
+    active.value = v;
+  },
+);
+
 defineExpose({
   validate,
   getData,
@@ -68,28 +81,9 @@ defineExpose({
 </script>
 
 <style lang="scss" scoped>
-.payload-type {
-  display: flex;
-  align-items: center;
-  background: #F0F1F5;
-  border-radius: 2px;
-  padding: 4px;
-  .payload-type-item {
-    display: flex;
-    align-items: center;
-    font-size: 12px;
-    color: #63656E;
-    padding: 4px 10px;
-    cursor: pointer;
-    .apigateway-icon {
-      margin-right: 4px;
-      font-size: 16px;
-    }
-    &.active  {
-      color: #3A84FF;
-      background-color: #fff;
-      border-radius: 2px;
-    }
+.payload-tab {
+  :deep(.bk-tab-content) {
+    padding: 12px 24px 12px 0px;
   }
 }
 </style>