✨ add mini menu and Desktop Icon

Author: Luojiong

TRAY_FEATURES.md

@@ -0,0 +1,72 @@
+# 系统托盘功能说明
+
+## 🎯 功能概述
+
+Port Forwarder 现在支持系统托盘功能，允许应用程序在后台运行而不占用任务栏空间。
+
+## ✨ 主要特性
+
+### 1. **最小化到托盘**
+- 点击窗口关闭按钮（X）时，应用不会退出
+- 而是最小化到系统托盘，继续在后台运行
+- 首次最小化时会显示气泡提示
+
+### 2. **托盘图标交互**
+- **单击托盘图标**（Windows）：显示/隐藏主窗口
+- **双击托盘图标**：显示/隐藏主窗口
+- **右键托盘图标**：显示上下文菜单
+
+### 3. **托盘右键菜单**
+- 📖 **显示主窗口**：恢复并显示应用主界面
+- 🔽 **隐藏到托盘**：手动隐藏窗口到托盘
+- ⚙️ **转发规则管理**：直接打开主界面管理转发规则
+- ℹ️ **关于**：显示应用程序版本信息
+- 🚪 **退出程序**：完全退出应用程序
+
+## 🔧 使用方法
+
+### 开始使用
+1. 启动 Port Forwarder 应用
+2. 系统托盘会自动显示应用图标
+3. 正常使用应用程序的所有功能
+
+### 最小化到托盘
+**方法1：** 点击窗口右上角的关闭按钮（X）
+**方法2：** 右键托盘图标 → 选择"隐藏到托盘"
+
+### 从托盘恢复窗口
+**方法1：** 单击托盘图标（Windows）
+**方法2：** 双击托盘图标
+**方法3：** 右键托盘图标 → 选择"显示主窗口"
+
+### 完全退出应用
+**方法1：** 右键托盘图标 → 选择"退出程序"
+**方法2：** 在主窗口中使用 Alt+F4（Windows）
+
+## 🎨 图标说明
+
+- **托盘图标**：32x32 像素 PNG 格式（Windows/Linux）
+- **macOS 托盘图标**：16x16 像素 PNG 格式
+- **提示文本**：悬停托盘图标显示"Port Forwarder - 端口转发工具"
+
+## ⚡ 优势
+
+1. **后台运行**：转发规则继续工作，即使窗口关闭
+2. **快速访问**：一键恢复窗口，不需要重新启动
+3. **节省空间**：不占用任务栏位置
+4. **系统集成**：完美融入 Windows 系统托盘
+
+## 🛠️ 技术实现
+
+- 使用 Electron Tray API
+- 跨平台支持（Windows、macOS、Linux）
+- 自动图标适配不同平台要求
+- 智能窗口状态管理
+- 优雅的应用生命周期处理
+
+## 📝 注意事项
+
+- 转发规则在托盘运行时保持活跃
+- 应用程序数据和设置会自动保存
+- 托盘功能支持所有现有的端口转发功能
+- 建议将应用设置为开机自启动以便常驻使用

electron/main.js

@@ -1,4 +1,4 @@
-const { app, BrowserWindow, ipcMain } = require('electron')
+const { app, BrowserWindow, ipcMain, Tray, Menu, nativeImage } = require('electron')
 const path = require('path')
 const net = require('net')
 const { spawn } = require('child_process')
@@ -21,14 +21,132 @@ const store = new Store({
 });
 
 let mainWindow
+let tray = null
 const forwardingServers = new Map()
 const reverseSshProcesses = new Map()
 const sshClients = new Map()
 
