Optimize commercial web UI

frontend-web/src/app/page.tsx

@@ -1,46 +1,71 @@
 import {
   ArrowRight,
-  CirclePlay,
   Coins,
+  Film,
   FolderKanban,
   ImagePlus,
+  LineChart,
+  MonitorPlay,
   ShieldCheck,
   Sparkles,
+  Workflow,
 } from "lucide-react";
+import Image from "next/image";
 import Link from "next/link";
 
 const productHighlights = [
   {
-    title: "生成工作台",
+    title: "面向付费用户的生成工作台",
-    copy: "把模型、提示词、时长、比例和素材引用收进一个创作面板。",
+    copy: "模型、提示词、规格、素材引用和积分预估聚合在同一条创作链路里。",
     icon: Sparkles,
   },
   {
-    title: "素材系统",
+    title: "可复用的多媒体素材资产",
-    copy: "图片、视频、音频参考素材统一入库，创作时直接调用。",
+    copy: "图片、视频、音频统一入库，用户可以在创作时快速检索和引用。",
     icon: ImagePlus,
   },
   {
-    title: "任务追踪",
+    title: "任务、结果和扣费可追溯",
-    copy: "生成状态实时刷新，结果视频、积分消耗和任务详情一屏可见。",
+    copy: "生成状态、结果视频、冻结积分和最终扣费形成完整交付记录。",
     icon: FolderKanban,
   },
   {
-    title: "积分与增长",
+    title: "商业化闭环内置",
-    copy: "充值、兑换码、注册奖励和邀请关系形成完整的商业闭环。",
+    copy: "充值、兑换码、注册奖励和邀请关系已经接入后台规则系统。",
     icon: Coins,
   },
 ];
 
