Skip to content

I
Ifar-Xml-Edtor
Commit d1aae467 by pangchong
Options

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

- 将插入元素按钮包裹在悬浮提示(n-popover)组件内，触发时显示效果预览卡片
- 预览卡片展示各插入按钮对应元素的示意内容及说明
- 增加 XML 片段按钮的预览展示，支持快捷插入自定义 XML 代码
- 批量翻译按钮样式优化，增加加载和完成状态的动态样式和动画效果
- 优化比较模态框中滑块样式，新增对应的CSS样式以增强交互体验
- 模板选择模态框样式调整，更新提示背景和选中项样式，增强视觉效果
parent 8a64ce1f
Showing with 249 additions and 24 deletions
src/views/editor/components/EditorToolbar/components/CompareModal/index.vue
...@@ -155,7 +155,7 @@ ...@@ -155,7 +155,7 @@
></div> ></div>
<!-- 模拟滑块 --> <!-- 模拟滑块 -->
<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="{ :style="{
top: leftTextScrollTopPercent + '%', top: leftTextScrollTopPercent + '%',
height: leftTextScrollHeightPercent + '%' height: leftTextScrollHeightPercent + '%'
...@@ -205,7 +205,7 @@ ...@@ -205,7 +205,7 @@
></div> ></div>
<!-- 模拟滑块 --> <!-- 模拟滑块 -->
<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="{ :style="{
top: leftRenderScrollTopPercent + '%', top: leftRenderScrollTopPercent + '%',
height: leftRenderScrollHeightPercent + '%' height: leftRenderScrollHeightPercent + '%'
...@@ -324,7 +324,7 @@ ...@@ -324,7 +324,7 @@
></div> ></div>
<!-- 模拟滑块 --> <!-- 模拟滑块 -->
<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="{ :style="{
top: rightTextScrollTopPercent + '%', top: rightTextScrollTopPercent + '%',
height: rightTextScrollHeightPercent + '%' height: rightTextScrollHeightPercent + '%'
...@@ -374,7 +374,7 @@ ...@@ -374,7 +374,7 @@
></div> ></div>
<!-- 模拟滑块 --> <!-- 模拟滑块 -->
<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="{ :style="{
top: rightRenderScrollTopPercent + '%', top: rightRenderScrollTopPercent + '%',
height: rightRenderScrollHeightPercent + '%' height: rightRenderScrollHeightPercent + '%'
...@@ -687,4 +687,17 @@ div.doc-node-wrapper[data-diff-status='modified'] { ...@@ -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, 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; 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> </style>
src/views/editor/components/EditorToolbar/components/TemplateSelectModal/index.vue
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
@confirm="handleInsert" @confirm="handleInsert"
> >
<div class="flex flex-col space-y-4"> <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 表格、多列配置等）。请选择要插入的模板，并直接进行插入。 提示：模板中包含预先设计好的复杂节点结构（如 CALS 表格、多列配置等）。请选择要插入的模板，并直接进行插入。
</div> </div>
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
:key="item.id" :key="item.id"
:class="[ :class="[
'transition-colors cursor-pointer', '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" @click="selectedTemplate = item"
@dblclick="handleInsert" @dblclick="handleInsert"
......
src/views/editor/components/EditorToolbar/index.vue
...@@ -29,26 +29,225 @@ ...@@ -29,26 +29,225 @@
<!-- 组 2：插入元素按钮组 --> <!-- 组 2：插入元素按钮组 -->
<div class="flex items-center gap-0.5 flex-shrink-0"> <div class="flex items-center gap-0.5 flex-shrink-0">
<button <n-popover
v-for="btn in GREEN_BUTTONS" v-for="btn in GREEN_BUTTONS"
:key="btn.tag" :key="btn.tag"
type="button" trigger="hover"
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" placement="bottom"
@click="handleInsert(btn.tag)" :show-arrow="true"
:raw="true"
:delay="150"
> >
<n-icon class="text-base"><component :is="btn.icon" /></n-icon> <template #trigger>
<span class="text-xs font-medium">{{ btn.label.replace('插入', '') }}</span> <button
</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)"
>
<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 片段 --> <!-- 插入 XML 片段 -->
<button <n-popover
type="button" trigger="hover"
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" placement="bottom"
@click="insertFragmentModalRef?.open(insertBelow)" :show-arrow="true"
:raw="true"
:delay="150"
> >
<n-icon class="text-base"><code-working-outline /></n-icon> <template #trigger>
<span class="text-xs font-medium">XML片段</span> <button
</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="insertFragmentModalRef?.open(insertBelow)"
>
<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>
<div class="w-px h-5 flex-shrink-0 mx-3" style="background: #d0d0d0"></div> <div class="w-px h-5 flex-shrink-0 mx-3" style="background: #d0d0d0"></div>
...@@ -56,18 +255,29 @@ ...@@ -56,18 +255,29 @@
<div class="flex items-center gap-0.5 flex-shrink-0"> <div class="flex items-center gap-0.5 flex-shrink-0">
<button <button
type="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="[ :class="[
batchTranslateModalRef?.loading
? 'animate-pulse'
: '',
batchTranslateModalRef?.completed batchTranslateModalRef?.completed
? 'text-success bg-success/10 hover:bg-success/15' ? ''
: batchTranslateModalRef?.loading : batchTranslateModalRef?.loading
? 'text-primary bg-primary/10 hover:bg-primary/15' ? ''
: 'text-color2 hover:bg-fill-2 active:bg-fill-3' : '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')" @click="handleTranslate('batch')"
> >
<n-icon class="text-base"> <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" /> <checkmark-circle-outline v-else-if="batchTranslateModalRef?.completed" class="text-success" />
<language-outline v-else /> <language-outline v-else />
</n-icon> </n-icon>
...@@ -284,6 +494,8 @@ import TemplateSelectModal from './components/TemplateSelectModal/index.vue' ...@@ -284,6 +494,8 @@ import TemplateSelectModal from './components/TemplateSelectModal/index.vue'
const emit = defineEmits(['save', 'validate', 'export', 'preview', 'download-html']) const emit = defineEmits(['save', 'validate', 'export', 'preview', 'download-html'])
const themeVars = useThemeVars()
const { const {
editorStore, editorStore,
appStore, 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