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

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

frontend/src/components/cloud/CloudBilling.tsx

@@ -17,17 +17,26 @@ import {
   Trash2,
   Pencil,
   RefreshCw,
-  Loader2,
   Wallet,
   Bell,
 } from 'lucide-react';
 import { toast } from 'sonner';
 import { useConfirm } from '@/components/ui/confirm-dialog';
 import { billingApi } from '@/api';
-import { formatCurrency, TrendChart, providerLabels, providerColors } from './CloudBillingHelpers';
+import {
+  formatCurrency,
+  TrendChart,
+  providerLabels,
+  providerHex,
+  ProviderDot,
+} from './CloudBillingHelpers';
 import { StatStrip } from '@/components/ui/stat-strip';
 import { BillingRecordDialog } from './BillingRecordDialog';
 import { BillingRuleDialog } from './BillingRuleDialog';
+import { PageShell } from '@/components/layout/PageShell';
+import { ContentPanel } from '@/components/layout/ContentPanel';
+import { PageLoading } from '@/components/layout/PageLoading';
+import { PageEmpty } from '@/components/layout/PageEmpty';
 import type { JsonData } from '@/types/common';
 
 export function CloudBilling() {
@@ -47,7 +56,6 @@ export function CloudBilling() {
   const [rules, setRules] = useState<JsonData[]>([]);
   const [rulesLoading, setRulesLoading] = useState(true);
 
-  // 弹窗状态（open + 编辑目标） // Logan.Li
   const [recordDialogOpen, setRecordDialogOpen] = useState(false);
   const [editingRecord, setEditingRecord] = useState<JsonData>(null);
   const [ruleDialogOpen, setRuleDialogOpen] = useState(false);
@@ -105,6 +113,12 @@ export function CloudBilling() {
     if (activeTab === 'alerts') loadRules();
   }, [activeTab, loadRules]);
 
+  const refreshAll = () => {
+    loadStats();
+    if (activeTab === 'records') loadRecords();
+    if (activeTab === 'alerts') loadRules();
+  };
+
   const openAddRecord = () => {
     setEditingRecord(null);
     setRecordDialogOpen(true);
@@ -160,176 +174,184 @@ export function CloudBilling() {
     }
   };
 
+  const pageTabs = [
+    { id: 'overview', label: '概览统计' },
+    { id: 'records', label: '成本记录' },
+    { id: 'alerts', label: '预警规则', badge: rules.length > 0 ? rules.length : undefined },
+  ];
+
+  const recordsToolbar = (
+    <div className="flex flex-wrap items-end gap-3">
+      <div>
+        <Label className="text-xs dg-text-secondary mb-1">厂商</Label>
+        <Select value={filterProvider || 'all'} onValueChange={(v) => setFilterProvider(v === 'all' ? '' : v)}>
+          <SelectTrigger className="w-32 h-9 dg-input"><SelectValue /></SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">全部</SelectItem>
+            {Object.entries(providerLabels).map(([k, v]) => (
+              <SelectItem key={k} value={k}>{v}</SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+      <div>
+        <Label className="text-xs dg-text-secondary mb-1">开始日期</Label>
+        <Input type="date" className="w-40 h-9 dg-input" value={filterStart} onChange={(e) => setFilterStart(e.target.value)} />
+      </div>
+      <div>
+        <Label className="text-xs dg-text-secondary mb-1">结束日期</Label>
+        <Input type="date" className="w-40 h-9 dg-input" value={filterEnd} onChange={(e) => setFilterEnd(e.target.value)} />
+      </div>
+      <Button variant="outline" size="sm" className="dg-btn-secondary" onClick={loadRecords}>
+        <RefreshCw className="h-4 w-4 mr-1" />查询
+      </Button>
+    </div>
+  );
+
   return (
-    <div className="space-y-4">
-      <div className="flex items-center justify-between">
-        <h2 className="text-lg font-semibold text-slate-100">云账单管理</h2>
-        <div className="flex items-center gap-2">
-          <Button variant="outline" size="sm" onClick={() => { loadStats(); if (activeTab === 'records') loadRecords(); if (activeTab === 'alerts') loadRules(); }}>
+    <PageShell
+      variant="list"
+      title="云账单管理"
+      subtitle="多云成本统计、记录与预警"
+      icon={<Wallet className="h-5 w-5" />}
+      tabs={pageTabs}
+      activeTab={activeTab}
+      onTabChange={(id) => setActiveTab(id as typeof activeTab)}
+      toolbar={activeTab === 'records' ? recordsToolbar : undefined}
+      metrics={
+        stats && !statsLoading ? (
+          <StatStrip
+            items={[
+              { label: '今日', value: formatCurrency(stats.today_cost || 0), color: 'blue' },
+              { label: '本月', value: formatCurrency(stats.month_cost || 0), color: 'amber' },
+              { label: '年度', value: formatCurrency(stats.year_cost || 0), color: 'purple' },
+              { label: '预警', value: `${stats.alerts?.length || 0} 条`, color: stats.alerts?.length > 0 ? 'red' : 'muted' },
+            ]}
+          />
+        ) : undefined
+      }
+      actions={(
+        <>
+          <Button variant="outline" size="sm" className="dg-btn-secondary" onClick={refreshAll}>
             <RefreshCw className="h-4 w-4 mr-1" />刷新
           </Button>
           {activeTab === 'records' && (
-            <Button size="sm" onClick={openAddRecord}>
+            <Button size="sm" className="dg-btn-primary" onClick={openAddRecord}>
               <Plus className="h-4 w-4 mr-1" />记录成本
             </Button>
           )}
           {activeTab === 'alerts' && (
-            <Button size="sm" onClick={openAddRule}>
+            <Button size="sm" className="dg-btn-primary" onClick={openAddRule}>
               <Plus className="h-4 w-4 mr-1" />添加规则
             </Button>
           )}
-        </div>
-      </div>
-
-      <div className="flex gap-1 border-b border-slate-800">
-        {([
-          { key: 'overview', label: '概览统计' },
-          { key: 'records', label: '成本记录' },
-          { key: 'alerts', label: '预警规则' },
-        ] as const).map(tab => (
-          <button
-            key={tab.key}
-            onClick={() => setActiveTab(tab.key)}
-            className={`px-4 py-2 text-sm font-medium transition-colors border-b-2 -mb-px ${
-              activeTab === tab.key
-                ? 'text-blue-400 border-blue-400'
-                : 'text-slate-400 border-transparent hover:text-slate-200'
-            }`}
-          >
-            {tab.label}
-          </button>
-        ))}
-      </div>
-
+        </>
+      )}
+    >
+      {/* Tab 1：概览统计 */}
       {activeTab === 'overview' && (
-        <div className="space-y-4">
-          {statsLoading ? (
-            <div className="flex items-center justify-center py-20 text-slate-500"><Loader2 className="h-6 w-6 animate-spin mr-2" />加载中...</div>
-          ) : stats ? (
-            <>
-              <StatStrip
-                items={[
-                  { label: '今日', value: formatCurrency(stats.today_cost || 0), color: 'blue' },
-                  { label: '本月', value: formatCurrency(stats.month_cost || 0), color: 'amber' },
-                  { label: '年度', value: formatCurrency(stats.year_cost || 0), color: 'purple' },
-                  { label: '预警', value: `${stats.alerts?.length || 0} 条`, color: stats.alerts?.length > 0 ? 'red' : 'muted' },
-                ]}
-              />
-
-              {stats.alerts?.length > 0 && (
-                <div className="rounded-lg border border-amber-500/30 bg-amber-500/5 p-4">
-                  <div className="flex items-center gap-2 mb-3">
-                    <Bell className="h-4 w-4 text-amber-400" />
-                    <span className="text-sm font-medium text-amber-300">成本预警</span>
-                  </div>
-                  <div className="space-y-2">
-                    {stats.alerts.map((a: JsonData, i: number) => (
-                      <div key={i} className="flex items-center justify-between text-sm">
-                        <div className="flex items-center gap-2">
-                          <Badge variant="outline" className="border-amber-500/50 text-amber-300">{a.rule_name}</Badge>
-                          <span className="text-slate-400">
-                            {a.provider} · {a.metric === 'daily' ? '日' : '月'}成本
-                          </span>
-                        </div>
-                        <span className="text-slate-300">
-                          当前 <span className="text-amber-300 font-medium">{formatCurrency(a.current)}</span>
-                          {' '}{a.operator}{' '}
-                          阈值 <span className="text-red-400 font-medium">{formatCurrency(a.threshold)}</span>
+        statsLoading ? (
+          <PageLoading />
+        ) : stats ? (
+          <div className="space-y-4">
+            {stats.alerts?.length > 0 && (
+              <div className="dg-alert-banner">
+                <div className="flex items-center gap-2 mb-3">
+                  <Bell className="h-4 w-4 dg-text-yellow" />
+                  <span className="dg-alert-banner-title">成本预警</span>
+                </div>
+                <div className="space-y-2">
+                  {stats.alerts.map((a: JsonData, i: number) => (
+                    <div key={i} className="flex items-center justify-between text-sm flex-wrap gap-2">
+                      <div className="flex items-center gap-2">
+                        <Badge variant="outline" className="dg-badge-yellow">{a.rule_name}</Badge>
+                        <span className="dg-text-secondary">
+                          {a.provider} · {a.metric === 'daily' ? '日' : '月'}成本
                         </span>
                       </div>
-                    ))}
-                  </div>
-                </div>
-              )}
-
-              <Card className="bg-slate-900/50 border-slate-800">
-                <CardContent className="pt-4">
-                  <h3 className="text-sm font-medium text-slate-200 mb-4">近 30 天成本趋势</h3>
-                  <TrendChart data={stats.month_trend || []} />
-                </CardContent>
-              </Card>
-
-              <Card className="bg-slate-900/50 border-slate-800">
-                <CardContent className="pt-4">
-                  <h3 className="text-sm font-medium text-slate-200 mb-4">本月厂商成本分布</h3>
-                  {(stats.provider_dist || []).length === 0 ? (
-                    <p className="text-sm text-slate-500 py-8 text-center">暂无数据</p>
-                  ) : (
-                    <div className="space-y-3">
-                      <div className="flex h-8 rounded-lg overflow-hidden">
-                        {stats.provider_dist.map((p: JsonData, i: number) => (
-                          <div
-                            key={i}
-                            className={`${providerColors[p.provider] || 'bg-slate-600'} flex items-center justify-center text-xs text-white font-medium`}
-                            style={{ width: `${p.percent}%` }}
-                            title={`${providerLabels[p.provider] || p.provider}: ${formatCurrency(p.cost)} (${p.percent.toFixed(1)}%)`}
-                          >
-                            {p.percent > 8 ? (providerLabels[p.provider] || p.provider) : ''}
-                          </div>
-                        ))}
-                      </div>
-                      <div className="grid grid-cols-2 md:grid-cols-3 gap-2">
-                        {stats.provider_dist.map((p: JsonData, i: number) => (
-                          <div key={i} className="flex items-center justify-between text-sm">
-                            <div className="flex items-center gap-2">
-                              <div className={`w-3 h-3 rounded ${providerColors[p.provider] || 'bg-slate-600'}`} />
-                              <span className="text-slate-300">{providerLabels[p.provider] || p.provider}</span>
-                            </div>
-                            <div className="text-right">
-                              <span className="text-slate-200 font-medium">{formatCurrency(p.cost)}</span>
-                              <span className="text-slate-500 ml-2">{p.percent.toFixed(1)}%</span>
-                            </div>
-                          </div>
-                        ))}
-                      </div>
+                      <span className="text-[var(--text-secondary)]">
+                        当前 <span className="dg-text-yellow font-medium">{formatCurrency(a.current)}</span>
+                        {' '}{a.operator}{' '}
+                        阈值 <span className="dg-text-red font-medium">{formatCurrency(a.threshold)}</span>
+                      </span>
                     </div>
-                  )}
-                </CardContent>
-              </Card>
-            </>
-          ) : null}
-        </div>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            <Card className="dg-card">
+              <CardContent className="pt-4">
+                <h3 className="dg-section-title">近 30 天成本趋势</h3>
+                <TrendChart data={stats.month_trend || []} />
+              </CardContent>
+            </Card>
+
+            <Card className="dg-card">
+              <CardContent className="pt-4">
+                <h3 className="dg-section-title">本月厂商成本分布</h3>
+                {(stats.provider_dist || []).length === 0 ? (
+                  <PageEmpty title="暂无分布数据" className="py-8" />
+                ) : (
+                  <div className="space-y-3">
+                    <div className="flex h-8 rounded-lg overflow-hidden">
+                      {stats.provider_dist.map((p: JsonData, i: number) => (
+                        <div
+                          key={i}
+                          className="flex items-center justify-center text-xs text-white font-medium"
+                          style={{
+                            width: `${p.percent}%`,
+                            backgroundColor: providerHex[p.provider] || 'var(--surface-active)',
+                          }}
+                          title={`${providerLabels[p.provider] || p.provider}: ${formatCurrency(p.cost)} (${p.percent.toFixed(1)}%)`}
+                        >
+                          {p.percent > 8 ? (providerLabels[p.provider] || p.provider) : ''}
+                        </div>
+                      ))}
+                    </div>
+                    <div className="grid grid-cols-2 md:grid-cols-3 gap-2">
+                      {stats.provider_dist.map((p: JsonData, i: number) => (
+                        <div key={i} className="flex items-center justify-between text-sm">
+                          <div className="flex items-center gap-2">
+                            <ProviderDot provider={p.provider} className="w-3 h-3" />
+                            <span className="text-[var(--text-secondary)]">{providerLabels[p.provider] || p.provider}</span>
+                          </div>
+                          <div className="text-right">
+                            <span className="text-[var(--text-primary)] font-medium">{formatCurrency(p.cost)}</span>
+                            <span className="dg-text-muted ml-2">{p.percent.toFixed(1)}%</span>
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                )}
+              </CardContent>
+            </Card>
+          </div>
+        ) : (
+          <PageEmpty icon={<Wallet className="h-12 w-12" />} title="暂无统计数据" />
+        )
       )}
 
+      {/* Tab 2：成本记录 */}
       {activeTab === 'records' && (
-        <div className="space-y-3">
-          <div className="flex flex-wrap items-end gap-3">
-            <div>
-              <Label className="text-xs text-slate-400 mb-1">厂商</Label>
-              <Select value={filterProvider || 'all'} onValueChange={(v) => setFilterProvider(v === 'all' ? '' : v)}>
-                <SelectTrigger className="w-32 h-9"><SelectValue /></SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="all">全部</SelectItem>
-                  {Object.entries(providerLabels).map(([k, v]) => (
-                    <SelectItem key={k} value={k}>{v}</SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            </div>
-            <div>
-              <Label className="text-xs text-slate-400 mb-1">开始日期</Label>
-              <Input type="date" className="w-40 h-9" value={filterStart} onChange={(e) => setFilterStart(e.target.value)} />
-            </div>
-            <div>
-              <Label className="text-xs text-slate-400 mb-1">结束日期</Label>
-              <Input type="date" className="w-40 h-9" value={filterEnd} onChange={(e) => setFilterEnd(e.target.value)} />
-            </div>
-            <Button variant="outline" size="sm" onClick={loadRecords}>
-              <RefreshCw className="h-4 w-4 mr-1" />查询
-            </Button>
-          </div>
-
+        <ContentPanel noPadding>
           {recordsLoading ? (
-            <div className="flex items-center justify-center py-20 text-slate-500"><Loader2 className="h-6 w-6 animate-spin mr-2" />加载中...</div>
+            <PageLoading />
           ) : records.length === 0 ? (
-            <div className="py-20 text-center text-slate-500">
-              <Wallet className="h-12 w-12 mx-auto mb-3 opacity-30" />
-              <p className="text-sm">暂无成本记录</p>
-            </div>
+            <PageEmpty
+              icon={<Wallet className="h-12 w-12" />}
+              title="暂无成本记录"
+              action={(
+                <Button size="sm" className="dg-btn-primary" onClick={openAddRecord}>
+                  <Plus className="h-4 w-4 mr-1" />记录成本
+                </Button>
+              )}
+            />
           ) : (
-            <div className="overflow-x-auto rounded-lg border border-slate-800">
+            <div className="overflow-x-auto">
               <table className="w-full text-sm">
-                <thead className="bg-slate-900/80 text-slate-400">
+                <thead className="bg-[var(--surface-raised)] dg-text-secondary">
                   <tr>
                     <th className="px-4 py-2.5 text-left font-medium">日期</th>
                     <th className="px-4 py-2.5 text-left font-medium">厂商</th>
@@ -343,25 +365,25 @@ export function CloudBilling() {
                 </thead>
                 <tbody>
                   {records.map((r) => (
-                    <tr key={r.id} className="border-t border-slate-800 hover:bg-slate-800/30">
-                      <td className="px-4 py-2.5 text-slate-300">{r.billing_date}</td>
+                    <tr key={r.id} className="dg-table-row border-t border-[var(--border-default)]">
+                      <td className="px-4 py-2.5 text-[var(--text-secondary)]">{r.billing_date}</td>
                       <td className="px-4 py-2.5">
                         <span className="inline-flex items-center gap-1.5">
-                          <span className={`w-2 h-2 rounded-full ${providerColors[r.provider] || 'bg-slate-500'}`} />
+                          <ProviderDot provider={r.provider} />
                           {providerLabels[r.provider] || r.provider}
                         </span>
                       </td>
-                      <td className="px-4 py-2.5 text-slate-400">{r.service || '-'}</td>
-                      <td className="px-4 py-2.5 text-slate-400">{r.region || '-'}</td>
-                      <td className="px-4 py-2.5 text-slate-400">{r.account_name || '-'}</td>
-                      <td className="px-4 py-2.5 text-right text-slate-200 font-medium">{formatCurrency(r.cost)}</td>
-                      <td className="px-4 py-2.5 text-slate-500 max-w-xs truncate">{r.description || '-'}</td>
+                      <td className="px-4 py-2.5 dg-text-secondary">{r.service || '-'}</td>
+                      <td className="px-4 py-2.5 dg-text-secondary">{r.region || '-'}</td>
+                      <td className="px-4 py-2.5 dg-text-secondary">{r.account_name || '-'}</td>
+                      <td className="px-4 py-2.5 text-right text-[var(--text-primary)] font-medium">{formatCurrency(r.cost)}</td>
+                      <td className="px-4 py-2.5 dg-text-muted max-w-xs truncate">{r.description || '-'}</td>
                       <td className="px-4 py-2.5">
                         <div className="flex items-center justify-center gap-1">
                           <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => openEditRecord(r)}>
                             <Pencil className="h-3.5 w-3.5" />
                           </Button>
-                          <Button variant="ghost" size="icon" className="h-7 w-7 text-red-400 hover:text-red-300" onClick={() => handleDeleteRecord(r.id)}>
+                          <Button variant="ghost" size="icon" className="h-7 w-7 dg-text-red hover:dg-text-red" onClick={() => handleDeleteRecord(r.id)}>
                             <Trash2 className="h-3.5 w-3.5" />
                           </Button>
                         </div>
@@ -372,64 +394,69 @@ export function CloudBilling() {
               </table>
             </div>
           )}
-        </div>
+        </ContentPanel>
       )}
 
+      {/* Tab 3：预警规则 */}
       {activeTab === 'alerts' && (
-        <div className="space-y-3">
-          {rulesLoading ? (
-            <div className="flex items-center justify-center py-20 text-slate-500"><Loader2 className="h-6 w-6 animate-spin mr-2" />加载中...</div>
-          ) : rules.length === 0 ? (
-            <div className="py-20 text-center text-slate-500">
-              <Bell className="h-12 w-12 mx-auto mb-3 opacity-30" />
-              <p className="text-sm">暂无预警规则</p>
-            </div>
-          ) : (
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
-              {rules.map((r) => (
-                <Card key={r.id} className="bg-slate-900/50 border-slate-800">
-                  <CardContent className="pt-4">
-                    <div className="flex items-center justify-between mb-3">
-                      <div className="flex items-center gap-2">
-                        <Bell className={`h-4 w-4 ${r.enabled ? 'text-amber-400' : 'text-slate-600'}`} />
-                        <span className="text-sm font-medium text-slate-200">{r.name}</span>
-                      </div>
-                      <Switch checked={r.enabled} onCheckedChange={() => handleToggleRule(r.id)} />
+        rulesLoading ? (
+          <PageLoading />
+        ) : rules.length === 0 ? (
+          <PageEmpty
+            icon={<Bell className="h-12 w-12" />}
+            title="暂无预警规则"
+            description="添加规则后，成本超阈值将在此页管理"
+            action={(
+              <Button size="sm" className="dg-btn-primary" onClick={openAddRule}>
+                <Plus className="h-4 w-4 mr-1" />添加规则
+              </Button>
+            )}
+          />
+        ) : (
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+            {rules.map((r) => (
+              <Card key={r.id} className="dg-card">
+                <CardContent className="pt-4">
+                  <div className="flex items-center justify-between mb-3">
+                    <div className="flex items-center gap-2">
+                      <Bell className={`h-4 w-4 ${r.enabled ? 'dg-text-yellow' : 'dg-text-muted'}`} />
+                      <span className="text-sm font-medium text-[var(--text-primary)]">{r.name}</span>
                     </div>
-                    <div className="grid grid-cols-2 gap-2 text-sm">
-                      <div>
-                        <span className="text-slate-500">厂商</span>
-                        <span className="ml-2 text-slate-300">{r.provider ? (providerLabels[r.provider] || r.provider) : '全部'}</span>
-                      </div>
-                      <div>
-                        <span className="text-slate-500">指标</span>
-                        <span className="ml-2 text-slate-300">{r.metric === 'daily' ? '日成本' : '月累计'}</span>
-                      </div>
-                      <div>
-                        <span className="text-slate-500">阈值</span>
-                        <span className="ml-2 text-amber-300 font-medium">{r.operator} {formatCurrency(r.threshold)}</span>
-                      </div>
-                      {r.last_triggered && (
-                        <div>
-                          <span className="text-slate-500">最后触发</span>
-                          <span className="ml-2 text-slate-400">{new Date(r.last_triggered).toLocaleString('zh-CN')}</span>
-                        </div>
-                      )}
+                    <Switch checked={r.enabled} onCheckedChange={() => handleToggleRule(r.id)} />
+                  </div>
+                  <div className="grid grid-cols-2 gap-2 text-sm">
+                    <div>
+                      <span className="dg-text-muted">厂商</span>
+                      <span className="ml-2 text-[var(--text-secondary)]">{r.provider ? (providerLabels[r.provider] || r.provider) : '全部'}</span>
                     </div>
-                    <div className="flex justify-end gap-1 mt-3">
-                      <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => openEditRule(r)}>
-                        <Pencil className="h-3.5 w-3.5" />
-                      </Button>
-                      <Button variant="ghost" size="icon" className="h-7 w-7 text-red-400 hover:text-red-300" onClick={() => handleDeleteRule(r.id)}>
-                        <Trash2 className="h-3.5 w-3.5" />
-                      </Button>
+                    <div>
+                      <span className="dg-text-muted">指标</span>
+                      <span className="ml-2 text-[var(--text-secondary)]">{r.metric === 'daily' ? '日成本' : '月累计'}</span>
                     </div>
-                  </CardContent>
-                </Card>
-              ))}
-            </div>
-          )}
-        </div>
+                    <div>
+                      <span className="dg-text-muted">阈值</span>
+                      <span className="ml-2 dg-text-yellow font-medium">{r.operator} {formatCurrency(r.threshold)}</span>
+                    </div>
+                    {r.last_triggered && (
+                      <div>
+                        <span className="dg-text-muted">最后触发</span>
+                        <span className="ml-2 dg-text-secondary">{new Date(r.last_triggered).toLocaleString('zh-CN')}</span>
+                      </div>
+                    )}
+                  </div>
+                  <div className="flex justify-end gap-1 mt-3">
+                    <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => openEditRule(r)}>
+                      <Pencil className="h-3.5 w-3.5" />
+                    </Button>
+                    <Button variant="ghost" size="icon" className="h-7 w-7 dg-text-red hover:dg-text-red" onClick={() => handleDeleteRule(r.id)}>
+                      <Trash2 className="h-3.5 w-3.5" />
+                    </Button>
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        )
       )}
 
       <BillingRecordDialog
@@ -444,6 +471,6 @@ export function CloudBilling() {
         editingRule={editingRule}
         onSuccess={() => { loadRules(); loadStats(); }}
       />
-    </div>
+    </PageShell>
   );
-}
+}