feat: 对比优化

components.d.ts

@@ -13,6 +13,7 @@ declare module 'vue' {
     NCard: typeof import('naive-ui')['NCard']
     NConfigProvider: typeof import('naive-ui')['NConfigProvider']
     NDropdown: typeof import('naive-ui')['NDropdown']
+    NEmpty: typeof import('naive-ui')['NEmpty']
     NInput: typeof import('naive-ui')['NInput']
     NLayout: typeof import('naive-ui')['NLayout']
     NLayoutContent: typeof import('naive-ui')['NLayoutContent']
@@ -21,6 +22,7 @@ declare module 'vue' {
     NMessageProvider: typeof import('naive-ui')['NMessageProvider']
     NModalProvider: typeof import('naive-ui')['NModalProvider']
     NSpace: typeof import('naive-ui')['NSpace']
+    NSpin: typeof import('naive-ui')['NSpin']
     NTree: typeof import('naive-ui')['NTree']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']

src/components/GlobalModal.vue

 <template>
     <n-modal v-bind="$attrs" v-model:show="showModal" :preset="preset" :type="type">
-        <template #title>
+        <template #header>
             <slot name="title"></slot>
         </template>
         <n-spin class="w-full h-full" content-class="w-full h-full" :show="loading" :description="description">

src/configs/render-elem.ts

@@ -9,7 +9,7 @@ const renderElem = (type: string, style = { display: 'block' }) => {
         const modifyType = (elem as any).modifyType
         Object.assign(style, {
             // @ts-ignore
-            paddingLeft: Number(elem.dataIndent) * 10 + 'px'
+            textIndent: Number(elem.dataIndent) * 10 + 'px'
         })
         return h(
             type,

src/views/editor/components/Compare.vue

@@ -2,11 +2,23 @@
     <GlobalModal
         v-model="showCompare"
         content-class="h-full overflow-hidden !p-0"
-        title="XML对比"
         style="width: 99vw; height: 99vh"
         preset="card"
         :showFooter="false"
     >
+        <template #title>
+            <div class="flex items-center justify-between">
+                <n-space>
+                    XML对比
+                    <n-button @click="uploadLeftXml">上传左边文件</n-button>
+                    <n-button @click="clearLeftXml">清除左边文件</n-button>
+                </n-space>
+                <n-space>
+                    <n-button @click="uploadRightXml">上传右边文件</n-button>
+                    <n-button @click="clearRightXml">清除右边文件</n-button>
+                </n-space>
+            </div>
+        </template>
         <div class="flex h-full relative" ref="compareContainerRef">
             <div class="choose-row bg-progressRailColor" ref="chooseRowRef"></div>
             <GlobalEditor
@@ -28,8 +40,26 @@
 </template>
 
 <script setup lang="ts">
-import { showCompare, compareLeftRef, compareRightRef, compareContainerRef, chooseRowRef, compareData } from '../constants/compare'
-import { handleScrollTopLeft, handleScrollTopRight } from '../functions/compare'
+import { contentHoldNode, nodeSet } from '@/configs/node.config'
+import {
+    showCompare,
+    compareLeftRef,
+    compareRightRef,
+    compareContainerRef,
+    chooseRowRef,
+    compareData,
+    compareLeftContent,
+    compareRightContent
+} from '../constants/compare'
+import { clearLeftXml, clearRightXml, handleScrollTopLeft, handleScrollTopRight, uploadLeftXml, uploadRightXml } from '../functions/compare'
+
+watchEffect(() => {
+    if (compareLeftContent.value && compareRightContent.value) {
+        const xmlProcessing = useXMLProcessing()
+        const res = xmlProcessing.dualCompareFromString(compareLeftContent.value, compareRightContent.value, nodeSet, contentHoldNode)
+        Object.assign(compareData, res)
+    }
+})
 </script>
 <style lang="less">
 [data-modify-type='removed'] {
@@ -39,8 +69,9 @@ import { handleScrollTopLeft, handleScrollTopRight } from '../functions/compare'
     background-color: var(--success-color-suppl);
 }
 [data-modify-type='placeholder'] {
-    visibility: hidden;
+    opacity: 0.1;
     background-color: var(--warning-color-suppl);
+    color: var(--warning-color-suppl);
 }
 [data-modify-type='null-blank'] {
     display: none !important;

src/views/editor/constants/compare.ts

@@ -3,6 +3,8 @@ export const compareLeftRef = ref()
 export const compareRightRef = ref()
 export const compareContainerRef = ref()
 export const chooseRowRef = ref()
+export const compareLeftContent = ref()
+export const compareRightContent = ref()
 export const compareData = reactive<{
     treeOld: string
     treeNew: string

src/views/editor/functions/compare.ts

-import { chooseRowRef, compareContainerRef, compareLeftRef, compareRightRef, showCompare } from '../constants/compare'
+import { contentHoldNode, nodeSet } from '@/configs/node.config'
+import {
+    chooseRowRef,
+    compareContainerRef,
+    compareData,
+    compareLeftContent,
+    compareLeftRef,
+    compareRightContent,
+    compareRightRef,
+    showCompare
+} from '../constants/compare'
 
 export const handleClickDom = (event: any) => {
     if (!showCompare.value) return
@@ -20,3 +30,49 @@ export const handleScrollTopRight = (event: Event) => {
     compareLeftRef.value?.handleScrollTop(scrollTop)
     chooseRowRef.value.style.height = '0px'
 }
+export const uploadLeftXml = async () => {
+    const input = document.createElement('input')
+    input.type = 'file'
+    input.accept = 'application/xml,text/xml'
+    input.multiple = false
+    input.click()
+    input.addEventListener('change', async (event: Event) => {
+        const files = (event.target as HTMLInputElement).files
+        if (files && files.length > 0) {
+            const file = files[0]
+            const xmlProcessing = useXMLProcessing()
+            const res = await xmlProcessing.processFile(file, nodeSet, contentHoldNode)
+            compareLeftContent.value = res.xmlContent
+            compareData.treeOld = res.xmlContent
+        }
+        input.remove()
+    })
+}
+export const uploadRightXml = async () => {
+    const input = document.createElement('input')
+    input.type = 'file'
+    input.accept = 'application/xml,text/xml'
+    input.multiple = false
+    input.click()
+    input.addEventListener('change', async (event: Event) => {
+        const files = (event.target as HTMLInputElement).files
+        if (files && files.length > 0) {
+            const file = files[0]
+            const xmlProcessing = useXMLProcessing()
+            const res = await xmlProcessing.processFile(file, nodeSet, contentHoldNode)
+            compareRightContent.value = res.xmlContent
+            compareData.treeNew = res.xmlContent
+        }
+        input.remove()
+    })
+}
+export const clearLeftXml = () => {
+    compareData.treeNew = compareRightContent.value
+    compareLeftContent.value = ''
+    compareData.treeOld = ''
+}
+export const clearRightXml = () => {
+    compareData.treeOld = compareLeftContent.value
+    compareRightContent.value = ''
+    compareData.treeNew = ''
+}

src/views/editor/functions/index.ts

@@ -3,11 +3,10 @@ import { IDomEditor } from '@wangeditor/editor'
 import { treeData, treeRef, treeSelectedKeys } from '../constants/tree'
 import { dropdownConfig, editorRef, editorHtml } from '../constants'
 import { getUUID } from '@/utils'
-import { compareData, showCompare } from '../constants/compare'
+import { compareData, compareLeftContent, compareRightContent, showCompare } from '../constants/compare'
 import TextA from '@/assets/file/CES-QEC-V250-A.xml?raw'
 import TextB from '@/assets/file/Trans-Convert.xml?raw'
 import { nodeSet, contentHoldNode } from '@/configs/node.config'
-import { handleLeftDifferent, handleRightDifferent } from './compare'
 
 export const handleCreated = (editor: IDomEditor) => {
     editorRef.value = editor
@@ -99,11 +98,8 @@ export const uploadXml = async () => {
 //xml对比
 export const compareXml = () => {
     showCompare.value = true
-    const xmlProcessing = useXMLProcessing()
-    const res = xmlProcessing.dualCompareFromString(TextA, TextB, nodeSet, contentHoldNode)
-    console.log(res)
-    Object.assign(compareData, res)
-    //比较数据
-    // handleLeftDifferent()
-    // handleRightDifferent()
+    compareData.treeOld = ''
+    compareData.treeNew = ''
+    compareLeftContent.value = ''
+    compareRightContent.value = ''
 }

src/views/editor/index.vue

@@ -6,7 +6,7 @@
                 <Toolbar :editor="editorRef" editorId="wangeEditor-1" class="border-b border-solid border-borderColor" />
             </div>
             <n-space class="bg-baseColor">
-                <n-button @click="uploadXml" class="h-full" type="error">上传XML</n-button>
+                <n-button @click="uploadXml" class="h-full">上传XML</n-button>
                 <n-button @click="compareXml" class="h-full">XML对比</n-button>
             </n-space>
         </div>