fix: table loading
This commit is contained in:
+6
-2
@@ -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>
|
||||
);
|
||||
|
||||
@@ -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) {
|
||||
|
||||
Reference in New Issue
Block a user