<script setup>
const servers = [
        {
            name: "泰国",
            ip: "43.133.103.128",
            domain: "https://ag-th.jiagutech.com",
            userpass: "13951707395 / w12345678",
            config: "main-th",
            app: "—",
            containerized: "否",
            server: "2台8G",
            sync: "是",
            deployTime: "23.04",
            services: "user, drone, oper, tftz, route, udp, canal, sms, framework"
        },
        {
            name: "印度1",
            ip: "—",
            domain: "http://ag.xagrotortek.com",
            userpass: "1234512345 / Magicmoment19",
            config: "india",
            app: "india",
            containerized: "是",
            server: "1台",
            sync: "否",
            deployTime: "23.07",
            services: "user, drone, oper, sms, encrypt, udp, framework"
        },
        // 更多服务器数据...
    ]
    </script>

    <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.03);
            transition: background-color 0.3s ease, color 0.3s ease;
        }
        .server-card h3 {
            margin-top: 0;
            margin-bottom: 0.5rem;
            font-size: 1.1rem;
            color: var(--vp-c-brand-1);
        }
        .server-card .label {
            font-weight: bold;
            color: var(--vp-c-text-2);
        }
        .server-card .value {
            margin-bottom: 0.3rem;
            word-break: break-word;
        }
</style>

<template>
    <div class="server-grid">
        <div v-for="server in servers" :key="server.name" class="server-card">
            <h3>{{ server.name }}</h3>
            <div class="value"><span class="label">公网 IP：</span>{{ server.ip }}</div>
            <div class="value"><span class="label">域名：</span><a :href="server.domain" target="_blank">{{ server.domain.replace(/^https?:\/\//, '') }}</a></div>
            <div class="value"><span class="label">用户名/密码：</span>{{ server.userpass }}</div>
            <div class="value"><span class="label">配置：</span>{{ server.config }}</div>
            <div class="value"><span class="label">App：</span>{{ server.app }}</div>
            <div class="value"><span class="label">容器化：</span>{{ server.containerized }}</div>
            <div class="value"><span class="label">服务器：</span>{{ server.server }}</div>
            <div class="value"><span class="label">同步：</span>{{ server.sync }}</div>
            <div class="value"><span class="label">部署时间：</span>{{ server.deployTime }}</div>
            <div class="value"><span class="label">服务：</span>{{ server.services }}</div>
        </div>
    </div>
</template>
