From 6b26951b1b483c36e2ff7df3003602144d9130e5 Mon Sep 17 00:00:00 2001
From: wangxiaogang <1433729587@qq.com>
Date: Tue, 9 Jun 2026 14:44:25 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E9=87=91=E9=A2=9D=E8=BE=93=E5=85=A5?=
 =?UTF-8?q?=E6=A1=86=E6=A0=B7=E5=BC=8F=E4=BC=98=E5=8C=96=20+=20=E9=A2=84?=
 =?UTF-8?q?=E7=AE=97=E9=A1=B5=E9=94=AE=E7=9B=98=E9=81=AE=E6=8C=A1=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D=20+=20admin=20=E6=A0=B7=E5=BC=8F=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- AmountEditor: 未聚焦时透明，聚焦时粘土卡片浮起；¥/单位 baseline 对齐
- budget: 补充 Numpad 占位高度，auto-focus 改为 false 缩短页面
- admin/feedback: 补充 modal-mask mixin
- admin/track: filter-tabs 与 scroll-view 分离 + 格式化
---
 .../components/AmountEditor/AmountEditor.vue  |  85 +++++++------
 client/src/pages/admin/feedback.vue           |   5 +
 client/src/pages/admin/track.vue              | 113 +++++++++++++-----
 client/src/pages/budget/index.vue             |   7 +-
 4 files changed, 140 insertions(+), 70 deletions(-)

diff --git a/client/src/components/AmountEditor/AmountEditor.vue b/client/src/components/AmountEditor/AmountEditor.vue
index 805992a..c234653 100644
--- a/client/src/components/AmountEditor/AmountEditor.vue
+++ b/client/src/components/AmountEditor/AmountEditor.vue
@@ -128,60 +128,54 @@ defineExpose({ focus, blur })
   width: 100%;
 }
 
+// 金额显示区 — 未聚焦时低调，聚焦时粘土卡片浮起
 .amount-display {
-  min-height: 156rpx;
-  padding: $space-lg $space-xl;
-  background: $surface;
-  border: 2rpx solid $border;
-  border-radius: $radius-2xl;
-  box-shadow: $shadow-clay;
   display: flex;
-  align-items: center;
+  align-items: baseline;
   justify-content: center;
-  gap: $space-xs;
+  gap: 8rpx;
+  padding: $space-lg $space-xl $space-md;
+  border-radius: $radius-xl;
+  border: 2rpx solid transparent;
+  background: transparent;
+  transition: background $transition-normal, border-color $transition-normal, box-shadow $transition-normal;
   -webkit-tap-highlight-color: transparent;
-  transition: border-color $transition-normal, box-shadow $transition-normal, transform $transition-fast;
-
-  &:active {
-    transform: scale(0.99);
-  }
 }
 
 .amount-editor--focused .amount-display {
-  border-color: $primary-light;
-  box-shadow: $shadow-clay, 0 8rpx 24rpx rgba(255, 140, 105, 0.16);
+  background: $surface;
+  border-color: $border;
+  box-shadow: $shadow-clay;
 }
 
-.currency,
+// ¥ 符号
+.currency {
+  flex-shrink: 0;
+  font-family: 'Fredoka', sans-serif;
+  font-weight: 500;
+  color: $text-muted;
+  line-height: 1.2;
+}
+
+// 单位（元）
 .unit {
   flex-shrink: 0;
-  color: $text-sec;
   font-weight: 600;
+  color: $text-sec;
+  line-height: 1.2;
 }
 
-.currency {
-  align-self: flex-start;
-  margin-top: 12rpx;
-  font-family: 'Fredoka', sans-serif;
-  font-size: 40rpx;
-}
-
-.unit {
-  align-self: flex-end;
-  margin-bottom: 14rpx;
-  font-size: $font-md;
-}
-
+// 金额字符容器
 .amount-value {
   min-width: 0;
   display: flex;
-  align-items: center;
+  align-items: baseline;
   justify-content: center;
   flex-wrap: wrap;
   font-family: 'Fredoka', sans-serif;
   font-weight: 700;
   color: $text;
-  line-height: 1.1;
+  line-height: 1.2;
   word-break: break-all;
 }
 
@@ -189,7 +183,6 @@ defineExpose({ focus, blur })
 .placeholder {
   display: inline-flex;
   align-items: center;
-  min-height: 1.1em;
 }
 
 .amount-char {
@@ -197,9 +190,10 @@ defineExpose({ focus, blur })
 }
 
 .placeholder {
-  color: $text-muted;
+  color: #D0C4C4;
 }
 
