create-young-proj 2.1.0 → 2.2.0

package/template-electron-win7/electron/main.ts

@@ -0,0 +1,318 @@
+import path from 'node:path'
+import Store from 'electron-store'
+import { BrowserWindow, Menu, Notification, Tray, app, globalShortcut, ipcMain, nativeImage } from 'electron'
+import Logger from 'electron-log'
+import AutoLaunch from 'auto-launch'
+import { isDev } from 'electron-util/main'
+import { name } from '../package.json'
+import { checkUpdate, triggerCheckUpdate } from './update'
+
+// The built directory structure
+//
+// ├─┬─┬ dist
+// │ │ └── index.html
+// │ │
+// │ ├─┬ dist-electron
+// │ │ ├── main.js
+// │ │ └── preload.js
+// │
+
+process.env.DIST = path.join(__dirname, '../dist')
+process.env.VITE_PUBLIC = path.join(process.env.DIST, '../public')
+
+if (app.isPackaged) {
+  process.env.VITE_PUBLIC = process.env.DIST
+
+  const ex = process.execPath
+
+  const autoLaunch = new AutoLaunch({
+    name,
+    path: ex,
+  })
+
+  autoLaunch
+    .enable()
+    .then(() => {
+      Logger.info('开机自启设置成功')
+    })
+    .catch((err) => {
+      Logger.error('开机自启设置失败：', err)
+    })
+}
+
+const store = new Store()
+
+const ICON = nativeImage.createFromPath(path.join(process.env.VITE_PUBLIC, 'icon.ico'))
+
+// 窗口
+let win: BrowserWindow | null
+// 托盘
+let tray: Tray | null
+let trayFlashInterval: NodeJS.Timeout | null
+let trayFlag = false
+
+/**
+ * 内嵌应用的地址
+ */
+let VITE_DEV_SERVER_URL = process.env.VITE_DEV_SERVER_URL
+/**
+ * 是否允许切换环境
+ * ? 非正式环境都允许切换环境(打开调试控制台)
+ */
+let ENABLE_SWITCH_ENV = isDev
+
+async function loadServe() {
+  if (!win) {
+    throw new Error('窗口未创建')
+  }
+
+  try {
+    const serve = store.get('VITE_DEV_SERVER_URL') as string
+    if (serve && ENABLE_SWITCH_ENV) {
+      VITE_DEV_SERVER_URL = serve
+      Logger.log('🚀 ~ load address from config file:', VITE_DEV_SERVER_URL)
+
+      await win.loadURL(VITE_DEV_SERVER_URL)
+    }
+    else if (VITE_DEV_SERVER_URL) {
+      Logger.log('🚀 ~ load address from build injection:', VITE_DEV_SERVER_URL)
+
+      await win.loadURL(VITE_DEV_SERVER_URL)
+    }
+    else {
+      await win.loadFile(path.join(process.env.DIST as string, 'index.html'))
+    }
+
+    // 窗口加载完成后最大化
+    win.maximize()
+  }
+  catch (error) {
+    console.error('🚀 ~ error:', error)
+  }
+}
+
+/**
+ * 创建窗口
+ */
+async function createWindow() {
+  win = new BrowserWindow({
+    icon: ICON,
+    webPreferences: {
+      preload: path.join(__dirname, 'preload.js'),
+      sandbox: false,
+    },
+    // 隐藏菜单栏
+    autoHideMenuBar: true,
+  })
+
+  // 检查更新
+  try {
+    checkUpdate(win)
+  }
+  catch (error) {
+    Logger.error(error)
+  }
+
+  // 隐藏窗口而不是退出，保持后台常驻
+  win.on('close', (e) => {
+    e.preventDefault()
+    win?.hide()
+  })
+
+  // Test active push message to Renderer-process.
+  win.webContents.on('did-finish-load', () => {
+    win?.webContents.send('main-process-message', new Date().toLocaleString())
+    // 版本更新
+  })
+
+  // 读取配置，加载窗口
+  loadServe()
+}
+
+/**
+ * 创建托盘
+ */
+async function createTray() {
+  tray = new Tray(ICON)
+  tray.setToolTip('YourApp1')
+
+  const BASE_MENU: Electron.MenuItemConstructorOptions[] = [
+    {
+      type: 'normal',
+      label: '检查更新',
+      click: () => {
+        triggerCheckUpdate()
+      },
+    },
+    {
+      type: 'separator',
+    },
+    {
+      label: '退出应用',
+      type: 'normal',
+      click: () => {
+        // 彻底退出应用
+        app.exit(0)
+        win = null
+      },
+    },
+  ]
+
+  const contextMenu = Menu.buildFromTemplate(
+    ENABLE_SWITCH_ENV && ServerConfig.length
+      ? [
+          {
+            label: '切换服务地址',
+            type: 'submenu',
+            submenu: ServerConfig.map(v => ({
+              label: v.label,
+              type: 'radio',
+              checked: v.value === VITE_DEV_SERVER_URL,
+              click: () => {
+                store.set('VITE_DEV_SERVER_URL', v.value)
+                loadServe()
+              },
+            }),
+            ),
+          },
+          ...BASE_MENU,
+        ]
+      : BASE_MENU,
+  )
+
+  tray.setContextMenu(contextMenu)
+
+  // 点击托盘图标显示窗口
+  tray.on('click', () => {
+    trayFlashInterval && clearInterval(trayFlashInterval)
+    tray?.setImage(ICON)
+    tray?.setToolTip('YourApp1')
+
+    if (!win?.isVisible()) {
+      win?.maximize()
+    }
+
+    win?.focus()
+  })
+}
+
+/**
+ * 注册快捷键
+ */
+function registerShortcuts() {
+  if (ENABLE_SWITCH_ENV) {
+    // 在编辑器中打开存储的配置文件
+    globalShortcut.register('CommandOrControl+Shift+Alt+L', () => {
+      store.openInEditor()
+    })
+
+    // 打开控制台
+    globalShortcut.register('CommandOrControl+Shift+I', () => {
+      win?.webContents.toggleDevTools()
+    })
+  }
+}
+
+const ServerConfig: SelectOptionItem[] = []
+
+/**
+ * 读取配置文件
+ */
+async function readConfig() {
+  const allConfigs = await import.meta.glob<{
+    default: YoungAppConfig
+  }>('./config/**.ts', { eager: true })
+  Logger.log('🚀 ~ readConfig ~ allConfigs:', allConfigs)
+
+  ServerConfig.length = 0
+
+  for (const { default: m } of Object.values(allConfigs)) {
+    ServerConfig.push({
+      label: m.VITE_APP_LABEL,
+      value: m.VITE_APP_SERVER_URL,
+    })
+  }
+
+  if (app.isPackaged) {
+    try {
+      const config = await (await import('./config.ts')).default as YoungAppConfig
+      Logger.log('🚀 ~ readConfig ~ config:', config)
+
+      ENABLE_SWITCH_ENV = config.VITE_APP_MODE !== 'online'
+      VITE_DEV_SERVER_URL = config.VITE_APP_SERVER_URL
+    }
+    catch (error) {
+      Logger.error('🚀 ~ readConfig ~ error:', error)
+    }
+  }
+  else {
+    VITE_DEV_SERVER_URL = ServerConfig[0].value
+    Logger.log('🚀 ~ dev mode, set local addr as default', VITE_DEV_SERVER_URL)
+  }
+}
+
+async function init() {
+  // ! 如果不是嵌入外部网页，而使用一体化开发，注释下面的一行代码
+  await readConfig()
+
+  createWindow()
+  createTray()
+  registerShortcuts()
+}
+
+app.on('activate', () => {
+  // On OS X it's common to re-create a window in the app when the
+  // dock icon is clicked and there are no other windows open.
+  if (BrowserWindow.getAllWindows().length === 0) {
+    createWindow()
+  }
+})
+
+app.whenReady().then(init)
+
+/**
+ * ipc通信
+ */
+/** 打开控制台 */
+ipcMain.on('openDevtools', (event: Electron.IpcMainEvent) => {
+  event.sender.openDevTools()
+})
+
+/** 获取electron-store的配置文件 */
+ipcMain.handle(
+  'getStore',
+  (_event: Electron.IpcMainInvokeEvent, arg: string) => {
+    return store.get(arg)
+  },
+)
+
+/** 设置electron-store的配置文件 */
+ipcMain.on(
+  'setStore',
+  (_event: Electron.IpcMainInvokeEvent, ...args: any[]) => {
+    ; (store.set as (...args: any[]) => void)(...args)
+  },
+)
+
+/** 有新消息（托盘闪烁） */
+ipcMain.on('newMessage', (_event: Electron.IpcMainEvent, ...args: any) => {
+  Logger.log('🚀 ~ ipcMain.on ~ args:', args)
+
+  const NOTIFICATION_TITLE = '通知(主进程)'
+  const NOTIFICATION_BODY = 'Notification from the Main process'
+
+  new Notification({
+    title: NOTIFICATION_TITLE,
+    body: NOTIFICATION_BODY,
+  }).show()
+
+  if (tray) {
+    trayFlashInterval && clearInterval(trayFlashInterval)
+
+    trayFlashInterval = setInterval(() => {
+      trayFlag = !trayFlag
+      tray?.setImage(trayFlag ? nativeImage.createEmpty() : ICON)
+      tray?.setToolTip('You have a new message')
+    }, 300)
+  }
+})

