effekt-interface-frontend/src/components/Home.vue

<template>
  <div class="auto-test-main" style="height: 100%">
    <el-container style="height: 100%">
      <div class="aside" style="height: 100%">
        <el-menu
          :default-active="$route.path"
          class="el-menu-vertical-demo"
          :collapse="isCollapse"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
          :router="true">
          <el-menu-item index="/effekt">
            <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>
            </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-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="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>
          <router-view class="main-form" name="Manage"></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data() {
    return {
      isCollapse: false,
      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' })
      }
    }
  }
}
</script>

<style scoped>
.auto-test-main {
  height: 100%;
  padding: 0;
  margin: 0;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  /*min-height: 400px;*/
}

.header {
  height: 60px;
  line-height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.el-header {
  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>