From 5347bc7c2f7af70c743f19ce6a0106e15b3fda13 Mon Sep 17 00:00:00 2001 From: gaoziman <2942894660@qq.com> Date: Wed, 17 Dec 2025 22:54:08 +0800 Subject: [PATCH] =?UTF-8?q?feat(layout):=20=E6=B7=BB=E5=8A=A0=E5=BA=94?= =?UTF-8?q?=E7=94=A8=E5=B8=83=E5=B1=80=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - AppLayout: 主应用布局，包含侧边栏和主内容区 - Sidebar: 侧边栏组件，包含新建对话、聊天历史、用户信息 --- src/components/layout/AppLayout.tsx | 49 +++++++++++++ src/components/layout/Sidebar.tsx | 107 ++++++++++++++++++++++++++++ 2 files changed, 156 insertions(+) create mode 100644 src/components/layout/AppLayout.tsx create mode 100644 src/components/layout/Sidebar.tsx diff --git a/src/components/layout/AppLayout.tsx b/src/components/layout/AppLayout.tsx new file mode 100644 index 0000000..1937d21 --- /dev/null +++ b/src/components/layout/AppLayout.tsx @@ -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 ( +
+ {/* 侧边栏 */} + setSidebarOpen(!sidebarOpen)} + /> + + {/* 主内容区 */} +
+ {/* Header */} + {showHeader && ( +
+ setSidebarOpen(!sidebarOpen)} /> + {headerContent} +
+ )} + + {/* Body */} +
+ {children} +
+
+
+ ); +} diff --git a/src/components/layout/Sidebar.tsx b/src/components/layout/Sidebar.tsx new file mode 100644 index 0000000..4cc02f4 --- /dev/null +++ b/src/components/layout/Sidebar.tsx @@ -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 ( + <> + {/* 侧边栏 */} + + + {/* 移动端遮罩 */} + {isOpen && ( +
+ )} + + ); +} + +// 侧边栏切换按钮 +export function SidebarToggle({ onClick }: { onClick?: () => void }) { + return ( + + ); +}