package/template-electron-win7/electron/preload.ts

@@ -0,0 +1,23 @@
+import { contextBridge, ipcRenderer } from 'electron'
+// --------- Expose some API to the Renderer process ---------
+contextBridge.exposeInMainWorld('ipcRenderer', {
+  on(...args: Parameters<typeof ipcRenderer.on>) {
+    const [channel, listener] = args
+    return ipcRenderer.on(channel, (event, ...args) => listener(event, ...args))
+  },
+  off(...args: Parameters<typeof ipcRenderer.off>) {
+    const [channel, ...omit] = args
+    return ipcRenderer.off(channel, ...omit)
+  },
+  send(...args: Parameters<typeof ipcRenderer.send>) {
+    const [channel, ...omit] = args
+    return ipcRenderer.send(channel, ...omit)
+  },
+  invoke(...args: Parameters<typeof ipcRenderer.invoke>) {
+    const [channel, ...omit] = args
+    return ipcRenderer.invoke(channel, ...omit)
+  },
+
+  // You can expose other APTs you need here.
+  // ...
+})

package/template-electron-win7/electron/update.ts

@@ -0,0 +1,78 @@
+import { autoUpdater } from 'electron-updater'
+import type { BrowserWindow } from 'electron'
+import { ipcMain } from 'electron'
+import log from 'electron-log' // 如果没有自己封装
+
+let mainWindow: BrowserWindow | null
+// 封装更新相关的进程通信方法
+function sendUpdateMessage(opt: { cmd: IPCOneWay, data: any }) {
+  if (!mainWindow)
+    return
+  mainWindow.webContents.send(opt.cmd, opt.data)
+}
+export function checkUpdate(win: BrowserWindow | null) {
+  if (!win)
+    return
+  mainWindow = win
+  // 关闭自动更新
+  autoUpdater.autoDownload = false
+  autoUpdater.forceDevUpdateConfig = true
+  // 日志记录设置
+  log.transports.file.level = 'debug'
+  autoUpdater.logger = log
+  // 监听升级失败事件
+  autoUpdater.on('error', (error) => {
+    sendUpdateMessage({
+      cmd: 'update-error',
+      data: error,
+    })
+  })
+  // 监听发现可用更新事件
+  autoUpdater.on('update-available', (message) => {
+    sendUpdateMessage({
+      cmd: 'update-available',
+      data: message,
+    })
+  })
+  // 监听没有可用更新事件
+  autoUpdater.on('update-not-available', (message) => {
+    sendUpdateMessage({
+      cmd: 'update-not-available',
+      data: message,
+    })
+  })
+
+  // 更新下载进度事件
+  autoUpdater.on('download-progress', (progressObj) => {
+    sendUpdateMessage({
+      cmd: 'download-progress',
+      data: progressObj,
+    })
+  })
+  // 监听下载完成事件
+  autoUpdater.on('update-downloaded', (releaseObj) => {
+    sendUpdateMessage({
+      cmd: 'update-downloaded',
+      data: releaseObj,
+    })
+    // 退出并安装更新包
+    autoUpdater.quitAndInstall()
+  })
+
+  // 接收渲染进程消息，开始检查更新
+  ipcMain.on('check-update', () => {
+    // 执行自动更新检查
+    console.log('页面请求检查更新')
+    autoUpdater.checkForUpdates()
+  })
+
+  // 触发更新
+  ipcMain.on('update-app', () => {
+    autoUpdater.downloadUpdate()
+  })
+}
+
+export function triggerCheckUpdate() {
+  console.log('托盘手动检查更新')
+  autoUpdater.checkForUpdates()
+}

