fix(tasks): 任务展示页一屏固定 2 行 —— 2×2=4 或 2×3=6
- 布局改为固定 2 行;宽≥1600→3 列(2×3=6),否则 2 列(2×2=4)。 - grid repeat(cols,1fr) + grid-template-rows repeat(2,minmax(0,1fr)),两行均分高度。 - columnsFor() 改返回 3/2 列;pageSize=cols*2;不足一页按行补位。 Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -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() {
|
||||
<div className="tasks-loading">{error}</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="tasks-grid" style={{ gridTemplateColumns: `repeat(${cols}, 1fr)` }}>
|
||||
<div className="tasks-grid" style={{
|
||||
gridTemplateColumns: `repeat(${cols}, 1fr)`,
|
||||
gridTemplateRows: `repeat(${ROWS}, minmax(0, 1fr))`,
|
||||
}}>
|
||||
{visible.map((t) => (
|
||||
<TaskCard key={t.key} task={t} />
|
||||
))}
|
||||
|
||||
Reference in New Issue
Block a user