参赛项目名称
宠念 —— 它走了，但我们还能说说话；它流浪，但总有人看见；它在家，也能找到玩伴。
团队 / 作者
Bowen-Tian-0305
我做了什么
一句话：我做了一个让离世宠物用 AI 继续陪你聊天、让流浪宠物被看见并能被领养、让家养宠物找到玩伴的 H5 应用。
它不是又一个"宠物社交 App"。它解决的是三个被整个行业忽视的刚需—— 失去后的思念无处安放，流浪动物的救助信息散落各处，宠物之间的社交需求从未被满足。
核心一：彩虹桥 AI 数字分身 —— 让离世的宠物继续说话
痛点：中国每年有超过 3000 万只宠物离世。主人翻照片、对着空窝发呆、想再听它叫一声——但市场上没有任何产品管"宠物走了之后"的事。宠物殡葬只管遗体，社交平台只管活着的宠物，去世的宠物在互联网上直接消失。
我的解法：
性格即人格：建档时选的性格标签（温柔/粘人/傲娇/高冷/话痨/贪吃/胆小/好奇/霸气/慵懒/活泼/忠诚/聪明/调皮，共 14 种）直接作为 AI 角色 Prompt 的参数注入，而不是装饰性标签。一只"傲娇+贪吃"的猫和一只"温柔+粘人"的狗，对话风格完全不同。
四层对话过滤引擎（非关键词匹配，而是意图路由）：
第一层：情感感知 —— 分析用户输入情绪（悲伤/愤怒/焦虑/平静/开心），检测到"我好想你""我很难过""你在那边还好吗"等悲伤信号时，跳过所有后续层，直接进入安慰模式
第二层：场景匹配 —— 25 个预设场景（初次对话/日常问候/节日祝福/生日/纪念日/深夜emo/梦境/回忆往事/分享喜悦/告别/道歉/感恩/害怕/孤独/失眠/焦虑/好消息/烦恼/求助/日常/早安/晚安/撒娇/抱怨/吐槽），按场景匹配回复
第三层：性格筛选 —— 从匹配场景的回复池中，按性格标签二次筛选，同一句"我也想你"，温柔猫回"本喵每天都会在彩虹桥上看着你哦"，傲娇猫回"哼…才…才不是特意想你的呢！笨、笨蛋铲屎的…"
第四层：万能兜底 —— 无匹配场景时，按性格+物种生成通用回复，保证对话不中断
猫狗用语天然区分：每句回复模板内嵌物种差异逻辑。猫用"本喵/铲屎的/小鱼干/猫罐头/抓抓板"，狗用"本汪/主人/肉骨头/飞盘/遛弯"。不是后续替换，而是生成时就走不同分支。
星空纪念馆：
三层粒子系统：背景闪烁星（CSS animation 随机延迟）+ 光晕星（径向渐变 + 呼吸动画）+ 随机流星（translateX + opacity 动画，每 3-8 秒随机触发）
蜡烛呼吸灯效：box-shadow 从 0 0 16px 到 0 0 32px 来回脉动，模拟真实烛光摇曳
思念留言墙：可查看/添加留言，留言按时间倒序排列
宠物档案展示：品种、生日、在一起天数、性格标签
悼念卡片：生成可分享的纪念图，包含宠物名字、品种、性格标签、在一起天数、主人留言
这是市场上唯一一个覆盖"宠物离世后"情感陪伴场景的产品。不是冷冰冰的纪念碑，是一个会说话、有性格的 AI 数字分身。
核心二：像素手绘地图 + 流浪救助闭环 —— 让流浪被看见
痛点：中国有超过 4000 万只流浪动物。救助信息散落在微信群、朋友圈、微博，没有统一入口。想领养的人找不到动物，想救助的人不知道哪里有需要帮助的流浪动物。
我的解法：
纯手绘像素上海地图：不是调用高德/百度地图 API，而是用 CSS + DOM 纯手绘了上海核心区域——黄浦江（蓝色渐变条）、外滩建筑群（多色像素方块）、陆家嘴东方明珠（像素塔楼）、南京路（横贯线）、人民广场（绿色区块）。地图支持触摸拖拽和鼠标拖拽，可上下左右平移。
三层图层切换：
🟠 宠物层：显示附近活跃宠物（20 只 mock 数据），点击可查看宠物卡片（名字、品种、性格、主人）
🩷 流浪层：显示流浪动物标记（10 只 mock），含状态标识（待领养/领养中/已领养）
🌈 天堂层：显示已离世宠物（5 只 mock），点击可进入纪念馆或 AI 对话
三种图层可一键切换，也可显示全部
流浪标记 → 领养，完整闭环：
拍照上传流浪动物照片
填写信息（位置、品种、状态、描述）
发起领养申请
10 只真实流浪动物 mock 数据，覆盖待领养/领养中/已领养全流程
地区选择器：上海 16 个区（外滩/陆家嘴/南京路/人民广场/徐家汇/静安寺/五角场/虹桥/浦东机场/迪士尼/世纪公园/新天地/田子坊/豫园/上海火车站/上海南站），选择后地图自动滚动到对应区域
核心三：宠物交友地图 —— 让毛孩子找到玩伴
痛点：城市里的宠物大多困在楼房里，每天遛狗 20 分钟、猫一辈子不出门。主人想给宠物找玩伴，但微信群效率低、宠物公园距离远、不知道附近谁家有同品种/同体型的宠物。宠物之间的社交需求，和人类一样真实——但从未被满足。
我的解法：
基于地理位置的宠物发现：手绘像素地图上显示附近宠物，可查看名字、品种、性格、体型、主人信息，了解"附近都有谁家的毛孩子在找玩伴"
品种 + 性格匹配：不是简单的"附近宠物列表"，而是按照品种兼容性（大型犬配大型犬、小猫配小猫）和性格匹配度（活泼配活泼、温柔配温柔）推荐最佳玩伴
宠物卡片 + 一键互动：点击地图标记弹出宠物卡片，展示宠物详细信息（照片、品种、性格标签、体型、主人），可以打招呼、发起玩耍邀请
图层切换发现不同圈子：宠物图层找玩伴、流浪图层找需要帮助的动物、天堂图层缅怀离世的小伙伴
亲友圈共享：家庭成员可以共享宠物档案，一起管理宠物的社交和记录
这不是"人"的社交，是"宠物"的社交。宠物不会打字，但主人可以帮它们找到最好的朋友。
使用的工具
本项目全程使用百炼 CLI 接入通义千问大模型作为主力 AI 编程搭档。qwen-max 承担了产品方案 brainstorming（从"宠物记录"到"离世宠物 AI 陪伴 + 流浪救助 + 宠物交友"的定位跃迁）、全部代码生成（四层 AI 对话引擎 ~800 行、像素设计系统 ~670 行、200+ 品种图谱、35 条 mock 数据、三层星空动画、像素手绘上海地图、触摸拖拽、三图层切换、演示模式、SVG 头像生成器、视图路由系统等）、项目文档撰写（介绍书、提交说明、踩坑记录）、以及十余个 UI/UX 问题的排查修复。qwen-image-2.0 生成了 8 张卡通宠物头像，cosyvoice-v3-flash 生成了宠物语音 demo。此外，参考百炼 Skill 体系设计了 15 个模块的高内聚架构，并预留了 qwen-plus/qwen-turbo API 接口用于未来接入真实 AI 对话引擎，以及 Qwen-VL 多模态识别、CosyVoice 语音回复、RAG 知识库检索等百炼能力的接入计划。
效果展示
首页
搜索栏 + Banner 轮播 + 宠物卡 + 喂食器联动 + 内容推荐 + 经典像素风
首页
交友地图 —— 宠物图层（找玩伴）
像素手绘上海地图（黄浦江/外滩/陆家嘴/南京路/人民广场）+ 宠物标记 + 底部列表 + 地区选择
交友地图-宠物
交友地图 —— 流浪图层（流浪救助）
流浪动物标记 + 状态标识（待领养/领养中/已领养）+ 完整救助闭环
交友地图-流浪
交友地图 —— 天堂图层（离世缅怀）
已离世宠物标记 + 点击进入纪念馆或 AI 对话
交友地图-天堂
星空纪念馆
三层星空粒子（闪烁星 + 光晕星 + 流星）+ 蜡烛呼吸灯效 + 思念留言墙 + 悼念卡片
星空纪念馆
彩虹桥 AI 对话
四层过滤引擎 + 14 性格驱动 + 猫狗用语天然差异 + 情感安慰模式
彩虹桥AI对话
搜索页
全屏独立视图 + 热搜排行 + 10 条问答 + 实时过滤 + demo 触发入口
搜索页
项目链接（可选）
GitHub：https://github.com/Bowen-Tian-0305/chong-nian
在线 Demo：https://bowen-tian-0305.github.io/chong-nian/
踩坑记录（可选）
- 百炼生成 JS 在模板字符串中间截断
问题：使用 qwen-max 生成大段 JS 代码时，AI 在模板字符串（反引号）中间截断输出，导致 </script> 标签被错误地插入到 JS 字符串内部，整个脚本文件无法执行。排查了很久才发现是模板字符串里的 HTML 片段中的 <script> 标签被解析器误判为真正的脚本结束标签。
解决：放弃单文件生成策略，改为多文件开发（index.html + style.css + app.js + data.js + breeds.js 分离）。每次只让 AI 生成一个文件的内容，避免大段代码输出时的截断风险。同时要求 AI 在模板字符串中避免嵌套 <script> 标签，改用 DOM API 动态创建元素。
- 高德地图 API 与像素手绘地图的冲突
问题：最初尝试接入高德地图 JS API 作为地图底层，但 AMap 加载后会创建 canvas 覆盖层，渲染异常导致整个地图区域变蓝，且 AMap 的触摸事件与像素标记的点击事件冲突，标记无法正常交互。
解决：放弃高德地图依赖，改为纯 CSS + DOM 手绘像素地图。黄浦江用蓝色渐变背景，建筑用像素方块排列，陆家嘴东方明珠用像素塔楼叠加。这反而成为产品的一个亮点——像素手绘风格的地图比普通地图更有辨识度和情感温度。
- 设计"AI 味"太重
问题：初版使用了统一的奶油色 + 渐变色 + 圆角设计，看起来像千篇一律的 AI 生成 UI，没有记忆点。放在一众参赛作品中完全无法脱颖而出。
解决：全面改造为像素动漫风——引入 Google Fonts 的 Press Start 2P 像素字体、所有边框改为方角（border-radius: 0）、阴影改为块状偏移（box-shadow: 4px 4px 0）、建立 11 色复古配色系统（橙 #F7941D / 绿 #6CC24A / 蓝 #5BC0EB / 粉 #FF9ECD / 紫 #9B59B6 / 棕 #4A3728 等）。这个设计决策让产品在一众 AI 生成 UI 中有了强烈的视觉辨识度。
- 搜索功能内嵌 vs 独立页的抉择
问题：搜索框最初嵌在首页顶部，搜索结果和首页内容混在一起，用户需要手动滚动回首页才能看到其他内容，体验很差。而且搜索框在首页占据的空间很有限，无法展示热搜和推荐内容。
解决：改为全屏独立视图（pushView），通过视图路由系统切换。搜索时隐藏首页所有内容，搜索页有独立的热搜排行、问题分类、实时过滤，还有"取消"按钮返回首页。同时搜索框也是 demo 模式的触发入口，输入"demo"即可启动评委演示。
- 地图标记层级混乱
问题：像素地图标记（pixel-map-marker）的 z-index 太低，被建筑方块遮挡，导致标记不可见或无法点击。同时容器没有最小高度，在内容较少时整个地图区域塌缩。标记的点击事件还和底部列表（bottom sheet）的滑动事件冲突。
解决：标记 z-index 提升至 4，底部列表 z-index 设为 15，确保标记始终在建筑之上、列表之下。容器设置 min-height: 200px。标记 hover 时放大 1.3x 并旋转 5deg，增加可点击的视觉反馈。底部列表的触摸事件和地图拖拽事件通过 e.target.closest() 判断区分。
- 地图拖拽反复失效
问题：地图拖拽功能经历了多次迭代才稳定。初版使用 CSS transform 实现拖拽，但 transform 和 scroll 行为冲突。二版改用 scrollLeft/scrollTop，但 touchmove 事件被浏览器默认行为拦截。三版加了 e.preventDefault()，但又在某些安卓机型上导致列表无法滚动。
解决：最终方案是通过 e.target.closest('.pixel-map-marker') 判断触摸目标——如果是标记则放行默认行为（允许点击），否则 preventDefault 并手动控制 scrollLeft/scrollTop。同时监听 mousedown/mousemove/mouseup 实现桌面端鼠标拖拽，cursor 在拖拽时切换为 grabbing。
- 登录页只显示一半
问题：登录页的 view-login 容器使用了相对定位，在部分屏幕尺寸下，登录卡片被裁剪，只显示上半部分内容。
解决：将 view-login 的 position 改为 absolute，bottom 设为 0 !important，确保登录卡片始终完整显示在视口内。同时将 overflow-y 设为 auto，在小屏幕设备上允许滚动。
- 首页白色方块问题
问题：首页搜索栏和 Banner 区域出现两个白色方块，因为没有设置合适的背景色，在像素风主题下显得突兀。
解决：搜索栏背景从 var(--card) 改为 var(--gray)，边框从 2px 改为 1px，降低视觉重量。Banner 区域增加 min-height 和背景色 fallback，确保在图片加载前也有合适的占位样式。
- 产品定位的三次转向
问题：最初定位是"宠物一生陪伴记录"，功能重心在"记录"——喂食、饮水、体重、花销。但这和市场上已有的宠物管理 App 没有本质区别。后来加入社交功能，又和宠物社交 App 撞车。定位一直不清晰。
解决：在百炼多轮对话中逐渐明确——市场上所有宠物 App 都在管"活着的宠物"，但没人管"死了的宠物""流浪的宠物"和"宠物之间的社交"。这三个场景才是真正的蓝海。于是将产品重心从"记录"转向"陪伴"——离世宠物的 AI 陪伴、流浪宠物的救助陪伴、家养宠物的交友陪伴。产品名也从"尾巴日记"改为"宠念"。
- 演示模式的时序控制
问题：demo 模式需要自动执行一系列操作（建档 → 跳转地图 → 切换图层 → 打开纪念馆 → 发送消息 → 展示回复），但每个操作之间需要等待前一个完成（DOM 渲染、动画播放），如果时序不对，后续操作会失败。
解决：使用 setTimeout 链式调用控制时序，每个步骤间隔 800-1500ms，确保 DOM 更新和动画完成后再执行下一步。建档步骤使用同步操作避免异步问题，消息发送模拟了 typing 动画（逐字显示），最后展示完整 AI 回复。
参赛项目名称
宠念 —— 它走了，但我们还能说说话；它流浪，但总有人看见；它在家，也能找到玩伴。
团队 / 作者
Bowen-Tian-0305
我做了什么
一句话：我做了一个让离世宠物用 AI 继续陪你聊天、让流浪宠物被看见并能被领养、让家养宠物找到玩伴的 H5 应用。
它不是又一个"宠物社交 App"。它解决的是三个被整个行业忽视的刚需—— 失去后的思念无处安放，流浪动物的救助信息散落各处，宠物之间的社交需求从未被满足。
核心一：彩虹桥 AI 数字分身 —— 让离世的宠物继续说话
痛点：中国每年有超过 3000 万只宠物离世。主人翻照片、对着空窝发呆、想再听它叫一声——但市场上没有任何产品管"宠物走了之后"的事。宠物殡葬只管遗体，社交平台只管活着的宠物，去世的宠物在互联网上直接消失。
我的解法：
性格即人格：建档时选的性格标签（温柔/粘人/傲娇/高冷/话痨/贪吃/胆小/好奇/霸气/慵懒/活泼/忠诚/聪明/调皮，共 14 种）直接作为 AI 角色 Prompt 的参数注入，而不是装饰性标签。一只"傲娇+贪吃"的猫和一只"温柔+粘人"的狗，对话风格完全不同。
四层对话过滤引擎（非关键词匹配，而是意图路由）：
第一层：情感感知 —— 分析用户输入情绪（悲伤/愤怒/焦虑/平静/开心），检测到"我好想你""我很难过""你在那边还好吗"等悲伤信号时，跳过所有后续层，直接进入安慰模式
第二层：场景匹配 —— 25 个预设场景（初次对话/日常问候/节日祝福/生日/纪念日/深夜emo/梦境/回忆往事/分享喜悦/告别/道歉/感恩/害怕/孤独/失眠/焦虑/好消息/烦恼/求助/日常/早安/晚安/撒娇/抱怨/吐槽），按场景匹配回复
第三层：性格筛选 —— 从匹配场景的回复池中，按性格标签二次筛选，同一句"我也想你"，温柔猫回"本喵每天都会在彩虹桥上看着你哦"，傲娇猫回"哼…才…才不是特意想你的呢！笨、笨蛋铲屎的…"
第四层：万能兜底 —— 无匹配场景时，按性格+物种生成通用回复，保证对话不中断
猫狗用语天然区分：每句回复模板内嵌物种差异逻辑。猫用"本喵/铲屎的/小鱼干/猫罐头/抓抓板"，狗用"本汪/主人/肉骨头/飞盘/遛弯"。不是后续替换，而是生成时就走不同分支。
星空纪念馆：
三层粒子系统：背景闪烁星（CSS animation 随机延迟）+ 光晕星（径向渐变 + 呼吸动画）+ 随机流星（translateX + opacity 动画，每 3-8 秒随机触发）
蜡烛呼吸灯效：box-shadow 从 0 0 16px 到 0 0 32px 来回脉动，模拟真实烛光摇曳
思念留言墙：可查看/添加留言，留言按时间倒序排列
宠物档案展示：品种、生日、在一起天数、性格标签
悼念卡片：生成可分享的纪念图，包含宠物名字、品种、性格标签、在一起天数、主人留言
这是市场上唯一一个覆盖"宠物离世后"情感陪伴场景的产品。不是冷冰冰的纪念碑，是一个会说话、有性格的 AI 数字分身。
核心二：像素手绘地图 + 流浪救助闭环 —— 让流浪被看见
痛点：中国有超过 4000 万只流浪动物。救助信息散落在微信群、朋友圈、微博，没有统一入口。想领养的人找不到动物，想救助的人不知道哪里有需要帮助的流浪动物。
我的解法：
纯手绘像素上海地图：不是调用高德/百度地图 API，而是用 CSS + DOM 纯手绘了上海核心区域——黄浦江（蓝色渐变条）、外滩建筑群（多色像素方块）、陆家嘴东方明珠（像素塔楼）、南京路（横贯线）、人民广场（绿色区块）。地图支持触摸拖拽和鼠标拖拽，可上下左右平移。
三层图层切换：
🟠 宠物层：显示附近活跃宠物（20 只 mock 数据），点击可查看宠物卡片（名字、品种、性格、主人）
🩷 流浪层：显示流浪动物标记（10 只 mock），含状态标识（待领养/领养中/已领养）
🌈 天堂层：显示已离世宠物（5 只 mock），点击可进入纪念馆或 AI 对话
三种图层可一键切换，也可显示全部
流浪标记 → 领养，完整闭环：
拍照上传流浪动物照片
填写信息（位置、品种、状态、描述）
发起领养申请
10 只真实流浪动物 mock 数据，覆盖待领养/领养中/已领养全流程
地区选择器：上海 16 个区（外滩/陆家嘴/南京路/人民广场/徐家汇/静安寺/五角场/虹桥/浦东机场/迪士尼/世纪公园/新天地/田子坊/豫园/上海火车站/上海南站），选择后地图自动滚动到对应区域
核心三：宠物交友地图 —— 让毛孩子找到玩伴
痛点：城市里的宠物大多困在楼房里，每天遛狗 20 分钟、猫一辈子不出门。主人想给宠物找玩伴，但微信群效率低、宠物公园距离远、不知道附近谁家有同品种/同体型的宠物。宠物之间的社交需求，和人类一样真实——但从未被满足。
我的解法：
基于地理位置的宠物发现：手绘像素地图上显示附近宠物，可查看名字、品种、性格、体型、主人信息，了解"附近都有谁家的毛孩子在找玩伴"
品种 + 性格匹配：不是简单的"附近宠物列表"，而是按照品种兼容性（大型犬配大型犬、小猫配小猫）和性格匹配度（活泼配活泼、温柔配温柔）推荐最佳玩伴
宠物卡片 + 一键互动：点击地图标记弹出宠物卡片，展示宠物详细信息（照片、品种、性格标签、体型、主人），可以打招呼、发起玩耍邀请
图层切换发现不同圈子：宠物图层找玩伴、流浪图层找需要帮助的动物、天堂图层缅怀离世的小伙伴
亲友圈共享：家庭成员可以共享宠物档案，一起管理宠物的社交和记录
这不是"人"的社交，是"宠物"的社交。宠物不会打字，但主人可以帮它们找到最好的朋友。
使用的工具
本项目全程使用百炼 CLI 接入通义千问大模型作为主力 AI 编程搭档。qwen-max 承担了产品方案 brainstorming（从"宠物记录"到"离世宠物 AI 陪伴 + 流浪救助 + 宠物交友"的定位跃迁）、全部代码生成（四层 AI 对话引擎 ~800 行、像素设计系统 ~670 行、200+ 品种图谱、35 条 mock 数据、三层星空动画、像素手绘上海地图、触摸拖拽、三图层切换、演示模式、SVG 头像生成器、视图路由系统等）、项目文档撰写（介绍书、提交说明、踩坑记录）、以及十余个 UI/UX 问题的排查修复。qwen-image-2.0 生成了 8 张卡通宠物头像，cosyvoice-v3-flash 生成了宠物语音 demo。此外，参考百炼 Skill 体系设计了 15 个模块的高内聚架构，并预留了 qwen-plus/qwen-turbo API 接口用于未来接入真实 AI 对话引擎，以及 Qwen-VL 多模态识别、CosyVoice 语音回复、RAG 知识库检索等百炼能力的接入计划。
效果展示
首页
搜索栏 + Banner 轮播 + 宠物卡 + 喂食器联动 + 内容推荐 + 经典像素风
首页
交友地图 —— 宠物图层（找玩伴）
像素手绘上海地图（黄浦江/外滩/陆家嘴/南京路/人民广场）+ 宠物标记 + 底部列表 + 地区选择
交友地图-宠物
交友地图 —— 流浪图层（流浪救助）
流浪动物标记 + 状态标识（待领养/领养中/已领养）+ 完整救助闭环
交友地图-流浪
交友地图 —— 天堂图层（离世缅怀）
已离世宠物标记 + 点击进入纪念馆或 AI 对话
交友地图-天堂
星空纪念馆
三层星空粒子（闪烁星 + 光晕星 + 流星）+ 蜡烛呼吸灯效 + 思念留言墙 + 悼念卡片
星空纪念馆
彩虹桥 AI 对话
四层过滤引擎 + 14 性格驱动 + 猫狗用语天然差异 + 情感安慰模式
彩虹桥AI对话
搜索页
全屏独立视图 + 热搜排行 + 10 条问答 + 实时过滤 + demo 触发入口
搜索页
项目链接（可选）
GitHub：https://github.com/Bowen-Tian-0305/chong-nian
在线 Demo：https://bowen-tian-0305.github.io/chong-nian/
踩坑记录（可选）
问题：使用 qwen-max 生成大段 JS 代码时，AI 在模板字符串（反引号）中间截断输出，导致 </script> 标签被错误地插入到 JS 字符串内部，整个脚本文件无法执行。排查了很久才发现是模板字符串里的 HTML 片段中的 <script> 标签被解析器误判为真正的脚本结束标签。
解决：放弃单文件生成策略，改为多文件开发（index.html + style.css + app.js + data.js + breeds.js 分离）。每次只让 AI 生成一个文件的内容，避免大段代码输出时的截断风险。同时要求 AI 在模板字符串中避免嵌套 <script> 标签，改用 DOM API 动态创建元素。
问题：最初尝试接入高德地图 JS API 作为地图底层，但 AMap 加载后会创建 canvas 覆盖层，渲染异常导致整个地图区域变蓝，且 AMap 的触摸事件与像素标记的点击事件冲突，标记无法正常交互。
解决：放弃高德地图依赖，改为纯 CSS + DOM 手绘像素地图。黄浦江用蓝色渐变背景，建筑用像素方块排列，陆家嘴东方明珠用像素塔楼叠加。这反而成为产品的一个亮点——像素手绘风格的地图比普通地图更有辨识度和情感温度。
问题：初版使用了统一的奶油色 + 渐变色 + 圆角设计，看起来像千篇一律的 AI 生成 UI，没有记忆点。放在一众参赛作品中完全无法脱颖而出。
解决：全面改造为像素动漫风——引入 Google Fonts 的 Press Start 2P 像素字体、所有边框改为方角（border-radius: 0）、阴影改为块状偏移（box-shadow: 4px 4px 0）、建立 11 色复古配色系统（橙 #F7941D / 绿 #6CC24A / 蓝 #5BC0EB / 粉 #FF9ECD / 紫 #9B59B6 / 棕 #4A3728 等）。这个设计决策让产品在一众 AI 生成 UI 中有了强烈的视觉辨识度。
问题：搜索框最初嵌在首页顶部，搜索结果和首页内容混在一起，用户需要手动滚动回首页才能看到其他内容，体验很差。而且搜索框在首页占据的空间很有限，无法展示热搜和推荐内容。
解决：改为全屏独立视图（pushView），通过视图路由系统切换。搜索时隐藏首页所有内容，搜索页有独立的热搜排行、问题分类、实时过滤，还有"取消"按钮返回首页。同时搜索框也是 demo 模式的触发入口，输入"demo"即可启动评委演示。
问题：像素地图标记（pixel-map-marker）的 z-index 太低，被建筑方块遮挡，导致标记不可见或无法点击。同时容器没有最小高度，在内容较少时整个地图区域塌缩。标记的点击事件还和底部列表（bottom sheet）的滑动事件冲突。
解决：标记 z-index 提升至 4，底部列表 z-index 设为 15，确保标记始终在建筑之上、列表之下。容器设置 min-height: 200px。标记 hover 时放大 1.3x 并旋转 5deg，增加可点击的视觉反馈。底部列表的触摸事件和地图拖拽事件通过 e.target.closest() 判断区分。
问题：地图拖拽功能经历了多次迭代才稳定。初版使用 CSS transform 实现拖拽，但 transform 和 scroll 行为冲突。二版改用 scrollLeft/scrollTop，但 touchmove 事件被浏览器默认行为拦截。三版加了 e.preventDefault()，但又在某些安卓机型上导致列表无法滚动。
解决：最终方案是通过 e.target.closest('.pixel-map-marker') 判断触摸目标——如果是标记则放行默认行为（允许点击），否则 preventDefault 并手动控制 scrollLeft/scrollTop。同时监听 mousedown/mousemove/mouseup 实现桌面端鼠标拖拽，cursor 在拖拽时切换为 grabbing。
问题：登录页的 view-login 容器使用了相对定位，在部分屏幕尺寸下，登录卡片被裁剪，只显示上半部分内容。
解决：将 view-login 的 position 改为 absolute，bottom 设为 0 !important，确保登录卡片始终完整显示在视口内。同时将 overflow-y 设为 auto，在小屏幕设备上允许滚动。
问题：首页搜索栏和 Banner 区域出现两个白色方块，因为没有设置合适的背景色，在像素风主题下显得突兀。
解决：搜索栏背景从 var(--card) 改为 var(--gray)，边框从 2px 改为 1px，降低视觉重量。Banner 区域增加 min-height 和背景色 fallback，确保在图片加载前也有合适的占位样式。
问题：最初定位是"宠物一生陪伴记录"，功能重心在"记录"——喂食、饮水、体重、花销。但这和市场上已有的宠物管理 App 没有本质区别。后来加入社交功能，又和宠物社交 App 撞车。定位一直不清晰。
解决：在百炼多轮对话中逐渐明确——市场上所有宠物 App 都在管"活着的宠物"，但没人管"死了的宠物""流浪的宠物"和"宠物之间的社交"。这三个场景才是真正的蓝海。于是将产品重心从"记录"转向"陪伴"——离世宠物的 AI 陪伴、流浪宠物的救助陪伴、家养宠物的交友陪伴。产品名也从"尾巴日记"改为"宠念"。
问题：demo 模式需要自动执行一系列操作（建档 → 跳转地图 → 切换图层 → 打开纪念馆 → 发送消息 → 展示回复），但每个操作之间需要等待前一个完成（DOM 渲染、动画播放），如果时序不对，后续操作会失败。
解决：使用 setTimeout 链式调用控制时序，每个步骤间隔 800-1500ms，确保 DOM 更新和动画完成后再执行下一步。建档步骤使用同步操作避免异步问题，消息发送模拟了 typing 动画（逐字显示），最后展示完整 AI 回复。