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

auto-save 2026-05-13 19:50 (~4)

Browse Source
This commit is contained in:
kang
2026-05-13 19:50:51 +08:00
parent 2ccbf4b9c6
commit a471f89e16
4 changed files with 40 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
web/components/storyboard-bar.tsx
View File

@@ -9,11 +9,9 @@ interface Props {
selectedFrames: Set<number>
focusedFrame: number | null
onFocusFrame: (idx: number | null) => void
onJobUpdate?: (j: Job) => void
onOpenWorkbench?: (frameIdx?: number) => void
}
export function StoryboardBar({ job, selectedFrames, focusedFrame, onFocusFrame, onJobUpdate, onOpenWorkbench }: Props) {
export function StoryboardBar({ job, selectedFrames, focusedFrame, onFocusFrame }: Props) {
const [collapsed, setCollapsed] = useState(false)
const [mounted, setMounted] = useState(false)
useEffect(() => setMounted(true), [])
@@ -63,17 +61,19 @@ export function StoryboardBar({ job, selectedFrames, focusedFrame, onFocusFrame,
)}
</div>
<div className="flex items-center gap-2 shrink-0">
{onOpenWorkbench && (
<button
onClick={() => onOpenWorkbench(focusedFrame ?? frames[0]?.index)}
disabled={frames.length === 0}
className="text-[11px] px-2.5 py-1 rounded-md bg-gradient-to-r from-violet-500 to-pink-500 hover:from-violet-400 hover:to-pink-400 text-white inline-flex items-center gap-1 disabled:opacity-40 disabled:cursor-not-allowed font-medium shadow"
title={frames.length === 0 ? "先到关键帧节点选用分镜" : "全屏进入分镜头编排工作台"}
>
<LayoutGrid className="h-3 w-3" />
进入编排
</button>
)}
<button
onClick={() => {
if (frames.length === 0) return
if (focusedFrame === null) onFocusFrame(frames[0].index)
setCollapsed(false)
}}
disabled={frames.length === 0}
className="text-[11px] px-2.5 py-1 rounded-md bg-gradient-to-r from-violet-500 to-pink-500 hover:from-violet-400 hover:to-pink-400 text-white inline-flex items-center gap-1 disabled:opacity-40 disabled:cursor-not-allowed font-medium shadow"
title={frames.length === 0 ? "先到关键帧节点选用分镜" : "下拉展开分镜头编排"}
>
<ChevronDown className="h-3 w-3" />
展开编排
</button>
<button
onClick={() => setCollapsed(!collapsed)}
className="text-white/50 hover:text-white text-[11px] inline-flex items-center gap-1"
@@ -104,7 +104,7 @@ export function StoryboardBar({ job, selectedFrames, focusedFrame, onFocusFrame,
ref={(el) => { btnRefs.current[f.index] = el }}
onClick={() => {
onFocusFrame(f.index)
onOpenWorkbench?.(f.index)
setCollapsed(false)
}}
onMouseEnter={() => {
const el = btnRefs.current[f.index]
@@ -116,7 +116,7 @@ export function StoryboardBar({ job, selectedFrames, focusedFrame, onFocusFrame,
})
}}
onMouseLeave={() => setHover(null)}
title={`分镜 ${i + 1} · ${f.timestamp.toFixed(2)}s${cleaned ? " · 已清洗" : ""} · ${elementCount}/${totalElCount} 元素 · 点击进入编排`}
title={`分镜 ${i + 1} · ${f.timestamp.toFixed(2)}s${cleaned ? " · 已清洗" : ""} · ${elementCount}/${totalElCount} 元素 · 点击聚焦`}
className={`relative shrink-0 rounded-md border transition shadow-lg hover:-translate-y-0.5 ${
isFocused
? "border-violet-300 ring-2 ring-violet-300/70"