voiceMate-web/src/layout/components/Sidebar/index.vue

<script setup>
import SidebarItem from './SidebarItem'
import useSettingsStore from '@/store/modules/settings'
import usePermissionStore from '@/store/modules/permission'

const route = useRoute();
const router = useRouter();
const settingsStore = useSettingsStore()
const permissionStore = usePermissionStore()

const sidebarRouters = computed(() => permissionStore.sidebarRouters);

const theme = computed(() => settingsStore.theme);
const activeKey = ref(route.path);

const activeMenu = computed(() => {
  const { meta, path } = route;
  // if set path, the sidebar will highlight the path you set
  if (meta.activeMenu) {
    return meta.activeMenu;
  }
  return path;
})

const menuResetTheme = {
  '--el-menu-bg-color': '#EFF1F8',
  '--el-menu-text-color': '#4E5969',
  '--el-menu-active-color': '#165DFF',
  '--el-menu-item-height': '48px'
}

const handleSelect = (key) => {
  activeKey.value = key;
}

const onJumpPage = () => {
  const { href } = router.resolve({
    path: '/voice/dashboard'
  });
  window.open(href, '_blank');
}

</script>
<template>
  <div :style="{ backgroundColor: '#EFF1F8', paddingTop: '20px' }" class="vocie-menu-wrapper">
    <el-scrollbar :class="theme" wrap-class="scrollbar-wrapper">
      <div style="padding: 0 20px;">
        <el-menu :style="menuResetTheme" :default-active="activeMenu" :unique-opened="true" :collapse-transition="false"
          mode="vertical" @select="handleSelect">
          <sidebar-item v-for="(route, index) in sidebarRouters" :key="route.path + index" :item="route"
            :base-path="route.path" :active-key="activeKey" />
        </el-menu>
      </div>
    </el-scrollbar>
    <!-- <div class="vocie-menu-footer">
      <div class="dashboard-btn space-x-[10px]" @click="onJumpPage">
        <el-icon><TrendCharts /></el-icon>
        <span class="text-[14px]">驾驶舱</span>
      </div>
    </div> -->
  </div>
</template>

<style lang="scss">
#app .sidebar-container .el-scrollbar {
  height: calc(100% - 60px);
}

.vocie-menu-footer {
  height: 60px;
  padding: 20px;
  .dashboard-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    border-radius: 8px;
    border: 1px solid #e4e4e4;
    // color: #165DFF;
    color: #666;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.6s;
    
    &:hover {
      color: #165DFF;
      background: linear-gradient(90deg, #FFF 0%, rgba(255, 255, 255, 0) 100%);
    }
  }
}
</style>