feat: update auth flow and homepage behavior

This commit is contained in:
你çšnepiedg
2026-03-19 15:41:26 +08:00
parent ee4beaa7a0
commit 219a6f6231
5 changed files with 253 additions and 110 deletions
+4 -1
View File
@@ -1,5 +1,5 @@
<script>
import { login, isLoggedIn } from '@/api/auth'
import { applyH5DebugSession, login, isLoggedIn } from '@/api/auth'
export default {
globalData: {
@@ -23,6 +23,9 @@ export default {
methods: {
async initLogin() {
try {
if (applyH5DebugSession()) {
console.log('H5 开发环境已注入默认调试 token')
}
if (!isLoggedIn()) {
console.log('未登录,开始静默登录...')
await login()
+13
View File
@@ -2,6 +2,19 @@ import { request } from './request'
import { MINI_PROGRAM_ID } from '@/config'
import { storage, SESSION_KEY, USER_KEY } from '@/utils/storage'
const H5_DEBUG_SESSION_KEY = 'o3dUk5QYaPdfMN9hBxeuouE0q63E'
export function applyH5DebugSession() {
let applied = false
// #ifdef H5
if (process.env.NODE_ENV === 'development' && !storage.get(SESSION_KEY)) {
storage.set(SESSION_KEY, H5_DEBUG_SESSION_KEY)
applied = true
}
// #endif
return applied
}
export async function login() {
return new Promise((resolve, reject) => {
uni.login({
+12 -2
View File
@@ -1,6 +1,6 @@
const ENV = {
development: {
BASE_URL: 'https://wx.nepiedg.top/api/v1',
BASE_URL: 'http://localhost:8080/api/v1',
MINI_PROGRAM_ID: 2
},
production: {
@@ -10,4 +10,14 @@ const ENV = {
}
const env = process.env.NODE_ENV || 'development'
export const { BASE_URL, MINI_PROGRAM_ID } = ENV[env]
const currentEnv = ENV[env]
let baseURL = currentEnv.BASE_URL
// #ifdef H5
if (env === 'development') {
baseURL = '/api/v1'
}
// #endif
export const BASE_URL = baseURL
export const MINI_PROGRAM_ID = currentEnv.MINI_PROGRAM_ID
+216 -107
View File
@@ -90,16 +90,19 @@
</view>
<view class="record-metric-group">
<text class="record-group-title">今日记录</text>
<view class="record-metric-list">
<view class="record-metric-item">
<text class="summary-metric-value">{{ resistedCount }}</text>
<text class="summary-metric-unit"></text>
<view class="summary-metric-value-row">
<text class="summary-metric-value">{{ resistedCount }}</text>
<text class="summary-metric-unit"></text>
</view>
<text class="summary-metric-label">今日忍住</text>
</view>
<view class="record-metric-item">
<text class="summary-metric-value">{{ todayCount }}</text>
<text class="summary-metric-unit"></text>
<view class="summary-metric-value-row">
<text class="summary-metric-value">{{ todayCount }}</text>
<text class="summary-metric-unit"></text>
</view>
<text class="summary-metric-label">今日已抽</text>
</view>
</view>
@@ -543,21 +546,28 @@ onShareAppMessage(() => ({
}
.dashboard {
padding: 20rpx 28rpx 180rpx;
padding: 20rpx 20rpx 180rpx;
}
.summary-card {
background: #ffffff;
border-radius: 32rpx;
border: 1rpx solid #eef2f5;
padding: 30rpx 28rpx 26rpx;
margin-bottom: 24rpx;
background: rgba(255, 255, 255, 0.85);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
border-radius: 40rpx;
border: 2rpx solid rgba(255, 255, 255, 0.9);
padding: 40rpx 36rpx;
margin-bottom: 32rpx;
box-shadow: 0 24rpx 48rpx rgba(20, 184, 130, 0.05), inset 0 2rpx 8rpx rgba(255, 255, 255, 1);
position: relative;
overflow: hidden;
}
.summary-card-record {
background: linear-gradient(180deg, #dff7ee 0%, #ebfbf5 52%, #f5fdf9 100%);
border-color: rgba(88, 170, 139, 0.16);
box-shadow: 0 18rpx 42rpx rgba(83, 157, 128, 0.14);
background: linear-gradient(145deg, rgba(235, 251, 245, 0.9) 0%, rgba(255, 255, 255, 0.95) 100%);
border-color: rgba(20, 184, 130, 0.15);
box-shadow: 0 24rpx 56rpx rgba(20, 184, 130, 0.08), inset 0 2rpx 8rpx rgba(255, 255, 255, 1);
padding: 28rpx 24rpx;
border-radius: 32rpx;
}
.summary-card-top {
@@ -565,11 +575,12 @@ onShareAppMessage(() => ({
align-items: flex-start;
justify-content: space-between;
gap: 16rpx;
margin-bottom: 24rpx;
margin-bottom: 32rpx;
}
.summary-card-top-record {
align-items: center;
margin-bottom: 16rpx;
}
.record-header-more {
@@ -585,61 +596,64 @@ onShareAppMessage(() => ({
flex: 1;
display: flex;
align-items: flex-start;
gap: 14rpx;
gap: 16rpx;
}
.summary-title-accent {
width: 10rpx;
height: 42rpx;
height: 44rpx;
border-radius: 999rpx;
margin-top: 4rpx;
flex-shrink: 0;
background: linear-gradient(180deg, #6ee7be 0%, #2fc596 100%);
box-shadow: 0 4rpx 8rpx rgba(47, 197, 150, 0.3);
}
.summary-title {
display: block;
font-size: 30rpx;
font-weight: 700;
color: #222222;
font-size: 34rpx;
font-weight: 800;
color: #1a1a1a;
letter-spacing: 0.5rpx;
}
.summary-title-record {
color: #163c31;
color: #123329;
}
.summary-subtitle {
display: block;
margin-top: 8rpx;
margin-top: 10rpx;
font-size: 24rpx;
line-height: 1.5;
color: #8b8b8b;
color: #7b8a84;
}
.summary-subtitle-record {
margin-top: 6rpx;
margin-top: 8rpx;
color: #5b8d7a;
}
.summary-mode-badge {
padding: 10rpx 18rpx;
padding: 12rpx 20rpx;
border-radius: 999rpx;
flex-shrink: 0;
}
.summary-mode-badge-quit {
background: rgba(20,184,130,0.1);
background: rgba(20, 184, 130, 0.1);
border: 1px solid rgba(20, 184, 130, 0.15);
}
.summary-mode-badge-record {
background: rgba(255,255,255,0.62);
border: 1rpx solid rgba(77, 144, 119, 0.12);
background: rgba(255, 255, 255, 0.7);
border: 1rpx solid rgba(77, 144, 119, 0.2);
}
.summary-mode-text {
font-size: 22rpx;
font-weight: 600;
color: #5a5a5a;
font-weight: 700;
color: #14b882;
}
.summary-card-record .summary-mode-text {
@@ -661,45 +675,49 @@ onShareAppMessage(() => ({
.record-overview {
display: flex;
align-items: center;
gap: 22rpx;
margin-top: 18rpx;
gap: 18rpx;
margin-top: 8rpx;
}
.record-ring {
width: 216rpx;
height: 216rpx;
width: 188rpx;
height: 188rpx;
padding: 12rpx;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: inset 0 0 0 1rpx rgba(255,255,255,0.34);
box-shadow: inset 0 4rpx 12rpx rgba(0,0,0,0.03), 0 4rpx 12rpx rgba(255,255,255,0.8);
background: rgba(248, 255, 251, 0.4);
}
.record-ring-inner {
width: 100%;
height: 100%;
border-radius: 50%;
background: rgba(248,255,251,0.96);
background: rgba(255, 255, 255, 0.95);
box-shadow: 0 4rpx 16rpx rgba(20, 184, 130, 0.08);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 0 18rpx;
padding: 0 16rpx;
}
.record-ring-value {
font-size: 34rpx;
line-height: 1.1;
font-weight: 700;
color: #1f7b61;
line-height: 1.2;
font-weight: 800;
color: #14b882;
font-family: 'DIN Alternate', -apple-system, sans-serif;
}
.record-ring-label {
margin-top: 10rpx;
font-size: 22rpx;
margin-top: 8rpx;
font-size: 20rpx;
font-weight: 500;
color: #5c8274;
}
@@ -708,23 +726,17 @@ onShareAppMessage(() => ({
min-width: 0;
}
.record-group-title {
display: block;
font-size: 30rpx;
font-weight: 600;
color: #30463d;
margin-bottom: 16rpx;
}
.record-metric-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0;
border-radius: 24rpx;
border-radius: 28rpx;
overflow: hidden;
background: rgba(255,255,255,0.58);
border: 1rpx solid rgba(255,255,255,0.76);
box-shadow: inset 0 1rpx 0 rgba(255,255,255,0.82);
background: rgba(255, 255, 255, 0.6);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border: 1rpx solid rgba(255, 255, 255, 0.8);
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.02);
}
.record-metric-item {
@@ -733,8 +745,8 @@ onShareAppMessage(() => ({
align-items: center;
justify-content: center;
gap: 6rpx;
min-height: 128rpx;
padding: 22rpx 10rpx;
min-height: 108rpx;
padding: 18rpx 12rpx;
text-align: center;
position: relative;
}
@@ -743,17 +755,18 @@ onShareAppMessage(() => ({
content: '';
position: absolute;
left: 0;
top: 24rpx;
bottom: 24rpx;
width: 1rpx;
background: rgba(95, 142, 124, 0.16);
top: 28rpx;
bottom: 28rpx;
width: 2rpx;
background: rgba(20, 184, 130, 0.1);
}
.summary-metric-label {
display: block;
font-size: 23rpx;
color: #9aa0a6;
margin-top: 4rpx;
font-size: 24rpx;
font-weight: 500;
color: #8b9691;
margin-top: 0;
}
.record-metric-item .summary-metric-label {
@@ -769,14 +782,15 @@ onShareAppMessage(() => ({
}
.summary-metric-value {
font-size: 44rpx;
font-weight: 700;
color: #222222;
font-size: 48rpx;
font-weight: 800;
color: #1a1a1a;
line-height: 1;
font-family: 'DIN Alternate', -apple-system, sans-serif;
}
.record-metric-item .summary-metric-value {
color: #183d32;
color: #14b882;
}
.summary-metric-unit {
@@ -801,14 +815,18 @@ onShareAppMessage(() => ({
display: block;
margin-top: 12rpx;
font-size: 22rpx;
font-weight: 500;
line-height: 1.5;
color: #6f9487;
background: rgba(20, 184, 130, 0.05);
padding: 10rpx 14rpx;
border-radius: 16rpx;
}
.primary-row {
display: flex;
gap: 16rpx;
margin-bottom: 24rpx;
gap: 20rpx;
margin-bottom: 28rpx;
}
.primary-row-double {
@@ -818,73 +836,88 @@ onShareAppMessage(() => ({
.primary-pill {
flex: 1;
min-height: 118rpx;
padding: 24rpx 28rpx;
border-radius: 999rpx;
min-height: 120rpx;
padding: 24rpx 32rpx;
border-radius: 36rpx;
display: flex;
flex-direction: column;
justify-content: center;
background: #ffffff;
border: 1rpx solid #eef2f5;
background: rgba(255, 255, 255, 0.9);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border: 2rpx solid rgba(255, 255, 255, 1);
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.03);
transition: all 0.2s ease;
}
.primary-pill:active {
transform: scale(0.98);
}
.primary-pill-checkin {
background: linear-gradient(135deg, #14b882 0%, #0d9e6e 100%);
background: linear-gradient(135deg, #14b882 0%, #0ca674 100%);
border: none;
box-shadow: 0 16rpx 32rpx rgba(20, 184, 130, 0.25);
}
.primary-pill-done {
background: #ffffff;
border: 1rpx solid #eef2f5;
background: rgba(255, 255, 255, 0.8);
border: 2rpx solid rgba(255, 255, 255, 0.9);
box-shadow: none;
}
.primary-pill-smoke {
background: linear-gradient(135deg, #4f46e5 0%, #3730a3 100%);
border: none;
box-shadow: 0 16rpx 32rpx rgba(79, 70, 229, 0.25);
}
.primary-pill-resist {
background: linear-gradient(135deg, #14b882 0%, #0d9e6e 100%);
background: linear-gradient(135deg, #14b882 0%, #0ca674 100%);
border: none;
box-shadow: 0 16rpx 32rpx rgba(20, 184, 130, 0.25);
}
.record-action-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18rpx;
margin-top: 26rpx;
gap: 20rpx;
margin-top: 32rpx;
}
.record-action-row .primary-pill {
min-height: 84rpx;
padding: 0 18rpx;
min-height: 96rpx;
padding: 0 20rpx;
align-items: center;
text-align: center;
border-radius: 999rpx;
justify-content: center;
background: rgba(255,255,255,0.82);
border: 2rpx solid rgba(76, 145, 120, 0.12);
box-shadow: 0 8rpx 18rpx rgba(83, 157, 128, 0.08);
background: rgba(255, 255, 255, 0.85);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border: 2rpx solid rgba(255, 255, 255, 1);
box-shadow: 0 12rpx 28rpx rgba(83, 157, 128, 0.1);
}
.record-action-row .primary-pill-smoke {
background: linear-gradient(180deg, #fff2f0 0%, #ffe0da 100%);
border-color: rgba(223, 108, 88, 0.22);
background: linear-gradient(180deg, rgba(255, 242, 240, 0.9) 0%, rgba(255, 224, 218, 0.9) 100%);
border-color: rgba(255, 255, 255, 0.8);
}
.record-action-row .primary-pill-resist {
background: linear-gradient(180deg, rgba(255,255,255,0.68) 0%, rgba(241,255,248,0.92) 100%);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(241, 255, 248, 0.95) 100%);
}
.primary-pill-title {
display: block;
font-size: 30rpx;
font-weight: 700;
font-size: 32rpx;
font-weight: 800;
color: #ffffff;
}
.record-action-row .primary-pill-title {
font-size: 26rpx;
font-size: 28rpx;
font-weight: 700;
line-height: 1;
}
@@ -899,9 +932,10 @@ onShareAppMessage(() => ({
.primary-pill-desc {
display: block;
margin-top: 8rpx;
font-size: 22rpx;
font-size: 24rpx;
line-height: 1.5;
color: rgba(255,255,255,0.82);
color: rgba(255, 255, 255, 0.85);
font-weight: 500;
}
.primary-pill-done .primary-pill-title {
@@ -914,34 +948,109 @@ onShareAppMessage(() => ({
/* ===== 提示卡 ===== */
.tip-card {
padding: 28rpx 28rpx;
border-radius: 24rpx;
background: #ffffff;
border: 1rpx solid #F0F2F5;
box-shadow: none;
padding: 36rpx 32rpx;
border-radius: 36rpx;
background: rgba(255, 255, 255, 0.85);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
border: 2rpx solid rgba(255, 255, 255, 0.9);
box-shadow: 0 12rpx 32rpx rgba(20, 184, 130, 0.04);
position: relative;
overflow: hidden;
}
.tip-card::after {
content: '"';
position: absolute;
top: -10rpx;
right: 30rpx;
font-size: 140rpx;
color: rgba(20, 184, 130, 0.06);
font-family: Georgia, serif;
line-height: 1;
pointer-events: none;
}
.tip-title {
display: block;
display: inline-block;
padding: 6rpx 16rpx;
border-radius: 12rpx;
background: rgba(20, 184, 130, 0.1);
font-size: 22rpx;
font-weight: 700;
color: #14b882;
letter-spacing: 1rpx;
margin-bottom: 10rpx;
margin-bottom: 20rpx;
}
.tip-text {
display: block;
margin-top: 8rpx;
font-size: 26rpx;
color: #666666;
line-height: 1.7;
font-size: 28rpx;
font-weight: 600;
color: #333333;
line-height: 1.6;
}
.tip-extra {
display: block;
margin-top: 8rpx;
font-size: 22rpx;
margin-top: 12rpx;
font-size: 24rpx;
line-height: 1.5;
color: #9a9a9a;
color: #888888;
}
/* 补充缺失的戒烟模式统同样式 */
.summary-metrics {
display: flex;
flex-direction: column;
gap: 24rpx;
flex: 1;
}
.summary-metric {
display: flex;
flex-direction: column;
gap: 8rpx;
}
.summary-ring {
width: 180rpx;
height: 180rpx;
padding: 12rpx;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: inset 0 2rpx 8rpx rgba(0,0,0,0.02), 0 4rpx 12rpx rgba(255,255,255,0.8);
background: rgba(20, 184, 130, 0.05);
}
.summary-ring-inner {
width: 100%;
height: 100%;
border-radius: 50%;
background: #ffffff;
box-shadow: 0 4rpx 16rpx rgba(20, 184, 130, 0.08);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.summary-ring-value {
font-size: 32rpx;
line-height: 1.2;
font-weight: 800;
color: #14b882;
font-family: 'DIN Alternate', -apple-system, sans-serif;
}
.summary-ring-label {
margin-top: 6rpx;
font-size: 20rpx;
font-weight: 500;
color: #7b8a84;
}
</style>