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

refactor: tighten AI-CAD viewport layout
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-04-06 22:10:51 +08:00
parent 0414983f64
commit 00464f518f
1 changed files with 40 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
components/ai-cad/ai-cad-workbench.tsx
View File

@ -2103,15 +2103,15 @@ function AiCadToolbarGroup({
return ( return (
<div <div
className={cn( className={cn(
"flex flex-wrap items-center gap-2 border border-[#e6e0d3] bg-white px-2 py-1", "flex flex-wrap items-center gap-1.5 border border-[#e6e0d3] bg-white px-1.5 py-1",
className className
)} )}
> >
<span className="pl-1 text-[#8a8272] text-[10px] uppercase tracking-[0.18em]"> <span className="pl-0.5 text-[#8a8272] text-[10px] uppercase tracking-[0.18em]">
{label} {label}
</span> </span>
<Separator className="h-5 bg-[#e7e1d4]" orientation="vertical" /> <Separator className="h-4 bg-[#e7e1d4]" orientation="vertical" />
<div className="flex flex-wrap items-center gap-1.5">{children}</div> <div className="flex flex-wrap items-center gap-1">{children}</div>
</div> </div>
); );
} }
@ -3674,23 +3674,23 @@ export function AiCadWorkbench() {
</div> </div>
<div className="flex min-h-0 flex-1 flex-col overflow-hidden"> <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
<div className="border-[#e6e0d3] border-b bg-white px-3 py-2"> <div className="border-[#e6e0d3] border-b bg-white px-3 py-1.5">
<div className="flex flex-wrap items-center justify-between gap-2"> <div className="flex flex-wrap items-center justify-between gap-1.5">
<div className="flex flex-wrap items-center gap-2"> <div className="flex flex-wrap items-center gap-1.5">
<button <button
className="inline-flex h-8 items-center gap-2 rounded-[9px] border border-[#e2dccf] bg-white px-3 text-[#383329] text-[12px] transition hover:bg-[#faf7ef]" className="inline-flex h-7 items-center gap-1.5 rounded-[8px] border border-[#e2dccf] bg-white px-2.5 text-[#383329] text-[12px] transition hover:bg-[#faf7ef]"
type="button" type="button"
> >
<WandSparkles className="h-4 w-4 text-[#31df86]" /> <WandSparkles className="h-3.5 w-3.5 text-[#31df86]" />
Start Design Start Design
</button> </button>
<Badge className="rounded-full border-[#e2dccf] bg-white px-2.5 py-1 text-[#5f594d] text-[11px]"> <Badge className="rounded-full border-[#e2dccf] bg-white px-2 py-0.5 text-[#5f594d] text-[10px]">
{activeVersion {activeVersion
? `Focus V${activeVersion.versionNumber}` ? `Focus V${activeVersion.versionNumber}`
: "Ready for first pass"} : "Ready for first pass"}
</Badge> </Badge>
</div> </div>
<div className="flex flex-wrap items-center gap-3 text-[#7f7768] text-[11px]"> <div className="flex flex-wrap items-center gap-2.5 text-[#7f7768] text-[10px]">
<span <span
className={cn( className={cn(
"inline-flex items-center gap-1.5", "inline-flex items-center gap-1.5",
@ -3719,11 +3719,11 @@ export function AiCadWorkbench() {
</div> </div>
</div> </div>
<div className="mt-1.5 flex flex-wrap items-center gap-2"> <div className="mt-1 flex flex-wrap items-center gap-1.5">
<AiCadToolbarGroup label="Mode"> <AiCadToolbarGroup label="Mode">
<button <button
className={cn( className={cn(
"inline-flex h-8 items-center gap-2 rounded-[8px] border px-2.5 text-[12px] transition-all duration-150 ease-out", "inline-flex h-7 items-center gap-1.5 rounded-[7px] border px-2 text-[12px] transition-all duration-150 ease-out",
activeResultTab === "preview" activeResultTab === "preview"
? "border-[#bfd9c9] bg-[#ecfbf2] text-[#173225]" ? "border-[#bfd9c9] bg-[#ecfbf2] text-[#173225]"
: "border-[#ddd7ca] bg-white text-[#5f594d] hover:bg-[#faf7ef]" : "border-[#ddd7ca] bg-white text-[#5f594d] hover:bg-[#faf7ef]"
@ -3739,7 +3739,7 @@ export function AiCadWorkbench() {
</button> </button>
<button <button
className={cn( className={cn(
"inline-flex h-8 items-center gap-2 rounded-[8px] border px-2.5 text-[12px] transition-all duration-150 ease-out", "inline-flex h-7 items-center gap-1.5 rounded-[7px] border px-2 text-[12px] transition-all duration-150 ease-out",
activeResultTab === "code" activeResultTab === "code"
? "border-[#bfd9c9] bg-[#ecfbf2] text-[#173225]" ? "border-[#bfd9c9] bg-[#ecfbf2] text-[#173225]"
: "border-[#ddd7ca] bg-white text-[#5f594d] hover:bg-[#faf7ef]" : "border-[#ddd7ca] bg-white text-[#5f594d] hover:bg-[#faf7ef]"
@ -3758,7 +3758,7 @@ export function AiCadWorkbench() {
<AiCadToolbarGroup label="Display"> <AiCadToolbarGroup label="Display">
<button <button
className={cn( className={cn(
"inline-flex h-8 w-8 items-center justify-center rounded-[8px] border transition-all duration-150 ease-out", "inline-flex h-7 w-7 items-center justify-center rounded-[7px] border transition-all duration-150 ease-out",
viewerSettings.showGrid viewerSettings.showGrid
? "border-[#bfd9c9] bg-[#ecfbf2] text-[#173225]" ? "border-[#bfd9c9] bg-[#ecfbf2] text-[#173225]"
: "border-[#ddd7ca] bg-white text-[#5f594d] hover:bg-[#faf7ef]" : "border-[#ddd7ca] bg-white text-[#5f594d] hover:bg-[#faf7ef]"
@ -3776,7 +3776,7 @@ export function AiCadWorkbench() {
</button> </button>
<button <button
className={cn( className={cn(
"inline-flex h-8 w-8 items-center justify-center rounded-[8px] border transition-all duration-150 ease-out", "inline-flex h-7 w-7 items-center justify-center rounded-[7px] border transition-all duration-150 ease-out",
viewerSettings.autoRotate viewerSettings.autoRotate
? "border-[#bfd9c9] bg-[#ecfbf2] text-[#173225]" ? "border-[#bfd9c9] bg-[#ecfbf2] text-[#173225]"
: "border-[#ddd7ca] bg-white text-[#5f594d] hover:bg-[#faf7ef]" : "border-[#ddd7ca] bg-white text-[#5f594d] hover:bg-[#faf7ef]"
@ -3794,7 +3794,7 @@ export function AiCadWorkbench() {
</button> </button>
<button <button
className={cn( className={cn(
"inline-flex h-8 w-8 items-center justify-center rounded-[8px] border transition-all duration-150 ease-out", "inline-flex h-7 w-7 items-center justify-center rounded-[7px] border transition-all duration-150 ease-out",
viewerSettings.wireframe viewerSettings.wireframe
? "border-[#bfd9c9] bg-[#ecfbf2] text-[#173225]" ? "border-[#bfd9c9] bg-[#ecfbf2] text-[#173225]"
: "border-[#ddd7ca] bg-white text-[#5f594d] hover:bg-[#faf7ef]" : "border-[#ddd7ca] bg-white text-[#5f594d] hover:bg-[#faf7ef]"
@ -3813,16 +3813,16 @@ export function AiCadWorkbench() {
</AiCadToolbarGroup> </AiCadToolbarGroup>
<AiCadToolbarGroup className="lg:ml-auto" label="Session"> <AiCadToolbarGroup className="lg:ml-auto" label="Session">
<Badge className="rounded-md border-[#ddd7ca] bg-white px-2 py-0.5 text-[#5f594d] text-[11px]"> <Badge className="rounded-md border-[#ddd7ca] bg-white px-1.5 py-0.5 text-[#5f594d] text-[10px]">
{generationProvider === "kittycad-cad" {generationProvider === "kittycad-cad"
? "Zoo CAD" ? "Zoo CAD"
: "Tripo3D"} : "Tripo3D"}
</Badge> </Badge>
<Badge className="rounded-md border-[#ddd7ca] bg-white px-2 py-0.5 text-[#5f594d] text-[11px]"> <Badge className="rounded-md border-[#ddd7ca] bg-white px-1.5 py-0.5 text-[#5f594d] text-[10px]">
{viewerSettings.envPreset} {viewerSettings.envPreset}
</Badge> </Badge>
{activeVersion ? ( {activeVersion ? (
<Badge className="rounded-md border-[#ddd7ca] bg-white px-2 py-0.5 text-[#5f594d] text-[11px]"> <Badge className="rounded-md border-[#ddd7ca] bg-white px-1.5 py-0.5 text-[#5f594d] text-[10px]">
V{activeVersion.versionNumber} V{activeVersion.versionNumber}
</Badge> </Badge>
) : null} ) : null}
@ -3833,7 +3833,7 @@ export function AiCadWorkbench() {
<div className="min-h-0 flex-1 overflow-hidden bg-white"> <div className="min-h-0 flex-1 overflow-hidden bg-white">
<PanelGroup <PanelGroup
autoSaveId={`ai-cad-panel-layout:${panelDirection}`} autoSaveId={`ai-cad-panel-layout:${panelDirection}`}
className="flex h-full min-h-[720px]" className="flex h-full min-h-0"
direction={panelDirection} direction={panelDirection}
> >
<Panel <Panel
@ -4889,22 +4889,28 @@ export function AiCadWorkbench() {
<div className="flex h-full min-h-0 flex-col bg-white text-[#201c16]"> <div className="flex h-full min-h-0 flex-col bg-white text-[#201c16]">
<div <div
className={cn( className={cn(
"flex items-center justify-between border-[#e6e0d3] border-b px-4 py-3", "flex min-h-10 items-center justify-between border-[#e6e0d3] border-b px-4 py-2",
!activeVersion && "min-h-12" !activeVersion && "min-h-10"
)} )}
> >
<div className="flex items-start justify-between gap-4"> <div className="flex min-w-0 items-center gap-2">
<div> <Orbit className="h-4 w-4 text-[#6f695d]" />
<div className="flex items-center gap-2 font-medium text-[15px]"> <div className="font-medium text-[15px]">
<Orbit className="h-4 w-4 text-[#6f695d]" /> {activeVersion ? "建模画布" : "Canvas"}
{activeVersion ? "建模画布" : "Canvas"}
</div>
<div className="mt-1 text-[#7f7768] text-[12px]">
{activeVersion
? "Preview-first canvas for the active model."
: "The center canvas stays focused on the current model."}
</div>
</div> </div>
{activeVersion ? null : (
<div className="truncate text-[#8b8375] text-[12px]">
The center canvas stays focused on the current
model.
</div>
)}
</div>
<div className="flex items-center gap-2">
{activeVersion ? (
<div className="text-[#8b8375] text-[11px]">
Preview-first canvas
</div>
) : null}
{activeVersion ? ( {activeVersion ? (
<Badge className="rounded-md border-[#ddd7ca] bg-white text-[#5f594d]"> <Badge className="rounded-md border-[#ddd7ca] bg-white text-[#5f594d]">
V{activeVersion.versionNumber} V{activeVersion.versionNumber}