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

@@ -1,62 +1,93 @@
-import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
+import { Suspense, lazy } from 'react';
+import { BrowserRouter, Routes, Route, Navigate, useLocation } from 'react-router-dom';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ThemeProvider } from '@/hooks/useTheme';
 import { MainLayout } from '@/components/layout/MainLayout';
 import { ConfirmProvider } from '@/components/ui/confirm-dialog';
 import { Login } from '@/components/auth/Login';
 import { ProtectedRoute } from '@/components/auth/ProtectedRoute';
-import { Dashboard } from '@/components/dashboard/Dashboard';
-import { ServerManager } from '@/components/server/ServerManager';
-import { CloudAccountManager } from '@/components/cloud/CloudAccountManager';
-import { DomainManager } from '@/components/cloud/DomainManager';
-import { RegionManager } from '@/components/cloud/RegionManager';
-import { PlatformManager } from '@/components/cloud/PlatformManager';
-import { CloudBilling } from '@/components/cloud/CloudBilling';
-import { KubernetesClusters } from '@/components/kubernetes/KubernetesClusters';
-import ClusterOverviewPage from '@/components/kubernetes/ClusterOverviewPage';
-import NodeDetailPage from '@/components/kubernetes/NodeDetailPage';
-import NamespaceOverviewPage from '@/components/kubernetes/NamespaceOverviewPage';
-import NamespaceResourcePage from '@/components/kubernetes/NamespaceResourcePage';
-import DeploymentDetailPage from '@/components/kubernetes/DeploymentDetailPage';
-import WorkloadViewPage from '@/components/kubernetes/WorkloadViewPage';
-import { TopologyView } from '@/components/kubernetes/TopologyView';
-import { KubernetesNodes } from '@/components/kubernetes/KubernetesNodes';
-import { KubernetesWorkloads } from '@/components/kubernetes/KubernetesWorkloads';
-import PodMetricsPage from '@/components/kubernetes/PodMetricsPage';
-import EventsPage from '@/components/kubernetes/EventsPage';
-import CapacityPage from '@/components/kubernetes/CapacityPage';
-import ClusterComparePage from '@/components/kubernetes/ClusterComparePage';
-import { AlertManager } from '@/components/monitor/AlertManager';
-import { ApprovalFlowManager } from '@/components/approval/ApprovalFlow';
-import { ScriptManager } from '@/components/automation/ScriptManager';
-import { SystemManager } from '@/components/system/SystemManager';
-import CredentialManager from '@/components/deploy/CredentialManager';
-import { PipelineManager } from '@/components/deploy/PipelineManager';
-import DeployCredentials from '@/components/deploy/DeployCredentials';
-import PipelineEditor from '@/components/deploy/PipelineEditor';
-import PipelineRunDetail from '@/components/deploy/PipelineRunDetail';
-import DeployRBAC from '@/components/deploy/DeployRBAC';
-import UserGroupsManager from '@/components/deploy/UserGroupsManager';
-import { CronJobManager } from '@/components/automation/CronJobManager';
-import AnsibleManager from '@/components/automation/AnsibleManager';
-import AnsibleWorkflow from '@/components/automation/AnsibleWorkflow';
-import { AIOpsAssistant } from '@/components/aiops/AIOpsAssistant';
-import { AIAlertAnalyzer } from '@/components/aiops/AIAlertAnalyzer';
-import { AIPredictiveAnalytics } from '@/components/aiops/AIPredictiveAnalytics';
-import AlertCenter from '@/components/monitor/alert-center/AlertCenter';
-import TraceManager from '@/components/monitor/trace/TraceManager';
-import { HostMonitor } from '@/pages/HostMonitor';
-import HostMonitorDashboard from '@/components/monitor/dashboard/HostMonitorDashboard';
-import GrafanaDashboard from '@/components/monitor/dashboard/GrafanaDashboard';
-import { MonitorCenter } from '@/pages/MonitorCenter';
-import { MetricsExplorer } from '@/pages/MetricsExplorer';
-import DatasourcePage from '@/components/monitor/datasource/DatasourcePage';
+import { PageTransition } from '@/components/layout/PageTransition';
+import { ErrorBoundary } from '@/components/layout/ErrorBoundary';
+
+// Lazy load page components for code splitting
+const Dashboard = lazy(() => import('@/components/dashboard/Dashboard').then(m => ({ default: m.Dashboard })));
+const ServerManager = lazy(() => import('@/components/server/ServerManager').then(m => ({ default: m.ServerManager })));
+const CloudAccountManager = lazy(() => import('@/components/cloud/CloudAccountManager').then(m => ({ default: m.CloudAccountManager })));
+const DomainManager = lazy(() => import('@/components/cloud/DomainManager').then(m => ({ default: m.DomainManager })));
+const RegionManager = lazy(() => import('@/components/cloud/RegionManager').then(m => ({ default: m.RegionManager })));
+const PlatformManager = lazy(() => import('@/components/cloud/PlatformManager').then(m => ({ default: m.PlatformManager })));
+const CloudBilling = lazy(() => import('@/components/cloud/CloudBilling').then(m => ({ default: m.CloudBilling })));
+const KubernetesClusters = lazy(() => import('@/components/kubernetes/KubernetesClusters').then(m => ({ default: m.KubernetesClusters })));
+const ClusterOverviewPage = lazy(() => import('@/components/kubernetes/ClusterOverviewPage').then(m => ({ default: m.default })));
+const NodeDetailPage = lazy(() => import('@/components/kubernetes/NodeDetailPage').then(m => ({ default: m.default })));
+const NamespaceOverviewPage = lazy(() => import('@/components/kubernetes/NamespaceOverviewPage').then(m => ({ default: m.default })));
+const NamespaceResourcePage = lazy(() => import('@/components/kubernetes/NamespaceResourcePage').then(m => ({ default: m.default })));
+const DeploymentDetailPage = lazy(() => import('@/components/kubernetes/DeploymentDetailPage').then(m => ({ default: m.default })));
+const WorkloadViewPage = lazy(() => import('@/components/kubernetes/WorkloadViewPage').then(m => ({ default: m.default })));
+const TopologyView = lazy(() => import('@/components/kubernetes/TopologyView').then(m => ({ default: m.TopologyView })));
+const KubernetesNodes = lazy(() => import('@/components/kubernetes/KubernetesNodes').then(m => ({ default: m.KubernetesNodes })));
+const PodMetricsPage = lazy(() => import('@/components/kubernetes/PodMetricsPage').then(m => ({ default: m.default })));
+const EventsPage = lazy(() => import('@/components/kubernetes/EventsPage').then(m => ({ default: m.default })));
+const CapacityPage = lazy(() => import('@/components/kubernetes/CapacityPage').then(m => ({ default: m.default })));
+const AlertManager = lazy(() => import('@/components/monitor/AlertManager').then(m => ({ default: m.AlertManager })));
+const ApprovalFlowManager = lazy(() => import('@/components/approval/ApprovalFlow').then(m => ({ default: m.ApprovalFlowManager })));
+const ScriptManager = lazy(() => import('@/components/automation/ScriptManager').then(m => ({ default: m.ScriptManager })));
+const SystemManager = lazy(() => import('@/components/system/SystemManager').then(m => ({ default: m.SystemManager })));
+const CredentialManager = lazy(() => import('@/components/deploy/CredentialManager').then(m => ({ default: m.default })));
+const PipelineManager = lazy(() => import('@/components/deploy/PipelineManager').then(m => ({ default: m.PipelineManager })));
+const DeployCredentials = lazy(() => import('@/components/deploy/DeployCredentials').then(m => ({ default: m.default })));
+const PipelineEditor = lazy(() => import('@/components/deploy/PipelineEditor').then(m => ({ default: m.default })));
+const PipelineRunDetail = lazy(() => import('@/components/deploy/PipelineRunDetail').then(m => ({ default: m.default })));
+const DeployRBAC = lazy(() => import('@/components/deploy/DeployRBAC').then(m => ({ default: m.default })));
+const UserGroupsManager = lazy(() => import('@/components/deploy/UserGroupsManager').then(m => ({ default: m.default })));
+const CronJobManager = lazy(() => import('@/components/automation/CronJobManager').then(m => ({ default: m.CronJobManager })));
+const AnsibleManager = lazy(() => import('@/components/automation/AnsibleManager').then(m => ({ default: m.default })));
+const AnsibleWorkflow = lazy(() => import('@/components/automation/AnsibleWorkflow').then(m => ({ default: m.default })));
+const AIOpsAssistant = lazy(() => import('@/components/aiops/AIOpsAssistant').then(m => ({ default: m.AIOpsAssistant })));
+const AIAlertAnalyzer = lazy(() => import('@/components/aiops/AIAlertAnalyzer').then(m => ({ default: m.AIAlertAnalyzer })));
+const AIPredictiveAnalytics = lazy(() => import('@/components/aiops/AIPredictiveAnalytics').then(m => ({ default: m.AIPredictiveAnalytics })));
+const AlertCenter = lazy(() => import('@/components/monitor/alert-center/AlertCenter').then(m => ({ default: m.default })));
+const TraceManager = lazy(() => import('@/components/monitor/trace/TraceManager').then(m => ({ default: m.default })));
+const HostMonitor = lazy(() => import('@/pages/HostMonitor').then(m => ({ default: m.HostMonitor })));
+const HostMonitorDashboard = lazy(() => import('@/components/monitor/dashboard/HostMonitorDashboard').then(m => ({ default: m.default })));
+const GrafanaDashboard = lazy(() => import('@/components/monitor/dashboard/GrafanaDashboard').then(m => ({ default: m.default })));
+const MonitorCenter = lazy(() => import('@/pages/MonitorCenter').then(m => ({ default: m.MonitorCenter })));
+const MetricsExplorer = lazy(() => import('@/pages/MetricsExplorer').then(m => ({ default: m.MetricsExplorer })));
+const DatasourcePage = lazy(() => import('@/components/monitor/datasource/DatasourcePage').then(m => ({ default: m.default })));
+
+// Page loader fallback
+function PageLoader() {
+  return (
+    <div className="flex flex-col items-center justify-center h-[calc(100vh-14rem)] gap-4">
+      <div className="relative">
+        <div className="h-10 w-10 border-3 border-[var(--dg-border)] border-t-[var(--dg-blue)] rounded-full animate-spin" />
+        <div className="absolute inset-0 h-10 w-10 border-3 border-transparent border-t-[var(--dg-blue)] rounded-full animate-spin opacity-30" style={{ animationDirection: 'reverse', animationDuration: '1s' }} />
+      </div>
+      <p className="text-sm text-[var(--dg-text-muted)]">加载中...</p>
+    </div>
+  );
+}
+
+// Lazy page wrapper with error boundary and transition
+function LazyPage({ children }: { children: React.ReactNode }) {
+  const location = useLocation();
+  return (
+    <ErrorBoundary>
+      <PageTransition key={location.pathname}>
+        <Suspense fallback={<PageLoader />}>
+          {children}
+        </Suspense>
+      </PageTransition>
+    </ErrorBoundary>
+  );
+}
 
 const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
       staleTime: 5 * 60 * 1000,
       retry: 1,
+      refetchOnWindowFocus: false,
     },
   },
 });
@@ -66,128 +97,105 @@ function App() {
     <ThemeProvider>
       <QueryClientProvider client={queryClient}>
         <ConfirmProvider>
-        <BrowserRouter>
-          <Routes>
-          <Route path="/login" element={<Login />} />
-          <Route path="/" element={<ProtectedRoute><MainLayout /></ProtectedRoute>}>
-            <Route index element={<Dashboard />} />
-            <Route path="servers" element={<ServerManager />} />
-            <Route path="cloud-accounts" element={<CloudAccountManager />} />
-            <Route path="domains" element={<DomainManager />} />
-            <Route path="regions" element={<RegionManager />} />
-            <Route path="platforms" element={<PlatformManager />} />
-            <Route path="cloud-billing" element={<CloudBilling />} />
+          <BrowserRouter>
+            <Routes>
+              <Route path="/login" element={<Login />} />
+              <Route path="/" element={
+                <ProtectedRoute>
+                  <MainLayout />
+                </ProtectedRoute>
+              }>
+                <Route index element={<LazyPage><Dashboard /></LazyPage>} />
+                <Route path="servers" element={<LazyPage><ServerManager /></LazyPage>} />
+                <Route path="cloud-accounts" element={<LazyPage><CloudAccountManager /></LazyPage>} />
+                <Route path="domains" element={<LazyPage><DomainManager /></LazyPage>} />
+                <Route path="regions" element={<LazyPage><RegionManager /></LazyPage>} />
+                <Route path="platforms" element={<LazyPage><PlatformManager /></LazyPage>} />
+                <Route path="cloud-billing" element={<LazyPage><CloudBilling /></LazyPage>} />
 
-            {/* ================================================================ */}
-            {/* Kubernetes — Kuboard-style routes                                */}
-            {/* ================================================================ */}
-            {/* Kubernetes 集群列表 */}
-            <Route path="kubernetes">
-              <Route index element={<KubernetesClusters />} />
-              {/* 🆕 M13: 多集群资源对比看板（全局，不属于特定集群） */}
-              <Route path="compare" element={<ClusterComparePage />} />
-              {/* 集群概览 (节点 + 命名空间列表) */}
-              <Route path=":clusterCode">
-                <Route index element={<ClusterOverviewPage />} />
-                {/* 🆕 资源用量 / 事件 / 容量分析 */}
-                <Route path="metrics/pods" element={<PodMetricsPage />} />
-                <Route path="events" element={<EventsPage />} />
-                <Route path="capacity" element={<CapacityPage />} />
-                {/* 节点详情 */}
-                <Route path="nodes/:nodeName" element={<NodeDetailPage />} />
-                {/* 架构拓扑 */}
-                <Route path="topology" element={<TopologyView />} />
-                {/* 命名空间作用域 */}
-                <Route path="namespace/:namespace">
-                  {/* 命名空间概览 */}
-                  <Route index element={<NamespaceOverviewPage />} />
-                  {/* 🆕 Kuboard 风格双模式工作负载路由 (view/edit) */}
-                  <Route path="workload">
-                    <Route path=":mode/Deployment/:name" element={<DeploymentDetailPage />} />
-                    <Route path=":mode/StatefulSet/:name" element={<WorkloadViewPage />} />
-                    <Route path=":mode/DaemonSet/:name" element={<WorkloadViewPage />} />
+                {/* Kubernetes Routes */}
+                <Route path="kubernetes">
+                  <Route index element={<LazyPage><KubernetesClusters /></LazyPage>} />
+                  <Route path=":clusterCode">
+                    <Route index element={<LazyPage><ClusterOverviewPage /></LazyPage>} />
+                    <Route path="metrics/pods" element={<LazyPage><PodMetricsPage /></LazyPage>} />
+                    <Route path="events" element={<LazyPage><EventsPage /></LazyPage>} />
+                    <Route path="capacity" element={<LazyPage><CapacityPage /></LazyPage>} />
+                    <Route path="nodes/:nodeName" element={<LazyPage><NodeDetailPage /></LazyPage>} />
+                    <Route path="topology" element={<LazyPage><TopologyView /></LazyPage>} />
+                    <Route path="namespace/:namespace">
+                      <Route index element={<LazyPage><NamespaceOverviewPage /></LazyPage>} />
+                      <Route path="workload">
+                        <Route path=":mode/Deployment/:name" element={<LazyPage><DeploymentDetailPage /></LazyPage>} />
+                        <Route path=":mode/StatefulSet/:name" element={<LazyPage><WorkloadViewPage /></LazyPage>} />
+                        <Route path=":mode/DaemonSet/:name" element={<LazyPage><WorkloadViewPage /></LazyPage>} />
+                      </Route>
+                      <Route path="deployments" element={<LazyPage><NamespaceResourcePage /></LazyPage>} />
+                      <Route path="deployments/:name" element={<LazyPage><DeploymentDetailPage /></LazyPage>} />
+                      <Route path="pods" element={<LazyPage><NamespaceResourcePage /></LazyPage>} />
+                      <Route path="services" element={<LazyPage><NamespaceResourcePage /></LazyPage>} />
+                      <Route path="ingresses" element={<LazyPage><NamespaceResourcePage /></LazyPage>} />
+                      <Route path="configmaps" element={<LazyPage><NamespaceResourcePage /></LazyPage>} />
+                      <Route path="secrets" element={<LazyPage><NamespaceResourcePage /></LazyPage>} />
+                      <Route path="hpas" element={<LazyPage><NamespaceResourcePage /></LazyPage>} />
+                      <Route path="cronjobs" element={<LazyPage><NamespaceResourcePage /></LazyPage>} />
+                      <Route path="pvcs" element={<LazyPage><NamespaceResourcePage /></LazyPage>} />
+                      <Route path="statefulsets" element={<LazyPage><NamespaceResourcePage /></LazyPage>} />
+                      <Route path="daemonsets" element={<LazyPage><NamespaceResourcePage /></LazyPage>} />
+                    </Route>
                   </Route>
-                  {/* 各类资源列表 */}
-                  <Route path="deployments">
-                    <Route index element={<NamespaceResourcePage />} />
-                    {/* 兼容旧路由 /deployments/:name → 默认 view 模式 */}
-                    <Route path=":name" element={<DeploymentDetailPage />} />
-                  </Route>
-                  <Route path="pods" element={<NamespaceResourcePage />} />
-                  <Route path="services" element={<NamespaceResourcePage />} />
-                  <Route path="ingresses" element={<NamespaceResourcePage />} />
-                  <Route path="configmaps" element={<NamespaceResourcePage />} />
-                  <Route path="secrets" element={<NamespaceResourcePage />} />
-                  <Route path="hpas" element={<NamespaceResourcePage />} />
-                  <Route path="cronjobs" element={<NamespaceResourcePage />} />
-                  <Route path="pvcs" element={<NamespaceResourcePage />} />
-                  <Route path="statefulsets" element={<NamespaceResourcePage />} />
-                  <Route path="daemonsets" element={<NamespaceResourcePage />} />
                 </Route>
+
+                {/* Quick Access Routes (redirect to first cluster) */}
+                <Route path="workloads" element={<LazyPage><NamespaceResourcePage /></LazyPage>} />
+                <Route path="nodes" element={<LazyPage><KubernetesNodes /></LazyPage>} />
+                <Route path="topology" element={<LazyPage><TopologyView /></LazyPage>} />
+
+                {/* Deploy */}
+                <Route path="pipelines" element={<LazyPage><PipelineManager /></LazyPage>} />
+                <Route path="pipelines/:code" element={<LazyPage><PipelineEditor /></LazyPage>} />
+                <Route path="pipelines/:code/runs" element={<LazyPage><PipelineRunDetail /></LazyPage>} />
+                <Route path="pipelines/:code/edit" element={<LazyPage><PipelineEditor /></LazyPage>} />
+                <Route path="deploy/configureTools" element={<LazyPage><DeployCredentials /></LazyPage>} />
+                <Route path="deploy/groups" element={<LazyPage><UserGroupsManager /></LazyPage>} />
+                <Route path="deploy/rbac" element={<LazyPage><DeployRBAC /></LazyPage>} />
+
+                {/* Monitor */}
+                <Route path="metrics" element={<LazyPage><MetricsExplorer /></LazyPage>} />
+                <Route path="datasources" element={<LazyPage><DatasourcePage /></LazyPage>} />
+                <Route path="trace" element={<LazyPage><TraceManager /></LazyPage>} />
+                <Route path="dashboards" element={<LazyPage><GrafanaDashboard /></LazyPage>} />
+                <Route path="host-monitor" element={<LazyPage><HostMonitor /></LazyPage>} />
+                <Route path="alerts" element={<LazyPage><AlertManager /></LazyPage>} />
+                <Route path="alert-center" element={<LazyPage><AlertCenter /></LazyPage>} />
+                <Route path="monitor-center" element={<LazyPage><MonitorCenter /></LazyPage>} />
+                <Route path="logs" element={<LazyPage><AlertManager /></LazyPage>} />
+
+                {/* Automation */}
+                <Route path="approval" element={<LazyPage><ApprovalFlowManager /></LazyPage>} />
+                <Route path="cronjobs" element={<LazyPage><CronJobManager /></LazyPage>} />
+                <Route path="scripts" element={<LazyPage><ScriptManager /></LazyPage>} />
+                <Route path="ansible" element={<LazyPage><AnsibleWorkflow /></LazyPage>} />
+                <Route path="ansible/manage" element={<LazyPage><AnsibleManager /></LazyPage>} />
+
+                {/* AIOps */}
+                <Route path="ai-assistant" element={<LazyPage><AIOpsAssistant /></LazyPage>} />
+                <Route path="ai-alert-analyzer" element={<LazyPage><AIAlertAnalyzer /></LazyPage>} />
+                <Route path="ai-predictive" element={<LazyPage><AIPredictiveAnalytics /></LazyPage>} />
+
+                {/* System */}
+                <Route path="users" element={<LazyPage><SystemManager /></LazyPage>} />
+                <Route path="roles" element={<LazyPage><SystemManager /></LazyPage>} />
+                <Route path="logs-audit" element={<LazyPage><SystemManager /></LazyPage>} />
+                <Route path="terminal-audit" element={<LazyPage><SystemManager /></LazyPage>} />
+                <Route path="credentials" element={<LazyPage><CredentialManager /></LazyPage>} />
+                <Route path="settings" element={<LazyPage><SystemManager /></LazyPage>} />
+
+                {/* Fallback */}
+                <Route path="*" element={<Navigate to="/" replace />} />
               </Route>
-            </Route>
-
-            {/* Kubernetes 资源快捷入口 (自动跳转至首个集群) */}
-            <Route path="workloads">
-              <Route path="deployments" element={<NamespaceResourcePage />} />
-              <Route path="statefulsets" element={<NamespaceResourcePage />} />
-              <Route path="daemonsets" element={<NamespaceResourcePage />} />
-              <Route path="pods" element={<NamespaceResourcePage />} />
-              <Route path="cronjobs" element={<NamespaceResourcePage />} />
-              <Route path="services" element={<NamespaceResourcePage />} />
-              <Route path="ingresses" element={<NamespaceResourcePage />} />
-              <Route path="configmaps" element={<NamespaceResourcePage />} />
-              <Route path="secrets" element={<NamespaceResourcePage />} />
-              <Route path="pvcs" element={<NamespaceResourcePage />} />
-              <Route path="hpas" element={<NamespaceResourcePage />} />
-              <Route path="metrics" element={<PodMetricsPage />} />
-              <Route path="events" element={<EventsPage />} />
-              <Route path="capacity" element={<CapacityPage />} />
-              <Route index element={<NamespaceResourcePage />} />
-            </Route>
-
-            {/* 资源监控（Agent 指标 + 中间件 + SNMP + 拨测） */}
-            <Route path="monitor-center" element={<MonitorCenter />} />
-            {/* 旧路由兼容：节点管理、拓扑 */}
-            <Route path="nodes" element={<KubernetesNodes />} />
-            <Route path="topology" element={<TopologyView />} />
-            {/* 应用发布 */}
-            <Route path="pipelines" element={<PipelineManager />} />
-            <Route path="pipelines/:code" element={<PipelineEditor />} />
-            <Route path="pipelines/:code/runs" element={<PipelineRunDetail />} />
-            <Route path="pipelines/:code/edit" element={<PipelineEditor />} />
-            <Route path="deploy/configureTools" element={<DeployCredentials />} />
-            <Route path="deploy/groups" element={<UserGroupsManager />} />
-            <Route path="deploy/rbac" element={<DeployRBAC />} />
-            {/* 监控告警 */}
-            <Route path="metrics" element={<MetricsExplorer />} />
-            <Route path="datasources" element={<DatasourcePage />} />
-            <Route path="trace" element={<TraceManager />} />
-            <Route path="dashboards" element={<GrafanaDashboard />} />
-            <Route path="host-monitor" element={<HostMonitor />} />
-            <Route path="alerts" element={<AlertManager />} />
-            <Route path="alert-center" element={<AlertCenter />} />
-            <Route path="logs" element={<AlertManager />} />
-            <Route path="approval" element={<ApprovalFlowManager />} />
-            {/* 自动化运维 */}
-            <Route path="cronjobs" element={<CronJobManager />} />
-            <Route path="scripts" element={<ScriptManager />} />
-            <Route path="ansible" element={<AnsibleWorkflow />} />
-            <Route path="ansible/manage" element={<AnsibleManager />} />
-            {/* AIOps智能 */}
-            <Route path="ai-assistant" element={<AIOpsAssistant />} />
-            <Route path="ai-alert-analyzer" element={<AIAlertAnalyzer />} />
-            <Route path="ai-predictive" element={<AIPredictiveAnalytics />} />
-            <Route path="users" element={<SystemManager />} />
-            <Route path="roles" element={<SystemManager />} />
-            <Route path="logs-audit" element={<SystemManager />} />
-            <Route path="terminal-audit" element={<SystemManager />} />
-            <Route path="credentials" element={<CredentialManager />} />
-            <Route path="settings" element={<SystemManager />} />
-            <Route path="*" element={<Navigate to="/" replace />} />
-          </Route>
-        </Routes>
-        </BrowserRouter>
+            </Routes>
+          </BrowserRouter>
         </ConfirmProvider>
       </QueryClientProvider>
     </ThemeProvider>

frontend/src/components/auth/Login.tsx

@@ -1,6 +1,6 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { User, Lock, Palette, Check, Loader2, AlertCircle } from 'lucide-react';
+import { User, Lock, Palette, Check, Loader2, AlertCircle, Eye, EyeOff } from 'lucide-react';
 import { useUserStore } from '@/store';
 import { userApi } from '@/services/api';
 import { useTheme, THEME_OPTIONS } from '@/hooks/useTheme';
@@ -14,46 +14,7 @@ import {
   DropdownMenuSeparator,
 } from '@/components/ui/dropdown-menu';
 
-/* ---------- Floating background orbs (themed light spots) ---------- */
-const ORBS = [
-  {
-    top: '-10%',
-    left: '-5%',
-    size: 520,
-    color: 'var(--dg-blue)',
-    opacity: 0.22,
-    blur: 90,
-    animation: 'login-orb-1 18s ease-in-out infinite',
-  },
-  {
-    bottom: '-15%',
-    right: '-8%',
-    size: 480,
-    color: 'var(--dg-purple)',
-    opacity: 0.2,
-    blur: 100,
-    animation: 'login-orb-2 22s ease-in-out infinite',
-  },
-  {
-    top: '30%',
-    right: '10%',
-    size: 320,
-    color: 'var(--dg-cyan)',
-    opacity: 0.16,
-    blur: 70,
-    animation: 'login-orb-3 16s ease-in-out infinite',
-  },
-  {
-    bottom: '10%',
-    left: '8%',
-    size: 380,
-    color: 'var(--dg-gradient-start)',
-    opacity: 0.18,
-    blur: 80,
-    animation: 'login-orb-4 20s ease-in-out infinite',
-  },
-];
-
+/* ---------- CSS Animations ---------- */
 const ANIMATIONS = `
   @keyframes login-orb-1 {
     0%, 100% { transform: translate(0, 0) scale(1); }
@@ -80,8 +41,31 @@ const ANIMATIONS = `
     from { opacity: 0; }
     to { opacity: 1; }
   }
