molong/laravel_swoole
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

前端代码格式化

Browse Source
This commit is contained in:
龙渊
2026-02-19 11:46:27 +08:00
parent d310a29c03
commit f0f0763ceb
101 changed files with 8952 additions and 13203 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/admin/src/pages/auth/online-user/index.vue
+151 -222
View File
@@ -5,11 +5,7 @@
<a-row :gutter="16">
<a-col :span="6">
<a-card>
<a-statistic
title="在线用户总数"
:value="onlineCount"
:value-style="{ color: '#3f8600' }"
>
<a-statistic title="在线用户总数" :value="onlineCount" :value-style="{ color: '#3f8600' }">
<template #prefix>
<UserOutlined style="font-size: 24px" />
</template>
@@ -20,44 +16,22 @@
<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 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 type="primary" @click="handleRefresh" :loading="loading">
<template #icon><ReloadOutlined /></template>
刷新
</a-button>
<a-button @click="handleRefreshAllOffline">
<template #icon
><StopOutlined
/></template>
<template #icon><StopOutlined /></template>
全部下线
</a-button>
</a-space>
@@ -72,12 +46,7 @@
<div class="tool-bar">
<div class="left-panel">
<a-space>
<a-input
v-model:value="searchForm.keyword"
placeholder="用户名"
allow-clear
style="width: 200px"
/>
<a-input v-model:value="searchForm.keyword" placeholder="用户名" allow-clear style="width: 200px" />
<a-button type="primary" @click="handleSearch">
<template #icon><SearchOutlined /></template>
搜索
@@ -92,18 +61,10 @@
<!-- 表格内容 -->
<div class="table-content">
<sc-table
ref="tableRef"
:columns="columns"
:data-source="tableData"
:loading="loading"
:pagination="pagination"
:row-key="rowKey"
@refresh="refreshTable"
>
<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 ? "在线" : "离线" }}
{{ record.is_online ? '在线' : '离线' }}
</a-tag>
</template>
<template #lastActive="{ record }">
@@ -111,73 +72,44 @@
</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-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-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"
/>
<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";
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",
});
name: 'authOnlineUsers',
})
// 表格引用
const tableRef = ref(null);
const tableRef = ref(null)
// 搜索表单
const searchForm = reactive({
keyword: "",
});
keyword: '',
})
// 表格数据
const tableData = ref([]);
const loading = ref(false);
const tableData = ref([])
const loading = ref(false)
const pagination = reactive({
current: 1,
pageSize: 20,
@@ -185,257 +117,254 @@ const pagination = reactive({
showSizeChanger: true,
showQuickJumper: true,
showTotal: (total) => `共 ${total} 条`,
});
})
// 行key
const rowKey = "id";
const rowKey = 'id'
// 在线用户数量
const onlineCount = ref(0);
const onlineCount = ref(0)
// 刷新定时器
const refreshInterval = ref(30000); // 默认30秒
let refreshTimer = null;
const refreshInterval = ref(30000) // 默认30秒
let refreshTimer = null
// 对话框状态
const dialog = reactive({
sessions: false,
});
})
// 弹窗引用
const sessionsDialogRef = ref(null);
const sessionsDialogRef = ref(null)
// 表格列配置
const columns = [
{
title: "#",
dataIndex: "_index",
key: "_index",
title: '#',
dataIndex: '_index',
key: '_index',
width: 60,
align: "center",
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: '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",
title: '状态',
dataIndex: 'status',
key: 'status',
width: 100,
align: "center",
slot: "status",
align: 'center',
slot: 'status',
},
{
title: "最后活跃时间",
dataIndex: "last_active_at",
key: "last_active_at",
title: '最后活跃时间',
dataIndex: 'last_active_at',
key: 'last_active_at',
width: 180,
slot: "lastActive",
slot: 'lastActive',
},
{
title: "最后登录IP",
dataIndex: "last_login_ip",
key: "last_login_ip",
title: '最后登录IP',
dataIndex: 'last_login_ip',
key: 'last_login_ip',
width: 150,
},
{
title: "操作",
dataIndex: "action",
key: "action",
title: '操作',
dataIndex: 'action',
key: 'action',
width: 200,
align: "center",
slot: "action",
fixed: "right",
align: 'center',
slot: 'action',
fixed: 'right',
},
];
]
// 加载在线用户数量
const loadOnlineCount = async () => {
try {
const res = await authApi.onlineUsers.count.get();
const res = await authApi.onlineUser.count.get()
if (res.code === 200) {
onlineCount.value = res.data || 0;
onlineCount.value = res.data || 0
}
} catch (error) {
console.error("获取在线用户数量失败:", error);
console.error('获取在线用户数量失败:', error)
}
};
}
// 加载在线用户列表
const loadOnlineUsers = async () => {
try {
loading.value = true;
loading.value = true
const params = {
...searchForm,
limit: pagination.pageSize,
};
const res = await authApi.onlineUsers.list.get(params);
loading.value = false;
}
const res = await authApi.onlineUser.list.get(params)
loading.value = false
if (res.code === 200) {
// 添加序号
const list = res.data?.list || [];
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;
_index: (pagination.current - 1) * pagination.pageSize + index + 1,
}))
pagination.total = res.data?.total || 0
}
} catch (error) {
console.error("加载在线用户列表失败:", error);
loading.value = false;
console.error('加载在线用户列表失败:', error)
loading.value = false
}
};
}
// 刷新表格
const refreshTable = () => {
loadOnlineCount();
loadOnlineUsers();
};
loadOnlineCount()
loadOnlineUsers()
}
// 搜索
const handleSearch = () => {
pagination.current = 1;
refreshTable();
};
pagination.current = 1
refreshTable()
}
// 重置
const handleReset = () => {
searchForm.keyword = "";
pagination.current = 1;
refreshTable();
};
searchForm.keyword = ''
pagination.current = 1
refreshTable()
}
// 刷新按钮
const handleRefresh = () => {
refreshTable();
message.success("刷新成功");
};
refreshTable()
message.success('刷新成功')
}
// 刷新间隔变化
const handleRefreshIntervalChange = (value) => {
clearRefreshTimer();
clearRefreshTimer()
if (value > 0) {
startRefreshTimer(value);
startRefreshTimer(value)
}
};
}
// 启动刷新定时器
const startRefreshTimer = (interval) => {
refreshTimer = setInterval(() => {
refreshTable();
}, interval);
};
refreshTable()
}, interval)
}
// 清除刷新定时器
const clearRefreshTimer = () => {
if (refreshTimer) {
clearInterval(refreshTimer);
refreshTimer = null;
clearInterval(refreshTimer)
refreshTimer = null
}
};
}
// 查看用户会话
const handleViewSessions = (record) => {
dialog.sessions = true;
dialog.sessions = true
setTimeout(() => {
sessionsDialogRef.value?.open().setData(record);
}, 0);
};
sessionsDialogRef.value?.open().setData(record)
}, 0)
}
// 强制用户下线（单个）
const handleOffline = async (record) => {
try {
const res = await authApi.onlineUsers.offline.post(record.id, {});
const res = await authApi.onlineUser.offline.post(record.id, {})
if (res.code === 200) {
message.success("强制下线成功");
refreshTable();
message.success('强制下线成功')
refreshTable()
} else {
message.error(res.message || "操作失败");
message.error(res.message || '操作失败')
}
} catch (error) {
console.error("强制下线失败:", error);
message.error("操作失败");
console.error('强制下线失败:', error)
message.error('操作失败')
}
};
}
// 强制用户所有设备下线
const handleOfflineAll = async (record) => {
try {
const res = await authApi.onlineUsers.offlineAll.post(record.id);
const res = await authApi.onlineUser.offlineAll.post(record.id)
if (res.code === 200) {
message.success("全部下线成功");
refreshTable();
message.success('全部下线成功')
refreshTable()
} else {
message.error(res.message || "操作失败");
message.error(res.message || '操作失败')
}
} catch (error) {
console.error("全部下线失败:", error);
message.error("操作失败");
console.error('全部下线失败:', error)
message.error('操作失败')
}
};
}
// 全部下线
const handleRefreshAllOffline = () => {
Modal.confirm({
title: "确认操作",
content: "确定要强制所有在线用户下线吗？",
okText: "确定",
cancelText: "取消",
okType: "danger",
title: '确认操作',
content: '确定要强制所有在线用户下线吗？',
okText: '确定',
cancelText: '取消',
okType: 'danger',
onOk: async () => {
try {
// 这里需要遍历所有在线用户并下线
const onlineUsers = tableData.value.filter(
(user) => user.is_online,
);
const onlineUsers = tableData.value.filter((user) => user.is_online)
for (const user of onlineUsers) {
await authApi.onlineUsers.offlineAll.post(user.id);
await authApi.onlineUser.offlineAll.post(user.id)
}
message.success("全部下线成功");
refreshTable();
message.success('全部下线成功')
refreshTable()
} catch (error) {
console.error("全部下线失败:", error);
message.error("操作失败");
console.error('全部下线失败:', error)
message.error('操作失败')
}
},
});
};
})
}
// 会话操作成功回调
const handleSessionsSuccess = () => {
refreshTable();
};
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",
});
};
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();
refreshTable()
// 启动自动刷新
if (refreshInterval.value > 0) {
startRefreshTimer(refreshInterval.value);
startRefreshTimer(refreshInterval.value)
}
});
})
// 组件卸载时清除定时器
onUnmounted(() => {
clearRefreshTimer();
});
clearRefreshTimer()
})
</script>
<style scoped lang="scss">