diff --git a/frontend/src/business/components/api/definition/components/auth/ApiAuthConfig.vue b/frontend/src/business/components/api/definition/components/auth/ApiAuthConfig.vue
index 36e4004250..a1f5bc31b3 100644
--- a/frontend/src/business/components/api/definition/components/auth/ApiAuthConfig.vue
+++ b/frontend/src/business/components/api/definition/components/auth/ApiAuthConfig.vue
@@ -102,5 +102,7 @@
 </script>
 
 <style scoped>
-
+  /deep/ .el-tabs__nav-wrap::after {
+    height: 0px;
+  }
 </style>
diff --git a/frontend/src/business/components/api/definition/components/request/http/ApiHttpRequestForm.vue b/frontend/src/business/components/api/definition/components/request/http/ApiHttpRequestForm.vue
index b7b0f6735c..a90510fc67 100644
--- a/frontend/src/business/components/api/definition/components/request/http/ApiHttpRequestForm.vue
+++ b/frontend/src/business/components/api/definition/components/request/http/ApiHttpRequestForm.vue
@@ -226,5 +226,4 @@
     height: 18px;
     border-radius: 42%;
   }
-
 </style>
diff --git a/frontend/src/business/components/api/definition/components/response/RequestMetric.vue b/frontend/src/business/components/api/definition/components/response/RequestMetric.vue
index d153b89423..cb504b5703 100644
--- a/frontend/src/business/components/api/definition/components/response/RequestMetric.vue
+++ b/frontend/src/business/components/api/definition/components/response/RequestMetric.vue
@@ -1,34 +1,18 @@
 <template>
   <div class="metric-container">
     <el-row type="flex">
-      <div class="metric">
-        <div class="value">{{response.responseResult.responseTime}} ms</div>
-        <div class="name">{{$t('api_report.response_time')}}</div>
-        <br>
-        <div class="value">{{response.responseResult.latency}} ms</div>
-        <div class="name">{{$t('api_report.latency')}}</div>
-      </div>
-      <div class="metric">
-        <div class="value">{{response.requestSize}} bytes</div>
-        <div class="name">{{$t('api_report.request_size')}}</div>
-        <br>
-        <div class="value">{{response.responseResult.responseSize}} bytes</div>
-        <div class="name">{{$t('api_report.response_size')}}</div>
-      </div>
-
-      <div class="metric horizontal">
-        <el-row type="flex">
-          <div class="code">
-            <div class="value" :class="{'error': error}">{{response.responseResult.responseCode}}</div>
-            <div class="name">{{$t('api_report.response_code')}}</div>
-          </div>
-          <div class="split"></div>
-          <div class="message">
-            <div class="value">{{response.responseResult.responseMessage}}</div>
-            <div class="name">{{$t('api_report.response_message')}}</div>
-          </div>
-        </el-row>
-      </div>
+      <el-col>
+        <div style="font-size: 14px;color: #AAAAAA;float: left">{{$t('api_report.response_code')}} :</div>
+        <div style="font-size: 14px;color:#61C550;margin-top:2px;margin-left:10px;float: left">{{response.responseResult.responseCode ? response.responseResult.responseCode :'0'}}</div>
+      </el-col>
+      <el-col>
+        <div style="font-size: 14px;color: #AAAAAA;float: left">{{$t('api_report.response_time')}} :</div>
+        <div style="font-size: 14px;color:#61C550;margin-top:2px;margin-left:10px;float: left">{{response.responseResult.responseTime?response.responseResult.responseTime:0}} ms</div>
+      </el-col>
+      <el-col>
+        <div style="font-size: 14px;color: #AAAAAA;float: left">{{$t('api_report.response_size')}} :</div>
+        <div style="font-size: 14px;color:#61C550; margin-top:2px;margin-left:10px;float: left">{{response.responseResult.responseSize?response.responseResult.responseSize:0}} bytes</div>
+      </el-col>
     </el-row>
   </div>
 </template>
@@ -51,56 +35,6 @@
 
 <style scoped>
   .metric-container {
-    padding: 10px;
-  }
-
-  .metric {
-    padding: 10px;
-    border: 1px solid #EBEEF5;
-    min-width: 120px;
-    height: 114px;
-  }
-
-  .metric + .metric {
-    margin-left: 20px;
-  }
-
-  .metric .value {
-    font-size: 16px;
-    font-weight: 500;
-    word-break: break-all;
-  }
-
-  .metric .name {
-    color: #404040;
-    opacity: 0.5;
-    padding: 5px 0;
-  }
-
-  .metric.horizontal {
-    width: 100%;
-  }
-
-  .metric .code {
-    min-width: 120px;
-  }
-
-  .metric .code .value {
-    color: #67C23A;
-  }
-
-  .metric .code .value.error {
-    color: #F56C6C;
-  }
-
-  .metric .split {
-    height: 114px;
-    border-left: 1px solid #EBEEF5;
-    margin-right: 20px;
-  }
-
-  .metric .message {
-    max-height: 114px;
-    overflow-y: auto;
+    padding-bottom: 20px;
   }
 </style>
diff --git a/frontend/src/business/components/api/definition/components/response/ResponseResult.vue b/frontend/src/business/components/api/definition/components/response/ResponseResult.vue
index 8a0a36c8e9..4b34df1c5b 100644
--- a/frontend/src/business/components/api/definition/components/response/ResponseResult.vue
+++ b/frontend/src/business/components/api/definition/components/response/ResponseResult.vue
@@ -86,7 +86,7 @@
     },
     computed: {
       isSqlType() {
-        return (this.currentProtocol === "SQL" && this.response.responseResult.responseCode === '200' && this.mode ==='table');
+        return (this.currentProtocol === "SQL" && this.response.responseResult.responseCode === '200' && this.mode === 'table');
       }
     }
   }
@@ -120,6 +120,10 @@
     padding: 0;
   }
 
+  /deep/ .el-tabs__nav-wrap::after {
+    height: 0px;
+  }
+
   pre {
     margin: 0;
   }
diff --git a/frontend/src/business/components/xpack b/frontend/src/business/components/xpack
index a22a3005d9..8a972a1987 160000
--- a/frontend/src/business/components/xpack
+++ b/frontend/src/business/components/xpack
@@ -1 +1 @@
-Subproject commit a22a3005d9bd254793fcf634d72539cbdf31be3a
+Subproject commit 8a972a198775b3783ed6e4cef27197e53d1ebdc8