feat: 实现环境判断的Mock数据自动切换模式

- 修复搜索页面布局：顶部固定（NavHeader+SearchBar+Tabs+ResultCount）+ 列表滚动 - 修复搜索分页hasMore计算时机bug（首次搜索显示没有更多的问题） - 实现环境判断的Mock数据自动切换 - 开发环境（pnpm dev:weapp）使用mock数据 - 生产环境（pnpm build:weapp）使用真实API - 使用process.env.NODE_ENV === 'development'自动判断 - 更新5个页面使用环境变量判断 - 新增开发工作流文档到lessons-learned.md 修改文件: - src/pages/search/index.vue: 修复布局和分页逻辑 - src/pages/week-hot-material/index.vue: 环境判断 - src/pages/message/index.vue: 环境判断 - src/pages/material-list/index.vue: 环境判断 - src/pages/product-center/index.vue: 环境判断 - docs/lessons-learned.md: 新增开发工作流章节Mock数据环境自动切换模式 Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

feat: 实现环境判断的Mock数据自动切换模式
- 修复搜索页面布局：顶部固定（NavHeader+SearchBar+Tabs+ResultCount）+ 列表滚动 - 修复搜索分页hasMore计算时机bug（首次搜索显示没有更多的问题） - 实现环境判断的Mock数据自动切换 - 开发环境（pnpm dev:weapp）使用mock数据 - 生产环境（pnpm build:weapp）使用真实API - 使用process.env.NODE_ENV === 'development'自动判断 - 更新5个页面使用环境变量判断 - 新增开发工作流文档到lessons-learned.md 修改文件: - src/pages/search/index.vue: 修复布局和分页逻辑 - src/pages/week-hot-material/index.vue: 环境判断 - src/pages/message/index.vue: 环境判断 - src/pages/material-list/index.vue: 环境判断 - src/pages/product-center/index.vue: 环境判断 - docs/lessons-learned.md: 新增开发工作流章节Mock数据环境自动切换模式 Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
hookehuyr
Commit 3c53a9ecce9c78df339defd76b1012dae1c10350 3c53a9ec 1 parent ac2fc276
Showing 11 changed files with 1262 additions and 94 deletions
docs/lessons-learned.md
docs/mock-data-complete-summary.md
docs/mock-data-setup-guide.md
docs/scroll-load-test-guide.md
src/pages/material-list/index.vue
src/pages/message/index.vue
src/pages/product-center/index.vue
src/pages/search/index.vue
src/pages/week-hot-material/index.config.js
src/pages/week-hot-material/index.vue
src/utils/mockData.js
--- a/docs/lessons-learned.md
View file @3c53a9e
+++ b/docs/lessons-learned.md
View file @3c53a9e
@@ -16,6 +16,8 @@
   - [错误处理](#3-错误处理)
   - [API 调用错误：使用 fn() 包装](#坑-api-调用了-fn-包装重复-2-次) ⭐ 新增
 - [架构设计](#架构设计)
+- [开发工作流](#开发工作流) ⭐ 新增
+  - [Mock 数据环境自动切换](#mock-数据环境自动切换模式) ⭐ 新增
 ---
@@ -1039,6 +1041,174 @@ src/
 ---
+## 开发工作流
+
+### ✅ Mock 数据环境自动切换模式
+
+#### 问题描述
+
+在开发过程中，使用 Mock 数据进行前端开发可以提高效率，但手动切换 Mock 数据和真实 API 容易出错：
+
+```javascript
+// ❌ BAD - 硬编码开关，容易忘记切换
+const USE_MOCK_DATA = true  // 开发时用 true，部署时忘记改成 false
+
+const res = USE_MOCK_DATA
+  ? await mockWeekHotAPI(params)
+  : await weekHotAPI(params)
+
+// 风险：部署到生产环境时仍然使用 Mock 数据
+```
+
+**错误表现**：
+- 🔴 开发完成后忘记关闭 Mock 数据开关
+- 🔴 生产环境返回假数据，导致严重问题
+- 🔴 需要手动在每个页面中切换，容易遗漏
+
+#### 解决方案：基于环境变量自动切换
+
+使用 `process.env.NODE_ENV` 判断当前环境，自动选择使用 Mock 数据还是真实 API：
+
+```javascript
+// ✅ GOOD - 环境变量自动判断
+const USE_MOCK_DATA = process.env.NODE_ENV === 'development'
+
+const res = USE_MOCK_DATA
+  ? await mockWeekHotAPI(params)
+  : await weekHotAPI(params)
+
+console.log('[Week Hot] 使用 Mock 数据:', USE_MOCK_DATA)
+```
+
+#### 环境说明
+
+| 环境 | NODE_ENV | 命令 | Mock 数据 |
+|------|-----------|------|----------|
+| **开发环境** | `'development'` | `pnpm dev:weapp` | ✅ 启用 |
+| **生产环境** | `'production'` | `pnpm build:weapp` | ❌ 禁用 |
+
+#### 实施步骤
+
+1. **修改所有使用 Mock 数据的页面**（共 5 个）：
+   - `src/pages/search/index.vue`（line 152）
+   - `src/pages/week-hot-material/index.vue`（line 76）
+   - `src/pages/message/index.vue`（line 57）
+   - `src/pages/material-list/index.vue`（line 131）
+   - `src/pages/product-center/index.vue`（line 159）
+
+2. **统一修改代码**：
+   ```javascript
+   // 修改前
+   const USE_MOCK_DATA = true  // ❌ 硬编码
+
+   // 修改后
+   const USE_MOCK_DATA = process.env.NODE_ENV === 'development'  // ✅ 环境判断
+   ```
+
+3. **添加日志**（可选，便于调试）：
+   ```javascript
+   console.log('[PageName] 使用 Mock 数据:', USE_MOCK_DATA)
+   ```
+
+#### 收益
+
+✅ **开发环境**：
+- 快速迭代，无需等待后端接口
+- 测试分页、加载更多等前端逻辑
+- 模拟各种数据场景
+
+✅ **生产环境**：
+- 自动切换到真实 API
+- 无需手动修改代码
+- 避免假数据上线风险
+
+✅ **安全性**：
+- 无法在生产环境误用 Mock 数据
+- 一次配置，永久生效
+
+#### 使用示例
+
+```vue
+<script setup>
+import { ref } from 'vue'
+import { weekHotAPI } from '@/api/file'
+import { mockWeekHotAPI } from '@/utils/mockData'
+
+// ⚠️ MOCK 数据开关 - 开发环境使用 mock 数据，生产环境使用真实 API
+const USE_MOCK_DATA = process.env.NODE_ENV === 'development'
+
+const list = ref([])
+const loading = ref(false)
+
+const fetchList = async (params) => {
+  loading.value = true
+
+  try {
+    console.log('[Week Hot] 使用 Mock 数据:', USE_MOCK_DATA)
+
+    // 根据开关选择使用真实 API 或 Mock 数据
+    const res = USE_MOCK_DATA
+      ? await mockWeekHotAPI(params)
+      : await weekHotAPI(params)
+
+    if (res.code === 1 && res.data) {
+      list.value = res.data.list
+    }
+  } catch (err) {
+    console.error('获取列表失败:', err)
+  } finally {
+    loading.value = false
+  }
+}
+</script>
+```
+
+#### 注意事项
+
+1. **确保 Mock 数据结构一致**：
+   - Mock 数据的返回格式必须与真实 API 一致
+   - 特别是 `{ code, data, msg }` 结构
+   - 确保分页字段名称一致
+
+2. **生产构建前检查**：
+   ```bash
+   # 开发环境（使用 Mock）
+   pnpm dev:weapp
+
+   # 生产构建前检查环境变量
+   pnpm build:weapp
+   # 确认打包后的代码使用真实 API
+   ```
+
+3. **代码审查清单**：
+   - [ ] 所有 Mock 数据开关都改为 `process.env.NODE_ENV === 'development'`
+   - [ ] 添加了调试日志
+   - [ ] Mock 数据结构符合真实 API
+
+#### 相关文件
+
+- Mock 数据定义：`src/utils/mockData.js`
+- 使用 Mock 的页面（5 个）：
+  - `src/pages/search/index.vue`
+  - `src/pages/week-hot-material/index.vue`
+  - `src/pages/message/index.vue`
+  - `src/pages/material-list/index.vue`
+  - `src/pages/product-center/index.vue`
+
+#### 最佳实践总结
+
+⚠️ **强制要求**：所有使用 Mock 数据的页面都必须使用环境变量判断，禁止硬编码开关。
+
+```javascript
+// ✅ 推荐写法
+const USE_MOCK_DATA = process.env.NODE_ENV === 'development'
+
+// ❌ 禁止写法
+const USE_MOCK_DATA = true  // 容易导致生产环境误用
+```
+
+---
+
 ## 总结
 ### 🎯 核心经验
@@ -1051,7 +1221,8 @@ src/
 6. **代码质量**: 强制 JSDoc 注释,统一命名规范
 7. **API 调用规范**: ⚠️ **不要使用 `fn()` 包装 API，直接调用并自己处理错误**
 8. **架构设计**: 分层清晰,职责单一
-9. **⚠️ 写代码前必查**: 先搜索项目中是否有类似实现，保持写法一致
+9. **Mock 数据切换**: ⭐ **使用环境变量 `process.env.NODE_ENV` 自动判断，禁止硬编码**
+10. **⚠️ 写代码前必查**: 先搜索项目中是否有类似实现，保持写法一致
 ### 📚 推荐阅读
@@ -1067,6 +1238,9 @@ src/
 ---
-**最后更新**: 2026-02-05
+**最后更新**: 2026-02-08
 **维护者**: Claude Code
 **项目**: Manulife WeApp
+
+**更新记录**:
+- 2026-02-08: 新增 "开发工作流" 章节，记录 Mock 数据环境自动切换模式
--- a/docs/mock-data-complete-summary.md 0 → 100644
View file @3c53a9e
+++ b/docs/mock-data-complete-summary.md 0 → 100644
View file @3c53a9e
+# Mock 数据配置完成总结
+
+**日期**: 2026-02-08
+**状态**: ✅ 所有页面已配置完成
+
+---
+
+## 已添加 Mock 数据的页面
+
+| # | 页面 | 文件路径 | Mock 函数 | 状态 |
+|---|------|---------|----------|------|
+| 1 | 周热门资料 | `src/pages/week-hot-material/index.vue` | `mockWeekHotAPI` | ✅ 已完成 |
+| 2 | 资料列表 | `src/pages/material-list/index.vue` | `mockFileListAPI` | ✅ 已完成 |
+| 3 | 产品中心 | `src/pages/product-center/index.vue` | `mockProductListAPI` | ✅ 已完成 |
+| 4 | 搜索页 | `src/pages/search/index.vue` | `mockSearchAPI` | ✅ 已完成 |
+| 5 | 消息列表 | `src/pages/message/index.vue` | `mockMessageListAPI` | ✅ 已完成 |
+
+---
+
+## 每个页面的修改内容
+
+### 1. 周热门资料页 ✅
+
+**文件**: `src/pages/week-hot-material/index.vue`
+
+**修改**:
+- ✅ 导入 `mockWeekHotAPI`
+- ✅ 添加 `USE_MOCK_DATA = true` 开关 (第 76 行)
+- ✅ 修改 `fetchWeekHotList` 函数 (第 110-112 行)
+
+**使用**:
+```javascript
+// 第 76 行
+const USE_MOCK_DATA = true  // ✅ 已启用
+```
+
+---
+
+### 2. 资料列表页 ✅
+
+**文件**: `src/pages/material-list/index.vue`
+
+**修改**:
+- ✅ 导入 `mockFileListAPI`
+- ✅ 添加 `USE_MOCK_DATA = true` 开关 (第 128 行)
+- ✅ 修改主 API 调用 (第 283-289 行)
+- ✅ 修改搜索 API 调用 (第 573-579 行)
+
+**使用**:
+```javascript
+// 第 128 行
+const USE_MOCK_DATA = true  // ✅ 已启用
+```
+
+**特性**:
+- ✅ 支持分类过滤 (`cid`)
+- ✅ 支持关键词搜索 (`keyword`)
+- ✅ 8 页数据，每页 20 条
+
+---
+
+### 3. 产品中心页 ✅
+
+**文件**: `src/pages/product-center/index.vue`
+
+**修改**:
+- ✅ 导入 `mockProductListAPI`
+- ✅ 添加 `USE_MOCK_DATA = true` 开关 (第 158 行)
+- ✅ 修改 `fetchProducts` 函数 (第 217-222 行)
+
+**使用**:
+```javascript
+// 第 158 行
+const USE_MOCK_DATA = true  // ✅ 已启用
+```
+
+**特性**:
+- ✅ 4 种产品分类(人寿保险、健康保险、意外保险、财产保险)
+- ✅ 4 种标签(热销、新品、推荐、限时)
+- ✅ 支持分类过滤 (`cid`)
+- ✅ 支持关键词搜索 (`keyword`)
+- ✅ 10 页数据，每页 10 条
+
+---
+
+### 4. 搜索页 ✅
+
+**文件**: `src/pages/search/index.vue`
+
+**修改**:
+- ✅ 导入 `mockSearchAPI`
+- ✅ 添加 `USE_MOCK_DATA = true` 开关 (第 151 行)
+- ✅ 修改 `performSearch` 函数 (第 229-234 行)
+
+**使用**:
+```javascript
+// 第 151 行
+const USE_MOCK_DATA = true  // ✅ 已启用
+```
+
+**特性**:
+- ✅ 同时搜索产品和资料
+- ✅ 支持关键词过滤
+- ✅ 自动选择有数据的 tab
+- ✅ 5 页数据，每页 20 条
+
+---
+
+### 5. 消息列表页 ✅
+
+**文件**: `src/pages/message/index.vue`
+
+**修改**:
+- ✅ 导入 `mockMessageListAPI`
+- ✅ 添加 `USE_MOCK_DATA = true` 开关 (第 56 行)
+- ✅ 修改 `fetchMessageList` 函数 (第 79-89 行)
+
+**使用**:
+```javascript
+// 第 56 行
+const USE_MOCK_DATA = true  // ✅ 已启用
+```
+
+**特性**:
+- ✅ 15 种消息标题模板
+- ✅ 随机创建时间(最近30天内)
+- ✅ 50%概率已读
+- ✅ 两种消息类型(通知、系统)
+- ✅ 8 页数据，每页 10 条
+
+---
+
+## 全局测试步骤
+
+### 1. 启动开发服务器
+
+```bash
+pnpm dev:weapp
+```
+
+### 2. 测试每个页面
+
+#### 周热门资料页
+1. 导航到"周热门资料"页
+2. 查看首次加载(20 条数据)
+3. 向下滚动,触发加载更多
+4. 查看 Console: `[Mock] weekHotAPI - 第X页,共Y条`
+5. 滚动到底,显示"没有更多了"
+
+#### 资料列表页
+1. 导航到"资料列表"页
+2. 查看首次加载
+3. 测试切换分类 tab
+4. 测试搜索功能
+5. 向下滚动加载更多
+
+#### 产品中心页
+1. 导航到"产品中心"页
+2. 查看首次加载(10 条数据)
+3. 测试切换分类 tab(人寿保险、健康保险等)
+4. 测试搜索功能
+5. 向下滚动加载更多
+
+#### 搜索页
+1. 导航到"搜索"页
+2. 输入关键词(如"保险"、"产品"等)
+3. 点击搜索或按回车
+4. 查看产品和资料结果
+5. 切换产品/资料 tab
+6. 向下滚动加载更多
+
+#### 消息列表页
+1. 导航到"我的消息"页
+2. 查看首次加载(10 条数据)
+3. 向下滚动加载更多
+4. 查看消息时间格式(YYYY-MM-DD)
+5. 滚动到底,显示"没有更多了"
+
+### 3. 查看 Console 日志
+
+正常情况下会看到:
+```
+[Mock] weekHotAPI - 第0页,共20条
+[Mock] fileListAPI - 第0页,共20条
+[Mock] listAPI - 第0页,共10条
+[Mock] searchAPI - 第0页,产品10条,资料10条
+[Mock] myListAPI - 第1页,共10条
+```
+
+---
+
+## 切换回真实 API
+
+测试完成后,需要将所有页面的开关改为 `false`:
+
+### 快速切换脚本
+
+```bash
+# 使用 sed 批量替换
+sed -i '' 's/const USE_MOCK_DATA = true/const USE_MOCK_DATA = false/g' \
+  src/pages/week-hot-material/index.vue \
+  src/pages/material-list/index.vue \
+  src/pages/product-center/index.vue \
+  src/pages/search/index.vue \
+  src/pages/message/index.vue
+```
+
+### 手动切换
+
+修改每个页面文件中的 `USE_MOCK_DATA` 常量:
+
+```javascript
+// 修改前
+const USE_MOCK_DATA = true
+
+// 修改后
+const USE_MOCK_DATA = false
+```
+
+**需要修改的 5 个文件**:
+1. `src/pages/week-hot-material/index.vue`
+2. `src/pages/material-list/index.vue`
+3. `src/pages/product-center/index.vue`
+4. `src/pages/search/index.vue`
+5. `src/pages/message/index.vue`
+
+---
+
+## Mock 数据字段对照表
+
+### 周热门资料
+
+| 字段 | 类型 | 说明 | 示例 |
+|------|------|------|------|
+| `meta_id` | integer | 文件ID | 1, 2, 3... |
+| `name` | string | 文件名称 | "财富管理基础知识指南 PDF文档" |
+| `src` | string | 文件URL | "https://cdn.example.com/files/1.pdf" |
+| `size` | string | 文件大小 | "2.5MB" |
+| `read_people_count` | integer | 学习人数 | 1234 |
+| `read_people_percent` | number | 学习百分比 | 75 |
+| `is_favorite` | string | 收藏状态 | "1" 或 "0" |
+| `extension` | string | 文件扩展名 | "pdf" |
+
+### 资料列表
+
+| 字段 | 类型 | 说明 | 示例 |
+|------|------|------|------|
+| `id` | integer | 资料ID | 1, 2, 3... |
+| `name` | string | 资料名称 | "2024年保险行业发展趋势报告" |
+| `title` | string | 资料标题 | "2024年保险行业发展趋势报告" |
+| `fileName` | string | 文件名 | "报告.pdf" |
+| `size` | string | 文件大小 | "2.5MB" |
+| `extension` | string | 文件扩展名 | "pdf" |
+| `collected` | boolean | 是否已收藏 | true/false |
+| `src` | string | 文件URL | "https://cdn.example.com/materials/1.pdf" |
+| `downloadUrl` | string | 下载URL | "https://cdn.example.com/materials/1.pdf" |
+
+### 产品列表
+
+| 字段 | 类型 | 说明 | 示例 |
+|------|------|------|------|
+| `id` | integer | 产品ID | 1, 2, 3... |
+| `product_name` | string | 产品名称 | "百万年金保险计划" |
+| `name` | string | 产品名称(别名) | "百万年金保险计划" |
+| `cover_image` | string | 封面图URL | "https://cdn.example.com/products/1.jpg" |
+| `recommend` | string | 推荐标识 | "hot" 或 "" |
+| `tags` | Array | 标签数组 | [{id: 1, name: "热销", bg_color: "#FEE2E2", text_color: "#DC2626"}] |
+| `description` | string | 产品描述 | "这是一款优质的保险产品..." |
+| `premium` | number | 保费 | 5000 |
+| `category_id` | integer | 分类ID | 1 |
+
+### 搜索结果
+
+| 字段 | 类型 | 说明 |
+|------|------|------|
+| `products` | Array | 产品列表(同产品列表字段) |
+| `files` | Array | 资料列表(同资料列表字段) |
+
+### 消息列表
+
+| 字段 | 类型 | 说明 | 示例 |
+|------|------|------|------|
+| `id` | integer | 消息ID | 1, 2, 3... |
+| `title` | string | 消息标题 | "关于2024年新产品上线通知" |
+| `intro` | string | 消息简介 | "这是一条关于..." |
+| `content` | string | 消息内容 | "这是一条关于..." |
+| `create_time` | string | 创建时间 | "2024-01-15" |
+| `is_read` | integer | 是否已读 | 0 或 1 |
+| `type` | string | 消息类型 | "notice" 或 "system" |
+
+---
+
+## 常见问题
+
+### Q: Mock 数据不生效?
+
+**检查**:
+1. 确认对应页面的 `USE_MOCK_DATA = true`
+2. 确认已正确导入 mock 函数
+3. 查看 console 是否有 `[Mock]` 日志输出
+4. 检查网络请求是否调用了 mock 函数
+
+### Q: 数据格式不对?
+
+**检查**:
+1. 查看 `src/utils/mockData.js` 中的字段定义
+2. 对照页面代码中的字段映射逻辑
+3. 在 browser console 查看返回的数据结构
+
+### Q: 想修改数据量?
+
+**修改**:
+- 修改页面的 `pageSize` 或 `limit` 变量
+- Mock 数据会自动适应请求的数量
+
+### Q: 想增加总页数?
+
+**修改** `src/utils/mockData.js`:
+```javascript
+// 修改 totalPages 值
+const totalPages = 10  // 从 5 改为 10
+```
+
+### Q: 搜索功能不工作?
+
+**检查**:
+1. 确认输入了关键词
+2. 确认 mock 数据中有包含该关键词的数据
+3. 查看 console 日志确认请求参数
+
+---
+
+## 验收清单
+
+测试完成后,请确认:
+
+- [ ] 周热门资料页滚动加载正常
+- [ ] 资料列表页滚动加载正常
+- [ ] 资料列表页分类切换正常
+- [ ] 资料列表页搜索功能正常
+- [ ] 产品中心页滚动加载正常
+- [ ] 产品中心页分类切换正常
+- [ ] 产品中心页搜索功能正常
+- [ ] 搜索页关键词搜索正常
+- [ ] 搜索页产品/资料切换正常
+- [ ] 搜索页滚动加载正常
+- [ ] 消息列表页滚动加载正常
+- [ ] 所有页面 Console 日志正确输出
+- [ ] 所有页面"没有更多了"正常显示
+- [ ] 数据格式正确,无报错
+
+---
+
+## 下一步
+
+1. **测试**: 逐个测试所有页面的滚动加载功能
+2. **验证**: 确认数据格式和功能正常
+3. **调试**: 如有问题,查看 Console 日志定位
+4. **切换**: 测试完成后,切换回真实 API
+5. **提交**: 将修改提交到代码仓库
+
+---
+
+**最后更新**: 2026-02-08
+**维护者**: Claude Code
--- a/docs/mock-data-setup-guide.md 0 → 100644
View file @3c53a9e
+++ b/docs/mock-data-setup-guide.md 0 → 100644
View file @3c53a9e
+# Mock 数据测试指南
+
+## 概述
+
+已为以下 5 个页面创建完整的 Mock 数据支持:
+
+| 页面 | API | Mock 函数 | 总页数 | 每页数量 |
+|------|-----|----------|--------|---------|
+| 周热门资料 | `weekHotAPI` | `mockWeekHotAPI` | 5 页 | 20 条 |
+| 资料列表 | `fileListAPI` | `mockFileListAPI` | 8 页 | 20 条 |
+| 产品中心 | `listAPI` | `mockProductListAPI` | 10 页 | 10 条 |
+| 搜索页 | `searchAPI` | `mockSearchAPI` | 5 页 | 20 条 |
+| 消息列表 | `myListAPI` | `mockMessageListAPI` | 8 页 | 10 条 |
+
+## 快速启用 Mock 数据
+
+### 方法 1: 修改页面代码开关
+
+在每个页面的 `<script setup>` 部分添加/修改:
+
+```javascript
+// ⚠️ MOCK 数据开关
+const USE_MOCK_DATA = true  // ✅ 使用 Mock 数据
+// const USE_MOCK_DATA = false  // ❌ 使用真实 API
+```
+
+### 方法 2: 在 API 调用处添加条件判断
+
+```javascript
+// 导入 mock 函数
+import { mockWeekHotAPI, mockFileListAPI, mockProductListAPI, mockSearchAPI, mockMessageListAPI } from '@/utils/mockData'
+
+// 在 API 调用处
+const res = USE_MOCK_DATA
+  ? await mockWeekHotAPI(params)
+  : await weekHotAPI(params)
+```
+
+## 各页面 Mock 数据详情
+
+### 1. 周热门资料页 (`week-hot-material/index.vue`)
+
+**文件位置**: `src/pages/week-hot-material/index.vue:76`
+
+**Mock 数据特性**:
+- ✅ 20 种资料名称模板(财富管理、保险、投资等)
+- ✅ 10 种文件类型(PDF、Word、Excel、PPT等)
+- ✅ 随机学习人数(100-5000人)
+- ✅ 随机学习百分比(0-100%)
+- ✅ 30%概率已收藏
+
+**已启用**: ✅ 已添加 `USE_MOCK_DATA` 开关
+
+---
+
+### 2. 资料列表页 (`material-list/index.vue`)
+
+**文件位置**: 需要添加到 `src/pages/material-list/index.vue`
+
+**Mock 数据特性**:
+- ✅ 20 种资料名称模板
+- ✅ 支持分类过滤(`cid`)
+- ✅ 支持关键词搜索(`keyword`)
+- ✅ 包含分类信息(`cate`)
+
+**需要添加**:
+```javascript
+// 导入
+import { mockFileListAPI } from '@/utils/mockData'
+
+// 添加开关(在 script setup 顶部)
+const USE_MOCK_DATA = true
+
+// 修改 fetchFileList 函数(约第 176 行)
+const res = USE_MOCK_DATA
+  ? await mockFileListAPI(params)
+  : await fileListAPI(params)
+```
+
+---
+
+### 3. 产品中心页 (`product-center/index.vue`)
+
+**文件位置**: 需要添加到 `src/pages/product-center/index.vue`
+
+**Mock 数据特性**:
+- ✅ 20 种产品名称(人寿险、健康险、意外险等)
+- ✅ 4 种产品分类(人寿保险、健康保险、意外保险、财产保险)
+- ✅ 4 种标签(热销、新品、推荐、限时)
+- ✅ 支持分类过滤(`cid`)
+- ✅ 支持关键词搜索(`keyword`)
+
+**需要添加**:
+```javascript
+// 导入
+import { mockProductListAPI } from '@/utils/mockData'
+
+// 添加开关(在 script setup 顶部)
+const USE_MOCK_DATA = true
+
+// 修改 fetchProducts 函数(约第 196 行)
+const res = USE_MOCK_DATA
+  ? await mockProductListAPI(params)
+  : await listAPI(params)
+```
+
+---
+
+### 4. 搜索页 (`search/index.vue`)
+
+**文件位置**: 需要添加到 `src/pages/search/index.vue`
+
+**Mock 数据特性**:
+- ✅ 同时支持产品和资料搜索
+- ✅ 根据关键词过滤数据
+- ✅ 返回匹配的产品和资料列表
+
+**需要添加**:
+```javascript
+// 导入
+import { mockSearchAPI } from '@/utils/mockData'
+
+// 添加开关(在 script setup 顶部)
+const USE_MOCK_DATA = true
+
+// 修改 fetchSearchResults 函数
+const res = USE_MOCK_DATA
+  ? await mockSearchAPI(params)
+  : await searchAPI(params)
+```
+
+---
+
+### 5. 消息列表页 (`message/index.vue`)
+
+**文件位置**: 需要添加到 `src/pages/message/index.vue`
+
+**Mock 数据特性**:
+- ✅ 15 种消息标题模板
+- ✅ 随机创建时间(最近30天内)
+- ✅ 50%概率已读
+- ✅ 两种消息类型(通知、系统)
+
+**需要添加**:
+```javascript
+// 导入
+import { mockMessageListAPI } from '@/utils/mockData'
+
+// 添加开关(在 script setup 顶部)
+const USE_MOCK_DATA = true
+
+// 修改 fetchMessageList 函数(约第 67 行)
+const res = USE_MOCK_DATA
+  ? await mockMessageListAPI(params)
+  : await myListAPI(params)
+```
+
+---
+
+## 统一 Mock API 调用器
+
+除了单独导入各个 mock 函数,也可以使用统一的调用器:
+
+```javascript
+import { mockAPI } from '@/utils/mockData'
+
+// 使用示例
+const res = await mockAPI('weekHotAPI', params)
+const res = await mockAPI('fileListAPI', params)
+const res = await mockAPI('listAPI', params)
+const res = await mockAPI('searchAPI', params)
+const res = await mockAPI('myListAPI', params)
+```
+
+## 测试流程
+
+### 1. 确认 Mock 数据开关已开启
+
+检查对应页面的 `USE_MOCK_DATA = true`
+
+### 2. 启动开发服务器
+
+```bash
+pnpm dev:weapp
+```
+
+### 3. 测试分页加载
+
+1. **首次加载**: 查看第 1 页数据是否正常显示
+2. **滚动加载**: 向下滚动到底部
+3. **验证加载**:
+   - ✅ 显示"加载中..."
+   - ✅ Console 输出: `[Mock] xxxAPI - 第X页,共Y条`
+   - ✅ 新数据追加到列表
+4. **测试数据耗尽**: 继续滚动直到显示"没有更多了"
+
+### 4. 查看 Console 日志
+
+正常的日志输出:
+```
+[Mock] weekHotAPI - 第0页,共20条
+[Mock] weekHotAPI - 第1页,共20条
+[Mock] weekHotAPI - 第2页,共20条
+...
+```
+
+### 5. 测试搜索/筛选功能(如适用)
+
+- **资料列表**: 切换分类、输入关键词
+- **产品中心**: 切换分类、输入关键词
+- **搜索页**: 输入关键词、切换产品/资料 Tab
+
+## Mock 数据字段说明
+
+### 周热门资料 (`weekHotAPI`)
+
+```javascript
+{
+  meta_id: integer,        // 文件ID
+  name: string,            // 文件名称
+  src: string,             // 文件URL
+  size: string,            // 文件大小(如 "2.5MB")
+  read_people_count: integer,     // 学习人数
+  read_people_percent: number,    // 学习百分比(0-100)
+  is_favorite: string     // 收藏状态('1' 或 '0')
+  extension: string        // 文件扩展名(如 'pdf')
+}
+```
+
+### 资料列表 (`fileListAPI`)
+
+```javascript
+{
+  id: integer,
+  meta_id: integer,
+  name: string,            // 资料名称
+  title: string,           // 资料标题
+  fileName: string,        // 文件名
+  desc: string,            // 描述
+  size: string,            // 文件大小
+  extension: string,       // 文件扩展名
+  collected: boolean,      // 是否已收藏
+  src: string,             // 文件URL
+  downloadUrl: string,     // 下载URL
+  post_date: string        // 发布时间
+}
+```
+
+### 产品列表 (`listAPI`)
+
+```javascript
+{
+  id: integer,
+  product_name: string,   // 产品名称
+  name: string,            // 产品名称(别名)
+  cover_image: string,     // 封面图URL
+  recommend: string,       // 推荐标识('hot' 或 '')
+  tags: Array<{           // 标签数组
+    id: integer,
+    name: string,          // 标签名称
+    bg_color: string,      // 背景色
+    text_color: string     // 文字颜色
+  }>,
+  description: string,     // 描述
+  premium: number,         // 保费
+  category_id: integer     // 分类ID
+}
+```
+
+### 搜索 (`searchAPI`)
+
+```javascript
+{
+  code: 1,
+  msg: 'success',
+  data: {
+    products: Array,      // 产品列表(同产品列表字段)
+    files: Array           // 资料列表(同资料列表字段)
+  }
+}
+```
+
+### 消息列表 (`myListAPI`)
+
+```javascript
+{
+  id: integer,
+  title: string,           // 消息标题
+  intro: string,           // 简介
+  content: string,         // 内容
+  create_time: string,     // 创建时间(YYYY-MM-DD)
+  is_read: integer,        // 是否已读(0 或 1)
+  type: string             // 类型('notice' 或 'system')
+}
+```
+
+## 切换回真实 API
+
+测试完成后,记得修改开关:
+
+```javascript
+const USE_MOCK_DATA = false  // 使用真实 API
+```
+
+## 常见问题
+
+### Q1: Mock 数据不生效?
+
+**检查**:
+1. 确认 `USE_MOCK_DATA = true`
+2. 确认已正确导入 mock 函数
+3. 查看 console 是否有 `[Mock]` 日志
+4. 确认 API 调用处使用了条件判断
+
+### Q2: 数据格式不对?
+
+**检查**:
+1. 查看 mock 数据字段是否与真实 API 一致
+2. 在浏览器 console 查看返回的数据结构
+3. 对照页面代码中的字段映射逻辑
+
+### Q3: 想修改每页数量?
+
+**修改**:
+- 在页面代码中修改 `pageSize` 或 `limit` 变量
+- Mock 数据会自动适应请求的数量
+
+### Q4: 想增加更多页数?
+
+**修改** `src/utils/mockData.js`:
+```javascript
+// 修改 totalPages 值
+const totalPages = 10  // 从 5 改为 10
+```
+
+## 完成清单
+
+使用本指南后,请确认:
+
+- [ ] 周热门资料页已添加 Mock 数据 ✅
+- [ ] 资料列表页已添加 Mock 数据
+- [ ] 产品中心页已添加 Mock 数据
+- [ ] 搜索页已添加 Mock 数据
+- [ ] 消息列表页已添加 Mock 数据
+- [ ] 所有页面的滚动加载功能正常
+- [ ] Console 日志正确输出
+- [ ] 测试完成后已切换回真实 API
+
+---
+
+**最后更新**: 2026-02-08
+**维护者**: Claude Code
--- a/docs/scroll-load-test-guide.md 0 → 100644
View file @3c53a9e
+++ b/docs/scroll-load-test-guide.md 0 → 100644
View file @3c53a9e
+# 周热门资料滚动加载测试指南
+
+## Mock 数据说明
+
+已创建 `src/utils/mockData.js` 文件,用于测试滚动加载更多功能。
+
+### Mock 数据特性
+
+- ✅ **总共 5 页数据**,每页 20 条,共 100 条资料
+- ✅ **随机生成**的学习人数(100-5000人)
+- ✅ **随机生成**的学习百分比(0-100%)
+- ✅ **随机生成**的文件大小(0.5MB-10MB)
+- ✅ **随机生成**的收藏状态(30%概率已收藏)
+- ✅ **10种文件类型**: PDF、Word、Excel、PPT、TXT、图片等
+- ✅ **20种资料名称模板**: 涵盖财富管理、保险、投资等主题
+
+### 模拟网络延迟
+
+- 每次请求延迟 **300-800ms**,模拟真实网络环境
+
+## 如何使用 Mock 数据
+
+### 方法 1: 修改代码开关(推荐)
+
+在 `src/pages/week-hot-material/index.vue` 第 76 行:
+
+```javascript
+// ⚠️ MOCK 数据开关 - 设置为 true 使用 mock 数据,false 使用真实 API
+const USE_MOCK_DATA = true  // ✅ 使用 Mock 数据
+// const USE_MOCK_DATA = false  // ❌ 使用真实 API
+```
+
+### 方法 2: 直接调用 Mock API
+
+```javascript
+import { mockWeekHotAPI } from '@/utils/mockData'
+
+// 调用 Mock API
+const res = await mockWeekHotAPI({ page: 0, limit: 20 })
+```
+
+## 测试步骤
+
+### 1. 启动开发服务器
+
+```bash
+pnpm dev:weapp
+```
+
+### 2. 导航到周热门资料页
+
+在微信开发者工具中,点击导航到"周热门资料"页面。
+
+### 3. 测试首次加载
+
+- ✅ 查看是否加载了第 1 页数据(20条)
+- ✅ 查看 console 日志:`[Mock] 生成第0页数据,共20条`
+- ✅ 验证列表正常显示
+
+### 4. 测试滚动加载更多
+
+- ✅ 向下滚动列表到底部
+- ✅ 等待 300-800ms(模拟网络延迟)
+- ✅ 查看是否显示"加载中..."状态
+- ✅ 查看是否加载了第 2 页数据
+- ✅ 查看 console 日志:`[Mock] 生成第1页数据,共20条`
+
+### 5. 测试多页加载
+
+继续滚动,依次测试:
+- 第 3 页: `[Mock] 生成第2页数据,共20条`
+- 第 4 页: `[Mock] 生成第3页数据,共20条`
+- 第 5 页: `[Mock] 生成第4页数据,共20条`
+
+### 6. 测试数据耗尽
+
+- ✅ 滚动到底部后,应该显示"没有更多了"
+- ✅ console 日志:`[Mock] 生成第5页数据,共0条` (空数据)
+- ✅ `hasMore` 应该变为 `false`
+- ✅ 继续滚动不会触发加载
+
+### 7. 测试收藏功能
+
+- ✅ 点击任意资料的收藏按钮
+- ✅ 验证收藏状态正确更新
+- ✅ 查看 console 日志:`[Week Hot] 收藏状态改变: xxx true/false`
+
+## 验证要点
+
+### 数据完整性
+
+- ✅ 每页数据都是 20 条(最后一页除外)
+- ✅ 每条数据包含所有必需字段:
+  - `meta_id`: 文件ID
+  - `name`: 文件名称
+  - `src`: 文件URL
+  - `size`: 文件大小
+  - `read_people_count`: 学习人数
+  - `read_people_percent`: 学习百分比
+  - `is_favorite`: 收藏状态
+  - `extension`: 文件扩展名
+
+### 状态管理
+
+- ✅ `loading` 状态: 首次加载时显示
+- ✅ `loadingMore` 状态: 加载更多时显示
+- ✅ `hasMore` 状态: 数据耗尽时变为 false
+- ✅ `currentPage` 状态: 每次加载后正确递增
+
+### 用户体验
+
+- ✅ 加载状态友好提示
+- ✅ 空状态提示(第1页无数据时)
+- ✅ 没有更多数据提示
+- ✅ 滚动流畅,无卡顿
+
+## Console 日志示例
+
+正常加载流程的日志:
+
+```
+[Week Hot] 页面参数: {}
+[Week Hot] 请求参数: {page: 0, limit: 20}
+[Week Hot] 使用 Mock 数据: true
+[Mock] 生成第0页数据,共20条
+[Week Hot] 数据: {list: Array(20)}
+[Week Hot] 触底加载更多
+[Mock] 生成第1页数据,共20条
+[Week Hot] 触底加载更多
+[Mock] 生成第2页数据,共20条
+...
+```
+
+## 切换回真实 API
+
+测试完成后,记得切换回真实 API:
+
+```javascript
+// ⚠️ MOCK 数据开关 - 设置为 true 使用 mock 数据,false 使用真实 API
+const USE_MOCK_DATA = false  // ✅ 使用真实 API
+```
+
+## 常见问题
+
+### Q1: Mock 数据不生效?
+
+**检查**:
+- 确认 `USE_MOCK_DATA = true`
+- 确认已正确导入 `mockWeekHotAPI`
+- 查看 console 是否有 `[Week Hot] 使用 Mock 数据: true`
+
+### Q2: 滚动不触发加载?
+
+**检查**:
+- 确认已滚动到列表最底部
+- 查看 `hasMore` 是否为 `true`
+- 查看 `loadingMore` 是否为 `false`
+- 确认防抖定时器(300ms)已过
+
+### Q3: 数据重复?
+
+**检查**:
+- 确认 `isLoadMore` 参数正确传递
+- 确认代码中使用的是追加逻辑:
+  ```javascript
+  if (isLoadMore) {
+    currentList.value = [...currentList.value, ...listData]
+  }
+  ```
+
+### Q4: 想修改每页数量?
+
+**修改** `src/pages/week-hot-material/index.vue` 第 72 行:
+
+```javascript
+const pageSize = 20  // 修改为你想要的数量,如 10、30 等
+```
+
+## 扩展 Mock 数据
+
+如需修改 Mock 数据生成逻辑,编辑 `src/utils/mockData.js`:
+
+### 修改总页数
+
+```javascript
+const data = generatePageData(page, limit, 10) // 总共10页数据
+```
+
+### 添加更多资料名称模板
+
+```javascript
+const MATERIAL_TEMPLATES = [
+  // ... 现有模板
+  '你的新资料名称',
+  '另一个新资料名称'
+]
+```
+
+### 修改文件大小范围
+
+```javascript
+function generateRandomSize() {
+  const sizeInMB = (Math.random() * 20 + 1).toFixed(1) // 1MB-21MB
+  return `${sizeInMB}MB`
+}
+```
+
+---
+
+**最后更新**: 2026-02-08
+**维护者**: Claude Code
--- a/src/pages/material-list/index.vue
View file @3c53a9e
+++ b/src/pages/material-list/index.vue
View file @3c53a9e
@@ -123,9 +123,13 @@ import { useListItemClick, ListType } from '@/composables/useListItemClick'
 import { getDocumentIcon, getDocumentLabel } from '@/utils/documentIcons'
 import { debounce } from '@/utils/debounce'
 import { fileListAPI } from '@/api/file'
+import { mockFileListAPI } from '@/utils/mockData'
 import { useCollectOperation } from '@/composables/useCollectOperation'
 import Taro from '@tarojs/taro'
+// ⚠️ MOCK 数据开关 - 开发环境使用 mock 数据，生产环境使用真实 API
+const USE_MOCK_DATA = process.env.NODE_ENV === 'development'
+
 const searchValue = ref('')
 const activeTabId = ref('all') // 默认选中"全部"
 const listVisible = ref(true)
@@ -281,9 +285,12 @@ const fetchMaterialList = async (params = {}, isLoadMore = false) => {
     }
     console.log('[Material List] 请求参数:', params)
+    console.log('[Material List] 使用 Mock 数据:', USE_MOCK_DATA)
-    // 调用接口
+    // 根据开关选择使用真实 API 或 Mock 数据
-    const res = await fileListAPI(params)
+    const res = USE_MOCK_DATA
+      ? await mockFileListAPI(params)
+      : await fileListAPI(params)
     if (res.code === 1 && res.data) {
       // 如果是初始请求（没有 child_id），保存完整的分类信息
@@ -301,10 +308,18 @@ const fetchMaterialList = async (params = {}, isLoadMore = false) => {
             // 加载更多：追加数据
             allList.value = [...allList.value, ...allListData]
             categoryListCache.value.set('all', allList.value)
+            // ✅ 同步更新 currentList（如果当前显示的是"全部"）
+            if (activeTabId.value === 'all') {
+              currentList.value = allList.value
+            }
           } else {
             // 首次加载：替换数据
             allList.value = allListData
             categoryListCache.value.set('all', allListData)
+            // ✅ 同步更新 currentList（如果当前显示的是"全部"）
+            if (activeTabId.value === 'all') {
+              currentList.value = allListData
+            }
           }
           // 判断是否还有更多数据
@@ -328,7 +343,11 @@ const fetchMaterialList = async (params = {}, isLoadMore = false) => {
             const existingData = categoryListCache.value.get(cacheKey) || []
             const newData = [...existingData, ...listData]
             categoryListCache.value.set(cacheKey, newData)
-            currentList.value = newData
+            // ✅ 同步更新 currentList（如果当前显示的是该缓存）
+            const currentCacheKey = params.child_id || params.keyword || 'all'
+            if (activeTabId.value === currentCacheKey) {
+              currentList.value = newData
+            }
           } else {
             // 首次加载：替换数据
             categoryListCache.value.set(cacheKey, listData)
@@ -572,7 +591,12 @@ const onSearch = async () => {
   // 调用接口搜索
   try {
     loading.value = true
-    const res = await fileListAPI(params)
+    console.log('[Material List] 搜索使用 Mock 数据:', USE_MOCK_DATA)
+
+    // 根据开关选择使用真实 API 或 Mock 数据
+    const res = USE_MOCK_DATA
+      ? await mockFileListAPI(params)
+      : await fileListAPI(params)
     if (res.code === 1 && res.data) {
       if (res.data.list?.length) {
--- a/src/pages/message/index.vue
View file @3c53a9e
+++ b/src/pages/message/index.vue
View file @3c53a9e
@@ -51,6 +51,10 @@ import { useLoad, usePullDownRefresh, useReachBottom, stopPullDownRefresh } from
 import { useGo } from '@/hooks/useGo'
 import NavHeader from '@/components/NavHeader.vue'
 import { myListAPI } from '@/api/news'
+import { mockMessageListAPI } from '@/utils/mockData'
+
+// ⚠️ MOCK 数据开关 - 开发环境使用 mock 数据，生产环境使用真实 API
+const USE_MOCK_DATA = process.env.NODE_ENV === 'development'
 const go = useGo()
@@ -77,10 +81,18 @@ const fetchMessageList = async (refresh = false) => {
   loading.value = true
   try {
-    const res = await myListAPI({
+    console.log('[Message] 使用 Mock 数据:', USE_MOCK_DATA)
-      page: page.value,
+
-      limit: limit.value
+    // 根据开关选择使用真实 API 或 Mock 数据
-    })
+    const res = USE_MOCK_DATA
+      ? await mockMessageListAPI({
+          page: page.value,
+          limit: limit.value
+        })
+      : await myListAPI({
+          page: page.value,
+          limit: limit.value
+        })
     if (res.code === 1) {
       const list = res.data?.list || []
--- a/src/pages/product-center/index.vue
View file @3c53a9e
+++ b/src/pages/product-center/index.vue
View file @3c53a9e
@@ -153,6 +153,10 @@ import SearchBar from '@/components/SearchBar.vue'
 import PlanFormContainer from '@/components/PlanFormContainer.vue'
 import { useListItemClick, ListType } from '@/composables/useListItemClick'
 import { listAPI } from '@/api/get_product'
+import { mockProductListAPI } from '@/utils/mockData'
+
+// ⚠️ MOCK 数据开关 - 开发环境使用 mock 数据，生产环境使用真实 API
+const USE_MOCK_DATA = process.env.NODE_ENV === 'development'
 const activeTabId = ref('')
@@ -214,7 +218,12 @@ const fetchProducts = async (isLoadMore = false) => {
       params.keyword = searchValue.value
     }
-    const res = await listAPI(params)
+    console.log('[Product Center] 使用 Mock 数据:', USE_MOCK_DATA)
+
+    // 根据开关选择使用真实 API 或 Mock 数据
+    const res = USE_MOCK_DATA
+      ? await mockProductListAPI(params)
+      : await listAPI(params)
     if (res.code === 1 && res.data) {
       // 更新分类列表（首次加载时）
--- a/src/pages/search/index.vue
View file @3c53a9e
+++ b/src/pages/search/index.vue
View file @3c53a9e
@@ -3,9 +3,9 @@
  * @Description: 搜索页面 - 支持产品和资料搜索，实时查询API
 -->
 <template>
-  <view class="h-screen bg-[#FFF] flex flex-col">
+  <view class="bg-[#FFF]">
-    <!-- 固定顶部：导航栏 + 搜索栏 -->
+    <!-- 固定顶部：导航栏 + 搜索栏 + Tabs + 结果计数 -->
-    <view class="bg-[#FFF] z-10">
+    <view class="bg-[#FFF] sticky top-0 z-10">
       <NavHeader title="搜索" />
       <!-- Search Input -->
@@ -20,10 +20,7 @@
           @clear="clearSearch"
         />
       </view>
-    </view>
-    <!-- Tabs + 列表容器 -->
-    <view class="flex-1 min-h-0 flex flex-col mt-[32rpx] px-[40rpx]">
       <!-- Tabs Container -->
       <nut-tabs v-model="activeTab">
         <!-- 自定义标签栏 -->
@@ -46,81 +43,79 @@
       </nut-tabs>
       <!-- Result Count -->
-      <view v-if="currentList.length > 0" class="text-[#6B7280] text-[24rpx] mb-[24rpx]">
+      <view v-if="currentList.length > 0" class="px-[60rpx] text-[#6B7280] text-[24rpx] pb-[24rpx]">
         找到 {{ currentTotal }} 个相关结果
       </view>
+    </view>
+
+    <!-- 列表容器 -->
+    <view class="px-[40rpx] pb-[calc(160rpx+env(safe-area-inset-bottom))]">
-      <!-- 可滚动列表区域（支持触底加载更多） -->
+      <!-- Search Results -->
-      <scroll-view
+      <view
-        class="flex-1 min-h-0 overflow-y-auto pb-[calc(160rpx+env(safe-area-inset-bottom))] box-border"
+        v-if="currentList.length > 0"
-        scroll-y
+        :key="listRenderKey"
       >
-        <!-- Search Results -->
+        <!-- Product Results -->
-        <view
+        <view v-if="activeTab === 'product'" class="flex flex-col gap-[24rpx] pb-[40rpx]">
-          v-if="currentList.length > 0"
+          <ProductCard
-          :key="listRenderKey"
+            v-for="(item, index) in currentList"
-        >
+            :key="index"
-          <!-- Product Results -->
+            :product-id="item.id"
-          <view v-if="activeTab === 'product'" class="flex flex-col gap-[24rpx] pb-[40rpx]">
+            :product-name="item.product_name || item.name"
-            <ProductCard
+            :tags="item.tags || []"
-              v-for="(item, index) in currentList"
+            class="search-result-item"
-              :key="index"
+            :style="{ animationDelay: `${index * 30}ms` }"
-              :product-id="item.id"
+            @detail="goToProductDetail"
-              :product-name="item.product_name || item.name"
+            @plan="openPlanPopup"
-              :tags="item.tags || []"
+          />
-              class="search-result-item"
+        </view>
-              :style="{ animationDelay: `${index * 30}ms` }"
-              @detail="goToProductDetail"
-              @plan="openPlanPopup"
-            />
-          </view>
-          <!-- File Results -->
+        <!-- File Results -->
-          <view v-else-if="activeTab === 'file'" class="flex flex-col gap-[24rpx] pb-[40rpx]">
+        <view v-else-if="activeTab === 'file'" class="flex flex-col gap-[24rpx] pb-[40rpx]">
-            <MaterialCard
+          <MaterialCard
-              v-for="(item, index) in currentList"
+            v-for="(item, index) in currentList"
-              :key="index"
+            :key="index"
-              :id="item.id"
+            :id="item.id"
-              :title="item.title"
+            :title="item.title"
-              :file-name="item.fileName"
+            :file-name="item.fileName"
-              :file-size="item.fileSize"
+            :file-size="item.fileSize"
-              :learners="item.learners"
+            :learners="item.learners"
-              :read-people-percent="item.readPeoplePercent"
+            :read-people-percent="item.readPeoplePercent"
-              :collected="item.collected"
+            :collected="item.collected"
-              :extension="item.extension"
+            :extension="item.extension"
-              :download-url="item.downloadUrl"
+            :download-url="item.downloadUrl"
-              class="search-result-item"
+            class="search-result-item"
-              :style="{ animationDelay: `${index * 30}ms` }"
+            :style="{ animationDelay: `${index * 30}ms` }"
-              @collect-changed="handleCollectChanged(item, $event)"
+            @collect-changed="handleCollectChanged(item, $event)"
-            />
+          />
-          </view>
+        </view>
-          <!-- 加载更多提示 -->
+        <!-- 加载更多提示 -->
-          <view v-if="currentList.length > 0" class="flex items-center justify-center py-[40rpx]">
+        <view v-if="currentList.length > 0" class="flex items-center justify-center py-[40rpx]">
-            <view v-if="loadingMore" class="flex items-center">
+          <view v-if="loadingMore" class="flex items-center">
-              <view class="loading-spinner-small"></view>
+            <view class="loading-spinner-small"></view>
-              <text class="ml-[12rpx] text-[#9CA3AF] text-[24rpx]">加载中...</text>
+            <text class="ml-[12rpx] text-[#9CA3AF] text-[24rpx]">加载中...</text>
-            </view>
+          </view>
-            <view v-else-if="!hasMore" class="text-[#9CA3AF] text-[24rpx]">
+          <view v-else-if="!hasMore" class="text-[#9CA3AF] text-[24rpx]">
-              没有更多了
+            没有更多了
-            </view>
           </view>
         </view>
+      </view>
-        <!-- Empty State (已搜索但无结果) -->
+      <!-- Empty State (已搜索但无结果) -->
-        <view v-else-if="hasSearched && currentList.length === 0" class="flex flex-col items-center justify-center py-[40rpx]">
+      <view v-else-if="hasSearched && currentList.length === 0" class="flex flex-col items-center justify-center py-[40rpx]">
-          <nut-empty description="暂无搜索结果" image="empty">
+        <nut-empty description="暂无搜索结果" image="empty">
-            <view class="text-[#9CA3AF] text-[24rpx] mt-[12rpx]">试试其他关键词吧</view>
+          <view class="text-[#9CA3AF] text-[24rpx] mt-[12rpx]">试试其他关键词吧</view>
-          </nut-empty>
+        </nut-empty>
-        </view>
+      </view>
-        <!-- Initial State (从未搜索过) -->
+      <!-- Initial State (从未搜索过) -->
-        <view v-else class="flex flex-col items-center justify-center py-[120rpx]">
+      <view v-else class="flex flex-col items-center justify-center py-[120rpx]">
-          <IconFont name="search" class="text-gray-300 mb-[24rpx]" size="64" />
+        <IconFont name="search" class="text-gray-300 mb-[24rpx]" size="64" />
-          <view class="text-[#6B7280] text-[28rpx]">搜索产品或资料</view>
+        <view class="text-[#6B7280] text-[28rpx]">搜索产品或资料</view>
-          <view class="text-[#9CA3AF] text-[24rpx] mt-[12rpx]">输入关键词开始搜索，自动切换分类</view>
+        <view class="text-[#9CA3AF] text-[24rpx] mt-[12rpx]">输入关键词开始搜索，自动切换分类</view>
-        </view>
+      </view>
-      </scroll-view>
     </view>
     <!-- Plan Form Container -->
@@ -146,6 +141,10 @@ import ProductCard from '@/components/ProductCard.vue'
 import MaterialCard from '@/components/MaterialCard.vue'
 import PlanFormContainer from '@/components/PlanFormContainer.vue'
 import { searchAPI } from '@/api/search'
+import { mockSearchAPI } from '@/utils/mockData'
+
+// ⚠️ MOCK 数据开关 - 开发环境使用 mock 数据，生产环境使用真实 API
+const USE_MOCK_DATA = process.env.NODE_ENV === 'development'
 // Navigation
 const go = useGo()
@@ -226,7 +225,12 @@ const performSearch = async (keyword, type, page = 0, limit = pageSize, isLoadMo
     const params = { keyword, page, limit }
     if (type) params.type = type
-    const res = await searchAPI(params)
+    console.log('[Search] 使用 Mock 数据:', USE_MOCK_DATA)
+
+    // 根据开关选择使用真实 API 或 Mock 数据
+    const res = USE_MOCK_DATA
+      ? await mockSearchAPI(params)
+      : await searchAPI(params)
     if (res.code === 1) {
       // 映射产品列表
@@ -266,11 +270,7 @@ const performSearch = async (keyword, type, page = 0, limit = pageSize, isLoadMo
       productsTotal.value = res.data.products.total || 0
       filesTotal.value = res.data.files.total || 0
-      // 判断是否还有更多数据
+      // ⚠️ 重要：必须先自动选择 tab，然后再计算 hasMore
-      // 如果返回的数据量少于请求的量，说明没有更多了
-      const currentListLength = type === 'product' ? newProducts.length : newFiles.length
-      hasMore.value = currentListLength >= limit
-
       // 如果不传 type，自动选择有数据的 tab（仅首次搜索时）
       if (!type && !isLoadMore) {
         if (productsTotal.value > 0) {
@@ -281,6 +281,19 @@ const performSearch = async (keyword, type, page = 0, limit = pageSize, isLoadMo
         // 如果都为 0，默认 product
       }
+      // 判断是否还有更多数据
+      // 使用当前列表长度与总数比较
+      // 注意：需要根据实际选择的tab来判断
+      const actualTab = type || activeTab.value
+      if (actualTab === 'product') {
+        hasMore.value = products.value.length < productsTotal.value
+      } else if (actualTab === 'file') {
+        hasMore.value = files.value.length < filesTotal.value
+      } else {
+        // 如果都没有选中，保守设置为false
+        hasMore.value = false
+      }
+
       hasSearched.value = true
       listRenderKey.value += 1
@@ -535,7 +548,7 @@ const handleCollectChanged = (item, newStatus) => {
 .filter-tabs-wrapper {
   display: flex;
   overflow-x: auto;
-  padding: 24rpx 24rpx;
+  padding: 24rpx 60rpx;
   gap: 24rpx;
   transition: all 0.3s ease;
   background-color: #FFF;
--- a/src/pages/week-hot-material/index.config.js
View file @3c53a9e
+++ b/src/pages/week-hot-material/index.config.js
View file @3c53a9e
@@ -6,5 +6,6 @@ export default {
   navigationBarTitleText: '本周热门资料',
   enablePullDownRefresh: true,
   backgroundColor: '#F9FAFB',
-  navigationStyle: 'custom'
+  navigationStyle: 'custom',
+  onReachBottomDistance: 50
 }
--- a/src/pages/week-hot-material/index.vue
View file @3c53a9e
+++ b/src/pages/week-hot-material/index.vue
View file @3c53a9e
@@ -3,14 +3,14 @@
  * @Description: 本周热门资料页 - 使用 MaterialCard 组件
 -->
 <template>
-  <view class="h-screen bg-[#F9FAFB] flex flex-col py-[32rpx]">
+  <view class="min-h-screen bg-[#F9FAFB] py-[32rpx]">
     <NavHeader title="本周热门资料" />
     <!-- 列表容器 -->
     <view
       v-if="listVisible"
       :key="listRenderKey"
-      class="flex-1 min-h-0 overflow-y-auto px-[32rpx] pb-[calc(160rpx+env(safe-area-inset-bottom))] box-border"
+      class="px-[32rpx]"
     >
       <!-- 加载状态 -->
       <view v-if="loading && currentList.length === 0" class="flex items-center justify-center py-[60rpx]">
@@ -61,6 +61,7 @@ import Taro, { useLoad, useReachBottom } from '@tarojs/taro'
 import NavHeader from '@/components/NavHeader.vue'
 import MaterialCard from '@/components/MaterialCard.vue'
 import { weekHotAPI } from '@/api/file'
+import { mockWeekHotAPI } from '@/utils/mockData'
 const listVisible = ref(true)
 const listRenderKey = ref(0)
@@ -71,6 +72,9 @@ const currentList = ref([])
 const currentPage = ref(0)  // 当前页码（从0开始）
 const pageSize = 20  // 每页数量
+// ⚠️ MOCK 数据开关 - 开发环境使用 mock 数据，生产环境使用真实 API
+const USE_MOCK_DATA = process.env.NODE_ENV === 'development'
+
 /**
  * 处理收藏状态改变
  *
@@ -104,9 +108,12 @@ const fetchWeekHotList = async (params = {}, isLoadMore = false) => {
     }
     console.log('[Week Hot] 请求参数:', params)
+    console.log('[Week Hot] 使用 Mock 数据:', USE_MOCK_DATA)
-    // 调用接口
+    // 根据开关选择使用真实 API 或 Mock 数据
-    const res = await weekHotAPI(params)
+    const res = USE_MOCK_DATA
+      ? await mockWeekHotAPI(params)
+      : await weekHotAPI(params)
     if (res.code === 1 && res.data) {
       console.log('[Week Hot] 数据:', res.data)
--- a/src/utils/mockData.js 0 → 100644
View file @3c53a9e
+++ b/src/utils/mockData.js 0 → 100644
View file @3c53a9e