diff --git a/src/api/vpn.ts b/src/api/vpn.ts
index 3be4389..f08b0b3 100644
--- a/src/api/vpn.ts
+++ b/src/api/vpn.ts
@@ -163,4 +163,20 @@ export const DeleteMyVPNPolicyHandler = (data) => {
 
 export const MatchVPNPolicyHandler = (data) => {
 	return request.post('/vpn_policy/match', data)
+}
+
+/**
+ * 获取VPN日志
+ * @param {Object} params 查询参数
+ * @param {number} params.page 页码
+ * @param {number} params.page_size 每页数量
+ * @param {string} params.user_id 用户ID
+ * @param {string} params.server_id 服务器ID
+ * @param {string} params.event_type 事件类型
+ * @param {string} params.start_time 开始时间
+ * @param {string} params.end_time 结束时间
+ * @returns {Promise} 包含VPN日志的Promise对象
+ */
+export const GetVPNLogsHandler = (params) => {
+    return request.get('/vpn/get_vpn_logs', { params })
 }
\ No newline at end of file
diff --git a/src/components/menu.ts b/src/components/menu.ts
index a8c4085..34b9ff8 100644
--- a/src/components/menu.ts
+++ b/src/components/menu.ts
@@ -115,6 +115,12 @@ export const menuData: Menus[] = [
                 index: '/vpn-status',
                 title: 'VPN服务器状态',
             },
+            {
+                id: '758',
+                pid: '75',
+                index: '/vpn-logs',
+                title: 'VPN连接日志',
+            },
         ],
     },
     {
diff --git a/src/router/index.ts b/src/router/index.ts
index 4ff5755..76d145c 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -191,6 +191,15 @@ const routes: RouteRecordRaw[] = [
                 },
                 component: () => import(/* webpackChunkName: "system-user" */ '../views/system/vpn-policy.vue'),
             },
+            {
+                path: '/vpn-logs',
+                name: 'vpn-logs',
+                meta: {
+                    title: 'VPN连接日志',
+                    permiss: '758',
+                },
+                component: () => import(/* webpackChunkName: "system-user" */ '../views/system/vpn-logs.vue'),
+            },
 
             {
                 path: '/callback',
diff --git a/src/store/permiss.ts b/src/store/permiss.ts
index 5d048e4..a3b3b24 100644
--- a/src/store/permiss.ts
+++ b/src/store/permiss.ts
@@ -68,6 +68,7 @@ export const usePermissStore = defineStore("permiss", {
           "755", //VPN在线用户连接
           "756", //VPN策略
           "757", //VPN服务器状态
+          "758", //VPN连接日志
         ],
         user: ["0", "8", "7", "9",  "51" ,"53","55" ,"56", "57", "58", "59", "61", "71", "754"],
       },
diff --git a/src/types/vpn.ts b/src/types/vpn.ts
index a308b06..7ba5c7d 100644
--- a/src/types/vpn.ts
+++ b/src/types/vpn.ts
@@ -82,4 +82,26 @@ export interface HostInfo {
   virtualizationRole: string;
   hostId: string;
   client_version: string;
+}
+
+export interface VPNLogItem {
+  ID: number;
+  CreatedAt: string;
+  UpdatedAt: string;
+  DeletedAt: any;
+  user_id: number;
+  user_name: string;
+  host_id: string;
+  server_id: string;
+  session_id: string;
+  client_ip: string;
+  private_ip: string;
+  event: number;
+}
+
+export interface VPNLogsResponse {
+  total: number;
+  page: number;
+  page_size: number;
+  list: VPNLogItem[];
 }
\ No newline at end of file
diff --git a/src/views/system/sqlEditor.vue b/src/views/system/sqlEditor.vue
index 0df46dc..bbc3a4f 100644
--- a/src/views/system/sqlEditor.vue
+++ b/src/views/system/sqlEditor.vue
@@ -8,12 +8,12 @@
     :tab-size="2"
     :extensions="extensions"
     @keydown="handleKeydown"
-    @update:value="handleChange"
+    @update:modelValue="handleChange"
   />
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch } from 'vue';
+import { ref, watch } from 'vue';
 import { Codemirror } from 'vue-codemirror';
 import { sql, MySQL } from '@codemirror/lang-sql';
 import { keymap } from '@codemirror/view';
