优化diff工具

package.json

 {
     "name": "c-tool",
-    "version": "1.10.0",
+    "version": "1.10.1",
     "private": true,
     "scripts": {
         "serve": "vue-cli-service serve --port 8081",

src/i18n/locales/en/diffs.i18n.json5

 {
     "more": "More Languages",
-    "collapse":"Collapse Identical"
+    "collapse":"Collapse Identical",
+    "beautify":"Beautify"
 }

src/i18n/locales/zh_CN/diffs.i18n.json5

 {
     "more": "更多语言",
-    "collapse":"折叠相同"
+    "collapse":"折叠相同",
+    "beautify":"格式化"
 }

src/views/tool/code.vue

@@ -52,6 +52,13 @@ export default {
             return data
         }
     },
+    watch:{
+        "current.isCompress"(){
+            if (this.current.lang){
+                this.handle(this.current.lang)
+            }
+        }
+    },
     created() {
         this.$initToolData('content')
     },
@@ -77,6 +84,12 @@ export default {
                 }
             }
         },
+        isCompressChange(value){
+            if (this.current.lang){
+                console.log(value)
+                this.handle(this.current.lang)
+            }
+        }
     },
     data() {
         return {

src/views/tool/components/diffEditor.vue

 <template>
-    <div ref="container" class="diff-editor" :style="`height:${containerHeight};width:${width}`"></div>
+    <div ref="container" class="diff-editor" :style="`height:${height};width:${width}`"></div>
 </template>
 <script>
-import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
+import {createMerge} from "../library/editor";
 
 export default {
     name: 'diffEditor',
@@ -14,21 +14,13 @@ export default {
             type: String,
             default: ""
         },
-        autoHeight: {
-            type: Number,
-            default: 0
-        },
-        theme: {
-            type: String,
-            default: 'vs'
-        },
-        roundedSelection: {
+        collapse: {
             type: Boolean,
-            default: true
+            default: false
         },
         height: {
             type: String,
-            default: "350px"
+            default: "100%"
         },
         width: {
             type: String,
@@ -37,83 +29,54 @@ export default {
 
     },
     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'])
-            }
+        value:{
+            handler(){
+                this.reset()
+            },
+            deep: true
         },
         language(newValue) {
             if (this.editor !== null) {
-                monaco.editor.setModelLanguage(this.editor.getOriginalEditor().getModel(), newValue)
-                monaco.editor.setModelLanguage(this.editor.getModifiedEditor().getModel(), newValue)
+                this.editor.customSetEditorLanguage(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
+        collapse() {
+            this.reset()
         }
     },
     mounted() {
-        this.initEditor()
+        this.reset()
     },
     data() {
         return {
             editor: null,
-            original: null,
-            modified: null,
-            containerHeight: ""
         }
     },
     methods: {
+        reset() {
+            this.$refs.container.innerHTML = "";
+            this.initEditor();
+        },
         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.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.$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>
-        <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>
+        <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>
+        </heightResize>
+        <option-block class="page-option-block">
             <FormItem>
                 <ButtonGroup>
                     <Button
-                        :type="current.language !== item.id ? 'primary' : 'warning'"
-                        @click="setLanguage(item.id)"
+                        :type="current.language !== item ? 'primary' : 'warning'"
+                        @click="setLanguage(item)"
                         v-for="item in buttonLang"
-                        :key="item.id"
-                    >{{ item.name }}
+                        :key="item"
+                    >{{ item }}
                     </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 :placeholder="$t('diffs_more')" @on-change="(value)=>{setLanguage(value)}">
+                    <Option v-for="item in allLang" :value="item" :key="item">{{ item }}</Option>
                 </Select>
             </FormItem>
             <FormItem>
-                <Checkbox @on-change="(value)=>inline(value)">行内对比</Checkbox>
+                <Button type="primary" size="small" @click="format">{{ $t('diffs_beautify') }}</Button>
+            </FormItem>
+            <FormItem>
+                <Checkbox v-model="current.collapse">{{ $t('diffs_collapse') }}</Checkbox>
             </FormItem>
         </option-block>
     </div>
 </template>
 <script>
 import diffEditor from "./components/diffEditor";
-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]
-    }
-}
+import {allLang} from "./library/editor";
+import _ from "lodash";
+import heightResize from "./components/heightResize";
+import {format} from "./library/formatter";
 
 const COMMON_LANG = [
-    "plaintext",
-    "javascript",
+    "text",
     "html",
+    "js",
     "css",
     "json",
     "python",
@@ -52,47 +53,52 @@ const COMMON_LANG = [
 export default {
     components: {
         diffEditor,
+        heightResize
     },
     computed: {
         allLang() {
-            return Object.values(allLang)
+            return allLang
         },
         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])
+            let data = _.cloneDeep(COMMON_LANG);
+            if (this.current.language && !data.includes(this.current.language)) {
+                data.push(this.current.language)
             }
             return data;
         }
     },
     created() {
-        this.current = Object.assign(this.current, this.$getToolData())
+        this.$initToolData()
     },
     methods: {
         setLanguage(lang) {
             this.current.language = lang;
         },
-        inline(value){
-            this.$refs.editor.inline(!value)
+        format() {
+            try{
+                this.current.diff.original = format(this.current.diff.original,this.current.language)
+                this.current.diff.modified = format(this.current.diff.modified,this.current.language)
+            } catch (e) {
+                this.$Message.error(e.message)
+            }
         }
     },
     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: ""
+                language: "text",
+                collapse: false
             }
         }
     }

src/views/tool/library/formatter/index.js

@@ -34,14 +34,10 @@ const methods = {
 
 // 代码格式化
 export const format = (code, lang, isCompress = false, options = {}) => {
-    if (!(lang in methods)){
-        throw new Error(`${lang} not support`);
-    }
     let method = isCompress ? "compress" : "beautify";
-    if (!(method in methods[lang])){
-        throw new Error(`${lang} not support ${method}`);
+    if (!(lang in methods) || !(method in methods[lang])){
+        throw new Error(`lang:"${lang}" not support ${method}`);
     }
-
     return methods[lang][method](code,options)
 };