fix: table loading

content/sparks.csv

@@ -1,6 +1,6 @@
 label,body,description,icon
-🔥 火焰火花，你召唤出一朵小小的火焰，可以点燃蜡烛或篝火。,造成 1d4 点火焰伤害。,🔥
-💧 水流，你制造一股水流，可以扑灭小型火焰或弄湿目标。,造成 1d4 点水击伤害。,💧
-🌪️ 旋风，你制造一阵小旋风，可以吹散烟雾或轻小物体。,推开目标 5 尺。,🌪️
-🌱 生长，你让一颗种子迅速发芽，长成小植物。,创造一个小植物障碍。,🌱
-⚡ 电击，你释放一道微弱的电流，可以麻痹目标。,造成 1d4 点闪电伤害。,⚡
+🔥,火焰火花，你召唤出一朵小小的火焰，可以点燃蜡烛或篝火。,造成 1d4 点火焰伤害。,🔥
+💧,水流，你制造一股水流，可以扑灭小型火焰或弄湿目标。,造成 1d4 点水击伤害。,💧
+🌪️, 旋风，你制造一阵小旋风，可以吹散烟雾或轻小物体。,推开目标 5 尺。,
+🌱,生长，你让一颗种子迅速发芽，长成小植物。,创造一个小植物障碍。,🌱
+⚡,电击，你释放一道微弱的电流，可以麻痹目标。,造成 1d4 点闪电伤害。,⚡

src/App.tsx

@@ -8,10 +8,12 @@ import './components';
 const App: Component = () => {
   const location = useLocation();
   const [content, setContent] = createSignal('');
+  const [currentPath, setCurrentPath] = createSignal('');
 
   onMount(async () => {
     // 根据路由加载对应的 markdown 文件
     const path = location.pathname.slice(1) || 'index';
+    setCurrentPath(path);
     try {
       const response = await fetch(`/content/${path}.md`);
       if (response.ok) {
@@ -21,7 +23,7 @@ const App: Component = () => {
         setContent('# 欢迎使用 TTRPG Tools\n\n没有找到对应的内容文件。');
       }
     } catch (error) {
-      setContent('# 欢迎使用 TTRPG Tools\n\n这是一个 TTRPG 文档工具箱。\n\n## 功能\n\n- 使用 `:dice[2d6+d8]` 插入骰子组件\n- 使用 `:table[./data.csv]` 插入表格组件');
+      setContent('# 欢迎使用 TTRPG Tools\n\n这是一个 TTRPG 文档工具箱。\n\n## 功能\n\n- 使用 `:md-dice[2d6+d8]` 插入骰子组件\n- 使用 `:md-table[./data.csv]` 插入表格组件');
     }
   });
 
@@ -33,7 +35,9 @@ const App: Component = () => {
         </div>
       </header>
       <main class="max-w-4xl mx-auto px-4 py-8">
-        <article class="prose prose-lg" innerHTML={parseMarkdown(content())} />
+        <article class="prose prose-lg" data-src={currentPath()}>
+          <div innerHTML={parseMarkdown(content())} />
+        </article>
       </main>
     </div>
   );

src/components/table.tsx

@@ -8,17 +8,37 @@ interface TableRow {
   [key: string]: string;
 }
 
-customElement('md-table', { src: '', roll: false, remix: false }, (props, { element }) => {
+customElement('md-table', { roll: false, remix: false }, (props, { element }) => {
   noShadowDOM();
   const [rows, setRows] = createSignal<TableRow[]>([]);
   const [activeTab, setActiveTab] = createSignal(0);
   const [loaded, setLoaded] = createSignal(false);
 
+  // 从 element 的 textContent 获取 CSV 路径
+  const src = element?.textContent?.trim() || '';
+  
+  // 从父节点 article 的 data-src 获取当前 markdown 文件路径
+  const articleEl = element?.closest('article[data-src]');
+  const articlePath = articleEl?.getAttribute('data-src') || '';
+  
+  // 解析相对路径
+  const resolvePath = (base: string, relative: string): string => {
+    if (relative.startsWith('/')) {
+      return relative;
+    }
+    const baseDir = base.substring(0, base.lastIndexOf('/') + 1);
+    return baseDir + relative;
+  };
+  
+  const resolvedSrc = resolvePath(`/content/${articlePath}`, src);
+
   // 解析 CSV 内容
   const parseCSV = (content: string) => {
     const records = parse(content, {
       columns: true,
-      skip_empty_lines: true,
+      comment: '#',
+      trim: true,
+      skipEmptyLines: true
     });
     setRows(records as TableRow[]);
     setLoaded(true);
@@ -27,7 +47,7 @@ customElement('md-table', { src: '', roll: false, remix: false }, (props, { elem
   // 加载 CSV 文件
   const loadCSV = async () => {
     try {
-      const response = await fetch(props.src);
+      const response = await fetch(resolvedSrc);
       const content = await response.text();
       parseCSV(content);
     } catch (error) {