From b121eb748b31e92f561ad6e27ea734ee9c821f0c Mon Sep 17 00:00:00 2001
From: Pine <wwork.wss@icloud.com>
Date: Tue, 25 Aug 2026 19:55:36 +0800
Subject: [PATCH] =?UTF-8?q?feat(tasks):=20=E4=BB=BB=E5=8A=A1=E9=A1=B5?=
 =?UTF-8?q?=E5=8F=B3=E4=B8=8A=E8=A7=92=E4=BF=A1=E6=81=AF=E9=9D=A2=E6=9D=BF?=
 =?UTF-8?q?=20=E2=80=94=E2=80=94=20=E8=AF=B4=E6=98=8E/=E6=80=BB=E6=95=B0/?=
 =?UTF-8?q?=E8=BD=AE=E6=92=AD=E5=80=92=E8=AE=A1=E6=97=B6/=E9=A1=B5?=
 =?UTF-8?q?=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- TaskDisplay.jsx：右上角加 总数、翻页倒计时(s, 每秒递减翻页时复位)、页码 x/y、接单方式说明。
- task-display.css 加 tasks-head-info / tasks-info-* 样式。

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/pages/TaskDisplay.jsx   | 16 +++++++++++++++-
 src/styles/task-display.css | 20 ++++++++++++++++++++
 2 files changed, 35 insertions(+), 1 deletion(-)

diff --git a/src/pages/TaskDisplay.jsx b/src/pages/TaskDisplay.jsx
index 29c84ad..6ec06fe 100644
--- a/src/pages/TaskDisplay.jsx
+++ b/src/pages/TaskDisplay.jsx
@@ -42,12 +42,20 @@ export default function TaskDisplay() {
 
   const pageSize = cols * ROWS;   // 2×2=4 或 2×3=6
   const pageCount = Math.max(1, Math.ceil(tasks.length / pageSize));
+  const [countdown, setCountdown] = useState(Math.round(ROTATE_MS / 1000));
   useEffect(() => {
     if (pageCount <= 1) { setPage(0); return; }
     const t = setInterval(() => setPage((p) => (p + 1) % pageCount), ROTATE_MS);
     return () => clearInterval(t);
   }, [pageCount]);
 
+  // 轮播倒计时：每秒递减，翻页时重置（页数或页变更即复位）
+  useEffect(() => { setCountdown(Math.round(ROTATE_MS / 1000)); }, [page, pageCount]);
+  useEffect(() => {
+    const t = setInterval(() => setCountdown((c) => (c > 0 ? c - 1 : 0)), 1000);
+    return () => clearInterval(t);
+  }, []);
+
   const visible = useMemo(() => {
     if (tasks.length === 0) return [];
     const start = page * pageSize;
@@ -62,7 +70,13 @@ export default function TaskDisplay() {
         <span className="tasks-head-dot" />
         <span className="tasks-head-title">系统任务中心</span>
         <span className="tasks-head-sub">扫码即可接单 · 园区企业发标 · 合伙人接单</span>
-        <span className="tasks-head-count">{tasks.length} 个任务</span>
+        {/* 右上角信息面板：说明 / 总数 / 轮播倒计时 / 页码 */}
+        <div className="tasks-head-info">
+          <div className="tasks-info-item"><span className="tasks-info-label">总数</span><span className="tasks-info-val">{tasks.length}</span></div>
+          <div className="tasks-info-item"><span className="tasks-info-label">翻页</span><span className="tasks-info-val">{pageCount > 1 ? `${countdown}s` : '—'}</span></div>
+          <div className="tasks-info-item"><span className="tasks-info-label">页码</span><span className="tasks-info-val">{pageCount > 1 ? `${page + 1}/${pageCount}` : '1/1'}</span></div>
+          <div className="tasks-info-hint">接单方式：抢单 / 竞标 / 指派 / 推荐</div>
+        </div>
       </div>
 
       {loading && tasks.length === 0 ? (
diff --git a/src/styles/task-display.css b/src/styles/task-display.css
index 0fe821e..bb1951b 100644
--- a/src/styles/task-display.css
+++ b/src/styles/task-display.css
@@ -28,6 +28,26 @@
 .tasks-head-sub { font-size: 13px; color: var(--bd-sub, #7d8fa9); }
 .tasks-head-count { margin-left: auto; font-size: 13px; color: var(--bd-blue, #2f6bff); font-weight: 600; }
 
+/* 右上角信息面板（说明 / 总数 / 轮播倒计时 / 页码） */
+.tasks-head-info {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+.tasks-info-item {
+  display: flex; flex-direction: column; align-items: center; gap: 2px;
+  min-width: 46px; padding: 6px 10px; border-radius: 10px;
+  background: rgba(47, 107, 255, 0.08); border: 1px solid rgba(47, 107, 255, 0.14);
+}
+.tasks-info-label { font-size: 10px; color: var(--bd-sub, #7d8fa9); letter-spacing: 0.4px; }
+.tasks-info-val { font-size: 17px; font-weight: 700; color: var(--bd-blue, #2f6bff); line-height: 1; }
+.tasks-info-hint {
+  font-size: 11px; color: var(--bd-sub, #7d8fa9);
+  padding: 6px 10px; border-radius: 10px; background: rgba(29, 44, 68, 0.05);
+  white-space: nowrap;
+}
+
 .tasks-loading {
   color: var(--bd-sub, #7d8fa9); font-size: 15px;
   display: flex; align-items: center; justify-content: center; height: 60%;