调整横竖切换为图标按钮并锁定竖屏尺寸

src-tauri/src/commands/window.rs

@@ -87,3 +87,15 @@ pub async fn window_resize(
     }
     Ok(())
 }
+
+#[tauri::command]
+pub async fn window_set_resizable(
+    resizable: bool,
+    app: AppHandle,
+    _state: tauri::State<'_, Arc<RwLock<AppState>>>,
+) -> Result<(), String> {
+    if let Some(window) = app.get_webview_window("main") {
+        window.set_resizable(resizable).map_err(|e| e.to_string())?;
+    }
+    Ok(())
+}

src-tauri/src/main.rs

@@ -71,6 +71,7 @@ fn main() {
             window_is_maximized,
             toggle_devtools,
             window_resize,
+            window_set_resizable,
             db_test_connection,
             db_switch_connection,
             db_get_status,

src/App.tsx

@@ -140,10 +140,12 @@ function MainContent(): React.JSX.Element {
         await api.windowMaximize()
       }
       if (nextPortraitMode) {
-        await api.windowResize(800, 1000)
+        await api.windowSetResizable(false)
+        await api.windowResize(940, 1280)
         setSidebarCollapsed(true)
       } else {
-        await api.windowResize(1180, 680)
+        await api.windowSetResizable(true)
+        await api.windowResize(1440, 900)
         setSidebarCollapsed(false)
       }
       setIsPortraitMode(nextPortraitMode)

src/components/ContentArea.tsx

@@ -136,13 +136,6 @@ export function ContentArea({
           }
         >
           <Space size="small">
-            <Button
-              size="small"
-              onClick={onToggleOrientation}
-              title={isPortraitMode ? "当前：竖屏模式" : "当前：横屏模式"}
-            >
-              切换横竖模式
-            </Button>
             {permissionTag}
             {hasAnyPassword && (
               <>
@@ -156,7 +149,10 @@ export function ContentArea({
             )}
           </Space>
         </div>
-        <WindowControls />
+        <WindowControls
+          isPortraitMode={isPortraitMode}
+          onToggleOrientation={onToggleOrientation}
+        />
       </div>
 
       <Content style={{ flex: 1, overflowY: "auto" }}>

src/components/WindowControls.tsx

@@ -4,10 +4,19 @@ import {
   BorderOutlined,
   CloseOutlined,
   FullscreenExitOutlined,
+  SwapOutlined,
 } from "@ant-design/icons"
 import { useEffect, useState } from "react"
 
-export function WindowControls(): React.JSX.Element {
+interface WindowControlsProps {
+  isPortraitMode: boolean
+  onToggleOrientation: () => void
+}
+
+export function WindowControls({
+  isPortraitMode,
+  onToggleOrientation,
+}: WindowControlsProps): React.JSX.Element {
   const [isMaximized, setIsMaximized] = useState(false)
 
   useEffect(() => {
@@ -74,6 +83,14 @@ export function WindowControls(): React.JSX.Element {
       >
         <MinusOutlined />
       </Button>
+      <Button
+        type="text"
+        onClick={onToggleOrientation}
+        title={isPortraitMode ? "切换到横屏模式" : "切换到竖屏模式"}
+        style={{ width: "46px", height: "32px", borderRadius: 0 }}
+      >
+        <SwapOutlined style={{ transform: "rotate(90deg)" }} />
+      </Button>
       <Button
         type="text"
         onClick={maximize}

src/preload/types.ts

@@ -185,6 +185,8 @@ const api = {
   toggleDevTools: (): Promise<void> => invoke("toggle_devtools"),
   windowResize: (width: number, height: number): Promise<void> =>
     invoke("window_resize", { width, height }),
+  windowSetResizable: (resizable: boolean): Promise<void> =>
+    invoke("window_set_resizable", { resizable }),
   onWindowMaximizedChanged: (callback: (maximized: boolean) => void): Promise<UnlistenFn> => {
     return listen<boolean>("window:maximized-changed", (event) => {
       callback(event.payload)