Merge remote-tracking branch 'origin/master'

components.d.ts

@@ -12,6 +12,7 @@ declare module 'vue' {
     NButton: typeof import('naive-ui')['NButton']
     NCard: typeof import('naive-ui')['NCard']
     NConfigProvider: typeof import('naive-ui')['NConfigProvider']
+    NDataTable: typeof import('naive-ui')['NDataTable']
     NDropdown: typeof import('naive-ui')['NDropdown']
     NInput: typeof import('naive-ui')['NInput']
     NLayout: typeof import('naive-ui')['NLayout']

src/views/editor/components/Compare.vue

@@ -33,13 +33,14 @@ import { handleScrollTopLeft, handleScrollTopRight } from '../functions/compare'
 </script>
 <style lang="less">
 [data-modify-type='removed'] {
-    background-color: red;
+    background-color: var(--error-color-suppl);
 }
 [data-modify-type='added'] {
-    background-color: blue;
+    background-color: var(--success-color-suppl);
 }
 [data-modify-type='placeholder'] {
     visibility: hidden;
+    background-color: var(--warning-color-suppl);
 }
 </style>
 <style lang="less" scoped>

src/views/editor/constants/compare.ts

-import { NewTreeModification, OldTreeModification, TreeRenderResult } from '@/lib/XMLProcessor/src/typing'
-
 export const showCompare = ref(false)
 export const compareLeftRef = ref()
 export const compareRightRef = ref()
 export const compareContainerRef = ref()
 export const chooseRowRef = ref()
 export const compareData = reactive<{
-    dataForNew: NewTreeModification
-    dataForOld: OldTreeModification
-    domOld: Document
-    domNew: Document
-    treeOld: TreeRenderResult[]
-    treeNew: TreeRenderResult[]
-    xmlContentOld: string
-    xmlContentNew: string
+    treeOld: string
+    treeNew: string
 }>({
-    dataForNew: { Added: [] },
-    dataForOld: { Deleted: [] },
-    domOld: null as any,
-    domNew: null as any,
-    treeOld: [],
-    treeNew: [],
-    xmlContentOld: '',
-    xmlContentNew: ''
+    treeOld: '',
+    treeNew: ''
 })

src/views/editor/functions/compare.ts

-import { TreeRenderResult } from '@/lib/XMLProcessor/src/typing'
-import { chooseRowRef, compareContainerRef, compareData, compareLeftRef, compareRightRef, showCompare } from '../constants/compare'
-import { uniqBy } from 'lodash'
+import { chooseRowRef, compareContainerRef, compareLeftRef, compareRightRef, showCompare } from '../constants/compare'
 
 export const handleClickDom = (event: any) => {
     if (!showCompare.value) return
@@ -22,113 +20,3 @@ export const handleScrollTopRight = (event: Event) => {
     compareLeftRef.value?.handleScrollTop(scrollTop)
     chooseRowRef.value.style.height = '0px'
 }
-export const handleLeftDifferent = () => {
-    nextTick(() => {
-        const containerLeft = compareLeftRef.value?.editorRef.getEditableContainer()
-        const containerRight = compareRightRef.value?.editorRef.getEditableContainer()
-        const Added = compareData.dataForNew.Added.map((item) => compareNodeAllParent(compareData.treeNew, item.key))
-        uniqBy(compareData.dataForOld.Deleted, 'key').map((item: any) => {
-            debugger
-            const allParent = compareNodeAllParent(compareData.treeOld, item.key)
-            const node = containerLeft!.querySelector(`[data-key="${item.key}"]`)
-            const parentPath = item.chained.slice(0, item.chained.length - 1)
-            const index = item.chained[item.chained.length - 1]
-            const parentData = findNodeByChained(compareData.treeNew, parentPath)
-            const parentNode = containerRight!.querySelector(`[data-key="${parentData?.key}"]`)
-            if (Added.some((item) => JSON.stringify(item) === JSON.stringify(allParent))) {
-                //修改
-                const node = containerLeft!.querySelector(`[data-key="${item.key}"]`)
-                if (node.childNodes.length == 1 && node.childNodes[0].nodeName == 'SPAN') {
-                    node.classList.add('bg-warningColorSuppl')
-                }
-            } else {
-                //处理左边
-                node.classList.add('bg-errorColorSuppl')
-                //处理右边
-                const newDiv = document.createElement('div')
-                newDiv.style.height = `${node.offsetHeight}px`
-                newDiv.classList.add('bg-dividerColor')
-                parentNode && parentNode.insertBefore(newDiv, parentNode.childNodes[index])
-            }
-        })
-    })
-}
-export const handleRightDifferent = () => {
-    nextTick(() => {
-        const containerLeft = compareLeftRef.value?.editorRef.getEditableContainer()
-        const containerRight = compareRightRef.value?.editorRef.getEditableContainer()
-        const Deleted = compareData.dataForOld.Deleted.map((item) => compareNodeAllParent(compareData.treeOld, item.key))
-        uniqBy(compareData.dataForNew.Added, 'key').map((item) => {
-            const allParent = compareNodeAllParent(compareData.treeNew, item.key)
-            const node = containerRight!.querySelector(`[data-key="${item.key}"]`)
-            const parentPath = item.chained.slice(0, item.chained.length - 1)
-            const index = item.chained[item.chained.length - 1]
-            const parentData = findNodeByChained(compareData.treeOld, parentPath)
-            const parentNode = containerLeft!.querySelector(`[data-key="${parentData?.key}"]`)
-            if (Deleted.some((item) => JSON.stringify(item) === JSON.stringify(allParent))) {
-                //修改
-                const node = containerRight!.querySelector(`[data-key="${item.key}"]`)
-                if (node.childNodes.length == 1 && node.childNodes[0].nodeName == 'SPAN') {
-                    node.classList.add('bg-warningColorSuppl')
-                }
-            } else {
-                //新增
-                //处理右边
-                node.classList.add('bg-errorColorSuppl')
-                //处理左边
-                const newDiv = document.createElement('div')
-                newDiv.style.height = `${node.offsetHeight}px`
-                newDiv.classList.add('bg-dividerColor')
-                parentNode && parentNode.insertBefore(newDiv, parentNode.childNodes[index])
-            }
-        })
-    })
-}
-
-export const findNodeByChained = (data: TreeRenderResult[], targetChained: number[]): TreeRenderResult | null => {
-    const dfs = (currentNode: TreeRenderResult): TreeRenderResult | null => {
-        if (Array.isArray(currentNode.chained) && currentNode.chained.length === targetChained.length) {
-            const isMatch = currentNode.chained.every((value, index) => value === targetChained[index])
-            if (isMatch) {
-                return currentNode // 找到目标节点
-            }
-        }
-        if (currentNode.children && currentNode.children.length > 0) {
-            for (const child of currentNode.children) {
-                const result = dfs(child)
-                if (result !== null) {
-                    return result
-                }
-            }
-        }
-        return null // 当前节点及其子节点中没有找到目标节点
-    }
-    if (!Array.isArray(data) || data.length === 0) {
-        return null // 数据无效
-    }
-    for (const node of data) {
-        const result = dfs(node)
-        if (result !== null) {
-            return result
-        }
-    }
-    return null // 没有找到目标节点
-}
-//根据节点的key获取所有父节点的集合
-export const compareNodeAllParent = (root: TreeRenderResult[], key: string) => {
-    function traverse(node: TreeRenderResult, currentPath: string[]): string[] | null {
-        currentPath.push(node.label)
-        if (node.key === key) {
-            return [...currentPath]
-        }
-        if (node.children) {
-            for (const child of node.children) {
-                const result = traverse(child, [...currentPath])
-                if (result) return result
-            }
-        }
-        return null
-    }
-    const result = traverse(root[0], [])
-    return result || []
-}