Files
quyun-v2/docs/design/portal/PAGE_SEARCH.md
2025-12-25 17:40:40 +08:00

1.9 KiB

页面设计: 搜索结果 (Search Result)

路由: /search?keyword=abc 布局: LayoutMain

1. 页面结构 (Structure)

[      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 键: 触发搜索跳转。