diff --git a/components/canvas/RealtimeCanvasDialog.tsx b/components/canvas/RealtimeCanvasDialog.tsx
index 579579af1..c8824ea11 100644
--- a/components/canvas/RealtimeCanvasDialog.tsx
+++ b/components/canvas/RealtimeCanvasDialog.tsx
@@ -13,7 +13,6 @@ import {
   Save,
   Send,
   Slash,
-  SlidersHorizontal,
   Sparkles,
   Square,
   Undo2,
@@ -776,6 +775,8 @@ export function RealtimeCanvasDialog({
   const [projectPanelOpen, setProjectPanelOpen] = useState(false);
   const [saveProjectDialogOpen, setSaveProjectDialogOpen] = useState(false);
   const [pendingProjectName, setPendingProjectName] = useState("");
+  const [brushPopoverOpen, setBrushPopoverOpen] = useState(false);
+  const [eraserPopoverOpen, setEraserPopoverOpen] = useState(false);
   const [isDragImportActive, setIsDragImportActive] = useState(false);
   const [adaptiveThrottleMs, setAdaptiveThrottleMs] = useState<number>(
     defaultRealtimeConfig.transport.throttleInterval
@@ -2664,10 +2665,45 @@ export function RealtimeCanvasDialog({
     onOpenChange(false);
   }, [onOpenChange, standalone]);
 
+  const closeBrushSettingPopovers = useCallback(() => {
+    setBrushPopoverOpen(false);
+    setEraserPopoverOpen(false);
+  }, []);
+
+  const activateSelectMode = useCallback(() => {
+    setSelectedLayerId(DRAW_LAYER_ID);
+    setBrushMode("select");
+    closeBrushSettingPopovers();
+  }, [closeBrushSettingPopovers]);
+
+  const activateBrushMode = useCallback(() => {
+    setSelectedLayerId(DRAW_LAYER_ID);
+    setBrushMode("brush");
+    setEraserPopoverOpen(false);
+    setBrushPopoverOpen(true);
+  }, []);
+
+  const activateEraserMode = useCallback(() => {
+    setSelectedLayerId(DRAW_LAYER_ID);
+    setBrushMode("eraser");
+    setBrushPopoverOpen(false);
+    setEraserPopoverOpen(true);
+  }, []);
+
+  const activateShapeMode = useCallback(
+    (mode: Extract<RealtimeBrushMode, "rect" | "circle" | "line">) => {
+      setSelectedLayerId(DRAW_LAYER_ID);
+      setBrushMode(mode);
+      closeBrushSettingPopovers();
+    },
+    [closeBrushSettingPopovers]
+  );
+
   const startBlankProject = useCallback(() => {
     setPrompt("");
     setPreviewUrl("");
     setProjectPanelOpen(false);
+    closeBrushSettingPopovers();
     setSelectedLayerId(DRAW_LAYER_ID);
     drawingHasContentRef.current = false;
     hasLoadedInitialImageRef.current = true;
@@ -2677,12 +2713,12 @@ export function RealtimeCanvasDialog({
     dirtyRegionRef.current = null;
     setStatus("idle");
     setStatusMessage("新建空白项目");
-  }, [clearPreviewCanvas, resetCanvas]);
+  }, [clearPreviewCanvas, closeBrushSettingPopovers, resetCanvas]);
 
   const compactToolButtonClass =
     "h-9 w-9 rounded-[16px] text-muted-foreground transition hover:bg-accent hover:text-foreground";
   const compactToolButtonActiveClass =
-    "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground";
+    "bg-black text-white hover:bg-black hover:text-white";
   const currentModeLabel =
     brushMode === "select"
       ? "鼠标"
@@ -2840,11 +2876,11 @@ export function RealtimeCanvasDialog({
             ) : (
               savedProjects.map((project) => (
                 <div
-                  className="rounded-2xl border border-border bg-card p-2.5 shadow-sm"
+                  className="rounded-2xl border border-border bg-card p-3 shadow-sm"
                   key={project.id}
                 >
-                  <div className="flex gap-3">
-                    <div className="h-16 w-16 overflow-hidden rounded-xl border border-border/10 bg-muted">
+                  <div className="flex items-center gap-3">
+                    <div className="h-14 w-14 shrink-0 overflow-hidden rounded-xl border border-border/10 bg-muted">
                       {project.coverImageUrl || project.previewUrl ? (
                         <img
                           alt={project.name}
@@ -2869,31 +2905,31 @@ export function RealtimeCanvasDialog({
                         </div>
                       )}
                     </div>
-                    <div className="min-w-0 flex-1 pt-1">
-                      <div className="truncate font-medium text-foreground text-sm">
+                    <div className="min-w-0 flex-1">
+                      <div className="truncate font-medium text-foreground text-sm leading-5">
                         {project.name}
                       </div>
+                      <div className="mt-2 flex items-center justify-end gap-2">
+                        <Button
+                          className="h-8 rounded-xl px-4"
+                          onClick={() => void openSavedProject(project.id)}
+                          size="sm"
+                          type="button"
+                        >
+                          打开
+                        </Button>
+                        <Button
+                          className="h-8 rounded-xl px-4"
+                          onClick={() => deleteSavedProject(project.id)}
+                          size="sm"
+                          type="button"
+                          variant="outline"
+                        >
+                          删除
+                        </Button>
+                      </div>
                     </div>
                   </div>
-                  <div className="mt-3 flex gap-2">
-                    <Button
-                      className="h-8 flex-1 rounded-xl"
-                      onClick={() => void openSavedProject(project.id)}
-                      size="sm"
-                      type="button"
-                    >
-                      打开
-                    </Button>
-                    <Button
-                      className="h-8 rounded-xl"
-                      onClick={() => deleteSavedProject(project.id)}
-                      size="sm"
-                      type="button"
-                      variant="outline"
-                    >
-                      删除
-                    </Button>
-                  </div>
                 </div>
               ))
             )}
@@ -3133,10 +3169,7 @@ export function RealtimeCanvasDialog({
                     compactToolButtonClass,
                     brushMode === "select" && compactToolButtonActiveClass
                   )}
-                  onClick={() => {
-                    setSelectedLayerId(DRAW_LAYER_ID);
-                    setBrushMode("select");
-                  }}
+                  onClick={activateSelectMode}
                   size="icon"
                   type="button"
                   variant="ghost"
@@ -3152,144 +3185,20 @@ export function RealtimeCanvasDialog({
               </TooltipContent>
             </Tooltip>
             <Tooltip>
-              <TooltipTrigger asChild>
-                <Button
-                  className={cn(
-                    compactToolButtonClass,
-                    brushMode === "brush" && compactToolButtonActiveClass
-                  )}
-                  onClick={() => {
-                    setSelectedLayerId(DRAW_LAYER_ID);
-                    setBrushMode("brush");
-                  }}
-                  size="icon"
-                  type="button"
-                  variant="ghost"
-                >
-                  <Paintbrush className="h-4.5 w-4.5" />
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent>
-                <div className="font-medium text-sm">画笔</div>
-                <div className="text-muted-foreground text-xs">
-                  在画布上自由绘制
-                </div>
-              </TooltipContent>
-            </Tooltip>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button
-                  className={cn(
-                    compactToolButtonClass,
-                    brushMode === "eraser" && compactToolButtonActiveClass
-                  )}
-                  onClick={() => {
-                    setSelectedLayerId(DRAW_LAYER_ID);
-                    setBrushMode("eraser");
-                  }}
-                  size="icon"
-                  type="button"
-                  variant="ghost"
-                >
-                  <Eraser className="h-4.5 w-4.5" />
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent>
-                <div className="font-medium text-sm">橡皮</div>
-                <div className="text-muted-foreground text-xs">
-                  擦除当前草图笔触
-                </div>
-              </TooltipContent>
-            </Tooltip>
-            <Tooltip>
-              <Popover>
+              <Popover onOpenChange={setBrushPopoverOpen} open={brushPopoverOpen}>
                 <TooltipTrigger asChild>
                   <PopoverTrigger asChild>
                     <Button
                       className={cn(
                         compactToolButtonClass,
-                        isShapeMode(brushMode) && compactToolButtonActiveClass
+                        brushMode === "brush" && compactToolButtonActiveClass
                       )}
+                      onClick={activateBrushMode}
                       size="icon"
                       type="button"
                       variant="ghost"
                     >
-                      <Square className="h-4.5 w-4.5" />
-                    </Button>
-                  </PopoverTrigger>
-                </TooltipTrigger>
-                <PopoverContent className="w-[220px] rounded-[18px] border-border/40 bg-background/95 p-3 shadow-xl backdrop-blur-md">
-                  <div className="mb-2 font-medium text-muted-foreground text-xs">
-                    形状工具
-                  </div>
-                  <div className="grid grid-cols-3 gap-2">
-                    <Button
-                      className={cn(
-                        "h-10 rounded-xl",
-                        brushMode === "rect" &&
-                          "bg-primary text-primary-foreground hover:bg-primary"
-                      )}
-                      onClick={() => {
-                        setSelectedLayerId(DRAW_LAYER_ID);
-                        setBrushMode("rect");
-                      }}
-                      type="button"
-                      variant="ghost"
-                    >
-                      <Square className="h-4.5 w-4.5" />
-                    </Button>
-                    <Button
-                      className={cn(
-                        "h-10 rounded-xl",
-                        brushMode === "circle" &&
-                          "bg-primary text-primary-foreground hover:bg-primary"
-                      )}
-                      onClick={() => {
-                        setSelectedLayerId(DRAW_LAYER_ID);
-                        setBrushMode("circle");
-                      }}
-                      type="button"
-                      variant="ghost"
-                    >
-                      <CircleIcon className="h-4.5 w-4.5" />
-                    </Button>
-                    <Button
-                      className={cn(
-                        "h-10 rounded-xl",
-                        brushMode === "line" &&
-                          "bg-primary text-primary-foreground hover:bg-primary"
-                      )}
-                      onClick={() => {
-                        setSelectedLayerId(DRAW_LAYER_ID);
-                        setBrushMode("line");
-                      }}
-                      type="button"
-                      variant="ghost"
-                    >
-                      <Slash className="h-4.5 w-4.5" />
-                    </Button>
-                  </div>
-                </PopoverContent>
-              </Popover>
-              <TooltipContent>
-                <div className="font-medium text-sm">形状</div>
-                <div className="text-muted-foreground text-xs">
-                  矩形、圆形与直线
-                </div>
-              </TooltipContent>
-            </Tooltip>
-
-            <Tooltip>
-              <Popover>
-                <TooltipTrigger asChild>
-                  <PopoverTrigger asChild>
-                    <Button
-                      className={compactToolButtonClass}
-                      size="icon"
-                      type="button"
-                      variant="ghost"
-                    >
-                      <SlidersHorizontal className="h-4.5 w-4.5" />
+                      <Paintbrush className="h-4.5 w-4.5" />
                     </Button>
                   </PopoverTrigger>
                 </TooltipTrigger>
@@ -3331,7 +3240,7 @@ export function RealtimeCanvasDialog({
                         max={50}
                         min={2}
                         onValueChange={([val]) => setBrushSize(val)}
-                        rangeClassName="bg-primary"
+                        rangeClassName="bg-black"
                         step={1}
                         thumbClassName="h-5 w-5 border border-border bg-background shadow-sm"
                         trackClassName="h-2.5 bg-muted shadow-inner"
@@ -3342,9 +3251,124 @@ export function RealtimeCanvasDialog({
                 </PopoverContent>
               </Popover>
               <TooltipContent>
-                <div className="font-medium text-sm">画笔设置</div>
+                <div className="font-medium text-sm">画笔</div>
                 <div className="text-muted-foreground text-xs">
-                  调整颜色和粗细
+                  点击后直接调整颜色和粗细
+                </div>
+              </TooltipContent>
+            </Tooltip>
+            <Tooltip>
+              <Popover onOpenChange={setEraserPopoverOpen} open={eraserPopoverOpen}>
+                <TooltipTrigger asChild>
+                  <PopoverTrigger asChild>
+                    <Button
+                      className={cn(
+                        compactToolButtonClass,
+                        brushMode === "eraser" && compactToolButtonActiveClass
+                      )}
+                      onClick={activateEraserMode}
+                      size="icon"
+                      type="button"
+                      variant="ghost"
+                    >
+                      <Eraser className="h-4.5 w-4.5" />
+                    </Button>
+                  </PopoverTrigger>
+                </TooltipTrigger>
+                <PopoverContent className="w-[220px] rounded-[18px] border-border/40 bg-background/95 p-4 shadow-xl backdrop-blur-md">
+                  <div className="space-y-2">
+                    <div className="flex items-center justify-between font-medium text-muted-foreground text-xs">
+                      <span>橡皮粗细</span>
+                      <span className="w-8 text-right text-foreground">
+                        {brushSize}
+                      </span>
+                    </div>
+                    <Slider
+                      className="w-full"
+                      max={50}
+                      min={2}
+                      onValueChange={([val]) => setBrushSize(val)}
+                      rangeClassName="bg-black"
+                      step={1}
+                      thumbClassName="h-5 w-5 border border-border bg-background shadow-sm"
+                      trackClassName="h-2.5 bg-muted shadow-inner"
+                      value={[brushSize]}
+                    />
+                  </div>
+                </PopoverContent>
+              </Popover>
+              <TooltipContent>
+                <div className="font-medium text-sm">橡皮</div>
+                <div className="text-muted-foreground text-xs">
+                  点击后直接调整橡皮粗细
+                </div>
+              </TooltipContent>
+            </Tooltip>
+            <Tooltip>
+              <Popover>
+                <TooltipTrigger asChild>
+                  <PopoverTrigger asChild>
+                    <Button
+                      className={cn(
+                        compactToolButtonClass,
+                        isShapeMode(brushMode) && compactToolButtonActiveClass
+                      )}
+                      size="icon"
+                      type="button"
+                      variant="ghost"
+                    >
+                      <Square className="h-4.5 w-4.5" />
+                    </Button>
+                  </PopoverTrigger>
+                </TooltipTrigger>
+                <PopoverContent className="w-[220px] rounded-[18px] border-border/40 bg-background/95 p-3 shadow-xl backdrop-blur-md">
+                  <div className="mb-2 font-medium text-muted-foreground text-xs">
+                    形状工具
+                  </div>
+                  <div className="grid grid-cols-3 gap-2">
+                    <Button
+                      className={cn(
+                        "h-10 rounded-xl",
+                        brushMode === "rect" &&
+                          "bg-black text-white hover:bg-black"
+                      )}
+                      onClick={() => activateShapeMode("rect")}
+                      type="button"
+                      variant="ghost"
+                    >
+                      <Square className="h-4.5 w-4.5" />
+                    </Button>
+                    <Button
+                      className={cn(
+                        "h-10 rounded-xl",
+                        brushMode === "circle" &&
+                          "bg-black text-white hover:bg-black"
+                      )}
+                      onClick={() => activateShapeMode("circle")}
+                      type="button"
+                      variant="ghost"
+                    >
+                      <CircleIcon className="h-4.5 w-4.5" />
+                    </Button>
+                    <Button
+                      className={cn(
+                        "h-10 rounded-xl",
+                        brushMode === "line" &&
+                          "bg-black text-white hover:bg-black"
+                      )}
+                      onClick={() => activateShapeMode("line")}
+                      type="button"
+                      variant="ghost"
+                    >
+                      <Slash className="h-4.5 w-4.5" />
+                    </Button>
+                  </div>
+                </PopoverContent>
+              </Popover>
+              <TooltipContent>
+                <div className="font-medium text-sm">形状</div>
+                <div className="text-muted-foreground text-xs">
+                  矩形、圆形与直线
                 </div>
               </TooltipContent>
             </Tooltip>