fix: solid-element

src/components/dice.tsx

@@ -1,9 +1,5 @@
-import { Component, createSignal, Show } from 'solid-js';
-
-export interface DiceProps {
-  formula: string;
-  key?: string;
-}
+import { customElement, noShadowDOM } from 'solid-element';
+import { createSignal } from 'solid-js';
 
 function rollDice(formula: string): number {
   // 解析骰子公式，例如：2d6+d8
@@ -30,10 +26,14 @@ function rollDice(formula: string): number {
   return total;
 }
 
-export const Dice: Component<DiceProps> = (props) => {
+customElement('ttrpg-dice', { key: '' }, (props, { element }) => {
+  noShadowDOM();
   const [result, setResult] = createSignal<number | null>(null);
   const [isRolled, setIsRolled] = createSignal(false);
 
+  // 从 element 的 textContent 获取骰子公式
+  const formula = element?.textContent?.trim() || '';
+
   const handleClick = () => {
     if (isRolled()) {
       // 重置为公式
@@ -41,18 +41,17 @@ export const Dice: Component<DiceProps> = (props) => {
       setIsRolled(false);
     } else {
       // 掷骰子
-      const rollResult = rollDice(props.formula);
+      const rollResult = rollDice(formula);
       setResult(rollResult);
       setIsRolled(true);
     }
   };
 
-  const displayText = () => (isRolled() ? `${result()}` : props.formula);
-  const queryParams = () => (props.key && isRolled() ? `?dice-${props.key}=${result()}` : '');
+  const displayText = () => (isRolled() ? `${result()}` : formula);
 
   return (
     <a
-      href={queryParams()}
+      href={props.key && isRolled() ? `?dice-${props.key}=${result()}` : '#'}
       onClick={(e) => {
         e.preventDefault();
         handleClick();
@@ -63,4 +62,5 @@ export const Dice: Component<DiceProps> = (props) => {
       <span>{displayText()}</span>
     </a>
   );
-};
+});
+

src/components/index.ts

@@ -1,5 +1,8 @@
-export { Dice } from './dice';
-export type { DiceProps } from './dice';
+// 导入以注册自定义元素
+import './dice';
+import './table';
 
-export { Table } from './table';
+// 导出类型
+export type { DiceProps } from './dice';
 export type { TableProps } from './table';
+

src/components/table.tsx

@@ -1,21 +1,18 @@
-import { Component, createSignal, For, Show } from 'solid-js';
+import { customElement, noShadowDOM } from 'solid-element';
+import { createSignal, For, Show } from 'solid-js';
 import { parse } from 'csv-parse/sync';
 
-export interface TableProps {
-  src: string;
-  roll?: boolean;
-  remix?: boolean;
-}
-
 interface TableRow {
   label: string;
   body: string;
   [key: string]: string;
 }
 
-export const Table: Component<TableProps> = (props) => {
+customElement('ttrpg-table', { src: '', roll: false, remix: false }, (props, { element }) => {
+  noShadowDOM();
   const [rows, setRows] = createSignal<TableRow[]>([]);
   const [activeTab, setActiveTab] = createSignal(0);
+  const [loaded, setLoaded] = createSignal(false);
 
   // 解析 CSV 内容
   const parseCSV = (content: string) => {
@@ -24,6 +21,7 @@ export const Table: Component<TableProps> = (props) => {
       skip_empty_lines: true,
     });
     setRows(records as TableRow[]);
+    setLoaded(true);
   };
 
   // 加载 CSV 文件
@@ -34,11 +32,14 @@ export const Table: Component<TableProps> = (props) => {
       parseCSV(content);
     } catch (error) {
       console.error('Failed to load CSV:', error);
+      setLoaded(true);
     }
   };
 
   // 初始化加载
-  loadCSV();
+  if (!loaded()) {
+    loadCSV();
+  }
 
   // 随机切换 tab
   const handleRoll = () => {
@@ -80,12 +81,21 @@ export const Table: Component<TableProps> = (props) => {
             </button>
           )}
         </For>
+        <Show when={props.roll}>
+          <button
+            onClick={handleRoll}
+            class="px-2 py-2 text-gray-500 hover:text-gray-700"
+            title="随机切换"
+          >
+            🎲
+          </button>
+        </Show>
       </div>
       <div class="p-4 prose max-w-none">
-        <Show when={rows().length > 0}>
+        <Show when={loaded() && rows().length > 0}>
           <div innerHTML={processBody(rows()[activeTab()].body, rows()[activeTab()])} />
         </Show>
       </div>
     </div>
   );
-};
+});