Function AddBankModal

src/components/BanksSidebar.jsx:557–633

({ isOpen, onClose, t, categories, newBankLabel, setNewBankLabel, newBankKey, setNewBankKey, newBankCategory, setNewBankCategory, onConfirm, language, isDarkMode })

 * 核心组件：添加词库模态框
 */
export const AddBankModal = ({ isOpen, onClose, t, categories, newBankLabel, setNewBankLabel, newBankKey, setNewBankKey, newBankCategory, setNewBankCategory, onConfirm, language, isDarkMode }) => {
    if (!isOpen) return null;

    return (
        <div 
            className="fixed inset-0 z-[120] bg-black/40 backdrop-blur-sm flex items-center justify-center p-4 animate-fade-in"
            onClick={onClose}
        >
            <div 
                className={`w-full max-w-md rounded-2xl shadow-2xl overflow-hidden border animate-scale-up ${isDarkMode ? 'bg-[#242120] border-white/5' : 'bg-white border-gray-100'}`}
                onClick={(e) => e.stopPropagation()}
            >
                <div className={`p-4 border-b flex justify-between items-center ${isDarkMode ? 'bg-black/20 border-white/5' : 'bg-gray-50 border-gray-100'}`}>
                    <h3 className={`font-bold flex items-center gap-2 ${isDarkMode ? 'text-gray-300' : 'text-gray-800'}`}>
                        <span className="w-2 h-2 rounded-full bg-orange-500"></span>
                        {t('add_bank_title')}
                    </h3>
                    <button onClick={onClose} className={`p-1 rounded transition-colors ${isDarkMode ? 'hover:bg-white/10 text-gray-500' : 'hover:bg-gray-200 text-gray-500'}`}>
                        <X size={18}/>
                    </button>
                </div>
                
                <div className="p-6 space-y-4">
                    <div>
                        <label className={`block text-xs mb-1.5 font-bold uppercase tracking-wide ${isDarkMode ? 'text-gray-600' : 'text-gray-500'}`}>{t('label_name')}</label>
                        <input 
                            autoFocus
                            type="text" 
                            className={`w-full text-sm rounded-xl px-4 py-3 focus:ring-2 focus:ring-orange-200 focus:border-orange-500 outline-none transition-all ${isDarkMode ? 'bg-white/5 border border-white/10 text-gray-200' : 'border border-gray-200 bg-gray-50/50 text-gray-700'}`}
                            placeholder={t('label_placeholder')}
                            value={newBankLabel}
                            onChange={e => setNewBankLabel(e.target.value)}
                        />
                    </div>
                    <div>
                        <label className={`block text-xs mb-1.5 font-bold uppercase tracking-wide ${isDarkMode ? 'text-gray-600' : 'text-gray-500'}`}>{t('id_name')}</label>
                        <input 
                            type="text" 
                            className={`w-full text-sm rounded-xl px-4 py-3 font-mono focus:ring-2 focus:ring-orange-200 focus:border-orange-500 outline-none transition-all ${isDarkMode ? 'bg-white/5 border border-white/10 text-gray-200' : 'border border-gray-200 bg-gray-50/50 text-gray-700'}`}
                            placeholder={t('id_placeholder')}
                            value={newBankKey}
                            onChange={e => setNewBankKey(e.target.value)} 
                        />
                    </div>
                    <div>
                        <label className={`block text-xs mb-1.5 font-bold uppercase tracking-wide ${isDarkMode ? 'text-gray-600' : 'text-gray-500'}`}>{t('category_label')}</label>
                        <select 
                            value={newBankCategory}
                            onChange={e => setNewBankCategory(e.target.value)}
                            className={`w-full text-sm border rounded-xl px-4 py-3 focus:ring-2 focus:ring-orange-200 focus:border-orange-500 outline-none transition-all appearance-none ${isDarkMode ? 'bg-[#2A2726] border-white/10 text-gray-300' : 'border-gray-200 bg-gray-50/50 text-gray-700'}`}
                        >
                            {Object.values(categories).map(cat => (
                                <option key={cat.id} value={cat.id}>{getLocalized(cat.label, language)}</option>
                            ))}
                        </select>
                    </div>

                    <div className="pt-4 flex gap-3">