- Demo 简介
是什么： 城市啄木鸟是一款 H5 单页应用（模拟小程序体验），让市民看到城市问题随手拍，AI 自动识别问题类型、生成规范报告、一键提交给相关部门，把传统的「发现问题 → 描述问题 → 找到对的部门 → 提交 → 跟踪」五步链压缩成一步：拍照。从拍照到提交不超过 15 秒，零学习成本，老人小孩都会用。
面向谁：
热心市民：日常出行发现井盖缺失、路灯故障、路面破损等问题
社区工作者：巡查辖区，发现消防隐患、违规搭建需要上报
外卖/快递小哥：跑单途中发现路面坑洼、电缆垂落等隐患
主要功能：
功能一：拍照 → AI 识别 → 一键上报
用户拍照后，AI 自动识别问题类型（井盖损坏/路灯故障/路面破损/占道经营/绿化问题），结合 GPS 定位自动生成规范的政务报送报告，确认后一键提交，全程不超过 15 秒。
功能二：啄木鸟地图 — 城市问题热力图
接入腾讯地图，展示厦门市城市问题分布热力图，支持按问题类型筛选（井盖/路灯/路面/占道/绿化），点击标记查看问题详情，底部展示各行政区问题数量排行。
功能三：案例展示 — 前后对比的完整治理案例
展示 3 个精选案例（井盖修复记、路灯焕新记、路面平整记），包含处理前后对比、案例故事、处理过程时间线，让市民看到参与城市治理的真实效果。
- Demo 创作思路
灵感来源：
12345 政务热线的上报流程需要手动描述问题、查找对应部门、填写表单，步骤繁琐。很多人在路上看到井盖缺失、路灯不亮等问题，想反映却不知道找哪个部门，也不愿意填写冗长的上报表格。「想参与但门槛太高」是普遍痛点——很多人选择默默走开，问题迟迟得不到解决。
如果把「发现问题 → 描述问题 → 找到对的部门 → 提交 → 跟踪」这条五步链压缩成一步——拍照，就能让每个人都成为城市治理的参与者。啄木鸟为树治病，城市啄木鸟为城市治病。
想解决的问题：
市民想参与城市治理，但传统上报方式门槛太高：打 12345 要排队等待，填表要 5 分钟以上，提交后无法追踪进度。外卖小哥等高频发现者没时间填表，问题被白白忽略。
为什么做这个方向：
厦门正在推智慧城市和「i厦门」平台，城市治理参与门槛的降低有真实场景需求。社会服务赛道的核心是「造种新体验」，而城市啄木鸟正是用 AI 把城市治理参与门槛从 5 分钟降到 15 秒，让「想参与但太麻烦」变成「随手拍一下就行」。政府采购是已验证的商业模式，智慧城市赛道预算充足、政策支持。
- Demo 体验地址
在线体验链接：
演示路径：
打开链接 → 首页（看到拍照入口、快捷功能、数据统计）
点击拍照按钮 → 拍照页（可选择拍照或相册图片）
拍照后 → AI 识别页（扫描动画 + 自动识别问题类型和位置）
识别完成 → 报告确认页（可编辑问题类型和报告内容）
点击「一键提交」→ 提交成功页（展示案件编号和受理信息）
点击「查看案件进度」→ 案件详情（进度时间线 + 前后对比）
返回首页 → 体验「啄木鸟地图」和「案例展示」
技术栈： Vue 3 + Vite + Vue Router + 腾讯地图 GL JS
- TRAE 实践过程
本项目完全使用 TRAE IDE 开发完成，以下是完整的开发流程：
4.1 开发流程概览
阶段 内容 TRAE 能力运用
阶段一 项目初始化 + 基础架构 用 TRAE 创建 Vue 3 + Vite 项目，配置路由、样式体系、腾讯地图 SDK
阶段二 核心功能开发 用 TRAE 逐一实现 5 大功能模块（10 个页面）
阶段三 UI/交互优化 用 TRAE 优化页面切换动画、加载状态、手机框适配
阶段四 测试与修复 用 TRAE 进行功能走查、地图 Bug 修复、体验优化
4.2 关键开发步骤
步骤一：项目初始化与架构搭建
使用 TRAE IDE 创建 Vue 3 + Vite 项目，配置 Vue Router 路由（10 个页面路由）、全局样式体系（CSS 变量定义主题色/间距/字体/阴影/圆角）、引入腾讯地图 GL JS SDK。TRAE 帮助快速生成了项目骨架和配置文件。
Session ID：4396266774863056:a90b6597a07367dd956df3bec712a1ab_6a433b536e05f119d8710f4d.6a4367256e05f119d871106f.6a4367256e05f119d871106d:TRAE Work CN.0.1.25.no_sid.no_ppe.T(2026/6/30 14:50:13)
步骤二：核心功能开发 — 拍照识别流程
使用 TRAE 开发核心的拍照上报流程：拍照页（调用相机/相册）、AI 识别页（扫描动画 + 模拟识别）、报告生成页（自动生成政务报送文字）、提交成功页。TRAE 帮助实现了 AI 识别模拟逻辑、GPS 定位与逆地理编码、报告模板生成等核心功能。
Session ID:4396266774863056:240075d34690b3df535eec097226fe05_6a433b536e05f119d8710f4d.6a436d456e05f119d87111bd.6a436d456e05f119d87111bb:TRAE Work CN.0.1.25.no_sid.no_ppe.T(2026/6/30 15:16:21)
步骤三：地图集成与案例展示
使用 TRAE 接入腾讯地图，实现城市问题热力图展示、类型筛选、标记点详情弹窗、行政区统计排行。同时开发了案例展示模块（精选案例列表 + 案例详情前后对比 + 处理过程时间线）。
Session ID：4396266774863056:e75d319b909e03f657eaa9cd59065b5e_6a433b536e05f119d8710f4d.6a437ccb6e05f119d8711262.6a437ccb6e05f119d8711260:TRAE Work CN.0.1.25.no_sid.no_ppe.T(2026/6/30 16:22:35)
步骤四：优化打磨与 Bug 修复
使用 TRAE 进行 UI 交互优化（页面切换动画、加载状态、空状态设计、手机框桌面适配）和 Bug 修复（地图页面问题修复、交互细节优化），确保 Demo 体验流畅。
Session ID：4396266774863056:dd1af4efa91a72550363b0bfa640d73e_6a433b536e05f119d8710f4d.6a4389e56e05f119d8711320.6a4389e56e05f119d871131e:TRAE Work CN.0.1.25.no_sid.no_ppe.T(2026/6/30 17:18:29)
4.3 项目数据
代码规模： 38 个文件，约 9000 行代码
功能模块： 5 大模块，10 个页面
技术栈： Vue 3 + Vite + Vue Router + 腾讯地图 GL JS
数据方案： Mock 数据 + localStorage 本地存储
4.4 开发心得
TRAE 在项目初始化阶段极大提升了效率，从描述需求到生成完整项目骨架只用了几分钟
核心功能的 AI 辅助开发非常高效，拍照识别流程、报告生成、地图集成等复杂功能都能快速实现
Bug 修复阶段，TRAE 能快速定位问题并给出修复方案，地图页面的三个问题在一次对话中就完成了修复
附：报名帖链接:
城市啄木鸟
