feat: groupin
This commit is contained in:
+96
-26
@@ -1,11 +1,12 @@
|
||||
import { customElement, noShadowDOM } from 'solid-element';
|
||||
import { createSignal, For, Show, createEffect } from 'solid-js';
|
||||
import { createSignal, For, Show, createEffect, createMemo } from 'solid-js';
|
||||
import { parse } from 'csv-parse/browser/esm/sync';
|
||||
import { marked } from '../markdown';
|
||||
|
||||
interface TableRow {
|
||||
label: string;
|
||||
body: string;
|
||||
group?: string;
|
||||
[key: string]: string;
|
||||
}
|
||||
|
||||
@@ -13,12 +14,13 @@ customElement('md-table', { roll: false, remix: false }, (props, { element }) =>
|
||||
noShadowDOM();
|
||||
const [rows, setRows] = createSignal<TableRow[]>([]);
|
||||
const [activeTab, setActiveTab] = createSignal(0);
|
||||
const [activeGroup, setActiveGroup] = createSignal<string | null>(null);
|
||||
const [loaded, setLoaded] = createSignal(false);
|
||||
const [bodyHtml, setBodyHtml] = createSignal('');
|
||||
|
||||
// 从 element 的 textContent 获取 CSV 路径
|
||||
const src = element?.textContent?.trim() || '';
|
||||
|
||||
|
||||
// 隐藏原始文本内容
|
||||
if (element) {
|
||||
element.textContent = '';
|
||||
@@ -68,10 +70,37 @@ customElement('md-table', { roll: false, remix: false }, (props, { element }) =>
|
||||
loadCSV();
|
||||
}
|
||||
|
||||
// 检测是否有 group 列
|
||||
const hasGroup = createMemo(() => {
|
||||
const allRows = rows();
|
||||
return allRows.length > 0 && 'group' in allRows[0];
|
||||
});
|
||||
|
||||
// 获取所有分组
|
||||
const groups = createMemo(() => {
|
||||
if (!hasGroup()) return [];
|
||||
const allRows = rows();
|
||||
const groupSet = new Set<string>();
|
||||
for (const row of allRows) {
|
||||
if (row.group) {
|
||||
groupSet.add(row.group);
|
||||
}
|
||||
}
|
||||
return Array.from(groupSet).sort();
|
||||
});
|
||||
|
||||
// 根据当前选中的分组过滤行
|
||||
const filteredRows = createMemo(() => {
|
||||
const allRows = rows();
|
||||
const group = activeGroup();
|
||||
if (!group) return allRows;
|
||||
return allRows.filter(row => row.group === group);
|
||||
});
|
||||
|
||||
// 处理 body 内容中的 {{prop}} 语法并解析 markdown
|
||||
const processBody = (body: string, currentRow: TableRow): string => {
|
||||
let processedBody = body;
|
||||
|
||||
|
||||
if (!props.remix) {
|
||||
// 不启用 remix 时，只替换当前行的引用
|
||||
processedBody = body.replace(/\{\{(\w+)\}\}/g, (_, key) => currentRow[key] || '');
|
||||
@@ -82,62 +111,103 @@ customElement('md-table', { roll: false, remix: false }, (props, { element }) =>
|
||||
return randomRow?.[key] || '';
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// 使用 marked 解析 markdown
|
||||
return marked.parse(processedBody) as string;
|
||||
};
|
||||
|
||||
// 更新 body 内容
|
||||
const updateBodyContent = () => {
|
||||
if (loaded() && rows().length > 0) {
|
||||
const currentRow = rows()[activeTab()];
|
||||
const filtered = filteredRows();
|
||||
if (loaded() && filtered.length > 0) {
|
||||
const index = Math.min(activeTab(), filtered.length - 1);
|
||||
const currentRow = filtered[index];
|
||||
setBodyHtml(processBody(currentRow.body, currentRow));
|
||||
}
|
||||
};
|
||||
|
||||
// 监听 activeTab 变化并更新内容
|
||||
// 监听 activeTab 和 activeGroup 变化并更新内容
|
||||
createEffect(() => {
|
||||
activeTab();
|
||||
activeGroup();
|
||||
updateBodyContent();
|
||||
});
|
||||
|
||||
// 切换分组时重置 tab 索引
|
||||
const handleGroupChange = (group: string | null) => {
|
||||
setActiveGroup(group);
|
||||
setActiveTab(0);
|
||||
};
|
||||
|
||||
// 随机切换 tab
|
||||
const handleRoll = () => {
|
||||
const randomIndex = Math.floor(Math.random() * rows().length);
|
||||
const randomIndex = Math.floor(Math.random() * filteredRows().length);
|
||||
setActiveTab(randomIndex);
|
||||
};
|
||||
|
||||
return (
|
||||
<div class="ttrpg-table">
|
||||
<div class="flex items-center gap-2 border-b border-gray-200">
|
||||
<Show when={props.roll}>
|
||||
<button
|
||||
onClick={handleRoll}
|
||||
class="text-gray-500 hover:text-gray-700"
|
||||
title="随机切换"
|
||||
>
|
||||
🎲
|
||||
</button>
|
||||
</Show>
|
||||
<div class="flex gap-2">
|
||||
<For each={rows()}>
|
||||
{(row, index) => (
|
||||
<div class="flex flex-col w-full">
|
||||
{/* 分组 tabs */}
|
||||
<Show when={hasGroup()}>
|
||||
<div class="flex gap-2 border-b border-gray-100 pb-2">
|
||||
<button
|
||||
onClick={() => setActiveTab(index())}
|
||||
onClick={() => handleGroupChange(null)}
|
||||
class={`font-medium transition-colors ${
|
||||
activeTab() === index()
|
||||
activeGroup() === null
|
||||
? 'text-blue-600 border-b-2 border-blue-600'
|
||||
: 'text-gray-500 hover:text-gray-700'
|
||||
}`}
|
||||
>
|
||||
{row.label}
|
||||
全部
|
||||
</button>
|
||||
)}
|
||||
</For>
|
||||
<For each={groups()}>
|
||||
{(group) => (
|
||||
<button
|
||||
onClick={() => handleGroupChange(group)}
|
||||
class={`font-medium transition-colors ${
|
||||
activeGroup() === group
|
||||
? 'text-blue-600 border-b-2 border-blue-600'
|
||||
: 'text-gray-500 hover:text-gray-700'
|
||||
}`}
|
||||
>
|
||||
{group}
|
||||
</button>
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
</Show>
|
||||
{/* 内容 tabs */}
|
||||
<div class="flex gap-2">
|
||||
<Show when={props.roll}>
|
||||
<button
|
||||
onClick={handleRoll}
|
||||
class="text-gray-500 hover:text-gray-700"
|
||||
title="随机切换"
|
||||
>
|
||||
🎲
|
||||
</button>
|
||||
</Show>
|
||||
<For each={filteredRows()}>
|
||||
{(row, index) => (
|
||||
<button
|
||||
onClick={() => setActiveTab(index())}
|
||||
class={`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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-1 prose max-w-none">
|
||||
<Show when={loaded() && rows().length > 0}>
|
||||
<Show when={loaded() && filteredRows().length > 0}>
|
||||
<div innerHTML={bodyHtml()} />
|
||||
</Show>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user