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:${containerHeight};width:${width}`"></div>
+</template>
+<script>
+import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
+
+export default {
+    name: 'diffEditor',
+    props: {
+        value: {
+            type: Object
+        },
+        language: {
+            type: String,
+            default: ""
+        },
+        autoHeight: {
+            type: Number,
+            default: 0
+        },
+        theme: {
+            type: String,
+            default: 'vs'
+        },
+        roundedSelection: {
+            type: Boolean,
+            default: true
+        },
+        height: {
+            type: String,
+            default: "350px"
+        },
+        width: {
+            type: String,
+            default: "100%"
+        },
+
+    },
+    watch: {
+        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) {
+                monaco.editor.setModelLanguage(this.editor.getOriginalEditor().getModel(), newValue)
+                monaco.editor.setModelLanguage(this.editor.getModifiedEditor().getModel(), newValue)
+            }
+        },
+        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.initEditor()
+    },
+    data() {
+        return {
+            editor: null,
+            original: null,
+            modified: null,
+            containerHeight: ""
+        }
+    },
+    methods: {
+        initEditor() {
+            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>
+

src/views/tool/diffs.vue

 <template>
     <div>
-        <Tabs v-model="current.operation">
-            <TabPane label="对比内容" name="input">
-                <Row :gutter="16">
-                    <Col span="12">
-                        <Input v-model="current.source" :rows="14" type="textarea" placeholder="内容"></Input>
-                    </Col>
-                    <Col span="12">
-                        <Input v-model="current.target" :rows="14" type="textarea" placeholder="内容"></Input>
-                    </Col>
-                </Row>
-            </TabPane>
-            <TabPane label="对比结果" name="result">
-                <RadioGroup v-model="current.type" type="button">
-                    <Radio :label="k"  v-for="(v,k) in type" :key="k">
-                        <span>{{v}}</span>
-                    </Radio>
-                </RadioGroup>
-                <div class="diff-block">
-                    <diff-block :diff="diff"></diff-block>
-                </div>
-            </TabPane>
-        </Tabs>
+        <div style="border: 1px solid #dcdee2; border-radius: 4px">
+            <diffEditor ref="editor" v-model="current.diff" :language="current.language" :auto-height="220" />
+        </div>
+        <option-block>
+            <FormItem>
+                <ButtonGroup>
+                    <Button
+                        :type="current.language !== item.id ? 'primary' : 'warning'"
+                        @click="setLanguage(item.id)"
+                        v-for="item in buttonLang"
+                        :key="item.id"
+                    >{{ item.name }}
+                    </Button>
+                </ButtonGroup>
+            </FormItem>
+            <FormItem>
+                <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 @on-change="(value)=>inline(value)">行内对比</Checkbox>
+            </FormItem>
+        </option-block>
     </div>
 </template>
 <script>
-    const jsDiff = require('diff');
-    export default {
-        components: {
-            "diff-block": {
-                render: function (createElement) {
-                    let e = [];
-                    let diff = this.diff;
+import diffEditor from "./components/diffEditor";
+import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
 
-                    for (let i = 0; i < diff.length; i++) {
-                        if (diff[i].added && diff[i + 1] && diff[i + 1].removed) {
-                            let swap = diff[i];
-                            diff[i] = diff[i + 1];
-                            diff[i + 1] = swap;
-                        }
-                        if (diff[i].removed){
-                            e.push(createElement(
-                                'del',
-                                diff[i].value
-                            ))
-                        }
-                        else if(diff[i].added){
-                            e.push(createElement(
-                                'ins',
-                                diff[i].value
-                            ))
-                        }
-                        else{
-                            e.push(diff[i].value)
-                        }
-                    }
-                    return createElement(
-                        'pre',
-                        e
-                    )
-                },
-                props: {
-                    diff: {
-                        type: Array,
-                        default: []
-                    }
-                }
-            },
+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 = [
+    "plaintext",
+    "javascript",
+    "html",
+    "css",
+    "json",
+    "python",
+    "java",
+    "php"
+]
+
+export default {
+    components: {
+        diffEditor,
+    },
+    computed: {
+        allLang() {
+            return Object.values(allLang)
         },
-        computed: {
-            diff() {
-                let beginTime = new Date();
-                console.log("开始对比"+this.current.type);
-                let diff = jsDiff[this.current.type](this.current.source, this.current.target);
-                this.$saveToolData(this.current);
-                console.log("结束对比 用时:"+((new Date())-beginTime)+"ms "+this.current.type);
-                return diff;
+        buttonLang() {
+            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.current = Object.assign(this.current, this.$getToolData())
+    },
+    methods: {
+        setLanguage(lang) {
+            this.current.language = lang;
         },
-        created() {
-            this.current = Object.assign(this.current, this.$getToolData())
-        },
-        methods: {
-            // handle(type) {
-            //     this.current.diff = JsDiff[type](this.current.source, this.current.target)
-            //     this.current.operation = "result";
-            //     this.$saveToolData(this.current);
-            // },
-        },
-        data() {
-            return {
-                current: {
-                    source: "",
-                    target: "",
-                    type: "diffLines",
-                    operation: "input",
-                },
-                type: {
-                    "diffLines": "行",
-                    "diffWords": "单词",
-                    "diffCss": "css",
-                    "diffJson": "json",
-                    "diffArrays": "js数组(性能不好)",
-                    "diffChars": "字符(性能不好)",
+        inline(value){
+            this.$refs.editor.inline(!value)
+        }
+    },
+    watch: {
+        current:{
+            handler(newVal){
+                if (newVal.diff.original && newVal.diff.modified){
+                    this.$saveToolData(this.current);
                 }
+            },
+            deep:true
+        }
+    },
+    data() {
+        return {
+            current: {
+                diff: {original: "", modified: ""},
+                language: ""
             }
         }
     }
+}
 </script>
-<style>
-    .diff-block del {
-        text-decoration: none;
-        color: #b30000;
-        background: #fadad7;
-    }
-    .diff-block ins {
-        background: #eaf2c2;
-        color: #406619;
-        text-decoration: none;
-    }
-    .diff-block pre{
-        background: #f5f2f0;
-        padding: 1em;
-        margin: .5em 0;
-        overflow: auto;
-    }
-</style>
\ No newline at end of file