修改客户端UI, 添加获取token

components.d.ts

@@ -8,6 +8,7 @@ export {}
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     Countup: typeof import('./src/components/countup.vue')['default']
+    ElAlert: typeof import('element-plus/es')['ElAlert']
     ElAvatar: typeof import('element-plus/es')['ElAvatar']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElCalendar: typeof import('element-plus/es')['ElCalendar']

src/api/user.ts

@@ -114,6 +114,19 @@ export const AdminDeleteUserRequestService  = (Data) => {
     })
 }
 
+export const GetUserTokenService  = (Data) => {
+    const params = new URLSearchParams();
+    for (let key in Data) {
+        params.append(key, Data[key])
+    }
+    let token = localStorage.getItem("token") || "";
+    return request.post('/user/gen_user_token', params,{
+        headers: {
+            'token': token,
+        }
+    })
+}
+
 
 export const UpdateUserCatalogueService  = (Data) => {
     const params = new URLSearchParams();

src/components/menu.ts

@@ -97,12 +97,6 @@ export const menuData: Menus[] = [
                 index: '/vpn-tunnel',
                 title: '隧道配置',
             },
-            {
-                id: '754',
-                pid: '75',
-                index: '/vpn-client',
-                title: 'VPN客户端UI',
-            }
         ],
     },
     {
@@ -270,6 +264,12 @@ export const menuData: Menus[] = [
         index: '/gen-prompt',
         title: '提示词生成',
     },
+    {
+        id: '754',
+        icon: 'Connection',
+        index: '/vpn-client',
+        title: 'VPN客户端UI',
+    },
     // {
     //     id: '57',
     //     icon: 'ChatDotSquare',

src/store/permiss.ts

@@ -66,7 +66,7 @@ export const usePermissStore = defineStore("permiss", {
           "753", //VPN隧道管理
           "754", //VPN客户端UI
         ],
-        user: ["0", "8", "7", "9",  "51" ,"53","55" ,"56", "57", "58", "59", "61", "71", "75", "754"],
+        user: ["0", "8", "7", "9",  "51" ,"53","55" ,"56", "57", "58", "59", "61", "71", "754"],
       },
     };
   },

src/views/system/user.vue

@@ -74,6 +74,9 @@
                     <el-button type="primary" link @click="append_group(data)" v-if="data.type != 0">
                     添加用户组
                     </el-button>
+                    <el-button type="primary" link @click="show_get_token_visible(data)" v-if="data.type == 0">
+                    获取token
+                    </el-button>
                     <el-button
                     style="margin-left: 4px"
                     type="danger"
@@ -90,6 +93,59 @@
 
 
         </el-dialog>
+
+        <el-dialog title="获取用户Token" v-model="getTokenVisible" width="500px" destroy-on-close
+            :close-on-click-modal="false" @close="closeTokenDialog">
+            <div>
+                <el-form :model="getTokenParams" label-width="120px">
+                    <el-form-item label="用户ID：">
+                        <el-input v-model="getTokenParams.user_id" disabled />
+                    </el-form-item>
+                    <el-form-item label="访问令牌有效期：">
+                        <el-input-number v-model="getTokenParams.expire_in" :min="60" :max="8640000" :step="60" />
+                        <span style="margin-left: 10px;">秒 (默认3600秒)</span>
+                    </el-form-item>
+                    <el-form-item label="刷新令牌有效期：">
+                        <el-input-number v-model="getTokenParams.refresh_expire_in" :min="300" :max="60480000" :step="300" />
+                        <span style="margin-left: 10px;">秒 (默认86400秒)</span>
+                    </el-form-item>
+                </el-form>
+                <el-row style="margin-top: 20px; text-align: center;">
+                    <el-button type="primary" @click="getTokenCode" :loading="tokenLoading">获取Token</el-button>
+                </el-row>
+                
+                <!-- Token结果显示区域 -->
+                <div v-if="tokenResult" style="margin-top: 20px;">
+                    <el-divider>获取结果</el-divider>
+                    <el-form :model="tokenResult" label-width="100px">
+                        <el-form-item label="访问Token：">
+                            <el-input 
+                                v-model="tokenResult.access_token" 
+                                type="textarea" 
+                                :rows="3" 
+                                readonly 
+                                style="font-family: monospace;"
+                            />
+                            <el-button type="text" @click="copyToClipboard(tokenResult.access_token)">复制</el-button>
+                        </el-form-item>
+                        <el-form-item label="刷新Token：">
+                            <el-input 
+                                v-model="tokenResult.refresh_token" 
+                                type="textarea" 
+                                :rows="2" 
+                                readonly 
+                                style="font-family: monospace;"
+                            />
+                            <el-button type="text" @click="copyToClipboard(tokenResult.refresh_token)">复制</el-button>
+                        </el-form-item>
+                    </el-form>
+                </div>
+                
+                <div v-if="tokenError" style="margin-top: 20px;">
+                    <el-alert :title="tokenError" type="error" show-icon />
+                </div>
+            </div>
+        </el-dialog>
     </div>
 </template>
 
