原始页面备份

备份时间: 2026-02-08 备份原因: LoadMoreList 组件迁移前的代码备份 迁移提交: ce4b99b6 refactor: 迁移所有剩余页面到 LoadMoreList 组件

---

📁 备份文件列表

文件	大小	说明
message-index.vue.bak	3.7 KB	消息列表页（迁移前）
product-center-index.vue.bak	13.9 KB	产品中心页（迁移前）
material-list-index.vue.bak	24.6 KB	资料列表页（迁移前）
search-index.vue.bak	17 KB	搜索页（迁移前）

---

🔄 如何恢复原始代码

方法 1: 手动恢复（推荐）

如果新组件有问题，可以手动恢复：

# 1. 删除当前文件
rm src/pages/message/index.vue

# 2. 从备份恢复
cp docs/backups/original-pages/message-index.vue.bak src/pages/message/index.vue

# 3. 重复其他文件...

方法 2: 使用 Git 恢复

使用 Git 命令恢复到迁移前的版本：

# 恢复单个文件
git checkout ce4b99b^ -- src/pages/message/index.vue

# 恢复所有文件
git checkout ce4b99b^ -- src/pages/message/index.vue \
  src/pages/product-center/index.vue \
  src/pages/material-list/index.vue \
  src/pages/search/index.vue

---

📋 迁移前后对比

message 页面

指标	迁移前	迁移后
代码行数	149 行	229 行
分页逻辑	手动实现	LoadMoreList 组件
下拉刷新	❌ 无	✅ 有

product-center 页面

指标	迁移前	迁移后
代码行数	510 行	592 行
分页逻辑	手动实现	LoadMoreList 组件
搜索功能	✅ 有	✅ 保留
Tabs	✅ 有	✅ 保留

material-list 页面

指标	迁移前	迁移后
代码行数	888 行	828 行
分页逻辑	手动实现	LoadMoreList 组件
分类缓存	✅ 有	✅ 保留
搜索防抖	✅ 有	✅ 保留

search 页面

指标	迁移前	迁移后
代码行数	603 行	549 行
分页逻辑	手动实现	LoadMoreList 组件
双列表系统	✅ 有	✅ 保留
自动 tab 选择	✅ 有	✅ 保留

---

⚠️ 注意事项

1. 备份文件只读: 这些是 .bak 文件，只用于参考，不应直接修改
2. 使用 Git 版本控制: 建议使用 Git 命令恢复，而不是手动复制
3. 测试新组件: 如果新组件有问题，先检查是否可以通过修改解决
4. 保留备份: 建议保留这些备份文件，直到确认新组件完全稳定

---

🔍 迁移问题排查

如果新组件有问题，按以下步骤排查：

1. 检查 Props 是否正确

<!-- ❌ 错误：缺少必需 props -->
<LoadMoreList :list="products" @load-more="handleLoadMore">

<!-- ✅ 正确：包含所有必需 props -->
<LoadMoreList
  :list="products"
  :page="page"
  :has-more="hasMore"
  :loading="loading"
  :loading-more="loadingMore"
  @load-more="handleLoadMore"
>

2. 检查数据加载逻辑

// ❌ 错误：未正确处理追加数据
const handleLoadMore = async (page) => {
  const newData = await fetchData({ page })
  currentList.value = newData  // 错误：会覆盖之前的数据
}

// ✅ 正确：追加数据
const handleLoadMore = async (page) => {
  const newData = await fetchData({ page })
  currentList.value = [...currentList.value, ...newData]
}

3. 检查 hasMore 判断逻辑

// ❌ 错误：使用总数量判断
hasMore.value = currentList.value.length < total

// ✅ 正确：使用返回数据量判断
hasMore.value = newData.length >= pageSize

4. 检查 page 初始值

// 如果 API 页码从 1 开始
const page = ref(1)

// 如果 API 页码从 0 开始
const page = ref(0)

// 组件会自动 +1，所以不需要手动 +1

---

📖 相关文档

• LoadMoreList 完整指南
• LoadMoreList 迁移指南
• 项目 CLAUDE.md

---

创建时间: 2026-02-08 维护者: Claude Code