添加加载状态指示器
- 在切换供应商时显示加载状态 - 禁用操作按钮防止重复提交 - 提供视觉反馈改善用户体验
This commit is contained in:
@@ -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 && (
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user