From ac5f555163707320d34c67ada3faa798a389eac2 Mon Sep 17 00:00:00 2001 From: gaoziman <2942894660@qq.com> Date: Fri, 19 Dec 2025 22:37:19 +0800 Subject: [PATCH] =?UTF-8?q?refactor(UI):=20=E6=95=B4=E5=90=88=E8=AE=A4?= =?UTF-8?q?=E8=AF=81=E5=8A=9F=E8=83=BD=E5=B9=B6=E4=BC=98=E5=8C=96=E7=95=8C?= =?UTF-8?q?=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 布局集成 AuthProvider 和 Toaster 组件 - 更新应用标题为 LionCode - 侧边栏集成用户信息展示 - 设置页面支持已登录用户 - 用户菜单添加登出功能 - 优化全局样式 --- src/app/chat/[id]/page.tsx | 12 +++++++++--- src/app/globals.css | 2 +- src/app/layout.tsx | 13 +++++++++---- src/app/settings/page.tsx | 2 +- src/components/features/MessageBubble.tsx | 2 +- src/components/layout/AppLayout.tsx | 3 --- src/components/layout/Sidebar.tsx | 11 +++++------ src/components/ui/UserMenu.tsx | 23 +++++++++++------------ 8 files changed, 37 insertions(+), 31 deletions(-) diff --git a/src/app/chat/[id]/page.tsx b/src/app/chat/[id]/page.tsx index 4e2646f..ccdd6aa 100644 --- a/src/app/chat/[id]/page.tsx +++ b/src/app/chat/[id]/page.tsx @@ -7,10 +7,10 @@ import { Sidebar, SidebarToggle } from '@/components/layout/Sidebar'; import { ChatInput } from '@/components/features/ChatInput'; import { MessageBubble } from '@/components/features/MessageBubble'; import { cn } from '@/lib/utils'; -import { currentUser } from '@/data/mock'; import { useConversation, useConversations } from '@/hooks/useConversations'; import { useStreamChat, type ChatMessage } from '@/hooks/useStreamChat'; import { useModels, useTools, useSettings } from '@/hooks/useSettings'; +import { useAuth } from '@/providers/AuthProvider'; interface PageProps { params: Promise<{ id: string }>; @@ -21,6 +21,7 @@ export default function ChatPage({ params }: PageProps) { const router = useRouter(); const searchParams = useSearchParams(); const initialMessage = searchParams.get('message'); + const { user } = useAuth(); const [sidebarOpen, setSidebarOpen] = useState(true); const messagesEndRef = useRef(null); @@ -196,7 +197,6 @@ export default function ChatPage({ params }: PageProps) {
{/* 侧边栏 */} setSidebarOpen(!sidebarOpen)} /> @@ -270,7 +270,13 @@ export default function ChatPage({ params }: PageProps) { content: message.content, timestamp: new Date(), }} - user={message.role === 'user' ? currentUser : undefined} + user={message.role === 'user' && user ? { + id: user.id, + email: user.email, + name: user.nickname, + plan: user.plan as 'free' | 'pro' | 'enterprise', + avatar: user.avatar || undefined, + } : undefined} thinkingContent={message.thinkingContent} isStreaming={message.status === 'streaming'} error={message.error} diff --git a/src/app/globals.css b/src/app/globals.css index e18c3c6..99ff9f7 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -1,7 +1,7 @@ @import "tailwindcss"; /* ======================================== - cchcode UI - 设计令牌 + LionCode UI - 设计令牌 基于原型图: https://openclaude.me/chat ======================================== */ diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 5091443..d0a291a 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,9 +1,11 @@ import type { Metadata } from "next"; import "./globals.css"; import { SettingsProvider } from "@/components/providers/SettingsProvider"; +import { AuthProvider } from "@/providers/AuthProvider"; +import { Toaster } from "@/components/ui/Toast"; export const metadata: Metadata = { - title: "cchcode - AI 智能助手", + title: "LionCode - AI 智能助手", description: "基于 Claude 的智能对话助手", icons: { icon: "/favicon.ico", @@ -18,9 +20,12 @@ export default function RootLayout({ return ( - - {children} - + + + {children} + + + ); diff --git a/src/app/settings/page.tsx b/src/app/settings/page.tsx index 2d5b200..cff7f51 100644 --- a/src/app/settings/page.tsx +++ b/src/app/settings/page.tsx @@ -221,7 +221,7 @@ export default function SettingsPage() { const a = document.createElement('a'); a.href = url; const date = new Date().toISOString().split('T')[0]; - a.download = `cchcode-chat-export-${date}.json`; + a.download = `lioncode-chat-export-${date}.json`; document.body.appendChild(a); a.click(); document.body.removeChild(a); diff --git a/src/components/features/MessageBubble.tsx b/src/components/features/MessageBubble.tsx index 56160cb..901fd0c 100644 --- a/src/components/features/MessageBubble.tsx +++ b/src/components/features/MessageBubble.tsx @@ -159,7 +159,7 @@ export function MessageBubble({ message, user, thinkingContent, isStreaming, err {/* 免责声明 */}
- cchcode can make mistakes + LionCode can make mistakes
)} diff --git a/src/components/layout/AppLayout.tsx b/src/components/layout/AppLayout.tsx index 1937d21..293d552 100644 --- a/src/components/layout/AppLayout.tsx +++ b/src/components/layout/AppLayout.tsx @@ -2,7 +2,6 @@ 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 { @@ -18,8 +17,6 @@ export function AppLayout({ children, showHeader = true, headerContent }: AppLay
{/* 侧边栏 */} setSidebarOpen(!sidebarOpen)} /> diff --git a/src/components/layout/Sidebar.tsx b/src/components/layout/Sidebar.tsx index 0f19e0c..3f42d36 100644 --- a/src/components/layout/Sidebar.tsx +++ b/src/components/layout/Sidebar.tsx @@ -7,22 +7,21 @@ import { UserMenu } from '@/components/ui/UserMenu'; import { cn } from '@/lib/utils'; import { useConversations } from '@/hooks/useConversations'; import { useSettings } from '@/hooks/useSettings'; -import type { User } from '@/types'; +import { useAuth } from '@/providers/AuthProvider'; import type { Conversation } from '@/drizzle/schema'; import { useState } from 'react'; interface SidebarProps { - user: User; - chatHistories?: { id: string; title: string }[]; // 保持向后兼容 isOpen?: boolean; onToggle?: () => void; } -export function Sidebar({ user, isOpen = true }: SidebarProps) { +export function Sidebar({ isOpen = true }: SidebarProps) { const pathname = usePathname(); const router = useRouter(); const { conversations, loading, createConversation, deleteConversation } = useConversations(); const { settings } = useSettings(); + const { user } = useAuth(); const [creatingChat, setCreatingChat] = useState(false); const [menuOpen, setMenuOpen] = useState(null); @@ -75,7 +74,7 @@ export function Sidebar({ user, isOpen = true }: SidebarProps) { > {/* 品牌 Header */}
-

cchcode

+

LionCode

{/* 新建对话按钮 */} @@ -166,7 +165,7 @@ export function Sidebar({ user, isOpen = true }: SidebarProps) { {/* 用户信息 Footer - 使用 UserMenu 弹出菜单 */}
- +
diff --git a/src/components/ui/UserMenu.tsx b/src/components/ui/UserMenu.tsx index ffc37f2..2b32816 100644 --- a/src/components/ui/UserMenu.tsx +++ b/src/components/ui/UserMenu.tsx @@ -5,18 +5,15 @@ import { useRouter } from 'next/navigation'; import { Moon, Sun, Settings, LogOut, ChevronUp, ChevronDown } from 'lucide-react'; import { Avatar } from '@/components/ui/Avatar'; import { useSettings } from '@/hooks/useSettings'; +import { useAuth } from '@/providers/AuthProvider'; import { cn } from '@/lib/utils'; -import type { User } from '@/types'; -interface UserMenuProps { - user: User; -} - -export function UserMenu({ user }: UserMenuProps) { +export function UserMenu() { const [isOpen, setIsOpen] = useState(false); const menuRef = useRef(null); const router = useRouter(); const { settings, updateSettings } = useSettings(); + const { user, logout } = useAuth(); // 点击外部关闭菜单 useEffect(() => { @@ -71,16 +68,18 @@ export function UserMenu({ user }: UserMenuProps) { }; // 登出 - const handleLogout = () => { + const handleLogout = async () => { setIsOpen(false); - // TODO: 实现实际的登出逻辑 - // 暂时跳转到首页 - console.log('Logging out...'); - router.push('/'); + await logout(); }; const isDarkMode = settings.theme === 'dark'; + // 如果没有用户信息，不显示菜单 + if (!user) { + return null; + } + return (
{/* 触发器 - 用户信息区域 */} @@ -94,7 +93,7 @@ export function UserMenu({ user }: UserMenuProps) { aria-expanded={isOpen} aria-haspopup="true" > - +
{user.email}