diff --git a/backend/src/main/java/io/metersphere/base/mapper/ext/ExtOperatingLogMapper.java b/backend/src/main/java/io/metersphere/base/mapper/ext/ExtOperatingLogMapper.java
index 74d2a88bf4..ed0bd44183 100644
--- a/backend/src/main/java/io/metersphere/base/mapper/ext/ExtOperatingLogMapper.java
+++ b/backend/src/main/java/io/metersphere/base/mapper/ext/ExtOperatingLogMapper.java
@@ -9,4 +9,7 @@ import java.util.List;
 public interface ExtOperatingLogMapper {
 
     List<OperatingLogDTO> list(@Param("request") OperatingLogRequest request);
+
+    List<OperatingLogDTO> findBySourceId(@Param("request") OperatingLogRequest request);
+
 }
\ No newline at end of file
diff --git a/backend/src/main/java/io/metersphere/base/mapper/ext/ExtOperatingLogMapper.xml b/backend/src/main/java/io/metersphere/base/mapper/ext/ExtOperatingLogMapper.xml
index 327c592f34..7e374e567d 100644
--- a/backend/src/main/java/io/metersphere/base/mapper/ext/ExtOperatingLogMapper.xml
+++ b/backend/src/main/java/io/metersphere/base/mapper/ext/ExtOperatingLogMapper.xml
@@ -41,4 +41,31 @@
             order by t.oper_time desc
      </select>
 
+
+    <select id="findBySourceId" resultType="io.metersphere.log.vo.OperatingLogDTO">
+        SELECT
+        t.id,
+        t.project_id,
+        t.oper_user,
+        t.source_id,
+        t.oper_type,
+        t.oper_module,
+        t.oper_title,
+        t.oper_time,
+        t.oper_content,
+        t1.NAME userName,
+        t2.`name` projectName
+        FROM
+        operating_log t
+        LEFT JOIN USER t1 ON t.oper_user = t1.id
+        LEFT JOIN project t2 ON t.project_id = t2.id
+        LEFT JOIN workspace w on t2.workspace_id = w.id
+        <where>
+            t.oper_type in ('UPDATE','BATCH_UPDATE')
+            <if test="request.sourceId != null and request.sourceId != ''">
+                and t.source_id like #{request.sourceId, jdbcType=VARCHAR}
+            </if>
+        </where>
+        order by t.oper_time desc
+    </select>
 </mapper>
\ No newline at end of file
diff --git a/backend/src/main/java/io/metersphere/log/controller/OperatingLogController.java b/backend/src/main/java/io/metersphere/log/controller/OperatingLogController.java
index c7b1e873ff..63f4d0fa7d 100644
--- a/backend/src/main/java/io/metersphere/log/controller/OperatingLogController.java
+++ b/backend/src/main/java/io/metersphere/log/controller/OperatingLogController.java
@@ -35,4 +35,10 @@ public class OperatingLogController {
         return operatingLogService.get(id);
     }
 
+
+    @GetMapping("/get/source/{id}")
+    public List<OperatingLogDTO> findBySourceId(@PathVariable String id) {
+        return operatingLogService.findBySourceId(id);
+    }
+
 }
diff --git a/backend/src/main/java/io/metersphere/log/service/OperatingLogService.java b/backend/src/main/java/io/metersphere/log/service/OperatingLogService.java
index bf726ccbbf..f4c96f6ad1 100644
--- a/backend/src/main/java/io/metersphere/log/service/OperatingLogService.java
+++ b/backend/src/main/java/io/metersphere/log/service/OperatingLogService.java
@@ -45,4 +45,18 @@ public class OperatingLogService {
         }
         return dto;
     }
+
+    public List<OperatingLogDTO> findBySourceId(String id) {
+        OperatingLogRequest request = new OperatingLogRequest();
+        request.setSourceId("%" + id + "%");
+        List<OperatingLogDTO> logWithBLOBs = extOperatingLogMapper.findBySourceId(request);
+        if (CollectionUtils.isNotEmpty(logWithBLOBs)) {
+            for (OperatingLogDTO logWithBLOB : logWithBLOBs) {
+                if (StringUtils.isNotEmpty(logWithBLOB.getOperContent())) {
+                    logWithBLOB.setDetails(JSON.parseObject(logWithBLOB.getOperContent(), OperatingLogDetails.class));
+                }
+            }
+        }
+        return logWithBLOBs;
+    }
 }
diff --git a/backend/src/main/java/io/metersphere/log/vo/OperatingLogDTO.java b/backend/src/main/java/io/metersphere/log/vo/OperatingLogDTO.java
index 2e015310c7..4912a95659 100644
--- a/backend/src/main/java/io/metersphere/log/vo/OperatingLogDTO.java
+++ b/backend/src/main/java/io/metersphere/log/vo/OperatingLogDTO.java
@@ -28,5 +28,7 @@ public class OperatingLogDTO implements Serializable {
 
     private Long operTime;
 
+    private String operContent;
+
     private OperatingLogDetails details;
 }
\ No newline at end of file
diff --git a/backend/src/main/java/io/metersphere/log/vo/performance/PerformanceReference.java b/backend/src/main/java/io/metersphere/log/vo/performance/PerformanceReference.java
index 0f3ad969a7..87f28ae424 100644
--- a/backend/src/main/java/io/metersphere/log/vo/performance/PerformanceReference.java
+++ b/backend/src/main/java/io/metersphere/log/vo/performance/PerformanceReference.java
@@ -15,6 +15,7 @@ public class PerformanceReference {
         performanceColumns.put("loadConfiguration", "压力配置");
         performanceColumns.put("advancedConfiguration", "高级配置");
         performanceColumns.put("description", "描述");
+        performanceColumns.put("ms-dff-col", "loadConfiguration,advancedConfiguration");
 
         reportColumns.put("name","报告名称");
     }
diff --git a/backend/src/main/java/io/metersphere/log/vo/track/TestCaseReference.java b/backend/src/main/java/io/metersphere/log/vo/track/TestCaseReference.java
index 0e9a7b2254..b689b256d2 100644
--- a/backend/src/main/java/io/metersphere/log/vo/track/TestCaseReference.java
+++ b/backend/src/main/java/io/metersphere/log/vo/track/TestCaseReference.java
@@ -16,7 +16,7 @@ public class TestCaseReference {
         testCaseColumns.put("priority", "用例等级");
         testCaseColumns.put("method", "请求类型");
         testCaseColumns.put("prerequisite", "前置条件");
-        testCaseColumns.put("remark", "评论");
+        testCaseColumns.put("remark", "备注");
         testCaseColumns.put("steps", "用例步骤");
         testCaseColumns.put("other_test_name", "其他名称");
         testCaseColumns.put("review_status", "评审状态");
@@ -24,7 +24,8 @@ public class TestCaseReference {
         testCaseColumns.put("demand_name", "需求名称");
         testCaseColumns.put("follow_people", "关注人");
         testCaseColumns.put("status", "用例状态");
-        testCaseColumns.put("step_description", "步骤描述");
-        testCaseColumns.put("expected_result", "预期结果");
+        testCaseColumns.put("stepDescription", "步骤描述");
+        testCaseColumns.put("expectedResult", "预期结果");
+        testCaseColumns.put("comment", "评论");
     }
 }
\ No newline at end of file
diff --git a/backend/src/main/java/io/metersphere/track/service/TestCaseService.java b/backend/src/main/java/io/metersphere/track/service/TestCaseService.java
index 122b16bcbd..e2eec2c61e 100644
--- a/backend/src/main/java/io/metersphere/track/service/TestCaseService.java
+++ b/backend/src/main/java/io/metersphere/track/service/TestCaseService.java
@@ -30,6 +30,7 @@ import io.metersphere.log.vo.OperatingLogDetails;
 import io.metersphere.log.vo.track.TestCaseReference;
 import io.metersphere.service.FileService;
 import io.metersphere.service.ProjectService;
+import io.metersphere.track.dto.TestCaseCommentDTO;
 import io.metersphere.track.dto.TestCaseDTO;
 import io.metersphere.track.request.testcase.EditTestCaseRequest;
 import io.metersphere.track.request.testcase.QueryTestCaseRequest;
