mirror/clash-verge-rev-lite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 11 Wiki Activity

fix: incorrect maximize status on custom windows controller (#5033)

Browse Source 
* fix: windows controller

* chore: update style

* chore: update style
This commit is contained in:
oomeow
2025-10-12 20:51:25 +08:00
committed by GitHub
parent 8e5c150a4f
commit 1875e1b513
3 changed files with 58 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
src/components/controller/window-controller.tsx
View File

@@ -1,5 +1,5 @@
import { Close, CropSquare, FilterNone, Minimize } from "@mui/icons-material"; import { Close, CropSquare, FilterNone, Minimize } from "@mui/icons-material";
import { IconButton } from "@mui/material"; import { Box, IconButton } from "@mui/material";
import { forwardRef, useImperativeHandle } from "react"; import { forwardRef, useImperativeHandle } from "react";
import { useWindowControls } from "@/hooks/use-window"; import { useWindowControls } from "@/hooks/use-window";
@@ -40,7 +40,16 @@ export const WindowControls = forwardRef(function WindowControls(props, ref) {
// 这可能是上游缺陷，保险起见跨平台以窗口的最大化翻转为准 // 这可能是上游缺陷，保险起见跨平台以窗口的最大化翻转为准
return ( return (
<div style={{ display: "flex", gap: 4 }}> <Box
sx={{
display: "flex",
gap: 1,
alignItems: "center",
"> button": {
cursor: "default",
},
}}
>
{OS === "macos" && ( {OS === "macos" && (
<> <>
{/* macOS 风格：关闭 → 最小化 → 全屏 */} {/* macOS 风格：关闭 → 最小化 → 全屏 */}
@@ -67,22 +76,26 @@ export const WindowControls = forwardRef(function WindowControls(props, ref) {
{OS === "windows" && ( {OS === "windows" && (
<> <>
{/* Windows 风格：最小化 → 最大化 → 关闭 */} {/* Windows 风格：最小化 → 最大化 → 关闭 */}
<IconButton size="small" sx={{ fontSize: 14 }} onClick={minimize}> <IconButton size="small" sx={{ fontSize: 16 }} onClick={minimize}>
<Minimize fontSize="small" color="inherit" /> <Minimize fontSize="inherit" color="inherit" />
</IconButton> </IconButton>
<IconButton <IconButton
size="small" size="small"
sx={{ fontSize: 14 }} sx={{ fontSize: 16 }}
onClick={toggleMaximize} onClick={toggleMaximize}
> >
{maximized ? ( {maximized ? (
<FilterNone fontSize="small" color="inherit" /> <FilterNone fontSize="inherit" color="inherit" />
) : ( ) : (
<CropSquare fontSize="small" color="inherit" /> <CropSquare fontSize="inherit" color="inherit" />
)} )}
</IconButton> </IconButton>
<IconButton size="small" sx={{ fontSize: 14 }} onClick={close}> <IconButton
<Close fontSize="small" color="inherit" /> size="small"
sx={{ fontSize: 16, ":hover": { bgcolor: "red", color: "white" } }}
onClick={close}
>
<Close fontSize="inherit" color="inherit" />
</IconButton> </IconButton>
</> </>
)} )}
@@ -90,25 +103,29 @@ export const WindowControls = forwardRef(function WindowControls(props, ref) {
{OS === "linux" && ( {OS === "linux" && (
<> <>
{/* Linux 桌面常见布局（GNOME/KDE 多为：最小化 → 最大化 → 关闭） */} {/* Linux 桌面常见布局（GNOME/KDE 多为：最小化 → 最大化 → 关闭） */}
<IconButton size="small" sx={{ fontSize: 14 }} onClick={minimize}> <IconButton size="small" sx={{ fontSize: 16 }} onClick={minimize}>
<Minimize fontSize="small" color="inherit" /> <Minimize fontSize="inherit" color="inherit" />
</IconButton> </IconButton>
<IconButton <IconButton
size="small" size="small"
sx={{ fontSize: 14 }} sx={{ fontSize: 16 }}
onClick={toggleMaximize} onClick={toggleMaximize}
> >
{maximized ? ( {maximized ? (
<FilterNone fontSize="small" color="inherit" /> <FilterNone fontSize="inherit" color="inherit" />
) : ( ) : (
<CropSquare fontSize="small" color="inherit" /> <CropSquare fontSize="inherit" color="inherit" />
)} )}
</IconButton> </IconButton>
<IconButton size="small" sx={{ fontSize: 14 }} onClick={close}> <IconButton
<Close fontSize="small" color="inherit" /> size="small"
sx={{ fontSize: 16, ":hover": { bgcolor: "red", color: "white" } }}
onClick={close}
>
<Close fontSize="inherit" color="inherit" />
</IconButton> </IconButton>
</> </>
)} )}
</div> </Box>
); );
}); });

15
src/hooks/use-window.tsx
View File

@@ -1,4 +1,5 @@
import { getCurrentWindow } from "@tauri-apps/api/window"; import { getCurrentWindow } from "@tauri-apps/api/window";
import { debounce } from "lodash-es";
import React, { import React, {
createContext, createContext,
useCallback, useCallback,
@@ -31,6 +32,20 @@ export const WindowProvider: React.FC<{ children: React.ReactNode }> = ({
const close = useCallback(() => currentWindow.close(), [currentWindow]); const close = useCallback(() => currentWindow.close(), [currentWindow]);
const minimize = useCallback(() => currentWindow.minimize(), [currentWindow]); const minimize = useCallback(() => currentWindow.minimize(), [currentWindow]);
useEffect(() => {
const checkMaximized = debounce(async () => {
const value = await currentWindow.isMaximized();
if (maximized !== value) {
setMaximized(value);
}
}, 100);
const unlistenResize = currentWindow.onResized(checkMaximized);
return () => {
unlistenResize.then((fn) => fn());
};
}, [currentWindow, maximized]);
const toggleMaximize = useCallback(async () => { const toggleMaximize = useCallback(async () => {
if (await currentWindow.isMaximized()) { if (await currentWindow.isMaximized()) {
await currentWindow.unmaximize(); await currentWindow.unmaximize();

19
src/pages/_layout.tsx
View File

@@ -552,16 +552,15 @@ const Layout = () => {
borderTopRightRadius: "0px", borderTopRightRadius: "0px",
}} }}
onContextMenu={(e) => { onContextMenu={(e) => {
// TODO: 禁止右键菜单 if (
// if ( OS === "windows" &&
// OS === "windows" && !["input", "textarea"].includes(
// !["input", "textarea"].includes( e.currentTarget.tagName.toLowerCase(),
// e.currentTarget.tagName.toLowerCase(), ) &&
// ) && !e.currentTarget.isContentEditable
// !e.currentTarget.isContentEditable ) {
// ) { e.preventDefault();
// e.preventDefault(); }
// }
}} }}
sx={[ sx={[
({ palette }) => ({ bgcolor: palette.background.paper }), ({ palette }) => ({ bgcolor: palette.background.paper }),