feat: add translate

This commit is contained in:
liuyuanchuang
2026-01-24 13:53:50 +08:00
parent 6747205bd0
commit 42850c4460
12 changed files with 572 additions and 66 deletions

View File

@@ -1,5 +1,6 @@
import { useCallback, useState, useEffect, useRef } from 'react';
import { Upload, X, MousePointerClick, FileUp, ClipboardPaste } from 'lucide-react';
import { useLanguage } from '../contexts/LanguageContext';
interface UploadModalProps {
onClose: () => void;
@@ -7,6 +8,7 @@ interface UploadModalProps {
}
export default function UploadModal({ onClose, onUpload }: UploadModalProps) {
const { t } = useLanguage();
const [dragActive, setDragActive] = useState(false);
const fileInputRef = useRef<HTMLInputElement>(null);
@@ -75,7 +77,7 @@ export default function UploadModal({ onClose, onUpload }: UploadModalProps) {
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
<div className="bg-white rounded-xl shadow-xl max-w-2xl w-full p-6">
<div className="flex justify-between items-center mb-6">
<h2 className="text-2xl font-bold text-gray-900"></h2>
<h2 className="text-2xl font-bold text-gray-900">{t.uploadModal.title}</h2>
<button
onClick={onClose}
className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
@@ -99,6 +101,7 @@ export default function UploadModal({ onClose, onUpload }: UploadModalProps) {
<Upload size={32} />
</div>
<p className="text-sm text-gray-600 mb-1">{t.sidebar.uploadInstruction}</p>
<input
ref={fileInputRef}
type="file"
@@ -108,22 +111,22 @@ export default function UploadModal({ onClose, onUpload }: UploadModalProps) {
className="hidden"
/>
<p className="text-xs text-gray-500 mt-4">
Support JPG, PNG format
<p className="text-xs text-gray-500 mb-4">
{t.uploadModal.supportFormats}
</p>
<div className="flex items-center justify-center gap-4 mt-6 text-xs text-gray-400">
<div className="flex items-center gap-1">
<MousePointerClick className="w-3.5 h-3.5" />
<span>Click</span>
<span>{t.common.click}</span>
</div>
<div className="flex items-center gap-1">
<FileUp className="w-3.5 h-3.5" />
<span>Drop</span>
<span>{t.common.drop}</span>
</div>
<div className="flex items-center gap-1">
<ClipboardPaste className="w-3.5 h-3.5" />
<span>Paste</span>
<span>{t.common.paste}</span>
</div>
</div>
</div>