89 lines
1.8 KiB
Vue
Executable File
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.value
|
|
},
|
|
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> |