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

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

frontend/src/pages/monitor/SiteMonitor.tsx

@@ -49,11 +49,11 @@ import type { JsonData } from '@/types/common';
 
 // 拨测协议类型（与后端 model 对齐：http, https, tcp, dns, ping）
 const probeTypes = [
-  { icon: Globe, name: 'HTTP', color: 'text-blue-400', desc: 'HTTP URL 状态码 & 响应时间' },
-  { icon: Globe, name: 'HTTPS', color: 'text-emerald-400', desc: 'HTTPS SSL 证书 & 响应时间' },
-  { icon: Server, name: 'TCP', color: 'text-orange-400', desc: 'TCP 端口连通性检测' },
-  { icon: Globe, name: 'DNS', color: 'text-cyan-400', desc: '域名解析延迟 & 结果验证' },
-  { icon: ArrowUpDown, name: 'PING', color: 'text-purple-400', desc: 'ICMP 连通性 & 延迟' },
+  { icon: Globe, name: 'HTTP', color: 'dg-text-blue', desc: 'HTTP URL 状态码 & 响应时间' },
+  { icon: Globe, name: 'HTTPS', color: 'dg-text-green', desc: 'HTTPS SSL 证书 & 响应时间' },
+  { icon: Server, name: 'TCP', color: 'dg-text-orange', desc: 'TCP 端口连通性检测' },
+  { icon: Globe, name: 'DNS', color: 'dg-text-cyan', desc: '域名解析延迟 & 结果验证' },
+  { icon: ArrowUpDown, name: 'PING', color: 'dg-text-purple', desc: 'ICMP 连通性 & 延迟' },
 ] as const;
 
 const PROBE_TYPE_OPTIONS = ['HTTP', 'HTTPS', 'TCP', 'DNS', 'PING'] as const;
@@ -104,22 +104,22 @@ const emptyForm: CreateTaskForm = {
 function statusIcon(status?: string) {
   switch (status) {
     case 'up':
-      return <CheckCircle2 className="h-4 w-4 text-emerald-400" />;
+      return <CheckCircle2 className="h-4 w-4 dg-text-green" />;
     case 'down':
-      return <XCircle className="h-4 w-4 text-red-400" />;
+      return <XCircle className="h-4 w-4 dg-text-red" />;
     default:
-      return <Clock className="h-4 w-4 text-gray-400" />;
+      return <Clock className="h-4 w-4 dg-text-secondary" />;
   }
 }
 
 function statusBadge(status?: string) {
   switch (status) {
     case 'up':
-      return <Badge className="bg-emerald-500/15 text-emerald-400 border-emerald-500/30">正常</Badge>;
+      return <Badge className="bg-emerald-500/15 dg-text-green border-emerald-500/30">正常</Badge>;
     case 'down':
-      return <Badge className="bg-red-500/15 text-red-400 border-red-500/30">异常</Badge>;
+      return <Badge className="bg-red-500/15 dg-text-red border-red-500/30">异常</Badge>;
     default:
-      return <Badge className="bg-gray-500/15 text-gray-400 border-gray-500/30">未知</Badge>;
+      return <Badge className="dg-badge-muted">未知</Badge>;
   }
 }
 
@@ -300,9 +300,9 @@ export function SiteMonitor() {
             {[
               { label: '总任务数', value: stats?.total_tasks ?? '--' },
               { label: '已启用', value: stats?.enabled_tasks ?? '--' },
-              { label: '正常', value: stats?.up_count ?? '--', color: 'text-emerald-400' },
-              { label: '异常', value: stats?.down_count ?? '--', color: 'text-red-400' },
-              { label: '可用率', value: availStr, color: 'text-blue-400' },
+              { label: '正常', value: stats?.up_count ?? '--', color: 'dg-text-green' },
+              { label: '异常', value: stats?.down_count ?? '--', color: 'dg-text-red' },
+              { label: '可用率', value: availStr, color: 'dg-text-blue' },
             ].map((item) => (
               <div key={item.label} className="bg-[var(--dg-bg-tertiary)] rounded-lg p-3 text-center">
                 <p className="text-xs text-[var(--dg-text-muted)]">{item.label}</p>
@@ -407,7 +407,7 @@ export function SiteMonitor() {
                         <Button
                           variant="ghost"
                           size="icon"
-                          className="h-8 w-8 text-red-400 hover:text-red-300 hover:bg-red-500/10"
+                          className="h-8 w-8 dg-text-red hover:dg-text-red hover:bg-red-500/10"
                           onClick={() => handleDelete(task)}
                         >
                           <Trash2 className="h-4 w-4" />