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

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

frontend/src/components/cloud/BillingRuleDialog.tsx

@@ -87,12 +87,12 @@ export function BillingRuleDialog({ open, onOpenChange, editingRule, onSuccess }
         </DialogHeader>
         <div className="space-y-3">
           <div>
-            <Label className="text-sm text-slate-300">规则名称 *</Label>
+            <Label className="text-sm text-[var(--dg-text-secondary)]">规则名称 *</Label>
             <Input className="mt-1" placeholder="如：日成本超 500 元预警" value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} />
           </div>
           <div className="grid grid-cols-2 gap-3">
             <div>
-              <Label className="text-sm text-slate-300">厂商</Label>
+              <Label className="text-sm text-[var(--dg-text-secondary)]">厂商</Label>
               <Select value={form.provider || 'all'} onValueChange={(v) => setForm({ ...form, provider: v === 'all' ? '' : v })}>
                 <SelectTrigger className="mt-1"><SelectValue /></SelectTrigger>
                 <SelectContent>
@@ -104,7 +104,7 @@ export function BillingRuleDialog({ open, onOpenChange, editingRule, onSuccess }
               </Select>
             </div>
             <div>
-              <Label className="text-sm text-slate-300">指标</Label>
+              <Label className="text-sm text-[var(--dg-text-secondary)]">指标</Label>
               <Select value={form.metric} onValueChange={(v) => setForm({ ...form, metric: v })}>
                 <SelectTrigger className="mt-1"><SelectValue /></SelectTrigger>
                 <SelectContent>
@@ -116,7 +116,7 @@ export function BillingRuleDialog({ open, onOpenChange, editingRule, onSuccess }
           </div>
           <div className="grid grid-cols-2 gap-3">
             <div>
-              <Label className="text-sm text-slate-300">比较</Label>
+              <Label className="text-sm text-[var(--dg-text-secondary)]">比较</Label>
               <Select value={form.operator} onValueChange={(v) => setForm({ ...form, operator: v })}>
                 <SelectTrigger className="mt-1"><SelectValue /></SelectTrigger>
                 <SelectContent>
@@ -128,13 +128,13 @@ export function BillingRuleDialog({ open, onOpenChange, editingRule, onSuccess }
               </Select>
             </div>
             <div>
-              <Label className="text-sm text-slate-300">阈值(元) *</Label>
+              <Label className="text-sm text-[var(--dg-text-secondary)]">阈值(元) *</Label>
               <Input type="number" step="0.01" className="mt-1" placeholder="500.00" value={form.threshold} onChange={(e) => setForm({ ...form, threshold: e.target.value })} />
             </div>
           </div>
           <div className="flex items-center gap-2">
             <Switch checked={form.enabled} onCheckedChange={(v) => setForm({ ...form, enabled: v })} />
-            <Label className="text-sm text-slate-300">启用</Label>
+            <Label className="text-sm text-[var(--dg-text-secondary)]">启用</Label>
           </div>
         </div>
         <DialogFooter>