移除模态框点击外部关闭功能，防止误触关闭
- 移除 AddProviderModal 的点击遮罩层关闭功能 - 移除 EditProviderModal 的点击遮罩层关闭功能 - 用户现在只能通过按钮主动关闭模态框，提升用户体验
This commit is contained in:
farion1231
@@ -1,101 +1,110 @@
|
|||||||
import React, { useState } from 'react'
|
import React, { useState } from "react";
|
||||||
import { Provider } from '../../shared/types'
|
import { Provider } from "../../shared/types";
|
||||||
import { inferWebsiteUrl } from '../../shared/utils'
|
import { inferWebsiteUrl } from "../../shared/utils";
|
||||||
import './AddProviderModal.css'
|
import "./AddProviderModal.css";
|
||||||
|
|
||||||
interface AddProviderModalProps {
|
interface AddProviderModalProps {
|
||||||
onAdd: (provider: Omit<Provider, 'id'>) => void
|
onAdd: (provider: Omit<Provider, "id">) => void;
|
||||||
onClose: () => void
|
onClose: () => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
const AddProviderModal: React.FC<AddProviderModalProps> = ({ onAdd, onClose }) => {
|
const AddProviderModal: React.FC<AddProviderModalProps> = ({
|
||||||
|
onAdd,
|
||||||
|
onClose,
|
||||||
|
}) => {
|
||||||
const [formData, setFormData] = useState({
|
const [formData, setFormData] = useState({
|
||||||
name: '',
|
name: "",
|
||||||
apiUrl: '',
|
apiUrl: "",
|
||||||
apiKey: '',
|
apiKey: "",
|
||||||
websiteUrl: ''
|
websiteUrl: "",
|
||||||
})
|
});
|
||||||
const [showPassword, setShowPassword] = useState(false)
|
const [showPassword, setShowPassword] = useState(false);
|
||||||
const [error, setError] = useState('')
|
const [error, setError] = useState("");
|
||||||
|
|
||||||
const handleSubmit = (e: React.FormEvent) => {
|
const handleSubmit = (e: React.FormEvent) => {
|
||||||
e.preventDefault()
|
e.preventDefault();
|
||||||
setError('')
|
setError("");
|
||||||
|
|
||||||
if (!formData.name || !formData.apiUrl || !formData.apiKey) {
|
if (!formData.name || !formData.apiUrl || !formData.apiKey) {
|
||||||
setError('请填写所有必填字段')
|
setError("请填写所有必填字段");
|
||||||
return
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
onAdd(formData)
|
onAdd(formData);
|
||||||
}
|
};
|
||||||
|
|
||||||
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
|
const handleChange = (
|
||||||
const { name, value } = e.target
|
e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>
|
||||||
|
) => {
|
||||||
|
const { name, value } = e.target;
|
||||||
const newFormData = {
|
const newFormData = {
|
||||||
...formData,
|
...formData,
|
||||||
[name]: value
|
[name]: value,
|
||||||
}
|
};
|
||||||
|
|
||||||
// 如果修改的是API地址，自动推测网站地址
|
// 如果修改的是API地址，自动推测网站地址
|
||||||
if (name === 'apiUrl') {
|
if (name === "apiUrl") {
|
||||||
newFormData.websiteUrl = inferWebsiteUrl(value)
|
newFormData.websiteUrl = inferWebsiteUrl(value);
|
||||||
}
|
}
|
||||||
|
|
||||||
setFormData(newFormData)
|
setFormData(newFormData);
|
||||||
}
|
};
|
||||||
|
|
||||||
const handleApiUrlBlur = (e: React.FocusEvent<HTMLInputElement>) => {
|
const handleApiUrlBlur = (e: React.FocusEvent<HTMLInputElement>) => {
|
||||||
const apiUrl = e.target.value.trim()
|
const apiUrl = e.target.value.trim();
|
||||||
if (apiUrl) {
|
if (apiUrl) {
|
||||||
let normalizedApiUrl = apiUrl
|
let normalizedApiUrl = apiUrl;
|
||||||
|
|
||||||
// 如果没有协议，添加 https://
|
// 如果没有协议，添加 https://
|
||||||
if (!normalizedApiUrl.match(/^https?:\/\//)) {
|
if (!normalizedApiUrl.match(/^https?:\/\//)) {
|
||||||
normalizedApiUrl = 'https://' + normalizedApiUrl
|
normalizedApiUrl = "https://" + normalizedApiUrl;
|
||||||
}
|
}
|
||||||
|
|
||||||
setFormData(prev => ({
|
setFormData((prev) => ({
|
||||||
...prev,
|
...prev,
|
||||||
apiUrl: normalizedApiUrl,
|
apiUrl: normalizedApiUrl,
|
||||||
websiteUrl: inferWebsiteUrl(normalizedApiUrl)
|
websiteUrl: inferWebsiteUrl(normalizedApiUrl),
|
||||||
}))
|
}));
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
// 预设的供应商配置
|
// 预设的供应商配置
|
||||||
const presets = [
|
const presets = [
|
||||||
{
|
{
|
||||||
name: 'YesCode',
|
name: "Anthropic 官方",
|
||||||
apiUrl: 'https://co.yes.vg'
|
apiUrl: "https://api.anthropic.com",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'PackyCode',
|
name: "PackyCode",
|
||||||
apiUrl: 'https://api.packycode.com'
|
apiUrl: "https://api.packycode.com",
|
||||||
}
|
},
|
||||||
]
|
{
|
||||||
|
name: "YesCode",
|
||||||
|
apiUrl: "https://co.yes.vg",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "AnyRouter",
|
||||||
|
apiUrl: "https://anyrouter.top",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
const applyPreset = (preset: typeof presets[0]) => {
|
const applyPreset = (preset: (typeof presets)[0]) => {
|
||||||
const newFormData = {
|
const newFormData = {
|
||||||
...formData,
|
...formData,
|
||||||
name: preset.name,
|
name: preset.name,
|
||||||
apiUrl: preset.apiUrl
|
apiUrl: preset.apiUrl,
|
||||||
}
|
};
|
||||||
// 应用预设时也自动推测网站地址
|
// 应用预设时也自动推测网站地址
|
||||||
newFormData.websiteUrl = inferWebsiteUrl(preset.apiUrl)
|
newFormData.websiteUrl = inferWebsiteUrl(preset.apiUrl);
|
||||||
setFormData(newFormData)
|
setFormData(newFormData);
|
||||||
}
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="modal-overlay" onClick={onClose}>
|
<div className="modal-overlay">
|
||||||
<div className="modal-content" onClick={(e) => e.stopPropagation()}>
|
<div className="modal-content">
|
||||||
<h2>添加新供应商</h2>
|
<h2>添加新供应商</h2>
|
||||||
|
|
||||||
{error && (
|
{error && <div className="error-message">{error}</div>}
|
||||||
<div className="error-message">
|
|
||||||
{error}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="presets">
|
<div className="presets">
|
||||||
<label>快速选择：</label>
|
<label>快速选择：</label>
|
||||||
@@ -151,7 +160,9 @@ const AddProviderModal: React.FC<AddProviderModalProps> = ({ onAdd, onClose }) =
|
|||||||
onChange={handleChange}
|
onChange={handleChange}
|
||||||
placeholder="https://example.com（可选）"
|
placeholder="https://example.com（可选）"
|
||||||
/>
|
/>
|
||||||
<small className="field-hint">用于在面板中显示可访问的网站链接，留空则显示API地址</small>
|
<small className="field-hint">
|
||||||
|
用于在面板中显示可访问的网站链接，留空则显示API地址
|
||||||
|
</small>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="form-group">
|
<div className="form-group">
|
||||||
@@ -163,7 +174,7 @@ const AddProviderModal: React.FC<AddProviderModalProps> = ({ onAdd, onClose }) =
|
|||||||
name="apiKey"
|
name="apiKey"
|
||||||
value={formData.apiKey}
|
value={formData.apiKey}
|
||||||
onChange={handleChange}
|
onChange={handleChange}
|
||||||
placeholder={formData.name === 'YesCode' ? 'cr_...' : 'sk-...'}
|
placeholder={formData.name === "YesCode" ? "cr_..." : "sk-..."}
|
||||||
required
|
required
|
||||||
/>
|
/>
|
||||||
<button
|
<button
|
||||||
@@ -174,12 +185,24 @@ const AddProviderModal: React.FC<AddProviderModalProps> = ({ onAdd, onClose }) =
|
|||||||
title={showPassword ? "隐藏密码" : "显示密码"}
|
title={showPassword ? "隐藏密码" : "显示密码"}
|
||||||
>
|
>
|
||||||
{showPassword ? (
|
{showPassword ? (
|
||||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
<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" />
|
<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" />
|
<circle cx="12" cy="12" r="3" />
|
||||||
</svg>
|
</svg>
|
||||||
) : (
|
) : (
|
||||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
<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" />
|
<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" />
|
<line x1="1" y1="1" x2="23" y2="23" />
|
||||||
</svg>
|
</svg>
|
||||||
@@ -199,7 +222,7 @@ const AddProviderModal: React.FC<AddProviderModalProps> = ({ onAdd, onClose }) =
|
|||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
export default AddProviderModal
|
export default AddProviderModal;
|
||||||
|
|||||||
@@ -77,8 +77,8 @@ const EditProviderModal: React.FC<EditProviderModalProps> = ({ provider, onSave,
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="modal-overlay" onClick={onClose}>
|
<div className="modal-overlay">
|
||||||
<div className="modal-content" onClick={(e) => e.stopPropagation()}>
|
<div className="modal-content">
|
||||||
<h2>编辑供应商</h2>
|
<h2>编辑供应商</h2>
|
||||||
|
|
||||||
{error && (
|
{error && (
|
||||||
|
|||||||
Reference in New Issue
Block a user