feat(bigscreen): 任务展示页 + 暂时关闭语音对话页 + 导航/文档同步
- App.jsx 移除 /voice、新增 /tasks→TaskDisplay。 - pageNav PAGE_ORDER 移除 voice、加 tasks(方向键/页眉/MQTT navigate_rel 自动跟随)。 - useMqttControl：PAGE_ALIAS 加 tasks；移除 voice_*、改 task_refresh。 - PageHeader STATUS_BY_PATH 加 /tasks。 - 新增 TaskDisplay.jsx + task-display.css：轮播卡(分类/状态/标题/摘要/标签/预算/任务ID+QRCodeSVG 扫码接单)、useTasks 轮询 /park/api/tasks、接受 MQTT task_refresh。 - 新增 utils/taskData.js(useTasks, tenantFetch 带租户身份)。 - docs/mqtt-commands.md：navigate 列表/语音章节标注语音页关闭、tasks 页指令。 Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Pine
@@ -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 {
|
||||
|
||||
@@ -0,0 +1,98 @@
|
||||
/* ============ 任务展示页（系统任务中心 · 轮播卡 + 二维码扫码接单）============ */
|
||||
|
||||
.tasks-screen {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 18px;
|
||||
padding: 24px 34px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
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-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-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; }
|
||||
Reference in New Issue
Block a user