From 97495d1550d27c2ab0412b4fe02e1253aefb477b Mon Sep 17 00:00:00 2001
From: TinsFox <fox@tinsfox.com>
Date: Mon, 22 Dec 2025 15:43:28 +0800
Subject: [PATCH] Remove macOS titlebar tint and align custom header (#438)

---
 src-tauri/src/lib.rs |  38 ----------------
 src/App.tsx          | 106 +++++++++++++++++++++++--------------------
 2 files changed, 57 insertions(+), 87 deletions(-)

diff --git a/src-tauri/src/lib.rs b/src-tauri/src/lib.rs
index 6da99ea5b..b41cb279c 100644
--- a/src-tauri/src/lib.rs
+++ b/src-tauri/src/lib.rs
@@ -223,44 +223,6 @@ pub fn run() {
                     log::warn!("初始化 Updater 插件失败，已跳过：{e}");
                 }
             }
-            #[cfg(target_os = "macos")]
-            {
-                // 设置 macOS 标题栏背景色为主界面蓝色
-                if let Some(window) = app.get_webview_window("main") {
-                    use objc2::rc::Retained;
-                    use objc2::runtime::AnyObject;
-                    use objc2_app_kit::NSColor;
-
-                    match window.ns_window() {
-                        Ok(ns_window_ptr) => {
-                            if let Some(ns_window) =
-                                unsafe { Retained::retain(ns_window_ptr as *mut AnyObject) }
-                            {
-                                // 使用与主界面 banner 相同的蓝色 #3498db
-                                // #3498db = RGB(52, 152, 219)
-                                let bg_color = unsafe {
-                                    NSColor::colorWithRed_green_blue_alpha(
-                                        52.0 / 255.0,  // R: 52
-                                        152.0 / 255.0, // G: 152
-                                        219.0 / 255.0, // B: 219
-                                        1.0,           // Alpha: 1.0
-                                    )
-                                };
-
-                                unsafe {
-                                    use objc2::msg_send;
-                                    let _: () =
-                                        msg_send![&*ns_window, setBackgroundColor: &*bg_color];
-                                }
-                            } else {
-                                log::warn!("Failed to retain NSWindow reference");
-                            }
-                        }
-                        Err(e) => log::warn!("Failed to get NSWindow pointer: {e}"),
-                    }
-                }
-            }
-
             // 初始化日志
             if cfg!(debug_assertions) {
                 app.handle().plugin(
diff --git a/src/App.tsx b/src/App.tsx
index d9b730c0f..c658f0db7 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -47,6 +47,10 @@ import { Button } from "@/components/ui/button";
 
 type View = "providers" | "settings" | "prompts" | "skills" | "mcp" | "agents";
 
+const DRAG_BAR_HEIGHT = 28; // px
+const HEADER_HEIGHT = 64; // px
+const CONTENT_TOP_OFFSET = DRAG_BAR_HEIGHT + HEADER_HEIGHT;
+
 function App() {
   const { t } = useTranslation();
   const queryClient = useQueryClient();
@@ -101,7 +105,7 @@ function App() {
             if (event.appType === activeApp) {
               await refetch();
             }
-          },
+          }
         );
       } catch (error) {
         console.error("[App] Failed to subscribe provider switch event", error);
@@ -131,7 +135,7 @@ function App() {
       } catch (error) {
         console.error(
           "[App] Failed to check environment conflicts on startup:",
-          error,
+          error
         );
       }
     };
