Skip to content

I
Ifar-Xml-Edtor
Commit a9fea765 by pangchong
Options

style(editor-toolbar): 优化模板格式和样式代码排版 

- 调整多处template模板内元素的换行和缩进格式，提升代码可读性
- 统一内联样式的编写方式，增加代码一致性
- 合并多处内联div描述文本为单行格式，减少冗余换行
- 修正table标签内容格式，增加标签换行保持格式整洁
- 调整多个flex布局div的格式和换行，增强代码结构清晰度
- 优化按钮类名和样式绑定的写法，确保条件渲染逻辑清晰
- 修改CompareModal组件样式的transition属性换行，避免代码拥挤
parent d1aae467
Showing with 56 additions and 59 deletions
src/views/editor/components/EditorToolbar/components/CompareModal/index.vue
......@@ -692,7 +692,9 @@ div.doc-node-wrapper[data-diff-status='modified'] {
background-color: color-mix(in srgb, var(--primary-color) 15%, transparent);
border: 1px solid color-mix(in srgb, var(--primary-color) 20%, transparent);
border-radius: 4px;
transition: background-color 0.15s, border-color 0.15s;
transition:
background-color 0.15s,
border-color 0.15s;
}
.compare-minimap-slider:hover {
background-color: color-mix(in srgb, var(--primary-color) 25%, transparent);
......
src/views/editor/components/EditorToolbar/index.vue
......@@ -29,15 +29,7 @@
<!-- 组 2：插入元素按钮组 -->
<div class="flex items-center gap-0.5 flex-shrink-0">
<n-popover
v-for="btn in GREEN_BUTTONS"
:key="btn.tag"
trigger="hover"
placement="bottom"
:show-arrow="true"
:raw="true"
:delay="150"
>
<n-popover v-for="btn in GREEN_BUTTONS" :key="btn.tag" trigger="hover" placement="bottom" :show-arrow="true" :raw="true" :delay="150">
<template #trigger>
<button
type="button"
......@@ -64,16 +56,19 @@
</span>
<span class="text-[8px] bg-primary-1 text-primary px-1 rounded font-bold scale-[0.9]">GRAPHIC</span>
</div>
<div class="w-full aspect-[16/10] rounded border border-divider bg-fill-3 flex flex-col items-center justify-center p-2 relative shadow-inner overflow-hidden"
style="background-image: radial-gradient(circle, rgba(0, 0, 0, 0.04) 1px, transparent 1px); background-size: 10px 10px">
<div
class="w-full aspect-[16/10] rounded border border-divider bg-fill-3 flex flex-col items-center justify-center p-2 relative shadow-inner overflow-hidden"
style="
background-image: radial-gradient(circle, rgba(0, 0, 0, 0.04) 1px, transparent 1px);
background-size: 10px 10px;
"
>
<n-icon size="20" class="text-color3"><component :is="btn.icon" /></n-icon>
<div class="text-[8px] text-color3 mt-1 scale-[0.9]">航空器结构部件装配原理图纸页</div>
<div class="text-[7px] text-color3/60 font-mono scale-[0.8]">GNBR Ref: n_mm_282400_5_aem0_01_00</div>
</div>
</div>
<div class="text-[10px] text-color3 mt-2 text-center leading-relaxed">
在工卡中插入附图图纸页，支持查看大图。
</div>
<div class="text-[10px] text-color3 mt-2 text-center leading-relaxed">在工卡中插入附图图纸页，支持查看大图。</div>
</template>
<template v-else-if="btn.tag === 'TABLE'">
<div class="border border-divider rounded-lg bg-fill-2 p-2 flex flex-col gap-1.5">
......@@ -101,9 +96,7 @@
</tbody>
</table>
</div>
<div class="text-[10px] text-color3 mt-2 text-center leading-relaxed">
插入表格节点，支持调整宽高、行列及对齐方式。
</div>
<div class="text-[10px] text-color3 mt-2 text-center leading-relaxed">插入表格节点，支持调整宽高、行列及对齐方式。</div>
</template>
<template v-else-if="btn.tag === 'TEMPLATE'">
<div class="border border-divider rounded-lg bg-fill-2 p-2 flex flex-col gap-1.5">
......@@ -124,9 +117,7 @@
</div>
</div>
</div>
<div class="text-[10px] text-color3 mt-2 text-center leading-relaxed">
插入中英文双语对照模板块，用于编辑具体步骤。
</div>
<div class="text-[10px] text-color3 mt-2 text-center leading-relaxed">插入中英文双语对照模板块，用于编辑具体步骤。</div>
</template>
<template v-else-if="btn.tag === 'SIGNOFF'">
<div class="border border-divider rounded-lg bg-fill-2 p-2 flex flex-col gap-1.5">
......@@ -138,21 +129,29 @@
<span class="text-[8px] bg-primary-1 text-primary px-1 rounded font-bold scale-[0.9]">SIGNOFF</span>
</div>
<div class="flex justify-end p-0.5">
<table class="border-collapse border border-black text-[8px] bg-white text-black leading-tight scale-[0.95] origin-right">
<table
class="border-collapse border border-black text-[8px] bg-white text-black leading-tight scale-[0.95] origin-right"
>
<tbody>
<tr class="h-6">
<td class="px-1 border border-black font-bold text-center w-12 bg-gray-50">工作者<br/>Per.By</td>
<td class="px-1 border border-black font-bold text-center w-12 bg-gray-50">
工作者
<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">检查者<br/>Insp.By</td>
<td class="px-1 border border-black font-bold text-center w-12 bg-gray-50">
检查者
<br />
Insp.By
</td>
<td class="px-1 border border-black text-center w-16 font-mono text-gray-500">李四 9568</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="text-[10px] text-color3 mt-2 text-center leading-relaxed">
插入质量签字确认栏，支持自定义签章级别。
</div>
<div class="text-[10px] text-color3 mt-2 text-center leading-relaxed">插入质量签字确认栏，支持自定义签章级别。</div>
</template>
<template v-else-if="btn.tag === 'SELECTION'">
<div class="border border-divider rounded-lg bg-fill-2 p-2 flex flex-col gap-1.5">
......@@ -165,7 +164,9 @@
</div>
<div class="space-y-1.5 p-0.5">
<!-- 选项 1 -->
<div class="flex items-center space-x-2 bg-card px-2 py-0.5 rounded border border-divider shadow-sm text-[8px] scale-[0.95] origin-left">
<div
class="flex items-center space-x-2 bg-card px-2 py-0.5 rounded border border-divider shadow-sm text-[8px] scale-[0.95] origin-left"
>
<div class="w-2 h-2 rounded-full border border-primary flex items-center justify-center shrink-0">
<div class="w-1 h-1 rounded-full bg-primary"></div>
</div>
......@@ -175,7 +176,9 @@
</div>
</div>
<!-- 选项 2 -->
<div class="flex items-center space-x-2 bg-card px-2 py-0.5 rounded border border-divider shadow-sm text-[8px] scale-[0.95] origin-left">
<div
class="flex items-center space-x-2 bg-card px-2 py-0.5 rounded border border-divider shadow-sm text-[8px] scale-[0.95] origin-left"
>
<div class="w-2 h-2 rounded-full border border-divider shrink-0"></div>
<div class="flex-1 flex items-center gap-1 font-semibold">
<span class="text-color2">选项2</span>
......@@ -184,9 +187,7 @@
</div>
</div>
</div>
<div class="text-[10px] text-color3 mt-2 text-center leading-relaxed">
插入单选或多选项组，限制操作填报的数据。
</div>
<div class="text-[10px] text-color3 mt-2 text-center leading-relaxed">插入单选或多选项组，限制操作填报的数据。</div>
</template>
<template v-else-if="btn.tag === 'RECORD-LINE'">
<div class="border border-divider rounded-lg bg-fill-2 p-2 flex flex-col gap-1.5">
......@@ -199,29 +200,23 @@
</div>
<div class="bg-card border border-divider rounded p-1.5 flex items-center gap-1.5 text-[8px] font-semibold">
<span class="text-color2">电阻测量值:</span>
<span class="inline-block border-b min-w-[50px] text-center text-primary font-mono text-[8px] font-bold"
:style="{ borderBottomColor: 'var(--primary-color)', borderBottomWidth: '1px' }">
<span
class="inline-block border-b min-w-[50px] text-center text-primary font-mono text-[8px] font-bold"
:style="{ borderBottomColor: 'var(--primary-color)', borderBottomWidth: '1px' }"
>
[输入数值]
</span>
<span class="text-color3">Ω</span>
</div>
</div>
<div class="text-[10px] text-color3 mt-2 text-center leading-relaxed">
插入下划线记录行，提供数据填报输入项。
</div>
<div class="text-[10px] text-color3 mt-2 text-center leading-relaxed">插入下划线记录行，提供数据填报输入项。</div>
</template>
</div>
</div>
</n-popover>
<!-- 插入 XML 片段 -->
<n-popover
trigger="hover"
placement="bottom"
:show-arrow="true"
:raw="true"
:delay="150"
>
<n-popover trigger="hover" placement="bottom" :show-arrow="true" :raw="true" :delay="150">
<template #trigger>
<button
type="button"
......@@ -238,14 +233,14 @@
<span>XML片段 效果预览</span>
</div>
<div class="preview-popover-content border border-dashed border-divider rounded-lg p-2.5 bg-fill-1 text-xs">
<pre class="font-mono text-[9px] leading-relaxed text-color2 overflow-x-auto select-none"><span class="text-primary font-bold">&lt;WARNING&gt;</span>
<pre
class="font-mono text-[9px] leading-relaxed text-color2 overflow-x-auto select-none"
><span class="text-primary font-bold">&lt;WARNING&gt;</span>
<span class="text-primary font-bold">&lt;PARAC&gt;</span>警示说明<span class="text-primary font-bold">&lt;/PARAC&gt;</span>
<span class="text-primary font-bold">&lt;PARA&gt;</span>Warning...<span class="text-primary font-bold">&lt;/PARA&gt;</span>
<span class="text-primary font-bold">&lt;/WARNING&gt;</span></pre>
</div>
<div class="text-[10px] text-color3 mt-2 text-center leading-relaxed">
支持快捷写入和插入自定义 XML 片段。
</div>
<div class="text-[10px] text-color3 mt-2 text-center leading-relaxed">支持快捷写入和插入自定义 XML 片段。</div>
</div>
</n-popover>
</div>
......@@ -257,23 +252,23 @@
type="button"
class="toolbar-btn flex items-center gap-1.5 px-2.5 h-7 rounded transition-all select-none focus:outline-none flex-shrink-0"
:class="[
batchTranslateModalRef?.loading
? 'animate-pulse'
: '',
batchTranslateModalRef?.completed
? ''
: batchTranslateModalRef?.loading
? ''
: 'text-color2 hover:bg-fill-2 active:bg-fill-3'
batchTranslateModalRef?.loading ? 'animate-pulse' : '',
batchTranslateModalRef?.completed ? '' : batchTranslateModalRef?.loading ? '' : 'text-color2 hover:bg-fill-2 active:bg-fill-3'
]"
:style="batchTranslateModalRef?.loading ? {
:style="
batchTranslateModalRef?.loading
? {
backgroundColor: themeVars.primaryColor,
color: '#fff',
boxShadow: `0 0 8px ${themeVars.primaryColor}73`
} : batchTranslateModalRef?.completed ? {
}
: batchTranslateModalRef?.completed
? {
backgroundColor: `${themeVars.successColor}1a`,
color: themeVars.successColor
} : {}"
}
: {}
"
@click="handleTranslate('batch')"
>
<n-icon class="text-base">
......
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