feat: refresh frontend visual design

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

@@ -16,25 +16,25 @@ import {
 } from "lucide-react";
 import Link from "next/link";
 import { usePathname, useRouter } from "next/navigation";
-import { useEffect } from "react";
+import { useEffect, useMemo } from "react";
 
 import { api } from "@/lib/api";
 
 const navigation = [
-  { href: "/admin/dashboard", label: "仪表盘", icon: ChartColumnBig },
-  { href: "/admin/users", label: "用户管理", icon: Users },
-  { href: "/admin/recharge-orders", label: "充值订单", icon: Coins },
-  { href: "/admin/redeem-codes", label: "兑换密钥", icon: KeySquare },
-  { href: "/admin/growth-rules", label: "增长奖励", icon: Link2 },
-  { href: "/admin/invite-relations", label: "邀请关系", icon: Link2 },
-  { href: "/admin/provider-accounts", label: "供应商账号", icon: Workflow },
-  { href: "/admin/provider-models", label: "供应商模型", icon: Blocks },
-  { href: "/admin/video-models", label: "平台模型", icon: Package2 },
-  { href: "/admin/video-model-bindings", label: "模型绑定", icon: Workflow },
-  { href: "/admin/pricing-rules", label: "价格规则", icon: Coins },
-  { href: "/admin/video-tasks", label: "视频任务", icon: Workflow },
-  { href: "/admin/callback-logs", label: "回调日志", icon: ChartColumnBig },
-  { href: "/admin/system-config", label: "系统配置", icon: Settings2 },
+  { href: "/admin/dashboard", label: "仪表盘", description: "查看系统总览、支付与任务健康度", icon: ChartColumnBig },
+  { href: "/admin/users", label: "用户管理", description: "维护用户状态、余额与基本资料", icon: Users },
+  { href: "/admin/recharge-orders", label: "充值订单", description: "跟踪充值流转与支付状态", icon: Coins },
+  { href: "/admin/redeem-codes", label: "兑换密钥", description: "批量生成、停用与审计兑换码", icon: KeySquare },
+  { href: "/admin/growth-rules", label: "增长奖励", description: "配置注册奖励与邀请返利规则", icon: Link2 },
+  { href: "/admin/invite-relations", label: "邀请关系", description: "查看邀请码链路与归因结果", icon: Link2 },
+  { href: "/admin/provider-accounts", label: "供应商账号", description: "管理各供应商 baseUrl 与鉴权信息", icon: Workflow },
+  { href: "/admin/provider-models", label: "供应商模型", description: "维护供应商模型能力与协议", icon: Blocks },
+  { href: "/admin/video-models", label: "平台模型", description: "定义前台可见的统一模型层", icon: Package2 },
+  { href: "/admin/video-model-bindings", label: "模型绑定", description: "决定平台模型到供应商模型的路由", icon: Workflow },
+  { href: "/admin/pricing-rules", label: "价格规则", description: "按模型与版本维护积分定价", icon: Coins },
+  { href: "/admin/video-tasks", label: "视频任务", description: "处理异常任务与追踪回调结果", icon: Workflow },
+  { href: "/admin/callback-logs", label: "回调日志", description: "查看供应商回调负载与重放线索", icon: ChartColumnBig },
+  { href: "/admin/system-config", label: "系统配置", description: "维护站点公告、策略与公开配置", icon: Settings2 },
 ];
 
 export function AdminShell({ children }: { children: React.ReactNode }) {
@@ -51,6 +51,14 @@ export function AdminShell({ children }: { children: React.ReactNode }) {
     }
   }, [meQuery.error, router]);
 
