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

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

frontend/src/components/system/SystemManager.tsx

@@ -2,9 +2,9 @@
 import { useState, useEffect } from 'react';
 import { useLocation } from 'react-router-dom';
 import { useConfirm } from '@/components/ui/confirm-dialog';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { Badge } from '@/components/ui/badge';
-import { CheckCircle, XCircle, Users, Shield, Settings } from 'lucide-react';
+import { CheckCircle, XCircle, Settings } from 'lucide-react';
+import { PageShell } from '@/components/layout/PageShell';
 import { userApi } from '@/api';
 import type { Role } from '@/types';
 import { SystemUserTab } from './SystemUserTab';
@@ -231,34 +231,25 @@ export function SystemManager() {
     }
   };
 
+  const pageTabs = [
+    { id: 'users', label: '用户管理', badge: users.length || undefined },
+    { id: 'roles', label: '角色权限' },
+    { id: 'settings', label: '系统设置' },
+  ];
+
   return (
-    <div className="space-y-6">
-      {/* Page Header */}
-      <div className="flex items-center justify-between">
-        <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>
-      </div>
-
-      {/* Tabs */}
-      <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
-        <TabsList className="bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)]">
-          <TabsTrigger value="users" className="data-[state=active]:bg-[var(--dg-bg-hover)]">
-            <Users className="h-4 w-4 mr-2" />
-            用户管理
-          </TabsTrigger>
-          <TabsTrigger value="roles" className="data-[state=active]:bg-[var(--dg-bg-hover)]">
-            <Shield className="h-4 w-4 mr-2" />
-            角色权限
-          </TabsTrigger>
-          <TabsTrigger value="settings" className="data-[state=active]:bg-[var(--dg-bg-hover)]">
-            <Settings className="h-4 w-4 mr-2" />
-            系统设置
-          </TabsTrigger>
-        </TabsList>
-
-        <TabsContent value="users" className="mt-4 space-y-4">
+    <PageShell
+      variant="list"
+      title="系统管理"
+      subtitle="用户、权限与系统配置"
+      icon={<Settings className="h-5 w-5" />}
+      tabs={pageTabs}
+      activeTab={activeTab}
+      onTabChange={setActiveTab}
+    >
+      <div className="w-full">
+        {activeTab === 'users' && (
+        <div className="space-y-4">
           <SystemUserTab
             searchQuery={searchQuery}
             setSearchQuery={setSearchQuery}
@@ -298,21 +289,22 @@ export function SystemManager() {
             handleLdapImport={ldap.handleLdapImport}
             setLdapUsers={ldap.setLdapUsers}
           />
-        </TabsContent>
+        </div>
+        )}
 
-        <TabsContent value="roles" className="mt-4 space-y-4">
+        {activeTab === 'roles' && (
           <SystemRolesTab
             selectedRole={selectedRole}
             setSelectedRole={setSelectedRole}
           />
-        </TabsContent>
+        )}
 
-        <TabsContent value="settings" className="mt-4">
+        {activeTab === 'settings' && (
           <SystemSettingsTab {...ldap.settingsTabProps} />
-        </TabsContent>
-      </Tabs>
+        )}
+      </div>
 
       <ResetPasswordDialog user={resetPasswordUser} onClose={() => setResetPasswordUser(null)} />
-    </div>
+    </PageShell>
   );
 }