diff --git a/src/pages/TaskDisplay.jsx b/src/pages/TaskDisplay.jsx index 3ccab59..29c84ad 100644 --- a/src/pages/TaskDisplay.jsx +++ b/src/pages/TaskDisplay.jsx @@ -5,16 +5,17 @@ import '../styles/task-display.css'; /* 任务展示页:轮播卡片 + 二维码扫码接单。 · 数据:useTasks() 轮询 /park/api/tasks(系统任务中心上墙任务) + · 布局:一屏固定 2 行;宽度 ≥1600 → 3 列(2×3=6 张),否则 → 2 列(2×2=4 张) · 卡片:分类/状态徽标、标题、摘要(2行)、标签、预算、任务ID + 二维码(扫码即领) - · 自适应:一屏 4 或 6 张(按容器/视口宽度计算,宽≥1600→6,否则 4) - · 轮播:每页 cols 张,自动翻页;MQTT task_refresh 可触发刷新 */ + · 轮播:每页 列数×行数 张,自动翻页;MQTT task_refresh 可触发刷新 */ const ROTATE_MS = 14_000; +const ROWS = 2; // 一屏固定 2 行 -/* 按宽度计算每屏列数:只取 4 或 6。 */ +/* 按宽度计算列数:宽≥1600→3 列,否则 2 列。导出便于测试。 */ export function columnsFor(width) { const w = width || (typeof window !== 'undefined' ? window.innerWidth : 1280); - return w >= 1600 ? 6 : 4; + return w >= 1600 ? 3 : 2; } export default function TaskDisplay() { @@ -24,7 +25,7 @@ export default function TaskDisplay() { const [cols, setCols] = useState(() => columnsFor()); const tickRef = useRef(0); - // 视口宽度 → 列数(4 或 6),随屏幕大小自适应 + // 视口宽度 → 列数(2 或 3 列),随屏幕大小自适应(行数固定 2) useEffect(() => { const update = () => setCols(columnsFor()); update(); @@ -39,7 +40,7 @@ export default function TaskDisplay() { return () => window.removeEventListener('dpm:task-control', onRefresh); }, []); - const pageSize = cols; + const pageSize = cols * ROWS; // 2×2=4 或 2×3=6 const pageCount = Math.max(1, Math.ceil(tasks.length / pageSize)); useEffect(() => { if (pageCount <= 1) { setPage(0); return; } @@ -50,7 +51,9 @@ export default function TaskDisplay() { const visible = useMemo(() => { if (tasks.length === 0) return []; const start = page * pageSize; - return Array.from({ length: pageSize }, (_, i) => tasks[(start + i) % tasks.length]); + // 不足一页时按行补位(循环取),保证 2 行填满 + const items = tasks.slice(start, start + pageSize); + return items.length ? items : Array.from({ length: pageSize }, (_, i) => tasks[i % tasks.length]); }, [tasks, page, pageSize]); return ( @@ -68,7 +71,10 @@ export default function TaskDisplay() {