fix: 账单流水 详情列截断 + 状态不换行 + 加跳页输入 (row39/row40)
- row39: 详情列文字过长撑得「状态·成功」换行 → 详情列 max-width+nowrap+省略号截断(hover title 看全)、状态列 white-space:nowrap - row40: 账单流水分页器加「跳至第 N 页」输入框,回车或点「跳转」钳到 [1,总页数] 直达 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -152,6 +152,13 @@ export function AccountPage({ billing, projects, onRecharge }: {
|
||||
}, [billPage, reloadFlag]);
|
||||
const billTotalPages = Math.max(1, Math.ceil(ledgerCount / BILLS_PER_PAGE));
|
||||
const safeBillPage = Math.min(billPage, billTotalPages);
|
||||
// row40:跳页输入框 —— 输入页码回车/点「跳转」即钳到 [1,总页数] 并翻页
|
||||
const [billJump, setBillJump] = useState("");
|
||||
function gotoBillPage() {
|
||||
const n = parseInt(billJump, 10);
|
||||
if (!Number.isNaN(n)) setBillPage(Math.min(billTotalPages, Math.max(1, n)));
|
||||
setBillJump("");
|
||||
}
|
||||
|
||||
const selectedCard = RECHARGE.find((item) => item.amt === recharge);
|
||||
const effectiveAmount = Number(customAmt) > 0 ? Number(customAmt) : recharge;
|
||||
@@ -422,11 +429,11 @@ export function AccountPage({ billing, projects, onRecharge }: {
|
||||
<tr key={l.id}>
|
||||
<td className="ts">{new Date(l.created_at).toLocaleString("zh-CN")}</td>
|
||||
<td>{ledgerTypeLabel(l.ledger_type)}</td>
|
||||
<td className="muted">{ledgerReasonLabel(l.reason)}</td>
|
||||
<td className="muted bill-detail" title={ledgerReasonLabel(l.reason)}>{ledgerReasonLabel(l.reason)}</td>
|
||||
<td>{l.user_label
|
||||
? <span className="who"><span className="av">{l.user_label.slice(0, 1).toUpperCase()}</span>{l.user_label}</span>
|
||||
: <span className="sys">系统</span>}</td>
|
||||
<td><span className="status-tag ok">成功</span></td>
|
||||
<td className="bill-status"><span className="status-tag ok">成功</span></td>
|
||||
<td className="neg">{l.amount}</td>
|
||||
</tr>
|
||||
))}
|
||||
@@ -445,6 +452,19 @@ export function AccountPage({ billing, projects, onRecharge }: {
|
||||
))}
|
||||
<button type="button" disabled={safeBillPage >= billTotalPages} onClick={() => setBillPage(safeBillPage + 1)}>下一页</button>
|
||||
</div>
|
||||
{/* row40:跳页输入 —— 输入页码回车或点「跳转」直达 */}
|
||||
<span className="bill-jump">
|
||||
跳至
|
||||
<input
|
||||
type="number" min={1} max={billTotalPages} inputMode="numeric"
|
||||
value={billJump} placeholder={String(safeBillPage)}
|
||||
onChange={(e) => setBillJump(e.target.value)}
|
||||
onKeyDown={(e) => { if (e.key === "Enter") gotoBillPage(); }}
|
||||
aria-label="跳至页码"
|
||||
/>
|
||||
页
|
||||
<button type="button" disabled={!billJump.trim()} onClick={gotoBillPage}>跳转</button>
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user