Hooke / manulife-weapp

Go to a project
Toggle navigation Toggle navigation pinning
Switch branch/tag
CHANGELOG.md 8.83 KB

Changelog

本文档记录 Manulife WeApp项目的所有重要变更。 格式基于 Keep a Changelog，

[2026-02-08] - 修复计划书表单重置和数据同步问题

修复

  • 修复计划书表单关闭后再次打开数据依然存在的bug
  • 修复表单输入过程中数据意外丢失的问题
  • 修复第一次点击确认按钮没有值的问题

优化

  • 优化表单状态管理，区分"重置"和"正常更新"
  • 改进 v-model 双向绑定的数据同步逻辑

问题原因

Vue 3 v-model + reactive 的双向同步陷阱：

  • v-model 每次更新都创建新对象
  • reactive(props.modelValue) 只在初始化时读取一次 props
  • 父子组件状态不同步

解决方案

核心策略：区分"重置"和"正常更新"

  • 重置判断：从有数据 → 空对象
  • 正常更新：只合并新字段，不删除已有字段
  • 避免使用引用判断（newVal !== previousModelValue），因为 v-model 每次都创建新对象

技术细节

关键改进：

// ✅ 正确的 watch 策略
const isReset = previousModelValue &&
                Object.keys(previousModelValue).length > 0 &&
                Object.keys(newVal).length === 0

if (isReset) {
  // 重置：清空表单
  Object.keys(form).forEach(key => delete form[key])
} else {
  // 正常更新：只合并新字段
  Object.keys(newVal).forEach(key => {
    form[key] = newVal[key]
  })
}

避免的陷阱：

  • ❌ 每次 props 变化都清空并复制（导致数据丢失）
  • ❌ 使用引用判断是否更新（v-model 每次创建新对象）
  • ❌ 使用 { deep: true } 监听 props（可能导致循环）

影响文件

  • src/components/PlanFormContainer.vue
  • src/components/PlanTemplates/LifeInsuranceTemplate.vue
  • src/components/PlanTemplates/CriticalIllnessTemplate.vue
  • src/components/PlanTemplates/SavingsTemplate.vue

测试验证

  • ✅ 填写表单 → 关闭弹窗 → 再次打开 → 表单为空
  • ✅ 第一次点击确认按钮 → 值能正常保存
  • ✅ 年龄和出生年月日双向联动正常

经验教训

详见 docs/lessons-learned.md 中的"Vue 3 响应式数据和表单状态管理"章节。

[2026-02-08] - 优化年龄与出生年月日联动逻辑

优化

  • 调整计划书模板字段顺序：年龄在前，出生年月日在后
  • 实现年龄 → 出生年月日自动计算（当前年份 - 年龄，默认1月1日）
  • 保留出生年月日 → 年龄双向联动（用户可手动调整出生日期）
  • 简化占位符文案，避免用户理解混乱
  • 修复 AgePicker 组件不触发 change 事件的问题

改进细节

  • AgePicker.vue: 添加 change 事件支持，确保父组件能监听年龄变化
  • LifeInsuranceTemplate.vue: 实现双向联动逻辑
  • CriticalIllnessTemplate.vue: 实现双向联动逻辑
  • SavingsTemplate.vue: 实现双向联动逻辑

用户体验改进

  • ✅ 用户先录入年龄（简单快捷）
  • ✅ 系统自动计算出生年月日（默认1月1日）
  • ✅ 用户仍可手动调整出生年月日（灵活性）
  • ✅ 简化文案，避免不必要的理解错误

影响文件

  • src/components/PlanFields/AgePicker.vue
  • src/components/PlanTemplates/LifeInsuranceTemplate.vue
  • src/components/PlanTemplates/CriticalIllnessTemplate.vue
  • src/components/PlanTemplates/SavingsTemplate.vue

[2026-02-08] - 修复 LoadMoreList 页面双重滚动问题

修复

  • 修复 4 个使用 LoadMoreList 组件的页面出现双重滚动问题
    • 页面级和 scroll-view 都可以滚动，导致用户体验混乱
    • src/pages/feedback-list/index.vue
    • src/pages/favorites/index.vue
    • src/pages/material-list/index.vue
    • src/pages/product-center/index.vue
  • 在页面容器添加 height: 100vh 和 overflow: hidden
    • TailwindCSS: h-screen overflow-hidden
    • Less: height: 100vh; overflow: hidden;

问题原因

  • 页面容器未设置固定高度（使用 min-height 或未设置）
  • 页面容器未禁用溢出（缺少 overflow: hidden）
  • 导致页面级和组件级滚动同时生效

解决方案

  • 页面容器设置固定高度：height: 100vh（或 h-screen）
  • 页面容器禁用溢出：overflow: hidden（或 overflow-hidden）
  • 让 LoadMoreList 内部的 scroll-view 处理所有滚动
  • 固定元素（导航栏、搜索栏）放在 #header 插槽中

