From 4215137f26553f943adbdaff24fe0c4ea3467915 Mon Sep 17 00:00:00 2001
From: Steven <wenw50@qq.com>
Date: Sat, 20 Jun 2026 12:09:00 +0800
Subject: [PATCH] fix: dayjs UTC import, API pagination, execution list
 endpoint

---
 backend/app/api/executions.py     | 31 ++++++++++--
 frontend/src/views/Alerts.vue     |  2 +-
 frontend/src/views/Dashboard.vue  |  2 +-
 frontend/src/views/TaskDetail.vue | 83 +++++++++++++++++++++++++++++--
 4 files changed, 106 insertions(+), 12 deletions(-)

diff --git a/backend/app/api/executions.py b/backend/app/api/executions.py
index ebd6928..52358ec 100644
--- a/backend/app/api/executions.py
+++ b/backend/app/api/executions.py
@@ -1,15 +1,25 @@
 """API router — TaskExecution (reporting + query)."""
 
 from fastapi import APIRouter, Depends, HTTPException, Query
+from pydantic import BaseModel
+from sqlalchemy import select, func
 from sqlalchemy.ext.asyncio import AsyncSession
 
 from app.database import get_db
 from app.schemas import ExecutionOut, ExecutionReport
 from app.services import ExecutionService, TaskService, AgentService
+from app.models import TaskExecution
 
 router = APIRouter(prefix="/api/tasks/{task_id}/executions", tags=["executions"])
 
 
+class PaginatedExecutions(BaseModel):
+    items: list[ExecutionOut]
+    total: int
+    page: int
+    page_size: int
+
+
 @router.post("", response_model=ExecutionOut, status_code=201)
 async def report_execution(task_id: int, body: ExecutionReport,
                            db: AsyncSession = Depends(get_db)):
