From 1f9689718483c427a149d147e9d707fe770b2c12 Mon Sep 17 00:00:00 2001
From: freedakgmail <freedak.gemini@gmail.com>
Date: Thu, 30 Jul 2026 14:28:32 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=80=81=E6=9D=BF=E9=A9=BE=E9=A9=B6?=
 =?UTF-8?q?=E8=88=B1=E5=88=A9=E6=B6=A6=E7=80=91=E5=B8=83=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E5=AE=9E=E6=94=B6=E5=88=86=E9=85=8D=E5=8D=A0=E6=AF=94=E6=9D=A1?=
 =?UTF-8?q?=20-=20=E9=A3=9F=E6=9D=9037%/=E4=BA=BA=E5=B7=A525%/=E6=88=BF?=
 =?UTF-8?q?=E7=A7=9F15%/=E6=B0=B4=E7=94=B55%/=E5=85=B6=E4=BB=9610%/?=
 =?UTF-8?q?=E5=88=A9=E6=B6=A66%?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/pages/BossPage.tsx | 31 +++++++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)

diff --git a/client/src/pages/BossPage.tsx b/client/src/pages/BossPage.tsx
index bb8e34c..7249283 100644
--- a/client/src/pages/BossPage.tsx
+++ b/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>
       )}