feat: 增加 rubick 文档

This commit is contained in:
muwoo 2021-08-05 21:21:20 +08:00
parent ffb6ac96dc
commit 3a70af5c49
15 changed files with 11379 additions and 0 deletions

24
deploy.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:clouDr-f2e/rubick.git master:gh-pages
cd -

View File

@ -0,0 +1,55 @@
module.exports = {
title: 'Rubick',
description: '你的开源桌面插件应用',
base: '/rubick/',
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: 'TODO: 原理解析',
children: [
{
title: '插件化实现原理'
},
{
title: '右击增强实现原理'
},
{
title: '系统插件实现原理'
},
{
title: '文件检索实现原理'
},
]
},
],
// 假定是 GitHub. 同时也可以是一个完整的 GitLab URL
repo: 'https://github.com/clouDr-f2e/rubick',
// 自定义仓库链接文字。默认从 `themeConfig.repo` 中自动推断为
// "GitHub"/"GitLab"/"Bitbucket" 其中之一,或是 "Source"。
repoLabel: 'Github',
// 默认是 false, 设置为 true 来启用
editLinks: true,
// 默认为 "Edit this page"
editLinkText: '帮助我们改善此页面!'
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 77 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 471 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 749 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 452 KiB

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: 支持快速检索系统应用
- title: 自由定制
details: 支持自定义插件开发
- title: 海量示例
details: 新版文档 code Demo & playground 一应俱全
footer: MIT Licensed | Copyright (c) 2021 muwoo
---

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

@ -0,0 +1,81 @@
## 开发一个最基础的插件
一个最基础插件的目录是这样的:
```
rubick-plugin-demo
|-- index.html
|-- logo.png
|-- plugin.json
|-- preload.js
```
## 文件说明
### plugin.json
用于指定插件最基础的配置,一个最基础的配置信息如下:
```json
{
"pluginName": "测试插件",
"author": "muwoo",
"description": "我的第一个 rubick 插件",
"main": "index.html",
"version": "0.0.2",
"logo": "logo.png",
"name": "rubick-plugin-demo",
"features": [
{
"code": "hello",
"explain": "这是一个测试的插件",
"cmds":["hello", "你好"]
}
],
"preload": "preload.js"
}
```
核心字段说明:
* name 插件仓库名称需要保持和git仓库同名不要随意变更
* pluginName 插件显示名称,用于展示给使用者
* description 插件描述,描述这个插件的作用
* main 入口文件,一般为 `index.html`
* version 插件的版本
* features 插件核心功能列表
* features.code 插件某个功能的识别码,可用于区分不同的功能
* features.cmds 输入框内搜索该 cmd 进入插件
### 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` 里面。我们知道 `electron` 是可以再渲染进程中执行 `node.js` 的,所以 `preload.js` 是既可以
执行 `node.js` 以及执行 `Rubick` 提供的系统命令的位置:
```js
window.showNotification = function () {
rubick.showNotification('HI, rubick')
}
```
rubick 更多支持 API 能力参考:[rubick 全局API](https://github.com/clouDr-f2e/rubick/blob/master/static/preload.js#L49)
### logo.png
当前插件的logo图标建议是 200 x 200 方形图标
## 测试插件
复制 `plugin.json` 文件,在 `rubick` 主窗口执行 `ctrl/command + v` 即可唤起安装插件的功能,选择`新建rubick插件`,进入插件主界面,
开启插件后,在插件主窗口即可通过命令打开插件:
![](/images/5.gif)
本小节所有代码:[rubcik-plugin-demo](https://github.com/clouDr-f2e/rubick-plugin-demo)

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

@ -0,0 +1,56 @@
## 下载 rubick
[rubick 下载安装地址](https://github.com/clouDr-f2e/rubick/releases)
安装完成后打开 rubick 即可看到主搜索界面:
![](/images/1.png)
目前支持 windows 和 macos。linux 小伙伴正在开发中
## 功能说明
接下来详细介绍 rubick 所包含和支持的功能
### 1. 搜索系统应用
`macos` 下支持搜索当前电脑内所安装的所有 app 和一些偏好设置,目前可搜索路径为:
```json
[
"/System/Applications",
"/Applications",
"/System/Library/PreferencePanes"
]
```
也就是说只要当前系统软件安装到这些目录才会被检索到。支持中文搜索和拼音、拼音首字母搜索:
![](/images/2.gif)
`Windows` 内由于安装目录太多不确定,有的在 C盘有的在D盘还有的在自定义其他位置所以该功能还在设计中如果您有好的方案也欢迎提供[issues](https://github.com/clouDr-f2e/rubick/issues)
### 2. rubick 内置功能
`rubick` 参考了钉钉、微信等 App 的基础功能,也设计内置了 `截图``取色``锁屏` 基础功能,通过搜索框输入对应关键词呼起。
#### 截屏
输入:`'截屏'` 或者 `'shortCut'` 或者 `'jp'`
#### 取色
输入:`'取色'` 或者 `'拾色'` 或者 `'Pick color'``'qs'``'ss'`
#### 锁屏
输入:`'锁屏'` 或者 `'lock screen'` 或者 `'sp'`
### 3. 使用插件
点击搜索框右侧 rubick 图标,进入插件市场,选择所需插件,点击下载按钮即可下载,下载完成后在已安装 tab 下可以找到安装插件。
安装完成后,输入插件呼起命令即可使用对应插件:
![](/images/3.gif)
### 4. 右击增强
通常我们需要使用鼠标右击来对桌面属性进行拓展,`Rubick` 支持对右击属性进行增强功能,长按鼠标右键即可呼起。如果安装的插件支持
特殊类型的文件操作,还可以在右键中唤起插件:
![](/images/4.gif)
### 更多功能
如果您还需要更多功能,欢迎来这里给我们提建议:[issues](https://github.com/clouDr-f2e/rubick/issues/20)
有价值的想法我们会加入到后期的开发当中。同时也欢迎一起加入共建。

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 92 KiB

11125
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"
}
}