wangdl/admin-projects
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: audit log pagination + useState for page/pageSize
All checks were successful
Deploy Admin Frontend / build-and-deploy (push) Successful in 6s
Details

Browse Source
This commit is contained in:
WangDL 2026-05-22 11:21:05 +08:00
parent cf2dfc1351
commit 4292da4bf1
1 changed files with 24 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

96
src/pages/Dashboard.tsx
View File

@ -1,4 +1,4 @@
import { useMemo } from 'react'
import { useMemo, useState } from 'react'
import { Row, Col, Typography } from 'antd'
import { useQuery } from '@tanstack/react-query'
import ReactEChartsCore from 'echarts-for-react/esm/core'
@ -7,10 +7,7 @@ import { LineChart, BarChart } from 'echarts/charts'
import { GridComponent, TooltipComponent, TitleComponent, LegendComponent } from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'
import {
UserOutlined,
BookOutlined,
CloudOutlined,
FileOutlined,
UserOutlined, BookOutlined, CloudOutlined, FileOutlined,
} from '@ant-design/icons'
import dayjs from 'dayjs'
import MetricCard from '@/components/MetricCard'
@ -27,6 +24,9 @@ function formatStorage(bytes: number): string {
}
export default function Dashboard() {
const [auditPage, setAuditPage] = useState(1)
const [auditPageSize, setAuditPageSize] = useState(10)
const { data: stats, isLoading: statsLoading } = useQuery({
queryKey: ['dashboard', 'stats'],
queryFn: getDashboardStats,
@ -34,8 +34,8 @@ export default function Dashboard() {
})
const { data: auditData, isLoading: auditLoading } = useQuery({
queryKey: ['dashboard', 'audit-logs'],
queryFn: () => getAuditLogs({ page: 1, limit: 10 }),
queryKey: ['dashboard', 'audit-logs', auditPage, auditPageSize],
queryFn: () => getAuditLogs({ page: auditPage, limit: auditPageSize }),
staleTime: 30_000,
})
@ -49,11 +49,9 @@ export default function Dashboard() {
},
yAxis: { type: 'value' as const, axisLabel: { fontSize: 11 } },
series: [{
name: '日活用户',
type: 'line',
name: '日活用户', type: 'line',
data: stats?.userTrend.map((p) => p.value) || [],
smooth: true,
symbol: 'none',
smooth: true, symbol: 'none',
lineStyle: { color: '#1677ff', width: 2 },
areaStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(22,119,255,0.15)' },
@ -72,13 +70,11 @@ export default function Dashboard() {
},
yAxis: { type: 'value' as const, axisLabel: { fontSize: 11 } },
series: [{
name: 'AI 调用',
type: 'bar',
name: 'AI 调用', type: 'bar',
data: stats?.aiCallTrend.map((p) => p.value) || [],
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#52c41a' },
{ offset: 1, color: '#b7eb8f' },
{ offset: 0, color: '#52c41a' }, { offset: 1, color: '#b7eb8f' },
]),
borderRadius: [4, 4, 0, 0],
},
@ -88,87 +84,43 @@ export default function Dashboard() {
return (
<div style={{ padding: '0 0 24px' }}>
<Typography.Title level={5} style={{ margin: '0 0 16px' }}>数据概览</Typography.Title>
<Row gutter={[16, 16]}>
<Col xs={12} sm={12} lg={6}>
<MetricCard
title="总用户数"
value={stats?.totalUsers}
loading={statsLoading}
prefix={<UserOutlined />}
trend="up"
trendValue={`+${stats?.newUsersToday ?? 0}`}
trendLabel="今日新增"
/>
<MetricCard title="总用户数" value={stats?.totalUsers} loading={statsLoading}
prefix={<UserOutlined />} trend="up" trendValue={`+${stats?.newUsersToday ?? 0}`} trendLabel="今日新增" />
</Col>
<Col xs={12} sm={12} lg={6}>
<MetricCard
title="知识库总数"
value={stats?.totalKnowledgeBases}
loading={statsLoading}
prefix={<BookOutlined />}
trend="up"
trendValue={`+${stats?.newKbsToday ?? 0}`}
trendLabel="今日新增"
/>
<MetricCard title="知识库总数" value={stats?.totalKnowledgeBases} loading={statsLoading}
prefix={<BookOutlined />} trend="up" trendValue={`+${stats?.newKbsToday ?? 0}`} trendLabel="今日新增" />
</Col>
<Col xs={12} sm={12} lg={6}>
<MetricCard
title="今日 AI 调用"
value={stats?.totalAiCallsToday}
loading={statsLoading}
prefix={<CloudOutlined />}
/>
<MetricCard title="今日 AI 调用" value={stats?.totalAiCallsToday} loading={statsLoading}
prefix={<CloudOutlined />} />
</Col>
<Col xs={12} sm={12} lg={6}>
<MetricCard
title="文件存储"
value={stats ? formatStorage(stats.totalStorageBytes) : undefined}
loading={statsLoading}
prefix={<FileOutlined />}
suffix={`${stats?.totalFiles ?? 0} 个文件`}
/>
<MetricCard title="文件存储" value={stats ? formatStorage(stats.totalStorageBytes) : undefined}
loading={statsLoading} prefix={<FileOutlined />} suffix={`${stats?.totalFiles ?? 0} 个文件`} />
</Col>
</Row>
<Row gutter={[16, 16]} style={{ marginTop: 16 }}>
<Col xs={24} lg={12}>
<EChartsChartContainer
title="日活用户趋势（近 30 天）"
loading={statsLoading}
isEmpty={!stats?.userTrend?.length}
>
<ReactEChartsCore
echarts={echarts}
option={userTrendOption}
style={{ height: 300 }}
notMerge
lazyUpdate
/>
<EChartsChartContainer title="日活用户趋势（近 30 天）" loading={statsLoading} isEmpty={!stats?.userTrend?.length}>
<ReactEChartsCore echarts={echarts} option={userTrendOption} style={{ height: 300 }} notMerge lazyUpdate />
</EChartsChartContainer>
</Col>
<Col xs={24} lg={12}>
<EChartsChartContainer
title="AI 调用趋势（近 30 天）"
loading={statsLoading}
isEmpty={!stats?.aiCallTrend?.length}
>
<ReactEChartsCore
echarts={echarts}
option={aiCallTrendOption}
style={{ height: 300 }}
notMerge
/>
<EChartsChartContainer title="AI 调用趋势（近 30 天）" loading={statsLoading} isEmpty={!stats?.aiCallTrend?.length}>
<ReactEChartsCore echarts={echarts} option={aiCallTrendOption} style={{ height: 300 }} notMerge />
</EChartsChartContainer>
</Col>
</Row>
<div style={{ marginTop: 16 }}>
<AuditLogTable
headerTitle="最近操作日志"
dataSource={auditData?.items || []}
loading={auditLoading}
pagination={auditData ? { current: auditData.page, pageSize: auditData.limit, total: auditData.total } : undefined}
onPageChange={(page, pageSize) => { setAuditPage(page); setAuditPageSize(pageSize) }}
/>
</div>
</div>