.idea/.gitignore

@@ -1,10 +0,0 @@
-# 默认忽略的文件
-/shelf/
-/workspace.xml
-# Rider 忽略的文件
-/projectSettingsUpdater.xml
-/modules.xml
-/.idea.ttrpg-tools.iml
-/contentModel.xml
-# 基于编辑器的 HTTP 客户端请求
-/httpRequests/

.idea/encodings.xml

@@ -1,4 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="Encoding" addBOMForNewFiles="with BOM under Windows, with no BOM otherwise" />
-</project>

.idea/indexLayout.xml

@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="UserContentModel">
-    <attachedFolders />
-    <explicitIncludes />
-    <explicitExcludes />
-  </component>
-</project>

.idea/vcs.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="VcsDirectoryMappings">
-    <mapping directory="" vcs="Git" />
-  </component>
-</project>

src/components/Article.tsx

@@ -26,6 +26,8 @@ export const Article: Component<ArticleProps> = (props) => {
     fetchArticleContent
   );
 
+  let articleRef: HTMLArticleElement | undefined;
+
   createEffect(() => {
     const data = content();
     if (data) {
@@ -38,7 +40,7 @@ export const Article: Component<ArticleProps> = (props) => {
   });
 
   return (
-    <article class={`prose ${props.class || ''}`} data-src={props.src}>
+    <article ref={articleRef} class={`prose ${props.class || ''}`} data-src={props.src}>
       <Show when={content.loading}>
         <div class="text-gray-500">加载中...</div>
       </Show>

src/components/Sidebar.tsx

@@ -3,23 +3,21 @@ import { generateToc, type FileNode, type TocNode } from "../data-loader";
 import { useLocation } from "@solidjs/router";
 import { FileTreeNode, HeadingNode } from "./FileTree";
 
-export interface SidebarProps {
+interface SidebarProps {
   isOpen: boolean;
   onClose: () => void;
-}
-
-interface SidebarContentProps {
-  fileTree: FileNode[];
-  pathHeadings: Record<string, TocNode[]>;
-  currentPath: string;
-  onClose: () => void;
   isDesktop?: boolean;
 }
 
 /**
  * 侧边栏内容组件
  */
-const SidebarContent: Component<SidebarContentProps> = (props) => {
+const SidebarContent: Component<{
+  fileTree: FileNode[];
+  pathHeadings: Record<string, TocNode[]>;
+  currentPath: string;
+  onClose: () => void;
+}> = (props) => {
   const location = useLocation();
 
   // 响应式获取当前文件的标题列表
@@ -84,7 +82,9 @@ const SidebarContent: Component<SidebarContentProps> = (props) => {
 export const MobileSidebar: Component<SidebarProps> = (props) => {
   const location = useLocation();
   const [fileTree, setFileTree] = createSignal<FileNode[]>([]);
-  const [pathHeadings, setPathHeadings] = createSignal<Record<string, TocNode[]>>({});
+  const [pathHeadings, setPathHeadings] = createSignal<
+    Record<string, TocNode[]>
+  >({});
 
   // 加载目录数据
   onMount(async () => {
@@ -122,10 +122,12 @@ export const MobileSidebar: Component<SidebarProps> = (props) => {
 /**
  * 桌面端固定侧边栏
  */
-export const DesktopSidebar: Component<{}> = () => {
+export const DesktopSidebar: Component = () => {
   const location = useLocation();
   const [fileTree, setFileTree] = createSignal<FileNode[]>([]);
-  const [pathHeadings, setPathHeadings] = createSignal<Record<string, TocNode[]>>({});
+  const [pathHeadings, setPathHeadings] = createSignal<
+    Record<string, TocNode[]>
+  >({});
 
   // 加载目录数据
   onMount(async () => {
@@ -141,7 +143,7 @@ export const DesktopSidebar: Component<{}> = () => {
         pathHeadings={pathHeadings()}
         currentPath={location.pathname}
         onClose={() => {}}
-        isDesktop
+        isDesktop={true}
       />
     </aside>
   );

src/components/dice.tsx

@@ -1,10 +1,6 @@
 import { customElement, noShadowDOM } from "solid-element";
 import { createSignal, onMount } from "solid-js";
 
-export interface DiceProps {
-  key?: string;
-}
-
 interface RollResult {
   total: number;
   rolls: number[];

src/components/index.ts

@@ -1,6 +1,6 @@
-// 导入自定义元素以注册
+// 导入以注册自定义元素
-import './md-dice';
+import './dice';
-import './md-table';
+import './table';
 import './md-link';
 import './md-pins';
 import './md-deck';
@@ -13,5 +13,5 @@ export type { SidebarProps } from './Sidebar';
 export { FileTreeNode, HeadingNode } from './FileTree';
 
 // 导出数据类型
-export type { DiceProps } from './md-dice';
+export type { DiceProps } from './dice';
-export type { TableProps } from './md-table';
+export type { TableProps } from './table';

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

src/components/md-deck/CardPreview.tsx

@@ -1,114 +0,0 @@
-import { Show, For, createMemo } from 'solid-js';
-import { marked } from '../../markdown';
-import { getLayerStyle } from './hooks/dimensions';
-import { useCardSelection } from './hooks/useCardSelection';
-import { getSelectionBoxStyle } from './hooks/useCardSelection';
-import type { DeckStore } from './hooks/deckStore';
-
-export interface CardPreviewProps {
-  store: DeckStore;
-}
-
-/**
- * 渲染 layer 内容（提取为纯工具函数）
- */
-function renderLayerContent(layer: { prop: string }, cardData: DeckStore['state']['cards'][number]): string {
-  const content = cardData[layer.prop] || '';
-  return marked.parse(content) as string;
-}
-
-/**
- * 卡牌预览组件
- */
-export function CardPreview(props: CardPreviewProps) {
-  const { store } = props;
-
-  // 使用 createMemo 优化计算
-  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)
-  );
-
-  const selection = useCardSelection(store);
-
-  let cardRef: HTMLDivElement | undefined;
-
-  return (
-    <div class="flex justify-center">
-      <Show when={store.state.activeTab < store.state.cards.length}>
-        <div
-          ref={cardRef}
-          class="relative bg-white border border-gray-300 shadow-lg"
-          style={{
-            width: `${store.state.dimensions?.cardWidth}mm`,
-            height: `${store.state.dimensions?.cardHeight}mm`
-          }}
-          onMouseDown={(e) => selection.onMouseDown(e, cardRef!)}
-          onMouseMove={(e) => selection.onMouseMove(e, cardRef!)}
-          onMouseUp={selection.onMouseUp}
-          onMouseLeave={selection.onMouseLeave}
-        >
-          {/* 框选遮罩 */}
-          <Show when={store.state.isSelecting && selectionStyle()}>
-            <div
-              class="absolute bg-blue-500/30 border-2 border-blue-500 pointer-events-none"
-              style={selectionStyle()!}
-            />
-          </Show>
-
-          {/* 网格区域容器 */}
-          <div
-            class="absolute"
-            style={{
-              left: `${store.state.dimensions?.gridOriginX}mm`,
-              top: `${store.state.dimensions?.gridOriginY}mm`,
-              width: `${store.state.dimensions?.gridAreaWidth}mm`,
-              height: `${store.state.dimensions?.gridAreaHeight}mm`
-            }}
-          >
-            {/* 编辑模式下的网格线 */}
-            <Show when={store.state.isEditing && !store.state.fixed}>
-              <div class="absolute inset-0 pointer-events-none">
-                <For each={Array.from({ length: (store.state.dimensions?.gridW || 0) - 1 })}>
-                  {(_, i) => (
-                    <div
-                      class="absolute top-0 bottom-0 border-r border-dashed border-gray-300"
-                      style={{ left: `${(i() + 1) * (store.state.dimensions?.cellWidth || 0)}mm` }}
-                    />
-                  )}
-                </For>
-                <For each={Array.from({ length: (store.state.dimensions?.gridH || 0) - 1 })}>
-                  {(_, i) => (
-                    <div
-                      class="absolute left-0 right-0 border-b border-dashed border-gray-300"
-                      style={{ top: `${(i() + 1) * (store.state.dimensions?.cellHeight || 0)}mm` }}
-                    />
-                  )}
-                </For>
-              </div>
-            </Show>
-
-            {/* 渲染每个 layer */}
-            <For each={visibleLayers()}>
-              {(layer) => {
-                return (
-                  <div
-                    class={`absolute flex items-center justify-center text-center prose prose-sm ${
-                      store.state.isEditing ? 'bg-blue-500/20 ring-2 ring-blue-500' : ''
-                    }`}
-                    style={{
-                      ...getLayerStyle(layer, store.state.dimensions!),
-                      'font-size': `${store.state.dimensions?.fontSize}mm`
-                    }}
-                    innerHTML={renderLayerContent(layer, currentCard())}
-                  />
-                );
-              }}
-            </For>
-          </div>
-        </div>
-      </Show>
-    </div>
-  );
-}

src/components/md-deck/DeckContent.tsx

@@ -1,43 +0,0 @@
-import { Show } from 'solid-js';
-import { CardPreview } from './CardPreview';
-import type { DeckStore } from './hooks/deckStore';
-
-export interface DeckContentProps {
-  store: DeckStore;
-  isLoading: boolean;
-}
-
-/**
- * 卡牌预览内容区域：错误/加载/卡牌预览/空状态
- */
-export function DeckContent(props: DeckContentProps) {
-  return (
-    <>
-      {/* 错误提示 */}
-      <Show when={props.store.state.error}>
-        <div class="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded mb-4">
-          {props.store.state.error}
-        </div>
-      </Show>
-
-      {/* 加载状态 */}
-      <Show when={props.isLoading}>
-        <div class="text-center text-gray-500 py-8">
-          加载卡牌数据中...
-        </div>
-      </Show>
-
-      {/* 卡牌预览 */}
-      <Show when={!props.isLoading && props.store.state.cards.length > 0 && !props.store.state.error}>
-        <CardPreview store={props.store} />
-      </Show>
-
-      {/* 空状态 */}
-      <Show when={!props.isLoading && props.store.state.cards.length === 0 && !props.store.state.error}>
-        <div class="text-center text-gray-500 py-8">
-          暂无卡牌数据
-        </div>
-      </Show>
-    </>
-  );
-}

src/components/md-deck/DeckHeader.tsx

@@ -1,47 +0,0 @@
-import { For } from 'solid-js';
-import type { DeckStore } from './hooks/deckStore';
-
-export interface DeckHeaderProps {
-  store: DeckStore;
-}
-
-/**
- * 卡牌预览头部：编辑按钮和 Tab 选择器
- */
-export function DeckHeader(props: DeckHeaderProps) {
-  const { store } = props;
-
-  return (
-    <div class="flex items-center gap-2 border-b border-gray-200 pb-2 mb-4">
-      {/* 编辑按钮 */}
-      <button
-        onClick={() => store.actions.setIsEditing(!store.state.isEditing)}
-        class={`px-3 py-1 rounded text-sm font-medium transition-colors cursor-pointer ${
-          store.state.isEditing && !store.state.fixed
-            ? 'bg-blue-100 text-blue-600'
-            : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
-        }`}
-      >
-        {store.state.isEditing ? '✓ 编辑中' : '✏️ 编辑'}
-      </button>
-
-      {/* Tab 选择器 */}
-      <div class="flex gap-1 overflow-x-auto flex-1 min-w-0 flex-wrap">
-        <For each={store.state.cards}>
-          {(card, index) => (
-            <button
-              onClick={() => store.actions.setActiveTab(index())}
-              class={`font-medium transition-colors flex-shrink-0 min-w-[1.6em] cursor-pointer px-2 py-1 rounded ${
-                store.state.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>
-  );
-}

src/components/md-deck/editor-panel/DataEditorPanel.tsx

@@ -1,34 +0,0 @@
-import { For } from 'solid-js';
-import type { DeckStore } from '../hooks/deckStore';
-
-export interface DataEditorPanelProps {
-  activeTab: number;
-  cards: DeckStore['state']['cards'];
-  updateCardData: DeckStore['actions']['updateCardData'];
-}
-
-/**
- * 左侧：CSV 数据编辑面板
- */
-export function DataEditorPanel(props: DataEditorPanelProps) {
-  return (
-    <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(props.cards[props.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={props.cards[props.activeTab]?.[key] || ''}
-                onInput={(e) => props.updateCardData(props.activeTab, key, e.target.value)}
-              />
-            </div>
-          )}
-        </For>
-      </div>
-    </div>
-  );
-}

src/components/md-deck/editor-panel/LayerEditorPanel.tsx

@@ -1,54 +0,0 @@
-import { For } from 'solid-js';
-import type { DeckStore } from '../hooks/deckStore';
-
-export interface LayerEditorPanelProps {
-  store: DeckStore;
-}
-
-/**
- * 图层编辑面板：图层可见性切换、位置编辑、复制代码
- */
-export function LayerEditorPanel(props: LayerEditorPanelProps) {
-  const { store } = props;
-
-  return (
-    <div class="w-64 flex-shrink-0">
-      <h3 class="font-bold mb-2">图层</h3>
-
-      <div class="space-y-2">
-        <For each={store.state.layerConfigs}>
-          {(layer) => (
-            <div class="flex items-center gap-2">
-              <input
-                type="checkbox"
-                checked={layer.visible}
-                onChange={() => store.actions.toggleLayerVisible(layer.prop)}
-                class="cursor-pointer"
-              />
-              <span class="text-sm flex-1">{layer.prop}</span>
-              <button
-                onClick={() => store.actions.setEditingLayer(store.state.editingLayer === layer.prop ? null : layer.prop)}
-                class={`text-xs px-2 py-0.5 rounded cursor-pointer ${
-                  store.state.editingLayer === layer.prop
-                    ? 'bg-blue-500 text-white'
-                    : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
-                }`}
-              >
-                {store.state.editingLayer === layer.prop ? '✓ 框选' : '编辑'}
-              </button>
-            </div>
-          )}
-        </For>
-      </div>
-
-      <hr class="my-4" />
-
-      <button
-        onClick={store.actions.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>
-  );
-}

src/components/md-deck/editor-panel/PropertiesEditorPanel.tsx

@@ -1,96 +0,0 @@
-import type { DeckStore } from '../hooks/deckStore';
-
-export interface PropertiesEditorPanelProps {
-  store: DeckStore;
-}
-
-/**
- * 卡牌属性编辑面板：尺寸、网格、字体、出血、内边距
- */
-export function PropertiesEditorPanel(props: PropertiesEditorPanelProps) {
-  const { store } = props;
-
-  return (
-    <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>
-          <div class="flex gap-2">
-            <input
-              type="number"
-              class="w-full border border-gray-300 rounded px-2 py-1 text-sm"
-              value={store.state.sizeW}
-              onChange={(e) => store.actions.setSizeW(Number(e.target.value))}
-              placeholder="宽"
-            />
-            <input
-              type="number"
-              class="w-full border border-gray-300 rounded px-2 py-1 text-sm"
-              value={store.state.sizeH}
-              onChange={(e) => store.actions.setSizeH(Number(e.target.value))}
-              placeholder="高"
-            />
-          </div>
-        </div>
-
-        <div>
-          <label class="block text-sm font-medium text-gray-700">网格</label>
-          <div class="flex gap-2">
-            <input
-              type="number"
-              class="w-full border border-gray-300 rounded px-2 py-1 text-sm"
-              value={store.state.gridW}
-              onChange={(e) => store.actions.setGridW(Number(e.target.value))}
-              placeholder="宽"
-            />
-            <input
-              type="number"
-              class="w-full border border-gray-300 rounded px-2 py-1 text-sm"
-              value={store.state.gridH}
-              onChange={(e) => store.actions.setGridH(Number(e.target.value))}
-              placeholder="高"
-            />
-          </div>
-        </div>
-
-        <div>
-          <label class="block text-sm font-medium text-gray-700">牌面字体 (mm)</label>
-          <input
-            type="number"
-            class="w-full border border-gray-300 rounded px-2 py-1 text-sm"
-            value={store.state.fontSize}
-            onChange={(e) => store.actions.setFontSize(Number(e.target.value))}
-          />
-        </div>
-
-        <div>
-          <label class="block text-sm font-medium text-gray-700">出血 (mm)</label>
-          <div class="flex gap-2">
-            <input
-              type="number"
-              class="w-full border border-gray-300 rounded px-2 py-1 text-sm"
-              value={store.state.bleed}
-              onChange={(e) => store.actions.setBleed(Number(e.target.value))}
-              placeholder="出血"
-            />
-          </div>
-        </div>
-
-        <div>
-          <label class="block text-sm font-medium text-gray-700">内边距 (mm)</label>
-          <div class="flex gap-2">
-            <input
-              type="number"
-              class="w-full border border-gray-300 rounded px-2 py-1 text-sm"
-              value={store.state.padding}
-              onChange={(e) => store.actions.setPadding(Number(e.target.value))}
-              placeholder="内边距"
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

src/components/md-deck/editor-panel/index.ts

@@ -1,6 +0,0 @@
-export { DataEditorPanel } from './DataEditorPanel';
-export { PropertiesEditorPanel } from './PropertiesEditorPanel';
-export { LayerEditorPanel } from './LayerEditorPanel';
-export type { DataEditorPanelProps } from './DataEditorPanel';
-export type { PropertiesEditorPanelProps } from './PropertiesEditorPanel';
-export type { LayerEditorPanelProps } from './LayerEditorPanel';

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

@@ -1,297 +0,0 @@
-import { createStore } from 'solid-js/store';
-import { calculateDimensions } from './dimensions';
-import { loadCSV } from '../../utils/csv-loader';
-import { initLayerConfigs } from './layer-parser';
-import type { CardData, LayerConfig, Dimensions } from '../types';
-
-/**
- * 默认配置常量
- */
-export const DECK_DEFAULTS = {
-  SIZE_W: 54,
-  SIZE_H: 86,
-  GRID_W: 5,
-  GRID_H: 8,
-  BLEED: 1,
-  PADDING: 2,
-  FONT_SIZE: 3
-} as const;
-
-export interface DeckState {
-  // 基本属性
-  sizeW: number;
-  sizeH: number;
-  gridW: number;
-  gridH: number;
-  bleed: number;
-  padding: number;
-  fontSize: number;
-  fixed: boolean;
-  src: string;
-
-  // 解析后的尺寸
-  dimensions: Dimensions | null;
-
-  // 卡牌数据
-  cards: CardData[];
-  activeTab: number;
-
-  // 图层配置
-  layerConfigs: LayerConfig[];
-
-  // 编辑状态
-  isEditing: boolean;
-  editingLayer: string | null;
-
-  // 框选状态
-  isSelecting: boolean;
-  selectStart: { x: number; y: number } | null;
-  selectEnd: { x: number; y: number } | null;
-
-  // 加载状态
-  isLoading: boolean;
-
-  // 错误状态
-  error: string | null;
-}
-
-export interface DeckActions {
-  // 基本属性设置
-  setSizeW: (size: number) => void;
-  setSizeH: (size: number) => void;
-  setGridW: (grid: number) => void;
-  setGridH: (grid: number) => void;
-  setBleed: (bleed: number) => void;
-  setPadding: (padding: number) => void;
-  setFontSize: (size: number) => void;
-
-  // 数据设置
-  setCards: (cards: CardData[]) => void;
-  setActiveTab: (index: number) => void;
-  updateCardData: (index: number, key: string, value: string) => void;
-
-  // 图层操作
-  setLayerConfigs: (configs: LayerConfig[]) => void;
-  updateLayerConfig: (prop: string, updates: Partial<LayerConfig>) => void;
-  toggleLayerVisible: (prop: string) => void;
-
-  // 编辑状态
-  setIsEditing: (editing: boolean) => void;
-  setEditingLayer: (layer: string | null) => void;
-  updateLayerPosition: (x1: number, y1: number, x2: number, y2: number) => void;
-
-  // 框选操作
-  setIsSelecting: (selecting: boolean) => void;
-  setSelectStart: (pos: { x: number; y: number } | null) => void;
-  setSelectEnd: (pos: { x: number; y: number } | null) => void;
-  cancelSelection: () => void;
-
-  // 数据加载
-  loadCardsFromPath: (path: string, layersStr?: string) => Promise<void>;
-  setError: (error: string | null) => void;
-  clearError: () => void;
-
-  // 生成代码
-  generateCode: () => string;
-  copyCode: () => Promise<void>;
-}
-
-export interface DeckStore {
-  state: DeckState;
-  actions: DeckActions;
-}
-
-/**
- * 创建 deck store
- */
-export function createDeckStore(
-  initialSrc: string = '',
-  initialLayers: string = ''
-): DeckStore {
-  const [state, setState] = createStore<DeckState>({
-    sizeW: DECK_DEFAULTS.SIZE_W,
-    sizeH: DECK_DEFAULTS.SIZE_H,
-    gridW: DECK_DEFAULTS.GRID_W,
-    gridH: DECK_DEFAULTS.GRID_H,
-    bleed: DECK_DEFAULTS.BLEED,
-    padding: DECK_DEFAULTS.PADDING,
-    fontSize: DECK_DEFAULTS.FONT_SIZE,
-    fixed: false,
-    src: initialSrc,
-    dimensions: null,
-    cards: [],
-    activeTab: 0,
-    layerConfigs: [],
-    isEditing: false,
-    editingLayer: null,
-    isSelecting: false,
-    selectStart: null,
-    selectEnd: null,
-    isLoading: false,
-    error: null
-  });
-
-  // 更新尺寸并重新计算 dimensions
-  const updateDimensions = () => {
-    const dims = calculateDimensions({
-      sizeW: state.sizeW,
-      sizeH: state.sizeH,
-      gridW: state.gridW,
-      gridH: state.gridH,
-      bleed: state.bleed,
-      padding: state.padding,
-      fontSize: state.fontSize
-    });
-    setState({ dimensions: dims });
-  };
-
-  const setSizeW = (size: number) => {
-    setState({ sizeW: size });
-    updateDimensions();
-  };
-  const setSizeH = (size: number) => {
-    setState({ sizeH: size });
-    updateDimensions();
-  };
-  const setGridW = (grid: number) => {
-    setState({ gridW: grid });
-    updateDimensions();
-  };
-  const setGridH = (grid: number) => {
-    setState({ gridH: grid });
-    updateDimensions();
-  };
-  const setBleed = (bleed: number) => {
-    setState({ bleed });
-    updateDimensions();
-  };
-  const setPadding = (padding: number) => {
-    setState({ padding });
-    updateDimensions();
-  };
-  const setFontSize = (size: number) => {
-    setState({ fontSize: size });
-    updateDimensions();
-  };
-
-  const setCards = (cards: CardData[]) => setState({ cards, activeTab: 0 });
-  const setActiveTab = (index: number) => setState({ activeTab: index });
-  const updateCardData = (index: number, key: string, value: string) => {
-    setState('cards', index, key, value);
-  };
-
-  const setLayerConfigs = (configs: LayerConfig[]) => setState({ layerConfigs: configs });
-  const updateLayerConfig = (prop: string, updates: Partial<LayerConfig>) => {
-    setState('layerConfigs', (prev) => prev.map((config) => config.prop === prop ? { ...config, ...updates } : config));
-  };
-  const toggleLayerVisible = (prop: string) => {
-    setState('layerConfigs', (prev) => prev.map((config) =>
-      config.prop === prop ? { ...config, visible: !config.visible } : config
-    ));
-  };
-
-  const setIsEditing = (editing: boolean) => setState({ isEditing: editing });
-  const setEditingLayer = (layer: string | null) => setState({ editingLayer: layer });
-  const updateLayerPosition = (x1: number, y1: number, x2: number, y2: number) => {
-    const layer = state.editingLayer;
-    if (!layer) return;
-    setState('layerConfigs', (prev) => prev.map((config) =>
-      config.prop === layer ? { ...config, x1, y1, x2, y2 } : config
-    ));
-    setState({ editingLayer: null });
-  };
-
-  const setIsSelecting = (selecting: boolean) => setState({ isSelecting: selecting });
-  const setSelectStart = (pos: { x: number; y: number } | null) => setState({ selectStart: pos });
-  const setSelectEnd = (pos: { x: number; y: number } | null) => setState({ selectEnd: pos });
-  const cancelSelection = () => {
-    setState({ isSelecting: false, selectStart: null, selectEnd: null });
-  };
-
-  // 加载卡牌数据（核心逻辑）
-  const loadCardsFromPath = async (path: string, layersStr: string = '') => {
-    if (!path) {
-      setState({ error: '未指定 CSV 文件路径' });
-      return;
-    }
-
-    setState({ isLoading: true, error: null, src: path });
-
-    try {
-      const data = await loadCSV(path);
-      
-      if (data.length === 0) {
-        setState({ 
-          error: 'CSV 文件为空或格式不正确',
-          isLoading: false 
-        });
-        return;
-      }
-
-      setState({ 
-        cards: data, 
-        activeTab: 0,
-        layerConfigs: initLayerConfigs(data, layersStr),
-        isLoading: false 
-      });
-      updateDimensions();
-    } catch (err) {
-      setState({ 
-        error: `加载 CSV 失败：${err instanceof Error ? err.message : '未知错误'}`,
-        isLoading: false 
-      });
-    }
-  };
-
-  const setError = (error: string | null) => setState({ error });
-  const clearError = () => setState({ error: null });
-
-  const generateCode = () => {
-    const layersStr = state.layerConfigs
-      .filter(l => l.visible)
-      .map(l => `${l.prop}:${l.x1},${l.y1}-${l.x2},${l.y2}`)
-      .join(' ');
-    return `:md-deck[${state.src}]{size="${state.sizeW}x${state.sizeH}" grid="${state.gridW}x${state.gridH}" bleed="${state.bleed}" padding="${state.padding}" fontSize="${state.fontSize}" layers="${layersStr}"}`;
-  };
-
-  const copyCode = async () => {
-    const code = generateCode();
-    try {
-      await navigator.clipboard.writeText(code);
-      alert('已复制到剪贴板！');
-    } catch (err) {
-      console.error('复制失败:', err);
-      alert('复制失败，请手动复制');
-    }
-  };
-
-  const actions: DeckActions = {
-    setSizeW,
-    setSizeH,
-    setGridW,
-    setGridH,
-    setBleed,
-    setPadding,
-    setFontSize,
-    setCards,
-    setActiveTab,
-    updateCardData,
-    setLayerConfigs,
-    updateLayerConfig,
-    toggleLayerVisible,
-    setIsEditing,
-    setEditingLayer,
-    updateLayerPosition,
-    setIsSelecting,
-    setSelectStart,
-    setSelectEnd,
-    cancelSelection,
-    loadCardsFromPath,
-    setError,
-    clearError,
-    generateCode,
-    copyCode
-  };
-
-  return { state, actions };
-}

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

@@ -1,66 +0,0 @@
-import type { Dimensions } from '../types';
-
-export interface DimensionOptions {
-  sizeW: number;
-  sizeH: number;
-  bleed: number;
-  padding: number;
-  gridW: number;
-  gridH: number;
-  fontSize?: number;
-}
-
-/**
- * 解析卡牌尺寸和网格配置
- */
-export function calculateDimensions(options: DimensionOptions): Dimensions {
-  // 实际卡牌尺寸（含出血）
-  const cardWidth = options.sizeW + options.bleed * 2;
-  const cardHeight = options.sizeH + options.bleed * 2;
-
-  // 网格区域尺寸（减去 padding）
-  const gridAreaWidth = options.sizeW - options.padding * 2;
-  const gridAreaHeight = options.sizeH - options.padding * 2;
-
-  // 每个网格单元的尺寸（mm）
-  const cellWidth = gridAreaWidth / options.gridW;
-  const cellHeight = gridAreaHeight / options.gridH;
-
-  // 网格区域起点（相对于卡牌左上角，含 bleed 和 padding）
-  const gridOriginX = options.bleed + options.padding;
-  const gridOriginY = options.bleed + options.padding;
-
-  return {
-    cardWidth,
-    cardHeight,
-    gridAreaWidth,
-    gridAreaHeight,
-    cellWidth,
-    cellHeight,
-    gridW: options.gridW,
-    gridH: options.gridH,
-    gridOriginX,
-    gridOriginY,
-    fontSize: options.fontSize ?? 3
-  };
-}
-
-/**
- * 计算 layer 位置样式（单位：mm）
- */
-export function getLayerStyle(
-  layer: { x1: number; y1: number; x2: number; y2: number },
-  dims: Dimensions
-): { left: string; top: string; width: string; height: string } {
-  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`
-  };
-}

src/components/md-deck/hooks/layer-parser.ts

@@ -1,57 +0,0 @@
-import type { Layer, LayerConfig } from '../types';
-
-/**
- * 解析 layers 字符串 "body:1,7-5,8 title:1,1-5,1"
- */
-export 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 为字符串
- */
-export function formatLayers(layers: LayerConfig[]): string {
-  return layers
-    .filter(l => l.visible)
-    .map(l => `${l.prop}:${l.x1},${l.y1}-${l.x2},${l.y2}`)
-    .join(' ');
-}
-
-/**
- * 初始化图层配置
- */
-export function initLayerConfigs(
-  data: any[],
-  existingLayersStr: string
-): LayerConfig[] {
-  const parsed = parseLayers(existingLayersStr);
-  const allProps = Object.keys(data[0] || {}).filter(k => k !== 'label');
-  
-  return 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
-    };
-  });
-}

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

@@ -1,92 +0,0 @@
-import type { DeckStore } from './deckStore';
-
-/**
- * 框选相关的操作（已整合到 deckStore）
- * 此 hook 用于处理卡牌预览区域的鼠标交互
- */
-export function useCardSelection(store: DeckStore) {
-  const calculateGridCoords = (e: MouseEvent, cardEl: HTMLElement, dimensions: DeckStore['state']['dimensions']) => {
-    if (!dimensions) return { gridX: 1, gridY: 1 };
-
-    const rect = cardEl.getBoundingClientRect();
-
-    const offsetX = (e.clientX - rect.left) / rect.width * dimensions.cardWidth;
-    const offsetY = (e.clientY - rect.top) / rect.height * dimensions.cardHeight;
-
-    const gridX = Math.max(1, Math.floor((offsetX - dimensions.gridOriginX) / dimensions.cellWidth) + 1);
-    const gridY = Math.max(1, Math.floor((offsetY - dimensions.gridOriginY) / dimensions.cellHeight) + 1);
-
-    return {
-      gridX: Math.max(1, Math.min(dimensions.gridW, gridX)),
-      gridY: Math.max(1, Math.min(dimensions.gridH, gridY))
-    };
-  };
-
-  const handleMouseDown = (e: MouseEvent, cardEl: HTMLElement) => {
-    if (!store.state.isEditing || !store.state.editingLayer) return;
-
-    const { gridX, gridY } = calculateGridCoords(e, cardEl, store.state.dimensions);
-
-    store.actions.setSelectStart({ x: gridX, y: gridY });
-    store.actions.setSelectEnd({ x: gridX, y: gridY });
-    store.actions.setIsSelecting(true);
-  };
-
-  const handleMouseMove = (e: MouseEvent, cardEl: HTMLElement) => {
-    if (!store.state.isSelecting) return;
-
-    const { gridX, gridY } = calculateGridCoords(e, cardEl, store.state.dimensions);
-
-    store.actions.setSelectEnd({ x: gridX, y: gridY });
-  };
-
-  const handleMouseUp = () => {
-    if (!store.state.isSelecting || !store.state.editingLayer) return;
-
-    const start = store.state.selectStart!;
-    const end = store.state.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);
-
-    store.actions.updateLayerPosition(x1, y1, x2, y2);
-    store.actions.cancelSelection();
-  };
-
-  return {
-    onMouseDown: handleMouseDown,
-    onMouseMove: handleMouseMove,
-    onMouseUp: handleMouseUp,
-    onMouseLeave: handleMouseUp
-  };
-}
-
-/**
- * 计算框选区域的样式
- */
-export function getSelectionBoxStyle(
-    selectStart: { x: number; y: number } | null,
-    selectEnd: { x: number; y: number } | null,
-    dims: { gridOriginX: number; gridOriginY: number; cellWidth: number; cellHeight: number } | null
-): { left: string; top: string; width: string; height: string } | null {
-  if (!selectStart || !selectEnd || !dims) return null;
-
-  const x1 = Math.min(selectStart.x, selectEnd.x);
-  const y1 = Math.min(selectStart.y, selectEnd.y);
-  const x2 = Math.max(selectStart.x, selectEnd.x);
-  const y2 = Math.max(selectStart.y, selectEnd.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 {
-    left: `${left}mm`,
-    top: `${top}mm`,
-    width: `${width}mm`,
-    height: `${height}mm`
-  };
-}

src/components/md-deck/index.tsx

@@ -1,135 +0,0 @@
-import { customElement, noShadowDOM } from 'solid-element';
-import { Show, createEffect, onCleanup } from 'solid-js';
-import { resolvePath } from '../utils/path';
-import { createDeckStore } from './hooks/deckStore';
-import { DeckHeader } from './DeckHeader';
-import { DeckContent } from './DeckContent';
-import {DataEditorPanel, LayerEditorPanel, PropertiesEditorPanel} from './editor-panel';
-
-interface DeckProps {
-  size?: string;
-  sizeW?: number;
-  sizeH?: number;
-  grid?: string;
-  gridW?: number;
-  gridH?: number;
-  bleed?: number | string;
-  padding?: number | string;
-  fontSize?: number;
-  layers?: string;
-  fixed?: boolean | string;
-}
-
-customElement<DeckProps>('md-deck', {
-  size: '',
-  sizeW: 54,
-  sizeH: 86,
-  grid: '',
-  gridW: 5,
-  gridH: 8,
-  bleed: 1,
-  padding: 2,
-  fontSize: 3,
-  layers: '',
-  fixed: false
-}, (props, { element }) => {
-  noShadowDOM();
-
-  // 从 element 的 textContent 获取 CSV 路径
-  const csvPath = 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, csvPath);
-
-  // 创建 store 并加载数据
-  const store = createDeckStore(resolvedSrc, (props.layers as string) || '');
-
-  // 解析 size 属性（支持旧格式 "54x86" 和新格式）
-  if (props.size && props.size.includes('x')) {
-    const [w, h] = props.size.split('x').map(Number);
-    store.actions.setSizeW(w);
-    store.actions.setSizeH(h);
-  } else {
-    store.actions.setSizeW(props.sizeW ?? 54);
-    store.actions.setSizeH(props.sizeH ?? 86);
-  }
-
-  // 解析 grid 属性（支持旧格式 "5x8" 和新格式）
-  if (props.grid && props.grid.includes('x')) {
-    const [w, h] = props.grid.split('x').map(Number);
-    store.actions.setGridW(w);
-    store.actions.setGridH(h);
-  } else {
-    store.actions.setGridW(props.gridW ?? 5);
-    store.actions.setGridH(props.gridH ?? 8);
-  }
-
-  // 解析 bleed 和 padding（支持旧字符串格式和新数字格式）
-  if (typeof props.bleed === 'string') {
-    store.actions.setBleed(Number(props.bleed));
-  } else {
-    store.actions.setBleed(props.bleed ?? 1);
-  }
-  
-  if (typeof props.padding === 'string') {
-    store.actions.setPadding(Number(props.padding));
-  } else {
-    store.actions.setPadding(props.padding ?? 2);
-  }
-  
-  store.actions.setFontSize(props.fontSize ?? 3);
-
-  // 加载 CSV 数据
-  store.actions.loadCardsFromPath(resolvedSrc, (props.layers as string) || '');
-
-  // 清理函数
-  onCleanup(() => {
-    store.actions.clearError();
-  });
-
-  return (
-    <div class="md-deck flex gap-4">
-      {/* 左侧：CSV 数据编辑 */}
-      {/*<Show when={store.state.isEditing && !store.state.fixed}>*/}
-      {/*  <DataEditorPanel*/}
-      {/*    activeTab={store.state.activeTab}*/}
-      {/*    cards={store.state.cards}*/}
-      {/*    updateCardData={store.actions.updateCardData}*/}
-      {/*  />*/}
-      {/*</Show>*/}
-
-      <Show when={store.state.isEditing && !store.state.fixed}>
-        <div class="flex-1">
-          <PropertiesEditorPanel store={store} />
-        </div>
-      </Show>
-
-      {/* 中间：卡牌预览和控制 */}
-      <div class="flex-1">
-        {/* Tab 选择器和编辑按钮 */}
-        <Show when={store.state.cards.length > 0 && !store.state.error}>
-          <DeckHeader store={store} />
-        </Show>
-
-        {/* 内容区域：错误/加载/卡牌预览/空状态 */}
-        <DeckContent store={store} isLoading={store.state.isLoading} />
-      </div>
-
-      {/* 右侧：属性/图层编辑面板 */}
-      <Show when={store.state.isEditing && !store.state.fixed}>
-        <div class="flex-1">
-          <LayerEditorPanel store={store} />
-        </div>
-      </Show>
-    </div>
-  );
-});

src/components/md-deck/types.ts

@@ -1,40 +0,0 @@
-export interface CardData {
-  [key: string]: string;
-}
-
-export interface Layer {
-  prop: string;
-  x1: number;
-  y1: number;
-  x2: number;
-  y2: number;
-}
-
-export interface LayerConfig {
-  prop: string;
-  visible: boolean;
-  x1: number;
-  y1: number;
-  x2: number;
-  y2: number;
-}
-
-export interface Dimensions {
-  cardWidth: number;
-  cardHeight: number;
-  gridAreaWidth: number;
-  gridAreaHeight: number;
-  cellWidth: number;
-  cellHeight: number;
-  gridW: number;
-  gridH: number;
-  gridOriginX: number;
-  gridOriginY: number;
-  fontSize: number;
-}
-
-export interface SelectionState {
-  isSelecting: boolean;
-  selectStart: { x: number; y: number } | null;
-  selectEnd: { x: number; y: number } | null;
-}

src/components/md-link.tsx

@@ -2,7 +2,7 @@ import { customElement, noShadowDOM } from "solid-element";
 import { createSignal, onCleanup } from "solid-js";
 import { render } from "solid-js/web";
 import { Article } from "./Article";
-import { resolvePath } from "./utils/path";
+import { resolvePath } from "../utils/path";
 
 customElement("md-link", {}, (props, { element }) => {
   noShadowDOM();
@@ -11,7 +11,7 @@ customElement("md-link", {}, (props, { element }) => {
   const [expanded, setExpanded] = createSignal(false);
   let articleContainer: HTMLDivElement | undefined;
   let disposeArticle: (() => void) | null = null;
-  let articleElement: HTMLElement | null | undefined;
+  let articleElement: HTMLElement | undefined;
 
   // 从 element 的 textContent 获取链接目标（支持 path#section 语法）
   const rawLinkSrc = element?.textContent?.trim() || "";

src/components/md-pins.tsx

@@ -1,22 +1,78 @@
 import { customElement, noShadowDOM } from "solid-element";
-import {Show, For, createResource, createMemo, createSignal} from "solid-js";
+import { createSignal, onMount, onCleanup, Show, For, createResource, createMemo } from "solid-js";
-import { resolvePath } from "./utils/path";
+import { resolvePath } from "../utils/path";
-import { createPinsStore } from "./stores/pinsStore";
+
+interface Pin {
+  x: number;
+  y: number;
+  label: string;
+}
+
+// 生成标签 A-Z, AA-ZZ, AAA-ZZZ ...
+function generateLabel(index: number): string {
+  const labels: string[] = [];
+  let num = index;
+  
+  do {
+    const remainder = num % 26;
+    labels.unshift(String.fromCharCode(65 + remainder));
+    num = Math.floor(num / 26) - 1;
+  } while (num >= 0);
+  
+  return labels.join('');
+}
+
+// 解析 pins 字符串 "A:30,40 B:10,30" -> Pin[]
+function parsePins(pinsStr: string): Pin[] {
+  if (!pinsStr) return [];
+  
+  const pins: Pin[] = [];
+  const regex = /([A-Z]+):(\d+),(\d+)/g;
+  let match;
+  
+  while ((match = regex.exec(pinsStr)) !== null) {
+    pins.push({
+      label: match[1],
+      x: parseInt(match[2]),
+      y: parseInt(match[3])
+    });
+  }
+  
+  return pins;
+}
+
+// 格式化 pins 为字符串 "A:30,40 B:10,30"
+function formatPins(pins: Pin[]): string {
+  return pins.map(pin => `${pin.label}:${pin.x},${pin.y}`).join(' ');
+}
+
+// 找到最早未使用的标签
+function findNextUnusedLabel(pins: Pin[]): string {
+  const usedLabels = new Set(pins.map(p => p.label));
+  
+  let index = 0;
+  while (true) {
+    const label = generateLabel(index);
+    if (!usedLabels.has(label)) {
+      return label;
+    }
+    index++;
+    if (index > 10000) break; // 安全限制
+  }
+  
+  return generateLabel(pins.length);
+}
 
 customElement("md-pins", { pins: "", fixed: false }, (props, { element }) => {
   noShadowDOM();
 
+  const [pins, setPins] = createSignal<Pin[]>([]);
   const [showToast, setShowToast] = createSignal(false);
-
+  let editorContainer: HTMLDivElement | undefined;
-  // 创建 store
-  const store = createPinsStore(props.pins, props.fixed);
 
   // 从 element 的 textContent 获取图片路径
   const rawSrc = element?.textContent?.trim() || '';
 
-  // 设置 rawSrc 到 store
-  store.setRawSrc(rawSrc);
-
   // 隐藏原始文本内容
   if (element) {
     element.textContent = "";
@@ -42,12 +98,22 @@ customElement("md-pins", { pins: "", fixed: false }, (props, { element }) => {
   const [image] = createResource(resolvedSrc, loadImage);
   const visible = createMemo(() => !image.loading && !!image());
 
+  // 从 props.pins 初始化 pins
+  onMount(() => {
+    if (props.pins) {
+      const parsed = parsePins(props.pins);
+      if (parsed.length > 0) {
+        setPins(parsed);
+      }
+    }
+  });
+
   // 添加 pin
   const addPin = (e: MouseEvent) => {
     e.preventDefault();
     e.stopPropagation();
 
-    if (props.fixed) return;
+    if (isFixed()) return;
 
     const imgRect = (e.target as Element).getBoundingClientRect();
     const clickX = ((e.clientX - imgRect.left) / imgRect.width) * 100;
@@ -55,8 +121,9 @@ customElement("md-pins", { pins: "", fixed: false }, (props, { element }) => {
 
     const x = Math.round(clickX);
     const y = Math.round(clickY);
+    const label = findNextUnusedLabel(pins());
 
-    store.addPin(x, y);
+    setPins([...pins(), { x, y, label }]);
   };
 
   // 删除 pin
@@ -64,14 +131,15 @@ customElement("md-pins", { pins: "", fixed: false }, (props, { element }) => {
     e.preventDefault();
     e.stopPropagation();
     
-    if (props.fixed) return;
+    if (isFixed()) return;
     
-    store.removePin(index);
+    setPins(pins().filter((_, i) => i !== index));
   };
 
   // 复制所有 pin 为 :md-editor-pin 格式
   const copyPins = () => {
-    const text = store.getCopyText();
+    const pinsStr = formatPins(pins());
+    const text = `:md-pins[${rawSrc}]{pins="${pinsStr}" fixed}`;
 
     navigator.clipboard.writeText(text).then(() => {
       setShowToast(true);
@@ -81,24 +149,26 @@ customElement("md-pins", { pins: "", fixed: false }, (props, { element }) => {
     });
   };
 
+  const isFixed = () => props.fixed;
+
   return (
-    <div>
+    <div ref={editorContainer}>
-      <Show when={visible()}>
+      <Show when={visible() && image()}>
         {/* 图片容器 */}
         <div class="relative" onClick={addPin}>
           {/* 显示图片 */}
           <img src={resolvedSrc} alt="" class="inset-0" />
           
           {/* 透明遮罩层 */}
-          <Show when={!props.fixed}>
+          <Show when={!isFixed()}>
             <div class="absolute inset-0 bg-transparent hover:bg-black/10 transition-colors cursor-crosshair" />
           </Show>
-          <Show when={props.fixed}>
+          <Show when={isFixed()}>
             <div class="absolute inset-0 pointer-events-none" />
           </Show>
 
           {/* 复制按钮 HUD */}
-          <Show when={!props.fixed}>
+          <Show when={!isFixed()}>
             <div class="absolute top-2 right-2 z-20">
               <button
                 onClick={(e) => {
@@ -114,19 +184,19 @@ customElement("md-pins", { pins: "", fixed: false }, (props, { element }) => {
           </Show>
 
           {/* Pin 列表 */}
-          <For each={store.state.pins}>
+          <For each={pins()}>
             {(pin, index) => (
               <span
                 onClick={(e) => removePin(index(), e)}
                 class={`absolute transform -translate-x-1/2 -translate-y-1/2 pointer-events-auto
                        bg-red-500 text-white text-xs font-bold rounded-full w-6 h-6
                        flex items-center justify-center shadow-lg
-                       ${!props.fixed ? 'cursor-pointer hover:bg-red-600 hover:scale-110 transition-all z-10' : 'cursor-default z-10'}`}
+                       ${!isFixed() ? 'cursor-pointer hover:bg-red-600 hover:scale-110 transition-all z-10' : 'cursor-default z-10'}`}
                 style={{
                   left: `${pin.x}%`,
                   top: `${pin.y}%`
                 }}
-                title={props.fixed ? `(${pin.x}, ${pin.y})` : `点击删除 (${pin.x}, ${pin.y})`}
+                title={isFixed() ? `(${pin.x}, ${pin.y})` : `点击删除 (${pin.x}, ${pin.y})`}
               >
                 {pin.label}
               </span>
@@ -138,7 +208,7 @@ customElement("md-pins", { pins: "", fixed: false }, (props, { element }) => {
       {/* Toast 提示 */}
       <Show when={showToast()}>
         <div class="fixed bottom-4 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white px-4 py-2 rounded shadow-lg text-sm z-50">
-          已复制 {store.state.pins.length} 个 pin 坐标
+          已复制 {pins().length} 个 pin 坐标
         </div>
       </Show>
     </div>

src/components/stores/pinsStore.ts

@@ -1,107 +0,0 @@
-import { createStore } from "solid-js/store";
-
-export interface Pin {
-  x: number;
-  y: number;
-  label: string;
-}
-
-interface PinsState {
-  pins: Pin[];
-  rawSrc: string;
-  isFixed: boolean;
-}
-
-// 生成标签 A-Z, AA-ZZ, AAA-ZZZ ...
-export function generateLabel(index: number): string {
-  const labels: string[] = [];
-  let num = index;
-
-  do {
-    const remainder = num % 26;
-    labels.unshift(String.fromCharCode(65 + remainder));
-    num = Math.floor(num / 26) - 1;
-  } while (num >= 0);
-
-  return labels.join('');
-}
-
-// 解析 pins 字符串 "A:30,40 B:10,30" -> Pin[]
-export function parsePins(pinsStr: string): Pin[] {
-  if (!pinsStr) return [];
-
-  const pins: Pin[] = [];
-  const regex = /([A-Z]+):(\d+),(\d+)/g;
-  let match;
-
-  while ((match = regex.exec(pinsStr)) !== null) {
-    pins.push({
-      label: match[1],
-      x: parseInt(match[2]),
-      y: parseInt(match[3])
-    });
-  }
-
-  return pins;
-}
-
-// 格式化 pins 为字符串 "A:30,40 B:10,30"
-export function formatPins(pins: Pin[]): string {
-  return pins.map(pin => `${pin.label}:${pin.x},${pin.y}`).join(' ');
-}
-
-// 找到最早未使用的标签
-export function findNextUnusedLabel(pins: Pin[]): string {
-  const usedLabels = new Set(pins.map(p => p.label));
-
-  let index = 0;
-  while (true) {
-    const label = generateLabel(index);
-    if (!usedLabels.has(label)) {
-      return label;
-    }
-    index++;
-    if (index > 10000) break; // 安全限制
-  }
-
-  return generateLabel(pins.length);
-}
-
-// 创建 store 实例
-export function createPinsStore(initialPinsStr: string = "", initialFixed: boolean = false) {
-  const [state, setState] = createStore<PinsState>({
-    pins: parsePins(initialPinsStr),
-    rawSrc: "",
-    isFixed: initialFixed
-  });
-
-  const setRawSrc = (src: string) => {
-    setState("rawSrc", src);
-  };
-
-  const addPin = (x: number, y: number) => {
-    const label = findNextUnusedLabel(state.pins);
-    setState("pins", [...state.pins, { x, y, label }]);
-  };
-
-  const removePin = (index: number) => {
-    setState("pins", state.pins.filter((_, i) => i !== index));
-  };
-
-  const formatCurrentPins = () => formatPins(state.pins);
-
-  const getCopyText = () => {
-    const pinsStr = formatCurrentPins();
-    return `:md-pins[${state.rawSrc}]{pins="${pinsStr}" fixed}`;
-  };
-
-  return {
-    state,
-    setState,
-    setRawSrc,
-    addPin,
-    removePin,
-    formatCurrentPins,
-    getCopyText
-  };
-}

src/components/table.tsx

@@ -1,20 +1,19 @@
 import { customElement, noShadowDOM } from 'solid-element';
 import { createSignal, For, Show, createEffect, createMemo, createResource } from 'solid-js';
+import { parse } from 'csv-parse/browser/esm/sync';
 import { marked } from '../markdown';
-import { resolvePath } from './utils/path';
+import { resolvePath } from '../utils/path';
-import { loadCSV } from './utils/csv-loader';
-
-export interface TableProps {
-  roll?: boolean;
-  remix?: boolean;
-}
 
 interface TableRow {
   label: string;
   body: string;
+  group?: string;
   [key: string]: string;
 }
 
+// 全局缓存已加载的 CSV 内容
+const csvCache = new Map<string, TableRow[]>();
+
 customElement('md-table', { roll: false, remix: false }, (props, { element }) => {
   noShadowDOM();
   const [rows, setRows] = createSignal<TableRow[]>([]);
@@ -38,6 +37,26 @@ customElement('md-table', { roll: false, remix: false }, (props, { element }) =>
   // 解析相对路径
   const resolvedSrc = resolvePath(articlePath, src);
 
+  // 加载 CSV 文件的函数
+  const loadCSV = async (path: string): Promise<TableRow[]> => {
+    // 先从缓存获取
+    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 TableRow[];
+    // 缓存结果
+    csvCache.set(path, result);
+    return result;
+  };
+
   // 使用 createResource 加载 CSV，自动响应路径变化并避免重复加载
   const [csvData] = createResource(() => resolvedSrc, loadCSV);
 
@@ -45,7 +64,7 @@ customElement('md-table', { roll: false, remix: false }, (props, { element }) =>
   createEffect(() => {
     const data = csvData();
     if (data) {
-      setRows(data as any[]);
+      setRows(data);
     }
   });
 

src/components/utils/csv-loader.ts

@@ -1,29 +0,0 @@
-import { parse } from 'csv-parse/browser/esm/sync';
-
-/**
- * 全局缓存已加载的 CSV 内容
- */
-const csvCache = new Map<string, Record<string, string>[]>();
-
-/**
- * 加载 CSV 文件
- * @template T 返回数据的类型，默认为 Record<string, string>
- */
-export async function loadCSV<T = Record<string, string>>(path: string): Promise<T[]> {
-  if (csvCache.has(path)) {
-    return csvCache.get(path)! as T[];
-  }
-
-  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 Record<string, string>[];
-  csvCache.set(path, result);
-  return result as T[];
-}

src/utils/index.ts

@@ -0,0 +1 @@
+export { resolvePath } from './path';