一、Demo 简介
是什么： 「灯火万家」是一个社区公益水电维修平台，产品形态为纯前端可交互 HTML 应用（单文件，浏览器直接打开即可体验）。传统报修中老年人往往说不清故障类型和紧急程度，本产品利用 AI NLP 技术（Demo 中为模拟）自动从口语化描述中提取故障类型、紧急程度，并结合 5 维加权模型智能匹配最合适的维修资源。同时在邻里互助板块，通过隐藏受助长者的精确门牌号和真实姓名（显示为"张奶奶"等化名），实现隐私保护下的公益闭环。三大核心场景——AI 驱动报修、智能供需匹配、隐私保护公益审核——连接社区居民维修需求与社区维修力量。
面向谁：
居民：独居老人、残障人士、低收入家庭、普通居民
物业/居委会：负责审核资格、调度人员、监督服务质量
维修师傅：专业技工、退休水电工、社区志愿者
核心功能（全部可交互体验）：
功能 说明 体验方式
角色切换 居民/物业/师傅三方角色，底部 Tab 栏自由切换 点击角色卡片进入
AI 无障碍报修 选择维修类型 → 描述问题 → 拍照上传 → AI 自动生成工单 → 费用预估 居民端首页点击"一键报修"
智能供需匹配 5 维加权评分（技能30%+好评率25%+长者意愿20%+距离15%+负载10%），评分条动画填充 居民端"匹配"Tab
公益审核+邻里互助 隐私计算审核进度动画 + 邻里帮一单认捐（可点击"我也帮一单"） 居民端"邻里"Tab
物业仪表盘 KPI 卡片 + CSS 柱状图 + 工单状态筛选 + 派单操作 物业端"仪表盘"Tab
设施巡检 6 项公共设施，点击切换正常/预警/待修状态 物业端"巡检"Tab
师傅接单 新订单卡片，点击"接单"状态变更，收入实时统计 师傅端"接单"Tab
适老模式 24px+ 大字体，仅 3 个大按钮，高对比度 师傅端"适老"Tab
产品截图： （请在发帖时插入以下截图，不少于 3 张）
截图1：
角色选择页 — 展示三方角色入口
截图2：居民端报修流程 — 一键报修 → AI 生成工单 → 费用预估"免费"
二、Demo 创作思路
灵感来源： 在社区志愿服务中真实观察到：很多独居老人水管漏水找不到人修，只能用盆接着；灯泡坏了只能摸黑生活。同时小区里退休的水电工也说"闲着，就是不知道谁需要帮忙”。信息不对称导致供需严重错配。
想解决的问题：
信息不对称：需求方不知道找谁，供给方不知道谁能帮
响应慢：依赖微信群口头传达，紧急需求无法及时响应
缺乏信任：陌生人上门缺乏安全保障，弱势群体不敢开门
价格不透明：维修收费随意，弱势群体常被"宰客"
缺乏激励：志愿者付出无认可，难以持续
为什么做这个方向： 中国正加速进入老龄化社会，独居和空巢老人占比持续攀升。社区作为社会治理的基本单元，承载着越来越多的服务功能。选择"社会服务"赛道，是因为这个方向既有真实痛点，又能通过技术手段实现实质性改善——不是锦上添花，而是雪中送炭。
三、Demo 体验
体验方式一：在线访问 ，访问 https://denghuwanjia-react.pages.dev/
体验方式二：离线体验 下载附件 denghuwanjia-app.zip，解压后用浏览器打开 index.html 即可完整体验，无需网络、无需安装。
核心交互流程（推荐体验路径）：
角色选择：打开页面，点击 「我是居民」
一键报修：首页点击橙色大按钮「一键报修」→ 选择维修类型（如"水管"）→ 填写问题描述 → 点击拍照区域模拟上传 → 查看费用预估（长者自动显示"免费"）→ 点击「确认提交」
AI 生成工单：观看 2 秒"AI 正在分析…"加载动画 → 自动生成工单卡片（故障类型、描述、优先级、长者标记）
查看进度：切换到「进度」Tab，点击工单查看详情 → 查看师傅「安心名片」→ 点击「查看匹配」进入 AI 匹配面板
AI 匹配：观看 5 维评分条逐步填充动画 → 师傅 B（社区匠人，91.5分）胜出 → 返回查看师傅名片更新
邻里互助：切换到「邻里」Tab，观看公益审核进度动画 → 点击「我也帮一单」添加认捐记录 → 进度条实时更新
切换角色：点击底部「我的」→「切换角色」→ 体验 物业端仪表盘 和 师傅端接单
四、TRAE 实践过程
开发工具与能力
使用 TRAE Work（Auto 模式）+ TRAE 对话式编程完成全部开发。
开发流程与关键步骤
第一阶段：需求分析与设计规划（使用 TRAE 头脑风暴能力）
向 TRAE 描述创意方向：社区公益水电维修平台，三方角色，AI 驱动
TRAE 帮助梳理需求：从报名时的创意提案出发，明确初赛 Demo 需要展示的核心交互流程
关键 Prompt：“帮我分析社区维修场景的痛点，设计一个包含居民、物业、维修师傅三方的公益维修平台，重点是 AI 报修、智能匹配、公益审核三个场景”
第二阶段：技术方案设计（使用 TRAE 规划能力）
与 TRAE 讨论技术选型：单文件 HTML vs 多文件项目 → 选择单文件（便于部署和体验）
确定架构：纯前端 + LocalStorage 状态管理，无需后端
设计状态结构：Store 对象管理角色、工单、师傅、认捐记录
关键 Prompt：“我要做一个纯前端的可交互 Demo，用单文件 HTML 实现，包含三方角色的完整交互流程，推荐用什么状态管理方案？”
第三阶段：核心功能开发（使用 TRAE 代码生成能力）
Task 1 — 路由与状态管理：TRAE 生成 App 路由系统和 Store 状态管理代码
实现 navigateTo(pageId) 页面切换函数
实现 LocalStorage 持久化
踩坑：最初尝试用 hash 路由，但在单文件内联 JS 中实现复杂，改为简单的显示/隐藏 class 切换
Task 2 — 居民端报修流程：TRAE 生成完整的报修表单交互
维修类型网格选择（点击高亮）
拍照上传模拟（点击后变更状态）
AI 加载动画（setTimeout 模拟 2 秒分析过程）
踩坑：费用预估需要根据用户身份动态计算，最初硬编码，后来改为 Store 中 user 对象驱动，自动判断长者身份显示"免费"
Task 3 — AI 匹配面板：TRAE 生成 5 维评分可视化
两位师傅对比卡片
评分条逐步填充动画（用 setInterval 实现每 300ms 填充一格）
踩坑：动画时序控制复杂，最初用 CSS animation，但无法精确控制每一步的触发时机。改为 JS 控制 width 属性，配合 setInterval，实现可控的逐步填充效果
Task 4 — 邻里帮一单交互：TRAE 生成动态认捐列表
点击"我也帮一单"按钮，动态添加认捐记录
进度条实时更新（当前认捐数 / 目标数）
踩坑：进度条在满额后需要显示"已筹齐"状态，且按钮需要禁用。通过 Store.donations.length 驱动 UI 更新解决
Task 5 — 物业端仪表盘：TRAE 生成数据可视化
KPI 卡片（总工单、响应率、满意度、公益支出）
CSS 柱状图（用 div + height 百分比实现，无需图表库）
工单状态筛选（全部/待派/进行中/已完成）
踩坑：柱状图用 Canvas 太重，改为纯 CSS div，用 inline style 的 height 百分比实现，轻量且效果好
Task 6 — 适老化模式：TRAE 生成大字版极简界面
24px+ 字体、3 个大按钮（接单/导航/联系）
高对比度配色（黑底白字）
踩坑：切换适老模式时需要全局字体变更，最初尝试改 body font-size，但影响布局。改为给适老页面单独设置 font-size 和 padding，避免影响其他页面
第四阶段：调试与优化
使用 TRAE 对话式调试，修复页面切换时的状态同步问题
优化动画性能，减少重排重绘
添加按钮点击反馈（scale(0.97)）
开发关键步骤截图
（请在发帖时插入以下截图，不少于 3 张）
Session 用途 Session ID
1
1523253688678891:4e2740c9ca564f167818abeedfc928c7_6a326503396a022b536530fe.6a326fa7f4ff557251f7d202.6a326fa6f53fb1af37fba373:TRAE Work CN.0.1.34.no_sid.no_ppe.T(2026/6/17 18:10:53)
2
1523253688678891:b16ab6f370f71303d7db144ebcda8cbe_6a326503396a022b536530fe.6a3353c138203759cbac2532.6a3353c0d2aa268a728ae3ba:TRAE Work CN.0.1.34.no_sid.no_ppe.T(2026/6/18 10:13:04)
3
4
1523253688678891:9ec3273f0d94acc536aefa4d8842f4d6_6a326503396a022b536530fe.6a57346622b330bd54c91e49.6a5734659307a61cdacce0ab:TRAE Work CN.0.1.34.no_sid.no_ppe.T(2026/7/15 15:48:06)
5
【1523253688678891:400bc28578d1026ba8660871d1d5d46e_6a326503396a022b536530fe.6a573c7422b330bd54c91f11.6a573c73e56da0dade265a03:TRAE Work CN.0.1.34.no_sid.no_ppe.T(2026/7/15 16:06:26)
报名帖链接： 【社会服务】【社会公益】灯火万家——社区公益水电维修平台 - TRAE AI 创造力大赛 / 【大赛报名专区】 - TRAE 官方中文社区
开发心得与踩坑总结
单文件架构的取舍：最初考虑用 React/Vue 框架，但考虑到初赛评审需要"下载即用"的体验，最终选择单文件 HTML。好处是零依赖、零配置，缺点是代码量大（1200+ 行）。通过模块化的 JS 对象（Store、App、Render）来组织代码，保持可维护性。
状态管理的简化：没有使用 Redux/Vuex，而是用简单的 Store 对象 + LocalStorage。核心洞察：Demo 场景有限，不需要复杂的状态机，一个扁平化的状态对象足够。
动画性能优化：评分条动画最初用 CSS transition，但无法精确控制多步动画的时序。改为 JS 控制，虽然代码多了一些，但交互体验更可控。
移动端适配：使用 max-width: 430px + 居中布局，模拟手机体验。在桌面浏览器上也能完美展示，评审无论在电脑还是手机上都能体验。
OneUI 设计系统驱动：UI 采用 TRAE Design 模式下的 OneUI 设计系统，统一使用 Space Grotesk（标题）/ Inter（正文）/ JetBrains Mono（数据）三字体体系，主色为 #0A84FF（蓝）+ #00E5FF（霓虹青）+ #7B55FF（紫），配合渐变光晕（gradient-aurora）、毛玻璃（backdrop-filter）和多层投影系统（shadow-1 至 shadow-5），在保持适老化可读性的同时，赋予产品未来感与科技专业感。
TRAE 协作效率：单文件 1400+ 行代码如果纯手工编写维护极易出错，但通过 TRAE 的 Store 对象规划和局部代码重构能力，整个开发周期缩短了约 70%。AI 辅助完成了从设计系统 token 提取、CSS 变量映射、组件样式生成到交互动画实现的全链路工作。
【结尾】 灯火万家——让每一盏灯背后，都有温暖的守护。这个 Demo 不追求完美，但每一个交互都来自真实的社区观察。从报名到初赛，从创意提案到可交互应用，每一步都在 TRAE 的辅助下完成。技术有温度，社区有灯火。
denghuwanjia-app demo.zip (44.5 KB)
