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) {