@@ -147,7 +151,7 @@ function App() {
         if (migrated) {
           toast.success(
             t("migration.success", { defaultValue: "配置迁移成功" }),
-            { closeButton: true },
+            { closeButton: true }
           );
         }
       } catch (error) {
@@ -168,10 +172,10 @@ function App() {
           // 合并新检测到的冲突
           setEnvConflicts((prev) => {
             const existingKeys = new Set(
-              prev.map((c) => `${c.varName}:${c.sourcePath}`),
+              prev.map((c) => `${c.varName}:${c.sourcePath}`)
             );
             const newConflicts = conflicts.filter(
-              (c) => !existingKeys.has(`${c.varName}:${c.sourcePath}`),
+              (c) => !existingKeys.has(`${c.varName}:${c.sourcePath}`)
             );
             return [...prev, ...newConflicts];
           });
@@ -183,7 +187,7 @@ function App() {
       } catch (error) {
         console.error(
           "[App] Failed to check environment conflicts on app switch:",
-          error,
+          error
         );
       }
     };
@@ -244,7 +248,7 @@ function App() {
           (p) =>
             p.sortIndex !== undefined &&
             p.sortIndex >= newSortIndex! &&
-            p.id !== provider.id,
+            p.id !== provider.id
         )
         .map((p) => ({
           id: p.id,
@@ -260,7 +264,7 @@ function App() {
           toast.error(
             t("provider.sortUpdateFailed", {
               defaultValue: "排序更新失败",
-            }),
+            })
           );
           return; // 如果排序更新失败，不继续添加
         }
@@ -334,7 +338,7 @@ function App() {
         return (
           <div className="mx-auto max-w-[56rem] px-5 flex flex-col h-[calc(100vh-8rem)] overflow-hidden">
             {/* 独立滚动容器 - 解决 Linux/Ubuntu 下 DndContext 与滚轮事件冲突 */}
-            <div className="flex-1 overflow-y-auto overflow-x-hidden pb-12 px-1">
+            <div className="flex-1 px-1 pb-12 overflow-x-hidden overflow-y-auto">
               <AnimatePresence mode="wait">
                 <motion.div
                   key={activeApp}
@@ -371,14 +375,14 @@ function App() {
 
   return (
     <div
-      className="flex min-h-screen flex-col bg-background text-foreground selection:bg-primary/30"
-      style={{ overflowX: "hidden" }}
+      className="flex flex-col h-screen overflow-hidden bg-background text-foreground selection:bg-primary/30"
+      style={{ overflowX: "hidden", paddingTop: CONTENT_TOP_OFFSET }}
     >
-      {/* 全局拖拽区域（顶部 4px），避免上边框无法拖动 */}
+      {/* 全局拖拽区域（顶部 28px），避免上边框无法拖动 */}
       <div
-        className="fixed top-0 left-0 right-0 h-4 z-[60]"
+        className="fixed top-0 left-0 right-0 z-[60]"
         data-tauri-drag-region
-        style={{ WebkitAppRegion: "drag" } as any}
+        style={{ WebkitAppRegion: "drag", height: DRAG_BAR_HEIGHT } as any}
       />
       {/* 环境变量警告横幅 */}
       {showEnvBanner && envConflicts.length > 0 && (
@@ -400,7 +404,7 @@ function App() {
             } catch (error) {
               console.error(
                 "[App] Failed to re-check conflicts after deletion:",
-                error,
+                error
               );
             }
           }}
@@ -408,13 +412,18 @@ function App() {
       )}
 
       <header
-        className="fixed top-0 z-50 w-full py-3 bg-background/80 backdrop-blur-md transition-all duration-300"
+        className="fixed z-50 w-full transition-all duration-300 bg-background/80 backdrop-blur-md"
         data-tauri-drag-region
-        style={{ WebkitAppRegion: "drag" } as any}
+        style={
+          {
+            WebkitAppRegion: "drag",
+            top: DRAG_BAR_HEIGHT,
+            height: HEADER_HEIGHT,
+          } as any
+        }
       >
-        <div className="h-4 w-full" aria-hidden data-tauri-drag-region />
         <div
-          className="mx-auto max-w-[56rem] px-6 flex flex-wrap items-center justify-between gap-2"
+          className="mx-auto flex h-full max-w-[56rem] flex-wrap items-center justify-between gap-2 px-6"
           data-tauri-drag-region
           style={{ WebkitAppRegion: "drag" } as any}
         >
@@ -430,7 +439,7 @@ function App() {
                   onClick={() => setCurrentView("providers")}
                   className="mr-2 rounded-lg"
                 >
-                  <ArrowLeft className="h-4 w-4" />
+                  <ArrowLeft className="w-4 h-4" />
                 </Button>
                 <h1 className="text-lg font-semibold">
                   {currentView === "settings" && t("settings.title")}
@@ -452,7 +461,7 @@ function App() {
                       "text-xl font-semibold transition-colors",
                       isProxyRunning && isCurrentAppTakeoverActive
                         ? "text-emerald-500 hover:text-emerald-600 dark:text-emerald-400 dark:hover:text-emerald-300"
-                        : "text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-300",
+                        : "text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-300"
                     )}
                   >
                     CC Switch
@@ -464,7 +473,7 @@ function App() {
                     title={t("common.settings")}
                     className="hover:bg-black/5 dark:hover:bg-white/5"
                   >
-                    <Settings className="h-4 w-4" />
+                    <Settings className="w-4 h-4" />
                   </Button>
                 </div>
                 <UpdateBadge onClick={() => setCurrentView("settings")} />
@@ -483,7 +492,7 @@ function App() {
                 className={addActionButtonClass}
                 title={t("prompts.add")}
               >
-                <Plus className="h-5 w-5" />
+                <Plus className="w-5 h-5" />
               </Button>
             )}
             {currentView === "mcp" && (
@@ -493,7 +502,7 @@ function App() {
                 className={addActionButtonClass}
                 title={t("mcp.unifiedPanel.addServer")}
               >
-                <Plus className="h-5 w-5" />
+                <Plus className="w-5 h-5" />
               </Button>
             )}
             {currentView === "skills" && (
@@ -504,7 +513,7 @@ function App() {
                   onClick={() => skillsPageRef.current?.refresh()}
                   className="hover:bg-black/5 dark:hover:bg-white/5"
                 >
-                  <RefreshCw className="h-4 w-4 mr-2" />
+                  <RefreshCw className="w-4 h-4 mr-2" />
                   {t("skills.refresh")}
                 </Button>
                 <Button
@@ -513,7 +522,7 @@ function App() {
                   onClick={() => skillsPageRef.current?.openRepoManager()}
                   className="hover:bg-black/5 dark:hover:bg-white/5"
                 >
-                  <Settings className="h-4 w-4 mr-2" />
+                  <Settings className="w-4 h-4 mr-2" />
                   {t("skills.repoManager")}
                 </Button>
               </>
@@ -524,7 +533,7 @@ function App() {
 
                 <AppSwitcher activeApp={activeApp} onSwitch={setActiveApp} />
 
-                <div className="bg-muted p-1 rounded-xl flex items-center gap-1">
+                <div className="flex items-center gap-1 p-1 bg-muted rounded-xl">
                   <Button
                     variant="ghost"
                     size="sm"
@@ -534,24 +543,24 @@ function App() {
                       "transition-all duration-200 ease-in-out overflow-hidden",
                       hasSkillsSupport
                         ? "opacity-100 w-8 scale-100 px-2"
-                        : "opacity-0 w-0 scale-75 pointer-events-none px-0 -ml-1",
+                        : "opacity-0 w-0 scale-75 pointer-events-none px-0 -ml-1"
                     )}
                     title={t("skills.manage")}
                   >
-                    <Wrench className="h-4 w-4 flex-shrink-0" />
+                    <Wrench className="flex-shrink-0 w-4 h-4" />
                   </Button>
                   {/* TODO: Agents 功能开发中，暂时隐藏入口 */}
                   {/* {isClaudeApp && (
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      onClick={() => setCurrentView("agents")}
-                      className="text-muted-foreground hover:text-foreground hover:bg-black/5 dark:hover:bg-white/5"
-                      title="Agents"
-                    >
-                      <Bot className="h-4 w-4" />
-                    </Button>
-                  )} */}
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => setCurrentView("agents")}
+                        className="text-muted-foreground hover:text-foreground hover:bg-black/5 dark:hover:bg-white/5"
+                        title="Agents"
+                      >
+                        <Bot className="w-4 h-4" />
+                      </Button>
+                    )} */}
                   <Button
                     variant="ghost"
                     size="sm"
@@ -559,7 +568,7 @@ function App() {
                     className="text-muted-foreground hover:text-foreground hover:bg-black/5 dark:hover:bg-white/5"
                     title={t("prompts.manage")}
                   >
-                    <Book className="h-4 w-4" />
+                    <Book className="w-4 h-4" />
                   </Button>
                   <Button
                     variant="ghost"
@@ -568,7 +577,7 @@ function App() {
                     className="text-muted-foreground hover:text-foreground hover:bg-black/5 dark:hover:bg-white/5"
                     title={t("mcp.title")}
                   >
-                    <Server className="h-4 w-4" />
+                    <Server className="w-4 h-4" />
                   </Button>
                 </div>
 
@@ -577,7 +586,7 @@ function App() {
                   size="icon"
                   className={`ml-2 ${addActionButtonClass}`}
                 >
-                  <Plus className="h-5 w-5" />
+                  <Plus className="w-5 h-5" />
                 </Button>
               </>
             )}
@@ -585,13 +594,12 @@ function App() {
         </div>
       </header>
 
-      <main
-        className={`flex-1 overflow-y-auto pb-12 animate-fade-in scroll-overlay ${
-          currentView === "providers" ? "pt-24" : "pt-20"
-        }`}
-        style={{ overflowX: "hidden" }}
-      >
-        {renderContent()}
+      <main className="flex-1 pb-12 animate-fade-in ">
+        <div
+          className={cn("pb-12", currentView === "providers" ? "pt-6" : "pt-4")}
+        >
+          {renderContent()}
+        </div>
       </main>
 
       <AddProviderDialog