feat: Implement custom window controls and titlebar management (#4919)

- Added WindowControls component for managing window actions (minimize, maximize, close) based on the operating system.
- Integrated window decoration toggle functionality to allow users to prefer system titlebar.
- Updated layout styles to accommodate new titlebar and window controls.
- Refactored layout components to utilize new window management hooks.
- Enhanced layout viewer to include a switch for enabling/disabling window decorations.
- Improved overall window management by introducing useWindow and useWindowDecorations hooks for better state handling.

src/components/controller/window-controller.tsx

@@ -0,0 +1,114 @@
+import { Close, CropSquare, FilterNone, Minimize } from "@mui/icons-material";
+import { IconButton } from "@mui/material";
+import { forwardRef, useImperativeHandle } from "react";
+
+import { useWindowControls } from "@/hooks/use-window";
+import getSystem from "@/utils/get-system";
+
+export const WindowControls = forwardRef(function WindowControls(props, ref) {
+  const OS = getSystem();
+  const {
+    currentWindow,
+    maximized,
+    minimize,
+    close,
+    toggleFullscreen,
+    toggleMaximize,
+  } = useWindowControls();
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      currentWindow,
+      maximized,
+      minimize,
+      close,
+      toggleFullscreen,
+      toggleMaximize,
+    }),
+    [
+      currentWindow,
+      maximized,
+      minimize,
+      close,
+      toggleFullscreen,
+      toggleMaximize,
+    ],
+  );
+
+  // 通过前端对 tauri 窗口进行翻转全屏时会短暂地与系统图标重叠渲染。
+  // 这可能是上游缺陷，保险起见跨平台以窗口的最大化翻转为准
+
+  return (
+    <div style={{ display: "flex", gap: 4 }}>
+      {OS === "macos" && (
+        <>
+          {/* macOS 风格：关闭 → 最小化 → 全屏 */}
+          <IconButton size="small" sx={{ fontSize: 14 }} onClick={close}>
+            <Close fontSize="inherit" color="inherit" />
+          </IconButton>
+          <IconButton size="small" sx={{ fontSize: 14 }} onClick={minimize}>
+            <Minimize fontSize="inherit" color="inherit" />
+          </IconButton>
+          <IconButton
+            size="small"
+            sx={{ fontSize: 14 }}
+            onClick={toggleMaximize}
+          >
+            {maximized ? (
+              <FilterNone fontSize="inherit" color="inherit" />
+            ) : (
+              <CropSquare fontSize="inherit" color="inherit" />
+            )}
+          </IconButton>
+        </>
+      )}
+
+      {OS === "windows" && (
+        <>
+          {/* Windows 风格：最小化 → 最大化 → 关闭 */}
+          <IconButton size="small" sx={{ fontSize: 14 }} onClick={minimize}>
+            <Minimize fontSize="small" color="inherit" />
+          </IconButton>
+          <IconButton
+            size="small"
+            sx={{ fontSize: 14 }}
+            onClick={toggleMaximize}
+          >
+            {maximized ? (
+              <FilterNone fontSize="small" color="inherit" />
+            ) : (
+              <CropSquare fontSize="small" color="inherit" />
+            )}
+          </IconButton>
+          <IconButton size="small" sx={{ fontSize: 14 }} onClick={close}>
+            <Close fontSize="small" color="inherit" />
+          </IconButton>
+        </>
+      )}
+
+      {OS === "linux" && (
+        <>
+          {/* Linux 桌面常见布局（GNOME/KDE 多为：最小化 → 最大化 → 关闭） */}
+          <IconButton size="small" sx={{ fontSize: 14 }} onClick={minimize}>
+            <Minimize fontSize="small" color="inherit" />
+          </IconButton>
+          <IconButton
+            size="small"
+            sx={{ fontSize: 14 }}
+            onClick={toggleMaximize}
+          >
+            {maximized ? (
+              <FilterNone fontSize="small" color="inherit" />
+            ) : (
+              <CropSquare fontSize="small" color="inherit" />
+            )}
+          </IconButton>
+          <IconButton size="small" sx={{ fontSize: 14 }} onClick={close}>
+            <Close fontSize="small" color="inherit" />
+          </IconButton>
+        </>
+      )}
+    </div>
+  );
+});

