feat: 增加 rubick 文档
24
deploy.sh
Executable 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 -
|
55
docs/docs/.vuepress/config.js
Normal 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: '帮助我们改善此页面!'
|
||||
}
|
||||
}
|
BIN
docs/docs/.vuepress/public/images/1.png
Normal file
After Width: | Height: | Size: 77 KiB |
BIN
docs/docs/.vuepress/public/images/2.gif
Normal file
After Width: | Height: | Size: 471 KiB |
BIN
docs/docs/.vuepress/public/images/3.gif
Normal file
After Width: | Height: | Size: 749 KiB |
BIN
docs/docs/.vuepress/public/images/4.gif
Normal file
After Width: | Height: | Size: 2.7 MiB |
BIN
docs/docs/.vuepress/public/images/5.gif
Normal file
After Width: | Height: | Size: 452 KiB |
BIN
docs/docs/.vuepress/public/images/logo.png
Normal file
After Width: | Height: | Size: 47 KiB |
7
docs/docs/.vuepress/styles/palette.styl
Normal file
@ -0,0 +1,7 @@
|
||||
$accentColor = #ff4ea4//默认主题颜色
|
||||
$codeBgColor = #282c34//默认背景颜色
|
||||
|
||||
//示例修改相关样式f12找到需要修改的地方找到对应class类拿过来直接用就行了
|
||||
.sidebar-group.is-sub-group > .sidebar-heading:not(.clickable){
|
||||
opacity :1
|
||||
}
|
16
docs/docs/README.md
Normal 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
@ -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插件`,进入插件主界面,
|
||||
开启插件后,在插件主窗口即可通过命令打开插件:
|
||||
|
||||

|
||||
|
||||
本小节所有代码:[rubcik-plugin-demo](https://github.com/clouDr-f2e/rubick-plugin-demo)
|
||||
|
56
docs/docs/guide/README.md
Normal file
@ -0,0 +1,56 @@
|
||||
## 下载 rubick
|
||||
[rubick 下载安装地址](https://github.com/clouDr-f2e/rubick/releases)
|
||||
|
||||
安装完成后打开 rubick 即可看到主搜索界面:
|
||||
|
||||

|
||||
|
||||
目前支持 windows 和 macos。linux 小伙伴正在开发中
|
||||
|
||||
## 功能说明
|
||||
接下来详细介绍 rubick 所包含和支持的功能
|
||||
|
||||
### 1. 搜索系统应用
|
||||
`macos` 下支持搜索当前电脑内所安装的所有 app 和一些偏好设置,目前可搜索路径为:
|
||||
```json
|
||||
[
|
||||
"/System/Applications",
|
||||
"/Applications",
|
||||
"/System/Library/PreferencePanes"
|
||||
]
|
||||
```
|
||||
也就是说只要当前系统软件安装到这些目录才会被检索到。支持中文搜索和拼音、拼音首字母搜索:
|
||||
|
||||

|
||||
|
||||
`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 下可以找到安装插件。
|
||||
安装完成后,输入插件呼起命令即可使用对应插件:
|
||||
|
||||

|
||||
|
||||
### 4. 右击增强
|
||||
通常我们需要使用鼠标右击来对桌面属性进行拓展,`Rubick` 支持对右击属性进行增强功能,长按鼠标右键即可呼起。如果安装的插件支持
|
||||
特殊类型的文件操作,还可以在右键中唤起插件:
|
||||
|
||||

|
||||
|
||||
### 更多功能
|
||||
如果您还需要更多功能,欢迎来这里给我们提建议:[issues](https://github.com/clouDr-f2e/rubick/issues/20)
|
||||
有价值的想法我们会加入到后期的开发当中。同时也欢迎一起加入共建。
|
||||
|
BIN
docs/docs/guide/img.png
Normal file
After Width: | Height: | Size: 92 KiB |
11125
docs/package-lock.json
generated
Normal file
15
docs/package.json
Normal 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"
|
||||
}
|
||||
}
|