feat: 梦想清单页与戒烟相关 API

- 梦想清单：系统导航栏、浮动添加、图标来自后台预设 - dream-presets API、pages.json 导航样式 Made-with: Cursor
feat: enhance user profile and achievement features
2026-04-04 14:55:58 +08:00 · 2026-04-04 14:22:22 +08:00 · 2026-04-02 01:13:33 +08:00 · 2026-04-02 00:39:56 +08:00
14 changed files with 1722 additions and 506 deletions
@@ -62,3 +62,59 @@ export function logout() {
 	storage.remove(SESSION_KEY)
 	storage.remove(USER_KEY)
 }
+
+export async function updateProfile(data) {
+	const res = await request.put('/auth/profile', data)
+	const user = storage.get(USER_KEY)
+	if (user && res.data) {
+		if (res.data.nickname) user.nickname = res.data.nickname
+		if (res.data.avatar_url) user.avatar_url = res.data.avatar_url
+		storage.set(USER_KEY, user)
+	}
+	return res
+}
+
+export function getUploadToken(filename) {
+	return request.post('/common/upload/oss/token', { filename })
+}
+
+export async function uploadFile(filePath) {
+	const ext = filePath.split('.').pop() || 'jpg'
+	const tokenRes = await getUploadToken(`avatar.${ext}`)
+	const data = tokenRes.data
+
+	let uploadUrl = (data.upload_url || '').replace(/\/$/, '')
+	if (!uploadUrl || uploadUrl.indexOf('aliyuncs.com') === -1) {
+		uploadUrl = (data.cdn_domain || '').replace(/\/$/, '')
+		if (uploadUrl && uploadUrl.indexOf('http') !== 0) {
+			uploadUrl = 'https://' + uploadUrl
+		}
+	}
+
+	return new Promise((resolve, reject) => {
+		uni.uploadFile({
+			url: uploadUrl,
+			filePath,
+			name: 'file',
+			formData: {
+				key: data.key,
+				OSSAccessKeyId: data.oss_access_key_id,
+				policy: data.oss_policy,
+				Signature: data.oss_signature
+			},
+			success: (res) => {
+				const code = res.statusCode || 0
+				if (code === 200 || code === 204 || (code >= 200 && code < 300)) {
+					const cdnDomain = (data.cdn_domain || '').replace(/\/$/, '')
+					const fileUrl = cdnDomain.startsWith('http')
+						? `${cdnDomain}/${data.key}`
+						: `https://${cdnDomain}/${data.key}`
+					resolve({ url: fileUrl, key: data.key })
+				} else {
+					reject(new Error('上传失败: ' + (res.data || code)))
+				}
+			},
+			fail: (err) => reject(new Error(err.errMsg || '上传失败'))
+		})
+	})
+}
@@ -13,12 +13,12 @@ function isInvalidToken(res) {
 export const request = {
 	async request(options) {
 		const sessionKey = storage.get(SESSION_KEY)
-		// 测试 
 		const isRetryAfter401 = options._retryAfter401 === true
+		const baseUrl = options.baseUrl || BASE_URL

 		return new Promise((resolve, reject) => {
 			uni.request({
-				url: BASE_URL + options.url,
+				url: baseUrl + options.url,
 				method: options.method || 'GET',
 				data: options.data,
 				header: {
@@ -1,4 +1,7 @@
 import { request } from './request'
+import { BASE_URL } from '@/config'
+
+const BASE_URL_V2 = BASE_URL.replace('/v1', '/v2')

 export function getDashboard(params = {}) {
 	return request.get('/smoke/dashboard', params)
@@ -88,3 +91,44 @@ export function getQuitPlanDays(planId) {
 export function resetQuitPlan() {
 	return request.post('/smoke/quit-plan/reset')
 }
+
+// 成就系统 API
+export function getAchievementThemes() {
+	return request.get('/smoke/achievement/themes')
+}
+
+export function getAchievement() {
+	return request.get('/smoke/achievement')
+}
+
+// V2 戒烟打卡 API
+export function getQuitCheckinHome() {
+	return request.request({ url: '/checkin/home', method: 'GET', baseUrl: BASE_URL_V2 })
+}
+
+export function quitCheckin(data = {}) {
+	return request.request({ url: '/checkin/check', method: 'POST', data, baseUrl: BASE_URL_V2 })
+}
+
+export function upsertQuitCheckinProfile(data) {
+	return request.request({ url: '/profile', method: 'POST', data, baseUrl: BASE_URL_V2 })
+}
+
+// 预设梦想目标
+export function listDreamPresets() {
+	return request.request({ url: '/dream-presets', method: 'GET', baseUrl: BASE_URL_V2 })
+}
+
+// 梦想目标 API
+export function listRewardGoals(status = 'all') {
+	return request.request({ url: '/reward-goals', method: 'GET', data: { status }, baseUrl: BASE_URL_V2 })
+}
+
+export function createRewardGoal(data) {
+	return request.request({ url: '/reward-goals', method: 'POST', data, baseUrl: BASE_URL_V2 })
+}
+
+export function updateRewardGoal(id, data) {
+	return request.request({ url: `/reward-goals/${id}`, method: 'PUT', data, baseUrl: BASE_URL_V2 })
+}
+
@@ -4,7 +4,8 @@ const ENV = {
 		MINI_PROGRAM_ID: 2
 	},
 	production: {
-		BASE_URL: 'https://wx.nepiedg.top/api/v1',
+		// BASE_URL: 'https://wx.nepiedg.top/api/v1',
+		BASE_URL: 'http://192.168.31.73:8080/api/v1',
 		MINI_PROGRAM_ID: 2
 	}
 }
@@ -71,6 +71,13 @@
 			"style": {
 				"navigationStyle": "custom"
 			}
+		},
+		{
+			"path": "pages/dream-goals/index",
+			"style": {
+				"navigationStyle": "default",
+				"navigationBarTitleText": "梦想清单"
+			}
 		}
 	],
 	"globalStyle": {
@@ -0,0 +1,626 @@
+<template>
+	<view class="page">
+		<view class="saved-banner">
+			<view class="saved-banner-inner">
+				<text class="saved-label">戒烟已省下</text>
+				<view class="saved-amount-row">
+					<text class="saved-unit">¥</text>
+					<text class="saved-amount">{{ savedMoneyYuan }}</text>
+				</view>
+				<text class="saved-hint">每天省下的钱，离梦想更近一步</text>
+			</view>
+		</view>
+
+		<view class="tab-bar">
+			<text class="tab-item" :class="{ 'tab-active': currentTab === 'active' }" @tap="currentTab = 'active'">进行中</text>
+			<text class="tab-item" :class="{ 'tab-active': currentTab === 'completed' }" @tap="currentTab = 'completed'">已实现</text>
+		</view>
+
+		<view v-if="loading" class="loading-wrap">
+			<view class="sk-card-placeholder"></view>
+			<view class="sk-card-placeholder"></view>
+		</view>
+
+		<view v-else-if="filteredGoals.length === 0" class="empty-state">
+			<text class="empty-icon">🎯</text>
+			<text class="empty-text">{{ currentTab === 'active' ? '还没有梦想目标' : '还没有已实现的目标' }}</text>
+			<text v-if="currentTab === 'active'" class="empty-action" @tap="openCreate">添加一个</text>
+		</view>
+
+		<view v-else class="goal-list">
+			<view v-for="goal in filteredGoals" :key="goal.id" class="goal-card">
+				<view class="goal-cover">
+					<image v-if="goal.cover_image && !goal.cover_image.startsWith('icon:')" :src="goal.cover_image" mode="aspectFill" class="goal-cover-img" />
+					<text v-else-if="goal.cover_image && goal.cover_image.startsWith('icon:')" class="goal-cover-emoji">{{ goal.cover_image.replace('icon:', '') }}</text>
+					<text v-else class="goal-cover-emoji">🎁</text>
+				</view>
+				<view class="goal-info">
+					<text class="goal-title">{{ goal.title }}</text>
+					<text class="goal-price">¥{{ (goal.target_amount_cent / 100).toFixed(0) }}</text>
+					<view v-if="goal.status === 'active'" class="goal-progress-area">
+						<view class="goal-bar">
+							<view class="goal-fill" :style="{ width: goal.progress_percent + '%' }"></view>
+						</view>
+						<text class="goal-eta">{{ getEtaText(goal) }}</text>
+					</view>
+					<view v-else class="goal-done-badge">
+						<text class="goal-done-text">✓ 已实现</text>
+					</view>
+				</view>
+				<view v-if="goal.status === 'active'" class="goal-actions">
+					<text class="goal-action-btn goal-action-complete" @tap="markCompleted(goal)">已买到</text>
+				</view>
+			</view>
+		</view>
+
+		<!-- 浮动添加按钮 -->
+		<view class="fab" @tap="openCreate">
+			<text class="fab-icon">+</text>
+		</view>
+
+		<!-- 创建弹窗 -->
+		<view v-if="showForm" class="modal-mask" @tap="closeForm">
+			<view class="modal-body" @tap.stop>
+				<text class="modal-title">添加梦想目标</text>
+
+				<view class="form-group">
+					<text class="form-label">我想买</text>
+					<input class="form-input" v-model="form.title" placeholder="例如：AirPods Pro" maxlength="30" />
+				</view>
+
+				<view class="form-group">
+					<text class="form-label">价格（元）</text>
+					<input class="form-input" v-model="form.priceYuan" type="digit" placeholder="输入价格" />
+				</view>
+
+				<view class="form-group">
+					<text class="form-label">选择图标</text>
+					<view v-if="iconsLoading" class="icons-loading">
+						<text class="icons-loading-text">加载中...</text>
+					</view>
+					<view v-else-if="iconList.length === 0" class="icons-empty">
+						<text class="icons-empty-text">暂无图标</text>
+					</view>
+					<view v-else class="icon-grid">
+						<view
+							v-for="icon in iconList"
+							:key="icon.id"
+							class="icon-item"
+							:class="{ 'icon-item-active': form.coverImage === icon.cover_image }"
+							@tap.stop="form.coverImage = icon.cover_image"
+						>
+							<image v-if="icon.cover_image && !icon.cover_image.startsWith('icon:')" :src="icon.cover_image" mode="aspectFill" class="icon-img" />
+							<text v-else class="icon-emoji">{{ (icon.cover_image || '').replace('icon:', '') || '🎁' }}</text>
+						</view>
+					</view>
+				</view>
+
+				<view class="modal-actions">
+					<text class="modal-btn modal-btn-cancel" @tap.stop="closeForm">取消</text>
+					<text class="modal-btn modal-btn-confirm" @tap.stop="submitGoal">确定</text>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import * as api from '@/api'
+
+const loading = ref(true)
+const goals = ref([])
+const currentTab = ref('active')
+const showForm = ref(false)
+const savedMoneyCent = ref(0)
+const dailySaveCent = ref(0)
+const iconList = ref([])
+const iconsLoading = ref(false)
+
+const form = ref({ title: '', priceYuan: '', coverImage: '' })
+
+const savedMoneyYuan = computed(() => Math.round(savedMoneyCent.value / 100))
+
+const filteredGoals = computed(() => {
+	return goals.value.filter(g => {
+		if (currentTab.value === 'active') return g.status === 'active'
+		return g.status === 'completed'
+	})
+})
+
+function getEtaText(goal) {
+	if (goal.progress_percent >= 100) return '已攒够！'
+	if (dailySaveCent.value <= 0) return '坚持打卡积攒'
+	const remaining = goal.target_amount_cent - (goal.current_amount_cent || 0)
+	const daysNeeded = Math.ceil(remaining / dailySaveCent.value)
+	if (daysNeeded <= 0) return '已攒够！'
+	if (daysNeeded > 365) return `约 ${Math.round(daysNeeded / 30)} 个月`
+	return `约 ${daysNeeded} 天可达成`
+}
+
+async function openCreate() {
+	form.value = { title: '', priceYuan: '', coverImage: '' }
+	showForm.value = true
+	if (iconList.value.length === 0) {
+		iconsLoading.value = true
+		try {
+			const res = await api.listDreamPresets()
+			iconList.value = res.data?.items || []
+		} catch (e) {
+			console.error('fetch icons error:', e)
+		} finally {
+			iconsLoading.value = false
+		}
+	}
+}
+
+function closeForm() {
+	showForm.value = false
+}
+
+async function submitGoal() {
+	const title = form.value.title.trim()
+	if (!title) {
+		uni.showToast({ title: '请输入名称', icon: 'none' })
+		return
+	}
+	const price = parseFloat(form.value.priceYuan)
+	if (!price || price <= 0) {
+		uni.showToast({ title: '请输入有效价格', icon: 'none' })
+		return
+	}
+	try {
+		await api.createRewardGoal({
+			title,
+			target_amount_cent: Math.round(price * 100),
+			cover_image: form.value.coverImage || ''
+		})
+		showForm.value = false
+		uni.showToast({ title: '添加成功', icon: 'success' })
+		await fetchGoals()
+	} catch (e) {
+		console.error('create goal error:', e)
+		uni.showToast({ title: '添加失败', icon: 'none' })
+	}
+}
+
+async function markCompleted(goal) {
+	uni.showModal({
+		title: '确认已买到？',
+		content: `确定已经购买了「${goal.title}」吗？`,
+		success: async (res) => {
+			if (!res.confirm) return
+			try {
+				await api.updateRewardGoal(goal.id, { status: 'completed' })
+				uni.showToast({ title: '恭喜实现梦想！', icon: 'success' })
+				await fetchGoals()
+			} catch (e) {
+				console.error('mark completed error:', e)
+				uni.showToast({ title: '操作失败', icon: 'none' })
+			}
+		}
+	})
+}
+
+async function fetchGoals() {
+	loading.value = true
+	try {
+		const res = await api.listRewardGoals('all')
+		goals.value = res.data?.items || []
+	} catch (e) {
+		console.error('fetch goals error:', e)
+	} finally {
+		loading.value = false
+	}
+}
+
+async function fetchSavedMoney() {
+	try {
+		const res = await api.getQuitCheckinHome()
+		const summary = res.data?.summary || {}
+		savedMoneyCent.value = summary.saved_money_cent || 0
+		const streakDays = summary.current_streak_days || 0
+		if (streakDays > 0) {
+			dailySaveCent.value = Math.round(savedMoneyCent.value / streakDays)
+		}
+	} catch (e) {
+		console.error('fetch saved money error:', e)
+	}
+}
+
+onMounted(async () => {
+	await Promise.all([fetchGoals(), fetchSavedMoney()])
+})
+</script>
+
+<style scoped>
+.page {
+	min-height: 100vh;
+	background: #F8FAFB;
+	padding-bottom: 140rpx;
+}
+
+.saved-banner {
+	margin-top: 20rpx;
+	margin: 0 24rpx 20rpx;
+	border-radius: 28rpx;
+	overflow: hidden;
+	background: linear-gradient(135deg, #14936d 0%, #10B981 50%, #34D399 100%);
+	box-shadow: 0 16rpx 36rpx rgba(20, 147, 109, 0.25);
+}
+
+.saved-banner-inner {
+	padding: 32rpx 28rpx;
+	text-align: center;
+}
+
+.saved-label {
+	font-size: 24rpx;
+	color: rgba(255, 255, 255, 0.8);
+}
+
+.saved-amount-row {
+	display: flex;
+	align-items: baseline;
+	justify-content: center;
+	gap: 4rpx;
+	margin-top: 8rpx;
+}
+
+.saved-unit {
+	font-size: 32rpx;
+	font-weight: 700;
+	color: #fff;
+}
+
+.saved-amount {
+	font-size: 72rpx;
+	font-weight: 800;
+	color: #fff;
+	font-family: 'DIN Alternate', -apple-system, sans-serif;
+	line-height: 1;
+}
+
+.saved-hint {
+	display: block;
+	margin-top: 10rpx;
+	font-size: 22rpx;
+	color: rgba(255, 255, 255, 0.7);
+}
+
+.tab-bar {
+	display: flex;
+	gap: 0;
+	margin: 0 24rpx 20rpx;
+	background: rgba(255, 255, 255, 0.8);
+	border-radius: 20rpx;
+	padding: 6rpx;
+	border: 1rpx solid rgba(15, 23, 42, 0.06);
+}
+
+.tab-item {
+	flex: 1;
+	text-align: center;
+	padding: 16rpx 0;
+	font-size: 26rpx;
+	font-weight: 600;
+	color: #9ca3af;
+	border-radius: 16rpx;
+	transition: all 0.2s;
+}
+
+.tab-active {
+	background: #fff;
+	color: #14936d;
+	box-shadow: 0 4rpx 12rpx rgba(15, 23, 42, 0.06);
+}
+
+.loading-wrap {
+	padding: 0 24rpx;
+	display: flex;
+	flex-direction: column;
+	gap: 20rpx;
+}
+
+.sk-card-placeholder {
+	height: 180rpx;
+	border-radius: 24rpx;
+	background: linear-gradient(90deg, #E5E7EB 25%, #F3F4F6 50%, #E5E7EB 75%);
+	background-size: 200% 100%;
+	animation: shimmer 1.5s infinite;
+}
+
+@keyframes shimmer {
+	0% { background-position: -200% 0; }
+	100% { background-position: 200% 0; }
+}
+
+.empty-state {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	padding: 100rpx 0;
+}
+
+.empty-icon {
+	font-size: 80rpx;
+	margin-bottom: 20rpx;
+}
+
+.empty-text {
+	font-size: 28rpx;
+	color: #9ca3af;
+}
+
+.empty-action {
+	margin-top: 20rpx;
+	padding: 14rpx 40rpx;
+	background: linear-gradient(135deg, #14936d, #10B981);
+	color: #fff;
+	font-size: 26rpx;
+	font-weight: 600;
+	border-radius: 999rpx;
+	box-shadow: 0 8rpx 20rpx rgba(20, 147, 109, 0.25);
+}
+
+.goal-list {
+	padding: 0 24rpx;
+	display: flex;
+	flex-direction: column;
+	gap: 20rpx;
+}
+
+.goal-card {
+	display: flex;
+	align-items: center;
+	gap: 20rpx;
+	padding: 24rpx;
+	background: #fff;
+	border-radius: 24rpx;
+	border: 1rpx solid rgba(15, 23, 42, 0.06);
+	box-shadow: 0 8rpx 20rpx rgba(15, 23, 42, 0.04);
+}
+
+.goal-cover {
+	width: 120rpx;
+	height: 120rpx;
+	border-radius: 20rpx;
+	background: linear-gradient(135deg, #f0fdf9 0%, #ecfdf5 100%);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-shrink: 0;
+	overflow: hidden;
+}
+
+.goal-cover-img {
+	width: 100%;
+	height: 100%;
+}
+
+.goal-cover-emoji {
+	font-size: 48rpx;
+}
+
+.goal-info {
+	flex: 1;
+	min-width: 0;
+}
+
+.goal-title {
+	display: block;
+	font-size: 28rpx;
+	font-weight: 700;
+	color: #111827;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.goal-price {
+	display: block;
+	margin-top: 4rpx;
+	font-size: 24rpx;
+	color: #6b7280;
+	font-family: 'DIN Alternate', -apple-system, sans-serif;
+}
+
+.goal-progress-area {
+	margin-top: 10rpx;
+}
+
+.goal-bar {
+	height: 8rpx;
+	background: rgba(16, 185, 129, 0.12);
+	border-radius: 999rpx;
+	overflow: hidden;
+}
+
+.goal-fill {
+	height: 100%;
+	background: linear-gradient(90deg, #10B981, #34D399);
+	border-radius: 999rpx;
+	transition: width 0.5s ease;
+}
+
+.goal-eta {
+	display: block;
+	margin-top: 6rpx;
+	font-size: 20rpx;
+	color: #9ca3af;
+}
+
+.goal-done-badge {
+	margin-top: 8rpx;
+}
+
+.goal-done-text {
+	font-size: 22rpx;
+	font-weight: 600;
+	color: #14936d;
+}
+
+.goal-actions {
+	flex-shrink: 0;
+}
+
+.goal-action-btn {
+	padding: 12rpx 24rpx;
+	border-radius: 999rpx;
+	font-size: 22rpx;
+	font-weight: 600;
+}
+
+.goal-action-complete {
+	background: linear-gradient(135deg, #14936d, #10B981);
+	color: #fff;
+	box-shadow: 0 6rpx 16rpx rgba(20, 147, 109, 0.2);
+}
+
+/* 弹窗 */
+.modal-mask {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	background: rgba(0, 0, 0, 0.45);
+	z-index: 999;
+	display: flex;
+	align-items: flex-end;
+	justify-content: center;
+}
+
+.modal-body {
+	width: 100%;
+	background: #fff;
+	border-radius: 32rpx 32rpx 0 0;
+	padding: 36rpx 32rpx calc(env(safe-area-inset-bottom) + 36rpx);
+	max-height: 85vh;
+	overflow-y: auto;
+}
+
+.modal-title {
+	display: block;
+	font-size: 32rpx;
+	font-weight: 700;
+	color: #111827;
+	text-align: center;
+	margin-bottom: 28rpx;
+}
+
+.form-group {
+	margin-bottom: 24rpx;
+}
+
+.form-label {
+	display: block;
+	font-size: 24rpx;
+	font-weight: 600;
+	color: #374151;
+	margin-bottom: 12rpx;
+}
+
+.form-input {
+	width: 100%;
+	height: 84rpx;
+	padding: 0 20rpx;
+	border-radius: 16rpx;
+	background: #f9fafb;
+	border: 1rpx solid rgba(15, 23, 42, 0.08);
+	font-size: 28rpx;
+	color: #111827;
+	box-sizing: border-box;
+}
+
+.icons-loading, .icons-empty {
+	padding: 24rpx 0;
+	text-align: center;
+}
+
+.icons-loading-text, .icons-empty-text {
+	font-size: 24rpx;
+	color: #9ca3af;
+}
+
+.icon-grid {
+	display: grid;
+	grid-template-columns: repeat(5, 1fr);
+	gap: 16rpx;
+}
+
+.icon-item {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 100%;
+	aspect-ratio: 1;
+	border-radius: 16rpx;
+	background: #f9fafb;
+	border: 2rpx solid transparent;
+	overflow: hidden;
+	transition: all 0.15s;
+}
+
+.icon-item-active {
+	background: #ecfdf5;
+	border-color: #14936d;
+}
+
+.icon-emoji {
+	font-size: 40rpx;
+}
+
+.icon-img {
+	width: 100%;
+	height: 100%;
+}
+
+.modal-actions {
+	display: flex;
+	gap: 20rpx;
+	margin-top: 32rpx;
+}
+
+.modal-btn {
+	flex: 1;
+	text-align: center;
+	padding: 22rpx 0;
+	border-radius: 999rpx;
+	font-size: 28rpx;
+	font-weight: 600;
+}
+
+.modal-btn-cancel {
+	background: #f3f4f6;
+	color: #6b7280;
+}
+
+.modal-btn-confirm {
+	background: linear-gradient(135deg, #14936d, #10B981);
+	color: #fff;
+	box-shadow: 0 8rpx 20rpx rgba(20, 147, 109, 0.2);
+}
+
+.fab {
+	position: fixed;
+	right: 40rpx;
+	bottom: calc(env(safe-area-inset-bottom) + 60rpx);
+	width: 100rpx;
+	height: 100rpx;
+	border-radius: 50%;
+	background: linear-gradient(135deg, #14936d, #10B981);
+	box-shadow: 0 12rpx 30rpx rgba(20, 147, 109, 0.35);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	z-index: 100;
+}
+
+.fab-icon {
+	font-size: 48rpx;
+	color: #fff;
+	font-weight: 300;
+	line-height: 1;
+}
+</style>
@@ -21,8 +21,7 @@
 					<view class="quit-hero-top">
 						<view class="quit-hero-copy">
 							<text class="quit-hero-eyebrow">无烟旅程</text>
-							<text class="quit-hero-title">今天也在慢慢变好</text>
-							<text class="quit-hero-subtitle">{{ quitEncouragement }}</text>
+							<text class="quit-hero-title">{{ quitEncouragement }}</text>
 						</view>
 						<text class="quit-hero-chip">{{ todayChecked ? '今日已完成' : '等待打卡' }}</text>
 					</view>
@@ -53,6 +52,25 @@
 							</view>
 						</view>
 					</view>
+
+					<view v-if="achievementData" class="quit-ach-inline">
+						<view class="quit-ach-left">
+							<text class="quit-ach-icon">{{ achievementData.theme_icon }}</text>
+							<view class="quit-ach-info">
+								<text class="quit-ach-rank">{{ achievementData.current?.name || '--' }}</text>
+								<text class="quit-ach-theme">{{ achievementData.theme_name }}</text>
+							</view>
+						</view>
+						<view class="quit-ach-right">
+							<view v-if="achievementData.next" class="quit-ach-progress-area">
+								<view class="quit-ach-bar">
+									<view class="quit-ach-fill" :style="{ width: (achievementData.progress * 100) + '%' }"></view>
+								</view>
+								<text class="quit-ach-hint">距「{{ achievementData.next.name }}」还需 {{ achievementData.next.required_days - achievementData.days }} 天</text>
+							</view>
+							<text v-else class="quit-ach-max">已达最高等级</text>
+						</view>
+					</view>
 				</view>

 				<view
@@ -78,30 +96,47 @@
 				<view class="quit-health-card">
 					<view class="quit-health-header">
 						<view>
-							<text class="quit-health-title">健康恢复</text>
-							<text class="quit-health-subtitle">身体正在按自己的节奏修复</text>
+							<text class="quit-health-title">健康恢复里程碑</text>
 						</view>
-						<text class="quit-health-value">{{ healthProgress }}%</text>
+						<view class="quit-health-badge" :class="{ 'quit-health-badge-done': healthProgress >= 100 }">
+							{{ healthProgress >= 100 ? '已达成' : `${healthProgress}%` }}
 						</view>
-					<view class="quit-health-bar">
-						<view class="quit-health-bar-fill" :style="{ width: healthProgress + '%' }"></view>
 					</view>
-					<view class="quit-health-milestones">
+					<view class="quit-milestone-list">
 						<view
-							v-for="(milestone, index) in healthMilestones"
+							v-for="(ms, index) in healthMilestoneItems"
 							:key="index"
-							class="quit-milestone-item"
-							:class="{ 'quit-milestone-done': quitDays >= milestone.days }"
+							class="quit-ms-item"
 						>
-							<view class="quit-milestone-dot"></view>
-							<text class="quit-milestone-text">{{ milestone.label }}</text>
+							<view class="quit-ms-top">
+								<text class="quit-ms-name">{{ ms.name }}</text>
+								<text class="quit-ms-pct" :class="{ 'quit-ms-pct-done': ms.percent >= 100 }">{{ ms.percent }}%</text>
+							</view>
+							<view class="quit-ms-bar">
+								<view
+									class="quit-ms-fill"
+									:class="ms.percent >= 100 ? 'quit-ms-fill-done' : 'quit-ms-fill-pending'"
+									:style="{ width: ms.percent + '%' }"
+								></view>
+							</view>
 						</view>
 					</view>
 				</view>

-				<view class="quit-motivation-card">
-					<text class="quit-motivation-label">今日提醒</text>
-					<text class="quit-motivation-text">{{ healthTip }}</text>
+				<view class="quit-dream-entry" @tap="gotoDreamGoals">
+					<view class="quit-dream-left">
+						<text class="quit-dream-icon">🎯</text>
+						<view class="quit-dream-info">
+							<text class="quit-dream-title">梦想清单</text>
+							<text class="quit-dream-desc">{{ activeGoalText }}</text>
+						</view>
+					</view>
+					<text class="quit-dream-arrow">›</text>
+				</view>
+
+				<view class="quit-tip-bar">
+					<text class="quit-tip-icon">💡</text>
+					<text class="quit-tip-text">{{ healthTip }}</text>
 				</view>
 			</view>

@@ -212,6 +247,28 @@
 						<text class="health-tip-icon">💡</text>
 						<text class="health-tip-text">{{ recordHealthTip }}</text>
 					</view>
+
+					<view v-if="achievementData" class="record-achievement-card">
+						<view class="ach-header">
+							<text class="ach-title">{{ achievementData.theme_icon }} 成就称号</text>
+							<text class="ach-theme-name">{{ achievementData.theme_name }}</text>
+						</view>
+						<view class="ach-body">
+							<view class="ach-current">
+								<text class="ach-rank">{{ achievementData.current?.name || '--' }}</text>
+								<text class="ach-days">第 {{ achievementData.days }} 天</text>
+							</view>
+							<view v-if="achievementData.next" class="ach-progress-wrap">
+								<view class="ach-progress-bar">
+									<view class="ach-progress-fill" :style="{ width: (achievementData.progress * 100) + '%' }"></view>
+								</view>
+								<text class="ach-next-hint">距下一级「{{ achievementData.next.name }}」还需 {{ achievementData.next.required_days - achievementData.days }} 天</text>
+							</view>
+							<view v-else class="ach-max">
+								<text class="ach-max-text">已达最高等级</text>
+							</view>
+						</view>
+					</view>
 				</view>
 			</view>

@@ -244,6 +301,8 @@ const showDialog = ref(false)
 const dialogType = ref('smoke')
 const homeData = ref(null)
 const pageReady = ref(false)
+const achievementData = ref(null)
+const quitHomeData = ref(null)
 const quitState = ref(defaultQuitState())

 let timerInterval = null
@@ -288,35 +347,59 @@ const nextSmokeTimeText = computed(() => {
 	return `${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`
 })

-// 戒烟模式计算
+// 戒烟模式计算 — 优先使用 V2 API 数据
+const quitSummary = computed(() => quitHomeData.value?.summary || {})
+const quitDailyStatus = computed(() => quitHomeData.value?.daily_status || {})
+
 const baselineCigsPerDay = computed(() => profileStore.profile?.baseline_cigs_per_day || 10)
 const packPriceYuan = computed(() => (profileStore.profile?.pack_price_cent || 2500) / 100)

 const quitDays = computed(() => {
+	if (quitSummary.value.current_streak_days !== undefined) {
+		return quitSummary.value.current_streak_days
+	}
 	if (!quitState.value.lastCheckinDate) return 0
 	const gap = diffDays(quitState.value.lastCheckinDate, formatDate(new Date()))
 	if (gap > 1) return 0
 	return Number(quitState.value.streakDays || 0)
 })

-const todayChecked = computed(() => quitState.value.lastCheckinDate === formatDate(new Date()))
-const todayCheckinTime = computed(() => formatClock(quitState.value.lastCheckinAt))
+const todayChecked = computed(() => {
+	if (quitDailyStatus.value.status) {
+		return quitDailyStatus.value.status === 'checked_in'
+	}
+	return quitState.value.lastCheckinDate === formatDate(new Date())
+})
+
+const todayCheckinTime = computed(() => {
+	if (quitDailyStatus.value.checkin_at) {
+		return formatClock(quitDailyStatus.value.checkin_at)
+	}
+	return formatClock(quitState.value.lastCheckinAt)
+})

 const savedMoney = computed(() => {
-	const total = (quitDays.value * baselineCigsPerDay.value / 20) * packPriceYuan.value
-	return Math.round(total)
+	if (quitSummary.value.saved_money_cent !== undefined) {
+		return Math.round(quitSummary.value.saved_money_cent / 100)
+	}
+	return Math.round((quitDays.value * baselineCigsPerDay.value / 20) * packPriceYuan.value)
 })

 const avoidedCigs = computed(() => {
+	if (quitSummary.value.avoided_cigs !== undefined) {
+		return quitSummary.value.avoided_cigs
+	}
 	return quitDays.value * baselineCigsPerDay.value
 })

 const lifeSaved = computed(() => {
-	// 每支烟减少约11分钟生命，换算成小时
-	return Math.round(quitDays.value * baselineCigsPerDay.value * 11 / 60)
+	return Math.round(avoidedCigs.value * 11 / 60)
 })

 const healthProgress = computed(() => {
+	if (quitSummary.value.health_recovery_percent !== undefined) {
+		return quitSummary.value.health_recovery_percent
+	}
 	if (quitDays.value >= 365) return 100
 	if (quitDays.value >= 180) return 85
 	if (quitDays.value >= 90) return 70
@@ -361,6 +444,30 @@ const healthMilestones = computed(() => [
 	{ days: 365, label: '1年' }
 ])

+const healthMilestoneItems = computed(() => {
+	const milestones = [
+		{ name: '血压心率恢复', minutes: 20 },
+		{ name: '一氧化碳排出', minutes: 480 },
+		{ name: '尼古丁代谢完', minutes: 4320 },
+		{ name: '味觉嗅觉恢复', minutes: 43200 },
+		{ name: '血液循环改善', minutes: 129600 },
+		{ name: '肺功能提升', minutes: 525600 },
+	]
+	const minutes = quitDays.value * 1440
+	return milestones.map(m => ({
+		name: m.name,
+		percent: Math.min(Math.round((minutes / m.minutes) * 100), 100)
+	}))
+})
+
+const activeGoalText = computed(() => {
+	const goal = quitHomeData.value?.goal
+	if (!goal) return '设定一个小目标，攒钱实现它'
+	const remaining = goal.target_amount_cent - (goal.current_amount_cent || 0)
+	if (remaining <= 0) return `「${goal.title}」已攒够！`
+	return `「${goal.title}」还差 ¥${Math.round(remaining / 100)}`
+})
+
 const todayCountPercent = computed(() => {
 	if (!dailyTarget.value || dailyTarget.value <= 0) return todayCount.value > 0 ? 100 : 0
 	const percent = Math.round((todayCount.value / dailyTarget.value) * 100)
@@ -518,21 +625,73 @@ async function handleSubmit(submitData) {
 	}
 }

-function handleQuitCheckin() {
+async function handleQuitCheckin() {
 	if (todayChecked.value) {
 		uni.showToast({ title: '今天已经打过卡', icon: 'none' })
 		return
 	}
+	try {
 		const today = formatDate(new Date())
-	const previousDate = quitState.value.lastCheckinDate
-	let streakDays = 1
-	if (previousDate) {
-		const gap = diffDays(previousDate, today)
-		if (gap === 1) streakDays = Number(quitState.value.streakDays || 0) + 1
-		else if (gap === 0) streakDays = Number(quitState.value.streakDays || 0)
-	}
-	saveQuitState({ lastCheckinDate: today, lastCheckinAt: new Date().toISOString(), streakDays })
+		const res = await api.quitCheckin({ date: today })
+		applyQuitHomeData(res.data)
+		saveQuitState({
+			lastCheckinDate: today,
+			lastCheckinAt: new Date().toISOString(),
+			streakDays: res.data?.summary?.current_streak_days || 0
+		})
 		uni.showToast({ title: '打卡成功', icon: 'success' })
+	} catch (e) {
+		console.error('handleQuitCheckin error:', e)
+		uni.showToast({ title: '打卡失败，请重试', icon: 'none' })
+	}
+}
+
+function gotoDreamGoals() {
+	uni.navigateTo({ url: '/pages/dream-goals/index' })
+}
+
+function applyQuitHomeData(data) {
+	if (!data) return
+	quitHomeData.value = data
+	if (data.daily_status?.status === 'checked_in' && data.daily_status?.checkin_at) {
+		saveQuitState({
+			lastCheckinDate: data.daily_status.date,
+			lastCheckinAt: data.daily_status.checkin_at,
+			streakDays: data.summary?.current_streak_days || 0
+		})
+	}
+}
+
+async function fetchQuitHomeData() {
+	try {
+		const res = await api.getQuitCheckinHome()
+		applyQuitHomeData(res.data)
+	} catch (e) {
+		const msg = e?.message || ''
+		if (msg.includes('基础资料')) {
+			await ensureQuitProfile()
+			try {
+				const res = await api.getQuitCheckinHome()
+				applyQuitHomeData(res.data)
+			} catch (retryErr) {
+				console.error('fetchQuitHomeData retry error:', retryErr)
+				loadQuitState()
+			}
+		} else {
+			console.error('fetchQuitHomeData error:', e)
+			loadQuitState()
+		}
+	}
+}
+
+async function ensureQuitProfile() {
+	const profile = profileStore.profile
+	if (!profile) return
+	await api.upsertQuitCheckinProfile({
+		quit_start_date: formatDate(new Date()),
+		pack_price_cent: profile.pack_price_cent || 2500,
+		baseline_cigs_per_day: profile.baseline_cigs_per_day || 10
+	})
 }

 async function ensureProfileReady() {
@@ -548,13 +707,23 @@ async function ensureProfileReady() {
 	return true
 }

+async function fetchAchievement() {
+	try {
+		const res = await api.getAchievement()
+		achievementData.value = res.data?.achievement || null
+	} catch (e) {
+		console.error('fetchAchievement error:', e)
+	}
+}
+
 async function refreshCurrentMode() {
 	if (!userStore.mode) return
 	const profileReady = await ensureProfileReady()
 	if (!profileReady) return
+	fetchAchievement()
 	if (isQuitMode.value) {
 		stopTimer()
-		loadQuitState()
+		await fetchQuitHomeData()
 		return
 	}
 	await fetchRecordHomeData()
@@ -698,8 +867,7 @@ onShareAppMessage(() => ({

 .quit-hero-card,
 .quit-checkin-card,
-.quit-health-card,
-.quit-motivation-card {
+.quit-health-card {
 	position: relative;
 	overflow: hidden;
 	background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(251, 253, 252, 0.94) 100%);
@@ -714,8 +882,7 @@ onShareAppMessage(() => ({
 }

 .quit-hero-card::before,
-.quit-health-card::before,
-.quit-motivation-card::before {
+.quit-health-card::before {
 	content: '';
 	position: absolute;
 	width: 240rpx;
@@ -744,7 +911,7 @@ onShareAppMessage(() => ({
 	align-items: flex-start;
 	justify-content: space-between;
 	gap: 16rpx;
-	margin-bottom: 26rpx;
+	margin-bottom: 20rpx;
 }

 .quit-hero-copy {
@@ -765,20 +932,12 @@ onShareAppMessage(() => ({
 }

 .quit-hero-title {
-	display: block;
-	margin-top: 16rpx;
-	font-size: 42rpx;
-	line-height: 1.2;
-	font-weight: 800;
-	color: #111827;
-}
-
-.quit-hero-subtitle {
 	display: block;
 	margin-top: 10rpx;
-	font-size: 24rpx;
-	line-height: 1.6;
-	color: #6b7280;
+	font-size: 28rpx;
+	line-height: 1.5;
+	font-weight: 700;
+	color: #14936d;
 }

 .quit-hero-chip {
@@ -966,10 +1125,10 @@ onShareAppMessage(() => ({

 .quit-health-header {
 	display: flex;
-	align-items: flex-start;
+	align-items: center;
 	justify-content: space-between;
 	gap: 16rpx;
-	margin-bottom: 18rpx;
+	margin-bottom: 20rpx;
 }

 .quit-health-title {
@@ -979,101 +1138,238 @@ onShareAppMessage(() => ({
 	color: #111827;
 }

-.quit-health-subtitle {
-	display: block;
-	margin-top: 8rpx;
-	font-size: 22rpx;
-	line-height: 1.5;
-	color: #6b7280;
+.quit-health-badge {
+	font-size: 21rpx;
+	padding: 8rpx 16rpx;
+	border-radius: 999rpx;
+	background: rgba(240, 252, 248, 0.94);
+	border: 1rpx solid rgba(15, 23, 42, 0.05);
+	color: #14936d;
+	font-weight: 600;
 }

-.quit-health-value {
-	font-size: 34rpx;
-	font-weight: 800;
+.quit-health-badge-done {
+	background: linear-gradient(135deg, #10B981, #14936d);
+	color: #fff;
+	border-color: transparent;
+}
+
+.quit-milestone-list {
+	position: relative;
+	z-index: 1;
+	display: flex;
+	flex-direction: column;
+	gap: 16rpx;
+}
+
+.quit-ms-item {
+	position: relative;
+}
+
+.quit-ms-top {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin-bottom: 8rpx;
+}
+
+.quit-ms-name {
+	font-size: 24rpx;
+	color: #374151;
+	font-weight: 500;
+}
+
+.quit-ms-pct {
+	font-size: 22rpx;
+	color: #9ca3af;
+	font-weight: 600;
+}
+
+.quit-ms-pct-done {
 	color: #14936d;
 }

-.quit-health-bar {
-	position: relative;
-	z-index: 1;
-	height: 14rpx;
+.quit-ms-bar {
+	height: 10rpx;
 	background: rgba(15, 23, 42, 0.06);
 	border-radius: 999rpx;
 	overflow: hidden;
 }

-.quit-health-bar-fill {
+.quit-ms-fill {
 	height: 100%;
-	background: linear-gradient(90deg, #31c18b 0%, #14936d 100%);
 	border-radius: 999rpx;
 	transition: width 0.5s ease;
 }

-.quit-health-milestones {
-	display: flex;
-	justify-content: space-between;
-	gap: 8rpx;
-	margin-top: 22rpx;
+.quit-ms-fill-done {
+	background: linear-gradient(90deg, #31c18b, #14936d);
 }

-.quit-milestone-item {
+.quit-ms-fill-pending {
+	background: rgba(52, 200, 160, 0.3);
+}
+
+.quit-ach-inline {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 16rpx;
+	margin-top: 20rpx;
+	padding: 18rpx 20rpx;
+	border-radius: 22rpx;
+	background: linear-gradient(180deg, #f5fbf9 0%, #eef6f2 100%);
+	border: 1rpx solid rgba(15, 23, 42, 0.05);
+	position: relative;
+	z-index: 1;
+}
+
+.quit-ach-left {
+	display: flex;
+	align-items: center;
+	gap: 12rpx;
+	flex-shrink: 0;
+}
+
+.quit-ach-icon {
+	font-size: 36rpx;
+	line-height: 1;
+}
+
+.quit-ach-info {
 	display: flex;
 	flex-direction: column;
-	align-items: center;
-	gap: 8rpx;
-	flex: 1;
 }

-.quit-milestone-dot {
-	width: 16rpx;
-	height: 16rpx;
-	border-radius: 50%;
-	background: rgba(15, 23, 42, 0.08);
-	border: 2rpx solid rgba(15, 23, 42, 0.1);
+.quit-ach-rank {
+	font-size: 28rpx;
+	font-weight: 800;
+	color: #14936d;
+	line-height: 1.2;
 }

-.quit-milestone-done .quit-milestone-dot {
-	background: #31c18b;
-	border-color: #14936d;
-}
-
-.quit-milestone-text {
+.quit-ach-theme {
 	font-size: 20rpx;
 	color: #9ca3af;
+	margin-top: 2rpx;
 }

-.quit-milestone-done .quit-milestone-text {
+.quit-ach-right {
+	flex: 1;
+	min-width: 0;
+	display: flex;
+	align-items: center;
+	justify-content: flex-end;
+}
+
+.quit-ach-progress-area {
+	width: 100%;
+	max-width: 280rpx;
+}
+
+.quit-ach-bar {
+	height: 8rpx;
+	background: rgba(16, 185, 129, 0.12);
+	border-radius: 999rpx;
+	overflow: hidden;
+}
+
+.quit-ach-fill {
+	height: 100%;
+	background: linear-gradient(90deg, #10B981, #34D399);
+	border-radius: 999rpx;
+	transition: width 0.5s ease;
+}
+
+.quit-ach-hint {
+	display: block;
+	margin-top: 6rpx;
+	font-size: 20rpx;
+	color: #9ca3af;
+	text-align: right;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.quit-ach-max {
+	font-size: 20rpx;
 	color: #14936d;
 	font-weight: 600;
 }

-.quit-motivation-card {
-	padding: 24rpx;
-}
-
-.quit-motivation-label {
-	position: relative;
-	z-index: 1;
-	display: inline-flex;
+.quit-dream-entry {
+	display: flex;
 	align-items: center;
-	padding: 8rpx 18rpx;
-	border-radius: 999rpx;
-	background: rgba(240, 252, 248, 0.94);
-	border: 1rpx solid rgba(15, 23, 42, 0.05);
-	font-size: 20rpx;
-	font-weight: 600;
-	color: #6b7280;
+	justify-content: space-between;
+	padding: 22rpx 24rpx;
+	background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(251, 253, 252, 0.94) 100%);
+	border-radius: 24rpx;
+	border: 1rpx solid rgba(15, 23, 42, 0.06);
+	box-shadow: 0 8rpx 20rpx rgba(15, 23, 42, 0.04);
 }

-.quit-motivation-text {
-	position: relative;
-	z-index: 1;
+.quit-dream-left {
+	display: flex;
+	align-items: center;
+	gap: 16rpx;
+	flex: 1;
+	min-width: 0;
+}
+
+.quit-dream-icon {
+	font-size: 36rpx;
+	flex-shrink: 0;
+}
+
+.quit-dream-info {
+	flex: 1;
+	min-width: 0;
+}
+
+.quit-dream-title {
 	display: block;
-	margin-top: 16rpx;
 	font-size: 28rpx;
-	line-height: 1.7;
-	font-weight: 600;
-	color: #374151;
+	font-weight: 700;
+	color: #111827;
+}
+
+.quit-dream-desc {
+	display: block;
+	margin-top: 4rpx;
+	font-size: 22rpx;
+	color: #9ca3af;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.quit-dream-arrow {
+	font-size: 36rpx;
+	color: #d1d5db;
+	flex-shrink: 0;
+	font-weight: 300;
+}
+
+.quit-tip-bar {
+	display: flex;
+	align-items: center;
+	gap: 8rpx;
+	padding: 14rpx 18rpx;
+	border-radius: 16rpx;
+	background: rgba(240, 252, 248, 0.6);
+	border: 1rpx solid rgba(15, 23, 42, 0.03);
+}
+
+.quit-tip-icon {
+	font-size: 22rpx;
+	flex-shrink: 0;
+}
+
+.quit-tip-text {
+	font-size: 20rpx;
+	line-height: 1.5;
+	color: #9ca3af;
 }

 /* ===== 记录模式 ===== */
@@ -1497,4 +1793,93 @@ onShareAppMessage(() => ({
 	color: #4b5563;
 	line-height: 1.5;
 }
+
+.record-achievement-card {
+	margin-top: 20rpx;
+	padding: 24rpx;
+	border-radius: 24rpx;
+	background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 251, 249, 0.94) 100%);
+	border: 1rpx solid rgba(15, 23, 42, 0.06);
+	box-shadow: 0 6rpx 14rpx rgba(15, 23, 42, 0.03);
+}
+
+.ach-header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	margin-bottom: 16rpx;
+}
+
+.ach-title {
+	font-size: 26rpx;
+	font-weight: 700;
+	color: #111827;
+}
+
+.ach-theme-name {
+	font-size: 22rpx;
+	color: #6b7280;
+	padding: 6rpx 14rpx;
+	background: rgba(240, 252, 248, 0.94);
+	border-radius: 999rpx;
+	border: 1rpx solid rgba(15, 23, 42, 0.05);
+}
+
+.ach-body {
+	position: relative;
+	z-index: 1;
+}
+
+.ach-current {
+	display: flex;
+	align-items: baseline;
+	gap: 12rpx;
+	margin-bottom: 16rpx;
+}
+
+.ach-rank {
+	font-size: 40rpx;
+	font-weight: 800;
+	color: #14936d;
+	font-family: 'DIN Alternate', -apple-system, sans-serif;
+}
+
+.ach-days {
+	font-size: 24rpx;
+	color: #6b7280;
+}
+
+.ach-progress-wrap {
+	margin-bottom: 4rpx;
+}
+
+.ach-progress-bar {
+	height: 12rpx;
+	background: rgba(16, 185, 129, 0.12);
+	border-radius: 6rpx;
+	overflow: hidden;
+	margin-bottom: 10rpx;
+}
+
+.ach-progress-fill {
+	height: 100%;
+	background: linear-gradient(90deg, #10B981, #34D399);
+	border-radius: 6rpx;
+	transition: width 0.5s ease;
+}
+
+.ach-next-hint {
+	font-size: 22rpx;
+	color: #6b7280;
+}
+
+.ach-max {
+	margin-top: 4rpx;
+}
+
+.ach-max-text {
+	font-size: 22rpx;
+	color: #14936d;
+	font-weight: 600;
+}
 </style>
@@ -1,27 +1,7 @@
 <template>
 	<view class="page">
-		<view class="hero-card card">
-			<text class="hero-title">记录历史</text>
-			<text class="hero-subtitle">按时间查看抽烟和忍住记录，随时回看自己的变化轨迹。</text>
-			<view class="hero-stats">
-				<view class="hero-stat">
-					<text class="hero-stat-value">{{ filteredLogs.length }}</text>
-					<text class="hero-stat-label">当前筛选</text>
-				</view>
-				<view class="hero-stat">
-					<text class="hero-stat-value">{{ smokeCount }}</text>
-					<text class="hero-stat-label">抽烟</text>
-				</view>
-				<view class="hero-stat">
-					<text class="hero-stat-value">{{ resistedCount }}</text>
-					<text class="hero-stat-label">忍住</text>
-				</view>
-			</view>
-		</view>
-
-		<view class="section">
-			<text class="section-label">筛选记录</text>
-			<view class="filters card">
+		<view class="filters-sticky">
+			<view class="filters">
 				<view class="tabs">
 					<view
 						v-for="tab in tabs"
@@ -169,9 +149,6 @@ const filteredLogs = computed(() => {
 	return logs.filter(log => log.type === currentTab.value)
 })

-const smokeCount = computed(() => filteredLogs.value.filter(log => log.type === 'smoke').length)
-const resistedCount = computed(() => filteredLogs.value.filter(log => log.type === 'resisted').length)
-
 // 按日期分组
 const groupedLogs = computed(() => {
 	return filteredLogs.value.reduce((groups, log) => {
@@ -320,120 +297,63 @@ onShareAppMessage(() => {
 	min-height: 100vh;
 	display: flex;
 	flex-direction: column;
-	background: linear-gradient(180deg, #E6F7F2 0%, #F0FBF7 40%, #FAFFFE 100%);
-	padding: 24rpx 28rpx 0;
+	background-color: #F5F7F6;
+	padding: 0 32rpx;
 	box-sizing: border-box;
 }

-.hero-card,
-.section,
-.filters,
-.scroll-container,
-.fab {
+.filters-sticky {
 	position: relative;
-	z-index: 1;
-}
-
-.card {
-	background: rgba(255, 255, 255, 0.88);
-	border-radius: 24rpx;
-	border: 1.5rpx solid rgba(52, 200, 160, 0.14);
-	box-shadow: 0 4rpx 18rpx rgba(52, 200, 160, 0.07);
-	padding: 24rpx;
-}
-
-.hero-card {
-	margin-bottom: 20rpx;
-}
-
-.hero-title {
-	display: block;
-	font-size: 38rpx;
-	line-height: 1.2;
-	font-weight: 700;
-	color: #0D3D2E;
-}
-
-.hero-subtitle {
-	display: block;
-	margin-top: 10rpx;
-	font-size: 25rpx;
-	line-height: 1.5;
-	color: #52806E;
-}
-
-.hero-stats {
-	display: flex;
-	gap: 16rpx;
-	margin-top: 24rpx;
-}
-
-.hero-stat {
-	flex: 1;
-	background: rgba(52, 200, 160, 0.06);
-	border: 1.5rpx solid rgba(52, 200, 160, 0.1);
-	border-radius: 20rpx;
-	padding: 18rpx 14rpx;
-}
-
-.hero-stat-value {
-	display: block;
-	font-size: 40rpx;
-	font-weight: 700;
-	color: #0D3D2E;
-}
-
-.hero-stat-label {
-	display: block;
-	margin-top: 8rpx;
-	font-size: 22rpx;
-	color: #7aA898;
-}
-
-.section {
-	margin-bottom: 20rpx;
-}
-
-.section-label {
-	display: block;
-	margin: 0 0 14rpx 6rpx;
-	font-size: 26rpx;
-	font-weight: 600;
-	color: #1a5c45;
+	height: 120rpx;
+	flex-shrink: 0;
+	z-index: 20;
 }

 .filters {
-	padding: 24rpx;
+	position: fixed;
+	left: 32rpx;
+	right: 32rpx;
+	z-index: 50;
+	margin: 12rpx 0 0;
 }

 .tabs {
 	display: flex;
-	background: rgba(255, 255, 255, 0.82);
-	border-radius: 22rpx;
+	background: #FFFFFF;
+	border-radius: 24rpx;
 	padding: 6rpx;
-	border: 1.5rpx solid rgba(52, 200, 160, 0.14);
-	box-shadow: 0 4rpx 16rpx rgba(52, 200, 160, 0.07);
+	box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.03);
 }

 .tab {
 	flex: 1;
 	text-align: center;
-	padding: 14rpx 0;
-	border-radius: 16rpx;
-	font-size: 24rpx;
+	padding: 16rpx 0;
+	border-radius: 20rpx;
+	font-size: 26rpx;
 	font-weight: 600;
-	color: #7aA898;
+	color: #999999;
 }

 .tab-active {
-	background: #FFFFFF;
-	color: #0D3D2E;
-	box-shadow: 0 4rpx 12rpx rgba(52, 200, 160, 0.12);
+	background: #10B981;
+	color: #FFFFFF;
+}
+
+.section-label {
+	display: block;
+	margin: 0 0 18rpx 6rpx;
+	font-size: 28rpx;
+	font-weight: 600;
+	color: #666666;
 }

 .scroll-container {
 	flex: 1;
 	min-height: 0;
+	position: relative;
+	z-index: 0;
+	padding-top: 0;
 	padding-bottom: calc(140rpx + env(safe-area-inset-bottom));
 	box-sizing: border-box;
 }
@@ -452,7 +372,7 @@ onShareAppMessage(() => {
 	width: 64rpx;
 	height: 64rpx;
 	border-radius: 18rpx;
-	background: linear-gradient(90deg, rgba(52, 200, 160, 0.08) 25%, rgba(52, 200, 160, 0.18) 50%, rgba(52, 200, 160, 0.08) 75%);
+	background: linear-gradient(90deg, #EEEEEE 25%, #F5F5F5 50%, #EEEEEE 75%);
 	background-size: 200% 100%;
 	animation: shimmer 1.5s infinite;
 	flex-shrink: 0;
@@ -460,16 +380,15 @@ onShareAppMessage(() => {

 .skeleton-card {
 	flex: 1;
-	background: rgba(255, 255, 255, 0.88);
+	background: #FFFFFF;
 	border-radius: 24rpx;
 	padding: 24rpx;
-	border: 1.5rpx solid rgba(52, 200, 160, 0.14);
-	box-shadow: 0 4rpx 18rpx rgba(52, 200, 160, 0.07);
+	box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.03);
 }

 .skeleton-line {
 	height: 24rpx;
-	background: linear-gradient(90deg, rgba(52, 200, 160, 0.08) 25%, rgba(52, 200, 160, 0.18) 50%, rgba(52, 200, 160, 0.08) 75%);
+	background: linear-gradient(90deg, #EEEEEE 25%, #F5F5F5 50%, #EEEEEE 75%);
 	background-size: 200% 100%;
 	animation: shimmer 1.5s infinite;
 	border-radius: 8rpx;
@@ -508,42 +427,40 @@ onShareAppMessage(() => {
 .group-title {
 	font-size: 28rpx;
 	font-weight: 700;
-	color: #0D3D2E;
+	color: #1A1A1A;
 }

 .group-count {
 	font-size: 22rpx;
-	color: #7aA898;
-	background-color: rgba(52, 200, 160, 0.06);
+	color: #999999;
+	background-color: #F0F0F0;
 	padding: 6rpx 16rpx;
 	border-radius: 999rpx;
-	border: 1.5rpx solid rgba(52, 200, 160, 0.14);
 }

 .group-items {
 	display: flex;
 	flex-direction: column;
-	gap: 20rpx;
+	gap: 16rpx;
 }

 .log-card {
 	position: relative;
-	background: rgba(255, 255, 255, 0.88);
+	background: #FFFFFF;
 	border-radius: 24rpx;
 	padding: 24rpx 24rpx 20rpx 24rpx;
-	box-shadow: 0 4rpx 18rpx rgba(52, 200, 160, 0.07);
+	box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.03);
 	display: flex;
 	gap: 20rpx;
 	overflow: hidden;
-	border: 1.5rpx solid rgba(52, 200, 160, 0.14);
 }

 .log-card-resisted {
-	background: linear-gradient(135deg, rgba(245, 255, 251, 0.96), rgba(255, 255, 255, 0.88));
+	background: #FFFFFF;
 }

 .log-card-smoke {
-	background: linear-gradient(135deg, rgba(255, 250, 244, 0.96), rgba(255, 255, 255, 0.88));
+	background: #FFFFFF;
 }

 .log-bar {
@@ -552,11 +469,11 @@ onShareAppMessage(() => {
 	top: 0;
 	bottom: 0;
 	width: 8rpx;
-	background-color: #34C8A0;
+	background-color: #10B981;
 }

 .log-card-smoke .log-bar {
-	background-color: #B45309;
+	background-color: #F59E0B;
 }

 .log-icon {
@@ -572,13 +489,13 @@ onShareAppMessage(() => {
 }

 .icon-resisted {
-	background-color: rgba(52, 200, 160, 0.12);
-	color: #1a8c62;
+	background-color: #E8F5F0;
+	color: #10B981;
 }

 .icon-smoke {
-	background-color: rgba(251, 191, 36, 0.14);
-	color: #B45309;
+	background-color: #FEF3C7;
+	color: #D97706;
 }

 .log-main {
@@ -603,7 +520,7 @@ onShareAppMessage(() => {
 .log-time {
 	font-size: 30rpx;
 	font-weight: 700;
-	color: #0D3D2E;
+	color: #1A1A1A;
 }

 .log-tag {
@@ -614,13 +531,13 @@ onShareAppMessage(() => {
 }

 .tag-smoke {
-	background-color: rgba(251, 191, 36, 0.14);
-	color: #B45309;
+	background-color: #FEF3C7;
+	color: #D97706;
 }

 .tag-resisted {
-	background-color: rgba(52, 200, 160, 0.12);
-	color: #1a8c62;
+	background-color: #E8F5F0;
+	color: #10B981;
 }

 .log-right {
@@ -632,8 +549,8 @@ onShareAppMessage(() => {

 .count-pill {
 	font-size: 22rpx;
-	color: #B45309;
-	background-color: rgba(251, 191, 36, 0.14);
+	color: #D97706;
+	background-color: #FEF3C7;
 	padding: 8rpx 16rpx;
 	border-radius: 999rpx;
 	font-weight: 600;
@@ -641,15 +558,15 @@ onShareAppMessage(() => {

 .thumb-pill {
 	font-size: 24rpx;
-	background-color: rgba(52, 200, 160, 0.12);
-	color: #1a8c62;
+	background-color: #E8F5F0;
+	color: #10B981;
 	padding: 8rpx 14rpx;
 	border-radius: 999rpx;
 }

 .log-desc {
 	font-size: 25rpx;
-	color: #52806E;
+	color: #666666;
 	line-height: 1.5;
 	margin-bottom: 10rpx;
 }
@@ -669,11 +586,10 @@ onShareAppMessage(() => {

 .log-interval {
 	font-size: 22rpx;
-	color: #7aA898;
-	background-color: rgba(52, 200, 160, 0.06);
+	color: #999999;
+	background-color: #F5F5F5;
 	padding: 6rpx 14rpx;
 	border-radius: 999rpx;
-	border: 1.5rpx solid rgba(52, 200, 160, 0.12);
 }

 .log-actions {
@@ -687,29 +603,24 @@ onShareAppMessage(() => {
 	font-size: 22rpx;
 	padding: 8rpx 16rpx;
 	border-radius: 999rpx;
-	background-color: rgba(255, 255, 255, 0.9);
-	border: 1.5rpx solid rgba(52, 200, 160, 0.18);
-	color: #7aA898;
 }

 .edit-btn {
 	color: #2563EB;
-	border-color: rgba(37, 99, 235, 0.18);
 	background-color: rgba(37, 99, 235, 0.08);
 }

 .delete-btn {
 	color: #DC2626;
-	border-color: rgba(220, 38, 38, 0.16);
-	background-color: rgba(220, 38, 38, 0.08);
+	background-color: rgba(220, 38, 38, 0.06);
 }

 .level-unknown {
-	color: #7aA898;
+	color: #999999;
 }

 .level-1 {
-	color: #1a8c62;
+	color: #10B981;
 }

 .level-2 {
@@ -734,36 +645,35 @@ onShareAppMessage(() => {
 	align-items: center;
 	justify-content: center;
 	padding: 120rpx 32rpx;
-	border-radius: 24rpx;
-	border: 2rpx dashed rgba(52, 200, 160, 0.2);
-	background: transparent;
+	border-radius: 32rpx;
+	background: #FFFFFF;
+	box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.03);
 }

 .empty-icon {
 	width: 112rpx;
 	height: 112rpx;
 	border-radius: 36rpx;
-	background: rgba(52, 200, 160, 0.06);
-	border: 1.5rpx solid rgba(52, 200, 160, 0.14);
+	background: #E8F5F0;
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	font-size: 40rpx;
 	font-weight: 700;
-	color: #7aA898;
+	color: #10B981;
 	margin-bottom: 24rpx;
 }

 .empty-text {
 	font-size: 32rpx;
-	color: #0D3D2E;
+	color: #1A1A1A;
 	font-weight: 600;
 	margin-bottom: 12rpx;
 }

 .empty-hint {
 	font-size: 24rpx;
-	color: #7aA898;
+	color: #999999;
 }

 .loading-more, .no-more {
@@ -773,7 +683,7 @@ onShareAppMessage(() => {

 .loading-text, .no-more-text {
 	font-size: 24rpx;
-	color: #7aA898;
+	color: #999999;
 }

 .fab {
@@ -782,12 +692,12 @@ onShareAppMessage(() => {
 	bottom: 140rpx;
 	width: 96rpx;
 	height: 96rpx;
-	background: linear-gradient(180deg, #3DD9AE 0%, #34C8A0 100%);
+	background: #10B981;
 	border-radius: 50%;
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	box-shadow: 0 12rpx 28rpx rgba(52, 200, 160, 0.28);
+	box-shadow: 0 8rpx 24rpx rgba(16, 185, 129, 0.25);
 	transition: all 0.3s;
 	z-index: 100;
 }
@@ -17,13 +17,20 @@
 						:class="{ 'mode-switch-item-active': formData.mode === item.value }"
 						@tap="selectMode(item.value)"
 					>
-						<text class="mode-switch-icon">{{ item.icon }}</text>
 						<text class="mode-switch-title">{{ item.label }}</text>
 						<text class="mode-switch-desc">{{ item.desc }}</text>
 					</view>
 				</view>
 			</view>

+			<!-- 戒烟日期（戒烟模式可见） -->
+			<view v-if="formData.mode === 'quit'" class="form-section">
+				<text class="section-label">戒烟开始日期</text>
+				<picker mode="date" :value="formData.quit_date" @change="onQuitDateChange">
+					<view class="time-picker">{{ formData.quit_date || '请选择日期' }}</view>
+				</picker>
+			</view>
+
 			<!-- 每天抽烟数量 -->
 			<view class="form-section">
 				<view class="section-row">
@@ -99,13 +106,40 @@
 							v-model="priceYuan"
 							class="inline-field"
 						placeholder="25"
-							placeholder-style="color: #9CC5B5"
+						placeholder-style="color: #CCCCCC"
 						/>
 						<text class="inline-unit">元/包</text>
 					</view>
 				</view>
 			</view>

+			<!-- 成就风格 -->
+			<view v-if="achievementThemes.length > 0" class="form-section">
+				<text class="section-label">成就称号风格</text>
+				<text class="section-hint">打卡越久，称号越高</text>
+				<view class="theme-list">
+					<view
+						v-for="theme in achievementThemes"
+						:key="theme.id"
+						class="theme-card"
+						:class="{ 'theme-card-active': formData.achievement_theme_id === theme.id }"
+						@tap="formData.achievement_theme_id = theme.id"
+					>
+						<view class="theme-header">
+							<text class="theme-icon">{{ theme.icon }}</text>
+							<text class="theme-name">{{ theme.name }}</text>
+						</view>
+						<view class="theme-levels">
+							<text
+								v-for="(level, idx) in theme.levels"
+								:key="level.id"
+								class="theme-level"
+							>{{ level.name }}<text v-if="idx < theme.levels.length - 1" class="theme-arrow"> → </text></text>
+						</view>
+					</view>
+				</view>
+			</view>
+
 			<view class="bottom-space"></view>
 		</scroll-view>

@@ -123,6 +157,7 @@ import { onShareAppMessage } from '@dcloudio/uni-app'
 import { useProfileStore } from '@/stores/profile'
 import { useUserStore } from '@/stores/user'
 import { useLogin } from '@/hooks/useLogin'
+import * as api from '@/api'

 const profileStore = useProfileStore()
 const userStore = useUserStore()
@@ -130,12 +165,18 @@ const { waitForLogin } = useLogin()

 const navBarHeight = ref(0)
 const modeSaving = ref(false)
+const achievementThemes = ref([])

 const modeOptions = [
-	{ value: 'quit', label: '戒烟打卡', desc: '按天打卡，坚持戒烟', icon: '🌿' },
-	{ value: 'record', label: '记录抽烟', desc: '按支数记录变化趋势', icon: '📊' }
+	{ value: 'quit', label: '戒烟打卡', desc: '按天打卡，坚持戒烟' },
+	{ value: 'record', label: '记录抽烟', desc: '按支数记录变化趋势' }
 ]

+function todayStr() {
+	const d = new Date()
+	return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
+}
+
 const formData = ref({
 	mode: 'record',
 	baseline_cigs_per_day: 10,
@@ -144,7 +185,9 @@ const formData = ref({
 	smoke_motivations: [],
 	wake_up_time: '07:30',
 	sleep_time: '23:00',
-	pack_price_cent: 2500
+	pack_price_cent: 2500,
+	quit_date: todayStr(),
+	achievement_theme_id: null
 })

 const priceYuan = ref('25')
@@ -201,6 +244,10 @@ async function selectMode(mode) {
 	}
 }

+function onQuitDateChange(e) {
+	formData.value.quit_date = e.detail.value
+}
+
 function onWakeTimeChange(e) {
 	formData.value.wake_up_time = e.detail.value
 }
@@ -238,6 +285,17 @@ onMounted(async () => {
 	}

 	await waitForLogin()
+
+	try {
+		const res = await api.getAchievementThemes()
+		achievementThemes.value = res.data?.themes || []
+		if (achievementThemes.value.length > 0 && !formData.value.achievement_theme_id) {
+			formData.value.achievement_theme_id = achievementThemes.value[0].id
+		}
+	} catch (e) {
+		console.error('loadAchievementThemes error:', e)
+	}
+
 	try {
 		const profileData = await profileStore.fetchProfile()
 		if (profileData?.profile) {
@@ -253,7 +311,9 @@ onMounted(async () => {
 				smoke_motivations: Array.isArray(profile.smoke_motivations) ? profile.smoke_motivations : formData.value.smoke_motivations,
 				wake_up_time: profile.wake_up_time || formData.value.wake_up_time,
 				sleep_time: profile.sleep_time || formData.value.sleep_time,
-				pack_price_cent: profile.pack_price_cent || formData.value.pack_price_cent
+				pack_price_cent: profile.pack_price_cent || formData.value.pack_price_cent,
+				quit_date: profile.quit_date ? profile.quit_date.split('T')[0] : formData.value.quit_date,
+				achievement_theme_id: profile.achievement_theme_id || formData.value.achievement_theme_id
 			}
 			if (profile.pack_price_cent) {
 				priceYuan.value = String((profile.pack_price_cent / 100).toFixed(2)).replace(/\.00$/, '')
@@ -275,56 +335,58 @@ onShareAppMessage(() => {
 </script>

 <style scoped>
-/* ── 页面基础 ── */
 .page {
 	min-height: 100vh;
-	background: linear-gradient(180deg, #E6F7F2 0%, #F0FBF7 40%, #FAFFFE 100%);
+	background-color: #F5F7F6;
 	display: flex;
 	flex-direction: column;
+	box-sizing: border-box;
+	overflow-x: hidden;
+	width: 100%;
 }

 .nav-area {
 	padding: 20rpx 32rpx 16rpx;
-	background: transparent;
+	background: linear-gradient(180deg, #DDF3EB 0%, #F5F7F6 100%);
+	box-sizing: border-box;
 }

 .nav-title {
 	display: block;
 	font-size: 38rpx;
 	font-weight: 700;
-	color: #0D3D2E;
+	color: #1A1A1A;
 }

 .nav-subtitle {
 	display: block;
 	margin-top: 6rpx;
 	font-size: 24rpx;
-	color: #52806E;
+	color: #999999;
 }

-/* ── 滚动区 ── */
 .content {
 	flex: 1;
-	padding: 0 28rpx;
+	padding: 0 32rpx;
+	box-sizing: border-box;
+	width: 100%;
 }

-/* ── 卡片式表单区块 ── */
 .form-section {
 	margin-bottom: 20rpx;
-	background: rgba(255, 255, 255, 0.88);
-	border-radius: 24rpx;
-	border: 1.5rpx solid rgba(52, 200, 160, 0.14);
-	box-shadow: 0 4rpx 18rpx rgba(52, 200, 160, 0.07);
+	background: #FFFFFF;
+	border-radius: 32rpx;
 	padding: 28rpx 24rpx;
+	box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.03);
+	box-sizing: border-box;
 }

 .section-label {
 	display: block;
 	margin-bottom: 18rpx;
-	font-size: 26rpx;
+	font-size: 28rpx;
 	font-weight: 600;
-	color: #1a5c45;
-	letter-spacing: 0.4rpx;
+	color: #666666;
 }

 .section-row {
@@ -333,58 +395,54 @@ onShareAppMessage(() => {
 	align-items: center;
 }

-/* ── 模式选择 ── */
+.section-row .section-label {
+	margin-bottom: 0;
+}
+
 .mode-switch {
-	display: grid;
-	grid-template-columns: repeat(2, minmax(0, 1fr));
+	display: flex;
 	gap: 16rpx;
 }

 .mode-switch-item {
-	padding: 28rpx 20rpx;
+	flex: 1;
+	padding: 24rpx 20rpx;
 	border-radius: 20rpx;
-	background: rgba(255, 255, 255, 0.72);
-	border: 2rpx solid rgba(52, 200, 160, 0.1);
-	box-shadow: 0 2rpx 10rpx rgba(52, 200, 160, 0.04);
+	background: #F9FBFA;
+	border: 2rpx solid #F0F0F0;
 	transition: all 0.2s;
+	text-align: center;
+	box-sizing: border-box;
 }

 .mode-switch-item-active {
-	background: rgba(52, 200, 160, 0.09);
-	border-color: rgba(52, 200, 160, 0.45);
-	box-shadow: 0 4rpx 16rpx rgba(52, 200, 160, 0.14);
-}
-
-.mode-switch-icon {
-	display: block;
-	font-size: 40rpx;
-	margin-bottom: 10rpx;
+	background: #E8F5F0;
+	border-color: #10B981;
 }

 .mode-switch-title {
 	display: block;
 	font-size: 28rpx;
 	font-weight: 700;
-	color: #0D3D2E;
+	color: #1A1A1A;
 }

 .mode-switch-item-active .mode-switch-title {
-	color: #1a8c62;
+	color: #10B981;
 }

 .mode-switch-desc {
 	display: block;
 	margin-top: 6rpx;
-	font-size: 21rpx;
+	font-size: 22rpx;
 	line-height: 1.5;
-	color: #7aA898;
+	color: #999999;
 }

 .mode-switch-item-active .mode-switch-desc {
-	color: #3a9e78;
+	color: #10B981;
 }

-/* ── 数字步进器 ── */
 .inline-input {
 	display: flex;
 	align-items: center;
@@ -395,41 +453,38 @@ onShareAppMessage(() => {
 	width: 60rpx;
 	height: 60rpx;
 	border-radius: 50%;
-	background: rgba(52, 200, 160, 0.1);
+	background: #E8F5F0;
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	font-size: 38rpx;
-	color: #34C8A0;
-	border: 1.5rpx solid rgba(52, 200, 160, 0.25);
+	color: #10B981;
 }

 .inline-value {
 	font-size: 38rpx;
 	font-weight: 700;
-	color: #0D3D2E;
+	color: #1A1A1A;
 	min-width: 52rpx;
 	text-align: center;
 }

 .inline-unit {
 	font-size: 24rpx;
-	color: #7aA898;
+	color: #999999;
 }

 .inline-field {
 	width: 100rpx;
 	font-size: 32rpx;
 	font-weight: 600;
-	color: #0D3D2E;
+	color: #1A1A1A;
 	text-align: center;
-	background: rgba(52, 200, 160, 0.06);
+	background: #F5F7F6;
 	padding: 10rpx 14rpx;
 	border-radius: 12rpx;
-	border: 1.5rpx solid rgba(52, 200, 160, 0.2);
 }

-/* ── 标签选择 ── */
 .options-row {
 	display: flex;
 	flex-wrap: wrap;
@@ -439,20 +494,17 @@ onShareAppMessage(() => {
 .option-tag {
 	padding: 14rpx 26rpx;
 	border-radius: 999rpx;
-	background: rgba(255, 255, 255, 0.9);
-	font-size: 25rpx;
-	color: #4a7a66;
-	border: 1.5rpx solid rgba(52, 200, 160, 0.18);
+	background: #F5F5F5;
+	font-size: 26rpx;
+	color: #666666;
 }

 .option-tag-active {
-	background: rgba(52, 200, 160, 0.12);
-	border-color: rgba(52, 200, 160, 0.45);
-	color: #1a7f61;
+	background: #E8F5F0;
+	color: #10B981;
 	font-weight: 600;
 }

-/* ── 作息时间 ── */
 .time-row {
 	display: flex;
 	gap: 20rpx;
@@ -464,23 +516,91 @@ onShareAppMessage(() => {

 .time-label {
 	font-size: 22rpx;
-	color: #7aA898;
+	color: #999999;
 	display: block;
 	margin-bottom: 8rpx;
 }

 .time-picker {
-	background: rgba(52, 200, 160, 0.06);
+	background: #F5F7F6;
 	padding: 18rpx 20rpx;
-	border-radius: 14rpx;
+	border-radius: 16rpx;
 	font-size: 30rpx;
 	font-weight: 600;
-	color: #0D3D2E;
+	color: #1A1A1A;
 	text-align: center;
-	border: 1.5rpx solid rgba(52, 200, 160, 0.2);
 }

-/* ── 底部空白 + 按钮 ── */
+.section-hint {
+	display: block;
+	font-size: 22rpx;
+	color: #999999;
+	margin-top: -10rpx;
+	margin-bottom: 16rpx;
+}
+
+.theme-list {
+	display: flex;
+	flex-direction: column;
+	gap: 12rpx;
+}
+
+.theme-card {
+	padding: 20rpx;
+	border-radius: 20rpx;
+	background: #F9FBFA;
+	border: 2rpx solid #F0F0F0;
+	box-sizing: border-box;
+}
+
+.theme-card-active {
+	background: #E8F5F0;
+	border-color: #10B981;
+}
+
+.theme-header {
+	display: flex;
+	align-items: center;
+	gap: 10rpx;
+	margin-bottom: 10rpx;
+}
+
+.theme-icon {
+	font-size: 32rpx;
+}
+
+.theme-name {
+	font-size: 28rpx;
+	font-weight: 700;
+	color: #1A1A1A;
+}
+
+.theme-card-active .theme-name {
+	color: #10B981;
+}
+
+.theme-levels {
+	font-size: 22rpx;
+	color: #999999;
+	line-height: 1.6;
+}
+
+.theme-level {
+	font-size: 22rpx;
+}
+
+.theme-card-active .theme-level {
+	color: #10B981;
+}
+
+.theme-arrow {
+	color: #CCCCCC;
+}
+
+.theme-card-active .theme-arrow {
+	color: #6EE7B7;
+}
+
 .bottom-space {
 	height: 160rpx;
 }
@@ -490,19 +610,19 @@ onShareAppMessage(() => {
 	left: 0;
 	right: 0;
 	bottom: 0;
-	padding: 20rpx 28rpx;
+	padding: 20rpx 32rpx;
 	padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
-	background: linear-gradient(180deg, transparent 0%, rgba(240, 251, 247, 0.97) 35%);
+	background: linear-gradient(180deg, transparent 0%, rgba(245, 247, 246, 0.97) 35%);
 }

 .btn-primary {
 	height: 96rpx;
-	background: linear-gradient(180deg, #3DD9AE 0%, #34C8A0 100%);
+	background: #10B981;
 	border-radius: 48rpx;
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	box-shadow: 0 12rpx 28rpx rgba(52, 200, 160, 0.28);
+	box-shadow: 0 8rpx 24rpx rgba(16, 185, 129, 0.25);
 }

 .btn-text {
@@ -6,10 +6,28 @@
 		<view class="section">
 			<text class="section-label">当前账号</text>
 			<view class="user-section card">
+				<!-- #ifdef MP-WEIXIN -->
+				<button class="avatar-btn" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
 					<image class="avatar" :src="userAvatar" mode="aspectFill"></image>
+				</button>
+				<!-- #endif -->
+				<!-- #ifdef H5 -->
+				<image class="avatar" :src="userAvatar" mode="aspectFill" @tap="onChooseAvatarH5"></image>
+				<!-- #endif -->
 				<view class="user-copy">
+					<!-- #ifdef MP-WEIXIN -->
+					<input
+						type="nickname"
+						class="nickname-input"
+						:value="userStore.user?.nickname || ''"
+						placeholder="点击设置昵称"
+						@blur="onNicknameChange"
+					/>
+					<!-- #endif -->
+					<!-- #ifdef H5 -->
 					<text class="user-name">{{ userName }}</text>
-					<text class="user-desc">已连接戒烟记录与统计数据</text>
+					<!-- #endif -->
+					<text class="user-desc">点击头像或昵称可修改</text>
 					<view class="user-meta">
 						<text class="user-pill">{{ modeText }}</text>
 						<text class="user-pill user-pill-muted">{{ shareToken ? '分享已启用' : '分享未生成' }}</text>
@@ -184,6 +202,63 @@ function previewSharePage() {
 	})
 }

+async function onChooseAvatar(e) {
+	const avatarUrl = e.detail.avatarUrl
+	if (!avatarUrl) return
+	try {
+		uni.showLoading({ title: '上传头像...' })
+		const uploadRes = await api.uploadFile(avatarUrl)
+		await doUpdateProfile({ avatar_url: uploadRes.url })
+	} catch (err) {
+		console.error('头像上传失败:', err)
+		uni.showToast({ title: '头像更新失败', icon: 'none' })
+	} finally {
+		uni.hideLoading()
+	}
+}
+
+function onChooseAvatarH5() {
+	uni.chooseImage({
+		count: 1,
+		sizeType: ['compressed'],
+		sourceType: ['album'],
+		success: async (res) => {
+			const tempPath = res.tempFilePaths[0]
+			try {
+				uni.showLoading({ title: '上传头像...' })
+				const uploadRes = await api.uploadFile(tempPath)
+				await doUpdateProfile({ avatar_url: uploadRes.url })
+			} catch (err) {
+				console.error('头像上传失败:', err)
+				uni.showToast({ title: '头像更新失败', icon: 'none' })
+			} finally {
+				uni.hideLoading()
+			}
+		}
+	})
+}
+
+async function onNicknameChange(e) {
+	const nickname = (e.detail.value || '').trim()
+	if (!nickname || nickname === userStore.user?.nickname) return
+	try {
+		await doUpdateProfile({ nickname })
+	} catch (err) {
+		uni.showToast({ title: '昵称更新失败', icon: 'none' })
+	}
+}
+
+async function doUpdateProfile(data) {
+	try {
+		const res = await api.updateProfile(data)
+		userStore.updateUser(res.data)
+		uni.showToast({ title: '修改成功', icon: 'success' })
+	} catch (e) {
+		console.error('doUpdateProfile error:', e)
+		uni.showToast({ title: '修改失败', icon: 'none' })
+	}
+}
+
 function goOnboarding() {
 	uni.navigateTo({ url: '/pages/onboarding/index' })
 }
@@ -283,6 +358,21 @@ onShow(async () => {
 	gap: 32rpx;
 }

+.avatar-btn {
+	padding: 0;
+	margin: 0;
+	background: transparent;
+	border: none;
+	line-height: 1;
+	width: 128rpx;
+	height: 128rpx;
+	flex-shrink: 0;
+}
+
+.avatar-btn::after {
+	border: none;
+}
+
 .avatar {
 	width: 128rpx;
 	height: 128rpx;
@@ -298,6 +388,18 @@ onShow(async () => {
 	align-items: flex-start;
 }

+.nickname-input {
+	font-size: 38rpx;
+	font-weight: 700;
+	color: #1A1A1A;
+	background: transparent;
+	border: none;
+	padding: 0;
+	height: 56rpx;
+	line-height: 56rpx;
+	width: 100%;
+}
+
 .user-name {
 	font-size: 38rpx;
 	font-weight: 700;
@@ -288,91 +288,43 @@ function addDays(date, offset) {
 <style scoped>
 .page {
 	min-height: 100vh;
-	background: linear-gradient(180deg, #F6F8F6 0%, #EFF4F1 52%, #E9F0EC 100%);
-	padding: 20rpx;
+	background-color: #F5F7F6;
+	padding: 24rpx 32rpx;
 	box-sizing: border-box;
 }

-.page-header {
-	margin-bottom: 18rpx;
-}
-
-.page-eyebrow {
-	display: inline-flex;
-	align-items: center;
-	padding: 8rpx 18rpx;
-	border-radius: 999rpx;
-	background: rgba(255, 255, 255, 0.68);
-	border: 1rpx solid rgba(255, 255, 255, 0.72);
-	font-size: 20rpx;
-	font-weight: 600;
-	color: #6b7280;
-	margin-bottom: 16rpx;
-}
-
-.page-subtitle {
-	display: block;
-	margin-top: 2rpx;
-	font-size: 24rpx;
-	line-height: 1.5;
-	color: #52806E;
-}
-
 .card {
-	position: relative;
-	overflow: hidden;
-	background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(251, 253, 252, 0.94) 100%);
-	-webkit-backdrop-filter: blur(20px);
-	backdrop-filter: blur(20px);
+	background: #FFFFFF;
 	border-radius: 32rpx;
-	padding: 22rpx;
+	padding: 28rpx 24rpx;
 	margin-bottom: 16rpx;
-	border: 1rpx solid rgba(15, 23, 42, 0.06);
-	box-shadow:
-		0 20rpx 44rpx rgba(15, 23, 42, 0.06),
-		0 6rpx 14rpx rgba(15, 23, 42, 0.03),
-		inset 0 1rpx 0 rgba(255, 255, 255, 0.88);
-}
-
-.card::before {
-	content: '';
-	position: absolute;
-	width: 240rpx;
-	height: 240rpx;
-	left: -72rpx;
-	top: -72rpx;
-	border-radius: 50%;
-	background: radial-gradient(circle, rgba(52, 200, 160, 0.14) 0%, rgba(52, 200, 160, 0) 72%);
-	pointer-events: none;
+	box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.03);
+	box-sizing: border-box;
 }

 .month-bar {
-	position: relative;
-	z-index: 1;
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
 	gap: 16rpx;
-	margin-bottom: 16rpx;
+	margin-bottom: 20rpx;
 }

 .month-arrow {
-	width: 64rpx;
-	height: 64rpx;
-	border-radius: 18rpx;
+	width: 56rpx;
+	height: 56rpx;
+	border-radius: 50%;
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	background: linear-gradient(180deg, #ffffff 0%, #f7faf8 100%);
-	border: 2rpx solid rgba(15, 23, 42, 0.06);
-	box-shadow: 0 14rpx 28rpx rgba(15, 23, 42, 0.07);
-	font-size: 40rpx;
-	color: #1a8c62;
+	background: #F5F7F6;
+	font-size: 36rpx;
+	color: #1A1A1A;
+	flex-shrink: 0;
 }

 .month-arrow-disabled {
-	opacity: 0.4;
-	box-shadow: none;
+	opacity: 0.3;
 }

 .month-copy {
@@ -382,76 +334,69 @@ function addDays(date, offset) {

 .month-title {
 	display: block;
-	font-size: 30rpx;
-	font-weight: 800;
-	color: #111827;
+	font-size: 32rpx;
+	font-weight: 700;
+	color: #1A1A1A;
 }

 .month-subtitle {
 	display: block;
-	margin-top: 6rpx;
+	margin-top: 4rpx;
 	font-size: 22rpx;
-	color: #6b7280;
+	color: #999999;
 }

 .summary-row {
-	position: relative;
-	z-index: 1;
-	display: grid;
-	grid-template-columns: repeat(3, minmax(0, 1fr));
+	display: flex;
 	gap: 12rpx;
-	margin-bottom: 14rpx;
+	margin-bottom: 20rpx;
 }

 .summary-chip {
+	flex: 1;
 	padding: 16rpx 14rpx;
-	border-radius: 22rpx;
-	background: linear-gradient(180deg, rgba(240, 252, 248, 0.96) 0%, rgba(247, 251, 249, 0.96) 100%);
-	border: 1rpx solid rgba(15, 23, 42, 0.05);
-	box-shadow: inset 0 1rpx 0 rgba(255, 255, 255, 0.9);
+	border-radius: 16rpx;
+	background: #F5F7F6;
 }

 .summary-chip-soft {
-	background: linear-gradient(180deg, #fbfcfc 0%, #f7faf8 100%);
+	background: #F5F7F6;
 }

 .summary-chip-label {
 	display: block;
 	font-size: 20rpx;
-	color: #7aA898;
+	color: #999999;
 }

 .summary-chip-value-row {
 	display: flex;
 	align-items: baseline;
-	gap: 6rpx;
+	gap: 4rpx;
 	margin-top: 8rpx;
 }

 .summary-chip-value {
-	font-size: 34rpx;
+	font-size: 36rpx;
 	font-weight: 800;
 	line-height: 1;
-	color: #111827;
+	color: #1A1A1A;
 }

 .summary-chip-unit {
 	font-size: 20rpx;
-	color: #6b7280;
+	color: #999999;
 }

 .calendar-legend {
-	position: relative;
-	z-index: 1;
 	display: flex;
 	align-items: center;
 	flex-wrap: wrap;
-	gap: 14rpx;
-	margin-bottom: 14rpx;
-	padding: 12rpx 14rpx;
+	gap: 16rpx;
+	margin-bottom: 20rpx;
+	padding: 14rpx 16rpx;
 	border-radius: 16rpx;
-	background: linear-gradient(180deg, #fafcfb 0%, #f5f8f6 100%);
-	border: 1rpx solid rgba(15, 23, 42, 0.05);
+	background: #F9FBFA;
 }

 .legend-item {
@@ -467,124 +412,107 @@ function addDays(date, offset) {
 }

 .legend-dot-smoke {
-	background: #1a8c62;
+	background: #10B981;
 }

 .legend-dot-resisted {
-	background: #a7d9c6;
+	background: #A7F3D0;
 }

 .legend-text {
-	font-size: 21rpx;
-	color: #4b5563;
+	font-size: 22rpx;
+	color: #666666;
 }

 .legend-tip {
 	margin-left: auto;
 	font-size: 20rpx;
-	color: #9ca3af;
+	color: #CCCCCC;
 }

 .weekday-row {
-	position: relative;
-	z-index: 1;
 	display: grid;
-	grid-template-columns: repeat(7, minmax(0, 1fr));
-	margin-bottom: 12rpx;
-	padding: 0 4rpx;
+	grid-template-columns: repeat(7, 1fr);
+	margin-bottom: 8rpx;
 }

 .weekday-item {
 	text-align: center;
 	font-size: 22rpx;
 	font-weight: 600;
-	color: #7aA898;
+	color: #999999;
 }

 .calendar-grid {
-	position: relative;
-	z-index: 1;
 	display: grid;
-	grid-template-columns: repeat(7, minmax(0, 1fr));
-	gap: 10rpx;
+	grid-template-columns: repeat(7, 1fr);
+	gap: 8rpx;
 }

 .calendar-cell {
-	min-height: 138rpx;
-	padding: 14rpx 10rpx 12rpx;
-	border-radius: 22rpx;
-	background: linear-gradient(180deg, #ffffff 0%, #f7faf8 100%);
-	border: 1rpx solid rgba(15, 23, 42, 0.05);
+	aspect-ratio: 1 / 1.15;
+	padding: 10rpx 6rpx 8rpx;
+	border-radius: 16rpx;
+	background: #F9FBFA;
 	display: flex;
 	flex-direction: column;
-	gap: 8rpx;
-	box-shadow:
-		inset 0 1rpx 0 rgba(255, 255, 255, 0.92),
-		0 8rpx 18rpx rgba(15, 23, 42, 0.04);
+	justify-content: space-between;
+	box-sizing: border-box;
 }

 .calendar-cell-selected {
-	background: linear-gradient(180deg, rgba(240, 252, 248, 0.98) 0%, rgba(247, 252, 249, 0.96) 100%);
-	border-color: rgba(52, 200, 160, 0.24);
-	box-shadow:
-		inset 0 1rpx 0 rgba(255, 255, 255, 0.96),
-		0 12rpx 22rpx rgba(29, 163, 111, 0.08);
+	background: #E8F5F0;
+	border: 2rpx solid #10B981;
 }

 .calendar-cell-today {
-	box-shadow:
-		inset 0 0 0 2rpx rgba(26, 140, 98, 0.16),
-		0 10rpx 20rpx rgba(15, 23, 42, 0.04);
+	background: #E8F5F0;
 }

 .calendar-cell-muted {
-	opacity: 0.42;
-	box-shadow: none;
+	opacity: 0.35;
 }

 .calendar-cell-disabled {
-	opacity: 0.3;
-	box-shadow: none;
+	opacity: 0.25;
 }

 .calendar-cell-top {
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
-	gap: 8rpx;
 }

 .calendar-day {
-	font-size: 24rpx;
+	font-size: 22rpx;
 	font-weight: 700;
-	color: #123329;
+	color: #1A1A1A;
 }

 .calendar-today-dot {
-	width: 12rpx;
-	height: 12rpx;
+	width: 10rpx;
+	height: 10rpx;
 	border-radius: 50%;
-	color: #1a8c62;
-	background: #1a8c62;
+	background: #10B981;
 }

 .calendar-count-wrap {
 	display: flex;
 	align-items: baseline;
-	gap: 4rpx;
+	gap: 2rpx;
 }

 .calendar-count-value {
-	font-size: 34rpx;
+	font-size: 28rpx;
 	line-height: 1;
 	font-weight: 800;
-	color: #14936d;
+	color: #10B981;
 }

 .calendar-count-unit {
-	font-size: 18rpx;
+	font-size: 16rpx;
 	font-weight: 600;
-	color: #6b7280;
+	color: #999999;
 }

 .bottom-safe {
@@ -283,6 +283,12 @@ const weeklyTrendItems = computed(() => {
 	})
 })

+function safeNumber(value) {
+	if (value === undefined || value === null || value === '') return 0
+	const num = Number(value)
+	return Number.isNaN(num) ? 0 : num
+}
+
 function calDotClass(count) {
 	if (count === 0) return 'cal-dot-zero'
 	if (count <= 3) return 'cal-dot-low'
@@ -290,10 +296,15 @@ function calDotClass(count) {
 	return 'cal-dot-high'
 }

-const savedMoneyText = computed(() => {
+const savedMoneyCent = computed(() => {
 	const money = statsData.value?.money
-	if (!money || !money.available) return '--'
-	return `¥${(money.saved_cent / 100).toFixed(2)}`
+	if (!money || !money.available) return 0
+	return safeNumber(money.saved_cent)
+})
+
+const savedMoneyText = computed(() => {
+	if (!moneyAvailable.value) return '--'
+	return `¥${(savedMoneyCent.value / 100).toFixed(2)}`
 })

 const moneyAvailable = computed(() => !!statsData.value?.money?.available)
@@ -301,13 +312,13 @@ const moneyAvailable = computed(() => !!statsData.value?.money?.available)
 const moneyExpectedTotal = computed(() => {
 	const money = statsData.value?.money
 	if (!money || !money.available) return 0
-	return Number(money.expected_total) || 0
+	return safeNumber(money.expected_total)
 })

 const moneyActualTotal = computed(() => {
 	const money = statsData.value?.money
 	if (!money || !money.available) return 0
-	return Number(money.actual_total) || 0
+	return safeNumber(money.actual_total)
 })

 const moneySubtitle = computed(() => {
@@ -318,16 +329,17 @@ const moneySubtitle = computed(() => {
 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 expectedTotal = safeNumber(money.expected_total)
+	const packPriceCent = safeNumber(money.pack_price_cent)
+	const cigsPerPack = safeNumber(money.cigs_per_pack)
+	if (expectedTotal <= 0 || packPriceCent <= 0 || cigsPerPack <= 0) return 0
+	return Math.round((expectedTotal / cigsPerPack) * packPriceCent)
 })

 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)
+	if (!moneyAvailable.value || target <= 0) return 0
+	const percent = Math.round((savedMoneyCent.value / target) * 100)
 	return Math.min(Math.max(percent, 0), 100)
 })

@@ -486,10 +498,17 @@ onShareAppMessage(() => {

 /* ── Tab 切换 ── */
 .segment-wrap {
-	padding: 8rpx 0 20rpx;
+	position: relative;
+	height: 148rpx;
+	flex-shrink: 0;
+	z-index: 20;
 }

 .segment {
+	position: fixed;
+	left: 28rpx;
+	right: 28rpx;
+	z-index: 50;
 	display: flex;
 	background: rgba(255, 255, 255, 0.82);
 	padding: 6rpx;
@@ -497,6 +516,18 @@ onShareAppMessage(() => {
 	gap: 6rpx;
 	border: 1.5rpx solid rgba(52, 200, 160, 0.14);
 	box-shadow: 0 4rpx 16rpx rgba(52, 200, 160, 0.07);
+	-webkit-backdrop-filter: blur(12px);
+	backdrop-filter: blur(12px);
+}
+
+.segment::before {
+	content: '';
+	position: absolute;
+	inset: -12rpx -8rpx -10rpx;
+	border-radius: 34rpx;
+	background: linear-gradient(180deg, rgba(230, 247, 242, 0.96) 0%, rgba(240, 251, 247, 0.88) 72%, rgba(240, 251, 247, 0) 100%);
+	z-index: -1;
+	pointer-events: none;
 }

 .segment-item {
@@ -23,6 +23,11 @@ export const useUserStore = defineStore('user', {
 			storage.set(USER_MODE_KEY, mode)
 		},

+		updateUser(fields) {
+			this.user = { ...this.user, ...fields }
+			storage.set(USER_KEY, this.user)
+		},
+
 		logout() {
 			this.user = null
 			this.sessionKey = null
@@ -11,7 +11,8 @@ export default defineConfig({
    proxy: {
      '/api/v1': {
        // target: 'http://localhost:8080',
-        target: 'http://nas.quitsmok.top:8300',
+        target: 'http://192.168.31.73:8080',
+
        changeOrigin: true
      }
    }
Author	SHA1	Message	Date
nepiedg	14c0d4752d	feat: 梦想清单页与戒烟相关 API - 梦想清单：系统导航栏、浮动添加、图标来自后台预设 - dream-presets API、pages.json 导航样式 Made-with: Cursor	2026-04-04 14:55:58 +08:00
nepiedg	4066bd31fa	feat: enhance user profile and achievement features - Add functionality for users to update their profile picture and nickname - Implement achievement theme selection in onboarding - Update API integration for profile updates and achievement themes - Refine UI elements for better user interaction and experience	2026-04-04 14:22:22 +08:00
nepiedg	3cea0dca0d	fix: align floating tabs on logs and stats	2026-04-02 01:13:33 +08:00
nepiedg	a7f532fe41	fix: polish logs filter and stats money display	2026-04-02 00:39:56 +08:00