update 重做菜单

Web/src/views/main/_layout/header/index.vue

@@ -10,7 +10,7 @@
         >
           <a-icon :type="$root.global.settings.siderCollapsed ? 'menu-unfold' : 'menu-fold'" />
         </a>
-        <search :menus="nav.menus" />
+        <search :menus="nav.content" />
       </div>
       <div class="header-actions">
         <User />
@@ -29,9 +29,11 @@
     </section>
     <container v-else-if="$root.global.settings.layout === 'top-nav'">
       <div class="header-actions">
+        <a @click="showNav = !showNav" class="header-action mr-md">
+          <a-icon type="menu" />
+        </a>
         <Logo />
-        <Sider :nav="nav" @open="(nav) => $emit('open', nav)" />
-        <search :menus="nav.menus" />
+        <search :menus="nav.content" />
       </div>
       <div class="header-actions">
         <User />
@@ -47,12 +49,26 @@
           <a-icon type="setting" />
         </a>
       </div>
+      <a-drawer
+        :body-style="{ padding: 0 }"
+        :closable="false"
+        :get-container="'.ant-layout-content > .ant-tabs'"
+        :visible="showNav"
+        :wrap-style="{ position: 'absolute' }"
+        @close="showNav = false"
+        placement="left"
+        width="38.2%"
+      >
+        <div @blur="showNav = false" @mouseleave="showNav = false">
+          <Nav :nav="nav" @open="showNav = false" />
+        </div>
+      </a-drawer>
     </container>
   </a-layout-header>
 </template>
 <script>
 import Logo from '../logo';
-import Sider from '../sider';
+import Nav from '../nav';
 
 import User from './user';
 import Search from './search';
