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

fix: nest material intake inside workbench rail

Browse Source
This commit is contained in:
kang
2026-05-21 11:04:35 +08:00
parent def4900c1d
commit f2655e1418
3 changed files with 62 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
docs/source-analysis.html
View File

File diff suppressed because one or more lines are too long

5
web/app/globals.css
View File

@@ -573,6 +573,11 @@ nextjs-portal {
}
.skg-board-rail {
width: 397px;
min-height: 514px;
}
.skg-board-rail__strip {
width: 65px;
min-height: 514px;
border: 1px solid #383838;

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

@@ -2478,20 +2478,17 @@ export function AdRecreationBoard({
<div className="skg-board-ambient pointer-events-none fixed inset-0" />
<div className="relative z-10 mx-auto min-h-screen w-full min-w-[1280px] max-w-[1920px] px-4 py-4 xl:px-5">
<div className="skg-board-shell flex gap-4 p-4">
<div className="flex shrink-0 gap-3 self-stretch">
<WorkbenchRail
job={job}
jobsCount={jobs.length}
audioReady={audioReady}
visualReady={visualReady}
subjectAssetCount={subjectAssetCount}
generatedVideoCount={generatedVideos.length}
onOpenLibrary={() => setLibraryOpen(true)}
onToggleTheme={toggleBoardTheme}
boardTheme={boardTheme}
/>
<div className="w-[320px] shrink-0">
<WorkbenchRail
job={job}
jobsCount={jobs.length}
audioReady={audioReady}
visualReady={visualReady}
subjectAssetCount={subjectAssetCount}
generatedVideoCount={generatedVideos.length}
onOpenLibrary={() => setLibraryOpen(true)}
onToggleTheme={toggleBoardTheme}
boardTheme={boardTheme}
materialPanel={
<MaterialColumn
data={data}
step={workflow.input}
@@ -2504,8 +2501,8 @@ export function AdRecreationBoard({
onSubmitUrl={submitUrl}
onStartProduction={startProduction}
/>
</div>
</div>
}
/>
<div className="flex min-w-0 flex-1 flex-col gap-3">
<header className="skg-board-topbar flex items-center justify-between gap-4 rounded-[20px] border border-white/10 bg-white/[0.04] px-4 py-3">
@@ -2597,6 +2594,7 @@ function WorkbenchRail({
onOpenLibrary,
onToggleTheme,
boardTheme,
materialPanel,
}: {
job: Job | null
jobsCount: number
@@ -2607,6 +2605,7 @@ function WorkbenchRail({
onOpenLibrary: () => void
onToggleTheme: () => void
boardTheme: BoardThemeMode
materialPanel: ReactNode
}) {
const railItems = [
{ key: "jobs", label: "素材任务", icon: <Link2 className="h-[18px] w-[18px]" />, active: jobsCount > 0 },
@@ -2617,42 +2616,48 @@ function WorkbenchRail({
{ key: "video", label: "视频候选", icon: <Film className="h-[18px] w-[18px]" />, active: generatedVideoCount > 0 },
]
return (
<aside className="skg-board-rail sticky top-4 flex shrink-0 flex-col items-center py-5" aria-label="工作台导航">
<div className="skg-board-rail__logo mb-8 flex h-9 w-9 items-center justify-center rounded-full text-[12px] font-semibold" title="SKG Marketing Studio">
S
</div>
<nav className="flex flex-1 flex-col items-center gap-4">
{railItems.map((item) => (
<aside className="skg-board-rail sticky top-4 flex shrink-0 items-stretch gap-3" aria-label="工作台导航与素材输入">
<div className="skg-board-rail__strip flex shrink-0 flex-col items-center py-5" aria-label="工作台导航">
<div className="skg-board-rail__logo mb-8 flex h-9 w-9 items-center justify-center rounded-full text-[12px] font-semibold" title="SKG Marketing Studio">
S
</div>
<nav className="flex flex-1 flex-col items-center gap-4">
{railItems.map((item) => (
<button
key={item.key}
type="button"
className={`skg-board-rail__button inline-flex h-9 w-9 items-center justify-center rounded-full ${item.active ? "is-active" : ""}`}
title={item.label}
aria-label={item.label}
>
{item.icon}
</button>
))}
</nav>
<div className="mt-8 flex flex-col items-center gap-3">
<button
key={item.key}
type="button"
className={`skg-board-rail__button inline-flex h-9 w-9 items-center justify-center rounded-full ${item.active ? "is-active" : ""}`}
title={item.label}
aria-label={item.label}
onClick={onOpenLibrary}
className="skg-board-rail__button inline-flex h-9 w-9 items-center justify-center rounded-full"
title="资源库"
aria-label="打开资源库"
>
{item.icon}
<BookOpen className="h-[18px] w-[18px]" />
</button>
))}
</nav>
<div className="mt-8 flex flex-col items-center gap-3">
<button
type="button"
onClick={onOpenLibrary}
className="skg-board-rail__button inline-flex h-9 w-9 items-center justify-center rounded-full"
title="资源库"
aria-label="打开资源库"
>
<BookOpen className="h-[18px] w-[18px]" />
</button>
<button
type="button"
onClick={onToggleTheme}
className="skg-board-rail__button inline-flex h-9 w-9 items-center justify-center rounded-full"
title={boardTheme === "dark" ? "切换到明亮模式" : "切换到暗色模式"}
aria-label={boardTheme === "dark" ? "切换到明亮模式" : "切换到暗色模式"}
>
{boardTheme === "dark" ? <Sun className="h-[18px] w-[18px]" /> : <Moon className="h-[18px] w-[18px]" />}
</button>
<button
type="button"
onClick={onToggleTheme}
className="skg-board-rail__button inline-flex h-9 w-9 items-center justify-center rounded-full"
title={boardTheme === "dark" ? "切换到明亮模式" : "切换到暗色模式"}
aria-label={boardTheme === "dark" ? "切换到明亮模式" : "切换到暗色模式"}
>
{boardTheme === "dark" ? <Sun className="h-[18px] w-[18px]" /> : <Moon className="h-[18px] w-[18px]" />}
</button>
</div>
</div>
<div className="w-[320px] shrink-0">
{materialPanel}
</div>
</aside>
)