flnxi-Wu/docs/TEST_CHECKLIST.md

测试清单 - 模板编辑器 addToCategory 功能

📋 修改概览

1. TemplateManager.tsx - 核心逻辑修复

• ✅ 确保 addToCategory 字段在字段类型改为 select 时被正确初始化
• ✅ 在保存模板时，确保 addToCategory 始终包含在 payload 中
• ✅ 添加调试日志，便于追踪问题

2. TemplateFieldsEditor.tsx - UI 显示修复

• ✅ 确保当字段类型为 select 时，"添加到分类"复选框正确显示
• ✅ 复选框状态与字段数据正确同步

3. next.config.js - 缓存控制

• ✅ 禁用静态文件缓存，强制浏览器重新加载新代码

4. app/layout.tsx - 版本检查

• ✅ 添加版本检查脚本，在页面加载时显示版本号和红色横幅
• ✅ 用于验证新代码是否已加载

---

🧪 测试步骤

测试 1: 验证新代码已加载

步骤：

1. 打开浏览器，访问应用首页
2. 打开浏览器控制台（F12）
3. 检查是否有以下输出：

   🚀🚀🚀 [RootLayout] 应用版本: 2025-11-23-v6-xxxxx
   🚀🚀🚀 [RootLayout] 加载时间: xxxxx
   

4. 检查页面左上角是否出现红色横幅（显示版本号，5秒后消失）

预期结果：

• ✅ 控制台显示版本信息
• ✅ 页面显示红色版本横幅
• ✅ 如果看不到，说明浏览器缓存了旧代码，需要强制刷新（Ctrl+Shift+R 或 Ctrl+F5）

---

测试 2: 验证"添加到分类"复选框显示

步骤：

1. 登录管理后台
2. 进入模板管理页面（/admin/templates）
3. 创建一个新模板或编辑现有模板
4. 添加一个新字段，或编辑现有字段
5. 将字段类型改为 select（下拉选择）

预期结果：

• ✅ 当字段类型为 select 时，"添加到分类"复选框应该显示
• ✅ 复选框应该可以正常勾选/取消勾选
• ✅ 复选框状态应该正确保存

检查点：

• 打开浏览器控制台，应该看到类似日志：

  [TemplateFieldsEditor] 🔍 字段 X (字段名) 是 select 类型，isSelectType=true，应该显示复选框
  

---

测试 3: 验证字段类型切换时 addToCategory 的处理

步骤：

1. 在模板编辑器中，选择一个字段
2. 将该字段的类型从其他类型（如 text）改为 select
3. 观察"添加到分类"复选框是否出现
4. 勾选"添加到分类"复选框
5. 将字段类型改回 text（复选框应该消失）
6. 再次将类型改为 select

预期结果：

• ✅ 当类型改为 select 时，复选框立即出现
• ✅ 如果之前勾选过，状态应该被保留
• ✅ 如果之前未勾选，默认应该是未勾选状态

检查点：

• 控制台应该看到：

  [TemplateManager] ✅ 字段类型改为 select，确保 addToCategory 存在: {...}
  

---

测试 4: 验证保存时 addToCategory 包含在 payload 中

步骤：

1. 创建一个新模板
2. 添加一个字段，类型设为 select
3. 勾选"添加到分类"复选框
4. 保存模板
5. 打开浏览器控制台，查看网络请求

预期结果：

• ✅ 保存请求的 payload 中，该字段应该包含 addToCategory: true
• ✅ 控制台应该看到详细的日志：

  [TemplateManager] 🔍 处理字段 X: { key: 'xxx', type: 'select', addToCategory: true }
  [TemplateManager] 🔍 强制验证后 payload.fields: [...]
  

检查点：

• 在 Network 标签中，找到保存模板的请求
• 查看请求体，确认 fields 数组中，select 类型的字段都有 addToCategory 字段

---

测试 5: 验证已保存模板的加载

步骤：

1. 编辑一个已保存的模板（包含 select 类型字段）
2. 检查"添加到分类"复选框是否正确显示
3. 检查复选框状态是否与保存的数据一致

预期结果：

• ✅ 复选框正确显示
• ✅ 复选框状态与数据库中的数据一致

---

测试 6: 验证缓存清除

步骤：

1. 如果测试 1 中看不到版本横幅，执行强制刷新：
   • Chrome/Edge: Ctrl + Shift + R 或 Ctrl + F5
   • Firefox: Ctrl + Shift + R 或 Ctrl + F5
   • Safari: Cmd + Shift + R
2. 或者清除浏览器缓存：
   • 打开开发者工具（F12）
   • 右键点击刷新按钮
   • 选择"清空缓存并硬性重新加载"

预期结果：

• ✅ 强制刷新后，应该能看到版本横幅和控制台日志

---

🔍 调试信息

全局变量检查

在浏览器控制台执行以下命令，检查组件是否已加载：

// 检查应用版本
console.log('应用版本:', window.__APP_VERSION__);
console.log('加载时间:', window.__APP_LOADED_AT__);

// 检查模板管理器是否加载
console.log('模板管理器已加载:', window.__TEMPLATE_MANAGER_LOADED__);

// 检查字段编辑器是否加载
console.log('字段编辑器已加载:', window.__TEMPLATE_FIELDS_EDITOR_LOADED__);

关键日志位置

1. TemplateManager.tsx:

   • [TemplateManager] updateField called: - 字段更新时
   • [TemplateManager] ✅ 字段类型改为 select - 类型切换时
   • [TemplateManager] 🚀 handleSave 开始执行 - 保存开始时
   • [TemplateManager] 🔍 处理字段 X - 处理每个字段时

2. TemplateFieldsEditor.tsx:

   • [TemplateFieldsEditor] 🚀 组件开始渲染 - 组件渲染时
   • [TemplateFieldsEditor] 🔍 字段 X 是 select 类型 - 字段类型检查时
   • [TemplateFieldsEditor] ✅ addToCategory changed - 复选框状态改变时

---

⚠️ 常见问题

问题 1: 看不到版本横幅

原因: 浏览器缓存了旧代码 解决: 执行强制刷新（Ctrl+Shift+R）或清除缓存

问题 2: "添加到分类"复选框不显示

原因:

• 字段类型不是 select
• 组件未正确加载 解决:
• 检查字段类型是否为 select
• 检查控制台是否有错误日志
• 检查 window.__TEMPLATE_FIELDS_EDITOR_LOADED__ 是否为 true

问题 3: 保存后 addToCategory 丢失

原因: payload 构建时未包含该字段 解决:

• 检查控制台日志，查看 payload 构建过程
• 确认字段类型为 select 时，addToCategory 是否被正确添加

---

✅ 测试通过标准

所有测试通过后，应该满足：

1. ✅ 版本检查脚本正常工作
2. ✅ "添加到分类"复选框在 select 类型字段时正确显示
3. ✅ 字段类型切换时，addToCategory 状态正确处理
4. ✅ 保存模板时，addToCategory 正确包含在 payload 中
5. ✅ 已保存模板加载时，复选框状态正确恢复

---

📝 测试记录

请在测试时记录：

• 测试 1: 版本检查
• 测试 2: 复选框显示
• 测试 3: 类型切换
• 测试 4: 保存 payload
• 测试 5: 已保存模板加载
• 测试 6: 缓存清除

测试日期: _______________ 测试人员: _______________ 测试结果: _______________ 发现问题: _______________