flnxi-Wu/hooks/useConfirm.ts
WuYongJie 7dc8d2a528
Some checks failed
CI Check / check (push) Has been cancelled
feat: 统一弹窗系统 & 首页UI优化
- 替换所有浏览器原生弹窗(confirm/alert/prompt)
  - 创建 ConfirmDialog、AlertDialog、PromptDialog 组件
  - 创建 DialogProvider 和 useDialog Hook
  - 替换所有 admin 组件、首页、分享页面中的原生弹窗

- 素材预览面板统一
  - 创建 MaterialPreviewModal 组件
  - 使用统一弹窗组件,统一退出逻辑

- 首页UI统一到三层架构
  - 迁移主要按钮和输入框样式
  - 迁移筛选弹窗中的所有按钮样式
  - 使用 useThemeStyles() Hook

- 更新文档
  - 更新优化记录、优化计划、后续修改、更新日志
2025-11-22 16:20:05 +08:00

98 lines
2.2 KiB
TypeScript

'use client'
import { useState, useCallback } from 'react'
interface ConfirmOptions {
title?: string
message: string
confirmText?: string
cancelText?: string
variant?: 'default' | 'danger'
}
interface PromptOptions {
title?: string
message: string
defaultValue?: string
placeholder?: string
confirmText?: string
cancelText?: string
}
export function useConfirm() {
const [isOpen, setIsOpen] = useState(false)
const [options, setOptions] = useState<ConfirmOptions>({ message: '' })
const [resolveCallback, setResolveCallback] = useState<((value: boolean) => void) | null>(null)
const confirm = useCallback((opts: ConfirmOptions): Promise<boolean> => {
return new Promise((resolve) => {
setOptions(opts)
setIsOpen(true)
setResolveCallback(() => resolve)
})
}, [])
const handleConfirm = useCallback(() => {
setIsOpen(false)
if (resolveCallback) {
resolveCallback(true)
setResolveCallback(null)
}
}, [resolveCallback])
const handleCancel = useCallback(() => {
setIsOpen(false)
if (resolveCallback) {
resolveCallback(false)
setResolveCallback(null)
}
}, [resolveCallback])
return {
isOpen,
options,
confirm,
handleConfirm,
handleCancel,
}
}
export function usePrompt() {
const [isOpen, setIsOpen] = useState(false)
const [options, setOptions] = useState<PromptOptions>({ message: '' })
const [resolveCallback, setResolveCallback] = useState<((value: string | null) => void) | null>(null)
const prompt = useCallback((opts: PromptOptions): Promise<string | null> => {
return new Promise((resolve) => {
setOptions(opts)
setIsOpen(true)
setResolveCallback(() => resolve)
})
}, [])
const handleConfirm = useCallback((value: string) => {
setIsOpen(false)
if (resolveCallback) {
resolveCallback(value)
setResolveCallback(null)
}
}, [resolveCallback])
const handleCancel = useCallback(() => {
setIsOpen(false)
if (resolveCallback) {
resolveCallback(null)
setResolveCallback(null)
}
}, [resolveCallback])
return {
isOpen,
options,
prompt,
handleConfirm,
handleCancel,
}
}