Merge branch 'master' into master

README.md

@@ -29,6 +29,13 @@ English | [简体中文](./README.zh-CN.md)
 
 Based on electron open source toolbox, free integration of rich plug-ins, to create the ultimate desktop efficiency tool。Rubick is one of the heroes of Dota ，The core skill is the ability to use other heroes as plug-ins，Finished the walk 。Very consistent with the design concept of this tool，So named Rubick。
 
+## Sponsor
+我们通过有偿的方式积累高质量的常见问题、最佳实践文档，加入星球后可以和作者进行互动和答疑。我们提供技术支持、答疑解惑、定制化插件开发、二次定制化开发 rubick 等等官方服务。
+
+权益明细可以参考文档：[权益明细](https://rubickcenter.github.io/rubick/super/)
+
+<img width=400 src=https://picx.zhimg.com/80/v2-6deabf65175d18080439ef813102d18c_720w.png />
+
 ## Installation package
 * [Rubick Mac OS](https://github.com/rubickCenter/rubick/releases)
 * [Rubick Windows](https://github.com/rubickCenter/rubick/releases)
@@ -45,8 +52,6 @@ Based on electron open source toolbox, free integration of rich plug-ins, to cre
 - [x] Support Windows
 - [x] Support Linux
 
-
-
 ## Docs
 
 [Rubick Docs](https://rubickCenter.github.io/rubick/)
@@ -80,12 +85,6 @@ Search for `Preferences` in `rubick`, and then turn on the `Auto Paste` function
 If you need more features, please come here to give us suggestions：[issues](https://github.com/rubickCenter/rubick/issues) 。
 We will add valuable ideas to the later development. At the same time, welcome to join and build together。
 
-## Sponsor
-开源不容易，如果该项目对你有用的话，可以打赏我们喝杯 coffee ☕️.
-
-<img width=200 src=https://pic1.zhimg.com/80/v2-688385687a37e962fe32daf136139feb_720w.png />
-<img width=200 src=https://pica.zhimg.com/80/v2-1ba296fd2cece45ee1094ee7c259035c_720w.png />
-
 ## 贡献
 This project exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)]. <a href="https://github.com/rubickCenter/rubick/graphs/contributors"><img src="https://opencollective.com/rubick/contributors.svg?width=890&button=false" /></a>
 

README.zh-CN.md

@@ -30,6 +30,13 @@
 
 基于 electron 的开源工具箱，自由集成丰富插件，打造极致的桌面端效能工具。Rubick(拉比克) 是 dota 里面的英雄之一，其核心技能是插件化使用其他英雄的技能，用完即走。非常符合本工具的设计理念，所以取名 Rubick。
 
+## 赞助和服务
+我们通过有偿的方式积累高质量的常见问题、最佳实践文档，加入星球后可以和作者进行互动和答疑。我们提供技术支持、答疑解惑、定制化插件开发、二次定制化开发 rubick 等等官方服务。
+
+权益明细可以参考文档：[权益明细](https://rubickcenter.github.io/rubick/super/)
+
+<img width=400 src=https://picx.zhimg.com/80/v2-6deabf65175d18080439ef813102d18c_720w.png />
+
 ## 安装包
 * [Rubick Mac OS](https://github.com/rubickCenter/rubick/releases)
 * [Rubick Windows](https://github.com/rubickCenter/rubick/releases)
@@ -78,12 +85,6 @@
 如果您还需要更多功能，欢迎来这里给我们提建议：[issues](https://github.com/rubickCenter/rubick/issues) 。
 有价值的想法我们会加入到后期的开发当中。同时也欢迎一起加入共建。
 
-## 赞助
-开源不容易，如果该项目对你有用的话，可以打赏我们喝杯 coffee ☕️.
-
-<img width=200 src=https://pic1.zhimg.com/80/v2-688385687a37e962fe32daf136139feb_720w.png />
-<img width=200 src=https://pica.zhimg.com/80/v2-1ba296fd2cece45ee1094ee7c259035c_720w.png />
-
 ## 贡献
 This project exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)]. <a href="https://github.com/rubickCenter/rubick/graphs/contributors"><img src="https://opencollective.com/rubick/contributors.svg?width=890&button=false" /></a>
 

docs/docs/.vuepress/dist

@@ -1 +1 @@
-Subproject commit 331f83384fb3b4b50f651e829de0d92b08af6e96
+Subproject commit 7b52f0fb4a06d8036a35e125368cf2ddd67dbaa8

docs/docs/super/README.md

@@ -7,34 +7,13 @@
 ## 可以提供哪些服务？
 我们收集了大量用户的问题，目前约定可以支持到的服务有：
 1. 二次定制化开发 `rubick`
-2. 轻量级插件开发 (开发工作量 <= 3 天)
+2. 轻量级插件开发
 3. `rubick` 实现原理手把手介绍
 4. `rubick` 使用答疑
 5. `rubick` 内网部署一条龙服务
 6. 前端圈各种技术支持（作者分别是前蚂蚁集团和字节跳动的前端技术专家）
 7. 未来能提供的一切...
 
-## 费用介绍
-### 服务分类（不满意全额退款）
-
-1. **月度体验卡：<span style="color: red">50 元</span>**
-   * 二次定制化开发 1 次
-   * 轻量级插件开发 1 次
-2. **季度体验卡：<span style="color: red">120 元</span>**
-   * 二次定制化开发 2 次
-   * 轻量级插件开发 2 次
-3. **年卡：<span style="color: red">380 元</span>**
-   * 二次定制化开发 6 次
-   * 轻量级插件开发 6 次
-4. **买断：<span style="color: red">1000 元</span>**
-   * 二次定制化开发每年 10 次
-   * 轻量级插件开发每年 10 次
-
-### 支付方式：
-
-<img width=200 src=https://pic1.zhimg.com/80/v2-688385687a37e962fe32daf136139feb_720w.png />
-<img width=200 src=https://pica.zhimg.com/80/v2-1ba296fd2cece45ee1094ee7c259035c_720w.png />
-
-**支持成功后截图添加作者微信，我拉你进保姆服务群：**
-
-<img width=300 src=https://picx.zhimg.com/80/v2-6a10900ea323ce983ce9ca749d050937_720w.png />
+## 如何加入特殊服务？
+扫描下方的二维码，加入知识星球即可：
+<img width=400 src=https://picx.zhimg.com/80/v2-6deabf65175d18080439ef813102d18c_720w.png />

guide/.gitignore

@@ -0,0 +1,23 @@
+.DS_Store
+node_modules
+/dist
+
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

guide/README.md

@@ -0,0 +1,24 @@
+# guide
+
+## Project setup
+```
+yarn install
+```
+
+### Compiles and hot-reloads for development
+```
+yarn serve
+```
+
+### Compiles and minifies for production
+```
+yarn build
+```
+
+### Lints and fixes files
+```
+yarn lint
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).

guide/babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}

guide/jsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "esnext",
+    "baseUrl": "./",
+    "moduleResolution": "node",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  }
+}

guide/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "guide",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve --port 8083",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "core-js": "^3.8.3",
+    "vue": "^3.2.13"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.12.16",
+    "@babel/eslint-parser": "^7.12.16",
+    "@vue/cli-plugin-babel": "~5.0.0",
+    "@vue/cli-plugin-eslint": "~5.0.0",
+    "@vue/cli-service": "~5.0.0",
+    "eslint": "^7.32.0",
+    "eslint-plugin-vue": "^8.0.3"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/vue3-essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "@babel/eslint-parser"
+    },
+    "rules": {}
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead",
+    "not ie 11"
+  ]
+}

guide/public/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="">
+  <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">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title>rubick 桌面端开源工具箱</title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

guide/src/App.vue

@@ -0,0 +1,166 @@
+<template>
+  <div class="guide-container">
+    <div class="step0" v-show="step === 0">
+      <div class="title">您好，我叫 Rubick</div>
+      <div class="desc">快捷键 <span class="down-line">Alt + R</span> 可以快速打开我</div>
+      <div class="img-container">
+        <img class="img" src="./assets/img.png" />
+        <div class="info">
+          <svg class="top-icon" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="NorthIcon"><path d="m5 9 1.41 1.41L11 5.83V22h2V5.83l4.59 4.59L19 9l-7-7-7 7z"></path></svg>
+          点击 logo 进入插件市场
+        </div>
+      </div>
+    </div>
+    <div class="step0 step1" v-show="step === 1">
+      <div class="title">选择需要的插件安装</div>
+      <div class="desc">基于 <span class="down-line">npm</span> 的插件包管理，像小程序一样，用完即走</div>
+      <div class="img-container">
+        <img class="img" src="./assets/img_1.png" />
+      </div>
+    </div>
+    <div class="step0" v-show="step === 2">
+      <div class="title"><span class="down-line">关键字</span>搜索应用和插件</div>
+      <div class="desc">搜索框内输入关键字可以搜索安装的应用和插件</div>
+      <div class="img-container">
+        <img class="img" src="./assets/img_2.png" />
+      </div>
+    </div>
+    <div class="step0 step1" v-show="step === 3">
+      <div class="title">完全开源免费，支持内网部署</div>
+      <div class="desc">进入插件市场的 <span class="down-line">账户与设置</span> 菜单，进行内网部署设置</div>
+      <div class="img-container">
+        <img class="img" src="./assets/img_3.png" />
+      </div>
+    </div>
+    <div class="footer">
+      <div></div>
+      <div class="step">
+        <span class="step-num">{{ step + 1 }} / 4</span>
+        <div class="button" @click="netStep">{{ step + 1 === 4 ? '完成' : '下一步' }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const step = ref(0);
+const { ipcRenderer } = window.require('electron');
+
+const netStep = () => {
+  if (step.value >= 3) {
+    return ipcRenderer.send('guide:service', { type: 'close' });
+  }
+  step.value = step.value + 1;
+}
+
+
+</script>
+
+<style lang="less">
+@text-color: #574777; // 全局主色
+@primary-color: #ff4ea4; // 全局主色
+
+* {
+  margin: 0;
+  padding: 0;
+}
+.guide-container {
+  .step0 {
+    padding: 28px;
+    padding-top: 36px;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    width: 100vw;
+    height: 100vh;
+  }
+  .title {
+    font-size: 28px;
+    font-weight: 600;
+    color: @text-color;
+  }
+  .down-line {
+    line-height: 24px;
+    color: @primary-color;
+  }
+  .desc {
+    padding-top: 10px;
+    box-sizing: border-box;
+    font-size: 24px;
+  }
+  .img-container {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+  .img {
+    width: 680px;
+  }
+  .info {
+    padding-top: 42px;
+    margin-right: 178px;
+    box-sizing: border-box;
+    width: 100%;
+    text-align: right;
+    position: relative;
+    color: @text-color;
+    .top-icon {
+      position: absolute;
+      right: 0;
+      top: 0;
+      user-select: none;
+      width: 1em;
+      height: 1em;
+      display: inline-block;
+      fill: currentcolor;
+      flex-shrink: 0;
+      transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+      font-size: 1.5rem;
+    }
+  }
+}
+.footer {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px;
+  box-sizing: border-box;
+  .step {
+    display: flex;
+    align-items: center;
+  }
+  .step-num {
+    margin-right: 20px;
+  }
+  .button {
+    width: 100px;
+    height: 40px;
+    line-height: 40px;
+    background: @primary-color;
+    color: #fff;
+    display: flex;
+    aligin-items: center;
+    justify-content: center;
+    border-radius: 4px;
+  }
+}
+
+.step4 {
+  .img {
+    width: 300px;
+  }
+}
+.step1 {
+  .img {
+    width: 550px;
+  }
+}
+</style>

guide/src/main.js

@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+
+createApp(App).mount('#app')

guide/vue.config.js

@@ -0,0 +1,16 @@
+const path = require('path');
+
+module.exports = {
+  css: {
+    // 配置css模块
+    loaderOptions: {
+      // 向预处理器 Loader 传递配置选项
+      less: {
+        // 配置less（其他样式解析用法一致）
+        javascriptEnabled: true, // 设置为true
+      },
+    },
+  },
+  outputDir: path.join(__dirname, '../public/guide'),
+  publicPath: process.env.NODE_ENV === 'production' ? '' : '/',
+};

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rubick",
-  "version": "2.3.6",
+  "version": "2.4.0",
   "author": "muwoo <2424880409@qq.com>",
   "private": true,
   "scripts": {

public/feature/index.html

@@ -1 +1 @@
-<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="favicon.ico"><title>feature</title><link href="css/app.d7ae2045.css" rel="preload" as="style"><link href="js/app.6a181716.js" rel="preload" as="script"><link href="js/chunk-vendors.7167f2bb.js" rel="preload" as="script"><link href="css/app.d7ae2045.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but feature doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="js/chunk-vendors.7167f2bb.js"></script><script src="js/app.6a181716.js"></script></body></html>
+<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="favicon.ico"><title>feature</title><link href="css/app.518884da.css" rel="preload" as="style"><link href="css/chunk-vendors.7f9dcb72.css" rel="preload" as="style"><link href="js/app.e81c0c2f.js" rel="preload" as="script"><link href="js/chunk-vendors.cc39b888.js" rel="preload" as="script"><link href="css/chunk-vendors.7f9dcb72.css" rel="stylesheet"><link href="css/app.518884da.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but feature doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="js/chunk-vendors.cc39b888.js"></script><script src="js/app.e81c0c2f.js"></script></body></html>

public/guide/css/app.38aced59.css

@@ -0,0 +1 @@
+*{margin:0;padding:0}.guide-container .step0{padding:28px;padding-top:36px;box-sizing:border-box;display:flex;flex-direction:column;width:100vw;height:100vh}.guide-container .title{font-size:28px;font-weight:600;color:#574777}.guide-container .down-line{line-height:24px;color:#ff4ea4}.guide-container .desc{padding-top:10px;box-sizing:border-box;font-size:24px}.guide-container .img-container{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center}.guide-container .img{width:680px}.guide-container .info{padding-top:42px;margin-right:178px;box-sizing:border-box;width:100%;text-align:right;position:relative;color:#574777}.guide-container .info .top-icon{position:absolute;right:0;top:0;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:1em;height:1em;display:inline-block;fill:currentcolor;flex-shrink:0;transition:fill .2s cubic-bezier(.4,0,.2,1) 0ms;font-size:1.5rem}.footer{position:fixed;bottom:0;left:0;width:100%;justify-content:space-between;padding:20px;box-sizing:border-box}.footer,.footer .step{display:flex;align-items:center}.footer .step-num{margin-right:20px}.footer .button{width:100px;height:40px;line-height:40px;background:#ff4ea4;color:#fff;display:flex;aligin-items:center;justify-content:center;border-radius:4px}.step4 .img{width:300px}.step1 .img{width:550px}

public/guide/index.html

@@ -0,0 +1 @@
+<!doctype html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="favicon.ico"><title>rubick 桌面端开源工具箱</title><script defer="defer" src="js/chunk-vendors.7951834e.js"></script><script defer="defer" src="js/app.c05799c8.js"></script><link href="css/app.38aced59.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but guide doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div></body></html>

public/guide/js/app.c05799c8.js

@@ -0,0 +1,2 @@
+(function(){"use strict";var i={360:function(i,n,s){var e=s(963),t=s(252),a=s(577),c=s.p+"img/img.1fca5a5d.png",r=s.p+"img/img_1.d68b4d23.png",l=s.p+"img/img_2.d6eaf56d.png",o=s.p+"img/img_3.39f7605a.png",u=s(262);const d={class:"guide-container"},v={class:"step0"},p=(0,t._)("div",{class:"title"},"您好，我叫 Rubick",-1),f=(0,t._)("div",{class:"desc"},[(0,t.Uk)("快捷键 "),(0,t._)("span",{class:"down-line"},"Alt + R"),(0,t.Uk)(" 可以快速打开我")],-1),g=(0,t._)("div",{class:"img-container"},[(0,t._)("img",{class:"img",src:c}),(0,t._)("div",{class:"info"},[(0,t._)("svg",{class:"top-icon",focusable:"false","aria-hidden":"true",viewBox:"0 0 24 24","data-testid":"NorthIcon"},[(0,t._)("path",{d:"m5 9 1.41 1.41L11 5.83V22h2V5.83l4.59 4.59L19 9l-7-7-7 7z"})]),(0,t.Uk)(" 点击 logo 进入插件市场 ")])],-1),m=[p,f,g],w={class:"step0 step1"},_=(0,t.uE)('<div class="title">选择需要的插件安装</div><div class="desc">基于 <span class="down-line">npm</span> 的插件包管理，像小程序一样，用完即走</div><div class="img-container"><img class="img" src="'+r+'"></div>',3),h=[_],b={class:"step0"},y=(0,t.uE)('<div class="title"><span class="down-line">关键字</span>搜索应用和插件</div><div class="desc">搜索框内输入关键字可以搜索安装的应用和插件</div><div class="img-container"><img class="img" src="'+l+'"></div>',3),O=[y],k={class:"step0 step1"},j=(0,t.uE)('<div class="title">完全开源免费，支持内网部署</div><div class="desc">进入插件市场的 <span class="down-line">账户与设置</span> 菜单，进行内网部署设置</div><div class="img-container"><img class="img" src="'+o+'"></div>',3),x=[j],F={class:"footer"},E=(0,t._)("div",null,null,-1),z={class:"step"},C={class:"step-num"};var R={__name:"App",setup(i){const n=(0,u.iH)(0),{ipcRenderer:s}=window.require("electron"),c=()=>{if(n.value>=3)return s.send("guide:service",{type:"close"});n.value=n.value+1};return(i,s)=>((0,t.wg)(),(0,t.iD)("div",d,[(0,t.wy)((0,t._)("div",v,m,512),[[e.F8,0===n.value]]),(0,t.wy)((0,t._)("div",w,h,512),[[e.F8,1===n.value]]),(0,t.wy)((0,t._)("div",b,O,512),[[e.F8,2===n.value]]),(0,t.wy)((0,t._)("div",k,x,512),[[e.F8,3===n.value]]),(0,t._)("div",F,[E,(0,t._)("div",z,[(0,t._)("span",C,(0,a.zw)(n.value+1)+" / 4",1),(0,t._)("div",{class:"button",onClick:c},(0,a.zw)(n.value+1===4?"完成":"下一步"),1)])])]))}};const U=R;var A=U;(0,e.ri)(A).mount("#app")}},n={};function s(e){var t=n[e];if(void 0!==t)return t.exports;var a=n[e]={exports:{}};return i[e](a,a.exports,s),a.exports}s.m=i,function(){var i=[];s.O=function(n,e,t,a){if(!e){var c=1/0;for(u=0;u<i.length;u++){e=i[u][0],t=i[u][1],a=i[u][2];for(var r=!0,l=0;l<e.length;l++)(!1&a||c>=a)&&Object.keys(s.O).every((function(i){return s.O[i](e[l])}))?e.splice(l--,1):(r=!1,a<c&&(c=a));if(r){i.splice(u--,1);var o=t();void 0!==o&&(n=o)}}return n}a=a||0;for(var u=i.length;u>0&&i[u-1][2]>a;u--)i[u]=i[u-1];i[u]=[e,t,a]}}(),function(){s.d=function(i,n){for(var e in n)s.o(n,e)&&!s.o(i,e)&&Object.defineProperty(i,e,{enumerable:!0,get:n[e]})}}(),function(){s.g=function(){if("object"===typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(i){if("object"===typeof window)return window}}()}(),function(){s.o=function(i,n){return Object.prototype.hasOwnProperty.call(i,n)}}(),function(){s.p=""}(),function(){var i={143:0};s.O.j=function(n){return 0===i[n]};var n=function(n,e){var t,a,c=e[0],r=e[1],l=e[2],o=0;if(c.some((function(n){return 0!==i[n]}))){for(t in r)s.o(r,t)&&(s.m[t]=r[t]);if(l)var u=l(s)}for(n&&n(e);o<c.length;o++)a=c[o],s.o(i,a)&&i[a]&&i[a][0](),i[a]=0;return s.O(u)},e=self["webpackChunkguide"]=self["webpackChunkguide"]||[];e.forEach(n.bind(null,0)),e.push=n.bind(null,e.push.bind(e))}();var e=s.O(void 0,[998],(function(){return s(360)}));e=s.O(e)})();
+//# sourceMappingURL=app.c05799c8.js.map

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);