feat: initialize aivideo project

2026-04-17 18:33:05 +08:00
commit 14b18d67fe
162 changed files with 26251 additions and 0 deletions
--- a/frontend-admin/.gitignore
+++ b/frontend-admin/.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
--- a/frontend-admin/AGENTS.md
+++ b/frontend-admin/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 -->
--- a/frontend-admin/CLAUDE.md
+++ b/frontend-admin/CLAUDE.md
@@ -0,0 +1 @@
+@AGENTS.md
--- a/frontend-admin/README.md
+++ b/frontend-admin/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.
--- a/frontend-admin/eslint.config.mjs
+++ b/frontend-admin/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;
--- a/frontend-admin/next.config.ts
+++ b/frontend-admin/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;
--- a/frontend-admin/package.json
+++ b/frontend-admin/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "frontend-admin",
+  "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"
+  }
+}
--- a/frontend-admin/postcss.config.mjs
+++ b/frontend-admin/postcss.config.mjs
@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+
+export default config;
--- a/frontend-admin/public/file.svg
+++ b/frontend-admin/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>
--- a/frontend-admin/public/globe.svg
+++ b/frontend-admin/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>
--- a/frontend-admin/public/next.svg
+++ b/frontend-admin/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>
--- a/frontend-admin/public/vercel.svg
+++ b/frontend-admin/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>
--- a/frontend-admin/public/window.svg
+++ b/frontend-admin/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>
--- a/frontend-admin/src/app/admin/(secure)/callback-logs/page.tsx
+++ b/frontend-admin/src/app/admin/(secure)/callback-logs/page.tsx
@@ -0,0 +1,44 @@
+"use client";
+
+import { useQuery } from "@tanstack/react-query";
+
+import { StatusBadge } from "@/components/status-badge";
+import { api } from "@/lib/api";
+
+type CallbackLog = {
+  id: number;
+  sourceType: string;
+  sourceCode: string;
+  relatedNo: string;
+  verifyStatus: string;
+  processStatus: string;
+  errorMessage: string;
+};
+
+export default function CallbackLogsPage() {
+  const query = useQuery({
+    queryKey: ["callback-logs"],
+    queryFn: () => api.get<CallbackLog[]>("/api/v1/admin/callback-logs"),
+  });
+
+  return (
+    <section className="panel">
+      <h3>回调日志</h3>
+      <div className="list-grid">
+        {query.data?.map((item) => (
+          <div className="list-item" key={item.id}>
+            <div className="toolbar">
+              <strong>{item.sourceType} / {item.sourceCode}</strong>
+              <StatusBadge value={item.processStatus} />
+            </div>
+            <div className="muted">
+              关联号：{item.relatedNo || "-"} · 验签：{item.verifyStatus}
+            </div>
+            {item.errorMessage ? <div className="muted">错误：{item.errorMessage}</div> : null}
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}
+
--- a/frontend-admin/src/app/admin/(secure)/dashboard/page.tsx
+++ b/frontend-admin/src/app/admin/(secure)/dashboard/page.tsx
@@ -0,0 +1,42 @@
+"use client";
+
+import { useQuery } from "@tanstack/react-query";
+
+import { api } from "@/lib/api";
+
+export default function DashboardPage() {
+  const dashboardQuery = useQuery({
+    queryKey: ["admin-dashboard"],
+    queryFn: () =>
+      api.get<{
+        users: number;
+        paidOrders: number;
+        tasks: number;
+        successRate: number;
+      }>("/api/v1/admin/dashboard"),
+  });
+
+  const data = dashboardQuery.data;
+
+  return (
+    <section className="stats-grid">
+      <article className="stat-card">
+        <h3>用户总数</h3>
+        <div className="value">{data?.users ?? 0}</div>
+      </article>
+      <article className="stat-card">
+        <h3>已支付订单</h3>
+        <div className="value">{data?.paidOrders ?? 0}</div>
+      </article>
+      <article className="stat-card">
+        <h3>任务总数</h3>
+        <div className="value">{data?.tasks ?? 0}</div>
+      </article>
+      <article className="stat-card">
+        <h3>成功率</h3>
+        <div className="value">{data?.successRate ?? 0}%</div>
+      </article>
+    </section>
+  );
+}
+
--- a/frontend-admin/src/app/admin/(secure)/growth-rules/page.tsx
+++ b/frontend-admin/src/app/admin/(secure)/growth-rules/page.tsx
@@ -0,0 +1,150 @@
+"use client";
+
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { useEffect, useState } from "react";
+
+import { api } from "@/lib/api";
+
+type GrowthRules = {
+  signupRewardEnabled: boolean;
+  signupRewardPoints: number;
+  inviteRewardEnabled: boolean;
+  inviteRewardPoints: number;
+  inviteRewardMinConsumePoints: number;
+};
+
+export default function GrowthRulesPage() {
+  const rulesQuery = useQuery({
+    queryKey: ["growth-rules"],
+    queryFn: () => api.get<GrowthRules>("/api/v1/admin/growth-rules"),
+  });
+  const [signup, setSignup] = useState({
+    enabled: true,
+    reward_points: 300,
+    min_consume_points: 0,
+    remark: "signup reward",
+  });
+  const [invite, setInvite] = useState({
+    enabled: true,
+    reward_points: 500,
+    min_consume_points: 100,
+    remark: "invite reward",
+  });
+
+  useEffect(() => {
+    if (rulesQuery.data) {
+      setSignup((previous) => ({
+        ...previous,
+        enabled: rulesQuery.data.signupRewardEnabled,
+        reward_points: rulesQuery.data.signupRewardPoints,
+      }));
+      setInvite({
+        enabled: rulesQuery.data.inviteRewardEnabled,
+        reward_points: rulesQuery.data.inviteRewardPoints,
+        min_consume_points: rulesQuery.data.inviteRewardMinConsumePoints,
+        remark: "invite reward",
+      });
+    }
+  }, [rulesQuery.data]);
+
+  const signupMutation = useMutation({
+    mutationFn: () => api.put("/api/v1/admin/growth-rules/signup", signup),
+    onSuccess: () => rulesQuery.refetch(),
+  });
+  const inviteMutation = useMutation({
+    mutationFn: () => api.put("/api/v1/admin/growth-rules/invite", invite),
+    onSuccess: () => rulesQuery.refetch(),
+  });
+
+  return (
+    <div className="two-col-grid">
+      <section className="panel">
+        <h3>注册奖励</h3>
+        <div className="form-stack">
+          <label className="field-label">
+            是否开启
+            <select
+              value={signup.enabled ? "1" : "0"}
+              onChange={(event) =>
+                setSignup((previous) => ({
+                  ...previous,
+                  enabled: event.target.value === "1",
+                }))
+              }
+            >
+              <option value="1">开启</option>
+              <option value="0">关闭</option>
+            </select>
+          </label>
+          <label className="field-label">
+            奖励积分
+            <input
+              type="number"
+              value={signup.reward_points}
+              onChange={(event) =>
+                setSignup((previous) => ({
+                  ...previous,
+                  reward_points: Number(event.target.value),
+                }))
+              }
+            />
+          </label>
+          <button className="primary-button" onClick={() => signupMutation.mutate()}>
+            保存注册奖励
+          </button>
+        </div>
+      </section>
+
+      <section className="panel">
+        <h3>邀请奖励</h3>
+        <div className="form-stack">
+          <label className="field-label">
+            是否开启
+            <select
+              value={invite.enabled ? "1" : "0"}
+              onChange={(event) =>
+                setInvite((previous) => ({
+                  ...previous,
+                  enabled: event.target.value === "1",
+                }))
+              }
+            >
+              <option value="1">开启</option>
+              <option value="0">关闭</option>
+            </select>
+          </label>
+          <label className="field-label">
+            奖励积分
+            <input
+              type="number"
+              value={invite.reward_points}
+              onChange={(event) =>
+                setInvite((previous) => ({
+                  ...previous,
+                  reward_points: Number(event.target.value),
+                }))
+              }
+            />
+          </label>
+          <label className="field-label">
+            最低有效消费
+            <input
+              type="number"
+              value={invite.min_consume_points}
+              onChange={(event) =>
+                setInvite((previous) => ({
+                  ...previous,
+                  min_consume_points: Number(event.target.value),
+                }))
+              }
+            />
+          </label>
+          <button className="primary-button" onClick={() => inviteMutation.mutate()}>
+            保存邀请奖励
+          </button>
+        </div>
+      </section>
+    </div>
+  );
+}
+
--- a/frontend-admin/src/app/admin/(secure)/invite-relations/page.tsx
+++ b/frontend-admin/src/app/admin/(secure)/invite-relations/page.tsx
@@ -0,0 +1,40 @@
+"use client";
+
+import { useQuery } from "@tanstack/react-query";
+
+import { StatusBadge } from "@/components/status-badge";
+import { api } from "@/lib/api";
+
+type InviteRelation = {
+  id: number;
+  inviterUserId: number;
+  inviteeUserId: number;
+  rewardStatus: string;
+  rewardPoints: number;
+};
+
+export default function InviteRelationsPage() {
+  const query = useQuery({
+    queryKey: ["admin-invite-relations"],
+    queryFn: () => api.get<InviteRelation[]>("/api/v1/admin/invite-relations"),
+  });
+
+  return (
+    <section className="panel">
+      <h3>邀请关系</h3>
+      <div className="list-grid">
+        {query.data?.map((item) => (
+          <div className="list-item" key={item.id}>
+            <div className="toolbar">
+              <strong>
+                邀请人 {item.inviterUserId} to 被邀请人 {item.inviteeUserId}
+              </strong>
+              <StatusBadge value={item.rewardStatus} />
+            </div>
+            <div className="muted">奖励积分：{item.rewardPoints}</div>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}
--- a/frontend-admin/src/app/admin/(secure)/layout.tsx
+++ b/frontend-admin/src/app/admin/(secure)/layout.tsx
@@ -0,0 +1,10 @@
+import { AdminShell } from "@/components/admin-shell";
+
+export default function SecureAdminLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return <AdminShell>{children}</AdminShell>;
+}
+
--- a/frontend-admin/src/app/admin/(secure)/pricing-rules/page.tsx
+++ b/frontend-admin/src/app/admin/(secure)/pricing-rules/page.tsx
@@ -0,0 +1,44 @@
+"use client";
+
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { useState } from "react";
+
+import { api } from "@/lib/api";
+
+export default function PricingRulesPage() {
+  const [form, setForm] = useState({
+    rule_name: "影院视频默认价格",
+    video_model_id: 1,
+    points_per_second: 160,
+    minimum_points: 600,
+    effective_at: new Date().toISOString(),
+    expired_at: null,
+    version_no: 2,
+    status: 1,
+  });
+  const query = useQuery({
+    queryKey: ["pricing-rules"],
+    queryFn: () => api.get("/api/v1/admin/pricing-rules"),
+  });
+  const mutation = useMutation({
+    mutationFn: () => api.post("/api/v1/admin/pricing-rules", form),
+    onSuccess: () => query.refetch(),
+  });
+
+  return (
+    <div className="two-col-grid">
+      <section className="panel">
+        <h3>新增价格规则</h3>
+        <pre className="code-block">{JSON.stringify(form, null, 2)}</pre>
+        <button className="primary-button" style={{ marginTop: 16 }} onClick={() => mutation.mutate()}>
+          创建价格规则
+        </button>
+      </section>
+      <section className="panel">
+        <h3>价格规则列表</h3>
+        <pre className="code-block">{JSON.stringify(query.data ?? [], null, 2)}</pre>
+      </section>
+    </div>
+  );
+}
+
--- a/frontend-admin/src/app/admin/(secure)/provider-accounts/page.tsx
+++ b/frontend-admin/src/app/admin/(secure)/provider-accounts/page.tsx
@@ -0,0 +1,63 @@
+"use client";
+
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { useState } from "react";
+
+import { api } from "@/lib/api";
+
+export default function ProviderAccountsPage() {
+  const [form, setForm] = useState({
+    provider_code: "openai-backup",
+    provider_name: "OpenAI 备用账号",
+    api_format: "openai_official_video",
+    base_url: "mock://openai",
+    api_key: "mock",
+    api_secret: "",
+    webhook_secret: "",
+    timeout_seconds: 120,
+    max_retries: 3,
+    status: 1,
+    remark: "backup route",
+  });
+  const query = useQuery({
+    queryKey: ["provider-accounts"],
+    queryFn: () => api.get("/api/v1/admin/provider-accounts"),
+  });
+  const createMutation = useMutation({
+    mutationFn: () => api.post("/api/v1/admin/provider-accounts", form),
+    onSuccess: () => query.refetch(),
+  });
+
+  return (
+    <div className="two-col-grid">
+      <section className="panel">
+        <h3>新增供应商账号</h3>
+        <div className="form-stack">
+          {Object.entries(form).map(([key, value]) => (
+            <label className="field-label" key={key}>
+              {key}
+              <input
+                value={String(value)}
+                onChange={(event) =>
+                  setForm((previous) => ({
+                    ...previous,
+                    [key]:
+                      typeof value === "number" ? Number(event.target.value) : event.target.value,
+                  }))
+                }
+              />
+            </label>
+          ))}
+          <button className="primary-button" onClick={() => createMutation.mutate()}>
+            创建供应商账号
+          </button>
+        </div>
+      </section>
+      <section className="panel">
+        <h3>当前账号</h3>
+        <pre className="code-block">{JSON.stringify(query.data ?? [], null, 2)}</pre>
+      </section>
+    </div>
+  );
+}
+
--- a/frontend-admin/src/app/admin/(secure)/provider-models/page.tsx
+++ b/frontend-admin/src/app/admin/(secure)/provider-models/page.tsx
@@ -0,0 +1,52 @@
+"use client";
+
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { useState } from "react";
+
+import { api } from "@/lib/api";
+
+export default function ProviderModelsPage() {
+  const [form, setForm] = useState({
+    provider_account_id: 1,
+    model_code: "sora-2-pro",
+    model_name: "Sora 2 Pro",
+    request_content_type: "multipart/form-data",
+    supports_text_to_video: true,
+    supports_image_to_video: true,
+    supports_video_reference: false,
+    supports_audio_reference: false,
+    supports_generate_audio: true,
+    supports_remix: false,
+    supports_webhook: true,
+    min_duration: 4,
+    max_duration: 12,
+    default_ratio: "16:9",
+    default_resolution: "1280x720",
+    status: 1,
+  });
+  const query = useQuery({
+    queryKey: ["provider-models"],
+    queryFn: () => api.get("/api/v1/admin/provider-models"),
+  });
+  const createMutation = useMutation({
+    mutationFn: () => api.post("/api/v1/admin/provider-models", form),
+    onSuccess: () => query.refetch(),
+  });
+
+  return (
+    <div className="two-col-grid">
+      <section className="panel">
+        <h3>新增供应商模型</h3>
+        <pre className="code-block">{JSON.stringify(form, null, 2)}</pre>
+        <button className="primary-button" style={{ marginTop: 16 }} onClick={() => createMutation.mutate()}>
+          创建供应商模型
+        </button>
+      </section>
+      <section className="panel">
+        <h3>当前模型</h3>
+        <pre className="code-block">{JSON.stringify(query.data ?? [], null, 2)}</pre>
+      </section>
+    </div>
+  );
+}
+
--- a/frontend-admin/src/app/admin/(secure)/recharge-orders/page.tsx
+++ b/frontend-admin/src/app/admin/(secure)/recharge-orders/page.tsx
@@ -0,0 +1,54 @@
+"use client";
+
+import { useMutation, useQuery } from "@tanstack/react-query";
+
+import { StatusBadge } from "@/components/status-badge";
+import { api } from "@/lib/api";
+
+type OrderRow = {
+  id: number;
+  orderNo: string;
+  userId: number;
+  payAmount: string;
+  arrivalPoints: number;
+  status: string;
+  paymentChannelCode: string;
+};
+
+export default function RechargeOrdersPage() {
+  const ordersQuery = useQuery({
+    queryKey: ["admin-orders"],
+    queryFn: () => api.get<OrderRow[]>("/api/v1/admin/recharge-orders"),
+  });
+  const repairMutation = useMutation({
+    mutationFn: (orderId: number) => api.post(`/api/v1/admin/recharge-orders/${orderId}/repair`),
+    onSuccess: () => ordersQuery.refetch(),
+  });
+
+  return (
+    <section className="panel">
+      <h3>充值订单</h3>
+      <div className="list-grid">
+        {ordersQuery.data?.map((order) => (
+          <div className="list-item" key={order.id}>
+            <div className="toolbar">
+              <strong>{order.orderNo}</strong>
+              <StatusBadge value={order.status} />
+            </div>
+            <div className="muted">
+              用户 {order.userId} · {order.payAmount} 元 · 到账 {order.arrivalPoints} 积分
+            </div>
+            <button
+              className="ghost-button"
+              style={{ marginTop: 12 }}
+              onClick={() => repairMutation.mutate(order.id)}
+            >
+              人工补单
+            </button>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}
+
--- a/frontend-admin/src/app/admin/(secure)/redeem-codes/page.tsx
+++ b/frontend-admin/src/app/admin/(secure)/redeem-codes/page.tsx
@@ -0,0 +1,107 @@
+"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 RedeemCodeRow = {
+  id: number;
+  batchNo: string;
+  redeemCode: string;
+  points: number;
+  status: string;
+};
+
+export default function RedeemCodesPage() {
+  const [form, setForm] = useState({
+    batch_no: "OPS2026",
+    points: 800,
+    quantity: 3,
+    remark: "ops batch",
+  });
+  const codesQuery = useQuery({
+    queryKey: ["admin-redeem-codes"],
+    queryFn: () => api.get<RedeemCodeRow[]>("/api/v1/admin/redeem-codes"),
+  });
+  const createMutation = useMutation({
+    mutationFn: () => api.post("/api/v1/admin/redeem-codes/batch-create", form),
+    onSuccess: () => codesQuery.refetch(),
+  });
+  const disableMutation = useMutation({
+    mutationFn: (id: number) => api.put(`/api/v1/admin/redeem-codes/${id}/disable`),
+    onSuccess: () => codesQuery.refetch(),
+  });
+
+  return (
+    <div className="two-col-grid">
+      <section className="panel">
+        <h3>批量生成兑换密钥</h3>
+        <div className="form-stack">
+          <label className="field-label">
+            批次号
+            <input
+              value={form.batch_no}
+              onChange={(event) =>
+                setForm((previous) => ({ ...previous, batch_no: event.target.value }))
+              }
+            />
+          </label>
+          <label className="field-label">
+            积分
+            <input
+              type="number"
+              value={form.points}
+              onChange={(event) =>
+                setForm((previous) => ({
+                  ...previous,
+                  points: Number(event.target.value),
+                }))
+              }
+            />
+          </label>
+          <label className="field-label">
+            数量
+            <input
+              type="number"
+              value={form.quantity}
+              onChange={(event) =>
+                setForm((previous) => ({
+                  ...previous,
+                  quantity: Number(event.target.value),
+                }))
+              }
+            />
+          </label>
+          <button className="primary-button" onClick={() => createMutation.mutate()}>
+            生成兑换码
+          </button>
+        </div>
+      </section>
+
+      <section className="panel">
+        <h3>兑换码列表</h3>
+        <div className="list-grid">
+          {codesQuery.data?.map((item) => (
+            <div className="list-item" key={item.id}>
+              <div className="toolbar">
+                <strong>{item.redeemCode}</strong>
+                <StatusBadge value={item.status} />
+              </div>
+              <div className="muted">{item.batchNo} · {item.points} 积分</div>
+              <button
+                className="danger-button"
+                style={{ marginTop: 12 }}
+                onClick={() => disableMutation.mutate(item.id)}
+              >
+                禁用
+              </button>
+            </div>
+          ))}
+        </div>
+      </section>
+    </div>
+  );
+}
+
--- a/frontend-admin/src/app/admin/(secure)/system-config/page.tsx
+++ b/frontend-admin/src/app/admin/(secure)/system-config/page.tsx
@@ -0,0 +1,65 @@
+"use client";
+
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { useState } from "react";
+
+import { api } from "@/lib/api";
+
+type ConfigRow = {
+  configKey: string;
+  configValue: string;
+  groupName: string;
+};
+
+export default function SystemConfigPage() {
+  const [form, setForm] = useState({
+    config_key: "site.notice",
+    config_value: "当前为本地联调环境。",
+    value_type: "string",
+    group_name: "site",
+    description: "公告",
+    is_public: true,
+  });
+  const query = useQuery({
+    queryKey: ["system-config"],
+    queryFn: () => api.get<ConfigRow[]>("/api/v1/admin/system-config"),
+  });
+  const mutation = useMutation({
+    mutationFn: () => api.put("/api/v1/admin/system-config", form),
+    onSuccess: () => query.refetch(),
+  });
+
+  return (
+    <div className="two-col-grid">
+      <section className="panel">
+        <h3>更新系统配置</h3>
+        <div className="form-stack">
+          {Object.entries(form).map(([key, value]) => (
+            <label className="field-label" key={key}>
+              {key}
+              <input
+                value={String(value)}
+                onChange={(event) =>
+                  setForm((previous) => ({
+                    ...previous,
+                    [key]:
+                      typeof value === "boolean"
+                        ? event.target.value === "true"
+                        : event.target.value,
+                  }))
+                }
+              />
+            </label>
+          ))}
+          <button className="primary-button" onClick={() => mutation.mutate()}>
+            保存配置
+          </button>
+        </div>
+      </section>
+      <section className="panel">
+        <h3>配置清单</h3>
+        <pre className="code-block">{JSON.stringify(query.data ?? [], null, 2)}</pre>
+      </section>
+    </div>
+  );
+}
--- a/frontend-admin/src/app/admin/(secure)/users/page.tsx
+++ b/frontend-admin/src/app/admin/(secure)/users/page.tsx
@@ -0,0 +1,95 @@
+"use client";
+
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { useState } from "react";
+
+import { api } from "@/lib/api";
+
+type UserRow = {
+  id: number;
+  publicId: string;
+  username: string;
+  nickname: string;
+  email: string;
+  status: number;
+  createdAt: string;
+};
+
+export default function UsersPage() {
+  const [adjustForm, setAdjustForm] = useState({
+    userId: 1,
+    amountPoints: 100,
+    reason: "manual bonus",
+  });
+  const usersQuery = useQuery({
+    queryKey: ["admin-users"],
+    queryFn: () => api.get<UserRow[]>("/api/v1/admin/users"),
+  });
+  const adjustMutation = useMutation({
+    mutationFn: () =>
+      api.post(`/api/v1/admin/users/${adjustForm.userId}/wallet-adjust`, adjustForm),
+  });
+
+  return (
+    <div className="two-col-grid">
+      <section className="panel">
+        <h3>用户列表</h3>
+        <div className="list-grid">
+          {usersQuery.data?.map((user) => (
+            <div className="list-item" key={user.id}>
+              <strong>{user.nickname || user.username || user.publicId}</strong>
+              <div className="muted">
+                #{user.id} · {user.email} · 状态 {user.status}
+              </div>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      <section className="panel">
+        <h3>人工调账</h3>
+        <div className="form-stack">
+          <label className="field-label">
+            用户 ID
+            <input
+              type="number"
+              value={adjustForm.userId}
+              onChange={(event) =>
+                setAdjustForm((previous) => ({
+                  ...previous,
+                  userId: Number(event.target.value),
+                }))
+              }
+            />
+          </label>
+          <label className="field-label">
+            调整积分
+            <input
+              type="number"
+              value={adjustForm.amountPoints}
+              onChange={(event) =>
+                setAdjustForm((previous) => ({
+                  ...previous,
+                  amountPoints: Number(event.target.value),
+                }))
+              }
+            />
+          </label>
+          <label className="field-label">
+            原因
+            <input
+              value={adjustForm.reason}
+              onChange={(event) =>
+                setAdjustForm((previous) => ({ ...previous, reason: event.target.value }))
+              }
+            />
+          </label>
+          <button className="primary-button" onClick={() => adjustMutation.mutate()}>
+            执行调账
+          </button>
+        </div>
+      </section>
+    </div>
+  );
+}
+
--- a/frontend-admin/src/app/admin/(secure)/video-model-bindings/page.tsx
+++ b/frontend-admin/src/app/admin/(secure)/video-model-bindings/page.tsx
@@ -0,0 +1,42 @@
+"use client";
+
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { useState } from "react";
+
+import { api } from "@/lib/api";
+
+export default function VideoModelBindingsPage() {
+  const [form, setForm] = useState({
+    video_model_id: 1,
+    provider_model_id: 1,
+    routing_priority: 20,
+    is_primary: false,
+    status: 1,
+    timeout_seconds_override: 90,
+  });
+  const query = useQuery({
+    queryKey: ["video-model-bindings"],
+    queryFn: () => api.get("/api/v1/admin/video-model-bindings"),
+  });
+  const mutation = useMutation({
+    mutationFn: () => api.post("/api/v1/admin/video-model-bindings", form),
+    onSuccess: () => query.refetch(),
+  });
+
+  return (
+    <div className="two-col-grid">
+      <section className="panel">
+        <h3>新增绑定</h3>
+        <pre className="code-block">{JSON.stringify(form, null, 2)}</pre>
+        <button className="primary-button" style={{ marginTop: 16 }} onClick={() => mutation.mutate()}>
+          创建绑定
+        </button>
+      </section>
+      <section className="panel">
+        <h3>绑定列表</h3>
+        <pre className="code-block">{JSON.stringify(query.data ?? [], null, 2)}</pre>
+      </section>
+    </div>
+  );
+}
+
--- a/frontend-admin/src/app/admin/(secure)/video-models/page.tsx
+++ b/frontend-admin/src/app/admin/(secure)/video-models/page.tsx
@@ -0,0 +1,45 @@
+"use client";
+
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { useState } from "react";
+
+import { api } from "@/lib/api";
+
+export default function VideoModelsPage() {
+  const [form, setForm] = useState({
+    model_key: "cinema-pro",
+    model_name: "影院视频",
+    frontend_title: "影院视频",
+    frontend_description: "偏高质量的长镜头生成。",
+    default_duration_seconds: 8,
+    default_ratio: "16:9",
+    default_resolution: "1280x720",
+    status: 1,
+    sort_order: 40,
+  });
+  const query = useQuery({
+    queryKey: ["video-models-admin"],
+    queryFn: () => api.get("/api/v1/admin/video-models"),
+  });
+  const mutation = useMutation({
+    mutationFn: () => api.post("/api/v1/admin/video-models", form),
+    onSuccess: () => query.refetch(),
+  });
+
+  return (
+    <div className="two-col-grid">
+      <section className="panel">
+        <h3>新增平台视频模型</h3>
+        <pre className="code-block">{JSON.stringify(form, null, 2)}</pre>
+        <button className="primary-button" style={{ marginTop: 16 }} onClick={() => mutation.mutate()}>
+          创建平台模型
+        </button>
+      </section>
+      <section className="panel">
+        <h3>平台模型列表</h3>
+        <pre className="code-block">{JSON.stringify(query.data ?? [], null, 2)}</pre>
+      </section>
+    </div>
+  );
+}
+
--- a/frontend-admin/src/app/admin/(secure)/video-tasks/page.tsx
+++ b/frontend-admin/src/app/admin/(secure)/video-tasks/page.tsx
@@ -0,0 +1,59 @@
+"use client";
+
+import { useMutation, useQuery } from "@tanstack/react-query";
+
+import { StatusBadge } from "@/components/status-badge";
+import { api } from "@/lib/api";
+
+type TaskRow = {
+  id: number;
+  taskNo: string;
+  taskStatus: string;
+  estimatedPoints: number;
+  finalPoints: number;
+  resultVideoUrl: string;
+};
+
+export default function VideoTasksPage() {
+  const query = useQuery({
+    queryKey: ["admin-video-tasks"],
+    queryFn: () => api.get<TaskRow[]>("/api/v1/admin/video-tasks"),
+    refetchInterval: 4_000,
+  });
+  const retryMutation = useMutation({
+    mutationFn: (taskId: number) => api.post(`/api/v1/admin/video-tasks/${taskId}/retry`),
+    onSuccess: () => query.refetch(),
+  });
+  const refundMutation = useMutation({
+    mutationFn: (taskId: number) => api.post(`/api/v1/admin/video-tasks/${taskId}/refund`),
+    onSuccess: () => query.refetch(),
+  });
+
+  return (
+    <section className="panel">
+      <h3>视频任务</h3>
+      <div className="list-grid">
+        {query.data?.map((task) => (
+          <div className="list-item" key={task.id}>
+            <div className="toolbar">
+              <strong>{task.taskNo}</strong>
+              <StatusBadge value={task.taskStatus} />
+            </div>
+            <div className="muted">
+              预估 {task.estimatedPoints} · 最终 {task.finalPoints}
+            </div>
+            <div className="row" style={{ marginTop: 12 }}>
+              <button className="ghost-button" onClick={() => retryMutation.mutate(task.id)}>
+                重试
+              </button>
+              <button className="danger-button" onClick={() => refundMutation.mutate(task.id)}>
+                退款
+              </button>
+            </div>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}
+
--- a/frontend-admin/src/app/admin/login/page.tsx
+++ b/frontend-admin/src/app/admin/login/page.tsx
@@ -0,0 +1,79 @@
+"use client";
+
+import { startTransition, useState } from "react";
+import { useRouter } from "next/navigation";
+
+import { api, ApiError } from "@/lib/api";
+
+export default function AdminLoginPage() {
+  const router = useRouter();
+  const [form, setForm] = useState({
+    username: "admin",
+    password: "Admin@123456",
+  });
+  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/admin/auth/login", form);
+      startTransition(() => router.replace("/admin/dashboard"));
+    } catch (err) {
+      setError(err instanceof ApiError ? err.message : "登录失败");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <div className="login-grid">
+      <section style={{ padding: 48, display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
+        <div>
+          <div className="brand-kicker">Ops Console</div>
+          <h1 style={{ fontSize: 64, lineHeight: 0.95, margin: "12px 0", fontFamily: "var(--font-display)" }}>
+            管好模型、价格、奖励、订单和任务链路。
+          </h1>
+          <p className="muted" style={{ maxWidth: 580 }}>
+            后台聚焦两件事：配置业务规则，以及处理异常链路。默认已创建管理员账号，适合直接联调整条 MVP。
+          </p>
+        </div>
+      </section>
+
+      <section className="fullscreen-shell">
+        <form className="auth-card" onSubmit={handleSubmit}>
+          <div className="brand-kicker">AIVideo Admin</div>
+          <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
+                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" type="submit">
+              {loading ? "登录中..." : "进入后台"}
+            </button>
+          </div>
+        </form>
+      </section>
+    </div>
+  );
+}
+
--- a/frontend-admin/src/app/favicon.ico
+++ b/frontend-admin/src/app/favicon.ico
--- a/frontend-admin/src/app/globals.css
+++ b/frontend-admin/src/app/globals.css
@@ -0,0 +1,309 @@
+@import "tailwindcss";
+
+:root {
+  --bg: #f4f3ef;
+  --surface: rgba(255, 255, 255, 0.86);
+  --ink: #141b24;
+  --muted: #667281;
+  --line: rgba(20, 27, 36, 0.1);
+  --accent: #0d6b78;
+  --accent-soft: rgba(13, 107, 120, 0.12);
+  --success: #1b8d62;
+  --warn: #b9770e;
+  --danger: #bb3e3e;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  color: var(--ink);
+  font-family: var(--font-body), sans-serif;
+  background:
+    radial-gradient(circle at top left, rgba(13, 107, 120, 0.13), transparent 24%),
+    radial-gradient(circle at bottom right, rgba(45, 69, 122, 0.1), transparent 22%),
+    linear-gradient(180deg, #faf8f2 0%, #efebe2 100%);
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+button,
+input,
+select,
+textarea {
+  font: inherit;
+}
+
+.fullscreen-shell {
+  min-height: 100vh;
+  display: grid;
+  place-items: center;
+}
+
+.login-grid,
+.shell-grid {
+  min-height: 100vh;
+  display: grid;
+}
+
+.login-grid {
+  grid-template-columns: 1fr 420px;
+}
+
+.shell-grid {
+  grid-template-columns: 300px 1fr;
+}
+
+.shell-sidebar {
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  border-right: 1px solid var(--line);
+  background: rgba(255, 255, 255, 0.62);
+  backdrop-filter: blur(16px);
+}
+
+.brand-kicker,
+.header-kicker {
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.16em;
+  color: var(--accent);
+}
+
+.brand-block h1 {
+  margin: 8px 0 12px;
+  font-size: 30px;
+  font-family: var(--font-display), sans-serif;
+}
+
+.sidebar-nav {
+  display: grid;
+  gap: 8px;
+}
+
+.nav-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 13px 15px;
+  border-radius: 16px;
+  color: var(--muted);
+}
+
+.nav-item.active {
+  background: var(--accent-soft);
+  color: var(--ink);
+  font-weight: 700;
+}
+
+.shell-main {
+  padding: 24px;
+}
+
+.shell-content {
+  display: grid;
+  gap: 18px;
+}
+
+.panel,
+.profile-card,
+.stat-card,
+.pulse-card,
+.auth-card {
+  border-radius: 22px;
+  border: 1px solid var(--line);
+  background: var(--surface);
+  box-shadow: 0 16px 52px rgba(20, 27, 36, 0.08);
+}
+
+.panel,
+.stat-card,
+.auth-card {
+  padding: 22px;
+}
+
+.profile-card {
+  padding: 16px;
+  margin-top: auto;
+  display: grid;
+  gap: 12px;
+}
+
+.profile-name {
+  font-weight: 700;
+}
+
+.profile-meta,
+.muted {
+  color: var(--muted);
+}
+
+.toolbar,
+.row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+
+.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: 1fr 1fr;
+}
+
+.panel h3,
+.stat-card h3,
+.auth-card h3 {
+  margin: 0 0 14px;
+  font-size: 20px;
+  font-family: var(--font-display), sans-serif;
+}
+
+.value {
+  font-size: 30px;
+  font-family: var(--font-display), sans-serif;
+}
+
+.list-grid {
+  display: grid;
+  gap: 12px;
+}
+
+.list-item {
+  padding: 15px;
+  border: 1px solid var(--line);
+  border-radius: 16px;
+  background: rgba(255, 255, 255, 0.8);
+}
+
+.mini-grid {
+  display: grid;
+  gap: 12px;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+}
+
+.form-stack {
+  display: grid;
+  gap: 14px;
+}
+
+.field-label {
+  display: grid;
+  gap: 8px;
+  color: var(--muted);
+}
+
+.field-label input,
+.field-label select,
+.field-label textarea {
+  width: 100%;
+  padding: 13px 15px;
+  border: 1px solid rgba(20, 27, 36, 0.14);
+  border-radius: 14px;
+  background: white;
+}
+
+.field-label textarea {
+  min-height: 110px;
+  resize: vertical;
+}
+
+.primary-button,
+.ghost-button,
+.danger-button {
+  border: 0;
+  border-radius: 14px;
+  padding: 12px 16px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  cursor: pointer;
+}
+
+.primary-button {
+  background: linear-gradient(135deg, #0d6b78 0%, #1d94a4 100%);
+  color: white;
+}
+
+.ghost-button {
+  background: rgba(20, 27, 36, 0.06);
+}
+
+.danger-button {
+  background: rgba(187, 62, 62, 0.12);
+  color: var(--danger);
+}
+
+.status-badge {
+  padding: 6px 10px;
+  border-radius: 999px;
+  font-size: 12px;
+  font-weight: 700;
+  text-transform: uppercase;
+}
+
+.tone-soft {
+  background: rgba(20, 27, 36, 0.08);
+}
+
+.tone-success {
+  background: rgba(27, 141, 98, 0.12);
+  color: var(--success);
+}
+
+.tone-warn {
+  background: rgba(185, 119, 14, 0.12);
+  color: var(--warn);
+}
+
+.tone-danger {
+  background: rgba(187, 62, 62, 0.12);
+  color: var(--danger);
+}
+
+.tone-ghost {
+  background: rgba(102, 114, 129, 0.14);
+  color: var(--muted);
+}
+
+.code-block {
+  margin: 0;
+  padding: 16px;
+  border-radius: 16px;
+  background: #101620;
+  color: #d8e1f5;
+  overflow: auto;
+  font-size: 13px;
+}
+
+@media (max-width: 1120px) {
+  .login-grid,
+  .shell-grid,
+  .two-col-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
--- a/frontend-admin/src/app/layout.tsx
+++ b/frontend-admin/src/app/layout.tsx
@@ -0,0 +1,37 @@
+import type { Metadata } from "next";
+import { IBM_Plex_Sans, 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 = IBM_Plex_Sans({
+  subsets: ["latin"],
+  variable: "--font-body",
+  weight: ["400", "500", "600", "700"],
+});
+
+export const metadata: Metadata = {
+  title: "AIVideo Admin",
+  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>
+  );
+}
+
--- a/frontend-admin/src/app/page.tsx
+++ b/frontend-admin/src/app/page.tsx
@@ -0,0 +1,6 @@
+import { redirect } from "next/navigation";
+
+export default function HomePage() {
+  redirect("/admin/dashboard");
+}
+
--- a/frontend-admin/src/components/admin-shell.tsx
+++ b/frontend-admin/src/components/admin-shell.tsx
@@ -0,0 +1,117 @@
+"use client";
+
+import { useQuery } from "@tanstack/react-query";
+import clsx from "clsx";
+import {
+  Blocks,
+  ChartColumnBig,
+  Coins,
+  KeySquare,
+  Link2,
+  LogOut,
+  Package2,
+  Settings2,
+  Users,
+  Workflow,
+} from "lucide-react";
+import Link from "next/link";
+import { usePathname, useRouter } from "next/navigation";
+import { useEffect } 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 },
+];
+
+export function AdminShell({ children }: { children: React.ReactNode }) {
+  const pathname = usePathname();
+  const router = useRouter();
+  const meQuery = useQuery({
+    queryKey: ["admin-me"],
+    queryFn: () => api.get("/api/v1/admin/auth/me"),
+  });
+
+  useEffect(() => {
+    if (meQuery.error) {
+      router.replace("/admin/login");
+    }
+  }, [meQuery.error, router]);
+
+  if (meQuery.isLoading || !meQuery.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">AIVIDEO ADMIN</span>
+          <h1>控制后台</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">
+              {(meQuery.data as { nickname: string }).nickname}
+            </div>
+            <div className="profile-meta">
+              {(meQuery.data as { username: string }).username}
+            </div>
+          </div>
+          <button
+            className="ghost-button"
+            onClick={async () => {
+              await api.post("/api/v1/admin/auth/logout");
+              router.replace("/admin/login");
+            }}
+          >
+            <LogOut size={16} />
+            退出
+          </button>
+        </div>
+      </aside>
+
+      <main className="shell-main">
+        <section className="shell-content">{children}</section>
+      </main>
+    </div>
+  );
+}
+
--- a/frontend-admin/src/components/providers.tsx
+++ b/frontend-admin/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>
+  );
+}
+
--- a/frontend-admin/src/components/status-badge.tsx
+++ b/frontend-admin/src/components/status-badge.tsx
@@ -0,0 +1,31 @@
+import clsx from "clsx";
+
+const tones: Record<string, string> = {
+  paid: "success",
+  pending: "soft",
+  succeeded: "success",
+  running: "warn",
+  failed: "danger",
+  unused: "success",
+  used: "ghost",
+  disabled: "danger",
+  rewarded: "success",
+};
+
+export function StatusBadge({ value }: { value: string }) {
+  const tone = tones[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>
+  );
+}
+
--- a/frontend-admin/src/lib/api.ts
+++ b/frontend-admin/src/lib/api.ts
@@ -0,0 +1,60 @@
+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_ADMIN_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: JSON.stringify(body ?? {}),
+    }),
+  put: <T>(path: string, body?: unknown) =>
+    request<T>(path, {
+      method: "PUT",
+      body: JSON.stringify(body ?? {}),
+    }),
+};
--- a/frontend-admin/tsconfig.json
+++ b/frontend-admin/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"]
+}
				`@@ -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>`
				`@@ -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>
				`@@ -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>
				`@@ -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>`