diff 重构

c180922f · baiy · ninecents · 6fd03f8e · c180922f · c180922f
4 changed file
--- a/package-lock.json
+++ b/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",

--- a/package.json
+++ b/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",

--- a/src/views/tool/components/diffEditor.vue
+++ b/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() {
+        value(newValue) {
-            this.reset()
+            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)
+            }
+        },
+        theme(newValue) {
+            if (this.editor !== null) {
+                monaco.editor.setTheme(newValue)
+            }
        }
    },
-        collapse() {
+    created() {
-            this.reset()
+        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.$refs.container.innerHTML = ''
-            this.editor.customChange((original, modified) => {
+            this.editor = monaco.editor.createDiffEditor(this.$refs.container, {
-                if (original !== this.value.original || modified !== this.value.modified) {
+                theme: this.theme,
-                    this.value.original = original
+                roundedSelection: this.roundedSelection,
-                    this.value.modified = modified
+                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>
--- a/src/views/tool/diffs.vue
+++ b/src/views/tool/diffs.vue
 <template>
    <div>
-        <heightResize :append="['.page-option-block']">
+        <div style="border: 1px solid #dcdee2; border-radius: 4px">
-        <div style="border: 1px solid #dcdee2; border-radius: 4px;height: 100%;">
+            <diffEditor ref="editor" v-model="current.diff" :language="current.language" :auto-height="220" />
-            <diff-editor ref="editor" :collapse="current.collapse" v-model="current.diff" :language="current.language" />
        </div>
-        </heightResize>
+        <option-block>
-        <option-block class="page-option-block">
            <FormItem>
                <ButtonGroup>
                    <Button
-                        :type="current.language !== item ? 'primary' : 'warning'"
+                        :type="current.language !== item.id ? 'primary' : 'warning'"
-                        @click="setLanguage(item)"
+                        @click="setLanguage(item.id)"
                        v-for="item in buttonLang"
-                        :key="item"
+                        :key="item.id"
-                    >{{ item }}
+                    >{{ item.name }}
                    </Button>
                </ButtonGroup>
            </FormItem>
            <FormItem>
-                <Select :placeholder="$t('diffs_more')" @on-change="(value)=>{setLanguage(value)}">
+                <Select placeholder="更多语言" @on-change="(value)=>{setLanguage(value)}">
-                    <Option v-for="item in allLang" :value="item" :key="item">{{ item }}</Option>
+                    <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 * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
-import _ from "lodash";
-import heightResize from "./components/heightResize";
+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);
+            let data = COMMON_LANG.map((item) => {
-            if (this.current.language && !data.includes(this.current.language)) {
+                return allLang[item]
-                data.push(this.current.language)
+            });
+            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: {
+        current:{
-            handler(newVal) {
+            handler(newVal){
-                if (newVal.diff.original && newVal.diff.modified) {
+                if (newVal.diff.original && newVal.diff.modified){
                    this.$saveToolData(this.current);
                }
            },
-            deep: true
+            deep:true
        }
    },
    data() {
        return {
            current: {
                diff: {original: "", modified: ""},
-                language: "text",
+                language: ""
-                collapse: false
            }
        }
    }