+// 创建系统托盘
+const createTray = () => {
+  // 获取托盘图标路径
+  const getTrayIconPath = () => {
+    if (process.platform === 'win32') {
+      return path.join(__dirname, '../resources/icons/32x32.png')
+    } else if (process.platform === 'darwin') {
+      return path.join(__dirname, '../resources/icons/16x16.png')
+    } else {
+      return path.join(__dirname, '../resources/icons/32x32.png')
+    }
+  }
+
+  const iconPath = getTrayIconPath()
+  
+  // 创建托盘图标
+  tray = new Tray(iconPath)
+  
+  // 设置托盘提示文本
+  tray.setToolTip('Port Forwarder - 端口转发工具')
+  
+  // 创建托盘右键菜单
+  const contextMenu = Menu.buildFromTemplate([
+    {
+      label: '显示主窗口',
+      click: () => {
+        if (mainWindow) {
+          if (mainWindow.isMinimized()) {
+            mainWindow.restore()
+          }
+          mainWindow.show()
+          mainWindow.focus()
+        }
+      }
+    },
+    {
+      label: '隐藏到托盘',
+      click: () => {
+        if (mainWindow) {
+          mainWindow.hide()
+        }
+      }
+    },
+    { type: 'separator' },
+    {
+      label: '转发规则管理',
+      click: () => {
+        if (mainWindow) {
+          mainWindow.show()
+          mainWindow.focus()
+        }
+      }
+    },
+    { type: 'separator' },
+    {
+      label: '关于',
+      click: () => {
+        if (mainWindow) {
+          mainWindow.webContents.executeJavaScript(`
+            alert('Port Forwarder v${require('../package.json').version}\\n\\n一个简单易用的端口转发工具\\n支持本地转发和SSH反向转发');
+          `)
+          mainWindow.show()
+          mainWindow.focus()
+        }
+      }
+    },
+    {
+      label: '退出程序',
+      click: () => {
+        app.isQuiting = true
+        app.quit()
+      }
+    }
+  ])
+  
+  // 设置托盘菜单
+  tray.setContextMenu(contextMenu)
+  
+  // 双击托盘图标显示主窗口
+  tray.on('double-click', () => {
+    if (mainWindow) {
+      if (mainWindow.isVisible()) {
+        mainWindow.hide()
+      } else {
+        mainWindow.show()
+        mainWindow.focus()
+      }
+    }
+  })
+  
+  // 单击托盘图标（Windows 下）
+  tray.on('click', () => {
+    if (process.platform === 'win32') {
+      if (mainWindow) {
+        if (mainWindow.isVisible()) {
+          mainWindow.hide()
+        } else {
+          mainWindow.show()
+          mainWindow.focus()
+        }
+      }
+    }
+  })
+}
+
 const createWindow = () => {
+  // 获取图标路径
+  const getIconPath = () => {
+    if (process.platform === 'win32') {
+      return path.join(__dirname, '../resources/icons/icon.ico')
+    } else if (process.platform === 'darwin') {
+      return path.join(__dirname, '../resources/icons/icon.icns')
+    } else {
+      return path.join(__dirname, '../resources/icons/512x512.png')
+    }
+  }
+
   mainWindow = new BrowserWindow({
     width: 1200,
     height: 800,
+    icon: getIconPath(),
     webPreferences: {
       contextIsolation: true,
       nodeIntegration: true,
@@ -38,6 +156,8 @@ const createWindow = () => {
     },
     show: false,
     backgroundColor: '#fff',
+    // 添加窗口标题
+    title: 'Port Forwarder',
   })
 
   // 配置 session
@@ -54,6 +174,25 @@ const createWindow = () => {
     mainWindow.show()
   })
 
+  // 拦截窗口关闭事件
+  mainWindow.on('close', (event) => {
+    if (!app.isQuiting) {
+      event.preventDefault()
+      mainWindow.hide()
+      
+      // 首次隐藏时显示提示（可选）
+      if (!mainWindow.hasShownTrayNotification) {
+        tray.displayBalloon({
+          iconType: 'info',
+          title: 'Port Forwarder',
+          content: '应用程序已最小化到系统托盘，点击托盘图标可以重新打开'
+        })
+        mainWindow.hasShownTrayNotification = true
+      }
+      return false
+    }
+  })
+
   if (process.env.VITE_DEV_SERVER_URL) {
     mainWindow.loadURL(process.env.VITE_DEV_SERVER_URL)
     if (process.env.NODE_ENV === 'development') {
@@ -84,6 +223,10 @@ app.whenReady().then(() => {
     console.error('清理缓存出错:', error);
   }
 
+  // 创建系统托盘
+  createTray();
+  
+  // 创建主窗口
   createWindow();
 
   const forwardings = store.get('forwardings');
@@ -128,9 +271,13 @@ if (!gotTheLock) {
 }
 
 app.on('window-all-closed', () => {
-  if (process.platform !== 'darwin') {
-    app.quit()
+  // 在 Windows 和 Linux 下，当所有窗口关闭时不退出应用
+  // 因为我们希望应用继续在托盘中运行
+  if (process.platform === 'darwin') {
+    // macOS 下的标准行为：关闭窗口但保持应用运行
+    return
   }
+  // Windows 和 Linux 下也不退出，让应用在托盘中继续运行
 })
 
 app.on('activate', () => {
@@ -603,8 +750,16 @@ app.on('child-process-gone', (event, details) => {
 });
 
 // 在退出时进行清理
-app.on('before-quit', () => {
+app.on('before-quit', (event) => {
+  app.isQuiting = true
+  
   try {
+    // 销毁托盘图标
+    if (tray) {
+      tray.destroy()
+      tray = null
+    }
+    
     // 关闭所有转发服务
     for (const [id, server] of forwardingServers.entries()) {
       try {

package.json

@@ -1,7 +1,7 @@
 {
   "name": "electron-port-forwarder",
   "private": true,
-  "version": "1.0.2",
+  "version": "1.0.3",
   "main": "dist-electron/main.js",
   "description": "A port forwarding tool built with Electron",
   "author": {
@@ -53,7 +53,25 @@
       "buildResources": "build",
       "output": "release/${version}"
     },
+    "files": [
+      "dist/**/*",
+      "dist-electron/**/*",
+      "node_modules/**/*"
+    ],
+    "extraResources": [
+      {
+        "from": "src/assets/icons",
+        "to": "icons",
+        "filter": ["**/*"]
+      },
+      {
+        "from": "build",
+        "to": ".",
+        "filter": ["16x16.png", "32x32.png"]
+      }
+    ],
     "win": {
+      "icon": "build/icon.ico",
       "target": [
         {
           "target": "nsis",
@@ -66,6 +84,7 @@
       "requestedExecutionLevel": "asInvoker"
     },
     "linux": {
+      "icon": "build/icon.png",
       "target": [
         {
           "target": "AppImage",
@@ -92,6 +111,7 @@
       "category": "Network"
     },
     "mac": {
+      "icon": "build/icon.icns",
       "target": [
         {
           "target": "dmg",