fix:打包设置

package.json

@@ -116,6 +116,7 @@
     "electron-debug": "^3.2.0",
     "electron-log": "^4.4.8",
     "electron-root-path": "^1.1.0",
+    "electron-traywindow-positioner": "^1.1.1",
     "electron-updater": "^5.2.1",
     "express": "^4.18.2",
     "history": "^5.3.0",

src/main/main.ts

@@ -9,12 +9,13 @@
  * `./src/main.js` using webpack. This gives us some performance wins.
  */
 import path from 'path';
-import { app, BrowserWindow, shell, ipcMain } from 'electron';
-
+import { app, BrowserWindow, shell, ipcMain, Tray, Menu } from 'electron';
 import { autoUpdater } from 'electron-updater';
 import log from 'electron-log';
 import MenuBuilder from './menu';
 import { resolveHtmlPath } from './util';
+const nativeImage = require('electron').nativeImage;
+const positioner = require('electron-traywindow-positioner');
 
 class AppUpdater {
     constructor() {
@@ -23,18 +24,37 @@ class AppUpdater {
         autoUpdater.checkForUpdatesAndNotify();
     }
 }
-
+let tray: Tray | null = null;
 let mainWindow: BrowserWindow | null = null;
-let win: BrowserWindow | null = null;
+let siteWindown: BrowserWindow | null = null;
+let homeWindown: BrowserWindow | null = null;
 
 const isDev = process.env.NODE_ENV === 'development';
+const alignment = { x: 'left', y: 'up' };
+
+const RESOURCES_PATH = app.isPackaged
+    ? path.join(process.resourcesPath, 'assets')
+    : path.join(__dirname, '../../assets');
+
+const getAssetPath = (...paths: string[]): string => {
+    return path.join(RESOURCES_PATH, ...paths);
+};
+
+let image = nativeImage.createFromPath(getAssetPath('icon.jpg'));
+
+image = image.resize({
+    width: 32,
+    height: 32,
+});
+
+Menu.setApplicationMenu(null);
 
 ipcMain.on('createNewWindow-site', (event, arg) => {
-    if (win) {
-        win.focus();
+    if (siteWindown) {
+        siteWindown.focus();
         return;
     }
-    win = new BrowserWindow({
+    siteWindown = new BrowserWindow({
         width: 620,
         height: 482,
         minWidth: 100,
@@ -47,24 +67,43 @@ ipcMain.on('createNewWindow-site', (event, arg) => {
             contextIsolation: false,
             webSecurity: false,
         },
-        // parent: win, //win是主窗口
+        // parent: siteWindown, //win是主窗口
     });
-    win.loadURL(resolveHtmlPath(`index.html#/site`));
-    isDev && win.webContents.openDevTools();
-    win.on('closed', () => {
-        win = null;
+    siteWindown.loadURL(resolveHtmlPath(`index.html#/site`));
+    isDev && siteWindown.webContents.openDevTools();
+    siteWindown.on('closed', () => {
+        siteWindown = null;
     });
 });
 
 ipcMain.on('resize-home', (event) => {
-    if (mainWindow) {
-        mainWindow.setContentSize(350, 425);
-        // mainWindow.setResizable(true);
-        mainWindow.setMaximizable(false);
-        // mainWindow.setFrame(false);
-
-        // mainWindow.center();
+    if (!tray) return;
+    mainWindow?.close();
+    if (homeWindown) {
+        homeWindown.focus();
+        return;
     }
+    homeWindown = new BrowserWindow({
+        width: 350,
+        height: 425,
+        minWidth: 100,
+        minHeight: 100,
+        frame: false,
+        resizable: false,
+        webPreferences: {
+            sandbox: false,
+            nodeIntegration: true,
+            contextIsolation: false,
+            webSecurity: false,
+        },
+    });
+    homeWindown.loadURL(resolveHtmlPath(`index.html#/home`));
+    positioner.position(homeWindown, tray.getBounds(), alignment);
+
+    isDev && homeWindown.webContents.openDevTools();
+    homeWindown.on('closed', () => {
+        homeWindown = null;
+    });
 });
 
 ipcMain.on('window-close', (event) => {
@@ -101,23 +140,17 @@ const createWindow = async () => {
         await installExtensions();
     }
 
-    const RESOURCES_PATH = app.isPackaged
-        ? path.join(process.resourcesPath, 'assets')
-        : path.join(__dirname, '../../assets');
-
-    const getAssetPath = (...paths: string[]): string => {
-        return path.join(RESOURCES_PATH, ...paths);
-    };
-
     mainWindow = new BrowserWindow({
         show: false,
         width: 480,
         height: 486,
         minWidth: 100,
         minHeight: 100,
-        icon: getAssetPath('icon.png'),
+        icon: getAssetPath('icon.ico'),
         frame: true,
         resizable: false,
+        titleBarStyle: 'hidden',
+        // autoHideMenuBar: true,
         webPreferences: {
             sandbox: false,
             nodeIntegration: true,
@@ -126,8 +159,14 @@ const createWindow = async () => {
         },
     });
 
-    mainWindow.loadURL(resolveHtmlPath('index.html'));
+    tray = new Tray(image);
+    // tray.setTitle('test');
+    // mainWindow.setMenuBarVisibility(false);
+    // mainWindow.removeMenu();
+    // mainWindow.setMenu(null);
 
+    mainWindow.loadURL(resolveHtmlPath('index.html'));
+    // mainWindow.webContents.openDevTools();
     mainWindow.on('ready-to-show', () => {
         if (!mainWindow) {
             throw new Error('"mainWindow" is not defined');
@@ -136,6 +175,7 @@ const createWindow = async () => {
             mainWindow.minimize();
         } else {
             mainWindow.show();
+            // mainWindow.webContents.openDevTools();
         }
     });
 
@@ -143,8 +183,8 @@ const createWindow = async () => {
         mainWindow = null;
     });
 
-    const menuBuilder = new MenuBuilder(mainWindow);
-    menuBuilder.buildMenu();
+    // const menuBuilder = new MenuBuilder(mainWindow);
+    // menuBuilder.buildMenu();
 
     // Open urls in the user's browser
     mainWindow.webContents.setWindowOpenHandler((edata) => {
@@ -156,16 +196,15 @@ const createWindow = async () => {
     // eslint-disable-next-line
     new AppUpdater();
 
-    // function initLoginWindow(windowObj: any) {
-    //     windowObj.setContentSize(500, 500);
-    //     windowObj.setResizable(false);
-    //     windowObj.setMaximizable(false);
-    //     windowObj.center();
-    // }
-
-    // ipcMain.on('showLoginWindow', (event) => {
-    //     initLoginWindow(mainWindow);
-    // });
+    tray.on('click', function () {
+        if (mainWindow) {
+            mainWindow.show();
+            return;
+        }
+        if (!homeWindown || !tray) return;
+        homeWindown.show();
+        positioner.position(homeWindown, tray.getBounds(), alignment);
+    });
 };
 
 /**

src/renderer/App.css

@@ -15,6 +15,7 @@ body {
   ); */
     font-family: sans-serif;
     overflow-y: hidden;
+    -webkit-app-region: drag;
     /* display: flex;
   justify-content: center;
   align-items: center; */
@@ -32,6 +33,7 @@ button {
     transition: all ease-in 0.1s;
     cursor: pointer;
     opacity: 0.9;
+    -webkit-app-region: no-drag;
 }
 
 button:hover {

src/renderer/App.jsx

 import { HashRouter as Router, Route, Switch, Routes } from 'react-router-dom';
 import { Switch } from 'react-router-dom';
-import icon from '../../assets/icon.svg';
 import { createBrowserHistory } from 'history';
 import './App.css';
 import path from 'path';

src/renderer/components/message.jsx

@@ -249,7 +249,7 @@ export default (props) => {
                         sx={{
                             fontSize: '12px',
                             color: '#565C66',
-                            marginLeft: '4px',
+                            marginLeft: '8px',
                         }}
                     >
                         加载更多…

src/renderer/console/home.jsx

@@ -22,7 +22,7 @@ const useStyles = makeStyles()((theme) => {
 export default (props) => {
     const { classes } = useStyles();
     const { render, navigate } = public();
-    const [value, setValue] = useState('two');
+    const [value, setValue] = useState('one');
 
     const handleChange = (event, newValue) => {
         setValue(newValue);

src/renderer/console/login.jsx

@@ -29,7 +29,7 @@ const useStyles = makeStyles()((theme) => {
             flexDirection: 'column',
             width: '300px',
             margin: '0 auto',
-            marginTop: '10%',
+            paddingTop: '10%',
         },
         root: {
             height: '40px',