53 lines
1.6 KiB
TypeScript
53 lines
1.6 KiB
TypeScript
import { Component, createMemo, createSignal } from "solid-js";
|
|
import { useLocation } from "@solidjs/router";
|
|
|
|
// 导入组件以注册自定义元素
|
|
import "./components";
|
|
import { Article, MobileSidebar, DesktopSidebar } from "./components";
|
|
|
|
const App: Component = () => {
|
|
const location = useLocation();
|
|
const [isSidebarOpen, setIsSidebarOpen] = createSignal(false);
|
|
|
|
const currentPath = createMemo(() => {
|
|
// 根据路由加载对应的 markdown 文件
|
|
let path = decodeURIComponent(location.pathname);
|
|
|
|
if (!path) path = "/content/";
|
|
if (path.endsWith("/")) path += "index";
|
|
if (!path.endsWith(".md")) path += ".md";
|
|
|
|
return path;
|
|
});
|
|
|
|
return (
|
|
<div class="min-h-screen bg-gray-50">
|
|
{/* 桌面端固定侧边栏 */}
|
|
<DesktopSidebar />
|
|
{/* 移动端抽屉式侧边栏 */}
|
|
<MobileSidebar
|
|
isOpen={isSidebarOpen()}
|
|
onClose={() => setIsSidebarOpen(false)}
|
|
/>
|
|
<header class="fixed top-0 left-0 right-0 bg-white shadow z-30">
|
|
<div class="max-w-4xl mx-auto px-4 py-4 flex items-center gap-4">
|
|
{/* 仅在移动端显示菜单按钮 */}
|
|
<button
|
|
onClick={() => setIsSidebarOpen(true)}
|
|
class="md:hidden text-gray-600 hover:text-gray-900 p-1 rounded hover:bg-gray-100"
|
|
title="目录"
|
|
>
|
|
☰
|
|
</button>
|
|
<h1 class="text-2xl font-bold text-gray-900">TTRPG Tools</h1>
|
|
</div>
|
|
</header>
|
|
<main class="max-w-4xl mx-auto px-4 py-8 pt-20 md:ml-64">
|
|
<Article src={currentPath()} />
|
|
</main>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default App;
|