feat: 在线调试 体验问题修复

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'],

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('后端服务内容保存成功'),

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,

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) => {

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) => {

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]) => {

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 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 @@
   :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>

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>