src/components/setting/mods/layout-viewer.tsx

@@ -1,12 +1,12 @@
 import {
-  List,
+  Box,
   Button,
-  Select,
-  MenuItem,
-  styled,
+  List,
   ListItem,
   ListItemText,
-  Box,
+  MenuItem,
+  Select,
+  styled,
 } from "@mui/material";
 import { convertFileSrc } from "@tauri-apps/api/core";
 import { join } from "@tauri-apps/api/path";
@@ -18,10 +18,10 @@ import { useTranslation } from "react-i18next";
 import { BaseDialog, DialogRef, Switch } from "@/components/base";
 import { TooltipIcon } from "@/components/base/base-tooltip-icon";
 import { useVerge } from "@/hooks/use-verge";
+import { useWindowDecorations } from "@/hooks/use-window";
 import { copyIconFile, getAppDir } from "@/services/cmds";
 import { showNotice } from "@/services/noticeService";
 import getSystem from "@/utils/get-system";
-
 import { GuardState } from "./guard-state";
 
 const OS = getSystem();
@@ -47,6 +47,8 @@ export const LayoutViewer = forwardRef<DialogRef>((props, ref) => {
   const [sysproxyIcon, setSysproxyIcon] = useState("");
   const [tunIcon, setTunIcon] = useState("");
 
+  const { decorated, toggleDecorations } = useWindowDecorations();
+
   useEffect(() => {
     initIconPath();
   }, []);
@@ -108,6 +110,21 @@ export const LayoutViewer = forwardRef<DialogRef>((props, ref) => {
       onCancel={() => setOpen(false)}
     >
       <List>
+        <Item>
+          <ListItemText primary={t("Prefer System Titlebar")} />
+          <GuardState
+            value={decorated}
+            valueProps="checked"
+            onCatch={onError}
+            onFormat={onSwitchFormat}
+            onChange={async (e) => {
+              await toggleDecorations();
+            }}
+          >
+            <Switch edge="end" />
+          </GuardState>
+        </Item>
+
         <Item>
           <ListItemText primary={t("Traffic Graph")} />
           <GuardState

src/components/setting/setting-verge-advanced.tsx

@@ -8,11 +8,11 @@ import { DialogRef } from "@/components/base";
 import { TooltipIcon } from "@/components/base/base-tooltip-icon";
 import {
   exitApp,
+  exportDiagnosticInfo,
   openAppDir,
   openCoreDir,
-  openLogsDir,
   openDevTools,
-  exportDiagnosticInfo,
+  openLogsDir,
 } from "@/services/cmds";
 import { showNotice } from "@/services/noticeService";
 import { version } from "@root/package.json";
@@ -23,7 +23,7 @@ import { HotkeyViewer } from "./mods/hotkey-viewer";
 import { LayoutViewer } from "./mods/layout-viewer";
 import { LiteModeViewer } from "./mods/lite-mode-viewer";
 import { MiscViewer } from "./mods/misc-viewer";
-import { SettingList, SettingItem } from "./mods/setting-comp";
+import { SettingItem, SettingList } from "./mods/setting-comp";
 import { ThemeViewer } from "./mods/theme-viewer";
 import { UpdateViewer } from "./mods/update-viewer";
 

src/components/setting/setting-verge-basic.tsx

@@ -1,5 +1,5 @@
 import { ContentCopyRounded } from "@mui/icons-material";
-import { Button, MenuItem, Select, Input } from "@mui/material";
+import { Button, Input, MenuItem, Select } from "@mui/material";
 import { open } from "@tauri-apps/plugin-dialog";
 import { useCallback, useRef } from "react";
 import { useTranslation } from "react-i18next";
@@ -19,7 +19,7 @@ import { GuardState } from "./mods/guard-state";
 import { HotkeyViewer } from "./mods/hotkey-viewer";
 import { LayoutViewer } from "./mods/layout-viewer";
 import { MiscViewer } from "./mods/misc-viewer";
-import { SettingList, SettingItem } from "./mods/setting-comp";
+import { SettingItem, SettingList } from "./mods/setting-comp";
 import { ThemeModeSwitch } from "./mods/theme-mode-switch";
 import { ThemeViewer } from "./mods/theme-viewer";
 import { UpdateViewer } from "./mods/update-viewer";