

<script setup>
defineProps({
  servers: {
    type: Array,
    required: true
  }
})
</script>

<template>
  <div class="server-grid">
    <div v-for="server in servers" :key="server.name" class="server-card">
      <h3>{{ server.name }}</h3>
      <div><strong>IP:</strong> {{ server.ip }}</div>
      <div>
        <strong>域名:</strong>
        <a :href="server.domain" target="_blank">{{ server.domain }}</a>
      </div>
      <div><strong>账号:</strong> {{ server.userpass }}</div>
      <div><strong>配置:</strong> {{ server.config }}</div>
      <div><strong>App:</strong> {{ server.app || "—" }}</div>
      <div><strong>容器化:</strong> {{ server.containerized }}</div>
      <div><strong>服务器:</strong> {{ server.server }}</div>
      <div><strong>同步:</strong> {{ server.sync }}</div>
      <div><strong>部署时间:</strong> {{ server.deployTime }}</div>
      <div><strong>服务:</strong> {{ server.services }}</div>
    </div>
  </div>
</template>

<style scoped>
.server-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}
.server-card {
  border: 1px solid var(--vp-c-divider);
  border-radius: 8px;
  padding: 1rem;
  background-color: var(--vp-c-bg-soft);
  color: var(--vp-c-text-1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  transition: background-color 0.3s ease, color 0.3s ease;
}
.server-card h3 {
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
  color: var(--vp-c-brand-1);
}
.server-card a {
  color: var(--vp-c-brand-2);
  text-decoration: none;
}
.server-card a:hover {
  text-decoration: underline;
}
</style>
