8705b9846a
Some checks failed
CI Check / check (push) Has been cancelled
- 创建统一的Modal组件，采用Apple风格设计 - 实现毛玻璃效果、圆角、动画和细边框描边 - 修复弹窗打开时背景滚动问题 - 修复分类管理中重复卡片和数组字符串显示问题 - 优化选项解析逻辑，添加去重和过滤机制
224 lines
6.8 KiB
Markdown
224 lines
6.8 KiB
Markdown
# 测试清单 - 模板编辑器 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）
|
||
- 右键点击刷新按钮
|
||
- 选择"清空缓存并硬性重新加载"
|
||
|
||
**预期结果：**
|
||
- ✅ 强制刷新后，应该能看到版本横幅和控制台日志
|
||
|
||
---
|
||
|
||
## 🔍 调试信息
|
||
|
||
### 全局变量检查
|
||
|
||
在浏览器控制台执行以下命令，检查组件是否已加载：
|
||
|
||
```javascript
|
||
// 检查应用版本
|
||
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: 缓存清除
|
||
|
||
**测试日期**: _______________
|
||
**测试人员**: _______________
|
||
**测试结果**: _______________
|
||
**发现问题**: _______________
|
||
|