【claude产品经理系列13】核心功能实现——需求的增删改查全流程

「产品经理用 Claude 实现产品」系列 · 第13篇

架构搭好了，链路打通了，现在到了最关键的一步------让产品"真正能用"。这篇文章完善所有核心功能：创建需求、列表筛选、看板拖拽、详情编辑、软删除......完成后，你要作为产品经理，对自己亲手做出的产品做一次完整的功能验收。

一、今天要让应用"真正能用"

前面12篇，我们做了大量铺垫：

✅ 认知建立、工具准备、需求梳理
✅ 技术方案设计、项目管理
✅ 前端所有页面搭建完成
✅ 后端接口实现
✅ 数据库接入、前后端联调

现在，用一个产品经理最熟悉的词来描述现状：骨架有了，血肉还不够。

今天就是"填肉"------把每个功能做完整，让产品从"能跑"变成"能用"。

今天的目标清单：

📋 完善需求创建/编辑表单
🔍 实现列表筛选和搜索
🗂️ 完善看板视图（拖拽改状态）
📄 完善需求详情页
🗑️ 实现软删除与归档
✅ 完整功能走查验收

💡 本系列全程使用 weelinking 访问 Claude，国内可稳定使用

二、需求创建功能完善

2.1 完善表单字段

前端的创建表单已经有了基础结构，现在要完善所有字段的交互细节。

你：帮我完善需求创建表单（src/pages/RequirementForm.jsx），要求：

优先级选择：

四个单选按钮（不用下拉），显示为卡片样式

P0 红色（紧急），P1 橙色（高优先级），P2 蓝色（正常），P3 灰色（低优先级）

每个卡片显示优先级名称和说明文字

状态选择（编辑时可选）：

待评审→开发中→测试中→已完成→已关闭

用步骤条（Steps 组件）显示当前状态，可点击切换

标签管理：

支持输入后按回车添加标签

已添加的标签显示为可删除的 Tag

预设常用标签：前端、后端、数据库、用户体验、安全

详细描述：

使用多行文本框（TextArea），支持 Markdown 格式

显示字数统计（最多2000字）

期望完成日期：

日期选择器，只能选今天及以后的日期

Claude 会给你完整的表单代码，复制粘贴后刷新页面，你会看到一个有质感的创建表单------优先级卡片可点选，标签能动态增删，字数实时统计。

这才是一个产品经理满意的表单设计。

2.2 表单验证完善

你：帮我完善表单验证逻辑：

标题：必填，不超过100字，实时提示剩余字数

优先级：必填，未选时按提交按钮有红色提示

类型：必填

描述：必填，最少20字

提交时：逐字段校验，聚焦到第一个未通过的字段

提交中：按钮显示 Loading 状态，禁止重复提交

这些校验规则，你在 PRD 里写过多少次了？现在终于亲手把它们实现了。

2.3 提交成功后的体验

你：提交成功后：

显示成功提示："需求创建成功！"（绿色提示条，3秒消失）

跳转到需求详情页

如果是编辑页，更新成功后留在详情页并刷新数据

三、需求列表与筛选

3.1 完善筛选功能

你：帮我完善需求列表页的筛选功能：

筛选区（顶部横排）：

搜索框：实时搜索标题（输入500ms后触发，不要每次按键都请求）

状态筛选：下拉多选（可以同时筛选多个状态）

优先级筛选：P0/P1/P2/P3 多选

创建人筛选：从用户列表里选

重置按钮：清空所有筛选条件

筛选条件保存：

把筛选条件存到 URL 参数里

刷新页面，筛选条件不丢失

可以把筛选后的 URL 发给同事，他打开看到相同结果

"把筛选条件存到 URL"------你设计过这个功能吗？这是产品细节，Claude 帮你一并实现了。

3.2 表格功能完善

你：完善需求列表表格：

列宽可以拖拽调整

点击列标题可以排序（创建时间、优先级）

支持批量操作：勾选多条需求，可以批量删除或批量修改状态

每行鼠标悬停时显示快捷操作（查看、编辑、删除图标）

点击行任意位置跳转到详情页

