Function InsertVariableModal

src/components/BanksSidebar.jsx:500–552

({ isOpen, onClose, categories, banks, onSelect, t, language, isDarkMode })

 * 核心组件：变量插入选择器
 */
export const InsertVariableModal = ({ isOpen, onClose, categories, banks, onSelect, t, language, isDarkMode }) => {
  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 bg-black/50 z-[100] flex items-center justify-center p-4 animate-fade-in">
      <div className={`rounded-xl shadow-xl w-full max-w-md overflow-hidden flex flex-col max-h-[80vh] animate-slide-up ${isDarkMode ? 'bg-[#242120] border border-white/5' : 'bg-white'}`}>
        <div className={`p-4 border-b flex justify-between items-center ${isDarkMode ? 'border-white/5 bg-black/20' : 'border-gray-100 bg-gray-50'}`}>
          <h3 className={`font-bold flex items-center gap-2 ${isDarkMode ? 'text-gray-300' : 'text-gray-800'}`}>
            <List size={18} className="text-orange-600" /> {t('insert')}
          </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="flex-1 overflow-y-auto p-4 space-y-4">
           {Object.keys(categories).map(catId => {
               const catBanks = Object.entries(banks).filter(([_, bank]) => (bank.category || 'other') === catId);
               if (catBanks.length === 0) return null;
               
               const category = categories[catId];
               const style = CATEGORY_STYLES[category.color] || CATEGORY_STYLES.slate;

               return (
                   <div key={catId}>
                       <h4 className={`text-xs font-bold uppercase tracking-wider mb-2 flex items-center gap-1.5 sticky top-0 py-1 z-10 ${style.text} ${isDarkMode ? 'bg-[#242120]' : 'bg-white'}`}>
                           <span className={`w-1.5 h-1.5 rounded-full ${style.dotBg}`}></span>
                           {getLocalized(category.label, language)}
                       </h4>
                       <div className="grid grid-cols-1 gap-2">
                           {catBanks.map(([key, bank]) => (
                               <button
                                   key={key}
                                   onClick={() => onSelect(key)}
                                   className={`
                                     flex items-center justify-between p-3 rounded-lg border text-left transition-all group
                                     ${isDarkMode ? 'bg-white/5 border-white/5 hover:border-orange-500/50 hover:bg-orange-500/5 hover:shadow-lg hover:shadow-orange-500/5' : 'bg-white border-gray-100 hover:border-orange-200 hover:bg-orange-50/50 hover:shadow-sm'}
                                   `}
                               >
                                   <div>
                                       <span className={`block text-sm font-medium transition-colors ${isDarkMode ? 'text-gray-300 group-hover:text-orange-400' : 'text-gray-700 group-hover:text-orange-700'}`}>{getLocalized(bank.label, language)}</span>
                                       <code className={`text-[10px] font-mono transition-colors ${isDarkMode ? 'text-gray-600 group-hover:text-orange-400/60' : 'text-gray-400 group-hover:text-orange-400'}`}>{`{{${key}}}`}</code>
                                   </div>
                                   <Plus size={16} className={`transition-colors ${isDarkMode ? 'text-gray-700 group-hover:text-orange-500' : 'text-gray-300 group-hover:text-orange-500'}`} />
                               </button>
                           ))}
                       </div>
                   </div>
               );
           })}
        </div>
      </div>
    </div>
  );
};

/**
 * 核心组件：添加词库模态框