feat: initialize aivideo project

frontend-web/.gitignore

@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

frontend-web/AGENTS.md

@@ -0,0 +1,5 @@
+<!-- BEGIN:nextjs-agent-rules -->
+# This is NOT the Next.js you know
+
+This version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in `node_modules/next/dist/docs/` before writing any code. Heed deprecation notices.
+<!-- END:nextjs-agent-rules -->

frontend-web/CLAUDE.md

@@ -0,0 +1 @@
+@AGENTS.md

frontend-web/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

frontend-web/eslint.config.mjs

@@ -0,0 +1,18 @@
+import { defineConfig, globalIgnores } from "eslint/config";
+import nextVitals from "eslint-config-next/core-web-vitals";
+import nextTs from "eslint-config-next/typescript";
+
+const eslintConfig = defineConfig([
+  ...nextVitals,
+  ...nextTs,
+  // Override default ignores of eslint-config-next.
+  globalIgnores([
+    // Default ignores of eslint-config-next:
+    ".next/**",
+    "out/**",
+    "build/**",
+    "next-env.d.ts",
+  ]),
+]);
+
+export default eslintConfig;

frontend-web/next.config.ts

@@ -0,0 +1,11 @@
+import path from "node:path";
+
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  turbopack: {
+    root: path.join(__dirname, ".."),
+  },
+};
+
+export default nextConfig;

frontend-web/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "frontend-web",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "eslint"
+  },
+  "dependencies": {
+    "@tanstack/react-query": "^5.90.5",
+    "clsx": "^2.1.1",
+    "dayjs": "^1.11.13",
+    "lucide-react": "^0.511.0",
+    "next": "16.2.4",
+    "react": "19.2.4",
+    "react-dom": "19.2.4"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "16.2.4",
+    "tailwindcss": "^4",
+    "typescript": "^5"
+  }
+}

frontend-web/postcss.config.mjs

@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+
+export default config;

frontend-web/public/file.svg

@@ -0,0 +1 @@
+<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>

frontend-web/public/globe.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>

frontend-web/public/next.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>

frontend-web/public/vercel.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>

frontend-web/public/window.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>

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

@@ -0,0 +1,97 @@
+"use client";
+
+import { useMutation, useQuery } from "@tanstack/react-query";
+
+import { StatusBadge } from "@/components/status-badge";
+import { api } from "@/lib/api";
+
+type InviteSummary = {
+  inviteCode: string;
+  inviteLink: string;
+  invitedUsers: number;
+  rewardedUsers: number;
+  rewardedPoints: number;
+};
+
+type InviteRelation = {
+  inviteeUserId: number;
+  inviteeNickname: string;
+  rewardStatus: string;
+  rewardPoints: number;
+  createdAt: string;
+  rewardedAt: string | null;
+};
+
+export default function InvitePage() {
+  const summaryQuery = useQuery({
+    queryKey: ["invite-summary"],
+    queryFn: () => api.get<InviteSummary>("/api/v1/invite"),
+  });
+  const relationsQuery = useQuery({
+    queryKey: ["invite-relations"],
+    queryFn: () => api.get<InviteRelation[]>("/api/v1/invite/relations"),
+  });
+  const rewardsQuery = useQuery({
+    queryKey: ["invite-rewards"],
+    queryFn: () => api.get<InviteRelation[]>("/api/v1/invite/rewards"),
+  });
+  const createMutation = useMutation({
+    mutationFn: () => api.post("/api/v1/invite/codes"),
+    onSuccess: () => summaryQuery.refetch(),
+  });
+
+  const summary = summaryQuery.data;
+
+  return (
+    <div className="two-col-grid">
+      <section className="panel">
+        <div className="toolbar">
+          <div>
+            <h3>邀请中心</h3>
+            <p className="muted">邀请码与邀请链接默认在首次访问时自动生成。</p>
+          </div>
+          <button className="ghost-button" onClick={() => createMutation.mutate()}>
+            重新获取邀请码
+          </button>
+        </div>
+        <div className="mini-grid" style={{ marginTop: 18 }}>
+          <div className="list-item">
+            <strong>{summary?.inviteCode}</strong>
+            <div className="muted">邀请码</div>
+          </div>
+          <div className="list-item">
+            <strong>{summary?.invitedUsers ?? 0}</strong>
+            <div className="muted">邀请人数</div>
+          </div>
+          <div className="list-item">
+            <strong>{summary?.rewardedPoints ?? 0}</strong>
+            <div className="muted">累计奖励积分</div>
+          </div>
+        </div>
+        <pre className="code-block" style={{ marginTop: 18 }}>
+          {summary?.inviteLink}
+        </pre>
+      </section>
+
+      <section className="panel">
+        <h3>邀请关系</h3>
+        <div className="list-grid">
+          {relationsQuery.data?.map((item) => (
+            <div className="list-item" key={`${item.inviteeUserId}-${item.createdAt}`}>
+              <div className="toolbar">
+                <strong>{item.inviteeNickname || `用户 #${item.inviteeUserId}`}</strong>
+                <StatusBadge value={item.rewardStatus} />
+              </div>
+              <div className="muted">奖励积分：{item.rewardPoints}</div>
+            </div>
+          ))}
+          <div className="list-item">
+            <strong>已发奖记录</strong>
+            <div className="muted">{rewardsQuery.data?.length ?? 0} 条</div>
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+}
+

frontend-web/src/app/(dashboard)/layout.tsx

@@ -0,0 +1,10 @@
+import { SiteShell } from "@/components/site-shell";
+
+export default function DashboardLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return <SiteShell>{children}</SiteShell>;
+}
+

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