package/template-electron-win7/electron-builder.yaml

@@ -0,0 +1,67 @@
+# 包名
+appId: com.electron.your-app-1
+# 应用展示名称，用于桌面显示
+productName: 我是你的应用名称
+
+asar: true
+# asarUnpack:
+#   - public/**/*
+
+# 打包之后执行
+afterPack: ./scripts/afterPack.mjs
+
+directories:
+  output: release/${version}
+
+files:
+  - dist
+  - dist-electron
+
+mac:
+  target:
+    - dmg
+  icon: ./public/icon.ico
+  artifactName: ${productName}-Mac-${version}-Installer.${ext}
+
+win:
+  target:
+    - target: nsis
+      # 现在基本上都是 64 位的机器
+      arch:
+        - x64
+        # 如果确实需要打包成 32 位的，取消注释即可
+        # - ia32
+  icon: ./public/icon.ico
+  artifactName: ${productName}-Windows-${version}-Setup.${ext}
+
+nsis:
+  # 一键安装
+  oneClick: false
+  # 卸载时删除用户数据
+  deleteAppDataOnUninstall: true
+  # 是否开启安装时权限限制（此电脑或当前用户）
+  perMachine: true
+  # 允许请求提升。 如果为false，则用户必须使用提升的权限重新启动安装程序
+  allowElevation: true
+  # 允许修改安装目录
+  allowToChangeInstallationDirectory: true
+  # 创建桌面图标
+  createDesktopShortcut: true
+  # 创建开始菜单图标
+  createStartMenuShortcut: true
+  # 安装图标
+  installerIcon: ./public/icon.ico
+
+linux:
+  target:
+    - AppImage
+  icon: ./public/icon.ico
+  artifactName: ${productName}-Linux-${version}.${ext}
+
+releaseInfo:
+  releaseNotesFile: RELEASE_NOTES.md
+
+publish:
+  - provider: generic
+    # 更新地址(最新安装包存放的地址)
+    url: http://192.168.50.208:9876/electron-app/your-app-1/update

