admin/cc-switch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

移除模态框点击外部关闭功能，防止误触关闭

Browse Source 
- 移除 AddProviderModal 的点击遮罩层关闭功能
- 移除 EditProviderModal 的点击遮罩层关闭功能
- 用户现在只能通过按钮主动关闭模态框，提升用户体验
This commit is contained in:
farion1231
2025-08-06 21:00:49 +08:00
parent 588883ffc4
commit 75a5e8088e
2 changed files with 93 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

159
src/renderer/components/AddProviderModal.tsx
View File

@@ -1,102 +1,111 @@
import React, { useState } from 'react'
import { Provider } from '../../shared/types'
import { inferWebsiteUrl } from '../../shared/utils'
import './AddProviderModal.css'
import React, { useState } from "react";
import { Provider } from "../../shared/types";
import { inferWebsiteUrl } from "../../shared/utils";
import "./AddProviderModal.css";
interface AddProviderModalProps {
onAdd: (provider: Omit<Provider, 'id'>) => void
onClose: () => void
onAdd: (provider: Omit<Provider, "id">) => void;
onClose: () => void;
}
const AddProviderModal: React.FC<AddProviderModalProps> = ({ onAdd, onClose }) => {
const AddProviderModal: React.FC<AddProviderModalProps> = ({
onAdd,
onClose,
}) => {
const [formData, setFormData] = useState({
name: '',
apiUrl: '',
apiKey: '',
websiteUrl: ''
})
const [showPassword, setShowPassword] = useState(false)
const [error, setError] = useState('')
name: "",
apiUrl: "",
apiKey: "",
websiteUrl: "",
});
const [showPassword, setShowPassword] = useState(false);
const [error, setError] = useState("");
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault()
setError('')
e.preventDefault();
setError("");
if (!formData.name || !formData.apiUrl || !formData.apiKey) {
setError('请填写所有必填字段')
return
setError("请填写所有必填字段");
return;
}
onAdd(formData)
}
onAdd(formData);
};
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
const { name, value } = e.target
const handleChange = (
e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>
) => {
const { name, value } = e.target;
const newFormData = {
...formData,
[name]: value
}
[name]: value,
};
// 如果修改的是API地址，自动推测网站地址
if (name === 'apiUrl') {
newFormData.websiteUrl = inferWebsiteUrl(value)
if (name === "apiUrl") {
newFormData.websiteUrl = inferWebsiteUrl(value);
}
setFormData(newFormData)
}
setFormData(newFormData);
};
const handleApiUrlBlur = (e: React.FocusEvent<HTMLInputElement>) => {
const apiUrl = e.target.value.trim()
const apiUrl = e.target.value.trim();
if (apiUrl) {
let normalizedApiUrl = apiUrl
let normalizedApiUrl = apiUrl;
// 如果没有协议，添加 https://
if (!normalizedApiUrl.match(/^https?:\/\//)) {
normalizedApiUrl = 'https://' + normalizedApiUrl
normalizedApiUrl = "https://" + normalizedApiUrl;
}
setFormData(prev => ({
setFormData((prev) => ({
...prev,
apiUrl: normalizedApiUrl,
websiteUrl: inferWebsiteUrl(normalizedApiUrl)
}))
websiteUrl: inferWebsiteUrl(normalizedApiUrl),
}));
}
}
};
// 预设的供应商配置
const presets = [
{
name: 'YesCode',
apiUrl: 'https://co.yes.vg'
name: "Anthropic 官方",
apiUrl: "https://api.anthropic.com",
},
{
name: 'PackyCode',
apiUrl: 'https://api.packycode.com'
}
]
name: "PackyCode",
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 = {
...formData,
name: preset.name,
apiUrl: preset.apiUrl
}
apiUrl: preset.apiUrl,
};
// 应用预设时也自动推测网站地址
newFormData.websiteUrl = inferWebsiteUrl(preset.apiUrl)
setFormData(newFormData)
}
newFormData.websiteUrl = inferWebsiteUrl(preset.apiUrl);
setFormData(newFormData);
};
return (
<div className="modal-overlay" onClick={onClose}>
<div className="modal-content" onClick={(e) => e.stopPropagation()}>
<div className="modal-overlay">
<div className="modal-content">
<h2>添加新供应商</h2>
{error && (
<div className="error-message">
{error}
</div>
)}
{error && <div className="error-message">{error}</div>}
<div className="presets">
<label>快速选择：</label>
<div className="preset-buttons">
@@ -151,7 +160,9 @@ const AddProviderModal: React.FC<AddProviderModalProps> = ({ onAdd, onClose }) =
onChange={handleChange}
placeholder="https://example.com（可选）"
/>
<small className="field-hint">用于在面板中显示可访问的网站链接，留空则显示API地址</small>
<small className="field-hint">
用于在面板中显示可访问的网站链接，留空则显示API地址
</small>
</div>
<div className="form-group">
@@ -163,7 +174,7 @@ const AddProviderModal: React.FC<AddProviderModalProps> = ({ onAdd, onClose }) =
name="apiKey"
value={formData.apiKey}
onChange={handleChange}
placeholder={formData.name === 'YesCode' ? 'cr_...' : 'sk-...'}
placeholder={formData.name === "YesCode" ? "cr_..." : "sk-..."}
required
/>
<button
@@ -174,12 +185,24 @@ const AddProviderModal: React.FC<AddProviderModalProps> = ({ onAdd, onClose }) =
title={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" />
<circle cx="12" cy="12" r="3" />
</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" />
<line x1="1" y1="1" x2="23" y2="23" />
</svg>
@@ -199,7 +222,7 @@ const AddProviderModal: React.FC<AddProviderModalProps> = ({ onAdd, onClose }) =
</form>
</div>
</div>
)
}
);
};
export default AddProviderModal
export default AddProviderModal;