diff 重构

package-lock.json

 {
   "name": "c-tool",
-  "version": "1.7.10",
+  "version": "1.8.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -4505,11 +4505,6 @@
       "integrity": "sha512-qi86tE6hRcFHy8jI1m2VG+LaPUR1LhqDa5G8tVjuUXmOrpuAgqsA1pN0+ldgr3aKUH+QLI9hCY/OcRYisERejw==",
       "dev": true
     },
-    "diff": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz",
-      "integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A=="
-    },
     "diffie-hellman": {
       "version": "5.0.3",
       "resolved": "https://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz",

package.json

@@ -19,7 +19,6 @@
         "cron-parser": "^2.16.3",
         "cronstrue": "^1.122.0",
         "crypto-js": "^3.3.0",
-        "diff": "^4.0.2",
         "file": "^0.2.2",
         "http-build-query": "^0.7.0",
         "ipinyinjs": "^1.0.0",

src/views/tool/components/diffEditor.vue

 <template>
-    <div ref="container" class="diff-editor" :style="`height:${height};width:${width}`"></div>
+    <div ref="container" class="diff-editor" :style="`height:${containerHeight};width:${width}`"></div>
 </template>
 <script>
-import {createMerge} from "../library/editor";
+import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
 
 export default {
     name: 'diffEditor',
@@ -14,13 +14,21 @@ export default {
             type: String,
             default: ""
         },
-        collapse: {
+        autoHeight: {
+            type: Number,
+            default: 0
+        },
+        theme: {
+            type: String,
+            default: 'vs'
+        },
+        roundedSelection: {
             type: Boolean,
-            default: false
+            default: true
         },
         height: {
             type: String,
-            default: "100%"
+            default: "350px"
         },
         width: {
             type: String,
@@ -29,51 +37,83 @@ export default {
 
     },
     watch: {
-        value() {
-            this.reset()
+        value(newValue) {
+            if (this.editor !== null
+                && (
+                    this.original.getValue() !== newValue['original']
+                    || this.modified.getValue() !== newValue['modified']
+                )) {
+                this.original.setValue(newValue['original'])
+                this.modified.setValue(newValue['modified'])
+            }
         },
         language(newValue) {
             if (this.editor !== null) {
-                this.editor.customSetEditorLanguage(newValue);
+                monaco.editor.setModelLanguage(this.editor.getOriginalEditor().getModel(), newValue)
+                monaco.editor.setModelLanguage(this.editor.getModifiedEditor().getModel(), newValue)
             }
         },
-        collapse() {
-            this.reset()
+        theme(newValue) {
+            if (this.editor !== null) {
+                monaco.editor.setTheme(newValue)
+            }
+        }
+    },
+    created() {
+        if (this.autoHeight > 0) {
+            this.containerHeight = (window.innerHeight - this.autoHeight) + "px"
+        } else {
+            this.containerHeight = this.height
         }
     },
     mounted() {
-        this.reset()
+        this.initEditor()
     },
     data() {
         return {
             editor: null,
+            original: null,
+            modified: null,
+            containerHeight: ""
         }
     },
     methods: {
-        reset() {
-            this.$refs.container.innerHTML = "";
-            this.initEditor();
-        },
         initEditor() {
-            this.editor = createMerge(this.value, this.$refs.container, this.language, {collapseIdentical: this.collapse ? 2 : false})
-            this.editor.customChange((original, modified) => {
-                if (original !== this.value.original || modified !== this.value.modified) {
-                    this.value.original = original
-                    this.value.modified = modified
+            this.$refs.container.innerHTML = ''
+            this.editor = monaco.editor.createDiffEditor(this.$refs.container, {
+                theme: this.theme,
+                roundedSelection: this.roundedSelection,
+                automaticLayout: true,
+                renderSideBySide: true
+            })
+            this.original = monaco.editor.createModel(this.value['original'], this.language)
+            this.modified = monaco.editor.createModel(this.value['modified'], this.language)
+            this.editor.setModel({original: this.original, modified: this.modified})
+            this.editor.getOriginalEditor().updateOptions({readOnly: false})
+
+            this.original.onDidChangeContent(() => {
+                if (this.value.original !== this.original.getValue()) {
+                    this.value.original = this.original.getValue()
+                    this.$emit('input', this.value)
+                }
+            })
+            this.modified.onDidChangeContent(() => {
+                if (this.value.modified !== this.modified.getValue()) {
+                    this.value.modified = this.modified.getValue()
                     this.$emit('input', this.value)
                 }
             })
         },
+        // 行内模式
+        inline(value) {
+            if (this.editor) {
+                value = !!value;
+                this.editor.updateOptions({renderSideBySide: !!value})
+                this.editor.getOriginalEditor().updateOptions({readOnly: !value})
+                this.editor.getModifiedEditor().updateOptions({readOnly: !value})
+            }
+        }
     }
 };
 </script>
 
-<style>
-.diff-editor .CodeMirror-merge{
-    border: none;
-}
-.diff-editor .CodeMirror-merge,.diff-editor .CodeMirror-merge-pane, .diff-editor .CodeMirror-merge .CodeMirror {
-    height: 100%;
-}
-</style>
-

src/views/tool/diffs.vue

 <template>
     <div>
-        <heightResize :append="['.page-option-block']">
-        <div style="border: 1px solid #dcdee2; border-radius: 4px;height: 100%;">
-            <diff-editor ref="editor" :collapse="current.collapse" v-model="current.diff" :language="current.language" />
+        <div style="border: 1px solid #dcdee2; border-radius: 4px">
+            <diffEditor ref="editor" v-model="current.diff" :language="current.language" :auto-height="220" />
         </div>
-        </heightResize>
-        <option-block class="page-option-block">
+        <option-block>
             <FormItem>
                 <ButtonGroup>
                     <Button
-                        :type="current.language !== item ? 'primary' : 'warning'"
-                        @click="setLanguage(item)"
+                        :type="current.language !== item.id ? 'primary' : 'warning'"
+                        @click="setLanguage(item.id)"
                         v-for="item in buttonLang"
-                        :key="item"
-                    >{{ item }}
+                        :key="item.id"
+                    >{{ item.name }}
                     </Button>
                 </ButtonGroup>
             </FormItem>
             <FormItem>
-                <Select :placeholder="$t('diffs_more')" @on-change="(value)=>{setLanguage(value)}">
-                    <Option v-for="item in allLang" :value="item" :key="item">{{ item }}</Option>
+                <Select placeholder="更多语言" @on-change="(value)=>{setLanguage(value)}">
+                    <Option v-for="item in allLang" :value="item.id" :key="item.id">{{ item.name }}</Option>
                 </Select>
             </FormItem>
             <FormItem>
-                <Checkbox v-model="current.collapse">{{ $t('diffs_collapse') }}</Checkbox>
+                <Checkbox @on-change="(value)=>inline(value)">行内对比</Checkbox>
             </FormItem>
         </option-block>
     </div>
 </template>
 <script>
 import diffEditor from "./components/diffEditor";
-import {allLang} from "./library/editor";
-import _ from "lodash";
-import heightResize from "./components/heightResize";
+import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
+
+let allLang = {}
+for (let lang of monaco.languages.getLanguages()) {
+    allLang[lang.id] = {
+        id: lang.id,
+        name: lang.id === "plaintext" ? "纯文本" : lang.aliases[0]
+    }
+}
 
 const COMMON_LANG = [
-    "text",
+    "plaintext",
+    "javascript",
     "html",
-    "js",
     "css",
     "json",
     "python",
@@ -48,44 +52,47 @@ const COMMON_LANG = [
 export default {
     components: {
         diffEditor,
-        heightResize
     },
     computed: {
         allLang() {
-            return allLang
+            return Object.values(allLang)
         },
         buttonLang() {
-            let data = _.cloneDeep(COMMON_LANG);
-            if (this.current.language && !data.includes(this.current.language)) {
-                data.push(this.current.language)
+            let data = COMMON_LANG.map((item) => {
+                return allLang[item]
+            });
+            if (this.current.language && !COMMON_LANG.includes(this.current.language)) {
+                data.push(allLang[this.current.language])
             }
             return data;
         }
     },
     created() {
-        this.$initToolData()
+        this.current = Object.assign(this.current, this.$getToolData())
     },
     methods: {
         setLanguage(lang) {
             this.current.language = lang;
+        },
+        inline(value){
+            this.$refs.editor.inline(!value)
         }
     },
     watch: {
-        current: {
-            handler(newVal) {
-                if (newVal.diff.original && newVal.diff.modified) {
+        current:{
+            handler(newVal){
+                if (newVal.diff.original && newVal.diff.modified){
                     this.$saveToolData(this.current);
                 }
             },
-            deep: true
+            deep:true
         }
     },
     data() {
         return {
             current: {
                 diff: {original: "", modified: ""},
-                language: "text",
-                collapse: false
+                language: ""
             }
         }
     }