feat: 法语词汇学习应用

- Vue 3 + TypeScript + Tailwind CSS
- 词汇学习和管理功能
- 支持生词本和复习

src/components/RatingButtons.tsx

@@ -0,0 +1,58 @@
+import type { DifficultyRating } from '../types/vocabulary';
+
+interface RatingButtonsProps {
+  onRate: (rating: DifficultyRating) => void;
+  disabled?: boolean;
+}
+
+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'
+    },
+  ];
+
+  return (
+    <div className="grid grid-cols-4 gap-3 mt-8">
+      {buttons.map(({ rating, label, sublabel, 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`}
+        >
+          <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>
+          </div>
+          <div className="absolute inset-0 bg-white/20 opacity-0 group-hover:opacity-100 transition-opacity" />
+        </button>
+      ))}
+    </div>
+  );
+}