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