Selaa lähdekoodia

feat: 兼容windows缩放问题

banxia 1 kuukausi sitten
vanhempi
commit
43024bd658
3 muutettua tiedostoa jossa 27 lisäystä ja 7 poistoa
  1. 1 0
      electron/preload/electronAPI.ts
  2. 16 5
      electron/win/mainWin.ts
  3. 10 2
      src/layouts/Header/index.tsx

+ 1 - 0
electron/preload/electronAPI.ts

@@ -8,5 +8,6 @@ contextBridge.exposeInMainWorld("electronAPI", {
   send: (channel, data) => ipcRenderer.send(channel, data),
   on: (channel, callback) =>
     ipcRenderer.on(channel, (event, ...args) => callback(...args)),
+  getWindowWidth: () => ipcRenderer.invoke("get-window-info"),
   // ...sqlitePreload,
 });

+ 16 - 5
electron/win/mainWin.ts

@@ -1,4 +1,4 @@
-import { BrowserWindow, screen } from "electron";
+import { BrowserWindow, ipcMain, screen } from "electron";
 import { join } from "node:path";
 import { ICON, DIST, preload, url } from "../main/utils";
 import log from "electron-log/main";
@@ -41,6 +41,12 @@ const createWindow = (): BrowserWindow => {
       // webSecurity: false,
     },
   });
+  ipcMain.handle("get-window-info", async (event) => {
+    const [width] = mainWindow?.getSize() || [0, 0]; // 获取当前窗口宽度
+    const display = screen.getPrimaryDisplay();
+    const scaleFactor = display.scaleFactor; // 缩放因子,例如 1.5
+    return { width, scaleFactor }; // 返回宽度值
+  });
 
   mainWindow.setMenu(null); // 去掉顶部菜单
   // log.info("Log from the main process");
@@ -118,10 +124,15 @@ function middleMainWin() {
   if (mainWindow?.isMaximized()) {
     mainWindow.unmaximize();
   }
-  
-  const { width } = screen.getPrimaryDisplay().workAreaSize;
-  const currentWidth = mainWindow?.getBounds().width;
-  if (currentWidth && currentWidth > 420) {
+  const display = screen.getPrimaryDisplay();
+  const { width } = display.workAreaSize; // 逻辑像素
+  const scaleFactor = display.scaleFactor; // 缩放因子,例如 1.5
+  let currentWidth = mainWindow?.getBounds().width || 0;
+  const winSys = process.platform === "win32";
+
+  const baseWidth = winSys ? 420 * scaleFactor : 420;
+
+  if (currentWidth && currentWidth > baseWidth) {
     mainWindow?.setBounds({
       width: 420,
       x: width - 420,

+ 10 - 2
src/layouts/Header/index.tsx

@@ -15,9 +15,17 @@ const LayoutHeader = (props) => {
   const [messageModalVisible, setMessageModalVisible] = useState(false);
   const { notifications, changeNotification } = useNotificationStore();
   const [socket, setSocket] = useState<any>(null);
-  const [winWidth, setWinWidth] = useState(window.innerWidth);
+  const [winWidth, setWinWidth] = useState(0);
+  const [scaleFactor, setScaleFactor] = useState(1);
+
+  const getWinWidth = async () => {
+    const { width, scaleFactor } = await window.electronAPI.getWindowWidth();
+    setWinWidth(width);
+    setScaleFactor(scaleFactor);
+  };
 
   useEffect(() => {
+    getWinWidth();
     const socket = window.io("http://114.215.252.134:2120");
     setSocket(socket);
     // socket连接后以uid登录
@@ -92,7 +100,7 @@ const LayoutHeader = (props) => {
             className="cursor-pointer p-2 hover:bg-gray-100 rounded-lg"
             onClick={(event) => handleTitleClick(event, "middle")}
           >
-            {winWidth > 420 ? (
+            {winWidth > 420 * scaleFactor ? (
               <Shrink className="text-gray-600 hover:bg-gray-5002" size={16} />
             ) : (
               <Expand className="text-gray-600 hover:bg-gray-5002" size={16} />