#Cursor加Specs编程，3小时上线一个有管理后台和移动端的检举举报全流程平台（完全开源）

那天晚上我收到一句话需求，只有一个目标：尽快上线，且要能真正跑通全流程。

这不是"做几个页面"那么简单，而是要在极短时间里交付一个可用系统：群众端能举报、后台能办理、看板能统计、上线能自证可用。

先说结论：Cursor + Specs 的组合，让"需求---实现---联调---上线---排障"变成一条流水线。你只需要把关键验收点写清楚，剩下大量重复劳动交给 AI 去跑。

0、项目概况

交付目标：上线一个"群众端 + 管理后台 + 数据看板 + 运维可跑通"的检举举报全流程平台
交付入口 ：群众端 /discipline/report；后台 /discipline/report/admin；看板 /analytics
交付底线 ：页面能用不是标准，链路跑通才是标准（前端 → Nginx → 后端 → DB/Redis）
交付方法：Specs 把"验收点"钉死；Cursor 把"实现与联动"加速

你会发现这种项目最难的不是写页面，而是把"边界条件"处理干净：条款弹层、表单渲染、抽屉详情、权限、接口口径、以及上线那一刻的 404/502。

一、故事从一句"能不能用"开始

对方的反馈很朴素：

用户可以使用二维码扫描就可以举报检举的软件，可以查看举报检举的内容和处理。

我当场给自己定了一个硬指标：3 小时内把链路打通 。为了做到这一点，我选了一个组合：Cursor + Specs。

Specs：把需求写成可验收的"规格"（输入/输出/约束/验收点）
Cursor：让 AI 在代码库里高速定位、批量联动修改、并用自检方式逼近"可上线"

二、我们要交付什么

我把"纪检举报全流程平台"拆成四块，任何一块缺失都叫"不完整"：

群众端（移动端适配） ：匿名进入 /discipline/report，条款确认后能关闭弹层，表单控件可见可填可提交
管理端（后台） ：/discipline/report/admin 列表字段"像台账"，点开用抽屉看详情，能维护处理状态
分析看板（/analytics）：不是静态模板图，要能反映举报趋势、类型与处理情况
上线运维 ：Nginx 反代 /prod-api、SPA 路由回退、端口对齐、HTTPS 证书与 404/502 的可复用排障路径

三、Specs 的第一刀：把"含糊话"写成验收点

我没有写"做个举报系统"，而是写了几条能当场验收的规格：

交互：点击"阅读并确认"后，条款必须关闭；表单必须出现；按钮点击必须有响应
后台：详情必须抽屉展示；列表必须包含举报人/被举报人/IP 等；类型与状态要用颜色区分
看板：/analytics 必须是"举报相关"，口径包含趋势/分布/占比/Top 来源/办理效率
上线：前端统一走 /prod-api；若出现 502，必须能在 5 分钟内定位到"端口不通/反代不对/后端没起"其中一类

Specs 写得越"工程化"，AI 就越像一个能协作的工程师，而不是只会生成代码的工具。

3.5、我写 Specs 的方式

我参考了我自己 docs/ 里那种"项目案例复盘"写法：先给结论，再给清单，再讲踩坑。对应到 Specs 就是两个要素：

需求清单：这次必须做什么（群众端/后台/看板/上线）
验收清单：每个点怎么判定"做完了"

四、系统交互流程（群众端 → 管理端 → 看板）

0）系统交互流程图（全景）

确认进入举报
提交
点击行
更新处理状态
群众举报人

手机扫码或打开链接
群众端举报页

State A 须知蒙层
State B 表单填写

举报人(可选) / 被举报对象 / 类型 / 描述 / 附件 / 验证码
后端 API

提交举报
数据库

举报主表 / 附件 / 审计字段
提交结果

成功 / 失败提示
管理人员

后台账号登录
举报列表

筛选 / 排序 / 彩色状态 / 类型
详情抽屉

结构化字段 / 全文 / 附件预览 / 敏感字段(解密)
后端 API

状态维护 / 留痕
/analytics 看板
后端 API

举报统计 analytics
趋势 / 分布 / Top IP / Top 对象

处理率 / 平均处理时长

1）群众端（移动端）：扫码进入 → 须知 → 表单 → 提交

入口：扫码/点击链接进入群众端举报页（线框：群众端 GET /report，实际部署通常为 /discipline/report）
State A --- 须知蒙层 ：展示三条须知文案 + 【确认进入举报】
State B --- 表单（确认后）：进入结构化表单填写并提交

表单核心字段（面向"能办理"的信息结构）：

举报人信息（可选）：姓名 / 电话 / 身份证（敏感字段加密存储）
被举报对象：姓名 · 单位/村组 · 职务
问题类型：下拉选择（便于后续统计与分派）
事实描述：50--500 字（强调"可核查"）
证据材料：图片（如 ≤2MB/张，按系统配置）
验证码：防滥用、抗刷（按开关配置）

