Skip to content

I
Ifar-Xml-Edtor
Commit 16e14a6e by pangchong
Options

feat: 优化工卡对比样式

parent 8ec98afc
Showing with 59 additions and 72 deletions
src/bx/components/DocNodeRenderer/SignoffRenderer.vue
......@@ -14,7 +14,7 @@
<!-- 签名/状态栏 -->
<td class="px-2 border border-black text-center w-32 font-mono">
<span v-if="col.isNA" style="color: red" class="font-bold">N/A</span>
<span v-else-if="col.badge" class="font-bold text-sm bg-gray-100 px-2 py-0.5 rounded border border-gray-300">
<span v-else-if="col.badge" class="font-bold text-sm bg-fill-2 px-2 py-0.5 rounded border border-divider">
{{ col.badge }}
</span>
<span v-else>{{ col.value }}</span>
......
src/views/editor/components/DocNodeRenderer/index.vue
......@@ -45,9 +45,9 @@
</div>
<div v-for="diff in node.attrDiffs" :key="diff.key" class="flex items-center gap-1.5 flex-wrap">
<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="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="line-through text-danger px-1 bg-danger/10 rounded">{{ diff.oldVal || '(空)' }}</span>
<span class="text-warning font-bold">➔</span>
<span class="text-success font-bold px-1 bg-success/10 rounded">{{ diff.newVal || '(空)' }}</span>
</div>
</div>
</n-popover>
......@@ -1024,7 +1024,7 @@
<span
v-if="node.attributes.TYPE !== 'LIST' && (node.attributes.MANDATORY === 'Y' || !node.attributes.MANDATORY)"
class="text-red-500 font-bold ml-1"
class="text-danger font-bold ml-1"
>
*
</span>
......@@ -1053,7 +1053,7 @@
(parent.attributes.MANDATORY === 'Y' || !parent.attributes.MANDATORY) &&
parent.children[parent.children.length - 1].id === node.id
"
class="text-red-500 font-bold ml-1"
class="text-danger font-bold ml-1"
>
*
</span>
......@@ -1367,9 +1367,9 @@
</div>
<div v-for="diff in node.attrDiffs" :key="diff.key" class="flex items-center gap-1.5 flex-wrap">
<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="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="line-through text-danger px-1 bg-danger/10 rounded">{{ diff.oldVal || '(空)' }}</span>
<span class="text-warning font-bold">➔</span>
<span class="text-success font-bold px-1 bg-success/10 rounded">{{ diff.newVal || '(空)' }}</span>
</div>
</div>
</n-popover>
......
src/views/editor/components/EditorToolbar/components/CompareModal/index.vue
......@@ -628,32 +628,23 @@ defineExpose({
background-color: rgba(102, 187, 106, 0.12) !important;
}
// 差异空白对齐高亮
:deep(.diff-removed-placeholder) {
background-color: rgba(239, 83, 80, 0.04) !important;
background-image: repeating-linear-gradient(
-45deg,
transparent,
transparent 4px,
rgba(239, 83, 80, 0.08) 4px,
rgba(239, 83, 80, 0.08) 8px
) !important;
}
// 差异空白对齐高亮（使用中性灰斜纹，清晰区别于实际新增/删除版）
:deep(.diff-removed-placeholder),
:deep(.diff-added-placeholder) {
background-color: rgba(102, 187, 106, 0.04) !important;
background-color: rgba(160, 160, 160, 0.05) !important;
background-image: repeating-linear-gradient(
-45deg,
transparent,
transparent 4px,
rgba(102, 187, 106, 0.08) 4px,
rgba(102, 187, 106, 0.08) 8px
rgba(160, 160, 160, 0.08) 4px,
rgba(160, 160, 160, 0.08) 8px
) !important;
}
// 排版渲染结果比对样式（完全不侵入和改变原工卡的任何 Padding、Margin 和缩进样式）
:deep([data-diff-status='added']) {
background-color: rgba(102, 187, 106, 0.1) !important;
outline: 1.5px dashed rgba(102, 187, 106, 0.5) !important;
background-color: rgba(34, 197, 94, 0.12) !important;
outline: 1.5px dashed rgba(34, 197, 94, 0.6) !important;
outline-offset: 1px;
position: relative;
border-radius: 4px;
......@@ -662,23 +653,23 @@ defineExpose({
position: absolute;
left: -18px;
top: 2px;
color: #2e7d32;
color: #15803d;
font-weight: bold;
font-size: 12px;
line-height: 1;
z-index: 10;
background-color: rgba(102, 187, 106, 0.25);
background-color: rgba(34, 197, 94, 0.25);
padding: 1px 4px;
border-radius: 3px;
}
}
:deep([data-diff-status='removed']) {
background-color: rgba(239, 83, 80, 0.1) !important;
outline: 1.5px dashed rgba(239, 83, 80, 0.5) !important;
background-color: rgba(239, 68, 68, 0.12) !important;
outline: 1.5px dashed rgba(239, 68, 68, 0.6) !important;
outline-offset: 1px;
text-decoration: line-through !important;
opacity: 0.75;
opacity: 0.85;
position: relative;
border-radius: 4px;
&::before {
......@@ -686,12 +677,12 @@ defineExpose({
position: absolute;
left: -18px;
top: 2px;
color: #c62828;
color: #b91c1c;
font-weight: bold;
font-size: 12px;
line-height: 1;
z-index: 10;
background-color: rgba(239, 83, 80, 0.25);
background-color: rgba(239, 68, 68, 0.25);
padding: 1px 4px;
border-radius: 3px;
}
......@@ -762,78 +753,74 @@ html.dark :deep([data-diff-status='removed']::before) {
background-color: rgba(239, 68, 68, 0.35) !important;
}
// 占位排版比对结果（保持原工卡缩进与同行 1-to-1 完全对齐）
// 占位排版比对结果（中性灰虚线框 + 减淡灰字，与实际新增/删除形成清晰的左右对比）
:deep([data-diff-status='removed-placeholder']) {
background-color: rgba(239, 83, 80, 0.05) !important;
background-color: rgba(160, 160, 160, 0.05) !important;
background-image: repeating-linear-gradient(
-45deg,
transparent,
transparent 5px,
rgba(239, 83, 80, 0.08) 5px,
rgba(239, 83, 80, 0.08) 10px
rgba(160, 160, 160, 0.08) 5px,
rgba(160, 160, 160, 0.08) 10px
) !important;
outline: 1.5px dashed rgba(239, 83, 80, 0.4) !important;
outline: 1.5px dashed rgba(160, 160, 160, 0.35) !important;
outline-offset: 1px;
text-decoration: line-through !important;
opacity: 0.72;
opacity: 0.45;
position: relative;
border-radius: 4px;
&::before {
content: '-';
content: '已删除';
position: absolute;
left: -18px;
left: -42px;
top: 2px;
color: #c62828;
color: #71717a;
font-weight: bold;
font-size: 12px;
font-size: 10px;
line-height: 1;
z-index: 10;
background-color: rgba(239, 83, 80, 0.25);
padding: 1px 4px;
background-color: rgba(160, 160, 160, 0.2);
padding: 2px 4px;
border-radius: 3px;
}
}
:deep([data-diff-status='added-placeholder']) {
background-color: rgba(102, 187, 106, 0.05) !important;
background-color: rgba(160, 160, 160, 0.05) !important;
background-image: repeating-linear-gradient(
-45deg,
transparent,
transparent 5px,
rgba(102, 187, 106, 0.08) 5px,
rgba(102, 187, 106, 0.08) 10px
rgba(160, 160, 160, 0.08) 5px,
rgba(160, 160, 160, 0.08) 10px
) !important;
outline: 1.5px dashed rgba(102, 187, 106, 0.4) !important;
outline: 1.5px dashed rgba(160, 160, 160, 0.35) !important;
outline-offset: 1px;
opacity: 0.72;
opacity: 0.45;
position: relative;
border-radius: 4px;
&::before {
content: '+';
content: '未新增';
position: absolute;
left: -18px;
left: -42px;
top: 2px;
color: #2e7d32;
color: #71717a;
font-weight: bold;
font-size: 12px;
font-size: 10px;
line-height: 1;
z-index: 10;
background-color: rgba(102, 187, 106, 0.25);
padding: 1px 4px;
background-color: rgba(160, 160, 160, 0.2);
padding: 2px 4px;
border-radius: 3px;
}
}
:deep(.dark) [data-diff-status='removed-placeholder']::before,
html.dark :deep([data-diff-status='removed-placeholder']::before) {
color: #fca5a5 !important;
background-color: rgba(239, 68, 68, 0.3) !important;
}
html.dark :deep([data-diff-status='removed-placeholder']::before),
:deep(.dark) [data-diff-status='added-placeholder']::before,
html.dark :deep([data-diff-status='added-placeholder']::before) {
color: #86efac !important;
background-color: rgba(34, 197, 94, 0.3) !important;
color: #a1a1aa !important;
background-color: rgba(160, 160, 160, 0.25) !important;
}
// 单词级高亮显示
......
src/views/editor/components/EditorToolbar/index.vue
......@@ -134,18 +134,18 @@
>
<tbody>
<tr class="h-6">
<td class="px-1 border border-black font-bold text-center w-12 bg-gray-50">
<td class="px-1 border border-black font-bold text-center w-12 bg-fill-2">
工作者
<br />
Per.By
</td>
<td class="px-1 border border-black text-center w-16 font-mono text-gray-500">张三 9012</td>
<td class="px-1 border border-black font-bold text-center w-12 bg-gray-50">
<td class="px-1 border border-black text-center w-16 font-mono text-color3">张三 9012</td>
<td class="px-1 border border-black font-bold text-center w-12 bg-fill-2">
检查者
<br />
Insp.By
</td>
<td class="px-1 border border-black text-center w-16 font-mono text-gray-500">李四 9568</td>
<td class="px-1 border border-black text-center w-16 font-mono text-color3">李四 9568</td>
</tr>
</tbody>
</table>
......
src/views/editor/components/TableEditor/index.vue
......@@ -115,9 +115,9 @@
</div>
<div v-for="diff in cell.rawNode.attrDiffs" :key="diff.key" class="flex items-center gap-1.5 flex-wrap">
<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="text-amber-500 font-bold">➔</span>
<span class="text-emerald-600 dark:text-emerald-400 font-bold px-1 bg-emerald-500/10 rounded">
<span class="line-through text-danger px-1 bg-danger/10 rounded">{{ diff.oldVal || '(空)' }}</span>
<span class="text-warning font-bold">➔</span>
<span class="text-success font-bold px-1 bg-success/10 rounded">
{{ diff.newVal || '(空)' }}
</span>
</div>
......@@ -259,9 +259,9 @@
</div>
<div v-for="diff in cell.rawNode.attrDiffs" :key="diff.key" class="flex items-center gap-1.5 flex-wrap">
<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="text-amber-500 font-bold">➔</span>
<span class="text-emerald-600 dark:text-emerald-400 font-bold px-1 bg-emerald-500/10 rounded">
<span class="line-through text-danger px-1 bg-danger/10 rounded">{{ diff.oldVal || '(空)' }}</span>
<span class="text-warning font-bold">➔</span>
<span class="text-success font-bold px-1 bg-success/10 rounded">
{{ diff.newVal || '(空)' }}
</span>
</div>
......
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