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

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

frontend/src/components/kubernetes/NamespaceManagementPage.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 { useParams, useNavigate } from 'react-router-dom';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { Input } from '@/components/ui/input';
@@ -12,11 +11,14 @@ import {
   Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogTrigger,
 } from '@/components/ui/dialog';
 import {
-  RefreshCw, Loader2, ChevronRight, Plus, Trash2, Boxes, Container, Network,
-  Shield, Activity, AlertTriangle, CheckCircle2,
+  RefreshCw, Loader2, Plus, Trash2, Boxes,
+  Shield, AlertTriangle, CheckCircle2,
 } from 'lucide-react';
 import { kubernetesApi } from '@/api';
 import { toast } from 'sonner';
+import { PageShell } from '@/components/layout/PageShell';
+import { ContentPanel } from '@/components/layout/ContentPanel';
+import { StatStrip } from '@/components/ui/stat-strip';
 
 interface NamespaceDetail {
   name: string;
@@ -105,34 +107,41 @@ export default function NamespaceManagementPage() {
   const totalSvcs = namespaces.reduce((s, n) => s + (n.resource_counts?.services || 0), 0);
   const quotaCount = namespaces.filter(n => n.has_resource_quota).length;
 
-  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" />
-        <Link to={`/kubernetes/${clusterCode}`} className="hover:text-[var(--dg-text-secondary)] transition-colors">{clusterCode}</Link>
-        <ChevronRight className="h-3 w-3" />
-        <span className="text-[var(--dg-text-secondary)]">命名空间管理</span>
-      </div>
+  const searchToolbar = (
+    <Input
+      value={searchQuery}
+      onChange={(e) => setSearchQuery(e.target.value)}
+      placeholder="搜索命名空间..."
+      className="max-w-xs dg-input"
+    />
+  );
 
-      {/* Header */}
-      <div className="flex items-center justify-between">
-        <div>
-          <h1 className="text-2xl font-bold text-[var(--dg-text-primary)] flex items-center gap-2">
-            <Boxes className="h-6 w-6 text-[var(--dg-green)]" />
-            命名空间管理
-          </h1>
-          <p className="text-sm text-[var(--dg-text-muted)] mt-1">命名空间资源配额与生命周期管理</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" />}
+  return (
+    <PageShell
+      variant="list"
+      title="命名空间管理"
+      subtitle={`${clusterCode} · 资源配额与生命周期管理`}
+      icon={<Boxes className="h-5 w-5" />}
+      metrics={!loading ? (
+        <StatStrip
+          items={[
+            { label: '命名空间', value: namespaces.length, color: 'green' },
+            { label: 'Deployments', value: totalDeploys, color: 'blue' },
+            { label: 'Pods', value: totalPods, color: 'purple' },
+            { label: 'Services', value: totalSvcs, color: 'cyan' },
+            { label: '配额限制', value: quotaCount, color: 'amber' },
+          ]}
+        />
+      ) : 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>
           <Dialog open={createOpen} onOpenChange={setCreateOpen}>
             <DialogTrigger asChild>
-              <Button className="bg-[var(--dg-blue)] hover:opacity-90">
+              <Button size="sm" className="dg-btn-primary">
                 <Plus className="h-4 w-4 mr-1" />创建命名空间
               </Button>
             </DialogTrigger>
@@ -163,56 +172,10 @@ export default function NamespaceManagementPage() {
               </DialogFooter>
             </DialogContent>
           </Dialog>
-        </div>
-      </div>
-
-      {/* Stats cards */}
-      <div className="grid grid-cols-2 md:grid-cols-5 gap-3">
-        <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
-          <CardContent className="p-4 flex items-center justify-between">
-            <div><p className="text-xs text-[var(--dg-text-muted)]">命名空间</p><p className="text-xl font-bold text-[var(--dg-green)]">{namespaces.length}</p></div>
-            <Boxes className="h-6 w-6 opacity-30 text-[var(--dg-green)]" />
-          </CardContent>
-        </Card>
-        <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
-          <CardContent className="p-4 flex items-center justify-between">
-            <div><p className="text-xs text-[var(--dg-text-muted)]">Deployments</p><p className="text-xl font-bold text-[var(--dg-blue)]">{totalDeploys}</p></div>
-            <Container className="h-6 w-6 opacity-30 text-[var(--dg-blue)]" />
-          </CardContent>
-        </Card>
-        <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
-          <CardContent className="p-4 flex items-center justify-between">
-            <div><p className="text-xs text-[var(--dg-text-muted)]">Pods</p><p className="text-xl font-bold text-[var(--dg-purple)]">{totalPods}</p></div>
-            <Activity className="h-6 w-6 opacity-30 text-[var(--dg-purple)]" />
-          </CardContent>
-        </Card>
-        <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
-          <CardContent className="p-4 flex items-center justify-between">
-            <div><p className="text-xs text-[var(--dg-text-muted)]">Services</p><p className="text-xl font-bold text-[var(--dg-cyan)]">{totalSvcs}</p></div>
-            <Network className="h-6 w-6 opacity-30 text-[var(--dg-cyan)]" />
-          </CardContent>
-        </Card>
-        <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
-          <CardContent className="p-4 flex items-center justify-between">
-            <div><p className="text-xs text-[var(--dg-text-muted)]">配额限制</p><p className="text-xl font-bold text-[var(--dg-orange)]">{quotaCount}</p></div>
-            <Shield className="h-6 w-6 opacity-30 text-[var(--dg-orange)]" />
-          </CardContent>
-        </Card>
-      </div>
-
-      {/* Search */}
-      <div className="flex items-center gap-3">
-        <Input
-          value={searchQuery}
-          onChange={(e) => setSearchQuery(e.target.value)}
-          placeholder="搜索命名空间..."
-          className="max-w-xs bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]"
-        />
-      </div>
-
-      {/* Namespace table */}
-      <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
-        <CardContent className="p-0">
+        </>
+      )}
+    >
+      <ContentPanel toolbar={searchToolbar}>
           <Table>
             <TableHeader>
               <TableRow className="border-[var(--dg-border)] hover:bg-transparent">
@@ -302,8 +265,7 @@ export default function NamespaceManagementPage() {
               )}
             </TableBody>
           </Table>
-        </CardContent>
-      </Card>
+      </ContentPanel>
 
       {/* Delete confirmation dialog */}
       <Dialog open={!!deleteTarget} onOpenChange={(open) => !open && setDeleteTarget(null)}>
@@ -332,6 +294,6 @@ export default function NamespaceManagementPage() {
           </DialogFooter>
         </DialogContent>
       </Dialog>
-    </div>
+    </PageShell>
   );
 }