提交后：

成功：弹出成功提示（并建议不要重复提交同一事项）
失败：提示原因并支持重新提交

2）管理端（PC）：登录 → 列表 → 抽屉详情 → 状态维护

登录页 ：/admin/login（账号体系统一登录）
列表页 ：/discipline/report/admin（线框示意为 /admin/reports）
- 列字段重点是"办案台账化"：时间、被举报摘要、类型、状态（并用颜色区分）
- 行点击进入详情（不建议跳转中断工作流）
详情页（抽屉） ：/admin/reports/:id（线框示意）
- 被举报对象结构化信息（可 JSON/表格形式展示）
- 举报事实全文
- 解密后的举报人敏感信息（需权限）
- 附件图片预览
- 处理状态：未处理 / 已处理（保存留痕）

3）看板（/analytics）：从"查看"走向"研判与汇报"

管理端看板的目标不是炫图，而是回答三类问题：

趋势：最近 N 天举报量是否异常波动
结构：问题类型分布、处理状态占比
聚集与风险：Top IP、Top 举报/被举报对象、办理效率（处理率/平均处理时长）

五、技术栈与选型（后端 / 前端 / 移动端）

这次之所以能在短时间内交付"全流程"，本质是选型上尽量走成熟工程底座：能复用的复用，能配置的配置，避免从零造轮子。

1）后端（ruoyiai-backend）

框架：RuoYi-AI / Spring Boot
- 为什么选：企业后台常用底座，权限、审计、配置、字典/枚举、文件上传等能力成熟；适合"快速上线 + 规范可维护"。
核心模块 ：纪检举报（提交/列表/详情/状态/统计聚合）
- 为什么这样拆：让"受理---办理---研判"闭环清晰，接口口径可复用到看板。
数据安全 ：举报人电话/身份证等敏感字段加密存储
- 为什么必须做：减少数据库泄露风险；管理端按权限解密展示，符合"最小必要"原则。
接口风格 ：REST API + 统计聚合接口（如 analytics）
- 为什么需要统计接口：看板不是前端算出来的，口径应由后端统一，避免多端不一致。

2）前端（ruoyiai-frontend）

技术栈 ：Vben + Vue3 + Ant Design Vue
- 为什么选：后台范式成熟，表格/表单/抽屉/标签等组件生态完善；适合快速构建管理端。
布局：融入 BasicLayout 菜单体系
- 为什么选：权限与导航统一管理，后续扩模块不"野生长"。
图表：ECharts
- 为什么选：趋势/分布/占比/Top 维度的可视化表达稳定，且可配置性强。
工程习惯 ：接口类型定义 + 组件 props 驱动 + loading/空态兜底
- 为什么必须做：看板与列表类页面最怕"接口异常白屏"，兜底决定线上体验下限。

3）移动端（群众端"移动适配"的实现方式）

严格意义上它不是单独的 App，而是 群众端独立路由 + 移动端布局适配：

路由策略 ：独立路由 + ignoreAccess（匿名可访问）
- 为什么这样做：群众端与后台权限模型完全不同，必须隔离；避免"没登录就被拦到登录页"。
页面形态 ：移动端表单为核心（少跳转、强引导、强校验）
- 为什么这样做：扫码场景停留时间短，交互要直给；字段结构化是为了后台可办理、可统计。
安全策略 ：验证码开关 + 频控
- 为什么需要：公开入口天然会被滥用，防刷是可用性的底线。

七、关键链路时序图（群众提交 / 后台办理 / 看板统计）

1）群众端提交举报（含须知→表单）

数据库后端接口群众端页面数据库后端接口群众端页面群众/举报人打开 /discipline/report 1 展示须知蒙层（State A） 2 点击【确认进入举报】 3 展示表单（State B） 4 填写字段/上传附件/输入验证码 5 POST 提交举报 6 写入举报记录/附件信息 7 返回成功/失败 8 提示结果（成功/失败原因） 9 群众/举报人

2）管理端办理：列表→抽屉详情→更新状态

数据库后端接口管理端页面数据库后端接口管理端页面办理人员登录后台 1 GET 列表查询（分页/筛选） 2 查询举报列表 3 返回列表数据 4 点击某条记录 5 GET 详情（含附件/敏感字段权限） 6 查询详情/附件/加密字段 7 返回详情数据 8 修改处理状态并保存 9 PUT 更新状态 10 写入状态变更（留痕） 11 保存成功 12 办理人员

3）看板：请求统计口径→图表渲染

数据库后端统计接口 /analytics 页面数据库后端统计接口 /analytics 页面管理人员打开 /analytics 1 GET analytics（days/topK） 2 聚合趋势/类型/状态/Top/IP/效率 3 返回统计结果 4 渲染趋势/分布/Top/效率图表 5 管理人员

