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

fix: table max width roll scrolling

This commit is contained in:
hypercross 2026-02-26 17:29:39 +08:00
parent d171e7b094
commit 2794b21a41
1 changed files with 7 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/table.tsx
View File

@ -20,6 +20,7 @@ customElement('md-table', { roll: false, remix: false }, (props, { element }) =>
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;
// 从 element 的 textContent 获取 CSV 路径 // 从 element 的 textContent 获取 CSV 路径
const src = element?.textContent?.trim() || ''; const src = element?.textContent?.trim() || '';
@ -140,6 +141,11 @@ customElement('md-table', { roll: false, remix: false }, (props, { element }) =>
const handleRoll = () => { const handleRoll = () => {
const randomIndex = Math.floor(Math.random() * filteredRows().length); const randomIndex = Math.floor(Math.random() * filteredRows().length);
setActiveTab(randomIndex); setActiveTab(randomIndex);
// 滚动到可视区域
setTimeout(() => {
const activeButton = tabsContainer?.querySelector('.border-blue-600');
activeButton?.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' });
}, 50);
}; };
return ( return (
@ -186,7 +192,7 @@ customElement('md-table', { roll: false, remix: false }, (props, { element }) =>
🎲 🎲
</button> </button>
</Show> </Show>
<div class="flex gap-2 overflow-x-auto flex-1 min-w-0"> <div ref={tabsContainer} class="flex gap-2 overflow-x-auto flex-1 min-w-0">
<For each={filteredRows()}> <For each={filteredRows()}>
{(row, index) => ( {(row, index) => (
<button <button