Merge pull request #35 from hello-dd-code/feat/h5-debug-and-design-refresh

feat: refresh h5 debug workflow and frontend design

docs/design-system.md

@@ -0,0 +1,396 @@
+# 戒烟助手 - 设计语言文档
+
+> 所有页面和组件必须遵循此文档，确保视觉一致性。
+
+---
+
+## 1. 色彩体系
+
+### 品牌色 — 薄荷绿
+
+| 用途 | 色值 | 示例场景 |
+|------|------|---------|
+| 主色 | `#34C8A0` | 按钮、进度条、选中态边框 |
+| 主色深 | `#1a8c62` | 选中文字、强调文字 |
+| 主色最深 | `#0D3D2E` | 页面标题、数值文字 |
+| 辅助文字 | `#52806E` | 副标题 |
+| 次要文字 | `#7aA898` | 说明文字、标签、单位 |
+| 淡底色 | `#9CC5B5` | placeholder 文字 |
+
+### 功能色
+
+| 用途 | 色值 | 场景 |
+|------|------|------|
+| 成功/正向 | `#1a8c62` | 下降趋势、达成状态 |
+| 警告 | `#B45309` | 上升趋势、需注意 |
+| 警告背景 | `rgba(251, 191, 36, 0.14)` | 警告标签底色 |
+| 危险 | `#DC2626` | 高数值指标 |
+| 信息蓝 | `#2563EB` | 对比数据（实际值） |
+
+### 背景与表面
+
+| 用途 | 色值 |
+|------|------|
+| 页面背景渐变 | `linear-gradient(180deg, #E6F7F2 0%, #F0FBF7 40%, #FAFFFE 100%)` |
+| 卡片底色 | `rgba(255, 255, 255, 0.88)` |
+| 卡片边框 | `rgba(52, 200, 160, 0.14)` |
+| 卡片阴影 | `0 4rpx 18rpx rgba(52, 200, 160, 0.07)` |
+| 浅底色块 | `rgba(52, 200, 160, 0.06)` |
+| 选中底色 | `rgba(52, 200, 160, 0.09)` |
+| 选中边框 | `rgba(52, 200, 160, 0.45)` |
+
+---
+
+## 2. 字体规范
+
+### 字体栈
+
+```css
+font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+```
+
+### 字号层级
+
+| 级别 | 字号 | 字重 | 颜色 | 用途 |
+|------|------|------|------|------|
+| H1 | 38rpx | 700 | `#0D3D2E` | 页面大标题 |
+| H2 | 28rpx | 600 | `#0D3D2E` | 卡片标题 |
+| H3 | 26rpx | 600 | `#1a5c45` | 区块标签（section-label） |
+| 数值大 | 52rpx | 700 | `#0D3D2E` | 核心指标数字 |
+| 数值中 | 38-42rpx | 700 | `#0D3D2E` | 次要指标数字 |
+| 正文 | 25rpx | 400 | `#52806E` | 描述文字 |
+| 辅助 | 21-22rpx | 400 | `#7aA898` | 标签、单位、说明 |
+| 小字 | 20rpx | 500 | `#7aA898` | 注释、补充信息 |
+
+---
+
+## 3. 间距与圆角
+
+### 间距
+
+| 级别 | 数值 | 用途 |
+|------|------|------|
+| xs | 6-8rpx | 元素内部微间距 |
+| sm | 14-16rpx | 标签之间、紧凑元素间距 |
+| md | 20rpx | 卡片之间、区块之间 |
+| lg | 28rpx | 页面侧边距 |
+
+### 圆角
+
+| 元素 | 圆角 |
+|------|------|
+| 卡片 | 24rpx |
+| 选项卡片 | 20rpx |
+| 标签（pill） | 999rpx |
+| 按钮 | 48rpx（大按钮）/ 999rpx（小标签） |
+| 输入框/选择器 | 12-14rpx |
+| 圆形按钮/圆环 | 50% |
+| 数据色块 | 14rpx |
+
+---
+
+## 4. 组件样式规范
+
+### 4.1 卡片（Card）
+
+所有独立内容区域使用卡片包裹。
+
+```css
+.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;
+  margin-bottom: 20rpx;
+}
+```
+
+**禁止**：使用旧版灰蓝阴影 `rgba(15, 23, 42, 0.06)`，统一使用薄荷绿阴影。
+
+### 4.2 选择卡片（Mode Card / Option Card）
+
+```css
+/* 默认态 */
+.option-card {
+  background: rgba(255, 255, 255, 0.72);
+  border: 2rpx solid rgba(52, 200, 160, 0.1);
+  border-radius: 20rpx;
+  box-shadow: 0 2rpx 10rpx rgba(52, 200, 160, 0.04);
+}
+
+/* 选中态 */
+.option-card-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);
+}
+```
+
+### 4.3 标签选项（Pill Tag）
+
+```css
+/* 默认态 */
+.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);
+}
+
+/* 选中态 */
+.tag-active {
+  background: rgba(52, 200, 160, 0.12);
+  border-color: rgba(52, 200, 160, 0.45);
+  color: #1a7f61;
+  font-weight: 600;
+}
+```
+
+### 4.4 按钮
+
+```css
+/* 主按钮 */
+.btn-primary {
+  height: 96rpx;
+  background: linear-gradient(180deg, #3DD9AE 0%, #34C8A0 100%);
+  border-radius: 48rpx;
+  color: #FFFFFF;
+  font-size: 32rpx;
+  font-weight: 600;
+  box-shadow: 0 12rpx 28rpx rgba(52, 200, 160, 0.28);
+}
+
+/* 圆形操作按钮（+/-） */
+.btn-circle {
+  width: 60rpx;
+  height: 60rpx;
+  border-radius: 50%;
+  background: rgba(52, 200, 160, 0.1);
+  color: #34C8A0;
+  font-size: 38rpx;
+  border: 1.5rpx solid rgba(52, 200, 160, 0.25);
+}
+```
+
+### 4.5 输入框
+
+```css
+.input {
+  background: rgba(52, 200, 160, 0.06);
+  border: 1.5rpx solid rgba(52, 200, 160, 0.2);
+  border-radius: 12rpx;
+  color: #0D3D2E;
+  font-weight: 600;
+}
+
+/* placeholder */
+placeholder-style: "color: #9CC5B5"
+```
+
+### 4.6 进度条
+
+```css
+.progress-bar {
+  height: 10rpx;
+  background: rgba(52, 200, 160, 0.1);
+  border-radius: 999rpx;
+}
+
+.progress-fill {
+  background: linear-gradient(90deg, #34C8A0, #3DD9AE);
+  border-radius: 999rpx;
+}
+
+/* 未完成态 */
+.progress-fill-pending {
+  background: rgba(52, 200, 160, 0.3);
+}
+```
+
+### 4.7 圆环指标（Ring）
+
+```css
+.ring {
+  width: 110rpx;
+  height: 110rpx;
+  border-radius: 50%;
+  /* 使用 conic-gradient 动态渲染 */
+  /* 主色: #34C8A0, 底色: #E8F8F3 */
+}
+
+.ring-inner {
+  width: 82rpx;
+  height: 82rpx;
+  border-radius: 50%;
+  background: #FFFFFF;
+  box-shadow: 0 4rpx 12rpx rgba(52, 200, 160, 0.1);
+}
+```
+
+### 4.8 状态标签（Chip）
+
+```css
+/* 正向 */
+.chip-good {
+  background: rgba(52, 200, 160, 0.12);
+  color: #1a8c62;
+}
+
+/* 警告 */
+.chip-warn {
+  background: rgba(251, 191, 36, 0.14);
+  color: #B45309;
+}
+
+/* 中性 */
+.chip-neutral {
+  background: rgba(52, 200, 160, 0.06);
+  color: #7aA898;
+}
+```
+
+### 4.9 Segment（Tab 切换）
+
+```css
+.segment {
+  background: rgba(255, 255, 255, 0.82);
+  padding: 6rpx;
+  border-radius: 22rpx;
+  border: 1.5rpx solid rgba(52, 200, 160, 0.14);
+  box-shadow: 0 4rpx 16rpx rgba(52, 200, 160, 0.07);
+}
+
+.segment-item {
+  font-size: 24rpx;
+  font-weight: 600;
+  color: #7aA898;
+  border-radius: 16rpx;
+}
+
+.segment-active {
+  background: #FFFFFF;
+  color: #0D3D2E;
+  box-shadow: 0 4rpx 12rpx rgba(52, 200, 160, 0.12);
+}
+```
+
+### 4.10 空状态
+
+```css
+.empty-block {
+  padding: 32rpx;
+  border-radius: 16rpx;
+  background: rgba(52, 200, 160, 0.04);
+}
+
+/* 虚线边框变体 */
+.empty-block-dashed {
+  border: 2rpx dashed rgba(52, 200, 160, 0.2);
+  background: transparent;
+}
+
+.empty-text {
+  font-size: 24rpx;
+  color: #7aA898;
+}
+```
+
+### 4.11 底部安全区
+
+```css
+.bottom-safe {
+  height: calc(32rpx + env(safe-area-inset-bottom));
+}
+
+/* 固定底部按钮区域 */
+.footer-fixed {
+  position: fixed;
+  left: 0; right: 0; bottom: 0;
+  padding: 20rpx 28rpx;
+  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
+  background: linear-gradient(180deg, transparent 0%, rgba(240, 251, 247, 0.97) 35%);
+}
+```
+
+---
+
+## 5. 数据可视化配色
+
+| 数据类型 | 色值/色阶 |
+|---------|----------|
+| 0 / 无数据 | `rgba(52, 200, 160, 0.06)` |
+| 低（1-3） | `rgba(52, 200, 160, 0.18)` |
+| 中（4-8） | `rgba(251, 191, 36, 0.2)` |
+| 高（9+） | `rgba(239, 68, 68, 0.15)` |
+| 圆环已完成 | `#34C8A0` |
+| 圆环未完成 | `#E8F8F3` |
+
+---
+
+## 6. 禁止事项
+
+| 禁止 | 替代方案 |
+|------|---------|
+| 灰蓝色阴影 `rgba(15, 23, 42, *)` | 薄荷绿阴影 `rgba(52, 200, 160, *)` |
+| 旧主色 `#1AA37A` / `#1aa37a` | 新主色 `#34C8A0`（按钮/进度条）或 `#1a8c62`（文字） |
+| 灰色文字 `#6B7280` / `#94A3B8` | 绿调文字 `#7aA898` / `#52806E` |
+| 灰色背景 `#F1F5F9` / `#F8FAFC` | 绿调背景 `rgba(52, 200, 160, 0.06)` |
+| 纯白卡片背景 `#FFFFFF` | 半透明白 `rgba(255, 255, 255, 0.88)` |
+| `backdrop-filter: blur()` | 不再使用模糊滤镜（性能考虑），用不透明度代替 |
+| 旧页面背景渐变 `#edf2f8 → #fbfdff` | 薄荷绿渐变 `#E6F7F2 → #FAFFFE` |
+
+---
+
+## 7. 快速参考
+
+开发新页面时复制此基础结构：
+
+```vue
+<template>
+  <view class="page">
+    <view class="status-bar" :style="{ height: navBarHeight + 'px' }"></view>
+
+    <view class="card">
+      <text class="card-title">标题</text>
+      <!-- 内容 -->
+    </view>
+
+    <view class="bottom-safe"></view>
+  </view>
+</template>
+
+<style scoped>
+.page {
+  min-height: 100vh;
+  background: linear-gradient(180deg, #E6F7F2 0%, #F0FBF7 40%, #FAFFFE 100%);
+  padding: 0 28rpx;
+  box-sizing: border-box;
+}
+
+.status-bar {
+  background: transparent;
+}
+
+.card {
+  background: rgba(255, 255, 255, 0.88);
+  border-radius: 24rpx;
+  padding: 24rpx;
+  margin-bottom: 20rpx;
+  border: 1.5rpx solid rgba(52, 200, 160, 0.14);
+  box-shadow: 0 4rpx 18rpx rgba(52, 200, 160, 0.07);
+}
+
+.card-title {
+  font-size: 28rpx;
+  font-weight: 600;
+  color: #0D3D2E;
+}
+
+.bottom-safe {
+  height: calc(32rpx + env(safe-area-inset-bottom));
+}
+</style>
+```

