refactor: svg page

src/components/md-deck/CardPreview.tsx

@@ -36,11 +36,11 @@ export function CardPreview(props: CardPreviewProps) {
   let cardRef: HTMLDivElement | undefined;
 
   return (
-    <div class="flex justify-center overflow-hidden">
+    <div class="flex justify-center">
       <Show when={store.state.activeTab < store.state.cards.length}>
         <div
           ref={cardRef}
-          class="relative bg-white border border-gray-300 shadow-lg"
+          class="relative bg-white border border-gray-300 shadow-lg overflow-hidden"
           style={{
             width: `${store.state.dimensions?.cardWidth}mm`,
             height: `${store.state.dimensions?.cardHeight}mm`

src/components/md-deck/PrintPreview.tsx

@@ -24,22 +24,38 @@ export function PrintPreview(props: PrintPreviewProps) {
   const { store } = props;
 
   // A4 纸张尺寸（mm）：210 x 297
-  const A4_WIDTH = 210;
+  const A4_WIDTH_PORTRAIT = 210;
-  const A4_HEIGHT = 297;
+  const A4_HEIGHT_PORTRAIT = 297;
+  const A4_WIDTH_LANDSCAPE = 297;
+  const A4_HEIGHT_LANDSCAPE = 210;
   const PRINT_MARGIN = 5; // 打印边距
 
+  // 获取打印设置
+  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 = A4_WIDTH - PRINT_MARGIN * 2;
+    const usableWidth = a4Width - PRINT_MARGIN * 2;
     const cardsPerRow = Math.floor(usableWidth / cardWidth);
 
     // 每页可容纳的行数
-    const usableHeight = A4_HEIGHT - PRINT_MARGIN * 2;
+    const usableHeight = a4Height - PRINT_MARGIN * 2;
     const rowsPerPage = Math.floor(usableHeight / cardHeight);
 
     // 每页的卡牌数量
@@ -50,8 +66,8 @@ export function PrintPreview(props: PrintPreviewProps) {
     const maxGridHeight = rowsPerPage * cardHeight;
 
     // 居中偏移量（使卡牌区域在 A4 纸上居中）
-    const offsetX = (A4_WIDTH - maxGridWidth) / 2;
+    const baseOffsetX = (a4Width - maxGridWidth) / 2;
-    const offsetY = (A4_HEIGHT - maxGridHeight) / 2;
+    const baseOffsetY = (a4Height - maxGridHeight) / 2;
 
     // 分页
     const result: {
@@ -72,9 +88,14 @@ export function PrintPreview(props: PrintPreviewProps) {
         currentPage = { pageIndex, cards: [], bounds: { minX: Infinity, minY: Infinity, maxX: -Infinity, maxY: -Infinity } };
       }
 
-      // 使用居中偏移量计算卡牌位置
+      // 奇数页应用偏移（pageIndex 从 0 开始，所以偶数索引是奇数页）
-      const cardX = offsetX + col * cardWidth;
+      const isOddPage = pageIndex % 2 === 0;
-      const cardY = offsetY + row * cardHeight;
+      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],
@@ -97,10 +118,10 @@ export function PrintPreview(props: PrintPreviewProps) {
     return result.map(page => ({
       ...page,
       frameBounds: {
-        minX: offsetX,
+        minX: baseOffsetX + (page.pageIndex % 2 === 0 ? oddPageOffsetX() : 0),
-        minY: offsetY,
+        minY: baseOffsetY + (page.pageIndex % 2 === 0 ? oddPageOffsetY() : 0),
-        maxX: offsetX + maxGridWidth,
+        maxX: baseOffsetX + maxGridWidth + (page.pageIndex % 2 === 0 ? oddPageOffsetX() : 0),
-        maxY: offsetY + maxGridHeight
+        maxY: baseOffsetY + maxGridHeight + (page.pageIndex % 2 === 0 ? oddPageOffsetY() : 0)
       }
     }));
   });
@@ -158,15 +179,128 @@ export function PrintPreview(props: PrintPreviewProps) {
 
   const visibleLayers = createMemo(() => store.state.layerConfigs.filter((l) => l.visible));
 
+  // 渲染单个卡片的 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>
+    );
+  };
+
   return (
     <div class="fixed inset-0 bg-black/50 z-50 overflow-auto print:overflow-visible print:absolute">
+      {/* 打印样式：根据方向设置 @page 规则 */}
+      <style>{`
+        @media print {
+          @page {
+            size: A4 ${orientation() === 'landscape' ? 'landscape' : 'portrait'};
+            margin: 0;
+          }
+        }
+      `}</style>
       <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="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={props.onPrint}
@@ -184,22 +318,20 @@ export function PrintPreview(props: PrintPreviewProps) {
           </div>
         </div>
 
-        {/* A4 纸张预览 */}
+        {/* A4 纸张预览：每页都是一个完整的 SVG */}
         <div class="flex flex-col items-center gap-8 print-root">
           <For each={pages()}>
             {(page) => (
-              <div
+              <svg
-                class="bg-white shadow-xl print:shadow-none print:w-full"
+                class="bg-white shadow-xl print:shadow-none"
+                viewBox={`0 0 ${getA4Size().width}mm ${getA4Size().height}mm`}
                 style={{
-                  width: `${A4_WIDTH}mm`,
+                  width: `${getA4Size().width}mm`,
-                  height: `${A4_HEIGHT}mm`
+                  height: `${getA4Size().height}mm`
                 }}
                 data-page={page.pageIndex + 1}
+                xmlns="http://www.w3.org/2000/svg"
               >
-                {/* 渲染该页的所有卡牌 */}
-                <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`}
@@ -261,48 +393,12 @@ export function PrintPreview(props: PrintPreviewProps) {
                     </>
                   )}
                 </For>
-                  </svg>
 
+                {/* 渲染该页的所有卡牌 */}
                 <For each={page.cards}>
-                    {(card) => (
+                  {(card) => renderCardInSvg(card, page.pageIndex)}
-                      <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>
+              </svg>
-                      </div>
-                    )}
-                  </For>
-                </div>
-              </div>
             )}
           </For>
         </div>

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

@@ -56,6 +56,11 @@ export interface DeckState {
 
   // 打印状态
   isPrinting: boolean;
+
+  // 打印设置
+  printOrientation: 'portrait' | 'landscape';
+  printOddPageOffsetX: number;
+  printOddPageOffsetY: number;
 }
 
 export interface DeckActions {
@@ -101,6 +106,11 @@ export interface DeckActions {
   // 打印操作
   setPrinting: (printing: boolean) => void;
   printDeck: () => void;
+
+  // 打印设置
+  setPrintOrientation: (orientation: 'portrait' | 'landscape') => void;
+  setPrintOddPageOffsetX: (offset: number) => void;
+  setPrintOddPageOffsetY: (offset: number) => void;
 }
 
 export interface DeckStore {
@@ -136,7 +146,10 @@ export function createDeckStore(
     selectEnd: null,
     isLoading: false,
     error: null,
-    isPrinting: false
+    isPrinting: false,
+    printOrientation: 'portrait',
+    printOddPageOffsetX: 0,
+    printOddPageOffsetY: 0
   });
 
   // 更新尺寸并重新计算 dimensions
@@ -279,6 +292,18 @@ export function createDeckStore(
     setState({ isPrinting: true });
   };
 
+  const setPrintOrientation = (orientation: 'portrait' | 'landscape') => {
+    setState({ printOrientation: orientation });
+  };
+
+  const setPrintOddPageOffsetX = (offset: number) => {
+    setState({ printOddPageOffsetX: offset });
+  };
+
+  const setPrintOddPageOffsetY = (offset: number) => {
+    setState({ printOddPageOffsetY: offset });
+  };
+
   const actions: DeckActions = {
     setSizeW,
     setSizeH,
@@ -306,7 +331,10 @@ export function createDeckStore(
     generateCode,
     copyCode,
     setPrinting,
-    printDeck
+    printDeck,
+    setPrintOrientation,
+    setPrintOddPageOffsetX,
+    setPrintOddPageOffsetY
   };
 
   return { state, actions };

src/markdown/index.ts

@@ -1,8 +1,29 @@
 import { Marked } from 'marked';
-import { createDirectives } from 'marked-directive';
+import {createDirectives, presetDirectiveConfigs} from 'marked-directive';
 
 // 使用 marked-directive 来支持指令语法
-const marked = new Marked().use(createDirectives());
+const marked = new Marked().use(createDirectives([
+    ...presetDirectiveConfigs,
+    {
+        marker: '::::',
+        level: 'container'
+    },
+    {
+        marker: ':::::',
+        level: 'container'
+    },
+    {
+        level: 'inline',
+        marker: ':',
+        // :[blah] becomes <i class="icon icon-blah"></i>
+        renderer(token) {
+            if (!token.meta.name) {
+                return `<icon class="icon-${token.text}"></icon>`;
+            }
+            return false;
+        }
+    },
+]));
 
 export function parseMarkdown(content: string): string {
   return marked.parse(content.trimStart()) as string;

src/styles.css

@@ -18,9 +18,4 @@
     width: 100vw;
     gap: 0;
   }
-  
-  @page {
-    size: A4;
-    margin: 0;
-  }
 }