feat: {{prop}} in cards

src/components/md-deck/CardPreview.tsx

@@ -4,18 +4,28 @@ 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';
+import type { CardData } from './types';
 
 export interface CardPreviewProps {
   store: DeckStore;
 }
 
 /**
- * 渲染 layer 内容（提取为纯工具函数）
+ * 处理 body 内容中的 {{prop}} 语法并解析 markdown
+ */
+function processBody(body: string, currentRow: CardData): string {
+  // 替换 {{prop}} 为对应列的内容
+  const processedBody = body.replace(/\{\{(\w+)\}\}/g, (_, key) => currentRow[key] || '');
+  // 使用 marked 解析 markdown
+  return marked.parse(processedBody) as string;
+}
+
+/**
+ * 渲染 layer 内容
  */
 function renderLayerContent(layer: { prop: string }, cardData: CardData): string {
   const content = cardData[layer.prop] || '';
-  return marked.parse(content) as string;
+  return processBody(content, cardData);
 }
 
 /**

src/components/md-deck/PrintPreview.tsx

@@ -2,6 +2,7 @@ import { For, createMemo } from 'solid-js';
 import { marked } from '../../markdown';
 import { getLayerStyle } from './hooks/dimensions';
 import type { DeckStore } from './hooks/deckStore';
+import type { CardData } from './types';
 import jsPDF from 'jspdf';
 
 export interface PrintPreviewProps {
@@ -10,12 +11,22 @@ export interface PrintPreviewProps {
   onExport: () => void;
 }
 
+/**
+ * 处理 body 内容中的 {{prop}} 语法并解析 markdown
+ */
+function processBody(body: string, currentRow: CardData): string {
+  // 替换 {{prop}} 为对应列的内容
+  const processedBody = body.replace(/\{\{(\w+)\}\}/g, (_, key) => currentRow[key] || '');
+  // 使用 marked 解析 markdown
+  return marked.parse(processedBody) as string;
+}
+
 /**
  * 渲染 layer 内容
  */
-function renderLayerContent(layer: { prop: string }, cardData: { [key: string]: string }): string {
+function renderLayerContent(layer: { prop: string }, cardData: CardData): string {
   const content = cardData[layer.prop] || '';
-  return marked.parse(content) as string;
+  return processBody(content, cardData);
 }
 
 /**