LoongPanel-Asp/web/pages/host.vue

183 lines
3.8 KiB
Vue

<script lang="ts" setup>
import {useMainLayoutStore} from "~/strores/UseMainLayoutStore";
definePageMeta({
layout: 'main',
middleware: ['auth']
})
type RouteType = {
label: string,
icon: string,
route: string
}
const mainLayoutStore = useMainLayoutStore()
const diskRoute = ref<RouteType[]>([])
const netRoute = ref<RouteType[]>([])
const reLoad=ref<boolean>(false)
const headers = computed(() => {
{
return [
{
label: 'CPU',
icon: 'Cpu',
route: '/host/cpu'
}, {
label: '内存',
icon: 'MemoryStick',
route: '/host/memory'
},
...diskRoute.value.map(x => {
return {
label: x.label,
icon: x.icon,
route: x.route
}
}), ...netRoute.value.map(x => {
return {
label: x.label,
icon: x.icon,
route: x.route
}
}),
{
label:'进程',
icon:'LayoutList',
route:'/host/process'
},{
label:'网络连接',
icon:'Waypoints',
route:'/host/networkList'
}
]
}
})
onMounted(() => {
getRote()
})
const getRote = () => {
$fetch('/Api/Server/GetServerDiskList', {
method: 'GET',
params: {
ServerId: mainLayoutStore.SelectServer.value
},
baseURL: useRuntimeConfig().public.baseUrl,
headers: {
'Authorization': 'Bearer ' + useCookie('token').value
}
}).then(res => {
const data = res as any[]
console.log(data)
diskRoute.value = data.map((x, index) => {
return {
label: `驱动器 ${index} (${x.name.replace('/dev/', '')}) - ${x.size}GB`,
icon: 'HardDrive',
route: '/host/disk/' + x.name.replace('/dev/', '').replace('/', '_')
}
})
})
$fetch('/Api/Server/GetServerNetworkEquipmentList', {
method: 'GET',
params: {
ServerId: mainLayoutStore.SelectServer.value
},
baseURL: useRuntimeConfig().public.baseUrl,
headers: {
'Authorization': 'Bearer ' + useCookie('token').value
}
}).then(res => {
const data = res as string[]
netRoute.value = data.map((x, index) => {
return {
label: `网络设备 ${index} (${x})`,
icon: 'Network',
route: '/host/network/' + x
}
})
})
}
watch(() => mainLayoutStore.SelectServer.value, () => {
getRote()
navigateTo('/host/cpu')
reLoad.value = true
nextTick(() => {
reLoad.value = false
})
})
</script>
<template>
<div class="Host-Layout">
<XScroll>
<div class="header">
<div v-for="header in headers" :class="{
'header-item':true,'header-item-activated': $route.path === header.route,
}" @click="navigateTo(header.route)">
<Icon :name="header.icon" :stroke-width="1.6"/>
<p>{{ header.label }}</p>
</div>
</div>
</XScroll>
<NuxtPage v-if="!reLoad" />
</div>
</template>
<style lang="scss" scoped>
@import "base";
.Host-Layout {
background: $light-bg-color;
width: 100%;
border-radius: $radius*2;
box-shadow: 0 0 10px rgba(0, 0, 0, .1);
display: grid;
grid-template-rows: auto 1fr;
grid-template-columns:1fr;
.dark-mode & {
background: $dark-bg-color;
}
}
.header {
display: flex;
min-height: 50px;
}
.header-item {
display: flex;
align-items: center;
padding: $padding;
gap: $gap;
//禁止文本换行
white-space: nowrap;
&:not(.header-item-activated):hover, &:active {
background: rgba($primary-color, 0.1);
box-shadow: 0 0 200px 10px rgba($primary-color, .3);
}
p, svg {
font-weight: 500;
color: $light-text-color;
}
.dark-mode & {
p, svg {
color: $dark-text-color;
}
}
}
.header-item-activated {
background: $primary-color;
p, svg {
color: #FFF;
stroke: #FFF;
}
}
</style>