新增询问窗口

This commit is contained in:
xuncha
2026-03-16 17:21:59 +08:00
parent 999ddaeb9a
commit f2b1b07f58
7 changed files with 206 additions and 17 deletions

View File

@@ -140,6 +140,72 @@
justify-content: flex-end;
}
.window-close-dialog-remember {
display: flex;
align-items: center;
gap: 10px;
margin: 4px 24px 0;
padding: 12px 14px;
border: 1px solid color-mix(in srgb, var(--border-color) 72%, transparent);
border-radius: 16px;
background: color-mix(in srgb, var(--bg-secondary) 76%, transparent);
cursor: pointer;
user-select: none;
input {
position: absolute;
opacity: 0;
pointer-events: none;
}
}
.window-close-dialog-checkbox {
width: 18px;
height: 18px;
flex: 0 0 18px;
border: 1.5px solid color-mix(in srgb, var(--border-color) 88%, transparent);
border-radius: 6px;
background: var(--bg-primary);
position: relative;
transition:
border-color 0.18s ease,
background 0.18s ease,
box-shadow 0.18s ease;
&::after {
content: '';
position: absolute;
left: 5px;
top: 1px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg) scale(0.7);
opacity: 0;
transition:
opacity 0.18s ease,
transform 0.18s ease;
}
}
.window-close-dialog-remember input:checked + .window-close-dialog-checkbox {
background: var(--primary);
border-color: var(--primary);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent);
}
.window-close-dialog-remember input:checked + .window-close-dialog-checkbox::after {
opacity: 1;
transform: rotate(45deg) scale(1);
}
.window-close-dialog-remember-text {
font-size: 13px;
line-height: 1.5;
color: var(--text-secondary);
}
.window-close-dialog-cancel {
min-width: 112px;
padding: 12px 18px;

View File

@@ -1,24 +1,25 @@
import { Minimize2, Power, X } from 'lucide-react'
import { useEffect } from 'react'
import { useEffect, useState } from 'react'
import './WindowCloseDialog.scss'
interface WindowCloseDialogProps {
open: boolean
canMinimizeToTray: boolean
onTray: () => void
onQuit: () => void
onSelect: (action: 'tray' | 'quit', rememberChoice: boolean) => void
onCancel: () => void
}
export default function WindowCloseDialog({
open,
canMinimizeToTray,
onTray,
onQuit,
onSelect,
onCancel
}: WindowCloseDialogProps) {
const [rememberChoice, setRememberChoice] = useState(false)
useEffect(() => {
if (!open) return
setRememberChoice(false)
const handleKeyDown = (event: KeyboardEvent) => {
if (event.key === 'Escape') {
@@ -63,7 +64,11 @@ export default function WindowCloseDialog({
<div className="window-close-dialog-body">
{canMinimizeToTray && (
<button type="button" className="window-close-dialog-option" onClick={onTray}>
<button
type="button"
className="window-close-dialog-option"
onClick={() => onSelect('tray', rememberChoice)}
>
<span className="window-close-dialog-option-icon">
<Minimize2 size={18} />
</span>
@@ -77,7 +82,7 @@ export default function WindowCloseDialog({
<button
type="button"
className="window-close-dialog-option is-danger"
onClick={onQuit}
onClick={() => onSelect('quit', rememberChoice)}
>
<span className="window-close-dialog-option-icon">
<Power size={18} />
@@ -89,6 +94,16 @@ export default function WindowCloseDialog({
</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}>