概览页增加后台登录记录
登录成功/失败写入 admin_login_logs，系统概览下方展示全部账号的时间、IP、设备等信息。
This commit is contained in:
yml2213
@@ -1,8 +1,34 @@
|
||||
import { Alert, Card, Col, Row, Skeleton, Statistic } from 'antd'
|
||||
import { ReloadOutlined, SearchOutlined } from '@ant-design/icons'
|
||||
import {
|
||||
Alert,
|
||||
Button,
|
||||
Card,
|
||||
Col,
|
||||
Form,
|
||||
Input,
|
||||
Row,
|
||||
Skeleton,
|
||||
Space,
|
||||
Statistic,
|
||||
Table,
|
||||
Tag,
|
||||
Typography,
|
||||
} from 'antd'
|
||||
import type { TableColumnsType } from 'antd'
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import { useMemo, useState } from 'react'
|
||||
|
||||
import { AdminRangePicker } from '@/components/admin/AdminDatePicker'
|
||||
import PageHeader from '@/components/admin/PageHeader'
|
||||
import { fetchAdminDashboardSummary } from '@/services/admin'
|
||||
import StatusTag from '@/components/admin/StatusTag'
|
||||
import dayjs from '@/lib/dayjs'
|
||||
import { fetchAdminDashboardSummary, fetchAdminLoginLogs } from '@/services/admin'
|
||||
import type { AdminLoginLogItem } from '@/types/admin'
|
||||
import {
|
||||
ADMIN_DEFAULT_PAGE_SIZE,
|
||||
buildAdminTablePagination,
|
||||
} from '@/utils/admin-pagination'
|
||||
import { formatAdminDateTime } from '@/utils/admin-time'
|
||||
|
||||
const cards = [
|
||||
{ key: 'todayOrders', label: '今日订单' },
|
||||
@@ -12,26 +38,124 @@ const cards = [
|
||||
{ key: 'abnormalTasks', label: '异常任务' },
|
||||
] as const
|
||||
|
||||
type LoginFilterForm = {
|
||||
username?: string
|
||||
dateRange?: unknown
|
||||
}
|
||||
|
||||
export default function AdminDashboardPage() {
|
||||
const query = useQuery({
|
||||
const [page, setPage] = useState(1)
|
||||
const [pageSize, setPageSize] = useState(ADMIN_DEFAULT_PAGE_SIZE)
|
||||
const [filters, setFilters] = useState({
|
||||
username: '',
|
||||
dateFrom: '',
|
||||
dateTo: '',
|
||||
})
|
||||
|
||||
const summaryQuery = useQuery({
|
||||
queryKey: ['admin-dashboard-summary'],
|
||||
queryFn: () => fetchAdminDashboardSummary(),
|
||||
})
|
||||
const summary = query.data?.data
|
||||
const summary = summaryQuery.data?.data
|
||||
|
||||
const loginQueryParams = useMemo(
|
||||
() => ({
|
||||
page,
|
||||
pageSize,
|
||||
username: filters.username || undefined,
|
||||
dateFrom: filters.dateFrom || undefined,
|
||||
dateTo: filters.dateTo || undefined,
|
||||
}),
|
||||
[filters.dateFrom, filters.dateTo, filters.username, page, pageSize],
|
||||
)
|
||||
|
||||
const loginQuery = useQuery({
|
||||
queryKey: ['admin-login-logs', loginQueryParams],
|
||||
queryFn: () => fetchAdminLoginLogs(loginQueryParams),
|
||||
})
|
||||
const loginData = loginQuery.data?.data
|
||||
|
||||
const columns: TableColumnsType<AdminLoginLogItem> = [
|
||||
{
|
||||
title: '登录时间',
|
||||
dataIndex: 'createdAt',
|
||||
width: 180,
|
||||
render: (value) => formatAdminDateTime(value),
|
||||
},
|
||||
{
|
||||
title: '账号',
|
||||
dataIndex: 'username',
|
||||
minWidth: 140,
|
||||
render: (value, row) => (
|
||||
<div className="cell-stack">
|
||||
<Typography.Text strong>{value || '-'}</Typography.Text>
|
||||
{row.role ? <StatusTag value={row.role} /> : null}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: '结果',
|
||||
width: 100,
|
||||
render: (_, row) =>
|
||||
row.success ? (
|
||||
<Tag color="green">成功</Tag>
|
||||
) : (
|
||||
<Tag color="red">失败</Tag>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: '登录地点',
|
||||
dataIndex: 'location',
|
||||
minWidth: 140,
|
||||
render: (value) => value || '-',
|
||||
},
|
||||
{
|
||||
title: '登录 IP',
|
||||
dataIndex: 'ip',
|
||||
width: 150,
|
||||
render: (value) => value || '-',
|
||||
},
|
||||
{
|
||||
title: '设备信息',
|
||||
dataIndex: 'userAgent',
|
||||
minWidth: 280,
|
||||
render: (value) => (
|
||||
<Typography.Text ellipsis={{ tooltip: value || '-' }} style={{ maxWidth: 420 }}>
|
||||
{value || '-'}
|
||||
</Typography.Text>
|
||||
),
|
||||
},
|
||||
]
|
||||
|
||||
function applyLoginFilters(values: LoginFilterForm) {
|
||||
const range = Array.isArray(values.dateRange) ? values.dateRange : []
|
||||
const dateFrom =
|
||||
range[0] && dayjs(range[0]).isValid() ? dayjs(range[0]).format('YYYY-MM-DD') : ''
|
||||
const dateTo =
|
||||
range[1] && dayjs(range[1]).isValid() ? dayjs(range[1]).format('YYYY-MM-DD') : ''
|
||||
setPage(1)
|
||||
setFilters({
|
||||
username: String(values.username || '').trim(),
|
||||
dateFrom,
|
||||
dateTo,
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<section className="page-stack">
|
||||
<PageHeader title="系统概览" description="快速查看订单和交付链路的运行状态。" />
|
||||
|
||||
{query.error ? (
|
||||
{summaryQuery.error ? (
|
||||
<Alert
|
||||
type="error"
|
||||
showIcon
|
||||
message={query.error instanceof Error ? query.error.message : '读取概览失败'}
|
||||
message={
|
||||
summaryQuery.error instanceof Error ? summaryQuery.error.message : '读取概览失败'
|
||||
}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
{query.isLoading ? (
|
||||
{summaryQuery.isLoading ? (
|
||||
<Card>
|
||||
<Skeleton active paragraph={{ rows: 8 }} />
|
||||
</Card>
|
||||
@@ -46,6 +170,83 @@ export default function AdminDashboardPage() {
|
||||
))}
|
||||
</Row>
|
||||
)}
|
||||
|
||||
<Card
|
||||
title="登录记录"
|
||||
extra={
|
||||
<Space wrap>
|
||||
<Typography.Text type="secondary">全部后台账号的登录信息</Typography.Text>
|
||||
<Button
|
||||
icon={<ReloadOutlined />}
|
||||
loading={loginQuery.isFetching}
|
||||
onClick={() => void loginQuery.refetch()}
|
||||
>
|
||||
刷新
|
||||
</Button>
|
||||
</Space>
|
||||
}
|
||||
>
|
||||
<Form<LoginFilterForm>
|
||||
layout="inline"
|
||||
className="filter-form"
|
||||
onFinish={applyLoginFilters}
|
||||
initialValues={{ username: filters.username }}
|
||||
style={{ marginBottom: 16 }}
|
||||
>
|
||||
<Form.Item name="username" label="账号">
|
||||
<Input allowClear placeholder="用户名" style={{ width: 180 }} />
|
||||
</Form.Item>
|
||||
<Form.Item name="dateRange" label="登录时段">
|
||||
<AdminRangePicker />
|
||||
</Form.Item>
|
||||
<Form.Item>
|
||||
<Space>
|
||||
<Button
|
||||
onClick={() => {
|
||||
setPage(1)
|
||||
setFilters({ username: '', dateFrom: '', dateTo: '' })
|
||||
}}
|
||||
>
|
||||
重置
|
||||
</Button>
|
||||
<Button type="primary" htmlType="submit" icon={<SearchOutlined />}>
|
||||
查询
|
||||
</Button>
|
||||
</Space>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
|
||||
{loginQuery.error ? (
|
||||
<Alert
|
||||
type="error"
|
||||
showIcon
|
||||
style={{ marginBottom: 16 }}
|
||||
message={
|
||||
loginQuery.error instanceof Error
|
||||
? loginQuery.error.message
|
||||
: '读取登录记录失败'
|
||||
}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
<Table<AdminLoginLogItem>
|
||||
rowKey="logId"
|
||||
loading={loginQuery.isLoading || loginQuery.isFetching}
|
||||
columns={columns}
|
||||
dataSource={loginData?.items || []}
|
||||
scroll={{ x: 1100 }}
|
||||
pagination={buildAdminTablePagination({
|
||||
current: loginData?.pagination.page || page,
|
||||
pageSize: loginData?.pagination.pageSize || pageSize,
|
||||
total: loginData?.pagination.total || 0,
|
||||
onChange: (nextPage, nextPageSize) => {
|
||||
setPage(nextPage)
|
||||
setPageSize(nextPageSize)
|
||||
},
|
||||
})}
|
||||
locale={{ emptyText: '暂无登录记录（新登录成功后会自动写入）' }}
|
||||
/>
|
||||
</Card>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user