feat: 代码自动保存 + 提交统计面板

Author: CodeJudge

frontend/src/pages/ProblemDetail.tsx

@@ -59,6 +59,8 @@ export default function ProblemDetail() {
   const [submitting, setSubmitting] = useState(false);
   const [submissionResult, setSubmissionResult] = useState<Submission | null>(null);
 
+  const CODE_SAVE_KEY = `cj_code_${id}_${language}`;
+
   const fetchProblem = useCallback(async () => {
     if (!id) return;
     setLoading(true);
@@ -79,13 +81,19 @@ export default function ProblemDetail() {
   }, [id]);
 
   const loadTemplate = useCallback(async (lang: string) => {
+    const savedKey = `cj_code_${id}_${lang}`;
+    const saved = localStorage.getItem(savedKey);
+    if (saved) {
+      setCode(saved);
+      return;
+    }
     try {
       const { template } = await api.problems.getTemplate(lang);
       setCode(template);
     } catch {
       setCode('');
     }
-  }, []);
+  }, [id]);
 
   useEffect(() => {
     fetchProblem();
@@ -100,6 +108,14 @@ export default function ProblemDetail() {
     }
   }, [problem?.type, language, loadTemplate]);
 
+  useEffect(() => {
+    if (!code || problem?.type !== 'programming') return;
+    const timer = setTimeout(() => {
+      localStorage.setItem(CODE_SAVE_KEY, code);
+    }, 1000);
+    return () => clearTimeout(timer);
+  }, [code, CODE_SAVE_KEY, problem?.type]);
+
   const handleSubmit = async () => {
     if (!problem) return;
 

frontend/src/pages/Submissions.tsx

@@ -8,6 +8,10 @@ import {
   Inbox,
   ChevronDown,
   ChevronUp,
+  Send,
+  CheckCircle,
+  Code,
+  Award,
 } from 'lucide-react';
 import toast from 'react-hot-toast';
 import api from '../services/api';
@@ -93,6 +97,30 @@ export default function Submissions() {
 
   const submissions = data?.submissions ?? [];
 
+  const totalSubmissions = data?.total ?? 0;
+  const acceptedCount = submissions.filter(s => s.status === 'accepted').length;
+  const acceptanceRate = submissions.length > 0
+    ? ((acceptedCount / submissions.length) * 100).toFixed(1)
+    : '0';
+
+  const langCounts: Record<string, number> = {};
+  submissions.forEach(s => {
+    if (s.language) {
+      langCounts[s.language] = (langCounts[s.language] || 0) + 1;
+    }
+  });
+  let mostUsedLang = '-';
+  let maxLangCount = 0;
+  Object.entries(langCounts).forEach(([lang, count]) => {
+    if (count > maxLangCount) {
+      maxLangCount = count;
+      mostUsedLang = lang;
+    }
+  });
+
+  const totalScore = submissions.reduce((sum, s) => sum + (s.score || 0), 0);
+  const avgScore = submissions.length > 0 ? (totalScore / submissions.length).toFixed(1) : '0';
+
   return (
     <div>
       <h1 className="text-2xl font-bold text-white mb-6">提交记录</h1>
@@ -114,6 +142,40 @@ export default function Submissions() {
         ))}
       </div>
 
+      {/* Stats bar */}
+      {data && (
+        <div className="grid grid-cols-4 gap-4 mb-6">
+          <div className="card p-4 flex items-center gap-3">
+            <Send size={20} className="text-blue-400" />
+            <div>
+              <p className="text-xs text-gray-400">总提交</p>
+              <p className="text-lg font-bold text-white">{totalSubmissions}</p>
+            </div>
+          </div>
+          <div className="card p-4 flex items-center gap-3">
+            <CheckCircle size={20} className="text-green-400" />
+            <div>
+              <p className="text-xs text-gray-400">通过率</p>
+              <p className="text-lg font-bold text-white">{acceptanceRate}%</p>
+            </div>
+          </div>
+          <div className="card p-4 flex items-center gap-3">
+            <Code size={20} className="text-purple-400" />
+            <div>
+              <p className="text-xs text-gray-400">常用语言</p>
+              <p className="text-lg font-bold text-white">{mostUsedLang}</p>
+            </div>
+          </div>
+          <div className="card p-4 flex items-center gap-3">
+            <Award size={20} className="text-yellow-400" />
+            <div>
+              <p className="text-xs text-gray-400">平均分</p>
+              <p className="text-lg font-bold text-white">{avgScore}</p>
+            </div>
+          </div>
+        </div>
+      )}
+
       {/* Content */}
       {loading ? (
         <div className="space-y-3">