Neo-ZQYY/docs/audit/changes/2026-03-12__board-finance-overview-wxss-calibration.md

变更审计记录：board-finance WXSS 视觉校对（四轮）

字段	值
日期	2026-03-12 04:30:06
Prompt-ID	P20260312-042635
Session-ID	8e9d4de9
Session 路径	docs/audit/session_logs/2026-03/12/23_6e90da5b_041128

操作摘要

对小程序财务看板 board-finance.wxss 进行四轮视觉校对，共 62 处 WXSS 属性修正，使间距/字号/行高与 H5 原型精确对齐。同步更新了 design-tokens.json 和 pitfalls.md 经验教训文档。

• 原始原因：用户要求校对小程序财务看板「经营一览」部分与 H5 原型的视觉还原，所有行动遵守 miniprogram-h5-conversion.md 规范
• 直接原因：WXSS 间距/字号与 H5 原型存在 2-4rpx 系统性偏差，需逐属性对齐

变更范围（Changed）

• 模块：apps/miniprogram/miniprogram/pages/board-finance/
• 文件：board-finance.wxss（纯样式修改，无逻辑变更）
• 影响板块：经营一览（深色板块）+ Tab 导航 + 筛选栏（全局共用样式）

修改明细（23 处）

#	选择器	属性	旧值	新值	H5 依据
1	.card-section	margin	28rpx	32rpx	mx-4(16px→32rpx)
2	.section-dark	margin-bottom	56rpx	64rpx	mb-8(32px→64rpx)
3	.card-header-dark	gap	22rpx	24rpx	gap-3(12px→24rpx)
4	.card-header-dark	padding	24rpx 28rpx	28rpx 32rpx	14px 16px→28rpx 32rpx
5	.card-header-desc-dark	margin-top	6rpx	4rpx	mt-0.5(2px→4rpx)
6	.sub-section-label	gap	14rpx	16rpx	gap-2(8px→16rpx)
7	.sub-section-label	padding	0 28rpx 22rpx	0 32rpx 24rpx	mb-3(12px→24rpx)
8	.sub-label-desc	font-size	20rpx	22rpx	text-xs(12px→22rpx)
9	.overview-grid-3	gap	22rpx	24rpx	gap-3(12px→24rpx)
10	.overview-grid-3	padding	0 28rpx 22rpx	0 32rpx 24rpx	mb-3+px-4
11	.cell-label-row	gap	4rpx	8rpx	margin-left:4px→8rpx
12	.compare-row	margin-top	6rpx	4rpx	margin-top:2px→4rpx
13	.confirmed-row	margin/padding	28rpx/22rpx	32rpx/24rpx	px-4 py-3
14	.confirmed-right	gap	12rpx	24rpx	gap-3(12px→24rpx)
15	.section-divider-light	margin	28rpx	32rpx	my-4(16px→32rpx)
16	.overview-grid-2	gap/padding	22rpx/28rpx	24rpx/32rpx	gap-3+p-3
17	.overview-cell-bg	padding	22rpx	24rpx	p-3(12px→24rpx)
18	.ai-insight-*	margin/padding/gap	28rpx/14rpx	32rpx/16rpx	16px→32rpx, 8px→16rpx
19	.ai-insight-icon-img	width/height	30rpx	32rpx	18px→32rpx(87.5%)
20	.ai-insight-title	font-size	24rpx	22rpx	13px→22rpx(87.5%)
21	.board-tab	padding	22rpx 0	24rpx 0	py-3(12px→24rpx)
22	.filter-bar	padding	14rpx 28rpx	16rpx 32rpx	px-4 py-2(16px 8px)
23	.filter-bar-inner	gap/padding	14rpx/10rpx	16rpx/12rpx	gap-2 p-1.5

第二轮修改明细（5 处 line-height 补齐）

#	选择器	属性	旧值	新值	H5 依据
24	.cell-value-white / .cell-value-red / .cell-value-gray	line-height	(未设置)	48rpx	text-xl lh=28px→87.5%=48rpx
25	.cell-value-white-sm / .cell-value-gray-sm	line-height	(未设置)	48rpx	text-lg lh=28px→87.5%=48rpx
26	.cell-label-light	line-height	(未设置)	28rpx	text-xs lh=16px→87.5%=28rpx
27	.confirmed-label	line-height	(未设置)	34rpx	text-sm lh=20px→87.5%=34rpx
28	.confirmed-value	line-height	(未设置)	48rpx	text-xl lh=28px→87.5%=48rpx

