35 lines
2.2 KiB
Markdown
35 lines
2.2 KiB
Markdown
# 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 视觉层级。
|