L.star
aa2a7ae542
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/'.
65 lines
5.3 KiB
Markdown
65 lines
5.3 KiB
Markdown
# 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容器组件` |