fix: table roll

src/components/table.tsx

@@ -1,5 +1,5 @@
 import { customElement, noShadowDOM } from 'solid-element';
-import { createSignal, For, Show } from 'solid-js';
+import { createSignal, For, Show, createEffect } from 'solid-js';
 import { parse } from 'csv-parse/browser/esm/sync';
 
 interface TableRow {
@@ -13,14 +13,15 @@ customElement('md-table', { roll: false, remix: false }, (props, { element }) =>
   const [rows, setRows] = createSignal<TableRow[]>([]);
   const [activeTab, setActiveTab] = createSignal(0);
   const [loaded, setLoaded] = createSignal(false);
+  const [bodyContent, setBodyContent] = createSignal('');
 
   // 从 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') || '';
-  
+
   // 解析相对路径（相对于 markdown 文件所在目录）
   const resolvePath = (base: string, relative: string): string => {
     if (relative.startsWith('/')) {
@@ -29,7 +30,7 @@ customElement('md-table', { roll: false, remix: false }, (props, { element }) =>
     const baseDir = base.substring(0, base.lastIndexOf('/') + 1);
     return baseDir + relative;
   };
-  
+
   const resolvedSrc = resolvePath(articlePath, src);
 
   // 解析 CSV 内容
@@ -61,12 +62,6 @@ customElement('md-table', { roll: false, remix: false }, (props, { element }) =>
     loadCSV();
   }
 
-  // 随机切换 tab
-  const handleRoll = () => {
-    const randomIndex = Math.floor(Math.random() * rows().length);
-    setActiveTab(randomIndex);
-  };
-
   // 处理 body 内容中的 {{prop}} 语法
   const processBody = (body: string, currentRow: TableRow): string => {
     if (!props.remix) {
@@ -81,26 +76,45 @@ customElement('md-table', { roll: false, remix: false }, (props, { element }) =>
     }
   };
 
+  // 更新 body 内容
+  const updateBodyContent = () => {
+    if (loaded() && rows().length > 0) {
+      const currentRow = rows()[activeTab()];
+      setBodyContent(processBody(currentRow.body, currentRow));
+    }
+  };
+
+  // 监听 activeTab 变化并更新内容
+  createEffect(() => {
+    activeTab();
+    updateBodyContent();
+  });
+
+  // 随机切换 tab
+  const handleRoll = () => {
+    const randomIndex = Math.floor(Math.random() * rows().length);
+    setActiveTab(randomIndex);
+  };
+
   return (
     <div class="ttrpg-table">
-      <div class="flex gap-2 border-b border-gray-200">
-        <For each={rows()}>
-          {(row, index) => (
-            <button
-              onClick={() => setActiveTab(index())}
-              class={`px-4 py-2 font-medium transition-colors ${
-                activeTab() === index()
-                  ? 'text-blue-600 border-b-2 border-blue-600'
-                  : 'text-gray-500 hover:text-gray-700'
-              }`}
-            >
-              <Show when={props.roll}>
-                <span class="mr-1">🎲</span>
-              </Show>
-              {row.label}
-            </button>
-          )}
-        </For>
+      <div class="flex items-center gap-2 border-b border-gray-200">
+        <div class="flex gap-2">
+          <For each={rows()}>
+            {(row, index) => (
+              <button
+                onClick={() => setActiveTab(index())}
+                class={`px-4 py-2 font-medium transition-colors ${
+                  activeTab() === index()
+                    ? 'text-blue-600 border-b-2 border-blue-600'
+                    : 'text-gray-500 hover:text-gray-700'
+                }`}
+              >
+                {row.label}
+              </button>
+            )}
+          </For>
+        </div>
         <Show when={props.roll}>
           <button
             onClick={handleRoll}
@@ -113,7 +127,7 @@ customElement('md-table', { roll: false, remix: false }, (props, { element }) =>
       </div>
       <div class="p-4 prose max-w-none">
         <Show when={loaded() && rows().length > 0}>
-          <div innerHTML={processBody(rows()[activeTab()].body, rows()[activeTab()])} />
+          <div innerHTML={bodyContent()} />
         </Show>
       </div>
     </div>