feat: 完善AI助手页真实数据接入与界面风格统一

2026-02-28 17:37:36 +08:00
parent 6f23abe23d
commit 68874cf893
1 changed files with 537 additions and 106 deletions
@@ -1,9 +1,21 @@
 <template>
 	<view class="page">
+		<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
+
+		<view class="container">
+			<view v-if="pageLoading" class="skeleton">
+				<view class="skeleton-card"></view>
+				<view class="skeleton-card"></view>
+				<view class="skeleton-list">
+					<view v-for="i in 3" :key="i" class="skeleton-row"></view>
+				</view>
+			</view>
+
+			<view v-else>
 				<view class="stage-card">
 					<view class="stage-badge">第 {{ stageDay }}/30 天</view>
 					<text class="stage-label">当前减量计划阶段</text>
-			<text class="stage-name">阶段 {{ stage }} : {{ stageName }}</text>
+					<text class="stage-name">阶段 {{ stage }} · {{ stageName }}</text>
 					<text class="stage-days">本阶段还剩 {{ daysLeft }} 天</text>
 					<view class="stage-progress-row">
 						<text class="stage-progress-label">阶段进度</text>
@@ -16,22 +28,37 @@

 				<view class="section">
 					<view class="section-header">
+						<view class="section-title-row">
 							<text class="section-icon">🤖</text>
 							<text class="section-title">每日 AI 分析</text>
 						</view>
+						<text class="refresh-btn" @tap="refreshAiAdvice">刷新</text>
+					</view>

-			<view class="ai-chat">
+					<view v-if="aiLoading" class="ai-loading-card">
+						<text class="ai-loading-text">正在生成今日分析...</text>
+					</view>
+
+					<view v-else-if="aiStatus === 'available'" class="ai-chat">
 						<view class="ai-avatar">🤖</view>
 						<view class="ai-chat-content">
 							<view class="ai-chat-header">
 								<text class="ai-chat-name">AI 教练</text>
-						<text class="ai-chat-time">· 刚刚</text>
+								<text class="ai-chat-time">建议日期 {{ aiAdviceDateText }}</text>
 							</view>
 							<view class="ai-chat-bubble">
 								<text class="ai-chat-text">{{ aiAdvice }}</text>
 							</view>
 						</view>
 					</view>
+
+					<view v-else class="ai-empty-card">
+						<text class="ai-empty-title">{{ aiStateTitle }}</text>
+						<text class="ai-empty-desc">{{ aiStateDesc }}</text>
+						<view v-if="aiStatus === 'locked'" class="ai-empty-btn" @tap="goRecord">
+							<text class="ai-empty-btn-text">去首页查看解锁入口</text>
+						</view>
+					</view>
 				</view>

 				<view class="section">
@@ -40,7 +67,7 @@
 						<text class="section-badge">已完成 {{ completedGoals }}/{{ goals.length }}</text>
 					</view>

-			<view class="goals-list">
+					<view v-if="goals.length > 0" class="goals-list">
 						<view
 							v-for="goal in goals"
 							:key="goal.id"
@@ -54,6 +81,12 @@
 							<text v-if="goal.icon" class="goal-icon">{{ goal.icon }}</text>
 						</view>
 					</view>
+
+					<view v-else class="goal-empty">
+						<text class="goal-empty-text">暂未生成目标，点击刷新重试</text>
+					</view>
+				</view>
+			</view>
 		</view>

 		<view class="record-btn" @tap="goRecord">
@@ -66,45 +99,311 @@
 <script setup>
 import { ref, computed, onMounted } from 'vue'
 import { useLogin } from '@/hooks/useLogin'
+import { useProfileStore } from '@/stores/profile'
+import { storage } from '@/utils/storage'
 import * as api from '@/api'

 const { waitForLogin } = useLogin()
-const loading = ref(true)
+const profileStore = useProfileStore()

-const stageDay = ref(18)
-const stage = ref(2)
-const stageName = ref('减量期')
-const daysLeft = ref(12)
-const stageProgress = ref(0.4)
+const GOALS_STORAGE_KEY = 'ai_daily_goals_v1'

