Merge pull request 'sync: visual-diff-pencil 增强结构检查 - 递归检查所有层级+bottomNav全局配置检查' (#35) from sync/d8d-skills-visual-diff-enhance-20260414-051824 into master

Reviewed-on: http://gitea.d8d.fun/d8dfun/bmad-method-template/pulls/35

.claude/skills/d8d-dev/iron-laws.md

@@ -191,8 +191,11 @@ Epic N+1 完成
   （即使上一个 Story 也是管理后台，也要确认当前视口正确）
 
 验证小程序页面之前：
-  browser_resize → width: 375, height: 812
+  browser_resize → width: 390, height: 844, deviceScaleFactor: 2
   （即使上一个 Story 也是小程序，也要确认当前视口正确）
+  - 390x844 = 现代 iPhone (12/13/14/15) 标准视口
+  - deviceScaleFactor: 2 → 像素密度 2x，匹配 Pencil 设计稿导出 scale=2
+  - 旧款 iPhone 是 375x812，现代设计稿普遍使用 390 宽度
 ```
 
 ### 禁止行为列表

.claude/skills/d8d-dev/visual-diff-mode-pencil.md

@@ -223,14 +223,27 @@ PVD-1 PER-PAGE LOOP:
 ```
 步骤:
   1. 从 Pencil MCP batch_get 获取当前设计帧的完整节点树
-  2. 提取所有顶层命名节点（name 属性存在的节点）→ 得到"必须存在的组件列表"
-     示例: availableCard / amountInput / amountActions / withdrawMethod / recentWithdrawals / confirmBtn
-  3. 读取实际页面源码（app/mini-program/src/pages/{page}/index.vue），双向检查:
-     - **必需组件检查**: 节点整个区块缺失 → 直接判定为 🔴 严重差异 → critical_count += 1
+  2. **递归提取所有层级命名节点**（任意层级只要 name 属性存在的节点）→ 得到"必须存在的组件列表"
+     **递归算法**:
+       function collectNamedNodes(node, path, resultList):
+         if node.name != null && node.name != "":
+           resultList.push({path: path + node.name, node: node})
+         for each child in node.children:
+           collectNamedNodes(child, path + node.name + ".", resultList)
+     
+     结果包含所有层级：topBar, topBar.topLeft, topBar.topRight, tabSection, tabSection.tabLeft, etc.
+     示例: topBar.topLeft / tabSection.tabLeft / availableCard / amountInput / ...
+  3. **检查全局配置关联**: 如果设计帧包含 name=bottomNav/BottomNav 且是 ref 组件
+       - 读取 app/mini-program/src/pages.json → 获取当前 tabBar 配置
+       - 对比设计中 bottomNav.children.length vs 实际 tabBar.list.length
+       - 对比每个 item 文字描述是否匹配（如果可匹配）
+       - 数量不匹配 → critical_count += 1（底部导航结构错误是严重差异）
+  4. 读取实际页面源码（app/mini-program/src/pages/{page}/index.vue），双向检查每个必需组件:
+     - **必需组件检查**: 按路径节点整个区块缺失 → 直接判定为 🔴 严重差异 → critical_count += 1
      - **多余组件检查**: 实际页面存在设计稿中没有的顶层区块 → 🟡 中等差异 → moderate_count += 1
      - **组件类型一致性检查**: 设计是 `icon_font` 但实现用纯文本字符 → 🟡 中等差异 → moderate_count += 1
-     - **文字样式一致性检查**: 设计文字标签（如区块标题）颜色/字体大小与实际CSS不符 → 🟡 中等差异 → moderate_count += 1
-  4. 结构校验通过后，使用 Read 工具分别查看设计截图和实际截图，AI 综合分析视觉差异:
+     - **文字样式一致性检查**: **任意设计节点 type=text 且有 name** → 检查 fill 颜色 + fontSize + fontWeight 与实际CSS不符 → 🟡 中等差异 → moderate_count += 1
+  5. 结构校验通过后，使用 Read 工具分别查看设计截图和实际截图，AI 综合分析视觉差异:
      - 布局结构（网格/弹性/定位、对齐方式）
      - 组件排列（导航栏、卡片、按钮、图标）
      - 颜色（Neon Pulse 规范：#000000 背景、#ffb3b5 粉色、#e8b3ff 紫色、#00dce5 青色）
@@ -242,6 +255,9 @@ PVD-1 PER-PAGE LOOP:
 
 **优势**:
 - 利用设计文件本身的结构信息，比纯视觉分析更可靠
+- **递归检查所有层级** → 确保不会漏检顶层存在但内部子区块缺失（如 topBar 存在但 topLeft 缺失）
+- **自动检查全局 tabBar 配置** → 设计稿显示的 bottomNav 结构必须与实际配置一致
+- **所有文字节点都检查** → 正文/meta/操作计数等颜色不符不会漏检
 - 确保不会漏检"整个区块缺失"（如支付结果页订单信息卡片整个不见了）
 - 帮助 AI 聚焦到每个具体组件，差异分析更准确
 
@@ -260,8 +276,8 @@ PVD-1 PER-PAGE LOOP:
 
 | 情况 | 级别 | 是否计数 |
 |------|------|----------|
-| 布局结构不同、关键组件缺失 | 🔴 严重 | `critical_count += 1` |
-| 颜色/间距偏差、图标不一致、文本对齐方式不符、圆角尺寸差异、多余顶层区块、违反Neon Pulse设计规范、组件类型不匹配、**文字标签颜色/字体大小不符** | 🟡 中等 | `moderate_count += 1` |
+| 布局结构不同、**任意层级**关键组件缺失、bottomNav 配置与设计不匹配 (Tab数量/文字) | 🔴 严重 | `critical_count += 1` |
+| 颜色/间距偏差、图标不一致、文本对齐方式不符、圆角尺寸差异、多余顶层区块、违反Neon Pulse设计规范、组件类型不匹配、**任意命名文字节点颜色/字体大小不符** | 🟡 中等 | `moderate_count += 1` |
 | 微小像素差异 (1-2px 偏移) | 🟢 轻微 | `minor_count += 1` |
 
 **门禁规则再强调**：