diff --git a/src/dashboard-front/src/language/lang.ts b/src/dashboard-front/src/language/lang.ts
index ef632be81..4fb193730 100644
--- 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
index 9c8b6ffa8..a53b0a294 100644
--- 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
index ebc405e07..56649b067 100644
--- 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
index 7b0a83766..3799a6da4 100644
--- 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
index 296c1e665..06a664fc0 100644
--- 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
index 3bcc849fd..1c3afa678 100644
--- 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
index aa129a399..98b6f11ba 100644
--- 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>
\ No newline at end of file
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
index 753cda283..a35e14fb7 100644
--- 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>
diff --git a/src/dashboard-front/src/views/online-debug/index.vue b/src/dashboard-front/src/views/online-debug/index.vue
index 9fdf00bc7..7beca24e6 100644
--- a/src/dashboard-front/src/views/online-debug/index.vue
+++ b/src/dashboard-front/src/views/online-debug/index.vue
@@ -26,7 +26,7 @@
         <div class="search-source">
           <bk-input
             v-model="keyword"
-            :clearable="false"
+            :clearable="true"
             type="search"
           />
         </div>
@@ -97,7 +97,7 @@
                     </div>
                     <div class="source-path">
                       <div class="request-path-box">
-                        <bk-tag theme="success">{{ curResource?.method }}</bk-tag>
+                        <bk-tag theme="success" class="method-tag">{{ curResource?.method }}</bk-tag>
                         <span class="request-path">{{ curResource?.path }}</span>
                       </div>
                       <bk-button class="fixed-w" theme="primary" @click="handleSend" :loading="isLoading">
@@ -115,55 +115,66 @@
                       {{ t('应用认证') }}：
                     </div>
                     <div class="request-setting-main">
-                      <template v-if="!appAuthorization.isEdit">
-                        <span>
-                          ({{ isDefaultAppAuth ? t('默认测试应用') : t('自定义应用') }})
-                          bk_app_code：{{ isDefaultAppAuth ? testAppCode : formData.authorization.bk_app_code }}；
-                          bk_app_secret：{{ isDefaultAppAuth ? '******' : formData.authorization.bk_app_secret }}
-                        </span>
-                        <edit-line class="edit-auth" @click="handleEditAppAuth" />
-                      </template>
-                      <div class="edit-user-auth" v-else>
-                        <bk-radio-group v-model="appAuthorization.appAuth" class="auth-type">
-                          <bk-radio-button label="use_test_app">{{ t('默认测试应用') }}</bk-radio-button>
-                          <bk-radio-button label="use_custom_app">{{ t('自定义应用') }}</bk-radio-button>
-                        </bk-radio-group>
-                        <template v-if="appAuthorization.appAuth === 'use_test_app'">
-                          <bk-input
-                            class="auth-value"
-                            prefix="bk_app_code"
-                            :value="testAppCode"
-                            :disabled="true"
-                          />
-                          <bk-input
-                            class="auth-value"
-                            prefix="bk_app_secret"
-                            :value="'******'"
-                            :disabled="true"
-                          />
-                        </template>
-                        <template v-else>
-                          <bk-input
-                            class="auth-value"
-                            prefix="bk_app_code"
-                            v-model="appAuthorization.bk_app_code"
-                            :placeholder="t('请输入蓝鲸应用ID')"
-                          />
-                          <bk-input
-                            class="auth-value"
-                            prefix="bk_app_secret"
-                            v-model="appAuthorization.bk_app_secret"
-                            :placeholder="t('请输入蓝鲸应用密钥')"
-                          />
-                        </template>
-                        <div class="edit-user-tips">
-                          <info-line /> <span class="tips">{{ t('默认测试应用，网关自动为其短期授权；自定义应用，需主动为应用授权资源访问权限') }}</span>
+                      <bk-pop-confirm
+                        width="470"
+                        trigger="click"
+                        @confirm="saveAppAuthEdit"
+                        @cancel="cancelAppAuthEdit"
+                      >
+                        <div>
+                          <span>
+                            ({{ isDefaultAppAuth ? t('默认测试应用') : t('自定义应用') }})
+                            bk_app_code：{{ isDefaultAppAuth ? testAppCode : formData.authorization.bk_app_code }}；
+                            bk_app_secret：{{ isDefaultAppAuth ? '******' : formData.authorization.bk_app_secret }}
+                          </span>
+                          <edit-line class="edit-auth" @click="handleEditAppAuth" />
                         </div>
