添加加载状态指示器

- 在切换供应商时显示加载状态
- 禁用操作按钮防止重复提交
- 提供视觉反馈改善用户体验
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 message: string
type: 'success' | 'error' | 'info' type: 'success' | 'error' | 'info'
} | null>(null) } | null>(null)
const [isLoading, setIsLoading] = useState(false)
// 加载供应商列表 // 加载供应商列表
useEffect(() => { useEffect(() => {
@@ -88,7 +89,10 @@ function App() {
title: '切换供应商', title: '切换供应商',
message: `确定要切换到"${provider.name}"吗?`, message: `确定要切换到"${provider.name}"吗?`,
onConfirm: async () => { onConfirm: async () => {
setIsLoading(true)
const success = await window.electronAPI.switchProvider(id) const success = await window.electronAPI.switchProvider(id)
setIsLoading(false)
if (success) { if (success) {
setCurrentProviderId(id) setCurrentProviderId(id)
setMessageModal({ setMessageModal({
@@ -160,6 +164,7 @@ function App() {
onSwitch={handleSwitchProvider} onSwitch={handleSwitchProvider}
onDelete={handleDeleteProvider} onDelete={handleDeleteProvider}
onEdit={setEditingProviderId} onEdit={setEditingProviderId}
isLoading={isLoading}
/> />
{configPath && ( {configPath && (

View File

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