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

import { Show, For, createMemo } from 'solid-js';
import { marked } from '../../markdown';
import { getLayerStyle } from './hooks/dimensions';
import type { DeckStore } from './hooks/deckStore';

export interface PrintPreviewProps {
  store: DeckStore;
  onClose: () => void;
  onPrint: () => void;
}

/**
 * 渲染 layer 内容
 */
function renderLayerContent(layer: { prop: string }, cardData: { [key: string]: string }): string {
  const content = cardData[layer.prop] || '';
  return marked.parse(content) as string;
}

/**
 * 打印预览组件：在 A4 纸张上排列所有卡牌
 */
export function PrintPreview(props: PrintPreviewProps) {
  const { store } = props;

  // A4 纸张尺寸（mm）：210 x 297
  const A4_WIDTH = 210;
  const A4_HEIGHT = 297;
  const PRINT_MARGIN = 5; // 打印边距

  // 计算每张卡牌在 A4 纸上的位置
  const pages = createMemo(() => {
    const cards = store.state.cards;
    const cardWidth = store.state.dimensions?.cardWidth || 56;
    const cardHeight = store.state.dimensions?.cardHeight || 88;

    // 每行可容纳的卡牌数量
    const usableWidth = A4_WIDTH - PRINT_MARGIN * 2;
    const cardsPerRow = Math.floor(usableWidth / cardWidth);

    // 每页可容纳的行数
    const usableHeight = A4_HEIGHT - PRINT_MARGIN * 2;
    const rowsPerPage = Math.floor(usableHeight / cardHeight);

    // 每页的卡牌数量
    const cardsPerPage = cardsPerRow * rowsPerPage;

    // 分页
    const result: { pageIndex: number; cards: Array<{ data: typeof cards[0]; x: number; y: number }> }[] = [];
    let currentPage: typeof result[0] = { pageIndex: 0, cards: [] };

    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: [] };
      }

      currentPage.cards.push({
        data: cards[i],
        x: PRINT_MARGIN + col * cardWidth,
        y: PRINT_MARGIN + row * cardHeight
      });
    }

    if (currentPage.cards.length > 0) {
      result.push(currentPage);
    }

    return result;
  });

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

  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-1 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 gap-2">
            <button
              onClick={props.onPrint}
              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>打印</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>

        {/* A4 纸张预览 */}
        <div class="flex flex-col items-center gap-8">
          <For each={pages()}>
            {(page) => (
              <div
                class="bg-white shadow-xl print:shadow-none print:w-full in-print"
                style={{
                  width: `${A4_WIDTH}mm`,
                  height: `${A4_HEIGHT}mm`
                }}
                data-page={page.pageIndex + 1}
              >
                {/* 渲染该页的所有卡牌 */}
                <div class="relative w-full h-full">
                  <For each={page.cards}>
                    {(card) => (
                      <div
                        class="absolute bg-white"
                        style={{
                          left: `${card.x}mm`,
                          top: `${card.y}mm`,
                          width: `${store.state.dimensions?.cardWidth}mm`,
                          height: `${store.state.dimensions?.cardHeight}mm`
                        }}
                      >
                        {/* 网格区域容器 */}
                        <div
                          class="absolute"
                          style={{
                            left: `${store.state.dimensions?.gridOriginX}mm`,
                            top: `${store.state.dimensions?.gridOriginY}mm`,
                            width: `${store.state.dimensions?.gridAreaWidth}mm`,
                            height: `${store.state.dimensions?.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': `${store.state.dimensions?.fontSize}mm`
                                }}
                                innerHTML={renderLayerContent(layer, card.data)}
                              />
                            )}
                          </For>
                        </div>
                      </div>
                    )}
                  </For>
                </div>
              </div>
            )}
          </For>
        </div>
      </div>
    </div>
  );
}