From 203f97385be7770f2ddaa92e0f1b54485e4f46c8 Mon Sep 17 00:00:00 2001
From: nepiedg <yunchuansong@163.com>
Date: Mon, 27 Apr 2026 00:11:13 +0800
Subject: [PATCH] feat: enhance logs and stats UI with new headers, summaries,
 and improved data display

---
 src/pages/logs/index.vue           | 289 +++++++++++++++++-----
 src/pages/stats-calendar/index.vue | 381 +++++++++++++++++++++++------
 src/pages/stats/index.vue          |  90 ++++---
 3 files changed, 600 insertions(+), 160 deletions(-)

diff --git a/src/pages/logs/index.vue b/src/pages/logs/index.vue
index d72be7c..f60b813 100644
--- a/src/pages/logs/index.vue
+++ b/src/pages/logs/index.vue
@@ -1,5 +1,16 @@
 <template>
 	<view class="page">
+		<view class="page-head">
+			<view>
+				<text class="page-title">记录时间线</text>
+				<text class="page-subtitle">按时间回看真实抽烟节奏</text>
+			</view>
+			<view class="head-action" @tap="addLog">
+				<text class="head-action-plus">+</text>
+				<text>记录</text>
+			</view>
+		</view>
+
 		<view class="filters-sticky">
 			<view class="filters">
 				<view class="tabs">
@@ -24,7 +35,27 @@
 			@refresherrefresh="onRefresh"
 			@scrolltolower="onLoadMore"
 		>
-			<text class="section-label">时间记录</text>
+			<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">{{ currentTab === 'smoke' ? '仅看抽烟记录' : '按日期倒序' }}</text>
+			</view>
 
 			<view v-if="logsStore.loading && logsStore.logs.length === 0" class="skeleton">
 				<view v-for="i in 3" :key="i" class="skeleton-item">
@@ -56,12 +87,12 @@
 									<view class="log-time-tag">
 										<text class="log-time">{{ log.displayTime || '--:--' }}</text>
 										<text class="log-tag" :class="log.type === 'resisted' ? 'tag-resisted' : 'tag-smoke'">
-											{{ log.type === 'resisted' ? '已忍住' : '已抽烟' }}
+											{{ log.type === 'resisted' ? '旧记录' : '已抽烟' }}
 										</text>
 									</view>
 									<view class="log-right">
 										<text v-if="log.type === 'smoke'" class="count-pill">{{ log.num !== undefined && log.num !== null ? log.num : 0 }}根</text>
-										<text v-else class="thumb-pill">👍</text>
+										<text v-else class="thumb-pill">0根</text>
 									</view>
 								</view>
 								
@@ -103,7 +134,7 @@
 					<text class="empty-icon">记</text>
 				</view>
 				<text class="empty-text">今天还没有记录</text>
-				<text class="empty-hint">点击右下角悬浮按钮，快速记录抽烟或忍住的时刻，时间线会从这里开始。</text>
+				<text class="empty-hint">完成一次抽烟记录后，时间线会从这里开始生成。</text>
 				<view class="empty-action" @tap="addLog">立即记录</view>
 			</view>
 
@@ -143,8 +174,7 @@ const logsStore = useLogsStore()
 
 const tabs = [
 	{ label: '全部', value: 'all' },
-	{ label: '已抽烟', value: 'smoke' },
-	{ label: '已忍住', value: 'resisted' }
+	{ label: '抽烟记录', value: 'smoke' }
 ]
 
 const currentTab = ref('all')
@@ -174,6 +204,20 @@ const groupedLogs = computed(() => {
 	}, {})
 })
 
