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

5.3 KiB

Raw Blame History

SearchResultView 重构实施计划

项目ID: shihuashishuo-ui 任务: 重构 shihuashishuo-ui/src/views/核心体验页/SearchResultView-搜索结果页.vue 阶段: 计划 (PLAN) 创建者: AR/LD 时间: 2025-07-25 关联提案: project_document/innovate-20250725-search-result-refactor-proposal.md

1. 总体目标

将 SearchResultView.vue 按照深度组件化方案进行重构，拆分为视图、列表、卡片三层结构，以提高代码的可维护性、复用性和可读性。

2. 实施任务清单

任务 1：[重构-准备] 1. 创建搜索结果子组件目录

ID: 657c0d09-4bc3-405f-964b-0150f69a41bf
描述: 为所有新创建的搜索结果子组件创建一个统一的存放目录，保持项目结构的清晰性。
实现指南: 在 shihuashishuo-ui/src/components/ 路径下创建一个名为 SearchResult 的新文件夹。
验证标准: 确认 shihuashishuo-ui/src/components/SearchResult 目录已成功创建。
依赖任务: 无

任务 2：[重构-卡片层] 2. 创建原子卡片(Card)组件文件

ID: 6bd9cc67-3fa6-4e67-8e8c-bce840573987
描述: 创建所有结果类型的原子卡片Vue组件文件。这些组件是UI展示的最小单元，只负责渲染自身UI。
实现指南: 在 shihuashishuo-ui/src/components/SearchResult/ 目录下创建以下四个文件：PrepackagedCard.vue, AdditiveCard.vue, MaterialCard.vue, SummaryCard.vue。每个文件都应包含空的 <template>, <script setup lang="ts">, 和 <style scoped> 结构。
验证标准: 确认四个卡片组件文件已在指定目录下创建，且包含基础的SFC结构。
依赖任务: [重构-准备] 1. 创建搜索结果子组件目录

任务 3：[重构-卡片层] 3. 迁移内容到原子卡片组件

ID: fd187d9f-28e8-484f-954a-79aa5b562a41
描述: 将 SearchResultView.vue 中对应各类结果的模板(HTML)和样式(CSS)代码，分别迁移到对应的原子卡片组件中。
实现指南:
1. PrepackagedCard.vue: 剪切旧文件中 .result-item.product-card 的HTML结构和相关CSS，粘贴到此组件。定义 item: Object prop接收数据。
2. AdditiveCard.vue: 剪切旧文件中 .result-item.additive-card 的HTML结构和相关CSS，粘贴到此组件。定义 item: Object prop。
3. MaterialCard.vue: 剪切旧文件中 .result-item.material-card 的HTML结构和相关CSS，粘贴到此组件。定义 item: Object prop。
4. SummaryCard.vue: 剪切旧文件中用于“食谱”和“资讯”的通用 .result-item 结构和CSS，粘贴到此组件。定义 item: Object prop。
验证标准: 每个卡片组件都能基于传入的 item prop 正确渲染UI，且样式与原设计一致。
依赖任务: [重构-卡片层] 2. 创建原子卡片(Card)组件文件

任务 4：[重构-列表层] 4. 创建列表(List)组件

ID: 2e400764-be58-499b-9970-3ae9901823b2
描述: 创建负责渲染各种卡片列表的组件。这些组件作为中间层，连接视图和原子卡片。
实现指南: 在 shihuashishuo-ui/src/components/SearchResult/ 目录下创建以下五个文件：PrepackagedList.vue, AdditiveList.vue, MaterialList.vue, RecipeList.vue, ArticleList.vue。在每个文件中，导入对应的卡片组件，定义 items: Array prop，并在模板中使用 v-for 循环渲染卡片组件。监听卡片点击事件并向上emit item-click 事件。
验证标准: 每个列表组件都能根据传入的 items 数组正确渲染出对应的卡片列表。
依赖任务: [重构-卡片层] 3. 迁移内容到原子卡片组件

任务 5：[重构-视图层] 5. 重构SearchResultView容器组件

ID: 3c8cd9df-1095-499c-92af-7488db595ab7
描述: 改造顶层视图 SearchResultView.vue，移除所有硬编码的列表和卡片逻辑，替换为动态组件渲染机制。
实现指南:
1. 从模板中删除所有 .result-item 的HTML结构。
2. 在 <script> 中导入所有列表组件，并创建一个Tab ID到组件的映射对象。
3. 在模板的 <main> 区域，使用 <component :is="componentMap[activeTab]" :items="filteredResults" @item-click="goToResult" /> 来动态渲染列表。
4. 调整数据处理逻辑，确保 filteredResults 能为不同列表提供正确的数据。
5. 从 <style> 中删除所有已迁移到子组件的样式。
验证标准: 页面功能与重构前完全一致。SearchResultView.vue 的代码行数显著减少，不再包含任何卡片或列表的具体UI实现。
依赖任务: [重构-列表层] 4. 创建列表(List)组件

任务 6：[重构-收尾] 6. 最终审查与清理

ID: 4efef42f-a16a-4868-a6b1-0b858a22fcc4
描述: 在完成核心重构后，进行最后的代码审查和清理，确保没有冗余代码、未使用的变量或样式。
实现指南: 仔细检查 SearchResultView.vue 文件，删除所有在重构过程中遗留的、现已无用的注释、变量、方法和CSS规则。运行项目，检查浏览器控制台是否有任何错误或警告。
验证标准: 项目可正常编译和运行，无任何与本次重构相关的控制台错误或警告。代码整洁，无冗余。
依赖任务: [重构-视图层] 5. 重构SearchResultView容器组件

5.3 KiB Raw Blame History Unescape Escape