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

<script lang="ts" setup>
import {useMainLayoutStore} from "~/strores/UseMainLayoutStore";
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)
  })
})
type menuType = {
  [key: string]: string;
}
const menus: menuType = {
  'Home': '概览',
  'Host': '主机',
  'Cpu': '处理器',
  'Network': '网络',
  'ServerUser': '用户监测',
  'Id': '用户',
  'User': '账号管理',
  'InspectionRecords': '巡检记录',
  'Settings': '设置'
}
const getMenuInfo = (key: string) => {
  return menus[key] ?? key
}
const value = ref()
const options = ref(['@gmail.com', '@outlook.com', '@yahoo.com'])
</script>

<template>
  <section class="title-bar-layout">
    <n-breadcrumb separator=">">
      <n-breadcrumb-item v-for="i in routes" :key="i">
        {{ getMenuInfo(i) }}
      </n-breadcrumb-item>
    </n-breadcrumb>
    <div>

    </div>
    <n-auto-complete
        v-model:value="value"
        :input-props="{
      autocomplete: 'disabled',
    }"
        :options="options"
        placeholder="搜索"
        clearable
    />
    <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;

    }
  }
}

</style>