feat: md-deck print

2026-02-27 16:02:53 +08:00 · 2026-02-27 16:02:53 +08:00 · bab09a2561
parent aa0ba2a551
commit bab09a2561
5 changed files with 219 additions and 2 deletions
--- a/src/components/md-deck/DeckHeader.tsx
+++ b/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}>
--- a/src/components/md-deck/PrintPreview.tsx
+++ b/src/components/md-deck/PrintPreview.tsx
@ -0,0 +1,165 @@
+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>
+  );
+}
--- a/src/components/md-deck/hooks/deckStore.ts
+++ b/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
@ -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 };
--- a/src/components/md-deck/index.tsx
+++ b/src/components/md-deck/index.tsx
@ -4,6 +4,7 @@ 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 {
@ -102,6 +103,15 @@ customElement<DeckProps>('md-deck', {

  return (
    <div class="md-deck mb-4">
+      {/* 打印预览弹窗 */}
+      <Show when={store.state.isPrinting}>
+        <PrintPreview
+          store={store}
+          onClose={() => store.actions.setPrinting(false)}
+          onPrint={() => window.print()}
+        />
+      </Show>
+
      {/* Tab 选择器和编辑按钮 */}
      <Show when={store.state.cards.length > 0 && !store.state.error}>
        <DeckHeader store={store} />
--- a/src/styles.css
+++ b/src/styles.css
@ -1,2 +1,20 @@
@import "tailwindcss";
@plugin "@tailwindcss/typography";
+
+/* 打印样式 */
+@media print {
+  body {
+    visibility: hidden;
+  }
+  
+  body .in-print {
+    visibility: visible;
+    -webkit-print-color-adjust: exact !important;
+    print-color-adjust: exact !important;
+  }
+  
+  @page {
+    size: A4;
+    margin: 0;
+  }
+}