注册开关添加确认框

This commit is contained in:
mtvpls
2025-12-14 20:32:52 +08:00
parent 23ba74dd86
commit 0eb4283bbd

View File

@@ -4578,6 +4578,7 @@ const SiteConfigComponent = ({
const { alertModal, showAlert, hideAlert } = useAlertModal();
const { isLoading, withLoading } = useLoadingState();
const [showEnableCommentsModal, setShowEnableCommentsModal] = useState(false);
const [showEnableRegistrationModal, setShowEnableRegistrationModal] = useState(false);
const [siteSettings, setSiteSettings] = useState<SiteConfig>({
SiteName: '',
Announcement: '',
@@ -4767,6 +4768,29 @@ const SiteConfigComponent = ({
setShowEnableCommentsModal(false);
};
// 处理注册开关变化
const handleRegistrationToggle = (checked: boolean) => {
if (checked) {
// 如果要开启注册,弹出确认框
setShowEnableRegistrationModal(true);
} else {
// 直接关闭注册
setSiteSettings((prev) => ({
...prev,
EnableRegistration: false,
}));
}
};
// 确认开启注册
const handleConfirmEnableRegistration = () => {
setSiteSettings((prev) => ({
...prev,
EnableRegistration: true,
}));
setShowEnableRegistrationModal(false);
};
// 保存站点配置
const handleSave = async () => {
await withLoading('saveSiteConfig', async () => {
@@ -5263,12 +5287,7 @@ const SiteConfigComponent = ({
</label>
<button
type='button'
onClick={() =>
setSiteSettings((prev) => ({
...prev,
EnableRegistration: !prev.EnableRegistration,
}))
}
onClick={() => handleRegistrationToggle(!siteSettings.EnableRegistration)}
className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 ${
siteSettings.EnableRegistration
? buttonStyles.toggleOn
@@ -5844,6 +5863,77 @@ const SiteConfigComponent = ({
</div>,
document.body
)}
{/* 开启注册确认弹窗 */}
{showEnableRegistrationModal &&
createPortal(
<div
className='fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4'
onClick={() => setShowEnableRegistrationModal(false)}
>
<div
className='bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-md w-full'
onClick={(e) => e.stopPropagation()}
>
<div className='p-6'>
<div className='flex items-center justify-between mb-6'>
<h3 className='text-xl font-semibold text-gray-900 dark:text-gray-100'>
</h3>
<button
onClick={() => setShowEnableRegistrationModal(false)}
className='text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors'
>
<svg
className='w-6 h-6'
fill='none'
stroke='currentColor'
viewBox='0 0 24 24'
>
<path
strokeLinecap='round'
strokeLinejoin='round'
strokeWidth={2}
d='M6 18L18 6M6 6l12 12'
/>
</svg>
</button>
</div>
<div className='mb-6'>
<div className='bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-4'>
<div className='flex items-center space-x-2 mb-2'>
<AlertTriangle className='w-5 h-5 text-yellow-600 dark:text-yellow-400' />
<span className='text-sm font-medium text-yellow-800 dark:text-yellow-300'>
</span>
</div>
<p className='text-sm text-yellow-700 dark:text-yellow-400'>
</p>
</div>
</div>
{/* 操作按钮 */}
<div className='flex justify-end space-x-3'>
<button
onClick={() => setShowEnableRegistrationModal(false)}
className={`px-6 py-2.5 text-sm font-medium ${buttonStyles.secondary}`}
>
</button>
<button
onClick={handleConfirmEnableRegistration}
className={`px-6 py-2.5 text-sm font-medium ${buttonStyles.primary}`}
>
</button>
</div>
</div>
</div>
</div>,
document.body
)}
</div>
);
};