feat(layout): 添加应用布局组件

- AppLayout: 主应用布局，包含侧边栏和主内容区
- Sidebar: 侧边栏组件，包含新建对话、聊天历史、用户信息

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 (
+    <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>
+  );
+}

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 (
+    <>
+      {/* 侧边栏 */}
+      <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>
+  );
+}