From c4608005322dd87ab9630f8d1733119ec64e9f86 Mon Sep 17 00:00:00 2001
From: JSR <pandajsr72@gmail.com>
Date: Sun, 5 Jul 2026 16:16:28 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20macOS=20=E6=94=B9=E7=94=A8=E5=8E=9F?=
 =?UTF-8?q?=E7=94=9F=E5=9C=86=E8=A7=92=E4=B8=8E=E5=8E=9F=E7=94=9F=E7=BA=A2?=
 =?UTF-8?q?=E7=BB=BF=E7=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- tauri.conf.json: decorations=true + titleBarStyle=Overlay + transparent
  + hiddenTitle + trafficLightPosition，启用原生圆角/squircle 与原生红绿灯
- main.css: 移除 #root 的 CSS border-radius，避免圆弧覆盖原生连续曲率
- App.tsx: macOS 下隐藏自绘 Windows 风格三按钮
- ContentArea.tsx: 侧栏隐藏（沉浸/竖屏）时 header 左侧为红绿灯留白
- Sidebar.tsx: macOS 下 logo 区上内边距增大，避开红绿灯

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src-tauri/tauri.conf.json      | 7 +++++--
 src/App.tsx                    | 6 +++++-
 src/assets/main.css            | 6 ++----
 src/components/ContentArea.tsx | 7 +++++++
 src/components/Sidebar.tsx     | 9 ++++++++-
 5 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
index e1a6224..b4339cd 100644
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -19,8 +19,11 @@
         "height": 680,
         "resizable": true,
         "fullscreen": false,
-        "decorations": false,
-        "transparent": false,
+        "decorations": true,
+        "transparent": true,
+        "hiddenTitle": true,
+        "titleBarStyle": "Overlay",
+        "trafficLightPosition": { "x": 16, "y": 22 },
         "center": true,
         "minWidth": 360,
         "minHeight": 640
diff --git a/src/App.tsx b/src/App.tsx
index 6385251..1de65f9 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -57,6 +57,10 @@ function MainContent(): React.JSX.Element {
   const { currentTheme } = useTheme()
   const [messageApi, contextHolder] = message.useMessage()
   const { isIosDevice, isAndroidDevice, defaultPortraitMode } = useMemo(getMobileDeviceInfo, [])
+  const isMacDesktop =
+    typeof navigator !== "undefined" &&
+    /mac/i.test(navigator.userAgent) &&
+    !/iphone|ipad|ipod|android/i.test(navigator.userAgent)
   const [immersiveMode, setImmersiveMode] = useState(false)
 
   const normalizeStoredBottomKeys = (raw: unknown): MobileNavKey[] => {
@@ -791,7 +795,7 @@ function MainContent(): React.JSX.Element {
           hasAnyPassword={hasAnyPassword}
           onAuthClick={() => setAuthVisible(true)}
           onLogout={logout}
-          showWindowControls={!isIosDevice && !isAndroidDevice}
+          showWindowControls={!isIosDevice && !isAndroidDevice && !isMacDesktop}
           isPortraitMode={isPortraitMode}
           isMobileDevice={isMobileDevice}
           sidebarCollapsed={sidebarCollapsed}
diff --git a/src/assets/main.css b/src/assets/main.css
index d85344d..cf9787b 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -209,10 +209,8 @@ html.platform-macos body {
   background: transparent;
 }
 
-html.platform-macos #root {
-  border-radius: 12px;
-  overflow: hidden;
-}
+/* macOS：保留原生窗口圆角与 squircle（由 NSWindow 在系统层裁剪），
+   不再用 CSS border-radius 覆盖，避免圆弧破坏原生连续曲率。 */
 
 .ss-group-board-modal .ant-modal {
   max-height: calc(100vh - 24px);
diff --git a/src/components/ContentArea.tsx b/src/components/ContentArea.tsx
index 2ae599b..d5353ac 100644
--- a/src/components/ContentArea.tsx
+++ b/src/components/ContentArea.tsx
@@ -104,6 +104,12 @@ export function ContentArea({
   bottomInset = 0,
 }: ContentAreaProps): React.JSX.Element {
   const { t } = useTranslation()
+  const isMacOS =
+    typeof navigator !== "undefined" &&
+    /mac/i.test(navigator.userAgent) &&
+    !/iphone|ipad|ipod|android/i.test(navigator.userAgent)
+  // macOS 使用原生红绿灯，侧栏隐藏（沉浸/竖屏）时顶部左侧需为红绿灯留白
+  const macTrafficLightsInset = isMacOS && (isPortraitMode || immersiveMode)
   const location = useLocation()
   const navigate = useNavigate()
   const isSubPage = location.pathname !== "/" && !location.pathname.startsWith("/home")
@@ -418,6 +424,7 @@ export function ContentArea({
             background: "var(--ss-header-bg)",
             borderBottom: "1px solid var(--ss-border-color)",
             flexShrink: 0,
+            paddingLeft: macTrafficLightsInset ? "80px" : 0,
             WebkitAppRegion: "drag",
             position: "relative",
           } as React.CSSProperties
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index ab9ef3c..6f8a28c 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -213,13 +213,20 @@ export function Sidebar({
 
   const showFloatingPanel = floatingExpand && collapsed && floatingExpanded
 
+  const isMacOS =
+    typeof navigator !== "undefined" &&
+    /mac/i.test(navigator.userAgent) &&
+    !/iphone|ipad|ipod|android/i.test(navigator.userAgent)
+
   const renderSidebarBody = (isCollapsedView: boolean, hideMenu = false) => (
     <>
       <div
         data-tauri-drag-region
         style={
           {
-            padding: isCollapsedView ? "20px 8px 12px" : "24px 24px 16px",
+            padding: isCollapsedView
+              ? `${isMacOS ? 40 : 20}px 8px 12px`
+              : `${isMacOS ? 44 : 24}px 24px 16px`,
             textAlign: "center",
             WebkitAppRegion: "drag",
             userSelect: "none",