+const workflow = [
+  {
+    step: "01",
+    title: "配置模型与预算",
+    copy: "模型能力、输出规格和积分预估前置展示。",
+  },
+  {
+    step: "02",
+    title: "组织提示词与素材",
+    copy: "用户在同一屏完成提示词、参考图、参考视频和音频引用。",
+  },
+  {
+    step: "03",
+    title: "提交并追踪结果",
+    copy: "任务状态、结果视频、异常信息和扣费记录持续可回看。",
+  },
+];
+
 export default function HomePage() {
   return (
     <main className="marketing-home">
       <header className="marketing-nav">
-        <div className="marketing-logo">AIVideo</div>
+        <Link className="marketing-logo" href="/">
+          <span className="marketing-logo-mark">AI</span>
+          <span>AIVideo</span>
+        </Link>
         <nav className="marketing-nav-links">
-          <a href="#product">产品能力</a>
+          <a href="#product">能力</a>
-          <a href="#workflow">创作流程</a>
+          <a href="#workflow">流程</a>
-          <a href="#ops">运营控制</a>
+          <a href="#ops">后台</a>
         </nav>
         <div className="marketing-nav-actions">
           <Link href="/login" className="marketing-link-button">
@@ -54,14 +79,15 @@ export default function HomePage() {
 
       <section className="marketing-hero">
         <div className="marketing-hero-copy">
-          <span className="marketing-kicker">AI VIDEO PLATFORM</span>
+          <span className="marketing-kicker">Commercial AI Video Platform</span>
-          <h1>把视频生成、素材管理与运营链路，做成可交付的产品级体验。</h1>
+          <h1>AIVideo 商业级 AI 视频生产平台</h1>
           <p>
-            AIVideo 把用户创作端与后台控制台收进同一套系统里，既能让普通用户顺滑出片，也能让运营团队管理模型、价格、订单与任务健康度。
+            从创作工作台、素材库、任务交付到积分付费和运营控制台，AIVideo
+            把 AI 视频生成包装成可以上线、收费、运营和持续治理的完整产品。
           </p>
           <div className="marketing-hero-actions">
             <Link href="/register" className="marketing-primary-button">
-              免费开始
+              创建账号
               <ArrowRight size={16} />
             </Link>
             <Link href="/login" className="marketing-secondary-button">
@@ -70,44 +96,44 @@ export default function HomePage() {
           </div>
           <div className="marketing-stat-row">
             <div>
-              <strong>一体化</strong>
+              <strong>一套前后台</strong>
-              <span>创作、素材、任务、钱包和后台控制台</span>
+              <span>用户端和运营端共用业务链路</span>
             </div>
             <div>
-              <strong>更少跳转</strong>
+              <strong>完整资金流</strong>
-              <span>用户从提示词到成片提交只需要一条主流程</span>
+              <span>积分、充值、兑换与奖励可追踪</span>
             </div>
             <div>
-              <strong>可商业化</strong>
+              <strong>可扩展模型层</strong>
-              <span>支持积分、充值、兑换和邀请奖励体系</span>
+              <span>平台模型和供应商模型解耦管理</span>
             </div>
           </div>
         </div>
 
-        <div className="marketing-stage">
+        <div className="marketing-hero-visual" aria-label="AIVideo 产品界面预览">
-          <div className="marketing-stage-card marketing-stage-card-dark">
+          <Image
-            <div className="marketing-stage-label">Creator Workspace</div>
+            alt="AIVideo 创作工作台界面预览"
-            <h2>一块真正能交付创作结果的 AI 工作台</h2>
+            className="marketing-hero-image"
-            <p>
+            height={1050}
-              把模型选择、提示词、素材引用和任务提交放在同一屏里，让用户不需要理解底层供应商和协议，也能稳定完成视频生产。
+            priority
-            </p>
+            src="/brand/aivideo-hero-preview.png"
-            <div className="marketing-chip-row">
+            width={1600}
-              <span>Text to video</span>
+          />
-              <span>Asset references</span>
+          <div className="marketing-proof-strip">
-              <span>Task polling</span>
+            <div>
+              <MonitorPlay size={18} />
+              <span>创作端</span>
+              <strong>工作台 / 素材 / 任务</strong>
             </div>
+            <div>
+              <LineChart size={18} />
+              <span>增长端</span>
+              <strong>充值 / 邀请 / 兑换</strong>
             </div>
-
+            <div>
-          <div className="marketing-stage-grid">
+              <ShieldCheck size={18} />
-            <div className="marketing-stage-card">
+              <span>运营端</span>
-              <CirclePlay size={18} />
+              <strong>模型 / 定价 / 回调</strong>
-              <strong>从提交到成片</strong>
-              <span>任务页持续刷新进度，成功后直接打开结果视频。</span>
-            </div>
-            <div className="marketing-stage-card">
-              <Coins size={18} />
-              <strong>从增长到付费</strong>
-              <span>积分冻结、充值订单、兑换码和奖励规则统一串联。</span>
             </div>
           </div>
         </div>
@@ -116,9 +142,9 @@ export default function HomePage() {
       <section className="marketing-section marketing-section-light" id="product">
         <div className="marketing-section-copy">
           <span className="marketing-kicker">Product Capabilities</span>
-          <h2>对用户足够简单，对业务足够完整。</h2>
+          <h2>不是接口 Demo，是能继续商业化的产品底座。</h2>
           <p>
-            不是一个只有生成接口的 DEMO，而是一套从创作体验到运营规则都能继续打磨和落地的产品基础设施。
+            用户看到的是简单的创作流程，业务团队得到的是可管理的模型、价格、任务和用户经济系统。
           </p>
         </div>
         <div className="marketing-tile-grid">
@@ -140,24 +166,16 @@ export default function HomePage() {
       <section className="marketing-section marketing-section-dark" id="workflow">
         <div className="marketing-section-copy">
           <span className="marketing-kicker">Workflow</span>
-          <h2>把复杂的视频生成流程，压缩成用户能理解的三步。</h2>
+          <h2>把复杂生成流程压缩成清晰的付费创作路径。</h2>
         </div>
         <div className="marketing-flow-grid">
-          <div className="marketing-flow-card">
+          {workflow.map((item) => (
-            <span>01</span>
+            <div className="marketing-flow-card" key={item.step}>
-            <strong>选择模型与输出规格</strong>
+              <span>{item.step}</span>
-            <p>平台只暴露对创作真正重要的参数，不把底层技术复杂度扔给用户。</p>
+              <strong>{item.title}</strong>
-          </div>
+              <p>{item.copy}</p>
-          <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>
 
@@ -165,18 +183,30 @@ export default function HomePage() {
         <div className="marketing-ops-shell">
           <div className="marketing-section-copy">
             <span className="marketing-kicker">Operations Console</span>
-            <h2>面向运营和业务团队的控制台，也在同一套设计语言里。</h2>
+            <h2>后台不再是附属页面，而是上线后的运营控制面。</h2>
             <p>
-              用户端强调体验，后台强调秩序。两者共享同一业务模型，但在视觉气质上各自准确，不互相污染。
+              管理员可以维护用户、模型、供应商、价格、充值、兑换、回调和异常任务，让产品具备持续运营能力。
             </p>
           </div>
           <div className="marketing-ops-card">
-            <ShieldCheck size={20} />
+            <div className="marketing-ops-grid">
-            <strong>用户、模型、价格、任务、回调与系统配置</strong>
+              <span>
-            <p>
+                <Workflow size={18} />
-              运营后台不是附属页面，而是产品交付的一部分。AIVideo
+                模型路由
-              从一开始就把增长、付费和模型治理一起纳入设计。
+              </span>
-            </p>
+              <span>
+                <Coins size={18} />
+                积分定价
+              </span>
+              <span>
+                <Film size={18} />
+                任务治理
+              </span>
+              <span>
+                <ShieldCheck size={18} />
+                回调审计
+              </span>
+            </div>
             <Link href="/admin/login" className="marketing-link-inline">
               进入管理员登录
               <ArrowRight size={14} />

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

@@ -2,7 +2,17 @@
 
 import { useQuery } from "@tanstack/react-query";
 import clsx from "clsx";
-import { Activity, LogOut } from "lucide-react";
+import {
+  Activity,
+  Clapperboard,
+  FolderKanban,
+  ImagePlus,
+  LogOut,
+  Plus,
+  Share2,
+  UserRound,
+  WalletCards,
+} from "lucide-react";
 import Link from "next/link";
 import { usePathname, useRouter } from "next/navigation";
 import { useEffect, useMemo } from "react";
@@ -16,36 +26,42 @@ const navigation = [
     label: "创作",
     title: "生成工作台",
     description: "组织模型、提示词、素材和任务提交。",
+    icon: Clapperboard,
   },
   {
     href: "/workspace/tasks",
     label: "任务",
     title: "任务记录",
     description: "追踪生成状态、扣费结果和最终视频。",
+    icon: FolderKanban,
   },
   {
     href: "/workspace/assets",
     label: "素材",
     title: "素材管理",
     description: "统一管理图片、视频和音频参考素材。",
+    icon: ImagePlus,
   },
   {
     href: "/wallet",
     label: "钱包",
     title: "钱包概览",
     description: "查看积分、充值和兑换的资金流转。",
+    icon: WalletCards,
   },
   {
     href: "/invite",
     label: "邀请",
     title: "邀请中心",
     description: "处理邀请关系和增长奖励链路。",
+    icon: Share2,
   },
   {
     href: "/profile",
     label: "账户",
     title: "个人资料",
     description: "维护基础资料和账户身份信息。",
+    icon: UserRound,
   },
 ];
 
@@ -88,13 +104,16 @@ export function SiteShell({ children }: { children: React.ReactNode }) {
       <header className="site-topbar">
         <div className="site-brand-block">
           <Link className="site-brand" href="/">
+            <span className="site-brand-mark">AI</span>
             AIVideo
           </Link>
-          <span className="site-brand-subtitle">AI Video Platform</span>
+          <span className="site-brand-subtitle">Creator Console</span>
         </div>
 
         <nav className="site-topnav">
-          {navigation.map((item) => (
+          {navigation.map((item) => {
+            const Icon = item.icon;
+            return (
               <Link
                 key={item.href}
                 href={item.href}
@@ -102,9 +121,11 @@ export function SiteShell({ children }: { children: React.ReactNode }) {
                   active: current.href === item.href,
                 })}
               >
-              {item.label}
+                <Icon size={15} />
+                <span>{item.label}</span>
               </Link>
-          ))}
+            );
+          })}
         </nav>
 
         <div className="site-userbar">
@@ -112,6 +133,10 @@ export function SiteShell({ children }: { children: React.ReactNode }) {
             <strong>{data.nickname || data.username}</strong>
             <span>{data.email}</span>
           </div>
+          <Link href="/workspace/create" className="primary-button compact-button">
+            <Plus size={14} />
+            新建
+          </Link>
           <button
             className="ghost-button compact-button"
             onClick={async () => {
@@ -129,7 +154,7 @@ export function SiteShell({ children }: { children: React.ReactNode }) {
       <main className="site-main-shell">
         <section className="site-page-hero">
           <div className="site-page-copy">
-            <span className="header-kicker">Creative Workspace</span>
+            <span className="header-kicker">Creator Console</span>
             <h1>{current.title}</h1>
             <p>{current.description}</p>
           </div>
@@ -144,16 +169,16 @@ export function SiteShell({ children }: { children: React.ReactNode }) {
 
         <section className="site-highlight-strip">
           <div className="site-highlight-card">
-            <span>创作体验</span>
+            <span>账户余额</span>
-            <strong>提示词、素材与模型同屏协作</strong>
+            <strong>{data.publicId ? "已同步用户身份" : "当前会话有效"}</strong>
           </div>
           <div className="site-highlight-card">
-            <span>交付链路</span>
+            <span>任务链路</span>
-            <strong>任务追踪、结果视频和积分消耗可回看</strong>
+            <strong>生成状态与扣费记录持续可追踪</strong>
           </div>
           <div className="site-highlight-card">
-            <span>产品增长</span>
+            <span>商业系统</span>
-            <strong>充值、兑换和邀请奖励形成闭环</strong>
+            <strong>充值、兑换和邀请奖励已接入</strong>
           </div>
         </section>