import React, { useEffect } from 'react'; import { Modal, Select, Button, Space, Typography, message, Spin } from 'antd'; import { GlobalOutlined } from '@ant-design/icons'; import { useAppDispatch, useAppSelector } from '../states/store'; import { loadAvailableLanguages, updateSystemLanguage, setSelectedLanguage, } from '../states/i18nSlice'; const { Text } = Typography; interface LanguageSettingModalProps { visible: boolean; onClose: () => void; } const LanguageSettingModal: React.FC = ({ visible, onClose, }) => { const dispatch = useAppDispatch(); // 从 Redux 获取状态 const { availableLanguages, selectedLanguage, currentSystemLocale, languagesLoading, savingLanguage, languageError, } = useAppSelector((state) => state.i18n); // 加载语言列表 useEffect(() => { if (visible && availableLanguages.length === 0) { dispatch(loadAvailableLanguages()); } }, [visible, dispatch, availableLanguages.length]); // 显示错误消息 useEffect(() => { if (languageError) { message.error({ content: languageError, duration: 3, }); } }, [languageError]); const handleSave = async (): Promise => { if (!selectedLanguage) { message.warning('请选择一个语言'); return; } try { await dispatch(updateSystemLanguage(selectedLanguage)).unwrap(); message.success({ content: '语言设置已保存', duration: 2, }); message.info({ content: '请重启电脑以应用新的语言设置', duration: 3, }); onClose(); } catch (error) { // 错误已经在 Redux slice 中处理并通过 languageError 显示 console.error('修改语言失败:', error); } }; const handleCancel = (): void => { onClose(); }; const handleLanguageChange = (value: string): void => { dispatch(setSelectedLanguage(value)); }; return ( 语言设置 } open={visible} onCancel={handleCancel} footer={null} centered width={500} >
{languagesLoading ? (
) : ( <> {currentSystemLocale && (
当前语言:{currentSystemLocale}
)}
选择语言:
)}
); }; export default LanguageSettingModal;