增加测试平台功能，系统设置，支持多个角色，分配菜单

src/components/Home.vue

@@ -14,24 +14,58 @@
             <i class="el-icon-house"></i>
             <span slot="title">首页</span>
           </el-menu-item>
+          <el-submenu index="test-platform">
+            <template slot="title">
+              <i class="el-icon-s-operation"></i>
+              <span slot="title">测试协作工作台</span>
+            </template>
+            <el-menu-item index="/test-platform/products">产品管理</el-menu-item>
+            <el-menu-item index="/test-platform/projects">项目管理</el-menu-item>
+            <el-menu-item index="/test-platform/cases">用例管理</el-menu-item>
+            <el-menu-item index="/test-platform/plans">测试计划</el-menu-item>
+            <el-menu-item index="/test-platform/reports">测试报告</el-menu-item>
+          </el-submenu>
           <el-submenu index="create-tool">
             <template slot="title">
               <i class="el-icon-setting"></i>
-              <span slot="title">造数工具</span>
+              <span slot="title">测试工具</span>
             </template>
             <el-menu-item index="/create/data">数据库造数</el-menu-item>
             <el-menu-item index="/create/interface">接口造数</el-menu-item>
+            <el-menu-item index="/test-platform/data-factory/builders">造数工厂</el-menu-item>
+          </el-submenu>
+          <el-submenu index="system-manage">
+            <template slot="title">
+              <i class="el-icon-user-solid"></i>
+              <span slot="title">系统管理</span>
+            </template>
+            <el-menu-item index="/system/roles">角色管理</el-menu-item>
+            <el-menu-item index="/system/users">用户管理</el-menu-item>
+            <el-menu-item index="/system/menus">菜单管理</el-menu-item>
           </el-submenu>
         </el-menu>
       </div>
       <el-container>
         <el-header class="header" style="background-color: rgba(230, 226, 215, 0.9)">
-          <div class="header-icon" style="float: left;padding-left: 15px;padding-right: 15px">
-            <i v-if="isCollapse" class="el-icon-s-unfold" style="font-size: 20px" @click="setCollapse"></i>
-            <i v-else class="el-icon-s-fold" style="font-size: 20px" @click="setCollapse"></i>
+          <div class="header-left">
+            <div class="header-icon">
+              <i v-if="isCollapse" class="el-icon-s-unfold" style="font-size: 20px" @click="setCollapse"></i>
+              <i v-else class="el-icon-s-fold" style="font-size: 20px" @click="setCollapse"></i>
+            </div>
+            <div class="system-name">
+              <span>{{ systemName }}</span>
+            </div>
           </div>
-          <div class="system-name" style="float: left">
-            <span>{{ systemName }}</span>
+          <div class="header-user">
+            <el-dropdown v-if="currentUser" trigger="click" @command="handleUserCommand">
+              <span class="user-name-dropdown">
+                {{ displayName }}<i class="el-icon-arrow-down el-icon--right"></i>
+              </span>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item command="logout">退出登录</el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+            <span v-else class="login-label" @click="goLogin">登录</span>
           </div>
         </el-header>
         <el-main>
@@ -51,9 +85,77 @@ export default {
       systemName: '效能平台'
     }
   },
+  computed: {
+    currentUser() {
+      return this.$store.state.currentUser
+    },
+    userMenus() {
+      return this.$store.state.userMenus || []
+    },
+    displayMenus() {
+      if (!this.userMenus.length) {
+        return [{ name: '首页', path: '/effekt', icon: 'el-icon-house', children: [] }]
+      }
+      return this.filterMenus(this.userMenus)
+    },
+    displayName() {
+      if (!this.currentUser) {
+        return ''
+      }
+      return this.currentUser.username || this.currentUser.realName || '未命名用户'
+    }
+  },
   methods: {
     setCollapse() {
       this.isCollapse = !this.isCollapse
+    },
+    goLogin() {
+      this.$router.push({ name: 'login' })
+    },
+    menuKey(item) {
+      return String(item.menuId || item.id || item.path || item.name)
+    },
+    menuIndex(item) {
+      return String(item.path || item.code || item.menuId || item.id || item.name)
+    },
+    menuPath(item) {
+      const pathMap = {
+        '/system/role': '/system/roles',
+        '/system/user': '/system/users',
+        '/system/menu': '/system/menus'
+      }
+      return pathMap[item.path] || item.path || '/effekt'
+    },
+    menuIcon(item) {
+      const iconMap = {
+        setting: 'el-icon-setting',
+        peoples: 'el-icon-user-solid',
+        user: 'el-icon-user',
+        lock: 'el-icon-lock',
+        menu: 'el-icon-menu'
+      }
+      return iconMap[item.icon] || (item.icon && item.icon.indexOf('el-icon-') === 0 ? item.icon : 'el-icon-menu')
+    },
+    filterMenus(menus) {
+      return (menus || []).filter(item => item.visible !== 0 && item.status !== 0).map(item => {
+        const children = this.filterMenus(item.children || [])
+        return Object.assign({}, item, { children })
+      }).filter(item => {
+        if (item.children && item.children.length) {
+          return true
+        }
+        return !!item.path && !!this.menuPath(item)
+      })
+    },
+    handleUserCommand(command) {
+      if (command === 'logout') {
+        localStorage.removeItem('authUser')
+        localStorage.removeItem('accessToken')
+        localStorage.removeItem('userMenus')
+        this.$store.commit('ClearCurrentUser')
+        this.$message.success('已退出登录')
+        this.$router.push({ name: 'login' })
+      }
     }
   }
 }
@@ -73,14 +175,37 @@ export default {
 
 .header {
   height: 60px;
-  line-height: 60px
+  line-height: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
 }
 
 .el-header {
-  padding-left: 0;
+  padding: 0 20px 0 0;
 }
 
 .el-menu-vertical-demo {
   height: 100%;
 }
+
+.header-left {
+  display: flex;
+  align-items: center;
+}
+
+.header-icon {
+  padding-left: 15px;
+  padding-right: 15px;
+}
+
+.header-user {
+  color: #333;
+  font-size: 14px;
+}
+
+.login-label {
+  color: #409EFF;
+  cursor: pointer;
+}
 </style>