修改显示终端信息

src/types/vpn.ts

@@ -0,0 +1,75 @@
+
+export interface VPNStatus {
+    status: number;
+    receive_packets: number;
+    send_packets: number;
+    receive_bytes: number;
+    send_bytes: number;
+    last_update_time: number;
+    online_user_info: OnlineUserInfo[] | null;
+}
+
+export interface OnlineUserInfo {
+    session_id: string;
+    user_id: number;
+    upload_packets: number;
+    download_packets: number;
+    upload_bytes: number;
+    download_bytes: number;
+    last_update_time: number;
+}
+
+export interface ServerConfig {
+    name: string;
+    server_id: string;
+    server_ip: string;
+    server_ipv6: string;
+    server_ip_type: number;
+    server_info: string;
+    udp_port: number;
+    tcp_port: number;
+    protocol: number;
+    ip_type: number;
+    ipv4_address_pool: string;
+    ipv6_address_pool: string;
+    dns_server: string;
+    tunnel: string;
+    allow_user_id: any[];
+    encryption: string;
+    hash: string;
+    no_policy_action:number;
+    user_max_device: number;
+    duration_time: number;
+    ipv4_router: any[];
+    ipv6_router: any[];
+    vpn_status: VPNStatus;
+}
+
+export interface OnlineUserInfoList {
+    id: number;
+    user_id: number;
+    user_name: string;
+    private_ipv4: string;
+    private_ipv6: string;
+    vpn_dp_secret: string;
+    uuid: string;
+    last_update_time: number;
+    host_info: HostInfo;
+}
+
+export interface HostInfo {
+  hostname: string;
+  uptime: number;
+  bootTime: number;
+  procs: number;
+  os: string;
+  platform: string;
+  platformFamily: string;
+  platformVersion: string;
+  kernelVersion: string;
+  kernelArch: string;
+  virtualizationSystem: string;
+  virtualizationRole: string;
+  hostId: string;
+  client_version: string;
+}

src/views/system/vpn-server-online-user.vue

@@ -56,13 +56,23 @@
                         <el-table-column prop="private_ipv4" label="内网IPv4" width="140" />
                         <el-table-column prop="uuid" label="会话ID" min-width="200" show-overflow-tooltip />
                         <el-table-column prop="host_info.hostname" label="主机名" min-width="200" show-overflow-tooltip />
-                        <el-table-column prop="host_info.os" label="操作系统" min-width="200" show-overflow-tooltip />
+                        <el-table-column prop="host_info.os" label="操作系统" min-width="200" show-overflow-tooltip>
+                            <!-- tags 操作系统, windows 蓝色； linux 绿色；macos 黄色; android 红色; ios 紫色; 其他 橙色 -->
+                            <template #default="scope">
+                                <el-tag v-if="scope.row.host_info.os === 'windows'" type="primary" size="small">Windows</el-tag>
+                                <el-tag v-else-if="scope.row.host_info.os === 'linux'" type="success" size="small">Linux</el-tag>
+                                <el-tag v-else-if="scope.row.host_info.os === 'macos'" type="warning" size="small">macOS</el-tag>
+                                <el-tag v-else-if="scope.row.host_info.os === 'android'" type="danger" size="small">Android</el-tag>
+                                <el-tag v-else-if="scope.row.host_info.os === 'ios'" type="info" size="small">iOS</el-tag>
+                                <el-tag v-else type="danger" size="small">未知</el-tag>
+                            </template>
+                        </el-table-column>
                         <el-table-column prop="last_update_time" label="最后更新时间" width="180">
                             <template #default="scope">
                                 {{ formatTime(scope.row.last_update_time) }}
                             </template>
                         </el-table-column>
-                        <el-table-column prop="last_update_time" label="操作" width="180" #default="scope">
+                        <el-table-column prop="last_update_time" label="操作" width="240" #default="scope">
                             <el-button type="primary" @click="KickOutSomeUser(scope.row)">踢出</el-button>
                             <el-button type="primary" @click="showHostInfo(scope.row)">主机信息</el-button>
                         </el-table-column>
@@ -78,45 +88,104 @@
         </el-row>
     </div>
     <!-- 主机信息弹窗 -->
