From 1552c23b34e34bba770aff21497c25338691a879 Mon Sep 17 00:00:00 2001
From: guoyuqi <xiaomeinvG@126.com>
Date: Tue, 18 Jan 2022 19:39:52 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E7=89=88=E6=9C=AC=E5=AF=B9=E6=AF=94):=20?=
 =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E7=89=88=E6=9C=AC=E5=90=8D=E7=A7=B0=E6=93=8D?=
 =?UTF-8?q?=E4=BD=9C=E4=BA=BA=E6=97=B6=E9=97=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

--user=郭雨琦 增加版本名称操作人时间
---
 .../automation/scenario/EditApiScenario.vue   |  54 +-
 .../api/automation/version/ScenarioDiff.vue   | 641 +++++++++---------
 .../complete/version/DubboApiVersionDiff.vue  | 204 +++---
 .../complete/version/HttpApiVersionDiff.vue   | 462 +++++++------
 .../complete/version/SQLApiVersionDiff.vue    | 206 +++---
 .../complete/version/TCPApiVersionDiff.vue    | 308 +++++----
 .../performance/test/DiffVersion.vue          |  12 +-
 7 files changed, 975 insertions(+), 912 deletions(-)

diff --git a/frontend/src/business/components/api/automation/scenario/EditApiScenario.vue b/frontend/src/business/components/api/automation/scenario/EditApiScenario.vue
index 3626c3d247..d0597143cb 100644
--- a/frontend/src/business/components/api/automation/scenario/EditApiScenario.vue
+++ b/frontend/src/business/components/api/automation/scenario/EditApiScenario.vue
@@ -354,7 +354,8 @@
         :new-scenario-definition="newScenarioDefinition"
         :project-env-map="projectEnvMap"
         :new-project-env-map="newProjectEnvMap"
-        :type="type"
+        :project-list="projectList"
+        :type ="type"
       ></scenario-diff>
     </el-dialog>
 
