refactor: move cardlayer to just load store

src/components/md-deck/CardLayer.tsx

@@ -1,53 +1,44 @@
-import { For } from 'solid-js';
+import {createMemo, For} from 'solid-js';
 import { marked } from '../../markdown';
 import { getLayerStyle } from './hooks/dimensions';
-import type { LayerConfig, Dimensions, CardData } from './types';
+import type { CardData } from './types';
+import {DeckStore} from "./hooks/deckStore";
+import {processVariables} from "../utils/csv-loader";
 
 export interface CardLayerProps {
-  layers: LayerConfig[];
-  dimensions: Dimensions;
   cardData: CardData;
-  showBounds?: boolean;
-}
-
-/**
- * 处理 body 内容中的 {{prop}} 语法并解析 markdown
- */
-function processBody(body: string, currentRow: CardData): string {
-  const processedBody = body.replace(/\{\{(\w+)\}\}/g, (_, key) => currentRow[key] || '');
-  return marked.parse(processedBody) as string;
-}
-
-/**
- * 渲染 layer 内容
- */
-function renderLayerContent(layer: { prop: string }, cardData: CardData): string {
-  const content = cardData[layer.prop] || '';
-  return processBody(content, cardData);
+  store: DeckStore;
 }
 
 export function CardLayer(props: CardLayerProps) {
+  const layers = createMemo(() => props.store.state.layerConfigs.filter((l) => l.visible));
+  const dimensions = () => props.store.state.dimensions!;
+  const showBounds = () => props.store.state.isEditing;
+  
+  function renderLayerContent(content: string) {
+    return marked.parse(processVariables(content, props.cardData, props.store.state.cards)) as string;
+  }
   return (
-    <For each={props.layers}>
+    <For each={layers()}>
       {(layer) => {
         return (
           <>
             <article
               class="absolute flex items-center justify-center text-center prose prose-sm"
               style={{
-                ...getLayerStyle(layer, props.dimensions),
+                ...getLayerStyle(layer, dimensions()),
                 'font-size': `${layer.fontSize || 3}mm`
               }}
-              innerHTML={renderLayerContent(layer, props.cardData)}
+              innerHTML={renderLayerContent(props.cardData[layer.prop])}
             />
-            {props.showBounds && (
+            {showBounds() && (
               <div
                 class="absolute border-2 border-blue-500/50 pointer-events-none select-none"
                 style={{
-                  left: `${(layer.x1 - 1) * props.dimensions.cellWidth}mm`,
-                  top: `${(layer.y1 - 1) * props.dimensions.cellHeight}mm`,
-                  width: `${(layer.x2 - layer.x1 + 1) * props.dimensions.cellWidth}mm`,
-                  height: `${(layer.y2 - layer.y1 + 1) * props.dimensions.cellHeight}mm`
+                  left: `${(layer.x1 - 1) * dimensions().cellWidth}mm`,
+                  top: `${(layer.y1 - 1) * dimensions().cellHeight}mm`,
+                  width: `${(layer.x2 - layer.x1 + 1) * dimensions().cellWidth}mm`,
+                  height: `${(layer.y2 - layer.y1 + 1) * dimensions().cellHeight}mm`
                 }}
               />
             )}

src/components/md-deck/CardPreview.tsx

@@ -15,7 +15,6 @@ export function CardPreview(props: CardPreviewProps) {
   const { store } = props;
 
   const currentCard = createMemo(() => store.state.cards[store.state.activeTab]);
-  const visibleLayers = createMemo(() => store.state.layerConfigs.filter((l) => l.visible));
   const selectionStyle = createMemo(() =>
     getSelectionBoxStyle(store.state.selectStart, store.state.selectEnd, store.state.dimensions)
   );
@@ -78,10 +77,8 @@ export function CardPreview(props: CardPreviewProps) {
             </Show>
 
             <CardLayer
-              layers={visibleLayers()}
-              dimensions={store.state.dimensions!}
               cardData={currentCard()}
-              showBounds={store.state.isEditing}
+              store={store}
             />
           </div>
         </div>

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

@@ -1,6 +1,6 @@
 import { createStore } from 'solid-js/store';
 import { calculateDimensions } from './dimensions';
-import { loadCSV } from '../../utils/csv-loader';
+import { loadCSV, CSV } from '../../utils/csv-loader';
 import { initLayerConfigs, formatLayers } from './layer-parser';
 import type { CardData, LayerConfig, Dimensions } from '../types';
 
@@ -32,7 +32,7 @@ export interface DeckState {
   dimensions: Dimensions | null;
 
   // 卡牌数据
-  cards: CardData[];
+  cards: CSV<CardData>;
   activeTab: number;
 
   // 图层配置

src/components/utils/csv-loader.ts

@@ -91,7 +91,7 @@ export function processVariables<T extends JSONObject> (body: string, currentRow
     const frontMatter = csv.frontmatter;
     if(key in row) return row[key];
     if(frontMatter && key in frontMatter) return frontMatter[key];
-    return '';
+    return `{{${key}}}`;
   }
 
   return body.replace(/\{\{(\w+)\}\}/g, (_, key) => `${replaceProp(key)}`);