Commit af2fbfbe by pangchong

refactor(compare): 优化代码格式与注释风格

- 统一 cloneWithDiff 函数的格式,删除多余空行
- 添加并规范子节点 ID 到新 ID 的映射注释
- 统一比对控制相关变量的注释风格
- 清理和规范比对模块中的多余空行
- 优化滚动同步相关代码的空行与注释
- 修正返回对象格式缩进,统一样式设置格式
- 去除 import 和代码中多余空白行,提高代码整洁度
parent 3c28c342
...@@ -236,7 +236,7 @@ export function serializeTreeToXmlWithMapping( ...@@ -236,7 +236,7 @@ export function serializeTreeToXmlWithMapping(
const childrenXml = childrenParts.join(newline) const childrenXml = childrenParts.join(newline)
xml = `${pad}<${openTag}>${newline}${childrenXml}${newline}${pad}</${node.tagName}>` xml = `${pad}<${openTag}>${newline}${childrenXml}${newline}${pad}</${node.tagName}>`
mapping.set(node.id, { startLine, endLine: state.currentLine }) mapping.set(node.id, { startLine, endLine: state.currentLine })
return { xml, mapping } return { xml, mapping }
} }
......
...@@ -8,12 +8,9 @@ import type { DiffStatusType, ScrollSide, RenderDiffHunk, XmlDiffHunk } from '.. ...@@ -8,12 +8,9 @@ import type { DiffStatusType, ScrollSide, RenderDiffHunk, XmlDiffHunk } from '..
import { MIN_THUMB_SIZE_PCT } from '../constants' import { MIN_THUMB_SIZE_PCT } from '../constants'
// 辅助函数:根据 status 克隆节点 // 辅助函数:根据 status 克隆节点
function cloneWithDiff( function cloneWithDiff(node: XmlNode, status: DiffStatusType = 'none'): XmlNode {
node: XmlNode,
status: DiffStatusType = 'none'
): XmlNode {
const children = node.children.map((c) => cloneWithDiff(c, status)) const children = node.children.map((c) => cloneWithDiff(c, status))
// 建立子节点原始 ID 到克隆后新 ID 的映射 // 建立子节点原始 ID 到克隆后新 ID 的映射
const childIdMap = new Map<string, string>() const childIdMap = new Map<string, string>()
for (let idx = 0; idx < node.children.length; idx++) { for (let idx = 0; idx < node.children.length; idx++) {
...@@ -139,7 +136,7 @@ function diffXmlTrees(oldNode: XmlNode | null, newNode: XmlNode | null): { oldDi ...@@ -139,7 +136,7 @@ function diffXmlTrees(oldNode: XmlNode | null, newNode: XmlNode | null): { oldDi
const newChildrenDiff: XmlNode[] = [] const newChildrenDiff: XmlNode[] = []
const alignment = alignChildren(oldNode!.children, newNode!.children) const alignment = alignChildren(oldNode!.children, newNode!.children)
// 建立子节点原始 ID 到比对后新 ID 的映射 // 建立子节点原始 ID 到比对后新 ID 的映射
const oldIdMap = new Map<string, string>() const oldIdMap = new Map<string, string>()
const newIdMap = new Map<string, string>() const newIdMap = new Map<string, string>()
...@@ -378,7 +375,7 @@ export function useCompareModal() { ...@@ -378,7 +375,7 @@ export function useCompareModal() {
// 比对控制 // 比对控制
const compared = ref(false) const compared = ref(false)
const comparing = ref(false) // 比对进行中(加载状态) const comparing = ref(false) // 比对进行中(加载状态)
const showXmlCompare = ref(true) const showXmlCompare = ref(true)
const showRenderCompare = ref(true) const showRenderCompare = ref(true)
...@@ -441,8 +438,6 @@ export function useCompareModal() { ...@@ -441,8 +438,6 @@ export function useCompareModal() {
} }
} }
// 核心比对逻辑(async:先格式化写回编辑器,让 UI 渲染加载动画后再执行重计算) // 核心比对逻辑(async:先格式化写回编辑器,让 UI 渲染加载动画后再执行重计算)
const handleCompare = async () => { const handleCompare = async () => {
if (!leftXml.value.trim()) { if (!leftXml.value.trim()) {
...@@ -525,7 +520,7 @@ export function useCompareModal() { ...@@ -525,7 +520,7 @@ export function useCompareModal() {
// 记录右侧编辑器到原始格式化行号的对应关系 // 记录右侧编辑器到原始格式化行号的对应关系
rightEditorToOriginal.value.set(displayLineIndex, rightRealLine) rightEditorToOriginal.value.set(displayLineIndex, rightRealLine)
rightOriginalToEditor.value.set(rightRealLine, displayLineIndex) rightOriginalToEditor.value.set(rightRealLine, displayLineIndex)
rightRealLine++ rightRealLine++
displayLineIndex++ displayLineIndex++
} }
...@@ -750,7 +745,7 @@ export function useCompareModal() { ...@@ -750,7 +745,7 @@ export function useCompareModal() {
const moveRatio = deltaX / (trackWidth - thumbWidth || 1) const moveRatio = deltaX / (trackWidth - thumbWidth || 1)
const newScrollLeft = Math.max(0, Math.min(maxScrollLeft, startScrollLeft + moveRatio * maxScrollLeft)) const newScrollLeft = Math.max(0, Math.min(maxScrollLeft, startScrollLeft + moveRatio * maxScrollLeft))
scroller.scrollLeft = newScrollLeft scroller.scrollLeft = newScrollLeft
// 双侧横向滚动同步 // 双侧横向滚动同步
const otherSide = side === 'left' ? 'right' : 'left' const otherSide = side === 'left' ? 'right' : 'left'
const otherScroller = document.querySelector(`.xml-compare-${otherSide} .cm-scroller`) as HTMLElement const otherScroller = document.querySelector(`.xml-compare-${otherSide} .cm-scroller`) as HTMLElement
...@@ -783,7 +778,7 @@ export function useCompareModal() { ...@@ -783,7 +778,7 @@ export function useCompareModal() {
const ratio = clickX / trackWidth const ratio = clickX / trackWidth
const maxScrollLeft = scroller.scrollWidth - scroller.clientWidth const maxScrollLeft = scroller.scrollWidth - scroller.clientWidth
const newScrollLeft = ratio * maxScrollLeft const newScrollLeft = ratio * maxScrollLeft
scroller.scrollLeft = newScrollLeft scroller.scrollLeft = newScrollLeft
const otherSide = side === 'left' ? 'right' : 'left' const otherSide = side === 'left' ? 'right' : 'left'
...@@ -838,10 +833,10 @@ export function useCompareModal() { ...@@ -838,10 +833,10 @@ export function useCompareModal() {
const totalPx = scrollTotalHeight.value || 1 const totalPx = scrollTotalHeight.value || 1
const top = Math.min((gutterScrollTop.value / totalPx) * 100, 95) const top = Math.min((gutterScrollTop.value / totalPx) * 100, 95)
const height = Math.min((gutterClientHeight.value / totalPx) * 100, 100 - top) const height = Math.min((gutterClientHeight.value / totalPx) * 100, 100 - top)
return { return {
top: `${top}%`, top: `${top}%`,
height: `${Math.max(height, 3)}%`, height: `${Math.max(height, 3)}%`,
minHeight: '30px' minHeight: '30px'
} }
}) })
...@@ -865,9 +860,9 @@ export function useCompareModal() { ...@@ -865,9 +860,9 @@ export function useCompareModal() {
const start = i const start = i
while (i < n && cls[i] === 'diff-added-placeholder') i++ while (i < n && cls[i] === 'diff-added-placeholder') i++
const count = i - start const count = i - start
result.push({ result.push({
type: 'added', type: 'added',
style: { top: `${(start / n) * 100}%`, height: `${Math.max(0.5, (count / n) * 100)}%`, minHeight: '3px' } style: { top: `${(start / n) * 100}%`, height: `${Math.max(0.5, (count / n) * 100)}%`, minHeight: '3px' }
}) })
} else { } else {
i++ i++
...@@ -1049,10 +1044,10 @@ export function useCompareModal() { ...@@ -1049,10 +1044,10 @@ export function useCompareModal() {
const totalPx = renderTotalHeight.value || 1 const totalPx = renderTotalHeight.value || 1
const top = Math.min((renderScrollTop.value / totalPx) * 100, 95) const top = Math.min((renderScrollTop.value / totalPx) * 100, 95)
const height = Math.min((renderClientHeight.value / totalPx) * 100, 100 - top) const height = Math.min((renderClientHeight.value / totalPx) * 100, 100 - top)
return { return {
top: `${top}%`, top: `${top}%`,
height: `${Math.max(height, 3)}%`, height: `${Math.max(height, 3)}%`,
minHeight: '30px' minHeight: '30px'
} }
}) })
...@@ -1104,7 +1099,7 @@ export function useCompareModal() { ...@@ -1104,7 +1099,7 @@ export function useCompareModal() {
let xmlContent = (event.target?.result as string) || '' let xmlContent = (event.target?.result as string) || ''
// 去除 <?xml ...?> 声明头 // 去除 <?xml ...?> 声明头
xmlContent = xmlContent.replace(/<\?xml.*?\?>/gi, '').trim() xmlContent = xmlContent.replace(/<\?xml.*?\?>/gi, '').trim()
try { try {
const tree = parseXmlToTree(xmlContent) const tree = parseXmlToTree(xmlContent)
rightXml.value = serializeTreeToXml(tree, 0, false) rightXml.value = serializeTreeToXml(tree, 0, false)
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment