49 lines
1.9 KiB
Markdown
49 lines
1.9 KiB
Markdown
# 页面设计: 搜索结果 (Search Result)
|
|
|
|
> **路由**: `/search?keyword=abc`
|
|
> **布局**: `LayoutMain`
|
|
|
|
## 1. 页面结构 (Structure)
|
|
|
|
```text
|
|
[ Search Bar (Persistent in Header) ]
|
|
------------------------------------------------
|
|
[ Filter Tabs (All / Article / User / Tag) ]
|
|
------------------------------------------------
|
|
| | |
|
|
| Result List | Related / Hot |
|
|
| (70%) | (30%) |
|
|
| | |
|
|
```
|
|
|
|
## 2. 详细设计 (Detailed Specs)
|
|
|
|
### 2.1 顶部筛选区 (Filter Header)
|
|
- **搜索反馈**: "找到约 **120** 个与 'AI' 相关的结果"。
|
|
- **Tab 分类**:
|
|
- **综合**: 混合展示内容、用户、标签。
|
|
- **文章/内容**: 纯内容列表。
|
|
- **用户/租户**: 匹配的创作者。
|
|
- **标签**: 匹配的 Tags。
|
|
- **高级筛选 (Dropdown)**:
|
|
- **时间**: 不限 / 一天内 / 一周内 / 一月内。
|
|
- **排序**: 相关度 (默认) / 最新发布 / 最多浏览。
|
|
|
|
### 2.2 结果列表区 (Result List - Left)
|
|
- **内容卡片**:
|
|
- 标题中匹配的 **关键字高亮** (如红色或加粗)。
|
|
- 展示摘要、封面图（如有）、元数据。
|
|
- **用户卡片** (在综合搜索中穿插或独立 Tab):
|
|
- 横向布局：头像 | 名称 + 简介 | [关注] 按钮。
|
|
- **无结果状态 (Empty State)**:
|
|
- 插画提示 "未找到相关内容"。
|
|
- 建议: "尝试简化关键词" 或 "看看热门推荐"。
|
|
|
|
### 2.3 右侧辅助区 (Right Sidebar)
|
|
- **热门搜索 (Hot Search)**: 词云或列表 (1. DeepSeek, 2. AI 绘画...)。
|
|
- **搜索历史 (Search History)**: (仅登录且开启记录时显示) 显示最近 5 条，支持删除。
|
|
|
|
## 3. 交互
|
|
- **输入框联动**: 页面顶部的全局搜索框内容应与 URL `keyword` 参数保持同步。
|
|
- **Enter 键**: 触发搜索跳转。
|