feat: 老板驾驶舱利润瀑布增加实收分配占比条 - 食材37%/人工25%/房租15%/水电5%/其他10%/利润6%

client/src/pages/BossPage.tsx

@@ -180,6 +180,37 @@ export function BossPage() {
               <p className="text-sm font-bold text-green-700">{formatCurrency(wf.net_profit)}</p>
             </div>
           </div>
+          {/* 成本费用占比汇总条 */}
+          {wf && (
+            <div className="mt-3 rounded-lg border p-3">
+              <p className="mb-2 text-xs font-medium text-muted-foreground">实收分配（占实收比例）</p>
+              <div className="flex h-8 w-full overflow-hidden rounded-lg text-[10px] font-bold text-white">
+                <div className="flex items-center justify-center bg-orange-500" style={{ width: `${Number(wf.food_cost) / Number(wf.received) * 100}%` }} title={`食材 ${formatPercent(Number(wf.food_cost) / Number(wf.received) * 100)}`}>
+                  食材{formatPercent(Number(wf.food_cost) / Number(wf.received) * 100)}
+                </div>
+                <div className="flex items-center justify-center bg-blue-500" style={{ width: `${Number(wf.wage) / Number(wf.received) * 100}%` }} title={`人工 ${formatPercent(Number(wf.wage) / Number(wf.received) * 100)}`}>
+                  人工{formatPercent(Number(wf.wage) / Number(wf.received) * 100)}
+                </div>
+                <div className="flex items-center justify-center bg-purple-500" style={{ width: `${Number(wf.rent) / Number(wf.received) * 100}%` }} title={`房租 ${formatPercent(Number(wf.rent) / Number(wf.received) * 100)}`}>
+                  房租{formatPercent(Number(wf.rent) / Number(wf.received) * 100)}
+                </div>
+                <div className="flex items-center justify-center bg-cyan-500" style={{ width: `${Number(wf.utility) / Number(wf.received) * 100}%` }} title={`水电 ${formatPercent(Number(wf.utility) / Number(wf.received) * 100)}`}>
+                  水电{formatPercent(Number(wf.utility) / Number(wf.received) * 100)}
+                </div>
+                <div className="flex items-center justify-center bg-slate-400" style={{ width: `${(Number(wf.dorm) + Number(wf.commission) + Number(wf.other_expense)) / Number(wf.received) * 100}%` }} title={`其他费用 ${formatPercent((Number(wf.dorm) + Number(wf.commission) + Number(wf.other_expense)) / Number(wf.received) * 100)}`}>
+                  其他{formatPercent((Number(wf.dorm) + Number(wf.commission) + Number(wf.other_expense)) / Number(wf.received) * 100)}
+                </div>
+                <div className="flex items-center justify-center bg-green-500" style={{ width: `${Number(wf.net_profit) / Number(wf.received) * 100}%` }} title={`净利润 ${formatPercent(Number(wf.net_profit) / Number(wf.received) * 100)}`}>
+                  利润{formatPercent(Number(wf.net_profit) / Number(wf.received) * 100)}
+                </div>
+              </div>
+              <div className="mt-2 flex flex-wrap gap-x-4 gap-y-1 text-[10px] text-muted-foreground">
+                <span>食材成本率 {formatPercent(Number(wf.food_cost) / Number(wf.received) * 100)}（建议 ≤ 32%）</span>
+                <span>费用率 {formatPercent(Number(wf.total_expense) / Number(wf.received) * 100)}（建议 ≤ 40%）</span>
+                <span>净利率 {formatPercent(Number(wf.net_profit) / Number(wf.received) * 100)}（建议 ≥ 10%）</span>
+              </div>
+            </div>
+          )}
         </CollapsibleSection>
       )}