fix: align flow board floating sidebar
Some checks failed
Lint / build (20) (push) Has been cancelled
Playwright Tests / test (push) Has been cancelled

This commit is contained in:
Your Name 2026-04-12 01:05:57 +08:00
parent 3f4d850815
commit 9a562db15a
2 changed files with 55 additions and 29 deletions

View File

@ -1361,7 +1361,7 @@ export function DrawnixWorkspace({
type="file"
/>
<FloatingSidebarShell
className="absolute top-4 left-4 z-20 lg:top-6 lg:left-6"
className="absolute top-[18px] left-7 z-30"
flowBoardControl
>
<FloatingLogoPill
@ -1370,10 +1370,16 @@ export function DrawnixWorkspace({
}}
siteLogo={displayLogo}
siteName={siteName}
tooltip="返回首页"
tooltip={null}
variant="plain"
/>
</FloatingSidebarShell>
<FloatingSidebarRail className="max-h-[calc(100vh-88px)]">
<FloatingSidebarShell
className="absolute left-6 top-[92px] z-20"
flowBoardControl
>
<FloatingSidebarRail className="max-h-[calc(100vh-172px)]">
<FloatingSidebarAction
disabled={isSavingNow}
icon={Save}

View File

@ -37,8 +37,9 @@ export function FloatingSidebarShell({
type FloatingLogoPillProps = {
siteName: string;
siteLogo?: string | null;
tooltip?: string;
tooltip?: string | null;
onClick?: () => void;
variant?: "pill" | "plain";
};
export function FloatingLogoPill({
@ -46,33 +47,53 @@ export function FloatingLogoPill({
siteLogo,
tooltip = siteName,
onClick,
variant = "pill",
}: FloatingLogoPillProps) {
const isPlain = variant === "plain";
const trigger = (
<button
aria-label={tooltip || siteName}
className={cn(
"pointer-events-auto flex items-center gap-2 text-left transition",
isPlain
? "h-8 hover:opacity-70"
: "h-[52px] w-[52px] justify-center rounded-full border border-black/10 bg-white px-2.5 shadow hover:bg-black/[0.03] hover:shadow-md lg:w-[164px] lg:justify-start lg:px-4"
)}
onClick={onClick}
type="button"
>
{siteLogo ? (
<img
alt={siteName}
className="h-8 w-8 shrink-0 rounded-full object-cover"
src={siteLogo}
/>
) : (
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-black font-bold text-white text-sm">
{siteName.slice(0, 1).toUpperCase()}
</div>
)}
<span
className={cn(
"min-w-0 truncate font-semibold text-[#111827] leading-none tracking-tight",
isPlain ? "text-[20px]" : "hidden text-[15px] lg:block"
)}
>
{siteName}
</span>
</button>
);
if (!tooltip) {
return trigger;
}
return (
<Tooltip>
<TooltipTrigger asChild>
<button
className="pointer-events-auto flex h-[52px] w-[52px] items-center justify-center gap-3 rounded-full border border-black/10 bg-white px-2.5 text-left shadow transition hover:bg-black/[0.03] hover:shadow-md lg:w-[164px] lg:justify-start lg:px-4"
onClick={onClick}
title={tooltip}
type="button"
>
{siteLogo ? (
<img
alt={siteName}
className="h-8 w-8 rounded-full object-cover"
src={siteLogo}
/>
) : (
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-black font-bold text-white text-sm">
{siteName.slice(0, 1).toUpperCase()}
</div>
)}
<span className="hidden min-w-0 truncate font-semibold text-[#111827] text-[15px] leading-none tracking-tight lg:block">
{siteName}
</span>
</button>
</TooltipTrigger>
<TooltipContent side="right">{tooltip}</TooltipContent>
<TooltipTrigger asChild>{trigger}</TooltipTrigger>
<TooltipContent side={isPlain ? "bottom" : "right"}>
{tooltip}
</TooltipContent>
</Tooltip>
);
}
@ -126,7 +147,6 @@ export function FloatingSidebarAction({
)}
disabled={disabled || loading}
onClick={onClick}
title={label}
type="button"
>
{loading ? (