Răsfoiți Sursa

style: 长文本高亮改为整体包裹(多段合并为一个边框)

- 连续属于同一长文本要素的多个段落合并到一个div边框内
- 不再逐段包裹,而是整个长文本区域一个大边框
何文松 1 săptămână în urmă
părinte
comite
58243f374c
1 a modificat fișierele cu 36 adăugiri și 15 ștergeri
  1. 36 15
      frontend/vue-demo/src/views/Editor.vue

+ 36 - 15
frontend/vue-demo/src/views/Editor.vue

@@ -809,22 +809,51 @@ function renderDocHtml() {
     }
   }
 
-  // 第二遍:渲染
+  // 第二遍:渲染,连续属于同一长文本要素的 block 合并到一个边框内
+  let currentLongKey = null   // 当前正在收集的长文本要素 key
+  let currentLongMatch = null // 当前长文本要素匹配信息
+  let longGroupHtml = ''      // 当前长文本分组的 HTML 累积
+
+  function flushLongGroup() {
+    if (currentLongKey && longGroupHtml) {
+      const borderColor = darkenColor(currentLongMatch.color)
+      parts.push(`<div class="elem-highlight-wrap" data-elem-key="${currentLongMatch.elementKey}" data-value-id="${currentLongMatch.valueId || ''}" title="${escapeAttr(currentLongMatch.elementName)}" style="border:2px solid ${borderColor};border-radius:4px;padding:6px 8px;margin:4px 0;cursor:pointer;">${longGroupHtml}</div>`)
+      highlightCount++
+    }
+    currentLongKey = null
+    currentLongMatch = null
+    longGroupHtml = ''
+  }
+
   for (const block of blocks) {
     if (block.type === 'table') {
-      // 检查表格是否属于某个长文本要素
+      flushLongGroup()
       const tableMatch = findTableLongTextMatch(block, longTextLines)
       parts.push(renderTableHtml(block, tableMatch))
       if (tableMatch) highlightCount++
     } else {
       const blockText = getBlockPlainText(block)
-      // 检查是否属于某个长文本要素
       const longMatch = findBlockLongTextMatch(blockText, longTextLines)
-      // 如果此 block 被长文本覆盖,只做长文本高亮,不做短文本高亮
-      const shortMap = longMatch ? [] : shortTexts
-      parts.push(renderBlockHtml(block, shortMap, longMatch, (n) => { highlightCount += n }))
+
+      if (longMatch) {
+        // 如果和当前分组是同一个要素,继续累积
+        if (currentLongKey === longMatch.elementKey) {
+          longGroupHtml += renderBlockHtml(block, [], null, () => {})
+        } else {
+          // 不同要素,先 flush 上一组,再开始新组
+          flushLongGroup()
+          currentLongKey = longMatch.elementKey
+          currentLongMatch = longMatch
+          longGroupHtml = renderBlockHtml(block, [], null, () => {})
+        }
+      } else {
+        // 非长文本 block,先 flush 再正常渲染
+        flushLongGroup()
+        parts.push(renderBlockHtml(block, shortTexts, null, (n) => { highlightCount += n }))
+      }
     }
   }
+  flushLongGroup() // flush 最后一组
 
   elementHighlightCount.value = highlightCount
   docHtml.value = parts.join('')
@@ -901,15 +930,7 @@ function renderBlockHtml(block, shortMap, longMatch, countFn) {
   }
 
   if (!inner) inner = '&nbsp;'
-  let blockHtml = `<${tag} class="${cls}"${styleAttr} data-block-id="${block.id}">${inner}</${tag}>`
-
-  // 长文本高亮:用 div 边框包裹整个段落块(类似表格的包裹方式)
-  if (longMatch) {
-    const borderColor = darkenColor(longMatch.color)
-    blockHtml = `<div class="elem-highlight-wrap" data-elem-key="${longMatch.elementKey}" data-value-id="${longMatch.valueId || ''}" title="${escapeAttr(longMatch.elementName)}" style="border:2px solid ${borderColor};border-radius:4px;padding:6px 8px;margin:4px 0;cursor:pointer;">${blockHtml}</div>`
-  }
-
-  return blockHtml
+  return `<${tag} class="${cls}"${styleAttr} data-block-id="${block.id}">${inner}</${tag}>`
 }
 
 function renderTableHtml(block, longMatch) {