From 3927da1d02892e6292060a97603bd898eab021a0 Mon Sep 17 00:00:00 2001
From: chenjianxing <jianxing.chen@fit2cloud.com>
Date: Thu, 29 Oct 2020 20:52:16 +0800
Subject: [PATCH] =?UTF-8?q?refactor(=E6=8E=A5=E5=8F=A3=E6=B5=8B=E8=AF=95):?=
 =?UTF-8?q?=20=E6=B5=8B=E8=AF=95=E6=8A=A5=E5=91=8A=E6=A0=BC=E5=BC=8F?=
 =?UTF-8?q?=E5=8C=96=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../io/metersphere/config/ShiroConfig.java    |   2 +-
 frontend/package.json                         |   6 +-
 .../common/components/MsCodeEdit.vue          |  24 ++--
 frontend/src/common/js/format-utils.js        | 130 ++++++++++++++++++
 4 files changed, 149 insertions(+), 13 deletions(-)
 create mode 100644 frontend/src/common/js/format-utils.js

diff --git a/backend/src/main/java/io/metersphere/config/ShiroConfig.java b/backend/src/main/java/io/metersphere/config/ShiroConfig.java
index b64a53dc34..88abf6d940 100644
--- a/backend/src/main/java/io/metersphere/config/ShiroConfig.java
+++ b/backend/src/main/java/io/metersphere/config/ShiroConfig.java
@@ -43,7 +43,7 @@ public class ShiroConfig implements EnvironmentAware {
         shiroFilterFactoryBean.getFilters().put("apikey", new ApiKeyFilter());
         Map<String, String> filterChainDefinitionMap = shiroFilterFactoryBean.getFilterChainDefinitionMap();
         ShiroUtils.loadBaseFilterChain(filterChainDefinitionMap);
-        filterChainDefinitionMap.put("/**", "apikey");
+        filterChainDefinitionMap.put("/**", "apikey, authc");
         return shiroFilterFactoryBean;
     }
 
diff --git a/frontend/package.json b/frontend/package.json
index 1b15b96a2d..6a709fd88a 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -36,7 +36,8 @@
     "yan-progress": "^1.0.3",
     "nprogress": "^0.2.0",
     "el-table-infinite-scroll": "^1.0.10",
-    "vue-pdf": "^4.2.0"
+    "vue-pdf": "^4.2.0",
+    "diffable-html": "^4.0.0"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^4.1.0",
@@ -63,7 +64,8 @@
       "no-console": "off",
       "no-unused-vars": "off",
       "no-unused-expressions": "off",
-      "no-unused-labels": "off"
+      "no-unused-labels": "off",
+      "no-useless-escape": "off"
     },
     "parserOptions": {
       "parser": "babel-eslint"
diff --git a/frontend/src/business/components/common/components/MsCodeEdit.vue b/frontend/src/business/components/common/components/MsCodeEdit.vue
index 02d6c870fe..afbe57255c 100644
--- a/frontend/src/business/components/common/components/MsCodeEdit.vue
+++ b/frontend/src/business/components/common/components/MsCodeEdit.vue
@@ -3,6 +3,9 @@
 </template>
 
 <script>
+  import {formatHtml, formatJson, formatXml} from "../../../../common/js/format-utils";
+  import toDiffableHtml from 'diffable-html';
+
     export default {
       name: "MsCodeEdit",
       components: { editor: require('vue2-ace-editor')},
@@ -71,19 +74,20 @@
           }
         },
         format() {
-          if (this.mode === 'json') {
-            try {
-              var JSONbig = require('json-bigint')({"storeAsString": false});
-              this.formatData = JSON.stringify(JSONbig.parse(this.data), null, '\t');
-            } catch (e) {
+          switch (this.mode) {
+            case 'json':
+              this.formatData = formatJson(this.data);
+              break;
+            case 'html':
+              this.formatData = toDiffableHtml(this.data);
+              break;
+            case 'xml':
+              this.formatData = formatXml(this.data);
+              break;
+            default:
               if (this.data) {
                 this.formatData = this.data;
               }
-            }
-          } else {
-            if (this.data) {
-              this.formatData = this.data;
-            }
           }
         }
       }
