hypercross
/
ttrpg-tools
2
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: Reformat code and update z-index class 

Reformat md-table.tsx to use double quotes and consistent code style.
Change z-index class in PrintPreview from `z-[60]` to `z-60`.
This commit is contained in:
hyper 2026-07-09 16:03:41 +08:00
parent a20063c624
commit c071cad50a
2 changed files with 202 additions and 175 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/md-deck/PrintPreview.tsx
View File

@ -115,7 +115,7 @@ export function PrintPreview(props: PrintPreviewProps) {
<PltPreview pltCode={pltCode()} onClose={handleClosePltPreview} /> <PltPreview pltCode={pltCode()} onClose={handleClosePltPreview} />
} }
> >
<div class="fixed inset-0 bg-black/50 z-[60] overflow-auto"> <div class="fixed inset-0 bg-black/50 z-60 overflow-auto">
<div class="min-h-screen py-20 px-4"> <div class="min-h-screen py-20 px-4">
<PrintPreviewHeader <PrintPreviewHeader
store={store} store={store}

87
src/components/md-table.tsx
View File

@ -1,9 +1,19 @@
import { customElement, noShadowDOM } from 'solid-element'; import { customElement, noShadowDOM } from "solid-element";
import { createSignal, For, Show, createEffect, createMemo, createResource } from 'solid-js'; import {
import { marked } from '../markdown'; createSignal,
import { loadCSV, CSV, processVariables, isCSV } from './utils/csv-loader'; For,
import { resolvePath } from './utils/path'; Show,
import { areAllLabelsNumeric, weightedRandomIndex } from './utils/weighted-random'; createEffect,
createMemo,
createResource,
} from "solid-js";
import { marked } from "../markdown";
import { loadCSV, CSV, processVariables, isCSV } from "./utils/csv-loader";
import { resolvePath } from "./utils/path";
import {
areAllLabelsNumeric,
weightedRandomIndex,
} from "./utils/weighted-random";
export interface TableProps { export interface TableProps {
roll?: boolean; roll?: boolean;
@ -16,28 +26,35 @@ interface TableRow {
[key: string]: string; [key: string]: string;
} }
customElement('md-table', { roll: false, remix: false }, (props, { element }) => { customElement(
"md-table",
{ roll: false, remix: false },
(props, { element }) => {
noShadowDOM(); noShadowDOM();
const [rows, setRows] = createSignal<CSV<TableRow>>([] as unknown as CSV<TableRow>); const [rows, setRows] = createSignal<CSV<TableRow>>(
[] as unknown as CSV<TableRow>,
);
const [activeTab, setActiveTab] = createSignal(0); const [activeTab, setActiveTab] = createSignal(0);
const [activeGroup, setActiveGroup] = createSignal<string | null>(null); const [activeGroup, setActiveGroup] = createSignal<string | null>(null);
const [bodyHtml, setBodyHtml] = createSignal(''); const [bodyHtml, setBodyHtml] = createSignal("");
let tabsContainer: HTMLDivElement | undefined; let tabsContainer: HTMLDivElement | undefined;
// 从 element 的 textContent 获取 CSV 路径或 inline CSV 数据 // 从 element 的 textContent 获取 CSV 路径或 inline CSV 数据
const rawContent = element?.textContent?.trim() || ''; const rawContent = element?.textContent?.trim() || "";
// 隐藏原始文本内容 // 隐藏原始文本内容
if (element) { if (element) {
element.textContent = ''; element.textContent = "";
} }
// 从父节点 article 的 data-src 获取当前 markdown 文件完整路径 // 从父节点 article 的 data-src 获取当前 markdown 文件完整路径
const articleEl = element?.closest('article[data-src]'); const articleEl = element?.closest("article[data-src]");
const articlePath = articleEl?.getAttribute('data-src') || ''; const articlePath = articleEl?.getAttribute("data-src") || "";
// 如果是 inline CSV，直接使用；否则解析相对路径 // 如果是 inline CSV，直接使用；否则解析相对路径
const contentOrPath = isCSV(rawContent) ? rawContent : resolvePath(articlePath, rawContent); const contentOrPath = isCSV(rawContent)
? rawContent
: resolvePath(articlePath, rawContent);
// 使用 createResource 加载 CSV，自动响应路径变化并避免重复加载 // 使用 createResource 加载 CSV，自动响应路径变化并避免重复加载
const [csvData] = createResource(() => contentOrPath, loadCSV); const [csvData] = createResource(() => contentOrPath, loadCSV);
@ -54,7 +71,7 @@ customElement('md-table', { roll: false, remix: false }, (props, { element }) =>
// 检测是否有 group 列 // 检测是否有 group 列
const hasGroup = createMemo(() => { const hasGroup = createMemo(() => {
const allRows = rows(); const allRows = rows();
return allRows.length > 0 && 'group' in allRows[0]; return allRows.length > 0 && "group" in allRows[0];
}); });
// 获取所有分组 // 获取所有分组
@ -75,13 +92,15 @@ customElement('md-table', { roll: false, remix: false }, (props, { element }) =>
const allRows = rows(); const allRows = rows();
const group = activeGroup(); const group = activeGroup();
if (!group) return allRows; if (!group) return allRows;
return allRows.filter(row => row.group === group); return allRows.filter((row) => row.group === group);
}); });
// 处理 body 内容中的 {{prop}} 语法并解析 markdown // 处理 body 内容中的 {{prop}} 语法并解析 markdown
const processBody = (body: string, currentRow: TableRow): string => { const processBody = (body: string, currentRow: TableRow): string => {
// 使用 marked 解析 markdown // 使用 marked 解析 markdown
return marked.parse(processVariables(body, currentRow, rows(), filteredRows(), props.remix)) as string; return marked.parse(
processVariables(body, currentRow, rows(), filteredRows(), props.remix),
) as string;
}; };
// 更新 body 内容 // 更新 body 内容
@ -113,7 +132,7 @@ customElement('md-table', { roll: false, remix: false }, (props, { element }) =>
if (filtered.length === 0) return; if (filtered.length === 0) return;
// 检查所有 label 是否都是整数/整数范围格式 // 检查所有 label 是否都是整数/整数范围格式
const labels = filtered.map(row => row.label); const labels = filtered.map((row) => row.label);
if (areAllLabelsNumeric(labels)) { if (areAllLabelsNumeric(labels)) {
// 使用加权随机 // 使用加权随机
const randomIndex = weightedRandomIndex(labels); const randomIndex = weightedRandomIndex(labels);
@ -128,8 +147,12 @@ customElement('md-table', { roll: false, remix: false }, (props, { element }) =>
// 滚动到可视区域 // 滚动到可视区域
setTimeout(() => { setTimeout(() => {
const activeButton = tabsContainer?.querySelector('.border-blue-600'); const activeButton = tabsContainer?.querySelector(".border-blue-600");
activeButton?.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' }); activeButton?.scrollIntoView({
behavior: "smooth",
block: "nearest",
inline: "nearest",
});
}, 50); }, 50);
}; };
@ -144,8 +167,8 @@ customElement('md-table', { roll: false, remix: false }, (props, { element }) =>
onClick={() => handleGroupChange(null)} onClick={() => handleGroupChange(null)}
class={`font-medium transition-colors ${ class={`font-medium transition-colors ${
activeGroup() === null activeGroup() === null
? 'text-blue-600 border-b-2 border-blue-600' ? "text-blue-600 border-b-2 border-blue-600"
: 'text-gray-500 hover:text-gray-700' : "text-gray-500 hover:text-gray-700"
}`} }`}
> >
全部 全部
@ -156,8 +179,8 @@ customElement('md-table', { roll: false, remix: false }, (props, { element }) =>
onClick={() => handleGroupChange(group)} onClick={() => handleGroupChange(group)}
class={`font-medium transition-colors ${ class={`font-medium transition-colors ${
activeGroup() === group activeGroup() === group
? 'text-blue-600 border-b-2 border-blue-600' ? "text-blue-600 border-b-2 border-blue-600"
: 'text-gray-500 hover:text-gray-700' : "text-gray-500 hover:text-gray-700"
}`} }`}
> >
{group} {group}
@ -171,21 +194,24 @@ customElement('md-table', { roll: false, remix: false }, (props, { element }) =>
<Show when={props.roll}> <Show when={props.roll}>
<button <button
onClick={handleRoll} onClick={handleRoll}
class="text-gray-500 hover:text-gray-700 flex-shrink-0 cursor-pointer" class="text-gray-500 hover:text-gray-700 shrink-0 cursor-pointer"
title="随机切换" title="随机切换"
> >
🎲 🎲
</button> </button>
</Show> </Show>
<div ref={tabsContainer} class="flex gap-1 overflow-x-auto flex-1 min-w-0"> <div
ref={tabsContainer}
class="flex gap-1 overflow-x-auto flex-1 min-w-0"
>
<For each={filteredRows()}> <For each={filteredRows()}>
{(row, index) => ( {(row, index) => (
<button <button
onClick={() => setActiveTab(index())} onClick={() => setActiveTab(index())}
class={`font-medium transition-colors flex-shrink-0 min-w-[1.6em] cursor-pointer ${ class={`font-medium transition-colors shrink-0 min-w-[1.6em] cursor-pointer ${
activeTab() === index() activeTab() === index()
? 'text-blue-600 border-b-2 border-blue-600' ? "text-blue-600 border-b-2 border-blue-600"
: 'text-gray-500 hover:text-gray-700' : "text-gray-500 hover:text-gray-700"
}`} }`}
> >
{row.label} {row.label}
@ -203,4 +229,5 @@ customElement('md-table', { roll: false, remix: false }, (props, { element }) =>
</div> </div>
</div> </div>
); );
}); },
);