fix: place ledger pull hints in pull space

This commit is contained in:
openclaw 2026-07-25 01:45:57 +08:00
parent 0b3372f764
commit 4511cbf2fa
2 changed files with 26 additions and 11 deletions

View File

@ -780,11 +780,11 @@ input:focus-visible {
.ledger-notice-slot { position:absolute; top:0; right:0; left:0; z-index:4; height:0; overflow:visible; pointer-events:none; }
.conversion-notice { height:32px; display:flex; align-items:center; border-bottom:1px solid #eadfca; padding:4px 12px; background:#fff9ed; color:#775b24; font-size:11px; box-shadow:0 2px 8px rgba(58,43,17,.08); pointer-events:auto; }
.ledger-pull-indicator { position:absolute; right:0; left:0; z-index:3; display:flex; align-items:center; justify-content:center; gap:5px; height:24px; color:#7d8c88; font-size:11px; pointer-events:none; opacity:var(--pull-progress); transform:translateY(calc((var(--pull-progress) - 1) * -10px)); }
.ledger-pull-indicator.top { top:4px; }
.ledger-pull-indicator.bottom { bottom:4px; transform:translateY(calc((1 - var(--pull-progress)) * 10px)); }
.ledger-pull-indicator.refresh,.ledger-pull-indicator.previous { color:#087f72; }
.ledger-pull-indicator.next { color:#3478e5; }
.ledger-pull-space { display:flex; align-items:center; justify-content:center; gap:5px; flex:0 0 auto; color:#7d8c88; font-size:11px; opacity:var(--pull-progress); pointer-events:none; overflow:hidden; }
.ledger-pull-space.top { margin:0 -16px; }
.ledger-pull-space.bottom { margin:0 -16px; }
.ledger-pull-space.refresh,.ledger-pull-space.previous { color:#087f72; }
.ledger-pull-space.next { color:#3478e5; }
.conversion-notice span { display:flex; align-items:center; gap:6px; }
.amount-value {

View File

@ -257,6 +257,14 @@ function moveLedgerPull(event: TouchEvent) {
return;
}
pullDistance.value = Math.min(144, delta * 0.55);
if (edge === "bottom") {
requestAnimationFrame(() => {
const current = ledgerContent.value;
if (current && pullEdge.value === "bottom") {
current.scrollTop = current.scrollHeight - current.clientHeight;
}
});
}
}
async function finishLedgerPull() {
@ -462,14 +470,12 @@ async function shareLedger() {
@touchcancel="cancelLedgerPull"
>
<div
v-if="pullEdge && pullDistance > 8"
class="ledger-pull-indicator"
:class="[pullEdge, pullAction, { loading: pullLoading }]"
:style="{ '--pull-progress': pullProgress }"
v-if="pullEdge === 'top' && pullDistance > 8"
:class="['ledger-pull-space', 'top', pullAction]"
:style="{ height: `${pullDistance}px`, '--pull-progress': pullProgress }"
role="status"
>
<ChevronUp v-if="pullEdge === 'bottom'" :size="15" />
<RefreshCw v-else :size="15" :class="{ spinning: pullLoading }" />
<RefreshCw :size="15" :class="{ spinning: pullLoading }" />
<span>{{ pullLoading ? "正在加载" : pullLabel }}</span>
</div>
<div class="ledger-notice-slot" aria-live="polite">
@ -559,6 +565,15 @@ async function shareLedger() {
<strong>还没有流水</strong>
<span>从第一笔开始记录</span>
</div>
<div
v-if="pullEdge === 'bottom' && pullDistance > 8"
:class="['ledger-pull-space', 'bottom', pullAction]"
:style="{ height: `${pullDistance}px`, '--pull-progress': pullProgress }"
role="status"
>
<ChevronUp :size="15" />
<span>{{ pullLoading ? "正在加载" : pullLabel }}</span>
</div>
</section>
<Transition name="share-sheet">