feat: expand platform management, admin controls, and learning workflows

frontend/src/app/backend-logs/page.tsx

@@ -0,0 +1,383 @@
+"use client";
+
+import Link from "next/link";
+import { useEffect, useState } from "react";
+
+import { apiFetch } from "@/lib/api";
+import { readToken } from "@/lib/auth";
+import { useI18nText } from "@/lib/i18n";
+
+type BackendLogItem = {
+  id: number;
+  problem_id: number;
+  problem_title: string;
+  status: string;
+  progress: number;
+  message: string;
+  created_by: number;
+  max_solutions: number;
+  created_at: number;
+  started_at: number | null;
+  finished_at: number | null;
+  updated_at: number;
+  runner_pending: boolean;
+};
+
+type QueueJobItem = {
+  id: number;
+  problem_id: number;
+  problem_title: string;
+  status: string;
+  progress: number;
+  message: string;
+  updated_at: number;
+  started_at?: number | null;
+};
+
+type BackendLogsResp = {
+  items: BackendLogItem[];
+  running_jobs: QueueJobItem[];
+  queued_jobs: QueueJobItem[];
+  running_problem_ids: number[];
+  queued_problem_ids: number[];
+  running_count: number;
+  queued_count_preview: number;
+  pending_jobs: number;
+  missing_problems: number;
+  limit: number;
+  running_limit: number;
+  queued_limit: number;
+};
+
+type TriggerMissingResp = {
+  started: boolean;
+  missing_total: number;
+  candidate_count: number;
+  queued_count: number;
+  pending_jobs: number;
+  limit: number;
+  max_solutions: number;
+};
+
+function fmtTs(v: number | null | undefined): string {
+  if (!v) return "-";
+  return new Date(v * 1000).toLocaleString();
+}
+
+export default function BackendLogsPage() {
+  const { tx } = useI18nText();
+  const [token, setToken] = useState("");
+  const [checkingAdmin, setCheckingAdmin] = useState(true);
+  const [isAdmin, setIsAdmin] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+  const [limit, setLimit] = useState(100);
+  const [pendingJobs, setPendingJobs] = useState(0);
+  const [missingProblems, setMissingProblems] = useState(0);
+  const [items, setItems] = useState<BackendLogItem[]>([]);
+  const [runningJobs, setRunningJobs] = useState<QueueJobItem[]>([]);
+  const [queuedJobs, setQueuedJobs] = useState<QueueJobItem[]>([]);
+  const [runningIds, setRunningIds] = useState<number[]>([]);
+  const [queuedIds, setQueuedIds] = useState<number[]>([]);
+  const [triggerLoading, setTriggerLoading] = useState(false);
+  const [triggerMsg, setTriggerMsg] = useState("");
+
+  const refresh = async () => {
+    if (!isAdmin || !token) return;
+    setLoading(true);
+    setError("");
+    try {
+      const data = await apiFetch<BackendLogsResp>(
+        `/api/v1/backend/logs?limit=${limit}&running_limit=20&queued_limit=100`,
+        {},
+        token
+      );
+      setPendingJobs(data.pending_jobs ?? 0);
+      setMissingProblems(data.missing_problems ?? 0);
+      setItems(data.items ?? []);
+      setRunningJobs(data.running_jobs ?? []);
+      setQueuedJobs(data.queued_jobs ?? []);
+      setRunningIds(data.running_problem_ids ?? []);
+      setQueuedIds(data.queued_problem_ids ?? []);
+    } catch (e: unknown) {
+      setError(String(e));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    let canceled = false;
+    const checkAdmin = async () => {
+      setCheckingAdmin(true);
+      const tk = readToken();
+      if (!canceled) setToken(tk);
+      if (!tk) {
+        if (!canceled) {
+          setIsAdmin(false);
+          setError(tx("请先登录管理员账号", "Please sign in with admin account first"));
+          setCheckingAdmin(false);
+        }
+        return;
+      }
+      try {
+        const me = await apiFetch<{ username?: string }>("/api/v1/me", {}, tk);
+        const allowed = (me?.username ?? "") === "admin";
+        if (!canceled) {
+          setIsAdmin(allowed);
+          if (!allowed) {
+            setError(tx("仅管理员可查看后台日志", "Backend logs are visible to admin only"));
+          } else {
+            setError("");
+          }
+        }
+      } catch (e: unknown) {
+        if (!canceled) {
+          setIsAdmin(false);
+          setError(String(e));
+        }
+      } finally {
+        if (!canceled) setCheckingAdmin(false);
+      }
+    };
+    void checkAdmin();
+    return () => {
+      canceled = true;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    if (!isAdmin || !token) return;
+    void refresh();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isAdmin, token, limit]);
+
+  const triggerMissingSolutions = async () => {
+    if (!isAdmin || !token) {
+      setError(tx("请先登录管理员账号", "Please sign in with admin account first"));
+      return;
+    }
+    setTriggerLoading(true);
+    setTriggerMsg("");
+    setError("");
+    try {
+      const data = await apiFetch<TriggerMissingResp>(
+        "/api/v1/backend/solutions/generate-missing",
+        {
+          method: "POST",
+          body: JSON.stringify({ limit: 50000, max_solutions: 3 }),
+        },
+        token
+      );
+      setPendingJobs(data.pending_jobs ?? 0);
+      setTriggerMsg(
+        tx(
+          `已触发异步任务：候选 ${data.candidate_count} 题，入队 ${data.queued_count} 题（当前待处理 ${data.pending_jobs}）。`,
+          `Async trigger submitted: candidate ${data.candidate_count}, queued ${data.queued_count} (pending ${data.pending_jobs}).`
+        )
+      );
+      await refresh();
+    } catch (e: unknown) {
+      setError(String(e));
+    } finally {
+      setTriggerLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    if (!isAdmin || !token) return;
+    const timer = setInterval(() => {
+      void refresh();
+    }, 5000);
+    return () => clearInterval(timer);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isAdmin, token, limit]);
+
+  if (checkingAdmin) {
+    return (
+      <main className="mx-auto max-w-7xl px-3 py-8 text-sm text-zinc-600">
+        {tx("正在校验管理员权限...", "Checking admin access...")}
+      </main>
+    );
+  }
+
+  if (!isAdmin) {
+    return (
+      <main className="mx-auto max-w-5xl px-3 py-8">
+        <h1 className="text-xl font-semibold">{tx("后台日志（题解异步队列）", "Backend Logs (Async Solution Queue)")}</h1>
+        <p className="mt-3 text-sm text-red-600">
+          {error || tx("仅管理员可查看此页面", "This page is available for admin only")}
+        </p>
+      </main>
+    );
+  }
+
+  return (
+    <main className="mx-auto max-w-7xl px-3 py-6 max-[390px]:px-2 sm:px-4 md:px-6 md:py-8">
+      <div className="flex flex-wrap items-center justify-between gap-3">
+        <h1 className="text-xl font-semibold max-[390px]:text-lg sm:text-2xl">
+          {tx("后台日志（题解异步队列）", "Backend Logs (Async Solution Queue)")}
+        </h1>
+        <div className="flex w-full flex-wrap items-center gap-2 text-sm sm:w-auto sm:justify-end">
+          <span className={pendingJobs > 0 ? "text-emerald-700" : "text-zinc-600"}>
+            {tx("待处理任务", "Pending jobs")} {pendingJobs}
+          </span>
+          <span className={missingProblems > 0 ? "text-amber-700" : "text-zinc-600"}>
+            {tx("缺失答案题目", "Problems missing answers")} {missingProblems}
+          </span>
+          <button
+            className="rounded border px-3 py-1 disabled:opacity-50"
+            onClick={() => void triggerMissingSolutions()}
+            disabled={triggerLoading}
+          >
+            {triggerLoading ? tx("手动补全中...", "Triggering...") : tx("手动补全（可选）", "Manual fill (optional)")}
+          </button>
+          <select
+            className="rounded border px-2 py-1"
+            value={limit}
+            onChange={(e) => setLimit(Number(e.target.value))}
+          >
+            <option value={50}>{tx("最近 50 条", "Latest 50")}</option>
+            <option value={100}>{tx("最近 100 条", "Latest 100")}</option>
+            <option value={200}>{tx("最近 200 条", "Latest 200")}</option>
+          </select>
+          <button className="rounded border px-3 py-1 sm:ml-auto" onClick={() => void refresh()} disabled={loading}>
+            {tx("刷新", "Refresh")}
+          </button>
+        </div>
+      </div>
+
+      {error && <p className="mt-3 text-sm text-red-600">{error}</p>}
+      {triggerMsg && <p className="mt-3 text-sm text-emerald-700">{triggerMsg}</p>}
+      <p className="mt-3 text-xs text-zinc-500">
+        {tx(
+          "系统已自动单线程异步处理待队列任务，无需手工点击；上方按钮仅用于立即手动补全。",
+          "System auto-processes queued jobs in single-thread async mode; the button above is only for manual trigger."
+        )}
+      </p>
+      <section className="mt-4 grid gap-3 md:grid-cols-2">
+        <article className="rounded-xl border bg-white p-3">
+          <h2 className="text-sm font-medium">{tx("正在处理（Running）", "Running Jobs")}</h2>
+          <p className="mt-1 text-xs text-zinc-600">
+            {tx("当前题目 ID：", "Current problem IDs:")}
+            {runningIds.length ? runningIds.join(", ") : tx("无", "None")}
+          </p>
+          <ul className="mt-2 space-y-2 text-xs">
+            {runningJobs.map((job) => (
+              <li key={job.id} className="rounded border border-zinc-200 p-2">
+                <p>
+                  {tx("任务", "Job")} #{job.id} · {tx("题目", "Problem")} #{job.problem_id} {job.problem_title || tx("(未命名题目)", "(Untitled)")}
+                </p>
+                <p className="text-zinc-600">
+                  {tx("状态", "Status")} {job.status} · {tx("进度", "Progress")} {job.progress}% · {tx("开始", "Start")} {fmtTs(job.started_at ?? null)}
+                </p>
+                <p className="whitespace-pre-wrap break-words text-zinc-600">{job.message || "-"}</p>
+              </li>
+            ))}
+            {!runningJobs.length && <li className="text-zinc-500">{tx("当前无运行中的任务", "No running jobs")}</li>}
+          </ul>
+        </article>
+
+        <article className="rounded-xl border bg-white p-3">
+          <h2 className="text-sm font-medium">{tx("待处理队列（Queued）", "Queued Jobs")}</h2>
+          <p className="mt-1 text-xs text-zinc-600">
+            {tx("待处理题目 ID（预览）：", "Queued problem IDs (preview):")}
+            {queuedIds.length ? queuedIds.join(", ") : tx("无", "None")}
+          </p>
+          <ul className="mt-2 max-h-56 space-y-2 overflow-auto text-xs">
+            {queuedJobs.map((job) => (
+              <li key={job.id} className="rounded border border-zinc-200 p-2">
+                <p>
+                  {tx("任务", "Job")} #{job.id} · {tx("题目", "Problem")} #{job.problem_id} {job.problem_title || tx("(未命名题目)", "(Untitled)")}
+                </p>
+                <p className="text-zinc-600">
+                  {tx("状态", "Status")} {job.status} · {tx("进度", "Progress")} {job.progress}% · {tx("更新", "Updated")} {fmtTs(job.updated_at)}
+                </p>
+                <p className="whitespace-pre-wrap break-words text-zinc-600">{job.message || "-"}</p>
+              </li>
+            ))}
+            {!queuedJobs.length && <li className="text-zinc-500">{tx("当前无待处理任务", "No queued jobs")}</li>}
+          </ul>
+        </article>
+      </section>
+
+      <section className="mt-4 rounded-xl border bg-white">
+        <div className="divide-y md:hidden">
+          {items.map((item) => (
+            <article key={item.id} className="space-y-2 p-3 text-xs">
+              <div className="flex items-center justify-between gap-2">
+                <p className="font-medium">
+                  {tx("任务", "Job")} #{item.id}
+                </p>
+                <span className={item.runner_pending ? "text-emerald-700" : "text-zinc-700"}>
+                  {item.status} · {item.progress}%
+                </span>
+              </div>
+              <Link className="text-blue-600 hover:underline" href={`/problems/${item.problem_id}`}>
+                #{item.problem_id} {item.problem_title || tx("(未命名题目)", "(Untitled)")}
+              </Link>
+              <p className="whitespace-pre-wrap break-words text-zinc-600">{item.message || "-"}</p>
+              <p className="text-zinc-500">
+                {tx("创建", "Created")} {fmtTs(item.created_at)} · {tx("开始", "Start")} {fmtTs(item.started_at)} · {tx("结束", "End")} {fmtTs(item.finished_at)}
+              </p>
+            </article>
+          ))}
+          {!loading && items.length === 0 && (
+            <p className="px-3 py-6 text-center text-sm text-zinc-500">{tx("暂无后台任务日志", "No backend logs yet")}</p>
+          )}
+        </div>
+
+        <div className="hidden overflow-x-auto md:block">
+          <table className="min-w-full text-xs">
+            <thead className="bg-zinc-100 text-left">
+              <tr>
+                <th className="px-2 py-2">{tx("任务ID", "Job ID")}</th>
+                <th className="px-2 py-2">{tx("题目", "Problem")}</th>
+                <th className="px-2 py-2">{tx("状态", "Status")}</th>
+                <th className="px-2 py-2">{tx("进度", "Progress")}</th>
+                <th className="px-2 py-2">{tx("消息", "Message")}</th>
+                <th className="px-2 py-2">{tx("时间", "Time")}</th>
+              </tr>
+            </thead>
+            <tbody>
+              {items.map((item) => (
+                <tr key={item.id} className="border-t align-top">
+                  <td className="px-2 py-2 font-medium">{item.id}</td>
+                  <td className="max-w-[260px] px-2 py-2">
+                    <Link className="text-blue-600 hover:underline" href={`/problems/${item.problem_id}`}>
+                      #{item.problem_id} {item.problem_title || tx("(未命名题目)", "(Untitled)")}
+                    </Link>
+                  </td>
+                  <td className="px-2 py-2">
+                    <span className={item.runner_pending ? "text-emerald-700" : "text-zinc-700"}>
+                      {item.status}
+                    </span>
+                  </td>
+                  <td className="px-2 py-2">{item.progress}%</td>
+                  <td className="max-w-[420px] px-2 py-2">
+                    <div className="whitespace-pre-wrap break-words">{item.message || "-"}</div>
+                  </td>
+                  <td className="px-2 py-2 text-zinc-600">
+                    {tx("创建", "Created")} {fmtTs(item.created_at)}
+                    <br />
+                    {tx("开始", "Start")} {fmtTs(item.started_at)}
+                    <br />
+                    {tx("结束", "End")} {fmtTs(item.finished_at)}
+                  </td>
+                </tr>
+              ))}
+              {!loading && items.length === 0 && (
+                <tr>
+                  <td className="px-2 py-6 text-center text-zinc-500" colSpan={6}>
+                    {tx("暂无后台任务日志", "No backend logs yet")}
+                  </td>
+                </tr>
+              )}
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  );
+}