文档

  • 在 docs/lessons-learned.md 中添加"LoadMoreList 页面的双重滚动问题"记录
    • 说明问题表现、原因分析、解决方案
    • 提供最佳实践和检查清单
    • 列出修复的 4 个页面和已正确的 3 个页面

收益

  • ✅ 消除双重滚动，提升用户体验
  • ✅ 固定元素（导航栏、搜索栏）始终可见
  • ✅ 统一 LoadMoreList 页面的滚动行为
  • ✅ 为所有使用 LoadMoreList 的页面提供标准模式

详细信息：

  • 影响文件:
    • src/pages/feedback-list/index.vue（修复双重滚动）
    • src/pages/favorites/index.vue（修复双重滚动）
    • src/pages/material-list/index.vue（修复双重滚动）
    • src/pages/product-center/index.vue（修复双重滚动）
    • docs/lessons-learned.md（添加经验教训）
  • 技术栈: Vue 3, Taro 4, TailwindCSS, Less
  • 测试状态: ✅ 已通过
  • 备注: 共检查 7 个使用 LoadMoreList 的页面，修复 4 个，3 个已正确

[2026-02-08] - 修复 LoadMoreList 组件底部 padding 堆叠问题

修复

  • 修复 .load-more-content.scrollable 修饰符类与基础类 padding 堆叠问题
    • 基础类 padding: 32rpx 与修饰符类 padding-bottom 堆叠
    • 导致底部 padding ≈ 192rpx + safe-area（过高）
    • 修改为覆盖整个 padding 属性: padding: 32rpx 32rpx calc(160rpx + env(safe-area-inset-bottom))

优化

  • 简化搜索页 shouldEnableScrollLoad 逻辑（只要有数据就启用滚动）
  • 添加搜索页 disableScroll: true 配置（禁用页面级滚动）

文档

  • 在 docs/lessons-learned.md 中添加 LESS 修饰符类样式堆叠坑的记录
    • 说明 LESS 嵌套选择器中修饰符类属性会与基础类堆叠
    • 提供解决方案：覆盖整个属性而不是只写子属性

详细信息：

  • 影响文件:
    • src/components/LoadMoreList/index.vue（修复 padding 堆叠）
    • src/pages/search/index.config.js（添加 disableScroll）
    • src/pages/search/index.vue（简化滚动逻辑）
    • docs/lessons-learned.md（添加经验教训）
  • 技术栈: Vue 3, Taro 4, Less
  • 测试状态: ✅ 已通过
  • 备注: 所有使用 LoadMoreList 的 7 个页面都受益于这个修复

[2026-02-08] - 文档重组：全面中文化

文档

  • 将所有文档文件名改为中文命名（遵循全局规则）
    • guides/ 目录下的指南文档（API 使用指南、OpenAPI 转换等）
    • reports/ 目录下的报告文档（Apifox 配置总结、变更日志检查等）
    • mcp/ 目录下的 MCP 相关文档
    • plan/ 目录下的计划书文档
  • 删除已废弃的 docs/form-sn-mapping.json（配置已迁移到代码）
  • 更新 docs/README.md 以反映新的文档结构
  • 修复文档中的交叉引用链接

详细信息：

  • 影响文件: docs/guides/.md, docs/reports/.md, docs/mcp/.md, docs/plan/.md, docs/README.md
  • 技术栈: 文档
  • 测试状态: N/A
  • 备注: 提升中文开发者体验，统一文档命名规范

[2026-02-08] - 整理文档结构并使用中文命名（首次）

文档

  • 重新组织 docs 文件夹结构，按功能分类
    • 组件文档 → guides/components/
    • 测试指南 → guides/testing/
    • API 规范 → api-specs/ 和 api-specs/数据文档/
    • 测试报告 → reports/测试报告/
  • 所有文档文件名使用中文命名（如 LoadMoreList 完整使用指南.md）
  • 更新所有文档中的相对路径引用
  • 备份原始页面代码到 docs/backups/original-pages/
  • 将"文档命名使用中文"规则添加到全局规则（changelog-automation.md）

[2026-02-08] - 迁移所有剩余页面到 LoadMoreList 组件

重构

  • 迁移 src/pages/message/index.vue 使用 LoadMoreList 组件
    • 添加下拉刷新功能
    • 简化分页加载逻辑
  • 迁移 src/pages/product-center/index.vue 使用 LoadMoreList 组件
    • 保留搜索、tabs、计划书弹窗功能
    • 统一分页加载逻辑
  • 迁移 src/pages/material-list/index.vue 使用 LoadMoreList 组件
    • 保留分类缓存、搜索防抖功能
    • 优化分页状态管理
  • 迁移 src/pages/search/index.vue 使用 LoadMoreList 组件
    • 保留双列表系统（products + files）
    • 保留自动 tab 选择逻辑
    • 保留三种显示状态（初始、空、有结果）

收益

  • 统一 5 个页面的分页加载逻辑
  • 减少重复代码约 700+ 行
  • 统一动画效果和加载状态
  • 提升代码可维护性