From e57bbe67a4a9411857498fbf95cc051066c0055f Mon Sep 17 00:00:00 2001
From: Pine <wwork.wss@icloud.com>
Date: Tue, 25 Aug 2026 19:42:08 +0800
Subject: [PATCH] =?UTF-8?q?feat(tasks):=20=E4=BB=BB=E5=8A=A1=E5=B1=95?=
 =?UTF-8?q?=E7=A4=BA=E9=A1=B5=E8=87=AA=E9=80=82=E5=BA=94=20=E2=80=94?=
 =?UTF-8?q?=E2=80=94=20=E4=B8=80=E5=B1=8F=204=20=E6=88=96=206=20=E5=BC=A0(?=
 =?UTF-8?q?=E6=8C=89=E5=B1=8F=E5=B9=95=E5=AE=BD=E5=BA=A6=E8=AE=A1=E7=AE=97?=
 =?UTF-8?q?)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- TaskDisplay.jsx：视口宽度→列数(宽≥1600→6,否则 4)，grid repeat(cols,1fr)，每页 cols 张翻页；导出 columnsFor()；移除固定 PAGE_SIZE=3。

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/pages/TaskDisplay.jsx | 31 +++++++++++++++++++++++--------
 1 file changed, 23 insertions(+), 8 deletions(-)

diff --git a/src/pages/TaskDisplay.jsx b/src/pages/TaskDisplay.jsx
index 7c10173..3ccab59 100644
--- a/src/pages/TaskDisplay.jsx
+++ b/src/pages/TaskDisplay.jsx
@@ -6,17 +6,32 @@ import '../styles/task-display.css';
 /* 任务展示页：轮播卡片 + 二维码扫码接单。
    · 数据：useTasks() 轮询 /park/api/tasks（系统任务中心上墙任务）
    · 卡片：分类/状态徽标、标题、摘要(2行)、标签、预算、任务ID + 二维码(扫码即领)
-   · 轮播：每页若干张，自动翻页；MQTT task_refresh 可触发刷新 */
+   · 自适应：一屏 4 或 6 张（按容器/视口宽度计算，宽≥1600→6，否则 4）
+   · 轮播：每页 cols 张，自动翻页；MQTT task_refresh 可触发刷新 */
 
-const PAGE_SIZE = 3;
 const ROTATE_MS = 14_000;
 
+/* 按宽度计算每屏列数：只取 4 或 6。 */
+export function columnsFor(width) {
+  const w = width || (typeof window !== 'undefined' ? window.innerWidth : 1280);
+  return w >= 1600 ? 6 : 4;
+}
+
 export default function TaskDisplay() {
   const { tasks, loading, error } = useTasks();
   const [page, setPage] = useState(0);
   const [refreshTick, setRefreshTick] = useState(0);
+  const [cols, setCols] = useState(() => columnsFor());
   const tickRef = useRef(0);
 
+  // 视口宽度 → 列数（4 或 6），随屏幕大小自适应
+  useEffect(() => {
+    const update = () => setCols(columnsFor());
+    update();
+    window.addEventListener('resize', update);
+    return () => window.removeEventListener('resize', update);
+  }, []);
+
   // 接受 MQTT task_refresh → 触发重新轮询
   useEffect(() => {
     const onRefresh = () => { tickRef.current += 1; setRefreshTick(tickRef.current); };
@@ -24,8 +39,8 @@ export default function TaskDisplay() {
     return () => window.removeEventListener('dpm:task-control', onRefresh);
   }, []);
 
-  // 自动翻页（仅当任务多于一页时滚动）
-  const pageCount = Math.max(1, Math.ceil(tasks.length / PAGE_SIZE));
+  const pageSize = cols;
+  const pageCount = Math.max(1, Math.ceil(tasks.length / pageSize));
   useEffect(() => {
     if (pageCount <= 1) { setPage(0); return; }
     const t = setInterval(() => setPage((p) => (p + 1) % pageCount), ROTATE_MS);
@@ -34,9 +49,9 @@ export default function TaskDisplay() {
 
   const visible = useMemo(() => {
     if (tasks.length === 0) return [];
-    const start = page * PAGE_SIZE;
-    return Array.from({ length: PAGE_SIZE }, (_, i) => tasks[(start + i) % tasks.length]);
-  }, [tasks, page]);
+    const start = page * pageSize;
+    return Array.from({ length: pageSize }, (_, i) => tasks[(start + i) % tasks.length]);
+  }, [tasks, page, pageSize]);
 
   return (
     <div className="tasks-screen">
@@ -53,7 +68,7 @@ export default function TaskDisplay() {
         <div className="tasks-loading">{error}</div>
       ) : (
         <>
-          <div className="tasks-grid">
+          <div className="tasks-grid" style={{ gridTemplateColumns: `repeat(${cols}, 1fr)` }}>
             {visible.map((t) => (
               <TaskCard key={t.key} task={t} />
             ))}