From 231019fcd1f47725ff231cbd4ba5774365339cd8 Mon Sep 17 00:00:00 2001
From: renjue <xufeng3@xiaohongshu.com>
Date: Fri, 30 Jan 2026 20:49:22 +0800
Subject: [PATCH] init

---
 src/views/Comparator.vue | 815 +++++++++++++++++----------------------
 1 file changed, 363 insertions(+), 452 deletions(-)

diff --git a/src/views/Comparator.vue b/src/views/Comparator.vue
index 9c726ea..da6993e 100644
--- a/src/views/Comparator.vue
+++ b/src/views/Comparator.vue
@@ -43,13 +43,6 @@
             >
               行维度
             </button>
-            <button
-                @click="textSubMode = 'word'"
-                :class="['submode-btn', { active: textSubMode === 'word' }]"
-                title="按单词对比"
-            >
-              单词维度
-            </button>
             <button
                 @click="textSubMode = 'char'"
                 :class="['submode-btn', { active: textSubMode === 'char' }]"
@@ -160,8 +153,8 @@
                 <span class="stat-value modify">{{ compareResult.stats.modify }}</span>
               </span>
             </div>
-            <button @click="copyResult" class="icon-btn" title="复制结果">
-              <i class="far fa-copy"></i>
+            <button @click="resultFullscreen = true" class="icon-btn" title="全屏展示">
+              <i class="fas fa-expand"></i>
             </button>
           </div>
           <div class="result-content" ref="resultContentRef">
@@ -169,7 +162,7 @@
               <div class="result-line" v-for="(line, index) in compareResult.left" :key="index">
                 <span class="line-number">{{ line.lineNumber || index + 1 }}</span>
                 <span
-                    :class="['line-content', line.type]"
+                    :class="['line-content', line.type, { 'inline-diff': line.inlineHighlight }]"
                     v-html="line.html || escapeHtml(line.content)"
                 ></span>
               </div>
@@ -178,7 +171,7 @@
               <div class="result-line" v-for="(line, index) in compareResult.right" :key="index">
                 <span class="line-number">{{ line.lineNumber || index + 1 }}</span>
                 <span
-                    :class="['line-content', line.type]"
+                    :class="['line-content', line.type, { 'inline-diff': line.inlineHighlight }]"
                     v-html="line.html || escapeHtml(line.content)"
                 ></span>
               </div>
@@ -187,16 +180,72 @@
         </div>
       </div>
     </div>
+
+    <!-- 对比结果全屏展示（覆盖整个网页区域） -->
+    <Teleport to="body">
+      <Transition name="result-fullscreen">
+        <div v-if="resultFullscreen" class="result-fullscreen-overlay">
+          <div class="result-fullscreen-inner">
+            <div class="result-fullscreen-header">
+              <span class="result-label">对比结果</span>
+              <div class="result-stats" v-if="compareResult">
+                <span class="stat-item">
+                  <span class="stat-label">相同:</span>
+                  <span class="stat-value same">{{ compareResult.stats.same }}</span>
+                </span>
+                <span class="stat-item">
+                  <span class="stat-label">插入:</span>
+                  <span class="stat-value insert">{{ compareResult.stats.insert }}</span>
+                </span>
+                <span class="stat-item">
+                  <span class="stat-label">删除:</span>
+                  <span class="stat-value delete">{{ compareResult.stats.delete }}</span>
+                </span>
+                <span class="stat-item">
+                  <span class="stat-label">修改:</span>
+                  <span class="stat-value modify">{{ compareResult.stats.modify }}</span>
+                </span>
+              </div>
+              <button @click="resultFullscreen = false" class="icon-btn" title="退出全屏">
+                <i class="fas fa-compress"></i>
+              </button>
+            </div>
+            <div class="result-fullscreen-content" v-if="compareResult">
+              <div class="result-panel left-result result-fullscreen-panel">
+                <div class="result-line" v-for="(line, index) in compareResult.left" :key="index">
+                  <span class="line-number">{{ line.lineNumber || index + 1 }}</span>
+                  <span
+                      :class="['line-content', line.type, { 'inline-diff': line.inlineHighlight }]"
+                      v-html="line.html || escapeHtml(line.content)"
+                  ></span>
+                </div>
+              </div>
+              <div class="result-panel right-result result-fullscreen-panel">
+                <div class="result-line" v-for="(line, index) in compareResult.right" :key="index">
+                  <span class="line-number">{{ line.lineNumber || index + 1 }}</span>
+                  <span
+                      :class="['line-content', line.type, { 'inline-diff': line.inlineHighlight }]"
+                      v-html="line.html || escapeHtml(line.content)"
+                  ></span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
   </div>
 </template>
 
 <script setup>
-import {ref, computed, onMounted, onUnmounted} from 'vue'
+import {ref, computed, watch, onMounted, onUnmounted} from 'vue'
+
+const MAX_INPUT_BYTES = 500 * 1024 // 最大 500KB
 
 const leftText = ref('')
 const rightText = ref('')
 const compareMode = ref('text') // 'text' 或 'json'
-const textSubMode = ref('line') // 'line', 'word', 'char'
+const textSubMode = ref('line') // 'line' | 'char'
 const leftPanelWidth = ref(50)
 const rightPanelWidth = ref(50)
 const isResizing = ref(false)
@@ -205,6 +254,13 @@ const rightLineCount = ref(1)
 const leftEditorRef = ref(null)
 const rightEditorRef = ref(null)
 const compareResult = ref(null)
+const resultFullscreen = ref(false)
+
+// 全屏时禁止页面滚动
+watch(resultFullscreen, (isFullscreen) => {
+  document.body.style.overflow = isFullscreen ? 'hidden' : ''
+})
+
 const leftResultRef = ref(null)
 const rightResultRef = ref(null)
 const resultContentRef = ref(null)
