增强供应商配置:添加网站地址字段和智能推测功能
- 添加websiteUrl可选字段到Provider类型 - 实现API地址到网站地址的自动推测逻辑(去除api.前缀) - 在添加/编辑供应商表单中增加网站地址字段 - 供应商列表智能显示:有网址显示可点击链接,无网址显示API地址 - 提升用户体验:避免点击API端点地址导致的错误页面
This commit is contained in:
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user