From 7282bbc37310df7be4259627cba0ffabc2be33c6 Mon Sep 17 00:00:00 2001
From: nepiedg <yunchuansong@163.com>
Date: Wed, 1 Apr 2026 23:53:28 +0800
Subject: [PATCH] feat: refresh mini program home and stats experience

---
 src/api/auth.js                               |  12 +-
 .../smoke-record-dialog.vue                   |   8 +-
 src/pages.json                                |   6 +
 src/pages/index/index.vue                     | 733 +++++++++++-------
 src/pages/mode-select/index.vue               |  44 +-
 src/pages/profile/index.vue                   | 271 +++----
 src/pages/stats-calendar/index.vue            | 593 ++++++++++++++
 src/pages/stats/index.vue                     |  65 +-
 8 files changed, 1220 insertions(+), 512 deletions(-)
 create mode 100644 src/pages/stats-calendar/index.vue

diff --git a/src/api/auth.js b/src/api/auth.js
index f548de6..325fa99 100644
--- a/src/api/auth.js
+++ b/src/api/auth.js
@@ -1,6 +1,7 @@
 import { request } from './request'
 import { MINI_PROGRAM_ID } from '@/config'
-import { storage, SESSION_KEY, USER_KEY } from '@/utils/storage'
+import pinia, { useUserStore } from '@/stores'
+import { storage, SESSION_KEY, USER_KEY, USER_MODE_KEY } from '@/utils/storage'
 
 const H5_DEBUG_SESSION_KEY = 'FxLFPHHBw49loODmRSvqdg=='
 
@@ -10,6 +11,7 @@ export function applyH5DebugSession() {
 	if (process.env.NODE_ENV === 'development' && storage.get(SESSION_KEY) !== H5_DEBUG_SESSION_KEY) {
 		storage.set(SESSION_KEY, H5_DEBUG_SESSION_KEY)
 		storage.remove(USER_KEY)
+		storage.remove(USER_MODE_KEY)
 		applied = true
 	}
 	// #endif
@@ -26,9 +28,11 @@ export async function login() {
 						mini_program_id: MINI_PROGRAM_ID,
 						code: loginRes.code
 					})
