From 684367bf7c22aa7273d721e3712f7db144f9ef77 Mon Sep 17 00:00:00 2001
From: kangfenmao <kangfenmao@qq.com>
Date: Mon, 9 Jun 2025 11:50:30 +0800
Subject: [PATCH] fix: adjust navbar and title bar dimensions, update icon
 handling

---
 src/main/config.ts                            |  4 +-
 src/main/services/WindowService.ts            |  2 +-
 src/renderer/src/assets/styles/color.scss     |  2 +-
 src/renderer/src/components/app/Navbar.tsx    | 36 +++++++++++++++--
 src/renderer/src/pages/home/Navbar.tsx        |  2 +-
 .../pages/mcp-servers/McpSettingsNavbar.tsx   | 39 ++++++++-----------
 6 files changed, 55 insertions(+), 30 deletions(-)

diff --git a/src/main/config.ts b/src/main/config.ts
index 84dc1b846d..32665a55b8 100644
--- a/src/main/config.ts
+++ b/src/main/config.ts
@@ -11,13 +11,13 @@ if (isDev) {
 export const DATA_PATH = getDataPath()
 
 export const titleBarOverlayDark = {
-  height: 40,
+  height: 42,
   color: 'rgba(255,255,255,0)',
   symbolColor: '#fff'
 }
 
 export const titleBarOverlayLight = {
-  height: 40,
+  height: 42,
   color: 'rgba(255,255,255,0)',
   symbolColor: '#000'
 }
diff --git a/src/main/services/WindowService.ts b/src/main/services/WindowService.ts
index 1ae16d5556..de7233fb46 100644
--- a/src/main/services/WindowService.ts
+++ b/src/main/services/WindowService.ts
@@ -63,7 +63,7 @@ export class WindowService {
       titleBarOverlay: nativeTheme.shouldUseDarkColors ? titleBarOverlayDark : titleBarOverlayLight,
       backgroundColor: isMac ? undefined : nativeTheme.shouldUseDarkColors ? '#181818' : '#FFFFFF',
       darkTheme: nativeTheme.shouldUseDarkColors,
-      trafficLightPosition: { x: 15, y: 12 },
+      trafficLightPosition: { x: 12, y: 12 },
       ...(isLinux ? { icon } : {}),
       webPreferences: {
         preload: join(__dirname, '../preload/index.js'),
diff --git a/src/renderer/src/assets/styles/color.scss b/src/renderer/src/assets/styles/color.scss
index e5a7930a11..db412263bb 100644
--- a/src/renderer/src/assets/styles/color.scss
+++ b/src/renderer/src/assets/styles/color.scss
@@ -56,7 +56,7 @@
   --navbar-background-mac: rgba(20, 20, 20, 0.55);
   --navbar-background: #1f1f1f;
 
-  --navbar-height: 45px;
+  --navbar-height: 42px;
   --sidebar-width: 50px;
   --status-bar-height: 40px;
   --input-bar-height: 100px;
diff --git a/src/renderer/src/components/app/Navbar.tsx b/src/renderer/src/components/app/Navbar.tsx
index 7dfe28452a..547d269caf 100644
--- a/src/renderer/src/components/app/Navbar.tsx
+++ b/src/renderer/src/components/app/Navbar.tsx
@@ -1,7 +1,7 @@
 import { isLinux, isMac, isWindows } from '@renderer/config/constant'
 import { useFullscreen } from '@renderer/hooks/useFullscreen'
 import { Button } from 'antd'
-import { X } from 'lucide-react'
+import { ChevronDown, X } from 'lucide-react'
 import type { FC, PropsWithChildren } from 'react'
 import type { HTMLAttributes } from 'react'
 import { useNavigate } from 'react-router-dom'
@@ -28,16 +28,46 @@ export const NavbarRight: FC<Props> = ({ children, ...props }) => {
 
 export const NavbarMain: FC<Props> = ({ children, ...props }) => {
   const isFullscreen = useFullscreen()
-  const navigate = useNavigate()
 
   return (
     <NavbarMainContainer {...props} $isFullscreen={isFullscreen}>
+      <CloseIconWindows />
       {children}
-      <Button type="text" icon={<X size={18} />} onClick={() => navigate('/')} className="nodrag"></Button>
+      <CloseIconMac />
     </NavbarMainContainer>
   )
 }
 
+const CloseIconMac = () => {
+  const navigate = useNavigate()
+
+  if (!isMac) {
+    return null
+  }
+
+  return <Button type="text" icon={<X size={18} />} onClick={() => navigate('/')} className="nodrag" />
+}
+
+const CloseIconWindows = () => {
+  const navigate = useNavigate()
+
+  if (isMac) {
+    return null
+  }
+
+  return (
+    <Button
+      size="small"
+      type="default"
+      shape="circle"
+      icon={<ChevronDown size={16} />}
+      onClick={() => navigate('/')}
+      className="nodrag"
+      style={{ marginRight: 5 }}
+    />
+  )
+}
+
 const NavbarContainer = styled.div`
   min-width: 100%;
   display: flex;
diff --git a/src/renderer/src/pages/home/Navbar.tsx b/src/renderer/src/pages/home/Navbar.tsx
index 858b47672a..858664085c 100644
--- a/src/renderer/src/pages/home/Navbar.tsx
+++ b/src/renderer/src/pages/home/Navbar.tsx
@@ -163,7 +163,7 @@ const NavbarContainer = styled.div<{ $isFullscreen: boolean; $showSidebar: boole
   max-height: var(--navbar-height);
   min-height: var(--navbar-height);
   justify-content: space-between;
-  padding-left: ${({ $showSidebar }) => (isMac && !$showSidebar ? '70px' : '10px')};
+  padding-left: ${({ $showSidebar }) => (isMac && !$showSidebar ? '70px' : '20px')};
   font-weight: bold;
   color: var(--color-text-1);
   padding-right: ${({ $isFullscreen }) => ($isFullscreen ? '12px' : isWindows ? '140px' : isLinux ? '120px' : '12px')};
diff --git a/src/renderer/src/pages/mcp-servers/McpSettingsNavbar.tsx b/src/renderer/src/pages/mcp-servers/McpSettingsNavbar.tsx
index f1ac0de473..363a4baeac 100644
--- a/src/renderer/src/pages/mcp-servers/McpSettingsNavbar.tsx
+++ b/src/renderer/src/pages/mcp-servers/McpSettingsNavbar.tsx
@@ -1,7 +1,4 @@
-import { NavbarRight } from '@renderer/components/app/Navbar'
 import { HStack } from '@renderer/components/Layout'
-import { isLinux, isWindows } from '@renderer/config/constant'
-import { useFullscreen } from '@renderer/hooks/useFullscreen'
 import { Button, Dropdown, Menu, type MenuProps } from 'antd'
 import { ChevronDown, Search } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
@@ -74,29 +71,27 @@ export const McpSettingsNavbar = () => {
   }))
 
   return (
-    <NavbarRight style={{ paddingRight: useFullscreen() ? '12px' : isWindows ? 150 : isLinux ? 120 : 12 }}>
-      <HStack alignItems="center" gap={5}>
+    <HStack alignItems="center" gap={5}>
+      <Button
+        size="small"
+        type="text"
+        onClick={() => navigate('/mcp-servers/npx-search')}
+        icon={<Search size={14} />}
+        className="nodrag"
+        style={{ fontSize: 13, height: 28, borderRadius: 20 }}>
+        {t('settings.mcp.searchNpx')}
+      </Button>
+      <Dropdown menu={{ items: resourceMenuItems }} trigger={['click']}>
         <Button
           size="small"
           type="text"
-          onClick={() => navigate('/mcp-servers/npx-search')}
-          icon={<Search size={14} />}
           className="nodrag"
-          style={{ fontSize: 13, height: 28, borderRadius: 20 }}>
-          {t('settings.mcp.searchNpx')}
+          style={{ fontSize: 13, height: 28, borderRadius: 20, display: 'flex', alignItems: 'center' }}>
+          {t('settings.mcp.findMore')}
+          <ChevronDown size={16} />
         </Button>
-        <Dropdown menu={{ items: resourceMenuItems }} trigger={['click']}>
-          <Button
-            size="small"
-            type="text"
-            className="nodrag"
-            style={{ fontSize: 13, height: 28, borderRadius: 20, display: 'flex', alignItems: 'center' }}>
-            {t('settings.mcp.findMore')}
-            <ChevronDown size={16} />
-          </Button>
-        </Dropdown>
-        <InstallNpxUv mini />
-      </HStack>
-    </NavbarRight>
+      </Dropdown>
+      <InstallNpxUv mini />
+    </HStack>
   )
 }