📝 docs: 更新故事001.017任务细节，添加文件路径和对照路径

- 在任务中标注具体的文件路径和对照文件路径
- 添加测试文件参考路径
- 完善任务描述，明确每个任务对应的具体文件和对照文件
- 保持与故事001.016一致的格式规范

Generated with [Claude Code](https://claude.ai/code)
via [Happy](https://happy.engineering)

Co-Authored-By: Claude <noreply@anthropic.com>
Co-Authored-By: Happy <yesreply@happy.engineering>

docs/stories/001.017.search-page-development.story.md

@@ -0,0 +1,119 @@
+# Story 001.017: 搜索页面开发
+
+## Status
+Draft
+
+## Story
+**As a** 用户，
+**I want** 在mini中新增搜索页面，支持搜索历史和热门搜索功能，
+**so that** 我可以方便地搜索商品并获得统一的视觉体验
+
+## Acceptance Criteria
+1. 实现搜索栏组件，支持输入和提交
+2. 集成搜索历史功能，支持历史记录显示和清空
+3. 集成热门搜索功能，显示热门搜索词
+4. 支持从历史搜索和热门搜索点击直接搜索
+5. 应用tcb-shop-demo搜索页设计规范
+6. 支持空状态显示
+7. 页面组件TypeScript编译正常，无错误
+
+## Tasks / Subtasks
+- [ ] **创建搜索页面组件和配置文件** (AC: 1, 5, 7)
+  - [ ] 创建搜索页面组件 `mini/src/pages/search/index.tsx` [对照: `tcb-shop-demo/pages/goods/search/index.wxml`]
+  - [ ] 创建页面配置文件 `mini/src/pages/search/index.config.ts` [参考: `mini/src/pages/index/index.config.ts`]
+  - [ ] 创建专用样式文件 `mini/src/pages/search/index.css` [对照: `tcb-shop-demo/pages/goods/search/index.wxss`]
+  - [ ] 应用tcb-shop-demo搜索页整体布局结构
+
+- [ ] **实现搜索栏功能** (AC: 1)
+  - [ ] 实现搜索输入框组件，支持输入和提交 `mini/src/pages/search/index.tsx` [对照: `tcb-shop-demo/pages/goods/search/index.wxml` 中的search-bar部分]
+  - [ ] 集成搜索图标和清除按钮，应用tcb-shop-demo设计规范
+  - [ ] 支持回车键提交搜索，参照demo搜索交互逻辑 `tcb-shop-demo/pages/goods/search/index.js`
+  - [ ] 应用搜索栏样式 `mini/src/pages/search/index.css` [对照: `tcb-shop-demo/pages/goods/search/index.wxss` 中的search-bar样式]
+
+- [ ] **实现搜索历史功能** (AC: 2, 4)
+  - [ ] 使用本地存储管理搜索历史，实现历史记录持久化
+  - [ ] 实现历史记录显示，支持点击直接搜索 `mini/src/pages/search/index.tsx` [对照: `tcb-shop-demo/pages/goods/search/index.wxml` 中的search-history部分]
+  - [ ] 实现历史记录清空功能，参照demo清空交互 `tcb-shop-demo/pages/goods/search/index.js`
+  - [ ] 应用搜索历史样式 `mini/src/pages/search/index.css` [对照: `tcb-shop-demo/pages/goods/search/index.wxss` 中的search-history样式]
+
+- [ ] **实现热门搜索功能** (AC: 3, 4)
+  - [ ] 集成热门搜索API，获取热门搜索词，使用 `mini/src/api.ts` 中的搜索客户端
+  - [ ] 实现热门搜索词显示，支持点击直接搜索 `mini/src/pages/search/index.tsx` [对照: `tcb-shop-demo/pages/goods/search/index.wxml` 中的hot-search部分]
+  - [ ] 支持热门搜索词轮播或分页显示，参照demo热门搜索布局
+  - [ ] 应用热门搜索样式 `mini/src/pages/search/index.css` [对照: `tcb-shop-demo/pages/goods/search/index.wxss` 中的hot-search样式]
+
+- [ ] **应用tcb-shop-demo设计规范** (AC: 5)
+  - [ ] 参照 `tcb-shop-demo/pages/goods/search/index.wxml` 页面结构，重新组织页面布局
+  - [ ] 应用tcb-shop-demo搜索页样式规范，确保视觉一致性
+  - [ ] 确保与现有主题系统兼容，集成 `mini/src/tcb-theme.css` 主题变量
+  - [ ] 验证页面结构与demo一致，包含搜索栏、搜索历史、热门搜索等区域
+
+- [ ] **实现空状态显示** (AC: 6)
+  - [ ] 实现无搜索历史时的空状态页面 `mini/src/pages/search/index.tsx` [对照: `tcb-shop-demo/pages/goods/search/index.wxml` 中的empty状态部分]
+  - [ ] 实现无热门搜索时的空状态页面，参照demo空状态设计
+  - [ ] 添加空状态图标和提示文字，应用tcb-shop-demo空状态样式
+  - [ ] 应用空状态样式 `mini/src/pages/search/index.css` [对照: `tcb-shop-demo/pages/goods/search/index.wxss` 中的empty样式]
+
+- [ ] **创建单元测试** (AC: 7)
+  - [ ] 创建搜索页面基础测试 `mini/tests/unit/pages/search/basic.test.tsx` [参考: `mini/tests/unit/pages/address-manage/basic.test.tsx`]
+  - [ ] 测试搜索历史功能，验证本地存储操作
+  - [ ] 测试热门搜索功能，验证API调用和数据显示
+  - [ ] 测试空状态显示，验证不同条件下的空状态渲染
+  - [ ] 测试搜索提交功能，验证搜索跳转逻辑
+  - [ ] 验证TypeScript编译无错误，确保代码质量
+
+## Dev Notes
+
+### 技术栈和架构上下文
+- **技术栈**: Taro.js + React + TypeScript + Tailwind CSS [Source: docs/architecture/tech-stack.md]
+- **API客户端**: Hono RPC (hc) 类型安全API调用 [Source: docs/architecture/tech-stack.md]
+- **状态管理**: React Query (TanStack Query) 5.83.0 [Source: docs/architecture/tech-stack.md]
+- **样式系统**: tcb-shop-demo主题系统已集成在 `mini/src/tcb-theme.css` [Source: docs/prd/epic-001-tcb-shop-theme-integration.md#主题变量系统]
+
+### 项目结构
+- **搜索页面位置**: `mini/src/pages/search/` [Source: docs/architecture/source-tree.md#mini-小程序项目]
+- **组件位置**: `mini/src/components/` [Source: docs/architecture/source-tree.md#mini-小程序项目]
+- **API客户端**: `mini/src/api.ts` [Source: docs/architecture/source-tree.md#mini-小程序项目]
+
+### 设计规范参考
+- **对照文件**: `tcb-shop-demo/pages/goods/search/index.wxml` - 搜索页结构模板 [Source: docs/prd/epic-001-tcb-shop-theme-integration.md#故事17]
+- **样式文件**: `tcb-shop-demo/pages/goods/search/index.wxss` - 搜索页样式文件 [Source: docs/prd/epic-001-tcb-shop-theme-integration.md#故事17]
+- **逻辑文件**: `tcb-shop-demo/pages/goods/search/index.js` - 搜索页逻辑文件 [Source: docs/prd/epic-001-tcb-shop-theme-integration.md#故事17]
+
+### 数据模型和API
+- **搜索历史**: 使用本地存储管理，无需后端API
+- **热门搜索**: 需要集成热门搜索API，获取热门搜索词列表
+- **搜索功能**: 需要集成商品搜索API，支持关键词搜索
+
+### 兼容性要求
+- 与现有tcb-shop-demo主题系统完全兼容
+- 保持与现有页面导航模式一致
+- 支持从小程序其他页面跳转到搜索页面
+
+### Testing
+- **测试框架**: Jest (mini使用Jest) [Source: CLAUDE.md#测试调试]
+- **测试位置**: `mini/tests/unit/pages/search/` [Source: docs/architecture/source-tree.md#测试结构]
+- **测试命令**: `pnpm test --testNamePattern "搜索页面"` [Source: CLAUDE.md#测试调试]
+- **测试要求**:
+  - 验证搜索历史功能正常工作
+  - 验证热门搜索API调用正常
+  - 验证搜索提交功能正常
+  - 验证空状态显示正确
+  - 验证TypeScript编译无错误
+
+## Change Log
+| Date | Version | Description | Author |
+|------|---------|-------------|--------|
+| 2025-11-23 | 1.0 | 初始故事创建 | Bob (Scrum Master) |
+
+## Dev Agent Record
+
+### Agent Model Used
+
+### Debug Log References
+
+### Completion Notes List
+
+### File List
+
+## QA Results