From 219a6f6231fac3b2fb8fd5961669392b3a6ce630 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BD=A0=C3=A7=C2=9Anepiedg?= <你的yunchuansong@163.com>
Date: Thu, 19 Mar 2026 15:41:26 +0800
Subject: [PATCH] feat: update auth flow and homepage behavior

---
 src/App.vue               |   5 +-
 src/api/auth.js           |  13 ++
 src/config/index.js       |  14 +-
 src/pages/index/index.vue | 323 +++++++++++++++++++++++++-------------
 vite.config.js            |   8 +
 5 files changed, 253 insertions(+), 110 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index ce92af3..db505f6 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -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()
diff --git a/src/api/auth.js b/src/api/auth.js
index 217db27..0c6608b 100644
--- a/src/api/auth.js
+++ b/src/api/auth.js
@@ -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({
diff --git a/src/config/index.js b/src/config/index.js
index 9a5c1ba..406c6f1 100644
--- a/src/config/index.js
+++ b/src/config/index.js
@@ -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
diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue
index 797e912..62e7cec 100644
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@@ -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>
diff --git a/vite.config.js b/vite.config.js
index a201060..f89dada 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -4,6 +4,14 @@ import { defineConfig } from 'vite'
 import Uni from '@uni-helper/plugin-uni'
 
 export default defineConfig({
+  server: {
+    proxy: {
+      '/api/v1': {
+        target: 'http://localhost:8080',
+        changeOrigin: true
+      }
+    }
+  },
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url))