package/template-electron-win7/env/.env

@@ -0,0 +1 @@
+VITE_APP_TITLE=应用名称

package/template-electron-win7/env/.env.development

@@ -0,0 +1,9 @@
+###
+ # @Author: zhangyang
+ # @Date: 2024-07-31 09:14:08
+ # @LastEditTime: 2024-07-31 19:47:10
+ # @Description: 
+ # @LastEditors: zhangyang
+ # Copyright (c) 2024 to current by BluesYoung-web, All Rights Reserved. 
+### 
+VITE_BASE_URL=/api

package/template-electron-win7/env/.env.production

@@ -0,0 +1,9 @@
+###
+ # @Author: zhangyang
+ # @Date: 2024-07-31 09:14:08
+ # @LastEditTime: 2024-07-31 19:11:25
+ # @Description: 
+ # @LastEditors: zhangyang
+ # Copyright (c) 2024 to current by BluesYoung-web, All Rights Reserved. 
+### 
+VITE_BASE_URL=/api

package/template-electron-win7/eslint.config.mjs

@@ -0,0 +1,33 @@
+/*
+ * @Author: zhangyang
+ * @Date: 2023-11-01 10:13:50
+ * @LastEditTime: 2024-08-02 09:01:58
+ * @Description:
+ */
+import antfu from '@antfu/eslint-config'
+
+export default antfu({
+  overrides: {
+    vue: {
+      'vue/valid-v-model': 'off',
+    },
+    typescript: {
+      'ts/no-use-before-define': 'off',
+      'ts/no-unused-vars': 'off',
+      'ts/ban-types': 'off',
+      'ts/ban-ts-comment': 'off',
+      'ts/no-unused-expressions': 'off',
+    },
+  },
+  rules: {
+    'no-console': 'off',
+    'node/prefer-global/process': 'off',
+    'unused-imports/no-unused-vars': 'off',
+    'no-throw-literal': 'off',
+    'antfu/consistent-list-newline': 'off',
+    'style/jsx-indent': 'off',
+  },
+  ignores: [
+    'public',
+  ],
+})

