92 lines
3.8 KiB
TypeScript
92 lines
3.8 KiB
TypeScript
|
|
// File: frontend/app/layout.tsx
|
|
// Description: 全局根布局文件，包含 HTML 结构和侧边栏导航
|
|
|
|
import type { Metadata } from "next";
|
|
import { Geist, Geist_Mono } from "next/font/google";
|
|
import Link from "next/link";
|
|
import { BotMessageSquare, Workflow, Database, Settings, Users } from "lucide-react"; // 添加 Users 图标
|
|
|
|
import "./../styles/globals.css"; // 确保正确引入全局样式
|
|
|
|
// 配置 Inter 字体
|
|
const geistSans = Geist({
|
|
variable: "--font-geist-sans",
|
|
subsets: ["latin"],
|
|
});
|
|
|
|
const geistMono = Geist_Mono({
|
|
variable: "--font-geist-mono",
|
|
subsets: ["latin"],
|
|
});
|
|
|
|
// 定义应用元数据
|
|
export const metadata: Metadata = {
|
|
title: "CherryAI",
|
|
description: "AI 对话、工作流与 RAG 平台",
|
|
};
|
|
|
|
// 定义导航链接项
|
|
const navItems = [
|
|
{ name: "对话", href: "/chat", icon: BotMessageSquare },
|
|
{ name: "助手", href: "/assistants", icon: Users }, // 将助手管理移到这里
|
|
{ name: "工作流", href: "/workflow", icon: Workflow },
|
|
{ name: "知识库", href: "/knowledge", icon: Database },
|
|
{ name: "设置", href: "/settings", icon: Settings }, // 添加设置示例
|
|
];
|
|
|
|
// 根布局组件
|
|
export default function RootLayout({
|
|
children,
|
|
}: Readonly<{
|
|
children: React.ReactNode;
|
|
}>) {
|
|
return (
|
|
<html lang="zh-CN">
|
|
<body className={`${geistSans.variable} ${geistMono.variable} antialiased flex h-screen bg-gray-100 dark:bg-gray-900`}>
|
|
{/* 侧边栏导航 */}
|
|
<aside className="w-16 bg-white dark:bg-gray-800 p-3 shadow-md flex flex-col items-center"> {/* 调整内边距和对齐 */}
|
|
{/* Logo */}
|
|
<div className="mb-6"> {/* 调整 Logo 边距 */}
|
|
<Link href="/" className="flex items-center justify-center text-3xl font-bold text-red-600 dark:text-red-500" title="CherryAI 主页">
|
|
<span>🍒</span> {/* 只显示图标 */}
|
|
</Link>
|
|
</div>
|
|
{/* 导航链接 */}
|
|
<nav className="flex-grow w-full">
|
|
<ul className="flex flex-col items-center space-y-2"> {/* 调整列表项间距 */}
|
|
{navItems.map((item) => (
|
|
<li key={item.name} className="w-full">
|
|
<Link
|
|
href={item.href}
|
|
className="relative flex items-center justify-center p-2 rounded-lg text-gray-600 dark:text-gray-400 hover:bg-red-100 dark:hover:bg-red-900/50 hover:text-red-700 dark:hover:text-red-400 transition-colors duration-200 group" // 居中图标
|
|
title={item.name} // 保留原生 title
|
|
>
|
|
<item.icon className="h-6 w-6 flex-shrink-0" />
|
|
{/* Tooltip 文字标签 */}
|
|
<span
|
|
className="absolute left-full top-1/2 -translate-y-1/2 ml-3 px-2 py-1 bg-gray-900 dark:bg-gray-700 text-white text-xs rounded shadow-lg opacity-0 group-hover:opacity-100 transition-opacity duration-200 delay-150 whitespace-nowrap pointer-events-none" // 使用 pointer-events-none 避免干扰悬浮
|
|
>
|
|
{item.name}
|
|
</span>
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</nav>
|
|
{/* 侧边栏底部 (可选，放用户头像或设置入口) */}
|
|
<div className="mt-auto">
|
|
<button className="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700" title="用户设置">
|
|
<Settings className="h-6 w-6 text-gray-600 dark:text-gray-400" />
|
|
</button>
|
|
</div>
|
|
</aside>
|
|
|
|
{/* 主内容区域 */}
|
|
<main className="flex-1 overflow-y-auto p-6 bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100">
|
|
{children} {/* 这里会渲染当前路由匹配到的页面组件 */}
|
|
</main>
|
|
</body>
|
|
</html>
|
|
);
|
|
} |