duxingchen/track
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 扫码页双模式 — 看板跳转显示任务全景(无摄像头), 直接访问保留扫码

Browse Source
This commit is contained in:
duxingchen
2026-08-12 14:51:36 +08:00
parent c90b77801d
commit e0a5a572cc
1 changed files with 31 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
frontend/src/pages/ScanPage.tsx
View File

@ -42,6 +42,7 @@ export default function ScanPage() {
}, []);
// URL 参数自动查询（支持从看板等外部跳转）
const isEmbedded = !!searchParams.get("sn");
useEffect(() => {
const sn = searchParams.get("sn");
if (sn) doQuery(sn.trim());
@ -58,10 +59,34 @@ export default function ScanPage() {
return (
<div className="flex min-h-full flex-col pb-20 pt-safe">
<div className="flex items-center gap-2 px-4 pt-2">
<QrCode className="h-5 w-5 text-blue-600" />
<h2 className="text-lg font-bold text-gray-800">扫码干活</h2>
</div>
{/* 外部跳转模式：干净的任务全景视图 */}
{isEmbedded ? (
<>
<div className="flex items-center gap-2 px-4 pt-2">
<QrCode className="h-5 w-5 text-blue-600" />
<h2 className="text-lg font-bold text-gray-800">任务全景 · 流转树</h2>
<span className="ml-auto text-xs text-gray-400">从看板跳转</span>
</div>
{product && (
<div className="mt-3 px-4">
<div className="flex items-center gap-2 rounded-lg bg-white px-4 py-2.5 shadow-sm">
<span className="text-xs text-gray-400">宏观状态</span>
<span className={\`flex-1 text-sm font-bold \${product.overall_status ? "text-blue-600" : "text-red-500"}\`}>
{product.overall_status || "未设定"}
</span>
</div>
</div>
)}
<div className="mt-3 px-4">
<QueryResult loading={loading} error={error} product={product} />
</div>
</>
) : (
<>
<div className="flex items-center gap-2 px-4 pt-2">
<QrCode className="h-5 w-5 text-blue-600" />
<h2 className="text-lg font-bold text-gray-800">扫码干活</h2>
</div>
{/* 摄像头扫码 — 点击启动时才动态加载 html5-qrcode */}
<div className="mt-3 px-4">
@ -109,6 +134,8 @@ export default function ScanPage() {
<div className="mt-3 px-4">
<QueryResult loading={loading} error={error} product={product} />
</div>
</>
)}
</div>
);
}