xtraderClient/docs/views/Search.md

Search.vue

路径：src/views/Search.vue
路由：/search，name: search

功能用途

搜索页独立实现，按 Pencil 设计稿同文件实现双态页面：

• p4Kcp：搜索页（搜索框、搜索记录、推荐标签）
• mN9t2：搜索结果页（顶部搜索框 + 结果卡片列表）
• 页面容器改为移动端自适应宽度（width: 100%），不再固定 402px

使用方式

• 访问路由 /search
• 在搜索输入框中输入关键词后，手机键盘回车键会显示为“搜索”（enterkeyhint="search"）
• 输入停止一小段时间后会自动发起请求 GET /PmEvent/getPmEventPublic（入参 q），并将关键词写入本地搜索历史；当展示搜索结果时会隐藏搜索记录
• 文案国际化：页面文案与推荐标签使用 vue-i18n 键 searchPage.*（zh-CN / zh-TW / en / ko / ja）
• 无结果：接口成功但列表为空时展示 searchPage.noResults，不使用示例假数据；请求失败或业务错误码时展示 searchPage.errorFailed 或接口返回的 msg
• 搜索前展示 p4Kcp 结构：
  • 顶部标题、占位、记录/推荐标题等取自 i18n
  • 搜索记录卡：从本地真实读取的搜索历史（最多 10 条），每行右侧带关闭图标
  • 推荐标签卡：三项标签文案同样走 i18n
• 搜索后切换到 mN9t2 结构：
  • 顶部同样保留标题与搜索框
  • 下方展示结果卡片列表（图标、标题、百分比、时间）；无结果时展示空状态文案
  • 切换结果态时不会因滚动条变化导致顶部/底部导航轻微位移
  • 点击某条结果：mapEventItemToCard 后按与 MarketCard 相同规则跳转——多 market 进 /event/:id/markets（可带 slug query）；单 market 进 /trade-detail/:id（query 含 title、marketInfo、chance、marketId、slug 等与首页一致）

扩展方式

1. 结果跳转：已与 MarketCard 对齐；若后端字段变化可只调 mapEventItemToCard
2. 标签联动搜索：点击标签触发关键词搜索并跳转到结果页。
3. 响应式优化：可按断点进一步细分字号与间距，但保持 1:1 视觉层级。