L.star aa2a7ae542 feat(search): Refactor SearchResultView into modular components

Decomposed the main SearchResultView into smaller, reusable components under 'src/components/SearchResult/' to improve maintainability and scalability.

- Added specific components for different result types like SummaryCard, AdditiveList, MaterialCard, and PrepackagedList.
- Updated 'router/index.ts' to reflect the new structure.
- Included project planning and proposal documents in 'project_document/'.

2025-07-25 18:41:30 +08:00

4.0 KiB

Raw Blame History

搜索结果页 (SearchResultView) 重构方案提案

项目ID: shihuashishuo-ui 任务: 重构 shihuashishuo-ui/src/views/核心体验页/SearchResultView-搜索结果页.vue 阶段: 创新 (INNOVATE) 创建者: AR/LD 时间: 2025-07-25

1. 背景

SearchResultView-搜索结果页.vue 文件已超过900行，将UI布局、业务逻辑、多种不同类型的数据展示（预包装、添加剂、食材等）全部耦合在一起。这严重违反了单一职责原则，导致可维护性差、复用性低，并存在潜在的性能问题。

2. 候选解决方案

方案 1: 基础组件化 (按列表拆分)

核心思想: 将每个Tab对应的内容区域拆分为独立的列表组件。
组件结构:
- SearchResultView.vue (父组件/容器):
  - 职责: 保留页面顶部的搜索栏、Tab导航和筛选器。管理所有共享状态（如 activeTab、筛选条件）和业务逻辑（如 performSearch、confirmFilters）。根据 activeTab 动态加载下方的子组件。
- components/SearchResult/PrepackagedList.vue:
  - 职责: 接收“预包装”食品的数据数组作为prop，并渲染其列表。
- components/SearchResult/AdditiveList.vue:
  - 职责: 接收“添加剂”的数据数组作为prop，并渲染其列表。
- components/SearchResult/MaterialList.vue:
  - 职责: 接收“食材”的数据数组作为prop，并渲染其列表。
- (其他列表组件以此类推...)
优点:
- 实现相对简单快捷，能快速解决主文件过长的问题。
- 模板逻辑被有效分离，提高了可维护性。
缺点:
- 结果卡片（Card）的UI和逻辑仍然耦合在各自的列表组件中，未能实现最大化复用。

方案 2: 深度组件化 (按列表和卡片拆分) - 【推荐】

核心思想: 在方案1的基础上，将可复用的“结果卡片”也抽取为独立的组件。
组件结构:
- 视图层 (View):
  - SearchResultView.vue: 职责与方案1相同，作为容器和逻辑控制器。
- 列表组件 (List Components):
  - components/SearchResult/PrepackagedList.vue: 接收数据数组，循环渲染 PrepackagedCard.vue 组件。
  - components/SearchResult/AdditiveList.vue: 接收数据数组，循环渲染 AdditiveCard.vue 组件。
  - (...其他列表组件)
- 卡片组件 (Card Components):
  - components/SearchResult/PrepackagedCard.vue: 接收单个“预包装”食品对象作为prop，负责该卡片的全部UI展示。
  - components/SearchResult/AdditiveCard.vue: 接收单个“添加剂”对象作为prop，负责其UI展示。
  - components/SearchResult/MaterialCard.vue: 接收单个“食材”对象作为prop，负责其UI展示。
  - components/SearchResult/SummaryCard.vue: 一个通用的摘要卡片，可用于“食谱”和“资讯”。
优点:
- 极致的复用性: 卡片组件（如 PrepackagedCard）成为独立的UI单元，未来可在任何需要展示此信息的地方复用（如首页推荐、用户收藏列表等）。
- 严格的单一职责: 每个组件的职责都非常清晰。视图管布局和逻辑，列表管循环，卡片管展示。
- 最佳的可维护性与可扩展性: 修改卡片样式只需编辑对应的小文件，影响范围可控。未来新增结果类型也只需创建新的列表和卡片组件，对现有代码无侵入。
缺点:
- 初始创建的文件数量较多。

3. 结论与建议

作为架构师和首席开发，我强烈推荐采用方案2：深度组件化。

虽然该方案的初始工作量略高，但它带来的高内聚、低耦合的架构优势是巨大的。这不仅是对当前代码质量的提升，更是对项目未来可维护性和团队协作效率的长期投资。它完全符合现代前端工程化的最佳实践。

4.0 KiB Raw Blame History Unescape Escape