From 70840406e5abfb2b1ad1ff48b60d4111b5aa0de8 Mon Sep 17 00:00:00 2001
From: wxg0103 <727495428@qq.com>
Date: Fri, 8 Jul 2022 11:34:20 +0800
Subject: [PATCH] =?UTF-8?q?refactor(=E6=8E=A5=E5=8F=A3=E6=B5=8B=E8=AF=95):?=
 =?UTF-8?q?=20=E4=BF=AE=E6=94=B9=E6=8E=A5=E5=8F=A3=E5=AE=9A=E4=B9=89?=
 =?UTF-8?q?=E9=81=97=E7=95=99=E7=9A=84=E4=B8=BB=E9=A2=98=E8=89=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../automation/schedule/ScheduleMaintain.vue  |  25 +-
 .../components/assertion/ApiAssertions.vue    | 303 +++++++++---------
 .../components/case/ApiCaseItem.vue           |   2 +-
 .../complete/EditCompleteDubboApi.vue         |  16 +-
 .../complete/EditCompleteHTTPApi.vue          |   4 +-
 .../complete/EditCompleteSQLApi.vue           |  20 +-
 .../complete/EditCompleteTCPApi.vue           |  16 +-
 .../components/document/ApiDocumentAnchor.vue |   3 +-
 .../document/components/ApiInformation.vue    |   9 +-
 .../mock/Components/MockRequestParam.vue      |  46 ++-
 .../components/module/ModulePublicButton.vue  |   2 +-
 .../components/module/ModuleTrashButton.vue   |  70 ++--
 .../request/http/ApiHttpRequestForm.vue       | 149 +++++----
 .../definition/components/step/JmxStep.vue    | 180 ++++++-----
 .../track/case/components/TestCaseEdit.vue    |   5 +-
 .../case/components/TestCaseEditShow.vue      |  20 +-
 .../components/track/common/NodeTree.vue      |  23 +-
 .../plan/components/ScheduleMaintain.vue      |  34 +-
 18 files changed, 482 insertions(+), 445 deletions(-)

diff --git a/frontend/src/business/components/api/automation/schedule/ScheduleMaintain.vue b/frontend/src/business/components/api/automation/schedule/ScheduleMaintain.vue
index e74c260c16..b942d38071 100644
--- a/frontend/src/business/components/api/automation/schedule/ScheduleMaintain.vue
+++ b/frontend/src/business/components/api/automation/schedule/ScheduleMaintain.vue
@@ -59,7 +59,7 @@
                            ref="envPopover" class="env-popover"/>
             </div>
             <div class="ms-mode-div">
-                  <span class="ms-mode-span">{{ $t("run_mode.other_config") }}：</span>
+              <span class="ms-mode-span">{{ $t("run_mode.other_config") }}：</span>
               <el-checkbox v-model="runConfig.runWithinResourcePool">
                 {{ $t('run_mode.run_with_resource_pool') }}
               </el-checkbox>
@@ -96,9 +96,12 @@
 <script>
 import {
   getCurrentProjectID,
-  getCurrentUser, getCurrentWorkspaceId,
-  listenGoBack, objToStrMap,
-  removeGoBackListener, strMapToObj
+  getCurrentUser,
+  getCurrentWorkspaceId,
+  listenGoBack,
+  objToStrMap,
+  removeGoBackListener,
+  strMapToObj
 } from "@/common/js/utils";
 import Crontab from "@/business/components/common/cron/Crontab";
 import CrontabResult from "@/business/components/common/cron/CrontabResult";