@@ -1740,33 +1741,38 @@ export default {
       });
     },
     compare(row) {
-      this.$get('/api/automation/get/' + row.id + "/" + this.currentScenario.refId, response => {
-        this.$get("/api/automation/getApiScenario/" + response.data.id, res => {
-          if (res.data) {
-            if (res.data.scenarioDefinition != null) {
-              let obj = JSON.parse(res.data.scenarioDefinition);
-              if (obj) {
-                if (obj.hashTree) {
-                  for (let i = 0; i < obj.hashTree.length; i++) {
-                    obj.hashTree[i].disabled = true;
+      this.$get('/api/automation/get/' +  row.id+"/"+this.currentScenario.refId, response => {
+          this.$get("/api/automation/getApiScenario/" +  response.data.id, res => {
+            if (res.data) {
+              if(res.data.scenarioDefinition != null){
+                let obj = JSON.parse(res.data.scenarioDefinition);
+                if(obj){
+                  if(obj.hashTree){
+                    for (let i = 0; i < obj.hashTree.length; i++) {
+                      obj.hashTree[i].disabled = true;
+                      if (!obj.hashTree[i].requestResult) {
+                        obj.hashTree[i].requestResult = [{responseResult: {}}];
+                      }
+                    }
+                  }
+                  for (let i = 0; i < this.scenarioDefinition.length; i++) {
+                    this.scenarioDefinition[i].disabled = true;
+                  }
+                  this.newScenarioDefinition = obj.hashTree;
+
+                  if (response.data.environmentJson) {
+                    this.newProjectEnvMap = objToStrMap(JSON.parse(response.data.environmentJson));
+                  } else {
+                    // 兼容历史数据
+                    this.newProjectEnvMap.set(this.projectId, obj.environmentId);
                   }
                 }
-                for (let i = 0; i < this.scenarioDefinition.length; i++) {
-                  this.scenarioDefinition[i].disabled = true;
-                }
-                this.newScenarioDefinition = obj.hashTree;
-                if (response.data.environmentJson) {
-                  this.newProjectEnvMap = objToStrMap(JSON.parse(response.data.environmentJson));
-                } else {
-                  // 兼容历史数据
-                  this.newProjectEnvMap.set(this.projectId, obj.environmentId);
-                }
               }
+              res.data.userName = response.data.userName
+              this.newData = res.data;
+              this.dialogVisible = true;
             }
-            this.newData = res.data;
-            this.dialogVisible = true;
-          }
-        });
+          });
       })
     },
     checkout(row) {
diff --git a/frontend/src/business/components/api/automation/version/ScenarioDiff.vue b/frontend/src/business/components/api/automation/version/ScenarioDiff.vue
index 1893edd58e..4b9a8c99d4 100644
--- a/frontend/src/business/components/api/automation/version/ScenarioDiff.vue
+++ b/frontend/src/business/components/api/automation/version/ScenarioDiff.vue
@@ -1,149 +1,158 @@
 <template>
-  <div class="compare-class">
-    <el-card ref="old">
-      <el-card>
-        <div class="card-content">
-          <div class="ms-main-div" @click="showAll" >
+  <div>
+    <el-row>
+      <el-col :span="12">
+        <el-tag>当前{{oldData.versionName }}</el-tag><span style="margin-left: 10px">{{oldData.userName}}</span><span style="margin-left: 10px">{{oldData.updateTime | timestampFormatDate }}</span>
+      </el-col>
+      <el-col :span="12">
+        <el-tag>{{ newData.versionName }}</el-tag><span style="margin-left: 10px">{{newData.userName}}</span><span style="margin-left: 10px">{{newData.updateTime | timestampFormatDate }}</span>
+      </el-col>
+    </el-row>
+    <div class="compare-class" v-loading="isReloadData">
+      <el-card ref="old" style="width: 50%">
+        <el-card>
+          <div class="card-content">
+            <div class="ms-main-div" @click="showAll" >
 
-            <!--操作按钮-->
-            <div class="ms-opt-btn">
-              <el-tooltip :content="$t('commons.follow')" placement="bottom" effect="dark" v-if="!showFollow">
-                <i class="el-icon-star-off" style="color: #783987; font-size: 25px; margin-right: 5px;cursor: pointer;position: relative; top: 5px; " />
-              </el-tooltip>
-              <el-tooltip :content="$t('commons.cancel')" placement="bottom" effect="dark" v-if="showFollow">
-                <i class="el-icon-star-on" style="color: #783987; font-size: 28px; margin-right: 5px;cursor: pointer;position: relative; top: 5px; " />
-              </el-tooltip>
+              <!--操作按钮-->
+              <div class="ms-opt-btn">
+                <el-tooltip :content="$t('commons.follow')" placement="bottom" effect="dark" v-if="!showFollow">
+                  <i class="el-icon-star-off" style="color: #783987; font-size: 25px; margin-right: 5px;cursor: pointer;position: relative; top: 5px; " />
+                </el-tooltip>
+                <el-tooltip :content="$t('commons.cancel')" placement="bottom" effect="dark" v-if="showFollow">
+                  <i class="el-icon-star-on" style="color: #783987; font-size: 28px; margin-right: 5px;cursor: pointer;position: relative; top: 5px; " />
+                </el-tooltip>
+              </div>
+
+              <div class="tip">{{ $t('test_track.plan_view.base_info') }}</div>
+              <el-form :model="oldData" label-position="right" label-width="80px" size="small" :rules="rules"  :disabled="true"
+                       ref="currentScenario" style="margin-right: 20px">
+                <!-- 基础信息 -->
+                <el-row>
+                  <el-col :span="7">
+                    <el-form-item :label="$t('commons.name')" prop="name">
+                      <el-input class="ms-scenario-input" size="small" v-model="oldData.name"/>
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="7">
+                    <el-form-item :label="$t('test_track.module.module')" prop="apiScenarioModuleId">
+                      <ms-select-tree size="small" :data="moduleOptions" :defaultKey="oldData.apiScenarioModuleId" :obj="moduleObj" clearable checkStrictly/>
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="7">
+                    <el-form-item :label="$t('commons.status')" prop="status">
+                      <el-select class="ms-scenario-input" size="small" v-model="oldData.status">
+                        <el-option v-for="item in options" :key="item.id" :label="$t(item.label)" :value="item.id"/>
+                      </el-select>
+                    </el-form-item>
+                  </el-col>
+                </el-row>
+                <el-row>
+                  <el-col :span="7">
+                    <el-form-item :label="$t('api_test.definition.request.responsible')" prop="principal">
+                      <el-select v-model="oldData.principal"
+                                 :placeholder="$t('api_test.definition.request.responsible')" filterable size="small"
+                                 class="ms-scenario-input">
+                        <el-option
+                          v-for="item in maintainerOptions"
+                          :key="item.id"
+                          :label="item.name + ' (' + item.id + ')'"
+                          :value="item.id">
+                        </el-option>
+                      </el-select>
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="7">
+                    <el-form-item :label="$t('test_track.case.priority')" prop="level">
+                      <el-select class="ms-scenario-input" size="small" v-model="oldData.level">
+                        <el-option v-for="item in levels" :key="item.id" :label="item.label" :value="item.id"/>
+                      </el-select>
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="7">
+                    <el-form-item :label="$t('api_test.automation.tag')" prop="tags">
+                      <ms-input-tag :currentScenario="oldData" ref="tag"/>
+                    </el-form-item>
+                  </el-col>
+                </el-row>
+                <el-row>
+                  <el-col :span="7">
+                    <el-form-item :label="$t('commons.description')" prop="description">
+                      <el-input class="ms-http-textarea"
+                                v-model="oldData.description"
+                                type="textarea"
+                                :autosize="{ minRows: 1, maxRows: 10}"
+                                :rows="1" size="small"/>
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="7" v-if="customNum">
+                    <el-form-item label="ID" prop="customNum">
+                      <el-input v-model.trim="oldData.customNum" size="small"></el-input>
+                    </el-form-item>
+                  </el-col>
+                </el-row>
+
+              </el-form>
             </div>
-
-            <div class="tip">{{ $t('test_track.plan_view.base_info') }}</div>
-            <el-form :model="oldData" label-position="right" label-width="80px" size="small" :rules="rules"  :disabled="true"
-                     ref="currentScenario" style="margin-right: 20px">
-              <!-- 基础信息 -->
+            <!-- 场景步骤-->
+            <div v-loading="loading">
+              <div @click="showAll">
+                <p class="tip">{{ $t('api_test.automation.scenario_step') }} </p>
+              </div>
               <el-row>
-                <el-col :span="7">
-                  <el-form-item :label="$t('commons.name')" prop="name">
-                    <el-input class="ms-scenario-input" size="small" v-model="oldData.name"/>
-                  </el-form-item>
-                </el-col>
-                <el-col :span="7">
-                  <el-form-item :label="$t('test_track.module.module')" prop="apiScenarioModuleId">
-                    <ms-select-tree size="small" :data="moduleOptions" :defaultKey="oldData.apiScenarioModuleId" :obj="moduleObj" clearable checkStrictly/>
-                  </el-form-item>
-                </el-col>
-                <el-col :span="7">
-                  <el-form-item :label="$t('commons.status')" prop="status">
-                    <el-select class="ms-scenario-input" size="small" v-model="oldData.status">
-                      <el-option v-for="item in options" :key="item.id" :label="$t(item.label)" :value="item.id"/>
-                    </el-select>
-                  </el-form-item>
-                </el-col>
-              </el-row>
-              <el-row>
-                <el-col :span="7">
-                  <el-form-item :label="$t('api_test.definition.request.responsible')" prop="principal">
-                    <el-select v-model="oldData.principal"
-                               :placeholder="$t('api_test.definition.request.responsible')" filterable size="small"
-                               class="ms-scenario-input">
-                      <el-option
-                        v-for="item in maintainerOptions"
-                        :key="item.id"
-                        :label="item.name + ' (' + item.id + ')'"
-                        :value="item.id">
-                      </el-option>
-                    </el-select>
-                  </el-form-item>
-                </el-col>
-                <el-col :span="7">
-                  <el-form-item :label="$t('test_track.case.priority')" prop="level">
-                    <el-select class="ms-scenario-input" size="small" v-model="oldData.level">
-                      <el-option v-for="item in levels" :key="item.id" :label="item.label" :value="item.id"/>
-                    </el-select>
-                  </el-form-item>
-                </el-col>
-                <el-col :span="7">
-                  <el-form-item :label="$t('api_test.automation.tag')" prop="tags">
-                    <ms-input-tag :currentScenario="oldData" ref="tag"/>
-                  </el-form-item>
-                </el-col>
-              </el-row>
-              <el-row>
-                <el-col :span="7">
-                  <el-form-item :label="$t('commons.description')" prop="description">
-                    <el-input class="ms-http-textarea"
-                              v-model="oldData.description"
-                              type="textarea"
-                              :autosize="{ minRows: 1, maxRows: 10}"
-                              :rows="1" size="small"/>
-                  </el-form-item>
-                </el-col>
-                <el-col :span="7" v-if="customNum">
-                  <el-form-item label="ID" prop="customNum">
-                    <el-input v-model.trim="oldData.customNum" size="small"></el-input>
-                  </el-form-item>
-                </el-col>
-              </el-row>
-
-            </el-form>
-          </div>
-          <!-- 场景步骤-->
-          <div v-loading="loading">
-            <div @click="showAll">
-              <p class="tip">{{ $t('api_test.automation.scenario_step') }} </p>
-            </div>
-            <el-row>
-              <el-col :span="21">
-                <!-- 调试部分 -->
-                <div class="ms-debug-div" @click="showAll" :class="{'is-top' : isTop}" ref="debugHeader">
-                  <el-row style="margin: 5px">
-                    <el-col :span="4" class="ms-col-one ms-font">
-                      <el-tooltip placement="top" effect="light">
-                        <template v-slot:content>
-                          <div>{{
+                <el-col :span="21">
+                  <!-- 调试部分 -->
+                  <div class="ms-debug-div" @click="showAll" :class="{'is-top' : isTop}" ref="debugHeader">
+                    <el-row style="margin: 5px">
+                      <el-col :span="4" class="ms-col-one ms-font">
+                        <el-tooltip placement="top" effect="light">
+                          <template v-slot:content>
+                            <div>{{
+                                oldData.name === undefined || '' ? $t('api_test.scenario.name') : oldData.name
+                              }}
+                            </div>
+                          </template>
+                          <span class="scenario-name">
+                        {{
                               oldData.name === undefined || '' ? $t('api_test.scenario.name') : oldData.name
                             }}
-                          </div>
-                        </template>
-                        <span class="scenario-name">
-                        {{
-                            oldData.name === undefined || '' ? $t('api_test.scenario.name') : oldData.name
-                          }}
                     </span>
-                      </el-tooltip>
-                    </el-col>
-                    <el-col :span="3" class="ms-col-one ms-font">
-                      {{ $t('api_test.automation.step_total') }}：{{ 0}}
-                    </el-col>
-                    <el-col :span="3" class="ms-col-one ms-font">
-                      <el-link class="head">{{ $t('api_test.automation.scenario_total') }}
-                      </el-link>
-                      ：{{ oldVariableSize }}
-                    </el-col>
-                    <el-col :span="3" class="ms-col-one ms-font">
-                      <el-checkbox v-model="oldEnableCookieShare"><span style="font-size: 13px;">{{ $t('api_test.scenario.share_cookie') }}</span></el-checkbox>
-                    </el-col>
-                    <el-col :span="3" class="ms-col-one ms-font">
-                      <el-checkbox v-model="oldOnSampleError"><span style="font-size: 13px;">{{ $t('commons.failure_continues') }}</span></el-checkbox>
-                    </el-col>
+                        </el-tooltip>
+                      </el-col>
+                      <el-col :span="3" class="ms-col-one ms-font">
+                        {{ $t('api_test.automation.step_total') }}：{{ 0}}
+                      </el-col>
+                      <el-col :span="3" class="ms-col-one ms-font">
+                        <el-link class="head">{{ $t('api_test.automation.scenario_total') }}
+                        </el-link>
+                        ：{{ oldVariableSize }}
+                      </el-col>
+                      <el-col :span="3" class="ms-col-one ms-font">
+                        <el-checkbox v-model="oldEnableCookieShare"><span style="font-size: 13px;">{{ $t('api_test.scenario.share_cookie') }}</span></el-checkbox>
+                      </el-col>
+                      <el-col :span="3" class="ms-col-one ms-font">
+                        <el-checkbox v-model="oldOnSampleError"><span style="font-size: 13px;">{{ $t('commons.failure_continues') }}</span></el-checkbox>
+                      </el-col>
 
-                  </el-row>
-                </div>
+                    </el-row>
+                  </div>
 
-                <!-- 场景步骤内容 -->
-                <div ref="stepInfo">
-                  <el-tooltip :content="$t('api_test.automation.open_expansion')" placement="top" effect="light">
-                    <i class="el-icon-circle-plus-outline ms-open-btn ms-open-btn-left"  @click="openExpansion('old')"/>
-                  </el-tooltip>
-                  <el-tooltip :content="$t('api_test.automation.close_expansion')" placement="top" effect="light">
-                    <i class="el-icon-remove-outline ms-open-btn" size="mini"  @click="closeExpansion('old')"/>
-                  </el-tooltip>
-                  <el-tree node-key="resourceId" :props="props" :data="oldScenarioDefinition" class="ms-tree"
-                           :default-expanded-keys="oldExpandedNode"
-                           :expand-on-click-node="false"
-                           highlight-current
-                           @node-expand="nodeExpand(oldScenarioDefinition,null,'old')"
-                           @node-collapse="nodeCollapse(oldScenarioDefinition,null,'old')"
-                           @node-click="oldNodeClick"
-                           draggable ref="stepTree">
+                  <!-- 场景步骤内容 -->
+                  <div ref="stepInfo">
+                    <el-tooltip :content="$t('api_test.automation.open_expansion')" placement="top" effect="light">
+                      <i class="el-icon-circle-plus-outline ms-open-btn ms-open-btn-left"  @click="openExpansion('old')"/>
+                    </el-tooltip>
+                    <el-tooltip :content="$t('api_test.automation.close_expansion')" placement="top" effect="light">
+                      <i class="el-icon-remove-outline ms-open-btn" size="mini"  @click="closeExpansion('old')"/>
+                    </el-tooltip>
+                    <el-tree node-key="resourceId" :props="props" :data="oldScenarioDefinition" class="ms-tree"
+                             :default-expanded-keys="oldExpandedNode"
+                             :expand-on-click-node="false"
+                             highlight-current
+                             @node-expand="nodeExpand(oldScenarioDefinition,null,'old')"
+                             @node-collapse="nodeCollapse(oldScenarioDefinition,null,'old')"
+                             @node-click="oldNodeClick"
+                             draggable ref="stepTree">
                     <span class="custom-tree-node father" slot-scope="{ node, data}" style="width: 96%">
                       <!-- 步骤组件-->
                        <ms-component-config
@@ -151,162 +160,163 @@
                          :scenario="data"
                          :node="node"
                          :env-map="projectEnvMap"
+                         :project-list="projectList"
                          :show-version="false"
                        />
                     </span>
-                  </el-tree>
-                </div>
-              </el-col>
-            </el-row>
+                    </el-tree>
+                  </div>
+                </el-col>
+              </el-row>
+            </div>
+            <el-backtop target=".card-content" :visibility-height="100" :right="50"></el-backtop>
           </div>
-          <el-backtop target=".card-content" :visibility-height="100" :right="50"></el-backtop>
-        </div>
+        </el-card>
       </el-card>
-    </el-card>
-    <el-card  ref="new">
-      <el-card>
-        <div class="card-content">
-          <div class="ms-main-div" @click="showAll" v-if="type!=='detail'">
+      <el-card  ref="new" style="width: 50%">
+        <el-card>
+          <div class="card-content">
+            <div class="ms-main-div" @click="showAll" v-if="type!=='detail'">
 
-            <!--操作按钮-->
-            <div class="ms-opt-btn">
-              <el-tooltip :content="$t('commons.follow')" placement="bottom" effect="dark" v-if="!newShowFollow">
-                <i class="el-icon-star-off" style="color: #783987; font-size: 25px; margin-right: 5px;cursor: pointer;position: relative; top: 5px; " />
-              </el-tooltip>
-              <el-tooltip :content="$t('commons.cancel')" placement="bottom" effect="dark" v-if="newShowFollow">
-                <i class="el-icon-star-on" style="color: #783987; font-size: 28px; margin-right: 5px;cursor: pointer;position: relative; top: 5px; " />
-              </el-tooltip>
+              <!--操作按钮-->
+              <div class="ms-opt-btn">
+                <el-tooltip :content="$t('commons.follow')" placement="bottom" effect="dark" v-if="!newShowFollow">
+                  <i class="el-icon-star-off" style="color: #783987; font-size: 25px; margin-right: 5px;cursor: pointer;position: relative; top: 5px; " />
+                </el-tooltip>
+                <el-tooltip :content="$t('commons.cancel')" placement="bottom" effect="dark" v-if="newShowFollow">
+                  <i class="el-icon-star-on" style="color: #783987; font-size: 28px; margin-right: 5px;cursor: pointer;position: relative; top: 5px; " />
+                </el-tooltip>
+              </div>
+
+              <div class="tip">{{ $t('test_track.plan_view.base_info') }}</div>
+              <el-form :model="newData" label-position="right" label-width="80px" size="small" :rules="rules" :disabled="true"
+                       ref="currentScenario" style="margin-right: 20px">
+                <!-- 基础信息 -->
+                <el-row>
+                  <el-col :span="7">
+                    <el-form-item :label="$t('commons.name')" prop="name">
+                      <el-input class="ms-scenario-input" size="small" v-model="newData.name"/>
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="7">
+                    <el-form-item :label="$t('test_track.module.module')" prop="apiScenarioModuleId">
+                      <ms-select-tree size="small" :data="moduleOptions" :defaultKey="newData.apiScenarioModuleId" :obj="moduleObj" clearable checkStrictly/>
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="7">
+                    <el-form-item :label="$t('commons.status')" prop="status">
+                      <el-select class="ms-scenario-input" size="small" v-model="newData.status">
+                        <el-option v-for="item in options" :key="item.id" :label="$t(item.label)" :value="item.id"/>
+                      </el-select>
+                    </el-form-item>
+                  </el-col>
+                </el-row>
+                <el-row>
+                  <el-col :span="7">
+                    <el-form-item :label="$t('api_test.definition.request.responsible')" prop="principal">
+                      <el-select v-model="newData.principal"
+                                 :placeholder="$t('api_test.definition.request.responsible')" filterable size="small"
+                                 class="ms-scenario-input">
+                        <el-option
+                          v-for="item in maintainerOptions"
+                          :key="item.id"
+                          :label="item.name + ' (' + item.id + ')'"
+                          :value="item.id">
+                        </el-option>
+                      </el-select>
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="7">
+                    <el-form-item :label="$t('test_track.case.priority')" prop="level">
+                      <el-select class="ms-scenario-input" size="small" v-model="newData.level">
+                        <el-option v-for="item in levels" :key="item.id" :label="item.label" :value="item.id"/>
+                      </el-select>
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="7">
+                    <el-form-item :label="$t('api_test.automation.tag')" prop="tags">
+                      <ms-input-tag :currentScenario="newData" ref="tag"/>
+                    </el-form-item>
+                  </el-col>
+                </el-row>
+                <el-row>
+                  <el-col :span="7">
+                    <el-form-item :label="$t('commons.description')" prop="description">
+                      <el-input class="ms-http-textarea"
+                                v-model="newData.description"
+                                type="textarea"
+                                :autosize="{ minRows: 1, maxRows: 10}"
+                                :rows="1" size="small"/>
+                    </el-form-item>
+                  </el-col>
+                  <el-col :span="7" v-if="customNum">
+                    <el-form-item label="ID" prop="customNum">
+                      <el-input v-model.trim="newData.customNum" size="small"></el-input>
+                    </el-form-item>
+                  </el-col>
+                </el-row>
+
+              </el-form>
             </div>
-
-            <div class="tip">{{ $t('test_track.plan_view.base_info') }}</div>
-            <el-form :model="newData" label-position="right" label-width="80px" size="small" :rules="rules" :disabled="true"
-                     ref="currentScenario" style="margin-right: 20px">
-              <!-- 基础信息 -->
+            <!-- 场景步骤-->
+            <div v-loading="loading">
+              <div @click="showAll">
+                <p class="tip">{{ $t('api_test.automation.scenario_step') }} </p>
+              </div>
               <el-row>
-                <el-col :span="7">
-                  <el-form-item :label="$t('commons.name')" prop="name">
-                    <el-input class="ms-scenario-input" size="small" v-model="newData.name"/>
-                  </el-form-item>
-                </el-col>
-                <el-col :span="7">
-                  <el-form-item :label="$t('test_track.module.module')" prop="apiScenarioModuleId">
-                    <ms-select-tree size="small" :data="moduleOptions" :defaultKey="newData.apiScenarioModuleId" :obj="moduleObj" clearable checkStrictly/>
-                  </el-form-item>
-                </el-col>
-                <el-col :span="7">
-                  <el-form-item :label="$t('commons.status')" prop="status">
-                    <el-select class="ms-scenario-input" size="small" v-model="newData.status">
-                      <el-option v-for="item in options" :key="item.id" :label="$t(item.label)" :value="item.id"/>
-                    </el-select>
-                  </el-form-item>
-                </el-col>
-              </el-row>
-              <el-row>
-                <el-col :span="7">
-                  <el-form-item :label="$t('api_test.definition.request.responsible')" prop="principal">
-                    <el-select v-model="newData.principal"
-                               :placeholder="$t('api_test.definition.request.responsible')" filterable size="small"
-                               class="ms-scenario-input">
-                      <el-option
-                        v-for="item in maintainerOptions"
-                        :key="item.id"
-                        :label="item.name + ' (' + item.id + ')'"
-                        :value="item.id">
-                      </el-option>
-                    </el-select>
-                  </el-form-item>
-                </el-col>
-                <el-col :span="7">
-                  <el-form-item :label="$t('test_track.case.priority')" prop="level">
-                    <el-select class="ms-scenario-input" size="small" v-model="newData.level">
-                      <el-option v-for="item in levels" :key="item.id" :label="item.label" :value="item.id"/>
-                    </el-select>
-                  </el-form-item>
-                </el-col>
-                <el-col :span="7">
-                  <el-form-item :label="$t('api_test.automation.tag')" prop="tags">
-                    <ms-input-tag :currentScenario="newData" ref="tag"/>
-                  </el-form-item>
-                </el-col>
-              </el-row>
-              <el-row>
-                <el-col :span="7">
-                  <el-form-item :label="$t('commons.description')" prop="description">
-                    <el-input class="ms-http-textarea"
-                              v-model="newData.description"
-                              type="textarea"
-                              :autosize="{ minRows: 1, maxRows: 10}"
-                              :rows="1" size="small"/>
-                  </el-form-item>
-                </el-col>
-                <el-col :span="7" v-if="customNum">
-                  <el-form-item label="ID" prop="customNum">
-                    <el-input v-model.trim="newData.customNum" size="small"></el-input>
-                  </el-form-item>
-                </el-col>
-              </el-row>
-
-            </el-form>
-          </div>
-          <!-- 场景步骤-->
-          <div v-loading="loading">
-            <div @click="showAll">
-              <p class="tip">{{ $t('api_test.automation.scenario_step') }} </p>
-            </div>
-            <el-row>
-              <el-col :span="21">
-                <!-- 调试部分 -->
-                <div class="ms-debug-div" @click="showAll" :class="{'is-top' : isTop}" ref="debugHeader">
-                  <el-row style="margin: 5px">
-                    <el-col :span="4" class="ms-col-one ms-font">
-                      <el-tooltip placement="top" effect="light">
-                        <template v-slot:content>
-                          <div>{{
+                <el-col :span="21">
+                  <!-- 调试部分 -->
+                  <div class="ms-debug-div" @click="showAll" :class="{'is-top' : isTop}" ref="debugHeader">
+                    <el-row style="margin: 5px">
+                      <el-col :span="4" class="ms-col-one ms-font">
+                        <el-tooltip placement="top" effect="light">
+                          <template v-slot:content>
+                            <div>{{
+                                newData.name === undefined || '' ? $t('api_test.scenario.name') : newData.name
+                              }}
+                            </div>
+                          </template>
+                          <span class="scenario-name">
+                        {{
                               newData.name === undefined || '' ? $t('api_test.scenario.name') : newData.name
                             }}
-                          </div>
-                        </template>
-                        <span class="scenario-name">
-                        {{
-                            newData.name === undefined || '' ? $t('api_test.scenario.name') : newData.name
-                          }}
                     </span>
-                      </el-tooltip>
-                    </el-col>
-                    <el-col :span="3" class="ms-col-one ms-font">
-                      {{ $t('api_test.automation.step_total') }}：{{ 0 }}
-                    </el-col>
-                    <el-col :span="3" class="ms-col-one ms-font">
-                      <el-link class="head" >{{ $t('api_test.automation.scenario_total') }}
-                      </el-link>
-                      ：{{ newVariableSize }}
-                    </el-col>
-                    <el-col :span="3" class="ms-col-one ms-font">
-                      <el-checkbox v-model="newEnableCookieShare"><span style="font-size: 13px;">{{ $t('api_test.scenario.share_cookie') }}</span></el-checkbox>
-                    </el-col>
-                    <el-col :span="3" class="ms-col-one ms-font">
-                      <el-checkbox v-model="newOnSampleError"><span style="font-size: 13px;">{{ $t('commons.failure_continues') }}</span></el-checkbox>
-                    </el-col>
+                        </el-tooltip>
+                      </el-col>
+                      <el-col :span="3" class="ms-col-one ms-font">
+                        {{ $t('api_test.automation.step_total') }}：{{ 0 }}
+                      </el-col>
+                      <el-col :span="3" class="ms-col-one ms-font">
+                        <el-link class="head" >{{ $t('api_test.automation.scenario_total') }}
+                        </el-link>
+                        ：{{ newVariableSize }}
+                      </el-col>
+                      <el-col :span="3" class="ms-col-one ms-font">
+                        <el-checkbox v-model="newEnableCookieShare"><span style="font-size: 13px;">{{ $t('api_test.scenario.share_cookie') }}</span></el-checkbox>
+                      </el-col>
+                      <el-col :span="3" class="ms-col-one ms-font">
+                        <el-checkbox v-model="newOnSampleError"><span style="font-size: 13px;">{{ $t('commons.failure_continues') }}</span></el-checkbox>
+                      </el-col>
 
-                  </el-row>
-                </div>
+                    </el-row>
+                  </div>
 
-                <!-- 场景步骤内容 -->
-                <div ref="stepInfo">
-                  <el-tooltip :content="$t('api_test.automation.open_expansion')" placement="top" effect="light">
-                    <i class="el-icon-circle-plus-outline ms-open-btn ms-open-btn-left"  @click="openExpansion('new')"/>
-                  </el-tooltip>
-                  <el-tooltip :content="$t('api_test.automation.close_expansion')" placement="top" effect="light">
-                    <i class="el-icon-remove-outline ms-open-btn" size="mini" @click="closeExpansion('new')"/>
-                  </el-tooltip>
-                  <el-tree node-key="newResourceId" :props="props" :data="newScenarioDefinition" class="ms-tree"
-                           :expand-on-click-node="false"
-                           :default-expanded-keys="newExpandedNode"
-                           highlight-current
-                           @node-expand="nodeExpand"
-                           @node-collapse="nodeCollapse"
-                           @node-click="nodeClick"
-                           draggable ref="stepTree" >
+                  <!-- 场景步骤内容 -->
+                  <div ref="stepInfo">
+                    <el-tooltip :content="$t('api_test.automation.open_expansion')" placement="top" effect="light">
+                      <i class="el-icon-circle-plus-outline ms-open-btn ms-open-btn-left"  @click="openExpansion('new')"/>
+                    </el-tooltip>
+                    <el-tooltip :content="$t('api_test.automation.close_expansion')" placement="top" effect="light">
+                      <i class="el-icon-remove-outline ms-open-btn" size="mini" @click="closeExpansion('new')"/>
+                    </el-tooltip>
+                    <el-tree node-key="newResourceId" :props="props" :data="newScenarioDefinition" class="ms-tree"
+                             :expand-on-click-node="false"
+                             :default-expanded-keys="newExpandedNode"
+                             highlight-current
+                             @node-expand="nodeExpand"
+                             @node-collapse="nodeCollapse"
+                             @node-click="nodeClick"
+                             draggable ref="stepTree" >
                     <span class="custom-tree-node father" slot-scope="{ node, data}" style="width: 96%">
                       <!-- 步骤组件-->
                        <ms-component-config
@@ -314,36 +324,38 @@
                          :scenario="data"
                          :node="node"
                          :env-map="newProjectEnvMap"
+                         :project-list="projectList"
                          :show-version="false"
-                      />
+                       />
                     </span>
-                  </el-tree>
-                </div>
-              </el-col>
-            </el-row>
-          </div>
+                    </el-tree>
+                  </div>
+                </el-col>
+              </el-row>
+            </div>
 
-          <el-backtop target=".card-content" :visibility-height="100" :right="50"></el-backtop>
-        </div>
+            <el-backtop target=".card-content" :visibility-height="100" :right="50"></el-backtop>
+          </div>
+        </el-card>
       </el-card>
-    </el-card>
-    <el-dialog
-      :fullscreen="true"
-      :visible.sync="dialogVisible"
-      append-to-body
-      width="100%"
-    >
-      <scenario-child-diff
-        :old-data="leftChildData"
-        :new-data="rightChildData"
-        :old-node="leftChildNode"
-        :new-node="rightChildNode"
-        :old-project-env-map="projectEnvMap"
-        :new-project-env-map="newProjectEnvMap"
-        :old-v-node="leftChildVnode"
-        :new-v-node="rightChildVnode"
-      ></scenario-child-diff>
-    </el-dialog>
+      <el-dialog
+        :fullscreen="true"
+        :visible.sync="dialogVisible"
+        append-to-body
+        width="100%"
+      >
+        <scenario-child-diff
+          :old-data="leftChildData"
+          :new-data="rightChildData"
+          :old-node="leftChildNode"
+          :new-node="rightChildNode"
+          :old-project-env-map="projectEnvMap"
+          :new-project-env-map="newProjectEnvMap"
+          :old-v-node="leftChildVnode"
+          :new-v-node="rightChildVnode"
+        ></scenario-child-diff>
+      </el-dialog>
+    </div>
   </div>
 </template>
 <script>
@@ -399,7 +411,10 @@ export default{
     newOnSampleError:{},
     projectEnvMap: {},
     newProjectEnvMap: {},
-    type:{}
+    type:{},
+    projectList:{
+      type: Array,
+    },
   },
   components:{
     ScenarioChildDiff,
@@ -427,6 +442,7 @@ export default{
      options: API_STATUS,
      levels: PRIORITY,
      loading: false,
+     isReloadData:true,
      moduleObj: {
        id: 'id',
        label: 'name',
@@ -439,7 +455,6 @@ export default{
      },
      showHideTree: true,
      environmentType: ENV_TYPE.JSON,
-     projectList:[],
      props: {
        label: "label",
        children: "hashTree"
@@ -455,7 +470,7 @@ export default{
      rightChildNode:{},
      leftChildVnode:{},
      rightChildVnode:{},
-     dialogVisible:false
+     dialogVisible:false,
    }
   },
   methods:{
@@ -466,6 +481,7 @@ export default{
       console.log(this.$refs.old)
       console.log(this.$refs.new)
       diff(oldVnode,vnode);
+      this.isReloadData = false
     },
     showAll() {
       // 控制当有弹出页面操作时禁止刷新按钮列表
@@ -493,11 +509,6 @@ export default{
         this.newEnvResult.loading = false;
       })
     },
-    getWsProjects() {
-      this.$get("/project/listAll", res => {
-        this.projectList = res.data;
-      })
-    },
     changeNodeStatus(nodes,source) {
       for (let i in nodes) {
         if (nodes[i]) {
@@ -622,7 +633,7 @@ export default{
 
   },
   created() {
-    this.getWsProjects();
+
   },
   mounted() {
     this.$nextTick(function () {
diff --git a/frontend/src/business/components/api/definition/components/complete/version/DubboApiVersionDiff.vue b/frontend/src/business/components/api/definition/components/complete/version/DubboApiVersionDiff.vue
index 3c017a80db..8ce8e17c45 100644
--- a/frontend/src/business/components/api/definition/components/complete/version/DubboApiVersionDiff.vue
+++ b/frontend/src/business/components/api/definition/components/complete/version/DubboApiVersionDiff.vue
@@ -1,107 +1,117 @@
 <template>
-  <div class="compare-class" v-loading="isReloadData">
-    <el-card style="width: 50%;" ref="old">
-      <div style="background-color: white;">
-        <el-row>
-          <el-col>
-            <!--操作按钮-->
-            <el-tooltip :content="$t('commons.follow')" placement="bottom" effect="dark" v-if="!showFollow">
-              <i class="el-icon-star-off"
-                 style="color: #783987; font-size: 25px; margin-right: 5px; position: relative; top: 5px; cursor: pointer "/>
-            </el-tooltip>
-            <el-tooltip :content="$t('commons.cancel')" placement="bottom" effect="dark" v-if="showFollow">
-              <i class="el-icon-star-on"
-                 style="color: #783987; font-size: 28px; margin-right: 5px; position: relative; top: 5px; cursor: pointer "/>
-            </el-tooltip>
+  <div>
+    <el-row>
+      <el-col :span="12">
+        <el-tag>当前{{oldData.versionName }}</el-tag><span style="margin-left: 10px">{{oldData.userName}}</span><span style="margin-left: 10px">{{oldData.updateTime | timestampFormatDate }}</span>
+      </el-col>
+      <el-col :span="12">
+        <el-tag>{{ newData.versionName }}</el-tag><span style="margin-left: 10px">{{newData.userName}}</span><span style="margin-left: 10px">{{newData.updateTime | timestampFormatDate }}</span>
+      </el-col>
+    </el-row>
+    <div class="compare-class" v-loading="isReloadData">
+      <el-card style="width: 50%;" ref="old">
+        <div style="background-color: white;">
+          <el-row>
+            <el-col>
+              <!--操作按钮-->
+              <el-tooltip :content="$t('commons.follow')" placement="bottom" effect="dark" v-if="!showFollow">
+                <i class="el-icon-star-off"
+                   style="color: #783987; font-size: 25px; margin-right: 5px; position: relative; top: 5px; cursor: pointer "/>
+              </el-tooltip>
+              <el-tooltip :content="$t('commons.cancel')" placement="bottom" effect="dark" v-if="showFollow">
+                <i class="el-icon-star-on"
+                   style="color: #783987; font-size: 28px; margin-right: 5px; position: relative; top: 5px; cursor: pointer "/>
+              </el-tooltip>
 
-          </el-col>
-        </el-row>
-        <!-- 基础信息 -->
-        <p class="tip">{{ $t('test_track.plan_view.base_info') }} </p>
-        <br/>
-        <el-row>
-          <el-col>
-            <ms-basis-api  :moduleOptions="moduleOptions" :is-read-only="true"
-                          :basisData="oldData" ref="basicForm"
-                         />
-          </el-col>
-        </el-row>
+            </el-col>
+          </el-row>
+          <!-- 基础信息 -->
+          <p class="tip">{{ $t('test_track.plan_view.base_info') }} </p>
+          <br/>
+          <el-row>
+            <el-col>
+              <ms-basis-api  :moduleOptions="moduleOptions" :is-read-only="true"
+                             :basisData="oldData" ref="basicForm"
+              />
+            </el-col>
+          </el-row>
 
-        <!-- 请求参数 -->
-        <p class="tip">{{ $t('api_test.definition.request.req_param') }} </p>
-        <ms-basis-parameters :showScript="false" :request="oldRequest" :is-read-only="true"/>
+          <!-- 请求参数 -->
+          <p class="tip">{{ $t('api_test.definition.request.req_param') }} </p>
+          <ms-basis-parameters :showScript="false" :request="oldRequest" :is-read-only="true"/>
 
-        <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>
-      </div>
-    </el-card>
-    <el-card style="width: 50%;" ref="new">
-      <div style="background-color: white;">
-        <el-row>
-          <el-col>
-            <!--操作按钮-->
-            <el-tooltip :content="$t('commons.follow')" placement="bottom" effect="dark" v-if="!newShowFollow">
-              <i class="el-icon-star-off"
-                 style="color: #783987; font-size: 25px; margin-right: 5px; position: relative; top: 5px; cursor: pointer "/>
-            </el-tooltip>
-            <el-tooltip :content="$t('commons.cancel')" placement="bottom" effect="dark" v-if="newShowFollow">
-              <i class="el-icon-star-on"
-                 style="color: #783987; font-size: 28px; margin-right: 5px; position: relative; top: 5px; cursor: pointer "/>
-            </el-tooltip>
+          <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>
+        </div>
+      </el-card>
+      <el-card style="width: 50%;" ref="new">
+        <div style="background-color: white;">
+          <el-row>
+            <el-col>
+              <!--操作按钮-->
+              <el-tooltip :content="$t('commons.follow')" placement="bottom" effect="dark" v-if="!newShowFollow">
+                <i class="el-icon-star-off"
+                   style="color: #783987; font-size: 25px; margin-right: 5px; position: relative; top: 5px; cursor: pointer "/>
+              </el-tooltip>
+              <el-tooltip :content="$t('commons.cancel')" placement="bottom" effect="dark" v-if="newShowFollow">
+                <i class="el-icon-star-on"
+                   style="color: #783987; font-size: 28px; margin-right: 5px; position: relative; top: 5px; cursor: pointer "/>
+              </el-tooltip>
 
-          </el-col>
-        </el-row>
-        <!-- 基础信息 -->
-        <p class="tip">{{ $t('test_track.plan_view.base_info') }} </p>
-        <br/>
-        <el-row>
-          <el-col>
-            <ms-basis-api   :moduleOptions="moduleOptions" :is-read-only="true"
-                          :basisData="newData" ref="basicForm"/>
-          </el-col>
-        </el-row>
+            </el-col>
+          </el-row>
+          <!-- 基础信息 -->
+          <p class="tip">{{ $t('test_track.plan_view.base_info') }} </p>
+          <br/>
+          <el-row>
+            <el-col>
+              <ms-basis-api   :moduleOptions="moduleOptions" :is-read-only="true"
+                              :basisData="newData" ref="basicForm"/>
+            </el-col>
+          </el-row>
 
-        <!-- 请求参数 -->
-        <p class="tip">{{ $t('api_test.definition.request.req_param') }} </p>
-        <ms-basis-parameters :showScript="false" :request="request" :is-read-only="true"/>
+          <!-- 请求参数 -->
+          <p class="tip">{{ $t('api_test.definition.request.req_param') }} </p>
+          <ms-basis-parameters :showScript="false" :request="request" :is-read-only="true"/>
 
-        <!-- 其他信息-->
-        <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>
-      </div>
-    </el-card>
+          <!-- 其他信息-->
+          <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>
+        </div>
+      </el-card>
+    </div>
   </div>
 </template>
 <script>
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 88cf9f4efa..2832bfbe4a 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
@@ -1,8 +1,17 @@
 <template>
-  <div class="compare-class" v-loading="isReloadData">
-    <el-card style="width: 50%;" ref="old">
-      <el-form :model="oldData" :rules="rule" ref="httpForm" label-width="80px" label-position="right" :disabled="true">
-        <!-- 操作按钮 -->
+  <div>
+    <el-row>
+      <el-col :span="12">
+        <el-tag>当前{{oldData.versionName }}</el-tag><span style="margin-left: 10px">{{oldData.userName}}</span><span style="margin-left: 10px">{{oldData.updateTime | timestampFormatDate }}</span>
+      </el-col>
+      <el-col :span="12">
+        <el-tag>{{ newData.versionName }}</el-tag><span style="margin-left: 10px">{{newData.userName}}</span><span style="margin-left: 10px">{{newData.updateTime | timestampFormatDate }}</span>
+      </el-col>
+    </el-row>
+    <div class="compare-class" v-loading="isReloadData">
+      <el-card style="width: 50%;" ref="old">
+        <el-form :model="oldData" :rules="rule" ref="httpForm" label-width="80px" label-position="right" :disabled="true">
+          <!-- 操作按钮 -->
 
           <el-tooltip :content="$t('commons.follow')" placement="bottom" effect="dark" v-if="!showFollow">
             <i class="el-icon-star-off"
@@ -13,127 +22,127 @@
                style="color: #783987; font-size: 28px; margin-right: 5px; position: relative; top: 5px; float: right; cursor: pointer "/>
           </el-tooltip>
 
-        <br/>
-        <ms-form-divider :title="$t('test_track.plan_view.base_info')"/>
+          <br/>
+          <ms-form-divider :title="$t('test_track.plan_view.base_info')"/>
 
-        <!-- 基础信息 -->
-        <div class="base-info">
-          <el-row>
-            <el-col :span="8">
-              <el-form-item :label="$t('commons.name')" prop="name">
-                <el-input class="ms-http-input" size="small" v-model="oldData.name"/>
-              </el-form-item>
-            </el-col>
-            <el-col :span="16">
-              <el-form-item :label="$t('api_report.request')" prop="path">
-                <el-input :placeholder="$t('api_test.definition.request.path_info')" v-model="oldData.path"
-                          class="ms-http-input" size="small" style="margin-top: 5px" >
-                  <el-select v-model="oldData.method" slot="prepend" style="width: 100px" size="small">
-                    <el-option v-for="item in reqOptions" :key="item.id" :label="item.label" :value="item.id"/>
+          <!-- 基础信息 -->
+          <div class="base-info">
+            <el-row>
+              <el-col :span="8">
+                <el-form-item :label="$t('commons.name')" prop="name">
+                  <el-input class="ms-http-input" size="small" v-model="oldData.name"/>
+                </el-form-item>
+              </el-col>
+              <el-col :span="16">
+                <el-form-item :label="$t('api_report.request')" prop="path">
+                  <el-input :placeholder="$t('api_test.definition.request.path_info')" v-model="oldData.path"
+                            class="ms-http-input" size="small" style="margin-top: 5px" >
+                    <el-select v-model="oldData.method" slot="prepend" style="width: 100px" size="small">
+                      <el-option v-for="item in reqOptions" :key="item.id" :label="item.label" :value="item.id"/>
+                    </el-select>
+                  </el-input>
+                </el-form-item>
+              </el-col>
+            </el-row>
+
+            <el-row>
+              <el-col :span="8">
+                <el-form-item :label="$t('api_test.definition.request.responsible')" prop="userId">
+                  <el-select v-model="oldData.userId"
+                             :placeholder="$t('api_test.definition.request.responsible')" filterable size="small"
+                             class="ms-http-select">
+                    <el-option
+                      v-for="item in maintainerOptions"
+                      :key="item.id"
+                      :label="item.name + ' (' + item.id + ')'"
+                      :value="item.id">
+                    </el-option>
                   </el-select>
-                </el-input>
-              </el-form-item>
-            </el-col>
-          </el-row>
+                </el-form-item>
+              </el-col>
+              <el-col :span="8">
+                <el-form-item :label="$t('test_track.module.module')" prop="moduleId">
+                  <ms-select-tree size="small" :data="moduleOptions" :defaultKey="oldData.moduleId"
+                                  :obj="moduleObj" clearable checkStrictly/>
+                </el-form-item>
+              </el-col>
 
-          <el-row>
-            <el-col :span="8">
-              <el-form-item :label="$t('api_test.definition.request.responsible')" prop="userId">
-                <el-select v-model="oldData.userId"
-                           :placeholder="$t('api_test.definition.request.responsible')" filterable size="small"
-                           class="ms-http-select">
-                  <el-option
-                    v-for="item in maintainerOptions"
-                    :key="item.id"
-                    :label="item.name + ' (' + item.id + ')'"
-                    :value="item.id">
-                  </el-option>
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="8">
-              <el-form-item :label="$t('test_track.module.module')" prop="moduleId">
-                <ms-select-tree size="small" :data="moduleOptions" :defaultKey="oldData.moduleId"
-                                :obj="moduleObj" clearable checkStrictly/>
-              </el-form-item>
-            </el-col>
+              <el-col :span="8">
+                <el-form-item :label="$t('commons.status')" prop="status">
+                  <el-select class="ms-http-select" size="small" v-model="oldData.status">
+                    <el-option v-for="item in options" :key="item.id" :label="$t(item.label)" :value="item.id"/>
+                  </el-select>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="8">
+                <el-form-item :label="$t('commons.tag')" prop="tag">
+                  <ms-input-tag :currentScenario="oldData" ref="tag" v-model="oldData.tags"/>
+                </el-form-item>
+              </el-col>
+              <el-col :span="8">
+                <el-form-item :label="$t('commons.description')" prop="description">
+                  <el-input class="ms-http-textarea"
+                            v-model="oldData.description"
+                            type="textarea"
+                            :autosize="{ minRows: 1, maxRows: 10}"
+                            :rows="1" size="small"/>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </div>
 
-            <el-col :span="8">
-              <el-form-item :label="$t('commons.status')" prop="status">
-                <el-select class="ms-http-select" size="small" v-model="oldData.status">
-                  <el-option v-for="item in options" :key="item.id" :label="$t(item.label)" :value="item.id"/>
-                </el-select>
-              </el-form-item>
-            </el-col>
-          </el-row>
-          <el-row>
-            <el-col :span="8">
-              <el-form-item :label="$t('commons.tag')" prop="tag">
-                <ms-input-tag :currentScenario="oldData" ref="tag" v-model="oldData.tags"/>
-              </el-form-item>
-            </el-col>
-            <el-col :span="8">
-              <el-form-item :label="$t('commons.description')" prop="description">
-                <el-input class="ms-http-textarea"
-                          v-model="oldData.description"
-                          type="textarea"
-                          :autosize="{ minRows: 1, maxRows: 10}"
-                          :rows="1" size="small"/>
-              </el-form-item>
-            </el-col>
-          </el-row>
-        </div>
+          <!-- MOCK信息 -->
+          <ms-form-divider :title="$t('test_track.plan_view.mock_info')"/>
+          <div class="base-info mock-info">
+            <el-row>
+              <el-col :span="20">
+                Mock地址：
+                <el-link  target="_blank" style="color: black"
+                          type="primary">{{ this.oldMockUrl }}
+                </el-link>
+              </el-col>
+            </el-row>
 
-        <!-- MOCK信息 -->
-        <ms-form-divider :title="$t('test_track.plan_view.mock_info')"/>
-        <div class="base-info mock-info">
-          <el-row>
-            <el-col :span="20">
-              Mock地址：
-              <el-link  target="_blank" style="color: black"
-                       type="primary">{{ this.oldMockUrl }}
-              </el-link>
-            </el-col>
-          </el-row>
+          </div>
 
-        </div>
+          <!-- 请求参数 -->
+          <div>
+            <ms-form-divider :title="$t('api_test.definition.request.req_param')"/>
+            <ms-api-request-form :showScript="false" :request="request" :headers="request.headers"
+                                 :isShowEnable="isShowEnable"/>
+          </div>
 
-        <!-- 请求参数 -->
-        <div>
-          <ms-form-divider :title="$t('api_test.definition.request.req_param')"/>
-          <ms-api-request-form :showScript="false" :request="request" :headers="request.headers"
-                               :isShowEnable="isShowEnable"/>
-        </div>
-
-      </el-form>
-
-      <!-- 响应内容-->
-      <ms-form-divider :title="$t('api_test.definition.request.res_param')"/>
-      <ms-response-text :response="response"/>
-
-      <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">
-      <el-form :model="newData" :rules="rule" ref="httpForm" label-width="80px" label-position="right" :disabled="true">
-        <!-- 操作按钮 -->
+        <!-- 响应内容-->
+        <ms-form-divider :title="$t('api_test.definition.request.res_param')"/>
+        <ms-response-text :response="response"/>
+
+        <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">
+        <el-form :model="newData" :rules="rule" ref="httpForm" label-width="80px" label-position="right" :disabled="true">
+          <!-- 操作按钮 -->
           <el-tooltip :content="$t('commons.follow')" placement="bottom" effect="dark" v-if="!newShowFollow">
             <i class="el-icon-star-off"
                style="color: #783987; font-size: 25px; margin-right: 5px; position: relative; top: 5px; float: right; cursor: pointer "/>
@@ -143,126 +152,127 @@
                style="color: #783987; font-size: 28px; margin-right: 5px; position: relative; top: 5px; float: right; cursor: pointer "/>
           </el-tooltip>
 
-        <br/>
+          <br/>
 
-        <ms-form-divider :title="$t('test_track.plan_view.base_info')"/>
+          <ms-form-divider :title="$t('test_track.plan_view.base_info')"/>
 
-        <!-- 基础信息 -->
-        <div class="base-info">
+          <!-- 基础信息 -->
+          <div class="base-info">
 
-          <el-row>
-            <el-col :span="8">
-              <el-form-item :label="$t('commons.name')"  prop="name">
-                <el-input class="ms-http-input" size="small" v-model="newData.name"/>
-              </el-form-item>
-            </el-col>
-            <el-col :span="16">
-              <el-form-item :label="$t('api_report.request')" prop="path">
-                <el-input :placeholder="$t('api_test.definition.request.path_info')" v-model="newData.path"
-                          class="ms-http-input" size="small" style="margin-top: 5px" >
-                  <el-select v-model="newData.method" slot="prepend" style="width: 100px" size="small">
-                    <el-option v-for="item in reqOptions" :key="item.id" :label="item.label" :value="item.id"/>
+            <el-row>
+              <el-col :span="8">
+                <el-form-item :label="$t('commons.name')"  prop="name">
+                  <el-input class="ms-http-input" size="small" v-model="newData.name"/>
+                </el-form-item>
+              </el-col>
+              <el-col :span="16">
+                <el-form-item :label="$t('api_report.request')" prop="path">
+                  <el-input :placeholder="$t('api_test.definition.request.path_info')" v-model="newData.path"
+                            class="ms-http-input" size="small" style="margin-top: 5px" >
+                    <el-select v-model="newData.method" slot="prepend" style="width: 100px" size="small">
+                      <el-option v-for="item in reqOptions" :key="item.id" :label="item.label" :value="item.id"/>
+                    </el-select>
+                  </el-input>
+                </el-form-item>
+              </el-col>
+            </el-row>
+
+            <el-row>
+              <el-col :span="8">
+                <el-form-item :label="$t('api_test.definition.request.responsible')" prop="userId">
+                  <el-select v-model="newData.userId"
+                             :placeholder="$t('api_test.definition.request.responsible')" filterable size="small"
+                             class="ms-http-select">
+                    <el-option
+                      v-for="item in maintainerOptions"
+                      :key="item.id"
+                      :label="item.name + ' (' + item.id + ')'"
+                      :value="item.id">
+                    </el-option>
                   </el-select>
-                </el-input>
-              </el-form-item>
-            </el-col>
-          </el-row>
+                </el-form-item>
+              </el-col>
+              <el-col :span="8">
+                <el-form-item :label="$t('test_track.module.module')" prop="moduleId">
+                  <ms-select-tree size="small" :data="moduleOptions" :defaultKey="newData.moduleId"
+                                  :obj="moduleObj" clearable checkStrictly/>
+                </el-form-item>
+              </el-col>
 
-          <el-row>
-            <el-col :span="8">
-              <el-form-item :label="$t('api_test.definition.request.responsible')" prop="userId">
-                <el-select v-model="newData.userId"
-                           :placeholder="$t('api_test.definition.request.responsible')" filterable size="small"
-                           class="ms-http-select">
-                  <el-option
-                    v-for="item in maintainerOptions"
-                    :key="item.id"
-                    :label="item.name + ' (' + item.id + ')'"
-                    :value="item.id">
-                  </el-option>
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="8">
-              <el-form-item :label="$t('test_track.module.module')" prop="moduleId">
-                <ms-select-tree size="small" :data="moduleOptions" :defaultKey="newData.moduleId"
-                                :obj="moduleObj" clearable checkStrictly/>
-              </el-form-item>
-            </el-col>
+              <el-col :span="8">
+                <el-form-item :label="$t('commons.status')" prop="status">
+                  <el-select class="ms-http-select" size="small" v-model="newData.status">
+                    <el-option v-for="item in options" :key="item.id" :label="$t(item.label)" :value="item.id"/>
+                  </el-select>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="8">
+                <el-form-item :label="$t('commons.tag')" prop="tag">
+                  <ms-input-tag :currentScenario="newData" ref="tag" v-model="newData.tags"/>
+                </el-form-item>
+              </el-col>
+              <el-col :span="8">
+                <el-form-item :label="$t('commons.description')" prop="description">
+                  <el-input class="ms-http-textarea"
+                            v-model="newData.description"
+                            type="textarea"
+                            :autosize="{ minRows: 1, maxRows: 10}"
+                            :rows="1" size="small"/>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </div>
 
-            <el-col :span="8">
-              <el-form-item :label="$t('commons.status')" prop="status">
-                <el-select class="ms-http-select" size="small" v-model="newData.status">
-                  <el-option v-for="item in options" :key="item.id" :label="$t(item.label)" :value="item.id"/>
-                </el-select>
-              </el-form-item>
-            </el-col>
-          </el-row>
-          <el-row>
-            <el-col :span="8">
-              <el-form-item :label="$t('commons.tag')" prop="tag">
-                <ms-input-tag :currentScenario="newData" ref="tag" v-model="newData.tags"/>
-              </el-form-item>
-            </el-col>
-            <el-col :span="8">
-              <el-form-item :label="$t('commons.description')" prop="description">
-                <el-input class="ms-http-textarea"
-                          v-model="newData.description"
-                          type="textarea"
-                          :autosize="{ minRows: 1, maxRows: 10}"
-                          :rows="1" size="small"/>
-              </el-form-item>
-            </el-col>
-          </el-row>
-        </div>
+          <!-- MOCK信息 -->
+          <ms-form-divider :title="$t('test_track.plan_view.mock_info')"/>
+          <div class="base-info mock-info">
+            <el-row>
+              <el-col :span="20">
+                Mock地址：
+                <el-link  target="_blank" style="color: black"
+                          type="primary">{{ this.newMockUrl }}
+                </el-link>
+              </el-col>
+            </el-row>
 
-        <!-- MOCK信息 -->
-        <ms-form-divider :title="$t('test_track.plan_view.mock_info')"/>
-        <div class="base-info mock-info">
-          <el-row>
-            <el-col :span="20">
-              Mock地址：
-              <el-link  target="_blank" style="color: black"
-                       type="primary">{{ this.newMockUrl }}
-              </el-link>
-            </el-col>
-          </el-row>
+          </div>
 
-        </div>
+          <!-- 请求参数 -->
+          <div>
+            <ms-form-divider :title="$t('api_test.definition.request.req_param')"/>
+            <ms-api-request-form :showScript="false" :request="oldRequest" :headers="oldRequest.headers"
+                                 :isShowEnable="isShowEnable"/>
+          </div>
 
-        <!-- 请求参数 -->
-        <div>
-          <ms-form-divider :title="$t('api_test.definition.request.req_param')"/>
-          <ms-api-request-form :showScript="false" :request="oldRequest" :headers="oldRequest.headers"
-                               :isShowEnable="isShowEnable"/>
-        </div>
-
-      </el-form>
-
-      <!-- 响应内容-->
-      <ms-form-divider :title="$t('api_test.definition.request.res_param')"/>
-      <ms-response-text :response="oldResponse"/>
-
-      <!-- 其他信息-->
-      <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>
+
+        <!-- 响应内容-->
+        <ms-form-divider :title="$t('api_test.definition.request.res_param')"/>
+        <ms-response-text :response="oldResponse"/>
+
+        <!-- 其他信息-->
+        <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>
+    </div>
   </div>
 </template>
 <script>
diff --git a/frontend/src/business/components/api/definition/components/complete/version/SQLApiVersionDiff.vue b/frontend/src/business/components/api/definition/components/complete/version/SQLApiVersionDiff.vue
index 3e7402679a..57d386b5c4 100644
--- a/frontend/src/business/components/api/definition/components/complete/version/SQLApiVersionDiff.vue
+++ b/frontend/src/business/components/api/definition/components/complete/version/SQLApiVersionDiff.vue
@@ -1,106 +1,116 @@
 <template>
-  <div class="compare-class" v-loading="isReloadData">
-    <el-card style="width: 50%;" ref="old">
-      <div style="background-color: white;">
-        <el-row>
-          <el-col>
-            <!--操作按钮-->
-            <el-tooltip :content="$t('commons.follow')" placement="bottom" effect="dark" v-if="!showFollow">
-              <i class="el-icon-star-off"
-                 style="color: #783987; font-size: 25px; margin-right: 5px; position: relative; top: 5px; cursor: pointer "/>
-            </el-tooltip>
-            <el-tooltip :content="$t('commons.cancel')" placement="bottom" effect="dark" v-if="showFollow">
-              <i class="el-icon-star-on"
-                 style="color: #783987; font-size: 28px; margin-right: 5px; position: relative; top: 5px; cursor: pointer "/>
-            </el-tooltip>
-          </el-col>
-        </el-row>
-        <!-- 基础信息 -->
-        <p class="tip">{{ $t('test_track.plan_view.base_info') }} </p>
-        <br/>
-        <el-row>
-          <el-col>
-            <ms-basis-api  :moduleOptions="moduleOptions" :is-read-only="true"
-                          :basisData="oldData" ref="basicForm"
-                          />
-          </el-col>
-        </el-row>
-        <!-- 请求参数 -->
-        <p class="tip">{{ $t('api_test.definition.request.req_param') }} </p>
-        <ms-basis-parameters :showScript="false" :request="oldRequest" :is-read-only="true"/>
+  <div>
+    <el-row>
+      <el-col :span="12">
+        <el-tag>当前{{oldData.versionName }}</el-tag><span style="margin-left: 10px">{{oldData.userName}}</span><span style="margin-left: 10px">{{oldData.updateTime | timestampFormatDate }}</span>
+      </el-col>
+      <el-col :span="12">
+        <el-tag>{{ newData.versionName }}</el-tag><span style="margin-left: 10px">{{newData.userName}}</span><span style="margin-left: 10px">{{newData.updateTime | timestampFormatDate }}</span>
+      </el-col>
+    </el-row>
+    <div class="compare-class" v-loading="isReloadData">
+      <el-card style="width: 50%;" ref="old">
+        <div style="background-color: white;">
+          <el-row>
+            <el-col>
+              <!--操作按钮-->
+              <el-tooltip :content="$t('commons.follow')" placement="bottom" effect="dark" v-if="!showFollow">
+                <i class="el-icon-star-off"
+                   style="color: #783987; font-size: 25px; margin-right: 5px; position: relative; top: 5px; cursor: pointer "/>
+              </el-tooltip>
+              <el-tooltip :content="$t('commons.cancel')" placement="bottom" effect="dark" v-if="showFollow">
+                <i class="el-icon-star-on"
+                   style="color: #783987; font-size: 28px; margin-right: 5px; position: relative; top: 5px; cursor: pointer "/>
+              </el-tooltip>
+            </el-col>
+          </el-row>
+          <!-- 基础信息 -->
+          <p class="tip">{{ $t('test_track.plan_view.base_info') }} </p>
+          <br/>
+          <el-row>
+            <el-col>
+              <ms-basis-api  :moduleOptions="moduleOptions" :is-read-only="true"
+                             :basisData="oldData" ref="basicForm"
+              />
+            </el-col>
+          </el-row>
+          <!-- 请求参数 -->
+          <p class="tip">{{ $t('api_test.definition.request.req_param') }} </p>
+          <ms-basis-parameters :showScript="false" :request="oldRequest" :is-read-only="true"/>
 
-        <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>
+          <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>
 
-      </div>
-    </el-card>
-    <el-card style="width: 50%;" ref="new">
-      <div style="background-color: white;">
-        <el-row>
-          <el-col>
-            <!--操作按钮-->
-            <el-tooltip :content="$t('commons.follow')" placement="bottom" effect="dark" v-if="!newShowFollow">
-              <i class="el-icon-star-off"
-                 style="color: #783987; font-size: 25px; margin-right: 5px; position: relative; top: 5px; cursor: pointer "/>
-            </el-tooltip>
-            <el-tooltip :content="$t('commons.cancel')" placement="bottom" effect="dark" v-if="newShowFollow">
-              <i class="el-icon-star-on"
-                 style="color: #783987; font-size: 28px; margin-right: 5px; position: relative; top: 5px; cursor: pointer "/>
-            </el-tooltip>
-          </el-col>
-        </el-row>
-        <!-- 基础信息 -->
-        <p class="tip">{{ $t('test_track.plan_view.base_info') }} </p>
-        <br/>
-        <el-row>
-          <el-col>
-            <ms-basis-api  :moduleOptions="moduleOptions" :is-read-only="true"
-                           :basisData="newData" ref="basicForm"
-            />
-          </el-col>
-        </el-row>
-        <!-- 请求参数 -->
-        <p class="tip">{{ $t('api_test.definition.request.req_param') }} </p>
-        <ms-basis-parameters :showScript="false" :request="request" :is-read-only="true"/>
+        </div>
+      </el-card>
+      <el-card style="width: 50%;" ref="new">
+        <div style="background-color: white;">
+          <el-row>
+            <el-col>
+              <!--操作按钮-->
+              <el-tooltip :content="$t('commons.follow')" placement="bottom" effect="dark" v-if="!newShowFollow">
+                <i class="el-icon-star-off"
+                   style="color: #783987; font-size: 25px; margin-right: 5px; position: relative; top: 5px; cursor: pointer "/>
+              </el-tooltip>
+              <el-tooltip :content="$t('commons.cancel')" placement="bottom" effect="dark" v-if="newShowFollow">
+                <i class="el-icon-star-on"
+                   style="color: #783987; font-size: 28px; margin-right: 5px; position: relative; top: 5px; cursor: pointer "/>
+              </el-tooltip>
+            </el-col>
+          </el-row>
+          <!-- 基础信息 -->
+          <p class="tip">{{ $t('test_track.plan_view.base_info') }} </p>
+          <br/>
+          <el-row>
+            <el-col>
+              <ms-basis-api  :moduleOptions="moduleOptions" :is-read-only="true"
+                             :basisData="newData" ref="basicForm"
+              />
+            </el-col>
+          </el-row>
+          <!-- 请求参数 -->
+          <p class="tip">{{ $t('api_test.definition.request.req_param') }} </p>
+          <ms-basis-parameters :showScript="false" :request="request" :is-read-only="true"/>
 
-        <!-- 其他信息-->
-        <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>
+          <!-- 其他信息-->
+          <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>
 
-      </div>
-    </el-card>
+        </div>
+      </el-card>
+    </div>
   </div>
 </template>
 <script>
diff --git a/frontend/src/business/components/api/definition/components/complete/version/TCPApiVersionDiff.vue b/frontend/src/business/components/api/definition/components/complete/version/TCPApiVersionDiff.vue
index 39fabe9636..90e0b0628b 100644
--- a/frontend/src/business/components/api/definition/components/complete/version/TCPApiVersionDiff.vue
+++ b/frontend/src/business/components/api/definition/components/complete/version/TCPApiVersionDiff.vue
@@ -1,162 +1,172 @@
 <template>
-  <div class="compare-class" v-loading="isReloadData">
-    <el-card style="width: 50%;" ref="old">
-      <div style="background-color: white;">
-        <el-row>
-          <el-col>
-            <!--操作按钮-->
-            <el-tooltip :content="$t('commons.follow')" placement="bottom" effect="dark" v-if="!showFollow">
-              <i class="el-icon-star-off"
-                 style="color: #783987; font-size: 25px; margin-right: 5px; position: relative; top: 5px; cursor: pointer "/>
-            </el-tooltip>
-            <el-tooltip :content="$t('commons.cancel')" placement="bottom" effect="dark" v-if="showFollow">
-              <i class="el-icon-star-on"
-                 style="color: #783987; font-size: 28px; margin-right: 5px; position: relative; top: 5px; cursor: pointer "/>
-            </el-tooltip>
-          </el-col>
-        </el-row>
-        <!-- 基础信息 -->
-        <p class="tip">{{ $t('test_track.plan_view.base_info') }} </p>
-        <br/>
-        <el-row>
-          <el-col>
-            <ms-tcp-basic-api
-              :is-diff = true
-              :method-types="methodTypes"
-              :moduleOptions="moduleOptions"
-              :basisData="oldData" ref="basicForm"/>
-          </el-col>
-        </el-row>
-        <!-- MOCK信息 -->
-        <p class="tip">{{ $t('test_track.plan_view.mock_info') }} </p>
-        <div class="mock-info">
+  <div>
+    <el-row>
+      <el-col :span="12">
+        <el-tag>当前{{oldData.versionName }}</el-tag><span style="margin-left: 10px">{{oldData.userName}}</span><span style="margin-left: 10px">{{oldData.updateTime | timestampFormatDate }}</span>
+      </el-col>
+      <el-col :span="12">
+        <el-tag>{{ newData.versionName }}</el-tag><span style="margin-left: 10px">{{newData.userName}}</span><span style="margin-left: 10px">{{newData.updateTime | timestampFormatDate }}</span>
+      </el-col>
+    </el-row>
+    <div class="compare-class" v-loading="isReloadData">
+      <el-card style="width: 50%;" ref="old">
+        <div style="background-color: white;">
           <el-row>
-            <el-col :span="20">
-              Mock地址：
-              <el-link v-if="this.mockInfo !== '' " target="_blank" style="color: black"
-                       type="primary">{{ this.mockInfo }}
-              </el-link>
-              <el-link v-else target="_blank" style="color: darkred"
-                       type="primary">当前项目未开启Mock服务
-              </el-link>
+            <el-col>
+              <!--操作按钮-->
+              <el-tooltip :content="$t('commons.follow')" placement="bottom" effect="dark" v-if="!showFollow">
+                <i class="el-icon-star-off"
+                   style="color: #783987; font-size: 25px; margin-right: 5px; position: relative; top: 5px; cursor: pointer "/>
+              </el-tooltip>
+              <el-tooltip :content="$t('commons.cancel')" placement="bottom" effect="dark" v-if="showFollow">
+                <i class="el-icon-star-on"
+                   style="color: #783987; font-size: 28px; margin-right: 5px; position: relative; top: 5px; cursor: pointer "/>
+              </el-tooltip>
             </el-col>
           </el-row>
-        </div>
-        <!-- 请求参数 -->
-        <div v-if="oldApiProtocol==='TCP'">
-          <p class="tip">{{ $t('api_test.definition.request.req_param') }} </p>
-
-          <ms-tcp-format-parameters :show-script="false" :request="oldRequest" :is-read-only="true" ref="tcpFormatParameter"/>
-        </div>
-        <div v-else-if="oldApiProtocol==='ESB'">
-          <p class="tip">{{ $t('api_test.definition.request.req_param') }} </p>
-          <esb-definition v-xpack v-if="showXpackCompnent" :show-script="false" :is-read-only="true" :request="oldRequest" ref="esbDefinition"/>
-          <p class="tip">{{ $t('api_test.definition.request.res_param') }}</p>
-          <esb-definition-response v-xpack v-if="showXpackCompnent" :is-api-component="true" :is-read-only="true"
-                                   :request="oldRequest"/>
-          <!--      <api-response-component :currentProtocol="apiCase.request.protocol" :api-item="apiCase"/>-->
-        </div>
-
-        <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>
-
-      </div>
-    </el-card>
-    <el-card style="width: 50%;" ref="new">
-      <div style="background-color: white;">
-        <el-row>
-          <el-col>
-            <!--操作按钮-->
-            <el-tooltip :content="$t('commons.follow')" placement="bottom" effect="dark" v-if="!newShowFollow">
-              <i class="el-icon-star-off"
-                 style="color: #783987; font-size: 25px; margin-right: 5px; position: relative; top: 5px; cursor: pointer "/>
-            </el-tooltip>
-            <el-tooltip :content="$t('commons.cancel')" placement="bottom" effect="dark" v-if="newShowFollow">
-              <i class="el-icon-star-on"
-                 style="color: #783987; font-size: 28px; margin-right: 5px; position: relative; top: 5px; cursor: pointer "/>
-            </el-tooltip>
-          </el-col>
-        </el-row>
-        <!-- 基础信息 -->
-        <p class="tip">{{ $t('test_track.plan_view.base_info') }} </p>
-        <br/>
-        <el-row>
-          <el-col>
-            <ms-tcp-basic-api
-              :is-diff = true
-              :method-types="methodTypes"
-              :moduleOptions="moduleOptions"
-              :basisData="newData" ref="basicForm"/>
-          </el-col>
-        </el-row>
-        <!-- MOCK信息 -->
-        <p class="tip">{{ $t('test_track.plan_view.mock_info') }} </p>
-        <div class="mock-info">
+          <!-- 基础信息 -->
+          <p class="tip">{{ $t('test_track.plan_view.base_info') }} </p>
+          <br/>
           <el-row>
-            <el-col :span="20">
-              Mock地址：
-              <el-link v-if="this.mockInfo !== '' " target="_blank" style="color: black"
-                       type="primary">{{ this.mockInfo }}
-              </el-link>
-              <el-link v-else target="_blank" style="color: darkred"
-                       type="primary">当前项目未开启Mock服务
-              </el-link>
+            <el-col>
+              <ms-tcp-basic-api
+                :is-diff = true
+                :method-types="methodTypes"
+                :moduleOptions="moduleOptions"
+                :basisData="oldData" ref="basicForm"/>
             </el-col>
           </el-row>
-        </div>
-        <!-- 请求参数 -->
-        <div v-if="apiProtocol=='TCP'">
-          <p class="tip">{{ $t('api_test.definition.request.req_param') }} </p>
-          <ms-tcp-format-parameters :show-script="false" :request="request" :is-read-only="true" ref="tcpFormatParameter"/>
-        </div>
-        <div v-else-if="apiProtocol=='ESB'">
-          <p class="tip">{{ $t('api_test.definition.request.req_param') }} </p>
-          <esb-definition v-xpack v-if="showXpackCompnent" :show-script="false"  :is-read-only="true"  :request="request" ref="esbDefinition"/>
-          <p class="tip">{{ $t('api_test.definition.request.res_param') }}</p>
-          <esb-definition-response v-xpack v-if="showXpackCompnent" :is-api-component="true"  :is-read-only="true"
-                                   :request="request"/>
-          <!--      <api-response-component :currentProtocol="apiCase.request.protocol" :api-item="apiCase"/>-->
-        </div>
+          <!-- MOCK信息 -->
+          <p class="tip">{{ $t('test_track.plan_view.mock_info') }} </p>
+          <div class="mock-info">
+            <el-row>
+              <el-col :span="20">
+                Mock地址：
+                <el-link v-if="this.mockInfo !== '' " target="_blank" style="color: black"
+                         type="primary">{{ this.mockInfo }}
+                </el-link>
+                <el-link v-else target="_blank" style="color: darkred"
+                         type="primary">当前项目未开启Mock服务
+                </el-link>
+              </el-col>
+            </el-row>
+          </div>
+          <!-- 请求参数 -->
+          <div v-if="oldApiProtocol==='TCP'">
+            <p class="tip">{{ $t('api_test.definition.request.req_param') }} </p>
 
-        <!-- 其他信息-->
-        <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>
+            <ms-tcp-format-parameters :show-script="false" :request="oldRequest" :is-read-only="true" ref="tcpFormatParameter"/>
+          </div>
+          <div v-else-if="oldApiProtocol==='ESB'">
+            <p class="tip">{{ $t('api_test.definition.request.req_param') }} </p>
+            <esb-definition v-xpack v-if="showXpackCompnent" :show-script="false" :is-read-only="true" :request="oldRequest" ref="esbDefinition"/>
+            <p class="tip">{{ $t('api_test.definition.request.res_param') }}</p>
+            <esb-definition-response v-xpack v-if="showXpackCompnent" :is-api-component="true" :is-read-only="true"
+                                     :request="oldRequest"/>
+            <!--      <api-response-component :currentProtocol="apiCase.request.protocol" :api-item="apiCase"/>-->
+          </div>
+
+          <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>
+
+        </div>
+      </el-card>
+      <el-card style="width: 50%;" ref="new">
+        <div style="background-color: white;">
+          <el-row>
+            <el-col>
+              <!--操作按钮-->
+              <el-tooltip :content="$t('commons.follow')" placement="bottom" effect="dark" v-if="!newShowFollow">
+                <i class="el-icon-star-off"
+                   style="color: #783987; font-size: 25px; margin-right: 5px; position: relative; top: 5px; cursor: pointer "/>
+              </el-tooltip>
+              <el-tooltip :content="$t('commons.cancel')" placement="bottom" effect="dark" v-if="newShowFollow">
+                <i class="el-icon-star-on"
+                   style="color: #783987; font-size: 28px; margin-right: 5px; position: relative; top: 5px; cursor: pointer "/>
+              </el-tooltip>
+            </el-col>
+          </el-row>
+          <!-- 基础信息 -->
+          <p class="tip">{{ $t('test_track.plan_view.base_info') }} </p>
+          <br/>
+          <el-row>
+            <el-col>
+              <ms-tcp-basic-api
+                :is-diff = true
+                :method-types="methodTypes"
+                :moduleOptions="moduleOptions"
+                :basisData="newData" ref="basicForm"/>
+            </el-col>
+          </el-row>
+          <!-- MOCK信息 -->
+          <p class="tip">{{ $t('test_track.plan_view.mock_info') }} </p>
+          <div class="mock-info">
+            <el-row>
+              <el-col :span="20">
+                Mock地址：
+                <el-link v-if="this.mockInfo !== '' " target="_blank" style="color: black"
+                         type="primary">{{ this.mockInfo }}
+                </el-link>
+                <el-link v-else target="_blank" style="color: darkred"
+                         type="primary">当前项目未开启Mock服务
+                </el-link>
+              </el-col>
+            </el-row>
+          </div>
+          <!-- 请求参数 -->
+          <div v-if="apiProtocol=='TCP'">
+            <p class="tip">{{ $t('api_test.definition.request.req_param') }} </p>
+            <ms-tcp-format-parameters :show-script="false" :request="request" :is-read-only="true" ref="tcpFormatParameter"/>
+          </div>
+          <div v-else-if="apiProtocol=='ESB'">
+            <p class="tip">{{ $t('api_test.definition.request.req_param') }} </p>
+            <esb-definition v-xpack v-if="showXpackCompnent" :show-script="false"  :is-read-only="true"  :request="request" ref="esbDefinition"/>
+            <p class="tip">{{ $t('api_test.definition.request.res_param') }}</p>
+            <esb-definition-response v-xpack v-if="showXpackCompnent" :is-api-component="true"  :is-read-only="true"
+                                     :request="request"/>
+            <!--      <api-response-component :currentProtocol="apiCase.request.protocol" :api-item="apiCase"/>-->
+          </div>
+
+          <!-- 其他信息-->
+          <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>
 
 
-      </div>
-    </el-card>
+        </div>
+      </el-card>
+    </div>
   </div>
 </template>
 <script>
diff --git a/frontend/src/business/components/performance/test/DiffVersion.vue b/frontend/src/business/components/performance/test/DiffVersion.vue
index 3c7dbd21d0..02464d9c30 100644
--- a/frontend/src/business/components/performance/test/DiffVersion.vue
+++ b/frontend/src/business/components/performance/test/DiffVersion.vue
@@ -1,9 +1,15 @@
 <template>
 
 <div v-loading="isReloadData">
-  <div class="caall">
-
-  </div>
+  <div class="caall"></div>
+  <el-row>
+    <el-col :span="12">
+      <el-tag>当前{{oldData.versionName }}</el-tag><span style="margin-left: 10px">{{oldData.userName}}</span><span style="margin-left: 10px">{{oldData.updateTime | timestampFormatDate }}</span>
+    </el-col>
+    <el-col :span="12">
+      <el-tag>{{ newData.versionName }}</el-tag><span style="margin-left: 10px">{{newData.userName}}</span><span style="margin-left: 10px">{{newData.updateTime | timestampFormatDate }}</span>
+    </el-col>
+  </el-row>
   <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')"/>