feat: AC庆祝动画 + 已通过徽章 + 页面标题

Author: CodeJudge

frontend/src/components/ProblemCard.tsx

@@ -45,12 +45,15 @@ export default function ProblemCard({ problem }: { problem: Problem }) {
   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"
+      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' : ''}`}
     >
       <div className="flex items-start justify-between gap-3">
         <div className="flex items-center gap-2.5 min-w-0">
           {problem.user_passed && (
-            <CheckCircle2 className="w-5 h-5 text-emerald-500 flex-shrink-0" />
+            <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>
           )}
           <h3 className="text-lg font-semibold text-white truncate group-hover:text-primary-400 transition-colors">
             {problem.title}

frontend/src/hooks/useDocumentTitle.ts

@@ -0,0 +1,9 @@
+import { useEffect } from 'react';
+
+export function useDocumentTitle(title: string) {
+  useEffect(() => {
+    const prev = document.title;
+    document.title = title ? `${title} - CodeJudge` : 'CodeJudge';
+    return () => { document.title = prev; };
+  }, [title]);
+}

frontend/src/pages/Home.tsx

@@ -3,6 +3,7 @@ import { Link } from 'react-router-dom';
 import { Code2, ListChecks, PenLine, ArrowRight, BookOpen, Sparkles, Zap, Flame, Calendar } from 'lucide-react';
 import { useAuth } from '../context/AuthContext';
 import api from '../services/api';
+import { useDocumentTitle } from '../hooks/useDocumentTitle';
 import ProblemCard from '../components/ProblemCard';
 import type { ProblemStats, Problem } from '../types';
 
@@ -40,6 +41,7 @@ const statDefs = [
 ];
 
 export default function Home() {
+  useDocumentTitle('首页');
   const { user } = useAuth();
   const [stats, setStats] = useState<ProblemStats | null>(null);
   const [recentProblems, setRecentProblems] = useState<Problem[]>([]);

frontend/src/pages/Leaderboard.tsx

@@ -1,6 +1,7 @@
 import { useState, useEffect } from 'react';
 import { Trophy, Medal, User as UserIcon, Zap, BarChart3 } from 'lucide-react';
 import api from '../services/api';
+import { useDocumentTitle } from '../hooks/useDocumentTitle';
 
 interface LeaderboardEntry {
   rank: number;
@@ -12,6 +13,7 @@ interface LeaderboardEntry {
 }
 
 export default function Leaderboard() {
+  useDocumentTitle('排行榜');
   const [entries, setEntries] = useState<LeaderboardEntry[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);

frontend/src/pages/ProblemDetail.tsx

@@ -8,6 +8,7 @@ import {
   Loader2,
   Share2,
   Star,
+  Sparkles,
 } from 'lucide-react';
 import toast from 'react-hot-toast';
 import api from '../services/api';
@@ -18,6 +19,7 @@ import SubmissionStatus from '../components/SubmissionStatus';
 import MarkdownRenderer from '../components/MarkdownRenderer';
 import type { Problem, Submission, TestCaseResult } from '../types';
 import { useBookmarks } from '../context/BookmarkContext';
+import { useDocumentTitle } from '../hooks/useDocumentTitle';
 
 const DIFFICULTY_LABELS: Record<string, string> = {
   easy: '简单',
@@ -187,6 +189,15 @@ export default function ProblemDetail() {
 
     return (
       <div className="card p-6 mt-6">
+        {submissionResult.status === 'accepted' && (
+          <div className="mb-4 p-4 bg-emerald-500/10 border border-emerald-500/30 rounded-lg flex items-center gap-3">
+            <Sparkles className="w-6 h-6 text-emerald-400" />
+            <div>
+              <p className="text-emerald-400 font-semibold text-lg">🎉 恭喜通过！</p>
+              <p className="text-emerald-500/70 text-sm">太棒了，继续加油！</p>
+            </div>
+          </div>
+        )}
         <h3 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
           判题结果
           <SubmissionStatus
@@ -329,6 +340,8 @@ export default function ProblemDetail() {
     ? problem.tags.split(',').filter(Boolean)
     : [];
 
+  useDocumentTitle(problem?.title || '题目');
+
   return (
     <div>
       <Link

frontend/src/pages/Problems.tsx

@@ -20,6 +20,7 @@ import api from '../services/api';
 import ProblemCard from '../components/ProblemCard';
 import type { Problem, PaginatedResponse, ProblemStats } from '../types';
 import { useBookmarks } from '../context/BookmarkContext';
+import { useDocumentTitle } from '../hooks/useDocumentTitle';
 
 const typeOptions = [
   { label: '全部', value: '' },
@@ -38,6 +39,7 @@ const difficultyOptions = [
 const PAGE_SIZE_OPTIONS = [10, 20, 50];
 
 export default function Problems() {
+  useDocumentTitle('题库');
   const [searchParams, setSearchParams] = useSearchParams();
 
   const search = searchParams.get('search') || '';

frontend/src/pages/Profile.tsx

@@ -4,6 +4,7 @@ import { User, Mail, Shield, Award, TrendingUp, Loader2, AlertTriangle, CheckCir
 import { useAuth } from '../context/AuthContext';
 import api from '../services/api';
 import type { Submission } from '../types';
+import { useDocumentTitle } from '../hooks/useDocumentTitle';
 
 const STATUS_MAP: Record<string, { label: string; icon: React.ReactNode; className: string }> = {
   accepted: {
@@ -34,6 +35,7 @@ const STATUS_MAP: Record<string, { label: string; icon: React.ReactNode; classNa
 };
 
 export default function Profile() {
+  useDocumentTitle('个人中心');
   const { user } = useAuth();
   const [profile, setProfile] = useState<any>(null);
   const [submissions, setSubmissions] = useState<Submission[]>([]);

frontend/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"root":["./src/app.tsx","./src/main.tsx","./src/components/choicequestion.tsx","./src/components/codeeditor.tsx","./src/components/fillblankquestion.tsx","./src/components/footer.tsx","./src/components/markdownrenderer.tsx","./src/components/navbar.tsx","./src/components/problemcard.tsx","./src/components/submissionstatus.tsx","./src/context/authcontext.tsx","./src/context/bookmarkcontext.tsx","./src/pages/admin.tsx","./src/pages/adminproblemform.tsx","./src/pages/home.tsx","./src/pages/leaderboard.tsx","./src/pages/login.tsx","./src/pages/notfound.tsx","./src/pages/problemdetail.tsx","./src/pages/problems.tsx","./src/pages/profile.tsx","./src/pages/register.tsx","./src/pages/submissions.tsx","./src/services/api.ts","./src/types/index.ts"],"version":"5.9.3"}
+{"root":["./src/app.tsx","./src/main.tsx","./src/components/choicequestion.tsx","./src/components/codeeditor.tsx","./src/components/fillblankquestion.tsx","./src/components/footer.tsx","./src/components/markdownrenderer.tsx","./src/components/navbar.tsx","./src/components/problemcard.tsx","./src/components/submissionstatus.tsx","./src/context/authcontext.tsx","./src/context/bookmarkcontext.tsx","./src/hooks/usedocumenttitle.ts","./src/pages/admin.tsx","./src/pages/adminproblemform.tsx","./src/pages/home.tsx","./src/pages/leaderboard.tsx","./src/pages/login.tsx","./src/pages/notfound.tsx","./src/pages/problemdetail.tsx","./src/pages/problems.tsx","./src/pages/profile.tsx","./src/pages/register.tsx","./src/pages/submissions.tsx","./src/services/api.ts","./src/types/index.ts"],"version":"5.9.3"}