将导航栏展开收起按钮移至顶栏

src/App.tsx

@@ -53,6 +53,7 @@ function MainContent(): React.JSX.Element {
   const [authLoading, setAuthLoading] = useState(false)
   const [isPortraitMode, setIsPortraitMode] = useState(false)
   const [sidebarCollapsed, setSidebarCollapsed] = useState(false)
+  const [floatingSidebarExpanded, setFloatingSidebarExpanded] = useState(false)
 
   const activeMenu = useMemo(() => {
     const p = location.pathname
@@ -143,10 +144,12 @@ function MainContent(): React.JSX.Element {
         await api.windowSetResizable(false)
         await api.windowResize(940, 1600)
         setSidebarCollapsed(true)
+        setFloatingSidebarExpanded(false)
       } else {
         await api.windowSetResizable(true)
         await api.windowResize(2560, 1440)
         setSidebarCollapsed(false)
+        setFloatingSidebarExpanded(false)
       }
       setIsPortraitMode(nextPortraitMode)
     } catch (error) {
@@ -155,6 +158,20 @@ function MainContent(): React.JSX.Element {
     }
   }
 
+  useEffect(() => {
+    if (!isPortraitMode || !sidebarCollapsed) {
+      setFloatingSidebarExpanded(false)
+    }
+  }, [isPortraitMode, sidebarCollapsed])
+
+  const toggleSidebar = () => {
+    if (isPortraitMode && sidebarCollapsed) {
+      setFloatingSidebarExpanded((prev) => !prev)
+      return
+    }
+    setSidebarCollapsed((prev) => !prev)
+  }
+
   const isDark = currentTheme?.mode === "dark"
   const brandColor = currentTheme?.config?.tdesign?.brandColor || "#0052D9"
 
@@ -175,7 +192,8 @@ function MainContent(): React.JSX.Element {
           onMenuChange={onMenuChange}
           collapsed={sidebarCollapsed}
           floatingExpand={isPortraitMode}
-          onCollapsedChange={setSidebarCollapsed}
+          floatingExpanded={floatingSidebarExpanded}
+          onFloatingExpandedChange={setFloatingSidebarExpanded}
         />
         <ContentArea
           permission={permission}
@@ -183,6 +201,10 @@ function MainContent(): React.JSX.Element {
           onAuthClick={() => setAuthVisible(true)}
           onLogout={logout}
           isPortraitMode={isPortraitMode}
+          sidebarCollapsed={sidebarCollapsed}
+          floatingExpand={isPortraitMode}
+          floatingExpanded={floatingSidebarExpanded}
+          onToggleSidebar={toggleSidebar}
           onToggleOrientation={toggleOrientationMode}
         />
 

src/components/ContentArea.tsx

@@ -1,5 +1,6 @@
 import React, { Suspense, lazy, useEffect } from "react"
 import { Layout, Space, Button, Tag, Spin } from "antd"
+import { MenuFoldOutlined, MenuUnfoldOutlined } from "@ant-design/icons"
 import { Routes, Route, Navigate } from "react-router-dom"
 import { useTranslation } from "react-i18next"
 import { WindowControls } from "./WindowControls"
@@ -46,6 +47,10 @@ interface ContentAreaProps {
   onAuthClick: () => void
   onLogout: () => void
   isPortraitMode: boolean
+  sidebarCollapsed: boolean
+  floatingExpand: boolean
+  floatingExpanded: boolean
+  onToggleSidebar: () => void
   onToggleOrientation: () => void
 }
 
@@ -55,6 +60,10 @@ export function ContentArea({
   onAuthClick,
   onLogout,
   isPortraitMode,
+  sidebarCollapsed,
+  floatingExpand,
+  floatingExpanded,
+  onToggleSidebar,
   onToggleOrientation,
 }: ContentAreaProps): React.JSX.Element {
   const { t } = useTranslation()
@@ -115,6 +124,35 @@ export function ContentArea({
           } as React.CSSProperties
         }
       >
+        <div
+          style={
+            {
+              paddingLeft: "8px",
+              display: "flex",
+              alignItems: "center",
+              height: "100%",
+              WebkitAppRegion: "no-drag",
+              flexShrink: 0,
+            } as React.CSSProperties
+          }
+        >
+          <Button
+            type="text"
+            size="small"
+            onClick={onToggleSidebar}
+            icon={
+              floatingExpand && sidebarCollapsed
+                ? floatingExpanded
+                  ? <MenuFoldOutlined />
+                  : <MenuUnfoldOutlined />
+                : sidebarCollapsed
+                  ? <MenuUnfoldOutlined />
+                  : <MenuFoldOutlined />
+            }
+            title={sidebarCollapsed ? "展开导航栏" : "收起导航栏"}
+            style={{ width: "32px", height: "32px" }}
+          />
+        </div>
         <div
           data-tauri-drag-region
           style={

src/components/Sidebar.tsx

@@ -9,8 +9,6 @@ import {
   FileTextOutlined,
   CloudOutlined,
   UploadOutlined,
-  MenuFoldOutlined,
-  MenuUnfoldOutlined,
 } from "@ant-design/icons"
 import { useState, useEffect } from "react"
 import { useTranslation } from "react-i18next"
@@ -24,7 +22,8 @@ interface SidebarProps {
   onMenuChange: (value: string) => void
   collapsed: boolean
   floatingExpand: boolean
-  onCollapsedChange: (collapsed: boolean) => void
+  floatingExpanded: boolean
+  onFloatingExpandedChange: (expanded: boolean) => void
 }
 
 interface DbStatus {
@@ -39,10 +38,10 @@ export function Sidebar({
   onMenuChange,
   collapsed,
   floatingExpand,
-  onCollapsedChange,
+  floatingExpanded,
+  onFloatingExpandedChange,
 }: SidebarProps): React.JSX.Element {
   const { t } = useTranslation()
-  const [floatingExpanded, setFloatingExpanded] = useState(false)
   const [dbStatus, setDbStatus] = useState<DbStatus>({ type: "sqlite", connected: true })
   const [syncLoading, setSyncLoading] = useState(false)
   const [messageApi, contextHolder] = message.useMessage()
@@ -107,9 +106,9 @@ export function Sidebar({
 
   useEffect(() => {
     if (!floatingExpand || !collapsed) {
-      setFloatingExpanded(false)
+      onFloatingExpandedChange(false)
     }
-  }, [floatingExpand, collapsed])
+  }, [floatingExpand, collapsed, onFloatingExpandedChange])
 
   const handleForceSync = async () => {
     if (!(window as any).api) return
@@ -193,53 +192,20 @@ export function Sidebar({
 
   const showFloatingPanel = floatingExpand && collapsed && floatingExpanded
 
-  const renderSidebarBody = (
-    isCollapsedView: boolean,
-    isFloatingPanel = false,
-    hideMenu = false
-  ) => (
+  const renderSidebarBody = (isCollapsedView: boolean, hideMenu = false) => (
     <>
       <div
         data-tauri-drag-region
         style={
           {
-            padding: isCollapsedView ? "24px 8px 12px" : "32px 24px 16px",
+            padding: isCollapsedView ? "20px 8px 12px" : "24px 24px 16px",
             textAlign: "center",
             WebkitAppRegion: "drag",
             userSelect: "none",
             flexShrink: 0,
-            position: "relative",
           } as React.CSSProperties
         }
       >
-        <Button
-          type="text"
-          size="small"
-          onClick={() => {
-            if (floatingExpand && collapsed) {
-              setFloatingExpanded((prev) => !prev)
-              return
-            }
-            onCollapsedChange(!collapsed)
-          }}
-          icon={
-            floatingExpand && collapsed
-              ? isFloatingPanel
-                ? <MenuFoldOutlined />
-                : <MenuUnfoldOutlined />
-              : isCollapsedView
-                ? <MenuUnfoldOutlined />
-                : <MenuFoldOutlined />
-          }
-          style={
-            {
-              position: "absolute",
-              top: "8px",
-              right: "8px",
-              WebkitAppRegion: "no-drag",
-            } as React.CSSProperties
-          }
-        />
         <img
           src={appLogo}
           style={{
@@ -283,7 +249,7 @@ export function Sidebar({
             onClick={({ key }) => {
               onMenuChange(key)
               if (floatingExpand && collapsed) {
-                setFloatingExpanded(false)
+                onFloatingExpandedChange(false)
               }
             }}
             style={{
@@ -376,7 +342,7 @@ export function Sidebar({
       theme="light"
     >
       {contextHolder}
-      {renderSidebarBody(collapsed, false, showFloatingPanel)}
+      {renderSidebarBody(collapsed, showFloatingPanel)}
 
       {showFloatingPanel && (
         <div
@@ -394,7 +360,7 @@ export function Sidebar({
             flexDirection: "column",
           }}
         >
-          {renderSidebarBody(false, true)}
+          {renderSidebarBody(false)}
         </div>
       )}
     </Sider>