六、后端/前端模块拆解

1）后端模块

举报提交：匿名提交举报（含验证码校验、附件上传、字段校验）
举报查询：后台分页列表（按时间/类型/状态/关键词等检索）
举报详情：结构化字段 + 附件 +（按权限）敏感信息解密展示
状态维护：未处理/已处理等状态流转（留痕）
统计看板：趋势、分布、Top IP/对象、处理率、平均处理时长

2）前端模块

群众端页面：须知蒙层 → 表单 → 提交反馈
后台页面：列表（台账字段 + 彩色标签）→ 抽屉详情（含附件预览、状态维护）
看板页面：趋势/类型/状态/IP/Top 实体等图表联动与空态兜底

八、AI 编程自动化怎么落地：Cursor + Specs 的"技术选型"

这一套方法我更愿意叫"工程化协作"，而不是"AI 帮我写代码"：

Specs：把需求变成可执行的规格（页面、接口、权限、统计口径、验收标准）
Cursor：让 AI 在代码库里做"定位 → 修改 → 对齐 → 补齐边界（loading/空态/类型）"

你可以把它理解成一条生产线：Spec 是工单，Cursor 是高性能执行器，人负责验收与关键决策。

九、最终交付清单

群众端举报入口 ：/discipline/report
管理端列表/办理 ：/discipline/report/admin
举报分析看板 ：/analytics
运维要点
- SPA 回退：try_files $uri $uri/ /index.html;
- 接口前缀：/prod-api/ 反代到后端真实端口（注意 proxy_pass 末尾 /）
- 502 优先查：后端端口监听与反代端口一致性
- HTTPS 优先查：证书文件路径与 .well-known 放行

十、结语：把交付变成流水线，下一次更快

当你把需求写成 Specs，把 Cursor 当作"工程协作层"，你得到的不是几段代码，而是一条可复用的交付流水线：从需求 → 开发 → 联调 → 上线 → 排障 → 复盘。

下一次再做类似的业务系统，3 小时不是玄学，而是工程方法的自然结果。

十一、系统演示地址

1）在线演示（建议）

演示站点 ：http://jb.hei-ai.com
群众端入口 ：http://jb.hei-ai.com/discipline/report
管理端入口：`http://jb.hei-ai.com

2）演示账号

管理员账号 ：demo
管理员密码 ：demo123

十二、整套 Specs 编程资料（全部开源）

很多人以为"Cursor 很强=复制几段提示词就行"。但真正在 3 小时内稳定交付的关键，是一套能复用的工程化资料：规格模板 + 任务拆解法 + 验收清单 + 排障 Runbook + 可复制的项目骨架。

下面是我整理的"整套 Specs 编程资料包"交付清单：

1）Specs 模板库（可直接套用）

下载地址：

需求澄清 Spec 模板：把"含糊话"翻译成输入/输出/约束/验收点
页面改造 Spec 模板：列表/表单/抽屉/权限/空态/加载/错误提示
接口联动 Spec 模板：后端 VO/Controller/Service、前端 API 类型/请求、Mock/回归
上线 Spec 模板：Nginx、端口、环境变量、健康检查、灰度回滚

2）"3小时交付"任务跟AI交互的全过程

0-30 分钟：锁定验收点与链路（能访问→能交互→能通路）
30-120 分钟：前后端联动改造（接口 + 页面 + 组件）
120-180 分钟：上线与排障（404/502/证书/端口/反代/空态）

3）验收清单

群众端验收：条款关闭、表单可见、必填校验、提交成功提示、验证码/限流
管理端验收：列表字段完整、抽屉详情、状态流转、颜色标签、权限控制
看板验收：趋势/分布/占比/Top/效率口径一致，接口失败不白屏
上线验收 ：/prod-api/auth/code 可达、Nginx 反代正确、SPA 回退正确、502 可快速定位

4）上线与运维资料

把"怎么上线、怎么自检、怎么回滚"整理成可复制的运维资料（不展开排障过程，只提供模板与检查项）：

Nginx 模板 ：静态站点 + SPA 回退 + /prod-api 反代
端口与启动参数模板：后端 profiles/port/config-location
健康检查清单：关键接口探测、权限校验、看板接口口径一致性
HTTPS 指引 ：证书申请流程与 .well-known 放行模板

5）Cursor 提示词与工作流

项目级提示词：如何让 AI"按规格做事"，而不是自由发挥
代码定位提示词：如何让 AI 快速找到入口、路由、接口、组件
联调提示词：如何让 AI 同步改 VO/接口/前端类型/图表 props
回归提示词：如何让 AI 主动补 loading/空态/错误兜底，降低线上事故