添加终端信息查看

src/views/system/vpn-online-connect.vue

@@ -3,6 +3,10 @@
     <!-- 页面标题和下载客户端按钮 -->
     <div class="page-header">
       <h1>VPN在线连接</h1>
+      <el-button type="primary" @click="showClientConfigDialog = true">
+        <el-icon><Setting /></el-icon>
+        客户端配置
+      </el-button>
       <el-button type="primary" @click="showDownloadDialog = true">
         <el-icon><Download /></el-icon>
         下载客户端
@@ -136,6 +140,8 @@
               <el-descriptions-item label="连接时间" v-if="onlineInfoData.connect_status">
                 {{ onlineInfoData.connect_status.connect_time }}
               </el-descriptions-item>
+              <el-descriptions-item label="客户端版本">{{ onlineInfoData.version }}</el-descriptions-item>
+              <el-descriptions-item label="服务器心跳">{{ onlineInfoData.heartbeat }}</el-descriptions-item>
             </el-descriptions>
           </el-tab-pane>
           
@@ -180,6 +186,23 @@
         <el-button type="primary" @click="refreshOnlineInfo">刷新</el-button>
       </template>
     </el-dialog>
+
+    <el-dialog
+      v-model="showClientConfigDialog"
+      title="客户端配置"
+      width="800px"
+      :before-close="handleClientConfigDialogClose"
+    >
+    <!-- 客户端配置内容 -->
+    <div class="client-options">
+      <el-switch
+        v-model="clientConfig.auto_reconnect"
+        active-color="#13ce66"
+        inactive-color="#ff4949"
+        active-text="自动重连"
+      />
+    </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -218,6 +241,7 @@ const loading = ref(false)
 const connectingServers = ref<(string | number)[]>([])
 const clientIsConnectServerID = ref('')
 const showDownloadDialog = ref(false)
+const showClientConfigDialog = ref(false)
 let statusTimerId: ReturnType<typeof setInterval> | null = null
 let serverListTimerId: ReturnType<typeof setInterval> | null = null
 const clientUrls = ref<ClientUrl[]>([])
@@ -226,8 +250,15 @@ const onlineInfoLoading = ref(false)
 const activeOnlineInfoTab = ref('basic')
 const onlineInfoData = ref({
   online_info: null,
+  auto_reconnect: 0,
   connect_status: null,
-  status: 0
+  status: 0,
+  version: '',
+  heartbeat: 0,
+})
+
+const clientConfig = ref({
+  auto_reconnect: false,
 })
 
 // 格式化字节数显示
@@ -246,6 +277,10 @@ const showOnlineInfo = async (server: ServerInfo) => {
   await refreshOnlineInfo()
 }
 
+const handleClientConfigDialogClose = () => {
+  showClientConfigDialog.value = false
+}
+
 // 刷新在线信息
 const refreshOnlineInfo = async () => {
   onlineInfoLoading.value = true
@@ -276,7 +311,8 @@ const LocalClientStatus = async () => {
     if (data && data["status"] == 2001) {
       clientIsConnectServerID.value = data["online_info"]["server_id"]
       onlineInfoData.value = data || {}
-      console.log('clientIsConnectServerID:', clientIsConnectServerID.value)
+      clientConfig.value.auto_reconnect = onlineInfoData.value.auto_reconnect === 1 ? true : false
+
     }else{
       clientIsConnectServerID.value = ''
     }

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

@@ -54,12 +54,9 @@
                         <el-table-column prop="id" label="密钥ID" width="120" />
                         <el-table-column prop="user_name" label="用户名" width="120" />
                         <el-table-column prop="private_ipv4" label="内网IPv4" width="140" />
-                        <el-table-column prop="private_ipv6" label="内网IPv6" width="180">
-                            <template #default="scope">
-                                {{ scope.row.private_ipv6 || '-' }}
-                            </template>
-                        </el-table-column>
                         <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="last_update_time" label="最后更新时间" width="180">
                             <template #default="scope">
                                 {{ formatTime(scope.row.last_update_time) }}
@@ -67,6 +64,7 @@
                         </el-table-column>
                         <el-table-column prop="last_update_time" label="操作" width="180" #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>
                     </el-table>
 
@@ -79,6 +77,47 @@
             </el-col>
         </el-row>
     </div>
+    <!-- 主机信息弹窗 -->
+    <el-dialog title="主机信息" :visible.sync="show_host_info" width="50%">
+        <template #footer>
+            <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>
 
 <script setup lang="ts">
@@ -121,6 +160,24 @@ interface OnlineUserInfo {
     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[]>([]);
@@ -128,6 +185,7 @@ const selectedServer = ref<ServerConfig | null>(null);
 const onlineUsers = ref<OnlineUserInfo[]>([]);
 const onlineServers = ref<string[]>([]);
 const loading = ref(false);
+const show_host_info = ref(false);
 let timer: number | null = null;
 let timer2: number | null = null;
 
@@ -142,6 +200,10 @@ const getServerConfigs = async () => {
     }
 };
 
+const showHostInfo = (user:OnlineUserInfo) =>{
+    show_host_info.value = true;
+}
+
 const KickOutAllOnlineUser = async() =>{
     let req = {
         server_id: selectedServer.value.server_id,
@@ -326,7 +388,7 @@ onUnmounted(() => {
 }
 
 .server-list {
-    max-height: 600px;
+    max-height: 400px;
     overflow-y: auto;
 }