mirror of
https://github.com/rubickCenter/rubick
synced 2025-06-21 20:05:12 +08:00
✨ 增加新手引导
This commit is contained in:
muwoo
parent
2cdfcbbbae
commit
6cbd5fe15b
23
guide/.gitignore
vendored
Normal file
23
guide/.gitignore
vendored
Normal file
@ -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?
|
||||||
24
guide/README.md
Normal file
24
guide/README.md
Normal file
@ -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/).
|
||||||
5
guide/babel.config.js
Normal file
5
guide/babel.config.js
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
module.exports = {
|
||||||
|
presets: [
|
||||||
|
'@vue/cli-plugin-babel/preset'
|
||||||
|
]
|
||||||
|
}
|
||||||
19
guide/jsconfig.json
Normal file
19
guide/jsconfig.json
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "es5",
|
||||||
|
"module": "esnext",
|
||||||
|
"baseUrl": "./",
|
||||||
|
"moduleResolution": "node",
|
||||||
|
"paths": {
|
||||||
|
"@/*": [
|
||||||
|
"src/*"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"lib": [
|
||||||
|
"esnext",
|
||||||
|
"dom",
|
||||||
|
"dom.iterable",
|
||||||
|
"scripthost"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
43
guide/package.json
Normal file
43
guide/package.json
Normal file
@ -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"
|
||||||
|
]
|
||||||
|
}
|
||||||
BIN
guide/public/favicon.ico
Normal file
BIN
guide/public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
17
guide/public/index.html
Normal file
17
guide/public/index.html
Normal file
@ -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>
|
||||||
166
guide/src/App.vue
Normal file
166
guide/src/App.vue
Normal file
@ -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>
|
||||||
BIN
guide/src/assets/bg.png
Normal file
BIN
guide/src/assets/bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 80 KiB |
BIN
guide/src/assets/img.png
Normal file
BIN
guide/src/assets/img.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
BIN
guide/src/assets/img_1.png
Normal file
BIN
guide/src/assets/img_1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 144 KiB |
BIN
guide/src/assets/img_2.png
Normal file
BIN
guide/src/assets/img_2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
BIN
guide/src/assets/img_3.png
Normal file
BIN
guide/src/assets/img_3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 110 KiB |
BIN
guide/src/assets/logo.png
Normal file
BIN
guide/src/assets/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
4
guide/src/main.js
Normal file
4
guide/src/main.js
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
import { createApp } from 'vue'
|
||||||
|
import App from './App.vue'
|
||||||
|
|
||||||
|
createApp(App).mount('#app')
|
||||||
16
guide/vue.config.js
Normal file
16
guide/vue.config.js
Normal file
@ -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' ? '' : '/',
|
||||||
|
};
|
||||||
6168
guide/yarn.lock
Normal file
6168
guide/yarn.lock
Normal file
File diff suppressed because it is too large
Load Diff
0
src/main/browsers/guide.ts
Normal file
0
src/main/browsers/guide.ts
Normal file
Loading…
x
Reference in New Issue
Block a user