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

<template>
  <div class="slide-menu" id="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 { RouteRaw } from "@/router";
import { params, routeIncludeFire } from "@/env";

export type MenuItem = {
  name: RoutesName;
  config: RouteRaw;
} & 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 (routeIncludeFire(params.app)) {
    items.unshift({
      name: RoutesName.fireInfo,
      config: getRouteConfig(RoutesName.fireInfo),
      ...metas[RoutesName.fireInfo],
    });
  }

  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: calc(var(--editor-head-height) + var(--header-top));
  bottom: 0;
  z-index: 200;
  overflow: hidden;
  backdrop-filter: blur(4px);
  transition: all 0.3s ease;

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

    &::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 0;
      background: currentColor;
      transition: width 0.3s ease;
    }

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

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

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