update some

1、增加标签页功能
2、增加动态路由（addRoutes）
3、拆分store，使用vuex的module
4、修改permiss.js逻辑
5、修复request.js表单格式多文件传输问题
6、增加重定向页面（主要用于标签页启动缓存时的刷新）
7、优化目录结构和代码

README.md

@@ -27,7 +27,7 @@
 - [ES6入门 阮一峰](http://es6.ruanyifeng.com/)
 - [Vue入门项目系列](/~https://github.com/uncleLian/vue2-echo)
 
-<img src="http://poci6sbqi.bkt.clouddn.com/vue-blog.jpg" width="900px" style="max-width: 100%;"/>
+<img src="https://github.com/uncleLian/vue-blog/raw/gh-pages/screenshots/dashboard.png" width="900px" style="max-width: 100%;"/>
 
 ## 功能
 功能持续迭代中，欢迎 [pr](/~https://github.com/uncleLian/vue-blog/pulls) 和 [issue](/~https://github.com/uncleLian/vue-blog/issues)
@@ -44,6 +44,7 @@
         - stage
     - 动态侧边栏
     - 动态面包屑
+    - 导航标签
     - 错误处理
         - 401
         - 404
@@ -117,7 +118,7 @@ npm run build:report
 
 如果觉得这个项目帮助到了你，你可以请作者喝杯饮料表示支持 :green_heart:
 
-![image](http://poci6sbqi.bkt.clouddn.com/donate.jpg)
+![image](https://github.com/uncleLian/vue-blog/raw/gh-pages/screenshots/donate.jpg)
 
 ## 交流
 欢迎热爱学习、忠于分享的朋友一起来交流

src/App.vue

@@ -1,6 +1,6 @@
 <template>
     <div id="app">
-        <app-view />
+        <app-pageView />
         <vue-progress-bar />
     </div>
 </template>

src/api/login.js

@@ -7,6 +7,6 @@ export function getLogin(form) {
 }
 // 用户信息
 export function getUser(token) {
-    let res = request('/api/user', 'GET', token)
+    let res = request('/api/user', 'POST', token)
     return res
 }

src/components/UserSelect/index.vue

@@ -17,18 +17,19 @@
 import { mapState } from 'vuex'
 export default {
     computed: {
-        ...mapState([
-            'user'
-        ]),
+        ...mapState('login', {
+            user: state => state.user
+        }),
         version() {
             return 'v' + require('../../../package.json').version
         }
     },
     methods: {
         onSelected(val) {
             if (val === 'exit') {
-                this.$store.commit('SET_LOGOUT')
-                this.$router.push('/login')
+                this.$store.dispatch('login/logout').then(() => {
+                    this.$router.push('/login')
+                })
             }
         }
     }

src/components/index.js

@@ -1,8 +1,8 @@
 import Vue from 'vue'
-import view from '@/layout/view'
+import PageView from '@/layout/PageView'
 
 const components = {
-    'app-view': view
+    'app-pageView': PageView
 }
 
 // 注册全局组件

src/language/en.js

@@ -1,7 +1,7 @@
 export default {
     route: {
         index: 'Index',
-        home: 'Home',
+        dashboard: 'Dashboard',
         documents: 'Documents',
         guide: 'Guide',
         permission: 'Permission',
@@ -137,5 +137,11 @@ export default {
         passwordMsg: 'Please enter password',
         successMsg: 'Login Success',
         errorMsg: 'Login Error'
+    },
+    tagsView: {
+        refresh: 'Refresh',
+        close: 'Close',
+        closeOthers: 'Close Others',
+        closeAll: 'Close All'
     }
 }

src/language/zh.js

@@ -1,7 +1,7 @@
 export default {
     route: {
         index: '首页',
-        home: '主页',
+        dashboard: '主页',
         documents: '文档',
         guide: '引导页',
         permission: '权限测试',
@@ -137,5 +137,11 @@ export default {
         passwordMsg: '请输入密码',
         successMsg: '登录成功',
         errorMsg: '账号密码错误'
+    },
+    tagsView: {
+        refresh: '刷新',
+        close: '关闭',
+        closeOthers: '关闭其它',
+        closeAll: '关闭所有'
     }
 }

src/layout/NavBar/index.vue

@@ -0,0 +1,75 @@
+<template>
+    <div id="navBar">
+        <div class="navBar-left">
+            <!-- 侧边栏伸缩按钮 -->
+            <Cola class="left-item ishover" />
+            <!-- 面包屑 -->
+            <breadcrumb class="left-item" />
+        </div>
+        <div class="navBar-right">
+            <!-- 错误日志 -->
+            <error-log class="right-item ishover" />
+            <!-- 全屏 -->
+            <screenfull class="right-item ishover" />
+            <!-- 切换语言 -->
+            <language-select class="right-item ishover" />
+            <!-- 切换主题 -->
+            <theme-picker class="right-item ishover" />
+            <!-- 用户选项 -->
+            <user-select class="right-item ishover" />
+        </div>
+    </div>
+</template>
+<script>
+import Cola from '@/components/Cola'
+import Breadcrumb from '@/components/Breadcrumb'
+import UserSelect from '@/components/UserSelect'
+import ErrorLog from '@/components/ErrorLog'
+import LanguageSelect from '@/components/LanguageSelect'
+import ThemePicker from '@/components/ThemePicker'
+import Screenfull from '@/components/Screenfull'
+export default {
+    components: {
+        Cola,
+        Breadcrumb,
+        UserSelect,
+        ErrorLog,
+        LanguageSelect,
+        ThemePicker,
+        Screenfull
+    }
+}
+</script>
+<style lang='stylus' scoped>
+#navBar {
+    position: relative;
+    width: 100%;
+    height: 50px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    box-shadow: 0 1px 2px rgba(0, 21, 41, 0.08);
+    .navBar-left {
+        display: flex;
+        align-items: center;
+        height: 100%;
+    }
+    .navBar-right {
+        display: flex;
+        align-items: center;
+        height: 100%;
+        margin-right: 30px;
+    }
+    .left-item, .right-item {
+        flex-center();
+        height: 100%;
+        font-size: 18px;
+        padding: 0 10px;
+        cursor: pointer;
+        >>> .item-container {
+            flex-center();
+            height: 100%;
+        }
+    }
+}
+</style>

src/layout/Sidebar/index.vue

@@ -11,7 +11,6 @@
 </template>
 <script>
 import sideItem from './sideItem'
-import { sideRoutes } from '@/router'
 export default {
     components: { sideItem },
     data() {
@@ -21,20 +20,24 @@ export default {
         }
     },
     computed: {
+        sideRoutes() {
+            return this.$store.state.routes.sideRoutes[0].children
+        },
         isCollapse() {
             return !this.$store.state.sidebarStatus
         },
         minWidth() {
-            return this.isCollapse ? '36px' : this.$style.menuWidth
+            return this.isCollapse ? this.$style.menuIconWidth : this.$style.menuWidth
         }
     },
     created() {
-        this.filterRoutes = this.handleRoutes(sideRoutes)
+        this.filterRoutes = this.handleRoutes(this.sideRoutes)
     },
     methods: {
         // 递归过滤路由
         handleRoutes(Arr) {
             const Routes = Arr.filter(route => {
+                // 侧边栏路由强制写name，不然会导致很多问题（缓存、跳转等问题）
                 if (route.name) {
                     if (route.meta) {
                         if (route.meta.hidden) {
@@ -50,6 +53,7 @@ export default {
                     }
                     return true
                 } else {
+                    console.warn(`路由【${route.path}】：缺少name属性，存在bug隐患`)
                     return false
                 }
             })
@@ -62,7 +66,8 @@ export default {
 :export {
     menuBg: #304156;
     menuText: #f5f5f5;
-    menuWidth: 180px;
+    menuWidth: 210px;
+    menuIconWidth: 36px;
 }
 </style>
 <style lang="stylus">
@@ -79,8 +84,8 @@ export default {
         user-select: none;
         transition: width 0.28s;
         transform: translateZ(0); // 防止抖动
-        .scrollbar-wrapper {
-            overflow-x: hidden !important;
+        .el-scrollbar__bar.is-horizontal {
+            display: none;
         }
         .el-menu {
             width: 100%;

src/layout/Sidebar/sideLink.vue

@@ -1,4 +1,5 @@
 <script>
+import { isExternal } from '@/utils/validate'
 export default {
     name: 'sideLink',
     functional: true,
@@ -10,8 +11,7 @@ export default {
     render(h, context) {
         const { to } = context.props
         const vnodes = []
-        const isExternal = /^(https?:|mailto:|tel:)/.test(to.path)
-        if (isExternal) {
+        if (isExternal(to.path)) {
             vnodes.push(<a href={to.path} target='_blank'>{context.children}</a>)
         } else {
             vnodes.push(<router-link to={{ 'name': to.name }}>{context.children}</router-link>)