diff --git a/pages.json b/pages.json index 58dc371..516af33 100644 --- a/pages.json +++ b/pages.json @@ -21,7 +21,13 @@ { "path": "pages/ai/index", "style": { - "navigationBarTitleText": "AI戒烟助手" + "navigationBarTitleText": "AI 建议" + } + }, + { + "path": "pages/ai-summary/index", + "style": { + "navigationBarTitleText": "AI 总结" } }, { diff --git a/pages/ai-summary/index.vue b/pages/ai-summary/index.vue new file mode 100644 index 0000000..78d018b --- /dev/null +++ b/pages/ai-summary/index.vue @@ -0,0 +1,405 @@ + + + + + diff --git a/pages/ai/index.vue b/pages/ai/index.vue index eed36ad..28457c1 100644 --- a/pages/ai/index.vue +++ b/pages/ai/index.vue @@ -1,421 +1,209 @@ @@ -424,7 +212,6 @@ onShareAppMessage(() => { .page { min-height: 100vh; background: linear-gradient(to bottom, #D1FAE5 0%, #F0FDF4 45%, #FFFFFF 100%); - box-sizing: border-box; } .status-bar { @@ -432,352 +219,201 @@ onShareAppMessage(() => { } .container { - padding: 24rpx 32rpx 180rpx; + padding: 24rpx 32rpx 80rpx; } -.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; +.hero-card, +.section-card, +.advice-card, +.empty-card { 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; + border: 2rpx solid #D9FBE7; + box-shadow: 0 10rpx 24rpx rgba(16, 185, 129, 0.08); +} + +.hero-card { padding: 32rpx; - margin-bottom: 32rpx; - position: relative; - box-shadow: 0 10rpx 28rpx rgba(16, 185, 129, 0.12); - border: 2rpx solid #ECFDF3; + margin-bottom: 24rpx; } -.stage-badge { - position: absolute; - top: 24rpx; - right: 24rpx; - background-color: #10B981; - color: #FFFFFF; - padding: 8rpx 20rpx; - border-radius: 20rpx; - font-size: 24rpx; - font-weight: 600; -} - -.stage-label { - font-size: 24rpx; +.hero-label { + font-size: 22rpx; color: #059669; display: block; - margin-bottom: 8rpx; + margin-bottom: 12rpx; } -.stage-name { +.hero-title { font-size: 42rpx; font-weight: 700; color: #111827; display: block; - margin-bottom: 8rpx; -} - -.stage-days { - font-size: 24rpx; - color: #6B7280; - display: block; - margin-bottom: 24rpx; -} - -.stage-progress-row { - display: flex; - justify-content: space-between; margin-bottom: 12rpx; } -.stage-progress-label { +.hero-desc { font-size: 24rpx; color: #6B7280; + line-height: 1.6; } -.stage-progress-value { - font-size: 24rpx; - font-weight: 600; - color: #10B981; -} - -.stage-progress-bar { - height: 12rpx; - background-color: #E5E7EB; - border-radius: 6rpx; - overflow: hidden; -} - -.stage-progress-fill { - height: 100%; - background: linear-gradient(90deg, #10B981, #34D399); - border-radius: 6rpx; -} - -.section { - margin-bottom: 32rpx; +.section-card { + padding: 28rpx; } .section-header { display: flex; - align-items: center; + align-items: flex-start; justify-content: space-between; - margin-bottom: 16rpx; -} - -.section-title-row { - display: flex; - align-items: center; - gap: 12rpx; -} - -.section-icon { - font-size: 30rpx; + gap: 24rpx; + margin-bottom: 24rpx; } .section-title { font-size: 30rpx; - font-weight: 600; + font-weight: 700; color: #111827; + display: block; } -.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: #059669; - background-color: #ECFDF3; - padding: 8rpx 16rpx; - border-radius: 16rpx; -} - -.ai-loading-card, -.ai-empty-card, -.ai-chat { - background-color: #FFFFFF; - border-radius: 24rpx; - 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 { +.section-subtitle { + font-size: 22rpx; color: #6B7280; - font-size: 26rpx; + display: block; + margin-top: 8rpx; } -.ai-empty-card { - flex-direction: column; - gap: 16rpx; +.primary-btn { + padding: 10rpx 24rpx; + border-radius: 999rpx; + background: linear-gradient(135deg, #34D399, #10B981); } -.ai-empty-title { - font-size: 30rpx; +.primary-btn-text { + font-size: 22rpx; 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: #ECFDF3; - border-radius: 50%; - display: flex; +.suggested-pill { + display: inline-flex; align-items: center; - justify-content: center; - font-size: 30rpx; - flex-shrink: 0; + gap: 12rpx; + padding: 14rpx 22rpx; + border-radius: 999rpx; + background: #ECFDF5; + border: 2rpx solid #D1FAE5; + margin-bottom: 24rpx; } -.ai-chat-content { - flex: 1; -} - -.ai-chat-header { - display: flex; - align-items: center; - gap: 8rpx; - margin-bottom: 16rpx; -} - -.ai-chat-name { - font-weight: 600; +.suggested-pill-label { + font-size: 22rpx; color: #059669; } -.ai-chat-time { - font-size: 24rpx; +.suggested-pill-value { + font-size: 26rpx; + font-weight: 700; + color: #111827; +} + +.timeline { + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 8rpx; + margin-bottom: 24rpx; +} + +.timeline-node { + display: flex; + flex-direction: column; + align-items: center; + position: relative; + flex: 1; +} + +.timeline-dot { + width: 20rpx; + height: 20rpx; + border-radius: 50%; + background-color: #D1FAE5; + margin-bottom: 8rpx; +} + +.timeline-line { + position: absolute; + top: 10rpx; + left: calc(50% + 18rpx); + right: -50%; + height: 2rpx; + background-color: #D1FAE5; +} + +.timeline-time { + font-size: 22rpx; color: #9CA3AF; } -.ai-chat-bubble { - background-color: #F9FAFB; - padding: 24rpx; - border-radius: 24rpx; - border-top-left-radius: 8rpx; - border: 2rpx solid #F3F4F6; +.timeline-node-past .timeline-dot { + background-color: #9CA3AF; } -.ai-chat-text { - font-size: 28rpx; - line-height: 1.6; - color: #111827; - white-space: pre-wrap; -} - -.goals-list { - display: flex; - flex-direction: column; - gap: 16rpx; -} - -.goal-item { - display: flex; - align-items: center; - gap: 20rpx; - 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 #D1D5DB; - display: flex; - align-items: center; - justify-content: center; - flex-shrink: 0; -} - -.goal-check-done { - background-color: #10B981; - border-color: #10B981; -} - -.goal-check-icon { - font-size: 28rpx; - color: #FFFFFF; - font-weight: 700; -} - -.goal-text { - flex: 1; - font-size: 28rpx; - color: #111827; -} - -.goal-text-done { +.timeline-node-past .timeline-time { text-decoration: line-through; - color: #6B7280; } -.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; - bottom: 140rpx; - left: 32rpx; - right: 32rpx; - height: 96rpx; +.timeline-node-current .timeline-dot { background-color: #10B981; - border-radius: 48rpx; - display: flex; - align-items: center; - justify-content: center; - gap: 12rpx; - font-size: 32rpx; - font-weight: 500; - color: #FFFFFF; - box-shadow: 0 12rpx 28rpx rgba(16, 185, 129, 0.25); + width: 24rpx; + height: 24rpx; + box-shadow: 0 0 12rpx rgba(16, 185, 129, 0.5); } -.record-icon { - font-size: 32rpx; +.timeline-node-current .timeline-time { + color: #059669; + font-weight: 600; +} + +.timeline-node-future .timeline-time { + color: #6B7280; +} + +.advice-card { + padding: 22rpx; + background-color: #F0FDF4; +} + +.advice-title { + font-size: 24rpx; + font-weight: 600; + color: #059669; + display: block; + margin-bottom: 8rpx; +} + +.advice-text { + font-size: 24rpx; + color: #374151; + line-height: 1.7; +} + +.empty-card { + padding: 36rpx 28rpx; +} + +.empty-title { + font-size: 28rpx; + font-weight: 600; + color: #111827; + display: block; + margin-bottom: 12rpx; +} + +.empty-desc { + font-size: 24rpx; + color: #6B7280; + line-height: 1.6; } diff --git a/pages/index/index.vue b/pages/index/index.vue index b3c0985..353d70f 100644 --- a/pages/index/index.vue +++ b/pages/index/index.vue @@ -41,44 +41,12 @@ 距上次抽烟 {{ timerDisplay }} - AI ✨ 下次建议: {{ nextSmokeTimeText }} - - - 🤖 - {{ aiLoading ? '生成中...' : 'AI 建议' }} - - - - - - 🤖 今日 AI 计划 - - {{ aiLoading ? '刷新中...' : '刷新' }} - - - - - - {{ node.time }} - - - - - {{ aiAdvice }} - - - @@ -116,36 +84,6 @@ 想抽忍住了 - - - - - 🤖 今日 AI 总结 - - {{ summaryLoading ? '刷新中...' : '刷新' }} - - - - AI 正在分析今日数据... - - - {{ parsedSummary.summary }} - - - · - {{ item }} - - - - 💡 明日建议 - {{ parsedSummary.suggestion }} - - - - - 点击生成今日 AI 总结 - - @@ -159,7 +97,7 @@