freedakgmail
3d89baf65d
- 后端: 新增 cost-analysis.ts 路由，含31个分析端点和7个调整管理端点 - 前端: 新增 CostAnalysisPage 主页面 + 10个Tab组件 - Tab1-9: 成本总览/菜品盈利/原料差异/BOM配方/供应链/包装耗材/数据质量/门店成本/可视化探索 - Tab10: 调整管理(诊断快照+调整记录+效果验证) - 修复: 毛利率和损耗率从简单平均改为加权计算 - 新增: Tabs组件、侧边栏菜单项、路由注册 - 新增: 3张数据库表(诊断快照/调整记录/验证结果)
526 lines
36 KiB
Markdown
526 lines
36 KiB
Markdown
# 菜品成本分析前端展现方案
|
||
|
||
> 基于现有架构：侧边栏分组（Layout.tsx） + 路由（App.tsx） + 页面组件（pages/） + 折叠面板（CollapsibleSection） + 数据表格（DataTable） + 图表（recharts）
|
||
|
||
---
|
||
|
||
## 整体架构
|
||
|
||
### 新增页面路由
|
||
|
||
在 `App.tsx` 中新增1个页面路由，在 `Layout.tsx` 中新增1个菜单项：
|
||
|
||
```
|
||
/cost-analysis → CostAnalysisPage → "菜品成本分析" → 业务模块组
|
||
```
|
||
|
||
### 页面结构
|
||
|
||
采用**单页面 + Tab切换**的方式，避免新增过多路由。页面顶部为Tab栏，每个Tab对应一个分析维度：
|
||
|
||
```
|
||
菜品成本分析
|
||
├── Tab: 成本总览 → 模块1 + 模块10 + 模块25
|
||
├── Tab: 菜品盈利分析 → 模块3 + 模块12
|
||
├── Tab: 原料差异分析 → 模块2 + 模块11
|
||
├── Tab: BOM与配方 → 模块4 + 模块23 + 模块20 + 模块21 + 模块22
|
||
├── Tab: 供应链与精简 → 模块5 + 模块6 + 模块7 + 模块13
|
||
├── Tab: 包装耗材 → 模块8
|
||
├── Tab: 数据质量 → 模块9 + 模块14
|
||
├── Tab: 门店成本 → 模块15 + 模块16 + 模块17 + 模块26
|
||
└── Tab: 可视化探索 → 模块24 + 散点图 + 热力图
|
||
```
|
||
|
||
---
|
||
|
||
## 各Tab详细设计
|
||
|
||
### Tab 1: 成本总览
|
||
|
||
**包含模块**：模块1（SKU理论与实际成本）、模块10（品类成本对比）、模块25（毛利率偏差分布）
|
||
|
||
**布局**：
|
||
|
||
```
|
||
┌─────────────────────────────────────────────────────────┐
|
||
│ 成本总览 │
|
||
├─────────────────────────────────────────────────────────┤
|
||
│ [MetricCard] 理论成本 [MetricCard] 实际成本 │
|
||
│ [MetricCard] 成本差异 [MetricCard] 差异率 │
|
||
│ [MetricCard] 平均理论毛利率 [MetricCard] 平均实际毛利率 │
|
||
│ [MetricCard] 超理论菜品数 [MetricCard] 低毛利菜品数 │
|
||
├─────────────────────────────────────────────────────────┤
|
||
│ [CollapsibleSection] 品类成本对比（柱状图 + 表格） │
|
||
│ ┌──────────────────────────────────────────┐ │
|
||
│ │ BarChart: X轴=品类, Y轴=毛利率 │ │
|
||
│ │ 双柱: 理论毛利率 vs 实际毛利率 │ │
|
||
│ └──────────────────────────────────────────┘ │
|
||
│ DataTable: 品类 | 菜品数 | 理论毛利率 | 实际毛利率 │
|
||
│ | 销售额 | 成本差异 | 成本率 │
|
||
├─────────────────────────────────────────────────────────┤
|
||
│ [CollapsibleSection] 毛利率偏差分布（饼图 + 表格） │
|
||
│ ┌──────────────────────────────────────────┐ │
|
||
│ │ PieChart: 严重偏低/偏低/略低/略高/高于理论 │ │
|
||
│ └──────────────────────────────────────────┘ │
|
||
│ DataTable: 偏差区间 | 菜品数 | 占比 │
|
||
├─────────────────────────────────────────────────────────┤
|
||
│ [CollapsibleSection] 成本差异TOP榜（表格，默认展开） │
|
||
│ DataTable: 菜品 | 品类 | 理论毛利率 | 实际毛利率 │
|
||
│ | 成本差异 | 成本分层 | 销售额 │
|
||
│ 成本分层用 Badge 着色: 正常(绿) / 关注(黄) / 整改(橙) │
|
||
│ / 紧急(红) / 数据异常(灰) │
|
||
└─────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
**API端点**：
|
||
- `GET /api/cost-analysis/overview` → 总览指标
|
||
- `GET /api/cost-analysis/category-comparison` → 品类对比
|
||
- `GET /api/cost-analysis/margin-deviation` → 偏差分布
|
||
- `GET /api/cost-analysis/variance-top?limit=50&order=desc` → 成本差异TOP
|
||
|
||
---
|
||
|
||
### Tab 2: 菜品盈利分析
|
||
|
||
**包含模块**：模块3（菜品盈利与菜单工程）、模块12（菜品定价合理性）
|
||
|
||
**布局**：
|
||
|
||
```
|
||
┌─────────────────────────────────────────────────────────┐
|
||
│ 菜品盈利分析 │
|
||
├─────────────────────────────────────────────────────────┤
|
||
│ [CollapsibleSection] 菜单工程矩阵（四象限图） │
|
||
│ ┌──────────────────────────────────────────┐ │
|
||
│ │ ScatterChart: │ │
|
||
│ │ X轴=销量, Y轴=实际毛利率 │ │
|
||
│ │ 气泡大小=销售额, 颜色=品类 │ │
|
||
│ │ 四象限: 明星/高销低利/低销高利/低销低利 │ │
|
||
│ │ 点击气泡 → 弹出菜品详情 │ │
|
||
│ └──────────────────────────────────────────┘ │
|
||
│ 图例: 🟢明星盈利 🟡高销低利 🔵低销高利 🔴低销低利 │
|
||
│ ⚪数据异常 │
|
||
├─────────────────────────────────────────────────────────┤
|
||
│ [CollapsibleSection] 菜品盈利明细（表格） │
|
||
│ DataTable: 菜品 | 品类 | 销量 | 销售额 | 理论毛利 │
|
||
│ | 实际毛利 | 毛利贡献度 | 菜单类型(Badge) │
|
||
│ 支持排序: 按销售额/毛利/毛利率 │
|
||
│ 支持筛选: 品类下拉 / 菜单类型下拉 │
|
||
│ Pagination │
|
||
├─────────────────────────────────────────────────────────┤
|
||
│ [CollapsibleSection] 定价合理性（毛利率分布图） │
|
||
│ ┌──────────────────────────────────────────┐ │
|
||
│ │ BarChart: X轴=毛利率区间, Y轴=菜品数 │ │
|
||
│ │ 区间: <0% / 0-30% / 30-50% / 50-70% │ │
|
||
│ │ / 70-90% / >90% │ │
|
||
│ └──────────────────────────────────────────┘ │
|
||
│ DataTable: 低毛利菜品清单（理论<50%且销售额>1000） │
|
||
│ 菜品 | 售价 | 理论成本 | 理论毛利率 | 实际毛利率 │
|
||
│ | 定价偏离度 | 建议 │
|
||
└─────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
**API端点**：
|
||
- `GET /api/cost-analysis/menu-engineering` → 菜单工程矩阵数据
|
||
- `GET /api/cost-analysis/profitability?page=1&category=&type=` → 盈利明细
|
||
- `GET /api/cost-analysis/pricing?threshold=50` → 定价合理性
|
||
|
||
---
|
||
|
||
### Tab 3: 原料差异分析
|
||
|
||
**包含模块**：模块2（SKU原料差异贡献）、模块11（物料损耗率分布）
|
||
|
||
**布局**：
|
||
|
||
```
|
||
┌─────────────────────────────────────────────────────────┐
|
||
│ 原料差异分析 │
|
||
├─────────────────────────────────────────────────────────┤
|
||
│ [搜索框] 输入菜品名称 → 查看该菜品的原料差异分解 │
|
||
├─────────────────────────────────────────────────────────┤
|
||
│ [CollapsibleSection] 菜品原料差异分解（选中菜品后展示） │
|
||
│ ┌──────────────────────────────────────────┐ │
|
||
│ │ 水平BarChart: 原料名 vs 金额差异 │ │
|
||
│ │ 红色=超耗, 绿色=节约 │ │
|
||
│ └──────────────────────────────────────────┘ │
|
||
│ DataTable: 原料 | 理论用量 | 实际用量 | 数量差异 │
|
||
│ | 损耗率 | 金额差异 | 差异贡献度 | 原因分类 │
|
||
│ 原因分类(Badge): 份量超标/替代原料/分摊遗漏/门店错位 │
|
||
├─────────────────────────────────────────────────────────┤
|
||
│ [CollapsibleSection] 物料损耗率分布（饼图） │
|
||
│ ┌──────────────────────────────────────────┐ │
|
||
│ │ PieChart: 无损耗/轻微/轻度/中度/严重/极重/正向│ │
|
||
│ └──────────────────────────────────────────┘ │
|
||
│ DataTable: 损耗区间 | 明细数 | 占比 │
|
||
├─────────────────────────────────────────────────────────┤
|
||
│ [CollapsibleSection] 超耗物料TOP榜（表格） │
|
||
│ DataTable: 物料 | 类型(原料/半成品) | 涉及菜品数 │
|
||
│ | 总损耗量 | 平均损耗率 | 最大损耗率 │
|
||
│ 支持排序: 按损耗量/损耗率 │
|
||
│ Pagination │
|
||
├─────────────────────────────────────────────────────────┤
|
||
│ [CollapsibleSection] 物料类型损耗对比（柱状图） │
|
||
│ ┌──────────────────────────────────────────┐ │
|
||
│ │ BarChart: 原材料 vs 半成品 │ │
|
||
│ │ 双柱: 平均损耗率 | 涉及菜品数 │ │
|
||
│ └──────────────────────────────────────────┘ │
|
||
└─────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
**API端点**：
|
||
- `GET /api/cost-analysis/material-variance?dish_code=66920` → 菜品原料差异分解
|
||
- `GET /api/cost-analysis/loss-distribution` → 损耗率分布
|
||
- `GET /api/cost-analysis/material-loss-top?limit=50&order=desc` → 超耗物料TOP
|
||
- `GET /api/cost-analysis/material-type-loss` → 物料类型损耗对比
|
||
|
||
---
|
||
|
||
### Tab 4: BOM与配方
|
||
|
||
**包含模块**：模块4（BOM复杂度）、模块23（菜品物料构成）、模块20（BOM覆盖率）、模块21（适用门店覆盖）、模块22（高损耗BOM预警）
|
||
|
||
**布局**：
|
||
|
||
```
|
||
┌─────────────────────────────────────────────────────────┐
|
||
│ BOM与配方 │
|
||
├─────────────────────────────────────────────────────────┤
|
||
│ [MetricCard] BOM覆盖率 [MetricCard] 有BOM的SKU数 │
|
||
│ [MetricCard] 缺BOM的SKU [MetricCard] 平均物料数/SKU │
|
||
│ [MetricCard] 高损耗BOM数 [MetricCard] 极端损耗BOM数 │
|
||
├─────────────────────────────────────────────────────────┤
|
||
│ [CollapsibleSection] BOM复杂度分布（柱状图 + 表格） │
|
||
│ ┌──────────────────────────────────────────┐ │
|
||
│ │ BarChart: X轴=物料数区间, Y轴=SKU数 │ │
|
||
│ │ ≤5 / 6-10 / 11-15 / 16-20 / >20 │ │
|
||
│ └──────────────────────────────────────────┘ │
|
||
│ DataTable: SKU编码 | 菜品名 | 品类 | 原料数 │
|
||
│ | 半成品数 | 独有原料数 | 单位数 │
|
||
│ | 高损耗原料数 | 复杂度评分 | 复杂度等级 │
|
||
│ 复杂度等级(Badge): 低(绿) / 正常(蓝) / 较复杂(橙) │
|
||
│ / 重点评审(红) │
|
||
│ Pagination │
|
||
├─────────────────────────────────────────────────────────┤
|
||
│ [CollapsibleSection] 高损耗BOM预警（表格，默认展开） │
|
||
│ DataTable: 菜品 | 物料 | 损耗率 | 出成率 | 标准毛用量 │
|
||
│ | 标准净用量 | 单位 | 预警级别(Badge) │
|
||
│ 预警级别: >20%(黄) / >50%(橙) / >100%(红) │
|
||
├─────────────────────────────────────────────────────────┤
|
||
│ [CollapsibleSection] 缺BOM的SKU清单（表格） │
|
||
│ DataTable: SKU编码 | 菜品名 | 品类 | 销售额 | 销量 │
|
||
│ 按销售额降序，优先补齐高销量SKU的BOM │
|
||
├─────────────────────────────────────────────────────────┤
|
||
│ [CollapsibleSection] 菜品物料构成（点击菜品展开详情） │
|
||
│ 选中菜品后展示: │
|
||
│ DataTable: 物料 | 类型 | 标准用量 | 标准金额 | 成本占比 │
|
||
│ | 损耗率 | 出成率 │
|
||
│ 饼图: 物料成本占比 │
|
||
└─────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
**API端点**：
|
||
- `GET /api/cost-analysis/bom-overview` → BOM总览指标
|
||
- `GET /api/cost-analysis/bom-complexity?page=1` → 复杂度分布
|
||
- `GET /api/cost-analysis/bom-high-loss?threshold=20` → 高损耗BOM预警
|
||
- `GET /api/cost-analysis/bom-missing?page=1` → 缺BOM的SKU清单
|
||
- `GET /api/cost-analysis/bom-composition?sku_code=66920` → 菜品物料构成
|
||
|
||
---
|
||
|
||
### Tab 5: 供应链与精简
|
||
|
||
**包含模块**：模块5（独有原料风险）、模块6（SKU精简供应链影响）、模块7（原料共用度）、模块13（BOM驱动物料需求预测）
|
||
|
||
**布局**：
|
||
|
||
```
|
||
┌─────────────────────────────────────────────────────────┐
|
||
│ 供应链与精简 │
|
||
├─────────────────────────────────────────────────────────┤
|
||
│ [CollapsibleSection] 原料共用度网络（表格 + 图） │
|
||
│ ┌──────────────────────────────────────────┐ │
|
||
│ │ 水平BarChart: TOP20物料被引用次数 │ │
|
||
│ │ 核心原料(>50个SKU)标红, 独有原料(=1)标灰 │ │
|
||
│ └──────────────────────────────────────────┘ │
|
||
│ DataTable: 物料 | 类型 | 被引用SKU数 | 分类 │
|
||
│ 核心原料(Badge红) / 普通共用(蓝) / 独有(灰) │
|
||
├─────────────────────────────────────────────────────────┤
|
||
│ [CollapsibleSection] 独有原料风险（表格） │
|
||
│ DataTable: SKU | 菜品名 | 销售额 | 独有原料数 │
|
||
│ | 独有原料成本 | 替代品 | 风险等级(Badge) │
|
||
│ 风险等级: 高(低收入+多独有原料,红) / 中(橙) / 低(绿) │
|
||
│ 按销售额升序（低收入优先），独有原料数降序 │
|
||
├─────────────────────────────────────────────────────────┤
|
||
│ [CollapsibleSection] SKU精简模拟器（交互式） │
|
||
│ ┌──────────────────────────────────────────┐ │
|
||
│ │ [下拉] 选择要下架的SKU │ │
|
||
│ │ 或 [输入] 批量输入SKU编码 │ │
|
||
│ │ [按钮] 模拟下架影响 │ │
|
||
│ └──────────────────────────────────────────┘ │
|
||
│ 模拟结果: │
|
||
│ [MetricCard] 收入影响 [MetricCard] 毛利影响 │
|
||
│ [MetricCard] 可减少原料数 [MetricCard] 独有库存金额 │
|
||
│ [MetricCard] 仍需采购的共用原料 [MetricCard] 报损风险 │
|
||
│ DataTable: 可释放的独有原料清单 │
|
||
│ 物料 | 涉及菜品数(=1) | 库存金额 | 处置建议 │
|
||
├─────────────────────────────────────────────────────────┤
|
||
│ [CollapsibleSection] BOM驱动物料需求预测（表格） │
|
||
│ DataTable: 物料 | 类型 | 单位 | 预计需求量 │
|
||
│ | 涉及菜品数 | 需求排名 │
|
||
│ 按需求量降序，TOP50 │
|
||
│ Pagination │
|
||
└─────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
**API端点**：
|
||
- `GET /api/cost-analysis/material-sharing?limit=20` → 原料共用度
|
||
- `GET /api/cost-analysis/unique-material-risk?page=1` → 独有原料风险
|
||
- `POST /api/cost-analysis/sku-simplify-simulate` → SKU精简模拟（传入SKU编码列表）
|
||
- `GET /api/cost-analysis/material-demand?limit=50` → 物料需求预测
|
||
|
||
---
|
||
|
||
### Tab 6: 包装耗材
|
||
|
||
**包含模块**：模块8（包装及耗材成本分析）
|
||
|
||
**布局**：
|
||
|
||
```
|
||
┌─────────────────────────────────────────────────────────┐
|
||
│ 包装耗材成本 │
|
||
├─────────────────────────────────────────────────────────┤
|
||
│ [MetricCard] 包装物料种类 [MetricCard] 包装总成本 │
|
||
│ [MetricCard] 包装费用率 [MetricCard] 高损耗包装数 │
|
||
├─────────────────────────────────────────────────────────┤
|
||
│ [CollapsibleSection] 包装物料明细（表格） │
|
||
│ DataTable: 物料 | 涉及菜品数 | 每单用量 | 每单成本 │
|
||
│ | 费用率 | 损耗量 | 损耗率 | 状态(Badge) │
|
||
│ 状态: 正常(绿) / 关注(黄) / 核查(红) │
|
||
│ 支持筛选: 物料类型（餐盒/餐具/打包袋/调味包/其他） │
|
||
│ Pagination │
|
||
├─────────────────────────────────────────────────────────┤
|
||
│ [CollapsibleSection] 包装损耗TOP榜（柱状图） │
|
||
│ ┌──────────────────────────────────────────┐ │
|
||
│ │ 水平BarChart: 物料名 vs 损耗量 │ │
|
||
│ └──────────────────────────────────────────┘ │
|
||
└─────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
**API端点**：
|
||
- `GET /api/cost-analysis/packaging-overview` → 包装总览
|
||
- `GET /api/cost-analysis/packaging-detail?page=1&type=` → 包装明细
|
||
- `GET /api/cost-analysis/packaging-loss-top?limit=15` → 包装损耗TOP
|
||
|
||
---
|
||
|
||
### Tab 7: 数据质量
|
||
|
||
**包含模块**：模块9（BOM数据质量）、模块14（物料匹配率）
|
||
|
||
**布局**：
|
||
|
||
```
|
||
┌─────────────────────────────────────────────────────────┐
|
||
│ 数据质量 │
|
||
├─────────────────────────────────────────────────────────┤
|
||
│ [MetricCard] BOM覆盖率 [MetricCard] 菜品匹配率 │
|
||
│ [MetricCard] 物料匹配率 [MetricCard] 异常菜品数 │
|
||
├─────────────────────────────────────────────────────────┤
|
||
│ [CollapsibleSection] BOM数据质量检查清单（表格） │
|
||
│ DataTable: 检查项 | 异常数 | 异常率 | 状态(Badge) │
|
||
│ 检查项: │
|
||
│ - BOM缺失（168个SKU无BOM） │
|
||
│ - 零实际用量（standard_net_quantity=0） │
|
||
│ - 成本率异常（实际毛利率<0） │
|
||
│ - 理论毛利率为负 │
|
||
│ - 负数量记录 │
|
||
│ - 明细与汇总不一致 │
|
||
│ - 重复BOM记录 │
|
||
├─────────────────────────────────────────────────────────┤
|
||
│ [CollapsibleSection] 未匹配菜品清单（表格） │
|
||
│ DataTable: 菜品名 | 品类 | 销售额 | 匹配状态 │
|
||
├─────────────────────────────────────────────────────────┤
|
||
│ [CollapsibleSection] 未匹配物料清单（表格） │
|
||
│ DataTable: 物料名 | 涉及菜品数 | 损耗金额 | 匹配状态 │
|
||
└─────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
**API端点**：
|
||
- `GET /api/cost-analysis/data-quality` → 数据质量总览
|
||
- `GET /api/cost-analysis/unmatched-dishes?page=1` → 未匹配菜品
|
||
- `GET /api/cost-analysis/unmatched-materials?page=1` → 未匹配物料
|
||
|
||
---
|
||
|
||
### Tab 8: 门店成本
|
||
|
||
**包含模块**：模块15（门店成本差异分布）、模块16（门店超耗排名）、模块17（理论vs实际成本率）、模块26（门店成本分级地图）
|
||
|
||
**布局**：
|
||
|
||
```
|
||
┌─────────────────────────────────────────────────────────┐
|
||
│ 门店成本 │
|
||
├─────────────────────────────────────────────────────────┤
|
||
│ [MetricCard] 门店总数 [MetricCard] 红色门店数 │
|
||
│ [MetricCard] 橙色门店数 [MetricCard] 绿色门店数 │
|
||
│ [MetricCard] 灰色门店数 [MetricCard] 总超耗金额 │
|
||
├─────────────────────────────────────────────────────────┤
|
||
│ [CollapsibleSection] 门店成本分级地图 │
|
||
│ ┌──────────────────────────────────────────┐ │
|
||
│ │ 地图组件（复用StoreMap或现有地图） │ │
|
||
│ │ 标注: 红/橙/绿/灰 圆点 │ │
|
||
│ │ 点击 → 弹出门店成本详情 │ │
|
||
│ └──────────────────────────────────────────┘ │
|
||
│ 图例: 🔴严重超耗 🟠明显超耗 🟢基本正常 ⚪口径异常 │
|
||
├─────────────────────────────────────────────────────────┤
|
||
│ [CollapsibleSection] 门店成本差异分布（饼图） │
|
||
│ ┌──────────────────────────────────────────┐ │
|
||
│ │ PieChart: 红35 / 橙40 / 绿8 / 灰6 │ │
|
||
│ └──────────────────────────────────────────┘ │
|
||
├─────────────────────────────────────────────────────────┤
|
||
│ [CollapsibleSection] 门店超耗排名（表格，默认展开） │
|
||
│ DataTable: 门店 | 理论成本率 | 实际成本率 | 偏差 │
|
||
│ | 超耗金额 | 负库存项数 | 分级(Badge) │
|
||
│ 分级(Badge): 红色-严重超耗(红) / 橙色-明显超耗(橙) │
|
||
│ / 绿色-基本正常(绿) / 灰色-口径异常(灰) │
|
||
│ 支持排序: 按超耗金额/偏差率 │
|
||
│ Pagination │
|
||
└─────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
**API端点**：
|
||
- `GET /api/cost-analysis/store-overview` → 门店成本总览
|
||
- `GET /api/cost-analysis/store-map` → 门店地图数据（含经纬度+分级）
|
||
- `GET /api/cost-analysis/store-ranking?page=1&order=desc` → 门店超耗排名
|
||
|
||
---
|
||
|
||
### Tab 9: 可视化探索
|
||
|
||
**包含模块**：模块24（成本差异vs销量散点图）+ 自由探索
|
||
|
||
**布局**：
|
||
|
||
```
|
||
┌─────────────────────────────────────────────────────────┐
|
||
│ 可视化探索 │
|
||
├─────────────────────────────────────────────────────────┤
|
||
│ [CollapsibleSection] 成本差异 vs 销量散点图 │
|
||
│ ┌──────────────────────────────────────────┐ │
|
||
│ │ ScatterChart: │ │
|
||
│ │ X轴=销量, Y轴=成本差异额 │ │
|
||
│ │ 气泡大小=销售额, 颜色=品类 │ │
|
||
│ │ 四象限标注: │ │
|
||
│ │ 右上=高销量高差异(优先整改) │ │
|
||
│ │ 右下=高销量低差异(保持) │ │
|
||
│ │ 左上=低销量高差异(考虑下架) │ │
|
||
│ │ 左下=低销量低差异(观察) │ │
|
||
│ │ 点击气泡 → 弹出菜品详情 │ │
|
||
│ └──────────────────────────────────────────┘ │
|
||
├─────────────────────────────────────────────────────────┤
|
||
│ [CollapsibleSection] 品类成本热力图 │
|
||
│ ┌──────────────────────────────────────────┐ │
|
||
│ │ 热力图: 行=品类, 列=成本指标 │ │
|
||
│ │ 指标: 理论毛利率/实际毛利率/差异率/成本率 │ │
|
||
│ │ 颜色: 红=差, 绿=好 │ │
|
||
│ └──────────────────────────────────────────┘ │
|
||
├─────────────────────────────────────────────────────────┤
|
||
│ [筛选器] │
|
||
│ 品类下拉 | 毛利率范围滑块 | 销量范围滑块 │
|
||
│ [按钮] 应用筛选 → 更新散点图 │
|
||
└─────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
**API端点**：
|
||
- `GET /api/cost-analysis/scatter?x=sales_quantity&y=cost_variance&size=sales_amount&color=category_l1` → 散点图数据
|
||
- `GET /api/cost-analysis/category-heatmap` → 品类热力图
|
||
|
||
---
|
||
|
||
## 组件复用清单
|
||
|
||
| 组件 | 用途 | 已有 |
|
||
|------|------|------|
|
||
| `CollapsibleSection` | 折叠面板 | ✅ |
|
||
| `MetricCard` | 指标卡片 | ✅ |
|
||
| `DataTable` | 数据表格 | ✅ |
|
||
| `Pagination` | 分页 | ✅ |
|
||
| `Badge` | 状态标签 | ✅ |
|
||
| `LoadingSpinner` | 加载中 | ✅ |
|
||
| `BarChart` | 柱状图 | ✅ recharts |
|
||
| `PieChart` | 饼图 | ✅ recharts |
|
||
| `ScatterChart` | 散点图 | ✅ recharts |
|
||
| `StoreMap` | 地图 | ✅ 已有 |
|
||
| Tab切换组件 | Tab栏 | ❌ 需新建 |
|
||
| 搜索框组件 | 菜品搜索 | ❌ 用input实现 |
|
||
| 筛选器组件 | 下拉/滑块 | ❌ 用select/input实现 |
|
||
|
||
## 新增文件清单
|
||
|
||
| 文件 | 说明 |
|
||
|------|------|
|
||
| `client/src/pages/CostAnalysisPage.tsx` | 主页面（Tab容器） |
|
||
| `client/src/components/Tabs.tsx` | Tab切换组件 |
|
||
| `client/src/components/cost-analysis/OverviewTab.tsx` | Tab1: 成本总览 |
|
||
| `client/src/components/cost-analysis/ProfitabilityTab.tsx` | Tab2: 菜品盈利 |
|
||
| `client/src/components/cost-analysis/MaterialTab.tsx` | Tab3: 原料差异 |
|
||
| `client/src/components/cost-analysis/BomTab.tsx` | Tab4: BOM与配方 |
|
||
| `client/src/components/cost-analysis/SupplyTab.tsx` | Tab5: 供应链精简 |
|
||
| `client/src/components/cost-analysis/PackagingTab.tsx` | Tab6: 包装耗材 |
|
||
| `client/src/components/cost-analysis/QualityTab.tsx` | Tab7: 数据质量 |
|
||
| `client/src/components/cost-analysis/StoreTab.tsx` | Tab8: 门店成本 |
|
||
| `client/src/components/cost-analysis/ExploreTab.tsx` | Tab9: 可视化探索 |
|
||
| `server/src/routes/cost-analysis.ts` | API路由（所有端点） |
|
||
|
||
## API端点汇总
|
||
|
||
| 端点 | Tab | 说明 |
|
||
|------|-----|------|
|
||
| `GET /api/cost-analysis/overview` | 1 | 成本总览指标 |
|
||
| `GET /api/cost-analysis/category-comparison` | 1 | 品类成本对比 |
|
||
| `GET /api/cost-analysis/margin-deviation` | 1 | 毛利率偏差分布 |
|
||
| `GET /api/cost-analysis/variance-top` | 1 | 成本差异TOP榜 |
|
||
| `GET /api/cost-analysis/menu-engineering` | 2 | 菜单工程矩阵 |
|
||
| `GET /api/cost-analysis/profitability` | 2 | 菜品盈利明细 |
|
||
| `GET /api/cost-analysis/pricing` | 2 | 定价合理性 |
|
||
| `GET /api/cost-analysis/material-variance` | 3 | 菜品原料差异分解 |
|
||
| `GET /api/cost-analysis/loss-distribution` | 3 | 损耗率分布 |
|
||
| `GET /api/cost-analysis/material-loss-top` | 3 | 超耗物料TOP |
|
||
| `GET /api/cost-analysis/material-type-loss` | 3 | 物料类型损耗对比 |
|
||
| `GET /api/cost-analysis/bom-overview` | 4 | BOM总览 |
|
||
| `GET /api/cost-analysis/bom-complexity` | 4 | BOM复杂度 |
|
||
| `GET /api/cost-analysis/bom-high-loss` | 4 | 高损耗BOM预警 |
|
||
| `GET /api/cost-analysis/bom-missing` | 4 | 缺BOM的SKU |
|
||
| `GET /api/cost-analysis/bom-composition` | 4 | 菜品物料构成 |
|
||
| `GET /api/cost-analysis/material-sharing` | 5 | 原料共用度 |
|
||
| `GET /api/cost-analysis/unique-material-risk` | 5 | 独有原料风险 |
|
||
| `POST /api/cost-analysis/sku-simplify-simulate` | 5 | SKU精简模拟 |
|
||
| `GET /api/cost-analysis/material-demand` | 5 | 物料需求预测 |
|
||
| `GET /api/cost-analysis/packaging-overview` | 6 | 包装总览 |
|
||
| `GET /api/cost-analysis/packaging-detail` | 6 | 包装明细 |
|
||
| `GET /api/cost-analysis/packaging-loss-top` | 6 | 包装损耗TOP |
|
||
| `GET /api/cost-analysis/data-quality` | 7 | 数据质量总览 |
|
||
| `GET /api/cost-analysis/unmatched-dishes` | 7 | 未匹配菜品 |
|
||
| `GET /api/cost-analysis/unmatched-materials` | 7 | 未匹配物料 |
|
||
| `GET /api/cost-analysis/store-overview` | 8 | 门店成本总览 |
|
||
| `GET /api/cost-analysis/store-map` | 8 | 门店地图数据 |
|
||
| `GET /api/cost-analysis/store-ranking` | 8 | 门店超耗排名 |
|
||
| `GET /api/cost-analysis/scatter` | 9 | 散点图数据 |
|
||
| `GET /api/cost-analysis/category-heatmap` | 9 | 品类热力图 |
|
||
|
||
共 **31个API端点**，覆盖27个分析模块。
|
||
|
||
## 落地顺序
|
||
|
||
与指标体系的4批对应：
|
||
|
||
| 批次 | Tab | 优先级 | API数 |
|
||
|------|-----|--------|-------|
|
||
| 第一批 | Tab1 + Tab2 + Tab3 | 最高 | 11 |
|
||
| 第二批 | Tab4 + Tab6 + Tab7 | 高 | 10 |
|
||
| 第三批 | Tab8 | 中 | 3 |
|
||
| 第四批 | Tab5 + Tab9 | 低 | 7 |
|