加入顶部菜单功能

修复一些已知问题
代码调整

java/cloud/common/src/main/java/cn/toesbieya/jxc/common/enumeration/ResourceTypeEnum.java

@@ -1,7 +1,7 @@
 package cn.toesbieya.jxc.common.enumeration;
 
 public enum ResourceTypeEnum {
-    FOLDER(1), LEAF(2), API(3);
+    ROOT(0), FOLDER(1), LEAF(2), API(3);
 
     private final int code;
 

java/cloud/web/web-modules/system/src/main/java/cn/toesbieya/jxc/system/service/ResourceService.java

@@ -43,7 +43,11 @@ public class ResourceService implements ResourceApi {
             return Collections.emptyList();
         }
 
-        return getEnableResourceTree(ids, i -> !i.getType().equals(ResourceTypeEnum.FOLDER.getCode()));
+        return getEnableResourceTree(ids, i -> {
+            Integer type = i.getType();
+            return !type.equals(ResourceTypeEnum.ROOT.getCode())
+                    && !type.equals(ResourceTypeEnum.FOLDER.getCode());
+        });
     }
 
     public R add(SysResource entity) {
@@ -100,7 +104,7 @@ public class ResourceService implements ResourceApi {
                     }
 
                     String path = r.getPath();
-                    int index = path.indexOf("//");
+                    int index = path.lastIndexOf("//");
                     if (index != -1 && !path.startsWith("http")) {
                         //去掉'//'前拼接的父节点的path
                         r.setPath(path.substring(index + 1));
@@ -116,11 +120,9 @@ public class ResourceService implements ResourceApi {
         Integer pid = entity.getPid();
         Integer type = entity.getType();
 
-        boolean isApi = type.equals(ResourceTypeEnum.API.getCode());
+        //顶部菜单的pid必须为0
-
+        if (type.equals(ResourceTypeEnum.ROOT.getCode())) {
-        //根节点不能为数据接口
+            return pid.equals(0) ? null : "顶部菜单不能有父节点";
-        if (pid.equals(0)) {
-            return isApi ? "数据接口不能作为根节点" : null;
         }
 
         //校验父节点
@@ -130,6 +132,7 @@ public class ResourceService implements ResourceApi {
         }
         Integer parentType = parent.getType();
         //1.待添加的节点为数据接口且父节点必须为叶子菜单
+        boolean isApi = type.equals(ResourceTypeEnum.API.getCode());
         if (isApi) {
             if (!parentType.equals(ResourceTypeEnum.LEAF.getCode())) {
                 return "数据接口只能以页面菜单为父节点";
@@ -144,22 +147,23 @@ public class ResourceService implements ResourceApi {
 
     //数据转换
     private void transform(SysResource entity) {
-        Integer pid = entity.getPid();
         Integer type = entity.getType();
+        boolean isRoot = type.equals(ResourceTypeEnum.ROOT.getCode());
         boolean isFolder = type.equals(ResourceTypeEnum.FOLDER.getCode());
+        boolean isLeaf = type.equals(ResourceTypeEnum.LEAF.getCode());
+        boolean isApi = type.equals(ResourceTypeEnum.API.getCode());
 
         //能自定义component的只有叶子菜单
-        if (!type.equals(ResourceTypeEnum.LEAF.getCode())) {
+        if (!isLeaf) {
-            //根节点的聚合菜单的组件只能为'Layout'
+            //顶部菜单的组件只能为'Layout'
-            boolean isRootFolder = isFolder && pid.equals(0);
+            entity.setComponent(isRoot ? "Layout" : null);
-            entity.setComponent(isRootFolder ? "Layout" : null);
         }
-        //聚合菜单不能设置name
+        //顶部或聚合菜单不能设置name（此处的name是路由名称）
-        if (isFolder) {
+        if (isRoot || isFolder) {
             entity.setName(null);
         }
         //数据接口不能设置meta
-        if (type.equals(ResourceTypeEnum.API.getCode())) {
+        if (isApi) {
             entity.setMeta(null);
         }
     }

java/local/src/main/java/cn/toesbieya/jxc/enumeration/ResourceTypeEnum.java

@@ -1,7 +1,7 @@
 package cn.toesbieya.jxc.enumeration;
 
 public enum ResourceTypeEnum {
-    FOLDER(1), LEAF(2), API(3);
+    ROOT(0), FOLDER(1), LEAF(2), API(3);
 
     private final int code;
 

java/local/src/main/java/cn/toesbieya/jxc/service/sys/SysResourceService.java

@@ -41,7 +41,11 @@ public class SysResourceService {
             return Collections.emptyList();
         }
 
-        return getEnableResourceTree(ids, i -> !i.getType().equals(ResourceTypeEnum.FOLDER.getCode()));
+        return getEnableResourceTree(ids, i -> {
+            Integer type = i.getType();
+            return !type.equals(ResourceTypeEnum.ROOT.getCode())
+                    && !type.equals(ResourceTypeEnum.FOLDER.getCode());
+        });
     }
 
     public R add(SysResource entity) {
@@ -99,7 +103,7 @@ public class SysResourceService {
                     }
 
                     String path = r.getPath();
-                    int index = path.indexOf("//");
+                    int index = path.lastIndexOf("//");
                     if (index != -1 && !path.startsWith("http")) {
                         //去掉'//'前拼接的父节点的path
                         r.setPath(path.substring(index + 1));
@@ -115,11 +119,9 @@ public class SysResourceService {
         Integer pid = entity.getPid();
         Integer type = entity.getType();
 
-        boolean isApi = type.equals(ResourceTypeEnum.API.getCode());
+        //顶部菜单的pid必须为0
-
+        if (type.equals(ResourceTypeEnum.ROOT.getCode())) {
-        //根节点不能为数据接口
+            return pid.equals(0) ? null : "顶部菜单不能有父节点";
-        if (pid.equals(0)) {
-            return isApi ? "数据接口不能作为根节点" : null;
         }
 
         //校验父节点
@@ -129,6 +131,7 @@ public class SysResourceService {
         }
         Integer parentType = parent.getType();
         //1.待添加的节点为数据接口且父节点必须为叶子菜单
+        boolean isApi = type.equals(ResourceTypeEnum.API.getCode());
         if (isApi) {
             if (!parentType.equals(ResourceTypeEnum.LEAF.getCode())) {
                 return "数据接口只能以页面菜单为父节点";
@@ -143,22 +146,23 @@ public class SysResourceService {
 
     //数据转换
     private void transform(SysResource entity) {
-        Integer pid = entity.getPid();
         Integer type = entity.getType();
+        boolean isRoot = type.equals(ResourceTypeEnum.ROOT.getCode());
         boolean isFolder = type.equals(ResourceTypeEnum.FOLDER.getCode());
+        boolean isLeaf = type.equals(ResourceTypeEnum.LEAF.getCode());
+        boolean isApi = type.equals(ResourceTypeEnum.API.getCode());
 
         //能自定义component的只有叶子菜单
-        if (!type.equals(ResourceTypeEnum.LEAF.getCode())) {
+        if (!isLeaf) {
-            //根节点的聚合菜单的组件只能为'Layout'
+            //顶部菜单的组件只能为'Layout'
-            boolean isRootFolder = isFolder && pid.equals(0);
+            entity.setComponent(isRoot ? "Layout" : null);
-            entity.setComponent(isRootFolder ? "Layout" : null);
         }
-        //聚合菜单不能设置name
+        //顶部或聚合菜单不能设置name（此处的name是路由名称）
-        if (isFolder) {
+        if (isRoot || isFolder) {
             entity.setName(null);
         }
         //数据接口不能设置meta
-        if (type.equals(ResourceTypeEnum.API.getCode())) {
+        if (isApi) {
             entity.setMeta(null);
         }
     }

vue/element-ui-personal/component/Menu/Submenu.vue

@@ -272,7 +272,3 @@ export default {
     }
 }
 </script>
-
-<style>
-
-</style>

vue/src/App.vue

@@ -1,8 +1,6 @@
 <template>
     <div id="app">
-        <keep-alive include="Layout">
         <router-view/>
-        </keep-alive>
     </div>
 </template>
 

vue/src/asset/icon/index.js

@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import VIcon from '@/component/VIcon'
+import VIcon from '@/component/Icon'
 
 Vue.component('v-icon', VIcon)
 

vue/src/component/Icon/index.vue

@@ -19,7 +19,7 @@ export default {
             )
         }
 
-        return <i class={icon} {...data}/>
+        return <i class={`icon ${icon}`} {...data}/>
     }
 }
 </script>
@@ -29,6 +29,5 @@ export default {
     width: 1em;
     height: 1em;
     fill: currentColor;
-    overflow: hidden;
 }
 </style>

vue/src/layout/component/Main.vue

@@ -70,7 +70,6 @@ export default {
     background-color: #f5f7f9;
 
     .scroll-container {
-        position: relative;
         height: 100%;
         display: flex;
         flex-direction: column;

vue/src/layout/component/Navbar/component/RootMenu.vue

@@ -0,0 +1,80 @@
+<script type="text/jsx">
+import jumpOnSelectMenuMixin from "@/layout/mixin/jumpOnSelectMenu"
+
+export default {
+    name: "RootMenu",
+
+    mixins: [jumpOnSelectMenuMixin],
+
+    props: {
+        //当前激活菜单的路径
+        activeMenu: String,
+        //树形菜单数组
+        menu: Array,
+        //是否在顶部菜单个数<=1时仍然渲染
+        alwaysShow: Boolean
+    },
+
+    methods: {
+        onSelect(menu) {
+            const path = menu.fullPath
+            if (path === this.activeMenu) return
+            this.jumpOnSelectMenu(path, false)
+        }
+    },
+
+    render() {
+        //菜单点击时触发select事件，payload为菜单对象
+        const {activeMenu, menu, alwaysShow} = this
+        if (!Array.isArray(menu) || menu.length <= 1 && !alwaysShow) return
+        return (
+            <ul class="root-menu">
+                {menu.map(i => {
+                    const key = i.fullPath + i.meta.title
+                    const className = {'root-menu-item': true, 'active': i.fullPath === activeMenu}
+                    const icon = i.meta.icon
+                    return (
+                        <li key={key} class={className} on-click={() => this.onSelect(i)}>
+                            {icon && <v-icon icon={icon}/>}
+                            {i.meta.title}
+                        </li>
+                    )
+                })}
+            </ul>
+        )
+    }
+}
+</script>
+
+<style lang="scss">
+@import "~@/asset/style/variables.scss";
+
+.root-menu {
+    height: $nav-height;
+    line-height: $nav-height;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    font-size: 14px;
+    color: #515a6e;
+
+    &-item {
+        height: inherit;
+        border-bottom: 2px solid transparent;
+        float: left;
+        padding: 0 20px;
+        cursor: pointer;
+        transition: all .2s ease-in-out;
+
+        > .icon {
+            margin-right: 6px;
+            vertical-align: -0.125em;
+        }
+
+        &:hover, &.active {
+            color: $--color-primary;
+            border-bottom: 2px solid $--color-primary;
+        }
+    }
+}
+</style>

vue/src/layout/component/Navbar/index.vue

@@ -4,6 +4,8 @@
             <hamburger class="navbar-item" :active="!sidebarCollapse" @click="sidebarCtrl"/>
 
             <breadcrumb v-if="showBreadcrumb"/>
+
+            <root-menu :active-menu="activeRootMenu" :menu="menus" always-show/>
         </div>
 
         <div>
@@ -51,8 +53,8 @@ import GuideMixin from '@/mixin/guide'
 import Bell from "./component/Bell"
 import Breadcrumb from './component/Breadcrumb'
 import Hamburger from './component/Hamburger'
+import RootMenu from "./component/RootMenu"
 import SettingDrawer from './component/SettingDrawer'
-import {auth} from "@/util/auth"
 import {elConfirm} from "@/util/message"
 
 export default {
@@ -60,11 +62,13 @@ export default {
 
     mixins: [GuideMixin.navbar],
 
-    components: {Hamburger, Breadcrumb, Bell, SettingDrawer},
+    components: {Hamburger, Breadcrumb, Bell, RootMenu, SettingDrawer},
 
     data: () => ({settingDrawer: false}),
 
     computed: {
+        ...mapState('resource', ['activeRootMenu', 'menus']),
+
         ...mapState('user', ['avatar', 'name', 'prepareLogout']),
 
         ...mapState('setting', ['sidebarCollapse', 'showBreadcrumb'])
@@ -74,6 +78,7 @@ export default {
         sidebarCtrl() {
             this.$store.commit('setting/sidebarCollapse', !this.sidebarCollapse)
         },
+
         refresh() {
             this.$router.replace({path: `/redirect${this.$route.fullPath}`})
         },

vue/src/layout/component/Sidebar/component/SidebarItem.vue

@@ -14,7 +14,7 @@ function getOnlyChild(menu) {
 
 function renderSingleMenu(h, {index, icon, title}) {
     return (
-        <el-menu-item index={index}>
+        <el-menu-item key={index} index={index}>
             <SidebarItemContent icon={icon} title={title}/>
         </el-menu-item>
     )
@@ -22,7 +22,7 @@ function renderSingleMenu(h, {index, icon, title}) {
 
 function renderSubMenu(h, {index, icon, title, children}) {
     return (
-        <el-submenu index={index} popper-append-to-body>
+        <el-submenu key={index} index={index}>
             <SidebarItemContent slot="title" icon={icon} title={title}/>
             {children}
         </el-submenu>

vue/src/layout/component/Sidebar/component/SidebarItemContent.vue

@@ -4,10 +4,7 @@ export default {
 
     functional: true,
 
-    props: {
+    props: {icon: String, title: String},
-        icon: String,
-        title: String
-    },
 
     render(h, context) {
         const {icon, title} = context.props

vue/src/layout/component/Sidebar/index.vue

@@ -1,31 +1,42 @@
 <script type="text/jsx">
 import {mapState} from 'vuex'
+import jumpOnSelectMenuMixin from "@/layout/mixin/jumpOnSelectMenu"
 import Logo from './component/Logo'
 import SidebarItem from './component/SidebarItem'
-import {isExternal} from "@/util/validate"
 
 export default {
     name: 'sidebar',
 
+    mixins: [jumpOnSelectMenuMixin],
+
     components: {SidebarItem, Logo},
 
-    data: () => ({mouseOutside: true, activeMenu: ''}),
+    data() {
+        return {
+            //鼠标是否在侧边栏内
+            mouseOutside: true,
+            //当前激活的菜单的fullPath
+            activeMenu: '',
+            //侧边栏菜单数组，即当前激活的顶部菜单的children
+            sidebarMenus: []
+        }
+    },
 
     computed: {
         ...mapState('app', ['device']),
 
-        ...mapState('resource', ['menus']),
+        ...mapState('resource', ['activeRootMenu', 'menus']),
 
         ...mapState('setting', ['showLogo', 'sidebarCollapse', 'sidebarUniqueOpen', 'sidebarShowParent', 'sidebarAutoHidden']),
 
-        //仅在pc端可折叠
+        //侧边栏的折叠状态，true折叠false展开，仅在pc端可折叠
         collapse() {
             return this.sidebarCollapse && this.device === 'pc'
         },
 
         //是否隐藏侧边栏
         //①设置了侧边栏自动隐藏且鼠标不再侧边栏内
-        //②侧边栏处于折叠状态且是移动设备
+        //②侧边栏处于折叠状态且是移动端
         hideSidebar() {
             return this.sidebarAutoHidden && this.mouseOutside
                 || this.sidebarCollapse && this.device === 'mobile'
@@ -62,6 +73,21 @@ export default {
             }
         },
 
+        activeRootMenu: {
+            immediate: true,
+            handler(v) {
+                const {menus} = this
+                if (menus.length <= 0 || !v) return
+                const root = menus.find(i => i.path === v)
+                this.sidebarMenus = root ? root.children || [] : []
+
+                //由于侧边栏菜单数组更新后，el-menu不一定会更新（当数组中不存在单级菜单时）
+                //所以手动更新el-menu的当前高亮菜单
+                const menu = this.$refs.menu
+                menu && menu.updateActiveIndex()
+            }
+        },
+
         //设置了侧边栏自动隐藏后，根据状态添加或移除鼠标移动事件
         hideSidebar: {
             immediate: true,
@@ -96,18 +122,7 @@ export default {
             //mobile时激活隐藏侧边栏
             this.device === 'mobile' && this.$store.commit('setting/sidebarCollapse', true)
 
-            if (!jump) return
+            jump && this.jumpOnSelectMenu(index)
-
-            //外部链接时打开新窗口
-            if (isExternal(index)) {
-                return window.open(index)
-            }
-
-            if (this.$route.path === index) {
-                this.$store.commit('tagsView/delCachedView', this.$route)
-                this.$nextTick(() => this.$router.replace({path: '/redirect' + this.$route.fullPath}))
-            }
-            else this.$router.push(index)
         }
     },
 
@@ -116,6 +131,9 @@ export default {
     },
 
     render() {
+        //如果没有菜单，则不渲染侧边栏
+        if (this.sidebarMenus.length <= 0) return
+
         const menu = (
             <el-menu
                 ref="menu"
@@ -126,12 +144,11 @@ export default {
                 mode="vertical"
                 on-select={this.select}
             >
-                {this.menus.map(menu => (
+                {this.sidebarMenus.map(m => (
                     <sidebar-item
-                        key={menu.path}
                         show-parent={this.sidebarShowParent}
                         collapse={this.sidebarCollapse}
-                        menu={menu}
+                        menu={m}
                     />
                 ))}
             </el-menu>

vue/src/layout/component/Sidebar/style.scss

@@ -1,6 +1,6 @@
 @import "~@/asset/style/variables.scss";
 
-$iconSize: 17px;
+$iconSize: 16px;
 
 .sidebar-container {
     display: flex;
@@ -84,8 +84,6 @@ $iconSize: 17px;
 
     .icon {
         margin-right: 16px;
-        width: $iconSize;
-        height: $iconSize;
     }
 
     //菜单hover

vue/src/layout/component/TagsView/index.vue

@@ -28,8 +28,8 @@
 </template>
 
 <script type="text/jsx">
-import shortcutMixin from './mixin/shortcut'
+import shortcutMixin from '@/layout/mixin/shortcut'
-import decideRouterTransitionMixin from './mixin/decideRouterTransition'
+import decideRouterTransitionMixin from '@/layout/mixin/decideRouterTransition'
 import ContextMenu from "@/component/ContextMenu"
 import ContextMenuItem from "@/component/ContextMenu/item"
 import ScrollPane from './ScrollPane'

vue/src/layout/mixin/jumpOnSelectMenu.js

@@ -0,0 +1,20 @@
+import {isExternal} from "@/util/validate"
+
+export default {
+    methods: {
+        jumpOnSelectMenu(fullPath, refreshWhenSame = true) {
+            //外部链接时打开新窗口
+            if (isExternal(fullPath)) {
+                return window.open(fullPath)
+            }
+
+            //触发的菜单路径是当前路由时，根据参数判断是否进行刷新
+            if (this.$route.path === fullPath) {
+                if (!refreshWhenSame) return
+                this.$store.commit('tagsView/delCachedView', this.$route)
+                this.$nextTick(() => this.$router.replace({path: '/redirect' + this.$route.fullPath}))
+            }
+            else this.$router.push(fullPath)
+        }
+    }
+}

vue/src/router/define.js

@@ -3,19 +3,11 @@ import Redirect from "@/view/app/redirect"
 import Login from "@/view/app/login/index"
 import Page404 from "@/view/app/404"
 import Page403 from "@/view/app/403"
-import {parseRoutes, stringifyRoutes, metaExtend} from "./util"
+import routes from './module'
-
+import {parseRoutes, stringifyRoutes} from "./util"
-const modulesFiles = require.context('./module', false, /\.js$/)
-const dynamicRoutes = modulesFiles.keys().reduce((modules, modulePath) => {
-    const value = modulesFiles(modulePath).default
-    Array.isArray(value) ? modules.push(...value) : modules.push(value)
-    return modules
-}, [])
-
-metaExtend(dynamicRoutes)
 
 export function getDynamicRoutes() {
-    return parseRoutes(stringifyRoutes(dynamicRoutes))
+    return parseRoutes(stringifyRoutes(routes))
 }
 
 //系统自有路由

vue/src/router/index.js

@@ -17,11 +17,11 @@ import {pathToRegexp} from 'path-to-regexp'
 import NProgress from 'nprogress'
 import {contextPath, routerMode, title} from '@/config'
 import defaultRoutes from '@/router/define'
-import {auth, needAuth} from "@/util/auth"
-import {isUserExist} from "@/util/storage"
-import {stringifyRoutes, parseRoutes, generateRoutes} from './util'
 import store from "@/store"
+import {stringifyRoutes, parseRoutes, generateRoutes} from './util'
 import {isEmpty} from "@/util"
+import {auth, needAuth} from "@/util/auth"
+import {isUserExist} from "@/util/storage"
 
 Vue.use(Router)
 
@@ -59,6 +59,8 @@ router.beforeEach(async (to, from, next) => {
         return next({path: '/login', query: {redirect: to.fullPath}})
     }
 
+    setActiveRootMenu(to)
+
     //初始化路由和菜单权限
     if (!store.state.resource.init) {
         await store.dispatch('resource/init', {...store.state.user, addRoutes: true})
@@ -103,6 +105,16 @@ function needExtraRedirect(to, from) {
     return !isEmpty(a) && a === b
 }
 
+//设置顶部菜单的激活状态
+function setActiveRootMenu(to) {
+    const {path, matched} = to
+    //使用/redirect跳转 或 无匹配路由 时跳过
+    if (path.startsWith('/redirect') || matched.length === 0) {
+        return
+    }
+    store.commit('resource/activeRootMenu', matched[0].path || '/')
+}
+
 //获取进行权限验证的路由地址，使用了动态路由的会用到
 function getAuthorizedPath(route) {
     const {params, path, matched} = route

vue/src/router/module/app.js

@@ -1,28 +0,0 @@
-//路由表：系统页面
-
-const router = [
-    {
-        path: '/',
-        component: 'Layout',
-        children: [
-            {
-                path: 'index',
-                component: 'index/',
-                name: 'index',
-                meta: {title: '首页', affix: true, icon: 'svg-home', noAuth: true, sort: 0}
-            },
-            {
-                path: 'user',
-                name: 'userCenter',
-                component: 'userCenter/',
-                meta: {title: '个人中心', noCache: true, icon: 'svg-user', noAuth: true, hidden: true},
-            }
-        ]
-    },
-    {
-        path: 'https://doc.toesbieya.cn',
-        meta: {title: '文档', icon: 'svg-documentation', noAuth: true, sort: 1}
-    }
-]
-
-export default router

vue/src/router/module/defaultRoot/child/app.js

@@ -0,0 +1,18 @@
+//路由表：系统页面
+
+const router = [
+    {
+        path: 'index',
+        component: 'index/',
+        name: 'index',
+        meta: {title: '首页', affix: true, icon: 'svg-home', noAuth: true, sort: 0}
+    },
+    {
+        path: 'user',
+        name: 'userCenter',
+        component: 'userCenter/',
+        meta: {title: '个人中心', noCache: true, icon: 'svg-user', noAuth: true, hidden: true},
+    }
+]
+
+export default router

vue/src/router/module/defaultRoot/child/example.js

@@ -1,8 +1,7 @@
 /*路由表：演示用例*/
 
 const router = {
-    path: '/example',
+    path: 'example',
-    component: 'Layout',
     meta: {title: '演示用例', icon: 'svg-show', noAuth: true, noCache: true},
     children: [
         {
@@ -98,4 +97,4 @@ const router = {
     ]
 }
 
-export default router
+export default []

vue/src/router/module/defaultRoot/child/message.js

@@ -1,8 +1,7 @@
 /*路由表：消息中心*/
 
 const router = {
-    path: '/message',
+    path: 'message',
-    component: 'Layout',
     meta: {title: '消息中心', icon: 'svg-message', alwaysShow: true},
     children: [
         {

vue/src/router/module/defaultRoot/child/purchase.js

@@ -1,8 +1,7 @@
 /*路由表：采购管理*/
 
 const router = {
-    path: '/purchase',
+    path: 'purchase',
-    component: 'Layout',
     meta: {title: '采购管理', icon: 'svg-shopping', alwaysShow: true},
     children: [
         {

vue/src/router/module/defaultRoot/child/sell.js

@@ -1,8 +1,7 @@
 /*路由表：销售管理*/
 
 const router = {
-    path: '/sell',
+    path: 'sell',
-    component: 'Layout',
     meta: {title: '销售管理', icon: 'svg-sell', alwaysShow: true},
     children: [
         {

vue/src/router/module/defaultRoot/child/stock.js

@@ -1,8 +1,7 @@
 /*路由表：库存管理*/
 
 const router = {
-    path: '/stock',
+    path: 'stock',
-    component: 'Layout',
     meta: {title: '库存管理', icon: 'svg-stock', alwaysShow: true},
     children: [
         {

vue/src/router/module/defaultRoot/child/system.js

@@ -1,8 +1,7 @@
 /*路由表：系统管理*/
 
 const router = {
-    path: '/system',
+    path: 'system',
-    component: 'Layout',
     meta: {title: '系统管理', icon: 'svg-system', alwaysShow: true},
     children: [
         {

vue/src/router/module/defaultRoot/index.js

@@ -0,0 +1,12 @@
+/*顶级菜单：默认*/
+
+import {context2array} from '@/router/util'
+
+const files = require.context('./child', false, /\.js$/)
+
+export default {
+    path: '/',
+    component: 'Layout',
+    meta: {title: '后台管理', icon: 'svg-home', sort: 0},
+    children: context2array(files)
+}

vue/src/router/module/docRoot/index.js

@@ -0,0 +1,4 @@
+export default {
+    path: 'https://doc.toesbieya.cn',
+    meta: {title: '文档', icon: 'svg-documentation', noAuth: true}
+}

vue/src/router/module/exampleRoot/child/components.js

@@ -0,0 +1,36 @@
+export default {
+    path: 'component',
+    meta: {title: '组件', icon: 'el-icon-s-grid'},
+    children: [
+        {
+            path: 'uploadExample',
+            component: 'example/component/upload',
+            meta: {title: '上传文件'}
+        },
+        {
+            path: 'skeletonExample',
+            component: 'example/component/skeleton',
+            meta: {title: '骨架屏'}
+        },
+        {
+            path: 'rippleExample',
+            component: 'example/component/ripple',
+            meta: {title: '波纹'}
+        },
+        {
+            path: 'signatureExample',
+            component: 'example/component/signature',
+            meta: {title: '手写签名'}
+        },
+        {
+            path: 'regionSelectorExample',
+            component: 'example/component/regionSelector',
+            meta: {title: '行政区划选择'}
+        },
+        {
+            path: 'treeSelectExample',
+            component: 'example/component/treeSelect',
+            meta: {title: '树选择'}
+        }
+    ]
+}

vue/src/router/module/exampleRoot/child/cool.js

@@ -0,0 +1,16 @@
+export default {
+    path: 'cool',
+    meta: {title: '好玩的东东', icon: 'el-icon-s-opportunity'},
+    children: [
+        {
+            path: 'fluid',
+            component: 'example/cool/fluid',
+            meta: {title: '流体动画'}
+        },
+        {
+            path: 'l2d',
+            component: 'example/cool/l2d',
+            meta: {title: '看板娘'}
+        },
+    ]
+}

vue/src/router/module/exampleRoot/child/icon.js

@@ -0,0 +1,5 @@
+export default {
+    path: 'icon',
+    component: 'example/icon/',
+    meta: {title: '图 标', icon: 'el-icon-eleme'}
+}

vue/src/router/module/exampleRoot/child/iframe.js

@@ -0,0 +1,14 @@
+export default {
+    path: 'iframe',
+    meta: {title: 'iframe', noCache: false, icon: 'el-icon-s-flag'},
+    children: [
+        {
+            path: 'taobao',
+            meta: {title: '淘宝', iframe: 'https://www.taobao.com'}
+        },
+        {
+            path: 'baidu',
+            meta: {title: '百度', iframe: 'https://www.baidu.com'}
+        }
+    ]
+}

vue/src/router/module/exampleRoot/child/test.js

@@ -0,0 +1,35 @@
+export default {
+    path: 'test',
+    meta: {title: '测试页面', icon: 'el-icon-warning'},
+    children: [
+        {
+            path: 'develop',
+            component: 'example/test/develop/',
+            meta: {title: '开发测试'}
+        },
+        {
+            path: 'cache',
+            meta: {title: '详情页缓存测试', noCache: false},
+            children: [
+                {
+                    path: 'detailPage1',
+                    component: 'example/test/cache/detail',
+                    meta: {
+                        title: '详情页1',
+                        usePathKey: true,
+                        commonModule: '@/view/example/test/cache/detailPage'
+                    }
+                },
+                {
+                    path: 'detailPage2',
+                    component: 'example/test/cache/detail',
+                    meta: {
+                        title: '详情页2',
+                        usePathKey: true,
+                        commonModule: '@/view/example/test/cache/detailPage'
+                    }
+                }
+            ]
+        }
+    ]
+}

vue/src/router/module/exampleRoot/index.js

@@ -0,0 +1,12 @@
+/*顶级菜单：演示用例*/
+
+import {context2array} from '@/router/util'
+
+const files = require.context('./child', false, /\.js$/)
+
+export default {
+    path: '/example',
+    component: 'Layout',
+    meta: {title: '演示用例', icon: 'svg-show', noAuth: true, noCache: true},
+    children: context2array(files)
+}

vue/src/router/module/index.js

@@ -0,0 +1,5 @@
+import defaultRoot from './defaultRoot'
+import exampleRoot from './exampleRoot'
+import docRoot from './docRoot'
+
+export default [defaultRoot, exampleRoot, docRoot]

vue/src/router/util.js

@@ -139,3 +139,12 @@ export function metaExtend(routes, parentMeta) {
         route.children && metaExtend(route.children, route.meta)
     })
 }
+
+//将require.context导出的对象处理为数组
+export function context2array(context) {
+    return context.keys().reduce((modules, modulePath) => {
+        const value = context(modulePath).default
+        Array.isArray(value) ? modules.push(...value) : modules.push(value)
+        return modules
+    }, [])
+}

vue/src/store/module/app.js

@@ -11,7 +11,7 @@ const state = {
     //登陆页背景动画
     loginBackgroundAnimation: 'sparkRain',
 
-    //右侧块是否含有头部
+    //右侧块是否含有头部，这里初始值是为了转为boolean类型
     hasHeader: !!!localSettings.headerAutoHidden
 }
 

vue/src/store/module/message.js

@@ -11,7 +11,7 @@ const actions = {
     refresh({commit}) {
         search
             .request({page: 1, pageSize: 1, unread: true})
-            .then(({data}) => commit('unreadCount', data))
+            .then(({data}) => commit('unreadCount', data.total))
     }
 }
 

vue/src/store/module/resource.js

@@ -3,20 +3,33 @@ import {useBackendRoute} from '@/config'
 import {addDynamicRoutes} from '@/router'
 import {getDynamicRoutes} from '@/router/define'
 import {parseRoutes, metaExtend} from "@/router/util"
-import {needAuth} from "@/util/auth"
-import {createTree} from "@/util/tree"
 import {getAll} from "@/api/system/resource"
 import {isEmpty} from "@/util"
+import {needAuth} from "@/util/auth"
+import {createTree} from "@/util/tree"
 import {isExternal} from "@/util/validate"
 
 const state = {
+    //当前激活的顶部菜单的fullPath
+    activeRootMenu: '',
+
+    //所有的树形菜单，每个元素为顶部菜单，顶部菜单的子级（如果有）为侧边栏菜单
     menus: [],
+
+    //后端返回的原始权限数据
+    //权限表：<权限路径，权限id>，用于util.auth
     resourceMap: {},
+    //由原始权限数据生成的树（当用户非admin时过滤了admin专属权限）
     resourceTree: [],
+
+    //判断权限是否已经初始化
     init: false
 }
 
 const mutations = {
+    activeRootMenu(state, activeRootMenu) {
+        state.activeRootMenu = activeRootMenu
+    },
     menus(state, menus) {
         sort(menus)
         state.menus = menus
@@ -52,12 +65,18 @@ const actions = {
         return getAll
             .request()
             .then(({data}) => {
+                //动态添加路由，这里不需要进行权限过滤
                 const routes = transformOriginRouteData(data)
                 metaExtend(routes)
                 addRoutes && addDynamicRoutes(routes)
+
+                //获取经过权限过滤后的菜单
                 const menus = getAuthorizedMenus({resources, admin}, routes)
+
                 commit('menus', menus)
                 commit('resource', {data: data || [], admin})
+
+                //设置初始化完成的标志
                 commit('init', true)
             })
     }

vue/src/view/message/user/MessageStream.vue

@@ -14,7 +14,7 @@
             <el-timeline>
                 <el-timeline-item
                     v-for="msg in tableData"
-                    :key="msg.index"
+                    :key="msg.id"
                     :timestamp="msg.time"
                     placement="top"
                 >
@@ -125,7 +125,7 @@ export default {
         },
 
         read(msg) {
-            if (msg.read) return
+            if (this.mode === 'read' || msg.read) return
             msg.read = true
             this.$store.commit('message/unreadCount', this.unreadCount - 1)
             read.request(msg.id)

vue/src/view/system/menu/common.js

@@ -1,4 +1,5 @@
 export const nodeType = [
+    {label: '顶部菜单', value: 0, icon: 'el-icon-s-promotion'},
     {label: '聚合菜单', value: 1, icon: 'el-icon-folder'},
     {label: '页面菜单', value: 2, icon: 'el-icon-document'},
     {label: '数据接口', value: 3, icon: 'el-icon-open'},

vue/src/view/system/menu/indexPage.vue

@@ -26,7 +26,7 @@
                 <el-alert show-icon :closable="false">
                     <template v-slot:title>
                         当前选择编辑：
-                        <el-tag v-if="curNode" size="mini" closable @close="() => curNode = null">
+                        <el-tag v-if="curNode" size="mini" closable @close="curNode = null">
                             {{ getNodeTitle(curNode) }}
                         </el-tag>
                     </template>
@@ -175,7 +175,7 @@ export default {
             form: {
                 id: null,
                 pid: null,
-                type: 0,
+                type: null,
                 name: null,
                 path: null,
                 component: null,
@@ -213,24 +213,23 @@ export default {
             return this.$store.state.resource.resourceTree
         },
         showForm() {
-            return this.type === 'add' && this.form.pid === 0 || this.curNode
+            return this.type === 'add' && this.form.type === 0 || this.curNode
         },
         showTypeSelector() {
-            const isRoot = this.form.pid === 0
+            //0.根节点的类型不能被改变
+            const isRoot = this.form.type === 0
             //1.非数据接口
             const noApiNode = this.form.type !== 3
             //2.其下无子节点
             const noChild = this.type === 'add' && isRoot
                 || this.type === 'edit' && this.curNode.childNodes.length <= 0
-            //3.不是初始节点
+            //3.父节点只能为顶部或聚合菜单
-            const noInitialNode = this.form.path !== '/' || isRoot
-            //4.父节点只能为聚合菜单
             const parentIsFolderMenu =
                 isRoot
                     ? true
-                    : this.type === 'add' && this.curNode.data.type === 1
+                    : this.type === 'add' && [0, 1].includes(this.curNode.data.type)
-                    || this.type === 'edit' && this.curNode.parent.data.type === 1
+                    || this.type === 'edit' && [0, 1].includes(this.curNode.parent.data.type)
-            return noApiNode && noChild && noInitialNode && parentIsFolderMenu
+            return !isRoot && noApiNode && noChild && parentIsFolderMenu
         },
         showSaveBtn() {
             return this.type === 'add' && this.canAdd || this.type === 'edit' && this.canUpdate
@@ -271,8 +270,8 @@ export default {
         },
         //表单中菜单类型选择器改变时
         typeChange(v) {
-            //从聚合改为页面菜单时，清空component
+            //从顶部或聚合改为页面菜单时，清空component
-            if (v === 2 && this.form.type === 1) {
+            if (v === 2 && [0, 1].includes(this.form.type)) {
                 this.form.component = null
             }
             this.form.type = v
@@ -284,7 +283,7 @@ export default {
             this.type = 'add'
             this.clearForm()
             this.form.pid = 0
-            this.form.type = 1
+            this.form.type = 0
         },
         addChild() {
             if (this.loading) return
@@ -294,7 +293,7 @@ export default {
             this.type = 'add'
             this.clearForm()
             this.form.pid = id
-            //如果是叶子菜单，那么只能添加接口
+            //如果父节点是叶子菜单，那么只能添加接口
             this.form.type = type === 2 ? 3 : 1
         },
         del() {
@@ -325,6 +324,7 @@ export default {
             resetObj(this.form)
             this.form.id = null
             this.form.pid = null
+            this.form.type = null
             this.form.metaStr = JSON.stringify({title: ''}, null, 2)
             this.form.meta.sort = null
             this.form.enable = true
@@ -344,6 +344,7 @@ export default {
                     .finally(() => this.loading = false)
             })
         },
+        //将this.form转换为真正的提交数据（meta替换为metaStr）
         transformForm() {
             return {...this.form, meta: this.form.metaStr, metaStr: undefined}
         }