# 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 视觉层级。