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（keyword 参数），并将关键词写入搜索记录顶部
• 搜索前展示 p4Kcp 结构：
  • 顶部标题：搜索
  • 搜索框：真实输入框，占位文案 搜索市场、话题、地址
  • 搜索记录卡：3 条示例记录，每行右侧带关闭图标
  • 推荐标签卡：ETH、科技股、总统大选
• 搜索后切换到 mN9t2 结构：
  • 顶部同样保留标题与搜索框
  • 下方展示结果卡片列表（图标、标题、百分比、时间）
  • 切换结果态时不会因滚动条变化导致顶部/底部导航轻微位移

扩展方式

1. 接入真实搜索记录：将 searchRecords 替换为用户历史接口数据。
2. 接入搜索行为：将搜索框改为可输入组件并绑定查询 API。
3. 标签联动搜索：点击标签触发关键词搜索并跳转到结果页。
4. 响应式优化：可按断点进一步细分字号与间距，但保持 1:1 视觉层级。