mirror of
https://github.com/hicccc77/WeFlow.git
synced 2026-03-24 23:06:51 +00:00
新增询问窗口
This commit is contained in:
@@ -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;
|
||||
|
||||
@@ -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}>
|
||||
取消
|
||||
|
||||
Reference in New Issue
Block a user