diff --git a/frontend/src/common/js/format-utils.js b/frontend/src/common/js/format-utils.js
new file mode 100644
index 0000000000..1c1206b6fd
--- /dev/null
+++ b/frontend/src/common/js/format-utils.js
@@ -0,0 +1,130 @@
+export function formatJson (json) {
+  let i = 0,
+    il = 0,
+    tab = "    ",
+    newJson = "",
+    indentLevel = 0,
+    inString = false,
+    currentChar = null;
+  for (i = 0, il = json.length; i < il; i += 1) {
+    currentChar = json.charAt(i);
+    switch (currentChar) {
+      case '{':
+      case '[':
+        if (!inString) {
+          newJson += currentChar + "\n" + repeat(tab, indentLevel + 1);
+          indentLevel += 1
+        } else {
+          newJson += currentChar
+        }
+        break;
+      case '}':
+      case ']':
+        if (!inString) {
+          indentLevel -= 1;
+          newJson += "\n" + repeat(tab, indentLevel) + currentChar
+        } else {
+          newJson += currentChar
+        }
+        break;
+      case ',':
+        if (!inString) {
+          newJson += ",\n" + repeat(tab, indentLevel)
+        } else {
+          newJson += currentChar
+        }
+        break;
+      case ':':
+        if (!inString) {
+          newJson += ": "
+        } else {
+          newJson += currentChar
+        }
+        break;
+      case ' ':
+      case "\n":
+      case "\t":
+        if (inString) {
+          newJson += currentChar
+        }
+        break;
+      case '"':
+        if (i > 0 && json.charAt(i - 1) !== '\\') {
+          inString = !inString
+        }
+        newJson += currentChar;
+        break;
+      default:
+        newJson += currentChar;
+        break
+    }
+  }
+  return newJson;
+}
+
+function repeat(s, count) {
+  return new Array(count + 1).join(s)
+}
+
+
+
+export function formatXml(text) {
+  //去掉多余的空格
+  text = '\n' + text.replace(/(<\w+)(\s.*?>)/g, function ($0, name, props) {
+    return name + ' ' + props.replace(/\s+(\w+=)/g, " $1");
+  }).replace(/>\s*?</g, ">\n<");
+  //把注释编码
+  text = text.replace(/\n/g, '\r').replace(/<!--(.+?)-->/g, function ($0, text) {
+    var ret = '<!--' + escape(text) + '-->';
+    //alert(ret);
+    return ret;
+  }).replace(/\r/g, '\n');
+  //调整格式
+  var rgx = /\n(<(([^\?]).+?)(?:\s|\s*?>|\s*?(\/)>)(?:.*?(?:(?:(\/)>)|(?:<(\/)\2>)))?)/mg;
+  var nodeStack = [];
+  var output = text.replace(rgx, function ($0, all, name, isBegin, isCloseFull1, isCloseFull2, isFull1, isFull2) {
+    var isClosed = (isCloseFull1 == '/') || (isCloseFull2 == '/' ) || (isFull1 == '/') || (isFull2 == '/');
+    //alert([all,isClosed].join('='));
+    var prefix = '';
+    if (isBegin == '!') {
+      prefix = getPrefix(nodeStack.length);
+    }
+    else {
+      if (isBegin != '/') {
+        prefix = getPrefix(nodeStack.length);
+        if (!isClosed) {
+          nodeStack.push(name);
+        }
+      }
+      else {
+        nodeStack.pop();
+        prefix = getPrefix(nodeStack.length);
+      }
+    }
+    var ret = '\n' + prefix + all;
+    return ret;
+  });
+  var prefixSpace = -1;
+  var outputText = output.substring(1);
+  //alert(outputText);
+  //把注释还原并解码，调格式
+  outputText = outputText.replace(/\n/g, '\r').replace(/(\s*)<!--(.+?)-->/g, function ($0, prefix, text) {
+    //alert(['[',prefix,']=',prefix.length].join(''));
+    if (prefix.charAt(0) == '\r')
+      prefix = prefix.substring(1);
+    text = unescape(text).replace(/\r/g, '\n');
+    var ret = '\n' + prefix + '<!--' + text.replace(/^\s*/mg, prefix) + '-->';
+    //alert(ret);
+    return ret;
+  });
+  return outputText.replace(/\s+$/g, '').replace(/\r/g, '\r\n');
+}
+
+function getPrefix(prefixIndex) {
+  var span = ' ';
+  var output = [];
+  for (var i = 0; i < prefixIndex; ++i) {
+    output.push(span);
+  }
+  return output.join('');
+}