-const aiAdvice = ref('早上好 Alex。昨天你的吸烟量比限额少了 2 支。这是一个巨大的胜利！🏆\n\n数据显示你的烟瘾在下午 2 点左右达到顶峰——今天试着那个时候去散散步。')
+const statusBarHeight = ref(0)
+const pageLoading = ref(true)
+const aiLoading = ref(false)

-const goals = ref([
-	{ id: 1, text: '喝 2 升水', icon: '🏆', done: true },
-	{ id: 2, text: '控制在 5 支烟以内', icon: '', done: false },
-	{ id: 3, text: '阅读激励卡片', icon: '🏆', done: false }
-])
+const stageDay = ref(1)
+const stage = ref(1)
+const stageName = ref('记录期')
+const daysLeft = ref(6)
+const stageProgress = ref(0)
+
+const aiAdvice = ref('')
+const aiStatus = ref('empty')
+const aiAdviceDateText = ref('--')
+const dailyTarget = ref(0)
+
+const goals = ref([])

 const completedGoals = computed(() => {
 	return goals.value.filter(g => g.done).length
 })

-function toggleGoal(goal) {
-	goal.done = !goal.done
-}
+const aiStateTitle = computed(() => {
+	if (aiStatus.value === 'locked') return '今日 AI 建议未解锁'
+	if (aiStatus.value === 'no_data') return '暂无可分析数据'
+	if (aiStatus.value === 'unavailable') return 'AI 服务暂不可用'
+	return '暂无 AI 建议'
+})
+
+const aiStateDesc = computed(() => {
+	if (aiStatus.value === 'locked') return '可前往首页按照引导完成解锁后查看。'
+	if (aiStatus.value === 'no_data') return '先完成记录，系统会在次日生成更准确建议。'
+	if (aiStatus.value === 'unavailable') return '稍后重试，当前将继续使用基础戒烟计划。'
+	return '请点击刷新，或先记录行为数据。'
+})

 function goRecord() {
 	uni.switchTab({ url: '/pages/index/index' })
 }

