feat：细节调整

electron/main/image.ts

@@ -6,19 +6,28 @@ import * as fse from "fs-extra";
 const tinifyKeys = ["4RxZwMzdcMT4ksdgYnVYJzMtn2R7cgCT", "XrHtLVmrnvnhGLHH2RCkRN9BPm7ZdJg1", "ZZtYtycXQk4d5P11NmFTt70YnJrJx1Qk"];
 
 // 压缩图片
-export async function compressImage(filePath: string, targetPath?: string) {
+export async function compressImage(filePath: string, targetPath?: string, width?: number) {
   let i = 0;
   const arr = filePath.split(sep);
   const fileName = arr[arr.length - 1];
   if (!targetPath) {
     targetPath = arr.slice(0, arr.length - 1).join(sep);
   }
+  targetPath = join(targetPath, fileName);
+  const fileSize = fse.statSync(filePath).size;
   while (i < tinifyKeys.length) {
     tinify.key = tinifyKeys[i];
     try {
-      const source = tinify.fromFile(filePath);
-      await source.toFile(join(targetPath, fileName));
-      return Promise.resolve(targetPath);
+      let source = tinify.fromFile(filePath);
+      if (width) {
+        source = source.resize({
+          method: "scale",
+          width,
+        });
+      }
+      await source.toFile(targetPath);
+      const targetSize = fse.statSync(targetPath).size;
+      return Promise.resolve({ fileSize, targetSize });
     } catch (error) {
       i++;
     }

electron/main/index.ts

@@ -1,4 +1,4 @@
-import { app, BrowserWindow, ipcMain } from "electron";
+import { app, BrowserWindow, globalShortcut, ipcMain, Menu, Tray } from "electron";
 import { join } from "path";
 import { compressImage, pngToIco } from "./image";
 import { openDirectory, saveDialog, selectDirectory } from "./directory";
@@ -10,8 +10,33 @@ const icon = join(__dirname, "../resource/image/logo.png");
 const isDev = process.env.NODE_ENV === "development";
 const url = isDev ? "http://127.0.0.1:3030" : "https://tool.hellowmonkey.cc";
 
+let tray: Tray, win: BrowserWindow;
+
+function toggleWin() {
+  if (win.isVisible()) {
+    hideWin();
+  } else {
+    showWin();
+  }
+}
+
+function showWin() {
+  win.show();
+  win.setSkipTaskbar(false);
+}
+
+function hideWin() {
+  win.hide();
+  win.setSkipTaskbar(true);
+}
+
+function destroyApp() {
+  app.quit();
+  tray.destroy();
+}
+
 function createWindow() {
-  const win = new BrowserWindow({
+  win = new BrowserWindow({
     width,
     height,
     minWidth: width,
@@ -58,52 +83,97 @@ function createWindow() {
     loading.close();
     win.focus();
   });
-
-  // 设置title
-  ipcMain.on("set-title", (event, title) => {
-    const webContents = event.sender;
-    const win = BrowserWindow.fromWebContents(webContents);
-    win?.setTitle(title);
-  });
-
-  // 图片压缩
-  ipcMain.handle("compress-image", async (e, filePath: string, targetPath?: string) => {
-    return compressImage(filePath, targetPath);
-  });
-
-  // 选择保存位置弹框
-  ipcMain.handle("save-dialog", (e, title: string) => {
-    return saveDialog(title);
+  win.on("close", e => {
+    e.preventDefault();
+    hideWin();
   });
 
-  // 选择文件夹
-  ipcMain.handle("select-directory", (e, path: string) => {
-    return selectDirectory(path);
-  });
-
-  // 打开文件夹
-  ipcMain.handle("open-directory", (e, title: string) => {
-    return openDirectory(title);
-  });
+  // 新建托盘
+  tray = new Tray(icon);
+  // 托盘名称
+  tray.setToolTip(title);
+  // 托盘菜单
+  const contextMenu = Menu.buildFromTemplate([
+    {
+      label: "显示",
+      click: () => {
+        showWin();
+      },
+    },
+    {
+      type: "separator",
+    },
+    {
+      label: "退出",
+      click: () => {
+        destroyApp();
+      },
+    },
+  ]);
+  // 载入托盘菜单
+  tray.setContextMenu(contextMenu);
 
-  // png转ico
-  ipcMain.handle("png-to-ico", (e, filePath: string, size: number) => {
-    return pngToIco(filePath, size);
+  tray.on("click", () => {
+    toggleWin();
   });
 }
 
-app.whenReady().then(() => {
-  createWindow();
+app
+  .whenReady()
+  .then(() => {
+    createWindow();
 
-  app.on("activate", () => {
-    if (BrowserWindow.getAllWindows().length === 0) {
-      createWindow();
-    }
+    app.on("activate", () => {
+      if (BrowserWindow.getAllWindows().length === 0) {
+        createWindow();
+      }
+    });
+  })
+  .then(() => {
+    globalShortcut.register("Alt+CommandOrControl+A", () => {
+      toggleWin();
+    });
   });
-});
 
 app.on("window-all-closed", () => {
   if (process.platform !== "darwin") {
-    app.quit();
+    destroyApp();
   }
 });
+
+// 设置title
+ipcMain.on("set-title", (event, title) => {
+  const webContents = event.sender;
+  const win = BrowserWindow.fromWebContents(webContents);
+  win?.setTitle(title);
+});
+
+// 设置进度条
+ipcMain.on("set-progress-bar", (e, progress: number) => {
+  win?.setProgressBar(progress);
+});
+
+// 图片压缩
+ipcMain.handle("compress-image", async (e, filePath: string, targetPath?: string, width?: number) => {
+  return compressImage(filePath, targetPath, width);
+});
+
+// 选择保存位置弹框
+ipcMain.handle("save-dialog", (e, title: string) => {
+  return saveDialog(title);
+});
+
+// 选择文件夹
+ipcMain.handle("select-directory", (e, path: string) => {
+  return selectDirectory(path);
+});
+
+// 打开文件夹
+ipcMain.handle("open-directory", (e, title: string) => {
+  return openDirectory(title);
+});
+
+// png转ico
+ipcMain.handle("png-to-ico", (e, filePath: string, size: number) => {
+  return pngToIco(filePath, size);
+});

electron/preload/index.ts

@@ -1,16 +1,18 @@
 import { contextBridge, ipcRenderer } from "electron";
 
 contextBridge.exposeInMainWorld("electronAPI", {
+  // 设置进度条
+  setProgressBar: (...args: any[]) => ipcRenderer.send("set-progress-bar", ...args),
   // 设置title
-  setTitle: (title: string) => ipcRenderer.send("set-title", title),
+  setTitle: (...args: any[]) => ipcRenderer.send("set-title", ...args),
   // 图片压缩
-  compressImage: (filePath: string, targetPath?: string) => ipcRenderer.invoke("compress-image", filePath, targetPath),
+  compressImage: (...args: any[]) => ipcRenderer.invoke("compress-image", ...args),
   // 保存对话框
-  saveDialog: (title: string) => ipcRenderer.invoke("save-dialog", title),
+  saveDialog: (...args: any[]) => ipcRenderer.invoke("save-dialog", ...args),
   // 选择文件夹
-  selectDirectory: (path: string) => ipcRenderer.invoke("select-directory", path),
+  selectDirectory: (...args: any[]) => ipcRenderer.invoke("select-directory", ...args),
   // 选择文件夹
-  openDirectory: (title: string) => ipcRenderer.invoke("open-directory", title),
+  openDirectory: (...args: any[]) => ipcRenderer.invoke("open-directory", ...args),
   // 选择文件夹
-  pngToIco: (filePath: string, size?: number) => ipcRenderer.invoke("png-to-ico", filePath, size),
+  pngToIco: (...args: any[]) => ipcRenderer.invoke("png-to-ico", ...args),
 });

package.json

@@ -11,7 +11,7 @@
     "eslint": "eslint --fix src/**/*.{js,ts,jsx,tsx,vue}",
     "stylelint": "stylelint --fix src/**/*.{scss,sass,css,less}",
     "electron-dev": "cross-env NODE_ENV=development MODE=electron vite",
-    "electron-build": "cross-env NODE_ENV=production MODE=electron tsc -p ./electron.tsconfig.json && electron-builder",
+    "electron-build": "cross-env NODE_ENV=production MODE=electron vite build && electron-builder",
     "electron-builder": "electron-builder"
   },
   "dependencies": {

src/env.d.ts

@@ -8,8 +8,9 @@ declare module "*.vue" {
 }
 
 declare let electronAPI: {
+  setProgressBar: (progress: number) => void;
   setTitle: (title: string) => void;
-  compressImage: (filePath: string, targetPath?: string) => Promise<string>;
+  compressImage: (filePath: string, targetPath?: string, width?: number) => Promise<{ fileSize: number; targetSize: number }>;
   saveDialog: (title: string) => Promise<string>;
   openDirectory: (path: string) => Promise<void>;
   selectDirectory: (title?: string) => Promise<string>;

src/helper/validate.ts

@@ -8,7 +8,7 @@ export const isRealEmpty = (data: any) => {
 
 // 是不是链接
 export const isUrl = (url: string) => {
-  return /^((https?|ftp|file):\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/.test(url);
+  return /^https?:\/\/.+/.test(url);
 };
 
 // 是不是email