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

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

frontend/src/components/layout/PageTabs.tsx

@@ -0,0 +1,48 @@
+// 页面级 Tab 导航 — 与内容区筛选分离 // Logan.Li
+import { cn } from '@/lib/utils';
+
+export interface PageTabItem {
+  id: string;
+  label: string;
+  badge?: number | string;
+}
+
+interface PageTabsProps {
+  items: PageTabItem[];
+  value: string;
+  onChange: (id: string) => void;
+  className?: string;
+}
+
+export function PageTabs({ items, value, onChange, className }: PageTabsProps) {
+  return (
+    <nav
+      className={cn('dg-page-tabs flex gap-0.5 border-b border-[var(--border-default)]', className)}
+      role="tablist"
+    >
+      {items.map((tab) => {
+        const active = value === tab.id;
+        return (
+          <button
+            key={tab.id}
+            type="button"
+            role="tab"
+            aria-selected={active}
+            onClick={() => onChange(tab.id)}
+            className={cn(
+              'dg-page-tab px-4 py-2.5 text-sm font-medium transition-colors border-b-2 -mb-px',
+              active
+                ? 'text-[var(--brand)] border-[var(--brand)]'
+                : 'dg-text-secondary border-transparent hover:text-[var(--text-primary)]',
+            )}
+          >
+            {tab.label}
+            {tab.badge != null && (
+              <span className="ml-1.5 text-xs dg-text-muted">({tab.badge})</span>
+            )}
+          </button>
+        );
+      })}
+    </nav>
+  );
+}