style(接口自动化): 接口步骤样式统一

frontend/src/business/components/api/automation/scenario/component/ComponentConfig.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="request-form">
     <component :is="component" :scenario="scenario" :controller="scenario" :timer="scenario" :assertions="scenario" :extract="scenario" :jsr223-processor="scenario" :request="scenario" :currentScenario="currentScenario" :currentEnvironmentId="currentEnvironmentId" :node="node"
-               :draggable="true" :title="title" @suggestClick="suggestClick(node)" :response="response"
+               :draggable="true" :title="title" :color="titleColor" :background-color="backgroundColor" @suggestClick="suggestClick(node)" :response="response"
                @remove="remove" @copyRow="copyRow"/>
   </div>
 </template>
@@ -32,6 +32,8 @@
     data() {
       return {
         title: this.$t('api_test.automation.customize_script'),
+        titleColor: "",
+        backgroundColor: "",
       }
     },
     computed: {
@@ -79,25 +81,31 @@
       getComponent(type) {
         if (type === ELEMENT_TYPE.JSR223PreProcessor) {
           this.title = this.$t('api_test.definition.request.pre_script');
+          this.titleColor = "#B8741A";
+          this.backgroundColor = "#F9F1EA";
           return "MsJsr233Processor";
         } else if (type === ELEMENT_TYPE.JSR223PostProcessor) {
           this.title = this.$t('api_test.definition.request.post_script');
+          this.titleColor = "#783887";
+          this.backgroundColor = "#F2ECF3";
           return "MsJsr233Processor";
         } else {
           this.title = this.$t('api_test.automation.customize_script');
+          this.titleColor = "#7B4D12";
+          this.backgroundColor = "#F1EEE9";
           return "MsJsr233Processor";
         }
       },
       remove(row, node) {
-        this.$emit('remove',row,node);
+        this.$emit('remove', row, node);
 
       },
       copyRow(row, node) {
-        this.$emit('copyRow',row,node);
+        this.$emit('copyRow', row, node);
 
       },
       suggestClick(node) {
-        this.$emit('suggestClick',node);
+        this.$emit('suggestClick', node);
       },
     }
   }

frontend/src/business/components/api/automation/scenario/component/Jsr233Processor.vue

@@ -4,8 +4,8 @@
     @remove="remove"
     :data="jsr223ProcessorData"
     :draggable="draggable"
-    color="#B8741A"
+    :color="color"
-    background-color="#F9F1EA"
+    :background-color="backgroundColor"
     :title="title">
     <el-row style="margin:0px 10px 10px">
       <el-col>
@@ -111,7 +111,8 @@
           false
       },
       title: String,
-      styleType: String,
+      color: String,
+      backgroundColor: String,
       node: {},
     },
     watch: {

frontend/src/business/components/api/definition/components/step/JmxStep.vue

@@ -9,10 +9,10 @@
       <div v-for="row in request.hashTree" :key="row.id">
         <!--前置脚本-->
         <ms-jsr233-processor v-if="row.type==='JSR223PreProcessor'" @remove="remove" @copyRow="copyRow" :title="$t('api_test.definition.request.pre_script')"
-                             :jsr223-processor="row"/>
+                             :jsr223-processor="row" color="#B8741A" background-color="#F9F1EA"/>
         <!--后置脚本-->
         <ms-jsr233-processor v-if="row.label ==='JSR223 PostProcessor'" @copyRow="copyRow" @remove="remove" :is-read-only="false" :title="$t('api_test.definition.request.post_script')"
-                             :jsr223-processor="row"/>
+                             :jsr223-processor="row" color="#783887" background-color="#F2ECF3"/>
         <!--断言规则-->
         <div style="margin-top: 10px">
           <ms-api-assertions :response="response" v-if="row.type==='Assertions'" @copyRow="copyRow" @remove="remove" :is-read-only="isReadOnly" :assertions="row"/>