Skip to content

Commit 0a196f7

Browse files
PanJiaChenPanJiaChen
authored
detail see PanJiaChen#534
1 parent d2d323b commit 0a196f7

File tree

9 files changed

+111
-0
lines changed

9 files changed

+111
-0
lines changed

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,7 @@ You need to install [node](http://nodejs.org/) and [git](https://git-scm.com/) l
7272
- Drag and drop list
7373
- Svg Sprite
7474
- Dashboard
75+
- Guide Page
7576
- Mock data
7677
- Echarts
7778
- Clipboard

‎README.zh-CN.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,7 @@
8484
- 列表拖拽
8585
- Svg Sprite 图标
8686
- Dashboard
87+
- 引导页
8788
- 本地mock数据
8889
- Echarts 图表
8990
- Clipboard(剪贴复制)

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@
2929
"axios": "0.17.1",
3030
"clipboard": "1.7.1",
3131
"codemirror": "5.32.0",
32+
"driver.js": "0.5.2",
3233
"dropzone": "5.2.0",
3334
"echarts": "3.8.5",
3435
"element-ui": "2.3.2",

‎src/icons/svg/guide.svg

Lines changed: 1 addition & 0 deletions
Loading

‎src/lang/en.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ export default {
33
dashboard: 'Dashboard',
44
introduction: 'Introduction',
55
documentation: 'Documentation',
6+
guide: 'Guide',
67
permission: 'Permission',
78
pagePermission: 'Page Permission',
89
directivePermission: 'Directive Permission',
@@ -76,6 +77,10 @@ export default {
7677
roles: 'Your roles',
7778
switchRoles: 'Switch roles'
7879
},
80+
guide: {
81+
description: 'The guide page is useful for some people who entered the project for the first time. You can briefly introduce the features of the project. Demo is based on ',
82+
button: 'Show Guide'
83+
},
7984
components: {
8085
documentation: 'Documentation',
8186
tinymceTips: 'Rich text editor is a core part of management system, but at the same time is a place with lots of problems. In the process of selecting rich texts, I also walked a lot of detours. The common rich text editors in the market are basically used, and the finally chose Tinymce. See documentation for more detailed rich text editor comparisons and introductions.',

‎src/lang/zh.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ export default {
33
dashboard: '首页',
44
introduction: '简述',
55
documentation: '文档',
6+
guide: '引导页',
67
permission: '权限测试页',
78
pagePermission: '页面权限',
89
directivePermission: '指令权限',
@@ -76,6 +77,10 @@ export default {
7677
roles: '你的权限',
7778
switchRoles: '切换权限'
7879
},
80+
guide: {
81+
description: '引导页对于一些第一次进入项目的人很有用，你可以简单介绍下项目的功能。本 Demo 是基于',
82+
button: '打开引导'
83+
},
7984
components: {
8085
documentation: '文档',
8186
tinymceTips: '富文本是管理后台一个核心的功能，但同时又是一个有很多坑的地方。在选择富文本的过程中我也走了不少的弯路，市面上常见的富文本都基本用过了，最终权衡了一下选择了Tinymce。更详细的富文本比较和介绍见',

‎src/router/index.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,17 @@ export const constantRouterMap = [
5353
name: 'documentation',
5454
meta: { title: 'documentation', icon: 'documentation', noCache: true }
5555
}]
56+
},
57+
{
58+
path: '/guide',
59+
component: Layout,
60+
redirect: '/guide/index',
61+
children: [{
62+
path: 'index',
63+
component: _import('guide/index'),
64+
name: 'guide',
65+
meta: { title: 'guide', icon: 'guide', noCache: true }
66+
}]
5667
}
5768
]
5869

‎src/views/guide/defineSteps.js

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
const steps = [
2+
{
3+
element: '.hamburger-container',
4+
popover: {
5+
title: 'Hamburger',
6+
description: 'Open && Close sidebar',
7+
position: 'bottom'
8+
}
9+
},
10+
{
11+
element: '.breadcrumb-container',
12+
popover: {
13+
title: 'Breadcrumb',
14+
description: 'Indicate the current page location',
15+
position: 'bottom'
16+
}
17+
},
18+
{
19+
element: '.screenfull',
20+
popover: {
21+
title: 'Screenfull',
22+
description: 'Bring the page into fullscreen',
23+
position: 'left'
24+
}
25+
},
26+
{
27+
element: '.international-icon',
28+
popover: {
29+
title: 'Switch language',
30+
description: 'Switch the system language',
31+
position: 'left'
32+
}
33+
},
34+
{
35+
element: '.theme-switch',
36+
popover: {
37+
title: 'Theme Switch',
38+
description: 'Custom switch system theme',
39+
position: 'left'
40+
}
41+
},
42+
{
43+
element: '.tags-view-container',
44+
popover: {
45+
title: 'Tags view',
46+
description: 'The history of the page you visited',
47+
position: 'bottom'
48+
}
49+
}
50+
]
51+
52+
export default steps

‎src/views/guide/index.vue

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<template>
2+
<div class="app-container">
3+
<p class="warn-content">
4+
{{$t('guide.description')}}
5+
<a href="https://github.com/kamranahmedse/driver.js" target="_blank">driver.js.
6+
</a>
7+
</p>
8+
<el-button icon='el-icon-question' type="primary" @click.prevent.stop="guide">{{$t('guide.button')}}</el-button>
9+
</div>
10+
</template>
11+
12+
<script>
13+
import * as Driver from 'driver.js' // import driver.js
14+
import 'driver.js/dist/driver.min.css' // import driver.js css
15+
import steps from './defineSteps'
16+
17+
export default {
18+
name: 'guide',
19+
data() {
20+
return {
21+
driver: null
22+
}
23+
},
24+
mounted() {
25+
this.driver = new Driver()
26+
},
27+
methods: {
28+
guide() {
29+
this.driver.defineSteps(steps)
30+
this.driver.start()
31+
}
32+
}
33+
}
34+
</script>

0 commit comments

Comments
 (0)