LoongPanel-Asp/web/components/shell/SideBar.vue

<script lang="ts" setup>

import {useMainLayoutStore} from "~/strores/UseMainLayoutStore";
import {type MenuOption, NIcon} from "naive-ui";
import { LayoutGrid,Computer,Cpu,Cctv,UserRoundCog,Goal,Settings,LogOut,PanelLeftClose,PanelLeftOpen,SquareTerminal } from 'lucide-vue-next';
import type {Component} from "vue";
import { useLoadingBar } from 'naive-ui'
const {$gsap} = useNuxtApp()
const mainLayoutStore = useMainLayoutStore()
const loadingBar = useLoadingBar()
const collapsed=ref<boolean>(false)
const  activeKey= ref<string | null>(null);
function renderIcon(icon: Component) {
  return () => h(NIcon, null, { default: () => h(icon) })
}

const menuOptions: MenuOption[] = [
  {
    label: '系统概览',
    key: 'home',
    icon:renderIcon(LayoutGrid)
  },
  {
    label: '主机监测',
    key: 'host',
    icon:renderIcon(Computer),
    children: [
      {
        label: '终端',
        key: 'terminal',
        icon:renderIcon(SquareTerminal)
      },
      {
        label: 'CPU',
        key: 'host/cpu',
        icon:renderIcon(Cpu)
      }
    ]
  },
  {
    label: '用户监测',
    key: 'serverUser/all',
    icon:renderIcon(Cctv)
  },
  {
    label:'账号管理',
    key: 'user',
    icon:renderIcon(UserRoundCog)
  },
  {
    label: '巡检记录',
    key: 'inspectionRecords',
    icon:renderIcon(Goal)
  },
  {
    label: '系统设置',
    key: 'Settings',
    icon:renderIcon(Settings)
  },
  {
    label: '退出登录',
    key: 'Exit',
    icon:renderIcon(LogOut)
  }
]
defineExpose({
  menuOptions
})
watch(()=>activeKey.value,async (newValue)=>{
  loadingBar.start()
  await navigateTo("/"+newValue)
  loadingBar.finish()
})

</script>

<template>
  <section class="sidebar-layout">
    <transition name="fade" mode="out-in">
      <div  v-if="!collapsed" class="header">
        <n-image
            width="45"
            src="/Square310x310Logo.png"
        />
        <h1>龙盾云御</h1>
      </div>
      <div v-else class="header">
        <n-image
            width="45"
            src="/Square310x310Logo.png"
        />
        <h1 v-if="!collapsed">龙盾云御</h1>
      </div>
    </transition>
    <n-layout has-sider>
        <n-layout-sider
            collapse-mode="width"
            :collapsed-width="64"
            :collapsed="collapsed"
            @collapse="collapsed = true"
            @expand="collapsed = false"
            :width="200"
            :inverted="$colorMode.value == 'dark'"
        >
          <n-menu
              :inverted="$colorMode.value == 'dark'"
              :collapsed="collapsed"
              v-model:value="activeKey"
              :collapsed-width="64"
              :collapsed-icon-size="22"
              :options="menuOptions"
          />
        </n-layout-sider>
    </n-layout>

    <div class="bottom">
      <PanelLeftOpen v-if="collapsed" @click="collapsed=false" />
      <PanelLeftClose v-else @click="collapsed=true" />
    </div>
  </section>
</template>

<style lang="scss" scoped>
@import "base";

.sidebar-layout {
  display: flex;
  grid-area: sidebar;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: $gap;
  border-right: $border;
  background: $light-bg-color;
  position: relative;
  *{
    @include SC_Font
  }
  .dark-mode & {
    background: $dark-bg-color;
    border-right: $border-dark;
  }
}


.fade-enter-active {
  transition: opacity 0.5s ease;
}
.fade-leave-active{
  transition: opacity 0.05s ease;
}

/* 进入开始状态和离开结束状态 */
.fade-enter-from, .fade-leave-to {
  opacity: 0;
  scale: 0;

}

.header {
  height: 62px;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: $gap;

  h1{
    font-size: 30px;
    font-weight: 600;
  }
}
.bottom{
  height: 50px;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 20px;
  border-top: $border;
  .dark-mode & {border-top: $border-dark;}
}
.n-layout{
  background: unset;
}
.n-layout-sider{
  background: unset;
}
</style>