fix(admin): MCP 对接弹窗防误关 — 屏蔽遮罩点击 + 加关闭按钮 + ESC 支持

填表期间误点遮罩会丢失已填内容(apiKey/appSecret 等),改为只能用右上角 ×
或 ESC 键关闭。
This commit is contained in:
Sisyphus 2026-07-14 11:56:56 +08:00
parent 8a3c96598b
commit 0d2dce6b73

View File

@ -1002,6 +1002,16 @@ function ConfigTab({ showToast }: { showToast: (m: string) => void }) {
const [testingId, setTestingId] = useState<string | null>(null)
const [connectingId, setConnectingId] = useState<string | null>(null)
// ESC 关闭对接弹窗(填表期间误点遮罩不再触发关闭,避免丢已填内容)
useEffect(() => {
if (!showIntegrationForm) return
const onKey = (e: KeyboardEvent) => {
if (e.key === 'Escape') { setShowIntegrationForm(false); setEditingIntegration(null) }
}
window.addEventListener('keydown', onKey)
return () => window.removeEventListener('keydown', onKey)
}, [showIntegrationForm])
const DEVBOX_ADMIN_APPLY_URL = 'http://100.111.84.16:3000/openapi/app'
const loadConfigs = useCallback(async () => {
@ -1328,10 +1338,19 @@ function ConfigTab({ showToast }: { showToast: (m: string) => void }) {
)}
{showIntegrationForm && (
<div className="fixed inset-0 bg-black/30 flex items-center justify-center z-50" onClick={() => { setShowIntegrationForm(false); setEditingIntegration(null) }}>
<div className="bg-white rounded-xl shadow-xl w-full max-w-md mx-4" onClick={(e) => e.stopPropagation()}>
<div className="fixed inset-0 bg-black/30 flex items-center justify-center z-50">
<div className="bg-white rounded-xl shadow-xl w-full max-w-md mx-4">
<div className="p-6 border-b border-border-subtle">
<h2 className="text-lg font-bold">{editingIntegration ? '编辑对接' : '新增对接'}</h2>
<div className="flex items-center justify-between">
<h2 className="text-lg font-bold">{editingIntegration ? '编辑对接' : '新增对接'}</h2>
<button
onClick={() => { setShowIntegrationForm(false); setEditingIntegration(null) }}
className="text-on-surface-variant hover:text-gray-900 text-2xl leading-none ml-4"
aria-label="关闭"
>
×
</button>
</div>
<p className="text-xs text-on-surface-variant mt-1">
APIKey 需先在
<a href={DEVBOX_ADMIN_APPLY_URL} target="_blank" rel="noreferrer" className="text-secondary hover:underline mx-1">devbox B2B 运营后台 → 集成管理 → 应用列表</a>