diff --git a/frontend/src/business/components/api/definition/components/complete/EditCompleteHTTPApi.vue b/frontend/src/business/components/api/definition/components/complete/EditCompleteHTTPApi.vue
index 30b3964cc9..fa7e50b04e 100644
--- a/frontend/src/business/components/api/definition/components/complete/EditCompleteHTTPApi.vue
+++ b/frontend/src/business/components/api/definition/components/complete/EditCompleteHTTPApi.vue
@@ -154,10 +154,6 @@
           :response="response"
           :old-response="oldResponse"
         ></http-api-version-diff>
-        <span slot="footer" class="dialog-footer">
-          <el-button @click="dialogVisible=false">取 消</el-button>
-          <el-button type="primary" >确 定</el-button>
-        </span>
       </el-dialog>
 
     </el-card>
@@ -182,6 +178,7 @@ import {createComponent } from ".././jmeter/components";
 import { TYPE_TO_C} from "@/business/components/api/automation/scenario/Setting";
 
 const {Body} = require("@/business/components/api/definition/model/ApiTestModel");
+const Sampler = require("@/business/components/api/definition/components/jmeter/components/sampler/sampler");
 
 const requireComponent = require.context('@/business/components/xpack/', true, /\.vue$/);
 const versionHistory = requireComponent.keys().length > 0 ? requireComponent("./version/VersionHistory.vue") : {};
@@ -235,7 +232,7 @@ export default {
       newMockBaseUrl: "",
       count: 0,
       versionData: [],
-      oldRequest:{},
+      oldRequest:Sampler,
       oldResponse:{}
     };
   },
@@ -441,7 +438,6 @@ export default {
               this.httpForm.versionId = this.$refs.versionHistory.currentVersion.id;
             }
           }
-
           this.$emit('saveApi', this.httpForm);
           this.count = 0;
           this.$store.state.apiMap.delete(this.httpForm.id);
@@ -555,14 +551,12 @@ export default {
             this.setRequest(res.data)
             if (!this.setRequest(res.data)) {
               this.oldRequest = createComponent("HTTPSamplerProxy");
+              this.dialogVisible = true;
             }
             this.formatApi(res.data)
           }
         });
       });
