eta_forum_admin_front/src/layout/components/LeftWrap.vue

<script setup>
import { useRouter, useRoute } from 'vue-router'
import { useLayoutState } from '../hooks/index'
import {apiSystemCommon} from '@/api/system'
import { color } from 'highcharts';

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

const { menuClose } = useLayoutState()

const navList = ref([
  // {
  //   name: '客户管理',
  //   path: '/customer',
  //   IsLevel: 2,
  //   Children: [
  //     {
  //       name: '商家管理',
  //       path: '/'
  //     },
  //     {
  //       name: '用户管理',
  //       path: '/customer/userList'
  //     }
  //   ]
  // },
  // {
  //   name: 'ETA客户行为统计',
  //   path: '/customer',
  //   IsLevel: 1,
  //   Children: [
  //     {
  //       name: 'ETA客户行为统计',
  //       path: '/customer/userActionStatistic',
  //     }
  //   ]
  // },
])

function getNavList() {
  apiSystemCommon.menuList().then(res=>{
    if(res.Ret===200){
      navList.value=res.Data.List||[]
    }
  })
}
getNavList()

function handleClickMenu(path){
  router.push(path)
}



function getMenuIcon(item) {
  const iconMap = {
    '客户管理': 'menu/customer',
    'ETA客户行为统计':'menu/menu02',
    'ETA试用管理':'menu/menu03',
    'ETA社区管理':'menu/menu04',
    'ETA菜单配置':'menu/menu05',
    '培训管理':'menu/menu06',
    '个性化设置':'menu/menu07',
    '系统设置':'menu/menu08',
    '权限配置':'menu/menu09'
  }
  return iconMap[item] || 'menu/setting'

}

</script>

<template>
  <div :class="['left-wrap', menuClose ? 'left-wrap__close' : '']">
    <t-menu
      class="menu-wrap"
      :value="$route.path"
      :collapsed="menuClose"
      :width="['200px', '80px']"
    >
      <template v-for="level1 in navList" :key="level1.MenuId">
        <t-menu-item :value="level1.children[0].path" v-if="level1.IsLevel === 1" @click="handleClickMenu(level1.children[0].path)">
          <template #icon>
            <svg-icon
              :name="getMenuIcon(level1.children[0].name)"
              :color="$route.path === level1.children[0].path ? '#086CE0' : '#333'"
              style="font-size: 20px;"
            ></svg-icon>
          </template>
          <span :style="`margin-left: 5px; color: ${route.meta.pathName === level1.children[0].name ? '#0052d9' : ''}`" >{{ level1.children[0].name }}</span>
        </t-menu-item>
        <t-submenu :value="level1.MenuId" v-if="level1.IsLevel === 2">
          <template #icon>
            <svg-icon
              :name="getMenuIcon(level1.name)"
              :color="$route.path === level1.path ? '#086CE0' : '#333'"
              style="font-size: 20px;"
            ></svg-icon>
          </template>
          <template #title>
            <span style="margin-left: 5px">{{ level1.name }}</span>
          </template>
          <t-menu-item
            v-for="child in level1.children"
            :value="child.path"
            :key="child.path"
            @click="handleClickMenu(child.path)"
          >
            <span :style="`margin-left: 5px; color: ${route.meta.pathName === child.name ? '#0052d9' : ''}`">{{ child.name }}</span>
          </t-menu-item>
        </t-submenu>
      </template>
    </t-menu>
  </div>
</template>

<style lang="scss" scoped>
.left-wrap {
  width: 200px;
  z-index: 50;
  position: fixed;
  top: 67px;
  left: 0;
  bottom: 0;
  padding: 8px 0;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  padding-bottom: 111px;
  transition: all 0.5s;
  .menu-wrap {
    flex: 1;
    height: 100%;
    border: none;
    .t-submenu {
      :deep(.t-menu-item) {
        padding-left: var(--t-menu-base-level-padding);
      }
      :deep(.t-submenu__icon-arrow) {
        transform: rotateZ(-90deg) !important;
      }
      &.is-opened {
        :deep(.t-submenu__icon-arrow) {
          transform: rotateZ(0deg) !important;
          border-radius: 4px;
        }
      }
    }
    :deep(.t-menu-item.is-active) {
      background-color: #f3f9ff;
    }
  }
  .user-box {
    background-color: var(--t-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>