lunanting/ai-chatbot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): remove transparency from 3d angle editor dialog
Some checks failed
Lint / build (20) (push) Has been cancelled
Details
Playwright Tests / test (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Your Name 2026-03-06 08:42:52 +08:00
parent 702eedd6f5
commit 88f033f0c0
2 changed files with 11 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
components/angle-edit-dialog.tsx
View File

@ -188,7 +188,7 @@ export function AngleEditDialog({
return (
<Dialog open={open} onOpenChange={handleOpenChange}>
<DialogContent
className="max-w-4xl p-0 gap-0 overflow-hidden border border-border/40 shadow-2xl bg-background/95 backdrop-blur-xl sm:rounded-[20px]"
className="max-w-4xl p-0 gap-0 overflow-hidden border border-border shadow-2xl bg-background sm:rounded-[20px]"
onPointerDownCapture={stopDialogEventCapture}
onPointerMoveCapture={stopDialogEventCapture}
onPointerUpCapture={stopDialogEventCapture}
@ -214,7 +214,7 @@ export function AngleEditDialog({
}}
>
{/* 紧凑标题栏 */}
<div className="flex items-center justify-between px-6 py-4 border-b border-border/10">
<div className="flex items-center justify-between px-6 py-4 border-b border-border">
<div className="flex items-center gap-3">
<div className="p-2 bg-primary/10 rounded-lg">
<Move3D className="h-4 w-4 text-primary" />
@ -225,7 +225,7 @@ export function AngleEditDialog({
<div className="flex h-[550px]">
{/* 左侧：3D 控制区 (固定宽度 340px) */}
<div className="w-[340px] flex flex-col border-r border-border/10 bg-muted/5">
<div className="w-[340px] flex flex-col border-r border-border bg-background">
{/* 上部内容区域 - 可伸缩 */}
<div className="flex-1 flex flex-col p-4 overflow-hidden">
{/* QwenCameraWidget - 包含 Canvas 和 3个角度选择器 */}
@ -292,7 +292,7 @@ export function AngleEditDialog({
</div>
{/* 右侧：预览区 (自适应) */}
<div className="flex-1 flex flex-col bg-muted/5 p-4">
<div className="flex-1 flex flex-col bg-background 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">
@ -350,7 +350,7 @@ export function AngleEditDialog({
className="max-w-full max-h-full object-contain animate-in fade-in zoom-in-95 duration-300"
/>
<div className="absolute bottom-4 right-4 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
<Button onClick={handleDownload} size="sm" variant="secondary" className="shadow-lg backdrop-blur-md bg-background/80 hover:bg-background/90">
<Button onClick={handleDownload} size="sm" variant="secondary" className="shadow-lg bg-background hover:bg-muted">
<Download className="h-4 w-4 mr-2" />
下载图片
</Button>

12
components/qwen-camera-widget.tsx
View File

@ -173,8 +173,8 @@ export function QwenCameraWidget({
// 场景
const scene = new THREE.Scene();
// 移除背景色，使用透明背景
// scene.background = new THREE.Color(0x0a0a0f);
// 固定为不透明背景，避免弹窗出现透底
scene.background = new THREE.Color(0x111827);
sceneRef.current = scene;
// 相机
@ -190,7 +190,7 @@ export function QwenCameraWidget({
const renderer = new THREE.WebGLRenderer({
canvas: canvasRef.current,
antialias: true,
alpha: true, // 启用透明
alpha: false,
});
renderer.setSize(width, height);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
@ -590,9 +590,9 @@ export function QwenCameraWidget({
};
return (
<div className={cn("flex flex-col bg-transparent h-full", className)} ref={containerRef}>
<div className={cn("flex flex-col bg-background h-full", className)} ref={containerRef}>
{/* 3D 画布 - 占据剩余空间 */}
<div className="relative flex-1 min-h-0 bg-muted/20 rounded-lg overflow-hidden border">
<div className="relative flex-1 min-h-0 bg-muted rounded-lg overflow-hidden border">
<canvas
ref={canvasRef}
className="w-full h-full block cursor-grab active:cursor-grabbing touch-none select-none"
@ -608,7 +608,7 @@ export function QwenCameraWidget({
/>
{/* 提示词浮层 - 放在底部 */}
<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">
<div className="absolute bottom-2 left-2 right-2 bg-background border rounded px-2 py-1 text-[10px] font-mono text-center shadow-sm select-all truncate">
{generatePrompt(state)}
</div>
</div>