Add files via upload

web/static/css/style.css

@@ -441,7 +441,9 @@ body {
     /* 确保底部左右角都是圆角 */
     border-bottom-left-radius: 8px;
     border-bottom-right-radius: 8px;
-    overflow: hidden;
+    /* 勿用 overflow:hidden：会覆盖 .page-content 的 overflow-y:auto，任务多时无法滚动 */
+    overflow-x: hidden;
+    overflow-y: auto;
 }
 
 /* 对话页面布局 */
@@ -8196,6 +8198,37 @@ header {
     overflow: hidden;
 }
 
+/* 列表 + 底部分页同一外框，与 MCP 监控「表格 + 分页」一致 */
+.batch-queues-board {
+    border: 1px solid var(--border-color);
+    border-radius: 12px;
+    overflow: hidden;
+    width: 100%;
+    box-sizing: border-box;
+    background: var(--bg-primary);
+}
+
+.batch-queues-board .batch-queues-list {
+    margin-bottom: 0;
+    padding: 12px 16px;
+    box-sizing: border-box;
+}
+
+.batch-queues-board #batch-queues-pagination {
+    margin-top: 0;
+    padding: 0;
+    background: transparent;
+    border: none;
+    box-shadow: none;
+    border-radius: 0;
+    width: 100%;
+    box-sizing: border-box;
+}
+
+.batch-queues-board #batch-queues-pagination .monitor-pagination {
+    margin-top: 0;
+}
+
 .batch-queues-filters.tasks-filters {
     margin-bottom: 12px;
 }
@@ -9061,21 +9094,6 @@ header {
     color: var(--error-color);
 }
 
-/* 任务列表与分页条分离，避免与最后一张卡片贴在一起 */
-#batch-queues-pagination.pagination-fixed {
-    margin-top: 8px;
-    padding-top: 10px;
-}
-
-#batch-queues-pagination .pagination {
-    padding: 12px 16px 12px;
-    font-size: 0.875rem;
-}
-
-#batch-queues-pagination .pagination-info {
-    color: var(--text-secondary);
-}
-
 .batch-queue-detail-info {
     margin-bottom: 24px;
     padding: 20px;

web/static/i18n/en-US.json

@@ -294,7 +294,7 @@
     "addTaskFailed": "Failed to add task",
     "confirmDeleteTask": "Delete this task?\n\nTask: {{message}}\n\nThis cannot be undone.",
     "deleteTaskFailed": "Failed to delete task",
-    "paginationShow": "{{start}}-{{end}} of {{total}}",
+    "paginationShow": "Show {{start}}-{{end}} of {{total}} records",
     "paginationPerPage": "Per page",
     "paginationFirst": "First",
     "paginationPrev": "Previous",

web/static/i18n/zh-CN.json

@@ -294,7 +294,7 @@
     "addTaskFailed": "添加任务失败",
     "confirmDeleteTask": "确定要删除这个任务吗？\n\n任务内容: {{message}}\n\n此操作不可恢复。",
     "deleteTaskFailed": "删除任务失败",
-    "paginationShow": "显示 {{start}}-{{end}} / 共 {{total}} 条",
+    "paginationShow": "显示 {{start}}-{{end}} / 共 {{total}} 条记录",
     "paginationPerPage": "每页显示",
     "paginationFirst": "首页",
     "paginationPrev": "上一页",

web/static/js/tasks.js

@@ -1156,14 +1156,14 @@ function renderBatchQueues() {
     renderBatchQueuesPagination();
 }
 
-// 渲染批量任务队列分页控件（参考Skills管理页面样式）
+// 渲染批量任务队列分页控件（结构与样式对齐 MCP 监控 .monitor-pagination）
 function renderBatchQueuesPagination() {
     const paginationContainer = document.getElementById('batch-queues-pagination');
     if (!paginationContainer) return;
     
     const { currentPage, pageSize, total, totalPages } = batchQueuesState;
     
-    // 即使只有一页也显示分页信息（参考Skills样式）
+    // 即使只有一页也显示分页信息（与 MCP 监控一致）
     if (total === 0) {
         paginationContainer.innerHTML = '';
         return;
@@ -1173,7 +1173,7 @@ function renderBatchQueuesPagination() {
     const start = total === 0 ? 0 : (currentPage - 1) * pageSize + 1;
     const end = total === 0 ? 0 : Math.min(currentPage * pageSize, total);
     
-    let paginationHTML = '<div class="pagination">';
+    let paginationHTML = '<div class="monitor-pagination">';
     
     // 左侧：显示范围信息和每页数量选择器（参考Skills样式）
     paginationHTML += `
@@ -1205,41 +1205,6 @@ function renderBatchQueuesPagination() {
     paginationHTML += '</div>';
     
     paginationContainer.innerHTML = paginationHTML;
-    
-    // 确保分页组件与列表内容区域对齐（不包括滚动条）
-    function alignPaginationWidth() {
-        const batchQueuesList = document.getElementById('batch-queues-list');
-        if (batchQueuesList && paginationContainer) {
-            // 获取列表的实际内容宽度（不包括滚动条）
-            const listClientWidth = batchQueuesList.clientWidth; // 可视区域宽度（不包括滚动条）
-            const listScrollHeight = batchQueuesList.scrollHeight; // 内容总高度
-            const listClientHeight = batchQueuesList.clientHeight; // 可视区域高度
-            const hasScrollbar = listScrollHeight > listClientHeight;
-            
-            // 如果列表有垂直滚动条，分页组件应该与列表内容区域对齐（clientWidth）
-            // 如果没有滚动条，使用100%宽度
-            if (hasScrollbar) {
-                // 分页组件应该与列表内容区域对齐，不包括滚动条
-                paginationContainer.style.width = `${listClientWidth}px`;
-            } else {
-                // 如果没有滚动条，使用100%宽度
-                paginationContainer.style.width = '100%';
-            }
-        }
-    }
-    
-    // 立即执行一次
-    alignPaginationWidth();
-    
-    // 监听窗口大小变化和列表内容变化
-    const resizeObserver = new ResizeObserver(() => {
-        alignPaginationWidth();
-    });
-    
-    const batchQueuesList = document.getElementById('batch-queues-list');
-    if (batchQueuesList) {
-        resizeObserver.observe(batchQueuesList);
-    }
 }
 
 // 跳转到指定页面

web/templates/index.html

@@ -1150,9 +1150,10 @@
                                            oninput="filterBatchQueues()">
                                 </label>
                             </div>
-                            <div id="batch-queues-list" class="batch-queues-list"></div>
-                            <!-- 分页控件 -->
-                            <div id="batch-queues-pagination" class="pagination-container pagination-fixed"></div>
+                            <div class="batch-queues-board">
+                                <div id="batch-queues-list" class="batch-queues-list"></div>
+                                <div id="batch-queues-pagination" class="pagination-container"></div>
+                            </div>
                         </div>
                     </div>
                 </div>