feat(ui): implement global ConfirmationModal to replace native window.confirm

This commit is contained in:
Supra4E8C
2026-01-17 14:59:46 +08:00
parent 0bb34ca74b
commit b8d7b8997c
4 changed files with 132 additions and 19 deletions

View File

@@ -14,7 +14,7 @@ import styles from './ApiKeysPage.module.scss';
export function ApiKeysPage() {
const { t } = useTranslation();
const { showNotification } = useNotificationStore();
const { showNotification, showConfirmation } = useNotificationStore();
const connectionStatus = useAuthStore((state) => state.connectionStatus);
const config = useConfigStore((state) => state.config);
@@ -29,7 +29,6 @@ export function ApiKeysPage() {
const [editingIndex, setEditingIndex] = useState<number | null>(null);
const [inputValue, setInputValue] = useState('');
const [saving, setSaving] = useState(false);
const [deletingIndex, setDeletingIndex] = useState<number | null>(null);
const disableControls = useMemo(() => connectionStatus !== 'connected', [connectionStatus]);
@@ -115,21 +114,24 @@ export function ApiKeysPage() {
}
};
const handleDelete = async (index: number) => {
if (!window.confirm(t('api_keys.delete_confirm'))) return;
setDeletingIndex(index);
try {
await apiKeysApi.delete(index);
const nextKeys = apiKeys.filter((_, idx) => idx !== index);
setApiKeys(nextKeys);
updateConfigValue('api-keys', nextKeys);
clearCache('api-keys');
showNotification(t('notification.api_key_deleted'), 'success');
} catch (err: any) {
showNotification(`${t('notification.delete_failed')}: ${err?.message || ''}`, 'error');
} finally {
setDeletingIndex(null);
}
const handleDelete = (index: number) => {
showConfirmation({
title: t('common.delete'),
message: t('api_keys.delete_confirm'),
variant: 'danger',
onConfirm: async () => {
try {
await apiKeysApi.delete(index);
const nextKeys = apiKeys.filter((_, idx) => idx !== index);
setApiKeys(nextKeys);
updateConfigValue('api-keys', nextKeys);
clearCache('api-keys');
showNotification(t('notification.api_key_deleted'), 'success');
} catch (err: any) {
showNotification(`${t('notification.delete_failed')}: ${err?.message || ''}`, 'error');
}
}
});
};
const actionButtons = (
@@ -181,8 +183,7 @@ export function ApiKeysPage() {
variant="danger"
size="sm"
onClick={() => handleDelete(index)}
disabled={disableControls || deletingIndex === index}
loading={deletingIndex === index}
disabled={disableControls}
>
{t('common.delete')}
</Button>