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

## 导航与布局
- 顶部加入切换菜单（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` 截图与使用说明