feat: 全站 PageShell 设计系统与专业 UI 统一

- 新增 PageShell/PageTabs/ContentPanel/PageLoading/PageEmpty 页面骨架
- index.css 设计令牌文档化，布局令牌与纯色主按钮（去除渐变粉彩）
- 全站路由页接入 PageShell，云账单三 Tab 为标杆
- 主题体系：跟随系统 + 主流/开发者分组，新增 Dracula/Tokyo Night，One Dark 暖灰差异化
- 登录页/侧栏/顶栏去渐变光球，企业克制风
- 修复 AIAlertAnalyzer JSX 与构建依赖导入问题

frontend/src/components/kubernetes/KubernetesNodes.tsx

@@ -11,6 +11,8 @@ import {
 } from '@/components/ui/table';
 import { RefreshCw, Search, Server, Loader2 } from 'lucide-react';
 import { kubernetesApi } from '@/api';
+import { PageShell } from '@/components/layout/PageShell';
+import { ContentPanel } from '@/components/layout/ContentPanel';
 import type { JsonData } from '@/types/common';
 
 export function KubernetesNodes() {
@@ -58,49 +60,53 @@ export function KubernetesNodes() {
       ? <Badge className="bg-[var(--dg-green)]/20 text-[var(--dg-green)] border-[var(--dg-green)]/30">{status}</Badge>
       : <Badge variant="destructive">{status || 'Unknown'}</Badge>;
 
+  const tableToolbar = (
+    <div className="flex items-center gap-3 flex-wrap">
+      <div className="relative w-56">
+        <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 dg-text-muted" />
+        <Input placeholder="搜索节点..." value={search} onChange={(e) => setSearch(e.target.value)} className="pl-9 h-9 dg-input" />
+      </div>
+      <Select value={roleFilter} onValueChange={setRoleFilter}>
+        <SelectTrigger className="w-32 h-9 dg-input">
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="all">全部角色</SelectItem>
+          <SelectItem value="master">Master</SelectItem>
+          <SelectItem value="worker">Worker</SelectItem>
+        </SelectContent>
+      </Select>
+    </div>
+  );
+
+  const clusterLabel = clusters.find((c) => String(c.code || c.id) === selectedCluster)?.name;
+
   return (
-    <div className="space-y-6">
-      <div className="flex items-center justify-between">
-        <div>
-          <h1 className="text-2xl font-bold text-[var(--dg-text-primary)]">节点管理</h1>
-          <p className="text-sm text-[var(--dg-text-muted)] mt-1">Kubernetes 集群工作节点状态与资源</p>
-        </div>
-        <div className="flex items-center gap-2">
+    <PageShell
+      variant="list"
+      title="节点管理"
+      subtitle={clusterLabel ? `${clusterLabel} · 工作节点状态与资源` : 'Kubernetes 集群工作节点状态与资源'}
+      icon={<Server className="h-5 w-5" />}
+      actions={(
+        <>
           <Select value={selectedCluster} onValueChange={setSelectedCluster}>
-            <SelectTrigger className="w-48 h-9 bg-[var(--dg-bg-tertiary)]/50 border-[var(--dg-border)] text-[var(--dg-text-primary)]">
+            <SelectTrigger className="w-48 h-9 dg-input">
               <SelectValue placeholder="选择集群" />
             </SelectTrigger>
-            <SelectContent className="bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)]">
+            <SelectContent>
               {clusters.map((c) => (
                 <SelectItem key={c.id} value={String(c.code || c.id)}>{c.name}</SelectItem>
               ))}
             </SelectContent>
           </Select>
-          <Button variant="outline" size="icon" className="h-9 w-9 border-[var(--dg-border)] text-[var(--dg-text-secondary)]" onClick={loadNodes} disabled={loading}>
-            {loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <RefreshCw className="h-4 w-4" />}
+          <Button variant="outline" size="sm" className="dg-btn-secondary" onClick={loadNodes} disabled={loading}>
+            <RefreshCw className={`h-4 w-4 mr-1 ${loading ? 'animate-spin' : ''}`} />
+            刷新
           </Button>
-        </div>
-      </div>
-
-      <div className="flex items-center gap-3">
-        <div className="relative w-56">
-          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-[var(--dg-text-muted)]" />
-          <Input placeholder="搜索节点..." value={search} onChange={(e) => setSearch(e.target.value)} className="pl-9 h-9 bg-[var(--dg-bg-tertiary)]/50 border-[var(--dg-border)] text-[var(--dg-text-primary)]" />
-        </div>
-        <Select value={roleFilter} onValueChange={setRoleFilter}>
-          <SelectTrigger className="w-32 h-9 bg-[var(--dg-bg-tertiary)]/50 border-[var(--dg-border)] text-[var(--dg-text-primary)]">
-            <SelectValue />
-          </SelectTrigger>
-          <SelectContent className="bg-[var(--dg-bg-tertiary)] border-[var(--dg-border)]">
-            <SelectItem value="all">全部角色</SelectItem>
-            <SelectItem value="master">Master</SelectItem>
-            <SelectItem value="worker">Worker</SelectItem>
-          </SelectContent>
-        </Select>
-      </div>
-
-      <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
-        <CardContent className="p-0">
+        </>
+      )}
+    >
+      <ContentPanel toolbar={tableToolbar}>
           <Table>
             <TableHeader>
               <TableRow className="border-[var(--dg-border)] hover:bg-transparent">
@@ -162,8 +168,7 @@ export function KubernetesNodes() {
               )}
             </TableBody>
           </Table>
-        </CardContent>
-      </Card>
-    </div>
+      </ContentPanel>
+    </PageShell>
   );
 }