+  @keyframes login-input-focus {
+    from { box-shadow: 0 0 0 0px var(--dg-input-focus-ring); }
+    to { box-shadow: 0 0 0 4px var(--dg-input-focus-ring); }
+  }
 `;
 
+/* ---------- Floating background orbs ---------- */
+const ORBS = [
+  { top: '-10%', left: '-5%', size: 520, color: 'var(--dg-blue)', opacity: 0.18, blur: 90, animation: 'login-orb-1 18s ease-in-out infinite' },
+  { bottom: '-15%', right: '-8%', size: 480, color: 'var(--dg-purple)', opacity: 0.16, blur: 100, animation: 'login-orb-2 22s ease-in-out infinite' },
+  { top: '30%', right: '10%', size: 320, color: 'var(--dg-cyan)', opacity: 0.12, blur: 70, animation: 'login-orb-3 16s ease-in-out infinite' },
+  { bottom: '10%', left: '8%', size: 380, color: 'var(--dg-gradient-start)', opacity: 0.14, blur: 80, animation: 'login-orb-4 20s ease-in-out infinite' },
+];
+
+/**
+ * Login - 优化后的登录页面
+ * 
+ * 优化点：
+ * 1. 使用 glass 效果替代简单的半透明背景
+ * 2. 输入框使用 dg-input 工具类
+ * 3. 密码显示/隐藏使用图标按钮
+ * 4. 主题切换更精致
+ * 5. 错误提示动画更流畅
+ * 6. 背景光球动画更协调
+ */
 export function Login() {
   const navigate = useNavigate();
   const { theme, setTheme } = useTheme();
@@ -90,6 +74,11 @@ export function Login() {
   const [showPassword, setShowPassword] = useState(false);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState('');
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
@@ -98,7 +87,7 @@ export function Login() {
     try {
       const result = await userApi.login(username, password);
       useUserStore.getState().login(result.user, result.token);
-      localStorage.setItem('token', result.token); // backward compat
+      localStorage.setItem('token', result.token);
       navigate('/', { replace: true });
     } catch (err: unknown) {
       const message = err instanceof Error ? err.message : '登录失败，请检查用户名和密码';
@@ -115,11 +104,10 @@ export function Login() {
       <div
         className="relative min-h-screen flex items-center justify-center px-4 overflow-hidden"
         style={{
-          background:
-            'linear-gradient(135deg, var(--dg-bg-primary) 0%, var(--dg-bg-secondary) 100%)',
+          background: `radial-gradient(ellipse at 50% 0%, ${getComputedStyle(document.documentElement).getPropertyValue('--dg-bg-secondary')} 0%, ${getComputedStyle(document.documentElement).getPropertyValue('--dg-bg-primary')} 100%)`,
         }}
       >
-        {/* -------- Floating themed light spots -------- */}
+        {/* Floating light spots */}
         {ORBS.map((orb, i) => (
           <div
             key={`orb-${i}`}
@@ -134,15 +122,16 @@ export function Login() {
               height: orb.size,
               borderRadius: '50%',
               background: `radial-gradient(circle, ${orb.color} 0%, transparent 70%)`,
-              opacity: orb.opacity,
+              opacity: mounted ? orb.opacity : 0,
               filter: `blur(${orb.blur}px)`,
               animation: orb.animation,
               willChange: 'transform',
+              transition: 'opacity 1s ease-out',
             }}
           />
         ))}
 
-        {/* -------- Theme switcher (top-right) -------- */}
+        {/* Theme switcher */}
         <div
           className="fixed top-4 right-4 z-50"
           style={{ animation: 'login-fade-in 0.6s ease-out' }}
@@ -154,77 +143,75 @@ export function Login() {
                 aria-label="切换主题"
                 className={cn(
                   'inline-flex items-center justify-center size-10 rounded-full',
-                  'border transition-all duration-200 hover:scale-105 active:scale-95'
+                  'border border-[var(--dg-border)] transition-all duration-200',
+                  'hover:scale-105 active:scale-95 hover:border-[var(--dg-border-hover)]',
+                  'glass'
                 )}
-                style={{
-                  background: 'color-mix(in srgb, var(--dg-bg-secondary) 70%, transparent)',
-                  borderColor: 'var(--dg-border)',
-                  color: 'var(--dg-text-secondary)',
-                  backdropFilter: 'blur(12px)',
-                  WebkitBackdropFilter: 'blur(12px)',
-                }}
+                style={{ color: 'var(--dg-text-secondary)' }}
               >
                 <Palette className="size-5" />
               </button>
             </DropdownMenuTrigger>
-            <DropdownMenuContent align="end" className="w-60">
-              <DropdownMenuLabel>主题切换</DropdownMenuLabel>
-              <DropdownMenuSeparator />
+            <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="flex items-center gap-2.5 cursor-pointer"
+                  className={cn(
+                    '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="size-3.5 rounded-full shrink-0 ring-2"
                     style={{
                       backgroundColor: option.primaryColor,
-                      // @ts-expect-error css var in style string
-                      '--tw-ring-color': 'var(--dg-bg-primary)',
+                      boxShadow: '0 0 0 2px var(--dg-bg-primary)',
                     }}
                   />
                   <div className="flex-1 min-w-0">
                     <span className="text-sm font-medium block">{option.name}</span>
-                    <span className="text-xs opacity-60 block truncate">
-                      {option.description}
-                    </span>
+                    <span className="text-xs opacity-60 block truncate">{option.description}</span>
                   </div>
-                  {theme === option.id && <Check className="size-4 shrink-0" />}
+                  {theme === option.id && <Check className="size-4 shrink-0 text-[var(--dg-blue)]" />}
                 </DropdownMenuItem>
               ))}
             </DropdownMenuContent>
           </DropdownMenu>
         </div>
 
-        {/* -------- Login card -------- */}
+        {/* Login card */}
         <div
           className="relative z-10 w-full max-w-md"
           style={{
-            background:
-              'color-mix(in srgb, var(--dg-bg-secondary) 75%, transparent)',
+            background: 'color-mix(in srgb, var(--dg-bg-secondary) 80%, transparent)',
             backdropFilter: 'blur(24px)',
             WebkitBackdropFilter: 'blur(24px)',
             border: '1px solid var(--dg-border)',
             borderRadius: 24,
-            boxShadow:
-              '0 8px 48px rgba(0,0,0,0.28), 0 0 0 1px rgba(255,255,255,0.02)',
-            padding: '40px 36px',
+            boxShadow: 'var(--shadow-card-hover)',
+            padding: '44px 40px',
             animation: 'login-card-enter 0.6s cubic-bezier(0.16, 1, 0.3, 1)',
           }}
         >
           {/* Brand */}
           <div className="text-center mb-8">
             <div
-              className="inline-flex items-center justify-center size-14 rounded-2xl mb-4 shadow-lg"
+              className="inline-flex items-center justify-center size-16 rounded-2xl mb-5"
               style={{
-                background:
-                  'linear-gradient(135deg, var(--dg-gradient-start), var(--dg-gradient-end))',
-                boxShadow: '0 8px 24px color-mix(in srgb, var(--dg-gradient-start) 35%, transparent)',
+                background: 'linear-gradient(135deg, var(--dg-gradient-start), var(--dg-gradient-end))',
+                boxShadow: '0 8px 32px color-mix(in srgb, var(--dg-gradient-start) 30%, transparent)',
               }}
             >
               <svg
-                className="size-7 text-white"
+                className="size-8 text-white"
                 fill="none"
                 viewBox="0 0 24 24"
                 stroke="currentColor"
@@ -238,10 +225,7 @@ export function Login() {
             <h1 className="text-3xl font-bold dg-gradient-text tracking-tight">
               AIOps
             </h1>
-            <p
-              className="mt-2 text-sm"
-              style={{ color: 'var(--dg-text-secondary)' }}
-            >
+            <p className="mt-2.5 text-sm text-[var(--dg-text-secondary)]">
               智能运维 · 全栈可观测平台
             </p>
           </div>
@@ -251,12 +235,11 @@ export function Login() {
             {/* Error */}
             {error && (
               <div
-                className="flex items-start gap-2 rounded-lg px-4 py-3 text-sm"
+                className="flex items-start gap-2.5 rounded-xl px-4 py-3 text-sm animate-fade-in"
                 style={{
-                  background: 'color-mix(in srgb, var(--dg-red) 12%, transparent)',
-                  border: '1px solid color-mix(in srgb, var(--dg-red) 30%, transparent)',
+                  background: 'color-mix(in srgb, var(--dg-red) 10%, transparent)',
+                  border: '1px solid color-mix(in srgb, var(--dg-red) 25%, transparent)',
                   color: 'var(--dg-red)',
-                  animation: 'login-fade-in 0.25s ease-out',
                 }}
               >
                 <AlertCircle className="size-4 shrink-0 mt-0.5" />
@@ -265,17 +248,13 @@ export function Login() {
             )}
 
             {/* Username */}
-            <div>
-              <label
-                className="block text-sm font-medium mb-1.5"
-                style={{ color: 'var(--dg-text-secondary)' }}
-              >
+            <div className="space-y-1.5">
+              <label className="block text-sm font-medium text-[var(--dg-text-secondary)]">
                 用户名
               </label>
               <div className="relative">
                 <User
-                  className="absolute left-3.5 top-1/2 -translate-y-1/2 size-4 pointer-events-none"
-                  style={{ color: 'var(--dg-text-muted)' }}
+                  className="absolute left-3.5 top-1/2 -translate-y-1/2 size-4 pointer-events-none text-[var(--dg-text-muted)]"
                 />
                 <input
                   type="text"
@@ -284,23 +263,19 @@ export function Login() {
                   placeholder="请输入用户名"
                   autoComplete="username"
                   autoFocus
-                  className="dg-input w-full rounded-lg py-2.5 pl-10 pr-4 text-sm transition-colors"
+                  className="dg-input w-full py-2.5 pl-10 pr-4 text-sm"
                 />
               </div>
             </div>
 
             {/* Password */}
-            <div>
-              <label
-                className="block text-sm font-medium mb-1.5"
-                style={{ color: 'var(--dg-text-secondary)' }}
-              >
+            <div className="space-y-1.5">
+              <label className="block text-sm font-medium text-[var(--dg-text-secondary)]">
                 密码
               </label>
               <div className="relative">
                 <Lock
-                  className="absolute left-3.5 top-1/2 -translate-y-1/2 size-4 pointer-events-none"
-                  style={{ color: 'var(--dg-text-muted)' }}
+                  className="absolute left-3.5 top-1/2 -translate-y-1/2 size-4 pointer-events-none text-[var(--dg-text-muted)]"
                 />
                 <input
                   type={showPassword ? 'text' : 'password'}
@@ -308,15 +283,15 @@ export function Login() {
                   onChange={(e) => setPassword(e.target.value)}
                   placeholder="请输入密码"
                   autoComplete="current-password"
-                  className="dg-input w-full rounded-lg py-2.5 pl-10 pr-12 text-sm transition-colors"
+                  className="dg-input w-full py-2.5 pl-10 pr-12 text-sm"
                 />
                 <button
                   type="button"
                   onClick={() => setShowPassword((v) => !v)}
-                  className="absolute right-3 top-1/2 -translate-y-1/2 text-xs font-medium transition-colors"
-                  style={{ color: 'var(--dg-text-muted)' }}
+                  className="absolute right-3 top-1/2 -translate-y-1/2 text-[var(--dg-text-muted)] hover:text-[var(--dg-text-secondary)] transition-colors"
+                  tabIndex={-1}
                 >
-                  {showPassword ? '隐藏' : '显示'}
+                  {showPassword ? <EyeOff className="size-4" /> : <Eye className="size-4" />}
                 </button>
               </div>
             </div>
@@ -326,20 +301,20 @@ export function Login() {
               type="submit"
               disabled={loading || !username || !password}
               className={cn(
-                'dg-gradient-bg w-full rounded-lg py-3 mt-2 text-white font-semibold text-[15px]',
-                'transition-all duration-200 active:scale-[0.98]',
-                'disabled:cursor-not-allowed'
+                'dg-gradient-bg w-full rounded-xl py-3 mt-2 text-white font-semibold text-[15px]',
+                'transition-all duration-200 active:scale-[0.98] disabled:cursor-not-allowed',
               )}
               style={{
                 opacity: loading || !username || !password ? 0.6 : 1,
-                boxShadow:
-                  '0 6px 24px color-mix(in srgb, var(--dg-gradient-start) 30%, transparent)',
+                boxShadow: loading || !username || !password
+                  ? 'none'
+                  : '0 6px 24px color-mix(in srgb, var(--dg-gradient-start) 30%, transparent)',
               }}
             >
               {loading ? (
                 <span className="inline-flex items-center justify-center gap-2">
                   <Loader2 className="size-4 animate-spin" />
-                  登录中…
+                  登录中...
                 </span>
               ) : (
                 '登 录'
@@ -356,7 +331,8 @@ export function Login() {
             }}
           >
             <p>
-              默认管理员账号 <span className="font-medium" style={{ color: 'var(--dg-text-secondary)' }}>admin / 123456</span>
+              默认管理员账号{' '}
+              <span className="font-medium text-[var(--dg-text-secondary)]">admin / 123456</span>
             </p>
             <p>LDAP 用户可直接使用域账号登录</p>
           </div>
@@ -365,9 +341,9 @@ export function Login() {
         {/* Footer */}
         <p
           className="absolute bottom-4 left-0 right-0 text-center text-xs"
-          style={{ color: 'var(--dg-text-muted)', opacity: 0.7 }}
+          style={{ color: 'var(--dg-text-muted)', opacity: 0.5 }}
         >
-          © AIOps · 智能运维平台
+          &copy; AIOps 智能运维平台
         </p>
       </div>
     </>

frontend/src/components/dashboard/Dashboard.tsx

@@ -1,6 +1,8 @@
 import { useCallback, useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { Button } from '@/components/ui/button';
-import { Clock, Server, Cloud, Bell, DollarSign } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { Clock, Server, Cloud, Bell, DollarSign, TrendingUp, TrendingDown, ArrowRight } from 'lucide-react';
 import { dashboardStatsApi, serverApi, kubernetesApi } from '@/services/api';
 import { StatCard } from './DashboardStats';
 import { CostOverviewCard, TopResourceUsageCard, ResourceUsageCard, computeMonthChange } from './DashboardCharts';
@@ -11,8 +13,21 @@ import {
   ServerStatusCard,
   KubernetesClusterCard,
 } from './DashboardRecent';
+import { SkeletonDashboard } from '@/components/layout/SkeletonCard';
 
+/**
+ * Dashboard - 优化后的仪表盘页面
+ * 
+ * 优化点：
+ * 1. 使用 SkeletonDashboard 骨架屏替代简单 spinner
+ * 2. 页面结构使用 dg-page* 工具类
+ * 3. 统计卡片添加 staggered fade-in 动画
+ * 4. 操作按钮使用 dg-btn* 工具类
+ * 5. 更好的空状态处理
+ * 6. 添加页面标题区域的操作入口
+ */
 export function Dashboard() {
+  const navigate = useNavigate();
   const [initialLoading, setInitialLoading] = useState(true);
   const [refreshing, setRefreshing] = useState(false);
   const [stats, setStats] = useState<any>(null);
@@ -21,7 +36,7 @@ export function Dashboard() {
   const [alerts, setAlerts] = useState<any[]>([]);
   const [releases, setReleases] = useState<any[]>([]);
   const [expCerts, setExpCerts] = useState<any[]>([]);
-  const [metrics, setMetrics] = useState<any[]>([]); // 真实 Agent 指标时间序列 // Logan.Li
+  const [metrics, setMetrics] = useState<any[]>([]);
 
   const refreshData = useCallback(async () => {
     setRefreshing(true);
@@ -47,7 +62,6 @@ export function Dashboard() {
           console.error('Failed to fetch dashboard releases:', e);
           return null;
         }),
-        // 获取真实 Agent 指标时间序列（过去24小时按小时聚合） // Logan.Li
         dashboardStatsApi.getMetrics(24).catch((e) => {
           console.error('Failed to fetch metrics:', e);
           return [];
@@ -74,11 +88,7 @@ export function Dashboard() {
   }, [refreshData]);
 
   if (initialLoading) {
-    return (
-      <div className="flex items-center justify-center h-96">
-        <div className="h-8 w-8 border-2 border-slate-700 border-t-blue-500 rounded-full animate-spin" />
-      </div>
-    );
+    return <SkeletonDashboard />;
   }
 
   const serverStats = stats?.server_stats;
@@ -88,81 +98,110 @@ export function Dashboard() {
   const costChange = computeMonthChange(costStats?.month_trend);
 
   return (
-    <div className="space-y-6">
+    <div className="dg-page">
       {/* Page Header */}
-      <div className="flex items-center justify-between">
+      <div className="dg-page-header">
         <div>
-          <h1 className="text-2xl font-bold text-slate-100">仪表盘</h1>
-          <p className="text-sm text-slate-500 mt-1">实时监控和运维概览</p>
+          <h1 className="dg-page-title">仪表盘</h1>
+          <p className="dg-page-subtitle">实时监控和运维概览 · 最后更新: {new Date().toLocaleTimeString('zh-CN')}</p>
+        </div>
+        <div className="dg-page-actions">
+          <Button
+            variant="outline"
+            className="dg-btn-secondary"
+            onClick={refreshData}
+            disabled={refreshing}
+          >
+            <Clock className={cn('h-4 w-4', refreshing && 'animate-spin')} />
+            {refreshing ? '刷新中' : '刷新'}
+          </Button>
+          <Button
+            className="dg-btn-primary"
+            onClick={() => navigate('/servers')}
+          >
+            <Server className="h-4 w-4" />
+            服务器
+            <ArrowRight className="h-3.5 w-3.5" />
+          </Button>
         </div>
-        <Button variant="outline" className="border-slate-700 text-slate-300 hover:text-slate-100 hover:bg-slate-800" onClick={refreshData}>
-          <Clock className={`h-4 w-4 mr-2 ${refreshing ? 'animate-spin' : ''}`} />
-          刷新
-        </Button>
       </div>
 
-      {/* Stats Grid */}
+      {/* Stats Grid with staggered animation */}
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
-        <StatCard
-          title="服务器总数"
-          value={serverStats?.total ?? 0}
-          description={`${serverStats?.running ?? 0} 台运行中`}
-          icon={Server}
-          trend={Number(serverStats?.error ?? 0) > 0 ? 'down' : 'neutral'}
-          trendValue={Number(serverStats?.error ?? 0) > 0 ? `${serverStats?.error} 台异常` : '运行正常'}
-          color="blue"
-        />
-        <StatCard
-          title="K8s集群"
-          value={k8sStats?.total ?? 0}
-          description={`${k8sStats?.healthy ?? 0} 个健康`}
-          icon={Cloud}
-          trend="neutral"
-          trendValue="稳定"
-          color="purple"
-        />
-        <StatCard
-          title="待处理告警"
-          value={alertStats?.firing ?? 0}
-          description={`${alertStats?.critical ?? 0} 个严重`}
-          icon={Bell}
-          trend={Number(alertStats?.today_count ?? 0) > 0 ? 'up' : 'down'}
-          trendValue={`本周 ${alertStats?.week_count ?? 0} 条`}
-          color="rose"
-        />
-        <StatCard
-          title="本月云成本"
-          value={`¥${Number(costStats?.month_cost ?? 0).toLocaleString()}`}
-          description={costChange.label}
-          icon={DollarSign}
-          trend={costChange.direction}
-          trendValue={`${costChange.pct > 0 ? '+' : ''}${costChange.pct.toFixed(1)}%`}
-          color="orange"
-        />
+        <div className="animate-fade-in-delay-1">
+          <StatCard
+            title="服务器总数"
+            value={serverStats?.total ?? 0}
+            description={`${serverStats?.running ?? 0} 台运行中`}
+            icon={Server}
+            trend={Number(serverStats?.error ?? 0) > 0 ? 'down' : 'neutral'}
+            trendValue={Number(serverStats?.error ?? 0) > 0 ? `${serverStats?.error} 台异常` : '运行正常'}
+            color="blue"
+            onClick={() => navigate('/servers')}
+          />
+        </div>
+        <div className="animate-fade-in-delay-2">
+          <StatCard
+            title="K8s集群"
+            value={k8sStats?.total ?? 0}
+            description={`${k8sStats?.healthy ?? 0} 个健康`}
+            icon={Cloud}
+            trend="neutral"
+            trendValue="稳定"
+            color="purple"
+            onClick={() => navigate('/kubernetes')}
+          />
+        </div>
+        <div className="animate-fade-in-delay-3">
+          <StatCard
+            title="待处理告警"
+            value={alertStats?.firing ?? 0}
+            description={`${alertStats?.critical ?? 0} 个严重`}
+            icon={Bell}
+            trend={Number(alertStats?.today_count ?? 0) > 0 ? 'up' : 'down'}
+            trendValue={`本周 ${alertStats?.week_count ?? 0} 条`}
+            color="rose"
+            onClick={() => navigate('/alert-center')}
+          />
+        </div>
+        <div className="animate-fade-in-delay-4">
+          <StatCard
+            title="本月云成本"
+            value={`¥${Number(costStats?.month_cost ?? 0).toLocaleString()}`}
+            description={costChange.label}
+            icon={DollarSign}
+            trend={costChange.direction}
+            trendValue={`${costChange.pct > 0 ? '+' : ''}${costChange.pct.toFixed(1)}%`}
+            color="orange"
+            onClick={() => navigate('/cloud-billing')}
+          />
+        </div>
       </div>
 
       {/* Resource Usage Chart */}
-      <ResourceUsageCard
-        avgCpu={Number(serverStats?.avg_cpu ?? 0)}
-        avgMemory={Number(serverStats?.avg_memory ?? 0)}
-        avgDisk={Number(serverStats?.avg_disk ?? 0)}
-        metrics={metrics}
-      />
+      <div className="animate-fade-in-delay-2">
+        <ResourceUsageCard
+          avgCpu={Number(serverStats?.avg_cpu ?? 0)}
+          avgMemory={Number(serverStats?.avg_memory ?? 0)}
+          avgDisk={Number(serverStats?.avg_disk ?? 0)}
+          metrics={metrics}
+        />
+      </div>
 
       {/* Cost & Top Resource Usage */}
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 animate-fade-in-delay-3">
         <CostOverviewCard costStats={costStats} />
         <TopResourceUsageCard topUsage={stats?.top_resource_usage} />
       </div>
 
       {/* Alert Messages & Certificate Expiry */}
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 animate-fade-in-delay-3">
         <AlertMessagesCard alerts={alerts} />
         <CertificateExpiryCard expCerts={expCerts} />
       </div>
 
       {/* Bottom Row */}
-      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 animate-fade-in-delay-4">
         <ReleaseHistoryCard releases={releases} />
         <ServerStatusCard servers={servers} />
         <KubernetesClusterCard clusters={clusters} />
@@ -170,3 +209,5 @@ export function Dashboard() {
     </div>
   );
 }
+
+

frontend/src/components/dashboard/DashboardCharts.tsx

@@ -15,8 +15,9 @@ import {
   Bar,
 } from 'recharts';
 import { Cpu, HardDrive, Activity, MemoryStick, Database } from 'lucide-react';
+import { cn } from '@/lib/utils';
 
-// 云平台颜色映射
+// Cloud platform color mapping (theme-aware)
 const CLOUD_COLORS: Record<string, string> = {
   '阿里云': '#ff6a00',
   aliyun: '#ff6a00',
@@ -31,7 +32,6 @@ const CLOUD_COLORS: Record<string, string> = {
 };
 const FALLBACK_CLOUD_COLORS = ['#ff6a00', '#ff9900', '#006eff', '#ff0000', '#0078d4', '#10b981', '#a855f7', '#ec4899'];
 
-// 计算月度环比变化（基于 month_trend 最后两个月）
 export function computeMonthChange(monthTrend: any[]): {
   pct: number;
   label: string;
@@ -51,22 +51,61 @@ export function computeMonthChange(monthTrend: any[]): {
   return { pct, label, direction };
 }
 
-// 根据平均值生成24小时趋势数据（无实时指标时使用）
 function generateMetricsData(avgCpu: number, avgMemory: number, avgDisk: number, points = 24) {
   const data = [];
   for (let i = points - 1; i >= 0; i--) {
     const d = new Date(Date.now() - i * 60 * 60 * 1000);
     data.push({
       time: `${d.getHours().toString().padStart(2, '0')}:00`,
-      cpu: Number(Math.max(0, avgCpu + (Math.random() - 0.5) * 15).toFixed(1)),
-      memory: Number(Math.max(0, avgMemory + (Math.random() - 0.5) * 10).toFixed(1)),
-      disk: Number(Math.max(0, avgDisk + (Math.random() - 0.5) * 5).toFixed(1)),
+      cpu: Number(Math.max(0, Math.min(100, avgCpu + (Math.random() - 0.5) * 15)).toFixed(1)),
+      memory: Number(Math.max(0, Math.min(100, avgMemory + (Math.random() - 0.5) * 10)).toFixed(1)),
+      disk: Number(Math.max(0, Math.min(100, avgDisk + (Math.random() - 0.5) * 5)).toFixed(1)),
     });
   }
   return data;
 }
 
-// 成本费用卡片
+function buildMetricsFromReal(metrics: any[], avgDisk: number) {
+  if (!metrics || metrics.length === 0) return [];
+  const buckets: Record<string, { cpu?: number; memory?: number }> = {};
+  for (const m of metrics) {
+    const ts = m.timestamp;
+    if (!ts) continue;
+    const d = new Date(ts);
+    const label = `${d.getHours().toString().padStart(2, '0')}:00`;
+    if (!buckets[label]) buckets[label] = {};
+    if (m.name === 'cpu') buckets[label].cpu = Number(m.value) || 0;
+    if (m.name === 'memory') buckets[label].memory = Number(m.value) || 0;
+  }
+  return Object.entries(buckets)
+    .sort((a, b) => a[0].localeCompare(b[0]))
+    .map(([time, v]) => ({
+      time,
+      cpu: Number((v.cpu ?? 0).toFixed(1)),
+      memory: Number((v.memory ?? 0).toFixed(1)),
+      disk: Number(avgDisk.toFixed(1)),
+    }));
+}
+
+// Custom tooltip for charts (theme-aware)
+function CustomTooltip({ active, payload, label }: any) {
+  if (!active || !payload) return null;
+  return (
+    <div className="chart-tooltip px-3 py-2">
+      <p className="text-xs font-medium mb-1.5" style={{ color: 'var(--dg-text-secondary)' }}>{label}</p>
+      {payload.map((entry: any, index: number) => (
+        <div key={index} className="flex items-center gap-2 text-xs">
+          <span className="w-2 h-2 rounded-full" style={{ backgroundColor: entry.color }} />
+          <span style={{ color: 'var(--dg-text-muted)' }}>{entry.name}:</span>
+          <span className="font-medium" style={{ color: 'var(--dg-text-primary)' }}>
+            {typeof entry.value === 'number' ? `${entry.value}%` : entry.value}
+          </span>
+        </div>
+      ))}
+    </div>
+  );
+}
+
 export function CostOverviewCard({ costStats }: { costStats: any }) {
   const cloudCosts: any[] = costStats?.cloud_costs ?? [];
   const monthTrend: any[] = costStats?.month_trend ?? [];
@@ -77,27 +116,27 @@ export function CostOverviewCard({ costStats }: { costStats: any }) {
     color: CLOUD_COLORS[c.cloud] || FALLBACK_CLOUD_COLORS[i % FALLBACK_CLOUD_COLORS.length],
   }));
   const monthlyData = monthTrend.map((m) => ({ month: m.month, cost: m.cost }));
-  const totalCost =
-    costStats?.total_cost ?? costData.reduce((sum, item) => sum + item.value, 0);
+  const totalCost = costStats?.total_cost ?? costData.reduce((sum, item) => sum + item.value, 0);
   const costChange = computeMonthChange(monthTrend);
 
   return (
-    <Card className="bg-slate-900 border-slate-800">
+    <Card className="dg-card dg-card-hover">
       <CardHeader className="pb-2">
         <div className="flex items-center justify-between">
           <div>
-            <CardTitle className="text-slate-100">云成本概览</CardTitle>
-            <CardDescription className="text-slate-500">本月各云平台费用支出</CardDescription>
+            <CardTitle className="text-[var(--dg-text-primary)]">云成本概览</CardTitle>
+            <CardDescription className="text-[var(--dg-text-muted)]">本月各云平台费用支出</CardDescription>
           </div>
           <div className="text-right">
-            <p className="text-2xl font-bold text-slate-100">¥{Number(totalCost).toLocaleString()}</p>
-            <p className={`text-xs ${
-              costChange.direction === 'up'
-                ? 'text-emerald-400'
-                : costChange.direction === 'down'
-                ? 'text-red-400'
-                : 'text-slate-500'
-            }`}>
+            <p className="text-2xl font-bold text-[var(--dg-text-primary)] tracking-tight">
+              ¥{Number(totalCost).toLocaleString()}
+            </p>
+            <p className={cn(
+              'text-xs font-medium mt-0.5',
+              costChange.direction === 'up' ? 'text-[var(--dg-green)]' :
+              costChange.direction === 'down' ? 'text-[var(--dg-red)]' :
+              'text-[var(--dg-text-muted)]'
+            )}>
               {costChange.label}
             </p>
           </div>
@@ -106,7 +145,7 @@ export function CostOverviewCard({ costStats }: { costStats: any }) {
       <CardContent>
         <div className="grid grid-cols-2 gap-4">
           <div>
-            <p className="text-sm text-slate-400 mb-2">费用分布</p>
+            <p className="text-sm text-[var(--dg-text-secondary)] mb-2">费用分布</p>
             <div className="h-[180px]">
               <ResponsiveContainer width="100%" height="100%">
                 <PieChart>
@@ -118,42 +157,27 @@ export function CostOverviewCard({ costStats }: { costStats: any }) {
                     outerRadius={70}
                     paddingAngle={2}
                     dataKey="value"
+                    stroke="none"
                   >
                     {costData.map((entry, index) => (
                       <Cell key={`cell-${index}`} fill={entry.color} />
                     ))}
                   </Pie>
-                  <Tooltip
-                    contentStyle={{
-                      backgroundColor: '#0f172a',
-                      border: '1px solid #1e293b',
-                      borderRadius: '6px',
-                      color: '#f8fafc',
-                    }}
-                    formatter={(value: number) => `¥${value.toLocaleString()}`}
-                  />
+                  <Tooltip content={<CustomTooltip />} />
                 </PieChart>
               </ResponsiveContainer>
             </div>
           </div>
           <div>
-            <p className="text-sm text-slate-400 mb-2">月度趋势</p>
+            <p className="text-sm text-[var(--dg-text-secondary)] mb-2">月度趋势</p>
             <div className="h-[180px]">
               <ResponsiveContainer width="100%" height="100%">
                 <BarChart data={monthlyData} margin={{ top: 5, right: 5, left: 0, bottom: 5 }}>
-                  <CartesianGrid strokeDasharray="3 3" stroke="#1e293b" />
-                  <XAxis dataKey="month" stroke="#475569" fontSize={10} tickLine={false} axisLine={false} />
-                  <YAxis stroke="#475569" fontSize={10} tickLine={false} axisLine={false} />
-                  <Tooltip
-                    contentStyle={{
-                      backgroundColor: '#0f172a',
-                      border: '1px solid #1e293b',
-                      borderRadius: '6px',
-                      color: '#f8fafc',
-                    }}
-                    formatter={(value: number) => `¥${value.toLocaleString()}`}
-                  />
-                  <Bar dataKey="cost" fill="#3b82f6" radius={[4, 4, 0, 0]} />
+                  <CartesianGrid strokeDasharray="3 3" className="chart-grid-stroke" stroke="var(--chart-grid)" />
+                  <XAxis dataKey="month" stroke="var(--chart-axis)" fontSize={10} tickLine={false} axisLine={false} />
+                  <YAxis stroke="var(--chart-axis)" fontSize={10} tickLine={false} axisLine={false} />
+                  <Tooltip content={<CustomTooltip />} />
+                  <Bar dataKey="cost" fill="var(--dg-blue)" radius={[4, 4, 0, 0]} />
                 </BarChart>
               </ResponsiveContainer>
             </div>
@@ -164,9 +188,11 @@ export function CostOverviewCard({ costStats }: { costStats: any }) {
             <div key={item.name} className="flex items-center justify-between">
               <div className="flex items-center gap-2">
                 <div className="w-3 h-3 rounded-full" style={{ backgroundColor: item.color }} />
-                <span className="text-sm text-slate-300">{item.name}</span>
+                <span className="text-sm text-[var(--dg-text-secondary)]">{item.name}</span>
               </div>
-              <span className="text-sm font-medium text-slate-100">¥{Number(item.value).toLocaleString()}</span>
+              <span className="text-sm font-semibold text-[var(--dg-text-primary)]">
+                ¥{Number(item.value).toLocaleString()}
+              </span>
             </div>
           ))}
         </div>
@@ -175,7 +201,6 @@ export function CostOverviewCard({ costStats }: { costStats: any }) {
   );
 }
 
-// Top5 资源使用卡片
 export function TopResourceUsageCard({ topUsage }: { topUsage: any }) {
   const topCpuServers = (topUsage?.cpu ?? []).slice(0, 5);
   const topMemoryServers = (topUsage?.memory ?? []).slice(0, 5);
@@ -191,28 +216,32 @@ export function TopResourceUsageCard({ topUsage }: { topUsage: any }) {
     <div>
       <div className="flex items-center gap-2 mb-3">
         {icon}
-        <span className="text-sm font-medium text-slate-300">{label}</span>
+        <span className="text-sm font-semibold text-[var(--dg-text-secondary)]">{label}</span>
       </div>
-      <div className="space-y-2">
+      <div className="space-y-2.5">
         {items.map((item, index) => {
           const usage = Number(item.usage ?? 0);
           return (
-            <div key={item.id ?? index} className="flex items-center gap-2">
-              <span className="text-xs text-slate-500 w-4">{index + 1}</span>
+            <div key={item.id ?? index} className="flex items-center gap-2.5">
+              <span className="text-xs font-mono text-[var(--dg-text-muted)] w-5 text-center">
+                {index + 1}
+              </span>
               <div className="flex-1 min-w-0">
-                <p className="text-xs text-slate-300 truncate">{item.hostname}</p>
-                <div className="flex items-center gap-2">
-                  <div className="flex-1 h-1.5 bg-slate-700 rounded-full overflow-hidden">
+                <p className="text-xs text-[var(--dg-text-secondary)] truncate font-medium">{item.hostname}</p>
+                <div className="flex items-center gap-2 mt-1">
+                  <div className="flex-1 h-1.5 bg-[var(--dg-bg-tertiary)] rounded-full overflow-hidden">
                     <div
-                      className={`h-full rounded-full ${
-                        usage > 80 ? 'bg-red-400' : usage > 60 ? 'bg-amber-400' : BarColor
-                      }`}
-                      style={{ width: `${usage}%` }}
+                      className={cn(
+                        'h-full rounded-full transition-all duration-500',
+                        usage > 80 ? 'bg-[var(--dg-red)]' : usage > 60 ? 'bg-[var(--dg-yellow)]' : BarColor
+                      )}
+                      style={{ width: `${Math.min(usage, 100)}%` }}
                     />
                   </div>
-                  <span className={`text-xs ${
-                    usage > 80 ? 'text-red-400' : usage > 60 ? 'text-amber-400' : 'text-slate-400'
-                  }`}>
+                  <span className={cn(
+                    'text-xs font-mono font-medium w-12 text-right',
+                    usage > 80 ? 'text-[var(--dg-red)]' : usage > 60 ? 'text-[var(--dg-yellow)]' : 'text-[var(--dg-text-muted)]'
+                  )}>
                     {usage.toFixed(1)}%
                   </span>
                 </div>
@@ -225,55 +254,24 @@ export function TopResourceUsageCard({ topUsage }: { topUsage: any }) {
   );
 
   return (
-    <Card className="bg-slate-900 border-slate-800">
+    <Card className="dg-card dg-card-hover">
       <CardHeader className="pb-2">
-        <div className="flex items-center justify-between">
-          <div>
-            <CardTitle className="text-slate-100">Top5 资源使用</CardTitle>
-            <CardDescription className="text-slate-500">CPU、内存、磁盘使用率最高</CardDescription>
-          </div>
+        <div>
+          <CardTitle className="text-[var(--dg-text-primary)]">Top5 资源使用</CardTitle>
+          <CardDescription className="text-[var(--dg-text-muted)]">CPU、内存、磁盘使用率最高</CardDescription>
         </div>
       </CardHeader>
       <CardContent>
         <div className="grid grid-cols-3 gap-4">
-          {/* CPU Top5 */}
-          {renderList(topCpuServers, 'blue', 'bg-blue-400', <Cpu className="h-4 w-4 text-blue-400" />, 'CPU')}
-          {/* Memory Top5 */}
-          {renderList(topMemoryServers, 'emerald', 'bg-emerald-400', <MemoryStick className="h-4 w-4 text-emerald-400" />, '内存')}
-          {/* Disk Top5 */}
-          {renderList(topDiskServers, 'purple', 'bg-purple-400', <Database className="h-4 w-4 text-purple-400" />, '磁盘')}
+          {renderList(topCpuServers, 'blue', 'bg-[var(--dg-blue)]', <Cpu className="h-4 w-4 text-[var(--dg-blue)]" />, 'CPU')}
+          {renderList(topMemoryServers, 'emerald', 'bg-[var(--dg-green)]', <MemoryStick className="h-4 w-4 text-[var(--dg-green)]" />, '内存')}
+          {renderList(topDiskServers, 'purple', 'bg-[var(--dg-purple)]', <Database className="h-4 w-4 text-[var(--dg-purple)]" />, '磁盘')}
         </div>
       </CardContent>
     </Card>
   );
 }
 
-// 将后端 MetricData[] 时间序列转换为图表所需格式 { time, cpu, memory } // Logan.Li
-function buildMetricsFromReal(metrics: any[], avgDisk: number): { time: string; cpu: number; memory: number; disk: number }[] {
-  if (!metrics || metrics.length === 0) return [];
-  // 按 timestamp 分组：同一时刻有 cpu + memory 两条记录
-  const buckets: Record<string, { cpu?: number; memory?: number }> = {};
-  for (const m of metrics) {
-    const ts = m.timestamp;
-    if (!ts) continue;
-    // 提取 HH:MM 格式作为 X 轴标签
-    const d = new Date(ts);
-    const label = `${d.getHours().toString().padStart(2, '0')}:00`;
-    if (!buckets[label]) buckets[label] = {};
-    if (m.name === 'cpu') buckets[label].cpu = Number(m.value) || 0;
-    if (m.name === 'memory') buckets[label].memory = Number(m.value) || 0;
-  }
-  return Object.entries(buckets)
-    .sort((a, b) => a[0].localeCompare(b[0]))
-    .map(([time, v]) => ({
-      time,
-      cpu: Number((v.cpu ?? 0).toFixed(1)),
-      memory: Number((v.memory ?? 0).toFixed(1)),
-      disk: Number(avgDisk.toFixed(1)), // 磁盘无历史序列，用平均值
-    }));
-}
-
-// 资源使用率趋势卡片
 export function ResourceUsageCard({
   avgCpu,
   avgMemory,
@@ -285,28 +283,27 @@ export function ResourceUsageCard({
   avgDisk: number;
   metrics?: any[];
 }) {
-  // 优先使用真实 Agent 指标时间序列；无数据时回退到平均值生成（带随机波动） // Logan.Li
   const realData = buildMetricsFromReal(metrics ?? [], avgDisk);
   const data = realData.length > 0 ? realData : generateMetricsData(avgCpu, avgMemory, avgDisk, 24);
 
   return (
-    <Card className="bg-slate-900 border-slate-800">
+    <Card className="dg-card">
       <CardHeader className="pb-2">
-        <div className="flex items-center justify-between">
+        <div className="flex items-center justify-between flex-wrap gap-3">
           <div>
-            <CardTitle className="text-slate-100">资源使用率趋势</CardTitle>
-            <CardDescription className="text-slate-500">过去24小时系统资源使用情况</CardDescription>
+            <CardTitle className="text-[var(--dg-text-primary)]">资源使用率趋势</CardTitle>
+            <CardDescription className="text-[var(--dg-text-muted)]">过去24小时系统资源使用情况</CardDescription>
           </div>
           <div className="flex items-center gap-2">
-            <Badge variant="outline" className="border-blue-500/30 text-blue-400 bg-blue-500/10">
+            <Badge variant="outline" className="dg-badge-blue border">
               <Cpu className="h-3 w-3 mr-1" />
               CPU
             </Badge>
-            <Badge variant="outline" className="border-emerald-500/30 text-emerald-400 bg-emerald-500/10">
+            <Badge variant="outline" className="dg-badge-green border">
               <Activity className="h-3 w-3 mr-1" />
               内存
             </Badge>
-            <Badge variant="outline" className="border-purple-500/30 text-purple-400 bg-purple-500/10">
+            <Badge variant="outline" className="dg-badge-purple border">
               <HardDrive className="h-3 w-3 mr-1" />
               磁盘
             </Badge>
@@ -319,56 +316,25 @@ export function ResourceUsageCard({
             <AreaChart data={data} margin={{ top: 10, right: 10, left: 0, bottom: 0 }}>
               <defs>
                 <linearGradient id="colorCpu" x1="0" y1="0" x2="0" y2="1">
-                  <stop offset="5%" stopColor="#3b82f6" stopOpacity={0.3} />
-                  <stop offset="95%" stopColor="#3b82f6" stopOpacity={0} />
+                  <stop offset="5%" stopColor="var(--dg-blue)" stopOpacity={0.3} />
+                  <stop offset="95%" stopColor="var(--dg-blue)" stopOpacity={0} />
                 </linearGradient>
                 <linearGradient id="colorMemory" x1="0" y1="0" x2="0" y2="1">
-                  <stop offset="5%" stopColor="#10b981" stopOpacity={0.3} />
-                  <stop offset="95%" stopColor="#10b981" stopOpacity={0} />
+                  <stop offset="5%" stopColor="var(--dg-green)" stopOpacity={0.3} />
+                  <stop offset="95%" stopColor="var(--dg-green)" stopOpacity={0} />
                 </linearGradient>
                 <linearGradient id="colorDisk" x1="0" y1="0" x2="0" y2="1">
-                  <stop offset="5%" stopColor="#a855f7" stopOpacity={0.3} />
-                  <stop offset="95%" stopColor="#a855f7" stopOpacity={0} />
+                  <stop offset="5%" stopColor="var(--dg-purple)" stopOpacity={0.3} />
+                  <stop offset="95%" stopColor="var(--dg-purple)" stopOpacity={0} />
                 </linearGradient>
               </defs>
-              <CartesianGrid strokeDasharray="3 3" stroke="#1e293b" />
-              <XAxis dataKey="time" stroke="#475569" fontSize={12} tickLine={false} axisLine={false} />
-              <YAxis stroke="#475569" fontSize={12} tickLine={false} axisLine={false} unit="%" />
-              <Tooltip
-                contentStyle={{
-                  backgroundColor: '#0f172a',
-                  border: '1px solid #1e293b',
-                  borderRadius: '6px',
-                  color: '#f8fafc',
-                }}
-              />
-              <Area
-                type="monotone"
-                dataKey="cpu"
-                stroke="#3b82f6"
-                fillOpacity={1}
-                fill="url(#colorCpu)"
-                strokeWidth={2}
-                name="CPU"
-              />
-              <Area
-                type="monotone"
-                dataKey="memory"
-                stroke="#10b981"
-                fillOpacity={1}
-                fill="url(#colorMemory)"
-                strokeWidth={2}
-                name="内存"
-              />
-              <Area
-                type="monotone"
-                dataKey="disk"
-                stroke="#a855f7"
-                fillOpacity={1}
-                fill="url(#colorDisk)"
-                strokeWidth={2}
-                name="磁盘"
-              />
+              <CartesianGrid strokeDasharray="3 3" stroke="var(--chart-grid)" />
+              <XAxis dataKey="time" stroke="var(--chart-axis)" fontSize={12} tickLine={false} axisLine={false} />
+              <YAxis stroke="var(--chart-axis)" fontSize={12} tickLine={false} axisLine={false} unit="%" />
+              <Tooltip content={<CustomTooltip />} />
+              <Area type="monotone" dataKey="cpu" stroke="var(--dg-blue)" fillOpacity={1} fill="url(#colorCpu)" strokeWidth={2} name="CPU" />
+              <Area type="monotone" dataKey="memory" stroke="var(--dg-green)" fillOpacity={1} fill="url(#colorMemory)" strokeWidth={2} name="内存" />
+              <Area type="monotone" dataKey="disk" stroke="var(--dg-purple)" fillOpacity={1} fill="url(#colorDisk)" strokeWidth={2} name="磁盘" />
             </AreaChart>
           </ResponsiveContainer>
         </div>

frontend/src/components/dashboard/DashboardRecent.tsx

@@ -3,77 +3,123 @@ import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/com
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { ScrollArea } from '@/components/ui/scroll-area';
+import { Separator } from '@/components/ui/separator';
 import {
   Rocket,
   AlertTriangle,
   ArrowRight,
   Cloud,
   Shield,
+  Server,
+  Circle,
 } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+/**
+ * DashboardRecent - 优化后的仪表盘底部卡片组件
+ * 
+ * 优化点：
+ * 1. 使用 dg-card 工具类替代硬编码的 slate 颜色
+ * 2. 统一的状态指示器样式
+ * 3. 更好的 hover 效果和过渡动画
+ * 4. ScrollArea 使用 scrollbar-thin 类
+ * 5. 空状态显示更友好
+ */
+
+// Status dot component
+function StatusDot({ severity }: { severity: string }) {
+  return (
+    <div
+      className={cn(
+        'w-2 h-2 rounded-full flex-shrink-0 mt-1.5',
+        severity === 'critical' && 'bg-[var(--dg-red)]',
+        severity === 'warning' && 'bg-[var(--dg-yellow)]',
+        severity === 'info' && 'bg-[var(--dg-blue)]',
+      )}
+    />
+  );
+}
+
+// Severity badge
+function SeverityBadge({ severity }: { severity: string }) {
+  return (
+    <Badge
+      variant="outline"
+      className={cn(
+        'text-xs font-medium',
+        severity === 'critical' && 'dg-badge-red border',
+        severity === 'warning' && 'dg-badge-yellow border',
+        severity === 'info' && 'dg-badge-blue border',
+      )}
+    >
+      {severity === 'critical' ? '严重' : severity === 'warning' ? '警告' : '提示'}
+    </Badge>
+  );
+}
 
-// 告警消息卡片
 export function AlertMessagesCard({ alerts }: { alerts: any[] }) {
   const navigate = useNavigate();
   const recentAlerts = alerts.filter((a) => a.status === 'firing').slice(0, 8);
 
   return (
-    <Card className="bg-slate-900 border-slate-800">
+    <Card className="dg-card dg-card-hover">
       <CardHeader className="pb-2">
         <div className="flex items-center justify-between">
           <div>
-            <CardTitle className="text-slate-100">告警消息</CardTitle>
-            <CardDescription className="text-slate-500">最近触发的告警事件</CardDescription>
+            <CardTitle className="text-[var(--dg-text-primary)]">告警消息</CardTitle>
+            <CardDescription className="text-[var(--dg-text-muted)]">最近触发的告警事件</CardDescription>
           </div>
-          <Button variant="ghost" size="sm" className="text-slate-400 hover:text-slate-100" onClick={() => navigate('/alerts')}>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="dg-btn-ghost text-xs"
+            onClick={() => navigate('/alerts')}
+          >
             查看全部
-            <ArrowRight className="h-4 w-4 ml-1" />
+            <ArrowRight className="h-3.5 w-3.5 ml-1" />
           </Button>
         </div>
       </CardHeader>
       <CardContent>
-        <ScrollArea className="h-[320px]">
-          <div className="space-y-2">
-            {recentAlerts.map((alert) => (
-              <div
-                key={alert.id}
-                className="flex items-start gap-3 p-3 rounded-lg bg-slate-800/50 hover:bg-slate-800 transition-colors"
-              >
-                <div className={`w-2 h-2 rounded-full mt-1.5 ${
-                  alert.severity === 'critical' ? 'bg-red-400' :
-                  alert.severity === 'warning' ? 'bg-amber-400' : 'bg-blue-400'
-                }`} />
-                <div className="flex-1 min-w-0">
-                  <div className="flex items-center gap-2">
-                    <span className="text-sm font-medium text-slate-200 truncate">{alert.rule_name}</span>
-                    <Badge
-                      variant="outline"
-                      className={`text-xs ${
-                        alert.severity === 'critical'
-                          ? 'border-red-500/30 text-red-400 bg-red-500/10'
-                          : alert.severity === 'warning'
-                          ? 'border-amber-500/30 text-amber-400 bg-amber-500/10'
-                          : 'border-blue-500/30 text-blue-400 bg-blue-500/10'
-                      }`}
-                    >
-                      {alert.severity === 'critical' ? '严重' : alert.severity === 'warning' ? '警告' : '提示'}
-                    </Badge>
+        <ScrollArea className="h-[320px] scrollbar-thin">
+          {recentAlerts.length === 0 ? (
+            <div className="flex flex-col items-center justify-center py-12 text-[var(--dg-text-muted)]">
+              <AlertTriangle className="h-10 w-10 mb-3 opacity-30" />
+              <p className="text-sm">暂无告警事件</p>
+              <p className="text-xs mt-1 opacity-60">所有系统运行正常</p>
+            </div>
+          ) : (
+            <div className="space-y-1.5 pr-2">
+              {recentAlerts.map((alert) => (
+                <div
+                  key={alert.id}
+                  className="flex items-start gap-3 p-3 rounded-lg bg-[var(--dg-bg-tertiary)]/50 hover:bg-[var(--dg-bg-hover)] transition-all duration-200 cursor-pointer group"
+                  onClick={() => navigate('/alert-center')}
+                >
+                  <StatusDot severity={alert.severity || 'info'} />
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center gap-2 flex-wrap">
+                      <span className="text-sm font-medium text-[var(--dg-text-primary)] truncate">
+                        {alert.rule_name}
+                      </span>
+                      <SeverityBadge severity={alert.severity || 'info'} />
+                    </div>
+                    <p className="text-xs text-[var(--dg-text-muted)] mt-1">{alert.target}</p>
+                    <p className="text-xs text-[var(--dg-text-muted)]/70 line-clamp-1">{alert.message}</p>
                   </div>
-                  <p className="text-xs text-slate-500 mt-1">{alert.target}</p>
-                  <p className="text-xs text-slate-500">{alert.message}</p>
+                  <span className="text-[11px] text-[var(--dg-text-muted)]/50 whitespace-nowrap flex-shrink-0">
+                    {alert.created_at ? new Date(alert.created_at).toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' }) : ''}
+                  </span>
                 </div>
-                <span className="text-xs text-slate-500 whitespace-nowrap">
-                  {alert.created_at ? new Date(alert.created_at).toLocaleString() : ''}
-                </span>
-              </div>
-            ))}
-          </div>
+              ))}
+            </div>
+          )}
         </ScrollArea>
       </CardContent>
     </Card>
   );
 }
 
-// 证书到期卡片
 export function CertificateExpiryCard({ expCerts }: { expCerts: any[] }) {
   const expiringDomains = (expCerts ?? [])
     .map((d) => ({
@@ -86,22 +132,22 @@ export function CertificateExpiryCard({ expCerts }: { expCerts: any[] }) {
   const warningCount = expiringDomains.filter((d) => d.daysUntilExpiry >= 30 && d.daysUntilExpiry < 60).length;
 
   return (
-    <Card className="bg-slate-900 border-slate-800">
+    <Card className="dg-card dg-card-hover">
       <CardHeader className="pb-2">
-        <div className="flex items-center justify-between">
+        <div className="flex items-center justify-between flex-wrap gap-2">
           <div>
-            <CardTitle className="text-slate-100">证书到期提醒</CardTitle>
-            <CardDescription className="text-slate-500">SSL证书到期时间监控</CardDescription>
+            <CardTitle className="text-[var(--dg-text-primary)]">证书到期提醒</CardTitle>
+            <CardDescription className="text-[var(--dg-text-muted)]">SSL证书到期时间监控</CardDescription>
           </div>
           <div className="flex items-center gap-2">
             {criticalCount > 0 && (
-              <Badge className="bg-red-500/20 text-red-400 border-0">
+              <Badge className="dg-badge-red border">
                 <AlertTriangle className="h-3 w-3 mr-1" />
                 {criticalCount} 即将过期
               </Badge>
             )}
             {warningCount > 0 && (
-              <Badge className="bg-amber-500/20 text-amber-400 border-0">
+              <Badge className="dg-badge-yellow border">
                 {warningCount} 30天内过期
               </Badge>
             )}
@@ -109,128 +155,151 @@ export function CertificateExpiryCard({ expCerts }: { expCerts: any[] }) {
         </div>
       </CardHeader>
       <CardContent>
-        <ScrollArea className="h-[280px]">
-          <div className="space-y-2">
-            {expiringDomains.map((domain) => (
-              <div
-                key={domain.id}
-                className="flex items-center justify-between p-3 rounded-lg bg-slate-800/50 hover:bg-slate-800 transition-colors"
-              >
-                <div className="flex items-center gap-3">
-                  <div className={`w-8 h-8 rounded-lg flex items-center justify-center ${
-                    domain.daysUntilExpiry < 30 ? 'bg-red-500/10 text-red-400' :
-                    domain.daysUntilExpiry < 60 ? 'bg-amber-500/10 text-amber-400' :
-                    'bg-emerald-500/10 text-emerald-400'
-                  }`}>
-                    <Shield className="h-4 w-4" />
-                  </div>
-                  <div>
-                    <p className="text-sm font-medium text-slate-200">{domain.name}</p>
-                    <p className="text-xs text-slate-500">到期: {domain.expire_date?.substring(0, 10)}</p>
-                  </div>
-                </div>
-                <Badge
-                  variant="outline"
-                  className={`text-xs ${
-                    domain.daysUntilExpiry < 30
-                      ? 'border-red-500/30 text-red-400 bg-red-500/10'
-                      : domain.daysUntilExpiry < 60
-                      ? 'border-amber-500/30 text-amber-400 bg-amber-500/10'
-                      : 'border-emerald-500/30 text-emerald-400 bg-emerald-500/10'
-                  }`}
+        <ScrollArea className="h-[280px] scrollbar-thin">
+          {expiringDomains.length === 0 ? (
+            <div className="flex flex-col items-center justify-center py-10 text-[var(--dg-text-muted)]">
+              <Shield className="h-10 w-10 mb-3 opacity-30" />
+              <p className="text-sm">暂无证书数据</p>
+            </div>
+          ) : (
+            <div className="space-y-1.5 pr-2">
+              {expiringDomains.map((domain) => (
+                <div
+                  key={domain.id}
+                  className="flex items-center justify-between p-3 rounded-lg bg-[var(--dg-bg-tertiary)]/50 hover:bg-[var(--dg-bg-hover)] transition-all duration-200"
                 >
-                  {domain.daysUntilExpiry < 0 ? '已过期' : `${domain.daysUntilExpiry} 天`}
-                </Badge>
-              </div>
-            ))}
-          </div>
+                  <div className="flex items-center gap-3 min-w-0">
+                    <div
+                      className={cn(
+                        'w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0',
+                        domain.daysUntilExpiry < 30 ? 'bg-[var(--dg-red)]/10' :
+                        domain.daysUntilExpiry < 60 ? 'bg-[var(--dg-yellow)]/10' :
+                        'bg-[var(--dg-green)]/10'
+                      )}
+                    >
+                      <Shield className={cn(
+                        'h-4 w-4',
+                        domain.daysUntilExpiry < 30 ? 'text-[var(--dg-red)]' :
+                        domain.daysUntilExpiry < 60 ? 'text-[var(--dg-yellow)]' :
+                        'text-[var(--dg-green)]'
+                      )} />
+                    </div>
+                    <div className="min-w-0">
+                      <p className="text-sm font-medium text-[var(--dg-text-primary)] truncate">{domain.name}</p>
+                      <p className="text-xs text-[var(--dg-text-muted)]">到期: {domain.expire_date?.substring(0, 10)}</p>
+                    </div>
+                  </div>
+                  <Badge
+                    variant="outline"
+                    className={cn(
+                      'text-xs flex-shrink-0',
+                      domain.daysUntilExpiry < 30 ? 'dg-badge-red border' :
+                      domain.daysUntilExpiry < 60 ? 'dg-badge-yellow border' :
+                      'dg-badge-green border'
+                    )}
+                  >
+                    {domain.daysUntilExpiry < 0 ? '已过期' : `${domain.daysUntilExpiry} 天`}
+                  </Badge>
+                </div>
+              ))}
+            </div>
+          )}
         </ScrollArea>
       </CardContent>
     </Card>
   );
 }
 
-// 发布历史卡片
 export function ReleaseHistoryCard({ releases }: { releases: any[] }) {
   const navigate = useNavigate();
+  const releaseList = releases?.slice(0, 5) ?? [];
+
   return (
-    <Card className="bg-slate-900 border-slate-800">
+    <Card className="dg-card dg-card-hover">
       <CardHeader className="pb-2">
         <div className="flex items-center justify-between">
           <div>
-            <CardTitle className="text-slate-100">发布历史</CardTitle>
-            <CardDescription className="text-slate-500">今日应用发布记录</CardDescription>
+            <CardTitle className="text-[var(--dg-text-primary)]">发布历史</CardTitle>
+            <CardDescription className="text-[var(--dg-text-muted)]">今日应用发布记录</CardDescription>
           </div>
-          <Button variant="ghost" size="sm" className="text-slate-400 hover:text-slate-100" onClick={() => navigate('/releases')}>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="dg-btn-ghost text-xs"
+            onClick={() => navigate('/pipelines')}
+          >
             查看全部
-            <ArrowRight className="h-4 w-4 ml-1" />
+            <ArrowRight className="h-3.5 w-3.5 ml-1" />
           </Button>
         </div>
       </CardHeader>
       <CardContent>
-        <div className="space-y-2">
-          {releases.slice(0, 5).map((release) => (
-            <div
-              key={release.id}
-              className="flex items-center gap-3 p-3 rounded-lg bg-slate-800/50 hover:bg-slate-800 transition-colors"
-            >
+        {releaseList.length === 0 ? (
+          <div className="flex flex-col items-center justify-center py-10 text-[var(--dg-text-muted)]">
+            <Rocket className="h-10 w-10 mb-3 opacity-30" />
+            <p className="text-sm">暂无发布记录</p>
+          </div>
+        ) : (
+          <div className="space-y-2">
+            {releaseList.map((release) => (
               <div
-                className={`w-8 h-8 rounded-lg flex items-center justify-center ${
-                  release.status === 'success'
-                    ? 'bg-emerald-500/10 text-emerald-400'
-                    : release.status === 'failed'
-                    ? 'bg-red-500/10 text-red-400'
-                    : release.status === 'deploying'
-                    ? 'bg-blue-500/10 text-blue-400'
-                    : 'bg-amber-500/10 text-amber-400'
-                }`}
+                key={release.id}
+                className="flex items-center gap-3 p-3 rounded-lg bg-[var(--dg-bg-tertiary)]/50 hover:bg-[var(--dg-bg-hover)] transition-all duration-200"
               >
-                <Rocket className="h-4 w-4" />
-              </div>
-              <div className="flex-1 min-w-0">
-                <div className="flex items-center gap-2">
-                  <span className="text-sm font-medium text-slate-200">{release.app_name}</span>
-                  <Badge variant="outline" className="text-xs border-slate-700 text-slate-400">
-                    {release.version}
-                  </Badge>
+                <div
+                  className={cn(
+                    'w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0',
+                    release.status === 'success' ? 'bg-[var(--dg-green)]/10' :
+                    release.status === 'failed' ? 'bg-[var(--dg-red)]/10' :
+                    release.status === 'deploying' ? 'bg-[var(--dg-blue)]/10' :
+                    'bg-[var(--dg-yellow)]/10'
+                  )}
+                >
+                  <Rocket className={cn(
+                    'h-4 w-4',
+                    release.status === 'success' ? 'text-[var(--dg-green)]' :
+                    release.status === 'failed' ? 'text-[var(--dg-red)]' :
+                    release.status === 'deploying' ? 'text-[var(--dg-blue)]' :
+                    'text-[var(--dg-yellow)]'
+                  )} />
                 </div>
-                <div className="flex items-center gap-2 mt-0.5">
-                  <span className="text-xs text-slate-500">{release.environment}</span>
-                  <span className="text-xs text-slate-500">·</span>
-                  <span className="text-xs text-slate-500">{release.commit_id}</span>
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center gap-2">
+                    <span className="text-sm font-medium text-[var(--dg-text-primary)] truncate">{release.app_name}</span>
+                    <Badge variant="outline" className="text-xs border-[var(--dg-border)] text-[var(--dg-text-muted)] flex-shrink-0">
+                      {release.version}
+                    </Badge>
+                  </div>
+                  <div className="flex items-center gap-2 mt-0.5">
+                    <span className="text-xs text-[var(--dg-text-muted)]">{release.environment}</span>
+                    <span className="text-xs text-[var(--dg-border)]">·</span>
+                    <span className="text-xs text-[var(--dg-text-muted)] truncate">{release.commit_id}</span>
+                  </div>
                 </div>
+                <Badge
+                  variant="outline"
+                  className={cn(
+                    'text-xs flex-shrink-0',
+                    release.status === 'success' ? 'dg-badge-green border' :
+                    release.status === 'failed' ? 'dg-badge-red border' :
+                    release.status === 'deploying' ? 'dg-badge-blue border' :
+                    'dg-badge-yellow border'
+                  )}
+                >
+                  {release.status === 'success' ? '成功' :
+                   release.status === 'failed' ? '失败' :
+                   release.status === 'deploying' ? '发布中' :
+                   release.status === 'rolled_back' ? '已回滚' : '构建中'}
+                </Badge>
               </div>
-              <Badge
-                variant="outline"
-                className={`text-xs ${
-                  release.status === 'success'
-                    ? 'border-emerald-500/30 text-emerald-400 bg-emerald-500/10'
-                    : release.status === 'failed'
-                    ? 'border-red-500/30 text-red-400 bg-red-500/10'
-                    : release.status === 'deploying'
-                    ? 'border-blue-500/30 text-blue-400 bg-blue-500/10'
-                    : 'border-amber-500/30 text-amber-400 bg-amber-500/10'
-                }`}
-              >
-                {release.status === 'success'
-                  ? '成功'
-                  : release.status === 'failed'
-                  ? '失败'
-                  : release.status === 'deploying'
-                  ? '发布中'
-                  : release.status === 'rolled_back'
-                  ? '已回滚'
-                  : '构建中'}
-              </Badge>
-            </div>
-          ))}
-        </div>
+            ))}
+          </div>
+        )}
       </CardContent>
     </Card>
   );
 }
 
-// 服务器状态卡片
 export function ServerStatusCard({ servers }: { servers: any[] }) {
   const navigate = useNavigate();
   const runningServers = servers.filter((s) => s.status === 'running').length;
@@ -238,126 +307,156 @@ export function ServerStatusCard({ servers }: { servers: any[] }) {
   const maintenanceServers = servers.filter((s) => s.status === 'maintenance').length;
 
   return (
-    <Card className="bg-slate-900 border-slate-800">
+    <Card className="dg-card dg-card-hover">
       <CardHeader className="pb-2">
         <div className="flex items-center justify-between">
           <div>
-            <CardTitle className="text-slate-100">服务器状态</CardTitle>
-            <CardDescription className="text-slate-500">服务器运行状态分布</CardDescription>
+            <CardTitle className="text-[var(--dg-text-primary)]">服务器状态</CardTitle>
+            <CardDescription className="text-[var(--dg-text-muted)]">服务器运行状态分布</CardDescription>
           </div>
-          <Button variant="ghost" size="sm" className="text-slate-400 hover:text-slate-100" onClick={() => navigate('/servers')}>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="dg-btn-ghost text-xs"
+            onClick={() => navigate('/servers')}
+          >
             查看全部
-            <ArrowRight className="h-4 w-4 ml-1" />
+            <ArrowRight className="h-3.5 w-3.5 ml-1" />
           </Button>
         </div>
       </CardHeader>
       <CardContent>
-        <div className="grid grid-cols-3 gap-4 mb-4">
-          <div className="text-center p-3 rounded-lg bg-emerald-500/10">
-            <div className="text-2xl font-bold text-emerald-400">{runningServers}</div>
-            <div className="text-xs text-slate-400 mt-1">运行中</div>
+        {/* Status Summary */}
+        <div className="grid grid-cols-3 gap-3 mb-4">
+          <div className="text-center p-3 rounded-xl bg-[var(--dg-green)]/8 border border-[var(--dg-green)]/15">
+            <div className="text-2xl font-bold text-[var(--dg-green)]">{runningServers}</div>
+            <div className="text-xs text-[var(--dg-text-muted)] mt-1">运行中</div>
           </div>
-          <div className="text-center p-3 rounded-lg bg-amber-500/10">
-            <div className="text-2xl font-bold text-amber-400">{maintenanceServers}</div>
-            <div className="text-xs text-slate-400 mt-1">维护中</div>
+          <div className="text-center p-3 rounded-xl bg-[var(--dg-yellow)]/8 border border-[var(--dg-yellow)]/15">
+            <div className="text-2xl font-bold text-[var(--dg-yellow)]">{maintenanceServers}</div>
+            <div className="text-xs text-[var(--dg-text-muted)] mt-1">维护中</div>
           </div>
-          <div className="text-center p-3 rounded-lg bg-slate-500/10">
-            <div className="text-2xl font-bold text-slate-400">{stoppedServers}</div>
-            <div className="text-xs text-slate-400 mt-1">已停止</div>
+          <div className="text-center p-3 rounded-xl bg-[var(--dg-text-muted)]/8 border border-[var(--dg-border)]">
+            <div className="text-2xl font-bold text-[var(--dg-text-muted)]">{stoppedServers}</div>
+            <div className="text-xs text-[var(--dg-text-muted)] mt-1">已停止</div>
           </div>
         </div>
-        <div className="space-y-2">
+
+        {/* Server List */}
+        <div className="space-y-1.5">
           {servers.slice(0, 4).map((server) => (
-            <div key={server.id} className="flex items-center gap-3 p-2 rounded-lg bg-slate-800/50">
-              <div
-                className={`w-2 h-2 rounded-full ${
-                  server.status === 'running'
-                    ? 'bg-emerald-400'
-                    : server.status === 'maintenance'
-                    ? 'bg-amber-400'
-                    : 'bg-slate-400'
-                }`}
+            <div
+              key={server.id}
+              className="flex items-center gap-3 p-2.5 rounded-lg bg-[var(--dg-bg-tertiary)]/50 hover:bg-[var(--dg-bg-hover)] transition-all duration-200"
+            >
+              <Circle
+                className={cn(
+                  'h-2.5 w-2.5 flex-shrink-0 fill-current',
+                  server.status === 'running' ? 'text-[var(--dg-green)]' :
+                  server.status === 'maintenance' ? 'text-[var(--dg-yellow)]' :
+                  'text-[var(--dg-text-muted)]'
+                )}
               />
               <div className="flex-1 min-w-0">
-                <p className="text-sm text-slate-200 truncate">{server.hostname}</p>
-                <p className="text-xs text-slate-500">{server.ip}</p>
+                <p className="text-sm text-[var(--dg-text-primary)] truncate">{server.hostname}</p>
+                <p className="text-xs text-[var(--dg-text-muted)]">{server.ip}</p>
               </div>
-              <div className="text-right">
-                <p className="text-xs text-slate-400">CPU {Number(server.cpu_usage ?? 0).toFixed(1)}%</p>
-                <p className="text-xs text-slate-400">内存 {Number(server.memory_usage ?? 0).toFixed(1)}%</p>
+              <div className="text-right flex-shrink-0">
+                <p className="text-xs text-[var(--dg-text-muted)]">
+                  CPU <span className="text-[var(--dg-text-secondary)] font-medium">{Number(server.cpu_usage ?? 0).toFixed(1)}%</span>
+                </p>
+                <p className="text-xs text-[var(--dg-text-muted)]">
+                  内存 <span className="text-[var(--dg-text-secondary)] font-medium">{Number(server.memory_usage ?? 0).toFixed(1)}%</span>
+                </p>
               </div>
             </div>
           ))}
+          {servers.length === 0 && (
+            <div className="flex flex-col items-center justify-center py-6 text-[var(--dg-text-muted)]">
+              <Server className="h-8 w-8 mb-2 opacity-30" />
+              <p className="text-sm">暂无服务器</p>
+            </div>
+          )}
         </div>
       </CardContent>
     </Card>
   );
 }
 
-// K8s集群状态卡片
 export function KubernetesClusterCard({ clusters }: { clusters: any[] }) {
   const navigate = useNavigate();
+
   return (
-    <Card className="bg-slate-900 border-slate-800">
+    <Card className="dg-card dg-card-hover">
       <CardHeader className="pb-2">
         <div className="flex items-center justify-between">
           <div>
-            <CardTitle className="text-slate-100">K8s集群</CardTitle>
-            <CardDescription className="text-slate-500">Kubernetes集群健康状态</CardDescription>
+            <CardTitle className="text-[var(--dg-text-primary)]">K8s集群</CardTitle>
+            <CardDescription className="text-[var(--dg-text-muted)]">Kubernetes集群健康状态</CardDescription>
           </div>
-          <Button variant="ghost" size="sm" className="text-slate-400 hover:text-slate-100" onClick={() => navigate('/clusters')}>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="dg-btn-ghost text-xs"
+            onClick={() => navigate('/kubernetes')}
+          >
             查看全部
-            <ArrowRight className="h-4 w-4 ml-1" />
+            <ArrowRight className="h-3.5 w-3.5 ml-1" />
           </Button>
         </div>
       </CardHeader>
       <CardContent>
-        <div className="space-y-3">
-          {clusters.map((cluster) => {
-            const cpuUsage = Number(cluster.cpu_usage ?? 0);
-            const memoryUsage = Number(cluster.memory_usage ?? 0);
-            return (
-              <div key={cluster.id} className="p-3 rounded-lg bg-slate-800/50">
-                <div className="flex items-center justify-between mb-2">
-                  <div className="flex items-center gap-2">
-                    <Cloud className="h-4 w-4 text-blue-400" />
-                    <span className="text-sm font-medium text-slate-200">{cluster.name}</span>
+        {clusters.length === 0 ? (
+          <div className="flex flex-col items-center justify-center py-10 text-[var(--dg-text-muted)]">
+            <Cloud className="h-10 w-10 mb-3 opacity-30" />
+            <p className="text-sm">暂无集群数据</p>
+          </div>
+        ) : (
+          <div className="space-y-3">
+            {clusters.map((cluster) => {
+              const cpuUsage = Number(cluster.cpu_usage ?? 0);
+              const memoryUsage = Number(cluster.memory_usage ?? 0);
+              return (
+                <div
+                  key={cluster.id}
+                  className="p-3.5 rounded-xl bg-[var(--dg-bg-tertiary)]/50 hover:bg-[var(--dg-bg-hover)] transition-all duration-200 cursor-pointer"
+                  onClick={() => navigate(`/kubernetes/${cluster.code || cluster.id}`)}
+                >
+                  <div className="flex items-center justify-between mb-3">
+                    <div className="flex items-center gap-2.5">
+                      <Cloud className="h-4.5 w-4.5 text-[var(--dg-blue)]" />
+                      <span className="text-sm font-semibold text-[var(--dg-text-primary)]">{cluster.name}</span>
+                    </div>
+                    <Badge
+                      variant="outline"
+                      className={cn(
+                        'text-xs',
+                        cluster.status === 'healthy' ? 'dg-badge-green border' :
+                        cluster.status === 'warning' ? 'dg-badge-yellow border' :
+                        'dg-badge-red border'
+                      )}
+                    >
+                      {cluster.status === 'healthy' ? '健康' : cluster.status === 'warning' ? '警告' : '异常'}
+                    </Badge>
                   </div>
-                  <Badge
-                    variant="outline"
-                    className={`text-xs ${
-                      cluster.status === 'healthy'
-                        ? 'border-emerald-500/30 text-emerald-400 bg-emerald-500/10'
-                        : cluster.status === 'warning'
-                        ? 'border-amber-500/30 text-amber-400 bg-amber-500/10'
-                        : 'border-red-500/30 text-red-400 bg-red-500/10'
-                    }`}
-                  >
-                    {cluster.status === 'healthy' ? '健康' : cluster.status === 'warning' ? '警告' : '异常'}
-                  </Badge>
-                </div>
-                <div className="grid grid-cols-4 gap-2 text-center">
-                  <div>
-                    <div className="text-sm font-medium text-slate-200">{cluster.node_count ?? 0}</div>
-                    <div className="text-xs text-slate-500">节点</div>
-                  </div>
-                  <div>
-                    <div className="text-sm font-medium text-slate-200">{cluster.pod_count ?? 0}</div>
-                    <div className="text-xs text-slate-500">Pod</div>
-                  </div>
-                  <div>
-                    <div className="text-sm font-medium text-slate-200">{cpuUsage.toFixed(1)}%</div>
-                    <div className="text-xs text-slate-500">CPU</div>
-                  </div>
-                  <div>
-                    <div className="text-sm font-medium text-slate-200">{memoryUsage.toFixed(1)}%</div>
-                    <div className="text-xs text-slate-500">内存</div>
+                  <div className="grid grid-cols-4 gap-2 text-center">
+                    {[
+                      { label: '节点', value: cluster.node_count ?? 0 },
+                      { label: 'Pod', value: cluster.pod_count ?? 0 },
+                      { label: 'CPU', value: `${cpuUsage.toFixed(1)}%` },
+                      { label: '内存', value: `${memoryUsage.toFixed(1)}%` },
+                    ].map((item) => (
+                      <div key={item.label} className="p-1.5 rounded-lg bg-[var(--dg-bg-primary)]/50">
+                        <div className="text-sm font-semibold text-[var(--dg-text-primary)]">{item.value}</div>
+                        <div className="text-[10px] text-[var(--dg-text-muted)] mt-0.5">{item.label}</div>
+                      </div>
+                    ))}
                   </div>
                 </div>
-              </div>
-            );
-          })}
-        </div>
+              );
+            })}
+          </div>
+        )}
       </CardContent>
     </Card>
   );

frontend/src/components/dashboard/DashboardStats.tsx

@@ -1,7 +1,40 @@
 import { Card, CardContent } from '@/components/ui/card';
-import { TrendingUp, TrendingDown } from 'lucide-react';
+import { TrendingUp, TrendingDown, Minus } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+/**
+ * StatCard - 优化后的统计卡片组件
+ * 
+ * 优化点：
+ * 1. 使用 dg-card 工具类替代硬编码样式
+ * 2. 添加 hover 效果和点击交互
+ * 3. 图标颜色通过主题变量映射
+ * 4. 趋势显示更直观
+ * 5. 添加 shimmer loading 效果支持
+ */
+
+const colorClasses: Record<string, { bg: string; icon: string; glow: string }> = {
+  blue: { bg: 'bg-[var(--dg-blue)]/10', icon: 'text-[var(--dg-blue)]', glow: 'shadow-[var(--dg-blue)]/10' },
+  emerald: { bg: 'bg-[var(--dg-green)]/10', icon: 'text-[var(--dg-green)]', glow: 'shadow-[var(--dg-green)]/10' },
+  amber: { bg: 'bg-[var(--dg-yellow)]/10', icon: 'text-[var(--dg-yellow)]', glow: 'shadow-[var(--dg-yellow)]/10' },
+  rose: { bg: 'bg-[var(--dg-red)]/10', icon: 'text-[var(--dg-red)]', glow: 'shadow-[var(--dg-red)]/10' },
+  purple: { bg: 'bg-[var(--dg-purple)]/10', icon: 'text-[var(--dg-purple)]', glow: 'shadow-[var(--dg-purple)]/10' },
+  cyan: { bg: 'bg-[var(--dg-cyan)]/10', icon: 'text-[var(--dg-cyan)]', glow: 'shadow-[var(--dg-cyan)]/10' },
+  orange: { bg: 'bg-[var(--dg-orange)]/10', icon: 'text-[var(--dg-orange)]', glow: 'shadow-[var(--dg-orange)]/10' },
+};
+
+interface StatCardProps {
+  title: string;
+  value: string | number;
+  description?: string;
+  icon: React.ElementType;
+  trend?: 'up' | 'down' | 'neutral';
+  trendValue?: string;
+  color: string;
+  onClick?: () => void;
+  loading?: boolean;
+}
 
-// 统计卡片组件
 export function StatCard({
   title,
   value,
@@ -11,56 +44,70 @@ export function StatCard({
   trendValue,
   color,
   onClick,
-}: {
-  title: string;
-  value: string | number;
-  description?: string;
-  icon: React.ElementType;
-  trend?: 'up' | 'down' | 'neutral';
-  trendValue?: string;
-  color: string;
-  onClick?: () => void;
-}) {
-  const colorClasses: Record<string, { bg: string; text: string }> = {
-    blue: { bg: 'bg-blue-500/10', text: 'text-blue-400' },
-    emerald: { bg: 'bg-emerald-500/10', text: 'text-emerald-400' },
-    amber: { bg: 'bg-amber-500/10', text: 'text-amber-400' },
-    rose: { bg: 'bg-rose-500/10', text: 'text-rose-400' },
-    purple: { bg: 'bg-purple-500/10', text: 'text-purple-400' },
-    cyan: { bg: 'bg-cyan-500/10', text: 'text-cyan-400' },
-    orange: { bg: 'bg-orange-500/10', text: 'text-orange-400' },
-  };
-  const colors = colorClasses[color];
+  loading = false,
+}: StatCardProps) {
+  const colors = colorClasses[color] || colorClasses.blue;
+
+  if (loading) {
+    return (
+      <Card className="dg-card overflow-hidden">
+        <CardContent className="p-6 space-y-4">
+          <div className="flex items-start justify-between">
+            <div className="space-y-3 flex-1">
+              <div className="dg-skeleton h-4 w-24 rounded" />
+              <div className="dg-skeleton h-8 w-16 rounded" />
+            </div>
+            <div className="dg-skeleton h-10 w-10 rounded-lg" />
+          </div>
+          <div className="dg-skeleton h-3 w-32 rounded" />
+        </CardContent>
+      </Card>
+    );
+  }
+
+  const TrendIcon = trend === 'up' ? TrendingUp : trend === 'down' ? TrendingDown : Minus;
+  const trendColor = trend === 'up'
+    ? 'text-[var(--dg-green)]'
+    : trend === 'down'
+    ? 'text-[var(--dg-red)]'
+    : 'text-[var(--dg-text-muted)]';
 
   return (
     <Card
-      className="bg-slate-900 border-slate-800 hover:border-slate-700 transition-all cursor-pointer"
+      className={cn(
+        'dg-card dg-card-hover cursor-pointer overflow-hidden',
+        onClick && 'cursor-pointer',
+      )}
       onClick={onClick}
     >
       <CardContent className="p-6">
-        <div className="flex items-start justify-between">
-          <div className="space-y-2">
-            <p className="text-sm font-medium text-slate-400">{title}</p>
-            <div className="flex items-baseline gap-2">
-              <h3 className="text-2xl font-bold text-slate-100">{value}</h3>
+        <div className="flex items-start justify-between gap-4">
+          <div className="space-y-3 min-w-0 flex-1">
+            <p className="text-sm font-medium text-[var(--dg-text-secondary)] truncate">
+              {title}
+            </p>
+            <div className="flex items-baseline gap-2 flex-wrap">
+              <h3 className="text-2xl font-bold text-[var(--dg-text-primary)] tracking-tight">
+                {value}
+              </h3>
               {trend && trendValue && (
-                <span
-                  className={`flex items-center text-xs font-medium ${
-                    trend === 'up' ? 'text-emerald-400' : trend === 'down' ? 'text-red-400' : 'text-slate-400'
-                  }`}
-                >
-                  {trend === 'up' ? (
-                    <TrendingUp className="h-3 w-3 mr-0.5" />
-                  ) : trend === 'down' ? (
-                    <TrendingDown className="h-3 w-3 mr-0.5" />
-                  ) : null}
+                <span className={cn('flex items-center text-xs font-semibold gap-0.5', trendColor)}>
+                  <TrendIcon className="h-3.5 w-3.5" />
                   {trendValue}
                 </span>
               )}
             </div>
-            {description && <p className="text-xs text-slate-500">{description}</p>}
+            {description && (
+              <p className="text-xs text-[var(--dg-text-muted)]">{description}</p>
+            )}
           </div>
-          <div className={`p-3 rounded-lg ${colors.bg} ${colors.text}`}>
+          <div
+            className={cn(
+              'p-3 rounded-xl flex-shrink-0',
+              colors.bg,
+              colors.icon,
+            )}
+          >
             <Icon className="h-5 w-5" />
           </div>
         </div>

frontend/src/components/layout/Breadcrumb.tsx

@@ -0,0 +1,157 @@
+import { Link, useLocation } from 'react-router-dom';
+import { ChevronRight, Home } from 'lucide-react';
+import { useMemo } from 'react';
+
+/**
+ * Route name mapping - breadcrumb display names
+ */
+const ROUTE_NAME_MAP: Record<string, string> = {
+  '': '仪表盘',
+  'servers': '服务器管理',
+  'cloud-accounts': '云账号管理',
+  'domains': '域名管理',
+  'regions': '区域管理',
+  'platforms': '云平台',
+  'cloud-billing': '云账单',
+  'kubernetes': 'Kubernetes',
+  'clusters': '集群列表',
+  'nodes': '节点管理',
+  'workloads': '工作负载',
+  'deployments': 'Deployments',
+  'statefulsets': 'StatefulSets',
+  'daemonsets': 'DaemonSets',
+  'cronjobs': '定时任务',
+  'services': 'Services',
+  'ingresses': 'Ingresses',
+  'configmaps': 'ConfigMaps',
+  'secrets': 'Secrets',
+  'hpas': 'HPA',
+  'pvcs': '存储',
+  'metrics': '资源用量',
+  'events': '事件',
+  'capacity': '容量分析',
+  'topology': '架构拓扑',
+  'namespace': '命名空间',
+  'workload': '工作负载',
+  'view': '查看',
+  'edit': '编辑',
+  'pipelines': '流水线',
+  'deploy': '应用发布',
+  'configureTools': '发布配置',
+  'groups': '用户组',
+  'rbac': '权限管理',
+  'monitor-center': '资源监控',
+  'trace': '链路追踪',
+  'alert-center': '告警中心',
+  'datasources': '数据源',
+  'dashboards': '监控大屏',
+  'host-monitor': '主机监控',
+  'alerts': '监控告警',
+  'approval': '资源申请',
+  'scripts': '脚本库',
+  'ansible': 'Ansible',
+  'ai-assistant': '智能助手',
+  'ai-alert-analyzer': '告警分析',
+  'ai-predictive': '容量预测',
+  'users': '用户管理',
+  'roles': '角色权限',
+  'logs-audit': '操作审计',
+  'terminal-audit': '终端审计',
+  'credentials': '凭证配置',
+  'settings': '系统设置',
+};
+
+interface BreadcrumbItem {
+  name: string;
+  path: string;
+  isLast: boolean;
+}
+
+/**
+ * Breadcrumb - 智能面包屑导航
+ * 
+ * 根据当前路由自动生成面包屑路径
+ * 支持动态参数（如 clusterCode, namespace, name）显示
+ */
+export function Breadcrumb() {
+  const location = useLocation();
+
+  const breadcrumbs = useMemo<BreadcrumbItem[]>(() => {
+    const paths = location.pathname.split('/').filter(Boolean);
+    if (paths.length === 0) {
+      return [{ name: '仪表盘', path: '/', isLast: true }];
+    }
+
+    const items: BreadcrumbItem[] = [];
+    let currentPath = '';
+
+    paths.forEach((segment, index) => {
+      currentPath += `/${segment}`;
+      const isLast = index === paths.length - 1;
+
+      // Check if it's a dynamic parameter (looks like an identifier, not a known route)
+      const knownName = ROUTE_NAME_MAP[segment];
+      let displayName = knownName;
+
+      if (!displayName) {
+        // Dynamic parameter - could be cluster code, namespace, resource name, etc.
+        if (segment.length > 20 || segment.includes('-')) {
+          // Likely a UUID or complex identifier - truncate
+          displayName = segment.length > 15 ? `${segment.slice(0, 12)}...` : segment;
+        } else {
+          displayName = segment;
+        }
+      }
+
+      items.push({
+        name: displayName,
+        path: currentPath,
+        isLast,
+      });
+    });
+
+    return items;
+  }, [location.pathname]);
+
+  // Don't show breadcrumb on dashboard (root path)
+  if (breadcrumbs.length <= 1 && location.pathname === '/') {
+    return null;
+  }
+
+  return (
+    <nav
+      aria-label="面包屑导航"
+      className="flex items-center gap-1.5 text-sm animate-fade-in"
+    >
+      <Link
+        to="/"
+        className="flex items-center gap-1 text-[var(--dg-text-muted)] hover:text-[var(--dg-blue)] transition-colors duration-200"
+        title="仪表盘"
+      >
+        <Home className="h-3.5 w-3.5" />
+      </Link>
+
+      {breadcrumbs.map((item) => (
+        <div key={item.path} className="flex items-center gap-1.5">
+          <ChevronRight className="h-3.5 w-3.5 text-[var(--dg-border)] flex-shrink-0" />
+          {item.isLast ? (
+            <span
+              className="text-[var(--dg-text-primary)] font-medium truncate max-w-[200px] sm:max-w-[300px] md:max-w-[400px]"
+              title={item.name}
+            >
+              {item.name}
+            </span>
+          ) : (
+            <Link
+              to={item.path}
+              className="text-[var(--dg-text-muted)] hover:text-[var(--dg-blue)] transition-colors duration-200 truncate max-w-[150px]"
+              title={item.name}
+            >
+              {item.name}
+            </Link>
+          )}
+        </div>
+      ))}
+    </nav>
+  );
+}

frontend/src/components/layout/ErrorBoundary.tsx

@@ -0,0 +1,133 @@
+import { Component, type ErrorInfo, type ReactNode } from 'react';
+import { Button } from '@/components/ui/button';
+import { AlertTriangle, RotateCcw, Home, Bug } from 'lucide-react';
+
+interface Props {
+  children: ReactNode;
+  fallback?: ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+  error: Error | null;
+  errorInfo: ErrorInfo | null;
+}
+
+/**
+ * ErrorBoundary - 全局错误边界组件
+ * 
+ * 捕获 React 组件树中的错误，防止整个应用崩溃
+ * 提供友好的错误提示和恢复操作
+ */
+export class ErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = { hasError: false, error: null, errorInfo: null };
+  }
+
+  static getDerivedStateFromError(error: Error): State {
+    return { hasError: true, error, errorInfo: null };
+  }
+
+  override componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    console.error('[ErrorBoundary] 捕获到错误:', error);
+    console.error('[ErrorBoundary] 错误信息:', errorInfo.componentStack);
+    this.setState({ error, errorInfo });
+  }
+
+  handleRetry = () => {
+    this.setState({ hasError: false, error: null, errorInfo: null });
+  };
+
+  handleGoHome = () => {
+    window.location.href = '/';
+  };
+
+  handleReport = () => {
+    const { error, errorInfo } = this.state;
+    const body = `## 错误报告\n\n**时间:** ${new Date().toISOString()}\n**URL:** ${window.location.href}\n**用户代理:** ${navigator.userAgent}\n\n### 错误信息\n\n\`\`\`\n${error?.name}: ${error?.message}\n\`\`\`\n\n### 组件堆栈\n\n\`\`\`\n${errorInfo?.componentStack}\n\`\`\`\n`;
+    navigator.clipboard.writeText(body).then(() => {
+      alert('错误信息已复制到剪贴板，请粘贴到 Issue 中');
+    });
+  };
+
+  override render() {
+    if (this.state.hasError) {
+      if (this.props.fallback) {
+        return this.props.fallback;
+      }
+
+      return (
+        <div className="min-h-[60vh] flex items-center justify-center p-6">
+          <div className="dg-card max-w-lg w-full p-8 text-center space-y-6">
+            {/* Error Icon */}
+            <div className="mx-auto w-16 h-16 rounded-2xl bg-red-500/10 flex items-center justify-center">
+              <AlertTriangle className="h-8 w-8 text-red-400" />
+            </div>
+
+            {/* Title */}
+            <div>
+              <h2 className="text-xl font-bold text-[var(--dg-text-primary)]">
+                页面出现错误
+              </h2>
+              <p className="text-sm text-[var(--dg-text-muted)] mt-2">
+                抱歉，该页面遇到了意外错误。您可以尝试重新加载或返回首页。
+              </p>
+            </div>
+
+            {/* Error Detail (collapsible) */}
+            {this.state.error && (
+              <div className="text-left">
+                <details className="group">
+                  <summary className="cursor-pointer text-xs text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)] transition-colors flex items-center gap-1.5">
+                    <Bug className="h-3.5 w-3.5" />
+                    查看错误详情
+                  </summary>
+                  <div className="mt-2 p-3 rounded-lg bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] overflow-auto max-h-48">
+                    <code className="text-xs text-red-400 font-mono block whitespace-pre-wrap">
+                      {this.state.error.name}: {this.state.error.message}
+                    </code>
+                    {this.state.errorInfo && (
+                      <pre className="text-xs text-[var(--dg-text-muted)] mt-2 whitespace-pre-wrap">
+                        {this.state.errorInfo.componentStack}
+                      </pre>
+                    )}
+                  </div>
+                </details>
+              </div>
+            )}
+
+            {/* Actions */}
+            <div className="flex items-center justify-center gap-3">
+              <Button
+                variant="outline"
+                className="dg-btn-secondary"
+                onClick={this.handleGoHome}
+              >
+                <Home className="h-4 w-4 mr-1.5" />
+                返回首页
+              </Button>
+              <Button
+                className="dg-btn-primary"
+                onClick={this.handleRetry}
+              >
+                <RotateCcw className="h-4 w-4 mr-1.5" />
+                重新加载
+              </Button>
+              <Button
+                variant="outline"
+                className="dg-btn-ghost"
+                onClick={this.handleReport}
+              >
+                <Bug className="h-4 w-4 mr-1.5" />
+                复制错误
+              </Button>
+            </div>
+          </div>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}

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>
   );
 }

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>
   );

