feat：electron尝试

hellowmonkey-site · Sep 6, 2022 · 318169a · 318169a
1 parent 71f7737
commit 318169a
Show file tree

Hide file tree

Showing 15 changed files with 200 additions and 88 deletions.
diff --git a/.gitignore b/.gitignore
@@ -10,7 +10,7 @@ lerna-debug.log*
 node_modules
 dist
 dist-ssr
-dist-electron
+release
 *.local
 
 # Editor directories and files

diff --git a/electron-builder.json b/electron-builder.json
@@ -0,0 +1,25 @@
+{
+  "appId": "cc.hellowmonkey.tool",
+  "productName": "沃德工具箱",
+  "copyright": "2022",
+  "directories": {
+    "output": "release/${version}",
+    "buildResources": "electron/resource"
+  },
+  "win": {
+    "icon": "electron/image/logo.png",
+    "target": "nsis",
+    "legalTrademarks": "hellowmonkey",
+    "artifactName": "${productName}-Windows-${version}-Setup.${ext}"
+  },
+  "nsis": {
+    "oneClick": false,
+    "perMachine": true,
+    "allowToChangeInstallationDirectory": true,
+    "createDesktopShortcut": true,
+    "createStartMenuShortcut": false
+  },
+  "files": [
+    "dist"
+  ]
+}
diff --git a/electron/main.js b/electron/main.js
diff --git a/electron/main/image.ts b/electron/main/image.ts
@@ -0,0 +1,3 @@
+export function compressImage() {
+  return Promise.resolve("hahaha");
+}
diff --git a/electron/main/index.ts b/electron/main/index.ts
@@ -0,0 +1,83 @@
+import { app, BrowserWindow, ipcMain } from "electron";
+import { join } from "path";
+import { compressImage } from "./image";
+
+const width = 1200;
+const height = 800;
+const title = "沃德工具箱";
+const icon = join(__dirname, "../resource/image/logo.png");
+
+function createWindow() {
+  const win = new BrowserWindow({
+    width,
+    height,
+    minWidth: width,
+    minHeight: height,
+    title,
+    transparent: true,
+    frame: false,
+    autoHideMenuBar: true,
+    backgroundColor: "#ffffff",
+    webPreferences: {
+      preload: join(__dirname, "../preload/index.js"),
+    },
+    show: false,
+  });
+
+  win.loadURL("http://127.0.0.1:3030").then(() => {
+    win.maximize();
+  });
+
+  const loading = new BrowserWindow({
+    autoHideMenuBar: true,
+    title,
+    width,
+    height,
+    show: false,
+  });
+
+  loading.loadFile(join(__dirname, "../resource/html/loading.html"));
+  loading.setIcon(icon);
+
+  loading.once("ready-to-show", () => {
+    loading.show();
+  });
+
+  win.once("ready-to-show", () => {
+    win.show();
+    loading.hide();
+    loading.close();
+    if (import.meta.env.DEV) {
+      win.webContents.openDevTools();
+    }
+  });
+
+  win.setIcon(icon);
+  win.removeMenu();
+
+  // 设置title
+  ipcMain.on("set-title", (event, title) => {
+    const webContents = event.sender;
+    const win = BrowserWindow.fromWebContents(webContents);
+    win?.setTitle(title);
+  });
+
+  // 图片压缩
+  ipcMain.handle("compress-image", compressImage);
+}
+
+app.whenReady().then(() => {
+  createWindow();
+
+  app.on("activate", () => {
+    if (BrowserWindow.getAllWindows().length === 0) {
+      createWindow();
+    }
+  });
+});
+
+app.on("window-all-closed", () => {
+  if (process.platform !== "darwin") {
+    app.quit();
+  }
+});
diff --git a/electron/preload.js b/electron/preload.js
diff --git a/electron/preload/index.ts b/electron/preload/index.ts
@@ -0,0 +1,9 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+import { contextBridge, ipcRenderer } from "electron";
+
+contextBridge.exposeInMainWorld("electronAPI", {
+  // 设置title
+  setTitle: (title: string) => ipcRenderer.send("set-title", title),
+  // 图片压缩
+  compressImage: (file: string) => ipcRenderer.invoke("compress-image", file),
+});
diff --git a/electron/resource/html/loading.html b/electron/resource/html/loading.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>加载中...</title>
+</head>
+<body>
+  <div style="text-align: center; padding: 20% 0; color: #888; font-size: 14px">玩命加载中...</div>
+</body>
+</html>
diff --git a/electron/image/logo.png → electron/resource/image/logo.png b/electron/image/logo.png → electron/resource/image/logo.png
diff --git a/package.json b/package.json
@@ -1,16 +1,16 @@
 {
-  "name": "template",
+  "name": "tool",
   "private": true,
   "version": "0.0.0",
-  "main": "dist-electron/main.js",
+  "main": "dist/electron/main/index.js",
   "scripts": {
     "dev": "vite",
     "build": "vue-tsc --noEmit && vite build",
     "preview": "vite preview",
     "lint": "npm run eslint && npm run stylelint",
     "eslint": "eslint --fix src/**/*.{js,ts,jsx,tsx,vue}",
     "stylelint": "stylelint --fix src/**/*.{scss,sass,css,less}",
-    "electron": "electron ./electron/main.js",
+    "electron-dev": "vite -m electron",
     "electron-builder": "electron-builder"
   },
   "dependencies": {
@@ -52,30 +52,7 @@
     "stylelint-scss": "^4.1.0",
     "typescript": "^4.5.4",
     "vite": "^2.8.0",
+    "vite-plugin-electron": "^0.9.2",
     "vue-tsc": "^0.29.8"
-  },
-  "build": {
-    "appId": "cc.hellowmonkey.tool",
-    "productName": "沃德工具箱",
-    "copyright": "2022",
-    "directories": {
-      "output": "dist-electron"
-    },
-    "win": {
-      "icon": "electron/image/logo.png",
-      "target": "nsis",
-      "legalTrademarks": "hellowmonkey"
-    },
-    "nsis": {
-      "oneClick": false,
-      "perMachine": true,
-      "allowToChangeInstallationDirectory": true,
-      "createDesktopShortcut": true,
-      "createStartMenuShortcut": false
-    },
-    "files": [
-      "dist-electron/**/*",
-      "package.json"
-    ]
   }
 }