-                        <div class="edit-user-btns">
+
+                        <template #content>
+                          <div class="edit-user-auth">
+                            <div class="title">{{ t('应用认证') }}<span>*</span></div>
+                            <bk-radio-group v-model="appAuthorization.appAuth" class="auth-type">
+                              <bk-radio-button label="use_test_app">{{ t('默认测试应用') }}</bk-radio-button>
+                              <bk-radio-button label="use_custom_app">{{ t('自定义应用') }}</bk-radio-button>
+                            </bk-radio-group>
+                            <template v-if="appAuthorization.appAuth === 'use_test_app'">
+                              <bk-input
+                                class="auth-value"
+                                prefix="bk_app_code"
+                                :value="testAppCode"
+                                :disabled="true"
+                              />
+                              <bk-input
+                                class="auth-value"
+                                prefix="bk_app_secret"
+                                :value="'******'"
+                                :disabled="true"
+                              />
+                            </template>
+                            <template v-else>
+                              <bk-input
+                                class="auth-value"
+                                prefix="bk_app_code"
+                                v-model="appAuthorization.bk_app_code"
+                                :placeholder="t('请输入蓝鲸应用ID')"
+                              />
+                              <bk-input
+                                class="auth-value"
+                                prefix="bk_app_secret"
+                                v-model="appAuthorization.bk_app_secret"
+                                :placeholder="t('请输入蓝鲸应用密钥')"
+                              />
+                            </template>
+                            <div class="edit-user-tips">
+                              <info-line /> <span class="tips">{{ t('默认测试应用，网关自动为其短期授权；自定义应用，需主动为应用授权资源访问权限') }}</span>
+                            </div>
+                            <!-- <div class="edit-user-btns">
                           <bk-button theme="primary" @click="saveAppAuthEdit">{{ t('保存') }}</bk-button>
                           <bk-button class="ml8" @click="cancelAppAuthEdit">{{ t('取消') }}</bk-button>
-                        </div>
-                      </div>
+                        </div> -->
+                          </div>
+                        </template>
+                      </bk-pop-confirm>
                     </div>
                   </div>
                   <div class="request-setting-item top-flush" v-if="curResource?.verified_user_required">
@@ -171,44 +182,55 @@
                       {{ t('用户认证') }}：
                     </div>
                     <div class="request-setting-main">
-                      <template v-if="!userCookies.isEdit">
-                        <span>
-                          ({{ formData.useUserFromCookies ? t('默认用户认证') : t('自定义用户认证') }})
-                          bk_token：{{ formData.useUserFromCookies ? '******' : formData.authorization.bk_token}}
-                        </span>
-                        <edit-line class="edit-auth" @click="handleEditUserAuth" />
-                      </template>
-                      <div class="edit-user-auth" v-else>
-                        <bk-radio-group class="auth-type" v-model="userCookies.useUserFromCookies">
-                          <bk-radio-button :label="true">{{ t('默认用户认证') }}</bk-radio-button>
-                          <bk-radio-button :label="false">{{ t('自定义用户认证') }}</bk-radio-button>
-                        </bk-radio-group>
-                        <template v-if="userCookies.useUserFromCookies">
-                          <bk-input
-                            class="auth-value"
-                            prefix="bk_token"
-                            :placeholder="t('请输入 Cookies 中，字段 bk_token 的值')"
-                            :value="'******'"
-                            :disabled="true"
-                          />
-                        </template>
-                        <template v-else>
-                          <bk-input
-                            class="auth-value"
-                            prefix="bk_token"
-                            :placeholder="t('请输入 Cookies 中，字段 bk_token 的值')"
-                            v-model="userCookies.bk_token"
-                          />
-                        </template>
-
-                        <div class="edit-user-tips">
-                          <info-line /> <span class="tips">{{ t('默认测试应用，网关自动为其短期授权；自定义应用，需主动为应用授权资源访问权限') }}</span>
+                      <bk-pop-confirm
+                        width="470"
+                        trigger="click"
+                        @confirm="saveUserAuthEdit"
+                        @cancel="cancelUserAuthEdit"
+                      >
+                        <div>
+                          <span>
+                            ({{ formData.useUserFromCookies ? t('默认用户认证') : t('自定义用户认证') }})
+                            bk_token：{{ formData.useUserFromCookies ? '******' : formData.authorization.bk_token}}
+                          </span>
+                          <edit-line class="edit-auth" @click="handleEditUserAuth" />
                         </div>