+// 光标
 .cursor {
   width: 4rpx;
   height: 1em;
@@ -209,11 +203,11 @@ defineExpose({ focus, blur })
   animation: cursor-blink 1s steps(2, start) infinite;
 }
 
+// ===== 尺寸变体 =====
+
 .amount-editor--small {
   .amount-display {
-    min-height: 112rpx;
     padding: $space-md $space-lg;
-    border-radius: $radius-xl;
   }
 
   .amount-value {
@@ -221,14 +215,17 @@ defineExpose({ focus, blur })
   }
 
   .currency {
-    margin-top: 6rpx;
     font-size: 28rpx;
   }
+
+  .unit {
+    font-size: $font-sm;
+  }
 }
 
 .amount-editor--medium {
   .amount-display {
-    min-height: 132rpx;
+    padding: $space-md $space-xl;
   }
 
   .amount-value {
@@ -238,12 +235,24 @@ defineExpose({ focus, blur })
   .currency {
     font-size: 34rpx;
   }
+
+  .unit {
+    font-size: $font-md;
+  }
 }
 
 .amount-editor--large {
   .amount-value {
     font-size: 88rpx;
   }
+
+  .currency {
+    font-size: 40rpx;
+  }
+
+  .unit {
+    font-size: $font-lg;
+  }
 }
 
 @keyframes cursor-blink {
diff --git a/client/src/pages/admin/feedback.vue b/client/src/pages/admin/feedback.vue
index 1b50c0a..be1d49d 100644
--- a/client/src/pages/admin/feedback.vue
+++ b/client/src/pages/admin/feedback.vue
@@ -607,4 +607,9 @@ function goBack() { uni.navigateBack() }
   .skip & { color: $text-sec; }
   .confirm & { color: $surface; }
 }
+
+.modal-mask {
+  @include modal-mask;
+}
+
 </style>
diff --git a/client/src/pages/admin/track.vue b/client/src/pages/admin/track.vue
index b76eeca..a719f07 100644
--- a/client/src/pages/admin/track.vue
+++ b/client/src/pages/admin/track.vue
@@ -61,13 +61,19 @@
     <view class="query-section">
       <view class="query-header">
         <text class="section-title">事件记录</text>
-        <scroll-view class="filter-tabs" scroll-x>
-          <view class="filter-tab" :class="{ active: !filterEvent }" @tap="filterEvent = ''">全部</view>
-          <view class="filter-tab" :class="{ active: filterEvent === 'page_view' }" @tap="filterEvent = 'page_view'">页面</view>
-          <view class="filter-tab" :class="{ active: filterEvent === 'action' }" @tap="filterEvent = 'action'">操作</view>
-          <view class="filter-tab" :class="{ active: filterEvent === 'error' }" @tap="filterEvent = 'error'">错误</view>
-          <view class="filter-tab" :class="{ active: filterEvent === 'api_error' }" @tap="filterEvent = 'api_error'">API错误</view>
-          <view class="filter-tab" :class="{ active: filterEvent === 'app_launch' }" @tap="filterEvent = 'app_launch'">启动</view>
+        <scroll-view scroll-x>
+          <view class="filter-tabs">
+            <view class="filter-tab" :class="{ active: !filterEvent }" @tap="filterEvent = ''">全部</view>
+            <view class="filter-tab" :class="{ active: filterEvent === 'page_view' }" @tap="filterEvent = 'page_view'">
+              页面</view>
+            <view class="filter-tab" :class="{ active: filterEvent === 'action' }" @tap="filterEvent = 'action'">操作
+            </view>
+            <view class="filter-tab" :class="{ active: filterEvent === 'error' }" @tap="filterEvent = 'error'">错误</view>
+            <view class="filter-tab" :class="{ active: filterEvent === 'api_error' }" @tap="filterEvent = 'api_error'">
+              API错误</view>
+            <view class="filter-tab" :class="{ active: filterEvent === 'app_launch' }"
+              @tap="filterEvent = 'app_launch'">启动</view>
+          </view>
         </scroll-view>
       </view>
       <view class="filter-row">
@@ -95,7 +101,8 @@
           </view>
           <text class="record-page" v-if="item.page">{{ item.page }}</text>
           <text class="record-user" v-if="item.nickname">{{ item.nickname }}</text>
-          <text class="record-data" v-if="item.data && Object.keys(item.data).length > 0">{{ JSON.stringify(item.data) }}</text>
+          <text class="record-data" v-if="item.data && Object.keys(item.data).length > 0">{{ JSON.stringify(item.data)
+            }}</text>
         </view>
 
         <view v-if="loading" class="loading-box">
@@ -151,7 +158,7 @@ onPullDownRefresh(async () => {
 async function loadStats() {
   try {
     stats.value = await getTrackStats()
-  } catch {}
+  } catch { }
 }
 
 async function loadEvents(append = false) {
@@ -274,7 +281,9 @@ function goBack() {
   @include sticky-header;
 }
 
-.status-bar { @include status-bar; }
+.status-bar {
+  @include status-bar;
+}
 
 .nav-bar {
   display: flex;
@@ -282,7 +291,9 @@ function goBack() {
   padding: $space-sm $space-xl $space-md;
 }
 
-.nav-back { @include nav-back; }
+.nav-back {
+  @include nav-back;
+}
 
 .nav-title {
   flex: 1;
@@ -292,7 +303,9 @@ function goBack() {
   color: $text;
 }
 
-.nav-placeholder { width: 88rpx; }
+.nav-placeholder {
+  width: 88rpx;
+}
 
 .stats-card {
   margin: $space-md $space-xl;
@@ -333,7 +346,9 @@ function goBack() {
   gap: $space-sm;
   padding: $space-xs 0;
 
-  &:active { opacity: 0.7; }
+  &:active {
+    opacity: 0.7;
+  }
 }
 
 .event-tag {
@@ -341,18 +356,34 @@ function goBack() {
   border-radius: $radius-xs;
   flex-shrink: 0;
 
-  &.page { background: #E3F2FD; }
-  &.action { background: #E8F5E9; }
-  &.error { background: #FFEBEE; }
+  &.page {
+    background: #E3F2FD;
+  }
+
+  &.action {
+    background: #E8F5E9;
+  }
+
+  &.error {
+    background: #FFEBEE;
+  }
 }
 
 .event-tag-text {
   font-size: $font-sm;
   font-weight: 500;
 
-  .page & { color: #1976D2; }
-  .action & { color: #388E3C; }
-  .error & { color: #D32F2F; }
+  .page & {
+    color: #1976D2;
+  }
+
+  .action & {
+    color: #388E3C;
+  }
+
+  .error & {
+    color: #D32F2F;
+  }
 }
 
 .event-bar {
@@ -472,7 +503,9 @@ function goBack() {
   align-items: center;
   justify-content: center;
 
-  &:active { opacity: 0.8; }
+  &:active {
+    opacity: 0.8;
+  }
 }
 
 .search-btn-text {
@@ -491,7 +524,6 @@ function goBack() {
   display: flex;
   gap: $space-xs;
   white-space: nowrap;
-  width: 100%;
 }
 
 .filter-tab {
@@ -520,7 +552,9 @@ function goBack() {
   padding: $space-md;
   border-bottom: 1rpx solid $border;
 
-  &:last-child { border-bottom: none; }
+  &:last-child {
+    border-bottom: none;
+  }
 }
 
 .record-header {
@@ -534,18 +568,34 @@ function goBack() {
   padding: 2rpx 12rpx;
   border-radius: $radius-xs;
 
-  &.page { background: #E3F2FD; }
-  &.action { background: #E8F5E9; }
-  &.error { background: #FFEBEE; }
+  &.page {
+    background: #E3F2FD;
+  }
+
+  &.action {
+    background: #E8F5E9;
+  }
+
+  &.error {
+    background: #FFEBEE;
+  }
 }
 
 .record-event-text {
   font-size: $font-xs;
   font-weight: 500;
 
-  .page & { color: #1976D2; }
-  .action & { color: #388E3C; }
-  .error & { color: #D32F2F; }
+  .page & {
+    color: #1976D2;
+  }
+
+  .action & {
+    color: #388E3C;
+  }
+
+  .error & {
+    color: #D32F2F;
+  }
 }
 
 .record-time {
@@ -578,7 +628,8 @@ function goBack() {
   border-radius: $radius-sm;
 }
 
-.loading-box, .empty-box {
+.loading-box,
+.empty-box {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -601,6 +652,8 @@ function goBack() {
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .bar-fill { transition: none; }
+  .bar-fill {
+    transition: none;
+  }
 }
 </style>
diff --git a/client/src/pages/budget/index.vue b/client/src/pages/budget/index.vue
index beb7fc3..2607658 100644
--- a/client/src/pages/budget/index.vue
+++ b/client/src/pages/budget/index.vue
@@ -66,7 +66,7 @@
         :fixed="true"
         size="large"
         unit="元"
-        :auto-focus="true"
+        :auto-focus="false"
         @confirm="onConfirm"
       />
     </view>
@@ -197,7 +197,10 @@ function goBack() {
 .page {
   min-height: 100vh;
   background: $bg;
-  padding-bottom: 120rpx;
+  // 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));
 }
 
 .header-fixed {