feat: refine BossAI console and website design

src/web/index.css

@@ -2940,6 +2940,131 @@ textarea {
   min-width: 0;
 }
 
+/* ===== BossAI Console Surface ===== */
+.console-hero {
+  position: relative;
+  overflow: hidden;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto auto;
+  gap: 18px;
+  align-items: center;
+  margin-bottom: 20px;
+  padding: 20px;
+  border: 1px solid color-mix(in srgb, var(--color-primary) 16%, var(--color-border-light));
+  border-radius: var(--radius-lg);
+  background:
+    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--color-primary) 14%, transparent), transparent 34%),
+    linear-gradient(135deg, color-mix(in srgb, var(--color-bg-card) 92%, var(--color-primary)), var(--color-bg-card));
+  box-shadow: var(--shadow-card);
+}
+
+.console-hero::after {
+  position: absolute;
+  inset: auto -18% -70% 40%;
+  height: 180px;
+  pointer-events: none;
+  content: "";
+  background: radial-gradient(circle, color-mix(in srgb, var(--color-primary) 12%, transparent), transparent 68%);
+}
+
+.console-hero-copy,
+.console-hero-rail,
+.console-hero-actions {
+  position: relative;
+  z-index: 1;
+}
+
+.console-hero-copy {
+  min-width: 0;
+}
+
+.console-kicker {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  margin-bottom: 8px;
+  color: var(--color-primary);
+  font-size: 11px;
+  font-weight: 800;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.console-kicker::before {
+  width: 7px;
+  height: 7px;
+  border-radius: 999px;
+  content: "";
+  background: var(--color-primary);
+  box-shadow: 0 0 18px color-mix(in srgb, var(--color-primary) 48%, transparent);
+}
+
+.console-hero h1 {
+  margin: 0;
+  color: var(--color-text-primary);
+  font-size: clamp(24px, 3vw, 38px);
+  line-height: 1;
+  letter-spacing: -0.045em;
+}
+
+.console-hero p {
+  max-width: 68ch;
+  margin: 10px 0 0;
+  color: var(--color-text-muted);
+  font-size: 13px;
+  line-height: 1.7;
+}
+
+.console-hero-rail {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(96px, 1fr));
+  gap: 8px;
+  min-width: min(430px, 42vw);
+}
+
+.console-hero-rail > div {
+  min-height: 74px;
+  display: grid;
+  align-content: center;
+  gap: 5px;
+  padding: 12px;
+  border: 1px solid var(--color-border-light);
+  border-radius: var(--radius-md);
+  background: color-mix(in srgb, var(--color-bg-card) 74%, transparent);
+  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 62%, transparent);
+}
+
+[data-theme="dark"] .console-hero-rail > div {
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
+}
+
+.console-hero-rail span {
+  overflow: hidden;
+  color: var(--color-text-muted);
+  font-size: 11px;
+  line-height: 1.2;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.console-hero-rail strong {
+  overflow: hidden;
+  color: var(--color-text-primary);
+  font-size: 18px;
+  line-height: 1.1;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+}
+
+.console-hero-actions {
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
 .accounts-page-actions {
   flex-wrap: wrap;
   justify-content: flex-end;
@@ -8765,17 +8890,38 @@ textarea {
   margin: 0 auto;
 }
 
+.dashboard-hero .console-hero-rail strong,
+.workspace-hero .console-hero-rail strong {
+  font-family: var(--font-mono);
+}
+
 .greeting {
   font-size: 20px;
   letter-spacing: 0;
 }
 
 .stat-card {
+  position: relative;
+  overflow: hidden;
   padding: 18px;
+  border-color: color-mix(in srgb, var(--color-primary) 8%, var(--color-border-light));
+  background:
+    linear-gradient(180deg, color-mix(in srgb, var(--color-bg-card) 96%, var(--color-primary)), var(--color-bg-card));
 }
 
 .stat-card:hover {
-  transform: none;
+  transform: translateY(-1px);
+  border-color: color-mix(in srgb, var(--color-primary) 20%, var(--color-border));
+  box-shadow: var(--shadow-md);
+}
+
+.stat-card::after {
+  position: absolute;
+  inset: 0 0 auto;
+  height: 3px;
+  content: "";
+  background: linear-gradient(90deg, var(--color-primary), transparent);
+  opacity: 0.36;
 }
 
 .stat-card-header {
@@ -8797,7 +8943,8 @@ textarea {
 
 .digital-human-panel {
   border: 1px solid var(--color-border-light);
-  background: var(--color-bg-card);
+  background:
+    linear-gradient(180deg, color-mix(in srgb, var(--color-bg-card) 96%, var(--color-primary)), var(--color-bg-card));
   border-radius: var(--radius-md);
   padding: 18px;
   box-shadow: var(--shadow-card);
@@ -8912,11 +9059,12 @@ textarea {
   color: var(--color-text-primary);
   padding: 12px;
   cursor: pointer;
-  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
+  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .16s ease;
 }
 
 .digital-human-template-card:hover,
 .digital-human-template-card.is-active {
+  transform: translateY(-1px);
   border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-border));
   background: color-mix(in srgb, var(--color-primary) 7%, var(--color-bg-card));
   box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 12%, transparent);
@@ -9080,6 +9228,8 @@ textarea {
 }
 
 .digital-human-job-card {
+  position: relative;
+  overflow: hidden;
   display: grid;
   gap: 10px;
   border: 1px solid var(--color-border-light);
@@ -9088,6 +9238,15 @@ textarea {
   padding: 12px;
 }
 
+.digital-human-job-card::before {
+  position: absolute;
+  inset: 0 auto 0 0;
+  width: 3px;
+  content: "";
+  background: var(--color-primary);
+  opacity: 0.48;
+}
+
 .digital-human-job-head {
   display: flex;
   justify-content: space-between;
@@ -9262,6 +9421,10 @@ textarea {
   margin: 0 auto;
 }
 
+.money-printer-hero-shell .console-hero-rail strong {
+  font-size: 16px;
+}
+
 .money-printer-layout {
   display: grid;
   grid-template-columns: minmax(0, 1.05fr) minmax(340px, 0.95fr);
@@ -9271,7 +9434,8 @@ textarea {
 
 .money-printer-panel {
   border: 1px solid var(--color-border-light);
-  background: var(--color-bg-card);
+  background:
+    linear-gradient(180deg, color-mix(in srgb, var(--color-bg-card) 96%, var(--color-primary)), var(--color-bg-card));
   border-radius: var(--radius-md);
   padding: 18px;
   box-shadow: var(--shadow-card);
@@ -9314,7 +9478,8 @@ textarea {
   gap: 5px;
   border: 1px solid var(--color-border-light);
   border-radius: var(--radius-md);
-  background: var(--color-bg-card);
+  background:
+    linear-gradient(180deg, color-mix(in srgb, var(--color-bg-card) 96%, var(--color-primary)), var(--color-bg-card));
   box-shadow: var(--shadow-sm);
   padding: 14px;
   min-width: 0;
@@ -9348,6 +9513,8 @@ textarea {
 }
 
 .money-printer-pipeline-step {
+  position: relative;
+  overflow: hidden;
   min-height: 72px;
   display: grid;
   align-content: center;
@@ -9361,6 +9528,22 @@ textarea {
   transition: border-color .18s ease, background-color .18s ease, color .18s ease;
 }
 
+.money-printer-pipeline-step::after {
+  position: absolute;
+  left: 50%;
+  right: -50%;
+  top: 22px;
+  height: 1px;
+  pointer-events: none;
+  content: "";
+  background: linear-gradient(90deg, color-mix(in srgb, var(--color-primary) 42%, transparent), transparent);
+  opacity: 0.32;
+}
+
+.money-printer-pipeline-step:last-child::after {
+  display: none;
+}
+
 .money-printer-pipeline-step span {
   width: 24px;
   height: 24px;
@@ -9572,6 +9755,8 @@ textarea {
 }
 
 .money-printer-job-card {
+  position: relative;
+  overflow: hidden;
   display: grid;
   gap: 10px;
   border: 1px solid var(--color-border-light);
@@ -9580,6 +9765,27 @@ textarea {
   padding: 12px;
 }
 
+.money-printer-job-card::before {
+  position: absolute;
+  inset: 0 auto 0 0;
+  width: 3px;
+  content: "";
+  background: var(--color-warning);
+  opacity: 0.54;
+}
+
+.money-printer-job-card.is-success::before {
+  background: var(--color-success);
+}
+
+.money-printer-job-card.is-danger::before {
+  background: var(--color-danger);
+}
+
+.money-printer-job-card.is-primary::before {
+  background: var(--color-primary);
+}
+
 .money-printer-job-card.is-success {
   border-color: color-mix(in srgb, var(--color-success) 24%, var(--color-border-light));
 }
@@ -9785,7 +9991,8 @@ textarea {
   padding: 12px 14px;
   border: 1px solid var(--color-border-light);
   border-radius: var(--radius-md);
-  background: var(--color-bg-card);
+  background:
+    linear-gradient(180deg, color-mix(in srgb, var(--color-bg-card) 96%, var(--color-primary)), var(--color-bg-card));
   box-shadow: var(--shadow-sm);
 }
 
@@ -9828,7 +10035,8 @@ textarea {
   padding: 14px;
   border: 1px solid var(--color-border-light);
   border-radius: var(--radius-md);
-  background: var(--color-bg-card);
+  background:
+    linear-gradient(180deg, color-mix(in srgb, var(--color-bg-card) 96%, var(--color-primary)), var(--color-bg-card));
   box-shadow: var(--shadow-sm);
 }
 
@@ -9903,19 +10111,37 @@ textarea {
 }
 
 .workspace-asset-card {
+  position: relative;
   display: block;
   min-width: 0;
   text-align: left;
   border: 1px solid var(--color-border-light);
   border-radius: var(--radius-md);
   overflow: hidden;
-  background: var(--color-bg-card);
+  background:
+    linear-gradient(180deg, color-mix(in srgb, var(--color-bg-card) 96%, var(--color-primary)), var(--color-bg-card));
   color: var(--color-text-primary);
   padding: 0;
   cursor: pointer;
   transition: border-color 0.16s ease, transform 0.14s ease, box-shadow 0.16s ease;
 }
 
+.workspace-asset-card::after {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  content: "";
+  background: linear-gradient(180deg, color-mix(in srgb, var(--color-primary) 8%, transparent), transparent 36%);
+  opacity: 0;
+  transition: opacity 0.16s ease;
+}
+
+.workspace-asset-card:hover::after,
+.workspace-asset-card.is-active::after,
+.workspace-asset-card.is-selected::after {
+  opacity: 1;
+}
+
 .workspace-asset-card:hover {
   transform: translateY(-1px);
   border-color: color-mix(in srgb, var(--color-primary) 28%, var(--color-border));
@@ -9967,6 +10193,10 @@ textarea {
   transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
 }
 
+.workspace-select:hover {
+  transform: scale(1.04);
+}
+
 .workspace-select input {
   position: absolute;
   inset: 0;
@@ -10104,7 +10334,8 @@ textarea {
   top: calc(var(--topbar-height) + 18px);
   border: 1px solid var(--color-border-light);
   border-radius: var(--radius-md);
-  background: var(--color-bg-card);
+  background:
+    linear-gradient(180deg, color-mix(in srgb, var(--color-bg-card) 96%, var(--color-primary)), var(--color-bg-card));
   padding: 16px;
   box-shadow: var(--shadow-card);
 }
@@ -10213,6 +10444,31 @@ textarea {
 }
 
 @media (max-width: 768px) {
+  .console-hero {
+    grid-template-columns: 1fr;
+    padding: 16px;
+  }
+
+  .console-hero-rail {
+    width: 100%;
+    min-width: 0;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .console-hero-rail > div {
+    min-height: 64px;
+    padding: 10px;
+  }
+
+  .console-hero-rail strong {
+    font-size: 15px;
+  }
+
+  .console-hero-actions {
+    width: 100%;
+    justify-content: flex-start;
+  }
+
   .login-shell {
     padding: 10px;
   }

src/web/pages/Dashboard.tsx

@@ -577,18 +577,27 @@ export default function Dashboard({
 
   return (
     <div className="dashboard-page animate-fade-in">
-      <div
-        style={{
-          display: "flex",
-          justifyContent: "space-between",
-          alignItems: "center",
-          marginBottom: 24,
-        }}
-      >
-        <h2 className="greeting">
-          {getGreeting() + "\uFF0C" + normalizedAdminName}
-        </h2>
-        <div style={{ display: "flex", gap: 8 }}>
+      <section className="console-hero dashboard-hero">
+        <div className="console-hero-copy">
+          <span className="console-kicker">BossAI Console</span>
+          <h1>{getGreeting()}，{normalizedAdminName}</h1>
+          <p>统一观察模型路由、站点健康、账户余额、请求吞吐和计费成本。这里是整个平台的运营控制台。</p>
+        </div>
+        <div className="console-hero-rail" aria-label="实时运营摘要">
+          <div>
+            <span>24h 请求</span>
+            <strong>{Math.round(proxy24hTotal).toLocaleString()}</strong>
+          </div>
+          <div>
+            <span>RPM</span>
+            <strong>{Math.round(requestsPerMinute).toLocaleString()}</strong>
+          </div>
+          <div>
+            <span>站点</span>
+            <strong>{activeSites.length}/{rawSiteAvailability.length}</strong>
+          </div>
+        </div>
+        <div className="console-hero-actions">
           <button
             onClick={() => {
               void load(true);
@@ -619,7 +628,7 @@ export default function Dashboard({
             </svg>
           </button>
         </div>
-      </div>
+      </section>
 
       <div className="dashboard-stat-grid">
         <div className="stat-card animate-slide-up stagger-1">

src/web/pages/DigitalHuman.tsx

@@ -384,18 +384,33 @@ export default function DigitalHuman() {
 
   return (
     <div className="digital-human-page animate-fade-in">
-      <div className="page-header">
-        <div>
-          <h1 className="page-title">数字人</h1>
-          <p className="page-subtitle">选择 Comfy 工作流模板，上传人物素材和参考音频，生成真人商品讲解视频。</p>
+      <section className="console-hero digital-human-hero">
+        <div className="console-hero-copy">
+          <span className="console-kicker">Digital Human</span>
+          <h1>数字人商品讲解</h1>
+          <p>选择 Comfy 工作流模板，上传人物图片或视频、商品文案和参考音频，后台生成真人口播讲解视频并归档到工作空间。</p>
         </div>
-        <div className="page-actions">
+        <div className="console-hero-rail" aria-label="数字人任务摘要">
+          <div>
+            <span>模板</span>
+            <strong>{sortedWorkflows.length}</strong>
+          </div>
+          <div>
+            <span>任务</span>
+            <strong>{jobs.length}</strong>
+          </div>
+          <div>
+            <span>音频用途</span>
+            <strong>{AUDIO_ROLES.find((item) => item.value === audioRole)?.label || 'both'}</strong>
+          </div>
+        </div>
+        <div className="console-hero-actions">
           <button type="button" className="btn btn-ghost" onClick={loadData}>刷新</button>
           <button type="button" className="btn btn-primary" onClick={submit} disabled={!canSubmit}>
             {submitting ? '提交中...' : '生成讲解视频'}
           </button>
         </div>
-      </div>
+      </section>
 
       {error && <div className="alert alert-error" style={{ marginBottom: 12 }}>{error}</div>}
 

src/web/pages/MoneyPrinter.tsx

@@ -602,12 +602,27 @@ export default function MoneyPrinter() {
 
   return (
     <div className="money-printer-page animate-fade-in">
-      <div className="page-header">
-        <div>
-          <h1 className="page-title">短视频工厂</h1>
-          <p className="page-subtitle">内置 MoneyPrinterTurbo 思路：主题生成脚本和分镜，再用 BoosAPI 视频模型生产成片。</p>
+      <section className="console-hero money-printer-hero-shell">
+        <div className="console-hero-copy">
+          <span className="console-kicker">Short Video Factory</span>
+          <h1>短视频工厂</h1>
+          <p>把 MoneyPrinterTurbo 的生产思路接入 BossAI：主题生成脚本和分镜，再交给 BoosAPI 或 Comfy API 模板生产成片。</p>
         </div>
-        <div className="page-actions">
+        <div className="console-hero-rail" aria-label="短视频工厂摘要">
+          <div>
+            <span>后端</span>
+            <strong>{videoBackend === 'comfy' ? comfyBackendLabel : 'BoosAPI'}</strong>
+          </div>
+          <div>
+            <span>队列</span>
+            <strong>{runningJobs.length}</strong>
+          </div>
+          <div>
+            <span>归档</span>
+            <strong>{archivedAssetCount}</strong>
+          </div>
+        </div>
+        <div className="console-hero-actions">
           <button type="button" className="btn btn-ghost" onClick={() => void refreshNow()} disabled={refreshing}>
             {refreshing ? '刷新中...' : '刷新'}
           </button>
@@ -615,7 +630,7 @@ export default function MoneyPrinter() {
             {submitting ? '提交中...' : '生成短视频'}
           </button>
         </div>
-      </div>
+      </section>
 
       {error && <div className="alert alert-error" style={{ marginBottom: 12 }}>{error}</div>}
 

src/web/pages/Workspace.tsx

@@ -331,19 +331,34 @@ export default function Workspace() {
 
   return (
     <div className="workspace-page animate-fade-in">
-      <div className="page-header">
-        <div>
-          <h1 className="page-title">工作空间</h1>
-          <p className="page-subtitle">
-            {audience === 'user' ? '你的创作成品库' : '全部用户的创作成品库'}，只归档最终产出。工作流上传素材和预置模板资源不会进入这里。
+      <section className="console-hero workspace-hero">
+        <div className="console-hero-copy">
+          <span className="console-kicker">Workspace</span>
+          <h1>工作空间</h1>
+          <p>
+            {audience === 'user' ? '你的创作成品库' : '全部用户的创作成品库'}。这里只保留最终交付文件，工作流上传素材和预置模板资源不会污染资产库。
           </p>
         </div>
-        <div className="page-actions">
+        <div className="console-hero-rail" aria-label="工作空间摘要">
+          <div>
+            <span>当前结果</span>
+            <strong>{total}</strong>
+          </div>
+          <div>
+            <span>本地文件</span>
+            <strong>{localCount}</strong>
+          </div>
+          <div>
+            <span>已选择</span>
+            <strong>{selectedIds.length}</strong>
+          </div>
+        </div>
+        <div className="console-hero-actions">
           <button type="button" className="btn btn-ghost" onClick={() => void load()} disabled={loading}>
             {loading ? '刷新中...' : '刷新'}
           </button>
         </div>
-      </div>
+      </section>
 
       <div className="workspace-summary">
         <div className="workspace-summary-item">