feat(compareModal): 添加并显示比对内容变更数量

- 在CompareModal组件中增加了新增、删除和修改内容数量的显示
- 实现diffCounts计算属性统计新增、删除和修改的节点及文本项
- 优化xmlParser中state.currentLine递增逻辑，支持compact模式
- 在比对视图点击事件中添加调试日志输出来辅助排查问题
- 从StashModal中移除预览效果按钮，简化UI界面

src/utils/xmlParser.ts

@@ -222,17 +222,23 @@ export function serializeTreeToXmlWithMapping(
     }
 
     // 纯元素子节点
+    if (!compact) {
         state.currentLine++
+    }
     const childrenParts: string[] = []
     for (let i = 0; i < node.children.length; i++) {
         const child = node.children[i]
         const res = serializeTreeToXmlWithMapping(child, indent + 1, compact, state, mapping)
         childrenParts.push(res.xml)
         if (i < node.children.length - 1) {
+            if (!compact) {
                 state.currentLine++
             }
         }
+    }
+    if (!compact) {
         state.currentLine++
+    }
 
     const childrenXml = childrenParts.join(newline)
     xml = `${pad}<${openTag}>${newline}${childrenXml}${newline}${pad}</${node.tagName}>`

src/views/editor/components/EditorToolbar/components/CompareModal/functionals/index.ts

-import { openUploadModal } from '@/utils/render'
-import { ref, computed, nextTick, watch, onBeforeUnmount } from 'vue'
 import * as Diff from 'diff'
-import { parseXmlToTree, serializeTreeToXml, serializeTreeToXmlWithMapping } from '@/utils/xmlParser'
 import { useEditorStore } from '@/store/editor'
 import type { XmlNode, MixedContentItem } from '@/types/xmlNode'
 import type { DiffStatusType, ScrollSide, RenderDiffHunk, XmlDiffHunk } from '../constants'
@@ -376,6 +373,86 @@ export function useCompareModal() {
     // 比对控制
     const compared = ref(false)
     const comparing = ref(false) // 比对进行中（加载状态）
+
+    const diffCounts = computed(() => {
+        let added = 0
+        let removed = 0
+        let modified = 0
+
+        if (!compared.value) {
+            return { added, removed, modified }
+        }
+
+        // Traverse old tree for removed and modified
+        const visitOld = (node: XmlNode) => {
+            if (!node) return
+
+            if (node.diffStatus === 'removed') {
+                removed++
+                return // Do not recurse into children of removed node
+            }
+
+            if (node.diffStatus === 'modified') {
+                modified++
+                // Recurse into children of modified node
+            }
+
+            // Check mixedContent text items ONLY if the node itself is not modified/removed/added
+            if (node.diffStatus === 'none' && node.mixedContent) {
+                for (const item of node.mixedContent) {
+                    if (item.type === 'text') {
+                        if (item.diffStatus === 'removed') {
+                            removed++
+                        } else if (item.diffStatus === 'modified') {
+                            modified++
+                        }
+                    }
+                }
+            }
+
+            if (node.children) {
+                for (const child of node.children) {
+                    visitOld(child)
+                }
+            }
+        }
+
+        // Traverse new tree for added
+        const visitNew = (node: XmlNode) => {
+            if (!node) return
+
+            if (node.diffStatus === 'added') {
+                added++
+                return // Do not recurse into children of added node
+            }
+
+            // Check mixedContent text items ONLY if the node itself is not modified/removed/added
+            if (node.diffStatus === 'none' && node.mixedContent) {
+                for (const item of node.mixedContent) {
+                    if (item.type === 'text') {
+                        if (item.diffStatus === 'added') {
+                            added++
+                        }
+                    }
+                }
+            }
+
+            if (node.children) {
+                for (const child of node.children) {
+                    visitNew(child)
+                }
+            }
+        }
+
+        if (leftRenderTree.value) {
+            visitOld(leftRenderTree.value)
+        }
+        if (rightRenderTree.value) {
+            visitNew(rightRenderTree.value)
+        }
+
+        return { added, removed, modified }
+    })
     const showXmlCompare = ref(true)
     const showRenderCompare = ref(true)
 
@@ -1173,6 +1250,13 @@ export function useCompareModal() {
             }
         }
 
