feat: 接口测试结果格式化

frontend/package.json

@@ -34,7 +34,8 @@
     "babel-eslint": "^10.0.3",
     "eslint": "^5.16.0",
     "eslint-plugin-vue": "^5.0.0",
-    "vue-template-compiler": "^2.6.10"
+    "vue-template-compiler": "^2.6.10",
+    "vue2-ace-editor": "0.0.15"
   },
   "eslintConfig": {
     "root": true,

frontend/src/business/components/api/report/components/ResponseText.vue

@@ -7,7 +7,7 @@
     <el-collapse-transition>
       <el-tabs v-model="activeName" v-show="isActive">
         <el-tab-pane label="Body" name="body" class="pane">
-          <div>{{response.body}}</div>
+          <ms-code-edit :read-only="true" :data="response.body" :modes="modes" ref="codeEdit"/>
         </el-tab-pane>
         <el-tab-pane label="Headers" name="headers" class="pane">
           <pre>{{response.headers}}</pre>
@@ -15,6 +15,13 @@
         <el-tab-pane :label="$t('api_report.assertions')" name="assertions" class="pane assertions">
           <ms-assertion-results :assertions="response.assertions"/>
         </el-tab-pane>
+
+        <el-tab-pane v-if="activeName == 'body'" :disabled="true" name="mode" class="pane assertions">
+          <template v-slot:label>
+            <ms-dropdown :commands="modes" @command="modeChange"/>
+          </template>
+        </el-tab-pane>
+
       </el-tabs>
     </el-collapse-transition>
   </div>
@@ -22,11 +29,17 @@
 
 <script>
   import MsAssertionResults from "./AssertionResults";
+  import MsCodeEdit from "../../../common/components/MsCodeEdit";
+  import MsDropdown from "../../../common/components/MsDropdown";
 
   export default {
     name: "MsResponseText",
 
-    components: {MsAssertionResults},
+    components: {
+      MsDropdown,
+      MsCodeEdit,
+      MsAssertionResults,
+    },
 
     props: {
       response: Object
@@ -36,12 +49,16 @@
       return {
         isActive: false,
         activeName: "body",
+        modes: ['text', 'json', 'xml', 'html'],
       }
     },
 
     methods: {
       active() {
         this.isActive = !this.isActive;
+      },
+      modeChange(mode) {
+        this.$refs.codeEdit.setMode(mode);
       }
     },
   }

frontend/src/business/components/common/components/MsCodeEdit.vue

+<template>
+  <editor v-model="formatData" :lang="mode" @init="editorInit" theme="chrome"/>
+</template>
+
+<script>
+    export default {
+      name: "MsCodeEdit",
+      components: { editor: require('vue2-ace-editor')},
+      data() {
+        return {
+          mode: 'text',
+          formatData: ''
+        }
+      },
+      props: {
+        data: {
+          type: String
+        },
+        init: {
+          type: Function
+        },
+        readOnly: {
+          type: Boolean,
+          default() {
+            return false;
+          }
+        },
+        modes: {
+          type: Array,
+          default() {
+            return ['text', 'json', 'xml', 'html'];
+          }
+        }
+      },
+      mounted() {
+        this.format();
+      },
+      methods: {
+        editorInit: function (editor) {
+          require('brace/ext/language_tools') //language extension prerequsite...
+          this.modes.forEach(mode => {
+            require('brace/mode/' + mode); //language
+          });
+          require('brace/theme/chrome')
+          require('brace/snippets/javascript') //snippet
+          if (this.readOnly) {
+            editor.setReadOnly(true);
+          }
+          if (this.init) {
+            this.init(editor);
+          }
+        },
+        format() {
+          if (this.mode === 'json') {
+            try {
+              this.formatData = JSON.stringify(JSON.parse(this.data), null, '\t');
+            } catch (e) {
+              this.formatData = this.data;
+            }
+          } else {
+            this.formatData = this.data;
+          }
+        },
+        setMode(mode) {
+          this.mode = mode;
+          this.format();
+        }
+      }
+    }
+</script>
+
+<style scoped>
+
+</style>

frontend/src/business/components/common/components/MsDropdown.vue

+<template>
+  <el-dropdown @command="handleCommand">
+    <slot>
+      <span class="el-dropdown-link">
+        {{currentCommand}}
+        <i class="el-icon-arrow-down el-icon--right"></i>
+      </span>
+    </slot>
+    <el-dropdown-menu slot="dropdown" chang>
+      <el-dropdown-item  v-for="(command, index) in commands" :key="index" :command="command">
+        {{command}}
+      </el-dropdown-item>
+    </el-dropdown-menu>
+  </el-dropdown>
+</template>
+
+<script>
+    export default {
+      name: "MsDropdown",
+      data() {
+        return {
+          currentCommand: ''
+        }
+      },
+      props: {
+        commands: {
+          type: Array
+        }
+      },
+      created() {
+        if (this.commands && this.commands.length > 0) {
+          this.currentCommand = this.commands [0];
+        }
+      },
+      methods: {
+        handleCommand(command) {
+          this.currentCommand = command;
+          this.$emit('command', command);
+        }
+      }
+    }
+</script>
+
+<style scoped>
+
+  .el-dropdown-link {
+    cursor: pointer;
+    color: #409EFF;
+  }
+
+  .el-icon-arrow-down {
+    font-size: 12px;
+  }
+
+</style>