feat: polish website and console dashboards

src/web/index.css

@@ -1593,6 +1593,73 @@ body {
   margin-bottom: 24px;
 }
 
+.dashboard-command-strip {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 10px;
+  margin: -6px 0 20px;
+}
+
+.dashboard-command-item {
+  position: relative;
+  overflow: hidden;
+  display: grid;
+  gap: 5px;
+  min-height: 88px;
+  padding: 14px;
+  border: 1px solid var(--console-line);
+  border-radius: 16px;
+  background:
+    linear-gradient(180deg, color-mix(in srgb, var(--color-bg-card) 86%, transparent), color-mix(in srgb, var(--color-bg-card) 70%, var(--color-bg)));
+  color: var(--color-text-primary);
+  text-decoration: none;
+  box-shadow: var(--shadow-card);
+  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
+}
+
+.dashboard-command-item::before {
+  position: absolute;
+  inset: 0 auto 0 0;
+  width: 4px;
+  content: "";
+  background: var(--color-primary);
+}
+
+.dashboard-command-item[data-tone="success"]::before {
+  background: var(--color-success);
+}
+
+.dashboard-command-item[data-tone="warning"]::before {
+  background: var(--color-warning);
+}
+
+.dashboard-command-item[data-tone="danger"]::before {
+  background: var(--color-danger);
+}
+
+.dashboard-command-item:hover {
+  transform: translateY(-2px);
+  border-color: color-mix(in srgb, var(--color-primary) 24%, var(--console-line));
+  box-shadow: var(--console-shadow-soft);
+}
+
+.dashboard-command-item span,
+.dashboard-command-item em {
+  color: var(--color-text-muted);
+  font-size: 12px;
+  font-style: normal;
+}
+
+.dashboard-command-item strong {
+  overflow: hidden;
+  color: var(--color-text-primary);
+  font-size: clamp(20px, 2vw, 28px);
+  line-height: 1;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+}
+
 .dashboard-stat-grid .stat-card {
   min-width: 0;
 }