-    <el-dialog title="主机信息" :visible.sync="show_host_info" width="50%">
+    <el-dialog title="主机信息" width="65%" v-model="show_host_info" class="host-info-dialog">
+        <div class="host-info-header">
+            <el-icon class="host-info-icon"><Monitor /></el-icon>
+            <span class="host-info-title">{{ hostInfo.hostname || '未知主机' }}</span>
+            <el-tag v-if="hostInfo.virtualizationRole" :type="hostInfo.virtualizationRole === 'host' ? 'warning' : 'info'" size="small">
+                {{ hostInfo.virtualizationRole === 'host' ? '宿主机' : '虚拟机' }}
+            </el-tag>
+        </div>
+        
+        <el-tabs v-model="activeHostInfoTab" type="card" class="host-info-tabs">
+            <!-- 基本信息标签页 -->
+            <el-tab-pane label="基本信息" name="basic">
+                <el-descriptions :column="2" border class="host-info-descriptions">
+                    <el-descriptions-item label="主机名">
+                        <div class="info-item-with-icon">
+                            <el-icon><Computer /></el-icon>
+                            <span>{{ hostInfo.hostname || '-' }}</span>
+                        </div>
+                    </el-descriptions-item>
+                    <el-descriptions-item label="主机ID">
+                        <div class="info-item-with-icon">
+                            <el-icon><Tag /></el-icon>
+                            <span>{{ hostInfo.hostId || '-' }}</span>
+                        </div>
+                    </el-descriptions-item>
+                    <el-descriptions-item label="运行时间">
+                        <div class="info-item-with-icon">
+                            <el-icon><Timer /></el-icon>
+                            <span>{{ formatUptime(hostInfo.uptime) }}</span>
+                        </div>
+                    </el-descriptions-item>
+                    <el-descriptions-item label="启动时间">
+                        <div class="info-item-with-icon">
+                            <el-icon><Calendar /></el-icon>
+                            <span>{{ formatBootTime(hostInfo.bootTime) }}</span>
+                        </div>
+                    </el-descriptions-item>
+                    <el-descriptions-item label="进程数">
+                        <div class="info-item-with-icon">
+                            <el-icon><Cpu /></el-icon>
+                            <span>{{ hostInfo.procs || 0 }}</span>
+                        </div>
+                    </el-descriptions-item>
+                    <el-descriptions-item label="客户端版本">
+                        <div class="info-item-with-icon">
+                            <el-icon><Box /></el-icon>
+                            <el-tag type="success" size="small">{{ hostInfo.client_version || '-' }}</el-tag>
+                        </div>
+                    </el-descriptions-item>
+                </el-descriptions>
+            </el-tab-pane>
+            
+            <!-- 系统信息标签页 -->
+            <el-tab-pane label="系统信息" name="system">
+                <el-descriptions :column="2" border class="host-info-descriptions">
+                    <el-descriptions-item label="操作系统">
+                        <el-tag type="primary" size="small">{{ hostInfo.os || '-' }}</el-tag>
+                    </el-descriptions-item>
+                    <el-descriptions-item label="平台">
+                        {{ hostInfo.platform || '-' }}
+                    </el-descriptions-item>
+                    <el-descriptions-item label="平台家族">
+                        {{ hostInfo.platformFamily || '-' }}
+                    </el-descriptions-item>
+                    <el-descriptions-item label="平台版本">
+                        {{ hostInfo.platformVersion || '-' }}
+                    </el-descriptions-item>
+                    <el-descriptions-item label="内核版本">
+                        {{ hostInfo.kernelVersion || '-' }}
+                    </el-descriptions-item>
+                    <el-descriptions-item label="内核架构">
+                        <el-tag type="warning" size="small">{{ hostInfo.kernelArch || '-' }}</el-tag>
+                    </el-descriptions-item>
+                </el-descriptions>
+            </el-tab-pane>
+            
+            <!-- 虚拟化信息标签页 -->
+            <el-tab-pane label="虚拟化信息" name="virtualization">
+                <el-descriptions :column="2" border class="host-info-descriptions">
+                    <el-descriptions-item label="虚拟化系统">
+                        <div class="info-item-with-icon">
+                            <el-icon><Cloud /></el-icon>
+                            <span>{{ hostInfo.virtualizationSystem || '无' }}</span>
+                        </div>
+                    </el-descriptions-item>
+                    <el-descriptions-item label="虚拟化角色">
+                        <div class="info-item-with-icon">
+                            <el-icon><InfoFilled /></el-icon>
+                            <span>{{ hostInfo.virtualizationRole || '物理机' }}</span>
+                        </div>
+                    </el-descriptions-item>
+                </el-descriptions>
+            </el-tab-pane>
+        </el-tabs>
+        
         <template #footer>
-            <el-button type="primary" @click="show_host_info = false">确定</el-button>
+            <el-button type="primary" @click="show_host_info = false">关闭</el-button>
         </template>
