fix: 金额输入框样式优化 + 预算页键盘遮挡修复 + admin 样式修复

- AmountEditor: 未聚焦时透明,聚焦时粘土卡片浮起;¥/单位 baseline 对齐
- budget: 补充 Numpad 占位高度,auto-focus 改为 false 缩短页面
- admin/feedback: 补充 modal-mask mixin
- admin/track: filter-tabs 与 scroll-view 分离 + 格式化
This commit is contained in:
2026-06-09 14:44:25 +08:00
parent 768c72d7b7
commit 6b26951b1b
4 changed files with 140 additions and 70 deletions

View File

@@ -128,60 +128,54 @@ defineExpose({ focus, blur })
width: 100%; width: 100%;
} }
// 金额显示区 — 未聚焦时低调,聚焦时粘土卡片浮起
.amount-display { .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; display: flex;
align-items: center; align-items: baseline;
justify-content: center; 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; -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 { .amount-editor--focused .amount-display {
border-color: $primary-light; background: $surface;
box-shadow: $shadow-clay, 0 8rpx 24rpx rgba(255, 140, 105, 0.16); 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 { .unit {
flex-shrink: 0; flex-shrink: 0;
color: $text-sec;
font-weight: 600; 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 { .amount-value {
min-width: 0; min-width: 0;
display: flex; display: flex;
align-items: center; align-items: baseline;
justify-content: center; justify-content: center;
flex-wrap: wrap; flex-wrap: wrap;
font-family: 'Fredoka', sans-serif; font-family: 'Fredoka', sans-serif;
font-weight: 700; font-weight: 700;
color: $text; color: $text;
line-height: 1.1; line-height: 1.2;
word-break: break-all; word-break: break-all;
} }
@@ -189,7 +183,6 @@ defineExpose({ focus, blur })
.placeholder { .placeholder {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
min-height: 1.1em;
} }
.amount-char { .amount-char {
@@ -197,9 +190,10 @@ defineExpose({ focus, blur })
} }
.placeholder { .placeholder {
color: $text-muted; color: #D0C4C4;
} }
// 光标
.cursor { .cursor {
width: 4rpx; width: 4rpx;
height: 1em; height: 1em;
@@ -209,11 +203,11 @@ defineExpose({ focus, blur })
animation: cursor-blink 1s steps(2, start) infinite; animation: cursor-blink 1s steps(2, start) infinite;
} }
// ===== 尺寸变体 =====
.amount-editor--small { .amount-editor--small {
.amount-display { .amount-display {
min-height: 112rpx;
padding: $space-md $space-lg; padding: $space-md $space-lg;
border-radius: $radius-xl;
} }
.amount-value { .amount-value {
@@ -221,14 +215,17 @@ defineExpose({ focus, blur })
} }
.currency { .currency {
margin-top: 6rpx;
font-size: 28rpx; font-size: 28rpx;
} }
.unit {
font-size: $font-sm;
}
} }
.amount-editor--medium { .amount-editor--medium {
.amount-display { .amount-display {
min-height: 132rpx; padding: $space-md $space-xl;
} }
.amount-value { .amount-value {
@@ -238,12 +235,24 @@ defineExpose({ focus, blur })
.currency { .currency {
font-size: 34rpx; font-size: 34rpx;
} }
.unit {
font-size: $font-md;
}
} }
.amount-editor--large { .amount-editor--large {
.amount-value { .amount-value {
font-size: 88rpx; font-size: 88rpx;
} }
.currency {
font-size: 40rpx;
}
.unit {
font-size: $font-lg;
}
} }
@keyframes cursor-blink { @keyframes cursor-blink {

View File

@@ -607,4 +607,9 @@ function goBack() { uni.navigateBack() }
.skip & { color: $text-sec; } .skip & { color: $text-sec; }
.confirm & { color: $surface; } .confirm & { color: $surface; }
} }
.modal-mask {
@include modal-mask;
}
</style> </style>

View File

@@ -61,13 +61,19 @@
<view class="query-section"> <view class="query-section">
<view class="query-header"> <view class="query-header">
<text class="section-title">事件记录</text> <text class="section-title">事件记录</text>
<scroll-view class="filter-tabs" scroll-x> <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 }" @tap="filterEvent = ''">全部</view>
<view class="filter-tab" :class="{ active: filterEvent === 'page_view' }" @tap="filterEvent = 'page_view'">页面</view> <view class="filter-tab" :class="{ active: filterEvent === 'page_view' }" @tap="filterEvent = 'page_view'">
<view class="filter-tab" :class="{ active: filterEvent === 'action' }" @tap="filterEvent = 'action'">操作</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 === '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 === 'api_error' }" @tap="filterEvent = 'api_error'">
<view class="filter-tab" :class="{ active: filterEvent === 'app_launch' }" @tap="filterEvent = 'app_launch'">启动</view> API错误</view>
<view class="filter-tab" :class="{ active: filterEvent === 'app_launch' }"
@tap="filterEvent = 'app_launch'">启动</view>
</view>
</scroll-view> </scroll-view>
</view> </view>
<view class="filter-row"> <view class="filter-row">
@@ -95,7 +101,8 @@
</view> </view>
<text class="record-page" v-if="item.page">{{ item.page }}</text> <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-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>
<view v-if="loading" class="loading-box"> <view v-if="loading" class="loading-box">
@@ -274,7 +281,9 @@ function goBack() {
@include sticky-header; @include sticky-header;
} }
.status-bar { @include status-bar; } .status-bar {
@include status-bar;
}
.nav-bar { .nav-bar {
display: flex; display: flex;
@@ -282,7 +291,9 @@ function goBack() {
padding: $space-sm $space-xl $space-md; padding: $space-sm $space-xl $space-md;
} }
.nav-back { @include nav-back; } .nav-back {
@include nav-back;
}
.nav-title { .nav-title {
flex: 1; flex: 1;
@@ -292,7 +303,9 @@ function goBack() {
color: $text; color: $text;
} }
.nav-placeholder { width: 88rpx; } .nav-placeholder {
width: 88rpx;
}
.stats-card { .stats-card {
margin: $space-md $space-xl; margin: $space-md $space-xl;
@@ -333,7 +346,9 @@ function goBack() {
gap: $space-sm; gap: $space-sm;
padding: $space-xs 0; padding: $space-xs 0;
&:active { opacity: 0.7; } &:active {
opacity: 0.7;
}
} }
.event-tag { .event-tag {
@@ -341,18 +356,34 @@ function goBack() {
border-radius: $radius-xs; border-radius: $radius-xs;
flex-shrink: 0; flex-shrink: 0;
&.page { background: #E3F2FD; } &.page {
&.action { background: #E8F5E9; } background: #E3F2FD;
&.error { background: #FFEBEE; } }
&.action {
background: #E8F5E9;
}
&.error {
background: #FFEBEE;
}
} }
.event-tag-text { .event-tag-text {
font-size: $font-sm; font-size: $font-sm;
font-weight: 500; font-weight: 500;
.page & { color: #1976D2; } .page & {
.action & { color: #388E3C; } color: #1976D2;
.error & { color: #D32F2F; } }
.action & {
color: #388E3C;
}
.error & {
color: #D32F2F;
}
} }
.event-bar { .event-bar {
@@ -472,7 +503,9 @@ function goBack() {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
&:active { opacity: 0.8; } &:active {
opacity: 0.8;
}
} }
.search-btn-text { .search-btn-text {
@@ -491,7 +524,6 @@ function goBack() {
display: flex; display: flex;
gap: $space-xs; gap: $space-xs;
white-space: nowrap; white-space: nowrap;
width: 100%;
} }
.filter-tab { .filter-tab {
@@ -520,7 +552,9 @@ function goBack() {
padding: $space-md; padding: $space-md;
border-bottom: 1rpx solid $border; border-bottom: 1rpx solid $border;
&:last-child { border-bottom: none; } &:last-child {
border-bottom: none;
}
} }
.record-header { .record-header {
@@ -534,18 +568,34 @@ function goBack() {
padding: 2rpx 12rpx; padding: 2rpx 12rpx;
border-radius: $radius-xs; border-radius: $radius-xs;
&.page { background: #E3F2FD; } &.page {
&.action { background: #E8F5E9; } background: #E3F2FD;
&.error { background: #FFEBEE; } }
&.action {
background: #E8F5E9;
}
&.error {
background: #FFEBEE;
}
} }
.record-event-text { .record-event-text {
font-size: $font-xs; font-size: $font-xs;
font-weight: 500; font-weight: 500;
.page & { color: #1976D2; } .page & {
.action & { color: #388E3C; } color: #1976D2;
.error & { color: #D32F2F; } }
.action & {
color: #388E3C;
}
.error & {
color: #D32F2F;
}
} }
.record-time { .record-time {
@@ -578,7 +628,8 @@ function goBack() {
border-radius: $radius-sm; border-radius: $radius-sm;
} }
.loading-box, .empty-box { .loading-box,
.empty-box {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -601,6 +652,8 @@ function goBack() {
} }
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
.bar-fill { transition: none; } .bar-fill {
transition: none;
}
} }
</style> </style>

View File

@@ -66,7 +66,7 @@
:fixed="true" :fixed="true"
size="large" size="large"
unit="元" unit="元"
:auto-focus="true" :auto-focus="false"
@confirm="onConfirm" @confirm="onConfirm"
/> />
</view> </view>
@@ -197,7 +197,10 @@ function goBack() {
.page { .page {
min-height: 100vh; min-height: 100vh;
background: $bg; 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 { .header-fixed {