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