热卖商品页 — 设计规范

最后更新：2026-05-27 | 页面：https://sieta.vip/sietadata/hotsale.html | 手机版：hotsale_mobile.html

页面概述

动态日期热卖商品排行页。API 从 sales_ledger 拉取指定日期范围内售出 ≥3 双的商品，按数量降序排列。排除 BMD 配件。

布局规格

属性	值
最大宽度	800px 居中
背景	`#FFFDF5`
容器阴影	`box-shadow: 4px 4px 0 #000`
卡片边框	`border: 4px solid #000`
字体	系统默认无衬线（非 Space Grotesk）

产品卡片布局

┌──────────────────────────────────────────┐
│ 热卖排行                    共 N 款      │ ← 黑底白字 .st-hd
├──────────────────────────────────────────┤
│ [5 双] YG753208              [图片80×80] │ ← .cd (flex, align-items:center)
│ [4 双] YG08879               [图片80×80] │
│ ...                                      │
└──────────────────────────────────────────┘

数量徽章：黄底黑字，border: 3px solid #000，box-shadow: 3px 3px 0 #000
货号：18px 900 weight，在徽章右侧
图片：80×80，border: 1px solid #000，点击 lightbox 放大
不显示品牌名
所有产品在一个 .st 容器内（不要用 grid 多卡片——box-shadow 会累积）

日期选择器

控件排列

[年] [月] [日] → [年] [月] [日]    [本周] [本月] [REFRESH]
                                    ↑黄色   ↑黄色   ↑紫色

按钮右对齐（.spacer{flex:1} 占位）
控件：28px 高，2px 边框

日期联动

年下拉变化 → 重建月（选第一个月）→ 重建日（选第一天）
月下拉变化 → 重建日（选第一天）
起止日期完全独立，不做联动同步
无数据日期不可选（下拉框只列 availableDates 中存在的日期）

默认进入

条件	默认范围
周一或周二打开	上周一 ~ 上周日
周三~周日打开	本周一 ~ 昨天

end 日期 capped 到 D[D.length-1]（当天 22:30 pipeline 未跑时回退）。

快捷按钮

按钮	颜色	行为
本周	黄 `#FFD93D`	本周一 ~ 昨天（capped）
本月	黄 `#FFD93D`	本月 1 日 ~ 昨天（capped）
REFRESH	紫 `#C4B5FD`	重新查询当前日期范围

API

`GET /api/sietadata/hot-products`

参数	说明
`start_date`	起始日期 YYYY-MM-DD
`end_date`	结束日期 YYYY-MM-DD
`min_qty`	最低销量门槛，默认 3

SQL：

SELECT s.货号 as code, SUM(s.数量) as qty, COALESCE(p.品牌, '') as brand
FROM sales_ledger s LEFT JOIN product p ON s.货号 = p.货号
WHERE s.日期 BETWEEN ? AND ? AND s.数量 > 0 AND s.货号 NOT LIKE '%BMD%'
GROUP BY s.货号 HAVING SUM(s.数量) >= ?
ORDER BY qty DESC

`GET /api/sietadata/available-dates`

返回 {sales: [...], inventory: [...]}。⚠️ JS 必须读 d.sales，不是 d.dates。

踩坑记录

1. API 字段名陷阱（5 次踩坑）

API 返回 {sales: [...], inventory: [...]}，不是 {dates: [...]}
错误：d.dates || [] → 永远空数组
正确：d.sales || []

2. `new Date()` 时区陷阱（4 次踩坑）

绝对不要用 new Date() 计算日期然后 toISOString()
toISOString() 返回 UTC 时间，可能跨天
正确做法：直接用 API 日期字符串做 filter/indexOf/slice

3. Grid 多卡片阴影累积

每个 .st 卡片有 4px 阴影
80+ 产品 × 4px = 视觉上阴影不断叠加
修复：所有产品放一个 .st 容器内，只有一个阴影

4. 下拉框联动残留

onchange handler 用 addEventListener 会重复绑定
修复：用 onchange = function(){} 直接赋值，每次覆盖

5. 浏览器缓存 JS

动态 JS 修改后用户仍见旧版
修复：<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">

6. BMD 配件排除

BMD 品牌在 product 表中不存在（货号=BMD，品牌=其他）
用品牌过滤无效 → 改用 s.货号 NOT LIKE '%BMD%'

手机版

hotsale_mobile.html — 全宽满屏布局，无 max-width 限制。CSS/JS 逻辑相同。用于飞书周报发送链接。

部署文件

文件	路径
页面	`/var/www/sieta/sietadata/hotsale.html`
手机版	`/var/www/sieta/sietadata/hotsale_mobile.html`
API	`/home/ubuntu/admin-auth-server.py` → `/api/sietadata/hot-products`