Update: TTS settings modal and settings types

src/components/RatingButtons.tsx

@@ -1,3 +1,4 @@
+import { useEffect } from 'react';
 import type { DifficultyRating } from '../types/vocabulary';
 
 interface RatingButtonsProps {
@@ -5,50 +6,90 @@ interface RatingButtonsProps {
   disabled?: boolean;
 }
 
+interface ButtonConfig {
+  rating: DifficultyRating;
+  label: string;
+  sublabel: string;
+  shortcut: string;
+  color: string;
+  shadow: string;
+}
+
+const BUTTONS: ButtonConfig[] = [
+  { 
+    rating: 'again', 
+    label: '重来', 
+    sublabel: '< 1 分钟',
+    shortcut: '1',
+    color: 'from-rose-400 to-red-500',
+    shadow: 'shadow-rose-200'
+  },
+  { 
+    rating: 'hard', 
+    label: '困难', 
+    sublabel: '~ 2 天',
+    shortcut: '2',
+    color: 'from-orange-400 to-amber-500',
+    shadow: 'shadow-orange-200'
+  },
+  { 
+    rating: 'good', 
+    label: '良好', 
+    sublabel: '~ 4 天',
+    shortcut: '3',
+    color: 'from-blue-400 to-indigo-500',
+    shadow: 'shadow-blue-200'
+  },
+  { 
+    rating: 'easy', 
+    label: '简单', 
+    sublabel: '~ 7 天',
+    shortcut: '4',
+    color: 'from-emerald-400 to-teal-500',
+    shadow: 'shadow-emerald-200'
+  },
+];
+
 export function RatingButtons({ onRate, disabled }: RatingButtonsProps) {
-  const buttons = [
-    { 
-      rating: 'again' as DifficultyRating, 
-      label: '重来', 
-      sublabel: '< 1 min',
-      color: 'from-rose-400 to-red-500',
-      shadow: 'shadow-rose-200'
-    },
-    { 
-      rating: 'hard' as DifficultyRating, 
-      label: '困难', 
-      sublabel: '~ 2 days',
-      color: 'from-orange-400 to-amber-500',
-      shadow: 'shadow-orange-200'
-    },
-    { 
-      rating: 'good' as DifficultyRating, 
-      label: '良好', 
-      sublabel: '~ 4 days',
-      color: 'from-blue-400 to-indigo-500',
-      shadow: 'shadow-blue-200'
-    },
-    { 
-      rating: 'easy' as DifficultyRating, 
-      label: '简单', 
-      sublabel: '~ 7 days',
-      color: 'from-emerald-400 to-teal-500',
-      shadow: 'shadow-emerald-200'
-    },
-  ];
+  // 键盘快捷键支持
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (disabled) return;
+      
+      const keyMap: Record<string, DifficultyRating> = {
+        '1': 'again',
+        '2': 'hard',
+        '3': 'good',
+        '4': 'easy',
+        'Enter': 'good',
+        ' ': 'good',
+      };
+      
+      const rating = keyMap[e.key];
+      if (rating) {
+        e.preventDefault();
+        onRate(rating);
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [onRate, disabled]);
 
   return (
     <div className="grid grid-cols-4 gap-3 mt-8">
-      {buttons.map(({ rating, label, sublabel, color, shadow }) => (
+      {BUTTONS.map(({ rating, label, sublabel, shortcut, color, shadow }) => (
         <button
           key={rating}
           onClick={() => onRate(rating)}
           disabled={disabled}
           className={`group relative overflow-hidden bg-gradient-to-b ${color} ${shadow} shadow-lg hover:shadow-xl text-white rounded-2xl py-4 px-2 transition-all duration-200 hover:-translate-y-1 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:translate-y-0`}
+          aria-label={`${label} (${shortcut})`}
         >
           <div className="relative z-10 flex flex-col items-center">
             <span className="text-lg font-bold">{label}</span>
             <span className="text-xs opacity-80 mt-1">{sublabel}</span>
+            <span className="absolute top-1 right-2 text-xs opacity-50 font-mono">{shortcut}</span>
           </div>
           <div className="absolute inset-0 bg-white/20 opacity-0 group-hover:opacity-100 transition-opacity" />
         </button>