fix: 优化3D视角编辑器UI布局,修复控制按钮被遮挡问题
This commit is contained in:
parent
ea45b7fbc5
commit
1cd7289a36
@ -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>
|
||||
|
||||
{/* 右侧:预览区 (自适应) */}
|
||||
|
||||
@ -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}>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user