添加加载状态指示器

- 在切换供应商时显示加载状态
- 禁用操作按钮防止重复提交
- 提供视觉反馈改善用户体验
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

@@ -27,6 +27,7 @@ function App() {
message: string
type: 'success' | 'error' | 'info'
} | null>(null)
const [isLoading, setIsLoading] = useState(false)
// 加载供应商列表
useEffect(() => {
@@ -88,7 +89,10 @@ function App() {
title: '切换供应商',
message: `确定要切换到"${provider.name}"吗?`,
onConfirm: async () => {
setIsLoading(true)
const success = await window.electronAPI.switchProvider(id)
setIsLoading(false)
if (success) {
setCurrentProviderId(id)
setMessageModal({
@@ -160,6 +164,7 @@ function App() {
onSwitch={handleSwitchProvider}
onDelete={handleDeleteProvider}
onEdit={setEditingProviderId}
isLoading={isLoading}
/>
{configPath && (

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>