-        <el-form :model="hostInfo" :rules="rules" ref="hostInfoForm" label-width="120px">
-            <el-form-item label="主机名" prop="hostname">
-                <el-input v-model="hostInfo.hostname" placeholder="请输入主机名" />
-            </el-form-item>
-        </el-form>
-        <el-form-item label="操作系统" prop="os">
-            <el-input v-model="hostInfo.os" placeholder="请输入操作系统" />
-        </el-form-item>
-        <el-form-item label="平台" prop="platform">
-            <el-input v-model="hostInfo.platform" placeholder="请输入平台" />
-        </el-form-item>
-        <el-form-item label="平台家族" prop="platformFamily">
-            <el-input v-model="hostInfo.platformFamily" placeholder="请输入平台家族" />
-        </el-form-item>
-        <el-form-item label="平台版本" prop="platformVersion">
-            <el-input v-model="hostInfo.platformVersion" placeholder="请输入平台版本" />
-        </el-form-item>
-        <el-form-item label="内核版本" prop="kernelVersion">
-            <el-input v-model="hostInfo.kernelVersion" placeholder="请输入内核版本" />
-        </el-form-item>
-        <el-form-item label="内核架构" prop="kernelArch">
-            <el-input v-model="hostInfo.kernelArch" placeholder="请输入内核架构" />
-        </el-form-item>
-        <el-form-item label="虚拟化系统" prop="virtualizationSystem">
-            <el-input v-model="hostInfo.virtualizationSystem" placeholder="请输入虚拟化系统" />
-        </el-form-item>
-        <el-form-item label="虚拟化角色" prop="virtualizationRole">
-            <el-input v-model="hostInfo.virtualizationRole" placeholder="请输入虚拟化角色" />
-        </el-form-item>
-        <el-form-item label="主机ID" prop="hostId">
-            <el-input v-model="hostInfo.hostId" placeholder="请输入主机ID" />
-        </el-form-item>
-        <el-form-item label="客户端版本" prop="client_version">
-            <el-input v-model="hostInfo.client_version" placeholder="请输入客户端版本" />
-        </el-form-item>
     </el-dialog>
 </template>
 
@@ -125,68 +194,17 @@ import { ref, reactive, onMounted, onUnmounted } from 'vue';
 import { ElMessage } from 'element-plus';
 import { GetVPNServerConfigHandler, GetVPNServerOnlineListHandler,GetServerOnlineUsers,KickOutOnlineUser } from '@/api/vpn';
 import { on } from 'events';
-
+import { VPNStatus, OnlineUserInfo, OnlineUserInfoList, ServerConfig, HostInfo } from '@/types/vpn';
-interface ServerConfig {
+import { Monitor, Cpu, Timer, Calendar, Box, InfoFilled } from '@element-plus/icons-vue';
-    name: string;
-    server_id: string;
-    server_ip: string;
-    server_ipv6: string;
-    server_ip_type: number;
-    server_info: string;
-    udp_port: number;
-    tcp_port: number;
-    protocol: number;
-    ip_type: number;
-    ipv4_address_pool: string;
-    ipv6_address_pool: string;
-    dns_server: string;
-    tunnel: string;
-    allow_user_id: any[];
-    encryption: string;
-    hash: string;
-    no_policy_action:number;
-    user_max_device: number;
-    duration_time: number;
-    ipv4_router: any[];
-    ipv6_router: any[];
-}
-
-interface OnlineUserInfo {
-    id: number;
-    user_id: number;
-    user_name: string;
-    private_ipv4: string;
-    private_ipv6: string;
-    vpn_dp_secret: string;
-    uuid: string;
-    last_update_time: number;
-    host_info: HostInfo;
-}
-
-interface HostInfo {
-  hostname: string;
-  uptime: number;
-  bootTime: number;
-  procs: number;
-  os: string;
-  platform: string;
-  platformFamily: string;
-  platformVersion: string;
-  kernelVersion: string;
-  kernelArch: string;
-  virtualizationSystem: string;
-  virtualizationRole: string;
-  hostId: string;
-  client_version: string;
-}
 
 const serverList = ref<ServerConfig[]>([]);
 const selectedServer = ref<ServerConfig | null>(null);
-const onlineUsers = ref<OnlineUserInfo[]>([]);
+const onlineUsers = ref<OnlineUserInfoList[]>([]);
 const onlineServers = ref<string[]>([]);
 const loading = ref(false);
 const show_host_info = ref(false);
 const hostInfo = ref<HostInfo>({} as HostInfo);
+const activeHostInfoTab = ref('basic');
 const rules = ref({});
 let timer: number | null = null;
 let timer2: number | null = null;
@@ -202,9 +220,44 @@ const getServerConfigs = async () => {
     }
 };
 
