Neo-ZQYY/docs/h5_ui/interactions/board-finance.md

页面名：board-finance（财务看板）

PRD 参考：P8 docs/prd/specs/P8-miniapp-fe-boards.md；apps/miniprogram/doc/prd.md 第九节 9.1 已实现：否

页面说明

看板 Tab 的默认页面。展示多维度交叉筛选的财务数据，含环比开关、目录导航、吸顶板块头、指标解释弹窗。顶部有时间和区域两组筛选器。

状态变量

变量名	类型	初始值	说明
selectedTime	string	"本月"	时间筛选
selectedArea	string	"全部区域"	区域筛选
compareEnabled	boolean	false	环比对比开关
timeDropdownVisible	boolean	false	时间筛选下拉展开
areaDropdownVisible	boolean	false	区域筛选下拉展开
tocVisible	boolean	false	目录导航面板展开
tipVisible	boolean	false	指标解释弹窗显示
tipType	string	""	当前显示的指标解释类型
currentSection	number	0	当前可视板块索引（用于吸顶和目录高亮）
loading	boolean	true	数据加载中
error	boolean	false	加载失败

用户操作 → 响应

操作	触发条件	响应行为	目标状态
页面加载	进入页面	GET /api/board/finance	loading→false
点击时间筛选	无	展开时间下拉面板，关闭其他面板	timeDropdownVisible=true
选择时间选项	下拉展开	重新请求数据，关闭下拉	selectedTime 更新
点击区域筛选	无	展开区域下拉面板，关闭其他面板	areaDropdownVisible=true
选择区域选项	下拉展开	重新请求数据，关闭下拉	selectedArea 更新
切换环比开关	无	切换所有 [data-compare] 元素显隐	compareEnabled=!compareEnabled
点击目录按钮	无	展开/关闭目录导航面板	tocVisible=!tocVisible
点击目录项	tocVisible=true	滚动到对应板块，关闭目录	currentSection 更新
点击指标"?"图标	无	底部弹出指标解释弹窗+遮罩	tipVisible=true
点击遮罩/关闭	tipVisible=true	关闭指标解释弹窗	tipVisible=false
滚动页面	持续	检测当前可视板块 → 更新吸顶头+目录高亮；下滑隐藏筛选栏，上滑显示	currentSection 更新
切换看板 Tab	顶部 Tab 栏	navigateTo board-customer / board-coach	—
点击"重试"	error=true	重新请求数据	loading=true

筛选器选项（忠于原型 HTML）

时间筛选

本月 / 上月 / 本周 / 上周 / 前3个月 不含本月 / 本季度 / 上季度 / 最近6个月不含本月

区域筛选

全部区域 / 大厅（含 A区/B区/C区）/ 麻将房 / 团建房

筛选联动规则

• 选择非"全部区域"时，预收资产板块隐藏
• 营业日以 08:00 为分割点

环比开关

• 滑块开关样式：44×24px，默认灰色 #dcdcdc，激活后蓝色 #0052d9
• 控制所有 [data-compare] 元素的显隐
• 环比数据：上升绿色↑、下降红色↓

目录导航（6 个板块）

序号	图标	板块名	section id
1	📈	经营一览	section-overview
2	💳	预收资产	section-recharge
3	💰	【记账】应计收入确认	section-revenue
4	🧾	【现金流水】流入	section-cashflow
5	📤	【现金流水】流出	section-expense
6	🎱	助教分析	section-coach

吸顶板块头

• 滚动时检测当前可视板块，在顶部显示对应板块标题
• 由 updateStickyHeader() + getCurrentSection() + initSectionScrollBehavior() 实现

筛选栏滚动行为

• 下滑时筛选栏隐藏（向上收起）
• 上滑时筛选栏重新显示
• 由 initFilterBarScrollBehavior() 实现

指标解释弹窗

• 底部弹出式弹窗 + 半透明遮罩
• 点击指标旁的"?"图标触发
• 展示对应指标的计算口径和说明

数据板块

1. 经营一览（副标题：快速了解收入与现金流的整体健康度）
2. 预收资产（仅"全部区域"时显示）
3. 【记账】应计收入确认
4. 【现金流水】流入
5. 【现金流水】流出
6. 助教分析

AI 智能洞察（PRD 补充）

• 来源：AI 应用 2，cache_type=app2_finance
• 数据格式：JSON 数组，每条含洞察标题+内容
• 缓存策略：Redis / 内存缓存，key = site_id + 筛选条件（时间+区域），ETL 更新后失效，约 1 小时刷新
• 展示位置：经营一览板块底部或独立洞察卡片区域

页面状态枚举

状态名	视觉表现	触发条件
加载中	区域文案"加载中..."	loading=true
正常态	完整财务数据 + 环比	有数据
错误态	"加载失败，请点击重试" + 重试按钮	error=true

后端 API 依赖

API	方法	说明
GET /api/board/finance	GET	财务看板数据（交叉筛选）

页面导航

• 来源：TabBar 切换 / login（approved，首页设置为看板）
• 去向：board-customer / board-coach / chat

全局组件

• 底部 TabBar（看板 active）
• AI 悬浮按钮
• 看板顶部 Tab 栏（财务 active / 客户 / 助教）— sticky 定位