Thanks for assigning this issue to me. I'm starting to work on it and will keep this PR's description up to date as I form a plan and make progress.

Original issue description:

CardsPlay 测试用例设计

本测试用例文档依据《CardsPlay 用户故事》需求,覆盖主要功能、约束及用户操作场景,确保产品质量。

1. 测试环境

• 支持 Chrome、Firefox、Safari、Edge 等主流浏览器。
• 本地持久化依赖浏览器 localStorage。
• 首次访问需清空缓存和本地数据。

2. 功能测试

US1 查看初始画布

• 用例1:首次访问页面,显示默认三列及 Header Row,至少2条内容行。Header Row 不含卡片。
• 用例2:刷新后数据持久,布局与卡片保持一致。

US2 创建新卡片

• 用例1:弹窗展示类型单选、标题必填、描述可选,类型变更实时预览颜色。
• 用例2:保存后卡片入库,按类型分组显示,禁止标题重复。
• 用例3:无卡片类型分组可折叠或显示占位。

US3 拖拽放置卡片

• 用例1:Header Row 禁止放置卡片,显示禁止样式。
• 用例2:拖拽高亮合法目标,放置后卡片在单元格末尾。
• 用例3:类型不匹配禁止放置并提示。

US4 首尾列单卡限制

• 用例1:角色列/输出列单元格已有卡片时禁止放第二张,视觉提示。

US5 中间列多卡堆叠

• 用例1:中间列单元格允许多卡堆叠,顺序排列。
• 用例2:支持拖拽排序。

US6 移除卡片

• 用例1:鼠标悬停显示删除按钮,点击后移除卡片并更新本地。
• 用例2:卡片库定义不变。

US7 新增内容行

• 用例1:点击"添加行"按钮,末尾新增内容行。
• 用例2:Header Row 不计入内容行数。

US8 删除内容行

• 用例1:每条内容行显示删除按钮,Header Row 不显示。
• 用例2:仅剩一行时删除按钮禁用。
• 用例3:点击删除弹确认,删除行后对应卡片引用移除。
• 用例4:刷新后行与卡片一致。

US9 新增中间列

• 用例1:通过"添加列"按钮,在输出列前追加新中间列,初始标题为空,支持编辑。
• 用例2:刷新后新列顺序不变。

US10 重命名中间列

• 用例1:双击 Header Row 中间列标题进入编辑,支持空保存。
• 用例2:回车/失焦保存,Esc 取消。
• 用例3:刷新后标题持久。

US11 删除中间列

• 用例1:仅中间列显示删除按钮。
• 用例2:点击删除弹确认,移除列及所有卡片引用。
• 用例3:剩首尾两列不显示删除按钮。

US12 重置画布

• 用例1:点击"重置"弹确认,重置后恢复初始状态,localStorage 清空。

3. 数据持久化测试

• 用例1:操作后刷新页面,数据一致。
• 用例2:大量数据下性能与稳定性。

4. 浏览器兼容性

• 用例1:主流浏览器功能一致。
• 用例2:localStorage 兼容性。

5. 边界与异常

• 用例1:超长标题、特殊字符、空值处理。
• 用例2:离线模式下功能正常。

6. 性能与安全

• 用例1:加载、拖拽性能。
• 用例2:无内存泄漏。
• 用例3:XSS 防护,脚本输入不被执行。

7. 用户体验

• 用例1:拖拽反馈与禁用提示。
• 用例2:响应式布局在不同屏幕下显示正常。

---

优先级定义:

• P0:核心功能
• P1:重要功能
• P2:辅助功能

测试阶段:

1. 冒烟测试(P0)
2. 功能测试(P0+P1)
3. 回归测试
4. 发布测试

缺陷管理:

• 致命、严重、一般、轻微

报告模板:

• 摘要、用例执行、缺陷统计、结论

Fixes #21.

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.