-async function initPage() {
-	loading.value = true
+function localDateStr(date = new Date()) {
+	const y = date.getFullYear()
+	const m = String(date.getMonth() + 1).padStart(2, '0')
+	const d = String(date.getDate()).padStart(2, '0')
+	return `${y}-${m}-${d}`
+}
+
+function getDateBefore(days) {
+	const date = new Date()
+	date.setDate(date.getDate() - days)
+	return localDateStr(date)
+}
+
+function calculateStage(profile) {
+	const startAt = profile?.onboarding_completed_at || profile?.created_at
+	if (!startAt) {
+		stageDay.value = 1
+		stage.value = 1
+		stageName.value = '记录期'
+		daysLeft.value = 6
+		stageProgress.value = 1 / 7
+		return
+	}
+
+	const start = new Date(startAt)
+	if (isNaN(start.getTime())) {
+		stageDay.value = 1
+		stage.value = 1
+		stageName.value = '记录期'
+		daysLeft.value = 6
+		stageProgress.value = 1 / 7
+		return
+	}
+
+	const now = new Date()
+	const startDayMs = new Date(start.getFullYear(), start.getMonth(), start.getDate()).getTime()
+	const nowDayMs = new Date(now.getFullYear(), now.getMonth(), now.getDate()).getTime()
+	const dayIndex = Math.max(1, Math.floor((nowDayMs - startDayMs) / (24 * 60 * 60 * 1000)) + 1)
+	const planDay = Math.min(dayIndex, 30)
+
+	stageDay.value = planDay
+
+	// 使用阶段内进度，便于用户感知当前阶段完成度
+	if (planDay <= 7) {
+		stage.value = 1
+		stageName.value = '记录期'
+		daysLeft.value = 7 - planDay
+		stageProgress.value = planDay / 7
+		return
+	}
+
+	if (planDay <= 21) {
+		stage.value = 2
+		stageName.value = '减量期'
+		daysLeft.value = 21 - planDay
+		stageProgress.value = (planDay - 7) / 14
+		return
+	}
+
+	stage.value = 3
+	stageName.value = '巩固期'
+	daysLeft.value = Math.max(30 - planDay, 0)
+	stageProgress.value = Math.min((planDay - 21) / 9, 1)
+}
+
+function makeGoalTemplates(profile, adviceText) {
+	const templates = []
+	const target = Number(dailyTarget.value) || Number(profile?.baseline_cigs_per_day) || 0
+
+	if (target > 0) {
+		templates.push({
+			id: 'limit_target',
+			text: `今日吸烟控制在 ${target} 支以内`,
+			icon: '🎯'
+		})
+	}
+
+	const quitMotions = Array.isArray(profile?.quit_motivations) ? profile.quit_motivations : []
+	if (quitMotions.includes('身体健康')) {
+		templates.push({
+			id: 'health_walk',
+			text: '完成 10 分钟快走，分散烟瘾注意力',
+			icon: '🏃'
+		})
+	}
+
+	if (quitMotions.includes('省钱')) {
+		templates.push({
+			id: 'money_track',
+			text: '记录今天少抽的支数，观察省钱变化',
+			icon: '💰'
+		})
+	}
+
+	if (adviceText && adviceText.includes('散步')) {
+		templates.push({
+			id: 'advice_walk',
+			text: '按 AI 建议在高峰时段先散步 5 分钟',
+			icon: '🌿'
+		})
+	}
+
+	templates.push({
+		id: 'delay_urge',
+		text: '烟瘾发作时先延迟 10 分钟并喝一杯水',
+		icon: '⏳'
+	})
+
+	// 去重后最多展示 3 条，保证信息密度适中
+	const uniqueMap = new Map()
+	templates.forEach(item => {
+		if (!uniqueMap.has(item.id)) {
+			uniqueMap.set(item.id, item)
+		}
+	})
+
+	return Array.from(uniqueMap.values()).slice(0, 3)
+}
+
+function loadGoalsByDate(dateStr, templates) {
+	const allGoals = storage.get(GOALS_STORAGE_KEY, {})
+	const cached = Array.isArray(allGoals?.[dateStr]) ? allGoals[dateStr] : []
+	const doneMap = new Map(cached.map(item => [item.id, !!item.done]))
+
+	goals.value = templates.map(item => ({
+		...item,
+		done: doneMap.get(item.id) || false
+	}))
+}
+
+function persistGoals() {
+	const dateStr = localDateStr()
+	const allGoals = storage.get(GOALS_STORAGE_KEY, {})
+
+	allGoals[dateStr] = goals.value.map(item => ({
+		id: item.id,
+		text: item.text,
+		icon: item.icon,
+		done: !!item.done
+	}))
+
+	// 仅保留最近 14 天的目标完成状态，避免本地缓存无限增长
+	const keepDays = 14
+	const keys = Object.keys(allGoals).sort()
+	if (keys.length > keepDays) {
+		const removeKeys = keys.slice(0, keys.length - keepDays)
+		removeKeys.forEach(key => {
+			delete allGoals[key]
+		})
+	}
+
+	storage.set(GOALS_STORAGE_KEY, allGoals)
+}
+
+function toggleGoal(goal) {
+	goal.done = !goal.done
+	persistGoals()
+}
+
+function applyHomeData(home) {
+	const data = home?.data || {}
+	const summary = data.summary || {}
+	const adviceCard = data.advice_card || {}
+
+	if (summary.daily_target !== undefined && summary.daily_target !== null) {
+		dailyTarget.value = Number(summary.daily_target) || 0
+	}
+
+	if (adviceCard?.message && !aiAdvice.value) {
+		aiAdvice.value = adviceCard.message
+		aiStatus.value = 'available'
+	}
+
+	if (!aiAdvice.value && adviceCard?.status) {
+		const map = {
+			locked: 'locked',
+			no_data: 'no_data',
+			unavailable: 'unavailable',
+			empty: 'empty'
+		}
+		aiStatus.value = map[adviceCard.status] || 'empty'
+	}
+}
+
+async function fetchAiAdvice() {
+	aiLoading.value = true
+	const adviceDate = getDateBefore(1)
+	aiAdviceDateText.value = adviceDate
+
 	try {
+		const res = await api.getAiAdvice(adviceDate)
+		const data = res?.data || {}
+		const message = data.advice || data.message || ''
+
+		if (message) {
+			aiAdvice.value = message
+			aiStatus.value = 'available'
+		} else {
+			aiAdvice.value = ''
+			aiStatus.value = 'no_data'
+		}
+
+		if (data.date) {
+			aiAdviceDateText.value = data.date
+		}
+	} catch (e) {
+		const errMsg = e?.message || ''
+		aiAdvice.value = ''
+
+		// 与后端约定：未解锁时返回 403，对应文案包含“会员/广告/解锁”等关键词
+		if (errMsg.includes('会员') || errMsg.includes('广告') || errMsg.includes('解锁')) {
+			aiStatus.value = 'locked'
+		} else {
+			aiStatus.value = 'unavailable'
+		}
+	} finally {
+		aiLoading.value = false
+	}
+}
+
+async function refreshAiAdvice() {
+	await fetchAiAdvice()
+	const profile = profileStore.profile || {}
+	const templates = makeGoalTemplates(profile, aiAdvice.value)
+	loadGoalsByDate(localDateStr(), templates)
+}
+
+async function initPage() {
+	pageLoading.value = true
+	try {
+		const sys = uni.getSystemInfoSync()
+		statusBarHeight.value = sys.statusBarHeight || 0
+
 		await waitForLogin()
+		const [profileRes, homeRes] = await Promise.allSettled([
+			profileStore.fetchProfile(),
+			api.getHome()
+		])
+
+		if (profileRes.status === 'fulfilled') {
+			calculateStage(profileStore.profile || {})
+		}
+
+		if (homeRes.status === 'fulfilled') {
+			applyHomeData(homeRes.value)
+		}
+
+		await fetchAiAdvice()
+
+		const profile = profileStore.profile || {}
+		const templates = makeGoalTemplates(profile, aiAdvice.value)
+		loadGoalsByDate(localDateStr(), templates)
 	} catch (e) {
 		console.error('initPage error:', e)
+		aiStatus.value = 'unavailable'
 	} finally {
-		loading.value = false
+		pageLoading.value = false
 	}
 }

@@ -116,26 +415,73 @@ onMounted(() => {
 <style scoped>
 .page {
 	min-height: 100vh;
-	background-color: #0D1F17;
-	padding: 32rpx;
-	padding-bottom: 200rpx;
+	background: linear-gradient(to bottom, #D1FAE5 0%, #F0FDF4 45%, #FFFFFF 100%);
 	box-sizing: border-box;
 }

-.stage-card {
-	background: linear-gradient(135deg, rgba(74, 222, 128, 0.15) 0%, rgba(74, 222, 128, 0.05) 100%);
+.status-bar {
+	background: linear-gradient(to bottom, #D1FAE5, #E9FDF2);
+}
+
+.container {
+	padding: 24rpx 32rpx 180rpx;
+}
+
+.skeleton {
+	display: flex;
+	flex-direction: column;
+	gap: 24rpx;
+}
+
+.skeleton-card,
+.skeleton-row {
+	background: linear-gradient(90deg, #E5E7EB 25%, #F3F4F6 50%, #E5E7EB 75%);
+	background-size: 200% 100%;
+	animation: shimmer 1.6s infinite;
+}
+
+.skeleton-card {
+	height: 260rpx;
 	border-radius: 24rpx;
+}
+
+.skeleton-list {
+	padding: 24rpx;
+	background-color: #FFFFFF;
+	border-radius: 24rpx;
+}
+
+.skeleton-row {
+	height: 92rpx;
+	border-radius: 18rpx;
+	margin-bottom: 16rpx;
+}
+
+.skeleton-row:last-child {
+	margin-bottom: 0;
+}
+
+@keyframes shimmer {
+	0% { background-position: -200% 0; }
+	100% { background-position: 200% 0; }
+}
+
+.stage-card {
+	background: #FFFFFF;
+	border-radius: 28rpx;
 	padding: 32rpx;
 	margin-bottom: 32rpx;
 	position: relative;
+	box-shadow: 0 10rpx 28rpx rgba(16, 185, 129, 0.12);
+	border: 2rpx solid #ECFDF3;
 }

 .stage-badge {
 	position: absolute;
 	top: 24rpx;
 	right: 24rpx;
-	background-color: #4ADE80;
-	color: #0D1F17;
+	background-color: #10B981;
+	color: #FFFFFF;
 	padding: 8rpx 20rpx;
 	border-radius: 20rpx;
 	font-size: 24rpx;
@@ -144,22 +490,22 @@ onMounted(() => {

 .stage-label {
 	font-size: 24rpx;
-	color: #4ADE80;
+	color: #059669;
 	display: block;
 	margin-bottom: 8rpx;
 }

 .stage-name {
-	font-size: 44rpx;
+	font-size: 42rpx;
 	font-weight: 700;
-	color: #FFFFFF;
+	color: #111827;
 	display: block;
 	margin-bottom: 8rpx;
 }

 .stage-days {
 	font-size: 24rpx;
-	color: #9CA3AF;
+	color: #6B7280;
 	display: block;
 	margin-bottom: 24rpx;
 }
@@ -172,75 +518,140 @@ onMounted(() => {

 .stage-progress-label {
 	font-size: 24rpx;
-	color: #9CA3AF;
+	color: #6B7280;
 }

 .stage-progress-value {
 	font-size: 24rpx;
 	font-weight: 600;
-	color: #4ADE80;
+	color: #10B981;
 }

 .stage-progress-bar {
 	height: 12rpx;
-	background-color: rgba(74, 222, 128, 0.2);
+	background-color: #E5E7EB;
 	border-radius: 6rpx;
 	overflow: hidden;
 }

 .stage-progress-fill {
 	height: 100%;
-	background: linear-gradient(90deg, #4ADE80, #22C55E);
+	background: linear-gradient(90deg, #10B981, #34D399);
 	border-radius: 6rpx;
 }

-.section { margin-bottom: 32rpx; }
+.section {
+	margin-bottom: 32rpx;
+}

 .section-header {
 	display: flex;
 	align-items: center;
-	gap: 12rpx;
+	justify-content: space-between;
 	margin-bottom: 16rpx;
 }

-.section-icon { font-size: 32rpx; }
+.section-title-row {
+	display: flex;
+	align-items: center;
+	gap: 12rpx;
+}
+
+.section-icon {
+	font-size: 30rpx;
+}

 .section-title {
-	font-size: 32rpx;
+	font-size: 30rpx;
 	font-weight: 600;
-	color: #FFFFFF;
+	color: #111827;
+}
+
+.refresh-btn {
+	font-size: 24rpx;
+	color: #10B981;
+	background-color: #ECFDF3;
+	padding: 8rpx 18rpx;
+	border-radius: 16rpx;
 }

 .section-badge {
 	margin-left: auto;
 	font-size: 24rpx;
-	color: #4ADE80;
-	background-color: rgba(74, 222, 128, 0.1);
+	color: #059669;
+	background-color: #ECFDF3;
 	padding: 8rpx 16rpx;
 	border-radius: 16rpx;
 }

+.ai-loading-card,
+.ai-empty-card,
 .ai-chat {
-	background-color: #1A3325;
+	background-color: #FFFFFF;
 	border-radius: 24rpx;
-	padding: 32rpx;
+	padding: 28rpx;
 	display: flex;
+	border: 2rpx solid #ECFDF3;
+	box-shadow: 0 8rpx 22rpx rgba(16, 185, 129, 0.08);
+}
+
+.ai-loading-card {
+	justify-content: center;
+}
+
+.ai-loading-text {
+	color: #6B7280;
+	font-size: 26rpx;
+}
+
+.ai-empty-card {
+	flex-direction: column;
+	gap: 16rpx;
+}
+
+.ai-empty-title {
+	font-size: 30rpx;
+	font-weight: 600;
+	color: #111827;
+}
+
+.ai-empty-desc {
+	font-size: 25rpx;
+	color: #6B7280;
+	line-height: 1.6;
+}
+
+.ai-empty-btn {
+	align-self: flex-start;
+	background-color: #10B981;
+	padding: 14rpx 24rpx;
+	border-radius: 16rpx;
+}
+
+.ai-empty-btn-text {
+	font-size: 24rpx;
+	color: #FFFFFF;
+}
+
+.ai-chat {
 	gap: 20rpx;
 }

 .ai-avatar {
 	width: 64rpx;
 	height: 64rpx;
-	background-color: #243D2E;
+	background-color: #ECFDF3;
 	border-radius: 50%;
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	font-size: 32rpx;
+	font-size: 30rpx;
 	flex-shrink: 0;
 }

-.ai-chat-content { flex: 1; }
+.ai-chat-content {
+	flex: 1;
+}

 .ai-chat-header {
 	display: flex;
@@ -251,25 +662,26 @@ onMounted(() => {

 .ai-chat-name {
 	font-weight: 600;
-	color: #4ADE80;
+	color: #059669;
 }

 .ai-chat-time {
 	font-size: 24rpx;
-	color: #6B7280;
+	color: #9CA3AF;
 }

 .ai-chat-bubble {
-	background-color: #243D2E;
+	background-color: #F9FAFB;
 	padding: 24rpx;
 	border-radius: 24rpx;
 	border-top-left-radius: 8rpx;
+	border: 2rpx solid #F3F4F6;
 }

 .ai-chat-text {
 	font-size: 28rpx;
 	line-height: 1.6;
-	color: #FFFFFF;
+	color: #111827;
 	white-space: pre-wrap;
 }

@@ -283,16 +695,18 @@ onMounted(() => {
 	display: flex;
 	align-items: center;
 	gap: 20rpx;
-	background-color: #1A3325;
+	background-color: #FFFFFF;
 	border-radius: 24rpx;
 	padding: 28rpx;
+	border: 2rpx solid #ECFDF3;
+	box-shadow: 0 6rpx 16rpx rgba(16, 185, 129, 0.08);
 }

 .goal-check {
 	width: 48rpx;
 	height: 48rpx;
 	border-radius: 50%;
-	border: 4rpx solid #374151;
+	border: 4rpx solid #D1D5DB;
 	display: flex;
 	align-items: center;
 	justify-content: center;
@@ -300,20 +714,20 @@ onMounted(() => {
 }

 .goal-check-done {
-	background-color: #4ADE80;
-	border-color: #4ADE80;
+	background-color: #10B981;
+	border-color: #10B981;
 }

 .goal-check-icon {
 	font-size: 28rpx;
-	color: #0D1F17;
+	color: #FFFFFF;
 	font-weight: 700;
 }

 .goal-text {
 	flex: 1;
 	font-size: 28rpx;
-	color: #FFFFFF;
+	color: #111827;
 }

 .goal-text-done {
@@ -321,7 +735,21 @@ onMounted(() => {
 	color: #6B7280;
 }

-.goal-icon { font-size: 32rpx; }
+.goal-icon {
+	font-size: 32rpx;
+}
+
+.goal-empty {
+	background-color: #FFFFFF;
+	border-radius: 24rpx;
+	border: 2rpx dashed #D1D5DB;
+	padding: 32rpx;
+}
+
+.goal-empty-text {
+	font-size: 26rpx;
+	color: #6B7280;
+}

 .record-btn {
 	position: fixed;
@@ -329,7 +757,7 @@ onMounted(() => {
 	left: 32rpx;
 	right: 32rpx;
 	height: 96rpx;
-	background-color: #4ADE80;
+	background-color: #10B981;
 	border-radius: 48rpx;
 	display: flex;
 	align-items: center;
@@ -337,8 +765,11 @@ onMounted(() => {
 	gap: 12rpx;
 	font-size: 32rpx;
 	font-weight: 500;
-	color: #0D1F17;
+	color: #FFFFFF;
+	box-shadow: 0 12rpx 28rpx rgba(16, 185, 129, 0.25);
 }

-.record-icon { font-size: 32rpx; }
+.record-icon {
+	font-size: 32rpx;
+}
 </style>