-      if(this.newData){
-        this.dialogVisible = true;
-      }
     },
     setRequest(api) {
       if (api.request !== undefined) {
@@ -574,6 +568,7 @@ export default {
         if (!this.oldRequest.headers) {
           this.oldRequest.headers = [];
         }
+        this.dialogVisible = true;
         return true;
       }
       return false;
diff --git a/frontend/src/business/components/api/definition/components/complete/version/HttpApiVersionDiff.vue b/frontend/src/business/components/api/definition/components/complete/version/HttpApiVersionDiff.vue
index 30d1806ae0..2e9e8c24ee 100644
--- a/frontend/src/business/components/api/definition/components/complete/version/HttpApiVersionDiff.vue
+++ b/frontend/src/business/components/api/definition/components/complete/version/HttpApiVersionDiff.vue
@@ -111,7 +111,24 @@
       <ms-form-divider :title="$t('api_test.definition.request.res_param')"/>
       <ms-response-text :response="response"/>
 
-      <api-other-info :api="oldData"/>
+      <ms-form-divider :title="$t('test_track.case.other_info')"/>
+      <api-info-container>
+        <el-form :model="oldData" ref="api-form" label-width="100px">
+          <el-collapse-transition>
+            <el-tabs v-model="activeName" style="margin: 20px">
+              <el-tab-pane :label="$t('commons.remark')" name="remark" class="pane">
+                <form-rich-text-item class="remark-item" :disabled="true" :data="oldData" prop="remark" label-width="0"/>
+              </el-tab-pane>
+              <el-tab-pane :label="$t('commons.relationship.name')" name="dependencies" class="pane">
+                <template v-slot:label>
+                  <tab-pane-count :title="$t('commons.relationship.name')" :count="oldRelationshipCount"/>
+                </template>
+                <dependencies-list  @setCount="setOldCount" :read-only="true" :resource-id="oldData.id" resource-type="API" ref="oldDependencies"/>
+              </el-tab-pane>
+            </el-tabs>
+          </el-collapse-transition>
+        </el-form>
+      </api-info-container>
 
     </el-card>
     <el-card style="width: 50%;" ref="new">
@@ -225,9 +242,26 @@
       <ms-form-divider :title="$t('api_test.definition.request.res_param')"/>
       <ms-response-text :response="oldResponse"/>
 
-      <api-other-info :api="newData"/>
+      <!-- 其他信息-->
+      <ms-form-divider :title="$t('test_track.case.other_info')"/>
+      <api-info-container>
+        <el-form :model="newData" ref="api-form" label-width="100px">
+          <el-collapse-transition>
+            <el-tabs v-model="activeName" style="margin: 20px">
+              <el-tab-pane :label="$t('commons.remark')" name="remark" class="pane">
+                <form-rich-text-item class="remark-item" :disabled="true" :data="newData" prop="remark" label-width="0"/>
+              </el-tab-pane>
+              <el-tab-pane :label="$t('commons.relationship.name')" name="dependencies" class="pane">
+                <template v-slot:label>
+                  <tab-pane-count :title="$t('commons.relationship.name')" :count="relationshipCount"/>
+                </template>
+                <dependencies-list @setCount="setCount" :read-only="true" :resource-id="newData.id" resource-type="API" ref="newDependencies"/>
+              </el-tab-pane>
+            </el-tabs>
+          </el-collapse-transition>
+        </el-form>
+      </api-info-container>
     </el-card>
-    <button @click="getDiff"></button>
   </div>
 </template>
 <script>
@@ -238,6 +272,12 @@ import MsResponseText from "../../response/ResponseText";
 import MsApiRequestForm from "../../request/http/ApiHttpRequestForm";
 import MsSelectTree from "../../../../../common/select-tree/SelectTree";
 import MsInputTag from "@/business/components/api/automation/scenario/MsInputTag";
+import ApiInfoContainer from "@/business/components/api/definition/components/complete/ApiInfoContainer";
+import DependenciesList from "@/business/components/common/components/graph/DependenciesList";
+import FormRichTextItem from "@/business/components/track/case/components/FormRichTextItem";
+import {hasPermissions} from "@/common/js/utils";
+import TabPaneCount from "@/business/components/track/plan/view/comonents/report/detail/component/TabPaneCount";
+import {getRelationshipCountApi} from "@/network/api";
 
 const {diff} = require("@/business/components/performance/v_node_diff");
 
@@ -250,6 +290,10 @@ export default{
     MsApiRequestForm,
     MsInputTag,
     MsSelectTree,
+    TabPaneCount,
+    FormRichTextItem,
+    DependenciesList,
+    ApiInfoContainer
   },
   props:{
     oldData:{
@@ -280,7 +324,29 @@ export default{
     response: {},
     oldResponse:{}
   },
-
+  computed: {
+    hasPermissions() {
+      return hasPermissions('PROJECT_API_DEFINITION:READ+EDIT_API');
+    }
+  },
+  watch: {
+    activeName() {
+      if (this.activeName === 'dependencies') {
+        this.$refs.oldDependencies.open();
+        this.$refs.newDependencies.open();
+      }
+    },
+    relationshipCount(){
+      if(this.relationshipCount>0||this.oldRelationshipCount>0){
+        this.getChildDiff()
+      }
+    },
+    oldRelationshipCount(){
+      if(this.relationshipCount>0||this.oldRelationshipCount>0){
+        this.getChildDiff()
+      }
+    }
+  },
   data(){
     return{
       reqOptions: REQ_METHOD,
@@ -290,19 +356,49 @@ export default{
         label: 'name',
       },
       isShowEnable: true,
+      activeName: 'remark',
+      relationshipCount: 0,
+      oldRelationshipCount: 0,
     }
   },
   methods:{
     getDiff(){
       let oldVnode = this.$refs.old
       let vnode = this.$refs.new
-      //oldVnode.style.backgroundColor = "rgb(241,200,196)";
-      console.log(this.$refs.old)
-      console.log(this.$refs.new)
       diff(oldVnode,vnode);
+    },
+    setCount(count) {
+      this.relationshipCount = count;
+      this.$nextTick(function () {
+        setTimeout(this.getChildDiff,1000)
+      })
+    },
+    setOldCount(count) {
+      this.oldRelationshipCount = count;
+
+    },
+    getChildDiff(){
+      let oldVnode = this.$refs.oldDependencies
+      let vnode = this.$refs.newDependencies
+      if(oldVnode._data.postCount>0||oldVnode._data.preCount>0||vnode._data.postCount>0||vnode._data.preCount>0){
+        diff(oldVnode,vnode);
+      }
+
     }
   },
+  mounted() {
+    getRelationshipCountApi(this.newData.id, (data) => {
+      this.relationshipCount = data;
+    });
+    getRelationshipCountApi(this.oldData.id, (data) => {
+      this.oldRelationshipCount = data;
+    });
+    this.$nextTick(function () {
+      setTimeout(this.getDiff,(this.$refs.old.$children.length+1)/2*1000)
+    })
+  },
   created() {
+
   }
 }
 </script>
diff --git a/frontend/src/business/components/performance/test/DiffVersion.vue b/frontend/src/business/components/performance/test/DiffVersion.vue
index 4d49d57aef..8f8163347f 100644
--- a/frontend/src/business/components/performance/test/DiffVersion.vue
+++ b/frontend/src/business/components/performance/test/DiffVersion.vue
@@ -1,6 +1,7 @@
 <template>
-  <div class="compare-class">
-    <el-card style="width: 50%;" ref="old">
+  <div class="compare-class" id="vdiff" ref="all" >
+    <el-card style="width: 50%;" ref="old" id="old">
+      <ms-form-divider :title="$t('test_track.plan_view.base_info')"/>
       <el-row>
         <el-col :span="12">
           <el-form :inline="true">
@@ -23,19 +24,22 @@
         </el-col>
       </el-row>
 
-      <el-tabs v-model="active" @tab-click="clickTab">
-        <el-tab-pane :label="$t('load_test.basic_config')" class="advanced-config">
-          <performance-basic-config :is-read-only="true" :test="oldData" @fileChange="fileChange"  ref="basicConfig" />
-        </el-tab-pane>
-        <el-tab-pane :label="$t('load_test.pressure_config')" class="advanced-config">
-          <performance-pressure-config :is-read-only="true" :test="oldData" :test-id="oldData.id" @fileChange="fileChange" ref="pressureConfig"/>
-        </el-tab-pane>
-        <el-tab-pane :label="$t('load_test.advanced_config')" class="advanced-config">
-          <performance-advanced-config :read-only="true" :test-id="oldData.id" ref="advancedConfig"/>
-        </el-tab-pane>
-      </el-tabs>
+      <ms-form-divider :title="$t('load_test.basic_config')"/>
+      <el-row>
+        <performance-basic-config :is-read-only="true" :test="oldData" @fileChange="fileChange"  ref="basicConfig" />
+      </el-row>
+      <ms-form-divider :title="$t('load_test.pressure_config')"/>
+      <el-row>
+        <performance-pressure-config :is-read-only="true" :test="oldData" :test-id="oldData.id" @fileChange="fileChange" ref="pressureConfig"/>
+      </el-row>
+      <ms-form-divider :title="$t('load_test.advanced_config')"/>
+      <el-row>
+        <performance-advanced-config :read-only="true" :test-id="oldData.id" ref="advancedConfig"/>
+      </el-row>
+
     </el-card>
-    <el-card style="width: 50%;" ref="new">
+    <el-card style="width: 50%;" ref="new" id="new">
+      <ms-form-divider :title="$t('test_track.plan_view.base_info')"/>
       <el-row>
         <el-col :span="12">
           <el-form :inline="true">
@@ -58,30 +62,30 @@
         </el-col>
       </el-row>
 
-      <el-tabs v-model="active" @tab-click="clickTab">
-        <el-tab-pane :label="$t('load_test.basic_config')" class="advanced-config">
-          <performance-basic-config :is-read-only="true" :test="newData" @fileChange="fileNewChange"  ref="newBasicConfig" />
-        </el-tab-pane>
-        <el-tab-pane :label="$t('load_test.pressure_config')" class="advanced-config">
-          <performance-pressure-config :is-read-only="true" :test="newData" :test-id="newData.id"  @fileChange="fileNewChange" ref="newPressureConfig" />
-        </el-tab-pane>
-        <el-tab-pane :label="$t('load_test.advanced_config')" class="advanced-config">
-          <performance-advanced-config :read-only="true" :test-id="newData.id" ref="newAdvancedConfig" />
-        </el-tab-pane>
-      </el-tabs>
+      <ms-form-divider :title="$t('load_test.basic_config')"/>
+      <el-row>
+        <performance-basic-config :is-read-only="true" :test="newData" @fileChange="fileNewChange"  ref="newBasicConfig" />
+      </el-row>
+      <ms-form-divider :title="$t('load_test.pressure_config')"/>
+      <el-row>
+        <performance-pressure-config :is-read-only="true" :test="newData" :test-id="newData.id"  @fileChange="fileNewChange" ref="newPressureConfig" />
+      </el-row>
+      <ms-form-divider :title="$t('load_test.advanced_config')"/>
+      <el-row>
+        <performance-advanced-config :read-only="true" :test-id="newData.id" ref="newAdvancedConfig" />
+      </el-row>
+
     </el-card>
-    <button @click="getDiff"></button>
   </div>
 </template>
 
 <script>
 
-
-
 import EditPerformanceTest from "@/business/components/performance/test/EditPerformanceTest";
 import PerformancePressureConfig from "@/business/components/performance/test/components/PerformancePressureConfig";
 import PerformanceBasicConfig from "@/business/components/performance/test/components/PerformanceBasicConfig";
 import PerformanceAdvancedConfig from "@/business/components/performance/test/components/PerformanceAdvancedConfig";
+import MsFormDivider from "@/business/components/common/components/MsFormDivider";
 
 const {diff} = require("@/business/components/performance/v_node_diff");
 
@@ -92,6 +96,7 @@ export default{
     PerformancePressureConfig,
     PerformanceBasicConfig,
     PerformanceAdvancedConfig,
+    MsFormDivider,
   },
   props:{
     oldData:{
@@ -107,6 +112,8 @@ export default{
       type:Boolean
     }
 
+  },
+  watch:{
   },
   data(){
     return{
@@ -117,16 +124,12 @@ export default{
       newDataJson:{
 
       },
-
     }
   },
   methods:{
     getDiff(){
       let oldVnode = this.$refs.old
       let vnode = this.$refs.new
-      //oldVnode.style.backgroundColor = "rgb(241,200,196)";
-      console.log(this.$refs.old)
-      console.log(this.$refs.new)
       diff(oldVnode,vnode);
 
     },
@@ -204,10 +207,17 @@ export default{
       handler.calculateTotalChart();
     },
   },
-  created() {
+  updated() {
 
+ },
+  mounted() {
+    this.$nextTick(function () {
+      setTimeout(this.getDiff,(this.$refs.old.$children.length+1)*1000)
+    })
   }
+
 }
+
 </script>
 <style scoped>
 .compare-class{
diff --git a/frontend/src/business/components/performance/test/EditPerformanceTest.vue b/frontend/src/business/components/performance/test/EditPerformanceTest.vue
index a41510fbf3..61b94773ce 100644
--- a/frontend/src/business/components/performance/test/EditPerformanceTest.vue
+++ b/frontend/src/business/components/performance/test/EditPerformanceTest.vue
@@ -82,10 +82,6 @@
         width="100%"
         >
         <diff-version :old-data="oldData" :show-follow="showFollow" :new-data="newData" :new-show-follow="newShowFollow" ></diff-version>
-        <span slot="footer" class="dialog-footer">
-          <el-button @click="dialogVisible=false">取 消</el-button>
-          <el-button type="primary" >确 定</el-button>
-        </span>
       </el-dialog>
 
     </ms-main-container>
diff --git a/frontend/src/business/components/performance/v_node_diff.js b/frontend/src/business/components/performance/v_node_diff.js
index 3bb54e149a..c7850fbd29 100644
--- a/frontend/src/business/components/performance/v_node_diff.js
+++ b/frontend/src/business/components/performance/v_node_diff.js
@@ -103,6 +103,7 @@ function changeStyle(diffNode){
 }
 
 function changeStyleBySubset(vnodeElm,color){
+  //如果当前节点加了颜色，他的子节点也按照diff处理
   if(isDef(vnodeElm.children)&&vnodeElm.children.length>0){
     if(isDef(vnodeElm.style)){
       vnodeElm.style.setProperty("background-color",color,'important')