408 lines
9.4 KiB
Vue
408 lines
9.4 KiB
Vue
<template>
|
|
<div class="pages online-users-page">
|
|
<!-- 统计卡片 -->
|
|
<div class="stats-cards">
|
|
<a-row :gutter="16">
|
|
<a-col :span="6">
|
|
<a-card>
|
|
<a-statistic title="在线用户总数" :value="onlineCount" :value-style="{ color: '#3f8600' }">
|
|
<template #prefix>
|
|
<UserOutlined style="font-size: 24px" />
|
|
</template>
|
|
</a-statistic>
|
|
</a-card>
|
|
</a-col>
|
|
<a-col :span="18">
|
|
<a-card>
|
|
<a-form layout="inline" :model="searchForm">
|
|
<a-form-item label="刷新间隔">
|
|
<a-select v-model:value="refreshInterval" style="width: 150px" @change="handleRefreshIntervalChange">
|
|
<a-select-option :value="0">不自动刷新</a-select-option>
|
|
<a-select-option :value="5000">5秒</a-select-option>
|
|
<a-select-option :value="10000">10秒</a-select-option>
|
|
<a-select-option :value="30000">30秒</a-select-option>
|
|
<a-select-option :value="60000">60秒</a-select-option>
|
|
</a-select>
|
|
</a-form-item>
|
|
<a-form-item>
|
|
<a-space>
|
|
<a-button type="primary" @click="handleRefresh" :loading="loading">
|
|
<template #icon><ReloadOutlined /></template>
|
|
刷新
|
|
</a-button>
|
|
<a-button @click="handleRefreshAllOffline">
|
|
<template #icon><StopOutlined /></template>
|
|
全部下线
|
|
</a-button>
|
|
</a-space>
|
|
</a-form-item>
|
|
</a-form>
|
|
</a-card>
|
|
</a-col>
|
|
</a-row>
|
|
</div>
|
|
|
|
<!-- 工具栏 -->
|
|
<div class="tool-bar">
|
|
<div class="left-panel">
|
|
<a-space>
|
|
<a-input v-model:value="searchForm.keyword" placeholder="用户名" allow-clear style="width: 200px" />
|
|
<a-button type="primary" @click="handleSearch">
|
|
<template #icon><SearchOutlined /></template>
|
|
搜索
|
|
</a-button>
|
|
<a-button @click="handleReset">
|
|
<template #icon><RedoOutlined /></template>
|
|
重置
|
|
</a-button>
|
|
</a-space>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 表格内容 -->
|
|
<div class="table-content">
|
|
<sc-table ref="tableRef" :columns="columns" :data-source="tableData" :loading="loading" :pagination="pagination" :row-key="rowKey" @refresh="refreshTable">
|
|
<template #status="{ record }">
|
|
<a-tag :color="record.is_online ? 'success' : 'default'">
|
|
{{ record.is_online ? '在线' : '离线' }}
|
|
</a-tag>
|
|
</template>
|
|
<template #lastActive="{ record }">
|
|
{{ formatDate(record.last_active_at) }}
|
|
</template>
|
|
<template #action="{ record }">
|
|
<a-space>
|
|
<a-button type="link" size="small" @click="handleViewSessions(record)"> 查看会话 </a-button>
|
|
<a-popconfirm title="确定强制该用户下线吗？" @confirm="handleOffline(record)">
|
|
<a-button type="link" size="small" danger> 强制下线 </a-button>
|
|
</a-popconfirm>
|
|
<a-button type="link" size="small" danger @click="handleOfflineAll(record)"> 全部下线 </a-button>
|
|
</a-space>
|
|
</template>
|
|
</sc-table>
|
|
</div>
|
|
|
|
<!-- 会话详情弹窗 -->
|
|
<sessions-dialog v-if="dialog.sessions" ref="sessionsDialogRef" @success="handleSessionsSuccess" @closed="dialog.sessions = false" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, reactive, onMounted, onUnmounted } from 'vue'
|
|
import { message, Modal } from 'ant-design-vue'
|
|
import { UserOutlined, SearchOutlined, RedoOutlined, ReloadOutlined, StopOutlined } from '@ant-design/icons-vue'
|
|
import scTable from '@/components/scTable/index.vue'
|
|
import sessionsDialog from './sessions.vue'
|
|
import authApi from '@/api/auth'
|
|
|
|
defineOptions({
|
|
name: 'authOnlineUsers',
|
|
})
|
|
|
|
// 表格引用
|
|
const tableRef = ref(null)
|
|
|
|
// 搜索表单
|
|
const searchForm = reactive({
|
|
keyword: '',
|
|
})
|
|
|
|
// 表格数据
|
|
const tableData = ref([])
|
|
const loading = ref(false)
|
|
const pagination = reactive({
|
|
current: 1,
|
|
pageSize: 20,
|
|
total: 0,
|
|
showSizeChanger: true,
|
|
showQuickJumper: true,
|
|
showTotal: (total) => `共 ${total} 条`,
|
|
})
|
|
|
|
// 行key
|
|
const rowKey = 'id'
|
|
|
|
// 在线用户数量
|
|
const onlineCount = ref(0)
|
|
|
|
// 刷新定时器
|
|
const refreshInterval = ref(30000) // 默认30秒
|
|
let refreshTimer = null
|
|
|
|
// 对话框状态
|
|
const dialog = reactive({
|
|
sessions: false,
|
|
})
|
|
|
|
// 弹窗引用
|
|
const sessionsDialogRef = ref(null)
|
|
|
|
// 表格列配置
|
|
const columns = [
|
|
{
|
|
title: '#',
|
|
dataIndex: '_index',
|
|
key: '_index',
|
|
width: 60,
|
|
align: 'center',
|
|
},
|
|
{ title: '用户名', dataIndex: 'username', key: 'username', width: 150 },
|
|
{ title: '真实姓名', dataIndex: 'real_name', key: 'real_name', width: 150 },
|
|
{ title: '邮箱', dataIndex: 'email', key: 'email', width: 200 },
|
|
{ title: '手机号', dataIndex: 'phone', key: 'phone', width: 150 },
|
|
{
|
|
title: '状态',
|
|
dataIndex: 'status',
|
|
key: 'status',
|
|
width: 100,
|
|
align: 'center',
|
|
slot: 'status',
|
|
},
|
|
{
|
|
title: '最后活跃时间',
|
|
dataIndex: 'last_active_at',
|
|
key: 'last_active_at',
|
|
width: 180,
|
|
slot: 'lastActive',
|
|
},
|
|
{
|
|
title: '最后登录IP',
|
|
dataIndex: 'last_login_ip',
|
|
key: 'last_login_ip',
|
|
width: 150,
|
|
},
|
|
{
|
|
title: '操作',
|
|
dataIndex: 'action',
|
|
key: 'action',
|
|
width: 200,
|
|
align: 'center',
|
|
slot: 'action',
|
|
fixed: 'right',
|
|
},
|
|
]
|
|
|
|
// 加载在线用户数量
|
|
const loadOnlineCount = async () => {
|
|
try {
|
|
const res = await authApi.onlineUser.count.get()
|
|
if (res.code === 200) {
|
|
onlineCount.value = res.data || 0
|
|
}
|
|
} catch (error) {
|
|
console.error('获取在线用户数量失败:', error)
|
|
}
|
|
}
|
|
|
|
// 加载在线用户列表
|
|
const loadOnlineUsers = async () => {
|
|
try {
|
|
loading.value = true
|
|
const params = {
|
|
...searchForm,
|
|
limit: pagination.pageSize,
|
|
}
|
|
const res = await authApi.onlineUser.list.get(params)
|
|
loading.value = false
|
|
|
|
if (res.code === 200) {
|
|
// 添加序号
|
|
const list = res.data?.list || []
|
|
tableData.value = list.map((item, index) => ({
|
|
...item,
|
|
_index: (pagination.current - 1) * pagination.pageSize + index + 1,
|
|
}))
|
|
pagination.total = res.data?.total || 0
|
|
}
|
|
} catch (error) {
|
|
console.error('加载在线用户列表失败:', error)
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
// 刷新表格
|
|
const refreshTable = () => {
|
|
loadOnlineCount()
|
|
loadOnlineUsers()
|
|
}
|
|
|
|
// 搜索
|
|
const handleSearch = () => {
|
|
pagination.current = 1
|
|
refreshTable()
|
|
}
|
|
|
|
// 重置
|
|
const handleReset = () => {
|
|
searchForm.keyword = ''
|
|
pagination.current = 1
|
|
refreshTable()
|
|
}
|
|
|
|
// 刷新按钮
|
|
const handleRefresh = () => {
|
|
refreshTable()
|
|
message.success('刷新成功')
|
|
}
|
|
|
|
// 刷新间隔变化
|
|
const handleRefreshIntervalChange = (value) => {
|
|
clearRefreshTimer()
|
|
if (value > 0) {
|
|
startRefreshTimer(value)
|
|
}
|
|
}
|
|
|
|
// 启动刷新定时器
|
|
const startRefreshTimer = (interval) => {
|
|
refreshTimer = setInterval(() => {
|
|
refreshTable()
|
|
}, interval)
|
|
}
|
|
|
|
// 清除刷新定时器
|
|
const clearRefreshTimer = () => {
|
|
if (refreshTimer) {
|
|
clearInterval(refreshTimer)
|
|
refreshTimer = null
|
|
}
|
|
}
|
|
|
|
// 查看用户会话
|
|
const handleViewSessions = (record) => {
|
|
dialog.sessions = true
|
|
setTimeout(() => {
|
|
sessionsDialogRef.value?.open().setData(record)
|
|
}, 0)
|
|
}
|
|
|
|
// 强制用户下线（单个）
|
|
const handleOffline = async (record) => {
|
|
try {
|
|
const res = await authApi.onlineUser.offline.post(record.id, {})
|
|
if (res.code === 200) {
|
|
message.success('强制下线成功')
|
|
refreshTable()
|
|
} else {
|
|
message.error(res.message || '操作失败')
|
|
}
|
|
} catch (error) {
|
|
console.error('强制下线失败:', error)
|
|
message.error('操作失败')
|
|
}
|
|
}
|
|
|
|
// 强制用户所有设备下线
|
|
const handleOfflineAll = async (record) => {
|
|
try {
|
|
const res = await authApi.onlineUser.offlineAll.post(record.id)
|
|
if (res.code === 200) {
|
|
message.success('全部下线成功')
|
|
refreshTable()
|
|
} else {
|
|
message.error(res.message || '操作失败')
|
|
}
|
|
} catch (error) {
|
|
console.error('全部下线失败:', error)
|
|
message.error('操作失败')
|
|
}
|
|
}
|
|
|
|
// 全部下线
|
|
const handleRefreshAllOffline = () => {
|
|
Modal.confirm({
|
|
title: '确认操作',
|
|
content: '确定要强制所有在线用户下线吗？',
|
|
okText: '确定',
|
|
cancelText: '取消',
|
|
okType: 'danger',
|
|
onOk: async () => {
|
|
try {
|
|
// 这里需要遍历所有在线用户并下线
|
|
const onlineUsers = tableData.value.filter((user) => user.is_online)
|
|
for (const user of onlineUsers) {
|
|
await authApi.onlineUser.offlineAll.post(user.id)
|
|
}
|
|
message.success('全部下线成功')
|
|
refreshTable()
|
|
} catch (error) {
|
|
console.error('全部下线失败:', error)
|
|
message.error('操作失败')
|
|
}
|
|
},
|
|
})
|
|
}
|
|
|
|
// 会话操作成功回调
|
|
const handleSessionsSuccess = () => {
|
|
refreshTable()
|
|
}
|
|
|
|
// 格式化日期
|
|
const formatDate = (date) => {
|
|
if (!date) return '-'
|
|
const d = new Date(date)
|
|
return d.toLocaleString('zh-CN', {
|
|
year: 'numeric',
|
|
month: '2-digit',
|
|
day: '2-digit',
|
|
hour: '2-digit',
|
|
minute: '2-digit',
|
|
second: '2-digit',
|
|
})
|
|
}
|
|
|
|
// 初始化
|
|
onMounted(() => {
|
|
refreshTable()
|
|
// 启动自动刷新
|
|
if (refreshInterval.value > 0) {
|
|
startRefreshTimer(refreshInterval.value)
|
|
}
|
|
})
|
|
|
|
// 组件卸载时清除定时器
|
|
onUnmounted(() => {
|
|
clearRefreshTimer()
|
|
})
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.online-users-page {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
padding: 0;
|
|
|
|
.stats-cards {
|
|
margin-bottom: 16px;
|
|
|
|
:deep(.ant-card) {
|
|
border-radius: 4px;
|
|
}
|
|
|
|
:deep(.ant-statistic-title) {
|
|
font-size: 14px;
|
|
color: #8c8c8c;
|
|
}
|
|
|
|
:deep(.ant-statistic-content) {
|
|
font-size: 24px;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
|
|
.tool-bar {
|
|
padding: 16px 24px;
|
|
background: #fff;
|
|
border-bottom: 1px solid #f0f0f0;
|
|
}
|
|
|
|
.table-content {
|
|
flex: 1;
|
|
overflow: hidden;
|
|
background: #f5f5f5;
|
|
}
|
|
}
|
|
</style>
|