feat: md-deck editor???

src/components/index.ts

@@ -3,6 +3,7 @@ import './dice';
 import './table';
 import './md-link';
 import './md-pins';
+import './md-deck';
 
 // 导出组件
 export { Article } from './Article';

src/components/md-deck.tsx

@@ -0,0 +1,558 @@
+import { customElement, noShadowDOM } from 'solid-element';
+import { createSignal, For, Show, createEffect, createMemo, createResource, onMount } from 'solid-js';
+import { parse } from 'csv-parse/browser/esm/sync';
+import { marked } from '../markdown';
+import { resolvePath } from '../utils/path';
+
+interface CardData {
+  [key: string]: string;
+}
+
+interface Layer {
+  prop: string;
+  x1: number;
+  y1: number;
+  x2: number;
+  y2: number;
+}
+
+interface LayerConfig {
+  prop: string;
+  visible: boolean;
+  x1: number;
+  y1: number;
+  x2: number;
+  y2: number;
+}
+
+// 解析 layers 字符串 "body:1,7-5,8 title:1,1-5,1"
+function parseLayers(layersStr: string): Layer[] {
+  if (!layersStr) return [];
+
+  const layers: Layer[] = [];
+  const regex = /(\w+):(\d+),(\d+)-(\d+),(\d+)/g;
+  let match;
+
+  while ((match = regex.exec(layersStr)) !== null) {
+    layers.push({
+      prop: match[1],
+      x1: parseInt(match[2]),
+      y1: parseInt(match[3]),
+      x2: parseInt(match[4]),
+      y2: parseInt(match[5])
+    });
+  }
+
+  return layers;
+}
+
+// 格式化 layers 为字符串
+function formatLayers(layers: LayerConfig[]): string {
+  return layers
+    .filter(l => l.visible)
+    .map(l => `${l.prop}:${l.x1},${l.y1}-${l.x2},${l.y2}`)
+    .join(' ');
+}
+
+// 全局缓存已加载的 CSV 内容
+const csvCache = new Map<string, CardData[]>();
+
+customElement('md-deck', { 
+  size: '54x86', 
+  grid: '5x8', 
+  bleed: '1', 
+  padding: '2',
+  layers: '',
+  fixed: false
+}, (props, { element }) => {
+  noShadowDOM();
+
+  const [cards, setCards] = createSignal<CardData[]>([]);
+  const [activeTab, setActiveTab] = createSignal(0);
+  let tabsContainer: HTMLDivElement | undefined;
+
+  // 编辑器状态
+  const [isEditing, setIsEditing] = createSignal(false);
+  const [editingLayer, setEditingLayer] = createSignal<string | null>(null);
+  const [layerConfigs, setLayerConfigs] = createSignal<LayerConfig[]>([]);
+  
+  // 框选状态
+  const [isSelecting, setIsSelecting] = createSignal(false);
+  const [selectStart, setSelectStart] = createSignal<{ x: number; y: number } | null>(null);
+  const [selectEnd, setSelectEnd] = createSignal<{ x: number; y: number } | null>(null);
+  
+  // 本地编辑的属性
+  const [localSize, setLocalSize] = createSignal(props.size as string || '54x86');
+  const [localGrid, setLocalGrid] = createSignal(props.grid as string || '5x8');
+  const [localBleed, setLocalBleed] = createSignal(props.bleed as string || '1');
+  const [localPadding, setLocalPadding] = createSignal(props.padding as string || '2');
+
+  // 从 element 的 textContent 获取 CSV 路径
+  const src = element?.textContent?.trim() || '';
+
+  // 隐藏原始文本内容
+  if (element) {
+    element.textContent = '';
+  }
+
+  // 从父节点 article 的 data-src 获取当前 markdown 文件完整路径
+  const articleEl = element?.closest('article[data-src]');
+  const articlePath = articleEl?.getAttribute('data-src') || '';
+
+  // 解析相对路径
+  const resolvedSrc = resolvePath(articlePath, src);
+
+  // 加载 CSV 文件的函数
+  const loadCSV = async (path: string): Promise<CardData[]> => {
+    if (csvCache.has(path)) {
+      return csvCache.get(path)!;
+    }
+    const response = await fetch(path);
+    const content = await response.text();
+    const records = parse(content, {
+      columns: true,
+      comment: '#',
+      trim: true,
+      skipEmptyLines: true
+    });
+    const result = records as CardData[];
+    csvCache.set(path, result);
+    return result;
+  };
+
+  const [csvData] = createResource(() => resolvedSrc, loadCSV);
+
+  createEffect(() => {
+    const data = csvData();
+    if (data) {
+      setCards(data);
+      // 初始化 layer configs
+      const parsed = parseLayers(props.layers as string || '');
+      const allProps = Object.keys(data[0] || {}).filter(k => k !== 'label');
+      const configs: LayerConfig[] = allProps.map(prop => {
+        const existing = parsed.find(l => l.prop === prop);
+        return {
+          prop,
+          visible: !!existing,
+          x1: existing?.x1 || 1,
+          y1: existing?.y1 || 1,
+          x2: existing?.x2 || 2,
+          y2: existing?.y2 || 2
+        };
+      });
+      setLayerConfigs(configs);
+    }
+  });
+
+  // 检查是否 fixed
+  const isFixed = () => props.fixed === true || props.fixed === 'true';
+
+  // 解析尺寸
+  const dimensions = createMemo(() => {
+    const [width, height] = localSize().split('x').map(Number);
+    const [bleedW, bleedH] = localBleed().includes('x') 
+      ? localBleed().split('x').map(Number)
+      : [Number(localBleed()), Number(localBleed())];
+    const [padW, padH] = localPadding().includes('x')
+      ? localPadding().split('x').map(Number)
+      : [Number(localPadding()), Number(localPadding())];
+
+    // 实际卡牌尺寸（含出血）
+    const cardWidth = width + bleedW * 2;
+    const cardHeight = height + bleedH * 2;
+
+    // 网格区域尺寸（减去 padding）
+    const gridAreaWidth = width - padW * 2;
+    const gridAreaHeight = height - padH * 2;
+
+    // 解析网格
+    const [gridW, gridH] = localGrid().split('x').map(Number);
+
+    // 每个网格单元的尺寸（mm）
+    const cellWidth = gridAreaWidth / gridW;
+    const cellHeight = gridAreaHeight / gridH;
+
+    // 网格区域起点（相对于卡牌左上角，含 bleed 和 padding）
+    const gridOriginX = bleedW + padW;
+    const gridOriginY = bleedH + padH;
+
+    return {
+      cardWidth,
+      cardHeight,
+      gridAreaWidth,
+      gridAreaHeight,
+      cellWidth,
+      cellHeight,
+      gridW,
+      gridH,
+      gridOriginX,
+      gridOriginY
+    };
+  });
+
+  // 渲染 layer 内容
+  const renderLayer = (layer: Layer, cardData: CardData): string => {
+    const content = cardData[layer.prop] || '';
+    return marked.parse(content) as string;
+  };
+
+  // 计算 layer 位置样式（单位：mm）
+  const getLayerStyle = (layer: Layer, dims: ReturnType<typeof dimensions>) => {
+    const left = (layer.x1 - 1) * dims.cellWidth;
+    const top = (layer.y1 - 1) * dims.cellHeight;
+    const width = (layer.x2 - layer.x1 + 1) * dims.cellWidth;
+    const height = (layer.y2 - layer.y1 + 1) * dims.cellHeight;
+
+    return {
+      left: `${left}mm`,
+      top: `${top}mm`,
+      width: `${width}mm`,
+      height: `${height}mm`
+    };
+  };
+
+  // 开始框选
+  const handleCardMouseDown = (e: MouseEvent) => {
+    if (!isEditing() || !editingLayer()) return;
+    
+    const cardEl = e.currentTarget as HTMLElement;
+    const rect = cardEl.getBoundingClientRect();
+    const dims = dimensions();
+    
+    // 计算相对于网格区域起点的坐标（网格单位）
+    const offsetX = (e.clientX - rect.left) / rect.width * dims.cardWidth;
+    const offsetY = (e.clientY - rect.top) / rect.height * dims.cardHeight;
+    
+    const gridX = Math.max(1, Math.floor((offsetX - dims.gridOriginX) / dims.cellWidth) + 1);
+    const gridY = Math.max(1, Math.floor((offsetY - dims.gridOriginY) / dims.cellHeight) + 1);
+    
+    setSelectStart({ x: gridX, y: gridY });
+    setSelectEnd({ x: gridX, y: gridY });
+    setIsSelecting(true);
+  };
+
+  // 更新框选结束位置
+  const handleCardMouseMove = (e: MouseEvent) => {
+    if (!isSelecting()) return;
+    
+    const cardEl = e.currentTarget as HTMLElement;
+    const rect = cardEl.getBoundingClientRect();
+    const dims = dimensions();
+    
+    const offsetX = (e.clientX - rect.left) / rect.width * dims.cardWidth;
+    const offsetY = (e.clientY - rect.top) / rect.height * dims.cardHeight;
+    
+    const gridX = Math.max(1, Math.min(dims.gridW, Math.floor((offsetX - dims.gridOriginX) / dims.cellWidth) + 1));
+    const gridY = Math.max(1, Math.min(dims.gridH, Math.floor((offsetY - dims.gridOriginY) / dims.cellHeight) + 1));
+    
+    setSelectEnd({ x: gridX, y: gridY });
+  };
+
+  // 结束框选
+  const handleCardMouseUp = () => {
+    if (!isSelecting() || !editingLayer()) return;
+    
+    const start = selectStart()!;
+    const end = selectEnd()!;
+    
+    const x1 = Math.min(start.x, end.x);
+    const y1 = Math.min(start.y, end.y);
+    const x2 = Math.max(start.x, end.x);
+    const y2 = Math.max(start.y, end.y);
+    
+    setLayerConfigs(configs => configs.map(c => 
+      c.prop === editingLayer() ? { ...c, x1, y1, x2, y2 } : c
+    ));
+    
+    setIsSelecting(false);
+    setSelectStart(null);
+    setSelectEnd(null);
+    setEditingLayer(null);
+  };
+
+  // 切换图层可见性
+  const toggleLayerVisible = (prop: string) => {
+    setLayerConfigs(configs => configs.map(c => 
+      c.prop === prop ? { ...c, visible: !c.visible } : c
+    ));
+  };
+
+  // 开始编辑图层位置
+  const startEditingLayer = (prop: string) => {
+    setEditingLayer(prop);
+  };
+
+  // 生成 md-deck 代码
+  const generateCode = () => {
+    const layersStr = formatLayers(layerConfigs());
+    return `:md-deck[${src}]{size="${localSize()}" grid="${localGrid()}" bleed="${localBleed()}" padding="${localPadding()}" layers="${layersStr}"}`;
+  };
+
+  // 复制代码
+  const copyCode = () => {
+    const code = generateCode();
+    navigator.clipboard.writeText(code).then(() => {
+      alert('已复制到剪贴板！');
+    }).catch(err => {
+      console.error('复制失败:', err);
+    });
+  };
+
+  // 更新 CSV 数据
+  const updateCardData = (key: string, value: string) => {
+    setCards(cards => cards.map((card, i) => 
+      i === activeTab() ? { ...card, [key]: value } : card
+    ));
+  };
+
+  return (
+    <div class="md-deck flex gap-4">
+      {/* 左侧：CSV 数据编辑 */}
+      <Show when={isEditing() && !isFixed()}>
+        <div class="w-64 flex-shrink-0">
+          <h3 class="font-bold mb-2">卡牌数据</h3>
+          <div class="space-y-2 max-h-96 overflow-y-auto">
+            <For each={Object.keys(cards()[activeTab()] || {})}>
+              {(key) => (
+                <div>
+                  <label class="block text-sm font-medium text-gray-700">{key}</label>
+                  <textarea
+                    class="w-full border border-gray-300 rounded px-2 py-1 text-sm"
+                    rows={3}
+                    value={cards()[activeTab()]?.[key] || ''}
+                    onInput={(e) => updateCardData(key, e.target.value)}
+                  />
+                </div>
+              )}
+            </For>
+          </div>
+        </div>
+      </Show>
+
+      {/* 中间：卡牌预览 */}
+      <div class="flex-1">
+        {/* Tab 选择器 */}
+        <div class="flex items-center gap-2 border-b border-gray-200 pb-2 mb-4">
+          <button
+            onClick={() => setIsEditing(!isEditing())}
+            class={`px-3 py-1 rounded text-sm font-medium transition-colors ${
+              isEditing() && !isFixed()
+                ? 'bg-blue-100 text-blue-600'
+                : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
+            } cursor-pointer`}
+          >
+            {isEditing() ? '✓ 编辑中' : '✏️ 编辑'}
+          </button>
+          <div ref={tabsContainer} class="flex gap-1 overflow-x-auto flex-1 min-w-0 flex-wrap">
+            <For each={cards()}>
+              {(card, index) => (
+                <button
+                  onClick={() => setActiveTab(index())}
+                  class={`font-medium transition-colors flex-shrink-0 min-w-[1.6em] cursor-pointer px-2 py-1 rounded ${
+                    activeTab() === index()
+                      ? 'bg-blue-100 text-blue-600 border-b-2 border-blue-600'
+                      : 'text-gray-500 hover:text-gray-700 hover:bg-gray-100'
+                  }`}
+                >
+                  {card.label || card.name || `Card ${index() + 1}`}
+                </button>
+              )}
+            </For>
+          </div>
+        </div>
+
+        {/* 卡牌预览 */}
+        <Show when={!csvData.loading && cards().length > 0}>
+          <div class="flex justify-center">
+            <Show when={activeTab() < cards().length}>
+              {(() => {
+                const currentCard = cards()[activeTab()];
+                const dims = dimensions();
+                const visibleLayers = layerConfigs().filter(l => l.visible);
+
+                return (
+                  <div
+                    class="relative bg-white border border-gray-300 shadow-lg"
+                    style={{
+                      width: `${dims.cardWidth}mm`,
+                      height: `${dims.cardHeight}mm`
+                    }}
+                    onMouseDown={handleCardMouseDown}
+                    onMouseMove={handleCardMouseMove}
+                    onMouseUp={handleCardMouseUp}
+                    onMouseLeave={handleCardMouseUp}
+                  >
+                    {/* 框选遮罩 */}
+                    <Show when={isSelecting() && selectStart() && selectEnd()}>
+                      {(() => {
+                        const start = selectStart()!;
+                        const end = selectEnd()!;
+                        const x1 = Math.min(start.x, end.x);
+                        const y1 = Math.min(start.y, end.y);
+                        const x2 = Math.max(start.x, end.x);
+                        const y2 = Math.max(start.y, end.y);
+
+                        const left = dims.gridOriginX + (x1 - 1) * dims.cellWidth;
+                        const top = dims.gridOriginY + (y1 - 1) * dims.cellHeight;
+                        const width = (x2 - x1 + 1) * dims.cellWidth;
+                        const height = (y2 - y1 + 1) * dims.cellHeight;
+
+                        return (
+                          <div
+                            class="absolute bg-blue-500/30 border-2 border-blue-500 pointer-events-none"
+                            style={{
+                              left: `${left}mm`,
+                              top: `${top}mm`,
+                              width: `${width}mm`,
+                              height: `${height}mm`
+                            }}
+                          />
+                        );
+                      })()}
+                    </Show>
+
+                    {/* 网格区域容器 */}
+                    <div
+                      class="absolute"
+                      style={{
+                        left: `${dims.gridOriginX}mm`,
+                        top: `${dims.gridOriginY}mm`,
+                        width: `${dims.gridAreaWidth}mm`,
+                        height: `${dims.gridAreaHeight}mm`
+                      }}
+                    >
+                      {/* 编辑模式下的网格线 */}
+                      <Show when={isEditing() && !isFixed()}>
+                        <div class="absolute inset-0 pointer-events-none">
+                          <For each={Array.from({ length: dims.gridW - 1 })}>
+                            {(_, i) => (
+                              <div
+                                class="absolute top-0 bottom-0 border-r border-dashed border-gray-300"
+                                style={{ left: `${(i() + 1) * dims.cellWidth}mm` }}
+                              />
+                            )}
+                          </For>
+                          <For each={Array.from({ length: dims.gridH - 1 })}>
+                            {(_, i) => (
+                              <div
+                                class="absolute left-0 right-0 border-b border-dashed border-gray-300"
+                                style={{ top: `${(i() + 1) * dims.cellHeight}mm` }}
+                              />
+                            )}
+                          </For>
+                        </div>
+                      </Show>
+
+                      {/* 渲染每个 layer */}
+                      <For each={visibleLayers}>
+                        {(layer) => {
+                          const style = getLayerStyle(layer, dims);
+                          const isEditingThis = editingLayer() === layer.prop;
+                          
+                          return (
+                            <div
+                              class={`absolute flex items-center justify-center text-center prose prose-sm ${
+                                isEditingThis ? 'bg-blue-500/20 ring-2 ring-blue-500' : ''
+                              }`}
+                              style={style}
+                              innerHTML={renderLayer(layer, currentCard)}
+                            />
+                          );
+                        }}
+                      </For>
+                    </div>
+                  </div>
+                );
+              })()}
+            </Show>
+          </div>
+        </Show>
+      </div>
+
+      {/* 右侧：属性编辑表单 */}
+      <Show when={isEditing() && !isFixed()}>
+        <div class="w-64 flex-shrink-0">
+          <h3 class="font-bold mb-2">卡牌属性</h3>
+          
+          <div class="space-y-3">
+            <div>
+              <label class="block text-sm font-medium text-gray-700">尺寸 (mm)</label>
+              <input
+                type="text"
+                class="w-full border border-gray-300 rounded px-2 py-1 text-sm"
+                value={localSize()}
+                onInput={(e) => setLocalSize(e.target.value)}
+              />
+            </div>
+            
+            <div>
+              <label class="block text-sm font-medium text-gray-700">网格</label>
+              <input
+                type="text"
+                class="w-full border border-gray-300 rounded px-2 py-1 text-sm"
+                value={localGrid()}
+                onInput={(e) => setLocalGrid(e.target.value)}
+              />
+            </div>
+            
+            <div>
+              <label class="block text-sm font-medium text-gray-700">出血 (mm)</label>
+              <input
+                type="text"
+                class="w-full border border-gray-300 rounded px-2 py-1 text-sm"
+                value={localBleed()}
+                onInput={(e) => setLocalBleed(e.target.value)}
+              />
+            </div>
+            
+            <div>
+              <label class="block text-sm font-medium text-gray-700">内边距 (mm)</label>
+              <input
+                type="text"
+                class="w-full border border-gray-300 rounded px-2 py-1 text-sm"
+                value={localPadding()}
+                onInput={(e) => setLocalPadding(e.target.value)}
+              />
+            </div>
+            
+            <hr class="my-4" />
+            
+            <h4 class="font-medium text-sm text-gray-700">图层</h4>
+            <For each={layerConfigs()}>
+              {(layer) => (
+                <div class="flex items-center gap-2">
+                  <input
+                    type="checkbox"
+                    checked={layer.visible}
+                    onChange={() => toggleLayerVisible(layer.prop)}
+                    class="cursor-pointer"
+                  />
+                  <span class="text-sm flex-1">{layer.prop}</span>
+                  <button
+                    onClick={() => startEditingLayer(layer.prop)}
+                    class={`text-xs px-2 py-0.5 rounded cursor-pointer ${
+                      editingLayer() === layer.prop
+                        ? 'bg-blue-500 text-white'
+                        : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
+                    }`}
+                  >
+                    {editingLayer() === layer.prop ? '✓ 框选' : '编辑位置'}
+                  </button>
+                </div>
+              )}
+            </For>
+            
+            <hr class="my-4" />
+            
+            <button
+              onClick={copyCode}
+              class="w-full bg-blue-600 hover:bg-blue-700 text-white px-3 py-2 rounded text-sm font-medium cursor-pointer"
+            >
+              📋 复制代码
+            </button>
+          </div>
+        </div>
+      </Show>
+    </div>
+  );
+});

