93 lines
1.9 KiB
Vue
Executable File
93 lines
1.9 KiB
Vue
Executable File
<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> |