├── .browserslistrc
├── src
    ├── index.js
    └── components
    │   ├── CodeDiffChunk.vue
    │   └── CodeDiffViewer.vue
├── babel.config.js
├── demo
    ├── assets
    │   └── logo.png
    ├── main.js
    ├── App.vue
    └── utils.js
├── public
    ├── favicon.ico
    └── index.html
├── postcss.config.js
├── screenshots
    ├── modify.png
    ├── code_diff.png
    └── add_delete.png
├── .editorconfig
├── vue.config.js
├── .gitignore
├── README.md
├── package.json
└── .eslintrc.js


/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | not ie <= 8
4 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | module.exports = require('./components/CodeDiffViewer.vue');
2 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |     presets: [
3 |         '@vue/app'
4 |     ]
5 | };
6 | 


--------------------------------------------------------------------------------
/demo/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeDebugTest/vue-diff-view/HEAD/demo/assets/logo.png


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeDebugTest/vue-diff-view/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |     plugins: {
3 |         autoprefixer: {}
4 |     }
5 | };
6 | 


--------------------------------------------------------------------------------
/screenshots/modify.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeDebugTest/vue-diff-view/HEAD/screenshots/modify.png


--------------------------------------------------------------------------------
/screenshots/code_diff.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeDebugTest/vue-diff-view/HEAD/screenshots/code_diff.png


--------------------------------------------------------------------------------
/screenshots/add_delete.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeDebugTest/vue-diff-view/HEAD/screenshots/add_delete.png


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | [*.{js,jsx,ts,tsx,vue}]
2 | indent_style = space
3 | indent_size = 4
4 | end_of_line = lf
5 | trim_trailing_whitespace = true
6 | insert_final_newline = true
7 | 


--------------------------------------------------------------------------------
/demo/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue';
2 | import App from './App.vue';
3 | 
4 | Vue.config.productionTip = false;
5 | 
6 | new Vue({
7 |     render: h => h(App)
8 | }).$mount('#app');
9 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |     outputDir: 'demo-dist',
 3 |     pages: {
 4 |         index: {
 5 |             entry: 'demo/main.js',
 6 |             template: 'public/index.html'
 7 |         }
 8 |     }
 9 | };
10 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw*
22 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title>vue-diff-view</title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but vue-diff-view doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue-diff-view
 2 | > a git diff component for Vue.js
 3 | 
 4 | ## Usage
 5 | ```vue
 6 | <template>
 7 |     <div id="app">
 8 |         <code-diff-viewer :new-content="newStr" :old-content="oldStr" title="测试修改"/>
 9 |     </div>
10 | </template>
11 | 
12 | <script>
13 | import CodeDiffViewer from 'VueDiffView';
14 | 
15 | export default {
16 |     name: 'app',
17 |     components: {
18 |         CodeDiffViewer
19 |     },
20 |     data() {
21 |         return {
22 |             oldStr: '[\n    {\n        name: title\n        displayName: "标题"\n        datatype: "OBJECT"\n    }\n]',
23 |             newStr: '[\n    {\n        name: title\n        displayName: "TAB"\n        datatype: "ARRAY"\n    }\n    {\n        name: title\n        displayName: "TAB"\n        datatype: "ARRAY"\n    }\n]'
24 |         };
25 |     }
26 | };
27 | </script>
28 | ```
29 | 
30 | ## DEMO
31 | 
32 | ### overview
33 | ![code diff](https://github.com/codeDebugTest/vue-diff-view/blob/master/screenshots/code_diff.png);
34 | 
35 | ![modify file](https://github.com/codeDebugTest/vue-diff-view/raw/master/screenshots/modify.png)
36 | 
37 | ### run demo case
38 | ```command line
39 | npm run serve
40 | ```
41 | 
42 | ## todo
43 | when select code, not trigger line number.


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-diff-view",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "dev": "npm run serve",
 8 |     "build": "vue-cli-service build",
 9 |     "lint": "vue-cli-service lint"
10 |   },
11 |   "author": "liuye (liuye6y@gmail.com)",
12 |   "license": "MIT",
13 |   "dependencies": {
14 |     "diff": "^3.5.0"
15 |   },
16 |   "devDependencies": {
17 |     "@vue/cli-plugin-babel": "^4.2.0",
18 |     "@vue/cli-plugin-eslint": "^4.2.0",
19 |     "@vue/cli-service": "^4.2.0",
20 |     "@vue/eslint-config-standard": "^5.1.0",
21 |     "babel-eslint": "^10.0.3",
22 |     "eslint": "^6.8.0",
23 |     "eslint-plugin-import": "^2.20.1",
24 |     "eslint-plugin-node": "^11.0.0",
25 |     "eslint-plugin-promise": "^4.2.1",
26 |     "eslint-plugin-standard": "^4.0.0",
27 |     "eslint-plugin-vue": "^6.1.2",
28 |     "less": "^3.9.0",
29 |     "less-loader": "^4.1.0",
30 |     "rollup": "^2.2.0",
31 |     "rollup-plugin-babel": "^4.4.0",
32 |     "rollup-plugin-terser": "^5.3.0",
33 |     "vue": "^2.6.11",
34 |     "vue-template-compiler": "^2.6.11",
35 |     "webpack-dev-server": ">=3.1.11"
36 |   },
37 |   "peerDependencies": {
38 |     "vue": "^2.6.11"
39 |   }
40 | }
41 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     browser: true
 5 |   },
 6 |   'extends': [
 7 |     'plugin:vue/essential',
 8 |     '@vue/standard'
 9 |   ],