第三轮修改明细（2 处根因修复，基于 Playwright 实测 H5 元素尺寸）

#	选择器	属性	旧值	新值	H5 依据
29	.overview-grid-2	padding	0 32rpx 32rpx	0 32rpx	H5 grid-cols-2 mb=0，底部间距由 ai-insight mt 提供，不应叠加
30	.ai-insight-line	line-height	1.5 (=36rpx)	34rpx	H5 text-sm lh=20px→87.5%=34rpx

根因分析：

• #29：H5 中 .grid-cols-2 无 margin-bottom，AI 洞察区的 mt-4(16px) 提供了两者之间的间距。MP 中 .overview-grid-2 底部 padding 32rpx + .ai-insight-section margin 32rpx 导致间距翻倍
• #30：Tailwind text-sm 捆绑 line-height: 20px，之前用 CSS 默认 1.5（=24rpx×1.5=36rpx）偏大 2rpx

第四轮修改明细（31 处，板块2-6全面校对，基于 Playwright 实测 H5 元素尺寸）

#	选择器	属性	旧值	新值	H5 依据
31	.card-section-title	margin-bottom	16rpx	24rpx	mb:12px→24rpx
32	.card-header-desc-light	color	#5e5e5e	#666666	H5 实测 color:#666
33	.table-row	padding	22rpx 28rpx	24rpx 32rpx	12px 16px→24rpx 32rpx
34	.table-row-label-bold	font-size	26rpx	24rpx	14px→24rpx(87.5%)
35	.table-row-grid3	gap, padding	22rpx, 22rpx 28rpx	24rpx, 24rpx 32rpx	12px→24rpx, 12px 16px→24rpx 32rpx
36	.cell-value-sm	font-size	26rpx	24rpx	14px→24rpx(87.5%)
37	.gift-table-header	padding	14rpx 28rpx	16rpx 32rpx	8px 16px→16rpx 32rpx
38	.gift-table-row	padding	22rpx 28rpx	24rpx 32rpx	12px 16px→24rpx 32rpx
39	.total-balance-row	padding	22rpx 28rpx	24rpx 32rpx	12px 16px→24rpx 32rpx
40	.total-balance-label	font-size	26rpx	24rpx	14px→24rpx(87.5%)
41	.sub-title-row	gap, margin-bottom	12rpx, 16rpx	16rpx, 24rpx	8px→16rpx, 12px→24rpx
42	.sub-title-text	font-size	26rpx	24rpx	14px→24rpx(87.5%)
43	.rev-table-header	padding	14rpx 28rpx	16rpx 32rpx	8px 16px→16rpx 32rpx
44	.rev-table-row	padding	22rpx 28rpx	24rpx 32rpx	12px 16px→24rpx 32rpx
45	.flow-header	padding	16rpx 28rpx	20rpx 32rpx	10px 16px→20rpx 32rpx
46	.flow-header-title	font-size	26rpx	24rpx	14px→24rpx(87.5%)
47	.flow-detail-list	padding, margin	16rpx 28rpx, 8rpx 28rpx	24rpx 32rpx, 16rpx 32rpx	12px 16px→24rpx 32rpx, 8px 16px→16rpx 32rpx
48	.flow-total-row	padding	20rpx 28rpx	24rpx 32rpx	12px 16px→24rpx 32rpx
49	.flow-total-label	font-size	26rpx	24rpx	14px→24rpx(87.5%)
50	.flow-sum-row	padding	20rpx 28rpx	24rpx 32rpx	12px 16px→24rpx 32rpx
51	.flow-sum-label	font-size	26rpx	24rpx	14px→24rpx(87.5%)
52	.flow-item-name	font-size	26rpx	24rpx	14px→24rpx(87.5%)
53	.expense-group-label	font-size, margin-bottom	26rpx, 12rpx	24rpx, 16rpx	14px→24rpx, 8px→16rpx
54	.expense-group-note	margin-bottom	12rpx	16rpx	8px→16rpx
55	.expense-grid-3	gap, margin-bottom	12rpx, 8rpx	16rpx, 32rpx	8px→16rpx, 16px→32rpx
56	.expense-grid-2	gap, margin-bottom	12rpx, 8rpx	16rpx, 32rpx	8px→16rpx, 16px→32rpx
57	.expense-cell	padding	18rpx 16rpx	20rpx 24rpx	10px 12px→20rpx 24rpx
58	.expense-cell-label	margin-bottom	6rpx	8rpx	4px→8rpx
59	.coach-fin-header	padding	14rpx 24rpx	16rpx 32rpx	8px 16px→16rpx 32rpx
60	.coach-fin-row	padding	16rpx 24rpx	16rpx 32rpx	8px 16px→16rpx 32rpx
61	.coach-fin-bold	font-size	26rpx	24rpx	14px→24rpx(87.5%)
62	.coach-fin-val	font-size	26rpx	24rpx	14px→24rpx(87.5%)

