fix(frontend): 优化 task log 前端交互体验

- 简化虚拟滚动实现,移除 @tanstack/vue-virtual 依赖
- 添加分页组件,支持翻页查看历史任务
- 添加 SSE 指数退避重试机制(最多 3 次)
- 更新 API 接口支持分页参数
- 添加重试状态指示器

背景:前端存在虚拟滚动与 SSE 不兼容、缺少分页、连接断开无重试等问题

关联 commit:fix/logs 分支
This commit is contained in:
2026-07-29 14:01:12 +08:00
parent 61eeb0c8ac
commit dbb930d0cb
2 changed files with 112 additions and 29 deletions
+26 -2
View File
@@ -24,10 +24,20 @@ export interface TaskLogLine {
export interface TaskLogListParams {
source?: string
businessLineId?: number
page?: number
pageSize?: number
}
export interface TaskLogListResult {
items: TaskLogSummary[]
total: number
page: number
page_size: number
total_pages: number
}
export const taskLogApi = {
async list(params: TaskLogListParams = {}): Promise<TaskLogSummary[]> {
async list(params: TaskLogListParams = {}): Promise<TaskLogListResult> {
const query = new URLSearchParams()
if (params.source && params.source !== 'all') {
query.set('source', params.source)
@@ -35,9 +45,21 @@ export const taskLogApi = {
if (params.businessLineId) {
query.set('business_line_id', String(params.businessLineId))
}
if (params.page) {
query.set('page', String(params.page))
}
if (params.pageSize) {
query.set('page_size', String(params.pageSize))
}
const suffix = query.toString() ? `?${query.toString()}` : ''
const data = await authRequest(`/auth/api/v1/task-logs${suffix}`)
return Array.isArray(data.items) ? data.items : []
return {
items: Array.isArray(data.items) ? data.items : [],
total: data.total || 0,
page: data.page || 1,
page_size: data.page_size || 20,
total_pages: data.total_pages || 0,
}
},
async get(id: string): Promise<{ task: TaskLogSummary; lines: TaskLogLine[] }> {
@@ -89,6 +111,8 @@ export interface TaskLogStreamCallbacks {
export function createTaskLogStream(taskId: string, callbacks: TaskLogStreamCallbacks): EventSource {
const token = getToken()
// 注意:EventSource 不支持自定义请求头,只能通过 query parameter 传递 token
// TODO: 在生产环境中,应考虑使用 WebSocket 或 HttpOnly Cookie 方式以提高安全性
const url = `/auth/api/v1/task-logs/stream?task_id=${encodeURIComponent(taskId)}&access_token=${encodeURIComponent(token || '')}`
const es = new EventSource(url)