From 1051d0e7e8fefd9b92c02467553a74a1433fffd1 Mon Sep 17 00:00:00 2001
From: lijun <lijun.ls@qq.com>
Date: Tue, 16 Dec 2025 21:35:27 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0VPN=E6=9C=8D=E5=8A=A1?=
 =?UTF-8?q?=E5=99=A8=E9=85=8D=E7=BD=AE=E7=AE=A1=E7=90=86=EF=BC=8C=20?=
 =?UTF-8?q?=E6=9C=AA=E5=AE=8C=E5=96=84=E8=B7=AF=E7=94=B1=E7=AD=89=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/system/vpn-server-config.vue | 97 +++++++++++++++++---------
 1 file changed, 65 insertions(+), 32 deletions(-)

diff --git a/src/views/system/vpn-server-config.vue b/src/views/system/vpn-server-config.vue
index ab8d14f..22980e6 100644
--- a/src/views/system/vpn-server-config.vue
+++ b/src/views/system/vpn-server-config.vue
@@ -4,6 +4,11 @@
             <!-- 左侧服务器列表 -->
             <el-col :span="8">
                 <el-card shadow="hover">
+                    <template #header>
+                        <div class="card-header">
+                            <span>服务器列表</span>
+                        </div>
+                    </template>
                     <div class="server-list">
                         <div 
                             v-for="server in serverList" 
@@ -13,7 +18,10 @@
                             @click="selectServer(server)"
                         >
                             <div class="server-info">
-                                <div class="server-name">{{ server.name }}</div>
+                                <div class="server-name">
+                                    <span class="status-indicator" :class="{ 'online': onlineServers.includes(server.server_id) }"></span>
+                                    {{ server.name }}
+                                </div>
                                 <div class="server-ip">{{ server.server_ip }}</div>
                             </div>
                             <div class="server-actions">
@@ -219,10 +227,10 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, onMounted } from 'vue';
+import { ref, reactive, onMounted, onUnmounted } from 'vue';
 import { ElMessage, ElMessageBox } from 'element-plus';
 import {getAllDefaultUsers} from '@/api/user';
-import { GetVPNServerConfigHandler, SetVPNServerConfigHandler, DeleteVPNServerHandler, GetVPNAddressPoolHandler, GetVPNTunnelConfigHandler } from '@/api/vpn';
+import { GetVPNServerConfigHandler, SetVPNServerConfigHandler, DeleteVPNServerHandler, GetVPNAddressPoolHandler, GetVPNTunnelConfigHandler, GetVPNServerOnlineListHandler } from '@/api/vpn';
 
 interface UserID {
     id: number;
@@ -305,6 +313,8 @@ const addressPools = ref<AddressPoolRequest[]>([]);
 const tunnelConfigs = ref<TunnelRequestAndResponse[]>([]);
 const user_select_opts = ref<Array<{value: number, label: string}>>([]);
 const user_select_ids = ref<number[]>([]);
+const onlineServers = ref<string[]>([]);
+let timer: number | null = null;
 // 获取服务器配置列表
 const getServerConfigs = async () => {
     try {
@@ -338,6 +348,36 @@ const getTunnelConfigs = async () => {
     }
 };
 
+// 获取在线服务器列表
+const getOnlineServers = async () => {
+    try {
+        const response = await GetVPNServerOnlineListHandler();
+        if (response.data && Array.isArray(response.data)) {
+            onlineServers.value = response.data.map((server: any) => server.server_id);
+        }
+    } catch (error) {
+        console.error('获取在线服务器状态失败:', error);
+    }
+};
+
+// 启动定时查询
+const startOnlineStatusTimer = () => {
+    // 立即查询一次
+    getOnlineServers();
+    // 设置定时器，每2秒查询一次
+    timer = window.setInterval(() => {
+        getOnlineServers();
+    }, 2000);
+};
+
+// 停止定时查询
+const stopOnlineStatusTimer = () => {
+    if (timer !== null) {
+        clearInterval(timer);
+        timer = null;
+    }
+};
+
 // 选择服务器
 const selectServer = (server: ServerConfig) => {
     selectedServer.value = { ...server };
@@ -354,35 +394,6 @@ const selectServer = (server: ServerConfig) => {
     }
 };
 
-// 添加服务器
-const addServer = () => {
-    const newServer: ServerConfig = {
-        name: "新服务器",
-        server_id: "",
-        server_ip: "",
-        server_info: "",
-        udp_port: 1194,
-        tcp_port: 443,
-        protocol: 2,
-        ip_type: 4,
-        ipv4_address_pool: "10.8.0.0/24",
-        ipv6_address_pool: "",
-        dns_server: "8.8.8.8",
-        tunnel: "tun",
-        allow_user_id: [],
-        encryption: "aes-256-gcm",
-        hash: "sha256",
-        user_max_device: 5,
-        duration_time: 300,
-        ipv4_router: [],
-        ipv6_router: []
-    };
-    
-    serverList.value.push(newServer);
-    selectServer(newServer);
-    ElMessage.success('已添加新服务器');
-};
-
 // 删除服务器
 const deleteServer = async (serverId: string) => {
     try {
@@ -469,6 +480,12 @@ onMounted(() => {
     getAddressPools();
     getTunnelConfigs();
     GetAllDefaultUsers();
+    startOnlineStatusTimer();
+});
+
+// 组件卸载时清理定时器
+onUnmounted(() => {
+    stopOnlineStatusTimer();
 });
 </script>
 
@@ -518,6 +535,22 @@ onMounted(() => {
 .server-name {
     font-weight: bold;
     margin-bottom: 4px;
+    display: flex;
+    align-items: center;
+}
+
+.status-indicator {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background-color: #909399;
+    margin-right: 8px;
+    transition: background-color 0.3s;
+}
+
+.status-indicator.online {
+    background-color: #67c23a;
+    box-shadow: 0 0 4px rgba(103, 194, 58, 0.5);
 }
 
 .server-ip {