代码提交

src/config/website.js

@@ -31,7 +31,7 @@ export default {
     screenshot: true,
     fullscreen: false,
     theme: true,
-    menu: false,
+    menu: true,
     styleRadio:'1',//风格样式
   },
   //首页配置

src/page/index/index.vue

@@ -4,7 +4,7 @@
       <div class="avue-layout" :class="{ 'avue-layout--horizontal': isHorizontal }">
         <div class="avue-sidebar" v-show="validSidebar">
           <!-- 左侧导航栏 -->
-          <logo v-if="setting.styleRadio == '1'" />
+          <logo v-if="setting.styleRadio == '1'||setting.styleRadio == '3'" />
           <sidebar />
         </div>
         <div class="avue-main">
@@ -54,6 +54,7 @@ export default {
   provide() {
     return {
       index: this,
+      leftMenu:[]
     };
   },
   computed: {
@@ -65,6 +66,8 @@ export default {
       'isSearch',
       'menu',
       'setting',
+      'leftMenu',
+      'selectIndex','selectedIndex'
     ]),
     validSidebar() {
       return !(
@@ -77,9 +80,52 @@ export default {
   },
   props: [],
   methods: {
+    //打开菜单  风格2
+    openMenu2(item = {}) {
+      if(!item.id){
+        this.$store.dispatch('GetMenu', item.id).then(data => {
+          if (data.length !== 0) {
+            this.$router.$avueRouter.formatRoutes(data, true);
+          }
+          //当点击顶部菜单后默认打开第一个菜单
+          /*if (!this.validatenull(item)) {
+            let itemActive = {},
+              childItemActive = 0;
+            if (item.path) {
+              itemActive = item;
+            } else {
+              if (this.menu[childItemActive].length === 0) {
+                itemActive = this.menu[childItemActive];
+              } else {
+                itemActive = this.menu[childItemActive].children[childItemActive];
+              }
+            }
+            this.$store.commit('SET_MENU_ID', item);
+            this.$router.push({
+              path: this.$router.$avueRouter.getPath({
+                name: (itemActive.label || itemActive.name),
+                src: itemActive.path
+              }, itemActive.meta)
+            });
+          }*/
+        });
+      }else{
+        if (item.children.length !== 0) {
+          this.$store.commit('SET_LEFT_MENU', item.children);
+          let tmpIndex = item.children.findIndex(item1 => item1.id == this.selectedIndex)
+          let index = tmpIndex == -1 ? 0 : tmpIndex
+          this.$store.commit('SET_SELECT_INDEX', index);
+          // setStore({ name: 'left_menu', content: item.children });
+          // this.$router.$avueRouter.formatRoutes(item.children, true);
+        }
+      }
+      
+    },
     //打开菜单
     openMenu(item = {}) {
       this.$store.dispatch('GetMenu', item.id).then(data => {
+        console.log('data=================',data)
+        console.log('item.id--------------------',item.id)
         if (data.length !== 0) {
           this.$router.$avueRouter.formatRoutes(data, true);
         }

src/page/index/sidebar/index.vue

@@ -1,30 +1,69 @@
 <template>
-  <el-scrollbar class="avue-menu">
+  <el-menu unique-opened :default-active="activeMenu" :mode="setting.sidebar" :collapse="isCollapse"
-    <div v-if="menu && menu.length == 0 && !isHorizontal" class="avue-sidebar--tip">
+    v-if="setting.styleRadio == '1'">
-      {{ $t('menuTip') }}
+    <sidebar-item :menu="menu"></sidebar-item>
+  </el-menu>
+  <left-menu :menulist="menu" v-if="setting.styleRadio == '2'"></left-menu>
+  <div style="display: flex;" v-if="setting.styleRadio == '3'">
+    <div :class="leftMenu.find(item => item.children) ? 'children' : 'no_child'">
+      <div class="left_menu" @click="clickItem(item, index)" v-for="(item, index) in leftMenu" :key="item.id"
+        :class="index == selectIndex ? 'active' : ''">
+        <div class="left_menu_item">
+          <i :class="item.source" style="margin-bottom: 5px;"></i>
+          {{ item.name }}
+        </div>
+      </div>
     </div>
-
+    <div style="flex: 1;">
-    <el-menu unique-opened :default-active="activeMenu" :mode="setting.sidebar" :collapse="getScreen(isCollapse)"
+      <div
-      v-if="setting.styleRadio == '1'">
+        v-if="leftMenu && leftMenu.length != 0 && leftMenu[selectIndex].children && leftMenu[selectIndex].children.length != 0">
-      <sidebar-item :menu="menu"></sidebar-item>
+        <div class="left_top">{{ leftMenu[selectIndex].name }} </div>
-    </el-menu>
+        <div class="right_menu" v-for="item in leftMenu[selectIndex].children" :key="item.id">
-    <leftMenu :menulist="menu" v-if="setting.styleRadio == '2'"></leftMenu>
+          <div class="right_menu_item">
-  </el-scrollbar>
+            <el-popover placement="right-start" :show-arrow="false" :offset="0" :hide-after='0'
+              popper-class="log-popover"
+              popper-style="visibility: visible;width:auto;border:none;  transform-origin: left center; z-index: 2051;padding:0;offset:0 !important;">
+              <template #reference>
+                <div class="right_menu_item_box" @click='clickPage(item)'>
+                  <div>{{ item.name }}</div>
+                  <el-icon>
+                    <ArrowRight />
+                  </el-icon>
+                </div>
+              </template>
+              <template #default v-if="item.children && item.children.length != 0">
+                <div class="third_box" v-if="item.children && item.children.length != 0">
+                  <div class="third_box_item" v-for="third in item.children" :key="third.id">
+                    {{ third.name }}
+                  </div>
+                </div>
+              </template>
+            </el-popover>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
 import { mapGetters } from 'vuex';
 import sidebarItem from './sidebarItem.vue';
+import { setStore, getStore } from '@/utils/store';
 import leftMenu from './leftMenu.vue';
+
 export default {
   name: 'sidebar',
   components: { sidebarItem, leftMenu },
-  inject: ['index'],
+  data() {
-  created() {
+    return {
-    this.index.openMenu();
+      isCollapse: false,
+      // selectIndex:0
+    }
   },
+  inject: ['index'],
   computed: {
-    ...mapGetters(['isHorizontal', 'setting', 'menu', 'tag', 'isCollapse', 'menuId']),
+    ...mapGetters(['isHorizontal', 'setting', 'menu', 'tag', 'isCollapse', 'menuId', 'leftMenu', 'activeIndex', 'selectedIndex', 'selectIndex']),
     activeMenu() {
       const route = this.$route;
       const { meta, path } = route;
@@ -34,10 +73,168 @@ export default {
       return path;
     },
   },
+  mounted() {
+    if(setting.styleRadio=='3'){
+      this.index.openMenu2();
+    }else{
+      this.index.openMenu();
+    }
+    
+    console.log(8888,leftMenu)
+  },
+  methods: {
+    clickItem(item, index) {
+      if (!item.children) {
+        this.$router.push({
+          path: item.path,
+          query: item.query,
+        });
+      }
+      this.$store.commit('SET_SELECTED_INDEX', item.id + '');
+      this.$store.commit('SET_SELECT_INDEX', index);
+      // this.selectIndex = index
+    },
+    clickPage(item) {
+      if (!item.children) {
+        this.$router.push({
+          path: item.path,
+          query: item.query,
+        });
+      }
+    }
+  },
+
 };
 </script>
 <style lang="scss" scoped>
-:deep(.el-scrollbar__view) {
+.no_child {
-  height: 100%;
+  width: 185px;
+}
+
+.children {
+  width: 60px;
+}
+
+.left_menu {
+  width: 100%;
+  background: #f7fafc;
+  color: #41a5ff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &.active {
+    background: #41a5ff;
+    color: #fff;
+  }
+
+  .left_menu_item {
+    cursor: pointer;
+    padding: 10px 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    font-size: 12px;
+    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
+    font-weight: 500;
+    color: var(--header-bkColor-hover);
+    text-align: center;
+    width: 60px;
+    word-break: keep-all;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    &:hover {
+      background: #0066ff;
+      color: #fff;
+    }
+  }
+}
+
+.left_top {
+  font-size: 14px;
+  font-family: Microsoft YaHei-Bold, Microsoft YaHei;
+  font-weight: 700;
+  text-align: center;
+  height: 48px;
+  display: flex;
+  color: #5a6f82;
+  align-items: center;
+  justify-content: center;
+}
+
+.right_menu {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+
+
+
+  .right_menu_item {
+    width: 100%;
+    height: 46px;
+    // color: var(--header-fontColor);
+    // font-size: 14px;
+    // line-height: 46px;
+    // cursor: pointer;
+    // padding: 0 10px;
+    // box-sizing: border-box;
+    // overflow: hidden;
+    // display: flex;
+    // justify-content: space-between;
+    // align-items: center;
+    // position: relative;
+
+    .right_menu_item_box {
+      font-size: 14px;
+      line-height: 46px;
+      cursor: pointer;
+      padding: 0 10px;
+      box-sizing: border-box;
+      overflow: hidden;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      &:hover {
+        background: #0066ff;
+        color: #fff;
+      }
+    }
+
+
+  }
+
+}
+</style>
+<style lang="scss">
+.third_box {
+  display: flex;
+  flex-direction: column;
+  // flex-wrap: wrap;
+  overflow-y: auto;
+  max-width: calc(100vw - 500px) !important;
+  max-height: calc(100vh - 200px);
+
+  .third_box_item {
+    min-width: 140px;
+    color: #5a6f82;
+    text-align: left;
+    font-size: 14px;
+    line-height: 46px;
+    /* background: var(--header-bkColor); */
+    padding-left: 15px;
+    padding-right: 15px;
+    position: relative;
+    font-weight: bolder;
+    word-break: keep-all;
+    white-space: nowrap;
+    box-sizing: border-box;
+  }
+}
+
+.log-popover {
+  border: none;
 }
 </style>

src/page/index/top/index.vue

@@ -10,28 +10,28 @@
       </div>
     </div>
     <div class="top-bar__title">
-      <top-menu ref="topMenu" v-if="setting.menu"></top-menu>
+      <top-menu ref="topMenu" v-if="setting.menu&&setting.styleRadio=='3'"></top-menu>
       <top-search class="top-bar__item" v-if="setting.search"></top-search>
     </div>
     <div class="top-bar__right">
-      <div v-if="setting.color" class="top-bar__item">
+      <!-- <div v-if="setting.color" class="top-bar__item">
         <top-color></top-color>
-      </div>
+      </div> -->
       <div v-if="setting.theme" class="top-bar__item">
         <top-theme></top-theme>
       </div>
-      <div v-if="setting.lock" class="top-bar__item">
+      <!-- <div v-if="setting.lock" class="top-bar__item">
         <top-lock></top-lock>
-      </div>
+      </div> -->
-      <div class="top-bar__item">
+      <!-- <div class="top-bar__item">
         <top-lang></top-lang>
-      </div>
+      </div> -->
-      <div class="top-bar__item" v-if="setting.fullscreen">
+      <!-- <div class="top-bar__item" v-if="setting.fullscreen">
         <top-full></top-full>
-      </div>
+      </div> -->
-      <div class="top-bar__item" v-if="setting.debug">
+      <!-- <div class="top-bar__item" v-if="setting.debug">
         <top-logs></top-logs>
-      </div>
+      </div> -->
       <div class="top-user">
         <img class="top-bar__img" :src="userInfo.avatar" />
         <el-dropdown :hide-on-click="false">

src/page/index/top/top-menu.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-menu class="top-menu" :default-active="activeIndex" mode="horizontal" text-color="#333">
+  <!-- <el-menu class="top-menu" :default-active="activeIndex" mode="horizontal" text-color="#333">
     <el-menu-item index="0" @click="openHome(itemHome)">
       <template #title>
         <i :class="itemHome.source" style="padding-right: 5px"></i>
@@ -15,7 +15,52 @@
         </template>
       </el-menu-item>
     </template>
-  </el-menu>
+  </el-menu> -->
+  <div class="top_menu_box" v-if="setting.styleRadio=='3'">
+    <div   v-for="(item, index) in items" :key="index" :class="activeIndex == item.id ? 'active' : ''" @click="openMenu(item)">
+      <div class="top_menu_box_item" v-if="index <= 7">
+        <i :class="item.source" style="padding-right: 5px"></i>
+        <span>{{ item.name }}</span>
+      </div>
+    </div>
+    <div v-show="items.length > 9" >
+      <el-popover
+        placement="bottom-start"
+        :show-arrow="false"
+        :offset="0"
+        :hide-after='0'
+        popper-class="log-popover"
+        popper-style="visibility: visible;width:auto;border:none; transform-origin: left center; z-index: 2051;padding:0;offset:0 !important;"
+       >
+        <template #reference>
+          <div style="height:100%;display: flex;align-items: center;">
+             <el-icon class="el-icon--right" style="width: 16px;height: 16px;" color="#fff">
+              <arrow-down />
+            </el-icon>
+          </div>
+         
+
+         <!-- <div class="right_menu_item_box" @click='clickPage(item)'>
+           <div>{{ item.name }}</div>
+           <el-icon><ArrowRight /></el-icon>
+         </div> -->
+        </template>
+        <template #default >
+          <div v-if="items.length > 9">
+            <div v-for="item in items.filter((item,index) => index > 9)" style="padding: 10px;cursor: pointer; " @click="openMenu(item)">
+              <div>{{ item.name }}</div>
+            </div>
+          </div>
+         <!-- <div class="third_box" v-if="item.children && item.children.length != 0">
+          <div class="third_box_item" v-for="third in item.children" :key="third.id">
+           {{ third.name }}
+          </div>
+         </div> -->
+        </template>
+       </el-popover>
+      
+    </div>
+  </div>
 </template>
 
 <script>
@@ -29,30 +74,80 @@ export default {
         name: '首页',
         source: 'iconfont iconicon_work',
       },
-      activeIndex: '0',
+      // activeIndex: '0',
       items: [],
+      timer:null
     };
   },
   inject: ['index'],
   created() {
     this.getMenu();
+    this.interval()
   },
   computed: {
-    ...mapGetters(['tagCurrent', 'menu', 'tagWel']),
+    ...mapGetters(['tagCurrent', 'menu', 'tagWel','activeIndex','selectIndex','selectedIndex','leftMenu','setting']),
   },
   methods: {
     openMenu(item) {
-      this.index.openMenu(item);
+      console.log('item------------------------',item)
+      this.index.openMenu2(item);
+      this.$store.commit('SET_ACTIVE_INDEX', item.id + '');
     },
     openHome(itemHome) {
       this.index.openMenu(itemHome);
       this.$router.push(this.tagWel);
     },
+    interval(){
+      console.log('1111111111111111111111111111111111111')
+       this.timer = setInterval(() =>{
+        this.getMenu()
+      },1000)
+    },
     getMenu() {
-      this.$store.dispatch('GetTopMenu').then(res => {
+      this.items = this.menu
-        this.items = res;
+      console.log('menu-------------------------------------',this.menu)
-      });
+      console.log('items-------------------------------------',this.items)
+      if(this.menu.length != 0){
+        clearInterval(this.timer)
+      }
+      if(this.activeIndex){
+        let tmp = this.menu.find(item => item.id == this.activeIndex)
+        this.openMenu(tmp)
+      }else{
+        if(this.menu.length != 0){
+          this.openMenu(this.menu[0])
+        }
+      }
+      // this.$store.dispatch('GetTopMenu').then(res => {
+      //   this.items = res;
+      //   console.log('items------------------',this.items)
+      //   if(this.items.length != 0){
+      //     this.activeIndex = this.items[0].id + ''
+      //     this.openMenu(this.items[0])
+      //   }
+      // });
     },
   },
 };
 </script>
+<style lang="scss" scoped>
+.top_menu_box{
+  display: flex;
+
+  .top_menu_box_item{
+    font-weight: 400;
+    font-size: 14px;
+    color: #fff;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    padding: 0 24px 0 12px;
+    cursor: pointer;
+
+    &.active{
+      background: #dceeff;
+      color: #06f;
+    }
+  }
+}
+</style>

src/store/getters.js

@@ -29,6 +29,10 @@ const getters = {
   menuId: state => state.user.menuId,
   menu: state => state.user.menu,
   menuAll: state => state.user.menuAll,
+  leftMenu: state => state.user.leftMenu,
+  activeIndex:state => state.user.activeIndex,
+  selectIndex:state => state.user.selectIndex,
+  selectedIndex:state => state.user.selectedIndex,
   logsList: state => state.logs.logsList,
   logsLen: state => state.logs.logsList.length || 0,
   logsFlag: (state, getters) => getters.logsLen === 0,

src/store/modules/common.js

@@ -11,7 +11,7 @@ const common = {
     isRefresh: true,
     isLock: getStore({ name: 'isLock' }),
     colorName: getStore({ name: 'colorName' }) || '#2C77F1',
-    themeName: getStore({ name: 'themeName' }) || 'theme-go',
+    themeName: getStore({ name: 'themeName' }) || 'theme-white',
     lockPasswd: getStore({ name: 'lockPasswd' }) || '',
     website: website,
     setting: website.setting,

src/store/modules/user.js

@@ -35,7 +35,12 @@ const user = {
     menuAll: getStore({ name: 'menuAll' }) || [],
     token: getStore({ name: 'token' }) || '',
     refreshToken: getStore({ name: 'refreshToken' }) || '',
+    leftMenu:getStore({name:'leftMenu'}) || [],
+    activeIndex:getStore({name:'activeIndex'}) || '',
+    selectedIndex:getStore({name:'selectedIndex'}) || '',
+    selectIndex:getStore({name:'selectIndex'}) || 0,
   }, 
+  
   actions: {
     //根据用户名登录
     LoginByUsername({ commit }, userInfo = {}) {
@@ -226,6 +231,8 @@ const user = {
           .then(() => {
             commit('SET_TOKEN', '');
             commit('SET_MENU_ALL_NULL', []);
+            commit('SET_LEFT_MENU', []);
+            commit('SET_ACTIVE_INDEX', '');
             commit('SET_MENU', []);
             commit('SET_ROLES', []);
             commit('DEL_ALL_TAG', []);
@@ -245,6 +252,8 @@ const user = {
       return new Promise(resolve => {
         commit('SET_TOKEN', '');
         commit('SET_MENU_ALL_NULL', []);
+        commit('SET_LEFT_MENU', []);
+        commit('SET_ACTIVE_INDEX', '');
         commit('SET_MENU', []);
         commit('SET_ROLES', []);
         commit('DEL_ALL_TAG', []);
@@ -269,6 +278,7 @@ const user = {
           const data = res.data.data;
           let menu = deepClone(data);
           menu.forEach(ele => formatPath(ele, true));
+          console.log('setMenu--------------------------------',menu)
           commit('SET_MENU', menu);
           commit('SET_MENU_ALL', menu);
           dispatch('GetButtons');
@@ -358,6 +368,22 @@ const user = {
       state.menu = menu;
       setStore({ name: 'menu', content: state.menu });
     },
+    SET_LEFT_MENU:(state,leftMenu) =>{
+      state.leftMenu = leftMenu
+      setStore({name:'leftMenu',leftMenu})
+    },
+    SET_ACTIVE_INDEX:(state,activeIndex) =>{
+      state.activeIndex = activeIndex
+      setStore({name:'activeIndex',content:activeIndex})
+    },
+    SET_SELECT_INDEX:(state,selectIndex) =>{
+      state.selectIndex = selectIndex
+      setStore({name:'selectIndex',content:selectIndex})
+    },
+    SET_SELECTED_INDEX:(state,selectedIndex) =>{
+      state.selectedIndex = selectedIndex
+      setStore({name:'selectedIndex',content:selectedIndex})
+    },
     SET_ROLES: (state, roles) => {
       state.roles = roles;
     },

src/styles/top.scss

@@ -47,7 +47,7 @@
 .top-search {
   line-height: variables.$top_height;
   position: absolute !important;
-  right: 200px;
+  right: 160px;
   top: 0;
   width: 300px;