lxy/u-ppt
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

重构: 打印导出复用 ElementView,图表/表格/公式不再降级为文本

Browse Source
This commit is contained in:
lxy
2026-08-17 10:14:19 +08:00
parent aad7e6f76f
commit 64d9531b02
1 changed files with 9 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/modals/PrintModal.vue
+9 -104
View File
@@ -1,10 +1,10 @@
<!-- =====================================================================
PrintModal.vue — PDF 导出：全量幻灯片打印预览
渲染所有 slide，隐藏编辑 UI，纯展示
复用 ElementView 渲染每个元素（与编辑器/演示一致，图表/表格/公式不降级）
===================================================================== -->
<script setup lang="ts">
import type { Slide } from '../../core/types'
import { store, resolveBg, resolveColor } from '../../core/store'
import { store, resolveBg } from '../../core/store'
import ElementView from '../editor/ElementView.vue'
const emit = defineEmits<{ (e: 'close'): void }>()
@@ -24,92 +24,20 @@ function onPrint() { window.print() }
<button class="btn ghost" @click="emit('close')">✕ 关闭</button>
</div>
<!-- 所有幻灯片逐页渲染 -->
<!-- 所有幻灯片逐页渲染（复用编辑器元素渲染） -->
<div
v-for="(slide, i) in slides"
:key="slide.id"
class="print-page"
:style="{ background: resolveBg(slide.background) }"
>
<!-- 页码（每页第一个标题元素作为内容提示） -->
<div class="print-number">{{ i + 1 }}</div>
<!-- 元素渲染 -->
<div
<ElementView
v-for="el in slide.elements"
:key="el.id"
class="el"
:data-type="el.type"
:style="{
left: el.x + '%',
top: el.y + '%',
width: el.w + '%',
height: el.h + '%',
fontSize: el.style?.fontSize ? el.style.fontSize + 'px' : '',
color: resolveColor(el.style?.color, false),
textAlign: el.style?.align || undefined,
fontWeight: el.style?.bold ? 'bold' : undefined,
fontStyle: el.style?.italic ? 'italic' : undefined,
}"
>
<!-- 标题/正文/引用 -->
<template v-if="['title', 'text', 'quote'].includes(el.type)">
<div class="el-text">{{ el.content }}</div>
</template>
<!-- 列表 -->
<template v-else-if="el.type === 'list'">
<div class="el-list">
<div v-for="(line, li) in el.content.split('\n')" :key="li" class="li">{{ line }}</div>
</div>
</template>
<!-- 数据 -->
<template v-else-if="el.type === 'stat'">
<div class="el-stat">
<div class="num" :style="{ fontSize: el.style?.fontSize ? el.style.fontSize + 'px' : '', color: resolveColor(el.style?.color, false) }">{{ el.content }}</div>
<div class="label" v-if="el.style?.label">{{ el.style.label }}</div>
</div>
</template>
<!-- 图片 -->
<img v-else-if="el.type === 'image'" class="el-image" :src="el.content" draggable="false" />
<!-- 形状 -->
<template v-else-if="el.type === 'shape'">
<div
class="el-shape"
:style="{
borderRadius: el.style?.shapeType === 'circle' ? '50%' : (el.style?.radius || 0) + 'px',
background: resolveBg(el.style?.fill || 'accent'),
opacity: el.style?.opacity ?? 1,
}"
></div>
</template>
<!-- 卡片 -->
<template v-else-if="el.type === 'card'">
<div class="el-card-bar" :style="{ background: resolveBg(el.style?.accent || 'primary') }"></div>
<div class="el-card">
<div class="card-icon" v-if="el.style?.icon">{{ el.style.icon }}</div>
<div class="card-title">{{ el.content.split('\n')[0] }}</div>
<div class="card-body">{{ el.content.split('\n').slice(1).join('\n') }}</div>
</div>
</template>
<!-- 图表 -> 简化为文本描述 -->
<template v-else-if="el.type === 'chart'">
<div class="el-chart">
<div class="chart-text">[{{ el.style?.chartType || 'bar' }} 图表]</div>
<div class="chart-text muted">{{ el.content.slice(0, 60) }}</div>
</div>
</template>
<!-- 其他（table/code/formula）-> 按文本显示 -->
<template v-else>
<div class="el-text">{{ el.content }}</div>
</template>
</div>
:el="el"
:bg="slide.background"
/>
</div>
</div>
</template>
@@ -157,29 +85,6 @@ function onPrint() { window.print() }
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
.print-number { bottom: 2mm; right: 3mm; }
}
/* 元素样式 */
.el { position: absolute; overflow: hidden; }
.el-text {
white-space: pre-wrap;
word-break: break-word;
line-height: 1.5;
height: 100%; width: 100%;
}
.el-list { white-space: pre-wrap; line-height: 1.6; }
.el-list .li::before { content: '• '; }
.el-stat { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; }
.el-stat .num { font-weight: 700; line-height: 1.2; }
.el-stat .label { font-size: 14px; color: #64748b; margin-top: 4px; text-align: center; }
.el-image { width: 100%; height: 100%; object-fit: contain; }
.el-shape { width: 100%; height: 100%; }
.el-card-bar { position: absolute; top: 0; left: 0; right: 0; height: 6px; border-radius: 4px 4px 0 0; }
.el-card { padding: 12px; }
.card-title { font-size: 18px; font-weight: 600; margin-bottom: 6px; }
.card-body { font-size: 13px; color: #475569; white-space: pre-wrap; line-height: 1.5; }
.el-chart { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; gap: 6px; }
.chart-text { font-size: 14px; color: #1e293b; text-align: center; }
.muted { color: #94a3b8; }
.sep { flex: 1; }
</style>