feat: rebuild CSP practice workflow, UX and automation

frontend/src/app/submissions/page.tsx

@@ -0,0 +1,119 @@
+"use client";
+
+import Link from "next/link";
+import { useEffect, useState } from "react";
+
+import { apiFetch } from "@/lib/api";
+
+type Submission = {
+  id: number;
+  user_id: number;
+  problem_id: number;
+  contest_id: number | null;
+  status: string;
+  score: number;
+  time_ms: number;
+  created_at: number;
+};
+
+type ListResp = { items: Submission[]; page: number; page_size: number };
+
+export default function SubmissionsPage() {
+  const [userId, setUserId] = useState("");
+  const [problemId, setProblemId] = useState("");
+  const [contestId, setContestId] = useState("");
+  const [items, setItems] = useState<Submission[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+
+  const load = async () => {
+    setLoading(true);
+    setError("");
+    try {
+      const params = new URLSearchParams();
+      if (userId) params.set("user_id", userId);
+      if (problemId) params.set("problem_id", problemId);
+      if (contestId) params.set("contest_id", contestId);
+      const data = await apiFetch<ListResp>(`/api/v1/submissions?${params.toString()}`);
+      setItems(data.items);
+    } catch (e: unknown) {
+      setError(String(e));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    void load();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <main className="mx-auto max-w-6xl px-6 py-8">
+      <h1 className="text-2xl font-semibold">提交记录</h1>
+
+      <div className="mt-4 grid gap-3 rounded-xl border bg-white p-4 md:grid-cols-4">
+        <input
+          className="rounded border px-3 py-2"
+          placeholder="user_id"
+          value={userId}
+          onChange={(e) => setUserId(e.target.value)}
+        />
+        <input
+          className="rounded border px-3 py-2"
+          placeholder="problem_id"
+          value={problemId}
+          onChange={(e) => setProblemId(e.target.value)}
+        />
+        <input
+          className="rounded border px-3 py-2"
+          placeholder="contest_id"
+          value={contestId}
+          onChange={(e) => setContestId(e.target.value)}
+        />
+        <button
+          className="rounded bg-zinc-900 px-4 py-2 text-white disabled:opacity-50"
+          onClick={() => void load()}
+          disabled={loading}
+        >
+          {loading ? "加载中..." : "筛选"}
+        </button>
+      </div>
+
+      {error && <p className="mt-3 text-sm text-red-600">{error}</p>}
+
+      <div className="mt-4 overflow-x-auto rounded-xl border bg-white">
+        <table className="min-w-full text-sm">
+          <thead className="bg-zinc-100 text-left">
+            <tr>
+              <th className="px-3 py-2">ID</th>
+              <th className="px-3 py-2">用户</th>
+              <th className="px-3 py-2">题目</th>
+              <th className="px-3 py-2">状态</th>
+              <th className="px-3 py-2">分数</th>
+              <th className="px-3 py-2">耗时(ms)</th>
+              <th className="px-3 py-2">详情</th>
+            </tr>
+          </thead>
+          <tbody>
+            {items.map((s) => (
+              <tr key={s.id} className="border-t">
+                <td className="px-3 py-2">{s.id}</td>
+                <td className="px-3 py-2">{s.user_id}</td>
+                <td className="px-3 py-2">{s.problem_id}</td>
+                <td className="px-3 py-2">{s.status}</td>
+                <td className="px-3 py-2">{s.score}</td>
+                <td className="px-3 py-2">{s.time_ms}</td>
+                <td className="px-3 py-2">
+                  <Link className="text-blue-600 underline" href={`/submissions/${s.id}`}>
+                    查看
+                  </Link>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </main>
+  );
+}