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

68 lines
1.3 KiB
Vue
Executable File

<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>