mirror of
https://github.com/truewhile/MeBox.git
synced 2026-09-29 03:26:37 +08:00
truewhile
a79bbb80a8
Soft-delete restore/purge/list and the recycle_purge job are gone. Admin delete now removes library index rows, with an optional delete_files query that also deletes local media + sidecar NFO. UI copy is renamed from 移入回收站 to 删除, with a confirm checkbox. Co-authored-by: Cursor Agent <cursoragent@cursor.com> Co-authored-by: truewhile <truewhile@users.noreply.github.com>
90 lines
3.0 KiB
TypeScript
90 lines
3.0 KiB
TypeScript
import { useState } from 'react'
|
|
import { AlertTriangle } from 'lucide-react'
|
|
|
|
export type ConfirmOptions = {
|
|
title?: string
|
|
message: string
|
|
confirmText?: string
|
|
cancelText?: string
|
|
danger?: boolean
|
|
checkboxLabel?: string
|
|
checkboxDefaultChecked?: boolean
|
|
}
|
|
|
|
export type ConfirmResult = {
|
|
confirmed: boolean
|
|
checked: boolean
|
|
}
|
|
|
|
export function ConfirmDialog({
|
|
options,
|
|
onClose,
|
|
}: {
|
|
options: ConfirmOptions
|
|
onClose: (value: ConfirmResult) => void
|
|
}) {
|
|
const danger = options.danger ?? true
|
|
const hasCheckbox = Boolean(options.checkboxLabel)
|
|
const [checked, setChecked] = useState(Boolean(options.checkboxDefaultChecked))
|
|
return (
|
|
<div
|
|
className="fixed inset-0 z-[100] flex items-center justify-center bg-black/35 p-4 backdrop-blur-sm"
|
|
onClick={() => onClose({ confirmed: false, checked })}
|
|
>
|
|
<div
|
|
role="dialog"
|
|
aria-modal="true"
|
|
className="w-full max-w-md overflow-hidden rounded-3xl border border-white/70 bg-white shadow-2xl"
|
|
onClick={(event) => event.stopPropagation()}
|
|
>
|
|
<div className="flex gap-4 p-5">
|
|
<div
|
|
className={
|
|
'flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl ' +
|
|
(danger ? 'bg-red-50 text-red-500' : 'bg-primary-400/10 text-brand-500')
|
|
}
|
|
>
|
|
<AlertTriangle size={22} />
|
|
</div>
|
|
<div className="min-w-0 flex-1">
|
|
<h3 className="font-display text-lg font-bold text-ink-600">
|
|
{options.title || '确认操作'}
|
|
</h3>
|
|
<p className="mt-2 whitespace-pre-line text-sm leading-6 text-ink-50">{options.message}</p>
|
|
{hasCheckbox ? (
|
|
<label className="mt-4 flex cursor-pointer items-start gap-2.5 text-sm text-ink-100">
|
|
<input
|
|
type="checkbox"
|
|
className="mt-0.5 h-4 w-4 rounded border-gray-300 text-red-500 focus:ring-red-400"
|
|
checked={checked}
|
|
onChange={(event) => setChecked(event.target.checked)}
|
|
/>
|
|
<span>{options.checkboxLabel}</span>
|
|
</label>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
<div className="flex justify-end gap-2 border-t border-gray-100 bg-gray-50/80 px-5 py-4">
|
|
<button
|
|
type="button"
|
|
onClick={() => onClose({ confirmed: false, checked })}
|
|
className="rounded-xl border border-gray-200 bg-white px-4 py-2 text-sm font-semibold text-ink-100 hover:bg-gray-50"
|
|
>
|
|
{options.cancelText || '取消'}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => onClose({ confirmed: true, checked })}
|
|
className={
|
|
'rounded-xl px-4 py-2 text-sm font-semibold text-white shadow-sm transition ' +
|
|
(danger ? 'bg-red-500 hover:bg-red-600' : 'bg-brand-500 hover:bg-brand-600')
|
|
}
|
|
>
|
|
{options.confirmText || '确认'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|