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 61 additions and 64 deletions
src/views/editor/components/EditorToolbar/components/CompareModal/index.vue
...@@ -692,7 +692,9 @@ div.doc-node-wrapper[data-diff-status='modified'] { ...@@ -692,7 +692,9 @@ div.doc-node-wrapper[data-diff-status='modified'] {
background-color: color-mix(in srgb, var(--primary-color) 15%, transparent); background-color: color-mix(in srgb, var(--primary-color) 15%, transparent);
border: 1px solid color-mix(in srgb, var(--primary-color) 20%, transparent); border: 1px solid color-mix(in srgb, var(--primary-color) 20%, transparent);
border-radius: 4px; 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 { .compare-minimap-slider:hover {
background-color: color-mix(in srgb, var(--primary-color) 25%, transparent); background-color: color-mix(in srgb, var(--primary-color) 25%, transparent);
......
src/views/editor/components/EditorToolbar/index.vue
...@@ -29,15 +29,7 @@ ...@@ -29,15 +29,7 @@
<!-- 组 2：插入元素按钮组 --> <!-- 组 2：插入元素按钮组 -->
<div class="flex items-center gap-0.5 flex-shrink-0"> <div class="flex items-center gap-0.5 flex-shrink-0">
<n-popover <n-popover v-for="btn in GREEN_BUTTONS" :key="btn.tag" trigger="hover" placement="bottom" :show-arrow="true" :raw="true" :delay="150">
v-for="btn in GREEN_BUTTONS"
:key="btn.tag"
trigger="hover"
placement="bottom"
:show-arrow="true"
:raw="true"
:delay="150"
>
<template #trigger> <template #trigger>
<button <button
type="button" type="button"
...@@ -64,16 +56,19 @@ ...@@ -64,16 +56,19 @@
</span> </span>
<span class="text-[8px] bg-primary-1 text-primary px-1 rounded font-bold scale-[0.9]">GRAPHIC</span> <span class="text-[8px] bg-primary-1 text-primary px-1 rounded font-bold scale-[0.9]">GRAPHIC</span>
</div> </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" <div
style="background-image: radial-gradient(circle, rgba(0, 0, 0, 0.04) 1px, transparent 1px); background-size: 10px 10px"> 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> <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-[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 class="text-[7px] text-color3/60 font-mono scale-[0.8]">GNBR Ref: n_mm_282400_5_aem0_01_00</div>
</div> </div>
</div> </div>
<div class="text-[10px] text-color3 mt-2 text-center leading-relaxed"> <div class="text-[10px] text-color3 mt-2 text-center leading-relaxed">在工卡中插入附图图纸页，支持查看大图。</div>
在工卡中插入附图图纸页，支持查看大图。
</div>
</template> </template>
<template v-else-if="btn.tag === 'TABLE'"> <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"> <div class="border border-divider rounded-lg bg-fill-2 p-2 flex flex-col gap-1.5">
...@@ -101,9 +96,7 @@ ...@@ -101,9 +96,7 @@
</tbody> </tbody>
</table> </table>
</div> </div>
<div class="text-[10px] text-color3 mt-2 text-center leading-relaxed"> <div class="text-[10px] text-color3 mt-2 text-center leading-relaxed">插入表格节点，支持调整宽高、行列及对齐方式。</div>
插入表格节点，支持调整宽高、行列及对齐方式。
</div>
</template> </template>
<template v-else-if="btn.tag === '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"> <div class="border border-divider rounded-lg bg-fill-2 p-2 flex flex-col gap-1.5">
...@@ -124,9 +117,7 @@ ...@@ -124,9 +117,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="text-[10px] text-color3 mt-2 text-center leading-relaxed"> <div class="text-[10px] text-color3 mt-2 text-center leading-relaxed">插入中英文双语对照模板块，用于编辑具体步骤。</div>
插入中英文双语对照模板块，用于编辑具体步骤。
</div>
</template> </template>
<template v-else-if="btn.tag === 'SIGNOFF'"> <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"> <div class="border border-divider rounded-lg bg-fill-2 p-2 flex flex-col gap-1.5">
...@@ -138,21 +129,29 @@ ...@@ -138,21 +129,29 @@
<span class="text-[8px] bg-primary-1 text-primary px-1 rounded font-bold scale-[0.9]">SIGNOFF</span> <span class="text-[8px] bg-primary-1 text-primary px-1 rounded font-bold scale-[0.9]">SIGNOFF</span>
</div> </div>
<div class="flex justify-end p-0.5"> <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> <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">工作者<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 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> <td class="px-1 border border-black text-center w-16 font-mono text-gray-500">李四 9568</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
</div> </div>
<div class="text-[10px] text-color3 mt-2 text-center leading-relaxed"> <div class="text-[10px] text-color3 mt-2 text-center leading-relaxed">插入质量签字确认栏，支持自定义签章级别。</div>
插入质量签字确认栏，支持自定义签章级别。
</div>
</template> </template>
<template v-else-if="btn.tag === 'SELECTION'"> <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"> <div class="border border-divider rounded-lg bg-fill-2 p-2 flex flex-col gap-1.5">
...@@ -165,7 +164,9 @@ ...@@ -165,7 +164,9 @@
</div> </div>
<div class="space-y-1.5 p-0.5"> <div class="space-y-1.5 p-0.5">
<!-- 选项 1 --> <!-- 选项 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-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 class="w-1 h-1 rounded-full bg-primary"></div>
</div> </div>
...@@ -175,7 +176,9 @@ ...@@ -175,7 +176,9 @@
</div> </div>
</div> </div>
<!-- 选项 2 --> <!-- 选项 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="w-2 h-2 rounded-full border border-divider shrink-0"></div>
<div class="flex-1 flex items-center gap-1 font-semibold"> <div class="flex-1 flex items-center gap-1 font-semibold">
<span class="text-color2">选项2</span> <span class="text-color2">选项2</span>
...@@ -184,9 +187,7 @@ ...@@ -184,9 +187,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="text-[10px] text-color3 mt-2 text-center leading-relaxed"> <div class="text-[10px] text-color3 mt-2 text-center leading-relaxed">插入单选或多选项组，限制操作填报的数据。</div>
插入单选或多选项组，限制操作填报的数据。
</div>
</template> </template>
<template v-else-if="btn.tag === 'RECORD-LINE'"> <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"> <div class="border border-divider rounded-lg bg-fill-2 p-2 flex flex-col gap-1.5">
...@@ -199,29 +200,23 @@ ...@@ -199,29 +200,23 @@
</div> </div>
<div class="bg-card border border-divider rounded p-1.5 flex items-center gap-1.5 text-[8px] font-semibold"> <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="text-color2">电阻测量值:</span>
<span class="inline-block border-b min-w-[50px] text-center text-primary font-mono text-[8px] font-bold" <span
:style="{ borderBottomColor: 'var(--primary-color)', borderBottomWidth: '1px' }"> 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>
<span class="text-color3">Ω</span> <span class="text-color3">Ω</span>
</div> </div>
</div> </div>
<div class="text-[10px] text-color3 mt-2 text-center leading-relaxed"> <div class="text-[10px] text-color3 mt-2 text-center leading-relaxed">插入下划线记录行，提供数据填报输入项。</div>
插入下划线记录行，提供数据填报输入项。
</div>
</template> </template>
</div> </div>
</div> </div>
</n-popover> </n-popover>
<!-- 插入 XML 片段 --> <!-- 插入 XML 片段 -->
<n-popover <n-popover trigger="hover" placement="bottom" :show-arrow="true" :raw="true" :delay="150">
trigger="hover"
placement="bottom"
:show-arrow="true"
:raw="true"
:delay="150"
>
<template #trigger> <template #trigger>
<button <button
type="button" type="button"
...@@ -238,14 +233,14 @@ ...@@ -238,14 +233,14 @@
<span>XML片段 效果预览</span> <span>XML片段 效果预览</span>
</div> </div>
<div class="preview-popover-content border border-dashed border-divider rounded-lg p-2.5 bg-fill-1 text-xs"> <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;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;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> <span class="text-primary font-bold">&lt;/WARNING&gt;</span></pre>
</div> </div>
<div class="text-[10px] text-color3 mt-2 text-center leading-relaxed"> <div class="text-[10px] text-color3 mt-2 text-center leading-relaxed">支持快捷写入和插入自定义 XML 片段。</div>
支持快捷写入和插入自定义 XML 片段。
</div>
</div> </div>
</n-popover> </n-popover>
</div> </div>
...@@ -257,23 +252,23 @@ ...@@ -257,23 +252,23 @@
type="button" 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="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="[ :class="[
batchTranslateModalRef?.loading batchTranslateModalRef?.loading ? 'animate-pulse' : '',
? 'animate-pulse' batchTranslateModalRef?.completed ? '' : batchTranslateModalRef?.loading ? '' : 'text-color2 hover:bg-fill-2 active:bg-fill-3'
: '',
batchTranslateModalRef?.completed
? ''
: batchTranslateModalRef?.loading
? ''
: 'text-color2 hover:bg-fill-2 active:bg-fill-3'
]" ]"
:style="batchTranslateModalRef?.loading ? { :style="
backgroundColor: themeVars.primaryColor, batchTranslateModalRef?.loading
color: '#fff', ? {
boxShadow: `0 0 8px ${themeVars.primaryColor}73` backgroundColor: themeVars.primaryColor,
} : batchTranslateModalRef?.completed ? { color: '#fff',
backgroundColor: `${themeVars.successColor}1a`, boxShadow: `0 0 8px ${themeVars.primaryColor}73`
color: themeVars.successColor }
} : {}" : batchTranslateModalRef?.completed
? {
backgroundColor: `${themeVars.successColor}1a`,
color: themeVars.successColor
}
: {}
"
@click="handleTranslate('batch')" @click="handleTranslate('batch')"
> >
<n-icon class="text-base"> <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