Claude 会完善表格交互。批量操作这个功能，你在 Jira、飞书任务里肯定用过------现在你自己的产品里有了。

3.3 分页与数据量展示

你：在列表底部加上：

分页组件（每页可选20/50/100条）

"共 X 条需求"的数量说明

当前页是第几页

四、看板视图完善

4.1 看板拖拽改状态

第10篇搭前端框架时，做了看板页面，支持拖拽。但拖拽只在前端改变了显示，没有真正更新数据库里的状态。现在来接上后端：

你：帮我完善看板视图页（src/pages/Kanban.jsx），拖拽需求卡片到不同列时：

调用 PUT /api/requirements/:id 更新 status 字段

拖拽时显示 Loading 状态

更新成功后保持新位置，失败时回弹到原来位置并提示错误

另外，看板列的显示：

每列显示列名和需求数量："待评审（5）"

列顶部按优先级排序

卡片显示：标题、优先级标签、创建人头像、距截止日期天数（红色警示逾期）

"拖拽失败回弹"------这是产品体验细节，你在做产品时有没有想到过？Claude 帮你一并处理了。

4.2 看板快捷操作

你：看板卡片上加快捷操作：

鼠标悬停时显示"..."菜单按钮

点击菜单：查看详情、编辑、删除

快捷修改优先级（不需要进详情页）

五、需求详情与编辑

5.1 完善详情页

详情页是用户停留最久的页面，信息要展示完整，操作要方便。

你：完善需求详情页（src/pages/RequirementDetail.jsx）：

头部信息区：

需求标题（大字）

优先级标签（带颜色）、状态标签（带颜色）

右上角：编辑按钮、删除按钮、返回按钮

基本信息（两列布局）：

左列：优先级、需求类型、状态、负责人

右列：创建人、创建时间、更新时间、期望完成日期

标签：

显示所有标签

详细描述：

Markdown 渲染（用 react-markdown 库）

代码块高亮

状态流转区：

显示状态步骤条

有权限的用户可以点击步骤直接更改状态

底部评论区（预留位置）：

显示"评论功能开发中"的占位提示

从后端 GET /api/requirements/:id 获取数据

Claude 会给你一个内容丰富的详情页。

5.2 行内编辑

你：在详情页加上行内编辑功能：

双击标题可以直接编辑

优先级、状态、负责人可以直接点击修改（不需要进编辑页）

修改后自动保存，右上角显示"已保存"

这个功能你在 Notion、Linear 里用过------自己做出来的感觉完全不一样。

六、删除与归档

6.1 删除确认交互

你：实现删除需求的完整交互：

点击"删除"按钮，弹出确认框

确认框文案："确定要删除需求「[需求标题]」吗？删除后可以在已归档中找到。"

两个按钮：取消（灰色）、确认删除（红色）

删除成功后：列表页刷新；详情页跳回列表页

删除接口：调用 DELETE /api/requirements/:id（软删除）

软删除是最佳实践： 数据不真正删除，只是加了 deletedAt 时间戳。这样用户误删了还能恢复，你在做产品时肯定也要求过这个功能。

6.2 归档/回收站页面

你：新增一个"已归档"页面（路由 /archived），显示所有软删除的需求：

列表展示（灰色样式，标明"已删除"）

每条记录有"恢复"和"彻底删除"两个操作

恢复：清除 deletedAt，需求回到正常状态

彻底删除：从数据库真正删除（需要二次确认，"此操作不可撤销"）

后端需要新增：

GET /api/requirements/archived（获取已归档列表）

PUT /api/requirements/:id/restore（恢复）

DELETE /api/requirements/:id/permanent（彻底删除）

在侧边菜单里加上"已归档"入口。

七、完整功能走查

这是这篇文章最重要的一节------作为产品经理，对自己的产品做验收。

7.1 准备测试数据

先用 Claude 帮你生成一批测试数据：

你：帮我写一段脚本，往数据库里插入20条测试需求数据，覆盖：

各种优先级（P0~P3）

各种状态（待评审/开发中/测试中/已完成）

各种类型（新功能/优化/Bug修复）

不同的创建时间（过去一个月内）

