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

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

frontend/src/pages/monitor/MiddlewareMonitor.tsx

@@ -54,11 +54,11 @@ function fmtVal(v: number, precision = 0): string {
 
 function statusColor(status: string): string {
   switch (status) {
-    case 'online': return 'text-emerald-400';
-    case 'warning': return 'text-amber-400';
+    case 'online': return 'dg-text-green';
+    case 'warning': return 'dg-text-yellow';
     case 'error':
-    case 'offline': return 'text-red-400';
-    default: return 'text-slate-500';
+    case 'offline': return 'dg-text-red';
+    default: return 'dg-text-muted';
   }
 }
 
@@ -68,7 +68,7 @@ function statusBg(status: string): string {
     case 'warning': return 'bg-amber-400';
     case 'error':
     case 'offline': return 'bg-red-400';
-    default: return 'bg-slate-500';
+    default: return 'bg-[var(--dg-bg-active)]';
   }
 }
 
@@ -174,7 +174,7 @@ export function MiddlewareMonitor() {
 
       {loading && (
         <div className="flex items-center justify-center py-12">
-          <Loader2 className="h-6 w-6 animate-spin text-slate-500 mr-2" />
+          <Loader2 className="h-6 w-6 animate-spin dg-text-muted mr-2" />
           <span className="text-sm text-[var(--dg-text-muted)]">正在加载中间件指标...</span>
         </div>
       )}
@@ -182,8 +182,8 @@ export function MiddlewareMonitor() {
       {error && !loading && (
         <Card className="bg-[var(--dg-bg-secondary)] border-red-500/30">
           <CardContent className="p-6 text-center">
-            <Activity className="h-8 w-8 text-red-400 mx-auto mb-2" />
-            <p className="text-sm text-red-400">{error}</p>
+            <Activity className="h-8 w-8 dg-text-red mx-auto mb-2" />
+            <p className="text-sm dg-text-red">{error}</p>
             <p className="text-xs text-[var(--dg-text-muted)] mt-2">请确认后端服务可用</p>
           </CardContent>
         </Card>
@@ -192,7 +192,7 @@ export function MiddlewareMonitor() {
       {!loading && !error && targets.length === 0 && (
         <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
           <CardContent className="p-12 text-center">
-            <Database className="h-12 w-12 text-slate-600 mx-auto mb-4" />
+            <Database className="h-12 w-12 dg-text-muted mx-auto mb-4" />
             <p className="text-sm text-[var(--dg-text-muted)]">暂无中间件监控目标</p>
             <p className="text-xs text-[var(--dg-text-muted)] mt-2">点击「添加监控」配置 Redis / MySQL 连接</p>
             <Button size="sm" className="mt-4 gap-1.5" onClick={() => { setEditTarget(null); setDialogOpen(true); }}>
@@ -208,7 +208,7 @@ export function MiddlewareMonitor() {
         <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
           <CardContent className="p-4">
             <div className="flex items-center gap-2 mb-4">
-              <Database className="h-4 w-4 text-red-400" />
+              <Database className="h-4 w-4 dg-text-red" />
               <h3 className="text-sm font-medium text-[var(--dg-text-primary)]">Redis 监控</h3>
               {redisTarget && (
                 <Badge variant="outline" className="ml-auto text-[10px] border-[var(--dg-border)] text-[var(--dg-text-muted)]">
@@ -237,7 +237,7 @@ export function MiddlewareMonitor() {
         <Card className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
           <CardContent className="p-4">
             <div className="flex items-center gap-2 mb-4">
-              <Server className="h-4 w-4 text-blue-400" />
+              <Server className="h-4 w-4 dg-text-blue" />
               <h3 className="text-sm font-medium text-[var(--dg-text-primary)]">MySQL 监控</h3>
               {mysqlTarget && (
                 <Badge variant="outline" className="ml-auto text-[10px] border-[var(--dg-border)] text-[var(--dg-text-muted)]">
@@ -358,7 +358,7 @@ function InstanceCard({
         </div>
         <Badge
           variant="outline"
-          className={`text-[10px] capitalize ${target.status === 'online' ? 'border-emerald-400/50 text-emerald-400' : 'border-[var(--dg-border)] text-[var(--dg-text-muted)]'}`}
+          className={`text-[10px] capitalize ${target.status === 'online' ? 'border-emerald-400/50 dg-text-green' : 'border-[var(--dg-border)] text-[var(--dg-text-muted)]'}`}
         >
           {target.status}
         </Badge>
@@ -393,7 +393,7 @@ function InstanceCard({
           <Pencil className="h-3 w-3" />
           编辑
         </Button>
-        <Button variant="ghost" size="sm" className="h-7 px-2 text-xs gap-1 text-red-400 hover:text-red-300" onClick={onDelete}>
+        <Button variant="ghost" size="sm" className="h-7 px-2 text-xs gap-1 dg-text-red hover:dg-text-red" onClick={onDelete}>
           <Trash2 className="h-3 w-3" />
           删除
         </Button>