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> </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 <scroll-view
class="scroll-container" class="scroll-container"
scroll-y scroll-y
@@ -24,28 +46,6 @@
@refresherrefresh="onRefresh" @refresherrefresh="onRefresh"
@scrolltolower="onLoadMore" @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-if="logsStore.loading && logsStore.logs.length === 0" class="skeleton">
<view v-for="i in 3" :key="i" class="skeleton-item"> <view v-for="i in 3" :key="i" class="skeleton-item">
<view class="skeleton-dot"></view> <view class="skeleton-dot"></view>
@@ -359,13 +359,14 @@ onShareAppMessage(() => {
<style scoped> <style scoped>
.page { .page {
min-height: 100vh; height: 100vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background: background:
linear-gradient(180deg, #F6F8F6 0%, #EFF4F1 54%, #E9F0EC 100%); linear-gradient(180deg, #F6F8F6 0%, #EFF4F1 54%, #E9F0EC 100%);
padding: 0 32rpx; padding: 0 32rpx;
box-sizing: border-box; box-sizing: border-box;
overflow: hidden;
} }
.filters-sticky { .filters-sticky {
@@ -413,7 +414,8 @@ onShareAppMessage(() => {
display: grid; display: grid;
grid-template-columns: 1.25fr 1fr 1fr; grid-template-columns: 1.25fr 1fr 1fr;
gap: 14rpx; gap: 14rpx;
margin-bottom: 24rpx; margin-bottom: 20rpx;
flex-shrink: 0;
} }
.overview-item { .overview-item {
@@ -470,6 +472,7 @@ onShareAppMessage(() => {
justify-content: space-between; justify-content: space-between;
gap: 16rpx; gap: 16rpx;
margin-bottom: 18rpx; margin-bottom: 18rpx;
flex-shrink: 0;
} }
.section-label { .section-label {
@@ -487,6 +490,7 @@ onShareAppMessage(() => {
.scroll-container { .scroll-container {
flex: 1; flex: 1;
height: 0;
min-height: 0; min-height: 0;
position: relative; position: relative;
z-index: 0; z-index: 0;