From 2c29c2ef08c505bc1ee31136ed0c1b5046df08ff Mon Sep 17 00:00:00 2001
From: Your Name <your.email@example.com>
Date: Mon, 29 Dec 2025 23:59:51 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=B0=BA=E5=AF=B8=E8=B0=83?=
 =?UTF-8?q?=E6=95=B4=E7=95=8C=E9=9D=A2=E5=B8=83=E5=B1=80=E5=92=8C=E5=B0=BA?=
 =?UTF-8?q?=E5=AF=B8=E8=AE=BE=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 将宽高设置工具栏移动到选择比例工具栏后面，统一在一行显示
- 左侧原图预览固定高度570px，按比例显示
- 右侧画布线框固定尺寸714x570px，减少上下留白
- 优化工具栏布局，所有控制项在一行显示，更紧凑
---
 components/image-annotator.tsx | 172 +++++++++++++++++----------------
 1 file changed, 89 insertions(+), 83 deletions(-)

diff --git a/components/image-annotator.tsx b/components/image-annotator.tsx
index d4dc37e..1662c91 100644
--- a/components/image-annotator.tsx
+++ b/components/image-annotator.tsx
@@ -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">