网报小程序 — 搜索 — 产品需求说明书

1.1 界面结构

• 左侧：圆角搜索框，placeholder 显示热搜词（轮播，如「大家都在搜「中国故事」」）
• 右侧：🛒 购物车图标 + 角标数字

1.2 数据规则

字段	来源	说明
热搜词	运营配置后台（按城市+年级）	进入首页时获取，轮播展示
购物车数量	交易系统（实时接口）	已登录显示数字；未登录不显示角标
数量限制	—	后台配几个展示几个，无前端上限
排序	—	按后台配置顺序轮播
刷新 & 缓存	—	见 01 §3.2 刷新时机，不做本地缓存
热搜词轮播间隔	前端固定	3秒切换一次，循环播放
购物车角标超出	交易系统	数量超过99时展示「99+」
切换学员	交易系统	切换学员时自动刷新角标数量（与新学员购物车数据保持一致）
退出登录	—	退出登录时角标清空，不展示数字（仅显示购物车图标）

1.3 状态说明

状态	表现
已登录	显示购物车角标数字
未登录	显示图标但不显示角标数字

1.4 交互规则

操作	响应
点击搜索框	跳转搜索页面（见 二、搜索页面）
点击购物车图标	跳转购物车页面（二期/07-购物车）
页面滚动	搜索栏随头部一起吸顶

1.5 异常与兜底

— 遵循 01 §6 异常与兜底通则，无特殊处理。

1.6 配置项清单

配置项	格式	说明
热搜词	文本列表	按城市+年级配置，轮播展示

2.1 界面结构

• 独立页面（非弹窗），点击首页搜索栏后跳转进入
• 导航栏：← 返回 + 搜索输入框（带 placeholder + × 清空按钮）+ 「搜索」按钮（橙色）
• 热门搜索区：标签流式布局，最多 2 行
• 历史搜索区：标题「历史搜索」+ 右侧🗑️全部删除图标；列表每行展示关键词（纯文本，不带课程类型标签） + 右侧×单条删除
• 关键词类型：纯文字 / 带课程类型标签（线下橙/在线红/双师黄）+ 课程名
• 关键字联想区（输入态）：搜索框下方实时展示联想结果（老师联想列表 + 课程联想列表），若同时命中优先展示老师再展示课程

2.2 数据规则

① 热门搜索

字段	来源	说明
热门搜索词	运营配置后台（按城市+年级）	标签流式布局，最多 2 行
刷新	—	进入页面时拉取，不做本地缓存

② 历史搜索

字段	说明
存储	本地存储（localStorage），按账号隔离
数量	最多展示 10 条，超出自动丢弃最旧记录
排序	按搜索时间倒序，最新搜索的排在最前
展示格式	纯文本关键词，不带课程类型标签
点击行为	统一填入搜索框 + 重新发起搜索接口请求（实时最新结果，非缓存）
已下架内容处理	历史记录作为关键词保留不删除；搜索时由后端过滤已下架内容；若结果为空则跳转搜索结果页展示空状态页
切换城市/年级	搜索历史不清空（搜索历史按用户维度存储，不按城市/年级区分）

③ 关键字联想（输入时实时触发）

字段	来源	说明
联想范围	当前城市 + 当前年级的数据	—
老师联想	关键字匹配老师姓名	最多展示 10 个
课程联想	关键字匹配课程名（任意关键词，除课程类型标签外）	最多展示 10 个
排序	最近点击过的联想结果排在列表最上方	—
最近点击记录	本地存储（按账号隔离），最多保留 5 条最近点击的联想结果，前端排序后插入联想列表顶部	—
展示优先级	同时匹配老师+课程 → 先展示老师列表，再展示课程列表	—

④ 自主搜索（点击「搜索」按钮触发）

字段	来源	说明
搜索范围	当前城市 + 当前年级	同时搜索老师姓名、课程名、校区
老师匹配	精准匹配（全名）	只能通过授课老师全名匹配相关授课老师
课程匹配	模糊匹配	课程名中任意关键词（含课程类型标签）
校区匹配	模糊匹配	上课地点任意关键字
检索优先级	按 老师→课程→校区 顺序检索，命中首个类型即展示	—
优先级细则	—	a.匹配到老师全名→老师列表；b.未匹配老师但匹配课程→课程列表；c.仅匹配校区→校区列表

2.3 状态说明

