feat: initialize aivideo project

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

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

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

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

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>;
+}
+

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

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

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

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

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

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

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

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

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

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

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

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;
+  }
+}
+

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

frontend-admin/src/app/page.tsx

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

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

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

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

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 ?? {}),
+    }),
+};