LoongPanel-Asp/web/components/Cards/SystemInfoCard.vue

89 lines
1.8 KiB
Vue
Executable File

<script lang="ts" setup>
import {useMainLayoutStore} from "~/strores/UseMainLayoutStore";
defineProps({
id: {
type: String,
required: true
}
})
const mainLayoutStore = useMainLayoutStore()
watch(() => mainLayoutStore.SelectServer, () => {
getServerConfig()
})
onMounted(() => {
getServerConfig()
})
const getServerConfig = () => {
$fetch(`/Api/Server/GetServerInfo`, {
method: 'GET',
params: {
serverId: mainLayoutStore.SelectServer.id
},
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${useCookie('token').value}`
},
baseURL: useRuntimeConfig().public.baseUrl
}).then((res) => {
const data = res as any;
const result: { key: string, value: string }[] = [];
for (const key in data) {
if (data.hasOwnProperty(key)) {
result.push({key, value: data[key]});
}
}
mainLayoutStore.ServerConfig = result;
})
}
const I18N: { [key: string]: string } = {
'os': '系统',
'host': '主机',
'kernel': '内核',
'uptime': '运行时间',
'packages': '软件包',
'shell': '终端',
'cpu': '处理器',
'gpu': '显卡',
'memory': '内存',
}
</script>
<template>
<div class="system-card-container">
<div v-for="m in mainLayoutStore.ServerConfig" :key="m.key" class="info-item">
<p>{{ I18N[m.key.toLowerCase()] ?? m.key }}</p>
<p>{{ m.value.split('/').pop()?.trim() }}</p>
</div>
</div>
</template>
<style lang="scss" scoped>
@import "base";
.system-card-container {
display: flex;
flex-direction: column;
gap: $gap;
color: $light-text-color;
justify-content: space-between;
height: 100%;
.dark-mode & {
color: $dark-text-color;
}
}
.info-item {
display: flex;
gap: $gap*2;
p:first-of-type {
font-weight: 600;
min-width: 100px;
}
}
</style>