diff --git a/README.md b/README.md index c7ed03b6..88c6802a 100644 --- a/README.md +++ b/README.md @@ -72,6 +72,7 @@ You need to install [node](http://nodejs.org/) and [git](https://git-scm.com/) l - Drag and drop list - Svg Sprite - Dashboard +- Guide Page - Mock data - Echarts - Clipboard diff --git a/README.zh-CN.md b/README.zh-CN.md index 4fc5ebc5..de8f7c70 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -84,6 +84,7 @@ - 列表拖拽 - Svg Sprite 图标 - Dashboard +- 引导页 - 本地mock数据 - Echarts 图表 - Clipboard(剪贴复制) diff --git a/package.json b/package.json index 3ad81377..5643f28f 100644 --- a/package.json +++ b/package.json @@ -29,6 +29,7 @@ "axios": "0.17.1", "clipboard": "1.7.1", "codemirror": "5.32.0", + "driver.js": "0.5.2", "dropzone": "5.2.0", "echarts": "3.8.5", "element-ui": "2.3.2", diff --git a/src/icons/svg/guide.svg b/src/icons/svg/guide.svg new file mode 100644 index 00000000..9bae3394 --- /dev/null +++ b/src/icons/svg/guide.svg @@ -0,0 +1 @@ + diff --git a/src/lang/en.js b/src/lang/en.js index 22615692..f84f0de2 100644 --- a/src/lang/en.js +++ b/src/lang/en.js @@ -3,6 +3,7 @@ export default { dashboard: 'Dashboard', introduction: 'Introduction', documentation: 'Documentation', + guide: 'Guide', permission: 'Permission', pagePermission: 'Page Permission', directivePermission: 'Directive Permission', @@ -76,6 +77,10 @@ export default { roles: 'Your 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: { 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.', diff --git a/src/lang/zh.js b/src/lang/zh.js index c7df04ed..6ef13eec 100644 --- a/src/lang/zh.js +++ b/src/lang/zh.js @@ -3,6 +3,7 @@ export default { dashboard: '首页', introduction: '简述', documentation: '文档', + guide: '引导页', permission: '权限测试页', pagePermission: '页面权限', directivePermission: '指令权限', @@ -76,6 +77,10 @@ export default { roles: '你的权限', switchRoles: '切换权限' }, + guide: { + description: '引导页对于一些第一次进入项目的人很有用，你可以简单介绍下项目的功能。本 Demo 是基于', + button: '打开引导' + }, components: { documentation: '文档', tinymceTips: '富文本是管理后台一个核心的功能，但同时又是一个有很多坑的地方。在选择富文本的过程中我也走了不少的弯路，市面上常见的富文本都基本用过了，最终权衡了一下选择了Tinymce。更详细的富文本比较和介绍见', diff --git a/src/router/index.js b/src/router/index.js index 009963a3..ce43eec2 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -53,6 +53,17 @@ export const constantRouterMap = [ name: 'documentation', 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 } + }] } ] diff --git a/src/views/guide/defineSteps.js b/src/views/guide/defineSteps.js new file mode 100644 index 00000000..fde78926 --- /dev/null +++ b/src/views/guide/defineSteps.js @@ -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 diff --git a/src/views/guide/index.vue b/src/views/guide/index.vue new file mode 100644 index 00000000..99788caf --- /dev/null +++ b/src/views/guide/index.vue @@ -0,0 +1,34 @@ + + +