From ee4beaa7a061d9b329bbaf8f4b4dd1bc8bba16d5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BD=A0=C3=A7=C2=9Anepiedg?= <你的yunchuansong@163.com>
Date: Thu, 19 Mar 2026 01:17:00 +0800
Subject: [PATCH] refactor ui layout for home and stats

---
 src/pages.json            |   2 +-
 src/pages/index/index.vue | 931 +++++++++++++++++++++-----------------
 src/pages/stats/index.vue |  39 +-
 3 files changed, 531 insertions(+), 441 deletions(-)

diff --git a/src/pages.json b/src/pages.json
index b3fe435..f26ccfb 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -21,7 +21,7 @@
 		{
 			"path": "pages/stats/index",
 			"style": {
-				"navigationBarTitleText": "数据统计分析"
+				"navigationStyle": "custom"
 			}
 		},
 		{
diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue
index f865fda..797e912 100644
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@@ -1,109 +1,123 @@
 <template>
 	<view class="page">
-		<view class="page-glow page-glow-a"></view>
-		<view class="page-glow page-glow-b"></view>
+		<!-- 背景装饰层 -->
+		<view class="bg-orb bg-orb-1"></view>
+		<view class="bg-orb bg-orb-2"></view>
+		<view class="bg-orb bg-orb-3"></view>
+		<view class="bg-grid"></view>
+
 		<view class="nav-placeholder" :style="{ height: navBarHeight + 'px' }"></view>
 
-		<view v-if="loading" class="skeleton">
-			<view class="skeleton-card skeleton-card-lg"></view>
-			<view class="skeleton-card skeleton-card-md"></view>
-			<view class="skeleton-grid">
-				<view class="skeleton-card"></view>
-				<view class="skeleton-card"></view>
-			</view>
-			<view class="skeleton-card skeleton-card-sm"></view>
+		<!-- 骨架屏 -->
+		<view v-if="loading" class="skeleton-wrap">
+			<view class="sk-hero"></view>
+			<view class="sk-card sk-card-wide"></view>
+			<view class="sk-action"></view>
 		</view>
 
 		<view v-else class="dashboard">
-			<view class="header-card">
-				<view class="header-copy">
-					<text class="header-eyebrow">SMT</text>
-					<text class="greeting-text">{{ greetingTitle }}</text>
-					<text class="greeting-sub">{{ greetingSubtitle }}</text>
-				</view>
-				<view class="header-side">
-					<image class="avatar" :src="userAvatar" mode="aspectFill"></image>
-					<view class="mode-chip" :class="isQuitMode ? 'mode-chip-quit' : 'mode-chip-record'">
-						{{ isQuitMode ? '戒烟模式' : '记录模式' }}
-					</view>
-				</view>
-			</view>
-
+			<!-- 戒烟模式 -->
 			<view v-if="isQuitMode">
-				<view class="hero-card hero-card-quit">
-					<view class="hero-meta-row">
-						<text class="hero-label">已坚持</text>
-						<text class="hero-inline-chip">{{ todayChecked ? '今日已打卡' : '今日待打卡' }}</text>
+				<view class="summary-card">
+					<view class="summary-card-top">
+						<view>
+							<text class="summary-title">今日戒烟状态</text>
+							<text class="summary-subtitle">{{ quitSubtitle }}</text>
+						</view>
+						<view class="summary-mode-badge summary-mode-badge-quit">
+							<text class="summary-mode-text">{{ todayChecked ? '今日已打卡' : '今日待打卡' }}</text>
+						</view>
 					</view>
-					<view class="hero-value-row">
-						<text class="hero-value">{{ quitDays }}</text>
-						<text class="hero-unit">天</text>
-					</view>
-					<text class="hero-sub">{{ quitSubtitle }}</text>
-				</view>
 
-				<view class="primary-action" :class="{ 'primary-action-done': todayChecked }" @tap="handleQuitCheckin">
-					<view class="primary-action-icon">{{ todayChecked ? '✓' : '打' }}</view>
-					<text class="primary-action-title">{{ todayChecked ? '今日已打卡' : '今天没抽，去打卡' }}</text>
-					<text class="primary-action-desc">{{ todayChecked ? `已于 ${todayCheckinTime} 记录` : '把今天记成无烟的一天' }}</text>
-				</view>
-
-				<view class="stats-grid">
-					<view class="stat-card">
-						<text class="stat-label">已省下</text>
-						<text class="stat-value">¥{{ savedMoney }}</text>
-						<text class="stat-desc">按日均 {{ baselineCigsPerDay }} 支估算</text>
-					</view>
-					<view class="stat-card">
-						<text class="stat-label">恢复进度</text>
-						<text class="stat-value">{{ healthProgress }}%</text>
-						<text class="stat-desc">{{ healthTip }}</text>
+					<view class="summary-main">
+						<view class="summary-metrics">
+							<view class="summary-metric">
+								<text class="summary-metric-label">已坚持</text>
+								<view class="summary-metric-value-row">
+									<text class="summary-metric-value">{{ quitDays }}</text>
+									<text class="summary-metric-unit">天</text>
+								</view>
+							</view>
+							<view class="summary-metric">
+								<text class="summary-metric-label">已省下</text>
+								<view class="summary-metric-value-row">
+									<text class="summary-metric-value">¥{{ savedMoney }}</text>
+								</view>
+							</view>
+						</view>
+						<view class="summary-ring" :style="quitProgressRingStyle">
+							<view class="summary-ring-inner">
+								<text class="summary-ring-value">{{ healthProgress }}%</text>
+								<text class="summary-ring-label">恢复进度</text>
+							</view>
+						</view>
 					</view>
 				</view>
 
-				<view class="note-card">
-					<text class="note-title">今日提醒</text>
-					<text class="note-text">{{ quitEncouragement }}</text>
+				<view class="primary-row">
+					<view class="primary-pill primary-pill-checkin" :class="{ 'primary-pill-done': todayChecked }" @tap="handleQuitCheckin">
+						<text class="primary-pill-title">{{ todayChecked ? '今日已打卡' : '今天没抽，去打卡' }}</text>
+						<text class="primary-pill-desc">{{ todayChecked ? `已于 ${todayCheckinTime} 记录` : '把今天记成无烟的一天' }}</text>
+					</view>
+				</view>
+
+				<view class="tip-card">
+					<text class="tip-title">今日提醒</text>
+					<text class="tip-text">{{ quitEncouragement }}</text>
+					<text class="tip-extra">{{ healthTip }}</text>
 				</view>
 			</view>
 
-			<view v-else>
-				<view class="hero-card hero-card-record">
-					<view class="hero-meta-row">
-						<text class="hero-label">距上次抽烟</text>
-						<text v-if="nextSmokeTimeText" class="hero-inline-chip">建议 {{ nextSmokeTimeText }}</text>
-					</view>
-					<text class="hero-value hero-value-time">{{ timerDisplay }}</text>
-					<text class="hero-sub">{{ nextSmokeTimeText ? `下次建议：${nextSmokeTimeText}` : '先把今天的抽烟情况记下来' }}</text>
-				</view>
+			<!-- 记录模式 -->
+				<view v-else>
+					<view class="summary-card summary-card-record">
+						<view class="summary-card-top summary-card-top-record">
+							<view class="summary-heading">
+								<view class="summary-title-accent"></view>
+								<view>
+									<text class="summary-title summary-title-record">记录</text>
+								</view>
+							</view>
+							<text class="record-header-more">···</text>
+						</view>
 
-				<view class="stats-grid">
-					<view class="stat-card">
-						<text class="stat-label">今日已抽</text>
-						<text class="stat-value">{{ todayCount }}<text class="stat-unit">根</text></text>
-						<text class="stat-desc">目标 {{ dailyTarget }} 根，{{ changeText }}</text>
-					</view>
-					<view class="stat-card">
-						<text class="stat-label">今天忍住</text>
-						<text class="stat-value">{{ resistedCount }}<text class="stat-unit">次</text></text>
-						<text class="stat-desc">每次忍住都在拉开间隔</text>
-					</view>
-				</view>
+						<view class="record-overview">
+							<view class="record-ring" :style="todayCountRingStyle">
+								<view class="record-ring-inner">
+									<text class="record-ring-value">{{ timerDisplay }}</text>
+									<text class="record-ring-label">距上次抽烟</text>
+								</view>
+							</view>
 
-				<view class="action-row">
-					<view class="action-btn action-btn-record" @tap="openSmokeDialog">
-						<view class="action-icon">记</view>
-						<text class="action-title">记录抽烟</text>
-						<text class="action-desc">补记这一根</text>
-					</view>
-					<view class="action-btn action-btn-resist" @tap="openResistedDialog">
-						<view class="action-icon">忍</view>
-						<text class="action-title">想抽忍住了</text>
-						<text class="action-desc">记一次成功抵抗</text>
+							<view class="record-metric-group">
+								<text class="record-group-title">今日记录</text>
+								<view class="record-metric-list">
+									<view class="record-metric-item">
+										<text class="summary-metric-value">{{ resistedCount }}</text>
+										<text class="summary-metric-unit">次</text>
+										<text class="summary-metric-label">今日忍住</text>
+									</view>
+									<view class="record-metric-item">
+										<text class="summary-metric-value">{{ todayCount }}</text>
+										<text class="summary-metric-unit">根</text>
+										<text class="summary-metric-label">今日已抽</text>
+									</view>
+								</view>
+								<text class="record-group-note">{{ nextSmokeTimeText ? `建议下次 ${nextSmokeTimeText}` : changeText }}</text>
+							</view>
+						</view>
+
+						<view class="record-action-row">
+							<view class="primary-pill primary-pill-smoke" @tap="openSmokeDialog">
+								<text class="primary-pill-title">记录</text>
+							</view>
+							<view class="primary-pill primary-pill-resist" @tap="openResistedDialog">
+								<text class="primary-pill-title">忍住</text>
+							</view>
+						</view>
 					</view>
 				</view>
 			</view>
-		</view>
 
 		<smoke-record-dialog
 			v-if="!isQuitMode"
@@ -241,13 +255,26 @@ const quitEncouragement = computed(() => {
 	if (quitDays.value === 0) return '先不要想很久，只把今天守住就够了。'
 	return `连续 ${quitDays.value} 天很难得，今天再补上一天。`
 })
+const todayCountPercent = computed(() => {
+	if (!dailyTarget.value || dailyTarget.value <= 0) return todayCount.value > 0 ? 100 : 0
+	const percent = Math.round((todayCount.value / dailyTarget.value) * 100)
+	return Math.min(Math.max(percent, 0), 100)
+})
+const todayCountRingStyle = computed(() => {
+	const angle = Math.round(todayCountPercent.value * 3.6)
+	return {
+		background: `conic-gradient(#3fcba2 0deg ${angle}deg, #d8eee6 ${angle}deg 360deg)`
+	}
+})
+const quitProgressRingStyle = computed(() => {
+	const angle = Math.round(healthProgress.value * 3.6)
+	return {
+		background: `conic-gradient(#14b882 0deg ${angle}deg, #e8edf2 ${angle}deg 360deg)`
+	}
+})
 
 function defaultQuitState() {
-	return {
-		lastCheckinDate: '',
-		lastCheckinAt: '',
-		streakDays: 0
-	}
+	return { lastCheckinDate: '', lastCheckinAt: '', streakDays: 0 }
 }
 
 function formatDate(date) {
@@ -261,8 +288,7 @@ function diffDays(fromDate, toDate) {
 	if (!fromDate || !toDate) return 0
 	const from = new Date(`${fromDate}T00:00:00`)
 	const to = new Date(`${toDate}T00:00:00`)
-	const diff = to.getTime() - from.getTime()
-	return Math.floor(diff / (24 * 60 * 60 * 1000))
+	return Math.floor((to.getTime() - from.getTime()) / (24 * 60 * 60 * 1000))
 }
 
 function formatClock(value) {
@@ -284,26 +310,18 @@ function setupNavBar() {
 }
 
 function loadQuitState() {
-	quitState.value = {
-		...defaultQuitState(),
-		...(storage.get(QUIT_CHECKIN_KEY) || {})
-	}
+	quitState.value = { ...defaultQuitState(), ...(storage.get(QUIT_CHECKIN_KEY) || {}) }
 }
 
 function saveQuitState(nextState) {
-	quitState.value = {
-		...defaultQuitState(),
-		...nextState
-	}
+	quitState.value = { ...defaultQuitState(), ...nextState }
 	storage.set(QUIT_CHECKIN_KEY, quitState.value)
 }
 
 function startTimer() {
 	stopTimer()
 	if (timerBaseSeconds.value < 0) return
-	timerInterval = setInterval(() => {
-		timerSeconds.value++
-	}, 1000)
+	timerInterval = setInterval(() => { timerSeconds.value++ }, 1000)
 }
 
 function stopTimer() {
@@ -367,26 +385,15 @@ function handleQuitCheckin() {
 		uni.showToast({ title: '今天已经打过卡', icon: 'none' })
 		return
 	}
-
 	const today = formatDate(new Date())
 	const previousDate = quitState.value.lastCheckinDate
 	let streakDays = 1
-
 	if (previousDate) {
 		const gap = diffDays(previousDate, today)
-		if (gap === 1) {
-			streakDays = Number(quitState.value.streakDays || 0) + 1
-		} else if (gap === 0) {
-			streakDays = Number(quitState.value.streakDays || 0)
-		}
+		if (gap === 1) streakDays = Number(quitState.value.streakDays || 0) + 1
+		else if (gap === 0) streakDays = Number(quitState.value.streakDays || 0)
 	}
-
-	saveQuitState({
-		lastCheckinDate: today,
-		lastCheckinAt: new Date().toISOString(),
-		streakDays
-	})
-
+	saveQuitState({ lastCheckinDate: today, lastCheckinAt: new Date().toISOString(), streakDays })
 	uni.showToast({ title: '打卡成功', icon: 'success' })
 }
 
@@ -396,43 +403,35 @@ async function ensureProfileReady() {
 	const isCompleted = profileData.is_completed ||
 		(profile && profile.onboarding_completed_at) ||
 		(profile && profile.baseline_cigs_per_day > 0)
-
 	if (!profileData.exists || !isCompleted) {
 		uni.navigateTo({ url: '/pages/onboarding/index' })
 		return false
 	}
-
 	return true
 }
 
 async function refreshCurrentMode() {
 	if (!userStore.mode) return
-
 	const profileReady = await ensureProfileReady()
 	if (!profileReady) return
-
 	if (isQuitMode.value) {
 		stopTimer()
 		loadQuitState()
 		return
 	}
-
 	await fetchRecordHomeData()
 }
 
 async function initPage() {
 	setupNavBar()
 	loading.value = true
-
 	try {
 		await waitForLogin()
 		await profileStore.fetchProfile()
-
 		if (!userStore.mode) {
 			uni.navigateTo({ url: '/pages/mode-select/index' })
 			return
 		}
-
 		await refreshCurrentMode()
 	} catch (e) {
 		console.error('initPage error:', e)
@@ -442,9 +441,7 @@ async function initPage() {
 	}
 }
 
-onMounted(() => {
-	initPage()
-})
+onMounted(() => { initPage() })
 
 onShow(async () => {
 	if (!pageReady.value) return
@@ -455,416 +452,496 @@ onShow(async () => {
 	}
 })
 
-onUnmounted(() => {
-	stopTimer()
-})
+onUnmounted(() => { stopTimer() })
 
-onShareAppMessage(() => {
-	return {
-		title: isQuitMode.value ? '我在坚持戒烟打卡' : '我在记录自己的抽烟变化',
-		path: 'pages/index/index'
-	}
-})
+onShareAppMessage(() => ({
+	title: isQuitMode.value ? '我在坚持戒烟打卡' : '我在记录自己的抽烟变化',
+	path: 'pages/index/index'
+}))
 </script>
 
 <style scoped>
+/* ===== 页面基础 ===== */
 .page {
 	min-height: 100vh;
 	position: relative;
-	background:
-		radial-gradient(circle at top left, rgba(52, 200, 160, 0.18), transparent 34%),
-		radial-gradient(circle at top right, rgba(255, 255, 255, 0.9), transparent 26%),
-		linear-gradient(180deg, #edf2f8 0%, #f5f7fb 38%, #fbfdff 100%);
-	box-sizing: border-box;
+	background: #F4F6F8;
 	overflow: hidden;
+	box-sizing: border-box;
 }
 
-.page-glow {
+/* ===== 背景装饰 ===== */
+.bg-orb {
 	position: absolute;
 	border-radius: 50%;
-	filter: blur(24rpx);
-	opacity: 0.7;
+	pointer-events: none;
+	filter: blur(80rpx);
+}
+
+.bg-orb-1 {
+	width: 600rpx;
+	height: 600rpx;
+	top: -100rpx;
+	left: -150rpx;
+	background: radial-gradient(circle, rgba(20, 184, 130, 0.1) 0%, transparent 70%);
+}
+
+.bg-orb-2 {
+	width: 500rpx;
+	height: 500rpx;
+	top: 300rpx;
+	right: -180rpx;
+	background: radial-gradient(circle, rgba(99, 102, 241, 0.08) 0%, transparent 70%);
+}
+
+.bg-orb-3 {
+	width: 400rpx;
+	height: 400rpx;
+	bottom: 200rpx;
+	left: 50rpx;
+	background: radial-gradient(circle, rgba(20, 184, 130, 0.06) 0%, transparent 70%);
+}
+
+.bg-grid {
+	position: absolute;
+	inset: 0;
+	background-image:
+		linear-gradient(rgba(0,0,0,0.02) 1rpx, transparent 1rpx),
+		linear-gradient(90deg, rgba(0,0,0,0.02) 1rpx, transparent 1rpx);
+	background-size: 80rpx 80rpx;
 	pointer-events: none;
 }
 
-.page-glow-a {
-	top: 108rpx;
-	left: -140rpx;
-	width: 360rpx;
-	height: 360rpx;
-	background: rgba(52, 200, 160, 0.16);
+/* ===== 骨架屏 ===== */
+.skeleton-wrap {
+	padding: 32rpx 28rpx;
+	position: relative;
+	z-index: 1;
 }
 
-.page-glow-b {
-	top: 280rpx;
-	right: -120rpx;
-	width: 320rpx;
-	height: 320rpx;
-	background: rgba(255, 255, 255, 0.86);
+.sk-header, .sk-hero, .sk-card, .sk-action {
+	background: linear-gradient(90deg, #ebebeb 25%, #f5f5f5 50%, #ebebeb 75%);
+	background-size: 200% 100%;
+	animation: shimmer 1.6s infinite;
+	border-radius: 24rpx;
 }
 
-.nav-placeholder,
-.dashboard,
-.skeleton {
+.sk-hero { height: 320rpx; margin-bottom: 24rpx; border-radius: 36rpx; }
+.sk-card { height: 120rpx; border-radius: 28rpx; margin-bottom: 24rpx; }
+.sk-card-wide { height: 140rpx; }
+.sk-action { height: 140rpx; border-radius: 28rpx; }
+
+@keyframes shimmer {
+	0% { background-position: -200% 0; }
+	100% { background-position: 200% 0; }
+}
+
+/* ===== 主内容 ===== */
+.nav-placeholder, .dashboard, .skeleton-wrap {
 	position: relative;
 	z-index: 1;
 }
 
 .dashboard {
-	padding: 24rpx 24rpx 168rpx;
+	padding: 20rpx 28rpx 180rpx;
 }
 
-.header-card,
-.hero-card,
-.primary-action,
-.stat-card,
-.note-card,
-.action-btn,
-.skeleton-card {
-	background: rgba(255, 255, 255, 0.76);
+.summary-card {
+	background: #ffffff;
 	border-radius: 32rpx;
-	border: 2rpx solid rgba(255, 255, 255, 0.62);
-	box-shadow: 0 16rpx 42rpx rgba(15, 23, 42, 0.08);
-	backdrop-filter: blur(24rpx);
-	-webkit-backdrop-filter: blur(24rpx);
+	border: 1rpx solid #eef2f5;
+	padding: 30rpx 28rpx 26rpx;
+	margin-bottom: 24rpx;
 }
 
-.header-card {
+.summary-card-record {
+	background: linear-gradient(180deg, #dff7ee 0%, #ebfbf5 52%, #f5fdf9 100%);
+	border-color: rgba(88, 170, 139, 0.16);
+	box-shadow: 0 18rpx 42rpx rgba(83, 157, 128, 0.14);
+}
+
+.summary-card-top {
 	display: flex;
 	align-items: flex-start;
 	justify-content: space-between;
-	padding: 30rpx;
-	margin-bottom: 28rpx;
-	gap: 20rpx;
+	gap: 16rpx;
+	margin-bottom: 24rpx;
 }
 
-.header-copy {
+.summary-card-top-record {
+	align-items: center;
+}
+
+.record-header-more {
+	font-size: 42rpx;
+	line-height: 1;
+	font-weight: 700;
+	letter-spacing: 4rpx;
+	color: #1f4b3d;
+	transform: translateY(-4rpx);
+}
+
+.summary-heading {
 	flex: 1;
 	display: flex;
-	flex-direction: column;
-}
-
-.header-side {
-	display: flex;
-	flex-direction: column;
-	align-items: flex-end;
+	align-items: flex-start;
 	gap: 14rpx;
 }
 
-.header-eyebrow {
-	font-size: 20rpx;
-	font-weight: 700;
-	letter-spacing: 4rpx;
-	text-transform: uppercase;
-	color: #98a2b3;
+.summary-title-accent {
+	width: 10rpx;
+	height: 42rpx;
+	border-radius: 999rpx;
+	margin-top: 4rpx;
+	flex-shrink: 0;
+	background: linear-gradient(180deg, #6ee7be 0%, #2fc596 100%);
 }
 
-.avatar {
-	width: 92rpx;
-	height: 92rpx;
-	border-radius: 50%;
-	border: 4rpx solid rgba(255, 255, 255, 0.82);
-	background: rgba(255, 255, 255, 0.72);
-}
-
-.greeting-text {
+.summary-title {
 	display: block;
-	margin-top: 10rpx;
-	font-size: 42rpx;
-	line-height: 1.18;
+	font-size: 30rpx;
 	font-weight: 700;
-	color: #111827;
+	color: #222222;
 }
 
-.greeting-sub {
+.summary-title-record {
+	color: #163c31;
+}
+
+.summary-subtitle {
 	display: block;
 	margin-top: 8rpx;
 	font-size: 24rpx;
 	line-height: 1.5;
-	color: #667085;
+	color: #8b8b8b;
 }
 
-.mode-chip {
+.summary-subtitle-record {
+	margin-top: 6rpx;
+	color: #5b8d7a;
+}
+
+.summary-mode-badge {
 	padding: 10rpx 18rpx;
 	border-radius: 999rpx;
+	flex-shrink: 0;
+}
+
+.summary-mode-badge-quit {
+	background: rgba(20,184,130,0.1);
+}
+
+.summary-mode-badge-record {
+	background: rgba(255,255,255,0.62);
+	border: 1rpx solid rgba(77, 144, 119, 0.12);
+}
+
+.summary-mode-text {
 	font-size: 22rpx;
 	font-weight: 600;
-	border: 2rpx solid rgba(255, 255, 255, 0.64);
+	color: #5a5a5a;
 }
 
-.mode-chip-quit {
-	background: rgba(52, 200, 160, 0.14);
-	color: #17795c;
+.summary-card-record .summary-mode-text {
+	color: #2a7b61;
 }
 
-.mode-chip-record {
-	background: rgba(245, 158, 11, 0.12);
-	color: #b56b09;
-}
-
-.hero-card {
-	padding: 36rpx 32rpx;
-	margin-bottom: 24rpx;
-}
-
-.hero-card-quit {
-	background: linear-gradient(135deg, rgba(246, 255, 251, 0.88), rgba(255, 255, 255, 0.7));
-}
-
-.hero-card-record {
-	background: linear-gradient(135deg, rgba(255, 250, 243, 0.88), rgba(255, 255, 255, 0.7));
-}
-
-.hero-meta-row {
+.summary-main {
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
-	gap: 16rpx;
+	gap: 20rpx;
 }
 
-.hero-label {
-	display: block;
-	font-size: 24rpx;
-	color: #667085;
-	letter-spacing: 2rpx;
+.summary-main-record {
+	align-items: stretch;
+	gap: 18rpx;
 }
 
-.hero-inline-chip {
-	padding: 10rpx 18rpx;
-	border-radius: 999rpx;
-	background: rgba(255, 255, 255, 0.82);
-	border: 2rpx solid rgba(255, 255, 255, 0.7);
-	font-size: 22rpx;
-	font-weight: 600;
-	color: #475467;
-}
-
-.hero-value-row {
+.record-overview {
 	display: flex;
-	align-items: baseline;
-	gap: 12rpx;
+	align-items: center;
+	gap: 22rpx;
 	margin-top: 18rpx;
 }
 
-.hero-value,
-.hero-value-time {
-	display: block;
-	margin-top: 18rpx;
-	font-size: 82rpx;
-	line-height: 1;
-	font-weight: 700;
-	color: #111827;
-}
-
-.hero-unit {
-	font-size: 28rpx;
-	color: #667085;
-}
-
-.hero-sub {
-	display: block;
-	margin-top: 18rpx;
-	font-size: 26rpx;
-	line-height: 1.6;
-	color: #475467;
-}
-
-.primary-action {
-	display: flex;
-	flex-direction: column;
-	align-items: flex-start;
-	padding: 36rpx 32rpx;
-	margin-bottom: 24rpx;
-	background: linear-gradient(180deg, #32c59d 0%, #1aa37a 100%);
-	color: #ffffff;
-	box-shadow: 0 16rpx 36rpx rgba(26, 163, 122, 0.24);
-}
-
-.primary-action-done {
-	background: linear-gradient(180deg, #1f9f7a 0%, #188564 100%);
-}
-
-.primary-action-icon {
-	width: 68rpx;
-	height: 68rpx;
+.record-ring {
+	width: 216rpx;
+	height: 216rpx;
+	padding: 12rpx;
 	border-radius: 50%;
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	background: rgba(255, 255, 255, 0.18);
-	border: 2rpx solid rgba(255, 255, 255, 0.22);
-	font-size: 30rpx;
-	font-weight: 700;
+	flex-shrink: 0;
+	box-shadow: inset 0 0 0 1rpx rgba(255,255,255,0.34);
 }
 
-.primary-action-title {
-	display: block;
-	margin-top: 18rpx;
+.record-ring-inner {
+	width: 100%;
+	height: 100%;
+	border-radius: 50%;
+	background: rgba(248,255,251,0.96);
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	text-align: center;
+	padding: 0 18rpx;
+}
+
+.record-ring-value {
 	font-size: 34rpx;
+	line-height: 1.1;
 	font-weight: 700;
+	color: #1f7b61;
 }
 
-.primary-action-desc {
-	display: block;
+.record-ring-label {
 	margin-top: 10rpx;
-	font-size: 24rpx;
-	line-height: 1.55;
-	opacity: 0.9;
+	font-size: 22rpx;
+	color: #5c8274;
 }
 
-.stats-grid {
+.record-metric-group {
+	flex: 1;
+	min-width: 0;
+}
+
+.record-group-title {
+	display: block;
+	font-size: 30rpx;
+	font-weight: 600;
+	color: #30463d;
+	margin-bottom: 16rpx;
+}
+
+.record-metric-list {
 	display: grid;
 	grid-template-columns: repeat(2, minmax(0, 1fr));
-	gap: 20rpx;
+	gap: 0;
+	border-radius: 24rpx;
+	overflow: hidden;
+	background: rgba(255,255,255,0.58);
+	border: 1rpx solid rgba(255,255,255,0.76);
+	box-shadow: inset 0 1rpx 0 rgba(255,255,255,0.82);
+}
+
+.record-metric-item {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	gap: 6rpx;
+	min-height: 128rpx;
+	padding: 22rpx 10rpx;
+	text-align: center;
+	position: relative;
+}
+
+.record-metric-item + .record-metric-item::before {
+	content: '';
+	position: absolute;
+	left: 0;
+	top: 24rpx;
+	bottom: 24rpx;
+	width: 1rpx;
+	background: rgba(95, 142, 124, 0.16);
+}
+
+.summary-metric-label {
+	display: block;
+	font-size: 23rpx;
+	color: #9aa0a6;
+	margin-top: 4rpx;
+}
+
+.record-metric-item .summary-metric-label {
+	color: #6b9184;
+}
+
+.summary-metric-value-row {
+	display: flex;
+	align-items: baseline;
+	justify-content: center;
+	gap: 8rpx;
+	flex-shrink: 0;
+}
+
+.summary-metric-value {
+	font-size: 44rpx;
+	font-weight: 700;
+	color: #222222;
+	line-height: 1;
+}
+
+.record-metric-item .summary-metric-value {
+	color: #183d32;
+}
+
+.summary-metric-unit {
+	font-size: 24rpx;
+	font-weight: 600;
+	color: #888888;
+}
+
+.record-metric-item .summary-metric-unit {
+	color: #52776a;
+}
+
+.summary-metric-note {
+	display: block;
+	margin-top: 8rpx;
+	font-size: 22rpx;
+	color: #999999;
+	line-height: 1.5;
+}
+
+.record-group-note {
+	display: block;
+	margin-top: 12rpx;
+	font-size: 22rpx;
+	line-height: 1.5;
+	color: #6f9487;
+}
+
+.primary-row {
+	display: flex;
+	gap: 16rpx;
 	margin-bottom: 24rpx;
 }
 
-.stat-card {
-	padding: 28rpx 24rpx 26rpx;
-	background: rgba(255, 255, 255, 0.86);
-	border: 2rpx solid rgba(15, 23, 42, 0.05);
-	box-shadow: 0 10rpx 30rpx rgba(15, 23, 42, 0.05);
-}
-
-.stat-label {
-	display: block;
-	font-size: 24rpx;
-	color: #667085;
-}
-
-.stat-value {
-	display: block;
-	margin-top: 18rpx;
-	font-size: 46rpx;
-	line-height: 1.1;
-	font-weight: 700;
-	color: #111827;
-}
-
-.stat-unit {
-	font-size: 26rpx;
-	font-weight: 600;
-	color: #667085;
-}
-
-.stat-desc {
-	display: block;
-	margin-top: 16rpx;
-	font-size: 23rpx;
-	line-height: 1.5;
-	color: #667085;
-}
-
-.note-card {
-	padding: 28rpx;
-	background: rgba(255, 255, 255, 0.84);
-	border: 2rpx solid rgba(15, 23, 42, 0.05);
-	box-shadow: 0 10rpx 30rpx rgba(15, 23, 42, 0.05);
-}
-
-.note-title {
-	display: block;
-	font-size: 24rpx;
-	color: #1a7f61;
-	font-weight: 700;
-	letter-spacing: 1rpx;
-}
-
-.note-text {
-	display: block;
-	margin-top: 14rpx;
-	font-size: 26rpx;
-	line-height: 1.7;
-	color: #344054;
-}
-
-.action-row {
+.primary-row-double {
 	display: grid;
-	grid-template-columns: repeat(2, minmax(0, 1fr));
-	gap: 20rpx;
+	grid-template-columns: 1fr 1fr;
 }
 
-.action-btn {
-	padding: 30rpx 24rpx 28rpx;
-	background: rgba(255, 255, 255, 0.86);
-	border: 2rpx solid rgba(15, 23, 42, 0.05);
-	box-shadow: 0 10rpx 30rpx rgba(15, 23, 42, 0.05);
-}
-
-.action-btn-record {
-	background: linear-gradient(135deg, rgba(255, 248, 239, 0.95), rgba(255, 255, 255, 0.88));
-}
-
-.action-btn-resist {
-	background: linear-gradient(135deg, rgba(245, 255, 251, 0.95), rgba(255, 255, 255, 0.88));
-}
-
-.action-icon {
-	width: 60rpx;
-	height: 60rpx;
-	border-radius: 18rpx;
+.primary-pill {
+	flex: 1;
+	min-height: 118rpx;
+	padding: 24rpx 28rpx;
+	border-radius: 999rpx;
 	display: flex;
-	align-items: center;
+	flex-direction: column;
 	justify-content: center;
-	background: rgba(255, 255, 255, 0.9);
-	border: 2rpx solid rgba(255, 255, 255, 0.76);
-	font-size: 28rpx;
-	font-weight: 700;
-	color: #111827;
+	background: #ffffff;
+	border: 1rpx solid #eef2f5;
 }
 
-.action-title {
+.primary-pill-checkin {
+	background: linear-gradient(135deg, #14b882 0%, #0d9e6e 100%);
+	border: none;
+}
+
+.primary-pill-done {
+	background: #ffffff;
+	border: 1rpx solid #eef2f5;
+}
+
+.primary-pill-smoke {
+	background: linear-gradient(135deg, #4f46e5 0%, #3730a3 100%);
+	border: none;
+}
+
+.primary-pill-resist {
+	background: linear-gradient(135deg, #14b882 0%, #0d9e6e 100%);
+	border: none;
+}
+
+.record-action-row {
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	gap: 18rpx;
+	margin-top: 26rpx;
+}
+
+.record-action-row .primary-pill {
+	min-height: 84rpx;
+	padding: 0 18rpx;
+	align-items: center;
+	text-align: center;
+	border-radius: 999rpx;
+	justify-content: center;
+	background: rgba(255,255,255,0.82);
+	border: 2rpx solid rgba(76, 145, 120, 0.12);
+	box-shadow: 0 8rpx 18rpx rgba(83, 157, 128, 0.08);
+}
+
+.record-action-row .primary-pill-smoke {
+	background: linear-gradient(180deg, #fff2f0 0%, #ffe0da 100%);
+	border-color: rgba(223, 108, 88, 0.22);
+}
+
+.record-action-row .primary-pill-resist {
+	background: linear-gradient(180deg, rgba(255,255,255,0.68) 0%, rgba(241,255,248,0.92) 100%);
+}
+
+.primary-pill-title {
 	display: block;
-	margin-top: 14rpx;
 	font-size: 30rpx;
 	font-weight: 700;
-	color: #111827;
+	color: #ffffff;
 }
 
-.action-desc {
+.record-action-row .primary-pill-title {
+	font-size: 26rpx;
+	line-height: 1;
+}
+
+.record-action-row .primary-pill-smoke .primary-pill-title {
+	color: #cb5a49;
+}
+
+.record-action-row .primary-pill-resist .primary-pill-title {
+	color: #1f755e;
+}
+
+.primary-pill-desc {
 	display: block;
-	margin-top: 10rpx;
-	font-size: 23rpx;
-	color: #6b7280;
+	margin-top: 8rpx;
+	font-size: 22rpx;
+	line-height: 1.5;
+	color: rgba(255,255,255,0.82);
 }
 
-.skeleton {
-	padding: 24rpx;
+.primary-pill-done .primary-pill-title {
+	color: #666666;
 }
 
-.skeleton-grid {
-	display: grid;
-	grid-template-columns: repeat(2, minmax(0, 1fr));
-	gap: 20rpx;
-	margin-bottom: 20rpx;
+.primary-pill-done .primary-pill-desc {
+	color: #aaaaaa;
 }
 
-.skeleton-card {
-	height: 180rpx;
-	background: linear-gradient(90deg, rgba(232, 238, 245, 0.92) 25%, rgba(255, 255, 255, 0.98) 50%, rgba(232, 238, 245, 0.92) 75%);
-	background-size: 200% 100%;
-	animation: shimmer 1.5s infinite;
-	margin-bottom: 20rpx;
+/* ===== 提示卡 ===== */
+.tip-card {
+	padding: 28rpx 28rpx;
+	border-radius: 24rpx;
+	background: #ffffff;
+	border: 1rpx solid #F0F2F5;
+	box-shadow: none;
 }
 
-.skeleton-card-lg {
-	height: 140rpx;
+.tip-title {
+	display: block;
+	font-size: 22rpx;
+	font-weight: 700;
+	color: #14b882;
+	letter-spacing: 1rpx;
+	margin-bottom: 10rpx;
 }
 
-.skeleton-card-md {
-	height: 260rpx;
+.tip-text {
+	display: block;
+	margin-top: 8rpx;
+	font-size: 26rpx;
+	color: #666666;
+	line-height: 1.7;
 }
-
-.skeleton-card-sm {
-	height: 120rpx;
-}
-
-@keyframes shimmer {
-	0% {
-		background-position: -200% 0;
-	}
-	100% {
-		background-position: 200% 0;
-	}
+.tip-extra {
+	display: block;
+	margin-top: 8rpx;
+	font-size: 22rpx;
+	line-height: 1.5;
+	color: #9a9a9a;
 }
 </style>
diff --git a/src/pages/stats/index.vue b/src/pages/stats/index.vue
index 787a8b7..58dc941 100644
--- a/src/pages/stats/index.vue
+++ b/src/pages/stats/index.vue
@@ -3,7 +3,7 @@
 		<view class="page-glow page-glow-a"></view>
 		<view class="page-glow page-glow-b"></view>
 		<view class="sticky-bar">
-			<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
+			<view class="status-bar" :style="{ height: navBarHeight + 'px' }"></view>
 			<view class="page-head">
 				<text class="page-eyebrow">Statistics</text>
 				<text class="page-title">数据统计</text>
@@ -55,7 +55,7 @@
 				<scroll-view v-if="trendItems.length > 0" scroll-x class="trend-chart-scroll" :show-scrollbar="false">
 					<view class="trend-chart" :style="{ minWidth: trendChartMinWidth }">
 						<view v-for="(item, index) in trendItems" :key="index" class="trend-bar-item">
-							<view v-if="item.isHighlight" class="trend-bubble">{{ item.count }}</view>
+							<view v-if="item.isHighlight && item.count > 0" class="trend-bubble">{{ item.count }}</view>
 							<view class="trend-bar-wrap">
 								<view class="trend-bar" :style="{ height: item.height }"></view>
 							</view>
@@ -193,7 +193,7 @@ import { useLogin } from '@/hooks/useLogin'
 import * as api from '@/api'
 
 const { waitForLogin } = useLogin()
-const statusBarHeight = ref(0)
+const navBarHeight = ref(0)
 
 const tabs = [
 	{ label: '周', value: 'week' },
@@ -264,8 +264,8 @@ const statusIconClass = computed(() => {
 
 const averageCount = computed(() => {
 	const avg = statsData.value?.daily_average
-	if (avg === undefined || avg === null) return 1
-	return avg
+	if (avg === undefined || avg === null) return 0
+	return Number(avg) || 0
 })
 
 // 图表仅使用接口返回的 trend 渲染，无数据时为空
@@ -275,10 +275,13 @@ const trendItems = computed(() => {
 	if (!trend || !Array.isArray(trend) || trend.length === 0) {
 		return []
 	}
-	const maxCount = Math.max(...trend.map(item => Number(item.count) || 0), 1)
+	const counts = trend.map(item => Number(item.count) || 0)
+	const maxCount = Math.max(...counts, 0)
 	return trend.map((item, index) => {
 		const count = Number(item.count) || 0
-		const height = `${Math.max((count / maxCount) * 100, 6)}%`
+		const height = maxCount > 0
+			? `${Math.max((count / maxCount) * 100, count > 0 ? 6 : 0)}%`
+			: '0%'
 		return {
 			label: formatTrendLabel(item.label, trendUnit),
 			count,
@@ -485,6 +488,17 @@ function formatRangeText(start, end) {
 	return `${startMonth}月${startDay}日-${endMonth}月${endDay}日`
 }
 
+function setupNavBar() {
+	const systemInfo = uni.getSystemInfoSync()
+	const statusBarH = systemInfo.statusBarHeight || 0
+	try {
+		const menuBtn = uni.getMenuButtonBoundingClientRect()
+		navBarHeight.value = menuBtn.bottom + (menuBtn.top - statusBarH)
+	} catch (e) {
+		navBarHeight.value = statusBarH + 44
+	}
+}
+
 async function fetchStats() {
 	try {
 		await waitForLogin()
@@ -500,8 +514,7 @@ watch(currentTab, () => {
 })
 
 onMounted(() => {
-	const sys = uni.getSystemInfoSync()
-	statusBarHeight.value = Math.max((sys.statusBarHeight || 0) - 20, 0)
+	setupNavBar()
 	fetchStats()
 })
 
@@ -560,11 +573,13 @@ onShareAppMessage(() => {
 	top: 0;
 	z-index: 20;
 	background: linear-gradient(180deg, rgba(237, 242, 248, 0.96) 0%, rgba(245, 247, 251, 0.92) 76%, rgba(251, 253, 255, 0) 100%);
+	padding-left: 8rpx;
+	padding-right: 8rpx;
 	padding-bottom: 8rpx;
 }
 
 .page-head {
-	padding: 18rpx 0 18rpx;
+	padding: 24rpx 14rpx 18rpx;
 }
 
 .page-eyebrow {
@@ -599,7 +614,7 @@ onShareAppMessage(() => {
 	padding: 6rpx;
 	border-radius: 24rpx;
 	gap: 6rpx;
-	margin-bottom: 16rpx;
+	margin: 0 6rpx 16rpx;
 	border: 2rpx solid rgba(255, 255, 255, 0.66);
 	box-shadow: 0 12rpx 28rpx rgba(15, 23, 42, 0.06);
 	backdrop-filter: blur(24rpx);
@@ -1371,5 +1386,3 @@ onShareAppMessage(() => {
 	display: block;
 }
 </style>
-
-