technique_admin/src/layout/parts/Sidebar.vue

<!-- eslint-disable vue/no-deprecated-slot-attribute -->
<template>
  <div id="Sidebar">
    <el-row class="sidebar">
      <el-col :span="24" class="main">
        <el-col :span="24" class="first">
          <img :src="siteInfo.logo_url" class="logo-image" />
          <span class="logo-title">{{ $t('login.title') }}</span>
        </el-col>
        <el-col :span="24" class="second">
          <el-menu class="sidebar-el-menu" :default-active="onRoutes" unique-opened router background-color="#304156" text-color="#bfcbd9" active-text-color="#409eff">
            <menu-item :items="items"></menu-item>
          </el-menu>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { siteInfo } from '@/layout/site'
import { UserStore } from '@/store/user'
import menuItem from './sidebar/items.vue'
import { useRoute } from 'vue-router'
const route = useRoute()

const onRoutes = ref(route.path)
const userStore = UserStore()
let items = ref(userStore.menus)
const user = computed(() => userStore.user)

const getMenu = async () => {
  const menus = user.value.menus
  const newMenus = [...menus]
  items.value = newMenus
}

watch(
  user,
  (newVal) => {
    if (newVal && newVal._id) {
      if (newVal && newVal._id) getMenu()
      else ElMessage({ message: `暂无用户信息，无法获取菜单信息`, type: 'error' })
    }
  },
  {
    deep: true
  }
)
watch(
  route,
  (newVal) => {
    if (newVal && newVal.path) onRoutes.value = newVal.path
  },
  {
    immediate: true //初始化立即执行
  }
)
</script>
<style scoped lang="scss">
.sidebar::-webkit-scrollbar {
  width: 0;
}

.sidebar > ul {
  height: 100%;
}

.main {
  .first {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    background-color: #242f42;

    .logo-image {
      width: 20px;
      height: 20px;
    }

    .logo-title {
      margin-left: 10px;
      font-size: 14px;
      font-weight: bold;
      color: white;
    }
  }

  .second {
    padding: 0 2px 0 0;

    .el-menu {
      border-right: none;
    }

    .iconfont {
      font-size: 18px;
      margin: 0 5px 0 0;
    }
  }
}
</style>