优化尺寸调整界面布局和尺寸设置
- 将宽高设置工具栏移动到选择比例工具栏后面，统一在一行显示 - 左侧原图预览固定高度570px，按比例显示 - 右侧画布线框固定尺寸714x570px，减少上下留白 - 优化工具栏布局，所有控制项在一行显示，更紧凑
This commit is contained in:
Your Name
parent
a8e5408136
commit
2c29c2ef08
@ -1031,88 +1031,93 @@ export function ImageAnnotator({ imageUrl, onConfirm, onCancel }: ImageAnnotator
|
||||
{isResizeMode ? (
|
||||
/* 尺寸调整模式下显示尺寸调整工具栏 */
|
||||
<div className="flex flex-col gap-3 border-b px-4 py-3 bg-muted/30">
|
||||
{/* 比例选择 */}
|
||||
<div className="flex items-center gap-2">
|
||||
<label className="text-sm font-medium whitespace-nowrap">选择比例:</label>
|
||||
<div className="flex items-center gap-2 overflow-x-auto pb-1">
|
||||
{aspectRatios.map((ratio) => (
|
||||
<button
|
||||
key={ratio.value}
|
||||
type="button"
|
||||
onClick={() => handleAspectRatioSelect(ratio.value === selectedAspectRatio ? null : ratio.value)}
|
||||
className={`flex flex-col items-center justify-center gap-1 px-3 py-2 rounded-lg border transition-colors whitespace-nowrap ${
|
||||
selectedAspectRatio === ratio.value
|
||||
? "bg-primary text-primary-foreground border-primary"
|
||||
: "bg-background hover:bg-muted border-border"
|
||||
}`}
|
||||
title={ratio.label}
|
||||
>
|
||||
<div
|
||||
className={`border-2 rounded flex items-center justify-center ${
|
||||
selectedAspectRatio === ratio.value ? "border-primary-foreground" : "border-foreground"
|
||||
{/* 比例选择和尺寸输入在同一行 */}
|
||||
<div className="flex items-center gap-4 flex-wrap">
|
||||
{/* 比例选择 */}
|
||||
<div className="flex items-center gap-2">
|
||||
<label className="text-sm font-medium whitespace-nowrap">选择比例:</label>
|
||||
<div className="flex items-center gap-2 overflow-x-auto pb-1">
|
||||
{aspectRatios.map((ratio) => (
|
||||
<button
|
||||
key={ratio.value}
|
||||
type="button"
|
||||
onClick={() => handleAspectRatioSelect(ratio.value === selectedAspectRatio ? null : ratio.value)}
|
||||
className={`flex flex-col items-center justify-center gap-1 px-3 py-2 rounded-lg border transition-colors whitespace-nowrap ${
|
||||
selectedAspectRatio === ratio.value
|
||||
? "bg-primary text-primary-foreground border-primary"
|
||||
: "bg-background hover:bg-muted border-border"
|
||||
}`}
|
||||
style={{
|
||||
width: ratio.value === "smart" ? "16px" : ratio.ratio && ratio.ratio > 1 ? "24px" : ratio.ratio && ratio.ratio < 1 ? "12px" : "16px",
|
||||
height: ratio.value === "smart" ? "16px" : ratio.ratio && ratio.ratio > 1 ? "12px" : ratio.ratio && ratio.ratio < 1 ? "24px" : "16px",
|
||||
}}
|
||||
title={ratio.label}
|
||||
>
|
||||
{ratio.value === "smart" && (
|
||||
<Maximize2 className="h-3 w-3" />
|
||||
)}
|
||||
</div>
|
||||
<span className="text-xs">{ratio.label}</span>
|
||||
</button>
|
||||
))}
|
||||
<div
|
||||
className={`border-2 rounded flex items-center justify-center ${
|
||||
selectedAspectRatio === ratio.value ? "border-primary-foreground" : "border-foreground"
|
||||
}`}
|
||||
style={{
|
||||
width: ratio.value === "smart" ? "16px" : ratio.ratio && ratio.ratio > 1 ? "24px" : ratio.ratio && ratio.ratio < 1 ? "12px" : "16px",
|
||||
height: ratio.value === "smart" ? "16px" : ratio.ratio && ratio.ratio > 1 ? "12px" : ratio.ratio && ratio.ratio < 1 ? "24px" : "16px",
|
||||
}}
|
||||
>
|
||||
{ratio.value === "smart" && (
|
||||
<Maximize2 className="h-3 w-3" />
|
||||
)}
|
||||
</div>
|
||||
<span className="text-xs">{ratio.label}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 尺寸输入 */}
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<label className="text-sm font-medium">宽度:</label>
|
||||
<Input
|
||||
type="number"
|
||||
value={resizeCanvasWidth}
|
||||
onChange={(e) => handleWidthChange(Number.parseInt(e.target.value) || 1)}
|
||||
className="w-24 h-8"
|
||||
min={1}
|
||||
max={10000}
|
||||
/>
|
||||
<span className="text-xs text-muted-foreground">px</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<label className="text-sm font-medium">高度:</label>
|
||||
<Input
|
||||
type="number"
|
||||
value={resizeCanvasHeight}
|
||||
onChange={(e) => handleHeightChange(Number.parseInt(e.target.value) || 1)}
|
||||
className="w-24 h-8"
|
||||
min={1}
|
||||
max={10000}
|
||||
/>
|
||||
<span className="text-xs text-muted-foreground">px</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<label className="text-sm font-medium">背景:</label>
|
||||
<input
|
||||
type="color"
|
||||
value={resizeBackgroundColor}
|
||||
onChange={(e) => setResizeBackgroundColor(e.target.value)}
|
||||
disabled={resizeBackgroundTransparent}
|
||||
className="w-12 h-8 rounded border cursor-pointer disabled:opacity-50"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<label className="text-sm font-medium flex items-center gap-1">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={resizeBackgroundTransparent}
|
||||
onChange={(e) => setResizeBackgroundTransparent(e.target.checked)}
|
||||
className="w-4 h-4"
|
||||
|
||||
{/* 尺寸输入 */}
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<label className="text-sm font-medium">宽度:</label>
|
||||
<Input
|
||||
type="number"
|
||||
value={resizeCanvasWidth}
|
||||
onChange={(e) => handleWidthChange(Number.parseInt(e.target.value) || 1)}
|
||||
className="w-24 h-8"
|
||||
min={1}
|
||||
max={10000}
|
||||
/>
|
||||
透明
|
||||
</label>
|
||||
<span className="text-xs text-muted-foreground">px</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<label className="text-sm font-medium">高度:</label>
|
||||
<Input
|
||||
type="number"
|
||||
value={resizeCanvasHeight}
|
||||
onChange={(e) => handleHeightChange(Number.parseInt(e.target.value) || 1)}
|
||||
className="w-24 h-8"
|
||||
min={1}
|
||||
max={10000}
|
||||
/>
|
||||
<span className="text-xs text-muted-foreground">px</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<label className="text-sm font-medium">背景:</label>
|
||||
<input
|
||||
type="color"
|
||||
value={resizeBackgroundColor}
|
||||
onChange={(e) => setResizeBackgroundColor(e.target.value)}
|
||||
disabled={resizeBackgroundTransparent}
|
||||
className="w-12 h-8 rounded border cursor-pointer disabled:opacity-50"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<label className="text-sm font-medium flex items-center gap-1">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={resizeBackgroundTransparent}
|
||||
onChange={(e) => setResizeBackgroundTransparent(e.target.checked)}
|
||||
className="w-4 h-4"
|
||||
/>
|
||||
透明
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 操作按钮 */}
|
||||
<div className="flex items-center gap-2 ml-auto">
|
||||
<Button
|
||||
variant="outline"
|
||||
@ -1248,18 +1253,18 @@ export function ImageAnnotator({ imageUrl, onConfirm, onCancel }: ImageAnnotator
|
||||
/* 尺寸调整模式 - 左右对比布局 */
|
||||
<>
|
||||
{/* 左侧：原图 */}
|
||||
<div className="flex flex-1 flex-col border-2 border-dashed border-border rounded-lg bg-muted/20 p-2 overflow-hidden">
|
||||
<div className="flex flex-col border-2 border-dashed border-border rounded-lg bg-muted/20 p-2 overflow-hidden" style={{ height: "570px" }}>
|
||||
<div className="mb-1 text-xs font-medium text-muted-foreground text-center">原图</div>
|
||||
<div className="flex-1 flex items-center justify-center overflow-auto min-h-0">
|
||||
<div className="flex-1 flex items-center justify-center overflow-auto min-h-0" style={{ height: "calc(570px - 2rem)" }}>
|
||||
{image && (
|
||||
<img
|
||||
src={image.src}
|
||||
alt="原图"
|
||||
className="max-w-full max-h-full rounded-lg shadow-lg"
|
||||
className="rounded-lg shadow-lg"
|
||||
style={{
|
||||
objectFit: "contain",
|
||||
maxHeight: "calc(570px - 2rem)",
|
||||
maxWidth: "100%",
|
||||
maxHeight: "100%",
|
||||
width: "auto",
|
||||
height: "auto"
|
||||
}}
|
||||
@ -1269,11 +1274,12 @@ export function ImageAnnotator({ imageUrl, onConfirm, onCancel }: ImageAnnotator
|
||||
</div>
|
||||
|
||||
{/* 右侧：尺寸调整预览画布 */}
|
||||
<div className="flex flex-1 flex-col border-2 border-dashed border-primary/50 rounded-lg bg-muted/30 p-2 overflow-hidden">
|
||||
<div className="flex flex-col border-2 border-dashed border-primary/50 rounded-lg bg-muted/30 p-2 overflow-hidden" style={{ width: "714px", height: "570px" }}>
|
||||
<div className="mb-1 text-xs font-medium text-muted-foreground text-center">调整尺寸</div>
|
||||
<div
|
||||
ref={resizeContainerRef}
|
||||
className="flex-1 flex items-center justify-center overflow-auto min-h-0"
|
||||
className="flex items-center justify-center overflow-auto"
|
||||
style={{ width: "100%", height: "calc(570px - 2rem)" }}
|
||||
onWheel={handleResizeImageWheel}
|
||||
>
|
||||
<div className="relative inline-block">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user