feat: redesign market-facing ui surfaces

frontend-web/src/app/admin/(secure)/dashboard/page.tsx

@@ -47,7 +47,7 @@ export default function DashboardPage() {
           <span className="header-kicker">Control overview</span>
           <h3>统一观察用户经济、模型路由和任务健康度</h3>
           <p className="muted">
-            当前后台适合快速联调 MVP：前台创作流、积分系统、邀请奖励、模型供应商和任务轮询都能在这里找到对应控制面。
+            后台围绕用户经济系统、模型供应商、任务状态和公共配置四条主线组织，适合持续运营而不是只做演示。
           </p>
         </div>
         <div className="dashboard-stage-grid">
@@ -63,8 +63,8 @@ export default function DashboardPage() {
           </div>
           <div className="dashboard-mini-card">
             <span>运行主线</span>
-            <strong>本地 mock / 源码模式</strong>
+            <strong>任务执行 / 回调审计</strong>
-            <small>适合先打磨前后台交互和管理体验。</small>
+            <small>更适合持续观察稳定性、成功率与异常链路。</small>
           </div>
         </div>
       </section>

frontend-web/src/app/admin/login/page.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { startTransition, useState } from "react";
-import { ArrowRight, Blocks, Coins, Settings2, ShieldCheck } from "lucide-react";
+import { ArrowRight, Blocks, Coins, ShieldCheck } from "lucide-react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 
@@ -31,65 +31,51 @@ export default function AdminLoginPage() {
   }
 
   return (
-    <div className="login-grid auth-grid-admin">
+    <div className="admin-auth-page">
-      <section className="auth-hero auth-hero-admin">
+      <section className="admin-auth-copy">
-        <div className="auth-copy">
+        <span className="admin-page-kicker">OPERATIONS CONSOLE</span>
-          <div className="brand-kicker">Ops Console</div>
+        <h1>AIVIDEO CONTROL SURFACE</h1>
-          <h1 className="headline">把模型、价格、奖励、订单和任务链路收进一块控制台。</h1>
+        <p>
-          <p className="subcopy">
+          用更克制的 dark console 管理模型、价格、订单、奖励和任务治理链路，让后台像控制面，而不是营销页。
-            这轮后台视觉沿用 `MiniMax-DESIGN.md` 的轻白产品感，用更轻的卡片矩阵承载更重的运营信息，让配置、审计和异常排查更易读。
+        </p>
-          </p>
+
-          <div className="auth-chip-row">
+        <div className="admin-auth-grid">
-            <span className="auth-chip">Provider routing</span>
+          <article className="admin-auth-info">
-            <span className="auth-chip">Pricing control</span>
+            <Blocks size={18} />
-            <span className="auth-chip">Audit trail</span>
+            <strong>模型与路由</strong>
-          </div>
+            <span>平台模型、供应商模型和绑定关系统一管理。</span>
-        </div>
+          </article>
-        <div className="showcase-stack">
+          <article className="admin-auth-info">
-          <div className="showcase-card showcase-card-hero">
+            <Coins size={18} />
-            <div className="toolbar">
+            <strong>价格与资金</strong>
-              <span className="status-badge tone-success">Admin access</span>
+            <span>订单、兑换码、价格规则和奖励系统保持同一视图。</span>
-              <span className="mini-note">Operational overview</span>
+          </article>
-            </div>
+          <article className="admin-auth-info">
-            <h3>后台只做关键决策，不做噪音堆叠</h3>
+            <ShieldCheck size={18} />
-            <p className="muted">
+            <strong>审计与处置</strong>
-              当前后台围绕四个维度组织：用户经济系统、模型与供应商、任务状态以及公共配置。适合直接联调 MVP。
+            <span>回调日志、异常任务和系统配置更容易定位问题。</span>
-            </p>
+          </article>
-          </div>
-          <div className="showcase-card-grid">
-            <article className="showcase-card">
-              <Blocks size={18} />
-              <strong>模型控制面</strong>
-              <span>平台模型、供应商模型和路由关系都在一个壳层里完成。</span>
-            </article>
-            <article className="showcase-card">
-              <Coins size={18} />
-              <strong>积分与价格系统</strong>
-              <span>订单、兑换码、价格规则和奖励规则统一维护。</span>
-            </article>
-            <article className="showcase-card">
-              <Settings2 size={18} />
-              <strong>配置与审计</strong>
-              <span>系统配置、任务回调和异常日志便于排查问题。</span>
-            </article>
-          </div>
         </div>
       </section>
 
-      <section className="fullscreen-shell">
+      <section className="admin-auth-panel">
-        <form className="auth-card auth-card-strong" onSubmit={handleSubmit}>
+        <form className="admin-auth-card" onSubmit={handleSubmit}>
-          <div className="auth-card-head">
+          <div className="admin-auth-head">
-            <div className="brand-kicker">AIVideo Admin</div>
+            <span className="admin-page-kicker">ADMIN ACCESS</span>
-            <h3>管理员登录</h3>
+            <h2>登录控制台</h2>
-            <p className="muted">进入运营控制台，处理规则配置和异常链路。</p>
+            <p>进入管理员界面，处理配置、审计和异常任务。</p>
           </div>
+
           <div className="form-stack">
             <label className="field-label">
               用户名
               <input
                 value={form.username}
                 onChange={(event) =>
-                  setForm((previous) => ({ ...previous, username: event.target.value }))
+                  setForm((previous) => ({
+                    ...previous,
+                    username: event.target.value,
+                  }))
                 }
               />
             </label>
@@ -99,23 +85,28 @@ export default function AdminLoginPage() {
                 type="password"
                 value={form.password}
                 onChange={(event) =>
-                  setForm((previous) => ({ ...previous, password: event.target.value }))
+                  setForm((previous) => ({
+                    ...previous,
+                    password: event.target.value,
+                  }))
                 }
               />
             </label>
+
             {error ? <div className="inline-feedback is-error">{error}</div> : null}
+
             <button className="primary-button" type="submit">
-              {loading ? "登录中..." : "进入后台"}
+              {loading ? "SIGNING IN..." : "ENTER CONSOLE"}
               {loading ? null : <ArrowRight size={16} />}
             </button>
-            <div className="auth-action-row">
+
+            <div className="auth-form-actions">
               <Link href="/login" className="ghost-button">
                 返回用户端
               </Link>
-              <div className="field-note">
+              <Link href="/" className="auth-inline-link">
-                <ShieldCheck size={14} />
+                返回首页
-                默认管理员账号已由后端初始化脚本自动创建。
+              </Link>
-              </div>
             </div>
           </div>
         </form>

frontend-web/src/app/fonts.ts

@@ -1,19 +1,16 @@
-import { DM_Sans, Outfit, Roboto_Mono } from "next/font/google";
+import { Geist, Geist_Mono } from "next/font/google";
 
-export const displayFont = Outfit({
+export const displayFont = Geist({
   subsets: ["latin"],
   variable: "--font-display",
-  weight: ["500", "600", "700"],
 });
 
-export const bodyFont = DM_Sans({
+export const bodyFont = Geist({
   subsets: ["latin"],
   variable: "--font-body",
-  weight: ["400", "500", "700"],
 });
 
-export const monoFont = Roboto_Mono({
+export const monoFont = Geist_Mono({
   subsets: ["latin"],
   variable: "--font-mono",
-  weight: ["400", "500", "600"],
 });

frontend-web/src/app/login/page.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { startTransition, useState } from "react";
-import { ArrowRight, Clapperboard, Coins, FolderKanban, Sparkles } from "lucide-react";
+import { ArrowRight, Coins, FolderKanban, ImagePlus } from "lucide-react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 
@@ -9,7 +9,10 @@ import { api, ApiError } from "@/lib/api";
 
 export default function LoginPage() {
   const router = useRouter();
-  const [form, setForm] = useState({ account: "demo@example.com", password: "12345678" });
+  const [form, setForm] = useState({
+    account: "demo@example.com",
+    password: "12345678",
+  });
   const [error, setError] = useState("");
   const [loading, setLoading] = useState(false);
 
@@ -28,65 +31,54 @@ export default function LoginPage() {
   }
 
   return (
-    <div className="auth-grid">
+    <div className="auth-page auth-page-user">
-      <section className="auth-hero auth-hero-studio">
+      <section className="auth-showcase auth-showcase-user">
-        <div className="auth-copy">
+        <div className="auth-showcase-copy">
-          <div className="eyebrow">Creative Workbench</div>
+          <span className="auth-showcase-kicker">AIVIDEO FOR CREATORS</span>
-          <h1 className="headline">从一句提示词到成片交付，把 AI 视频生产线收进一块工作台。</h1>
+          <h1>把创作体验打磨成真正能面对市场的产品，而不只是一个生成入口。</h1>
-          <p className="subcopy">
+          <p>
-            参考 `MiniMax-DESIGN.md` 的产品画布思路，把模型切换、素材引用、积分消耗和任务轮询组织成一组清爽的能力卡片。
+            从提示词、素材引用到任务交付与积分体系，AIVideo
+            把用户真正会触达的关键环节收进同一套产品体验里。
           </p>
-          <div className="auth-chip-row">
-            <span className="auth-chip">Prompt to video</span>
-            <span className="auth-chip">Capability cards</span>
-            <span className="auth-chip">Realtime task polling</span>
-          </div>
         </div>
-        <div className="showcase-stack">
+
-          <div className="showcase-card showcase-card-hero">
+        <div className="auth-showcase-grid">
-            <div className="toolbar">
+          <article className="auth-showcase-card">
-              <span className="status-badge tone-success">Studio ready</span>
+            <ImagePlus size={18} />
-              <span className="mini-note">Source mode</span>
+            <strong>素材先行</strong>
-            </div>
+            <span>图片、视频、音频素材统一管理，创作时随时调用。</span>
-            <h3>一次登录，接管创作链路</h3>
+          </article>
-            <p className="muted">
+          <article className="auth-showcase-card">
-              默认即可走本地 mock 供应商、SQLite 和本地存储，适合先把完整交互、任务状态和后台规则跑通。
+            <FolderKanban size={18} />
-            </p>
+            <strong>任务可追踪</strong>
-          </div>
+            <span>生成状态、结果视频和扣费记录都能持续回看。</span>
-          <div className="showcase-card-grid">
+          </article>
-            <article className="showcase-card">
+          <article className="auth-showcase-card">
-              <Clapperboard size={18} />
+            <Coins size={18} />
-              <strong>工作台直达成片</strong>
+            <strong>商业闭环</strong>
-              <span>模型、时长、比例与素材引用在同一视图完成。</span>
+            <span>积分、充值、兑换和邀请奖励自然衔接到产品流中。</span>
-            </article>
+          </article>
-            <article className="showcase-card">
-              <FolderKanban size={18} />
-              <strong>任务状态持续刷新</strong>
-              <span>提交后自动轮询，成功后直接打开结果视频。</span>
-            </article>
-            <article className="showcase-card">
-              <Coins size={18} />
-              <strong>积分链路完整</strong>
-              <span>注册奖励、充值、兑换码和冻结扣费全部可见。</span>
-            </article>
-          </div>
         </div>
       </section>
 
-      <section className="fullscreen-shell">
+      <section className="auth-form-column">
-        <form className="auth-card auth-card-strong" onSubmit={handleSubmit}>
+        <form className="auth-form-card" onSubmit={handleSubmit}>
-          <div className="auth-card-head">
+          <div className="auth-form-head">
-            <div className="eyebrow">Welcome Back</div>
+            <span className="auth-form-kicker">Welcome Back</span>
             <h2>登录 AIVideo</h2>
-            <p className="muted">继续你的创作队列、素材库和积分操作。</p>
+            <p>继续你的创作项目、素材库和任务队列。</p>
           </div>
+
           <div className="form-stack">
             <label className="field-label">
               账号
               <input
                 value={form.account}
                 onChange={(event) =>
-                  setForm((previous) => ({ ...previous, account: event.target.value }))
+                  setForm((previous) => ({
+                    ...previous,
+                    account: event.target.value,
+                  }))
                 }
               />
             </label>
@@ -96,23 +88,28 @@ export default function LoginPage() {
                 type="password"
                 value={form.password}
                 onChange={(event) =>
-                  setForm((previous) => ({ ...previous, password: event.target.value }))
+                  setForm((previous) => ({
+                    ...previous,
+                    password: event.target.value,
+                  }))
                 }
               />
             </label>
+
             {error ? <div className="inline-feedback is-error">{error}</div> : null}
+
             <button className="primary-button" disabled={loading} type="submit">
-              {loading ? "登录中..." : "登录并进入工作台"}
+              {loading ? "登录中..." : "进入创作工作台"}
               {loading ? null : <ArrowRight size={16} />}
             </button>
-            <div className="auth-action-row">
+
+            <div className="auth-form-actions">
               <Link href="/register" className="ghost-button">
                 创建账号
               </Link>
-              <div className="field-note">
+              <Link href="/" className="auth-inline-link">
-                <Sparkles size={14} />
+                返回首页
-                新用户注册后可按后台规则领取初始积分。
+              </Link>
-              </div>
             </div>
           </div>
         </form>

frontend-web/src/app/page.tsx

@@ -1,6 +1,189 @@
-import { redirect } from "next/navigation";
+import {
+  ArrowRight,
+  CirclePlay,
+  Coins,
+  FolderKanban,
+  ImagePlus,
+  ShieldCheck,
+  Sparkles,
+} from "lucide-react";
+import Link from "next/link";
+
+const productHighlights = [
+  {
+    title: "生成工作台",
+    copy: "把模型、提示词、时长、比例和素材引用收进一个创作面板。",
+    icon: Sparkles,
+  },
+  {
+    title: "素材系统",
+    copy: "图片、视频、音频参考素材统一入库，创作时直接调用。",
+    icon: ImagePlus,
+  },
+  {
+    title: "任务追踪",
+    copy: "生成状态实时刷新，结果视频、积分消耗和任务详情一屏可见。",
+    icon: FolderKanban,
+  },
+  {
+    title: "积分与增长",
+    copy: "充值、兑换码、注册奖励和邀请关系形成完整的商业闭环。",
+    icon: Coins,
+  },
+];
 
 export default function HomePage() {
-  redirect("/workspace/create");
+  return (
-}
+    <main className="marketing-home">
+      <header className="marketing-nav">
+        <div className="marketing-logo">AIVideo</div>
+        <nav className="marketing-nav-links">
+          <a href="#product">产品能力</a>
+          <a href="#workflow">创作流程</a>
+          <a href="#ops">运营控制</a>
+        </nav>
+        <div className="marketing-nav-actions">
+          <Link href="/login" className="marketing-link-button">
+            登录
+          </Link>
+          <Link href="/register" className="marketing-primary-button">
+            立即体验
+          </Link>
+        </div>
+      </header>
 
+      <section className="marketing-hero">
+        <div className="marketing-hero-copy">
+          <span className="marketing-kicker">AI VIDEO PLATFORM</span>
+          <h1>把视频生成、素材管理与运营链路，做成可交付的产品级体验。</h1>
+          <p>
+            AIVideo 把用户创作端与后台控制台收进同一套系统里，既能让普通用户顺滑出片，也能让运营团队管理模型、价格、订单与任务健康度。
+          </p>
+          <div className="marketing-hero-actions">
+            <Link href="/register" className="marketing-primary-button">
+              免费开始
+              <ArrowRight size={16} />
+            </Link>
+            <Link href="/login" className="marketing-secondary-button">
+              进入工作台
+            </Link>
+          </div>
+          <div className="marketing-stat-row">
+            <div>
+              <strong>一体化</strong>
+              <span>创作、素材、任务、钱包和后台控制台</span>
+            </div>
+            <div>
+              <strong>更少跳转</strong>
+              <span>用户从提示词到成片提交只需要一条主流程</span>
+            </div>
+            <div>
+              <strong>可商业化</strong>
+              <span>支持积分、充值、兑换和邀请奖励体系</span>
+            </div>
+          </div>
+        </div>
+
+        <div className="marketing-stage">
+          <div className="marketing-stage-card marketing-stage-card-dark">
+            <div className="marketing-stage-label">Creator Workspace</div>
+            <h2>一块真正能交付创作结果的 AI 工作台</h2>
+            <p>
+              把模型选择、提示词、素材引用和任务提交放在同一屏里，让用户不需要理解底层供应商和协议，也能稳定完成视频生产。
+            </p>
+            <div className="marketing-chip-row">
+              <span>Text to video</span>
+              <span>Asset references</span>
+              <span>Task polling</span>
+            </div>
+          </div>
+
+          <div className="marketing-stage-grid">
+            <div className="marketing-stage-card">
+              <CirclePlay size={18} />
+              <strong>从提交到成片</strong>
+              <span>任务页持续刷新进度，成功后直接打开结果视频。</span>
+            </div>
+            <div className="marketing-stage-card">
+              <Coins size={18} />
+              <strong>从增长到付费</strong>
+              <span>积分冻结、充值订单、兑换码和奖励规则统一串联。</span>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section className="marketing-section marketing-section-light" id="product">
+        <div className="marketing-section-copy">
+          <span className="marketing-kicker">Product Capabilities</span>
+          <h2>对用户足够简单，对业务足够完整。</h2>
+          <p>
+            不是一个只有生成接口的 DEMO，而是一套从创作体验到运营规则都能继续打磨和落地的产品基础设施。
+          </p>
+        </div>
+        <div className="marketing-tile-grid">
+          {productHighlights.map((item) => {
+            const Icon = item.icon;
+            return (
+              <article className="marketing-tile" key={item.title}>
+                <div className="marketing-tile-icon">
+                  <Icon size={20} />
+                </div>
+                <h3>{item.title}</h3>
+                <p>{item.copy}</p>
+              </article>
+            );
+          })}
+        </div>
+      </section>
+
+      <section className="marketing-section marketing-section-dark" id="workflow">
+        <div className="marketing-section-copy">
+          <span className="marketing-kicker">Workflow</span>
+          <h2>把复杂的视频生成流程，压缩成用户能理解的三步。</h2>
+        </div>
+        <div className="marketing-flow-grid">
+          <div className="marketing-flow-card">
+            <span>01</span>
+            <strong>选择模型与输出规格</strong>
+            <p>平台只暴露对创作真正重要的参数，不把底层技术复杂度扔给用户。</p>
+          </div>
+          <div className="marketing-flow-card">
+            <span>02</span>
+            <strong>组织提示词和参考素材</strong>
+            <p>提示词、图片、视频和音频素材在同一工作台里互相配合。</p>
+          </div>
+          <div className="marketing-flow-card">
+            <span>03</span>
+            <strong>提交任务并持续跟踪</strong>
+            <p>任务记录页承接状态轮询、扣费结果和最终视频交付。</p>
+          </div>
+        </div>
+      </section>
+
+      <section className="marketing-section marketing-section-light" id="ops">
+        <div className="marketing-ops-shell">
+          <div className="marketing-section-copy">
+            <span className="marketing-kicker">Operations Console</span>
+            <h2>面向运营和业务团队的控制台，也在同一套设计语言里。</h2>
+            <p>
+              用户端强调体验，后台强调秩序。两者共享同一业务模型，但在视觉气质上各自准确，不互相污染。
+            </p>
+          </div>
+          <div className="marketing-ops-card">
+            <ShieldCheck size={20} />
+            <strong>用户、模型、价格、任务、回调与系统配置</strong>
+            <p>
+              运营后台不是附属页面，而是产品交付的一部分。AIVideo
+              从一开始就把增长、付费和模型治理一起纳入设计。
+            </p>
+            <Link href="/admin/login" className="marketing-link-inline">
+              进入管理员登录
+              <ArrowRight size={14} />
+            </Link>
+          </div>
+        </div>
+      </section>
+    </main>
+  );
+}

frontend-web/src/components/admin-shell.tsx

@@ -21,20 +21,20 @@ import { useEffect, useMemo } from "react";
 import { api } from "@/lib/api";
 
 const navigation = [
-  { href: "/admin/dashboard", label: "仪表盘", description: "查看系统总览、支付与任务健康度", icon: ChartColumnBig },
+  { href: "/admin/dashboard", label: "OVERVIEW", title: "系统总览", description: "查看平台总览、支付与任务健康度。", icon: ChartColumnBig },
-  { href: "/admin/users", label: "用户管理", description: "维护用户状态、余额与基本资料", icon: Users },
+  { href: "/admin/users", label: "USERS", title: "用户管理", description: "维护用户状态、余额与资料。", icon: Users },
-  { href: "/admin/recharge-orders", label: "充值订单", description: "跟踪充值流转与支付状态", icon: Coins },
+  { href: "/admin/recharge-orders", label: "ORDERS", title: "充值订单", description: "跟踪充值流转与支付状态。", icon: Coins },
-  { href: "/admin/redeem-codes", label: "兑换密钥", description: "批量生成、停用与审计兑换码", icon: KeySquare },
+  { href: "/admin/redeem-codes", label: "REDEEM", title: "兑换密钥", description: "管理兑换码的创建、停用和审计。", icon: KeySquare },
-  { href: "/admin/growth-rules", label: "增长奖励", description: "配置注册奖励与邀请返利规则", icon: Link2 },
+  { href: "/admin/growth-rules", label: "GROWTH", title: "增长奖励", description: "配置注册奖励与邀请返利规则。", icon: Link2 },
-  { href: "/admin/invite-relations", label: "邀请关系", description: "查看邀请码链路与归因结果", icon: Link2 },
+  { href: "/admin/invite-relations", label: "INVITES", title: "邀请关系", description: "查看邀请码链路与归因结果。", icon: Link2 },
-  { href: "/admin/provider-accounts", label: "供应商账号", description: "管理各供应商 baseUrl 与鉴权信息", icon: Workflow },
+  { href: "/admin/provider-accounts", label: "ACCOUNTS", title: "供应商账号", description: "管理供应商账号和鉴权信息。", icon: Workflow },
-  { href: "/admin/provider-models", label: "供应商模型", description: "维护供应商模型能力与协议", icon: Blocks },
+  { href: "/admin/provider-models", label: "MODELS", title: "供应商模型", description: "维护供应商模型能力与协议。", icon: Blocks },
-  { href: "/admin/video-models", label: "平台模型", description: "定义前台可见的统一模型层", icon: Package2 },
+  { href: "/admin/video-models", label: "CATALOG", title: "平台模型", description: "定义前台可见的统一模型层。", icon: Package2 },
-  { href: "/admin/video-model-bindings", label: "模型绑定", description: "决定平台模型到供应商模型的路由", icon: Workflow },
+  { href: "/admin/video-model-bindings", label: "ROUTING", title: "模型绑定", description: "决定平台模型到供应商模型的路由。", icon: Workflow },
-  { href: "/admin/pricing-rules", label: "价格规则", description: "按模型与版本维护积分定价", icon: Coins },
+  { href: "/admin/pricing-rules", label: "PRICING", title: "价格规则", description: "按模型与版本维护积分定价。", icon: Coins },
-  { href: "/admin/video-tasks", label: "视频任务", description: "处理异常任务与追踪回调结果", icon: Workflow },
+  { href: "/admin/video-tasks", label: "TASKS", title: "视频任务", description: "处理异常任务与追踪执行结果。", icon: Workflow },
-  { href: "/admin/callback-logs", label: "回调日志", description: "查看供应商回调负载与重放线索", icon: ChartColumnBig },
+  { href: "/admin/callback-logs", label: "CALLBACKS", title: "回调日志", description: "查看供应商回调负载与异常线索。", icon: ChartColumnBig },
-  { href: "/admin/system-config", label: "系统配置", description: "维护站点公告、策略与公开配置", icon: Settings2 },
+  { href: "/admin/system-config", label: "CONFIG", title: "系统配置", description: "维护站点和策略配置。", icon: Settings2 },
 ];
 
 export function AdminShell({ children }: { children: React.ReactNode }) {
@@ -61,119 +61,71 @@ export function AdminShell({ children }: { children: React.ReactNode }) {
 
   if (meQuery.isLoading || !meQuery.data) {
     return (
-      <div className="fullscreen-shell">
+      <div className="fullscreen-shell admin-loading-shell">
         <div className="pulse-card">正在校验管理员身份...</div>
       </div>
     );
   }
 
   return (
-    <div className="shell-grid shell-grid-admin">
+    <div className="admin-app-shell">
-      <aside className="shell-sidebar">
+      <aside className="admin-rail">
-        <div className="brand-block brand-block-admin">
+        <div className="admin-rail-brand">
-          <div className="brand-visual" aria-hidden="true">
+          <span className="admin-rail-kicker">AIVIDEO CONTROL</span>
-            <span className="brand-orb brand-orb-primary" />
+          <h1>AIVideo</h1>
-            <span className="brand-orb brand-orb-secondary" />
+          <p>统一管理模型、价格、订单、奖励和任务治理链路。</p>
-          </div>
-          <span className="brand-kicker">AIVIDEO ADMIN</span>
-          <h1>控制后台</h1>
-          <p>围绕模型、价格、奖励、订单和任务链路做统一配置、审计和异常处置，用更产品化的矩阵视角管理能力层。</p>
-          <div className="brand-pill-row">
-            <span className="brand-pill">Ops control</span>
-            <span className="brand-pill">Pricing</span>
-            <span className="brand-pill">Capability routing</span>
-          </div>
         </div>
 
-        <div className="sidebar-note">
+        <nav className="admin-rail-nav">
-          <div className="sidebar-note-label">Operations Matrix</div>
+          {navigation.map((item) => {
-          <div className="sidebar-metrics">
-            <div className="sidebar-metric">
-              <strong>Models</strong>
-              <span>平台模型与供应商协议</span>
-            </div>
-            <div className="sidebar-metric">
-              <strong>Economy</strong>
-              <span>充值、价格、奖励规则</span>
-            </div>
-            <div className="sidebar-metric">
-              <strong>Audit</strong>
-              <span>任务回调、关系链和配置变更</span>
-            </div>
-          </div>
-        </div>
-
-        <nav className="sidebar-nav">
-          {navigation.map((item, index) => {
             const Icon = item.icon;
             return (
               <Link
                 key={item.href}
                 href={item.href}
-                className={clsx("nav-item", {
+                className={clsx("admin-rail-link", {
                   active: pathname.startsWith(item.href),
                 })}
               >
-                <Icon size={18} />
+                <Icon size={15} />
-                <div>
+                <span>{item.label}</span>
-                  <span>{item.label}</span>
-                  <small>{item.description}</small>
-                </div>
-                <div className="nav-index">{String(index + 1).padStart(2, "0")}</div>
               </Link>
             );
           })}
         </nav>
 
-        <div className="profile-card">
+        <div className="admin-rail-footer">
-          <div className="profile-card-main">
+          <div className="admin-rail-user">
-            <div className="profile-avatar">
+            <strong>{(meQuery.data as { nickname: string }).nickname}</strong>
-              {String((meQuery.data as { nickname: string }).nickname ?? "AD")
+            <span>{(meQuery.data as { username: string }).username}</span>
-                .slice(0, 2)
-                .toUpperCase()}
-            </div>
-            <div className="profile-name">
-              {(meQuery.data as { nickname: string }).nickname}
-            </div>
-            <div className="profile-meta">
-              {(meQuery.data as { username: string }).username}
-            </div>
-          </div>
-          <div className="profile-card-stats">
-            <div className="profile-stat">
-              <span>权限</span>
-              <strong>Admin</strong>
-            </div>
-            <div className="profile-stat">
-              <span>模式</span>
-              <strong>Control</strong>
-            </div>
           </div>
           <button
-            className="ghost-button"
+            className="ghost-button compact-button"
             onClick={async () => {
               await api.post("/api/v1/admin/auth/logout");
               router.replace("/admin/login");
             }}
+            type="button"
           >
-            <LogOut size={16} />
+            <LogOut size={14} />
-            退出
+            SIGN OUT
           </button>
         </div>
       </aside>
 
-      <main className="shell-main">
+      <main className="admin-main-shell">
-        <header className="shell-header">
+        <header className="admin-page-hero">
-          <div className="shell-header-content">
+          <div>
-            <div className="header-kicker">Operations Console</div>
+            <span className="admin-page-kicker">OPERATIONS CONSOLE</span>
-            <h2>{current.label}</h2>
+            <h2>{current.title}</h2>
-            <p className="shell-header-copy">{current.description}</p>
+            <p>{current.description}</p>
           </div>
-          <div className="shell-header-meta">
+          <div className="admin-page-tags">
-            <div className="header-chip header-chip-success">管理员会话已建立</div>
+            <span>LIVE SESSION</span>
-            <div className="header-chip">统一配置 / 审计 / 处置</div>
+            <span>RULES / TASKS / PRICING</span>
           </div>
         </header>
+
         <section className="shell-content">{children}</section>
       </main>
     </div>

frontend-web/src/components/register-form.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { startTransition, useState } from "react";
-import { ArrowRight, Coins, Gift, Link2, Sparkles } from "lucide-react";
+import { ArrowRight, Coins, Gift, Link2 } from "lucide-react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 
@@ -36,58 +36,43 @@ export function RegisterForm({ inviteCode = "" }: { inviteCode?: string }) {
   }
 
   return (
-    <div className="auth-grid">
+    <div className="auth-page auth-page-user">
-      <section className="auth-hero auth-hero-studio">
+      <section className="auth-showcase auth-showcase-user">
-        <div className="auth-copy">
+        <div className="auth-showcase-copy">
-          <div className="eyebrow">New Account</div>
+          <span className="auth-showcase-kicker">CREATE ACCOUNT</span>
-          <h1 className="headline">用一个账号，串起创作、积分、邀请奖励和素材管理。</h1>
+          <h1>把用户注册、增长奖励和首次创作，接成一个更完整的首日体验。</h1>
-          <p className="subcopy">
+          <p>
-            注册后会读取后台增长规则发放奖励；如果带邀请码进入，则会同步建立邀请关系，让增长链路也保持和创作体验一样清爽直接。
+            新用户不该在一堆跳转里迷失。注册后直接进入创作端，同时让奖励、邀请和钱包体系自然接入首登流程。
           </p>
-          <div className="auth-chip-row">
-            <span className="auth-chip">Signup rewards</span>
-            <span className="auth-chip">Invite tracking</span>
-            <span className="auth-chip">Wallet ready</span>
-          </div>
         </div>
-        <div className="showcase-stack">
+
-          <div className="showcase-card showcase-card-hero">
+        <div className="auth-showcase-grid">
-            <div className="toolbar">
+          <article className="auth-showcase-card">
-              <span className="status-badge tone-soft">Growth loop</span>
+            <Gift size={18} />
-              <span className="mini-note">Reward rules active</span>
+            <strong>注册奖励</strong>
-            </div>
+            <span>按后台规则自动发放，不在前台写死业务策略。</span>
-            <h3>把增长规则自然接到用户首登体验里</h3>
+          </article>
-            <p className="muted">
+          <article className="auth-showcase-card">
-              注册成功后直接进入工作台，不需要在多个页面之间跳转，就能继续上传素材、创建任务和消费积分。
+            <Link2 size={18} />
-            </p>
+            <strong>邀请归因</strong>
-          </div>
+            <span>带邀请码注册即可建立邀请关系和后续奖励链路。</span>
-          <div className="showcase-card-grid">
+          </article>
-            <article className="showcase-card">
+          <article className="auth-showcase-card">
-              <Gift size={18} />
+            <Coins size={18} />
-              <strong>注册奖励自动发放</strong>
+            <strong>钱包可用</strong>
-              <span>遵循后台增长配置，不在前台写死业务规则。</span>
+            <span>注册完成后立即进入创作、充值和兑换流程。</span>
-            </article>
+          </article>
-            <article className="showcase-card">
-              <Link2 size={18} />
-              <strong>邀请码自动建链</strong>
-              <span>注册时携带邀请码即可完成邀请归因。</span>
-            </article>
-            <article className="showcase-card">
-              <Coins size={18} />
-              <strong>积分钱包即刻可用</strong>
-              <span>注册完成后可直接进入充值、兑换和视频生成流程。</span>
-            </article>
-          </div>
         </div>
       </section>
 
-      <section className="fullscreen-shell">
+      <section className="auth-form-column">
-        <form className="auth-card auth-card-strong" onSubmit={handleSubmit}>
+        <form className="auth-form-card" onSubmit={handleSubmit}>
-          <div className="auth-card-head">
+          <div className="auth-form-head">
-            <div className="eyebrow">Create Account</div>
+            <span className="auth-form-kicker">Get Started</span>
-            <h2>注册用户</h2>
+            <h2>创建用户账号</h2>
-            <p className="muted">创建账号后会直接进入创作端工作台。</p>
+            <p>注册成功后将直接进入创作工作台。</p>
           </div>
+
           <div className="form-stack">
             <label className="field-label">
               邮箱账号
@@ -95,7 +80,10 @@ export function RegisterForm({ inviteCode = "" }: { inviteCode?: string }) {
                 placeholder="user@example.com"
                 value={form.account}
                 onChange={(event) =>
-                  setForm((previous) => ({ ...previous, account: event.target.value }))
+                  setForm((previous) => ({
+                    ...previous,
+                    account: event.target.value,
+                  }))
                 }
               />
             </label>
@@ -105,7 +93,10 @@ export function RegisterForm({ inviteCode = "" }: { inviteCode?: string }) {
                 type="password"
                 value={form.password}
                 onChange={(event) =>
-                  setForm((previous) => ({ ...previous, password: event.target.value }))
+                  setForm((previous) => ({
+                    ...previous,
+                    password: event.target.value,
+                  }))
                 }
               />
             </label>
@@ -114,23 +105,28 @@ export function RegisterForm({ inviteCode = "" }: { inviteCode?: string }) {
               <input
                 value={form.inviteCode}
                 onChange={(event) =>
-                  setForm((previous) => ({ ...previous, inviteCode: event.target.value }))
+                  setForm((previous) => ({
+                    ...previous,
+                    inviteCode: event.target.value,
+                  }))
                 }
               />
             </label>
+
             {error ? <div className="inline-feedback is-error">{error}</div> : null}
+
             <button className="primary-button" disabled={loading} type="submit">
-              {loading ? "注册中..." : "注册并领取初始积分"}
+              {loading ? "注册中..." : "注册并进入工作台"}
               {loading ? null : <ArrowRight size={16} />}
             </button>
-            <div className="auth-action-row">
+
+            <div className="auth-form-actions">
               <Link href="/login" className="ghost-button">
                 返回登录
               </Link>
-              <div className="field-note">
+              <Link href="/" className="auth-inline-link">
-                <Sparkles size={14} />
+                返回首页
-                若通过邀请链接进入，邀请码会自动带入当前表单。
+              </Link>
-              </div>
             </div>
           </div>
         </form>

frontend-web/src/components/site-shell.tsx

@@ -2,17 +2,7 @@
 
 import { useQuery } from "@tanstack/react-query";
 import clsx from "clsx";
-import {
+import { Activity, LogOut } from "lucide-react";
-  Activity,
-  Coins,
-  FolderKanban,
-  ImagePlus,
-  LogOut,
-  Sparkles,
-  Ticket,
-  UserRound,
-  Users,
-} from "lucide-react";
 import Link from "next/link";
 import { usePathname, useRouter } from "next/navigation";
 import { useEffect, useMemo } from "react";
@@ -23,51 +13,39 @@ import type { UserProfile } from "@/lib/types";
 const navigation = [
   {
     href: "/workspace/create",
-    label: "工作台",
+    label: "创作",
-    description: "生成参数、提示词与素材联动",
+    title: "生成工作台",
-    icon: Sparkles,
+    description: "组织模型、提示词、素材和任务提交。",
   },
   {
     href: "/workspace/tasks",
-    label: "任务记录",
+    label: "任务",
-    description: "查看队列、状态轮询与结果视频",
+    title: "任务记录",
-    icon: FolderKanban,
+    description: "追踪生成状态、扣费结果和最终视频。",
   },
   {
     href: "/workspace/assets",
-    label: "素材管理",
+    label: "素材",
-    description: "上传图片、视频和音频素材",
+    title: "素材管理",
-    icon: ImagePlus,
+    description: "统一管理图片、视频和音频参考素材。",
   },
   {
     href: "/wallet",
-    label: "钱包概览",
+    label: "钱包",
-    description: "查看可用积分和冻结明细",
+    title: "钱包概览",
-    icon: Coins,
+    description: "查看积分、充值和兑换的资金流转。",
-  },
-  {
-    href: "/wallet/recharge",
-    label: "充值中心",
-    description: "采购积分，补足生产额度",
-    icon: Coins,
-  },
-  {
-    href: "/wallet/redeem",
-    label: "兑换密钥",
-    description: "使用兑换码快速充值",
-    icon: Ticket,
   },
   {
     href: "/invite",
-    label: "邀请中心",
+    label: "邀请",
-    description: "管理关系链与推广奖励",
+    title: "邀请中心",
-    icon: Users,
+    description: "处理邀请关系和增长奖励链路。",
   },
   {
     href: "/profile",
-    label: "个人资料",
+    label: "账户",
-    description: "维护账户信息与展示名",
+    title: "个人资料",
-    icon: UserRound,
+    description: "维护基础资料和账户身份信息。",
   },
 ];
 
@@ -89,11 +67,12 @@ export function SiteShell({ children }: { children: React.ReactNode }) {
     }
   }, [error, router]);
 
-  const title = useMemo(() => {
+  const current = useMemo(() => {
-    const current = [...navigation]
+    return (
-      .sort((left, right) => right.href.length - left.href.length)
+      [...navigation]
-      .find((item) => matchesPath(pathname, item.href));
+        .sort((left, right) => right.href.length - left.href.length)
-    return current ?? navigation[0];
+        .find((item) => matchesPath(pathname, item.href)) ?? navigation[0]
+    );
   }, [pathname]);
 
   if (isLoading || !data) {
@@ -105,116 +84,79 @@ export function SiteShell({ children }: { children: React.ReactNode }) {
   }
 
   return (
-    <div className="shell-grid shell-grid-studio">
+    <div className="site-app-shell">
-      <aside className="shell-sidebar">
+      <header className="site-topbar">
-        <div className="brand-block brand-block-studio">
+        <div className="site-brand-block">
-          <div className="brand-visual" aria-hidden="true">
+          <Link className="site-brand" href="/">
-            <span className="brand-orb brand-orb-primary" />
+            AIVideo
-            <span className="brand-orb brand-orb-secondary" />
+          </Link>
-          </div>
+          <span className="site-brand-subtitle">AI Video Platform</span>
-          <span className="brand-kicker">AI VIDEO STUDIO</span>
-          <h1>AIVideo</h1>
-          <p>把模型路由、素材管理和任务轮询收进一块轻白画布，让每个创作动作都像切换一个 AI 能力卡片。</p>
-          <div className="brand-pill-row">
-            <span className="brand-pill">Creative matrix</span>
-            <span className="brand-pill">Mock providers</span>
-            <span className="brand-pill">Local assets</span>
-          </div>
-          <div className="brand-status">
-            <span className="status-dot" />
-            创作链路在线
-          </div>
         </div>
 
-        <div className="sidebar-note">
+        <nav className="site-topnav">
-          <div className="sidebar-note-label">Capability Grid</div>
+          {navigation.map((item) => (
-          <div className="sidebar-metrics">
+            <Link
-            <div className="sidebar-metric">
+              key={item.href}
-              <strong>Prompt</strong>
+              href={item.href}
-              <span>主体、动作、镜头和情绪描述</span>
+              className={clsx("site-topnav-link", {
-            </div>
+                active: current.href === item.href,
-            <div className="sidebar-metric">
+              })}
-              <strong>Assets</strong>
+            >
-              <span>图片、视频、音频参考素材</span>
+              {item.label}
-            </div>
+            </Link>
-            <div className="sidebar-metric">
+          ))}
-              <strong>Tasks</strong>
-              <span>轮询进度、冻结扣费和结果回收</span>
-            </div>
-          </div>
-        </div>
-
-        <nav className="sidebar-nav">
-          {navigation.map((item, index) => {
-            const Icon = item.icon;
-            return (
-              <Link
-                key={item.href}
-                href={item.href}
-                className={clsx("nav-item", {
-                  active: title.href === item.href,
-                })}
-              >
-                <Icon size={18} />
-                <div>
-                  <span>{item.label}</span>
-                  <small>{item.description}</small>
-                </div>
-                <div className="nav-index">{String(index + 1).padStart(2, "0")}</div>
-              </Link>
-            );
-          })}
         </nav>
 
-        <div className="profile-card">
+        <div className="site-userbar">
-          <div className="profile-card-main">
+          <div className="site-userbar-meta">
-            <div className="profile-avatar">
+            <strong>{data.nickname || data.username}</strong>
-              {(data.nickname || data.username || "AI")
+            <span>{data.email}</span>
-                .slice(0, 2)
-                .toUpperCase()}
-            </div>
-            <div className="profile-name">{data.nickname || data.username}</div>
-            <div className="profile-meta">{data.email}</div>
-          </div>
-          <div className="profile-card-stats">
-            <div className="profile-stat">
-              <span>身份</span>
-              <strong>Creator</strong>
-            </div>
-            <div className="profile-stat">
-              <span>ID</span>
-              <strong>{(data.publicId || "AIVIDEO").slice(-8)}</strong>
-            </div>
           </div>
           <button
-            className="ghost-button"
+            className="ghost-button compact-button"
             onClick={async () => {
               await api.post("/api/v1/auth/logout");
               router.replace("/login");
             }}
+            type="button"
           >
-            <LogOut size={16} />
+            <LogOut size={14} />
             退出
           </button>
         </div>
-      </aside>
+      </header>
 
-      <main className="shell-main">
+      <main className="site-main-shell">
-        <header className="shell-header">
+        <section className="site-page-hero">
-          <div className="shell-header-content">
+          <div className="site-page-copy">
-            <div className="header-kicker">Creative Ops Console</div>
+            <span className="header-kicker">Creative Workspace</span>
-            <h2>{title.label}</h2>
+            <h1>{current.title}</h1>
-            <p className="shell-header-copy">{title.description}</p>
+            <p>{current.description}</p>
           </div>
-          <div className="shell-header-meta">
+          <div className="site-page-meta">
             <div className="header-chip header-chip-success">
               <Activity size={14} />
-              会话正常
+              服务可用
             </div>
-            <div className="header-chip">{data.publicId || "UNAVAILABLE"}</div>
+            <div className="header-chip">{data.publicId || "USER"}</div>
-            <div className="header-chip">本地素材 / 本地存储 / mock 供应商</div>
           </div>
-        </header>
+        </section>
+
+        <section className="site-highlight-strip">
+          <div className="site-highlight-card">
+            <span>创作体验</span>
+            <strong>提示词、素材与模型同屏协作</strong>
+          </div>
+          <div className="site-highlight-card">
+            <span>交付链路</span>
+            <strong>任务追踪、结果视频和积分消耗可回看</strong>
+          </div>
+          <div className="site-highlight-card">
+            <span>产品增长</span>
+            <strong>充值、兑换和邀请奖励形成闭环</strong>
+          </div>
+        </section>
+
         <section className="shell-content">{children}</section>
       </main>
     </div>