📝 更新文档

This commit is contained in:
muwoo 2021-12-22 18:11:59 +08:00
parent acddbb724f
commit 024aace801
14 changed files with 35736 additions and 2 deletions

24
deploy-doc.sh Executable file
View File

@ -0,0 +1,24 @@
#!/usr/bin/env sh
# 确保脚本抛出遇到的错误
set -e
# 生成静态文件
cd docs && npm run docs:build
# 进入生成的文件夹
cd docs/.vuepress/dist
# 如果是发布到自定义域名
# echo 'www.example.com' > CNAME
git init
git add -A
git commit -m 'deploy'
# 如果发布到 https://<USERNAME>.github.io
# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master
# 如果发布到 https://<USERNAME>.github.io/<REPO>
git push -f git@github.com:rubickCenter/rubick2.git master:gh-pages
cd -

View File

@ -0,0 +1,42 @@
module.exports = {
title: 'Rubick',
description: '你的开源桌面插件应用',
base: '/',
themeConfig: {
themeColor: {
blue: "#2196f3",
red: "#2196f3",
green: "#2196f3",
orange: "#2196f3",
},
logo: '/images/logo.png',
nav: [
{ text: '使用文档', link: '/guide/' },
{ text: '开发者', link: '/dev/' },
],
sidebar: [
{
title: '使用文档', // 必要的
path: '/guide/', // 可选的, 标题的跳转链接,应为绝对路径且必须存在
sidebarDepth: 1, // 可选的, 默认值是 1
},
{
title: '开发者',
path: '/dev/',
},
{
title: 'API',
path: '/api/',
}
],
// 假定是 GitHub. 同时也可以是一个完整的 GitLab URL
repo: 'https://github.com/rubickCenter/rubick2',
// 自定义仓库链接文字。默认从 `themeConfig.repo` 中自动推断为
// "GitHub"/"GitLab"/"Bitbucket" 其中之一,或是 "Source"。
repoLabel: 'Github',
// 默认是 false, 设置为 true 来启用
editLinks: true,
// 默认为 "Edit this page"
editLinkText: '帮助我们改善此页面!'
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 47 KiB

View File

@ -0,0 +1,7 @@
$accentColor = #ff4ea4//
$codeBgColor = #282c34//
//f12class
.sidebar-group.is-sub-group > .sidebar-heading:not(.clickable){
opacity :1
}

16
docs/docs/README.md Normal file
View File

@ -0,0 +1,16 @@
---
home: true
heroImage: /images/logo.png
heroText: Rubick
tagline: 基于 Electron 开源的插件化工具箱
actionText: 快速上手 →
actionLink: /guide/
features:
- title: 极其轻量
details: rubick 仅仅包含插件运行所需要的API本身不内置任何插件可以看成是 electron 的二次封装框架。
- title: 更强大的插件能力
details: 不仅仅支持ui插件需要搜索呼起使用还支持系统插件不需要搜索只要rubick在运行系统插件即可用
- title: 更便捷的插件管理
details: rubick 插件全部托管在 npm 仓库rubick 插件的安装、使用、删除就是 npm 包的安装、使用、删除
footer: MIT Licensed | Copyright (c) 2021 muwoo
---

261
docs/docs/api/README.md Normal file
View File

@ -0,0 +1,261 @@
## 事件
### onPluginReady(callback)、onPluginEnter(callback)
* `callback` Function
`callback` 内会返回一个 `object` 对象,来描述进入当前插件的环境信息:
* `code` String
> plugin.json 配置的 feature.code
* `type` String
> plugin.json 配置的 feature.cmd.type可以为 "text"、"img"、 "files"、 "regex"、 "over"、"window"
* payload String | Object | Array
> feature.cmd.type 对应匹配的数据
当插件装载成功rubick 将会主动调用这个方法, 所有的 `api` 都应该在 `onPluginReady` 之后进行调用。
#### 示例
```js
rubcik.onPluginReady(({ code, type, payload }) => {
console.log('插件装配完成,已准备好')
})
/*
type 为 "files" 时, payload 值示例
[
{
"isFile": true,
"isDirectory": false,
"name": "demo.js",
"path": "C:\\demo.js"
}
]
type 为 "img" 时, payload 值示例
data:image/png;base64,...
type 为 "text"、"regex"、 "over" 时, payload 值为进入插件时的主输入框文本
*/
```
### onPluginOut(callback)
* `callback` Function
每当插件从前台进入到后台时uTools 将会主动调用这个方法。
## 窗口交互
### hideMainWindow()
隐藏主窗口
### showMainWindow()
显示主窗口
### setExpendHeight(height)
执行该方法将会修改插件窗口的高度。
* `height` Integer
* 返回 `Boolean`
#### 示例
```js
rubick.setExpendHeight(100)
```
### setSubInput(onChange, placeholder)
设置插件输入框监听,当进入插件后,用户搜索会触发`onChange` 函数
* `onChange` Function
* `Object`
* `text` String
> 子输入框文本修改时触发
* `placeholder` String (可选)
> 子输入框占位符
* `isFocus` Boolean (可选)
> 子输入框是否获得焦点,默认 true
`返回 Boolean`
#### 示例
```js
rubick.setSubInput(({ text }) => {
console.log(text)
}, '搜索')
```
### setSubInputValue(value)
直接对子输入框的值进行设置。
* `value` String
* `返回` Boolean
#### 示例
```js
rubick.setSubInputValue('uTools')
```
## 系统
### showNotification(body)
显示系统通知
* `body` String
```js
rubick.showNotification('Hi, rubick')
```
### shellOpenPath(fullPath)
打开给定路径的文件
* `fullPath` String
```js
rubick.shellOpenPath('/path/file')
```
### shellOpenExternal(url)
浏览器打开URL
* `url` String
```js
rubick.shellOpenExternal('https://www.baidu.com')
```
### getPath(name)
electron 内置 getPath 能力,详见 [electron API](https://www.electronjs.org/docs/latest/api/app#appgetpathname)
```js
console.log(rubick.getPath('cache'));
```
## 本地数据库
`rubick db` 是基于开源的 [pouchdb](https://github.com/pouchdb/pouchdb) 封装的
### rubick.db.put(doc)
* `doc` Object
* `返回` Object
#### 示例
```js
// 创建请求
rubick.db.put({
_id: "demo",
data: "demo"
})
// 返回 {id: "demo", ok: true, rev: "1-05c9b92e6f24287dc1f4ec79d9a34fa8"}
// 更新请求
rubick.db.put({
_id: "demo",
data: "demo",
_rev: "1-05c9b92e6f24287dc1f4ec79d9a34fa8"
})
```
_id 代表这个文档在数据库中唯一值,如果值不存在,则会创建一个新的文档,如果值已经存在,则会进行更新。你可能已经注意到,返回对象中包含一个 rev
属性,这是代表此文档的版本,每次对文档进行更新时,都要带上最新的版本号,否则更新将失败,版本化的意义在于解决同步时数据冲突。
另外需要注意,每次更新时都要传入完整的文档数据,无法对单个字段进行更新。
### rubick.db.get(id)
执行该方法将会根据文档 ID 获取数据
* `id` String
* `返回` Object
```js
rubick.db.get("demo")
// 返回 {_id: "demo", _rev: "3-9836c5c68af5aef618e17d615882942a", data: "demo"}
```
### rubick.db.remove(doc)
* `doc` String | Object
* `返回` Object 执行该方法将会删除数据库文档,可以传入文档对象或文档 id 进行操作。
```js
rubick.db.remove("demo")
// 返回 {id: "demo", ok: true, rev: "2-effe5dbc23dffc180d8411b23f3108fb"}
```
### rubick.db.bulkDocs(docs)
* `docs` Array
* `返回` Array 执行该方法将会批量更新数据库文档,传入需要更改的文档对象合并成数组进行批量更新。
```js
rubick.db.bulkDocs([{
_id: "demo1",
data: "demo",
_rev: "1-c8817a74e292eda4cba1a45924853af6"
}, {
_id: "demo2",
data: "demo",
_rev: "1-f0399b42cc6123a9cc8503632ba7b3a7"
}])
/* 返回
[{
id: "demo1", ok: true, rev: "2-7857b2801bc0303d2cc0bb82e8afd796"
}, {
id: "demo2", ok: true, rev: "2-7857b2801bc0303d2cc0bb82e8afd796"
}]
*/
```
### utools.db.allDocs(key)
* `key` String | Array
* `返回` Array 执行该方法将会获取所有数据库文档,如果传入字符串,则会返回以字符串开头的文档,也可以传入指定 ID 的数组,不传入则为获取所有文档。
```js
// 获取所有文档
rubick.db.allDocs()
// 传入字符串则返回id以 demo 开头的文档
rubick.db.allDocs("demo")
/* 返回
[{
_id: "demo/123", _rev: "2-7857b2801bc0303d2cc0bb82e8afd796", data: "demo"
}, {
_id: "demo/124", _rev: "1-f0399b42cc6123a9cc8503632ba7b3a7", data: "demo"
}, {
_id: "demo/125", _rev: "1-f0399b42cc6123a9cc8503632ba7b3a7", data: "demo"
}]
*/
// 根据id数组请求
rubick.db.allDocs([
"demo1",
"demo2"
])
/* 返回
[{
_id: "demo1", _rev: "2-7857b2801bc0303d2cc0bb82e8afd796", data: "demo"
}, {
_id: "demo2", _rev: "1-f0399b42cc6123a9cc8503632ba7b3a7", data: "demo"
}]
*/
```

176
docs/docs/dev/README.md Normal file
View File

@ -0,0 +1,176 @@
## 插件说明
`rubick` 插件分为 `UI插件``系统插件` 2类。下面分别介绍这 2 类插件的区别和作用。
1. UI 插件 <Badge type="tip" text="最常用" />:都会有 UI 界面,用于和用户交互,且需要通过关键词搜索选择进行使用,比如 `斗图` 插件,有界面展示,且需要再搜索框内搜索关键词选择后进行呼起才能使用。
2. 系统插件:可能不会有 UI 界面,在 `rubick` 启动的时候,会注册执行系统插件。比如`超级面板` 插件,安装完成后,即可在 `rubick` 运行时随时使用,不需要任何关键词和匹配。
## 开发 UI 插件
一个最基础插件的目录是这样的:
```
rubick-plugin-demo
|-- index.html
|-- package.json
|-- preload.js
```
### 文件说明
#### package.json
用于指定插件最基础的配置,一个最基础的配置信息如下:
```json
{
"name": "rubick-ui-plugin-demo",
"pluginName": "插件demo",
"description": "rubick ui 插件demo",
"author": "muwoo",
"main": "index.html",
"logo": "https://www.img/demo.png",
"version": "0.0.1",
"preload":"preload.js",
"homePage": "https://gitee.com/rubick-center/rubick-ui-plugin-demo/raw/master/README.md",
"pluginType": "ui",
"features": [
{
"code": "index",
"explain": "测试插件",
"cmds":[
"demo",
"测试"
]
}
]
}
```
核心字段说明:
* name 插件 `npm` 包名称,<Badge type="tip" text="必填" />
* pluginName 插件显示名称,用于展示给使用者 <Badge type="tip" text="必填" />
* description 插件描述,描述这个插件的作用 <Badge type="tip" text="必填" />
* author 插件作者
* main 入口文件,一般为 `index.html`
* logo 尺寸建议 200 * 200, 插件的 logo, 需要是 http/https 在线地址不支持本地logo <Badge type="tip" text="必填" />
* version 插件的版本 <Badge type="tip" text="必填" />
* preload 预加载脚本
* homePage: 插件 readme raw 地址
* pluginType: 插件类型枚举ui, system. 当前选 ui <Badge type="tip" text="必填" />
* features 插件核心功能列表 <Badge type="tip" text="必填" />
* features.code 插件某个功能的识别码,可用于区分不同的功能 <Badge type="tip" text="必填" />
* features.explain 插件某个功能的解释 <Badge type="tip" text="必填" />
* features.cmds 输入框内搜索该 cmd 进入插件 <Badge type="tip" text="必填" />
#### index.html
插件的入口文件,用于展示插件的样式,一个最基础的 `html` 结构可以是这样:
```html
<!DOCTYPE html>
<html>
<body>
hello Rubick
<button id="showNotification">通知</button>
</body>
<script>
document.getElementById('showNotification').addEventListener('click', () => {
window.showNotification();
})
</script>
</html>
```
#### preload.js
细心的同学可能已经注意到上面的 `index.html` 使用了一个全局函数 `showNotification` 那么这个函数是在哪里定义的呢?
答案就是在 `preload.js` 里面。`preload.js` 可以为页面提供全局函数
```js
window.showNotification = function () {
rubick.showNotification('HI, rubick')
}
```
rubick 更多支持 API 能力参考:[rubick 全局API](https://github.com/rubickCenter/rubick/blob/master/static/preload.js#L49)
### 测试写好的插件
由于 `rubick` 插件是基于 `npm` 的管理方式,所以开发者调试插件,也是基于 `npm` 的软连接的方式进行调试。
首先需要再插件 `package.json` 目录下执行:
```shell
$ npm link
```
然后将插件通过插件市场的 `开发者` 菜单进行安装,填写插件的 `name` 即可,如果插件需要调试,可以通过右上角 ... 来打开开发者工具进行调试,页面变更直接刷新即可:
![](https://pica.zhimg.com/80/v2-d7d6d5cba1151527aeff8e2c9b8cefb4_720w.gif)
本小节所有代码:[rubick-ui-plugin-demo](https://gitee.com/rubick-center/rubick-ui-plugin-demo)
## 开发系统插件
一个最基础插件的目录是这样的:
```
rubick-system-plugin-demo
|-- package.json
|-- index.js
```
### 文件说明
#### package.json
用于指定插件最基础的配置,一个最基础的配置信息如下:
```json
{
"name": "rubick-system-plugin-demo",
"pluginName": "rubick 系统插件demo",
"version": "0.0.0",
"description": "rubick 系统插件demo",
"entry": "index.js",
"logo": "httpss://static.91jkys.com/upload/202112/08/5bac90649c5343cabb63930b131cf8e6.png",
"pluginType": "system",
"author": "muwoo",
"homepage": ""
}
```
核心字段说明:
* name 插件 `npm` 包名称,<Badge type="tip" text="必填" />
* pluginName 插件显示名称,用于展示给使用者 <Badge type="tip" text="必填" />
* description 插件描述,描述这个插件的作用 <Badge type="tip" text="必填" />
* author 插件作者
* entry 入口文件,一般为 `index.js`
* logo 尺寸建议 200 * 200, 插件的 logo, 需要是 http/https 在线地址不支持本地logo <Badge type="tip" text="必填" />
* version 插件的版本 <Badge type="tip" text="必填" />
* homePage: 插件 readme raw 地址
* pluginType: 插件类型枚举ui, system. 当前选 system <Badge type="tip" text="必填" />
#### index.js
插件的入口文件,用于 rubick 主进程进行加载执行:
```js
module.exports = () => {
return {
onReady(ctx) {
const { Notification } = ctx;
new Notification({
title: "测试系统插件",
body: "这是一个系统插件在rubick运行时立即被加载"
}).show()
}
}
}
```
`index.js` 需要返回一个包含 `onReady` 生命周期的函数,该函数接受 `ctx` 对象作为参数,我们可以通过 `ctx` 使用 `electron` 主进程所有能力。
同时也为 `ctx` 上扩展挂在了 `mainWindow` 对象。
#### 调试插件
由于 `rubick` 插件是基于 `npm` 的管理方式,所以开发者调试插件,也是基于 `npm` 的软连接的方式进行调试。
首先需要再插件 `package.json` 目录下执行:
```shell
$ npm link
```
然后将插件通过插件市场的 `开发者` 菜单进行安装,填写插件的 `name` 即可。由于插件依赖于主进程启动执行,所以安装完成后需要重启 rubick 后才能生效。
![](https://pic3.zhimg.com/80/v2-e218500a0686a8735d80f417aa53b7aa_720w.gif)
::: danger
系统插件目前无法直接通过 `devtools` 进行调试,后面会进行优化
:::
## 发布插件
这里介绍完了如何开发插件,最后非常欢迎为 `rubick` 贡献开源插件,发布插件也非常简单,首先需要把自己的插件发布到 `npm` 仓库:
```shell
$ npm publish
```
然后再给 [rubick-database/plugins/total-plugins.json](https://gitee.com/monkeyWang/rubick-database/blob/master/plugins/total-plugins.json) 仓库提个 `pull request`, 把你的 `package.json` 信息加入 `json` 文件内,等我们 merge 了您的提交,插件将会自动上架。

49
docs/docs/guide/README.md Normal file
View File

@ -0,0 +1,49 @@
## 前言
rubick 之前的插件管理,依托于云服务器存储,我们需要为服务器存储支付一笔不小的开销。
由于项目完全开源,所以几乎无任何收入,所以为了让 rubick 先生存下去,我们再三抉择把插件包管理方式托管到了`npm` 上。
由于 rubick 的插件管理体系是基于 npm 的包管理体系,所以当您需要使用插件的时候,需要手动保证当前电脑已经安装好了`node`环境。
如果当前电脑已经安装过 `node`,那么您可以直接下载 `rubick` 进行使用啦!
[macos 下安装 nodejs 方法](https://juejin.cn/post/6844903886541553672)
[windows 下安装 nodejs 方法](https://juejin.cn/post/6892790243687137287)
## 下载 rubick
[rubick 下载安装地址](https://github.com/rubickCenter/rubick2/releases)
macos 选择 `pkg` 文件windows 选择 `exe` 文件。
安装完成后打开 rubick 即可看到主搜索界面:
![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/26f0fbe2c69246b6a3ed139b0df1ca0b~tplv-k3u1fbpfcp-watermark.image)
目前支持 windows 和 macos。linux 小伙伴正在开发中
## 功能说明
接下来详细介绍 rubick 所包含和支持的功能
### 1. 搜索系统应用
支持拼音和缩写来搜索系统安装应用:
![](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ba363e8f60f540e6a5c365c4317c4413~tplv-k3u1fbpfcp-watermark.image)
### 2. UI类插件安装
点击搜索框右侧 `rubick` 图标,进入插件市场,选择所需插件,点击下载按钮即可下载,下载完成后在已安装 tab 下可以找到安装插件。
安装完成后,输入插件呼起命令即可使用对应插件:
![](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7ae45c7ede1f4e3bb7d35ae845e60b64~tplv-k3u1fbpfcp-watermark.image)
### 3. 系统类插件安装
系统插件安装方式和UI类一样在插件市场选择`系统分类`,寻找适合自己的系统插件安装即可。
::: danger
系统插件安装成功后,需要重启 `rubick` 才能生效
:::
### 4. 输入框聚焦自动根据剪切板内容匹配插件
`rubick` 内搜索`偏好设置`,然后开启`自动粘贴` 功能,即可匹配剪切板内容自动匹配适合插件进行使用。
![](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/01ef50fbfa064ba9a88bebe1531eacd4~tplv-k3u1fbpfcp-watermark.image)
### 更多功能
如果您还需要更多功能,欢迎来这里给我们提建议:[issues](https://github.com/rubickCenter/rubick2/issues) 。
有价值的想法我们会加入到后期的开发当中。同时也欢迎一起加入共建。

BIN
docs/docs/guide/img.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 92 KiB

24918
docs/package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

15
docs/package.json Normal file
View File

@ -0,0 +1,15 @@
{
"name": "rubick-docs",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
},
"author": "muwoo",
"license": "ISC",
"devDependencies": {
"vuepress": "^1.8.2"
}
}

10220
docs/pnpm-lock.yaml generated Normal file

File diff suppressed because it is too large Load Diff

View File

@ -1,6 +1,6 @@
{
"name": "rubick",
"version": "2.0.1-beta.7",
"version": "2.0.1-beta.8",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",

View File

@ -37,7 +37,13 @@ export default () => {
const triggerReadyHooks = (ctx) => {
// @ts-ignore
hooks.onReady.forEach(hook => hook(ctx));
hooks.onReady.forEach((hook: any) => {
try {
hook(ctx);
} catch (e) {
console.log(e);
}
});
}
return {