feat: 小窗口-中窗口图标切换

electron/win/mainWin.ts

@@ -117,7 +117,7 @@ function maximizeMainWin() {
 function middleMainWin() {
   const { width } = screen.getPrimaryDisplay().workAreaSize;
   const currentWidth = mainWindow?.getBounds().width;
-  if (currentWidth === 840) {
+  if (currentWidth && currentWidth > 420) {
     mainWindow?.setBounds({
       width: 420,
       x: width - 420,

src/layouts/Header/index.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { Bell, Expand, Minus, Square, X } from "lucide-react";
+import { Bell, Expand, Minus, Shrink, Square, X } from "lucide-react";
 import "./index.scss";
 import MessageModal from "@/components/MessageModal/MessageModal";
 import { useNotificationStore } from "@/store/NotificationStore";
@@ -15,6 +15,7 @@ const LayoutHeader = (props) => {
   const [messageModalVisible, setMessageModalVisible] = useState(false);
   const { notifications, changeNotification } = useNotificationStore();
   const [socket, setSocket] = useState<any>(null);
+  const [winWidth, setWinWidth] = useState(window.innerWidth);
 
   useEffect(() => {
     const socket = window.io("http://114.215.252.134:2120");
@@ -39,6 +40,14 @@ const LayoutHeader = (props) => {
     socket.on("update_online_count", function (online_stat) {
       console.log(online_stat, "online_stat");
     });
+    const handleResize = () => {
+      setWinWidth(window.innerWidth);
+    };
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+      socket.disconnect();
+    };
   }, []);
   // 操作点击
   const handleTitleClick = async (event, type: string) => {
@@ -83,7 +92,11 @@ const LayoutHeader = (props) => {
             className="cursor-pointer p-2 hover:bg-gray-100 rounded-lg"
             onClick={(event) => handleTitleClick(event, "middle")}
           >
-            <Expand className="text-gray-600 hover:bg-gray-5002" size={16} />
+            {winWidth > 420 ? (
+              <Shrink className="text-gray-600 hover:bg-gray-5002" size={16} />
+            ) : (
+              <Expand className="text-gray-600 hover:bg-gray-5002" size={16} />
+            )}
           </div>
           <div
             className="cursor-pointer p-2 hover:bg-gray-100 rounded-lg"