feat(layout): 添加应用布局组件
- AppLayout: 主应用布局，包含侧边栏和主内容区 - Sidebar: 侧边栏组件，包含新建对话、聊天历史、用户信息
This commit is contained in:
gaoziman
parent
ee9dc67708
commit
5347bc7c2f
49
src/components/layout/AppLayout.tsx
Normal file
49
src/components/layout/AppLayout.tsx
Normal file
@ -0,0 +1,49 @@
|
||||
'use client';
|
||||
|
||||
import { useState, type ReactNode } from 'react';
|
||||
import { Sidebar, SidebarToggle } from '@/components/layout/Sidebar';
|
||||
import { currentUser, chatHistories } from '@/data/mock';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
interface AppLayoutProps {
|
||||
children: ReactNode;
|
||||
showHeader?: boolean;
|
||||
headerContent?: ReactNode;
|
||||
}
|
||||
|
||||
export function AppLayout({ children, showHeader = true, headerContent }: AppLayoutProps) {
|
||||
const [sidebarOpen, setSidebarOpen] = useState(true);
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen">
|
||||
{/* 侧边栏 */}
|
||||
<Sidebar
|
||||
user={currentUser}
|
||||
chatHistories={chatHistories}
|
||||
isOpen={sidebarOpen}
|
||||
onToggle={() => setSidebarOpen(!sidebarOpen)}
|
||||
/>
|
||||
|
||||
{/* 主内容区 */}
|
||||
<main
|
||||
className={cn(
|
||||
'flex-1 flex flex-col min-h-screen transition-all duration-300',
|
||||
sidebarOpen ? 'ml-[var(--sidebar-width)]' : 'ml-0'
|
||||
)}
|
||||
>
|
||||
{/* Header */}
|
||||
{showHeader && (
|
||||
<header className="h-[var(--header-height)] px-4 flex items-center justify-start">
|
||||
<SidebarToggle onClick={() => setSidebarOpen(!sidebarOpen)} />
|
||||
{headerContent}
|
||||
</header>
|
||||
)}
|
||||
|
||||
{/* Body */}
|
||||
<div className="flex-1 flex flex-col justify-center items-center p-4">
|
||||
{children}
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
107
src/components/layout/Sidebar.tsx
Normal file
107
src/components/layout/Sidebar.tsx
Normal file
@ -0,0 +1,107 @@
|
||||
'use client';
|
||||
|
||||
import Link from 'next/link';
|
||||
import { usePathname } from 'next/navigation';
|
||||
import { Plus, ChevronDown, PanelLeft } from 'lucide-react';
|
||||
import { Avatar } from '@/components/ui/Avatar';
|
||||
import { cn } from '@/lib/utils';
|
||||
import type { ChatHistory, User } from '@/types';
|
||||
|
||||
interface SidebarProps {
|
||||
user: User;
|
||||
chatHistories: ChatHistory[];
|
||||
isOpen?: boolean;
|
||||
onToggle?: () => void;
|
||||
}
|
||||
|
||||
export function Sidebar({ user, chatHistories, isOpen = true }: SidebarProps) {
|
||||
const pathname = usePathname();
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* 侧边栏 */}
|
||||
<aside
|
||||
className={cn(
|
||||
'fixed top-0 left-0 bottom-0 z-50 bg-white border-r border-[var(--color-border-light)] flex flex-col transition-all duration-300 ease-in-out overflow-hidden',
|
||||
isOpen ? 'w-[var(--sidebar-width)]' : 'w-0 border-r-0'
|
||||
)}
|
||||
>
|
||||
{/* 品牌 Header */}
|
||||
<header className="p-4">
|
||||
<h1 className="text-lg font-bold text-[var(--color-text-primary)]">cchcode</h1>
|
||||
</header>
|
||||
|
||||
{/* 新建对话按钮 */}
|
||||
<div className="px-4 py-2">
|
||||
<Link
|
||||
href="/"
|
||||
className="flex items-center gap-2 text-[var(--color-primary)] text-sm font-medium py-2 hover:opacity-80 transition-opacity"
|
||||
>
|
||||
<Plus size={18} />
|
||||
<span>New chat</span>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Recents 标签 */}
|
||||
<div className="px-4 py-2">
|
||||
<h2 className="text-xs font-medium text-[var(--color-text-tertiary)] uppercase tracking-wider mb-2">
|
||||
Recents
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
{/* 聊天列表 */}
|
||||
<nav className="flex-1 overflow-y-auto px-2 flex flex-col gap-1">
|
||||
{chatHistories.map((chat) => {
|
||||
const isActive = pathname === `/chat/${chat.id}`;
|
||||
return (
|
||||
<Link
|
||||
key={chat.id}
|
||||
href={`/chat/${chat.id}`}
|
||||
className={cn(
|
||||
'block px-3 py-2 rounded-lg text-sm cursor-pointer transition-colors truncate',
|
||||
isActive
|
||||
? 'bg-[var(--color-bg-tertiary)] text-[var(--color-text-primary)]'
|
||||
: 'text-[var(--color-text-secondary)] hover:bg-[var(--color-bg-hover)]'
|
||||
)}
|
||||
>
|
||||
{chat.title}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
|
||||
{/* 用户信息 Footer */}
|
||||
<footer className="p-4 border-t border-[var(--color-border-light)] mt-auto">
|
||||
<div className="flex items-center gap-3 p-2 rounded-lg cursor-pointer hover:bg-[var(--color-bg-hover)] transition-colors">
|
||||
<Avatar name={user.name} size="md" />
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="text-sm text-[var(--color-text-primary)] truncate">{user.email}</div>
|
||||
<div className="text-xs text-[var(--color-text-tertiary)] capitalize">{user.plan} plan</div>
|
||||
</div>
|
||||
<ChevronDown size={16} className="text-[var(--color-text-tertiary)]" />
|
||||
</div>
|
||||
</footer>
|
||||
</aside>
|
||||
|
||||
{/* 移动端遮罩 */}
|
||||
{isOpen && (
|
||||
<div
|
||||
className="fixed inset-0 bg-black/20 z-40 md:hidden"
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
// 侧边栏切换按钮
|
||||
export function SidebarToggle({ onClick }: { onClick?: () => void }) {
|
||||
return (
|
||||
<button
|
||||
onClick={onClick}
|
||||
className="w-9 h-9 flex items-center justify-center rounded-lg text-[var(--color-text-tertiary)] hover:bg-[var(--color-bg-hover)] hover:text-[var(--color-text-secondary)] transition-colors"
|
||||
title="Toggle sidebar"
|
||||
>
|
||||
<PanelLeft size={20} />
|
||||
</button>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user