diff --git a/src/views/system/vpn-logs.vue b/src/views/system/vpn-logs.vue
new file mode 100644
index 0000000..5e0839c
--- /dev/null
+++ b/src/views/system/vpn-logs.vue
@@ -0,0 +1,280 @@
+<template>
+    <div class="vpn-logs">
+        <el-row :gutter="20">
+            <el-col :span="6">
+                <el-card shadow="hover">
+                    <template #header>
+                        <div class="card-header">
+                            <span>服务器列表</span>
+                        </div>
+                    </template>
+                    <div class="server-list">
+                        <div
+                            v-for="server in serverList"
+                            :key="server.server_id"
+                            class="server-item"
+                            :class="{ active: selectedServer === server.server_id }"
+                            @click="selectServer(server)"
+                        >
+                            <div class="server-info">
+                                <div class="server-name">
+                                    {{ server.name }}
+                                </div>
+                                <div class="server-id">{{ server.server_id }}</div>
+                            </div>
+                        </div>
+                        <div class="server-item" :class="{ active: selectedServer === '' }" @click="selectAllServers">
+                            <div class="server-info">
+                                <div class="server-name">全部服务器</div>
+                            </div>
+                        </div>
+                        <el-empty v-if="serverList.length === 0" description="暂无服务器" />
+                    </div>
+                </el-card>
+            </el-col>
+
+            <el-col :span="18">
+                <el-card shadow="hover">
+                    <template #header>
+                        <div class="card-header">
+                            <span>VPN连接日志</span>
+                        </div>
+                    </template>
+
+                    <!-- 搜索筛选 -->
+                    <el-form :inline="true" :model="queryParams" class="search-form">
+                        <el-form-item label="用户ID">
+                            <el-input v-model="queryParams.user_id" placeholder="请输入用户ID" clearable @keyup.enter="handleQuery" />
+                        </el-form-item>
+                        <el-form-item label="事件类型">
+                            <el-select v-model="queryParams.event_type" placeholder="请选择事件类型" clearable @change="handleQuery">
+                                <el-option label="登录" :value="1" />
+                                <el-option label="登出" :value="2" />
+                                <el-option label="踢出" :value="3" />
+                                <el-option label="心跳" :value="4" />
+                            </el-select>
+                        </el-form-item>
+                        <el-form-item label="开始时间">
+                            <el-date-picker
+                                v-model="queryParams.start_time"
+                                type="datetime"
+                                placeholder="选择开始时间"
+                                format="YYYY-MM-DD HH:mm:ss"
+                                value-format="YYYY-MM-DD HH:mm:ss"
+                                @change="handleQuery"
+                            />
+                        </el-form-item>
+                        <el-form-item label="结束时间">
+                            <el-date-picker
+                                v-model="queryParams.end_time"
+                                type="datetime"
+                                placeholder="选择结束时间"
+                                format="YYYY-MM-DD HH:mm:ss"
+                                value-format="YYYY-MM-DD HH:mm:ss"
+                                @change="handleQuery"
+                            />
+                        </el-form-item>
+                        <el-form-item>
+                            <el-button type="primary" @click="handleQuery">搜索</el-button>
+                            <el-button @click="resetQuery">重置</el-button>
+                        </el-form-item>
+                    </el-form>
+
+                    <!-- 日志表格 -->
+                    <el-table :data="logList" stripe style="width: 100%" v-loading="loading">
+                        <el-table-column prop="ID" label="日志ID" width="80" />
+                        <el-table-column prop="user_id" label="用户ID" width="100" />
+                        <el-table-column prop="user_name" label="用户名" width="120" />
+                        <el-table-column prop="server_id" label="服务器ID" min-width="200" show-overflow-tooltip />
+                        <el-table-column prop="private_ip" label="私有IP" width="140" />
+                        <el-table-column prop="client_ip" label="客户端IP" width="140" />
+                        <el-table-column prop="session_id" label="会话ID" min-width="200" show-overflow-tooltip />
+                        <el-table-column prop="host_id" label="主机ID" min-width="150" show-overflow-tooltip />
+                        <el-table-column label="事件类型" width="100">
+                            <template #default="{ row }">
+                                <el-tag :type="getEventTypeTag(row.event)">
+                                    {{ getEventTypeText(row.event) }}
+                                </el-tag>
+                            </template>
+                        </el-table-column>
+                        <el-table-column prop="CreatedAt" label="创建时间" width="180" />
+                    </el-table>
+
+                    <!-- 分页 -->
+                    <el-pagination
+                        v-model:current-page="queryParams.page"
+                        v-model:page-size="queryParams.page_size"
+                        :page-sizes="[10, 20, 50, 100]"
+                        :total="total"
+                        layout="total, sizes, prev, pager, next, jumper"
+                        @size-change="handleQuery"
+                        @current-change="handleQuery"
+                        class="pagination"
+                    />
+                </el-card>
+            </el-col>
+        </el-row>
+    </div>
+</template>
+
+<script setup lang="ts" name="vpn-logs">
+import { ref, reactive, onMounted } from 'vue';
+import { ElMessage } from 'element-plus';
+import { GetVPNLogsHandler, GetVPNServerConfigHandler } from '@/api/vpn';
+import { VPNLogItem, ServerConfig } from '@/types/vpn';
+
+const loading = ref(false);
+const logList = ref<VPNLogItem[]>([]);
+const serverList = ref<ServerConfig[]>([]);
+const total = ref(0);
+const selectedServer = ref('');
+
+const queryParams = reactive({
+    page: 1,
+    page_size: 20,
+    user_id: '',
+    server_id: '',
+    event_type: '',
+    start_time: '',
+    end_time: ''
+});
+
+const getEventTypeText = (eventType: number): string => {
+    const map: { [key: number]: string } = {
+        1: '登录',
+        2: '登出',
+        3: '踢出',
+        4: '心跳'
+    };
+    return map[eventType] || '未知';
+};
+
+const getEventTypeTag = (eventType: number): string => {
+    const map: { [key: number]: string } = {
+        1: 'success',
+        2: 'info',
+        3: 'danger',
+        4: ''
+    };
+    return map[eventType] || '';
+};
+
+const getServerConfig = async () => {
+    try {
+        const response = await GetVPNServerConfigHandler();
+        serverList.value = response.data || [];
+    } catch (error) {
+        console.error('获取服务器配置失败:', error);
+    }
+};
+
+const getVPNLogs = async () => {
+    loading.value = true;
+    try {
+        const response = await GetVPNLogsHandler(queryParams);
+        if (response.data) {
+            logList.value = response.data.list || [];
+            total.value = response.data.total || 0;
+        }
+    } catch (error) {
+        ElMessage.error('获取VPN日志失败');
+        console.error(error);
+    } finally {
+        loading.value = false;
+    }
+};
+
+const selectServer = (server: ServerConfig) => {
+    selectedServer.value = server.server_id;
+    queryParams.server_id = server.server_id;
+    handleQuery();
+};
+
+const selectAllServers = () => {
+    selectedServer.value = '';
+    queryParams.server_id = '';
+    handleQuery();
+};
+
+const handleQuery = () => {
+    queryParams.page = 1;
+    getVPNLogs();
+};
+
+const resetQuery = () => {
+    queryParams.page = 1;
+    queryParams.page_size = 20;
+    queryParams.user_id = '';
+    queryParams.server_id = selectedServer.value;
+    queryParams.event_type = '';
+    queryParams.start_time = '';
+    queryParams.end_time = '';
+    getVPNLogs();
+};
+
+onMounted(async () => {
+    await getServerConfig();
+    await getVPNLogs();
+});
+</script>
+
+<style scoped>
+.vpn-logs {
+    padding: 20px;
+}
+
+.card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.search-form {
+    margin-bottom: 20px;
+}
+
+.server-list {
+    max-height: 600px;
+    overflow-y: auto;
+}
+
+.server-item {
+    padding: 12px;
+    border: 1px solid #e4e7ed;
+    border-radius: 4px;
+    margin-bottom: 8px;
+    cursor: pointer;
+    transition: all 0.3s;
+}
+
+.server-item:hover {
+    border-color: #409eff;
+    background-color: #f5f7fa;
+}
+
+.server-item.active {
+    border-color: #409eff;
+    background-color: #ecf5ff;
+}
+
+.server-info {
+    display: flex;
+    flex-direction: column;
+}
+
+.server-name {
+    font-weight: 500;
+}
+
+.server-id {
+    font-size: 12px;
+    color: #909399;
+    margin-top: 4px;
+}
+
+.pagination {
+    margin-top: 20px;
+    display: flex;
+    justify-content: flex-end;
+}
+</style>