状态	表现
默认态（刚进入）	展示热门搜索 + 历史搜索
联想态（输入中）	搜索框显示文字 + ×清空按钮，下方实时展示关键字联想结果（老师列表 + 课程列表）
搜索结果态	点击「搜索」后跳转对应结果页（老师列表页/课程列表页/校区列表页），非本页内展示
无历史	"历史搜索"区域不展示

2.4 交互规则

联想交互：

操作	响应
输入关键字（实时）	监测用户输入的关键字，实时进行关键字联想匹配老师/课程
点击联想的具体老师姓名	直接跳转老师详情页 + 写入历史记录（标记为联想类型）
点击联想的具体课程名	直接跳转班级列表页 + 写入历史记录（标记为联想类型）

自主搜索交互：

操作	响应
输入文字 + 点击「搜索」	触发自主搜索 → 按优先级跳转对应结果页 + 写入历史记录（标记为自主搜索类型）
搜索结果 - 老师	进入老师列表页，当前在售课程节数即为当前授课老师在售的班级数，点击具体老师 → 老师详情页
搜索结果 - 课程	进入课程列表页（班级列表），点击具体课程 → 班级列表页
搜索结果 - 校区	进入校区列表页，点击具体校区 → 校区详情页

热门搜索 & 历史搜索交互：

操作	响应
点击热门搜索标签	将该关键词填入搜索框 + 自动触发自主搜索 → 跳转搜索结果页
点击历史记录	将该关键词自动填入搜索框 + 重新发起搜索接口请求（实时获取最新结果，非缓存） → 跳转搜索结果页
点击历史记录右侧 ×	删除单条历史记录
点击🗑️全部删除	弹出确认弹窗「确认删除全部历史记录？」，确认后清空全部
点击 × 清空搜索框	清空输入内容，回到默认态
点击 ← 返回	返回首页

2.5 异常与兜底

场景	处理
热门搜索接口失败	热门搜索区域不展示，仅展示历史搜索
关键字联想无结果	联想区域不展示，保持当前页面状态
自主搜索无任何命中（老师/课程/校区均无）	跳转搜索结果页展示空状态（不在本页处理）

2.6 配置项清单

配置项	格式	说明
热门搜索词	文本列表	按城市+年级配置，最多展示 2 行

2.A 界面结构（输入态）

• 搜索框：显示已输入文字 + ×清空按钮 + 「搜索」按钮（橙色）
• 联想列表（自上而下）：老师姓名（纯文本）→ 课程（课程类型标签：线下橙 / 在线红 / 双师蓝 + 课程名）。设计稿中的校区条目不采纳（见下方 note）
• 命中关键字在联想结果中橙色高亮（如输入"美"，"范美珍"中的"美"高亮）

2.A 规则衔接

• 联想触发、范围（当前城市+当前年级）、数量上限（老师/课程各 ≤10 个）、最近点击置顶（本地 ≤5 条）等业务规则以 2.2 ③ / 2.4 既有规则为准
• 点击联想结果：老师 → 老师详情页（图「点击联想推荐-进入老师详情.png」，详见 06 §1.6）；课程 → 班级列表页（图「点击联想推荐-进入班次列表.png」，样式以 04 班次列表为准）；均写入历史记录（标记为联想类型）

2.B 结果页结构（按 2.2 ④ 优先级命中首个类型展示）

• 老师结果页（搜索词=老师全名，如"胡璇"）：老师卡片 = 圆形头像 + 姓名（橙色）+「当前在售 N 节服务」；点击卡片 → 老师详情页
• 班级结果页（搜索词=课程关键词，如"文学美育"）：复用课程列表页结构（见 二期/04-选课）——学科 Tab 行（全部 / 文学美育 / 双语文化 / 躬行实践…）+ 筛选行（学期 / 班型 / 时间 / 地点 / 筛选，已选筛选项橙色并带数字角标）+ 课程卡片（类型标签 + 班级名 + 授课老师头像组 + 「¥X 起」）；点击课程卡片 → 班级列表页
• 校区结果页（搜索词=校区关键字，如"岗顶华师"）：校区卡片 = 校区名 + 右侧距离（如"1.63km"）+ 地址 + 电话（橙色）；点击卡片 → 校区详情页
• 各结果页底部统一到底标识「——·向未来生长·——」

2.C 触发与结构

• 触发：自主搜索无任何命中（老师/课程/校区均无），见 2.5 异常与兜底
• 结构：搜索框保留当前关键词（可修改重搜）+ 中部插画 + 文案「未找到相关服务，换个关键词试试呗」
• 空状态页不提供推荐内容或跳转入口，仅支持修改关键词重新搜索 / 返回