feat: 对比逻辑修改

components.d.ts

@@ -20,6 +20,7 @@ declare module 'vue' {
     NLayoutHeader: typeof import('naive-ui')['NLayoutHeader']
     NMessageProvider: typeof import('naive-ui')['NMessageProvider']
     NModalProvider: typeof import('naive-ui')['NModalProvider']
+    NResult: typeof import('naive-ui')['NResult']
     NSpace: typeof import('naive-ui')['NSpace']
     NTree: typeof import('naive-ui')['NTree']
     RouterLink: typeof import('vue-router')['RouterLink']

src/assets/file/Trans-Convert.xml

@@ -2,14 +2,14 @@
 <!--Arbortext, Inc., 1988-2013, v.4002-->
 <!DOCTYPE JOBCARD PUBLIC "-//CEA-TEXT//DTD JOBCARD-VER1//EN" "JOBCARD.dtd" [
         <!ENTITY nbsp "&#160;">
-        <!ENTITY rsquo "&#8217;">
+<!ENTITY rsquo "&#8217;">
         ]>
 <JOBCARD>
     <EOTK-HEADER></EOTK-HEADER>
     <CEP>
         <EFFECT EFFRG="001999"></EFFECT>
         <TITLEC>发动机QEC拆卸（V2500-A5系列）</TITLEC>
-        <TITLE>Remove the Engine's QEC(V2500-A5 series)XXX</TITLE>
+        <TITLE>Remove the Engine's QEC(V2500-A5 series) 测试修改</TITLE>
         <TOPIC CK-LEVEL="C">
             <TITLEC>飞机/发动机基本信息</TITLEC>
             <TITLE>AIRCRAFT/ENGINE INFORMATION</TITLE>

src/configs/render-elem.ts

 import { h, VNode } from 'snabbdom'
 import { IDomEditor, IModuleConf, SlateElement } from '@wangeditor/editor'
 import { nodeSet } from '@/configs/node.config'
-import { handleMouseEnter, handleMouseLeave } from '@/views/editor/functions/compare'
+import { handleClickDom } from '@/views/editor/functions/compare'
 
 const renderElem = (type: string, style = { display: 'block' }) => {
     return (elem: SlateElement, children: VNode[] | null, editor: IDomEditor): VNode => {
@@ -16,12 +16,9 @@ const renderElem = (type: string, style = { display: 'block' }) => {
                 style,
                 attrs: { 'data-key': dataKey },
                 on: {
-                    mouseenter(event: Event) {
-                        handleMouseEnter(event)
+                    click(event: Event) {
+                        handleClickDom(event)
                     },
-                    mouseleave() {
-                        handleMouseLeave()
-                    }
                 }
             },
             children

src/views/editor/components/Compare.vue

@@ -7,7 +7,8 @@
         preset="card"
         :showFooter="false"
     >
-        <div class="flex h-full" ref="compareContainerRef">
+        <div class="flex h-full relative" ref="compareContainerRef">
+            <div class="choose-row bg-progressRailColor" ref="chooseRowRef"></div>
             <GlobalEditor
                 ref="compareLeftRef"
                 v-model="compareLeftData"
@@ -27,7 +28,22 @@
 </template>
 
 <script setup lang="ts">
-import { showCompare, compareLeftRef, compareRightRef, compareLeftData, compareRightData, compareContainerRef } from '../constants/compare'
+import {
+    showCompare,
+    compareLeftRef,
+    compareRightRef,
+    compareLeftData,
+    compareRightData,
+    compareContainerRef,
+    chooseRowRef
+} from '../constants/compare'
 import { handleScrollTopLeft, handleScrollTopRight } from '../functions/compare'
 </script>
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.choose-row {
+    width: 100%;
+    position: absolute;
+    z-index: 99;
+    opacity: 0.6;
+}
+</style>

src/views/editor/constants/compare.ts

@@ -4,3 +4,4 @@ export const compareRightRef = ref()
 export const compareLeftData = ref('')
 export const compareRightData = ref('')
 export const compareContainerRef = ref()
+export const chooseRowRef = ref()

src/views/editor/functions/compare.ts

 import { NewTreeModification, OldTreeModification, TreeRenderResult } from '@/lib/XMLProcessor/src/typing'
-import { compareContainerRef, compareLeftRef, compareRightRef, showCompare } from '../constants/compare'
-import { debounce } from 'lodash'
+import { chooseRowRef, compareContainerRef, compareLeftRef, compareRightRef, showCompare } from '../constants/compare'
+import { uniqBy } from 'lodash'
 
-export const handleMouseEnter = debounce((event: any) => {
+export const handleClickDom = (event: any) => {
     if (!showCompare.value) return
-    const width = compareContainerRef.value?.clientWidth
-    const x = event.clientX
-    const y = event.clientY
-    const element1 = document.elementFromPoint(x, y)
-    const element2 = document.elementFromPoint(width - x, y)
-    element1?.classList.add('bg-progressRailColor')
-    element2?.classList.add('bg-progressRailColor')
-}, 250)
-export const handleMouseLeave = () => {
-    if (!showCompare.value) return
-    const elements = document.querySelectorAll('.bg-progressRailColor')
-    elements.forEach((element) => {
-        element.classList.remove('bg-progressRailColor')
-    })
+    const element = event.target
+    const container = compareContainerRef.value
+    const elementRect = element.getBoundingClientRect()
+    const containerRect = container.getBoundingClientRect()
+    const distance = elementRect.top - containerRect.top
+    chooseRowRef.value.style.top = distance + 'px'
+    chooseRowRef.value.style.height = event.target.offsetHeight + 'px'
 }
 export const handleScrollTopLeft = (event: Event) => {
     const scrollTop = (event.target as HTMLInputElement).scrollTop
     compareRightRef.value?.handleScrollTop(scrollTop)
+    chooseRowRef.value.style.height = '0px'
 }
 export const handleScrollTopRight = (event: Event) => {
     const scrollTop = (event.target as HTMLInputElement).scrollTop
     compareLeftRef.value?.handleScrollTop(scrollTop)
+    chooseRowRef.value.style.height = '0px'
 }
 export const handleLeftDifferent = (dataForOld: OldTreeModification, treeNew: TreeRenderResult[]) => {
     nextTick(() => {
         const containerLeft = compareLeftRef.value?.editorRef.getEditableContainer()
         const containerRight = compareRightRef.value?.editorRef.getEditableContainer()
         //新增
-        dataForOld.Deleted.map((item) => {
+        uniqBy(dataForOld.Deleted, 'key').map((item: any) => {
             const node = containerLeft!.querySelector(`[data-key="${item.key}"]`)
-            if (node.childNodes.length == 1 && node.childNodes[0].nodeName == 'SPAN') {
-                //处理左边
-                node.classList.add('bg-errorColorSuppl')
-                //处理右边
-                const parentPath = item.chained.slice(0, item.chained.length - 1)
-                const index = item.chained[item.chained.length - 1]
-                const parentData = findNodeByChained(treeNew, parentPath)
-                const parentNode = containerRight!.querySelector(`[data-key="${parentData?.key}"]`)
-                // 创建一个新节点
-                const newDiv = document.createElement('div')
-                newDiv.style.height = `${node.offsetHeight}px`
-                newDiv.classList.add('bg-dividerColor')
-                parentNode && parentNode.insertBefore(newDiv, parentNode.childNodes[index])
-            }
+            //处理左边
+            node.classList.add('bg-errorColorSuppl')
+            //处理右边
+            const parentPath = item.chained.slice(0, item.chained.length - 1)
+            const index = item.chained[item.chained.length - 1]
+            const parentData = findNodeByChained(treeNew, parentPath)
+            const parentNode = containerRight!.querySelector(`[data-key="${parentData?.key}"]`)
+            // 创建一个新节点
+            const newDiv = document.createElement('div')
+            newDiv.style.height = `${node.offsetHeight}px`
+            newDiv.classList.add('bg-dividerColor')
+            parentNode && parentNode.insertBefore(newDiv, parentNode.childNodes[index])
         })
         //修改
         dataForOld.Changed.map((item) => {
@@ -63,22 +56,20 @@ export const handleRightDifferent = (dataForNew: NewTreeModification, treeOld: T
         const containerLeft = compareLeftRef.value?.editorRef.getEditableContainer()
         const containerRight = compareRightRef.value?.editorRef.getEditableContainer()
         //新增
-        dataForNew.Added.map((item: any) => {
+        uniqBy(dataForNew.Added, 'key').map((item: any) => {
             const node = containerRight!.querySelector(`[data-key="${item.key}"]`)
-            if (node.childNodes.length == 1 && node.childNodes[0].nodeName == 'SPAN') {
-                //处理右边
-                node.classList.add('bg-errorColorSuppl')
-                //处理左边
-                const parentPath = item.chained.slice(0, item.chained.length - 1)
-                const index = item.chained[item.chained.length - 1]
-                const parentData = findNodeByChained(treeOld, parentPath)
-                const parentNode = containerLeft!.querySelector(`[data-key="${parentData?.key}"]`)
-                // 创建一个新节点
-                const newDiv = document.createElement('div')
-                newDiv.style.height = `${node.offsetHeight}px`
-                newDiv.classList.add('bg-dividerColor')
-                parentNode && parentNode.insertBefore(newDiv, parentNode.childNodes[index])
-            }
+            //处理右边
+            node.classList.add('bg-errorColorSuppl')
+            //处理左边
+            const parentPath = item.chained.slice(0, item.chained.length - 1)
+            const index = item.chained[item.chained.length - 1]
+            const parentData = findNodeByChained(treeOld, parentPath)
+            const parentNode = containerLeft!.querySelector(`[data-key="${parentData?.key}"]`)
+            // 创建一个新节点
+            const newDiv = document.createElement('div')
+            newDiv.style.height = `${node.offsetHeight}px`
+            newDiv.classList.add('bg-dividerColor')
+            parentNode && parentNode.insertBefore(newDiv, parentNode.childNodes[index])
         })
         //修改
         dataForNew.Changed.map((item: any) => {