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

<script lang="ts" setup>
import {useMainLayoutStore} from "~/strores/UseMainLayoutStore";
import {BellRing, Mail} from 'lucide-vue-next';
import SidebarRight from "~/components/SidebarRight.vue";

const {$gsap} = useNuxtApp()
const mainLayoutStore = useMainLayoutStore()
const home = ref({
  icon: 'pi pi-home'
});
const router = useRouter()
const routes=computed(()=>{
  const route=router.currentRoute.value.name as string
  return route.split('-').map(x => {
    return {
      label: x.charAt(0).toUpperCase() + x.slice(1),
      icon: 'pi pi-angle'
    }
  })
})
const visibleRight = ref(false)
</script>

<template>
  <section class="title-bar-layout">
    <Sidebar v-model:visible="visibleRight" header="通知" position="right">
      <SidebarRight/>
    </Sidebar>
    <h1 class="name">
      <Breadcrumb :home="home" :model="routes" />
    </h1>
    <div class="action">
      <Icon name="BellRing"  @click="visibleRight=true" :stroke-width="1.5" :size="20"/>
      <Icon name="Mail" :stroke-width="1.5" :size="20"/>
    </div>
    <div class="user">
      <UserMini/>
    </div>
  </section>
</template>

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

.title-bar-layout {
  grid-area: titlebar;
  background: $light-bg-color;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  grid-template-rows: 1fr;
  align-items: center;
  padding: 0 $padding*2;
  gap: $gap*2;
  @include SC_Font();
  .dark-mode & {
    background: $dark-bg-color;
  }
}

.name {
  font-weight: 700;
  font-size: 26px;
  color: $light-text-color;

  .dark-mode & {
    color: $dark-text-color;
  }
}

.user {
  grid-column: 4;
}

.action {
  display: flex;
  gap: $gap*2;
  grid-column: 3;
  svg{
    cursor: pointer;
    stroke: rgba(51, 51, 51, 0.5);
    &:hover{
      stroke: $light-text-color;
    }
    .dark-mode &{
      stroke: rgba(255, 255, 255, 0.5);
      &:hover{
        stroke: $dark-text-color;
      }
    }
  }
}
:deep(.p-breadcrumb){
  background: unset;
  .p-menuitem-text{
    color: #D3D3D3;
  }
}
</style>