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:default-active="activeMenu" class="aside-menu" @select="handleMenuSelect">
          <el-menu-item index="1">
            <el-icon><Document /></el-icon>
            <span>使用申请</span>
          </el-menu-item>

          <el-menu-item index="2">
            <el-icon><Lock /></el-icon>
            <span>授权管理</span>
          </el-menu-item>

          <el-menu-item index="3">
            <el-icon><Monitor /></el-icon>
            <span>使用监管</span>
          </el-menu-item>
        </el-menu>
      </el-aside>

      <el-main class="brand-main">
        <component :is="currentComponent" />
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import { Document, Lock, Monitor } from '@element-plus/icons-vue';
import { ref, shallowRef } from 'vue';
import ApplyManagement from './components/ApplyManagement.vue';
import AuthManagement from './components/AuthManagement.vue';
import UsageMonitor from './components/UsageMonitor.vue';
// 响应式状态
const activeMenu = ref('1');
const currentComponent = shallowRef(ApplyManagement);

// 菜单切换处理
const handleMenuSelect = (index) => {
  const components = {
    1: ApplyManagement,
    2: AuthManagement,
    3: UsageMonitor,
  };
  currentComponent.value = components[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 {
      width: 240px;
      background-color: $color-fff;
      border-radius: 8px;
      .aside-menu {
        border-right: none;
        .el-menu-item {
          height: 48px;
          line-height: 48px;
          margin: 4px 8px;
          border-radius: 4px;
          &:hover {
            background-color: #f5f7fa;
          }
          .el-icon {
            color: #666;
            margin-right: 12px;
            font-size: 18px;
            vertical-align: middle;
          }
          span {
            vertical-align: middle;
          }
        }
      }
    }
    .brand-main {
      width: calc(100% - 240px - 16px);
      margin-left: 16px;
      // background-color: #f0f0f0;
      padding: 0;
    }
    .brand-main::-webkit-scrollbar {
      display: none;
    }
  }
}
</style>