54 lines
2.4 KiB
TypeScript
54 lines
2.4 KiB
TypeScript
import { 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 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
|
||
data-testid="image-workspace-history-header"
|
||
className={cn(
|
||
'flex h-12 shrink-0 items-center border-b border-border/70 px-4',
|
||
platform === 'darwin' && 'pr-[116px]',
|
||
platform === 'win32' && 'pr-[244px]',
|
||
)}
|
||
>
|
||
<div className="flex min-w-0 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>
|
||
</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>
|
||
);
|
||
}
|