添加客户端版本及心跳信息及显示客户端配置

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 = ''
     }