feat: 法语词汇学习应用

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

src/components/ImportModal.tsx

@@ -0,0 +1,137 @@
+import { useState, useRef } from 'react';
+
+interface ImportModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onImport: (words: any[]) => void;
+}
+
+export function ImportModal({ isOpen, onClose, onImport }: ImportModalProps) {
+  const [content, setContent] = useState('');
+  const [error, setError] = useState('');
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  if (!isOpen) return null;
+
+  const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    const reader = new FileReader();
+    reader.onload = (event) => {
+      const text = event.target?.result as string;
+      setContent(text);
+      parseContent(text);
+    };
+    reader.readAsText(file);
+  };
+
+  const parseContent = (text: string) => {
+    try {
+      // Try JSON first
+      const json = JSON.parse(text);
+      if (Array.isArray(json)) {
+        onImport(json);
+        onClose();
+        return;
+      }
+      if (json.words && Array.isArray(json.words)) {
+        onImport(json.words);
+        onClose();
+        return;
+      }
+    } catch {
+      // Not JSON, try CSV
+      const lines = text.trim().split('\n');
+      const words = lines.map((line, index) => {
+        const parts = line.split(',').map(p => p.trim());
+        return {
+          id: `imported-${Date.now()}-${index}`,
+          french: parts[0] || '',
+          english: parts[1] || '',
+          pronunciation: parts[2] || '',
+          category: parts[3] || 'General',
+          difficulty: 'beginner',
+        };
+      }).filter(w => w.french && w.english);
+
+      if (words.length > 0) {
+        onImport(words);
+        onClose();
+      } else {
+        setError('无法解析文件格式');
+      }
+    }
+  };
+
+  const handleSubmit = () => {
+    if (!content.trim()) {
+      setError('请输入内容');
+      return;
+    }
+    parseContent(content);
+  };
+
+  return (
+    <div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 p-4">
+      <div className="bg-white rounded-3xl shadow-2xl max-w-lg w-full p-6">
+        <h2 className="text-2xl font-bold text-gray-800 mb-4">导入词库</h2>
+        
+        <div className="space-y-4">
+          <div>
+            <label className="block text-sm font-medium text-gray-600 mb-2">
+              上传文件 (CSV 或 JSON)
+            </label>
+            <input
+              ref={fileInputRef}
+              type="file"
+              accept=".csv,.json"
+              onChange={handleFileUpload}
+              className="w-full px-4 py-2 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500"
+            />
+          </div>
+
+          <div className="relative">
+            <div className="absolute inset-0 flex items-center">
+              <div className="w-full border-t border-gray-200"></div>
+            </div>
+            <div className="relative flex justify-center text-sm">
+              <span className="px-2 bg-white text-gray-500">或粘贴内容</span>
+            </div>
+          </div>
+
+          <textarea
+            value={content}
+            onChange={(e) => setContent(e.target.value)}
+            placeholder={`CSV 格式:
+french,english,pronunciation,category
+Bonjour,Hello,bɔ̃ʒuʁ,Greetings
+
+JSON 格式:
+[{"french": "Bonjour", "english": "Hello"}]`}
+            className="w-full h-40 px-4 py-3 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 font-mono text-sm"
+          />
+
+          {error && (
+            <p className="text-red-500 text-sm">{error}</p>
+          )}
+
+          <div className="flex gap-3 pt-2">
+            <button
+              onClick={onClose}
+              className="flex-1 px-4 py-3 border border-gray-200 rounded-xl text-gray-600 hover:bg-gray-50 transition-colors"
+            >
+              取消
+            </button>
+            <button
+              onClick={handleSubmit}
+              className="flex-1 px-4 py-3 bg-gradient-to-r from-blue-500 to-indigo-600 text-white rounded-xl hover:shadow-lg transition-all"
+            >
+              导入
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}