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>
+  );
+});