opsx-vpn/frontend/src/views/Sessions.vue

<template>
  <div>
    <!-- 在线会话 -->
    <el-card class="page-card" shadow="never" style="margin-bottom:16px">
      <template #header>
        <div class="row-between">
          <div>
            <b>在线会话</b>
            <el-tag size="small" type="success" style="margin-left:8px">{{ sessions.length }} 个在线</el-tag>
          </div>
          <el-button link @click="load">刷新</el-button>
        </div>
      </template>
      <el-table :data="sessions" size="default" v-loading="loading">
        <el-table-column prop="username" label="用户名" min-width="120" />
        <el-table-column label="协议" width="100">
          <template #default="{ row }">
            <span class="protocol-tag" :style="{ color: protocolColor(row.protocol) }">{{ protocolDisplay(row.protocol) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="real_address" label="公网地址" min-width="140" />
        <el-table-column prop="virtual_address" label="VPN IP" min-width="120" />
        <el-table-column label="已连接时长" width="120">
          <template #default="{ row }">{{ fmtDuration(row.connected_at) }}</template>
        </el-table-column>
        <el-table-column label="流量 ↓ / ↑" width="140">
          <template #default="{ row }">
            <span style="font-size:12px">{{ fmtBytes(row.rx_bytes) }} / {{ fmtBytes(row.tx_bytes) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100">
          <template #default="{ row }">
            <el-button type="danger" size="small" link @click="disconnect(row)">踢下线</el-button>
          </template>
        </el-table-column>
        <template #empty><el-empty description="当前无在线用户" /></template>
      </el-table>
    </el-card>

    <!-- 异常流量告警 -->
    <el-card class="page-card" shadow="never" style="margin-bottom:16px" v-if="alerts.length">
      <template #header><b style="color:var(--color-danger)">⚠ 异常流量告警</b></template>
      <el-table :data="alerts" size="small">
        <el-table-column prop="created_at" label="时间" width="170">
          <template #default="{ row }">{{ new Date(row.created_at).toLocaleString('zh-CN') }}</template>
        </el-table-column>
        <el-table-column prop="username" label="用户/隧道" width="100" />
        <el-table-column label="类型" width="100">
          <template #default="{ row }">
            <el-tag :type="row.event === 'rate_alert' ? 'warning' : 'danger'" size="small">
              {{ { rate_alert: '突发流量', quota_exceed: '配额超额' }[row.event] || row.event }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="detail" label="详情" show-overflow-tooltip />
      </el-table>
    </el-card>

    <!-- 连接审计日志 -->
    <el-card class="page-card" shadow="never">
      <template #header><b>连接审计日志</b></template>
      <el-table :data="logs" size="small" max-height="500">
        <el-table-column prop="created_at" label="时间" width="170">
          <template #default="{ row }">{{ new Date(row.created_at).toLocaleString('zh-CN') }}</template>
        </el-table-column>
        <el-table-column prop="username" label="用户" width="100" />
        <el-table-column label="事件" width="100">
          <template #default="{ row }">
            <el-tag :type="eventTagType(row.event)" size="small">{{ eventLabel(row.event) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="ip_address" label="IP 地址" width="140" />
        <el-table-column prop="detail" label="详情" show-overflow-tooltip />
      </el-table>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import api from '../api'
import { protocolColor, protocolDisplay } from '../protocols'

const sessions = ref([])
const logs = ref([])
const alerts = ref([])
const loading = ref(false)

function fmtBytes(n) {
  if (!n) return '0 B'
  const u = ['B', 'KB', 'MB', 'GB', 'TB']
  let i = 0
  while (n >= 1024 && i < 4) { n /= 1024; i++ }
  return n.toFixed(1) + ' ' + u[i]
}
function fmtDuration(t) {
  if (!t) return '-'
  const sec = Math.floor((Date.now() - new Date(t).getTime()) / 1000)
  if (sec < 60) return `${sec}秒`
  if (sec < 3600) return `${Math.floor(sec / 60)}分钟`
  return `${Math.floor(sec / 3600)}小时${Math.floor((sec % 3600) / 60)}分`
}
function eventLabel(e) {
  return { connect: '连接', disconnect: '断开', auth_fail: '认证失败', quota_exceed: '配额超额', rate_alert: '突发流量' }[e] || e
}
function eventTagType(e) {
  return { connect: 'success', disconnect: 'info', auth_fail: 'danger', quota_exceed: 'warning', rate_alert: 'warning' }[e] || 'info'
}

async function load() {
  loading.value = true
  try {
    const [s, l, a] = await Promise.all([
      api.get('/sessions'),
      api.get('/sessions/log'),
      api.get('/traffic/alerts'),
    ])
    sessions.value = s.data || []
    logs.value = l.data || []
    alerts.value = a.data || []
  } catch (e) {
    ElMessage.error('加载数据失败')
  } finally { loading.value = false }
}

async function disconnect(row) {
  try {
    await ElMessageBox.confirm(`确定踢用户「${row.username}」下线？`, '确认', { type: 'warning' })
    await api.post(`/sessions/${row.id}/disconnect`)
    ElMessage.success('已踢下线')
    load()
  } catch (e) { if (e !== 'cancel') ElMessage.error('操作失败') }
}

let timer
onMounted(() => { load(); timer = setInterval(load, 15000) })
onUnmounted(() => clearInterval(timer))
</script>