增强供应商配置:添加网站地址字段和智能推测功能

- 添加websiteUrl可选字段到Provider类型
- 实现API地址到网站地址的自动推测逻辑(去除api.前缀)
- 在添加/编辑供应商表单中增加网站地址字段
- 供应商列表智能显示:有网址显示可点击链接,无网址显示API地址
- 提升用户体验:避免点击API端点地址导致的错误页面
This commit is contained in:
farion1231
2025-08-06 10:09:58 +08:00
parent 4540ad613f
commit 71a8fd166f
7 changed files with 126 additions and 21 deletions

View File

@@ -1,5 +1,6 @@
import React, { useState } from 'react'
import { Provider } from '../../shared/types'
import { inferWebsiteUrl } from '../../shared/utils'
import './AddProviderModal.css'
interface AddProviderModalProps {
@@ -11,7 +12,8 @@ const AddProviderModal: React.FC<AddProviderModalProps> = ({ onAdd, onClose }) =
const [formData, setFormData] = useState({
name: '',
apiUrl: '',
apiKey: ''
apiKey: '',
websiteUrl: ''
})
const [showPassword, setShowPassword] = useState(false)
@@ -27,10 +29,18 @@ const AddProviderModal: React.FC<AddProviderModalProps> = ({ onAdd, onClose }) =
}
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
setFormData({
const { name, value } = e.target
const newFormData = {
...formData,
[e.target.name]: e.target.value
})
[name]: value
}
// 如果修改的是API地址自动推测网站地址
if (name === 'apiUrl') {
newFormData.websiteUrl = inferWebsiteUrl(value)
}
setFormData(newFormData)
}
// 预设的供应商配置
@@ -46,11 +56,14 @@ const AddProviderModal: React.FC<AddProviderModalProps> = ({ onAdd, onClose }) =
]
const applyPreset = (preset: typeof presets[0]) => {
setFormData({
const newFormData = {
...formData,
name: preset.name,
apiUrl: preset.apiUrl
})
}
// 应用预设时也自动推测网站地址
newFormData.websiteUrl = inferWebsiteUrl(preset.apiUrl)
setFormData(newFormData)
}
return (
@@ -101,6 +114,19 @@ const AddProviderModal: React.FC<AddProviderModalProps> = ({ onAdd, onClose }) =
/>
</div>
<div className="form-group">
<label htmlFor="websiteUrl"></label>
<input
type="url"
id="websiteUrl"
name="websiteUrl"
value={formData.websiteUrl}
onChange={handleChange}
placeholder="https://example.com可选"
/>
<small className="field-hint">访API地址</small>
</div>
<div className="form-group">
<label htmlFor="apiKey">API Key *</label>
<div className="password-input-wrapper">