ttrpg-tools/src/components/md-deck/CardLayer.tsx

import { For } from 'solid-js';
import { marked } from '../../markdown';
import { getLayerStyle } from './hooks/dimensions';
import type { LayerConfig, Dimensions, CardData } from './types';

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);
}

export function CardLayer(props: CardLayerProps) {
  return (
    <For each={props.layers}>
      {(layer) => {
        const layerStyle = getLayerStyle(layer, props.dimensions);
        return (
          <>
            <article
              class="absolute flex items-center justify-center text-center prose prose-sm"
              style={{
                ...layerStyle,
                'font-size': `${props.dimensions.fontSize}mm`
              }}
              innerHTML={renderLayerContent(layer, props.cardData)}
            />
            {props.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`
                }}
              />
            )}
          </>
        );
      }}
    </For>
  );
}