Search-Goods/.trae/documents/优化前端查询与导入界面.md

目标

• 顶部菜单切换“搜索/导入”，各模块彼此独立、互不干扰
• 统一白色背景与高对比度主题，在暗黑系统模式下也能清晰可见
• 强化搜索结果的可读性，突出名称、卖价、进价、条码等关键字段

导航与布局

• 顶部加入切换菜单（Tabs）：“搜索”、“导入”，使用吸附（sticky）头部
• 页面分区：SearchSection 与 ImportSection，仅显示当前选中的模块
• 保持响应式：移动端单列、桌面端居中卡片布局

视觉与主题

• 全局白色背景（body{background:#fff}），系统暗黑模式下也保持白底
• 高对比文本色（近黑 #111），卡片投影与边框弱化但清晰
• 关键信息强调：
  • 名称加粗加大
  • 卖价着重色（如 #d32f2f），进价次级色（如 #455a64）
  • 条码固定等宽字体便于核对与复制
• 统一间距与行高，提升可读性

搜索体验优化

• 输入框占位提示区分条码/名称（支持回车搜索）
• 结果空态与错误态：展示“无结果/接口错误”提示
• 加载态：搜索时按钮与列表显示“加载中”
• 条码精确命中优先；名称模糊查询展示列表
• 结果操作：点击复制条码（可选增强）

结果呈现

• 结果卡片字段顺序：名称（粗体）→ 卖价（显著）→ 进价 → 条码（等宽）
• 列表模式下每条结果为独立卡片；单条命中时以详情样式展示
• 支持分页/条数限制（沿用 limit 参数，可在前端提供下拉或固定值）

导入模块

• 独立导入区域仅在“导入”Tab显示
• 显示文件名与导入进度，导入完成后展示统计（插入/更新/跳过）
• 失败提示与重试按钮；限制文件类型（xlsx/xls）
• 可选增强：拖拽上传

代码改动清单

• static/index.html
  • 添加顶部 nav Tabs（搜索/导入）
  • 拆分两个主容器：#searchSection 与 #importSection
• static/styles.css
  • 设置全局白色背景与高对比文本
  • Tabs样式（选中态、悬停态、移动端适配）
  • 结果卡片样式（标题、价格颜色、条码等宽字体、间距）
  • 空态/加载态提示样式
• static/app.js
  • 管理当前Tab状态与切换逻辑
  • 搜索渲染函数：突出关键字段、空态/错误态/加载态
  • 导入渲染函数：进度提示、结果统计
  • 小增强：复制条码、回车触发、简单节流

验收标准

• 在系统暗黑模式下仍保持白底，内容清晰可见
• 移动端下布局舒适、操作便捷；桌面端居中显示
• 搜索与导入切换明确，互不串场
• 名称、卖价、进价、条码呈现明显、易读
• 无控制台错误，接口异常时有友好提示

风险与兼容

• 中文编码与字体在部分终端显示差异；通过指定通用中文字体栈缓解
• 保持原生HTML/CSS/JS，不引入新框架，降低兼容风险
• 与现有接口契合，无需后端改动

实施步骤

1. 修改 index.html：加入导航与两个分区容器
2. 更新 styles.css：白色主题、Tabs与卡片样式、提示态
3. 更新 app.js：Tab切换、渲染优化、状态管理（空/错/载）
4. 自测：手机与桌面浏览器，验证切换、搜索与导入流程
5. 如有需要更新 README.md 截图与使用说明