-const showHostInfo = (user:OnlineUserInfo) =>{
+const showHostInfo = (user:OnlineUserInfoList) =>{
     show_host_info.value = true;
     hostInfo.value = user.host_info;
+    activeHostInfoTab.value = 'basic';
+    console.log(user);
+}
+
+// 格式化运行时间
+const formatUptime = (uptime: number): string => {
+    if (!uptime || uptime <= 0) return '-';
+    
+    const days = Math.floor(uptime / (24 * 60 * 60));
+    const hours = Math.floor((uptime % (24 * 60 * 60)) / (60 * 60));
+    const minutes = Math.floor((uptime % (60 * 60)) / 60);
+    const seconds = Math.floor(uptime % 60);
+    
+    const parts = [];
+    if (days > 0) parts.push(`${days}天`);
+    if (hours > 0) parts.push(`${hours}小时`);
+    if (minutes > 0) parts.push(`${minutes}分钟`);
+    if (seconds > 0 || parts.length === 0) parts.push(`${seconds}秒`);
+    
+    return parts.join(' ');
+}
+
+// 格式化启动时间
+const formatBootTime = (bootTime: number): string => {
+    if (!bootTime || bootTime <= 0) return '-';
+    
+    const date = new Date(bootTime * 1000);
+    return date.toLocaleString('zh-CN', {
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit',
+        hour: '2-digit',
+        minute: '2-digit',
+        second: '2-digit'
+    });
 }
 
 const KickOutAllOnlineUser = async() =>{
@@ -229,7 +282,7 @@ const KickOutAllOnlineUser = async() =>{
     }
 }
 
-const KickOutSomeUser = async(user:OnlineUserInfo) =>{
+const KickOutSomeUser = async(user:OnlineUserInfoList) =>{
     let req = {
         server_id: selectedServer.value.server_id,
         sessions: [{
@@ -450,4 +503,120 @@ onUnmounted(() => {
 .el-table {
     margin-top: 10px;
 }
+
+/* 主机信息对话框样式 */
+.host-info-dialog :deep(.el-dialog__body) {
+    padding-top: 16px;
+}
+
+.host-info-header {
+    display: flex;
+    align-items: center;
+    margin-bottom: 20px;
+    padding-bottom: 16px;
+    border-bottom: 1px solid #e4e7ed;
+}
+
+.host-info-icon {
+    font-size: 24px;
+    color: #409eff;
+    margin-right: 12px;
+}
+
+.host-info-title {
+    font-size: 18px;
+    font-weight: 600;
+    color: #303133;
+    margin-right: 12px;
+}
+
+.host-info-tabs {
+    margin-top: 8px;
+}
+
+.host-info-descriptions {
+    margin-top: 16px;
+}
+
+.host-info-descriptions :deep(.el-descriptions__label) {
+    font-weight: 500;
+    color: #606266;
+    width: 120px;
+}
+
+.host-info-descriptions :deep(.el-descriptions__content) {
+    color: #303133;
+    font-weight: 400;
+}
+
+.info-item-with-icon {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.info-item-with-icon .el-icon {
+    color: #909399;
+    font-size: 16px;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+    .host-info-dialog :deep(.el-dialog) {
+        width: 90% !important;
+        max-width: 90%;
+    }
+    
+    .host-info-descriptions :deep(.el-descriptions) {
+        --el-descriptions-table-border: none;
+    }
+    
+    .host-info-descriptions :deep(.el-descriptions__table) {
+        display: block;
+    }
+    
+    .host-info-descriptions :deep(.el-descriptions__row) {
+        display: block;
+        margin-bottom: 12px;
+        border-bottom: 1px solid #f0f0f0;
+        padding-bottom: 12px;
+    }
+    
+    .host-info-descriptions :deep(.el-descriptions__cell) {
+        display: block;
+        padding: 8px 0;
+        border: none;
+    }
+    
+    .host-info-descriptions :deep(.el-descriptions__label) {
+        display: block;
+        width: 100%;
+        margin-bottom: 4px;
+        font-weight: 600;
+        color: #409eff;
+    }
+    
+    .host-info-descriptions :deep(.el-descriptions__content) {
+        display: block;
+        width: 100%;
+    }
+}
+
+/* 动画效果 */
+.host-info-dialog :deep(.el-dialog) {
+    transition: all 0.3s ease;
+}
+
+.host-info-tabs :deep(.el-tabs__item) {
+    transition: all 0.2s ease;
+}
+
+.host-info-tabs :deep(.el-tabs__item:hover) {
+    color: #409eff;
+}
+
+.host-info-tabs :deep(.el-tabs__item.is-active) {
+    color: #409eff;
+    font-weight: 500;
+}
 </style>