@@ -157,10 +160,9 @@ export default {
         callback(new Error(this.$t('commons.input_content')));
       } else if (!cronValidate(cronValue)) {
         callback(new Error(this.$t('schedule.cron_expression_format_error')));
-      } else if(!this.intervalValidate()){
+      } else if (!this.intervalValidate()) {
         callback(new Error(this.$t('schedule.cron_expression_interval_error')));
-      }
-      else if (!customValidate.pass) {
+      } else if (!customValidate.pass) {
         callback(new Error(customValidate.info));
       } else {
         callback();
@@ -353,7 +355,7 @@ export default {
       //确定后回传的值
       this.form.cronValue = value;
       // 如果是第一次设置定时任务规则，则默认开启定时任务
-      if (!this.schedule.id){
+      if (!this.schedule.id) {
         this.schedule.enable = true;
       }
       this.$refs.crontabResult.resultList = resultList;
@@ -498,8 +500,8 @@ export default {
 }
 
 .head {
-  border-bottom: 1px solid #7C3985;
-  color: #7C3985;
+  border-bottom: 1px solid var(--primary_color);
+  color: var(--primary_color);
   font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", Arial, sans-serif;
   font-size: 13px;
   cursor: pointer;
@@ -520,7 +522,8 @@ export default {
   margin-right: 4px;
   margin-left: 10px;
 }
-.ms-el-form-item__error >>> .el-form-item__error{
+
+.ms-el-form-item__error >>> .el-form-item__error {
   left: -42px;
   padding-top: 0px;
 }
diff --git a/frontend/src/business/components/api/definition/components/assertion/ApiAssertions.vue b/frontend/src/business/components/api/definition/components/assertion/ApiAssertions.vue
index 4155eb6b39..c960208d58 100644
--- a/frontend/src/business/components/api/definition/components/assertion/ApiAssertions.vue
+++ b/frontend/src/business/components/api/definition/components/assertion/ApiAssertions.vue
@@ -71,7 +71,8 @@
             :callback="after"
             v-if="type === options.DOCUMENT"
           />
-          <el-button v-if="!type" :disabled="true" type="primary" size="mini">
+          <el-button v-if="!type" :disabled="true" type="primary" size="mini"
+                     style="background-color: var(--primary_color); border-color:var(--primary_color); ">
             {{ $t('api_test.request.assertions.add') }}
           </el-button>
         </el-col>
@@ -95,171 +96,171 @@
 </template>
 
 <script>
-  import MsApiAssertionText from "./ApiAssertionText";
-  import MsApiAssertionRegex from "./ApiAssertionRegex";
-  import MsApiAssertionDuration from "./ApiAssertionDuration";
-  import {ASSERTION_TYPE, JSONPath} from "../../model/ApiTestModel";
-  import MsApiAssertionsEdit from "./ApiAssertionsEdit";
-  import MsApiAssertionJsonPath from "./ApiAssertionJsonPath";
-  import MsApiAssertionJsr223 from "./ApiAssertionJsr223";
-  import MsApiJsonpathSuggestList from "./ApiJsonpathSuggestList";
-  import MsApiAssertionXPath2 from "./ApiAssertionXPath2";
-  import {getUUID} from "@/common/js/utils";
-  import ApiJsonPathSuggestButton from "./ApiJsonPathSuggestButton";
-  import MsApiJsonpathSuggest from "./ApiJsonpathSuggest";
-  import ApiBaseComponent from "../../../automation/scenario/common/ApiBaseComponent";
-  import MsApiAssertionDocument from "./document/DocumentHeader";
+import MsApiAssertionText from "./ApiAssertionText";
+import MsApiAssertionRegex from "./ApiAssertionRegex";
+import MsApiAssertionDuration from "./ApiAssertionDuration";
+import {ASSERTION_TYPE, JSONPath} from "../../model/ApiTestModel";
+import MsApiAssertionsEdit from "./ApiAssertionsEdit";
+import MsApiAssertionJsonPath from "./ApiAssertionJsonPath";
+import MsApiAssertionJsr223 from "./ApiAssertionJsr223";
+import MsApiJsonpathSuggestList from "./ApiJsonpathSuggestList";
+import MsApiAssertionXPath2 from "./ApiAssertionXPath2";
+import {getUUID} from "@/common/js/utils";
+import ApiJsonPathSuggestButton from "./ApiJsonPathSuggestButton";
+import MsApiJsonpathSuggest from "./ApiJsonpathSuggest";
+import ApiBaseComponent from "../../../automation/scenario/common/ApiBaseComponent";
+import MsApiAssertionDocument from "./document/DocumentHeader";
 
-  export default {
-    name: "MsApiAssertions",
-    components: {
-      ApiBaseComponent,
-      MsApiJsonpathSuggest,
-      ApiJsonPathSuggestButton,
-      MsApiAssertionXPath2,
-      MsApiAssertionJsr223,
-      MsApiJsonpathSuggestList,
-      MsApiAssertionJsonPath,
-      MsApiAssertionsEdit,
-      MsApiAssertionDuration,
-      MsApiAssertionRegex,
-      MsApiAssertionText,
-      MsApiAssertionDocument,
+export default {
+  name: "MsApiAssertions",
+  components: {
+    ApiBaseComponent,
+    MsApiJsonpathSuggest,
+    ApiJsonPathSuggestButton,
+    MsApiAssertionXPath2,
+    MsApiAssertionJsr223,
+    MsApiJsonpathSuggestList,
+    MsApiAssertionJsonPath,
+    MsApiAssertionsEdit,
+    MsApiAssertionDuration,
+    MsApiAssertionRegex,
+    MsApiAssertionText,
+    MsApiAssertionDocument,
+  },
+  props: {
+    draggable: {
+      type: Boolean,
+      default: false,
     },
-    props: {
-      draggable: {
-        type: Boolean,
-        default: false,
+    isMax: {
+      type: Boolean,
+      default: false,
+    },
+    showBtn: {
+      type: Boolean,
+      default: true,
+    },
+    showVersion: {
+      type: Boolean,
+      default: true,
+    },
+    assertions: {},
+    node: {},
+    request: {},
+    apiId: String,
+    response: {},
+    customizeStyle: {
+      type: String,
+      default: "margin-top: 10px"
+    },
+    isReadOnly: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      options: ASSERTION_TYPE,
+      time: "",
+      type: "",
+      loading: false,
+      reloadData: "",
+    }
+  },
+  watch: {
+    assertions: {
+      handler(v) {
+        this.computeStep();
       },
-      isMax: {
-        type: Boolean,
-        default: false,
-      },
-      showBtn: {
-        type: Boolean,
-        default: true,
-      },
-      showVersion: {
-        type: Boolean,
-        default: true,
-      },
-      assertions: {},
-      node: {},
-      request: {},
-      apiId: String,
-      response: {},
-      customizeStyle: {
-        type: String,
-        default: "margin-top: 10px"
-      },
-      isReadOnly: {
-        type: Boolean,
-        default: false
+      deep: true
+    },
+  },
+  methods: {
+    computeStep() {
+      let ruleSize = 0;
+      ruleSize = (this.assertions.jsonPath.length + this.assertions.jsr223.length + this.assertions.regex.length + this.assertions.xpath2.length);
+      if (this.assertions && this.assertions.document.data && (this.assertions.document.data.json.length > 0 || this.assertions.document.data.xml.length > 0)) {
+        ruleSize++;
       }
-    },
-    data() {
-      return {
-        options: ASSERTION_TYPE,
-        time: "",
-        type: "",
-        loading: false,
-        reloadData: "",
+      if (this.assertions.duration && this.assertions.duration.value > 0) {
+        ruleSize++;
       }
+      ruleSize += this.assertions.text ? this.assertions.text.length : 0;
+      this.request.ruleSize = ruleSize;
+      this.$emit('reload');
     },
-    watch: {
-      assertions: {
-        handler(v) {
-          this.computeStep();
-        },
-        deep: true
-      },
-    },
-    methods: {
-      computeStep() {
-        let ruleSize = 0;
-        ruleSize = (this.assertions.jsonPath.length + this.assertions.jsr223.length + this.assertions.regex.length + this.assertions.xpath2.length);
-        if (this.assertions && this.assertions.document.data && (this.assertions.document.data.json.length > 0 || this.assertions.document.data.xml.length > 0)) {
-          ruleSize++;
-        }
-        if (this.assertions.duration && this.assertions.duration.value > 0) {
-          ruleSize++;
-        }
-        ruleSize += this.assertions.text ? this.assertions.text.length : 0;
-        this.request.ruleSize = ruleSize;
-        this.$emit('reload');
-      },
 
-      after() {
-        this.type = "";
-        this.reloadData = getUUID().substring(0, 8);
-        this.reload();
-      },
-      copyRow() {
-        this.$emit('copyRow', this.assertions, this.node);
-      },
-      suggestJsonOpen() {
-        this.$emit('suggestClick');
-        this.$nextTick(() => {
-          if (!this.response || !this.response.responseResult || !this.response.responseResult.body) {
-            this.$message(this.$t('api_test.request.assertions.debug_first'));
-            return;
-          }
-          this.$refs.jsonpathSuggest.open(this.response.responseResult.body);
-        })
-      },
-      reload() {
-        this.loading = true
-        this.$nextTick(() => {
-          this.loading = false
-        })
-      },
-      active() {
-        this.assertions.active = !this.assertions.active;
-        this.reload();
-      },
-      remove() {
-        this.$emit('remove', this.assertions, this.node);
-      },
-      addJsonPathSuggest(data) {
-        let jsonItem = new JSONPath();
-        jsonItem.expression = data.path;
-        jsonItem.expect = data.value;
-        jsonItem.setJSONPathDescription();
-        let expect = jsonItem.expect;
-        if (expect) {
-          expect = expect.replaceAll('\\', "\\\\").replaceAll('(', "\\(").replaceAll(')', "\\)")
-            .replaceAll('+', "\\+").replaceAll('[', "\\[").replaceAll(']', "\\]")
-            .replaceAll('?', "\\?").replaceAll('/', "\\/").replaceAll('*', "\\*")
-            .replaceAll('^', "\\^").replaceAll('{', "\\{").replaceAll('}', "\\}").replaceAll('$', "\\$");
+    after() {
+      this.type = "";
+      this.reloadData = getUUID().substring(0, 8);
+      this.reload();
+    },
+    copyRow() {
+      this.$emit('copyRow', this.assertions, this.node);
+    },
+    suggestJsonOpen() {
+      this.$emit('suggestClick');
+      this.$nextTick(() => {
+        if (!this.response || !this.response.responseResult || !this.response.responseResult.body) {
+          this.$message(this.$t('api_test.request.assertions.debug_first'));
+          return;
         }
-        jsonItem.expect = expect;
-        jsonItem.enable = true;
-        this.assertions.jsonPath.push(jsonItem);
-      },
-      clearJson() {
-        this.assertions.jsonPath = [];
+        this.$refs.jsonpathSuggest.open(this.response.responseResult.body);
+      })
+    },
+    reload() {
+      this.loading = true
+      this.$nextTick(() => {
+        this.loading = false
+      })
+    },
+    active() {
+      this.assertions.active = !this.assertions.active;
+      this.reload();
+    },
+    remove() {
+      this.$emit('remove', this.assertions, this.node);
+    },
+    addJsonPathSuggest(data) {
+      let jsonItem = new JSONPath();
+      jsonItem.expression = data.path;
+      jsonItem.expect = data.value;
+      jsonItem.setJSONPathDescription();
+      let expect = jsonItem.expect;
+      if (expect) {
+        expect = expect.replaceAll('\\', "\\\\").replaceAll('(', "\\(").replaceAll(')', "\\)")
+          .replaceAll('+', "\\+").replaceAll('[', "\\[").replaceAll(']', "\\]")
+          .replaceAll('?', "\\?").replaceAll('/', "\\/").replaceAll('*', "\\*")
+          .replaceAll('^', "\\^").replaceAll('{', "\\{").replaceAll('}', "\\}").replaceAll('$', "\\$");
       }
+      jsonItem.expect = expect;
+      jsonItem.enable = true;
+      this.assertions.jsonPath.push(jsonItem);
+    },
+    clearJson() {
+      this.assertions.jsonPath = [];
     }
   }
+}
 </script>
 
 <style scoped>
-  .assertion-item {
-    width: 100%;
-  }
+.assertion-item {
+  width: 100%;
+}
 
-  .assertion-add {
-    padding: 10px;
-    margin: 5px 0;
-    border-radius: 5px;
-    border: #DCDFE6 solid 1px;
-  }
+.assertion-add {
+  padding: 10px;
+  margin: 5px 0;
+  border-radius: 5px;
+  border: #DCDFE6 solid 1px;
+}
 
-  .icon.is-active {
-    transform: rotate(90deg);
-  }
+.icon.is-active {
+  transform: rotate(90deg);
+}
 
-  /deep/ .el-card__body {
-    padding: 6px 10px;
-  }
+/deep/ .el-card__body {
+  padding: 6px 10px;
+}
 </style>
diff --git a/frontend/src/business/components/api/definition/components/case/ApiCaseItem.vue b/frontend/src/business/components/api/definition/components/case/ApiCaseItem.vue
index 26e2e8e0e5..1e010ecd4a 100644
--- a/frontend/src/business/components/api/definition/components/case/ApiCaseItem.vue
+++ b/frontend/src/business/components/api/definition/components/case/ApiCaseItem.vue
@@ -58,7 +58,7 @@
                 <el-tooltip :content="$t('commons.follow')" placement="bottom" effect="dark" v-if="!showFollow"
                             :disabled="true">
                   <i class="el-icon-star-off"
-                     style="color: #783987; font-size: 25px; margin-top: 2px; margin-right: 15px;cursor: pointer "
+                     style="color: var(--primary_color); font-size: 25px; margin-top: 2px; margin-right: 15px;cursor: pointer "
                      @click="saveFollow"/>
                 </el-tooltip>
                 <el-tooltip :content="$t('commons.cancel')" placement="bottom" effect="dark" v-if="showFollow"
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 179b6480ab..f69825df52 100644
--- a/frontend/src/business/components/api/definition/components/complete/EditCompleteDubboApi.vue
+++ b/frontend/src/business/components/api/definition/components/complete/EditCompleteDubboApi.vue
@@ -8,12 +8,12 @@
         <div style="float: right;margin-right: 20px;margin-top: 20px" 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; position: relative; top: 5px; cursor: pointer "
+               style="color: var(--primary_color); font-size: 25px; margin-right: 5px; position: relative; top: 5px; cursor: pointer "
                @click="saveFollow"/>
           </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 "
+               style="color: var(--primary_color); font-size: 28px; margin-right: 5px; position: relative; top: 5px; cursor: pointer "
                @click="saveFollow"/>
           </el-tooltip>
           <el-link type="primary" style="margin-right: 5px" @click="openHis" v-if="basisData.id">
@@ -247,7 +247,7 @@ export default {
     },
     compare(row) {
       this.basisData.createTime = this.$refs.versionHistory.versionOptions.filter(v => v.id === this.basisData.versionId)[0].createTime;
-      this.$get('/api/definition/get/' +  row.id+"/"+this.basisData.refId, response => {
+      this.$get('/api/definition/get/' + row.id + "/" + this.basisData.refId, response => {
         this.$get('/api/definition/get/' + response.data.id, res => {
           if (res.data) {
             this.newData = res.data;
@@ -279,14 +279,14 @@ export default {
       }
       return false;
     },
-    dealWithTag(api){
-      if(api.tags){
-        if(Object.prototype.toString.call(api.tags)==="[object String]"){
+    dealWithTag(api) {
+      if (api.tags) {
+        if (Object.prototype.toString.call(api.tags) === "[object String]") {
           api.tags = JSON.parse(api.tags);
         }
       }
-      if(this.basisData.tags){
-        if(Object.prototype.toString.call(this.basisData.tags)==="[object String]"){
+      if (this.basisData.tags) {
+        if (Object.prototype.toString.call(this.basisData.tags) === "[object String]") {
           this.basisData.tags = JSON.parse(this.basisData.tags);
         }
       }
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 59cc22c940..b73e4796f2 100644
--- a/frontend/src/business/components/api/definition/components/complete/EditCompleteHTTPApi.vue
+++ b/frontend/src/business/components/api/definition/components/complete/EditCompleteHTTPApi.vue
@@ -7,12 +7,12 @@
         <div style="float: right;margin-right: 20px" 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; position: relative; top: 5px; cursor: pointer "
+               style="color: var(--primary_color); font-size: 25px; margin-right: 5px; position: relative; top: 5px; cursor: pointer "
                @click="saveFollow"/>
           </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 "
+               style="color: var(--primary_color); font-size: 28px; margin-right: 5px; position: relative; top: 5px; cursor: pointer "
                @click="saveFollow"/>
           </el-tooltip>
           <el-link type="primary" style="margin-right: 5px" @click="openHis" v-if="httpForm.id">
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 eea5ebcf5c..7b7ba9bbfd 100644
--- a/frontend/src/business/components/api/definition/components/complete/EditCompleteSQLApi.vue
+++ b/frontend/src/business/components/api/definition/components/complete/EditCompleteSQLApi.vue
@@ -7,12 +7,12 @@
         <div style="float: right;margin-right: 20px;margin-top: 20px" 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; position: relative; top: 5px; cursor: pointer "
+               style="color: var(--primary_color); font-size: 25px; margin-right: 5px; position: relative; top: 5px; cursor: pointer "
                @click="saveFollow"/>
           </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 "
+               style="color: var(--primary_color); font-size: 28px; margin-right: 5px; position: relative; top: 5px; cursor: pointer "
                @click="saveFollow"/>
           </el-tooltip>
           <el-link type="primary" style="margin-right: 5px" @click="openHis" v-if="basisData.id">
@@ -171,8 +171,8 @@ export default {
       this.getVersionHistory();
     }
 
-    if(!this.request.environmentId){
-      this.request.environmentId =  this.$store.state.useEnvironment;
+    if (!this.request.environmentId) {
+      this.request.environmentId = this.$store.state.useEnvironment;
     }
   },
   methods: {
@@ -254,7 +254,7 @@ export default {
     },
     compare(row) {
       this.basisData.createTime = this.$refs.versionHistory.versionOptions.filter(v => v.id === this.basisData.versionId)[0].createTime;
-      this.$get('/api/definition/get/' +  row.id+"/"+this.basisData.refId, response => {
+      this.$get('/api/definition/get/' + row.id + "/" + this.basisData.refId, response => {
         this.$get('/api/definition/get/' + response.data.id, res => {
           if (res.data) {
             this.newData = res.data;
@@ -289,14 +289,14 @@ export default {
       }
       return false;
     },
-    dealWithTag(api){
-      if(api.tags){
-        if(Object.prototype.toString.call(api.tags)==="[object String]"){
+    dealWithTag(api) {
+      if (api.tags) {
+        if (Object.prototype.toString.call(api.tags) === "[object String]") {
           api.tags = JSON.parse(api.tags);
         }
       }
-      if(this.basisData.tags){
-        if(Object.prototype.toString.call(this.basisData.tags)==="[object String]"){
+      if (this.basisData.tags) {
+        if (Object.prototype.toString.call(this.basisData.tags) === "[object String]") {
           this.basisData.tags = JSON.parse(this.basisData.tags);
         }
       }
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 cda1be87c0..5ec6d4894f 100644
--- a/frontend/src/business/components/api/definition/components/complete/EditCompleteTCPApi.vue
+++ b/frontend/src/business/components/api/definition/components/complete/EditCompleteTCPApi.vue
@@ -7,12 +7,12 @@
         <div style="float: right;margin-right: 20px;margin-top: 20px" 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; position: relative; top: 5px; cursor: pointer "
+               style="color: var(--primary_color); font-size: 25px; margin-right: 5px; position: relative; top: 5px; cursor: pointer "
                @click="saveFollow"/>
           </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 "
+               style="color: var(--primary_color); font-size: 28px; margin-right: 5px; position: relative; top: 5px; cursor: pointer "
                @click="saveFollow"/>
           </el-tooltip>
           <el-link type="primary" style="margin-right: 5px" @click="openHis" v-if="basisData.id">
@@ -371,7 +371,7 @@ export default {
     },
     compare(row) {
       this.basisData.createTime = this.$refs.versionHistory.versionOptions.filter(v => v.id === this.basisData.versionId)[0].createTime;
-      this.$get('/api/definition/get/' +  row.id+"/"+this.basisData.refId, response => {
+      this.$get('/api/definition/get/' + row.id + "/" + this.basisData.refId, response => {
         this.$get('/api/definition/get/' + response.data.id, res => {
           if (res.data) {
             this.newData = res.data;
@@ -410,14 +410,14 @@ export default {
       }
       return false;
     },
-    dealWithTag(api){
-      if(api.tags){
-        if(Object.prototype.toString.call(api.tags)==="[object String]"){
+    dealWithTag(api) {
+      if (api.tags) {
+        if (Object.prototype.toString.call(api.tags) === "[object String]") {
           api.tags = JSON.parse(api.tags);
         }
       }
-      if(this.basisData.tags){
-        if(Object.prototype.toString.call(this.basisData.tags)==="[object String]"){
+      if (this.basisData.tags) {
+        if (Object.prototype.toString.call(this.basisData.tags) === "[object String]") {
           this.basisData.tags = JSON.parse(this.basisData.tags);
         }
       }
diff --git a/frontend/src/business/components/api/definition/components/document/ApiDocumentAnchor.vue b/frontend/src/business/components/api/definition/components/document/ApiDocumentAnchor.vue
index 1933027f31..cf9d39a068 100644
--- a/frontend/src/business/components/api/definition/components/document/ApiDocumentAnchor.vue
+++ b/frontend/src/business/components/api/definition/components/document/ApiDocumentAnchor.vue
@@ -100,9 +100,7 @@
 <script>
 import {API_METHOD_COLOUR} from "@/business/components/api/definition/model/JsonData";
 import MsCodeEdit from "@/business/components/common/components/MsCodeEdit";
-import {formatJson,} from "@/common/js/format-utils";
 import ApiStatus from "@/business/components/api/definition/components/list/ApiStatus";
-import {calculate} from "@/business/components/api/definition/model/ApiTestModel";
 import MsJsonCodeEdit from "@/business/components/common/json-schema/JsonSchemaEditor";
 import Api from "@/business/components/api/router";
 import {generateApiDocumentShareInfo} from "@/network/share";
@@ -624,6 +622,7 @@ export default {
 
 /deep/ .el-step__icon-inner {
   font-size: 12px;
+  border-top-color: var(--primary_color);
 }
 
 /deep/ .el-step.is-vertical .el-step__line {
diff --git a/frontend/src/business/components/api/definition/components/document/components/ApiInformation.vue b/frontend/src/business/components/api/definition/components/document/components/ApiInformation.vue
index f4dfde555a..8b13419d48 100644
--- a/frontend/src/business/components/api/definition/components/document/components/ApiInformation.vue
+++ b/frontend/src/business/components/api/definition/components/document/components/ApiInformation.vue
@@ -2,10 +2,10 @@
   <div style="margin-bottom: 50px;border-bottom-width: 2px" ref="baseDiv">
     <div style="font-size: 17px">
       <el-popover
-          v-if="projectId"
-          placement="right"
-          width="260"
-          @show="shareApiDocument('false')">
+        v-if="projectId"
+        placement="right"
+        width="260"
+        @show="shareApiDocument('false')">
         <p>{{ shareUrl }}</p>
         <div style="text-align: right; margin: 0">
           <el-button type="primary" size="mini"
@@ -280,6 +280,7 @@ export default {
 
 /deep/ .el-step__icon-inner {
   font-size: 12px;
+  border-top-color: var(--primary_color);
 }
 
 /deep/ .el-step.is-vertical .el-step__line {
diff --git a/frontend/src/business/components/api/definition/components/mock/Components/MockRequestParam.vue b/frontend/src/business/components/api/definition/components/mock/Components/MockRequestParam.vue
index 4204c0028f..78cc7ce242 100644
--- a/frontend/src/business/components/api/definition/components/mock/Components/MockRequestParam.vue
+++ b/frontend/src/business/components/api/definition/components/mock/Components/MockRequestParam.vue
@@ -7,7 +7,8 @@
           <el-tabs v-model="activeName" class="request-tabs">
             <!-- 请求头-->
             <el-tab-pane :label="$t('api_test.request.headers')" name="headers">
-              <el-tooltip class="item-tabs" effect="dark" :content="$t('api_test.request.headers')" placement="top-start" slot="label">
+              <el-tooltip class="item-tabs" effect="dark" :content="$t('api_test.request.headers')"
+                          placement="top-start" slot="label">
               <span>{{ $t('api_test.request.headers') }}
                 <div class="el-step__icon is-text ms-api-col ms-header" v-if="request.headers.length>1">
                   <div class="el-step__icon-inner">{{ request.headers.length - 1 }}</div>
@@ -15,29 +16,38 @@
               </span>
               </el-tooltip>
               <el-row>
-                <el-link class="ms-el-link" @click="batchAdd" style="color: #783887"> {{ $t("commons.batch_add") }}</el-link>
+                <el-link class="ms-el-link" @click="batchAdd" style="color: var(--primary_color);">
+                  {{ $t("commons.batch_add") }}
+                </el-link>
               </el-row>
-              <ms-api-key-value :append-to-body="true" :show-desc="true" :is-read-only="isReadOnly" :isShowEnable="isShowEnable"
+              <ms-api-key-value :append-to-body="true" :show-desc="true" :is-read-only="isReadOnly"
+                                :isShowEnable="isShowEnable"
                                 :suggestions="headerSuggestions" :items="request.headers" :need-mock="true"/>
             </el-tab-pane>
 
             <!--query 参数-->
             <el-tab-pane :label="$t('api_test.definition.request.query_param')" name="parameters">
-              <el-tooltip class="item-tabs" effect="dark" :content="$t('api_test.definition.request.query_info')" placement="top-start" slot="label">
+              <el-tooltip class="item-tabs" effect="dark" :content="$t('api_test.definition.request.query_info')"
+                          placement="top-start" slot="label">
               <span>{{ $t('api_test.definition.request.query_param') }}
                 <div class="el-step__icon is-text ms-api-col ms-header" v-if="request.arguments.length>1">
                   <div class="el-step__icon-inner">{{ request.arguments.length - 1 }}</div>
                 </div></span>
               </el-tooltip>
               <el-row>
-                <el-link class="ms-el-link" @click="batchAdd" style="color: #783887"> {{ $t("commons.batch_add") }}</el-link>
+                <el-link class="ms-el-link" @click="batchAdd" style="color: var(--primary_color);">
+                  {{ $t("commons.batch_add") }}
+                </el-link>
               </el-row>
-              <mock-combination-condition :filter-type-object="request" :is-read-only="isReadOnly" :is-show-enable="isShowEnable" :suggestions="apiParams.query" :parameters="request.arguments"/>
+              <mock-combination-condition :filter-type-object="request" :is-read-only="isReadOnly"
+                                          :is-show-enable="isShowEnable" :suggestions="apiParams.query"
+                                          :parameters="request.arguments"/>
             </el-tab-pane>
 
             <!--REST 参数-->
             <el-tab-pane :label="$t('api_test.definition.request.rest_param')" name="rest">
-              <el-tooltip class="item-tabs" effect="dark" :content="$t('api_test.definition.request.rest_info')" placement="top-start" slot="label">
+              <el-tooltip class="item-tabs" effect="dark" :content="$t('api_test.definition.request.rest_info')"
+                          placement="top-start" slot="label">
               <span>
                 {{ $t('api_test.definition.request.rest_param') }}
                 <div class="el-step__icon is-text ms-api-col ms-header" v-if="request.rest.length>1">
@@ -46,9 +56,13 @@
               </span>
               </el-tooltip>
               <el-row>
-                <el-link class="ms-el-link" @click="batchAdd" style="color: #783887"> {{ $t("commons.batch_add") }}</el-link>
+                <el-link class="ms-el-link" @click="batchAdd" style="color: var(--primary_color);">
+                  {{ $t("commons.batch_add") }}
+                </el-link>
               </el-row>
-              <mock-combination-condition :is-rest="true" :filter-type-object="request" :is-read-only="isReadOnly" :is-show-enable="isShowEnable" :suggestions="apiParams.rest" :parameters="request.rest"/>
+              <mock-combination-condition :is-rest="true" :filter-type-object="request" :is-read-only="isReadOnly"
+                                          :is-show-enable="isShowEnable" :suggestions="apiParams.rest"
+                                          :parameters="request.rest"/>
             </el-tab-pane>
 
             <!--请求体-->
@@ -59,9 +73,13 @@
                              :isShowEnable="isShowEnable"
                              :headers="request.headers" :body="request.body"/>
             </el-tab-pane>
-            <el-tab-pane name="create" v-if="hasPermission('PROJECT_API_DEFINITION:READ+CREATE_API') && hasLicense() && definitionTest">
+            <el-tab-pane name="create"
+                         v-if="hasPermission('PROJECT_API_DEFINITION:READ+CREATE_API') && hasLicense() && definitionTest">
               <template v-slot:label>
-                <el-button size="mini" type="primary" @click.stop @click="generate">{{ $t('commons.generate_test_data') }}</el-button>
+                <el-button size="mini" type="primary" @click.stop @click="generate">{{
+                    $t('commons.generate_test_data')
+                  }}
+                </el-button>
               </template>
             </el-tab-pane>
           </el-tabs>
@@ -80,12 +98,12 @@ import {REQUEST_HEADERS} from "@/common/js/constants";
 import MsApiAssertions from "@/business/components/api/definition/components/assertion/ApiAssertions";
 import MsApiExtract from "@/business/components/api/definition/components/extract/ApiExtract";
 import {Body, KeyValue} from "@/business/components/api/definition/model/ApiTestModel";
-import {hasLicense, getUUID} from "@/common/js/utils";
+import {getUUID, hasLicense, hasPermission} from "@/common/js/utils";
 import BatchAddParameter from "@/business/components/api/definition/components/basis/BatchAddParameter";
 import MsApiAdvancedConfig from "@/business/components/api/definition/components/request/http/ApiAdvancedConfig";
 import MsJsr233Processor from "@/business/components/api/automation/scenario/component/Jsr233Processor";
-import ApiDefinitionStepButton from "@/business/components/api/definition/components/request/components/ApiDefinitionStepButton";
-import {hasPermission} from '@/common/js/utils';
+import ApiDefinitionStepButton
+  from "@/business/components/api/definition/components/request/components/ApiDefinitionStepButton";
 import Convert from "@/business/components/common/json-schema/convert/convert";
 import MockApiBody from "@/business/components/api/definition/components/mock/Components/MockApiBody";
 import MockCombinationCondition
diff --git a/frontend/src/business/components/api/definition/components/module/ModulePublicButton.vue b/frontend/src/business/components/api/definition/components/module/ModulePublicButton.vue
index fe4dbdce6a..461c6407d1 100644
--- a/frontend/src/business/components/api/definition/components/module/ModulePublicButton.vue
+++ b/frontend/src/business/components/api/definition/components/module/ModulePublicButton.vue
@@ -2,7 +2,7 @@
   <div @click="exe" class="recycle" :class="{'is-active': condition.publicEnable}" v-if="this.isXpack">
     <el-row>
       <el-col :span="20"><i class="el-icon-reading"> {{ $t('project.case_public') }}</i></el-col>
-      <el-col :span="4"><span style="color: #6C317C">{{ publicTotal }}</span></el-col>
+      <el-col :span="4"><span style="color: var(--primary_color);">{{ publicTotal }}</span></el-col>
     </el-row>
   </div>
 </template>
diff --git a/frontend/src/business/components/api/definition/components/module/ModuleTrashButton.vue b/frontend/src/business/components/api/definition/components/module/ModuleTrashButton.vue
index e908d73bf3..315cfb8095 100644
--- a/frontend/src/business/components/api/definition/components/module/ModuleTrashButton.vue
+++ b/frontend/src/business/components/api/definition/components/module/ModuleTrashButton.vue
@@ -1,52 +1,52 @@
 <template>
   <div @click="exe" class="recycle" :class="{'is-active': condition.trashEnable}">
     <el-row>
-      <el-col :span="21"><i class="el-icon-delete"> {{$t('commons.trash')}}</i></el-col>
-      <el-col :span="3"><span style="color: #6C317C">{{ total }}</span></el-col>
+      <el-col :span="21"><i class="el-icon-delete"> {{ $t('commons.trash') }}</i></el-col>
+      <el-col :span="3"><span style="color: var(--primary_color);">{{ total }}</span></el-col>
     </el-row>
   </div>
 </template>
 
 <script>
-    export default {
-      name: "ModuleTrashButton",
-      props: {
-        condition: {
-          type: Object,
-          default() {
-            return {};
-          }
-        },
-        exe: {
-          type: Function
-        },
-        total: Number,
-      },
-      methods: {
-        // enableTrash() {
-        //
-        // }
+export default {
+  name: "ModuleTrashButton",
+  props: {
+    condition: {
+      type: Object,
+      default() {
+        return {};
       }
-    }
+    },
+    exe: {
+      type: Function
+    },
+    total: Number,
+  },
+  methods: {
+    // enableTrash() {
+    //
+    // }
+  }
+}
 </script>
 
 <style scoped>
 
-  .recycle {
-    padding-left: 25px;
-    margin-top: 15px;
-    height: 26px;
-    line-height: 26px;
-    margin-bottom: -10px;
-  }
+.recycle {
+  padding-left: 25px;
+  margin-top: 15px;
+  height: 26px;
+  line-height: 26px;
+  margin-bottom: -10px;
+}
 
-  .recycle:hover {
-    color: #6d317c;
-    cursor: pointer;
-  }
+.recycle:hover {
+  color: #6d317c;
+  cursor: pointer;
+}
 
-  .is-active {
-    background-color: #f3f6f9;
-  }
+.is-active {
+  background-color: #f3f6f9;
+}
 
 </style>
diff --git a/frontend/src/business/components/api/definition/components/request/http/ApiHttpRequestForm.vue b/frontend/src/business/components/api/definition/components/request/http/ApiHttpRequestForm.vue
index 39aafd6e2d..bf5d253e5f 100644
--- a/frontend/src/business/components/api/definition/components/request/http/ApiHttpRequestForm.vue
+++ b/frontend/src/business/components/api/definition/components/request/http/ApiHttpRequestForm.vue
@@ -5,7 +5,8 @@
       <el-tabs v-model="activeName" class="request-tabs ms-tabs__nav-scroll" @tab-click="tabClick">
         <!-- 请求头-->
         <el-tab-pane :label="$t('api_test.request.headers')" name="headers">
-          <el-tooltip class="item-tabs" effect="dark" :content="$t('api_test.request.headers')" placement="top-start" slot="label">
+          <el-tooltip class="item-tabs" effect="dark" :content="$t('api_test.request.headers')" placement="top-start"
+                      slot="label">
               <span>{{ $t('api_test.request.headers') }}
                 <div class="el-step__icon is-text ms-api-col ms-header" v-if="headers.length>1">
                   <div class="el-step__icon-inner">{{ headers.length - 1 }}</div>
@@ -13,22 +14,25 @@
               </span>
           </el-tooltip>
           <el-row>
-            <el-link class="ms-el-link" @click="batchAdd" style="color: #783887"> {{ $t("commons.batch_add") }}</el-link>
+            <el-link class="ms-el-link" @click="batchAdd" style="color: var(--primary_color);">
+              {{ $t("commons.batch_add") }}
+            </el-link>
           </el-row>
           <ms-api-key-value
-            @editScenarioAdvance="editScenarioAdvance"
-            :scenario-definition="scenarioDefinition"
-            :show-desc="true"
-            :is-read-only="isReadOnly"
-            :isShowEnable="isShowEnable"
-            :suggestions="headerSuggestions"
-            :items="headers"
-            :need-mock="true" v-if="activeName === 'headers'"/>
+              @editScenarioAdvance="editScenarioAdvance"
+              :scenario-definition="scenarioDefinition"
+              :show-desc="true"
+              :is-read-only="isReadOnly"
+              :isShowEnable="isShowEnable"
+              :suggestions="headerSuggestions"
+              :items="headers"
+              :need-mock="true" v-if="activeName === 'headers'"/>
         </el-tab-pane>
 
         <!--query 参数-->
         <el-tab-pane :label="$t('api_test.definition.request.query_param')" name="parameters">
-          <el-tooltip class="item-tabs" effect="dark" :content="$t('api_test.definition.request.query_info')" placement="top-start" slot="label">
+          <el-tooltip class="item-tabs" effect="dark" :content="$t('api_test.definition.request.query_info')"
+                      placement="top-start" slot="label">
               <span>{{ $t('api_test.definition.request.query_param') }}
                 <div class="el-step__icon is-text ms-api-col ms-header" v-if="request.arguments.length>1">
                   <div class="el-step__icon-inner">{{ request.arguments.length - 1 }}</div>
@@ -36,22 +40,25 @@
               </span>
           </el-tooltip>
           <el-row>
-            <el-link class="ms-el-link" @click="batchAdd" style="color: #783887"> {{ $t("commons.batch_add") }}</el-link>
+            <el-link class="ms-el-link" @click="batchAdd" style="color: var(--primary_color);">
+              {{ $t("commons.batch_add") }}
+            </el-link>
           </el-row>
           <ms-api-variable
-            @editScenarioAdvance="editScenarioAdvance"
-            :scenario-definition="scenarioDefinition"
-            :with-mor-setting="true"
-            :is-read-only="isReadOnly"
-            :isShowEnable="isShowEnable"
-            :parameters="request.arguments"
-            v-if="activeName === 'parameters'"
+              @editScenarioAdvance="editScenarioAdvance"
+              :scenario-definition="scenarioDefinition"
+              :with-mor-setting="true"
+              :is-read-only="isReadOnly"
+              :isShowEnable="isShowEnable"
+              :parameters="request.arguments"
+              v-if="activeName === 'parameters'"
           />
         </el-tab-pane>
 
         <!--REST 参数-->
         <el-tab-pane :label="$t('api_test.definition.request.rest_param')" name="rest">
-          <el-tooltip class="item-tabs" effect="dark" :content="$t('api_test.definition.request.rest_info')" placement="top-start" slot="label">
+          <el-tooltip class="item-tabs" effect="dark" :content="$t('api_test.definition.request.rest_info')"
+                      placement="top-start" slot="label">
               <span>
                 {{ $t('api_test.definition.request.rest_param') }}
                 <div class="el-step__icon is-text ms-api-col ms-header" v-if="request.rest.length>1">
@@ -60,51 +67,54 @@
               </span>
           </el-tooltip>
           <el-row>
-            <el-link class="ms-el-link" @click="batchAdd" style="color: #783887"> {{ $t("commons.batch_add") }}</el-link>
+            <el-link class="ms-el-link" @click="batchAdd" style="color: var(--primary_color);">
+              {{ $t("commons.batch_add") }}
+            </el-link>
           </el-row>
           <ms-api-variable
-            @editScenarioAdvance="editScenarioAdvance"
-            :scenario-definition="scenarioDefinition"
-            :with-mor-setting="true"
-            :is-read-only="isReadOnly"
-            :isShowEnable="isShowEnable"
-            :parameters="request.rest"
-            v-if="activeName === 'rest'"
+              @editScenarioAdvance="editScenarioAdvance"
+              :scenario-definition="scenarioDefinition"
+              :with-mor-setting="true"
+              :is-read-only="isReadOnly"
+              :isShowEnable="isShowEnable"
+              :parameters="request.rest"
+              v-if="activeName === 'rest'"
           />
         </el-tab-pane>
 
         <!--请求体-->
         <el-tab-pane v-if="isBodyShow" :label="$t('api_test.request.body')" name="body">
           <ms-api-body
-            @editScenarioAdvance="editScenarioAdvance"
-            :scenario-definition="scenarioDefinition"
-            @headersChange="reloadBody"
-            :is-read-only="isReadOnly"
-            :isShowEnable="isShowEnable"
-            :headers="headers"
-            :body="request.body"
-            v-if="activeName === 'body'"
+              @editScenarioAdvance="editScenarioAdvance"
+              :scenario-definition="scenarioDefinition"
+              @headersChange="reloadBody"
+              :is-read-only="isReadOnly"
+              :isShowEnable="isShowEnable"
+              :headers="headers"
+              :body="request.body"
+              v-if="activeName === 'body'"
           />
         </el-tab-pane>
 
         <!-- 认证配置 -->
         <el-tab-pane :label="$t('api_test.definition.request.auth_config')" name="authConfig">
-          <el-tooltip class="item-tabs" effect="dark" :content="$t('api_test.definition.request.auth_config_info')" placement="top-start" slot="label">
+          <el-tooltip class="item-tabs" effect="dark" :content="$t('api_test.definition.request.auth_config_info')"
+                      placement="top-start" slot="label">
             <span>{{ $t('api_test.definition.request.auth_config') }}</span>
           </el-tooltip>
 
           <ms-api-auth-config
-            :is-read-only="isReadOnly"
-            :request="request"
-            v-if="activeName === 'authConfig'"
+              :is-read-only="isReadOnly"
+              :request="request"
+              v-if="activeName === 'authConfig'"
           />
         </el-tab-pane>
 
         <el-tab-pane :label="$t('api_test.definition.request.other_config')" name="advancedConfig">
           <ms-api-advanced-config
-            :is-read-only="isReadOnly"
-            :request="request"
-            v-if="activeName === 'advancedConfig'"
+              :is-read-only="isReadOnly"
+              :request="request"
+              v-if="activeName === 'advancedConfig'"
           />
         </el-tab-pane>
 
@@ -117,13 +127,13 @@
             </div>
           </span>
           <ms-jmx-step
-            :request="request"
-            :apiId="request.id"
-            :response="response"
-            :tab-type="'pre'"
-            :scenarioId="scenarioId"
-            ref="preStep"
-            v-if="activeName === 'preOperate'"
+              :request="request"
+              :apiId="request.id"
+              :response="response"
+              :tab-type="'pre'"
+              :scenarioId="scenarioId"
+              ref="preStep"
+              v-if="activeName === 'preOperate'"
           />
         </el-tab-pane>
         <el-tab-pane :label="$t('api_test.definition.request.post_operation')" name="postOperate" v-if="showScript">
@@ -134,13 +144,13 @@
             </div>
           </span>
           <ms-jmx-step
-            :request="request"
-            :apiId="request.id"
-            :response="response"
-            :tab-type="'post'"
-            :scenarioId="scenarioId"
-            ref="postStep"
-            v-if="activeName === 'postOperate'"
+              :request="request"
+              :apiId="request.id"
+              :response="response"
+              :tab-type="'post'"
+              :scenarioId="scenarioId"
+              ref="postStep"
+              v-if="activeName === 'postOperate'"
           />
         </el-tab-pane>
         <el-tab-pane :label="$t('api_test.definition.request.assertions_rule')" name="assertionsRule" v-if="showScript">
@@ -151,14 +161,14 @@
             </div>
           </span>
           <ms-jmx-step
-            :request="request"
-            :apiId="request.id"
-            :scenarioId="scenarioId"
-            :response="response"
-            @reload="reloadBody"
-            :tab-type="'assertionsRule'"
-            ref="assertionsRule"
-            v-if="activeName === 'assertionsRule'"/>
+              :request="request"
+              :apiId="request.id"
+              :scenarioId="scenarioId"
+              :response="response"
+              @reload="reloadBody"
+              :tab-type="'assertionsRule'"
+              ref="assertionsRule"
+              v-if="activeName === 'assertionsRule'"/>
         </el-tab-pane>
 
       </el-tabs>
@@ -177,13 +187,12 @@ import MsApiVariable from "../../ApiVariable";
 import MsApiAssertions from "../../assertion/ApiAssertions";
 import MsApiExtract from "../../extract/ApiExtract";
 import {Body, KeyValue} from "../../../model/ApiTestModel";
-import {hasLicense, getUUID} from "@/common/js/utils";
+import {getUUID, hasLicense, hasPermission} from "@/common/js/utils";
 import BatchAddParameter from "../../basis/BatchAddParameter";
 import MsApiAdvancedConfig from "./ApiAdvancedConfig";
 import MsJsr233Processor from "../../../../automation/scenario/component/Jsr233Processor";
-import {hasPermission} from '@/common/js/utils';
 import Convert from "@/business/components/common/json-schema/convert/convert";
-import {stepCompute, hisDataProcessing} from "@/business/components/api/definition/api-definition";
+import {hisDataProcessing, stepCompute} from "@/business/components/api/definition/api-definition";
 
 export default {
   name: "MsApiHttpRequestForm",
@@ -561,4 +570,8 @@ export default {
   width: 100%;
 }
 
+/deep/ .el-step__icon-inner {
+  border-top-color: var(--primary_color);
+}
+
 </style>
diff --git a/frontend/src/business/components/api/definition/components/step/JmxStep.vue b/frontend/src/business/components/api/definition/components/step/JmxStep.vue
index 0979b1ab36..b19bae48da 100644
--- a/frontend/src/business/components/api/definition/components/step/JmxStep.vue
+++ b/frontend/src/business/components/api/definition/components/step/JmxStep.vue
@@ -18,109 +18,111 @@
           :value="item.id">
         </el-option>
       </el-select>
-      <el-button size="mini" @click="add" type="primary" v-if="tabType !== 'assertionsRule'">
+      <el-button size="mini" @click="add" type="primary" v-if="tabType !== 'assertionsRule'"
+                 style="background-color: var(--primary_color); border-color:var(--primary_color);">
         {{ $t('api_test.request.assertions.add') }}
       </el-button>
     </p>
     <!-- HTTP 请求参数 -->
-    <el-tree node-key="resourceId"
+    <el-tree node-key=" resourceId
+      "
              :props="props"
              :data="request.hashTree"
              :allow-drop="allowDrop"
              :filter-node-method="filterNode"
              @node-drag-end="allowDrag"
              draggable ref="generalSteps" class="ms-step-tree-cell">
-       <span class="custom-tree-node father" slot-scope="{node,data}" style="width: calc(100% - 20px);">
+      <span class="custom-tree-node father" slot-scope="{node,data}" style="width: calc(100% - 20px);">
         <!--前置脚本-->
-         <div v-if="tabType === 'pre'">
-           <ms-jsr233-processor
-             v-if="data.type==='JSR223PreProcessor'"
-             @remove="remove"
-             @copyRow="copyRow"
-             :protocol="protocol"
-             :draggable="true"
-             :title="$t('api_test.definition.request.pre_script')"
-             :jsr223-processor="data"
-             color="#B8741A"
-             background-color="#F9F1EA"/>
-           <!--前置SQL-->
-          <ms-jdbc-processor
-            v-if="data.type ==='JDBCPreProcessor'"
-            @copyRow="copyRow"
-            @remove="remove"
-            :title="$t('api_test.definition.request.pre_sql')"
-            :is-read-only="false"
-            :scenarioId="scenarioId"
-            :request="data"
-            :jdbc-processor="data"
-            :draggable="true"
-            color="#B8741A"
-            background-color="#F9F1EA"/>
+    <div v-if="tabType === 'pre'">
+      <ms-jsr233-processor
+        v-if="data.type==='JSR223PreProcessor'"
+        @remove="remove"
+        @copyRow="copyRow"
+        :protocol="protocol"
+        :draggable="true"
+        :title="$t('api_test.definition.request.pre_script')"
+        :jsr223-processor="data"
+        color="#B8741A"
+        background-color="#F9F1EA"/>
+      <!--前置SQL-->
+      <ms-jdbc-processor
+        v-if="data.type ==='JDBCPreProcessor'"
+        @copyRow="copyRow"
+        @remove="remove"
+        :title="$t('api_test.definition.request.pre_sql')"
+        :is-read-only="false"
+        :scenarioId="scenarioId"
+        :request="data"
+        :jdbc-processor="data"
+        :draggable="true"
+        color="#B8741A"
+        background-color="#F9F1EA"/>
 
-           <ms-constant-timer
-             :inner-step="true"
-             :timer="data"
-             :node="node"
-             :draggable="true"
-             @remove="remove"
-             @copyRow="copyRow"
-             v-if="data.type ==='ConstantTimer'"
-           />
+      <ms-constant-timer
+        :inner-step="true"
+        :timer="data"
+        :node="node"
+        :draggable="true"
+        @remove="remove"
+        @copyRow="copyRow"
+        v-if="data.type ==='ConstantTimer'"
+      />
 
-         </div>
-        <div v-if="tabType ==='post'">
-           <!--后置脚本-->
-          <ms-jsr233-processor
-            v-if="data.type ==='JSR223PostProcessor'"
-            @copyRow="copyRow"
-            @remove="remove"
-            :protocol="protocol"
-            :is-read-only="false"
-            :title="$t('api_test.definition.request.post_script')"
-            :jsr223-processor="data"
-            :draggable="true"
-            color="#783887"
-            background-color="#F2ECF3"/>
+    </div>
+    <div v-if="tabType ==='post'">
+      <!--后置脚本-->
+      <ms-jsr233-processor
+        v-if="data.type ==='JSR223PostProcessor'"
+        @copyRow="copyRow"
+        @remove="remove"
+        :protocol="protocol"
+        :is-read-only="false"
+        :title="$t('api_test.definition.request.post_script')"
+        :jsr223-processor="data"
+        :draggable="true"
+        color="#783887"
+        background-color="#F2ECF3"/>
 
-          <!--后置SQL-->
-          <ms-jdbc-processor
-            v-if="data.type ==='JDBCPostProcessor'"
-            @copyRow="copyRow"
-            @remove="remove"
-            :title="$t('api_test.definition.request.post_sql')"
-            :is-read-only="false"
-            :request="data"
-            :scenarioId="scenarioId"
-            :jdbc-processor="data"
-            :draggable="true"
-            color="#783887"
-            background-color="#F2ECF3"/>
-          <!--提取规则-->
-           <ms-api-extract
-             :response="response"
-             :is-read-only="data.disabled"
-             :extract="data"
-             :draggable="true"
-             @copyRow="copyRow"
-             @remove="remove"
-             v-if="data.type==='Extract'"
-           />
-          </div>
-         <div v-if="tabType === 'assertionsRule'">
-         <!--断言规则-->
-          <ms-api-assertions
-            v-if="data.type==='Assertions'"
-            @copyRow="copyRow"
-            @remove="remove"
-            @reload="reloadRule"
-            :response="response"
-            :request="request"
-            :apiId="apiId"
-            :draggable="true"
-            :is-read-only="data.disabled"
-            :assertions="data"/>
-         </div>
-       </span>
+      <!--后置SQL-->
+      <ms-jdbc-processor
+        v-if="data.type ==='JDBCPostProcessor'"
+        @copyRow="copyRow"
+        @remove="remove"
+        :title="$t('api_test.definition.request.post_sql')"
+        :is-read-only="false"
+        :request="data"
+        :scenarioId="scenarioId"
+        :jdbc-processor="data"
+        :draggable="true"
+        color="#783887"
+        background-color="#F2ECF3"/>
+      <!--提取规则-->
+      <ms-api-extract
+        :response="response"
+        :is-read-only="data.disabled"
+        :extract="data"
+        :draggable="true"
+        @copyRow="copyRow"
+        @remove="remove"
+        v-if="data.type==='Extract'"
+      />
+    </div>
+    <div v-if="tabType === 'assertionsRule'">
+      <!--断言规则-->
+      <ms-api-assertions
+        v-if="data.type==='Assertions'"
+        @copyRow="copyRow"
+        @remove="remove"
+        @reload="reloadRule"
+        :response="response"
+        :request="request"
+        :apiId="apiId"
+        :draggable="true"
+        :is-read-only="data.disabled"
+        :assertions="data"/>
+    </div>
+    </span>
     </el-tree>
   </div>
 </template>
diff --git a/frontend/src/business/components/track/case/components/TestCaseEdit.vue b/frontend/src/business/components/track/case/components/TestCaseEdit.vue
index bb7e38da3d..e4d66b468d 100644
--- a/frontend/src/business/components/track/case/components/TestCaseEdit.vue
+++ b/frontend/src/business/components/track/case/components/TestCaseEdit.vue
@@ -27,12 +27,12 @@
               <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: 15px;cursor: pointer;position: relative;top: 5px "
+                     style="color: var(--primary_color); font-size: 25px;  margin-right: 15px;cursor: pointer;position: relative;top: 5px "
                      @click="saveFollow"/>
                 </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: 15px;cursor: pointer;position: relative;top: 5px "
+                     style="color: var(--primary_color); font-size: 28px; margin-right: 15px;cursor: pointer;position: relative;top: 5px "
                      @click="saveFollow"/>
                 </el-tooltip>
                 <el-link type="primary" style="margin-right: 20px" @click="openHis" v-if="form.id">
@@ -142,7 +142,6 @@
 import {TokenKey} from '@/common/js/constants';
 import MsDialogFooter from '../../../common/components/MsDialogFooter';
 import {
-  byteToSize,
   getCurrentProjectID,
   getCurrentUser,
   getNodePath,
diff --git a/frontend/src/business/components/track/case/components/TestCaseEditShow.vue b/frontend/src/business/components/track/case/components/TestCaseEditShow.vue
index a4a9c243a3..ed6e2f1139 100644
--- a/frontend/src/business/components/track/case/components/TestCaseEditShow.vue
+++ b/frontend/src/business/components/track/case/components/TestCaseEditShow.vue
@@ -7,12 +7,12 @@
         <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: 15px;cursor: pointer;position: relative;top: 5px "
+               style="color: var(--primary_color); font-size: 25px;  margin-right: 15px;cursor: pointer;position: relative;top: 5px "
                @click="saveFollow"/>
           </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: 15px;cursor: pointer;position: relative;top: 5px "
+               style="color: var(--primary_color); font-size: 28px; margin-right: 15px;cursor: pointer;position: relative;top: 5px "
                @click="saveFollow"/>
           </el-tooltip>
           <el-link type="primary" style="margin-right: 20px" @click="openHis" v-if="form.id">
@@ -32,7 +32,7 @@
                            :content="$t('commons.copy')"
                            size="small" @click="handleCopyPublic"
                            icon=""
-                           />
+          />
         </div>
         <el-form :model="form" :rules="rules" ref="caseFrom" v-loading="result.loading" class="case-form">
           <ms-form-divider :title="$t('test_track.plan_view.base_info')"/>
@@ -57,7 +57,8 @@
 
             <el-col :span="8">
               <el-form-item :label="$t('commons.tag')" :label-width="formLabelWidth" prop="tag">
-                <ms-input-tag :read-only="readOnly" :currentScenario="form" v-if="showInputTag" ref="tag" :disabled="true"
+                <ms-input-tag :read-only="readOnly" :currentScenario="form" v-if="showInputTag" ref="tag"
+                              :disabled="true"
                               class="ms-case-input"/>
               </el-form-item>
             </el-col>
@@ -96,7 +97,8 @@
 
           <ms-form-divider :title="$t('test_track.case.other_info')"/>
 
-          <test-case-edit-other-info :read-only="readOnly" :project-id="projectIds" :form="form" :comments.sync="comments"
+          <test-case-edit-other-info :read-only="readOnly" :project-id="projectIds" :form="form"
+                                     :comments.sync="comments"
                                      :label-width="formLabelWidth" :case-id="form.id" ref="otherInfo"/>
           <test-case-comment :case-id="form.id"
                              @getComments="getComments" ref="testCaseComment"/>
@@ -112,7 +114,7 @@
         :destroy-on-close="true"
         width="100%"
       >
-        <test-case-version-diff  v-if="dialogVisible" :old-data="oldData" :new-data="newData"
+        <test-case-version-diff v-if="dialogVisible" :old-data="oldData" :new-data="newData"
                                 :tree-nodes="treeNodes" :is-public="publicEnable"></test-case-version-diff>
 
       </el-dialog>
@@ -274,7 +276,7 @@ export default {
       },
       tabId: getUUID(),
       versionData: [],
-      currentProjectId: "" ,
+      currentProjectId: "",
       dialogVisible: false,
       oldData: null,
       newData: null,
@@ -513,7 +515,7 @@ export default {
           initFuc(testCase);
         });
     },
-    initEdit(testCase , callback) {
+    initEdit(testCase, callback) {
       if (window.history && window.history.pushState) {
         history.pushState(null, null, document.URL);
         window.addEventListener('popstate', this.close);
@@ -860,7 +862,7 @@ export default {
     },
     getVersionHistory() {
       this.$get('/test/case/versions/' + this.currentTestCaseInfo.id, response => {
-        for (let i = 0; i < response.data.length ; i++) {
+        for (let i = 0; i < response.data.length; i++) {
           this.currentProjectId = response.data[i].projectId
         }
         this.versionData = response.data;
diff --git a/frontend/src/business/components/track/common/NodeTree.vue b/frontend/src/business/components/track/common/NodeTree.vue
index 8bef64c1ad..1000c5024b 100644
--- a/frontend/src/business/components/track/common/NodeTree.vue
+++ b/frontend/src/business/components/track/common/NodeTree.vue
@@ -33,9 +33,8 @@
         <el-tooltip class="item" effect="dark" :content="data.name" placement="top-start" :open-delay="1000">
           <span v-if="!data.isEdit" class="node-title" v-text="isDefault(data) ? getLocalDefaultName() : data.name"/>
         </el-tooltip>
-
         <span class="count-title" v-if="showCaseNum && data.caseNum !== null && data.caseNum !== undefined">
-          <span style="color: #6C317C">{{ data.caseNum }}</span>
+          <span style="color: var(--primary_color);">{{ data.caseNum }}</span>
         </span>
         <span v-if="!disabled" class="node-operate child">
           <el-tooltip
@@ -361,19 +360,19 @@ export default {
       }
       let tip = '确定删除节点 ' + data.label + ' 及其子节点下所有资源' + '？';
       // let info =  this.$t("test_track.module.delete_confirm") + data.label + "，" + this.$t("test_track.module.delete_all_resource") + "？";
-      if(this.showRemoveTip){
+      if (this.showRemoveTip) {
         this.$alert(tip, "", {
-          confirmButtonText: this.$t("commons.confirm"),
-          callback: action => {
-            if (action === "confirm") {
-              let nodeIds = [];
-              this.getChildNodeId(node.data, nodeIds);
-              this.$emit('remove', nodeIds, data);
+            confirmButtonText: this.$t("commons.confirm"),
+            callback: action => {
+              if (action === "confirm") {
+                let nodeIds = [];
+                this.getChildNodeId(node.data, nodeIds);
+                this.$emit('remove', nodeIds, data);
+              }
             }
           }
-        }
-       );
-      }else {
+        );
+      } else {
         let nodeIds = [];
         this.getChildNodeId(node.data, nodeIds);
         this.$emit('remove', nodeIds, data);
diff --git a/frontend/src/business/components/track/plan/components/ScheduleMaintain.vue b/frontend/src/business/components/track/plan/components/ScheduleMaintain.vue
index 3adafaffc8..450c7f0dcd 100644
--- a/frontend/src/business/components/track/plan/components/ScheduleMaintain.vue
+++ b/frontend/src/business/components/track/plan/components/ScheduleMaintain.vue
@@ -12,7 +12,8 @@
               <div class="el-step__icon-inner">1</div>
             </div>
             <span>{{ $t('schedule.edit_timer_task') }}</span>
-            <el-form :model="form" :rules="rules" ref="from" style="padding-top: 10px;margin-left: 20px;" class="ms-el-form-item__error">
+            <el-form :model="form" :rules="rules" ref="from" style="padding-top: 10px;margin-left: 20px;"
+                     class="ms-el-form-item__error">
               <el-form-item :label="$t('commons.schedule_cron_title')"
                             prop="cronValue" style="height: 50px">
                 <el-row :gutter="20">
@@ -104,11 +105,11 @@
                     <el-select :disabled="!runConfig.runWithinResourcePool" v-model="runConfig.resourcePoolId"
                                size="mini">
                       <el-option
-                          v-for="item in resourcePools"
-                          :key="item.id"
-                          :label="item.name"
-                          :disabled="!item.api"
-                          :value="item.id">
+                        v-for="item in resourcePools"
+                        :key="item.id"
+                        :label="item.name"
+                        :disabled="!item.api"
+                        :value="item.id">
                       </el-option>
                     </el-select>
                   </div>
@@ -184,12 +185,12 @@
 
 <script>
 import {
-  hasLicense,
   getCurrentProjectID,
   getCurrentUser,
   getCurrentWorkspaceId,
-  listenGoBack, objToStrMap,
-  removeGoBackListener, strMapToObj
+  hasLicense,
+  listenGoBack,
+  removeGoBackListener
 } from "@/common/js/utils";
 import Crontab from "@/business/components/common/cron/Crontab";
 import CrontabResult from "@/business/components/common/cron/CrontabResult";
@@ -252,13 +253,12 @@ export default {
         callback(new Error(this.$t('commons.input_content')));
       } else if (!cronValidate(cronValue)) {
         callback(new Error(this.$t('schedule.cron_expression_format_error')));
-      }else if(!this.intervalValidate()){
+      } else if (!this.intervalValidate()) {
         callback(new Error(this.$t('schedule.cron_expression_interval_error')));
-      }
-      else if (!customValidate.pass) {
+      } else if (!customValidate.pass) {
         callback(new Error(customValidate.info));
       } else {
-        if (!this.schedule.id){
+        if (!this.schedule.id) {
           this.schedule.enable = true;
         }
         callback();
@@ -422,7 +422,7 @@ export default {
       //确定后回传的值
       this.form.cronValue = value;
       // 如果是第一次设置定时任务规则，则默认开启定时任务
-      if (!this.schedule.id){
+      if (!this.schedule.id) {
         this.schedule.enable = true;
       }
       this.$refs.crontabResult.resultList = resultList;
@@ -573,8 +573,8 @@ export default {
 }
 
 .head {
-  border-bottom: 1px solid #7C3985;
-  color: #7C3985;
+  border-bottom: 1px solid var(--primary_color);
+  color: var(--primary_color);
   font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", Arial, sans-serif;
   font-size: 13px;
   cursor: pointer;
@@ -585,7 +585,7 @@ export default {
   /* display: inline-flex; */
 }
 
-.ms-el-form-item__error >>> .el-form-item__error{
+.ms-el-form-item__error >>> .el-form-item__error {
   left: -42px;
   padding-top: 0px;
 }