添加加载状态指示器

- 在切换供应商时显示加载状态
- 禁用操作按钮防止重复提交
- 提供视觉反馈改善用户体验
This commit is contained in:
farion1231
2025-08-06 07:46:59 +08:00
parent 558103171e
commit c867cfdb32
2 changed files with 12 additions and 4 deletions

View File

@@ -8,6 +8,7 @@ interface ProviderListProps {
onSwitch: (id: string) => void
onDelete: (id: string) => void
onEdit: (id: string) => void
isLoading?: boolean
}
const ProviderList: React.FC<ProviderListProps> = ({
@@ -15,7 +16,8 @@ const ProviderList: React.FC<ProviderListProps> = ({
currentProviderId,
onSwitch,
onDelete,
onEdit
onEdit,
isLoading = false
}) => {
return (
<div className="provider-list">
@@ -52,20 +54,21 @@ const ProviderList: React.FC<ProviderListProps> = ({
<button
className="enable-btn"
onClick={() => onSwitch(provider.id)}
disabled={isCurrent}
disabled={isCurrent || isLoading}
>
{isLoading ? '处理中...' : '启用'}
</button>
<button
className="edit-btn"
onClick={() => onEdit(provider.id)}
disabled={isLoading}
>
</button>
<button
className="delete-btn"
onClick={() => onDelete(provider.id)}
disabled={isCurrent}
disabled={isCurrent || isLoading}
>
</button>