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

<script lang="ts" setup>
import {useMainLayoutStore} from "~/strores/UseMainLayoutStore";

const {$gsap} = useNuxtApp()
const mainLayoutStore = useMainLayoutStore()
import {Mail, BellRing} from 'lucide-vue-next';
import SidebarRight from "~/components/SidebarRight.vue";

const visibleRight = ref(false)
</script>

<template>
  <section class="title-bar-layout">
    <Sidebar v-model:visible="visibleRight" header="通知" position="right">
      <SidebarRight/>
    </Sidebar>
    <h1 class="name">
      {{ $router.currentRoute.value.name }}
      <button @click="req">申请</button>
    </h1>
    <div class="action">
      <BellRing @click="visibleRight=true"/>
      <Mail/>
    </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;

  .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;
}
</style>