LoongPanel-Asp/web/pages/host.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: 'Cpu',
        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.id
    },
    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.id
    },
    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.id, () => {
  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>