109 lines
2.7 KiB
Vue
109 lines
2.7 KiB
Vue
<script setup lang="ts">
|
|
defineProps<{
|
|
server: IMCServerStatus
|
|
}>()
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
v-if="server.online"
|
|
class="p-4"
|
|
>
|
|
<div class="flex justify-between">
|
|
<div class="flex items-center gap-4">
|
|
<!-- Server Logo -->
|
|
<img
|
|
:src="server.icon!"
|
|
alt=""
|
|
class="h-20 w-20 rounded-xl"
|
|
>
|
|
|
|
<div>
|
|
<p class="text-2xl font-bold">
|
|
{{ server.hostname?.toUpperCase() || "UNKNOWN HOST" }}
|
|
</p>
|
|
<p class="text-xl">
|
|
{{ server.port }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex flex-col justify-between text-lg">
|
|
<p class="rounded-lg bg-gray-200 px-2">
|
|
{{ server.version || 'UNKNOWN VERSION' }}
|
|
</p>
|
|
<p class="rounded-lg bg-gray-200 px-2">
|
|
{{ server.players.online }} / {{ server.players.max }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-4 rounded-xl bg-blue-100 p-4">
|
|
<p
|
|
v-for="line in server.motd.clean"
|
|
:key="line"
|
|
>
|
|
{{ line }}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="mt-4">
|
|
<span class="text-xl">玩家列表</span>
|
|
<div
|
|
v-if="server.players.list?.length"
|
|
class="divide-y-2 divide-dashed"
|
|
>
|
|
<div
|
|
v-for="player in server.players.list"
|
|
:key="player.uuid"
|
|
class="mb-4 flex items-center gap-4 px-4 pt-4 last:mb-0"
|
|
>
|
|
<img
|
|
:src="`https://minotar.net/helm/${player.uuid}/32.png`"
|
|
alt=""
|
|
class="h-12 w-12"
|
|
>
|
|
<p class="text-xl">
|
|
{{ player.name }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div
|
|
v-else
|
|
class="text-center"
|
|
>
|
|
没有在线玩家
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-4">
|
|
<div class="mt-4 flex justify-end gap-4">
|
|
<a
|
|
href="https://hmcl.huangyuhui.net/"
|
|
class="cursor-pointer rounded-lg bg-blue-400 px-4 py-1 text-lg text-white transition-all hover:bg-blue-500"
|
|
>
|
|
启动器
|
|
<font-awesome-icon :icon="['fas', 'arrow-up-right-from-square']" />
|
|
</a>
|
|
<a class="cursor-pointer rounded-lg bg-blue-400 px-4 py-1 text-lg text-white transition-all hover:bg-blue-500">
|
|
整合包
|
|
<font-awesome-icon :icon="['fas', 'arrow-up-right-from-square']" />
|
|
</a>
|
|
<a class="cursor-pointer rounded-lg bg-blue-400 px-4 py-1 text-lg text-white transition-all hover:bg-blue-500">
|
|
汉化补丁
|
|
<font-awesome-icon :icon="['fas', 'arrow-up-right-from-square']" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-else>
|
|
<p class="text-center text-xl p-4">
|
|
服务器离线
|
|
</p>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|