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

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

frontend/src/components/cloud/BillingRecordDialog.tsx

@@ -97,7 +97,7 @@ export function BillingRecordDialog({ open, onOpenChange, editingRecord, onSucce
         <div className="space-y-3">
           <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} onValueChange={(v) => setForm({ ...form, provider: v })}>
                 <SelectTrigger className="mt-1"><SelectValue /></SelectTrigger>
                 <SelectContent>
@@ -108,32 +108,32 @@ export function BillingRecordDialog({ open, onOpenChange, editingRecord, onSucce
               </Select>
             </div>
             <div>
-              <Label className="text-sm text-slate-300">日期 *</Label>
+              <Label className="text-sm text-[var(--dg-text-secondary)]">日期 *</Label>
               <Input type="date" className="mt-1" value={form.billing_date} onChange={(e) => setForm({ ...form, billing_date: e.target.value })} />
             </div>
           </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>
               <Input type="number" step="0.01" className="mt-1" placeholder="0.00" value={form.cost} onChange={(e) => setForm({ ...form, cost: e.target.value })} />
             </div>
             <div>
-              <Label className="text-sm text-slate-300">服务</Label>
+              <Label className="text-sm text-[var(--dg-text-secondary)]">服务</Label>
               <Input className="mt-1" placeholder="ECS, RDS..." value={form.service} onChange={(e) => setForm({ ...form, service: e.target.value })} />
             </div>
           </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>
               <Input className="mt-1" placeholder="cn-hangzhou" value={form.region} onChange={(e) => setForm({ ...form, region: e.target.value })} />
             </div>
             <div>
-              <Label className="text-sm text-slate-300">账号名称</Label>
+              <Label className="text-sm text-[var(--dg-text-secondary)]">账号名称</Label>
               <Input className="mt-1" placeholder="主账号" value={form.account_name} onChange={(e) => setForm({ ...form, account_name: e.target.value })} />
             </div>
           </div>
           <div>
-            <Label className="text-sm text-slate-300">备注</Label>
+            <Label className="text-sm text-[var(--dg-text-secondary)]">备注</Label>
             <Input className="mt-1" placeholder="可选" value={form.description} onChange={(e) => setForm({ ...form, description: e.target.value })} />
           </div>
         </div>