fix: 优化3D视角编辑器UI布局,修复控制按钮被遮挡问题

This commit is contained in:
Your Name 2026-01-11 11:43:05 +08:00
parent ea45b7fbc5
commit 1cd7289a36
2 changed files with 40 additions and 39 deletions

View File

@ -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>
{/* 右侧:预览区 (自适应) */}

View File

@ -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}>