This commit is contained in:
xuncha
2026-03-16 16:48:01 +08:00
parent 7e05909404
commit bf48e865ac
6 changed files with 414 additions and 3 deletions

View File

@@ -0,0 +1,100 @@
import { Minimize2, Power, X } from 'lucide-react'
import { useEffect } from 'react'
import './WindowCloseDialog.scss'
interface WindowCloseDialogProps {
open: boolean
canMinimizeToTray: boolean
onTray: () => void
onQuit: () => void
onCancel: () => void
}
export default function WindowCloseDialog({
open,
canMinimizeToTray,
onTray,
onQuit,
onCancel
}: WindowCloseDialogProps) {
useEffect(() => {
if (!open) return
const handleKeyDown = (event: KeyboardEvent) => {
if (event.key === 'Escape') {
event.preventDefault()
onCancel()
}
}
window.addEventListener('keydown', handleKeyDown)
return () => window.removeEventListener('keydown', handleKeyDown)
}, [open, onCancel])
if (!open) return null
return (
<div className="window-close-dialog-overlay" onClick={onCancel}>
<div
className="window-close-dialog"
onClick={(event) => event.stopPropagation()}
role="dialog"
aria-modal="true"
aria-labelledby="window-close-dialog-title"
>
<button
type="button"
className="window-close-dialog-close"
onClick={onCancel}
aria-label="关闭提示"
>
<X size={18} />
</button>
<div className="window-close-dialog-header">
<span className="window-close-dialog-kicker">退</span>
<h2 id="window-close-dialog-title"> WeFlow</h2>
<p>
{canMinimizeToTray
? '你可以保留后台进程与本地 API或者直接完全退出应用。'
: '当前系统托盘不可用,本次只能完全退出应用。'}
</p>
</div>
<div className="window-close-dialog-body">
{canMinimizeToTray && (
<button type="button" className="window-close-dialog-option" onClick={onTray}>
<span className="window-close-dialog-option-icon">
<Minimize2 size={18} />
</span>
<span className="window-close-dialog-option-text">
<strong></strong>
<span> API</span>
</span>
</button>
)}
<button
type="button"
className="window-close-dialog-option is-danger"
onClick={onQuit}
>
<span className="window-close-dialog-option-icon">
<Power size={18} />
</span>
<span className="window-close-dialog-option-text">
<strong></strong>
<span> WeFlow API</span>
</span>
</button>
</div>
<div className="window-close-dialog-actions">
<button type="button" className="window-close-dialog-cancel" onClick={onCancel}>
</button>
</div>
</div>
</div>
)
}