diff --git a/components/angle-edit-dialog.tsx b/components/angle-edit-dialog.tsx
index 78d8aba..f0a1eba 100644
--- a/components/angle-edit-dialog.tsx
+++ b/components/angle-edit-dialog.tsx
@@ -6,15 +6,15 @@ import {
   DialogContent,
   DialogHeader,
   DialogTitle,
-  DialogDescription,
 } from "@/components/ui/dialog";
 import { Button } from "@/components/ui/button";
 import { Slider } from "@/components/ui/slider";
 import { Label } from "@/components/ui/label";
-import { Loader2, Download, Check, RotateCcw, Move3D, Sparkles } from "lucide-react";
+import { Loader2, Download, Check, RotateCcw, Move3D, Sparkles, X } from "lucide-react";
 import { toast } from "sonner";
 import { QwenCameraWidget, type CameraState } from "./qwen-camera-widget";
 import { cn } from "@/lib/utils";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 
 interface AngleEditDialogProps {
   open: boolean;
@@ -62,26 +62,39 @@ export function AngleEditDialog({
     elevation: 0,
     distance: 5,
   });
+  // 预览 Tab 状态：如果生成了结果，默认显示结果；否则显示原图
+  const [activeTab, setActiveTab] = useState<"original" | "result">("original");
 
   // 当对话框关闭时重置状态
   useEffect(() => {
     if (!open) {
       setResultUrl(null);
       setIsProcessing(false);
+      setActiveTab("original");
     }
   }, [open]);
 
+  // 当生成结果时，自动切换到结果 Tab
+  useEffect(() => {
+    if (resultUrl) {
+      setActiveTab("result");
+    }
+  }, [resultUrl]);
+
   // 处理相机状态变化
   const handleCameraStateChange = useCallback((state: CameraState) => {
     setCameraState(state);
     // 角度变化时清除之前的结果
-    setResultUrl(null);
-  }, []);
+    if (!isProcessing) {
+        setResultUrl(null);
+    }
+  }, [isProcessing]);
 
   // 生成新视角
   const handleGenerate = useCallback(async () => {
     setIsProcessing(true);
     setResultUrl(null);
+    setActiveTab("result"); // 切换到结果 Tab 显示加载状态
 
     try {
       const response = await fetch("/api/angle-edit", {
@@ -107,6 +120,7 @@ export function AngleEditDialog({
     } catch (error) {
       console.error("角度编辑失败:", error);
       toast.error(error instanceof Error ? error.message : "生成失败，请重试");
+      setActiveTab("original"); // 失败后切回原图
     } finally {
       setIsProcessing(false);
     }
@@ -151,45 +165,40 @@ export function AngleEditDialog({
       distance: 5,
     });
     setLoraScale(0.9);
+    setActiveTab("original");
   }, []);
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-5xl max-h-[90vh] overflow-hidden flex flex-col p-0 gap-0">
-        <DialogHeader className="px-6 py-4 border-b bg-muted/30">
-          <div className="flex items-center justify-between">
-            <div className="flex items-center gap-2">
-              <div className="p-2 bg-primary/10 rounded-lg">
-                <Move3D className="h-5 w-5 text-primary" />
-              </div>
-              <div>
-                <DialogTitle>多角度编辑</DialogTitle>
-                <DialogDescription className="mt-1">
-                  拖拽 3D 控制器中的彩色手柄调整相机角度，AI 将生成对应视角的图像
-                </DialogDescription>
-              </div>
+      <DialogContent className="max-w-4xl p-0 gap-0 overflow-hidden border-none shadow-2xl bg-background/95 backdrop-blur-xl">
+        {/* 紧凑标题栏 */}
+        <div className="flex items-center justify-between px-4 py-3 border-b bg-muted/20">
+          <div className="flex items-center gap-2">
+            <div className="p-1.5 bg-primary/10 rounded-md">
+              <Move3D className="h-4 w-4 text-primary" />
             </div>
+            <span className="font-semibold text-sm">3D 视角编辑器</span>
           </div>
-        </DialogHeader>
+          <Button variant="ghost" size="icon" className="h-8 w-8" onClick={() => onOpenChange(false)}>
+            <X className="h-4 w-4" />
+          </Button>
+        </div>
 
-        <div className="flex-1 overflow-y-auto p-6">
-          <div className="grid grid-cols-1 lg:grid-cols-12 gap-6 h-full">
-            {/* 左侧：3D 控制器 (占 5 列) */}
-            <div className="lg:col-span-5 space-y-4 flex flex-col">
-              <div className="flex-1 min-h-[400px]">
-                <QwenCameraWidget
-                  initialState={cameraState}
-                  imageUrl={imageUrl}
-                  onStateChange={handleCameraStateChange}
-                  className="h-full"
-                />
-              </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">
+              <QwenCameraWidget
+                initialState={cameraState}
+                imageUrl={imageUrl}
+                onStateChange={handleCameraStateChange}
+                className="h-[300px] mb-4"
+              />
 
-              {/* LoRA 强度控制 */}
-              <div className="rounded-lg border bg-card p-4 space-y-3 shadow-sm">
+              <div className="space-y-3 px-1">
                 <div className="flex justify-between items-center">
-                  <Label className="text-sm font-medium">变换强度</Label>
-                  <span className="text-xs font-mono bg-muted px-2 py-1 rounded">
+                  <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">
                     {(loraScale * 100).toFixed(0)}%
                   </span>
                 </div>
@@ -199,113 +208,29 @@ export function AngleEditDialog({
                   min={0.5}
                   max={1.0}
                   step={0.05}
-                  className="py-2"
+                  className="py-1"
                 />
-                <p className="text-xs text-muted-foreground leading-relaxed">
-                  强度越高角度变化越明显，越低则保留更多原图特征。建议 85-95%。
-                </p>
+                
+                <Button 
+                  variant="outline" 
+                  size="sm" 
+                  onClick={handleReset} 
+                  disabled={isProcessing}
+                  className="w-full h-8 text-xs mt-2"
+                >
+                  <RotateCcw className="h-3 w-3 mr-2" />
+                  重置参数
+                </Button>
               </div>
             </div>
-
-            {/* 右侧：图片预览 (占 7 列) */}
-            <div className="lg:col-span-7 flex flex-col gap-4 min-h-[500px]">
-              <div className="grid grid-rows-2 gap-4 flex-1 h-full">
-                {/* 原图 */}
-                <div className="relative rounded-xl border bg-muted/30 overflow-hidden group">
-                  <div className="absolute top-3 left-3 z-10 bg-background/80 backdrop-blur-sm px-2 py-1 rounded text-xs font-medium border shadow-sm">
-                    原图
-                  </div>
-                  <img
-                    src={imageUrl}
-                    alt="原图"
-                    className="w-full h-full object-contain p-4 transition-transform duration-300 group-hover:scale-[1.02]"
-                  />
-                </div>
-
-                {/* 结果图 */}
-                <div className={cn(
-                  "relative rounded-xl border overflow-hidden transition-all duration-300",
-                  resultUrl ? "bg-muted/30 border-primary/20 shadow-sm" : "bg-muted/10 border-dashed"
-                )}>
-                  <div className="absolute top-3 left-3 z-10 flex items-center gap-2">
-                    <div className={cn(
-                      "px-2 py-1 rounded text-xs font-medium border shadow-sm backdrop-blur-sm",
-                      resultUrl ? "bg-primary/10 text-primary border-primary/20" : "bg-background/80 text-muted-foreground"
-                    )}>
-                      生成结果
-                    </div>
-                    {resultUrl && (
-                      <span className="flex items-center gap-1 text-[10px] text-green-600 bg-green-50 px-1.5 py-0.5 rounded-full border border-green-100">
-                        <Check className="h-3 w-3" /> 完成
-                      </span>
-                    )}
-                  </div>
-                  
-                  <div className="w-full h-full flex items-center justify-center">
-                    {isProcessing ? (
-                      <div className="text-center space-y-4">
-                        <div className="relative">
-                          <div className="h-12 w-12 rounded-full border-4 border-primary/20 border-t-primary animate-spin mx-auto" />
-                          <div className="absolute inset-0 flex items-center justify-center">
-                            <Sparkles className="h-5 w-5 text-primary/50 animate-pulse" />
-                          </div>
-                        </div>
-                        <div className="space-y-1">
-                          <p className="text-sm font-medium text-foreground">正在生成新视角...</p>
-                          <p className="text-xs text-muted-foreground">预计需要 10-30 秒</p>
-                        </div>
-                      </div>
-                    ) : resultUrl ? (
-                      <img
-                        src={resultUrl}
-                        alt="生成结果"
-                        className="w-full h-full object-contain p-4 animate-in fade-in zoom-in-95 duration-300"
-                      />
-                    ) : (
-                      <div className="text-center text-muted-foreground p-8">
-                        <div className="bg-muted rounded-full p-4 w-fit mx-auto mb-4">
-                          <Move3D className="h-8 w-8 opacity-50" />
-                        </div>
-                        <p className="text-sm font-medium text-foreground">准备就绪</p>
-                        <p className="text-xs mt-1">拖拽左侧彩色手柄调整角度后点击生成</p>
-                      </div>
-                    )}
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        {/* 底部操作栏 */}
-        <div className="px-6 py-4 border-t bg-muted/30 flex justify-between items-center">
-          <Button 
-            variant="ghost" 
-            onClick={handleReset} 
-            disabled={isProcessing}
-            className="text-muted-foreground hover:text-foreground"
-          >
-            <RotateCcw className="h-4 w-4 mr-2" />
-            重置参数
-          </Button>
-
-          <div className="flex gap-3">
-            {resultUrl ? (
-              <>
-                <Button variant="outline" onClick={handleDownload}>
-                  <Download className="h-4 w-4 mr-2" />
-                  下载
-                </Button>
-                <Button onClick={handleUseImage} className="min-w-[120px]">
-                  <Check className="h-4 w-4 mr-2" />
-                  使用此图
-                </Button>
-              </>
-            ) : (
+            
+            {/* 生成按钮区 */}
+            <div className="p-4 border-t bg-background">
               <Button 
                 onClick={handleGenerate} 
                 disabled={isProcessing}
-                className="min-w-[140px]"
+                className="w-full shadow-md transition-all hover:scale-[1.02]"
+                size="lg"
               >
                 {isProcessing ? (
                   <>
@@ -319,7 +244,76 @@ export function AngleEditDialog({
                   </>
                 )}
               </Button>
-            )}
+            </div>
+          </div>
+
+          {/* 右侧：预览区 (自适应) */}
+          <div className="flex-1 flex flex-col bg-muted/5 p-4">
+            <Tabs value={activeTab} onValueChange={(v) => setActiveTab(v as any)} className="flex-1 flex flex-col">
+              <div className="flex items-center justify-between mb-4">
+                <TabsList className="h-8">
+                  <TabsTrigger value="original" className="text-xs h-7 px-3">原图</TabsTrigger>
+                  <TabsTrigger value="result" className="text-xs h-7 px-3" disabled={!resultUrl && !isProcessing}>
+                    生成结果
+                    {resultUrl && <span className="ml-1.5 w-1.5 h-1.5 rounded-full bg-green-500" />}
+                  </TabsTrigger>
+                </TabsList>
+                
+                {resultUrl && (
+                  <div className="flex gap-2">
+                    <Button variant="outline" size="sm" onClick={handleDownload} className="h-8 text-xs">
+                      <Download className="h-3 w-3 mr-1.5" />
+                      下载
+                    </Button>
+                    <Button size="sm" onClick={handleUseImage} className="h-8 text-xs">
+                      <Check className="h-3 w-3 mr-1.5" />
+                      使用
+                    </Button>
+                  </div>
+                )}
+              </div>
+
+              <div className="flex-1 relative rounded-lg border bg-background overflow-hidden shadow-inner">
+                {/* 原图 Tab */}
+                <TabsContent value="original" className="absolute inset-0 m-0 h-full w-full p-0">
+                  <div className="w-full h-full flex items-center justify-center p-4">
+                    <img
+                      src={imageUrl}
+                      alt="原图"
+                      className="max-w-full max-h-full object-contain"
+                    />
+                  </div>
+                </TabsContent>
+
+                {/* 结果 Tab */}
+                <TabsContent value="result" className="absolute inset-0 m-0 h-full w-full p-0">
+                  <div className="w-full h-full flex items-center justify-center bg-checkered p-4">
+                    {isProcessing ? (
+                      <div className="flex flex-col items-center gap-3">
+                        <div className="relative">
+                          <div className="h-10 w-10 rounded-full border-2 border-primary/20 border-t-primary animate-spin" />
+                          <div className="absolute inset-0 flex items-center justify-center">
+                            <Sparkles className="h-4 w-4 text-primary/50 animate-pulse" />
+                          </div>
+                        </div>
+                        <p className="text-xs text-muted-foreground animate-pulse">正在渲染新视角...</p>
+                      </div>
+                    ) : resultUrl ? (
+                      <img
+                        src={resultUrl}
+                        alt="生成结果"
+                        className="max-w-full max-h-full object-contain animate-in fade-in zoom-in-95 duration-300"
+                      />
+                    ) : (
+                      <div className="text-center text-muted-foreground">
+                        <Move3D className="h-8 w-8 mx-auto mb-2 opacity-20" />
+                        <p className="text-xs">暂无结果</p>
+                      </div>
+                    )}
+                  </div>
+                </TabsContent>
+              </div>
+            </Tabs>
           </div>
         </div>
       </DialogContent>
@@ -328,3 +322,4 @@ export function AngleEditDialog({
 }
 
 export default AngleEditDialog;
+
diff --git a/components/qwen-camera-widget.tsx b/components/qwen-camera-widget.tsx
index cfe2e02..72fd1bd 100644
--- a/components/qwen-camera-widget.tsx
+++ b/components/qwen-camera-widget.tsx
@@ -546,9 +546,9 @@ export function QwenCameraWidget({
   };
 
   return (
-    <div className={cn("flex flex-col rounded-xl border bg-card text-card-foreground shadow-sm overflow-hidden", className)} ref={containerRef}>
+    <div className={cn("flex flex-col bg-transparent", className)} ref={containerRef}>
       {/* 3D 画布 */}
-      <div className="relative w-full aspect-square bg-muted/30">
+      <div className="relative w-full aspect-square bg-muted/20 rounded-lg overflow-hidden border">
         <canvas
           ref={canvasRef}
           className="w-full h-full block cursor-grab active:cursor-grabbing"
@@ -562,87 +562,71 @@ export function QwenCameraWidget({
         />
         
         {/* 提示词浮层 */}
-        <div className="absolute top-4 left-4 right-4 bg-background/80 backdrop-blur-md border rounded-md px-3 py-2 text-xs font-mono text-center shadow-sm select-all">
+        <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">
           {generatePrompt(state)}
         </div>
       </div>
       
       {/* 控制面板 */}
-      <div className="p-4 space-y-4 bg-card">
-        <div className="grid grid-cols-3 gap-3">
-          <div className="space-y-1.5">
-            <label className="text-[10px] font-semibold text-muted-foreground uppercase tracking-wider pl-1">水平角度</label>
+      <div className="mt-3 space-y-3">
+        <div className="grid grid-cols-1 gap-2.5">
+          <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}>
-              <SelectTrigger className="h-8 text-xs border-primary/20 focus:ring-primary/20">
+              <SelectTrigger className="h-6 text-[10px] border-primary/20 focus:ring-primary/20 min-w-0">
                 <SelectValue />
               </SelectTrigger>
               <SelectContent>
                 {AZIMUTH_OPTIONS.map(opt => (
-                  <SelectItem key={opt.value} value={opt.value.toString()} className="text-xs">
+                  <SelectItem key={opt.value} value={opt.value.toString()} className="text-[10px]">
                     {opt.label}
                   </SelectItem>
                 ))}
               </SelectContent>
             </Select>
-            <div className="text-center">
-              <Badge variant="outline" className="text-[10px] font-mono text-primary border-primary/30 bg-primary/5">
-                {Math.round(state.azimuth)}°
-              </Badge>
-            </div>
+            <Badge variant="outline" className="h-6 px-1.5 text-[10px] font-mono text-primary border-primary/30 bg-primary/5 min-w-[36px] justify-center">
+              {Math.round(state.azimuth)}°
+            </Badge>
           </div>
 
-          <div className="space-y-1.5">
-            <label className="text-[10px] font-semibold text-muted-foreground uppercase tracking-wider pl-1">垂直角度</label>
+          <div className="flex items-center gap-2">
+            <label className="text-[10px] font-semibold text-muted-foreground w-8">垂直</label>
             <Select value={findClosestElevation(state.elevation)} onValueChange={handleElevationChange}>
-              <SelectTrigger className="h-8 text-xs border-[#00FFD0]/30 focus:ring-[#00FFD0]/20">
+              <SelectTrigger className="h-6 text-[10px] border-[#00FFD0]/30 focus:ring-[#00FFD0]/20 min-w-0">
                 <SelectValue />
               </SelectTrigger>
               <SelectContent>
                 {ELEVATION_OPTIONS.map(opt => (
-                  <SelectItem key={opt.value} value={opt.value.toString()} className="text-xs">
+                  <SelectItem key={opt.value} value={opt.value.toString()} className="text-[10px]">
                     {opt.label}
                   </SelectItem>
                 ))}
               </SelectContent>
             </Select>
-            <div className="text-center">
-              <Badge variant="outline" className="text-[10px] font-mono text-[#00b894] border-[#00b894]/30 bg-[#00b894]/5">
-                {Math.round(state.elevation)}°
-              </Badge>
-            </div>
+            <Badge variant="outline" className="h-6 px-1.5 text-[10px] font-mono text-[#00b894] border-[#00b894]/30 bg-[#00b894]/5 min-w-[36px] justify-center">
+              {Math.round(state.elevation)}°
+            </Badge>
           </div>
 
-          <div className="space-y-1.5">
-            <label className="text-[10px] font-semibold text-muted-foreground uppercase tracking-wider pl-1">距离</label>
+          <div className="flex items-center gap-2">
+            <label className="text-[10px] font-semibold text-muted-foreground w-8">距离</label>
             <Select value={findClosestDistance(state.distance)} onValueChange={handleDistanceChange}>
-              <SelectTrigger className="h-8 text-xs border-[#FFB800]/30 focus:ring-[#FFB800]/20">
+              <SelectTrigger className="h-6 text-[10px] border-[#FFB800]/30 focus:ring-[#FFB800]/20 min-w-0">
                 <SelectValue />
               </SelectTrigger>
               <SelectContent>
                 {DISTANCE_OPTIONS.map(opt => (
-                  <SelectItem key={opt.value} value={opt.value.toString()} className="text-xs">
+                  <SelectItem key={opt.value} value={opt.value.toString()} className="text-[10px]">
                     {opt.label}
                   </SelectItem>
                 ))}
               </SelectContent>
             </Select>
-            <div className="text-center">
-              <Badge variant="outline" className="text-[10px] font-mono text-[#d49a00] border-[#d49a00]/30 bg-[#d49a00]/5">
-                {state.distance.toFixed(1)}
-              </Badge>
-            </div>
+            <Badge variant="outline" className="h-6 px-1.5 text-[10px] font-mono text-[#d49a00] border-[#d49a00]/30 bg-[#d49a00]/5 min-w-[36px] justify-center">
+              {state.distance.toFixed(1)}
+            </Badge>
           </div>
         </div>
-
-        <Button 
-          variant="secondary" 
-          size="sm" 
-          className="w-full h-8 text-xs text-muted-foreground hover:text-foreground"
-          onClick={handleReset}
-        >
-          <RotateCcw className="h-3 w-3 mr-2" />
-          重置视角
-        </Button>
       </div>
     </div>
   );