feat: update share page layout and functionality for achievement poster generation

- 肺部健康可视化组件（SVG肺部+呼吸动画+气泡效果）
- 打卡多巴胺反馈动画（成功弹窗+震动反馈）
- 悬浮记录按钮（右下角FAB+呼吸动画）
- 空状态优化（演示数据预览+引导文案）
- 记录模式空状态视觉升级
- 统计页面空状态统一

参考: docs/PRD-UI-Animation-Optimization.md

README_PHASE3.md

@@ -1,309 +0,0 @@
-# Phase 3: 记录与历史 - 开发完成 ✅
-
-## 🎉 项目状态
-
-**Phase 3 已全部完成！**
-
-- ✅ Day 1: 记录表单组件 (100%)
-- ✅ Day 2: 历史记录页 (100%)
-- ✅ 所有功能已实现并测试通过
-- ✅ 文档已完善
-
----
-
-## 📦 核心功能
-
-### 1. 记录抽烟 / 想抽忍住了
-
-**组件**: `components/smoke-record-dialog/smoke-record-dialog.vue`
-
-- 底部弹出表单
-- 时间、数量、等级、备注
-- 支持两种模式（抽烟/忍住）
-- 支持编辑现有记录
-- easycom 自动导入
-
-### 2. 历史记录查看
-
-**页面**: `pages/logs/index.vue`  
-**Store**: `stores/logs.js`
-
-- 时间轴展示
-- 按日期分组
-- 筛选功能（全部/抽烟/忍住）
-- 下拉刷新/上拉加载
-- 编辑和删除功能
-
----
-
-## 🗂️ 文件结构
-
-```
-smt/
-├── components/
-│   └── smoke-record-dialog/
-│       ├── smoke-record-dialog.vue    ✅ 记录弹框组件
-│       └── README.md                  ✅ 组件文档
-│
-├── pages/
-│   ├── index/
-│   │   └── index.vue                  ✅ 首页（集成记录功能）
-│   └── logs/
-│       └── index.vue                  ✅ 历史记录页
-│
-├── stores/
-│   ├── index.js                       ✅ Store 导出
-│   └── logs.js                        ✅ Logs Store（新增）
-│
-└── docs/
-    ├── DEVELOPMENT.md                 ✅ 开发计划（已更新）
-    ├── PHASE3_SUMMARY.md              ✅ 阶段总结
-    ├── PHASE3_TODO.md                 ✅ 待办清单
-    ├── PHASE3_COMPLETED.md            ✅ 完成报告
-    ├── PHASE3_USER_GUIDE.md           ✅ 使用指南
-    └── README_PHASE3.md               ✅ 本文档
-```
-
----
-
-## 🚀 快速开始
-
-### 1. 查看文档
-
-- **开发文档**: `docs/DEVELOPMENT.md` - Phase 3 部分
-- **完成报告**: `docs/PHASE3_COMPLETED.md` - 详细功能清单
-- **使用指南**: `docs/PHASE3_USER_GUIDE.md` - 用户操作说明
-- **组件文档**: `components/smoke-record-dialog/README.md`
-
-### 2. 运行项目
-
-```bash
-# 微信开发者工具中打开项目
-# 或使用命令行
-npm run dev:mp-weixin
-```
-
-### 3. 测试功能
-
-#### 测试记录功能
-1. 打开首页
-2. 点击「记录抽烟」或「想抽忍住了」
-3. 填写表单并提交
-4. 验证首页数据更新
-
-#### 测试历史记录
-1. 切换到「记录」标签页
-2. 查看记录列表
-3. 测试筛选功能
-4. 测试编辑和删除
-
----
-
-## 📊 功能对照表
-
-| 功能 | 状态 | 文件位置 |
-|------|------|---------|
-| 记录抽烟弹框 | ✅ | `components/smoke-record-dialog/` |
-| 记录忍住弹框 | ✅ | `components/smoke-record-dialog/` |
-| 编辑记录 | ✅ | `pages/logs/index.vue` + 组件 |
-| 删除记录 | ✅ | `pages/logs/index.vue` |
-| 历史记录列表 | ✅ | `pages/logs/index.vue` |
-| 筛选功能 | ✅ | `pages/logs/index.vue` |
-| 日期分组 | ✅ | `stores/logs.js` (getter) |
-| 下拉刷新 | ✅ | `pages/logs/index.vue` |
-| 上拉加载 | ✅ | `pages/logs/index.vue` |
-| 骨架屏 | ✅ | `pages/logs/index.vue` |
-| 空状态 | ✅ | `pages/logs/index.vue` |
-| Logs Store | ✅ | `stores/logs.js` |
-
----
-
-## 🎨 UI 主题
-
-### 明亮主题配色
-
-```javascript
-{
-  background: 'linear-gradient(#D1FAE5, #F0FDF4, #FFFFFF)',
-  card: '#FFFFFF',
-  primary: '#10B981',      // 翡翠绿
-  text: '#1F2937',         // 深灰
-  textSecondary: '#6B7280', // 中灰
-  border: '#E5E7EB',       // 浅灰
-  
-  // 语义色
-  success: '#10B981',      // 绿色（忍住）
-  danger: '#EF4444',       // 红色（抽烟）
-  info: '#3B82F6'          // 蓝色（编辑）
-}
-```
-
-### 组件样式
-
-- **弹框**: 底部弹出，白色背景，圆角顶部
-- **卡片**: 白色背景，阴影，彩色左边框
-- **按钮**: 圆角，清晰的视觉层级
-- **标签**: 圆角，柔和的背景色
-
----
-
-## 🔧 技术栈
-
-- **框架**: uni-app (Vue 3)
-- **状态管理**: Pinia
-- **组件规范**: Options API
-- **命名规范**: kebab-case
-- **样式**: Scoped CSS
-- **构建工具**: Vite
-
----
-
-## 📱 功能截图
-
-### 首页 - 记录按钮
-```
-[🚬 记录抽烟]  [💪 想抽忍住了]
-```
-
-### 记录弹框
-```
-┌──────────────────┐
-│ 记录抽烟      × │
-├──────────────────┤
-│ 时间             │
-│ [日期] [时间]    │
-│ 数量 [-] 1 [+]   │
-│ 等级 [1-5]       │
-│ 备注 [输入框]    │
-├──────────────────┤
-│ [取消]  [确定]   │
-└──────────────────┘
-```
-
-### 历史记录页
-```
-[全部] [已抽烟] [已忍住]
-
-今天 1月25日
-● 💪 想抽忍住了  [编辑] [删除]
-  14:30
-  距上次 2小时15分
-
-● 🚬 记录抽烟  [编辑] [删除]
-  12:15  3支 等级2
-  压力大
-  距上次 1小时30分
-```
-
----
-
-## ✅ 验收清单
-
-### 功能完整性
-- [x] 记录提交功能
-- [x] 记录编辑功能
-- [x] 记录删除功能
-- [x] 列表查看功能
-- [x] 筛选功能
-- [x] 刷新加载功能
-
-### 性能指标
-- [x] 弹框动画 < 300ms
-- [x] 列表首次加载 < 1s
-- [x] 滚动流畅度 60fps
-- [x] 无内存泄漏
-
-### 用户体验
-- [x] 操作反馈及时
-- [x] 加载状态清晰
-- [x] 错误提示友好
-- [x] 空状态有引导
-
-### 代码质量
-- [x] 无 Lint 错误
-- [x] 代码注释完整
-- [x] 组件职责清晰
-- [x] 命名规范统一
-
----
-
-## 🐛 已知问题
-
-**无已知问题** ✅
-
-所有功能已测试通过，运行正常。
-
----
-
-## 📈 下一步计划
-
-Phase 3 已完成，建议进入 **Phase 4: 统计与图表**
-
-### Phase 4 主要任务
-
-1. **统计页基础**
-   - 时间范围切换（周/月/年）
-   - 数据请求和处理
-
-2. **吸烟趋势图**
-   - 集成图表库（uCharts/ECharts）
-   - 柱状图/折线图展示
-
-3. **健康与储蓄**
-   - 节省金额计算
-   - 肺部功能恢复
-
-4. **成就系统**
-   - 连续记录天数
-   - 已拒绝次数
-
-详见 `docs/DEVELOPMENT.md` Phase 4 部分
-
----
-
-## 💬 开发心得
-
-### 成功经验
-
-1. **组件化思维**
-   - smoke-record-dialog 高度复用
-   - 职责单一，易于维护
-
-2. **状态管理**
-   - Pinia Store 集中管理
-   - Getters 处理计算逻辑
-
-3. **用户体验**
-   - 乐观更新提升响应速度
-   - 骨架屏改善加载体验
-
-### 改进建议
-
-1. **性能优化**
-   - 考虑虚拟列表（大数据量）
-   - 添加请求缓存
-
-2. **功能增强**
-   - 支持批量删除
-   - 支持数据导出
-
-3. **视觉优化**
-   - 添加更多动画效果
-   - 优化深色模式适配
-
----
-
-## 📞 联系方式
-
-如有问题或建议，请通过以下方式联系：
-
-- **项目仓库**: [GitHub]
-- **文档位置**: `docs/`
-- **开发者**: AI Assistant
-
----
-
-**版本**: Phase 3 完整版  
-**更新时间**: 2025-01-25  
-**状态**: ✅ 已完成并测试通过  
-**下一阶段**: Phase 4 - 统计与图表

UI.md

@@ -0,0 +1,89 @@
+设计原则
+整合四位专家的核心诉求：
+
+冷静但不冷漠、有趣但不幼稚、净化而非刺激
+
+最终界面布局（完整结构）
+📐 整体高度：约手机一屏半，单页垂直流
+【顶部区】个人状态栏（高度 30%）
+*.txt
+Plaintext
+┌─────────────────────────────────────────────────────┐
+│  [头像] 意志骑士 Lv.3                    💰 ×24    │  ← 毛玻璃背景
+│                                                     │    backdrop-blur: 12px
+│  ╭─────────────────────────────────────────────╮    │
+│  │ ████████████████░░░░░░░░░░░░░░░░░░░░░░░░░ │    │  ← HP生命槽
+│  │  HP: 72%              浊→清 视觉语言       │    │    渐变填充 #6EE7B7→#67E8F9
+│  ╰─────────────────────────────────────────────╯    │    24px高，12px圆角
+│                                                     │
+│  ✦ 深度含氧（已坚持 2 小时 17 分）                 │  ← Buff标签
+│    [薰衣草紫边框]                                   │    胶囊形
+└─────────────────────────────────────────────────────┘
+设计决策说明：
+
+保留游戏化元素（等级/称号），但降低视觉优先级——置于次要位置
+采用色彩心理学专家的"浊清动效"替代碎裂动效，保护用户情绪
+毛玻璃背景融合未来主义美学，但保持经典主义的秩序感
+【中部区】核心控制台（高度 35%）
+*.txt
+Plaintext
+【中下区】健康仪表盘（高度 20%）
+*.txt
+Plaintext
+┌─────────────────────────────────────────────────────┐
+│                                                     │
+│   ╭─────────╮         ╭────────────────────────╮   │
+│   │    ◐   │         │  呼吸系统     +12%     │   │
+│   │   84%  │         │  心脏功能      +8%     │   │
+│   │  健康  │         │  血液纯净     +15%     │   │
+│   ╰─────────╯         │  ────────────────────  │   │
+│    健康指数            │  +3.2 小时             │   │  ← 生命回收
+│    (圆环图)            │   生命已回收           │   │    强调色24px
+│                       ╰────────────────────────╯   │
+│                                                     │
+└─────────────────────────────────────────────────────┘
+设计决策说明：
+
+健康指数圆环图代替多个独立卡片，符合极简主义减法原则
+生命回收概念来自未来主义，成为核心数据展示
+【底部区】成长曲线（高度 15%）
+*.txt
+Plaintext
+┌─────────────────────────────────────────────────────┐
+│                                                     │
+│   7 天趋势                                          │
+│   │                                                 │
+│ 5 ├                                      ●          │  ← 琥珀金转折点
+│   │              ●────────────╱                    │
+│ 3 ├──●────────────────╱                             │
+│   │╱                                              │
+│ 0 └──┬────┬────┬────┬────┬────┬────┬────→          │
+│     周一  周二  周三  周四  周五  周六  周日         │
+│                                                     │
+│   背景：极淡青绿渐变 (#ECFDF5 → #F0F9FF)            │
+│                                                     │
+└─────────────────────────────────────────────────────┘
+最终色板
+用途	色值	来源	说明
+HP高填充	#67E8F9	心理学专家调整	降低饱和度，更持久
+HP低填充	#D97706 暗琥珀	心理学专家	警示非恐惧
+主渐变起	#6EE7B7	心理学专家调整	生命力、成长
+SOS/里程碑	#FBBF24	全场共识	温暖、成就
+Buff标签	#A78BFA 薰衣草紫	心理学专家原创	成长、过渡
+背景	#F8FAFC 微蓝白	经典主义	干净、呼吸感
+文字主色	#1E293B 深蓝灰	经典主义	冷静、专业
+动效规范
+动效	实现	周期	意义
+HP呼吸闪烁	微弱明度变化 ±5%	4-6秒	与身体节奏共振
+浊清过渡	颜色从暗琥珀→清澈渐变	2秒	非破坏性反馈
+呼吸线脉动	顶部细线不透明度 10-20%	6秒	身体自愈暗示
+设计决策摘要
+问题	最终决策	采纳来源
+HP碎裂动效	❌ 取消 → 改用"浊清"视觉语言	色彩心理学专家
+等级/称号	✅ 保留，但降低视觉优先级	未来主义
+金币奖励	✅ 保留图标形式，删除独立卡片	极简主义融合
+游戏化整体	⚠️ 保留数值化反馈，删除幼稚外壳	经典主义+未来主义融合
+布局风格	瑞士网格+毛玻璃	经典主义+未来主义融合
+配色饱和度	降低15-20%	经典主义+色彩心理学
+一句话总结
+"一个冷静的生物数据仪表盘，用颜色的语言告诉用户：你的每一次选择，都在让生命更加清澈。"

docs/ALGORITHM.md

@@ -254,9 +254,9 @@ function calculateMoneySaved(packPriceCent, cigsPerPack, baselineCigsPerDay, act
 
 ---
 
-## 7. 激励语生成（后端统一）
+## 7. 激励语生成（首页内联返回）
 
-接口：`GET /api/v1/smoke/motivation`（详见 `docs/smoke/API.md`）
+接口：`GET /api/v1/smoke/home` 的 `motivation` 字段。
 
 根据用户状态生成不同的激励语：
 

docs/TECH.md

@@ -60,18 +60,14 @@
 ├─────────────────────────────────────────────────────────┤
 │  0ms    ─ 页面骨架屏渲染                                 │
 │  │                                                      │
-│  ├──── 并行请求 ────────────────────────────────────     │
+│  ├──── 串行守卫 + 单接口数据 ────────────────────────     │
 │  │     ├── /profile (检查用户状态)                       │
-│  │     ├── /dashboard (核心数据)                         │
-│  │     └── /next_smoke_time (建议时间)                   │
+│  │     └── /home (首页核心数据)                          │
 │  │                                                      │
 │  200ms ─ 核心数据返回，渲染计时器+统计卡片               │
 │  │                                                      │
 │  300ms ─ 首屏渲染完成                                    │
 │  │                                                      │
-│  │     ┌── 延迟加载 ──────────────────────────────       │
-│  │     └── /ai/advice (AI提示卡片)                       │
-│  │                                                      │
 │  500ms ─ 完整页面渲染                                    │
 └─────────────────────────────────────────────────────────┘
 ```
@@ -79,29 +75,14 @@
 ### 3.2 缓存策略
 
 ```javascript
-// stores/dashboard.js
-import { defineStore } from 'pinia'
+// 首页使用 /smoke/home 单接口返回当前屏所需字段。
+// 页面级刷新由 onShow 触发，避免维护额外 dashboard store 和重复请求。
+const homeData = ref(null)
 
-export const useDashboardStore = defineStore('dashboard', {
-  state: () => ({
-    todayCount: 0,
-    minutesSinceLast: 0,
-    weekly: [],
-    nextSmokeTime: null,
-    lastFetchTime: 0,
-    cacheExpiry: 30 * 1000
-  }),
-  
-  actions: {
-    async fetchDashboard(forceRefresh = false) {
-      const now = Date.now()
-      if (!forceRefresh && now - this.lastFetchTime < this.cacheExpiry) {
-        return
-      }
-      // 发起请求...
-    }
-  }
-})
+async function fetchRecordHomeData() {
+  const res = await api.getHome()
+  homeData.value = res.data || {}
+}
 ```
 
 ### 3.3 计时器优化
@@ -240,35 +221,27 @@ export const request = {
 ```javascript
 // pages/index/index.vue
 import { ref, onMounted } from 'vue'
-import { useDashboardStore } from '@/stores/dashboard'
-import * as api from '@/api/smoke'
+import * as api from '@/api'
 
 const loading = ref(true)
-const dashboardStore = useDashboardStore()
+const homeData = ref(null)
 
 async function initPage() {
   loading.value = true
   
   try {
-    const [profileRes, dashboardRes, nextTimeRes] = await Promise.all([
-      api.getProfile(),
-      api.getDashboard(),
-      api.getNextSmokeTime()
-    ])
-    
-    if (!profileRes.data.exists || !profileRes.data.is_completed) {
+    const profileRes = await api.getSmokeProfile()
+    if (!profileRes.exists || !profileRes.is_completed) {
       uni.redirectTo({ url: '/pages/onboarding/index' })
       return
     }
 
-    dashboardStore.setDashboard(dashboardRes.data)
-    dashboardStore.setNextSmokeTime(nextTimeRes.data)
+    const homeRes = await api.getHome()
+    homeData.value = homeRes.data || {}
     
   } finally {
     loading.value = false
   }
-  
-  setTimeout(loadAiAdvice, 300)
 }
 
 onMounted(initPage)

docs/api.md

@@ -54,18 +54,7 @@ curl -X POST 'http://127.0.0.1:8080/api/v1/smoke/logs' \
 }
 ```
 
-## 2) 获取单条记录
-
-`GET /api/v1/smoke/logs/:id`
-
-curl 示例：
-
-```bash
-curl -X GET 'http://127.0.0.1:8080/api/v1/smoke/logs/5202' \
-  -H 'Authorization: Bearer wx-session-key'
-```
-
-## 3) 列表查询（分页）
+## 2) 列表查询（分页）
 
 `GET /api/v1/smoke/logs?page=1&page_size=20&start=2025-12-01&end=2025-12-31&type=all`
 
@@ -93,71 +82,7 @@ curl -X GET 'http://127.0.0.1:8080/api/v1/smoke/logs/5202' \
 }
 ```
 
-## 4) 获取看板概览
-
-`GET /api/v1/smoke/dashboard?start=2026-01-01&end=2026-01-07`
-
-参数：
-- `start`：起始日期（含，格式 `YYYY-MM-DD`），默认“本周一”
-- `end`：截止日期（含，格式 `YYYY-MM-DD`），默认“本周日”。若只传 `start`，`end` 默认为 `start + 6 天`。
-
-成功响应示例：
-
-```json
-{
-  "code": 200,
-  "message": "success",
-  "data": {
-    "today_count": 6,
-    "minutes_since_last": 42,
-    "weekly": [
-      { "date": "2026-01-01", "count": 2, "is_today": false },
-      { "date": "2026-01-02", "count": 1, "is_today": false },
-      { "date": "2026-01-03", "count": 0, "is_today": false },
-      { "date": "2026-01-04", "count": 0, "is_today": false },
-      { "date": "2026-01-05", "count": 3, "is_today": true },
-      { "date": "2026-01-06", "count": 0, "is_today": false },
-      { "date": "2026-01-07", "count": 0, "is_today": false }
-    ]
-  }
-}
-```
-
-字段说明：
-- `today_count`：当天吸烟总支数（累加 `num`）
-- `minutes_since_last`：距最后一次“实际抽烟”（忽略 `level=0 && num=0` 的忍住记录）的分钟数，通过最近一条 `smoke_at/smoke_time/createtime` 计算；若历史为空则字段不存在
-- `weekly`：起止日期内每日汇总，`count` 为当日总支数，`is_today` 标记当前日期（即便不在 `start/end` 范围内也会标记为 `false`）
-
-## 5) 最近记录列表（轻量版）
-
-`GET /api/v1/smoke/logs/latest?limit=20`
-
-参数：
-- `limit`：返回条数，默认 `20`，最大 `100`
-
-成功响应示例：
-
-```json
-{
-  "code": 200,
-  "message": "success",
-  "data": {
-    "items": [
-      {
-        "id": 123,
-        "smoke_time": "2026-01-05T00:00:00+08:00",
-        "smoke_at": "2026-01-05T09:12:00+08:00",
-        "remark": "压力大",
-        "level": 3,
-        "num": 2,
-        "createtime": 1736049120
-      }
-    ]
-  }
-}
-```
-
-## 6) 更新记录
+## 3) 更新记录
 
 `POST /api/v1/smoke/logs/:id`
 
@@ -178,7 +103,7 @@ curl -X GET 'http://127.0.0.1:8080/api/v1/smoke/logs/5202' \
 - 如果你想“清空 smoke_at”，请传空字符串：`{"smoke_at":""}`。
 - 如果传 `null` 或者不传 `smoke_time`，后端会认为你没有修改该字段。
 
-## 7) 删除记录（软删除）
+## 4) 删除记录（软删除）
 
 `DELETE /api/v1/smoke/logs/:id`
 
@@ -194,157 +119,51 @@ curl -X GET 'http://127.0.0.1:8080/api/v1/smoke/logs/5202' \
 }
 ```
 
-## 8) 获取 AI 戒烟建议（会员 + 广告解锁并行）
-
-`GET /api/v1/smoke/ai/advice?date=2026-01-02`
-
-说明：
-- `date` 可选，默认“昨天”（建议针对哪一天的数据）。
-- 权限：会员用户直接可用；非会员需要先对该 `date` 完成“看广告解锁”（见下一个接口）。
-- 建议结果会按 `uid + date + prompt_version` 缓存（表：`fa_smoke_ai_advice`）。
-
-## 9) 首页整合接口（Home Dashboard）
+## 5) 首页整合接口（Home）
 
 `GET /api/v1/smoke/home`
 
-此接口把首页 UI 所需核心模块一次返回，避免前端串行请求多个接口。返回示例：
+此接口只返回首页、AI 时间页和 AI 日总结页正在消费的核心字段，避免生成或传递无用模块。返回示例：
 
 ```json
 {
   "code": 200,
   "message": "success",
   "data": {
-    "greeting": {
-      "title": "早安，Alex",
-      "subtitle": "今天也是清爽的一天",
-      "nickname": "Alex",
-      "time_of_day": "morning",
-      "avatar_url": "https://example.com/avatar.jpg"
-    },
-    "profile": {
-      "exists": true,
-      "is_completed": true,
-      "awake_minutes": 900,
-      "baseline_interval_minutes": 60,
-      "profile": {
-        "baseline_cigs_per_day": 10,
-        "pack_price_cent": 3200,
-        "wake_up_time": "07:20",
-        "sleep_time": "23:30"
-      }
-    },
-    "advice_card": {
-      "title": "智能控烟建议",
-      "date": "2026-01-04",
-      "message": "根据你的习惯，下午2点是烟瘾高峰，可以试试短暂散步。",
-      "status": "available"
-    },
-    "campaign_card": {
-      "title": "绿色生活，从戒烟开始",
-      "subtitle": "BRAND CAMPAIGN",
-      "badge": "广告"
-    },
     "timer": {
-      "label": "距上次抽烟",
-      "last_smoke_at": "2026-01-05T07:42:00+08:00",
       "seconds_since_last": 9900,
       "next_suggested_at": "2026-01-05T10:30:00+08:00",
       "next_suggested_clock": "10:30",
-      "not_before_at": "2026-01-05T10:30:00+08:00",
-      "suggestion_source": "default",
-      "suggestion_algorithm": "staircase_delay_v1"
+      "suggestion_source": "default"
     },
       "summary": {
       "today_count": 3,
       "daily_target": 10,
-      "resisted_count": 1,
       "reduced_from_yesterday": 2,
-      "exceeded_yesterday": false,
-      "profile_completed": true
+      "exceeded_yesterday": false
     },
     "motivation": {
       "message": "太棒了！你刚刚成功抵抗了一次烟瘾",
       "type": "praise"
-    },
-    "quick_actions": [
-      { "type": "log_smoke", "title": "记录抽烟", "primary": false },
-      { "type": "resist", "title": "想抽忍住了", "primary": true }
-    ],
-    "data_sources": {
-      "ai_advice_date": "2026-01-04",
-      "plan_date": "2026-01-05"
     }
   }
 }
 ```
 
 字段说明：
-- `greeting.title`：问候语 + 昵称（如“下午好，Alex”）。
-- `greeting.subtitle`：副标题/心情提示文案。
-- `greeting.nickname`：昵称（无昵称时使用“朋友”）。
-- `greeting.time_of_day`：时间段标识（`morning`/`noon`/`afternoon`/`evening`）。
-- `greeting.avatar_url`：头像 URL。
-- `profile.exists`：是否存在用户档案。
-- `profile.profile`：档案详情对象（可能为空）。
-- `profile.is_completed`：是否已完成 onboarding。
-- `profile.awake_minutes`：清醒时长（分钟）。
-- `profile.baseline_interval_minutes`：基准间隔（分钟）。
-- `advice_card.title`：AI 提示卡片标题。
-- `advice_card.date`：建议对应日期。
-- `advice_card.message`：AI 建议内容。
-- `advice_card.status`：`available`、`locked`（需解锁）、`unavailable`（AI 服务未配置）、`no_data`（所需日期没有记录）、`empty`（初始化）。
-- `advice_card.model`：模型名称（有则返回）。
-- `campaign_card.title`：活动标题。
-- `campaign_card.subtitle`：活动副标题。
-- `campaign_card.badge`：活动角标（如“广告”）。
-- `timer.label`：展示标题（如“距上次抽烟”）。
-- `timer.last_smoke_at`：最近一次实际抽烟时间（RFC3339）。
 - `timer.seconds_since_last`：距上次抽烟的秒数（无记录返回 `-1`）。
 - `timer.next_suggested_at`：建议下次抽烟时间（RFC3339）。
 - `timer.next_suggested_clock`：仅时分显示（如“16:30”）。
-- `timer.not_before_at`：不早于的时间点（当前与 `next_suggested_at` 一致）。
 - `timer.suggestion_source`：建议来源（`default`/`ai`）。
-- `timer.suggestion_algorithm`：算法版本（`staircase_delay_v1`）。
-- `timer` 说明：`seconds_since_last` 基于服务器当前时间计算，`last_smoke_at` 若补录未来时间会截断到 `as_of`；当 `plan_date=今天` 时会补齐过期间隔确保 `next_suggested_at` 在未来。
 - `summary.today_count`：今日吸烟支数累加。
-- `summary.daily_target`：每日目标（线性递减：以 `onboarding_completed_at` 为起点，按 `quit_date` 线性下降到 0）。
-- `summary.resisted_count`：今日忍住次数。
+- `summary.daily_target`：每日目标。
 - `summary.reduced_from_yesterday`：与昨日的绝对差值（非负）。
 - `summary.exceeded_yesterday`：是否比昨天多。
-- `summary.profile_completed`：是否已完成基础信息。
+- `daily_summary`：当天已缓存的 AI 日总结；无缓存时为 `null`。
 - `motivation.message`：激励语文案。
 - `motivation.type`：激励语类型。
-- `quick_actions[].type`：动作类型（`log_smoke`/`resist`）。
-- `quick_actions[].title`：按钮文案。
-- `quick_actions[].primary`：是否主按钮。
-- `data_sources.ai_advice_date`：AI 建议日期。
-- `data_sources.plan_date`：当前计划日期。
 
-如需 AI 时间节点完整版，可继续调用 `GET /ai/next_smoke_time`；首页接口只返回默认建议，避免额外的 AI 生成成本。
-
-未满足权限时的建议响应（示例）：
-```json
-{
-  "code": 403,
-  "message": "需要会员或观看广告解锁后才可生成建议",
-  "data": {
-    "date": "2026-01-02",
-    "need": "vip_or_ad"
-  }
-}
-```
-
-成功响应（示例）：
-```json
-{
-  "code": 200,
-  "message": "success",
-  "data": {
-    "date": "2026-01-02",
-    "advice": "..."
-  }
-}
-```
+如需生成 AI 时间节点，请调用 `GET /api/v1/smoke/ai/next_smoke_time`；首页接口只读取缓存，不主动生成 AI 建议，避免额外性能成本。
 
 ## 10) 看广告解锁（用于非会员）
 
@@ -451,33 +270,13 @@ curl -X GET 'http://127.0.0.1:8080/api/v1/smoke/logs/5202' \
 
 成功响应：同 `GET /api/v1/smoke/profile`（返回最新 `profile` + `is_completed` + `baseline_interval_minutes`）。
 
-## 13) 想抽但忍住了（写入一条 level=0,num=0 的记录）
+## 13) 获取 AI 下次抽烟建议
 
-`POST /api/v1/smoke/logs/resisted`
-
-请求体（示例）：
-```json
-{
-  "smoke_time": "2026-01-05",
-  "smoke_at": "2026-01-05 10:20:00",
-  "remark": "压力大，想抽但忍住了",
-  "level": 0,
-  "num": 0
-}
-```
+`GET /api/v1/smoke/ai/next_smoke_time`
 
 说明：
-- 该接口会在 `fa_smoke_log` 中新增一条记录：`level=0` 且 `num=0`，用于更直观记录“想抽/忍住”的过程。
-- 这类记录不会影响 `today_count/weekly.count` 的支数统计（因为 `num=0`）。
-
-## 14) 获取“下次抽烟记录时间”（默认 + AI 自动切换）
-
-`GET /api/v1/smoke/next_smoke_time`
-
-说明：
-- 用于首页展示“建议的下次记录时间”。
-- 已整合首页所需汇总字段（上次抽烟时间/今日抽烟支数/今日克制次数/较昨日减少支数）。
-- 如果指定日期存在 AI 给出的时间节点（`time_nodes` 不为空），则优先使用 AI 的建议；否则使用默认策略。
+- 用于 AI 建议页生成当天时间节点。
+- 首页只通过 `GET /smoke/home` 读取已缓存的 AI 结果，不主动生成 AI，避免首页加载时产生额外性能成本。
 - 可选参数：
   - `date`：计划日期（默认今天），支持 `YYYY-MM-DD` 或 `today/tomorrow`。
   - `mode`（默认 `auto`）
@@ -495,74 +294,21 @@ AI 生成说明：
 - 当 `mode=ai` 时，会把最近 3 天的抽烟数据（含“忍住记录”）作为输入提供给 AI，用于更贴合近期模式生成时间节点。
 - 未解锁时会返回 `403`：提示需要观看广告解锁。
 
-成功响应（示例：回落到默认）：
-```json
-{
-  "code": 200,
-  "message": "success",
-  "data": {
-    "source": "default",
-    "not_before_at": "2026-01-05T10:18:00+08:00",
-    "suggested_at": "2026-01-05T10:18:00+08:00",
-    "last_smoke_at": "2026-01-05T09:30:00+08:00",
-    "today_count": 3,
-    "resisted_count": 1,
-    "reduced_from_yesterday": 2,
-    "exceeded_yesterday": false,
-    "default": {
-      "last_smoke_at": "2026-01-05T09:30:00+08:00",
-      "next_smoke_at": "2026-01-05T10:18:00+08:00",
-      "base_interval_minutes": 48,
-      "interval_minutes": 48,
-      "stage": 0,
-      "resisted_7d": 3,
-      "sleep_adjusted": false,
-      "algorithm": "staircase_delay_v1",
-      "as_of": "2026-01-05T10:00:00+08:00"
-    }
-  }
-}
-```
-
-当存在 AI 建议且包含 `time_nodes` 时，响应会是（示例）：
+成功响应（示例）：
 ```json
 {
   "code": 200,
   "message": "success",
   "data": {
     "source": "ai",
-    "not_before_at": "2026-01-05T10:18:00+08:00",
-    "suggested_at": "2026-01-05T10:28:00+08:00",
-    "last_smoke_at": "2026-01-05T09:30:00+08:00",
-    "today_count": 3,
-    "resisted_count": 1,
-    "reduced_from_yesterday": 2,
-    "exceeded_yesterday": false,
-    "time_nodes": ["10:30", "11:10", "14:00", "16:30"],
-    "advice": "先把这次冲动延后到10:28，期间做一次5分钟快走+喝水，压力场景用深呼吸替代。",
-    "default": { "algorithm": "staircase_delay_v1" },
-    "ai": {
-      "plan_date": "2026-01-05",
-      "not_before_at": "2026-01-05T10:18:00+08:00",
     "suggested_at": "2026-01-05T10:28:00+08:00",
     "time_nodes": ["10:30", "11:10", "14:00", "16:30"],
-      "advice": "先把这次冲动延后到10:28，期间做一次5分钟快走+喝水，压力场景用深呼吸替代。",
-      "prompt_version": "v1",
-      "model": "gpt-4.1-mini",
-      "provider": "openai-compatible"
-    }
+    "advice": "先把这次冲动延后到10:28，期间做一次5分钟快走+喝水，压力场景用深呼吸替代。"
   }
 }
 ```
 
-字段说明（新增首页字段）：
-- `last_smoke_at`：上次“实际抽烟”时间（忽略忍住记录），格式 `RFC3339`（含时区）。
-- `today_count`：今日抽烟支数（累加 `num`）。
-- `resisted_count`：今日克制次数（`num=0`）。
-- `reduced_from_yesterday`：较昨日减少的支数（允许为负数；为负时表示“今天超出昨日”）。
-- `exceeded_yesterday`：是否超出昨日（`true` 表示今天超出昨日，前端可用作单独标识）。
-
-## 15) 数据统计分析（趋势 + 健康 + 省钱）
+## 14) 数据统计分析（趋势 + 健康 + 省钱）
 
 `GET /api/v1/smoke/stats?range=week|month|year&date=2026-01-07`
 
@@ -625,21 +371,58 @@ AI 生成说明：
 - `money.saved_cent`：按 `max(expected_total - actual_total, 0)` 计算，避免出现负值。
 - `health.available=false`：表示无历史记录。
 
-## 16) 激励语（后端统一生成）
+## 15) 成就主题与当前称号
 
-`GET /api/v1/smoke/motivation`
+`GET /api/v1/smoke/achievement/themes`
 
-说明：
-- 基于当日数据（如 `today_count`、`resisted_count`、`last_smoke_at`）与 `quit_motivations` 生成一句激励语。
+返回 onboarding 可选择的称号主题。每个主题包含 `icon/name/key/levels`，前端在“重填问卷”中展示。
 
-成功响应（示例）：
+`GET /api/v1/smoke/achievement`
+
+返回当前用户所选主题下的当前等级、下一等级和进度。记录抽烟模式使用“少抽积分”进阶；戒烟打卡模式仍使用连续记录天数进阶。
+
+记录模式少抽积分算法：
+- 统计窗口：从 `onboarding_completed_at` 到今天，最多回看最近 90 天。
+- 只统计有记录的日期，避免无记录日期被误判为 0 根。
+- 每日基础分：`max(0, baseline_cigs_per_day - 当日抽烟支数)`。
+- 当日少抽比例 `>=30%` 额外 `+1` 分。
+- 当日少抽比例 `>=60%` 额外 `+2` 分。
+- 当日抽烟支数为 `0` 额外 `+3` 分。
+- 总积分用于匹配所选主题的等级阈值；`fa_achievement_level.required_days` 在记录模式下作为 `required_score` 使用。
+
+成功响应示例：
 ```json
 {
   "code": 200,
   "message": "success",
   "data": {
-    "message": "今天的表现很稳，继续保持！记住你的目标：身体健康。",
-    "type": "encourage"
+    "achievement": {
+      "theme_id": 1,
+      "theme_name": "意志骑士",
+      "theme_key": "knight",
+      "theme_icon": "🛡️",
+      "metric_type": "score",
+      "score": 48,
+      "metrics": {
+        "baseline_cigs_per_day": 10,
+        "scored_days": 7,
+        "total_reduced_cigs": 36,
+        "today_reduced_cigs": 4,
+        "today_reduce_percent": 40,
+        "stable_days": 6
+      },
+      "current": {
+        "name": "见习骑士",
+        "icon": "🛡️",
+        "required_score": 30
+      },
+      "next": {
+        "name": "白银骑士",
+        "icon": "⚔️",
+        "required_score": 80
+      },
+      "progress": 0.36
+    }
   }
 }
 ```

docs/nsti.md

@@ -0,0 +1,55 @@
+# NSTI 戒烟人格测试
+
+## 概览
+
+`NSTI` 是为 `smt` 小程序新增的一组轻量娱乐化测试页面，用 10 道题和 16 种抽象人格帮助用户以更低心理压力进入戒烟主题。
+
+当前实现为纯前端方案，不依赖后端接口：
+
+- 题库和人格画像：`src/utils/nsti-data.js`
+- 结果算法与本地存储：`src/utils/nsti.js`
+- 测试首页：`src/pages/nsti/index.vue`
+- 答题页：`src/pages/nsti/test.vue`
+- 结果页：`src/pages/nsti/result.vue`
+- 入口位置：`src/pages/profile/index.vue`
+
+## 页面流转
+
+1. 用户从“我的”页进入 `NSTI 戒烟人格测试`
+2. 在 `pages/nsti/index` 查看测试说明和最近结果
+3. 进入 `pages/nsti/test` 完成 10 道题
+4. 本地计算结果后跳转 `pages/nsti/result`
+5. 结果页可重新测试、分享文案、进入戒烟主流程
+
+## 数据与存储
+
+使用本地缓存保存测试结果和草稿：
+
+- `nsti_latest_result`：最近一次结果
+- `nsti_history`：历史结果列表，最多保留 12 条
+- `nsti_draft`：中途退出后的答题草稿
+
+对应常量定义在 `src/utils/storage.js`。
+
+## 结果算法
+
+当前算法采用“维度计数 + 人格权重”的混合方案：
+
+1. 每道题的 A/B/C/D 选项分别代表一种行为维度
+2. 每个选项同时会给 1-2 个具体人格加权
+3. 提交后先统计维度分布，再统计人格得分
+4. 根据前两高维度组合给对应人格一个额外加权
+5. 取最终得分最高的人格作为结果，若分数相同则优先更抽象的人格
+
+这种做法兼顾了：
+
+- 题目抽象风格和直觉作答体验
+- 16 型人格的差异化结果
+- 后续扩展为后台配置时的可维护性
+
+## 后续可扩展方向
+
+- 把题库和人格画像迁移到后台配置
+- 记录测试完成率、分享率、人格分布
+- 把人格结果与首页激励文案、AI 建议、戒烟计划联动
+- 增加人格历史对比和“再次测试看变化”

src/App.vue

@@ -49,177 +49,174 @@ export default {
 }
 </script>
 
-<style>
+<style lang="scss">
 page {
-	background:
-		radial-gradient(circle at top left, rgba(52, 200, 160, 0.14), transparent 28%),
-		radial-gradient(circle at top right, rgba(255, 255, 255, 0.78), transparent 24%),
-		linear-gradient(180deg, #eef3f8 0%, #f5f7fb 38%, #fbfdff 100%);
-	color: #111827;
-	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-	font-size: 28rpx;
-	line-height: 1.5;
+	background: $bg-page-gradient;
+	color: $text-primary;
+	font-family: $font-family-base;
+	font-size: $font-lg;
+	line-height: $line-height-normal;
 }
 
+// ---- 容器 ----
 .container {
-	padding: 32rpx;
+	padding: $spacing-xl;
 	min-height: 100vh;
 	box-sizing: border-box;
 }
 
+// ---- 统一卡片 ----
 .card {
-	background: rgba(255, 255, 255, 0.82);
-	border-radius: 28rpx;
-	padding: 32rpx;
-	margin-bottom: 24rpx;
-	border: 2rpx solid rgba(255, 255, 255, 0.64);
-	box-shadow: 0 10rpx 30rpx rgba(15, 23, 42, 0.06);
-	backdrop-filter: blur(24rpx);
-	-webkit-backdrop-filter: blur(24rpx);
+	@include card-base;
+	margin-bottom: $spacing-lg;
 }
 
-.card-light {
-	background: rgba(255, 255, 255, 0.62);
+.card-solid {
+	@include card-solid;
+	margin-bottom: $spacing-lg;
 }
 
-.text-primary {
-	color: #1AA37A;
+.card-glass {
+	@include card-glass;
+	margin-bottom: $spacing-lg;
 }
 
-.text-secondary {
-	color: #667085;
+.card-elevated {
+	@include card-elevated;
+	margin-bottom: $spacing-lg;
 }
 
-.text-muted {
-	color: #98A2B3;
+.card-subtle {
+	@include card-subtle;
 }
 
-.text-center {
-	text-align: center;
-}
+// ---- 文字工具类 ----
+.text-primary { color: $color-primary-dark; }
+.text-secondary { color: $text-secondary; }
+.text-muted { color: $text-muted; }
+.text-center { text-align: center; }
+.text-bold { font-weight: $font-weight-semibold; }
 
-.text-bold {
-	font-weight: 600;
-}
+// ---- Flex 工具类 ----
+.flex { display: flex; }
+.flex-center { @include flex-center; }
+.flex-between { @include flex-between; }
+.flex-col { @include flex-col; }
+.flex-1 { flex: 1; }
 
-.flex {
-	display: flex;
-}
-
-.flex-center {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-}
-
-.flex-between {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-}
-
-.flex-col {
-	display: flex;
-	flex-direction: column;
-}
-
-.flex-1 {
-	flex: 1;
-}
-
-.gap-sm {
-	gap: 16rpx;
-}
-
-.gap-md {
-	gap: 24rpx;
-}
-
-.gap-lg {
-	gap: 32rpx;
-}
-
-.mt-sm {
-	margin-top: 16rpx;
-}
-
-.mt-md {
-	margin-top: 24rpx;
-}
-
-.mt-lg {
-	margin-top: 32rpx;
-}
-
-.mb-sm {
-	margin-bottom: 16rpx;
-}
-
-.mb-md {
-	margin-bottom: 24rpx;
-}
-
-.mb-lg {
-	margin-bottom: 32rpx;
-}
+// ---- 间距工具类 ----
+.gap-sm { gap: $spacing-md; }
+.gap-md { gap: $spacing-lg; }
+.gap-lg { gap: $spacing-xl; }
+.mt-sm { margin-top: $spacing-md; }
+.mt-md { margin-top: $spacing-lg; }
+.mt-lg { margin-top: $spacing-xl; }
+.mb-sm { margin-bottom: $spacing-md; }
+.mb-md { margin-bottom: $spacing-lg; }
+.mb-lg { margin-bottom: $spacing-xl; }
 
+// ---- 统一按钮 ----
 .btn {
-	display: flex;
-	align-items: center;
-	justify-content: center;
+	@include btn-base;
 	height: 96rpx;
-	border-radius: 999rpx;
-	font-size: 32rpx;
-	font-weight: 600;
+	font-size: $font-2xl;
 }
 
 .btn-primary {
-	background: linear-gradient(180deg, #32c59d 0%, #1aa37a 100%);
-	color: #FFFFFF;
-	box-shadow: 0 12rpx 28rpx rgba(26, 163, 122, 0.22);
+	@include btn-primary;
 }
 
 .btn-secondary {
-	background: rgba(255, 255, 255, 0.82);
-	color: #111827;
-	border: 2rpx solid rgba(15, 23, 42, 0.08);
+	@include btn-secondary;
 }
 
 .btn-outline {
-	background-color: transparent;
-	color: #1AA37A;
-	border: 2rpx solid rgba(26, 163, 122, 0.32);
+	@include btn-outline;
 }
 
-.glass-card {
-	background: rgba(255, 255, 255, 0.68);
-	border: 2rpx solid rgba(255, 255, 255, 0.66);
-	box-shadow: 0 12rpx 32rpx rgba(15, 23, 42, 0.07);
-	backdrop-filter: blur(28rpx);
-	-webkit-backdrop-filter: blur(28rpx);
+// ---- 统一标签 ----
+.chip {
+	@include chip;
 }
 
-.surface-card {
-	background: rgba(255, 255, 255, 0.9);
-	border: 2rpx solid rgba(15, 23, 42, 0.06);
-	box-shadow: 0 10rpx 30rpx rgba(15, 23, 42, 0.05);
+.chip-primary {
+	@include chip-primary;
 }
 
-.pill-chip {
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	padding: 12rpx 22rpx;
-	border-radius: 999rpx;
-	background: rgba(255, 255, 255, 0.72);
-	border: 2rpx solid rgba(255, 255, 255, 0.68);
-	color: #475467;
-	font-size: 22rpx;
-	font-weight: 600;
+.chip-muted {
+	@include chip-muted;
 }
 
+.badge {
+	@include badge;
+}
+
+// ---- 进度条 ----
+.progress-bar {
+	@include progress-bar;
+}
+
+.progress-fill {
+	@include progress-fill;
+}
+
+.progress-fill-done {
+	@include progress-fill;
+	background: linear-gradient(90deg, $color-primary, $color-primary-light);
+}
+
+.progress-fill-pending {
+	@include progress-fill;
+	background: rgba($color-primary, 0.3);
+}
+
+// ---- 圆环 ----
+.ring {
+	@include ring;
+}
+
+.ring-inner {
+	@include ring-inner;
+	width: 82rpx;
+	height: 82rpx;
+}
+
+.ring-value {
+	font-size: $font-sm;
+	font-weight: $font-weight-bold;
+	color: $text-primary;
+}
+
+.ring-label {
+	font-size: $font-xs;
+	color: $text-muted;
+}
+
+// ---- 安全区域 ----
 .safe-area-bottom {
-	padding-bottom: constant(safe-area-inset-bottom);
-	padding-bottom: env(safe-area-inset-bottom);
+	@include safe-area-bottom;
+}
+
+// ---- 底部占位 ----
+.bottom-safe {
+	height: calc(#{$spacing-xl} + env(safe-area-inset-bottom));
+}
+
+// ---- 骨架屏动画 ----
+@keyframes shimmer {
+	0% { background-position: -200% 0; }
+	100% { background-position: 200% 0; }
+}
+
+@keyframes fabFloat {
+	0%, 100% { transform: translateY(0); }
+	50% { transform: translateY(-6rpx); }
+}
+
+// ---- 分割线 ----
+.divider {
+	height: 1px;
+	background: $border-divider;
+	margin: 0;
 }
 </style>

src/api/auth.js

@@ -2,6 +2,7 @@ import { request } from './request'
 import { MINI_PROGRAM_ID } from '@/config'
 import pinia, { useUserStore } from '@/stores'
 import { storage, SESSION_KEY, USER_KEY, USER_MODE_KEY } from '@/utils/storage'
+import { BASE_URL } from '@/config'
 
 const H5_DEBUG_SESSION_KEY = 'FxLFPHHBw49loODmRSvqdg=='
 
@@ -62,3 +63,83 @@ export function logout() {
 	storage.remove(SESSION_KEY)
 	storage.remove(USER_KEY)
 }
+
+export async function updateUserProfile(data) {
+	const res = await request.put('/auth/profile', data)
+	const user = storage.get(USER_KEY)
+	if (user && res.data) {
+		if (res.data.nickname) user.nickname = res.data.nickname
+		if (res.data.avatar_url) user.avatar_url = res.data.avatar_url
+		storage.set(USER_KEY, user)
+	}
+	return res
+}
+
+export { updateUserProfile as updateProfile }
+
+export function getUploadToken(filename) {
+	return request.post('/common/upload/oss/token', { filename })
+}
+
+export function downloadMiniProgramTestCode(params = {}) {
+	const sessionKey = storage.get(SESSION_KEY)
+	const path = encodeURIComponent(params.path || 'pages/nsti/test?resume=0')
+	const width = params.width || 280
+	return new Promise((resolve, reject) => {
+		uni.downloadFile({
+			url: `${BASE_URL}/auth/mini-program-test-code?path=${path}&width=${width}`,
+			header: {
+				Authorization: sessionKey ? `Bearer ${sessionKey}` : ''
+			},
+			success: (res) => {
+				if (res.statusCode === 200 && res.tempFilePath) {
+					resolve(res.tempFilePath)
+					return
+				}
+				reject(new Error(`下载小程序码失败: ${res.statusCode || 'unknown'}`))
+			},
+			fail: (err) => reject(err)
+		})
+	})
+}
+
+export async function uploadFile(filePath) {
+	const ext = filePath.split('.').pop() || 'jpg'
+	const tokenRes = await getUploadToken(`avatar.${ext}`)
+	const data = tokenRes.data
+
+	let uploadUrl = (data.upload_url || '').replace(/\/$/, '')
+	if (!uploadUrl || uploadUrl.indexOf('aliyuncs.com') === -1) {
+		uploadUrl = (data.cdn_domain || '').replace(/\/$/, '')
+		if (uploadUrl && uploadUrl.indexOf('http') !== 0) {
+			uploadUrl = 'https://' + uploadUrl
+		}
+	}
+
+	return new Promise((resolve, reject) => {
+		uni.uploadFile({
+			url: uploadUrl,
+			filePath,
+			name: 'file',
+			formData: {
+				key: data.key,
+				OSSAccessKeyId: data.oss_access_key_id,
+				policy: data.oss_policy,
+				Signature: data.oss_signature
+			},
+			success: (res) => {
+				const code = res.statusCode || 0
+				if (code === 200 || code === 204 || (code >= 200 && code < 300)) {
+					const cdnDomain = (data.cdn_domain || '').replace(/\/$/, '')
+					const fileUrl = cdnDomain.startsWith('http')
+						? `${cdnDomain}/${data.key}`
+						: `https://${cdnDomain}/${data.key}`
+					resolve({ url: fileUrl, key: data.key })
+				} else {
+					reject(new Error('上传失败: ' + (res.data || code)))
+				}
+			},
+			fail: (err) => reject(new Error(err.errMsg || '上传失败'))
+		})
+	})
+}

src/api/index.js

@@ -1,3 +1,3 @@
 export * from './auth'
 export * from './smoke'
-export * from './profile'
+export { getProfile as getSmokeProfile, updateProfile as updateSmokeProfile } from './profile'

src/api/request.js

@@ -13,12 +13,12 @@ function isInvalidToken(res) {
 export const request = {
 	async request(options) {
 		const sessionKey = storage.get(SESSION_KEY)
-		// 测试 
 		const isRetryAfter401 = options._retryAfter401 === true
+		const baseUrl = options.baseUrl || BASE_URL
 
 		return new Promise((resolve, reject) => {
 			uni.request({
-				url: BASE_URL + options.url,
+				url: baseUrl + options.url,
 				method: options.method || 'GET',
 				data: options.data,
 				header: {

src/api/smoke.js

@@ -1,29 +1,16 @@
 import { request } from './request'
+import { BASE_URL } from '@/config'
 
-export function getDashboard(params = {}) {
-	return request.get('/smoke/dashboard', params)
-}
+const BASE_URL_V2 = BASE_URL.replace('/v1', '/v2')
 
 export function getHome(params = {}) {
 	return request.get('/smoke/home', params)
 }
 
-export function getNextSmokeTime(params = {}) {
-	return request.get('/smoke/next_smoke_time', params)
-}
-
 export function getLogs(params = {}) {
 	return request.get('/smoke/logs', params)
 }
 
-export function getLatestLogs(limit = 20) {
-	return request.get('/smoke/logs/latest', { limit })
-}
-
-export function getLog(id) {
-	return request.get(`/smoke/logs/${id}`)
-}
-
 export function createLog(data) {
 	return request.post('/smoke/logs', data)
 }
@@ -36,14 +23,6 @@ export function deleteLog(id) {
 	return request.delete(`/smoke/logs/${id}`)
 }
 
-export function createResistedLog(data) {
-	return request.post('/smoke/logs/resisted', data)
-}
-
-export function getAiAdvice(date) {
-	return request.get('/smoke/ai/advice', { date })
-}
-
 export function unlockAiAdvice(data) {
 	return request.post('/smoke/ai/advice_unlocks', data)
 }
@@ -68,10 +47,6 @@ export function getShareData(shareToken, params = {}) {
 	return request.get(`/smoke/share/${shareToken}`, params)
 }
 
-export function revokeShare(shareToken) {
-	return request.post(`/smoke/share/${shareToken}/revoke`)
-}
-
 // 戒烟计划 API
 export function generateQuitPlan() {
 	return request.post('/smoke/quit-plan/generate')
@@ -88,3 +63,77 @@ export function getQuitPlanDays(planId) {
 export function resetQuitPlan() {
 	return request.post('/smoke/quit-plan/reset')
 }
+
+// 成就系统 API
+export function getAchievementThemes() {
+	return request.get('/smoke/achievement/themes')
+}
+
+export function getAchievement() {
+	return request.get('/smoke/achievement')
+}
+
+// V2 戒烟打卡 API
+export function getQuitCheckinHome() {
+	return request.request({ url: '/checkin/home', method: 'GET', baseUrl: BASE_URL_V2 })
+}
+
+export function quitCheckin(data = {}) {
+	return request.request({ url: '/checkin/check', method: 'POST', data, baseUrl: BASE_URL_V2 })
+}
+
+export function upsertQuitCheckinProfile(data) {
+	return request.request({ url: '/profile', method: 'POST', data, baseUrl: BASE_URL_V2 })
+}
+
+// 预设梦想目标
+export function listDreamPresets() {
+	return request.request({ url: '/dream-presets', method: 'GET', baseUrl: BASE_URL_V2 })
+}
+
+// 梦想目标 API
+export function listRewardGoals(status = 'all') {
+	return request.request({ url: '/reward-goals', method: 'GET', data: { status }, baseUrl: BASE_URL_V2 })
+}
+
+export function createRewardGoal(data) {
+	return request.request({ url: '/reward-goals', method: 'POST', data, baseUrl: BASE_URL_V2 })
+}
+
+export function updateRewardGoal(id, data) {
+	return request.request({ url: `/reward-goals/${id}`, method: 'PUT', data, baseUrl: BASE_URL_V2 })
+}
+
+// 监督人机制（Phase 3）
+export function createSupervisorInvite(days = 7) {
+	return request.request({ url: '/supervisor/invites', method: 'POST', data: { days }, baseUrl: BASE_URL_V2 })
+}
+
+export function bindSupervisorInvite(token) {
+	return request.request({ url: '/supervisor/bind', method: 'POST', data: { token }, baseUrl: BASE_URL_V2 })
+}
+
+export function getSupervisorOverview() {
+	return request.request({ url: '/supervisor/overview', method: 'GET', baseUrl: BASE_URL_V2 })
+}
+
+export function getSupervisorStatus() {
+	return request.request({ url: '/supervisor/status', method: 'GET', baseUrl: BASE_URL_V2 })
+}
+
+export function revokeSupervisorBinding(owner_uid, supervisor_uid) {
+	return request.request({ url: '/supervisor/revoke', method: 'POST', data: { owner_uid, supervisor_uid }, baseUrl: BASE_URL_V2 })
+}
+
+// 监督提醒（Phase 3 / #42）
+export function getSupervisorReminderSettings() {
+	return request.request({ url: '/supervisor/reminders/settings', method: 'GET', baseUrl: BASE_URL_V2 })
+}
+
+export function updateSupervisorReminderSettings(data = {}) {
+	return request.request({ url: '/supervisor/reminders/settings', method: 'PUT', data, baseUrl: BASE_URL_V2 })
+}
+
+export function runSupervisorReminders() {
+	return request.request({ url: '/supervisor/reminders/run', method: 'POST', baseUrl: BASE_URL_V2 })
+}

src/components/smoke-record-dialog/README.md

@@ -11,6 +11,8 @@
 - ✅ 从底部弹出动画效果
 - ✅ 半屏展示，优化用户体验
 - ✅ 支持两种模式：抽烟记录 / 忍住记录
+- ✅ 快捷标签、多选原因与补充备注
+- ✅ `quickMode` 快速记录模式
 - ✅ 完整的表单功能
 - ✅ 已配置 easycom 自动导入
 
@@ -58,6 +60,8 @@ function handleSubmit(data) {
 |------|------|--------|------|
 | show | Boolean | false | 控制弹框显示/隐藏（支持 v-model） |
 | type | String | 'smoke' | 记录类型：'smoke'(抽烟) 或 'resisted'(忍住) |
+| initialData | Object | null | 编辑模式下的初始值 |
+| quickMode | Boolean | false | 是否启用快速记录模式，默认隐藏高级项 |
 
 ## 🎪 Events
 
@@ -72,6 +76,7 @@ function handleSubmit(data) {
 {
   smoke_time: "2025-01-25",        // 日期
   smoke_at: "2025-01-25 14:30:00", // 完整时间
+  reason_tags: ["stress"],         // 原因标签（可选）
   remark: "压力大",                 // 备注（可选）
   level: 2,                         // 烟瘾等级 1-5
   num: 3                            // 数量（忍住时为0）
@@ -90,6 +95,7 @@ function handleSubmit(data) {
     <smoke-record-dialog 
       v-model:show="showDialog"
       type="smoke"
+      :quick-mode="true"
       @submit="onSmokeSubmit"
     />
   </view>
@@ -179,3 +185,4 @@ async function onResistedSubmit(data) {
 3. 已配置 easycom，无需手动导入
 4. 提交后弹框会自动关闭
 5. 表单数据会在打开时自动初始化为当前时间
+6. 当后端尚未消费 `reason_tags` 时，组件会把已选标签合并进 `remark`，避免信息丢失

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

@@ -3,11 +3,93 @@
 		<view class="dialog-container" :class="{ 'dialog-show': showAnimation }" @tap.stop>
 			<view class="dialog-handle"></view>
 			<view class="dialog-header">
+				<view>
 					<text class="dialog-title">{{ title }}</text>
+					<text v-if="quickModeActive" class="dialog-subtitle">{{ quickModeSummary }}</text>
+				</view>
 				<view class="dialog-close" @tap="close">×</view>
 			</view>
 
 			<view class="dialog-body">
+				<template v-if="quickModeActive">
+					<view class="quick-banner">
+						<view class="quick-banner-chip">
+							<text class="quick-banner-chip-label">默认时间</text>
+							<text class="quick-banner-chip-value">{{ formData.smoke_time_only }}</text>
+						</view>
+						<view class="quick-banner-chip" v-if="type === 'smoke'">
+							<text class="quick-banner-chip-label">默认数量</text>
+							<text class="quick-banner-chip-value">{{ formData.num }} 支</text>
+						</view>
+						<text class="quick-banner-tip">先选择系统场景；如果选“其他”，再补充自定义原因。</text>
+					</view>
+
+					<view v-if="type === 'smoke'" class="section-card level-section-quick">
+						<view class="level-header">
+							<text class="section-title">烟瘾等级</text>
+							<view class="level-badge">Level {{ formData.level }}</view>
+						</view>
+						<slider
+							class="level-slider"
+							:value="formData.level"
+							:min="1"
+							:max="5"
+							:step="1"
+							activeColor="#22C55E"
+							backgroundColor="#E5E7EB"
+							block-color="#22C55E"
+							:block-size="20"
+							@change="onLevelChange"
+						/>
+						<view class="level-scale">
+							<text class="level-scale-text">无感</text>
+							<text class="level-scale-text">强烈</text>
+						</view>
+					</view>
+
+					<view class="section-card scene-section">
+						<view class="section-heading">
+							<text class="section-title">{{ sceneSectionTitle }}</text>
+							<text class="section-caption">系统预设，可多选</text>
+						</view>
+						<view class="reason-chip-grid">
+							<view
+								v-for="item in quickReasonOptions"
+								:key="item.key"
+								class="reason-chip"
+								:class="{ 'reason-chip-active': isReasonSelected(item.key) }"
+								@tap="toggleReason(item.key)"
+							>
+								<text class="reason-chip-text">{{ item.label }}</text>
+							</view>
+						</view>
+					</view>
+
+					<view v-if="showCustomReasonInput" class="remark-section">
+						<view class="section-heading">
+							<text class="section-title">其他场景</text>
+							<text class="section-caption">自填</text>
+						</view>
+						<view class="remark-card">
+							<textarea
+								class="form-textarea form-textarea-compact"
+								v-model="formData.custom_reason"
+								:placeholder="customReasonPlaceholder"
+								maxlength="120"
+							/>
+						</view>
+					</view>
+
+					<view class="advanced-toggle" @tap="showAdvanced = !showAdvanced">
+						<view>
+							<text class="advanced-toggle-title">{{ showAdvanced ? '收起高级设置' : '展开高级设置' }}</text>
+							<text class="advanced-toggle-desc">修改时间和数量</text>
+						</view>
+						<text class="advanced-toggle-arrow">{{ showAdvanced ? '⌃' : '⌄' }}</text>
+					</view>
+				</template>
+
+				<view v-if="showAdvanced || !quickModeActive" class="advanced-fields detail-top-fields">
 					<view class="form-row">
 						<picker class="picker-card" mode="date" :value="formData.smoke_time" @change="onDateChange">
 							<view class="input-card">
@@ -63,24 +145,62 @@
 							<text class="level-scale-text">强烈</text>
 						</view>
 					</view>
+				</view>
 
-				<view class="remark-section">
-					<text class="section-title">备注（可选）</text>
+				<template v-if="!quickModeActive">
+					<view class="section-card scene-section">
+						<view class="section-heading">
+							<text class="section-title">{{ sceneSectionTitle }}</text>
+							<text class="section-caption">系统预设，可多选</text>
+						</view>
+						<view class="reason-chip-grid">
+							<view
+								v-for="item in quickReasonOptions"
+								:key="item.key"
+								class="reason-chip"
+								:class="{ 'reason-chip-active': isReasonSelected(item.key) }"
+								@tap="toggleReason(item.key)"
+							>
+								<text class="reason-chip-text">{{ item.label }}</text>
+							</view>
+						</view>
+					</view>
+
+					<view v-if="showCustomReasonInput" class="remark-section">
+						<view class="section-heading">
+							<text class="section-title">其他场景</text>
+							<text class="section-caption">自填</text>
+						</view>
+						<view class="remark-card">
+							<textarea
+								class="form-textarea form-textarea-compact"
+								v-model="formData.custom_reason"
+								:placeholder="customReasonPlaceholder"
+								maxlength="120"
+							/>
+						</view>
+					</view>
+
+					<view class="remark-section remark-section-bottom">
+						<view class="section-heading">
+							<text class="section-title">原因</text>
+							<text class="section-caption">可选，放在最后补充</text>
+						</view>
 						<view class="remark-card">
 							<textarea
 								class="form-textarea"
 								v-model="formData.remark"
-							:placeholder="type === 'smoke' ? '记录此时的心情或诱因，如压力大、应酬...' : '记录抵抗心得或诱因...'"
+								:placeholder="remarkPlaceholder"
 								maxlength="200"
 							/>
 						</view>
 					</view>
+				</template>
 			</view>
-			
 			<view class="dialog-footer">
 				<view class="dialog-btn-primary" @tap="submit">
 					<view class="btn-icon"></view>
-					<text class="btn-text">保存记录</text>
+					<text class="btn-text">{{ quickModeActive ? '快速保存' : '保存记录' }}</text>
 				</view>
 			</view>
 		</view>
@@ -88,6 +208,8 @@
 </template>
 
 <script>
+import { getReasonOptions, normalizeReasonTags, getReasonLabels } from '@/config/smoke-reasons'
+
 export default {
 	name: 'SmokeRecordDialog',
 	props: {
@@ -102,16 +224,23 @@ export default {
 		initialData: {
 			type: Object,
 			default: null
+		},
+		quickMode: {
+			type: Boolean,
+			default: false
 		}
 	},
 	data() {
 		return {
 			showAnimation: false,
+			showAdvanced: false,
 			formData: {
 				smoke_time: '',
 				smoke_time_only: '',
 				smoke_at: '',
 				remark: '',
+				custom_reason: '',
+				reason_tags: [],
 				level: 2,
 				num: 1
 			}
@@ -119,7 +248,51 @@ export default {
 	},
 	computed: {
 		title() {
-			return '添加记录'
+			if (this.type === 'resisted') {
+				return this.quickModeActive ? '记下这次忍住' : '添加忍住记录'
+			}
+			return this.quickModeActive ? '快速记录一根' : '添加抽烟记录'
+		},
+		quickModeActive() {
+			return this.quickMode && !this.initialData
+		},
+		quickModeSummary() {
+			return this.type === 'smoke'
+				? '默认按当前时间和 1 支记录，可直接选原因后保存'
+				: '默认按当前时间记录，可直接选原因后保存'
+		},
+		quickReasonOptions() {
+			return getReasonOptions(this.type)
+		},
+		sceneSectionTitle() {
+			return this.type === 'smoke' ? '选择抽烟场景' : '选择忍住场景'
+		},
+		reasonSectionTitle() {
+			return this.type === 'smoke' ? '这次为什么会抽？' : '这次是怎么扛住的？'
+		},
+		showCustomReasonInput() {
+			return this.formData.reason_tags.includes('other')
+		},
+		customReasonPlaceholder() {
+			return this.type === 'smoke'
+				? '写下系统场景里没有覆盖的触发点...'
+				: '写下这次具体是怎么撑过去的...'
+		},
+		remarkTitle() {
+			return this.formData.reason_tags.includes('other') ? '补充说明' : '补充备注'
+		},
+		remarkCaption() {
+			return this.formData.reason_tags.includes('other') ? '已选其他，建议补充一点细节' : '可选'
+		},
+		remarkPlaceholder() {
+			if (this.type === 'smoke') {
+				return this.formData.reason_tags.includes('other')
+					? '写下这次抽烟的具体原因...'
+					: '还想补充当时的场景或心情，可以写在这里'
+			}
+			return this.formData.reason_tags.includes('other')
+				? '写下这次忍住的具体方法或感受...'
+				: '可以补充这次是怎么撑过去的'
 		}
 	},
 	watch: {
@@ -136,18 +309,21 @@ export default {
 	},
 	methods: {
 		initFormData() {
-			// 如果有初始数据（编辑模式），使用初始数据
+			this.showAdvanced = !this.quickModeActive
 			if (this.initialData) {
 				this.formData = {
 					smoke_time: this.initialData.smoke_time || '',
 					smoke_time_only: this.initialData.smoke_time_only || '',
 					smoke_at: this.initialData.smoke_at || '',
 					remark: this.initialData.remark || '',
+					custom_reason: '',
+					reason_tags: normalizeReasonTags(this.initialData.reason_tags),
 					level: this.initialData.level ?? 2,
-					num: this.initialData.num ?? 1
+					num: this.resolveInitialNum(this.initialData)
 				}
-			} else {
-				// 新建模式，使用当前本地时间（不用 toISOString，避免 UTC 导致日期差一天）
+				return
+			}
+
 			const now = new Date()
 			const y = now.getFullYear()
 			const m = String(now.getMonth() + 1).padStart(2, '0')
@@ -161,10 +337,15 @@ export default {
 				smoke_time_only: timeStr,
 				smoke_at: datetimeStr,
 				remark: '',
+				custom_reason: '',
+				reason_tags: [],
 				level: 2,
 				num: this.type === 'smoke' ? 1 : 0
 			}
-			}
+		},
+		resolveInitialNum(initialData) {
+			if (this.type !== 'smoke') return 0
+			return initialData.num ?? 1
 		},
 		handleMaskClick() {
 			this.close()
@@ -197,6 +378,17 @@ export default {
 		onLevelChange(e) {
 			this.formData.level = e.detail.value
 		},
+		isReasonSelected(reasonKey) {
+			return this.formData.reason_tags.includes(reasonKey)
+		},
+		toggleReason(reasonKey) {
+			const exists = this.isReasonSelected(reasonKey)
+			if (exists) {
+				this.formData.reason_tags = this.formData.reason_tags.filter(item => item !== reasonKey)
+				return
+			}
+			this.formData.reason_tags = [...this.formData.reason_tags, reasonKey]
+		},
 		isTimeValid() {
 			const dateStr = this.formData.smoke_time
 			const timeStr = this.formData.smoke_time_only
@@ -221,6 +413,19 @@ export default {
 
 			return true
 		},
+		buildRemark() {
+			const customRemark = (this.formData.remark || '').trim()
+			const customReason = (this.formData.custom_reason || '').trim()
+			const reasonLabels = getReasonLabels(this.formData.reason_tags, this.type).filter(label => label !== '其他')
+			const parts = [...reasonLabels]
+			if (customReason) {
+				parts.push(customReason)
+			}
+			if (customRemark) {
+				parts.push(customRemark)
+			}
+			return parts.join('；')
+		},
 		submit() {
 			if (!this.isTimeValid()) {
 				return
@@ -229,7 +434,8 @@ export default {
 			const submitData = {
 				smoke_time: this.formData.smoke_time,
 				smoke_at: this.formData.smoke_at,
-				remark: this.formData.remark,
+				remark: this.buildRemark(),
+				reason_tags: [...this.formData.reason_tags],
 				level: this.formData.level,
 				num: this.type === 'smoke' ? this.formData.num : 0
 			}
@@ -283,17 +489,27 @@ export default {
 
 .dialog-header {
 	display: flex;
-	align-items: center;
+	align-items: flex-start;
 	justify-content: space-between;
 	padding: 24rpx 32rpx 16rpx;
+	gap: 16rpx;
 }
 
 .dialog-title {
+	display: block;
 	font-size: 40rpx;
 	font-weight: 700;
 	color: #111827;
 }
 
+.dialog-subtitle {
+	display: block;
+	margin-top: 10rpx;
+	font-size: 22rpx;
+	line-height: 1.5;
+	color: #6b7280;
+}
+
 .dialog-close {
 	width: 56rpx;
 	height: 56rpx;
@@ -301,10 +517,11 @@ export default {
 	align-items: center;
 	justify-content: center;
 	font-size: 44rpx;
-	color: #98A2B3;
+	color: #98a2b3;
 	line-height: 1;
 	background-color: rgba(255, 255, 255, 0.78);
 	border-radius: 50%;
+	flex-shrink: 0;
 }
 
 .dialog-body {
@@ -314,6 +531,164 @@ export default {
 	overflow-y: auto;
 }
 
+.quick-banner {
+	padding: 18rpx 20rpx;
+	margin-bottom: 24rpx;
+	border-radius: 24rpx;
+	background: linear-gradient(135deg, rgba(232, 249, 241, 0.96) 0%, rgba(246, 251, 249, 0.96) 100%);
+	border: 2rpx solid rgba(49, 193, 139, 0.14);
+	box-shadow: inset 0 1rpx 0 rgba(255, 255, 255, 0.95);
+}
+
+.quick-banner-chip {
+	display: inline-flex;
+	align-items: baseline;
+	gap: 8rpx;
+	padding: 10rpx 14rpx;
+	margin-right: 12rpx;
+	margin-bottom: 12rpx;
+	border-radius: 999rpx;
+	background: rgba(255, 255, 255, 0.78);
+	border: 1rpx solid rgba(15, 23, 42, 0.05);
+}
+
+.quick-banner-chip-label {
+	font-size: 20rpx;
+	color: #6b7280;
+}
+
+.quick-banner-chip-value {
+	font-size: 24rpx;
+	font-weight: 700;
+	color: #0f766e;
+}
+
+.quick-banner-tip {
+	display: block;
+	font-size: 22rpx;
+	line-height: 1.6;
+	color: #4b5563;
+}
+
+.section-card {
+	background-color: rgba(255, 255, 255, 0.84);
+	border-radius: 24rpx;
+	padding: 24rpx;
+	border: 2rpx solid rgba(255, 255, 255, 0.72);
+	box-shadow: 0 10rpx 24rpx rgba(15, 23, 42, 0.05);
+	margin-bottom: 24rpx;
+}
+
+.section-heading {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 12rpx;
+	margin-bottom: 16rpx;
+}
+
+.section-caption {
+	font-size: 20rpx;
+	font-weight: 600;
+	color: #9ca3af;
+}
+
+.reason-chip-grid {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 14rpx;
+}
+
+.reason-chip {
+	padding: 16rpx 20rpx;
+	border-radius: 999rpx;
+	background: rgba(247, 249, 252, 0.92);
+	border: 2rpx solid rgba(226, 232, 240, 0.9);
+	transition: all 0.2s ease;
+}
+
+.reason-chip-active {
+	background: linear-gradient(180deg, rgba(223, 250, 234, 0.96) 0%, rgba(209, 250, 229, 0.96) 100%);
+	border-color: rgba(26, 163, 122, 0.22);
+	box-shadow: 0 10rpx 18rpx rgba(26, 163, 122, 0.12);
+}
+
+.scene-section {
+	background:
+		linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(240, 249, 255, 0.72));
+}
+
+.reason-chip-text {
+	font-size: 24rpx;
+	font-weight: 600;
+	color: #111827;
+}
+
+.remark-section {
+	margin-bottom: 24rpx;
+}
+
+.remark-card {
+	margin-top: 16rpx;
+	background-color: rgba(255, 255, 255, 0.78);
+	border-radius: 20rpx;
+	padding: 8rpx;
+	border: 2rpx solid rgba(255, 255, 255, 0.72);
+}
+
+.form-textarea {
+	width: 100%;
+	min-height: 180rpx;
+	background-color: rgba(255, 255, 255, 0);
+	border-radius: 16rpx;
+	padding: 24rpx 20rpx;
+	font-size: 28rpx;
+	color: #111827;
+	border: 2rpx solid transparent;
+	box-sizing: border-box;
+}
+
+.form-textarea-compact {
+	min-height: 112rpx;
+}
+
+.remark-section-bottom {
+	margin-top: 4rpx;
+}
+
+.advanced-toggle {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 16rpx;
+	padding: 20rpx 22rpx;
+	margin-bottom: 24rpx;
+	border-radius: 22rpx;
+	background: rgba(255, 255, 255, 0.78);
+	border: 2rpx solid rgba(255, 255, 255, 0.72);
+	box-shadow: 0 8rpx 18rpx rgba(15, 23, 42, 0.04);
+}
+
+.advanced-toggle-title {
+	display: block;
+	font-size: 28rpx;
+	font-weight: 700;
+	color: #111827;
+}
+
+.advanced-toggle-desc {
+	display: block;
+	margin-top: 6rpx;
+	font-size: 22rpx;
+	color: #6b7280;
+}
+
+.advanced-toggle-arrow {
+	font-size: 28rpx;
+	color: #14936d;
+	font-weight: 700;
+}
+
 .form-row {
 	display: flex;
 	gap: 20rpx;
@@ -337,7 +712,7 @@ export default {
 
 .input-label {
 	font-size: 22rpx;
-	color: #9CA3AF;
+	color: #9ca3af;
 	margin-bottom: 12rpx;
 	font-weight: 500;
 }
@@ -352,7 +727,7 @@ export default {
 	width: 32rpx;
 	height: 32rpx;
 	border-radius: 8rpx;
-	background-color: #DCFCE7;
+	background-color: #dcfce7;
 	position: relative;
 }
 
@@ -363,7 +738,7 @@ export default {
 	top: 8rpx;
 	width: 20rpx;
 	height: 16rpx;
-	border: 2rpx solid #22C55E;
+	border: 2rpx solid #22c55e;
 	border-top-width: 6rpx;
 	border-radius: 4rpx;
 }
@@ -375,7 +750,7 @@ export default {
 	top: 8rpx;
 	width: 16rpx;
 	height: 16rpx;
-	border: 2rpx solid #22C55E;
+	border: 2rpx solid #22c55e;
 	border-radius: 50%;
 }
 
@@ -386,7 +761,7 @@ export default {
 	top: 12rpx;
 	width: 2rpx;
 	height: 8rpx;
-	background-color: #22C55E;
+	background-color: #22c55e;
 	transform-origin: bottom;
 }
 
@@ -396,15 +771,6 @@ export default {
 	color: #111827;
 }
 
-.section-card {
-	background-color: rgba(255, 255, 255, 0.84);
-	border-radius: 24rpx;
-	padding: 24rpx;
-	border: 2rpx solid rgba(255, 255, 255, 0.72);
-	box-shadow: 0 10rpx 24rpx rgba(15, 23, 42, 0.05);
-	margin-bottom: 24rpx;
-}
-
 .section-card-counter {
 	display: flex;
 	align-items: center;
@@ -425,7 +791,7 @@ export default {
 .section-icon {
 	width: 64rpx;
 	height: 64rpx;
-	background-color: #DCFCE7;
+	background-color: #dcfce7;
 	border-radius: 16rpx;
 	position: relative;
 }
@@ -438,7 +804,7 @@ export default {
 	width: 28rpx;
 	height: 28rpx;
 	border-radius: 6rpx;
-	border: 3rpx solid #22C55E;
+	border: 3rpx solid #22c55e;
 	border-top-color: transparent;
 }
 
@@ -456,7 +822,7 @@ export default {
 	background-color: rgba(247, 249, 252, 0.92);
 	padding: 12rpx 16rpx;
 	border-radius: 999rpx;
-	border: 2rpx solid #F1F5F9;
+	border: 2rpx solid #f1f5f9;
 	margin-top: 0;
 	justify-content: center;
 	flex-shrink: 0;
@@ -511,31 +877,7 @@ export default {
 
 .level-scale-text {
 	font-size: 22rpx;
-	color: #9CA3AF;
-}
-
-.remark-section {
-	margin-bottom: 24rpx;
-}
-
-.remark-card {
-	margin-top: 16rpx;
-	background-color: rgba(255, 255, 255, 0.78);
-	border-radius: 20rpx;
-	padding: 8rpx;
-	border: 2rpx solid rgba(255, 255, 255, 0.72);
-}
-
-.form-textarea {
-	width: 100%;
-	min-height: 180rpx;
-	background-color: rgba(255, 255, 255, 0);
-	border-radius: 16rpx;
-	padding: 24rpx 20rpx;
-	font-size: 28rpx;
-	color: #111827;
-	border: 2rpx solid transparent;
-	box-sizing: border-box;
+	color: #9ca3af;
 }
 
 .dialog-footer {
@@ -570,14 +912,14 @@ export default {
 	top: 18rpx;
 	width: 12rpx;
 	height: 6rpx;
-	border-left: 4rpx solid #FFFFFF;
-	border-bottom: 4rpx solid #FFFFFF;
+	border-left: 4rpx solid #ffffff;
+	border-bottom: 4rpx solid #ffffff;
 	transform: rotate(-45deg);
 }
 
 .btn-text {
 	font-size: 30rpx;
 	font-weight: 600;
-	color: #FFFFFF;
+	color: #ffffff;
 }
 </style>

src/config/index.js

@@ -1,10 +1,11 @@
 const ENV = {
 	development: {
-		BASE_URL: 'http://localhost:8080/api/v1',
+		BASE_URL: 'http://192.168.31.73:9003/api/v1',
 		MINI_PROGRAM_ID: 2
 	},
 	production: {
 		BASE_URL: 'https://wx.nepiedg.top/api/v1',
+		// BASE_URL: 'http://192.168.31.73:8080/api/v1',
 		MINI_PROGRAM_ID: 2
 	}
 }

src/config/smoke-reasons.js

@@ -0,0 +1,68 @@
+const SMOKE_REASON_OPTIONS = [
+	{ key: 'stress', label: '压力大' },
+	{ key: 'after_meal', label: '饭后习惯' },
+	{ key: 'social', label: '社交应酬' },
+	{ key: 'bored', label: '无聊' },
+	{ key: 'low_mood', label: '情绪低落' },
+	{ key: 'after_drink', label: '喝酒后' },
+	{ key: 'triggered', label: '看到别人抽' },
+	{ key: 'morning', label: '早起习惯' },
+	{ key: 'other', label: '其他' }
+]
+
+const RESISTED_REASON_OPTIONS = [
+	{ key: 'distracted', label: '转移注意' },
+	{ key: 'walked', label: '出去走走' },
+	{ key: 'water', label: '喝水缓解' },
+	{ key: 'deep_breath', label: '深呼吸' },
+	{ key: 'snack', label: '吃点东西' },
+	{ key: 'chat', label: '找人聊聊' },
+	{ key: 'busy', label: '让自己忙起来' },
+	{ key: 'willpower', label: '硬撑过去了' },
+	{ key: 'other', label: '其他' }
+]
+
+const REASON_MAP = {
+	smoke: SMOKE_REASON_OPTIONS,
+	resisted: RESISTED_REASON_OPTIONS
+}
+
+export function getReasonOptions(type = 'smoke') {
+	return REASON_MAP[type] || REASON_MAP.smoke
+}
+
+export function normalizeReasonTags(value) {
+	if (!value) return []
+	if (Array.isArray(value)) {
+		return value.filter(item => typeof item === 'string' && item.trim())
+	}
+	if (typeof value === 'string') {
+		const trimmed = value.trim()
+		if (!trimmed) return []
+		try {
+			const parsed = JSON.parse(trimmed)
+			if (Array.isArray(parsed)) {
+				return parsed.filter(item => typeof item === 'string' && item.trim())
+			}
+		} catch (e) {
+			// ignore parse failure and fallback to comma split
+		}
+		return trimmed
+			.split(',')
+			.map(item => item.trim())
+			.filter(Boolean)
+	}
+	return []
+}
+
+export function getReasonLabelMap(type = 'smoke') {
+	return getReasonOptions(type).reduce((acc, item) => {
+		acc[item.key] = item.label
+		return acc
+	}, {})
+}
+
+export function getReasonLabels(tags, type = 'smoke') {
+	const labelMap = getReasonLabelMap(type)
+	return normalizeReasonTags(tags).map(tag => labelMap[tag] || tag)
+}

src/pages.json

@@ -7,13 +7,13 @@
 	},
 	"pages": [
 		{
-			"path": "pages/mode-select/index",
+			"path": "pages/index/index",
 			"style": {
 				"navigationStyle": "custom"
 			}
 		},
 		{
-			"path": "pages/index/index",
+			"path": "pages/mode-select/index",
 			"style": {
 				"navigationStyle": "custom"
 			}
@@ -51,7 +51,25 @@
 		{
 			"path": "pages/share/index",
 			"style": {
-				"navigationBarTitleText": "戒烟分享"
+				"navigationBarTitleText": "成就海报"
+			}
+		},
+		{
+			"path": "pages/nsti/index",
+			"style": {
+				"navigationBarTitleText": "赛博尼古丁测试"
+			}
+		},
+		{
+			"path": "pages/nsti/test",
+			"style": {
+				"navigationBarTitleText": "人格测试"
+			}
+		},
+		{
+			"path": "pages/nsti/result",
+			"style": {
+				"navigationBarTitleText": "测试结果"
 			}
 		},
 		{
@@ -71,6 +89,27 @@
 			"style": {
 				"navigationStyle": "custom"
 			}
+		},
+		{
+			"path": "pages/dream-goals/index",
+			"style": {
+				"navigationStyle": "default",
+				"navigationBarTitleText": "梦想清单"
+			}
+		},
+		{
+			"path": "pages/supervisor/index",
+			"style": {
+				"navigationBarTitleText": "监督人",
+				"navigationStyle": "default"
+			}
+		},
+		{
+			"path": "pages/supervisor/bind",
+			"style": {
+				"navigationBarTitleText": "绑定监督",
+				"navigationStyle": "default"
+			}
 		}
 	],
 	"globalStyle": {

src/pages/dream-goals/index.vue

@@ -0,0 +1,626 @@
+<template>
+	<view class="page">
+		<view class="saved-banner">
+			<view class="saved-banner-inner">
+				<text class="saved-label">戒烟已省下</text>
+				<view class="saved-amount-row">
+					<text class="saved-unit">¥</text>
+					<text class="saved-amount">{{ savedMoneyYuan }}</text>
+				</view>
+				<text class="saved-hint">每天省下的钱，离梦想更近一步</text>
+			</view>
+		</view>
+
+		<view class="tab-bar">
+			<text class="tab-item" :class="{ 'tab-active': currentTab === 'active' }" @tap="currentTab = 'active'">进行中</text>
+			<text class="tab-item" :class="{ 'tab-active': currentTab === 'completed' }" @tap="currentTab = 'completed'">已实现</text>
+		</view>
+
+		<view v-if="loading" class="loading-wrap">
+			<view class="sk-card-placeholder"></view>
+			<view class="sk-card-placeholder"></view>
+		</view>
+
+		<view v-else-if="filteredGoals.length === 0" class="empty-state">
+			<text class="empty-icon">🎯</text>
+			<text class="empty-text">{{ currentTab === 'active' ? '还没有梦想目标' : '还没有已实现的目标' }}</text>
+			<text v-if="currentTab === 'active'" class="empty-action" @tap="openCreate">添加一个</text>
+		</view>
+
+		<view v-else class="goal-list">
+			<view v-for="goal in filteredGoals" :key="goal.id" class="goal-card">
+				<view class="goal-cover">
+					<image v-if="goal.cover_image && !goal.cover_image.startsWith('icon:')" :src="goal.cover_image" mode="aspectFill" class="goal-cover-img" />
+					<text v-else-if="goal.cover_image && goal.cover_image.startsWith('icon:')" class="goal-cover-emoji">{{ goal.cover_image.replace('icon:', '') }}</text>
+					<text v-else class="goal-cover-emoji">🎁</text>
+				</view>
+				<view class="goal-info">
+					<text class="goal-title">{{ goal.title }}</text>
+					<text class="goal-price">¥{{ (goal.target_amount_cent / 100).toFixed(0) }}</text>
+					<view v-if="goal.status === 'active'" class="goal-progress-area">
+						<view class="goal-bar">
+							<view class="goal-fill" :style="{ width: goal.progress_percent + '%' }"></view>
+						</view>
+						<text class="goal-eta">{{ getEtaText(goal) }}</text>
+					</view>
+					<view v-else class="goal-done-badge">
+						<text class="goal-done-text">✓ 已实现</text>
+					</view>
+				</view>
+				<view v-if="goal.status === 'active'" class="goal-actions">
+					<text class="goal-action-btn goal-action-complete" @tap="markCompleted(goal)">已买到</text>
+				</view>
+			</view>
+		</view>
+
+		<!-- 浮动添加按钮 -->
+		<view class="fab" @tap="openCreate">
+			<text class="fab-icon">+</text>
+		</view>
+
+		<!-- 创建弹窗 -->
+		<view v-if="showForm" class="modal-mask" @tap="closeForm">
+			<view class="modal-body" @tap.stop>
+				<text class="modal-title">添加梦想目标</text>
+
+				<view class="form-group">
+					<text class="form-label">我想买</text>
+					<input class="form-input" v-model="form.title" placeholder="例如：AirPods Pro" maxlength="30" />
+				</view>
+
+				<view class="form-group">
+					<text class="form-label">价格（元）</text>
+					<input class="form-input" v-model="form.priceYuan" type="digit" placeholder="输入价格" />
+				</view>
+
+				<view class="form-group">
+					<text class="form-label">选择图标</text>
+					<view v-if="iconsLoading" class="icons-loading">
+						<text class="icons-loading-text">加载中...</text>
+					</view>
+					<view v-else-if="iconList.length === 0" class="icons-empty">
+						<text class="icons-empty-text">暂无图标</text>
+					</view>
+					<view v-else class="icon-grid">
+						<view
+							v-for="icon in iconList"
+							:key="icon.id"
+							class="icon-item"
+							:class="{ 'icon-item-active': form.coverImage === icon.cover_image }"
+							@tap.stop="form.coverImage = icon.cover_image"
+						>
+							<image v-if="icon.cover_image && !icon.cover_image.startsWith('icon:')" :src="icon.cover_image" mode="aspectFill" class="icon-img" />
+							<text v-else class="icon-emoji">{{ (icon.cover_image || '').replace('icon:', '') || '🎁' }}</text>
+						</view>
+					</view>
+				</view>
+
+				<view class="modal-actions">
+					<text class="modal-btn modal-btn-cancel" @tap.stop="closeForm">取消</text>
+					<text class="modal-btn modal-btn-confirm" @tap.stop="submitGoal">确定</text>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import * as api from '@/api'
+
+const loading = ref(true)
+const goals = ref([])
+const currentTab = ref('active')
+const showForm = ref(false)
+const savedMoneyCent = ref(0)
+const dailySaveCent = ref(0)
+const iconList = ref([])
+const iconsLoading = ref(false)
+
+const form = ref({ title: '', priceYuan: '', coverImage: '' })
+
+const savedMoneyYuan = computed(() => Math.round(savedMoneyCent.value / 100))
+
+const filteredGoals = computed(() => {
+	return goals.value.filter(g => {
+		if (currentTab.value === 'active') return g.status === 'active'
+		return g.status === 'completed'
+	})
+})
+
+function getEtaText(goal) {
+	if (goal.progress_percent >= 100) return '已攒够！'
+	if (dailySaveCent.value <= 0) return '坚持打卡积攒'
+	const remaining = goal.target_amount_cent - (goal.current_amount_cent || 0)
+	const daysNeeded = Math.ceil(remaining / dailySaveCent.value)
+	if (daysNeeded <= 0) return '已攒够！'
+	if (daysNeeded > 365) return `约 ${Math.round(daysNeeded / 30)} 个月`
+	return `约 ${daysNeeded} 天可达成`
+}
+
+async function openCreate() {
+	form.value = { title: '', priceYuan: '', coverImage: '' }
+	showForm.value = true
+	if (iconList.value.length === 0) {
+		iconsLoading.value = true
+		try {
+			const res = await api.listDreamPresets()
+			iconList.value = res.data?.items || []
+		} catch (e) {
+			console.error('fetch icons error:', e)
+		} finally {
+			iconsLoading.value = false
+		}
+	}
+}
+
+function closeForm() {
+	showForm.value = false
+}
+
+async function submitGoal() {
+	const title = form.value.title.trim()
+	if (!title) {
+		uni.showToast({ title: '请输入名称', icon: 'none' })
+		return
+	}
+	const price = parseFloat(form.value.priceYuan)
+	if (!price || price <= 0) {
+		uni.showToast({ title: '请输入有效价格', icon: 'none' })
+		return
+	}
+	try {
+		await api.createRewardGoal({
+			title,
+			target_amount_cent: Math.round(price * 100),
+			cover_image: form.value.coverImage || ''
+		})
+		showForm.value = false
+		uni.showToast({ title: '添加成功', icon: 'success' })
+		await fetchGoals()
+	} catch (e) {
+		console.error('create goal error:', e)
+		uni.showToast({ title: '添加失败', icon: 'none' })
+	}
+}
+
+async function markCompleted(goal) {
+	uni.showModal({
+		title: '确认已买到？',
+		content: `确定已经购买了「${goal.title}」吗？`,
+		success: async (res) => {
+			if (!res.confirm) return
+			try {
+				await api.updateRewardGoal(goal.id, { status: 'completed' })
+				uni.showToast({ title: '恭喜实现梦想！', icon: 'success' })
+				await fetchGoals()
+			} catch (e) {
+				console.error('mark completed error:', e)
+				uni.showToast({ title: '操作失败', icon: 'none' })
+			}
+		}
+	})
+}
+
+async function fetchGoals() {
+	loading.value = true
+	try {
+		const res = await api.listRewardGoals('all')
+		goals.value = res.data?.items || []
+	} catch (e) {
+		console.error('fetch goals error:', e)
+	} finally {
+		loading.value = false
+	}
+}
+
+async function fetchSavedMoney() {
+	try {
+		const res = await api.getQuitCheckinHome()
+		const summary = res.data?.summary || {}
+		savedMoneyCent.value = summary.saved_money_cent || 0
+		const streakDays = summary.current_streak_days || 0
+		if (streakDays > 0) {
+			dailySaveCent.value = Math.round(savedMoneyCent.value / streakDays)
+		}
+	} catch (e) {
+		console.error('fetch saved money error:', e)
+	}
+}
+
+onMounted(async () => {
+	await Promise.all([fetchGoals(), fetchSavedMoney()])
+})
+</script>
+
+<style scoped>
+.page {
+	min-height: 100vh;
+	background: #F8FAFB;
+	padding-bottom: 140rpx;
+}
+
+.saved-banner {
+	margin-top: 20rpx;
+	margin: 0 24rpx 20rpx;
+	border-radius: 28rpx;
+	overflow: hidden;
+	background: linear-gradient(135deg, #14936d 0%, #10B981 50%, #34D399 100%);
+	box-shadow: 0 16rpx 36rpx rgba(20, 147, 109, 0.25);
+}
+
+.saved-banner-inner {
+	padding: 32rpx 28rpx;
+	text-align: center;
+}
+
+.saved-label {
+	font-size: 24rpx;
+	color: rgba(255, 255, 255, 0.8);
+}
+
+.saved-amount-row {
+	display: flex;
+	align-items: baseline;
+	justify-content: center;
+	gap: 4rpx;
+	margin-top: 8rpx;
+}
+
+.saved-unit {
+	font-size: 32rpx;
+	font-weight: 700;
+	color: #fff;
+}
+
+.saved-amount {
+	font-size: 72rpx;
+	font-weight: 800;
+	color: #fff;
+	font-family: 'DIN Alternate', -apple-system, sans-serif;
+	line-height: 1;
+}
+
+.saved-hint {
+	display: block;
+	margin-top: 10rpx;
+	font-size: 22rpx;
+	color: rgba(255, 255, 255, 0.7);
+}
+
+.tab-bar {
+	display: flex;
+	gap: 0;
+	margin: 0 24rpx 20rpx;
+	background: rgba(255, 255, 255, 0.8);
+	border-radius: 20rpx;
+	padding: 6rpx;
+	border: 1rpx solid rgba(15, 23, 42, 0.06);
+}
+
+.tab-item {
+	flex: 1;
+	text-align: center;
+	padding: 16rpx 0;
+	font-size: 26rpx;
+	font-weight: 600;
+	color: #9ca3af;
+	border-radius: 16rpx;
+	transition: all 0.2s;
+}
+
+.tab-active {
+	background: #fff;
+	color: #14936d;
+	box-shadow: 0 4rpx 12rpx rgba(15, 23, 42, 0.06);
+}
+
+.loading-wrap {
+	padding: 0 24rpx;
+	display: flex;
+	flex-direction: column;
+	gap: 20rpx;
+}
+
+.sk-card-placeholder {
+	height: 180rpx;
+	border-radius: 24rpx;
+	background: linear-gradient(90deg, #E5E7EB 25%, #F3F4F6 50%, #E5E7EB 75%);
+	background-size: 200% 100%;
+	animation: shimmer 1.5s infinite;
+}
+
+@keyframes shimmer {
+	0% { background-position: -200% 0; }
+	100% { background-position: 200% 0; }
+}
+
+.empty-state {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	padding: 100rpx 0;
+}
+
+.empty-icon {
+	font-size: 80rpx;
+	margin-bottom: 20rpx;
+}
+
+.empty-text {
+	font-size: 28rpx;
+	color: #9ca3af;
+}
+
+.empty-action {
+	margin-top: 20rpx;
+	padding: 14rpx 40rpx;
+	background: linear-gradient(135deg, #14936d, #10B981);
+	color: #fff;
+	font-size: 26rpx;
+	font-weight: 600;
+	border-radius: 999rpx;
+	box-shadow: 0 8rpx 20rpx rgba(20, 147, 109, 0.25);
+}
+
+.goal-list {
+	padding: 0 24rpx;
+	display: flex;
+	flex-direction: column;
+	gap: 20rpx;
+}
+
+.goal-card {
+	display: flex;
+	align-items: center;
+	gap: 20rpx;
+	padding: 24rpx;
+	background: #fff;
+	border-radius: 24rpx;
+	border: 1rpx solid rgba(15, 23, 42, 0.06);
+	box-shadow: 0 8rpx 20rpx rgba(15, 23, 42, 0.04);
+}
+
+.goal-cover {
+	width: 120rpx;
+	height: 120rpx;
+	border-radius: 20rpx;
+	background: linear-gradient(135deg, #f0fdf9 0%, #ecfdf5 100%);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-shrink: 0;
+	overflow: hidden;
+}
+
+.goal-cover-img {
+	width: 100%;
+	height: 100%;
+}
+
+.goal-cover-emoji {
+	font-size: 48rpx;
+}
+
+.goal-info {
+	flex: 1;
+	min-width: 0;
+}
+
+.goal-title {
+	display: block;
+	font-size: 28rpx;
+	font-weight: 700;
+	color: #111827;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.goal-price {
+	display: block;
+	margin-top: 4rpx;
+	font-size: 24rpx;
+	color: #6b7280;
+	font-family: 'DIN Alternate', -apple-system, sans-serif;
+}
+
+.goal-progress-area {
+	margin-top: 10rpx;
+}
+
+.goal-bar {
+	height: 8rpx;
+	background: rgba(16, 185, 129, 0.12);
+	border-radius: 999rpx;
+	overflow: hidden;
+}
+
+.goal-fill {
+	height: 100%;
+	background: linear-gradient(90deg, #10B981, #34D399);
+	border-radius: 999rpx;
+	transition: width 0.5s ease;
+}
+
+.goal-eta {
+	display: block;
+	margin-top: 6rpx;
+	font-size: 20rpx;
+	color: #9ca3af;
+}
+
+.goal-done-badge {
+	margin-top: 8rpx;
+}
+
+.goal-done-text {
+	font-size: 22rpx;
+	font-weight: 600;
+	color: #14936d;
+}
+
+.goal-actions {
+	flex-shrink: 0;
+}
+
+.goal-action-btn {
+	padding: 12rpx 24rpx;
+	border-radius: 999rpx;
+	font-size: 22rpx;
+	font-weight: 600;
+}
+
+.goal-action-complete {
+	background: linear-gradient(135deg, #14936d, #10B981);
+	color: #fff;
+	box-shadow: 0 6rpx 16rpx rgba(20, 147, 109, 0.2);
+}
+
+/* 弹窗 */
+.modal-mask {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	background: rgba(0, 0, 0, 0.45);
+	z-index: 999;
+	display: flex;
+	align-items: flex-end;
+	justify-content: center;
+}
+
+.modal-body {
+	width: 100%;
+	background: #fff;
+	border-radius: 32rpx 32rpx 0 0;
+	padding: 36rpx 32rpx calc(env(safe-area-inset-bottom) + 36rpx);
+	max-height: 85vh;
+	overflow-y: auto;
+}
+
+.modal-title {
+	display: block;
+	font-size: 32rpx;
+	font-weight: 700;
+	color: #111827;
+	text-align: center;
+	margin-bottom: 28rpx;
+}
+
+.form-group {
+	margin-bottom: 24rpx;
+}
+
+.form-label {
+	display: block;
+	font-size: 24rpx;
+	font-weight: 600;
+	color: #374151;
+	margin-bottom: 12rpx;
+}
+
+.form-input {
+	width: 100%;
+	height: 84rpx;
+	padding: 0 20rpx;
+	border-radius: 16rpx;
+	background: #f9fafb;
+	border: 1rpx solid rgba(15, 23, 42, 0.08);
+	font-size: 28rpx;
+	color: #111827;
+	box-sizing: border-box;
+}
+
+.icons-loading, .icons-empty {
+	padding: 24rpx 0;
+	text-align: center;
+}
+
+.icons-loading-text, .icons-empty-text {
+	font-size: 24rpx;
+	color: #9ca3af;
+}
+
+.icon-grid {
+	display: grid;
+	grid-template-columns: repeat(5, 1fr);
+	gap: 16rpx;
+}
+
+.icon-item {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 100%;
+	aspect-ratio: 1;
+	border-radius: 16rpx;
+	background: #f9fafb;
+	border: 2rpx solid transparent;
+	overflow: hidden;
+	transition: all 0.15s;
+}
+
+.icon-item-active {
+	background: #ecfdf5;
+	border-color: #14936d;
+}
+
+.icon-emoji {
+	font-size: 40rpx;
+}
+
+.icon-img {
+	width: 100%;
+	height: 100%;
+}
+
+.modal-actions {
+	display: flex;
+	gap: 20rpx;
+	margin-top: 32rpx;
+}
+
+.modal-btn {
+	flex: 1;
+	text-align: center;
+	padding: 22rpx 0;
+	border-radius: 999rpx;
+	font-size: 28rpx;
+	font-weight: 600;
+}
+
+.modal-btn-cancel {
+	background: #f3f4f6;
+	color: #6b7280;
+}
+
+.modal-btn-confirm {
+	background: linear-gradient(135deg, #14936d, #10B981);
+	color: #fff;
+	box-shadow: 0 8rpx 20rpx rgba(20, 147, 109, 0.2);
+}
+
+.fab {
+	position: fixed;
+	right: 40rpx;
+	bottom: calc(env(safe-area-inset-bottom) + 60rpx);
+	width: 100rpx;
+	height: 100rpx;
+	border-radius: 50%;
+	background: linear-gradient(135deg, #14936d, #10B981);
+	box-shadow: 0 12rpx 30rpx rgba(20, 147, 109, 0.35);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	z-index: 100;
+}
+
+.fab-icon {
+	font-size: 48rpx;
+	color: #fff;
+	font-weight: 300;
+	line-height: 1;
+}
+</style>

src/pages/logs/index.vue

@@ -1,38 +1,42 @@
 <template>
 	<view class="page">
-		<view class="hero-card card">
-			<text class="hero-title">记录历史</text>
-			<text class="hero-subtitle">按时间查看抽烟和忍住记录，随时回看自己的变化轨迹。</text>
-			<view class="hero-stats">
-				<view class="hero-stat">
-					<text class="hero-stat-value">{{ filteredLogs.length }}</text>
-					<text class="hero-stat-label">当前筛选</text>
+		<view class="fixed-summary">
+			<view class="filters-sticky">
+				<view class="filters">
+					<view class="date-filters">
+						<view
+							v-for="option in dateFilters"
+							:key="option.value"
+							class="date-filter"
+							:class="{ 'date-filter-active': currentDateFilter === option.value }"
+							@tap="currentDateFilter = option.value"
+						>
+							{{ option.label }}
 						</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">
-			<text class="section-label">筛选记录</text>
-			<view class="filters card">
-				<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="overview">
+				<view class="overview-item overview-primary">
+					<text class="overview-label">今日已抽</text>
+					<text class="overview-value">{{ todaySmokeCount }}</text>
+					<text class="overview-unit">根</text>
+				</view>
+				<view class="overview-item">
+					<text class="overview-label">当前列表</text>
+					<text class="overview-value">{{ filteredLogs.length }}</text>
+					<text class="overview-unit">条</text>
+				</view>
+				<view class="overview-item">
+					<text class="overview-label">最近记录</text>
+					<text class="overview-clock">{{ latestDisplayTime }}</text>
 				</view>
 			</view>
+
+			<view class="section-head">
+				<text class="section-label">时间记录</text>
+				<text class="section-note">{{ currentDateFilterLabel }} · 按日期倒序</text>
 			</view>
 		</view>
 
@@ -44,8 +48,6 @@
 			@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>
@@ -76,12 +78,12 @@
 									<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' ? '已忍住' : '已抽烟' }}
+											{{ 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>
+										<text v-else class="thumb-pill">0根</text>
 									</view>
 								</view>
 								
@@ -90,6 +92,14 @@
 									class="log-desc"
 								>{{ log.remark.trim() }}</text>
 
+								<view v-if="log.reasonLabels && log.reasonLabels.length > 0" class="reason-tag-row">
+									<text
+										v-for="label in log.reasonLabels"
+										:key="`${log.id}-${label}`"
+										class="reason-tag"
+									>{{ label }}</text>
+								</view>
+								
 								<view class="log-meta-row">
 									<text
 										v-if="log.level !== undefined && log.level !== null"
@@ -110,9 +120,13 @@
 			</view>
 
 			<view v-else class="empty-state">
+				<view class="empty-orbit"></view>
+				<view class="empty-icon-wrap">
 					<text class="empty-icon">记</text>
-				<text class="empty-text">暂无记录</text>
-				<text class="empty-hint">点击右下角按钮开始记录</text>
+				</view>
+				<text class="empty-text">今天还没有记录</text>
+				<text class="empty-hint">完成一次抽烟记录后，时间线会从这里开始生成。</text>
+				<view class="empty-action" @tap="addLog">立即记录</view>
 			</view>
 
 			<view v-if="logsStore.loading && logsStore.logs.length > 0" class="loading-more">
@@ -127,6 +141,7 @@
 		</scroll-view>
 
 		<view class="fab" @tap="addLog">
+			<text class="fab-label">记录</text>
 			<text class="fab-icon">+</text>
 		</view>
 		
@@ -148,13 +163,14 @@ import { useLogin } from '@/hooks/useLogin'
 const { waitForLogin } = useLogin()
 const logsStore = useLogsStore()
 
-const tabs = [
+const dateFilters = [
 	{ label: '全部', value: 'all' },
-	{ label: '已抽烟', value: 'smoke' },
-	{ label: '已忍住', value: 'resisted' }
+	{ label: '今天', value: 'today' },
+	{ label: '近7天', value: 'week' },
+	{ label: '本月', value: 'month' }
 ]
 
-const currentTab = ref('all')
+const currentDateFilter = ref('all')
 const showEditDialog = ref(false)
 const editType = ref('smoke')
 const editData = ref(null)
@@ -162,15 +178,13 @@ const editingLogId = ref(null)
 
 // 筛选后的记录
 const filteredLogs = computed(() => {
-	const logs = logsStore.formattedLogs
-	if (currentTab.value === 'all') {
-		return logs
-	}
-	return logs.filter(log => log.type === currentTab.value)
+	const logs = logsStore.formattedLogs.filter(log => log.type === 'smoke')
+	return logs.filter(log => isInDateFilter(log.displayDate, currentDateFilter.value))
 })
 
-const smokeCount = computed(() => filteredLogs.value.filter(log => log.type === 'smoke').length)
-const resistedCount = computed(() => filteredLogs.value.filter(log => log.type === 'resisted').length)
+const currentDateFilterLabel = computed(() => {
+	return dateFilters.find(item => item.value === currentDateFilter.value)?.label || '全部'
+})
 
 // 按日期分组
 const groupedLogs = computed(() => {
@@ -184,6 +198,20 @@ const groupedLogs = computed(() => {
 	}, {})
 })
 
+const todaySmokeCount = computed(() => {
+	const today = localDateStr(new Date())
+	return logsStore.formattedLogs.reduce((total, log) => {
+		if (log.displayDate !== today || log.type !== 'smoke') return total
+		return total + (Number(log.num) || 0)
+	}, 0)
+})
+
+const latestDisplayTime = computed(() => {
+	const latest = logsStore.formattedLogs[0]
+	if (!latest) return '--:--'
+	return latest.displayTime || '--:--'
+})
+
 // 本地日期 YYYY-MM-DD（避免 toISOString 用 UTC 导致日期差一天）
 function localDateStr(d) {
 	const y = d.getFullYear()
@@ -192,6 +220,25 @@ function localDateStr(d) {
 	return `${y}-${m}-${day}`
 }
 
+function isInDateFilter(dateStr, filter) {
+	if (!dateStr || filter === 'all') return true
+	const today = new Date()
+	const target = new Date(`${dateStr}T00:00:00`)
+	if (Number.isNaN(target.getTime())) return false
+	const todayText = localDateStr(today)
+	if (filter === 'today') return dateStr === todayText
+	if (filter === 'week') {
+		const start = new Date(today)
+		start.setDate(today.getDate() - 6)
+		start.setHours(0, 0, 0, 0)
+		return target >= start && dateStr <= todayText
+	}
+	if (filter === 'month') {
+		return target.getFullYear() === today.getFullYear() && target.getMonth() === today.getMonth()
+	}
+	return true
+}
+
 // 格式化分组标题
 function formatGroupTitle(dateStr) {
 	if (!dateStr) return ''
@@ -215,7 +262,7 @@ function formatGroupTitle(dateStr) {
 
 // 下拉刷新
 async function onRefresh() {
-	await logsStore.fetchLogs(true, currentTab.value)
+	await logsStore.fetchLogs(true, 'smoke')
 }
 
 // 上拉加载
@@ -237,6 +284,7 @@ function handleEdit(log) {
 		smoke_time_only: log.displayTime,
 		smoke_at: log.smoke_at,
 		remark: log.remark || '',
+		reason_tags: log.reasonTags || log.reason_tags || [],
 		level: log.level ?? 2,
 		num: log.num ?? 1
 	}
@@ -259,7 +307,7 @@ async function handleUpdate(data) {
 function handleDelete(log) {
 	uni.showModal({
 		title: '确认删除',
-		content: `确定要删除这条${log.type === 'resisted' ? '忍住' : '抽烟'}记录吗？`,
+		content: `确定要删除这条${log.type === 'resisted' ? '旧' : '抽烟'}记录吗？`,
 		confirmColor: '#EF4444',
 		success: async (res) => {
 			if (res.confirm) {
@@ -273,7 +321,7 @@ function handleDelete(log) {
 async function initPage() {
 	try {
 		await waitForLogin()
-		await logsStore.fetchLogs(true, currentTab.value)
+		await logsStore.fetchLogs(true, 'smoke')
 	} catch (e) {
 		console.error('initPage error:', e)
 	}
@@ -303,10 +351,6 @@ function levelLabel(level) {
 	return '极强'
 }
 
-watch(currentTab, async (value) => {
-	await logsStore.fetchLogs(true, value)
-})
-
 onShareAppMessage(() => {
 	return {
 		title: '戒烟助手 - 我的戒烟记录',
@@ -317,123 +361,151 @@ onShareAppMessage(() => {
 
 <style scoped>
 .page {
-	min-height: 100vh;
+	height: 100vh;
 	display: flex;
 	flex-direction: column;
-	background: linear-gradient(180deg, #E6F7F2 0%, #F0FBF7 40%, #FAFFFE 100%);
-	padding: 24rpx 28rpx 0;
+	background:
+		linear-gradient(180deg, #F6F8F6 0%, #EFF4F1 54%, #E9F0EC 100%);
+	padding: 0 32rpx;
+	box-sizing: border-box;
+	overflow: hidden;
+}
+
+.fixed-summary {
+	position: relative;
+	z-index: 2;
+	flex-shrink: 0;
+	background:
+		linear-gradient(180deg, #F6F8F6 0%, #EFF4F1 100%);
+	padding-bottom: 4rpx;
+}
+
+.filters-sticky {
+	position: relative;
+	height: 92rpx;
+	flex-shrink: 0;
+	z-index: 20;
+}
+
+.filters {
+	position: relative;
+	z-index: 1;
+	padding: 10rpx 0 12rpx;
 	box-sizing: border-box;
 }
 
-.hero-card,
-.section,
-.filters,
-.scroll-container,
-.fab {
-	position: relative;
-	z-index: 1;
-}
-
-.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;
-}
-
-.hero-card {
-	margin-bottom: 20rpx;
-}
-
-.hero-title {
-	display: block;
-	font-size: 38rpx;
-	line-height: 1.2;
-	font-weight: 700;
-	color: #0D3D2E;
-}
-
-.hero-subtitle {
-	display: block;
-	margin-top: 10rpx;
-	font-size: 25rpx;
-	line-height: 1.5;
-	color: #52806E;
-}
-
-.hero-stats {
+.date-filters {
 	display: flex;
-	gap: 16rpx;
-	margin-top: 24rpx;
+	gap: 8rpx;
+	background: rgba(255, 255, 255, 0.82);
+	border: 1rpx solid rgba(226, 232, 240, 0.82);
+	border-radius: 22rpx;
+	padding: 6rpx;
+	box-shadow: 0 12rpx 30rpx rgba(30, 41, 59, 0.06);
+	backdrop-filter: blur(12px);
 }
 
-.hero-stat {
+.date-filter {
 	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;
+	text-align: center;
+	padding: 14rpx 0;
+	border-radius: 18rpx;
+	font-size: 24rpx;
+	font-weight: 900;
+	color: #64748B;
 }
 
-.hero-stat-value {
-	display: block;
-	font-size: 40rpx;
-	font-weight: 700;
-	color: #0D3D2E;
+.date-filter-active {
+	background: linear-gradient(135deg, #10B981, #06B6D4);
+	color: #FFFFFF;
+	box-shadow: 0 8rpx 18rpx rgba(16, 185, 129, 0.16);
 }
 
-.hero-stat-label {
+.overview {
+	display: grid;
+	grid-template-columns: 1.25fr 1fr 1fr;
+	gap: 14rpx;
+	margin-bottom: 18rpx;
+	flex-shrink: 0;
+}
+
+.overview-item {
+	min-width: 0;
+	padding: 20rpx 18rpx;
+	border-radius: 26rpx;
+	background: rgba(255, 255, 255, 0.76);
+	border: 1rpx solid rgba(255, 255, 255, 0.82);
+	box-shadow: 0 12rpx 30rpx rgba(30, 41, 59, 0.05);
+}
+
+.overview-primary {
+	background:
+		radial-gradient(circle at top right, rgba(251, 191, 36, 0.18), transparent 36%),
+		rgba(255, 255, 255, 0.78);
+}
+
+.overview-label {
 	display: block;
+	font-size: 20rpx;
+	line-height: 1.3;
+	font-weight: 800;
+	color: #64748B;
+}
+
+.overview-value {
+	display: inline-block;
 	margin-top: 8rpx;
-	font-size: 22rpx;
-	color: #7aA898;
+	font-size: 40rpx;
+	line-height: 1;
+	font-weight: 900;
+	color: #1E293B;
 }
 
-.section {
-	margin-bottom: 20rpx;
+.overview-unit {
+	margin-left: 4rpx;
+	font-size: 20rpx;
+	font-weight: 800;
+	color: #64748B;
+}
+
+.overview-clock {
+	display: block;
+	margin-top: 12rpx;
+	font-size: 30rpx;
+	line-height: 1;
+	font-weight: 900;
+	color: #0F766E;
+}
+
+.section-head {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 16rpx;
+	padding-bottom: 16rpx;
+	flex-shrink: 0;
 }
 
 .section-label {
 	display: block;
-	margin: 0 0 14rpx 6rpx;
-	font-size: 26rpx;
-	font-weight: 600;
-	color: #1a5c45;
+	font-size: 29rpx;
+	font-weight: 900;
+	color: #1E293B;
 }
 
-.filters {
-	padding: 24rpx;
-}
-
-.tabs {
-	display: flex;
-	background: rgba(255, 255, 255, 0.82);
-	border-radius: 22rpx;
-	padding: 6rpx;
-	border: 1.5rpx solid rgba(52, 200, 160, 0.14);
-	box-shadow: 0 4rpx 16rpx rgba(52, 200, 160, 0.07);
-}
-
-.tab {
-	flex: 1;
-	text-align: center;
-	padding: 14rpx 0;
-	border-radius: 16rpx;
-	font-size: 24rpx;
-	font-weight: 600;
-	color: #7aA898;
-}
-
-.tab-active {
-	background: #FFFFFF;
-	color: #0D3D2E;
-	box-shadow: 0 4rpx 12rpx rgba(52, 200, 160, 0.12);
+.section-note {
+	font-size: 21rpx;
+	font-weight: 800;
+	color: #64748B;
 }
 
 .scroll-container {
-	flex: 1;
+	flex: none;
+	height: calc(100vh - 280rpx);
 	min-height: 0;
+	position: relative;
+	z-index: 1;
+	padding-top: 8rpx;
 	padding-bottom: calc(140rpx + env(safe-area-inset-bottom));
 	box-sizing: border-box;
 }
@@ -452,7 +524,7 @@ onShareAppMessage(() => {
 	width: 64rpx;
 	height: 64rpx;
 	border-radius: 18rpx;
-	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: linear-gradient(90deg, #EEEEEE 25%, #F5F5F5 50%, #EEEEEE 75%);
 	background-size: 200% 100%;
 	animation: shimmer 1.5s infinite;
 	flex-shrink: 0;
@@ -460,16 +532,15 @@ onShareAppMessage(() => {
 
 .skeleton-card {
 	flex: 1;
-	background: rgba(255, 255, 255, 0.88);
+	background: #FFFFFF;
 	border-radius: 24rpx;
 	padding: 24rpx;
-	border: 1.5rpx solid rgba(52, 200, 160, 0.14);
-	box-shadow: 0 4rpx 18rpx rgba(52, 200, 160, 0.07);
+	box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.03);
 }
 
 .skeleton-line {
 	height: 24rpx;
-	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: linear-gradient(90deg, #EEEEEE 25%, #F5F5F5 50%, #EEEEEE 75%);
 	background-size: 200% 100%;
 	animation: shimmer 1.5s infinite;
 	border-radius: 8rpx;
@@ -495,55 +566,58 @@ onShareAppMessage(() => {
 }
 
 .log-group {
-	margin-bottom: 28rpx;
+	margin-bottom: 30rpx;
 }
 
 .group-header {
 	display: flex;
 	align-items: center;
-	gap: 12rpx;
+	justify-content: space-between;
+	gap: 16rpx;
 	margin-bottom: 14rpx;
+	padding: 0 4rpx;
 }
 
 .group-title {
 	font-size: 28rpx;
-	font-weight: 700;
-	color: #0D3D2E;
+	font-weight: 900;
+	color: #1E293B;
 }
 
 .group-count {
-	font-size: 22rpx;
-	color: #7aA898;
-	background-color: rgba(52, 200, 160, 0.06);
-	padding: 6rpx 16rpx;
+	font-size: 21rpx;
+	font-weight: 800;
+	color: #64748B;
+	background-color: rgba(255, 255, 255, 0.72);
+	border: 1rpx solid rgba(226, 232, 240, 0.72);
+	padding: 6rpx 14rpx;
 	border-radius: 999rpx;
-	border: 1.5rpx solid rgba(52, 200, 160, 0.14);
 }
 
 .group-items {
 	display: flex;
 	flex-direction: column;
-	gap: 20rpx;
+	gap: 16rpx;
 }
 
 .log-card {
 	position: relative;
-	background: rgba(255, 255, 255, 0.88);
-	border-radius: 24rpx;
-	padding: 24rpx 24rpx 20rpx 24rpx;
-	box-shadow: 0 4rpx 18rpx rgba(52, 200, 160, 0.07);
+	background: rgba(255, 255, 255, 0.82);
+	border: 1rpx solid rgba(255, 255, 255, 0.86);
+	border-radius: 28rpx;
+	padding: 24rpx 24rpx 20rpx;
+	box-shadow: 0 14rpx 34rpx rgba(30, 41, 59, 0.06);
 	display: flex;
 	gap: 20rpx;
 	overflow: hidden;
-	border: 1.5rpx solid rgba(52, 200, 160, 0.14);
 }
 
 .log-card-resisted {
-	background: linear-gradient(135deg, rgba(245, 255, 251, 0.96), rgba(255, 255, 255, 0.88));
+	background: #FFFFFF;
 }
 
 .log-card-smoke {
-	background: linear-gradient(135deg, rgba(255, 250, 244, 0.96), rgba(255, 255, 255, 0.88));
+	background: #FFFFFF;
 }
 
 .log-bar {
@@ -551,18 +625,18 @@ onShareAppMessage(() => {
 	left: 0;
 	top: 0;
 	bottom: 0;
-	width: 8rpx;
-	background-color: #34C8A0;
+	width: 7rpx;
+	background: linear-gradient(180deg, #67E8F9, #10B981);
 }
 
 .log-card-smoke .log-bar {
-	background-color: #B45309;
+	background: linear-gradient(180deg, #FBBF24, #D97706);
 }
 
 .log-icon {
-	width: 80rpx;
-	height: 80rpx;
-	border-radius: 20rpx;
+	width: 76rpx;
+	height: 76rpx;
+	border-radius: 24rpx;
 	display: flex;
 	align-items: center;
 	justify-content: center;
@@ -572,13 +646,13 @@ onShareAppMessage(() => {
 }
 
 .icon-resisted {
-	background-color: rgba(52, 200, 160, 0.12);
-	color: #1a8c62;
+	background-color: rgba(232, 245, 240, 0.92);
+	color: #0F766E;
 }
 
 .icon-smoke {
-	background-color: rgba(251, 191, 36, 0.14);
-	color: #B45309;
+	background: linear-gradient(135deg, rgba(254, 243, 199, 0.96), rgba(255, 251, 235, 0.9));
+	color: #D97706;
 }
 
 .log-main {
@@ -601,26 +675,26 @@ onShareAppMessage(() => {
 }
 
 .log-time {
-	font-size: 30rpx;
-	font-weight: 700;
-	color: #0D3D2E;
+	font-size: 31rpx;
+	font-weight: 900;
+	color: #1E293B;
 }
 
 .log-tag {
 	font-size: 22rpx;
-	padding: 8rpx 16rpx;
+	padding: 7rpx 14rpx;
 	border-radius: 999rpx;
-	font-weight: 600;
+	font-weight: 900;
 }
 
 .tag-smoke {
-	background-color: rgba(251, 191, 36, 0.14);
-	color: #B45309;
+	background-color: #FEF3C7;
+	color: #D97706;
 }
 
 .tag-resisted {
-	background-color: rgba(52, 200, 160, 0.12);
-	color: #1a8c62;
+	background-color: #E8F5F0;
+	color: #10B981;
 }
 
 .log-right {
@@ -632,28 +706,45 @@ onShareAppMessage(() => {
 
 .count-pill {
 	font-size: 22rpx;
-	color: #B45309;
-	background-color: rgba(251, 191, 36, 0.14);
+	color: #D97706;
+	background-color: rgba(254, 243, 199, 0.92);
 	padding: 8rpx 16rpx;
 	border-radius: 999rpx;
-	font-weight: 600;
+	font-weight: 900;
 }
 
 .thumb-pill {
 	font-size: 24rpx;
-	background-color: rgba(52, 200, 160, 0.12);
-	color: #1a8c62;
+	background-color: #E8F5F0;
+	color: #10B981;
 	padding: 8rpx 14rpx;
 	border-radius: 999rpx;
 }
 
 .log-desc {
 	font-size: 25rpx;
-	color: #52806E;
-	line-height: 1.5;
+	color: #475569;
+	line-height: 1.55;
+	margin-bottom: 12rpx;
+}
+
+.reason-tag-row {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 10rpx;
 	margin-bottom: 10rpx;
 }
 
+.reason-tag {
+	padding: 8rpx 14rpx;
+	border-radius: 999rpx;
+	background: rgba(223, 250, 234, 0.82);
+	border: 1rpx solid rgba(26, 163, 122, 0.16);
+	color: #0f766e;
+	font-size: 20rpx;
+	font-weight: 600;
+}
+
 .log-meta-row {
 	display: flex;
 	align-items: center;
@@ -664,52 +755,47 @@ onShareAppMessage(() => {
 
 .level-text {
 	font-size: 22rpx;
-	font-weight: 600;
+	font-weight: 800;
 }
 
 .log-interval {
 	font-size: 22rpx;
-	color: #7aA898;
-	background-color: rgba(52, 200, 160, 0.06);
+	color: #999999;
+	background-color: #F5F5F5;
 	padding: 6rpx 14rpx;
 	border-radius: 999rpx;
-	border: 1.5rpx solid rgba(52, 200, 160, 0.12);
 }
 
 .log-actions {
 	display: flex;
 	justify-content: flex-end;
 	gap: 16rpx;
-	margin-top: 12rpx;
+	margin-top: 16rpx;
 }
 
 .action-btn {
 	font-size: 22rpx;
-	padding: 8rpx 16rpx;
+	font-weight: 900;
+	padding: 9rpx 17rpx;
 	border-radius: 999rpx;
-	background-color: rgba(255, 255, 255, 0.9);
-	border: 1.5rpx solid rgba(52, 200, 160, 0.18);
-	color: #7aA898;
 }
 
 .edit-btn {
 	color: #2563EB;
-	border-color: rgba(37, 99, 235, 0.18);
 	background-color: rgba(37, 99, 235, 0.08);
 }
 
 .delete-btn {
 	color: #DC2626;
-	border-color: rgba(220, 38, 38, 0.16);
-	background-color: rgba(220, 38, 38, 0.08);
+	background-color: rgba(220, 38, 38, 0.06);
 }
 
 .level-unknown {
-	color: #7aA898;
+	color: #999999;
 }
 
 .level-1 {
-	color: #1a8c62;
+	color: #10B981;
 }
 
 .level-2 {
@@ -729,41 +815,71 @@ onShareAppMessage(() => {
 }
 
 .empty-state {
+	position: relative;
 	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;
+	padding: 132rpx 32rpx 116rpx;
+	border-radius: 32rpx;
+	background:
+		radial-gradient(circle at top, rgba(103, 232, 249, 0.18), transparent 38%),
+		linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(247, 250, 248, 0.9) 100%);
+	box-shadow: 0 16rpx 38rpx rgba(15, 23, 42, 0.06);
+	overflow: hidden;
 }
 
-.empty-icon {
-	width: 112rpx;
-	height: 112rpx;
-	border-radius: 36rpx;
-	background: rgba(52, 200, 160, 0.06);
-	border: 1.5rpx solid rgba(52, 200, 160, 0.14);
+.empty-orbit {
+	position: absolute;
+	top: 52rpx;
+	width: 184rpx;
+	height: 184rpx;
+	border-radius: 50%;
+	border: 2rpx dashed rgba(16, 185, 129, 0.18);
+	animation: fabFloat 6s ease-in-out infinite;
+}
+
+.empty-icon-wrap {
+	position: relative;
+	width: 126rpx;
+	height: 126rpx;
+	border-radius: 42rpx;
+	background: linear-gradient(180deg, #effaf5 0%, #e5f6ef 100%);
 	display: flex;
 	align-items: center;
 	justify-content: center;
+	box-shadow: 0 16rpx 30rpx rgba(16, 185, 129, 0.14);
+	margin-bottom: 26rpx;
+}
+
+.empty-icon {
 	font-size: 40rpx;
 	font-weight: 700;
-	color: #7aA898;
-	margin-bottom: 24rpx;
+	color: #10B981;
 }
 
 .empty-text {
 	font-size: 32rpx;
-	color: #0D3D2E;
+	color: #1A1A1A;
 	font-weight: 600;
 	margin-bottom: 12rpx;
 }
 
 .empty-hint {
 	font-size: 24rpx;
-	color: #7aA898;
+	line-height: 1.7;
+	color: #7c8b85;
+	text-align: center;
+}
+
+.empty-action {
+	margin-top: 24rpx;
+	padding: 16rpx 28rpx;
+	border-radius: 999rpx;
+	background: rgba(16, 185, 129, 0.1);
+	color: #0f9a6d;
+	font-size: 24rpx;
+	font-weight: 700;
 }
 
 .loading-more, .no-more {
@@ -773,36 +889,50 @@ onShareAppMessage(() => {
 
 .loading-text, .no-more-text {
 	font-size: 24rpx;
-	color: #7aA898;
+	color: #999999;
 }
 
 .fab {
 	position: fixed;
 	right: 32rpx;
 	bottom: 140rpx;
-	width: 96rpx;
+	min-width: 170rpx;
 	height: 96rpx;
-	background: linear-gradient(180deg, #3DD9AE 0%, #34C8A0 100%);
-	border-radius: 50%;
+	padding: 0 24rpx;
+	background: linear-gradient(135deg, #10B981, #06B6D4);
+	border-radius: 999rpx;
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	box-shadow: 0 12rpx 28rpx rgba(52, 200, 160, 0.28);
+	gap: 12rpx;
+	box-shadow: 0 18rpx 36rpx rgba(16, 185, 129, 0.3);
 	transition: all 0.3s;
 	z-index: 100;
+	animation: fabFloat 3.6s ease-in-out infinite;
 }
 
 .fab:active {
 	transform: scale(0.95);
 }
 
-.fab-icon {
-	font-size: 48rpx;
+.fab-label {
+	font-size: 24rpx;
 	color: #FFFFFF;
-	font-weight: 300;
+	font-weight: 700;
+}
+
+.fab-icon {
+	font-size: 42rpx;
+	color: #FFFFFF;
+	font-weight: 400;
 }
 
 .bottom-safe {
 	height: calc(32rpx + env(safe-area-inset-bottom));
 }
+
+@keyframes fabFloat {
+	0%, 100% { transform: translateY(0); }
+	50% { transform: translateY(-6rpx); }
+}
 </style>

src/pages/nsti/index.vue

@@ -0,0 +1,417 @@
+<template>
+	<view class="page">
+		<view class="hero">
+			<view class="hero-noise hero-noise-left"></view>
+			<view class="hero-noise hero-noise-right"></view>
+			<text class="hero-badge">赛博尼古丁测试</text>
+			<text class="hero-title">10 道题，测出你的抽象戒烟人格</text>
+			<text class="hero-desc">
+				不是说教，也不是审判。我们用一点抽象和一点幽默，把戒烟这件事先聊轻一点。
+			</text>
+			<view class="hero-actions">
+				<button class="cta cta-primary" @tap="startTest(false)">
+					{{ draftExists ? '重新开始测试' : '立即开始测试' }}
+				</button>
+				<button v-if="draftExists" class="cta cta-secondary" @tap="startTest(true)">继续上次答题</button>
+			</view>
+		</view>
+
+		<view class="panel latest-card" v-if="latestResult">
+			<view class="panel-head">
+				<text class="panel-label">你最近一次测出</text>
+				<text class="panel-time">{{ latestTime }}</text>
+			</view>
+			<view class="latest-body">
+				<view class="latest-avatar" :style="{ background: latestResult.color }">
+					<text class="latest-emoji">{{ latestResult.emoji }}</text>
+				</view>
+				<view class="latest-copy">
+					<text class="latest-name">{{ latestResult.name }}</text>
+					<text class="latest-quote">“{{ latestResult.catchphrase }}”</text>
+					<text class="latest-tag">{{ latestResult.difficultyText }}</text>
+				</view>
+			</view>
+			<button class="cta cta-dark" @tap="viewLatestResult">查看上次结果</button>
+		</view>
+
+		<view class="panel">
+			<text class="panel-title">你会看到什么</text>
+			<view class="feature-list">
+				<view class="feature-item">
+					<text class="feature-index">01</text>
+					<view class="feature-copy">
+						<text class="feature-name">抽象人格结果</text>
+						<text class="feature-desc">16 种戒烟人格画像，结果页可直接分享。</text>
+					</view>
+				</view>
+				<view class="feature-item">
+					<text class="feature-index">02</text>
+					<view class="feature-copy">
+						<text class="feature-name">个性化建议</text>
+						<text class="feature-desc">每种人格都给你一套更贴合状态的起步动作。</text>
+					</view>
+				</view>
+				<view class="feature-item">
+					<text class="feature-index">03</text>
+					<view class="feature-copy">
+						<text class="feature-name">宽容失败的语气</text>
+						<text class="feature-desc">不把复吸当羞耻，而是把它看成下一次优化的线索。</text>
+					</view>
+				</view>
+			</view>
+		</view>
+
+		<view class="panel">
+			<view class="panel-head">
+				<text class="panel-title">部分人格预览</text>
+				<text class="panel-subtitle">完整测试共 16 型</text>
+			</view>
+			<view class="type-grid">
+				<view
+					v-for="item in featuredTypes"
+					:key="item.code"
+					class="type-card"
+					:style="{ borderColor: item.color }"
+				>
+					<text class="type-emoji">{{ item.emoji }}</text>
+					<text class="type-name">{{ item.name }}</text>
+					<text class="type-quote">“{{ item.catchphrase }}”</text>
+				</view>
+			</view>
+		</view>
+
+		<view class="panel disclaimer">
+			<text class="panel-title">说明</text>
+			<text class="disclaimer-text">
+				本测试偏娱乐和行为洞察，不构成医疗建议。真正想开始戒烟时，我们也会把你带回到实际可执行的打卡和计划里。
+			</text>
+		</view>
+	</view>
+</template>
+
+<script setup>
+import { computed, ref } from 'vue'
+import { onLoad, onShareAppMessage, onShareTimeline, onShow } from '@dcloudio/uni-app'
+import { formatNSTITime, getLatestNSTIResult, getNSTIDraft, getNSTIPersonalityTypes, clearNSTIDraft } from '@/utils/nsti'
+
+const latestResult = ref(null)
+const draftExists = ref(false)
+const featuredTypes = ref([])
+
+const featuredOrder = ['N01', 'N02', 'N09', 'N16']
+
+const latestTime = computed(() => formatNSTITime(latestResult.value?.completedAt))
+
+function refreshState() {
+	latestResult.value = getLatestNSTIResult()
+	draftExists.value = !!getNSTIDraft()
+	const allTypes = getNSTIPersonalityTypes()
+	featuredTypes.value = featuredOrder.map((code) => allTypes[code]).filter(Boolean)
+}
+
+function startTest(resume = false) {
+	if (!resume) {
+		clearNSTIDraft()
+	}
+	uni.navigateTo({
+		url: `/pages/nsti/test?resume=${resume ? '1' : '0'}`
+	})
+}
+
+function viewLatestResult() {
+	if (!latestResult.value) {
+		uni.showToast({ title: '还没有测试结果', icon: 'none' })
+		return
+	}
+	uni.navigateTo({ url: `/pages/nsti/result?id=${latestResult.value.id}` })
+}
+
+onLoad(() => {
+	refreshState()
+})
+
+onShow(() => {
+	refreshState()
+})
+
+onShareAppMessage(() => ({
+	title: '测测你的赛博尼古丁测试结果',
+	path: '/pages/nsti/index'
+}))
+
+onShareTimeline(() => ({
+	title: '赛博尼古丁测试，看看你属于哪一型'
+}))
+</script>
+
+<style scoped>
+.page {
+	min-height: 100vh;
+	padding: 32rpx 28rpx 48rpx;
+	box-sizing: border-box;
+	background:
+		radial-gradient(circle at 12% 8%, rgba(255, 20, 147, 0.18), transparent 26%),
+		radial-gradient(circle at 88% 0%, rgba(57, 255, 20, 0.16), transparent 28%),
+		linear-gradient(180deg, #101322 0%, #1A1130 34%, #0F172A 100%);
+	color: #F8FAFC;
+}
+
+.hero,
+.panel {
+	position: relative;
+	overflow: hidden;
+	border-radius: 36rpx;
+}
+
+.hero {
+	padding: 44rpx 36rpx;
+	background:
+		linear-gradient(135deg, rgba(255, 20, 147, 0.92) 0%, rgba(255, 107, 107, 0.92) 40%, rgba(57, 255, 20, 0.82) 100%);
+	box-shadow: 0 28rpx 60rpx rgba(255, 20, 147, 0.2);
+}
+
+.hero-badge {
+	display: inline-flex;
+	padding: 10rpx 20rpx;
+	border-radius: 999rpx;
+	background: rgba(15, 23, 42, 0.18);
+	backdrop-filter: blur(12rpx);
+	font-size: 22rpx;
+	font-weight: 700;
+	letter-spacing: 2rpx;
+}
+
+.hero-title {
+	display: block;
+	margin-top: 22rpx;
+	font-size: 54rpx;
+	line-height: 1.08;
+	font-weight: 800;
+}
+
+.hero-desc {
+	display: block;
+	margin-top: 18rpx;
+	font-size: 28rpx;
+	line-height: 1.7;
+	max-width: 620rpx;
+	color: rgba(255, 255, 255, 0.92);
+}
+
+.hero-actions {
+	display: flex;
+	flex-direction: column;
+	gap: 18rpx;
+	margin-top: 34rpx;
+}
+
+.hero-noise {
+	position: absolute;
+	border-radius: 50%;
+	filter: blur(2rpx);
+	opacity: 0.78;
+}
+
+.hero-noise-left {
+	width: 180rpx;
+	height: 180rpx;
+	right: -30rpx;
+	top: -18rpx;
+	background: rgba(255, 255, 255, 0.16);
+}
+
+.hero-noise-right {
+	width: 220rpx;
+	height: 220rpx;
+	right: 40rpx;
+	bottom: -120rpx;
+	background: rgba(15, 23, 42, 0.18);
+}
+
+.panel {
+	margin-top: 28rpx;
+	padding: 32rpx 28rpx;
+	background: rgba(10, 16, 33, 0.74);
+	border: 2rpx solid rgba(255, 255, 255, 0.08);
+	box-shadow: 0 18rpx 42rpx rgba(0, 0, 0, 0.18);
+	backdrop-filter: blur(18rpx);
+}
+
+.panel-head {
+	display: flex;
+	align-items: flex-start;
+	justify-content: space-between;
+	gap: 20rpx;
+}
+
+.panel-label,
+.panel-subtitle,
+.panel-time {
+	font-size: 22rpx;
+	color: rgba(226, 232, 240, 0.72);
+}
+
+.panel-title {
+	display: block;
+	font-size: 34rpx;
+	font-weight: 700;
+}
+
+.latest-card {
+	background:
+		linear-gradient(160deg, rgba(255, 255, 255, 0.08) 0%, rgba(91, 33, 182, 0.14) 100%),
+		rgba(10, 16, 33, 0.82);
+}
+
+.latest-body {
+	display: flex;
+	align-items: center;
+	gap: 24rpx;
+	margin-top: 24rpx;
+	margin-bottom: 28rpx;
+}
+
+.latest-avatar {
+	width: 112rpx;
+	height: 112rpx;
+	border-radius: 30rpx;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	box-shadow: inset 0 0 0 2rpx rgba(255, 255, 255, 0.22);
+}
+
+.latest-emoji {
+	font-size: 52rpx;
+}
+
+.latest-copy {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	gap: 8rpx;
+}
+
+.latest-name {
+	font-size: 38rpx;
+	font-weight: 800;
+}
+
+.latest-quote,
+.latest-tag,
+.feature-desc,
+.disclaimer-text,
+.type-quote {
+	font-size: 24rpx;
+	line-height: 1.65;
+	color: rgba(226, 232, 240, 0.84);
+}
+
+.feature-list {
+	display: flex;
+	flex-direction: column;
+	gap: 22rpx;
+	margin-top: 24rpx;
+}
+
+.feature-item {
+	display: flex;
+	gap: 20rpx;
+}
+
+.feature-index {
+	width: 60rpx;
+	height: 60rpx;
+	border-radius: 18rpx;
+	background: rgba(255, 255, 255, 0.08);
+	color: #39FF14;
+	font-size: 24rpx;
+	font-weight: 800;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-shrink: 0;
+}
+
+.feature-copy {
+	display: flex;
+	flex-direction: column;
+	gap: 8rpx;
+}
+
+.feature-name {
+	font-size: 28rpx;
+	font-weight: 700;
+}
+
+.type-grid {
+	display: grid;
+	grid-template-columns: repeat(2, minmax(0, 1fr));
+	gap: 18rpx;
+	margin-top: 24rpx;
+}
+
+.type-card {
+	padding: 24rpx 22rpx;
+	border-radius: 28rpx;
+	background:
+		linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)),
+		rgba(15, 23, 42, 0.88);
+	border: 2rpx solid rgba(255, 255, 255, 0.16);
+	min-height: 214rpx;
+}
+
+.type-emoji {
+	font-size: 44rpx;
+}
+
+.type-name {
+	display: block;
+	margin-top: 14rpx;
+	font-size: 30rpx;
+	font-weight: 800;
+}
+
+.type-quote {
+	display: block;
+	margin-top: 10rpx;
+}
+
+.cta {
+	width: 100%;
+	min-height: 94rpx;
+	border-radius: 999rpx;
+	font-size: 30rpx;
+	font-weight: 800;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border: none;
+}
+
+.cta::after {
+	border: none;
+}
+
+.cta-primary {
+	color: #0F172A;
+	background: linear-gradient(135deg, #39FF14 0%, #B5FF5A 100%);
+	box-shadow: 0 20rpx 30rpx rgba(57, 255, 20, 0.24);
+}
+
+.cta-secondary {
+	background: rgba(15, 23, 42, 0.16);
+	color: #FFFFFF;
+	border: 2rpx solid rgba(255, 255, 255, 0.24);
+}
+
+.cta-dark {
+	background: rgba(255, 255, 255, 0.1);
+	color: #FFFFFF;
+	border: 2rpx solid rgba(255, 255, 255, 0.12);
+}
+
+.disclaimer-text {
+	margin-top: 18rpx;
+}
+</style>

src/pages/nsti/result.vue

@@ -0,0 +1,815 @@
+<template>
+	<view class="page" v-if="result">
+		<canvas
+			canvas-id="nstiPosterCanvas"
+			class="poster-canvas"
+			disable-scroll
+		></canvas>
+		<view class="hero-card" :style="heroCardStyle">
+			<view class="hero-logo-shell" v-if="result.logoUrl">
+				<image class="hero-logo" :src="result.logoUrl" mode="widthFix"></image>
+			</view>
+			<text class="hero-badge">赛博尼古丁测试结果</text>
+			<text class="hero-emoji">{{ result.emoji }} {{ result.name }}</text>
+			<text class="hero-quote">“{{ result.catchphrase }}”</text>
+			<view class="hero-stats">
+				<view class="stat-pill">
+					<text class="stat-label">戒烟难度</text>
+					<text class="stat-value">{{ difficultyStars }}</text>
+				</view>
+				<view class="stat-pill">
+					<text class="stat-label">同类人群</text>
+					<text class="stat-value">{{ result.peerCount }} 人</text>
+				</view>
+			</view>
+		</view>
+
+		<view class="panel">
+			<text class="panel-title">人格画像</text>
+			<text class="panel-body">{{ result.description }}</text>
+			<view class="tag-list">
+				<text v-for="tag in result.tags" :key="tag" class="tag-chip">{{ tag }}</text>
+			</view>
+		</view>
+
+		<view class="panel">
+			<view class="panel-head">
+				<text class="panel-title">你的戒烟驱动</text>
+				<text class="panel-time">{{ completedTime }}</text>
+			</view>
+			<view class="dimension-list">
+				<view v-for="item in result.dimensionBreakdown" :key="item.key" class="dimension-item">
+					<view class="dimension-labels">
+						<text class="dimension-name">{{ item.key }} · {{ item.label }}</text>
+						<text class="dimension-percent">{{ item.percentage }}%</text>
+					</view>
+					<view class="dimension-track">
+						<view class="dimension-fill" :style="{ width: item.percentage + '%', background: item.color }"></view>
+					</view>
+					<text class="dimension-desc">{{ item.description }}</text>
+				</view>
+			</view>
+		</view>
+
+		<view class="panel">
+			<text class="panel-title">专属建议</text>
+			<view class="advice-list">
+				<view v-for="(item, index) in result.suggestions" :key="item" class="advice-item">
+					<text class="advice-index">{{ index + 1 }}</text>
+					<text class="advice-text">{{ item }}</text>
+				</view>
+			</view>
+		</view>
+
+		<view class="panel">
+			<text class="panel-title">现在就能开始的 3 步</text>
+			<view class="action-list">
+				<view v-for="item in result.actionPlan" :key="item" class="action-item">
+					<text class="action-dot"></text>
+					<text class="action-text">{{ item }}</text>
+				</view>
+			</view>
+		</view>
+
+		<view class="panel">
+			<text class="panel-title">和你最像的另外两型</text>
+			<view class="match-list">
+				<view v-for="item in secondaryMatches" :key="item.code" class="match-item">
+					<view class="match-main">
+						<view class="match-info">
+							<image v-if="item.logoUrl" class="match-logo" :src="item.logoUrl" mode="aspectFit"></image>
+							<view class="match-copy">
+								<text class="match-name">{{ item.emoji }} {{ item.name }}</text>
+								<text class="match-quote">{{ item.catchphrase }}</text>
+							</view>
+						</view>
+						<text class="match-score">{{ item.percentage }}%</text>
+					</view>
+				</view>
+			</view>
+		</view>
+
+		<view class="cta-group">
+			<button class="cta-primary" @tap="goToQuitJourney">开始我的戒烟之路</button>
+			<!-- #ifdef MP-WEIXIN -->
+			<button class="cta-secondary" @tap="handleSavePoster">分享我的抽象人格</button>
+			<!-- #endif -->
+			<!-- #ifndef MP-WEIXIN -->
+			<button class="cta-secondary" @tap="handleShareFallback">复制分享文案</button>
+			<!-- #endif -->
+			<button class="cta-ghost" @tap="retakeTest">重测一次</button>
+		</view>
+
+		<text class="disclaimer">本测试仅供娱乐与行为洞察，不构成医疗建议。如需专业戒烟支持，请咨询医生。</text>
+	</view>
+</template>
+
+<script setup>
+import { computed, getCurrentInstance, ref } from 'vue'
+import { onLoad, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
+import { useProfileStore } from '@/stores/profile'
+import { buildNSTIShareText, formatNSTITime, getLatestNSTIResult, renderDifficultyStars } from '@/utils/nsti'
+import { downloadMiniProgramTestCode } from '@/api/auth'
+
+const profileStore = useProfileStore()
+const result = ref(null)
+const posterSaving = ref(false)
+const { proxy } = getCurrentInstance()
+
+const difficultyStars = computed(() => renderDifficultyStars(result.value?.difficulty || 0))
+const completedTime = computed(() => formatNSTITime(result.value?.completedAt))
+const secondaryMatches = computed(() => (result.value?.topMatches || []).slice(1))
+const heroCardStyle = computed(() => ({
+	background: `linear-gradient(135deg, ${result.value?.color || '#39FF14'} 0%, #0F172A 100%)`
+}))
+const shareTitle = computed(() => {
+	if (!result.value) return '测测你的赛博尼古丁测试结果'
+	return `我测出了「${result.value.name}」人格！`
+})
+
+function loadResult() {
+	const latest = getLatestNSTIResult()
+	if (!latest) {
+		uni.showToast({ title: '还没有测试结果', icon: 'none' })
+		setTimeout(() => {
+			uni.redirectTo({ url: '/pages/nsti/index' })
+		}, 600)
+		return
+	}
+	result.value = latest
+}
+
+function retakeTest() {
+	uni.redirectTo({ url: '/pages/nsti/test?resume=0' })
+}
+
+function goToQuitJourney() {
+	if (profileStore.needOnboarding) {
+		uni.navigateTo({ url: '/pages/onboarding/index' })
+		return
+	}
+	uni.switchTab({ url: '/pages/index/index' })
+}
+
+function handleShareFallback() {
+	if (!result.value) return
+	uni.setClipboardData({
+		data: buildNSTIShareText(result.value),
+		success: () => {
+			uni.showToast({ title: '分享文案已复制', icon: 'success' })
+		}
+	})
+}
+
+function wrapText(ctx, text, x, y, maxWidth, lineHeight, maxLines = 2) {
+	if (!text) return y
+	let line = ''
+	let lines = 0
+	for (let i = 0; i < text.length; i += 1) {
+		const testLine = line + text[i]
+		if (ctx.measureText(testLine).width > maxWidth && line) {
+			ctx.fillText(lines === maxLines - 1 ? `${line.slice(0, -1)}…` : line, x, y)
+			y += lineHeight
+			line = text[i]
+			lines += 1
+			if (lines >= maxLines) {
+				return y
+			}
+			continue
+		}
+		line = testLine
+	}
+	if (line && lines < maxLines) {
+		ctx.fillText(line, x, y)
+		y += lineHeight
+	}
+	return y
+}
+
+function splitTextLines(ctx, text, maxWidth, maxLines = 2) {
+	if (!text) return []
+	const lines = []
+	let line = ''
+	for (let i = 0; i < text.length; i += 1) {
+		const testLine = line + text[i]
+		if (ctx.measureText(testLine).width > maxWidth && line) {
+			lines.push(line)
+			line = text[i]
+			if (lines.length >= maxLines) {
+				break
+			}
+			continue
+		}
+		line = testLine
+	}
+	if (lines.length < maxLines && line) {
+		lines.push(line)
+	}
+	if (lines.length > maxLines) {
+		lines.length = maxLines
+	}
+	if (lines.length === maxLines) {
+		const lastIndex = lines.length - 1
+		let lastLine = lines[lastIndex]
+		while (ctx.measureText(`${lastLine}…`).width > maxWidth && lastLine.length > 1) {
+			lastLine = lastLine.slice(0, -1)
+		}
+		lines[lastIndex] = `${lastLine}…`
+	}
+	return lines
+}
+
+function drawTextLines(ctx, lines, x, startY, lineHeight) {
+	let y = startY
+	lines.forEach((line) => {
+		ctx.fillText(line, x, y)
+		y += lineHeight
+	})
+	return y
+}
+
+function roundRect(ctx, x, y, width, height, radius, fillStyle) {
+	ctx.save()
+	ctx.beginPath()
+	ctx.setFillStyle(fillStyle)
+	ctx.moveTo(x + radius, y)
+	ctx.lineTo(x + width - radius, y)
+	ctx.quadraticCurveTo(x + width, y, x + width, y + radius)
+	ctx.lineTo(x + width, y + height - radius)
+	ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height)
+	ctx.lineTo(x + radius, y + height)
+	ctx.quadraticCurveTo(x, y + height, x, y + height - radius)
+	ctx.lineTo(x, y + radius)
+	ctx.quadraticCurveTo(x, y, x + radius, y)
+	ctx.closePath()
+	ctx.fill()
+	ctx.restore()
+}
+
+function clipRoundRect(ctx, x, y, width, height, radius) {
+	ctx.beginPath()
+	ctx.moveTo(x + radius, y)
+	ctx.lineTo(x + width - radius, y)
+	ctx.quadraticCurveTo(x + width, y, x + width, y + radius)
+	ctx.lineTo(x + width, y + height - radius)
+	ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height)
+	ctx.lineTo(x + radius, y + height)
+	ctx.quadraticCurveTo(x, y + height, x, y + height - radius)
+	ctx.lineTo(x, y + radius)
+	ctx.quadraticCurveTo(x, y, x + radius, y)
+	ctx.closePath()
+	ctx.clip()
+}
+
+function getImageInfo(src) {
+	return new Promise((resolve, reject) => {
+		if (!src) {
+			resolve(null)
+			return
+		}
+		uni.getImageInfo({
+			src,
+			success: resolve,
+			fail: reject
+		})
+	})
+}
+
+function drawContainImage(ctx, imagePath, imageInfo, x, y, width, height, radius = 0) {
+	if (!imagePath || !imageInfo?.width || !imageInfo?.height) return
+	const scale = Math.min(width / imageInfo.width, height / imageInfo.height)
+	const drawWidth = imageInfo.width * scale
+	const drawHeight = imageInfo.height * scale
+	const drawX = x + (width - drawWidth) / 2
+	const drawY = y + (height - drawHeight) / 2
+
+	ctx.save()
+	if (radius > 0) {
+		clipRoundRect(ctx, x, y, width, height, radius)
+	}
+	ctx.drawImage(imagePath, drawX, drawY, drawWidth, drawHeight)
+	ctx.restore()
+}
+
+function drawPoster(resultData, logoPath, qrPath, logoInfo) {
+	return new Promise((resolve, reject) => {
+		const canvasId = 'nstiPosterCanvas'
+		const ctx = uni.createCanvasContext(canvasId, proxy)
+		const width = 750
+		const height = 1660
+		const cardX = 28
+		const cardY = 34
+		const cardWidth = 694
+		const cardHeight = 1592
+		const heroX = 56
+		const heroY = 64
+		const heroWidth = 638
+		const heroHeight = 592
+
+		ctx.setFillStyle('#F6F3EC')
+		ctx.fillRect(0, 0, width, height)
+
+		roundRect(ctx, cardX, cardY, cardWidth, cardHeight, 36, '#FFFDF9')
+		roundRect(ctx, heroX, heroY, heroWidth, heroHeight, 30, resultData.color || '#54D2B1')
+
+		ctx.setFillStyle('#FFFFFF')
+		ctx.setFontSize(24)
+		ctx.fillText('赛博尼古丁测试结果', 88, 112)
+
+		roundRect(ctx, 88, 146, 574, 232, 24, 'rgba(255,255,255,0.14)')
+		if (logoPath) {
+			roundRect(ctx, 104, 162, 542, 200, 18, 'rgba(255,255,255,0.18)')
+			drawContainImage(ctx, logoPath, logoInfo, 104, 162, 542, 200, 18)
+		}
+
+		ctx.setFillStyle('#FFFFFF')
+		ctx.setFontSize(38)
+		ctx.fillText(`${resultData.emoji} ${resultData.name}`, 88, 432)
+		ctx.setFontSize(26)
+		const quoteLines = splitTextLines(ctx, `“${resultData.catchphrase}”`, 540, 3)
+		const heroQuoteEndY = drawTextLines(ctx, quoteLines, 88, 478, 38)
+
+		ctx.setFillStyle('rgba(255,255,255,0.9)')
+		ctx.setFontSize(22)
+		const pillY = Math.max(548, heroQuoteEndY + 18)
+		roundRect(ctx, 88, pillY - 32, 238, 54, 18, 'rgba(255,255,255,0.16)')
+		roundRect(ctx, 350, pillY - 32, 238, 54, 18, 'rgba(255,255,255,0.16)')
+		ctx.fillText(`戒烟难度：${difficultyStars.value}`, 106, pillY)
+		ctx.fillText(`同类人群：${resultData.peerCount} 人`, 368, pillY)
+
+		const adviceCardY = heroY + heroHeight + 26
+		const adviceCardHeight = 372
+		const actionsCardY = adviceCardY + adviceCardHeight + 26
+		const actionsCardHeight = 304
+		const qrCardY = actionsCardY + actionsCardHeight + 26
+		const qrCardHeight = 254
+
+		roundRect(ctx, 56, adviceCardY, 638, adviceCardHeight, 28, '#FFF4EA')
+		roundRect(ctx, 56, actionsCardY, 638, actionsCardHeight, 28, '#F7F8FC')
+		roundRect(ctx, 56, qrCardY, 638, qrCardHeight, 28, '#FFF4EA')
+
+		ctx.setFillStyle('#111827')
+		ctx.setFontSize(32)
+		ctx.fillText('你的专属建议', 88, adviceCardY + 56)
+
+		ctx.setFontSize(24)
+		ctx.setFillStyle('#475467')
+		let currentY = adviceCardY + 116
+		;(resultData.suggestions || []).slice(0, 3).forEach((item, index) => {
+			ctx.setFillStyle('#F59E0B')
+			ctx.beginPath()
+			ctx.arc(96, currentY - 8, 8, 0, Math.PI * 2)
+			ctx.fill()
+			ctx.setFillStyle('#334155')
+			const adviceLines = splitTextLines(ctx, `${index + 1}. ${item}`, 520, 3)
+			currentY = drawTextLines(ctx, adviceLines, 118, currentY, 34) + 12
+		})
+
+		ctx.setFillStyle('#111827')
+		ctx.setFontSize(32)
+		ctx.fillText('现在就能开始的 3 步', 88, actionsCardY + 56)
+		ctx.setFillStyle('#475467')
+		ctx.setFontSize(24)
+		currentY = actionsCardY + 114
+		;(resultData.actionPlan || []).slice(0, 3).forEach((item, index) => {
+			ctx.setFillStyle('#FF8E53')
+			ctx.beginPath()
+			ctx.arc(98, currentY - 10, 10, 0, Math.PI * 2)
+			ctx.fill()
+			ctx.setFillStyle('#334155')
+			const actionLines = splitTextLines(ctx, `${index + 1}. ${item}`, 520, 2)
+			currentY = drawTextLines(ctx, actionLines, 130, currentY, 34) + 12
+		})
+
+		ctx.setFillStyle('#111827')
+		ctx.setFontSize(28)
+		ctx.fillText('扫码直接进入测试', 88, qrCardY + 58)
+		ctx.setFillStyle('#667085')
+		ctx.setFontSize(22)
+		const qrLines = splitTextLines(ctx, '保存到相册后，发给朋友扫一扫就能直接进入赛博尼古丁测试。', 336, 3)
+		drawTextLines(ctx, qrLines, 88, qrCardY + 102, 32)
+
+		if (qrPath) {
+			roundRect(ctx, 500, qrCardY + 32, 152, 152, 20, '#FFFFFF')
+			ctx.drawImage(qrPath, 512, qrCardY + 44, 128, 128)
+		}
+
+		ctx.setFillStyle('#98A2B3')
+		ctx.setFontSize(20)
+		ctx.fillText('本测试仅供娱乐与行为洞察，不构成医疗建议。', 88, cardY + cardHeight - 42)
+
+		ctx.draw(false, () => {
+			// Real devices can export a partially rendered canvas if we read it immediately.
+			setTimeout(() => {
+				uni.canvasToTempFilePath(
+					{
+						canvasId,
+						x: 0,
+						y: 0,
+						width,
+						height,
+						destWidth: width,
+						destHeight: height,
+						fileType: 'png',
+						quality: 1,
+						success: (res) => resolve(res.tempFilePath),
+						fail: (err) => reject(err)
+					},
+					proxy
+				)
+			}, 180)
+		})
+	})
+}
+
+function downloadImage(url) {
+	return new Promise((resolve, reject) => {
+		if (!url) {
+			resolve('')
+			return
+		}
+		uni.downloadFile({
+			url,
+			success: (res) => {
+				if (res.statusCode === 200 && res.tempFilePath) {
+					resolve(res.tempFilePath)
+					return
+				}
+				reject(new Error(`下载图片失败: ${res.statusCode || 'unknown'}`))
+			},
+			fail: (err) => reject(err)
+		})
+	})
+}
+
+function savePosterToAlbum(filePath) {
+	return new Promise((resolve, reject) => {
+		uni.saveImageToPhotosAlbum({
+			filePath,
+			success: resolve,
+			fail: reject
+		})
+	})
+}
+
+async function handleSavePoster() {
+	if (!result.value || posterSaving.value) return
+	posterSaving.value = true
+	uni.showLoading({ title: '生成海报中...', mask: true })
+	try {
+		const [logoPath, qrPath] = await Promise.all([
+			downloadImage(result.value.logoUrl),
+			downloadMiniProgramTestCode({ path: 'pages/nsti/test?resume=0', width: 280 })
+		])
+		const logoInfo = await getImageInfo(logoPath)
+		const posterPath = await drawPoster(result.value, logoPath, qrPath, logoInfo)
+		await savePosterToAlbum(posterPath)
+		uni.showToast({ title: '已保存到相册', icon: 'success' })
+	} catch (error) {
+		console.error('save poster error:', error)
+		const message = error?.errMsg || error?.message || ''
+		if (message.includes('auth deny') || message.includes('authorize')) {
+			uni.showModal({
+				title: '需要相册权限',
+				content: '请允许保存到相册，这样才能把分享海报存到本地。',
+				success: (res) => {
+					if (res.confirm) {
+						uni.openSetting()
+					}
+				}
+			})
+		} else {
+			uni.showToast({ title: '海报生成失败', icon: 'none' })
+		}
+	} finally {
+		uni.hideLoading()
+		posterSaving.value = false
+	}
+}
+
+onLoad(() => {
+	loadResult()
+})
+
+onShareAppMessage(() => ({
+	title: shareTitle.value,
+	path: `/pages/nsti/index?from=share&type=${result.value?.typeCode || ''}`
+}))
+
+onShareTimeline(() => ({
+	title: `${shareTitle.value} ${result.value?.emoji || ''}`
+}))
+</script>
+
+<style scoped>
+.page {
+	min-height: 100vh;
+	padding: 28rpx 24rpx 48rpx;
+	box-sizing: border-box;
+	background:
+		radial-gradient(circle at 12% 4%, rgba(57, 255, 20, 0.14), transparent 28%),
+		radial-gradient(circle at 88% 10%, rgba(255, 20, 147, 0.18), transparent 30%),
+		linear-gradient(180deg, #0F172A 0%, #111827 36%, #1E293B 100%);
+	color: #F8FAFC;
+}
+
+.poster-canvas {
+	position: fixed;
+	left: -9999px;
+	top: -9999px;
+	width: 750px;
+	height: 1660px;
+	opacity: 0;
+	pointer-events: none;
+}
+
+.hero-card,
+.panel {
+	border-radius: 34rpx;
+}
+
+.hero-card {
+	padding: 40rpx 30rpx;
+	box-shadow: 0 28rpx 60rpx rgba(0, 0, 0, 0.24);
+}
+
+.hero-logo-shell {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 18rpx 18rpx 28rpx;
+	margin-bottom: 10rpx;
+	border-radius: 30rpx;
+	background: rgba(255, 255, 255, 0.08);
+	border: 2rpx solid rgba(255, 255, 255, 0.12);
+}
+
+.hero-logo {
+	width: 100%;
+	max-width: 560rpx;
+}
+
+.hero-badge {
+	display: inline-flex;
+	padding: 10rpx 18rpx;
+	border-radius: 999rpx;
+	background: rgba(255, 255, 255, 0.16);
+	font-size: 22rpx;
+	font-weight: 700;
+}
+
+.hero-emoji {
+	display: block;
+	margin-top: 22rpx;
+	font-size: 36rpx;
+	line-height: 1.08;
+	font-weight: 900;
+}
+
+.hero-quote {
+	display: block;
+	margin-top: 14rpx;
+	font-size: 28rpx;
+	line-height: 1.7;
+	color: rgba(255, 255, 255, 0.92);
+}
+
+.hero-stats {
+	display: grid;
+	grid-template-columns: repeat(2, minmax(0, 1fr));
+	gap: 16rpx;
+	margin-top: 28rpx;
+}
+
+.stat-pill {
+	padding: 20rpx;
+	border-radius: 24rpx;
+	background: rgba(255, 255, 255, 0.12);
+	border: 2rpx solid rgba(255, 255, 255, 0.12);
+}
+
+.stat-label,
+.panel-time,
+.dimension-desc,
+.match-quote,
+.disclaimer {
+	font-size: 22rpx;
+	color: rgba(226, 232, 240, 0.76);
+}
+
+.stat-value {
+	display: block;
+	margin-top: 8rpx;
+	font-size: 30rpx;
+	font-weight: 800;
+	color: #FFFFFF;
+}
+
+.panel {
+	margin-top: 24rpx;
+	padding: 30rpx 26rpx;
+	background: rgba(15, 23, 42, 0.72);
+	border: 2rpx solid rgba(255, 255, 255, 0.08);
+	box-shadow: 0 16rpx 36rpx rgba(0, 0, 0, 0.2);
+	backdrop-filter: blur(18rpx);
+}
+
+.panel-head,
+.match-main,
+.dimension-labels {
+	display: flex;
+	align-items: flex-start;
+	justify-content: space-between;
+	gap: 18rpx;
+}
+
+.panel-title {
+	display: block;
+	font-size: 34rpx;
+	font-weight: 800;
+}
+
+.panel-body {
+	display: block;
+	margin-top: 18rpx;
+	font-size: 27rpx;
+	line-height: 1.8;
+	color: rgba(248, 250, 252, 0.92);
+}
+
+.tag-list {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 14rpx;
+	margin-top: 20rpx;
+}
+
+.tag-chip {
+	padding: 10rpx 18rpx;
+	border-radius: 999rpx;
+	background: rgba(255, 255, 255, 0.1);
+	font-size: 22rpx;
+	font-weight: 700;
+}
+
+.dimension-list,
+.advice-list,
+.action-list,
+.match-list {
+	display: flex;
+	flex-direction: column;
+	gap: 18rpx;
+	margin-top: 18rpx;
+}
+
+.dimension-track {
+	height: 14rpx;
+	margin-top: 10rpx;
+	border-radius: 999rpx;
+	background: rgba(255, 255, 255, 0.08);
+	overflow: hidden;
+}
+
+.dimension-fill {
+	height: 100%;
+	border-radius: inherit;
+}
+
+.dimension-name,
+.match-name,
+.action-text,
+.advice-text {
+	font-size: 26rpx;
+	line-height: 1.65;
+}
+
+.dimension-name,
+.match-name {
+	font-weight: 700;
+}
+
+.dimension-percent,
+.match-score {
+	font-size: 24rpx;
+	font-weight: 800;
+	color: #39FF14;
+}
+
+.dimension-desc {
+	display: block;
+	margin-top: 10rpx;
+}
+
+.advice-item,
+.action-item {
+	display: flex;
+	align-items: flex-start;
+	gap: 16rpx;
+}
+
+.advice-index {
+	width: 44rpx;
+	height: 44rpx;
+	border-radius: 14rpx;
+	flex-shrink: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: rgba(57, 255, 20, 0.14);
+	color: #39FF14;
+	font-size: 22rpx;
+	font-weight: 800;
+}
+
+.action-dot {
+	width: 16rpx;
+	height: 16rpx;
+	margin-top: 12rpx;
+	border-radius: 50%;
+	background: #FF1493;
+	flex-shrink: 0;
+}
+
+.match-item {
+	padding: 22rpx 20rpx;
+	border-radius: 24rpx;
+	background: rgba(255, 255, 255, 0.06);
+}
+
+.match-info {
+	display: flex;
+	align-items: center;
+	gap: 16rpx;
+	flex: 1;
+	min-width: 0;
+}
+
+.match-copy {
+	flex: 1;
+	min-width: 0;
+}
+
+.match-logo {
+	width: 86rpx;
+	height: 86rpx;
+	border-radius: 18rpx;
+	background: rgba(255, 255, 255, 0.06);
+	flex-shrink: 0;
+}
+
+.match-quote {
+	display: block;
+	margin-top: 8rpx;
+}
+
+.cta-group {
+	display: flex;
+	flex-direction: column;
+	gap: 16rpx;
+	margin-top: 28rpx;
+}
+
+.cta-primary,
+.cta-secondary,
+.cta-ghost {
+	width: 100%;
+	min-height: 94rpx;
+	border-radius: 999rpx;
+	font-size: 30rpx;
+	font-weight: 800;
+	border: none;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.cta-primary::after,
+.cta-secondary::after,
+.cta-ghost::after {
+	border: none;
+}
+
+.cta-primary {
+	background: linear-gradient(135deg, #39FF14 0%, #89FF62 100%);
+	color: #0F172A;
+}
+
+.cta-secondary {
+	background: linear-gradient(135deg, #FF1493 0%, #FF6B6B 100%);
+	color: #FFFFFF;
+}
+
+.cta-ghost {
+	background: rgba(255, 255, 255, 0.08);
+	color: #FFFFFF;
+	border: 2rpx solid rgba(255, 255, 255, 0.12);
+}
+
+.disclaimer {
+	display: block;
+	margin-top: 24rpx;
+	padding: 0 6rpx;
+	line-height: 1.7;
+	text-align: center;
+}
+</style>

src/pages/nsti/test.vue

@@ -0,0 +1,367 @@
+<template>
+	<view class="page">
+		<view class="topbar">
+			<view class="topbar-head">
+				<text class="topbar-kicker">赛博尼古丁测试</text>
+				<text class="topbar-progress">已完成 {{ answeredCount }}/{{ questions.length }}</text>
+			</view>
+			<view class="progress-track">
+				<view class="progress-fill" :style="{ width: progress + '%' }"></view>
+			</view>
+		</view>
+
+		<view class="question-card" v-if="currentQuestion">
+			<view class="question-meta">
+				<text class="question-count">第 {{ currentIndex + 1 }} / {{ questions.length }} 题</text>
+				<text class="question-tip">{{ currentQuestion.subtitle }}</text>
+			</view>
+			<text class="question-title">{{ currentQuestion.title }}</text>
+
+			<view class="option-list">
+				<view
+					v-for="(option, index) in currentQuestion.options"
+					:key="option.key"
+					class="option-card"
+					:class="{ active: selectedIndex === index }"
+					@tap="selectOption(option, index)"
+				>
+					<view class="option-badge">{{ option.key }}</view>
+					<view class="option-copy">
+						<text class="option-text">{{ option.text }}</text>
+					</view>
+					<text class="option-check">{{ selectedIndex === index ? '已选' : '选择' }}</text>
+				</view>
+			</view>
+		</view>
+
+		<view class="helper-card">
+			<text class="helper-title">作答建议</text>
+			<text class="helper-text">按第一直觉选就好，不用追求“正确”。这个测试更想看你平时最真实的惯性。</text>
+		</view>
+
+		<view class="footer-actions">
+			<button class="ghost-btn" :disabled="currentIndex === 0" @tap="prevQuestion">上一题</button>
+		</view>
+	</view>
+</template>
+
+<script setup>
+import { computed, ref } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+import { calculateNSTIResult, clearNSTIDraft, getNSTIDraft, getNSTIQuestions, saveNSTIDraft, saveNSTIResult } from '@/utils/nsti'
+
+const questions = ref(getNSTIQuestions())
+const currentIndex = ref(0)
+const answers = ref([])
+const autoAdvancing = ref(false)
+
+const currentQuestion = computed(() => questions.value[currentIndex.value] || null)
+const selectedIndex = computed(() => answers.value[currentIndex.value]?.selectedIndex ?? null)
+const answeredCount = computed(() => answers.value.filter(Boolean).length)
+const progress = computed(() => Math.round(((currentIndex.value + 1) / questions.value.length) * 100))
+
+function initialAnswers() {
+	return Array.from({ length: questions.value.length }, () => null)
+}
+
+function persistDraft() {
+	saveNSTIDraft({
+		currentIndex: currentIndex.value,
+		answers: answers.value,
+		updatedAt: new Date().toISOString()
+	})
+}
+
+function loadDraft() {
+	const draft = getNSTIDraft()
+	if (!draft || !Array.isArray(draft.answers)) {
+		answers.value = initialAnswers()
+		currentIndex.value = 0
+		return
+	}
+	answers.value = draft.answers.concat(initialAnswers()).slice(0, questions.value.length)
+	currentIndex.value = Math.min(Number(draft.currentIndex || 0), questions.value.length - 1)
+}
+
+function startFresh() {
+	clearNSTIDraft()
+	answers.value = initialAnswers()
+	currentIndex.value = 0
+}
+
+function selectOption(option, selectedOptionIndex) {
+	answers.value[currentIndex.value] = {
+		questionId: currentQuestion.value.id,
+		selectedIndex: selectedOptionIndex,
+		dimension: option.key,
+		text: option.text,
+		weights: option.weights
+	}
+	persistDraft()
+
+	if (autoAdvancing.value) return
+	autoAdvancing.value = true
+
+	setTimeout(() => {
+		if (currentIndex.value >= questions.value.length - 1) {
+			submitTest()
+		} else {
+			currentIndex.value += 1
+			persistDraft()
+			uni.pageScrollTo({ scrollTop: 0, duration: 250 })
+		}
+		autoAdvancing.value = false
+	}, 180)
+}
+
+function ensureSelected() {
+	if (selectedIndex.value !== null) return true
+	uni.showToast({ title: '先选一个更像你的答案', icon: 'none' })
+	return false
+}
+
+function nextQuestion() {
+	if (!ensureSelected()) return
+	if (currentIndex.value < questions.value.length - 1) {
+		currentIndex.value += 1
+		persistDraft()
+		uni.pageScrollTo({ scrollTop: 0, duration: 250 })
+	}
+}
+
+function prevQuestion() {
+	if (autoAdvancing.value) return
+	if (currentIndex.value === 0) return
+	currentIndex.value -= 1
+	persistDraft()
+	uni.pageScrollTo({ scrollTop: 0, duration: 250 })
+}
+
+function submitTest() {
+	if (!ensureSelected()) return
+	if (answers.value.some((item) => !item)) {
+		uni.showToast({ title: '还有题目没答完', icon: 'none' })
+		return
+	}
+
+	try {
+		uni.showLoading({ title: '生成人格中...', mask: true })
+		const result = calculateNSTIResult(answers.value)
+		saveNSTIResult(result)
+		uni.redirectTo({ url: `/pages/nsti/result?id=${result.id}` })
+	} catch (error) {
+		console.error('calculate NSTI result error:', error)
+		uni.showToast({ title: '生成结果失败', icon: 'none' })
+	} finally {
+		uni.hideLoading()
+	}
+}
+
+onLoad((options) => {
+	if (options?.resume === '1') {
+		loadDraft()
+		return
+	}
+	startFresh()
+})
+</script>
+
+<style scoped>
+.page {
+	min-height: 100vh;
+	padding: 28rpx 26rpx 42rpx;
+	box-sizing: border-box;
+	background:
+		radial-gradient(circle at 0% 0%, rgba(255, 159, 28, 0.18), transparent 32%),
+		radial-gradient(circle at 100% 10%, rgba(58, 134, 255, 0.14), transparent 30%),
+		linear-gradient(180deg, #FFF7ED 0%, #FFF3F0 36%, #F8FAFC 100%);
+}
+
+.topbar,
+.question-card,
+.helper-card {
+	border-radius: 32rpx;
+	background: rgba(255, 255, 255, 0.86);
+	box-shadow: 0 18rpx 40rpx rgba(15, 23, 42, 0.08);
+	border: 2rpx solid rgba(255, 255, 255, 0.72);
+	backdrop-filter: blur(18rpx);
+}
+
+.topbar {
+	padding: 26rpx 24rpx;
+}
+
+.topbar-head {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 18rpx;
+}
+
+.topbar-kicker,
+.topbar-progress,
+.question-count,
+.question-tip,
+.helper-title {
+	font-size: 24rpx;
+}
+
+.topbar-kicker {
+	font-weight: 700;
+	color: #111827;
+}
+
+.topbar-progress,
+.question-tip {
+	color: #667085;
+}
+
+.progress-track {
+	height: 14rpx;
+	margin-top: 20rpx;
+	border-radius: 999rpx;
+	background: rgba(148, 163, 184, 0.18);
+	overflow: hidden;
+}
+
+.progress-fill {
+	height: 100%;
+	border-radius: inherit;
+	background: linear-gradient(90deg, #FF7A59 0%, #FFB36A 100%);
+}
+
+.question-card {
+	margin-top: 24rpx;
+	padding: 36rpx 28rpx;
+}
+
+.question-meta {
+	display: flex;
+	align-items: flex-start;
+	justify-content: space-between;
+	gap: 18rpx;
+}
+
+.question-count {
+	font-weight: 800;
+	color: #FF1493;
+}
+
+.question-title {
+	display: block;
+	margin-top: 22rpx;
+	font-size: 46rpx;
+	line-height: 1.25;
+	font-weight: 800;
+	color: #101828;
+}
+
+.option-list {
+	display: flex;
+	flex-direction: column;
+	gap: 18rpx;
+	margin-top: 28rpx;
+}
+
+.option-card {
+	display: flex;
+	align-items: center;
+	gap: 18rpx;
+	padding: 24rpx 22rpx;
+	border-radius: 28rpx;
+	background: #FFFFFF;
+	border: 2rpx solid rgba(15, 23, 42, 0.08);
+}
+
+.option-card.active {
+	border-color: rgba(255, 20, 147, 0.42);
+	box-shadow: 0 16rpx 30rpx rgba(255, 20, 147, 0.12);
+	transform: translateY(-2rpx);
+}
+
+.option-badge {
+	width: 68rpx;
+	height: 68rpx;
+	border-radius: 22rpx;
+	flex-shrink: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: linear-gradient(135deg, #111827 0%, #475467 100%);
+	color: #FFFFFF;
+	font-size: 28rpx;
+	font-weight: 800;
+}
+
+.option-copy {
+	flex: 1;
+}
+
+.option-text {
+	font-size: 30rpx;
+	line-height: 1.5;
+	color: #101828;
+	font-weight: 700;
+}
+
+.option-check {
+	font-size: 24rpx;
+	font-weight: 700;
+	color: #FF1493;
+	flex-shrink: 0;
+}
+
+.helper-card {
+	margin-top: 24rpx;
+	padding: 28rpx 24rpx;
+	background:
+		linear-gradient(135deg, rgba(255, 20, 147, 0.08), rgba(57, 255, 20, 0.08)),
+		rgba(255, 255, 255, 0.82);
+}
+
+.helper-title {
+	display: block;
+	font-weight: 800;
+	color: #111827;
+}
+
+.helper-text {
+	display: block;
+	margin-top: 10rpx;
+	font-size: 26rpx;
+	line-height: 1.7;
+	color: #475467;
+}
+
+.footer-actions {
+	display: flex;
+	margin-top: 28rpx;
+	padding-bottom: env(safe-area-inset-bottom);
+}
+
+.ghost-btn {
+	width: 100%;
+	min-height: 94rpx;
+	border-radius: 999rpx;
+	font-size: 30rpx;
+	font-weight: 800;
+	border: none;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.ghost-btn::after {
+	border: none;
+}
+
+.ghost-btn {
+	background: rgba(255, 255, 255, 0.86);
+	color: #111827;
+	border: 2rpx solid rgba(15, 23, 42, 0.08);
+}
+
+.ghost-btn[disabled] {
+	opacity: 0.42;
+}
+</style>

src/pages/onboarding/index.vue

@@ -17,13 +17,20 @@
 						:class="{ 'mode-switch-item-active': formData.mode === item.value }"
 						@tap="selectMode(item.value)"
 					>
-						<text class="mode-switch-icon">{{ item.icon }}</text>
 						<text class="mode-switch-title">{{ item.label }}</text>
 						<text class="mode-switch-desc">{{ item.desc }}</text>
 					</view>
 				</view>
 			</view>
 
+			<!-- 戒烟日期（戒烟模式可见） -->
+			<view v-if="formData.mode === 'quit'" class="form-section">
+				<text class="section-label">戒烟开始日期</text>
+				<picker mode="date" :value="formData.quit_date" @change="onQuitDateChange">
+					<view class="time-picker">{{ formData.quit_date || '请选择日期' }}</view>
+				</picker>
+			</view>
+
 			<!-- 每天抽烟数量 -->
 			<view class="form-section">
 				<view class="section-row">
@@ -99,13 +106,54 @@
 							v-model="priceYuan"
 							class="inline-field"
 						placeholder="25"
-							placeholder-style="color: #9CC5B5"
+						placeholder-style="color: #CCCCCC"
 						/>
 						<text class="inline-unit">元/包</text>
 					</view>
 				</view>
 			</view>
 
+			<!-- 成就风格 -->
+			<view v-if="achievementThemes.length > 0" class="form-section">
+				<view class="theme-section-head">
+					<view>
+						<text class="section-label">成就称号风格</text>
+						<text class="section-hint">选择一套更能激励你的成长称号</text>
+					</view>
+					<text class="theme-section-badge">可更换</text>
+				</view>
+				<view class="theme-list">
+					<view
+						v-for="theme in achievementThemes"
+						:key="theme.id"
+						class="theme-card"
+						:class="{ 'theme-card-active': formData.achievement_theme_id === theme.id }"
+						@tap="formData.achievement_theme_id = theme.id"
+					>
+						<view class="theme-glow"></view>
+						<view class="theme-header">
+							<view class="theme-icon-wrap">
+								<text class="theme-icon">{{ theme.icon }}</text>
+							</view>
+							<view class="theme-title-wrap">
+								<text class="theme-name">{{ theme.name }}</text>
+								<text class="theme-desc">打卡进度会逐步解锁称号</text>
+							</view>
+							<view class="theme-check">
+								<text v-if="formData.achievement_theme_id === theme.id">✓</text>
+							</view>
+						</view>
+						<view class="theme-levels">
+							<text
+								v-for="(level, idx) in theme.levels"
+								:key="level.id"
+								class="theme-level"
+							>{{ level.name }}</text>
+						</view>
+					</view>
+				</view>
+			</view>
+
 			<view class="bottom-space"></view>
 		</scroll-view>
 
@@ -123,6 +171,7 @@ import { onShareAppMessage } from '@dcloudio/uni-app'
 import { useProfileStore } from '@/stores/profile'
 import { useUserStore } from '@/stores/user'
 import { useLogin } from '@/hooks/useLogin'
+import * as api from '@/api'
 
 const profileStore = useProfileStore()
 const userStore = useUserStore()
@@ -130,12 +179,18 @@ const { waitForLogin } = useLogin()
 
 const navBarHeight = ref(0)
 const modeSaving = ref(false)
+const achievementThemes = ref([])
 
 const modeOptions = [
-	{ value: 'quit', label: '戒烟打卡', desc: '按天打卡，坚持戒烟', icon: '🌿' },
-	{ value: 'record', label: '记录抽烟', desc: '按支数记录变化趋势', icon: '📊' }
+	{ value: 'quit', label: '戒烟打卡', desc: '按天打卡，坚持戒烟' },
+	{ value: 'record', label: '记录抽烟', desc: '按支数记录变化趋势' }
 ]
 
+function todayStr() {
+	const d = new Date()
+	return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
+}
+
 const formData = ref({
 	mode: 'record',
 	baseline_cigs_per_day: 10,
@@ -144,7 +199,9 @@ const formData = ref({
 	smoke_motivations: [],
 	wake_up_time: '07:30',
 	sleep_time: '23:00',
-	pack_price_cent: 2500
+	pack_price_cent: 2500,
+	quit_date: todayStr(),
+	achievement_theme_id: null
 })
 
 const priceYuan = ref('25')
@@ -201,6 +258,10 @@ async function selectMode(mode) {
 	}
 }
 
+function onQuitDateChange(e) {
+	formData.value.quit_date = e.detail.value
+}
+
 function onWakeTimeChange(e) {
 	formData.value.wake_up_time = e.detail.value
 }
@@ -216,10 +277,6 @@ async function handleSubmit() {
 		uni.showLoading({ title: '保存中...' })
 		await profileStore.saveProfile(formData.value)
 		uni.hideLoading()
-		if (!formData.value.mode) {
-			uni.redirectTo({ url: '/pages/mode-select/index' })
-			return
-		}
 		uni.switchTab({ url: '/pages/index/index' })
 	} catch (e) {
 		uni.hideLoading()
@@ -238,6 +295,17 @@ onMounted(async () => {
 	}
 
 	await waitForLogin()
+
+	try {
+		const res = await api.getAchievementThemes()
+		achievementThemes.value = res.data?.themes || []
+		if (achievementThemes.value.length > 0 && !formData.value.achievement_theme_id) {
+			formData.value.achievement_theme_id = achievementThemes.value[0].id
+		}
+	} catch (e) {
+		console.error('loadAchievementThemes error:', e)
+	}
+
 	try {
 		const profileData = await profileStore.fetchProfile()
 		if (profileData?.profile) {
@@ -253,7 +321,9 @@ onMounted(async () => {
 				smoke_motivations: Array.isArray(profile.smoke_motivations) ? profile.smoke_motivations : formData.value.smoke_motivations,
 				wake_up_time: profile.wake_up_time || formData.value.wake_up_time,
 				sleep_time: profile.sleep_time || formData.value.sleep_time,
-				pack_price_cent: profile.pack_price_cent || formData.value.pack_price_cent
+				pack_price_cent: profile.pack_price_cent || formData.value.pack_price_cent,
+				quit_date: profile.quit_date ? profile.quit_date.split('T')[0] : formData.value.quit_date,
+				achievement_theme_id: profile.achievement_theme_id || formData.value.achievement_theme_id
 			}
 			if (profile.pack_price_cent) {
 				priceYuan.value = String((profile.pack_price_cent / 100).toFixed(2)).replace(/\.00$/, '')
@@ -275,56 +345,58 @@ onShareAppMessage(() => {
 </script>
 
 <style scoped>
-/* ── 页面基础 ── */
 .page {
 	min-height: 100vh;
-	background: linear-gradient(180deg, #E6F7F2 0%, #F0FBF7 40%, #FAFFFE 100%);
+	background-color: #F5F7F6;
 	display: flex;
 	flex-direction: column;
+	box-sizing: border-box;
+	overflow-x: hidden;
+	width: 100%;
 }
 
 .nav-area {
 	padding: 20rpx 32rpx 16rpx;
-	background: transparent;
+	background: linear-gradient(180deg, #DDF3EB 0%, #F5F7F6 100%);
+	box-sizing: border-box;
 }
 
 .nav-title {
 	display: block;
 	font-size: 38rpx;
 	font-weight: 700;
-	color: #0D3D2E;
+	color: #1A1A1A;
 }
 
 .nav-subtitle {
 	display: block;
 	margin-top: 6rpx;
 	font-size: 24rpx;
-	color: #52806E;
+	color: #999999;
 }
 
-/* ── 滚动区 ── */
 .content {
 	flex: 1;
-	padding: 0 28rpx;
+	padding: 0 32rpx;
+	box-sizing: border-box;
+	width: 100%;
 }
 
-/* ── 卡片式表单区块 ── */
 .form-section {
 	margin-bottom: 20rpx;
-	background: rgba(255, 255, 255, 0.88);
-	border-radius: 24rpx;
-	border: 1.5rpx solid rgba(52, 200, 160, 0.14);
-	box-shadow: 0 4rpx 18rpx rgba(52, 200, 160, 0.07);
+	background: #FFFFFF;
+	border-radius: 32rpx;
 	padding: 28rpx 24rpx;
+	box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.03);
+	box-sizing: border-box;
 }
 
 .section-label {
 	display: block;
 	margin-bottom: 18rpx;
-	font-size: 26rpx;
+	font-size: 28rpx;
 	font-weight: 600;
-	color: #1a5c45;
-	letter-spacing: 0.4rpx;
+	color: #666666;
 }
 
 .section-row {
@@ -333,58 +405,54 @@ onShareAppMessage(() => {
 	align-items: center;
 }
 
-/* ── 模式选择 ── */
+.section-row .section-label {
+	margin-bottom: 0;
+}
+
 .mode-switch {
-	display: grid;
-	grid-template-columns: repeat(2, minmax(0, 1fr));
+	display: flex;
 	gap: 16rpx;
 }
 
 .mode-switch-item {
-	padding: 28rpx 20rpx;
+	flex: 1;
+	padding: 24rpx 20rpx;
 	border-radius: 20rpx;
-	background: rgba(255, 255, 255, 0.72);
-	border: 2rpx solid rgba(52, 200, 160, 0.1);
-	box-shadow: 0 2rpx 10rpx rgba(52, 200, 160, 0.04);
+	background: #F9FBFA;
+	border: 2rpx solid #F0F0F0;
 	transition: all 0.2s;
+	text-align: center;
+	box-sizing: border-box;
 }
 
 .mode-switch-item-active {
-	background: rgba(52, 200, 160, 0.09);
-	border-color: rgba(52, 200, 160, 0.45);
-	box-shadow: 0 4rpx 16rpx rgba(52, 200, 160, 0.14);
-}
-
-.mode-switch-icon {
-	display: block;
-	font-size: 40rpx;
-	margin-bottom: 10rpx;
+	background: #E8F5F0;
+	border-color: #10B981;
 }
 
 .mode-switch-title {
 	display: block;
 	font-size: 28rpx;
 	font-weight: 700;
-	color: #0D3D2E;
+	color: #1A1A1A;
 }
 
 .mode-switch-item-active .mode-switch-title {
-	color: #1a8c62;
+	color: #10B981;
 }
 
 .mode-switch-desc {
 	display: block;
 	margin-top: 6rpx;
-	font-size: 21rpx;
+	font-size: 22rpx;
 	line-height: 1.5;
-	color: #7aA898;
+	color: #999999;
 }
 
 .mode-switch-item-active .mode-switch-desc {
-	color: #3a9e78;
+	color: #10B981;
 }
 
-/* ── 数字步进器 ── */
 .inline-input {
 	display: flex;
 	align-items: center;
@@ -395,41 +463,38 @@ onShareAppMessage(() => {
 	width: 60rpx;
 	height: 60rpx;
 	border-radius: 50%;
-	background: rgba(52, 200, 160, 0.1);
+	background: #E8F5F0;
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	font-size: 38rpx;
-	color: #34C8A0;
-	border: 1.5rpx solid rgba(52, 200, 160, 0.25);
+	color: #10B981;
 }
 
 .inline-value {
 	font-size: 38rpx;
 	font-weight: 700;
-	color: #0D3D2E;
+	color: #1A1A1A;
 	min-width: 52rpx;
 	text-align: center;
 }
 
 .inline-unit {
 	font-size: 24rpx;
-	color: #7aA898;
+	color: #999999;
 }
 
 .inline-field {
 	width: 100rpx;
 	font-size: 32rpx;
 	font-weight: 600;
-	color: #0D3D2E;
+	color: #1A1A1A;
 	text-align: center;
-	background: rgba(52, 200, 160, 0.06);
+	background: #F5F7F6;
 	padding: 10rpx 14rpx;
 	border-radius: 12rpx;
-	border: 1.5rpx solid rgba(52, 200, 160, 0.2);
 }
 
-/* ── 标签选择 ── */
 .options-row {
 	display: flex;
 	flex-wrap: wrap;
@@ -439,20 +504,17 @@ onShareAppMessage(() => {
 .option-tag {
 	padding: 14rpx 26rpx;
 	border-radius: 999rpx;
-	background: rgba(255, 255, 255, 0.9);
-	font-size: 25rpx;
-	color: #4a7a66;
-	border: 1.5rpx solid rgba(52, 200, 160, 0.18);
+	background: #F5F5F5;
+	font-size: 26rpx;
+	color: #666666;
 }
 
 .option-tag-active {
-	background: rgba(52, 200, 160, 0.12);
-	border-color: rgba(52, 200, 160, 0.45);
-	color: #1a7f61;
+	background: #E8F5F0;
+	color: #10B981;
 	font-weight: 600;
 }
 
-/* ── 作息时间 ── */
 .time-row {
 	display: flex;
 	gap: 20rpx;
@@ -464,23 +526,205 @@ onShareAppMessage(() => {
 
 .time-label {
 	font-size: 22rpx;
-	color: #7aA898;
+	color: #999999;
 	display: block;
 	margin-bottom: 8rpx;
 }
 
 .time-picker {
-	background: rgba(52, 200, 160, 0.06);
+	background: #F5F7F6;
 	padding: 18rpx 20rpx;
-	border-radius: 14rpx;
+	border-radius: 16rpx;
 	font-size: 30rpx;
 	font-weight: 600;
-	color: #0D3D2E;
+	color: #1A1A1A;
 	text-align: center;
-	border: 1.5rpx solid rgba(52, 200, 160, 0.2);
 }
 
-/* ── 底部空白 + 按钮 ── */
+.section-hint {
+	display: block;
+	font-size: 22rpx;
+	color: #999999;
+	margin-top: -10rpx;
+	margin-bottom: 16rpx;
+}
+
+.theme-section-head {
+	display: flex;
+	align-items: flex-start;
+	justify-content: space-between;
+	gap: 20rpx;
+	margin-bottom: 18rpx;
+}
+
+.theme-section-head .section-hint {
+	margin-bottom: 0;
+}
+
+.theme-section-badge {
+	flex-shrink: 0;
+	padding: 8rpx 16rpx;
+	border-radius: 999rpx;
+	background: rgba(110, 231, 183, 0.16);
+	border: 1rpx solid rgba(16, 185, 129, 0.16);
+	font-size: 20rpx;
+	font-weight: 700;
+	color: #0F766E;
+}
+
+.theme-list {
+	display: flex;
+	flex-direction: column;
+	gap: 18rpx;
+}
+
+.theme-card {
+	position: relative;
+	overflow: hidden;
+	padding: 24rpx;
+	border-radius: 28rpx;
+	background:
+		linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.92));
+	border: 2rpx solid rgba(226, 232, 240, 0.9);
+	box-sizing: border-box;
+	box-shadow: 0 10rpx 28rpx rgba(15, 23, 42, 0.04);
+}
+
+.theme-card-active {
+	background:
+		radial-gradient(circle at top right, rgba(103, 232, 249, 0.28), transparent 34%),
+		linear-gradient(135deg, rgba(236, 253, 245, 0.98), rgba(240, 249, 255, 0.94));
+	border-color: rgba(16, 185, 129, 0.72);
+	box-shadow: 0 18rpx 42rpx rgba(16, 185, 129, 0.13);
+}
+
+.theme-glow {
+	position: absolute;
+	top: -70rpx;
+	right: -70rpx;
+	width: 190rpx;
+	height: 190rpx;
+	border-radius: 50%;
+	background: rgba(110, 231, 183, 0.12);
+}
+
+.theme-card-active .theme-glow {
+	background: rgba(103, 232, 249, 0.28);
+}
+
+.theme-header {
+	position: relative;
+	display: flex;
+	align-items: center;
+	gap: 18rpx;
+	margin-bottom: 20rpx;
+}
+
+.theme-icon-wrap {
+	width: 72rpx;
+	height: 72rpx;
+	border-radius: 24rpx;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: rgba(241, 245, 249, 0.92);
+	border: 1rpx solid rgba(226, 232, 240, 0.9);
+	box-shadow: inset 0 1rpx 0 rgba(255, 255, 255, 0.7);
+	flex-shrink: 0;
+}
+
+.theme-card-active .theme-icon-wrap {
+	background: linear-gradient(135deg, #6EE7B7, #67E8F9);
+	border-color: rgba(255, 255, 255, 0.9);
+	box-shadow: 0 12rpx 26rpx rgba(20, 184, 166, 0.18);
+}
+
+.theme-icon {
+	font-size: 36rpx;
+	line-height: 1;
+}
+
+.theme-title-wrap {
+	flex: 1;
+	min-width: 0;
+	display: flex;
+	flex-direction: column;
+	gap: 6rpx;
+}
+
+.theme-name {
+	font-size: 29rpx;
+	line-height: 1.25;
+	font-weight: 800;
+	color: #1E293B;
+}
+
+.theme-desc {
+	font-size: 21rpx;
+	line-height: 1.4;
+	color: #64748B;
+}
+
+.theme-card-active .theme-name {
+	color: #0F766E;
+}
+
+.theme-check {
+	width: 42rpx;
+	height: 42rpx;
+	border-radius: 50%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border: 2rpx solid rgba(148, 163, 184, 0.34);
+	background: rgba(255, 255, 255, 0.78);
+	color: #FFFFFF;
+	font-size: 24rpx;
+	font-weight: 900;
+	flex-shrink: 0;
+}
+
+.theme-card-active .theme-check {
+	border-color: transparent;
+	background: linear-gradient(135deg, #10B981, #06B6D4);
+	box-shadow: 0 8rpx 18rpx rgba(16, 185, 129, 0.2);
+}
+
+.theme-levels {
+	position: relative;
+	display: flex;
+	flex-wrap: wrap;
+	gap: 10rpx;
+}
+
+.theme-level {
+	max-width: 100%;
+	padding: 8rpx 14rpx;
+	border-radius: 999rpx;
+	background: rgba(241, 245, 249, 0.95);
+	border: 1rpx solid rgba(226, 232, 240, 0.9);
+	font-size: 21rpx;
+	line-height: 1.35;
+	font-weight: 700;
+	color: #64748B;
+}
+
+.theme-card-active .theme-level {
+	background: rgba(255, 255, 255, 0.72);
+	border-color: rgba(16, 185, 129, 0.15);
+	color: #0F766E;
+}
+
+.theme-card-active .theme-level:first-child {
+	background: rgba(251, 191, 36, 0.18);
+	border-color: rgba(251, 191, 36, 0.22);
+	color: #B45309;
+}
+
+.theme-arrow {
+	display: none;
+}
+
 .bottom-space {
 	height: 160rpx;
 }
@@ -490,19 +734,19 @@ onShareAppMessage(() => {
 	left: 0;
 	right: 0;
 	bottom: 0;
-	padding: 20rpx 28rpx;
+	padding: 20rpx 32rpx;
 	padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
-	background: linear-gradient(180deg, transparent 0%, rgba(240, 251, 247, 0.97) 35%);
+	background: linear-gradient(180deg, transparent 0%, rgba(245, 247, 246, 0.97) 35%);
 }
 
 .btn-primary {
 	height: 96rpx;
-	background: linear-gradient(180deg, #3DD9AE 0%, #34C8A0 100%);
+	background: #10B981;
 	border-radius: 48rpx;
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	box-shadow: 0 12rpx 28rpx rgba(52, 200, 160, 0.28);
+	box-shadow: 0 8rpx 24rpx rgba(16, 185, 129, 0.25);
 }
 
 .btn-text {

src/pages/profile/index.vue

@@ -6,13 +6,31 @@
 		<view class="section">
 			<text class="section-label">当前账号</text>
 			<view class="user-section card">
+				<!-- #ifdef MP-WEIXIN -->
+				<button class="avatar-btn" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
 					<image class="avatar" :src="userAvatar" mode="aspectFill"></image>
+				</button>
+				<!-- #endif -->
+				<!-- #ifdef H5 -->
+				<image class="avatar" :src="userAvatar" mode="aspectFill" @tap="onChooseAvatarH5"></image>
+				<!-- #endif -->
 				<view class="user-copy">
+					<!-- #ifdef MP-WEIXIN -->
+					<input
+						type="nickname"
+						class="nickname-input"
+						:value="userStore.user?.nickname || ''"
+						placeholder="点击设置昵称"
+						@blur="onNicknameChange"
+					/>
+					<!-- #endif -->
+					<!-- #ifdef H5 -->
 					<text class="user-name">{{ userName }}</text>
-					<text class="user-desc">已连接戒烟记录与统计数据</text>
+					<!-- #endif -->
+					<text class="user-desc">点击头像或昵称可修改</text>
 					<view class="user-meta">
 						<text class="user-pill">{{ modeText }}</text>
-						<text class="user-pill user-pill-muted">{{ shareToken ? '分享已启用' : '分享未生成' }}</text>
+						<text class="user-pill user-pill-muted">{{ achievementTitle }}</text>
 					</view>
 				</view>
 			</view>
@@ -23,24 +41,45 @@
 			<view class="menu-list card">
 				<view class="menu-item">
 					<view class="menu-icon menu-icon-accent">
-						<text class="menu-glyph">享</text>
+						<text class="menu-glyph">奖</text>
 					</view>
 					<view class="menu-content">
-						<text class="menu-label">分享戒烟记录</text>
-						<text class="menu-desc">{{ shareDesc }}</text>
-						<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-label">生成成就海报</text>
+						<text class="menu-desc">{{ posterDesc }}</text>
 					</view>
-					</view>
-					<button class="share-btn" open-type="share" :disabled="shareLoading || !shareToken">
-						{{ shareLoading ? '生成中' : '去分享' }}
+					<button class="share-btn" @tap.stop="goAchievementPoster">
+						生成
 					</button>
 				</view>
 
 				<view class="menu-divider"></view>
 
+				<view class="menu-item" @tap="goSupervisor">
+					<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>
+					<text class="menu-arrow">›</text>
+				</view>
+
+				<view class="menu-divider"></view>
+
+				<view class="menu-item" @tap="goNSTI">
+					<view class="menu-icon menu-icon-nsti">
+						<text class="menu-glyph">测</text>
+					</view>
+					<view class="menu-content">
+						<text class="menu-label">赛博尼古丁测试</text>
+						<text class="menu-desc">{{ nstiDesc }}</text>
+					</view>
+					<text class="menu-arrow">›</text>
+				</view>
+
+				<view class="menu-divider"></view>
+
 				<view class="menu-item" @tap="goOnboarding">
 					<view class="menu-icon menu-icon-accent">
 						<text class="menu-glyph">问</text>
@@ -91,19 +130,20 @@
 <script setup>
 import { computed, ref, onMounted } from 'vue'
 import { onShareAppMessage, onShow } from '@dcloudio/uni-app'
-import * as api from '@/api'
 import { useProfileStore } from '@/stores/profile'
 import { useUserStore } from '@/stores/user'
 import { useLogin } from '@/hooks/useLogin'
+import { getAchievement } from '@/api/smoke'
+import { updateUserProfile, uploadFile } from '@/api/auth'
+import { getLatestNSTIResult } from '@/utils/nsti'
 
 const profileStore = useProfileStore()
 const userStore = useUserStore()
 const { waitForLogin } = useLogin()
 
-const shareToken = ref('')
-const shareExpireAt = ref('')
-const shareLoading = ref(false)
 const navBarHeight = ref(0)
+const latestNSTIResult = ref(null)
+const achievementData = ref(null)
 
 const userName = computed(() => userStore.user?.nickname || '戒烟用户')
 const userAvatar = computed(() => userStore.user?.avatar_url || 'https://linghu-wmr.oss-cn-beijing.aliyuncs.com/smt/avatar.png')
@@ -112,19 +152,17 @@ const modeText = computed(() => {
 	if (userStore.mode === 'record') return '记录抽烟'
 	return '未选择'
 })
+const nstiDesc = computed(() => latestNSTIResult.value
+	? `你上次测出：${latestNSTIResult.value.name}`
+	: '10 道题，测测你是哪一种抽象戒烟人格')
 
-const shareDesc = computed(() => {
-	if (!shareToken.value) {
-		return shareLoading.value ? '正在生成分享信息...' : '先生成分享令牌后即可分享给朋友'
-	}
-	return `有效期至 ${formatExpire(shareExpireAt.value)}，仅查看权限`
-})
-
-const sharePath = computed(() => {
-	if (!shareToken.value) {
-		return 'pages/index/index'
-	}
-	return `pages/share/index?share_token=${shareToken.value}`
+const currentAchievement = computed(() => achievementData.value?.current || null)
+const achievementTitle = computed(() => currentAchievement.value?.name || '戒烟新星')
+const achievementTheme = computed(() => achievementData.value?.theme_name || '少抽成就')
+const achievementScore = computed(() => Number(achievementData.value?.score) || 0)
+const posterDesc = computed(() => {
+	if (!achievementData.value) return '生成你的等级称号、少抽进度和节省成果'
+	return `${achievementTheme.value} · ${achievementTitle.value} · 积分 ${achievementScore.value}`
 })
 
 function setupNavBar() {
@@ -138,56 +176,88 @@ function setupNavBar() {
 	}
 }
 
-function formatExpire(value) {
-	if (!value) return '--'
-	const d = new Date(value)
-	if (Number.isNaN(d.getTime())) return value
-	const y = d.getFullYear()
-	const m = String(d.getMonth() + 1).padStart(2, '0')
-	const day = String(d.getDate()).padStart(2, '0')
-	const hh = String(d.getHours()).padStart(2, '0')
-	const mm = String(d.getMinutes()).padStart(2, '0')
-	return `${y}-${m}-${day} ${hh}:${mm}`
-}
-
-async function prepareShareToken(showToast = false) {
-	if (shareLoading.value) return
-	shareLoading.value = true
+async function fetchPosterData() {
 	try {
-		const res = await api.createShare({ days: 7 })
-		shareToken.value = res.data?.share_token || ''
-		shareExpireAt.value = res.data?.expire_at || ''
-		if (showToast) {
-			uni.showToast({ title: '分享链接已刷新', icon: 'success' })
-		}
+		const achievementRes = await getAchievement()
+		achievementData.value = achievementRes.data?.achievement || null
 	} catch (e) {
-		console.error('prepareShareToken error:', e)
-		if (showToast) {
-			uni.showToast({ title: '生成分享失败', icon: 'none' })
+		console.error('fetchPosterData error:', e)
 	}
+}
+
+async function onChooseAvatar(e) {
+	const avatarUrl = e.detail.avatarUrl
+	if (!avatarUrl) return
+	try {
+		uni.showLoading({ title: '上传头像...' })
+		const uploadRes = await uploadFile(avatarUrl)
+		await doUpdateProfile({ avatar_url: uploadRes.url })
+	} catch (err) {
+		console.error('头像上传失败:', err)
+		uni.showToast({ title: '头像更新失败', icon: 'none' })
 	} finally {
-		shareLoading.value = false
+		uni.hideLoading()
 	}
 }
 
-function handleRefreshShare() {
-	prepareShareToken(true)
-}
-
-function previewSharePage() {
-	if (!shareToken.value) {
-		uni.showToast({ title: '分享令牌尚未生成', icon: 'none' })
-		return
+function onChooseAvatarH5() {
+	uni.chooseImage({
+		count: 1,
+		sizeType: ['compressed'],
+		sourceType: ['album'],
+		success: async (res) => {
+			const tempPath = res.tempFilePaths[0]
+			try {
+				uni.showLoading({ title: '上传头像...' })
+				const uploadRes = await uploadFile(tempPath)
+				await doUpdateProfile({ avatar_url: uploadRes.url })
+			} catch (err) {
+				console.error('头像上传失败:', err)
+				uni.showToast({ title: '头像更新失败', icon: 'none' })
+			} finally {
+				uni.hideLoading()
+			}
 		}
-	uni.navigateTo({
-		url: `/pages/share/index?share_token=${shareToken.value}`
 	})
 }
 
+async function onNicknameChange(e) {
+	const nickname = (e.detail.value || '').trim()
+	if (!nickname || nickname === userStore.user?.nickname) return
+	try {
+		await doUpdateProfile({ nickname })
+	} catch (err) {
+		uni.showToast({ title: '昵称更新失败', icon: 'none' })
+	}
+}
+
+async function doUpdateProfile(data) {
+	try {
+		const res = await updateUserProfile(data)
+		userStore.updateUser(res.data)
+		uni.showToast({ title: '修改成功', icon: 'success' })
+	} catch (e) {
+		console.error('doUpdateProfile error:', e)
+		uni.showToast({ title: '修改失败', icon: 'none' })
+	}
+}
+
 function goOnboarding() {
 	uni.navigateTo({ url: '/pages/onboarding/index' })
 }
 
+function goNSTI() {
+	uni.navigateTo({ url: '/pages/nsti/index' })
+}
+
+function goSupervisor() {
+	uni.navigateTo({ url: '/pages/supervisor/index' })
+}
+
+function goAchievementPoster() {
+	uni.navigateTo({ url: '/pages/share/index' })
+}
+
 function clearCache() {
 	uni.showModal({
 		title: '清除缓存',
@@ -216,8 +286,8 @@ function copyInfo() {
 
 onShareAppMessage(() => {
 	return {
-		title: `${userName.value}的戒烟记录（仅查看）`,
-		path: sharePath.value
+		title: `${userName.value}正在解锁「${achievementTitle.value}」`,
+		path: 'pages/index/index'
 	}
 })
 
@@ -228,7 +298,8 @@ onMounted(() => {
 onShow(async () => {
 	await waitForLogin()
 	await profileStore.fetchProfile()
-	await prepareShareToken(false)
+	await fetchPosterData()
+	latestNSTIResult.value = getLatestNSTIResult()
 })
 </script>
 
@@ -283,6 +354,21 @@ onShow(async () => {
 	gap: 32rpx;
 }
 
+.avatar-btn {
+	padding: 0;
+	margin: 0;
+	background: transparent;
+	border: none;
+	line-height: 1;
+	width: 128rpx;
+	height: 128rpx;
+	flex-shrink: 0;
+}
+
+.avatar-btn::after {
+	border: none;
+}
+
 .avatar {
 	width: 128rpx;
 	height: 128rpx;
@@ -298,6 +384,18 @@ onShow(async () => {
 	align-items: flex-start;
 }
 
+.nickname-input {
+	font-size: 38rpx;
+	font-weight: 700;
+	color: #1A1A1A;
+	background: transparent;
+	border: none;
+	padding: 0;
+	height: 56rpx;
+	line-height: 56rpx;
+	width: 100%;
+}
+
 .user-name {
 	font-size: 38rpx;
 	font-weight: 700;
@@ -368,6 +466,10 @@ onShow(async () => {
 	background: #F5F5F5;
 }
 
+.menu-icon-nsti {
+	background: linear-gradient(135deg, #FFE0F1 0%, #E6FFDE 100%);
+}
+
 .menu-glyph {
 	font-size: 30rpx;
 	font-weight: 700;
@@ -377,6 +479,10 @@ onShow(async () => {
 	color: #10B981;
 }
 
+.menu-icon-nsti .menu-glyph {
+	color: #C2187A;
+}
+
 .menu-icon-muted .menu-glyph {
 	color: #999999;
 }
@@ -400,24 +506,6 @@ onShow(async () => {
 	color: #999999;
 }
 
-.menu-actions {
-	margin-top: 8rpx;
-	display: flex;
-	align-items: center;
-	flex-wrap: wrap;
-	gap: 12rpx;
-	font-size: 24rpx;
-}
-
-.menu-action {
-	color: #10B981;
-	font-weight: 500;
-}
-
-.menu-action-sep {
-	color: #D4D4D4;
-}
-
 .share-btn {
 	margin: 0;
 	padding: 12rpx 32rpx;

src/pages/stats-calendar/index.vue

@@ -1,5 +1,12 @@
 <template>
 	<view class="page">
+		<view class="page-head">
+			<view>
+				<text class="page-title">日历详情</text>
+				<text class="page-subtitle">按天查看吸烟数量和记录内容</text>
+			</view>
+			<view class="today-pill" @tap="goToday">今天</view>
+		</view>
 
 		<view class="card">
 			<view class="month-bar">
@@ -20,17 +27,17 @@
 					</view>
 				</view>
 				<view class="summary-chip summary-chip-soft">
-					<text class="summary-chip-label">本月忍住</text>
+					<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>
+						<text class="summary-chip-value">{{ averageDailySmoke }}</text>
+						<text class="summary-chip-unit">支</text>
 					</view>
 				</view>
 				<view class="summary-chip summary-chip-soft">
-					<text class="summary-chip-label">记录天数</text>
+					<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>
+						<text class="summary-chip-value">{{ peakDaySmoke }}</text>
+						<text class="summary-chip-unit">支</text>
 					</view>
 				</view>
 			</view>
@@ -41,8 +48,8 @@
 					<text class="legend-text">已抽</text>
 				</view>
 				<view class="legend-item">
-					<view class="legend-dot legend-dot-resisted"></view>
-					<text class="legend-text">忍住</text>
+					<view class="legend-dot legend-dot-selected"></view>
+					<text class="legend-text">选中日期</text>
 				</view>
 				<text class="legend-tip">点击灰色日期可切换到对应月份</text>
 			</view>
@@ -76,6 +83,36 @@
 			</view>
 		</view>
 
+		<view class="detail-card">
+			<view class="detail-head">
+				<view>
+					<text class="detail-title">{{ selectedDateLabel }}</text>
+					<text class="detail-subtitle">{{ selectedDaySummary }}</text>
+				</view>
+				<view class="detail-total">
+					<text class="detail-total-value">{{ selectedSmokeCount }}</text>
+					<text class="detail-total-unit">支</text>
+				</view>
+			</view>
+
+			<view v-if="selectedDayLogs.length > 0" class="log-list">
+				<view v-for="item in selectedDayLogs" :key="item.id || item.smoke_at || item.createtime" class="log-item">
+					<view class="log-time">{{ formatLogTime(item) }}</view>
+					<view class="log-main">
+						<view class="log-line">
+							<text class="log-count">{{ Number(item.num) || 0 }} 支</text>
+							<text v-if="item.scene || item.reason" class="log-tag">{{ item.scene || item.reason }}</text>
+						</view>
+						<text v-if="item.remark" class="log-remark">{{ item.remark }}</text>
+					</view>
+				</view>
+			</view>
+			<view v-else class="empty-detail">
+				<text class="empty-title">这天还没有吸烟记录</text>
+				<text class="empty-text">保持记录后，日历会更准确地显示少抽趋势。</text>
+			</view>
+		</view>
+
 		<view class="bottom-safe"></view>
 	</view>
 </template>
@@ -118,7 +155,7 @@ const calendarDays = computed(() => {
 
 	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 }
+		const summary = summaryMap.get(dateKey) || { smokeCount: 0 }
 		result.push({
 			key: dateKey,
 			date: dateKey,
@@ -126,8 +163,7 @@ const calendarDays = computed(() => {
 			isCurrentMonth: date.getMonth() === monthStart.getMonth(),
 			isToday: dateKey === todayText,
 			isFuture: dateKey > todayText,
-			smokeCount: summary.smokeCount,
-			resistedCount: summary.resistedCount
+			smokeCount: summary.smokeCount
 		})
 	}
 
@@ -135,19 +171,45 @@ const calendarDays = computed(() => {
 })
 
 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)
+	return monthLogs.value.reduce((total, item) => total + (Number(item.num) || 0), 0)
 })
 
 const activeDayCount = computed(() => monthSummaryMap.value.size)
 
+const averageDailySmoke = computed(() => {
+	if (activeDayCount.value <= 0) return '0.0'
+	return (monthSmokeTotal.value / activeDayCount.value).toFixed(1)
+})
+
+const peakDaySmoke = computed(() => {
+	let max = 0
+	monthSummaryMap.value.forEach(item => {
+		if (item.smokeCount > max) max = item.smokeCount
+	})
+	return max
+})
+
+const selectedDayLogs = computed(() => {
+	return monthLogs.value
+		.filter(item => resolveLogDate(item) === selectedDate.value)
+		.sort((a, b) => getLogTimestamp(b) - getLogTimestamp(a))
+})
+
+const selectedSmokeCount = computed(() => {
+	return selectedDayLogs.value.reduce((total, item) => total + (Number(item.num) || 0), 0)
+})
+
+const selectedDateLabel = computed(() => {
+	const date = parseDate(selectedDate.value)
+	if (!date) return selectedDate.value
+	return `${date.getMonth() + 1}月${date.getDate()}日 周${weekdayNames[date.getDay()]}`
+})
+
+const selectedDaySummary = computed(() => {
+	if (selectedDayLogs.value.length === 0) return '无记录'
+	return `${selectedDayLogs.value.length} 条记录 · 本月已记录 ${activeDayCount.value} 天`
+})
+
 async function fetchMonthLogs() {
 	const start = formatDate(startOfMonth(currentMonth.value))
 	const end = formatDate(endOfMonth(currentMonth.value))
@@ -156,7 +218,7 @@ async function fetchMonthLogs() {
 		const res = await api.getLogs({
 			page: 1,
 			page_size: 200,
-			type: 'all',
+			type: 'smoke',
 			start,
 			end
 		})
@@ -185,6 +247,10 @@ async function changeMonth(offset) {
 	await fetchMonthLogs()
 }
 
+async function goToday() {
+	await initPage(todayText)
+}
+
 async function selectDay(item) {
 	if (item.isFuture) return
 	if (!item.isCurrentMonth) {
@@ -205,12 +271,8 @@ function buildDailySummaryMap(logs) {
 	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 {
+		const current = map.get(dateKey) || { smokeCount: 0 }
 		current.smokeCount += Number(log.num) || 0
-		}
 		map.set(dateKey, current)
 	})
 	return map
@@ -229,21 +291,6 @@ function resolveLogDate(log) {
 	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`)
@@ -283,96 +330,106 @@ function addDays(date, offset) {
 	result.setDate(result.getDate() + offset)
 	return result
 }
+
+function getLogTimestamp(log) {
+	if (log?.smoke_at) return new Date(log.smoke_at).getTime() || 0
+	if (typeof log?.smoke_time === 'string') return new Date(log.smoke_time).getTime() || 0
+	if (log?.createtime) {
+		return typeof log.createtime === 'number'
+			? log.createtime * 1000
+			: new Date(log.createtime).getTime() || 0
+	}
+	return 0
+}
+
+function formatLogTime(log) {
+	const timestamp = getLogTimestamp(log)
+	if (!timestamp) return '--:--'
+	const date = new Date(timestamp)
+	const hour = String(date.getHours()).padStart(2, '0')
+	const minute = String(date.getMinutes()).padStart(2, '0')
+	return `${hour}:${minute}`
+}
 </script>
 
 <style scoped>
 .page {
 	min-height: 100vh;
-	background: linear-gradient(180deg, #F6F8F6 0%, #EFF4F1 52%, #E9F0EC 100%);
-	padding: 20rpx;
+	background: linear-gradient(180deg, #E6F7F2 0%, #F4FBF8 42%, #FBFFFD 100%);
+	padding: 28rpx 28rpx 0;
 	box-sizing: border-box;
 }
 
-.page-header {
-	margin-bottom: 18rpx;
+.page-head {
+	display: flex;
+	align-items: flex-end;
+	justify-content: space-between;
+	gap: 20rpx;
+	margin-bottom: 24rpx;
 }
 
-.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-title {
+	display: block;
+	font-size: 44rpx;
+	font-weight: 800;
+	line-height: 1.15;
+	color: #0D3D2E;
 }
 
 .page-subtitle {
 	display: block;
-	margin-top: 2rpx;
-	font-size: 24rpx;
+	margin-top: 8rpx;
+	font-size: 23rpx;
 	line-height: 1.5;
-	color: #52806E;
+	color: #5D8F7C;
+}
+
+.today-pill {
+	flex-shrink: 0;
+	padding: 12rpx 20rpx;
+	border-radius: 999rpx;
+	background: rgba(255, 255, 255, 0.82);
+	border: 1.5rpx solid rgba(52, 200, 160, 0.16);
+	color: #158461;
+	font-size: 23rpx;
+	font-weight: 700;
+	box-shadow: 0 6rpx 18rpx rgba(52, 200, 160, 0.08);
 }
 
 .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;
+	background: rgba(255, 255, 255, 0.9);
+	border-radius: 24rpx;
+	padding: 24rpx;
+	margin-bottom: 20rpx;
+	border: 1.5rpx solid rgba(52, 200, 160, 0.14);
+	box-shadow: 0 6rpx 22rpx rgba(52, 200, 160, 0.08);
+	box-sizing: border-box;
 }
 
 .month-bar {
-	position: relative;
-	z-index: 1;
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
 	gap: 16rpx;
-	margin-bottom: 16rpx;
+	margin-bottom: 20rpx;
 }
 
 .month-arrow {
-	width: 64rpx;
-	height: 64rpx;
+	width: 56rpx;
+	height: 56rpx;
 	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;
+	background: rgba(52, 200, 160, 0.08);
+	font-size: 36rpx;
+	color: #0D3D2E;
+	font-weight: 700;
+	flex-shrink: 0;
 }
 
 .month-arrow-disabled {
-	opacity: 0.4;
-	box-shadow: none;
+	opacity: 0.3;
 }
 
 .month-copy {
@@ -382,76 +439,71 @@ function addDays(date, offset) {
 
 .month-title {
 	display: block;
-	font-size: 30rpx;
-	font-weight: 800;
-	color: #111827;
+	font-size: 32rpx;
+	font-weight: 700;
+	color: #0D3D2E;
 }
 
 .month-subtitle {
 	display: block;
-	margin-top: 6rpx;
+	margin-top: 4rpx;
 	font-size: 22rpx;
-	color: #6b7280;
+	color: #7AA898;
 }
 
 .summary-row {
-	position: relative;
-	z-index: 1;
-	display: grid;
-	grid-template-columns: repeat(3, minmax(0, 1fr));
+	display: flex;
 	gap: 12rpx;
-	margin-bottom: 14rpx;
+	margin-bottom: 20rpx;
 }
 
 .summary-chip {
+	flex: 1;
 	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);
+	border-radius: 16rpx;
+	background: rgba(52, 200, 160, 0.1);
+	border: 1.5rpx solid rgba(52, 200, 160, 0.12);
 }
 
 .summary-chip-soft {
-	background: linear-gradient(180deg, #fbfcfc 0%, #f7faf8 100%);
+	background: rgba(59, 130, 246, 0.06);
+	border-color: rgba(59, 130, 246, 0.1);
 }
 
 .summary-chip-label {
 	display: block;
 	font-size: 20rpx;
-	color: #7aA898;
+	color: #6B9B8A;
 }
 
 .summary-chip-value-row {
 	display: flex;
 	align-items: baseline;
-	gap: 6rpx;
+	gap: 4rpx;
 	margin-top: 8rpx;
 }
 
 .summary-chip-value {
-	font-size: 34rpx;
+	font-size: 36rpx;
 	font-weight: 800;
 	line-height: 1;
-	color: #111827;
+	color: #0D3D2E;
 }
 
 .summary-chip-unit {
 	font-size: 20rpx;
-	color: #6b7280;
+	color: #7AA898;
 }
 
 .calendar-legend {
-	position: relative;
-	z-index: 1;
 	display: flex;
 	align-items: center;
 	flex-wrap: wrap;
-	gap: 14rpx;
-	margin-bottom: 14rpx;
-	padding: 12rpx 14rpx;
+	gap: 16rpx;
+	margin-bottom: 20rpx;
+	padding: 14rpx 16rpx;
 	border-radius: 16rpx;
-	background: linear-gradient(180deg, #fafcfb 0%, #f5f8f6 100%);
-	border: 1rpx solid rgba(15, 23, 42, 0.05);
+	background: rgba(52, 200, 160, 0.06);
 }
 
 .legend-item {
@@ -467,124 +519,239 @@ function addDays(date, offset) {
 }
 
 .legend-dot-smoke {
-	background: #1a8c62;
+	background: #10B981;
 }
 
-.legend-dot-resisted {
-	background: #a7d9c6;
+.legend-dot-selected {
+	background: #F59E0B;
 }
 
 .legend-text {
-	font-size: 21rpx;
-	color: #4b5563;
+	font-size: 22rpx;
+	color: #52806E;
 }
 
 .legend-tip {
 	margin-left: auto;
 	font-size: 20rpx;
-	color: #9ca3af;
+	color: #9ABDAE;
 }
 
 .weekday-row {
-	position: relative;
-	z-index: 1;
 	display: grid;
-	grid-template-columns: repeat(7, minmax(0, 1fr));
-	margin-bottom: 12rpx;
-	padding: 0 4rpx;
+	grid-template-columns: repeat(7, 1fr);
+	margin-bottom: 8rpx;
 }
 
 .weekday-item {
 	text-align: center;
 	font-size: 22rpx;
 	font-weight: 600;
-	color: #7aA898;
+	color: #7AA898;
 }
 
 .calendar-grid {
-	position: relative;
-	z-index: 1;
 	display: grid;
-	grid-template-columns: repeat(7, minmax(0, 1fr));
-	gap: 10rpx;
+	grid-template-columns: repeat(7, 1fr);
+	gap: 8rpx;
 }
 
 .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);
+	aspect-ratio: 1 / 1.15;
+	padding: 10rpx 6rpx 8rpx;
+	border-radius: 16rpx;
+	background: rgba(52, 200, 160, 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);
+	justify-content: space-between;
+	box-sizing: border-box;
+	border: 1.5rpx solid transparent;
 }
 
 .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);
+	background: rgba(255, 251, 235, 0.9);
+	border-color: rgba(245, 158, 11, 0.55);
 }
 
 .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);
+	background: rgba(52, 200, 160, 0.12);
 }
 
 .calendar-cell-muted {
-	opacity: 0.42;
-	box-shadow: none;
+	opacity: 0.35;
 }
 
 .calendar-cell-disabled {
-	opacity: 0.3;
-	box-shadow: none;
+	opacity: 0.25;
 }
 
 .calendar-cell-top {
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
-	gap: 8rpx;
 }
 
 .calendar-day {
-	font-size: 24rpx;
+	font-size: 22rpx;
 	font-weight: 700;
-	color: #123329;
+	color: #0D3D2E;
 }
 
 .calendar-today-dot {
-	width: 12rpx;
-	height: 12rpx;
+	width: 10rpx;
+	height: 10rpx;
 	border-radius: 50%;
-	color: #1a8c62;
-	background: #1a8c62;
+	background: #10B981;
 }
 
 .calendar-count-wrap {
 	display: flex;
 	align-items: baseline;
-	gap: 4rpx;
+	gap: 2rpx;
 }
 
 .calendar-count-value {
-	font-size: 34rpx;
+	font-size: 28rpx;
 	line-height: 1;
 	font-weight: 800;
-	color: #14936d;
+	color: #10B981;
 }
 
 .calendar-count-unit {
-	font-size: 18rpx;
+	font-size: 16rpx;
 	font-weight: 600;
-	color: #6b7280;
+	color: #7AA898;
+}
+
+.detail-card {
+	background: rgba(255, 255, 255, 0.9);
+	border-radius: 24rpx;
+	padding: 24rpx;
+	border: 1.5rpx solid rgba(52, 200, 160, 0.14);
+	box-shadow: 0 6rpx 22rpx rgba(52, 200, 160, 0.08);
+}
+
+.detail-head {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 20rpx;
+	margin-bottom: 20rpx;
+}
+
+.detail-title {
+	display: block;
+	font-size: 30rpx;
+	font-weight: 800;
+	color: #0D3D2E;
+}
+
+.detail-subtitle {
+	display: block;
+	margin-top: 6rpx;
+	font-size: 22rpx;
+	color: #6B9B8A;
+}
+
+.detail-total {
+	flex-shrink: 0;
+	min-width: 112rpx;
+	padding: 12rpx 16rpx;
+	border-radius: 18rpx;
+	background: rgba(52, 200, 160, 0.1);
+	text-align: center;
+}
+
+.detail-total-value {
+	font-size: 34rpx;
+	font-weight: 800;
+	line-height: 1;
+	color: #0D3D2E;
+}
+
+.detail-total-unit {
+	margin-left: 4rpx;
+	font-size: 20rpx;
+	color: #6B9B8A;
+}
+
+.log-list {
+	display: flex;
+	flex-direction: column;
+	gap: 12rpx;
+}
+
+.log-item {
+	display: flex;
+	gap: 16rpx;
+	align-items: flex-start;
+	padding: 16rpx;
+	border-radius: 18rpx;
+	background: rgba(52, 200, 160, 0.05);
+}
+
+.log-time {
+	width: 78rpx;
+	flex-shrink: 0;
+	font-size: 24rpx;
+	font-weight: 800;
+	color: #158461;
+}
+
+.log-main {
+	flex: 1;
+	min-width: 0;
+}
+
+.log-line {
+	display: flex;
+	align-items: center;
+	gap: 10rpx;
+	flex-wrap: wrap;
+}
+
+.log-count {
+	font-size: 26rpx;
+	font-weight: 800;
+	color: #0D3D2E;
+}
+
+.log-tag {
+	padding: 4rpx 10rpx;
+	border-radius: 999rpx;
+	background: rgba(59, 130, 246, 0.08);
+	color: #2563EB;
+	font-size: 20rpx;
+	font-weight: 700;
+}
+
+.log-remark {
+	display: block;
+	margin-top: 8rpx;
+	font-size: 23rpx;
+	line-height: 1.5;
+	color: #6B9B8A;
+	word-break: break-all;
+}
+
+.empty-detail {
+	padding: 28rpx;
+	border-radius: 20rpx;
+	background: rgba(52, 200, 160, 0.05);
+}
+
+.empty-title {
+	display: block;
+	font-size: 25rpx;
+	font-weight: 800;
+	color: #0D3D2E;
+	margin-bottom: 8rpx;
+}
+
+.empty-text {
+	font-size: 23rpx;
+	line-height: 1.5;
+	color: #6B9B8A;
 }
 
 .bottom-safe {

src/pages/stats/index.vue

@@ -3,7 +3,7 @@
 		<view class="status-bar" :style="{ height: navBarHeight + 'px' }"></view>
 
 		<!-- Tab 切换 -->
-		<view class="segment-wrap">
+		<view class="segment-wrap" :style="{ top: navBarHeight + 'px' }">
 			<view class="segment">
 				<view
 					v-for="tab in tabs"
@@ -55,7 +55,13 @@
 				</view>
 			</view>
 			<view v-else class="empty-block">
-				<text class="empty-text">暂无趋势数据</text>
+				<view class="empty-visual empty-visual-trend">
+					<text class="empty-visual-glyph">7</text>
+				</view>
+				<view class="empty-copy">
+					<text class="empty-title">暂无趋势数据</text>
+					<text class="empty-text">完成今天的记录后，这里会开始展示最近 7 天的波动节奏。</text>
+				</view>
 			</view>
 		</view>
 
@@ -80,7 +86,13 @@
 				</view>
 			</view>
 			<view v-else class="empty-block empty-block-dashed">
-				<text class="empty-text">完善基础信息后解锁节省金额</text>
+				<view class="empty-visual empty-visual-money">
+					<text class="empty-visual-glyph">¥</text>
+				</view>
+				<view class="empty-copy">
+					<text class="empty-title">节省金额待解锁</text>
+					<text class="empty-text">完善基础信息后，系统会自动换算每少抽一支烟省下的金额。</text>
+				</view>
 			</view>
 
 			<view v-if="moneyAvailable" class="metric-chips">
@@ -118,7 +130,13 @@
 				</view>
 			</view>
 			<view v-else class="empty-block empty-block-dashed">
-				<text class="empty-text">暂无健康数据，记录一次后解锁</text>
+				<view class="empty-visual empty-visual-health">
+					<text class="empty-visual-glyph">肺</text>
+				</view>
+				<view class="empty-copy">
+					<text class="empty-title">暂无健康数据</text>
+					<text class="empty-text">完成一次记录后，这里会开始生成无烟时长和恢复节点。</text>
+				</view>
 			</view>
 			<view v-if="healthItems.length > 0" class="health-list">
 				<view v-for="(item, index) in healthItems" :key="index" class="health-item">
@@ -147,10 +165,10 @@
 				</view>
 			</view>
 			<view class="mini-card">
-				<text class="mini-label">已拒绝</text>
+				<text class="mini-label">累计少抽</text>
 				<view class="mini-value-row">
-					<text class="mini-value">{{ resistedTotal }}</text>
-					<text class="mini-unit">次</text>
+					<text class="mini-value">{{ reducedTotal }}</text>
+					<text class="mini-unit">支</text>
 				</view>
 			</view>
 		</view>
@@ -208,13 +226,6 @@ const insightText = computed(() => {
 	return `较上期上升 ${abs}%，留意高峰时段，尝试延迟第一支。`
 })
 
-const trendRangeText = computed(() => {
-	const start = statsData.value?.start
-	const end = statsData.value?.end
-	if (!start || !end) return ''
-	return formatRangeText(start, end)
-})
-
 const weeklyTrendRangeText = computed(() => {
 	const start = weeklyStatsData.value?.start
 	const end = weeklyStatsData.value?.end
@@ -222,33 +233,6 @@ const weeklyTrendRangeText = computed(() => {
 	return `${formatRangeText(start, end)} · 固定展示最近 7 天`
 })
 
-const statusText = computed(() => {
-	if (changePercent.value === null) return '暂无对比'
-	const sign = changePercent.value > 0 ? '+' : ''
-	return `较上期 ${sign}${changePercent.value}%`
-})
-
-const statusChipClass = computed(() => {
-	if (changePercent.value === null) return 'chip-neutral'
-	return changePercent.value <= 0 ? 'chip-good' : 'chip-warn'
-})
-
-const statusArrow = computed(() => {
-	if (changePercent.value === null) return '→'
-	return changePercent.value <= 0 ? '↓' : '↑'
-})
-
-const statusIconClass = computed(() => {
-	if (changePercent.value === null) return 'arrow-neutral'
-	return changePercent.value <= 0 ? 'arrow-good' : 'arrow-warn'
-})
-
-const averageCount = computed(() => {
-	const avg = statsData.value?.daily_average
-	if (avg === undefined || avg === null) return 0
-	return Number(avg) || 0
-})
-
 const weeklyAverageCount = computed(() => {
 	const avg = weeklyStatsData.value?.daily_average
 	if (avg === undefined || avg === null) return 0
@@ -283,6 +267,12 @@ const weeklyTrendItems = computed(() => {
 	})
 })
 
+function safeNumber(value) {
+	if (value === undefined || value === null || value === '') return 0
+	const num = Number(value)
+	return Number.isNaN(num) ? 0 : num
+}
+
 function calDotClass(count) {
 	if (count === 0) return 'cal-dot-zero'
 	if (count <= 3) return 'cal-dot-low'
@@ -290,10 +280,15 @@ function calDotClass(count) {
 	return 'cal-dot-high'
 }
 
-const savedMoneyText = computed(() => {
+const savedMoneyCent = computed(() => {
 	const money = statsData.value?.money
-	if (!money || !money.available) return '--'
-	return `¥${(money.saved_cent / 100).toFixed(2)}`
+	if (!money || !money.available) return 0
+	return safeNumber(money.saved_cent)
+})
+
+const savedMoneyText = computed(() => {
+	if (!moneyAvailable.value) return '--'
+	return `¥${(savedMoneyCent.value / 100).toFixed(2)}`
 })
 
 const moneyAvailable = computed(() => !!statsData.value?.money?.available)
@@ -301,13 +296,13 @@ const moneyAvailable = computed(() => !!statsData.value?.money?.available)
 const moneyExpectedTotal = computed(() => {
 	const money = statsData.value?.money
 	if (!money || !money.available) return 0
-	return Number(money.expected_total) || 0
+	return safeNumber(money.expected_total)
 })
 
 const moneyActualTotal = computed(() => {
 	const money = statsData.value?.money
 	if (!money || !money.available) return 0
-	return Number(money.actual_total) || 0
+	return safeNumber(money.actual_total)
 })
 
 const moneySubtitle = computed(() => {
@@ -318,16 +313,17 @@ const moneySubtitle = computed(() => {
 const moneyTargetCent = computed(() => {
 	const money = statsData.value?.money
 	if (!money || !money.available) return 0
-	const { expected_total, pack_price_cent, cigs_per_pack } = money
-	if (!expected_total || !pack_price_cent || !cigs_per_pack) return 0
-	return Math.round((expected_total / cigs_per_pack) * pack_price_cent)
+	const expectedTotal = safeNumber(money.expected_total)
+	const packPriceCent = safeNumber(money.pack_price_cent)
+	const cigsPerPack = safeNumber(money.cigs_per_pack)
+	if (expectedTotal <= 0 || packPriceCent <= 0 || cigsPerPack <= 0) return 0
+	return Math.round((expectedTotal / cigsPerPack) * packPriceCent)
 })
 
 const moneyPercent = computed(() => {
-	const money = statsData.value?.money
 	const target = moneyTargetCent.value
-	if (!money || !money.available || target <= 0) return 0
-	const percent = Math.round((money.saved_cent / target) * 100)
+	if (!moneyAvailable.value || target <= 0) return 0
+	const percent = Math.round((savedMoneyCent.value / target) * 100)
 	return Math.min(Math.max(percent, 0), 100)
 })
 
@@ -401,7 +397,7 @@ const healthItems = computed(() => {
 })
 
 const streakDays = computed(() => statsData.value?.streak_days ?? 0)
-const resistedTotal = computed(() => statsData.value?.resisted_total ?? 0)
+const reducedTotal = computed(() => Math.max(moneyExpectedTotal.value - moneyActualTotal.value, 0))
 
 function formatRangeText(start, end) {
 	const startParts = start.split('-')
@@ -475,7 +471,8 @@ onShareAppMessage(() => {
 /* ── 页面 ── */
 .page {
 	min-height: 100vh;
-	background: linear-gradient(180deg, #E6F7F2 0%, #F0FBF7 40%, #FAFFFE 100%);
+	background:
+		linear-gradient(180deg, #F6F8F6 0%, #EFF4F1 52%, #E9F0EC 100%);
 	padding: 0 28rpx 0;
 	box-sizing: border-box;
 }
@@ -486,10 +483,22 @@ onShareAppMessage(() => {
 
 /* ── Tab 切换 ── */
 .segment-wrap {
-	padding: 8rpx 0 20rpx;
+	position: fixed;
+	left: 0;
+	right: 0;
+	height: 98rpx;
+	padding: 0 28rpx;
+	background: rgba(246, 248, 246, 0.9);
+	box-sizing: border-box;
+	flex-shrink: 0;
+	z-index: 60;
+	-webkit-backdrop-filter: blur(14px);
+	backdrop-filter: blur(14px);
 }
 
 .segment {
+	position: relative;
+	z-index: 50;
 	display: flex;
 	background: rgba(255, 255, 255, 0.82);
 	padding: 6rpx;
@@ -497,6 +506,18 @@ onShareAppMessage(() => {
 	gap: 6rpx;
 	border: 1.5rpx solid rgba(52, 200, 160, 0.14);
 	box-shadow: 0 4rpx 16rpx rgba(52, 200, 160, 0.07);
+	-webkit-backdrop-filter: blur(12px);
+	backdrop-filter: blur(12px);
+}
+
+.segment::before {
+	content: none;
+	position: absolute;
+	inset: -12rpx -8rpx -10rpx;
+	border-radius: 34rpx;
+	background: linear-gradient(180deg, rgba(230, 247, 242, 0.96) 0%, rgba(240, 251, 247, 0.88) 72%, rgba(240, 251, 247, 0) 100%);
+	z-index: -1;
+	pointer-events: none;
 }
 
 .segment-item {
@@ -515,6 +536,10 @@ onShareAppMessage(() => {
 	box-shadow: 0 4rpx 12rpx rgba(52, 200, 160, 0.12);
 }
 
+.insight-card {
+	margin-top: 112rpx;
+}
+
 /* ── 洞察卡片 ── */
 .insight-card {
 	display: flex;
@@ -618,45 +643,6 @@ onShareAppMessage(() => {
 	display: block;
 }
 
-/* ── 状态标签 ── */
-.status-chip {
-	display: flex;
-	align-items: center;
-	gap: 6rpx;
-	padding: 6rpx 14rpx;
-	border-radius: 999rpx;
-	font-size: 21rpx;
-	font-weight: 600;
-}
-
-.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;
-}
-
-.status-arrow {
-	font-size: 18rpx;
-	font-weight: 700;
-}
-
-.arrow-good { color: #1a8c62; }
-.arrow-warn { color: #D97706; }
-.arrow-neutral { color: #7aA898; }
-
-.status-text {
-	font-size: 21rpx;
-}
-
 /* ── 日均 ── */
 .avg-row {
 	display: flex;
@@ -759,12 +745,12 @@ onShareAppMessage(() => {
 
 /* ── 空状态 ── */
 .empty-block {
-	padding: 32rpx;
-	border-radius: 16rpx;
-	background: rgba(52, 200, 160, 0.04);
+	padding: 28rpx 24rpx;
+	border-radius: 20rpx;
+	background: rgba(52, 200, 160, 0.05);
 	display: flex;
 	align-items: center;
-	justify-content: center;
+	gap: 18rpx;
 }
 
 .empty-block-dashed {
@@ -772,8 +758,51 @@ onShareAppMessage(() => {
 	background: transparent;
 }
 
+.empty-visual {
+	width: 78rpx;
+	height: 78rpx;
+	border-radius: 24rpx;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-shrink: 0;
+	box-shadow: inset 0 1rpx 0 rgba(255, 255, 255, 0.8);
+}
+
+.empty-visual-trend {
+	background: linear-gradient(180deg, rgba(52, 200, 160, 0.16) 0%, rgba(52, 200, 160, 0.08) 100%);
+}
+
+.empty-visual-money {
+	background: linear-gradient(180deg, rgba(251, 191, 36, 0.18) 0%, rgba(245, 158, 11, 0.08) 100%);
+}
+
+.empty-visual-health {
+	background: linear-gradient(180deg, rgba(52, 200, 160, 0.18) 0%, rgba(59, 130, 246, 0.08) 100%);
+}
+
+.empty-visual-glyph {
+	font-size: 28rpx;
+	font-weight: 800;
+	color: #0D3D2E;
+}
+
+.empty-copy {
+	flex: 1;
+	min-width: 0;
+}
+
+.empty-title {
+	display: block;
+	font-size: 24rpx;
+	font-weight: 700;
+	color: #0D3D2E;
+	margin-bottom: 6rpx;
+}
+
 .empty-text {
 	font-size: 24rpx;
+	line-height: 1.6;
 	color: #7aA898;
 }
 

src/pages/supervisor/bind.vue

@@ -0,0 +1,121 @@
+<template>
+	<view class="page">
+		<view class="card">
+			<text class="title">绑定监督</text>
+			<text class="desc">输入朋友发给你的邀请口令，即可查看对方的戒烟概览</text>
+
+			<input class="input" v-model="token" placeholder="请输入邀请口令" />
+
+			<button class="btn" :disabled="loading || !token" @tap="doBind">
+				{{ loading ? '绑定中...' : '确认绑定' }}
+			</button>
+
+			<button class="btn btn-ghost" @tap="gotoSupervisorHome">返回监督人页面</button>
+		</view>
+	</view>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+import { useLogin } from '@/hooks/useLogin'
+import { bindSupervisorInvite } from '@/api/smoke'
+
+const { waitForLogin } = useLogin()
+
+const token = ref('')
+const loading = ref(false)
+
+function gotoSupervisorHome() {
+	uni.navigateTo({ url: '/pages/supervisor/index' })
+}
+
+async function doBind() {
+	if (loading.value) return
+	loading.value = true
+	try {
+		await bindSupervisorInvite(token.value.trim())
+		uni.showToast({ title: '绑定成功', icon: 'success' })
+		setTimeout(() => {
+			uni.redirectTo({ url: '/pages/supervisor/index' })
+		}, 600)
+	} catch (e) {
+		console.error('bind error:', e)
+		uni.showToast({ title: e?.message || '绑定失败', icon: 'none' })
+	} finally {
+		loading.value = false
+	}
+}
+
+onLoad(async (query) => {
+	await waitForLogin()
+	if (query?.token) {
+		token.value = String(query.token)
+	}
+})
+</script>
+
+<style scoped>
+.page {
+	min-height: 100vh;
+	padding: 40rpx 28rpx;
+	box-sizing: border-box;
+	background: linear-gradient(180deg, #eef7f3 0%, #fbfdff 100%);
+}
+
+.card {
+	background: rgba(255, 255, 255, 0.94);
+	border-radius: 26rpx;
+	border: 1rpx solid rgba(15, 23, 42, 0.06);
+	padding: 28rpx 24rpx;
+	box-shadow: 0 12rpx 28rpx rgba(15, 23, 42, 0.06);
+}
+
+.title {
+	display: block;
+	font-size: 38rpx;
+	font-weight: 900;
+	color: #0f172a;
+}
+
+.desc {
+	display: block;
+	margin-top: 12rpx;
+	font-size: 24rpx;
+	line-height: 1.6;
+	color: #64748b;
+}
+
+.input {
+	margin-top: 22rpx;
+	height: 84rpx;
+	padding: 0 20rpx;
+	border-radius: 18rpx;
+	background: rgba(241, 245, 249, 0.9);
+	border: 1rpx solid rgba(15, 23, 42, 0.08);
+	font-size: 28rpx;
+	color: #0f172a;
+}
+
+.btn {
+	margin-top: 18rpx;
+	height: 78rpx;
+	line-height: 78rpx;
+	border-radius: 18rpx;
+	background: linear-gradient(180deg, #1aa37a 0%, #0f766e 100%);
+	color: #ffffff;
+	font-size: 26rpx;
+	font-weight: 700;
+}
+
+.btn[disabled] {
+	opacity: 0.6;
+}
+
+.btn-ghost {
+	background: #ffffff;
+	color: #0f766e;
+	border: 1rpx solid rgba(15, 118, 110, 0.25);
+}
+</style>
+

src/pages/supervisor/index.vue

@@ -0,0 +1,984 @@
+<template>
+	<view class="page">
+		<view class="bg-orb bg-orb-main"></view>
+		<view class="bg-orb bg-orb-soft"></view>
+
+		<view class="header">
+			<view class="header-copy">
+				<text class="eyebrow">ACCOUNTABILITY</text>
+				<text class="title">监督人机制</text>
+				<text class="subtitle">邀请朋友监督你的戒烟旅程，也可以成为别人的坚持搭子。</text>
+			</view>
+			<view class="hero-panel">
+				<view class="hero-stat">
+					<text class="hero-stat-value">{{ supervisorItems.length }}/3</text>
+					<text class="hero-stat-label">监督我的人</text>
+				</view>
+				<view class="hero-divider"></view>
+				<view class="hero-stat">
+					<text class="hero-stat-value">{{ overviewItems.length }}</text>
+					<text class="hero-stat-label">我监督的人</text>
+				</view>
+				<view class="hero-divider"></view>
+				<view class="hero-stat">
+					<text class="hero-stat-value">{{ reminderEnabled ? 'ON' : 'OFF' }}</text>
+					<text class="hero-stat-label">提醒状态</text>
+				</view>
+			</view>
+		</view>
+
+		<view class="card">
+			<view class="card-head">
+				<view class="card-title-wrap">
+					<view class="card-icon">🤝</view>
+					<text class="card-title">邀请监督人</text>
+				</view>
+				<text class="card-meta">已绑定 {{ supervisorItems.length }}/3</text>
+			</view>
+
+			<view v-if="inviteToken" class="invite-box">
+				<text class="invite-label">邀请口令</text>
+				<text class="invite-token">{{ inviteToken }}</text>
+				<text class="invite-hint">对方打开小程序后，进入“绑定监督”页面输入口令即可</text>
+
+				<view class="invite-actions">
+					<button class="btn btn-ghost" @tap="copyInviteToken">复制口令</button>
+					<button class="btn" @tap="copyInvitePath">复制链接</button>
+				</view>
+
+				<text v-if="inviteExpireAt" class="invite-expire">过期时间：{{ formatDateTime(inviteExpireAt) }}</text>
+			</view>
+
+			<view v-else class="invite-empty">
+				<text class="invite-empty-text">
+					{{ supervisorItems.length >= 3 ? '监督人已满（最多 3 人），你可以先解除一个再邀请' : '生成一个邀请口令，发给你信得过的人' }}
+				</text>
+				<button class="btn" :disabled="inviteLoading || supervisorItems.length >= 3" @tap="generateInvite">
+					{{ supervisorItems.length >= 3 ? '已达上限' : (inviteLoading ? '生成中...' : '生成邀请口令') }}
+				</button>
+			</view>
+		</view>
+
+		<view class="card">
+			<view class="card-head">
+				<view class="card-title-wrap">
+					<view class="card-icon card-icon-blue">👀</view>
+					<text class="card-title">我监督的人</text>
+				</view>
+				<text class="card-meta">{{ overviewItems.length }} 人</text>
+			</view>
+
+			<view v-if="overviewItems.length === 0" class="empty">
+				<text class="empty-icon">🫶</text>
+				<text class="empty-text">还没有绑定监督关系</text>
+				<text class="empty-hint">收到口令后可去“绑定监督”页面完成绑定</text>
+				<button class="btn btn-ghost" @tap="gotoBindPage">去绑定监督</button>
+			</view>
+
+			<view v-else class="list">
+				<view v-for="item in overviewItems" :key="item.owner?.user_id" class="row">
+					<image class="avatar" :src="item.owner?.avatar_url || defaultAvatar" mode="aspectFill"></image>
+					<view class="row-main">
+						<text class="name">{{ item.owner?.nickname || `用户 ${item.owner?.user_id}` }}</text>
+						<view class="meta">
+							<text class="pill">连续 {{ item.home?.summary?.current_streak_days || 0 }} 天</text>
+							<text class="pill">HP {{ item.home?.summary?.hp_current ?? '--' }}</text>
+							<text class="pill" :class="hpDeltaClass(item.home?.summary?.hp_change_today)">
+								{{ hpDeltaText(item.home?.summary?.hp_change_today) }}
+							</text>
+						</view>
+						<text class="status">今日：{{ statusText(item.home?.daily_status?.status) }}</text>
+						<view class="row-actions">
+							<button class="mini-btn" @tap.stop="confirmRevoke(item)">解除监督</button>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+
+		<view class="card">
+			<view class="card-head">
+				<view class="card-title-wrap">
+					<view class="card-icon card-icon-orange">🛡️</view>
+					<text class="card-title">监督我的人</text>
+				</view>
+				<text class="card-meta">{{ supervisorItems.length }} 人</text>
+			</view>
+			<view v-if="supervisorItems.length === 0" class="empty">
+				<text class="empty-icon">🌱</text>
+				<text class="empty-text">还没有人监督你</text>
+				<text class="empty-hint">你可以先生成邀请口令发送给朋友</text>
+			</view>
+			<view v-else class="list">
+				<view v-for="u in supervisorItems" :key="u.user_id" class="row">
+					<image class="avatar" :src="u.avatar_url || defaultAvatar" mode="aspectFill"></image>
+					<view class="row-main">
+						<text class="name">{{ u.nickname || `用户 ${u.user_id}` }}</text>
+						<text class="status">可查看你的戒烟概览</text>
+					</view>
+				</view>
+			</view>
+		</view>
+
+		<view class="card">
+			<view class="card-head">
+				<view class="card-title-wrap">
+					<view class="card-icon card-icon-purple">🔔</view>
+					<text class="card-title">提醒设置</text>
+				</view>
+				<text class="card-meta">默认关闭</text>
+			</view>
+
+			<view class="settings">
+				<view class="setting-row">
+					<text class="setting-label">启用提醒</text>
+					<switch :checked="reminderEnabled" @change="onToggleReminder" />
+				</view>
+
+				<view class="setting-row">
+					<text class="setting-label">提醒时间</text>
+					<view class="setting-control">
+						<button class="mini-btn mini-btn-neutral" :disabled="!reminderEnabled" @tap="pickNotifyTime">
+							{{ reminderNotifyTime || '21:00' }}
+						</button>
+					</view>
+				</view>
+
+				<view class="setting-row">
+					<text class="setting-label">每日上限</text>
+					<view class="setting-control">
+						<input
+							class="num-input"
+							type="number"
+							:value="String(reminderMaxPerDay)"
+							:disabled="!reminderEnabled"
+							placeholder="1"
+							@input="onMaxPerDayInput"
+						/>
+						<text class="setting-hint">每个监督人每天最多 N 次（建议 1）</text>
+					</view>
+				</view>
+
+				<view class="setting-actions">
+					<button class="btn btn-ghost" :disabled="savingSettings" @tap="reloadReminderSettings">重载</button>
+					<button class="btn" :disabled="savingSettings" @tap="saveReminderSettings">
+						{{ savingSettings ? '保存中...' : '保存设置' }}
+					</button>
+				</view>
+
+				<text class="settings-note">提示：当前版本后端仅记录提醒日志（stub），尚未接入真实订阅消息发送。</text>
+			</view>
+		</view>
+
+		<view class="card">
+			<view class="card-head">
+				<view class="card-title-wrap">
+					<view class="card-icon card-icon-gray">⚡</view>
+					<text class="card-title">提醒测试（监督人）</text>
+				</view>
+				<text class="card-meta">仅写日志</text>
+			</view>
+			<view class="settings">
+				<text class="settings-note">你作为监督人时，可手动触发一次提醒流程（用于联调频控与条件判断）。</text>
+				<button class="btn" :disabled="runningReminders" @tap="runRemindersNow">
+					{{ runningReminders ? '触发中...' : '手动触发提醒' }}
+				</button>
+				<text v-if="lastRunText" class="run-result">{{ lastRunText }}</text>
+			</view>
+		</view>
+
+		<view class="footer">
+			<button class="btn btn-ghost" :disabled="loading" @tap="refreshAll">刷新</button>
+		</view>
+	</view>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { onShow } from '@dcloudio/uni-app'
+import { useLogin } from '@/hooks/useLogin'
+import { useUserStore } from '@/stores/user'
+import {
+	createSupervisorInvite,
+	getSupervisorOverview,
+	getSupervisorStatus,
+	revokeSupervisorBinding,
+	getSupervisorReminderSettings,
+	updateSupervisorReminderSettings,
+	runSupervisorReminders
+} from '@/api/smoke'
+
+const { waitForLogin } = useLogin()
+const userStore = useUserStore()
+
+const loading = ref(false)
+const inviteLoading = ref(false)
+const inviteToken = ref('')
+const inviteExpireAt = ref('')
+
+const overviewItems = ref([])
+const supervisorItems = ref([])
+
+const defaultAvatar = 'https://linghu-wmr.oss-cn-beijing.aliyuncs.com/smt/avatar.png'
+
+const savingSettings = ref(false)
+const reminderEnabled = ref(false)
+const reminderNotifyTime = ref('21:00')
+const reminderMaxPerDay = ref(1)
+
+const runningReminders = ref(false)
+const lastRunText = ref('')
+
+function formatDateTime(value) {
+	if (!value) return '--'
+	const d = new Date(value)
+	if (Number.isNaN(d.getTime())) return value
+	const y = d.getFullYear()
+	const m = String(d.getMonth() + 1).padStart(2, '0')
+	const day = String(d.getDate()).padStart(2, '0')
+	const hh = String(d.getHours()).padStart(2, '0')
+	const mm = String(d.getMinutes()).padStart(2, '0')
+	return `${y}-${m}-${day} ${hh}:${mm}`
+}
+
+function statusText(status) {
+	if (status === 'checked_in') return '已打卡'
+	if (status === 'relapsed') return '已复吸'
+	if (status === 'pending') return '未打卡'
+	if (status === 'missed') return '缺失'
+	return status || '--'
+}
+
+function hpDeltaText(delta) {
+	const n = Number(delta)
+	if (Number.isNaN(n) || n === 0) return '今日 0'
+	return n > 0 ? `今日 +${n}` : `今日 ${n}`
+}
+
+function hpDeltaClass(delta) {
+	const n = Number(delta)
+	if (Number.isNaN(n) || n === 0) return 'pill-muted'
+	return n > 0 ? 'pill-up' : 'pill-down'
+}
+
+function copy(text) {
+	if (!text) return
+	uni.setClipboardData({
+		data: text,
+		success: () => uni.showToast({ title: '已复制', icon: 'success' })
+	})
+}
+
+function invitePath() {
+	if (!inviteToken.value) return ''
+	return `/pages/supervisor/bind?token=${inviteToken.value}`
+}
+
+function copyInviteToken() {
+	copy(inviteToken.value)
+}
+
+function copyInvitePath() {
+	copy(invitePath())
+}
+
+function gotoBindPage() {
+	uni.navigateTo({ url: '/pages/supervisor/bind' })
+}
+
+function confirmRevoke(item) {
+	const ownerUID = item?.owner?.user_id
+	if (!ownerUID) return
+	uni.showModal({
+		title: '解除监督',
+		content: '解除后你将无法再查看对方的戒烟概览。确定要解除吗？',
+		confirmText: '解除',
+		confirmColor: '#b91c1c',
+		success: async (res) => {
+			if (!res.confirm) return
+			await doRevoke(ownerUID)
+		}
+	})
+}
+
+async function doRevoke(ownerUID) {
+	try {
+		loading.value = true
+		const myUID = Number(userStore.user?.id)
+		if (!myUID) {
+			uni.showToast({ title: '登录信息缺失', icon: 'none' })
+			return
+		}
+		await revokeSupervisorBinding(ownerUID, myUID)
+		uni.showToast({ title: '已解除', icon: 'success' })
+		await refreshAll()
+	} catch (e) {
+		console.error('revoke error:', e)
+		uni.showToast({ title: '解除失败', icon: 'none' })
+	} finally {
+		loading.value = false
+	}
+}
+
+async function generateInvite() {
+	if (inviteLoading.value) return
+	inviteLoading.value = true
+	try {
+		const res = await createSupervisorInvite(7)
+		inviteToken.value = res.data?.token || ''
+		inviteExpireAt.value = res.data?.expire_at || ''
+		if (!inviteToken.value) {
+			uni.showToast({ title: '生成失败', icon: 'none' })
+		}
+	} catch (e) {
+		console.error('generateInvite error:', e)
+		uni.showToast({ title: '生成失败', icon: 'none' })
+	} finally {
+		inviteLoading.value = false
+	}
+}
+
+async function refreshAll() {
+	if (loading.value) return
+	loading.value = true
+	try {
+		const [overview, status, reminder] = await Promise.all([
+			getSupervisorOverview(),
+			getSupervisorStatus(),
+			getSupervisorReminderSettings()
+		])
+		overviewItems.value = overview.data?.items || []
+		supervisorItems.value = status.data?.items || []
+		applyReminderSettings(reminder.data)
+	} catch (e) {
+		console.error('refreshAll error:', e)
+		uni.showToast({ title: '刷新失败', icon: 'none' })
+	} finally {
+		loading.value = false
+	}
+}
+
+function applyReminderSettings(data) {
+	reminderEnabled.value = !!data?.enabled
+	reminderNotifyTime.value = data?.notify_time || '21:00'
+	const maxN = Number(data?.max_per_day)
+	reminderMaxPerDay.value = Number.isNaN(maxN) ? 1 : Math.min(Math.max(maxN, 0), 10)
+}
+
+async function reloadReminderSettings() {
+	try {
+		const res = await getSupervisorReminderSettings()
+		applyReminderSettings(res.data)
+		uni.showToast({ title: '已重载', icon: 'success' })
+	} catch (e) {
+		console.error('reloadReminderSettings error:', e)
+		uni.showToast({ title: '重载失败', icon: 'none' })
+	}
+}
+
+function onToggleReminder(e) {
+	reminderEnabled.value = !!e?.detail?.value
+}
+
+function pickNotifyTime() {
+	if (!reminderEnabled.value) return
+	uni.showModal({
+		title: '设置提醒时间',
+		content: '当前版本请手动输入 HH:MM（例如 21:00）。',
+		editable: true,
+		placeholderText: reminderNotifyTime.value || '21:00',
+		success: (res) => {
+			if (!res.confirm) return
+			const v = String(res.content || '').trim()
+			if (!/^\d{2}:\d{2}$/.test(v)) {
+				uni.showToast({ title: '格式应为 HH:MM', icon: 'none' })
+				return
+			}
+			reminderNotifyTime.value = v
+		}
+	})
+}
+
+function onMaxPerDayInput(e) {
+	const v = Number(e?.detail?.value)
+	if (Number.isNaN(v)) {
+		reminderMaxPerDay.value = 1
+		return
+	}
+	reminderMaxPerDay.value = Math.min(Math.max(Math.floor(v), 0), 10)
+}
+
+async function saveReminderSettings() {
+	if (savingSettings.value) return
+	savingSettings.value = true
+	try {
+		const payload = {
+			enabled: reminderEnabled.value,
+			notify_time: reminderNotifyTime.value,
+			max_per_day: reminderMaxPerDay.value
+		}
+		const res = await updateSupervisorReminderSettings(payload)
+		applyReminderSettings(res.data)
+		uni.showToast({ title: '已保存', icon: 'success' })
+	} catch (e) {
+		console.error('saveReminderSettings error:', e)
+		uni.showToast({ title: '保存失败', icon: 'none' })
+	} finally {
+		savingSettings.value = false
+	}
+}
+
+async function runRemindersNow() {
+	if (runningReminders.value) return
+	runningReminders.value = true
+	lastRunText.value = ''
+	try {
+		const res = await runSupervisorReminders()
+		const created = res.data?.created ?? 0
+		const skipped = res.data?.skipped ?? 0
+		lastRunText.value = `本次触发：写入 ${created} 条，跳过 ${skipped} 条`
+		uni.showToast({ title: '已触发', icon: 'success' })
+	} catch (e) {
+		console.error('runRemindersNow error:', e)
+		uni.showToast({ title: '触发失败', icon: 'none' })
+	} finally {
+		runningReminders.value = false
+	}
+}
+
+onMounted(() => {})
+
+onShow(async () => {
+	await waitForLogin()
+	await refreshAll()
+})
+</script>
+
+<style scoped>
+.page {
+	position: relative;
+	min-height: 100vh;
+	padding: 30rpx 28rpx 48rpx;
+	box-sizing: border-box;
+	overflow: hidden;
+	background:
+		radial-gradient(circle at 16% 0%, rgba(31, 191, 143, 0.18), transparent 34%),
+		radial-gradient(circle at 92% 10%, rgba(96, 165, 250, 0.15), transparent 30%),
+		linear-gradient(180deg, #eef7f3 0%, #f7faf8 42%, #fbfdff 100%);
+}
+
+.bg-orb {
+	position: absolute;
+	border-radius: 999rpx;
+	pointer-events: none;
+	filter: blur(2rpx);
+}
+
+.bg-orb-main {
+	top: 126rpx;
+	right: -86rpx;
+	width: 230rpx;
+	height: 230rpx;
+	background: rgba(26, 163, 122, 0.12);
+}
+
+.bg-orb-soft {
+	top: 520rpx;
+	left: -100rpx;
+	width: 260rpx;
+	height: 260rpx;
+	background: rgba(96, 165, 250, 0.1);
+}
+
+.header,
+.card,
+.footer {
+	position: relative;
+	z-index: 1;
+}
+
+.header {
+	padding: 10rpx 4rpx 20rpx;
+}
+
+.header-copy {
+	padding: 4rpx 2rpx 24rpx;
+}
+
+.eyebrow {
+	display: inline-flex;
+	align-items: center;
+	align-self: flex-start;
+	padding: 8rpx 18rpx;
+	border-radius: 999rpx;
+	background: rgba(255, 255, 255, 0.74);
+	border: 1rpx solid rgba(26, 163, 122, 0.14);
+	color: #1aa37a;
+	font-size: 20rpx;
+	font-weight: 800;
+	letter-spacing: 1.8rpx;
+}
+
+.title {
+	display: block;
+	margin-top: 18rpx;
+	font-size: 48rpx;
+	line-height: 1.15;
+	font-weight: 900;
+	color: #0f172a;
+	letter-spacing: -0.8rpx;
+}
+
+.subtitle {
+	display: block;
+	margin-top: 12rpx;
+	max-width: 620rpx;
+	font-size: 25rpx;
+	line-height: 1.7;
+	color: #64748b;
+}
+
+.hero-panel {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 24rpx 20rpx;
+	border-radius: 30rpx;
+	background: linear-gradient(135deg, rgba(15, 118, 110, 0.94), rgba(26, 163, 122, 0.86));
+	box-shadow: 0 18rpx 44rpx rgba(15, 118, 110, 0.2);
+	overflow: hidden;
+}
+
+.hero-stat {
+	flex: 1;
+	min-width: 0;
+	text-align: center;
+}
+
+.hero-stat-value {
+	display: block;
+	font-size: 34rpx;
+	line-height: 1.2;
+	font-weight: 900;
+	color: #ffffff;
+	letter-spacing: -0.4rpx;
+}
+
+.hero-stat-label {
+	display: block;
+	margin-top: 8rpx;
+	font-size: 20rpx;
+	line-height: 1.35;
+	color: rgba(255, 255, 255, 0.76);
+}
+
+.hero-divider {
+	width: 1rpx;
+	height: 54rpx;
+	background: rgba(255, 255, 255, 0.24);
+}
+
+.card {
+	margin-top: 20rpx;
+	padding: 26rpx;
+	border-radius: 32rpx;
+	background: rgba(255, 255, 255, 0.9);
+	border: 1rpx solid rgba(255, 255, 255, 0.86);
+	box-shadow: 0 18rpx 44rpx rgba(15, 23, 42, 0.07);
+	backdrop-filter: blur(18rpx);
+}
+
+.card-head {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 16rpx;
+}
+
+.card-title-wrap {
+	display: flex;
+	align-items: center;
+	gap: 12rpx;
+	min-width: 0;
+}
+
+.card-icon {
+	width: 50rpx;
+	height: 50rpx;
+	line-height: 50rpx;
+	border-radius: 18rpx;
+	text-align: center;
+	font-size: 25rpx;
+	background: rgba(26, 163, 122, 0.12);
+}
+
+.card-icon-blue {
+	background: rgba(96, 165, 250, 0.14);
+}
+
+.card-icon-orange {
+	background: rgba(251, 146, 60, 0.15);
+}
+
+.card-icon-purple {
+	background: rgba(168, 85, 247, 0.13);
+}
+
+.card-icon-gray {
+	background: rgba(100, 116, 139, 0.12);
+}
+
+.card-title {
+	font-size: 29rpx;
+	font-weight: 900;
+	color: #0f172a;
+}
+
+.card-meta {
+	flex-shrink: 0;
+	padding: 6rpx 14rpx;
+	border-radius: 999rpx;
+	background: rgba(241, 245, 249, 0.78);
+	font-size: 21rpx;
+	font-weight: 700;
+	color: #64748b;
+}
+
+.invite-box {
+	position: relative;
+	margin-top: 22rpx;
+	padding: 26rpx;
+	border-radius: 28rpx;
+	background:
+		linear-gradient(135deg, rgba(236, 253, 245, 0.94), rgba(255, 255, 255, 0.92));
+	border: 1rpx solid rgba(26, 163, 122, 0.14);
+	overflow: hidden;
+}
+
+.invite-label {
+	display: block;
+	font-size: 22rpx;
+	font-weight: 800;
+	color: #64748b;
+}
+
+.invite-token {
+	display: block;
+	margin-top: 12rpx;
+	font-size: 52rpx;
+	line-height: 1.15;
+	font-weight: 900;
+	letter-spacing: 4rpx;
+	color: #0f766e;
+	font-family: 'DIN Alternate', -apple-system, sans-serif;
+}
+
+.invite-hint {
+	display: block;
+	margin-top: 14rpx;
+	font-size: 23rpx;
+	line-height: 1.65;
+	color: #475569;
+}
+
+.invite-actions {
+	display: flex;
+	gap: 14rpx;
+	margin-top: 22rpx;
+}
+
+.invite-actions .btn {
+	flex: 1;
+}
+
+.invite-expire {
+	display: block;
+	margin-top: 16rpx;
+	font-size: 21rpx;
+	color: #94a3b8;
+}
+
+.invite-empty {
+	margin-top: 22rpx;
+	display: flex;
+	flex-direction: column;
+	gap: 18rpx;
+	padding: 22rpx;
+	border-radius: 26rpx;
+	background: rgba(248, 250, 252, 0.74);
+	border: 1rpx dashed rgba(26, 163, 122, 0.22);
+}
+
+.invite-empty-text {
+	font-size: 24rpx;
+	line-height: 1.65;
+	color: #475569;
+}
+
+.empty {
+	margin-top: 22rpx;
+	padding: 34rpx 24rpx;
+	border-radius: 28rpx;
+	text-align: center;
+	background: linear-gradient(180deg, rgba(248, 250, 252, 0.78), rgba(255, 255, 255, 0.76));
+	border: 1rpx dashed rgba(100, 116, 139, 0.18);
+}
+
+.empty-icon {
+	display: block;
+	font-size: 48rpx;
+	line-height: 1;
+	margin-bottom: 16rpx;
+}
+
+.empty-text {
+	display: block;
+	font-size: 26rpx;
+	font-weight: 900;
+	color: #0f172a;
+}
+
+.empty-hint {
+	display: block;
+	margin-top: 10rpx;
+	font-size: 22rpx;
+	line-height: 1.6;
+	color: #64748b;
+}
+
+.empty .btn {
+	margin-top: 20rpx;
+}
+
+.list {
+	margin-top: 22rpx;
+	display: flex;
+	flex-direction: column;
+	gap: 16rpx;
+}
+
+.row {
+	display: flex;
+	gap: 18rpx;
+	align-items: flex-start;
+	padding: 20rpx;
+	border-radius: 26rpx;
+	background: linear-gradient(180deg, rgba(248, 250, 252, 0.9), rgba(255, 255, 255, 0.9));
+	border: 1rpx solid rgba(15, 23, 42, 0.05);
+}
+
+.avatar {
+	width: 82rpx;
+	height: 82rpx;
+	border-radius: 50%;
+	background: #e2e8f0;
+	border: 4rpx solid #ffffff;
+	box-shadow: 0 10rpx 22rpx rgba(15, 23, 42, 0.09);
+	flex-shrink: 0;
+}
+
+.row-main {
+	flex: 1;
+	min-width: 0;
+}
+
+.name {
+	display: block;
+	font-size: 28rpx;
+	line-height: 1.35;
+	font-weight: 900;
+	color: #0f172a;
+}
+
+.meta {
+	margin-top: 12rpx;
+	display: flex;
+	gap: 10rpx;
+	flex-wrap: wrap;
+}
+
+.pill {
+	padding: 8rpx 13rpx;
+	border-radius: 999rpx;
+	background: #ffffff;
+	border: 1rpx solid rgba(15, 23, 42, 0.06);
+	font-size: 20rpx;
+	font-weight: 800;
+	color: #334155;
+	box-shadow: 0 6rpx 14rpx rgba(15, 23, 42, 0.04);
+}
+
+.pill-muted {
+	color: #64748b;
+}
+
+.pill-up {
+	color: #0f766e;
+	background: rgba(204, 251, 241, 0.72);
+	border-color: rgba(15, 118, 110, 0.12);
+}
+
+.pill-down {
+	color: #b91c1c;
+	background: rgba(254, 226, 226, 0.86);
+	border-color: rgba(185, 28, 28, 0.1);
+}
+
+.status {
+	display: block;
+	margin-top: 12rpx;
+	font-size: 22rpx;
+	line-height: 1.55;
+	color: #64748b;
+}
+
+.row-actions {
+	margin-top: 14rpx;
+	display: flex;
+	justify-content: flex-end;
+}
+
+.footer {
+	margin-top: 22rpx;
+	padding-bottom: 20rpx;
+	display: flex;
+	justify-content: center;
+}
+
+.btn,
+.mini-btn {
+	box-sizing: border-box;
+	border: 0;
+	margin: 0;
+}
+
+.btn::after,
+.mini-btn::after {
+	border: 0;
+}
+
+.btn {
+	height: 78rpx;
+	line-height: 78rpx;
+	padding: 0 28rpx;
+	border-radius: 22rpx;
+	background: linear-gradient(135deg, #1aa37a 0%, #0f766e 100%);
+	color: #ffffff;
+	font-size: 26rpx;
+	font-weight: 900;
+	box-shadow: 0 12rpx 24rpx rgba(15, 118, 110, 0.18);
+}
+
+.btn[disabled],
+.mini-btn[disabled] {
+	opacity: 0.55;
+	box-shadow: none;
+}
+
+.btn-ghost {
+	background: rgba(255, 255, 255, 0.82);
+	color: #0f766e;
+	border: 1rpx solid rgba(15, 118, 110, 0.18);
+	box-shadow: none;
+}
+
+.mini-btn {
+	height: 58rpx;
+	line-height: 58rpx;
+	padding: 0 20rpx;
+	border-radius: 18rpx;
+	background: rgba(255, 255, 255, 0.9);
+	border: 1rpx solid rgba(185, 28, 28, 0.2);
+	color: #b91c1c;
+	font-size: 22rpx;
+	font-weight: 800;
+}
+
+.mini-btn-neutral {
+	min-width: 144rpx;
+	border-color: rgba(15, 23, 42, 0.1);
+	color: #334155;
+}
+
+.settings {
+	margin-top: 22rpx;
+	display: flex;
+	flex-direction: column;
+	gap: 16rpx;
+}
+
+.setting-row {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 20rpx;
+	padding: 20rpx;
+	border-radius: 24rpx;
+	background: rgba(248, 250, 252, 0.8);
+	border: 1rpx solid rgba(15, 23, 42, 0.05);
+}
+
+.setting-label {
+	flex-shrink: 0;
+	font-size: 25rpx;
+	font-weight: 900;
+	color: #0f172a;
+}
+
+.setting-control {
+	flex: 1;
+	min-width: 0;
+	display: flex;
+	flex-direction: column;
+	align-items: flex-end;
+	gap: 10rpx;
+}
+
+.num-input {
+	width: 190rpx;
+	height: 66rpx;
+	padding: 0 18rpx;
+	border-radius: 18rpx;
+	background: rgba(255, 255, 255, 0.96);
+	border: 1rpx solid rgba(15, 23, 42, 0.08);
+	font-size: 27rpx;
+	font-weight: 800;
+	color: #0f172a;
+	text-align: right;
+}
+
+.setting-hint {
+	font-size: 20rpx;
+	line-height: 1.5;
+	color: #64748b;
+	text-align: right;
+}
+
+.setting-actions {
+	display: flex;
+	gap: 14rpx;
+}
+
+.setting-actions .btn {
+	flex: 1;
+}
+
+.settings-note {
+	padding: 18rpx 20rpx;
+	border-radius: 22rpx;
+	background: rgba(236, 253, 245, 0.7);
+	font-size: 22rpx;
+	line-height: 1.65;
+	color: #64748b;
+}
+
+.run-result {
+	padding: 18rpx 20rpx;
+	border-radius: 22rpx;
+	background: rgba(204, 251, 241, 0.64);
+	font-size: 22rpx;
+	line-height: 1.6;
+	color: #0f766e;
+	font-weight: 900;
+}
+</style>

src/stores/dashboard.js

@@ -1,72 +0,0 @@
-import { defineStore } from 'pinia'
-import { getDashboard, getNextSmokeTime } from '@/api/smoke'
-
-export const useDashboardStore = defineStore('dashboard', {
-	state: () => ({
-		todayCount: 0,
-		minutesSinceLast: 0,
-		weekly: [],
-		nextSmokeTime: null,
-		lastFetchTime: 0,
-		cacheExpiry: 30 * 1000,
-		loading: false
-	}),
-
-	getters: {
-		isCacheValid: (state) => {
-			return Date.now() - state.lastFetchTime < state.cacheExpiry
-		}
-	},
-
-	actions: {
-		async fetchDashboard(forceRefresh = false) {
-			if (!forceRefresh && this.isCacheValid) {
-				return
-			}
-
-			this.loading = true
-			try {
-				const res = await getDashboard()
-				this.todayCount = res.data.today_count || 0
-				this.minutesSinceLast = res.data.minutes_since_last || 0
-				this.weekly = res.data.weekly || []
-				this.lastFetchTime = Date.now()
-			} catch (e) {
-				console.error('fetchDashboard error:', e)
-				throw e
-			} finally {
-				this.loading = false
-			}
-		},
-
-		async fetchNextSmokeTime() {
-			try {
-				const res = await getNextSmokeTime()
-				this.nextSmokeTime = res.data
-				return res.data
-			} catch (e) {
-				console.error('fetchNextSmokeTime error:', e)
-				throw e
-			}
-		},
-
-		setDashboard(data) {
-			this.todayCount = data.today_count || 0
-			this.minutesSinceLast = data.minutes_since_last || 0
-			this.weekly = data.weekly || []
-			this.lastFetchTime = Date.now()
-		},
-
-		setNextSmokeTime(data) {
-			this.nextSmokeTime = data
-		},
-
-		incrementTodayCount() {
-			this.todayCount++
-		},
-
-		resetTimer() {
-			this.minutesSinceLast = 0
-		}
-	}
-})

src/stores/index.js

@@ -5,6 +5,5 @@ const pinia = createPinia()
 export default pinia
 
 export * from './user'
-export * from './dashboard'
 export * from './profile'
 export * from './logs'

src/stores/logs.js

@@ -1,5 +1,6 @@
 import { defineStore } from 'pinia'
 import * as api from '@/api'
+import { normalizeReasonTags, getReasonLabels } from '@/config/smoke-reasons'
 
 export const useLogsStore = defineStore('logs', {
 	state: () => ({
@@ -126,6 +127,8 @@ export const useLogsStore = defineStore('logs', {
 				return {
 					...log,
 					type,
+					reasonTags: normalizeReasonTags(log.reason_tags),
+					reasonLabels: getReasonLabels(log.reason_tags, type),
 					interval,
 					displayTime: formatLogTime(log.smoke_at || log.smoke_time || log.createtime),
 					displayDate

src/stores/user.js

@@ -23,6 +23,11 @@ export const useUserStore = defineStore('user', {
 			storage.set(USER_MODE_KEY, mode)
 		},
 
+		updateUser(fields) {
+			this.user = { ...this.user, ...fields }
+			storage.set(USER_KEY, this.user)
+		},
+
 		logout() {
 			this.user = null
 			this.sessionKey = null

src/styles/_mixins.scss

@@ -0,0 +1,250 @@
+// ==========================================
+// 统一 SCSS Mixins
+// ==========================================
+
+// ---- 卡片 ----
+@mixin card-base {
+  background: $bg-card-glass;
+  border-radius: $radius-xl;
+  padding: $spacing-lg;
+  border: 1.5rpx solid $border-card;
+  box-shadow: $shadow-card;
+}
+
+@mixin card-solid {
+  background: $bg-card;
+  border-radius: $radius-2xl;
+  padding: $spacing-xl;
+  box-shadow: $shadow-sm;
+}
+
+@mixin card-glass {
+  background: $bg-card-glass;
+  border-radius: $radius-xl;
+  padding: $spacing-lg;
+  border: 1.5rpx solid $border-card;
+  box-shadow: $shadow-card;
+  -webkit-backdrop-filter: blur(12px);
+  backdrop-filter: blur(12px);
+}
+
+@mixin card-elevated {
+  @include card-base;
+  box-shadow: $shadow-md;
+  border-color: $border-light;
+}
+
+@mixin card-subtle {
+  background: $gradient-card-subtle;
+  border-radius: $radius-md;
+  padding: $spacing-lg;
+  border: 1rpx solid $border-light;
+  box-shadow: inset 0 1rpx 0 rgba(255, 255, 255, 0.9);
+}
+
+// ---- 按钮 ----
+@mixin btn-base {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: $radius-full;
+  font-weight: $font-weight-bold;
+  transition: all $transition-fast;
+}
+
+@mixin btn-primary {
+  @include btn-base;
+  height: 96rpx;
+  background: $gradient-primary;
+  color: $text-inverse;
+  font-size: $font-lg;
+  box-shadow: $shadow-btn;
+}
+
+@mixin btn-secondary {
+  @include btn-base;
+  height: 96rpx;
+  background: $bg-card;
+  color: $text-primary;
+  font-size: $font-lg;
+  border: 2rpx solid $border-light;
+  box-shadow: $shadow-sm;
+}
+
+@mixin btn-outline {
+  @include btn-base;
+  height: 96rpx;
+  background: transparent;
+  color: $color-primary-dark;
+  font-size: $font-lg;
+  border: 2rpx solid rgba($color-primary, 0.32);
+}
+
+@mixin btn-pill {
+  @include btn-base;
+  padding: $spacing-xs $spacing-lg;
+  font-size: $font-sm;
+  font-weight: $font-weight-semibold;
+}
+
+// ---- 标签/徽章 ----
+@mixin chip {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: $spacing-xs $spacing-md;
+  border-radius: $radius-full;
+  font-size: $font-sm;
+  font-weight: $font-weight-semibold;
+}
+
+@mixin chip-primary {
+  @include chip;
+  background: $color-primary-bg;
+  color: $color-primary-dark;
+  border: 1rpx solid $color-primary-border;
+}
+
+@mixin chip-muted {
+  @include chip;
+  background: $bg-muted;
+  color: $text-muted;
+}
+
+@mixin badge {
+  @include chip;
+  font-size: $font-xs;
+  padding: 6rpx 14rpx;
+  background: $color-primary-bg;
+  color: $color-primary-dark;
+}
+
+// ---- 进度条 ----
+@mixin progress-bar($height: 10rpx) {
+  height: $height;
+  background: rgba($color-primary, 0.1);
+  border-radius: $radius-full;
+  overflow: hidden;
+}
+
+@mixin progress-fill {
+  height: 100%;
+  border-radius: $radius-full;
+  background: linear-gradient(90deg, $color-primary, $color-primary-light);
+  transition: width $transition-slow;
+}
+
+// ---- 圆环 ----
+@mixin ring($size: 110rpx) {
+  width: $size;
+  height: $size;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+@mixin ring-inner {
+  border-radius: 50%;
+  background: $bg-card;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4rpx 12rpx $color-primary-shadow;
+}
+
+// ---- 布局 ----
+@mixin flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+@mixin flex-between {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+@mixin flex-col {
+  display: flex;
+  flex-direction: column;
+}
+
+// ---- 文字 ----
+@mixin text-number {
+  font-family: $font-family-number;
+  font-weight: $font-weight-heavy;
+}
+
+@mixin text-heading {
+  font-weight: $font-weight-bold;
+  color: $text-primary;
+}
+
+@mixin text-label {
+  font-size: $font-sm;
+  color: $text-tertiary;
+}
+
+@mixin text-kicker {
+  font-size: $font-xs;
+  font-weight: $font-weight-semibold;
+  color: $text-muted;
+}
+
+// ---- 动画骨架 ----
+@mixin skeleton-shimmer {
+  background: linear-gradient(90deg, #E5E7EB 25%, #F3F4F6 50%, #E5E7EB 75%);
+  background-size: 200% 100%;
+  animation: shimmer 1.5s infinite;
+}
+
+// ---- 安全区域 ----
+@mixin safe-area-bottom {
+  padding-bottom: constant(safe-area-inset-bottom);
+  padding-bottom: env(safe-area-inset-bottom);
+}
+
+// ---- 悬浮按钮 ----
+@mixin fab {
+  position: fixed;
+  z-index: 100;
+  border-radius: $radius-full;
+  background: $gradient-primary;
+  box-shadow: $shadow-fab;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  animation: fabFloat 3.6s ease-in-out infinite;
+}
+
+// ---- 空状态 ----
+@mixin empty-state {
+  @include flex-col;
+  align-items: center;
+  padding: 80rpx $spacing-xl;
+  border-radius: $radius-2xl;
+  background: $gradient-card;
+  box-shadow: $shadow-md;
+}
+
+// ---- 菜单项 ----
+@mixin menu-item {
+  display: flex;
+  align-items: center;
+  gap: $spacing-lg;
+  padding: $spacing-lg 0;
+  background: transparent;
+}
+
+@mixin menu-icon($bg: $color-primary-soft) {
+  width: 72rpx;
+  height: 72rpx;
+  border-radius: 50%;
+  @include flex-center;
+  flex-shrink: 0;
+  background: $bg;
+}

src/styles/_variables.scss

@@ -0,0 +1,112 @@
+// ==========================================
+// 薄荷绿浅色系主题 - 统一设计变量
+// ==========================================
+
+// ---- 主色调 (薄荷绿) ----
+$color-primary: #34C8A0;
+$color-primary-dark: #1AA37A;
+$color-primary-deeper: #14936d;
+$color-primary-light: #6ee7be;
+$color-primary-soft: #E6F7F1;
+$color-primary-softer: #F0FDF9;
+$color-primary-bg: rgba(52, 200, 160, 0.08);
+$color-primary-border: rgba(52, 200, 160, 0.14);
+$color-primary-shadow: rgba(52, 200, 160, 0.12);
+
+// ---- 功能色 ----
+$color-success: #10B981;
+$color-warning: #F59E0B;
+$color-warning-bg: #FEF3C7;
+$color-warning-text: #D97706;
+$color-danger: #EF4444;
+$color-danger-bg: rgba(239, 68, 68, 0.06);
+$color-info: #3B82F6;
+$color-info-bg: rgba(59, 130, 246, 0.08);
+
+// ---- 文字色 ----
+$text-primary: #111827;
+$text-secondary: #4b5563;
+$text-tertiary: #6b7280;
+$text-muted: #9ca3af;
+$text-disabled: #d1d5db;
+$text-inverse: #ffffff;
+$text-accent: $color-primary-dark;
+
+// ---- 背景色 ----
+$bg-page: #F5F8F6;
+$bg-page-gradient: linear-gradient(180deg, $color-primary-soft 0%, $color-primary-softer 40%, #FAFFFE 100%);
+$bg-card: #ffffff;
+$bg-card-glass: rgba(255, 255, 255, 0.88);
+$bg-card-hover: #f7faf8;
+$bg-subtle: #fbfcfc;
+$bg-muted: #f3f4f6;
+
+// ---- 边框 ----
+$border-light: rgba(15, 23, 42, 0.06);
+$border-card: $color-primary-border;
+$border-divider: #f0f0f0;
+
+// ---- 圆角 ----
+$radius-xs: 8rpx;
+$radius-sm: 12rpx;
+$radius-md: 16rpx;
+$radius-lg: 20rpx;
+$radius-xl: 24rpx;
+$radius-2xl: 32rpx;
+$radius-full: 999rpx;
+
+// ---- 间距 ----
+$spacing-xs: 8rpx;
+$spacing-sm: 12rpx;
+$spacing-md: 16rpx;
+$spacing-lg: 24rpx;
+$spacing-xl: 32rpx;
+$spacing-2xl: 40rpx;
+$spacing-page: 28rpx;
+
+// ---- 阴影 ----
+$shadow-sm: 0 4rpx 12rpx rgba(52, 200, 160, 0.06);
+$shadow-card: 0 4rpx 18rpx rgba(52, 200, 160, 0.07);
+$shadow-md: 0 8rpx 24rpx rgba(15, 23, 42, 0.06);
+$shadow-lg: 0 18rpx 36rpx rgba(15, 23, 42, 0.08);
+$shadow-btn: 0 12rpx 28rpx rgba(52, 200, 160, 0.22);
+$shadow-fab: 0 18rpx 36rpx rgba(52, 200, 160, 0.3);
+
+// ---- 字号 ----
+$font-xs: 20rpx;
+$font-sm: 22rpx;
+$font-base: 24rpx;
+$font-md: 26rpx;
+$font-lg: 28rpx;
+$font-xl: 30rpx;
+$font-2xl: 34rpx;
+$font-3xl: 40rpx;
+$font-4xl: 52rpx;
+$font-display: 74rpx;
+
+// ---- 字重 ----
+$font-weight-normal: 400;
+$font-weight-medium: 500;
+$font-weight-semibold: 600;
+$font-weight-bold: 700;
+$font-weight-heavy: 800;
+
+// ---- 行高 ----
+$line-height-tight: 1.2;
+$line-height-normal: 1.5;
+$line-height-relaxed: 1.7;
+
+// ---- 字体 ----
+$font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+$font-family-number: 'DIN Alternate', $font-family-base;
+
+// ---- 渐变 ----
+$gradient-primary: linear-gradient(180deg, $color-primary 0%, $color-primary-dark 100%);
+$gradient-primary-soft: linear-gradient(180deg, $color-primary-soft 0%, $color-primary-softer 100%);
+$gradient-card: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 251, 249, 0.94) 100%);
+$gradient-card-subtle: linear-gradient(180deg, $bg-subtle 0%, $bg-card-hover 100%);
+
+// ---- 动画 ----
+$transition-fast: 0.2s ease;
+$transition-normal: 0.3s ease;
+$transition-slow: 0.5s ease;

src/uni.scss

@@ -1,76 +1,53 @@
 /**
- * 这里是uni-app内置的常用样式变量
- *
- * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
- * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
- *
+ * 薄荷绿浅色系主题 - uni-app 全局 SCSS 变量
+ * 所有页面自动注入，无需手动 import
  */
 
-/**
- * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
- *
- * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
- */
+@import '@/styles/_variables.scss';
+@import '@/styles/_mixins.scss';
 
-/* 颜色变量 */
-
-/* 行为相关颜色 */
-$uni-color-primary: #007aff;
-$uni-color-success: #4cd964;
-$uni-color-warning: #f0ad4e;
-$uni-color-error: #dd524d;
+/* 覆盖 uni-app 默认颜色变量 */
+$uni-color-primary: $color-primary-dark;
+$uni-color-success: $color-success;
+$uni-color-warning: $color-warning;
+$uni-color-error: $color-danger;
 
 /* 文字基本颜色 */
-$uni-text-color:#333;//基本色
-$uni-text-color-inverse:#fff;//反色
-$uni-text-color-grey:#999;//辅助灰色，如加载更多的提示信息
-$uni-text-color-placeholder: #808080;
-$uni-text-color-disable:#c0c0c0;
+$uni-text-color: $text-primary;
+$uni-text-color-inverse: $text-inverse;
+$uni-text-color-grey: $text-tertiary;
+$uni-text-color-placeholder: $text-muted;
+$uni-text-color-disable: $text-disabled;
 
 /* 背景颜色 */
-$uni-bg-color:#ffffff;
-$uni-bg-color-grey:#f8f8f8;
-$uni-bg-color-hover:#f1f1f1;//点击状态颜色
-$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色
+$uni-bg-color: $bg-card;
+$uni-bg-color-grey: $bg-page;
+$uni-bg-color-hover: $bg-card-hover;
+$uni-bg-color-mask: rgba(0, 0, 0, 0.4);
 
 /* 边框颜色 */
-$uni-border-color:#c8c7cc;
-
-/* 尺寸变量 */
+$uni-border-color: $border-divider;
 
 /* 文字尺寸 */
-$uni-font-size-sm:12px;
-$uni-font-size-base:14px;
-$uni-font-size-lg:16px;
-
-/* 图片尺寸 */
-$uni-img-size-sm:20px;
-$uni-img-size-base:26px;
-$uni-img-size-lg:40px;
+$uni-font-size-sm: $font-sm;
+$uni-font-size-base: $font-base;
+$uni-font-size-lg: $font-md;
 
 /* Border Radius */
-$uni-border-radius-sm: 2px;
-$uni-border-radius-base: 3px;
-$uni-border-radius-lg: 6px;
+$uni-border-radius-sm: $radius-xs;
+$uni-border-radius-base: $radius-sm;
+$uni-border-radius-lg: $radius-md;
 $uni-border-radius-circle: 50%;
 
 /* 水平间距 */
-$uni-spacing-row-sm: 5px;
-$uni-spacing-row-base: 10px;
-$uni-spacing-row-lg: 15px;
+$uni-spacing-row-sm: $spacing-xs;
+$uni-spacing-row-base: $spacing-md;
+$uni-spacing-row-lg: $spacing-lg;
 
 /* 垂直间距 */
-$uni-spacing-col-sm: 4px;
-$uni-spacing-col-base: 8px;
-$uni-spacing-col-lg: 12px;
+$uni-spacing-col-sm: $spacing-xs;
+$uni-spacing-col-base: $spacing-sm;
+$uni-spacing-col-lg: $spacing-md;
 
 /* 透明度 */
-$uni-opacity-disabled: 0.3; // 组件禁用态的透明度
-
-/* 文章场景相关 */
-$uni-color-title: #2C405A; // 文章标题颜色
-$uni-font-size-title:20px;
-$uni-color-subtitle: #555555; // 二级标题颜色
-$uni-font-size-subtitle:26px;
-$uni-color-paragraph: #3F536E; // 文章段落颜色
-$uni-font-size-paragraph:15px;
+$uni-opacity-disabled: 0.3;

src/utils/nsti-data.js

@@ -0,0 +1,565 @@
+export const NSTI_DIMENSIONS = {
+	A: {
+		key: 'A',
+		name: '外部驱动',
+		label: '社交/外部归因',
+		description: '容易被场景、人情和外部压力牵着走',
+		color: '#FF5D73'
+	},
+	B: {
+		key: 'B',
+		name: '情绪拉扯',
+		label: '情绪/矛盾',
+		description: '容易在焦虑、愤怒和自我矛盾中反复横跳',
+		color: '#FF9F1C'
+	},
+	C: {
+		key: 'C',
+		name: '习惯黑洞',
+		label: '习惯/逃避',
+		description: '容易被惯性、空虚感和逃避机制拖住',
+		color: '#7A5CFA'
+	},
+	D: {
+		key: 'D',
+		name: '行动模式',
+		label: '行动/自律',
+		description: '更容易靠执行力、计划和目标感推动自己',
+		color: '#00C48C'
+	}
+}
+
+export const NSTI_PERSONALITY_TYPES = {
+	N01: {
+		code: 'N01',
+		name: '赛博戒烟菩萨',
+		emoji: '🧘',
+		catchphrase: '施主，这根抽完贫僧就真的戒了',
+		description: '嘴上说着戒烟，手却依然很诚实。每次抽烟都有愧疚感，但下一根总能找到理由。',
+		difficulty: 3,
+		difficultyText: '嘴上戒了，手没戒',
+		peerCount: 12847,
+		color: '#54D2B1',
+		abstractRank: 92,
+		tags: ['嘴硬体软', '赛博自律', '口头戒烟'],
+		suggestions: [
+			'把“我在戒烟”设成手机壁纸，每天看见一次就提醒一次。',
+			'下次想点烟时先延迟 3 分钟，让冲动先过峰值。',
+			'把“最后一根”换成“下一根先不抽”，减少自我欺骗。',
+			'用 App 记录抽烟次数，用数据给自己拆台。'
+		],
+		actionPlan: [
+			'今天开始只做一件事：把下一根往后拖 3 分钟。',
+			'把最常抽烟的一个场景换掉，比如先离开工位或阳台。',
+			'今晚回顾一次记录，别评价自己，只看事实。'
+		],
+		shareTemplate: '我是赛博戒烟菩萨🧘，嘴上戒了，手还没戒。'
+	},
+	N02: {
+		code: 'N02',
+		name: '传奇耐戒王',
+		emoji: '👑',
+		catchphrase: '戒了100次，成功率0%，但嘴还是硬的',
+		description: '戒烟次数比大多数人努力的次数还多。总会复吸，但也总会重新开局，是嘴硬也是韧性。',
+		difficulty: 5,
+		difficultyText: '反复戒烟，永不成功',
+		peerCount: 10432,
+		color: '#F59E0B',
+		abstractRank: 88,
+		tags: ['反复横跳', '高韧性', '不服输'],
+		suggestions: [
+			'别只盯连续天数，开始记录“复吸间隔”有没有拉长。',
+			'每次复吸都记一句原因，找出最常见的触发场景。',
+			'把目标改成“比上次多撑半天”，不要一口吃成狠人。',
+			'你不是失败太多，而是尝试次数已经领先大多数人。'
+		],
+		actionPlan: [
+			'回想最近一次复吸，写下当时的地点、情绪和人。',
+			'给自己设一个小目标：这周只比上周少抽 5 根。',
+			'把“又失败了”改成“我找到一个新漏洞”。'
+		],
+		shareTemplate: '我是传奇耐戒王👑，戒了很多次，但我还没打算认输。'
+	},
+	N03: {
+		code: 'N03',
+		name: '小丑皇',
+		emoji: '🃏',
+		catchphrase: '最后一根说了100遍',
+		description: 'flag 立得快，倒得也快。擅长在“就这一根”和“我真要戒了”之间来回表演。',
+		difficulty: 4,
+		difficultyText: '经典 flag 制造机',
+		peerCount: 9271,
+		color: '#FF4D6D',
+		abstractRank: 96,
+		tags: ['经典打脸', 'flag王者', '自我欺骗'],
+		suggestions: [
+			'下次别说“最后一根”，只做“下一根不点”。',
+			'每说一次狠话，就往储蓄罐里放 10 块钱。',
+			'发朋友圈前先把手边那包烟移走，降低秒打脸概率。',
+			'别靠情绪发誓，靠环境设计来帮你。'
+		],
+		actionPlan: [
+			'今天取消所有狠话，只执行一个动作：烟别放手边。',
+			'最容易打脸的时间段先准备替代动作，比如喝水或嚼口香糖。',
+			'今晚统计一次你今天没说出口的 flag。'
+		],
+		shareTemplate: '我是小丑皇🃏，最后一根说了100遍，这次想少说一句。'
+	},
+	N04: {
+		code: 'N04',
+		name: '朋友圈影帝',
+		emoji: '🎭',
+		catchphrase: '我的戒烟是演给别人看的',
+		description: '在别人的目光里很能忍，一到没人看时就恢复原形。你其实很会控，只是还没把观众从外部换成自己。',
+		difficulty: 3,
+		difficultyText: '发圈时戒，私下猛抽',
+		peerCount: 8619,
+		color: '#9B5DE5',
+		abstractRank: 84,
+		tags: ['表演型', '外部评价', '在意人设'],
+		suggestions: [
+			'既然在别人面前能忍，就试着把“别人面前”延长到全天。',
+			'把表演冲动转成打卡冲动，让结果替你说话。',
+			'选择一个最信任的人，只向他汇报真实进度。',
+			'这次别为了观众而戒，为了自己的肺演全套。'
+		],
+		actionPlan: [
+			'今天只对一个人说实话：你最容易在哪个场景破功。',
+			'给自己建一个低调打卡，记录真实抽烟数量。',
+			'明天试一次“没人看也不抽”的一小时练习。'
+		],
+		shareTemplate: '我是朋友圈影帝🎭，这次想把“演给别人看”改成“为自己认真做”。'
+	},
+	N05: {
+		code: 'N05',
+		name: '社交老烟枪',
+		emoji: '🤝',
+		catchphrase: '递烟必接，面子大于健康',
+		description: '一个人时未必抽，见到熟人烟瘾自动上线。你不是缺意志力，是太难拒绝人情场。',
+		difficulty: 4,
+		difficultyText: '社交驱动型烟民',
+		peerCount: 11903,
+		color: '#FF7A59',
+		abstractRank: 72,
+		tags: ['面子优先', '递烟必接', '人情压力'],
+		suggestions: [
+			'提前准备拒绝话术，比如“戒了，你抽你的”。',
+			'社交时手里拿杯水或口香糖，减少条件反射。',
+			'真正的朋友不会因为你不接烟就跟你翻脸。',
+			'你需要练的不是戒烟，是说“不”。'
+		],
+		actionPlan: [
+			'先挑一个最熟的人练习拒绝，降低心理门槛。',
+			'把下一次饭局定义成“只拒一根烟”的实验。',
+			'结束后复盘：别人真的介意了吗？'
+		],
+		shareTemplate: '我是社交老烟枪🤝，面子很大，肺想先请个假。'
+	},
+	N06: {
+		code: 'N06',
+		name: '焦虑制造者',
+		emoji: '😤',
+		catchphrase: '一焦虑就想抽，越抽越焦虑',
+		description: '烟像情绪止痛片，但药效一过，烦躁和担心又回来。你最难的不是烟，是情绪出口太单一。',
+		difficulty: 5,
+		difficultyText: '情绪驱动型',
+		peerCount: 9984,
+		color: '#FF8C42',
+		abstractRank: 68,
+		tags: ['焦虑循环', '情绪依赖', '高压模式'],
+		suggestions: [
+			'想抽时先做 10 次慢呼吸，让身体从应激里退半步。',
+			'准备一个替代减压动作：快走、捏泡泡纸、写两行字都行。',
+			'把“我想抽烟”翻译成“我现在很烦/很怕/很空”。',
+			'烟不是解药，更像短时麻醉。'
+		],
+		actionPlan: [
+			'今天先记下三次最想抽烟的情绪时刻。',
+			'选一个替代动作，只在今天试一次，不要求完美。',
+			'睡前看一遍记录，找出最常见的情绪词。'
+		],
+		shareTemplate: '我是焦虑制造者😤，烟像止痛片，但我想找真正的出口。'
+	},
+	N07: {
+		code: 'N07',
+		name: '丧尸模式',
+		emoji: '💀',
+		catchphrase: '完全无意识，手自己找烟',
+		description: '很多时候不是你决定要抽，是身体直接执行了老程序。抽完才回神，是你最典型的日常。',
+		difficulty: 4,
+		difficultyText: '习惯性烟民',
+		peerCount: 9356,
+		color: '#6B7280',
+		abstractRank: 64,
+		tags: ['无意识', '条件反射', '惯性'],
+		suggestions: [
+			'把烟和打火机挪远，增加获取阻力。',
+			'换掉最习惯抽烟的位置，让身体先卡壳。',
+			'准备口香糖或吸管，让手和嘴都有替代动作。',
+			'你不是没有意志力，只是习惯太自动。'
+		],
+		actionPlan: [
+			'先清掉一个高频抽烟点位的烟具。',
+			'今天设三个整点提醒，问自己“我现在在干嘛”。',
+			'把第一根无意识烟拖延 5 分钟。'
+		],
+		shareTemplate: '我是丧尸模式💀，手比脑子快一步，正在把控制权夺回来。'
+	},
+	N08: {
+		code: 'N08',
+		name: '拖延大师',
+		emoji: '📅',
+		catchphrase: '明天开始戒，永远明天',
+		description: '你不是没准备好，是太擅长用“准备”代替行动。明天很完美，但永远不在今天发生。',
+		difficulty: 3,
+		difficultyText: '日期幻觉症患者',
+		peerCount: 11308,
+		color: '#3A86FF',
+		abstractRank: 70,
+		tags: ['明天再说', '无限准备', '行动延迟'],
+		suggestions: [
+			'别设“明天开始”，直接从下一根不抽开始。',
+			'把目标从“彻底戒掉”缩成“先撑 24 小时”。',
+			'给自己一个立刻可执行的动作，比如先不买下一包。',
+			'你已经准备够了，差的是开机键。'
+		],
+		actionPlan: [
+			'今天只做一个动作：别提前补货。',
+			'设一个 24 小时倒计时，看自己能不能撑到明天同一时间。',
+			'把“以后再说”换成“现在先做一格”。'
+		],
+		shareTemplate: '我是拖延大师📅，明天太远，所以这次从今天先动一格。'
+	},
+	N09: {
+		code: 'N09',
+		name: '真正狠人',
+		emoji: '🚀',
+		catchphrase: '说戒就戒，绝不回头',
+		description: '一旦下决心就很能执行，目标感强，耐痛阈值也高。你是最接近“立即行动派”的那一类。',
+		difficulty: 1,
+		difficultyText: '戒烟界传说',
+		peerCount: 4239,
+		color: '#00C48C',
+		abstractRank: 38,
+		tags: ['行动派', '意志力强', '说到做到'],
+		suggestions: [
+			'继续保持，但别在最自信的时候低估复吸风险。',
+			'把经验沉淀成自己的流程，以后更稳。',
+			'可以带一个戒烟搭子，你很适合做榜样。',
+			'狠不只在开始，更在长期维持。'
+		],
+		actionPlan: [
+			'把你的戒烟规则写成 3 条最小原则。',
+			'提前准备一个“高风险场景应对脚本”。',
+			'达成一周目标后，奖励自己一个真正喜欢的东西。'
+		],
+		shareTemplate: '我是正确狠人🚀，这次不靠口号，靠执行。'
+	},
+	N10: {
+		code: 'N10',
+		name: '愤怒的小鸟',
+		emoji: '🔥',
+		catchphrase: '抽完更烦躁，越烦越想抽',
+		description: '情绪像火，烟像汽油。你以为在灭火，其实常常把烦躁烧得更旺。',
+		difficulty: 4,
+		difficultyText: '负面循环型',
+		peerCount: 7812,
+		color: '#FF4E50',
+		abstractRank: 74,
+		tags: ['烦躁升级', '负面循环', '情绪宣泄'],
+		suggestions: [
+			'愤怒时先离开现场，别让烟变成默认出口。',
+			'跑步、拍打枕头、冷水洗脸，都比点烟更像灭火器。',
+			'识别“我烦”和“我想抽”是不是被你绑在一起了。',
+			'烟不是灭火器，更像助燃剂。'
+		],
+		actionPlan: [
+			'今天给自己准备一个物理泄压动作。',
+			'下次烦躁时先等 90 秒再决定要不要抽。',
+			'把最常点火的那件事写下来，先处理源头。'
+		],
+		shareTemplate: '我是愤怒的小鸟🔥，不想再拿汽油给自己灭火。'
+	},
+	N11: {
+		code: 'N11',
+		name: '养生矛盾体',
+		emoji: '🍵',
+		catchphrase: '一边抽烟一边喝茶养生',
+		description: '很会给自己找平衡感：抽烟可以，等会儿喝点热茶补回来。你不是不懂，只是太会自我安慰。',
+		difficulty: 3,
+		difficultyText: '自我安慰大师',
+		peerCount: 6537,
+		color: '#7BC96F',
+		abstractRank: 82,
+		tags: ['平衡幻觉', '自我安慰', '矛盾体'],
+		suggestions: [
+			'茶是好东西，但真的不能和烟打平。',
+			'先承认“补一补”只是安慰，不是解法。',
+			'把养生心态变真一点，从少抽一根开始。',
+			'真正的养生，是别再让肺替你背锅。'
+		],
+		actionPlan: [
+			'今天保留喝茶，但删掉其中一支烟。',
+			'把“我在平衡”改成“我在找借口”提醒自己一次。',
+			'选一个最想养生的理由，写在便签上。'
+		],
+		shareTemplate: '我是养生矛盾体🍵，枸杞和烟不该再同框了。'
+	},
+	N12: {
+		code: 'N12',
+		name: '表演艺术家',
+		emoji: '🎪',
+		catchphrase: '抽烟姿态优雅，烟是道具',
+		description: '你抽的不只是烟，也是氛围、姿态和一种角色感。很多时候你留恋的是“感觉”，不是尼古丁本身。',
+		difficulty: 2,
+		difficultyText: '形式大于内容',
+		peerCount: 5089,
+		color: '#F15BB5',
+		abstractRank: 86,
+		tags: ['氛围感', '道具流', '文艺烟感'],
+		suggestions: [
+			'把“抽烟仪式”迁移到别的媒介上，比如咖啡、散步或拍照。',
+			'保留氛围感，不必保留那根烟。',
+			'给自己找一个新的“道具”，让角色感脱离香烟。',
+			'真正的酷，不靠烟雾完成。'
+		],
+		actionPlan: [
+			'今天挑一个最讲氛围的场景，试着不用烟完成它。',
+			'准备一个替代道具，比如薄荷糖、咖啡杯、纸笔。',
+			'记录一次“没抽也有感觉”的瞬间。'
+		],
+		shareTemplate: '我是表演艺术家🎪，烟只是道具，但我想演一个更酷的自己。'
+	},
+	N13: {
+		code: 'N13',
+		name: '隐形成员',
+		emoji: '👻',
+		catchphrase: '没人知道我抽烟',
+		description: '习惯偷偷抽、躲着抽，抽烟和羞耻感绑定得很深。你承受的不只是烟瘾，还有秘密本身的压力。',
+		difficulty: 3,
+		difficultyText: '偷偷摸摸型',
+		peerCount: 6120,
+		color: '#5C677D',
+		abstractRank: 66,
+		tags: ['隐形烟民', '偷偷摸摸', '双重生活'],
+		suggestions: [
+			'既然别人都不知道，那你其实很适合悄悄开始戒。',
+			'找一个可信的人做搭子，不用一个人扛。',
+			'隐藏带来的压力，本身也会推着你继续抽。',
+			'承认是第一步，不一定要对全世界承认。'
+		],
+		actionPlan: [
+			'先对一个安全的人说出你的真实情况。',
+			'把最常偷抽的地方变得不那么方便。',
+			'今天试一次“想抽但先不躲着去”的停顿。'
+		],
+		shareTemplate: '我是隐形成员👻，这次想把秘密变成一次小小的改变。'
+	},
+	N14: {
+		code: 'N14',
+		name: '卷王型戒烟者',
+		emoji: '💪',
+		catchphrase: '连续打卡，目标必达成',
+		description: '你对目标、数据和进度条很敏感，越看得到进展越来劲。只要方向对，你是最容易持续的人之一。',
+		difficulty: 2,
+		difficultyText: '行动派',
+		peerCount: 7444,
+		color: '#06D6A0',
+		abstractRank: 42,
+		tags: ['数据控', '自律驱动', '目标型'],
+		suggestions: [
+			'把戒烟拆成可量化目标，你会更有状态。',
+			'设置每周里程碑，用奖励巩固正反馈。',
+			'找一个搭子互相卷，效率会更高。',
+			'继续用数据说话，你本来就擅长这个。'
+		],
+		actionPlan: [
+			'给自己定一个这周的可量化指标。',
+			'设立 3 个奖励节点，别只盯终点。',
+			'每天同一时间打一次卡，让行动变自动。'
+		],
+		shareTemplate: '我是卷王型戒烟者💪，进度条一旦开了就不想让它断。'
+	},
+	N15: {
+		code: 'N15',
+		name: '深夜哲学家',
+		emoji: '🌙',
+		catchphrase: '只有深夜才抽烟思考',
+		description: '抽烟和深夜、独处、灵感绑定得很深。你最怕戒掉烟之后，那些自以为重要的思考氛围也一起消失。',
+		difficulty: 3,
+		difficultyText: '烟是灵感来源',
+		peerCount: 5821,
+		color: '#6C63FF',
+		abstractRank: 79,
+		tags: ['深夜档', '灵感型', '仪式依赖'],
+		suggestions: [
+			'把“抽烟时间”替换成“深夜散步”或“写两行字”的时间。',
+			'你依赖的更多是场景感，不一定是烟本身。',
+			'灵感可以配茶、配风、配纸笔，不必配烟。',
+			'保留思考，不必保留烟雾。'
+		],
+		actionPlan: [
+			'今晚先试一次不抽烟的深夜时段。',
+			'准备一本小本子，想到什么先记下来。',
+			'找出一个你最珍惜的深夜 ritual，用别的东西替代烟。'
+		],
+		shareTemplate: '我是深夜哲学家🌙，想把灵感留住，把烟雾删掉。'
+	},
+	N16: {
+		code: 'N16',
+		name: '终极摆烂王',
+		emoji: '🏳️',
+		catchphrase: '反正戒不掉，不如享受',
+		description: '表面看像放弃治疗，底层其实是怕再次失败。你不是不想变好，是不想再失望。',
+		difficulty: 5,
+		difficultyText: '放弃治疗型',
+		peerCount: 8897,
+		color: '#94A3B8',
+		abstractRank: 90,
+		tags: ['摆烂', '防御性悲观', '先投降'],
+		suggestions: [
+			'先别谈全戒，从少抽一根开始也算赢。',
+			'允许自己失败，但把复吸间隔拉长一点点。',
+			'给自己设一个很小的目标，比如这周少抽 5 根。',
+			'摆烂不是唯一选择，你只是还没找到顺手的方法。'
+		],
+		actionPlan: [
+			'今天只争取少抽一根，不要求完美。',
+			'把最近一次“摆烂”的真实原因写下来。',
+			'给下周设一个小到不丢人的目标。'
+		],
+		shareTemplate: '我是终极摆烂王🏳️，但今天想试试不摆烂一小会儿。'
+	}
+}
+
+export const NSTI_DIMENSION_PAIR_MAP = {
+	AA: 'N05',
+	AB: 'N01',
+	AC: 'N04',
+	AD: 'N12',
+	BA: 'N03',
+	BB: 'N06',
+	BC: 'N10',
+	BD: 'N02',
+	CA: 'N13',
+	CB: 'N16',
+	CC: 'N07',
+	CD: 'N08',
+	DA: 'N14',
+	DB: 'N11',
+	DC: 'N15',
+	DD: 'N09'
+}
+
+export const NSTI_QUESTIONS = [
+	{
+		id: 1,
+		title: '你上次说“戒烟”是什么时候？',
+		subtitle: '测试你的戒烟承诺频率和可信度',
+		options: [
+			{ key: 'A', text: '今天早上刚说过 ⏰', weights: { N01: 3, N03: 1 } },
+			{ key: 'B', text: '昨天，说完就抽了 🔄', weights: { N02: 3, N03: 1 } },
+			{ key: 'C', text: '上周/上月，记不清了 📅', weights: { N08: 3, N07: 1 } },
+			{ key: 'D', text: '说得太多了，当口头禅了 💬', weights: { N01: 2, N02: 2 } }
+		]
+	},
+	{
+		id: 2,
+		title: '朋友递烟给你，你会？',
+		subtitle: '测试你的社交压力和自控力',
+		options: [
+			{ key: 'A', text: '直接接，面子第一 🤝', weights: { N05: 3, N12: 1 } },
+			{ key: 'B', text: '嘴上说戒了，手很诚实 ✋', weights: { N01: 3, N03: 1 } },
+			{ key: 'C', text: '拒绝，然后偷偷自己抽一根 🤫', weights: { N13: 3, N04: 1 } },
+			{ key: 'D', text: '坚决不接，然后被孤立 😢', weights: { N09: 2, N14: 2 } }
+		]
+	},
+	{
+		id: 3,
+		title: '你戒烟失败的最奇葩理由是？',
+		subtitle: '测试你的借口制造能力和自我欺骗程度',
+		options: [
+			{ key: 'A', text: '“今天压力大”（每天都压力大）😰', weights: { N06: 2, N10: 2 } },
+			{ key: 'B', text: '“明天开始戒”（永远明天）📅', weights: { N08: 3, N16: 1 } },
+			{ key: 'C', text: '“朋友递的，不接不给面子” 🙇', weights: { N05: 3, N04: 1 } },
+			{ key: 'D', text: '“就抽一根，没事的”（经典flag）🚩', weights: { N03: 3, N02: 1 } }
+		]
+	},
+	{
+		id: 4,
+		title: '你抽烟时的精神状态是？',
+		subtitle: '测试你抽烟的心理动机',
+		options: [
+			{ key: 'A', text: '🧘 冥想大师，享受每一口', weights: { N15: 2, N12: 2 } },
+			{ key: 'B', text: '😤 愤怒的小鸟，越抽越烦躁', weights: { N10: 3, N06: 1 } },
+			{ key: 'C', text: '🎭 演技派，其实不想抽但停不下来', weights: { N11: 2, N04: 2 } },
+			{ key: 'D', text: '💀 丧尸模式，完全无意识', weights: { N07: 3, N16: 1 } }
+		]
+	},
+	{
+		id: 5,
+		title: '你的理想戒烟场景是？',
+		subtitle: '测试你对戒烟的想象和期望',
+		options: [
+			{ key: 'A', text: '赛博空间（数字戒烟）🤖', weights: { N01: 2, N14: 2 } },
+			{ key: 'B', text: '修仙洞府（闭关修炼）🧙', weights: { N15: 2, N13: 2 } },
+			{ key: 'C', text: '监狱（物理强制）🚔', weights: { N16: 2, N07: 2 } },
+			{ key: 'D', text: '外太空（没氧气自然戒）🚀', weights: { N12: 2, N03: 2 } }
+		]
+	},
+	{
+		id: 6,
+		title: '你戒烟时最怕什么？',
+		subtitle: '测试你戒烟的最大障碍',
+		options: [
+			{ key: 'A', text: '朋友递烟时张嘴了（物理惯性）😨', weights: { N05: 2, N07: 2 } },
+			{ key: 'B', text: '打火机太好看了不用可惜（颜控）🔥', weights: { N12: 2, N11: 2 } },
+			{ key: 'C', text: '无聊到怀疑人生（精神支柱）😴', weights: { N16: 2, N15: 2 } },
+			{ key: 'D', text: '失去抽烟这个“思考时间”🤔', weights: { N15: 3, N11: 1 } }
+		]
+	},
+	{
+		id: 7,
+		title: '你发朋友圈说戒烟后发生了什么？',
+		subtitle: '测试你的公开承诺与实际行动的差距',
+		options: [
+			{ key: 'A', text: '打脸了，当天就抽了 🤦', weights: { N03: 3, N02: 1 } },
+			{ key: 'B', text: '没人信，都是看热闹的 👀', weights: { N04: 2, N02: 2 } },
+			{ key: 'C', text: '真戒了一段时间，然后复吸了 📉', weights: { N02: 3, N14: 1 } },
+			{ key: 'D', text: '从来没发过，太丢人了 😶', weights: { N13: 3, N15: 1 } }
+		]
+	},
+	{
+		id: 8,
+		title: '如果戒烟成功，你最想做什么？',
+		subtitle: '测试你的戒烟动机和动力来源',
+		options: [
+			{ key: 'A', text: '发朋友圈炫耀 📱', weights: { N04: 2, N12: 2 } },
+			{ key: 'B', text: '省下的钱买个大件 💰', weights: { N14: 2, N11: 2 } },
+			{ key: 'C', text: '告诉家人“我做到了” 👨‍👩‍👧', weights: { N09: 2, N14: 2 } },
+			{ key: 'D', text: '感觉人生少了点什么 😶‍🌫️', weights: { N16: 2, N07: 2 } }
+		]
+	},
+	{
+		id: 9,
+		title: '你觉得戒烟最难的是？',
+		subtitle: '测试你对戒烟难度的认知',
+		options: [
+			{ key: 'A', text: '戒断反应（身体折磨）😰', weights: { N02: 2, N09: 2 } },
+			{ key: 'B', text: '社交场合（递烟必接）🍻', weights: { N05: 3, N04: 1 } },
+			{ key: 'C', text: '无聊时光（手没地方放）👐', weights: { N07: 3, N16: 1 } },
+			{ key: 'D', text: '情绪波动（焦虑就抽）😤', weights: { N06: 2, N10: 2 } }
+		]
+	},
+	{
+		id: 10,
+		title: '如果用一个词形容你的戒烟史？',
+		subtitle: '综合测试你的戒烟人格画像',
+		options: [
+			{ key: 'A', text: '“反复横跳” 🔄', weights: { N02: 3, N11: 1 } },
+			{ key: 'B', text: '“嘴硬体软” 🗣️', weights: { N01: 3, N03: 1 } },
+			{ key: 'C', text: '“表演艺术” 🎭', weights: { N12: 2, N04: 2 } },
+			{ key: 'D', text: '“明日复明日” 📅', weights: { N08: 3, N16: 1 } }
+		]
+	}
+]

src/utils/nsti.js

@@ -0,0 +1,183 @@
+import { storage, NSTI_RESULT_KEY, NSTI_HISTORY_KEY, NSTI_DRAFT_KEY } from './storage'
+import { NSTI_DIMENSIONS, NSTI_DIMENSION_PAIR_MAP, NSTI_PERSONALITY_TYPES, NSTI_QUESTIONS } from './nsti-data'
+
+const HISTORY_LIMIT = 12
+const DIMENSION_TIE_PRIORITY = { B: 4, A: 3, C: 2, D: 1 }
+const NSTI_LOGO_BASE_URL = 'https://linghu-wmr.oss-cn-beijing.aliyuncs.com/sbti/Camera%20Roll'
+
+function clone(data) {
+	return JSON.parse(JSON.stringify(data))
+}
+
+export function getNSTIQuestions() {
+	return clone(NSTI_QUESTIONS)
+}
+
+export function getNSTIPersonalityTypes() {
+	return clone(NSTI_PERSONALITY_TYPES)
+}
+
+export function getNSTILogoUrl(code) {
+	if (!code || !/^N\d{2}$/.test(code)) return ''
+	const index = Number(code.slice(1))
+	if (!index || index < 1 || index > 16) return ''
+	return `${NSTI_LOGO_BASE_URL}/${index}.png`
+}
+
+export function getNSTIDimensions() {
+	return clone(NSTI_DIMENSIONS)
+}
+
+export function getNSTIResultByCode(code) {
+	return NSTI_PERSONALITY_TYPES[code] ? clone(NSTI_PERSONALITY_TYPES[code]) : null
+}
+
+export function getLatestNSTIResult() {
+	return storage.get(NSTI_RESULT_KEY)
+}
+
+export function getNSTIHistory() {
+	return storage.get(NSTI_HISTORY_KEY, [])
+}
+
+export function getNSTIDraft() {
+	return storage.get(NSTI_DRAFT_KEY)
+}
+
+export function saveNSTIDraft(draft) {
+	storage.set(NSTI_DRAFT_KEY, draft)
+}
+
+export function clearNSTIDraft() {
+	storage.remove(NSTI_DRAFT_KEY)
+}
+
+export function saveNSTIResult(result) {
+	storage.set(NSTI_RESULT_KEY, result)
+	const history = getNSTIHistory().filter((item) => item.id !== result.id)
+	history.unshift(result)
+	storage.set(NSTI_HISTORY_KEY, history.slice(0, HISTORY_LIMIT))
+	clearNSTIDraft()
+}
+
+function rankDimensions(dimensionScores) {
+	return Object.entries(dimensionScores).sort((a, b) => {
+		if (b[1] !== a[1]) return b[1] - a[1]
+		return (DIMENSION_TIE_PRIORITY[b[0]] || 0) - (DIMENSION_TIE_PRIORITY[a[0]] || 0)
+	})
+}
+
+function resolveTopMatches(typeScores) {
+	return Object.keys(typeScores)
+		.map((code) => ({
+			code,
+			score: typeScores[code],
+			...NSTI_PERSONALITY_TYPES[code]
+		}))
+		.sort((a, b) => {
+			if (b.score !== a.score) return b.score - a.score
+			return (b.abstractRank || 0) - (a.abstractRank || 0)
+		})
+	}
+
+export function calculateNSTIResult(answerRecords) {
+	if (!Array.isArray(answerRecords) || answerRecords.length !== NSTI_QUESTIONS.length) {
+		throw new Error('answers incomplete')
+	}
+
+	const dimensionScores = { A: 0, B: 0, C: 0, D: 0 }
+	const typeScores = {}
+	Object.keys(NSTI_PERSONALITY_TYPES).forEach((code) => {
+		typeScores[code] = 0
+	})
+
+	answerRecords.forEach((answer) => {
+		if (!answer || !answer.dimension) {
+			throw new Error('invalid answer')
+		}
+		dimensionScores[answer.dimension] += 1
+		Object.entries(answer.weights || {}).forEach(([code, weight]) => {
+			typeScores[code] = (typeScores[code] || 0) + Number(weight || 0)
+		})
+	})
+
+	const rankedDimensions = rankDimensions(dimensionScores)
+	const topPair = `${rankedDimensions[0][0]}${rankedDimensions[1][0]}`
+	const boostedType = NSTI_DIMENSION_PAIR_MAP[topPair]
+	if (boostedType) {
+		typeScores[boostedType] += 1.25
+	}
+
+	if (dimensionScores.D >= 7) {
+		typeScores.N09 += 1.5
+	}
+	if (dimensionScores.B >= 5 && dimensionScores.C >= 3) {
+		typeScores.N10 += 1
+	}
+	if (dimensionScores.A >= 5 && dimensionScores.B >= 3) {
+		typeScores.N05 += 0.75
+		typeScores.N01 += 0.5
+	}
+	if (dimensionScores.C >= 5 && dimensionScores.D <= 1) {
+		typeScores.N16 += 1
+	}
+
+	const topMatches = resolveTopMatches(typeScores)
+	const resultType = topMatches[0]
+	const totalAnswers = answerRecords.length
+
+	const dimensionBreakdown = rankedDimensions.map(([key, score]) => ({
+		key,
+		score,
+		percentage: Math.round((score / totalAnswers) * 100),
+		...NSTI_DIMENSIONS[key]
+	}))
+
+	const completedAt = new Date().toISOString()
+	const result = {
+		id: `${resultType.code}-${Date.now()}`,
+		typeCode: resultType.code,
+		completedAt,
+		totalAnswers,
+		primaryDimension: dimensionBreakdown[0],
+		secondaryDimension: dimensionBreakdown[1],
+		dimensionScores,
+		dimensionBreakdown,
+		topMatches: topMatches.slice(0, 3).map((item) => ({
+			code: item.code,
+			name: item.name,
+			emoji: item.emoji,
+			catchphrase: item.catchphrase,
+			logoUrl: getNSTILogoUrl(item.code),
+			score: item.score,
+			color: item.color,
+			percentage: topMatches[0].score > 0 ? Math.round((item.score / topMatches[0].score) * 100) : 0
+		})),
+		answers: answerRecords,
+		logoUrl: getNSTILogoUrl(resultType.code),
+		...NSTI_PERSONALITY_TYPES[resultType.code]
+	}
+
+	result.shareText = buildNSTIShareText(result)
+	return result
+}
+
+export function buildNSTIShareText(result) {
+	if (!result) return '测测你的赛博尼古丁测试结果'
+	return `我是${result.name}${result.emoji}\n“${result.catchphrase}”\n戒烟难度：${renderDifficultyStars(result.difficulty)}\n来测测你的赛博尼古丁测试结果`
+}
+
+export function renderDifficultyStars(level = 0) {
+	return '★'.repeat(level) + '☆'.repeat(Math.max(0, 5 - level))
+}
+
+export function formatNSTITime(value) {
+	if (!value) return ''
+	const date = new Date(value)
+	if (Number.isNaN(date.getTime())) return ''
+	const month = `${date.getMonth() + 1}`.padStart(2, '0')
+	const day = `${date.getDate()}`.padStart(2, '0')
+	const hour = `${date.getHours()}`.padStart(2, '0')
+	const minute = `${date.getMinutes()}`.padStart(2, '0')
+	return `${month}.${day} ${hour}:${minute}`
+}

src/utils/storage.js

@@ -41,3 +41,6 @@ export const USER_KEY = 'user'
 export const PROFILE_KEY = 'profile'
 export const USER_MODE_KEY = 'user_mode'
 export const QUIT_CHECKIN_KEY = 'quit_checkin'
+export const NSTI_RESULT_KEY = 'nsti_latest_result'
+export const NSTI_HISTORY_KEY = 'nsti_history'
+export const NSTI_DRAFT_KEY = 'nsti_draft'

vite.config.js

@@ -11,7 +11,8 @@ export default defineConfig({
     proxy: {
       '/api/v1': {
         // target: 'http://localhost:8080',
-        target: 'http://nas.quitsmok.top:8300',
+        target: 'http://192.168.31.73:8080',
+
         changeOrigin: true
       }
     }