fix: print paging

src/App.tsx

@@ -42,7 +42,7 @@ const App: Component = () => {
           <h1 class="text-2xl font-bold text-gray-900">TTRPG Tools</h1>
         </div>
       </header>
-      <main class="max-w-4xl mx-auto px-4 py-8 pt-20 md:ml-64">
+      <main class="max-w-4xl mx-auto px-4 py-8 pt-20 md:ml-64 print:p-0">
         <Article src={currentPath()} />
       </main>
     </div>

src/components/md-deck/CardPreview.tsx

@@ -4,6 +4,7 @@ import { getLayerStyle } from './hooks/dimensions';
 import { useCardSelection } from './hooks/useCardSelection';
 import { getSelectionBoxStyle } from './hooks/useCardSelection';
 import type { DeckStore } from './hooks/deckStore';
+import type { CardData } from '../types';
 
 export interface CardPreviewProps {
   store: DeckStore;
@@ -12,7 +13,7 @@ export interface CardPreviewProps {
 /**
  * 渲染 layer 内容（提取为纯工具函数）
  */
-function renderLayerContent(layer: { prop: string }, cardData: DeckStore['state']['cards'][number]): string {
+function renderLayerContent(layer: { prop: string }, cardData: CardData): string {
   const content = cardData[layer.prop] || '';
   return marked.parse(content) as string;
 }
@@ -35,7 +36,7 @@ export function CardPreview(props: CardPreviewProps) {
   let cardRef: HTMLDivElement | undefined;
 
   return (
-    <div class="flex justify-center">
+    <div class="flex justify-center overflow-hidden">
       <Show when={store.state.activeTab < store.state.cards.length}>
         <div
           ref={cardRef}

src/components/md-deck/DeckHeader.tsx

@@ -25,6 +25,14 @@ export function DeckHeader(props: DeckHeaderProps) {
         {store.state.isEditing ? '✓ 编辑中' : '✏️ 编辑'}
       </button>
 
+        {/* 打印按钮 */}
+        <button
+            onClick={() => store.actions.printDeck()}
+            class="px-2 py-1 rounded text-xs font-medium transition-colors cursor-pointer bg-green-100 text-green-600 hover:bg-green-200"
+        >
+            🖨️ 打印
+        </button>
+
       {/* Tab 选择器 */}
       <div class="flex gap-1 overflow-x-auto flex-1 min-w-0 flex-wrap">
         <For each={store.state.cards}>

src/components/md-deck/PrintPreview.tsx

@@ -0,0 +1,312 @@
+import { 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 maxGridWidth = cardsPerRow * cardWidth;
+    const maxGridHeight = rowsPerPage * cardHeight;
+
+    // 居中偏移量（使卡牌区域在 A4 纸上居中）
+    const offsetX = (A4_WIDTH - maxGridWidth) / 2;
+    const offsetY = (A4_HEIGHT - 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 } };
+      }
+
+      // 使用居中偏移量计算卡牌位置
+      const cardX = offsetX + col * cardWidth;
+      const cardY = offsetY + row * cardHeight;
+
+      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: offsetX,
+        minY: offsetY,
+        maxX: offsetX + maxGridWidth,
+        maxY: offsetY + maxGridHeight
+      }
+    }));
+  });
+
+  // 计算裁切线和外围框位置
+  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));
+
+  return (
+    <div class="fixed inset-0 bg-black/50 z-50 overflow-auto print:overflow-visible print:absolute">
+      <div class="min-h-screen py-20 px-4 print:p-0">
+        {/* 打印预览控制栏 */}
+        <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 print-root">
+          <For each={pages()}>
+            {(page) => (
+              <div
+                class="bg-white shadow-xl print:shadow-none print:w-full"
+                style={{
+                  width: `${A4_WIDTH}mm`,
+                  height: `${A4_HEIGHT}mm`
+                }}
+                data-page={page.pageIndex + 1}
+              >
+                {/* 渲染该页的所有卡牌 */}
+                <div class="relative w-full h-full">
+                  {/* 裁切线和外围框层 */}
+                  <svg class="absolute inset-0 w-full h-full pointer-events-none" style={{ overflow: 'visible' }}>
+                    {/* 外围边框：黑色 0.2mm */}
+                    <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>
+                  </svg>
+
+                  <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>
+  );
+}

src/components/md-deck/editor-panel/LayerEditorPanel.tsx

@@ -13,7 +13,7 @@ export function LayerEditorPanel(props: LayerEditorPanelProps) {
 
   return (
     <div class="w-64 flex-shrink-0">
-      <h3 class="font-bold mb-2">图层</h3>
+      <h3 class="font-bold mb-2 mt-0">图层</h3>
 
       <div class="space-y-2">
         <For each={store.state.layerConfigs}>

src/components/md-deck/editor-panel/PropertiesEditorPanel.tsx

@@ -12,7 +12,7 @@ export function PropertiesEditorPanel(props: PropertiesEditorPanelProps) {
 
   return (
     <div class="w-64 flex-shrink-0">
-      <h3 class="font-bold mb-2">卡牌属性</h3>
+      <h3 class="font-bold mb-2 mt-0">卡牌属性</h3>
 
       <div class="space-y-3">
         <div>

src/components/md-deck/hooks/deckStore.ts

@@ -53,6 +53,9 @@ export interface DeckState {
 
   // 错误状态
   error: string | null;
+
+  // 打印状态
+  isPrinting: boolean;
 }
 
 export interface DeckActions {
@@ -94,6 +97,10 @@ export interface DeckActions {
   // 生成代码
   generateCode: () => string;
   copyCode: () => Promise<void>;
+
+  // 打印操作
+  setPrinting: (printing: boolean) => void;
+  printDeck: () => void;
 }
 
 export interface DeckStore {
@@ -128,7 +135,8 @@ export function createDeckStore(
     selectStart: null,
     selectEnd: null,
     isLoading: false,
-    error: null
+    error: null,
+    isPrinting: false
   });
 
   // 更新尺寸并重新计算 dimensions
@@ -251,7 +259,7 @@ export function createDeckStore(
       .filter(l => l.visible)
       .map(l => `${l.prop}:${l.x1},${l.y1}-${l.x2},${l.y2}`)
       .join(' ');
-    return `:md-deck[${state.src}]{size="${state.sizeW}x${state.sizeH}" grid="${state.gridW}x${state.gridH}" bleed="${state.bleed}" padding="${state.padding}" fontSize="${state.fontSize}" layers="${layersStr}"}`;
+    return `:md-deck[${state.src}]{size="${state.sizeW}x${state.sizeH}" grid="${state.gridW}x${state.gridH}" bleed="${state.bleed}" padding="${state.padding}" font-size="${state.fontSize}" layers="${layersStr}"}`;
   };
 
   const copyCode = async () => {
@@ -265,6 +273,12 @@ export function createDeckStore(
     }
   };
 
+  const setPrinting = (printing: boolean) => setState({ isPrinting: printing });
+
+  const printDeck = () => {
+    setState({ isPrinting: true });
+  };
+
   const actions: DeckActions = {
     setSizeW,
     setSizeH,
@@ -290,7 +304,9 @@ export function createDeckStore(
     setError,
     clearError,
     generateCode,
-    copyCode
+    copyCode,
+    setPrinting,
+    printDeck
   };
 
   return { state, actions };

src/components/md-deck/index.tsx

@@ -1,9 +1,10 @@
 import { customElement, noShadowDOM } from 'solid-element';
-import { Show, createEffect, onCleanup } from 'solid-js';
+import { Show, onCleanup } from 'solid-js';
 import { resolvePath } from '../utils/path';
 import { createDeckStore } from './hooks/deckStore';
 import { DeckHeader } from './DeckHeader';
 import { DeckContent } from './DeckContent';
+import { PrintPreview } from './PrintPreview';
 import {DataEditorPanel, LayerEditorPanel, PropertiesEditorPanel} from './editor-panel';
 
 interface DeckProps {
@@ -85,8 +86,12 @@ customElement<DeckProps>('md-deck', {
   } else {
     store.actions.setPadding(props.padding ?? 2);
   }
-  
+
-  store.actions.setFontSize(props.fontSize ?? 3);
+  if (typeof props.fontSize === 'string') {
+    store.actions.setFontSize(Number(props.fontSize));
+  } else {
+    store.actions.setFontSize(props.fontSize ?? 3);
+  }
 
   // 加载 CSV 数据
   store.actions.loadCardsFromPath(resolvedSrc, (props.layers as string) || '');
@@ -97,39 +102,48 @@ customElement<DeckProps>('md-deck', {
   });
 
   return (
-    <div class="md-deck flex gap-4">
+    <div class="md-deck mb-4">
-      {/* 左侧：CSV 数据编辑 */}
+      {/* 打印预览弹窗 */}
-      {/*<Show when={store.state.isEditing && !store.state.fixed}>*/}
+      <Show when={store.state.isPrinting}>
-      {/*  <DataEditorPanel*/}
+        <PrintPreview
-      {/*    activeTab={store.state.activeTab}*/}
+          store={store}
-      {/*    cards={store.state.cards}*/}
+          onClose={() => store.actions.setPrinting(false)}
-      {/*    updateCardData={store.actions.updateCardData}*/}
+          onPrint={() => window.print()}
-      {/*  />*/}
+        />
-      {/*</Show>*/}
-
-      <Show when={store.state.isEditing && !store.state.fixed}>
-        <div class="flex-1">
-          <PropertiesEditorPanel store={store} />
-        </div>
       </Show>
 
-      {/* 中间：卡牌预览和控制 */}
+      {/* Tab 选择器和编辑按钮 */}
-      <div class="flex-1">
+      <Show when={store.state.cards.length > 0 && !store.state.error}>
-        {/* Tab 选择器和编辑按钮 */}
+        <DeckHeader store={store} />
-        <Show when={store.state.cards.length > 0 && !store.state.error}>
+      </Show>
-          <DeckHeader store={store} />
+
-        </Show>
+      <div class="flex gap-4">
 
         {/* 内容区域：错误/加载/卡牌预览/空状态 */}
-        <DeckContent store={store} isLoading={store.state.isLoading} />
+        {/* 左侧：CSV 数据编辑 */}
-      </div>
+        {/*<Show when={store.state.isEditing && !store.state.fixed}>*/}
+        {/*  <DataEditorPanel*/}
+        {/*    activeTab={store.state.activeTab}*/}
+        {/*    cards={store.state.cards}*/}
+        {/*    updateCardData={store.actions.updateCardData}*/}
+        {/*  />*/}
+        {/*</Show>*/}
+        
+        <Show when={store.state.isEditing && !store.state.fixed}>
+          <div class="flex-1">
+            <PropertiesEditorPanel store={store} />
+          </div>
+        </Show>
 
-      {/* 右侧：属性/图层编辑面板 */}
+        <DeckContent store={store} isLoading={store.state.isLoading} />
-      <Show when={store.state.isEditing && !store.state.fixed}>
+
-        <div class="flex-1">
+        {/* 右侧：属性/图层编辑面板 */}
-          <LayerEditorPanel store={store} />
+        <Show when={store.state.isEditing && !store.state.fixed}>
-        </div>
+          <div class="flex-1">
-      </Show>
+            <LayerEditorPanel store={store} />
+          </div>
+        </Show>
+      </div>
     </div>
   );
 });

src/styles.css

@@ -1,2 +1,26 @@
 @import "tailwindcss";
 @plugin "@tailwindcss/typography";
+
+/* 打印样式 */
+@media print {
+  body {
+    visibility: hidden;
+  }
+  
+  article > div > *:nth-child(1) {
+    margin-top: 0;
+  }
+  
+  body .print-root {
+    visibility: visible;
+    -webkit-print-color-adjust: exact !important;
+    print-color-adjust: exact !important;
+    width: 100vw;
+    gap: 0;
+  }
+  
+  @page {
+    size: A4;
+    margin: 0;
+  }
+}