@@ -1706,6 +1773,10 @@ body {
 }
 
 @media (max-width: 1200px) {
+  .dashboard-command-strip {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
   .dashboard-stat-grid {
     gap: 10px;
   }
@@ -1768,6 +1839,10 @@ body {
 }
 
 @media (max-width: 860px) {
+  .dashboard-command-strip {
+    grid-template-columns: 1fr;
+  }
+
   .dashboard-section-head {
     align-items: flex-start;
     flex-direction: column;
@@ -10640,7 +10715,8 @@ textarea {
 }
 
 .user-dashboard-hero {
-  display: flex;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.88fr);
   align-items: center;
   justify-content: space-between;
   gap: 18px;
@@ -10683,10 +10759,59 @@ textarea {
 .user-dashboard-header-actions {
   display: inline-flex;
   align-items: center;
+  justify-content: flex-end;
   gap: 8px;
   flex-wrap: wrap;
 }
 
+.user-dashboard-hero-side {
+  display: grid;
+  gap: 10px;
+  min-width: 0;
+}
+
+.user-dashboard-hero-rail {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.user-dashboard-hero-rail>div {
+  min-height: 66px;
+  display: grid;
+  align-content: center;
+  gap: 5px;
+  min-width: 0;
+  padding: 10px 12px;
+  border: 1px solid var(--console-line);
+  border-radius: 14px;
+  background: color-mix(in srgb, var(--color-bg-card) 72%, transparent);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.46);
+}
+
+[data-theme="dark"] .user-dashboard-hero-rail>div {
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
+}
+
+.user-dashboard-hero-rail span {
+  overflow: hidden;
+  color: var(--color-text-muted);
+  font-size: 11px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.user-dashboard-hero-rail strong {
+  overflow: hidden;
+  color: var(--color-text-primary);
+  font-size: 13px;
+  font-weight: 780;
+  line-height: 1.15;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+}
+
 .user-dashboard-skeleton {
   display: grid;
   gap: 18px;
@@ -10700,10 +10825,29 @@ textarea {
 }
 
 .user-dashboard-stat {
+  position: relative;
+  overflow: hidden;
   padding: 18px;
   border-color: var(--color-border-light);
 }
 
+.user-dashboard-stat::before {
+  position: absolute;
+  inset: 0 auto 0 0;
+  width: 4px;
+  content: "";
+  background: var(--color-primary);
+  opacity: 0.78;
+}
+
+.user-dashboard-stat[data-tone="success"]::before {
+  background: var(--color-success);
+}
+
+.user-dashboard-stat[data-tone="cost"]::before {
+  background: #14b8a6;
+}
+
 .user-dashboard-stat-label {
   font-size: 12px;
   color: var(--color-text-muted);
@@ -10760,6 +10904,12 @@ textarea {
   color: var(--color-text-primary);
 }
 
+.user-dashboard-panel-head p {
+  margin: 4px 0 0;
+  color: var(--color-text-muted);
+  font-size: 12px;
+}
+
 .user-dashboard-entry-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -10767,11 +10917,11 @@ textarea {
 }
 
 .user-dashboard-entry {
-  min-height: 86px;
+  min-height: 108px;
   display: grid;
-  place-items: center;
+  align-content: center;
   gap: 8px;
-  padding: 14px 12px;
+  padding: 16px;
   border: 1px solid var(--color-border-light);
   border-radius: var(--radius-sm);
   background: color-mix(in srgb, var(--color-bg) 72%, var(--color-bg-card));
@@ -10788,6 +10938,19 @@ textarea {
   color: var(--color-primary);
 }
 
+.user-dashboard-entry span {
+  color: var(--color-text-primary);
+  font-weight: 780;
+}
+
+.user-dashboard-entry small {
+  max-width: 24ch;
+  color: var(--color-text-muted);
+  font-size: 11.5px;
+  font-weight: 520;
+  line-height: 1.45;
+}
+
 .user-dashboard-entry:hover {
   transform: translateY(-1px);
   border-color: color-mix(in srgb, var(--color-primary) 28%, var(--color-border));
@@ -10887,6 +11050,10 @@ textarea {
 }
 
 @media (max-width: 960px) {
+  .user-dashboard-hero {
+    grid-template-columns: 1fr;
+  }
+
   .user-dashboard-grid {
     grid-template-columns: 1fr;
   }
@@ -10905,10 +11072,15 @@ textarea {
     flex-direction: column;
   }
 
+  .user-dashboard-hero-side,
   .user-dashboard-header-actions {
     width: 100%;
   }
 
+  .user-dashboard-hero-rail {
+    grid-template-columns: 1fr;
+  }
+
   .user-dashboard-header-actions .btn {
     flex: 1;
   }

src/web/pages/Dashboard.tsx

@@ -538,6 +538,45 @@ export default function Dashboard({
   const siteAvailability = showInactiveSites
     ? [...activeSites, ...inactiveSites]
     : activeSites;
+  const proxySuccessRate =
+    proxy24hTotal > 0 ? (proxy24hSuccess / proxy24hTotal) * 100 : 0;
+  const activeAccountRate =
+    totalAccounts > 0 ? (activeAccounts / totalAccounts) * 100 : 0;
+  const siteRiskCount = activeSites.filter((site) => {
+    const availability = site.availabilityPercent ?? 100;
+    const latency = site.averageLatencyMs ?? 0;
+    return availability < 99 || latency > 1800 || site.failedCount > 0;
+  }).length;
+  const dashboardCommandLinks = [
+    {
+      to: "/routes",
+      label: "路由健康",
+      value: `${proxySuccessRate.toFixed(1)}%`,
+      note: "24h 成功率",
+      tone: proxySuccessRate >= 99 ? "success" : proxySuccessRate >= 95 ? "warning" : "danger",
+    },
+    {
+      to: "/logs",
+      label: "使用日志",
+      value: Math.round(proxy24hTotal).toLocaleString(),
+      note: "最近 24h 请求",
+      tone: "primary",
+    },
+    {
+      to: "/sites",
+      label: "站点管理",
+      value: String(siteRiskCount),
+      note: siteRiskCount > 0 ? "需关注站点" : "风险站点",
+      tone: siteRiskCount > 0 ? "warning" : "success",
+    },
+    {
+      to: "/settings/notify",
+      label: "通知设置",
+      value: `${activeAccountRate.toFixed(0)}%`,
+      note: "账户启用率",
+      tone: activeAccountRate >= 80 ? "success" : "warning",
+    },
+  ];
 
   const getLatencyColor = (ms: number) =>
     ms <= 500
@@ -642,6 +681,21 @@ export default function Dashboard({
         </div>
       </section>
 
+      <nav className="dashboard-command-strip" aria-label="运营快捷入口">
+        {dashboardCommandLinks.map((item) => (
+          <Link
+            key={item.to}
+            to={item.to}
+            className="dashboard-command-item"
+            data-tone={item.tone}
+          >
+            <span>{item.label}</span>
+            <strong>{item.value}</strong>
+            <em>{item.note}</em>
+          </Link>
+        ))}
+      </nav>
+
       <div className="dashboard-stat-grid">
         <div className="stat-card animate-slide-up stagger-1">
           <div className="stat-card-header">

src/web/pages/UserDashboard.tsx

@@ -138,6 +138,7 @@ export default function UserDashboard({ onLogout }: { onLogout?: () => void }) {
   const failedRequests = Math.max(0, (summary?.totalRequests || 0) - (summary?.successRequests || 0));
   const activeKeyCount = keys.filter((key) => key.enabled).length;
   const userInitial = (profile.username || profile.email || 'U').trim().slice(0, 1).toUpperCase();
+  const lastActivityLabel = recentLogs[0] ? formatDateLabel(recentLogs[0].created_at) : '暂无调用';
 
   return (
     <div className="user-dashboard-page animate-fade-in">
@@ -149,24 +150,40 @@ export default function UserDashboard({ onLogout }: { onLogout?: () => void }) {
             <p className="page-subtitle">这里汇总你的模型调用、密钥状态和创作入口。</p>
           </div>
         </div>
-        <div className="user-dashboard-header-actions">
+        <div className="user-dashboard-hero-side">
-          <Link to="/user/models" className="btn btn-ghost">模型广场</Link>
+          <div className="user-dashboard-hero-rail" aria-label="账号运行状态">
-          <Link to="/user/usage" className="btn btn-primary">使用记录</Link>
+            <div>
+              <span>启用密钥</span>
+              <strong>{activeKeyCount}/{keys.length}</strong>
+            </div>
+            <div>
+              <span>成功率</span>
+              <strong>{successRate}%</strong>
+            </div>
+            <div>
+              <span>最近调用</span>
+              <strong>{lastActivityLabel}</strong>
+            </div>
+          </div>
+          <div className="user-dashboard-header-actions">
+            <Link to="/user/models" className="btn btn-ghost">模型广场</Link>
+            <Link to="/user/usage" className="btn btn-primary">使用记录</Link>
+          </div>
         </div>
       </header>
 
       <div className="user-dashboard-stat-grid">
-        <div className="card user-dashboard-stat">
+        <div className="card user-dashboard-stat" data-tone="volume">
           <div className="user-dashboard-stat-label">总请求次数</div>
           <div className="user-dashboard-stat-value">{summary?.totalRequests || 0}</div>
           <div className="user-dashboard-stat-note">{failedRequests} 次失败</div>
         </div>
-        <div className="card user-dashboard-stat">
+        <div className="card user-dashboard-stat" data-tone="success">
           <div className="user-dashboard-stat-label">请求成功率</div>
           <div className="user-dashboard-stat-value is-success">{successRate}%</div>
           <div className="user-dashboard-stat-note">{summary?.successRequests || 0} 次成功</div>
         </div>
-        <div className="card user-dashboard-stat">
+        <div className="card user-dashboard-stat" data-tone="cost">
           <div className="user-dashboard-stat-label">总消耗金额</div>
           <div className="user-dashboard-stat-value">{formatMoney(summary?.totalCost)}</div>
           <div className="user-dashboard-stat-note">{activeKeyCount}/{keys.length} 个密钥启用</div>
@@ -177,24 +194,31 @@ export default function UserDashboard({ onLogout }: { onLogout?: () => void }) {
         <div className="user-dashboard-column">
           <section className="card user-dashboard-panel">
             <div className="user-dashboard-panel-head">
-              <h2>快速入口</h2>
+              <div>
+                <h2>快速入口</h2>
+                <p>选择一个入口继续创作</p>
+              </div>
             </div>
             <div className="user-dashboard-entry-grid">
               <Link to="/user/workflows" className="user-dashboard-entry">
                 <svg width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M4 6h5v5H4zM15 4h5v5h-5zM15 15h5v5h-5zM9 8h6M17.5 9v6M9 11l6 6" /></svg>
                 <span>工作流</span>
+                <small>画布编排图片、视频与 API 节点</small>
               </Link>
               <Link to="/user/comfyui-agent" className="user-dashboard-entry">
                 <svg width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" /><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
                 <span>视频助手</span>
+                <small>脚本拆解、镜头规划、素材生成</small>
               </Link>
               <Link to="/user/picture-agent" className="user-dashboard-entry">
                 <svg width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-5-6h.01M5 4h14a2 2 0 012 2v12a2 2 0 01-2 2H5a2 2 0 01-2-2V6a2 2 0 012-2z" /></svg>
                 <span>生图助手</span>
+                <small>使用生图模型并自动归档产出</small>
               </Link>
               <Link to="/user/workspace" className="user-dashboard-entry">
                 <svg width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M4 7a2 2 0 012-2h4l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H6a2 2 0 01-2-2V7z" /><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M8 13h8M8 16h5" /></svg>
                 <span>工作空间</span>
+                <small>查看已生成图片、视频与音频</small>
               </Link>
             </div>
           </section>

website/app/globals.css

@@ -355,6 +355,7 @@ a {
 .api-section,
 .workflow-section,
 .ops-section,
+.console-preview-section,
 .factory-section,
 .studio-section,
 .control-section,
@@ -1125,6 +1126,7 @@ a {
 .studio-copy span,
 .control-panel span,
 .ops-copy span,
+.console-preview-copy > span,
 .factory-copy span,
 .deploy-section > div:first-child > span {
   color: var(--acid);
@@ -1140,6 +1142,7 @@ a {
 .studio-copy h2,
 .control-panel h2,
 .ops-copy h2,
+.console-preview-copy h2,
 .factory-copy h2,
 .deploy-section h2,
 .final-section h2 {
@@ -1249,6 +1252,7 @@ a {
 .workflow-panel p,
 .ops-copy p,
 .ops-card p,
+.console-preview-copy p,
 .factory-copy p,
 .deploy-section p,
 .final-section p {
@@ -1262,6 +1266,8 @@ a {
 .studio-flow article,
 .control-grid > div,
 .ops-card,
+.console-preview-stats > div,
+.preview-window,
 .module-strip span {
   transform-style: preserve-3d;
   transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
@@ -1272,6 +1278,8 @@ a {
 .studio-flow article:hover,
 .control-grid > div:hover,
 .ops-card:hover,
+.console-preview-stats > div:hover,
+.preview-window:hover,
 .module-strip span:hover {
   transform: translateY(-3px);
   border-color: var(--line-strong);
@@ -1511,6 +1519,181 @@ a {
   text-transform: uppercase;
 }
 
+.console-preview-section {
+  display: grid;
+  grid-template-columns: minmax(0, 0.76fr) minmax(0, 1.24fr);
+  gap: 18px;
+  align-items: stretch;
+}
+
+.console-preview-copy,
+.console-preview-board {
+  border: 1px solid var(--line);
+  border-radius: 32px;
+  background: var(--panel-gradient);
+  box-shadow: inset 0 1px 0 var(--surface-highlight);
+}
+
+.console-preview-copy {
+  display: grid;
+  align-content: end;
+  gap: 18px;
+  padding: 34px;
+}
+
+.console-preview-stats {
+  display: grid;
+  gap: 10px;
+  margin-top: 10px;
+}
+
+.console-preview-stats > div {
+  display: grid;
+  gap: 5px;
+  border: 1px solid var(--line);
+  border-radius: 18px;
+  background: var(--surface);
+  padding: 14px;
+}
+
+.console-preview-stats strong,
+.preview-title strong,
+.preview-list i {
+  color: var(--acid);
+  font-family: var(--font-geist-mono), monospace;
+  font-size: 11px;
+  text-transform: uppercase;
+}
+
+.console-preview-stats span {
+  color: var(--muted);
+  font-size: 13px;
+  line-height: 1.55;
+}
+
+.console-preview-board {
+  position: relative;
+  min-height: 520px;
+  overflow: hidden;
+  padding: clamp(18px, 3vw, 30px);
+}
+
+.console-preview-board::before {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  content: "";
+  background:
+    linear-gradient(var(--console-grid-y) 1px, transparent 1px),
+    linear-gradient(90deg, var(--console-grid-x) 1px, transparent 1px),
+    radial-gradient(circle at 18% 18%, rgba(183, 237, 42, 0.2), transparent 32%),
+    radial-gradient(circle at 88% 82%, rgba(24, 185, 199, 0.14), transparent 34%);
+  background-size: 42px 42px, 42px 42px, auto, auto;
+}
+
+.preview-window {
+  position: relative;
+  z-index: 1;
+  border: 1px solid var(--line);
+  border-radius: 24px;
+  background: var(--console-bg);
+  padding: 18px;
+  box-shadow: 0 24px 70px var(--shadow), inset 0 1px 0 var(--surface-highlight);
+}
+
+.admin-window {
+  width: min(520px, 82%);
+}
+
+.user-window {
+  width: min(430px, 74%);
+  margin: -42px 0 0 auto;
+}
+
+.preview-title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 16px;
+}
+
+.preview-title span {
+  font-size: 18px;
+  font-weight: 820;
+  letter-spacing: -0.04em;
+}
+
+.preview-metrics,
+.preview-actions {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 8px;
+  margin-bottom: 14px;
+}
+
+.preview-metrics > div,
+.preview-actions span {
+  min-height: 58px;
+  display: grid;
+  align-content: center;
+  gap: 5px;
+  border: 1px solid var(--line);
+  border-radius: 16px;
+  background: var(--surface);
+  padding: 10px;
+}
+
+.preview-metrics span {
+  color: var(--faint);
+  font-size: 11px;
+}
+
+.preview-metrics strong {
+  font-size: 20px;
+  letter-spacing: -0.04em;
+}
+
+.preview-actions span {
+  color: var(--text);
+  font-size: 12px;
+  font-weight: 780;
+  text-align: center;
+}
+
+.preview-list {
+  display: grid;
+  gap: 8px;
+}
+
+.preview-list > div {
+  min-height: 48px;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto auto auto;
+  gap: 10px;
+  align-items: center;
+  border: 1px solid var(--line);
+  border-radius: 16px;
+  background: var(--surface);
+  padding: 10px 12px;
+}
+
+.preview-list strong {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--text);
+  font-size: 13px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.preview-list span,
+.preview-list em {
+  color: var(--muted);
+  font-size: 12px;
+  font-style: normal;
+}
+
 .factory-section {
   display: grid;
   grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
@@ -1628,6 +1811,7 @@ a {
   .api-section,
   .workflow-section,
   .ops-section,
+  .console-preview-section,
   .studio-section,
   .control-section,
   .factory-section,
@@ -1658,6 +1842,7 @@ a {
     grid-template-columns: 1fr;
   }
 
+  .console-preview-section,
   .factory-section,
   .control-section,
   .deploy-section {
@@ -1674,6 +1859,7 @@ a {
   .api-section,
   .workflow-section,
   .ops-section,
+  .console-preview-section,
   .studio-section,
   .control-section,
   .factory-section,
@@ -1759,14 +1945,42 @@ a {
   .control-section,
   .ops-copy,
   .ops-grid,
+  .console-preview-copy,
+  .console-preview-board,
   .factory-section,
   .deploy-section {
     padding: 22px;
     border-radius: 26px;
   }
 
+  .console-preview-board {
+    min-height: auto;
+    display: grid;
+    gap: 14px;
+  }
+
+  .admin-window,
+  .user-window {
+    width: 100%;
+    margin: 0;
+  }
+
+  .preview-metrics,
+  .preview-actions {
+    grid-template-columns: 1fr;
+  }
+
+  .preview-list > div {
+    grid-template-columns: minmax(0, 1fr) auto;
+  }
+
+  .preview-list em {
+    display: none;
+  }
+
   .factory-section,
   .control-section,
+  .console-preview-section,
   .deploy-section {
     gap: 22px;
     margin-block: 18px;

website/app/page.tsx

@@ -140,6 +140,24 @@ const operations = [
   },
 ];
 
+const consolePreviewStats = [
+  ["Admin", "站点健康、RPM、TPM、失败冷却"],
+  ["User", "模型广场、使用日志、工作空间"],
+  ["Billing", "Token + Media 成本口径"],
+];
+
+const adminPreviewRows = [
+  ["boos-gpt", "99.8%", "42ms", "online"],
+  ["火山方舟", "97.4%", "231ms", "cooldown"],
+  ["RunningHub", "96.9%", "384ms", "queue"],
+];
+
+const userPreviewRows = [
+  ["工作流任务", "视频生成", "执行中"],
+  ["生图助手", "gpt-image-2", "已归档"],
+  ["数字人", "口播视频", "待确认"],
+];
+
 const productionModules = [
   "模型广场",
   "使用日志",
@@ -502,6 +520,67 @@ export default function Home() {
           </div>
         </section>
 
+        <section className="console-preview-section" data-motion="section">
+          <div className="console-preview-copy">
+            <span>Console UX</span>
+            <h2>管理员看运营风险，普通用户看下一步创作动作</h2>
+            <p>
+              BossAI 的后台不是一张堆满数字的表。管理员首屏回答健康、吞吐、成本和异常；用户首屏回答密钥、用量、创作入口和产出归档。
+            </p>
+            <div className="console-preview-stats">
+              {consolePreviewStats.map(([label, value]) => (
+                <div data-motion="card" key={label}>
+                  <strong>{label}</strong>
+                  <span>{value}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+          <div className="console-preview-board" aria-label="BossAI 后台预览">
+            <div className="preview-window admin-window" data-motion="card">
+              <div className="preview-title">
+                <span>管理员控制台</span>
+                <strong>Operational</strong>
+              </div>
+              <div className="preview-metrics">
+                <div><span>24h 请求</span><strong>128K</strong></div>
+                <div><span>成功率</span><strong>99.2%</strong></div>
+                <div><span>站点</span><strong>8/9</strong></div>
+              </div>
+              <div className="preview-list">
+                {adminPreviewRows.map(([site, health, latency, state]) => (
+                  <div key={site}>
+                    <strong>{site}</strong>
+                    <span>{health}</span>
+                    <em>{latency}</em>
+                    <i>{state}</i>
+                  </div>
+                ))}
+              </div>
+            </div>
+            <div className="preview-window user-window" data-motion="card">
+              <div className="preview-title">
+                <span>用户工作台</span>
+                <strong>Creation</strong>
+              </div>
+              <div className="preview-actions">
+                <span>工作流</span>
+                <span>生图</span>
+                <span>数字人</span>
+              </div>
+              <div className="preview-list">
+                {userPreviewRows.map(([name, model, state]) => (
+                  <div key={name}>
+                    <strong>{name}</strong>
+                    <span>{model}</span>
+                    <i>{state}</i>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        </section>
+
         <section id="factory" className="factory-section" data-motion="section">
           <div className="factory-copy">
             <span>Creation OS</span>