feat: md-deck editor???

src/components/md-deck.tsx

@@ -1,5 +1,5 @@
 import { customElement, noShadowDOM } from 'solid-element';
-import { createSignal, For, Show, createEffect, createMemo, createResource } from 'solid-js';
+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';
@@ -16,6 +16,15 @@ interface Layer {
   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 [];
@@ -37,6 +46,14 @@ function parseLayers(layersStr: string): Layer[] {
   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[]>();
 
@@ -45,7 +62,8 @@ customElement('md-deck', {
   grid: '5x8', 
   bleed: '1', 
   padding: '2',
-  layers: ''
+  layers: '',
+  fixed: false
 }, (props, { element }) => {
   noShadowDOM();
 
@@ -53,6 +71,22 @@ customElement('md-deck', {
   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() || '';
 
@@ -92,18 +126,36 @@ customElement('md-deck', {
     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] = (props.size as string).split('x').map(Number);
+    const [width, height] = localSize().split('x').map(Number);
-    const [bleedW, bleedH] = (props.bleed as string).includes('x') 
+    const [bleedW, bleedH] = localBleed().includes('x') 
-      ? (props.bleed as string).split('x').map(Number)
+      ? localBleed().split('x').map(Number)
-      : [Number(props.bleed), Number(props.bleed)];
+      : [Number(localBleed()), Number(localBleed())];
-    const [padW, padH] = (props.padding as string).includes('x')
+    const [padW, padH] = localPadding().includes('x')
-      ? (props.padding as string).split('x').map(Number)
+      ? localPadding().split('x').map(Number)
-      : [Number(props.padding), Number(props.padding)];
+      : [Number(localPadding()), Number(localPadding())];
 
     // 实际卡牌尺寸（含出血）
     const cardWidth = width + bleedW * 2;
@@ -114,7 +166,7 @@ customElement('md-deck', {
     const gridAreaHeight = height - padH * 2;
 
     // 解析网格
-    const [gridW, gridH] = (props.grid as string).split('x').map(Number);
+    const [gridW, gridH] = localGrid().split('x').map(Number);
 
     // 每个网格单元的尺寸（mm）
     const cellWidth = gridAreaWidth / gridW;
@@ -138,9 +190,6 @@ customElement('md-deck', {
     };
   });
 
-  // 解析 layers
-  const layers = createMemo(() => parseLayers(props.layers as string));
-
   // 渲染 layer 内容
   const renderLayer = (layer: Layer, cardData: CardData): string => {
     const content = cardData[layer.prop] || '';
@@ -149,11 +198,8 @@ customElement('md-deck', {
 
   // 计算 layer 位置样式（单位：mm）
   const getLayerStyle = (layer: Layer, dims: ReturnType<typeof dimensions>) => {
-    // layer 坐标是网格坐标（1-based）
-    // 计算相对于网格区域起点的偏移（mm）
     const left = (layer.x1 - 1) * dims.cellWidth;
     const top = (layer.y1 - 1) * dims.cellHeight;
-    // 计算尺寸（mm）
     const width = (layer.x2 - layer.x1 + 1) * dims.cellWidth;
     const height = (layer.y2 - layer.y1 + 1) * dims.cellHeight;
 
@@ -165,72 +211,346 @@ customElement('md-deck', {
     };
   };
 
+  // 开始框选
+  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">
+    <div class="md-deck flex gap-4">
-      {/* Tab 选择器 */}
+      {/* 左侧：CSV 数据编辑 */}
-      <div class="flex items-center gap-2 border-b border-gray-200 pb-2 mb-4">
+      <Show when={isEditing() && !isFixed()}>
-        <div ref={tabsContainer} class="flex gap-1 overflow-x-auto flex-1 min-w-0 flex-wrap">
+        <div class="w-64 flex-shrink-0">
-          <For each={cards()}>
+          <h3 class="font-bold mb-2">卡牌数据</h3>
-            {(card, index) => (
+          <div class="space-y-2 max-h-96 overflow-y-auto">
-              <button
+            <For each={Object.keys(cards()[activeTab()] || {})}>
-                onClick={() => setActiveTab(index())}
+              {(key) => (
-                class={`font-medium transition-colors flex-shrink-0 min-w-[1.6em] cursor-pointer px-2 py-1 rounded ${
+                <div>
-                  activeTab() === index()
+                  <label class="block text-sm font-medium text-gray-700">{key}</label>
-                    ? 'bg-blue-100 text-blue-600 border-b-2 border-blue-600'
+                  <textarea
-                    : 'text-gray-500 hover:text-gray-700 hover:bg-gray-100'
+                    class="w-full border border-gray-300 rounded px-2 py-1 text-sm"
-                }`}
+                    rows={3}
-              >
+                    value={cards()[activeTab()]?.[key] || ''}
-                {card.label || card.name || `Card ${index() + 1}`}
+                    onInput={(e) => updateCardData(key, e.target.value)}
-              </button>
+                  />
-            )}
+                </div>
-          </For>
+              )}
+            </For>
+          </div>
         </div>
-      </div>
+      </Show>
 
-      {/* 卡牌预览 */}
+      {/* 中间：卡牌预览 */}
-      <Show when={!csvData.loading && cards().length > 0}>
+      <div class="flex-1">
-        <div class="flex justify-center">
+        {/* Tab 选择器 */}
-          <Show when={activeTab() < cards().length}>
+        <div class="flex items-center gap-2 border-b border-gray-200 pb-2 mb-4">
-            {(() => {
+          <button
-              const currentCard = cards()[activeTab()];
+            onClick={() => setIsEditing(!isEditing())}
-              const dims = dimensions();
+            class={`px-3 py-1 rounded text-sm font-medium transition-colors ${
-              
+              isEditing() && !isFixed()
-              return (
+                ? 'bg-blue-100 text-blue-600'
-                <div
+                : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
-                  class="relative bg-white border border-gray-300 shadow-lg"
+            } cursor-pointer`}
-                  style={{
+          >
-                    width: `${dims.cardWidth}mm`,
+            {isEditing() ? '✓ 编辑中' : '✏️ 编辑'}
-                    height: `${dims.cardHeight}mm`
+          </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="absolute"
+                    class="relative bg-white border border-gray-300 shadow-lg"
                     style={{
-                      left: `${dims.gridOriginX}mm`,
+                      width: `${dims.cardWidth}mm`,
-                      top: `${dims.gridOriginY}mm`,
+                      height: `${dims.cardHeight}mm`
-                      width: `${dims.gridAreaWidth}mm`,
-                      height: `${dims.gridAreaHeight}mm`
                     }}
+                    onMouseDown={handleCardMouseDown}
+                    onMouseMove={handleCardMouseMove}
+                    onMouseUp={handleCardMouseUp}
+                    onMouseLeave={handleCardMouseUp}
                   >
-                    {/* 渲染每个 layer */}
+                    {/* 框选遮罩 */}
-                    <For each={layers()}>
+                    <Show when={isSelecting() && selectStart() && selectEnd()}>
-                      {(layer) => {
+                      {(() => {
-                        const style = getLayerStyle(layer, dims);
+                        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 flex items-center justify-center text-center prose prose-sm"
+                            class="absolute bg-blue-500/30 border-2 border-blue-500 pointer-events-none"
-                            style={style}
+                            style={{
-                            innerHTML={renderLayer(layer, currentCard)}
+                              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`
                       }}
-                    </For>
+                    >
+                      {/* 编辑模式下的网格线 */}
+                      <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>
-          </Show>
+            
+            <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

@@ -21,6 +21,7 @@
 - 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"}
@@ -32,4 +33,21 @@
 
 然后显示卡牌本身。对每个排版层，将 csv 数据中对应字段作为 markdown 显示在对应位置并居中。
 
+### 编辑器 UI
+
+在卡牌左侧显示 csv 数据内容。
+
+在卡牌右侧显示表单，并以响应式控件编辑卡牌属性：
+- size
+- grid
+- bleed
+- padding
+
+对于每一个 csv 字段，显示一个图层控件：
+- 是否显示：若不显示，则在 layers 中不出现此字段。
+- 编辑位置按钮：激活后，在卡牌上显示遮罩，并允许框选网格区域，以用作字段的位置。
+
+最后，显示一个复制按钮，用于复制整个卡牌的`:md-deck`代码。
+
 - [x] 创建 md-deck 组件
+- [x] 实现编辑器 UI