SKILL.md · 谁的大一不迷茫——上政生存指南

一、项目概述

「谁的大一不迷茫——上政生存指南」是一款面向上海政法学院新生的交互式单页网页应用。以"游戏副本"的轻松叙事，将大学新生最关心的六大话题（军训、宿舍、选课、美食、期末、百团大战）组织成可浏览的干货卡片，并配以智能问答引擎和新生热搜榜，帮助新生快速获取实用信息、融入校园生活。

项目定位：校园信息聚合 + 智能问答原型，可作为新生入学礼物、校园文化传播作品或 Web 开发课程作业参赛。

交付物：
- HTML 单文件（~457KB，Tailwind 已内联，断网可用）
- Ardot 设计画布（文件 ID 715544469097504，URL https://ardot.tencent.com/file/715544469097504）
- 在线版部署链接（CloudStudio 沙箱静态托管）

二、技术栈

三、核心功能

3.1 六大生存板块

每个板块包含：图标 + 标题 + 副标题的导航卡（3×2 网格），以及展开后的详情区（干货网格卡 + 学长提醒条）。

3.2 智能问答引擎（v4）

知识库：57 条高频问答，按板块分布：

三路评分机制：
1. 关键词匹配：问题文本分词后与知识库 keywords 字段逐一比对
2. 别名匹配：每条知识库可配 aliases 别名数组，覆盖口语化称呼
3. 同义词联想：SYN 映射表将口语变体统一为标准关键词（如"挂科"→"不及格"→"补考"）

分级回复策略：
- score >= 3：直答 + 关联推荐（推荐同板块下一条相关问题）
- score >= 1：模糊直答（标注"不太确定你是不是问这个"）
- score = 0：直接引流到社区平台（不再反问澄清，避免用户体验卡死）

主观题识别：isOpinion() 函数通过关键词（OPINION_KEYS）+ 句式正则双重判断，命中后在答案末尾附加社区引流卡，建议去真实平台听取多方意见。

3.3 新生热搜榜 TOP12

按新生提问频率排序的 12 条热门问题，直接按知识库 ID 索引（不走关键词匹配），保证点击 100% 命中答案。

前三名带红/橙/黄徽章和热度值，视觉上模拟"热搜排行榜"效果。

找答案的完整路径（用户设计）：
1. 六大板块翻干货卡片
2. 翻不到 → 热搜榜点一下，直接出答案
3. 榜单也没有 → 右下角"问学长"输入框提问
4. AI 答不了 → 自动弹社区引流卡，去真实平台问真人

3.4 社区引流系统

替代早期不现实的"假真人值班"方案，改为引流到四个真实学生社区平台：

每张社区卡有「去提问 ↗」（直接跳转）和「复制链接」（兜底，防预览面板拦截跳转）两个按钮。

3.5 物品清单

基于 localStorage 的可勾选物品清单，涵盖军训装备和宿舍必带物品，勾选状态持久保存，刷新不丢失。

3.6 交互细节

• 导航吸顶 + 滚动阴影（nav-scrolled class）
• 锚点平滑滚动（scroll-behavior: smooth）
• 卡片悬浮动画（hover:-translate-y-1 + transition）
• 聊天窗气泡动画（popin keyframe）
• 自定义滚动条配色
• 浮动"问学长"按钮（右下角常驻）

四、设计规范

4.1 色彩系统

品牌主色
  brand       #12B8A6  (青绿)
  brand-dark  #0F6B7A  (深青)
  brand-deep  #0F3D3A  (墨绿)
  canvas      #F0FAF7  (米绿背景)

六大板块色
  军训-绿  #8DB255 / #EFF5E4
  宿舍-橙  #FF9F68 / #FFF1E8
  选课-蓝  #4C9EEB / #E8F2FC
  美食-红  #FF6B6B / #FFECEC
  期末-紫  #8B7CF6 / #EFEDFE
  百团-粉  #F06292 / #FDE7EF

4.2 字体

• 标题：ZCOOL KuaiLe（站酷快乐体）→ 降级 PingFang SC → Microsoft YaHei
• 正文：Noto Sans SC → 降级 PingFang SC → Microsoft YaHei

4.3 动画

五、Ardot 设计画布

• 文件 ID：715544469097504
• URL：https://ardot.tencent.com/file/715544469097504
• 画布尺寸：1440px 宽，页面框架 2:2
• 结构：导航(2:3) → Hero(2:19) → 六大板块导航(2:44，3×2网格) → 6个详情板块 → 物品清单(2:342) → 问答演示(2:395) → 页脚(2:456)

六、Markdown 气泡协议

聊天窗回复支持自定义 Markdown 标记，由 renderBubble() 函数解析渲染：

七、部署与分享

方式一：直接发文件（最保险）

• HTML 单文件（457KB），所有代码内联，无外部依赖
• 微信发送 → 对方用浏览器打开即可使用
• 断网也能用，永久有效

方式二：在线链接（最方便）

• CloudStudio 沙箱静态托管
• 链接：https://5e4cab9d73f349888163e48676da65d7.app.workbuddy.link
• 发到微信群/朋友圈，点开即用
• 管理入口：设置 - 数据管理 - 我发布的应用

方式三：长期正式托管（可选）

• 腾讯云 EdgeOne Pages / GitHub Pages
• 自定义域名，适合长期运营

八、版本迭代记录

九、经验教训

1. 同名函数覆盖是致命 bug：改函数签名后必须全局 grep 同名声明，function sendChat() 无参版覆盖了 sendChat(inputId, bodyId) 参数版，导致无限递归，界面"点了没反应"。UI 无响应优先查 JS 递归/异常，别先怪匹配算法。

2. 外链必须验证：填外链前必须先 WebFetch/WebSearch 验证域名真实存在。狐友 www.huyou.com 是不存在的域名（狐友是纯 App 平台，官方页面 fe.w.sohu.com）；知乎搜索链接的 type=content 参数会导致空结果。

3. 假功能不如诚实引流：假的在线状态、假的"去咨询"按钮，点了只弹演示文案，不如诚实地把 AI 答不了的问题引流到真实学生社区。

4. Ardot batch_edit 陷阱：SOLID 描边/填充颜色不可含 alpha 键（用顶层 opacity 代替）；复制品获得全新 ID，descendants 用原 ID 引用会失效（需先 batch_read 取新 ID）；layoutMode "WRAP" 可能被系统回退为 HORIZONTAL（改网格需拆成多个行容器）。

5. 比赛交付必须内联依赖：依赖 CDN 的页面断网即崩，交比赛前必须把 Tailwind/字体等外部依赖全部内联，确保零依赖单文件。

6. 前端问答引擎可在 Node 中测试：mock localStorage/document 后 eval 引擎代码即可跑行为测试，无需浏览器环境。

十、文件清单