steven_li
3b0af173cc
移除了所有Hermes相关的命名引用，包括： - 从.gitignore中清理相关构建缓存文件 - 将README中的beaver-home路径配置更新 - 完善backend/README.md文档说明Beaver后端主线实现 - 移除Hermes风格的相关注释和兼容性代码 - 清理nanobot环境变量兼容性处理 - 删除技能迁移和服务迁移相关功能代码 - 更新测试用例中相关命名和函数名 BREAKING CHANGE: 移除了Hermes迁移相关API和CLI命令，不再支持nanobot环境变量兼容性
202 lines
8.9 KiB
TypeScript
202 lines
8.9 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import Link from 'next/link';
|
|
import { usePathname, useRouter } from 'next/navigation';
|
|
import { Bell, Bot, ChevronDown, FolderOpen, ListTodo, LogOut, Mail, MessageSquare, Puzzle, Settings, Store, Wrench } from 'lucide-react';
|
|
import { logout } from '@/lib/api';
|
|
import { LanguageSwitcher } from '@/components/LanguageSwitcher';
|
|
import { Avatar, AvatarFallback } from '@/components/ui/avatar';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
|
|
import { appConnectionStatusLabel } from '@/lib/i18n/common';
|
|
import { pickAppText } from '@/lib/i18n/core';
|
|
import { useAppI18n } from '@/lib/i18n/provider';
|
|
import { useChatStore } from '@/lib/store';
|
|
|
|
type NavItem = {
|
|
key: 'chat' | 'tasks' | 'notifications' | 'skills' | 'files' | 'tools' | 'agents' | 'outlook' | 'marketplace' | 'settings';
|
|
href: string;
|
|
icon: React.ComponentType<{ className?: string }>;
|
|
matchPrefixes?: string[];
|
|
};
|
|
|
|
const NAV_ITEMS: NavItem[] = [
|
|
{ key: 'chat', href: '/', icon: MessageSquare },
|
|
{ key: 'tasks', href: '/tasks', icon: ListTodo, matchPrefixes: ['/tasks', '/cron'] },
|
|
{ key: 'notifications', href: '/notifications', icon: Bell, matchPrefixes: ['/notifications'] },
|
|
{ key: 'skills', href: '/skills', icon: Puzzle },
|
|
{ key: 'files', href: '/files', icon: FolderOpen, matchPrefixes: ['/files'] },
|
|
{ key: 'tools', href: '/mcp', icon: Wrench, matchPrefixes: ['/mcp'] },
|
|
{ key: 'agents', href: '/agents', icon: Bot, matchPrefixes: ['/agents'] },
|
|
{ key: 'outlook', href: '/outlook', icon: Mail, matchPrefixes: ['/outlook'] },
|
|
{ key: 'marketplace', href: '/marketplace', icon: Store, matchPrefixes: ['/marketplace'] },
|
|
{
|
|
key: 'settings',
|
|
href: '/settings',
|
|
icon: Settings,
|
|
matchPrefixes: ['/settings', '/status', '/logs'],
|
|
},
|
|
];
|
|
|
|
function ConnectionDot() {
|
|
const { locale } = useAppI18n();
|
|
const wsStatus = useChatStore((s) => s.wsStatus);
|
|
const beaverReady = useChatStore((s) => s.beaverReady);
|
|
|
|
const isOnline = wsStatus === 'connected' && beaverReady === true;
|
|
const isChecking = wsStatus === 'connected' && beaverReady === null;
|
|
const isConnecting = wsStatus === 'connecting' || isChecking;
|
|
const isOffline = wsStatus === 'disconnected' || (wsStatus === 'connected' && beaverReady === false);
|
|
|
|
const color = isOnline
|
|
? 'bg-[#869683]'
|
|
: isConnecting
|
|
? 'bg-[#8B7E77]'
|
|
: 'bg-[#5F5550]';
|
|
|
|
const label = appConnectionStatusLabel(wsStatus, beaverReady, locale);
|
|
|
|
return (
|
|
<div className="flex items-center gap-1.5 text-xs text-muted-foreground">
|
|
<span className={`w-2 h-2 rounded-full ${color}`} />
|
|
<span>{label}</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const Header = () => {
|
|
const { locale } = useAppI18n();
|
|
const pathname = usePathname();
|
|
const router = useRouter();
|
|
const user = useChatStore((s) => s.user);
|
|
const isAuthLoading = useChatStore((s) => s.isAuthLoading);
|
|
const setUser = useChatStore((s) => s.setUser);
|
|
|
|
const navLabel = React.useCallback((key: NavItem['key']) => {
|
|
if (key === 'chat') return pickAppText(locale, '对话', 'Chat');
|
|
if (key === 'tasks') return 'Task';
|
|
if (key === 'notifications') return pickAppText(locale, '通知', 'Notifications');
|
|
if (key === 'skills') return pickAppText(locale, '技能', 'Skills');
|
|
if (key === 'files') return pickAppText(locale, '文件', 'Files');
|
|
if (key === 'tools') return pickAppText(locale, '工具', 'Tools');
|
|
if (key === 'agents') return pickAppText(locale, '智能体', 'Agents');
|
|
if (key === 'outlook') return 'Outlook';
|
|
if (key === 'marketplace') return pickAppText(locale, '市场', 'Marketplace');
|
|
return pickAppText(locale, '配置', 'Settings');
|
|
}, [locale]);
|
|
|
|
const handleLogout = async () => {
|
|
await logout();
|
|
setUser(null);
|
|
router.replace('/login');
|
|
router.refresh();
|
|
};
|
|
|
|
const userInitial = (user?.username || user?.email || '?').trim().charAt(0).toUpperCase();
|
|
|
|
return (
|
|
<header className="fixed left-0 right-0 top-0 z-50 border-b border-[#E6E1DE] bg-[#F7F6F5]/95 backdrop-blur">
|
|
<div className="mx-auto max-w-[1720px] px-4 sm:px-6 lg:px-8">
|
|
<div className="grid h-16 grid-cols-[minmax(120px,1fr)_auto_minmax(120px,1fr)] items-center gap-4">
|
|
<Link href="/" className="flex shrink-0 items-center">
|
|
<span className="font-serif text-[28px] font-semibold leading-none text-[#0B0B0B]">
|
|
Beaver
|
|
</span>
|
|
</Link>
|
|
|
|
<nav className="flex items-center gap-1 rounded-full border border-[#E6E1DE] bg-white px-1.5 py-1 shadow-[0_1px_2px_rgba(0,0,0,0.04)]">
|
|
{NAV_ITEMS.map((item) => {
|
|
const isActive =
|
|
item.href === '/'
|
|
? pathname === '/'
|
|
: item.matchPrefixes?.some((prefix) => pathname.startsWith(prefix)) ?? pathname.startsWith(item.href);
|
|
const Icon = item.icon;
|
|
return (
|
|
<Link
|
|
key={item.href}
|
|
href={item.href}
|
|
className={`flex shrink-0 items-center gap-1.5 rounded-full px-4 py-2 text-sm font-medium transition-colors ${
|
|
isActive
|
|
? 'bg-primary text-primary-foreground'
|
|
: 'text-[#4F4642] hover:bg-[#F7F5F4] hover:text-[#0B0B0B]'
|
|
}`}
|
|
>
|
|
<Icon className="w-4 h-4" />
|
|
{navLabel(item.key)}
|
|
</Link>
|
|
);
|
|
})}
|
|
</nav>
|
|
|
|
<div className="flex min-w-0 items-center justify-end gap-3">
|
|
<div className="hidden shrink-0 sm:block">
|
|
<ConnectionDot />
|
|
</div>
|
|
<div className="flex shrink-0 items-center gap-2">
|
|
<LanguageSwitcher />
|
|
{user ? (
|
|
<Popover>
|
|
<PopoverTrigger asChild>
|
|
<button
|
|
type="button"
|
|
className="flex items-center gap-2 rounded-full border border-[#E6E1DE] bg-white px-2 py-1.5 text-sm font-medium text-[#1D1715] transition-colors hover:bg-[#F7F5F4]"
|
|
>
|
|
<Avatar className="h-8 w-8 border border-[#E6E1DE]">
|
|
<AvatarFallback className="bg-primary text-xs font-semibold text-primary-foreground">
|
|
{userInitial}
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
<span className="hidden max-w-28 truncate sm:block">{user.username}</span>
|
|
<ChevronDown className="h-4 w-4 text-muted-foreground" />
|
|
</button>
|
|
</PopoverTrigger>
|
|
<PopoverContent align="end" className="w-80 rounded-3xl border-border/70 p-0 shadow-2xl">
|
|
<div className="overflow-hidden rounded-3xl bg-[linear-gradient(180deg,#F7F5F4,#FFFFFF)]">
|
|
<div className="border-b border-border/60 px-6 py-5">
|
|
<p className="truncate text-center text-sm font-medium text-muted-foreground">
|
|
{user.email}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex flex-col items-center gap-4 px-6 py-6 text-center">
|
|
<Avatar className="h-24 w-24 border-4 border-white shadow-sm">
|
|
<AvatarFallback className="bg-primary text-4xl font-semibold text-primary-foreground">
|
|
{userInitial}
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
<div className="space-y-1">
|
|
<p className="text-2xl font-semibold tracking-tight text-foreground">
|
|
{pickAppText(locale, `${user.username}，你好！`, `Hi, ${user.username}`)}
|
|
</p>
|
|
<p className="text-sm text-muted-foreground">
|
|
{pickAppText(locale, '当前已登录到你的工作区实例。', 'You are currently signed in to your workspace instance.')}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="border-t border-border/60 bg-white/90 px-4 py-4">
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
onClick={handleLogout}
|
|
className="h-12 w-full justify-center rounded-2xl text-sm font-semibold"
|
|
>
|
|
<LogOut className="mr-2 h-4 w-4" />
|
|
{pickAppText(locale, '退出登录', 'Sign Out')}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</PopoverContent>
|
|
</Popover>
|
|
) : !isAuthLoading ? null : null}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
};
|
|
|
|
export default Header;
|