添加高亮

finance/src/components/FinanceCoinSellerRechargeOrderList.jsx

@@ -340,7 +340,12 @@ export function FinanceCoinSellerRechargeOrderList({
                                         <td className="r num">
                                             <Stacked
                                                 primary={usdText(item)}
+                                                primaryClassName="finance-recharge-amount"
                                                 secondary={`${formatAmount(item.coinAmount)} 金币${isZeroCoinMakeupOrder(item) ? "（补单）" : ""}`}
+                                                // 0 金币代表补单且不会发币，只有真实发放的金币才进入强调态，避免误导财务人员。
+                                                secondaryClassName={
+                                                    Number(item.coinAmount || 0) > 0 ? "finance-recharge-coins--positive" : ""
+                                                }
                                             />
                                         </td>
                                         <td>
@@ -507,11 +512,11 @@ function StatusBadge({ status }) {
     );
 }
 
-function Stacked({ primary, secondary }) {
+function Stacked({ primary, primaryClassName = "", secondary, secondaryClassName = "" }) {
     return (
         <span className="finance-stack">
-            <span>{primary || "-"}</span>
+            <span className={primaryClassName}>{primary || "-"}</span>
-            <small>{secondary || ""}</small>
+            <small className={secondaryClassName}>{secondary || ""}</small>
         </span>
     );
 }

finance/src/components/FinanceCoinSellerRechargeOrderList.test.jsx

@@ -198,10 +198,19 @@ test("zero coin seller recharge order uses makeup completion action", () => {
 
     fireEvent.click(screen.getByRole("button", { name: "完成补单" }));
 
+    expect(screen.getByText("USD 10.00")).toHaveClass("finance-recharge-amount");
+    expect(screen.getByText("0 金币（补单）")).not.toHaveClass("finance-recharge-coins--positive");
     expect(confirm).toHaveBeenCalledWith(expect.stringContaining("不发放金币"));
     expect(onGrant).toHaveBeenCalledWith(expect.objectContaining({ id: "makeup", coinAmount: 0 }));
 });
 
+test("highlights recharge amount and only non-zero coins", () => {
+    render(<FinanceCoinSellerRechargeOrderList {...baseProps()} />);
+
+    expect(screen.getByText("USD 10.00")).toHaveClass("finance-recharge-amount");
+    expect(screen.getByText("100,000 金币")).toHaveClass("finance-recharge-coins--positive");
+});
+
 function baseProps(overrides = {}) {
     return {
         actionLoading: "",

finance/src/styles/index.css

@@ -140,6 +140,17 @@ a {
   color: var(--text-tertiary);
 }
 
+/* 充值账单金额与实际发放金币是财务核对重点；用既有语义色和字重建立层级，不改变零金币补单的弱化展示。 */
+.finance-recharge-amount {
+  color: var(--primary-strong);
+  font-weight: 750;
+}
+
+.finance-stack small.finance-recharge-coins--positive {
+  color: var(--success);
+  font-weight: 700;
+}
+
 .finance-main {
   display: flex;
   flex-direction: column;