From 0d482e3a1c9f0ff5f47049f8e0d49c775abfc46b Mon Sep 17 00:00:00 2001
From: nepiedg <806669289@qq.com>
Date: Mon, 26 Jan 2026 22:16:20 +0800
Subject: [PATCH] Update API endpoints and enhance UI components. Changed appid
 in manifest.json, modified profile and log update methods from PUT to POST in
 profile.js and smoke.js, respectively. Added new statistics retrieval
 function in smoke.js and improved the smoke record dialog with updated styles
 and validation logic. Updated configuration for development environment and
 refined documentation for health recovery and savings calculations.

---
 api/profile.js                                |   2 +-
 api/smoke.js                                  |   6 +-
 .../smoke-record-dialog.vue                   | 464 ++++++---
 config/index.js                               |   6 +-
 docs/ALGORITHM.md                             |  12 +-
 docs/PRD.md                                   |  17 +-
 docs/api.md                                   | 186 ++--
 manifest.json                                 |   2 +-
 pages/index/index.vue                         |  20 +-
 pages/logs/index.vue                          |   4 +-
 pages/stats/index.vue                         | 893 +++++++++++++-----
 11 files changed, 1103 insertions(+), 509 deletions(-)

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>
+
+
+