10 |   rules: {
11 |     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
12 |     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
13 |     // allow paren-less arrow functions
14 |     'arrow-parens': 0,
15 |     // allow async-await
16 |     'generator-star-spacing': 0,
17 |     // fix unused var error for JSX custom tags
18 |     'vue/jsx-uses-vars': 2,
19 |     'no-throw-literal': 0,
20 | 
21 |     'semi': ['error', 'always'],
22 |     'indent': ['error', 4, {SwitchCase: 1}],
23 |     'space-before-function-paren': ['error', {
24 |         anonymous: 'always',
25 |         named: 'never',
26 |         asyncArrow: 'always'
27 |     }],
28 |     'brace-style': ['error', 'stroustrup'],
29 |     'operator-linebreak': ['error', 'before'],
30 |     'eol-last': 'error',
31 |     'no-new': 0,
32 |     'no-else-return': 0,
33 |     'padded-blocks': 0,
34 |     'no-fallthrough': 'off',
35 |     'default-case': 'error',
36 |     'object-curly-spacing': 'off'
37 |   },
38 |   parserOptions: {
39 |     parser: 'babel-eslint'
40 |   }
41 | }
42 | 


--------------------------------------------------------------------------------
/demo/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div id="app">
 3 |         <code-diff-viewer v-for="changedFile in changedFiles"
 4 |             :key="changedFile.fileName"
 5 |             :new-content="changedFile.current"
 6 |             :old-content="changedFile.last"
 7 |             :title="changedFile.fileName"
 8 |         />
 9 |         <code-diff-viewer :new-content="newStr" :old-content="oldStr" title="测试删除"/>
10 |         <code-diff-viewer :new-content="oldStr" :old-content="newStr" title="测试添加"/>
11 |         <code-diff-viewer :new-content="modifiedStr" :old-content="oldStr" title="测试修改"/>
12 |     </div>
13 | </template>
14 | 
15 | <script>
16 | import CodeDiffViewer from '../src/components/CodeDiffViewer.vue';
17 | import files from './utils';
18 | 
19 | export default {
20 |     name: 'app',
21 |     components: {
22 |         CodeDiffViewer
23 |     },
24 |     data() {
25 |         return {
26 |             changedFiles: Object.freeze(files),
27 |             oldStr: '',
28 |             newStr: ''
29 |         };
30 |     },
31 |     created() {
32 |         this.oldStr = '[\n    {\n        name: title\n        displayName: "标题"\n        datatype: "OBJECT"\n    }\n]';
33 |         this.newStr = '';
34 |         this.modifiedStr = '[\n    {\n        name: title\n        displayName: "TAB"\n        datatype: "ARRAY"\n    }\n    {\n        name: title\n        displayName: "TAB"\n        datatype: "ARRAY"\n    }\n]';
35 |     }
36 | };
37 | </script>
38 | 
39 | <style>
40 | #app {
41 |     font-family: 'Avenir', Helvetica, Arial, sans-serif;
42 |     -webkit-font-smoothing: antialiased;
43 |     -moz-osx-font-smoothing: grayscale;
44 |     color: #2c3e50;
45 |     margin-top: 60px;
46 | }
47 | </style>
48 | 


