daimp-front/sub-operation-service/src/views/brand/index.vue

<template>
  <div class="brand-layout">
    <el-container class="brand-layout-container">
      <el-aside class="brand-aside-menu">
        <!-- 菜单部分 -->
        <el-menu v-model:open="openMenus" :default-active="activeMenu" class="brand-aside-menu" @select="handleSelect">
          <el-menu-item index="apply">
            <img :src="getAssetsFile('images/brand/Apply.png')" class="menu-icon" alt="申请图标" />
            <span>使用申请</span>
          </el-menu-item>

          <el-sub-menu index="auth">
            <template #title>
              <img :src="getAssetsFile('images/brand/autho.png')" class="menu-icon" />
              <span>授权管理</span>
            </template>
            <el-menu-item index="auth/record"> 授权记录 </el-menu-item>
            <el-menu-item index="auth/system"> 品牌制度 </el-menu-item>
          </el-sub-menu>

          <el-menu-item index="monitor">
            <img :src="getAssetsFile('images/brand/supervision.png')" class="menu-icon" alt="" />
            <span>使用监管</span>
          </el-menu-item>
        </el-menu>
      </el-aside>

      <el-main class="brand-main">
        <router-view />
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { getAssetsFile } from '@/utils/index.js';

const router = useRouter();
const route = useRoute();

const openMenus = ref(['auth']);

const menuMap = {
  apply: ['brandApplyList'],
  'auth/record': ['brandAuth'],
  'auth/system': ['brandSystem'],
  monitor: ['brandMonitor'],
};

// 获取当前菜单激活项
const activeMenu = computed(() => {
  const matched = Object.entries(menuMap).find(([key, names]) => names.includes(route.name));
  // console.log(matched[0]);
  return matched ? matched[0] : '';
});
// 菜单切换处理
function handleSelect(index) {
  router.push(`/sub-operation-service/brand/${index}`);
}
</script>

<style lang="scss" scoped>
.brand-layout {
  width: 100%;
  height: calc(100vh - 230px);

  .brand-layout-container {
    height: 100%;
    width: $width-main;
    margin: auto;
    .brand-aside-menu {
      background-color: #fff;
      border-radius: 16px;
      border-right: 0;
      :deep(.el-menu-item),
      :deep(.el-sub-menu__title) {
        font-size: 18px !important;
        margin: 8px 12px;
        span {
          margin-left: 8px;
        }
        .menu-icon {
          width: 24px;
          height: 24px;
        }
      }

      :deep(.el-sub-menu) {
        .el-menu-item {
          font-size: 16px !important;
          margin: 4px 12px;
          line-height: 40px;
          span {
            margin-left: 12px;
          }
        }
      }

      :deep(.is-active) {
        > .el-sub-menu__title,
        &.el-menu-item {
          color: #409eff !important;
          background-color: #f5f7fa;
        }
      }
    }
    .brand-main {
      width: calc(100% - 240px - 16px);
      margin-left: 16px;
      // background-color: #f0f0f0;
      padding: 0;
    }
    .brand-main::-webkit-scrollbar {
      display: none;
    }
  }
}
</style>