@@ -0,0 +1,97 @@
+"use client";
+
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { useEffect, useState } from "react";
+
+import { api } from "@/lib/api";
+import type { UserProfile } from "@/lib/types";
+
+export default function ProfilePage() {
+  const profileQuery = useQuery({
+    queryKey: ["profile"],
+    queryFn: () => api.get<UserProfile>("/api/v1/profile"),
+  });
+  const [form, setForm] = useState({
+    username: "",
+    nickname: "",
+    avatarUrl: "",
+  });
+
+  useEffect(() => {
+    if (profileQuery.data) {
+      setForm({
+        username: profileQuery.data.username,
+        nickname: profileQuery.data.nickname,
+        avatarUrl: profileQuery.data.avatarUrl,
+      });
+    }
+  }, [profileQuery.data]);
+
+  const mutation = useMutation({
+    mutationFn: () =>
+      api.put("/api/v1/profile", {
+        username: form.username,
+        nickname: form.nickname,
+        avatar_url: form.avatarUrl,
+      }),
+    onSuccess: () => profileQuery.refetch(),
+  });
+
+  return (
+    <div className="two-col-grid">
+      <section className="panel">
+        <h3>个人资料</h3>
+        <div className="form-stack">
+          <label className="field-label">
+            用户名
+            <input
+              value={form.username}
+              onChange={(event) =>
+                setForm((previous) => ({ ...previous, username: event.target.value }))
+              }
+            />
+          </label>
+          <label className="field-label">
+            昵称
+            <input
+              value={form.nickname}
+              onChange={(event) =>
+                setForm((previous) => ({ ...previous, nickname: event.target.value }))
+              }
+            />
+          </label>
+          <label className="field-label">
+            头像 URL
+            <input
+              value={form.avatarUrl}
+              onChange={(event) =>
+                setForm((previous) => ({ ...previous, avatarUrl: event.target.value }))
+              }
+            />
+          </label>
+          <button className="primary-button" onClick={() => mutation.mutate()}>
+            保存资料
+          </button>
+        </div>
+      </section>
+
+      <section className="panel">
+        <h3>账户概览</h3>
+        <div className="list-grid">
+          <div className="list-item">
+            <strong>{profileQuery.data?.publicId}</strong>
+            <div className="muted">公共用户 ID</div>
+          </div>
+          <div className="list-item">
+            <strong>{profileQuery.data?.email}</strong>
+            <div className="muted">注册邮箱</div>
+          </div>
+          <div className="list-item">
+            <strong>{profileQuery.data?.nickname}</strong>
+            <div className="muted">当前昵称</div>
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+}

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

@@ -0,0 +1,61 @@
+"use client";
+
+import { useQuery } from "@tanstack/react-query";
+
+import { StatusBadge } from "@/components/status-badge";
+import { api } from "@/lib/api";
+import type { WalletSummary, WalletTransaction } from "@/lib/types";
+
+export default function WalletOverviewPage() {
+  const walletQuery = useQuery({
+    queryKey: ["wallet"],
+    queryFn: () => api.get<WalletSummary>("/api/v1/wallet"),
+  });
+  const txQuery = useQuery({
+    queryKey: ["wallet-transactions"],
+    queryFn: () => api.get<WalletTransaction[]>("/api/v1/wallet/transactions"),
+  });
+
+  return (
+    <div className="two-col-grid">
+      <section className="stats-grid">
+        <article className="stat-card">
+          <h3>余额</h3>
+          <div className="value">{walletQuery.data?.balancePoints ?? 0}</div>
+          <div className="muted">总积分</div>
+        </article>
+        <article className="stat-card">
+          <h3>冻结</h3>
+          <div className="value">{walletQuery.data?.frozenPoints ?? 0}</div>
+          <div className="muted">任务预扣积分</div>
+        </article>
+        <article className="stat-card">
+          <h3>可用</h3>
+          <div className="value">{walletQuery.data?.availablePoints ?? 0}</div>
+          <div className="muted">当前可消费</div>
+        </article>
+      </section>
+
+      <section className="panel">
+        <h3>积分流水</h3>
+        <div className="list-grid">
+          {txQuery.data?.map((item) => (
+            <div className="list-item" key={item.transactionNo}>
+              <div className="toolbar">
+                <div>
+                  <strong>{item.transactionNo}</strong>
+                  <div className="muted">{item.remark}</div>
+                </div>
+                <StatusBadge value={item.bizType} />
+              </div>
+              <div className="muted" style={{ marginTop: 8 }}>
+                {item.direction} · {item.amountPoints} 积分 · {item.createdAt}
+              </div>
+            </div>
+          ))}
+        </div>
+      </section>
+    </div>
+  );
+}
+

frontend-web/src/app/(dashboard)/wallet/recharge/page.tsx

@@ -0,0 +1,119 @@
+"use client";
+
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { useState } from "react";
+
+import { StatusBadge } from "@/components/status-badge";
+import { api } from "@/lib/api";
+
+type RechargeOptions = {
+  plans: Array<{
+    id: number;
+    name: string;
+    payAmount: string;
+    arrivalPoints: number;
+    bonusPoints: number;
+  }>;
+  channels: Array<{
+    id: number;
+    channelCode: string;
+    channelName: string;
+  }>;
+};
+
+type RechargeOrder = {
+  orderNo: string;
+  payAmount: string;
+  arrivalPoints: number;
+  status: string;
+  paymentChannelCode: string;
+  paidAt: string | null;
+  createdAt: string;
+};
+
+export default function RechargePage() {
+  const [selectedPlanId, setSelectedPlanId] = useState<number>(1);
+  const [selectedChannel, setSelectedChannel] = useState("alipay");
+  const optionsQuery = useQuery({
+    queryKey: ["recharge-options"],
+    queryFn: () => api.get<RechargeOptions>("/api/v1/wallet/recharge-options"),
+  });
+  const ordersQuery = useQuery({
+    queryKey: ["recharge-orders"],
+    queryFn: () => api.get<RechargeOrder[]>("/api/v1/wallet/recharge-orders"),
+  });
+
+  const createMutation = useMutation({
+    mutationFn: () =>
+      api.post<RechargeOrder>("/api/v1/wallet/recharge-orders", {
+        rechargePlanId: selectedPlanId,
+        paymentChannelCode: selectedChannel,
+      }),
+    onSuccess: async (order) => {
+      await api.get(`/api/v1/payments/mock-pay?orderNo=${order.orderNo}`);
+      await ordersQuery.refetch();
+    },
+  });
+
+  return (
+    <div className="two-col-grid">
+      <section className="panel">
+        <h3>充值中心</h3>
+        <div className="list-grid">
+          {optionsQuery.data?.plans.map((plan) => (
+            <label className="list-item" key={plan.id}>
+              <div className="toolbar">
+                <strong>{plan.name}</strong>
+                <input
+                  checked={selectedPlanId === plan.id}
+                  name="plan"
+                  onChange={() => setSelectedPlanId(plan.id)}
+                  type="radio"
+                />
+              </div>
+              <div className="muted">
+                实付 {plan.payAmount} 元，到账 {plan.arrivalPoints} 积分，赠送 {plan.bonusPoints}
+              </div>
+            </label>
+          ))}
+        </div>
+
+        <label className="field-label" style={{ marginTop: 18 }}>
+          支付渠道
+          <select value={selectedChannel} onChange={(event) => setSelectedChannel(event.target.value)}>
+            {optionsQuery.data?.channels.map((channel) => (
+              <option key={channel.id} value={channel.channelCode}>
+                {channel.channelName}
+              </option>
+            ))}
+          </select>
+        </label>
+
+        <button
+          className="primary-button"
+          style={{ marginTop: 18 }}
+          onClick={() => createMutation.mutate()}
+        >
+          创建订单并模拟支付
+        </button>
+      </section>
+
+      <section className="panel">
+        <h3>充值记录</h3>
+        <div className="list-grid">
+          {ordersQuery.data?.map((item) => (
+            <div className="list-item" key={item.orderNo}>
+              <div className="toolbar">
+                <strong>{item.orderNo}</strong>
+                <StatusBadge value={item.status} />
+              </div>
+              <div className="muted" style={{ marginTop: 8 }}>
+                {item.payAmount} 元 to {item.arrivalPoints} 积分 · {item.paymentChannelCode}
+              </div>
+            </div>
+          ))}
+        </div>
+      </section>
+    </div>
+  );
+}

frontend-web/src/app/(dashboard)/wallet/redeem/page.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { useState } from "react";
+
+import { StatusBadge } from "@/components/status-badge";
+import { api, ApiError } from "@/lib/api";
+
+type RedeemRecord = {
+  redeemCode: string;
+  points: number;
+  usedAt: string | null;
+};
+
+export default function RedeemPage() {
+  const [redeemCode, setRedeemCode] = useState("SPRING-2026-ABCD-1234");
+  const [message, setMessage] = useState("");
+  const recordsQuery = useQuery({
+    queryKey: ["redeem-records"],
+    queryFn: () => api.get<RedeemRecord[]>("/api/v1/wallet/redeem-records"),
+  });
+
+  const mutation = useMutation({
+    mutationFn: () =>
+      api.post("/api/v1/wallet/redeem-codes/exchange", {
+        redeemCode,
+      }),
+    onSuccess: () => {
+      setMessage("兑换成功");
+      recordsQuery.refetch();
+    },
+    onError(error) {
+      setMessage(error instanceof ApiError ? error.message : "兑换失败");
+    },
+  });
+
+  return (
+    <div className="two-col-grid">
+      <section className="panel">
+        <h3>兑换密钥</h3>
+        <div className="form-stack">
+          <label className="field-label">
+            输入兑换码
+            <input value={redeemCode} onChange={(event) => setRedeemCode(event.target.value)} />
+          </label>
+          <button className="primary-button" onClick={() => mutation.mutate()}>
+            立即兑换
+          </button>
+          {message ? <div className="muted">{message}</div> : null}
+        </div>
+      </section>
+
+      <section className="panel">
+        <h3>兑换记录</h3>
+        <div className="list-grid">
+          {recordsQuery.data?.map((item) => (
+            <div className="list-item" key={item.redeemCode}>
+              <div className="toolbar">
+                <strong>{item.redeemCode}</strong>
+                <StatusBadge value="used" />
+              </div>
+              <div className="muted">{item.points} 积分</div>
+            </div>
+          ))}
+        </div>
+      </section>
+    </div>
+  );
+}
+

frontend-web/src/app/(dashboard)/workspace/assets/page.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { useState } from "react";
+
+import { api } from "@/lib/api";
+import type { AssetItem } from "@/lib/types";
+
+export default function AssetsPage() {
+  const [mediaType, setMediaType] = useState("image");
+  const assetsQuery = useQuery({
+    queryKey: ["asset-list"],
+    queryFn: () => api.get<AssetItem[]>("/api/v1/assets"),
+  });
+
+  const uploadMutation = useMutation({
+    mutationFn: async (file: File) => {
+      const formData = new FormData();
+      formData.append("file", file);
+      formData.append("mediaType", mediaType);
+      return api.post("/api/v1/assets", formData);
+    },
+    onSuccess: () => assetsQuery.refetch(),
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: (assetId: number) => api.del(`/api/v1/assets/${assetId}`),
+    onSuccess: () => assetsQuery.refetch(),
+  });
+
+  return (
+    <div className="two-col-grid">
+      <section className="panel">
+        <h3>上传素材</h3>
+        <div className="form-stack">
+          <label className="field-label">
+            素材类型
+            <select value={mediaType} onChange={(event) => setMediaType(event.target.value)}>
+              <option value="image">图片</option>
+              <option value="video">视频</option>
+              <option value="audio">音频</option>
+            </select>
+          </label>
+          <label className="field-label">
+            文件
+            <input
+              type="file"
+              onChange={(event) => {
+                const file = event.target.files?.[0];
+                if (file) {
+                  uploadMutation.mutate(file);
+                }
+              }}
+            />
+          </label>
+        </div>
+      </section>
+
+      <section className="panel">
+        <h3>已上传素材</h3>
+        <div className="list-grid">
+          {assetsQuery.data?.map((asset) => (
+            <div className="list-item" key={asset.id}>
+              <strong>{asset.originalFilename}</strong>
+              <div className="muted">
+                {asset.mediaType} · {Math.round(asset.fileSize / 1024)} KB
+              </div>
+              <div className="row" style={{ marginTop: 12 }}>
+                <a className="ghost-button" href={asset.publicUrl} target="_blank">
+                  查看文件
+                </a>
+                <button
+                  className="danger-button"
+                  onClick={() => deleteMutation.mutate(asset.id)}
+                >
+                  删除
+                </button>
+              </div>
+            </div>
+          ))}
+        </div>
+      </section>
+    </div>
+  );
+}
+

frontend-web/src/app/(dashboard)/workspace/create/page.tsx

@@ -0,0 +1,213 @@
+"use client";
+
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { useMemo, useState } from "react";
+import Link from "next/link";
+
+import { api, ApiError } from "@/lib/api";
+import type { AssetItem, VideoModel, WalletSummary } from "@/lib/types";
+
+export default function CreateTaskPage() {
+  const [form, setForm] = useState({
+    videoModelId: 0,
+    prompt:
+      "夜晚的未来城市高架桥上，一辆银色跑车高速穿行，镜头跟拍，霓虹反光强烈。",
+    durationSeconds: 8,
+    resolution: "1280x720",
+    ratio: "16:9",
+    generateAudio: true,
+    referenceImageAssetIds: [] as number[],
+  });
+  const [message, setMessage] = useState("");
+
+  const videoModelsQuery = useQuery({
+    queryKey: ["video-models"],
+    queryFn: () => api.get<VideoModel[]>("/api/v1/video-models"),
+  });
+  const walletQuery = useQuery({
+    queryKey: ["wallet-summary"],
+    queryFn: () => api.get<WalletSummary>("/api/v1/wallet"),
+  });
+  const assetsQuery = useQuery({
+    queryKey: ["assets"],
+    queryFn: () => api.get<AssetItem[]>("/api/v1/assets"),
+  });
+
+  const selectedModel = useMemo(
+    () =>
+      videoModelsQuery.data?.find((item) => item.id === form.videoModelId) ??
+      videoModelsQuery.data?.[0],
+    [form.videoModelId, videoModelsQuery.data],
+  );
+
+  const createMutation = useMutation({
+    mutationFn: () =>
+      api.post<{
+        taskNo: string;
+        taskStatus: string;
+        estimatedPoints: number;
+        frozenPoints: number;
+      }>("/api/v1/video-tasks", {
+        ...form,
+        videoModelId: form.videoModelId || selectedModel?.id,
+        referenceVideoAssetIds: [],
+        referenceAudioAssetIds: [],
+      }),
+    onSuccess(data) {
+      setMessage(
+        `任务 ${data.taskNo} 已提交，预估扣费 ${data.estimatedPoints} 积分。`,
+      );
+    },
+    onError(error) {
+      setMessage(error instanceof ApiError ? error.message : "创建失败");
+    },
+  });
+
+  return (
+    <div className="two-col-grid">
+      <section className="panel">
+        <div className="toolbar">
+          <div>
+            <h3>创建视频任务</h3>
+            <p className="muted">选择平台模型、提示词和参考素材，提交后系统会自动冻结积分并开始轮询。</p>
+          </div>
+          <Link href="/workspace/tasks" className="ghost-button">
+            查看任务列表
+          </Link>
+        </div>
+
+        <div className="form-stack">
+          <label className="field-label">
+            平台视频模型
+            <select
+              value={form.videoModelId || selectedModel?.id || ""}
+              onChange={(event) =>
+                setForm((previous) => ({
+                  ...previous,
+                  videoModelId: Number(event.target.value),
+                }))
+              }
+            >
+              {videoModelsQuery.data?.map((item) => (
+                <option key={item.id} value={item.id}>
+                  {item.frontendTitle}
+                </option>
+              ))}
+            </select>
+          </label>
+          <label className="field-label">
+            提示词
+            <textarea
+              value={form.prompt}
+              onChange={(event) =>
+                setForm((previous) => ({ ...previous, prompt: event.target.value }))
+              }
+            />
+          </label>
+          <div className="mini-grid">
+            <label className="field-label">
+              时长
+              <input
+                type="number"
+                min={4}
+                max={15}
+                value={form.durationSeconds}
+                onChange={(event) =>
+                  setForm((previous) => ({
+                    ...previous,
+                    durationSeconds: Number(event.target.value),
+                  }))
+                }
+              />
+            </label>
+            <label className="field-label">
+              分辨率
+              <select
+                value={form.resolution}
+                onChange={(event) =>
+                  setForm((previous) => ({ ...previous, resolution: event.target.value }))
+                }
+              >
+                <option value="1280x720">1280x720</option>
+                <option value="1920x1080">1920x1080</option>
+              </select>
+            </label>
+            <label className="field-label">
+              比例
+              <select
+                value={form.ratio}
+                onChange={(event) =>
+                  setForm((previous) => ({ ...previous, ratio: event.target.value }))
+                }
+              >
+                <option value="16:9">16:9</option>
+                <option value="9:16">9:16</option>
+                <option value="1:1">1:1</option>
+              </select>
+            </label>
+          </div>
+          <label className="field-label">
+            参考图片
+            <select
+              multiple
+              value={form.referenceImageAssetIds.map(String)}
+              onChange={(event) =>
+                setForm((previous) => ({
+                  ...previous,
+                  referenceImageAssetIds: Array.from(event.target.selectedOptions).map((item) =>
+                    Number(item.value),
+                  ),
+                }))
+              }
+            >
+              {assetsQuery.data
+                ?.filter((item) => item.mediaType === "image")
+                .map((item) => (
+                  <option key={item.id} value={item.id}>
+                    {item.originalFilename}
+                  </option>
+                ))}
+            </select>
+          </label>
+          <button
+            className="primary-button"
+            disabled={createMutation.isPending}
+            onClick={() => createMutation.mutate()}
+            type="button"
+          >
+            {createMutation.isPending ? "提交中..." : "提交生成任务"}
+          </button>
+          {message ? <div className="muted">{message}</div> : null}
+        </div>
+      </section>
+
+      <section className="panel-grid">
+        <article className="stat-card">
+          <h3>钱包余额</h3>
+          <div className="value">{walletQuery.data?.availablePoints ?? 0}</div>
+          <div className="muted">可用积分</div>
+        </article>
+        <article className="panel">
+          <h3>当前模型</h3>
+          <div className="list-grid">
+            <div className="list-item">
+              <strong>{selectedModel?.frontendTitle ?? "加载中..."}</strong>
+              <span className="muted">{selectedModel?.frontendDescription}</span>
+            </div>
+            <div className="mini-grid">
+              <div className="list-item">
+                <strong>{selectedModel?.pricing.pointsPerSecond ?? 0}</strong>
+                <span className="muted">每秒积分</span>
+              </div>
+              <div className="list-item">
+                <strong>{selectedModel?.pricing.minimumPoints ?? 0}</strong>
+                <span className="muted">最低扣费</span>
+              </div>
+            </div>
+          </div>
+        </article>
+      </section>
+    </div>
+  );
+}
+

frontend-web/src/app/(dashboard)/workspace/tasks/[taskNo]/page.tsx

@@ -0,0 +1,119 @@
+"use client";
+
+import { useMutation, useQuery } from "@tanstack/react-query";
+import Link from "next/link";
+import { useParams, useRouter } from "next/navigation";
+
+import { StatusBadge } from "@/components/status-badge";
+import { api } from "@/lib/api";
+import type { TaskDetail } from "@/lib/types";
+
+export default function TaskDetailPage() {
+  const params = useParams<{ taskNo: string }>();
+  const router = useRouter();
+  const taskNo = params.taskNo;
+
+  const taskQuery = useQuery({
+    queryKey: ["task-detail", taskNo],
+    queryFn: () => api.get<TaskDetail>(`/api/v1/video-tasks/${taskNo}`),
+    refetchInterval(query) {
+      const status = query.state.data?.taskStatus;
+      return status && ["succeeded", "failed", "cancelled"].includes(status)
+        ? false
+        : 4_000;
+    },
+  });
+
+  const cancelMutation = useMutation({
+    mutationFn: () => api.post(`/api/v1/video-tasks/${taskNo}/cancel`),
+    onSuccess: () => taskQuery.refetch(),
+  });
+  const retryMutation = useMutation({
+    mutationFn: () => api.post<{ taskNo: string }>(`/api/v1/video-tasks/${taskNo}/retry`),
+    onSuccess: (data) => router.push(`/workspace/tasks/${data.taskNo}`),
+  });
+  const deleteMutation = useMutation({
+    mutationFn: () => api.del(`/api/v1/video-tasks/${taskNo}`),
+    onSuccess: () => router.push("/workspace/tasks"),
+  });
+
+  const task = taskQuery.data;
+
+  return (
+    <div className="two-col-grid">
+      <section className="panel">
+        <div className="toolbar">
+          <div>
+            <h3>任务详情</h3>
+            <p className="muted">{taskNo}</p>
+          </div>
+          {task ? <StatusBadge value={task.taskStatus} /> : null}
+        </div>
+
+        {task ? (
+          <div className="list-grid" style={{ marginTop: 18 }}>
+            <div className="list-item">
+              <strong>{task.videoModel.name}</strong>
+              <div className="muted">{task.prompt}</div>
+            </div>
+            <div className="mini-grid">
+              <div className="list-item">
+                <strong>{task.provider.providerName}</strong>
+                <div className="muted">供应商</div>
+              </div>
+              <div className="list-item">
+                <strong>{task.provider.modelCode}</strong>
+                <div className="muted">供应商模型</div>
+              </div>
+              <div className="list-item">
+                <strong>{task.estimatedPoints}</strong>
+                <div className="muted">预估积分</div>
+              </div>
+              <div className="list-item">
+                <strong>{task.finalPoints}</strong>
+                <div className="muted">最终积分</div>
+              </div>
+            </div>
+            {task.resultVideoUrl ? (
+              <video className="media-preview" controls src={task.resultVideoUrl} />
+            ) : (
+              <div className="list-item muted">
+                结果尚未完成，页面会自动轮询刷新当前状态。
+              </div>
+            )}
+            <div className="row">
+              <button className="ghost-button" onClick={() => cancelMutation.mutate()}>
+                取消任务
+              </button>
+              <button className="primary-button" onClick={() => retryMutation.mutate()}>
+                重新生成
+              </button>
+              <button className="danger-button" onClick={() => deleteMutation.mutate()}>
+                从前台删除
+              </button>
+              <Link href="/workspace/tasks" className="ghost-button">
+                返回列表
+              </Link>
+            </div>
+          </div>
+        ) : (
+          <div className="pulse-card" style={{ padding: 24, marginTop: 18 }}>
+            正在加载任务详情...
+          </div>
+        )}
+      </section>
+
+      <section className="panel">
+        <h3>原始链路</h3>
+        <pre className="code-block">
+          {JSON.stringify(task?.requestPayload ?? {}, null, 2)}
+        </pre>
+        <h3 style={{ marginTop: 18 }}>供应商响应</h3>
+        <pre className="code-block">
+          {JSON.stringify(task?.responsePayload ?? {}, null, 2)}
+        </pre>
+      </section>
+    </div>
+  );
+}
+

frontend-web/src/app/(dashboard)/workspace/tasks/page.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import { useQuery } from "@tanstack/react-query";
+import dayjs from "dayjs";
+import Link from "next/link";
+
+import { StatusBadge } from "@/components/status-badge";
+import { api } from "@/lib/api";
+import type { TaskSummary } from "@/lib/types";
+
+export default function TasksPage() {
+  const tasksQuery = useQuery({
+    queryKey: ["task-list"],
+    queryFn: () => api.get<TaskSummary[]>("/api/v1/video-tasks"),
+    refetchInterval: 4_000,
+  });
+
+  return (
+    <section className="panel">
+      <div className="toolbar">
+        <div>
+          <h3>任务记录</h3>
+          <p className="muted">轮询刷新任务状态，成功后可直接查看转存结果。</p>
+        </div>
+        <Link href="/workspace/create" className="primary-button">
+          新建任务
+        </Link>
+      </div>
+
+      <div className="list-grid" style={{ marginTop: 18 }}>
+        {tasksQuery.data?.map((task) => (
+          <div className="list-item" key={task.taskNo}>
+            <div className="toolbar">
+              <div>
+                <strong>{task.taskNo}</strong>
+                <div className="muted">
+                  {dayjs(task.createdAt).format("YYYY-MM-DD HH:mm:ss")} · {task.durationSeconds}
+                  s
+                </div>
+              </div>
+              <StatusBadge value={task.taskStatus} />
+            </div>
+            <div className="mini-grid" style={{ marginTop: 12 }}>
+              <div>
+                <div className="muted">预估积分</div>
+                <strong>{task.estimatedPoints}</strong>
+              </div>
+              <div>
+                <div className="muted">最终积分</div>
+                <strong>{task.finalPoints}</strong>
+              </div>
+              <div>
+                <div className="muted">结果</div>
+                <strong>{task.resultVideoUrl ? "已生成" : "处理中"}</strong>
+              </div>
+            </div>
+            <div className="row" style={{ marginTop: 14 }}>
+              <Link href={`/workspace/tasks/${task.taskNo}`} className="ghost-button">
+                查看详情
+              </Link>
+              {task.resultVideoUrl ? (
+                <a className="primary-button" href={task.resultVideoUrl} target="_blank">
+                  打开视频
+                </a>
+              ) : null}
+            </div>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}
+

frontend-web/src/app/globals.css

@@ -0,0 +1,402 @@
+@import "tailwindcss";
+
+:root {
+  --bg: #f7f2e8;
+  --surface: rgba(255, 255, 255, 0.78);
+  --surface-strong: #fffdf9;
+  --ink: #132238;
+  --muted: #5f6977;
+  --line: rgba(19, 34, 56, 0.12);
+  --accent: #e66a2c;
+  --accent-deep: #a43e13;
+  --olive: #35524a;
+  --success: #198754;
+  --warn: #c27a11;
+  --danger: #b63d3d;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  min-height: 100%;
+}
+
+body {
+  margin: 0;
+  color: var(--ink);
+  font-family: var(--font-body), sans-serif;
+  background:
+    radial-gradient(circle at top right, rgba(230, 106, 44, 0.18), transparent 28%),
+    radial-gradient(circle at bottom left, rgba(53, 82, 74, 0.22), transparent 30%),
+    linear-gradient(180deg, #fbf6ee 0%, #f2ecdf 100%);
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+button,
+input,
+select,
+textarea {
+  font: inherit;
+}
+
+.fullscreen-shell {
+  min-height: 100vh;
+  display: grid;
+  place-items: center;
+  padding: 24px;
+}
+
+.auth-grid {
+  min-height: 100vh;
+  display: grid;
+  grid-template-columns: 1.2fr 0.8fr;
+}
+
+.auth-hero {
+  padding: 56px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.auth-card {
+  width: min(460px, calc(100vw - 32px));
+  margin: auto;
+  padding: 32px;
+  border: 1px solid var(--line);
+  border-radius: 28px;
+  background: rgba(255, 255, 255, 0.86);
+  box-shadow: 0 28px 80px rgba(19, 34, 56, 0.1);
+}
+
+.eyebrow {
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--accent-deep);
+  font-size: 12px;
+}
+
+.headline {
+  margin: 10px 0 14px;
+  font-size: clamp(36px, 5vw, 70px);
+  line-height: 0.96;
+  font-family: var(--font-display), sans-serif;
+}
+
+.subcopy {
+  max-width: 560px;
+  line-height: 1.6;
+  color: var(--muted);
+}
+
+.form-stack {
+  display: grid;
+  gap: 14px;
+  margin-top: 20px;
+}
+
+.field-label {
+  display: grid;
+  gap: 8px;
+  color: var(--muted);
+}
+
+.field-label input,
+.field-label select,
+.field-label textarea {
+  width: 100%;
+  padding: 14px 16px;
+  border: 1px solid rgba(19, 34, 56, 0.16);
+  border-radius: 16px;
+  background: rgba(255, 255, 255, 0.9);
+  outline: none;
+}
+
+.field-label textarea {
+  min-height: 120px;
+  resize: vertical;
+}
+
+.primary-button,
+.ghost-button,
+.danger-button {
+  border: 0;
+  border-radius: 16px;
+  padding: 14px 18px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  cursor: pointer;
+}
+
+.primary-button {
+  background: linear-gradient(135deg, var(--accent) 0%, #f48f39 100%);
+  color: white;
+}
+
+.ghost-button {
+  background: rgba(19, 34, 56, 0.06);
+  color: var(--ink);
+}
+
+.danger-button {
+  background: rgba(182, 61, 61, 0.12);
+  color: var(--danger);
+}
+
+.shell-grid {
+  min-height: 100vh;
+  display: grid;
+  grid-template-columns: 320px 1fr;
+}
+
+.shell-sidebar {
+  padding: 24px;
+  border-right: 1px solid var(--line);
+  background: rgba(255, 255, 255, 0.54);
+  backdrop-filter: blur(14px);
+  display: flex;
+  flex-direction: column;
+  gap: 22px;
+}
+
+.brand-block h1 {
+  margin: 8px 0 10px;
+  font-size: 34px;
+  font-family: var(--font-display), sans-serif;
+}
+
+.brand-kicker,
+.header-kicker {
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--accent-deep);
+  font-size: 12px;
+}
+
+.sidebar-nav {
+  display: grid;
+  gap: 10px;
+}
+
+.nav-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 14px 16px;
+  border-radius: 16px;
+  color: var(--muted);
+}
+
+.nav-item.active {
+  background: linear-gradient(135deg, rgba(230, 106, 44, 0.12), rgba(53, 82, 74, 0.12));
+  color: var(--ink);
+  font-weight: 700;
+}
+
+.profile-card,
+.panel,
+.stat-card,
+.pulse-card {
+  border: 1px solid var(--line);
+  border-radius: 24px;
+  background: var(--surface);
+  backdrop-filter: blur(12px);
+  box-shadow: 0 18px 60px rgba(19, 34, 56, 0.08);
+}
+
+.profile-card {
+  padding: 18px;
+  margin-top: auto;
+  display: grid;
+  gap: 14px;
+}
+
+.profile-name {
+  font-weight: 800;
+}
+
+.profile-meta {
+  color: var(--muted);
+  font-size: 14px;
+}
+
+.shell-main {
+  padding: 24px;
+}
+
+.shell-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 16px;
+}
+
+.shell-header h2 {
+  margin: 6px 0 0;
+  font-size: 34px;
+  font-family: var(--font-display), sans-serif;
+}
+
+.header-chip {
+  padding: 10px 14px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.76);
+  border: 1px solid var(--line);
+  color: var(--muted);
+  font-size: 13px;
+}
+
+.shell-content {
+  margin-top: 20px;
+  display: grid;
+  gap: 18px;
+}
+
+.panel,
+.stat-card {
+  padding: 22px;
+}
+
+.panel-grid,
+.stats-grid,
+.two-col-grid {
+  display: grid;
+  gap: 18px;
+}
+
+.panel-grid {
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+}
+
+.stats-grid {
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+}
+
+.two-col-grid {
+  grid-template-columns: 1.05fr 0.95fr;
+}
+
+.panel h3,
+.stat-card h3 {
+  margin: 0 0 14px;
+  font-size: 20px;
+  font-family: var(--font-display), sans-serif;
+}
+
+.stat-card .value {
+  font-size: 34px;
+  font-family: var(--font-display), sans-serif;
+}
+
+.muted {
+  color: var(--muted);
+}
+
+.row,
+.toolbar {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.toolbar {
+  justify-content: space-between;
+}
+
+.list-grid {
+  display: grid;
+  gap: 12px;
+}
+
+.list-item {
+  padding: 16px;
+  border-radius: 18px;
+  border: 1px solid var(--line);
+  background: rgba(255, 255, 255, 0.78);
+}
+
+.list-item strong {
+  display: block;
+  margin-bottom: 6px;
+}
+
+.mini-grid {
+  display: grid;
+  gap: 12px;
+  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+}
+
+.status-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 6px 10px;
+  border-radius: 999px;
+  font-size: 12px;
+  font-weight: 700;
+  text-transform: uppercase;
+}
+
+.tone-soft {
+  background: rgba(19, 34, 56, 0.08);
+}
+
+.tone-success {
+  background: rgba(25, 135, 84, 0.12);
+  color: var(--success);
+}
+
+.tone-warn {
+  background: rgba(194, 122, 17, 0.12);
+  color: var(--warn);
+}
+
+.tone-danger {
+  background: rgba(182, 61, 61, 0.12);
+  color: var(--danger);
+}
+
+.tone-ghost {
+  background: rgba(95, 105, 119, 0.12);
+  color: var(--muted);
+}
+
+.media-preview {
+  width: 100%;
+  border-radius: 18px;
+  border: 1px solid var(--line);
+  background: #111827;
+}
+
+.code-block {
+  margin: 0;
+  padding: 16px;
+  border-radius: 18px;
+  background: #101623;
+  color: #d7e1ff;
+  overflow: auto;
+  font-size: 13px;
+}
+
+@media (max-width: 1100px) {
+  .auth-grid,
+  .shell-grid,
+  .two-col-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .shell-sidebar {
+    border-right: 0;
+    border-bottom: 1px solid var(--line);
+  }
+}
+

frontend-web/src/app/layout.tsx

@@ -0,0 +1,36 @@
+import type { Metadata } from "next";
+import { Manrope, Space_Grotesk } from "next/font/google";
+
+import { Providers } from "@/components/providers";
+
+import "./globals.css";
+
+const displayFont = Space_Grotesk({
+  subsets: ["latin"],
+  variable: "--font-display",
+});
+
+const bodyFont = Manrope({
+  subsets: ["latin"],
+  variable: "--font-body",
+});
+
+export const metadata: Metadata = {
+  title: "AIVideo",
+  description: "AI 视频生成平台用户前台",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="zh-CN">
+      <body className={`${displayFont.variable} ${bodyFont.variable}`}>
+        <Providers>{children}</Providers>
+      </body>
+    </html>
+  );
+}
+

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

@@ -0,0 +1,85 @@
+"use client";
+
+import { startTransition, useState } from "react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+
+import { api, ApiError } from "@/lib/api";
+
+export default function LoginPage() {
+  const router = useRouter();
+  const [form, setForm] = useState({ account: "demo@example.com", password: "12345678" });
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    setLoading(true);
+    setError("");
+    try {
+      await api.post("/api/v1/auth/login", form);
+      startTransition(() => router.replace("/workspace/create"));
+    } catch (err) {
+      setError(err instanceof ApiError ? err.message : "登录失败");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <div className="auth-grid">
+      <section className="auth-hero">
+        <div>
+          <div className="eyebrow">Creative Workbench</div>
+          <h1 className="headline">从提示词到成片，完整跑通你的 AI 视频生产线。</h1>
+          <p className="subcopy">
+            支持充值积分、兑换密钥、素材上传、供应商模型路由和任务轮询。当前默认已接入本地 mock
+            OpenAI / Seedance 流程，开箱即可联调。
+          </p>
+        </div>
+        <div className="panel">
+          <h3>默认体验方式</h3>
+          <p className="muted">
+            如果还没有账号，直接去注册。注册成功后会自动发放注册奖励积分。
+          </p>
+        </div>
+      </section>
+
+      <section className="fullscreen-shell">
+        <form className="auth-card" onSubmit={handleSubmit}>
+          <div className="eyebrow">Welcome Back</div>
+          <h2 style={{ marginTop: 8 }}>登录 AIVideo</h2>
+          <div className="form-stack">
+            <label className="field-label">
+              账号
+              <input
+                value={form.account}
+                onChange={(event) =>
+                  setForm((previous) => ({ ...previous, account: event.target.value }))
+                }
+              />
+            </label>
+            <label className="field-label">
+              密码
+              <input
+                type="password"
+                value={form.password}
+                onChange={(event) =>
+                  setForm((previous) => ({ ...previous, password: event.target.value }))
+                }
+              />
+            </label>
+            {error ? <div className="muted" style={{ color: "var(--danger)" }}>{error}</div> : null}
+            <button className="primary-button" disabled={loading} type="submit">
+              {loading ? "登录中..." : "登录并进入工作台"}
+            </button>
+            <Link href="/register" className="ghost-button">
+              去注册
+            </Link>
+          </div>
+        </form>
+      </section>
+    </div>
+  );
+}
+

frontend-web/src/app/page.tsx

@@ -0,0 +1,6 @@
+import { redirect } from "next/navigation";
+
+export default function HomePage() {
+  redirect("/workspace/create");
+}
+

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

@@ -0,0 +1,10 @@
+import { RegisterForm } from "@/components/register-form";
+
+export default async function RegisterPage({
+  searchParams,
+}: {
+  searchParams: Promise<{ inviteCode?: string }>;
+}) {
+  const params = await searchParams;
+  return <RegisterForm inviteCode={params.inviteCode ?? ""} />;
+}

frontend-web/src/components/providers.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import {
+  QueryClient,
+  QueryClientProvider,
+} from "@tanstack/react-query";
+import { useState } from "react";
+
+export function Providers({ children }: { children: React.ReactNode }) {
+  const [queryClient] = useState(
+    () =>
+      new QueryClient({
+        defaultOptions: {
+          queries: {
+            retry: false,
+            staleTime: 2_000,
+          },
+        },
+      }),
+  );
+
+  return (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  );
+}
+

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

@@ -0,0 +1,100 @@
+"use client";
+
+import { startTransition, useState } from "react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+
+import { api, ApiError } from "@/lib/api";
+
+export function RegisterForm({ inviteCode = "" }: { inviteCode?: string }) {
+  const router = useRouter();
+  const [form, setForm] = useState({
+    account: "",
+    password: "12345678",
+    inviteCode,
+  });
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    setLoading(true);
+    setError("");
+    try {
+      await api.post("/api/v1/auth/register", {
+        account: form.account,
+        password: form.password,
+        invite_code: form.inviteCode || undefined,
+      });
+      startTransition(() => router.replace("/workspace/create"));
+    } catch (err) {
+      setError(err instanceof ApiError ? err.message : "注册失败");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <div className="auth-grid">
+      <section className="auth-hero">
+        <div>
+          <div className="eyebrow">New Account</div>
+          <h1 className="headline">用一个账号串起充值、任务、邀请奖励和素材管理。</h1>
+          <p className="subcopy">
+            注册后会读取后台增长奖励规则，若已开启则自动发放注册积分；如果通过邀请码注册，也会建立邀请关系。
+          </p>
+        </div>
+        <div className="panel">
+          <h3>邀请奖励说明</h3>
+          <p className="muted">被邀请用户首次有效消费成功后，邀请人可自动拿到奖励积分。</p>
+        </div>
+      </section>
+
+      <section className="fullscreen-shell">
+        <form className="auth-card" onSubmit={handleSubmit}>
+          <div className="eyebrow">Create Account</div>
+          <h2 style={{ marginTop: 8 }}>注册用户</h2>
+          <div className="form-stack">
+            <label className="field-label">
+              邮箱账号
+              <input
+                placeholder="user@example.com"
+                value={form.account}
+                onChange={(event) =>
+                  setForm((previous) => ({ ...previous, account: event.target.value }))
+                }
+              />
+            </label>
+            <label className="field-label">
+              密码
+              <input
+                type="password"
+                value={form.password}
+                onChange={(event) =>
+                  setForm((previous) => ({ ...previous, password: event.target.value }))
+                }
+              />
+            </label>
+            <label className="field-label">
+              邀请码
+              <input
+                value={form.inviteCode}
+                onChange={(event) =>
+                  setForm((previous) => ({ ...previous, inviteCode: event.target.value }))
+                }
+              />
+            </label>
+            {error ? <div className="muted" style={{ color: "var(--danger)" }}>{error}</div> : null}
+            <button className="primary-button" disabled={loading} type="submit">
+              {loading ? "注册中..." : "注册并领取初始积分"}
+            </button>
+            <Link href="/login" className="ghost-button">
+              返回登录
+            </Link>
+          </div>
+        </form>
+      </section>
+    </div>
+  );
+}
+

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

@@ -0,0 +1,118 @@
+"use client";
+
+import { useQuery } from "@tanstack/react-query";
+import clsx from "clsx";
+import {
+  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";
+
+import { api } from "@/lib/api";
+import type { UserProfile } from "@/lib/types";
+
+const navigation = [
+  { href: "/workspace/create", label: "创建任务", icon: Sparkles },
+  { href: "/workspace/tasks", label: "任务记录", icon: FolderKanban },
+  { href: "/workspace/assets", label: "素材管理", icon: ImagePlus },
+  { href: "/wallet", label: "钱包概览", icon: Coins },
+  { href: "/wallet/recharge", label: "充值中心", icon: Coins },
+  { href: "/wallet/redeem", label: "兑换密钥", icon: Ticket },
+  { href: "/invite", label: "邀请中心", icon: Users },
+  { href: "/profile", label: "个人资料", icon: UserRound },
+];
+
+export function SiteShell({ children }: { children: React.ReactNode }) {
+  const pathname = usePathname();
+  const router = useRouter();
+  const { data, error, isLoading } = useQuery({
+    queryKey: ["web-me"],
+    queryFn: () => api.get<UserProfile>("/api/v1/auth/me"),
+  });
+
+  useEffect(() => {
+    if (error) {
+      router.replace("/login");
+    }
+  }, [error, router]);
+
+  const title = useMemo(() => {
+    const current = navigation.find((item) => pathname.startsWith(item.href));
+    return current?.label ?? "AIVideo";
+  }, [pathname]);
+
+  if (isLoading || !data) {
+    return (
+      <div className="fullscreen-shell">
+        <div className="pulse-card">正在验证登录态并加载工作台...</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="shell-grid">
+      <aside className="shell-sidebar">
+        <div className="brand-block">
+          <span className="brand-kicker">AI VIDEO PLATFORM</span>
+          <h1>AIVideo</h1>
+          <p>把文生视频、图生视频、充值结算和模型路由放进一个工作台。</p>
+        </div>
+
+        <nav className="sidebar-nav">
+          {navigation.map((item) => {
+            const Icon = item.icon;
+            return (
+              <Link
+                key={item.href}
+                href={item.href}
+                className={clsx("nav-item", {
+                  active: pathname.startsWith(item.href),
+                })}
+              >
+                <Icon size={18} />
+                <span>{item.label}</span>
+              </Link>
+            );
+          })}
+        </nav>
+
+        <div className="profile-card">
+          <div>
+            <div className="profile-name">{data.nickname || data.username}</div>
+            <div className="profile-meta">{data.email}</div>
+          </div>
+          <button
+            className="ghost-button"
+            onClick={async () => {
+              await api.post("/api/v1/auth/logout");
+              router.replace("/login");
+            }}
+          >
+            <LogOut size={16} />
+            退出
+          </button>
+        </div>
+      </aside>
+
+      <main className="shell-main">
+        <header className="shell-header">
+          <div>
+            <div className="header-kicker">Creative Ops</div>
+            <h2>{title}</h2>
+          </div>
+          <div className="header-chip">{data.publicId}</div>
+        </header>
+        <section className="shell-content">{children}</section>
+      </main>
+    </div>
+  );
+}
+

frontend-web/src/components/status-badge.tsx

@@ -0,0 +1,33 @@
+import clsx from "clsx";
+
+const statusMap: Record<string, string> = {
+  queued: "soft",
+  submitted: "soft",
+  running: "warn",
+  succeeded: "success",
+  failed: "danger",
+  cancelled: "ghost",
+  pending: "soft",
+  paid: "success",
+  unused: "success",
+  used: "ghost",
+  disabled: "danger",
+};
+
+export function StatusBadge({ value }: { value: string }) {
+  const tone = statusMap[value] ?? "soft";
+  return (
+    <span
+      className={clsx("status-badge", {
+        "tone-soft": tone === "soft",
+        "tone-success": tone === "success",
+        "tone-warn": tone === "warn",
+        "tone-danger": tone === "danger",
+        "tone-ghost": tone === "ghost",
+      })}
+    >
+      {value}
+    </span>
+  );
+}
+

frontend-web/src/lib/api.ts

@@ -0,0 +1,73 @@
+export type ApiEnvelope<T> = {
+  code: number;
+  message: string;
+  data: T;
+};
+
+export class ApiError extends Error {
+  status: number;
+  details: unknown;
+
+  constructor(message: string, status: number, details: unknown) {
+    super(message);
+    this.name = "ApiError";
+    this.status = status;
+    this.details = details;
+  }
+}
+
+const API_BASE_URL =
+  process.env.NEXT_PUBLIC_API_BASE_URL ?? "http://localhost:8000";
+
+async function request<T>(
+  path: string,
+  options: RequestInit = {},
+): Promise<T> {
+  const isFormData = options.body instanceof FormData;
+  const response = await fetch(`${API_BASE_URL}${path}`, {
+    ...options,
+    credentials: "include",
+    cache: "no-store",
+    headers: {
+      ...(isFormData ? {} : { "Content-Type": "application/json" }),
+      ...(options.headers ?? {}),
+    },
+  });
+
+  let payload: ApiEnvelope<T> | null = null;
+  try {
+    payload = (await response.json()) as ApiEnvelope<T>;
+  } catch {
+    payload = null;
+  }
+
+  if (!response.ok || !payload || payload.code !== 0) {
+    throw new ApiError(
+      payload?.message ?? "Request failed",
+      response.status,
+      payload,
+    );
+  }
+
+  return payload.data;
+}
+
+export const api = {
+  get: <T>(path: string) => request<T>(path),
+  post: <T>(path: string, body?: unknown) =>
+    request<T>(path, {
+      method: "POST",
+      body: body instanceof FormData ? body : JSON.stringify(body ?? {}),
+    }),
+  put: <T>(path: string, body?: unknown) =>
+    request<T>(path, {
+      method: "PUT",
+      body: JSON.stringify(body ?? {}),
+    }),
+  del: <T>(path: string) =>
+    request<T>(path, {
+      method: "DELETE",
+    }),
+};
+
+export { API_BASE_URL };

frontend-web/src/lib/types.ts

@@ -0,0 +1,84 @@
+export type UserProfile = {
+  publicId: string;
+  username: string;
+  nickname: string;
+  avatarUrl: string;
+  email: string;
+  mobile?: string;
+  status?: number;
+};
+
+export type WalletSummary = {
+  balancePoints: number;
+  frozenPoints: number;
+  availablePoints: number;
+  pointExchangeRatio: number;
+};
+
+export type WalletTransaction = {
+  transactionNo: string;
+  bizType: string;
+  direction: string;
+  amountPoints: number;
+  remark: string;
+  createdAt: string;
+};
+
+export type VideoModel = {
+  id: number;
+  modelKey: string;
+  modelName: string;
+  frontendTitle: string;
+  frontendDescription: string;
+  defaultDurationSeconds: number;
+  defaultRatio: string;
+  defaultResolution: string;
+  pricing: {
+    pointsPerSecond: number;
+    minimumPoints: number;
+  };
+};
+
+export type AssetItem = {
+  id: number;
+  assetNo: string;
+  mediaType: string;
+  originalFilename: string;
+  fileSize: number;
+  publicUrl: string;
+  createdAt: string;
+};
+
+export type TaskSummary = {
+  id: number;
+  taskNo: string;
+  taskStatus: string;
+  durationSeconds: number;
+  estimatedPoints: number;
+  finalPoints: number;
+  resultVideoUrl: string;
+  failReason: string;
+  createdAt: string;
+  finishedAt: string | null;
+};
+
+export type TaskDetail = TaskSummary & {
+  videoModel: { id: number; name: string };
+  provider: {
+    providerCode: string;
+    providerName: string;
+    modelCode: string;
+    modelName: string;
+  };
+  ratio: string;
+  resolution: string;
+  prompt: string;
+  requestPayload: Record<string, unknown>;
+  responsePayload: Record<string, unknown> | null;
+  events: Array<{
+    eventType: string;
+    eventMessage: string;
+    createdAt: string;
+  }>;
+};
+

frontend-web/tsconfig.json

@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts",
+    "**/*.mts"
+  ],
+  "exclude": ["node_modules"]
+}