feat: merge admin routes into unified frontend

README.md

@@ -3,8 +3,7 @@
 基于 `docs/AI视频平台开发文档.md` 实现的单仓 AI 视频平台原型，包含：
 
 - `backend`：FastAPI + SQLAlchemy + Celery 风格任务链路
-- `frontend-web`：用户前台（Next.js）
-- `frontend-admin`：管理后台（Next.js）
+- `frontend-web`：统一前端（Next.js），同时承载用户前台与 `/admin` 管理后台
 - `sql`：初始化库表与基础种子数据
 - `deploy`：部署相关文件占位
 
@@ -14,7 +13,6 @@
 AIVideo/
   backend/
   frontend-web/
-  frontend-admin/
   docs/
   deploy/
   sql/
@@ -39,17 +37,11 @@ copy .env.example .env
 uvicorn app.main:app --reload --host 0.0.0.0 --port 8000
 ```
 
-### 3. 启动前台
+### 3. 启动统一前端
 
 ```bash
 npm install
-npm --workspace frontend-web run dev
-```
-
-### 4. 启动后台
-
-```bash
-npm --workspace frontend-admin run dev
+npm run dev
 ```
 
 ## 默认账号
@@ -57,9 +49,13 @@ npm --workspace frontend-admin run dev
 - 用户端：自行注册
 - 管理后台：`admin / Admin@123456`
 
+## 访问地址
+
+- 用户前台：`http://localhost:3000`
+- 管理后台：`http://localhost:3000/admin/login`
+
 ## 说明
 
 - 本地默认支持 mock OpenAI 与 mock Seedance 任务链路。
 - 若配置真实供应商账号与可访问的 `baseUrl`，后端会按对应协议发起真实请求。
 - 任务结果默认落到 `backend/storage_data`，并通过 `/storage` 暴露访问。
-

deploy/README.md

@@ -6,7 +6,6 @@ Recommended local stack:
 - `redis`: cache and async queue broker
 - `minio`: object storage
 - `backend`: FastAPI API service
-- `frontend-web`: user-facing Next.js app
-- `frontend-admin`: admin Next.js app
+- `frontend-web`: single Next.js app that serves both user pages and `/admin` backend pages
 
 Use the root `docker-compose.yml` for local integration.

frontend-web/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>
+  );
+}
+

frontend-web/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>
+  );
+}
+

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

@@ -0,0 +1,151 @@
+"use client";
+
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { 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 [signupDraft, setSignupDraft] = useState<{
+    enabled: boolean;
+    reward_points: number;
+    min_consume_points: number;
+    remark: string;
+  } | null>(null);
+  const [inviteDraft, setInviteDraft] = useState<{
+    enabled: boolean;
+    reward_points: number;
+    min_consume_points: number;
+    remark: string;
+  } | null>(null);
+  const signup = signupDraft ?? {
+    enabled: rulesQuery.data?.signupRewardEnabled ?? true,
+    reward_points: rulesQuery.data?.signupRewardPoints ?? 300,
+    min_consume_points: 0,
+    remark: "signup reward",
+  };
+  const invite = inviteDraft ?? {
+    enabled: rulesQuery.data?.inviteRewardEnabled ?? true,
+    reward_points: rulesQuery.data?.inviteRewardPoints ?? 500,
+    min_consume_points: rulesQuery.data?.inviteRewardMinConsumePoints ?? 100,
+    remark: "invite reward",
+  };
+
+  const signupMutation = useMutation({
+    mutationFn: () => api.put("/api/v1/admin/growth-rules/signup", signup),
+    onSuccess: () => {
+      setSignupDraft(null);
+      void rulesQuery.refetch();
+    },
+  });
+  const inviteMutation = useMutation({
+    mutationFn: () => api.put("/api/v1/admin/growth-rules/invite", invite),
+    onSuccess: () => {
+      setInviteDraft(null);
+      void 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) =>
+                setSignupDraft((previous) => ({
+                  ...(previous ?? signup),
+                  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) =>
+                setSignupDraft((previous) => ({
+                  ...(previous ?? signup),
+                  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) =>
+                setInviteDraft((previous) => ({
+                  ...(previous ?? invite),
+                  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) =>
+                setInviteDraft((previous) => ({
+                  ...(previous ?? invite),
+                  reward_points: Number(event.target.value),
+                }))
+              }
+            />
+          </label>
+          <label className="field-label">
+            最低有效消费
+            <input
+              type="number"
+              value={invite.min_consume_points}
+              onChange={(event) =>
+                setInviteDraft((previous) => ({
+                  ...(previous ?? invite),
+                  min_consume_points: Number(event.target.value),
+                }))
+              }
+            />
+          </label>
+          <button className="primary-button" onClick={() => inviteMutation.mutate()}>
+            保存邀请奖励
+          </button>
+        </div>
+      </section>
+    </div>
+  );
+}

frontend-web/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>
+  );
+}

frontend-web/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>;
+}
+

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

@@ -0,0 +1,42 @@
+"use client";
+
+import { useMutation, useQuery } from "@tanstack/react-query";
+
+import { api } from "@/lib/api";
+
+export default function PricingRulesPage() {
+  const form = {
+    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>
+  );
+}

frontend-web/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>
+  );
+}
+

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

@@ -0,0 +1,50 @@
+"use client";
+
+import { useMutation, useQuery } from "@tanstack/react-query";
+
+import { api } from "@/lib/api";
+
+export default function ProviderModelsPage() {
+  const form = {
+    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>
+  );
+}

frontend-web/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>
+  );
+}
+

