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

<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>