Skip to content

I
Ifar-Xml-Edtor
Commit d1aae467 by pangchong
Options

feat(editor-toolbar): 为插入元素按钮添加预览悬浮卡片功能 

- 将插入元素按钮包裹在悬浮提示(n-popover)组件内，触发时显示效果预览卡片
- 预览卡片展示各插入按钮对应元素的示意内容及说明
- 增加 XML 片段按钮的预览展示，支持快捷插入自定义 XML 代码
- 批量翻译按钮样式优化，增加加载和完成状态的动态样式和动画效果
- 优化比较模态框中滑块样式，新增对应的CSS样式以增强交互体验
- 模板选择模态框样式调整，更新提示背景和选中项样式，增强视觉效果
parent 8a64ce1f
Showing with 236 additions and 11 deletions
src/views/editor/components/EditorToolbar/components/CompareModal/index.vue
......@@ -155,7 +155,7 @@
></div>
<!-- 模拟滑块 -->
<div
class="absolute left-[1px] right-[1px] bg-primary/[0.15] hover:bg-primary/[0.25] active:bg-primary/[0.35] rounded border border-primary/20 cursor-grab active:cursor-grabbing transition-colors"
class="absolute left-[1px] right-[1px] compare-minimap-slider cursor-grab active:cursor-grabbing"
:style="{
top: leftTextScrollTopPercent + '%',
height: leftTextScrollHeightPercent + '%'
......@@ -205,7 +205,7 @@
></div>
<!-- 模拟滑块 -->
<div
class="absolute left-[1px] right-[1px] bg-primary/[0.15] hover:bg-primary/[0.25] active:bg-primary/[0.35] rounded border border-primary/20 cursor-grab active:cursor-grabbing transition-colors"
class="absolute left-[1px] right-[1px] compare-minimap-slider cursor-grab active:cursor-grabbing"
:style="{
top: leftRenderScrollTopPercent + '%',
height: leftRenderScrollHeightPercent + '%'
......@@ -324,7 +324,7 @@
></div>
<!-- 模拟滑块 -->
<div
class="absolute left-[1px] right-[1px] bg-primary/[0.15] hover:bg-primary/[0.25] active:bg-primary/[0.35] rounded border border-primary/20 cursor-grab active:cursor-grabbing transition-colors"
class="absolute left-[1px] right-[1px] compare-minimap-slider cursor-grab active:cursor-grabbing"
:style="{
top: rightTextScrollTopPercent + '%',
height: rightTextScrollHeightPercent + '%'
......@@ -374,7 +374,7 @@
></div>
<!-- 模拟滑块 -->
<div
class="absolute left-[1px] right-[1px] bg-primary/[0.15] hover:bg-primary/[0.25] active:bg-primary/[0.35] rounded border border-primary/20 cursor-grab active:cursor-grabbing transition-colors"
class="absolute left-[1px] right-[1px] compare-minimap-slider cursor-grab active:cursor-grabbing"
:style="{
top: rightRenderScrollTopPercent + '%',
height: rightRenderScrollHeightPercent + '%'
......@@ -687,4 +687,17 @@ div.doc-node-wrapper[data-diff-status='modified'] {
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;
}
.compare-minimap-slider {
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;
}
.compare-minimap-slider:hover {
background-color: color-mix(in srgb, var(--primary-color) 25%, transparent);
}
.compare-minimap-slider:active {
background-color: color-mix(in srgb, var(--primary-color) 35%, transparent);
}
</style>
src/views/editor/components/EditorToolbar/components/TemplateSelectModal/index.vue
......@@ -9,7 +9,7 @@
@confirm="handleInsert"
>
<div class="flex flex-col space-y-4">
<div class="text-xs text-color3 bg-primary/5 p-3 rounded-lg border border-primary/20">
<div class="text-xs text-color3 bg-primary-1 p-3 rounded-lg border border-primary-3">
提示：模板中包含预先设计好的复杂节点结构（如 CALS 表格、多列配置等）。请选择要插入的模板，并直接进行插入。
</div>
......@@ -22,7 +22,7 @@
:key="item.id"
:class="[
'transition-colors cursor-pointer',
selectedTemplate?.id === item.id ? 'bg-primary/5 border-l-4 border-primary' : ''
selectedTemplate?.id === item.id ? 'bg-primary-1 border-l-4 border-primary' : ''
]"
@click="selectedTemplate = item"
@dblclick="handleInsert"
......
src/views/editor/components/EditorToolbar/index.vue
......@@ -29,9 +29,17 @@
<!-- 组 2：插入元素按钮组 -->
<div class="flex items-center gap-0.5 flex-shrink-0">
<button
<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"
class="toolbar-btn flex items-center gap-1.5 px-2.5 h-7 rounded text-color2 hover:bg-fill-2 active:bg-fill-3 transition-colors select-none focus:outline-none flex-shrink-0"
@click="handleInsert(btn.tag)"
......@@ -39,8 +47,182 @@
<n-icon class="text-base"><component :is="btn.icon" /></n-icon>
<span class="text-xs font-medium">{{ btn.label.replace('插入', '') }}</span>
</button>
</template>
<!-- 预览内容卡片 -->
<div class="preview-popover-card p-3.5 rounded-xl border border-divider bg-card shadow-xl w-64 text-color1">
<div class="text-xs font-bold text-primary mb-2.5 flex items-center gap-1.5">
<n-icon class="text-sm"><component :is="btn.icon" /></n-icon>
<span>{{ btn.label }} 效果预览</span>
</div>
<div class="preview-popover-content border border-dashed border-divider rounded-lg p-2.5 bg-fill-1 text-xs">
<template v-if="btn.tag === 'GRAPHIC'">
<div class="border border-divider rounded-lg bg-fill-2 p-2 flex flex-col gap-1.5">
<div class="w-full flex items-center justify-between pb-1 border-b border-divider mb-1.5">
<span class="text-[9px] font-bold text-color2 flex items-center gap-1">
<n-icon class="text-[10px]"><component :is="btn.icon" /></n-icon>
<span>工卡附图</span>
</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">
<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>
</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">
<div class="w-full flex items-center justify-between pb-1 border-b border-divider mb-1.5">
<span class="text-[9px] font-bold text-color2 flex items-center gap-1">
<n-icon class="text-[10px]"><component :is="btn.icon" /></n-icon>
<span>表格编辑区域</span>
</span>
<span class="text-[8px] bg-primary-1 text-primary px-1 rounded font-bold scale-[0.9]">TABLE</span>
</div>
<table class="w-full border-collapse border border-divider text-[9px] bg-card rounded overflow-hidden">
<thead>
<tr class="bg-fill-3">
<th class="border border-divider p-1 font-bold text-color2 text-left">REFERENCE</th>
<th class="border border-divider p-1 font-bold text-color2 text-center">QTY</th>
<th class="border border-divider p-1 font-bold text-color2 text-left">DESIGNATION</th>
</tr>
</thead>
<tbody>
<tr>
<td class="border border-divider p-1 text-color3 font-mono">No specific</td>
<td class="border border-divider p-1 text-center text-color3 font-mono">AR</td>
<td class="border border-divider p-1 text-color2">SAFETY BARRIER(S)</td>
</tr>
</tbody>
</table>
</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">
<div class="w-full flex items-center justify-between pb-1 border-b border-divider mb-1.5">
<span class="text-[9px] font-bold text-color2 flex items-center gap-1">
<n-icon class="text-[10px]"><component :is="btn.icon" /></n-icon>
<span>XML 复合模板</span>
</span>
<span class="text-[8px] bg-primary-1 text-primary px-1 rounded font-bold scale-[0.9]">TEMPLATE</span>
</div>
<div class="border border-divider rounded bg-card p-2 space-y-1">
<div class="text-[9px] font-bold text-primary">步骤 1.1 / STEP 1.1</div>
<div class="text-[9px] text-color1 font-medium leading-normal pl-1.5 border-l border-primary">
1、进行例行检查以确认零件完整性。
</div>
<div class="text-[8px] text-color3 italic pl-1.5 border-l border-divider">
1. Perform routine inspection to verify component integrity.
</div>
</div>
</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">
<div class="w-full flex items-center justify-between pb-1 border-b border-divider mb-1.5">
<span class="text-[9px] font-bold text-color2 flex items-center gap-1">
<n-icon class="text-[10px]"><component :is="btn.icon" /></n-icon>
<span>任务签字点</span>
</span>
<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">
<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 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 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>
</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">
<div class="w-full flex items-center justify-between pb-1 border-b border-divider mb-1.5">
<span class="text-[9px] font-bold text-color2 flex items-center gap-1">
<n-icon class="text-[10px]"><component :is="btn.icon" /></n-icon>
<span>单选/多选项组</span>
</span>
<span class="text-[8px] bg-primary-1 text-primary px-1 rounded font-bold scale-[0.9]">SELECTION</span>
</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="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>
<div class="flex-1 flex items-center gap-1 font-semibold">
<span class="text-color2">选项1</span>
<span class="text-color3 italic">Option 1</span>
</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="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>
<span class="text-color3 italic">Option 2</span>
</div>
</div>
</div>
</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">
<div class="w-full flex items-center justify-between pb-1 border-b border-divider mb-1.5">
<span class="text-[9px] font-bold text-color2 flex items-center gap-1">
<n-icon class="text-[10px]"><component :is="btn.icon" /></n-icon>
<span>数据记录项</span>
</span>
<span class="text-[8px] bg-primary-1 text-primary px-1 rounded font-bold scale-[0.9]">RECORD-LINE</span>
</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>
<span class="text-color3">Ω</span>
</div>
</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"
>
<template #trigger>
<button
type="button"
class="toolbar-btn flex items-center gap-1.5 px-2.5 h-7 rounded text-color2 hover:bg-fill-2 active:bg-fill-3 transition-colors select-none focus:outline-none flex-shrink-0"
......@@ -49,6 +231,23 @@
<n-icon class="text-base"><code-working-outline /></n-icon>
<span class="text-xs font-medium">XML片段</span>
</button>
</template>
<div class="preview-popover-card p-3.5 rounded-xl border border-divider bg-card shadow-xl w-64 text-color1">
<div class="text-xs font-bold text-primary mb-2.5 flex items-center gap-1.5">
<n-icon class="text-sm"><code-working-outline /></n-icon>
<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>
<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>
</n-popover>
</div>
<div class="w-px h-5 flex-shrink-0 mx-3" style="background: #d0d0d0"></div>
......@@ -56,18 +255,29 @@
<div class="flex items-center gap-0.5 flex-shrink-0">
<button
type="button"
class="toolbar-btn flex items-center gap-1.5 px-2.5 h-7 rounded transition-colors 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="[
batchTranslateModalRef?.loading
? 'animate-pulse'
: '',
batchTranslateModalRef?.completed
? 'text-success bg-success/10 hover:bg-success/15'
? ''
: batchTranslateModalRef?.loading
? 'text-primary bg-primary/10 hover:bg-primary/15'
? ''
: 'text-color2 hover:bg-fill-2 active:bg-fill-3'
]"
:style="batchTranslateModalRef?.loading ? {
backgroundColor: themeVars.primaryColor,
color: '#fff',
boxShadow: `0 0 8px ${themeVars.primaryColor}73`
} : batchTranslateModalRef?.completed ? {
backgroundColor: `${themeVars.successColor}1a`,
color: themeVars.successColor
} : {}"
@click="handleTranslate('batch')"
>
<n-icon class="text-base">
<sync-outline v-if="batchTranslateModalRef?.loading" class="animate-spin text-primary" />
<sync-outline v-if="batchTranslateModalRef?.loading" class="animate-spin text-white" />
<checkmark-circle-outline v-else-if="batchTranslateModalRef?.completed" class="text-success" />
<language-outline v-else />
</n-icon>
......@@ -284,6 +494,8 @@ import TemplateSelectModal from './components/TemplateSelectModal/index.vue'
const emit = defineEmits(['save', 'validate', 'export', 'preview', 'download-html'])
const themeVars = useThemeVars()
const {
editorStore,
appStore,
......
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