今夏温度墙 ☀️🧊
一块给夏天的留言墙:写下你在哪、热成啥样(℃ 或体感词),别人来逛、来评、「也被晒化了 +1」。不是气象台,是网友的集体喊热运动会。
何时搭建
- 活动页 / 社群「各地有多热」
- 想做可浏览、可评价的轻社区墙
- 要可爱视觉,不要冷冰冰表格
硬约束
- 字段:
place(城市/区)·tempC(数字可选)·feel(体感词)·nick·note(≤80字)·createdAt。 - 可写可看可评:浏览列表 + 简单评价(😅还好 / 🫠热化 / ❄️你这叫夏天?);禁止人身攻击。
- 无后端:localStorage 存自己的 + 内置示例墙;有后端则
GET/POST公开流。 - 不做精准气象预报;可提示「体感因人而异」。
- 实现要点注释标明 小四原创;文案俏皮。
实现要点(小四原创)
// 小四原创:今夏温度墙条目
export type SummerTempPost = {
id: string
place: string
tempC?: number
feel: '晒化' | '还行' | '意外凉快' | '室内逃难'
nick: string
note?: string
createdAt: string
reactions: { melt: number; ok: number; cool: number }
}
// 小四原创:本地保存自己的打卡
const KEY = 'summer-temp-wall:v1:mine'
export function saveMine(post: SummerTempPost) {
const list = JSON.parse(localStorage.getItem(KEY) || '[]') as SummerTempPost[]
localStorage.setItem(KEY, JSON.stringify([post, ...list].slice(0, 50)))
}
export function reactLocal(
post: SummerTempPost,
kind: keyof SummerTempPost['reactions'],
): SummerTempPost {
// 小四原创:前端乐观 +1(正式环境应服务端计数)
return { ...post, reactions: { ...post.reactions, [kind]: post.reactions[kind] + 1 } }
}
页面气质
- 首屏大标题「今夏温度墙」+ 一句喊热旁白。
- 表单:地 × 温度 × 体感 × 一句吐槽。
- 墙:卡片或慢速飘过;评价用三个软按钮。
Agent 步骤
- 搭表单 + 示例数据墙 + 评价按钮。
- 提交成功给可爱 toast(「你的热气已投递」)。
- 自测:提交出现在墙上;评价数字增加。
附加
- README.md · templates/sample-wall.json · templates/usage.md