Commit 1bb9b364 by pangchong

feat: 格式化代码

parent 5af0d0fb
...@@ -941,13 +941,19 @@ export function useCompareModal() { ...@@ -941,13 +941,19 @@ export function useCompareModal() {
// 2. 临时关闭 transition(避免 paddingBottom 动画导致 offsetHeight 读到中间值) // 2. 临时关闭 transition(避免 paddingBottom 动画导致 offsetHeight 读到中间值)
const allNodes = [...leftAll, ...rightAll] const allNodes = [...leftAll, ...rightAll]
allNodes.forEach((el) => { el.style.transition = 'none' }) allNodes.forEach((el) => {
el.style.transition = 'none'
})
// 强制 reflow,使 transition:none 立即生效 // 强制 reflow,使 transition:none 立即生效
void lc.offsetHeight void lc.offsetHeight
// 3. 清除所有旧的 paddingBottom // 3. 清除所有旧的 paddingBottom
leftAll.forEach((el) => { el.style.paddingBottom = '' }) leftAll.forEach((el) => {
rightAll.forEach((el) => { el.style.paddingBottom = '' }) el.style.paddingBottom = ''
})
rightAll.forEach((el) => {
el.style.paddingBottom = ''
})
// 再次强制 reflow,确保清除立即生效 // 再次强制 reflow,确保清除立即生效
void lc.offsetHeight void lc.offsetHeight
...@@ -980,7 +986,9 @@ export function useCompareModal() { ...@@ -980,7 +986,9 @@ export function useCompareModal() {
// 5. 补偿完成后在下一帧恢复 transition // 5. 补偿完成后在下一帧恢复 transition
requestAnimationFrame(() => { requestAnimationFrame(() => {
allNodes.forEach((el) => { el.style.transition = '' }) allNodes.forEach((el) => {
el.style.transition = ''
})
}) })
} }
......
...@@ -94,11 +94,16 @@ ...@@ -94,11 +94,16 @@
@contextmenu.prevent="isDiffMode ? null : handleCellContextMenu(cell, row.id, $event)" @contextmenu.prevent="isDiffMode ? null : handleCellContextMenu(cell, row.id, $event)"
> >
<!-- 属性变更徽标:absolute 定位在单元格右上角,不侵入内容流 --> <!-- 属性变更徽标:absolute 定位在单元格右上角,不侵入内容流 -->
<n-popover v-if="cell.rawNode?.attrDiffs && cell.rawNode.attrDiffs.length > 0" trigger="hover" placement="top-end" style="max-width: 380px"> <n-popover
v-if="cell.rawNode?.attrDiffs && cell.rawNode.attrDiffs.length > 0"
trigger="hover"
placement="top-end"
style="max-width: 380px"
>
<template #trigger> <template #trigger>
<span <span
class="attr-diff-badge absolute -top-2 right-0 inline-flex items-center gap-0.5 px-1.5 py-0.5 rounded text-[10px] font-bold font-mono cursor-pointer select-none shadow-md z-20 pointer-events-auto transition-all hover:opacity-90" class="attr-diff-badge absolute -top-2 right-0 inline-flex items-center gap-0.5 px-1.5 py-0.5 rounded text-[10px] font-bold font-mono cursor-pointer select-none shadow-md z-20 pointer-events-auto transition-all hover:opacity-90"
style="background: #f59e0b; color: #fff; line-height: 1.2;" style="background: #f59e0b; color: #fff; line-height: 1.2"
@click.stop @click.stop
> >
🏷️ {{ cell.rawNode.tagName }} 🏷️ {{ cell.rawNode.tagName }}
...@@ -112,7 +117,9 @@ ...@@ -112,7 +117,9 @@
<span class="font-semibold">{{ diff.key }}:</span> <span class="font-semibold">{{ diff.key }}:</span>
<span class="line-through text-red-500 px-1 bg-red-500/10 rounded">{{ diff.oldVal || '(空)' }}</span> <span class="line-through text-red-500 px-1 bg-red-500/10 rounded">{{ diff.oldVal || '(空)' }}</span>
<span class="text-amber-500 font-bold"></span> <span class="text-amber-500 font-bold"></span>
<span class="text-emerald-600 dark:text-emerald-400 font-bold px-1 bg-emerald-500/10 rounded">{{ diff.newVal || '(空)' }}</span> <span class="text-emerald-600 dark:text-emerald-400 font-bold px-1 bg-emerald-500/10 rounded">
{{ diff.newVal || '(空)' }}
</span>
</div> </div>
</div> </div>
</n-popover> </n-popover>
...@@ -231,11 +238,16 @@ ...@@ -231,11 +238,16 @@
@contextmenu.prevent="isDiffMode ? null : handleCellContextMenu(cell, row.id, $event)" @contextmenu.prevent="isDiffMode ? null : handleCellContextMenu(cell, row.id, $event)"
> >
<!-- 属性变更徽标:absolute 定位在单元格右上角,不侵入内容流 --> <!-- 属性变更徽标:absolute 定位在单元格右上角,不侵入内容流 -->
<n-popover v-if="cell.rawNode?.attrDiffs && cell.rawNode.attrDiffs.length > 0" trigger="hover" placement="top-end" style="max-width: 380px"> <n-popover
v-if="cell.rawNode?.attrDiffs && cell.rawNode.attrDiffs.length > 0"
trigger="hover"
placement="top-end"
style="max-width: 380px"
>
<template #trigger> <template #trigger>
<span <span
class="attr-diff-badge absolute -top-2 right-0 inline-flex items-center gap-0.5 px-1.5 py-0.5 rounded text-[10px] font-bold font-mono cursor-pointer select-none shadow-md z-20 pointer-events-auto transition-all hover:opacity-90" class="attr-diff-badge absolute -top-2 right-0 inline-flex items-center gap-0.5 px-1.5 py-0.5 rounded text-[10px] font-bold font-mono cursor-pointer select-none shadow-md z-20 pointer-events-auto transition-all hover:opacity-90"
style="background: #f59e0b; color: #fff; line-height: 1.2;" style="background: #f59e0b; color: #fff; line-height: 1.2"
@click.stop @click.stop
> >
🏷️ {{ cell.rawNode.tagName }} 🏷️ {{ cell.rawNode.tagName }}
...@@ -249,7 +261,9 @@ ...@@ -249,7 +261,9 @@
<span class="font-semibold">{{ diff.key }}:</span> <span class="font-semibold">{{ diff.key }}:</span>
<span class="line-through text-red-500 px-1 bg-red-500/10 rounded">{{ diff.oldVal || '(空)' }}</span> <span class="line-through text-red-500 px-1 bg-red-500/10 rounded">{{ diff.oldVal || '(空)' }}</span>
<span class="text-amber-500 font-bold"></span> <span class="text-amber-500 font-bold"></span>
<span class="text-emerald-600 dark:text-emerald-400 font-bold px-1 bg-emerald-500/10 rounded">{{ diff.newVal || '(空)' }}</span> <span class="text-emerald-600 dark:text-emerald-400 font-bold px-1 bg-emerald-500/10 rounded">
{{ diff.newVal || '(空)' }}
</span>
</div> </div>
</div> </div>
</n-popover> </n-popover>
......
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