--------------------------------------------------------------------------------
/src/components/CodeDiffChunk.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="diff-chunk">
  3 |         <div v-if="chunk.collapse"
  4 |                 class="collapse-tip"
  5 |                 @click.once="$emit('expand', chunk.leftIndex, chunk.rightIndex)">
  6 |             ... 隐藏 {{chunk.lineCount}} 行，点击展开 ...
  7 |         </div>
  8 |         <div v-else class="line"
  9 |             v-for="(line, index) in chunk.lines"
 10 |             :key="index">
 11 |             <span v-if="chunk.type !== 'blank'"
 12 |                 :class="chunk.type">{{chunk.startLineNumber + index}}</span>
 13 |             <span v-else></span>
 14 |             <pre :class="chunk.type">{{line}}</pre>
 15 |         </div>
 16 |     </div>
 17 | </template>
 18 | 
 19 | <script>
 20 | export default {
 21 |     name: 'code-diff-chunk',
 22 |     props: {
 23 |         chunk: {
 24 |             type: Object,
 25 |             default: () => {}
 26 |         }
 27 |     }
 28 | };
 29 | </script>
 30 | 
 31 | <style lang="less" scoped>
 32 | .diff-chunk {
 33 |     .line {
 34 |         display: flex;
 35 | 
 36 |         span {
 37 |             width: 40px;
 38 |             padding-left: 5px;
 39 |             padding-right: 8px;
 40 |             line-height: 22px;
 41 |             box-sizing: border-box;
 42 |             text-align: right;
 43 |         }
 44 |         pre {
 45 |             display: inline-block;
 46 |             margin: 0;
 47 |             padding-left: 20px;
 48 |             width: 100%;
 49 |             line-height: 22px;
 50 |             word-wrap: break-word;
 51 |             white-space: pre-wrap;
 52 |             word-break: normal;
 53 |             color: #005cc5;
 54 |             &::before {
 55 |                 content: "";
 56 |                 position: absolute;
 57 |             }
 58 |         }
 59 |     }
 60 | 
 61 |     span.add {
 62 |         background-color: #cdffd8;
 63 |     }
 64 |     span.remove {
 65 |         background-color: #ffdce0;
 66 |     }
 67 |     pre.add {
 68 |         background-color: #e6ffed;
 69 |         &::before {
 70 |             content: "+";
 71 |             margin-left: -15px;
 72 |             color: #24292e;
 73 |         }
 74 |     }
 75 | 
 76 |     pre.remove {
 77 |         background-color: #ffeef0;
 78 |         &::before {
 79 |             content: "-";
 80 |             margin-left: -15px;
 81 |             color: #24292e;
 82 |         }
 83 |     }
 84 | 
 85 |     .collapse-tip {
 86 |         height: 32px;
 87 |         line-height: 32px;
 88 |         text-align: center;
 89 |         background-color: #def;
 90 | 
 91 |         &:hover {
 92 |             cursor: pointer;
 93 |         }
 94 |     }
 95 | 
 96 |     &:last-child {
 97 |         border-radius: 0 0 5px 5px;
 98 |     }
 99 | }
100 | </style>
101 | 


--------------------------------------------------------------------------------
/demo/utils.js:
--------------------------------------------------------------------------------
 1 | /* eslint-disable */
 2 | export default [
 3 |     {
 4 |         fileName: 'src/components/image.html',
 5 |         current: "<!-- target:TPL_component_pure_white_image -->\n<div class=\"${.} ec-pl-image-wrapper\">\n    <!-- if: ${rcvUrl} -->\n    <a href=\"${rcvUrl}\" title2=\"图片链接\" class=\"c-blocka\">\n        <!-- /if -->\n\n        <!-- import:TPL_component_pure_white_image-content -->\n\n        <!-- if: ${rcvUrl} -->\n    </a>\n    <!-- /if -->\n</div>\n\n<!-- target:TPL_component_pure_white_image-content -->\n<div class=\"${.outer-ctn}\" style=\"<!-- if: ${imgWidth} -->width: ${imgWidth};<!-- /if --><!-- if: ${isCenter} --> margin: 0 auto;<!-- /if -->\">\n    <div class=\"ec-pl-img ${imgGap} <!-- if: ${needImgRatioClass} -->${imgRatioClass}<!-- /if --> ${.ctn}\" style=\"<!-- if: ${imgRatio} --> height: 0; padding-bottom: ${imgRatio}; <!-- /if -->\">\n        <img src=\"${imgUrl}\">\n        <!-- if: ${hasVideoIcon} -->\n        <i class=\"c-icon ${.icon}\" style=\"font-size: ${iconSize}; line-height: ${iconSize}\">&#xe654</i>\n        <!-- /if -->\n        <!-- if: ${imgText} -->\n        <div class=\"ec-pl-img-text ${.text}\">${imgText}</div>\n        <!-- /if -->\n    </div>\n</div>\n\n<div class=\"ec-pl-image-title ${.title}<!-- if: ${titleClass} --> ${titleClass}<!-- /if -->\" style=\"<!--if: ${titleMargin} -->margin:${titleMargin};<!-- /if -->\">\n    <!-- if: ${imgTitleMain} -->\n    <div\n        class=\"<!-- if: ${mainTitleGap} -->${mainTitleGap} <!-- /if -->${mainTitleFont} <!-- if: ${mainLineClamp} --> ${mainLineClamp}<!-- /if --> ${.title-main}\">\n        ${imgTitleMain}\n    </div>\n    <!-- /if -->\n    <!-- if: ${imgTitleSub} -->\n    <div class=\"<!-- if: ${subTitleGap} -->${subTitleGap} <!-- /if -->${subTitleFont}\n    <!-- if: ${subLineClamp} --> ${subLineClamp}<!-- /if --> ${.title-sub}\">\n        ${imgTitleSub}\n    </div>\n    <!-- /if -->\n</div>\n\n",
 6 |         last: "<!-- target:TPL_component_pure_white_image -->\n<div class=\"${.} ec-pl-image-wrapper\">\n    <!-- if: ${rcvUrl} -->\n    <a href=\"${rcvUrl}\" title2=\"图片地址链接\" class=\"c-blocka\">\n        <!-- /if -->\n\n        <!-- import:TPL_component_pure_white_image-content -->\n\n        <!-- if: ${rcvUrl} -->\n    </a>\n    <!-- /if -->\n</div>\n\n<!-- target:TPL_component_pure_white_image-content -->\n<div class=\"${.outer-ctn}\" style=\"<!-- if: ${imgWidth} -->width: ${imgWidth};<!-- /if --><!-- if: ${isCenter} --> margin: 0 auto;<!-- /if -->\">\n    <div class=\"ec-pl-img ${imgGap} <!-- if: ${needImgRatioClass} -->${imgRatioClass}<!-- /if --> ${.ctn}\" style=\"<!-- if: ${imgRatio} --> height: 0; padding-bottom: ${imgRatio}; <!-- /if -->\">\n        <img src=\"${imgUrl}\">\n        <!-- if: ${hasVideoIcon} -->\n        <i class=\"c-icon ${.icon}\" style=\"font-size: ${iconSize}; line-height: ${iconSize}\">&#xe654</i>\n        <!-- /if -->\n        <!-- if: ${imgText} -->\n        <div class=\"ec-pl-img-text ${.text}\">${imgText}</div>\n        <!-- /if -->\n    </div>\n</div>\n\n<div class=\"ec-pl-image-title ${.title}<!-- if: ${titleClass} --> ${titleClass}<!-- /if -->\" style=\"<!--if: ${titleMargin} -->margin:${titleMargin};<!-- /if -->\">\n    <!-- if: ${imgTitleMain} -->\n    <div\n        class=\"<!-- if: ${mainTitleGap} -->${mainTitleGap} <!-- /if -->${mainTitleFont} <!-- if: ${mainLineClamp} --> ${mainLineClamp}<!-- /if --> ${.title-main}\">\n        ${imgTitleMain}\n    </div>\n    <!-- /if -->\n    <!-- if: ${imgTitleSub} -->\n    <div class=\"<!-- if: ${subTitleGap} -->${subTitleGap} <!-- /if -->${subTitleFont}\n    <!-- if: ${subLineClamp} --> ${subLineClamp}<!-- /if --> ${.title-sub}\">\n        ${imgTitleSub}\n    </div>\n    <!-- /if -->\n</div>\n\n"
 7 |     },
 8 |     {
 9 |         fileName: "src/components/image.less",
10 |         current: ".ec-image {\n    &-icon {\n        position: absolute;\n        left: 50%;\n        top: 50%;\n        color: #fff;\n        background-color: rgba(0, 0, 0, .3);\n        border-radius: 50%;\n        transform: translate(-50%, -50%);\n    }\n}\n.ec-pl-image-title-top {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    margin-left: 10px;\n    margin-right: 10px;\n    padding: 10px;\n}\n.ec-image {\n    &-icon {\n        position: absolute;\n        left: 50%;\n        top: 50%;\n        color: #fff;\n        background-color: rgba(0, 0, 0, .3);\n        border-radius: 50%;\n        transform: translate(-50%, -50%);\n    }\n}\n.ec-image {\n    &-icon {\n        position: absolute;\n        left: 50%;\n        top: 50%;\n        color: #fff;\n        background-color: rgba(0, 0, 0, .3);\n        border-radius: 50%;\n        transform: translate(-50%, -50%);\n    }\n}",
11 |         last: ".ec-image {\n    &-icon {\n        position: absolute;\n        left: 50%;\n        top: 50%;\n        color: #fff;\n        background-color: rgba(0, 0, 0, .3);\n        border-radius: 50%;\n        transform: translate(-50%, -50%);\n    }\n}\n.ec-pl-image-title-top {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    margin: 10px;\n}\n.ec-image {\n    &-icon {\n        position: absolute;\n        left: 50%;\n        top: 50%;\n        color: #fff;\n        background-color: rgba(0, 0, 0, .3);\n        border-radius: 20%;\n        border: 2px;\n        transform: translate(-50%, -50%);\n    }\n}\n.ec-image {\n    &-icon {\n        position: absolute;\n        left: 50%;\n        top: 50%;\n        color: #fff;\n        background-color: rgba(0, 0, 0, .3);\n        border-radius: 50%;\n        transform: translate(-50%, -50%);\n    }\n}"
12 |     },
13 |     {
14 |         fileName: "src/components/ImageDelete.less",
15 |         current: "",
16 |         last: ".ec-image {\n    &-icon {\n        position: absolute;\n        left: 50%;\n        top: 50%;\n        color: #fff;\n        background-color: rgba(0, 0, 0, .3);\n        border-radius: 50%;\n        transform: translate(-50%, -50%);\n    }\n}\n.ec-pl-image-title-top {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    margin: 10px;\n}\n"
17 |     },
18 |     {
19 |         fileName: "src/components/TestAdd.less",
20 |         last: "",
21 |         current: ".ec-image {\n    &-icon {\n        position: absolute;\n        left: 50%;\n        top: 50%;\n        color: #fff;\n        background-color: rgba(0, 0, 0, .3);\n        border-radius: 50%;\n        transform: translate(-50%, -50%);\n    }\n}\n.ec-pl-image-title-top {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    margin: 10px;\n}\n"
22 |     }
23 | ];