+        console.log('[DEBUG Compare] handleXmlLineSelect:', {
+            side,
+            origLine,
+            targetNodeId,
+            minSpan
+        })
+
         if (!targetNodeId) return
         activeNodeId.value = targetNodeId
 
@@ -1183,11 +1267,23 @@ export function useCompareModal() {
 
         // 查找并高亮左侧与右侧排版区域中匹配的元素
         const targetLeft = leftRenderContainer.value?.querySelector(`[data-node-id^="${targetNodeId}"]`) as HTMLElement
+        console.log('[DEBUG Compare] targetLeft element:', targetLeft ? {
+            tagName: targetLeft.tagName,
+            nodeIdAttr: targetLeft.getAttribute('data-node-id'),
+            outerHTML: targetLeft.outerHTML.slice(0, 200)
+        } : 'null')
+
         if (targetLeft) {
             targetLeft.classList.add('render-active-highlight')
         }
 
         const targetRight = rightRenderContainer.value?.querySelector(`[data-node-id^="${targetNodeId}"]`) as HTMLElement
+        console.log('[DEBUG Compare] targetRight element:', targetRight ? {
+            tagName: targetRight.tagName,
+            nodeIdAttr: targetRight.getAttribute('data-node-id'),
+            outerHTML: targetRight.outerHTML.slice(0, 200)
+        } : 'null')
+
         if (targetRight) {
             targetRight.classList.add('render-active-highlight')
         }
@@ -1338,6 +1434,7 @@ export function useCompareModal() {
         rightOriginalToEditor,
         compared,
         comparing,
+        diffCounts,
         showXmlCompare,
         showRenderCompare,
         leftRenderContainer,

src/views/editor/components/EditorToolbar/components/CompareModal/index.vue

@@ -22,6 +22,9 @@
                             +
                         </span>
                         <span class="text-success font-medium">新增内容</span>
+                        <span v-if="compared" class="px-1.5 py-0.5 text-[10px] font-bold rounded bg-success/10 border border-success/30 text-success leading-none">
+                            {{ diffCounts.added }}
+                        </span>
                     </div>
                     <div class="flex items-center gap-1.5">
                         <span
@@ -30,6 +33,9 @@
                             -
                         </span>
                         <span class="text-error font-medium line-through">删除内容</span>
+                        <span v-if="compared" class="px-1.5 py-0.5 text-[10px] font-bold rounded bg-error/10 border border-error/30 text-error leading-none">
+                            {{ diffCounts.removed }}
+                        </span>
                     </div>
                     <div class="flex items-center gap-1.5">
                         <span
@@ -38,6 +44,9 @@
                             ~
                         </span>
                         <span class="text-warning font-medium">属性/文本变更</span>
+                        <span v-if="compared" class="px-1.5 py-0.5 text-[10px] font-bold rounded bg-warning/10 border border-warning/30 text-warning leading-none">
+                            {{ diffCounts.modified }}
+                        </span>
                     </div>
                     <div class="flex items-center gap-1.5">
                         <span class="w-3.5 h-3.5 rounded bg-fill-3 border border-divider/60 repeating-stripes"></span>
@@ -365,6 +374,7 @@ const {
     rightOriginalToEditor,
     compared,
     comparing,
+    diffCounts,
     showXmlCompare,
     showRenderCompare,
     leftRenderContainer,

src/views/editor/components/EditorToolbar/components/StashModal/index.vue

@@ -121,12 +121,6 @@
                             </div>
                         </div>
                         <div class="flex items-center gap-2">
-                            <CommonButton size="small" type="info" secondary @click="handlePreviewEffect(activeItem)">
-                                <template #icon>
-                                    <n-icon><EyeOutline /></n-icon>
-                                </template>
-                                预览效果
-                            </CommonButton>
                             <CommonButton v-if="activeItem.type === 'full'" size="small" type="warning" secondary @click="handleExport(activeItem)">
                                 <template #icon>
                                     <n-icon><DownloadOutline /></n-icon>