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/MainLayout.tsx

@@ -3,28 +3,54 @@ import { cn } from '@/lib/utils';
 import { useThemeStore } from '@/store';
 import { Sidebar } from './Sidebar';
 import { Header } from './Header';
+import { Breadcrumb } from './Breadcrumb';
 
+/**
+ * MainLayout - 优化后的主布局组件
+ * 
+ * 优化点：
+ * 1. 使用 CSS 变量 + Tailwind 类替代硬编码的 style 属性
+ * 2. sidebar 宽度通过 CSS 变量管理，统一协调
+ * 3. 添加 Breadcrumb 面包屑导航
+ * 4. 布局过渡动画平滑
+ * 5. 支持响应式布局
+ */
 export function MainLayout() {
   const { sidebarCollapsed } = useThemeStore();
 
   return (
-    <div className="min-h-screen bg-slate-950">
+    <div
+      className="min-h-screen bg-[var(--dg-bg-primary)] transition-colors duration-300"
+      style={{
+        '--sidebar-width': sidebarCollapsed ? '4rem' : '16rem',
+        '--header-height': '3.5rem',
+      } as React.CSSProperties}
+    >
       <Sidebar />
       <div
-        className="transition-all duration-300"
-        style={{ marginLeft: sidebarCollapsed ? '4rem' : '16rem' }}
+        className={cn(
+          'flex flex-col min-h-screen transition-[margin] duration-300 ease-in-out',
+        )}
+        style={{ marginLeft: 'var(--sidebar-width)' }}
       >
         <Header />
-        <main
-          className={cn(
-            'pt-14 transition-all duration-300',
-            'min-h-[calc(100vh-3.5rem)]'
-          )}
-        >
+        <main className="flex-1 pt-[var(--header-height)]">
+          {/* Breadcrumb Navigation */}
+          <div className="px-6 pt-4 pb-0">
+            <Breadcrumb />
+          </div>
+          {/* Page Content */}
           <div className="p-6">
             <Outlet />
           </div>
         </main>
+        {/* Footer */}
+        <footer className="px-6 py-4 border-t border-[var(--dg-border)] mt-auto">
+          <div className="flex items-center justify-between text-xs text-[var(--dg-text-muted)]">
+            <span>AIOps 智能运维平台</span>
+            <span>v1.0.0</span>
+          </div>
+        </footer>
       </div>
     </div>
   );