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

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

frontend/src/components/kubernetes/EventsPage.tsx

@@ -1,14 +1,17 @@
 import { useState, useEffect, useCallback, useMemo } from 'react';
-import { useParams, useNavigate, Link } from 'react-router-dom';
+import { useParams, useNavigate } from 'react-router-dom';
 import { Card, CardContent } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import {
   Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
 } from '@/components/ui/select';
-import { RefreshCw, ChevronRight, Bell, AlertTriangle, X } from 'lucide-react';
+import { RefreshCw, Bell, AlertTriangle, X } from 'lucide-react';
 import { kubernetesApi } from '@/api';
 import { EventTable } from './EventTable';
 import { normalizeK8sEvent, formatEventRelative } from './k8s-event-utils';
+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';
 
 interface RankItem { name: string; count: number }
@@ -63,16 +66,6 @@ function RankPanel({
   );
 }
 
-function StatCell({ label, value, hint }: { label: string; value: number | string; hint?: string }) {
-  return (
-    <div className="px-4 py-3 border-r border-[var(--dg-border)] last:border-r-0">
-      <p className="text-xs text-[var(--dg-text-muted)]">{label}</p>
-      <p className="text-xl font-semibold tabular-nums text-[var(--dg-text-primary)] mt-0.5">{value}</p>
-      {hint && <p className="text-[10px] text-[var(--dg-text-muted)] mt-0.5">{hint}</p>}
-    </div>
-  );
-}
-
 export default function EventsPage() {
   const { clusterCode } = useParams<{ clusterCode: string }>();
   const navigate = useNavigate();
@@ -163,71 +156,9 @@ export default function EventsPage() {
     (summary?.by_kind || []).map((k: JsonData) => ({ name: k.kind || 'Unknown', count: k.count })),
   [summary]);
 
-  return (
-    <div className="space-y-4">
-      <div className="flex items-center gap-2 text-sm text-[var(--dg-text-muted)]">
-        <Link to="/kubernetes" className="hover:text-[var(--dg-text-secondary)]">集群</Link>
-        {activeCluster && (
-          <>
-            <ChevronRight className="h-3 w-3" />
-            <Link to={`/kubernetes/${activeCluster}`} className="hover:text-[var(--dg-text-secondary)]">{activeCluster}</Link>
-          </>
-        )}
-        <ChevronRight className="h-3 w-3" />
-        <span className="text-[var(--dg-text-secondary)]">事件</span>
-      </div>
+  const clusterName = clusters.find((c: JsonData) => (c.code || String(c.id)) === activeCluster)?.name;
 
-      <div className="flex items-center justify-between flex-wrap gap-3">
-        <h2 className="text-lg font-semibold text-[var(--dg-text-primary)] flex items-center gap-2">
-          <Bell className="h-5 w-5 text-[var(--dg-text-muted)]" />
-          事件中心
-        </h2>
-        <div className="flex items-center gap-2 flex-wrap">
-          <Select value={activeCluster} onValueChange={(v) => { setActiveCluster(v); navigate(`/kubernetes/${v}/events`); }}>
-            <SelectTrigger className="w-40 h-8 text-xs"><SelectValue /></SelectTrigger>
-            <SelectContent>
-              {clusters.map((c: JsonData) => (
-                <SelectItem key={c.id} value={c.code || String(c.id)} className="text-xs">{c.name || c.code}</SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-          <Select value={selectedNs} onValueChange={(v) => { setSelectedNs(v); setSelectedReason(''); setSelectedKind(''); }}>
-            <SelectTrigger className="w-36 h-8 text-xs"><SelectValue placeholder="命名空间" /></SelectTrigger>
-            <SelectContent>
-              <SelectItem value="all" className="text-xs">所有命名空间</SelectItem>
-              {namespaces.map((n) => <SelectItem key={n} value={n} className="text-xs">{n}</SelectItem>)}
-            </SelectContent>
-          </Select>
-          <Select value={timeWindow} onValueChange={setTimeWindow}>
-            <SelectTrigger className="w-32 h-8 text-xs"><SelectValue /></SelectTrigger>
-            <SelectContent>
-              <SelectItem value="0" className="text-xs">全部时间</SelectItem>
-              <SelectItem value="1" className="text-xs">近 1 小时</SelectItem>
-              <SelectItem value="6" className="text-xs">近 6 小时</SelectItem>
-              <SelectItem value="24" className="text-xs">近 24 小时</SelectItem>
-              <SelectItem value="168" className="text-xs">近 7 天</SelectItem>
-            </SelectContent>
-          </Select>
-          <Button variant="outline" size="sm" className="h-8 text-xs" onClick={() => { loadEvents(); loadSummary(); }} disabled={loading}>
-            <RefreshCw className={`h-3 w-3 mr-1 ${loading ? 'animate-spin' : ''}`} />
-            刷新
-          </Button>
-        </div>
-      </div>
-
-      {/* 统计条：统一边框，无彩色卡片 */}
-      <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
-        <CardContent className="p-0">
-          <div className="grid grid-cols-2 md:grid-cols-4">
-            <StatCell label="事件总数" value={summary?.total ?? events.length} />
-            <StatCell label="告警事件" value={summary?.warning_count ?? warningCount} hint="Warning" />
-            <StatCell label="正常事件" value={summary?.normal_count ?? normalCount} hint="Normal" />
-            <StatCell label="告警类型" value={reasonData.length} hint="不同 Reason" />
-          </div>
-        </CardContent>
-      </Card>
-
-      {(selectedReason || selectedKind) && (
+  const filterToolbar = (selectedReason || selectedKind) ? (
         <div className="flex items-center gap-2 text-xs">
           <span className="text-[var(--dg-text-muted)]">筛选:</span>
           {selectedReason && (
@@ -241,8 +172,59 @@ export default function EventsPage() {
             </button>
           )}
         </div>
-      )}
+  ) : undefined;
 
+  return (
+    <PageShell
+      variant="list"
+      title="事件中心"
+      subtitle={clusterName ? `${clusterName} · 集群事件与告警` : '集群事件与告警'}
+      icon={<Bell className="h-5 w-5" />}
+      metrics={!loading ? (
+        <StatStrip
+          items={[
+            { label: '事件总数', value: summary?.total ?? events.length, color: 'muted' },
+            { label: '告警事件', value: summary?.warning_count ?? warningCount, color: 'amber' },
+            { label: '正常事件', value: summary?.normal_count ?? normalCount, color: 'green' },
+            { label: '告警类型', value: reasonData.length, color: 'red' },
+          ]}
+        />
+      ) : undefined}
+      toolbar={filterToolbar}
+      actions={(
+        <>
+          <Select value={activeCluster} onValueChange={(v) => { setActiveCluster(v); navigate(`/kubernetes/${v}/events`); }}>
+            <SelectTrigger className="w-40 h-9 dg-input"><SelectValue /></SelectTrigger>
+            <SelectContent>
+              {clusters.map((c: JsonData) => (
+                <SelectItem key={c.id} value={c.code || String(c.id)}>{c.name || c.code}</SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+          <Select value={selectedNs} onValueChange={(v) => { setSelectedNs(v); setSelectedReason(''); setSelectedKind(''); }}>
+            <SelectTrigger className="w-36 h-9 dg-input"><SelectValue placeholder="命名空间" /></SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">所有命名空间</SelectItem>
+              {namespaces.map((n) => <SelectItem key={n} value={n}>{n}</SelectItem>)}
+            </SelectContent>
+          </Select>
+          <Select value={timeWindow} onValueChange={setTimeWindow}>
+            <SelectTrigger className="w-32 h-9 dg-input"><SelectValue /></SelectTrigger>
+            <SelectContent>
+              <SelectItem value="0">全部时间</SelectItem>
+              <SelectItem value="1">近 1 小时</SelectItem>
+              <SelectItem value="6">近 6 小时</SelectItem>
+              <SelectItem value="24">近 24 小时</SelectItem>
+              <SelectItem value="168">近 7 天</SelectItem>
+            </SelectContent>
+          </Select>
+          <Button variant="outline" size="sm" className="dg-btn-secondary" onClick={() => { loadEvents(); loadSummary(); }} disabled={loading}>
+            <RefreshCw className={`h-4 w-4 mr-1 ${loading ? 'animate-spin' : ''}`} />
+            刷新
+          </Button>
+        </>
+      )}
+    >
       {reasonData.length > 0 && (
         <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
           <RankPanel title="告警原因" items={reasonData} selected={selectedReason} onSelect={setSelectedReason} />
@@ -279,26 +261,27 @@ export default function EventsPage() {
         </Card>
       )}
 
-      <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
-        <CardContent className="p-0">
-          <div className="flex items-center justify-between px-4 py-2 border-b border-[var(--dg-border)]">
-            <span className="text-sm text-[var(--dg-text-secondary)]">事件列表 ({displayEvents.length})</span>
+      <ContentPanel
+        toolbar={(
+          <div className="flex items-center justify-between w-full">
+            <span className="text-sm dg-text-secondary">事件列表 ({displayEvents.length})</span>
             <Select value={filterType} onValueChange={setFilterType}>
-              <SelectTrigger className="w-28 h-7 text-xs"><SelectValue /></SelectTrigger>
+              <SelectTrigger className="w-28 h-8 dg-input text-xs"><SelectValue /></SelectTrigger>
               <SelectContent>
-                <SelectItem value="all" className="text-xs">所有类型</SelectItem>
-                <SelectItem value="Warning" className="text-xs">Warning</SelectItem>
-                <SelectItem value="Normal" className="text-xs">Normal</SelectItem>
+                <SelectItem value="all">所有类型</SelectItem>
+                <SelectItem value="Warning">Warning</SelectItem>
+                <SelectItem value="Normal">Normal</SelectItem>
               </SelectContent>
             </Select>
           </div>
-          <EventTable
-            events={displayEvents}
-            loading={loading}
-            showNamespace
-          />
-        </CardContent>
-      </Card>
-    </div>
+        )}
+      >
+        <EventTable
+          events={displayEvents}
+          loading={loading}
+          showNamespace
+        />
+      </ContentPanel>
+    </PageShell>
   );
 }