有了测试数据，验收才有意义。

7.2 核心功能走查清单

按照产品经理的习惯，逐一验收：

需求创建流程：

填写完整表单，提交成功，跳转到详情页
只填标题不填优先级，提交时有提示
标题超过100字，提交时有提示
添加3个标签，删除1个，确认显示正确

需求列表：

按"待评审"状态筛选，只显示对应需求
搜索"登录"关键词，显示包含该词的需求
同时筛选 P0 优先级 + 待评审状态
清空筛选，显示全部
点击"创建时间"列标题，列表按时间排序
勾选3条需求，批量修改状态为"开发中"

看板视图：

三列正常显示，数据准确
把一张卡片从"待评审"拖到"开发中"，刷新页面状态已更新
在列表页查看同一条需求，状态已变更

需求详情：

点击列表中的需求，进入详情页，信息完整
双击标题，修改后保存，页面显示新标题
点击状态步骤，切换状态，保存成功

删除与归档：

删除一条需求，确认框文案正确
删除后列表不显示该需求
进入"已归档"，找到刚删除的需求，点"恢复"
回到列表，需求已恢复

边界情况：

列表为空时，显示"暂无需求，去创建第一个需求"的引导
请求失败时（断开后端），显示错误提示而不是白屏
页面快速操作（连续点击），没有重复请求

7.3 发现的 Bug 怎么处理

走查过程中肯定会发现问题。你的处理流程：

记录 Bug：截图 + 文字描述（现象、步骤、预期结果）
问 Claude 修复：

"发现一个 Bug：在需求列表页，同时选中 P0 优先级和"待评审"状态进行筛选，列表显示空，但实际上有符合条件的数据。后端筛选接口代码是 [粘贴代码]。请帮我找出问题并修复。"

修复后再验一遍

这和你日常做产品验收完全一样------发现问题、提 Bug、跟进修复、再次验收。 只是现在你既是测试，也是开发，自己改自己的 Bug，效率极高。

八、产品经理视角的代码审视

完成所有功能后，花几分钟用产品经理的眼光审视一下你做出来的东西：

你在 PRD 里写过的，都实现了吗？

PRD 里的设计	实现情况
优先级 P0-P3，不同颜色	✅ 已实现，卡片式显示
状态流转：待评审→开发中→测试→完成→关闭	✅ 步骤条展示，可点击切换
软删除，可以恢复	✅ 归档页面，支持恢复
列表支持多维度筛选	✅ 状态、优先级、关键词、创建人
看板视图，拖拽改状态	✅ 拖拽后同步数据库

有没有"技术上不能做"的需求？

以前开发经常跟你说"这个做不了"或"排期太久"。现在你自己动手，发现很多"做不了"的需求，其实只要描述清楚，Claude 几分钟就能实现。

不过也有真实的局限：

功能	复杂度	说明
基础 CRUD	低	Claude 轻松完成
复杂权限控制	中	需要仔细描述，多次迭代
实时通知（WebSocket）	高	需要额外的技术方案
复杂报表统计	高	SQL 逻辑复杂，需要更多调试
移动端适配	中	需要逐页面调整

这种认知非常有价值：你现在理解了"技术复杂度"不是借口，而是真实存在的。 下次跟开发讨论排期，你会有更准确的判断。

九、阶段成果

完成本篇后：

✅ 需求创建表单：完整字段、完善校验、良好体验
✅ 需求列表：多维度筛选、排序、批量操作
✅ 看板视图：拖拽改状态，数据库同步
✅ 需求详情：信息完整，行内编辑，状态流转
✅ 删除归档：软删除、归档页、恢复功能
✅ 完整功能走查，主要 Bug 修复

这已经是一个"能用"的产品了。 不是 Demo，是你日常真的能用来管理需求的工具。

bash 复制代码

git add .
git commit -m "完成核心功能，通过功能走查"
git push

十、总结与下期预告

🎯 本篇核心要点

1. "能跑"和"能用"之间差很远。 接口通了只是开始，体验细节（校验提示、加载状态、错误处理、边界情况）才是产品品质的体现。

2. 产品经理的验收思维是优势。 走查清单、边界情况测试------你比普通开发更懂什么叫"好用"。

