ttrpg-tools/src/components/md-deck/PrintPreview.tsx

import { For } from 'solid-js';
import type { DeckStore } from './hooks/deckStore';
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;
  onClose: () => void;
  onExport: () => void;
}

/**
 * 打印预览组件：在 A4 纸张上排列所有卡牌
 */
export function PrintPreview(props: PrintPreviewProps) {
  const { store } = props;
  const { getA4Size, pages, cropMarks } = usePageLayout(store);
  const { exportToPDF } = usePDFExport(store, props.onClose);

  const visibleLayers = () => store.state.layerConfigs.filter((l) => l.visible);

  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,
      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">
        <PrintPreviewHeader
          store={store}
          pageCount={pages().length}
          onExport={handleExport}
          onClose={props.onClose}
        />

        <PrintPreviewFooter store={store} />

        <div class="flex flex-col items-center gap-8">
          <For each={pages()}>
            {(page) => (
              <svg
                class="bg-white shadow-xl"
                viewBox={`0 0 ${getA4Size().width}mm ${getA4Size().height}mm`}
                style={{
                  width: `${getA4Size().width}mm`,
                  height: `${getA4Size().height}mm`
                }}
                data-page={page.pageIndex + 1}
                xmlns="http://www.w3.org/2000/svg"
              >
                <rect
                  x={`${cropMarks()[page.pageIndex]?.frameBoundsWithMargin.x}mm`}
                  y={`${cropMarks()[page.pageIndex]?.frameBoundsWithMargin.y}mm`}
                  width={`${cropMarks()[page.pageIndex]?.frameBoundsWithMargin.width}mm`}
                  height={`${cropMarks()[page.pageIndex]?.frameBoundsWithMargin.height}mm`}
                  fill="none"
                  stroke="black"
                  stroke-width="0.2"
                />

                <For each={cropMarks()[page.pageIndex]?.horizontalLines}>
                  {(line) => (
                    <>
                      <line
                        x1={`${line.xStart}mm`}
                        y1={`${line.y}mm`}
                        x2={`${page.frameBounds.minX}mm`}
                        y2={`${line.y}mm`}
                        stroke="#888"
                        stroke-width="0.1"
                      />
                      <line
                        x1={`${page.frameBounds.maxX}mm`}
                        y1={`${line.y}mm`}
                        x2={`${line.xEnd}mm`}
                        y2={`${line.y}mm`}
                        stroke="#888"
                        stroke-width="0.1"
                      />
                    </>
                  )}
                </For>

                <For each={cropMarks()[page.pageIndex]?.verticalLines}>
                  {(line) => (
                    <>
                      <line
                        x1={`${line.x}mm`}
                        y1={`${line.yStart}mm`}
                        x2={`${line.x}mm`}
                        y2={`${page.frameBounds.minY}mm`}
                        stroke="#888"
                        stroke-width="0.1"
                      />
                      <line
                        x1={`${line.x}mm`}
                        y1={`${page.frameBounds.maxY}mm`}
                        x2={`${line.x}mm`}
                        y2={`${line.yEnd}mm`}
                        stroke="#888"
                        stroke-width="0.1"
                      />
                    </>
                  )}
                </For>

                <For each={page.cards}>
                  {(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 store={store} cardData={card.data}
                            />
                          </div>
                        </div>
                      </foreignObject>
                    </g>
                  )}
                </For>
              </svg>
            )}
          </For>
        </div>
      </div>
    </div>
  );
}