@@ -238,8 +294,30 @@ const closeToast = () => {
   toastMessage.value = ''
 }
 
+// 获取字符串 UTF-8 字节长度
+const getByteLength = (str) => new TextEncoder().encode(str).length
+
+// 将字符串截断到最大字节数（避免切断多字节字符）
+const truncateToMaxBytes = (str, maxBytes) => {
+  if (getByteLength(str) <= maxBytes) return str
+  let end = str.length
+  while (end > 0 && getByteLength(str.slice(0, end)) > maxBytes) end--
+  return str.slice(0, end)
+}
+
+// 应用输入大小限制，超出则截断并提示
+const applyInputLimit = (side) => {
+  const ref = side === 'left' ? leftText : rightText
+  if (getByteLength(ref.value) <= MAX_INPUT_BYTES) return
+  ref.value = truncateToMaxBytes(ref.value, MAX_INPUT_BYTES)
+  showToast(`内容已超过 500KB 限制，已自动截断`, 'info', 3000)
+  if (side === 'left') updateLeftLineCount()
+  else updateRightLineCount()
+}
+
 // 更新行号
 const updateLeftLineCount = () => {
+  applyInputLimit('left')
   if (leftText.value) {
     leftLineCount.value = leftText.value.split('\n').length
   } else {
@@ -248,6 +326,7 @@ const updateLeftLineCount = () => {
 }
 
 const updateRightLineCount = () => {
+  applyInputLimit('right')
   if (rightText.value) {
     rightLineCount.value = rightText.value.split('\n').length
   } else {
@@ -305,8 +384,12 @@ const copyToClipboard = async (side) => {
 const pasteFromClipboard = async (side) => {
   if (navigator.clipboard && navigator.clipboard.readText) {
     try {
-      const text = await navigator.clipboard.readText()
+      let text = await navigator.clipboard.readText()
       if (text.trim()) {
+        if (getByteLength(text) > MAX_INPUT_BYTES) {
+          text = truncateToMaxBytes(text, MAX_INPUT_BYTES)
+          showToast('粘贴内容已超过 500KB 限制，已自动截断', 'info', 3000)
+        }
         if (side === 'left') {
           leftText.value = text
           updateLeftLineCount()
@@ -423,15 +506,20 @@ const computeDiff = (arrA, arrB) => {
     }
   }
 
-  // 回溯找出所有匹配点
+  // 回溯找出所有匹配点。当同一字符在 B 中出现多次时，优先选 j 更小的（靠左匹配）
   const matches = []
   let i = n, j = m
 
   while (i > 0 && j > 0) {
     if (arrA[i - 1] === arrB[j - 1]) {
-      matches.unshift({x: i - 1, y: j - 1})
-      i--
-      j--
+      // 若 dp[i][j-1] === dp[i][j]，说明不匹配 (i-1,j-1) 也能得到同样长的 LCS，可先 j-- 尝试更靠左的匹配
+      if (j > 1 && dp[i][j - 1] === dp[i][j]) {
+        j--
+      } else {
+        matches.unshift({x: i - 1, y: j - 1})
+        i--
+        j--
+      }
     } else if (dp[i - 1][j] > dp[i][j - 1]) {
       i--
     } else {
@@ -439,25 +527,21 @@ const computeDiff = (arrA, arrB) => {
     }
   }
 
-  // 构建路径，包括匹配点和差异点
+  // 构建路径：每个匹配点都要加入，否则 compareTextByChar 会漏掉匹配（如 hello vs helloworld 的 o）
   const path = []
-  let x = 0, y = 0
-
   for (const match of matches) {
-    // 添加匹配点之前的差异
-    if (x < match.x || y < match.y) {
-      path.push({x: match.x, y: match.y})
-    }
-    x = match.x + 1
-    y = match.y + 1
+    path.push({x: match.x, y: match.y})
   }
-
-  // 添加最后的匹配点
-  if (x < n || y < m) {
+  if (path.length > 0) {
+    const last = path[path.length - 1]
+    if (last.x < n || last.y < m) {
+      path.push({x: n, y: m})
+    }
+  } else {
     path.push({x: n, y: m})
   }
 
-  return path.length > 0 ? path : [{x: n, y: m}]
+  return path
 }
 
 // 文本对比 - 行维度（使用最小编辑距离）
@@ -642,123 +726,6 @@ const compareTextByLine = (textA, textB) => {
   return {left: resultA, right: resultB, stats}
 }
 
-// 文本对比 - 单词维度（高亮差异单词）
-const compareTextByWord = (textA, textB) => {
-  const linesA = textA.split('\n')
-  const linesB = textB.split('\n')
-
-  const resultA = []
-  const resultB = []
-  let stats = {same: 0, insert: 0, delete: 0, modify: 0}
-
-  const maxLines = Math.max(linesA.length, linesB.length)
-
-  for (let i = 0; i < maxLines; i++) {
-    const lineA = linesA[i] || ''
-    const lineB = linesB[i] || ''
-
-    if (lineA === lineB) {
-      resultA.push({type: 'same', content: lineA, html: escapeHtml(lineA), lineNumber: i + 1})
-      resultB.push({type: 'same', content: lineB, html: escapeHtml(lineB), lineNumber: i + 1})
-      stats.same++
-    } else {
-      // 按单词进行diff
-      const wordsA = lineA.split(/(\s+)/)
-      const wordsB = lineB.split(/(\s+)/)
-
-      const wordDiff = computeDiff(wordsA, wordsB)
-
-      let htmlA = ''
-      let htmlB = ''
-      let x = 0, y = 0
-      let hasDiff = false
-
-      for (let j = 0; j < wordDiff.length; j++) {
-        const point = wordDiff[j]
-        const nextPoint = wordDiff[j + 1] || {x: wordsA.length, y: wordsB.length}
-
-        // 相同的单词
-        while (x < point.x && y < point.y) {
-          htmlA += escapeHtml(wordsA[x])
-          htmlB += escapeHtml(wordsB[y])
-          x++
-          y++
-        }
-
-        // 差异的单词
-        if (x < nextPoint.x && y < nextPoint.y) {
-          htmlA += `<span class="diff-highlight">${escapeHtml(wordsA[x])}</span>`
-          htmlB += `<span class="diff-highlight">${escapeHtml(wordsB[y])}</span>`
-          hasDiff = true
-          x++
-          y++
-        } else if (x < nextPoint.x) {
-          htmlA += `<span class="diff-highlight">${escapeHtml(wordsA[x])}</span>`
-          htmlB += ''
-          hasDiff = true
-          x++
-        } else if (y < nextPoint.y) {
-          htmlA += ''
-          htmlB += `<span class="diff-highlight">${escapeHtml(wordsB[y])}</span>`
-          hasDiff = true
-          y++
-        }
-      }
-
-      // 处理剩余单词
-      while (x < wordsA.length && y < wordsB.length) {
-        if (wordsA[x] === wordsB[y]) {
-          htmlA += escapeHtml(wordsA[x])
-          htmlB += escapeHtml(wordsB[y])
-        } else {
-          htmlA += `<span class="diff-highlight">${escapeHtml(wordsA[x])}</span>`
-          htmlB += `<span class="diff-highlight">${escapeHtml(wordsB[y])}</span>`
-          hasDiff = true
-        }
-        x++
-        y++
-      }
-
-      while (x < wordsA.length) {
-        htmlA += `<span class="diff-highlight">${escapeHtml(wordsA[x])}</span>`
-        hasDiff = true
-        x++
-      }
-
-      while (y < wordsB.length) {
-        htmlB += `<span class="diff-highlight">${escapeHtml(wordsB[y])}</span>`
-        hasDiff = true
-        y++
-      }
-
-      if (hasDiff) {
-        if (lineA && lineB) {
-          stats.modify++
-        } else if (lineA) {
-          stats.delete++
-        } else {
-          stats.insert++
-        }
-      }
-
-      resultA.push({
-        type: hasDiff ? 'modify' : (lineA ? 'delete' : 'insert'),
-        content: lineA,
-        html: htmlA || escapeHtml(lineA),
-        lineNumber: i + 1
-      })
-      resultB.push({
-        type: hasDiff ? 'modify' : (lineB ? 'insert' : 'delete'),
-        content: lineB,
-        html: htmlB || escapeHtml(lineB),
-        lineNumber: i + 1
-      })
-    }
-  }
-
-  return {left: resultA, right: resultB, stats}
-}
-
 // 文本对比 - 字符维度（高亮差异字符）
 const compareTextByChar = (textA, textB) => {
   const linesA = textA.split('\n')
@@ -777,9 +744,9 @@ const compareTextByChar = (textA, textB) => {
     if (lineA === lineB) {
       resultA.push({type: 'same', content: lineA, html: escapeHtml(lineA), lineNumber: i + 1})
       resultB.push({type: 'same', content: lineB, html: escapeHtml(lineB), lineNumber: i + 1})
-      stats.same++
+      stats.same += lineA.length
     } else {
-      // 按字符进行diff
+      // 按字符进行diff，统计按高亮单元（字符）计数
       const charsA = lineA.split('')
       const charsB = lineB.split('')
 
@@ -794,29 +761,56 @@ const compareTextByChar = (textA, textB) => {
         const point = charDiff[j]
         const nextPoint = charDiff[j + 1] || {x: charsA.length, y: charsB.length}
 
-        // 相同的字符
-        while (x < point.x && y < point.y) {
+        // 从 (x,y) 到匹配点 (point.x, point.y) 之前：只可能是差异（如 na vs aa 中 (0,0) 是修改不是相同）
+        while (x < point.x || y < point.y) {
+          if (x < point.x && y < point.y) {
+            htmlA += `<span class="diff-highlight diff-highlight-modify">${escapeHtml(charsA[x])}</span>`
+            htmlB += `<span class="diff-highlight diff-highlight-modify">${escapeHtml(charsB[y])}</span>`
+            stats.modify++
+            hasDiff = true
+            x++
+            y++
+          } else if (x < point.x) {
+            htmlA += `<span class="diff-highlight diff-highlight-delete">${escapeHtml(charsA[x])}</span>`
+            htmlB += ''
+            stats.delete++
+            hasDiff = true
+            x++
+          } else {
+            htmlA += ''
+            htmlB += `<span class="diff-highlight diff-highlight-insert">${escapeHtml(charsB[y])}</span>`
+            stats.insert++
+            hasDiff = true
+            y++
+          }
+        }
+        // 仅匹配点 (point.x, point.y) 为相同（终点 (n,m) 不是匹配点，不输出）
+        if (x === point.x && y === point.y && point.x < charsA.length && point.y < charsB.length) {
           htmlA += escapeHtml(charsA[x])
           htmlB += escapeHtml(charsB[y])
+          stats.same++
           x++
           y++
         }
 
-        // 差异的字符
+        // 差异的字符：修改用黄色，仅左为删除（红），仅右为插入（蓝）
         if (x < nextPoint.x && y < nextPoint.y) {
-          htmlA += `<span class="diff-highlight">${escapeHtml(charsA[x])}</span>`
-          htmlB += `<span class="diff-highlight">${escapeHtml(charsB[y])}</span>`
+          htmlA += `<span class="diff-highlight diff-highlight-modify">${escapeHtml(charsA[x])}</span>`
+          htmlB += `<span class="diff-highlight diff-highlight-modify">${escapeHtml(charsB[y])}</span>`
+          stats.modify++
           hasDiff = true
           x++
           y++
         } else if (x < nextPoint.x) {
-          htmlA += `<span class="diff-highlight">${escapeHtml(charsA[x])}</span>`
+          htmlA += `<span class="diff-highlight diff-highlight-delete">${escapeHtml(charsA[x])}</span>`
           htmlB += ''
+          stats.delete++
           hasDiff = true
           x++
         } else if (y < nextPoint.y) {
           htmlA += ''
-          htmlB += `<span class="diff-highlight">${escapeHtml(charsB[y])}</span>`
+          htmlB += `<span class="diff-highlight diff-highlight-insert">${escapeHtml(charsB[y])}</span>`
+          stats.insert++
           hasDiff = true
           y++
         }
@@ -827,9 +821,11 @@ const compareTextByChar = (textA, textB) => {
         if (charsA[x] === charsB[y]) {
           htmlA += escapeHtml(charsA[x])
           htmlB += escapeHtml(charsB[y])
+          stats.same++
         } else {
-          htmlA += `<span class="diff-highlight">${escapeHtml(charsA[x])}</span>`
-          htmlB += `<span class="diff-highlight">${escapeHtml(charsB[y])}</span>`
+          htmlA += `<span class="diff-highlight diff-highlight-modify">${escapeHtml(charsA[x])}</span>`
+          htmlB += `<span class="diff-highlight diff-highlight-modify">${escapeHtml(charsB[y])}</span>`
+          stats.modify++
           hasDiff = true
         }
         x++
@@ -837,38 +833,32 @@ const compareTextByChar = (textA, textB) => {
       }
 
       while (x < charsA.length) {
-        htmlA += `<span class="diff-highlight">${escapeHtml(charsA[x])}</span>`
+        htmlA += `<span class="diff-highlight diff-highlight-delete">${escapeHtml(charsA[x])}</span>`
+        stats.delete++
         hasDiff = true
         x++
       }
 
       while (y < charsB.length) {
-        htmlB += `<span class="diff-highlight">${escapeHtml(charsB[y])}</span>`
+        htmlB += `<span class="diff-highlight diff-highlight-insert">${escapeHtml(charsB[y])}</span>`
+        stats.insert++
         hasDiff = true
         y++
       }
 
-      if (hasDiff) {
-        if (lineA && lineB) {
-          stats.modify++
-        } else if (lineA) {
-          stats.delete++
-        } else {
-          stats.insert++
-        }
-      }
-
       resultA.push({
         type: hasDiff ? 'modify' : (lineA ? 'delete' : 'insert'),
         content: lineA,
         html: htmlA || escapeHtml(lineA),
-        lineNumber: i + 1
+        lineNumber: i + 1,
+        inlineHighlight: hasDiff
       })
       resultB.push({
         type: hasDiff ? 'modify' : (lineB ? 'insert' : 'delete'),
         content: lineB,
         html: htmlB || escapeHtml(lineB),
-        lineNumber: i + 1
+        lineNumber: i + 1,
+        inlineHighlight: hasDiff
       })
     }
   }
@@ -984,80 +974,50 @@ const NodeComparisonResult = {
 
 // 对比两个JSON节点，返回对比结果和相似度
 const compareJsonNodes = (nodeA, nodeB) => {
-  // 处理null值
+  const result = (type, similarity) => ({ type, similarity, nodeA, nodeB })
+
   if (isNullOrUndefined(nodeA) && isNullOrUndefined(nodeB)) {
-    if (nodeA === null && nodeB === null) {
-      return {type: NodeComparisonResult.SAME, similarity: 1.0, nodeA, nodeB}
-    } else if (nodeA === undefined && nodeB === undefined) {
-      return {type: NodeComparisonResult.SAME, similarity: 1.0, nodeA, nodeB}
-    } else {
-      return {type: NodeComparisonResult.DIFFERENT, similarity: 0.0, nodeA, nodeB}
-    }
-
+    return nodeA === nodeB ? result(NodeComparisonResult.SAME, 1.0) : result(NodeComparisonResult.DIFFERENT, 0.0)
   }
-
   if (isNullOrUndefined(nodeA) || isNullOrUndefined(nodeB)) {
-    return {type: NodeComparisonResult.DIFFERENT, similarity: 0.0, nodeA, nodeB}
+    return result(NodeComparisonResult.DIFFERENT, 0.0)
   }
-
-  // 基本类型（除字符串外）对比
   if (isPrimitiveType(nodeA) && isPrimitiveType(nodeB)) {
-    if (nodeA === nodeB) {
-      return {type: NodeComparisonResult.SAME, similarity: 1.0, nodeA, nodeB}
-    }
-    return {type: NodeComparisonResult.DIFFERENT, similarity: 0.0, nodeA, nodeB}
+    return nodeA === nodeB ? result(NodeComparisonResult.SAME, 1.0) : result(NodeComparisonResult.DIFFERENT, 0.0)
   }
-
-  // 字符串对比
   if (isStringType(nodeA) && isStringType(nodeB)) {
-    const strResult = stringSimilarity(nodeA, nodeB)
-    return {
-      type: strResult.type,
-      similarity: strResult.similarity,
-      nodeA,
-      nodeB
-    }
+    const { type, similarity } = stringSimilarity(nodeA, nodeB)
+    return result(type, similarity)
   }
-
-  // 类型不匹配
   if (typeof nodeA !== typeof nodeB) {
-    return {type: NodeComparisonResult.DIFFERENT, similarity: 0.0, nodeA, nodeB}
+    return result(NodeComparisonResult.DIFFERENT, 0.0)
   }
-
-  // Map（对象）对比
-  if (isMapType(nodeA) && isMapType(nodeB)) {
-    return compareMaps(nodeA, nodeB)
-  }
-
-  // List（数组）对比
-  if (isListType(nodeA) && isListType(nodeB)) {
-    return compareLists(nodeA, nodeB)
-  }
-
-  // 其他情况视为不同
-  return {type: NodeComparisonResult.DIFFERENT, similarity: 0.0, nodeA, nodeB}
+  if (isMapType(nodeA) && isMapType(nodeB)) return compareMaps(nodeA, nodeB)
+  if (isListType(nodeA) && isListType(nodeB)) return compareLists(nodeA, nodeB)
+  return result(NodeComparisonResult.DIFFERENT, 0.0)
 }
 
 // 对比Map（对象）
 const compareMaps = (mapA, mapB) => {
-  let allKeys = new Set()
-  let keysA = Object.keys(mapA).sort()
-  keysA.forEach(value => allKeys.add(value));
-  let keysB = Object.keys(mapB).sort()
-  keysB.forEach(value => allKeys.add(value));
+  const keysA = Object.keys(mapA).sort()
+  const keysB = Object.keys(mapB).sort()
+  const setA = new Set(keysA)
+  const setB = new Set(keysB)
+  const allKeys = new Set([...keysA, ...keysB])
   const comparisons = []
+  let allSame = true
+  let allDifferent = true
+  let allInsert = true
+  let allDelete = true
 
-  let allSame = true;
-  let allDifferent = true;
-  let allInsert = true;
-  let allDelete = true;
   for (const key of allKeys) {
-    const hasKeyA = keysA.includes(key)
-    const hasKeyB = keysB.includes(key)
-
-    const valueComparison = compareJsonNodes(hasKeyA ? mapA[key] : undefined, hasKeyB ? mapB[key] : undefined)
+    const hasKeyA = setA.has(key)
+    const hasKeyB = setB.has(key)
+    const valueComparison = compareJsonNodes(
+      hasKeyA ? mapA[key] : undefined,
+      hasKeyB ? mapB[key] : undefined
+    )
     if (hasKeyA && hasKeyB && valueComparison.type === NodeComparisonResult.DIFFERENT) {
-      // key相同，value不同时，判定节点为相似，相似度0.5
       valueComparison.type = NodeComparisonResult.SIMILAR
       valueComparison.similarity = 0.5
     }
@@ -1070,49 +1030,23 @@ const compareMaps = (mapA, mapB) => {
       allDelete = false
     } else if (valueComparison.type === NodeComparisonResult.DIFFERENT) {
       allSame = false
-      if (isNullOrUndefined(mapA) || hasKeyA) {
-        allInsert = false
-      }
-      if (isNullOrUndefined(mapB) || hasKeyB) {
-        allDelete = false
-      }
+      if (isNullOrUndefined(mapA) || hasKeyA) allInsert = false
+      if (isNullOrUndefined(mapB) || hasKeyB) allDelete = false
     }
-    comparisons.push({
-      ...valueComparison,
-      key
-    })
+    comparisons.push({ ...valueComparison, key })
   }
 
+  const base = { nodeA: mapA, nodeB: mapB, children: comparisons }
   if (allSame) {
-    return {
-      type: NodeComparisonResult.SAME,
-      similarity: 1.0,
-      nodeA: mapA,
-      nodeB: mapB,
-      children: comparisons
-    }
-  } else if (allDifferent && (!allInsert && !allDelete)) {
-    return {
-      type: NodeComparisonResult.DIFFERENT,
-      similarity: 0.0,
-      nodeA: mapA,
-      nodeB: mapB,
-      children: comparisons
-    }
-  } else {
-    // 计算加权平均相似度
-    const totalWeight = comparisons.length
-    const totalSimilarity = comparisons.reduce((sum, c) => sum + c.similarity, 0)
-    const avgSimilarity = totalWeight > 0 ? totalSimilarity / totalWeight : 0
-
-    return {
-      type: NodeComparisonResult.SIMILAR,
-      similarity: avgSimilarity,
-      nodeA: mapA,
-      nodeB: mapB,
-      children: comparisons
-    }
+    return { type: NodeComparisonResult.SAME, similarity: 1.0, ...base }
   }
+  if (allDifferent && !allInsert && !allDelete) {
+    return { type: NodeComparisonResult.DIFFERENT, similarity: 0.0, ...base }
+  }
+  const avgSimilarity = comparisons.length > 0
+    ? comparisons.reduce((sum, c) => sum + c.similarity, 0) / comparisons.length
+    : 0
+  return { type: NodeComparisonResult.SIMILAR, similarity: avgSimilarity, ...base }
 }
 
 // 对比List（数组）- 寻找最佳匹配使相似度最高
@@ -1253,6 +1187,19 @@ const compareLists = (listA, listB) => {
   }
 }
 
+// 在展示行末尾添加/移除逗号的辅助
+const addTrailingComma = (line, lastNotEmptyRef) => {
+  if (line.content !== '') {
+    line.content += ','
+    lastNotEmptyRef.current = line
+  }
+}
+const removeTrailingComma = (lastNotEmptyRef) => {
+  if (lastNotEmptyRef.current !== undefined) {
+    lastNotEmptyRef.current.content = lastNotEmptyRef.current.content.slice(0, -1)
+  }
+}
+
 // 将对比结果转换为展示格式
 const convertComparisonToDisplay = (comparison, indent = 0) => {
   const indentStr = '  '.repeat(indent)
@@ -1260,253 +1207,142 @@ const convertComparisonToDisplay = (comparison, indent = 0) => {
   const isLeaf = !comparison.children && !comparison.matches
 
   // 根据展示规则确定类型
+  const { type, nodeA, nodeB } = comparison
   let displayType = 'same'
-  if (comparison.type === NodeComparisonResult.DIFFERENT) {
-    if (comparison.nodeA !== undefined && comparison.nodeB === undefined) {
-      displayType = 'delete'
-    } else if (comparison.nodeA === undefined && comparison.nodeB !== undefined) {
-      displayType = 'insert'
-    } else {
-      // 两个节点都存在但不同
-      displayType = 'different'
-    }
-  } else if (comparison.type === NodeComparisonResult.SAME) {
-    // 【相同】的节点，无论是叶子节点还是非叶子节点，都显示为相同
-    displayType = 'same'
-  } else if (comparison.type === NodeComparisonResult.SIMILAR) {
-    // 【相似】的节点
-    if (isLeaf) {
-      displayType = 'modify' // 叶子节点显示为修改
-    } else {
-      displayType = 'same' // 非叶子节点显示为相同
-    }
+  if (type === NodeComparisonResult.DIFFERENT) {
+    if (nodeA !== undefined && nodeB === undefined) displayType = 'delete'
+    else if (nodeA === undefined && nodeB !== undefined) displayType = 'insert'
+    else displayType = 'different'
+  } else if (type === NodeComparisonResult.SIMILAR && isLeaf) {
+    displayType = 'modify'
   }
 
-  // 处理Map（对象）
-  if (!isLeaf && isMapType(comparison.nodeA) && isMapType(comparison.nodeB)) {
+  // 处理 Map（对象）
+  if (!isLeaf && isMapType(nodeA) && isMapType(nodeB)) {
     const leftLines = []
     const rightLines = []
-    console.log(indent + "-map", comparison.nodeA, comparison.nodeB)
+    const sortedKeys = [...new Set(comparison.children.map(c => c.key).filter(Boolean))].sort()
+    const commaLeft = { current: undefined }
+    const commaRight = { current: undefined }
 
-    const keys = new Set()
-    comparison.children.forEach(child => {
-      if (child.key) keys.add(child.key)
-    })
-    const sortedKeys = Array.from(keys).sort()
+    leftLines.push({ type: displayType, content: indentStr + '{' })
+    rightLines.push({ type: displayType, content: indentStr + '{' })
 
-    leftLines.push({type: displayType, content: indentStr + '{'})
-    rightLines.push({type: displayType, content: indentStr + '{'})
-
-    let leftLastNotEmptyLine = undefined;
-    let rightLastNotEmptyLine = undefined;
-
-    for (let i = 0; i < sortedKeys.length; i++) {
-      const key = sortedKeys[i]
+    for (const key of sortedKeys) {
       const child = comparison.children.find(c => c.key === key)
-      // 递归处理子节点
       const childResult = convertComparisonToDisplay(child, indent + 1)
-      console.log(indent + "-map-child", childResult)
+      if (childResult.left.length === 0 && childResult.right.length === 0) continue
 
-      if (childResult.left.length === 0 && childResult.right.length === 0) {
-        continue
-      }
+      const leftFirst = childResult.left[0]?.content ?? null
+      const rightFirst = childResult.right[0]?.content ?? null
+      const formatFirst = (content) => (content === null || content === '' ? '' : content.trimStart())
 
-      const leftFirst = childResult.left.length > 0 ? childResult.left[0].content : null
-      const rightFirst = childResult.right.length > 0 ? childResult.right[0].content : null
-
-      // 处理第1行，添加key前缀
       leftLines.push({
         type: childResult.left[0].type,
-        content: leftFirst === null || leftFirst === '' ? '' : `${childIndentStr}"${key}": ${leftFirst.trimStart()}`
+        content: leftFirst === null || leftFirst === '' ? '' : `${childIndentStr}"${key}": ${formatFirst(leftFirst)}`
       })
       rightLines.push({
         type: childResult.right[0].type,
-        content: rightFirst === null || rightFirst === '' ? '' : `${childIndentStr}"${key}": ${rightFirst.trimStart()}`
+        content: rightFirst === null || rightFirst === '' ? '' : `${childIndentStr}"${key}": ${formatFirst(rightFirst)}`
       })
 
-      // 处理其他行
       const maxLength = Math.max(childResult.left.length, childResult.right.length)
-      for (let i = 1; i < maxLength; i++) {
-        let leftLine
-        if (i < childResult.right.length) {
-          leftLine = childResult.left[i]
-        } else {
-          leftLine = {type: 'insert', content: ''}
-        }
-        let rightLine
-        if (i < childResult.right.length) {
-          rightLine = childResult.right[i]
-        } else {
-          rightLine = {type: 'delete', content: ''}
-        }
-        leftLines.push(leftLine)
-        rightLines.push(rightLine)
+      for (let j = 1; j < maxLength; j++) {
+        leftLines.push(
+          j < childResult.left.length ? childResult.left[j] : { type: 'insert', content: '' }
+        )
+        rightLines.push(
+          j < childResult.right.length ? childResult.right[j] : { type: 'delete', content: '' }
+        )
       }
-      // 在最后一行，添加逗号
-      const leftLastLine = leftLines[leftLines.length - 1]
-      if (leftLastLine.content !== '') {
-        leftLastLine.content = leftLastLine.content + ","
-        leftLastNotEmptyLine = leftLastLine
-      }
-      const rightLastLine = rightLines[rightLines.length - 1]
-      if (rightLastLine.content !== '') {
-        rightLastLine.content = rightLastLine.content + ","
-        rightLastNotEmptyLine = rightLastLine
-      }
-    }
-    // 去掉最后一行的逗号
-    if (leftLastNotEmptyLine !== undefined) {
-      leftLastNotEmptyLine.content = leftLastNotEmptyLine.content.slice(0, -1)
-    }
-    if (rightLastNotEmptyLine !== undefined) {
-      rightLastNotEmptyLine.content = rightLastNotEmptyLine.content.slice(0, -1)
+
+      addTrailingComma(leftLines[leftLines.length - 1], commaLeft)
+      addTrailingComma(rightLines[rightLines.length - 1], commaRight)
     }
 
-    leftLines.push({type: displayType, content: indentStr + '}'})
-    rightLines.push({type: displayType, content: indentStr + '}'})
-
-    return {left: leftLines, right: rightLines}
+    removeTrailingComma(commaLeft)
+    removeTrailingComma(commaRight)
+    leftLines.push({ type: displayType, content: indentStr + '}' })
+    rightLines.push({ type: displayType, content: indentStr + '}' })
+    return { left: leftLines, right: rightLines }
   }
 
-  // 处理List（数组）
-  if (!isLeaf && isListType(comparison.nodeA) && isListType(comparison.nodeB)) {
+  // 处理 List（数组）
+  if (!isLeaf && isListType(nodeA) && isListType(nodeB)) {
     const leftLines = []
     const rightLines = []
+    const commaLeft = { current: undefined }
+    const commaRight = { current: undefined }
 
-    console.log(indent + "-list", comparison.nodeA, comparison.nodeB)
-
-    leftLines.push({type: displayType, content: indentStr + '['})
-    rightLines.push({type: displayType, content: indentStr + '['})
-
-    let leftLastNotEmptyLine = undefined;
-    let rightLastNotEmptyLine = undefined;
-
-    for (let i = 0; i < comparison.matches.length; i++) {
-      const match = comparison.matches[i]
+    leftLines.push({ type: displayType, content: indentStr + '[' })
+    rightLines.push({ type: displayType, content: indentStr + '[' })
 
+    for (const match of comparison.matches) {
       const childResult = convertComparisonToDisplay(match.comparison, indent + 1)
-      console.log(indent + "-list-child", childResult)
-
-      if (childResult.left.length === 0 && childResult.right.length === 0) {
-        continue
-      }
-
-      // 处理第1行，添加key前缀
-      const leftFirst = childResult.left.length > 0 ? childResult.left[0].content : undefined
-      const rightFirst = childResult.right.length > 0 ? childResult.right[0].content : undefined
+      if (childResult.left.length === 0 && childResult.right.length === 0) continue
 
+      const leftFirst = childResult.left[0]?.content
+      const rightFirst = childResult.right[0]?.content
       const leftFirstLine = {
         type: childResult.left[0].type,
         content: leftFirst === undefined || leftFirst === '' ? '' : `${childIndentStr}${leftFirst.trimStart()}`
       }
-
       const rightFirstLine = {
         type: childResult.right[0].type,
         content: rightFirst === undefined || rightFirst === '' ? '' : `${childIndentStr}${rightFirst.trimStart()}`
       }
-
-
       leftLines.push(leftFirstLine)
       rightLines.push(rightFirstLine)
 
       let leftLastLine = leftFirstLine
       let rightLastLine = rightFirstLine
-
-      // 处理其他行
       const maxLength = Math.max(childResult.left.length, childResult.right.length)
 
-      for (let i = 1; i < maxLength; i++) {
-        let leftLine
-        if (i < childResult.left.length) {
-          leftLine = childResult.left[i]
-          if (leftLine.content !== '') {
-            leftLastLine = leftLine
-          }
-        } else {
-          leftLine = {type: 'insert', content: ''}
-        }
-        let rightLine
-        if (i < childResult.right.length) {
-          rightLine = childResult.right[i]
-          if (rightLine.content !== '') {
-            rightLastLine = rightLine
-          }
-        } else {
-          rightLine = {type: 'delete', content: ''}
-        }
+      for (let j = 1; j < maxLength; j++) {
+        const leftLine = j < childResult.left.length ? childResult.left[j] : { type: 'insert', content: '' }
+        const rightLine = j < childResult.right.length ? childResult.right[j] : { type: 'delete', content: '' }
+        if (leftLine.content !== '') leftLastLine = leftLine
+        if (rightLine.content !== '') rightLastLine = rightLine
         leftLines.push(leftLine)
         rightLines.push(rightLine)
       }
-      // 在最后一行，添加逗号
 
-      console.log(indent + "-list-last-l", leftLastLine)
-      if (leftLastLine.content !== '') {
-        leftLastLine.content = leftLastLine.content + ","
-        leftLastNotEmptyLine = leftLastLine
-      }
-      console.log(indent + "-list-last-r", rightLastLine)
-      if (rightLastLine.content !== '') {
-        rightLastLine.content = rightLastLine.content + ","
-        rightLastNotEmptyLine = rightLastLine
-      }
+      addTrailingComma(leftLastLine, commaLeft)
+      addTrailingComma(rightLastLine, commaRight)
     }
-    console.log(indent + "-list", leftLines, rightLines, leftLastNotEmptyLine, rightLastNotEmptyLine)
-    // 去掉最后一行的逗号
-    if (leftLastNotEmptyLine !== undefined) {
-      leftLastNotEmptyLine.content = leftLastNotEmptyLine.content.slice(0, -1)
-    }
-    if (rightLastNotEmptyLine !== undefined) {
-      rightLastNotEmptyLine.content = rightLastNotEmptyLine.content.slice(0, -1)
-    }
-    leftLines.push({type: displayType, content: indentStr + ']'})
-    rightLines.push({type: displayType, content: indentStr + ']'})
 
-    return {left: leftLines, right: rightLines}
+    removeTrailingComma(commaLeft)
+    removeTrailingComma(commaRight)
+    leftLines.push({ type: displayType, content: indentStr + ']' })
+    rightLines.push({ type: displayType, content: indentStr + ']' })
+    return { left: leftLines, right: rightLines }
   }
 
   // 处理叶子节点
   const leftLines = []
   const rightLines = []
-
-  console.log("leaf-", comparison.nodeA, comparison.nodeB)
-  const leftData = comparison.nodeA !== undefined ? formatJsonData(comparison.nodeA, indent) : ['']
-  const rightData = comparison.nodeB !== undefined ? formatJsonData(comparison.nodeB, indent) : ['']
-  console.log("leaf-", leftData, rightData)
-
+  const leftData = nodeA !== undefined ? formatJsonData(nodeA, indent) : ['']
+  const rightData = nodeB !== undefined ? formatJsonData(nodeB, indent) : ['']
 
   if (displayType === 'different') {
     for (let i = 0; i < leftData.length; i++) {
-      leftLines.push({type: 'delete', content: leftData[i]})
-      rightLines.push({type: 'delete', content: ''})
+      leftLines.push({ type: 'delete', content: leftData[i] })
+      rightLines.push({ type: 'delete', content: '' })
     }
     for (let i = 0; i < rightData.length; i++) {
-      leftLines.push({type: 'insert', content: ''})
-      rightLines.push({type: 'insert', content: (i === 0 && rightData[i] !== '' ? indentStr : '') + rightData[i]})
+      leftLines.push({ type: 'insert', content: '' })
+      rightLines.push({ type: 'insert', content: (i === 0 && rightData[i] !== '' ? indentStr : '') + rightData[i] })
     }
   } else {
     const maxLineSize = Math.max(leftData.length, rightData.length)
     for (let i = 0; i < maxLineSize; i++) {
-      let leftContent = undefined
-      if (i < leftData.length) {
-        leftContent = leftData[i]
-      }
-      let rightContent = undefined
-      if (i < rightData.length) {
-        rightContent = (i === 0 && rightData[i] !== '' ? indentStr : '') + rightData[i]
-      }
-      if (leftContent !== undefined) {
-        leftLines.push({type: displayType, content: leftContent})
-      } else {
-        leftLines.push({type: displayType, content: ''})
-      }
-      if (rightContent !== undefined) {
-        rightLines.push({type: displayType, content: rightContent})
-      } else {
-        rightLines.push({type: displayType, content: ''})
-      }
+      const leftContent = i < leftData.length ? leftData[i] : undefined
+      const rightContent = i < rightData.length ? (i === 0 && rightData[i] !== '' ? indentStr : '') + rightData[i] : undefined
+      leftLines.push({ type: displayType, content: leftContent ?? '' })
+      rightLines.push({ type: displayType, content: rightContent ?? '' })
     }
   }
-  return {left: leftLines, right: rightLines}
+  return { left: leftLines, right: rightLines }
 }
 
 
@@ -1682,8 +1518,6 @@ const performCompare = () => {
       // 文本对比
       if (textSubMode.value === 'line') {
         compareResult.value = compareTextByLine(leftText.value, rightText.value)
-      } else if (textSubMode.value === 'word') {
-        compareResult.value = compareTextByWord(leftText.value, rightText.value)
       } else {
         compareResult.value = compareTextByChar(leftText.value, rightText.value)
       }
@@ -2305,6 +2139,60 @@ onUnmounted(() => {
   overflow: hidden;
 }
 
+/* 对比结果全屏展示（覆盖整个网页） */
+.result-fullscreen-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  background: #ffffff;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.result-fullscreen-inner {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+}
+
+.result-fullscreen-header {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 0.75rem 1rem;
+  background: #fafafa;
+  border-bottom: 1px solid #e5e5e5;
+  flex-shrink: 0;
+}
+
+.result-fullscreen-content {
+  flex: 1;
+  display: flex;
+  overflow: hidden;
+  min-height: 0;
+}
+
+.result-fullscreen-panel {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0.5rem;
+  font-family: 'Courier New', monospace;
+  font-size: 14px;
+  line-height: 1.6;
+}
+
+.result-fullscreen-enter-active,
+.result-fullscreen-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+.result-fullscreen-enter-from,
+.result-fullscreen-leave-to {
+  opacity: 0;
+}
+
 .result-panel {
   flex: 1;
   overflow-y: auto;
@@ -2359,14 +2247,37 @@ onUnmounted(() => {
   background: #dbeafe;
 }
 
-.result-line .line-content .diff-highlight {
-  background: #fecaca;
-  color: #991b1b;
+/* 单词/字符维度：整行不铺背景，仅高亮片段 */
+.result-line .line-content.inline-diff.modify,
+.result-line .line-content.inline-diff.delete,
+.result-line .line-content.inline-diff.insert {
+  background: transparent;
+  color: #1a1a1a;
+  text-decoration: none;
+}
+
+/* v-html 内的元素无 data-v 属性，须用 :deep() 才能命中 */
+.result-line .line-content :deep(.diff-highlight) {
   font-weight: 500;
   padding: 0 2px;
   border-radius: 2px;
 }
 
+.result-line .line-content :deep(.diff-highlight-delete) {
+  background: #fee2e2;
+  color: #991b1b;
+}
+
+.result-line .line-content :deep(.diff-highlight-insert) {
+  background: #dbeafe;
+  color: #1e40af;
+}
+
+.result-line .line-content :deep(.diff-highlight-modify) {
+  background: #fef3c7;
+  color: #92400e;
+}
+
 @media (max-width: 768px) {
   .tool-page {
     padding: 0;