--------------------------------------------------------------------------------
/src/components/CodeDiffViewer.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="diff-viewer">
  3 |         <h3>{{title}}</h3>
  4 |         <div class="container" v-if="newContent && oldContent">
  5 |             <div class="left">
  6 |                 <code-chunk v-for="(chunk, index) in splitedLeft"
  7 |                     :key="index"
  8 |                     :chunk="chunk" @expand="expandChunk"/>
  9 |             </div>
 10 |             <div class="right">
 11 |                 <code-chunk v-for="(chunk, index) in splitedRight"
 12 |                     :key="index"
 13 |                     :chunk="chunk" @expand="expandChunk"/>
 14 |             </div>
 15 |         </div>
 16 |         <div v-else v-for="(chunk, index) in unifiedResult"
 17 |             :key="index">
 18 |             <code-chunk :chunk="chunk" :index="index"/>
 19 |         </div>
 20 |     </div>
 21 | </template>
 22 | 
 23 | <script>
 24 | import {diffLines} from 'diff/lib/diff/line';
 25 | import CodeChunk from './CodeDiffChunk.vue';
 26 | 
 27 | export default {
 28 |     name: 'code-iff-viewer',
 29 |     components: {
 30 |         CodeChunk
 31 |     },
 32 |     props: {
 33 |         oldContent: String,
 34 |         newContent: String,
 35 |         title: String,
 36 |         collapse: {
 37 |             type: Number,
 38 |             default: 10 // 连续超过10行没改动，默认折叠
 39 |         }
 40 |     },
 41 |     data() {
 42 |         return {
 43 |             unifiedResult: [],
 44 |             splitedLeft: [],
 45 |             splitedRight: []
 46 |         };
 47 |     },
 48 |     created() {
 49 |         this.calculateDiff();
 50 |     },
 51 |     watch: {
 52 |         'title'(v) {
 53 |             this.calculateDiff();
 54 |         }
 55 |     },
 56 |     methods: {
 57 |         calculateDiff() {
 58 |             this.unifiedResult = this.diff();
 59 |             this.splitedLeft = [];
 60 |             this.splitedRight = [];
 61 |             if (this.unifiedResult.length) {
 62 |                 const {left, right} = this.splitDiffResult(this.unifiedResult);
 63 |                 this.adaptSplitResult(left, right);
 64 |             }
 65 |         },
 66 |         diff() {
 67 |             // 修改
 68 |             if (this.newContent && this.oldContent) {
 69 |                 const diffs = diffLines(this.oldContent, this.newContent, {
 70 |                     ignoreWhitespace: false
 71 |                 });
 72 |                 const length = diffs.length;
 73 |                 return diffs.map((chunk, index) => {
 74 |                     const type = chunk.added ? 'add' : (chunk.removed ? 'remove' : '');
 75 |                     // delete last element of array, because split will produce more one line.
 76 |                     let lines = chunk.value.split('\n');
 77 |                     lines = index === length - 1 ? lines.slice(0) : lines.slice(0, -1);
 78 |                     return {
 79 |                         type,
 80 |                         lines,
 81 |                         lineCount: lines.length,
 82 |                         collapse: !type && lines.length > this.collapse
 83 |                     };
 84 |                 });
 85 |             }
 86 |             else if (this.newContent || this.oldContent) {
 87 |                 // 新增 or 删除
 88 |                 const diffs = this.newContent || this.oldContent;
 89 |                 const lines = diffs.split('\n');
 90 |                 const type = !this.newContent ? 'remove' : (!this.oldContent ? 'add' : '');
 91 | 
 92 |                 return [{
 93 |                     type,
 94 |                     lines,
 95 |                     lineCount: lines.length,
 96 |                     startCount: 1
 97 |                 }];
 98 |             }
 99 |             return [];
100 |         },
101 | 
102 |         /**
103 |          * 由于 diff库返回的结果是 chunk list非双边对比结果，所以这里做了处理
104 |          *  1. 新增块放入右侧，如果下一块为删除块则视为更改代码，此时左侧需补充空行。
105 |          *  2. 删除块放入左侧，如果下一块为新增块则视为更改代码, 此时右侧补充空行。
106 |          *  3. 无变化块，两边都需放入。
107 |          *
108 |          * @param {Array} diffResult diff库调用返回的结果
109 |          * @return {Object} {left, right} 左右分离结果
110 |         */
111 |         splitDiffResult(diffResult) {
112 |             const left = {
113 |                 chunks: [],
114 |                 lineCount: 1
115 |             };
116 |             const right = {
117 |                 chunks: [],
118 |                 lineCount: 1
119 |             };
120 |             const setChunkLineNumber = (chunk, lineNumer) => {
121 |                 chunk.startLineNumber = lineNumer;
122 |                 return lineNumer + chunk.lineCount;
123 |             };
124 | 
125 |             diffResult.forEach((chunk, index) => {
126 |                 if (chunk.type === 'add') {
127 |                     right.lineCount = setChunkLineNumber(chunk, right.lineCount);
128 |                     right.chunks.push(chunk);
129 |                     // 判断是否增加空白块
130 |                     if (this.shouldSetBlank(chunk.type, index)) {
131 |                         left.chunks.push(this.createBlankChunk(chunk.lineCount));
132 |                     }
133 |                 }
134 |                 else if (chunk.type === 'remove') {
135 |                     left.lineCount = setChunkLineNumber(chunk, left.lineCount);
136 |                     left.chunks.push(chunk);
137 |                     // 判断是否增加空白块
138 |                     if (this.shouldSetBlank(chunk.type, index)) {
139 |                         right.chunks.push(this.createBlankChunk(chunk.lineCount));
140 |                     }
141 |                 }
142 |                 else {
143 |                     // 没有变动，两边放入。
144 |                     left.lineCount = setChunkLineNumber(chunk, left.lineCount);
145 |                     left.chunks.push(chunk);
146 | 
147 |                     const clonedChunk = {...chunk};
148 |                     right.lineCount = setChunkLineNumber(clonedChunk, right.lineCount);
149 |                     right.chunks.push(clonedChunk);
150 |                 }
151 |             });
152 |             return {left, right};
153 |         },
154 |         adaptSplitResult(left, right) {
155 |             left.chunks.forEach((leftChunk, index) => {
156 |                 const rightChunk = right.chunks[index];
157 |                 if (leftChunk.collapse && rightChunk.collapse) {
158 |                     // 记录下左右栏chunk index; 点击展开时，通过此index定位chunk进行展开。
159 |                     leftChunk.leftIndex = rightChunk.leftIndex = this.splitedLeft.length;
160 |                     leftChunk.rightIndex = rightChunk.rightIndex = this.splitedRight.length;
161 |                 }
162 | 
163 |                 this.splitedLeft.push(leftChunk);
164 |                 this.splitedRight.push(rightChunk);
165 | 
166 |                 // 修改的行数不一致时，补充空白块。例如：左栏删除 3行，右栏添加5行代码。则左栏需补充 2行空白，进行对齐。
167 |                 if (leftChunk.type === 'remove' && rightChunk.type === 'add') {
168 |                     const count = leftChunk.lineCount - rightChunk.lineCount;
169 |                     if (count < 0) {
170 |                         this.splitedLeft.push(this.createBlankChunk(Math.abs(count)));
171 |                     }
172 |                     else if (count > 0) {
173 |                         this.splitedRight.push(this.createBlankChunk(count));
174 |                     }
175 |                 }
176 |             });
177 |         },
178 | 
179 |         /**
180 |          * 是否应该设置空白块：
181 |          *    1. 最后一块返回 true
182 |          *    2. 当前块是‘remove'类型，看下一块类型是否为空（没有变化）
183 |          *    3. 当前块是‘add'类型，看上一块类型是否为空(没有变化)
184 |          *
185 |          * @param {type} type 当前块类型
186 |          * @param {inddex} index 当前块索引
187 |          * @return {boolean}
188 |          */
189 |         shouldSetBlank(type, index) {
190 |             if (index === this.unifiedResult.length - 1) {
191 |                 return true;
192 |             }
193 |             index = type === 'remove' ? index + 1 : index - 1;
194 | 
195 |             const chunk = this.unifiedResult[index];
196 |             return !chunk || !chunk.type;
197 |         },
198 | 
199 |         /**
200 |          * 创建空白块
201 |          *
202 |          * @param {number} lineCount 行数
203 |          * @return {Object} 空白块对象
204 |          */
205 |         createBlankChunk(lineCount) {
206 |             return {
207 |                 type: 'blank',
208 |                 lineCount,
209 |                 lines: new Array(lineCount).fill(' ')
210 |             };
211 |         },
212 |         expandChunk(leftIndex, rightIndex) {
213 |             this.splitedLeft[leftIndex].collapse = false;
214 |             this.splitedRight[rightIndex].collapse = false;
215 |         }
216 |     }
217 | };
218 | </script>
219 | 
220 | <style lang="less" scoped>
221 | .diff-viewer {
222 |     font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace, sans-serif;
223 |     font-size: 12px;
224 |     margin-bottom: 15px;
225 |     border-radius: 5px;
226 |     border: 1px solid #ddd;
227 | 
228 |     h3 {
229 |         box-sizing: border-box;
230 |         margin: 0;
231 |         padding: 5px 10px;
232 |         height: 40px;
233 |         line-height: 30px;
234 |         border-radius: 5px 5px 0 0;
235 |         border-bottom: 1px solid #dbdbdb;
236 |         background-color: #f7f7f7;
237 |         color: #333;
238 |         font-weight: 600;
239 |     }
240 | 
241 |     .container {
242 |         display: flex;
243 |         > div {
244 |             width: 50%;
245 |         }
246 |     }
247 | }
248 | </style>
249 | 


--------------------------------------------------------------------------------