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

src/components/modals/PrintModal.vue

@@ -1,10 +1,10 @@
 <!-- =====================================================================
   PrintModal.vue — PDF 导出：全量幻灯片打印预览
-  渲染所有 slide，隐藏编辑 UI，纯展示
+  复用 ElementView 渲染每个元素（与编辑器/演示一致，图表/表格/公式不降级）
   ===================================================================== -->
 <script setup lang="ts">
-import type { Slide } from '../../core/types'
+import { store, resolveBg } from '../../core/store'
-import { store, resolveBg, resolveColor } 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>
-
+      <ElementView
-      <!-- 元素渲染 -->
-      <div
         v-for="el in slide.elements"
         :key="el.id"
-        class="el"
+        :el="el"
-        :data-type="el.type"
+        :bg="slide.background"
-        :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>
     </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>