fix: table loading

This commit is contained in:
2026-02-26 01:07:48 +08:00
parent 82daaf255e
commit 3f61e63709
3 changed files with 34 additions and 10 deletions
+6 -2
View File
@@ -8,10 +8,12 @@ import './components';
const App: Component = () => {
const location = useLocation();
const [content, setContent] = createSignal('');
const [currentPath, setCurrentPath] = createSignal('');
onMount(async () => {
// 根据路由加载对应的 markdown 文件
const path = location.pathname.slice(1) || 'index';
setCurrentPath(path);
try {
const response = await fetch(`/content/${path}.md`);
if (response.ok) {
@@ -21,7 +23,7 @@ const App: Component = () => {
setContent('# 欢迎使用 TTRPG Tools\n\n没有找到对应的内容文件。');
}
} catch (error) {
setContent('# 欢迎使用 TTRPG Tools\n\n这是一个 TTRPG 文档工具箱。\n\n## 功能\n\n- 使用 `:dice[2d6+d8]` 插入骰子组件\n- 使用 `:table[./data.csv]` 插入表格组件');
setContent('# 欢迎使用 TTRPG Tools\n\n这是一个 TTRPG 文档工具箱。\n\n## 功能\n\n- 使用 `:md-dice[2d6+d8]` 插入骰子组件\n- 使用 `:md-table[./data.csv]` 插入表格组件');
}
});
@@ -33,7 +35,9 @@ const App: Component = () => {
</div>
</header>
<main class="max-w-4xl mx-auto px-4 py-8">
<article class="prose prose-lg" innerHTML={parseMarkdown(content())} />
<article class="prose prose-lg" data-src={currentPath()}>
<div innerHTML={parseMarkdown(content())} />
</article>
</main>
</div>
);
+23 -3
View File
@@ -8,17 +8,37 @@ interface TableRow {
[key: string]: string;
}
customElement('md-table', { src: '', roll: false, remix: false }, (props, { element }) => {
customElement('md-table', { roll: false, remix: false }, (props, { element }) => {
noShadowDOM();
const [rows, setRows] = createSignal<TableRow[]>([]);
const [activeTab, setActiveTab] = createSignal(0);
const [loaded, setLoaded] = createSignal(false);
// 从 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') || '';
// 解析相对路径
const resolvePath = (base: string, relative: string): string => {
if (relative.startsWith('/')) {
return relative;
}
const baseDir = base.substring(0, base.lastIndexOf('/') + 1);
return baseDir + relative;
};
const resolvedSrc = resolvePath(`/content/${articlePath}`, src);
// 解析 CSV 内容
const parseCSV = (content: string) => {
const records = parse(content, {
columns: true,
skip_empty_lines: true,
comment: '#',
trim: true,
skipEmptyLines: true
});
setRows(records as TableRow[]);
setLoaded(true);
@@ -27,7 +47,7 @@ customElement('md-table', { src: '', roll: false, remix: false }, (props, { elem
// 加载 CSV 文件
const loadCSV = async () => {
try {
const response = await fetch(props.src);
const response = await fetch(resolvedSrc);
const content = await response.text();
parseCSV(content);
} catch (error) {