feat: rebuild CSP practice workflow, UX and automation
这个提交包含在：
Codex CLI
@@ -0,0 +1,508 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { useParams } from "next/navigation";
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
|
||||
import { CodeEditor } from "@/components/code-editor";
|
||||
import { MarkdownRenderer } from "@/components/markdown-renderer";
|
||||
import { apiFetch } from "@/lib/api";
|
||||
import { readToken } from "@/lib/auth";
|
||||
|
||||
type Problem = {
|
||||
id: number;
|
||||
title: string;
|
||||
statement_md: string;
|
||||
difficulty: number;
|
||||
source: string;
|
||||
statement_url: string;
|
||||
llm_profile_json: string;
|
||||
sample_input: string;
|
||||
sample_output: string;
|
||||
};
|
||||
|
||||
type LlmProfile = {
|
||||
title?: string;
|
||||
difficulty?: number;
|
||||
answer?: string;
|
||||
explanation?: string;
|
||||
knowledge_points?: string[];
|
||||
tags?: string[];
|
||||
statement_summary_md?: string;
|
||||
};
|
||||
|
||||
type Submission = {
|
||||
id: number;
|
||||
status: string;
|
||||
score: number;
|
||||
compile_log: string;
|
||||
runtime_log: string;
|
||||
created_at: number;
|
||||
};
|
||||
|
||||
type RunResult = {
|
||||
status: string;
|
||||
time_ms: number;
|
||||
stdout: string;
|
||||
stderr: string;
|
||||
compile_log: string;
|
||||
};
|
||||
|
||||
type DraftResp = {
|
||||
language: string;
|
||||
code: string;
|
||||
stdin: string;
|
||||
updated_at: number;
|
||||
};
|
||||
|
||||
type SolutionItem = {
|
||||
id: number;
|
||||
problem_id: number;
|
||||
variant: number;
|
||||
title: string;
|
||||
idea_md: string;
|
||||
explanation_md: string;
|
||||
code_cpp: string;
|
||||
complexity: string;
|
||||
tags_json: string;
|
||||
source: string;
|
||||
created_at: number;
|
||||
updated_at: number;
|
||||
};
|
||||
|
||||
type SolutionJob = {
|
||||
id: number;
|
||||
problem_id: number;
|
||||
status: string;
|
||||
progress: number;
|
||||
message: string;
|
||||
created_at: number;
|
||||
started_at: number | null;
|
||||
finished_at: number | null;
|
||||
};
|
||||
|
||||
type SolutionResp = {
|
||||
items: SolutionItem[];
|
||||
latest_job: SolutionJob | null;
|
||||
runner_running: boolean;
|
||||
};
|
||||
|
||||
const starterCode = `#include <bits/stdc++.h>
|
||||
using namespace std;
|
||||
|
||||
int main() {
|
||||
ios::sync_with_stdio(false);
|
||||
cin.tie(nullptr);
|
||||
|
||||
return 0;
|
||||
}
|
||||
`;
|
||||
|
||||
const defaultRunInput = `1 2\n`;
|
||||
|
||||
export default function ProblemDetailPage() {
|
||||
const params = useParams<{ id: string }>();
|
||||
const id = useMemo(() => Number(params.id), [params.id]);
|
||||
|
||||
const [problem, setProblem] = useState<Problem | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState("");
|
||||
|
||||
const [code, setCode] = useState(starterCode);
|
||||
const [runInput, setRunInput] = useState(defaultRunInput);
|
||||
const [contestId, setContestId] = useState("");
|
||||
const [submitLoading, setSubmitLoading] = useState(false);
|
||||
const [runLoading, setRunLoading] = useState(false);
|
||||
const [draftLoading, setDraftLoading] = useState(false);
|
||||
const [submitResp, setSubmitResp] = useState<Submission | null>(null);
|
||||
const [runResp, setRunResp] = useState<RunResult | null>(null);
|
||||
const [draftMsg, setDraftMsg] = useState("");
|
||||
|
||||
const [showSolutions, setShowSolutions] = useState(false);
|
||||
const [solutionLoading, setSolutionLoading] = useState(false);
|
||||
const [solutionData, setSolutionData] = useState<SolutionResp | null>(null);
|
||||
const [solutionMsg, setSolutionMsg] = useState("");
|
||||
|
||||
const llmProfile = useMemo<LlmProfile | null>(() => {
|
||||
if (!problem?.llm_profile_json) return null;
|
||||
try {
|
||||
const parsed = JSON.parse(problem.llm_profile_json);
|
||||
return typeof parsed === "object" && parsed !== null ? (parsed as LlmProfile) : null;
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}, [problem?.llm_profile_json]);
|
||||
|
||||
useEffect(() => {
|
||||
const load = async () => {
|
||||
if (!Number.isFinite(id) || id <= 0) return;
|
||||
setLoading(true);
|
||||
setError("");
|
||||
try {
|
||||
const data = await apiFetch<Problem>(`/api/v1/problems/${id}`);
|
||||
setProblem(data);
|
||||
} catch (e: unknown) {
|
||||
setError(String(e));
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
void load();
|
||||
}, [id]);
|
||||
|
||||
useEffect(() => {
|
||||
const loadDraft = async () => {
|
||||
if (!Number.isFinite(id) || id <= 0) return;
|
||||
const token = readToken();
|
||||
if (!token) return;
|
||||
try {
|
||||
const draft = await apiFetch<DraftResp>(`/api/v1/problems/${id}/draft`, undefined, token);
|
||||
if (draft.code) setCode(draft.code);
|
||||
if (draft.stdin) setRunInput(draft.stdin);
|
||||
setDraftMsg("已自动加载草稿");
|
||||
} catch {
|
||||
// ignore empty draft / unauthorized
|
||||
}
|
||||
};
|
||||
void loadDraft();
|
||||
}, [id]);
|
||||
|
||||
const submit = async () => {
|
||||
setSubmitLoading(true);
|
||||
setSubmitResp(null);
|
||||
setError("");
|
||||
try {
|
||||
const token = readToken();
|
||||
if (!token) throw new Error("请先登录后再提交评测");
|
||||
|
||||
const body: Record<string, unknown> = {
|
||||
language: "cpp",
|
||||
code,
|
||||
};
|
||||
if (contestId) body.contest_id = Number(contestId);
|
||||
|
||||
const resp = await apiFetch<Submission>(
|
||||
`/api/v1/problems/${id}/submit`,
|
||||
{
|
||||
method: "POST",
|
||||
body: JSON.stringify(body),
|
||||
},
|
||||
token
|
||||
);
|
||||
setSubmitResp(resp);
|
||||
} catch (e: unknown) {
|
||||
setError(String(e));
|
||||
} finally {
|
||||
setSubmitLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const runCode = async () => {
|
||||
setRunLoading(true);
|
||||
setRunResp(null);
|
||||
setError("");
|
||||
try {
|
||||
const resp = await apiFetch<RunResult>("/api/v1/run/cpp", {
|
||||
method: "POST",
|
||||
body: JSON.stringify({ code, input: runInput }),
|
||||
});
|
||||
setRunResp(resp);
|
||||
} catch (e: unknown) {
|
||||
setError(String(e));
|
||||
} finally {
|
||||
setRunLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const saveDraft = async () => {
|
||||
setDraftLoading(true);
|
||||
setDraftMsg("");
|
||||
setError("");
|
||||
try {
|
||||
const token = readToken();
|
||||
if (!token) throw new Error("请先登录后再保存草稿");
|
||||
await apiFetch<{ saved: boolean }>(
|
||||
`/api/v1/problems/${id}/draft`,
|
||||
{
|
||||
method: "PUT",
|
||||
body: JSON.stringify({ language: "cpp", code, stdin: runInput }),
|
||||
},
|
||||
token
|
||||
);
|
||||
setDraftMsg("草稿已保存");
|
||||
} catch (e: unknown) {
|
||||
setError(String(e));
|
||||
} finally {
|
||||
setDraftLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const loadSolutions = async () => {
|
||||
setSolutionLoading(true);
|
||||
setSolutionMsg("");
|
||||
try {
|
||||
const resp = await apiFetch<SolutionResp>(`/api/v1/problems/${id}/solutions`);
|
||||
setSolutionData(resp);
|
||||
} catch (e: unknown) {
|
||||
setSolutionMsg(`加载题解失败：${String(e)}`);
|
||||
} finally {
|
||||
setSolutionLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const triggerSolutions = async () => {
|
||||
setSolutionLoading(true);
|
||||
setSolutionMsg("");
|
||||
try {
|
||||
const token = readToken();
|
||||
if (!token) throw new Error("请先登录后再触发题解生成");
|
||||
await apiFetch<{ started: boolean; job_id: number }>(
|
||||
`/api/v1/problems/${id}/solutions/generate`,
|
||||
{
|
||||
method: "POST",
|
||||
body: JSON.stringify({ max_solutions: 3 }),
|
||||
},
|
||||
token
|
||||
);
|
||||
setSolutionMsg("题解生成任务已提交，后台异步处理中...");
|
||||
await loadSolutions();
|
||||
} catch (e: unknown) {
|
||||
setSolutionMsg(`提交失败：${String(e)}`);
|
||||
} finally {
|
||||
setSolutionLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (!showSolutions) return;
|
||||
void loadSolutions();
|
||||
const timer = setInterval(() => {
|
||||
void loadSolutions();
|
||||
}, 5000);
|
||||
return () => clearInterval(timer);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [showSolutions, id]);
|
||||
|
||||
return (
|
||||
<main className="mx-auto max-w-[1400px] px-6 py-8">
|
||||
<h1 className="text-2xl font-semibold">题目详情与评测</h1>
|
||||
|
||||
{loading && <p className="mt-4 text-sm text-zinc-500">加载中...</p>}
|
||||
{error && <p className="mt-4 text-sm text-red-600">{error}</p>}
|
||||
|
||||
{problem && (
|
||||
<div className="mt-4 grid gap-4 lg:grid-cols-[1.1fr,1fr]">
|
||||
<section className="rounded-xl border bg-white p-5">
|
||||
<h2 className="text-xl font-medium">{problem.title}</h2>
|
||||
<p className="mt-1 text-sm text-zinc-600">
|
||||
难度 {problem.difficulty} · 来源 {problem.source}
|
||||
</p>
|
||||
{problem.statement_url && (
|
||||
<p className="mt-1 text-sm">
|
||||
<a
|
||||
className="text-blue-600 underline"
|
||||
href={problem.statement_url}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
查看原始题面链接
|
||||
</a>
|
||||
</p>
|
||||
)}
|
||||
|
||||
<div className="mt-4 rounded-lg border bg-zinc-50 p-4">
|
||||
<MarkdownRenderer markdown={problem.statement_md} />
|
||||
</div>
|
||||
|
||||
{llmProfile?.knowledge_points && llmProfile.knowledge_points.length > 0 && (
|
||||
<>
|
||||
<h3 className="mt-4 text-sm font-medium">知识点考查</h3>
|
||||
<div className="mt-1 flex flex-wrap gap-2">
|
||||
{llmProfile.knowledge_points.map((kp) => (
|
||||
<span key={kp} className="rounded-full bg-zinc-100 px-2 py-1 text-xs">
|
||||
{kp}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
<h3 className="mt-4 text-sm font-medium">样例输入</h3>
|
||||
<pre className="rounded bg-zinc-900 p-3 text-xs text-zinc-100">{problem.sample_input}</pre>
|
||||
|
||||
<h3 className="mt-3 text-sm font-medium">样例输出</h3>
|
||||
<pre className="rounded bg-zinc-900 p-3 text-xs text-zinc-100">{problem.sample_output}</pre>
|
||||
</section>
|
||||
|
||||
<section className="rounded-xl border bg-white p-5">
|
||||
<label className="text-sm font-medium">contest_id（可选）</label>
|
||||
<input
|
||||
className="mt-1 w-full rounded border px-3 py-2"
|
||||
placeholder="例如 1"
|
||||
value={contestId}
|
||||
onChange={(e) => setContestId(e.target.value)}
|
||||
/>
|
||||
|
||||
<div className="mt-3 flex flex-wrap items-center gap-2">
|
||||
<button
|
||||
className="rounded bg-zinc-900 px-4 py-2 text-sm text-white disabled:opacity-50"
|
||||
onClick={() => void submit()}
|
||||
disabled={submitLoading}
|
||||
>
|
||||
{submitLoading ? "提交中..." : "提交评测"}
|
||||
</button>
|
||||
<button
|
||||
className="rounded border px-4 py-2 text-sm disabled:opacity-50"
|
||||
onClick={() => void saveDraft()}
|
||||
disabled={draftLoading}
|
||||
>
|
||||
{draftLoading ? "保存中..." : "保存草稿"}
|
||||
</button>
|
||||
<button
|
||||
className="rounded border px-4 py-2 text-sm disabled:opacity-50"
|
||||
onClick={() => {
|
||||
setShowSolutions((v) => !v);
|
||||
}}
|
||||
disabled={solutionLoading}
|
||||
>
|
||||
答案展示
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{draftMsg && <p className="mt-2 text-xs text-emerald-700">{draftMsg}</p>}
|
||||
|
||||
<label className="mt-4 block text-sm font-medium">C++ 代码（高亮 + 自动提示）</label>
|
||||
<div className="mt-1 overflow-hidden rounded border">
|
||||
<CodeEditor value={code} onChange={setCode} height="420px" />
|
||||
</div>
|
||||
|
||||
<label className="mt-4 block text-sm font-medium">试运行输入</label>
|
||||
<textarea
|
||||
className="mt-1 h-24 w-full rounded border p-2 font-mono text-xs"
|
||||
value={runInput}
|
||||
onChange={(e) => setRunInput(e.target.value)}
|
||||
/>
|
||||
<button
|
||||
className="mt-2 rounded border px-4 py-2 text-sm disabled:opacity-50"
|
||||
onClick={() => void runCode()}
|
||||
disabled={runLoading}
|
||||
>
|
||||
{runLoading ? "试运行中..." : "试运行查看结果"}
|
||||
</button>
|
||||
|
||||
{runResp && (
|
||||
<div className="mt-3 space-y-2 rounded border p-3 text-xs">
|
||||
<p>
|
||||
运行状态：<b>{runResp.status}</b> · 耗时 {runResp.time_ms}ms
|
||||
</p>
|
||||
{runResp.compile_log && (
|
||||
<pre className="overflow-auto rounded bg-zinc-900 p-2 text-zinc-100">
|
||||
{runResp.compile_log}
|
||||
</pre>
|
||||
)}
|
||||
<div>
|
||||
<p className="font-medium">stdout</p>
|
||||
<pre className="overflow-auto rounded bg-zinc-900 p-2 text-zinc-100">
|
||||
{runResp.stdout || "(empty)"}
|
||||
</pre>
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-medium">stderr</p>
|
||||
<pre className="overflow-auto rounded bg-zinc-900 p-2 text-zinc-100">
|
||||
{runResp.stderr || "(empty)"}
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{submitResp && (
|
||||
<div className="mt-4 space-y-2 rounded border p-3 text-sm">
|
||||
<p>
|
||||
结果：<b>{submitResp.status}</b>，分数 {submitResp.score}
|
||||
</p>
|
||||
<p>
|
||||
提交 ID：
|
||||
<Link className="ml-1 text-blue-600 underline" href={`/submissions/${submitResp.id}`}>
|
||||
{submitResp.id}
|
||||
</Link>
|
||||
</p>
|
||||
{submitResp.compile_log && (
|
||||
<pre className="overflow-auto rounded bg-zinc-900 p-2 text-xs text-zinc-100">
|
||||
{submitResp.compile_log}
|
||||
</pre>
|
||||
)}
|
||||
{submitResp.runtime_log && (
|
||||
<pre className="overflow-auto rounded bg-zinc-900 p-2 text-xs text-zinc-100">
|
||||
{submitResp.runtime_log}
|
||||
</pre>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{showSolutions && (
|
||||
<div className="mt-5 rounded-lg border bg-zinc-50 p-3">
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<h3 className="text-sm font-semibold">官方/LLM 题解</h3>
|
||||
<button
|
||||
className="rounded border px-3 py-1 text-xs disabled:opacity-50"
|
||||
onClick={() => void triggerSolutions()}
|
||||
disabled={solutionLoading}
|
||||
>
|
||||
异步生成多解
|
||||
</button>
|
||||
<button
|
||||
className="rounded border px-3 py-1 text-xs disabled:opacity-50"
|
||||
onClick={() => void loadSolutions()}
|
||||
disabled={solutionLoading}
|
||||
>
|
||||
刷新
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{solutionMsg && <p className="mt-2 text-xs text-zinc-600">{solutionMsg}</p>}
|
||||
|
||||
{solutionData?.latest_job && (
|
||||
<p className="mt-2 text-xs text-zinc-600">
|
||||
任务 #{solutionData.latest_job.id} · {solutionData.latest_job.status} ·
|
||||
进度 {solutionData.latest_job.progress}%
|
||||
</p>
|
||||
)}
|
||||
|
||||
<div className="mt-3 space-y-3">
|
||||
{(solutionData?.items ?? []).map((item) => (
|
||||
<article key={item.id} className="rounded border bg-white p-3">
|
||||
<h4 className="text-sm font-semibold">
|
||||
解法 {item.variant}：{item.title || "未命名解法"}
|
||||
</h4>
|
||||
{item.complexity && (
|
||||
<p className="mt-1 text-xs text-zinc-600">复杂度：{item.complexity}</p>
|
||||
)}
|
||||
{item.idea_md && (
|
||||
<div className="mt-2 rounded bg-zinc-50 p-2">
|
||||
<MarkdownRenderer markdown={item.idea_md} />
|
||||
</div>
|
||||
)}
|
||||
{item.code_cpp && (
|
||||
<pre className="mt-2 overflow-auto rounded bg-zinc-900 p-2 text-xs text-zinc-100">
|
||||
{item.code_cpp}
|
||||
</pre>
|
||||
)}
|
||||
{item.explanation_md && (
|
||||
<div className="mt-2 rounded bg-zinc-50 p-2">
|
||||
<MarkdownRenderer markdown={item.explanation_md} />
|
||||
</div>
|
||||
)}
|
||||
</article>
|
||||
))}
|
||||
{!solutionLoading && (solutionData?.items.length ?? 0) === 0 && (
|
||||
<p className="text-xs text-zinc-500">暂无题解，点击“异步生成多解”可触发后台生成。</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
)}
|
||||
</main>
|
||||
);
|
||||
}
|
||||
在新工单中引用
屏蔽一个用户