fix(ui): shrink inline image params trigger to avoid toolbar overlap
This commit is contained in:
Your Name
parent
9d7ac81dd1
commit
477fec4efa
@ -184,15 +184,15 @@ export function ImageParamsBar({
|
||||
if (!wRaw || !hRaw) {
|
||||
return <Scan className="h-4 w-4" />;
|
||||
}
|
||||
const maxSide = 22;
|
||||
const maxSide = 14;
|
||||
let width = maxSide;
|
||||
let height = maxSide;
|
||||
if (wRaw >= hRaw) {
|
||||
width = maxSide;
|
||||
height = Math.max(8, Math.round((maxSide * hRaw) / wRaw));
|
||||
height = Math.max(6, Math.round((maxSide * hRaw) / wRaw));
|
||||
} else {
|
||||
height = maxSide;
|
||||
width = Math.max(8, Math.round((maxSide * wRaw) / hRaw));
|
||||
width = Math.max(6, Math.round((maxSide * wRaw) / hRaw));
|
||||
}
|
||||
|
||||
return (
|
||||
@ -235,7 +235,7 @@ export function ImageParamsBar({
|
||||
// 内联模式：只返回参数按钮，嵌入工具栏
|
||||
if (inline) {
|
||||
const ratioLabel = params.aspectRatio === "auto" ? "智能比例" : params.aspectRatio;
|
||||
const sizeLabel = params.imageSize === "4K" ? "超清 4K" : `高清 ${params.imageSize}`;
|
||||
const sizeLabel = params.imageSize === "4K" ? "超清4K" : `高清${params.imageSize}`;
|
||||
const outputSize = getComputedOutputSize(params.aspectRatio, params.imageSize);
|
||||
|
||||
return (
|
||||
@ -244,17 +244,17 @@ export function ImageParamsBar({
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="h-9 rounded-[14px] border border-[#d6dbe2] bg-[#f3f4f6]/90 px-3 text-[12px] font-semibold text-[#2f3b48] hover:bg-[#edeff2]/90"
|
||||
className="h-8 max-w-[168px] shrink rounded-[12px] border border-[#d6dbe2] bg-[#f3f4f6]/90 px-2 text-[11px] font-semibold text-[#2f3b48] hover:bg-[#edeff2]/90"
|
||||
title={`比例：${params.aspectRatio}，分辨率：${params.imageSize}`}
|
||||
>
|
||||
<span className="mr-1.5 flex h-4 w-4 items-center justify-center text-[#20262f]">
|
||||
<span className="mr-1 flex h-3.5 w-3.5 items-center justify-center text-[#20262f]">
|
||||
{renderRatioGlyph(params.aspectRatio)}
|
||||
</span>
|
||||
<span>{ratioLabel}</span>
|
||||
<span className="mx-2 h-3.5 w-px bg-[#cfd5de]" />
|
||||
<span className="inline-flex items-center gap-1">
|
||||
<span className="truncate">{ratioLabel}</span>
|
||||
<span className="mx-1.5 h-3 w-px bg-[#cfd5de]" />
|
||||
<span className="inline-flex min-w-0 items-center gap-0.5 truncate">
|
||||
{sizeLabel}
|
||||
{params.imageSize === "4K" ? <Sparkles className="h-3.5 w-3.5 text-[#0ea5e9]" /> : null}
|
||||
{params.imageSize === "4K" ? <Sparkles className="h-3 w-3 text-[#0ea5e9]" /> : null}
|
||||
</span>
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
@ -262,28 +262,28 @@ export function ImageParamsBar({
|
||||
align="start"
|
||||
side="top"
|
||||
sideOffset={10}
|
||||
className="w-[620px] max-w-[calc(100vw-32px)] rounded-[24px] border border-[#d8dde4] bg-[#f3f4f6]/90 p-4 shadow-[0_14px_36px_rgba(15,23,42,0.16)]"
|
||||
className="w-[312px] max-w-[calc(100vw-24px)] rounded-[14px] border border-[#d8dde4] bg-[#f3f4f6]/90 p-2 shadow-[0_10px_24px_rgba(15,23,42,0.14)]"
|
||||
>
|
||||
<div className="space-y-5">
|
||||
<div className="space-y-2.5">
|
||||
<div>
|
||||
<p className="text-[13px] font-medium text-[#8a94a3]">选择比例</p>
|
||||
<div className="mt-2 grid grid-cols-3 gap-2 rounded-[20px] bg-[#eceff2]/90 p-2 md:grid-cols-9">
|
||||
<p className="text-[11px] font-medium text-[#8a94a3]">选择比例</p>
|
||||
<div className="mt-1.5 grid grid-cols-4 gap-1.5 rounded-[12px] bg-[#eceff2]/90 p-1.5 md:grid-cols-5">
|
||||
{ASPECT_RATIO_OPTIONS.map((option) => (
|
||||
<button
|
||||
key={option.value}
|
||||
type="button"
|
||||
className={cn(
|
||||
"flex h-[92px] flex-col items-center justify-center rounded-[16px] border text-[#5f6b7a] transition",
|
||||
"flex h-[46px] flex-col items-center justify-center rounded-[10px] border text-[#5f6b7a] transition",
|
||||
params.aspectRatio === option.value
|
||||
? "border-white bg-white text-[#1f2937] shadow-[0_2px_8px_rgba(15,23,42,0.08)]"
|
||||
? "border-white bg-white text-[#1f2937] shadow-[0_1px_5px_rgba(15,23,42,0.08)]"
|
||||
: "border-transparent hover:bg-white/70"
|
||||
)}
|
||||
onClick={() => updateParam("aspectRatio", option.value)}
|
||||
>
|
||||
<span className="mb-2 flex h-6 items-center justify-center">
|
||||
<span className="mb-0.5 flex h-4 items-center justify-center">
|
||||
{renderRatioGlyph(option.value)}
|
||||
</span>
|
||||
<span className="text-[15px] font-semibold">
|
||||
<span className="text-[12px] font-semibold leading-none">
|
||||
{option.value === "auto" ? "智能" : option.label}
|
||||
</span>
|
||||
</button>
|
||||
@ -292,23 +292,23 @@ export function ImageParamsBar({
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="text-[13px] font-medium text-[#8a94a3]">选择分辨率</p>
|
||||
<div className="mt-2 grid grid-cols-2 gap-2 rounded-[18px] bg-[#eceff2]/90 p-1.5">
|
||||
<p className="text-[11px] font-medium text-[#8a94a3]">选择分辨率</p>
|
||||
<div className="mt-1.5 grid grid-cols-2 gap-1.5 rounded-[12px] bg-[#eceff2]/90 p-1">
|
||||
{IMAGE_SIZE_OPTIONS.filter((option) => !option.disabled).map((option) => (
|
||||
<button
|
||||
key={option.value}
|
||||
type="button"
|
||||
className={cn(
|
||||
"h-16 rounded-[14px] text-[18px] font-semibold transition md:text-[20px]",
|
||||
"h-8 rounded-[9px] text-[12px] font-semibold transition",
|
||||
params.imageSize === option.value
|
||||
? "bg-white text-[#111827] shadow-[0_2px_8px_rgba(15,23,42,0.08)]"
|
||||
? "bg-white text-[#111827] shadow-[0_1px_5px_rgba(15,23,42,0.08)]"
|
||||
: "bg-transparent text-[#5f6b7a] hover:bg-white/70"
|
||||
)}
|
||||
onClick={() => updateParam("imageSize", option.value)}
|
||||
>
|
||||
<span className="inline-flex items-center gap-1">
|
||||
{option.value === "4K" ? "超清 4K" : `高清 ${option.label}`}
|
||||
{option.value === "4K" ? <Sparkles className="h-4 w-4 text-[#0ea5e9]" /> : null}
|
||||
{option.value === "4K" ? <Sparkles className="h-3 w-3 text-[#0ea5e9]" /> : null}
|
||||
</span>
|
||||
</button>
|
||||
))}
|
||||
@ -316,22 +316,22 @@ export function ImageParamsBar({
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="text-[13px] font-medium text-[#8a94a3]">尺寸</p>
|
||||
<div className="mt-2 grid grid-cols-[1fr_auto_1fr_auto] items-center gap-2">
|
||||
<div className="h-16 rounded-[14px] border border-[#dce1e8] bg-[#eef1f4]/90 px-3 text-[#b0b8c4]">
|
||||
<p className="text-[11px] font-medium text-[#8a94a3]">尺寸</p>
|
||||
<div className="mt-1.5 grid grid-cols-[1fr_auto_1fr_auto] items-center gap-1.5">
|
||||
<div className="h-8 rounded-[9px] border border-[#dce1e8] bg-[#eef1f4]/90 px-2 text-[#b0b8c4]">
|
||||
<div className="flex h-full items-center justify-between">
|
||||
<span className="text-[16px] font-semibold">W</span>
|
||||
<span className="text-[30px] font-semibold">{outputSize.width}</span>
|
||||
<span className="text-[11px] font-semibold">W</span>
|
||||
<span className="text-[16px] font-semibold">{outputSize.width}</span>
|
||||
</div>
|
||||
</div>
|
||||
<Link2 className="h-5 w-5 text-[#adb6c3]" />
|
||||
<div className="h-16 rounded-[14px] border border-[#dce1e8] bg-[#eef1f4]/90 px-3 text-[#b0b8c4]">
|
||||
<Link2 className="h-3.5 w-3.5 text-[#adb6c3]" />
|
||||
<div className="h-8 rounded-[9px] border border-[#dce1e8] bg-[#eef1f4]/90 px-2 text-[#b0b8c4]">
|
||||
<div className="flex h-full items-center justify-between">
|
||||
<span className="text-[16px] font-semibold">H</span>
|
||||
<span className="text-[30px] font-semibold">{outputSize.height}</span>
|
||||
<span className="text-[11px] font-semibold">H</span>
|
||||
<span className="text-[16px] font-semibold">{outputSize.height}</span>
|
||||
</div>
|
||||
</div>
|
||||
<span className="text-[26px] font-semibold text-[#657180]">PX</span>
|
||||
<span className="text-[14px] font-semibold text-[#657180]">PX</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user