# 四维度首页及商品详情页修改方案 **日期：** 2026-07-04 **状态：** 待实施 --- ## 问题 1：行首页添加推荐阅读组件 ### 现状 行首页 `cfc-frontend/pages/action/index.vue` **已有** `` 组件（第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 | 行首页替换原有内联代码为 `` | `cfc-frontend/pages/action/index.vue` | | 2.5 | 在身首页添加 ``（需添加 `contactList`, `healthAlerts`, `milestones` 数据加载方法） | `cfc-frontend/pages/body/index.vue` | | 2.6 | 在心首页添加 ``（需添加 `contactList`, `healthAlerts`, `milestones` 数据加载方法） | `cfc-frontend/pages/mind/index.vue` | | 2.7 | 在智首页添加 ``（需添加 `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` 的 `` 组件上添加 `@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 | 创建本文档 | |