添加供应商编辑功能和密码显示切换

- 为供应商列表添加启用和编辑按钮
- 创建EditProviderModal组件支持编辑供应商信息
- 实现updateProvider API接口
- 为API Key输入框添加密码显示/隐藏功能,使用SVG图标
- 更新预设供应商配置为YesCode和PackyCode
- 移除model字段,简化供应商配置
This commit is contained in:
farion1231
2025-08-05 09:51:41 +08:00
parent 35cb750d19
commit 7ffd03e039
8 changed files with 298 additions and 32 deletions

View File

@@ -11,9 +11,9 @@ const AddProviderModal: React.FC<AddProviderModalProps> = ({ onAdd, onClose }) =
const [formData, setFormData] = useState({
name: '',
apiUrl: '',
apiKey: '',
model: 'claude-3-opus-20240229'
apiKey: ''
})
const [showPassword, setShowPassword] = useState(false)
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault()
@@ -36,14 +36,12 @@ const AddProviderModal: React.FC<AddProviderModalProps> = ({ onAdd, onClose }) =
// 预设的供应商配置
const presets = [
{
name: '官方 Anthropic',
apiUrl: 'https://api.anthropic.com',
model: 'claude-3-opus-20240229'
name: 'YesCode',
apiUrl: 'https://co.yes.vg'
},
{
name: 'OpenRouter',
apiUrl: 'https://openrouter.ai/api/v1',
model: 'anthropic/claude-3-opus'
name: 'PackyCode',
apiUrl: 'https://api.packycode.com'
}
]
@@ -51,8 +49,7 @@ const AddProviderModal: React.FC<AddProviderModalProps> = ({ onAdd, onClose }) =
setFormData({
...formData,
name: preset.name,
apiUrl: preset.apiUrl,
model: preset.model
apiUrl: preset.apiUrl
})
}
@@ -106,27 +103,36 @@ const AddProviderModal: React.FC<AddProviderModalProps> = ({ onAdd, onClose }) =
<div className="form-group">
<label htmlFor="apiKey">API Key *</label>
<input
type="password"
id="apiKey"
name="apiKey"
value={formData.apiKey}
onChange={handleChange}
placeholder="sk-ant-..."
required
/>
</div>
<div className="form-group">
<label htmlFor="model"></label>
<input
type="text"
id="model"
name="model"
value={formData.model}
onChange={handleChange}
placeholder="claude-3-opus-20240229"
/>
<div className="password-input-wrapper">
<input
type={showPassword ? "text" : "password"}
id="apiKey"
name="apiKey"
value={formData.apiKey}
onChange={handleChange}
placeholder={formData.name === 'YesCode' ? 'cr_...' : 'sk-...'}
required
/>
<button
type="button"
className="password-toggle"
onClick={() => setShowPassword(!showPassword)}
tabIndex={-1}
title={showPassword ? "隐藏密码" : "显示密码"}
>
{showPassword ? (
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
<circle cx="12" cy="12" r="3" />
</svg>
) : (
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24" />
<line x1="1" y1="1" x2="23" y2="23" />
</svg>
)}
</button>
</div>
</div>
<div className="form-actions">