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">

website/app/globals.css

@@ -104,6 +104,8 @@ a {
 .workflow-section,
 .ops-section,
 .factory-section,
+.studio-section,
+.control-section,
 .deploy-section,
 .final-section {
   position: relative;
@@ -601,6 +603,8 @@ a {
 .workflow-section,
 .ops-section,
 .factory-section,
+.studio-section,
+.control-section,
 .deploy-section,
 .final-section {
   padding-block: 72px;
@@ -620,6 +624,8 @@ a {
 }
 
 .section-heading span,
+.studio-copy span,
+.control-panel span,
 .ops-copy span,
 .factory-copy span,
 .deploy-section > div:first-child > span {
@@ -633,6 +639,8 @@ a {
 
 .section-heading h2,
 .workflow-panel h2,
+.studio-copy h2,
+.control-panel h2,
 .ops-copy h2,
 .factory-copy h2,
 .deploy-section h2,
@@ -692,6 +700,8 @@ a {
 .capability-card p,
 .section-heading.split p,
 .endpoint-card p,
+.studio-copy p,
+.studio-flow p,
 .workflow-panel p,
 .ops-copy p,
 .ops-card p,
@@ -705,6 +715,8 @@ a {
 
 .capability-card,
 .endpoint-card,
+.studio-flow article,
+.control-grid > div,
 .ops-card,
 .module-strip span {
   transform-style: preserve-3d;
@@ -713,6 +725,8 @@ a {
 
 .capability-card:hover,
 .endpoint-card:hover,
+.studio-flow article:hover,
+.control-grid > div:hover,
 .ops-card:hover,
 .module-strip span:hover {
   transform: translateY(-3px);
@@ -728,6 +742,64 @@ a {
   border-bottom: 1px solid var(--line);
 }
 
+.studio-section {
+  display: grid;
+  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
+  gap: 18px;
+  align-items: stretch;
+}
+
+.studio-copy,
+.studio-flow article,
+.control-section {
+  border: 1px solid var(--line);
+  border-radius: 32px;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.022)),
+    rgba(255, 255, 255, 0.025);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
+}
+
+.studio-copy {
+  display: grid;
+  align-content: end;
+  gap: 18px;
+  padding: 34px;
+}
+
+.studio-flow {
+  display: grid;
+  gap: 12px;
+}
+
+.studio-flow article {
+  min-height: 146px;
+  display: grid;
+  align-content: center;
+  gap: 10px;
+  padding: 22px;
+}
+
+.studio-flow em {
+  width: 42px;
+  height: 42px;
+  display: inline-grid;
+  place-items: center;
+  border: 1px solid rgba(215, 255, 77, 0.24);
+  border-radius: 14px;
+  background: rgba(215, 255, 77, 0.08);
+  color: var(--acid);
+  font-family: var(--font-geist-mono), monospace;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 800;
+}
+
+.studio-flow strong {
+  font-size: 24px;
+  letter-spacing: -0.045em;
+}
+
 .endpoint-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -905,6 +977,49 @@ a {
   padding: 34px;
 }
 
+.control-section {
+  display: grid;
+  grid-template-columns: minmax(0, 0.76fr) minmax(0, 1.24fr);
+  gap: 24px;
+  align-items: center;
+  padding: 34px;
+}
+
+.control-panel {
+  display: grid;
+  gap: 16px;
+}
+
+.control-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.control-grid > div {
+  min-height: 92px;
+  display: grid;
+  align-content: center;
+  gap: 12px;
+  border: 1px solid var(--line);
+  border-radius: 22px;
+  background: rgba(255, 255, 255, 0.03);
+  padding: 16px;
+}
+
+.control-grid span {
+  width: 9px;
+  height: 9px;
+  border-radius: 999px;
+  background: var(--acid);
+  box-shadow: 0 0 22px rgba(215, 255, 77, 0.5);
+}
+
+.control-grid strong {
+  font-size: 15px;
+  letter-spacing: -0.02em;
+}
+
 .module-strip {
   display: flex;
   flex-wrap: wrap;
@@ -970,6 +1085,8 @@ a {
   .api-section,
   .workflow-section,
   .ops-section,
+  .studio-section,
+  .control-section,
   .factory-section,
   .deploy-section {
     grid-template-columns: 1fr;
@@ -997,6 +1114,8 @@ a {
   .api-section,
   .workflow-section,
   .ops-section,
+  .studio-section,
+  .control-section,
   .factory-section,
   .deploy-section,
   .final-section {
@@ -1066,6 +1185,8 @@ a {
   }
 
   .workflow-panel,
+  .studio-copy,
+  .control-section,
   .ops-copy,
   .ops-grid,
   .factory-section,
@@ -1079,6 +1200,10 @@ a {
     gap: 4px;
     padding-block: 10px;
   }
+
+  .control-grid {
+    grid-template-columns: 1fr;
+  }
 }
 
 @media (prefers-reduced-motion: reduce) {

website/app/page.tsx

@@ -6,25 +6,25 @@ const platformItems = [
   {
     title: "统一 API 网关",
     eyebrow: "Gateway",
-    body: "OpenAI、Claude Messages、Gemini、方舟、图像和视频接口统一到一套下游协议。",
+    body: "OpenAI、Claude Messages、Gemini、方舟、图像、视频和语音接口统一到一套入口。",
     metric: "/v1",
   },
   {
     title: "智能模型路由",
     eyebrow: "Routing",
-    body: "按站点、账号、令牌、模型和失败冷却自动调度，保留真实日志和计费链路。",
+    body: "按站点、账号、令牌、模型能力和失败冷却自动调度，保留真实日志与计费口径。",
     metric: "Auto",
   },
   {
     title: "Comfy 工作流",
     eyebrow: "Workflow",
-    body: "使用熟悉的 ComfyUI 前端，接入 Cloud、RunningHub、External 或 BoosAPI 执行器。",
+    body: "保留完整版 ComfyUI 前端习惯，接入 Cloud、RunningHub、External 或 BoosAPI 执行器。",
     metric: "Canvas",
   },
   {
     title: "创作应用生产",
     eyebrow: "Studio",
-    body: "生图助手、视频助手、数字人、短视频工厂和工作空间复用同一套模型能力。",
+    body: "生图助手、视频助手、数字人、短视频工厂和工作空间复用同一套模型资产。",
     metric: "Media",
   },
 ];
@@ -48,6 +48,24 @@ const consoleMetrics = [
   { label: "失败冷却", value: "auto" },
 ];
 
+const studioFlow = [
+  {
+    step: "01",
+    title: "接入模型",
+    body: "把多个中转站、官方 API、Comfy Cloud、RunningHub 或外部 ComfyUI 接成统一能力池。",
+  },
+  {
+    step: "02",
+    title: "编排生产",
+    body: "在对话、生图、视频、数字人和短视频工厂里复用模型、模板、提示词和工作流。",
+  },
+  {
+    step: "03",
+    title: "归档计费",
+    body: "每次调用进入日志、成本、用户隔离和工作空间，只保留真正可交付的最终产出。",
+  },
+];
+
 const workflowModes = [
   ["cloud", "Comfy Cloud API 后端"],
   ["runninghub", "RunningHub API 后端"],
@@ -111,6 +129,15 @@ const productionModules = [
   "PostgreSQL",
 ];
 
+const controlSignals = [
+  "模型路由",
+  "Claude Messages",
+  "图像生成",
+  "视频生成",
+  "数字人口播",
+  "工作空间归档",
+];
+
 function FlowGlyph() {
   return (
     <svg className="flow-glyph" viewBox="0 0 520 360" role="img" aria-label="BossAI 工作流动态图形">
@@ -229,11 +256,11 @@ export default function Home() {
               多模型 · 多模态 · 工作流
             </div>
             <h1>
-              聚合多模型
-              <span>多模态的 AI 应用平台</span>
+              多模型多模态
+              <span>AI 应用生产平台</span>
             </h1>
             <p>
-              BossAI 把统一 API 网关、智能路由、Comfy 工作流、数字人和短视频工厂收进一个清晰后台，让团队专注生产，而不是到处切系统。
+              BossAI 把 API 网关、智能路由、Comfy 工作流、数字人和短视频工厂收进一个清晰的运营后台，让团队用一套系统完成接入、生产、计费和交付。
             </p>
             <div className="hero-actions">
               <Link className="primary-cta" href="/user/register">
@@ -258,7 +285,7 @@ export default function Home() {
         <section id="platform" className="platform-section" data-motion="section">
           <div className="section-heading">
             <span>Platform</span>
-            <h2>一套后台，接住 API、工作流和创作应用</h2>
+            <h2>一套后台，接住模型接入、创作生产和商业运营</h2>
           </div>
           <div className="capability-grid">
             {platformItems.map((item, index) => (
@@ -279,6 +306,25 @@ export default function Home() {
           </div>
         </section>
 
+        <section className="studio-section" data-motion="section">
+          <div className="studio-copy">
+            <span>Operating System</span>
+            <h2>从模型供应到内容产出，形成一条能运营的生产线</h2>
+            <p>
+              BossAI 不只是转发请求。它把模型、用户、模板、工作流、任务队列、产出文件和成本记录串成一个可观察、可复用、可商业化的闭环。
+            </p>
+          </div>
+          <div className="studio-flow">
+            {studioFlow.map((item) => (
+              <article data-motion="card" key={item.step}>
+                <em>{item.step}</em>
+                <strong>{item.title}</strong>
+                <p>{item.body}</p>
+              </article>
+            ))}
+          </div>
+        </section>
+
         <section id="api" className="api-section" data-motion="section">
           <div className="section-heading split">
             <div>
@@ -286,7 +332,7 @@ export default function Home() {
               <h2>协议兼容不是旁路，而是整个平台的入口</h2>
             </div>
             <p>
-              对话、生图、视频和 Claude Messages 都从同一个网关进入路由、日志、计费和用户隔离。前端应用、工作流节点和外部客户端使用同一套模型资产。
+              对话、生图、视频和 Claude Messages 都从同一个网关进入路由、日志、计费和用户隔离。前端应用、工作流节点和外部客户端使用同一套模型资产，不再各自维护一套上游。
             </p>
           </div>
           <div className="endpoint-grid">
@@ -310,7 +356,7 @@ export default function Home() {
               <h2>使用完整版 ComfyUI 前端，后端按你的模式切换</h2>
             </div>
             <p>
-              官网和管理台隔离后，Workflow 继续作为产品内能力维护。BossAI 可以代理官方 Cloud、RunningHub、外部 ComfyUI，也能执行 API-native 节点。
+              Workflow 保留用户熟悉的 ComfyUI 前端体验。BossAI 可以代理官方 Cloud、RunningHub、外部 ComfyUI，也能执行 API-native 节点，让模板、模型和产出都进入同一套后台。
             </p>
             <div className="mode-list">
               {workflowModes.map(([key, label]) => (
@@ -350,7 +396,7 @@ export default function Home() {
             <span>Operations</span>
             <h2>运营后台负责成本、权限、路由和产出归档</h2>
             <p>
-              BossAI 不是只把 API 转发出去。它把管理员视角、用户视角、模型市场、使用日志和工作空间放进同一套产品闭环。
+              管理员看站点、账号、模型、失败率和成本；普通用户看自己的模型、任务、日志和工作空间。每个角色都有清晰边界。
             </p>
           </div>
           <div className="ops-grid">
@@ -369,7 +415,7 @@ export default function Home() {
             <span>Creation OS</span>
             <h2>从提示词到短视频，从素材到数字人</h2>
             <p>
-              生图助手、视频助手和短视频工厂共享 BoosAPI 模型路由。产出文件自动归档，用户之间隔离，管理员可查看团队级用量与成本。
+              生图助手、视频助手、数字人和短视频工厂共享 BossAI 模型路由。产出文件自动归档，用户之间隔离，管理员可查看团队级用量与成本。
             </p>
           </div>
           <div className="module-strip">
@@ -381,12 +427,27 @@ export default function Home() {
           </div>
         </section>
 
+        <section className="control-section" data-motion="section">
+          <div className="control-panel">
+            <span>Control Plane</span>
+            <h2>让每一次模型调用都能被追踪、解释和计费</h2>
+          </div>
+          <div className="control-grid">
+            {controlSignals.map((item) => (
+              <div data-motion="card" key={item}>
+                <span />
+                <strong>{item}</strong>
+              </div>
+            ))}
+          </div>
+        </section>
+
         <section id="deploy" className="deploy-section" data-motion="section">
           <div>
             <span>Deploy</span>
             <h2>远程模型优先，本机不必有 GPU</h2>
             <p>
-              当图像、视频、语音走上游 API、Comfy Cloud 或 RunningHub 时，BossAI 服务器只负责网关、鉴权、数据库、日志和 Workflow UI 代理。
+              当图像、视频、语音走上游 API、Comfy Cloud 或 RunningHub 时，BossAI 服务器只负责网关、鉴权、数据库、日志、计费和 Workflow UI 代理。
             </p>
           </div>
           <div className="deploy-stack">
@@ -406,8 +467,8 @@ export default function Home() {
         </section>
 
         <section className="final-section" data-motion="section">
-          <h2>把模型、工作流和创作应用收进一个平台</h2>
-          <p>适合自建 AI 中转、团队模型管理、多模态创作和商业化用户面板。</p>
+          <h2>把模型、工作流和创作应用收进一个可运营的平台</h2>
+          <p>适合自建 AI 中转、团队模型管理、多模态内容生产、数字人商品讲解和商业化用户面板。</p>
           <div className="hero-actions">
             <Link className="primary-cta" href="/user/register">
               开始使用