README.md 4.26 KB
Edit Raw Blame History


前端界面优化说明
优化概述
基于参考图片，前端界面已经进行了全面优化，采用更现代、简洁的设计风格。
主要改进
1. 布局设计

✅ 简洁白色背景：去除渐变色，采用清爽的白色背景
✅ 顶部标题栏：左侧显示"Product"品牌和商品总数，右侧有折叠按钮
✅ 水平筛选布局：分类、品牌、供应商以标签形式横向排列
✅ 排序工具栏：包含多种排序选项，支持价格和时间的升降序排序
✅ 商品网格展示：响应式网格布局，自动适应屏幕宽度
✅ 底部分页功能：完整的分页导航，支持跳转到任意页

2. 用户交互
筛选功能

点击分类/品牌/供应商标签即可筛选
选中的标签会高亮显示（红色背景）
支持多选筛选
价格区间筛选（下拉选择）

排序功能

By default：默认相关度排序
By New Products：按上架时间排序（带上下箭头）


▲ 点击向上箭头：从新到旧
▼ 点击向下箭头：从旧到新

By Price：按价格排序（带上下箭头）


▲ 点击向上箭头：价格从低到高
▼ 点击向下箭头：价格从高到低

By Relevance：按相关度排序

分页功能

首页/尾页快速跳转
显示当前页码和总页数
省略号表示中间页面
显示总结果数

3. 商品卡片设计
每个商品卡片包含：


商品图片（180px高度，居中显示）
价格（红色加粗，突出显示）
MOQ（最小起订量）
箱规（每箱数量）
商品标题（最多显示2行）
分类和品牌（次要信息）
悬停效果（阴影和上浮动画）

4. 响应式设计

桌面端：5列商品网格
平板端：自动调整列数
移动端：2列商品网格
所有元素在不同屏幕尺寸下都能良好显示

技术特点
代码优化

模块化设计：功能分离，易于维护
状态管理：统一的状态对象管理所有数据
减少代码量：去除冗余代码，提高可读性
性能优化：减少DOM操作，提升渲染速度

最佳实践

语义化HTML结构
CSS Grid布局（响应式网格）
Flexbox布局（筛选和排序栏）
渐进增强的设计理念
优雅的降级处理

使用方法
启动服务

启动后端服务：
cd /home/tw/SearchEngine
bash scripts/start_backend.sh

访问前端：
打开浏览器访问：http://120.76.41.98:6002/

搜索示例

输入搜索关键词（支持中文、英文、俄文）
点击"搜索"按钮或按回车键
使用筛选标签过滤结果
使用排序按钮调整顺序
使用分页按钮浏览更多结果

API接口
前端通过以下接口与后端通信：
POST http://120.76.41.98:6002/search/

请求体：
{
  "query": "玩具",              // 搜索关键词
  "size": 20,                   // 每页结果数
  "from": 0,                    // 偏移量（分页）
  "filters": {                  // 筛选条件
    "categoryName_keyword": ["玩具"],
    "price": {"from": 50, "to": 100}
  },
  "aggregations": {...},        // 聚合配置
  "sort_by": "min_price",      // 排序字段（使用min_price而不是price）
  "sort_order": "asc"          // 排序方向
}

文件结构
frontend/
├── index.html              # 主HTML文件（新版）
├── static/
│   ├── css/
│   │   └── style.css      # 样式文件（全新设计）
│   └── js/
│       └── app.js         # JavaScript逻辑（重构）
└── README.md              # 本文件

浏览器兼容性

✅ Chrome 90+
✅ Firefox 88+
✅ Safari 14+
✅ Edge 90+

未来改进计划

[ ] 添加商品详情弹窗
[ ] 支持图片搜索
[ ] 添加搜索历史
[ ] 支持收藏功能
[ ] 添加更多筛选维度
[ ] 优化移动端体验

注意事项

确保后端服务正常运行
确保Elasticsearch服务正常
检查网络连接和CORS配置
建议使用现代浏览器访问

技术支持
如有问题，请检查：


后端服务日志
浏览器控制台错误
网络请求状态
Elasticsearch索引状态