eta_mini_crm_front/src/layout/components/LeftWrap.vue

<script setup>
import { useRouter } from 'vue-router'
import { useLayoutState } from '../hooks/index'
import {apiSystemRole} from '@/api/system'

const router = useRouter()

const { menuClose } = useLayoutState()

const navList = ref([])

function getNavList(){
    //mock navList
    /* navList.value = [
        {
            Path:'/customer',
            Name:'客户管理',
            Children:[
                {
                    Path:'/customer/tempUserList',
                    Name:'临时用户列表',
                }
            ]
        },
        {
            Path:'/authorMgt/authorList',
            Name:'研究员管理',
            Children:[]
        },
        {
            Path:'/mediaMgt',
            Name:'音视频管理',
            Children:[
                {
                    Path:'/mediaMgt/audioList',
                    Name:'音频管理',
                },
                {
                    Path:'/mediaMgt/videoList',
                    Name:'视频管理',
                }
            ]
        },
        {
            Path:'/customer/notification',
            Name:'消息推送管理',
            Children:[]
        },
        {
            Path:'/mediaMgt/pictureLib',
            Name:'图片资源库',
            Children:[]
        },
        {
            Path:'/customer/feedbackList',
            Name:'客户反馈',
            Children:[]
        },
        {
            Path:'/system',
            Name:'系统设置',
            Children:[
                {
                    Path:'/system/userList',
                    Name:'用户列表',
                },
                {
                    Path:'/system/roleList',
                    Name:'角色管理',
                },
                {
                    Path:'/system/authSet',
                    Name:'权限管理',
                }
            ]
        },
    ] */
    
  apiSystemRole.menuData().then(res=>{
    if(res.Ret===200){
      navList.value=res.Data||[]
    }
  })
}
getNavList()

function resetpwd() {
  router.push('/system/resetPwd')
}

function logout() {
  ElMessageBox.confirm(
    '确认退出吗?',
    '提示',
    { type: 'warning', }
  ).then(() => {
    localStorage.removeItem('token')
    localStorage.removeItem('userName')
    router.replace('/login')
  }).catch()
}

function getMenuIcon(item){
    const iconMap = {
        '/customer':'menu/custom',
        '/authorMgt/authorList':'menu/author',
        '/mediaMgt':'menu/media',
        '/customer/notification':'menu/message',
        '/mediaMgt/pictureLib':'menu/piclib',
        '/customer/feedbackList':'menu/feedback',
        '/system':'menu/setting'
    }
    return iconMap[item]||'menu/setting'

}

</script>

<template>
  <div :class="['left-wrap', menuClose ? 'left-wrap__close' : '']">
    <el-menu
      class="menu-wrap"
      mode="vertical"
      router
      :default-active="$route.path"
      :collapse="menuClose"
    >
      <template v-for="level1 in navList" :key="level1.SysMenuId">
        <el-menu-item
          :index="level1.Path"
          v-if="level1.Children.length===0"
        >
          <svg-icon 
            :name="getMenuIcon(level1.Path)" :color="$route.path===level1.Path?'#086CE0':'#333'" style="font-size:16px;"></svg-icon>
          <span style="margin-left: 5px;">{{ level1.Name }}</span>
        </el-menu-item>
        <el-sub-menu
          :index="level1.Path"
          v-if="level1.Children.length>0"
        >
          <template #title>
            <svg-icon :name="getMenuIcon(level1.Path)" :color="$route.path===level1.Path?'#086CE0':'#333'" style="font-size:16px"></svg-icon>
            <span style="margin-left: 5px;">{{ level1.Name }}</span>
          </template>
          <el-menu-item
            v-for="child in level1.Children"
            :index="child.Path"
            :key="child.Path"
          >
            <svg-icon name="menu/submenu" :color="$route.path===child.Path?'#086CE0':'#333'" style="font-size:16px;"></svg-icon>
            <span style="margin-left: 5px;">{{ child.Name }}</span>
          </el-menu-item>
        </el-sub-menu>
      </template>
    </el-menu>
    <!-- <el-popover placement="right" :width="100" trigger="click">
      <template #reference>
        <div style="text-align: center">
            123456
        </div>
      </template>
      <div>
        <div style="text-align:center;padding:10px 0;cursor: pointer;" @click="resetpwd">修改密码</div>
        <div style="text-align:center;padding:10px 0;cursor: pointer;" @click="logout">退出登录</div>
      </div>
    </el-popover> -->
  </div>
</template>

<style lang="scss" scoped>
.left-wrap {
  -ms-overflow-style: none;
  scrollbar-width: none;
  overflow: hidden auto;
  --el-menu-bg-color: #fff;
  --el-menu-hover-bg-color: rgba(255, 255, 255, 0.15);
  --el-menu-text-color: #333;
  --el-menu-active-color: #086CE0;
  --el-menu-item-font-size:16px;
  width: 180px;
  z-index: 50;
  position: fixed;
  top: 48px;
  left: 0;
  bottom: 0;
  padding: 8px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  padding-bottom: 111px;
  transition: all 0.5s;
  .menu-wrap {
    flex: 1;
    height: 100%;
    border: none;
    .el-sub-menu{
        :deep(.el-menu-item){
            padding-left: var(--el-menu-base-level-padding);
        }
        :deep(.el-sub-menu__icon-arrow){
            transform: rotateZ(-90deg) !important;
        }
        &.is-opened{
            :deep(.el-sub-menu__icon-arrow){
                transform: rotateZ(0deg) !important;
                border-radius: 4px;
            }
        }
    }
    :deep(.el-menu-item.is-active){
        background-color:#F3F9FF ;
    }
  }
  .user-box {
    background-color: var(--el-menu-hover-bg-color);
    color: #333;
    text-align: center;
    padding: 20px;
    .name-box {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 0 5px;
    }
    .opt {
      margin: 10px 0;
      cursor: pointer;
    }
  }
}
.left-wrap__close {
  width: 80px;
}
</style>