From 1cd7289a361768b1df4e0d225b00d4fdba5c891b Mon Sep 17 00:00:00 2001
From: Your Name <your.email@example.com>
Date: Sun, 11 Jan 2026 11:43:05 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BC=98=E5=8C=963D=E8=A7=86=E8=A7=92?=
 =?UTF-8?q?=E7=BC=96=E8=BE=91=E5=99=A8UI=E5=B8=83=E5=B1=80=EF=BC=8C?=
 =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E6=8E=A7=E5=88=B6=E6=8C=89=E9=92=AE=E8=A2=AB?=
 =?UTF-8?q?=E9=81=AE=E6=8C=A1=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/angle-edit-dialog.tsx  | 67 ++++++++++++++++---------------
 components/qwen-camera-widget.tsx | 12 +++---
 2 files changed, 40 insertions(+), 39 deletions(-)

diff --git a/components/angle-edit-dialog.tsx b/components/angle-edit-dialog.tsx
index f0a1eba..ff791a5 100644
--- a/components/angle-edit-dialog.tsx
+++ b/components/angle-edit-dialog.tsx
@@ -184,18 +184,20 @@ export function AngleEditDialog({
           </Button>
         </div>
 
-        <div className="flex h-[500px]">
-          {/* 左侧：3D 控制区 (固定宽度 320px) */}
-          <div className="w-[320px] flex flex-col border-r bg-muted/10">
-            <div className="flex-1 p-4 overflow-y-auto">
+        <div className="flex h-[480px]">
+          {/* 左侧：3D 控制区 (固定宽度 300px) */}
+          <div className="w-[300px] flex flex-col border-r bg-muted/10">
+            {/* 内容区域 */}
+            <div className="flex-1 flex flex-col p-3 gap-3">
+              {/* QwenCameraWidget - 包含 Canvas 和 3个角度选择器 */}
               <QwenCameraWidget
                 initialState={cameraState}
                 imageUrl={imageUrl}
                 onStateChange={handleCameraStateChange}
-                className="h-[300px] mb-4"
               />
 
-              <div className="space-y-3 px-1">
+              {/* 变换强度控件 */}
+              <div className="space-y-2 pt-2 border-t border-dashed">
                 <div className="flex justify-between items-center">
                   <Label className="text-xs font-medium text-muted-foreground">变换强度</Label>
                   <span className="text-[10px] font-mono bg-muted px-1.5 py-0.5 rounded text-muted-foreground">
@@ -208,43 +210,42 @@ export function AngleEditDialog({
                   min={0.5}
                   max={1.0}
                   step={0.05}
-                  className="py-1"
+                  className="py-0.5"
                 />
-                
+              </div>
+
+              {/* 操作按钮 */}
+              <div className="flex gap-2 mt-auto">
                 <Button 
                   variant="outline" 
                   size="sm" 
                   onClick={handleReset} 
                   disabled={isProcessing}
-                  className="w-full h-8 text-xs mt-2"
+                  className="h-9 text-xs"
                 >
-                  <RotateCcw className="h-3 w-3 mr-2" />
-                  重置参数
+                  <RotateCcw className="h-3 w-3 mr-1" />
+                  重置
+                </Button>
+                <Button 
+                  onClick={handleGenerate} 
+                  disabled={isProcessing}
+                  className="flex-1 h-9 shadow-sm"
+                  size="sm"
+                >
+                  {isProcessing ? (
+                    <>
+                      <Loader2 className="h-3.5 w-3.5 mr-1.5 animate-spin" />
+                      生成中...
+                    </>
+                  ) : (
+                    <>
+                      <Sparkles className="h-3.5 w-3.5 mr-1.5" />
+                      生成新视角
+                    </>
+                  )}
                 </Button>
               </div>
             </div>
-            
-            {/* 生成按钮区 */}
-            <div className="p-4 border-t bg-background">
-              <Button 
-                onClick={handleGenerate} 
-                disabled={isProcessing}
-                className="w-full shadow-md transition-all hover:scale-[1.02]"
-                size="lg"
-              >
-                {isProcessing ? (
-                  <>
-                    <Loader2 className="h-4 w-4 mr-2 animate-spin" />
-                    生成中...
-                  </>
-                ) : (
-                  <>
-                    <Sparkles className="h-4 w-4 mr-2" />
-                    生成新视角
-                  </>
-                )}
-              </Button>
-            </div>
           </div>
 
           {/* 右侧：预览区 (自适应) */}
diff --git a/components/qwen-camera-widget.tsx b/components/qwen-camera-widget.tsx
index ec5a889..680b182 100644
--- a/components/qwen-camera-widget.tsx
+++ b/components/qwen-camera-widget.tsx
@@ -562,8 +562,8 @@ export function QwenCameraWidget({
 
   return (
     <div className={cn("flex flex-col bg-transparent", className)} ref={containerRef}>
-      {/* 3D 画布 */}
-      <div className="relative w-full aspect-square bg-muted/20 rounded-lg overflow-hidden border">
+      {/* 3D 画布 - 固定高度 */}
+      <div className="relative w-full h-[200px] bg-muted/20 rounded-lg overflow-hidden border">
         <canvas
           ref={canvasRef}
           className="w-full h-full block cursor-grab active:cursor-grabbing"
@@ -576,15 +576,15 @@ export function QwenCameraWidget({
           onTouchEnd={handlePointerUp}
         />
         
-        {/* 提示词浮层 */}
-        <div className="absolute top-2 left-2 right-2 bg-background/80 backdrop-blur-md border rounded px-2 py-1.5 text-[10px] font-mono text-center shadow-sm select-all opacity-70 hover:opacity-100 transition-opacity truncate">
+        {/* 提示词浮层 - 放在底部 */}
+        <div className="absolute bottom-2 left-2 right-2 bg-background/80 backdrop-blur-md border rounded px-2 py-1 text-[10px] font-mono text-center shadow-sm select-all opacity-70 hover:opacity-100 transition-opacity truncate">
           {generatePrompt(state)}
         </div>
       </div>
       
       {/* 控制面板 */}
-      <div className="mt-3 space-y-3">
-        <div className="grid grid-cols-1 gap-2.5">
+      <div className="mt-2 space-y-1.5">
+        <div className="flex flex-col gap-1">
           <div className="flex items-center gap-2">
             <label className="text-[10px] font-semibold text-muted-foreground w-8">水平</label>
             <Select value={findClosestAzimuth(state.azimuth)} onValueChange={handleAzimuthChange}>