Add guide page #534 (#707)

detail see #534
This commit is contained in:
花裤衩 2018-05-28 14:36:06 +08:00 committed by GitHub
parent d2d323bb02
commit 0a196f79ba
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 111 additions and 0 deletions

View file

@ -72,6 +72,7 @@ You need to install [node](http://nodejs.org/) and [git](https://git-scm.com/) l
- Drag and drop list - Drag and drop list
- Svg Sprite - Svg Sprite
- Dashboard - Dashboard
- Guide Page
- Mock data - Mock data
- Echarts - Echarts
- Clipboard - Clipboard

View file

@ -84,6 +84,7 @@
- 列表拖拽 - 列表拖拽
- Svg Sprite 图标 - Svg Sprite 图标
- Dashboard - Dashboard
- 引导页
- 本地mock数据 - 本地mock数据
- Echarts 图表 - Echarts 图表
- Clipboard(剪贴复制) - Clipboard(剪贴复制)

View file

@ -29,6 +29,7 @@
"axios": "0.17.1", "axios": "0.17.1",
"clipboard": "1.7.1", "clipboard": "1.7.1",
"codemirror": "5.32.0", "codemirror": "5.32.0",
"driver.js": "0.5.2",
"dropzone": "5.2.0", "dropzone": "5.2.0",
"echarts": "3.8.5", "echarts": "3.8.5",
"element-ui": "2.3.2", "element-ui": "2.3.2",

1
src/icons/svg/guide.svg Normal file
View file

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1526033837694" class="icon" style="" viewBox="0 0 1117 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10274" xmlns:xlink="http://www.w3.org/1999/xlink" width="218.1640625" height="200"><defs><style type="text/css"></style></defs><path d="M53.865 558.08l289.92 121.6 560-492.16-491.52 530.56 371.84 140.8c8.96 3.2 19.2-1.28 22.4-10.24V848l260.48-816.64-1014.4 494.72c-8.96 4.48-12.16 14.72-8.32 23.68 2.56 3.84 5.76 7.04 9.6 8.32z m357.76 434.56l144.64-155.52-144.64-58.88v214.4z" p-id="10275"></path></svg>

After

Width:  |  Height:  |  Size: 664 B

View file

@ -3,6 +3,7 @@ export default {
dashboard: 'Dashboard', dashboard: 'Dashboard',
introduction: 'Introduction', introduction: 'Introduction',
documentation: 'Documentation', documentation: 'Documentation',
guide: 'Guide',
permission: 'Permission', permission: 'Permission',
pagePermission: 'Page Permission', pagePermission: 'Page Permission',
directivePermission: 'Directive Permission', directivePermission: 'Directive Permission',
@ -76,6 +77,10 @@ export default {
roles: 'Your roles', roles: 'Your roles',
switchRoles: 'Switch roles' switchRoles: 'Switch roles'
}, },
guide: {
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 ',
button: 'Show Guide'
},
components: { components: {
documentation: 'Documentation', documentation: 'Documentation',
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.', 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.',

View file

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

View file

@ -53,6 +53,17 @@ export const constantRouterMap = [
name: 'documentation', name: 'documentation',
meta: { title: 'documentation', icon: 'documentation', noCache: true } meta: { title: 'documentation', icon: 'documentation', noCache: true }
}] }]
},
{
path: '/guide',
component: Layout,
redirect: '/guide/index',
children: [{
path: 'index',
component: _import('guide/index'),
name: 'guide',
meta: { title: 'guide', icon: 'guide', noCache: true }
}]
} }
] ]

View file

@ -0,0 +1,52 @@
const steps = [
{
element: '.hamburger-container',
popover: {
title: 'Hamburger',
description: 'Open && Close sidebar',
position: 'bottom'
}
},
{
element: '.breadcrumb-container',
popover: {
title: 'Breadcrumb',
description: 'Indicate the current page location',
position: 'bottom'
}
},
{
element: '.screenfull',
popover: {
title: 'Screenfull',
description: 'Bring the page into fullscreen',
position: 'left'
}
},
{
element: '.international-icon',
popover: {
title: 'Switch language',
description: 'Switch the system language',
position: 'left'
}
},
{
element: '.theme-switch',
popover: {
title: 'Theme Switch',
description: 'Custom switch system theme',
position: 'left'
}
},
{
element: '.tags-view-container',
popover: {
title: 'Tags view',
description: 'The history of the page you visited',
position: 'bottom'
}
}
]
export default steps

34
src/views/guide/index.vue Normal file
View file

@ -0,0 +1,34 @@
<template>
<div class="app-container">
<p class="warn-content">
{{$t('guide.description')}}
<a href="https://github.com/kamranahmedse/driver.js" target="_blank">driver.js.
</a>
</p>
<el-button icon='el-icon-question' type="primary" @click.prevent.stop="guide">{{$t('guide.button')}}</el-button>
</div>
</template>
<script>
import * as Driver from 'driver.js' // import driver.js
import 'driver.js/dist/driver.min.css' // import driver.js css
import steps from './defineSteps'
export default {
name: 'guide',
data() {
return {
driver: null
}
},
mounted() {
this.driver = new Driver()
},
methods: {
guide() {
this.driver.defineSteps(steps)
this.driver.start()
}
}
}
</script>