todo.md

@@ -1,10 +1,53 @@
 # todo
 
-## md-pin-editor
+## md-pins
 
-- [ ] 类似md-pin，寻找最近一张图片。
-- [ ] 在图片上显示透明遮罩，覆盖整个图片。
-- [ ] 点击遮罩添加一个pin，位置在点击的位置。
-- [ ] 再次点击pin会删除pin。
-- [ ] 点击遮罩hud的复制按钮，可以将所有pin复制为md-pin文本，以回车换行连接。
-- [ ] 所有pin按照A B C ... Z AA AB ... 的顺序显示标签。
+- [x] 类似 md-pin，寻找最近一张图片。
+- [x] 在图片上显示透明遮罩，覆盖整个图片。
+- [x] 点击遮罩添加一个 pin，位置在点击的位置。
+- [x] 再次点击 pin 会删除 pin。
+- [x] 点击遮罩 hud 的复制按钮，可以将所有 pin 复制为 md-pin 文本，以回车换行连接。
+- [x] 所有 pin 按照 A B C ... Z AA AB ... 的顺序显示标签。
+- [x] 重命名为 md-pins，退休 md-pin。
+
+## md-deck
+
+定义一个排版模板，填充来自 csv 的数据并生成预览。
+
+### 语法
+
+- size: 长宽尺寸，以 mm 为单位。
+- grid: 排版网格。
+- bleed: 出血，如 54x86 外加 1mm 出血之后实际尺寸为 56x88。
+- padding: 网格外边距。54x86 外加 2mm padding 之后实际网格区域为 50x82。
+- layers: 排版层，由一个列表构成。每个元素以 `prop:topleft-bottomright` 格式定义。
+- fixed: 是否可编辑。fixed 未定义时开启编辑器 UI。
+
+```
+:md-deck[./card.csv]{size="54x86" grid="5x8" bleed="1" padding="2" layers="body:1,7-5,8 title:1,1-5,1"}
+```
+
+### 显示
+
+首先对 csv 数据中的每个条目，显示一个 tab。放在一个 flex wrap 的标签框里。
+
+然后显示卡牌本身。对每个排版层，将 csv 数据中对应字段作为 markdown 显示在对应位置并居中。
+
+### 编辑器 UI
+
+在卡牌左侧显示 csv 数据内容。
+
+在卡牌右侧显示表单，并以响应式控件编辑卡牌属性：
+- size
+- grid
+- bleed
+- padding
+
+对于每一个 csv 字段，显示一个图层控件：
+- 是否显示：若不显示，则在 layers 中不出现此字段。
+- 编辑位置按钮：激活后，在卡牌上显示遮罩，并允许框选网格区域，以用作字段的位置。
+
+最后，显示一个复制按钮，用于复制整个卡牌的`:md-deck`代码。
+
+- [x] 创建 md-deck 组件
+- [x] 实现编辑器 UI