Merge branch 'master' into master

src/common/constans/defaultConfig.ts

@@ -1,5 +1,5 @@
 export default {
-  version: 11,
+  version: 12,
   perf: {
     custom: {
       primaryColor: '#ff4ea4',
@@ -22,6 +22,7 @@ export default {
       hideOnBlur: true,
       autoPast: false,
       darkMode: false,
+      guide: false,
       lang: 'zh-CN',
     },
     local: {

src/main/browsers/guide.ts

@@ -0,0 +1,82 @@
+import { BrowserWindow, ipcMain, nativeTheme, screen } from 'electron';
+import path from 'path';
+
+const getWindowPos = (width, height) => {
+  const screenPoint = screen.getCursorScreenPoint();
+  const displayPoint = screen.getDisplayNearestPoint(screenPoint);
+  return [
+    displayPoint.bounds.x + Math.round((displayPoint.bounds.width - width) / 2),
+    displayPoint.bounds.y +
+      Math.round((displayPoint.bounds.height - height) / 2),
+  ];
+};
+
+let win: any;
+
+export default () => {
+  const init = () => {
+    if (win) return;
+    ipcMain.on('guide:service', async (event, arg: { type: string }) => {
+      const data = await operation[arg.type]();
+      event.returnValue = data;
+    });
+    createWindow();
+  };
+
+  const createWindow = async () => {
+    const [x, y] = getWindowPos(800, 600);
+    win = new BrowserWindow({
+      show: false,
+      alwaysOnTop: true,
+      resizable: false,
+      fullscreenable: false,
+      minimizable: false,
+      maximizable: false,
+      // closable: false,
+      skipTaskbar: true,
+      autoHideMenuBar: true,
+      frame: false,
+      enableLargerThanScreen: true,
+      x,
+      y,
+      width: 800,
+      height: 600,
+      webPreferences: {
+        webSecurity: false,
+        enableRemoteModule: true,
+        backgroundThrottling: false,
+        contextIsolation: false,
+        webviewTag: true,
+        devTools: true,
+        nodeIntegration: true,
+      },
+    });
+    if (process.env.WEBPACK_DEV_SERVER_URL) {
+      // Load the url of the dev server if in development mode
+      win.loadURL('http://localhost:8083');
+    } else {
+      win.loadURL(`file://${path.join(__static, './guide/index.html')}`);
+    }
+    win.on('closed', () => {
+      win = undefined;
+    });
+
+    win.once('ready-to-show', () => {
+      // win.webContents.openDevTools();
+      win.show();
+    });
+  };
+  const getWindow = () => win;
+
+  const operation = {
+    close: () => {
+      win.close();
+      win = null;
+    },
+  };
+
+  return {
+    init,
+    getWindow,
+  };
+};

src/main/browsers/index.ts

@@ -1,4 +1,5 @@
 import main from './main';
 import runner from './runner';
 import detach from './detach';
-export { main, runner, detach };
+import guide from './guide';
+export { main, runner, detach, guide };

src/main/common/tray.ts

@@ -1,22 +1,23 @@
-import { dialog, Menu, Tray, app, shell, BrowserWindow } from "electron";
-import path from "path";
-import pkg from "../../../package.json";
-import os from "os";
-import API from "../common/api";
-import commonConst from "@/common/utils/commonConst";
+import { dialog, Menu, Tray, app, shell, BrowserWindow } from 'electron';
+import path from 'path';
+import pkg from '../../../package.json';
+import os from 'os';
+import API from '../common/api';
+import commonConst from '@/common/utils/commonConst';
+import { guide } from '../browsers';
 
 function createTray(window: BrowserWindow): Promise<Tray> {
-  return new Promise(resolve => {
+  return new Promise((resolve) => {
     let icon;
     if (commonConst.macOS()) {
-      icon = "./icons/icon@3x.png";
+      icon = './icons/icon@3x.png';
     } else if (commonConst.windows()) {
       icon =
         parseInt(os.release()) < 10
-          ? "./icons/icon@2x.png"
-          : "./icons/icon.ico";
+          ? './icons/icon@2x.png'
+          : './icons/icon.ico';
     } else {
-      icon = "./icons/icon@2x.png";
+      icon = './icons/icon@2x.png';
     }
     const appIcon = new Tray(path.join(__static, icon));
 
@@ -35,61 +36,67 @@ function createTray(window: BrowserWindow): Promise<Tray> {
     const createContextMenu = () =>
       Menu.buildFromTemplate([
         {
-          label: "帮助文档",
+          label: '帮助文档',
           click: () => {
             process.nextTick(() => {
-              shell.openExternal("https://github.com/clouDr-f2e/rubick");
+              shell.openExternal('https://github.com/clouDr-f2e/rubick');
             });
-          }
+          },
         },
         {
-          label: "意见反馈",
+          label: '引导教学',
+          click: () => {
+            guide().init();
+          },
+        },
+        {
+          label: '意见反馈',
           click: () => {
             process.nextTick(() => {
-              shell.openExternal("https://github.com/clouDr-f2e/rubick/issues");
+              shell.openExternal('https://github.com/clouDr-f2e/rubick/issues');
             });
-          }
+          },
         },
-        { type: "separator" },
+        { type: 'separator' },
         {
-          label: "显示窗口",
+          label: '显示窗口',
           accelerator: getShowAndHiddenHotKey(),
           click() {
             window.show();
-          }
+          },
         },
         {
-          label: "系统设置",
+          label: '系统设置',
           click() {
             openSettings();
-          }
+          },
         },
-        { type: "separator" },
+        { type: 'separator' },
         {
-          role: "quit",
-          label: "退出"
+          role: 'quit',
+          label: '退出',
         },
         {
-          label: "重启",
+          label: '重启',
           click() {
             app.relaunch();
             app.quit();
-          }
+          },
         },
 
-        { type: "separator" },
+        { type: 'separator' },
         {
-          label: "关于",
+          label: '关于',
           click() {
             dialog.showMessageBox({
-              title: "拉比克",
-              message: "极简、插件化的现代桌面软件",
-              detail: `Version: ${pkg.version}\nAuthor: muwoo`
+              title: '拉比克',
+              message: '极简、插件化的现代桌面软件',
+              detail: `Version: ${pkg.version}\nAuthor: muwoo`,
             });
-          }
-        }
+          },
+        },
       ]);
-    appIcon.on("click", () => {
+    appIcon.on('click', () => {
       appIcon.setContextMenu(createContextMenu());
       appIcon.popUpContextMenu();
     });

src/main/index.ts

@@ -5,7 +5,7 @@ import electron, {
   protocol,
   BrowserWindow,
 } from 'electron';
-import { main } from './browsers';
+import { main, guide } from './browsers';
 import commonConst from '../common/utils/commonConst';
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
@@ -56,6 +56,12 @@ class App {
   }
   onReady() {
     const readyFunction = () => {
+      const config = global.OP_CONFIG.get();
+      if (!config.perf.common.guide) {
+        guide().init();
+        config.perf.common.guide = true;
+        global.OP_CONFIG.set(config);
+      }
       this.createWindow();
       const mainWindow = this.windowCreator.getWindow();
       API.init(mainWindow);