70 lines
3.3 KiB
Markdown
70 lines
3.3 KiB
Markdown
## 目标
|
||
- 顶部菜单切换“搜索/导入”，各模块彼此独立、互不干扰
|
||
- 统一白色背景与高对比度主题，在暗黑系统模式下也能清晰可见
|
||
- 强化搜索结果的可读性，突出名称、卖价、进价、条码等关键字段
|
||
|
||
## 导航与布局
|
||
- 顶部加入切换菜单（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` 截图与使用说明 |