【标签】社会服务/社会公益
【社会服务赛道】 社会服务 + 烟迹 SmokeTrace - 二手烟监督地图
0. 先和大家打个招呼吧 
-
**你是谁：**我是一个城市规划设计师，从城市治理角度出发，有很多可以借助ai实现的产品；
-
你是怎么用 TRAE 把 Demo 做出来的： 技术只是工具，清晰的表达意图是最重要的，产品永远面对的是用户或者社会
1. Demo 简介
-
是什么：一款公众参与的二手烟监督地图小程序，用户可拍照标记禁烟场所的违规抽烟行为，形成可视化的「抽烟地图」。；
-
面向谁：关注健康的城市居民、烟民监督者、控烟志愿者、以及城市执法部门；
-
主要功能：
-
抽烟地图：深色主题地图展示全国 10 城市、60+ 场所的二手烟举报标记，标记大小反映举报数量热度
拍照举报：上传现场照片、选择城市和场所类型、填写详情，一键提交违规记录
数据中心：城市举报排行榜、整改率统计、最佳/最差城市展示，辅助评估城市控烟成效。
2. Demo 创作思路
-
灵感来源：随着健康意识提升，二手烟危害日益受关注，但公共场所违规吸烟现象仍普遍存在。个人力量有限，希望通过大众参与形成监督网络，倒逼场所自我管控；
-
想解决的问题：违规吸烟取证难、举报流程繁琐；缺乏直观的数据展示让公众了解控烟现状；执法部门缺乏精准的管控线索；
-
为什么做这个方向：地图是最直观的数据呈现方式，能让用户一眼看到问题所在；拍照举报降低参与门槛；数据统计为城市控烟工作提供量化参考。技术上选择 React + Leaflet 方案，便于快速开发和跨平台部署。
3. Demo 体验地址
-
交互式可体验的 HTML 文件：已打包为 Zip 文件（SmokeTrace-Single
.zip），解压后直接打开 single-index.html即可体验全部功能。SmokeTrace-Single.zip (8.3 KB)
4. TRAE 实践过程
-
开发流程
-
需求分析：与 TRAE 讨论产品定位，确定「地图 + 举报 + 数据」三大核心模块，采用深炭灰 + 琥珀色主题风格
-
技术选型：在 TRAE 建议下选择 React 18 + Vite + TypeScript + Tailwind CSS + Leaflet 技术栈，确保开发效率和视觉效果
-
数据层搭建：使用 TRAE 创建 Mock 数据集（10 城市 / 60 场所 / 约 200 条标记），覆盖餐厅、车站、地铁、办公区等 6 大类型
-
地图组件开发：集成 Leaflet 深色地图，实现自定义标记、城市切换、地图缩放联动等功能
-
举报表单开发：支持照片上传、城市选择、场所类型、地址填写、描述补充，提交后地图实时更新
-
数据统计页面：开发城市排行榜、整改率环形图、最佳/最差城市对比等可视化组件
-
状态管理：使用 Zustand + localStorage 实现数据持久化，用户提交的举报记录会自动保存
关键步骤截图
关键任务 Session ID
-
-
3946577407247408:8ef15022702346f5a3e1f3c7eaea199b_6a4f8d6d6ce40216c7489e6e.6a4f8d6d6ce40216c7489e71.6a4f8d6d6ce40216c7489e6f:TRAE Work CN.0.1.25.no_sid.no_ppe.T(2026/7/9 20:00:45)
-
3946577407247408:d845fe28b17a1314f726144fb77bb759_6a4f8d6d6ce40216c7489e6e.6a4f963d6ce40216c7489f94.6a4f963d6ce40216c7489f92:TRAE Work CN.0.1.25.no_sid.no_ppe.T(2026/7/9 20:38:21)
-
3946577407247408:69ea76f8263d66b52a58e273fe7572e3_6a4f8d6d6ce40216c7489e6e.6a4fa81d6ce40216c748a319.6a4fa81d6ce40216c748a317:TRAE Work CN.0.1.25.no_sid.no_ppe.T(2026/7/9 21:54:37)
-
需求分析与技术选型：6a4f8d6d6ce40216c7489e6b
-
数据层与状态管理开发：6a4f8d6d6ce40216c7489e6b
-
地图与核心组件开发：6a4f8d6d6ce40216c7489e6b
5. 对应的报名审核通过的帖子链接
**Session ID ：**3946577407247408:1bd009295446509644e272b705f9078e_6a4a94cc48e18f3c22529bc4.6a4a94cc48e18f3c22529bc7.6a4a94cc48e18f3c22529bc5:TRAE Work CN.0.1.25.no_sid.no_ppe.T(2026/7/6 01:30:52)
