fix(frontend): 优化 task log 前端交互体验
- 简化虚拟滚动实现,移除 @tanstack/vue-virtual 依赖 - 添加分页组件,支持翻页查看历史任务 - 添加 SSE 指数退避重试机制(最多 3 次) - 更新 API 接口支持分页参数 - 添加重试状态指示器 背景:前端存在虚拟滚动与 SSE 不兼容、缺少分页、连接断开无重试等问题 关联 commit:fix/logs 分支
This commit is contained in:
@@ -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)
|
||||
|
||||
Reference in New Issue
Block a user