diff --git a/src/env.d.ts b/src/env.d.ts
@@ -9,4 +9,5 @@ declare module "*.vue" {
 
 declare let electronAPI: {
   setTitle: (title: string) => void;
+  compressImage: (file: string) => Promise<string>;
 };
diff --git a/src/page/image/compress.tsx b/src/page/image/compress.tsx
@@ -19,11 +19,14 @@ export default defineComponent({
           //   console.log(data);
           // });
           fileList.value.push(file!);
-          const formData = new FormData();
-          formData.append(file!.name, file!);
-          fly
-            .post("https://api.tinify.com/shrink", formData, { headers: { Authorization: "Basic 4RxZwMzdcMT4ksdgYnVYJzMtn2R7cgCT" } })
-            .then(data => data.data);
+          // const formData = new FormData();
+          // formData.append(file!.name, file!);
+          // fly
+          //   .post("https://api.tinify.com/shrink", formData, { headers: { Authorization: "Basic 4RxZwMzdcMT4ksdgYnVYJzMtn2R7cgCT" } })
+          //   .then(data => data.data);
+          electronAPI.compressImage("aaa").then(data => {
+            console.log(data);
+          });
         });
       console.log(list);
     }

diff --git a/tsconfig.json b/tsconfig.json
@@ -18,6 +18,6 @@
     "allowSyntheticDefaultImports": true,
     "strictNullChecks": true
   },
-  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "electron/**/*.ts"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }
diff --git a/vite.config.ts b/vite.config.ts
@@ -1,10 +1,50 @@
 import { defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
 import vueJsx from "@vitejs/plugin-vue-jsx";
+import { join } from "path";
+import { copySync, removeSync } from "fs-extra";
+import electron from "vite-plugin-electron";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue(), vueJsx()],
+  plugins: [
+    vue(),
+    vueJsx(),
+    process.argv.includes("electron")
+      ? electron({
+          main: {
+            entry: "electron/main/index.ts",
+            vite: {
+              build: {
+                outDir: "dist/electron/main",
+                minify: false,
+              },
+              plugins: [
+                {
+                  name: "init",
+                  buildStart() {
+                    removeSync(join(__dirname, "dist/electron"));
+                    copySync(join(__dirname, "electron/resource"), "dist/electron/resource");
+                  },
+                },
+              ],
+            },
+          },
+          preload: {
+            input: {
+              index: join(__dirname, "electron/preload/index.ts"),
+            },
+            vite: {
+              build: {
+                sourcemap: "inline",
+                outDir: "dist/electron/preload",
+                minify: false,
+              },
+            },
+          },
+        })
+      : null,
+  ],
   server: {
     host: "0.0.0.0",
     port: 3030,

diff --git a/yarn.lock b/yarn.lock
@@ -5239,6 +5239,18 @@ viewerjs@^1.10.4:
   resolved "https://registry.npmjs.org/viewerjs/-/viewerjs-1.10.4.tgz"
   integrity sha512-CjMt64yC9D+XUx2t3F0TPbh/Yt5+/ke8/s3IizXa6NtksdJUFDoCcNxi/KRZ9eiZPR/D77pHnnQzAtCoLDaGIw==
 
+vite-plugin-electron-renderer@0.9.0:
+  version "0.9.0"
+  resolved "https://registry.yarnpkg.com/vite-plugin-electron-renderer/-/vite-plugin-electron-renderer-0.9.0.tgz#12da19cf7c6fdb0d1b271a91873ee58883a264cb"
+  integrity sha512-Vc9rB3i0zlw32n5UGfoLmHAOZdH0ZbbA+tI0TPn36HbwXtmsfu+LVLqeccZh88iaQ3VJIm00rUDGMvswN2PLRg==
+
+vite-plugin-electron@^0.9.2:
+  version "0.9.2"
+  resolved "https://registry.yarnpkg.com/vite-plugin-electron/-/vite-plugin-electron-0.9.2.tgz#b7cfae4af3dbaafc114c7e80cdce372d150be156"
+  integrity sha512-8xUDn+Cdd1aFfCINpT9lRJNA9YaxIBW/Tlj4ALfPibFsntxEozJE4GpCog9bWhh8yMVd/ORsZgD6IbHYLwvzWg==
+  dependencies:
+    vite-plugin-electron-renderer "0.9.0"
+
 vite@^2.8.0:
   version "2.8.6"
   resolved "https://registry.npmjs.org/vite/-/vite-2.8.6.tgz"