-                        <div class="edit-user-btns">
+
+                        <template #content>
+                          <div class="edit-user-auth">
+                            <div class="title">{{ t('用户认证') }}<span>*</span></div>
+                            <bk-radio-group class="auth-type" v-model="userCookies.useUserFromCookies">
+                              <bk-radio-button :label="true">{{ t('默认用户认证') }}</bk-radio-button>
+                              <bk-radio-button :label="false">{{ t('自定义用户认证') }}</bk-radio-button>
+                            </bk-radio-group>
+                            <template v-if="userCookies.useUserFromCookies">
+                              <bk-input
+                                class="auth-value"
+                                prefix="bk_token"
+                                :placeholder="t('请输入 Cookies 中，字段 bk_token 的值')"
+                                :value="'******'"
+                                :disabled="true"
+                              />
+                            </template>
+                            <template v-else>
+                              <bk-input
+                                class="auth-value"
+                                prefix="bk_token"
+                                :placeholder="t('请输入 Cookies 中，字段 bk_token 的值')"
+                                v-model="userCookies.bk_token"
+                              />
+                            </template>
+
+                            <div class="edit-user-tips">
+                              <info-line /> <span class="tips">{{ t('默认测试应用，网关自动为其短期授权；自定义应用，需主动为应用授权资源访问权限') }}</span>
+                            </div>
+                            <!-- <div class="edit-user-btns">
                           <bk-button theme="primary" @click="saveUserAuthEdit">{{ t('保存') }}</bk-button>
                           <bk-button class="ml8" @click="cancelUserAuthEdit">{{ t('取消') }}</bk-button>
-                        </div>
-                      </div>
+                        </div> -->
+                          </div>
+                        </template>
+                      </bk-pop-confirm>
                     </div>
                   </div>
                   <div class="request-setting-item request-source-path">
@@ -217,7 +239,7 @@
                     </div>
                     <div class="request-setting-main source-path">
                       <div class="request-path-box">
-                        <bk-tag theme="success">{{ curResource?.method }}</bk-tag>
+                        <bk-tag theme="success" class="method-tag">{{ curResource?.method }}</bk-tag>
                         <span class="request-path">{{ curResource?.path }}</span>
                       </div>
                       <bk-button class="fixed-w" theme="primary" @click="handleSend" :loading="isLoading">
@@ -810,14 +832,14 @@ watch(
   },
 );
 
-watch(
-  () => curGroup.value,
-  () => {
-    if (curGroup.value) {
-      activeName.value = [curGroup.value?.labelName];
-    }
-  },
-);
+// watch(
+//   () => curGroup.value,
+//   () => {
+//     if (curGroup.value) {
+//       activeName.value = [curGroup.value?.labelName];
+//     }
+//   },
+// );
 
 watch(
   () => keyword.value,
@@ -877,7 +899,7 @@ watch(
     background: #FFFFFF;
     box-shadow: 0 2px 4px 0 #1919290d;
     .request-setting-title {
-      padding: 24px 24px 16px;
+      padding: 24px 24px 4px;
       .request-source-name {
         display: flex;
         align-items: center;
@@ -923,7 +945,7 @@ watch(
   }
   .request-setting-collapse {
     :deep(.bk-collapse-content) {
-      padding: 0px 45px 24px 45px;
+      padding: 0px 45px 20px 45px;
     }
   }
 }
@@ -961,6 +983,16 @@ watch(
   }
 }
 .edit-user-auth {
+  .title {
+    font-size: 12px;
+    color: #63656E;
+    margin-bottom: 8px;
+    span {
+      color: #EA3636;
+      margin-left: 6px;
+      vertical-align: middle;
+    }
+  }
   .auth-type {
     margin-bottom: 16px;
   }
@@ -968,8 +1000,7 @@ watch(
     margin-bottom: 16px;
   }
   .edit-user-tips {
-    margin-top: -8px;
-    margin-bottom: 16px;
+    margin-bottom: 8px;
     display: flex;
     align-items: center;
     font-size: 14px;
@@ -981,8 +1012,7 @@ watch(
   }
 }
 .seldom-path {
-  padding-left: 20px;
-  padding-top: 8px;
+  padding: 2px 20px 20px;
 }
 .request-payload {
   background: #FFFFFF;
@@ -1110,6 +1140,16 @@ watch(
   :deep(.bk-resize-trigger:hover) {
     border-top: 2px solid #3a84ff;
   }
+  :deep(.bk-resize-layout-aside:after) {
+    bottom: -5px;
+  }
+}
+.fixed-w {
+  width: 88px;
+}
+.method-tag {
+  height: 16px;
+  line-height: 16px;
 }
 .fixed-w {
   width: 88px;