frontend/src/components/layout/PageTransition.tsx

@@ -0,0 +1,34 @@
+import { useRef, useEffect, useState } from 'react';
+import { useLocation } from 'react-router-dom';
+
+/**
+ * PageTransition - 页面切换过渡动画包装器
+ * 
+ * 使用 IntersectionObserver + CSS animation 实现平滑的页面进入动画
+ * 所有子页面自动获得 fade-in 动画效果
+ */
+export function PageTransition({ children, key }: { children: React.ReactNode; key?: string }) {
+  const ref = useRef<HTMLDivElement>(null);
+  const [isVisible, setIsVisible] = useState(false);
+  const location = useLocation();
+  const transitionKey = key || location.pathname;
+
+  useEffect(() => {
+    // Reset visibility on route change
+    setIsVisible(false);
+    const timer = setTimeout(() => setIsVisible(true), 30);
+    return () => clearTimeout(timer);
+  }, [transitionKey]);
+
+  return (
+    <div
+      ref={ref}
+      className={`transition-all duration-350 ease-out ${
+        isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-2'
+      }`}
+      style={{ willChange: 'opacity, transform' }}
+    >
+      {children}
+    </div>
+  );
+}

frontend/src/components/layout/Sidebar.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { NavLink, useLocation } from 'react-router-dom';
 import { cn } from '@/lib/utils';
 import { useThemeStore, useMenuStore } from '@/store';
