116 lines
3.6 KiB
TypeScript
116 lines
3.6 KiB
TypeScript
import { Minimize2, Power, X } from 'lucide-react'
|
|
import { useEffect, useState } from 'react'
|
|
import './WindowCloseDialog.scss'
|
|
|
|
interface WindowCloseDialogProps {
|
|
open: boolean
|
|
canMinimizeToTray: boolean
|
|
onSelect: (action: 'tray' | 'quit', rememberChoice: boolean) => void
|
|
onCancel: () => void
|
|
}
|
|
|
|
export default function WindowCloseDialog({
|
|
open,
|
|
canMinimizeToTray,
|
|
onSelect,
|
|
onCancel
|
|
}: WindowCloseDialogProps) {
|
|
const [rememberChoice, setRememberChoice] = useState(false)
|
|
|
|
useEffect(() => {
|
|
if (!open) return
|
|
setRememberChoice(false)
|
|
|
|
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={() => onSelect('tray', rememberChoice)}
|
|
>
|
|
<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={() => onSelect('quit', rememberChoice)}
|
|
>
|
|
<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>
|
|
|
|
<label className="window-close-dialog-remember">
|
|
<input
|
|
type="checkbox"
|
|
checked={rememberChoice}
|
|
onChange={(event) => setRememberChoice(event.target.checked)}
|
|
/>
|
|
<span className="window-close-dialog-checkbox" aria-hidden="true" />
|
|
<span className="window-close-dialog-remember-text">下次不再提示，直接按本次选择处理</span>
|
|
</label>
|
|
|
|
<div className="window-close-dialog-actions">
|
|
<button type="button" className="window-close-dialog-cancel" onClick={onCancel}>
|
|
取消
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|