Remove outdated UI components and screens for activity history, AI quit assistant, home dashboard, profile & settings, and smoking statistics. Update API to include a new endpoint for home dashboard data retrieval. Enhance smoke record dialog with improved layout and styling adjustments.

pages/index/index.vue

@@ -16,8 +16,8 @@
 				<view class="user-info">
 					<image class="avatar" :src="userAvatar" mode="aspectFill"></image>
 					<view class="greeting">
-						<text class="greeting-text">{{ greeting }}，{{ userName }}</text>
-						<text class="greeting-sub">保持连胜纪录！🔥</text>
+						<text class="greeting-text">{{ greetingTitle }}</text>
+						<text class="greeting-sub">{{ greetingSubtitle }}</text>
 					</view>
 				</view>
 				<view class="settings-btn" @tap="goSettings">
@@ -25,10 +25,10 @@
 				</view>
 			</view>
 
-			<view v-if="showAiTip" class="ai-tip">
+			<view v-if="shouldShowAiTip" class="ai-tip">
 				<view class="ai-tip-icon">🤖</view>
 				<view class="ai-tip-content">
-					<text class="ai-tip-title">发现规律</text>
+					<text class="ai-tip-title">{{ aiTipTitle }}</text>
 					<text class="ai-tip-desc">{{ aiTipText }}</text>
 				</view>
 				<view class="ai-tip-close" @tap="closeAiTip">×</view>
@@ -55,7 +55,7 @@
 					<view class="stat-value-row">
 						<text class="stat-value">{{ todayCount }}</text>
 						<text class="stat-target">/ {{ dailyTarget }}</text>
-						<view class="stat-change stat-change-down">{{ changeText }}</view>
+						<view class="stat-change" :class="changeClass">{{ changeText }}</view>
 					</view>
 					<view class="stat-progress">
 						<view class="stat-progress-bar stat-progress-red" :style="{ width: progressWidth }"></view>
@@ -98,27 +98,27 @@
 
 <script setup>
 import { ref, computed, onMounted, onUnmounted } from 'vue'
-import { useDashboardStore } from '@/stores/dashboard'
 import { useProfileStore } from '@/stores/profile'
 import { useUserStore } from '@/stores/user'
 import { useLogin } from '@/hooks/useLogin'
 import * as api from '@/api'
 
-const dashboardStore = useDashboardStore()
 const profileStore = useProfileStore()
 const userStore = useUserStore()
 const { waitForLogin } = useLogin()
 
 const loading = ref(true)
 const showAiTip = ref(true)
-const aiTipText = ref('你的烟瘾通常在下午2点达到高峰。我们为你准备了一个快速呼吸练习。')
-const resistedCount = ref(5)
 const statusBarHeight = ref(0)
 const showDialog = ref(false)
 const dialogType = ref('smoke') // 'smoke' 或 'resisted'
+const homeData = ref(null)
 
 let timerInterval = null
 const timerSeconds = ref(0)
