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>

core/frontend/src/account-page.css

@@ -166,6 +166,16 @@
   .bill-pager .pages button.active { background: var(--heat); color: var(--accent-white); border-color: var(--heat); font-weight: 600; }
   .bill-pager .pages button:disabled { opacity: .4; cursor: not-allowed; }
   .bill-pager .pages .ellipsis { min-width: 20px; height: 28px; display: inline-flex; align-items: flex-end; justify-content: center; padding-bottom: 4px; color: var(--black-alpha-32); font-family: var(--font-mono); font-size: 12px; user-select: none; }
+  /* row40:跳页输入框 */
+  .bill-pager .bill-jump { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 12px; color: var(--black-alpha-48); }
+  .bill-pager .bill-jump input { width: 48px; height: 28px; padding: 0 6px; border: 1px solid var(--border-muted); border-radius: var(--r-sm); background: var(--surface); font-family: var(--font-mono); font-size: 12px; color: var(--accent-black); text-align: center; }
+  .bill-pager .bill-jump input:focus { outline: none; border-color: var(--heat); }
+  .bill-pager .bill-jump button { min-width: 40px; height: 28px; padding: 0 10px; border: 1px solid var(--border-muted); border-radius: var(--r-sm); background: var(--surface); font-family: var(--font-mono); font-size: 12px; color: var(--black-alpha-56); cursor: pointer; transition: border-color var(--t-base), color var(--t-base); }
+  .bill-pager .bill-jump button:hover:not(:disabled) { border-color: var(--black-alpha-32); color: var(--accent-black); }
+  .bill-pager .bill-jump button:disabled { opacity: .4; cursor: not-allowed; }
+  /* row39:详情列过长不撑行 —— 截断省略,状态列不换行(避免「成功」被挤换行) */
+  .billing-table .bill-detail { max-width: 320px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .billing-table .bill-status { white-space: nowrap; }
   .billing-table .progress-mini { width: 80px; height: 4px; background: var(--background-lighter); border-radius: 2px; overflow: hidden; display: inline-block; vertical-align: middle; margin-left: 8px; }
   .billing-table .progress-mini > span { display: block; height: 100%; background: var(--heat); }
 

core/frontend/src/routes/account.tsx

@@ -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>