diff --git a/src/components/md-deck/CardPreview.tsx b/src/components/md-deck/CardPreview.tsx index 3480083..1cfca1e 100644 --- a/src/components/md-deck/CardPreview.tsx +++ b/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); } /** diff --git a/src/components/md-deck/PrintPreview.tsx b/src/components/md-deck/PrintPreview.tsx index 8990411..8292c99 100644 --- a/src/components/md-deck/PrintPreview.tsx +++ b/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); } /**