feat(player): improve wallet activity and session handling

src/features/wallet/wallet-logs-block.tsx

@@ -1,5 +1,7 @@
 "use client";
 
+import { ChevronDown } from "lucide-react";
+import Link from "next/link";
 import { useMemo, type Ref } from "react";
 import { useTranslation } from "react-i18next";
 
@@ -27,7 +29,6 @@ export const CREDIT_FLOW_FILTERS: { value: string; labelKey: string }[] = [
   { value: "", labelKey: "wallet.creditFlow.all" },
   { value: "bet", labelKey: "wallet.creditFlow.bet" },
   { value: "game_settlement", labelKey: "wallet.creditFlow.game_settlement" },
-  { value: "rebate", labelKey: "wallet.creditFlow.rebate" },
   { value: "bill_settlement", labelKey: "wallet.creditFlow.bill_settlement" },
 ];
 
@@ -40,8 +41,8 @@ const FLOW_LABEL_FALLBACKS: Record<string, string> = {
   "wallet.flow.refund": "退款",
   "wallet.flow.reversal": "冲正",
   "wallet.creditFlow.all": "全部",
-  "wallet.creditFlow.bet": "下注冻结",
-  "wallet.creditFlow.game_settlement": "开奖结算",
+  "wallet.creditFlow.bet": "下注",
+  "wallet.creditFlow.game_settlement": "开奖结果",
   "wallet.creditFlow.rebate": "账期回水",
   "wallet.creditFlow.credit_release": "释额",
   "wallet.creditFlow.bill_settlement": "账期收付",
@@ -135,7 +136,7 @@ export function WalletLogsBlock({
   const resolvedTitle =
     title
     ?? (creditMode
-      ? t("wallet.creditFlowsTitle", { defaultValue: "信用流水" })
+      ? t("wallet.creditFlowsTitle", { defaultValue: "额度与结算记录" })
       : t("wallet.flowsTitle", { defaultValue: "钱包流水" }));
   const filters = useMemo(() => {
     const source = creditMode ? CREDIT_FLOW_FILTERS : WALLET_FLOW_FILTERS;
@@ -197,7 +198,10 @@ export function WalletLogsBlock({
               ) : (
                 <>
                   <div className="lg:overflow-hidden lg:rounded-xl lg:border lg:border-[#e5edf8] lg:bg-white lg:shadow-[0_8px_24px_rgba(15,23,42,0.05)]">
-                    <div className="hidden lg:grid lg:grid-cols-[minmax(10rem,1.2fr)_minmax(9rem,1fr)_minmax(8rem,0.9fr)_minmax(7rem,0.8fr)_minmax(7rem,0.8fr)_minmax(6rem,0.7fr)] lg:items-center lg:gap-3 lg:border-b lg:border-[#e9eff8] lg:bg-[#f8fbff] lg:px-5 lg:py-3">
+                    <div className={creditMode
+                      ? "hidden lg:grid lg:grid-cols-[minmax(10rem,1.2fr)_minmax(9rem,1fr)_minmax(10rem,1fr)_minmax(8rem,0.8fr)_minmax(8rem,0.8fr)] lg:items-center lg:gap-3 lg:border-b lg:border-[#e9eff8] lg:bg-[#f8fbff] lg:px-5 lg:py-3"
+                      : "hidden lg:grid lg:grid-cols-[minmax(10rem,1.2fr)_minmax(9rem,1fr)_minmax(8rem,0.9fr)_minmax(7rem,0.8fr)_minmax(7rem,0.8fr)_minmax(6rem,0.7fr)] lg:items-center lg:gap-3 lg:border-b lg:border-[#e9eff8] lg:bg-[#f8fbff] lg:px-5 lg:py-3"}
+                    >
                       <p className="player-pc-table-head font-bold text-[#59739f]">
                         {t("wallet.logType", { defaultValue: "类型" })}
                       </p>
@@ -215,17 +219,25 @@ export function WalletLogsBlock({
                           ? t("wallet.creditAvailableAfter")
                           : t("wallet.balanceAfter")}
                       </p>
-                      <p className="player-pc-table-head text-right font-bold text-[#59739f]">
-                        {t("orders.status")}
-                      </p>
+                      {!creditMode ? (
+                        <p className="player-pc-table-head text-right font-bold text-[#59739f]">
+                          {t("orders.status")}
+                        </p>
+                      ) : null}
                     </div>
                     <ul className="space-y-2 lg:space-y-0">
-                      {logs.items.map((row) => (
+                      {logs.items.map((row) => creditMode ? (
+                        <CreditActivityRow
+                          key={row.log_id}
+                          item={row}
+                          currency={currency}
+                          settlementTimeZone={settlementTimeZone}
+                        />
+                      ) : (
                         <LogRow
                           key={row.log_id}
                           item={row}
                           currency={currency}
-                          creditMode={creditMode}
                           settlementTimeZone={settlementTimeZone}
                         />
                       ))}
@@ -272,6 +284,158 @@ export function WalletLogsBlock({
   );
 }
 
+function creditActivityLabel(
+  item: WalletLogItem,
+  t: (key: string, options?: { defaultValue?: string }) => string,
+): string {
+  const labels: Record<string, { key: string; fallback: string }> = {
+    bet_pending: { key: "wallet.activity.bet", fallback: "下注" },
+    settled_loss: { key: "wallet.activity.settledLoss", fallback: "未中奖" },
+    settled_win: { key: "wallet.activity.settledWin", fallback: "中奖" },
+    settled_even: { key: "wallet.activity.result", fallback: "开奖结果" },
+    bet_refund: { key: "wallet.activity.refunded", fallback: "已退款" },
+    period_paid: { key: "wallet.activity.periodPaid", fallback: "已付款" },
+    period_received: { key: "wallet.activity.periodReceived", fallback: "已收款" },
+  };
+  const resolved = labels[item.biz_type];
+  if (!resolved) {
+    return t("wallet.activity.result", { defaultValue: "开奖结果" });
+  }
+
+  return t(resolved.key, { defaultValue: resolved.fallback });
+}
+
+function CreditActivityRow({
+  item,
+  currency,
+  settlementTimeZone,
+}: {
+  item: WalletLogItem;
+  currency: string;
+  settlementTimeZone?: string;
+}) {
+  const { t } = useTranslation("player");
+  const ccy = item.currency_code || currency;
+  const amount = Number(item.net_amount ?? item.amount ?? 0);
+  const amountTone = amount > 0
+    ? "text-emerald-700"
+    : amount < 0
+      ? "text-[#e5002c]"
+      : "text-[#32518d]";
+  const amountLabel = amount === 0
+    ? formatMinorAsCurrency(0, ccy)
+    : `${amount > 0 ? "+" : "−"}${formatMinorAsCurrency(Math.abs(amount), ccy)}`;
+  const timeLabel = settlementTimeZone
+    ? formatLotteryInstantInTimeZone(item.created_at, settlementTimeZone)
+    : formatPlayerInstant(item.created_at);
+  const balanceLabel = item.balance_after == null
+    ? "—"
+    : formatMinorAsCurrency(item.balance_after, ccy);
+  const refLabel = item.draw_no
+    ? `${item.draw_no}${item.order_no ? ` · ${item.order_no}` : ""}`
+    : item.order_no ?? (item.settlement_bill_id ? `#${item.settlement_bill_id}` : "—");
+  const detailHref = item.ticket_no
+    ? `/orders/${encodeURIComponent(item.ticket_no)}`
+    : item.draw_no
+      ? `/orders?draw_no=${encodeURIComponent(item.draw_no)}`
+      : null;
+  const showStatus = item.activity_status === "pending" || item.activity_status === "reversed";
+  const statusLabel = item.activity_status === "reversed"
+    ? t("wallet.activity.reversed", { defaultValue: "已冲正" })
+    : item.activity_kind === "bet"
+      ? t("wallet.activity.awaitingDraw", { defaultValue: "待开奖" })
+      : t("wallet.activity.processing", { defaultValue: "处理中" });
+
+  return (
+    <li className="rounded-2xl border border-[#e1eaf6] bg-white px-3 py-3 text-sm shadow-[0_10px_28px_rgba(15,23,42,0.06)] lg:grid lg:grid-cols-[minmax(10rem,1.2fr)_minmax(9rem,1fr)_minmax(10rem,1fr)_minmax(8rem,0.8fr)_minmax(8rem,0.8fr)] lg:items-center lg:gap-3 lg:rounded-none lg:border-x-0 lg:border-t-0 lg:border-b-[#edf2f8] lg:px-5 lg:py-4 lg:shadow-none lg:last:border-b-0 lg:hover:bg-[#fbfdff]">
+      <div className="flex items-start justify-between gap-3 lg:contents">
+        <div className="min-w-0 flex-1">
+          <div className="flex flex-wrap items-center gap-2">
+            <p className="text-base font-black leading-tight text-[#101a33] lg:text-sm">
+              {creditActivityLabel(item, t)}
+            </p>
+            {showStatus ? (
+              <span className={item.activity_status === "reversed"
+                ? "inline-flex rounded-full border border-slate-200 bg-slate-50 px-2 py-0.5 text-[10px] font-black text-slate-600"
+                : "inline-flex rounded-full border border-blue-200 bg-blue-50 px-2 py-0.5 text-[10px] font-black text-blue-700"}
+              >
+                {statusLabel}
+              </span>
+            ) : null}
+          </div>
+          <p className="mt-1.5 text-xs font-medium text-slate-500 lg:hidden">{timeLabel}</p>
+          <p className="mt-1 truncate font-mono text-[11px] text-slate-400 lg:hidden">{refLabel}</p>
+        </div>
+
+        <p className={`shrink-0 text-right text-lg font-black tabular-nums lg:hidden ${amountTone}`}>
+          {amountLabel}
+        </p>
+      </div>
+
+      <p className="hidden text-sm text-slate-600 lg:block">{timeLabel}</p>
+      <div className="hidden min-w-0 lg:block">
+        {detailHref ? (
+          <Link className="block truncate font-mono text-xs text-[#32518d] hover:underline" href={detailHref}>
+            {refLabel}
+          </Link>
+        ) : (
+          <p className="truncate font-mono text-xs text-slate-400">{refLabel}</p>
+        )}
+      </div>
+      <p className={`hidden text-right text-sm font-black tabular-nums lg:block ${amountTone}`}>
+        {amountLabel}
+      </p>
+      <p className="hidden text-right font-mono text-sm font-black tabular-nums text-[#32518d] lg:block">
+        {balanceLabel}
+      </p>
+
+      <details className="group mt-3 rounded-xl bg-[#f8fbff] lg:col-span-5 lg:mt-0">
+        <summary className="flex min-h-9 cursor-pointer list-none items-center justify-between gap-2 px-3 py-2 text-xs font-bold text-[#32518d] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#2d63e2] [&::-webkit-details-marker]:hidden">
+          {t("wallet.activity.details", { defaultValue: "查看明细" })}
+          <ChevronDown className="size-4 transition-transform group-open:rotate-180" aria-hidden />
+        </summary>
+        <div className="grid grid-cols-2 gap-x-4 gap-y-2 border-t border-[#e1eaf6] px-3 py-3 text-xs lg:grid-cols-4">
+          {Number(item.stake_amount ?? 0) > 0 ? (
+            <div>
+              <p className="font-semibold text-slate-500">{t("wallet.activity.stake", { defaultValue: "下注金额" })}</p>
+              <p className="mt-1 font-mono font-black text-[#101a33]">{formatMinorAsCurrency(item.stake_amount ?? 0, ccy)}</p>
+            </div>
+          ) : null}
+          {Number(item.win_amount ?? 0) > 0 ? (
+            <div>
+              <p className="font-semibold text-slate-500">{t("wallet.activity.win", { defaultValue: "中奖金额" })}</p>
+              <p className="mt-1 font-mono font-black text-emerald-700">+{formatMinorAsCurrency(item.win_amount ?? 0, ccy)}</p>
+            </div>
+          ) : null}
+          {Number(item.rebate_amount ?? 0) > 0 ? (
+            <div>
+              <p className="font-semibold text-slate-500">{t("wallet.activity.rebate", { defaultValue: "回水" })}</p>
+              <p className="mt-1 font-mono font-black text-emerald-700">+{formatMinorAsCurrency(item.rebate_amount ?? 0, ccy)}</p>
+            </div>
+          ) : null}
+          <div>
+            <p className="font-semibold text-slate-500">{t("wallet.creditAvailableAfter", { defaultValue: "变更后可用额度" })}</p>
+            <p className="mt-1 font-mono font-black text-[#32518d]">{balanceLabel}</p>
+          </div>
+          {Number(item.ticket_count ?? 0) > 0 ? (
+            <div>
+              <p className="font-semibold text-slate-500">{t("wallet.activity.ticketCount", { defaultValue: "注单数量" })}</p>
+              <p className="mt-1 font-black text-[#101a33]">{t("wallet.activity.ticketCountValue", { defaultValue: "{{count}}项", count: item.ticket_count })}</p>
+            </div>
+          ) : null}
+          {detailHref ? (
+            <div className="col-span-2 flex items-end justify-end lg:col-span-1">
+              <Link className="font-bold text-[#2d63e2] hover:underline" href={detailHref}>
+                {t("wallet.activity.viewOrder", { defaultValue: "查看注单" })}
+              </Link>
+            </div>
+          ) : null}
+        </div>
+      </details>
+    </li>
+  );
+}
+
 export function LogRow({
   item,
   currency,

src/features/wallet/wallet-screen.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { ArrowDownLeft, ArrowUpRight, Wallet } from "lucide-react";
+import { ArrowDownLeft, ArrowUpRight, ChevronDown, Wallet } from "lucide-react";
 import Image from "next/image";
 import { useRouter, useSearchParams } from "next/navigation";
 import { useCallback, useEffect, useRef, useState } from "react";
@@ -18,8 +18,9 @@ import { PlayerMoneyDisplay } from "@/components/player-money-display";
 import { WalletLogsBlock } from "@/features/wallet/wallet-logs-block";
 import { useActivePlayerCurrency } from "@/hooks/use-active-player-currency";
 import { useIsMobile } from "@/hooks/use-mobile";
+import { useAsyncEffect } from "@/hooks/use-async-effect";
 import { isCreditFundingPlayer } from "@/lib/player-funding-mode";
-import { formatMinorAsCurrency } from "@/lib/money";
+import { formatMinorAmount, formatMinorAsCurrency } from "@/lib/money";
 import { formatLotteryInstantInTimeZone, formatPlayerInstant } from "@/lib/player-datetime";
 import { PLAYER_CURRENCY_CHANGE_EVENT } from "@/lib/player-currency-preference";
 import { formatWalletClientError } from "@/lib/wallet-api-error";
@@ -101,91 +102,86 @@ function CreditSettlementBillsBlock({
   const netPending = Number(summary?.net_pending ?? 0);
   const pendingCount = Number(summary?.pending_count ?? 0);
   const netDirection = netPending >= 0 ? "receivable" : "payable";
+  const hasBills = (data?.items.length ?? 0) > 0;
 
   return (
     <section className="flex h-full flex-col rounded-2xl border border-[#dce7f7] bg-white px-3 py-3 shadow-[0_10px_28px_rgba(15,23,42,0.06)] lg:px-4 lg:py-4">
       <div className="flex shrink-0 items-start justify-between gap-3">
         <div className="min-w-0">
           <h2 className="text-sm font-black text-[#0b3f96] lg:text-base">
-            {t("wallet.settlementTitle", { defaultValue: "我的账期账单" })}
+            {t("wallet.settlementTitle", { defaultValue: "账期结算" })}
           </h2>
           <p className="mt-1 text-xs text-slate-500 lg:line-clamp-2">
-            {t("wallet.settlementHint", { defaultValue: "只显示未结清账单，中奖超出授信的部分在这里结算。" })}
+            {t("wallet.settlementHint", { defaultValue: "查看当前需要收取或支付的金额。" })}
           </p>
         </div>
-        <span className="shrink-0 rounded-full bg-[#f1f6ff] px-2.5 py-1 text-xs font-black text-[#32518d]">
-          {t("wallet.settlementPendingCount", { defaultValue: "{{count}}笔", count: pendingCount })}
-        </span>
-      </div>
-
-      <div className="mt-3 grid shrink-0 grid-cols-2 gap-2">
-        <div className="rounded-xl bg-emerald-50 px-3 py-2">
-          <p className="text-xs font-bold text-emerald-700">
-            {t("wallet.pendingReceivable", { defaultValue: "待收" })}
-          </p>
-          <p className="mt-1 font-mono text-sm font-black tabular-nums text-emerald-700">
-            {formatMinorAsCurrency(summary?.pending_receivable ?? 0, currency)}
-          </p>
-        </div>
-        <div className="rounded-xl bg-red-50 px-3 py-2">
-          <p className="text-xs font-bold text-red-700">
-            {t("wallet.pendingPayable", { defaultValue: "待付" })}
-          </p>
-          <p className="mt-1 font-mono text-sm font-black tabular-nums text-red-700">
-            {formatMinorAsCurrency(summary?.pending_payable ?? 0, currency)}
-          </p>
-        </div>
-        <div className="col-span-2 rounded-xl bg-[#f8fbff] px-3 py-2 text-xs">
-          <span className="font-semibold text-slate-500">
-            {netDirection === "receivable"
-              ? t("wallet.netReceivable", { defaultValue: "净待收" })
-              : t("wallet.netPayable", { defaultValue: "净待付" })}
+        {pendingCount > 0 ? (
+          <span className="shrink-0 rounded-full bg-[#f1f6ff] px-2.5 py-1 text-xs font-black text-[#32518d]">
+            {t("wallet.settlementPendingCount", { defaultValue: "{{count}}笔", count: pendingCount })}
           </span>
-          <span className={netDirection === "receivable" ? "ml-2 font-mono font-black text-emerald-700" : "ml-2 font-mono font-black text-red-700"}>
-            {formatMinorAsCurrency(Math.abs(netPending), currency)}
-          </span>
-        </div>
+        ) : null}
       </div>
 
       {data === null ? (
         <Skeleton className="mt-3 min-h-20 w-full flex-1 rounded-xl" />
-      ) : data.items.length === 0 ? (
-        <p className="mt-3 flex min-h-20 flex-1 items-center justify-center rounded-xl border border-dashed border-[#dce7f7] px-3 text-center text-sm text-slate-500">
-          {t("wallet.noSettlementBills", { defaultValue: "暂无待结算账单" })}
+      ) : !hasBills ? (
+        <p className="mt-3 flex min-h-24 flex-1 items-center justify-center rounded-xl bg-emerald-50 px-3 text-center text-sm font-bold text-emerald-700">
+          {t("wallet.settlementClear", { defaultValue: "当前无需结算" })}
         </p>
       ) : (
-        <ul className="mt-3 min-h-0 max-h-[16rem] flex-1 space-y-2 overflow-y-auto lg:max-h-none">
-          {data.items.map((item) => {
-            const receivable = item.direction === "receivable";
-            return (
-              <li key={item.id} className="rounded-xl border border-[#e1eaf6] px-3 py-2">
-                <div className="flex items-center justify-between gap-2">
-                  <div className="flex min-w-0 items-center gap-2">
-                    <span className={receivable ? "rounded-full bg-emerald-100 p-1 text-emerald-700" : "rounded-full bg-red-100 p-1 text-red-700"}>
-                      {receivable ? <ArrowDownLeft className="size-3.5" /> : <ArrowUpRight className="size-3.5" />}
-                    </span>
-                    <div className="min-w-0">
-                      <p className="truncate text-sm font-black text-[#101a33]">
-                        {receivable
-                          ? t("wallet.agentPaysPlayer", { defaultValue: "代理应付玩家" })
-                          : t("wallet.playerPaysAgent", { defaultValue: "玩家应付代理" })}
-                      </p>
-                      <p className="mt-0.5 text-[11px] text-slate-500">
-                        {formatPeriodRange(item, settlementTimeZone)}
-                      </p>
+        <>
+          <div className={netDirection === "receivable"
+            ? "mt-3 rounded-xl bg-emerald-50 px-3 py-3 text-emerald-700"
+            : "mt-3 rounded-xl bg-red-50 px-3 py-3 text-red-700"}
+          >
+            <p className="text-xs font-bold">
+              {netDirection === "receivable"
+                ? t("wallet.netReceivable", { defaultValue: "净待收" })
+                : t("wallet.netPayable", { defaultValue: "净待付" })}
+            </p>
+            <p className="mt-1 font-mono text-lg font-black tabular-nums">
+              {formatMinorAsCurrency(Math.abs(netPending), currency)}
+            </p>
+          </div>
+          <details className="group mt-3 rounded-xl border border-[#e1eaf6] bg-[#f8fbff]">
+            <summary className="flex min-h-10 cursor-pointer list-none items-center justify-between gap-2 px-3 py-2 text-sm font-bold text-[#32518d] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#2d63e2] [&::-webkit-details-marker]:hidden">
+              {t("wallet.settlementDetails", { defaultValue: "查看账期明细" })}
+              <ChevronDown className="size-4 transition-transform group-open:rotate-180" aria-hidden />
+            </summary>
+            <ul className="max-h-[16rem] space-y-2 overflow-y-auto border-t border-[#e1eaf6] p-2">
+              {data.items.map((item) => {
+                const receivable = item.direction === "receivable";
+                return (
+                  <li key={item.id} className="rounded-lg bg-white px-3 py-2">
+                    <div className="flex items-center justify-between gap-2">
+                      <div className="flex min-w-0 items-center gap-2">
+                        <span className={receivable ? "rounded-full bg-emerald-100 p-1 text-emerald-700" : "rounded-full bg-red-100 p-1 text-red-700"}>
+                          {receivable ? <ArrowDownLeft className="size-3.5" aria-hidden /> : <ArrowUpRight className="size-3.5" aria-hidden />}
+                        </span>
+                        <div className="min-w-0">
+                          <p className="truncate text-sm font-black text-[#101a33]">
+                            {receivable
+                              ? t("wallet.agentPaysPlayer", { defaultValue: "代理应付玩家" })
+                              : t("wallet.playerPaysAgent", { defaultValue: "玩家应付代理" })}
+                          </p>
+                          <p className="mt-0.5 text-[11px] text-slate-500">
+                            {formatPeriodRange(item, settlementTimeZone)}
+                          </p>
+                        </div>
+                      </div>
+                      <div className="shrink-0 text-right">
+                        <p className={receivable ? "font-mono text-sm font-black text-emerald-700" : "font-mono text-sm font-black text-red-700"}>
+                          {formatMinorAsCurrency(item.unpaid_amount, currency)}
+                        </p>
+                        <p className="mt-0.5 text-[11px] text-slate-500">{settlementStatusLabel(item.status, t)}</p>
+                      </div>
                     </div>
-                  </div>
-                  <div className="shrink-0 text-right">
-                    <p className={receivable ? "font-mono text-sm font-black text-emerald-700" : "font-mono text-sm font-black text-red-700"}>
-                      {formatMinorAsCurrency(item.unpaid_amount, currency)}
-                    </p>
-                    <p className="mt-0.5 text-[11px] text-slate-500">{settlementStatusLabel(item.status, t)}</p>
-                  </div>
-                </div>
-              </li>
-            );
-          })}
-        </ul>
+                  </li>
+                );
+              })}
+            </ul>
+          </details>
+        </>
       )}
     </section>
   );
@@ -267,7 +263,7 @@ export function WalletScreen() {
     return nextLogs;
   }, [currency, filter]);
 
-  useEffect(() => {
+  useAsyncEffect(() => {
     let cancelled = false;
 
     void (async () => {
@@ -307,7 +303,7 @@ export function WalletScreen() {
     return () => {
       cancelled = true;
     };
-  }, [currency, t]); // eslint-disable-line react-hooks/exhaustive-deps -- 币种切换整页刷新；流水筛选见下方 effect
+  }, [currency, t]);
 
   useEffect(() => {
     if (!filterInitializedRef.current) {
@@ -395,10 +391,12 @@ export function WalletScreen() {
   const displayMinor = isCreditPlayer
     ? Number(balance?.available_balance ?? 0)
     : Number(balance?.balance ?? 0);
+  const creditLimitMinor = Number(balance?.credit_limit ?? 0);
+  const creditInUseMinor = Math.max(0, creditLimitMinor - displayMinor);
   const panelTitle = !fundingModeKnown
     ? t("wallet.loadingTitle", { defaultValue: "账户资金" })
     : isCreditPlayer
-      ? t("wallet.creditTitle", { defaultValue: "信用" })
+      ? t("wallet.creditTitle", { defaultValue: "额度" })
       : t("wallet.title");
 
   const loadMore = useCallback(() => {
@@ -470,6 +468,7 @@ export function WalletScreen() {
                 src="/entry/image5.png"
                 alt=""
                 fill
+                loading="eager"
                 className="pointer-events-none object-cover object-center"
                 aria-hidden
               />
@@ -535,6 +534,7 @@ export function WalletScreen() {
                 src="/entry/image5.png"
                 alt=""
                 fill
+                loading="eager"
                 className="pointer-events-none object-cover object-center"
                 aria-hidden
               />
@@ -545,7 +545,7 @@ export function WalletScreen() {
                 <div className="min-w-0 flex-1">
                   <p className="text-sm font-semibold text-white/90 lg:text-base">
                     {fundingModeKnown
-                      ? t("wallet.creditAvailable", { defaultValue: "可用信用" })
+                      ? t("wallet.creditAvailable", { defaultValue: "可用额度" })
                       : t("wallet.loadingBalance", { defaultValue: "正在加载" })}
                   </p>
                   {loading || !fundingModeKnown ? (
@@ -554,40 +554,43 @@ export function WalletScreen() {
                     <PlayerMoneyDisplay
                       amountMinor={displayMinor}
                       currency={currency}
+                      showCurrencyCode={false}
                       className="mt-1 text-white lg:text-[1.75rem]"
                     />
                   )}
                   <p className="mt-2 text-xs text-white/75 lg:text-sm">
                     {!fundingModeKnown
                       ? t("wallet.loadingAccountMode", { defaultValue: "正在确认资金模式…" })
-                      : t("wallet.creditSummary", {
-                          defaultValue: "授信 {{limit}} · 已用 {{used}}",
-                          limit: formatMinorAsCurrency(balance?.credit_limit ?? 0, currency),
-                          used: formatMinorAsCurrency(balance?.used_credit ?? 0, currency),
-                        })}
+                      : t("wallet.creditAvailableHint", { defaultValue: "当前可用于下注" })}
                   </p>
                 </div>
               </div>
 
               {fundingModeKnown ? (
-                <div className="relative mt-4 grid shrink-0 grid-cols-2 gap-2 lg:mt-auto lg:gap-3">
-                  <div className="rounded-xl bg-white/15 px-3 py-2.5 backdrop-blur-[2px]">
-                    <p className="text-[11px] font-bold uppercase tracking-wide text-white/75">
-                      {t("wallet.creditLimit", { defaultValue: "授信额度" })}
-                    </p>
-                    <p className="mt-1 font-mono text-sm font-black tabular-nums text-white">
-                      {formatMinorAsCurrency(balance?.credit_limit ?? 0, currency)}
-                    </p>
+                <details className="group relative mt-4 shrink-0 rounded-xl bg-white/15 backdrop-blur-[2px] lg:mt-auto">
+                  <summary className="flex min-h-10 cursor-pointer list-none items-center justify-between gap-2 px-3 py-2 text-sm font-bold text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white [&::-webkit-details-marker]:hidden">
+                    {t("wallet.creditDetails", { defaultValue: "额度详情" })}
+                    <ChevronDown className="size-4 transition-transform group-open:rotate-180" aria-hidden />
+                  </summary>
+                  <div className="grid grid-cols-2 gap-2 border-t border-white/15 p-2">
+                    <div className="rounded-lg bg-white/10 px-3 py-2">
+                      <p className="text-[11px] font-bold text-white/75">
+                        {t("wallet.creditLimit", { defaultValue: "总额度" })}
+                      </p>
+                      <p className="mt-1 font-mono text-sm font-black tabular-nums text-white">
+                        {formatMinorAmount(creditLimitMinor)}
+                      </p>
+                    </div>
+                    <div className="rounded-lg bg-white/10 px-3 py-2">
+                      <p className="text-[11px] font-bold text-white/75">
+                        {t("wallet.usedCredit", { defaultValue: "使用中" })}
+                      </p>
+                      <p className="mt-1 font-mono text-sm font-black tabular-nums text-white">
+                        {formatMinorAmount(creditInUseMinor)}
+                      </p>
+                    </div>
                   </div>
-                  <div className="rounded-xl bg-white/15 px-3 py-2.5 backdrop-blur-[2px]">
-                    <p className="text-[11px] font-bold uppercase tracking-wide text-white/75">
-                      {t("wallet.usedCredit", { defaultValue: "已用信用" })}
-                    </p>
-                    <p className="mt-1 font-mono text-sm font-black tabular-nums text-white">
-                      {formatMinorAsCurrency(balance?.used_credit ?? 0, currency)}
-                    </p>
-                  </div>
-                </div>
+                </details>
               ) : null}
             </section>