3. 软删除是最佳实践。 数据不要真的删，给用户留后悔的机会。这个设计原则，自己实现一遍就刻到骨子里了。

4. 发现 Bug 不要慌，给 Claude 描述清楚就能修。 你已经有了识别问题和描述问题的能力，这是解决问题的最难一步。

📌 记住这句话

你不只是在写代码，你是在用代码实现产品设计。每当你验收完一个功能，想一下：如果这是别人做给你的，你会怎么评价它？这个问题会让你的产品变得更好。

📣 下期预告

第14篇：《用户登录与权限------你最熟悉的"角色权限"落地了》

你写过无数次"角色权限矩阵"------管理员有所有权限，普通用户只能管理自己的需求，访客只能查看。

下一篇，用 Claude 把这个权限矩阵变成真实的代码：

完整的登录注册流程
JWT 认证机制
三种角色：管理员、普通用户、访客
后端接口鉴权（你是谁，能做什么）
前端按钮权限控制（只有有权限的人才能看到操作按钮）

💡 本系列全程使用 weelinking 访问 Claude，国内可稳定使用

📎 配套资源

📋 功能验收检查清单

复制代码

□ 需求创建
  □ 完整表单字段展示正确
  □ 必填校验生效
  □ 标签可增删
  □ 提交成功跳转详情页
  □ 提交中按钮 Loading，禁止重复提交

□ 需求列表
  □ 列表正常加载，分页正确
  □ 状态筛选有效
  □ 优先级筛选有效
  □ 关键词搜索有效（模糊匹配）
  □ 多条件组合筛选有效
  □ 重置按钮清空所有筛选
  □ 排序功能正常

□ 看板视图
  □ 三列正常显示
  □ 拖拽卡片到其他列，状态更新
  □ 拖拽后刷新页面，状态保留

□ 需求详情
  □ 信息展示完整
  □ 行内编辑可用
  □ 状态切换可用
  □ 编辑按钮跳转表单页

□ 删除功能
  □ 删除有二次确认
  □ 软删除，归档页可找到
  □ 归档页可恢复
  □ 恢复后列表可见

□ 边界情况
  □ 列表为空时有引导
  □ 请求失败时有提示
  □ 404 页面存在

📋 常用功能实现提示词

实现筛选功能：

复制代码

帮我实现 [页面名] 的筛选功能：

筛选条件：
1. [条件1]：[类型，单选/多选/输入框]，对应接口参数 [参数名]
2. [条件2]：...

要求：
- 筛选条件存到 URL 参数
- 防抖处理（输入框500ms后请求）
- 有"重置"按钮清空所有条件
- 筛选变化时请求第一页

实现删除确认：

复制代码

帮我实现删除确认交互：
- 点击删除按钮弹出 Modal
- Modal 标题："确认删除"
- 内容："确定要删除「[动态显示标题]」吗？[补充说明]"
- 确认按钮：红色，文案"确认删除"，点击后 Loading 状态
- 成功后：[成功后的行为]
- 失败后：显示错误提示

实现行内编辑：

复制代码

帮我给 [字段名] 加上行内编辑功能：
- 默认显示文本
- 双击/点击编辑图标，切换成输入框
- 输入框失焦或按回车，自动保存
- 保存时显示 Loading
- 保存成功，右上角显示"已保存"（2秒后消失）
- 保存失败，回退到原始值，显示错误提示

🌟 如果这篇文章对你有帮助，请点赞👍 收藏⭐ 关注🔔

你的支持是我持续更新的最大动力！

💬 评论区聊聊：你做功能走查时发现了哪些 Bug？怎么修的？

📌 系列导航： 产品经理用 Claude 实现产品 · 系列目录

⏪ 上一篇： 第12篇：接入数据库------让数据永久保存

⏩ 下一篇： 第14篇：第14篇：用户登录与权限------你最熟悉的"角色权限"落地了
💡 本系列全程使用 weelinking 访问 Claude，国内可稳定使用

🚀 整个系列的核心理念：你不需要变成程序员，你只需要从"找人做"变成"自己能做"。