725 lines
22 KiB
Vue
725 lines
22 KiB
Vue
|
<template>
|
|||
|
|
<a-modal
|
|||
|
|
v-model:open="innerOpen"
|
|||
|
|
title="模板预览"
|
|||
|
|
width="1240px"
|
|||
|
|
:footer="null"
|
|||
|
|
:body-style="{ padding: '16px 20px 22px' }"
|
|||
|
|
destroy-on-close
|
|||
|
|
wrap-class-name="native-template-list-preview-modal"
|
|||
|
|
@cancel="onClose"
|
|||
|
|
>
|
|||
|
|
<a-spin :spinning="loading">
|
|||
|
|
<div v-if="errorText" class="native-preview-error">{{ errorText }}</div>
|
|||
|
|
<a-row v-else-if="schema" :gutter="20" class="native-preview-row">
|
|||
|
|
<a-col :xs="24" :lg="11" class="native-preview-left">
|
|||
|
|
<a-tabs v-model:activeKey="jsonTabKey" size="small" class="json-tabs">
|
|||
|
|
<a-tab-pane key="template" tab="模板JSON">
|
|||
|
|
<div class="json-template-pane">
|
|||
|
|
<div class="json-box-title">画布实际 JSON（模板样式）</div>
|
|||
|
|
<a-textarea v-model:value="canvasJsonText" :rows="16" class="json-textarea" placeholder="模板 JSON" />
|
|||
|
|
</div>
|
|||
|
|
</a-tab-pane>
|
|||
|
|
<a-tab-pane key="params" tab="参数JSON">
|
|||
|
|
<div class="params-json-pane">
|
|||
|
|
<div class="params-json-head">
|
|||
|
|
<div class="json-sub-tabs json-sub-tabs--segmented" role="tablist" aria-label="参数数据来源">
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
role="tab"
|
|||
|
|
:class="['capsule-tab', { 'is-active': dataSourceType === 'manual' }]"
|
|||
|
|
@click="dataSourceType = 'manual'"
|
|||
|
|
>
|
|||
|
|
手动JSON
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
role="tab"
|
|||
|
|
:class="['capsule-tab', { 'is-active': dataSourceType === 'mock' }]"
|
|||
|
|
@click="dataSourceType = 'mock'"
|
|||
|
|
>
|
|||
|
|
模拟JSON
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
<a-button
|
|||
|
|
v-show="dataSourceType === 'mock'"
|
|||
|
|
size="small"
|
|||
|
|
type="primary"
|
|||
|
|
ghost
|
|||
|
|
class="json-capsule-btn"
|
|||
|
|
@click="onGenerateMock"
|
|||
|
|
>
|
|||
|
|
根据画布生成
|
|||
|
|
</a-button>
|
|||
|
|
</div>
|
|||
|
|
<a-textarea
|
|||
|
|
v-show="dataSourceType === 'manual'"
|
|||
|
|
v-model:value="previewDataText"
|
|||
|
|
:rows="14"
|
|||
|
|
class="json-textarea json-textarea--main"
|
|||
|
|
placeholder="手动输入预览数据 JSON"
|
|||
|
|
/>
|
|||
|
|
<template v-if="dataSourceType === 'mock'">
|
|||
|
|
<a-textarea
|
|||
|
|
v-model:value="mockDataText"
|
|||
|
|
:rows="12"
|
|||
|
|
class="json-textarea json-textarea--main"
|
|||
|
|
placeholder="点击「根据画布生成」自动填充模拟数据"
|
|||
|
|
/>
|
|||
|
|
</template>
|
|||
|
|
</div>
|
|||
|
|
</a-tab-pane>
|
|||
|
|
</a-tabs>
|
|||
|
|
</a-col>
|
|||
|
|
<a-col :xs="24" :lg="13" class="native-preview-right">
|
|||
|
|
<div class="preview-header-row">
|
|||
|
|
<div class="preview-title">预览样式</div>
|
|||
|
|
<a-space v-if="previewHtml" size="small" align="center" wrap class="preview-header-actions" @click.stop>
|
|||
|
|
<a-tooltip title="缩小">
|
|||
|
|
<a-button type="default" size="small" class="preview-zoom-btn" @click="zoomPreviewOut">
|
|||
|
|
<Icon icon="ant-design:zoom-out-outlined" />
|
|||
|
|
</a-button>
|
|||
|
|
</a-tooltip>
|
|||
|
|
<span class="preview-zoom-label">{{ zoomPercentLabel }}</span>
|
|||
|
|
<a-tooltip title="放大">
|
|||
|
|
<a-button type="default" size="small" class="preview-zoom-btn" @click="zoomPreviewIn">
|
|||
|
|
<Icon icon="ant-design:zoom-in-outlined" />
|
|||
|
|
</a-button>
|
|||
|
|
</a-tooltip>
|
|||
|
|
<a-tooltip title="恢复按窗口适应">
|
|||
|
|
<a-button type="default" size="small" class="preview-zoom-fit-btn" @click="resetPreviewZoom">适应</a-button>
|
|||
|
|
</a-tooltip>
|
|||
|
|
<a-tooltip title="使用浏览器打印当前预览内容">
|
|||
|
|
<a-button type="primary" size="small" class="preview-print-btn" @click="handleBrowserPrint">
|
|||
|
|
<Icon icon="ant-design:printer-outlined" />
|
|||
|
|
打印
|
|||
|
|
</a-button>
|
|||
|
|
</a-tooltip>
|
|||
|
|
</a-space>
|
|||
|
|
</div>
|
|||
|
|
<div v-if="layoutPaperPx" ref="previewHostRef" class="preview-frame-wrap">
|
|||
|
|
<template v-if="previewHtml">
|
|||
|
|
<!-- 内层用 margin:auto，放大后父级可四向滚动，避免 flex 居中导致裁切 -->
|
|||
|
|
<div class="preview-scroll-flex">
|
|||
|
|
<div class="preview-zoom-slot">
|
|||
|
|
<div
|
|||
|
|
class="preview-scale-shim"
|
|||
|
|
:style="{
|
|||
|
|
width: `${layoutPaperPx.wPx * previewDisplayScale}px`,
|
|||
|
|
height: `${layoutPaperPx.hPx * previewDisplayScale}px`,
|
|||
|
|
}"
|
|||
|
|
>
|
|||
|
|
<div
|
|||
|
|
class="preview-scale-inner"
|
|||
|
|
:style="{
|
|||
|
|
width: `${layoutPaperPx.wPx}px`,
|
|||
|
|
height: `${layoutPaperPx.hPx}px`,
|
|||
|
|
transform: `scale(${previewDisplayScale})`,
|
|||
|
|
}"
|
|||
|
|
>
|
|||
|
|
<iframe
|
|||
|
|
ref="previewIframeRef"
|
|||
|
|
class="preview-iframe"
|
|||
|
|
title="原生模板预览"
|
|||
|
|
:srcdoc="previewHtml"
|
|||
|
|
:style="{
|
|||
|
|
width: `${layoutPaperPx.wPx}px`,
|
|||
|
|
height: `${layoutPaperPx.hPx}px`,
|
|||
|
|
}"
|
|||
|
|
@load="onPreviewIframeLoad"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
<a-empty v-else description="正在生成预览…" />
|
|||
|
|
</div>
|
|||
|
|
</a-col>
|
|||
|
|
</a-row>
|
|||
|
|
</a-spin>
|
|||
|
|
</a-modal>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script lang="ts" setup>
|
|||
|
|
import { computed, nextTick, ref, watch } from 'vue';
|
|||
|
|
import { useDebounceFn, useResizeObserver } from '@vueuse/core';
|
|||
|
|
import { Icon } from '/@/components/Icon';
|
|||
|
|
import { useMessage } from '/@/hooks/web/useMessage';
|
|||
|
|
import { queryById } from '../printTemplate.api';
|
|||
|
|
import { renderNativePrintHtml, resolvePrintPageCount } from '../native/core/printRenderer';
|
|||
|
|
import { stringifyNativeTemplateStyle } from '../native/core/nativeTemplateStyleSerialize';
|
|||
|
|
import { generateNativeMockDataObject } from '../native/core/nativeMockData';
|
|||
|
|
import { normalizeImportedNativeSchema } from '../native/core/nativeSchemaNormalize';
|
|||
|
|
import type { NativeTemplateSchema } from '../native/core/types';
|
|||
|
|
|
|||
|
|
const props = defineProps<{
|
|||
|
|
open: boolean;
|
|||
|
|
/** 打印模板主键 id */
|
|||
|
|
templateId: string | null;
|
|||
|
|
}>();
|
|||
|
|
|
|||
|
|
const emit = defineEmits<{
|
|||
|
|
(e: 'update:open', v: boolean): void;
|
|||
|
|
}>();
|
|||
|
|
|
|||
|
|
const { createMessage } = useMessage();
|
|||
|
|
|
|||
|
|
const innerOpen = computed({
|
|||
|
|
get: () => props.open,
|
|||
|
|
set: (v: boolean) => emit('update:open', v),
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const loading = ref(false);
|
|||
|
|
const errorText = ref('');
|
|||
|
|
const schema = ref<NativeTemplateSchema | null>(null);
|
|||
|
|
const canvasJsonText = ref('{}');
|
|||
|
|
const jsonTabKey = ref<'template' | 'params'>('template');
|
|||
|
|
const dataSourceType = ref<'manual' | 'mock'>('mock');
|
|||
|
|
const previewDataText = ref('{}');
|
|||
|
|
const mockDataText = ref('{}');
|
|||
|
|
const previewHtml = ref('');
|
|||
|
|
/** 预览区容器，用于根据可用空间计算缩放比 */
|
|||
|
|
const previewHostRef = ref<HTMLElement | null>(null);
|
|||
|
|
const previewIframeRef = ref<HTMLIFrameElement | null>(null);
|
|||
|
|
/** 自动适应窗口时的缩放系数（相对纸张像素，通常 ≤1） */
|
|||
|
|
const autoFitScale = ref(1);
|
|||
|
|
/** 用户在「适应」基础上的缩放倍数，1 表示与自动适应一致 */
|
|||
|
|
const zoomMultiplier = ref(1);
|
|||
|
|
const ZOOM_STEP = 1.15;
|
|||
|
|
const ZOOM_MULT_MIN = 0.25;
|
|||
|
|
const ZOOM_MULT_MAX = 4;
|
|||
|
|
|
|||
|
|
/** 最终用于 transform 的缩放 = 自动适应 × 手动倍数，并做安全上下限 */
|
|||
|
|
const previewDisplayScale = computed(() => {
|
|||
|
|
const raw = autoFitScale.value * zoomMultiplier.value;
|
|||
|
|
if (!Number.isFinite(raw) || raw <= 0) {
|
|||
|
|
return 1;
|
|||
|
|
}
|
|||
|
|
return Math.min(4, Math.max(0.08, raw));
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
/** 相对「适应窗口」的百分比，便于用户理解当前放大程度 */
|
|||
|
|
const zoomPercentLabel = computed(() => `${Math.round(zoomMultiplier.value * 100)}%`);
|
|||
|
|
|
|||
|
|
/** CSS mm 转 px（与浏览器常规 96dpi 一致） */
|
|||
|
|
const MM_TO_CSS_PX = 96 / 25.4;
|
|||
|
|
|
|||
|
|
const activeDataText = computed(() => (dataSourceType.value === 'mock' ? mockDataText.value : previewDataText.value));
|
|||
|
|
|
|||
|
|
const previewData = computed(() => {
|
|||
|
|
try {
|
|||
|
|
return JSON.parse(activeDataText.value || '{}');
|
|||
|
|
} catch (_e) {
|
|||
|
|
return {};
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
/** 按纸张 mm × 页数换算为像素（理论下限；auto 表格等实际可能更高，见 contentMeasurePx） */
|
|||
|
|
const paperPixelSize = computed(() => {
|
|||
|
|
if (!schema.value) {
|
|||
|
|
return null;
|
|||
|
|
}
|
|||
|
|
const pageCount = Math.max(1, resolvePrintPageCount(schema.value, previewData.value));
|
|||
|
|
const wMm = Number(schema.value.page?.width || 210);
|
|||
|
|
const hMm = Number(schema.value.page?.height || 297);
|
|||
|
|
const wPx = wMm * MM_TO_CSS_PX;
|
|||
|
|
const hPx = hMm * pageCount * MM_TO_CSS_PX;
|
|||
|
|
return { wPx, hPx, pageCount };
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
/** iframe 内实际排版测量（解决 autoPage 表格超出单页高度后仍被裁切） */
|
|||
|
|
const contentMeasurePx = ref({ w: 0, h: 0 });
|
|||
|
|
|
|||
|
|
/** 预览/打印用的版面像素：取理论纸张与实测内容的较大值 */
|
|||
|
|
const layoutPaperPx = computed(() => {
|
|||
|
|
const ps = paperPixelSize.value;
|
|||
|
|
if (!ps) {
|
|||
|
|
return null;
|
|||
|
|
}
|
|||
|
|
const m = contentMeasurePx.value;
|
|||
|
|
return {
|
|||
|
|
...ps,
|
|||
|
|
wPx: Math.max(ps.wPx, m.w || 0),
|
|||
|
|
hPx: Math.max(ps.hPx, m.h || 0),
|
|||
|
|
};
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
/** 遍历 iframe 文档与 scrollHeight，估算真实内容宽高 */
|
|||
|
|
function measureIframeContentBox(doc: Document): { w: number; h: number } {
|
|||
|
|
const body = doc.body;
|
|||
|
|
let minTop = Infinity;
|
|||
|
|
let maxBottom = 0;
|
|||
|
|
let minLeft = Infinity;
|
|||
|
|
let maxRight = 0;
|
|||
|
|
const visit = (el: Element) => {
|
|||
|
|
if (el instanceof HTMLElement) {
|
|||
|
|
const r = el.getBoundingClientRect();
|
|||
|
|
if (r.height > 0.5 && r.width > 0.5) {
|
|||
|
|
minTop = Math.min(minTop, r.top);
|
|||
|
|
maxBottom = Math.max(maxBottom, r.bottom);
|
|||
|
|
minLeft = Math.min(minLeft, r.left);
|
|||
|
|
maxRight = Math.max(maxRight, r.right);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
for (let i = 0; i < el.children.length; i++) {
|
|||
|
|
visit(el.children[i]);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
visit(body);
|
|||
|
|
const byRect =
|
|||
|
|
Number.isFinite(minTop) && maxBottom > 0
|
|||
|
|
? { w: Math.ceil(maxRight - minLeft + 6), h: Math.ceil(maxBottom - minTop + 12) }
|
|||
|
|
: { w: 0, h: 0 };
|
|||
|
|
const sh = Math.max(doc.documentElement.scrollHeight, body.scrollHeight, byRect.h);
|
|||
|
|
const sw = Math.max(doc.documentElement.scrollWidth, body.scrollWidth, byRect.w);
|
|||
|
|
return { w: Math.ceil(sw), h: Math.ceil(sh) };
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function updateContentMeasure() {
|
|||
|
|
void nextTick(() => {
|
|||
|
|
requestAnimationFrame(() => {
|
|||
|
|
requestAnimationFrame(() => {
|
|||
|
|
const doc = previewIframeRef.value?.contentDocument;
|
|||
|
|
if (!doc?.body) {
|
|||
|
|
contentMeasurePx.value = { w: 0, h: 0 };
|
|||
|
|
scheduleComputeScale();
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
contentMeasurePx.value = measureIframeContentBox(doc);
|
|||
|
|
scheduleComputeScale();
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function refreshPreview() {
|
|||
|
|
if (!schema.value) {
|
|||
|
|
previewHtml.value = '';
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
try {
|
|||
|
|
previewHtml.value = await renderNativePrintHtml(schema.value, previewData.value);
|
|||
|
|
} catch (e: any) {
|
|||
|
|
previewHtml.value = '';
|
|||
|
|
createMessage.error(`预览渲染失败：${e?.message || '未知错误'}`);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const debouncedRefreshPreview = useDebounceFn(() => void refreshPreview(), 320);
|
|||
|
|
|
|||
|
|
function computePreviewScale() {
|
|||
|
|
const host = previewHostRef.value;
|
|||
|
|
const ps = layoutPaperPx.value;
|
|||
|
|
if (!host || !ps) {
|
|||
|
|
autoFitScale.value = 1;
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
const pad = 20;
|
|||
|
|
const availW = Math.max(0, host.clientWidth - pad);
|
|||
|
|
const availH = Math.max(0, host.clientHeight - pad);
|
|||
|
|
if (availW <= 0 || availH <= 0 || ps.wPx <= 0 || ps.hPx <= 0) {
|
|||
|
|
autoFitScale.value = 1;
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
const raw = Math.min(availW / ps.wPx, availH / ps.hPx, 1) * 0.96;
|
|||
|
|
autoFitScale.value = Number.isFinite(raw) && raw > 0 ? raw : 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function zoomPreviewIn() {
|
|||
|
|
zoomMultiplier.value = Math.min(ZOOM_MULT_MAX, zoomMultiplier.value * ZOOM_STEP);
|
|||
|
|
scheduleScrollPreviewCenter();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function zoomPreviewOut() {
|
|||
|
|
zoomMultiplier.value = Math.max(ZOOM_MULT_MIN, zoomMultiplier.value / ZOOM_STEP);
|
|||
|
|
scheduleScrollPreviewCenter();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/** 缩放后把可视区域滚到预览块大致居中，便于看到全貌 */
|
|||
|
|
function scheduleScrollPreviewCenter() {
|
|||
|
|
void nextTick(() => {
|
|||
|
|
const host = previewHostRef.value;
|
|||
|
|
if (!host) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
const slot = host.querySelector('.preview-zoom-slot') as HTMLElement | null;
|
|||
|
|
if (!slot) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
const sr = slot.getBoundingClientRect();
|
|||
|
|
const hr = host.getBoundingClientRect();
|
|||
|
|
const nextLeft = host.scrollLeft + (sr.left - hr.left) + sr.width / 2 - host.clientWidth / 2;
|
|||
|
|
const nextTop = host.scrollTop + (sr.top - hr.top) + sr.height / 2 - host.clientHeight / 2;
|
|||
|
|
host.scrollTo({
|
|||
|
|
left: Math.max(0, nextLeft),
|
|||
|
|
top: Math.max(0, nextTop),
|
|||
|
|
behavior: 'smooth',
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/** 恢复为仅按窗口自动适应（清除手动缩放） */
|
|||
|
|
function resetPreviewZoom() {
|
|||
|
|
zoomMultiplier.value = 1;
|
|||
|
|
scheduleComputeScale();
|
|||
|
|
scheduleScrollPreviewCenter();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function onPreviewIframeLoad() {
|
|||
|
|
updateContentMeasure();
|
|||
|
|
// 二维码等异步绘制后再测一次，避免首次高度偏小
|
|||
|
|
window.setTimeout(() => updateContentMeasure(), 400);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/** 调用浏览器打印预览 iframe 内文档（与当前预览 HTML 一致） */
|
|||
|
|
function handleBrowserPrint() {
|
|||
|
|
const win = previewIframeRef.value?.contentWindow;
|
|||
|
|
if (!win) {
|
|||
|
|
createMessage.warning('预览未就绪，请稍后再试');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
try {
|
|||
|
|
win.focus();
|
|||
|
|
win.print();
|
|||
|
|
} catch (_e) {
|
|||
|
|
createMessage.error('无法唤起打印，请检查浏览器是否拦截弹窗');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function scheduleComputeScale() {
|
|||
|
|
void nextTick(() => computePreviewScale());
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
useResizeObserver(previewHostRef, () => {
|
|||
|
|
scheduleComputeScale();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
watch([paperPixelSize, previewHtml, () => props.open], () => {
|
|||
|
|
contentMeasurePx.value = { w: 0, h: 0 };
|
|||
|
|
scheduleComputeScale();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
watch([layoutPaperPx, () => props.open], () => {
|
|||
|
|
if (props.open) {
|
|||
|
|
scheduleComputeScale();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
function onClose() {
|
|||
|
|
errorText.value = '';
|
|||
|
|
schema.value = null;
|
|||
|
|
previewHtml.value = '';
|
|||
|
|
zoomMultiplier.value = 1;
|
|||
|
|
autoFitScale.value = 1;
|
|||
|
|
contentMeasurePx.value = { w: 0, h: 0 };
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function onGenerateMock() {
|
|||
|
|
if (!schema.value) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
try {
|
|||
|
|
const mockObj = generateNativeMockDataObject(schema.value.elements, canvasJsonText.value);
|
|||
|
|
mockDataText.value = JSON.stringify(mockObj, null, 2);
|
|||
|
|
createMessage.success('已根据画布组件生成模拟数据 JSON');
|
|||
|
|
} catch (e: any) {
|
|||
|
|
createMessage.error(`生成失败：${e?.message || '未知错误'}`);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
watch(
|
|||
|
|
() => [props.open, props.templateId] as const,
|
|||
|
|
async ([isOpen, id]) => {
|
|||
|
|
if (!isOpen || !id) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
loading.value = true;
|
|||
|
|
errorText.value = '';
|
|||
|
|
schema.value = null;
|
|||
|
|
previewHtml.value = '';
|
|||
|
|
zoomMultiplier.value = 1;
|
|||
|
|
autoFitScale.value = 1;
|
|||
|
|
contentMeasurePx.value = { w: 0, h: 0 };
|
|||
|
|
try {
|
|||
|
|
const record = (await queryById(id)) as Record<string, any>;
|
|||
|
|
const rawText = String(record?.templateJson || '').trim();
|
|||
|
|
if (!rawText) {
|
|||
|
|
errorText.value = '该记录没有模板 JSON';
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
const parsed = JSON.parse(rawText);
|
|||
|
|
if (parsed?.engine !== 'native') {
|
|||
|
|
errorText.value = '仅原生模板（engine=native）支持此预览';
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
const normalized = normalizeImportedNativeSchema(parsed);
|
|||
|
|
const pw = Number(record?.paperWidthMm);
|
|||
|
|
const ph = Number(record?.paperHeightMm);
|
|||
|
|
if (pw > 0 && ph > 0) {
|
|||
|
|
normalized.page.width = pw;
|
|||
|
|
normalized.page.height = ph;
|
|||
|
|
}
|
|||
|
|
schema.value = normalized;
|
|||
|
|
canvasJsonText.value = stringifyNativeTemplateStyle(normalized);
|
|||
|
|
const mockObj = generateNativeMockDataObject(normalized.elements, canvasJsonText.value);
|
|||
|
|
mockDataText.value = JSON.stringify(mockObj, null, 2);
|
|||
|
|
previewDataText.value = mockDataText.value;
|
|||
|
|
dataSourceType.value = 'mock';
|
|||
|
|
jsonTabKey.value = 'params';
|
|||
|
|
await refreshPreview();
|
|||
|
|
scheduleComputeScale();
|
|||
|
|
} catch (e: any) {
|
|||
|
|
errorText.value = e?.message || '加载模板失败';
|
|||
|
|
} finally {
|
|||
|
|
loading.value = false;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{ immediate: false },
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
watch([activeDataText, schema, () => props.open], () => {
|
|||
|
|
if (!props.open || !schema.value) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
void debouncedRefreshPreview();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
watch(
|
|||
|
|
() => props.open,
|
|||
|
|
(v) => {
|
|||
|
|
if (!v) {
|
|||
|
|
onClose();
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
);
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped lang="less">
|
|||
|
|
.native-preview-error {
|
|||
|
|
padding: 12px 4px;
|
|||
|
|
color: #cf1322;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.native-preview-row {
|
|||
|
|
min-height: 440px;
|
|||
|
|
align-items: stretch;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.native-preview-left {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
min-height: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.native-preview-right {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
min-height: 440px;
|
|||
|
|
max-height: 72vh;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.json-tabs {
|
|||
|
|
flex: 1;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
min-height: 0;
|
|||
|
|
border: 1px solid #f0f0f0;
|
|||
|
|
border-radius: 10px;
|
|||
|
|
background: #fff;
|
|||
|
|
padding: 10px 12px 12px;
|
|||
|
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.json-tabs :deep(.ant-tabs-content-holder) {
|
|||
|
|
flex: 1;
|
|||
|
|
min-height: 0;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.json-tabs :deep(.ant-tabs-content),
|
|||
|
|
.json-tabs :deep(.ant-tabs-tabpane) {
|
|||
|
|
flex: 1;
|
|||
|
|
min-height: 0;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.json-template-pane,
|
|||
|
|
.params-json-pane {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 12px;
|
|||
|
|
flex: 1;
|
|||
|
|
min-height: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.json-box-title {
|
|||
|
|
margin-bottom: 0;
|
|||
|
|
font-size: 12px;
|
|||
|
|
color: rgba(0, 0, 0, 0.55);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.json-textarea {
|
|||
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
|
|||
|
|
font-size: 12px;
|
|||
|
|
line-height: 1.45;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.json-textarea--main {
|
|||
|
|
flex: 1;
|
|||
|
|
min-height: 200px;
|
|||
|
|
resize: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.params-json-head {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
gap: 12px;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 手动 / 模拟：胶囊分段（与设计器视觉一致） */
|
|||
|
|
.json-sub-tabs.json-sub-tabs--segmented {
|
|||
|
|
display: inline-flex;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 3px 5px;
|
|||
|
|
background: #f0f2f5;
|
|||
|
|
border-radius: 999px;
|
|||
|
|
border: 1px solid #e8e8e8;
|
|||
|
|
gap: 3px;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.capsule-tab {
|
|||
|
|
margin: 0;
|
|||
|
|
padding: 4px 14px;
|
|||
|
|
border: none;
|
|||
|
|
border-radius: 999px;
|
|||
|
|
background: transparent;
|
|||
|
|
font-size: 12px;
|
|||
|
|
line-height: 1.45;
|
|||
|
|
color: rgba(0, 0, 0, 0.65);
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition:
|
|||
|
|
background 0.2s,
|
|||
|
|
color 0.2s,
|
|||
|
|
box-shadow 0.2s;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.capsule-tab:hover:not(.is-active) {
|
|||
|
|
color: rgba(0, 0, 0, 0.88);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.capsule-tab.is-active {
|
|||
|
|
background: #fff;
|
|||
|
|
color: #1677ff;
|
|||
|
|
font-weight: 500;
|
|||
|
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.params-json-head :deep(.json-capsule-btn.ant-btn) {
|
|||
|
|
height: 28px;
|
|||
|
|
padding: 0 16px;
|
|||
|
|
line-height: 26px;
|
|||
|
|
border-radius: 999px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.preview-header-row {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
gap: 12px;
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.preview-title {
|
|||
|
|
margin-bottom: 0;
|
|||
|
|
font-size: 13px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: rgba(0, 0, 0, 0.85);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.preview-header-actions {
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
justify-content: flex-end;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.preview-print-btn {
|
|||
|
|
display: inline-flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 4px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.preview-zoom-label {
|
|||
|
|
min-width: 40px;
|
|||
|
|
text-align: center;
|
|||
|
|
font-size: 12px;
|
|||
|
|
color: rgba(0, 0, 0, 0.55);
|
|||
|
|
user-select: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.preview-zoom-btn,
|
|||
|
|
.preview-zoom-fit-btn {
|
|||
|
|
display: inline-flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.preview-zoom-fit-btn {
|
|||
|
|
padding: 0 10px;
|
|||
|
|
font-size: 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.preview-frame-wrap {
|
|||
|
|
flex: 1;
|
|||
|
|
min-height: 0;
|
|||
|
|
overflow: auto;
|
|||
|
|
border: 1px solid #f0f0f0;
|
|||
|
|
border-radius: 10px;
|
|||
|
|
background: #f5f5f5;
|
|||
|
|
padding: 12px;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 至少占满可视区；内容超出时由外层 preview-frame-wrap 滚动，避免 flex 居中裁切放大内容 */
|
|||
|
|
.preview-scroll-flex {
|
|||
|
|
min-height: 100%;
|
|||
|
|
display: flex;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.preview-zoom-slot {
|
|||
|
|
margin: auto;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.preview-scale-shim {
|
|||
|
|
overflow: visible;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.preview-scale-inner {
|
|||
|
|
transform-origin: top left;
|
|||
|
|
will-change: transform;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.preview-iframe {
|
|||
|
|
display: block;
|
|||
|
|
border: none;
|
|||
|
|
background: #fff;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
|
|||
|
|
<!-- 弹窗在窄屏下不超出视口 -->
|
|||
|
|
<style lang="less">
|
|||
|
|
.native-template-list-preview-modal .ant-modal {
|
|||
|
|
max-width: calc(100vw - 24px) !important;
|
|||
|
|
}
|
|||
|
|
</style>
|