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