修复URL推测功能:支持不完整URL输入并保持验证

- 修复inferWebsiteUrl函数,支持无协议URL的推测
- 在API地址失焦时自动补全https://协议
- 同时更新API地址和网站地址字段
- 保持URL输入验证,确保API地址有效性
- 提升用户体验:用户可输入api.example.com等简化格式
This commit is contained in:
farion1231
2025-08-06 11:42:58 +08:00
parent 71a8fd166f
commit 208987107e
3 changed files with 48 additions and 3 deletions

View File

@@ -43,6 +43,24 @@ const AddProviderModal: React.FC<AddProviderModalProps> = ({ onAdd, onClose }) =
setFormData(newFormData)
}
const handleApiUrlBlur = (e: React.FocusEvent<HTMLInputElement>) => {
const apiUrl = e.target.value.trim()
if (apiUrl) {
let normalizedApiUrl = apiUrl
// 如果没有协议,添加 https://
if (!normalizedApiUrl.match(/^https?:\/\//)) {
normalizedApiUrl = 'https://' + normalizedApiUrl
}
setFormData(prev => ({
...prev,
apiUrl: normalizedApiUrl,
websiteUrl: inferWebsiteUrl(normalizedApiUrl)
}))
}
}
// 预设的供应商配置
const presets = [
{
@@ -109,6 +127,7 @@ const AddProviderModal: React.FC<AddProviderModalProps> = ({ onAdd, onClose }) =
name="apiUrl"
value={formData.apiUrl}
onChange={handleChange}
onBlur={handleApiUrlBlur}
placeholder="https://api.anthropic.com"
required
/>
@@ -117,7 +136,7 @@ const AddProviderModal: React.FC<AddProviderModalProps> = ({ onAdd, onClose }) =
<div className="form-group">
<label htmlFor="websiteUrl"></label>
<input
type="url"
type="text"
id="websiteUrl"
name="websiteUrl"
value={formData.websiteUrl}

View File

@@ -56,6 +56,24 @@ const EditProviderModal: React.FC<EditProviderModalProps> = ({ provider, onSave,
setFormData(newFormData)
}
const handleApiUrlBlur = (e: React.FocusEvent<HTMLInputElement>) => {
const apiUrl = e.target.value.trim()
if (apiUrl) {
let normalizedApiUrl = apiUrl
// 如果没有协议,添加 https://
if (!normalizedApiUrl.match(/^https?:\/\//)) {
normalizedApiUrl = 'https://' + normalizedApiUrl
}
setFormData(prev => ({
...prev,
apiUrl: normalizedApiUrl,
websiteUrl: inferWebsiteUrl(normalizedApiUrl)
}))
}
}
return (
<div className="modal-overlay" onClick={onClose}>
<div className="modal-content" onClick={(e) => e.stopPropagation()}>
@@ -84,6 +102,7 @@ const EditProviderModal: React.FC<EditProviderModalProps> = ({ provider, onSave,
name="apiUrl"
value={formData.apiUrl || ''}
onChange={handleChange}
onBlur={handleApiUrlBlur}
placeholder="https://api.anthropic.com"
required
autoComplete="off"
@@ -93,7 +112,7 @@ const EditProviderModal: React.FC<EditProviderModalProps> = ({ provider, onSave,
<div className="form-group">
<label htmlFor="websiteUrl"></label>
<input
type="url"
type="text"
id="websiteUrl"
name="websiteUrl"
value={formData.websiteUrl || ''}

View File

@@ -8,8 +8,15 @@ export function inferWebsiteUrl(apiUrl: string): string {
return ''
}
let urlString = apiUrl.trim()
// 如果没有协议,默认添加 https://
if (!urlString.match(/^https?:\/\//)) {
urlString = 'https://' + urlString
}
try {
const url = new URL(apiUrl.trim())
const url = new URL(urlString)
// 如果是localhost或IP地址去掉路径部分
if (url.hostname === 'localhost' || /^\d+\.\d+\.\d+\.\d+$/.test(url.hostname)) {