-
-					storage.set(SESSION_KEY, res.data.session_key)
-					storage.set(USER_KEY, res.data.user)
+					const userStore = useUserStore(pinia)
+					userStore.setUser(res.data.user, res.data.session_key)
+					if (res.data.user?.mode) {
+						userStore.setMode(res.data.user.mode)
+					}
 
 					resolve(res.data)
 				} catch (e) {
diff --git a/src/components/smoke-record-dialog/smoke-record-dialog.vue b/src/components/smoke-record-dialog/smoke-record-dialog.vue
index 4546051..2e242bb 100644
--- a/src/components/smoke-record-dialog/smoke-record-dialog.vue
+++ b/src/components/smoke-record-dialog/smoke-record-dialog.vue
@@ -262,10 +262,11 @@ export default {
 	overflow: hidden;
 	transform: translateY(100%);
 	transition: transform 0.3s ease-out;
-	padding-bottom: 16rpx;
+	padding-bottom: 0;
 	border-top: 2rpx solid rgba(255, 255, 255, 0.72);
 	backdrop-filter: blur(28rpx);
 	-webkit-backdrop-filter: blur(28rpx);
+	box-shadow: 0 20rpx 48rpx rgba(15, 23, 42, 0.18);
 }
 
 .dialog-show {
@@ -308,7 +309,8 @@ export default {
 
 .dialog-body {
 	padding: 16rpx 32rpx 24rpx;
-	max-height: 62vh;
+	padding-bottom: 40rpx;
+	max-height: 58vh;
 	overflow-y: auto;
 }
 
@@ -538,6 +540,8 @@ export default {
 
 .dialog-footer {
 	padding: 16rpx 32rpx 32rpx;
+	padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
+	background: linear-gradient(180deg, rgba(248, 250, 252, 0) 0%, rgba(248, 250, 252, 0.96) 28%);
 }
 
 .dialog-btn-primary {
diff --git a/src/pages.json b/src/pages.json
index f26ccfb..f2a4d62 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -24,6 +24,12 @@
 				"navigationStyle": "custom"
 			}
 		},
+		{
+			"path": "pages/stats-calendar/index",
+			"style": {
+				"navigationBarTitleText": "日历详情"
+			}
+		},
 		{
 			"path": "pages/ai/index",
 			"style": {
diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue
index f476bb4..719005c 100644
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@@ -1,8 +1,8 @@
 <template>
-	<view class="page">
+	<view class="page" :class="{ 'page-record': !isQuitMode }">
 		<!-- 背景装饰 -->
-		<view class="bg-gradient"></view>
-		<view class="bg-pattern"></view>
+		<view v-if="isQuitMode" class="bg-gradient"></view>
+		<view v-if="isQuitMode" class="bg-pattern"></view>
 
 		<view class="nav-placeholder" :style="{ height: navBarHeight + 'px' }"></view>
 
@@ -16,100 +16,92 @@
 
 		<view v-else class="content">
 			<!-- 戒烟模式 -->
-			<view v-if="isQuitMode">
-				<!-- 核心数据卡片 -->
-				<view class="hero-card">
-					<!-- 天数展示 -->
-					<view class="days-display">
-						<view class="days-ring">
-							<view class="days-ring-inner">
-								<text class="days-number">{{ quitDays }}</text>
-								<text class="days-label">天</text>
-							</view>
+			<view v-if="isQuitMode" class="quit-home">
+				<view class="quit-hero-card">
+					<view class="quit-hero-top">
+						<view class="quit-hero-copy">
+							<text class="quit-hero-eyebrow">无烟旅程</text>
+							<text class="quit-hero-title">今天也在慢慢变好</text>
+							<text class="quit-hero-subtitle">{{ quitEncouragement }}</text>
 						</view>
-						<text class="days-subtitle">已坚持戒烟</text>
+						<text class="quit-hero-chip">{{ todayChecked ? '今日已完成' : '等待打卡' }}</text>
 					</view>
 
-					<!-- 数据指标 -->
-					<view class="metrics-row">
-						<view class="metric-item">
-							<text class="metric-icon">💰</text>
-							<view class="metric-content">
-								<text class="metric-value">¥{{ savedMoney }}</text>
-								<text class="metric-label">已省下</text>
+					<view class="quit-overview">
+						<view class="quit-days-card">
+							<view class="quit-days-ring">
+								<view class="quit-days-ring-inner">
+									<text class="quit-days-number">{{ quitDays }}</text>
+									<text class="quit-days-label">天</text>
+								</view>
 							</view>
+							<text class="quit-days-hint">连续无烟</text>
 						</view>
-						<view class="metric-divider"></view>
-						<view class="metric-item">
-							<text class="metric-icon">🚬</text>
-							<view class="metric-content">
-								<text class="metric-value">{{ avoidedCigs }}</text>
-								<text class="metric-label">少抽(支)</text>
+
+						<view class="quit-metrics-grid">
+							<view class="quit-metric-card">
+								<text class="quit-metric-kicker">已省下</text>
+								<text class="quit-metric-value">¥{{ savedMoney }}</text>
 							</view>
-						</view>
-						<view class="metric-divider"></view>
-						<view class="metric-item">
-							<text class="metric-icon">⏱️</text>
-							<view class="metric-content">
-								<text class="metric-value">{{ lifeSaved }}</text>
-								<text class="metric-label">延长(小时)</text>
+							<view class="quit-metric-card">
+								<text class="quit-metric-kicker">少抽</text>
+								<text class="quit-metric-value">{{ avoidedCigs }} 支</text>
+							</view>
+							<view class="quit-metric-card quit-metric-card-wide">
+								<text class="quit-metric-kicker">延长生命</text>
+								<text class="quit-metric-value">{{ lifeSaved }} 小时</text>
 							</view>
 						</view>
 					</view>
 				</view>
 
-				<!-- 打卡区域 -->
-				<view class="checkin-section">
-					<view
-						class="checkin-card"
-						:class="{ 'checkin-done': todayChecked }"
-						@tap="handleQuitCheckin"
-					>
-						<view class="checkin-icon-wrap">
-							<view class="checkin-icon" :class="{ 'checkin-icon-done': todayChecked }">
-								<text v-if="todayChecked">✓</text>
-								<text v-else>+</text>
-							</view>
+				<view
+					class="quit-checkin-card"
+					:class="{ 'quit-checkin-card-done': todayChecked }"
+					@tap="handleQuitCheckin"
+				>
+					<view class="quit-checkin-main">
+						<view class="quit-checkin-icon" :class="{ 'quit-checkin-icon-done': todayChecked }">
+							<text v-if="todayChecked">✓</text>
+							<text v-else>+</text>
 						</view>
-						<view class="checkin-content">
-							<text class="checkin-title">{{ todayChecked ? '今日已打卡' : '今天没抽烟' }}</text>
-							<text class="checkin-desc">{{ todayChecked ? `${todayCheckinTime} 已记录` : '点击打卡，记录无烟的一天' }}</text>
-						</view>
-						<view v-if="todayChecked" class="checkin-badge">
-							<text class="checkin-badge-text">+1</text>
+						<view class="quit-checkin-copy">
+							<text class="quit-checkin-title">{{ todayChecked ? '今日已打卡' : '今天没抽烟' }}</text>
+							<text class="quit-checkin-desc">{{ todayChecked ? `${todayCheckinTime} 已完成记录` : '点击打卡，确认自己度过了无烟的一天' }}</text>
 						</view>
 					</view>
+					<view class="quit-checkin-side">
+						<text class="quit-checkin-side-label">{{ todayChecked ? '已完成' : '去打卡' }}</text>
+					</view>
 				</view>
 
-				<!-- 健康恢复进度 -->
-				<view class="health-section">
-					<view class="section-header">
-						<text class="section-title">健康恢复</text>
-						<text class="section-value">{{ healthProgress }}%</text>
+				<view class="quit-health-card">
+					<view class="quit-health-header">
+						<view>
+							<text class="quit-health-title">健康恢复</text>
+							<text class="quit-health-subtitle">身体正在按自己的节奏修复</text>
+						</view>
+						<text class="quit-health-value">{{ healthProgress }}%</text>
 					</view>
-					<view class="health-bar">
-						<view class="health-bar-fill" :style="{ width: healthProgress + '%' }"></view>
+					<view class="quit-health-bar">
+						<view class="quit-health-bar-fill" :style="{ width: healthProgress + '%' }"></view>
 					</view>
-					<view class="health-milestones">
+					<view class="quit-health-milestones">
 						<view
 							v-for="(milestone, index) in healthMilestones"
 							:key="index"
-							class="milestone-item"
-							:class="{ 'milestone-done': quitDays >= milestone.days }"
+							class="quit-milestone-item"
+							:class="{ 'quit-milestone-done': quitDays >= milestone.days }"
 						>
-							<view class="milestone-dot"></view>
-							<text class="milestone-text">{{ milestone.label }}</text>
+							<view class="quit-milestone-dot"></view>
+							<text class="quit-milestone-text">{{ milestone.label }}</text>
 						</view>
 					</view>
 				</view>
 
-				<!-- 今日激励 -->
-				<view class="motivation-section">
-					<view class="motivation-card">
-						<text class="motivation-quote">"</text>
-						<text class="motivation-text">{{ quitEncouragement }}</text>
-						<text class="motivation-tip">{{ healthTip }}</text>
-					</view>
+				<view class="quit-motivation-card">
+					<text class="quit-motivation-label">今日提醒</text>
+					<text class="quit-motivation-text">{{ healthTip }}</text>
 				</view>
 			</view>
 
@@ -122,9 +114,10 @@
 							<view class="summary-title-accent"></view>
 							<view>
 								<text class="summary-title summary-title-record">记录</text>
+								<text class="summary-subtitle summary-subtitle-record">今天的节奏与变化</text>
 							</view>
 						</view>
-						<text class="record-header-more">···</text>
+						<text class="record-header-chip">今日概览</text>
 					</view>
 
 					<view class="record-overview">
@@ -615,6 +608,10 @@ onShareAppMessage(() => ({
 	box-sizing: border-box;
 }
 
+.page-record {
+	background: linear-gradient(180deg, #F6F8F6 0%, #EFF4F1 52%, #E9F0EC 100%);
+}
+
 /* ===== 背景装饰 ===== */
 .bg-gradient {
 	position: absolute;
@@ -692,300 +689,391 @@ onShareAppMessage(() => ({
 	padding: 24rpx 24rpx 200rpx;
 }
 
-/* ===== 戒烟模式 - 英雄卡片 ===== */
-.hero-card {
-	background: linear-gradient(135deg, #FFFFFF 0%, #F0FDF9 100%);
-	border-radius: 32rpx;
-	padding: 48rpx 32rpx;
-	margin-bottom: 24rpx;
-	box-shadow: 0 8rpx 32rpx rgba(26, 163, 122, 0.08);
-	border: 1rpx solid rgba(26, 163, 122, 0.1);
+/* ===== 戒烟模式 ===== */
+.quit-home {
+	display: flex;
+	flex-direction: column;
+	gap: 24rpx;
 }
 
-.days-display {
+.quit-hero-card,
+.quit-checkin-card,
+.quit-health-card,
+.quit-motivation-card {
+	position: relative;
+	overflow: hidden;
+	background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(251, 253, 252, 0.94) 100%);
+	-webkit-backdrop-filter: blur(20px);
+	backdrop-filter: blur(20px);
+	border-radius: 32rpx;
+	border: 1rpx solid rgba(15, 23, 42, 0.06);
+	box-shadow:
+		0 20rpx 44rpx rgba(15, 23, 42, 0.06),
+		0 6rpx 14rpx rgba(15, 23, 42, 0.03),
+		inset 0 1rpx 0 rgba(255, 255, 255, 0.88);
+}
+
+.quit-hero-card::before,
+.quit-health-card::before,
+.quit-motivation-card::before {
+	content: '';
+	position: absolute;
+	width: 240rpx;
+	height: 240rpx;
+	left: -72rpx;
+	top: -72rpx;
+	border-radius: 50%;
+	background: radial-gradient(circle, rgba(52, 200, 160, 0.14) 0%, rgba(52, 200, 160, 0) 72%);
+	pointer-events: none;
+}
+
+.quit-hero-card {
+	padding: 28rpx 24rpx;
+}
+
+.quit-hero-top,
+.quit-overview,
+.quit-health-header,
+.quit-health-milestones {
+	position: relative;
+	z-index: 1;
+}
+
+.quit-hero-top {
+	display: flex;
+	align-items: flex-start;
+	justify-content: space-between;
+	gap: 16rpx;
+	margin-bottom: 26rpx;
+}
+
+.quit-hero-copy {
+	flex: 1;
+	min-width: 0;
+}
+
+.quit-hero-eyebrow {
+	display: inline-flex;
+	align-items: center;
+	padding: 8rpx 18rpx;
+	border-radius: 999rpx;
+	background: rgba(240, 252, 248, 0.94);
+	border: 1rpx solid rgba(15, 23, 42, 0.05);
+	font-size: 20rpx;
+	font-weight: 600;
+	color: #6b7280;
+}
+
+.quit-hero-title {
+	display: block;
+	margin-top: 16rpx;
+	font-size: 42rpx;
+	line-height: 1.2;
+	font-weight: 800;
+	color: #111827;
+}
+
+.quit-hero-subtitle {
+	display: block;
+	margin-top: 10rpx;
+	font-size: 24rpx;
+	line-height: 1.6;
+	color: #6b7280;
+}
+
+.quit-hero-chip {
+	flex-shrink: 0;
+	padding: 10rpx 18rpx;
+	border-radius: 999rpx;
+	background: rgba(240, 252, 248, 0.94);
+	border: 1rpx solid rgba(15, 23, 42, 0.05);
+	font-size: 21rpx;
+	font-weight: 600;
+	color: #14936d;
+}
+
+.quit-overview {
+	display: flex;
+	align-items: center;
+	gap: 18rpx;
+}
+
+.quit-days-card {
+	width: 216rpx;
+	flex-shrink: 0;
 	display: flex;
 	flex-direction: column;
 	align-items: center;
-	margin-bottom: 40rpx;
 }
 
-.days-ring {
+.quit-days-ring {
 	width: 200rpx;
 	height: 200rpx;
+	padding: 14rpx;
 	border-radius: 50%;
-	background: linear-gradient(135deg, #D1FAE5 0%, #A7F3D0 100%);
-	padding: 16rpx;
-	box-shadow: 0 8rpx 24rpx rgba(26, 163, 122, 0.15);
+	background: linear-gradient(180deg, #ffffff 0%, #f8fbf9 100%);
+	border: 1rpx solid rgba(15, 23, 42, 0.05);
+	box-shadow: inset 0 2rpx 6rpx rgba(15, 23, 42, 0.04), 0 10rpx 24rpx rgba(15, 23, 42, 0.05);
 }
 
-.days-ring-inner {
+.quit-days-ring-inner {
 	width: 100%;
 	height: 100%;
 	border-radius: 50%;
-	background: #FFFFFF;
+	background: linear-gradient(180deg, rgba(240, 252, 248, 0.96) 0%, rgba(248, 251, 249, 0.96) 100%);
 	display: flex;
 	flex-direction: column;
 	align-items: center;
 	justify-content: center;
-	box-shadow: inset 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
+	box-shadow: inset 0 1rpx 0 rgba(255, 255, 255, 0.92);
 }
 
-.days-number {
-	font-size: 72rpx;
+.quit-days-number {
+	font-size: 74rpx;
 	font-weight: 800;
-	color: #059669;
 	line-height: 1;
+	color: #14936d;
 	font-family: 'DIN Alternate', -apple-system, sans-serif;
 }
 
-.days-label {
-	font-size: 28rpx;
-	color: #6B7280;
-	margin-top: 4rpx;
+.quit-days-label {
+	margin-top: 6rpx;
+	font-size: 26rpx;
+	font-weight: 600;
+	color: #6b7280;
 }
 
-.days-subtitle {
-	font-size: 28rpx;
-	color: #6B7280;
+.quit-days-hint {
 	margin-top: 16rpx;
+	font-size: 24rpx;
+	color: #6b7280;
 }
 
-/* ===== 数据指标行 ===== */
-.metrics-row {
-	display: flex;
-	align-items: center;
-	justify-content: space-around;
-	padding: 24rpx 0;
-	background: rgba(26, 163, 122, 0.04);
-	border-radius: 20rpx;
+.quit-metrics-grid {
+	flex: 1;
+	display: grid;
+	grid-template-columns: repeat(2, minmax(0, 1fr));
+	gap: 14rpx;
 }
 
-.metric-item {
-	display: flex;
-	align-items: center;
-	gap: 12rpx;
+.quit-metric-card {
+	padding: 18rpx 18rpx 20rpx;
+	border-radius: 22rpx;
+	background: linear-gradient(180deg, #fbfcfc 0%, #f7faf8 100%);
+	border: 1rpx solid rgba(15, 23, 42, 0.05);
+	box-shadow: inset 0 1rpx 0 rgba(255, 255, 255, 0.92);
 }
 
-.metric-icon {
-	font-size: 32rpx;
+.quit-metric-card-wide {
+	grid-column: 1 / -1;
 }
 
-.metric-content {
-	display: flex;
-	flex-direction: column;
+.quit-metric-kicker {
+	display: block;
+	font-size: 21rpx;
+	color: #6b7280;
 }
 
-.metric-value {
-	font-size: 32rpx;
-	font-weight: 700;
+.quit-metric-value {
+	display: block;
+	margin-top: 10rpx;
+	font-size: 34rpx;
+	line-height: 1.2;
+	font-weight: 800;
 	color: #111827;
 	font-family: 'DIN Alternate', -apple-system, sans-serif;
 }
 
-.metric-label {
-	font-size: 22rpx;
-	color: #9CA3AF;
-}
-
-.metric-divider {
-	width: 1rpx;
-	height: 48rpx;
-	background: rgba(26, 163, 122, 0.15);
-}
-
-/* ===== 打卡区域 ===== */
-.checkin-section {
-	margin-bottom: 24rpx;
-}
-
-.checkin-card {
+.quit-checkin-card {
 	display: flex;
 	align-items: center;
-	padding: 32rpx;
-	background: #FFFFFF;
-	border-radius: 24rpx;
-	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
-	border: 2rpx solid rgba(26, 163, 122, 0.1);
+	justify-content: space-between;
+	gap: 18rpx;
+	padding: 26rpx 24rpx;
 }
 
-.checkin-done {
-	background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
-	border-color: rgba(26, 163, 122, 0.2);
+.quit-checkin-card-done {
+	background: linear-gradient(180deg, rgba(240, 252, 248, 0.98) 0%, rgba(249, 252, 250, 0.94) 100%);
 }
 
-.checkin-icon-wrap {
-	margin-right: 24rpx;
+.quit-checkin-main {
+	display: flex;
+	align-items: center;
+	gap: 18rpx;
+	flex: 1;
+	min-width: 0;
 }
 
-.checkin-icon {
-	width: 80rpx;
-	height: 80rpx;
-	border-radius: 50%;
-	background: linear-gradient(135deg, #059669 0%, #047857 100%);
+.quit-checkin-icon {
+	width: 84rpx;
+	height: 84rpx;
+	border-radius: 28rpx;
+	flex-shrink: 0;
+	background: linear-gradient(180deg, #31c18b 0%, #1da36f 100%);
+	box-shadow: 0 16rpx 30rpx rgba(29, 163, 111, 0.22);
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	box-shadow: 0 4rpx 12rpx rgba(5, 150, 105, 0.3);
 }
 
-.checkin-icon text {
+.quit-checkin-icon text {
 	font-size: 36rpx;
-	color: #FFFFFF;
-	font-weight: 600;
+	font-weight: 700;
+	color: #ffffff;
 }
 
-.checkin-icon-done {
-	background: linear-gradient(135deg, #10B981 0%, #059669 100%);
+.quit-checkin-icon-done {
+	background: linear-gradient(180deg, #26b47f 0%, #14936d 100%);
 }
 
-.checkin-content {
+.quit-checkin-copy {
 	flex: 1;
+	min-width: 0;
 }
 
-.checkin-title {
+.quit-checkin-title {
 	display: block;
 	font-size: 32rpx;
-	font-weight: 600;
+	font-weight: 700;
 	color: #111827;
 }
 
-.checkin-desc {
+.quit-checkin-desc {
 	display: block;
-	font-size: 24rpx;
-	color: #6B7280;
-	margin-top: 4rpx;
+	margin-top: 8rpx;
+	font-size: 23rpx;
+	line-height: 1.6;
+	color: #6b7280;
 }
 
-.checkin-badge {
-	padding: 8rpx 20rpx;
-	background: #059669;
+.quit-checkin-side {
+	flex-shrink: 0;
+	padding: 12rpx 18rpx;
 	border-radius: 999rpx;
+	background: rgba(240, 252, 248, 0.94);
+	border: 1rpx solid rgba(15, 23, 42, 0.05);
 }
 
-.checkin-badge-text {
-	font-size: 24rpx;
+.quit-checkin-side-label {
+	font-size: 21rpx;
 	font-weight: 600;
-	color: #FFFFFF;
+	color: #14936d;
 }
 
-/* ===== 健康恢复进度 ===== */
-.health-section {
-	background: #FFFFFF;
-	border-radius: 24rpx;
-	padding: 32rpx;
-	margin-bottom: 24rpx;
-	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
+.quit-health-card {
+	padding: 26rpx 24rpx 24rpx;
 }
 
-.section-header {
+.quit-health-header {
 	display: flex;
+	align-items: flex-start;
 	justify-content: space-between;
-	align-items: center;
-	margin-bottom: 20rpx;
+	gap: 16rpx;
+	margin-bottom: 18rpx;
 }
 
-.section-title {
-	font-size: 28rpx;
-	font-weight: 600;
-	color: #374151;
-}
-
-.section-value {
-	font-size: 28rpx;
+.quit-health-title {
+	display: block;
+	font-size: 30rpx;
 	font-weight: 700;
-	color: #059669;
+	color: #111827;
 }
 
-.health-bar {
-	height: 12rpx;
-	background: #E5E7EB;
+.quit-health-subtitle {
+	display: block;
+	margin-top: 8rpx;
+	font-size: 22rpx;
+	line-height: 1.5;
+	color: #6b7280;
+}
+
+.quit-health-value {
+	font-size: 34rpx;
+	font-weight: 800;
+	color: #14936d;
+}
+
+.quit-health-bar {
+	position: relative;
+	z-index: 1;
+	height: 14rpx;
+	background: rgba(15, 23, 42, 0.06);
 	border-radius: 999rpx;
 	overflow: hidden;
-	margin-bottom: 24rpx;
 }
 
-.health-bar-fill {
+.quit-health-bar-fill {
 	height: 100%;
-	background: linear-gradient(90deg, #10B981 0%, #059669 100%);
+	background: linear-gradient(90deg, #31c18b 0%, #14936d 100%);
 	border-radius: 999rpx;
 	transition: width 0.5s ease;
 }
 
-.health-milestones {
+.quit-health-milestones {
 	display: flex;
 	justify-content: space-between;
+	gap: 8rpx;
+	margin-top: 22rpx;
 }
 
-.milestone-item {
+.quit-milestone-item {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
 	gap: 8rpx;
+	flex: 1;
 }
 
-.milestone-dot {
+.quit-milestone-dot {
 	width: 16rpx;
 	height: 16rpx;
 	border-radius: 50%;
-	background: #E5E7EB;
-	border: 2rpx solid #D1D5DB;
+	background: rgba(15, 23, 42, 0.08);
+	border: 2rpx solid rgba(15, 23, 42, 0.1);
 }
 
-.milestone-done .milestone-dot {
-	background: #10B981;
-	border-color: #059669;
+.quit-milestone-done .quit-milestone-dot {
+	background: #31c18b;
+	border-color: #14936d;
 }
 
-.milestone-text {
+.quit-milestone-text {
 	font-size: 20rpx;
-	color: #9CA3AF;
+	color: #9ca3af;
 }
 
-.milestone-done .milestone-text {
-	color: #059669;
-	font-weight: 500;
-}
-
-/* ===== 今日激励 ===== */
-.motivation-section {
-	margin-bottom: 24rpx;
-}
-
-.motivation-card {
-	background: linear-gradient(135deg, #FFFFFF 0%, #FEF3C7 100%);
-	border-radius: 24rpx;
-	padding: 32rpx;
-	position: relative;
-	overflow: hidden;
-	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
-}
-
-.motivation-quote {
-	position: absolute;
-	top: 16rpx;
-	left: 24rpx;
-	font-size: 64rpx;
-	color: rgba(245, 158, 11, 0.2);
-	font-family: Georgia, serif;
-	line-height: 1;
-}
-
-.motivation-text {
-	display: block;
-	font-size: 30rpx;
+.quit-milestone-done .quit-milestone-text {
+	color: #14936d;
 	font-weight: 600;
-	color: #92400E;
-	line-height: 1.6;
-	padding-left: 32rpx;
 }
 
-.motivation-tip {
+.quit-motivation-card {
+	padding: 24rpx;
+}
+
+.quit-motivation-label {
+	position: relative;
+	z-index: 1;
+	display: inline-flex;
+	align-items: center;
+	padding: 8rpx 18rpx;
+	border-radius: 999rpx;
+	background: rgba(240, 252, 248, 0.94);
+	border: 1rpx solid rgba(15, 23, 42, 0.05);
+	font-size: 20rpx;
+	font-weight: 600;
+	color: #6b7280;
+}
+
+.quit-motivation-text {
+	position: relative;
+	z-index: 1;
 	display: block;
-	font-size: 24rpx;
-	color: #B45309;
 	margin-top: 16rpx;
-	padding-left: 32rpx;
-	line-height: 1.5;
+	font-size: 28rpx;
+	line-height: 1.7;
+	font-weight: 600;
+	color: #374151;
 }
 
 /* ===== 记录模式 ===== */
@@ -1002,13 +1090,30 @@ onShareAppMessage(() => ({
 }
 
 .summary-card-record {
-	background: linear-gradient(145deg, rgba(235, 251, 245, 0.9) 0%, rgba(255, 255, 255, 0.95) 100%);
-	border-color: rgba(20, 184, 130, 0.15);
-	box-shadow: 0 24rpx 56rpx rgba(20, 184, 130, 0.08), inset 0 2rpx 8rpx rgba(255, 255, 255, 1);
+	background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(251, 253, 252, 0.94) 100%);
+	-webkit-backdrop-filter: blur(20px);
+	backdrop-filter: blur(20px);
+	border-color: rgba(15, 23, 42, 0.06);
+	box-shadow:
+		0 20rpx 44rpx rgba(15, 23, 42, 0.06),
+		0 6rpx 14rpx rgba(15, 23, 42, 0.03),
+		inset 0 1rpx 0 rgba(255, 255, 255, 0.88);
 	padding: 28rpx 24rpx;
 	border-radius: 32rpx;
 }
 
+.summary-card-record::before {
+	content: '';
+	position: absolute;
+	width: 240rpx;
+	height: 240rpx;
+	left: -72rpx;
+	top: -72rpx;
+	border-radius: 50%;
+	background: radial-gradient(circle, rgba(52, 200, 160, 0.14) 0%, rgba(52, 200, 160, 0) 72%);
+	pointer-events: none;
+}
+
 .summary-card-top {
 	display: flex;
 	align-items: flex-start;
@@ -1022,13 +1127,16 @@ onShareAppMessage(() => ({
 	margin-bottom: 16rpx;
 }
 
-.record-header-more {
-	font-size: 42rpx;
-	line-height: 1;
-	font-weight: 700;
-	letter-spacing: 4rpx;
-	color: #1f4b3d;
-	transform: translateY(-4rpx);
+.record-header-chip {
+	flex-shrink: 0;
+	padding: 10rpx 18rpx;
+	border-radius: 999rpx;
+	background: rgba(248, 250, 249, 0.96);
+	border: 1rpx solid rgba(15, 23, 42, 0.06);
+	font-size: 21rpx;
+	font-weight: 600;
+	color: #6b7280;
+	box-shadow: 0 8rpx 18rpx rgba(15, 23, 42, 0.04);
 }
 
 .summary-heading {
@@ -1057,7 +1165,19 @@ onShareAppMessage(() => ({
 }
 
 .summary-title-record {
-	color: #123329;
+	color: #111827;
+}
+
+.summary-subtitle {
+	display: block;
+	margin-top: 8rpx;
+	font-size: 22rpx;
+	line-height: 1.5;
+	color: #6b7280;
+}
+
+.summary-subtitle-record {
+	color: #67727e;
 }
 
 .record-overview {
@@ -1076,16 +1196,17 @@ onShareAppMessage(() => ({
 	align-items: center;
 	justify-content: center;
 	flex-shrink: 0;
-	box-shadow: inset 0 4rpx 12rpx rgba(0,0,0,0.03), 0 4rpx 12rpx rgba(255,255,255,0.8);
-	background: rgba(248, 255, 251, 0.4);
+	box-shadow: inset 0 2rpx 6rpx rgba(15, 23, 42, 0.04), 0 10rpx 24rpx rgba(15, 23, 42, 0.05);
+	background: linear-gradient(180deg, #ffffff 0%, #f8fbf9 100%);
+	border: 1rpx solid rgba(15, 23, 42, 0.05);
 }
 
 .record-ring-inner {
 	width: 100%;
 	height: 100%;
 	border-radius: 50%;
-	background: rgba(255, 255, 255, 0.95);
-	box-shadow: 0 4rpx 16rpx rgba(20, 184, 130, 0.08);
+	background: rgba(255, 255, 255, 0.96);
+	box-shadow: inset 0 1rpx 0 rgba(255, 255, 255, 0.9);
 	display: flex;
 	flex-direction: column;
 	align-items: center;
@@ -1095,10 +1216,10 @@ onShareAppMessage(() => ({
 }
 
 .record-ring-value {
-	font-size: 34rpx;
+	font-size: 40rpx;
 	line-height: 1.2;
 	font-weight: 800;
-	color: #14b882;
+	color: #14936d;
 	font-family: 'DIN Alternate', -apple-system, sans-serif;
 }
 
@@ -1106,7 +1227,7 @@ onShareAppMessage(() => ({
 	margin-top: 8rpx;
 	font-size: 20rpx;
 	font-weight: 500;
-	color: #5c8274;
+	color: #6b7280;
 }
 
 .record-metric-group {
@@ -1120,11 +1241,9 @@ onShareAppMessage(() => ({
 	gap: 0;
 	border-radius: 28rpx;
 	overflow: hidden;
-	background: rgba(255, 255, 255, 0.6);
-	-webkit-backdrop-filter: blur(10px);
-	backdrop-filter: blur(10px);
-	border: 1rpx solid rgba(255, 255, 255, 0.8);
-	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.02);
+	background: linear-gradient(180deg, #fbfcfc 0%, #f7faf8 100%);
+	border: 1rpx solid rgba(15, 23, 42, 0.05);
+	box-shadow: inset 0 1rpx 0 rgba(255, 255, 255, 0.9);
 }
 
 .record-metric-item {
@@ -1146,7 +1265,7 @@ onShareAppMessage(() => ({
 	top: 28rpx;
 	bottom: 28rpx;
 	width: 2rpx;
-	background: rgba(20, 184, 130, 0.1);
+	background: rgba(15, 23, 42, 0.06);
 }
 
 .summary-metric-label {
@@ -1158,7 +1277,7 @@ onShareAppMessage(() => ({
 }
 
 .record-metric-item .summary-metric-label {
-	color: #6b9184;
+	color: #6b7280;
 }
 
 .summary-metric-value-row {
@@ -1170,7 +1289,7 @@ onShareAppMessage(() => ({
 }
 
 .summary-metric-value {
-	font-size: 48rpx;
+	font-size: 52rpx;
 	font-weight: 800;
 	color: #1a1a1a;
 	line-height: 1;
@@ -1178,7 +1297,7 @@ onShareAppMessage(() => ({
 }
 
 .record-metric-item .summary-metric-value {
-	color: #14b882;
+	color: #111827;
 }
 
 .summary-metric-unit {
@@ -1188,7 +1307,7 @@ onShareAppMessage(() => ({
 }
 
 .record-metric-item .summary-metric-unit {
-	color: #52776a;
+	color: #6b7280;
 }
 
 .record-group-note {
@@ -1197,8 +1316,10 @@ onShareAppMessage(() => ({
 	font-size: 22rpx;
 	font-weight: 500;
 	line-height: 1.5;
-	color: #6f9487;
-	background: rgba(20, 184, 130, 0.05);
+	color: #4b5563;
+	background: linear-gradient(180deg, #fafcfb 0%, #f5f8f6 100%);
+	border: 1rpx solid rgba(15, 23, 42, 0.05);
+	box-shadow: inset 0 1rpx 0 rgba(255, 255, 255, 0.9);
 	padding: 10rpx 14rpx;
 	border-radius: 16rpx;
 }
@@ -1217,21 +1338,20 @@ onShareAppMessage(() => ({
 	text-align: center;
 	border-radius: 999rpx;
 	justify-content: center;
-	background: rgba(255, 255, 255, 0.85);
-	-webkit-backdrop-filter: blur(10px);
-	backdrop-filter: blur(10px);
-	border: 2rpx solid rgba(255, 255, 255, 1);
-	box-shadow: 0 12rpx 28rpx rgba(83, 157, 128, 0.1);
+	background: linear-gradient(180deg, #ffffff 0%, #f7faf8 100%);
+	border: 2rpx solid rgba(15, 23, 42, 0.06);
+	box-shadow: 0 14rpx 28rpx rgba(15, 23, 42, 0.07);
 	display: flex;
 }
 
 .primary-pill-smoke {
-	background: linear-gradient(180deg, rgba(255, 242, 240, 0.9) 0%, rgba(255, 224, 218, 0.9) 100%);
-	border-color: rgba(255, 255, 255, 0.8);
+	background: linear-gradient(180deg, #ffffff 0%, #f7faf8 100%);
 }
 
 .primary-pill-resist {
-	background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(241, 255, 248, 0.95) 100%);
+	background: linear-gradient(180deg, #31c18b 0%, #1da36f 100%);
+	border-color: transparent;
+	box-shadow: 0 16rpx 30rpx rgba(29, 163, 111, 0.22);
 }
 
 .primary-pill-title {
@@ -1241,21 +1361,40 @@ onShareAppMessage(() => ({
 }
 
 .record-action-row .primary-pill-smoke .primary-pill-title {
-	color: #cb5a49;
+	color: #111827;
 }
 
 .record-action-row .primary-pill-resist .primary-pill-title {
-	color: #1f755e;
+	color: #ffffff;
 }
 
 /* ===== 记录模式 - 健康数据卡片 ===== */
 .health-data-card {
-	background: linear-gradient(135deg, #FFFFFF 0%, #F0FDF9 100%);
+	background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(251, 253, 252, 0.94) 100%);
+	-webkit-backdrop-filter: blur(20px);
+	backdrop-filter: blur(20px);
 	border-radius: 24rpx;
 	padding: 32rpx;
 	margin-top: 24rpx;
-	box-shadow: 0 8rpx 24rpx rgba(26, 163, 122, 0.08);
-	border: 1rpx solid rgba(26, 163, 122, 0.1);
+	box-shadow:
+		0 18rpx 38rpx rgba(15, 23, 42, 0.06),
+		0 6rpx 14rpx rgba(15, 23, 42, 0.03),
+		inset 0 1rpx 0 rgba(255, 255, 255, 0.9);
+	border: 1rpx solid rgba(15, 23, 42, 0.06);
+	position: relative;
+	overflow: hidden;
+}
+
+.health-data-card::before {
+	content: '';
+	position: absolute;
+	width: 220rpx;
+	height: 220rpx;
+	right: -64rpx;
+	top: -88rpx;
+	border-radius: 50%;
+	background: radial-gradient(circle, rgba(52, 200, 160, 0.12) 0%, rgba(52, 200, 160, 0) 72%);
+	pointer-events: none;
 }
 
 .health-data-header {
@@ -1268,12 +1407,12 @@ onShareAppMessage(() => ({
 .health-data-title {
 	font-size: 30rpx;
 	font-weight: 700;
-	color: #111827;
+	color: #17372e;
 }
 
 .health-data-subtitle {
 	font-size: 24rpx;
-	color: #9CA3AF;
+	color: #6b7280;
 }
 
 .health-metrics {
@@ -1287,8 +1426,10 @@ onShareAppMessage(() => ({
 	align-items: center;
 	gap: 16rpx;
 	padding: 20rpx;
-	background: rgba(26, 163, 122, 0.04);
+	background: linear-gradient(180deg, #fbfcfc 0%, #f7faf8 100%);
 	border-radius: 16rpx;
+	border: 1rpx solid rgba(15, 23, 42, 0.05);
+	box-shadow: inset 0 1rpx 0 rgba(255, 255, 255, 0.92);
 }
 
 .health-metric-icon {
@@ -1323,7 +1464,7 @@ onShareAppMessage(() => ({
 }
 
 .health-metric-value {
-	font-size: 28rpx;
+	font-size: 30rpx;
 	font-weight: 700;
 	color: #111827;
 	font-family: 'DIN Alternate', -apple-system, sans-serif;
@@ -1331,7 +1472,7 @@ onShareAppMessage(() => ({
 
 .health-metric-label {
 	font-size: 22rpx;
-	color: #6B7280;
+	color: #6b7280;
 	margin-top: 2rpx;
 }
 
@@ -1341,8 +1482,10 @@ onShareAppMessage(() => ({
 	gap: 12rpx;
 	margin-top: 24rpx;
 	padding: 16rpx 20rpx;
-	background: rgba(26, 163, 122, 0.06);
+	background: linear-gradient(180deg, #f7fbf9 0%, #f2f7f4 100%);
 	border-radius: 12rpx;
+	border: 1rpx solid rgba(15, 23, 42, 0.05);
+	box-shadow: inset 0 1rpx 0 rgba(255, 255, 255, 0.9);
 }
 
 .health-tip-icon {
@@ -1351,7 +1494,7 @@ onShareAppMessage(() => ({
 
 .health-tip-text {
 	font-size: 24rpx;
-	color: #059669;
+	color: #4b5563;
 	line-height: 1.5;
 }
 </style>
diff --git a/src/pages/mode-select/index.vue b/src/pages/mode-select/index.vue
index 693a970..79cc547 100644
--- a/src/pages/mode-select/index.vue
+++ b/src/pages/mode-select/index.vue
@@ -71,6 +71,21 @@ function setupNavBar() {
 	}
 }
 
+function isProfileCompleted(profileData) {
+	const profile = profileData?.profile
+	return profileData?.is_completed ||
+		(profile && profile.onboarding_completed_at) ||
+		(profile && profile.baseline_cigs_per_day > 0)
+}
+
+function goHome() {
+	uni.switchTab({ url: '/pages/index/index' })
+}
+
+function goOnboarding() {
+	uni.redirectTo({ url: '/pages/onboarding/index' })
+}
+
 async function selectMode(mode) {
 	if (submitting.value) return
 	submitting.value = true
@@ -78,20 +93,15 @@ async function selectMode(mode) {
 
 	try {
 		const profileData = await profileStore.saveProfile({ mode })
-		const profile = profileData.profile
-		const isCompleted = profileData.is_completed ||
-			(profile && profile.onboarding_completed_at) ||
-			(profile && profile.baseline_cigs_per_day > 0)
-
-		if (!profileData.exists || !isCompleted) {
-			uni.redirectTo({ url: '/pages/onboarding/index' })
+		if (!profileData.exists || !isProfileCompleted(profileData)) {
+			goOnboarding()
 			return
 		}
 
-		uni.switchTab({ url: '/pages/index/index' })
+		goHome()
 	} catch (e) {
 		console.error('selectMode error:', e)
-		uni.switchTab({ url: '/pages/index/index' })
+		goHome()
 	} finally {
 		submitting.value = false
 	}
@@ -104,15 +114,17 @@ onMounted(async () => {
 	// New users go directly to onboarding (single-page flow)
 	try {
 		const profileData = await profileStore.fetchProfile()
-		const profile = profileData?.profile
-		const isCompleted = profileData?.is_completed ||
-			(profile && profile.onboarding_completed_at) ||
-			(profile && profile.baseline_cigs_per_day > 0)
-		if (!profileData?.exists || !isCompleted) {
-			uni.redirectTo({ url: '/pages/onboarding/index' })
+		if (!profileData?.exists || !isProfileCompleted(profileData)) {
+			goOnboarding()
+			return
+		}
+		if (profileData?.profile?.mode || userStore.mode) {
+			goHome()
 		}
 	} catch (e) {
-		// If fetch fails, let user choose mode normally
+		if (userStore.mode) {
+			goHome()
+		}
 	}
 })
 </script>
diff --git a/src/pages/profile/index.vue b/src/pages/profile/index.vue
index 2c2ad32..6e7ee29 100644
--- a/src/pages/profile/index.vue
+++ b/src/pages/profile/index.vue
@@ -1,5 +1,6 @@
 <template>
 	<view class="page">
+		<view class="page-bg"></view>
 		<view class="nav-placeholder" :style="{ height: navBarHeight + 'px' }"></view>
 
 		<view class="section">
@@ -18,32 +19,6 @@
 		</view>
 
 		<view class="section">
-			<text class="section-label">使用模式</text>
-			<view class="mode-card card">
-				<view class="mode-card-header">
-					<view class="menu-icon menu-icon-accent">
-						<text class="menu-glyph">模</text>
-					</view>
-					<view class="menu-content">
-						<text class="menu-label">打卡模式</text>
-						<text class="menu-desc">直接切换成“戒烟打卡”或“记录抽烟”</text>
-					</view>
-				</view>
-				<view class="mode-switch">
-					<view
-						v-for="item in modeOptions"
-						:key="item.value"
-						class="mode-switch-item"
-						:class="{ 'mode-switch-item-active': userStore.mode === item.value }"
-						@tap="changeMode(item.value)"
-					>
-						<text class="mode-switch-title">{{ item.label }}</text>
-						<text class="mode-switch-desc">{{ item.desc }}</text>
-					</view>
-				</view>
-				<text class="mode-hint">当前：{{ modeText }}</text>
-			</view>
-
 			<text class="section-label">常用操作</text>
 			<view class="menu-list card">
 				<view class="menu-item">
@@ -56,11 +31,11 @@
 						<view class="menu-actions">
 							<text class="menu-action" @tap.stop="previewSharePage">预览分享页</text>
 							<text class="menu-action-sep">·</text>
-							<text class="menu-action" @tap.stop="handleRefreshShare">刷新分享链接</text>
+							<text class="menu-action" @tap.stop="handleRefreshShare">刷新</text>
 						</view>
 					</view>
 					<button class="share-btn" open-type="share" :disabled="shareLoading || !shareToken">
-						{{ shareLoading ? '生成中' : '分享' }}
+						{{ shareLoading ? '生成中' : '去分享' }}
 					</button>
 				</view>
 
@@ -72,7 +47,7 @@
 					</view>
 					<view class="menu-content">
 						<text class="menu-label">重新填写问卷</text>
-						<text class="menu-desc">修改吸烟基线与个人信息</text>
+						<text class="menu-desc">修改打卡模式、吸烟基线等个人信息</text>
 					</view>
 					<text class="menu-arrow">›</text>
 				</view>
@@ -88,7 +63,7 @@
 					</view>
 					<view class="menu-content">
 						<text class="menu-label">清除缓存</text>
-						<text class="menu-desc">仅清理本地缓存，不影响云端记录</text>
+						<text class="menu-desc">仅清理本地缓存，不影响云端数据</text>
 					</view>
 					<text class="menu-arrow">›</text>
 				</view>
@@ -128,12 +103,7 @@ const { waitForLogin } = useLogin()
 const shareToken = ref('')
 const shareExpireAt = ref('')
 const shareLoading = ref(false)
-const modeSaving = ref(false)
 const navBarHeight = ref(0)
-const modeOptions = [
-	{ value: 'quit', label: '戒烟打卡', desc: '按天记录今天没抽' },
-	{ value: 'record', label: '记录抽烟', desc: '按支数记录变化' }
-]
 
 const userName = computed(() => userStore.user?.nickname || '戒烟用户')
 const userAvatar = computed(() => userStore.user?.avatar_url || 'https://linghu-wmr.oss-cn-beijing.aliyuncs.com/smt/avatar.png')
@@ -214,25 +184,6 @@ function previewSharePage() {
 	})
 }
 
-async function changeMode(nextMode) {
-	if (!nextMode || nextMode === userStore.mode || modeSaving.value) return
-	modeSaving.value = true
-	try {
-		uni.showLoading({ title: '切换中...' })
-		await profileStore.saveProfile({ mode: nextMode })
-		uni.hideLoading()
-		uni.showToast({ title: '模式已切换', icon: 'success' })
-		setTimeout(() => {
-			uni.switchTab({ url: '/pages/index/index' })
-		}, 250)
-	} catch (e) {
-		uni.hideLoading()
-		uni.showToast({ title: '切换失败', icon: 'none' })
-	} finally {
-		modeSaving.value = false
-	}
-}
-
 function goOnboarding() {
 	uni.navigateTo({ url: '/pages/onboarding/index' })
 }
@@ -285,11 +236,21 @@ onShow(async () => {
 .page {
 	min-height: 100vh;
 	position: relative;
-	background: linear-gradient(180deg, #E6F7F2 0%, #F0FBF7 40%, #FAFFFE 100%);
-	padding: 0 28rpx 0;
+	background-color: #F5F7F6;
+	padding: 0 32rpx 0;
 	box-sizing: border-box;
 }
 
+.page-bg {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	height: 500rpx;
+	background: linear-gradient(180deg, #DDF3EB 0%, #F5F7F6 100%);
+	z-index: 0;
+}
+
 .nav-placeholder,
 .section,
 .version {
@@ -298,37 +259,36 @@ onShow(async () => {
 }
 
 .section {
-	margin-bottom: 20rpx;
+	margin-bottom: 36rpx;
 }
 
 .section-label {
 	display: block;
-	margin: 0 0 14rpx 6rpx;
-	font-size: 26rpx;
+	margin: 0 0 16rpx 16rpx;
+	font-size: 28rpx;
 	font-weight: 600;
-	color: #1a5c45;
+	color: #666666;
 }
 
 .card {
-	background: rgba(255, 255, 255, 0.88);
-	border-radius: 24rpx;
-	padding: 24rpx;
-	border: 1.5rpx solid rgba(52, 200, 160, 0.14);
-	box-shadow: 0 4rpx 18rpx rgba(52, 200, 160, 0.07);
+	background: #FFFFFF;
+	border-radius: 32rpx;
+	padding: 32rpx;
+	box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.03);
 }
 
 .user-section {
 	display: flex;
 	align-items: center;
-	gap: 24rpx;
+	gap: 32rpx;
 }
 
 .avatar {
-	width: 120rpx;
-	height: 120rpx;
+	width: 128rpx;
+	height: 128rpx;
 	border-radius: 50%;
-	border: 4rpx solid rgba(52, 200, 160, 0.16);
-	background-color: rgba(52, 200, 160, 0.06);
+	background-color: #F0F4F2;
+	flex-shrink: 0;
 }
 
 .user-copy {
@@ -341,197 +301,137 @@ onShow(async () => {
 .user-name {
 	font-size: 38rpx;
 	font-weight: 700;
-	color: #0D3D2E;
+	color: #1A1A1A;
 }
 
 .user-desc {
 	display: block;
 	margin-top: 8rpx;
-	font-size: 25rpx;
-	line-height: 1.5;
-	color: #52806E;
+	font-size: 26rpx;
+	color: #999999;
 }
 
 .user-meta {
 	display: flex;
 	flex-wrap: wrap;
-	gap: 14rpx;
+	gap: 16rpx;
 	margin-top: 16rpx;
 }
 
 .user-pill {
-	padding: 14rpx 26rpx;
+	padding: 8rpx 20rpx;
 	border-radius: 999rpx;
-	background: rgba(52, 200, 160, 0.12);
-	border: 1.5rpx solid rgba(52, 200, 160, 0.18);
+	background: #E8F5F0;
 	font-size: 22rpx;
 	font-weight: 600;
-	color: #1a8c62;
+	color: #10B981;
 }
 
 .user-pill-muted {
-	background: rgba(52, 200, 160, 0.06);
-	color: #7aA898;
-}
-
-.mode-card {
-	margin-bottom: 16rpx;
-}
-
-.mode-card-header {
-	display: flex;
-	align-items: center;
-	gap: 20rpx;
-	margin-bottom: 20rpx;
+	background: #F5F5F5;
+	color: #999999;
 }
 
 .menu-list {
-	display: flex;
-	flex-direction: column;
-	overflow: hidden;
+	padding: 8rpx 32rpx;
 }
 
 .menu-item {
 	display: flex;
 	align-items: center;
-	gap: 20rpx;
-	padding: 6rpx 0;
+	gap: 24rpx;
+	padding: 24rpx 0;
+	background: transparent;
 }
 
 .menu-divider {
-	margin: 16rpx 0;
-	height: 2rpx;
-	background: rgba(52, 200, 160, 0.12);
+	height: 1px;
+	background: #F0F0F0;
+	margin: 0;
 }
 
 .menu-icon {
-	width: 64rpx;
-	height: 64rpx;
-	border-radius: 18rpx;
+	width: 72rpx;
+	height: 72rpx;
+	border-radius: 50%;
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	border: 1.5rpx solid rgba(52, 200, 160, 0.18);
+	flex-shrink: 0;
 }
 
 .menu-icon-accent {
-	background: rgba(52, 200, 160, 0.12);
+	background: #E8F5F0;
 }
 
 .menu-icon-muted {
-	background: rgba(52, 200, 160, 0.06);
+	background: #F5F5F5;
 }
 
 .menu-glyph {
-	font-size: 24rpx;
+	font-size: 30rpx;
 	font-weight: 700;
-	color: #1a8c62;
+}
+
+.menu-icon-accent .menu-glyph {
+	color: #10B981;
+}
+
+.menu-icon-muted .menu-glyph {
+	color: #999999;
 }
 
 .menu-content {
 	flex: 1;
 	display: flex;
 	flex-direction: column;
-	gap: 4rpx;
+	gap: 6rpx;
 }
 
 .menu-label {
-	font-size: 28rpx;
-	color: #0D3D2E;
+	font-size: 30rpx;
+	color: #1A1A1A;
 	font-weight: 600;
 }
 
 .menu-desc {
-	font-size: 25rpx;
-	line-height: 1.5;
-	color: #52806E;
+	font-size: 24rpx;
+	line-height: 1.4;
+	color: #999999;
 }
 
 .menu-actions {
-	margin-top: 6rpx;
+	margin-top: 8rpx;
 	display: flex;
 	align-items: center;
 	flex-wrap: wrap;
-	gap: 8rpx;
-	font-size: 22rpx;
-	color: #1a8c62;
+	gap: 12rpx;
+	font-size: 24rpx;
 }
 
 .menu-action {
-	color: #1a8c62;
+	color: #10B981;
+	font-weight: 500;
 }
 
 .menu-action-sep {
-	color: #7aA898;
-}
-
-.menu-arrow {
-	font-size: 36rpx;
-	color: #7aA898;
-}
-
-.menu-value {
-	font-size: 24rpx;
-	font-weight: 600;
-	color: #1a8c62;
-}
-
-.mode-switch {
-	display: flex;
-	gap: 16rpx;
-}
-
-.mode-switch-item {
-	flex: 1;
-	padding: 22rpx 20rpx;
-	border-radius: 20rpx;
-	background: rgba(255, 255, 255, 0.72);
-	border: 2rpx solid rgba(52, 200, 160, 0.1);
-	box-shadow: 0 2rpx 10rpx rgba(52, 200, 160, 0.04);
-}
-
-.mode-switch-item-active {
-	background: rgba(52, 200, 160, 0.09);
-	border-color: rgba(52, 200, 160, 0.45);
-	box-shadow: 0 4rpx 16rpx rgba(52, 200, 160, 0.14);
-}
-
-.mode-switch-title {
-	display: block;
-	font-size: 28rpx;
-	font-weight: 700;
-	color: #0D3D2E;
-}
-
-.mode-switch-desc {
-	display: block;
-	margin-top: 8rpx;
-	font-size: 22rpx;
-	line-height: 1.5;
-	color: #7aA898;
-}
-
-.mode-hint {
-	display: block;
-	margin-top: 16rpx;
-	font-size: 22rpx;
-	color: #1a8c62;
+	color: #D4D4D4;
 }
 
 .share-btn {
 	margin: 0;
-	padding: 16rpx 28rpx;
-	line-height: 1.4;
-	font-size: 24rpx;
+	padding: 12rpx 32rpx;
+	line-height: 1.5;
+	font-size: 26rpx;
 	border: none;
 	border-radius: 999rpx;
 	color: #FFFFFF;
-	background: linear-gradient(180deg, #3DD9AE 0%, #34C8A0 100%);
-	box-shadow: 0 12rpx 28rpx rgba(52, 200, 160, 0.28);
+	background: #10B981;
+	font-weight: 600;
 }
 
 .share-btn[disabled] {
-	background: #9CC5B5;
+	background: #A7F3D0;
 	color: #FFFFFF;
 }
 
@@ -539,15 +439,20 @@ onShow(async () => {
 	border: none;
 }
 
+.menu-arrow {
+	font-size: 36rpx;
+	color: #CCCCCC;
+}
+
 .version {
 	display: block;
 	text-align: center;
-	font-size: 22rpx;
-	color: #7aA898;
-	margin-top: 28rpx;
+	font-size: 24rpx;
+	color: #B0B0B0;
+	margin-top: 40rpx;
 }
 
 .bottom-safe {
-	height: calc(32rpx + env(safe-area-inset-bottom));
+	height: calc(40rpx + env(safe-area-inset-bottom));
 }
 </style>
diff --git a/src/pages/stats-calendar/index.vue b/src/pages/stats-calendar/index.vue
new file mode 100644
index 0000000..0b7da89
--- /dev/null
+++ b/src/pages/stats-calendar/index.vue
@@ -0,0 +1,593 @@
+<template>
+	<view class="page">
+
+		<view class="card">
+			<view class="month-bar">
+				<view class="month-arrow" @tap="changeMonth(-1)">‹</view>
+				<view class="month-copy">
+					<text class="month-title">{{ monthTitle }}</text>
+					<text class="month-subtitle">{{ monthSubtitle }}</text>
+				</view>
+				<view class="month-arrow" :class="{ 'month-arrow-disabled': !canGoNextMonth }" @tap="changeMonth(1)">›</view>
+			</view>
+
+			<view class="summary-row">
+				<view class="summary-chip">
+					<text class="summary-chip-label">本月已抽</text>
+					<view class="summary-chip-value-row">
+						<text class="summary-chip-value">{{ monthSmokeTotal }}</text>
+						<text class="summary-chip-unit">支</text>
+					</view>
+				</view>
+				<view class="summary-chip summary-chip-soft">
+					<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>
+					</view>
+				</view>
+				<view class="summary-chip summary-chip-soft">
+					<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>
+					</view>
+				</view>
+			</view>
+
+			<view class="calendar-legend">
+				<view class="legend-item">
+					<view class="legend-dot legend-dot-smoke"></view>
+					<text class="legend-text">已抽</text>
+				</view>
+				<view class="legend-item">
+					<view class="legend-dot legend-dot-resisted"></view>
+					<text class="legend-text">忍住</text>
+				</view>
+				<text class="legend-tip">点击灰色日期可切换到对应月份</text>
+			</view>
+
+			<view class="weekday-row">
+				<text v-for="item in weekdayNames" :key="item" class="weekday-item">{{ item }}</text>
+			</view>
+
+			<view class="calendar-grid">
+				<view
+					v-for="item in calendarDays"
+					:key="item.key"
+					class="calendar-cell"
+					:class="{
+						'calendar-cell-muted': !item.isCurrentMonth,
+						'calendar-cell-selected': item.date === selectedDate,
+						'calendar-cell-today': item.isToday,
+						'calendar-cell-disabled': item.isFuture
+					}"
+					@tap="selectDay(item)"
+				>
+					<view class="calendar-cell-top">
+						<text class="calendar-day">{{ item.day }}</text>
+						<view v-if="item.isToday" class="calendar-today-dot"></view>
+					</view>
+					<view class="calendar-count-wrap">
+						<text class="calendar-count-value">{{ item.smokeCount }}</text>
+						<text class="calendar-count-unit">支</text>
+					</view>
+				</view>
+			</view>
+		</view>
+
+		<view class="bottom-safe"></view>
+	</view>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+import { useLogin } from '@/hooks/useLogin'
+import * as api from '@/api'
+
+const { waitForLogin } = useLogin()
+
+const weekdayNames = ['日', '一', '二', '三', '四', '五', '六']
+const currentMonth = ref(startOfMonth(new Date()))
+const selectedDate = ref(formatDate(new Date()))
+const monthLogs = ref([])
+const todayText = formatDate(new Date())
+
+const monthTitle = computed(() => {
+	const date = currentMonth.value
+	return `${date.getFullYear()} 年 ${date.getMonth() + 1} 月`
+})
+
+const monthSubtitle = computed(() => {
+	return `共 ${monthLogs.value.length} 条记录`
+})
+
+const monthSummaryMap = computed(() => buildDailySummaryMap(monthLogs.value))
+const canGoNextMonth = computed(() => {
+	return formatDate(startOfMonth(currentMonth.value)) < formatDate(startOfMonth(new Date()))
+})
+
+const calendarDays = computed(() => {
+	const monthStart = startOfMonth(currentMonth.value)
+	const monthEnd = endOfMonth(currentMonth.value)
+	const gridStart = startOfWeek(monthStart)
+	const gridEnd = endOfWeek(monthEnd)
+	const result = []
+	const summaryMap = monthSummaryMap.value
+
+	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 }
+		result.push({
+			key: dateKey,
+			date: dateKey,
+			day: date.getDate(),
+			isCurrentMonth: date.getMonth() === monthStart.getMonth(),
+			isToday: dateKey === todayText,
+			isFuture: dateKey > todayText,
+			smokeCount: summary.smokeCount,
+			resistedCount: summary.resistedCount
+		})
+	}
+
+	return result
+})
+
+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)
+})
+
+const activeDayCount = computed(() => monthSummaryMap.value.size)
+
+async function fetchMonthLogs() {
+	const start = formatDate(startOfMonth(currentMonth.value))
+	const end = formatDate(endOfMonth(currentMonth.value))
+	try {
+		await waitForLogin()
+		const res = await api.getLogs({
+			page: 1,
+			page_size: 200,
+			type: 'all',
+			start,
+			end
+		})
+		monthLogs.value = res.data?.items || []
+	} catch (e) {
+		console.error('fetchMonthLogs error:', e)
+		monthLogs.value = []
+	}
+}
+
+async function initPage(dateText) {
+	const baseDate = parseDate(dateText) || new Date()
+	currentMonth.value = startOfMonth(baseDate)
+	selectedDate.value = formatDate(baseDate)
+	await fetchMonthLogs()
+}
+
+async function changeMonth(offset) {
+	const next = new Date(currentMonth.value)
+	next.setMonth(next.getMonth() + offset)
+	if (offset > 0 && formatDate(startOfMonth(next)) > formatDate(startOfMonth(new Date()))) {
+		return
+	}
+	currentMonth.value = startOfMonth(next)
+	selectedDate.value = formatDate(startOfMonth(next))
+	await fetchMonthLogs()
+}
+
+async function selectDay(item) {
+	if (item.isFuture) return
+	if (!item.isCurrentMonth) {
+		currentMonth.value = startOfMonth(parseDate(item.date))
+		selectedDate.value = item.date
+		await fetchMonthLogs()
+		return
+	}
+	selectedDate.value = item.date
+}
+
+onLoad(async (options) => {
+	await initPage(options?.date)
+})
+
+function buildDailySummaryMap(logs) {
+	const map = new Map()
+	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
+		}
+		map.set(dateKey, current)
+	})
+	return map
+}
+
+function resolveLogDate(log) {
+	if (typeof log?.smoke_time === 'string' && log.smoke_time) {
+		return log.smoke_time.split('T')[0]
+	}
+	if (log?.smoke_at) {
+		return formatDate(new Date(log.smoke_at))
+	}
+	if (log?.createtime) {
+		return formatDate(typeof log.createtime === 'number' ? new Date(log.createtime * 1000) : new Date(log.createtime))
+	}
+	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`)
+	if (Number.isNaN(date.getTime())) return null
+	return date
+}
+
+function formatDate(date) {
+	const y = date.getFullYear()
+	const m = String(date.getMonth() + 1).padStart(2, '0')
+	const d = String(date.getDate()).padStart(2, '0')
+	return `${y}-${m}-${d}`
+}
+
+function startOfMonth(date) {
+	return new Date(date.getFullYear(), date.getMonth(), 1)
+}
+
+function endOfMonth(date) {
+	return new Date(date.getFullYear(), date.getMonth() + 1, 0)
+}
+
+function startOfWeek(date) {
+	const result = new Date(date)
+	result.setDate(result.getDate() - result.getDay())
+	return result
+}
+
+function endOfWeek(date) {
+	const result = new Date(date)
+	result.setDate(result.getDate() + (6 - result.getDay()))
+	return result
+}
+
+function addDays(date, offset) {
+	const result = new Date(date)
+	result.setDate(result.getDate() + offset)
+	return result
+}
+</script>
+
+<style scoped>
+.page {
+	min-height: 100vh;
+	background: linear-gradient(180deg, #F6F8F6 0%, #EFF4F1 52%, #E9F0EC 100%);
+	padding: 20rpx;
+	box-sizing: border-box;
+}
+
+.page-header {
+	margin-bottom: 18rpx;
+}
+
+.page-eyebrow {
+	display: inline-flex;
+	align-items: center;
+	padding: 8rpx 18rpx;
+	border-radius: 999rpx;
+	background: rgba(255, 255, 255, 0.68);
+	border: 1rpx solid rgba(255, 255, 255, 0.72);
+	font-size: 20rpx;
+	font-weight: 600;
+	color: #6b7280;
+	margin-bottom: 16rpx;
+}
+
+.page-subtitle {
+	display: block;
+	margin-top: 2rpx;
+	font-size: 24rpx;
+	line-height: 1.5;
+	color: #52806E;
+}
+
+.card {
+	position: relative;
+	overflow: hidden;
+	background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(251, 253, 252, 0.94) 100%);
+	-webkit-backdrop-filter: blur(20px);
+	backdrop-filter: blur(20px);
+	border-radius: 32rpx;
+	padding: 22rpx;
+	margin-bottom: 16rpx;
+	border: 1rpx solid rgba(15, 23, 42, 0.06);
+	box-shadow:
+		0 20rpx 44rpx rgba(15, 23, 42, 0.06),
+		0 6rpx 14rpx rgba(15, 23, 42, 0.03),
+		inset 0 1rpx 0 rgba(255, 255, 255, 0.88);
+}
+
+.card::before {
+	content: '';
+	position: absolute;
+	width: 240rpx;
+	height: 240rpx;
+	left: -72rpx;
+	top: -72rpx;
+	border-radius: 50%;
+	background: radial-gradient(circle, rgba(52, 200, 160, 0.14) 0%, rgba(52, 200, 160, 0) 72%);
+	pointer-events: none;
+}
+
+.month-bar {
+	position: relative;
+	z-index: 1;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 16rpx;
+	margin-bottom: 16rpx;
+}
+
+.month-arrow {
+	width: 64rpx;
+	height: 64rpx;
+	border-radius: 18rpx;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: linear-gradient(180deg, #ffffff 0%, #f7faf8 100%);
+	border: 2rpx solid rgba(15, 23, 42, 0.06);
+	box-shadow: 0 14rpx 28rpx rgba(15, 23, 42, 0.07);
+	font-size: 40rpx;
+	color: #1a8c62;
+}
+
+.month-arrow-disabled {
+	opacity: 0.4;
+	box-shadow: none;
+}
+
+.month-copy {
+	flex: 1;
+	text-align: center;
+}
+
+.month-title {
+	display: block;
+	font-size: 30rpx;
+	font-weight: 800;
+	color: #111827;
+}
+
+.month-subtitle {
+	display: block;
+	margin-top: 6rpx;
+	font-size: 22rpx;
+	color: #6b7280;
+}
+
+.summary-row {
+	position: relative;
+	z-index: 1;
+	display: grid;
+	grid-template-columns: repeat(3, minmax(0, 1fr));
+	gap: 12rpx;
+	margin-bottom: 14rpx;
+}
+
+.summary-chip {
+	padding: 16rpx 14rpx;
+	border-radius: 22rpx;
+	background: linear-gradient(180deg, rgba(240, 252, 248, 0.96) 0%, rgba(247, 251, 249, 0.96) 100%);
+	border: 1rpx solid rgba(15, 23, 42, 0.05);
+	box-shadow: inset 0 1rpx 0 rgba(255, 255, 255, 0.9);
+}
+
+.summary-chip-soft {
+	background: linear-gradient(180deg, #fbfcfc 0%, #f7faf8 100%);
+}
+
+.summary-chip-label {
+	display: block;
+	font-size: 20rpx;
+	color: #7aA898;
+}
+
+.summary-chip-value-row {
+	display: flex;
+	align-items: baseline;
+	gap: 6rpx;
+	margin-top: 8rpx;
+}
+
+.summary-chip-value {
+	font-size: 34rpx;
+	font-weight: 800;
+	line-height: 1;
+	color: #111827;
+}
+
+.summary-chip-unit {
+	font-size: 20rpx;
+	color: #6b7280;
+}
+
+.calendar-legend {
+	position: relative;
+	z-index: 1;
+	display: flex;
+	align-items: center;
+	flex-wrap: wrap;
+	gap: 14rpx;
+	margin-bottom: 14rpx;
+	padding: 12rpx 14rpx;
+	border-radius: 16rpx;
+	background: linear-gradient(180deg, #fafcfb 0%, #f5f8f6 100%);
+	border: 1rpx solid rgba(15, 23, 42, 0.05);
+}
+
+.legend-item {
+	display: inline-flex;
+	align-items: center;
+	gap: 8rpx;
+}
+
+.legend-dot {
+	width: 16rpx;
+	height: 16rpx;
+	border-radius: 50%;
+}
+
+.legend-dot-smoke {
+	background: #1a8c62;
+}
+
+.legend-dot-resisted {
+	background: #a7d9c6;
+}
+
+.legend-text {
+	font-size: 21rpx;
+	color: #4b5563;
+}
+
+.legend-tip {
+	margin-left: auto;
+	font-size: 20rpx;
+	color: #9ca3af;
+}
+
+.weekday-row {
+	position: relative;
+	z-index: 1;
+	display: grid;
+	grid-template-columns: repeat(7, minmax(0, 1fr));
+	margin-bottom: 12rpx;
+	padding: 0 4rpx;
+}
+
+.weekday-item {
+	text-align: center;
+	font-size: 22rpx;
+	font-weight: 600;
+	color: #7aA898;
+}
+
+.calendar-grid {
+	position: relative;
+	z-index: 1;
+	display: grid;
+	grid-template-columns: repeat(7, minmax(0, 1fr));
+	gap: 10rpx;
+}
+
+.calendar-cell {
+	min-height: 138rpx;
+	padding: 14rpx 10rpx 12rpx;
+	border-radius: 22rpx;
+	background: linear-gradient(180deg, #ffffff 0%, #f7faf8 100%);
+	border: 1rpx solid rgba(15, 23, 42, 0.05);
+	display: flex;
+	flex-direction: column;
+	gap: 8rpx;
+	box-shadow:
+		inset 0 1rpx 0 rgba(255, 255, 255, 0.92),
+		0 8rpx 18rpx rgba(15, 23, 42, 0.04);
+}
+
+.calendar-cell-selected {
+	background: linear-gradient(180deg, rgba(240, 252, 248, 0.98) 0%, rgba(247, 252, 249, 0.96) 100%);
+	border-color: rgba(52, 200, 160, 0.24);
+	box-shadow:
+		inset 0 1rpx 0 rgba(255, 255, 255, 0.96),
+		0 12rpx 22rpx rgba(29, 163, 111, 0.08);
+}
+
+.calendar-cell-today {
+	box-shadow:
+		inset 0 0 0 2rpx rgba(26, 140, 98, 0.16),
+		0 10rpx 20rpx rgba(15, 23, 42, 0.04);
+}
+
+.calendar-cell-muted {
+	opacity: 0.42;
+	box-shadow: none;
+}
+
+.calendar-cell-disabled {
+	opacity: 0.3;
+	box-shadow: none;
+}
+
+.calendar-cell-top {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 8rpx;
+}
+
+.calendar-day {
+	font-size: 24rpx;
+	font-weight: 700;
+	color: #123329;
+}
+
+.calendar-today-dot {
+	width: 12rpx;
+	height: 12rpx;
+	border-radius: 50%;
+	color: #1a8c62;
+	background: #1a8c62;
+}
+
+.calendar-count-wrap {
+	display: flex;
+	align-items: baseline;
+	gap: 4rpx;
+}
+
+.calendar-count-value {
+	font-size: 34rpx;
+	line-height: 1;
+	font-weight: 800;
+	color: #14936d;
+}
+
+.calendar-count-unit {
+	font-size: 18rpx;
+	font-weight: 600;
+	color: #6b7280;
+}
+
+.bottom-safe {
+	height: calc(28rpx + env(safe-area-inset-bottom));
+}
+</style>
diff --git a/src/pages/stats/index.vue b/src/pages/stats/index.vue
index 745e65d..991123d 100644
--- a/src/pages/stats/index.vue
+++ b/src/pages/stats/index.vue
@@ -23,7 +23,7 @@
 				<text class="insight-glyph">{{ insightEmoji }}</text>
 			</view>
 			<view class="insight-content">
-				<text class="insight-title">每周洞察</text>
+				<text class="insight-title">阶段洞察</text>
 				<text class="insight-desc">{{ insightText }}</text>
 			</view>
 		</view>
@@ -33,23 +33,20 @@
 			<view class="card-header">
 				<view>
 					<text class="card-title">吸烟趋势</text>
-					<text class="card-sub">{{ trendRangeText }}</text>
-				</view>
-				<view class="status-chip" :class="statusChipClass">
-					<text class="status-arrow" :class="statusIconClass">{{ statusArrow }}</text>
-					<text class="status-text">{{ statusText }}</text>
+					<text class="card-sub">{{ weeklyTrendRangeText }}</text>
 				</view>
+				<view class="card-link" @tap="goCalendarDetail">日历详情</view>
 			</view>
 
 			<!-- 日均数据 -->
 			<view class="avg-row">
-				<text class="avg-value">{{ averageCount }}</text>
+				<text class="avg-value">{{ weeklyAverageCount }}</text>
 				<text class="avg-unit">支/天</text>
 			</view>
 
 			<!-- 日历格式趋势 -->
-			<view v-if="trendItems.length > 0" class="cal-grid">
-				<view v-for="(item, index) in trendItems" :key="index" class="cal-cell" :class="{ 'cal-cell-today': item.isHighlight }">
+			<view v-if="weeklyTrendItems.length > 0" class="cal-grid">
+				<view v-for="(item, index) in weeklyTrendItems" :key="index" class="cal-cell" :class="{ 'cal-cell-today': item.isHighlight }">
 					<text class="cal-weekday">{{ item.weekday }}</text>
 					<text class="cal-date">{{ item.date }}</text>
 					<view class="cal-dot" :class="calDotClass(item.count)">
@@ -164,7 +161,7 @@
 
 <script setup>
 import { ref, computed, onMounted, watch } from 'vue'
-import { onShareAppMessage } from '@dcloudio/uni-app'
+import { onShareAppMessage, onShow } from '@dcloudio/uni-app'
 import { useLogin } from '@/hooks/useLogin'
 import * as api from '@/api'
 
@@ -179,6 +176,7 @@ const tabs = [
 
 const currentTab = ref('week')
 const statsData = ref(null)
+const weeklyStatsData = ref(null)
 
 const WEEKDAY_NAMES = ['日', '一', '二', '三', '四', '五', '六']
 
@@ -217,6 +215,13 @@ const trendRangeText = computed(() => {
 	return formatRangeText(start, end)
 })
 
+const weeklyTrendRangeText = computed(() => {
+	const start = weeklyStatsData.value?.start
+	const end = weeklyStatsData.value?.end
+	if (!start || !end) return '固定展示最近 7 天'
+	return `${formatRangeText(start, end)} · 固定展示最近 7 天`
+})
+
 const statusText = computed(() => {
 	if (changePercent.value === null) return '暂无对比'
 	const sign = changePercent.value > 0 ? '+' : ''
@@ -244,8 +249,14 @@ const averageCount = computed(() => {
 	return Number(avg) || 0
 })
 
-const trendItems = computed(() => {
-	const trend = statsData.value?.trend
+const weeklyAverageCount = computed(() => {
+	const avg = weeklyStatsData.value?.daily_average
+	if (avg === undefined || avg === null) return 0
+	return Number(avg) || 0
+})
+
+const weeklyTrendItems = computed(() => {
+	const trend = weeklyStatsData.value?.trend
 	if (!trend || !Array.isArray(trend) || trend.length === 0) return []
 	return trend.map((item, index) => {
 		const count = Number(item.count) || 0
@@ -425,11 +436,31 @@ async function fetchStats() {
 	}
 }
 
+async function fetchWeeklyStats() {
+	try {
+		await waitForLogin()
+		const res = await api.getStats({ range: 'week' })
+		weeklyStatsData.value = res.data
+	} catch (e) {
+		console.error('fetchWeeklyStats error:', e)
+	}
+}
+
+function goCalendarDetail() {
+	uni.navigateTo({ url: '/pages/stats-calendar/index' })
+}
+
 watch(currentTab, () => { fetchStats() })
 
 onMounted(() => {
 	setupNavBar()
 	fetchStats()
+	fetchWeeklyStats()
+})
+
+onShow(() => {
+	fetchStats()
+	fetchWeeklyStats()
 })
 
 onShareAppMessage(() => {
@@ -558,6 +589,16 @@ onShareAppMessage(() => {
 	margin-bottom: 16rpx;
 }
 
+.card-link {
+	flex-shrink: 0;
+	padding: 8rpx 16rpx;
+	border-radius: 999rpx;
+	background: rgba(52, 200, 160, 0.08);
+	font-size: 22rpx;
+	font-weight: 600;
+	color: #1a8c62;
+}
+
 .card-title-row {
 	display: flex;
 	align-items: center;