From 419d86646d15102218781861440b7bb08c01bb17 Mon Sep 17 00:00:00 2001
From: shangguanyanpeng <shangguanyanpeng@360.cn>
Date: Wed, 24 Jun 2020 12:08:16 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=8F=82=E6=95=B0=E5=80=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                   |  5 ++++
 package.json                |  2 +-
 src/App.vue                 | 37 +++++++++++++++++++++++++++-
 src/lib/code-diff/index.vue | 48 +++++++++++++++++++++++++++++++------
 4 files changed, 83 insertions(+), 9 deletions(-)

diff --git a/README.md b/README.md
index 886de1a..ff05db2 100644
--- a/README.md
+++ b/README.md
@@ -35,6 +35,11 @@ export default {
 | new-string| 新的字符串| string  |   —    |    —     |
 | context| 不同地方上下间隔多少行不隐藏 | number  |   —    |    —     |
 | outputFormat| 展示的方式 | string  |   line-by-line，side-by-side    |    line-by-line     |
+| drawFileList | 展示对比文件列表 | boolean | - | false |
+| renderNothingWhenEmpty | 当无对比时不渲染 | boolean | - | false |
+| diffStyle | 每行中对比差异级别 | string | word, char | word |
+| fileName | 文件名 | string | - |  |
+| isShowNoChange | 当无对比时展示源代码 | boolean | - | false |
 
 
 ## 效果展示
diff --git a/package.json b/package.json
index 428ac6d..2605681 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,7 @@
   },
   "dependencies": {
     "diff": "^3.5.0",
-    "diff2html": "^2.3.3",
+    "diff2html": "^3.1.8",
     "highlight.js": "^9.12.0",
     "vue": "^2.5.2"
   },
diff --git a/src/App.vue b/src/App.vue
index cbde529..069d5a7 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -44,6 +44,31 @@
             <el-button type="text" @click="handleClearLocalStorage">清除</el-button>
           </el-form-item>
         </el-col>
+        <el-col :span="8">
+          <el-form-item label="展示对比文件列表">
+            <el-switch v-model="drawFileList" @click="drawFileList = !drawFileList"></el-switch>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="noDiff不渲染">
+            <el-switch v-model="renderNothingWhenEmpty" @click="renderNothingWhenEmpty = !renderNothingWhenEmpty"></el-switch>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="noDiff显示源代码">
+            <el-switch v-model="isShowNoChange" @click="isShowNoChange = !isShowNoChange"></el-switch>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="差异级别">
+            <el-button v-model="diffStyle" @click="diffStyle = diffStyle === 'char' ? 'word' : 'char'">{{diffStyle}}</el-button>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="文件名">
+            <el-input v-model="fileName"></el-input>
+          </el-form-item>
+        </el-col>
       </el-row>
     </el-form>
     <code-diff
@@ -51,6 +76,11 @@
       :new-string="newStr"
       :context="context"
       :output-format="outputFormat"
+      :drawFileList="drawFileList"
+      :renderNothingWhenEmpty="renderNothingWhenEmpty"
+      :diffStyle="diffStyle"
+      :fileName="fileName"
+      :isShowNoChange="isShowNoChange"
     />
   </div>
 </template>
@@ -67,7 +97,12 @@ export default {
       oldStr: '',
       newStr: '',
       fotmat: false,
-      context: 10
+      context: 10,
+      diffStyle: 'word',
+      fileName: '',
+      isShowNoChange: true,
+      drawFileList: true,
+      renderNothingWhenEmpty: false
     }
   },
   computed: {
diff --git a/src/lib/code-diff/index.vue b/src/lib/code-diff/index.vue
index 67cc509..9e8fd62 100644
--- a/src/lib/code-diff/index.vue
+++ b/src/lib/code-diff/index.vue
@@ -6,10 +6,10 @@
 
 <script>
 import {createPatch} from 'diff'
-import {Diff2Html} from 'diff2html'
+import * as Diff2Html from 'diff2html'
 import hljs from 'highlight.js'
 import 'highlight.js/styles/googlecode.css'
-import 'diff2html/dist/diff2html.css'
+import 'diff2html/bundles/css/diff2html.min.css'
 export default {
   name: 'code-diff',
   props: {
@@ -28,6 +28,26 @@ export default {
     outputFormat: {
       type: String,
       default: 'line-by-line'
+    },
+    drawFileList: {
+      type: Boolean,
+      defalut: false
+    },
+    renderNothingWhenEmpty: {
+      type: Boolean,
+      default: false
+    },
+    diffStyle: {
+      type: String,
+      default: 'word'
+    },
+    fileName: {
+      type: String,
+      default: ''
+    },
+    isShowNoChange: {
+      type: Boolean,
+      default: false
     }
   },
   directives: {
@@ -40,18 +60,32 @@ export default {
   },
   computed: {
     html () {
-      return this.createdHtml(this.oldString, this.newString, this.context, this.outputFormat)
+      return this.createdHtml(this.oldString, this.newString, this.context, this.outputFormat, this.drawFileList, this.renderNothingWhenEmpty, this.fileName, this.isShowNoChange)
     }
   },
   methods: {
-    createdHtml (oldString, newString, context, outputFormat) {
+    createdHtml (oldString, newString, context, outputFormat, drawFileList, renderNothingWhenEmpty, fileName, isShowNoChange) {
       function hljs (html) {
         return html.replace(/<span class="d2h-code-line-ctn">(.+?)<\/span>/g, '<span class="d2h-code-line-ctn"><code>$1</code></span>')
       }
-      let args = ['', oldString, newString, '', '', {context: context}]
+      if (isShowNoChange) {
+        oldString = 'File Without Change\tOldString: ======================== \n' + oldString
+        newString = 'File Without Change\tNewString: ======================== \n' + newString
+      }
+      let args = [fileName, oldString, newString, '', '', {context: context}]
       let dd = createPatch(...args)
-      let outStr = Diff2Html.getJsonFromDiff(dd, {inputFormat: 'diff', outputFormat: outputFormat, showFiles: false, matching: 'lines'})
-      let html = Diff2Html.getPrettyHtml(outStr, {inputFormat: 'json', outputFormat: outputFormat, showFiles: false, matching: 'lines'})
+      let outStr = Diff2Html.parse(dd, {
+        inputFormat: 'diff',
+        outputFormat: outputFormat,
+        drawFileList: drawFileList,
+        matching: 'lines',
+        renderNothingWhenEmpty: renderNothingWhenEmpty})
+      let html = Diff2Html.html(outStr, {
+        inputFormat: 'json',
+        outputFormat: outputFormat,
+        drawFileList: drawFileList,
+        matching: 'lines',
+        renderNothingWhenEmpty: renderNothingWhenEmpty})
       return hljs(html)
     }
   }