brand: favicon 改用 logo.png

- ParkFeed 拉取 /park/api/content/feed，滚动展示本园区内容标题；图标用 @appica/icons-react(禁用emoji)
- DataScreen 挂载 ParkFeed

Co-Authored-By: Claude <noreply@anthropic.com>

docs/mqtt-commands.md

@@ -42,7 +42,7 @@
 
 | action | params | 效果 |
 |---|---|---|
-| `navigate` | `page: "/" \| "/twin" \| "/ai" \| "/voice" \| "/wall" \| "/screen"`（或别名 home/twin/ai/voice/wall/screen/数据大屏/企业展示墙…） | 切换到指定页面 |
+| `navigate` | `page: "/" \| "/twin" \| "/ai" \| "/tasks" \| "/wall" \| "/screen"`（或别名 home/twin/ai/tasks/wall/screen/数据大屏/任务展示/企业展示墙…） | 切换到指定页面 |
 | `navigate_rel` | `delta: 1 \| -1` | 向右 / 向左循环切换页面 |
 
 ### 4.2 全局视觉识别
@@ -60,13 +60,13 @@
 | `ai_company` | `action: "next" \| "prev"` | 切换展示企业 |
 | `ai_zone` | `zone: "加速区" \| "国际区" \| "成长区"` | 切换企业分区 |
 
-### 4.4 语音对话页（/voice）
+### 4.4 任务展示页（/tasks）
 
 | action | params | 效果 |
 |---|---|---|
-| `voice_start` | — | 启动语音对话 |
-| `voice_stop` | — | 关闭语音对话 |
-| `voice_refresh` | — | 刷新页面 |
+| `task_refresh` | — | 触发任务页刷新重拉 |
+
+> 语音对话页（/voice）已**暂时关闭**，`voice_start/stop/refresh` 不再处理。
 
 ### 4.5 媒体轮播页（/screen）
 

index.html

@@ -2,7 +2,7 @@
 <html lang="zh-CN">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/png" href="/logo.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>大屏媒体轮播系统</title>
     <link rel="preconnect" href="https://fonts.googleapis.com">

src/App.jsx

@@ -3,8 +3,8 @@ import MediaScreen from './pages/MediaScreen';
 import DataScreen from './pages/DataScreen';
 import DigitalTwin from './pages/DigitalTwin';
 import AiAssistant from './pages/AiAssistant';
-import VoiceAssistant from './pages/VoiceAssistant';
 import CompanyWall from './pages/CompanyWall';
+import TaskDisplay from './pages/TaskDisplay';
 import ScreenLayout from './components/ScreenLayout';
 import './styles/tokens.css';
 
