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

feat: update button styling and enhance smooth scrolling behavior in ChaptersPanel

Browse Source
This commit is contained in:
bdim404
2026-03-13 16:25:20 +08:00
parent 00ba2e0d40
commit d7d86adbd5
1 changed files with 3 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -129,7 +129,7 @@ function SequentialPlayer({
<div className="flex items-center gap-2">
{displayIndex !== null ? (
<>
<Button size="sm" variant="outline" onClick={stop}>
<Button size="sm" variant="outline" className="text-red-500 border-red-500 hover:bg-red-500/10 hover:text-red-500" onClick={stop}>
<Square className="h-3 w-3 mr-1 fill-current" />{t('projectCard.sequential.stop')}
</Button>
<span className="text-xs text-muted-foreground">
@@ -1465,7 +1465,7 @@ function ChaptersPanel({
const ch = detail.chapters.find(c => c.chapter_index === seg.chapter_index)
if (ch) setExpandedChapters(prev => { const n = new Set(prev); n.add(ch.id); return n })
setTimeout(() => {
segRefs.current[sequentialPlayingId]?.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
segRefs.current[sequentialPlayingId]?.scrollIntoView({ behavior: 'smooth', block: 'center' })
}, 50)
}, [sequentialPlayingId, detail, segments])
@@ -1725,7 +1725,7 @@ function ChaptersPanel({
<div
key={seg.id}
ref={el => { segRefs.current[seg.id] = el }}
className={`rounded-lg border overflow-hidden ${sequentialPlayingId === seg.id ? 'border-primary/40 bg-primary/5' : 'bg-card'}`}
className={`rounded-lg border overflow-hidden ${sequentialPlayingId === seg.id ? 'border-red-500 ring-1 ring-red-500' : 'bg-card'}`}
>
{/* Card header */}
<div className="flex items-center gap-1.5 px-3 py-2 border-b border-border/50">