feat: 题目列表显示已通过/已尝试状态

Author: CodeJudge

backend/src/controllers/problemController.js

@@ -26,6 +26,26 @@ function listProblems(req, res) {
   params.push(Number(limit), (Number(page) - 1) * Number(limit));
 
   const problems = queryAll(sql, params);
+
+  // Attach user status
+  if (req.user) {
+    const ids = problems.map(p => p.id);
+    if (ids.length > 0) {
+      const rows = queryAll(
+        `SELECT problem_id, status FROM submissions WHERE user_id = ? AND problem_id IN (${ids.map(() => '?').join(',')}) GROUP BY problem_id`,
+        [req.user.id, ...ids]
+      );
+      const statusMap = {};
+      rows.forEach(r => { statusMap[r.problem_id] = r.status; });
+      problems.forEach(p => {
+        const s = statusMap[p.id];
+        if (s === 'accepted') p.user_status = 'accepted';
+        else if (s) p.user_status = 'attempted';
+        else p.user_status = null;
+      });
+    }
+  }
+
   res.json({ problems, total, page: Number(page), totalPages: Math.ceil(total / Number(limit)) });
 }
 

frontend/src/components/ProblemCard.tsx

@@ -1,5 +1,5 @@
 import { Link } from 'react-router-dom';
-import { Code2, ListChecks, PenLine, CheckCircle2, Star } from 'lucide-react';
+import { Code2, ListChecks, PenLine, CheckCircle2, Star, AlertCircle } from 'lucide-react';
 import { useBookmarks } from '../context/BookmarkContext';
 import type { Problem } from '../types';
 
@@ -41,20 +41,27 @@ export default function ProblemCard({ problem }: { problem: Problem }) {
   const ratio = problem.submission_count > 0
     ? Math.round((problem.accepted_count / problem.submission_count) * 100)
     : 0;
+  const userStatus = problem.user_status || (problem.user_passed ? 'accepted' : null);
 
   return (
     <Link
       to={`/problems/${problem.id}`}
-      className={`card flex flex-col gap-4 hover:border-primary-500/50 hover:-translate-y-0.5 hover:shadow-lg hover:shadow-primary-500/5 transition-all duration-200 group${problem.user_passed ? ' border-l-emerald-500' : ''}`}
+      className={`card flex flex-col gap-4 hover:border-primary-500/50 hover:-translate-y-0.5 hover:shadow-lg hover:shadow-primary-500/5 transition-all duration-150 group${userStatus === 'accepted' ? ' border-l-emerald-500' : userStatus === 'attempted' ? ' border-l-yellow-500' : ''}`}
     >
       <div className="flex items-start justify-between gap-3">
         <div className="flex items-center gap-2.5 min-w-0">
-          {problem.user_passed && (
+          {userStatus === 'accepted' && (
             <span className="inline-flex items-center gap-1 px-2 py-0.5 bg-emerald-500/15 text-emerald-400 text-xs rounded-full border border-emerald-500/30 flex-shrink-0">
               <CheckCircle2 className="w-3.5 h-3.5" />
               已通过
             </span>
           )}
+          {userStatus === 'attempted' && (
+            <span className="inline-flex items-center gap-1 px-2 py-0.5 bg-yellow-500/15 text-yellow-400 text-xs rounded-full border border-yellow-500/30 flex-shrink-0">
+              <AlertCircle className="w-3.5 h-3.5" />
+              已尝试
+            </span>
+          )}
           <h3 className="text-lg font-semibold text-white truncate group-hover:text-primary-400 transition-colors">
             {problem.title}
           </h3>

frontend/src/types/index.ts

@@ -20,6 +20,7 @@ export interface Problem {
   accepted_count: number;
   submission_count: number;
   user_passed?: boolean;
+  user_status?: 'accepted' | 'attempted' | null;
   created_at: string;
 }