|
@@ -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) {
|
|
for (const block of blocks) {
|
|
|
if (block.type === 'table') {
|
|
if (block.type === 'table') {
|
|
|
- // 检查表格是否属于某个长文本要素
|
|
|
|
|
|
|
+ flushLongGroup()
|
|
|
const tableMatch = findTableLongTextMatch(block, longTextLines)
|
|
const tableMatch = findTableLongTextMatch(block, longTextLines)
|
|
|
parts.push(renderTableHtml(block, tableMatch))
|
|
parts.push(renderTableHtml(block, tableMatch))
|
|
|
if (tableMatch) highlightCount++
|
|
if (tableMatch) highlightCount++
|
|
|
} else {
|
|
} else {
|
|
|
const blockText = getBlockPlainText(block)
|
|
const blockText = getBlockPlainText(block)
|
|
|
- // 检查是否属于某个长文本要素
|
|
|
|
|
const longMatch = findBlockLongTextMatch(blockText, longTextLines)
|
|
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
|
|
elementHighlightCount.value = highlightCount
|
|
|
docHtml.value = parts.join('')
|
|
docHtml.value = parts.join('')
|
|
@@ -901,15 +930,7 @@ function renderBlockHtml(block, shortMap, longMatch, countFn) {
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
if (!inner) inner = ' '
|
|
if (!inner) inner = ' '
|
|
|
- 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) {
|
|
function renderTableHtml(block, longMatch) {
|