fix(canvas): add full-height history rail

2026-09-07 15:09:12 +08:00
parent 4477d0da7d
commit a705253261
8 changed files with 230 additions and 122 deletions
--- a/src/pages/ImageCanvas/DesignHistoryRail.tsx
+++ b/src/pages/ImageCanvas/DesignHistoryRail.tsx
@@ -0,0 +1,66 @@
+import { Clock3, Images } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import type { DesignWorkspace } from '../../../shared/image-workspace';
+import { DesignPlanHistory } from './DesignPlanHistory';
+
+export function DesignHistoryRail({ workspace }: { workspace: DesignWorkspace | null }) {
+  const taskCount = workspace?.tasks.length ?? 0;
+  const resultCount = workspace?.assets.filter((asset) => asset.generationTaskId).length ?? 0;
+  const platform = window.electron?.platform;
+
+  return (
+    <aside
+      data-testid="image-workspace-history-rail"
+      aria-label="历史作品"
+      className="flex h-full min-h-0 w-[320px] shrink-0 flex-col border-l border-border/70 bg-background font-sans xl:w-[340px]"
+    >
+      <header className={cn(
+        'flex shrink-0 justify-between gap-3 border-b border-border/70 px-4',
+        platform === 'darwin' || platform === 'win32'
+          ? 'min-h-[104px] items-end pb-3 pt-10'
+          : 'min-h-16 items-center',
+      )}>
+        <div className="min-w-0">
+          <div className="flex items-center gap-2">
+            <Images className="h-4 w-4 shrink-0 text-brand" aria-hidden="true" />
+            <h2 className="truncate text-sm font-semibold text-foreground">历史作品</h2>
+          </div>
+          <p className="mt-1 text-[11px] tabular-nums text-muted-foreground">
+            {taskCount > 0 ? `${taskCount} 次制作 · ${resultCount} 个结果` : '当前设计项目的制作记录'}
+          </p>
+        </div>
+        {workspace?.tasks.some((task) => task.status === 'queued' || task.status === 'running') ? (
+          <span
+            role="status"
+            className="inline-flex shrink-0 items-center gap-1.5 rounded-lg bg-brand/[0.06] px-2 py-1 text-[11px] font-medium text-brand"
+          >
+            <Clock3 className="h-3.5 w-3.5 animate-pulse" aria-hidden="true" />
+            制作中
+          </span>
+        ) : null}
+      </header>
+
+      <div data-testid="image-workspace-history-scroll" className="min-h-0 flex-1 overflow-y-auto overscroll-contain p-3">
+        {!workspace ? (
+          <div className="rounded-2xl border border-dashed border-border/80 bg-surface-subtle/35 px-4 py-7 text-center">
+            <Images className="mx-auto h-5 w-5 text-muted-foreground" aria-hidden="true" />
+            <p className="mt-3 text-xs font-semibold text-foreground">先选择一个设计项目</p>
+            <p className="mt-1 text-[11px] leading-5 text-muted-foreground">
+              这个项目生成过的图片和视频会集中显示在这里。
+            </p>
+          </div>
+        ) : taskCount === 0 ? (
+          <div className="rounded-2xl border border-dashed border-border/80 bg-surface-subtle/35 px-4 py-7 text-center">
+            <Images className="mx-auto h-5 w-5 text-muted-foreground" aria-hidden="true" />
+            <p className="mt-3 text-xs font-semibold text-foreground">还没有历史作品</p>
+            <p className="mt-1 text-[11px] leading-5 text-muted-foreground">
+              确认制作方案后，图片和视频会按时间保留在这里。
+            </p>
+          </div>
+        ) : (
+          <DesignPlanHistory workspace={workspace} />
+        )}
+      </div>
+    </aside>
+  );
+}