@@ -1156,6 +1157,13 @@ public class TestCaseService {
         TestCaseWithBLOBs bloBs = testCaseMapper.selectByPrimaryKey(id);
         if (bloBs != null) {
             List<DetailColumn> columns = ReflexObjectUtil.getColumns(bloBs, TestCaseReference.testCaseColumns);
+            // 增加评论内容
+            List<TestCaseCommentDTO> dtos = testCaseCommentService.getCaseComments(id);
+            if (CollectionUtils.isNotEmpty(dtos)) {
+                List<String> names = dtos.stream().map(TestCaseCommentDTO::getDescription).collect(Collectors.toList());
+                DetailColumn detailColumn = new DetailColumn("评论", "comment", String.join("\n", names), null);
+                columns.add(detailColumn);
+            }
             OperatingLogDetails details = new OperatingLogDetails(JSON.toJSONString(id), bloBs.getProjectId(), bloBs.getName(), bloBs.getCreateUser(), columns);
             return JSON.toJSONString(details);
         }
@@ -1168,6 +1176,13 @@ public class TestCaseService {
             String testCaseId = testPlanTestCaseMapper.selectByPrimaryKey(id).getCaseId();
             TestCaseWithBLOBs testCaseWithBLOBs = testCaseMapper.selectByPrimaryKey(testCaseId);
             List<DetailColumn> columns = ReflexObjectUtil.getColumns(bloBs, TestCaseReference.testCaseColumns);
+            // 增加评论内容
+            List<TestCaseCommentDTO> dtos = testCaseCommentService.getCaseComments(id);
+            if (CollectionUtils.isNotEmpty(dtos)) {
+                List<String> names = dtos.stream().map(TestCaseCommentDTO::getDescription).collect(Collectors.toList());
+                DetailColumn detailColumn = new DetailColumn("评论", "comment", String.join("\n", names), null);
+                columns.add(detailColumn);
+            }
             OperatingLogDetails details = new OperatingLogDetails(JSON.toJSONString(testCaseWithBLOBs.getId()), testCaseWithBLOBs.getProjectId(), testCaseWithBLOBs.getName(), testCaseWithBLOBs.getCreateUser(), columns);
             return JSON.toJSONString(details);
         }
diff --git a/frontend/src/business/components/api/automation/scenario/EditApiScenario.vue b/frontend/src/business/components/api/automation/scenario/EditApiScenario.vue
index 5f06c2bc54..c3c00da2ce 100644
--- a/frontend/src/business/components/api/automation/scenario/EditApiScenario.vue
+++ b/frontend/src/business/components/api/automation/scenario/EditApiScenario.vue
@@ -5,6 +5,8 @@
 
         <!--操作按钮-->
         <div class="ms-opt-btn">
+          <el-link type="primary" style="margin-right: 20px" @click="openHis" v-if="currentScenario.id">{{$t('operating_log.change_history')}}</el-link>
+
           <el-button id="inputDelay" type="primary" size="small" v-prevent-re-click @click="editScenario" title="ctrl + s" v-tester>
             {{ $t('commons.save') }}
           </el-button>
@@ -224,6 +226,7 @@
         <maximize-scenario :scenario-definition="scenarioDefinition" :envMap="projectEnvMap" :moduleOptions="moduleOptions"
                            :currentScenario="currentScenario" :type="type" ref="maximizeScenario" @openScenario="openScenario"/>
       </ms-drawer>
+      <ms-change-history ref="changeHistory"/>
 
     </div>
   </el-card>
@@ -262,6 +265,7 @@
   import MsDrawer from "../../../common/components/MsDrawer";
   import MsSelectTree from "../../../common/select-tree/SelectTree";
   import {saveScenario} from "@/business/components/api/automation/api-automation";
+  import MsChangeHistory from "../../../history/ChangeHistory";
 
   let jsonPath = require('jsonpath');
   export default {
@@ -289,7 +293,8 @@
       MaximizeScenario,
       ScenarioHeader,
       MsDrawer,
-      MsSelectTree
+      MsSelectTree,
+      MsChangeHistory
     },
     data() {
       return {
@@ -494,6 +499,9 @@
       },
     },
     methods: {
+      openHis(){
+        this.$refs.changeHistory.open(this.currentScenario.id);
+      },
       setModule(id, data) {
         this.currentScenario.apiScenarioModuleId = id;
         this.currentScenario.modulePath = data.path;
diff --git a/frontend/src/business/components/api/definition/components/complete/EditCompleteDubboApi.vue b/frontend/src/business/components/api/definition/components/complete/EditCompleteDubboApi.vue
index 30440cd444..6affa3cfef 100644
--- a/frontend/src/business/components/api/definition/components/complete/EditCompleteDubboApi.vue
+++ b/frontend/src/business/components/api/definition/components/complete/EditCompleteDubboApi.vue
@@ -6,6 +6,7 @@
       <el-col>
         <!--操作按钮-->
         <div style="float: right;margin-right: 20px;margin-top: 20px">
+          <el-link type="primary" style="margin-right: 20px" @click="openHis" v-if="basisData.id">{{$t('operating_log.change_history')}}</el-link>
           <el-button type="primary" size="small" @click="saveApi" title="ctrl + s" v-tester>{{ $t('commons.save') }}</el-button>
           <el-button type="primary" size="small" @click="runTest" v-tester>{{ $t('commons.test') }}</el-button>
         </div>
@@ -24,18 +25,19 @@
     <!-- 请求参数 -->
     <p class="tip">{{ $t('api_test.definition.request.req_param') }} </p>
     <ms-basis-parameters :showScript="false" :request="request"/>
-
+    <ms-change-history ref="changeHistory"/>
   </div>
 </template>
 
 <script>
   import MsBasisApi from "./BasisApi";
   import MsBasisParameters from "../request/dubbo/BasisParameters";
+  import MsChangeHistory from "../../../../history/ChangeHistory";
 
   export default {
     name: "MsApiDubboRequestForm",
     components: {
-      MsBasisApi, MsBasisParameters
+      MsBasisApi, MsBasisParameters,MsChangeHistory
     },
     props: {
       request: {},
@@ -72,6 +74,9 @@
       return {validated: false}
     },
     methods: {
+      openHis(){
+        this.$refs.changeHistory.open(this.basisData.id);
+      },
       callback() {
         this.validated = true;
       },
diff --git a/frontend/src/business/components/api/definition/components/complete/EditCompleteHTTPApi.vue b/frontend/src/business/components/api/definition/components/complete/EditCompleteHTTPApi.vue
index 6175545e92..ac733a3cd0 100644
--- a/frontend/src/business/components/api/definition/components/complete/EditCompleteHTTPApi.vue
+++ b/frontend/src/business/components/api/definition/components/complete/EditCompleteHTTPApi.vue
@@ -5,6 +5,7 @@
       <el-form :model="httpForm" :rules="rule" ref="httpForm" label-width="80px" label-position="right">
         <!-- 操作按钮 -->
         <div style="float: right;margin-right: 20px">
+          <el-link type="primary" style="margin-right: 20px" @click="openHis" v-if="httpForm.id">{{$t('operating_log.change_history')}}</el-link>
           <el-button type="primary" size="small" @click="saveApi" title="ctrl + s" v-tester>{{ $t('commons.save') }}</el-button>
           <el-button type="primary" size="small" @click="runTest" v-tester>{{ $t('commons.test') }}</el-button>
         </div>
@@ -107,6 +108,9 @@
       <!-- 响应内容-->
       <p class="tip">{{ $t('api_test.definition.request.res_param') }} </p>
       <ms-response-text :response="response"></ms-response-text>
+
+      <ms-change-history ref="changeHistory"/>
+
     </el-card>
   </div>
 </template>
@@ -121,10 +125,11 @@
   import MsInputTag from "@/business/components/api/automation/scenario/MsInputTag";
   import MsJsr233Processor from "../../../automation/scenario/component/Jsr233Processor";
   import MsSelectTree from "../../../../common/select-tree/SelectTree";
+  import MsChangeHistory from "../../../../history/ChangeHistory";
 
   export default {
     name: "MsAddCompleteHttpApi",
-    components: {MsJsr233Processor, MsResponseText, MsApiRequestForm, MsInputTag, MsSelectTree},
+    components: {MsJsr233Processor, MsResponseText, MsApiRequestForm, MsInputTag, MsSelectTree,MsChangeHistory},
     data() {
       let validateURL = (rule, value, callback) => {
         if (!this.httpForm.path.startsWith("/") || this.httpForm.path.match(/\s/) != null) {
@@ -224,6 +229,9 @@
       }
     },
     methods: {
+      openHis(){
+        this.$refs.changeHistory.open(this.httpForm.id);
+      },
       runTest() {
         this.$refs['httpForm'].validate((valid) => {
           if (valid) {
diff --git a/frontend/src/business/components/api/definition/components/complete/EditCompleteSQLApi.vue b/frontend/src/business/components/api/definition/components/complete/EditCompleteSQLApi.vue
index 1df2d1bf5a..086f9e28b0 100644
--- a/frontend/src/business/components/api/definition/components/complete/EditCompleteSQLApi.vue
+++ b/frontend/src/business/components/api/definition/components/complete/EditCompleteSQLApi.vue
@@ -5,6 +5,7 @@
       <el-col>
         <!--操作按钮-->
         <div style="float: right;margin-right: 20px;margin-top: 20px">
+          <el-link type="primary" style="margin-right: 20px" @click="openHis" v-if="basisData.id">{{$t('operating_log.change_history')}}</el-link>
           <el-button type="primary" size="small" @click="saveApi" title="ctrl + s" v-tester>{{ $t('commons.save') }}</el-button>
           <el-button type="primary" size="small" @click="runTest" v-tester>{{ $t('commons.test') }}</el-button>
         </div>
@@ -23,6 +24,7 @@
     <!-- 请求参数 -->
     <p class="tip">{{ $t('api_test.definition.request.req_param') }} </p>
     <ms-basis-parameters :showScript="false" :request="request"/>
+    <ms-change-history ref="changeHistory"/>
 
   </div>
 </template>
@@ -30,11 +32,12 @@
 <script>
 import MsBasisApi from "./BasisApi";
 import MsBasisParameters from "../request/database/BasisParameters";
+import MsChangeHistory from "../../../../history/ChangeHistory";
 
 export default {
   name: "MsApiSqlRequestForm",
   components: {
-    MsBasisApi, MsBasisParameters
+    MsBasisApi, MsBasisParameters,MsChangeHistory
   },
   props: {
     request: {},
@@ -70,6 +73,9 @@ export default {
     return {validated: false}
   },
   methods: {
+    openHis(){
+      this.$refs.changeHistory.open(this.basisData.id);
+    },
     callback() {
       this.validated = true;
     },
diff --git a/frontend/src/business/components/api/definition/components/complete/EditCompleteTCPApi.vue b/frontend/src/business/components/api/definition/components/complete/EditCompleteTCPApi.vue
index 0d53a9596b..7fa305f37b 100644
--- a/frontend/src/business/components/api/definition/components/complete/EditCompleteTCPApi.vue
+++ b/frontend/src/business/components/api/definition/components/complete/EditCompleteTCPApi.vue
@@ -5,6 +5,7 @@
       <el-col>
         <!--操作按钮-->
         <div style="float: right;margin-right: 20px;margin-top: 20px">
+          <el-link type="primary" style="margin-right: 20px" @click="openHis" v-if="basisData.id">{{$t('operating_log.change_history')}}</el-link>
           <el-button type="primary" size="small" @click="saveApi" title="ctrl + s" v-tester>{{ $t('commons.save') }}</el-button>
           <el-button type="primary" size="small" @click="runTest" v-tester>{{ $t('commons.test') }}</el-button>
         </div>
@@ -32,6 +33,7 @@
 <!--      <api-response-component :currentProtocol="apiCase.request.protocol" :api-item="apiCase"/>-->
     </div>
 
+    <ms-change-history ref="changeHistory"/>
 
   </div>
 
@@ -40,12 +42,14 @@
 <script>
 import MsTcpBasicApi from "./TCPBasicApi";
 import MsBasisParameters from "../request/tcp/TcpBasisParameters";
+import MsChangeHistory from "../../../../history/ChangeHistory";
+
 const requireComponent = require.context('@/business/components/xpack/', true, /\.vue$/);
 const esbDefinition = (requireComponent!=null&&requireComponent.keys().length) > 0 ? requireComponent("./apidefinition/EsbDefinition.vue") : {};
 const esbDefinitionResponse = (requireComponent!=null&&requireComponent.keys().length) > 0 ? requireComponent("./apidefinition/EsbDefinitionResponse.vue") : {};
 export default {
   name: "MsAddCompleteTcpApi",
-  components: {MsTcpBasicApi, MsBasisParameters,
+  components: {MsTcpBasicApi, MsBasisParameters,MsChangeHistory,
     "esbDefinition": esbDefinition.default,
     "esbDefinitionResponse": esbDefinitionResponse.default},
   props: {
@@ -102,6 +106,9 @@ export default {
     },
   },
   methods: {
+    openHis(){
+      this.$refs.changeHistory.open(this.basisData.id);
+    },
     callback() {
       this.validated = true;
     },
diff --git a/frontend/src/business/components/history/ChangeHistory.vue b/frontend/src/business/components/history/ChangeHistory.vue
new file mode 100644
index 0000000000..d7b93e0651
--- /dev/null
+++ b/frontend/src/business/components/history/ChangeHistory.vue
@@ -0,0 +1,104 @@
+<template>
+
+  <el-dialog :close-on-click-modal="false" :title="$t('operating_log.change_history')" :visible.sync="infoVisible" width="900px" :destroy-on-close="true"
+             @close="handleClose">
+    <el-table :data="details">
+      <el-table-column prop="operTime" :label="$t('operating_log.time')">
+        <template v-slot:default="scope">
+          <span>{{ scope.row.operTime | timestampFormatDate }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="userName" :label="$t('operating_log.user')"/>
+      <el-table-column prop="columnTitle" :label="$t('operating_log.change_field')">
+        <template v-slot:default="scope">
+          <div v-if="scope.row.details && scope.row.details.columns">
+            <div v-for="detail in scope.row.details.columns" :key="detail.id">{{ detail.columnTitle }}</div>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column prop="originalValue" :label="$t('operating_log.before_change')">
+        <template v-slot:default="scope">
+          <div v-if="scope.row.details && scope.row.details.columns">
+            <div v-for="detail in scope.row.details.columns" :key="detail.id">
+              <div v-if="linkDatas.indexOf(detail.columnName)!== -1">
+                <el-link style="color: #409EFF" @click="openDetail(scope.row,detail)">{{$t('operating_log.info')}}</el-link>
+              </div>
+              <el-tooltip :content="detail.originalValue" v-else>
+                <div class="current-value">{{ detail.originalValue ?detail.originalValue :"空值"}}</div>
+              </el-tooltip>
+            </div>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column prop="newValue" :label="$t('operating_log.after_change')">
+        <template v-slot:default="scope">
+          <div v-if="scope.row.details && scope.row.details.columns">
+            <div v-for="detail in scope.row.details.columns" :key="detail.id">
+              <div v-if="linkDatas.indexOf(detail.columnName)!== -1">
+                <el-link style="color: #409EFF" @click="openDetail(scope.row,detail)">{{$t('operating_log.info')}}</el-link>
+              </div>
+              <el-tooltip :content="detail.newValue" v-else>
+                <div class="current-value">{{ detail.newValue ? detail.newValue : "空值"}}</div>
+              </el-tooltip>
+            </div>
+          </div>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <ms-history-detail ref="historyDetail"></ms-history-detail>
+  </el-dialog>
+</template>
+<script>
+  import MsHistoryDetail from "./HistoryDetail";
+
+  export default {
+    name: "MsChangeHistory",
+    components: {MsHistoryDetail},
+    props: {
+      title: String,
+    },
+    data() {
+      return {
+        infoVisible: false,
+        details: [],
+        linkDatas: ["prerequisite", "steps", "remark", "request", "response","scenarioDefinition","loadConfiguration","advancedConfiguration"],
+      }
+    },
+    methods: {
+      handleClose() {
+        this.infoVisible = false;
+      },
+      getDetails(id) {
+        this.result = this.$get("/operating/log/get/source/" + id, response => {
+          let data = response.data;
+          if (data) {
+            this.details = data;
+          }
+        })
+      },
+      open(id) {
+        this.infoVisible = true;
+        this.getDetails(id);
+      },
+      openDetail(row, value) {
+        value.createUser = row.details.createUser;
+        value.operTime = row.operTime;
+        this.$refs.historyDetail.open(value);
+      },
+    }
+  }
+</script>
+
+<style scoped>
+  .current-value {
+    display: inline-block;
+    overflow-x: hidden;
+    padding-bottom: 0;
+    text-overflow: ellipsis;
+    vertical-align: middle;
+    white-space: nowrap;
+    width: 120px;
+  }
+
+</style>
diff --git a/frontend/src/business/components/history/HistoryDetail.vue b/frontend/src/business/components/history/HistoryDetail.vue
new file mode 100644
index 0000000000..8726df0424
--- /dev/null
+++ b/frontend/src/business/components/history/HistoryDetail.vue
@@ -0,0 +1,75 @@
+<template>
+
+  <el-dialog :close-on-click-modal="false" :title="$t('operating_log.info')" :visible.sync="infoVisible" width="900px" :destroy-on-close="true"
+             @close="handleClose" append-to-body>
+    <div style="height: 700px;overflow: auto">
+      <div v-if="detail.createUser">
+        <p class="tip">{{ this.$t('report.user_name') }} ：{{detail.createUser}}</p>
+      </div>
+      <div>
+        <p class="tip">{{ this.$t('operating_log.time') }} ：{{ detail.operTime | timestampFormatDate }}</p>
+      </div>
+      <div style="overflow: auto">
+        <p class="tip">{{ this.$t('report.test_log_details') }} </p>
+        <el-row style="background:#F8F8F8">
+          <el-col :span="12">
+            {{$t('operating_log.before_change')}}
+          </el-col>
+          <el-col :span="12">
+            {{$t('operating_log.after_change')}}
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <div style="width: 400px;overflow: auto">
+              <pre>{{ detail.originalValue }}</pre>
+            </div>
+          </el-col>
+          <el-col :span="12">
+            <div style="width: 400px;overflow: auto">
+              <pre>{{ detail.newValue }}</pre>
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+  export default {
+    name: "MsHistoryDetail",
+    components: {},
+    props: {
+      title: String,
+    },
+    data() {
+      return {
+        infoVisible: false,
+        detail: {},
+      }
+    },
+    methods: {
+      handleClose() {
+        this.infoVisible = false;
+      },
+      open(value) {
+        this.infoVisible = true;
+        this.detail = value;
+      },
+      getType(type) {
+        return this.LOG_TYPE_MAP.get(type);
+      },
+    }
+  }
+</script>
+
+<style scoped>
+
+  .tip {
+    padding: 3px 5px;
+    font-size: 16px;
+    border-radius: 4px;
+    border-left: 4px solid #783887;
+  }
+</style>
diff --git a/frontend/src/business/components/performance/test/EditPerformanceTest.vue b/frontend/src/business/components/performance/test/EditPerformanceTest.vue
index c87f886cc8..e682086de6 100644
--- a/frontend/src/business/components/performance/test/EditPerformanceTest.vue
+++ b/frontend/src/business/components/performance/test/EditPerformanceTest.vue
@@ -12,6 +12,7 @@
             </el-input>
           </el-col>
           <el-col :span="12" :offset="2">
+            <el-link type="primary" style="margin-right: 20px" @click="openHis" v-if="test.id">{{$t('operating_log.change_history')}}</el-link>
             <el-button :disabled="isReadOnly" type="primary" plain @click="save">{{ $t('commons.save') }}</el-button>
             <el-button :disabled="isReadOnly" type="primary" plain @click="saveAndRun">
               {{ $t('load_test.save_and_run') }}
@@ -41,6 +42,9 @@
           </el-tab-pane>
         </el-tabs>
       </el-card>
+
+      <ms-change-history ref="changeHistory"/>
+
     </ms-main-container>
   </ms-container>
 </template>
@@ -54,6 +58,7 @@ import MsMainContainer from "../../common/components/MsMainContainer";
 import {checkoutTestManagerOrTestUser, getCurrentProjectID} from "@/common/js/utils";
 import MsScheduleConfig from "../../common/components/MsScheduleConfig";
 import {LIST_CHANGE, PerformanceEvent} from "@/business/components/common/head/ListEvent";
+import MsChangeHistory from "../../history/ChangeHistory";
 
 export default {
   name: "EditPerformanceTest",
@@ -63,7 +68,8 @@ export default {
     PerformanceBasicConfig,
     PerformanceAdvancedConfig,
     MsContainer,
-    MsMainContainer
+    MsMainContainer,
+    MsChangeHistory
   },
   data() {
     return {
@@ -122,6 +128,9 @@ export default {
     this.importAPITest();
   },
   methods: {
+    openHis(){
+      this.$refs.changeHistory.open(this.test.id);
+    },
     importAPITest() {
       let apiTest = this.$store.state.test;
       if (apiTest && apiTest.name) {
diff --git a/frontend/src/business/components/track/case/components/TestCaseEdit.vue b/frontend/src/business/components/track/case/components/TestCaseEdit.vue
index 58f97e27e4..5557c982b2 100644
--- a/frontend/src/business/components/track/case/components/TestCaseEdit.vue
+++ b/frontend/src/business/components/track/case/components/TestCaseEdit.vue
@@ -5,6 +5,7 @@
 
         <!--操作按钮-->
         <div class="ms-opt-btn">
+          <el-link type="primary" style="margin-right: 20px" @click="openHis" v-if="form.id">{{$t('operating_log.change_history')}}</el-link>
           <ms-table-button v-if="type!='add'" :is-tester-permission="true"
                            id="inputDelay"
                            type="primary"
@@ -36,7 +37,7 @@
             <el-col :span="7">
               <el-form-item :label="$t('test_track.case.module')" :label-width="formLabelWidth" prop="module">
                 <ms-select-tree :disabled="readOnly" :data="treeNodes" :defaultKey="form.module" :obj="moduleObj"
-                                @getValue="setModule" clearable checkStrictly size="small" />
+                                @getValue="setModule" clearable checkStrictly size="small"/>
               </el-form-item>
             </el-col>
 
@@ -74,8 +75,8 @@
           <form-rich-text-item :disabled="readOnly" :label-width="formLabelWidth" :title="$t('test_track.case.prerequisite')" :data="form" prop="prerequisite"/>
 
           <step-change-item :label-width="formLabelWidth" :form="form"/>
-          <form-rich-text-item :disabled="readOnly" :label-width="formLabelWidth" v-if="form.stepModel === 'TEXT'"  :title="$t('test_track.case.step_desc')" :data="form" prop="stepDescription"/>
-          <form-rich-text-item :disabled="readOnly" :label-width="formLabelWidth" v-if="form.stepModel === 'TEXT'"  :title="$t('test_track.case.expected_results')" :data="form" prop="expectedResult"/>
+          <form-rich-text-item :disabled="readOnly" :label-width="formLabelWidth" v-if="form.stepModel === 'TEXT'" :title="$t('test_track.case.step_desc')" :data="form" prop="stepDescription"/>
+          <form-rich-text-item :disabled="readOnly" :label-width="formLabelWidth" v-if="form.stepModel === 'TEXT'" :title="$t('test_track.case.expected_results')" :data="form" prop="expectedResult"/>
 
           <test-case-step-item :label-width="formLabelWidth" v-if="form.stepModel === 'STEP'" :form="form" :read-only="readOnly"/>
 
@@ -108,6 +109,8 @@
         </el-form>
 
       </div>
+      <ms-change-history ref="changeHistory"/>
+
     </div>
   </el-card>
 
@@ -115,679 +118,684 @@
 </template>
 
 <script>
-import {TokenKey, WORKSPACE_ID} from '@/common/js/constants';
-import MsDialogFooter from '../../../common/components/MsDialogFooter'
-import {
-  checkoutTestManagerOrTestUser,
-  getCurrentUser,
-  getNodePath,
-  handleCtrlSEvent,
-  listenGoBack,
-  removeGoBackListener
-} from "@/common/js/utils";
-import TestCaseAttachment from "@/business/components/track/case/components/TestCaseAttachment";
-import CaseComment from "@/business/components/track/case/components/CaseComment";
-import MsInputTag from "@/business/components/api/automation/scenario/MsInputTag";
-import MsPreviousNextButton from "../../../common/components/MsPreviousNextButton";
-import {ELEMENTS} from "@/business/components/api/automation/scenario/Setting";
-import TestCaseComment from "@/business/components/track/case/components/TestCaseComment";
-import ReviewCommentItem from "@/business/components/track/review/commom/ReviewCommentItem";
-import {API_STATUS, REVIEW_STATUS, TEST} from "@/business/components/api/definition/model/JsonData";
-import MsTableButton from "@/business/components/common/components/MsTableButton";
-import MsSelectTree from "../../../common/select-tree/SelectTree";
-import MsTestCaseStepRichText from "./MsRichText";
-import CustomFiledComponent from "@/business/components/settings/workspace/template/CustomFiledComponent";
-import {
-  buildCustomFields,
-  buildTestCaseOldFields,
-  getTemplate,
-  parseCustomField
-} from "@/common/js/custom_field";
-import {SYSTEM_FIELD_NAME_MAP} from "@/common/js/table-constants";
-import MsFormDivider from "@/business/components/common/components/MsFormDivider";
-import TestCaseEditOtherInfo from "@/business/components/track/case/components/TestCaseEditOtherInfo";
-import FormRichTextItem from "@/business/components/track/case/components/FormRichTextItem";
-import TestCaseStepItem from "@/business/components/track/case/components/TestCaseStepItem";
-import StepChangeItem from "@/business/components/track/case/components/StepChangeItem";
+  import {TokenKey, WORKSPACE_ID} from '@/common/js/constants';
+  import MsDialogFooter from '../../../common/components/MsDialogFooter'
+  import {
+    checkoutTestManagerOrTestUser,
+    getCurrentUser,
+    getNodePath,
+    handleCtrlSEvent,
+    listenGoBack,
+    removeGoBackListener
+  } from "@/common/js/utils";
+  import TestCaseAttachment from "@/business/components/track/case/components/TestCaseAttachment";
+  import CaseComment from "@/business/components/track/case/components/CaseComment";
+  import MsInputTag from "@/business/components/api/automation/scenario/MsInputTag";
+  import MsPreviousNextButton from "../../../common/components/MsPreviousNextButton";
+  import {ELEMENTS} from "@/business/components/api/automation/scenario/Setting";
+  import TestCaseComment from "@/business/components/track/case/components/TestCaseComment";
+  import ReviewCommentItem from "@/business/components/track/review/commom/ReviewCommentItem";
+  import {API_STATUS, REVIEW_STATUS, TEST} from "@/business/components/api/definition/model/JsonData";
+  import MsTableButton from "@/business/components/common/components/MsTableButton";
+  import MsSelectTree from "../../../common/select-tree/SelectTree";
+  import MsTestCaseStepRichText from "./MsRichText";
+  import CustomFiledComponent from "@/business/components/settings/workspace/template/CustomFiledComponent";
+  import {
+    buildCustomFields,
+    buildTestCaseOldFields,
+    getTemplate,
+    parseCustomField
+  } from "@/common/js/custom_field";
+  import {SYSTEM_FIELD_NAME_MAP} from "@/common/js/table-constants";
+  import MsFormDivider from "@/business/components/common/components/MsFormDivider";
+  import TestCaseEditOtherInfo from "@/business/components/track/case/components/TestCaseEditOtherInfo";
+  import FormRichTextItem from "@/business/components/track/case/components/FormRichTextItem";
+  import TestCaseStepItem from "@/business/components/track/case/components/TestCaseStepItem";
+  import StepChangeItem from "@/business/components/track/case/components/StepChangeItem";
+  import MsChangeHistory from "../../../history/ChangeHistory";
 
-export default {
-  name: "TestCaseEdit",
-  components: {
-    StepChangeItem,
-    TestCaseStepItem,
-    FormRichTextItem,
-    TestCaseEditOtherInfo,
-    MsFormDivider,
-    CustomFiledComponent,
-    MsTableButton,
-    MsSelectTree,
-    ReviewCommentItem,
-    TestCaseComment, MsPreviousNextButton, MsInputTag, CaseComment, MsDialogFooter, TestCaseAttachment,
-    MsTestCaseStepRichText
-  },
-  data() {
-    return {
-      testCaseTemplate: {},
-      // sysList: [],//一级选择框的数据
-      options: REVIEW_STATUS,
-      statuOptions: API_STATUS,
-       comments: [],
-      result: {},
-      dialogFormVisible: false,
-      form: {
-        name: '',
-        module: 'default-module',
-        nodePath:'/默认模块',
-        maintainer: getCurrentUser().id,
-        priority: 'P0',
-        type: '',
-        method: '',
-        prerequisite: '',
-        testId: '',
-        otherTestName: '',
-        steps: [{
-          num: 1,
-          desc: '',
-          result: ''
-        }],
-        stepDesc: '',
-        stepResult: '',
-        selected: [],
-        remark: '',
-        tags: [],
-        demandId: '',
-        demandName: '',
-        status: 'Prepare',
-        reviewStatus: 'Prepare',
-        stepDescription: '',
-        expectedResult: '',
-        stepModel: 'STEP',
-        customNum: ''
-      },
-      readOnly: false,
-      maintainerOptions: [],
-      testOptions: [],
-      workspaceId: '',
-      rules: {
-        name: [
-          {required: true, message: this.$t('test_track.case.input_name'), trigger: 'blur'},
-          {max: 255, message: this.$t('test_track.length_less_than') + '255', trigger: 'blur'}
+  export default {
+    name: "TestCaseEdit",
+    components: {
+      StepChangeItem,
+      TestCaseStepItem,
+      FormRichTextItem,
+      TestCaseEditOtherInfo,
+      MsFormDivider,
+      CustomFiledComponent,
+      MsTableButton,
+      MsSelectTree,
+      ReviewCommentItem,
+      TestCaseComment, MsPreviousNextButton, MsInputTag, CaseComment, MsDialogFooter, TestCaseAttachment,
+      MsTestCaseStepRichText,
+      MsChangeHistory
+    },
+    data() {
+      return {
+        testCaseTemplate: {},
+        // sysList: [],//一级选择框的数据
+        options: REVIEW_STATUS,
+        statuOptions: API_STATUS,
+        comments: [],
+        result: {},
+        dialogFormVisible: false,
+        form: {
+          name: '',
+          module: 'default-module',
+          nodePath: '/默认模块',
+          maintainer: getCurrentUser().id,
+          priority: 'P0',
+          type: '',
+          method: '',
+          prerequisite: '',
+          testId: '',
+          otherTestName: '',
+          steps: [{
+            num: 1,
+            desc: '',
+            result: ''
+          }],
+          stepDesc: '',
+          stepResult: '',
+          selected: [],
+          remark: '',
+          tags: [],
+          demandId: '',
+          demandName: '',
+          status: 'Prepare',
+          reviewStatus: 'Prepare',
+          stepDescription: '',
+          expectedResult: '',
+          stepModel: 'STEP',
+          customNum: ''
+        },
+        readOnly: false,
+        maintainerOptions: [],
+        testOptions: [],
+        workspaceId: '',
+        rules: {
+          name: [
+            {required: true, message: this.$t('test_track.case.input_name'), trigger: 'blur'},
+            {max: 255, message: this.$t('test_track.length_less_than') + '255', trigger: 'blur'}
+          ],
+          module: [{required: true, message: this.$t('test_track.case.input_module'), trigger: 'change'}],
+          customNum: [
+            {required: true, message: "ID必填", trigger: 'blur'},
+            {max: 50, message: this.$t('test_track.length_less_than') + '50', trigger: 'blur'}
+          ],
+          demandName: [{required: true, message: this.$t('test_track.case.input_demand_name'), trigger: 'change'}],
+          maintainer: [{required: true, message: this.$t('test_track.case.input_maintainer'), trigger: 'change'}],
+          priority: [{required: true, message: this.$t('test_track.case.input_priority'), trigger: 'change'}],
+          method: [{required: true, message: this.$t('test_track.case.input_method'), trigger: 'change'}],
+          // prerequisite: [{max: 500, message: this.$t('test_track.length_less_than') + '500', trigger: 'blur'}],
+          // remark: [{max: 1000, message: this.$t('test_track.length_less_than') + '1000', trigger: 'blur'}]
+        },
+        customFieldRules: {},
+        customFieldForm: {},
+        formLabelWidth: "120px",
+        operationType: '',
+        isCreateContinue: false,
+        isStepTableAlive: true,
+        isFormAlive: true,
+        methodOptions: [
+          {value: 'auto', label: this.$t('test_track.case.auto')},
+          {value: 'manual', label: this.$t('test_track.case.manual')}
         ],
-        module: [{required: true, message: this.$t('test_track.case.input_module'), trigger: 'change'}],
-        customNum: [
-          {required: true, message: "ID必填", trigger: 'blur'},
-          {max: 50, message: this.$t('test_track.length_less_than') + '50', trigger: 'blur'}
-        ],
-        demandName: [{required: true, message: this.$t('test_track.case.input_demand_name'), trigger: 'change'}],
-        maintainer: [{required: true, message: this.$t('test_track.case.input_maintainer'), trigger: 'change'}],
-        priority: [{required: true, message: this.$t('test_track.case.input_priority'), trigger: 'change'}],
-        method: [{required: true, message: this.$t('test_track.case.input_method'), trigger: 'change'}],
-        // prerequisite: [{max: 500, message: this.$t('test_track.length_less_than') + '500', trigger: 'blur'}],
-        // remark: [{max: 1000, message: this.$t('test_track.length_less_than') + '1000', trigger: 'blur'}]
+        testCase: {},
+        testCases: [],
+        index: 0,
+        showInputTag: true,
+        tableType: "",
+        moduleObj: {
+          id: 'id',
+          label: 'name',
+        },
+      };
+    },
+    props: {
+      treeNodes: {
+        type: Array
       },
-      customFieldRules: {},
-      customFieldForm: {},
-      formLabelWidth: "120px",
-      operationType: '',
-      isCreateContinue: false,
-      isStepTableAlive: true,
-      isFormAlive: true,
-      methodOptions: [
-        {value: 'auto', label: this.$t('test_track.case.auto')},
-        {value: 'manual', label: this.$t('test_track.case.manual')}
-      ],
-      testCase: {},
-      testCases: [],
-      index: 0,
-      showInputTag: true,
-      tableType:"",
-      moduleObj: {
-        id: 'id',
-        label: 'name',
+      currentTestCaseInfo: {},
+      selectNode: {
+        type: Object
       },
-    };
-  },
-  props: {
-    treeNodes: {
-      type: Array
+      selectCondition: {
+        type: Object
+      },
+      type: String,
+      customNum: {
+        type: Boolean,
+        default: false
+      }
     },
-    currentTestCaseInfo: {},
-    selectNode: {
-      type: Object
+    computed: {
+      projectIds() {
+        return this.$store.state.projectId
+      },
+      moduleOptions() {
+        return this.$store.state.testCaseModuleOptions;
+      },
+      systemNameMap() {
+        return SYSTEM_FIELD_NAME_MAP;
+      }
     },
-    selectCondition: {
-      type: Object
-    },
-    type: String,
-    customNum: {
-      type: Boolean,
-      default: false
-    }
-  },
-  computed: {
-    projectIds() {
-      return this.$store.state.projectId
-    },
-    moduleOptions() {
-      return this.$store.state.testCaseModuleOptions;
-    },
-    systemNameMap() {
-      return SYSTEM_FIELD_NAME_MAP;
-    }
-  },
-  mounted() {
-    if (!checkoutTestManagerOrTestUser()) {
-      this.readOnly = true;
-    }
-    this.getSelectOptions();
-    if (this.type === 'edit' || this.type === 'copy') {
-      this.open(this.currentTestCaseInfo)
-      this.getComments(this.currentTestCaseInfo)
-    }
-    // Cascader 级联选择器: 点击文本就让它自动点击前面的input就可以触发选择。
-    setInterval(function () {
-      document.querySelectorAll('.el-cascader-node__label').forEach(el => {
-        el.onclick = function () {
-          if (this.previousElementSibling) this.previousElementSibling.click();
-        };
-      });
-    }, 1000);
-    if(this.selectNode && this.selectNode.data && !this.form.id){
+    mounted() {
+      if (!checkoutTestManagerOrTestUser()) {
+        this.readOnly = true;
+      }
+      this.getSelectOptions();
+      if (this.type === 'edit' || this.type === 'copy') {
+        this.open(this.currentTestCaseInfo)
+        this.getComments(this.currentTestCaseInfo)
+      }
+      // Cascader 级联选择器: 点击文本就让它自动点击前面的input就可以触发选择。
+      setInterval(function () {
+        document.querySelectorAll('.el-cascader-node__label').forEach(el => {
+          el.onclick = function () {
+            if (this.previousElementSibling) this.previousElementSibling.click();
+          };
+        });
+      }, 1000);
+      if (this.selectNode && this.selectNode.data && !this.form.id) {
         this.form.module = this.selectNode.data.id;
         this.form.nodePath = this.selectNode.data.path;
-    }
-    if((!this.form.module || this.form.module==="default-module" || this.form.module ==="root") && this.treeNodes.length > 0){
-      this.form.module =  this.treeNodes[0].id;
-      this.form.nodePath = this.treeNodes[0].path;
-    }
-  },
-  created() {
-    this.projectId = this.projectIds;
-    let initAddFuc = this.initAddFuc;
-    getTemplate('field/template/case/get/relate/', this)
-      .then((template) => {
-        this.testCaseTemplate = template;
-        initAddFuc();
-      });
-    if(this.selectNode && this.selectNode.data && !this.form.id){
-      this.form.module = this.selectNode.data.id;
-      this.form.nodePath = this.selectNode.data.path;
-    }else{
-      this.form.module =this.treeNodes && this.length>0? this.treeNodes[0].id:"";
-    }
-    if (this.type === 'edit' || this.type === 'copy') {
-      this.form.module = this.currentTestCaseInfo.nodeId;
-      this.form.nodePath = this.currentTestCaseInfo.nodePath;
-    }
-    if((!this.form.module || this.form.module==="default-module" || this.form.module ==="root") && this.treeNodes.length > 0){
-      this.form.module =  this.treeNodes[0].id;
-      this.form.nodePath = this.treeNodes[0].path;
-    }
-  },
-  methods: {
-    setModule(id,data) {
-      this.form.module = id;
-      this.form.nodePath = data.path;
+      }
+      if ((!this.form.module || this.form.module === "default-module" || this.form.module === "root") && this.treeNodes.length > 0) {
+        this.form.module = this.treeNodes[0].id;
+        this.form.nodePath = this.treeNodes[0].path;
+      }
     },
-    initAddFuc() {
-      // this.loadOptions();
-      this.addListener(); //  添加 ctrl s 监听
-      if(this.selectNode && this.selectNode.data && !this.form.id){
+    created() {
+      this.projectId = this.projectIds;
+      let initAddFuc = this.initAddFuc;
+      getTemplate('field/template/case/get/relate/', this)
+        .then((template) => {
+          this.testCaseTemplate = template;
+          initAddFuc();
+        });
+      if (this.selectNode && this.selectNode.data && !this.form.id) {
         this.form.module = this.selectNode.data.id;
         this.form.nodePath = this.selectNode.data.path;
-      }else{
-        this.form.module =this.treeNodes && this.length>0? this.treeNodes[0].id:"";
+      } else {
+        this.form.module = this.treeNodes && this.length > 0 ? this.treeNodes[0].id : "";
       }
       if (this.type === 'edit' || this.type === 'copy') {
         this.form.module = this.currentTestCaseInfo.nodeId;
         this.form.nodePath = this.currentTestCaseInfo.nodePath;
       }
-      if((!this.form.module || this.form.module==="default-module" || this.form.module ==="root") && this.treeNodes.length > 0){
-        this.form.module =  this.treeNodes[0].id;
+      if ((!this.form.module || this.form.module === "default-module" || this.form.module === "root") && this.treeNodes.length > 0) {
+        this.form.module = this.treeNodes[0].id;
         this.form.nodePath = this.treeNodes[0].path;
       }
-      if (this.type === 'add') {
-        //设置自定义熟悉默认值
-        parseCustomField(this.form, this.testCaseTemplate, this.customFieldForm, this.customFieldRules, buildTestCaseOldFields(this.form));
-        this.form.name = this.testCaseTemplate.caseName;
-        this.form.stepDescription = this.testCaseTemplate.stepDescription;
-        this.form.expectedResult = this.testCaseTemplate.expectedResult;
-        this.form.prerequisite = this.testCaseTemplate.prerequisite;
-        if (this.testCaseTemplate.steps) {
-          this.form.steps = JSON.parse(this.testCaseTemplate.steps);
+    },
+    methods: {
+      openHis(){
+        this.$refs.changeHistory.open(this.form.id);
+      },
+      setModule(id, data) {
+        this.form.module = id;
+        this.form.nodePath = data.path;
+      },
+      initAddFuc() {
+        // this.loadOptions();
+        this.addListener(); //  添加 ctrl s 监听
+        if (this.selectNode && this.selectNode.data && !this.form.id) {
+          this.form.module = this.selectNode.data.id;
+          this.form.nodePath = this.selectNode.data.path;
+        } else {
+          this.form.module = this.treeNodes && this.length > 0 ? this.treeNodes[0].id : "";
         }
-      }
-    },
-
-    handleCommand(e) {
-      if (e === "ADD_AND_CREATE") {
-        this.$refs['caseFrom'].validate((valid) => {
-          if (!valid) {
-            this.saveCase();
-          } else {
-            this.saveCase();
-            let tab = {}
-            tab.name = 'add'
-            this.$emit('addTab', tab)
+        if (this.type === 'edit' || this.type === 'copy') {
+          this.form.module = this.currentTestCaseInfo.nodeId;
+          this.form.nodePath = this.currentTestCaseInfo.nodePath;
+        }
+        if ((!this.form.module || this.form.module === "default-module" || this.form.module === "root") && this.treeNodes.length > 0) {
+          this.form.module = this.treeNodes[0].id;
+          this.form.nodePath = this.treeNodes[0].path;
+        }
+        if (this.type === 'add') {
+          //设置自定义熟悉默认值
+          parseCustomField(this.form, this.testCaseTemplate, this.customFieldForm, this.customFieldRules, buildTestCaseOldFields(this.form));
+          this.form.name = this.testCaseTemplate.caseName;
+          this.form.stepDescription = this.testCaseTemplate.stepDescription;
+          this.form.expectedResult = this.testCaseTemplate.expectedResult;
+          this.form.prerequisite = this.testCaseTemplate.prerequisite;
+          if (this.testCaseTemplate.steps) {
+            this.form.steps = JSON.parse(this.testCaseTemplate.steps);
           }
+        }
+      },
+
+      handleCommand(e) {
+        if (e === "ADD_AND_CREATE") {
+          this.$refs['caseFrom'].validate((valid) => {
+            if (!valid) {
+              this.saveCase();
+            } else {
+              this.saveCase();
+              let tab = {}
+              tab.name = 'add'
+              this.$emit('addTab', tab)
+            }
+          })
+        } else {
+          this.saveCase();
+        }
+      },
+      openComment() {
+        this.$refs.testCaseComment.open()
+      },
+      getComments(testCase) {
+        let id = '';
+        if (testCase) {
+          id = testCase.id;
+        } else {
+          id = this.form.id;
+        }
+        this.result = this.$get('/test/case/comment/list/' + id, res => {
+          this.comments = res.data;
         })
-      } else {
-        this.saveCase();
-      }
-    },
-    openComment() {
-      this.$refs.testCaseComment.open()
-    },
-    getComments(testCase) {
-      let id = '';
-      if (testCase) {
-        id = testCase.id;
-      } else {
-        id = this.form.id;
-      }
-      this.result = this.$get('/test/case/comment/list/' + id, res => {
-        this.comments = res.data;
-      })
-    },
-    showAll() {
-      if (!this.customizeVisible) {
-        this.operatingElements = ELEMENTS.get("ALL");
-        this.selectedTreeNode = undefined;
-      }
-      //this.reload();
-    },
-    reload() {
-      this.isStepTableAlive = false;
-      this.$nextTick(() => (this.isStepTableAlive = true));
-    },
-    reloadForm() {
-      this.isFormAlive = false;
-      this.$nextTick(() => (this.isFormAlive = true));
-    },
-    open(testCase) {
-      /*
-             this.form.selected=[["automation", "3edaaf31-3fa4-4a53-9654-320205c2953a"],["automation", "3aa58bd1-c986-448c-8060-d32713dbd4eb"]]
-      */
-      this.projectId = this.projectIds;
-      let initFuc = this.initEdit;
-      getTemplate('field/template/case/get/relate/', this)
-        .then((template) => {
-          this.testCaseTemplate = template;
-          initFuc(testCase);
+      },
+      showAll() {
+        if (!this.customizeVisible) {
+          this.operatingElements = ELEMENTS.get("ALL");
+          this.selectedTreeNode = undefined;
+        }
+        //this.reload();
+      },
+      reload() {
+        this.isStepTableAlive = false;
+        this.$nextTick(() => (this.isStepTableAlive = true));
+      },
+      reloadForm() {
+        this.isFormAlive = false;
+        this.$nextTick(() => (this.isFormAlive = true));
+      },
+      open(testCase) {
+        /*
+               this.form.selected=[["automation", "3edaaf31-3fa4-4a53-9654-320205c2953a"],["automation", "3aa58bd1-c986-448c-8060-d32713dbd4eb"]]
+        */
+        this.projectId = this.projectIds;
+        let initFuc = this.initEdit;
+        getTemplate('field/template/case/get/relate/', this)
+          .then((template) => {
+            this.testCaseTemplate = template;
+            initFuc(testCase);
+          });
+      },
+      initEdit(testCase) {
+        if (window.history && window.history.pushState) {
+          history.pushState(null, null, document.URL);
+          window.addEventListener('popstate', this.close);
+        }
+        this.resetForm();
+        listenGoBack(this.close);
+        this.operationType = 'add';
+        if (testCase) {
+          //修改
+          this.operationType = 'edit';
+          //复制
+          if (this.type === 'copy') {
+            this.operationType = 'add';
+            this.setFormData(testCase);
+            this.setTestCaseExtInfo(testCase);
+            this.getSelectOptions();
+            //设置自定义熟悉默认值
+            parseCustomField(this.form, this.testCaseTemplate, this.customFieldForm, this.customFieldRules, buildTestCaseOldFields(this.form));
+            this.reload();
+          } else {
+            this.initTestCases(testCase);
+          }
+        } else {
+          if (this.selectNode.data) {
+            this.form.module = this.selectNode.data.id;
+          } else {
+            if (this.moduleOptions.length > 0) {
+              this.form.module = this.moduleOptions[0].id;
+            }
+          }
+          let user = JSON.parse(localStorage.getItem(TokenKey));
+          this.form.priority = 'P3';
+          this.form.type = 'functional';
+          this.form.method = 'manual';
+          this.form.maintainer = user.id;
+          this.form.tags = [];
+          this.getSelectOptions();
+          parseCustomField(this.form, this.testCaseTemplate, this.customFieldForm, this.customFieldRules, buildTestCaseOldFields(this.form));
+          this.reload();
+        }
+      },
+      handlePre() {
+        this.index--;
+        this.getTestCase(this.index)
+      },
+      handleNext() {
+        this.index++;
+        this.getTestCase(this.index);
+      },
+      initTestCases(testCase) {
+        this.result = this.$post('/test/case/list/ids', this.selectCondition, response => {
+          this.testCases = response.data;
+          for (let i = 0; i < this.testCases.length; i++) {
+            if (this.testCases[i].id === testCase.id) {
+              this.index = i;
+              this.getTestCase(i);
+            }
+          }
         });
-    },
-    initEdit(testCase) {
-      if (window.history && window.history.pushState) {
-        history.pushState(null, null, document.URL);
-        window.addEventListener('popstate', this.close);
-      }
-      this.resetForm();
-      listenGoBack(this.close);
-      this.operationType = 'add';
-      if (testCase) {
-        //修改
-        this.operationType = 'edit';
-        //复制
-        if (this.type === 'copy') {
-          this.operationType = 'add';
+      },
+      getTestCase(index) {
+        this.showInputTag = false;
+        let testCase = this.testCases[index];
+        this.result = this.$get('/test/case/get/' + testCase.id, response => {
+          let testCase = response.data;
           this.setFormData(testCase);
           this.setTestCaseExtInfo(testCase);
           this.getSelectOptions();
-          //设置自定义熟悉默认值
-          parseCustomField(this.form, this.testCaseTemplate, this.customFieldForm, this.customFieldRules, buildTestCaseOldFields(this.form));
           this.reload();
-        } else {
-          this.initTestCases(testCase);
-        }
-      } else {
-        if (this.selectNode.data) {
-          this.form.module = this.selectNode.data.id;
-        } else {
-          if (this.moduleOptions.length > 0) {
-            this.form.module = this.moduleOptions[0].id;
-          }
-        }
-        let user = JSON.parse(localStorage.getItem(TokenKey));
-        this.form.priority = 'P3';
-        this.form.type = 'functional';
-        this.form.method = 'manual';
-        this.form.maintainer = user.id;
-        this.form.tags = [];
-        this.getSelectOptions();
-        parseCustomField(this.form, this.testCaseTemplate, this.customFieldForm, this.customFieldRules, buildTestCaseOldFields(this.form));
-        this.reload();
-      }
-    },
-    handlePre() {
-      this.index--;
-      this.getTestCase(this.index)
-    },
-    handleNext() {
-      this.index++;
-      this.getTestCase(this.index);
-    },
-    initTestCases(testCase) {
-      this.result = this.$post('/test/case/list/ids', this.selectCondition, response => {
-        this.testCases = response.data;
-        for (let i = 0; i < this.testCases.length; i++) {
-          if (this.testCases[i].id === testCase.id) {
-            this.index = i;
-            this.getTestCase(i);
-          }
-        }
-      });
-    },
-    getTestCase(index) {
-      this.showInputTag = false;
-      let testCase = this.testCases[index];
-      this.result = this.$get('/test/case/get/' + testCase.id, response => {
-        let testCase = response.data;
-        this.setFormData(testCase);
-        this.setTestCaseExtInfo(testCase);
-        this.getSelectOptions();
-        this.reload();
-        this.$nextTick(() => {
-          this.showInputTag = true
+          this.$nextTick(() => {
+            this.showInputTag = true
+          });
         });
-      });
-    },
-    async setFormData(testCase) {
-      try {
-        testCase.selected = JSON.parse(testCase.testId);
-      } catch (error) {
-        testCase.selected = testCase.testId
-      }
-      let tmp = {};
-      Object.assign(tmp, testCase);
-      tmp.steps = JSON.parse(testCase.steps);
-      if (!tmp.steps || tmp.steps.length < 1) {
-        tmp.steps = [{
+      },
+      async setFormData(testCase) {
+        try {
+          testCase.selected = JSON.parse(testCase.testId);
+        } catch (error) {
+          testCase.selected = testCase.testId
+        }
+        let tmp = {};
+        Object.assign(tmp, testCase);
+        tmp.steps = JSON.parse(testCase.steps);
+        if (!tmp.steps || tmp.steps.length < 1) {
+          tmp.steps = [{
+            num: 1,
+            desc: '',
+            result: ''
+          }];
+        }
+        tmp.tags = JSON.parse(tmp.tags);
+        Object.assign(this.form, tmp);
+        if (!this.form.stepModel) {
+          this.form.stepModel = "STEP";
+        }
+        this.form.module = testCase.nodeId;
+        //设置自定义熟悉默认值
+        parseCustomField(this.form, this.testCaseTemplate, this.customFieldForm, this.customFieldRules, buildTestCaseOldFields(this.form));
+        // 重新渲染，显示自定义字段的必填校验
+        this.reloadForm();
+      },
+      setTestCaseExtInfo(testCase) {
+        this.testCase = {};
+        if (testCase) {
+          // 复制 不查询评论
+          this.testCase = testCase.isCopy ? {} : testCase;
+        }
+      },
+      close() {
+        //移除监听，防止监听其他页面
+        removeGoBackListener(this.close);
+        this.dialogFormVisible = false;
+      },
+      saveCase() {
+        let isValidate = true;
+        this.$refs['caseFrom'].validate((valid) => {
+          if (!valid) {
+            isValidate = false;
+            return false;
+          }
+        });
+        this.$refs['customFieldForm'].validate((valid) => {
+          if (!valid) {
+            isValidate = false;
+            return false;
+          }
+        });
+        if (isValidate) {
+          this._saveCase();
+        }
+      },
+      _saveCase() {
+        let param = this.buildParam();
+        if (this.validate(param)) {
+          let option = this.getOption(param);
+          this.result = this.$request(option, (response) => {
+            this.$success(this.$t('commons.save_success'));
+            this.operationType = "edit"
+            this.form.id = response.id;
+            this.$emit("refreshTestCase",)
+            this.tableType = 'edit';
+            this.$emit("refresh", this.form);
+            this.form.id = response.data
+            if (this.type === 'add' || this.type === 'copy') {
+              param.id = response.data;
+              this.$emit("caseCreate", param);
+              this.close();
+            } else {
+              this.$emit("caseEdit", param);
+            }
+          });
+        }
+      },
+      buildParam() {
+        let param = {};
+        Object.assign(param, this.form);
+        param.steps = JSON.stringify(this.form.steps);
+        param.nodeId = this.form.module;
+        param.nodePath = getNodePath(this.form.module, this.moduleOptions);
+        if (this.projectId) {
+          param.projectId = this.projectId;
+        }
+        if (this.type === 'copy') {
+          param.num = "";
+        }
+        param.name = param.name.trim();
+
+        if (this.form.tags instanceof Array) {
+          this.form.tags = JSON.stringify(this.form.tags);
+        }
+        param.testId = JSON.stringify(this.form.selected);
+        param.tags = this.form.tags;
+        param.type = 'functional';
+        buildCustomFields(this.form, param, this.testCaseTemplate);
+        this.parseOldFields(param);
+        return param;
+      },
+      parseOldFields(param) {
+        let customFieldsStr = param.customFields;
+        if (customFieldsStr) {
+          let customFields = JSON.parse(customFieldsStr);
+          customFields.forEach(item => {
+            if (item.name === '用例等级') {
+              param.priority = item.value;
+            }
+            if (item.name === '责任人') {
+              param.maintainer = item.value;
+            }
+            if (item.name === '用例状态') {
+              param.status = item.value;
+            }
+          });
+        }
+      },
+      getOption(param) {
+        let type = {}
+        if (this.tableType === 'edit') {
+          type = 'edit'
+        } else if (this.type === 'copy') {
+          type = 'add'
+        } else {
+          type = this.type
+        }
+        let formData = new FormData();
+        let url = '/test/case/' + type;
+
+        if (this.$refs.otherInfo && this.$refs.otherInfo.uploadList) {
+          this.$refs.otherInfo.uploadList.forEach(f => {
+            formData.append("file", f);
+          });
+        }
+
+        if (this.$refs.otherInfo && this.$refs.otherInfo.fileList) {
+          if (param.isCopy) {
+            // 如果是copy，则把文件的ID传到后台进行文件复制
+            param.fileIds = this.$refs.otherInfo.fileList.map(f => f.id);
+          }
+          param.updatedFileList = this.$refs.otherInfo.fileList;
+        } else {
+          param.fileIds = [];
+          param.updatedFileList = [];
+        }
+
+        let requestJson = JSON.stringify(param, function (key, value) {
+          return key === "file" ? undefined : value
+        });
+
+        formData.append('request', new Blob([requestJson], {
+          type: "application/json"
+        }));
+
+        return {
+          method: 'POST',
+          url: url,
+          data: formData,
+          headers: {
+            'Content-Type': undefined
+          }
+        };
+      },
+      validate(param) {
+        for (let i = 0; i < param.steps.length; i++) {
+          if ((param.steps[i].desc && param.steps[i].desc.length > 300) ||
+            (param.steps[i].result && param.steps[i].result.length > 300)) {
+            this.$warning(this.$t('test_track.case.step_desc') + ","
+              + this.$t('test_track.case.expected_results') + this.$t('test_track.length_less_than') + '300');
+            return false;
+          }
+        }
+        if (param.name == '') {
+          this.$warning(this.$t('test_track.case.input_name'));
+          return false;
+        }
+        return true;
+      },
+      typeChange() {
+        this.form.testId = '';
+      },
+      getMaintainerOptions() {
+        let workspaceId = localStorage.getItem(WORKSPACE_ID);
+        this.$post('/user/ws/member/tester/list', {workspaceId: workspaceId}, response => {
+          this.maintainerOptions = response.data;
+        });
+      },
+      getSelectOptions() {
+        this.getMaintainerOptions();
+      },
+      resetForm() {
+        //防止点击修改后，点击新建触发校验
+        if (this.$refs['caseFrom']) {
+          this.$refs['caseFrom'].validate((valid) => {
+            this.$refs['caseFrom'].resetFields();
+            this._resetForm();
+            return true;
+          });
+        } else {
+          this._resetForm();
+        }
+      },
+      _resetForm() {
+        this.form.name = '';
+        this.form.module = '';
+        this.form.type = '';
+        this.form.method = '';
+        this.form.maintainer = '';
+        this.form.priority = '';
+        this.form.prerequisite = '';
+        this.form.remark = '';
+        this.form.testId = '';
+        this.form.testName = '';
+        this.form.steps = [{
           num: 1,
           desc: '',
           result: ''
         }];
-      }
-      tmp.tags = JSON.parse(tmp.tags);
-      Object.assign(this.form, tmp);
-      if (!this.form.stepModel) {
-        this.form.stepModel = "STEP";
-      }
-      this.form.module = testCase.nodeId;
-      //设置自定义熟悉默认值
-      parseCustomField(this.form, this.testCaseTemplate, this.customFieldForm, this.customFieldRules, buildTestCaseOldFields(this.form));
-      // 重新渲染，显示自定义字段的必填校验
-      this.reloadForm();
-    },
-    setTestCaseExtInfo(testCase) {
-      this.testCase = {};
-      if (testCase) {
-        // 复制 不查询评论
-        this.testCase = testCase.isCopy ? {} : testCase;
-      }
-    },
-    close() {
-      //移除监听，防止监听其他页面
-      removeGoBackListener(this.close);
-      this.dialogFormVisible = false;
-    },
-    saveCase() {
-      let isValidate = true;
-      this.$refs['caseFrom'].validate((valid) => {
-        if (!valid) {
-          isValidate = false;
-          return false;
-        }
-      });
-      this.$refs['customFieldForm'].validate((valid) => {
-        if (!valid) {
-          isValidate = false;
-          return false;
-        }
-      });
-      if (isValidate) {
-        this._saveCase();
-      }
-    },
-    _saveCase() {
-      let param = this.buildParam();
-      if (this.validate(param)) {
-        let option = this.getOption(param);
-        this.result = this.$request(option, (response) => {
-          this.$success(this.$t('commons.save_success'));
-          this.operationType="edit"
-          this.form.id=response.id;
-          this.$emit("refreshTestCase",)
-          this.tableType='edit';
-          this.$emit("refresh",this.form);
-          this.form.id=response.data
-          if (this.type === 'add' || this.type === 'copy') {
-            param.id = response.data;
-            this.$emit("caseCreate", param);
-            this.close();
-          } else {
-            this.$emit("caseEdit", param);
-          }
-        });
-      }
-    },
-    buildParam() {
-      let param = {};
-      Object.assign(param, this.form);
-      param.steps = JSON.stringify(this.form.steps);
-      param.nodeId = this.form.module;
-      param.nodePath = getNodePath(this.form.module, this.moduleOptions);
-      if (this.projectId) {
-        param.projectId = this.projectId;
-      }
-      if (this.type === 'copy') {
-        param.num = "";
-      }
-      param.name = param.name.trim();
-
-      if (this.form.tags instanceof Array) {
-        this.form.tags = JSON.stringify(this.form.tags);
-      }
-      param.testId = JSON.stringify(this.form.selected);
-      param.tags = this.form.tags;
-      param.type = 'functional';
-      buildCustomFields(this.form, param, this.testCaseTemplate);
-      this.parseOldFields(param);
-      return param;
-    },
-    parseOldFields(param) {
-      let customFieldsStr =  param.customFields;
-      if (customFieldsStr) {
-        let customFields = JSON.parse(customFieldsStr);
-        customFields.forEach(item => {
-          if (item.name === '用例等级') {
-            param.priority = item.value;
-          }
-          if (item.name === '责任人') {
-            param.maintainer = item.value;
-          }
-          if (item.name === '用例状态') {
-            param.status = item.value;
-          }
-        });
-      }
-    },
-    getOption(param) {
-      let type={}
-      if(this.tableType==='edit'){
-        type='edit'
-      }else if(this.type === 'copy'){
-        type = 'add'
-      }else{
-        type=this.type
-      }
-      let formData = new FormData();
-      let url = '/test/case/' + type;
-
-      if (this.$refs.otherInfo && this.$refs.otherInfo.uploadList) {
-        this.$refs.otherInfo.uploadList.forEach(f => {
-          formData.append("file", f);
-        });
-      }
-
-      if (this.$refs.otherInfo && this.$refs.otherInfo.fileList) {
-        if (param.isCopy) {
-          // 如果是copy，则把文件的ID传到后台进行文件复制
-          param.fileIds = this.$refs.otherInfo.fileList.map(f => f.id);
-        }
-        param.updatedFileList = this.$refs.otherInfo.fileList;
-      } else {
-        param.fileIds = [];
-        param.updatedFileList = [];
-      }
-
-      let requestJson = JSON.stringify(param, function (key, value) {
-        return key === "file" ? undefined : value
-      });
-
-      formData.append('request', new Blob([requestJson], {
-        type: "application/json"
-      }));
-
-      return {
-        method: 'POST',
-        url: url,
-        data: formData,
-        headers: {
-          'Content-Type': undefined
-        }
-      };
-    },
-    validate(param) {
-      for (let i = 0; i < param.steps.length; i++) {
-        if ((param.steps[i].desc && param.steps[i].desc.length > 300) ||
-          (param.steps[i].result && param.steps[i].result.length > 300)) {
-          this.$warning(this.$t('test_track.case.step_desc') + ","
-            + this.$t('test_track.case.expected_results') + this.$t('test_track.length_less_than') + '300');
-          return false;
-        }
-      }
-      if (param.name == '') {
-        this.$warning(this.$t('test_track.case.input_name'));
-        return false;
-      }
-      return true;
-    },
-    typeChange() {
-      this.form.testId = '';
-    },
-    getMaintainerOptions() {
-      let workspaceId = localStorage.getItem(WORKSPACE_ID);
-      this.$post('/user/ws/member/tester/list', {workspaceId: workspaceId}, response => {
-        this.maintainerOptions = response.data;
-      });
-    },
-    getSelectOptions() {
-      this.getMaintainerOptions();
-    },
-    resetForm() {
-      //防止点击修改后，点击新建触发校验
-      if (this.$refs['caseFrom']) {
-        this.$refs['caseFrom'].validate((valid) => {
-          this.$refs['caseFrom'].resetFields();
-          this._resetForm();
-          return true;
-        });
-      } else {
-        this._resetForm();
-      }
-    },
-    _resetForm() {
-      this.form.name = '';
-      this.form.module = '';
-      this.form.type = '';
-      this.form.method = '';
-      this.form.maintainer = '';
-      this.form.priority = '';
-      this.form.prerequisite = '';
-      this.form.remark = '';
-      this.form.testId = '';
-      this.form.testName = '';
-      this.form.steps = [{
-        num: 1,
-        desc: '',
-        result: ''
-      }];
-      this.form.customNum = '';
-    },
-    addListener() {
-      document.addEventListener("keydown", this.createCtrlSHandle);
-    },
-    removeListener() {
-      document.removeEventListener("keydown", this.createCtrlSHandle);
-    },
-    createCtrlSHandle(event) {
-      handleCtrlSEvent(event, this.saveCase);
-    },
+        this.form.customNum = '';
+      },
+      addListener() {
+        document.addEventListener("keydown", this.createCtrlSHandle);
+      },
+      removeListener() {
+        document.removeEventListener("keydown", this.createCtrlSHandle);
+      },
+      createCtrlSHandle(event) {
+        handleCtrlSEvent(event, this.saveCase);
+      },
+    }
   }
-}
 </script>
 
 <style scoped>
 
-.el-switch {
-  margin-bottom: 10px;
-}
+  .el-switch {
+    margin-bottom: 10px;
+  }
 
-.case-name {
-  width: 194px;
-}
+  .case-name {
+    width: 194px;
+  }
 
-.container {
-  height: 100vh;
-}
+  .container {
+    height: 100vh;
+  }
 
-.case-form {
-  height: 95%;
-  overflow: auto;
-}
+  .case-form {
+    height: 95%;
+    overflow: auto;
+  }
 
-.case-dialog >>> .el-dialog__body {
-  padding: 0 20px 10px 20px;
-}
+  .case-dialog >>> .el-dialog__body {
+    padding: 0 20px 10px 20px;
+  }
 
-.container >>> .el-card__body {
-  height: calc(100vh - 120px);
-}
+  .container >>> .el-card__body {
+    height: calc(100vh - 120px);
+  }
 
-.comment-card >>> .el-card__header {
-  padding: 27px 20px;
-}
+  .comment-card >>> .el-card__header {
+    padding: 27px 20px;
+  }
 
-.comment-card >>> .el-card__body {
-  height: calc(100vh - 120px);
-}
+  .comment-card >>> .el-card__body {
+    height: calc(100vh - 120px);
+  }
 
-.head-right {
-  text-align: right;
-}
+  .head-right {
+    text-align: right;
+  }
 
-.ms-main-div {
-  background-color: white;
-}
+  .ms-main-div {
+    background-color: white;
+  }
 
-.ms-opt-btn {
-  position: fixed;
-  right: 50px;
-  z-index: 1;
-}
+  .ms-opt-btn {
+    position: fixed;
+    right: 50px;
+    z-index: 1;
+  }
 
-.ms-case-input {
-  width: 100%;
-}
+  .ms-case-input {
+    width: 100%;
+  }
 
-.ms-case {
-  width: 100%;
-}
+  .ms-case {
+    width: 100%;
+  }
 
-/deep/ .el-button-group > .el-button:first-child {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-  height: 32px;
-  width: 56px;
-}
+  /deep/ .el-button-group > .el-button:first-child {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    height: 32px;
+    width: 56px;
+  }
 </style>
diff --git a/frontend/src/i18n/en-US.js b/frontend/src/i18n/en-US.js
index d49db2f458..14e8d79ddd 100644
--- a/frontend/src/i18n/en-US.js
+++ b/frontend/src/i18n/en-US.js
@@ -1822,5 +1822,6 @@ export default {
     before_change: "Before change",
     after_change: "After change",
     share: "Share",
+    change_history: "Change history",
   }
 };
diff --git a/frontend/src/i18n/zh-CN.js b/frontend/src/i18n/zh-CN.js
index d53d22fc8d..b99205421a 100644
--- a/frontend/src/i18n/zh-CN.js
+++ b/frontend/src/i18n/zh-CN.js
@@ -1830,5 +1830,6 @@ export default {
     before_change: "变更前",
     after_change: "变更后",
     share: "分享",
+    change_history: "变更历史",
   }
 };
diff --git a/frontend/src/i18n/zh-TW.js b/frontend/src/i18n/zh-TW.js
index 1f874af402..3984f6aad8 100644
--- a/frontend/src/i18n/zh-TW.js
+++ b/frontend/src/i18n/zh-TW.js
@@ -1830,5 +1830,6 @@ export default {
     before_change: "變更前",
     after_change: "變更後",
     share: "分享",
+    change_history: "變更歷史",
   }
 };