frontend-web/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>
+  );
+}
+

frontend-web/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>
+  );
+}

frontend-web/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>
+  );
+}
+

frontend-web/src/app/admin/(secure)/video-model-bindings/page.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import { useMutation, useQuery } from "@tanstack/react-query";
+
+import { api } from "@/lib/api";
+
+export default function VideoModelBindingsPage() {
+  const form = {
+    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>
+  );
+}

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

@@ -0,0 +1,43 @@
+"use client";
+
+import { useMutation, useQuery } from "@tanstack/react-query";
+
+import { api } from "@/lib/api";
+
+export default function VideoModelsPage() {
+  const form = {
+    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>
+  );
+}

frontend-web/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>
+  );
+}
+

frontend-web/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>
+  );
+}
+

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

@@ -0,0 +1,5 @@
+import { redirect } from "next/navigation";
+
+export default function AdminEntryPage() {
+  redirect("/admin/dashboard");
+}

frontend-web/src/app/globals.css

@@ -97,6 +97,12 @@ textarea::placeholder {
     linear-gradient(160deg, rgba(10, 13, 21, 0.98) 0%, rgba(8, 10, 16, 0.98) 100%);
 }
 
+.login-grid {
+  min-height: 100vh;
+  display: grid;
+  grid-template-columns: 1fr 440px;
+}
+
 .auth-hero {
   padding: 56px;
   display: flex;
@@ -471,7 +477,8 @@ textarea::placeholder {
 .panel h3,
 .stat-card h3,
 .library-header h3,
-.workbench-header h3 {
+.workbench-header h3,
+.auth-card h3 {
   margin: 0 0 12px;
   font-size: 24px;
   font-family: var(--font-display), sans-serif;
@@ -1083,6 +1090,7 @@ textarea::placeholder {
 
 @media (max-width: 1100px) {
   .auth-grid,
+  .login-grid,
   .shell-grid {
     grid-template-columns: 1fr;
   }

frontend-web/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>
+  );
+}
+

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

@@ -12,6 +12,7 @@ const statusMap: Record<string, string> = {
   unused: "success",
   used: "ghost",
   disabled: "danger",
+  rewarded: "success",
 };
 
 const statusLabelMap: Record<string, string> = {
@@ -26,6 +27,7 @@ const statusLabelMap: Record<string, string> = {
   unused: "未使用",
   used: "已使用",
   disabled: "已停用",
+  rewarded: "已奖励",
 };
 
 export function StatusBadge({ value }: { value: string }) {

package-lock.json

@@ -8,12 +8,12 @@
       "name": "aivideo-monorepo",
       "version": "0.1.0",
       "workspaces": [
-        "frontend-web",
-        "frontend-admin"
+        "frontend-web"
       ]
     },
     "frontend-admin": {
       "version": "0.1.0",
+      "extraneous": true,
       "dependencies": {
         "@tanstack/react-query": "^5.90.5",
         "clsx": "^2.1.1",
@@ -3670,10 +3670,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/frontend-admin": {
-      "resolved": "frontend-admin",
-      "link": true
-    },
     "node_modules/frontend-web": {
       "resolved": "frontend-web",
       "link": true

package.json

@@ -3,14 +3,14 @@
   "private": true,
   "version": "0.1.0",
   "workspaces": [
-    "frontend-web",
-    "frontend-admin"
+    "frontend-web"
   ],
   "scripts": {
+    "dev": "npm --workspace frontend-web run dev",
     "dev:web": "npm --workspace frontend-web run dev",
-    "dev:admin": "npm --workspace frontend-admin run dev",
+    "build": "npm --workspace frontend-web run build",
     "build:web": "npm --workspace frontend-web run build",
-    "build:admin": "npm --workspace frontend-admin run build"
+    "start": "npm --workspace frontend-web run start",
+    "lint": "npm --workspace frontend-web run lint"
   }
 }
-

启动命令.txt

@@ -1,9 +1,11 @@
-
-python -m pip install -r requirements.txt
-  copy .env.example .env
-  uvicorn app.main:app --reload --host 0.0.0.0 --port 8000
-
-  cd D:\project\AIVideo
-  npm install
-  npm --workspace frontend-web run dev
-  npm --workspace frontend-admin run dev
+
+python -m pip install -r requirements.txt
+  copy .env.example .env
+  uvicorn app.main:app --reload --host 0.0.0.0 --port 8000
+
+  cd D:\project\AIVideo
+  npm install
+  npm run dev
+
+  用户前台：http://localhost:3000
+  管理后台：http://localhost:3000/admin/login