leo-projects/claude-code-cchui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(UI): 整合认证功能并优化界面

Browse Source 
- 布局集成 AuthProvider 和 Toaster 组件
- 更新应用标题为 LionCode
- 侧边栏集成用户信息展示
- 设置页面支持已登录用户
- 用户菜单添加登出功能
- 优化全局样式
This commit is contained in:
gaoziman 2025-12-19 22:37:19 +08:00
parent a7e846d733
commit ac5f555163
8 changed files with 37 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/app/chat/[id]/page.tsx
View File

@ -7,10 +7,10 @@ import { Sidebar, SidebarToggle } from '@/components/layout/Sidebar';
import { ChatInput } from '@/components/features/ChatInput'; import { ChatInput } from '@/components/features/ChatInput';
import { MessageBubble } from '@/components/features/MessageBubble'; import { MessageBubble } from '@/components/features/MessageBubble';
import { cn } from '@/lib/utils'; import { cn } from '@/lib/utils';
import { currentUser } from '@/data/mock';
import { useConversation, useConversations } from '@/hooks/useConversations'; import { useConversation, useConversations } from '@/hooks/useConversations';
import { useStreamChat, type ChatMessage } from '@/hooks/useStreamChat'; import { useStreamChat, type ChatMessage } from '@/hooks/useStreamChat';
import { useModels, useTools, useSettings } from '@/hooks/useSettings'; import { useModels, useTools, useSettings } from '@/hooks/useSettings';
import { useAuth } from '@/providers/AuthProvider';
interface PageProps { interface PageProps {
params: Promise<{ id: string }>; params: Promise<{ id: string }>;
@ -21,6 +21,7 @@ export default function ChatPage({ params }: PageProps) {
const router = useRouter(); const router = useRouter();
const searchParams = useSearchParams(); const searchParams = useSearchParams();
const initialMessage = searchParams.get('message'); const initialMessage = searchParams.get('message');
const { user } = useAuth();
const [sidebarOpen, setSidebarOpen] = useState(true); const [sidebarOpen, setSidebarOpen] = useState(true);
const messagesEndRef = useRef<HTMLDivElement>(null); const messagesEndRef = useRef<HTMLDivElement>(null);
@ -196,7 +197,6 @@ export default function ChatPage({ params }: PageProps) {
<div className="flex min-h-screen"> <div className="flex min-h-screen">
{/* 侧边栏 */} {/* 侧边栏 */}
<Sidebar <Sidebar
user={currentUser}
isOpen={sidebarOpen} isOpen={sidebarOpen}
onToggle={() => setSidebarOpen(!sidebarOpen)} onToggle={() => setSidebarOpen(!sidebarOpen)}
/> />
@ -270,7 +270,13 @@ export default function ChatPage({ params }: PageProps) {
content: message.content, content: message.content,
timestamp: new Date(), 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} thinkingContent={message.thinkingContent}
isStreaming={message.status === 'streaming'} isStreaming={message.status === 'streaming'}
error={message.error} error={message.error}

2
src/app/globals.css
View File

@ -1,7 +1,7 @@
@import "tailwindcss"; @import "tailwindcss";
/* ======================================== /* ========================================
cchcode UI - 设计令牌 LionCode UI - 设计令牌
基于原型图: https://openclaude.me/chat 基于原型图: https://openclaude.me/chat
======================================== */ ======================================== */

7
src/app/layout.tsx
View File

@ -1,9 +1,11 @@
import type { Metadata } from "next"; import type { Metadata } from "next";
import "./globals.css"; import "./globals.css";
import { SettingsProvider } from "@/components/providers/SettingsProvider"; import { SettingsProvider } from "@/components/providers/SettingsProvider";
import { AuthProvider } from "@/providers/AuthProvider";
import { Toaster } from "@/components/ui/Toast";
export const metadata: Metadata = { export const metadata: Metadata = {
title: "cchcode - AI 智能助手", title: "LionCode - AI 智能助手",
description: "基于 Claude 的智能对话助手", description: "基于 Claude 的智能对话助手",
icons: { icons: {
icon: "/favicon.ico", icon: "/favicon.ico",
@ -18,9 +20,12 @@ export default function RootLayout({
return ( return (
<html lang="zh-CN"> <html lang="zh-CN">
<body className="antialiased"> <body className="antialiased">
<AuthProvider>
<SettingsProvider> <SettingsProvider>
{children} {children}
<Toaster />
</SettingsProvider> </SettingsProvider>
</AuthProvider>
</body> </body>
</html> </html>
); );

2
src/app/settings/page.tsx
View File

@ -221,7 +221,7 @@ export default function SettingsPage() {
const a = document.createElement('a'); const a = document.createElement('a');
a.href = url; a.href = url;
const date = new Date().toISOString().split('T')[0]; 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); document.body.appendChild(a);
a.click(); a.click();
document.body.removeChild(a); document.body.removeChild(a);

2
src/components/features/MessageBubble.tsx
View File

@ -159,7 +159,7 @@ export function MessageBubble({ message, user, thinkingContent, isStreaming, err
{/* 免责声明 */} {/* 免责声明 */}
<div className="text-xs text-[var(--color-text-tertiary)] text-right mt-2"> <div className="text-xs text-[var(--color-text-tertiary)] text-right mt-2">
cchcode can make mistakes LionCode can make mistakes
</div> </div>
</> </>
)} )}

3
src/components/layout/AppLayout.tsx
View File

@ -2,7 +2,6 @@
import { useState, type ReactNode } from 'react'; import { useState, type ReactNode } from 'react';
import { Sidebar, SidebarToggle } from '@/components/layout/Sidebar'; import { Sidebar, SidebarToggle } from '@/components/layout/Sidebar';
import { currentUser, chatHistories } from '@/data/mock';
import { cn } from '@/lib/utils'; import { cn } from '@/lib/utils';
interface AppLayoutProps { interface AppLayoutProps {
@ -18,8 +17,6 @@ export function AppLayout({ children, showHeader = true, headerContent }: AppLay
<div className="flex min-h-screen"> <div className="flex min-h-screen">
{/* 侧边栏 */} {/* 侧边栏 */}
<Sidebar <Sidebar
user={currentUser}
chatHistories={chatHistories}
isOpen={sidebarOpen} isOpen={sidebarOpen}
onToggle={() => setSidebarOpen(!sidebarOpen)} onToggle={() => setSidebarOpen(!sidebarOpen)}
/> />

11
src/components/layout/Sidebar.tsx
View File

@ -7,22 +7,21 @@ import { UserMenu } from '@/components/ui/UserMenu';
import { cn } from '@/lib/utils'; import { cn } from '@/lib/utils';
import { useConversations } from '@/hooks/useConversations'; import { useConversations } from '@/hooks/useConversations';
import { useSettings } from '@/hooks/useSettings'; import { useSettings } from '@/hooks/useSettings';
import type { User } from '@/types'; import { useAuth } from '@/providers/AuthProvider';
import type { Conversation } from '@/drizzle/schema'; import type { Conversation } from '@/drizzle/schema';
import { useState } from 'react'; import { useState } from 'react';
interface SidebarProps { interface SidebarProps {
user: User;
chatHistories?: { id: string; title: string }[]; // 保持向后兼容
isOpen?: boolean; isOpen?: boolean;
onToggle?: () => void; onToggle?: () => void;
} }
export function Sidebar({ user, isOpen = true }: SidebarProps) { export function Sidebar({ isOpen = true }: SidebarProps) {
const pathname = usePathname(); const pathname = usePathname();
const router = useRouter(); const router = useRouter();
const { conversations, loading, createConversation, deleteConversation } = useConversations(); const { conversations, loading, createConversation, deleteConversation } = useConversations();
const { settings } = useSettings(); const { settings } = useSettings();
const { user } = useAuth();
const [creatingChat, setCreatingChat] = useState(false); const [creatingChat, setCreatingChat] = useState(false);
const [menuOpen, setMenuOpen] = useState<string | null>(null); const [menuOpen, setMenuOpen] = useState<string | null>(null);
@ -75,7 +74,7 @@ export function Sidebar({ user, isOpen = true }: SidebarProps) {
> >
{/* 品牌 Header */} {/* 品牌 Header */}
<header className="p-4"> <header className="p-4">
<h1 className="text-lg font-bold text-[var(--color-text-primary)]">cchcode</h1> <h1 className="text-lg font-bold text-[var(--color-text-primary)]">LionCode</h1>
</header> </header>
{/* 新建对话按钮 */} {/* 新建对话按钮 */}
@ -166,7 +165,7 @@ export function Sidebar({ user, isOpen = true }: SidebarProps) {
{/* 用户信息 Footer - 使用 UserMenu 弹出菜单 */} {/* 用户信息 Footer - 使用 UserMenu 弹出菜单 */}
<footer className="p-4 border-t border-[var(--color-border-light)] mt-auto"> <footer className="p-4 border-t border-[var(--color-border-light)] mt-auto">
<UserMenu user={user} /> <UserMenu />
</footer> </footer>
</aside> </aside>

23
src/components/ui/UserMenu.tsx
View File

@ -5,18 +5,15 @@ import { useRouter } from 'next/navigation';
import { Moon, Sun, Settings, LogOut, ChevronUp, ChevronDown } from 'lucide-react'; import { Moon, Sun, Settings, LogOut, ChevronUp, ChevronDown } from 'lucide-react';
import { Avatar } from '@/components/ui/Avatar'; import { Avatar } from '@/components/ui/Avatar';
import { useSettings } from '@/hooks/useSettings'; import { useSettings } from '@/hooks/useSettings';
import { useAuth } from '@/providers/AuthProvider';
import { cn } from '@/lib/utils'; import { cn } from '@/lib/utils';
import type { User } from '@/types';
interface UserMenuProps { export function UserMenu() {
user: User;
}
export function UserMenu({ user }: UserMenuProps) {
const [isOpen, setIsOpen] = useState(false); const [isOpen, setIsOpen] = useState(false);
const menuRef = useRef<HTMLDivElement>(null); const menuRef = useRef<HTMLDivElement>(null);
const router = useRouter(); const router = useRouter();
const { settings, updateSettings } = useSettings(); const { settings, updateSettings } = useSettings();
const { user, logout } = useAuth();
// 点击外部关闭菜单 // 点击外部关闭菜单
useEffect(() => { useEffect(() => {
@ -71,16 +68,18 @@ export function UserMenu({ user }: UserMenuProps) {
}; };
// 登出 // 登出
const handleLogout = () => { const handleLogout = async () => {
setIsOpen(false); setIsOpen(false);
// TODO: 实现实际的登出逻辑 await logout();
// 暂时跳转到首页
console.log('Logging out...');
router.push('/');
}; };
const isDarkMode = settings.theme === 'dark'; const isDarkMode = settings.theme === 'dark';
// 如果没有用户信息，不显示菜单
if (!user) {
return null;
}
return ( return (
<div ref={menuRef} className="relative"> <div ref={menuRef} className="relative">
{/* 触发器 - 用户信息区域 */} {/* 触发器 - 用户信息区域 */}
@ -94,7 +93,7 @@ export function UserMenu({ user }: UserMenuProps) {
aria-expanded={isOpen} aria-expanded={isOpen}
aria-haspopup="true" aria-haspopup="true"
> >
<Avatar name={user.name} size="md" /> <Avatar name={user.nickname} size="md" />
<div className="flex-1 min-w-0 text-left"> <div className="flex-1 min-w-0 text-left">
<div className="text-sm text-[var(--color-text-primary)] truncate"> <div className="text-sm text-[var(--color-text-primary)] truncate">
{user.email} {user.email}