src/api/auth.js

@@ -1,14 +1,17 @@
 import { request } from './request'
 import { MINI_PROGRAM_ID } from '@/config'
-import { storage, SESSION_KEY, USER_KEY } from '@/utils/storage'
+import pinia, { useUserStore } from '@/stores'
+import { storage, SESSION_KEY, USER_KEY, USER_MODE_KEY } from '@/utils/storage'
 
-const H5_DEBUG_SESSION_KEY = 'o3dUk5QYaPdfMN9hBxeuouE0q63E'
+const H5_DEBUG_SESSION_KEY = 'FxLFPHHBw49loODmRSvqdg=='
 
 export function applyH5DebugSession() {
 	let applied = false
 	// #ifdef H5
-	if (process.env.NODE_ENV === 'development' && !storage.get(SESSION_KEY)) {
+	if (process.env.NODE_ENV === 'development' && storage.get(SESSION_KEY) !== H5_DEBUG_SESSION_KEY) {
 		storage.set(SESSION_KEY, H5_DEBUG_SESSION_KEY)
+		storage.remove(USER_KEY)
+		storage.remove(USER_MODE_KEY)
 		applied = true
 	}
 	// #endif
@@ -25,9 +28,11 @@ export async function login() {
 						mini_program_id: MINI_PROGRAM_ID,
 						code: loginRes.code
 					})
-
+					const userStore = useUserStore(pinia)
-					storage.set(SESSION_KEY, res.data.session_key)
+					userStore.setUser(res.data.user, res.data.session_key)
-					storage.set(USER_KEY, res.data.user)
+					if (res.data.user?.mode) {
+						userStore.setMode(res.data.user.mode)
+					}
 
 					resolve(res.data)
 				} catch (e) {

src/api/request.js

@@ -13,6 +13,7 @@ function isInvalidToken(res) {
 export const request = {
 	async request(options) {
 		const sessionKey = storage.get(SESSION_KEY)
+		// 测试 
 		const isRetryAfter401 = options._retryAfter401 === true
 
 		return new Promise((resolve, reject) => {

src/components/smoke-record-dialog/smoke-record-dialog.vue

@@ -262,10 +262,11 @@ export default {
 	overflow: hidden;
 	transform: translateY(100%);
 	transition: transform 0.3s ease-out;
-	padding-bottom: 16rpx;
+	padding-bottom: 0;
 	border-top: 2rpx solid rgba(255, 255, 255, 0.72);
 	backdrop-filter: blur(28rpx);
 	-webkit-backdrop-filter: blur(28rpx);
+	box-shadow: 0 20rpx 48rpx rgba(15, 23, 42, 0.18);
 }
 
 .dialog-show {
@@ -308,7 +309,8 @@ export default {
 
 .dialog-body {
 	padding: 16rpx 32rpx 24rpx;
-	max-height: 62vh;
+	padding-bottom: 40rpx;
+	max-height: 58vh;
 	overflow-y: auto;
 }
 
@@ -538,6 +540,8 @@ export default {
 
 .dialog-footer {
 	padding: 16rpx 32rpx 32rpx;
+	padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
+	background: linear-gradient(180deg, rgba(248, 250, 252, 0) 0%, rgba(248, 250, 252, 0.96) 28%);
 }
 
 .dialog-btn-primary {

src/pages.json

@@ -24,6 +24,12 @@
 				"navigationStyle": "custom"
 			}
 		},
+		{
+			"path": "pages/stats-calendar/index",
+			"style": {
+				"navigationBarTitleText": "日历详情"
+			}
+		},
 		{
 			"path": "pages/ai/index",
 			"style": {

src/pages/logs/index.vue

@@ -1,15 +1,27 @@
 <template>
 	<view class="page">
-		<view class="page-glow page-glow-a"></view>
+		<view class="hero-card card">
-		<view class="page-glow page-glow-b"></view>
+			<text class="hero-title">记录历史</text>
-		<view class="page-header">
+			<text class="hero-subtitle">按时间查看抽烟和忍住记录，随时回看自己的变化轨迹。</text>
-			<text class="page-eyebrow">History</text>
+			<view class="hero-stats">
-			<text class="page-title">记录历史</text>
+				<view class="hero-stat">
-			<text class="page-subtitle">按时间查看抽烟和忍住记录。</text>
+					<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">
-		<view class="filters">
+			<text class="section-label">筛选记录</text>
+			<view class="filters card">
 				<view class="tabs">
 					<view
 						v-for="tab in tabs"
@@ -22,8 +34,8 @@
 					</view>
 				</view>
 			</view>
+		</view>
 
-		<!-- 记录列表 -->
 		<scroll-view
 			class="scroll-container"
 			scroll-y
@@ -32,7 +44,8 @@
 			@refresherrefresh="onRefresh"
 			@scrolltolower="onLoadMore"
 		>
-			<!-- 骨架屏 -->
+			<text class="section-label">时间记录</text>
+
 			<view v-if="logsStore.loading && logsStore.logs.length === 0" class="skeleton">
 				<view v-for="i in 3" :key="i" class="skeleton-item">
 					<view class="skeleton-dot"></view>
@@ -44,7 +57,6 @@
 				</view>
 			</view>
 
-			<!-- 时间轴 -->
 			<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">
@@ -97,14 +109,12 @@
 				</view>
 			</view>
 
-			<!-- 空状态 -->
 			<view v-else class="empty-state">
 				<text class="empty-icon">记</text>
 				<text class="empty-text">暂无记录</text>
 				<text class="empty-hint">点击右下角按钮开始记录</text>
 			</view>
 
-			<!-- 加载更多 -->
 			<view v-if="logsStore.loading && logsStore.logs.length > 0" class="loading-more">
 				<text class="loading-text">加载中...</text>
 			</view>
@@ -112,14 +122,14 @@
 			<view v-if="!logsStore.hasMore && logsStore.logs.length > 0" class="no-more">
 				<text class="no-more-text">没有更多了</text>
 			</view>
+
+			<view class="bottom-safe"></view>
 		</scroll-view>
 
-		<!-- 浮动按钮 -->
 		<view class="fab" @tap="addLog">
 			<text class="fab-icon">+</text>
 		</view>
 		
-		<!-- 编辑弹框 -->
 		<smoke-record-dialog 
 			v-model:show="showEditDialog" 
 			:type="editType"
@@ -159,6 +169,9 @@ 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) => {
@@ -305,40 +318,15 @@ onShareAppMessage(() => {
 <style scoped>
 .page {
 	min-height: 100vh;
-	position: relative;
+	display: flex;
-	background:
+	flex-direction: column;
-		radial-gradient(circle at top left, rgba(52, 200, 160, 0.16), transparent 30%),
+	background: linear-gradient(180deg, #E6F7F2 0%, #F0FBF7 40%, #FAFFFE 100%);
-		radial-gradient(circle at top right, rgba(255, 255, 255, 0.92), transparent 24%),
+	padding: 24rpx 28rpx 0;
-		linear-gradient(180deg, #edf2f8 0%, #f5f7fb 38%, #fbfdff 100%);
 	box-sizing: border-box;
-	overflow: hidden;
 }
 
-.page-glow {
+.hero-card,
-	position: absolute;
+.section,
-	border-radius: 50%;
-	filter: blur(24rpx);
-	opacity: 0.72;
-	pointer-events: none;
-}
-
-.page-glow-a {
-	top: 60rpx;
-	left: -140rpx;
-	width: 360rpx;
-	height: 360rpx;
-	background: rgba(52, 200, 160, 0.14);
-}
-
-.page-glow-b {
-	top: 360rpx;
-	right: -120rpx;
-	width: 320rpx;
-	height: 320rpx;
-	background: rgba(255, 255, 255, 0.9);
-}
-
-.page-header,
 .filters,
 .scroll-container,
 .fab {
@@ -346,53 +334,85 @@ onShareAppMessage(() => {
 	z-index: 1;
 }
 
-.page-header {
+.card {
-	padding: 32rpx 32rpx 8rpx;
+	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;
 }
 
-.page-eyebrow {
+.hero-card {
+	margin-bottom: 20rpx;
+}
+
+.hero-title {
 	display: block;
-	font-size: 20rpx;
+	font-size: 38rpx;
+	line-height: 1.2;
 	font-weight: 700;
-	letter-spacing: 4rpx;
+	color: #0D3D2E;
-	text-transform: uppercase;
-	color: #98a2b3;
 }
 
-.page-title {
+.hero-subtitle {
 	display: block;
 	margin-top: 10rpx;
-	font-size: 42rpx;
+	font-size: 25rpx;
-	line-height: 1.18;
+	line-height: 1.5;
-	font-weight: 700;
+	color: #52806E;
-	color: #111827;
 }
 
-.page-subtitle {
+.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: 24rpx;
+	font-size: 22rpx;
-	line-height: 1.5;
+	color: #7aA898;
-	color: #667085;
+}
+
+.section {
+	margin-bottom: 20rpx;
+}
+
+.section-label {
+	display: block;
+	margin: 0 0 14rpx 6rpx;
+	font-size: 26rpx;
+	font-weight: 600;
+	color: #1a5c45;
 }
 
 .filters {
-	display: flex;
+	padding: 24rpx;
-	align-items: center;
-	gap: 16rpx;
-	padding: 16rpx 32rpx 8rpx;
 }
 
 .tabs {
 	display: flex;
-	flex: 1;
+	background: rgba(255, 255, 255, 0.82);
-	background: rgba(255, 255, 255, 0.76);
+	border-radius: 22rpx;
-	border-radius: 24rpx;
 	padding: 6rpx;
-	box-shadow: 0 12rpx 28rpx rgba(15, 23, 42, 0.06);
+	border: 1.5rpx solid rgba(52, 200, 160, 0.14);
-	border: 2rpx solid rgba(255, 255, 255, 0.66);
+	box-shadow: 0 4rpx 16rpx rgba(52, 200, 160, 0.07);
-	backdrop-filter: blur(24rpx);
-	-webkit-backdrop-filter: blur(24rpx);
 }
 
 .tab {
@@ -400,73 +420,56 @@ onShareAppMessage(() => {
 	text-align: center;
 	padding: 14rpx 0;
 	border-radius: 16rpx;
-	font-size: 26rpx;
+	font-size: 24rpx;
-	color: #6B7280;
-	transition: all 0.2s;
 	font-weight: 600;
+	color: #7aA898;
 }
 
 .tab-active {
-	background: rgba(255, 255, 255, 0.92);
+	background: #FFFFFF;
-	color: #111827;
+	color: #0D3D2E;
-	box-shadow: 0 8rpx 18rpx rgba(15, 23, 42, 0.06);
+	box-shadow: 0 4rpx 12rpx rgba(52, 200, 160, 0.12);
-}
-
-.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 - 10rpx);
+	flex: 1;
-	padding: 0 32rpx 40rpx;
+	min-height: 0;
+	padding-bottom: calc(140rpx + env(safe-area-inset-bottom));
 	box-sizing: border-box;
 }
 
-/* 骨架屏 */
 .skeleton {
-	padding-top: 24rpx;
+	padding-top: 6rpx;
 }
 
 .skeleton-item {
-	position: relative;
+	display: flex;
-	padding-left: 80rpx;
+	gap: 20rpx;
-	margin-bottom: 32rpx;
+	margin-bottom: 20rpx;
 }
 
 .skeleton-dot {
-	position: absolute;
+	width: 64rpx;
-	left: 0;
+	height: 64rpx;
-	top: 16rpx;
+	border-radius: 18rpx;
-	width: 48rpx;
+	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%);
-	height: 48rpx;
-	border-radius: 50%;
-	background: linear-gradient(90deg, #E5E7EB 25%, #F3F4F6 50%, #E5E7EB 75%);
 	background-size: 200% 100%;
 	animation: shimmer 1.5s infinite;
+	flex-shrink: 0;
 }
 
 .skeleton-card {
-	background: rgba(255, 255, 255, 0.82);
+	flex: 1;
-	border-radius: 28rpx;
+	background: rgba(255, 255, 255, 0.88);
+	border-radius: 24rpx;
 	padding: 24rpx;
-	border: 2rpx solid rgba(255, 255, 255, 0.66);
+	border: 1.5rpx solid rgba(52, 200, 160, 0.14);
+	box-shadow: 0 4rpx 18rpx rgba(52, 200, 160, 0.07);
 }
 
 .skeleton-line {
 	height: 24rpx;
-	background: linear-gradient(90deg, #E5E7EB 25%, #F3F4F6 50%, #E5E7EB 75%);
+	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-size: 200% 100%;
 	animation: shimmer 1.5s infinite;
 	border-radius: 8rpx;
@@ -491,30 +494,30 @@ onShareAppMessage(() => {
 	100% { background-position: 200% 0; }
 }
 
-/* 列表分组 */
 .log-group {
-	margin-bottom: 32rpx;
+	margin-bottom: 28rpx;
 }
 
 .group-header {
 	display: flex;
 	align-items: center;
 	gap: 12rpx;
-	margin-bottom: 16rpx;
+	margin-bottom: 14rpx;
 }
 
 .group-title {
-	font-size: 30rpx;
+	font-size: 28rpx;
 	font-weight: 700;
-	color: #0F172A;
+	color: #0D3D2E;
 }
 
 .group-count {
 	font-size: 22rpx;
-	color: #667085;
+	color: #7aA898;
-	background-color: rgba(255, 255, 255, 0.76);
+	background-color: rgba(52, 200, 160, 0.06);
 	padding: 6rpx 16rpx;
 	border-radius: 999rpx;
+	border: 1.5rpx solid rgba(52, 200, 160, 0.14);
 }
 
 .group-items {
@@ -525,25 +528,22 @@ onShareAppMessage(() => {
 
 .log-card {
 	position: relative;
-	background: rgba(255, 255, 255, 0.82);
+	background: rgba(255, 255, 255, 0.88);
-	border-radius: 28rpx;
+	border-radius: 24rpx;
 	padding: 24rpx 24rpx 20rpx 24rpx;
-	box-shadow: 0 14rpx 32rpx rgba(15, 23, 42, 0.06);
+	box-shadow: 0 4rpx 18rpx rgba(52, 200, 160, 0.07);
 	display: flex;
 	gap: 20rpx;
 	overflow: hidden;
-	backdrop-filter: blur(24rpx);
+	border: 1.5rpx solid rgba(52, 200, 160, 0.14);
-	-webkit-backdrop-filter: blur(24rpx);
 }
 
 .log-card-resisted {
-	background: linear-gradient(135deg, rgba(245, 255, 251, 0.95), rgba(255, 255, 255, 0.88));
+	background: linear-gradient(135deg, rgba(245, 255, 251, 0.96), rgba(255, 255, 255, 0.88));
-	border: 2rpx solid rgba(255, 255, 255, 0.7);
 }
 
 .log-card-smoke {
-	background: linear-gradient(135deg, rgba(255, 248, 242, 0.95), rgba(255, 255, 255, 0.88));
+	background: linear-gradient(135deg, rgba(255, 250, 244, 0.96), rgba(255, 255, 255, 0.88));
-	border: 2rpx solid rgba(255, 255, 255, 0.7);
 }
 
 .log-bar {
@@ -552,11 +552,11 @@ onShareAppMessage(() => {
 	top: 0;
 	bottom: 0;
 	width: 8rpx;
-	background-color: #10B981;
+	background-color: #34C8A0;
 }
 
 .log-card-smoke .log-bar {
-	background-color: #F97316;
+	background-color: #B45309;
 }
 
 .log-icon {
@@ -572,13 +572,13 @@ onShareAppMessage(() => {
 }
 
 .icon-resisted {
-	background-color: rgba(16, 185, 129, 0.16);
+	background-color: rgba(52, 200, 160, 0.12);
-	color: #0F766E;
+	color: #1a8c62;
 }
 
 .icon-smoke {
-	background-color: rgba(249, 115, 22, 0.15);
+	background-color: rgba(251, 191, 36, 0.14);
-	color: #C2410C;
+	color: #B45309;
 }
 
 .log-main {
@@ -603,24 +603,24 @@ onShareAppMessage(() => {
 .log-time {
 	font-size: 30rpx;
 	font-weight: 700;
-	color: #0F172A;
+	color: #0D3D2E;
 }
 
 .log-tag {
 	font-size: 22rpx;
-	padding: 6rpx 14rpx;
+	padding: 8rpx 16rpx;
-	border-radius: 12rpx;
+	border-radius: 999rpx;
-	font-weight: 700;
+	font-weight: 600;
 }
 
 .tag-smoke {
-	background-color: #FEE2E2;
+	background-color: rgba(251, 191, 36, 0.14);
-	color: #DC2626;
+	color: #B45309;
 }
 
 .tag-resisted {
-	background-color: #DCFCE7;
+	background-color: rgba(52, 200, 160, 0.12);
-	color: #16A34A;
+	color: #1a8c62;
 }
 
 .log-right {
@@ -632,24 +632,24 @@ onShareAppMessage(() => {
 
 .count-pill {
 	font-size: 22rpx;
-	color: #DC2626;
+	color: #B45309;
-	background-color: #FEE2E2;
+	background-color: rgba(251, 191, 36, 0.14);
-	padding: 6rpx 14rpx;
+	padding: 8rpx 16rpx;
-	border-radius: 12rpx;
+	border-radius: 999rpx;
-	font-weight: 700;
+	font-weight: 600;
 }
 
 .thumb-pill {
 	font-size: 24rpx;
-	background-color: #DCFCE7;
+	background-color: rgba(52, 200, 160, 0.12);
-	color: #16A34A;
+	color: #1a8c62;
-	padding: 6rpx 12rpx;
+	padding: 8rpx 14rpx;
-	border-radius: 12rpx;
+	border-radius: 999rpx;
 }
 
 .log-desc {
-	font-size: 24rpx;
+	font-size: 25rpx;
-	color: #475467;
+	color: #52806E;
 	line-height: 1.5;
 	margin-bottom: 10rpx;
 }
@@ -669,10 +669,11 @@ onShareAppMessage(() => {
 
 .log-interval {
 	font-size: 22rpx;
-	color: #667085;
+	color: #7aA898;
-	background-color: rgba(255, 255, 255, 0.72);
+	background-color: rgba(52, 200, 160, 0.06);
-	padding: 4rpx 12rpx;
+	padding: 6rpx 14rpx;
 	border-radius: 999rpx;
+	border: 1.5rpx solid rgba(52, 200, 160, 0.12);
 }
 
 .log-actions {
@@ -684,31 +685,31 @@ onShareAppMessage(() => {
 
 .action-btn {
 	font-size: 22rpx;
-	padding: 6rpx 14rpx;
+	padding: 8rpx 16rpx;
 	border-radius: 999rpx;
-	background-color: rgba(255, 255, 255, 0.8);
+	background-color: rgba(255, 255, 255, 0.9);
-	border: 2rpx solid rgba(15, 23, 42, 0.08);
+	border: 1.5rpx solid rgba(52, 200, 160, 0.18);
-	color: #667085;
+	color: #7aA898;
 }
 
 .edit-btn {
 	color: #2563EB;
-	border-color: #DBEAFE;
+	border-color: rgba(37, 99, 235, 0.18);
-	background-color: #EFF6FF;
+	background-color: rgba(37, 99, 235, 0.08);
 }
 
 .delete-btn {
 	color: #DC2626;
-	border-color: #FECACA;
+	border-color: rgba(220, 38, 38, 0.16);
-	background-color: #FEF2F2;
+	background-color: rgba(220, 38, 38, 0.08);
 }
 
 .level-unknown {
-	color: #64748B;
+	color: #7aA898;
 }
 
 .level-1 {
-	color: #16A34A;
+	color: #1a8c62;
 }
 
 .level-2 {
@@ -727,43 +728,44 @@ onShareAppMessage(() => {
 	color: #EF4444;
 }
 
-/* 空状态 */
 .empty-state {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
 	justify-content: center;
 	padding: 120rpx 32rpx;
+	border-radius: 24rpx;
+	border: 2rpx dashed rgba(52, 200, 160, 0.2);
+	background: transparent;
 }
 
 .empty-icon {
 	width: 112rpx;
 	height: 112rpx;
 	border-radius: 36rpx;
-	background: rgba(255, 255, 255, 0.82);
+	background: rgba(52, 200, 160, 0.06);
-	border: 2rpx solid rgba(255, 255, 255, 0.68);
+	border: 1.5rpx solid rgba(52, 200, 160, 0.14);
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	font-size: 40rpx;
 	font-weight: 700;
-	color: #98a2b3;
+	color: #7aA898;
 	margin-bottom: 24rpx;
 }
 
 .empty-text {
 	font-size: 32rpx;
-	color: #6B7280;
+	color: #0D3D2E;
-	font-weight: 500;
+	font-weight: 600;
 	margin-bottom: 12rpx;
 }
 
 .empty-hint {
-	font-size: 26rpx;
+	font-size: 24rpx;
-	color: #9CA3AF;
+	color: #7aA898;
 }
 
-/* 加载状态 */
 .loading-more, .no-more {
 	text-align: center;
 	padding: 32rpx;
@@ -771,22 +773,21 @@ onShareAppMessage(() => {
 
 .loading-text, .no-more-text {
 	font-size: 24rpx;
-	color: #9CA3AF;
+	color: #7aA898;
 }
 
-/* 浮动按钮 */
 .fab {
 	position: fixed;
 	right: 32rpx;
 	bottom: 140rpx;
 	width: 96rpx;
 	height: 96rpx;
-	background: linear-gradient(180deg, #32c59d 0%, #1aa37a 100%);
+	background: linear-gradient(180deg, #3DD9AE 0%, #34C8A0 100%);
 	border-radius: 50%;
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	box-shadow: 0 16rpx 34rpx rgba(26, 163, 122, 0.24);
+	box-shadow: 0 12rpx 28rpx rgba(52, 200, 160, 0.28);
 	transition: all 0.3s;
 	z-index: 100;
 }
@@ -800,4 +801,8 @@ onShareAppMessage(() => {
 	color: #FFFFFF;
 	font-weight: 300;
 }
+
+.bottom-safe {
+	height: calc(32rpx + env(safe-area-inset-bottom));
+}
 </style>

src/pages/mode-select/index.vue

@@ -71,6 +71,21 @@ function setupNavBar() {
 	}
 }
 
+function isProfileCompleted(profileData) {
+	const profile = profileData?.profile
+	return profileData?.is_completed ||
+		(profile && profile.onboarding_completed_at) ||
+		(profile && profile.baseline_cigs_per_day > 0)
+}
+
+function goHome() {
+	uni.switchTab({ url: '/pages/index/index' })
+}
+
+function goOnboarding() {
+	uni.redirectTo({ url: '/pages/onboarding/index' })
+}
+
 async function selectMode(mode) {
 	if (submitting.value) return
 	submitting.value = true
@@ -78,20 +93,15 @@ async function selectMode(mode) {
 
 	try {
 		const profileData = await profileStore.saveProfile({ mode })
-		const profile = profileData.profile
+		if (!profileData.exists || !isProfileCompleted(profileData)) {
-		const isCompleted = profileData.is_completed ||
+			goOnboarding()
-			(profile && profile.onboarding_completed_at) ||
-			(profile && profile.baseline_cigs_per_day > 0)
-
-		if (!profileData.exists || !isCompleted) {
-			uni.redirectTo({ url: '/pages/onboarding/index' })
 			return
 		}
 
-		uni.switchTab({ url: '/pages/index/index' })
+		goHome()
 	} catch (e) {
 		console.error('selectMode error:', e)
-		uni.switchTab({ url: '/pages/index/index' })
+		goHome()
 	} finally {
 		submitting.value = false
 	}
@@ -100,6 +110,22 @@ async function selectMode(mode) {
 onMounted(async () => {
 	setupNavBar()
 	await waitForLogin()
+
+	// New users go directly to onboarding (single-page flow)
+	try {
+		const profileData = await profileStore.fetchProfile()
+		if (!profileData?.exists || !isProfileCompleted(profileData)) {
+			goOnboarding()
+			return
+		}
+		if (profileData?.profile?.mode || userStore.mode) {
+			goHome()
+		}
+	} catch (e) {
+		if (userStore.mode) {
+			goHome()
+		}
+	}
 })
 </script>
 

src/pages/onboarding/index.vue

@@ -17,6 +17,7 @@
 						: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>
@@ -98,7 +99,7 @@
 							v-model="priceYuan"
 							class="inline-field"
 							placeholder="25"
-							placeholder-style="color: #9CA3AF"
+							placeholder-style="color: #9CC5B5"
 						/>
 						<text class="inline-unit">元/包</text>
 					</view>
@@ -131,8 +132,8 @@ const navBarHeight = ref(0)
 const modeSaving = ref(false)
 
 const modeOptions = [
-	{ value: 'quit', label: '戒烟打卡', desc: '按天记录今天没抽' },
+	{ value: 'quit', label: '戒烟打卡', desc: '按天打卡，坚持戒烟', icon: '🌿' },
-	{ value: 'record', label: '记录抽烟', desc: '按支数记录变化' }
+	{ value: 'record', label: '记录抽烟', desc: '按支数记录变化趋势', icon: '📊' }
 ]
 
 const formData = ref({
@@ -274,50 +275,56 @@ onShareAppMessage(() => {
 </script>
 
 <style scoped>
+/* ── 页面基础 ── */
 .page {
 	min-height: 100vh;
-	background:
+	background: linear-gradient(180deg, #E6F7F2 0%, #F0FBF7 40%, #FAFFFE 100%);
-		radial-gradient(circle at top left, rgba(52, 200, 160, 0.16), transparent 30%),
-		radial-gradient(circle at top right, rgba(255, 255, 255, 0.92), transparent 22%),
-		linear-gradient(180deg, #edf2f8 0%, #f5f7fb 38%, #fbfdff 100%);
 	display: flex;
 	flex-direction: column;
 }
 
 .nav-area {
-	padding: 24rpx 32rpx;
+	padding: 20rpx 32rpx 16rpx;
 	background: transparent;
 }
 
 .nav-title {
 	display: block;
-	font-size: 40rpx;
+	font-size: 38rpx;
 	font-weight: 700;
-	color: #111827;
+	color: #0D3D2E;
 }
 
 .nav-subtitle {
 	display: block;
-	margin-top: 8rpx;
+	margin-top: 6rpx;
-	font-size: 26rpx;
+	font-size: 24rpx;
-	color: #6B7280;
+	color: #52806E;
 }
 
+/* ── 滚动区 ── */
 .content {
 	flex: 1;
-	padding: 0 32rpx;
+	padding: 0 28rpx;
 }
 
+/* ── 卡片式表单区块 ── */
 .form-section {
-	margin-bottom: 40rpx;
+	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);
+	padding: 28rpx 24rpx;
 }
 
 .section-label {
 	display: block;
-	margin-bottom: 16rpx;
+	margin-bottom: 18rpx;
-	font-size: 28rpx;
+	font-size: 26rpx;
 	font-weight: 600;
-	color: #374151;
+	color: #1a5c45;
+	letter-spacing: 0.4rpx;
 }
 
 .section-row {
@@ -326,7 +333,7 @@ onShareAppMessage(() => {
 	align-items: center;
 }
 
-/* Mode switch */
+/* ── 模式选择 ── */
 .mode-switch {
 	display: grid;
 	grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -334,35 +341,50 @@ onShareAppMessage(() => {
 }
 
 .mode-switch-item {
-	padding: 24rpx;
+	padding: 28rpx 20rpx;
 	border-radius: 20rpx;
-	background: rgba(255, 255, 255, 0.8);
+	background: rgba(255, 255, 255, 0.72);
-	border: 2rpx solid rgba(255, 255, 255, 0.66);
+	border: 2rpx solid rgba(52, 200, 160, 0.1);
-	box-shadow: 0 8rpx 24rpx rgba(15, 23, 42, 0.05);
+	box-shadow: 0 2rpx 10rpx rgba(52, 200, 160, 0.04);
+	transition: all 0.2s;
 }
 
 .mode-switch-item-active {
-	background: rgba(255, 255, 255, 0.96);
+	background: rgba(52, 200, 160, 0.09);
-	border-color: rgba(26, 163, 122, 0.3);
+	border-color: rgba(52, 200, 160, 0.45);
-	box-shadow: 0 8rpx 24rpx rgba(26, 163, 122, 0.1);
+	box-shadow: 0 4rpx 16rpx rgba(52, 200, 160, 0.14);
+}
+
+.mode-switch-icon {
+	display: block;
+	font-size: 40rpx;
+	margin-bottom: 10rpx;
 }
 
 .mode-switch-title {
 	display: block;
 	font-size: 28rpx;
-	font-weight: 600;
+	font-weight: 700;
-	color: #111827;
+	color: #0D3D2E;
+}
+
+.mode-switch-item-active .mode-switch-title {
+	color: #1a8c62;
 }
 
 .mode-switch-desc {
 	display: block;
-	margin-top: 8rpx;
+	margin-top: 6rpx;
-	font-size: 22rpx;
+	font-size: 21rpx;
-	line-height: 1.4;
+	line-height: 1.5;
-	color: #6b7280;
+	color: #7aA898;
 }
 
-/* Inline input */
+.mode-switch-item-active .mode-switch-desc {
+	color: #3a9e78;
+}
+
+/* ── 数字步进器 ── */
 .inline-input {
 	display: flex;
 	align-items: center;
@@ -370,71 +392,70 @@ onShareAppMessage(() => {
 }
 
 .inline-btn {
-	width: 56rpx;
+	width: 60rpx;
-	height: 56rpx;
+	height: 60rpx;
 	border-radius: 50%;
-	background: rgba(255, 255, 255, 0.9);
+	background: rgba(52, 200, 160, 0.1);
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	font-size: 36rpx;
+	font-size: 38rpx;
-	color: #1aa37a;
+	color: #34C8A0;
-	border: 2rpx solid rgba(255, 255, 255, 0.72);
+	border: 1.5rpx solid rgba(52, 200, 160, 0.25);
-	box-shadow: 0 4rpx 12rpx rgba(15, 23, 42, 0.06);
 }
 
 .inline-value {
-	font-size: 36rpx;
+	font-size: 38rpx;
 	font-weight: 700;
-	color: #111827;
+	color: #0D3D2E;
-	min-width: 48rpx;
+	min-width: 52rpx;
 	text-align: center;
 }
 
 .inline-unit {
-	font-size: 26rpx;
+	font-size: 24rpx;
-	color: #6B7280;
+	color: #7aA898;
 }
 
 .inline-field {
 	width: 100rpx;
 	font-size: 32rpx;
 	font-weight: 600;
-	color: #111827;
+	color: #0D3D2E;
 	text-align: center;
-	background: rgba(255, 255, 255, 0.9);
+	background: rgba(52, 200, 160, 0.06);
-	padding: 12rpx 16rpx;
+	padding: 10rpx 14rpx;
 	border-radius: 12rpx;
-	border: 2rpx solid rgba(255, 255, 255, 0.72);
+	border: 1.5rpx solid rgba(52, 200, 160, 0.2);
 }
 
-/* Options row */
+/* ── 标签选择 ── */
 .options-row {
 	display: flex;
 	flex-wrap: wrap;
-	gap: 16rpx;
+	gap: 14rpx;
 }
 
 .option-tag {
-	padding: 16rpx 28rpx;
+	padding: 14rpx 26rpx;
 	border-radius: 999rpx;
-	background: rgba(255, 255, 255, 0.84);
+	background: rgba(255, 255, 255, 0.9);
-	font-size: 26rpx;
+	font-size: 25rpx;
-	color: #374151;
+	color: #4a7a66;
-	border: 2rpx solid rgba(255, 255, 255, 0.72);
+	border: 1.5rpx solid rgba(52, 200, 160, 0.18);
-	box-shadow: 0 4rpx 12rpx rgba(15, 23, 42, 0.04);
 }
 
 .option-tag-active {
-	background: rgba(26, 163, 122, 0.12);
+	background: rgba(52, 200, 160, 0.12);
-	border-color: rgba(26, 163, 122, 0.3);
+	border-color: rgba(52, 200, 160, 0.45);
 	color: #1a7f61;
+	font-weight: 600;
 }
 
-/* Time row */
+/* ── 作息时间 ── */
 .time-row {
 	display: flex;
-	gap: 24rpx;
+	gap: 20rpx;
 }
 
 .time-item {
@@ -442,52 +463,52 @@ onShareAppMessage(() => {
 }
 
 .time-label {
-	font-size: 24rpx;
+	font-size: 22rpx;
-	color: #6B7280;
+	color: #7aA898;
 	display: block;
 	margin-bottom: 8rpx;
 }
 
 .time-picker {
-	background: rgba(255, 255, 255, 0.9);
+	background: rgba(52, 200, 160, 0.06);
-	padding: 20rpx 24rpx;
+	padding: 18rpx 20rpx;
-	border-radius: 12rpx;
+	border-radius: 14rpx;
-	font-size: 32rpx;
+	font-size: 30rpx;
 	font-weight: 600;
-	color: #111827;
+	color: #0D3D2E;
 	text-align: center;
-	border: 2rpx solid rgba(255, 255, 255, 0.72);
+	border: 1.5rpx solid rgba(52, 200, 160, 0.2);
-	box-shadow: 0 4rpx 12rpx rgba(15, 23, 42, 0.04);
 }
 
+/* ── 底部空白 + 按钮 ── */
 .bottom-space {
 	height: 160rpx;
 }
 
-/* Footer */
 .footer {
 	position: fixed;
 	left: 0;
 	right: 0;
 	bottom: 0;
-	padding: 24rpx 32rpx;
+	padding: 20rpx 28rpx;
-	padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
+	padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
-	background: linear-gradient(180deg, transparent 0%, rgba(248, 250, 252, 0.95) 40%);
+	background: linear-gradient(180deg, transparent 0%, rgba(240, 251, 247, 0.97) 35%);
 }
 
 .btn-primary {
 	height: 96rpx;
-	background: linear-gradient(180deg, #32c59d 0%, #1aa37a 100%);
+	background: linear-gradient(180deg, #3DD9AE 0%, #34C8A0 100%);
 	border-radius: 48rpx;
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	box-shadow: 0 12rpx 28rpx rgba(26, 163, 122, 0.22);
+	box-shadow: 0 12rpx 28rpx rgba(52, 200, 160, 0.28);
 }
 
 .btn-text {
 	font-size: 32rpx;
 	font-weight: 600;
 	color: #FFFFFF;
+	letter-spacing: 1rpx;
 }
 </style>

src/pages/profile/index.vue

@@ -1,16 +1,11 @@
 <template>
 	<view class="page">
-		<view class="page-glow page-glow-a"></view>
+		<view class="page-bg"></view>
-		<view class="page-glow page-glow-b"></view>
 		<view class="nav-placeholder" :style="{ height: navBarHeight + 'px' }"></view>
 
-		<view class="page-header">
+		<view class="section">
-			<text class="header-eyebrow">Account</text>
+			<text class="section-label">当前账号</text>
-			<text class="header-title">个人中心</text>
+			<view class="user-section card">
-			<text class="header-subtitle">模式切换、分享与基础设置</text>
-		</view>
-
-		<view class="user-section">
 				<image class="avatar" :src="userAvatar" mode="aspectFill"></image>
 				<view class="user-copy">
 					<text class="user-name">{{ userName }}</text>
@@ -21,34 +16,11 @@
 					</view>
 				</view>
 			</view>
+		</view>
 
 		<view class="section">
-			<view class="mode-card">
+			<text class="section-label">常用操作</text>
-				<view class="mode-card-header">
+			<view class="menu-list card">
-					<view class="menu-icon menu-icon-accent">
-						<text class="menu-glyph">模</text>
-					</view>
-					<view class="menu-content">
-						<text class="menu-label">打卡模式</text>
-						<text class="menu-desc">直接切换成“戒烟打卡”或“记录抽烟”</text>
-					</view>
-				</view>
-				<view class="mode-switch">
-					<view
-						v-for="item in modeOptions"
-						:key="item.value"
-						class="mode-switch-item"
-						:class="{ 'mode-switch-item-active': userStore.mode === item.value }"
-						@tap="changeMode(item.value)"
-					>
-						<text class="mode-switch-title">{{ item.label }}</text>
-						<text class="mode-switch-desc">{{ item.desc }}</text>
-					</view>
-				</view>
-				<text class="mode-hint">当前：{{ modeText }}</text>
-			</view>
-
-			<view class="menu-list">
 				<view class="menu-item">
 					<view class="menu-icon menu-icon-accent">
 						<text class="menu-glyph">享</text>
@@ -59,11 +31,11 @@
 						<view class="menu-actions">
 							<text class="menu-action" @tap.stop="previewSharePage">预览分享页</text>
 							<text class="menu-action-sep">·</text>
-							<text class="menu-action" @tap.stop="handleRefreshShare">刷新分享链接</text>
+							<text class="menu-action" @tap.stop="handleRefreshShare">刷新</text>
 						</view>
 					</view>
 					<button class="share-btn" open-type="share" :disabled="shareLoading || !shareToken">
-						{{ shareLoading ? '生成中' : '分享' }}
+						{{ shareLoading ? '生成中' : '去分享' }}
 					</button>
 				</view>
 
@@ -75,7 +47,7 @@
 					</view>
 					<view class="menu-content">
 						<text class="menu-label">重新填写问卷</text>
-						<text class="menu-desc">修改吸烟基线与个人信息</text>
+						<text class="menu-desc">修改打卡模式、吸烟基线等个人信息</text>
 					</view>
 					<text class="menu-arrow">›</text>
 				</view>
@@ -83,14 +55,15 @@
 		</view>
 
 		<view class="section">
-			<view class="menu-list">
+			<text class="section-label">更多设置</text>
+			<view class="menu-list card">
 				<view class="menu-item" @tap="clearCache">
 					<view class="menu-icon menu-icon-muted">
 						<text class="menu-glyph">清</text>
 					</view>
 					<view class="menu-content">
 						<text class="menu-label">清除缓存</text>
-						<text class="menu-desc">仅清理本地缓存，不影响云端记录</text>
+						<text class="menu-desc">仅清理本地缓存，不影响云端数据</text>
 					</view>
 					<text class="menu-arrow">›</text>
 				</view>
@@ -111,6 +84,7 @@
 		</view>
 
 		<text class="version">版本 1.0.0</text>
+		<view class="bottom-safe"></view>
 	</view>
 </template>
 
@@ -129,12 +103,7 @@ const { waitForLogin } = useLogin()
 const shareToken = ref('')
 const shareExpireAt = ref('')
 const shareLoading = ref(false)
-const modeSaving = ref(false)
 const navBarHeight = ref(0)
-const modeOptions = [
-	{ value: 'quit', label: '戒烟打卡', desc: '按天记录今天没抽' },
-	{ value: 'record', label: '记录抽烟', desc: '按支数记录变化' }
-]
 
 const userName = computed(() => userStore.user?.nickname || '戒烟用户')
 const userAvatar = computed(() => userStore.user?.avatar_url || 'https://linghu-wmr.oss-cn-beijing.aliyuncs.com/smt/avatar.png')
@@ -215,25 +184,6 @@ function previewSharePage() {
 	})
 }
 
-async function changeMode(nextMode) {
-	if (!nextMode || nextMode === userStore.mode || modeSaving.value) return
-	modeSaving.value = true
-	try {
-		uni.showLoading({ title: '切换中...' })
-		await profileStore.saveProfile({ mode: nextMode })
-		uni.hideLoading()
-		uni.showToast({ title: '模式已切换', icon: 'success' })
-		setTimeout(() => {
-			uni.switchTab({ url: '/pages/index/index' })
-		}, 250)
-	} catch (e) {
-		uni.hideLoading()
-		uni.showToast({ title: '切换失败', icon: 'none' })
-	} finally {
-		modeSaving.value = false
-	}
-}
-
 function goOnboarding() {
 	uni.navigateTo({ url: '/pages/onboarding/index' })
 }
@@ -286,98 +236,59 @@ onShow(async () => {
 .page {
 	min-height: 100vh;
 	position: relative;
-	background:
+	background-color: #F5F7F6;
-		radial-gradient(circle at top left, rgba(52, 200, 160, 0.16), transparent 30%),
+	padding: 0 32rpx 0;
-		radial-gradient(circle at top right, rgba(255, 255, 255, 0.92), transparent 22%),
-		linear-gradient(180deg, #edf2f8 0%, #f5f7fb 38%, #fbfdff 100%);
-	padding: 0 24rpx 168rpx;
 	box-sizing: border-box;
-	overflow: hidden;
 }
 
-.page-glow {
+.page-bg {
 	position: absolute;
-	border-radius: 50%;
+	top: 0;
-	filter: blur(24rpx);
+	left: 0;
-	opacity: 0.72;
+	right: 0;
-	pointer-events: none;
+	height: 500rpx;
-}
+	background: linear-gradient(180deg, #DDF3EB 0%, #F5F7F6 100%);
-
+	z-index: 0;
-.page-glow-a {
-	top: 100rpx;
-	left: -140rpx;
-	width: 360rpx;
-	height: 360rpx;
-	background: rgba(52, 200, 160, 0.15);
-}
-
-.page-glow-b {
-	top: 340rpx;
-	right: -120rpx;
-	width: 320rpx;
-	height: 320rpx;
-	background: rgba(255, 255, 255, 0.86);
 }
 
 .nav-placeholder,
-.page-header,
-.user-section,
 .section,
 .version {
 	position: relative;
 	z-index: 1;
 }
 
-.page-header {
+.section {
-	padding: 24rpx 6rpx 18rpx;
+	margin-bottom: 36rpx;
 }
 
-.header-eyebrow {
+.section-label {
 	display: block;
-	font-size: 20rpx;
+	margin: 0 0 16rpx 16rpx;
-	font-weight: 700;
+	font-size: 28rpx;
-	letter-spacing: 4rpx;
+	font-weight: 600;
-	text-transform: uppercase;
+	color: #666666;
-	color: #98a2b3;
 }
 
-.header-title {
+.card {
-	display: block;
+	background: #FFFFFF;
-	margin-top: 10rpx;
+	border-radius: 32rpx;
-	font-size: 42rpx;
+	padding: 32rpx;
-	line-height: 1.18;
+	box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.03);
-	font-weight: 700;
-	color: #111827;
-}
-
-.header-subtitle {
-	display: block;
-	margin-top: 8rpx;
-	font-size: 24rpx;
-	line-height: 1.5;
-	color: #667085;
 }
 
 .user-section {
 	display: flex;
 	align-items: center;
-	gap: 24rpx;
+	gap: 32rpx;
-	padding: 12rpx 28rpx 32rpx;
-	margin-bottom: 24rpx;
-	background: rgba(255, 255, 255, 0.74);
-	border: 2rpx solid rgba(255, 255, 255, 0.66);
-	border-radius: 32rpx;
-	box-shadow: 0 16rpx 42rpx rgba(15, 23, 42, 0.08);
-	backdrop-filter: blur(24rpx);
-	-webkit-backdrop-filter: blur(24rpx);
 }
 
 .avatar {
-	width: 132rpx;
+	width: 128rpx;
-	height: 132rpx;
+	height: 128rpx;
 	border-radius: 50%;
-	border: 4rpx solid rgba(255, 255, 255, 0.82);
+	background-color: #F0F4F2;
-	background-color: rgba(255, 255, 255, 0.7);
+	flex-shrink: 0;
 }
 
 .user-copy {
@@ -388,219 +299,139 @@ onShow(async () => {
 }
 
 .user-name {
-	font-size: 40rpx;
+	font-size: 38rpx;
 	font-weight: 700;
-	color: #111827;
+	color: #1A1A1A;
 }
 
 .user-desc {
 	display: block;
 	margin-top: 8rpx;
-	font-size: 24rpx;
+	font-size: 26rpx;
-	line-height: 1.5;
+	color: #999999;
-	color: #667085;
 }
 
 .user-meta {
 	display: flex;
 	flex-wrap: wrap;
-	gap: 12rpx;
+	gap: 16rpx;
-	margin-top: 18rpx;
+	margin-top: 16rpx;
 }
 
 .user-pill {
-	padding: 10rpx 20rpx;
+	padding: 8rpx 20rpx;
 	border-radius: 999rpx;
-	background: rgba(52, 200, 160, 0.12);
+	background: #E8F5F0;
-	border: 2rpx solid rgba(255, 255, 255, 0.64);
 	font-size: 22rpx;
 	font-weight: 600;
-	color: #17795c;
+	color: #10B981;
 }
 
 .user-pill-muted {
-	background: rgba(255, 255, 255, 0.78);
+	background: #F5F5F5;
-	color: #667085;
+	color: #999999;
-}
-
-.section {
-	margin-bottom: 24rpx;
-}
-
-.mode-card {
-	background: rgba(255, 255, 255, 0.76);
-	border-radius: 32rpx;
-	padding: 30rpx 24rpx;
-	border: 2rpx solid rgba(255, 255, 255, 0.66);
-	box-shadow: 0 16rpx 42rpx rgba(15, 23, 42, 0.08);
-	backdrop-filter: blur(24rpx);
-	-webkit-backdrop-filter: blur(24rpx);
-	margin-bottom: 16rpx;
-}
-
-.mode-card-header {
-	display: flex;
-	align-items: center;
-	gap: 24rpx;
-	margin-bottom: 20rpx;
 }
 
 .menu-list {
-	display: flex;
+	padding: 8rpx 32rpx;
-	flex-direction: column;
-	background: rgba(255, 255, 255, 0.8);
-	border-radius: 32rpx;
-	border: 2rpx solid rgba(255, 255, 255, 0.66);
-	box-shadow: 0 16rpx 42rpx rgba(15, 23, 42, 0.08);
-	backdrop-filter: blur(24rpx);
-	-webkit-backdrop-filter: blur(24rpx);
-	overflow: hidden;
 }
 
 .menu-item {
 	display: flex;
 	align-items: center;
 	gap: 24rpx;
-	padding: 28rpx 24rpx;
+	padding: 24rpx 0;
+	background: transparent;
 }
 
 .menu-divider {
-	margin: 0 24rpx;
+	height: 1px;
-	height: 2rpx;
+	background: #F0F0F0;
-	background: rgba(15, 23, 42, 0.06);
+	margin: 0;
 }
 
 .menu-icon {
-	width: 64rpx;
+	width: 72rpx;
-	height: 64rpx;
+	height: 72rpx;
-	border-radius: 20rpx;
+	border-radius: 50%;
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	border: 2rpx solid rgba(255, 255, 255, 0.7);
+	flex-shrink: 0;
 }
 
 .menu-icon-accent {
-	background: rgba(52, 200, 160, 0.14);
+	background: #E8F5F0;
 }
 
 .menu-icon-muted {
-	background: rgba(255, 255, 255, 0.82);
+	background: #F5F5F5;
 }
 
 .menu-glyph {
-	font-size: 24rpx;
+	font-size: 30rpx;
 	font-weight: 700;
-	color: #111827;
+}
+
+.menu-icon-accent .menu-glyph {
+	color: #10B981;
+}
+
+.menu-icon-muted .menu-glyph {
+	color: #999999;
 }
 
 .menu-content {
 	flex: 1;
 	display: flex;
 	flex-direction: column;
-	gap: 4rpx;
+	gap: 6rpx;
 }
 
 .menu-label {
 	font-size: 30rpx;
-	color: #111827;
+	color: #1A1A1A;
 	font-weight: 600;
 }
 
 .menu-desc {
 	font-size: 24rpx;
-	line-height: 1.5;
+	line-height: 1.4;
-	color: #667085;
+	color: #999999;
 }
 
 .menu-actions {
-	margin-top: 6rpx;
+	margin-top: 8rpx;
 	display: flex;
 	align-items: center;
 	flex-wrap: wrap;
-	gap: 8rpx;
+	gap: 12rpx;
 	font-size: 24rpx;
-	color: #1aa37a;
 }
 
 .menu-action {
-	color: #1aa37a;
+	color: #10B981;
+	font-weight: 500;
 }
 
 .menu-action-sep {
-	color: #98a2b3;
+	color: #D4D4D4;
-}
-
-.menu-arrow {
-	font-size: 36rpx;
-	color: #98a2b3;
-}
-
-.menu-value {
-	font-size: 24rpx;
-	font-weight: 600;
-	color: #1aa37a;
-}
-
-.mode-switch {
-	display: flex;
-	gap: 12rpx;
-	padding: 8rpx;
-	border-radius: 24rpx;
-	background: rgba(247, 249, 252, 0.92);
-	border: 2rpx solid rgba(15, 23, 42, 0.05);
-}
-
-.mode-switch-item {
-	flex: 1;
-	padding: 22rpx 18rpx;
-	border-radius: 20rpx;
-	background: transparent;
-	border: 2rpx solid transparent;
-}
-
-.mode-switch-item-active {
-	background: rgba(255, 255, 255, 0.94);
-	border-color: rgba(255, 255, 255, 0.76);
-	box-shadow: 0 8rpx 18rpx rgba(15, 23, 42, 0.06);
-}
-
-.mode-switch-title {
-	display: block;
-	font-size: 28rpx;
-	font-weight: 700;
-	color: #111827;
-}
-
-.mode-switch-desc {
-	display: block;
-	margin-top: 8rpx;
-	font-size: 22rpx;
-	line-height: 1.5;
-	color: #667085;
-}
-
-.mode-hint {
-	display: block;
-	margin-top: 16rpx;
-	font-size: 22rpx;
-	color: #1aa37a;
 }
 
 .share-btn {
 	margin: 0;
-	padding: 12rpx 22rpx;
+	padding: 12rpx 32rpx;
-	line-height: 1.4;
+	line-height: 1.5;
-	font-size: 24rpx;
+	font-size: 26rpx;
 	border: none;
 	border-radius: 999rpx;
 	color: #FFFFFF;
-	background: linear-gradient(180deg, #32c59d 0%, #1aa37a 100%);
+	background: #10B981;
-	box-shadow: 0 12rpx 28rpx rgba(26, 163, 122, 0.2);
+	font-weight: 600;
 }
 
 .share-btn[disabled] {
-	background: #98a2b3;
+	background: #A7F3D0;
 	color: #FFFFFF;
 }
 
@@ -608,11 +439,20 @@ onShow(async () => {
 	border: none;
 }
 
+.menu-arrow {
+	font-size: 36rpx;
+	color: #CCCCCC;
+}
+
 .version {
 	display: block;
 	text-align: center;
-	font-size: 22rpx;
+	font-size: 24rpx;
-	color: #98a2b3;
+	color: #B0B0B0;
-	margin-top: 32rpx;
+	margin-top: 40rpx;
+}
+
+.bottom-safe {
+	height: calc(40rpx + env(safe-area-inset-bottom));
 }
 </style>

src/pages/stats-calendar/index.vue

@@ -0,0 +1,593 @@
+<template>
+	<view class="page">
+
+		<view class="card">
+			<view class="month-bar">
+				<view class="month-arrow" @tap="changeMonth(-1)">‹</view>
+				<view class="month-copy">
+					<text class="month-title">{{ monthTitle }}</text>
+					<text class="month-subtitle">{{ monthSubtitle }}</text>
+				</view>
+				<view class="month-arrow" :class="{ 'month-arrow-disabled': !canGoNextMonth }" @tap="changeMonth(1)">›</view>
+			</view>
+
+			<view class="summary-row">
+				<view class="summary-chip">
+					<text class="summary-chip-label">本月已抽</text>
+					<view class="summary-chip-value-row">
+						<text class="summary-chip-value">{{ monthSmokeTotal }}</text>
+						<text class="summary-chip-unit">支</text>
+					</view>
+				</view>
+				<view class="summary-chip summary-chip-soft">
+					<text class="summary-chip-label">本月忍住</text>
+					<view class="summary-chip-value-row">
+						<text class="summary-chip-value">{{ monthResistedTotal }}</text>
+						<text class="summary-chip-unit">次</text>
+					</view>
+				</view>
+				<view class="summary-chip summary-chip-soft">
+					<text class="summary-chip-label">记录天数</text>
+					<view class="summary-chip-value-row">
+						<text class="summary-chip-value">{{ activeDayCount }}</text>
+						<text class="summary-chip-unit">天</text>
+					</view>
+				</view>
+			</view>
+
+			<view class="calendar-legend">
+				<view class="legend-item">
+					<view class="legend-dot legend-dot-smoke"></view>
+					<text class="legend-text">已抽</text>
+				</view>
+				<view class="legend-item">
+					<view class="legend-dot legend-dot-resisted"></view>
+					<text class="legend-text">忍住</text>
+				</view>
+				<text class="legend-tip">点击灰色日期可切换到对应月份</text>
+			</view>
+
+			<view class="weekday-row">
+				<text v-for="item in weekdayNames" :key="item" class="weekday-item">{{ item }}</text>
+			</view>
+
+			<view class="calendar-grid">
+				<view
+					v-for="item in calendarDays"
+					:key="item.key"
+					class="calendar-cell"
+					:class="{
+						'calendar-cell-muted': !item.isCurrentMonth,
+						'calendar-cell-selected': item.date === selectedDate,
+						'calendar-cell-today': item.isToday,
+						'calendar-cell-disabled': item.isFuture
+					}"
+					@tap="selectDay(item)"
+				>
+					<view class="calendar-cell-top">
+						<text class="calendar-day">{{ item.day }}</text>
+						<view v-if="item.isToday" class="calendar-today-dot"></view>
+					</view>
+					<view class="calendar-count-wrap">
+						<text class="calendar-count-value">{{ item.smokeCount }}</text>
+						<text class="calendar-count-unit">支</text>
+					</view>
+				</view>
+			</view>
+		</view>
+
+		<view class="bottom-safe"></view>
+	</view>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+import { useLogin } from '@/hooks/useLogin'
+import * as api from '@/api'
+
+const { waitForLogin } = useLogin()
+
+const weekdayNames = ['日', '一', '二', '三', '四', '五', '六']
+const currentMonth = ref(startOfMonth(new Date()))
+const selectedDate = ref(formatDate(new Date()))
+const monthLogs = ref([])
+const todayText = formatDate(new Date())
+
+const monthTitle = computed(() => {
+	const date = currentMonth.value
+	return `${date.getFullYear()} 年 ${date.getMonth() + 1} 月`
+})
+
+const monthSubtitle = computed(() => {
+	return `共 ${monthLogs.value.length} 条记录`
+})
+
+const monthSummaryMap = computed(() => buildDailySummaryMap(monthLogs.value))
+const canGoNextMonth = computed(() => {
+	return formatDate(startOfMonth(currentMonth.value)) < formatDate(startOfMonth(new Date()))
+})
+
+const calendarDays = computed(() => {
+	const monthStart = startOfMonth(currentMonth.value)
+	const monthEnd = endOfMonth(currentMonth.value)
+	const gridStart = startOfWeek(monthStart)
+	const gridEnd = endOfWeek(monthEnd)
+	const result = []
+	const summaryMap = monthSummaryMap.value
+
+	for (let date = new Date(gridStart); date <= gridEnd; date = addDays(date, 1)) {
+		const dateKey = formatDate(date)
+		const summary = summaryMap.get(dateKey) || { smokeCount: 0, resistedCount: 0 }
+		result.push({
+			key: dateKey,
+			date: dateKey,
+			day: date.getDate(),
+			isCurrentMonth: date.getMonth() === monthStart.getMonth(),
+			isToday: dateKey === todayText,
+			isFuture: dateKey > todayText,
+			smokeCount: summary.smokeCount,
+			resistedCount: summary.resistedCount
+		})
+	}
+
+	return result
+})
+
+const monthSmokeTotal = computed(() => {
+	return monthLogs.value.reduce((total, item) => {
+		return normalizeLogType(item) === 'resisted' ? total : total + (Number(item.num) || 0)
+	}, 0)
+})
+
+const monthResistedTotal = computed(() => {
+	return monthLogs.value.reduce((total, item) => {
+		return normalizeLogType(item) === 'resisted' ? total + 1 : total
+	}, 0)
+})
+
+const activeDayCount = computed(() => monthSummaryMap.value.size)
+
+async function fetchMonthLogs() {
+	const start = formatDate(startOfMonth(currentMonth.value))
+	const end = formatDate(endOfMonth(currentMonth.value))
+	try {
+		await waitForLogin()
+		const res = await api.getLogs({
+			page: 1,
+			page_size: 200,
+			type: 'all',
+			start,
+			end
+		})
+		monthLogs.value = res.data?.items || []
+	} catch (e) {
+		console.error('fetchMonthLogs error:', e)
+		monthLogs.value = []
+	}
+}
+
+async function initPage(dateText) {
+	const baseDate = parseDate(dateText) || new Date()
+	currentMonth.value = startOfMonth(baseDate)
+	selectedDate.value = formatDate(baseDate)
+	await fetchMonthLogs()
+}
+
+async function changeMonth(offset) {
+	const next = new Date(currentMonth.value)
+	next.setMonth(next.getMonth() + offset)
+	if (offset > 0 && formatDate(startOfMonth(next)) > formatDate(startOfMonth(new Date()))) {
+		return
+	}
+	currentMonth.value = startOfMonth(next)
+	selectedDate.value = formatDate(startOfMonth(next))
+	await fetchMonthLogs()
+}
+
+async function selectDay(item) {
+	if (item.isFuture) return
+	if (!item.isCurrentMonth) {
+		currentMonth.value = startOfMonth(parseDate(item.date))
+		selectedDate.value = item.date
+		await fetchMonthLogs()
+		return
+	}
+	selectedDate.value = item.date
+}
+
+onLoad(async (options) => {
+	await initPage(options?.date)
+})
+
+function buildDailySummaryMap(logs) {
+	const map = new Map()
+	logs.forEach(log => {
+		const dateKey = resolveLogDate(log)
+		if (!dateKey) return
+		const current = map.get(dateKey) || { smokeCount: 0, resistedCount: 0 }
+		if (normalizeLogType(log) === 'resisted') {
+			current.resistedCount += 1
+		} else {
+			current.smokeCount += Number(log.num) || 0
+		}
+		map.set(dateKey, current)
+	})
+	return map
+}
+
+function resolveLogDate(log) {
+	if (typeof log?.smoke_time === 'string' && log.smoke_time) {
+		return log.smoke_time.split('T')[0]
+	}
+	if (log?.smoke_at) {
+		return formatDate(new Date(log.smoke_at))
+	}
+	if (log?.createtime) {
+		return formatDate(typeof log.createtime === 'number' ? new Date(log.createtime * 1000) : new Date(log.createtime))
+	}
+	return ''
+}
+
+function normalizeLogType(log) {
+	const rawType = log?.type
+	if (typeof rawType === 'string') {
+		const value = rawType.toLowerCase()
+		if (value === 'resisted' || value === 'resist') return 'resisted'
+		if (value === 'smoke' || value === 'log_smoke') return 'smoke'
+	}
+	if (typeof rawType === 'number') {
+		if (rawType === 0) return 'resisted'
+		if (rawType === 1) return 'smoke'
+	}
+	if (log?.num === 0) return 'resisted'
+	return 'smoke'
+}
+
+function parseDate(value) {
+	if (!value) return null
+	const date = new Date(`${value}T00:00:00`)
+	if (Number.isNaN(date.getTime())) return null
+	return date
+}
+
+function formatDate(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 startOfMonth(date) {
+	return new Date(date.getFullYear(), date.getMonth(), 1)
+}
+
+function endOfMonth(date) {
+	return new Date(date.getFullYear(), date.getMonth() + 1, 0)
+}
+
+function startOfWeek(date) {
+	const result = new Date(date)
+	result.setDate(result.getDate() - result.getDay())
+	return result
+}
+
+function endOfWeek(date) {
+	const result = new Date(date)
+	result.setDate(result.getDate() + (6 - result.getDay()))
+	return result
+}
+
+function addDays(date, offset) {
+	const result = new Date(date)
+	result.setDate(result.getDate() + offset)
+	return result
+}
+</script>
+
+<style scoped>
+.page {
+	min-height: 100vh;
+	background: linear-gradient(180deg, #F6F8F6 0%, #EFF4F1 52%, #E9F0EC 100%);
+	padding: 20rpx;
+	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);
+	border-radius: 32rpx;
+	padding: 22rpx;
+	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;
+}
+
+.month-bar {
+	position: relative;
+	z-index: 1;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 16rpx;
+	margin-bottom: 16rpx;
+}
+
+.month-arrow {
+	width: 64rpx;
+	height: 64rpx;
+	border-radius: 18rpx;
+	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;
+}
+
+.month-arrow-disabled {
+	opacity: 0.4;
+	box-shadow: none;
+}
+
+.month-copy {
+	flex: 1;
+	text-align: center;
+}
+
+.month-title {
+	display: block;
+	font-size: 30rpx;
+	font-weight: 800;
+	color: #111827;
+}
+
+.month-subtitle {
+	display: block;
+	margin-top: 6rpx;
+	font-size: 22rpx;
+	color: #6b7280;
+}
+
+.summary-row {
+	position: relative;
+	z-index: 1;
+	display: grid;
+	grid-template-columns: repeat(3, minmax(0, 1fr));
+	gap: 12rpx;
+	margin-bottom: 14rpx;
+}
+
+.summary-chip {
+	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);
+}
+
+.summary-chip-soft {
+	background: linear-gradient(180deg, #fbfcfc 0%, #f7faf8 100%);
+}
+
+.summary-chip-label {
+	display: block;
+	font-size: 20rpx;
+	color: #7aA898;
+}
+
+.summary-chip-value-row {
+	display: flex;
+	align-items: baseline;
+	gap: 6rpx;
+	margin-top: 8rpx;
+}
+
+.summary-chip-value {
+	font-size: 34rpx;
+	font-weight: 800;
+	line-height: 1;
+	color: #111827;
+}
+
+.summary-chip-unit {
+	font-size: 20rpx;
+	color: #6b7280;
+}
+
+.calendar-legend {
+	position: relative;
+	z-index: 1;
+	display: flex;
+	align-items: center;
+	flex-wrap: wrap;
+	gap: 14rpx;
+	margin-bottom: 14rpx;
+	padding: 12rpx 14rpx;
+	border-radius: 16rpx;
+	background: linear-gradient(180deg, #fafcfb 0%, #f5f8f6 100%);
+	border: 1rpx solid rgba(15, 23, 42, 0.05);
+}
+
+.legend-item {
+	display: inline-flex;
+	align-items: center;
+	gap: 8rpx;
+}
+
+.legend-dot {
+	width: 16rpx;
+	height: 16rpx;
+	border-radius: 50%;
+}
+
+.legend-dot-smoke {
+	background: #1a8c62;
+}
+
+.legend-dot-resisted {
+	background: #a7d9c6;
+}
+
+.legend-text {
+	font-size: 21rpx;
+	color: #4b5563;
+}
+
+.legend-tip {
+	margin-left: auto;
+	font-size: 20rpx;
+	color: #9ca3af;
+}
+
+.weekday-row {
+	position: relative;
+	z-index: 1;
+	display: grid;
+	grid-template-columns: repeat(7, minmax(0, 1fr));
+	margin-bottom: 12rpx;
+	padding: 0 4rpx;
+}
+
+.weekday-item {
+	text-align: center;
+	font-size: 22rpx;
+	font-weight: 600;
+	color: #7aA898;
+}
+
+.calendar-grid {
+	position: relative;
+	z-index: 1;
+	display: grid;
+	grid-template-columns: repeat(7, minmax(0, 1fr));
+	gap: 10rpx;
+}
+
+.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);
+	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);
+}
+
+.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);
+}
+
+.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);
+}
+
+.calendar-cell-muted {
+	opacity: 0.42;
+	box-shadow: none;
+}
+
+.calendar-cell-disabled {
+	opacity: 0.3;
+	box-shadow: none;
+}
+
+.calendar-cell-top {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 8rpx;
+}
+
+.calendar-day {
+	font-size: 24rpx;
+	font-weight: 700;
+	color: #123329;
+}
+
+.calendar-today-dot {
+	width: 12rpx;
+	height: 12rpx;
+	border-radius: 50%;
+	color: #1a8c62;
+	background: #1a8c62;
+}
+
+.calendar-count-wrap {
+	display: flex;
+	align-items: baseline;
+	gap: 4rpx;
+}
+
+.calendar-count-value {
+	font-size: 34rpx;
+	line-height: 1;
+	font-weight: 800;
+	color: #14936d;
+}
+
+.calendar-count-unit {
+	font-size: 18rpx;
+	font-weight: 600;
+	color: #6b7280;
+}
+
+.bottom-safe {
+	height: calc(28rpx + env(safe-area-inset-bottom));
+}
+</style>

vite.config.js

@@ -5,9 +5,13 @@ import Uni from '@uni-helper/plugin-uni'
 
 export default defineConfig({
   server: {
+    host: '0.0.0.0',
+    port: 5173,
+    strictPort: true,
     proxy: {
       '/api/v1': {
-        target: 'http://localhost:8080',
+        // target: 'http://localhost:8080',
+        target: 'http://nas.quitsmok.top:8300',
         changeOrigin: true
       }
     }