商品利润计算器（React + Vite）

一个基于 React Hooks 的商品利润计算器。支持单次计算（展示完整公式与步骤）与批量表格计算，移动端与桌面端自适应布局。

功能特性

• 输入项（6 个）：中标价、底价、费用%、配送费率%、利润分配比例1%、利润分配比例2%
• 计算结果：毛利、毛利分配1、毛利分配2、净利、毛利比（百分比，保留2位小数）
• 计算过程可视化：逐步展示公式、带入数值及每一步结果，小数点后保留4位（四舍五入）
• 批量计算表格：
  • 表头固定6列输入项
  • 点击“计算表格”自动生成结果列：毛利、毛利分配1、毛利分配2、净利、毛利比
  • 支持新增/删除行与行内编辑
• 技术栈：Vite + React 18（仅使用原生 CSS，无复杂 UI 框架）

运行环境

• Node.js ≥ 18

快速开始

# 安装依赖
npm install
# 启动开发服务（默认 http://localhost:5173 ）
npm run dev

构建与预览

# 生产构建
npm run build
# 本地预览生产构建
npm run preview

目录结构

.
├─ index.html              # Vite HTML 入口
├─ package.json
├─ vite.config.js
├─ src/
│  ├─ main.jsx             # 应用入口
│  ├─ App.jsx              # 主要页面与逻辑（含表格）
│  └─ styles.css           # 样式（含表格紧凑风格）
└─ target.md               # 需求/公式说明

公式说明（当前生效）

• 设：

  • P = 中标价
  • L = 底价
  • T = 费用（百分数，例如 5 表示 5%）
  • D = 配送费率（百分数）
  • R1 = 利润分配比例1（百分数）
  • R2 = 利润分配比例2（百分数）

• 计算：

[ \text{毛利} = \big(P \times (1 - T) - L\big) \times (1 - D) ]

[ \text{毛利分配1} = \text{毛利} \times R1 \quad\quad \text{毛利分配2} = \text{毛利} \times R2 ]

[ \text{净利} = \text{毛利} - \text{毛利分配1} - \text{毛利分配2} ]

[ \text{毛利比} = \frac{\text{毛利}}{P} \quad (以百分比显示，保留2位小数) ]

• 百分数输入在代码中会自动换算为小数（例如 5 → 0.05）。
• 显示与步骤中数值按“四舍五入到小数点后4位”（毛利比显示为百分比，保留2位）。

示例

• 输入：P=3.00，L=1.85，T=5，D=3，R1=10，R2=20
• 结果：
  • 毛利：0.9700
  • 毛利分配1：0.0970
  • 毛利分配2：0.1940
  • 净利：0.6790
  • 毛利比：32.33%