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

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

frontend/src/components/dashboard/Dashboard.tsx

@@ -20,6 +20,7 @@ import type {
   DashboardCluster,
 } from './DashboardRecent';
 import { SkeletonDashboard } from '@/components/layout/SkeletonCard';
+import { PageShell } from '@/components/layout/PageShell';
 import type { JsonData } from '@/types/common';
 import type { AlertEventRecord, CertExpiryRecord } from '@/types';
 
@@ -109,14 +110,12 @@ export function Dashboard() {
   const costStats = stats?.cost_stats;
 
   return (
-    <div className="dg-page">
-      {/* Page Header */}
-      <div className="dg-page-header">
-        <div>
-          <h1 className="dg-page-title">{t('dashboard.title')}</h1>
-          <p className="dg-page-subtitle">{t('dashboard.subtitle')} · {t('dashboard.lastUpdated')}: {new Date().toLocaleTimeString()}</p>
-        </div>
-        <div className="dg-page-actions">
+    <PageShell
+      variant="workspace"
+      title={t('dashboard.title')}
+      subtitle={`${t('dashboard.subtitle')} · ${t('dashboard.lastUpdated')}: ${new Date().toLocaleTimeString()}`}
+      actions={(
+        <>
           <Button
             variant="outline"
             className="dg-btn-secondary"
@@ -126,19 +125,14 @@ export function Dashboard() {
             <Clock className={cn('h-4 w-4', refreshing && 'animate-spin')} />
             {refreshing ? t('dashboard.refreshing') : t('dashboard.refresh')}
           </Button>
-          <Button
-            className="dg-btn-primary"
-            onClick={() => navigate('/servers')}
-          >
+          <Button className="dg-btn-primary" onClick={() => navigate('/servers')}>
             <Server className="h-4 w-4" />
             {t('dashboard.servers')}
             <ArrowRight className="h-3.5 w-3.5" />
           </Button>
-        </div>
-      </div>
-
-      {/* Stats — compact strip */}
-      <div className="animate-fade-in-delay-1">
+        </>
+      )}
+      metrics={(
         <StatStrip
           items={[
             { label: t('dashboard.stat.servers'), value: serverStats?.total ?? 0, color: 'blue' },
@@ -150,10 +144,10 @@ export function Dashboard() {
             { label: t('dashboard.stat.monthlyCost'), value: `¥${Number(costStats?.month_cost ?? 0).toLocaleString()}`, color: 'amber' },
           ]}
         />
-      </div>
-
-      {/* Resource Usage Chart */}
-      <div className="animate-fade-in-delay-2">
+      )}
+      contentClassName="space-y-6"
+    >
+      <div>
         <ResourceUsageCard
           avgCpu={Number(serverStats?.avg_cpu ?? 0)}
           avgMemory={Number(serverStats?.avg_memory ?? 0)}
@@ -185,7 +179,7 @@ export function Dashboard() {
         <ServerStatusCard servers={servers} />
         <KubernetesClusterCard clusters={clusters} />
       </div>
-    </div>
+    </PageShell>
   );
 }