Implement login functionality and UI updates across the application. Added silent login process in App.vue, updated styles for various components, and integrated smoke record dialog. Enhanced onboarding and profile pages with improved layouts and user experience. Updated manifest and configuration files for deployment. Added easycom configuration for component auto-import.

pages/onboarding/index.vue

@@ -41,7 +41,7 @@
 					<view
 						v-for="option in quitMotivationOptions"
 						:key="option"
-						class="option"
+						class="option option-tag"
 						:class="{ 'option-active': formData.quit_motivations.includes(option) }"
 						@tap="toggleMotivation(option)"
 					>
@@ -80,6 +80,7 @@
 							v-model="priceYuan"
 							class="price-field"
 							placeholder="0"
+							placeholder-style="color: #6B7280"
 						/>
 					</view>
 					<text class="input-unit">元/包</text>
@@ -87,20 +88,22 @@
 			</view>
 		</view>
 
-		<view class="footer safe-area-bottom">
-			<view v-if="step > 1" class="btn btn-secondary" @tap="prevStep">上一步</view>
-			<view class="btn btn-primary flex-1" @tap="nextStep">
-				{{ step === 5 ? '开始戒烟之旅' : '下一步' }}
+		<view class="footer">
+			<view v-if="step > 1" class="btn-secondary" @tap="prevStep">上一步</view>
+			<view class="btn-primary" :class="{ 'btn-full': step === 1 }" @tap="nextStep">
+				{{ step === 5 ? '开始戒烟之旅 🚀' : '下一步' }}
 			</view>
 		</view>
 	</view>
 </template>
 
 <script setup>
-import { ref, computed } from 'vue'
+import { ref, computed, onMounted } from 'vue'
 import { useProfileStore } from '@/stores/profile'
+import { useLogin } from '@/hooks/useLogin'
 
 const profileStore = useProfileStore()
+const { waitForLogin } = useLogin()
 
 const step = ref(1)
 const totalSteps = 5
@@ -187,24 +190,28 @@ async function nextStep() {
 		uni.showToast({ title: '保存失败', icon: 'none' })
 	}
 }
+
+onMounted(async () => {
+	await waitForLogin()
+})
 </script>
 
 <style scoped>
 .page {
 	min-height: 100vh;
-	background-color: var(--color-bg);
+	background-color: #0D1F17;
 	display: flex;
 	flex-direction: column;
 }
 
 .progress-bar {
 	height: 8rpx;
-	background-color: var(--color-bg-card);
+	background-color: #1A3325;
 }
 
 .progress-fill {
 	height: 100%;
-	background-color: var(--color-primary);
+	background-color: #4ADE80;
 	transition: width 0.3s ease;
 }
 
@@ -229,15 +236,17 @@ async function nextStep() {
 }
 
 .step-title {
-	font-size: 48rpx;
+	font-size: 44rpx;
 	font-weight: 700;
+	color: #FFFFFF;
 	display: block;
 	margin-bottom: 16rpx;
+	line-height: 1.3;
 }
 
 .step-desc {
 	font-size: 28rpx;
-	color: var(--color-text-secondary);
+	color: #9CA3AF;
 	display: block;
 	margin-bottom: 64rpx;
 }
@@ -259,24 +268,25 @@ async function nextStep() {
 	width: 96rpx;
 	height: 96rpx;
 	border-radius: 50%;
-	background-color: var(--color-bg-card);
+	background-color: #1A3325;
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	font-size: 48rpx;
-	color: var(--color-primary);
+	color: #4ADE80;
 }
 
 .input-value {
 	font-size: 96rpx;
 	font-weight: 700;
+	color: #FFFFFF;
 	min-width: 160rpx;
 	text-align: center;
 }
 
 .input-unit {
 	font-size: 28rpx;
-	color: var(--color-text-secondary);
+	color: #9CA3AF;
 }
 
 .options {
@@ -291,21 +301,23 @@ async function nextStep() {
 }
 
 .option {
-	padding: 24rpx 32rpx;
-	background-color: var(--color-bg-card);
+	padding: 28rpx 36rpx;
+	background-color: #1A3325;
 	border-radius: 16rpx;
 	font-size: 30rpx;
+	color: #FFFFFF;
 	border: 2rpx solid transparent;
 }
 
-.options-wrap .option {
-	flex: 0 0 auto;
+.option-tag {
+	padding: 20rpx 28rpx;
+	border-radius: 32rpx;
 }
 
 .option-active {
-	background-color: rgba(74, 222, 128, 0.1);
-	border-color: var(--color-primary);
-	color: var(--color-primary);
+	background-color: rgba(74, 222, 128, 0.15);
+	border-color: #4ADE80;
+	color: #4ADE80;
 }
 
 .time-row {
@@ -313,29 +325,28 @@ async function nextStep() {
 	gap: 32rpx;
 }
 
-.time-item {
-	flex: 1;
-}
+.time-item { flex: 1; }
 
 .time-label {
 	font-size: 26rpx;
-	color: var(--color-text-secondary);
+	color: #9CA3AF;
 	display: block;
 	margin-bottom: 12rpx;
 }
 
 .time-picker {
-	background-color: var(--color-bg-card);
+	background-color: #1A3325;
 	padding: 32rpx;
 	border-radius: 16rpx;
 	font-size: 40rpx;
+	color: #FFFFFF;
 	text-align: center;
 }
 
 .price-input {
 	display: flex;
 	align-items: center;
-	background-color: var(--color-bg-card);
+	background-color: #1A3325;
 	padding: 24rpx 32rpx;
 	border-radius: 16rpx;
 	gap: 8rpx;
@@ -343,12 +354,13 @@ async function nextStep() {
 
 .price-prefix {
 	font-size: 48rpx;
-	color: var(--color-text-secondary);
+	color: #9CA3AF;
 }
 
 .price-field {
 	font-size: 64rpx;
 	font-weight: 700;
+	color: #FFFFFF;
 	width: 200rpx;
 	text-align: center;
 }
@@ -357,6 +369,35 @@ async function nextStep() {
 	display: flex;
 	gap: 24rpx;
 	padding: 32rpx 48rpx;
-	background-color: var(--color-bg);
+	padding-bottom: 64rpx;
+	background-color: #0D1F17;
+}
+
+.btn-primary {
+	flex: 1;
+	height: 96rpx;
+	background-color: #4ADE80;
+	border-radius: 48rpx;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 32rpx;
+	font-weight: 500;
+	color: #0D1F17;
+}
+
+.btn-full { flex: 1; }
+
+.btn-secondary {
+	height: 96rpx;
+	padding: 0 48rpx;
+	background-color: #1A3325;
+	border-radius: 48rpx;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 32rpx;
+	color: #FFFFFF;
+	border: 2rpx solid #374151;
 }
 </style>