feat: 语言使用统计图表

Author: CodeJudge

backend/src/routes/auth.js

@@ -36,6 +36,14 @@ router.get('/streak', authenticate, (req, res) => {
   res.json({ streak, todayChecked });
 });
 
+router.get('/language-stats', authenticate, (req, res) => {
+  const stats = queryAll(
+    'SELECT language, COUNT(*) as count FROM submissions WHERE user_id = ? AND language IS NOT NULL AND language != "" GROUP BY language ORDER BY count DESC',
+    [req.user.id]
+  );
+  res.json({ languages: stats });
+});
+
 router.get('/leaderboard', async (req, res) => {
   try {
     const rows = queryAll(`

frontend/src/pages/Profile.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react';
 import { Link } from 'react-router-dom';
-import { User, Mail, Shield, Award, TrendingUp, Loader2, AlertTriangle, CheckCircle2, XCircle, Clock, Zap, Lock, Key, CalendarDays } from 'lucide-react';
+import { User, Mail, Shield, Award, TrendingUp, Loader2, AlertTriangle, CheckCircle2, XCircle, Clock, Zap, Lock, Key, CalendarDays, Code } from 'lucide-react';
 import { useAuth } from '../context/AuthContext';
 import api from '../services/api';
 import type { Submission } from '../types';
@@ -50,6 +50,7 @@ export default function Profile() {
   const [passwordMessage, setPasswordMessage] = useState<string | null>(null);
   const [passwordError, setPasswordError] = useState<string | null>(null);
   const [calendarDates, setCalendarDates] = useState<Set<string>>(new Set());
+  const [languageStats, setLanguageStats] = useState<{language: string; count: number}[]>([]);
 
   useEffect(() => {
     const token = localStorage.getItem('oj_token');
@@ -60,6 +61,12 @@ export default function Profile() {
         setCalendarDates(new Set(data.dates || []));
       })
       .catch(() => {});
+    fetch('/api/auth/language-stats', { headers: { Authorization: `Bearer ${token}` } })
+      .then(r => r.json())
+      .then(data => {
+        setLanguageStats(data.languages || []);
+      })
+      .catch(() => {});
   }, []);
 
   useEffect(() => {
@@ -206,6 +213,32 @@ export default function Profile() {
         </div>
       </div>
 
+      {/* Language usage */}
+      {languageStats.length > 0 && (
+        <div className="card p-6">
+          <h3 className="text-sm font-semibold text-dark-200 mb-3 flex items-center gap-2">
+            <Code className="w-4 h-4 text-blue-400" /> 使用语言统计
+          </h3>
+          <div className="space-y-2">
+            {languageStats.map((lang: {language: string; count: number}) => {
+              const maxCount = Math.max(...languageStats.map((l: any) => l.count));
+              return (
+                <div key={lang.language} className="flex items-center gap-3">
+                  <span className="w-24 text-xs text-dark-400 text-right">{lang.language || '未知'}</span>
+                  <div className="flex-1 h-4 bg-dark-700 rounded-full overflow-hidden">
+                    <div 
+                      className="h-full bg-primary-500 rounded-full transition-all duration-500"
+                      style={{ width: `${(lang.count / maxCount) * 100}%` }}
+                    />
+                  </div>
+                  <span className="text-xs text-dark-400 w-8">{lang.count}</span>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      )}
+
       <GamificationSection />
 
       {/* Solved calendar */}