feat: card back support?

src/components/md-deck/CardLayer.tsx

@@ -1,7 +1,7 @@
 import {createMemo, For} from 'solid-js';
 import {parseMarkdown} from '../../markdown';
 import { getLayerStyle } from './hooks/dimensions';
-import type { CardData } from './types';
+import type { CardData, CardSide } from './types';
 import {DeckStore} from "./hooks/deckStore";
 import {processVariables} from "../utils/csv-loader";
 import {resolvePath} from "../utils/path";
@@ -9,10 +9,16 @@ import {resolvePath} from "../utils/path";
 export interface CardLayerProps {
   cardData: CardData;
   store: DeckStore;
+  side?: CardSide;
 }
 
 export function CardLayer(props: CardLayerProps) {
-  const layers = createMemo(() => props.store.state.layerConfigs.filter((l) => l.visible));
+  const side = () => props.side || 'front';
+  const layers = createMemo(() => 
+    side() === 'front' 
+      ? props.store.state.frontLayerConfigs.filter((l) => l.visible)
+      : props.store.state.backLayerConfigs.filter((l) => l.visible)
+  );
   const dimensions = () => props.store.state.dimensions!;
   const showBounds = () => props.store.state.isEditing;
 

src/components/md-deck/CardPreview.tsx

@@ -79,6 +79,7 @@ export function CardPreview(props: CardPreviewProps) {
             <CardLayer
               cardData={currentCard()}
               store={store}
+              side={store.state.activeSide}
             />
           </div>
         </div>

src/components/md-deck/PrintPreview.tsx

@@ -20,7 +20,8 @@ export function PrintPreview(props: PrintPreviewProps) {
   const { getA4Size, pages, cropMarks } = usePageLayout(store);
   const { exportToPDF } = usePDFExport(store, props.onClose);
 
-  const visibleLayers = () => store.state.layerConfigs.filter((l) => l.visible);
+  const frontVisibleLayers = () => store.state.frontLayerConfigs.filter((l) => l.visible);
+  const backVisibleLayers = () => store.state.backLayerConfigs.filter((l) => l.visible);
 
   const handleExport = async () => {
     const options: ExportOptions = {
@@ -31,7 +32,7 @@ export function PrintPreview(props: PrintPreviewProps) {
       gridOriginY: store.state.dimensions?.gridOriginY || 0,
       gridAreaWidth: store.state.dimensions?.gridAreaWidth || 56,
       gridAreaHeight: store.state.dimensions?.gridAreaHeight || 88,
-      visibleLayers: visibleLayers(),
+      visibleLayers: frontVisibleLayers(),
       dimensions: store.state.dimensions!
     };
     await exportToPDF(pages(), cropMarks(), options);
@@ -51,103 +52,112 @@ export function PrintPreview(props: PrintPreviewProps) {
 
         <div class="flex flex-col items-center gap-8">
           <For each={pages()}>
-            {(page) => (
+            {(page) => {
-              <svg
+              // 根据页面类型（正面/背面）决定使用哪个图层配置
-                class="bg-white shadow-xl"
+              const isFrontPage = page.cards[0]?.side !== 'back';
-                viewBox={`0 0 ${getA4Size().width}mm ${getA4Size().height}mm`}
+              const visibleLayersForPage = isFrontPage ? frontVisibleLayers() : backVisibleLayers();
-                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}>
+              return (
-                  {(line) => (
+                <svg
-                    <>
+                  class="bg-white shadow-xl"
-                      <line
+                  viewBox={`0 0 ${getA4Size().width}mm ${getA4Size().height}mm`}
-                        x1={`${line.xStart}mm`}
+                  style={{
-                        y1={`${line.y}mm`}
+                    width: `${getA4Size().width}mm`,
-                        x2={`${page.frameBounds.minX}mm`}
+                    height: `${getA4Size().height}mm`
-                        y2={`${line.y}mm`}
+                  }}
-                        stroke="#888"
+                  data-page={page.pageIndex + 1}
-                        stroke-width="0.1"
+                  xmlns="http://www.w3.org/2000/svg"
-                      />
+                >
-                      <line
+                  <rect
-                        x1={`${page.frameBounds.maxX}mm`}
+                    x={`${cropMarks()[page.pageIndex]?.frameBoundsWithMargin.x}mm`}
-                        y1={`${line.y}mm`}
+                    y={`${cropMarks()[page.pageIndex]?.frameBoundsWithMargin.y}mm`}
-                        x2={`${line.xEnd}mm`}
+                    width={`${cropMarks()[page.pageIndex]?.frameBoundsWithMargin.width}mm`}
-                        y2={`${line.y}mm`}
+                    height={`${cropMarks()[page.pageIndex]?.frameBoundsWithMargin.height}mm`}
-                        stroke="#888"
+                    fill="none"
-                        stroke-width="0.1"
+                    stroke="black"
-                      />
+                    stroke-width="0.2"
-                    </>
+                  />
-                  )}
-                </For>
 
-                <For each={cropMarks()[page.pageIndex]?.verticalLines}>
+                  <For each={cropMarks()[page.pageIndex]?.horizontalLines}>
-                  {(line) => (
+                    {(line) => (
-                    <>
+                      <>
-                      <line
+                        <line
-                        x1={`${line.x}mm`}
+                          x1={`${line.xStart}mm`}
-                        y1={`${line.yStart}mm`}
+                          y1={`${line.y}mm`}
-                        x2={`${line.x}mm`}
+                          x2={`${page.frameBounds.minX}mm`}
-                        y2={`${page.frameBounds.minY}mm`}
+                          y2={`${line.y}mm`}
-                        stroke="#888"
+                          stroke="#888"
-                        stroke-width="0.1"
+                          stroke-width="0.1"
-                      />
+                        />
-                      <line
+                        <line
-                        x1={`${line.x}mm`}
+                          x1={`${page.frameBounds.maxX}mm`}
-                        y1={`${page.frameBounds.maxY}mm`}
+                          y1={`${line.y}mm`}
-                        x2={`${line.x}mm`}
+                          x2={`${line.xEnd}mm`}
-                        y2={`${line.yEnd}mm`}
+                          y2={`${line.y}mm`}
-                        stroke="#888"
+                          stroke="#888"
-                        stroke-width="0.1"
+                          stroke-width="0.1"
-                      />
+                        />
-                    </>
+                      </>
-                  )}
+                    )}
-                </For>
+                  </For>
 
-                <For each={page.cards}>
+                  <For each={cropMarks()[page.pageIndex]?.verticalLines}>
-                  {(card) => (
+                    {(line) => (
-                    <g class="card-group">
+                      <>
-                      <foreignObject
+                        <line
-                        x={`${card.x}mm`}
+                          x1={`${line.x}mm`}
-                        y={`${card.y}mm`}
+                          y1={`${line.yStart}mm`}
-                        width={`${store.state.dimensions?.cardWidth || 56}mm`}
+                          x2={`${line.x}mm`}
-                        height={`${store.state.dimensions?.cardHeight || 88}mm`}
+                          y2={`${page.frameBounds.minY}mm`}
-                      >
+                          stroke="#888"
-                        <div class="w-full h-full bg-white" {...({ xmlns: 'http://www.w3.org/1999/xhtml' } as any)}>
+                          stroke-width="0.1"
-                          <div
+                        />
-                            class="absolute"
+                        <line
-                            style={{
+                          x1={`${line.x}mm`}
-                              position: 'absolute',
+                          y1={`${page.frameBounds.maxY}mm`}
-                              left: `${store.state.dimensions?.gridOriginX}mm`,
+                          x2={`${line.x}mm`}
-                              top: `${store.state.dimensions?.gridOriginY}mm`,
+                          y2={`${line.yEnd}mm`}
-                              width: `${store.state.dimensions?.gridAreaWidth}mm`,
+                          stroke="#888"
-                              height: `${store.state.dimensions?.gridAreaHeight}mm`
+                          stroke-width="0.1"
-                            }}
+                        />
-                          >
+                      </>
-                            <CardLayer store={store} cardData={card.data}
+                    )}
-                            />
+                  </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 class="w-full h-full bg-white" {...({ xmlns: 'http://www.w3.org/1999/xhtml' } as any)}>
+                            <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}
+                                side={card.side || 'front'}
+                              />
+                            </div>
                           </div>
-                        </div>
+                        </foreignObject>
-                      </foreignObject>
+                      </g>
-                    </g>
+                    )}
-                  )}
+                  </For>
-                </For>
+                </svg>
-              </svg>
+              );
-            )}
+            }}
           </For>
         </div>
       </div>

src/components/md-deck/PrintPreviewHeader.tsx

@@ -10,8 +10,9 @@ export interface PrintPreviewHeaderProps {
 export function PrintPreviewHeader(props: PrintPreviewHeaderProps) {
   const { store } = props;
   const orientation = () => store.state.printOrientation;
-  const oddPageOffsetX = () => store.state.printOddPageOffsetX;
+  const frontOddPageOffsetX = () => store.state.printFrontOddPageOffsetX;
-  const oddPageOffsetY = () => store.state.printOddPageOffsetY;
+  const frontOddPageOffsetY = () => store.state.printFrontOddPageOffsetY;
+  const doubleSided = () => store.state.printDoubleSided;
 
   return (
     <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">
@@ -45,14 +46,27 @@ export function PrintPreviewHeader(props: PrintPreviewHeaderProps) {
             </button>
           </div>
         </div>
+        
         <div class="flex items-center gap-2">
-          <label class="text-sm text-gray-600">奇数页偏移:</label>
+          <label class="flex items-center gap-1 cursor-pointer">
+            <input
+              type="checkbox"
+              checked={doubleSided()}
+              onChange={(e) => store.actions.setPrintDoubleSided(e.target.checked)}
+              class="cursor-pointer"
+            />
+            <span class="text-sm text-gray-600">双面打印</span>
+          </label>
+        </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()}
+              value={frontOddPageOffsetX()}
-              onChange={(e) => store.actions.setPrintOddPageOffsetX(Number(e.target.value))}
+              onChange={(e) => store.actions.setPrintFrontOddPageOffsetX(Number(e.target.value))}
               class="w-16 px-2 py-1 border border-gray-300 rounded text-sm"
               step="0.1"
             />
@@ -62,8 +76,8 @@ export function PrintPreviewHeader(props: PrintPreviewHeaderProps) {
             <span class="text-xs text-gray-500">Y:</span>
             <input
               type="number"
-              value={oddPageOffsetY()}
+              value={frontOddPageOffsetY()}
-              onChange={(e) => store.actions.setPrintOddPageOffsetY(Number(e.target.value))}
+              onChange={(e) => store.actions.setPrintFrontOddPageOffsetY(Number(e.target.value))}
               class="w-16 px-2 py-1 border border-gray-300 rounded text-sm"
               step="0.1"
             />

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

@@ -18,33 +18,54 @@ const ORIENTATION_OPTIONS = [
 export function LayerEditorPanel(props: LayerEditorPanelProps) {
   const { store } = props;
 
+  // 根据当前激活的面获取图层配置
+  const currentLayerConfigs = () => 
+    store.state.activeSide === 'front' 
+      ? store.state.frontLayerConfigs 
+      : store.state.backLayerConfigs;
+
   const updateLayerOrientation = (layerProp: string, orientation: 'n' | 's' | 'e' | 'w') => {
-    const layer = store.state.layerConfigs.find(l => l.prop === layerProp);
+    const updateFn = store.state.activeSide === 'front' 
-    if (layer) {
+      ? store.actions.updateFrontLayerConfig 
-      store.actions.updateLayerConfig(layerProp, { ...layer, orientation });
+      : store.actions.updateBackLayerConfig;
-    }
+    updateFn(layerProp, { orientation });
   };
 
   const updateLayerFontSize = (layerProp: string, fontSize?: number) => {
-    const layer = store.state.layerConfigs.find(l => l.prop === layerProp);
+    const updateFn = store.state.activeSide === 'front' 
-    if (layer) {
+      ? store.actions.updateFrontLayerConfig 
-      store.actions.updateLayerConfig(layerProp, { ...layer, fontSize });
+      : store.actions.updateBackLayerConfig;
-    }
+    updateFn(layerProp, { fontSize });
+  };
+
+  const toggleLayerVisible = (layerProp: string) => {
+    const toggleFn = store.state.activeSide === 'front' 
+      ? store.actions.toggleFrontLayerVisible 
+      : store.actions.toggleBackLayerVisible;
+    toggleFn(layerProp);
+  };
+
+  const setEditingLayer = (layerProp: string) => {
+    store.actions.setEditingLayer(
+      store.state.editingLayer === layerProp ? null : layerProp
+    );
   };
 
   return (
     <div class="w-64 flex-shrink-0">
-      <h3 class="font-bold mb-2 mt-0">图层</h3>
+      <h3 class="font-bold mb-2 mt-0">
+        图层 ({store.state.activeSide === 'front' ? '正面' : '背面'})
+      </h3>
 
       <div class="space-y-2">
-        <For each={store.state.layerConfigs}>
+        <For each={currentLayerConfigs()}>
           {(layer) => (
             <div class="flex flex-row flex-wrap gap-1 p-2 bg-gray-50 rounded">
               <div class="flex items-center gap-2">
                 <input
                   type="checkbox"
                   checked={layer.visible}
-                  onChange={() => store.actions.toggleLayerVisible(layer.prop)}
+                  onChange={() => toggleLayerVisible(layer.prop)}
                   class="cursor-pointer"
                 />
                 <span class="text-sm flex-1">{layer.prop}</span>
@@ -52,7 +73,7 @@ export function LayerEditorPanel(props: LayerEditorPanelProps) {
               {layer.visible && (
                 <>
                   <button
-                    onClick={() => store.actions.setEditingLayer(store.state.editingLayer === layer.prop ? null : layer.prop)}
+                    onClick={() => setEditingLayer(layer.prop)}
                     class={`text-xs px-2 py-1 rounded cursor-pointer ${
                       store.state.editingLayer === layer.prop
                         ? 'bg-blue-500 text-white'
@@ -99,10 +120,11 @@ export function LayerEditorPanel(props: LayerEditorPanelProps) {
       <hr class="my-4" />
 
       <button
-        onClick={store.actions.copyCode}
+        onClick={() => store.actions.copyCode()}
-        class="w-full bg-blue-600 hover:bg-blue-700 text-white px-3 py-2 rounded text-sm font-medium cursor-pointer"
+        class="w-full bg-blue-600 hover:bg-blue-700 text-white px-3 py-2 rounded text-sm font-medium cursor-pointer flex items-center gap-2 justify-center"
       >
-        📋 复制代码
+        <span>📋</span>
+        <span>复制代码</span>
       </button>
     </div>
   );

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

@@ -5,7 +5,7 @@ export interface PropertiesEditorPanelProps {
 }
 
 /**
- * 卡牌属性编辑面板：尺寸、网格、出血、内边距
+ * 卡牌属性编辑面板：尺寸、网格、出血、内边距、正背面切换
  */
 export function PropertiesEditorPanel(props: PropertiesEditorPanelProps) {
   const { store } = props;
@@ -14,6 +14,32 @@ export function PropertiesEditorPanel(props: PropertiesEditorPanelProps) {
     <div class="w-64 flex-shrink-0">
       <h3 class="font-bold mb-2 mt-0">卡牌属性</h3>
 
+      {/* 正面/背面切换标签页 */}
+      <div class="mb-4">
+        <div class="flex gap-1">
+          <button
+            onClick={() => store.actions.setActiveSide('front')}
+            class={`flex-1 px-3 py-1.5 rounded text-sm font-medium cursor-pointer border ${
+              store.state.activeSide === 'front'
+                ? '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.setActiveSide('back')}
+            class={`flex-1 px-3 py-1.5 rounded text-sm font-medium cursor-pointer border ${
+              store.state.activeSide === 'back'
+                ? '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="space-y-3">
         <div>
           <label class="block text-sm font-medium text-gray-700">尺寸 (mm)</label>

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

@@ -1,8 +1,8 @@
 import { createStore } from 'solid-js/store';
 import { calculateDimensions } from './dimensions';
 import { loadCSV, CSV } from '../../utils/csv-loader';
-import { initLayerConfigs, formatLayers } from './layer-parser';
+import { initLayerConfigs, formatLayers, initLayerConfigsForSide } from './layer-parser';
-import type { CardData, LayerConfig, Dimensions } from '../types';
+import type { CardData, LayerConfig, Dimensions, CardSide } from '../types';
 
 /**
  * 默认配置常量
@@ -36,11 +36,13 @@ export interface DeckState {
   activeTab: number;
 
   // 图层配置
-  layerConfigs: LayerConfig[];
+  frontLayerConfigs: LayerConfig[];
+  backLayerConfigs: LayerConfig[];
 
   // 编辑状态
   isEditing: boolean;
   editingLayer: string | null;
+  activeSide: CardSide;
 
   // 框选状态
   isSelecting: boolean;
@@ -60,8 +62,9 @@ export interface DeckState {
 
   // 打印设置
   printOrientation: 'portrait' | 'landscape';
-  printOddPageOffsetX: number;
+  printFrontOddPageOffsetX: number;
-  printOddPageOffsetY: number;
+  printFrontOddPageOffsetY: number;
+  printDoubleSided: boolean;
 }
 
 export interface DeckActions {
@@ -78,15 +81,21 @@ export interface DeckActions {
   setActiveTab: (index: number) => void;
   updateCardData: (index: number, key: string, value: string) => void;
 
-  // 图层操作
+  // 图层操作 - 正面
-  setLayerConfigs: (configs: LayerConfig[]) => void;
+  setFrontLayerConfigs: (configs: LayerConfig[]) => void;
-  updateLayerConfig: (prop: string, updates: Partial<LayerConfig>) => void;
+  updateFrontLayerConfig: (prop: string, updates: Partial<LayerConfig>) => void;
-  toggleLayerVisible: (prop: string) => void;
+  toggleFrontLayerVisible: (prop: string) => void;
+
+  // 图层操作 - 背面
+  setBackLayerConfigs: (configs: LayerConfig[]) => void;
+  updateBackLayerConfig: (prop: string, updates: Partial<LayerConfig>) => void;
+  toggleBackLayerVisible: (prop: string) => void;
 
   // 编辑状态
   setIsEditing: (editing: boolean) => void;
   setEditingLayer: (layer: string | null) => void;
   updateLayerPosition: (x1: number, y1: number, x2: number, y2: number) => void;
+  setActiveSide: (side: CardSide) => void;
 
   // 框选操作
   setIsSelecting: (selecting: boolean) => void;
@@ -95,13 +104,13 @@ export interface DeckActions {
   cancelSelection: () => void;
 
   // 数据加载
-  loadCardsFromPath: (path: string, rawSrc: string, layersStr?: string) => Promise<void>;
+  loadCardsFromPath: (path: string, rawSrc: string, layersStr?: string, backLayersStr?: string) => Promise<void>;
   setError: (error: string | null) => void;
   clearError: () => void;
 
   // 生成代码
-  generateCode: () => string;
+  generateCode: (backLayersStr?: string) => string;
-  copyCode: () => Promise<void>;
+  copyCode: (backLayersStr?: string) => Promise<void>;
 
   // 导出操作
   setExporting: (exporting: boolean) => void;
@@ -112,8 +121,9 @@ export interface DeckActions {
 
   // 打印设置
   setPrintOrientation: (orientation: 'portrait' | 'landscape') => void;
-  setPrintOddPageOffsetX: (offset: number) => void;
+  setPrintFrontOddPageOffsetX: (offset: number) => void;
-  setPrintOddPageOffsetY: (offset: number) => void;
+  setPrintFrontOddPageOffsetY: (offset: number) => void;
+  setPrintDoubleSided: (doubleSided: boolean) => void;
 }
 
 export interface DeckStore {
@@ -141,9 +151,11 @@ export function createDeckStore(
     dimensions: null,
     cards: [] as any,
     activeTab: 0,
-    layerConfigs: [],
+    frontLayerConfigs: [],
+    backLayerConfigs: [],
     isEditing: false,
     editingLayer: null,
+    activeSide: 'front',
     isSelecting: false,
     selectStart: null,
     selectEnd: null,
@@ -153,8 +165,9 @@ export function createDeckStore(
     exportProgress: 0,
     exportError: null,
     printOrientation: 'portrait',
-    printOddPageOffsetX: 0,
+    printFrontOddPageOffsetX: 0,
-    printOddPageOffsetY: 0
+    printFrontOddPageOffsetY: 0,
+    printDoubleSided: false
   });
 
   // 更新尺寸并重新计算 dimensions
@@ -201,22 +214,39 @@ export function createDeckStore(
     setState('cards', index, key, value);
   };
 
-  const setLayerConfigs = (configs: LayerConfig[]) => setState({ layerConfigs: configs });
+  // 正面图层操作
-  const updateLayerConfig = (prop: string, updates: Partial<LayerConfig>) => {
+  const setFrontLayerConfigs = (configs: LayerConfig[]) => setState({ frontLayerConfigs: configs });
-    setState('layerConfigs', (prev) => prev.map((config) => config.prop === prop ? { ...config, ...updates } : config));
+  const updateFrontLayerConfig = (prop: string, updates: Partial<LayerConfig>) => {
+    setState('frontLayerConfigs', (prev) => prev.map((config) => config.prop === prop ? { ...config, ...updates } : config));
   };
-  const toggleLayerVisible = (prop: string) => {
+  const toggleFrontLayerVisible = (prop: string) => {
-    setState('layerConfigs', (prev) => prev.map((config) =>
+    setState('frontLayerConfigs', (prev) => prev.map((config) =>
+      config.prop === prop ? { ...config, visible: !config.visible } : config
+    ));
+  };
+
+  // 背面图层操作
+  const setBackLayerConfigs = (configs: LayerConfig[]) => setState({ backLayerConfigs: configs });
+  const updateBackLayerConfig = (prop: string, updates: Partial<LayerConfig>) => {
+    setState('backLayerConfigs', (prev) => prev.map((config) => config.prop === prop ? { ...config, ...updates } : config));
+  };
+  const toggleBackLayerVisible = (prop: string) => {
+    setState('backLayerConfigs', (prev) => prev.map((config) =>
       config.prop === prop ? { ...config, visible: !config.visible } : config
     ));
   };
 
   const setIsEditing = (editing: boolean) => setState({ isEditing: editing });
   const setEditingLayer = (layer: string | null) => setState({ editingLayer: layer });
+  const setActiveSide = (side: CardSide) => setState({ activeSide: side });
+  
   const updateLayerPosition = (x1: number, y1: number, x2: number, y2: number) => {
     const layer = state.editingLayer;
     if (!layer) return;
-    setState('layerConfigs', (prev) => prev.map((config) =>
+    const currentSide = state.activeSide;
+    const configs = currentSide === 'front' ? state.frontLayerConfigs : state.backLayerConfigs;
+    const setter = currentSide === 'front' ? setFrontLayerConfigs : setBackLayerConfigs;
+    setter(configs.map((config) =>
       config.prop === layer ? { ...config, x1, y1, x2, y2 } : config
     ));
     setState({ editingLayer: null });
@@ -230,7 +260,7 @@ export function createDeckStore(
   };
 
   // 加载卡牌数据（核心逻辑）
-  const loadCardsFromPath = async (path: string, rawSrc: string, layersStr: string = '') => {
+  const loadCardsFromPath = async (path: string, rawSrc: string, layersStr: string = '', backLayersStr: string = '') => {
     if (!path) {
       setState({ error: '未指定 CSV 文件路径' });
       return;
@@ -252,7 +282,8 @@ export function createDeckStore(
       setState({
         cards: data,
         activeTab: 0,
-        layerConfigs: initLayerConfigs(data, layersStr),
+        frontLayerConfigs: initLayerConfigsForSide(data, layersStr),
+        backLayerConfigs: initLayerConfigsForSide(data, backLayersStr),
         isLoading: false
       });
       updateDimensions();
@@ -267,8 +298,9 @@ export function createDeckStore(
   const setError = (error: string | null) => setState({ error });
   const clearError = () => setState({ error: null });
 
-  const generateCode = () => {
+  const generateCode = (backLayersStr?: string) => {
-    const layersStr = formatLayers(state.layerConfigs);
+    const frontLayersStr = formatLayers(state.frontLayerConfigs);
+    const backLayersString = backLayersStr || formatLayers(state.backLayerConfigs);
     const parts = [
       `:md-deck[${state.rawSrc || state.src}]`,
       `{size="${state.sizeW}x${state.sizeH} "`,
@@ -283,12 +315,16 @@ export function createDeckStore(
       parts.push(`padding="${state.padding} "`);
     }
 
-    parts.push(`layers="${layersStr}"}`);
+    parts.push(`layers="${frontLayersStr}"`);
+    if (backLayersString) {
+      parts.push(` backLayers="${backLayersString}"`);
+    }
+    parts.push('}');
     return parts.join('');
   };
 
-  const copyCode = async () => {
+  const copyCode = async (backLayersStr?: string) => {
-    const code = generateCode();
+    const code = generateCode(backLayersStr);
     try {
       await navigator.clipboard.writeText(code);
       alert('已复制到剪贴板！');
@@ -314,12 +350,16 @@ export function createDeckStore(
     setState({ printOrientation: orientation });
   };
 
-  const setPrintOddPageOffsetX = (offset: number) => {
+  const setPrintFrontOddPageOffsetX = (offset: number) => {
-    setState({ printOddPageOffsetX: offset });
+    setState({ printFrontOddPageOffsetX: offset });
   };
 
-  const setPrintOddPageOffsetY = (offset: number) => {
+  const setPrintFrontOddPageOffsetY = (offset: number) => {
-    setState({ printOddPageOffsetY: offset });
+    setState({ printFrontOddPageOffsetY: offset });
+  };
+
+  const setPrintDoubleSided = (doubleSided: boolean) => {
+    setState({ printDoubleSided: doubleSided });
   };
 
   const actions: DeckActions = {
@@ -332,12 +372,16 @@ export function createDeckStore(
     setCards,
     setActiveTab,
     updateCardData,
-    setLayerConfigs,
+    setFrontLayerConfigs,
-    updateLayerConfig,
+    updateFrontLayerConfig,
-    toggleLayerVisible,
+    toggleFrontLayerVisible,
+    setBackLayerConfigs,
+    updateBackLayerConfig,
+    toggleBackLayerVisible,
     setIsEditing,
     setEditingLayer,
     updateLayerPosition,
+    setActiveSide,
     setIsSelecting,
     setSelectStart,
     setSelectEnd,
@@ -353,8 +397,9 @@ export function createDeckStore(
     setExportError,
     clearExportError,
     setPrintOrientation,
-    setPrintOddPageOffsetX,
+    setPrintFrontOddPageOffsetX,
-    setPrintOddPageOffsetY
+    setPrintFrontOddPageOffsetY,
+    setPrintDoubleSided
   };
 
   return { state, actions };

src/components/md-deck/hooks/layer-parser.ts

@@ -49,13 +49,13 @@ export function formatLayers(layers: LayerConfig[]): string {
 }
 
 /**
- * 初始化图层配置
+ * 初始化图层配置（用于特定面）
  */
-export function initLayerConfigs(
+export function initLayerConfigsForSide(
   data: CSV<any>,
-  existingLayersStr: string
+  layersStr: string
 ): LayerConfig[] {
-  const parsed = parseLayers(existingLayersStr);
+  const parsed = parseLayers(layersStr);
   const allProps = Object.keys(data[0] || {}).filter(k => k !== 'label');
 
   return allProps.map(prop => {
@@ -72,3 +72,13 @@ export function initLayerConfigs(
     };
   });
 }
+
+/**
+ * 初始化图层配置（向后兼容）
+ */
+export function initLayerConfigs(
+  data: CSV<any>,
+  existingLayersStr: string
+): LayerConfig[] {
+  return initLayerConfigsForSide(data, existingLayersStr);
+}

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

@@ -1,10 +1,11 @@
 import type { DeckStore } from './deckStore';
-import type { CardData, LayerConfig, Dimensions } from '../types';
+import type { CardData, LayerConfig, Dimensions, CardSide } from '../types';
 
 export interface PageCard {
   data: CardData;
   x: number;
   y: number;
+  side?: CardSide;
 }
 
 export interface PageData {

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

@@ -24,8 +24,9 @@ const PRINT_MARGIN = 5;
  */
 export function usePageLayout(store: DeckStore): UsePageLayoutReturn {
   const orientation = () => store.state.printOrientation;
-  const oddPageOffsetX = () => store.state.printOddPageOffsetX;
+  const doubleSided = () => store.state.printDoubleSided;
-  const oddPageOffsetY = () => store.state.printOddPageOffsetY;
+  const frontOddPageOffsetX = () => store.state.printFrontOddPageOffsetX;
+  const frontOddPageOffsetY = () => store.state.printFrontOddPageOffsetY;
 
   const getA4Size = () => {
     if (orientation() === 'landscape') {
@@ -52,56 +53,119 @@ export function usePageLayout(store: DeckStore): UsePageLayoutReturn {
     const baseOffsetY = (a4Height - maxGridHeight) / 2;
 
     const result: PageData[] = [];
-    let currentPage: PageData = {
-      pageIndex: 0,
-      cards: [],
-      bounds: { minX: Infinity, minY: Infinity, maxX: -Infinity, maxY: -Infinity },
-      frameBounds: { minX: Infinity, minY: Infinity, maxX: -Infinity, maxY: -Infinity }
-    };
     
-    for (let i = 0; i < cards.length; i++) {
+    if (doubleSided()) {
-      const pageIndex = Math.floor(i / cardsPerPage);
+      // 双面打印模式：每张卡牌需要 2 页（正面 + 背面）
-      const indexInPage = i % cardsPerPage;
+      // 背面卡牌顺序在长边方向上逆转
-      const row = Math.floor(indexInPage / cardsPerRow);
+      const totalCards = cards.length;
-      const col = indexInPage % cardsPerRow;
       
-      if (pageIndex !== currentPage.pageIndex) {
+      for (let i = 0; i < totalCards; i++) {
+        const frontPageIndex = i * 2;
+        const backPageIndex = i * 2 + 1;
+        
+        // 确保页面数组有足够长度
+        while (result.length <= backPageIndex) {
+          result.push({
+            pageIndex: result.length,
+            cards: [],
+            bounds: { minX: Infinity, minY: Infinity, maxX: -Infinity, maxY: -Infinity },
+            frameBounds: { minX: Infinity, minY: Infinity, maxX: -Infinity, maxY: -Infinity }
+          });
+        }
+        
+        const frontPage = result[frontPageIndex];
+        const backPage = result[backPageIndex];
+        
+        // 正面：正常顺序排列
+        const frontRow = Math.floor(i / cardsPerRow);
+        const frontCol = i % cardsPerRow;
+        const frontX = baseOffsetX + frontCol * cardWidth + frontOddPageOffsetX();
+        const frontY = baseOffsetY + frontRow * cardHeight + frontOddPageOffsetY();
+        
+        frontPage.cards.push({ data: cards[i], x: frontX, y: frontY, side: 'front' as const });
+        frontPage.bounds.minX = Math.min(frontPage.bounds.minX, frontX);
+        frontPage.bounds.minY = Math.min(frontPage.bounds.minY, frontY);
+        frontPage.bounds.maxX = Math.max(frontPage.bounds.maxX, frontX + cardWidth);
+        frontPage.bounds.maxY = Math.max(frontPage.bounds.maxY, frontY + cardHeight);
+        
+        // 背面：逆转顺序排列（长边方向）
+        // 对于竖向打印，长边是垂直方向，所以逆转行
+        // 对于横向打印，长边是水平方向，所以逆转列
+        const backIndex = totalCards - 1 - i;
+        const backRow = orientation() === 'portrait' 
+          ? Math.floor(backIndex / cardsPerRow)
+          : Math.floor(i / cardsPerRow);
+        const backCol = orientation() === 'portrait'
+          ? backIndex % cardsPerRow
+          : (cardsPerRow - 1 - (i % cardsPerRow));
+        
+        const backX = baseOffsetX + backCol * cardWidth;
+        const backY = baseOffsetY + backRow * cardHeight;
+        
+        backPage.cards.push({ data: cards[i], x: backX, y: backY, side: 'back' as const });
+        backPage.bounds.minX = Math.min(backPage.bounds.minX, backX);
+        backPage.bounds.minY = Math.min(backPage.bounds.minY, backY);
+        backPage.bounds.maxX = Math.max(backPage.bounds.maxX, backX + cardWidth);
+        backPage.bounds.maxY = Math.max(backPage.bounds.maxY, backY + cardHeight);
+      }
+    } else {
+      // 单面打印模式：原有逻辑
+      let currentPage: PageData = {
+        pageIndex: 0,
+        cards: [],
+        bounds: { minX: Infinity, minY: Infinity, maxX: -Infinity, maxY: -Infinity },
+        frameBounds: { 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 },
+            frameBounds: { minX: Infinity, minY: Infinity, maxX: -Infinity, maxY: -Infinity }
+          };
+        }
+
+        const isOddPage = pageIndex % 2 === 0;
+        const pageOffsetX = isOddPage ? frontOddPageOffsetX() : 0;
+        const pageOffsetY = isOddPage ? frontOddPageOffsetY() : 0;
+
+        const cardX = baseOffsetX + col * cardWidth + pageOffsetX;
+        const cardY = baseOffsetY + row * cardHeight + pageOffsetY;
+
+        currentPage.cards.push({ data: cards[i], x: cardX, y: cardY, side: 'front' as const });
+        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);
-        currentPage = {
-          pageIndex,
-          cards: [],
-          bounds: { minX: Infinity, minY: Infinity, maxX: -Infinity, maxY: -Infinity },
-          frameBounds: { minX: Infinity, minY: Infinity, maxX: -Infinity, maxY: -Infinity }
-        };
       }
-
-      const isOddPage = pageIndex % 2 === 0;
-      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], x: cardX, y: cardY });
-      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) {
+    return result.map(page => {
-      result.push(currentPage);
+      const offsetX = doubleSided() && page.pageIndex % 2 === 0 ? frontOddPageOffsetX() : 0;
-    }
+      const offsetY = doubleSided() && page.pageIndex % 2 === 0 ? frontOddPageOffsetY() : 0;
       
-    return result.map(page => ({
+      return {
-      ...page,
+        ...page,
-      frameBounds: {
+        frameBounds: {
-        minX: baseOffsetX + (page.pageIndex % 2 === 0 ? oddPageOffsetX() : 0),
+          minX: baseOffsetX + offsetX,
-        minY: baseOffsetY + (page.pageIndex % 2 === 0 ? oddPageOffsetY() : 0),
+          minY: baseOffsetY + offsetY,
-        maxX: baseOffsetX + maxGridWidth + (page.pageIndex % 2 === 0 ? oddPageOffsetX() : 0),
+          maxX: baseOffsetX + maxGridWidth + offsetX,
-        maxY: baseOffsetY + maxGridHeight + (page.pageIndex % 2 === 0 ? oddPageOffsetY() : 0)
+          maxY: baseOffsetY + maxGridHeight + offsetY
-      }
+        }
-    }));
+      };
+    });
   });
 
   const cropMarks = createMemo<CropMarkData[]>(() => {

src/components/md-deck/index.tsx

@@ -17,6 +17,7 @@ interface DeckProps {
   bleed?: number | string;
   padding?: number | string;
   layers?: string;
+  backLayers?: string;
   fixed?: boolean | string;
 }
 
@@ -30,6 +31,7 @@ customElement<DeckProps>('md-deck', {
   bleed: 1,
   padding: 2,
   layers: '',
+  backLayers: '',
   fixed: false
 }, (props, { element }) => {
   noShadowDOM();
@@ -86,7 +88,12 @@ customElement<DeckProps>('md-deck', {
   }
 
   // 加载 CSV 数据
-  store.actions.loadCardsFromPath(resolvedSrc, csvPath, (props.layers as string) || '');
+  store.actions.loadCardsFromPath(
+    resolvedSrc, 
+    csvPath, 
+    (props.layers as string) || '',
+    (props.backLayers as string) || ''
+  );
 
   // 清理函数
   onCleanup(() => {

src/components/md-deck/types.ts

@@ -2,6 +2,8 @@ export interface CardData {
   [key: string]: string;
 }
 
+export type CardSide = 'front' | 'back';
+
 export interface Layer {
   prop: string;
   x1: number;