用 CodeArts 构建单文件商品管理页：从需求到验收清单

本文为 AI 辅助整理的学习记录，基于华为云 KooLabs「基于CodeArts代码智能体-快速构建商品管理Web应用」实验。已完成代码生成与文件保存；下文提供待执行的浏览器验收清单，不将生成成功等同于测试通过。

一、先把需求边界说清楚

对于初次接触代码智能体的开发者，商品管理页面是一个合适的练习：实体字段直观，新增、编辑、查询和删除可以构成完整的数据操作闭环。本次将范围限制为纯前端单页，不接入数据库和云资源，不安装依赖，所有代码放在 index.html 中。

这样的边界有两个好处：一是减少环境准备带来的干扰，二是更容易核对生成结果是否满足需求。它适合个人学习和原型验证，并不等于生产环境中的库存系统。

二、提交给智能体的需求

在 CodeArts Agent 中新建空项目，再输入明确的需求：

在当前文件夹构建一个纯前端的简单商品管理 Web 应用。
界面为中文，支持商品新增、编辑、搜索和删除。
字段包含商品名称、分类、单价和库存。
使用 localStorage 保存数据，代码可通过 index.html 运行。
仅在当前项目内创建文件，不安装依赖、不调用云服务。
删除前弹出确认框，保持现有安全审批设置。

与只说“做个管理系统”相比，上述说明补齐了数据字段、运行方式、持久化方式和操作边界。生成过程中，逐次检查文件写入和命令执行请求，确认作用范围仍然是当前项目即可，无需为了一个小实验改变全局审批设置。

三、生成结果包含什么

本次生成的页面将结构、样式和脚本放在一个文件中，包含新增商品表单、商品列表、关键词搜索、编辑回填、删除确认及库存统计。数据以 JSON 形式写入浏览器 localStorage，使用 pms_products 作为存储键。

这里要区分“文件已经生成”和“功能已经通过验证”。智能体给出的完成提示只能说明代码生成步骤结束，不能代替真实浏览器中的交互检查。尤其要关注空输入、负数、整数边界以及刷新后的数据恢复。

四、可复用的验收清单

1. 首次打开：检查示例商品、名称、分类、单价和库存列是否完整，页面是否存在明显布局遮挡。
2. 新增：输入一条测试商品，例如“实验笔记本”、单价 12.50、库存 3；保存后检查列表和统计值。
3. 编辑：将库存改为 5，确认只更新目标商品，原有名称和价格不被误改。
4. 搜索：分别输入商品名称和分类关键词，检查匹配结果；清空关键词后应恢复完整列表。
5. 删除：先点取消，数据应保留；再对专用测试商品执行确认删除，检查列表与统计同步更新。
6. 持久化：刷新页面，确认新增或编辑后的数据仍然存在。
7. 边界：尝试空名称、负价格、小数库存和仅含空格的名称，检查页面是否拒绝不合法输入并给出可理解提示。
8. 空列表：删除测试数据至空列表后刷新，检查是否意外重新生成示例商品。示例初始化通常应区分“尚未初始化”与“用户主动清空”。

这些步骤应使用专门的测试数据，不要把真实库存或个人信息放进学习页面。

五、localStorage 的适用范围

localStorage 便于快速体验，但它属于当前浏览器和站点来源，清理浏览器数据后可能丢失，也不提供多人共享、服务端权限校验或可靠审计。浏览器脚本能够读取其中的数据，因此不能在这里保存密码、云访问密钥等敏感信息。

如果后续将页面发展为多人使用的业务应用，应引入服务端数据存储、身份认证、权限控制、输入校验和备份机制，并重新设计删除与恢复流程。单文件版本的价值，在于帮助理解从自然语言需求、代码生成到验收的全过程。

参考资料

华为云 KooLabs 实验手册：https://edu.huaweicloud.com/lab/experimentmanual_20007977

本文中的验收步骤为操作建议，尚未声称所有检查均已通过。