fix: place material intake inside rail strip

2026-05-21 11:17:50 +08:00
parent f2655e1418
commit 8421af2af8
3 changed files with 72 additions and 62 deletions
--- a/web/app/globals.css
+++ b/web/app/globals.css
@@ -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:
--- a/web/components/ad-recreation-board.tsx
+++ b/web/components/ad-recreation-board.tsx
@@ -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">