eep_page/src/views/project_manage/common/ProjectMenu.vue

<template>
  <div class="menu">
    <ul class="menu-list">
      <li
        v-for="{ key, name } in subMenuList"
        :key="key"
        :class="['menu-item', { active: activeKey === key }]"
        @click="changeSubMenu(key)"
      >
        {{ name }}
      </li>
    </ul>
  </div>
</template>

<script>
import { getToken } from '@/utils/auth';

export default {
  name: 'ProjectMenu',
  props: {
    curKey: {
      type: String,
      default: 'project',
    },
  },
  data() {
    const token = getToken();

    const userType = (token?.user_type ?? 'USER').toUpperCase();
    const subMenuMap = {
      USER: [
        { key: 'project', name: '项目' },
        { key: 'book', name: '已上架教材' },
      ],
      ORG_MANAGER: [
        { key: 'org/project', name: '已立项' },
        { key: 'org/final', name: '已终审' },
        { key: 'org/book', name: '已上架教材' },
        { key: 'org/authorization', name: '教程第三方应用授权' },
      ],
    };

    return {
      activeKey: this.curKey,
      subMenuList: subMenuMap[userType] || [],
    };
  },
  methods: {
    /**
     * 切换子菜单
     * @param {number} key - 子菜单键
     */
    changeSubMenu(key) {
      if (key === this.activeKey) return;
      this.activeKey = key;
      this.$router.push({ path: `/project_manage/${key}` });
    },
  },
};
</script>

<style lang="scss" scoped>
.menu {
  z-index: 9;
  display: flex;
  background-color: $main-background-color;

  &-list {
    display: flex;
    justify-content: space-around;
    background-color: #f5f5f5;
    border-radius: 8px;

    .menu-item {
      padding: 10px 20px;
      cursor: pointer;
      background-color: #ebebeb;
      border: $border;
      border-radius: 4px;
      transition: background-color 0.3s ease;

      &:hover {
        background-color: #e0e0e0;
      }

      &.active {
        font-weight: bold;
        background-color: #fff;
        box-shadow: 0 2px 4px #e6e6e6;
      }
    }
  }
}
</style>