feat: 前端全面优化 — 懒加载/骨架屏/错误边界/面包屑/主题增强/Glass登录页/动画系统

- 新增: ErrorBoundary, PageTransition, Breadcrumb, SkeletonCard (4组件)
- 重构: App.tsx (React.lazy懒加载所有页面), index.css (55+主题变量/动画/工具类)
- 优化: MainLayout (CSS变量布局+Footer), Header (搜索增强+快捷键), Sidebar (折叠Tooltip+子菜单动画)
- 优化: Dashboard骨架屏+级联动画, Stats/Charts/Recent主题感知颜色
- 优化: Login.tsx Glass毛玻璃效果+密码显隐图标+光球动画
- 图表Recharts主题化(CustomTooltip/chart-grid/chart-axis)
- 减少动画偏好支持(prefers-reduced-motion)

frontend/src/components/layout/Header.tsx

@@ -1,9 +1,9 @@
-import { useState } from 'react';
+import { useState, useCallback, useEffect, useRef } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { cn } from '@/lib/utils';
 import { useThemeStore, useNotificationStore, useUserStore } from '@/store';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
-import { Badge } from '@/components/ui/badge';
 import { Separator } from '@/components/ui/separator';
 import {
   DropdownMenu,
@@ -26,16 +26,48 @@ import {
   CheckCircle,
   Palette,
   Check,
+  X,
+  Keyboard,
 } from 'lucide-react';
 import { formatDistanceToNow } from '@/lib/utils';
 import { useTheme, THEME_OPTIONS } from '@/hooks/useTheme';
 
+// Keyboard shortcut handler
+function useKeyboardShortcuts() {
+  const navigate = useNavigate();
+  const [searchOpen, setSearchOpen] = useState(false);
+
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      // Cmd/Ctrl + K to open search
+      if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+        e.preventDefault();
+        setSearchOpen((prev) => !prev);
+      }
+      // Cmd/Ctrl + B to toggle sidebar
+      if ((e.metaKey || e.ctrlKey) && e.key === 'b') {
+        e.preventDefault();
+        // Dispatch custom event for sidebar toggle
+        window.dispatchEvent(new CustomEvent('toggle-sidebar'));
+      }
+    };
+    window.addEventListener('keydown', handler);
+    return () => window.removeEventListener('keydown', handler);
+  }, []);
+
+  return { searchOpen, setSearchOpen };
+}
+
 export function Header() {
   const { sidebarCollapsed, toggleSidebar } = useThemeStore();
   const { notifications, unreadCount, markAsRead, markAllAsRead } = useNotificationStore();
   const { user, logout } = useUserStore();
   const { theme, setTheme } = useTheme();
+  const navigate = useNavigate();
   const [searchValue, setSearchValue] = useState('');
+  const [searchFocused, setSearchFocused] = useState(false);
+  const searchInputRef = useRef<HTMLInputElement>(null);
+  const { searchOpen, setSearchOpen } = useKeyboardShortcuts();
 
   const handleLogout = () => {
     logout();
@@ -44,7 +76,7 @@ export function Header() {
 
   const displayName = user?.real_name || user?.username || '管理员';
 
-  const getNotificationIcon = (type: string) => {
+  const getNotificationIcon = useCallback((type: string) => {
     switch (type) {
       case 'error':
         return <AlertTriangle className="h-4 w-4 text-red-500" />;
@@ -55,73 +87,166 @@ export function Header() {
       default:
         return <Info className="h-4 w-4 text-blue-500" />;
     }
-  };
+  }, []);
+
+  // Quick nav items for search
+  const quickNavItems = [
+    { name: '仪表盘', path: '/', icon: 'LayoutDashboard' },
+    { name: '服务器管理', path: '/servers', icon: 'Server' },
+    { name: 'Kubernetes 集群', path: '/kubernetes', icon: 'Cloud' },
+    { name: '监控告警', path: '/alerts', icon: 'Bell' },
+    { name: '告警中心', path: '/alert-center', icon: 'AlertTriangle' },
+    { name: '流水线', path: '/pipelines', icon: 'GitBranch' },
+    { name: '智能助手', path: '/ai-assistant', icon: 'Brain' },
+    { name: '脚本库', path: '/scripts', icon: 'FileCode' },
+  ];
 
   return (
-    <header className="fixed top-0 right-0 left-0 z-30 h-14 bg-slate-900/95 backdrop-blur supports-[backdrop-filter]:bg-slate-900/60 border-b border-slate-800 transition-all duration-300"
-      style={{ marginLeft: sidebarCollapsed ? '4rem' : '16rem' }}
+    <header
+      className={cn(
+        'fixed top-0 right-0 z-30 h-[var(--header-height)] bg-[var(--dg-bg-secondary)]/95 backdrop-blur-md',
+        'border-b border-[var(--dg-border)] transition-[margin] duration-300 ease-in-out',
+        'supports-[backdrop-filter]:bg-[var(--dg-bg-secondary)]/75',
+      )}
+      style={{ marginLeft: 'var(--sidebar-width)', left: 0 }}
     >
       <div className="flex items-center justify-between h-full px-4">
         {/* Left: Toggle & Search */}
-        <div className="flex items-center gap-3 flex-1">
-          {sidebarCollapsed && (
-            <Button
-              variant="ghost"
-              size="icon"
-              className="h-8 w-8 text-slate-400 hover:text-slate-100"
-              onClick={toggleSidebar}
-            >
-              <Menu className="h-4 w-4" />
-            </Button>
-          )}
-          
+        <div className="flex items-center gap-3 flex-1 min-w-0">
+          {/* Sidebar Toggle */}
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-8 w-8 text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)] hover:bg-[var(--dg-bg-hover)] flex-shrink-0"
+            onClick={toggleSidebar}
+            title={sidebarCollapsed ? '展开侧边栏' : '收起侧边栏'}
+          >
+            <Menu className="h-4 w-4" />
+          </Button>
+
           {/* Global Search */}
-          <div className="relative w-96 max-w-full">
-            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-500" />
+          <div className={cn(
+            'relative transition-all duration-300',
+            searchFocused ? 'w-[28rem] max-w-full' : 'w-80'
+          )}>
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-[var(--dg-text-muted)] pointer-events-none" />
             <Input
+              ref={searchInputRef}
               type="text"
               placeholder="搜索服务器、应用、工单、文档..."
               value={searchValue}
               onChange={(e) => setSearchValue(e.target.value)}
-              className="pl-9 h-9 bg-slate-800/50 border-slate-700 text-slate-200 placeholder:text-slate-500 focus-visible:ring-blue-500/30"
+              onFocus={() => setSearchFocused(true)}
+              onBlur={() => setTimeout(() => setSearchFocused(false), 200)}
+              className={cn(
+                'pl-9 h-9 text-sm transition-all duration-300',
+                'bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)]',
+                'text-[var(--dg-text-primary)] placeholder:text-[var(--dg-text-muted)]',
+                'focus:border-[var(--dg-blue)] focus:ring-1 focus:ring-[var(--dg-blue)]/30',
+                'hover:border-[var(--dg-border-hover)]',
+              )}
             />
-            <kbd className="absolute right-3 top-1/2 -translate-y-1/2 px-1.5 py-0.5 text-xs font-mono text-slate-500 bg-slate-800 rounded">
+            <kbd className="absolute right-3 top-1/2 -translate-y-1/2 px-1.5 py-0.5 text-[10px] font-mono text-[var(--dg-text-muted)] bg-[var(--dg-bg-primary)] border border-[var(--dg-border)] rounded hidden sm:inline-block">
               ⌘K
             </kbd>
-          </div>
 
+            {/* Search Dropdown */}
+            {searchFocused && searchValue && (
+              <div
+                className={cn(
+                  'absolute top-full left-0 right-0 mt-2 py-2 rounded-lg',
+                  'bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)]',
+                  'shadow-lg z-50 animate-scale-in',
+                )}
+                style={{ boxShadow: 'var(--shadow-dropdown)' }}
+              >
+                <div className="px-3 py-1.5 text-xs font-medium text-[var(--dg-text-muted)] uppercase tracking-wider">
+                  快速导航
+                </div>
+                {quickNavItems
+                  .filter((item) =>
+                    item.name.toLowerCase().includes(searchValue.toLowerCase())
+                  )
+                  .map((item) => (
+                    <button
+                      key={item.path}
+                      className={cn(
+                        'w-full flex items-center gap-2.5 px-3 py-2 text-sm',
+                        'text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)]',
+                        'hover:bg-[var(--dg-bg-hover)] transition-colors text-left',
+                      )}
+                      onMouseDown={(e) => {
+                        e.preventDefault();
+                        navigate(item.path);
+                        setSearchValue('');
+                        setSearchFocused(false);
+                      }}
+                    >
+                      <Search className="h-3.5 w-3.5" />
+                      <span>{item.name}</span>
+                    </button>
+                  ))}
+                {quickNavItems.filter((item) =>
+                  item.name.toLowerCase().includes(searchValue.toLowerCase())
+                ).length === 0 && (
+                  <div className="px-3 py-4 text-center text-sm text-[var(--dg-text-muted)]">
+                    未找到匹配的结果
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
         </div>
 
         {/* Right: Actions */}
-        <div className="flex items-center gap-2">
+        <div className="flex items-center gap-1.5 flex-shrink-0">
           {/* Theme Switcher */}
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
-              <Button variant="ghost" size="icon" className="h-8 w-8 text-slate-400 hover:text-slate-100">
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-8 w-8 text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)] hover:bg-[var(--dg-bg-hover)]"
+                title="切换主题"
+              >
                 <Palette className="h-4 w-4" />
               </Button>
             </DropdownMenuTrigger>
-            <DropdownMenuContent align="end" className="w-56 bg-slate-800 border-slate-700">
-              <DropdownMenuLabel className="text-slate-300">主题切换</DropdownMenuLabel>
-              <DropdownMenuSeparator className="bg-slate-700" />
+            <DropdownMenuContent
+              align="end"
+              className="w-60 bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]"
+              style={{ boxShadow: 'var(--shadow-dropdown)' }}
+            >
+              <DropdownMenuLabel className="text-[var(--dg-text-secondary)]">主题切换</DropdownMenuLabel>
+              <DropdownMenuSeparator className="bg-[var(--dg-border)]" />
               {THEME_OPTIONS.map((option) => (
                 <DropdownMenuItem
                   key={option.id}
                   className={cn(
-                    'flex items-center gap-2 cursor-pointer focus:bg-slate-700 focus:text-slate-100',
-                    theme === option.id ? 'text-slate-100' : 'text-slate-300'
+                    'flex items-center gap-2.5 cursor-pointer transition-colors',
+                    'focus:bg-[var(--dg-bg-hover)] focus:text-[var(--dg-text-primary)]',
+                    theme === option.id
+                      ? 'text-[var(--dg-text-primary)]'
+                      : 'text-[var(--dg-text-secondary)]',
                   )}
                   onClick={() => setTheme(option.id)}
                 >
                   <span
-                    className="w-3 h-3 rounded-full shrink-0 ring-2 ring-slate-900"
-                    style={{ backgroundColor: option.primaryColor }}
+                    className="w-3.5 h-3.5 rounded-full shrink-0 ring-2"
+                    style={{
+                      backgroundColor: option.primaryColor,
+                      boxShadow: '0 0 0 2px var(--dg-bg-primary)',
+                    }}
                   />
                   <div className="flex-1 min-w-0">
                     <span className="text-sm font-medium">{option.name}</span>
-                    <span className="block text-xs text-slate-500 truncate">{option.description}</span>
+                    <span className="block text-xs text-[var(--dg-text-muted)] truncate">
+                      {option.description}
+                    </span>
                   </div>
-                  {theme === option.id && <Check className="h-4 w-4 text-blue-400 shrink-0" />}
+                  {theme === option.id && (
+                    <Check className="h-4 w-4 text-[var(--dg-blue)] shrink-0" />
+                  )}
                 </DropdownMenuItem>
               ))}
             </DropdownMenuContent>
@@ -130,101 +255,163 @@ export function Header() {
           {/* Notifications */}
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
-              <Button variant="ghost" size="icon" className="h-8 w-8 text-slate-400 hover:text-slate-100 relative">
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-8 w-8 text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)] hover:bg-[var(--dg-bg-hover)] relative"
+                title="通知"
+              >
                 <Bell className="h-4 w-4" />
                 {unreadCount > 0 && (
-                  <span className="absolute -top-0.5 -right-0.5 h-4 w-4 rounded-full bg-red-500 text-[10px] font-medium text-white flex items-center justify-center">
+                  <span className="absolute -top-0.5 -right-0.5 h-4.5 w-4.5 rounded-full bg-red-500 text-[10px] font-semibold text-white flex items-center justify-center animate-scale-in">
                     {unreadCount > 99 ? '99+' : unreadCount}
                   </span>
                 )}
               </Button>
             </DropdownMenuTrigger>
-            <DropdownMenuContent align="end" className="w-80 bg-slate-800 border-slate-700">
-              <DropdownMenuLabel className="flex items-center justify-between text-slate-300">
-                <span>通知</span>
+            <DropdownMenuContent
+              align="end"
+              className="w-96 bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] p-0"
+              style={{ boxShadow: 'var(--shadow-dropdown)' }}
+            >
+              {/* Header */}
+              <div className="flex items-center justify-between px-4 py-3 border-b border-[var(--dg-border)]">
+                <span className="text-sm font-medium text-[var(--dg-text-primary)]">
+                  通知
+                </span>
                 {unreadCount > 0 && (
                   <Button
                     variant="ghost"
                     size="sm"
-                    className="h-6 text-xs text-slate-400 hover:text-slate-100"
+                    className="h-7 text-xs text-[var(--dg-text-muted)] hover:text-[var(--dg-text-primary)] hover:bg-[var(--dg-bg-hover)]"
                     onClick={markAllAsRead}
                   >
-                    <CheckCheck className="h-3 w-3 mr-1" />
+                    <CheckCheck className="h-3.5 w-3.5 mr-1" />
                     全部已读
                   </Button>
                 )}
-              </DropdownMenuLabel>
-              <DropdownMenuSeparator className="bg-slate-700" />
-              <div className="max-h-80 overflow-y-auto">
+              </div>
+
+              {/* Notification List */}
+              <div className="max-h-80 overflow-y-auto scrollbar-thin">
                 {notifications.length === 0 ? (
-                  <div className="py-8 text-center text-slate-500">
-                    <Bell className="h-8 w-8 mx-auto mb-2 opacity-50" />
+                  <div className="flex flex-col items-center justify-center py-10 text-[var(--dg-text-muted)]">
+                    <Bell className="h-10 w-10 mb-3 opacity-30" />
                     <p className="text-sm">暂无通知</p>
                   </div>
                 ) : (
                   notifications.slice(0, 10).map((notification) => (
-                    <DropdownMenuItem
+                    <div
                       key={notification.id}
                       className={cn(
-                        'flex items-start gap-3 p-3 cursor-pointer focus:bg-slate-700',
-                        !notification.read && 'bg-slate-700/30'
+                        'flex items-start gap-3 px-4 py-3 cursor-pointer transition-colors',
+                        'hover:bg-[var(--dg-bg-hover)] border-b border-[var(--dg-border)] last:border-0',
+                        !notification.read && 'bg-[var(--dg-blue)]/[0.04]',
                       )}
                       onClick={() => markAsRead(notification.id)}
                     >
-                      {getNotificationIcon(notification.type)}
+                      <div className="mt-0.5 flex-shrink-0">
+                        {getNotificationIcon(notification.type)}
+                      </div>
                       <div className="flex-1 min-w-0">
-                        <p className={cn('text-sm font-medium', !notification.read ? 'text-slate-200' : 'text-slate-400')}>
+                        <p
+                          className={cn(
+                            'text-sm font-medium',
+                            !notification.read
+                              ? 'text-[var(--dg-text-primary)]'
+                              : 'text-[var(--dg-text-secondary)]',
+                          )}
+                        >
                           {notification.title}
                         </p>
-                        <p className="text-xs text-slate-500 mt-0.5 line-clamp-2">{notification.message}</p>
-                        <p className="text-xs text-slate-600 mt-1">
+                        <p className="text-xs text-[var(--dg-text-muted)] mt-0.5 line-clamp-2">
+                          {notification.message}
+                        </p>
+                        <p className="text-xs text-[var(--dg-text-muted)]/60 mt-1">
                           {formatDistanceToNow(notification.timestamp)}
                         </p>
                       </div>
                       {!notification.read && (
-                        <span className="w-2 h-2 rounded-full bg-blue-500 mt-1" />
+                        <span className="w-2 h-2 rounded-full bg-[var(--dg-blue)] mt-2 flex-shrink-0" />
                       )}
-                    </DropdownMenuItem>
+                    </div>
                   ))
                 )}
               </div>
+
+              {/* Footer */}
+              {notifications.length > 0 && (
+                <div className="px-4 py-2 border-t border-[var(--dg-border)] text-center">
+                  <button
+                    className="text-xs text-[var(--dg-text-muted)] hover:text-[var(--dg-blue)] transition-colors"
+                    onClick={() => navigate('/alert-center')}
+                  >
+                    查看全部通知
+                  </button>
+                </div>
+              )}
             </DropdownMenuContent>
           </DropdownMenu>
 
-          <Separator orientation="vertical" className="h-6 bg-slate-800" />
+          <Separator orientation="vertical" className="h-5 bg-[var(--dg-border)] mx-1" />
 
           {/* User Menu */}
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
-              <Button variant="ghost" className="h-8 gap-2 px-2 text-slate-300 hover:text-slate-100">
-                <div className="w-6 h-6 rounded-full bg-blue-600 flex items-center justify-center text-white text-xs font-medium">
-                  {displayName.charAt(0)}
+              <Button
+                variant="ghost"
+                className="h-8 gap-2 px-2 text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)] hover:bg-[var(--dg-bg-hover)]"
+              >
+                <div className="w-7 h-7 rounded-full bg-gradient-to-br from-[var(--dg-blue)] to-[var(--dg-purple)] flex items-center justify-center text-white text-xs font-bold">
+                  {displayName.charAt(0).toUpperCase()}
                 </div>
-                <span className="hidden md:inline text-sm">{displayName}</span>
+                <span className="hidden md:inline text-sm max-w-[100px] truncate">
+                  {displayName}
+                </span>
               </Button>
             </DropdownMenuTrigger>
-            <DropdownMenuContent align="end" className="w-48 bg-slate-800 border-slate-700">
-              <DropdownMenuLabel className="text-slate-300">我的账号</DropdownMenuLabel>
-              <DropdownMenuSeparator className="bg-slate-700" />
-              <DropdownMenuItem className="text-slate-300 focus:bg-slate-700 focus:text-slate-100">
-                <User className="h-4 w-4 mr-2" />
+            <DropdownMenuContent
+              align="end"
+              className="w-52 bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]"
+              style={{ boxShadow: 'var(--shadow-dropdown)' }}
+            >
+              <DropdownMenuLabel className="text-[var(--dg-text-secondary)]">
+                <div className="flex flex-col">
+                  <span className="text-sm font-medium text-[var(--dg-text-primary)]">
+                    {displayName}
+                  </span>
+                  <span className="text-xs text-[var(--dg-text-muted)] truncate">
+                    {user?.email || user?.username || ''}
+                  </span>
+                </div>
+              </DropdownMenuLabel>
+              <DropdownMenuSeparator className="bg-[var(--dg-border)]" />
+              <DropdownMenuItem
+                className="text-[var(--dg-text-secondary)] focus:bg-[var(--dg-bg-hover)] focus:text-[var(--dg-text-primary)] cursor-pointer"
+                onClick={() => navigate('/users')}
+              >
+                <User className="h-4 w-4 mr-2.5" />
                 个人中心
               </DropdownMenuItem>
-              <DropdownMenuItem className="text-slate-300 focus:bg-slate-700 focus:text-slate-100">
-                <Settings className="h-4 w-4 mr-2" />
+              <DropdownMenuItem
+                className="text-[var(--dg-text-secondary)] focus:bg-[var(--dg-bg-hover)] focus:text-[var(--dg-text-primary)] cursor-pointer"
+                onClick={() => navigate('/settings')}
+              >
+                <Settings className="h-4 w-4 mr-2.5" />
                 账号设置
               </DropdownMenuItem>
-              <DropdownMenuSeparator className="bg-slate-700" />
-              <DropdownMenuItem className="text-red-400 focus:bg-slate-700 focus:text-red-400" onClick={handleLogout}>
-                <LogOut className="h-4 w-4 mr-2" />
+              <DropdownMenuSeparator className="bg-[var(--dg-border)]" />
+              <DropdownMenuItem
+                className="text-red-400 focus:bg-red-500/10 focus:text-red-400 cursor-pointer"
+                onClick={handleLogout}
+              >
+                <LogOut className="h-4 w-4 mr-2.5" />
                 退出登录
               </DropdownMenuItem>
             </DropdownMenuContent>
           </DropdownMenu>
         </div>
       </div>
-
-      {/* Tabs 已移除 — 侧边栏导航已足够，tab 栏多余且遮挡内容 */}
     </header>
   );
 }