mirror of
https://github.com/rubickCenter/rubick
synced 2025-06-20 19:22:43 +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