# 2026-09-24 医院救援 APP(uniappx + Tmui4)UI 全量重构 ## 目标 按 `mobile-design/v2/hospital-rescue-ui-v2.html`(35 屏设计稿)在 uniappx 项目中 1:1 还原 UI,并实现全部交互,兼容 APP + H5,双角色(救援端 / 仓管端)。 ## 已完成 - **清空 pages/** 并重建:33 个页面(35 屏中 s07/s42 合并为事件中心同一页的执行状态 Tab) - **设计令牌落地**:新增 `common/styles/hr-design.css`(App.uvue 全局 @import),因 uvue 限制做了三类适配: 1. 不支持 `::before/::after` → 全部改为实体元素(如 `.hr-sec-bar`、`.bm-*` 人体图鉴) 2. 不支持 CSS 变量 `var()` → 颜色全部写实 3. 不用 `grid` / `gap` → 全部 flex + margin;只使用 class 选择器(避免复合/后代选择器风险) - **全局配置**:main.uts 设 `designSize:375 / unit:'px' / color:'#2563EB' / dark:'light'`;manifest 改为「医院救援管理平台 v2.0.0」 - **mock 数据层**:`mock/types.uts`(类型)+ `mock/index.uts`(数据),页面只依赖类型,后续换接口只改 mock 层 - **角色体系**:`utils/role.uts`(hrSession / 双角色 TabBar / canAccess 权限拦截)、`utils/nav.uts`(统一跳转+权限拦截)、`utils/quiz.uts`(答题态,供答题页与答题卡共享) - **16 个通用组件**(components/,easycom):hr-page / hr-statusbar / hr-card / hr-sec / hr-lrow / hr-chip / hr-wb / hr-pc / hr-timeline / hr-tip / hr-empty / hr-progress / hr-wband / hr-tabbar / hr-scan-cam / hr-rec-list - **复杂交互**:真实相机连续扫码(x-mlkit-scannig-u,批量处置/批量转运/出入库)、P0 全屏推送 60s 倒计时接单、2D 人体图鉴伤情标记增删、多模态上传(chooseImage)、答题卡联动、离线队列模拟重传、设备 5 项自检门禁、接收医院床位满员拦截 - **双角色 TabBar**:救援端 3 Tab(首页/事件/我的)、仓管端 5 Tab(扫码/仓库/设备/消息/我),登录页可切换角色演示 ## 关键坑(务必记住) - uvue 语法:`computed() : T => {}` 是**非法**写法,必须 `computed(() : T => { ... })`——本次批量修了 17 处 - Vue API 需要**显式** `import { ref, computed } from 'vue'`,不能依赖自动注入 - `onLoad` 参数用下标访问:`opt['id']`(官方示例 `event["post_id"] ?? ""`),不要用 `getString` - 视频/取景框不能用 `aspect-ratio` → 用 `uni.getWindowInfo().windowWidth` 计算像素高度 - 覆盖层(底部选择器/全屏推送)通过 hr-page 的 `overlay` 具名插槽渲染,且在根节点上需 `position:relative` - 三段式作业页(批量处置/转运)用 hr-page 的 `no-scroll`,内部自管滚动区 - 图片/图表类设计元素(圆环→x-circle-progress、人体图→几何 view 拼装)不能照搬 SVG ## 静态校验方法(可复用) 用 esbuild 的 `transformSync(code,{loader:'ts'})` 校验 `