+const timerBaseSeconds = ref(-1)
+
+const aiTipFallback = '你的烟瘾通常在下午2点达到高峰。我们为你准备了一个快速呼吸练习。'
 
 const greeting = computed(() => {
 	const hour = new Date().getHours()
@@ -130,18 +130,50 @@ const greeting = computed(() => {
 })
 
 const userName = computed(() => {
-	return userStore.user?.nickname || 'Alex'
+	return homeData.value?.greeting?.nickname || userStore.user?.nickname || 'Alex'
 })
 
 const userAvatar = computed(() => {
-	return userStore.user?.avatar_url || '/static/images/default-avatar.png'
+	return homeData.value?.greeting?.avatar_url || userStore.user?.avatar_url || '/static/images/default-avatar.png'
 })
 
-const todayCount = computed(() => dashboardStore.todayCount || 3)
-const dailyTarget = computed(() => profileStore.profile?.baseline_cigs_per_day || 10)
+const greetingTitle = computed(() => {
+	return homeData.value?.greeting?.title || `${greeting.value}，${userName.value}`
+})
+
+const greetingSubtitle = computed(() => {
+	return homeData.value?.greeting?.subtitle || '保持连胜纪录！🔥'
+})
+
+const aiTipTitle = computed(() => {
+	return homeData.value?.advice_card?.title || '发现规律'
+})
+
+const aiTipText = computed(() => {
+	const advice = homeData.value?.advice_card
+	if (advice?.message) return advice.message
+	if (advice?.status === 'locked') return '看广告解锁 AI 建议'
+	const motivation = homeData.value?.motivation?.message
+	return motivation || aiTipFallback
+})
+
+const shouldShowAiTip = computed(() => showAiTip.value && !!aiTipText.value)
+
+const homeSummary = computed(() => homeData.value?.summary || {})
+const homeTimer = computed(() => homeData.value?.timer || {})
+
+const todayCount = computed(() => homeSummary.value.today_count ?? 0)
+const dailyTarget = computed(() => {
+	const target = homeSummary.value.daily_target
+	if (target !== undefined && target !== null) return target
+	return profileStore.profile?.baseline_cigs_per_day || 0
+})
+const resistedCount = computed(() => homeSummary.value.resisted_count ?? 0)
 
 const progressWidth = computed(() => {
-	const percent = Math.min((todayCount.value / dailyTarget.value) * 100, 100)
+	const target = dailyTarget.value
+	if (!target) return '0%'
+	const percent = Math.min((todayCount.value / target) * 100, 100)
 	return `${percent}%`
 })
 
@@ -151,12 +183,21 @@ const resistedProgressWidth = computed(() => {
 })
 
 const changeText = computed(() => {
-	return '较昨日 -2'
+	const reduced = homeSummary.value.reduced_from_yesterday
+	if (reduced === undefined || reduced === null) return '较昨日 --'
+	if (reduced === 0) return '较昨日 0'
+	return homeSummary.value.exceeded_yesterday ? `较昨日 +${reduced}` : `较昨日 -${reduced}`
+})
+
+const changeClass = computed(() => {
+	return homeSummary.value.exceeded_yesterday ? 'stat-change-up' : 'stat-change-down'
 })
 
 const timerDisplay = computed(() => {
-	const baseMinutes = dashboardStore.minutesSinceLast ?? 165
-	const totalSeconds = baseMinutes * 60 + timerSeconds.value
+	if (timerBaseSeconds.value < 0) {
+		return '--:--:--'
+	}
+	const totalSeconds = timerBaseSeconds.value + timerSeconds.value
 	const hours = Math.floor(totalSeconds / 3600)
 	const minutes = Math.floor((totalSeconds % 3600) / 60)
 	const seconds = totalSeconds % 60
@@ -168,11 +209,16 @@ const timerGradient = computed(() => {
 })
 
 const nextSmokeTimeText = computed(() => {
-	if (dashboardStore.nextSmokeTime?.suggested_at) {
-		const date = new Date(dashboardStore.nextSmokeTime.suggested_at)
-		return `${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`
+	const timer = homeTimer.value
+	if (!timer) return ''
+	if (timer.next_suggested_clock) return timer.next_suggested_clock
+	if (timer.next_suggested_at) {
+		const date = new Date(timer.next_suggested_at)
+		if (!isNaN(date.getTime())) {
+			return `${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`
+		}
 	}
-	return '16:30'
+	return ''
 })
 
 const dialogTitle = computed(() => {
@@ -180,6 +226,10 @@ const dialogTitle = computed(() => {
 })
 
 function startTimer() {
+	stopTimer()
+	if (timerBaseSeconds.value < 0) {
+		return
+	}
 	timerInterval = setInterval(() => {
 		timerSeconds.value++
 	}, 1000)
@@ -202,29 +252,48 @@ function openResistedDialog() {
 	showDialog.value = true
 }
 
+function applyHomeData(data) {
+	homeData.value = data
+	const seconds = data?.timer?.seconds_since_last
+	timerBaseSeconds.value = typeof seconds === 'number' ? seconds : -1
+	timerSeconds.value = 0
+	startTimer()
+}
+
+async function fetchHomeData() {
+	const res = await api.getHome()
+	const data = res.data || {}
+	applyHomeData(data)
+	return data
+}
+
 async function handleSubmit(submitData) {
 	try {
 		if (dialogType.value === 'smoke') {
 			await api.createLog(submitData)
-			dashboardStore.resetTimer()
+			timerBaseSeconds.value = 0
 			timerSeconds.value = 0
+			startTimer()
 			uni.showToast({ title: '记录成功', icon: 'success' })
 			try {
-				await Promise.all([
-					dashboardStore.fetchDashboard(true),
-					dashboardStore.fetchNextSmokeTime()
-				])
+				await fetchHomeData()
 			} catch (e) {
-				console.error('refreshAfterSmokeLog error:', e)
+				console.error('refreshHomeData error:', e)
 			}
 		} else {
 			await api.createResistedLog({
 				smoke_time: submitData.smoke_time,
 				smoke_at: submitData.smoke_at,
-				remark: submitData.remark
+				remark: submitData.remark,
+				level: submitData.level,
+				num: submitData.num
 			})
-			resistedCount.value++
 			uni.showToast({ title: '太棒了！', icon: 'success' })
+			try {
+				await fetchHomeData()
+			} catch (e) {
+				console.error('refreshHomeData error:', e)
+			}
 		}
 	} catch (e) {
 		console.error('handleSubmit error:', e)
@@ -242,33 +311,27 @@ async function initPage() {
 	try {
 		await waitForLogin()
 
-		const [profileRes, dashboardRes, nextTimeRes] = await Promise.all([
-			api.getProfile(),
-			api.getDashboard(),
-			api.getNextSmokeTime()
-		])
-
-		const profile = profileRes.data.profile
-		const isCompleted = profileRes.data.is_completed || 
+		const home = await fetchHomeData()
+		const profileData = home.profile || {}
+		const profile = profileData.profile
+		const isCompleted = profileData.is_completed || 
 			(profile && profile.onboarding_completed_at) ||
 			(profile && profile.baseline_cigs_per_day > 0)
 		
-		if (!profileRes.data.exists || !isCompleted) {
+		if (!profileData.exists || !isCompleted) {
 			uni.redirectTo({ url: '/pages/onboarding/index' })
 			return
 		}
 
-		profileStore.exists = profileRes.data.exists
-		profileStore.isCompleted = profileRes.data.is_completed
-		profileStore.profile = profileRes.data.profile
-
-		dashboardStore.setDashboard(dashboardRes.data)
-		dashboardStore.setNextSmokeTime(nextTimeRes.data)
-
-		startTimer()
+		profileStore.exists = !!profileData.exists
+		profileStore.isCompleted = !!isCompleted
+		profileStore.awakeMinutes = profileData.awake_minutes || 960
+		profileStore.baselineIntervalMinutes = profileData.baseline_interval_minutes || 60
+		if (profile) {
+			profileStore.profile = profile
+		}
 	} catch (e) {
 		console.error('initPage error:', e)
-		startTimer()
 	} finally {
 		loading.value = false
 	}

pages/logs/index.vue

@@ -1,15 +1,20 @@
 <template>
 	<view class="page">
 		<!-- 筛选标签 -->
-		<view class="tabs">
-			<view
-				v-for="tab in tabs"
-				:key="tab.value"
-				class="tab"
-				:class="{ 'tab-active': currentTab === tab.value }"
-				@tap="currentTab = tab.value"
-			>
-				{{ tab.label }}
+		<view class="filters">
+			<view class="tabs">
+				<view
+					v-for="tab in tabs"
+					:key="tab.value"
+					class="tab"
+					:class="{ 'tab-active': currentTab === tab.value }"
+					@tap="currentTab = tab.value"
+				>
+					{{ tab.label }}
+				</view>
+			</view>
+			<view class="filter-btn">
+				<text class="filter-icon">📅</text>
 			</view>
 		</view>
 
@@ -35,42 +40,51 @@
 			</view>
 
 			<!-- 时间轴 -->
-			<view v-else-if="filteredLogs.length > 0" class="timeline">
-				<view v-for="(group, date) in groupedLogs" :key="date" class="timeline-group">
-					<view class="timeline-date">
-						<text class="timeline-date-badge">{{ formatDate(date) }}</text>
+			<view v-else-if="filteredLogs.length > 0" class="log-list">
+				<view v-for="(group, date) in groupedLogs" :key="date" class="log-group">
+					<view class="group-header">
+						<text class="group-title">{{ formatGroupTitle(date) }}</text>
+						<text class="group-count">{{ group.length }}条记录</text>
 					</view>
 
-					<view class="timeline-items">
-						<view v-for="(log, logIndex) in group" :key="log.id" class="timeline-item">
-							<view class="timeline-line" v-if="logIndex < group.length - 1"></view>
-							<view class="timeline-dot" :class="log.type === 'resisted' ? 'dot-green' : 'dot-smoke'">
-								<text v-if="log.type === 'resisted'">💪</text>
+					<view class="group-items">
+						<view v-for="log in group" :key="log.id" class="log-card" :class="log.type === 'resisted' ? 'log-card-resisted' : 'log-card-smoke'">
+							<view class="log-bar"></view>
+							<view class="log-icon" :class="log.type === 'resisted' ? 'icon-resisted' : 'icon-smoke'">
+								<text v-if="log.type === 'resisted'">🌿</text>
 								<text v-else>🚬</text>
 							</view>
-							
-							<!-- 记录卡片 -->
-							<view class="timeline-content" :class="log.type === 'resisted' ? 'content-green' : 'content-red'">
-								<view class="log-header">
-									<text class="log-type">{{ log.type === 'resisted' ? '想抽忍住了' : '记录抽烟' }}</text>
-									<view class="log-actions">
-										<text class="action-btn edit-btn" @tap.stop="handleEdit(log)">编辑</text>
-										<text class="action-btn delete-btn" @tap.stop="handleDelete(log)">删除</text>
+							<view class="log-main">
+								<view class="log-top">
+									<view class="log-time-tag">
+										<text class="log-time">{{ log.displayTime || '--:--' }}</text>
+										<text class="log-tag" :class="log.type === 'resisted' ? 'tag-resisted' : 'tag-smoke'">
+											{{ log.type === 'resisted' ? '已忍住' : '已抽烟' }}
+										</text>
+									</view>
+									<view class="log-right">
+										<text v-if="log.type === 'smoke'" class="count-pill">{{ log.num !== undefined && log.num !== null ? log.num : 0 }}根</text>
+										<text v-else class="thumb-pill">👍</text>
 									</view>
 								</view>
 								
-								<view class="log-time-row">
-									<text class="log-time">{{ log.displayTime || '--:--' }}</text>
+								<text
+									v-if="log.remark && typeof log.remark === 'string' && log.remark.trim() && log.remark.trim().length > 0"
+									class="log-desc"
+								>{{ log.remark.trim() }}</text>
+								
+								<view class="log-meta-row">
+									<text
+										v-if="log.level !== undefined && log.level !== null"
+										class="level-text"
+										:class="levelClass(log.level)"
+									>烟瘾程度：{{ levelLabel(log.level) }}</text>
 									<text v-if="log.interval" class="log-interval">距上次 {{ log.interval }}</text>
 								</view>
-								
-								<view v-if="log.type === 'smoke'" class="log-meta">
-									<text class="meta-item">数量: {{ log.num !== undefined && log.num !== null ? log.num : 0 }} 支</text>
-									<text v-if="log.level !== undefined && log.level !== null" class="meta-item">等级: {{ log.level }}</text>
-								</view>
-								
-								<view v-if="log.remark && typeof log.remark === 'string' && log.remark.trim() && log.remark.trim().length > 0" class="log-remark">
-									<text class="remark-text">{{ log.remark.trim() }}</text>
+
+								<view class="log-actions">
+									<text class="action-btn edit-btn" @tap.stop="handleEdit(log)">编辑</text>
+									<text class="action-btn delete-btn" @tap.stop="handleDelete(log)">删除</text>
 								</view>
 							</view>
 						</view>
@@ -111,7 +125,7 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted } from 'vue'
+import { ref, computed, onMounted, watch } from 'vue'
 import { useLogsStore } from '@/stores/logs'
 import { useLogin } from '@/hooks/useLogin'
 
@@ -151,8 +165,8 @@ const groupedLogs = computed(() => {
 	}, {})
 })
 
-// 格式化日期显示
-function formatDate(dateStr) {
+// 格式化分组标题
+function formatGroupTitle(dateStr) {
 	if (!dateStr) return ''
 	
 	const date = new Date(dateStr)
@@ -164,17 +178,17 @@ function formatDate(dateStr) {
 	const yesterdayStr = yesterday.toISOString().split('T')[0]
 
 	if (dateStr === todayStr) {
-		return `今天 ${date.getMonth() + 1}月${date.getDate()}日`
+		return '今天'
 	}
 	if (dateStr === yesterdayStr) {
-		return `昨天 ${date.getMonth() + 1}月${date.getDate()}日`
+		return '昨天'
 	}
 	return `${date.getMonth() + 1}月${date.getDate()}日`
 }
 
 // 下拉刷新
 async function onRefresh() {
-	await logsStore.fetchLogs(true)
+	await logsStore.fetchLogs(true, currentTab.value)
 }
 
 // 上拉加载
@@ -232,7 +246,7 @@ function handleDelete(log) {
 async function initPage() {
 	try {
 		await waitForLogin()
-		await logsStore.fetchLogs(true)
+		await logsStore.fetchLogs(true, currentTab.value)
 	} catch (e) {
 		console.error('initPage error:', e)
 	}
@@ -241,42 +255,93 @@ async function initPage() {
 onMounted(() => {
 	initPage()
 })
+
+function levelClass(level) {
+	const value = Number(level)
+	if (Number.isNaN(value)) return 'level-unknown'
+	if (value <= 1) return 'level-1'
+	if (value === 2) return 'level-2'
+	if (value === 3) return 'level-3'
+	if (value === 4) return 'level-4'
+	return 'level-5'
+}
+
+function levelLabel(level) {
+	const value = Number(level)
+	if (Number.isNaN(value)) return '未知'
+	if (value <= 1) return '轻微'
+	if (value === 2) return '中等'
+	if (value === 3) return '明显'
+	if (value === 4) return '强烈'
+	return '极强'
+}
+
+watch(currentTab, async (value) => {
+	await logsStore.fetchLogs(true, value)
+})
 </script>
 
 <style scoped>
 .page {
 	min-height: 100vh;
-	background: linear-gradient(to bottom, #D1FAE5 0%, #F0FDF4 50%, #FFFFFF 100%);
+	background: linear-gradient(to bottom, #D1FAE5 0%, #F3FFF8 45%, #FFFFFF 100%);
 	box-sizing: border-box;
 }
 
+.filters {
+	display: flex;
+	align-items: center;
+	gap: 16rpx;
+	padding: 24rpx 32rpx 8rpx;
+}
+
 .tabs {
 	display: flex;
-	gap: 16rpx;
-	padding: 32rpx 32rpx 0;
-	margin-bottom: 24rpx;
+	flex: 1;
+	background-color: #FFFFFF;
+	border-radius: 20rpx;
+	padding: 6rpx;
+	box-shadow: 0 8rpx 20rpx rgba(16, 185, 129, 0.08);
+	border: 2rpx solid #ECFDF3;
 }
 
 .tab {
-	padding: 16rpx 32rpx;
-	border-radius: 32rpx;
-	font-size: 28rpx;
+	flex: 1;
+	text-align: center;
+	padding: 14rpx 0;
+	border-radius: 16rpx;
+	font-size: 26rpx;
 	color: #6B7280;
-	background-color: #FFFFFF;
-	border: 2rpx solid #E5E7EB;
-	transition: all 0.3s;
+	transition: all 0.2s;
+	font-weight: 600;
 }
 
 .tab-active {
 	background-color: #10B981;
-	color: #FFFFFF;
-	border-color: #10B981;
-	font-weight: 600;
+	color: #0B2F23;
+	box-shadow: 0 6rpx 16rpx rgba(16, 185, 129, 0.25);
+}
+
+.filter-btn {
+	width: 72rpx;
+	height: 72rpx;
+	border-radius: 20rpx;
+	background-color: #FFFFFF;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border: 2rpx solid #ECFDF3;
+	box-shadow: 0 6rpx 14rpx rgba(16, 185, 129, 0.1);
+}
+
+.filter-icon {
+	font-size: 32rpx;
 }
 
 .scroll-container {
-	height: calc(100vh - 140rpx);
-	padding: 0 32rpx 200rpx;
+	height: calc(100vh - 10rpx);
+	padding: 0 32rpx 40rpx;
+	box-sizing: border-box;
 }
 
 /* 骨架屏 */
@@ -335,168 +400,239 @@ onMounted(() => {
 	100% { background-position: 200% 0; }
 }
 
-/* 时间轴 */
-.timeline-group { 
-	margin-bottom: 32rpx; 
+/* 列表分组 */
+.log-group {
+	margin-bottom: 32rpx;
 }
 
-.timeline-date { 
-	margin-bottom: 16rpx; 
-}
-
-.timeline-date-badge {
-	font-size: 24rpx;
-	color: #059669;
-	background-color: #D1FAE5;
-	padding: 8rpx 20rpx;
-	border-radius: 16rpx;
-	font-weight: 500;
-}
-
-.timeline-items {
-	position: relative;
-	padding-left: 80rpx;
-}
-
-.timeline-item {
-	position: relative;
-	margin-bottom: 24rpx;
-}
-
-.timeline-line {
-	position: absolute;
-	left: -44rpx;
-	top: 56rpx;
-	bottom: -24rpx;
-	width: 4rpx;
-	background-color: #E5E7EB;
-}
-
-.timeline-dot {
-	position: absolute;
-	left: -60rpx;
-	top: 16rpx;
-	width: 48rpx;
-	height: 48rpx;
-	border-radius: 50%;
+.group-header {
 	display: flex;
 	align-items: center;
-	justify-content: center;
-	font-size: 24rpx;
-	z-index: 1;
-	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+	gap: 12rpx;
+	margin-bottom: 16rpx;
 }
 
-.dot-green { 
-	background-color: #10B981; 
+.group-title {
+	font-size: 30rpx;
+	font-weight: 700;
+	color: #0F172A;
 }
 
-.dot-smoke { 
-	background-color: #EF4444; 
+.group-count {
+	font-size: 22rpx;
+	color: #64748B;
+	background-color: #E8FFF1;
+	padding: 6rpx 16rpx;
+	border-radius: 999rpx;
 }
 
-.timeline-content {
+.group-items {
+	display: flex;
+	flex-direction: column;
+	gap: 20rpx;
+}
+
+.log-card {
+	position: relative;
 	background-color: #FFFFFF;
 	border-radius: 24rpx;
-	padding: 24rpx;
-	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
-	border-left: 4rpx solid;
-	transition: all 0.3s;
+	padding: 24rpx 24rpx 20rpx 24rpx;
+	box-shadow: 0 8rpx 20rpx rgba(15, 23, 42, 0.06);
+	display: flex;
+	gap: 20rpx;
 	overflow: hidden;
 }
 
-.content-green {
-	border-left-color: #10B981;
+.log-card-resisted {
+	background-color: #F6FFFA;
+	border: 2rpx solid #E8FFF1;
 }
 
-.content-red {
-	border-left-color: #EF4444;
+.log-card-smoke {
+	background-color: #FFF7F5;
+	border: 2rpx solid #FFE4E6;
 }
 
-.log-header {
+.log-bar {
+	position: absolute;
+	left: 0;
+	top: 0;
+	bottom: 0;
+	width: 8rpx;
+	background-color: #10B981;
+}
+
+.log-card-smoke .log-bar {
+	background-color: #F97316;
+}
+
+.log-icon {
+	width: 80rpx;
+	height: 80rpx;
+	border-radius: 20rpx;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 36rpx;
+	flex-shrink: 0;
+}
+
+.icon-resisted {
+	background-color: rgba(16, 185, 129, 0.16);
+	color: #0F766E;
+}
+
+.icon-smoke {
+	background-color: rgba(249, 115, 22, 0.15);
+	color: #C2410C;
+}
+
+.log-main {
+	flex: 1;
+	min-width: 0;
+}
+
+.log-top {
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
-	margin-bottom: 12rpx;
+	gap: 16rpx;
+	margin-bottom: 10rpx;
 }
 
-.log-type {
+.log-time-tag {
+	display: flex;
+	align-items: center;
+	gap: 12rpx;
+}
+
+.log-time {
 	font-size: 30rpx;
+	font-weight: 700;
+	color: #0F172A;
+}
+
+.log-tag {
+	font-size: 22rpx;
+	padding: 6rpx 14rpx;
+	border-radius: 12rpx;
+	font-weight: 700;
+}
+
+.tag-smoke {
+	background-color: #FEE2E2;
+	color: #DC2626;
+}
+
+.tag-resisted {
+	background-color: #DCFCE7;
+	color: #16A34A;
+}
+
+.log-right {
+	display: flex;
+	align-items: center;
+	gap: 8rpx;
+	flex-shrink: 0;
+}
+
+.count-pill {
+	font-size: 22rpx;
+	color: #DC2626;
+	background-color: #FEE2E2;
+	padding: 6rpx 14rpx;
+	border-radius: 12rpx;
+	font-weight: 700;
+}
+
+.thumb-pill {
+	font-size: 24rpx;
+	background-color: #DCFCE7;
+	color: #16A34A;
+	padding: 6rpx 12rpx;
+	border-radius: 12rpx;
+}
+
+.log-desc {
+	font-size: 24rpx;
+	color: #475569;
+	line-height: 1.5;
+	margin-bottom: 10rpx;
+}
+
+.log-meta-row {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 12rpx;
+	flex-wrap: wrap;
+}
+
+.level-text {
+	font-size: 22rpx;
 	font-weight: 600;
-	color: #1F2937;
+}
+
+.log-interval {
+	font-size: 22rpx;
+	color: #64748B;
+	background-color: #F1F5F9;
+	padding: 4rpx 12rpx;
+	border-radius: 999rpx;
 }
 
 .log-actions {
 	display: flex;
+	justify-content: flex-end;
 	gap: 16rpx;
+	margin-top: 12rpx;
 }
 
 .action-btn {
-	font-size: 24rpx;
-	padding: 8rpx 16rpx;
-	border-radius: 8rpx;
-	transition: all 0.3s;
+	font-size: 22rpx;
+	padding: 6rpx 14rpx;
+	border-radius: 12rpx;
+	background-color: #FFFFFF;
+	border: 2rpx solid #E2E8F0;
+	color: #64748B;
 }
 
 .edit-btn {
+	color: #2563EB;
+	border-color: #DBEAFE;
 	background-color: #EFF6FF;
-	color: #3B82F6;
 }
 
 .delete-btn {
-	background-color: #FEE2E2;
+	color: #DC2626;
+	border-color: #FECACA;
+	background-color: #FEF2F2;
+}
+
+.level-unknown {
+	color: #64748B;
+}
+
+.level-1 {
+	color: #16A34A;
+}
+
+.level-2 {
+	color: #0EA5E9;
+}
+
+.level-3 {
+	color: #F59E0B;
+}
+
+.level-4 {
+	color: #F97316;
+}
+
+.level-5 {
 	color: #EF4444;
 }
 
-.log-time-row {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	margin-bottom: 12rpx;
-}
-
-.log-time {
-	font-size: 28rpx;
-	color: #1F2937;
-	font-weight: 500;
-}
-
-.log-interval {
-	font-size: 24rpx;
-	color: #9CA3AF;
-}
-
-.log-meta {
-	display: flex;
-	gap: 16rpx;
-	margin-bottom: 12rpx;
-	flex-wrap: wrap;
-}
-
-.meta-item {
-	font-size: 24rpx;
-	color: #6B7280;
-	background-color: #F9FAFB;
-	padding: 6rpx 12rpx;
-	border-radius: 8rpx;
-	white-space: nowrap;
-}
-
-.log-remark {
-	background-color: #F9FAFB;
-	padding: 12rpx 16rpx;
-	border-radius: 12rpx;
-	margin-bottom: 0;
-	margin-top: 8rpx;
-}
-
-.remark-text {
-	font-size: 26rpx;
-	color: #374151;
-	line-height: 1.6;
-	word-break: break-word;
-}
-
 /* 空状态 */
 .empty-state {
 	display: flex;
@@ -546,7 +682,7 @@ onMounted(() => {
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	box-shadow: 0 8rpx 24rpx rgba(16, 185, 129, 0.4);
+	box-shadow: 0 12rpx 28rpx rgba(16, 185, 129, 0.35);
 	transition: all 0.3s;
 	z-index: 100;
 }

pages/stats/index.vue

@@ -1,23 +1,17 @@
 <template>
 	<view class="page">
-		<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="segment-item"
-				:class="{ 'segment-active': currentTab === tab.value }"
-				@tap="currentTab = tab.value"
-			>
-				{{ tab.label }}
+		<view class="sticky-bar">
+			<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
+			<view class="segment">
+				<view
+					v-for="tab in tabs"
+					:key="tab.value"
+					class="segment-item"
+					:class="{ 'segment-active': currentTab === tab.value }"
+					@tap="currentTab = tab.value"
+				>
+					{{ tab.label }}
+				</view>
 			</view>
 		</view>
 
@@ -64,9 +58,11 @@
 
 			<view class="savings-card">
 				<view class="savings-header">
-					<view class="savings-icon"></view>
-					<text class="savings-title">节省金额</text>
+				<view class="savings-icon" :class="moneyIconClass">
+					<view class="icon-coin"></view>
 				</view>
+				<text class="savings-title">节省金额</text>
+			</view>
 				<view class="savings-body">
 					<view class="savings-left">
 						<text class="savings-value">{{ savedMoneyText }}</text>
@@ -86,7 +82,10 @@
 			<view class="health-card">
 				<view class="health-header">
 					<view class="health-title-row">
-						<view class="health-icon"></view>
+						<view class="health-icon" :class="healthIconClass">
+							<view class="icon-plus-vertical"></view>
+							<view class="icon-plus-horizontal"></view>
+						</view>
 						<text class="health-title">健康恢复里程碑</text>
 					</view>
 					<view class="health-badge">{{ healthStatusText }}</view>
@@ -110,7 +109,9 @@
 
 			<view class="stats-grid">
 				<view class="mini-card">
-					<view class="mini-icon mini-icon-fire"></view>
+					<view class="mini-icon mini-icon-fire" :class="streakIconClass">
+						<view class="icon-flame"></view>
+					</view>
 					<text class="mini-label">连续记录</text>
 					<view class="mini-value-row">
 						<text class="mini-value">{{ streakDays }}</text>
@@ -119,7 +120,9 @@
 					<text class="mini-sub">保持未吸烟</text>
 				</view>
 				<view class="mini-card">
-					<view class="mini-icon mini-icon-block"></view>
+					<view class="mini-icon mini-icon-block" :class="resistedIconClass">
+						<view class="icon-shield"></view>
+					</view>
 					<text class="mini-label">已拒绝</text>
 					<view class="mini-value-row">
 						<text class="mini-value">{{ resistedTotal }}</text>
@@ -221,6 +224,7 @@ const savedMoneyText = computed(() => {
 	return `¥${(money.saved_cent / 100).toFixed(2)}`
 })
 
+
 const moneyTargetCent = computed(() => {
 	const money = statsData.value?.money
 	if (!money || !money.available) return 0
@@ -259,6 +263,7 @@ const healthStatusText = computed(() => {
 	return '进行中'
 })
 
+
 const healthItems = computed(() => {
 	const health = statsData.value?.health
 	if (!health || !health.available || !health.milestones || health.milestones.length === 0) {
@@ -284,6 +289,37 @@ const healthItems = computed(() => {
 const streakDays = computed(() => statsData.value?.streak_days ?? 12)
 const resistedTotal = computed(() => statsData.value?.resisted_total ?? 24)
 
+const moneyIconClass = computed(() => {
+	const money = statsData.value?.money
+	if (!money || !money.available) return 'icon-muted'
+	if (moneyPercent.value >= 60) return 'icon-strong'
+	if (moneyPercent.value >= 30) return 'icon-mid'
+	return 'icon-low'
+})
+
+const healthIconClass = computed(() => {
+	const health = statsData.value?.health
+	if (!health || !health.available) return 'icon-muted'
+	const minutes = health.smoke_free_minutes || 0
+	if (minutes >= 1440) return 'icon-strong'
+	if (minutes >= 120) return 'icon-mid'
+	return 'icon-low'
+})
+
+const streakIconClass = computed(() => {
+	if (streakDays.value <= 0) return 'icon-muted'
+	if (streakDays.value >= 7) return 'icon-strong'
+	if (streakDays.value >= 3) return 'icon-mid'
+	return 'icon-low'
+})
+
+const resistedIconClass = computed(() => {
+	if (resistedTotal.value <= 0) return 'icon-muted'
+	if (resistedTotal.value >= 10) return 'icon-strong'
+	if (resistedTotal.value >= 5) return 'icon-mid'
+	return 'icon-low'
+})
+
 function formatTrendLabel(label, unit) {
 	if (!label) return ''
 	if (unit === 'month') {
@@ -327,17 +363,13 @@ async function fetchStats() {
 	}
 }
 
-function goBack() {
-	uni.switchTab({ url: '/pages/index/index' })
-}
-
 watch(currentTab, () => {
 	fetchStats()
 })
 
 onMounted(() => {
 	const sys = uni.getSystemInfoSync()
-	statusBarHeight.value = sys.statusBarHeight || 0
+	statusBarHeight.value = Math.max((sys.statusBarHeight || 0) - 20, 0)
 	fetchStats()
 })
 </script>
@@ -345,74 +377,50 @@ onMounted(() => {
 <style scoped>
 .page {
 	min-height: 100vh;
-	background-color: #F5F7FB;
-	padding: 0 28rpx 180rpx;
+	background: linear-gradient(to bottom, #D1FAE5 0%, #F0FDF4 45%, #FFFFFF 100%);
+	padding: 0 32rpx 200rpx;
 	box-sizing: border-box;
 }
 
 .status-bar {
-	background-color: #F5F7FB;
+	background: linear-gradient(to bottom, #D1FAE5, #F0FDF4);
 	height: 0;
 }
 
-.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;
+.sticky-bar {
+	position: sticky;
+	top: 0;
+	z-index: 20;
+	background: linear-gradient(to bottom, #D1FAE5 0%, #F0FDF4 70%, rgba(255, 255, 255, 0.95) 100%);
+	padding-bottom: 8rpx;
 }
 
 .segment {
 	display: flex;
-	background-color: #EEF2F7;
-	padding: 8rpx;
+	background-color: #FFFFFF;
+	padding: 6rpx;
 	border-radius: 20rpx;
-	gap: 8rpx;
-	margin-bottom: 24rpx;
+	gap: 6rpx;
+	margin-bottom: 16rpx;
+	border: 2rpx solid #ECFDF3;
+	box-shadow: 0 10rpx 22rpx rgba(16, 185, 129, 0.08);
 }
 
 .segment-item {
 	flex: 1;
 	text-align: center;
-	padding: 16rpx 0;
-	font-size: 26rpx;
-	font-weight: 500;
+	padding: 14rpx 0;
+	font-size: 24rpx;
+	font-weight: 600;
 	color: #64748B;
 	border-radius: 16rpx;
+	transition: all 0.2s;
 }
 
 .segment-active {
-	background-color: #FFFFFF;
-	color: #111827;
-	box-shadow: 0 8rpx 16rpx rgba(15, 23, 42, 0.06);
+	background-color: #10B981;
+	color: #0B2F23;
+	box-shadow: 0 6rpx 16rpx rgba(16, 185, 129, 0.25);
 }
 
 .insight-card {
@@ -420,10 +428,11 @@ onMounted(() => {
 	gap: 20rpx;
 	align-items: flex-start;
 	background-color: #ECFDF3;
-	border: 2rpx solid #D4F6E2;
+	border: 2rpx solid #D9FBE7;
 	border-radius: 24rpx;
 	padding: 24rpx;
 	margin-bottom: 28rpx;
+	box-shadow: 0 10rpx 20rpx rgba(16, 185, 129, 0.1);
 }
 
 .insight-icon {
@@ -483,16 +492,19 @@ onMounted(() => {
 	border-radius: 999rpx;
 	font-size: 22rpx;
 	font-weight: 600;
+	border: 2rpx solid transparent;
 }
 
 .status-good {
 	background-color: #E8FFF1;
 	color: #16A34A;
+	border-color: #BBF7D0;
 }
 
 .status-warn {
 	background-color: #FEF3C7;
 	color: #D97706;
+	border-color: #FDE68A;
 }
 
 .status-dot {
@@ -510,7 +522,8 @@ onMounted(() => {
 	background-color: #FFFFFF;
 	border-radius: 28rpx;
 	padding: 24rpx;
-	box-shadow: 0 12rpx 24rpx rgba(15, 23, 42, 0.06);
+	border: 2rpx solid #ECFDF3;
+	box-shadow: 0 12rpx 24rpx rgba(16, 185, 129, 0.1);
 }
 
 .trend-header {
@@ -545,7 +558,7 @@ onMounted(() => {
 	display: flex;
 	align-items: flex-end;
 	justify-content: space-between;
-	height: 260rpx;
+	height: 240rpx;
 	gap: 12rpx;
 }
 
@@ -559,8 +572,8 @@ onMounted(() => {
 }
 
 .trend-bar {
-	width: 36rpx;
-	background: linear-gradient(180deg, #2DD36F 0%, #1A9F54 100%);
+	width: 32rpx;
+	background: linear-gradient(180deg, #34D399 0%, #10B981 100%);
 	border-radius: 12rpx 12rpx 8rpx 8rpx;
 }
 
@@ -568,7 +581,7 @@ onMounted(() => {
 	position: absolute;
 	top: 0;
 	transform: translateY(-12rpx);
-	background-color: #0F172A;
+	background-color: #0F766E;
 	color: #FFFFFF;
 	font-size: 20rpx;
 	padding: 4rpx 10rpx;
@@ -591,7 +604,8 @@ onMounted(() => {
 	border-radius: 28rpx;
 	padding: 24rpx;
 	margin-top: 20rpx;
-	box-shadow: 0 12rpx 24rpx rgba(15, 23, 42, 0.05);
+	border: 2rpx solid #FEF3C7;
+	box-shadow: 0 12rpx 24rpx rgba(245, 158, 11, 0.08);
 }
 
 .savings-header {
@@ -607,17 +621,34 @@ onMounted(() => {
 	border-radius: 8rpx;
 	background-color: #FDE68A;
 	position: relative;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: #D97706;
 }
 
-.savings-icon::after {
-	content: '';
-	position: absolute;
-	left: 8rpx;
-	top: 8rpx;
-	width: 16rpx;
+.savings-icon.icon-muted {
+	background-color: #F1F5F9;
+	color: #94A3B8;
+}
+
+.savings-icon.icon-low {
+	color: #E59E0B;
+}
+
+.savings-icon.icon-mid {
+	color: #D97706;
+}
+
+.savings-icon.icon-strong {
+	color: #B45309;
+}
+
+.icon-coin {
+	width: 18rpx;
 	height: 12rpx;
 	border-radius: 4rpx;
-	border: 3rpx solid #F59E0B;
+	border: 3rpx solid currentColor;
 	border-top-width: 6rpx;
 }
 
@@ -683,7 +714,7 @@ onMounted(() => {
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	box-shadow: 0 6rpx 16rpx rgba(15, 23, 42, 0.06);
+	box-shadow: 0 6rpx 16rpx rgba(245, 158, 11, 0.12);
 }
 
 .ring-value {
@@ -697,7 +728,8 @@ onMounted(() => {
 	border-radius: 28rpx;
 	padding: 24rpx;
 	margin-top: 24rpx;
-	box-shadow: 0 12rpx 24rpx rgba(15, 23, 42, 0.05);
+	border: 2rpx solid #ECFDF3;
+	box-shadow: 0 12rpx 24rpx rgba(16, 185, 129, 0.08);
 }
 
 .health-header {
@@ -719,16 +751,47 @@ onMounted(() => {
 	background-color: #DCFCE7;
 	border-radius: 8rpx;
 	position: relative;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: #16A34A;
 }
 
-.health-icon::after {
-	content: '';
+.health-icon.icon-muted {
+	background-color: #F1F5F9;
+	color: #94A3B8;
+}
+
+.health-icon.icon-low {
+	color: #16A34A;
+}
+
+.health-icon.icon-mid {
+	color: #16A34A;
+}
+
+.health-icon.icon-strong {
+	color: #0F766E;
+}
+
+.icon-plus-vertical,
+.icon-plus-horizontal {
 	position: absolute;
-	left: 12rpx;
-	top: 6rpx;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	background-color: currentColor;
+	border-radius: 999rpx;
+}
+
+.icon-plus-vertical {
 	width: 4rpx;
 	height: 16rpx;
-	background-color: #16A34A;
+}
+
+.icon-plus-horizontal {
+	width: 16rpx;
+	height: 4rpx;
 }
 
 .health-title {
@@ -744,6 +807,7 @@ onMounted(() => {
 	background-color: #E8FFF1;
 	color: #16A34A;
 	font-weight: 600;
+	border: 2rpx solid #BBF7D0;
 }
 
 .health-list {
@@ -789,7 +853,7 @@ onMounted(() => {
 }
 
 .health-bar-fill-muted {
-	background-color: #CBD5F5;
+	background-color: #C7E6D4;
 }
 
 .stats-grid {
@@ -803,7 +867,8 @@ onMounted(() => {
 	background-color: #FFFFFF;
 	border-radius: 24rpx;
 	padding: 24rpx;
-	box-shadow: 0 12rpx 24rpx rgba(15, 23, 42, 0.04);
+	border: 2rpx solid #ECFDF3;
+	box-shadow: 0 12rpx 24rpx rgba(16, 185, 129, 0.06);
 }
 
 .mini-icon {
@@ -812,36 +877,63 @@ onMounted(() => {
 	border-radius: 12rpx;
 	margin-bottom: 12rpx;
 	position: relative;
+	display: flex;
+	align-items: center;
+	justify-content: center;
 }
 
 .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;
+	color: #F97316;
 }
 
 .mini-icon-block {
 	background-color: #E0E7FF;
+	color: #6366F1;
 }
 
-.mini-icon-block::after {
-	content: '';
-	position: absolute;
-	left: 12rpx;
-	top: 12rpx;
+.mini-icon.icon-muted {
+	background-color: #F1F5F9;
+	color: #94A3B8;
+}
+
+.mini-icon-fire.icon-low {
+	color: #FB923C;
+}
+
+.mini-icon-fire.icon-mid {
+	color: #F97316;
+}
+
+.mini-icon-fire.icon-strong {
+	color: #EA580C;
+}
+
+.mini-icon-block.icon-low {
+	color: #818CF8;
+}
+
+.mini-icon-block.icon-mid {
+	color: #6366F1;
+}
+
+.mini-icon-block.icon-strong {
+	color: #4F46E5;
+}
+
+.icon-flame {
 	width: 16rpx;
-	height: 16rpx;
+	height: 20rpx;
+	background-color: currentColor;
+	border-radius: 50% 50% 50% 50%;
+	transform: rotate(45deg);
+}
+
+.icon-shield {
+	width: 18rpx;
+	height: 18rpx;
 	border-radius: 50%;
-	border: 3rpx solid #6366F1;
+	border: 3rpx solid currentColor;
 }
 
 .mini-label {