统一单项目大屏与管理端全屏布局

需求:/display/{项目编码} 参照管理端项目大屏布局展示。

实现:抽取共享大屏组件,补充公开累计取号与最新号码字段,并完善桌面及窄屏适配。

验证:前端61项测试、TypeScript、Vite构建以及Go测试、vet、build均通过。
This commit is contained in:
2026-07-31 18:43:10 +08:00
parent d26d36c3d3
commit 3f4a9bf398
12 changed files with 489 additions and 339 deletions

View File

@@ -619,3 +619,15 @@
- 修复后 1280×720当前卡片与右侧摘要均为 `top=124, bottom=542`,最近叫号栏为 `top=558, bottom=702`,重叠量为 0页面宽高与视口一致。
- 修复后 1920×1080主内容与底栏重叠量为 0页面无横纵向溢出右侧号码区间和等待时间的测量间距为 18px不再互相覆盖。
- 390×844 下页头切换为两行居中布局,日期和时间均落在视口内;内容使用普通纵向滚动,无横向溢出。
# 2026-07-31 单项目大屏复用管理端全屏布局
- 用户截图为 2048×1152 的 16:9 景区电视大屏,结构依次是白色时间顶栏、当前叫号主卡、四项统计、后续号段卡。
- 截图与仓库 `AdminPage.tsx``ProjectScreenTile` 的全屏 DOM、文案和字段完全对应不需要另造一套页面结构。
- 线上 `/admin/display/token` 会跳转到员工页,未登录访问 `/admin/display` 当前仍显示管理端登录;线上行为不作为本地新布局的源码基准。
- 单项目快照已有项目名、当前/最近批次、等待票数、等待人数和已体验人数,但暂未声明 `latest_ticket_number``issued_ticket_count`;这两项是参考布局的明确指标。
- 最稳妥的复用方式是让项目大屏组件支持独立展示修饰类,并让该修饰类与 `:fullscreen` 共用相同 CSS避免复制大段样式后发生漂移。
- 本地代理真实 `YYHHC` 数据后2048×1152 下顶栏、主卡和后续号段卡依次为 `0146``163594``6111117`,页面滚动尺寸与视口完全一致。
- 1280×720 下四个统计卡各约 233px 宽,内容 `scrollWidth=231px`,没有裁切;整页宽高仍与视口一致。
- 390×844 下使用两列统计卡和较小的号段字号,号段与等待时间保留 20px 间距;页面 `scrollWidth=390``scrollHeight=844`,无横向或纵向溢出。
- 浏览器日志只有 Vite 连接与热更新调试信息,无 warning 或 error。