refactor(UI): 整合认证功能并优化界面
- 布局集成 AuthProvider 和 Toaster 组件 - 更新应用标题为 LionCode - 侧边栏集成用户信息展示 - 设置页面支持已登录用户 - 用户菜单添加登出功能 - 优化全局样式
This commit is contained in:
gaoziman
parent
a7e846d733
commit
ac5f555163
@ -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<HTMLDivElement>(null);
|
||||
@ -196,7 +197,6 @@ export default function ChatPage({ params }: PageProps) {
|
||||
<div className="flex min-h-screen">
|
||||
{/* 侧边栏 */}
|
||||
<Sidebar
|
||||
user={currentUser}
|
||||
isOpen={sidebarOpen}
|
||||
onToggle={() => 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}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
/* ========================================
|
||||
cchcode UI - 设计令牌
|
||||
LionCode UI - 设计令牌
|
||||
基于原型图: https://openclaude.me/chat
|
||||
======================================== */
|
||||
|
||||
|
||||
@ -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 (
|
||||
<html lang="zh-CN">
|
||||
<body className="antialiased">
|
||||
<AuthProvider>
|
||||
<SettingsProvider>
|
||||
{children}
|
||||
<Toaster />
|
||||
</SettingsProvider>
|
||||
</AuthProvider>
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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">
|
||||
cchcode can make mistakes
|
||||
LionCode can make mistakes
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
@ -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
|
||||
<div className="flex min-h-screen">
|
||||
{/* 侧边栏 */}
|
||||
<Sidebar
|
||||
user={currentUser}
|
||||
chatHistories={chatHistories}
|
||||
isOpen={sidebarOpen}
|
||||
onToggle={() => setSidebarOpen(!sidebarOpen)}
|
||||
/>
|
||||
|
||||
@ -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<string | null>(null);
|
||||
|
||||
@ -75,7 +74,7 @@ export function Sidebar({ user, isOpen = true }: SidebarProps) {
|
||||
>
|
||||
{/* 品牌 Header */}
|
||||
<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>
|
||||
|
||||
{/* 新建对话按钮 */}
|
||||
@ -166,7 +165,7 @@ export function Sidebar({ user, isOpen = true }: SidebarProps) {
|
||||
|
||||
{/* 用户信息 Footer - 使用 UserMenu 弹出菜单 */}
|
||||
<footer className="p-4 border-t border-[var(--color-border-light)] mt-auto">
|
||||
<UserMenu user={user} />
|
||||
<UserMenu />
|
||||
</footer>
|
||||
</aside>
|
||||
|
||||
|
||||
@ -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<HTMLDivElement>(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 (
|
||||
<div ref={menuRef} className="relative">
|
||||
{/* 触发器 - 用户信息区域 */}
|
||||
@ -94,7 +93,7 @@ export function UserMenu({ user }: UserMenuProps) {
|
||||
aria-expanded={isOpen}
|
||||
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="text-sm text-[var(--color-text-primary)] truncate">
|
||||
{user.email}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user