509 行
16 KiB
TypeScript
509 行
16 KiB
TypeScript
"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>
|
||
);
|
||
}
|