前端计算器产品系统

1. 核心场景：“翠花 + 合伙人” 的毛坯商品交易利润分配
这是代码最直接的应用场景，从 “只限于卖毛坯，如需做工扣除，请联系技术” 的提示文本，以及利润按固定比例拆分的逻辑可知：

角色分工：存在 “翠花” 和 “合伙人” 两个固定参与方，推测前者可能负责货源、销售等核心环节，后者负责辅助环节（如资金、渠道），因此利润分配有明确倾斜（盈利时翠花分 60%、合伙人分 40%）；
商品类型：聚焦 “毛坯类” 商品（如毛坯建材、毛坯饰品、未加工原料等），这类商品通常无额外加工成本（若有加工则需单独扣减，需联系技术调整计算逻辑）；
核心需求：避免人工计算误差，快速明确 “卖一单赚多少、两人各得多少”，同时通过 “应得金额”（本钱拆分 + 利润）直观展示双方最终实际收益，减少分配争议。
2. 延伸场景：小额合伙生意的简易收益核算
代码的利润计算逻辑（区分 “盈利 / 亏损” 状态）和可视化展示（结果卡片、状态提示），可灵活适配类似的小额合伙场景，例如：

线下小摊贩合伙（如两人合伙卖水果、小吃）：输入进货价（本钱）和售价，快速拆分利润；
小额代购合伙：按 “采购成本（本钱）+ 售价” 计算，避免人工算错分成；
二手商品合伙倒卖：无需复杂财务工具，用简单界面完成收益拆分，适合非专业财务人员使用。
3. 补充场景：轻量化成本收益快速核验
除了合伙分配，对单人经营者也有辅助价值：

快速判断 “这笔交易是否赚钱”：输入本钱和售价后，通过 “盈利 / 亏损” 状态提示（如 “亏损状态，还摆烂呢？”）直观知晓交易性价比；
预估收益上限：若后续考虑加入合伙人，可提前用计算器模拟 “按 6:4 拆分时的收益”，判断合伙模式是否划算。

定制类计算器简言之，这个计算器本质是 “小额合伙生意的收益拆分工具”，核心解决 “分工明确但怕算错账” 的痛点，尤其适合毛坯类商品交易、小成本合伙项目等对财务核算要求不复杂，但需要快速、透明分账的场景。

1. Tailwind CSS 高效样式方案
自定义主题配置：通过tailwind.config扩展品牌色（primary: #3B82F6、accent: #F59E0B）和字体（sans: ['Inter', ...]），确保界面风格统一，符合 “工具类产品” 的简洁定位。
工具类复用与扩展：通过@layer utilities定义content-auto（内容可见性优化）、input-focus（输入框聚焦样式）、card-shadow（卡片阴影）等自定义工具类，减少重复 CSS 代码，提升开发效率。
响应式适配：结合clamp()函数（如标题字体text-[clamp(1.25rem,5vw,1.75rem)]）和 Tailwind 内置响应式前缀，实现 “移动端 - 桌面端” 无缝适配，同时通过viewport meta 标签（user-scalable=no）锁定移动端缩放，保证交互一致性。
2. 精细化交互与动画设计
微交互反馈：
输入框聚焦时添加scale-[1.02]缩放动画，引导用户操作；
计算按钮 hover 时，右侧箭头通过group-hover:translate-x-1实现平移，增强点击意愿；
结果卡片展示时触发animate-float浮动动画（3 秒循环），吸引用户关注计算结果。
主题切换逻辑：通过切换html根元素的dark类，联动修改 body 背景（从from-light to-blue-50切换为from-gray-900 to-blue-900）、图标（月亮→太阳），实现 “浅色 / 深色模式” 无缝切换，适配不同使用场景（如夜间使用）。