概览页增加后台登录记录

登录成功/失败写入 admin_login_logs，系统概览下方展示全部账号的时间、IP、设备等信息。

apps/frontend/src/pages/admin/AdminDashboardPage.tsx

@@ -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>
   )
 }

apps/frontend/src/services/admin/dashboard.ts

@@ -1,6 +1,25 @@
 import { apiGet } from '@/lib/http'
-import type { AdminDashboardSummary } from '@/types/admin'
+import type { AdminDashboardSummary, AdminLoginLogListResult } from '@/types/admin'
 
 export function fetchAdminDashboardSummary() {
   return apiGet<AdminDashboardSummary>('/api/v1/admin/dashboard/summary')
 }
+
+export function fetchAdminLoginLogs(params: {
+  page?: number
+  pageSize?: number
+  username?: string
+  dateFrom?: string
+  dateTo?: string
+} = {}) {
+  const search = new URLSearchParams()
+  if (params.page) search.set('page', String(params.page))
+  if (params.pageSize) search.set('pageSize', String(params.pageSize))
+  if (params.username) search.set('username', params.username)
+  if (params.dateFrom) search.set('dateFrom', params.dateFrom)
+  if (params.dateTo) search.set('dateTo', params.dateTo)
+  const queryString = search.toString()
+  return apiGet<AdminLoginLogListResult>(
+    `/api/v1/admin/dashboard/login-logs${queryString ? `?${queryString}` : ''}`,
+  )
+}

apps/frontend/src/types/admin/index.ts

@@ -13,6 +13,9 @@ export type { AdminAuditLogItem } from './audit-logs'
 // Dashboard types
 export type { AdminDashboardSummary } from './dashboard'
 
+// Login logs
+export type { AdminLoginLogItem, AdminLoginLogListResult } from './login-logs'
+
 // Orders types
 export type {
   AdminOrderFulfillmentProgress,

apps/frontend/src/types/admin/login-logs.ts

@@ -0,0 +1,21 @@
+export interface AdminLoginLogItem {
+  logId: number
+  userId: number | null
+  username: string
+  role: string
+  ip: string
+  location: string
+  userAgent: string
+  success: boolean
+  failureReason: string
+  createdAt: string
+}
+
+export interface AdminLoginLogListResult {
+  items: AdminLoginLogItem[]
+  pagination: {
+    page: number
+    pageSize: number
+    total: number
+  }
+}