fuse-code/src/layout/show/slide-menu.vue

<template>
  <div class="slide-menu">
    <div 
      v-for="item in items" 
      :class="{active: item.name === activeName}" 
      :key="item.name"
      @click="$emit('changeItem', item as any)"
    >
      <ui-icon :type="item.icon" :tip="item.title" class="icon" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { metas, RoutesName, router, getRouteConfig } from '@/router'
import { views, records, floders } from '@/store';
import { computed } from 'vue';

import type { RouteRecordRaw } from '@/router'

export type MenuItem = {
  name: RoutesName,
  config: RouteRecordRaw,
} & (typeof metas)[keyof typeof metas]

defineProps<{ activeName: RoutesName }>()
defineEmits<{ (e: 'changeItem', item: MenuItem): void }>()


const items = computed(() => {
  const items = [
    {
      name: RoutesName.summaryShow,
      config: getRouteConfig(RoutesName.summaryShow),
      ...metas[RoutesName.summaryShow]
    }
  ]

  if (views.value.length) {
    items.push({
      name: RoutesName.viewShow,
      config: getRouteConfig(RoutesName.viewShow),
      ...metas[RoutesName.viewShow]
    }) 
  }

  if (records.value.length) {
    items.push({
      name: RoutesName.recordShow,
      config: getRouteConfig(RoutesName.recordShow),
      ...metas[RoutesName.recordShow]
    }) 
  }

  if (floders.value.length) {
    items.push({
      name: RoutesName.folderShow,
      config: getRouteConfig(RoutesName.folderShow),
      ...metas[RoutesName.folderShow]
    }) 
  }

  return items
})
</script>

<style lang="scss" scoped>

.slide-menu {
  width: var(--editor-menu-width);
  filter: var(--editor-menu-filter); 
  background-color: var(--editor-menu-back);
  position: fixed;
  left: var(--editor-menu-left);
  top: var(--editor-head-height);
  bottom: 0;
  z-index: 2000;
  overflow: hidden;
  backdrop-filter: blur(4px);
  transition: all .3s ease;

  > div {
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    color: rgba(255, 255, 255, 0.6);
    transition: color .3s ease;
    cursor: pointer;

    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 0;
      background: currentColor;
      transition: width .3s ease;
    }

    &.active,
    &:hover {
      color: #00C8AF;
    }

    &.active::before {
      width: 4px;
    }

    .icon {
      font-size: 24px;
      color: currentColor;
    }
    
  }
}
</style>