feat: 新增electron、提示音

apps/web/electron-builder.js

@@ -0,0 +1,52 @@
+module.exports = {
+  productName: "唐僧叨叨", //项目名
+  appId: "com.tsdaodao.im",
+  copyright: "Copyright © tsdaodao", //版权
+  directories: {
+    output: "output/app", // 输出文件夹
+  },
+  npmRebuild: false,
+  asar: false,
+  buildDependenciesFromSource: true,
+  electronDownload: {
+    mirror: "https://registry.npmmirror.com/-/binary/electron/",
+  },
+  files: ["out-election/**/*", "build/**/*"], // 需要打包的文件
+  extraMetadata: {
+    main: "out-election/main/index.js",
+  },
+  mac: {
+    category: "public.app-category.utilities",
+    icon: "public/icon.icns",
+  },
+  dmg: {
+    // background: 'build/appdmg.png', // dmg安装窗口背景图
+    icon: "public/icon.icns", // 客户端图标
+    iconSize: 100, // 安装图标大小
+    // 安装窗口中包含的项目和配置
+    contents: [
+      { x: 380, y: 280, type: "link", path: "/Applications" },
+      { x: 110, y: 280, type: "file" },
+    ],
+    window: { width: 500, height: 500 }, // 安装窗口大小
+  },
+  win: {
+    icon: "public/icon.icns",
+    target: ["nsis", "zip"],
+  },
+  nsis: {
+    oneClick: false, // 是否一键安装
+    allowElevation: true, // 允许请求提升。 如果为false，则用户必须使用提升的权限重新启动安装程序。
+    allowToChangeInstallationDirectory: true, // 允许修改安装目录
+    // installerIcon: "./build/icon.ico",// 安装图标
+    // uninstallerIcon: "./build/icons/bbb.ico",//卸载图标
+    // installerHeaderIcon: "./build/icon.ico", // 安装时头部图标
+    createDesktopShortcut: true, // 创建桌面图标
+    createStartMenuShortcut: true, // 创建开始菜单图标
+    shortcutName: "唐僧叨叨", // 图标名称
+  },
+  linux: {
+    target: ["AppImage", "deb"],
+    icon: "public/icon.icns",
+  },
+};

apps/web/package.json

@@ -2,7 +2,7 @@
   "name": "@tsdaodao/web",
   "version": "1.0.0",
   "private": true,
