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

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

frontend/src/components/kubernetes/ClusterOverviewPage.tsx

@@ -1,6 +1,5 @@
 import { useState, useEffect, useCallback } from 'react';
 import { useParams, useNavigate, Link } from 'react-router-dom';
-import { Card, CardContent } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import {
@@ -22,6 +21,9 @@ import {
 
 import { kubernetesApi } from '@/api';
 import { useToast } from '@/hooks/use-toast';
+import { PageShell } from '@/components/layout/PageShell';
+import { ContentPanel } from '@/components/layout/ContentPanel';
+import { StatStrip } from '@/components/ui/stat-strip';
 import type { JsonData } from '@/types/common';
 
 const NAMESPACE_ICON: Record<string, React.ComponentType<Record<string, unknown>>> = {
@@ -79,66 +81,33 @@ export default function ClusterOverviewPage() {
   };
 
   return (
-    <div className="space-y-4">
-      {/* Breadcrumb */}
-      <div className="flex items-center gap-2 text-sm text-[var(--dg-text-muted)]">
-        <Link to="/kubernetes" className="hover:text-[var(--dg-text-secondary)] transition-colors">集群</Link>
-        <ChevronRight className="h-3 w-3" />
-        <span className="text-[var(--dg-text-secondary)]">{clusterCode}</span>
-      </div>
-
-      {/* Header */}
-      <div className="flex items-center justify-between">
-        <div>
-          <h1 className="text-2xl font-bold text-[var(--dg-text-primary)]">{clusterCode}</h1>
-          <p className="text-sm text-[var(--dg-text-muted)] mt-1">
-            集群概览
-            {clusterInfo?.version ? ` — Kubernetes ${clusterInfo.version}` : ''}
-          </p>
-        </div>
-        <div className="flex items-center gap-2">
-          <Button variant="outline" size="icon" className="h-9 w-9 border-[var(--dg-border)] text-[var(--dg-text-secondary)]"
-            onClick={loadData} disabled={loading}>
-            {loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <RefreshCw className="h-4 w-4" />}
-          </Button>
-        </div>
-      </div>
-
-      {/* Stats cards */}
-      <div className="grid grid-cols-3 md:grid-cols-3 gap-4">
-        <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
-          <CardContent className="p-4">
-            <div className="flex items-center justify-between">
-              <div><p className="text-sm text-[var(--dg-text-muted)]">节点</p><p className="text-2xl font-bold text-[var(--dg-blue)]">{nodes.length}</p></div>
-              <Cpu className="h-8 w-8 opacity-30 text-[var(--dg-blue)]" />
-            </div>
-          </CardContent>
-        </Card>
-        <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
-          <CardContent className="p-4">
-            <div className="flex items-center justify-between">
-              <div><p className="text-sm text-[var(--dg-text-muted)]">命名空间</p><p className="text-2xl font-bold text-[var(--dg-green)]">{namespaces.length}</p></div>
-              <Boxes className="h-8 w-8 opacity-30 text-[var(--dg-green)]" />
-            </div>
-          </CardContent>
-        </Card>
-        <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
-          <CardContent className="p-4">
-            <div className="flex items-center justify-between">
-              <div><p className="text-sm text-[var(--dg-text-muted)]">版本</p><p className="text-lg font-bold text-[var(--dg-text-secondary)]">{clusterInfo?.version || '-'}</p></div>
-              <Server className="h-8 w-8 opacity-30 text-[var(--dg-text-secondary)]" />
-            </div>
-          </CardContent>
-        </Card>
-      </div>
-
-      {/* Nodes table */}
+    <PageShell
+      variant="default"
+      title={clusterCode || '集群概览'}
+      subtitle={clusterInfo?.version ? `集群概览 · Kubernetes ${clusterInfo.version}` : '集群概览'}
+      icon={<Server className="h-5 w-5" />}
+      metrics={!loading ? (
+        <StatStrip
+          items={[
+            { label: '节点', value: nodes.length, color: 'blue' },
+            { label: '命名空间', value: namespaces.length, color: 'green' },
+            { label: '版本', value: clusterInfo?.version || '-', color: 'muted' },
+          ]}
+        />
+      ) : undefined}
+      actions={(
+        <Button variant="outline" size="sm" className="dg-btn-secondary" onClick={loadData} disabled={loading}>
+          <RefreshCw className={`h-4 w-4 mr-1 ${loading ? 'animate-spin' : ''}`} />
+          刷新
+        </Button>
+      )}
+    >
+      {/* 节点列表 // Logan.Li */}
       <div>
         <h2 className="text-lg font-semibold text-[var(--dg-text-primary)] mb-3 flex items-center gap-2">
           <Cpu className="h-4 w-4 text-[var(--dg-blue)]" />节点列表
         </h2>
-        <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
-          <CardContent className="p-0">
+        <ContentPanel>
             <Table>
               <TableHeader>
                 <TableRow className="border-[var(--dg-border)] hover:bg-transparent">
@@ -207,8 +176,7 @@ export default function ClusterOverviewPage() {
                 )}
               </TableBody>
             </Table>
-          </CardContent>
-        </Card>
+        </ContentPanel>
       </div>
 
       {/* Namespace list */}
@@ -241,6 +209,6 @@ export default function ClusterOverviewPage() {
           })}
         </div>
       </div>
-    </div>
+    </PageShell>
   );
 }