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

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

frontend/src/pages/monitor/MonitorCenter.tsx

@@ -1,7 +1,7 @@
-// 监控中心 — 4个监控标签页的容器
+// 监控中心 — 4个监控标签页的容器 // Logan.Li
 import { useState } from 'react';
-import { cn } from '@/lib/utils';
-import { Cpu, Database, Radio, Globe } from 'lucide-react';
+import { Cpu } from 'lucide-react';
+import { PageShell } from '@/components/layout/PageShell';
 import { HostMonitor } from './HostMonitor';
 import { MiddlewareMonitor } from './MiddlewareMonitor';
 import { SNMPMonitor } from './SNMPMonitor';
@@ -9,61 +9,32 @@ import { SiteMonitor } from './SiteMonitor';
 
 type TabId = 'host' | 'middleware' | 'snmp' | 'site';
 
-interface Tab {
-  id: TabId;
-  name: string;
-  icon: React.ElementType;
-  description: string;
-}
-
-const tabs: Tab[] = [
-  { id: 'host', name: '主机监控', icon: Cpu, description: 'CPU / 内存 / 磁盘 / 网络 / 磁盘IO' },
-  { id: 'middleware', name: '中间件监控', icon: Database, description: 'Redis / MySQL 指标采集' },
-  { id: 'snmp', name: 'SNMP 监控', icon: Radio, description: '网络设备 / 服务器硬件 (OID 模板)' },
-  { id: 'site', name: '站点拨测', icon: Globe, description: 'HTTP / PING / DNS / TCP / WS 拨测' },
+const tabs: { id: TabId; name: string; description: string }[] = [
+  { id: 'host', name: '主机监控', description: 'CPU / 内存 / 磁盘 / 网络 / 磁盘IO' },
+  { id: 'middleware', name: '中间件监控', description: 'Redis / MySQL 指标采集' },
+  { id: 'snmp', name: 'SNMP 监控', description: '网络设备 / 服务器硬件 (OID 模板)' },
+  { id: 'site', name: '站点拨测', description: 'HTTP / PING / DNS / TCP / WS 拨测' },
 ];
 
 export function MonitorCenter() {
   const [activeTab, setActiveTab] = useState<TabId>('host');
+  const current = tabs.find((t) => t.id === activeTab);
 
   return (
-    <div className="space-y-6">
-      <div>
-        <h1 className="text-2xl font-bold text-[var(--dg-text-primary)]">监控中心</h1>
-        <p className="text-sm text-[var(--dg-text-muted)] mt-1">全面的基础设施与应用监控</p>
-      </div>
-
-      {/* Tab Bar */}
-      <div className="flex gap-1 bg-[var(--dg-bg-secondary)] p-1 rounded-lg border border-[var(--dg-border)]">
-        {tabs.map((tab) => (
-          <button
-            key={tab.id}
-            onClick={() => setActiveTab(tab.id)}
-            className={cn(
-              'flex-1 flex items-center justify-center gap-2 px-4 py-2.5 rounded-md text-sm font-medium transition-all',
-              activeTab === tab.id
-                ? 'bg-[var(--dg-bg-tertiary)] text-[var(--dg-text-primary)] shadow-sm'
-                : 'text-[var(--dg-text-muted)] hover:text-[var(--dg-text-secondary)]'
-            )}
-          >
-            <tab.icon className="h-4 w-4" />
-            <span className="hidden sm:inline">{tab.name}</span>
-          </button>
-        ))}
-      </div>
-
-      {/* Tab Description */}
-      <p className="text-sm text-[var(--dg-text-muted)] -mt-4">
-        {tabs.find(t => t.id === activeTab)?.description}
-      </p>
-
-      {/* Tab Content */}
-      <div className="min-h-[400px]">
-        {activeTab === 'host' && <HostMonitor />}
-        {activeTab === 'middleware' && <MiddlewareMonitor />}
-        {activeTab === 'snmp' && <SNMPMonitor />}
-        {activeTab === 'site' && <SiteMonitor />}
-      </div>
-    </div>
+    <PageShell
+      variant="list"
+      title="监控中心"
+      subtitle={current?.description ?? '全面的基础设施与应用监控'}
+      icon={<Cpu className="h-5 w-5" />}
+      tabs={tabs.map((t) => ({ id: t.id, label: t.name }))}
+      activeTab={activeTab}
+      onTabChange={(id) => setActiveTab(id as TabId)}
+      contentClassName="min-h-[400px]"
+    >
+      {activeTab === 'host' && <HostMonitor embedded />}
+      {activeTab === 'middleware' && <MiddlewareMonitor />}
+      {activeTab === 'snmp' && <SNMPMonitor />}
+      {activeTab === 'site' && <SiteMonitor />}
+    </PageShell>
   );
-}
+}