-  "homepage": "./",
+  "main": "out-election/main/index.js",
   "dependencies": {
     "@tauri-apps/api": "^1.1.0",
     "@tsdaodao/base": "*",
@@ -13,6 +13,7 @@
     "@types/react-mentions": "^4.1.5",
     "@types/react-virtualized": "^9.21.22",
     "classnames": "^2.3.1",
+    "howler": "^2.2.4",
     "react": "^17.0.2",
     "react-app-rewired": "^2.1.8",
     "react-lazyload": "^3.2.0",
@@ -26,24 +27,39 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
+    "@types/howler": "^2.2.11",
     "@types/jest": "^24.0.0",
-    "@types/node": "^12.0.0",
+    "@types/node": "^20.10.5",
     "@types/react": "^16.9.0",
+    "concurrently": "^8.2.2",
     "cross-env": "^7.0.3",
     "customize-cra": "^1.0.0",
+    "electron": "26.0.0",
+    "electron-builder": "^24.9.1",
+    "electron-log": "^5.0.1",
     "eslint-config-react-app": "^7.0.1",
+    "kill-port": "^2.0.1",
+    "npm-run-all": "^4.1.5",
     "postcss-normalize": "^10.0.1",
     "react-dom": "^17.0.2",
     "react-scripts": "5.0.0",
     "terser-webpack-plugin": "^5.3.9",
-    "typescript": "~3.7.2",
+    "tsc-watch": "^6.0.4",
+    "typescript": "^5.3.3",
+    "wait-on": "^7.2.0",
     "webpack-bundle-analyzer": "^4.5.0"
   },
   "scripts": {
     "start": "cross-env BROWSER=none REACT_APP_VERSION=$npm_package_version react-app-rewired start",
     "dev": "cross-env MODE=dev BROWSER=none REACT_APP_VERSION=$npm_package_version react-app-rewired start",
+    "dev-ele": "kill-port 3000 && concurrently -k -n=web,ele -c=green,blue \"yarn dev\" \"wait-on tcp:3000 && npm-run-all watch\"",
+    "watch": "tsc-watch -p tsconfig.e.json --onSuccess \"npm-run-all start:electron\"",
+    "start:electron": "cross-env NODE_ENV=development electron .",
     "build": "cross-env REACT_APP_VERSION=$npm_package_version react-app-rewired build",
     "build:analyzer": "cross-env ANALYZER=true REACT_APP_VERSION=$npm_package_version react-app-rewired build",
+    "build-ele:mac": "tsc -p tsconfig.e.json && electron-builder --mac -c",
+    "build-ele:win": "tsc -p tsconfig.e.json && electron-builder --win -c",
+    "build-ele": "tsc -p tsconfig.e.json && electron-builder -mw -c",
     "test": "react-app-rewired test",
     "eject": "react-app-rewired eject",
     "tauri": "tauri"

apps/web/src-election/main/index.ts

@@ -0,0 +1,19 @@
+import { app, BrowserWindow, Menu } from "electron";
+
+import { createWindow } from "./utils/createWindow";
+
+app.on("ready", () => {
+  // 设置app菜单
+  // Menu.setApplicationMenu(createAppMenu());
+  createWindow(); // 创建窗口
+  // 通常在 macOS 上，当点击 dock 中的应用程序图标时，如果没有其他打开的窗口，那么程序会重新创建一个窗口。
+  app.on(
+    "activate",
+    () => BrowserWindow.getAllWindows().length === 0 && createWindow()
+  );
+});
+
+// 除了 macOS 外，当所有窗口都被关闭的时候退出程序。 macOS窗口全部关闭时,dock中程序不会退出
+app.on("window-all-closed", () => {
+  process.platform !== "darwin" && app.quit();
+});

apps/web/src-election/main/utils/createWindow.ts

@@ -0,0 +1,35 @@
+import { BrowserWindow, screen } from "electron";
+import { join } from "path";
+
+export function createWindow() {
+  const NODE_ENV = process.env.NODE_ENV;
+  const { width, height } = screen.getPrimaryDisplay().workAreaSize;
+  // 生成窗口实例
+  const mainWin = new BrowserWindow({
+    width, // * 指定启动app时的默认窗口尺寸
+    height, // * 指定启动app时的默认窗口尺寸
+    frame: true, // * app边框(包括关闭,全屏,最小化按钮的导航栏) @false: 隐藏
+    titleBarStyle: "hidden",
+    transparent: true, // * app 背景透明
+    hasShadow: false, // * app 边框阴影
+    show: false, // 启动窗口时隐藏,直到渲染进程加载完成「ready-to-show 监听事件」 再显示窗口,防止加载时闪烁
+    resizable: true, // 禁止手动修改窗口尺寸
+    webPreferences: {
+      // 加载脚本
+      preload: join(__dirname, "../..", "preload/index"),
+      nodeIntegration: true,
+    },
+  });
+
+  // 启动窗口时隐藏,直到渲染进程加载完成「ready-to-show 监听事件」 再显示窗口,防止加载时闪烁
+  mainWin.once("ready-to-show", () => {
+    mainWin.show(); // 显示窗口
+  });
+
+  if (NODE_ENV === "development") mainWin.loadURL("http://localhost:3000");
+  if (NODE_ENV !== "development") {
+    process.env.DIST_ELECTRON = join(__dirname, '../');
+    const WEB_URL = join(process.env.DIST_ELECTRON, "../../build/index.html");
+    mainWin.loadFile(WEB_URL);
+  }
+}

apps/web/src-election/preload/index.ts

@@ -0,0 +1,3 @@
+import { contextBridge, ipcRenderer } from "electron";
+
+contextBridge.exposeInMainWorld("__POWERED_ELECTRON__", true);

apps/web/src/index.tsx

@@ -1,49 +1,48 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
-import  { BaseModule, WKApp } from '@tsdaodao/base';
-import  { LoginModule } from '@tsdaodao/login';
-import  { DataSourceModule } from '@tsdaodao/datasource';
-import {ContactsModule} from '@tsdaodao/contacts';
+import React from "react";
+import ReactDOM from "react-dom";
+import "./index.css";
+import App from "./App";
+import reportWebVitals from "./reportWebVitals";
+import { BaseModule, WKApp } from "@tsdaodao/base";
+import { LoginModule } from "@tsdaodao/login";
+import { DataSourceModule } from "@tsdaodao/datasource";
+import { ContactsModule } from "@tsdaodao/contacts";
 
-const apiURL = "https://api.botgate.cn/v1/"
+const apiURL = "https://api.botgate.cn/v1/";
 
-if(!(window as any).__TAURI_IPC__) { // tauri环境
-  if(process.env.NODE_ENV === "development") {
-    WKApp.apiClient.config.apiURL = apiURL
-  }else {
-    WKApp.apiClient.config.apiURL = "/api/v1/" // 正式环境地址 (通用打包镜像，用此相对地址),打包出来的镜像可以通过API_URL环境变量来修改API地址
+if ((window as any).__TAURI_IPC__) {
+  // tauri环境
+  console.log("tauri环境");
+  WKApp.apiClient.config.apiURL = apiURL;
+} else if ((window as any)?.__POWERED_ELECTRON__) {
+  console.log("__POWERED_ELECTRON__环境");
+  WKApp.apiClient.config.apiURL = apiURL;
+} else {
+  if (process.env.NODE_ENV === "development") {
+    WKApp.apiClient.config.apiURL = apiURL;
+  } else {
+    WKApp.apiClient.config.apiURL = "/api/v1/"; // 正式环境地址 (通用打包镜像，用此相对地址),打包出来的镜像可以通过API_URL环境变量来修改API地址
   }
-}else {
-  console.log("tauri环境")
-  WKApp.apiClient.config.apiURL = apiURL
 }
 
+WKApp.apiClient.config.tokenCallback = () => {
+  return WKApp.loginInfo.token;
+};
+WKApp.config.appVersion = `${process.env.REACT_APP_VERSION || "0.0.0"}`;
 
-
-
-WKApp.apiClient.config.tokenCallback = ()=> {
-  return WKApp.loginInfo.token
-}
-WKApp.config.appVersion = `${process.env.REACT_APP_VERSION || "0.0.0"}`
-
-WKApp.loginInfo.load() // 加载登录信息
+WKApp.loginInfo.load(); // 加载登录信息
 
 WKApp.shared.registerModule(new BaseModule()); // 基础模块
-WKApp.shared.registerModule(new DataSourceModule()) // 数据源模块
+WKApp.shared.registerModule(new DataSourceModule()); // 数据源模块
 WKApp.shared.registerModule(new LoginModule()); // 登录模块
 WKApp.shared.registerModule(new ContactsModule()); // 联系模块
 
-WKApp.shared.startup() // app启动
-
+WKApp.shared.startup(); // app启动
 
 ReactDOM.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
-  document.getElementById('root')
+  document.getElementById("root")
 );
 reportWebVitals();
-

apps/web/tsconfig.e.json

@@ -0,0 +1,15 @@
+{
+  "exclude": ["node_modules", "src"],
+  "include": ["src-election/**/*"],
+  "compilerOptions": {
+    "outDir": "./out-election",
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "noEmit": false,
+    "baseUrl": "./",
+    "skipLibCheck":true,
+    "sourceMap": false
+  }
+}

package.json

@@ -9,8 +9,10 @@
     "react-error-overlay": "6.0.9"
   },
   "scripts": {
-    "build": "turbo run build",
     "dev": "turbo run dev --parallel",
+    "dev-ele": "turbo run dev-ele --parallel",
+    "build": "turbo run build",
+    "build-ele": "turbo run build-ele",
     "lint": "turbo run lint",
     "format": "prettier --write \"**/*.{ts,tsx,md}\""
   },

packages/eslint-config-custom/index.js

@@ -1,7 +1,8 @@
 module.exports = {
-  extends: ["next", "turbo", "prettier"],
+  extends: ["next", "turbo", "prettier", "@typescript-eslint/parser"],
   rules: {
     "@next/next/no-html-link-for-pages": "off",
     "react/jsx-key": "off",
+    "@next/next/no-img-element": "off"
   },
 };

packages/eslint-config-custom/package.json

@@ -4,6 +4,7 @@
   "main": "index.js",
   "license": "MIT",
   "dependencies": {
+    "@typescript-eslint/parser": "^6.16.0",
     "eslint-config-next": "^12.0.8",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-react": "7.28.0",

turbo.json

@@ -1,14 +1,22 @@
 {
   "$schema": "https://turborepo.org/schema.json",
   "pipeline": {
+    "dev": {
+      "cache": false
+    },
+    "dev-ele": {
+      "dependsOn": ["^dev"],
+      "cache": false
+    },
     "build": {
       "outputs": [".next/**"]
     },
+    "build-ele": {
+      "outputs": [".next/**"],
+      "dependsOn": ["^build"]
+    },
     "lint": {
       "outputs": []
-    },
-    "dev": {
-      "cache": false
     }
   }
 }