@@ -99,7 +155,7 @@ import { ElMessage } from 'element-plus';
 import { CirclePlusFilled } from '@element-plus/icons-vue';
 import { UserInfo } from '@/types/user';
 import { fetchUserData } from '@/api';
-import { SearchUserService,AdminAddUserRequestService,UpdateUserCatalogueService,AdminDeleteUserRequestService,AdminAddUserGroupRequestService } from "@/api/user";
+import { SearchUserService,AdminAddUserRequestService,UpdateUserCatalogueService,AdminDeleteUserRequestService,AdminAddUserGroupRequestService,GetUserTokenService } from "@/api/user";
 import {GetUserInfoService} from "@/api/user";
 import {updateUserInfoService} from "@/api/user";
 import TableCustom from '@/components/table-custom.vue';
@@ -131,11 +187,77 @@ const query = reactive({
     name: '',
 });
 
+const getTokenVisible = ref(false);
+
+const getTokenParams = ref({
+    "expire_in": 3600,
+    "refresh_expire_in": 86400,
+    "user_id": 0,
+})
+
+const tokenLoading = ref(false)
+const tokenResult = ref(null)
+const tokenError = ref('')
+
+const getTokenCode = async () => {
+    tokenLoading.value = true
+    tokenError.value = ''
+    tokenResult.value = null
+    
+    try {
+        const response = await GetUserTokenService({
+            user_id: getTokenParams.value.user_id,
+            expire_in: getTokenParams.value.expire_in,
+            refresh_expire_in: getTokenParams.value.refresh_expire_in
+        })
+        
+        if (response["code"] === 0) {
+            tokenResult.value = response.data
+            ElMessage.success('获取Token成功')
+        } else {
+            tokenError.value = '获取失败: ' + response["message"]
+            ElMessage.error(tokenError.value)
+        }
+    } catch (error) {
+        console.error('获取Token失败:', error)
+        tokenError.value = '获取Token失败: ' + error.message
+        ElMessage.error(tokenError.value)
+    } finally {
+        tokenLoading.value = false
+    }
+}
+
+const copyToClipboard = async (text) => {
+    try {
+        await navigator.clipboard.writeText(text)
+        ElMessage.success('已复制到剪贴板')
+    } catch (err) {
+        console.error('复制失败:', err)
+        ElMessage.error('复制失败')
+    }
+}
+
+const closeTokenDialog = () => {
+    tokenResult.value = null
+    tokenError.value = ''
+    getTokenParams.value = {
+        "expire_in": 3600,
+        "refresh_expire_in": 86400,
+        "user_id": 0,
+    }
+}
+
 const showUserTreeVisibale = async () => {
     await GetAllDefaultUsers();
     visible_system.value = true;
 };
 
+const show_get_token_visible = (data) => {
+    currentNode.value = data;
+    getTokenVisible.value = true;
+    getTokenParams.value.user_id = data.id;
+};
+
 
 const updateUserCatalogue = async (data) => {
     try {

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

@@ -170,8 +170,11 @@ const connectToServer = async (server: VPNServer) => {
     
     if (response && response["code"] === 0) {
       ElMessage.success('VPN连接成功！')
+    } else if (response && response["code"] === 20){
+      //设置已在线
+      ElMessage.error(response["message"])
     } else {
-      ElMessage.error(response["message"] || 'VPN连接失败')
+        ElMessage.error(response["message"])
     }
   } catch (error) {
     if (error !== 'cancel') {