From 324a3ec5c91eaa77ffc314c8237aef4cee9f88a7 Mon Sep 17 00:00:00 2001
From: wangxiaogang <1433729587@qq.com>
Date: Mon, 15 Jun 2026 16:45:18 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E9=94=AE=E7=9B=98=E6=94=B6=E8=B5=B7?=
 =?UTF-8?q?=E5=90=8E=E6=B7=BB=E5=8A=A0=E5=BA=95=E9=83=A8=E4=BF=9D=E5=AD=98?=
 =?UTF-8?q?=E6=8C=89=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 记账页面添加底部保存按钮，键盘收起时显示
- 预算页面添加底部保存按钮，键盘收起时显示
- 按钮根据编辑/新增模式显示不同文案
- 正确处理底部安全区适配
---
 client/src/pages/add/index.vue    | 52 +++++++++++++++++++++++++++++--
 client/src/pages/budget/index.vue | 51 ++++++++++++++++++++++++++++--
 2 files changed, 97 insertions(+), 6 deletions(-)

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 @@
       </view>
     </view>
 
-
+    <!-- 底部保存按钮（键盘收起时显示） -->
+    <view class="save-bar" v-if="!showSuccess && !keyboardVisible">
+      <view class="save-btn" @tap="save">
+        <text class="save-btn-text">{{ editId ? '保存修改' : '保存' }}</text>
+      </view>
+    </view>
 
     <SaveSuccess
       v-model:visible="showSuccess"
@@ -99,6 +106,8 @@ const showSuccess = ref(false)
 const scrollToCat = ref('')
 const todayStr = localToday
 const amountEditorRef = ref<InstanceType<typeof AmountEditor> | null>(null)
+const keyboardVisible = ref(false)
+
 // Remember last selected category per type
 const lastCatByType: Record<string, number | null> = { 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"
       />
     </view>
+
+    <!-- 底部保存按钮（键盘收起时显示） -->
+    <view class="save-bar" v-if="!keyboardVisible">
+      <view class="save-btn" @tap="onConfirm">
+        <text class="save-btn-text">保存预算</text>
+      </view>
+    </view>
   </view>
 </template>
 
@@ -98,6 +107,7 @@ const loading = ref(true)
 const initialLoaded = ref(false)
 const amountStr = ref('')
 const amountEditorRef = ref<InstanceType<typeof AmountEditor> | 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) {