feat(logs): add overview section and enhance layout for better data visibility

This commit is contained in:
nepiedg
2026-04-27 00:40:23 +08:00
parent 4d68477a13
commit 88c78fac55
+28 -24
View File
@@ -16,6 +16,28 @@
</view>
</view>
<view class="overview">
<view class="overview-item overview-primary">
<text class="overview-label">今日已抽</text>
<text class="overview-value">{{ todaySmokeCount }}</text>
<text class="overview-unit"></text>
</view>
<view class="overview-item">
<text class="overview-label">当前列表</text>
<text class="overview-value">{{ filteredLogs.length }}</text>
<text class="overview-unit"></text>
</view>
<view class="overview-item">
<text class="overview-label">最近记录</text>
<text class="overview-clock">{{ latestDisplayTime }}</text>
</view>
</view>
<view class="section-head">
<text class="section-label">时间记录</text>
<text class="section-note">{{ currentDateFilterLabel }} · 按日期倒序</text>
</view>
<scroll-view
class="scroll-container"
scroll-y
@@ -24,28 +46,6 @@
@refresherrefresh="onRefresh"
@scrolltolower="onLoadMore"
>
<view class="overview">
<view class="overview-item overview-primary">
<text class="overview-label">今日已抽</text>
<text class="overview-value">{{ todaySmokeCount }}</text>
<text class="overview-unit"></text>
</view>
<view class="overview-item">
<text class="overview-label">当前列表</text>
<text class="overview-value">{{ filteredLogs.length }}</text>
<text class="overview-unit"></text>
</view>
<view class="overview-item">
<text class="overview-label">最近记录</text>
<text class="overview-clock">{{ latestDisplayTime }}</text>
</view>
</view>
<view class="section-head">
<text class="section-label">时间记录</text>
<text class="section-note">{{ currentDateFilterLabel }} · 按日期倒序</text>
</view>
<view v-if="logsStore.loading && logsStore.logs.length === 0" class="skeleton">
<view v-for="i in 3" :key="i" class="skeleton-item">
<view class="skeleton-dot"></view>
@@ -359,13 +359,14 @@ onShareAppMessage(() => {
<style scoped>
.page {
min-height: 100vh;
height: 100vh;
display: flex;
flex-direction: column;
background:
linear-gradient(180deg, #F6F8F6 0%, #EFF4F1 54%, #E9F0EC 100%);
padding: 0 32rpx;
box-sizing: border-box;
overflow: hidden;
}
.filters-sticky {
@@ -413,7 +414,8 @@ onShareAppMessage(() => {
display: grid;
grid-template-columns: 1.25fr 1fr 1fr;
gap: 14rpx;
margin-bottom: 24rpx;
margin-bottom: 20rpx;
flex-shrink: 0;
}
.overview-item {
@@ -470,6 +472,7 @@ onShareAppMessage(() => {
justify-content: space-between;
gap: 16rpx;
margin-bottom: 18rpx;
flex-shrink: 0;
}
.section-label {
@@ -487,6 +490,7 @@ onShareAppMessage(() => {
.scroll-container {
flex: 1;
height: 0;
min-height: 0;
position: relative;
z-index: 0;