eta_forum_admin_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([
  {
    name: '客户管理',
    path: '/customer',
    IsLevel: 2,
    Children: [
      {
        name: '商家管理',
        path: '/business'
      },
      {
        name: '用户管理',
        path: '/customer/userList'
      }
    ]
  },
  {
    name: 'ETA客户行为统计',
    path: '/',
    IsLevel: 1,
    Children: [
      {
        name: 'ETA客户行为统计',
        path: '/',
      }
    ]
  },
  {
    name: 'ETA试用管理',
    path: '/',
    IsLevel: 1,
    Children: [
      {
        name: 'ETA试用管理',
        path: '/',
      }
    ]
  },
  {
    name: 'ETA社区管理',
    path: '/etaChart',
    IsLevel: 1,
    Children: [
      {
        name: 'ETA社区管理',
        path: '/etaChart/index',
      }
    ]
  },
  {
    name: 'ETA菜单配置',
    path: '/',
    IsLevel: 1,
    Children: [
      {
        name: 'ETA菜单配置',
        path: '/',
      }
    ]
  },
  {
    name: '培训管理',
    path: '/',
    IsLevel: 2,
    Children: [
      {
        name: '视频管理',
        path: '/',
      },
      {
        name: '标签管理',
        path: '/',
      },
      {
        name: '分类管理',
        path: '/',
      }
    ]
  },
  {
    name: '个性化设置',
    path: '/',
    IsLevel: 1,
    Children: [
      {
        name: '个性化设置',
        path: '/',
      }
    ]
  },
  {
    name: '权限配置',
    path: '/',
    IsLevel: 1,
    Children: [
      {
        name: '权限配置',
        path: '/',
      }
    ]
  },
  {
    name: '系统设置',
    path: '/',
    IsLevel: 2,
    Children: [
      {
        name: '更新日志配置',
        path: '/',
      },
      {
        name: '帮助中心配置',
        path: '/',
      }
    ]
  },
])

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 getMenuIcon(item) {
  const iconMap = {
    '/customer': 'menu/customer',
  }
  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.SysMenuId">
        <t-menu-item :value="level1.path" v-if="level1.IsLevel === 1">
          <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>
        </t-menu-item>
        <t-submenu :value="level1.path" v-if="level1.IsLevel === 2">
          <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>
          <t-menu-item
            v-for="child in level1.Children"
            :value="child.path"
            :key="child.path"
          >
            <span style="margin-left: 5px">{{ 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>