@@ -60,7 +76,7 @@ import Search from './search';
 export default {
   components: {
     Logo,
-    Sider,
+    Nav,
 
     User,
     Search,
@@ -69,12 +85,16 @@ export default {
     nav: {
       default() {
         return {
-          apps: [],
-          menus: [],
+          content: [],
         };
       },
       type: Object,
     },
   },
+  data() {
+    return {
+      showNav: false,
+    };
+  },
 };
 </script>

Web/src/views/main/_layout/header/search.js

@@ -46,7 +46,7 @@ export default {
         onSearch(value) {
             this.searchText = value
 
-            const menus = this.$_.cloneDeep(this.menus)
+            const menus = this.$_.concat.apply(this, this.$_.cloneDeep(this.menus.map(p => p.menu)))
 
             const search = (m) => {
                 if (!value) return []
@@ -83,12 +83,14 @@ export default {
                 return result
             }
 
-            this.searchResult = unzip(search(menus)).map(p => {
+            const result = unzip(search(menus)).filter(p => p.parents.length).map(p => {
                 return {
                     parents: p.parents.join('-'),
                     children: p.children
                 }
             })
+
+            this.searchResult = result
         },
 
         onSearchSelect(value, node) {

Web/src/views/main/_layout/nav/index.js

@@ -0,0 +1,78 @@
+export default {
+    props: {
+        nav: {
+            type: Object,
+            default() {
+                return {
+                    content: []
+                }
+            }
+        }
+    },
+
+    methods: {
+        onOpenContentWindow(menu) {
+            this.$emit('open')
+            setTimeout(() => {
+                this.openContentWindow({
+                    key: menu.id,
+                    title: menu.meta.title,
+                    icon: menu.meta.icon,
+                    path: menu.component,
+                })
+            }, 300)
+        },
+    },
+
+    render() {
+        return (
+            <container mode="container-fluid">
+                {this.nav.content.map((item, i) => {
+                    return (
+                        <section class="yo-nav">
+                            <h5 class="yo-nav--app">{item.app.name}</h5>
+                            <div class="yo-nav--row">
+                                {
+                                    item.menu.map(sub => {
+                                        return (
+                                            <div class="yo-nav--col">
+                                                <div class="yo-nav--sub-item">
+                                                    {
+                                                        sub.children ?
+                                                            <div class="yo-nav--item-group">
+                                                                {
+                                                                    sub.meta.icon && <a-icon type={sub.meta.icon} class="mr-xs" />
+                                                                }
+                                                                {sub.meta.title}
+                                                            </div>
+                                                            :
+                                                            <div class="yo-nav--item" onClick={() => this.onOpenContentWindow(sub)}>
+                                                                {
+                                                                    sub.meta.icon && <a-icon type={sub.meta.icon} class="mr-xs" />
+                                                                }
+                                                                {sub.meta.title}
+                                                            </div>
+                                                    }
+                                                    {
+                                                        sub.children && sub.children.map(menu => {
+                                                            return <div class="yo-nav--item" onClick={() => this.onOpenContentWindow(menu)}>
+                                                                {
+                                                                    menu.meta.icon && <a-icon type={menu.meta.icon} class="mr-xs" />
+                                                                }
+                                                                {menu.meta.title}
+                                                            </div>
+                                                        })
+                                                    }
+                                                </div>
+                                            </div>
+                                        )
+                                    })
+                                }
+                            </div>
+                        </section>
+                    )
+                })}
+            </container>
+        )
+    }
+}

Web/src/views/main/_layout/sider/app.vue

@@ -1,46 +0,0 @@
-<template>
-  <a-popover :placement="placement" trigger="click">
-    <template slot="content">
-      <a-button-group>
-        <a-button :key="app.code" @click="onChangeApp(app)" v-for="app in apps">{{ app.name }}</a-button>
-      </a-button-group>
-    </template>
-    <div class="yo-apps-selector">
-      <span>{{ appActived.name }}</span>
-    </div>
-  </a-popover>
-</template>
-<script>
-export default {
-  props: {
-    apps: {
-      type: Array,
-      require: true,
-    },
-  },
-
-  computed: {
-    placement() {
-      const layout = this.$root.global.settings.layout;
-      switch (layout) {
-        case 'left-menu':
-          return 'right';
-        case 'right-menu':
-          return 'left';
-        default:
-          return 'bottom';
-      }
-    },
-
-    appActived() {
-      return this.apps.find((p) => p.active) || {};
-    },
-  },
-
-  methods: {
-    onChangeApp(app) {
-      this.$emit('change-app', app);
-    },
-  },
-};
-</script>

Web/src/views/main/_layout/sider/index copy.vue

@@ -1,138 +0,0 @@
-<template>
-  <section>
-    <a-layout-sider
-      :collapsed="siderCollapsed === undefined ? $root.global.settings.siderCollapsed : siderCollapsed"
-      @collapse="onCollapse"
-      v-if="$root.global.settings.layout === 'left-menu' || $root.global.settings.layout === 'right-menu'"
-      width="200"
-    >
-      <Logo />
-      <div class="yo-sider-nav">
-        <App :apps="nav.apps" @change-app="(app) => $emit('change-app', app)" />
-        <!-- <swiper :options="siderSwiperOptions" ref="sider-swiper">
-          <swiper-slide>
-            <a-spin :spinning="nav.loading">
-              <a-icon slot="indicator" spin type="loading" />
-              <Menu
-                :menu-style="{ height: '100%', borderRight: 0 }"
-                :nav="nav"
-                @openChange="onMenuOpenChange"
-                mode="inline"
-              />
-            </a-spin>
-          </swiper-slide>
-          <div class="swiper-scrollbar" id="layout--swiper-scrollbar" slot="scrollbar"></div>
-        </swiper>-->
-        <div class="swiper-container" id="layout--swiper-container">
-          <div class="swiper-wrapper">
-            <div class="swiper-slide">
-              <a-spin :spinning="nav.loading">
-                <a-icon slot="indicator" spin type="loading" />
-                <Menu
-                  :menu-style="{ height: '100%', borderRight: 0 }"
-                  :nav="nav"
-                  @openChange="onMenuOpenChange"
-                  mode="inline"
-                />
-              </a-spin>
-            </div>
-            <div class="swiper-scrollbar" id="layout--swiper-scrollbar"></div>
-          </div>
-        </div>
-      </div>
-    </a-layout-sider>
-    <template v-else-if="$root.global.settings.layout === 'top-nav'">
-      <Menu
-        :menu-style="{ borderBottom: 0 }"
-        :nav="nav"
-        @openChange="onMenuOpenChange"
-        mode="horizontal"
-      />
-    </template>
-  </section>
-</template>
-<script>
-import Logo from '../logo';
-import App from './app';
-import Menu from './menu';
-
-import Swiper from 'swiper';
-
-let timer,
-  swiper,
-  siderSwiperOptions = {
-    direction: 'vertical',
-    slidesPerView: 'auto',
-    freeMode: true,
-    scrollbar: {
-      el: '#layout--swiper-scrollbar',
-    },
-    mousewheel: true,
-  };
-
-export default {
-  components: {
-    Logo,
-    App,
-    Menu,
-  },
-  props: {
-    nav: {
-      default() {
-        return {
-          apps: [],
-          menus: [],
-          loading: false,
-        };
-      },
-      type: Object,
-    },
-  },
-  data() {
-    return {
-      siderCollapsed: undefined,
-    };
-  },
-  mounted() {
-    swiper = new Swiper('#layout--swiper-container', siderSwiperOptions);
-
-    window.addEventListener('resize', () => {
-      if (this.$root.global.settings.layout === 'left-menu' || this.$root.global.settings.layout === 'right-menu') {
-        if (!this.$root.global.settings.siderCollapsed) {
-          if (window.innerWidth < 1000) {
-            this.siderCollapsed = true;
-          } else {
-            this.siderCollapsed = undefined;
-          }
-        }
-
-        this.onUpdateSwiper();
-      }
-    });
-  },
-  methods: {
-    onUpdateSwiper() {
-      clearTimeout(timer);
-      timer = setTimeout(() => {
-        // if (this.$refs['sider-swiper']) {
-        //   this.$refs['sider-swiper'].$swiper.update();
-        // }
-        swiper.update();
-      }, 300);
-    },
-
-    onMenuOpenChange() {
-      this.onUpdateSwiper();
-    },
-
-    onCollapse() {
-      this.onUpdateSwiper();
-    },
-
-    windowTriggerResize() {
-      let e = new Event('resize');
-      window.dispatchEvent(e);
-    },
-  },
-};
-</script>

Web/src/views/main/_layout/sider/index.vue

@@ -8,7 +8,6 @@
     >
       <Logo />
       <div class="yo-sider-nav">
-        <App :apps="nav.apps" @change-app="(app) => $emit('change-app', app)" />
         <div class="swiper-container" id="layout--swiper-container">
           <div class="swiper-wrapper">
             <div class="swiper-slide">
@@ -27,19 +26,10 @@
         </div>
       </div>
     </a-layout-sider>
-    <template v-else-if="$root.global.settings.layout === 'top-nav'">
-      <Menu
-        :menu-style="{ borderBottom: 0 }"
-        :nav="nav"
-        @openChange="onMenuOpenChange"
-        mode="horizontal"
-      />
-    </template>
   </section>
 </template>
 <script>
 import Logo from '../logo';
-import App from './app';
 import Menu from './menu';
 
 import Swiper from 'swiper';
@@ -59,7 +49,6 @@ let timer,
 export default {
   components: {
     Logo,
-    App,
     Menu,
   },
   props: {

Web/src/views/main/_layout/sider/menu.js

@@ -1,10 +1,11 @@
+import { HmacMD5 } from "crypto-js"
+
 export default {
     props: {
         nav: {
             default() {
                 return {
-                    modules: [],
-                    menus: [],
+                    content: []
                 }
             },
             type: Object,
@@ -75,6 +76,17 @@ export default {
             openChange: this.onMenuOpenChange,
         }
 
-        return <a-menu {...{ props, on }}>{this.renderMenu(this.nav.menus)}</a-menu>
+        return (<section>
+            {
+                this.nav.content.map(item => {
+                    return (
+                        <section>
+                            <div class="yo-sider-nav--app">{item.app.name}</div>
+                            <a-menu {...{ props, on }}>{this.renderMenu(item.menu)}</a-menu>
+                        </section>
+                    )
+                })
+            }
+        </section>)
     },
 }

Web/src/views/main/index.vue

@@ -6,11 +6,7 @@
           [`yo-layout--${$root.global.settings.layout}`]: true,
         }"
     >
-      <Sider
-        :nav="nav"
-        @change-app="onChangeApp"
-        v-if="$root.global.settings.layout === 'left-menu'"
-      />
+      <Sider :nav="nav" v-if="$root.global.settings.layout === 'left-menu'" />
       <a-layout>
         <Header :nav="nav" @reload="onReloadContentWindow" @setting="setting.visible = true" />
         <a-layout>
@@ -40,7 +36,6 @@ import Content from './_layout/content';
 import Setting from './setting';
 
 import { setGlobal } from '@/common/login';
-import { ACTIVE_APP_KEY } from '@/common/storage';
 
 import { EMPTY_ID } from '@/util/global';
 
@@ -65,8 +60,7 @@ export default {
       },
       nav: {
         loading: false,
-        apps: [],
-        menus: [],
+        content: [],
       },
     };
   },
@@ -77,15 +71,14 @@ export default {
 
     this.nav.loading = true;
 
-    this.$api.getLoginUser().then(({ data }) => {
+    this.$api.getLoginUser().then(async ({ data }) => {
       // 去除应用和菜单信息,存储基本信息
       const info = this.$_.cloneDeep(data);
       delete info.apps;
       delete info.menus;
       setGlobal(info);
 
-      data.apps.map((p) => (p.active = p.active));
-      this.onSetNav(data);
+      this.nav.content = await this.onSetNav(data);
       this.nav.loading = false;
 
       this.$root.global.defaultWindow.map((options) => {
@@ -206,37 +199,22 @@ export default {
       this.$refs.content.onLoadContentWindow(key);
     },
 
-    onChangeApp(app) {
-      this.nav.loading = true;
-      this.$api.sysMenuChange({ application: app.code }).then(({ data }) => {
-        this.nav.apps.map((p) => (p.active = p.code === app.code));
-        window.localStorage.removeItem(ACTIVE_APP_KEY);
-        this.onSetNav({
-          apps: this.nav.apps,
-          menus: data,
-        });
-
-        this.nav.loading = false;
-      });
-    },
-
     onSetNav(nav) {
-      // 从本地存储获取当前选中的应用及菜单
-      this.nav.apps = nav.apps;
-      const code = window.localStorage.getItem(ACTIVE_APP_KEY);
-      if (code) {
-        this.nav.apps.map((p) => (p.active = p.code === code.code));
-        this.onChangeApp({
-          code,
+      const getNav = [];
+      nav.apps.forEach((app) => {
+        getNav.push({
+          app,
+        });
+      });
+
+      return this.$api
+        .$queue(getNav.map((p) => this.$api.sysMenuChangeAwait({ application: p.app.code })))
+        .then((menus) => {
+          menus.forEach((menu, i) => {
+            getNav[i].menu = this.serializeMenu(menu.data);
+          });
+          return getNav;
         });
-      } else {
-        // 将默认选中菜单存储
-        const app = nav.apps.find((p) => p.active);
-        if (app) {
-          window.localStorage.setItem(ACTIVE_APP_KEY, app.code);
-          this.serializeMenu(nav.menus);
-        }
-      }
     },
 
     serializeMenu(menus) {
@@ -252,7 +230,7 @@ export default {
         return m;
       };
 
-      this.nav.menus = children[EMPTY_ID] ? serialize(children[EMPTY_ID]) : new Array();
+      return children[EMPTY_ID] ? serialize(children[EMPTY_ID]) : new Array();
     },
   },
 };