bdim/Canto
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: add confirmation dialog for chapter actions in ChaptersPanel

Browse Source
This commit is contained in:
bdim404
2026-03-13 17:13:59 +08:00
parent a6974db528
commit e024910411
1 changed files with 21 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
qwen3-tts-frontend/src/pages/Audiobook.tsx
View File

@@ -1445,6 +1445,7 @@ function ChaptersPanel({
const [regeneratingSegs, setRegeneratingSegs] = useState<Set<number>>(new Set())
const [audioVersions, setAudioVersions] = useState<Record<number, number>>({})
const [chapterPlayerChIdx, setChapterPlayerChIdx] = useState<number | null>(null)
const [confirmAction, setConfirmAction] = useState<{ label: string; onConfirm: () => void } | null>(null)
const prevSegStatusRef = useRef<Record<number, string>>({})
const initialExpandDoneRef = useRef(false)
const segRefs = useRef<Record<number, HTMLDivElement | null>>({})
@@ -1577,6 +1578,19 @@ function ChaptersPanel({
const hasChapters = detail && detail.chapters.length > 0 && ['analyzing', 'ready', 'generating', 'done'].includes(status)
return (
<>
<Dialog open={!!confirmAction} onOpenChange={open => { if (!open) setConfirmAction(null) }}>
<DialogContent className="max-w-xs">
<DialogHeader>
<DialogTitle>确认操作</DialogTitle>
</DialogHeader>
<p className="text-sm text-muted-foreground">{confirmAction?.label}</p>
<div className="flex justify-end gap-2 mt-2">
<Button variant="ghost" size="sm" onClick={() => setConfirmAction(null)}>取消</Button>
<Button variant="destructive" size="sm" onClick={() => { confirmAction?.onConfirm(); setConfirmAction(null) }}>确认</Button>
</div>
</DialogContent>
</Dialog>
<div className="flex-1 flex flex-col bg-emerald-500/5 overflow-hidden">
<div className="flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between px-3 py-2 shrink-0">
<span className="text-xs font-medium text-emerald-400/80">
@@ -1668,7 +1682,7 @@ function ChaptersPanel({
<Volume2 className="h-3 w-3 mr-1" />
{t('projectCard.chapters.generate')}
</Button>
<Button size="xs" variant="ghost" className="text-muted-foreground" disabled={loadingAction} onClick={() => onParseChapter(ch.id, ch.title)}>
<Button size="xs" variant="ghost" className="text-muted-foreground" disabled={loadingAction} onClick={() => setConfirmAction({ label: '重新解析将删除已有台词，确认继续？', onConfirm: () => onParseChapter(ch.id, ch.title) })}>
{isAIMode ? <Bot className="h-3 w-3 mr-1" /> : <Wand2 className="h-3 w-3 mr-1" />}
{t(isAIMode ? 'projectCard.chapters.reparseAI' : 'projectCard.chapters.reparse')}
</Button>
@@ -1682,10 +1696,7 @@ function ChaptersPanel({
{(ch.status === 'done' || (ch.status === 'ready' && chAllDone)) && (
<>
<span className="text-[11px] text-muted-foreground">{t('projectCard.chapters.doneBadge', { count: chDone })}</span>
<Button size="xs" variant="ghost" className="text-muted-foreground" disabled={loadingAction} onClick={() => {
setExpandedChapters(prev => { const n = new Set(prev); n.add(ch.id); return n })
onGenerate(ch.chapter_index, true)
}}>
<Button size="xs" variant="ghost" className="text-muted-foreground" disabled={loadingAction} onClick={() => setConfirmAction({ label: '重新生成将覆盖已有音频，确认继续？', onConfirm: () => { setExpandedChapters(prev => { const n = new Set(prev); n.add(ch.id); return n }); onGenerate(ch.chapter_index, true) } })}>
<RefreshCw className="h-3 w-3 mr-0.5" /><Volume2 className="h-3 w-3 mr-1" />{t('projectCard.chapters.generate')}
</Button>
<Button
@@ -1700,6 +1711,10 @@ function ChaptersPanel({
<Button size="icon" variant="ghost" className="h-6 w-6" onClick={() => onDownload(ch.chapter_index)} title={t('projectCard.downloadAll')}>
<Download className="h-3 w-3" />
</Button>
<Button size="xs" variant="ghost" className="text-muted-foreground" disabled={loadingAction} onClick={() => setConfirmAction({ label: '重新解析将删除已有台词和音频，确认继续？', onConfirm: () => onParseChapter(ch.id, ch.title) })}>
{isAIMode ? <Bot className="h-3 w-3 mr-1" /> : <Wand2 className="h-3 w-3 mr-1" />}
{t(isAIMode ? 'projectCard.chapters.reparseAI' : 'projectCard.chapters.reparse')}
</Button>
</>
)}
{ch.status === 'error' && (
@@ -1868,6 +1883,7 @@ function ChaptersPanel({
})()}
</div>
</>
)
}