四维度首页及商品详情页修改方案.md 8.6 KB
四维度首页及商品详情页修改方案
日期： 2026-07-04
状态： 待实施
问题 1：行首页添加推荐阅读组件
现状
行首页 cfc-frontend/pages/action/index.vue 已有 <DimensionArticles> 组件（第72-77行），在 onShow 中调用 loadFeaturedArticles()（第279行）。
但存在以下问题：
- 模板使用
:articles="articles"而非计算属性actionArticles（第239-250行过滤逻辑未被使用） loadFeaturedArticles()调用时传递dimensionCode: 'action'参数（第478行），若后端 API 不支持此参数过滤则返回空数据
方案
| 步骤 | 操作 | 涉及文件 |
|---|---|---|
| 1.1 | 用微信开发者工具观察网络请求，确认 getFeaturedArticles 接口是否支持 dimensionCode 过滤 |
前端 devtools |
| 1.2 | 若不支持，移除 dimensionCode: 'action' 参数，让接口返回通用推荐列表 |
cfc-frontend/pages/action/index.vue:478 |
| 1.3 | 将 :articles="articles" 改为 :articles="actionArticles" 以使用已过滤的计算属性 |
cfc-frontend/pages/action/index.vue:75 |
| 1.4 | 确认 DimensionArticles 组件的 props 与传入数据结构匹配 |
cfc-frontend/components/DimensionArticles.vue |
问题 2：四维度首页统一用户关系卡片
现状
四个维度首页的「关系」模块实现不一致：
| 页面 | FamilyRelationGraph | 联系人卡片（ContactCard） | 关系健康模块（健康预警/里程碑） |
|---|---|---|---|
| 行 (action) | ✅ | ✅ 含刷新/导入 | ✅ 健康预警/里程碑/互动记录/问卷 |
| 身 (body) | ✅ | ❌ | ❌ |
| 心 (mind) | ✅ 带 compatibilityMap | ❌ | ❌ |
| 智 (wisdom) | ✅ | ❌ | ❌ |
行首页的「重要关系」+「关系健康」模块代码在第80-169行（contact-section）和第106-150行（rq-section），其他三个页面缺少这部分。
方案
提取行首页的联系人+关系健康模块为可复用组件，再添加到其他三个页面。
| 步骤 | 操作 | 涉及文件 |
|---|---|---|
| 2.1 | 新建组件 components/FamilyRelationshipSection.vue，从 action/index.vue 提取 contact-section 和 rq-section 的 template + 样式 |
cfc-frontend/components/FamilyRelationshipSection.vue |
| 2.2 | 组件 props：contactList, healthAlerts, milestones, isLoggedIn, dimensionCode |
同上 |
| 2.3 | 组件 events：@contactClick, @refresh, @import, @interactionLog, @questionnaire |
同上 |
| 2.4 | 行首页替换原有内联代码为 <FamilyRelationshipSection> |
cfc-frontend/pages/action/index.vue |
| 2.5 | 在身首页添加 <FamilyRelationshipSection>（需添加 contactList, healthAlerts, milestones 数据加载方法） |
cfc-frontend/pages/body/index.vue |
| 2.6 | 在心首页添加 <FamilyRelationshipSection>（需添加 contactList, healthAlerts, milestones 数据加载方法） |
cfc-frontend/pages/mind/index.vue |
| 2.7 | 在智首页添加 <FamilyRelationshipSection>（需添加 contactList, healthAlerts, milestones 数据加载方法） |
cfc-frontend/pages/wisdom/index.vue |
| 2.8 | 各页面添加缺失的 API 引入：getContactList, getHealthAlerts, getMilestones |
各 index.vue 的 import 语句 |
| 2.9 | 各页面添加 loadContacts, loadRelationshipHealth 等数据加载方法 |
各 index.vue 的 methods |
注意： 心首页的 FamilyRelationGraph 带了 :compatibilityMap="compatibilityMapForGraph" props，这部分逻辑保留不变。
问题 3：商品详情页添加购物车
现状
cfc-frontend/pages/discover-detail/product-detail/product-detail.vue底部栏只有「立即购买」按钮- CSS 已预定义
.btn-cart和.action-extra样式（第304-326行），但模板中未使用 - 后端无购物车功能（
api.js无 cart 相关函数，无CartController）
方案
开发完整购物车功能（后端 + 前端 + 页面集成）。
后端新增
| 步骤 | 操作 | 涉及文件 |
|---|---|---|
| 3.1 | 新建 entity Cart.java → 表 cart（字段：id, user_id, product_id, quantity, created_at, updated_at） |
cfc-backend/.../entity/Cart.java |
| 3.2 | 新建 mapper CartMapper.java |
cfc-backend/.../mapper/CartMapper.java |
| 3.3 | 新建 service CartService.java，实现：addToCart / getCartList / updateQuantity / removeItem |
cfc-backend/.../service/CartService.java |
| 3.4 | 新建 controller CartController.java，接口：POST /api/cart/add — 添加到购物车POST /api/cart/list — 获取购物车列表POST /api/cart/update — 更新数量POST /api/cart/remove — 移除商品 |
cfc-backend/.../controller/CartController.java |
| 3.5 | mvn clean compile 编译验证 |
前端修改
| 步骤 | 操作 | 涉及文件 |
|---|---|---|
| 3.6 | api.js 新增 cartAdd, cartList, cartUpdate, cartRemove 函数 |
cfc-frontend/utils/api.js |
| 3.7 | 商品详情页底部栏添加「加入购物车」按钮（.btn-cart 样式已存在，模板中放开并绑定事件） |
cfc-frontend/pages/discover-detail/product-detail/product-detail.vue |
| 3.8 | 实现 onAddToCart() 方法：调用 cartAdd API，失败时 toast 提示 |
同上 methods |
| 3.9 | 可选：购物车角标 badge 显示数量（通过 Vuex 或 globalData 管理） | 后续迭代 |
布局： 底部栏左侧为价格信息，中间/右侧并排「加入购物车」（白底橙色边框，描边样式） + 「立即购买」（橙色渐变填充）。
问题 4：POST /api/energy/sandbox 500 错误
现状
- 端点：
POST /api/energy/sandbox，由EnergyController.getFamilyEnergySandbox()处理 - 调用链：
EnergyController→EnergyService.calculateFamilyEnergy(user.getFamilyId()) - 500 是运行时异常，非业务错误返回
可能根因
| 可能性 | 原因 | 概率 |
|---|---|---|
| A | user.getFamilyId() 为 null 时，calculateFamilyEnergy(null) 传入 null，后续 childMapper.selectList 或内部方法查询 null 条件抛异常 |
高 |
| B | healthReportMapper.selectOne() 查询时表字段不一致或连接失败 |
中 |
| C | calcChildMind / calcChildBody 等方法中某个 mapper 查询异常 |
低 |
| D | @RequestAttribute("userId") 解析失败导致 userId 为 null |
低 |
诊断方法
查看后端控制台日志，500 错误必有完整 stack trace。根据堆栈定位具体抛异常的行。
推荐修复方案
| 步骤 | 操作 | 涉及文件 |
|---|---|---|
| 4.1 | 在 EnergyService.calculateFamilyEnergy 方法入口添加 null 检查：若 familyId == null 则直接返回 buildEmptyDTO() |
cfc-backend/.../service/EnergyService.java:66 |
| 4.2 | 在 calcParentBody 的 healthReportMapper.selectOne() 查询外层加 try-catch，避免表不存在时全量异常 |
EnergyService.java 相关方法 |
| 4.3 | 若后端日志显示具体 mapper 查询异常（如表字段不匹配），需修正 entity 字段或数据库表结构 | 对应 entity / mapper |
问题 5：/static/default-product.png 图片缺失
现状
- 文件
cfc-frontend/static/default-product.png不存在 product-detail.vue第9行引用：:src="product.coverImage || '/static/default-product.png'"- 微信开发者工具控制台报
Failed to load local image resource
方案
| 步骤 | 操作 | 涉及文件 |
|---|---|---|
| 5.1 | 制作或放置一张 400x400px 的默认商品占位图（PNG格式，透明底或灰色底配商品图标）到 cfc-frontend/static/default-product.png |
cfc-frontend/static/default-product.png |
| 5.2 | 或在 product-detail.vue 的 <image> 组件上添加 @error="onImageError" 事件，用 JS 兜底处理 |
cfc-frontend/pages/discover-detail/product-detail/product-detail.vue:7 |
实施优先级
| 优先级 | 问题 | 依赖 | 预估工时 |
|---|---|---|---|
| P0 | 问题4：sandbox 500（所有登录用户均受影响，能量数据无法加载） | 需先查看后端日志定位异常 | 1-2h |
| P0 | 问题5：默认图片缺失（控制台报错，影响调试体验） | 无 | 0.2h |
| P1 | 问题1：推荐阅读（组件已存在，可能只需调整参数或确认接口） | 无 | 0.5h |
| P1 | 问题3：购物车（需后端新建 entity/mapper/service/controller + 前端多处修改） | 无 | 3-4h |
| P2 | 问题2：统一关系卡片（需新建组件 + 修改四个页面，量大） | 无 | 4-6h |
修改记录
| 日期 | 修改内容 | 修改人 |
|---|---|---|
| 2026-07-04 | 创建本文档 |