@@ -18,8 +18,8 @@ export default function App() {
           <Route path="/twin" element={<DigitalTwin />} />
           <Route path="/ai" element={<AiAssistant />} />
           <Route path="/screen" element={<MediaScreen />} />
-          {/* 实时语音对话页（React 原生，复用页眉） */}
-          <Route path="/voice" element={<VoiceAssistant />} />
+          {/* 任务展示页（系统任务中心：轮播卡 + 二维码扫码接单） */}
+          <Route path="/tasks" element={<TaskDisplay />} />
           {/* 入驻企业展示墙 */}
           <Route path="/wall" element={<CompanyWall />} />
         </Route>

src/components/AboutDialog.jsx

@@ -1,4 +1,6 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { unbindDevice } from '../utils/tenant';
 
 /* =========================================================
    AboutDialog —— 应用关于弹窗（PineSound 品牌）
@@ -20,6 +22,8 @@ const APP_INFO = {
 };
 
 export default function AboutDialog({ open, onClose }) {
+  const [busy, setBusy] = useState(false);
+  const [confirming, setConfirming] = useState(false);
   // Esc 关闭
   useEffect(() => {
     if (!open) return;
@@ -27,9 +31,25 @@ export default function AboutDialog({ open, onClose }) {
     window.addEventListener('keydown', onKey);
     return () => window.removeEventListener('keydown', onKey);
   }, [open, onClose]);
+  // 关闭弹窗时重置确认/忙碌态，下次打开保持初始
+  useEffect(() => {
+    if (!open) { setConfirming(false); setBusy(false); }
+  }, [open]);
 
   if (!open) return null;
-  return (
+
+  // 两步确认（不用 window.confirm —— Tauri WebView 的原生 confirm 不可靠/可能返回假值）：
+  // 第一次点击进入确认态，再次点击才真正执行解绑；加载中禁止重复触发。
+  const handleUnbind = async () => {
+    if (busy) return;
+    if (!confirming) { setConfirming(true); return; }
+    setBusy(true);
+    await unbindDevice();  // 通知服务端解除 → 清本地 → 刷新回绑定页（内部有超时，不卡顿）
+  };
+
+  // Portal 到 body：页眉含 backdrop-filter，会成为 position:fixed 的包含块，
+  // 使弹窗叠在页眉盒子上；portal 到 body 后方能真正以视口为基准居中。
+  return createPortal(
     <div className="about-overlay" onClick={onClose} role="dialog" aria-modal="true">
       <div className="about-modal" onClick={(e) => e.stopPropagation()}>
         <button className="about-close" type="button" aria-label="关闭" onClick={onClose}>×</button>
@@ -50,10 +70,17 @@ export default function AboutDialog({ open, onClose }) {
         </div>
 
         <div className="about-meta">
-          <span>版本 v{APP_INFO.version}</span>
-          <span>{APP_INFO.copyright}</span>
+          <div className="about-meta-info">
+            <span>版本 v{APP_INFO.version}</span>
+            <span>{APP_INFO.copyright}</span>
+            {confirming && !busy && <span className="about-unbind-hint">再次点击确认解除，点击空白处取消</span>}
+          </div>
+          <button className="about-unbind" type="button" disabled={busy} onClick={handleUnbind}>
+            {busy ? '解除中…' : confirming ? '确认解除绑定' : '解除绑定'}
+          </button>
         </div>
       </div>
-    </div>
+    </div>,
+    document.body
   );
 }

src/components/PageHeader.jsx

@@ -19,6 +19,7 @@ const STATUS_BY_PATH = {
   '/': '数据实时',
   '/twin': '3D 实时',
   '/ai': 'AI 助手',
+  '/tasks': '任务中心',
   '/screen': '媒体播放',
 };
 

src/components/ParkFeed.jsx

@@ -0,0 +1,33 @@
+import React, { useEffect, useState } from 'react';
+import { Broadcast } from '@appica/icons-react';
+import { getApiBase } from '../config';
+import '../styles/datascreen.css';
+
+/** 园区资讯 widget：拉取本园区内容(/park/api/content/feed)，滚动展示标题（大屏）。 */
+export default function ParkFeed() {
+  const [items, setItems] = useState([]);
+  useEffect(() => {
+    let alive = true;
+    fetch(`${getApiBase()}/api/content/feed`, { cache: 'no-store' })
+      .then((r) => r.json())
+      .then((d) => { if (alive) setItems(Array.isArray(d?.items) ? d.items : []); })
+      .catch(() => {});
+    return () => { alive = false; };
+  }, []);
+  if (!items.length) return null;
+  return (
+    <div className="bd-feed" style={{ marginTop: 12 }}>
+      <div className="bd-ticker-title"><Broadcast size={12} style={{ verticalAlign: '-1px', marginRight: 6 }} />园区资讯 <span>({items.length})</span></div>
+      <div className="bd-ticker">
+        <div className="bd-ticker-inner">
+          {[...items, ...items].map((c, i) => (
+            <div className="bd-ticker-item" key={i} title={c.title}>
+              <span className="bd-ticker-dot" />
+              {c.title}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

src/pages/DataScreen.jsx

@@ -2,6 +2,7 @@ import { useState, useEffect, useRef } from 'react';
 import '../styles/datascreen.css';
 import Icon from '../components/Icons';
 import ParkOverviewStrip from '../components/ParkOverviewStrip';
+import ParkFeed from '../components/ParkFeed';
 import { useParkSim } from '../utils/parkData';
 
 /* =========================================================
@@ -43,8 +44,15 @@ const TOOL_RANK = [
 ];
 
 /* ---------- 工具函数 ---------- */
-const fmtInt = (n) => Math.round(n).toLocaleString('zh-CN');
-const fmtWan = (n) => (n >= 10000 ? (n / 10000).toFixed(2) + '亿' : n >= 100 ? n.toFixed(1) + '万' : n.toFixed(1));
+const fmtInt = (n) => (Number.isFinite(Number(n)) ? Math.round(Number(n)).toLocaleString('zh-CN') : '--');
+/** 万/亿格式化：非有限数值（缺失/不一致口径）安全显示 '--'，避免崩溃 */
+const fmtWan = (n) => {
+  const v = Number(n);
+  if (!Number.isFinite(v)) return '--';
+  return (v >= 10000 ? (v / 10000).toFixed(2) + '亿' : v >= 100 ? v.toFixed(1) + '万' : v.toFixed(1));
+};
+/** 安全取数：缺失/非数值回退 0，供直接 .toFixed 调用点使用 */
+const num = (v) => (Number.isFinite(Number(v)) ? Number(v) : 0);
 
 /* 数据源：后端 /api/dashboard/snapshot（离线时本地模拟兜底），见 utils/parkData.js */
 
@@ -265,7 +273,7 @@ function TodayOverview({ d }) {
         </div>
         <div className="bd-cell bd-cell-tools">
           <KpiCard tone="tool" icon="wrench" label="工具调用" value={d.tools.today} unit="次"
-            sub={`累计 ${(d.tools.total / 10000).toFixed(1)}万次 · 成功率 ${d.tools.success}%`} />
+            sub={`累计 ${(num(d.tools.total) / 10000).toFixed(1)}万次 · 成功率 ${d.tools.success}%`} />
         </div>
         <div className="bd-cell bd-cell-jobs">
           <KpiCard tone="job" icon="users" label="带动就业" value={d.jobs.total} unit="人"
@@ -294,10 +302,10 @@ function TokenBig({ d }) {
         </div>
       } />
       <div className="bd-real-metrics">
-        <span>首 token 平均 <b>{d.live.firstToken.toFixed(1)}s</b></span>
+        <span>首 token 平均 <b>{num(d.live.firstToken).toFixed(1)}s</b></span>
         <span>吞吐 <b>{d.live.throughput}</b> tok/s</span>
-        <span>缓存命中 <b>{d.live.cacheHit.toFixed(1)}%</b></span>
-        <span>会话输入 <b>{d.live.inputM.toFixed(1)}M</b> / 输出 <b>{d.live.outputM.toFixed(1)}M</b> tok</span>
+        <span>缓存命中 <b>{num(d.live.cacheHit).toFixed(1)}%</b></span>
+        <span>会话输入 <b>{num(d.live.inputM).toFixed(1)}M</b> / 输出 <b>{num(d.live.outputM).toFixed(1)}M</b> tok</span>
         <span><b>{d.live.rounds}</b> 轮 · <b>{d.live.steps}</b> 步</span>
       </div>
       <div className="bd-big-body">
@@ -338,7 +346,7 @@ function ToolsBig({ d }) {
       <CardHead title="工具调用" icon="wrench" right={
         <div className="bd-head-stats">
           <span className="bd-ost-chip"><i>今日调用</i><b>{fmtInt(d.tools.today)} 次</b></span>
-          <span className="bd-ost-chip"><i>累计调用</i><b>{(d.tools.total / 10000).toFixed(1)}万 次</b></span>
+          <span className="bd-ost-chip"><i>累计调用</i><b>{(num(d.tools.total) / 10000).toFixed(1)}万 次</b></span>
           <span className="bd-ost-chip"><i>成功率</i><b>{d.tools.success}%</b></span>
           <span className="bd-ost-chip"><i>服务节点</i><b>{d.tools.nodes} / {d.tools.nodes} 在线</b></span>
         </div>
@@ -346,7 +354,7 @@ function ToolsBig({ d }) {
       <div className="bd-big-body">
         <div className="bd-big-right bd-big-stats">
           <div className="bd-big-stat"><span>今日调用</span><b>{fmtInt(d.tools.today)}<em>次</em></b></div>
-          <div className="bd-big-stat"><span>累计调用</span><b>{(d.tools.total / 10000).toFixed(1)}<em>万次</em></b></div>
+          <div className="bd-big-stat"><span>累计调用</span><b>{(num(d.tools.total) / 10000).toFixed(1)}<em>万次</em></b></div>
           <div className="bd-big-stat"><span>成功率</span><b>{d.tools.success}<em>%</em></b></div>
           <div className="bd-big-stat"><span>AI 服务节点</span><b>12<em>/12 在线</em></b></div>
         </div>
@@ -569,6 +577,8 @@ export default function DataScreen() {
         </div>
       </section>
 
+      <ParkFeed />
+
       {/* 园区概览（保持在最底部） */}
       <ParkOverviewStrip d={d} />
     </div>

src/pages/TaskDisplay.jsx

@@ -0,0 +1,177 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { QRCodeSVG } from 'qrcode.react';
+import { useTasks } from '../utils/taskData';
+import '../styles/task-display.css';
+
+/* 任务展示页：轮播卡片 + 二维码扫码接单。
+   · 数据：useTasks() 轮询 /park/api/tasks（系统任务中心上墙任务）
+   · 布局：一屏固定 2 行；宽度 ≥1600 → 3 列(2×3=6 张)，否则 → 2 列(2×2=4 张)
+   · 卡片：分类/状态徽标、标题、摘要(2行)、标签、预算、任务ID + 二维码(扫码即领)
+   · 轮播：每页 列数×行数 张，自动翻页；MQTT task_refresh 可触发刷新 */
+
+const ROTATE_MS = 14_000;
+const ROWS = 2;   // 一屏固定 2 行
+
+/* 按宽度计算列数：宽≥1600→3 列，否则 2 列。导出便于测试。 */
+export function columnsFor(width) {
+  const w = width || (typeof window !== 'undefined' ? window.innerWidth : 1280);
+  return w >= 1600 ? 3 : 2;
+}
+
+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);
+
+  // 视口宽度 → 列数（2 或 3 列），随屏幕大小自适应（行数固定 2）
+  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); };
+    window.addEventListener('dpm:task-control', onRefresh);
+    return () => window.removeEventListener('dpm:task-control', onRefresh);
+  }, []);
+
+  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));
+  // 切换：page 为目标页，displayedPage 为当前展示页；切换时先显示「获取最新任务中」动画，1-2 秒后再切
+  const [displayedPage, setDisplayedPage] = useState(0);
+  const [switching, setSwitching] = useState(false);
+  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);
+  }, []);
+
+  // 页切换 → 显示加载动画，SWITCH_MS 后再切到新页
+  const SWITCH_MS = 1200;
+  useEffect(() => {
+    if (page === displayedPage) return;
+    setSwitching(true);
+    const t = setTimeout(() => { setDisplayedPage(page); setSwitching(false); }, SWITCH_MS);
+    return () => clearTimeout(t);
+  }, [page, displayedPage]);
+
+  // 手动/任务刷新 → 同样播放一次「获取最新任务中」
+  useEffect(() => {
+    if (refreshTick === 0) return;
+    setSwitching(true);
+    const t = setTimeout(() => setSwitching(false), SWITCH_MS);
+    return () => clearTimeout(t);
+  }, [refreshTick]);
+
+  const visible = useMemo(() => {
+    if (tasks.length === 0) return [];
+    const start = displayedPage * pageSize;
+    // 不足一页时按行补位（循环取），保证 2 行填满
+    const items = tasks.slice(start, start + pageSize);
+    return items.length ? items : Array.from({ length: pageSize }, (_, i) => tasks[i % tasks.length]);
+  }, [tasks, displayedPage, pageSize]);
+
+  return (
+    <div className="tasks-screen">
+      <div className="tasks-head">
+        <span className="tasks-head-dot" />
+        <span className="tasks-head-title">系统任务中心</span>
+        <span className="tasks-head-sub">扫码即可接单 · 园区企业发标 · 合伙人接单</span>
+        {/* 右上角：仅翻页倒计时 */}
+        <div className="tasks-head-info">
+          <span className="tasks-info">翻页 <b>{pageCount > 1 ? `${countdown}s` : '—'}</b></span>
+        </div>
+      </div>
+
+      {loading && tasks.length === 0 ? (
+        <div className="tasks-loading">正在加载任务…</div>
+      ) : error && tasks.length === 0 ? (
+        <div className="tasks-loading">{error}</div>
+      ) : (
+        <>
+          <div className="tasks-grid" style={{
+            gridTemplateColumns: `repeat(${cols}, 1fr)`,
+            gridTemplateRows: `repeat(${ROWS}, minmax(0, 1fr))`,
+          }}>
+            {visible.map((t) => (
+              <TaskCard key={t.key} task={t} />
+            ))}
+          </div>
+          {pageCount > 1 && (
+            <div className="tasks-dots">
+              {Array.from({ length: pageCount }).map((_, i) => (
+                <span key={i} className={i === displayedPage ? 'tasks-dot on' : 'tasks-dot'} />
+              ))}
+            </div>
+          )}
+          {/* 切换/刷新加载遮罩 */}
+          {switching && (
+            <div className="tasks-switch-overlay">
+              <span className="tasks-spinner" />
+              <span className="tasks-switch-text">获取最新任务中…</span>
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  );
+}
+
+function TaskCard({ task }) {
+  const qrValue = task.scan_payload || task.task_code;
+  return (
+    <div className={task.claimed ? 'task-card claimed' : 'task-card'}>
+      <div className="task-top">
+        <span className="task-cat">{task.category}</span>
+        {task.claimed ? (
+          <span className="task-status taken">已接单</span>
+        ) : (
+          <span className="task-status open">可接单</span>
+        )}
+      </div>
+
+      <div className="task-title">{task.title}</div>
+      {task.summary ? <p className="task-summary">{task.summary}</p> : null}
+
+      <div className="task-tags">
+        {task.tags.slice(0, 4).map((tg) => (
+          <span key={tg} className="task-tag">{tg}</span>
+        ))}
+      </div>
+
+      <div className="task-budget">预算 {task.budgetLabel} · {task.modeLabel}</div>
+
+      <div className="task-meta-row">
+        {task.deadline && <span className="task-meta-item">接单截止 {task.deadline}</span>}
+        {task.deliveryDays > 0 && <span className="task-meta-item">交付时限 {task.deliveryDays} 天</span>}
+        {task.exclusive
+          ? <span className="task-meta-item">独占接单</span>
+          : task.headcount > 0 ? <span className="task-meta-item">限 {task.headcount} 人</span> : null}
+      </div>
+
+      <div className="task-foot">
+        <div className="task-meta">
+          <span className="task-id-label">任务ID · {task.publisherName ? `${task.publisherName} 发包` : '园区发包'}</span>
+          <span className="task-id">{task.task_code || task.id}</span>
+        </div>
+        <div className="task-qr">
+          <QRCodeSVG value={qrValue || 'TASK'} size={72} fgColor="#1d2c44" level="M" />
+          <span className="task-qr-hint">扫码接单</span>
+        </div>
+      </div>
+    </div>
+  );
+}

src/styles/datascreen.css

@@ -2996,6 +2996,8 @@
 .about-modal {
   position: relative;
   width: min(420px, calc(100vw - 48px));
+  max-height: calc(100vh - 48px);
+  overflow-y: auto;
   background: #fff;
   border-radius: 16px;
   padding: 28px 30px 22px;
@@ -3087,10 +3089,43 @@
   padding-top: 14px;
   border-top: 1px dashed #e3ecf7;
   display: flex;
+  align-items: center;
   justify-content: space-between;
+  gap: 12px;
   font-size: 11px;
   color: #9fb0c6;
 }
+.about-meta-info {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  line-height: 1.4;
+}
+.about-unbind-hint {
+  margin-top: 3px;
+  color: #e5484d;
+  font-size: 11px;
+}
+.about-unbind {
+  flex: none;
+  padding: 6px 14px;
+  border-radius: 8px;
+  border: 1px solid rgba(240, 68, 56, 0.35);
+  background: #fff;
+  color: #e5484d;
+  font-size: 12px;
+  line-height: 1;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+.about-unbind:hover {
+  background: #fef2f2;
+  border-color: rgba(240, 68, 56, 0.6);
+}
+.about-unbind:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
 
 /* 页眉开发署名（© 图标 + 公司名 + 开发；空间不足自动折叠为两行） */
 .bd-credit {

src/styles/task-display.css

@@ -0,0 +1,150 @@
+/* ============ 任务展示页（系统任务中心 · 轮播卡 + 二维码扫码接单）============ */
+
+.tasks-screen {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+  padding: 24px 34px;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  position: relative;   /* 供切换加载遮罩定位于此 */
+  background: radial-gradient(ellipse at 20% 0%, rgba(79, 135, 255, 0.08), transparent 55%),
+    radial-gradient(ellipse at 80% 100%, rgba(23, 178, 106, 0.06), transparent 55%);
+}
+
+.tasks-head {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  border-bottom: 1px solid var(--bd-line, #e3ecf7);
+  padding-bottom: 14px;
+}
+.tasks-head-dot {
+  width: 9px; height: 9px; border-radius: 50%;
+  background: var(--bd-green, #17b26a);
+  box-shadow: 0 0 10px var(--bd-green, #17b26a);
+}
+.tasks-head-title { font-size: 22px; font-weight: 700; color: var(--bd-ink, #1d2c44); letter-spacing: 0.02em; }
+.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: baseline;
+  gap: 8px;
+  white-space: nowrap;
+}
+.tasks-info { font-size: 13px; color: var(--bd-ink, #1d2c44); }
+.tasks-info b { font-weight: 700; color: var(--bd-blue, #2f6bff); }
+.tasks-info.hint { font-size: 12px; color: var(--bd-sub, #7d8fa9); }
+.tasks-info-sep { color: var(--bd-sub, #7d8fa9); }
+
+.tasks-loading {
+  color: var(--bd-sub, #7d8fa9); font-size: 15px;
+  display: flex; align-items: center; justify-content: center; height: 60%;
+}
+
+.tasks-grid {
+  flex: 1;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 18px;
+  align-content: start;
+  overflow: hidden;
+}
+
+.task-card {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 20px 20px 16px;
+  border-radius: 16px;
+  background: rgba(255, 255, 255, 0.9);
+  border: 1px solid var(--bd-line, #e3ecf7);
+  backdrop-filter: blur(10px);
+  box-shadow: 0 8px 24px rgba(29, 44, 68, 0.06);
+  transition: all 0.25s ease;
+}
+.task-card:hover { transform: translateY(-3px); border-color: var(--bd-blue, #2f6bff); }
+.task-card.claimed { background: rgba(255, 249, 235, 0.92); border-color: rgba(247, 144, 9, 0.4); }
+
+.task-top { display: flex; align-items: center; gap: 8px; }
+.task-cat {
+  font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px;
+  background: rgba(47, 107, 255, 0.12); color: var(--bd-blue, #2f6bff);
+}
+.task-status { margin-left: auto; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
+.task-status.open { background: rgba(23, 178, 106, 0.14); color: var(--bd-green, #17b26a); }
+.task-status.taken { background: rgba(247, 144, 9, 0.16); color: var(--bd-orange, #f79009); }
+
+.task-title { font-size: 18px; font-weight: 700; color: var(--bd-ink, #1d2c44); line-height: 1.3; }
+.task-summary {
+  margin: 0; font-size: 13px; line-height: 1.55; color: var(--bd-sub, #7d8fa9);
+  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
+}
+
+.task-tags { display: flex; flex-wrap: wrap; gap: 6px; }
+.task-tag {
+  font-size: 11px; padding: 2px 8px; border-radius: 999px;
+  background: rgba(29, 44, 68, 0.06); color: var(--bd-ink, #1d2c44);
+}
+
+.task-budget { font-size: 15px; font-weight: 700; color: var(--bd-blue, #2f6bff); }
+
+.task-meta-row { display: flex; flex-wrap: wrap; gap: 8px; }
+.task-meta-item {
+  font-size: 11px; padding: 2px 8px; border-radius: 6px;
+  background: rgba(29, 44, 68, 0.05); color: var(--bd-sub, #7d8fa9);
+}
+
+.task-foot {
+  margin-top: auto;
+  display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
+  border-top: 1px solid var(--bd-line, #e3ecf7); padding-top: 12px;
+}
+.task-meta { display: flex; flex-direction: column; gap: 4px; }
+.task-id-label { font-size: 11px; color: var(--bd-sub, #7d8fa9); }
+.task-id { font-size: 14px; font-weight: 600; color: var(--bd-ink, #1d2c44); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
+
+.task-qr { display: flex; flex-direction: column; align-items: center; gap: 4px; }
+.task-qr svg { border-radius: 8px; background: #fff; padding: 4px; }
+.task-qr-hint { font-size: 11px; color: var(--bd-blue, #2f6bff); font-weight: 600; }
+
+.task-dots { display: flex; justify-content: center; gap: 8px; padding-bottom: 6px; }
+.task-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(29, 44, 68, 0.15); transition: all 0.25s; }
+.task-dot.on { background: var(--bd-blue, #2f6bff); width: 20px; border-radius: 999px; }
+
+/* ---- 切换/刷新加载遮罩：文字(获取最新任务中) + 旋转动画 ---- */
+.tasks-switch-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 5;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 14px;
+  background: rgba(255, 255, 255, 0.72);
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+}
+.tasks-spinner {
+  width: 42px;
+  height: 42px;
+  border-radius: 50%;
+  border: 4px solid rgba(47, 107, 255, 0.18);
+  border-top-color: var(--bd-blue, #2f6bff);
+  animation: tasks-spin 0.8s linear infinite;
+}
+.tasks-switch-text {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--bd-blue, #2f6bff);
+  letter-spacing: 0.05em;
+}
+@keyframes tasks-spin {
+  to { transform: rotate(360deg); }
+}

src/utils/pageNav.js

@@ -4,7 +4,7 @@ import { Sfx } from './sounds';
 
 /* =========================================================
    页面循环导航 —— 左右方向键切换大屏页面
-   顺序：数据大屏 → 数字孪生 → AI 助手 → 媒体轮播（循环）
+   顺序：数据大屏 → 数字孪生 → AI 助手 → 任务展示 → 企业展示墙 → 媒体轮播（循环）
    管理后台不参与循环切换，仅在登录后进入
    ← 向左切换 · → 向右切换
    ========================================================= */
@@ -13,7 +13,7 @@ export const PAGE_ORDER = [
   { path: '/', label: '数据大屏' },
   { path: '/twin', label: '数字孪生' },
   { path: '/ai', label: 'AI 助手' },
-  { path: '/voice', label: '语音对话' },
+  { path: '/tasks', label: '任务展示' },
   { path: '/wall', label: '企业展示墙' },
   { path: '/screen', label: '媒体轮播' },
 ];

src/utils/parkData.js

@@ -13,8 +13,13 @@ import { tenantFetch } from './tenant';
    工具调用：按每次调用约 2 万 tokens 折算（今日 ≈ 3.3 万次）
    ========================================================= */
 
-export const fmtInt = (n) => Math.round(n).toLocaleString('zh-CN');
-export const fmtWan = (n) => (n >= 10000 ? (n / 10000).toFixed(2) + '亿' : n >= 100 ? n.toFixed(1) + '万' : n.toFixed(1));
+export const fmtInt = (n) => (Number.isFinite(Number(n)) ? Math.round(Number(n)).toLocaleString('zh-CN') : '--');
+/** 万/亿格式化：非有限数值（缺失/不一致口径）安全显示 '--'，避免崩溃 */
+export const fmtWan = (n) => {
+  const v = Number(n);
+  if (!Number.isFinite(v)) return '--';
+  return (v >= 10000 ? (v / 10000).toFixed(2) + '亿' : v >= 100 ? v.toFixed(1) + '万' : v.toFixed(1));
+};
 
 /* ---------- 真实锚点（官方统计《2026年7月运行情况统计表》+ 附件1省级材料 + 宣传册） ---------- */
 const REAL = {
@@ -207,6 +212,34 @@ function nextSnapshot(s) {
   };
 }
 
+/* ---------- 后端快照归一化：字段缺失/为 null 时用本地真实锚点补齐，避免大屏崩溃 ---------- */
+function mergeObj(base, src) {
+  if (!src || typeof src !== 'object') return base;
+  const out = { ...base };
+  for (const k of Object.keys(src)) if (src[k] !== undefined && src[k] !== null) out[k] = src[k];
+  return out;
+}
+function normalizeSnapshot(d) {
+  const base = initSnapshot(); // 完整本地默认（真实锚点），作为缺省兜底
+  if (!d || typeof d !== 'object') return base;
+  return {
+    ...base,
+    ...d,
+    live: mergeObj(base.live, d.live),
+    token: mergeObj(base.token, d.token),
+    tools: mergeObj(base.tools, d.tools),
+    projects: mergeObj(base.projects, d.projects),
+    jobs: mergeObj(base.jobs, d.jobs),
+    revenue: mergeObj(base.revenue, d.revenue),
+    cumulative: mergeObj(base.cumulative, d.cumulative),
+    park: mergeObj(base.park, d.park),
+    zones: Array.isArray(d.zones) ? d.zones : base.zones,
+    companies: Array.isArray(d.companies) ? d.companies : base.companies,
+    industryMix: Array.isArray(d.industryMix) ? d.industryMix : base.industryMix,
+    feed: Array.isArray(d.feed) ? d.feed : base.feed,
+  };
+}
+
 export function useParkSim() {
   const [snap, setSnap] = useState(initSnapshot);
   useEffect(() => {
@@ -216,7 +249,7 @@ export function useParkSim() {
         const res = await tenantFetch('/api/dashboard/snapshot', { cache: 'no-store' });
         if (!res.ok) throw new Error(`HTTP ${res.status}`);
         const data = await res.json();
-        if (!cancelled && data && data.token) setSnap(data);
+        if (!cancelled && data && data.token) setSnap(normalizeSnapshot(data));
       } catch {
         // 后端不可用：本地真实快照继续（仅 TOKEN/工具轻微波动）
         if (!cancelled) setSnap((p) => nextSnapshot(p));

src/utils/taskData.js

@@ -0,0 +1,79 @@
+/* 任务展示页数据：轮询 /park/api/tasks（系统任务中心上墙任务），带租户身份。
+   参考 parkData.js 的 useParkSim 轮询 + 归一化防崩模式。 */
+import { useEffect, useRef, useState } from 'react';
+import { tenantFetch } from './tenant';
+
+const POLL_MS = 8_000;
+
+function normalizeTask(raw, idx) {
+  const t = raw || {};
+  return {
+    id: t.id || '',
+    task_code: t.task_code || '',
+    scan_payload: t.scan_payload || t.task_code || '',
+    title: t.title || '未命名任务',
+    category: t.category || '综合',
+    summary: t.summary || '',
+    tags: Array.isArray(t.tags) ? t.tags : [],
+    budgetMin: Number(t.budget_min) || 0,
+    budgetMax: Number(t.budget_max) || 0,
+    budgetLabel: fmtBudget(t.budget_min, t.budget_max),
+    mode: t.mode || 'grab',
+    modeLabel: MODE_LABEL[t.mode] || '抢单',
+    deadline: t.deadline || '',
+    deliveryDays: Number(t.delivery_days) || 0,
+    headcount: Number(t.headcount) || 0,
+    exclusive: !!t.exclusive,
+    publisherName: t.publisher_name || '',
+    status: t.status || 'published',
+    claimed: t.status === 'claimed' || t.status === 'doing' || !!t.claimed_by,
+    claimedBy: t.claimed_by || '',
+    claimedAt: t.claimed_at || '',
+    key: t.id || `task-${idx}`,
+  };
+}
+
+const MODE_LABEL = {
+  grab: '抢单', bid: '竞标', assign: '指派', recommend: '推荐',
+};
+
+function fmtBudget(min, max) {
+  const n = Number(min) || 0, x = Number(max) || 0;
+  if (!n && !x) return '面议';
+  if (!x) return `¥${n}`;
+  if (n === x) return `¥${n}`;
+  return `¥${n}~¥${x}`;
+}
+
+export function useTasks() {
+  const [tasks, setTasks] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+  const aliveRef = useRef(true);
+
+  useEffect(() => {
+    aliveRef.current = true;
+    setLoading(true);
+    const load = async () => {
+      try {
+        const res = await tenantFetch('/api/tasks');
+        if (!res.ok) throw new Error(`任务加载失败(${res.status})`);
+        const body = await res.json();
+        const items = Array.isArray(body?.items) ? body.items : [];
+        if (aliveRef.current) {
+          setTasks(items.map(normalizeTask));
+          setError('');
+        }
+      } catch (e) {
+        if (aliveRef.current) setError(e.message || '任务加载失败');
+      } finally {
+        if (aliveRef.current) setLoading(false);
+      }
+    };
+    load();
+    const timer = setInterval(load, POLL_MS);
+    return () => { aliveRef.current = false; clearInterval(timer); };
+  }, []);
+
+  return { tasks, loading, error };
+}

src/utils/tenant.js

@@ -42,6 +42,22 @@ export function clearBinding() {
   window.location.href = '/';
 }
 
+/** 解除大屏与园区的绑定：先通知服务端清除该设备绑定，再清本地并回到待绑定页。
+ *  服务端请求带 4s 硬超时：无论服务端成功 / 不可达 / 鉴权失败，都会继续本地解绑，
+ *  保证不会因请求挂起而卡住界面。 */
+export async function unbindDevice() {
+  try {
+    const ctrl = new AbortController();
+    const timer = setTimeout(() => ctrl.abort(), 4000);
+    await tenantFetch(`/api/devices/${getDeviceId()}/unbind`, { method: 'POST', signal: ctrl.signal });
+    clearTimeout(timer);
+  } catch (e) {
+    /* 超时 / 网络错误 / 鉴权异常：忽略，继续本地解绑 */
+  }
+  // 桌面端清理本地绑定状态，并刷新回绑定页（main.jsx 见 isDeviceBound()=false 渲染 BindScreen）
+  clearBinding();
+}
+
 /** 带设备 token 的 fetch：附 Authorization(设备 token)。 */
 export function tenantFetch(path, options = {}) {
   const tok = getDeviceToken();

src/utils/useMqttControl.js

@@ -1,8 +1,8 @@
 import { useEffect } from 'react';
 import { useNavigate, useLocation } from 'react-router-dom';
 import { onMqttMessage, connectMqtt, publishMqtt, getClientId, useMqttStatus } from './mqtt';
-import { MQTT_TOPIC_HEARTBEAT, MQTT_TOPIC_COMMAND, getApiBase as API_BASE } from '../config';
-import { getTenantId } from './tenant';
+import { MQTT_TOPIC_HEARTBEAT, MQTT_TOPIC_COMMAND, MQTT_TOPIC_BIND, getApiBase as API_BASE } from '../config';
+import { getTenantId, clearBinding } from './tenant';
 import { Sfx } from './sounds';
 import { PAGE_ORDER } from './pageNav';
 import { aiStatus } from './statusBus';
@@ -31,6 +31,7 @@ const PAGE_ALIAS = {
   home: '/', '数据大屏': '/', '首页': '/',
   twin: '/twin', '数字孪生': '/twin', '3d': '/twin',
   ai: '/ai', 'ai助手': '/ai',
+  tasks: '/tasks', '任务展示': '/tasks', task: '/tasks',
   screen: '/screen', '媒体轮播': '/screen', media: '/screen',
   wall: '/wall', '企业展示墙': '/wall', '企业墙': '/wall', '展示墙': '/wall',
 };
@@ -61,6 +62,19 @@ export function useMqttControl() {
     }).catch(() => {});
   }, [mqttStatus]);
 
+  // 后端主动解绑：监听绑定频道，收到 unbound 事件 → 清理本地绑定并退出到待绑定页
+  // （大屏已绑定后仍订阅 bind/<clientId>，见 mqtt.js subscribe；unbind 后 main.jsx 见
+  //   isDeviceBound()=false 渲染 BindScreen）
+  useEffect(() => {
+    connectMqtt();
+    const off = onMqttMessage((topic, data) => {
+      if (topic === `${MQTT_TOPIC_BIND}/${getClientId()}` && data && data.event === 'unbound') {
+        clearBinding();
+      }
+    });
+    return off;
+  }, []);
+
   // 大屏在线心跳（后端据此统计在线大屏数）
   useEffect(() => {
     connectMqtt();
@@ -170,19 +184,10 @@ export function useMqttControl() {
           }));
           break;
 
-        // ── 语音对话页操作 ──
-        case 'voice_start':
-          // admin 主动问候测试：携带 text；若不在 /voice 页先跳转，文本暂存 sessionStorage
-          if (cmd.params?.text) sessionStorage.setItem('dpm_voice_greet', cmd.params.text);
-          if (location.pathname !== '/voice') navigate('/voice');
-          window.dispatchEvent(new CustomEvent('dpm:voice-control', {
-            detail: { action: 'start', text: cmd.params?.text || '' },
-          }));
-          break;
-        case 'voice_stop':
-        case 'voice_refresh':
-          window.dispatchEvent(new CustomEvent('dpm:voice-control', {
-            detail: { action: cmd.action.replace('voice_', '') },
+        // ── 任务展示页操作（语音页已暂时关闭，voice_* 指令不再处理） ──
+        case 'task_refresh':
+          window.dispatchEvent(new CustomEvent('dpm:task-control', {
+            detail: { action: 'refresh', ...(cmd.params || {}) },
           }));
           break;