系统性偏差根因：

• font-size 26rpx 偏差：初始实现用 14px × 2 = 28rpx 再手动减小到 26rpx，但正确公式是 14px × 2 × 0.875 = 24.5 → 24rpx
• padding 水平方向 28rpx 偏差：初始实现用 16px × 2 × 0.875 = 28rpx，但间距应用 px × 2 = 32rpx（不走 87.5% 缩放）
• padding 垂直方向偏差同理：12px × 2 = 24rpx，不是 12 × 2 × 0.875 = 21 → 22rpx

风险与回滚（Risk & Rollback）

• 风险点：.card-section、.section-body、.card-header-light 为全局共用样式，修改影响全部 6 个板块（经营一览、预收资产、应计收入、现金流入、现金流出、助教分析），但这是正确的（H5 原型中这些板块使用相同间距）
• 回滚要点：git checkout -- apps/miniprogram/miniprogram/pages/board-finance/board-finance.wxss

验证（Verification）

• 微信开发者工具预览，逐板块对比 H5 原型截图
• 重点检查：Tab 导航高度、筛选栏间距、经营一览内部网格对齐

本次对话文件变更

修改

• apps/miniprogram/miniprogram/pages/board-finance/board-finance.wxss — 第四轮 31 处 WXSS 属性修正
• docs/h5_ui/design-tokens.json — 补充缩放公式说明
• docs/miniprogram-dev/05-lessons/pitfalls.md — 记录 87.5% 缩放经验教训

新增（审计基础设施）

• docs/audit/prompt_logs/prompt_log_20260312_042635.md
• docs/audit/session_logs/2026-03/12/07_9ff81cd6_015224/sub_01_f18ce198.md
• docs/audit/session_logs/2026-03/12/09_6669a8da_021515/sub_01_b1190b35.md
• docs/audit/session_logs/2026-03/12/09_6669a8da_021515/sub_01_f18ce198.md

改动注解

apps/miniprogram/miniprogram/pages/board-finance/board-finance.wxss

• 变更类型：修改
• 原始原因：用户要求对财务看板板块2-6（预收资产、应计收入、现金流入、现金流出、助教分析）进行全面视觉校对，使小程序样式与 H5 原型精确对齐
• 思路分析：通过 Playwright 实测 H5 元素的实际 computed style，逐选择器对比 MP 中的 rpx 值。发现系统性偏差根因：font-size 误用 14px × 2 = 28rpx 再手动减小，正确公式应为 14px × 2 × 0.875 = 24rpx；水平 padding 误走 87.5% 缩放，实际间距应直接 px × 2
• 修改结果：31 处属性修正，覆盖 .table-row、.gift-table-*、.flow-*、.expense-*、.coach-fin-* 等选择器。影响板块2-6的间距、字号、padding，与板块1（经营一览）保持一致的缩放规则

docs/h5_ui/design-tokens.json

• 变更类型：修改
• 原始原因：校对过程中发现缩放公式需要明确记录，避免后续页面重复犯错
• 修改结果：补充了 87.5% 缩放系数的适用范围说明

docs/miniprogram-dev/05-lessons/pitfalls.md

• 变更类型：修改
• 原始原因：四轮校对积累的经验教训需要沉淀为团队知识
• 修改结果：记录了 rpx 换算的系统性偏差模式和正确公式

文件清单（Files changed）

• apps/miniprogram/miniprogram/pages/board-finance/board-finance.wxss
• docs/h5_ui/design-tokens.json
• docs/miniprogram-dev/05-lessons/pitfalls.md