feat: refine BossAI console and website design

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">
               开始使用