kangwan/20260512-skg-tk
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: tighten audio result layout

Browse Source
This commit is contained in:
kang
2026-05-17 14:23:01 +08:00
parent 3030f8938d
commit c375516d2e
3 changed files with 44 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
web/components/ad-recreation-board.tsx
View File

@@ -521,18 +521,18 @@ function AudioIntakeStatus({ job, audioReady }: { job: Job | null; audioReady: b
const downloading = !!job && ["created", "downloading"].includes(job.status)
const audioRunning = !!job && (job.status === "transcribing" || job.audio_script?.status === "rewriting")
return (
<div className="rounded-lg border border-white/10 bg-black/32 p-3">
<div className="rounded-lg border border-white/10 bg-black/32 p-2.5">
<div className="mb-2 flex items-center justify-between gap-2">
<SectionTitle icon={<PanelRight className="h-4 w-4" />} title="当前步骤" />
<StatusPill ready={audioReady} running={downloading || audioRunning} />
</div>
<div className="grid grid-cols-2 gap-2 text-[11px] text-white/52">
<div className="grid grid-cols-4 gap-2 text-[11px] text-white/52">
<Requirement label="素材" ready={!!job} detail={job ? shortId(job.id) : "待输入"} />
<Requirement label="视频" ready={!!job?.video_url} detail={downloading ? "下载中" : job?.video_url ? "已就绪" : "待下载"} />
<Requirement label="音频" ready={!!job?.source_audio_url} detail={audioRunning ? "解析中" : job?.source_audio_url ? "已提取" : "待提取"} />
<Requirement label="文案" ready={audioReady} detail={audioReady ? `${job?.transcript.length ?? 0} 段` : "待解析"} />
</div>
<div className="mt-3 rounded-md border border-white/10 bg-black/28 px-3 py-2 text-[11px] leading-relaxed text-white/42">
<div className="mt-2 truncate rounded-md border border-white/10 bg-black/28 px-3 py-2 text-[11px] text-white/42" title={job?.message}>
{job?.message || "粘贴 TK 链接或上传视频后，点击开始进入下载和音频解析。"}
</div>
</div>
@@ -553,25 +553,25 @@ function AudioIntakePanel({ job }: { job: Job | null }) {
const processing = job.status === "transcribing" || script?.status === "rewriting"
return (
<div className="grid gap-3">
<section className="rounded-lg border border-white/10 bg-black/28 p-3">
<div className="mb-3 flex items-center justify-between gap-3">
<div className="grid gap-2">
<section className="rounded-lg border border-white/10 bg-black/28 p-2.5">
<div className="mb-2 flex items-center justify-between gap-3">
<SectionTitle icon={<Film className="h-4 w-4" />} title="逐句时间轴" />
<span className="rounded-md border border-white/10 bg-black/35 px-2 py-1 text-[11px] text-white/45">{job.transcript.length} 段</span>
</div>
{job.transcript.length ? (
<div className="overflow-hidden rounded-lg border border-white/10">
<div className="grid grid-cols-[88px_minmax(0,1fr)_minmax(0,1fr)] border-b border-white/10 bg-white/[0.04] px-3 py-2 text-[11px] font-semibold text-white/50">
<div className="overflow-hidden rounded-md border border-white/10">
<div className="grid grid-cols-[82px_minmax(0,1fr)_minmax(0,1fr)] border-b border-white/10 bg-white/[0.04] px-3 py-1.5 text-[11px] font-semibold text-white/50">
<div>时间</div>
<div>原文</div>
<div>中文</div>
</div>
<div className="max-h-[36vh] overflow-y-auto">
<div className="max-h-[164px] overflow-y-auto">
{job.transcript.map((segment) => (
<div key={segment.index} className="grid grid-cols-[88px_minmax(0,1fr)_minmax(0,1fr)] gap-3 border-b border-white/8 px-3 py-2 text-[12px] leading-relaxed text-white/64 last:border-b-0">
<div key={segment.index} className="grid grid-cols-[82px_minmax(0,1fr)_minmax(0,1fr)] gap-3 border-b border-white/8 px-3 py-1.5 text-[11.5px] leading-snug text-white/64 last:border-b-0">
<div className="font-mono text-[11px] text-white/38">{segment.start.toFixed(1)}-{segment.end.toFixed(1)}s</div>
<div>{segment.en || <span className="text-white/30">-</span>}</div>
<div>{segment.zh || <span className="text-white/30">翻译中</span>}</div>
<div className="truncate" title={segment.en}>{segment.en || <span className="text-white/30">-</span>}</div>
<div className="truncate" title={segment.zh}>{segment.zh || <span className="text-white/30">翻译中</span>}</div>
</div>
))}
</div>
@@ -581,8 +581,8 @@ function AudioIntakePanel({ job }: { job: Job | null }) {
)}
</section>
<section className="rounded-lg border border-white/10 bg-black/28 p-3">
<div className="mb-3 flex items-center justify-between gap-3">
<section className="rounded-lg border border-white/10 bg-black/28 p-2.5">
<div className="mb-2 flex items-center justify-between gap-3">
<SectionTitle icon={<Mic className="h-4 w-4" />} title="声音与背景音分析" />
<span className="font-mono text-[11px] text-white/38">{formatSeconds(job.duration)}</span>
</div>
@@ -598,12 +598,12 @@ function AudioIntakePanel({ job }: { job: Job | null }) {
function ProfileTile({ label, value, running }: { label: string; value?: string; running?: boolean }) {
return (
<div className="min-h-[112px] rounded-lg border border-white/10 bg-black/35 p-3">
<div className="mb-2 flex items-center justify-between gap-2">
<div className="min-h-[74px] rounded-md border border-white/10 bg-black/35 p-2.5">
<div className="mb-1.5 flex items-center justify-between gap-2">
<span className="text-[11px] font-semibold text-white/48">{label}</span>
{running ? <Loader2 className="h-3.5 w-3.5 animate-spin text-cyan-200" /> : value ? <Check className="h-3.5 w-3.5 text-emerald-200" /> : <Circle className="h-3.5 w-3.5 text-white/32" />}
</div>
<p className="text-[12px] leading-relaxed text-white/62">
<p className="max-h-[34px] overflow-hidden text-[11.5px] leading-snug text-white/62" title={value}>
{value || (running ? "模型分析中..." : "等待音频分析结果。")}
</p>
</div>
@@ -1210,10 +1210,10 @@ function EmptyState({ text }: { text: string }) {
function Requirement({ label, ready, detail }: { label: string; ready: boolean; detail: string }) {
return (
<div className="flex h-10 items-center gap-2 rounded-md border border-white/10 bg-black/28 px-2">
{ready ? <Check className="h-3.5 w-3.5 text-emerald-200" /> : <Circle className="h-3.5 w-3.5 text-white/38" />}
<span>{label}</span>
<span className="font-mono text-[11px] text-white/42">{detail}</span>
<div className="flex h-10 min-w-0 items-center gap-2 rounded-md border border-white/10 bg-black/28 px-2">
{ready ? <Check className="h-3.5 w-3.5 shrink-0 text-emerald-200" /> : <Circle className="h-3.5 w-3.5 shrink-0 text-white/38" />}
<span className="shrink-0 whitespace-nowrap">{label}</span>
<span className="min-w-0 truncate font-mono text-[11px] text-white/42">{detail}</span>
</div>
)
}