tune realtime canvas panel sizing

components/canvas/RealtimeCanvasDialog.tsx

@@ -2436,7 +2436,7 @@ export function RealtimeCanvasDialog({
   }, [clearPreviewCanvas, resetCanvas]);
 
   const compactToolButtonClass =
-    "h-10 w-10 rounded-[18px] text-zinc-600 transition hover:bg-zinc-100 hover:text-zinc-900";
+    "h-9 w-9 rounded-[16px] text-zinc-600 transition hover:bg-zinc-100 hover:text-zinc-900";
   const compactToolButtonActiveClass = "bg-black text-white hover:bg-black hover:text-white";
   const currentModeLabel =
     brushMode === "select"
@@ -3059,10 +3059,10 @@ export function RealtimeCanvasDialog({
           className="hidden"
           onChange={handleSketchUpload}
         />
-        <div className="absolute bottom-5 left-1/2 z-30 flex w-[min(1100px,calc(100vw-2rem))] -translate-x-1/2 flex-col items-center gap-3 pointer-events-none">
+        <div className="absolute bottom-4 left-1/2 z-30 flex w-[min(460px,calc(100vw-2rem))] -translate-x-1/2 flex-col items-center gap-2.5 pointer-events-none">
           <TooltipProvider delayDuration={120}>
             <div className="pointer-events-auto flex max-w-full items-center gap-2 overflow-x-auto [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
-              <div className="flex shrink-0 items-center gap-1 rounded-[28px] border border-black/10 bg-white/94 px-2 py-2 shadow-[0_14px_40px_rgba(15,23,42,0.14)]">
+              <div className="flex shrink-0 items-center gap-1 rounded-[24px] border border-black/10 bg-white/94 px-1.5 py-1.5 shadow-[0_12px_32px_rgba(15,23,42,0.12)]">
                 <Tooltip>
                   <TooltipTrigger asChild>
                     <Button
@@ -3137,13 +3137,13 @@ export function RealtimeCanvasDialog({
                         </Button>
                       </PopoverTrigger>
                     </TooltipTrigger>
-                    <PopoverContent className="w-[220px] rounded-[20px] border-black/10 bg-white/95 p-3 shadow-[0_16px_44px_rgba(15,23,42,0.14)]">
+                    <PopoverContent className="w-[220px] rounded-[18px] border-black/10 bg-white/95 p-3 shadow-[0_14px_36px_rgba(15,23,42,0.14)]">
                       <div className="mb-2 text-xs font-medium text-zinc-500">形状工具</div>
                       <div className="grid grid-cols-3 gap-2">
                         <Button
                           type="button"
                           variant="ghost"
-                          className={cn("h-12 rounded-2xl", brushMode === "rect" && "bg-black text-white hover:bg-black")}
+                          className={cn("h-10 rounded-xl", brushMode === "rect" && "bg-black text-white hover:bg-black")}
                           onClick={() => {
                             setSelectedLayerId(DRAW_LAYER_ID);
                             setBrushMode("rect");
@@ -3154,7 +3154,7 @@ export function RealtimeCanvasDialog({
                         <Button
                           type="button"
                           variant="ghost"
-                          className={cn("h-12 rounded-2xl", brushMode === "circle" && "bg-black text-white hover:bg-black")}
+                          className={cn("h-10 rounded-xl", brushMode === "circle" && "bg-black text-white hover:bg-black")}
                           onClick={() => {
                             setSelectedLayerId(DRAW_LAYER_ID);
                             setBrushMode("circle");
@@ -3165,7 +3165,7 @@ export function RealtimeCanvasDialog({
                         <Button
                           type="button"
                           variant="ghost"
-                          className={cn("h-12 rounded-2xl", brushMode === "line" && "bg-black text-white hover:bg-black")}
+                          className={cn("h-10 rounded-xl", brushMode === "line" && "bg-black text-white hover:bg-black")}
                           onClick={() => {
                             setSelectedLayerId(DRAW_LAYER_ID);
                             setBrushMode("line");
@@ -3183,7 +3183,7 @@ export function RealtimeCanvasDialog({
                 </Tooltip>
               </div>
 
-              <div className="flex shrink-0 items-center gap-1 rounded-[28px] border border-black/10 bg-white/94 px-2 py-2 shadow-[0_14px_40px_rgba(15,23,42,0.14)]">
+              <div className="flex shrink-0 items-center gap-1 rounded-[24px] border border-black/10 bg-white/94 px-1.5 py-1.5 shadow-[0_12px_32px_rgba(15,23,42,0.12)]">
                 <Tooltip>
                   <Popover>
                     <TooltipTrigger asChild>
@@ -3198,13 +3198,13 @@ export function RealtimeCanvasDialog({
                         </Button>
                       </PopoverTrigger>
                     </TooltipTrigger>
-                    <PopoverContent className="w-[260px] rounded-[20px] border-black/10 bg-white/95 p-4 shadow-[0_16px_44px_rgba(15,23,42,0.14)]">
+                    <PopoverContent className="w-[250px] rounded-[18px] border-black/10 bg-white/95 p-4 shadow-[0_14px_36px_rgba(15,23,42,0.14)]">
                       <div className="space-y-4">
                         <div className="space-y-2">
                           <div className="text-xs font-medium text-zinc-500">颜色</div>
                           <button
                             type="button"
-                            className="flex h-11 w-full items-center justify-between rounded-2xl border border-black/10 bg-white px-3 text-sm font-medium text-zinc-700"
+                            className="flex h-10 w-full items-center justify-between rounded-xl border border-black/10 bg-white px-3 text-sm font-medium text-zinc-700"
                             onClick={() => colorInputRef.current?.click()}
                           >
                             <span>选择颜色</span>
@@ -3249,7 +3249,7 @@ export function RealtimeCanvasDialog({
                 </Tooltip>
               </div>
 
-              <div className="flex shrink-0 items-center gap-1 rounded-[28px] border border-black/10 bg-white/94 px-2 py-2 shadow-[0_14px_40px_rgba(15,23,42,0.14)]">
+              <div className="flex shrink-0 items-center gap-1 rounded-[24px] border border-black/10 bg-white/94 px-1.5 py-1.5 shadow-[0_12px_32px_rgba(15,23,42,0.12)]">
                 <Tooltip>
                   <TooltipTrigger asChild>
                     <Button
@@ -3323,7 +3323,7 @@ export function RealtimeCanvasDialog({
                 </Tooltip>
               </div>
 
-              <div className="flex shrink-0 items-center gap-1 rounded-[28px] border border-black/10 bg-white/94 px-2 py-2 shadow-[0_14px_40px_rgba(15,23,42,0.14)]">
+              <div className="flex shrink-0 items-center gap-1 rounded-[24px] border border-black/10 bg-white/94 px-1.5 py-1.5 shadow-[0_12px_32px_rgba(15,23,42,0.12)]">
                 <Tooltip>
                   <TooltipTrigger asChild>
                     <Button
@@ -3367,7 +3367,7 @@ export function RealtimeCanvasDialog({
                         type="button"
                         size="icon"
                         variant="ghost"
-                        className="h-10 w-10 rounded-[18px] bg-black text-white transition hover:bg-black/90 hover:text-white"
+                        className="h-9 w-9 rounded-[16px] bg-black text-white transition hover:bg-black/90 hover:text-white"
                         onClick={() => onOpenChange(false)}
                       >
                         <X className="h-4.5 w-4.5" />
@@ -3383,7 +3383,7 @@ export function RealtimeCanvasDialog({
             </div>
           </TooltipProvider>
 
-          <div className="pointer-events-auto w-full rounded-[34px] border border-black/10 bg-white/96 p-6 shadow-[0_20px_48px_rgba(15,23,42,0.16)]">
+          <div className="pointer-events-auto w-full rounded-[28px] border border-black/10 bg-white/96 p-[18px] shadow-[0_16px_40px_rgba(15,23,42,0.14)]">
             <Textarea
               value={prompt}
               onChange={(e) => setPrompt(e.target.value)}
@@ -3395,13 +3395,13 @@ export function RealtimeCanvasDialog({
                 }
               }}
               placeholder="输入指令，基于当前画布实时生成"
-              className="min-h-[138px] resize-none border-0 bg-transparent p-0 text-base leading-8 shadow-none focus-visible:ring-0 focus-visible:ring-offset-0"
+              className="min-h-[102px] resize-none border-0 bg-transparent p-0 text-[15px] leading-7 shadow-none focus-visible:ring-0 focus-visible:ring-offset-0"
             />
-            <div className="mt-5 flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
+            <div className="mt-4 flex flex-col gap-2.5 sm:flex-row sm:items-end sm:justify-between">
               <div className="flex flex-wrap items-center gap-2">
                 <span
                   className={cn(
-                    "flex items-center gap-1.5 rounded-full px-3 py-2 text-xs font-medium",
+                    "flex items-center gap-1.5 rounded-full px-2.5 py-1.5 text-[11px] font-medium",
                     statusBadge.className
                   )}
                 >
@@ -3417,20 +3417,20 @@ export function RealtimeCanvasDialog({
                   />
                   {statusBadge.label}
                 </span>
-                <span className="rounded-full bg-zinc-100 px-3 py-2 text-xs text-zinc-600">
+                <span className="rounded-full bg-zinc-100 px-2.5 py-1.5 text-[11px] text-zinc-600">
                   延迟 {adaptiveThrottleMs}ms
                 </span>
-                <span className="rounded-full bg-black px-3 py-2 text-xs font-medium text-white">
+                <span className="rounded-full bg-black px-2.5 py-1.5 text-[11px] font-medium text-white">
                   当前工具 {currentModeLabel}
                 </span>
-                <span className="rounded-full bg-zinc-100 px-3 py-2 text-xs text-zinc-600">
+                <span className="rounded-full bg-zinc-100 px-2.5 py-1.5 text-[11px] text-zinc-600">
                   {currentModeDescription}
                 </span>
               </div>
               <div className="flex items-center gap-2">
                 <Button
                   size="sm"
-                  className="h-10 shrink-0 rounded-full bg-black px-5 font-medium text-white hover:bg-black/90"
+                  className="h-9 shrink-0 rounded-full bg-black px-4 font-medium text-white hover:bg-black/90"
                   onClick={triggerGenerate}
                   disabled={status === "connecting"}
                 >
@@ -3443,7 +3443,7 @@ export function RealtimeCanvasDialog({
                 <Button
                   size="sm"
                   variant="outline"
-                  className="h-10 shrink-0 rounded-full px-5 font-medium"
+                  className="h-9 shrink-0 rounded-full px-4 font-medium"
                   onClick={handleApplyToCanvas}
                   disabled={!previewUrl}
                 >