- 创建 Next.js + TypeScript + Tailwind CSS Web 应用 - 支持 Markdown 渲染和 GFM 格式 - 支持 Obsidian 风格 wiki 链接 [[Page|Label]] - 侧边栏导航,按分类组织页面 - 图片资源支持(通过 API 路由从 wiki/assets 提供) - 响应式设计 - 更新 README 添加 Web 应用使用说明
62 lines
2.0 KiB
TypeScript
62 lines
2.0 KiB
TypeScript
import Link from "next/link";
|
|
import { getAllPages } from "@/lib/wiki";
|
|
import { Sidebar } from "@/components/Sidebar";
|
|
|
|
export default async function Home() {
|
|
const pages = await getAllPages();
|
|
const indexPage = pages.find(p => p.slug === "INDEX");
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gray-50">
|
|
{/* Header */}
|
|
<header className="bg-white border-b border-gray-200 sticky top-0 z-10">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="flex items-center justify-between h-16">
|
|
<Link href="/" className="text-xl font-bold text-gray-900">
|
|
WikiLLM
|
|
</Link>
|
|
<nav className="flex items-center space-x-4">
|
|
<Link
|
|
href="/"
|
|
className="text-gray-600 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium"
|
|
>
|
|
首页
|
|
</Link>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
|
<div className="grid grid-cols-1 lg:grid-cols-4 gap-8">
|
|
{/* Sidebar */}
|
|
<aside className="lg:col-span-1">
|
|
<Sidebar pages={pages} />
|
|
</aside>
|
|
|
|
{/* Main content */}
|
|
<main className="lg:col-span-3">
|
|
<div className="bg-white rounded-lg shadow-sm p-8">
|
|
{indexPage ? (
|
|
<div
|
|
className="prose-wikillm"
|
|
dangerouslySetInnerHTML={{ __html: indexPage.html }}
|
|
/>
|
|
) : (
|
|
<div>
|
|
<h1 className="text-3xl font-bold mb-6 text-gray-900">
|
|
欢迎来到 WikiLLM 知识库
|
|
</h1>
|
|
<p className="text-gray-600 mb-4">
|
|
请从侧边栏选择一个页面开始浏览。
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|