package/template-electron-win7/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      http-equiv="Content-Security-Policy"
+      content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline'"
+    />
+    <title>%VITE_APP_TITLE%</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/template-electron-win7/package.json

@@ -0,0 +1,71 @@
+{
+  "name": "your-app-1",
+  "version": "0.0.1",
+  "private": true,
+  "description": "an electron app",
+  "author": "<bluesyoung_web@163.com>",
+  "main": "dist-electron/main.js",
+  "scripts": {
+    "dev": "vite --mode development",
+    "pro": "vite --mode production",
+    "build": "node ./scripts/build.mjs",
+    "preview": "vite preview",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "postinstall": "simple-git-hooks"
+  },
+  "dependencies": {
+    "@element-plus/icons-vue": "^2.3.1",
+    "@vueuse/core": "^10.11.0",
+    "auto-launch": "^5.0.6",
+    "axios": "^1.6.8",
+    "electron-log": "^5.1.6",
+    "electron-store": "^8.2.0",
+    "electron-updater": "^6.2.1",
+    "element-plus": "^2.7.0",
+    "pinia": "^2.1.7",
+    "vue": "^3.4.21",
+    "vue-router": "^4.3.0"
+  },
+  "devDependencies": {
+    "@antfu/eslint-config": "^2.24.0",
+    "@iconify/json": "^2.2.232",
+    "@types/auto-launch": "^5.0.5",
+    "@types/dompurify": "^3.0.5",
+    "@unocss/reset": "^0.61.8",
+    "@vitejs/plugin-vue": "^5.0.4",
+    "@vitejs/plugin-vue-jsx": "^4.0.0",
+    "compare-versions": "^6.1.1",
+    "consola": "^3.2.3",
+    "dompurify": "^3.1.6",
+    "electron": "^22.1.4",
+    "electron-builder": "^24.13.3",
+    "electron-util": "^0.18.1",
+    "eslint": "^9.8.0",
+    "execa": "^9.3.1",
+    "lint-staged": "^15.2.7",
+    "marked": "^14.1.0",
+    "mdbox": "^0.1.0",
+    "prompts": "^2.4.2",
+    "sass": "^1.75.0",
+    "simple-git-hooks": "^2.11.1",
+    "tasuku": "^2.0.1",
+    "typescript": "^5.2.2",
+    "unocss": "0.58",
+    "unplugin-auto-import": "^0.17.5",
+    "unplugin-vue-components": "^0.26.0",
+    "vite": "^5.1.6",
+    "vite-plugin-electron": "^0.28.4",
+    "vite-plugin-electron-renderer": "^0.14.5",
+    "vite-plugin-optimize-persist": "^0.1.2",
+    "vite-plugin-package-config": "^0.1.1",
+    "vite-plugin-pages": "^0.32.3",
+    "vite-plugin-vue-layouts": "^0.11.0"
+  },
+  "simple-git-hooks": {
+    "pre-commit": "pnpm lint-staged"
+  },
+  "lint-staged": {
+    "*": "eslint --fix"
+  }
+}

package/template-electron-win7/scripts/afterPack.mjs

@@ -0,0 +1,36 @@
+/*
+ * @Author: zhangyang
+ * @Date: 2024-08-23 11:53:06
+ * @LastEditTime: 2024-08-23 12:11:51
+ * @Description:
+ * @LastEditors: zhangyang
+ * Copyright (c) 2024 to current by BluesYoung-web, All Rights Reserved.
+ */
+import { readdir, rm } from 'node:fs/promises'
+import { resolve } from 'node:path'
+
+export default async function (context) {
+  console.log('🚀 ~ afterPack context:', context)
+
+  const localeDir = resolve(context.appOutDir, 'locales')
+
+  const saveLocales = ['zh', 'en']
+
+  try {
+    const files = await readdir(localeDir)
+    // 删除无用的语言文件
+    const unusedFiles = files.filter(file => !saveLocales.some(l => file.startsWith(l)))
+    console.log('🚀 ~ unusedFiles:', unusedFiles)
+
+    for (const file of unusedFiles) {
+      await rm(resolve(localeDir, file), { recursive: true }).catch((error) => {
+        console.error('🚀 ~ rm .pak fail:', error)
+      })
+    }
+  }
+  catch (error) {
+    console.error('🚀 ~ error:', error)
+  }
+
+  console.log('🚀 ~ afterPack end')
+}