style(接口自动化): 优化单个步骤执行结果信息显示，支持可复制

frontend/src/business/components/api/definition/components/response/ResponseResult.vue

@@ -8,18 +8,21 @@
       </el-tab-pane>
 
       <el-tab-pane :label="$t('api_test.definition.request.response_header')" name="headers" class="pane">
-        <div style="width: 400px">
+        <!--<div style="width: 400px">-->
-          <pre>{{ response.responseResult.headers }}</pre>
+        <!--<pre>{{ response.responseResult.headers }}</pre>-->
-        </div>
+        <!--</div>-->
+        <ms-code-edit :mode="'text'" :read-only="true" :data.sync="response.responseResult.headers"/>
+
       </el-tab-pane>
       <!--<el-tab-pane label="Cookie" name="cookie" class="pane cookie">-->
       <!--<pre>{{response.cookies}}</pre>-->
       <!--</el-tab-pane>-->
 
       <el-tab-pane :label="$t('api_test.definition.request.console')" name="console" class="pane">
-        <div style="width: 400px">
+        <!--<div style="width: 400px">-->
-          <pre>{{response.responseResult.console}}</pre>
+        <!--<pre>{{response.responseResult.console}}</pre>-->
-        </div>
+        <!--</div>-->
+        <ms-code-edit :mode="'text'" :read-only="true" :data.sync="response.responseResult.console"/>
       </el-tab-pane>
 
       <el-tab-pane :label="$t('api_report.assertions')" name="assertions" class="pane assertions">
@@ -27,29 +30,30 @@
       </el-tab-pane>
 
       <el-tab-pane :label="$t('api_test.request.extract.label')" name="label" class="pane">
-        <div style="width: 400px">
+        <!--<div style="width: 400px">-->
-          <pre>{{response.responseResult.vars}}</pre>
+        <!--<pre>{{response.responseResult.vars}}</pre>-->
-        </div>
+        <!--</div>-->
+        <ms-code-edit :mode="'text'" :read-only="true" :data.sync="response.responseResult.vars"/>
       </el-tab-pane>
 
       <el-tab-pane :label="$t('api_report.request_body')" name="request_body" class="pane">
-        <div class="ms-div">
+        <!--<div class="ms-div">-->
-          {{$t('api_test.request.address')}} :
+        <!--{{$t('api_test.request.address')}} :-->
-          <pre>{{ response.url }}</pre>
+        <!--<pre>{{ response.url }}</pre>-->
-        </div>
+        <!--</div>-->
-        <div class="ms-div">
+        <!--<div class="ms-div">-->
-          {{$t('api_test.scenario.headers')}} :
+        <!--{{$t('api_test.scenario.headers')}} :-->
-          <pre>{{ response.headers }}</pre>
+        <!--<pre>{{ response.headers }}</pre>-->
-        </div>
+        <!--</div>-->
-        <div class="ms-div">
+        <!--<div class="ms-div">-->
-          Cookies :
+        <!--Cookies :-->
-          <pre>{{response.cookies}}</pre>
+        <!--<pre>{{response.cookies}}</pre>-->
-        </div>
+        <!--</div>-->
-        <div class="ms-div">
+        <!--<div class="ms-div">-->
-          Body :
+        <!--Body :-->
-          <pre>{{response.body ? response.body:""}}</pre>
+        <!--<pre>{{response.body ? response.body:""}}</pre>-->
-        </div>
+        <!--</div>-->
-
+        <ms-code-edit :mode="'text'" :read-only="true" :data.sync="reqMessages"/>
       </el-tab-pane>
 
       <el-tab-pane v-if="activeName == 'body'" :disabled="true" name="mode" class="pane cookie">
@@ -63,23 +67,23 @@
 </template>
 
 <script>
-import MsAssertionResults from "./AssertionResults";
+  import MsAssertionResults from "./AssertionResults";
-import MsCodeEdit from "../MsCodeEdit";
+  import MsCodeEdit from "../MsCodeEdit";
-import MsDropdown from "../../../../common/components/MsDropdown";
+  import MsDropdown from "../../../../common/components/MsDropdown";
-import {BODY_FORMAT} from "../../model/ApiTestModel";
+  import {BODY_FORMAT} from "../../model/ApiTestModel";
-import MsSqlResultTable from "./SqlResultTable";
+  import MsSqlResultTable from "./SqlResultTable";
 
-export default {
+  export default {
-  name: "MsResponseResult",
+    name: "MsResponseResult",
 
-  components: {
+    components: {
-    MsDropdown,
+      MsDropdown,
-    MsCodeEdit,
+      MsCodeEdit,
-    MsAssertionResults,
+      MsAssertionResults,
-    MsSqlResultTable
+      MsSqlResultTable
-  },
+    },
 
-  props: {
+    props: {
       response: Object,
       currentProtocol: String,
     },
@@ -91,12 +95,14 @@ export default {
         modes: ['text', 'json', 'xml', 'html'],
         sqlModes: ['text', 'table'],
         mode: BODY_FORMAT.TEXT,
-        isMsCodeEditShow: true
+        isMsCodeEditShow: true,
+        reqMessages: "",
       }
     },
     watch: {
       response() {
         this.setBodyType();
+        this.setReqMessage();
       }
     },
     methods: {
@@ -126,9 +132,29 @@ export default {
           this.isMsCodeEditShow = true;
         });
       },
+      setReqMessage() {
+        if (this.response) {
+          if (!this.response.url) {
+            this.response.url = "";
+          }
+          if (!this.response.headers) {
+            this.response.headers = "";
+          }
+          if (!this.response.cookies) {
+            this.response.cookies = "";
+          }
+          if (!this.response.body) {
+            this.response.body = "";
+          }
+          this.reqMessages = this.$t('api_test.request.address') + ":\n" + this.response.url + "\n" +
+            this.$t('api_test.scenario.headers') + ":\n" + this.response.headers + "\n" + "Cookies :\n" +
+            this.response.cookies + "\n" + "Bpdy:" + "\n" + this.response.body;
+        }
+      },
     },
     mounted() {
       this.setBodyType();
+      this.setReqMessage();
     },
     computed: {
       isSqlType() {