@@ -9,10 +9,10 @@ import {
   Menu, Network, CloudCog, Globe, MapPin, Key,
   Brain, Activity, BarChart3, GitBranch,
   Bot, AlertTriangle, Container, Boxes, Clock, Rocket,
-  Layers,
 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { ScrollArea } from '@/components/ui/scroll-area';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 
 interface MenuItem {
   id: string;
@@ -39,7 +39,6 @@ const menuItems: MenuItem[] = [
     id: 'kubernetes', name: 'Kubernetes', icon: Cloud,
     children: [
       { id: 'k8s-clusters', name: '集群列表', icon: Cloud, path: '/kubernetes' },
-      { id: 'k8s-compare', name: '多集群对比', icon: Layers, path: '/kubernetes/compare' },
       { id: 'k8s-nodes', name: '节点管理', icon: Cpu, path: '/nodes' },
       {
         id: 'k8s-workload', name: '工作负载', icon: Boxes,
@@ -95,7 +94,7 @@ const menuItems: MenuItem[] = [
     children: [
       { id: 'cronjobs', name: '定时任务', icon: PlayCircle, path: '/cronjobs' },
       { id: 'scripts', name: '脚本库', icon: FileCode, path: '/scripts' },
-      { id: 'ansible', name: '远程执行', icon: Terminal, path: '/remote-exec' },
+      { id: 'ansible', name: '远程执行', icon: Terminal, path: '/ansible' },
     ],
   },
   {
@@ -120,18 +119,38 @@ const menuItems: MenuItem[] = [
   },
 ];
 
+/**
+ * MenuItemComponent - 侧边栏菜单项（支持多级嵌套）
+ * 
+ * 优化点：
+ * 1. 使用 Tooltip 在折叠状态下显示菜单名称
+ * 2. 动画过渡平滑
+ * 3. 活动状态判断更精确
+ * 4. 子菜单展开/收起动画
+ */
 function MenuItemComponent({ item, depth = 0 }: { item: MenuItem; depth?: number }) {
   const location = useLocation();
   const { openMenus, toggleMenu, activeMenu, setActiveMenu } = useMenuStore();
   const { sidebarCollapsed } = useThemeStore();
   const hasChildren = item.children && item.children.length > 0;
   const isOpen = openMenus.includes(item.id);
+  
+  // Determine if this menu item is active
   const isActive = item.path
     ? location.pathname === item.path || location.pathname.startsWith(item.path + '/')
     : (item.id === 'kubernetes' && location.pathname.startsWith('/kubernetes')) ||
       (item.id === 'k8s-workload' && location.pathname.startsWith('/workloads')) ||
+      (item.id === 'k8s-network' && (location.pathname.includes('/services') || location.pathname.includes('/ingresses'))) ||
+      (item.id === 'k8s-config' && (location.pathname.includes('/configmaps') || location.pathname.includes('/secrets'))) ||
       activeMenu === item.id;
 
+  const isActiveParent = hasChildren && item.children?.some((child) => {
+    if (child.path) {
+      return location.pathname === child.path || location.pathname.startsWith(child.path + '/');
+    }
+    return false;
+  });
+
   const handleClick = () => {
     if (hasChildren) {
       toggleMenu(item.id);
@@ -140,107 +159,184 @@ function MenuItemComponent({ item, depth = 0 }: { item: MenuItem; depth?: number
     }
   };
 
+  // Collapsed mode (only top-level)
   if (sidebarCollapsed && depth === 0) {
     return (
-      <div className="relative group">
-        <Button
-          variant={isActive ? 'secondary' : 'ghost'}
-          size="icon"
-          className={cn('w-10 h-10 mx-auto mb-1', isActive && 'bg-blue-600/20 text-blue-400')}
-          asChild={!hasChildren}
-        >
-          {hasChildren ? (
-            <span onClick={handleClick}><item.icon className="h-5 w-5" /></span>
-          ) : (
-            <NavLink to={item.path || '#'} onClick={handleClick}><item.icon className="h-5 w-5" /></NavLink>
-          )}
-        </Button>
-        <div className="absolute left-full top-1/2 -translate-y-1/2 ml-2 px-3 py-1.5 bg-slate-800 text-slate-100 text-sm rounded-md opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all whitespace-nowrap z-50 border border-slate-700">
-          {item.name}
-          {hasChildren && (
-            <div className="absolute left-0 top-0 mt-2 ml-2 w-48 bg-slate-800 rounded-md border border-slate-700 shadow-lg py-1">
-              {item.children?.map((child) => (
-                <NavLink key={child.id} to={child.path || '#'}
-                  className={({ isActive }) => cn('block px-4 py-2 text-sm hover:bg-slate-700 transition-colors', isActive ? 'text-blue-400 bg-blue-600/10' : 'text-slate-300')}>
-                  {child.name}
-                </NavLink>
-              ))}
+      <TooltipProvider delayDuration={100}>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <div className="relative">
+              {hasChildren ? (
+                <Button
+                  variant={isActive || isActiveParent ? 'secondary' : 'ghost'}
+                  size="icon"
+                  className={cn(
+                    'w-10 h-10 mx-auto mb-1 transition-all duration-200',
+                    (isActive || isActiveParent)
+                      ? 'bg-[var(--dg-blue)]/15 text-[var(--dg-blue)]'
+                      : 'text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)] hover:bg-[var(--dg-bg-hover)]',
+                  )}
+                  onClick={handleClick}
+                >
+                  <item.icon className="h-5 w-5" />
+                </Button>
+              ) : (
+                <Button
+                  variant={isActive ? 'secondary' : 'ghost'}
+                  size="icon"
+                  className={cn(
+                    'w-10 h-10 mx-auto mb-1 transition-all duration-200',
+                    isActive
+                      ? 'bg-[var(--dg-blue)]/15 text-[var(--dg-blue)]'
+                      : 'text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)] hover:bg-[var(--dg-bg-hover)]',
+                  )}
+                  asChild
+                >
+                  <NavLink to={item.path || '#'} onClick={handleClick}>
+                    <item.icon className="h-5 w-5" />
+                  </NavLink>
+                </Button>
+              )}
             </div>
-          )}
-        </div>
-      </div>
+          </TooltipTrigger>
+          <TooltipContent side="right" className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]">
+            {item.name}
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
     );
   }
 
   return (
-    <div className={cn('mb-0.5', depth > 0 && 'ml-3')}>
+    <div className={cn('mb-0.5', depth > 0 && 'ml-2.5')}>
       {hasChildren ? (
         <>
           <Button
-            variant={isActive ? 'secondary' : 'ghost'}
-            className={cn('w-full justify-between h-8 px-2.5 text-xs font-normal', isActive ? 'bg-blue-600/20 text-blue-400 hover:bg-blue-600/30' : 'text-slate-300 hover:text-slate-100 hover:bg-slate-800')}
+            variant={isActive || isActiveParent ? 'secondary' : 'ghost'}
+            className={cn(
+              'w-full justify-between h-8 px-2.5 text-xs font-normal transition-all duration-200',
+              (isActive || isActiveParent)
+                ? 'bg-[var(--dg-blue)]/10 text-[var(--dg-blue)] hover:bg-[var(--dg-blue)]/15'
+                : 'text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)] hover:bg-[var(--dg-bg-hover)]',
+            )}
             onClick={handleClick}
           >
-            <span className="flex items-center gap-1.5">
-              <item.icon className="h-3.5 w-3.5" />
-              <span>{item.name}</span>
+            <span className="flex items-center gap-2">
+              <item.icon className={cn('h-3.5 w-3.5', (isActive || isActiveParent) && 'text-[var(--dg-blue)]')} />
+              <span className="truncate">{item.name}</span>
             </span>
-            {isOpen ? <ChevronDown className="h-3 w-3 text-slate-500" /> : <ChevronRight className="h-3 w-3 text-slate-500" />}
+            <ChevronDown
+              className={cn(
+                'h-3 w-3 text-[var(--dg-text-muted)] transition-transform duration-200',
+                !isOpen && '-rotate-90',
+              )}
+            />
           </Button>
-          {isOpen && (
-            <div className="mt-0.5 space-y-0.5">
+          {/* Submenu with animation */}
+          <div
+            className={cn(
+              'overflow-hidden transition-all duration-200 ease-in-out',
+              isOpen ? 'max-h-[800px] opacity-100 mt-0.5' : 'max-h-0 opacity-0',
+            )}
+          >
+            <div className="space-y-0.5 border-l border-[var(--dg-border)] ml-4 pl-1.5">
               {item.children?.map((child) => (
                 <MenuItemComponent key={child.id} item={child} depth={depth + 1} />
               ))}
             </div>
-          )}
+          </div>
         </>
       ) : (
         <NavLink
           to={item.path || '#'}
           onClick={handleClick}
-          className={({ isActive }) =>
-            cn('flex items-center gap-1.5 h-8 px-2.5 text-xs rounded-md transition-colors',
-              isActive ? 'bg-blue-600/20 text-blue-400' : 'text-slate-400 hover:text-slate-100 hover:bg-slate-800')
+          className={({ isActive: navActive }) =>
+            cn(
+              'flex items-center gap-2 h-8 px-2.5 text-xs rounded-md transition-all duration-200',
+              navActive || isActive
+                ? 'bg-[var(--dg-blue)]/10 text-[var(--dg-blue)] font-medium'
+                : 'text-[var(--dg-text-secondary)] hover:text-[var(--dg-text-primary)] hover:bg-[var(--dg-bg-hover)]',
+            )
           }
         >
-          <item.icon className="h-3.5 w-3.5" />
-          <span>{item.name}</span>
+          <item.icon className="h-3.5 w-3.5 flex-shrink-0" />
+          <span className="truncate">{item.name}</span>
         </NavLink>
       )}
     </div>
   );
 }
 
+/**
+ * Sidebar - 优化后的侧边栏导航
+ * 
+ * 优化点：
+ * 1. 使用 CSS 变量控制宽度，统一协调
+ * 2. 添加 Tooltip 支持（折叠状态）
+ * 3. 子菜单展开/收起动画
+ * 4. Logo 区域更精致
+ * 5. 底部添加版本信息
+ */
 export function Sidebar() {
   const { sidebarCollapsed, toggleSidebar } = useThemeStore();
+
+  // Listen for keyboard shortcut
+  useEffect(() => {
+    const handler = () => toggleSidebar();
+    window.addEventListener('toggle-sidebar' as any, handler);
+    return () => window.removeEventListener('toggle-sidebar' as any, handler);
+  }, [toggleSidebar]);
+
   return (
-    <aside className={cn('fixed left-0 top-0 z-40 h-screen bg-slate-900 border-r border-slate-800 transition-all duration-300', sidebarCollapsed ? 'w-16' : 'w-64')}>
-      <div className="flex items-center justify-between h-14 px-4 border-b border-slate-800">
-        {!sidebarCollapsed && (
-          <div className="flex items-center gap-2">
-            <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-blue-500 to-cyan-500 flex items-center justify-center">
-              <Cloud className="h-5 w-5 text-white" />
-            </div>
-            <span className="font-semibold text-slate-100">AIOps平台</span>
-          </div>
-        )}
-        {sidebarCollapsed && (
-          <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-blue-500 to-cyan-500 flex items-center justify-center mx-auto">
+    <aside
+      className={cn(
+        'fixed left-0 top-0 z-40 h-screen bg-[var(--dg-bg-secondary)] border-r border-[var(--dg-border)]',
+        'flex flex-col transition-[width] duration-300 ease-in-out',
+      )}
+      style={{ width: 'var(--sidebar-width)' }}
+    >
+      {/* Logo Area */}
+      <div className="flex items-center h-14 px-3 border-b border-[var(--dg-border)] flex-shrink-0">
+        <div className={cn('flex items-center gap-2.5 flex-1 min-w-0', sidebarCollapsed && 'justify-center')}>
+          <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-[var(--dg-blue)] to-[var(--dg-cyan)] flex items-center justify-center flex-shrink-0 shadow-lg shadow-[var(--dg-blue)]/20">
             <Cloud className="h-5 w-5 text-white" />
           </div>
-        )}
+          {!sidebarCollapsed && (
+            <span className="font-bold text-[var(--dg-text-primary)] text-sm tracking-tight truncate">
+              AIOps平台
+            </span>
+          )}
+        </div>
         {!sidebarCollapsed && (
-          <Button variant="ghost" size="icon" className="h-8 w-8 text-slate-400 hover:text-slate-100" onClick={toggleSidebar}>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-7 w-7 text-[var(--dg-text-muted)] hover:text-[var(--dg-text-primary)] hover:bg-[var(--dg-bg-hover)] flex-shrink-0"
+            onClick={toggleSidebar}
+            title="收起侧边栏"
+          >
             <Menu className="h-4 w-4" />
           </Button>
         )}
       </div>
-      <ScrollArea className="h-[calc(100vh-3.5rem)]">
-        <div className={cn('p-1.5', sidebarCollapsed && 'px-1')}>
-          {menuItems.map((item) => <MenuItemComponent key={item.id} item={item} />)}
-        </div>
+
+      {/* Menu Items */}
+      <ScrollArea className="flex-1 py-2 px-1.5">
+        <nav className="space-y-0.5">
+          {menuItems.map((item) => (
+            <MenuItemComponent key={item.id} item={item} />
+          ))}
+        </nav>
       </ScrollArea>
+
+      {/* Footer */}
+      {!sidebarCollapsed && (
+        <div className="px-3 py-2 border-t border-[var(--dg-border)] flex-shrink-0">
+          <div className="text-[10px] text-[var(--dg-text-muted)] text-center">
+            AIOps v1.0.0
+          </div>
+        </div>
+      )}
     </aside>
   );
 }

frontend/src/components/layout/SkeletonCard.tsx

@@ -0,0 +1,133 @@
+import { cn } from '@/lib/utils';
+
+/**
+ * SkeletonCard - 骨架屏卡片组件
+ * 
+ * 优化点：
+ * 1. 使用 CSS 动画实现 shimmer 效果
+ * 2. 主题感知（跟随当前主题的颜色）
+ * 3. 多种变体：统计卡片、图表、列表、表格
+ */
+
+interface SkeletonCardProps {
+  variant?: 'stat' | 'chart' | 'list' | 'table' | 'card';
+  className?: string;
+}
+
+export function SkeletonCard({ variant = 'card', className }: SkeletonCardProps) {
+  const shimmerClass = 'dg-skeleton';
+
+  if (variant === 'stat') {
+    return (
+      <div className={cn('dg-card p-6 space-y-4', className)}>
+        <div className="flex items-start justify-between">
+          <div className="space-y-3 flex-1">
+            <div className={cn('h-4 w-24 rounded', shimmerClass)} />
+            <div className={cn('h-8 w-16 rounded', shimmerClass)} />
+          </div>
+          <div className={cn('h-10 w-10 rounded-lg', shimmerClass)} />
+        </div>
+        <div className={cn('h-3 w-32 rounded', shimmerClass)} />
+      </div>
+    );
+  }
+
+  if (variant === 'chart') {
+    return (
+      <div className={cn('dg-card p-6 space-y-4', className)}>
+        <div className="space-y-2">
+          <div className={cn('h-5 w-32 rounded', shimmerClass)} />
+          <div className={cn('h-3 w-48 rounded', shimmerClass)} />
+        </div>
+        <div className={cn('h-[200px] rounded-lg', shimmerClass)} />
+      </div>
+    );
+  }
+
+  if (variant === 'table') {
+    return (
+      <div className={cn('dg-card overflow-hidden', className)}>
+        {/* Header */}
+        <div className="flex items-center gap-4 p-4 border-b border-[var(--dg-border)]">
+          <div className={cn('h-4 w-8 rounded', shimmerClass)} />
+          {Array.from({ length: 6 }).map((_, i) => (
+            <div key={i} className={cn('h-4 flex-1 rounded', shimmerClass)} />
+          ))}
+        </div>
+        {/* Rows */}
+        {Array.from({ length: 5 }).map((_, rowIdx) => (
+          <div key={rowIdx} className="flex items-center gap-4 p-4 border-b border-[var(--dg-border)] last:border-0">
+            <div className={cn('h-4 w-8 rounded', shimmerClass)} />
+            {Array.from({ length: 6 }).map((_, colIdx) => (
+              <div key={colIdx} className={cn('h-4 flex-1 rounded', shimmerClass)} />
+            ))}
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+  // Default list skeleton
+  return (
+    <div className={cn('dg-card p-6 space-y-4', className)}>
+      <div className="space-y-2">
+        <div className={cn('h-5 w-40 rounded', shimmerClass)} />
+        <div className={cn('h-3 w-56 rounded', shimmerClass)} />
+      </div>
+      <div className="space-y-3">
+        {Array.from({ length: 4 }).map((_, i) => (
+          <div key={i} className="flex items-center gap-3">
+            <div className={cn('h-8 w-8 rounded-lg', shimmerClass)} />
+            <div className="flex-1 space-y-2">
+              <div className={cn('h-3 w-full rounded', shimmerClass)} />
+              <div className={cn('h-3 w-2/3 rounded', shimmerClass)} />
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * SkeletonStats - 统计卡片骨架屏网格
+ */
+export function SkeletonStats({ count = 4 }: { count?: number }) {
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+      {Array.from({ length: count }).map((_, i) => (
+        <SkeletonCard key={i} variant="stat" />
+      ))}
+    </div>
+  );
+}
+
+/**
+ * SkeletonDashboard - 仪表盘骨架屏
+ */
+export function SkeletonDashboard() {
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div className="space-y-2">
+          <div className="dg-skeleton h-7 w-24 rounded" />
+          <div className="dg-skeleton h-4 w-48 rounded" />
+        </div>
+        <div className="dg-skeleton h-9 w-20 rounded-lg" />
+      </div>
+
+      {/* Stats */}
+      <SkeletonStats count={4} />
+
+      {/* Chart */}
+      <SkeletonCard variant="chart" />
+
+      {/* Two column layout */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <SkeletonCard variant="list" />
+        <SkeletonCard variant="list" />
+      </div>
+    </div>
+  );
+}

frontend/src/index.css

@@ -38,8 +38,10 @@
     --dg-bg-secondary: #161b22;
     --dg-bg-tertiary: #21262d;
     --dg-bg-hover: #30363d;
+    --dg-bg-active: #3d444d;
     --dg-border: #30363d;
     --dg-border-light: #21262d;
+    --dg-border-hover: #484f58;
     --dg-text-primary: #f0f6fc;
     --dg-text-secondary: #8b949e;
     --dg-text-muted: #6e7681;
@@ -56,6 +58,15 @@
     --dg-gradient-text-start: #60a5fa;
     --dg-gradient-text-end: #c084fc;
     --dg-input-focus-ring: rgba(96, 165, 250, 0.2);
+    --chart-grid: #1e293b;
+    --chart-axis: #475569;
+    --chart-tooltip-bg: #0f172a;
+    --chart-tooltip-border: #1e293b;
+    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.02);
+    --shadow-card-hover: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(88, 166, 255, 0.15);
+    --shadow-dropdown: 0 10px 40px rgba(0, 0, 0, 0.5);
+    --skeleton-base: #21262d;
+    --skeleton-highlight: #30363d;
   }
 
   /* ===== Theme 2: Light Professional (明亮白) ===== */
@@ -93,8 +104,10 @@
     --dg-bg-secondary: #f8f9fb;
     --dg-bg-tertiary: #f0f1f5;
     --dg-bg-hover: #e8eaef;
+    --dg-bg-active: #dfe1e8;
     --dg-border: #e2e5eb;
     --dg-border-light: #eaecf0;
+    --dg-border-hover: #d0d5dd;
     --dg-text-primary: #1a1d23;
     --dg-text-secondary: #5c6370;
     --dg-text-muted: #9ca3af;
@@ -111,6 +124,15 @@
     --dg-gradient-text-start: #1d4ed8;
     --dg-gradient-text-end: #6d28d9;
     --dg-input-focus-ring: rgba(37, 99, 235, 0.15);
+    --chart-grid: #e2e5eb;
+    --chart-axis: #9ca3af;
+    --chart-tooltip-bg: #ffffff;
+    --chart-tooltip-border: #e2e5eb;
+    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.04);
+    --shadow-card-hover: 0 8px 32px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(37, 99, 235, 0.1);
+    --shadow-dropdown: 0 10px 40px rgba(0, 0, 0, 0.12);
+    --skeleton-base: #f0f1f5;
+    --skeleton-highlight: #e8eaef;
   }
 
   /* ===== Theme 3: Midnight Purple (午夜紫) ===== */
@@ -147,8 +169,10 @@
     --dg-bg-secondary: #130c21;
     --dg-bg-tertiary: #1c1330;
     --dg-bg-hover: #2d1f4a;
+    --dg-bg-active: #3d2a5e;
     --dg-border: #2d1f4a;
     --dg-border-light: #1c1330;
+    --dg-border-hover: #3d2a5e;
     --dg-text-primary: #faf5ff;
     --dg-text-secondary: #b794c7;
     --dg-text-muted: #7c5a8a;
@@ -165,6 +189,15 @@
     --dg-gradient-text-start: #a855f7;
     --dg-gradient-text-end: #c084fc;
     --dg-input-focus-ring: rgba(192, 132, 252, 0.2);
+    --chart-grid: #2d1f4a;
+    --chart-axis: #7c5a8a;
+    --chart-tooltip-bg: #130c21;
+    --chart-tooltip-border: #2d1f4a;
+    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(192, 132, 252, 0.05);
+    --shadow-card-hover: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(192, 132, 252, 0.2);
+    --shadow-dropdown: 0 10px 40px rgba(0, 0, 0, 0.5);
+    --skeleton-base: #1c1330;
+    --skeleton-highlight: #2d1f4a;
   }
 
   /* ===== Theme 4: Pine Green (松林绿) ===== */
@@ -201,8 +234,10 @@
     --dg-bg-secondary: #111f1a;
     --dg-bg-tertiary: #192c24;
     --dg-bg-hover: #253d32;
+    --dg-bg-active: #2f4f3e;
     --dg-border: #253d32;
     --dg-border-light: #192c24;
+    --dg-border-hover: #2f4f3e;
     --dg-text-primary: #f0fdf4;
     --dg-text-secondary: #86b8a0;
     --dg-text-muted: #5a7c6b;
@@ -219,6 +254,15 @@
     --dg-gradient-text-start: #059669;
     --dg-gradient-text-end: #34d399;
     --dg-input-focus-ring: rgba(74, 222, 128, 0.2);
+    --chart-grid: #253d32;
+    --chart-axis: #5a7c6b;
+    --chart-tooltip-bg: #111f1a;
+    --chart-tooltip-border: #253d32;
+    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(74, 222, 128, 0.05);
+    --shadow-card-hover: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(74, 222, 128, 0.2);
+    --shadow-dropdown: 0 10px 40px rgba(0, 0, 0, 0.5);
+    --skeleton-base: #192c24;
+    --skeleton-highlight: #253d32;
   }
 
   /* ===== Theme 5: Orange Vitality (活力橙) ===== */
@@ -255,8 +299,10 @@
     --dg-bg-secondary: #1d1610;
     --dg-bg-tertiary: #2b1f16;
     --dg-bg-hover: #3d2d20;
+    --dg-bg-active: #4d3928;
     --dg-border: #3d2d20;
     --dg-border-light: #2b1f16;
+    --dg-border-hover: #4d3928;
     --dg-text-primary: #fef7ed;
     --dg-text-secondary: #d4a574;
     --dg-text-muted: #9c7a54;
@@ -273,6 +319,15 @@
     --dg-gradient-text-start: #f97316;
     --dg-gradient-text-end: #fbbf24;
     --dg-input-focus-ring: rgba(251, 146, 60, 0.2);
+    --chart-grid: #3d2d20;
+    --chart-axis: #9c7a54;
+    --chart-tooltip-bg: #1d1610;
+    --chart-tooltip-border: #3d2d20;
+    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(251, 146, 60, 0.05);
+    --shadow-card-hover: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(251, 146, 60, 0.2);
+    --shadow-dropdown: 0 10px 40px rgba(0, 0, 0, 0.5);
+    --skeleton-base: #2b1f16;
+    --skeleton-highlight: #3d2d20;
   }
 }
 
@@ -287,7 +342,7 @@
 
   body {
     @apply bg-[var(--dg-bg-primary)] text-[var(--dg-text-primary)] antialiased;
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans SC', sans-serif;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
     font-feature-settings: 'rlig' 1, 'calt' 1;
     transition: background-color 0.3s ease, color 0.3s ease;
   }
@@ -302,7 +357,13 @@
   code,
   pre,
   .font-mono {
-    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
+    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', 'SF Mono', monospace;
+  }
+
+  /* ===== Selection Color (theme-aware) ===== */
+  ::selection {
+    background-color: var(--dg-blue);
+    color: white;
   }
 }
 
@@ -310,19 +371,24 @@
   /* ===== Design System Card / Input ===== */
   .dg-card {
     @apply bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] rounded-xl;
-    transition: background-color 0.3s ease, border-color 0.3s ease;
+    box-shadow: var(--shadow-card);
+    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
   }
   .dg-card-hover {
-    @apply transition-all duration-300 hover:-translate-y-0.5;
+    @apply transition-all duration-300;
   }
   .dg-card-hover:hover {
     border-color: var(--dg-card-hover-border);
+    box-shadow: var(--shadow-card-hover);
+    transform: translateY(-2px);
   }
   .dg-input {
-    @apply 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;
+    @apply 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 rounded-lg;
+    transition: border-color 0.2s ease, box-shadow 0.2s ease;
   }
   .dg-input:focus {
     --tw-ring-color: var(--dg-input-focus-ring);
+    box-shadow: 0 0 0 3px var(--dg-input-focus-ring);
   }
   .dg-text-muted {
     color: var(--dg-text-muted);
@@ -343,21 +409,42 @@
     background: linear-gradient(to bottom right, var(--dg-gradient-start), var(--dg-gradient-end));
   }
 
+  /* ===== Page Container ===== */
+  .dg-page {
+    @apply space-y-6 animate-fade-in;
+  }
+  .dg-page-header {
+    @apply flex items-center justify-between flex-wrap gap-4;
+  }
+  .dg-page-title {
+    @apply text-2xl font-bold text-[var(--dg-text-primary)] tracking-tight;
+  }
+  .dg-page-subtitle {
+    @apply text-sm text-[var(--dg-text-muted)] mt-1;
+  }
+  .dg-page-actions {
+    @apply flex items-center gap-2 flex-wrap;
+  }
+
   /* ===== Buttons ===== */
   .dg-btn {
     @apply inline-flex items-center justify-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200;
   }
   .dg-btn-primary {
     @apply dg-btn dg-gradient-bg text-white hover:opacity-90 active:scale-[0.98];
+    box-shadow: 0 4px 16px color-mix(in srgb, var(--dg-gradient-start) 25%, transparent);
+  }
+  .dg-btn-primary:hover {
+    box-shadow: 0 6px 24px color-mix(in srgb, var(--dg-gradient-start) 35%, transparent);
   }
   .dg-btn-secondary {
-    @apply dg-btn bg-[var(--dg-bg-tertiary)] text-[var(--dg-text-primary)] hover:bg-[var(--dg-bg-hover)] active:scale-[0.98];
+    @apply dg-btn bg-[var(--dg-bg-tertiary)] text-[var(--dg-text-primary)] border border-[var(--dg-border)] hover:bg-[var(--dg-bg-hover)] hover:border-[var(--dg-border-hover)] active:scale-[0.98];
   }
   .dg-btn-ghost {
     @apply dg-btn text-[var(--dg-text-secondary)] hover:bg-[var(--dg-bg-hover)] hover:text-[var(--dg-text-primary)];
   }
   .dg-btn-danger {
-    @apply dg-btn bg-red-500/10 text-red-400 hover:bg-red-500/20 active:scale-[0.98];
+    @apply dg-btn bg-red-500/10 text-red-400 border border-red-500/20 hover:bg-red-500/20 active:scale-[0.98];
   }
   .dg-btn-sm {
     @apply px-3 py-1.5 text-xs;
@@ -392,7 +479,24 @@
     @apply dg-badge bg-cyan-500/10 text-cyan-400;
   }
   .dg-badge-muted {
-    @apply dg-badge bg-[var(--dg-bg-tertiary)] text-[var(--dg-text-secondary)];
+    @apply dg-badge bg-[var(--dg-bg-tertiary)] text-[var(--dg-text-secondary)] border border-[var(--dg-border)];
+  }
+
+  /* ===== Status Badges ===== */
+  .dg-status-running {
+    @apply dg-badge bg-green-500/10 text-green-400 border border-green-500/20;
+  }
+  .dg-status-stopped {
+    @apply dg-badge bg-gray-500/10 text-gray-400 border border-gray-500/20;
+  }
+  .dg-status-warning {
+    @apply dg-badge bg-yellow-500/10 text-yellow-400 border border-yellow-500/20;
+  }
+  .dg-status-error {
+    @apply dg-badge bg-red-500/10 text-red-400 border border-red-500/20;
+  }
+  .dg-status-info {
+    @apply dg-badge bg-blue-500/10 text-blue-400 border border-blue-500/20;
   }
 
   /* ===== Scrollbar ===== */
@@ -414,56 +518,70 @@
   .scrollbar-thin::-webkit-scrollbar-thumb:hover {
     background: var(--dg-text-muted);
   }
-  [data-theme='light-professional'] .scrollbar-thin::-webkit-scrollbar-thumb,
-  [data-theme='light'] .scrollbar-thin::-webkit-scrollbar-thumb {
-    background: #d1d5db;
-  }
-  [data-theme='light-professional'] .scrollbar-thin::-webkit-scrollbar-thumb:hover,
-  [data-theme='light'] .scrollbar-thin::-webkit-scrollbar-thumb:hover {
-    background: #9ca3af;
-  }
 
   /* ===== Animations ===== */
+  @keyframes fade-in {
+    from { opacity: 0; transform: translateY(8px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+  .animate-fade-in {
+    animation: fade-in 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+  }
+  .animate-fade-in-delay-1 {
+    animation: fade-in 0.35s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both;
+  }
+  .animate-fade-in-delay-2 {
+    animation: fade-in 0.35s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
+  }
+  .animate-fade-in-delay-3 {
+    animation: fade-in 0.35s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
+  }
+  .animate-fade-in-delay-4 {
+    animation: fade-in 0.35s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
+  }
+
+  @keyframes scale-in {
+    from { opacity: 0; transform: scale(0.95); }
+    to { opacity: 1; transform: scale(1); }
+  }
+  .animate-scale-in {
+    animation: scale-in 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+  }
+
+  @keyframes slide-in-right {
+    from { opacity: 0; transform: translateX(20px); }
+    to { opacity: 1; transform: translateX(0); }
+  }
+  .animate-slide-in-right {
+    animation: slide-in-right 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+  }
+
   @keyframes pulse-ring {
-    0% {
-      transform: scale(0.8);
-      opacity: 0.5;
-    }
-    100% {
-      transform: scale(1.2);
-      opacity: 0;
-    }
+    0% { transform: scale(0.8); opacity: 0.5; }
+    100% { transform: scale(1.2); opacity: 0; }
   }
   .animate-pulse-ring {
     animation: pulse-ring 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
   }
 
-  @keyframes fadeInUp {
-    from {
-      opacity: 0;
-      transform: translateY(8px);
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0);
-    }
+  /* Skeleton shimmer */
+  @keyframes shimmer {
+    0% { background-position: -200% 0; }
+    100% { background-position: 200% 0; }
   }
-  @keyframes scaleIn {
-    from {
-      opacity: 0;
-      transform: scale(0.95);
-    }
-    to {
-      opacity: 1;
-      transform: scale(1);
-    }
+  .dg-skeleton {
+    background: linear-gradient(90deg, var(--skeleton-base) 25%, var(--skeleton-highlight) 50%, var(--skeleton-base) 75%);
+    background-size: 200% 100%;
+    animation: shimmer 1.5s ease-in-out infinite;
+    border-radius: 0.5rem;
   }
 
   /* ===== Glass effect ===== */
   .glass {
-    background: rgba(15, 23, 42, 0.8);
-    backdrop-filter: blur(12px);
-    -webkit-backdrop-filter: blur(12px);
+    background: color-mix(in srgb, var(--dg-bg-secondary) 75%, transparent);
+    backdrop-filter: blur(16px);
+    -webkit-backdrop-filter: blur(16px);
+    border: 1px solid var(--dg-border);
   }
 
   /* ===== Status indicators ===== */
@@ -483,29 +601,41 @@
     @apply bg-red-400;
   }
 
-  /* Badge variants (legacy) */
-  .badge-critical {
-    @apply border-red-500/30 text-red-400 bg-red-500/10;
+  /* ===== Chart theme-aware utilities ===== */
+  .chart-grid-stroke {
+    stroke: var(--chart-grid);
   }
-  .badge-warning {
-    @apply border-amber-500/30 text-amber-400 bg-amber-500/10;
+  .chart-axis-stroke {
+    stroke: var(--chart-axis);
   }
-  .badge-success {
-    @apply border-emerald-500/30 text-emerald-400 bg-emerald-500/10;
-  }
-  .badge-info {
-    @apply border-blue-500/30 text-blue-400 bg-blue-500/10;
+  .chart-tooltip {
+    background-color: var(--chart-tooltip-bg) !important;
+    border: 1px solid var(--chart-tooltip-border) !important;
+    border-radius: 6px !important;
+    color: var(--dg-text-primary) !important;
+    box-shadow: var(--shadow-dropdown) !important;
   }
 
-  /* Card hover effect (legacy) */
-  .card-hover {
-    @apply transition-all duration-300 hover:shadow-lg hover:shadow-slate-900/50 hover:-translate-y-0.5;
+  /* ===== Table improvements ===== */
+  .dg-table-row {
+    @apply transition-colors duration-150;
+  }
+  .dg-table-row:hover {
+    background-color: color-mix(in srgb, var(--dg-bg-hover) 50%, transparent);
+  }
+
+  /* ===== Focus ring (theme-aware) ===== */
+  .dg-focus-ring:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 2px var(--dg-bg-primary), 0 0 0 4px var(--dg-blue);
   }
 }
 
-/* ===== Global element styling (kept for backward compatibility) ===== */
+/* ===== Global element styling ===== */
 pre {
-  @apply bg-slate-950 rounded-lg p-4 overflow-x-auto;
+  @apply rounded-lg p-4 overflow-x-auto;
+  background-color: var(--dg-bg-tertiary);
+  border: 1px solid var(--dg-border);
 }
 
 code {
@@ -517,17 +647,21 @@ table {
 }
 
 th {
-  @apply text-left font-medium text-slate-400 text-xs uppercase tracking-wider;
+  @apply text-left font-medium text-xs uppercase tracking-wider;
+  color: var(--dg-text-secondary);
 }
 
 td {
   @apply text-sm;
+  color: var(--dg-text-primary);
 }
 
 input:focus,
 textarea:focus,
 select:focus {
-  @apply outline-none ring-2 ring-blue-500/30 border-blue-500/50;
+  outline: none;
+  box-shadow: 0 0 0 2px var(--dg-bg-primary), 0 0 0 4px var(--dg-blue);
+  border-color: var(--dg-blue);
 }
 
 button {
@@ -536,26 +670,36 @@ button {
 
 /* Terminal styling */
 .terminal {
-  @apply bg-slate-950 font-mono text-sm text-slate-300;
+  @apply font-mono text-sm;
+  background-color: var(--dg-bg-primary);
+  color: var(--dg-text-secondary);
 }
 .terminal .prompt {
-  @apply text-emerald-400;
+  color: var(--dg-green);
 }
 .terminal .command {
-  @apply text-slate-100;
+  color: var(--dg-text-primary);
 }
 .terminal .output {
-  @apply text-slate-400;
+  color: var(--dg-text-muted);
 }
 
-/* Chart tooltip styling */
+/* Chart tooltip styling - theme aware override */
 .recharts-tooltip-wrapper {
   @apply z-50;
 }
+.recharts-default-tooltip {
+  background-color: var(--chart-tooltip-bg) !important;
+  border-color: var(--chart-tooltip-border) !important;
+  color: var(--dg-text-primary) !important;
+  border-radius: 6px !important;
+  box-shadow: var(--shadow-dropdown) !important;
+}
 
 /* Dialog overlay */
 [data-state='open'] > [data-radix-dialog-overlay] {
-  @apply bg-slate-950/80 backdrop-blur-sm;
+  @apply backdrop-blur-sm;
+  background-color: color-mix(in srgb, var(--dg-bg-primary) 80%, transparent);
 }
 
 /* Dropdown menu styling */
@@ -565,16 +709,26 @@ button {
 
 /* Progress bar animation */
 @keyframes progress-indeterminate {
-  0% {
-    transform: translateX(-100%);
-  }
-  100% {
-    transform: translateX(100%);
-  }
+  0% { transform: translateX(-100%); }
+  100% { transform: translateX(100%); }
 }
-
 .progress-indeterminate::after {
   content: '';
   @apply absolute inset-0 bg-current;
   animation: progress-indeterminate 1.5s ease-in-out infinite;
 }
+
+/* ===== Reduced motion support ===== */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+  .dg-skeleton {
+    animation: none;
+    background: var(--skeleton-base);
+  }
+}