96 lines
3.0 KiB
TypeScript
96 lines
3.0 KiB
TypeScript
"use client";
|
|
|
|
import { ReferenceIcon } from "@/components/lovart/reference-icon";
|
|
|
|
import { Loader2, Save } from "lucide-react";
|
|
|
|
type CanvasSurfaceHeaderProps = {
|
|
isSaving: boolean;
|
|
onAddImage: () => void;
|
|
onHome: () => void;
|
|
onOpenFiles: () => void;
|
|
onSave: () => void;
|
|
projectTitle: string;
|
|
rightInset: number;
|
|
};
|
|
|
|
const iconButtonClass =
|
|
"inline-flex h-[28px] w-[28px] items-center justify-center rounded-[8px] p-0 text-[#858585] transition-colors hover:bg-black/5 focus-visible:outline-2 focus-visible:outline-offset-2 dark:hover:bg-white/10";
|
|
|
|
export function CanvasSurfaceHeader({
|
|
isSaving,
|
|
onAddImage,
|
|
onHome,
|
|
onOpenFiles,
|
|
onSave,
|
|
projectTitle,
|
|
rightInset,
|
|
}: CanvasSurfaceHeaderProps) {
|
|
return (
|
|
<div
|
|
className="absolute left-0 top-0 z-20 flex h-[40px] items-center justify-between border-b border-[#ededed] bg-white px-3 dark:border-white/10 dark:bg-zinc-950"
|
|
data-canvas-topbar="true"
|
|
style={{ right: rightInset }}
|
|
>
|
|
<div className="flex min-w-0 items-center gap-2">
|
|
<button
|
|
aria-label="返回首页"
|
|
className={iconButtonClass}
|
|
onClick={onHome}
|
|
title="返回首页"
|
|
type="button"
|
|
>
|
|
<ReferenceIcon name="branding" size={16} />
|
|
</button>
|
|
<button
|
|
aria-label="添加参考素材"
|
|
className={iconButtonClass}
|
|
onClick={onAddImage}
|
|
title="添加参考素材"
|
|
type="button"
|
|
>
|
|
<ReferenceIcon name="reference" size={16} />
|
|
</button>
|
|
<button
|
|
aria-label="查看项目文件"
|
|
className={iconButtonClass}
|
|
onClick={onOpenFiles}
|
|
title="查看项目文件"
|
|
type="button"
|
|
>
|
|
<ReferenceIcon name="brand" size={16} />
|
|
</button>
|
|
<div className="mx-1 h-4 w-px bg-[#ededed] dark:bg-white/10" />
|
|
<span className="inline-flex h-7 min-w-0 items-center gap-2 rounded-[8px] bg-[#ededed] px-3 text-[13px] text-[#333333] dark:bg-white/10 dark:text-white">
|
|
<ReferenceIcon name="page" size={16} />
|
|
<span className="max-w-[160px] truncate">
|
|
{projectTitle || "页面 1"}
|
|
</span>
|
|
</span>
|
|
<button
|
|
aria-label="添加到画布"
|
|
className={iconButtonClass}
|
|
onClick={onAddImage}
|
|
title="添加到画布"
|
|
type="button"
|
|
>
|
|
<ReferenceIcon name="plus" size={16} />
|
|
</button>
|
|
</div>
|
|
<button
|
|
className="inline-flex h-7 shrink-0 items-center gap-1.5 rounded-[8px] border border-[#e5e5e5] px-3 text-[12px] text-[#333333] transition-colors hover:bg-black/5 disabled:opacity-50 dark:border-white/10 dark:text-white"
|
|
disabled={isSaving}
|
|
onClick={onSave}
|
|
type="button"
|
|
>
|
|
{isSaving ? (
|
|
<Loader2 className="h-3.5 w-3.5 animate-spin" />
|
|
) : (
|
|
<Save className="h-3.5 w-3.5" />
|
|
)}
|
|
保存
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|