添加：分类管理

src/layout/components/Navbar.vue

@@ -5,6 +5,26 @@
     <breadcrumb class="breadcrumb-container" />
 
     <div class="right-content">
+
+      <div>
+        <el-menu class="el-menu-demo" mode="horizontal">
+          <el-menu-item index="1" href="/setting/manager-categories">
+            <router-link to="/setting/manager-cloud">
+              网盘管理
+            </router-link>
+          </el-menu-item>
+          <el-submenu index="2">
+            <template slot="title">管理</template>
+            <el-menu-item index="2-1"><i class="el-icon-menu"></i>
+              <router-link to="/setting/manager-categories">
+                分类管理
+              </router-link>
+            </el-menu-item>
+            <el-menu-item index="2-2">标签管理</el-menu-item>
+          </el-submenu>
+        </el-menu>
+      </div>
+
       <div class="right-username">{{username}}</div>
       <div class="right-menu">
         <el-dropdown class="avatar-container" trigger="click">
@@ -14,9 +34,9 @@
             <i class="el-icon-caret-bottom" />
           </div>
           <el-dropdown-menu slot="dropdown" class="user-dropdown">
-            <router-link to="/setting">
+            <router-link to="/setting/user">
               <el-dropdown-item>
-                <i class="el-icon-setting" />设置
+                <i class="el-icon-setting" />个人信息
               </el-dropdown-item>
             </router-link>
             <!--<router-link to="/">-->
@@ -47,6 +67,7 @@ import Hamburger from '@/components/Hamburger'
 export default {
   data() {
     return {
+      activeIndex: '1',
       imageUrl: process.env.VUE_APP_BASE_API + '/view/thumbnail?jmal-token=' + this.$store.state.user.token + '&id=',
       username: this.$store.state.user.name,
     }
@@ -62,6 +83,9 @@ export default {
     ])
   },
   methods: {
+    handleSelect(key, keyPath) {
+      console.log(key, keyPath);
+    },
     toggleSideBar() {
       this.$store.dispatch('app/toggleSideBar')
     },
@@ -165,4 +189,15 @@ export default {
     }
   }
 }
+/deep/ .el-menu--horizontal {
+
+  .el-menu-item {
+    height: 50px;
+    line-height: 50px;
+  }
+  .el-submenu .el-submenu__title {
+    height: 50px;
+    line-height: 50px;
+  }
+}
 </style>

src/router/index.js

@@ -153,13 +153,13 @@ export const constantRoutes = [
   },
 
   {
-    path: '/setting',
+    path: '/setting/user',
     component: Layout,
     children: [
       {
         path: '',
-        name: 'setting',
-        component: () => import('@/views/setting/index'),
+        name: 'setting-user',
+        component: () => import('@/views/setting/user/index'),
         meta: { title: '设置' },
         hidden: true
       }
@@ -213,6 +213,32 @@ export const constantRoutes = [
       }
     ]
   },
+  {
+    path: '/setting/manager-categories',
+    component: Layout,
+    hidden: true,
+    children: [
+      {
+        path: '',
+        name: 'manager-categories',
+        component: () => import('@/views/setting/articles/categoryManager'),
+        meta: { title: '分类管理', icon: 'md-list' }
+      }
+    ]
+  },
+  {
+    path: '/setting/manager-cloud',
+    component: Layout,
+    hidden: true,
+    children: [
+      {
+        path: '',
+        name: 'manager-cloud',
+        component: () => import('@/views/setting/cloudManager'),
+        meta: { title: '网盘管理', icon: 'md-list' }
+      }
+    ]
+  },
   {
     path: '/articles',
     component: Layout,

src/styles/setting.scss

@@ -1,3 +1,12 @@
+
+.container {
+  padding: 20px;
+}
+/deep/.box-card {
+  max-width: 1080px;
+  min-width: 640px;
+}
+
 .img-dialog {
 
 }

src/views/setting/articles/categoryManager.vue

@@ -99,7 +99,7 @@
     },
     data() {
       return {
-        title: "用户管理",
+        title: "分类管理",
         categoryList: [],
         dialogVisible: false,
         dialogTitle: '',
@@ -253,12 +253,9 @@
 
 <!--<style src="@styles/cropper.css"></style>-->
 <style lang="scss" scoped>
-  @import "src/styles/setting";
+@import "src/styles/setting";
   .card-button {
     float: right;
     padding: 3px 0;
   }
-  .box-card {
-    max-width: 800px;
-  }
 </style>

src/views/setting/user/index.vue

@@ -15,19 +15,15 @@
         <div v-if="item.name === 'cusomerManager'">
           <cusomer-manager></cusomer-manager>
         </div>
-        <span v-if="item.name === 'categoryManager'" slot="label"><i class="el-icon-menu"></i>{{item.label}}</span>
-        <div v-if="item.name === 'categoryManager'">
-          <category-manager></category-manager>
-        </div>
       </el-tab-pane>
     </el-tabs>
   </div>
 </template>
 
 <script>
-  import cusomerInfo from '@/views/setting/tabs/cusomerInfo'
-  import cusomerManager from '@/views/setting/tabs/cusomerManager'
-  import categoryManager from '@/views/setting/tabs/categoryManager'
+  import cusomerInfo from '@/views/setting/user/tabs/cusomerInfo'
+  import cusomerManager from '@/views/setting/user/tabs/cusomerManager'
+  import categoryManager from '@/views/setting/articles/categoryManager'
 
   export default {
     components: {
@@ -40,8 +36,7 @@
           {name: 'cusomerInfo', label:'个人信息'},
         ],
         adminTabs: [
-          {name: 'cusomerManager', label:'用户管理'},
-          {name: 'categoryManager', label:'分类管理'}
+          {name: 'cusomerManager', label:'用户管理'}
         ],
         tabsDefault: 'cusomerInfo',
         userInfo:{}