Sieta 销售分析页面 — 设计规范

最终定稿版 2026-05-22

模板文件： - PC 版：~/sietadata/templates/sales-analysis-template.html → https://sieta.vip/sietadata/templates/sales-analysis-template.html - H5 手机版：~/sietadata/templates/sales-analysis-mobile-template.html → https://sieta.vip/sietadata/templates/sales-analysis-mobile-template.html

1. 整体风格

Neo-brutalism — 粗边框、硬阴影、粗体字、高饱和配色。

背景：#FFFDF5（米白）
卡片：白底 + border:4px solid #000 + box-shadow:6px 6px 0 #000
所有按钮/输入框：border:3px solid #000
字体：-apple-system, BlinkMacSystemFont, "Noto Sans SC", sans-serif

2. 头部

标题「Sieta 销售日报」大字粗体
日期范围显示：2026/05/20 – 2026/05/21 (2天)
底部：border-bottom:4px solid #000

控制区（按钮组）

按钮	功能
日期选择器（从/到）	选择起止日期
本月	当月1日 → 今日（clamp 到有数据的日期）
本周	当周周一 → 今日（clamp 到有数据的日期）
REFRESH	重新加载（disabled 状态=正在加载或无有效范围）

日期输入框：width:140px; height:34px
按钮统一黄色底 #FFD93D，hover 变白，active 偏移 (1,1)

3. KPI 卡片（5 卡片网格）

grid-template-columns:repeat(5,1fr)

卡片	数据来源	子文本
销售额	`k.amt`	日均 ¥xxx
销售双数	`k.qty`	日均 xxx
毛利	`k.profit`	毛利率 xx%
店铺均价	排除 STA108 后的均价	无
商场均价	仅 STA108 均价	无

KPI 数值：font-size:1.8em; font-weight:900

4. 图表区域

两列布局：grid-template-columns:1fr 1fr; gap:16px

4.1 左图 — 各店销售额（分组水平柱状图）

类型：type:'bar', indexAxis:'y'
轴：y 轴（左侧竖线）border:2px solid #000
双轴：上轴=销售额(¥)，下轴=双数
柱子样式：
销售额柱：红色 #FF6B6B
双数柱：紫色 #C4B5FD
全部：borderWidth:2, borderColor:'#000'
同一店内两柱间距：barPercentage:1.0（0 间隙，边框重叠为 4px）
店间间距：categoryPercentage:0.78
数据标签：
销售额：柱右侧 anchor:'end' align:'end'，¥ 前缀，字号 13，粗体
双数：柱内左端 anchor:'start' align:'end'，双 后缀，字号 11，粗体
双数轴 max：最大双数 × 1.5，保证金额柱始终更长
图例：底部，圆形圆角标记

4.2 右图 — 品牌销售排名（嵌套环形图）

类型：type:'doughnut', cutout:'2%'
数据结构：三层（weight 控制比例）
内饼（销售额，weight:7）：实心色块，黑色边框 3px
间隙（透明，weight:1）：不可见分隔层
外环（双数，weight:2）：半透明色（色值 + '88'），黑色边框 3px
品牌颜色映射（硬编码，按品牌名匹配）：

品牌	颜色	色值
依歌尔诗	淡紫色	`#C4B5FD`
娇娅媚妮	粉色	`#F472B6`
是她	深红色	`#DC2626`
迷人角色	绿色系	`#4ADE80`
其他	灰色	`#94A3B8`
未匹配品牌	按序取 fallback	`#FF6B6B` → `#FFD93D` → `#4361ee`

数据标签：仅前 3 个品牌显示
内饼（销售额）：anchor:'center'，字号 15，¥ 前缀
外环（双数）：anchor:'end' align:'start' offset:2，字号 12，双 后缀
图例：底部，圆形标记

5. 表格区域

5.1 营业员业绩表

容器样式：background:#fff（默认白底）
字号：全局 18px（含表头）
布局：table-layout:fixed，width:25% 四等分
列：姓名 | 双数 | 销售额 | 毛利
数字列：text-align:right，数值 rounded 为整数，不带 ¥ 前缀
表头：background:#f0f2ff，18px

5.2 每日明细表

容器：background:#FFD93D（黄色底）
结构与营业员表完全一致（同字号、同列宽、同对齐方式）
列：日期 | 双数 | 销售额 | 毛利
表头背景：黄色 #FFD93D!important（覆盖默认蓝色）

6. 数据来源

API 前缀：/api/sietadata/
available-dates → 可用日期列表
sales-range?start_date=&end_date= → 范围数据（含 stores/brands/staff/daily/kpi）
无认证（已从 auth 白名单去除）

7. 响应式

PC 版 < 800px：KPI 改为 3 列，图表改为单列，日期选择器占满宽

H5 手机版（独立页面）

单独文件 sales_analysis_mobile.html，与 PC 版同 API、同逻辑，仅 UI 差异化。

排版差异（与 PC 版对比）

模块	PC 版	H5 版
头部时间显示	标题下方显示日期范围	删除，只保留标题
日期选择器	一行，固定宽度	一行 `flex:1` 平分宽度，字号 16px 居中
按钮	与日期同行	单独一行，靠右对齐
KPI 卡片	5 列网格，上下结构	单列，左右结构（左两排文字 + 右金额大字）
图表	两列并排	单列堆叠，高度 560px
卡片阴影	`6px 6px 0`	`4px 4px 0`
表格列宽	`table-layout:fixed` 四等分	`table-layout:auto` 自适应，外套横向滚动容器
字体	大	等比缩小约 10-20%

关键 CSS 值（H5）

图表高度：560px（窄屏450px）
日期框：height:36px; font-size:16px; text-align:center; flex:1
KPI 数字：font-size:1.6em
KPI 标题：font-size:14px; 左对齐
卡片 padding：12px 14px
按钮：height:32px; font-size:11px

设计原则

保留 Neo-brutalism 风格（粗边框、硬阴影、黑边）
所有比例缩小的同时保证触控友好（按钮 32px 高度）
内容不超出屏幕宽度（表格横向滚动、输入框 flex 平分）

8. 全局常量

const C=["#FF6B6B","#C4B5FD","#FFD93D","#C4B5FD"];  // 主题色

9. CDN 依赖

Chart.js v4：js/chart.umd.min.js
chartjs-plugin-datalabels v2：js/chartjs-plugin-datalabels.min.js