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

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

frontend/src/components/system/UserDetailDialog.tsx

@@ -30,52 +30,52 @@ export function UserDetailDialog({
 }: UserDetailDialogProps) {
   return (
     <Dialog open={!!selectedUser} onOpenChange={() => setSelectedUser(null)}>
-      <DialogContent className="bg-slate-900 border-slate-800">
+      <DialogContent className="dg-card">
         <DialogHeader>
-          <DialogTitle className="text-slate-100 flex items-center gap-2">
-            <UserIcon className="h-5 w-5 text-blue-400" />
+          <DialogTitle className="text-[var(--dg-text-primary)] flex items-center gap-2">
+            <UserIcon className="h-5 w-5 dg-text-blue" />
             {selectedUser?.nickname}
           </DialogTitle>
-          <DialogDescription className="text-slate-500">
+          <DialogDescription className="dg-text-muted">
             @{selectedUser?.username} · {selectedUser?.email}
           </DialogDescription>
         </DialogHeader>
 
         <div className="space-y-4">
-          <div className="grid grid-cols-2 gap-4 p-4 rounded-lg bg-slate-800/50">
+          <div className="grid grid-cols-2 gap-4 p-4 rounded-lg bg-[var(--dg-bg-tertiary)]/50">
             <div>
-              <p className="text-xs text-slate-500 mb-1">用户名</p>
-              <p className="text-sm text-slate-200">{selectedUser?.username}</p>
+              <p className="text-xs dg-text-muted mb-1">用户名</p>
+              <p className="text-sm text-[var(--dg-text-primary)]">{selectedUser?.username}</p>
             </div>
             <div>
-              <p className="text-xs text-slate-500 mb-1">昵称</p>
-              <p className="text-sm text-slate-200">{selectedUser?.nickname}</p>
+              <p className="text-xs dg-text-muted mb-1">昵称</p>
+              <p className="text-sm text-[var(--dg-text-primary)]">{selectedUser?.nickname}</p>
             </div>
             <div>
-              <p className="text-xs text-slate-500 mb-1">邮箱</p>
-              <p className="text-sm text-slate-200">{selectedUser?.email}</p>
+              <p className="text-xs dg-text-muted mb-1">邮箱</p>
+              <p className="text-sm text-[var(--dg-text-primary)]">{selectedUser?.email}</p>
             </div>
             <div>
-              <p className="text-xs text-slate-500 mb-1">手机号</p>
-              <p className="text-sm text-slate-200">{selectedUser?.phone || '--'}</p>
+              <p className="text-xs dg-text-muted mb-1">手机号</p>
+              <p className="text-sm text-[var(--dg-text-primary)]">{selectedUser?.phone || '--'}</p>
             </div>
             <div>
-              <p className="text-xs text-slate-500 mb-1">状态</p>
-              <p className="text-sm text-slate-200">{selectedUser && getUserStatusBadge(selectedUser.status)}</p>
+              <p className="text-xs dg-text-muted mb-1">状态</p>
+              <p className="text-sm text-[var(--dg-text-primary)]">{selectedUser && getUserStatusBadge(selectedUser.status)}</p>
             </div>
             <div>
-              <p className="text-xs text-slate-500 mb-1">创建时间</p>
-              <p className="text-sm text-slate-200">
+              <p className="text-xs dg-text-muted mb-1">创建时间</p>
+              <p className="text-sm text-[var(--dg-text-primary)]">
                 {selectedUser && selectedUser.createdAt ? new Date(selectedUser.createdAt).toLocaleDateString() : '--'}
               </p>
             </div>
           </div>
 
           <div>
-            <h4 className="text-sm font-medium text-slate-300 mb-2">角色</h4>
+            <h4 className="text-sm font-medium text-[var(--dg-text-secondary)] mb-2">角色</h4>
             <div className="flex flex-wrap gap-2">
               {selectedUser?.roles.map((role: string) => (
-                <Badge key={role} variant="outline" className="border-slate-700 text-slate-400">
+                <Badge key={role} variant="outline" className="border-[var(--dg-border)] dg-text-secondary">
                   {role}
                 </Badge>
               ))}
@@ -86,7 +86,7 @@ export function UserDetailDialog({
         <DialogFooter>
           <Button
             variant="outline"
-            className="border-slate-700 text-slate-300"
+            className="border-[var(--dg-border)] text-[var(--dg-text-secondary)]"
             disabled={selectedUser?.authSource === 'ldap'}
             onClick={() => selectedUser && onResetPassword?.(selectedUser)}
           >