admin/smt
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Compare commits

base: admin/smt:develop
Branches Tags
admin/smt:master admin/smt:develop admin/smt:feat/h5-debug-and-design-refresh
..
compare: admin/smt:14c0d4752daba70e2bc967b8a478edae06aa871e
Branches Tags
admin/smt:master admin/smt:develop admin/smt:feat/h5-debug-and-design-refresh

4 Commits
develop .. 14c0d4752d

Author SHA1 Message Date
nepiedg 14c0d4752d feat: 梦想清单页与戒烟相关 API 
- 梦想清单：系统导航栏、浮动添加、图标来自后台预设
- dream-presets API、pages.json 导航样式

Made-with: Cursor
 2026-04-04 14:55:58 +08:00
nepiedg 4066bd31fa feat: enhance user profile and achievement features 
- Add functionality for users to update their profile picture and nickname
- Implement achievement theme selection in onboarding
- Update API integration for profile updates and achievement themes
- Refine UI elements for better user interaction and experience
 2026-04-04 14:22:22 +08:00
nepiedg 3cea0dca0d fix: align floating tabs on logs and stats 2026-04-02 01:13:33 +08:00
nepiedg a7f532fe41 fix: polish logs filter and stats money display 2026-04-02 00:39:56 +08:00
26 changed files with 1286 additions and 5918 deletions
Expand all files Collapse all files
docs/nsti.md
-55
View File
@@ -1,55 +0,0 @@
# 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
+130 -127
View File
@@ -49,174 +49,177 @@ export default {
}
</script>
<style lang="scss">
<style>
page {
background: $bg-page-gradient;
color: $text-primary;
font-family: $font-family-base;
font-size: $font-lg;
line-height: $line-height-normal;
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;
}
// ---- 容器 ----
.container {
padding: $spacing-xl;
padding: 32rpx;
min-height: 100vh;
box-sizing: border-box;
}
// ---- 统一卡片 ----
.card {
@include card-base;
margin-bottom: $spacing-lg;
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);
}
.card-solid {
@include card-solid;
margin-bottom: $spacing-lg;
.card-light {
background: rgba(255, 255, 255, 0.62);
}
.card-glass {
@include card-glass;
margin-bottom: $spacing-lg;
.text-primary {
color: #1AA37A;
}
.card-elevated {
@include card-elevated;
margin-bottom: $spacing-lg;
.text-secondary {
color: #667085;
}
.card-subtle {
@include card-subtle;
.text-muted {
color: #98A2B3;
}
// ---- 文字工具类 ----
.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-center {
text-align: center;
}
// ---- Flex 工具类 ----
.flex { display: flex; }
.flex-center { @include flex-center; }
.flex-between { @include flex-between; }
.flex-col { @include flex-col; }
.flex-1 { flex: 1; }
.text-bold {
font-weight: 600;
}
// ---- 间距工具类 ----
.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; }
.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;
}
// ---- 统一按钮 ----
.btn {
@include btn-base;
display: flex;
align-items: center;
justify-content: center;
height: 96rpx;
font-size: $font-2xl;
border-radius: 999rpx;
font-size: 32rpx;
font-weight: 600;
}
.btn-primary {
@include btn-primary;
background: linear-gradient(180deg, #32c59d 0%, #1aa37a 100%);
color: #FFFFFF;
box-shadow: 0 12rpx 28rpx rgba(26, 163, 122, 0.22);
}
.btn-secondary {
@include btn-secondary;
background: rgba(255, 255, 255, 0.82);
color: #111827;
border: 2rpx solid rgba(15, 23, 42, 0.08);
}
.btn-outline {
@include btn-outline;
background-color: transparent;
color: #1AA37A;
border: 2rpx solid rgba(26, 163, 122, 0.32);
}
// ---- 统一标签 ----
.chip {
@include chip;
.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-primary {
@include chip-primary;
.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-muted {
@include chip-muted;
.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;
}
.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 {
@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;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
</style>
src/api/auth.js
+1 -26
View File
@@ -2,7 +2,6 @@ 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=='
@@ -64,7 +63,7 @@ export function logout() {
storage.remove(USER_KEY)
}
export async function updateUserProfile(data) {
export async function updateProfile(data) {
const res = await request.put('/auth/profile', data)
const user = storage.get(USER_KEY)
if (user && res.data) {
@@ -75,34 +74,10 @@ export async function updateUserProfile(data) {
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}`)
src/api/index.js
+1 -1
View File
@@ -1,3 +1,3 @@
export * from './auth'
export * from './smoke'
export { getProfile as getSmokeProfile, updateProfile as updateSmokeProfile } from './profile'
export * from './profile'
src/api/smoke.js
-33
View File
@@ -132,36 +132,3 @@ 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
-7
View File
@@ -11,8 +11,6 @@
- ✅ 从底部弹出动画效果
- ✅ 半屏展示，优化用户体验
- ✅ 支持两种模式：抽烟记录 / 忍住记录
- ✅ 快捷标签、多选原因与补充备注
- ✅ `quickMode` 快速记录模式
- ✅ 完整的表单功能
- ✅ 已配置 easycom 自动导入
@@ -60,8 +58,6 @@ function handleSubmit(data) {
|------|------|--------|------|
| show | Boolean | false | 控制弹框显示/隐藏（支持 v-model） |
| type | String | 'smoke' | 记录类型：'smoke'(抽烟) 或 'resisted'(忍住) |
| initialData | Object | null | 编辑模式下的初始值 |
| quickMode | Boolean | false | 是否启用快速记录模式，默认隐藏高级项 |
## 🎪 Events
@@ -76,7 +72,6 @@ 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）
@@ -95,7 +90,6 @@ function handleSubmit(data) {
<smoke-record-dialog
v-model:show="showDialog"
type="smoke"
:quick-mode="true"
@submit="onSmokeSubmit"
/>
</view>
@@ -185,4 +179,3 @@ async function onResistedSubmit(data) {
3. 已配置 easycom，无需手动导入
4. 提交后弹框会自动关闭
5. 表单数据会在打开时自动初始化为当前时间
6. 当后端尚未消费 `reason_tags` 时，组件会把已选标签合并进 `remark`，避免信息丢失
src/components/smoke-record-dialog/smoke-record-dialog.vue
+67 -329
View File
@@ -3,91 +3,11 @@
<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">
<view v-if="quickModeActive" 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="quickModeActive && 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">
<view class="section-heading">
<text class="section-title">{{ reasonSectionTitle }}</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 class="remark-section">
<view class="section-heading">
<text class="section-title">{{ remarkTitle }}</text>
<text class="section-caption">{{ remarkCaption }}</text>
</view>
<view class="remark-card">
<textarea
class="form-textarea"
v-model="formData.remark"
:placeholder="remarkPlaceholder"
maxlength="200"
/>
</view>
</view>
<view v-if="quickModeActive" 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>
<view v-if="showAdvanced || !quickModeActive" class="advanced-fields">
<view class="form-row">
<picker class="picker-card" mode="date" :value="formData.smoke_time" @change="onDateChange">
<view class="input-card">
@@ -121,7 +41,7 @@
</view>
</view>
<view v-if="!quickModeActive" class="section-card">
<view class="section-card">
<view class="level-header">
<text class="section-title">{{ type === 'smoke' ? '烟瘾程度' : '忍住强度' }}</text>
<view class="level-badge">Level {{ formData.level }}</view>
@@ -143,13 +63,24 @@
<text class="level-scale-text">强烈</text>
</view>
</view>
<view class="remark-section">
<text class="section-title">备注（可选）</text>
<view class="remark-card">
<textarea
class="form-textarea"
v-model="formData.remark"
:placeholder="type === 'smoke' ? '记录此时的心情或诱因，如压力大、应酬...' : '记录抵抗心得或诱因...'"
maxlength="200"
/>
</view>
</view>
</view>
<view class="dialog-footer">
<view class="dialog-btn-primary" @tap="submit">
<view class="btn-icon"></view>
<text class="btn-text">{{ quickModeActive ? '快速保存' : '保存记录' }}</text>
<text class="btn-text">保存记录</text>
</view>
</view>
</view>
@@ -157,8 +88,6 @@
</template>
<script>
import { getReasonOptions, normalizeReasonTags, getReasonLabels } from '@/config/smoke-reasons'
export default {
name: 'SmokeRecordDialog',
props: {
@@ -173,22 +102,16 @@ 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: '',
reason_tags: [],
level: 2,
num: 1
}
@@ -196,40 +119,7 @@ export default {
},
computed: {
title() {
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)
},
reasonSectionTitle() {
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')
? '写下这次忍住的具体方法或感受...'
: '可以补充这次是怎么撑过去的'
return '添加记录'
}
},
watch: {
@@ -246,20 +136,18 @@ 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 || '',
reason_tags: normalizeReasonTags(this.initialData.reason_tags),
level: this.initialData.level ?? 2,
num: this.resolveInitialNum(this.initialData)
num: this.initialData.num ?? 1
}
return
}
} else {
// 新建模式，使用当前本地时间（不用 toISOString，避免 UTC 导致日期差一天）
const now = new Date()
const y = now.getFullYear()
const m = String(now.getMonth() + 1).padStart(2, '0')
@@ -273,14 +161,10 @@ export default {
smoke_time_only: timeStr,
smoke_at: datetimeStr,
remark: '',
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()
@@ -313,17 +197,6 @@ 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
@@ -348,17 +221,6 @@ export default {
return true
},
buildRemark() {
const customRemark = (this.formData.remark || '').trim()
const reasonLabels = getReasonLabels(this.formData.reason_tags, this.type).filter(label => label !== '其他')
if (!reasonLabels.length) {
return customRemark
}
if (!customRemark) {
return reasonLabels.join('、')
}
return `${reasonLabels.join('、')}；${customRemark}`
},
submit() {
if (!this.isTimeValid()) {
return
@@ -367,8 +229,7 @@ export default {
const submitData = {
smoke_time: this.formData.smoke_time,
smoke_at: this.formData.smoke_at,
remark: this.buildRemark(),
reason_tags: [...this.formData.reason_tags],
remark: this.formData.remark,
level: this.formData.level,
num: this.type === 'smoke' ? this.formData.num : 0
}
@@ -422,27 +283,17 @@ export default {
.dialog-header {
display: flex;
align-items: flex-start;
align-items: center;
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;
@@ -450,11 +301,10 @@ 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 {
@@ -464,151 +314,6 @@ 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);
}
.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;
}
.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;
@@ -632,7 +337,7 @@ export default {
.input-label {
font-size: 22rpx;
color: #9ca3af;
color: #9CA3AF;
margin-bottom: 12rpx;
font-weight: 500;
}
@@ -647,7 +352,7 @@ export default {
width: 32rpx;
height: 32rpx;
border-radius: 8rpx;
background-color: #dcfce7;
background-color: #DCFCE7;
position: relative;
}
@@ -658,7 +363,7 @@ export default {
top: 8rpx;
width: 20rpx;
height: 16rpx;
border: 2rpx solid #22c55e;
border: 2rpx solid #22C55E;
border-top-width: 6rpx;
border-radius: 4rpx;
}
@@ -670,7 +375,7 @@ export default {
top: 8rpx;
width: 16rpx;
height: 16rpx;
border: 2rpx solid #22c55e;
border: 2rpx solid #22C55E;
border-radius: 50%;
}
@@ -681,7 +386,7 @@ export default {
top: 12rpx;
width: 2rpx;
height: 8rpx;
background-color: #22c55e;
background-color: #22C55E;
transform-origin: bottom;
}
@@ -691,6 +396,15 @@ 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;
@@ -711,7 +425,7 @@ export default {
.section-icon {
width: 64rpx;
height: 64rpx;
background-color: #dcfce7;
background-color: #DCFCE7;
border-radius: 16rpx;
position: relative;
}
@@ -724,7 +438,7 @@ export default {
width: 28rpx;
height: 28rpx;
border-radius: 6rpx;
border: 3rpx solid #22c55e;
border: 3rpx solid #22C55E;
border-top-color: transparent;
}
@@ -742,7 +456,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;
@@ -797,7 +511,31 @@ export default {
.level-scale-text {
font-size: 22rpx;
color: #9ca3af;
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;
}
.dialog-footer {
@@ -832,14 +570,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
+2 -2
View File
@@ -4,8 +4,8 @@ const ENV = {
MINI_PROGRAM_ID: 2
},
production: {
BASE_URL: 'https://wx.nepiedg.top/api/v1',
// BASE_URL: 'http://192.168.31.73:8080/api/v1',
// 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
-68
View File
@@ -1,68 +0,0 @@
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
-32
View File
@@ -54,24 +54,6 @@
"navigationBarTitleText": "戒烟分享"
}
},
{
"path": "pages/nsti/index",
"style": {
"navigationBarTitleText": "赛博尼古丁测试"
}
},
{
"path": "pages/nsti/test",
"style": {
"navigationBarTitleText": "人格测试"
}
},
{
"path": "pages/nsti/result",
"style": {
"navigationBarTitleText": "测试结果"
}
},
{
"path": "pages/profile/index",
"style": {
@@ -96,20 +78,6 @@
"navigationStyle": "default",
"navigationBarTitleText": "梦想清单"
}
},
{
"path": "pages/supervisor/index",
"style": {
"navigationBarTitleText": "监督人",
"navigationStyle": "default"
}
},
{
"path": "pages/supervisor/bind",
"style": {
"navigationBarTitleText": "绑定监督",
"navigationStyle": "default"
}
}
],
"globalStyle": {
src/pages/index/index.vue
+937 -1353
View File
File diff suppressed because it is too large Load Diff
src/pages/logs/index.vue
+20 -94
View File
@@ -70,14 +70,6 @@
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"
@@ -98,13 +90,9 @@
</view>
<view v-else class="empty-state">
<view class="empty-orbit"></view>
<view class="empty-icon-wrap">
<text class="empty-icon">记</text>
</view>
<text class="empty-text">今天还没有记录</text>
<text class="empty-hint">点击右下角悬浮按钮，快速记录抽烟或忍住的时刻，时间线会从这里开始。</text>
<view class="empty-action" @tap="addLog">立即记录</view>
<text class="empty-text">暂无记录</text>
<text class="empty-hint">点击右下角按钮开始记录</text>
</view>
<view v-if="logsStore.loading && logsStore.logs.length > 0" class="loading-more">
@@ -119,7 +107,6 @@
</scroll-view>
<view class="fab" @tap="addLog">
<text class="fab-label">记录</text>
<text class="fab-icon">+</text>
</view>
@@ -227,7 +214,6 @@ 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
}
@@ -585,23 +571,6 @@ onShareAppMessage(() => {
margin-bottom: 10rpx;
}
.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;
@@ -671,45 +640,28 @@ onShareAppMessage(() => {
}
.empty-state {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 132rpx 32rpx 116rpx;
padding: 120rpx 32rpx;
border-radius: 32rpx;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(247, 250, 248, 0.94) 100%);
box-shadow: 0 16rpx 38rpx rgba(15, 23, 42, 0.06);
overflow: hidden;
}
.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;
background: #FFFFFF;
box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.03);
}
.empty-icon {
width: 112rpx;
height: 112rpx;
border-radius: 36rpx;
background: #E8F5F0;
display: flex;
align-items: center;
justify-content: center;
font-size: 40rpx;
font-weight: 700;
color: #10B981;
margin-bottom: 24rpx;
}
.empty-text {
@@ -721,19 +673,7 @@ onShareAppMessage(() => {
.empty-hint {
font-size: 24rpx;
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;
color: #999999;
}
.loading-more, .no-more {
@@ -750,43 +690,29 @@ onShareAppMessage(() => {
position: fixed;
right: 32rpx;
bottom: 140rpx;
min-width: 170rpx;
width: 96rpx;
height: 96rpx;
padding: 0 24rpx;
background: linear-gradient(180deg, #16C38B 0%, #10B981 100%);
border-radius: 999rpx;
background: #10B981;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
gap: 12rpx;
box-shadow: 0 18rpx 36rpx rgba(16, 185, 129, 0.3);
box-shadow: 0 8rpx 24rpx rgba(16, 185, 129, 0.25);
transition: all 0.3s;
z-index: 100;
animation: fabFloat 3.6s ease-in-out infinite;
}
.fab:active {
transform: scale(0.95);
}
.fab-label {
font-size: 24rpx;
color: #FFFFFF;
font-weight: 700;
}
.fab-icon {
font-size: 42rpx;
font-size: 48rpx;
color: #FFFFFF;
font-weight: 400;
font-weight: 300;
}
.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
-417
View File
@@ -1,417 +0,0 @@
<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
-815
View File
@@ -1,815 +0,0 @@
<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
-367
View File
@@ -1,367 +0,0 @@
<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/profile/index.vue
+5 -54
View File
@@ -59,32 +59,6 @@
<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>
@@ -135,12 +109,10 @@
<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 { createShare } from '@/api/smoke'
import { updateUserProfile, uploadFile } from '@/api/auth'
import { getLatestNSTIResult } from '@/utils/nsti'
const profileStore = useProfileStore()
const userStore = useUserStore()
@@ -150,7 +122,6 @@ const shareToken = ref('')
const shareExpireAt = ref('')
const shareLoading = ref(false)
const navBarHeight = ref(0)
const latestNSTIResult = 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')
@@ -159,9 +130,6 @@ const modeText = computed(() => {
if (userStore.mode === 'record') return '记录抽烟'
return '未选择'
})
const nstiDesc = computed(() => latestNSTIResult.value
? `你上次测出：${latestNSTIResult.value.name}`
: '10 道题，测测你是哪一种抽象戒烟人格')
const shareDesc = computed(() => {
if (!shareToken.value) {
@@ -204,7 +172,7 @@ async function prepareShareToken(showToast = false) {
if (shareLoading.value) return
shareLoading.value = true
try {
const res = await createShare({ days: 7 })
const res = await api.createShare({ days: 7 })
shareToken.value = res.data?.share_token || ''
shareExpireAt.value = res.data?.expire_at || ''
if (showToast) {
@@ -239,7 +207,7 @@ async function onChooseAvatar(e) {
if (!avatarUrl) return
try {
uni.showLoading({ title: '上传头像...' })
const uploadRes = await uploadFile(avatarUrl)
const uploadRes = await api.uploadFile(avatarUrl)
await doUpdateProfile({ avatar_url: uploadRes.url })
} catch (err) {
console.error('头像上传失败:', err)
@@ -258,7 +226,7 @@ function onChooseAvatarH5() {
const tempPath = res.tempFilePaths[0]
try {
uni.showLoading({ title: '上传头像...' })
const uploadRes = await uploadFile(tempPath)
const uploadRes = await api.uploadFile(tempPath)
await doUpdateProfile({ avatar_url: uploadRes.url })
} catch (err) {
console.error('头像上传失败:', err)
@@ -282,7 +250,7 @@ async function onNicknameChange(e) {
async function doUpdateProfile(data) {
try {
const res = await updateUserProfile(data)
const res = await api.updateProfile(data)
userStore.updateUser(res.data)
uni.showToast({ title: '修改成功', icon: 'success' })
} catch (e) {
@@ -295,14 +263,6 @@ 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 clearCache() {
uni.showModal({
title: '清除缓存',
@@ -344,7 +304,6 @@ onShow(async () => {
await waitForLogin()
await profileStore.fetchProfile()
await prepareShareToken(false)
latestNSTIResult.value = getLatestNSTIResult()
})
</script>
@@ -511,10 +470,6 @@ onShow(async () => {
background: #F5F5F5;
}
.menu-icon-nsti {
background: linear-gradient(135deg, #FFE0F1 0%, #E6FFDE 100%);
}
.menu-glyph {
font-size: 30rpx;
font-weight: 700;
@@ -524,10 +479,6 @@ onShow(async () => {
color: #10B981;
}
.menu-icon-nsti .menu-glyph {
color: #C2187A;
}
.menu-icon-muted .menu-glyph {
color: #999999;
}
src/pages/stats/index.vue
+7 -68
View File
@@ -55,13 +55,7 @@
</view>
</view>
<view v-else class="empty-block">
<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>
<text class="empty-text">暂无趋势数据</text>
</view>
</view>
@@ -86,13 +80,7 @@
</view>
</view>
<view v-else class="empty-block empty-block-dashed">
<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>
<text class="empty-text">完善基础信息后解锁节省金额</text>
</view>
<view v-if="moneyAvailable" class="metric-chips">
@@ -130,13 +118,7 @@
</view>
</view>
<view v-else class="empty-block empty-block-dashed">
<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>
<text class="empty-text">暂无健康数据，记录一次后解锁</text>
</view>
<view v-if="healthItems.length > 0" class="health-list">
<view v-for="(item, index) in healthItems" :key="index" class="health-item">
@@ -808,12 +790,12 @@ onShareAppMessage(() => {
/* ── 空状态 ── */
.empty-block {
padding: 28rpx 24rpx;
border-radius: 20rpx;
background: rgba(52, 200, 160, 0.05);
padding: 32rpx;
border-radius: 16rpx;
background: rgba(52, 200, 160, 0.04);
display: flex;
align-items: center;
gap: 18rpx;
justify-content: center;
}
.empty-block-dashed {
@@ -821,51 +803,8 @@ 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
-121
View File
@@ -1,121 +0,0 @@
<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
-740
View File
@@ -1,740 +0,0 @@
<template>
<view class="page">
<view class="header">
<text class="title">监督人机制</text>
<text class="subtitle">邀请朋友监督你的戒烟旅程，或者你来监督别人</text>
</view>
<view class="card">
<view class="card-head">
<text class="card-title">邀请监督人</text>
<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">
<text class="card-title">我监督的人</text>
<text class="card-meta">{{ overviewItems.length }} 人</text>
</view>
<view v-if="overviewItems.length === 0" class="empty">
<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">
<text class="card-title">监督我的人</text>
<text class="card-meta">{{ supervisorItems.length }} 人</text>
</view>
<view v-if="supervisorItems.length === 0" class="empty">
<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">
<text class="card-title">提醒设置</text>
<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">
<text class="card-title">提醒测试（监督人）</text>
<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 {
min-height: 100vh;
padding: 28rpx 28rpx 40rpx;
box-sizing: border-box;
background: linear-gradient(180deg, #eef7f3 0%, #f7faf8 40%, #fbfdff 100%);
}
.header {
padding: 8rpx 6rpx 18rpx;
}
.title {
display: block;
font-size: 40rpx;
font-weight: 800;
color: #0f172a;
letter-spacing: 0.5rpx;
}
.subtitle {
display: block;
margin-top: 10rpx;
font-size: 24rpx;
line-height: 1.6;
color: #64748b;
}
.card {
margin-top: 18rpx;
background: rgba(255, 255, 255, 0.92);
border-radius: 26rpx;
border: 1rpx solid rgba(15, 23, 42, 0.06);
padding: 22rpx 22rpx;
box-shadow: 0 10rpx 26rpx rgba(15, 23, 42, 0.05);
}
.card-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16rpx;
}
.card-title {
font-size: 28rpx;
font-weight: 800;
color: #0f172a;
}
.card-meta {
font-size: 22rpx;
color: #94a3b8;
}
.invite-box {
margin-top: 18rpx;
}
.invite-label {
display: block;
font-size: 22rpx;
color: #64748b;
}
.invite-token {
display: block;
margin-top: 10rpx;
font-size: 36rpx;
font-weight: 900;
letter-spacing: 2rpx;
color: #0f766e;
font-family: 'DIN Alternate', -apple-system, sans-serif;
}
.invite-hint {
display: block;
margin-top: 10rpx;
font-size: 22rpx;
line-height: 1.6;
color: #475569;
}
.invite-actions {
display: flex;
gap: 14rpx;
margin-top: 16rpx;
}
.invite-expire {
display: block;
margin-top: 14rpx;
font-size: 22rpx;
color: #94a3b8;
}
.invite-empty {
margin-top: 18rpx;
display: flex;
flex-direction: column;
gap: 16rpx;
}
.invite-empty-text {
font-size: 24rpx;
line-height: 1.6;
color: #475569;
}
.empty {
margin-top: 18rpx;
padding: 16rpx 6rpx 6rpx;
}
.empty-text {
display: block;
font-size: 24rpx;
font-weight: 700;
color: #0f172a;
}
.empty-hint {
display: block;
margin-top: 10rpx;
font-size: 22rpx;
line-height: 1.6;
color: #64748b;
}
.list {
margin-top: 18rpx;
display: flex;
flex-direction: column;
gap: 14rpx;
}
.row {
display: flex;
gap: 16rpx;
align-items: flex-start;
padding: 16rpx;
border-radius: 20rpx;
background: rgba(241, 245, 249, 0.6);
border: 1rpx solid rgba(15, 23, 42, 0.04);
}
.avatar {
width: 74rpx;
height: 74rpx;
border-radius: 50%;
background: #e2e8f0;
flex-shrink: 0;
}
.row-main {
flex: 1;
min-width: 0;
}
.name {
display: block;
font-size: 28rpx;
font-weight: 800;
color: #0f172a;
}
.meta {
margin-top: 10rpx;
display: flex;
gap: 10rpx;
flex-wrap: wrap;
}
.pill {
padding: 8rpx 12rpx;
border-radius: 999rpx;
background: #ffffff;
border: 1rpx solid rgba(15, 23, 42, 0.06);
font-size: 20rpx;
color: #334155;
}
.pill-muted {
color: #64748b;
}
.pill-up {
color: #0f766e;
background: rgba(204, 251, 241, 0.6);
}
.pill-down {
color: #b91c1c;
background: rgba(254, 226, 226, 0.8);
}
.status {
display: block;
margin-top: 10rpx;
font-size: 22rpx;
color: #64748b;
}
.row-actions {
margin-top: 12rpx;
display: flex;
justify-content: flex-end;
}
.mini-btn {
height: 56rpx;
line-height: 56rpx;
padding: 0 18rpx;
border-radius: 14rpx;
background: #ffffff;
border: 1rpx solid rgba(185, 28, 28, 0.28);
color: #b91c1c;
font-size: 22rpx;
font-weight: 700;
}
.footer {
margin-top: 20rpx;
padding-bottom: 20rpx;
display: flex;
justify-content: center;
}
.btn {
height: 76rpx;
line-height: 76rpx;
padding: 0 22rpx;
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);
}
.mini-btn-neutral {
border-color: rgba(15, 23, 42, 0.12);
color: #334155;
}
.settings {
margin-top: 18rpx;
display: flex;
flex-direction: column;
gap: 16rpx;
}
.setting-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 18rpx;
padding: 14rpx 12rpx;
border-radius: 18rpx;
background: rgba(241, 245, 249, 0.45);
border: 1rpx solid rgba(15, 23, 42, 0.04);
}
.setting-label {
font-size: 24rpx;
font-weight: 800;
color: #0f172a;
padding-top: 6rpx;
}
.setting-control {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 10rpx;
}
.num-input {
width: 200rpx;
height: 64rpx;
padding: 0 14rpx;
border-radius: 14rpx;
background: rgba(255, 255, 255, 0.92);
border: 1rpx solid rgba(15, 23, 42, 0.08);
font-size: 26rpx;
text-align: right;
}
.setting-hint {
font-size: 20rpx;
line-height: 1.5;
color: #64748b;
text-align: right;
}
.setting-actions {
display: flex;
gap: 14rpx;
}
.settings-note {
font-size: 22rpx;
line-height: 1.6;
color: #64748b;
}
.run-result {
font-size: 22rpx;
color: #0f766e;
font-weight: 700;
}
</style>
src/stores/logs.js
-3
View File
@@ -1,6 +1,5 @@
import { defineStore } from 'pinia'
import * as api from '@/api'
import { normalizeReasonTags, getReasonLabels } from '@/config/smoke-reasons'
export const useLogsStore = defineStore('logs', {
state: () => ({
@@ -127,8 +126,6 @@ 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/styles/_mixins.scss
-250
View File
@@ -1,250 +0,0 @@
// ==========================================
// 统一 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
-112
View File
@@ -1,112 +0,0 @@
// ==========================================
// 薄荷绿浅色系主题 - 统一设计变量
// ==========================================
// ---- 主色调 (薄荷绿) ----
$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
+55 -32
View File
@@ -1,53 +1,76 @@
/**
* 薄荷绿浅色系主题 - uni-app 全局 SCSS 变量
* 所有页面自动注入，无需手动 import
* 这里是uni-app内置的常用样式变量
*
* uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
* 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
*
*/
@import './styles/variables';
@import './styles/mixins';
/**
* 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
*
* 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
*/
/* 覆盖 uni-app 默认颜色变量 */
$uni-color-primary: $color-primary-dark;
$uni-color-success: $color-success;
$uni-color-warning: $color-warning;
$uni-color-error: $color-danger;
/* 颜色变量 */
/* 行为相关颜色 */
$uni-color-primary: #007aff;
$uni-color-success: #4cd964;
$uni-color-warning: #f0ad4e;
$uni-color-error: #dd524d;
/* 文字基本颜色 */
$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-text-color:#333;//基本色
$uni-text-color-inverse:#fff;//反色
$uni-text-color-grey:#999;//辅助灰色，如加载更多的提示信息
$uni-text-color-placeholder: #808080;
$uni-text-color-disable:#c0c0c0;
/* 背景颜色 */
$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-bg-color:#ffffff;
$uni-bg-color-grey:#f8f8f8;
$uni-bg-color-hover:#f1f1f1;//点击状态颜色
$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色
/* 边框颜色 */
$uni-border-color: $border-divider;
$uni-border-color:#c8c7cc;
/* 尺寸变量 */
/* 文字尺寸 */
$uni-font-size-sm: $font-sm;
$uni-font-size-base: $font-base;
$uni-font-size-lg: $font-md;
$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;
/* Border Radius */
$uni-border-radius-sm: $radius-xs;
$uni-border-radius-base: $radius-sm;
$uni-border-radius-lg: $radius-md;
$uni-border-radius-sm: 2px;
$uni-border-radius-base: 3px;
$uni-border-radius-lg: 6px;
$uni-border-radius-circle: 50%;
/* 水平间距 */
$uni-spacing-row-sm: $spacing-xs;
$uni-spacing-row-base: $spacing-md;
$uni-spacing-row-lg: $spacing-lg;
$uni-spacing-row-sm: 5px;
$uni-spacing-row-base: 10px;
$uni-spacing-row-lg: 15px;
/* 垂直间距 */
$uni-spacing-col-sm: $spacing-xs;
$uni-spacing-col-base: $spacing-sm;
$uni-spacing-col-lg: $spacing-md;
$uni-spacing-col-sm: 4px;
$uni-spacing-col-base: 8px;
$uni-spacing-col-lg: 12px;
/* 透明度 */
$uni-opacity-disabled: 0.3;
$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;
src/utils/nsti-data.js
-565
View File
@@ -1,565 +0,0 @@
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
-183
View File
@@ -1,183 +0,0 @@
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
-3
View File
@@ -41,6 +41,3 @@ 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'