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

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

const router = useRouter()
const routes=computed(()=>{
  const route=router.currentRoute.value.name as string
  return route.split('-').map(x => {
    return x.charAt(0).toUpperCase() + x.slice(1)
  })
})
const visibleRight = ref(false)
const value=ref()
const options = ref(['@gmail.com', '@outlook.com', '@yahoo.com'])
</script>

<template>
  <section class="title-bar-layout">
    <n-auto-complete
        v-model:value="value"
        :input-props="{
      autocomplete: 'disabled',
    }"
        :options="options"
        placeholder="搜索"
        clearable
    />
    <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;
  border-bottom: $border;
  gap: $gap*2;
  @include SC_Font();
  .dark-mode & {
    background: $dark-bg-color;
    border-bottom: $border-dark;
  }
}

:deep(.n-breadcrumb){
  ul{
    display: flex;
    padding: 0;
    align-content: center;

    li>span{
      font-size: 16px;
      font-weight: 800;

    }
  }
}

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