fix: place material intake inside rail strip
This commit is contained in:
File diff suppressed because one or more lines are too long
@@ -578,14 +578,18 @@ nextjs-portal {
|
||||
}
|
||||
|
||||
.skg-board-rail__strip {
|
||||
width: 65px;
|
||||
width: 397px;
|
||||
min-height: 514px;
|
||||
border: 1px solid #383838;
|
||||
border-radius: 0 70px 70px 0;
|
||||
border-radius: 0 34px 34px 0;
|
||||
background: #383838;
|
||||
box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.skg-board-rail__iconbar {
|
||||
width: 65px;
|
||||
}
|
||||
|
||||
.skg-board-rail__logo {
|
||||
border: 2px solid rgba(255, 255, 255, 0.2);
|
||||
background:
|
||||
|
||||
@@ -2485,9 +2485,6 @@ export function AdRecreationBoard({
|
||||
visualReady={visualReady}
|
||||
subjectAssetCount={subjectAssetCount}
|
||||
generatedVideoCount={generatedVideos.length}
|
||||
onOpenLibrary={() => setLibraryOpen(true)}
|
||||
onToggleTheme={toggleBoardTheme}
|
||||
boardTheme={boardTheme}
|
||||
materialPanel={
|
||||
<MaterialColumn
|
||||
data={data}
|
||||
@@ -2500,6 +2497,9 @@ export function AdRecreationBoard({
|
||||
fileRef={fileRef}
|
||||
onSubmitUrl={submitUrl}
|
||||
onStartProduction={startProduction}
|
||||
onOpenLibrary={() => setLibraryOpen(true)}
|
||||
onToggleTheme={toggleBoardTheme}
|
||||
boardTheme={boardTheme}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
@@ -2591,9 +2591,6 @@ function WorkbenchRail({
|
||||
visualReady,
|
||||
subjectAssetCount,
|
||||
generatedVideoCount,
|
||||
onOpenLibrary,
|
||||
onToggleTheme,
|
||||
boardTheme,
|
||||
materialPanel,
|
||||
}: {
|
||||
job: Job | null
|
||||
@@ -2602,9 +2599,6 @@ function WorkbenchRail({
|
||||
visualReady: boolean
|
||||
subjectAssetCount: number
|
||||
generatedVideoCount: number
|
||||
onOpenLibrary: () => void
|
||||
onToggleTheme: () => void
|
||||
boardTheme: BoardThemeMode
|
||||
materialPanel: ReactNode
|
||||
}) {
|
||||
const railItems = [
|
||||
@@ -2616,48 +2610,30 @@ 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 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
|
||||
<aside className="skg-board-rail sticky top-4 flex shrink-0 items-stretch" aria-label="工作台导航与素材输入">
|
||||
<div className="skg-board-rail__strip flex shrink-0 items-stretch gap-3" aria-label="工作台导航与素材输入">
|
||||
<div className="skg-board-rail__iconbar 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>
|
||||
<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
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="w-[320px] shrink-0">
|
||||
{materialPanel}
|
||||
<div className="w-[320px] shrink-0">
|
||||
{materialPanel}
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
)
|
||||
@@ -2674,6 +2650,9 @@ function MaterialColumn({
|
||||
fileRef,
|
||||
onSubmitUrl,
|
||||
onStartProduction,
|
||||
onOpenLibrary,
|
||||
onToggleTheme,
|
||||
boardTheme,
|
||||
}: {
|
||||
data: NodeData
|
||||
step: WorkflowStep
|
||||
@@ -2685,6 +2664,9 @@ function MaterialColumn({
|
||||
fileRef: RefObject<HTMLInputElement | null>
|
||||
onSubmitUrl: () => void
|
||||
onStartProduction: () => void
|
||||
onOpenLibrary: () => void
|
||||
onToggleTheme: () => void
|
||||
boardTheme: BoardThemeMode
|
||||
}) {
|
||||
const actionLabel = !url.trim() && job?.status === "failed"
|
||||
? job.video_url ? "重新解析" : "重新下载"
|
||||
@@ -2692,12 +2674,36 @@ function MaterialColumn({
|
||||
return (
|
||||
<section className="skg-board-panel flex h-full min-h-[514px] flex-col gap-3 rounded-[20px] border border-white/10 bg-white/[0.035] p-3 shadow-2xl">
|
||||
<header className="shrink-0 border-b border-white/10 pb-3">
|
||||
<div className="mb-2 flex items-center gap-2">
|
||||
<span className="inline-flex h-8 w-8 items-center justify-center rounded-full border border-white/12 bg-white/[0.07] text-[#c8cd19]"><Plus className="h-4 w-4" /></span>
|
||||
<WorkflowStepBadge step={step} compact />
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div className="min-w-0">
|
||||
<div className="mb-2 flex items-center gap-2">
|
||||
<span className="inline-flex h-8 w-8 items-center justify-center rounded-full border border-white/12 bg-white/[0.07] text-[#c8cd19]"><Plus className="h-4 w-4" /></span>
|
||||
<WorkflowStepBadge step={step} compact />
|
||||
</div>
|
||||
<h2 className="text-[15px] font-semibold leading-tight text-white">素材输入</h2>
|
||||
<p className="mt-1 text-[12px] leading-snug text-white/42">一个素材就是一次文件任务</p>
|
||||
</div>
|
||||
<div className="flex shrink-0 gap-1.5">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onOpenLibrary}
|
||||
className="skg-secondary-action inline-flex h-8 w-8 items-center justify-center transition"
|
||||
title="资源库"
|
||||
aria-label="打开资源库"
|
||||
>
|
||||
<BookOpen className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onToggleTheme}
|
||||
className="skg-secondary-action inline-flex h-8 w-8 items-center justify-center transition"
|
||||
title={boardTheme === "dark" ? "切换到明亮模式" : "切换到暗色模式"}
|
||||
aria-label={boardTheme === "dark" ? "切换到明亮模式" : "切换到暗色模式"}
|
||||
>
|
||||
{boardTheme === "dark" ? <Sun className="h-3.5 w-3.5" /> : <Moon className="h-3.5 w-3.5" />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<h2 className="text-[15px] font-semibold leading-tight text-white">素材输入</h2>
|
||||
<p className="mt-1 text-[12px] leading-snug text-white/42">一个素材就是一次文件任务</p>
|
||||
</header>
|
||||
|
||||
<div className="flex gap-2">
|
||||
|
||||
Reference in New Issue
Block a user