Commit 4114f00e by pangchong

style(compare-modal): 优化模板表达式及格式调整

- 移除多余括号,简化条件表达式,提高代码可读性
- 为多行v-show指令添加换行,提升模板格式清晰度
- 统一并修正CSS过渡效果的transition写法,保证样式一致性
- 优化index.ts中空行和代码格式,提升代码整洁度
parent 71679edb
...@@ -281,9 +281,9 @@ export function useCompareModal() { ...@@ -281,9 +281,9 @@ export function useCompareModal() {
const getSelectedLineRange = (isNewSide: boolean): { start: number; end: number } | null => { const getSelectedLineRange = (isNewSide: boolean): { start: number; end: number } | null => {
const selection = window.getSelection() const selection = window.getSelection()
if (!selection || selection.isCollapsed || selection.rangeCount === 0) return null if (!selection || selection.isCollapsed || selection.rangeCount === 0) return null
const range = selection.getRangeAt(0) const range = selection.getRangeAt(0)
const getLineNumFromNode = (node: Node | null): number | null => { const getLineNumFromNode = (node: Node | null): number | null => {
let el = node as HTMLElement | null let el = node as HTMLElement | null
if (node && node.nodeType === Node.TEXT_NODE) { if (node && node.nodeType === Node.TEXT_NODE) {
...@@ -304,7 +304,7 @@ export function useCompareModal() { ...@@ -304,7 +304,7 @@ export function useCompareModal() {
const startNum = getLineNumFromNode(range.startContainer) const startNum = getLineNumFromNode(range.startContainer)
const endNum = getLineNumFromNode(range.endContainer) const endNum = getLineNumFromNode(range.endContainer)
if (startNum !== null && endNum !== null) { if (startNum !== null && endNum !== null) {
return { return {
start: Math.min(startNum, endNum), start: Math.min(startNum, endNum),
......
...@@ -68,10 +68,10 @@ ...@@ -68,10 +68,10 @@
v-if="oldXmlText" v-if="oldXmlText"
size="tiny" size="tiny"
secondary secondary
:type="(isEditingOld || editingOldRange) ? 'warning' : 'default'" :type="isEditingOld || editingOldRange ? 'warning' : 'default'"
@click="toggleEditOld" @click="toggleEditOld"
> >
{{ (isEditingOld || editingOldRange) ? '查看对比' : '编辑 XML' }} {{ isEditingOld || editingOldRange ? '查看对比' : '编辑 XML' }}
</CommonButton> </CommonButton>
<CommonButton size="tiny" secondary type="warning" @click="loadCurrentXml">使用当前打开的工卡</CommonButton> <CommonButton size="tiny" secondary type="warning" @click="loadCurrentXml">使用当前打开的工卡</CommonButton>
</div> </div>
...@@ -96,7 +96,13 @@ ...@@ -96,7 +96,13 @@
<div <div
v-for="(line, idx) in oldDiffLines" v-for="(line, idx) in oldDiffLines"
:key="idx" :key="idx"
v-show="!editingOldRange || !line.num || line.num < editingOldRange.start || line.num > editingOldRange.end || line.num === editingOldRange.start" v-show="
!editingOldRange ||
!line.num ||
line.num < editingOldRange.start ||
line.num > editingOldRange.end ||
line.num === editingOldRange.start
"
class="flex w-full group hover:bg-fill-2 min-h-[20px] cursor-pointer diff-line-row" class="flex w-full group hover:bg-fill-2 min-h-[20px] cursor-pointer diff-line-row"
:class="{ :class="{
'line-row-removed': line.type === 'removed', 'line-row-removed': line.type === 'removed',
...@@ -231,10 +237,10 @@ ...@@ -231,10 +237,10 @@
v-if="newXmlText" v-if="newXmlText"
size="tiny" size="tiny"
secondary secondary
:type="(isEditingNew || editingNewRange) ? 'primary' : 'default'" :type="isEditingNew || editingNewRange ? 'primary' : 'default'"
@click="toggleEditNew" @click="toggleEditNew"
> >
{{ (isEditingNew || editingNewRange) ? '查看对比' : '编辑 XML' }} {{ isEditingNew || editingNewRange ? '查看对比' : '编辑 XML' }}
</CommonButton> </CommonButton>
<CommonButton size="tiny" secondary type="primary" @click="handleXmlImportClick">选择 XML 文件导入</CommonButton> <CommonButton size="tiny" secondary type="primary" @click="handleXmlImportClick">选择 XML 文件导入</CommonButton>
</div> </div>
...@@ -259,7 +265,13 @@ ...@@ -259,7 +265,13 @@
<div <div
v-for="(line, idx) in newDiffLines" v-for="(line, idx) in newDiffLines"
:key="idx" :key="idx"
v-show="!editingNewRange || !line.num || line.num < editingNewRange.start || line.num > editingNewRange.end || line.num === editingNewRange.start" v-show="
!editingNewRange ||
!line.num ||
line.num < editingNewRange.start ||
line.num > editingNewRange.end ||
line.num === editingNewRange.start
"
class="flex w-full group hover:bg-fill-2 min-h-[20px] cursor-pointer diff-line-row" class="flex w-full group hover:bg-fill-2 min-h-[20px] cursor-pointer diff-line-row"
:class="{ :class="{
'line-row-added': line.type === 'added', 'line-row-added': line.type === 'added',
...@@ -618,7 +630,7 @@ div.doc-node-wrapper[data-diff-status='modified'] { ...@@ -618,7 +630,7 @@ div.doc-node-wrapper[data-diff-status='modified'] {
opacity: 1 !important; opacity: 1 !important;
overflow: hidden; overflow: hidden;
/* 展开过渡:弹性分配比和外边距立即变化,不透明度延迟 0.15s 淡入 */ /* 展开过渡:弹性分配比和外边距立即变化,不透明度延迟 0.15s 淡入 */
transition: transition:
flex 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) 0s, flex 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) 0s,
max-height 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) 0s, max-height 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) 0s,
min-height 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) 0s, min-height 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) 0s,
...@@ -642,7 +654,7 @@ div.doc-node-wrapper[data-diff-status='modified'] { ...@@ -642,7 +654,7 @@ div.doc-node-wrapper[data-diff-status='modified'] {
margin-bottom: 0 !important; margin-bottom: 0 !important;
opacity: 0 !important; opacity: 0 !important;
pointer-events: none; pointer-events: none;
transition: transition:
opacity 0.15s linear 0s, opacity 0.15s linear 0s,
flex 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) 0.08s, flex 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) 0.08s,
max-height 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) 0.08s, max-height 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) 0.08s,
...@@ -658,7 +670,7 @@ div.doc-node-wrapper[data-diff-status='modified'] { ...@@ -658,7 +670,7 @@ div.doc-node-wrapper[data-diff-status='modified'] {
opacity: 1 !important; opacity: 1 !important;
overflow: hidden; overflow: hidden;
/* 展开过渡:弹性大小和高度立即变化,不透明度延迟 0.15s 淡入 */ /* 展开过渡:弹性大小和高度立即变化,不透明度延迟 0.15s 淡入 */
transition: transition:
flex 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) 0s, flex 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) 0s,
max-height 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) 0s, max-height 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) 0s,
opacity 0.2s linear 0.15s !important; opacity 0.2s linear 0.15s !important;
...@@ -670,7 +682,7 @@ div.doc-node-wrapper[data-diff-status='modified'] { ...@@ -670,7 +682,7 @@ div.doc-node-wrapper[data-diff-status='modified'] {
max-height: 0 !important; max-height: 0 !important;
opacity: 0 !important; opacity: 0 !important;
pointer-events: none; pointer-events: none;
transition: transition:
opacity 0.15s linear 0s, opacity 0.15s linear 0s,
flex 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) 0.08s, flex 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) 0.08s,
max-height 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) 0.08s !important; max-height 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) 0.08s !important;
......
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