添加客户端配置

src/api/vpn.ts

@@ -105,6 +105,11 @@ export const LocalClientStatusHandler = () => {
     return local_request.get('/vpn/get_status')
 }
 
+// 设置客户端配置
+export const SetClientConfigHandler = (Data) => {
+    return local_request.post('/vpn/set_client', Data)
+}
+
 // VPN Policy Management APIs
 // myVPNPolicyGroup := router.Group("/vpn_policy")
 // myVPNPolicyGroup.GET("/get", GetMyVPNPolicyHandler)

src/router/index.ts

@@ -172,15 +172,6 @@ const routes: RouteRecordRaw[] = [
                     permiss: '755',
                 },
                 component: () => import(/* webpackChunkName: "system-user" */ '../views/system/vpn-server-online-user.vue'),
-            },
-             {
-                path: '/vpn-policy',
-                name: 'vpn-policy',
-                meta: {
-                    title: 'VPN策略',
-                    permiss: '756',
-                },
-                component: () => import(/* webpackChunkName: "system-user" */ '../views/system/vpn-policy.vue'),
             },
             {
                 path: '/vpn-status',
@@ -191,6 +182,15 @@ const routes: RouteRecordRaw[] = [
                 },
                 component: () => import(/* webpackChunkName: "system-user" */ '../views/system/vpn-server-status.vue'),
             },
+            {
+                path: '/vpn-policy',
+                name: 'vpn-policy',
+                meta: {
+                    title: 'VPN策略',
+                    permiss: '756',
+                },
+                component: () => import(/* webpackChunkName: "system-user" */ '../views/system/vpn-policy.vue'),
+            },
 
             {
                 path: '/callback',

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

@@ -190,18 +190,30 @@
     <el-dialog
       v-model="showClientConfigDialog"
       title="客户端配置"
-      width="800px"
+      width="500px"
       :before-close="handleClientConfigDialogClose"
     >
     <!-- 客户端配置内容 -->
-    <div class="client-options">
-      <el-switch
-        v-model="clientConfig.auto_reconnect"
-        active-color="#13ce66"
-        inactive-color="#ff4949"
-        active-text="自动重连"
-      />
+    <div class="client-options" style="padding: 20px 0;">
+      <el-form label-width="120px">
+        <el-form-item label="自动重连">
+          <el-switch
+            v-model="clientConfig.auto_reconnect"
+            active-color="#13ce66"
+            inactive-color="#ff4949"
+            active-text="开启"
+            inactive-text="关闭"
+          />
+          <div style="margin-top: 8px; color: #909399; font-size: 13px;">
+            开启后，当VPN连接意外断开时，客户端将自动尝试重新连接
+          </div>
+        </el-form-item>
+      </el-form>
     </div>
+    <template #footer>
+      <el-button @click="handleClientConfigDialogClose">取消</el-button>
+      <el-button type="primary" @click="saveClientConfig" :loading="savingConfig">保存配置</el-button>
+    </template>
     </el-dialog>
   </div>
 </template>
@@ -210,7 +222,7 @@
 import { ref, onMounted, onUnmounted } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { Download, Monitor, Connection } from '@element-plus/icons-vue'
-import { GetSurppotVPNServerOnlineListHandler, LocalClientConnectHandler, LocalClientStatusHandler,LocalClientDisConnectHandler,GetClientDownloadURLHandler } from '@/api/vpn'
+import { GetSurppotVPNServerOnlineListHandler, LocalClientConnectHandler, LocalClientStatusHandler,LocalClientDisConnectHandler,GetClientDownloadURLHandler, SetClientConfigHandler } from '@/api/vpn'
 
 interface ServerInfo {
   /** 服务器名称 */
@@ -260,6 +272,7 @@ const onlineInfoData = ref({
 const clientConfig = ref({
   auto_reconnect: false,
 })
+const savingConfig = ref(false)
 
 // 格式化字节数显示
 const formatBytes = (bytes: number): string => {
@@ -281,6 +294,28 @@ const handleClientConfigDialogClose = () => {
   showClientConfigDialog.value = false
 }
 
+const saveClientConfig = async () => {
+  savingConfig.value = true
+  try {
+    const requestData = {
+      auto_reconnect: clientConfig.value.auto_reconnect ? 1 : 0
+    }
+    
+    const response = await SetClientConfigHandler(requestData)
+    if (response && response["code"] === 0) {
+      ElMessage.success('客户端配置保存成功')
+      showClientConfigDialog.value = false
+    } else {
+      ElMessage.error(response["message"] || '配置保存失败')
+    }
+  } catch (error) {
+    console.error('保存客户端配置错误:', error)
+    ElMessage.error('保存失败，请稍后重试')
+  } finally {
+    savingConfig.value = false
+  }
+}
+
 // 刷新在线信息
 const refreshOnlineInfo = async () => {
   onlineInfoLoading.value = true