feat: 修改对比问题

src/assets/file/Trans-Convert.xml

@@ -2,7 +2,7 @@
 <!--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>
@@ -17,15 +17,15 @@
             <TITLE>AIRCRAFT/ENGINE INFORMATION</TITLE>
             <STEP CK-LEVEL="C">
                 <EFFECT EFFRG="001999"></EFFECT>
-<!--                <RECORD-LINE>-->
-<!--                    <PARAC>发动机序号</PARAC>-->
-<!--                    <PARA>Engine SN</PARA>-->
-<!--                    <RECORD></RECORD>-->
-<!--                </RECORD-LINE>-->
-<!--                <NOTE>-->
-<!--                    <PARAC>开始工作前请记录。</PARAC>-->
-<!--                    <PARA>Please record before starting work.</PARA>-->
-<!--                </NOTE>-->
+                <RECORD-LINE>
+                    <PARAC>发动机序号</PARAC>
+                    <PARA>Engine SN</PARA>
+                    <RECORD></RECORD>
+                </RECORD-LINE>
+                <NOTE>
+                    <PARAC>开始工作前请记录。</PARAC>
+                    <PARA>Please record before starting work.</PARA>
+                </NOTE>
                 <SIGNOFF/>
             </STEP>
         </TOPIC>

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 { debounce } from 'lodash'
 
 const renderElem = (type: string, style = { display: 'block' }) => {
     return (elem: SlateElement, children: VNode[] | null, editor: IDomEditor): VNode => {
@@ -9,7 +11,22 @@ const renderElem = (type: string, style = { display: 'block' }) => {
             // @ts-ignore
             textIndent: Number(elem.dataIndent) * 5 + 'px'
         })
-        return h(type, { style, attrs: { 'data-key': dataKey } }, children)
+        return h(
+            type,
+            {
+                style,
+                attrs: { 'data-key': dataKey },
+                on: {
+                    mouseenter(event: Event) {
+                        handleMouseEnter(event)
+                    },
+                    mouseleave() {
+                        handleMouseLeave()
+                    }
+                }
+            },
+            children
+        )
     }
 }
 const createRenderConfig = (types: string | string[]) => {

src/views/editor/components/Compare.vue

@@ -7,7 +7,7 @@
         preset="card"
         :showFooter="false"
     >
-        <div class="flex h-full">
+        <div class="flex h-full" ref="compareContainerRef">
             <GlobalEditor
                 ref="compareLeftRef"
                 v-model="compareLeftData"
@@ -27,7 +27,7 @@
 </template>
 
 <script setup lang="ts">
-import { showCompare, compareLeftRef, compareRightRef, compareLeftData, compareRightData } from '../constants/compare'
+import { showCompare, compareLeftRef, compareRightRef, compareLeftData, compareRightData, compareContainerRef } from '../constants/compare'
 import { handleScrollTopLeft, handleScrollTopRight } from '../functions/compare'
 </script>
 <style lang="less" scoped></style>

src/views/editor/constants/compare.ts

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

src/views/editor/constants/index.ts

-import { NewTreeModification, OldTreeModification, TreeRenderResult } from '@/lib/XMLProcessor/src/typing'
 import { ArrowLeft24Filled, ArrowRight24Filled, Book20Filled, TableInsertColumn24Filled } from '@vicons/fluent'
 import { IDomEditor } from '@wangeditor/editor'
 
-export interface compareResult {
-    dataForNew: NewTreeModification
-    dataForOld: OldTreeModification
-    domOld: Document
-    domNew: Document
-    treeOld: TreeRenderResult[]
-    treeNew: TreeRenderResult[]
-    xmlContentOld: string
-    xmlContentNew: string
-}
 export const showLoading = ref(false)
 //编辑器相关配置
 export const editorRef = shallowRef<IDomEditor>()

src/views/editor/functions/compare.ts

 import { NewTreeModification, OldTreeModification, TreeRenderResult } from '@/lib/XMLProcessor/src/typing'
-import { compareLeftRef, compareRightRef } from '../constants/compare'
+import { compareContainerRef, compareLeftRef, compareRightRef } from '../constants/compare'
+import { debounce } from 'lodash'
 
+export const handleMouseEnter = debounce((event: any) => {
+    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')
+}, 200)
+export const handleMouseLeave = () => {
+    const elements = document.querySelectorAll('.bg-progressRailColor')
+    elements.forEach((element) => {
+        element.classList.remove('bg-progressRailColor')
+    })
+}
 export const handleScrollTopLeft = (event: Event) => {
     const scrollTop = (event.target as HTMLInputElement).scrollTop
     compareRightRef.value?.handleScrollTop(scrollTop)