feat(nsti): add nicotine personality test flow (#36)

* fix: polish logs filter and stats money display

* fix: align floating tabs on logs and stats

* 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

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

- 梦想清单：系统导航栏、浮动添加、图标来自后台预设
- dream-presets API、pages.json 导航样式

Made-with: Cursor

* feat(nsti): add nicotine personality test flow

src/pages/onboarding/index.vue

@@ -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">
@@ -98,14 +105,41 @@
 							type="digit"
 							v-model="priceYuan"
 							class="inline-field"
-							placeholder="25"
-							placeholder-style="color: #9CC5B5"
+						placeholder="25"
+						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 {