修复编辑后输入框无法选中的焦点管理问题

- 移除阻塞式alert调用,避免焦点管理冲突
- 清理不必要的CSS z-index层级设置
- 优化EditProviderModal的useEffect依赖管理
- 改用console日志记录操作结果

问题原因:alert()强制抢夺焦点,在模态框关闭时打断正常焦点流转
This commit is contained in:
farion1231
2025-08-06 15:20:08 +08:00
parent 41a6bda4ab
commit 6c7d4c158f
3 changed files with 17 additions and 12 deletions

View File

@@ -58,9 +58,10 @@ function App() {
const success = await window.electronAPI.switchProvider(id)
if (success) {
setCurrentProviderId(id)
alert('切换成功!')
// 移除阻塞式alert
console.log('供应商切换成功')
} else {
alert('切换失败,请检查配置')
console.error('切换失败,请检查配置')
}
}
@@ -69,10 +70,17 @@ function App() {
await window.electronAPI.updateProvider(provider)
await loadProviders()
setEditingProviderId(null)
alert('保存成功!')
// 移除阻塞式alert避免焦点管理问题
setTimeout(() => {
console.log('供应商更新成功')
}, 100)
} catch (error) {
console.error('更新供应商失败:', error)
alert('保存失败,请重试')
setEditingProviderId(null)
// 错误情况下也避免alert
setTimeout(() => {
console.error('保存失败,请重试')
}, 100)
}
}

View File

@@ -81,8 +81,6 @@
border-radius: 4px;
font-size: 0.95rem;
transition: border-color 0.2s;
position: relative;
z-index: 1;
background: white;
}
@@ -152,7 +150,6 @@
justify-content: center;
width: 32px;
height: 32px;
z-index: 2;
}
.password-toggle svg {

View File

@@ -25,7 +25,7 @@ const EditProviderModal: React.FC<EditProviderModalProps> = ({ provider, onSave,
apiKey: provider.apiKey,
websiteUrl: provider.websiteUrl || ''
})
}, [provider])
}, [provider.id, provider.name, provider.apiUrl, provider.apiKey, provider.websiteUrl])
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault()
@@ -86,7 +86,7 @@ const EditProviderModal: React.FC<EditProviderModalProps> = ({ provider, onSave,
type="text"
id="name"
name="name"
value={formData.name || ''}
value={formData.name}
onChange={handleChange}
placeholder="例如:官方 Anthropic"
required
@@ -100,7 +100,7 @@ const EditProviderModal: React.FC<EditProviderModalProps> = ({ provider, onSave,
type="url"
id="apiUrl"
name="apiUrl"
value={formData.apiUrl || ''}
value={formData.apiUrl}
onChange={handleChange}
onBlur={handleApiUrlBlur}
placeholder="https://api.anthropic.com"
@@ -115,7 +115,7 @@ const EditProviderModal: React.FC<EditProviderModalProps> = ({ provider, onSave,
type="text"
id="websiteUrl"
name="websiteUrl"
value={formData.websiteUrl || ''}
value={formData.websiteUrl}
onChange={handleChange}
placeholder="https://example.com可选"
autoComplete="off"
@@ -130,7 +130,7 @@ const EditProviderModal: React.FC<EditProviderModalProps> = ({ provider, onSave,
type={showPassword ? "text" : "password"}
id="apiKey"
name="apiKey"
value={formData.apiKey || ''}
value={formData.apiKey}
onChange={handleChange}
placeholder={formData.name && formData.name.includes('YesCode') ? 'cr_...' : 'sk-...'}
required