refactor: pdf clean up
This commit is contained in:
hyper
parent
47c15e933c
commit
3154830edd
|
|
@ -0,0 +1,43 @@
|
|||
import { For } from 'solid-js';
|
||||
import { marked } from '../../markdown';
|
||||
import { getLayerStyle } from './hooks/dimensions';
|
||||
import type { LayerConfig, Dimensions, CardData } from './types';
|
||||
|
||||
export interface CardLayerProps {
|
||||
layers: LayerConfig[];
|
||||
dimensions: Dimensions;
|
||||
cardData: CardData;
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理 body 内容中的 {{prop}} 语法并解析 markdown
|
||||
*/
|
||||
function processBody(body: string, currentRow: CardData): string {
|
||||
const processedBody = body.replace(/\{\{(\w+)\}\}/g, (_, key) => currentRow[key] || '');
|
||||
return marked.parse(processedBody) as string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 渲染 layer 内容
|
||||
*/
|
||||
function renderLayerContent(layer: { prop: string }, cardData: CardData): string {
|
||||
const content = cardData[layer.prop] || '';
|
||||
return processBody(content, cardData);
|
||||
}
|
||||
|
||||
export function CardLayer(props: CardLayerProps) {
|
||||
return (
|
||||
<For each={props.layers}>
|
||||
{(layer) => (
|
||||
<div
|
||||
class="absolute flex items-center justify-center text-center prose prose-sm"
|
||||
style={{
|
||||
...getLayerStyle(layer, props.dimensions),
|
||||
'font-size': `${props.dimensions.fontSize}mm`
|
||||
}}
|
||||
innerHTML={renderLayerContent(layer, props.cardData)}
|
||||
/>
|
||||
)}
|
||||
</For>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,40 +1,19 @@
|
|||
import { Show, For, createMemo } from 'solid-js';
|
||||
import { marked } from '../../markdown';
|
||||
import { getLayerStyle } from './hooks/dimensions';
|
||||
import { useCardSelection } from './hooks/useCardSelection';
|
||||
import { getSelectionBoxStyle } from './hooks/useCardSelection';
|
||||
import { CardLayer } from './CardLayer';
|
||||
import type { DeckStore } from './hooks/deckStore';
|
||||
import type { CardData } from './types';
|
||||
|
||||
export interface CardPreviewProps {
|
||||
store: DeckStore;
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理 body 内容中的 {{prop}} 语法并解析 markdown
|
||||
*/
|
||||
function processBody(body: string, currentRow: CardData): string {
|
||||
// 替换 {{prop}} 为对应列的内容
|
||||
const processedBody = body.replace(/\{\{(\w+)\}\}/g, (_, key) => currentRow[key] || '');
|
||||
// 使用 marked 解析 markdown
|
||||
return marked.parse(processedBody) as string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 渲染 layer 内容
|
||||
*/
|
||||
function renderLayerContent(layer: { prop: string }, cardData: CardData): string {
|
||||
const content = cardData[layer.prop] || '';
|
||||
return processBody(content, cardData);
|
||||
}
|
||||
|
||||
/**
|
||||
* 卡牌预览组件
|
||||
*/
|
||||
export function CardPreview(props: CardPreviewProps) {
|
||||
const { store } = props;
|
||||
|
||||
// 使用 createMemo 优化计算
|
||||
const currentCard = createMemo(() => store.state.cards[store.state.activeTab]);
|
||||
const visibleLayers = createMemo(() => store.state.layerConfigs.filter((l) => l.visible));
|
||||
const selectionStyle = createMemo(() =>
|
||||
|
|
@ -60,7 +39,6 @@ export function CardPreview(props: CardPreviewProps) {
|
|||
onMouseUp={selection.onMouseUp}
|
||||
onMouseLeave={selection.onMouseLeave}
|
||||
>
|
||||
{/* 框选遮罩 */}
|
||||
<Show when={store.state.isSelecting && selectionStyle()}>
|
||||
<div
|
||||
class="absolute bg-blue-500/30 border-2 border-blue-500 pointer-events-none"
|
||||
|
|
@ -68,7 +46,6 @@ export function CardPreview(props: CardPreviewProps) {
|
|||
/>
|
||||
</Show>
|
||||
|
||||
{/* 网格区域容器 */}
|
||||
<div
|
||||
class="absolute"
|
||||
style={{
|
||||
|
|
@ -78,7 +55,6 @@ export function CardPreview(props: CardPreviewProps) {
|
|||
height: `${store.state.dimensions?.gridAreaHeight}mm`
|
||||
}}
|
||||
>
|
||||
{/* 编辑模式下的网格线 */}
|
||||
<Show when={store.state.isEditing && !store.state.fixed}>
|
||||
<div class="absolute inset-0 pointer-events-none">
|
||||
<For each={Array.from({ length: (store.state.dimensions?.gridW || 0) - 1 })}>
|
||||
|
|
@ -100,23 +76,11 @@ export function CardPreview(props: CardPreviewProps) {
|
|||
</div>
|
||||
</Show>
|
||||
|
||||
{/* 渲染每个 layer */}
|
||||
<For each={visibleLayers()}>
|
||||
{(layer) => {
|
||||
return (
|
||||
<div
|
||||
class={`absolute flex items-center justify-center text-center prose prose-sm ${
|
||||
store.state.isEditing ? 'bg-blue-500/20 ring-2 ring-blue-500' : ''
|
||||
}`}
|
||||
style={{
|
||||
...getLayerStyle(layer, store.state.dimensions!),
|
||||
'font-size': `${store.state.dimensions?.fontSize}mm`
|
||||
}}
|
||||
innerHTML={renderLayerContent(layer, currentCard())}
|
||||
/>
|
||||
);
|
||||
}}
|
||||
</For>
|
||||
<CardLayer
|
||||
layers={visibleLayers()}
|
||||
dimensions={store.state.dimensions!}
|
||||
cardData={currentCard()}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Show>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,10 @@
|
|||
import { For, createMemo } from 'solid-js';
|
||||
import { marked } from '../../markdown';
|
||||
import { getLayerStyle } from './hooks/dimensions';
|
||||
import { For } from 'solid-js';
|
||||
import type { DeckStore } from './hooks/deckStore';
|
||||
import type { CardData } from './types';
|
||||
import jsPDF from 'jspdf';
|
||||
import { usePageLayout } from './hooks/usePageLayout';
|
||||
import { usePDFExport, type ExportOptions } from './hooks/usePDFExport';
|
||||
import { PrintPreviewHeader } from './PrintPreviewHeader';
|
||||
import { PrintPreviewFooter } from './PrintPreviewFooter';
|
||||
import { CardLayer } from './CardLayer';
|
||||
|
||||
export interface PrintPreviewProps {
|
||||
store: DeckStore;
|
||||
|
|
@ -11,483 +12,44 @@ export interface PrintPreviewProps {
|
|||
onExport: () => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理 body 内容中的 {{prop}} 语法并解析 markdown
|
||||
*/
|
||||
function processBody(body: string, currentRow: CardData): string {
|
||||
// 替换 {{prop}} 为对应列的内容
|
||||
const processedBody = body.replace(/\{\{(\w+)\}\}/g, (_, key) => currentRow[key] || '');
|
||||
// 使用 marked 解析 markdown
|
||||
return marked.parse(processedBody) as string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 渲染 layer 内容
|
||||
*/
|
||||
function renderLayerContent(layer: { prop: string }, cardData: CardData): string {
|
||||
const content = cardData[layer.prop] || '';
|
||||
return processBody(content, cardData);
|
||||
}
|
||||
|
||||
/**
|
||||
* 打印预览组件：在 A4 纸张上排列所有卡牌
|
||||
*/
|
||||
export function PrintPreview(props: PrintPreviewProps) {
|
||||
const { store } = props;
|
||||
const { getA4Size, pages, cropMarks } = usePageLayout(store);
|
||||
const { exportToPDF } = usePDFExport(store, props.onClose);
|
||||
|
||||
// A4 纸张尺寸（mm）：210 x 297
|
||||
const A4_WIDTH_PORTRAIT = 210;
|
||||
const A4_HEIGHT_PORTRAIT = 297;
|
||||
const A4_WIDTH_LANDSCAPE = 297;
|
||||
const A4_HEIGHT_LANDSCAPE = 210;
|
||||
const PRINT_MARGIN = 5; // 打印边距
|
||||
const visibleLayers = () => store.state.layerConfigs.filter((l) => l.visible);
|
||||
|
||||
// 获取打印设置
|
||||
const orientation = () => store.state.printOrientation;
|
||||
const oddPageOffsetX = () => store.state.printOddPageOffsetX;
|
||||
const oddPageOffsetY = () => store.state.printOddPageOffsetY;
|
||||
|
||||
// 根据方向获取 A4 尺寸
|
||||
const getA4Size = () => {
|
||||
if (orientation() === 'landscape') {
|
||||
return { width: A4_WIDTH_LANDSCAPE, height: A4_HEIGHT_LANDSCAPE };
|
||||
}
|
||||
return { width: A4_WIDTH_PORTRAIT, height: A4_HEIGHT_PORTRAIT };
|
||||
};
|
||||
|
||||
// 计算每张卡牌在 A4 纸上的位置（居中布局）
|
||||
const pages = createMemo(() => {
|
||||
const cards = store.state.cards;
|
||||
const cardWidth = store.state.dimensions?.cardWidth || 56;
|
||||
const cardHeight = store.state.dimensions?.cardHeight || 88;
|
||||
const { width: a4Width, height: a4Height } = getA4Size();
|
||||
|
||||
// 每行可容纳的卡牌数量
|
||||
const usableWidth = a4Width - PRINT_MARGIN * 2;
|
||||
const cardsPerRow = Math.floor(usableWidth / cardWidth);
|
||||
|
||||
// 每页可容纳的行数
|
||||
const usableHeight = a4Height - PRINT_MARGIN * 2;
|
||||
const rowsPerPage = Math.floor(usableHeight / cardHeight);
|
||||
|
||||
// 每页的卡牌数量
|
||||
const cardsPerPage = cardsPerRow * rowsPerPage;
|
||||
|
||||
// 计算最大卡牌区域的尺寸（用于居中和外围框）
|
||||
const maxGridWidth = cardsPerRow * cardWidth;
|
||||
const maxGridHeight = rowsPerPage * cardHeight;
|
||||
|
||||
// 居中偏移量（使卡牌区域在 A4 纸上居中）
|
||||
const baseOffsetX = (a4Width - maxGridWidth) / 2;
|
||||
const baseOffsetY = (a4Height - maxGridHeight) / 2;
|
||||
|
||||
// 分页
|
||||
const result: {
|
||||
pageIndex: number;
|
||||
cards: Array<{ data: typeof cards[0]; x: number; y: number }>;
|
||||
bounds: { minX: number; minY: number; maxX: number; maxY: number };
|
||||
}[] = [];
|
||||
let currentPage: typeof result[0] = { pageIndex: 0, cards: [], bounds: { minX: Infinity, minY: Infinity, maxX: -Infinity, maxY: -Infinity } };
|
||||
|
||||
for (let i = 0; i < cards.length; i++) {
|
||||
const pageIndex = Math.floor(i / cardsPerPage);
|
||||
const indexInPage = i % cardsPerPage;
|
||||
const row = Math.floor(indexInPage / cardsPerRow);
|
||||
const col = indexInPage % cardsPerRow;
|
||||
|
||||
if (pageIndex !== currentPage.pageIndex) {
|
||||
result.push(currentPage);
|
||||
currentPage = { pageIndex, cards: [], bounds: { minX: Infinity, minY: Infinity, maxX: -Infinity, maxY: -Infinity } };
|
||||
}
|
||||
|
||||
// 奇数页应用偏移（pageIndex 从 0 开始，所以偶数索引是奇数页）
|
||||
const isOddPage = pageIndex % 2 === 0;
|
||||
const pageOffsetX = isOddPage ? oddPageOffsetX() : 0;
|
||||
const pageOffsetY = isOddPage ? oddPageOffsetY() : 0;
|
||||
|
||||
// 使用居中偏移量 + 奇数页偏移计算卡牌位置
|
||||
const cardX = baseOffsetX + col * cardWidth + pageOffsetX;
|
||||
const cardY = baseOffsetY + row * cardHeight + pageOffsetY;
|
||||
|
||||
currentPage.cards.push({
|
||||
data: cards[i],
|
||||
x: cardX,
|
||||
y: cardY
|
||||
});
|
||||
|
||||
// 更新边界（含 1mm 边距）
|
||||
currentPage.bounds.minX = Math.min(currentPage.bounds.minX, cardX);
|
||||
currentPage.bounds.minY = Math.min(currentPage.bounds.minY, cardY);
|
||||
currentPage.bounds.maxX = Math.max(currentPage.bounds.maxX, cardX + cardWidth);
|
||||
currentPage.bounds.maxY = Math.max(currentPage.bounds.maxY, cardY + cardHeight);
|
||||
}
|
||||
|
||||
if (currentPage.cards.length > 0) {
|
||||
result.push(currentPage);
|
||||
}
|
||||
|
||||
// 为每页添加固定的外围框尺寸（基于最大网格）
|
||||
return result.map(page => ({
|
||||
...page,
|
||||
frameBounds: {
|
||||
minX: baseOffsetX + (page.pageIndex % 2 === 0 ? oddPageOffsetX() : 0),
|
||||
minY: baseOffsetY + (page.pageIndex % 2 === 0 ? oddPageOffsetY() : 0),
|
||||
maxX: baseOffsetX + maxGridWidth + (page.pageIndex % 2 === 0 ? oddPageOffsetX() : 0),
|
||||
maxY: baseOffsetY + maxGridHeight + (page.pageIndex % 2 === 0 ? oddPageOffsetY() : 0)
|
||||
}
|
||||
}));
|
||||
});
|
||||
|
||||
// 计算裁切线和外围框位置
|
||||
const cropMarks = createMemo(() => {
|
||||
const pagesData = pages();
|
||||
return pagesData.map(page => {
|
||||
const { frameBounds, cards } = page;
|
||||
const cardWidth = store.state.dimensions?.cardWidth || 56;
|
||||
const cardHeight = store.state.dimensions?.cardHeight || 88;
|
||||
|
||||
// 收集所有唯一的裁切线位置
|
||||
const xPositions = new Set<number>();
|
||||
const yPositions = new Set<number>();
|
||||
|
||||
cards.forEach(card => {
|
||||
xPositions.add(card.x);
|
||||
xPositions.add(card.x + cardWidth);
|
||||
yPositions.add(card.y);
|
||||
yPositions.add(card.y + cardHeight);
|
||||
});
|
||||
|
||||
const sortedX = Array.from(xPositions).sort((a, b) => a - b);
|
||||
const sortedY = Array.from(yPositions).sort((a, b) => a - b);
|
||||
|
||||
// 裁切线超出外围框的距离
|
||||
const OVERLAP = 3; // 3mm
|
||||
|
||||
// 生成水平裁切线（沿 Y 轴）
|
||||
const horizontalLines = sortedY.map(y => ({
|
||||
y,
|
||||
xStart: frameBounds.minX - OVERLAP,
|
||||
xEnd: frameBounds.maxX + OVERLAP
|
||||
}));
|
||||
|
||||
// 生成垂直裁切线（沿 X 轴）
|
||||
const verticalLines = sortedX.map(x => ({
|
||||
x,
|
||||
yStart: frameBounds.minY - OVERLAP,
|
||||
yEnd: frameBounds.maxY + OVERLAP
|
||||
}));
|
||||
|
||||
// 外围框边界（离卡牌区域边缘 1mm）
|
||||
const frameBoundsWithMargin = {
|
||||
x: frameBounds.minX - 1,
|
||||
y: frameBounds.minY - 1,
|
||||
width: frameBounds.maxX - frameBounds.minX + 2,
|
||||
height: frameBounds.maxY - frameBounds.minY + 2
|
||||
};
|
||||
|
||||
return { horizontalLines, verticalLines, frameBounds, frameBoundsWithMargin };
|
||||
});
|
||||
});
|
||||
|
||||
const visibleLayers = createMemo(() => store.state.layerConfigs.filter((l) => l.visible));
|
||||
|
||||
// 导出 PDF
|
||||
const handleExportPDF = async () => {
|
||||
const pagesData = pages();
|
||||
const a4Size = getA4Size();
|
||||
const totalPages = pagesData.length;
|
||||
|
||||
// 重置状态
|
||||
store.actions.setExportProgress(0);
|
||||
store.actions.setExportError(null);
|
||||
|
||||
try {
|
||||
// 创建 jsPDF 实例
|
||||
const pdf = new jsPDF({
|
||||
orientation: orientation() === 'landscape' ? 'landscape' : 'portrait',
|
||||
unit: 'mm',
|
||||
format: 'a4'
|
||||
});
|
||||
|
||||
const cardWidth = store.state.dimensions?.cardWidth || 56;
|
||||
const cardHeight = store.state.dimensions?.cardHeight || 88;
|
||||
const gridOriginX = store.state.dimensions?.gridOriginX || 0;
|
||||
const gridOriginY = store.state.dimensions?.gridOriginY || 0;
|
||||
const gridAreaWidth = store.state.dimensions?.gridAreaWidth || cardWidth;
|
||||
const gridAreaHeight = store.state.dimensions?.gridAreaHeight || cardHeight;
|
||||
const fontSize = store.state.dimensions?.fontSize || 3;
|
||||
|
||||
// 为每页生成内容
|
||||
for (let i = 0; i < totalPages; i++) {
|
||||
if (i > 0) {
|
||||
pdf.addPage();
|
||||
}
|
||||
|
||||
const page = pagesData[i];
|
||||
const cropData = cropMarks()[i];
|
||||
|
||||
// 绘制外围边框
|
||||
const frameMargin = cropData.frameBoundsWithMargin;
|
||||
pdf.setDrawColor(0);
|
||||
pdf.setLineWidth(0.2);
|
||||
pdf.rect(frameMargin.x, frameMargin.y, frameMargin.width, frameMargin.height);
|
||||
|
||||
// 绘制水平裁切线
|
||||
for (const line of cropData.horizontalLines) {
|
||||
pdf.setDrawColor(136);
|
||||
pdf.setLineWidth(0.1);
|
||||
// 左侧裁切线
|
||||
pdf.line(line.xStart, line.y, page.frameBounds.minX, line.y);
|
||||
// 右侧裁切线
|
||||
pdf.line(page.frameBounds.maxX, line.y, line.xEnd, line.y);
|
||||
}
|
||||
|
||||
// 绘制垂直裁切线
|
||||
for (const line of cropData.verticalLines) {
|
||||
pdf.setDrawColor(136);
|
||||
pdf.setLineWidth(0.1);
|
||||
// 上方裁切线
|
||||
pdf.line(line.x, line.yStart, line.x, page.frameBounds.minY);
|
||||
// 下方裁切线
|
||||
pdf.line(line.x, page.frameBounds.maxY, line.x, line.yEnd);
|
||||
}
|
||||
|
||||
// 渲染卡牌内容
|
||||
const totalCards = page.cards.length;
|
||||
for (let j = 0; j < totalCards; j++) {
|
||||
const card = page.cards[j];
|
||||
|
||||
// 创建临时容器渲染卡牌内容
|
||||
const container = document.createElement('div');
|
||||
container.style.position = 'absolute';
|
||||
container.style.left = '-9999px';
|
||||
container.style.top = '-9999px';
|
||||
container.style.width = `${cardWidth}mm`;
|
||||
container.style.height = `${cardHeight}mm`;
|
||||
container.style.background = 'white';
|
||||
|
||||
// 网格区域容器
|
||||
const gridContainer = document.createElement('div');
|
||||
gridContainer.style.position = 'absolute';
|
||||
gridContainer.style.left = `${gridOriginX}mm`;
|
||||
gridContainer.style.top = `${gridOriginY}mm`;
|
||||
gridContainer.style.width = `${gridAreaWidth}mm`;
|
||||
gridContainer.style.height = `${gridAreaHeight}mm`;
|
||||
|
||||
// 渲染每个 layer
|
||||
for (const layer of visibleLayers()) {
|
||||
const layerEl = document.createElement('div');
|
||||
layerEl.className = 'absolute flex items-center justify-center text-center prose prose-sm';
|
||||
Object.assign(layerEl.style, getLayerStyle(layer, store.state.dimensions!));
|
||||
layerEl.style.fontSize = `${fontSize}mm`;
|
||||
layerEl.innerHTML = renderLayerContent(layer, card.data);
|
||||
gridContainer.appendChild(layerEl);
|
||||
}
|
||||
|
||||
container.appendChild(gridContainer);
|
||||
document.body.appendChild(container);
|
||||
|
||||
// 使用 html2canvas 渲染
|
||||
try {
|
||||
const html2canvas = (await import('html2canvas')).default;
|
||||
const canvas = await html2canvas(container, {
|
||||
scale: 2,
|
||||
backgroundColor: null,
|
||||
logging: false,
|
||||
useCORS: true
|
||||
});
|
||||
|
||||
const imgData = canvas.toDataURL('image/png');
|
||||
pdf.addImage(imgData, 'PNG', card.x, card.y, cardWidth, cardHeight);
|
||||
} catch (e) {
|
||||
console.error('渲染卡牌内容失败:', e);
|
||||
}
|
||||
|
||||
document.body.removeChild(container);
|
||||
|
||||
// 更新进度（按卡牌数量计算）
|
||||
const currentCardIndex = i * totalCards + j + 1;
|
||||
const totalCardCount = totalPages * totalCards;
|
||||
const progress = Math.round((currentCardIndex / totalCardCount) * 100);
|
||||
store.actions.setExportProgress(progress);
|
||||
}
|
||||
}
|
||||
|
||||
// 保存 PDF 文件
|
||||
pdf.save('deck.pdf');
|
||||
|
||||
// 完成，关闭预览
|
||||
props.onClose();
|
||||
} catch (err) {
|
||||
const errorMsg = err instanceof Error ? err.message : '导出失败，未知错误';
|
||||
store.actions.setExportError(errorMsg);
|
||||
console.error('PDF 导出失败:', err);
|
||||
}
|
||||
};
|
||||
|
||||
// 渲染单个卡片的 SVG 内容（使用 foreignObject）
|
||||
const renderCardInSvg = (card: { data: typeof store.state.cards[0]; x: number; y: number }, pageIndex: number) => {
|
||||
const cardWidth = store.state.dimensions?.cardWidth || 56;
|
||||
const cardHeight = store.state.dimensions?.cardHeight || 88;
|
||||
const gridOriginX = store.state.dimensions?.gridOriginX || 0;
|
||||
const gridOriginY = store.state.dimensions?.gridOriginY || 0;
|
||||
const gridAreaWidth = store.state.dimensions?.gridAreaWidth || cardWidth;
|
||||
const gridAreaHeight = store.state.dimensions?.gridAreaHeight || cardHeight;
|
||||
const fontSize = store.state.dimensions?.fontSize || 3;
|
||||
|
||||
return (
|
||||
<g class="card-group">
|
||||
<foreignObject
|
||||
x={`${card.x}mm`}
|
||||
y={`${card.y}mm`}
|
||||
width={`${cardWidth}mm`}
|
||||
height={`${cardHeight}mm`}
|
||||
>
|
||||
<div xmlns="http://www.w3.org/1999/xhtml" class="w-full h-full bg-white">
|
||||
{/* 网格区域容器 */}
|
||||
<div
|
||||
class="absolute"
|
||||
style={{
|
||||
position: 'absolute',
|
||||
left: `${gridOriginX}mm`,
|
||||
top: `${gridOriginY}mm`,
|
||||
width: `${gridAreaWidth}mm`,
|
||||
height: `${gridAreaHeight}mm`
|
||||
}}
|
||||
>
|
||||
{/* 渲染每个 layer */}
|
||||
<For each={visibleLayers()}>
|
||||
{(layer) => (
|
||||
<div
|
||||
class="absolute flex items-center justify-center text-center prose prose-sm"
|
||||
style={{
|
||||
...getLayerStyle(layer, store.state.dimensions!),
|
||||
'font-size': `${fontSize}mm`
|
||||
}}
|
||||
innerHTML={renderLayerContent(layer, card.data)}
|
||||
/>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
</div>
|
||||
</foreignObject>
|
||||
</g>
|
||||
);
|
||||
const handleExport = async () => {
|
||||
const options: ExportOptions = {
|
||||
orientation: store.state.printOrientation,
|
||||
cardWidth: store.state.dimensions?.cardWidth || 56,
|
||||
cardHeight: store.state.dimensions?.cardHeight || 88,
|
||||
gridOriginX: store.state.dimensions?.gridOriginX || 0,
|
||||
gridOriginY: store.state.dimensions?.gridOriginY || 0,
|
||||
gridAreaWidth: store.state.dimensions?.gridAreaWidth || 56,
|
||||
gridAreaHeight: store.state.dimensions?.gridAreaHeight || 88,
|
||||
fontSize: store.state.dimensions?.fontSize || 3,
|
||||
visibleLayers: visibleLayers(),
|
||||
dimensions: store.state.dimensions!
|
||||
};
|
||||
await exportToPDF(pages(), cropMarks(), options);
|
||||
};
|
||||
|
||||
return (
|
||||
<div class="fixed inset-0 bg-black/50 z-50 overflow-auto">
|
||||
<div class="min-h-screen py-20 px-4">
|
||||
{/* 打印预览控制栏 */}
|
||||
<div class="fixed top-0 left-0 right-0 z-50 bg-white shadow-lg rounded-lg mx-4 mt-4 px-4 py-3 flex items-center justify-between gap-4">
|
||||
<div class="flex items-center gap-4">
|
||||
<h2 class="text-base font-bold mt-0 mb-0">打印预览</h2>
|
||||
<p class="text-xs text-gray-500 mb-0">共 {pages().length} 页，{store.state.cards.length} 张卡牌</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
{/* 方向选择 */}
|
||||
<div class="flex items-center gap-2">
|
||||
<label class="text-sm text-gray-600">方向:</label>
|
||||
<div class="flex gap-1">
|
||||
<button
|
||||
onClick={() => store.actions.setPrintOrientation('portrait')}
|
||||
class={`px-3 py-1 rounded text-sm font-medium cursor-pointer border ${
|
||||
orientation() === 'portrait'
|
||||
? 'bg-blue-600 text-white border-blue-600'
|
||||
: 'bg-white text-gray-700 border-gray-300 hover:bg-gray-50'
|
||||
}`}
|
||||
>
|
||||
竖向
|
||||
</button>
|
||||
<button
|
||||
onClick={() => store.actions.setPrintOrientation('landscape')}
|
||||
class={`px-3 py-1 rounded text-sm font-medium cursor-pointer border ${
|
||||
orientation() === 'landscape'
|
||||
? 'bg-blue-600 text-white border-blue-600'
|
||||
: 'bg-white text-gray-700 border-gray-300 hover:bg-gray-50'
|
||||
}`}
|
||||
>
|
||||
横向
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{/* 奇数页偏移 */}
|
||||
<div class="flex items-center gap-2">
|
||||
<label class="text-sm text-gray-600">奇数页偏移:</label>
|
||||
<div class="flex items-center gap-1">
|
||||
<span class="text-xs text-gray-500">X:</span>
|
||||
<input
|
||||
type="number"
|
||||
value={oddPageOffsetX()}
|
||||
onChange={(e) => store.actions.setPrintOddPageOffsetX(Number(e.target.value))}
|
||||
class="w-16 px-2 py-1 border border-gray-300 rounded text-sm"
|
||||
step="0.1"
|
||||
/>
|
||||
<span class="text-xs text-gray-500 ml-1">mm</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1">
|
||||
<span class="text-xs text-gray-500">Y:</span>
|
||||
<input
|
||||
type="number"
|
||||
value={oddPageOffsetY()}
|
||||
onChange={(e) => store.actions.setPrintOddPageOffsetY(Number(e.target.value))}
|
||||
class="w-16 px-2 py-1 border border-gray-300 rounded text-sm"
|
||||
step="0.1"
|
||||
/>
|
||||
<span class="text-xs text-gray-500 ml-1">mm</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button
|
||||
onClick={handleExportPDF}
|
||||
class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-1.5 rounded text-sm font-medium cursor-pointer flex items-center gap-2"
|
||||
>
|
||||
<span>📥</span>
|
||||
<span>导出 PDF</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={props.onClose}
|
||||
class="bg-gray-200 hover:bg-gray-300 text-gray-700 px-4 py-1.5 rounded text-sm font-medium cursor-pointer"
|
||||
>
|
||||
关闭
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<PrintPreviewHeader
|
||||
store={store}
|
||||
pageCount={pages().length}
|
||||
onExport={handleExport}
|
||||
onClose={props.onClose}
|
||||
/>
|
||||
|
||||
{/* 进度条和错误信息 */}
|
||||
<Show when={store.state.exportProgress > 0 || store.state.exportError}>
|
||||
<div class="fixed bottom-0 left-0 right-0 z-50 bg-white shadow-lg rounded-lg mx-4 mb-4 px-4 py-3">
|
||||
<Show when={!store.state.exportError}>
|
||||
<div class="flex items-center gap-4">
|
||||
<span class="text-sm text-gray-600">导出进度：</span>
|
||||
<div class="flex-1 h-2 bg-gray-200 rounded-full overflow-hidden">
|
||||
<div
|
||||
class="h-full bg-blue-600 transition-all duration-200"
|
||||
style={{ width: `${store.state.exportProgress}%` }}
|
||||
/>
|
||||
</div>
|
||||
<span class="text-sm font-medium text-gray-700">{store.state.exportProgress}%</span>
|
||||
</div>
|
||||
</Show>
|
||||
<Show when={store.state.exportError}>
|
||||
<div class="flex items-center justify-between gap-4">
|
||||
<div class="flex items-center gap-2 text-red-600">
|
||||
<span>❌</span>
|
||||
<span class="text-sm font-medium">{store.state.exportError}</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => store.actions.clearExportError()}
|
||||
class="text-gray-500 hover:text-gray-700 cursor-pointer"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
</Show>
|
||||
<PrintPreviewFooter store={store} />
|
||||
|
||||
{/* A4 纸张预览：每页都是一个完整的 SVG */}
|
||||
<div class="flex flex-col items-center gap-8">
|
||||
<For each={pages()}>
|
||||
{(page) => (
|
||||
|
|
@ -501,7 +63,6 @@ export function PrintPreview(props: PrintPreviewProps) {
|
|||
data-page={page.pageIndex + 1}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
{/* 外围边框：黑色 0.2mm */}
|
||||
<rect
|
||||
x={`${cropMarks()[page.pageIndex]?.frameBoundsWithMargin.x}mm`}
|
||||
y={`${cropMarks()[page.pageIndex]?.frameBoundsWithMargin.y}mm`}
|
||||
|
|
@ -512,11 +73,9 @@ export function PrintPreview(props: PrintPreviewProps) {
|
|||
stroke-width="0.2"
|
||||
/>
|
||||
|
||||
{/* 水平裁切线 */}
|
||||
<For each={cropMarks()[page.pageIndex]?.horizontalLines}>
|
||||
{(line) => (
|
||||
<>
|
||||
{/* 左侧裁切线（外围框外部） */}
|
||||
<line
|
||||
x1={`${line.xStart}mm`}
|
||||
y1={`${line.y}mm`}
|
||||
|
|
@ -525,7 +84,6 @@ export function PrintPreview(props: PrintPreviewProps) {
|
|||
stroke="#888"
|
||||
stroke-width="0.1"
|
||||
/>
|
||||
{/* 右侧裁切线（外围框外部） */}
|
||||
<line
|
||||
x1={`${page.frameBounds.maxX}mm`}
|
||||
y1={`${line.y}mm`}
|
||||
|
|
@ -537,11 +95,10 @@ export function PrintPreview(props: PrintPreviewProps) {
|
|||
</>
|
||||
)}
|
||||
</For>
|
||||
{/* 垂直裁切线 */}
|
||||
|
||||
<For each={cropMarks()[page.pageIndex]?.verticalLines}>
|
||||
{(line) => (
|
||||
<>
|
||||
{/* 上方裁切线（外围框外部） */}
|
||||
<line
|
||||
x1={`${line.x}mm`}
|
||||
y1={`${line.yStart}mm`}
|
||||
|
|
@ -550,7 +107,6 @@ export function PrintPreview(props: PrintPreviewProps) {
|
|||
stroke="#888"
|
||||
stroke-width="0.1"
|
||||
/>
|
||||
{/* 下方裁切线（外围框外部） */}
|
||||
<line
|
||||
x1={`${line.x}mm`}
|
||||
y1={`${page.frameBounds.maxY}mm`}
|
||||
|
|
@ -563,9 +119,36 @@ export function PrintPreview(props: PrintPreviewProps) {
|
|||
)}
|
||||
</For>
|
||||
|
||||
{/* 渲染该页的所有卡牌 */}
|
||||
<For each={page.cards}>
|
||||
{(card) => renderCardInSvg(card, page.pageIndex)}
|
||||
{(card) => (
|
||||
<g class="card-group">
|
||||
<foreignObject
|
||||
x={`${card.x}mm`}
|
||||
y={`${card.y}mm`}
|
||||
width={`${store.state.dimensions?.cardWidth || 56}mm`}
|
||||
height={`${store.state.dimensions?.cardHeight || 88}mm`}
|
||||
>
|
||||
<div xmlns="http://www.w3.org/1999/xhtml" class="w-full h-full bg-white">
|
||||
<div
|
||||
class="absolute"
|
||||
style={{
|
||||
position: 'absolute',
|
||||
left: `${store.state.dimensions?.gridOriginX}mm`,
|
||||
top: `${store.state.dimensions?.gridOriginY}mm`,
|
||||
width: `${store.state.dimensions?.gridAreaWidth}mm`,
|
||||
height: `${store.state.dimensions?.gridAreaHeight}mm`
|
||||
}}
|
||||
>
|
||||
<CardLayer
|
||||
layers={visibleLayers()}
|
||||
dimensions={store.state.dimensions!}
|
||||
cardData={card.data}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</foreignObject>
|
||||
</g>
|
||||
)}
|
||||
</For>
|
||||
</svg>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,43 @@
|
|||
import { Show } from 'solid-js';
|
||||
import type { DeckStore } from './hooks/deckStore';
|
||||
|
||||
export interface PrintPreviewFooterProps {
|
||||
store: DeckStore;
|
||||
}
|
||||
|
||||
export function PrintPreviewFooter(props: PrintPreviewFooterProps) {
|
||||
const { store } = props;
|
||||
|
||||
return (
|
||||
<Show when={store.state.exportProgress > 0 || store.state.exportError}>
|
||||
<div class="fixed bottom-0 left-0 right-0 z-50 bg-white shadow-lg rounded-lg mx-4 mb-4 px-4 py-3">
|
||||
<Show when={!store.state.exportError}>
|
||||
<div class="flex items-center gap-4">
|
||||
<span class="text-sm text-gray-600">导出进度：</span>
|
||||
<div class="flex-1 h-2 bg-gray-200 rounded-full overflow-hidden">
|
||||
<div
|
||||
class="h-full bg-blue-600 transition-all duration-200"
|
||||
style={{ width: `${store.state.exportProgress}%` }}
|
||||
/>
|
||||
</div>
|
||||
<span class="text-sm font-medium text-gray-700">{store.state.exportProgress}%</span>
|
||||
</div>
|
||||
</Show>
|
||||
<Show when={store.state.exportError}>
|
||||
<div class="flex items-center justify-between gap-4">
|
||||
<div class="flex items-center gap-2 text-red-600">
|
||||
<span>❌</span>
|
||||
<span class="text-sm font-medium">{store.state.exportError}</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => store.actions.clearExportError()}
|
||||
class="text-gray-500 hover:text-gray-700 cursor-pointer"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
</Show>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,91 @@
|
|||
import type { DeckStore } from './hooks/deckStore';
|
||||
|
||||
export interface PrintPreviewHeaderProps {
|
||||
store: DeckStore;
|
||||
pageCount: number;
|
||||
onExport: () => void;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export function PrintPreviewHeader(props: PrintPreviewHeaderProps) {
|
||||
const { store } = props;
|
||||
const orientation = () => store.state.printOrientation;
|
||||
const oddPageOffsetX = () => store.state.printOddPageOffsetX;
|
||||
const oddPageOffsetY = () => store.state.printOddPageOffsetY;
|
||||
|
||||
return (
|
||||
<div class="fixed top-0 left-0 right-0 z-50 bg-white shadow-lg rounded-lg mx-4 mt-4 px-4 py-3 flex items-center justify-between gap-4">
|
||||
<div class="flex items-center gap-4">
|
||||
<h2 class="text-base font-bold mt-0 mb-0">打印预览</h2>
|
||||
<p class="text-xs text-gray-500 mb-0">共 {props.pageCount} 页，{store.state.cards.length} 张卡牌</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<label class="text-sm text-gray-600">方向:</label>
|
||||
<div class="flex gap-1">
|
||||
<button
|
||||
onClick={() => store.actions.setPrintOrientation('portrait')}
|
||||
class={`px-3 py-1 rounded text-sm font-medium cursor-pointer border ${
|
||||
orientation() === 'portrait'
|
||||
? 'bg-blue-600 text-white border-blue-600'
|
||||
: 'bg-white text-gray-700 border-gray-300 hover:bg-gray-50'
|
||||
}`}
|
||||
>
|
||||
竖向
|
||||
</button>
|
||||
<button
|
||||
onClick={() => store.actions.setPrintOrientation('landscape')}
|
||||
class={`px-3 py-1 rounded text-sm font-medium cursor-pointer border ${
|
||||
orientation() === 'landscape'
|
||||
? 'bg-blue-600 text-white border-blue-600'
|
||||
: 'bg-white text-gray-700 border-gray-300 hover:bg-gray-50'
|
||||
}`}
|
||||
>
|
||||
横向
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<label class="text-sm text-gray-600">奇数页偏移:</label>
|
||||
<div class="flex items-center gap-1">
|
||||
<span class="text-xs text-gray-500">X:</span>
|
||||
<input
|
||||
type="number"
|
||||
value={oddPageOffsetX()}
|
||||
onChange={(e) => store.actions.setPrintOddPageOffsetX(Number(e.target.value))}
|
||||
class="w-16 px-2 py-1 border border-gray-300 rounded text-sm"
|
||||
step="0.1"
|
||||
/>
|
||||
<span class="text-xs text-gray-500 ml-1">mm</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1">
|
||||
<span class="text-xs text-gray-500">Y:</span>
|
||||
<input
|
||||
type="number"
|
||||
value={oddPageOffsetY()}
|
||||
onChange={(e) => store.actions.setPrintOddPageOffsetY(Number(e.target.value))}
|
||||
class="w-16 px-2 py-1 border border-gray-300 rounded text-sm"
|
||||
step="0.1"
|
||||
/>
|
||||
<span class="text-xs text-gray-500 ml-1">mm</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button
|
||||
onClick={props.onExport}
|
||||
class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-1.5 rounded text-sm font-medium cursor-pointer flex items-center gap-2"
|
||||
>
|
||||
<span>📥</span>
|
||||
<span>导出 PDF</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={props.onClose}
|
||||
class="bg-gray-200 hover:bg-gray-300 text-gray-700 px-4 py-1.5 rounded text-sm font-medium cursor-pointer"
|
||||
>
|
||||
关闭
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,183 @@
|
|||
import { marked } from '../../../markdown';
|
||||
import { getLayerStyle } from './dimensions';
|
||||
import type { DeckStore } from './deckStore';
|
||||
import type { CardData, LayerConfig, Dimensions } from '../types';
|
||||
import jsPDF from 'jspdf';
|
||||
|
||||
/**
|
||||
* 处理 body 内容中的 {{prop}} 语法并解析 markdown
|
||||
*/
|
||||
function processBody(body: string, currentRow: CardData): string {
|
||||
const processedBody = body.replace(/\{\{(\w+)\}\}/g, (_, key) => currentRow[key] || '');
|
||||
return marked.parse(processedBody) as string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 渲染 layer 内容
|
||||
*/
|
||||
function renderLayerContent(layer: { prop: string }, cardData: CardData): string {
|
||||
const content = cardData[layer.prop] || '';
|
||||
return processBody(content, cardData);
|
||||
}
|
||||
|
||||
export interface PageCard {
|
||||
data: CardData;
|
||||
x: number;
|
||||
y: number;
|
||||
}
|
||||
|
||||
export interface PageData {
|
||||
pageIndex: number;
|
||||
cards: PageCard[];
|
||||
bounds: { minX: number; minY: number; maxX: number; maxY: number };
|
||||
frameBounds: { minX: number; minY: number; maxX: number; maxY: number };
|
||||
}
|
||||
|
||||
export interface CropMarkData {
|
||||
horizontalLines: { y: number; xStart: number; xEnd: number }[];
|
||||
verticalLines: { x: number; yStart: number; yEnd: number }[];
|
||||
frameBounds: { minX: number; minY: number; maxX: number; maxY: number };
|
||||
frameBoundsWithMargin: { x: number; y: number; width: number; height: number };
|
||||
}
|
||||
|
||||
export interface ExportOptions {
|
||||
orientation: 'portrait' | 'landscape';
|
||||
cardWidth: number;
|
||||
cardHeight: number;
|
||||
gridOriginX: number;
|
||||
gridOriginY: number;
|
||||
gridAreaWidth: number;
|
||||
gridAreaHeight: number;
|
||||
fontSize: number;
|
||||
visibleLayers: LayerConfig[];
|
||||
dimensions: Dimensions;
|
||||
}
|
||||
|
||||
/**
|
||||
* 渲染卡牌到 canvas
|
||||
*/
|
||||
async function renderCardToCanvas(card: PageCard, options: ExportOptions): Promise<HTMLCanvasElement> {
|
||||
const { cardWidth, cardHeight, gridOriginX, gridOriginY, gridAreaWidth, gridAreaHeight, fontSize, visibleLayers, dimensions } = options;
|
||||
|
||||
const container = document.createElement('div');
|
||||
container.style.position = 'absolute';
|
||||
container.style.left = '-9999px';
|
||||
container.style.top = '-9999px';
|
||||
container.style.width = `${cardWidth}mm`;
|
||||
container.style.height = `${cardHeight}mm`;
|
||||
container.style.background = 'white';
|
||||
|
||||
const gridContainer = document.createElement('div');
|
||||
gridContainer.style.position = 'absolute';
|
||||
gridContainer.style.left = `${gridOriginX}mm`;
|
||||
gridContainer.style.top = `${gridOriginY}mm`;
|
||||
gridContainer.style.width = `${gridAreaWidth}mm`;
|
||||
gridContainer.style.height = `${gridAreaHeight}mm`;
|
||||
|
||||
for (const layer of visibleLayers) {
|
||||
const layerEl = document.createElement('div');
|
||||
layerEl.className = 'absolute flex items-center justify-center text-center prose prose-sm';
|
||||
Object.assign(layerEl.style, getLayerStyle(layer, dimensions));
|
||||
layerEl.style.fontSize = `${fontSize}mm`;
|
||||
layerEl.innerHTML = renderLayerContent(layer, card.data);
|
||||
gridContainer.appendChild(layerEl);
|
||||
}
|
||||
|
||||
container.appendChild(gridContainer);
|
||||
document.body.appendChild(container);
|
||||
|
||||
try {
|
||||
const html2canvas = (await import('html2canvas')).default;
|
||||
return await html2canvas(container, {
|
||||
scale: 2,
|
||||
backgroundColor: null,
|
||||
logging: false,
|
||||
useCORS: true
|
||||
});
|
||||
} finally {
|
||||
document.body.removeChild(container);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 绘制页面边框和裁切线
|
||||
*/
|
||||
function drawPageMarks(pdf: jsPDF, cropData: CropMarkData, pageFrameBounds: { minX: number; maxX: number; minY: number; maxY: number }) {
|
||||
const frameMargin = cropData.frameBoundsWithMargin;
|
||||
|
||||
// 外围边框
|
||||
pdf.setDrawColor(0);
|
||||
pdf.setLineWidth(0.2);
|
||||
pdf.rect(frameMargin.x, frameMargin.y, frameMargin.width, frameMargin.height);
|
||||
|
||||
// 水平裁切线
|
||||
pdf.setDrawColor(136);
|
||||
pdf.setLineWidth(0.1);
|
||||
for (const line of cropData.horizontalLines) {
|
||||
pdf.line(line.xStart, line.y, pageFrameBounds.minX, line.y);
|
||||
pdf.line(pageFrameBounds.maxX, line.y, line.xEnd, line.y);
|
||||
}
|
||||
|
||||
// 垂直裁切线
|
||||
for (const line of cropData.verticalLines) {
|
||||
pdf.line(line.x, line.yStart, line.x, pageFrameBounds.minY);
|
||||
pdf.line(line.x, pageFrameBounds.maxY, line.x, line.yEnd);
|
||||
}
|
||||
}
|
||||
|
||||
export interface UsePDFExportReturn {
|
||||
exportToPDF: (pages: PageData[], cropMarks: CropMarkData[], options: ExportOptions) => Promise<void>;
|
||||
}
|
||||
|
||||
/**
|
||||
* PDF 导出 hook
|
||||
*/
|
||||
export function usePDFExport(store: DeckStore, onClose: () => void): UsePDFExportReturn {
|
||||
const exportToPDF = async (pages: PageData[], cropMarks: CropMarkData[], options: ExportOptions) => {
|
||||
const totalPages = pages.length;
|
||||
|
||||
store.actions.setExportProgress(0);
|
||||
store.actions.setExportError(null);
|
||||
|
||||
try {
|
||||
const pdf = new jsPDF({
|
||||
orientation: options.orientation,
|
||||
unit: 'mm',
|
||||
format: 'a4'
|
||||
});
|
||||
|
||||
for (let i = 0; i < totalPages; i++) {
|
||||
if (i > 0) {
|
||||
pdf.addPage();
|
||||
}
|
||||
|
||||
const page = pages[i];
|
||||
const cropData = cropMarks[i];
|
||||
|
||||
drawPageMarks(pdf, cropData, page.frameBounds);
|
||||
|
||||
const totalCards = page.cards.length;
|
||||
for (let j = 0; j < totalCards; j++) {
|
||||
const card = page.cards[j];
|
||||
const canvas = await renderCardToCanvas(card, options);
|
||||
const imgData = canvas.toDataURL('image/png');
|
||||
pdf.addImage(imgData, 'PNG', card.x, card.y, options.cardWidth, options.cardHeight);
|
||||
|
||||
const currentCardIndex = i * totalCards + j + 1;
|
||||
const totalCardCount = totalPages * totalCards;
|
||||
const progress = Math.round((currentCardIndex / totalCardCount) * 100);
|
||||
store.actions.setExportProgress(progress);
|
||||
}
|
||||
}
|
||||
|
||||
pdf.save('deck.pdf');
|
||||
onClose();
|
||||
} catch (err) {
|
||||
const errorMsg = err instanceof Error ? err.message : '导出失败，未知错误';
|
||||
store.actions.setExportError(errorMsg);
|
||||
console.error('PDF 导出失败:', err);
|
||||
}
|
||||
};
|
||||
|
||||
return { exportToPDF };
|
||||
}
|
||||
|
|
@ -0,0 +1,153 @@
|
|||
import { createMemo } from 'solid-js';
|
||||
import type { DeckStore } from './deckStore';
|
||||
import type { PageData, CropMarkData } from './usePDFExport';
|
||||
|
||||
export interface A4Size {
|
||||
width: number;
|
||||
height: number;
|
||||
}
|
||||
|
||||
export interface UsePageLayoutReturn {
|
||||
getA4Size: () => A4Size;
|
||||
pages: ReturnType<typeof createMemo<PageData[]>>;
|
||||
cropMarks: ReturnType<typeof createMemo<CropMarkData[]>>;
|
||||
}
|
||||
|
||||
const A4_WIDTH_PORTRAIT = 210;
|
||||
const A4_HEIGHT_PORTRAIT = 297;
|
||||
const A4_WIDTH_LANDSCAPE = 297;
|
||||
const A4_HEIGHT_LANDSCAPE = 210;
|
||||
const PRINT_MARGIN = 5;
|
||||
|
||||
/**
|
||||
* 页面布局计算 hook
|
||||
*/
|
||||
export function usePageLayout(store: DeckStore): UsePageLayoutReturn {
|
||||
const orientation = () => store.state.printOrientation;
|
||||
const oddPageOffsetX = () => store.state.printOddPageOffsetX;
|
||||
const oddPageOffsetY = () => store.state.printOddPageOffsetY;
|
||||
|
||||
const getA4Size = () => {
|
||||
if (orientation() === 'landscape') {
|
||||
return { width: A4_WIDTH_LANDSCAPE, height: A4_HEIGHT_LANDSCAPE };
|
||||
}
|
||||
return { width: A4_WIDTH_PORTRAIT, height: A4_HEIGHT_PORTRAIT };
|
||||
};
|
||||
|
||||
const pages = createMemo<PageData[]>(() => {
|
||||
const cards = store.state.cards;
|
||||
const cardWidth = store.state.dimensions?.cardWidth || 56;
|
||||
const cardHeight = store.state.dimensions?.cardHeight || 88;
|
||||
const { width: a4Width, height: a4Height } = getA4Size();
|
||||
|
||||
const usableWidth = a4Width - PRINT_MARGIN * 2;
|
||||
const cardsPerRow = Math.floor(usableWidth / cardWidth);
|
||||
const usableHeight = a4Height - PRINT_MARGIN * 2;
|
||||
const rowsPerPage = Math.floor(usableHeight / cardHeight);
|
||||
const cardsPerPage = cardsPerRow * rowsPerPage;
|
||||
|
||||
const maxGridWidth = cardsPerRow * cardWidth;
|
||||
const maxGridHeight = rowsPerPage * cardHeight;
|
||||
const baseOffsetX = (a4Width - maxGridWidth) / 2;
|
||||
const baseOffsetY = (a4Height - maxGridHeight) / 2;
|
||||
|
||||
const result: PageData[] = [];
|
||||
let currentPage: PageData = {
|
||||
pageIndex: 0,
|
||||
cards: [],
|
||||
bounds: { minX: Infinity, minY: Infinity, maxX: -Infinity, maxY: -Infinity },
|
||||
frameBounds: { minX: Infinity, minY: Infinity, maxX: -Infinity, maxY: -Infinity }
|
||||
};
|
||||
|
||||
for (let i = 0; i < cards.length; i++) {
|
||||
const pageIndex = Math.floor(i / cardsPerPage);
|
||||
const indexInPage = i % cardsPerPage;
|
||||
const row = Math.floor(indexInPage / cardsPerRow);
|
||||
const col = indexInPage % cardsPerRow;
|
||||
|
||||
if (pageIndex !== currentPage.pageIndex) {
|
||||
result.push(currentPage);
|
||||
currentPage = {
|
||||
pageIndex,
|
||||
cards: [],
|
||||
bounds: { minX: Infinity, minY: Infinity, maxX: -Infinity, maxY: -Infinity },
|
||||
frameBounds: { minX: Infinity, minY: Infinity, maxX: -Infinity, maxY: -Infinity }
|
||||
};
|
||||
}
|
||||
|
||||
const isOddPage = pageIndex % 2 === 0;
|
||||
const pageOffsetX = isOddPage ? oddPageOffsetX() : 0;
|
||||
const pageOffsetY = isOddPage ? oddPageOffsetY() : 0;
|
||||
|
||||
const cardX = baseOffsetX + col * cardWidth + pageOffsetX;
|
||||
const cardY = baseOffsetY + row * cardHeight + pageOffsetY;
|
||||
|
||||
currentPage.cards.push({ data: cards[i], x: cardX, y: cardY });
|
||||
currentPage.bounds.minX = Math.min(currentPage.bounds.minX, cardX);
|
||||
currentPage.bounds.minY = Math.min(currentPage.bounds.minY, cardY);
|
||||
currentPage.bounds.maxX = Math.max(currentPage.bounds.maxX, cardX + cardWidth);
|
||||
currentPage.bounds.maxY = Math.max(currentPage.bounds.maxY, cardY + cardHeight);
|
||||
}
|
||||
|
||||
if (currentPage.cards.length > 0) {
|
||||
result.push(currentPage);
|
||||
}
|
||||
|
||||
return result.map(page => ({
|
||||
...page,
|
||||
frameBounds: {
|
||||
minX: baseOffsetX + (page.pageIndex % 2 === 0 ? oddPageOffsetX() : 0),
|
||||
minY: baseOffsetY + (page.pageIndex % 2 === 0 ? oddPageOffsetY() : 0),
|
||||
maxX: baseOffsetX + maxGridWidth + (page.pageIndex % 2 === 0 ? oddPageOffsetX() : 0),
|
||||
maxY: baseOffsetY + maxGridHeight + (page.pageIndex % 2 === 0 ? oddPageOffsetY() : 0)
|
||||
}
|
||||
}));
|
||||
});
|
||||
|
||||
const cropMarks = createMemo<CropMarkData[]>(() => {
|
||||
const pagesData = pages();
|
||||
return pagesData.map(page => {
|
||||
const { frameBounds, cards } = page;
|
||||
const cardWidth = store.state.dimensions?.cardWidth || 56;
|
||||
const cardHeight = store.state.dimensions?.cardHeight || 88;
|
||||
|
||||
const xPositions = new Set<number>();
|
||||
const yPositions = new Set<number>();
|
||||
|
||||
cards.forEach(card => {
|
||||
xPositions.add(card.x);
|
||||
xPositions.add(card.x + cardWidth);
|
||||
yPositions.add(card.y);
|
||||
yPositions.add(card.y + cardHeight);
|
||||
});
|
||||
|
||||
const sortedX = Array.from(xPositions).sort((a, b) => a - b);
|
||||
const sortedY = Array.from(yPositions).sort((a, b) => a - b);
|
||||
|
||||
const OVERLAP = 3;
|
||||
|
||||
const horizontalLines = sortedY.map(y => ({
|
||||
y,
|
||||
xStart: frameBounds.minX - OVERLAP,
|
||||
xEnd: frameBounds.maxX + OVERLAP
|
||||
}));
|
||||
|
||||
const verticalLines = sortedX.map(x => ({
|
||||
x,
|
||||
yStart: frameBounds.minY - OVERLAP,
|
||||
yEnd: frameBounds.maxY + OVERLAP
|
||||
}));
|
||||
|
||||
const frameBoundsWithMargin = {
|
||||
x: frameBounds.minX - 1,
|
||||
y: frameBounds.minY - 1,
|
||||
width: frameBounds.maxX - frameBounds.minX + 2,
|
||||
height: frameBounds.maxY - frameBounds.minY + 2
|
||||
};
|
||||
|
||||
return { horizontalLines, verticalLines, frameBounds, frameBoundsWithMargin };
|
||||
});
|
||||
});
|
||||
|
||||
return { getA4Size, pages, cropMarks };
|
||||
}
|
||||
Loading…
Reference in New Issue