+  const current = useMemo(
+    () =>
+      [...navigation]
+        .sort((left, right) => right.href.length - left.href.length)
+        .find((item) => pathname.startsWith(item.href)) ?? navigation[0],
+    [pathname],
+  );
+
   if (meQuery.isLoading || !meQuery.data) {
     return (
       <div className="fullscreen-shell">
@@ -60,16 +68,43 @@ export function AdminShell({ children }: { children: React.ReactNode }) {
   }
 
   return (
-    <div className="shell-grid">
+    <div className="shell-grid shell-grid-admin">
       <aside className="shell-sidebar">
-        <div className="brand-block">
+        <div className="brand-block brand-block-admin">
+          <div className="brand-visual" aria-hidden="true">
+            <span className="brand-orb brand-orb-primary" />
+            <span className="brand-orb brand-orb-secondary" />
+          </div>
           <span className="brand-kicker">AIVIDEO ADMIN</span>
           <h1>控制后台</h1>
-          <p>围绕模型、价格、奖励、订单和任务链路进行统一配置与审计。</p>
+          <p>围绕模型、价格、奖励、订单和任务链路做统一配置、审计和异常处置。</p>
+          <div className="brand-pill-row">
+            <span className="brand-pill">Ops control</span>
+            <span className="brand-pill">Pricing</span>
+            <span className="brand-pill">Provider routing</span>
+          </div>
+        </div>
+
+        <div className="sidebar-note">
+          <div className="sidebar-note-label">Operations Grid</div>
+          <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) => {
+          {navigation.map((item, index) => {
             const Icon = item.icon;
             return (
               <Link
@@ -80,14 +115,23 @@ export function AdminShell({ children }: { children: React.ReactNode }) {
                 })}
               >
                 <Icon size={18} />
-                <span>{item.label}</span>
+                <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>
+          <div className="profile-card-main">
+            <div className="profile-avatar">
+              {String((meQuery.data as { nickname: string }).nickname ?? "AD")
+                .slice(0, 2)
+                .toUpperCase()}
+            </div>
             <div className="profile-name">
               {(meQuery.data as { nickname: string }).nickname}
             </div>
@@ -95,6 +139,16 @@ export function AdminShell({ children }: { children: React.ReactNode }) {
               {(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"
             onClick={async () => {
@@ -109,9 +163,19 @@ export function AdminShell({ children }: { children: React.ReactNode }) {
       </aside>
 
       <main className="shell-main">
+        <header className="shell-header">
+          <div className="shell-header-content">
+            <div className="header-kicker">Operations Console</div>
+            <h2>{current.label}</h2>
+            <p className="shell-header-copy">{current.description}</p>
+          </div>
+          <div className="shell-header-meta">
+            <div className="header-chip header-chip-success">管理员会话已建立</div>
+            <div className="header-chip">统一配置 / 审计 / 处置</div>
+          </div>
+        </header>
         <section className="shell-content">{children}</section>
       </main>
     </div>
   );
 }
-

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

@@ -1,6 +1,7 @@
 "use client";
 
 import { startTransition, useState } from "react";
+import { ArrowRight, Coins, Gift, Link2, Sparkles } from "lucide-react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 
@@ -36,24 +37,57 @@ export function RegisterForm({ inviteCode = "" }: { inviteCode?: string }) {
 
   return (
     <div className="auth-grid">
-      <section className="auth-hero">
-        <div>
+      <section className="auth-hero auth-hero-studio">
+        <div className="auth-copy">
           <div className="eyebrow">New Account</div>
-          <h1 className="headline">用一个账号串起充值、任务、邀请奖励和素材管理。</h1>
+          <h1 className="headline">用一个账号，串起创作、积分、邀请奖励和素材管理。</h1>
           <p className="subcopy">
-            注册后会读取后台增长奖励规则，若已开启则自动发放注册积分；如果通过邀请码注册，也会建立邀请关系。
+            注册后会读取后台增长规则发放奖励；如果带邀请码进入，则会同步建立邀请关系，后续消费可自动回传奖励。
           </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="panel">
-          <h3>邀请奖励说明</h3>
-          <p className="muted">被邀请用户首次有效消费成功后，邀请人可自动拿到奖励积分。</p>
+        <div className="showcase-stack">
+          <div className="showcase-card showcase-card-hero">
+            <div className="toolbar">
+              <span className="status-badge tone-soft">Growth loop</span>
+              <span className="mini-note">Reward rules active</span>
+            </div>
+            <h3>把增长规则自然接到用户首登体验里</h3>
+            <p className="muted">
+              注册成功后直接进入工作台，不需要在多个页面之间跳转，就能继续上传素材、创建任务和消费积分。
+            </p>
+          </div>
+          <div className="showcase-card-grid">
+            <article className="showcase-card">
+              <Gift size={18} />
+              <strong>注册奖励自动发放</strong>
+              <span>遵循后台增长配置，不在前台写死业务规则。</span>
+            </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">
-        <form className="auth-card" onSubmit={handleSubmit}>
-          <div className="eyebrow">Create Account</div>
-          <h2 style={{ marginTop: 8 }}>注册用户</h2>
+        <form className="auth-card auth-card-strong" onSubmit={handleSubmit}>
+          <div className="auth-card-head">
+            <div className="eyebrow">Create Account</div>
+            <h2>注册用户</h2>
+            <p className="muted">创建账号后会直接进入创作端工作台。</p>
+          </div>
           <div className="form-stack">
             <label className="field-label">
               邮箱账号
@@ -84,17 +118,23 @@ export function RegisterForm({ inviteCode = "" }: { inviteCode?: string }) {
                 }
               />
             </label>
-            {error ? <div className="muted" style={{ color: "var(--danger)" }}>{error}</div> : null}
+            {error ? <div className="inline-feedback is-error">{error}</div> : null}
             <button className="primary-button" disabled={loading} type="submit">
               {loading ? "注册中..." : "注册并领取初始积分"}
+              {loading ? null : <ArrowRight size={16} />}
             </button>
-            <Link href="/login" className="ghost-button">
-              返回登录
-            </Link>
+            <div className="auth-action-row">
+              <Link href="/login" className="ghost-button">
+                返回登录
+              </Link>
+              <div className="field-note">
+                <Sparkles size={14} />
+                若通过邀请链接进入，邀请码会自动带入当前表单。
+              </div>
+            </div>
           </div>
         </form>
       </section>
     </div>
   );
 }
-

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

@@ -105,20 +105,47 @@ export function SiteShell({ children }: { children: React.ReactNode }) {
   }
 
   return (
-    <div className="shell-grid">
+    <div className="shell-grid shell-grid-studio">
       <aside className="shell-sidebar">
-        <div className="brand-block">
+        <div className="brand-block brand-block-studio">
+          <div className="brand-visual" aria-hidden="true">
+            <span className="brand-orb brand-orb-primary" />
+            <span className="brand-orb brand-orb-secondary" />
+          </div>
           <span className="brand-kicker">AI VIDEO STUDIO</span>
           <h1>AIVideo</h1>
-          <p>把模型路由、素材管理和任务轮询收进一个暗色工作台，专门给创作流程用。</p>
+          <p>把模型路由、素材管理和任务轮询收进一个电影感工作台，让创作动作像调度镜头一样顺滑。</p>
+          <div className="brand-pill-row">
+            <span className="brand-pill">Source mode</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">
+          <div className="sidebar-note-label">Pipeline Focus</div>
+          <div className="sidebar-metrics">
+            <div className="sidebar-metric">
+              <strong>Prompt</strong>
+              <span>镜头、动作、光感</span>
+            </div>
+            <div className="sidebar-metric">
+              <strong>Assets</strong>
+              <span>图片、视频、音频参考</span>
+            </div>
+            <div className="sidebar-metric">
+              <strong>Tasks</strong>
+              <span>轮询、冻结、结果落盘</span>
+            </div>
+          </div>
+        </div>
+
         <nav className="sidebar-nav">
-          {navigation.map((item) => {
+          {navigation.map((item, index) => {
             const Icon = item.icon;
             return (
               <Link
@@ -133,6 +160,7 @@ export function SiteShell({ children }: { children: React.ReactNode }) {
                   <span>{item.label}</span>
                   <small>{item.description}</small>
                 </div>
+                <div className="nav-index">{String(index + 1).padStart(2, "0")}</div>
               </Link>
             );
           })}
@@ -148,6 +176,16 @@ export function SiteShell({ children }: { children: React.ReactNode }) {
             <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"
             onClick={async () => {
@@ -163,7 +201,7 @@ export function SiteShell({ children }: { children: React.ReactNode }) {
 
       <main className="shell-main">
         <header className="shell-header">
-          <div>
+          <div className="shell-header-content">
             <div className="header-kicker">Creative Ops Console</div>
             <h2>{title.label}</h2>
             <p className="shell-header-copy">{title.description}</p>
@@ -173,7 +211,8 @@ export function SiteShell({ children }: { children: React.ReactNode }) {
               <Activity size={14} />
               会话正常
             </div>
-            <div className="header-chip">{data.publicId}</div>
+            <div className="header-chip">{data.publicId || "UNAVAILABLE"}</div>
+            <div className="header-chip">本地素材 / 本地存储 / mock 供应商</div>
           </div>
         </header>
         <section className="shell-content">{children}</section>