@@ -46,16 +56,27 @@ async def report_execution(task_id: int, body: ExecutionReport,
     return ExecutionOut(**record.__dict__)
 
 
-@router.get("", response_model=list[ExecutionOut])
+@router.get("", response_model=PaginatedExecutions)
 async def list_executions(
     task_id: int,
-    limit: int = Query(50, ge=1, le=200),
-    offset: int = Query(0, ge=0),
+    page: int = Query(1, ge=1),
+    page_size: int = Query(20, ge=1, le=100),
     db: AsyncSession = Depends(get_db),
 ):
     exec_svc = ExecutionService(db)
-    records = await exec_svc.get_executions(task_id, limit=limit, offset=offset)
-    return [ExecutionOut(**r.__dict__) for r in records]
+    offset = (page - 1) * page_size
+    records = await exec_svc.get_executions(task_id, limit=page_size, offset=offset)
+
+    # Get total count
+    count_stmt = select(func.count()).select_from(TaskExecution).where(TaskExecution.task_id == task_id)
+    total = (await db.execute(count_stmt)).scalar() or 0
+
+    return PaginatedExecutions(
+        items=[ExecutionOut(**r.__dict__) for r in records],
+        total=total,
+        page=page,
+        page_size=page_size,
+    )
 
 
 @router.get("/recent", response_model=list[ExecutionOut])
diff --git a/frontend/src/views/Alerts.vue b/frontend/src/views/Alerts.vue
index 36e1307..7853db6 100644
--- a/frontend/src/views/Alerts.vue
+++ b/frontend/src/views/Alerts.vue
@@ -42,7 +42,7 @@
 
 <script setup>
 import { ref, onMounted } from 'vue'
-import { beijing } from '../utils/time.js'
+import dayjs from 'dayjs'
 import { listAlerts, acknowledgeAlert } from '../api/index.js'
 
 const alerts = ref([])
diff --git a/frontend/src/views/Dashboard.vue b/frontend/src/views/Dashboard.vue
index 15c57cd..17e21bf 100644
--- a/frontend/src/views/Dashboard.vue
+++ b/frontend/src/views/Dashboard.vue
@@ -152,7 +152,7 @@
 
 <script setup>
 import { ref, onMounted, computed } from 'vue'
-import { beijing } from '../utils/time.js'
+import dayjs from 'dayjs'
 import { getDashboardSummary, getDashboardTasks, getSystemConfig } from '../api/index.js'
 
 const summary = ref({
diff --git a/frontend/src/views/TaskDetail.vue b/frontend/src/views/TaskDetail.vue
index 2a15b3c..a56041d 100644
--- a/frontend/src/views/TaskDetail.vue
+++ b/frontend/src/views/TaskDetail.vue
@@ -72,6 +72,20 @@
           </tbody>
         </table>
       </div>
+      <!-- Pagination -->
+      <div class="pagination" v-if="total > pageSize && totalPages > 1">
+        <span class="page-info">共 {{ total }} 条</span>
+        <div class="page-btns">
+          <button class="page-btn" :disabled="currentPage <= 1" @click="goPage(currentPage - 1)">上一页</button>
+          <template v-for="p in (totalPages || 1)" :key="p">
+            <button v-if="Math.abs(p - currentPage) <= 2 || p === 1 || p === totalPages"
+              class="page-btn" :class="{ active: p === currentPage }"
+              @click="goPage(p)">{{ p }}</button>
+            <span v-else-if="p === currentPage - 3 || p === currentPage + 3" class="page-ellipsis">…</span>
+          </template>
+          <button class="page-btn" :disabled="currentPage >= totalPages" @click="goPage(currentPage + 1)">下一页</button>
+        </div>
+      </div>
     </div>
 
     <!-- Log Dialog -->
@@ -90,9 +104,9 @@
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, computed } from 'vue'
 import { useRoute } from 'vue-router'
-import { beijing } from '../utils/time.js'
+import dayjs from 'dayjs'
 import { getTask, listExecutions } from '../api/index.js'
 
 const route = useRoute()
@@ -103,14 +117,37 @@ const logVisible = ref(false)
 const currentLog = ref('')
 const logExecution = ref(null)
 
+// Pagination
+const currentPage = ref(1)
+const pageSize = ref(20)
+const total = ref(0)
+const totalPages = computed(() => Math.ceil(total.value / pageSize.value) || 1)
+
+const loadExecutions = async (page) => {
+  try {
+    const res = await listExecutions(taskId, { page, page_size: pageSize.value })
+    const data = res.data || {}
+    executions.value = data.items || []
+    total.value = data.total || 0
+    currentPage.value = data.page || page
+  } catch (e) {
+    console.error(e)
+    executions.value = []
+  }
+}
+
+const goPage = (p) => {
+  if (p < 1 || p > totalPages.value) return
+  loadExecutions(p)
+}
+
 onMounted(async () => {
   try {
-    const [taskRes, execRes] = await Promise.all([
+    const [taskRes] = await Promise.all([
       getTask(taskId),
-      listExecutions(taskId, { limit: 100 }),
     ])
     task.value = taskRes.data
-    executions.value = execRes.data
+    await loadExecutions(1)
   } catch (e) {
     console.error(e)
   }
@@ -243,4 +280,40 @@ const showLog = (row) => {
   word-break: break-all;
   margin: 0;
 }
+
+/* ── Pagination ──────────────────────────── */
+.pagination {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 20px;
+  border-top: 1px solid var(--border-color);
+}
+.page-info {
+  font-size: 12px;
+  color: var(--text-muted);
+}
+.page-btns {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.page-btn {
+  padding: 4px 10px;
+  border-radius: 6px;
+  border: 1px solid var(--border-color);
+  background: transparent;
+  color: var(--text-secondary);
+  font-size: 12px;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+.page-btn:hover { border-color: var(--accent-1); color: var(--accent-1); }
+.page-btn.active {
+  background: var(--accent-1);
+  border-color: var(--accent-1);
+  color: #fff;
+}
+.page-btn:disabled { opacity: 0.3; cursor: not-allowed; }
+.page-ellipsis { color: var(--text-muted); font-size: 12px; padding: 0 2px; }
 </style>