fix(home): center common service grid

04-新项目源码_source/pri-smart-hospital-miniprogram/pages/tabBar/index/index.wxss

@@ -3055,10 +3055,12 @@ page {
   position: relative;
   display: flex;
   min-width: 0;
+  width: 100%;
   min-height: 132rpx;
   flex-direction: column;
   align-items: center;
   justify-content: flex-start;
+  justify-self: stretch;
   gap: 10rpx;
   padding: 0 4rpx;
   color: #142540;

04-新项目源码_source/pri-smart-hospital-miniprogram/tests/home-convenience-layout.offline.test.js

@@ -0,0 +1,42 @@
+const assert = require('assert');
+const fs = require('fs');
+const path = require('path');
+
+const root = path.resolve(__dirname, '..');
+const wxss = fs.readFileSync(
+  path.join(root, 'pages/tabBar/index/index.wxss'),
+  'utf8'
+);
+
+function readRule(selector) {
+  const escaped = selector.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  const match = wxss.match(new RegExp(`${escaped}\\s*\\{([^}]+)\\}`));
+  assert(match, `missing WXSS rule: ${selector}`);
+  return match[1];
+}
+
+const gridRule = readRule(
+  '.home-prototype-faithful .home-convenience__grid'
+);
+const cellRule = readRule(
+  '.home-prototype-faithful .home-convenience__cell'
+);
+
+assert(
+  gridRule.includes('grid-template-columns: repeat(4, minmax(0, 1fr));'),
+  'common services must retain four equal grid tracks'
+);
+assert(
+  cellRule.includes('width: 100%;'),
+  'each common-service cell must override the legacy 25% flex width'
+);
+assert(
+  cellRule.includes('justify-self: stretch;'),
+  'each common-service cell must stretch across its complete grid track'
+);
+assert(
+  cellRule.includes('align-items: center;'),
+  'icon and label must remain centered inside the full grid track'
+);
+
+process.stdout.write('home-convenience-layout.offline.test.js: passed\n');

design-qa.md

@@ -8,12 +8,16 @@
 - Cross-tab target screenshot：`/var/folders/2t/tmcq4gwd35s1jnh5wd3y1w3w0000gn/T/codex-clipboard-dcfdc11a-8725-4374-92f6-17d88f7db408.png`
 - Cross-tab pre-fix screenshot：`/var/folders/2t/tmcq4gwd35s1jnh5wd3y1w3w0000gn/T/codex-clipboard-c460854e-b3d8-4916-95eb-5ab20d34b378.png`
 - Cross-tab focused comparison：`/Users/anubis/.codex/visualizations/2026/07/29/019faca7-819d-7a93-b65a-9e7144433106/tabbar-home-vs-mine-before.png`
+- Common-services pre-fix screenshot：`/var/folders/2t/tmcq4gwd35s1jnh5wd3y1w3w0000gn/T/codex-clipboard-e49939de-b35f-47b4-807a-59c0b876b18e.png`
+- Common-services focused comparison：`/Users/anubis/.codex/visualizations/2026/07/29/019faca7-819d-7a93-b65a-9e7144433106/common-services-reference-vs-native-before.png`
 - Source pixels：392 × 852
 - Implementation pixels：392 × 852
 - CSS viewport：392 × 852
 - Density normalization：两侧均为 1× 像素截图；实现截图从 1280 × 852 浏览器全页截图中居中裁出 392 × 852 内容区。
 - Cross-tab pixels：目标截图 407 × 876；整改前“我的”截图 416 × 867；局部对照分别截取底部 150px，并将第二侧归一为 407 × 150 后横向拼接。
 - Cross-tab post-fix implementation：当前环境无法运行微信开发者工具，尚无整改后原生截图；不得以源码检查冒充原生视觉通过。
+- Common-services pixels：原型 392 × 852；整改前实机截图 427 × 867；局部对照分别截取 130px 高区域，并将实机侧归一为 392 × 130 后横向拼接。
+- Common-services post-fix implementation：当前环境无法运行微信开发者工具，尚无整改后原生截图；源码与离线布局门禁只用于确认冲突已消除。
 - State：第一张近视防控 Banner、已选择医院与患者、有待办、4 个首要服务、2 位推荐医生、首页选中 Tab；补充对照覆盖“我的”页面选中 Tab。
 - Focused comparison：首页整体对照中各区域可清晰阅读；跨页面导航另以 814 × 150 局部并排图对照首页目标态和“我的”整改前状态。
 
@@ -55,6 +59,13 @@
 - Fixes：移除首页路由条件，五个一级页面始终渲染同一套 Phosphor 图标、140rpx 导航高度、20rpx 文案和蓝色缴费强调按钮；保留当前路由选中态、动态就诊指引显隐和消息角标逻辑；增加 `tabbar-visual-consistency.offline.test.js` 回归门禁。
 - Post-fix evidence：WXML/WXSS 仅保留一套跨页面导航结构，离线门禁验证所有一级 Tab 的图标来源、选中态和缴费强调不再依赖首页路由。整改后微信原生复拍仍待项目负责人执行，故本轮保持 `blocked`。
 
+### Round 4
+
+- Earlier P2 finding：项目负责人实机截图显示，“常用服务”四个入口整体贴向各自栅格轨道左侧，第一项尤其接近屏幕边缘；局部对照可见目标图标中心约位于 12.5% / 37.5% / 62.5% / 87.5%，实机实现则整体左移。
+- Root cause：基础样式 `.home-convenience__cell { width: 25%; }` 原用于 flex 四列；高还原样式把父容器切换为四列 grid，却没有覆盖子项宽度，导致每个 grid item 只占自身轨道的 25%，内部居中实际发生在这个被压缩的小盒子中。
+- Fixes：在高还原作用域内明确设置单元 `width: 100%` 和 `justify-self: stretch`，使每个单元占满完整轨道；保留图标、文案和真实点击路由。新增 `home-convenience-layout.offline.test.js` 防止旧宽度再次覆盖。
+- Post-fix evidence：静态布局门禁确认四列等宽 grid、单元 100% 轨道宽度、轨道拉伸及内部居中同时成立。整改后微信原生复拍仍待项目负责人执行，故本轮保持 `blocked`。
+
 ## Implementation checklist
 
 - [x] 顶部品牌、院区、搜索、通知
@@ -65,6 +76,7 @@
 - [x] 常用服务真实入口
 - [x] 真实推荐医生前两项与全部医生入口
 - [x] 五个一级页面统一 TabBar
+- [x] 常用服务四列轨道居中
 - [x] 素材来源与 MIT 许可
 - [ ] 微信开发者工具与真机同状态截图
 

openspec/changes/pri-mp-home-001-home-ui-style-experiment/specs/home-hospital/spec.md

@@ -79,3 +79,11 @@
 - Then 对应页面 SHALL 保持与首页一致的图标、尺寸、选中态、缴费强调按钮和消息角标
 - And 当前页面 SHALL 仅高亮自己的导航项
 - And TabBar 路由、动态显隐和角标数据 SHALL 保持原有行为
+
+#### Scenario: 常用服务使用四列布局
+
+- Given 首页展示门诊缴费、处方记录、眼健康档案和医院导航
+- When 常用服务区域按四列栅格渲染
+- Then 每个服务单元 SHALL 占满自己的等宽栅格轨道
+- And 图标与文案 SHALL 在各自轨道内水平居中
+- And 旧版 flex 单元宽度 MUST NOT 压缩新版 grid 单元

openspec/changes/pri-mp-home-001-home-ui-style-experiment/tasks.md

@@ -37,3 +37,10 @@
 - [x] 5.3 保留就诊指引动态显隐、消息角标、页面切换和防重复点击逻辑。
 - [x] 5.4 增加跨页面导航一致性离线门禁，并完成源码、OpenSpec 与差异检查。
 - [x] 5.5 使用项目负责人提供的实机截图记录整改依据；微信开发者工具/真机复拍作为最终视觉终检项。
+
+## 6. 第四轮常用服务栅格居中整改
+
+- [x] 6.1 根据项目负责人实机截图定位常用服务整体左偏原因。
+- [x] 6.2 覆盖旧版 flex 遗留宽度，使四个单元分别占满等宽 grid 轨道并居中。
+- [x] 6.3 增加常用服务栅格布局离线门禁，完成源码、OpenSpec 与差异检查。
+- [x] 6.4 更新视觉 QA 证据；微信开发者工具/真机复拍作为最终视觉终检项。