diff --git a/api/profile.js b/api/profile.js
index f6f0762..bd3e216 100644
--- a/api/profile.js
+++ b/api/profile.js
@@ -5,5 +5,5 @@ export function getProfile() {
 }
 
 export function updateProfile(data) {
-	return request.put('/smoke/profile', data)
+	return request.post('/smoke/profile', data)
 }
diff --git a/api/smoke.js b/api/smoke.js
index 6779bec..3affa81 100644
--- a/api/smoke.js
+++ b/api/smoke.js
@@ -25,7 +25,7 @@ export function createLog(data) {
 }
 
 export function updateLog(id, data) {
-	return request.put(`/smoke/logs/${id}`, data)
+	return request.post(`/smoke/logs/${id}`, data)
 }
 
 export function deleteLog(id) {
@@ -43,3 +43,7 @@ export function getAiAdvice(date) {
 export function unlockAiAdvice(data) {
 	return request.post('/smoke/ai/advice_unlocks', data)
 }
+
+export function getStats(params = {}) {
+	return request.get('/smoke/stats', params)
+}
diff --git a/components/smoke-record-dialog/smoke-record-dialog.vue b/components/smoke-record-dialog/smoke-record-dialog.vue
index 770cbc8..28e0025 100644
--- a/components/smoke-record-dialog/smoke-record-dialog.vue
+++ b/components/smoke-record-dialog/smoke-record-dialog.vue
@@ -1,62 +1,87 @@
 <template>
 	<view v-if="show" class="dialog-mask" @tap="handleMaskClick">
 		<view class="dialog-container" :class="{ 'dialog-show': showAnimation }" @tap.stop>
+			<view class="dialog-handle"></view>
 			<view class="dialog-header">
 				<text class="dialog-title">{{ title }}</text>
 				<view class="dialog-close" @tap="close">×</view>
 			</view>
 			
 			<view class="dialog-body">
-				<view class="form-item">
-					<text class="form-label">时间</text>
-					<view class="form-input-row">
-						<picker mode="date" :value="formData.smoke_time" @change="onDateChange">
-							<view class="picker-value">{{ formData.smoke_time }}</view>
-						</picker>
-						<picker mode="time" :value="formData.smoke_time_only" @change="onTimeChange">
-							<view class="picker-value">{{ formData.smoke_time_only }}</view>
-						</picker>
-					</view>
-				</view>
-				
-				<view class="form-item" v-if="type === 'smoke'">
-					<text class="form-label">数量</text>
-					<view class="form-number">
-						<view class="form-number-btn" @tap="decreaseNum">-</view>
-						<input class="form-number-input" type="number" v-model.number="formData.num" />
-						<view class="form-number-btn" @tap="increaseNum">+</view>
-					</view>
-				</view>
-				
-				<view class="form-item" v-if="type === 'smoke'">
-					<text class="form-label">烟瘾等级</text>
-					<view class="form-level">
-						<view 
-							v-for="level in 5" 
-							:key="level" 
-							class="level-item"
-							:class="{ 'level-active': formData.level === level }"
-							@tap="selectLevel(level)"
-						>
-							{{ level }}
+				<view class="form-row">
+					<picker class="picker-card" mode="date" :value="formData.smoke_time" @change="onDateChange">
+						<view class="input-card">
+							<text class="input-label">日期</text>
+							<view class="input-value-row">
+								<view class="input-icon input-icon-date"></view>
+								<text class="input-value">{{ formData.smoke_time || '选择日期' }}</text>
+							</view>
 						</view>
+					</picker>
+					<picker class="picker-card" mode="time" :value="formData.smoke_time_only" @change="onTimeChange">
+						<view class="input-card">
+							<text class="input-label">时间</text>
+							<view class="input-value-row">
+								<view class="input-icon input-icon-time"></view>
+								<text class="input-value">{{ formData.smoke_time_only || '选择时间' }}</text>
+							</view>
+						</view>
+					</picker>
+				</view>
+				
+				<view class="section-card" v-if="type === 'smoke'">
+					<view class="section-left">
+						<view class="section-icon"></view>
+						<text class="section-title">抽烟数量</text>
+					</view>
+					<view class="counter">
+						<view class="counter-btn" @tap="decreaseNum">-</view>
+						<text class="counter-value">{{ formData.num }}</text>
+						<view class="counter-btn" @tap="increaseNum">+</view>
 					</view>
 				</view>
 				
-				<view class="form-item">
-					<text class="form-label">备注</text>
-					<textarea 
-						class="form-textarea" 
-						v-model="formData.remark"
-						:placeholder="type === 'smoke' ? '记录抽烟原因...' : '记录抵抗心得...'"
-						maxlength="200"
+				<view class="section-card" v-if="type === 'smoke'">
+					<view class="level-header">
+						<text class="section-title">烟瘾程度</text>
+						<view class="level-badge">Level {{ formData.level }}</view>
+					</view>
+					<slider
+						class="level-slider"
+						:value="formData.level"
+						:min="1"
+						:max="5"
+						:step="1"
+						activeColor="#22C55E"
+						backgroundColor="#E5E7EB"
+						block-color="#22C55E"
+						:block-size="20"
+						@change="onLevelChange"
 					/>
+					<view class="level-scale">
+						<text class="level-scale-text">无感</text>
+						<text class="level-scale-text">强烈</text>
+					</view>
+				</view>
+				
+				<view class="remark-section">
+					<text class="section-title">备注（可选）</text>
+					<view class="remark-card">
+						<textarea 
+							class="form-textarea" 
+							v-model="formData.remark"
+							:placeholder="type === 'smoke' ? '记录此时的心情或诱因，如压力大、应酬...' : '记录抵抗心得或诱因...'"
+							maxlength="200"
+						/>
+					</view>
 				</view>
 			</view>
 			
 			<view class="dialog-footer">
-				<view class="dialog-btn dialog-btn-cancel" @tap="close">取消</view>
-				<view class="dialog-btn dialog-btn-confirm" @tap="submit">确定</view>
+				<view class="dialog-btn-primary" @tap="submit">
+					<view class="btn-icon"></view>
+					<text class="btn-text">保存记录</text>
+				</view>
 			</view>
 		</view>
 	</view>
@@ -94,7 +119,7 @@ export default {
 	},
 	computed: {
 		title() {
-			return this.type === 'smoke' ? '记录抽烟' : '想抽忍住了'
+			return '添加记录'
 		}
 	},
 	watch: {
@@ -118,8 +143,8 @@ export default {
 					smoke_time_only: this.initialData.smoke_time_only || '',
 					smoke_at: this.initialData.smoke_at || '',
 					remark: this.initialData.remark || '',
-					level: this.initialData.level || 2,
-					num: this.initialData.num || 1
+					level: this.initialData.level ?? 2,
+					num: this.initialData.num ?? 1
 				}
 			} else {
 				// 新建模式，使用当前时间
@@ -166,15 +191,43 @@ export default {
 		increaseNum() {
 			this.formData.num++
 		},
-		selectLevel(level) {
-			this.formData.level = level
+		onLevelChange(e) {
+			this.formData.level = e.detail.value
+		},
+		isTimeValid() {
+			const dateStr = this.formData.smoke_time
+			const timeStr = this.formData.smoke_time_only
+
+			if (!dateStr || !timeStr) {
+				uni.showToast({ title: '请选择日期和时间', icon: 'none' })
+				return false
+			}
+
+			const selected = new Date(`${dateStr}T${timeStr}:00`)
+			if (isNaN(selected.getTime())) {
+				uni.showToast({ title: '时间格式有误', icon: 'none' })
+				return false
+			}
+
+			const now = new Date()
+			const maxTime = new Date(now.getTime() + 5 * 60 * 1000)
+			if (selected > maxTime) {
+				uni.showToast({ title: '时间不能超过当前时间5分钟', icon: 'none' })
+				return false
+			}
+
+			return true
 		},
 		submit() {
+			if (!this.isTimeValid()) {
+				return
+			}
+
 			const submitData = {
 				smoke_time: this.formData.smoke_time,
 				smoke_at: this.formData.smoke_at,
 				remark: this.formData.remark,
-				level: this.type === 'smoke' ? this.formData.level : 2,
+				level: this.type === 'smoke' ? this.formData.level : 0,
 				num: this.type === 'smoke' ? this.formData.num : 0
 			}
 			
@@ -192,7 +245,7 @@ export default {
 	left: 0;
 	right: 0;
 	bottom: 0;
-	background-color: rgba(0, 0, 0, 0.5);
+	background-color: rgba(0, 0, 0, 0.35);
 	z-index: 9999;
 	display: flex;
 	align-items: flex-end;
@@ -200,179 +253,308 @@ export default {
 
 .dialog-container {
 	width: 100%;
-	max-height: 80vh;
+	max-height: 85vh;
 	background-color: #FFFFFF;
-	border-radius: 32rpx 32rpx 0 0;
+	border-radius: 36rpx 36rpx 0 0;
 	overflow: hidden;
 	transform: translateY(100%);
 	transition: transform 0.3s ease-out;
+	padding-bottom: 16rpx;
 }
 
 .dialog-show {
 	transform: translateY(0);
 }
 
+.dialog-handle {
+	width: 80rpx;
+	height: 8rpx;
+	background-color: #E5E7EB;
+	border-radius: 999rpx;
+	margin: 16rpx auto 0;
+}
+
 .dialog-header {
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
-	padding: 32rpx;
-	border-bottom: 2rpx solid #F3F4F6;
+	padding: 24rpx 32rpx 16rpx;
 }
 
 .dialog-title {
-	font-size: 32rpx;
-	font-weight: 600;
-	color: #1F2937;
+	font-size: 40rpx;
+	font-weight: 700;
+	color: #111827;
 }
 
 .dialog-close {
-	width: 48rpx;
-	height: 48rpx;
+	width: 56rpx;
+	height: 56rpx;
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	font-size: 48rpx;
+	font-size: 44rpx;
 	color: #9CA3AF;
 	line-height: 1;
+	background-color: #F3F4F6;
+	border-radius: 50%;
 }
 
 .dialog-body {
-	padding: 32rpx;
-	max-height: 60vh;
+	padding: 16rpx 32rpx 24rpx;
+	max-height: 62vh;
 	overflow-y: auto;
 }
 
-.form-item {
-	margin-bottom: 32rpx;
+.form-row {
+	display: flex;
+	gap: 20rpx;
+	margin-bottom: 24rpx;
 }
 
-.form-item:last-child {
-	margin-bottom: 0;
+.picker-card {
+	flex: 1;
 }
 
-.form-label {
-	display: block;
-	font-size: 28rpx;
-	color: #6B7280;
-	margin-bottom: 16rpx;
+.input-card {
+	background-color: #F9FAFB;
+	border-radius: 24rpx;
+	padding: 20rpx 24rpx;
+	border: 2rpx solid #F3F4F6;
+	min-height: 120rpx;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+}
+
+.input-label {
+	font-size: 22rpx;
+	color: #9CA3AF;
+	margin-bottom: 12rpx;
 	font-weight: 500;
 }
 
-.form-input-row {
-	display: flex;
-	gap: 16rpx;
-}
-
-.picker-value {
-	flex: 1;
-	height: 80rpx;
-	background-color: #F9FAFB;
-	border-radius: 16rpx;
-	padding: 0 24rpx;
+.input-value-row {
 	display: flex;
 	align-items: center;
-	font-size: 28rpx;
-	color: #1F2937;
-	border: 2rpx solid #E5E7EB;
+	gap: 12rpx;
 }
 
-.form-number {
+.input-icon {
+	width: 32rpx;
+	height: 32rpx;
+	border-radius: 8rpx;
+	background-color: #DCFCE7;
+	position: relative;
+}
+
+.input-icon-date::after {
+	content: '';
+	position: absolute;
+	left: 6rpx;
+	top: 8rpx;
+	width: 20rpx;
+	height: 16rpx;
+	border: 2rpx solid #22C55E;
+	border-top-width: 6rpx;
+	border-radius: 4rpx;
+}
+
+.input-icon-time::after {
+	content: '';
+	position: absolute;
+	left: 8rpx;
+	top: 8rpx;
+	width: 16rpx;
+	height: 16rpx;
+	border: 2rpx solid #22C55E;
+	border-radius: 50%;
+}
+
+.input-icon-time::before {
+	content: '';
+	position: absolute;
+	left: 16rpx;
+	top: 12rpx;
+	width: 2rpx;
+	height: 8rpx;
+	background-color: #22C55E;
+	transform-origin: bottom;
+}
+
+.input-value {
+	font-size: 30rpx;
+	font-weight: 600;
+	color: #111827;
+}
+
+.section-card {
+	background-color: #FFFFFF;
+	border-radius: 24rpx;
+	padding: 24rpx;
+	border: 2rpx solid #F3F4F6;
+	box-shadow: 0 4rpx 12rpx rgba(15, 23, 42, 0.04);
+	margin-bottom: 24rpx;
+}
+
+.section-left {
 	display: flex;
 	align-items: center;
 	gap: 16rpx;
 }
 
-.form-number-btn {
-	width: 80rpx;
-	height: 80rpx;
-	background-color: #F9FAFB;
+.section-icon {
+	width: 64rpx;
+	height: 64rpx;
+	background-color: #DCFCE7;
 	border-radius: 16rpx;
+	position: relative;
+}
+
+.section-icon::after {
+	content: '';
+	position: absolute;
+	left: 18rpx;
+	top: 18rpx;
+	width: 28rpx;
+	height: 28rpx;
+	border-radius: 6rpx;
+	border: 3rpx solid #22C55E;
+	border-top-color: transparent;
+}
+
+.section-title {
+	font-size: 30rpx;
+	font-weight: 600;
+	color: #111827;
+}
+
+.counter {
+	display: flex;
+	align-items: center;
+	gap: 20rpx;
+	background-color: #F8FAFC;
+	padding: 12rpx 16rpx;
+	border-radius: 999rpx;
+	border: 2rpx solid #F1F5F9;
+	margin-top: 16rpx;
+	justify-content: flex-end;
+}
+
+.counter-btn {
+	width: 56rpx;
+	height: 56rpx;
+	border-radius: 50%;
+	background-color: #E8FFF1;
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	font-size: 36rpx;
-	color: #10B981;
+	color: #22C55E;
 	font-weight: 600;
-	border: 2rpx solid #E5E7EB;
 }
 
-.form-number-input {
-	flex: 1;
-	height: 80rpx;
-	background-color: #F9FAFB;
-	border-radius: 16rpx;
-	padding: 0 24rpx;
+.counter-value {
+	min-width: 40rpx;
 	text-align: center;
 	font-size: 32rpx;
-	color: #1F2937;
-	border: 2rpx solid #E5E7EB;
+	font-weight: 700;
+	color: #111827;
 }
 
-.form-level {
-	display: flex;
-	gap: 16rpx;
-}
-
-.level-item {
-	flex: 1;
-	height: 80rpx;
-	background-color: #F9FAFB;
-	border-radius: 16rpx;
+.level-header {
 	display: flex;
 	align-items: center;
-	justify-content: center;
-	font-size: 28rpx;
-	color: #6B7280;
-	border: 2rpx solid #E5E7EB;
-	transition: all 0.3s;
+	justify-content: space-between;
+	margin-bottom: 16rpx;
 }
 
-.level-active {
-	background-color: #10B981;
-	color: #FFFFFF;
-	border-color: #10B981;
+.level-badge {
+	padding: 8rpx 18rpx;
+	border-radius: 999rpx;
+	background-color: #DCFCE7;
+	color: #22C55E;
+	font-size: 24rpx;
 	font-weight: 600;
 }
 
+.level-slider {
+	margin: 8rpx 0 4rpx;
+}
+
+.level-scale {
+	display: flex;
+	justify-content: space-between;
+	margin-top: 8rpx;
+}
+
+.level-scale-text {
+	font-size: 22rpx;
+	color: #9CA3AF;
+}
+
+.remark-section {
+	margin-bottom: 24rpx;
+}
+
+.remark-card {
+	margin-top: 16rpx;
+	background-color: #F9FAFB;
+	border-radius: 20rpx;
+	padding: 8rpx;
+	border: 2rpx solid #F3F4F6;
+}
+
 .form-textarea {
 	width: 100%;
-	min-height: 160rpx;
+	min-height: 180rpx;
 	background-color: #F9FAFB;
 	border-radius: 16rpx;
-	padding: 24rpx;
+	padding: 24rpx 20rpx;
 	font-size: 28rpx;
-	color: #1F2937;
-	border: 2rpx solid #E5E7EB;
+	color: #111827;
+	border: 2rpx solid transparent;
 	box-sizing: border-box;
 }
 
 .dialog-footer {
-	display: flex;
-	gap: 16rpx;
-	padding: 32rpx;
-	border-top: 2rpx solid #F3F4F6;
-	background-color: #FFFFFF;
+	padding: 16rpx 32rpx 32rpx;
 }
 
-.dialog-btn {
-	flex: 1;
-	height: 88rpx;
-	border-radius: 44rpx;
+.dialog-btn-primary {
+	height: 96rpx;
+	border-radius: 32rpx;
+	background-color: #22C55E;
 	display: flex;
 	align-items: center;
 	justify-content: center;
+	gap: 16rpx;
+	box-shadow: 0 10rpx 24rpx rgba(34, 197, 94, 0.3);
+}
+
+.btn-icon {
+	width: 44rpx;
+	height: 44rpx;
+	border-radius: 50%;
+	background-color: #0F172A;
+	position: relative;
+}
+
+.btn-icon::before {
+	content: '';
+	position: absolute;
+	left: 14rpx;
+	top: 18rpx;
+	width: 12rpx;
+	height: 6rpx;
+	border-left: 4rpx solid #FFFFFF;
+	border-bottom: 4rpx solid #FFFFFF;
+	transform: rotate(-45deg);
+}
+
+.btn-text {
 	font-size: 30rpx;
-	font-weight: 500;
-}
-
-.dialog-btn-cancel {
-	background-color: #F3F4F6;
-	color: #6B7280;
-}
-
-.dialog-btn-confirm {
-	background-color: #10B981;
-	color: #FFFFFF;
+	font-weight: 600;
+	color: #0F172A;
 }
 </style>
diff --git a/config/index.js b/config/index.js
index d8dbd5d..c625986 100644
--- a/config/index.js
+++ b/config/index.js
@@ -1,11 +1,11 @@
 const ENV = {
 	development: {
-		BASE_URL: 'http://192.168.214.3:8080/api/v1',
-		MINI_PROGRAM_ID: 1
+		BASE_URL: ' http://192.168.31.132:8080/api/v1',
+		MINI_PROGRAM_ID: 2
 	},
 	production: {
 		BASE_URL: 'https://api.example.com/api/v1',
-		MINI_PROGRAM_ID: 1
+		MINI_PROGRAM_ID: 2
 	}
 }
 
diff --git a/docs/ALGORITHM.md b/docs/ALGORITHM.md
index 30ea753..901500b 100644
--- a/docs/ALGORITHM.md
+++ b/docs/ALGORITHM.md
@@ -202,7 +202,9 @@ function calculateDailyTarget(baseline, stage, dayInStage) {
 
 ---
 
-## 5. 健康恢复计算
+## 5. 健康恢复计算（后端统一）
+
+接口：`GET /api/v1/smoke/stats?range=week|month|year`（详见 `docs/smoke/API.md`）
 
 基于医学研究的恢复时间线：
 
@@ -236,7 +238,9 @@ function calculateLungRecovery(smokeFreeMinutes) {
 
 ---
 
-## 6. 省钱计算
+## 6. 省钱计算（后端统一）
+
+接口：`GET /api/v1/smoke/stats?range=week|month|year`（详见 `docs/smoke/API.md`）
 
 ```javascript
 // utils/money.js
@@ -250,7 +254,9 @@ function calculateMoneySaved(packPriceCent, cigsPerPack, baselineCigsPerDay, act
 
 ---
 
-## 7. 激励语生成
+## 7. 激励语生成（后端统一）
+
+接口：`GET /api/v1/smoke/motivation`（详见 `docs/smoke/API.md`）
 
 根据用户状态生成不同的激励语：
 
diff --git a/docs/PRD.md b/docs/PRD.md
index 1a60d7a..8c77c53 100644
--- a/docs/PRD.md
+++ b/docs/PRD.md
@@ -32,6 +32,7 @@
 | 下次建议时间 | 显示建议的下次抽烟时间点 | `GET /next_smoke_time` |
 | 今日已抽 | X / 目标数，较昨日 ±N | `next_smoke_time.today_count` + `next_smoke_time.reduced_from_yesterday`（可为负） + `next_smoke_time.exceeded_yesterday`（标识“超出昨日”） |
 | 烟瘾发作已抵抗 | 忍住次数统计 | `next_smoke_time.resisted_count` |
+| 激励语 | 当天一句话鼓励 | `GET /motivation` |
 | 记录抽烟按钮 | 快速记录一次抽烟 | `POST /logs` |
 | 想抽忍住了按钮 | 记录成功抵抗 | `POST /logs/resisted` |
 
@@ -46,15 +47,15 @@
 
 | 功能 | 说明 | 数据来源 |
 |------|------|----------|
-| 周/月/年切换 | 切换统计时间范围 | `GET /dashboard?start=&end=` |
+| 周/月/年切换 | 切换统计时间范围 | `GET /stats?range=week|month|year` |
 | 每周洞察 | AI 分析本周表现 | `GET /ai/advice` |
-| 吸烟趋势图 | 柱状图展示每日吸烟量 | `dashboard.weekly` |
-| 趋势对比 | 较上周减少 X% | 本地计算 |
-| 日均吸烟量 | 统计周期内日均值 | 本地计算 |
-| 节省金额 | 基于减少量 × 单价计算 | profile + logs |
-| 肺部功能恢复 | 根据戒烟天数估算 | 固定公式 |
-| 连续记录天数 | 用户活跃天数 | logs 统计 |
-| 已拒绝次数 | 累计忍住次数 | `level=0,num=0` 统计 |
+| 吸烟趋势图 | 柱状图展示每日吸烟量 | `stats.trend` |
+| 趋势对比 | 较上周期变化 | `stats.change_percent` |
+| 日均吸烟量 | 统计周期内日均值 | `stats.daily_average` |
+| 节省金额 | 后端统一计算 | `stats.money` |
+| 肺部功能恢复 | 后端统一计算 | `stats.health` |
+| 连续记录天数 | 用户活跃天数 | `stats.streak_days` |
+| 已拒绝次数 | 累计忍住次数 | `stats.resisted_total` |
 
 ### 2.3 AI 助手页 (ai_quit_assistant)
 
diff --git a/docs/api.md b/docs/api.md
index 04ed0a3..2f7a561 100644
--- a/docs/api.md
+++ b/docs/api.md
@@ -434,158 +434,82 @@ AI 生成说明：
 - `reduced_from_yesterday`：较昨日减少的支数（允许为负数；为负时表示“今天超出昨日”）。
 - `exceeded_yesterday`：是否超出昨日（`true` 表示今天超出昨日，前端可用作单独标识）。
 
-## 14) 获取健康与储蓄统计（合并接口）
+## 14) 数据统计分析（趋势 + 健康 + 省钱）
 
-`GET /api/v1/smoke/health_savings?period=week&start=2026-01-01&end=2026-01-07`
-
-说明：
-- 合并了"肺部功能恢复"和"节省金额"两个指标，专用于统计页面展示。
-- 支持按周/月/年查询，通过 `period` 参数指定时间范围类型。
+`GET /api/v1/smoke/stats?range=week|month|year&date=2026-01-07`
 
 参数：
-- `period`（必填）：时间范围类型，可选值：
-  - `week`：周（默认本周一至本周日）
-  - `month`：月（默认本月1日至本月最后一日）
-  - `year`：年（默认本年1月1日至本年12月31日）
-- `start`（可选）：起始日期（格式 `YYYY-MM-DD`），不传则根据 `period` 自动计算
-- `end`（可选）：截止日期（格式 `YYYY-MM-DD`），不传则根据 `period` 自动计算
+- `range`：`week|month|year`，默认 `week`
+- `date`：锚点日期（`YYYY-MM-DD`），默认今天
 
-**计算逻辑**：
-
-1. **肺部功能恢复百分比**：
-   - 基于用户最后一次实际抽烟时间（忽略 `level=0 && num=0` 的忍住记录）
-   - 计算无烟时长（分钟）
-   - 根据医学研究恢复时间线计算恢复百分比（详见 `docs/ALGORITHM.md`）
-   - 公式：
-     ```
-     无烟天数 = (当前时间 - 最后抽烟时间) / (24 * 60) 分钟
-     
-     恢复百分比计算：
-     - < 14天: (天数 / 14) * 15%
-     - 14-30天: 15% + ((天数 - 14) / 16) * 15%
-     - 30-90天: 30% + ((天数 - 30) / 60) * 20%
-     - > 90天: 50% + ((天数 - 90) / 275) * 50%，最高 100%
-     ```
-
-2. **节省金额**：
-   - 基于用户在统计周期内的实际抽烟量与基线对比
-   - 计算公式：
-     ```
-     预期总支数 = baseline_cigs_per_day * 周期天数
-     实际总支数 = 周期内所有记录的 num 累加（排除 level=0 && num=0）
-     节省支数 = 预期总支数 - 实际总支数
-     节省包数 = 节省支数 / 20（假设每包20支）
-     节省金额（分）= 节省包数 * pack_price_cent
-     ```
-   - 若实际总支数 > 预期总支数，则节省金额为 0（不显示负数）
-
-3. **目标金额**：
-   - 默认目标：`baseline_cigs_per_day * 周期天数 / 20 * pack_price_cent`（即完全戒烟节省的金额）
-   - 或使用用户设定的目标金额（如有）
-
-成功响应示例：
+说明：
+- 用于“统计页”一屏数据整合（趋势、均值、环比、健康恢复、省钱、连续记录、已拒绝次数）。
+- `trend_unit`：`day` 或 `month`，用于前端图表横轴显示。
 
+成功响应（示例）：
 ```json
 {
   "code": 200,
   "message": "success",
   "data": {
-    "period": "week",
+    "range": "week",
     "start": "2026-01-01",
     "end": "2026-01-07",
-    "days": 7,
-    "health": {
-      "lung_recovery_percent": 40.5,
-      "smoke_free_minutes": 11520,
-      "smoke_free_days": 8,
-      "last_smoke_at": "2025-12-24T14:30:00+08:00",
-      "recovery_stage": "early",  // early(0-14天) / mid(14-30天) / late(30-90天) / advanced(>90天)
-      "next_milestone": {
-        "days_until": 6,
-        "milestone": "2周 - 肺功能提升15%",
-        "percent_at_milestone": 15
-      }
-    },
-    "savings": {
-      "saved_amount_cent": 14500,  // 已节省金额（分）
-      "saved_amount_yuan": 145.00, // 已节省金额（元，前端展示用）
-      "target_amount_cent": 20000, // 目标金额（分）
-      "target_amount_yuan": 200.00, // 目标金额（元）
-      "saved_cigs": 58,             // 节省支数
-      "expected_cigs": 140,          // 预期总支数
-      "actual_cigs": 82,             // 实际总支数
-      "progress_percent": 72.5,      // 完成进度百分比
-      "pack_price_cent": 2500,      // 单包价格（分）
-      "cigs_per_pack": 20            // 每包支数
-    },
-    "profile": {
-      "baseline_cigs_per_day": 20,
+    "trend_unit": "day",
+    "trend": [
+      { "label": "2026-01-01", "count": 2 },
+      { "label": "2026-01-02", "count": 1 },
+      { "label": "2026-01-03", "count": 0 },
+      { "label": "2026-01-04", "count": 0 },
+      { "label": "2026-01-05", "count": 3 },
+      { "label": "2026-01-06", "count": 0 },
+      { "label": "2026-01-07", "count": 0 }
+    ],
+    "daily_average": 4,
+    "change_percent": -20,
+    "money": {
+      "available": true,
       "pack_price_cent": 2500,
-      "smoking_years": 8
+      "cigs_per_pack": 20,
+      "expected_total": 140,
+      "actual_total": 92,
+      "saved_cent": 6000
     },
-    "calculated_at": "2026-01-08T10:00:00+08:00"
+    "health": {
+      "available": true,
+      "smoke_free_minutes": 420,
+      "lung_recovery_percent": 12,
+      "milestones": [
+        { "name": "心率血压恢复正常", "minutes": 20, "reached": true },
+        { "name": "血氧水平恢复", "minutes": 480, "reached": false }
+      ]
+    },
+    "streak_days": 12,
+    "resisted_total": 24
   }
 }
 ```
 
 字段说明：
+- `change_percent`：与上一个同周期对比的变化比例（可为负）。
+- `money.available=false`：表示缺少 `baseline_cigs_per_day` 或 `pack_price_cent`。
+- `health.available=false`：表示无历史记录。
 
-**health（健康数据）**：
-- `lung_recovery_percent`：肺部功能恢复百分比（0-100）
-- `smoke_free_minutes`：无烟时长（分钟）
-- `smoke_free_days`：无烟天数（保留1位小数）
-- `last_smoke_at`：最后一次实际抽烟时间（RFC3339格式）
-- `recovery_stage`：恢复阶段标识
-- `next_milestone`：下一个里程碑信息
+## 15) 激励语（后端统一生成）
 
-**savings（储蓄数据）**：
-- `saved_amount_cent`：已节省金额（分，用于计算）
-- `saved_amount_yuan`：已节省金额（元，用于前端展示）
-- `target_amount_cent`：目标金额（分）
-- `target_amount_yuan`：目标金额（元）
-- `saved_cigs`：节省的支数
-- `expected_cigs`：预期总支数（基线 × 天数）
-- `actual_cigs`：实际总支数
-- `progress_percent`：完成进度百分比（saved_amount / target_amount * 100）
-- `pack_price_cent`：单包价格（分）
-- `cigs_per_pack`：每包支数（默认20）
+`GET /api/v1/smoke/motivation`
 
-**period 参数说明**：
+说明：
+- 基于当日数据（如 `today_count`、`resisted_count`、`last_smoke_at`）与 `quit_motivations` 生成一句激励语。
 
-- `period=week`（周）：
-  - 默认：本周一 00:00:00 至 本周日 23:59:59
-  - 若传 `start`，则 `end = start + 6 天`
-
-- `period=month`（月）：
-  - 默认：本月1日 00:00:00 至 本月最后一日 23:59:59
-  - 若传 `start`，则 `end = start 所在月的最后一日`
-
-- `period=year`（年）：
-  - 默认：本年1月1日 00:00:00 至 本年12月31日 23:59:59
-  - 若传 `start`，则 `end = start 所在年的12月31日`
-
-curl 示例：
-
-```bash
-# 查询本周数据
-curl -X GET 'http://127.0.0.1:8080/api/v1/smoke/health_savings?period=week' \
-  -H 'Authorization: Bearer wx-session-key'
-
-# 查询本月数据
-curl -X GET 'http://127.0.0.1:8080/api/v1/smoke/health_savings?period=month' \
-  -H 'Authorization: Bearer wx-session-key'
-
-# 查询本年数据
-curl -X GET 'http://127.0.0.1:8080/api/v1/smoke/health_savings?period=year' \
-  -H 'Authorization: Bearer wx-session-key'
-
-# 查询指定日期范围
-curl -X GET 'http://127.0.0.1:8080/api/v1/smoke/health_savings?period=week&start=2026-01-01&end=2026-01-07' \
-  -H 'Authorization: Bearer wx-session-key'
+成功响应（示例）：
+```json
+{
+  "code": 200,
+  "message": "success",
+  "data": {
+    "message": "今天的表现很稳，继续保持！记住你的目标：身体健康。",
+    "type": "encourage"
+  }
+}
 ```
-
-**注意事项**：
-1. 若用户尚未补全 `profile`（缺少 `baseline_cigs_per_day` 或 `pack_price_cent`），相关计算字段可能为 0 或使用默认值
-2. 若用户从未抽烟（无历史记录），`last_smoke_at` 可能不存在，肺部恢复百分比按最大恢复计算
-3. 节省金额计算时，若实际支数 > 预期支数，`saved_amount_cent` 为 0（不显示负数）
-4. 时间范围计算时，使用用户所在时区（后端需根据用户配置或默认使用 UTC+8）
diff --git a/manifest.json b/manifest.json
index 7ed4448..60586bd 100644
--- a/manifest.json
+++ b/manifest.json
@@ -50,7 +50,7 @@
     "quickapp" : {},
     /* 小程序特有相关 */
     "mp-weixin" : {
-        "appid" : "wx83800d4b11dd4617",
+        "appid" : "wx74d28a21dcadd983",
         "setting" : {
             "urlCheck" : false
         },
diff --git a/pages/index/index.vue b/pages/index/index.vue
index 2a591ba..261dd2d 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -155,7 +155,8 @@ const changeText = computed(() => {
 })
 
 const timerDisplay = computed(() => {
-	const totalSeconds = (dashboardStore.minutesSinceLast || 165) * 60 + timerSeconds.value
+	const baseMinutes = dashboardStore.minutesSinceLast ?? 165
+	const totalSeconds = baseMinutes * 60 + timerSeconds.value
 	const hours = Math.floor(totalSeconds / 3600)
 	const minutes = Math.floor((totalSeconds % 3600) / 60)
 	const seconds = totalSeconds % 60
@@ -203,14 +204,25 @@ function openResistedDialog() {
 
 async function handleSubmit(submitData) {
 	try {
-		await api.createLog(submitData)
-		
 		if (dialogType.value === 'smoke') {
-			dashboardStore.incrementTodayCount()
+			await api.createLog(submitData)
 			dashboardStore.resetTimer()
 			timerSeconds.value = 0
 			uni.showToast({ title: '记录成功', icon: 'success' })
+			try {
+				await Promise.all([
+					dashboardStore.fetchDashboard(true),
+					dashboardStore.fetchNextSmokeTime()
+				])
+			} catch (e) {
+				console.error('refreshAfterSmokeLog error:', e)
+			}
 		} else {
+			await api.createResistedLog({
+				smoke_time: submitData.smoke_time,
+				smoke_at: submitData.smoke_at,
+				remark: submitData.remark
+			})
 			resistedCount.value++
 			uni.showToast({ title: '太棒了！', icon: 'success' })
 		}
diff --git a/pages/logs/index.vue b/pages/logs/index.vue
index d4b1363..3d15807 100644
--- a/pages/logs/index.vue
+++ b/pages/logs/index.vue
@@ -196,8 +196,8 @@ function handleEdit(log) {
 		smoke_time_only: log.displayTime,
 		smoke_at: log.smoke_at,
 		remark: log.remark || '',
-		level: log.level || 2,
-		num: log.num || 1
+		level: log.level ?? 2,
+		num: log.num ?? 1
 	}
 	showEditDialog.value = true
 }
diff --git a/pages/stats/index.vue b/pages/stats/index.vue
index e5aaac1..06a8c4b 100644
--- a/pages/stats/index.vue
+++ b/pages/stats/index.vue
@@ -1,11 +1,20 @@
-<template>
+<template>
 	<view class="page">
-		<view class="tabs">
+		<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
+		<view class="header">
+			<view class="back-btn" @tap="goBack">
+				<text class="back-icon">‹</text>
+			</view>
+			<text class="header-title">数据统计分析</text>
+			<view class="header-spacer"></view>
+		</view>
+
+		<view class="segment">
 			<view
 				v-for="tab in tabs"
 				:key="tab.value"
-				class="tab"
-				:class="{ 'tab-active': currentTab === tab.value }"
+				class="segment-item"
+				:class="{ 'segment-active': currentTab === tab.value }"
 				@tap="currentTab = tab.value"
 			>
 				{{ tab.label }}
@@ -16,28 +25,35 @@
 			<view class="insight-icon">✨</view>
 			<view class="insight-content">
 				<text class="insight-title">每周洞察</text>
-				<text class="insight-desc">你在周末的吸烟量明显减少。非常棒！试着在这周一保持这个良好的势头。</text>
+				<text class="insight-desc">{{ insightText }}</text>
 			</view>
 		</view>
 
 		<view class="section">
 			<view class="section-header">
-				<text class="section-title">吸烟趋势</text>
-				<text class="section-change">↓ 减少 20%</text>
+				<view>
+					<text class="section-title">吸烟趋势</text>
+					<text class="section-sub">{{ trendRangeText }}</text>
+				</view>
+				<view class="status-chip" :class="statusChipClass">
+					<view class="status-dot"></view>
+					<text class="status-text">{{ statusText }}</text>
+				</view>
 			</view>
 
-			<view class="chart-card">
-				<view class="chart-header">
-					<text class="chart-label">日均吸烟量</text>
-					<view class="chart-value-row">
-						<text class="chart-value">4</text>
-						<text class="chart-unit">支/天</text>
+			<view class="trend-card">
+				<view class="trend-header">
+					<text class="trend-label">日均吸烟量</text>
+					<view class="trend-value-row">
+						<text class="trend-value">{{ averageCount }}</text>
+						<text class="trend-unit">支/天</text>
 					</view>
 				</view>
-				<view class="chart-bars">
-					<view v-for="(item, index) in weeklyData" :key="index" class="chart-bar-wrapper">
-						<view class="chart-bar" :style="{ height: item.height }"></view>
-						<text class="chart-bar-label" :class="{ 'chart-bar-label-active': index === 3 }">{{ item.label }}</text>
+				<view class="trend-chart">
+					<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 class="trend-bar" :style="{ height: item.height }"></view>
+						<text class="trend-bar-label" :class="{ 'trend-bar-label-active': item.isHighlight }">{{ item.label }}</text>
 					</view>
 				</view>
 			</view>
@@ -46,48 +62,70 @@
 		<view class="section">
 			<text class="section-title">健康与储蓄</text>
 
-			<view class="health-row">
-				<view class="health-card">
-					<view class="health-ring">
-						<view class="health-ring-inner">
-							<text class="health-prefix">已省</text>
-							<text class="health-value">¥145</text>
-						</view>
-					</view>
-					<text class="health-label">节省金额</text>
-					<text class="health-sub">目标 ¥200</text>
+			<view class="savings-card">
+				<view class="savings-header">
+					<view class="savings-icon"></view>
+					<text class="savings-title">节省金额</text>
 				</view>
-
-				<view class="health-card">
-					<view class="health-ring health-ring-purple">
-						<view class="health-ring-inner">
-							<text class="health-value">40%</text>
+				<view class="savings-body">
+					<view class="savings-left">
+						<text class="savings-value">{{ savedMoneyText }}</text>
+						<view class="savings-bar">
+							<view class="savings-bar-fill" :style="{ width: moneyPercent + '%' }"></view>
+						</view>
+						<text class="savings-sub">目标 ¥{{ moneyTargetYuan }} ({{ moneyPercent }}%)</text>
+					</view>
+					<view class="savings-ring" :style="moneyRingStyle">
+						<view class="savings-ring-inner">
+							<text class="ring-value">{{ moneyPercent }}%</text>
+						</view>
+					</view>
+				</view>
+			</view>
+
+			<view class="health-card">
+				<view class="health-header">
+					<view class="health-title-row">
+						<view class="health-icon"></view>
+						<text class="health-title">健康恢复里程碑</text>
+					</view>
+					<view class="health-badge">{{ healthStatusText }}</view>
+				</view>
+				<view class="health-list">
+					<view v-for="(item, index) in healthItems" :key="index" class="health-item">
+						<view class="health-item-row">
+							<text class="health-item-name">{{ item.name }}</text>
+							<text class="health-item-percent" :class="{ 'health-item-percent-muted': item.percent < 100 }">{{ item.percent }}%</text>
+						</view>
+						<view class="health-bar">
+							<view
+								class="health-bar-fill"
+								:class="{ 'health-bar-fill-muted': item.percent < 100 }"
+								:style="{ width: item.percent + '%' }"
+							></view>
 						</view>
 					</view>
-					<text class="health-label">肺部功能恢复</text>
-					<text class="health-sub">当前进度</text>
 				</view>
 			</view>
 
 			<view class="stats-grid">
-				<view class="mini-stat">
-					<text class="mini-stat-icon">🔥</text>
-					<text class="mini-stat-label">连续记录</text>
-					<view class="mini-stat-value-row">
-						<text class="mini-stat-value">12</text>
-						<text class="mini-stat-unit">天</text>
+				<view class="mini-card">
+					<view class="mini-icon mini-icon-fire"></view>
+					<text class="mini-label">连续记录</text>
+					<view class="mini-value-row">
+						<text class="mini-value">{{ streakDays }}</text>
+						<text class="mini-unit">天</text>
 					</view>
-					<text class="mini-stat-sub">未吸烟</text>
+					<text class="mini-sub">保持未吸烟</text>
 				</view>
-
-				<view class="mini-stat">
-					<text class="mini-stat-icon">🚫</text>
-					<text class="mini-stat-label">已拒绝</text>
-					<view class="mini-stat-value-row">
-						<text class="mini-stat-value">24</text>
-						<text class="mini-stat-unit">次</text>
+				<view class="mini-card">
+					<view class="mini-icon mini-icon-block"></view>
+					<text class="mini-label">已拒绝</text>
+					<view class="mini-value-row">
+						<text class="mini-value">{{ resistedTotal }}</text>
+						<text class="mini-unit">次</text>
 					</view>
-					<text class="mini-stat-sub">对抗烟瘾</text>
+					<text class="mini-sub">成功抵抗烟瘾</text>
 				</view>
 			</view>
 		</view>
@@ -95,12 +133,12 @@
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue'
+import { ref, computed, onMounted, watch } from 'vue'
 import { useLogin } from '@/hooks/useLogin'
 import * as api from '@/api'
 
 const { waitForLogin } = useLogin()
-const loading = ref(true)
+const statusBarHeight = ref(0)
 
 const tabs = [
 	{ label: '周', value: 'week' },
@@ -109,307 +147,734 @@ const tabs = [
 ]
 
 const currentTab = ref('week')
+const statsData = ref(null)
 
-const weeklyData = ref([
-	{ label: '一', height: '60%', count: 3 },
-	{ label: '二', height: '40%', count: 2 },
-	{ label: '三', height: '80%', count: 4 },
-	{ label: '四', height: '100%', count: 5 },
-	{ label: '五', height: '60%', count: 3 },
-	{ label: '六', height: '20%', count: 1 },
-	{ label: '日', height: '40%', count: 2 }
-])
+const insightText = computed(() => {
+	const change = statsData.value?.change_percent
+	if (change === undefined || change === null) {
+		return '前5天保持完成记录！周日虽有小量吸烟，但整体趋势依然可控，下周继续保持。'
+	}
+	if (change <= 0) {
+		return '本阶段总体保持良好，趋势持续向好，继续保持节奏。'
+	}
+	return '近期吸烟量略有上升，试着减少高峰时段的冲动。'
+})
 
-async function initPage() {
-	loading.value = true
+const trendRangeText = computed(() => {
+	const start = statsData.value?.start
+	const end = statsData.value?.end
+	if (!start || !end) {
+		return ''
+	}
+	return formatRangeText(start, end)
+})
+
+const statusText = computed(() => {
+	const change = statsData.value?.change_percent
+	if (change === undefined || change === null) return '总体良好'
+	return change <= 0 ? '总体良好' : '有所增加'
+})
+
+const statusChipClass = computed(() => {
+	const change = statsData.value?.change_percent
+	if (change === undefined || change === null) return 'status-good'
+	return change <= 0 ? 'status-good' : 'status-warn'
+})
+
+const averageCount = computed(() => {
+	const avg = statsData.value?.daily_average
+	if (avg === undefined || avg === null) return 1
+	return avg
+})
+
+const trendItems = computed(() => {
+	const trend = statsData.value?.trend
+	const trendUnit = statsData.value?.trend_unit
+	if (!trend || trend.length === 0) {
+		return [
+			{ label: '19日', count: 0, height: '6%', isHighlight: false },
+			{ label: '20日', count: 0, height: '6%', isHighlight: false },
+			{ label: '21日', count: 0, height: '6%', isHighlight: false },
+			{ label: '22日', count: 0, height: '6%', isHighlight: false },
+			{ label: '23日', count: 0, height: '6%', isHighlight: false },
+			{ label: '24日', count: 0, height: '6%', isHighlight: false },
+			{ label: '25日', count: 6, height: '85%', isHighlight: true }
+		]
+	}
+	const maxCount = Math.max(...trend.map(item => item.count), 1)
+	return trend.map((item, index) => {
+		const height = `${Math.max((item.count / maxCount) * 100, 6)}%`
+		return {
+			label: formatTrendLabel(item.label, trendUnit),
+			count: item.count,
+			height,
+			isHighlight: index === trend.length - 1
+		}
+	})
+})
+
+const savedMoneyText = computed(() => {
+	const money = statsData.value?.money
+	if (!money || !money.available) {
+		return '¥0.00'
+	}
+	return `¥${(money.saved_cent / 100).toFixed(2)}`
+})
+
+const moneyTargetCent = computed(() => {
+	const money = statsData.value?.money
+	if (!money || !money.available) return 0
+	const { expected_total, pack_price_cent, cigs_per_pack } = money
+	if (!expected_total || !pack_price_cent || !cigs_per_pack) return 0
+	return Math.round((expected_total / cigs_per_pack) * pack_price_cent)
+})
+
+const moneyPercent = computed(() => {
+	const money = statsData.value?.money
+	const target = moneyTargetCent.value
+	if (!money || !money.available || target <= 0) {
+		return 0
+	}
+	const percent = Math.round((money.saved_cent / target) * 100)
+	return Math.min(Math.max(percent, 0), 100)
+})
+
+const moneyTargetYuan = computed(() => {
+	const target = moneyTargetCent.value
+	if (target <= 0) return '0'
+	return (target / 100).toFixed(0)
+})
+
+const moneyRingStyle = computed(() => {
+	const percent = moneyPercent.value
+	const angle = Math.round(percent * 3.6)
+	return {
+		background: `conic-gradient(#F59E0B 0deg ${angle}deg, #F1F5F9 ${angle}deg 360deg)`
+	}
+})
+
+const healthStatusText = computed(() => {
+	const health = statsData.value?.health
+	if (!health || !health.available) return '进行中'
+	return '进行中'
+})
+
+const healthItems = computed(() => {
+	const health = statsData.value?.health
+	if (!health || !health.available || !health.milestones || health.milestones.length === 0) {
+		return [
+			{ name: '心率血压恢复正常', percent: 100 },
+			{ name: '血氧水平恢复', percent: 100 },
+			{ name: '一氧化碳排出', percent: 95 },
+			{ name: '嗅觉味觉改善', percent: 40 },
+			{ name: '肺部功能恢复', percent: 10 }
+		]
+	}
+	const minutes = health.smoke_free_minutes || 0
+	return health.milestones.map(item => {
+		if (item.reached) {
+			return { name: item.name, percent: 100 }
+		}
+		const baseMinutes = item.minutes || 1
+		const percent = Math.min(Math.round((minutes / baseMinutes) * 100), 100)
+		return { name: item.name, percent }
+	})
+})
+
+const streakDays = computed(() => statsData.value?.streak_days ?? 12)
+const resistedTotal = computed(() => statsData.value?.resisted_total ?? 24)
+
+function formatTrendLabel(label, unit) {
+	if (!label) return ''
+	if (unit === 'month') {
+		const parts = label.split('-')
+		if (parts.length >= 2) {
+			return `${parseInt(parts[1], 10)}月`
+		}
+		return label
+	}
+	if (label.includes('-')) {
+		const parts = label.split('-')
+		const day = parts[2] || parts[1]
+		if (day) {
+			return `${parseInt(day, 10)}日`
+		}
+	}
+	return label
+}
+
+function formatRangeText(start, end) {
+	const startParts = start.split('-')
+	const endParts = end.split('-')
+	if (startParts.length < 3 || endParts.length < 3) return `${start} - ${end}`
+	const startMonth = parseInt(startParts[1], 10)
+	const startDay = parseInt(startParts[2], 10)
+	const endMonth = parseInt(endParts[1], 10)
+	const endDay = parseInt(endParts[2], 10)
+	if (startMonth === endMonth) {
+		return `${startMonth}月${startDay}日-${endDay}日`
+	}
+	return `${startMonth}月${startDay}日-${endMonth}月${endDay}日`
+}
+
+async function fetchStats() {
 	try {
 		await waitForLogin()
-		const res = await api.getDashboard()
-		if (res.data?.weekly) {
-			const maxCount = Math.max(...res.data.weekly.map(d => d.count), 1)
-			const weekLabels = ['一', '二', '三', '四', '五', '六', '日']
-			weeklyData.value = res.data.weekly.map((d, i) => ({
-				label: weekLabels[i] || '',
-				height: `${Math.max((d.count / maxCount) * 100, 5)}%`,
-				count: d.count
-			}))
-		}
+		const res = await api.getStats({ range: currentTab.value })
+		statsData.value = res.data
 	} catch (e) {
-		console.error('initPage error:', e)
-	} finally {
-		loading.value = false
+		console.error('fetchStats error:', e)
 	}
 }
 
+function goBack() {
+	uni.switchTab({ url: '/pages/index/index' })
+}
+
+watch(currentTab, () => {
+	fetchStats()
+})
+
 onMounted(() => {
-	initPage()
+	const sys = uni.getSystemInfoSync()
+	statusBarHeight.value = sys.statusBarHeight || 0
+	fetchStats()
 })
 </script>
 
 <style scoped>
 .page {
 	min-height: 100vh;
-	background-color: #0D1F17;
-	padding: 32rpx;
-	padding-bottom: 180rpx;
+	background-color: #F5F7FB;
+	padding: 0 28rpx 180rpx;
 	box-sizing: border-box;
 }
 
-.tabs {
-	display: flex;
-	background-color: #1A3325;
-	border-radius: 16rpx;
-	padding: 8rpx;
-	margin-bottom: 32rpx;
+.status-bar {
+	background-color: #F5F7FB;
+	height: 0;
 }
 
-.tab {
+.header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 16rpx 0 12rpx;
+}
+
+.back-btn {
+	width: 64rpx;
+	height: 64rpx;
+	border-radius: 20rpx;
+	background-color: #FFFFFF;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	box-shadow: 0 8rpx 20rpx rgba(15, 23, 42, 0.06);
+}
+
+.back-icon {
+	font-size: 36rpx;
+	color: #111827;
+	font-weight: 600;
+}
+
+.header-title {
+	font-size: 34rpx;
+	font-weight: 600;
+	color: #111827;
+}
+
+.header-spacer {
+	width: 64rpx;
+	height: 64rpx;
+}
+
+.segment {
+	display: flex;
+	background-color: #EEF2F7;
+	padding: 8rpx;
+	border-radius: 20rpx;
+	gap: 8rpx;
+	margin-bottom: 24rpx;
+}
+
+.segment-item {
 	flex: 1;
 	text-align: center;
-	padding: 20rpx;
-	border-radius: 12rpx;
-	font-size: 28rpx;
-	color: #9CA3AF;
+	padding: 16rpx 0;
+	font-size: 26rpx;
+	font-weight: 500;
+	color: #64748B;
+	border-radius: 16rpx;
 }
 
-.tab-active {
-	background-color: #4ADE80;
-	color: #0D1F17;
-	font-weight: 600;
+.segment-active {
+	background-color: #FFFFFF;
+	color: #111827;
+	box-shadow: 0 8rpx 16rpx rgba(15, 23, 42, 0.06);
 }
 
 .insight-card {
 	display: flex;
-	gap: 24rpx;
-	background-color: rgba(74, 222, 128, 0.1);
-	border: 2rpx solid rgba(74, 222, 128, 0.3);
+	gap: 20rpx;
+	align-items: flex-start;
+	background-color: #ECFDF3;
+	border: 2rpx solid #D4F6E2;
 	border-radius: 24rpx;
-	padding: 32rpx;
-	margin-bottom: 32rpx;
+	padding: 24rpx;
+	margin-bottom: 28rpx;
 }
 
 .insight-icon {
-	font-size: 36rpx;
-	background-color: #4ADE80;
 	width: 64rpx;
 	height: 64rpx;
 	border-radius: 50%;
+	background-color: #D9FBE7;
 	display: flex;
 	align-items: center;
 	justify-content: center;
+	font-size: 30rpx;
 }
 
-.insight-content { flex: 1; }
-
 .insight-title {
+	font-size: 26rpx;
 	font-weight: 600;
-	color: #4ADE80;
+	color: #0F172A;
 	display: block;
 	margin-bottom: 8rpx;
 }
 
 .insight-desc {
-	font-size: 26rpx;
-	color: #9CA3AF;
-	line-height: 1.5;
+	font-size: 24rpx;
+	color: #475569;
+	line-height: 1.6;
 }
 
-.section { margin-bottom: 32rpx; }
+.section {
+	margin-bottom: 32rpx;
+}
 
 .section-header {
 	display: flex;
-	justify-content: space-between;
 	align-items: center;
+	justify-content: space-between;
 	margin-bottom: 16rpx;
 }
 
 .section-title {
-	font-size: 32rpx;
+	font-size: 30rpx;
 	font-weight: 600;
-	color: #FFFFFF;
+	color: #111827;
 }
 
-.section-change {
-	font-size: 26rpx;
-	color: #4ADE80;
-}
-
-.chart-card {
-	background-color: #1A3325;
-	border-radius: 24rpx;
-	padding: 32rpx;
-}
-
-.chart-header { margin-bottom: 32rpx; }
-
-.chart-label {
-	font-size: 24rpx;
-	color: #9CA3AF;
+.section-sub {
+	font-size: 22rpx;
+	color: #94A3B8;
+	margin-top: 6rpx;
 	display: block;
 }
 
-.chart-value-row {
+.status-chip {
+	display: flex;
+	align-items: center;
+	gap: 8rpx;
+	padding: 8rpx 16rpx;
+	border-radius: 999rpx;
+	font-size: 22rpx;
+	font-weight: 600;
+}
+
+.status-good {
+	background-color: #E8FFF1;
+	color: #16A34A;
+}
+
+.status-warn {
+	background-color: #FEF3C7;
+	color: #D97706;
+}
+
+.status-dot {
+	width: 10rpx;
+	height: 10rpx;
+	border-radius: 50%;
+	background-color: currentColor;
+}
+
+.status-text {
+	font-size: 22rpx;
+}
+
+.trend-card {
+	background-color: #FFFFFF;
+	border-radius: 28rpx;
+	padding: 24rpx;
+	box-shadow: 0 12rpx 24rpx rgba(15, 23, 42, 0.06);
+}
+
+.trend-header {
+	margin-bottom: 24rpx;
+}
+
+.trend-label {
+	font-size: 24rpx;
+	color: #94A3B8;
+	display: block;
+	margin-bottom: 10rpx;
+}
+
+.trend-value-row {
 	display: flex;
 	align-items: baseline;
 	gap: 8rpx;
 }
 
-.chart-value {
+.trend-value {
 	font-size: 56rpx;
 	font-weight: 700;
-	color: #FFFFFF;
+	color: #111827;
 }
 
-.chart-unit {
+.trend-unit {
 	font-size: 24rpx;
-	color: #9CA3AF;
+	color: #94A3B8;
 }
 
-.chart-bars {
+.trend-chart {
 	display: flex;
-	justify-content: space-between;
 	align-items: flex-end;
-	height: 240rpx;
-	padding-top: 24rpx;
+	justify-content: space-between;
+	height: 260rpx;
+	gap: 12rpx;
 }
 
-.chart-bar-wrapper {
+.trend-bar-item {
+	flex: 1;
 	display: flex;
 	flex-direction: column;
 	align-items: center;
-	flex: 1;
+	justify-content: flex-end;
+	position: relative;
 }
 
-.chart-bar {
+.trend-bar {
 	width: 36rpx;
-	background: linear-gradient(to top, #4ADE80, rgba(74, 222, 128, 0.4));
-	border-radius: 8rpx 8rpx 0 0;
-	min-height: 8rpx;
+	background: linear-gradient(180deg, #2DD36F 0%, #1A9F54 100%);
+	border-radius: 12rpx 12rpx 8rpx 8rpx;
 }
 
-.chart-bar-label {
-	font-size: 24rpx;
-	color: #9CA3AF;
+.trend-bubble {
+	position: absolute;
+	top: 0;
+	transform: translateY(-12rpx);
+	background-color: #0F172A;
+	color: #FFFFFF;
+	font-size: 20rpx;
+	padding: 4rpx 10rpx;
+	border-radius: 12rpx;
+}
+
+.trend-bar-label {
 	margin-top: 12rpx;
+	font-size: 22rpx;
+	color: #94A3B8;
 }
 
-.chart-bar-label-active {
-	color: #0D1F17;
-	background-color: #4ADE80;
-	padding: 4rpx 12rpx;
-	border-radius: 8rpx;
+.trend-bar-label-active {
+	color: #16A34A;
+	font-weight: 600;
 }
 
-.health-row {
-	display: flex;
-	gap: 24rpx;
-	margin-bottom: 24rpx;
+.savings-card {
+	background-color: #FFFFFF;
+	border-radius: 28rpx;
+	padding: 24rpx;
+	margin-top: 20rpx;
+	box-shadow: 0 12rpx 24rpx rgba(15, 23, 42, 0.05);
 }
 
-.health-card {
-	flex: 1;
-	background-color: #1A3325;
-	border-radius: 24rpx;
-	padding: 32rpx;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-}
-
-.health-ring {
-	width: 160rpx;
-	height: 160rpx;
-	border-radius: 50%;
-	background: conic-gradient(#4ADE80 0deg 252deg, rgba(74, 222, 128, 0.2) 252deg 360deg);
+.savings-header {
 	display: flex;
 	align-items: center;
-	justify-content: center;
+	gap: 12rpx;
 	margin-bottom: 16rpx;
 }
 
-.health-ring-purple {
-	background: conic-gradient(#A78BFA 0deg 144deg, rgba(167, 139, 250, 0.2) 144deg 360deg);
+.savings-icon {
+	width: 32rpx;
+	height: 32rpx;
+	border-radius: 8rpx;
+	background-color: #FDE68A;
+	position: relative;
 }
 
-.health-ring-inner {
+.savings-icon::after {
+	content: '';
+	position: absolute;
+	left: 8rpx;
+	top: 8rpx;
+	width: 16rpx;
+	height: 12rpx;
+	border-radius: 4rpx;
+	border: 3rpx solid #F59E0B;
+	border-top-width: 6rpx;
+}
+
+.savings-title {
+	font-size: 26rpx;
+	font-weight: 600;
+	color: #111827;
+}
+
+.savings-body {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 20rpx;
+}
+
+.savings-left {
+	flex: 1;
+}
+
+.savings-value {
+	font-size: 44rpx;
+	font-weight: 700;
+	color: #111827;
+	margin-bottom: 16rpx;
+	display: block;
+}
+
+.savings-bar {
+	height: 10rpx;
+	background-color: #F1F5F9;
+	border-radius: 999rpx;
+	overflow: hidden;
+}
+
+.savings-bar-fill {
+	height: 100%;
+	background-color: #F59E0B;
+	border-radius: 999rpx;
+}
+
+.savings-sub {
+	font-size: 22rpx;
+	color: #94A3B8;
+	margin-top: 10rpx;
+	display: block;
+}
+
+.savings-ring {
 	width: 120rpx;
 	height: 120rpx;
 	border-radius: 50%;
-	background-color: #1A3325;
 	display: flex;
-	flex-direction: column;
 	align-items: center;
 	justify-content: center;
 }
 
-.health-prefix {
-	font-size: 20rpx;
-	color: #9CA3AF;
+.savings-ring-inner {
+	width: 88rpx;
+	height: 88rpx;
+	border-radius: 50%;
+	background-color: #FFFFFF;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	box-shadow: 0 6rpx 16rpx rgba(15, 23, 42, 0.06);
 }
 
-.health-value {
-	font-size: 28rpx;
-	font-weight: 700;
-	color: #FFFFFF;
-}
-
-.health-label {
-	font-size: 26rpx;
-	color: #FFFFFF;
-	margin-bottom: 4rpx;
-}
-
-.health-sub {
+.ring-value {
 	font-size: 22rpx;
-	color: #9CA3AF;
+	font-weight: 700;
+	color: #111827;
+}
+
+.health-card {
+	background-color: #FFFFFF;
+	border-radius: 28rpx;
+	padding: 24rpx;
+	margin-top: 24rpx;
+	box-shadow: 0 12rpx 24rpx rgba(15, 23, 42, 0.05);
+}
+
+.health-header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	margin-bottom: 20rpx;
+}
+
+.health-title-row {
+	display: flex;
+	align-items: center;
+	gap: 12rpx;
+}
+
+.health-icon {
+	width: 28rpx;
+	height: 28rpx;
+	background-color: #DCFCE7;
+	border-radius: 8rpx;
+	position: relative;
+}
+
+.health-icon::after {
+	content: '';
+	position: absolute;
+	left: 12rpx;
+	top: 6rpx;
+	width: 4rpx;
+	height: 16rpx;
+	background-color: #16A34A;
+}
+
+.health-title {
+	font-size: 26rpx;
+	font-weight: 600;
+	color: #111827;
+}
+
+.health-badge {
+	font-size: 20rpx;
+	padding: 6rpx 14rpx;
+	border-radius: 999rpx;
+	background-color: #E8FFF1;
+	color: #16A34A;
+	font-weight: 600;
+}
+
+.health-list {
+	display: flex;
+	flex-direction: column;
+	gap: 16rpx;
+}
+
+.health-item-row {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin-bottom: 8rpx;
+}
+
+.health-item-name {
+	font-size: 24rpx;
+	color: #111827;
+	font-weight: 500;
+}
+
+.health-item-percent {
+	font-size: 22rpx;
+	color: #16A34A;
+	font-weight: 600;
+}
+
+.health-item-percent-muted {
+	color: #94A3B8;
+}
+
+.health-bar {
+	height: 10rpx;
+	background-color: #F1F5F9;
+	border-radius: 999rpx;
+	overflow: hidden;
+}
+
+.health-bar-fill {
+	height: 100%;
+	background-color: #16A34A;
+	border-radius: 999rpx;
+}
+
+.health-bar-fill-muted {
+	background-color: #CBD5F5;
 }
 
 .stats-grid {
 	display: flex;
-	gap: 24rpx;
+	gap: 20rpx;
+	margin-top: 24rpx;
 }
 
-.mini-stat {
+.mini-card {
 	flex: 1;
-	background-color: #1A3325;
+	background-color: #FFFFFF;
 	border-radius: 24rpx;
 	padding: 24rpx;
+	box-shadow: 0 12rpx 24rpx rgba(15, 23, 42, 0.04);
 }
 
-.mini-stat-icon {
-	font-size: 36rpx;
-	display: block;
+.mini-icon {
+	width: 40rpx;
+	height: 40rpx;
+	border-radius: 12rpx;
 	margin-bottom: 12rpx;
+	position: relative;
 }
 
-.mini-stat-label {
-	font-size: 24rpx;
-	color: #9CA3AF;
+.mini-icon-fire {
+	background-color: #FEE2E2;
+}
+
+.mini-icon-fire::after {
+	content: '';
+	position: absolute;
+	left: 12rpx;
+	top: 8rpx;
+	width: 16rpx;
+	height: 20rpx;
+	border-radius: 50% 50% 50% 50%;
+	background-color: #F97316;
+}
+
+.mini-icon-block {
+	background-color: #E0E7FF;
+}
+
+.mini-icon-block::after {
+	content: '';
+	position: absolute;
+	left: 12rpx;
+	top: 12rpx;
+	width: 16rpx;
+	height: 16rpx;
+	border-radius: 50%;
+	border: 3rpx solid #6366F1;
+}
+
+.mini-label {
+	font-size: 22rpx;
+	color: #64748B;
+	margin-bottom: 10rpx;
 	display: block;
-	margin-bottom: 8rpx;
 }
 
-.mini-stat-value-row {
+.mini-value-row {
 	display: flex;
 	align-items: baseline;
 	gap: 8rpx;
 }
 
-.mini-stat-value {
-	font-size: 48rpx;
+.mini-value {
+	font-size: 40rpx;
 	font-weight: 700;
-	color: #FFFFFF;
+	color: #111827;
 }
 
-.mini-stat-unit {
-	font-size: 24rpx;
-	color: #9CA3AF;
-}
-
-.mini-stat-sub {
+.mini-unit {
 	font-size: 22rpx;
-	color: #6B7280;
+	color: #94A3B8;
+}
+
+.mini-sub {
+	font-size: 22rpx;
+	color: #94A3B8;
+	margin-top: 6rpx;
 	display: block;
-	margin-top: 4rpx;
 }
 </style>
+
+
+