diff --git a/client/src/pages/add/index.vue b/client/src/pages/add/index.vue index 2b5dd0f..f235d05 100644 --- a/client/src/pages/add/index.vue +++ b/client/src/pages/add/index.vue @@ -25,6 +25,8 @@ :fixed="true" size="large" :auto-focus="true" + @focus="keyboardVisible = true" + @blur="keyboardVisible = false" @confirm="save" /> @@ -55,7 +57,12 @@ - + + + + {{ editId ? '保存修改' : '保存' }} + + | null>(null) +const keyboardVisible = ref(false) + // Remember last selected category per type const lastCatByType: Record = { expense: null, income: null } @@ -301,9 +310,46 @@ function goBack() { display: flex; flex-direction: column; // AmountEditor fixed Numpad 占位: 4行×96rpx + 3间隙×16rpx + padding×2×16rpx = 464rpx + // 同时留出保存按钮的位置,确保内容不被遮挡 $numpad-h: 464rpx; - padding-bottom: calc(#{$numpad-h} + constant(safe-area-inset-bottom)); - padding-bottom: calc(#{$numpad-h} + env(safe-area-inset-bottom)); + $save-bar-h: 144rpx; + padding-bottom: calc(#{$numpad-h} + #{$save-bar-h} + constant(safe-area-inset-bottom)); + padding-bottom: calc(#{$numpad-h} + #{$save-bar-h} + env(safe-area-inset-bottom)); +} + +// 底部保存按钮栏 +.save-bar { + position: fixed; + bottom: 0; + left: 0; + right: 0; + padding: $space-md $space-xl; + padding-bottom: calc(#{$space-md} + constant(safe-area-inset-bottom)); + padding-bottom: calc(#{$space-md} + env(safe-area-inset-bottom)); + background: $surface; + border-top: 2rpx solid $border; + z-index: 50; +} + +.save-btn { + height: 96rpx; + background: linear-gradient(135deg, $primary, #E67355); + border-radius: $radius-xl; + display: flex; + align-items: center; + justify-content: center; + box-shadow: 0 4rpx 12rpx rgba(255, 140, 105, 0.3); + + &:active { + opacity: 0.8; + transform: scale(0.98); + } +} + +.save-btn-text { + font-size: $font-xl; + font-weight: 600; + color: $surface; } .header-fixed { diff --git a/client/src/pages/budget/index.vue b/client/src/pages/budget/index.vue index 2607658..db827db 100644 --- a/client/src/pages/budget/index.vue +++ b/client/src/pages/budget/index.vue @@ -67,9 +67,18 @@ size="large" unit="元" :auto-focus="false" + @focus="keyboardVisible = true" + @blur="keyboardVisible = false" @confirm="onConfirm" /> + + + + + 保存预算 + + @@ -98,6 +107,7 @@ const loading = ref(true) const initialLoaded = ref(false) const amountStr = ref('') const amountEditorRef = ref | null>(null) +const keyboardVisible = ref(false) const presets = [1000, 2000, 3000, 5000, 10000] @@ -197,10 +207,11 @@ function goBack() { .page { min-height: 100vh; background: $bg; - // AmountEditor fixed Numpad 占位: 4行×96rpx + 3间隙×16rpx + padding×2×16rpx = 464rpx + // AmountEditor fixed Numpad 占位 + 保存按钮占位 $numpad-h: 464rpx; - padding-bottom: calc(#{$numpad-h} + constant(safe-area-inset-bottom)); - padding-bottom: calc(#{$numpad-h} + env(safe-area-inset-bottom)); + $save-bar-h: 144rpx; + padding-bottom: calc(#{$numpad-h} + #{$save-bar-h} + constant(safe-area-inset-bottom)); + padding-bottom: calc(#{$numpad-h} + #{$save-bar-h} + env(safe-area-inset-bottom)); } .header-fixed { @@ -372,6 +383,40 @@ function goBack() { color: $text; } +// 底部保存按钮栏 +.save-bar { + position: fixed; + bottom: 0; + left: 0; + right: 0; + padding: $space-md $space-xl; + padding-bottom: calc(#{$space-md} + constant(safe-area-inset-bottom)); + padding-bottom: calc(#{$space-md} + env(safe-area-inset-bottom)); + background: $surface; + border-top: 2rpx solid $border; + z-index: 50; +} + +.save-btn { + height: 96rpx; + background: linear-gradient(135deg, $primary, #E67355); + border-radius: $radius-xl; + display: flex; + align-items: center; + justify-content: center; + box-shadow: 0 4rpx 12rpx rgba(255, 140, 105, 0.3); + + &:active { + opacity: 0.8; + transform: scale(0.98); + } +} + +.save-btn-text { + font-size: $font-xl; + font-weight: 600; + color: $surface; +} @media (prefers-reduced-motion: reduce) {