+const todaySmokeCount = computed(() => {
+	const today = localDateStr(new Date())
+	return logsStore.formattedLogs.reduce((total, log) => {
+		if (log.displayDate !== today || log.type !== 'smoke') return total
+		return total + (Number(log.num) || 0)
+	}, 0)
+})
+
+const latestDisplayTime = computed(() => {
+	const latest = logsStore.formattedLogs[0]
+	if (!latest) return '--:--'
+	return latest.displayTime || '--:--'
+})
+
 // 本地日期 YYYY-MM-DD（避免 toISOString 用 UTC 导致日期差一天）
 function localDateStr(d) {
 	const y = d.getFullYear()
@@ -250,7 +294,7 @@ async function handleUpdate(data) {
 function handleDelete(log) {
 	uni.showModal({
 		title: '确认删除',
-		content: `确定要删除这条${log.type === 'resisted' ? '忍住' : '抽烟'}记录吗？`,
+		content: `确定要删除这条${log.type === 'resisted' ? '旧' : '抽烟'}记录吗？`,
 		confirmColor: '#EF4444',
 		success: async (res) => {
 			if (res.confirm) {
@@ -311,14 +355,62 @@ onShareAppMessage(() => {
 	min-height: 100vh;
 	display: flex;
 	flex-direction: column;
-	background-color: #F5F7F6;
+	background:
+		radial-gradient(circle at 10% 0%, rgba(103, 232, 249, 0.16), transparent 32%),
+		linear-gradient(180deg, #F6F8F6 0%, #EFF4F1 54%, #E9F0EC 100%);
 	padding: 0 32rpx;
 	box-sizing: border-box;
 }
 
+.page-head {
+	flex-shrink: 0;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 24rpx;
+	padding: 34rpx 0 18rpx;
+}
+
+.page-title {
+	display: block;
+	font-size: 42rpx;
+	line-height: 1.2;
+	font-weight: 900;
+	color: #1E293B;
+}
+
+.page-subtitle {
+	display: block;
+	margin-top: 8rpx;
+	font-size: 23rpx;
+	line-height: 1.45;
+	color: #64748B;
+}
+
+.head-action {
+	flex-shrink: 0;
+	height: 62rpx;
+	padding: 0 20rpx;
+	display: flex;
+	align-items: center;
+	gap: 8rpx;
+	border-radius: 999rpx;
+	background: linear-gradient(135deg, #10B981, #06B6D4);
+	box-shadow: 0 12rpx 28rpx rgba(16, 185, 129, 0.18);
+	color: #FFFFFF;
+	font-size: 23rpx;
+	font-weight: 900;
+}
+
+.head-action-plus {
+	font-size: 32rpx;
+	line-height: 1;
+	font-weight: 700;
+}
+
 .filters-sticky {
 	position: relative;
-	height: 120rpx;
+	height: 96rpx;
 	flex-shrink: 0;
 	z-index: 20;
 }
@@ -328,38 +420,109 @@ onShareAppMessage(() => {
 	left: 32rpx;
 	right: 32rpx;
 	z-index: 50;
-	margin: 12rpx 0 0;
+	margin: 8rpx 0 0;
 }
 
 .tabs {
 	display: flex;
-	background: #FFFFFF;
-	border-radius: 24rpx;
+	background: rgba(255, 255, 255, 0.82);
+	border: 1rpx solid rgba(226, 232, 240, 0.82);
+	border-radius: 22rpx;
 	padding: 6rpx;
-	box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.03);
+	box-shadow: 0 12rpx 30rpx rgba(30, 41, 59, 0.06);
+	backdrop-filter: blur(12px);
 }
 
 .tab {
 	flex: 1;
 	text-align: center;
-	padding: 16rpx 0;
-	border-radius: 20rpx;
-	font-size: 26rpx;
-	font-weight: 600;
-	color: #999999;
+	padding: 15rpx 0;
+	border-radius: 18rpx;
+	font-size: 25rpx;
+	font-weight: 900;
+	color: #64748B;
 }
 
 .tab-active {
-	background: #10B981;
+	background: linear-gradient(135deg, #10B981, #06B6D4);
 	color: #FFFFFF;
+	box-shadow: 0 8rpx 18rpx rgba(16, 185, 129, 0.16);
+}
+
+.overview {
+	display: grid;
+	grid-template-columns: 1.25fr 1fr 1fr;
+	gap: 14rpx;
+	margin-bottom: 24rpx;
+}
+
+.overview-item {
+	min-width: 0;
+	padding: 20rpx 18rpx;
+	border-radius: 26rpx;
+	background: rgba(255, 255, 255, 0.76);
+	border: 1rpx solid rgba(255, 255, 255, 0.82);
+	box-shadow: 0 12rpx 30rpx rgba(30, 41, 59, 0.05);
+}
+
+.overview-primary {
+	background:
+		radial-gradient(circle at top right, rgba(251, 191, 36, 0.18), transparent 36%),
+		rgba(255, 255, 255, 0.78);
+}
+
+.overview-label {
+	display: block;
+	font-size: 20rpx;
+	line-height: 1.3;
+	font-weight: 800;
+	color: #64748B;
+}
+
+.overview-value {
+	display: inline-block;
+	margin-top: 8rpx;
+	font-size: 40rpx;
+	line-height: 1;
+	font-weight: 900;
+	color: #1E293B;
+}
+
+.overview-unit {
+	margin-left: 4rpx;
+	font-size: 20rpx;
+	font-weight: 800;
+	color: #64748B;
+}
+
+.overview-clock {
+	display: block;
+	margin-top: 12rpx;
+	font-size: 30rpx;
+	line-height: 1;
+	font-weight: 900;
+	color: #0F766E;
+}
+
+.section-head {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 16rpx;
+	margin-bottom: 18rpx;
 }
 
 .section-label {
 	display: block;
-	margin: 0 0 18rpx 6rpx;
-	font-size: 28rpx;
-	font-weight: 600;
-	color: #666666;
+	font-size: 29rpx;
+	font-weight: 900;
+	color: #1E293B;
+}
+
+.section-note {
+	font-size: 21rpx;
+	font-weight: 800;
+	color: #64748B;
 }
 
 .scroll-container {
@@ -428,27 +591,31 @@ onShareAppMessage(() => {
 }
 
 .log-group {
-	margin-bottom: 28rpx;
+	margin-bottom: 30rpx;
 }
 
 .group-header {
 	display: flex;
 	align-items: center;
-	gap: 12rpx;
+	justify-content: space-between;
+	gap: 16rpx;
 	margin-bottom: 14rpx;
+	padding: 0 4rpx;
 }
 
 .group-title {
 	font-size: 28rpx;
-	font-weight: 700;
-	color: #1A1A1A;
+	font-weight: 900;
+	color: #1E293B;
 }
 
 .group-count {
-	font-size: 22rpx;
-	color: #999999;
-	background-color: #F0F0F0;
-	padding: 6rpx 16rpx;
+	font-size: 21rpx;
+	font-weight: 800;
+	color: #64748B;
+	background-color: rgba(255, 255, 255, 0.72);
+	border: 1rpx solid rgba(226, 232, 240, 0.72);
+	padding: 6rpx 14rpx;
 	border-radius: 999rpx;
 }
 
@@ -460,10 +627,11 @@ onShareAppMessage(() => {
 
 .log-card {
 	position: relative;
-	background: #FFFFFF;
-	border-radius: 24rpx;
-	padding: 24rpx 24rpx 20rpx 24rpx;
-	box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.03);
+	background: rgba(255, 255, 255, 0.82);
+	border: 1rpx solid rgba(255, 255, 255, 0.86);
+	border-radius: 28rpx;
+	padding: 24rpx 24rpx 20rpx;
+	box-shadow: 0 14rpx 34rpx rgba(30, 41, 59, 0.06);
 	display: flex;
 	gap: 20rpx;
 	overflow: hidden;
@@ -482,18 +650,18 @@ onShareAppMessage(() => {
 	left: 0;
 	top: 0;
 	bottom: 0;
-	width: 8rpx;
-	background-color: #10B981;
+	width: 7rpx;
+	background: linear-gradient(180deg, #67E8F9, #10B981);
 }
 
 .log-card-smoke .log-bar {
-	background-color: #F59E0B;
+	background: linear-gradient(180deg, #FBBF24, #D97706);
 }
 
 .log-icon {
-	width: 80rpx;
-	height: 80rpx;
-	border-radius: 20rpx;
+	width: 76rpx;
+	height: 76rpx;
+	border-radius: 24rpx;
 	display: flex;
 	align-items: center;
 	justify-content: center;
@@ -503,12 +671,12 @@ onShareAppMessage(() => {
 }
 
 .icon-resisted {
-	background-color: #E8F5F0;
-	color: #10B981;
+	background-color: rgba(232, 245, 240, 0.92);
+	color: #0F766E;
 }
 
 .icon-smoke {
-	background-color: #FEF3C7;
+	background: linear-gradient(135deg, rgba(254, 243, 199, 0.96), rgba(255, 251, 235, 0.9));
 	color: #D97706;
 }
 
@@ -532,16 +700,16 @@ onShareAppMessage(() => {
 }
 
 .log-time {
-	font-size: 30rpx;
-	font-weight: 700;
-	color: #1A1A1A;
+	font-size: 31rpx;
+	font-weight: 900;
+	color: #1E293B;
 }
 
 .log-tag {
 	font-size: 22rpx;
-	padding: 8rpx 16rpx;
+	padding: 7rpx 14rpx;
 	border-radius: 999rpx;
-	font-weight: 600;
+	font-weight: 900;
 }
 
 .tag-smoke {
@@ -564,10 +732,10 @@ onShareAppMessage(() => {
 .count-pill {
 	font-size: 22rpx;
 	color: #D97706;
-	background-color: #FEF3C7;
+	background-color: rgba(254, 243, 199, 0.92);
 	padding: 8rpx 16rpx;
 	border-radius: 999rpx;
-	font-weight: 600;
+	font-weight: 900;
 }
 
 .thumb-pill {
@@ -580,9 +748,9 @@ onShareAppMessage(() => {
 
 .log-desc {
 	font-size: 25rpx;
-	color: #666666;
-	line-height: 1.5;
-	margin-bottom: 10rpx;
+	color: #475569;
+	line-height: 1.55;
+	margin-bottom: 12rpx;
 }
 
 .reason-tag-row {
@@ -612,7 +780,7 @@ onShareAppMessage(() => {
 
 .level-text {
 	font-size: 22rpx;
-	font-weight: 600;
+	font-weight: 800;
 }
 
 .log-interval {
@@ -627,12 +795,13 @@ onShareAppMessage(() => {
 	display: flex;
 	justify-content: flex-end;
 	gap: 16rpx;
-	margin-top: 12rpx;
+	margin-top: 16rpx;
 }
 
 .action-btn {
 	font-size: 22rpx;
-	padding: 8rpx 16rpx;
+	font-weight: 900;
+	padding: 9rpx 17rpx;
 	border-radius: 999rpx;
 }
 
@@ -678,7 +847,9 @@ onShareAppMessage(() => {
 	justify-content: center;
 	padding: 132rpx 32rpx 116rpx;
 	border-radius: 32rpx;
-	background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(247, 250, 248, 0.94) 100%);
+	background:
+		radial-gradient(circle at top, rgba(103, 232, 249, 0.18), transparent 38%),
+		linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(247, 250, 248, 0.9) 100%);
 	box-shadow: 0 16rpx 38rpx rgba(15, 23, 42, 0.06);
 	overflow: hidden;
 }
@@ -753,7 +924,7 @@ onShareAppMessage(() => {
 	min-width: 170rpx;
 	height: 96rpx;
 	padding: 0 24rpx;
-	background: linear-gradient(180deg, #16C38B 0%, #10B981 100%);
+	background: linear-gradient(135deg, #10B981, #06B6D4);
 	border-radius: 999rpx;
 	display: flex;
 	align-items: center;
diff --git a/src/pages/stats-calendar/index.vue b/src/pages/stats-calendar/index.vue
index 6564376..123e3c0 100644
--- a/src/pages/stats-calendar/index.vue
+++ b/src/pages/stats-calendar/index.vue
@@ -1,5 +1,12 @@
 <template>
 	<view class="page">
+		<view class="page-head">
+			<view>
+				<text class="page-title">日历详情</text>
+				<text class="page-subtitle">按天查看吸烟数量和记录内容</text>
+			</view>
+			<view class="today-pill" @tap="goToday">今天</view>
+		</view>
 
 		<view class="card">
 			<view class="month-bar">
@@ -20,17 +27,17 @@
 					</view>
 				</view>
 				<view class="summary-chip summary-chip-soft">
-					<text class="summary-chip-label">本月忍住</text>
+					<text class="summary-chip-label">日均支数</text>
 					<view class="summary-chip-value-row">
-						<text class="summary-chip-value">{{ monthResistedTotal }}</text>
-						<text class="summary-chip-unit">次</text>
+						<text class="summary-chip-value">{{ averageDailySmoke }}</text>
+						<text class="summary-chip-unit">支</text>
 					</view>
 				</view>
 				<view class="summary-chip summary-chip-soft">
-					<text class="summary-chip-label">记录天数</text>
+					<text class="summary-chip-label">最高单日</text>
 					<view class="summary-chip-value-row">
-						<text class="summary-chip-value">{{ activeDayCount }}</text>
-						<text class="summary-chip-unit">天</text>
+						<text class="summary-chip-value">{{ peakDaySmoke }}</text>
+						<text class="summary-chip-unit">支</text>
 					</view>
 				</view>
 			</view>
@@ -41,8 +48,8 @@
 					<text class="legend-text">已抽</text>
 				</view>
 				<view class="legend-item">
-					<view class="legend-dot legend-dot-resisted"></view>
-					<text class="legend-text">忍住</text>
+					<view class="legend-dot legend-dot-selected"></view>
+					<text class="legend-text">选中日期</text>
 				</view>
 				<text class="legend-tip">点击灰色日期可切换到对应月份</text>
 			</view>
@@ -76,6 +83,36 @@
 			</view>
 		</view>
 
+		<view class="detail-card">
+			<view class="detail-head">
+				<view>
+					<text class="detail-title">{{ selectedDateLabel }}</text>
+					<text class="detail-subtitle">{{ selectedDaySummary }}</text>
+				</view>
+				<view class="detail-total">
+					<text class="detail-total-value">{{ selectedSmokeCount }}</text>
+					<text class="detail-total-unit">支</text>
+				</view>
+			</view>
+
+			<view v-if="selectedDayLogs.length > 0" class="log-list">
+				<view v-for="item in selectedDayLogs" :key="item.id || item.smoke_at || item.createtime" class="log-item">
+					<view class="log-time">{{ formatLogTime(item) }}</view>
+					<view class="log-main">
+						<view class="log-line">
+							<text class="log-count">{{ Number(item.num) || 0 }} 支</text>
+							<text v-if="item.scene || item.reason" class="log-tag">{{ item.scene || item.reason }}</text>
+						</view>
+						<text v-if="item.remark" class="log-remark">{{ item.remark }}</text>
+					</view>
+				</view>
+			</view>
+			<view v-else class="empty-detail">
+				<text class="empty-title">这天还没有吸烟记录</text>
+				<text class="empty-text">保持记录后，日历会更准确地显示少抽趋势。</text>
+			</view>
+		</view>
+
 		<view class="bottom-safe"></view>
 	</view>
 </template>
@@ -118,7 +155,7 @@ const calendarDays = computed(() => {
 
 	for (let date = new Date(gridStart); date <= gridEnd; date = addDays(date, 1)) {
 		const dateKey = formatDate(date)
-		const summary = summaryMap.get(dateKey) || { smokeCount: 0, resistedCount: 0 }
+		const summary = summaryMap.get(dateKey) || { smokeCount: 0 }
 		result.push({
 			key: dateKey,
 			date: dateKey,
@@ -126,8 +163,7 @@ const calendarDays = computed(() => {
 			isCurrentMonth: date.getMonth() === monthStart.getMonth(),
 			isToday: dateKey === todayText,
 			isFuture: dateKey > todayText,
-			smokeCount: summary.smokeCount,
-			resistedCount: summary.resistedCount
+			smokeCount: summary.smokeCount
 		})
 	}
 
@@ -135,19 +171,45 @@ const calendarDays = computed(() => {
 })
 
 const monthSmokeTotal = computed(() => {
-	return monthLogs.value.reduce((total, item) => {
-		return normalizeLogType(item) === 'resisted' ? total : total + (Number(item.num) || 0)
-	}, 0)
-})
-
-const monthResistedTotal = computed(() => {
-	return monthLogs.value.reduce((total, item) => {
-		return normalizeLogType(item) === 'resisted' ? total + 1 : total
-	}, 0)
+	return monthLogs.value.reduce((total, item) => total + (Number(item.num) || 0), 0)
 })
 
 const activeDayCount = computed(() => monthSummaryMap.value.size)
 
+const averageDailySmoke = computed(() => {
+	if (activeDayCount.value <= 0) return '0.0'
+	return (monthSmokeTotal.value / activeDayCount.value).toFixed(1)
+})
+
+const peakDaySmoke = computed(() => {
+	let max = 0
+	monthSummaryMap.value.forEach(item => {
+		if (item.smokeCount > max) max = item.smokeCount
+	})
+	return max
+})
+
+const selectedDayLogs = computed(() => {
+	return monthLogs.value
+		.filter(item => resolveLogDate(item) === selectedDate.value)
+		.sort((a, b) => getLogTimestamp(b) - getLogTimestamp(a))
+})
+
+const selectedSmokeCount = computed(() => {
+	return selectedDayLogs.value.reduce((total, item) => total + (Number(item.num) || 0), 0)
+})
+
+const selectedDateLabel = computed(() => {
+	const date = parseDate(selectedDate.value)
+	if (!date) return selectedDate.value
+	return `${date.getMonth() + 1}月${date.getDate()}日 周${weekdayNames[date.getDay()]}`
+})
+
+const selectedDaySummary = computed(() => {
+	if (selectedDayLogs.value.length === 0) return '无记录'
+	return `${selectedDayLogs.value.length} 条记录 · 本月已记录 ${activeDayCount.value} 天`
+})
+
 async function fetchMonthLogs() {
 	const start = formatDate(startOfMonth(currentMonth.value))
 	const end = formatDate(endOfMonth(currentMonth.value))
@@ -156,7 +218,7 @@ async function fetchMonthLogs() {
 		const res = await api.getLogs({
 			page: 1,
 			page_size: 200,
-			type: 'all',
+			type: 'smoke',
 			start,
 			end
 		})
@@ -185,6 +247,10 @@ async function changeMonth(offset) {
 	await fetchMonthLogs()
 }
 
+async function goToday() {
+	await initPage(todayText)
+}
+
 async function selectDay(item) {
 	if (item.isFuture) return
 	if (!item.isCurrentMonth) {
@@ -205,12 +271,8 @@ function buildDailySummaryMap(logs) {
 	logs.forEach(log => {
 		const dateKey = resolveLogDate(log)
 		if (!dateKey) return
-		const current = map.get(dateKey) || { smokeCount: 0, resistedCount: 0 }
-		if (normalizeLogType(log) === 'resisted') {
-			current.resistedCount += 1
-		} else {
-			current.smokeCount += Number(log.num) || 0
-		}
+		const current = map.get(dateKey) || { smokeCount: 0 }
+		current.smokeCount += Number(log.num) || 0
 		map.set(dateKey, current)
 	})
 	return map
@@ -229,21 +291,6 @@ function resolveLogDate(log) {
 	return ''
 }
 
-function normalizeLogType(log) {
-	const rawType = log?.type
-	if (typeof rawType === 'string') {
-		const value = rawType.toLowerCase()
-		if (value === 'resisted' || value === 'resist') return 'resisted'
-		if (value === 'smoke' || value === 'log_smoke') return 'smoke'
-	}
-	if (typeof rawType === 'number') {
-		if (rawType === 0) return 'resisted'
-		if (rawType === 1) return 'smoke'
-	}
-	if (log?.num === 0) return 'resisted'
-	return 'smoke'
-}
-
 function parseDate(value) {
 	if (!value) return null
 	const date = new Date(`${value}T00:00:00`)
@@ -283,22 +330,79 @@ function addDays(date, offset) {
 	result.setDate(result.getDate() + offset)
 	return result
 }
+
+function getLogTimestamp(log) {
+	if (log?.smoke_at) return new Date(log.smoke_at).getTime() || 0
+	if (typeof log?.smoke_time === 'string') return new Date(log.smoke_time).getTime() || 0
+	if (log?.createtime) {
+		return typeof log.createtime === 'number'
+			? log.createtime * 1000
+			: new Date(log.createtime).getTime() || 0
+	}
+	return 0
+}
+
+function formatLogTime(log) {
+	const timestamp = getLogTimestamp(log)
+	if (!timestamp) return '--:--'
+	const date = new Date(timestamp)
+	const hour = String(date.getHours()).padStart(2, '0')
+	const minute = String(date.getMinutes()).padStart(2, '0')
+	return `${hour}:${minute}`
+}
 </script>
 
 <style scoped>
 .page {
 	min-height: 100vh;
-	background-color: #F5F7F6;
-	padding: 24rpx 32rpx;
+	background: linear-gradient(180deg, #E6F7F2 0%, #F4FBF8 42%, #FBFFFD 100%);
+	padding: 28rpx 28rpx 0;
 	box-sizing: border-box;
 }
 
+.page-head {
+	display: flex;
+	align-items: flex-end;
+	justify-content: space-between;
+	gap: 20rpx;
+	margin-bottom: 24rpx;
+}
+
+.page-title {
+	display: block;
+	font-size: 44rpx;
+	font-weight: 800;
+	line-height: 1.15;
+	color: #0D3D2E;
+}
+
+.page-subtitle {
+	display: block;
+	margin-top: 8rpx;
+	font-size: 23rpx;
+	line-height: 1.5;
+	color: #5D8F7C;
+}
+
+.today-pill {
+	flex-shrink: 0;
+	padding: 12rpx 20rpx;
+	border-radius: 999rpx;
+	background: rgba(255, 255, 255, 0.82);
+	border: 1.5rpx solid rgba(52, 200, 160, 0.16);
+	color: #158461;
+	font-size: 23rpx;
+	font-weight: 700;
+	box-shadow: 0 6rpx 18rpx rgba(52, 200, 160, 0.08);
+}
+
 .card {
-	background: #FFFFFF;
-	border-radius: 32rpx;
-	padding: 28rpx 24rpx;
-	margin-bottom: 16rpx;
-	box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.03);
+	background: rgba(255, 255, 255, 0.9);
+	border-radius: 24rpx;
+	padding: 24rpx;
+	margin-bottom: 20rpx;
+	border: 1.5rpx solid rgba(52, 200, 160, 0.14);
+	box-shadow: 0 6rpx 22rpx rgba(52, 200, 160, 0.08);
 	box-sizing: border-box;
 }
 
@@ -313,13 +417,14 @@ function addDays(date, offset) {
 .month-arrow {
 	width: 56rpx;
 	height: 56rpx;
-	border-radius: 50%;
+	border-radius: 18rpx;
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	background: #F5F7F6;
+	background: rgba(52, 200, 160, 0.08);
 	font-size: 36rpx;
-	color: #1A1A1A;
+	color: #0D3D2E;
+	font-weight: 700;
 	flex-shrink: 0;
 }
 
@@ -336,14 +441,14 @@ function addDays(date, offset) {
 	display: block;
 	font-size: 32rpx;
 	font-weight: 700;
-	color: #1A1A1A;
+	color: #0D3D2E;
 }
 
 .month-subtitle {
 	display: block;
 	margin-top: 4rpx;
 	font-size: 22rpx;
-	color: #999999;
+	color: #7AA898;
 }
 
 .summary-row {
@@ -356,17 +461,19 @@ function addDays(date, offset) {
 	flex: 1;
 	padding: 16rpx 14rpx;
 	border-radius: 16rpx;
-	background: #F5F7F6;
+	background: rgba(52, 200, 160, 0.1);
+	border: 1.5rpx solid rgba(52, 200, 160, 0.12);
 }
 
 .summary-chip-soft {
-	background: #F5F7F6;
+	background: rgba(59, 130, 246, 0.06);
+	border-color: rgba(59, 130, 246, 0.1);
 }
 
 .summary-chip-label {
 	display: block;
 	font-size: 20rpx;
-	color: #999999;
+	color: #6B9B8A;
 }
 
 .summary-chip-value-row {
@@ -380,12 +487,12 @@ function addDays(date, offset) {
 	font-size: 36rpx;
 	font-weight: 800;
 	line-height: 1;
-	color: #1A1A1A;
+	color: #0D3D2E;
 }
 
 .summary-chip-unit {
 	font-size: 20rpx;
-	color: #999999;
+	color: #7AA898;
 }
 
 .calendar-legend {
@@ -396,7 +503,7 @@ function addDays(date, offset) {
 	margin-bottom: 20rpx;
 	padding: 14rpx 16rpx;
 	border-radius: 16rpx;
-	background: #F9FBFA;
+	background: rgba(52, 200, 160, 0.06);
 }
 
 .legend-item {
@@ -415,19 +522,19 @@ function addDays(date, offset) {
 	background: #10B981;
 }
 
-.legend-dot-resisted {
-	background: #A7F3D0;
+.legend-dot-selected {
+	background: #F59E0B;
 }
 
 .legend-text {
 	font-size: 22rpx;
-	color: #666666;
+	color: #52806E;
 }
 
 .legend-tip {
 	margin-left: auto;
 	font-size: 20rpx;
-	color: #CCCCCC;
+	color: #9ABDAE;
 }
 
 .weekday-row {
@@ -440,7 +547,7 @@ function addDays(date, offset) {
 	text-align: center;
 	font-size: 22rpx;
 	font-weight: 600;
-	color: #999999;
+	color: #7AA898;
 }
 
 .calendar-grid {
@@ -453,20 +560,21 @@ function addDays(date, offset) {
 	aspect-ratio: 1 / 1.15;
 	padding: 10rpx 6rpx 8rpx;
 	border-radius: 16rpx;
-	background: #F9FBFA;
+	background: rgba(52, 200, 160, 0.05);
 	display: flex;
 	flex-direction: column;
 	justify-content: space-between;
 	box-sizing: border-box;
+	border: 1.5rpx solid transparent;
 }
 
 .calendar-cell-selected {
-	background: #E8F5F0;
-	border: 2rpx solid #10B981;
+	background: rgba(255, 251, 235, 0.9);
+	border-color: rgba(245, 158, 11, 0.55);
 }
 
 .calendar-cell-today {
-	background: #E8F5F0;
+	background: rgba(52, 200, 160, 0.12);
 }
 
 .calendar-cell-muted {
@@ -486,7 +594,7 @@ function addDays(date, offset) {
 .calendar-day {
 	font-size: 22rpx;
 	font-weight: 700;
-	color: #1A1A1A;
+	color: #0D3D2E;
 }
 
 .calendar-today-dot {
@@ -512,7 +620,138 @@ function addDays(date, offset) {
 .calendar-count-unit {
 	font-size: 16rpx;
 	font-weight: 600;
-	color: #999999;
+	color: #7AA898;
+}
+
+.detail-card {
+	background: rgba(255, 255, 255, 0.9);
+	border-radius: 24rpx;
+	padding: 24rpx;
+	border: 1.5rpx solid rgba(52, 200, 160, 0.14);
+	box-shadow: 0 6rpx 22rpx rgba(52, 200, 160, 0.08);
+}
+
+.detail-head {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 20rpx;
+	margin-bottom: 20rpx;
+}
+
+.detail-title {
+	display: block;
+	font-size: 30rpx;
+	font-weight: 800;
+	color: #0D3D2E;
+}
+
+.detail-subtitle {
+	display: block;
+	margin-top: 6rpx;
+	font-size: 22rpx;
+	color: #6B9B8A;
+}
+
+.detail-total {
+	flex-shrink: 0;
+	min-width: 112rpx;
+	padding: 12rpx 16rpx;
+	border-radius: 18rpx;
+	background: rgba(52, 200, 160, 0.1);
+	text-align: center;
+}
+
+.detail-total-value {
+	font-size: 34rpx;
+	font-weight: 800;
+	line-height: 1;
+	color: #0D3D2E;
+}
+
+.detail-total-unit {
+	margin-left: 4rpx;
+	font-size: 20rpx;
+	color: #6B9B8A;
+}
+
+.log-list {
+	display: flex;
+	flex-direction: column;
+	gap: 12rpx;
+}
+
+.log-item {
+	display: flex;
+	gap: 16rpx;
+	align-items: flex-start;
+	padding: 16rpx;
+	border-radius: 18rpx;
+	background: rgba(52, 200, 160, 0.05);
+}
+
+.log-time {
+	width: 78rpx;
+	flex-shrink: 0;
+	font-size: 24rpx;
+	font-weight: 800;
+	color: #158461;
+}
+
+.log-main {
+	flex: 1;
+	min-width: 0;
+}
+
+.log-line {
+	display: flex;
+	align-items: center;
+	gap: 10rpx;
+	flex-wrap: wrap;
+}
+
+.log-count {
+	font-size: 26rpx;
+	font-weight: 800;
+	color: #0D3D2E;
+}
+
+.log-tag {
+	padding: 4rpx 10rpx;
+	border-radius: 999rpx;
+	background: rgba(59, 130, 246, 0.08);
+	color: #2563EB;
+	font-size: 20rpx;
+	font-weight: 700;
+}
+
+.log-remark {
+	display: block;
+	margin-top: 8rpx;
+	font-size: 23rpx;
+	line-height: 1.5;
+	color: #6B9B8A;
+	word-break: break-all;
+}
+
+.empty-detail {
+	padding: 28rpx;
+	border-radius: 20rpx;
+	background: rgba(52, 200, 160, 0.05);
+}
+
+.empty-title {
+	display: block;
+	font-size: 25rpx;
+	font-weight: 800;
+	color: #0D3D2E;
+	margin-bottom: 8rpx;
+}
+
+.empty-text {
+	font-size: 23rpx;
+	line-height: 1.5;
+	color: #6B9B8A;
 }
 
 .bottom-safe {
diff --git a/src/pages/stats/index.vue b/src/pages/stats/index.vue
index 13b42b4..647b301 100644
--- a/src/pages/stats/index.vue
+++ b/src/pages/stats/index.vue
@@ -2,6 +2,17 @@
 	<view class="page">
 		<view class="status-bar" :style="{ height: navBarHeight + 'px' }"></view>
 
+		<view class="page-head">
+			<view>
+				<text class="page-title">数据分析</text>
+				<text class="page-subtitle">少抽趋势、节省金额和健康恢复进度</text>
+			</view>
+			<view class="head-chip" :class="statusChipClass">
+				<text class="head-chip-arrow" :class="statusIconClass">{{ statusArrow }}</text>
+				<text>{{ statusText }}</text>
+			</view>
+		</view>
+
 		<!-- Tab 切换 -->
 		<view class="segment-wrap">
 			<view class="segment">
@@ -165,10 +176,10 @@
 				</view>
 			</view>
 			<view class="mini-card">
-				<text class="mini-label">已拒绝</text>
+				<text class="mini-label">累计少抽</text>
 				<view class="mini-value-row">
-					<text class="mini-value">{{ resistedTotal }}</text>
-					<text class="mini-unit">次</text>
+					<text class="mini-value">{{ reducedTotal }}</text>
+					<text class="mini-unit">支</text>
 				</view>
 			</view>
 		</view>
@@ -226,13 +237,6 @@ const insightText = computed(() => {
 	return `较上期上升 ${abs}%，留意高峰时段，尝试延迟第一支。`
 })
 
-const trendRangeText = computed(() => {
-	const start = statsData.value?.start
-	const end = statsData.value?.end
-	if (!start || !end) return ''
-	return formatRangeText(start, end)
-})
-
 const weeklyTrendRangeText = computed(() => {
 	const start = weeklyStatsData.value?.start
 	const end = weeklyStatsData.value?.end
@@ -431,7 +435,7 @@ const healthItems = computed(() => {
 })
 
 const streakDays = computed(() => statsData.value?.streak_days ?? 0)
-const resistedTotal = computed(() => statsData.value?.resisted_total ?? 0)
+const reducedTotal = computed(() => Math.max(moneyExpectedTotal.value - moneyActualTotal.value, 0))
 
 function formatRangeText(start, end) {
 	const startParts = start.split('-')
@@ -514,18 +518,59 @@ onShareAppMessage(() => {
 	background: transparent;
 }
 
+.page-head {
+	display: flex;
+	align-items: flex-end;
+	justify-content: space-between;
+	gap: 20rpx;
+	margin: 10rpx 0 24rpx;
+}
+
+.page-title {
+	display: block;
+	font-size: 44rpx;
+	font-weight: 800;
+	line-height: 1.15;
+	color: #0D3D2E;
+}
+
+.page-subtitle {
+	display: block;
+	margin-top: 8rpx;
+	font-size: 23rpx;
+	line-height: 1.5;
+	color: #5D8F7C;
+}
+
+.head-chip {
+	display: inline-flex;
+	align-items: center;
+	gap: 6rpx;
+	flex-shrink: 0;
+	padding: 10rpx 16rpx;
+	border-radius: 999rpx;
+	font-size: 21rpx;
+	font-weight: 700;
+	white-space: nowrap;
+	border: 1.5rpx solid rgba(52, 200, 160, 0.12);
+	background: rgba(255, 255, 255, 0.76);
+}
+
+.head-chip-arrow {
+	font-size: 20rpx;
+	font-weight: 800;
+}
+
 /* ── Tab 切换 ── */
 .segment-wrap {
 	position: relative;
-	height: 148rpx;
+	height: 112rpx;
 	flex-shrink: 0;
 	z-index: 20;
 }
 
 .segment {
-	position: fixed;
-	left: 28rpx;
-	right: 28rpx;
+	position: relative;
 	z-index: 50;
 	display: flex;
 	background: rgba(255, 255, 255, 0.82);
@@ -667,17 +712,6 @@ onShareAppMessage(() => {
 	display: block;
 }
 
-/* ── 状态标签 ── */
-.status-chip {
-	display: flex;
-	align-items: center;
-	gap: 6rpx;
-	padding: 6rpx 14rpx;
-	border-radius: 999rpx;
-	font-size: 21rpx;
-	font-weight: 600;
-}
-
 .chip-good {
 	background: rgba(52, 200, 160, 0.12);
 	color: #1a8c62;
@@ -702,10 +736,6 @@ onShareAppMessage(() => {
 .arrow-warn { color: #D97706; }
 .arrow-neutral { color: #7aA898; }
 
-.status-text {
-	font-size: 21rpx;
-}
-
 /* ── 日均 ── */
 .avg-row {
 	display: flex;