smt/src/App.vue

<script>
import { applyH5DebugSession, login, isLoggedIn } from '@/api/auth'

export default {
	globalData: {
		loginReady: false,
		loginPromise: null
	},

	onLaunch: function() {
		console.log('App Launch')
		this.globalData.loginPromise = this.initLogin()
	},

	onShow: function() {
		console.log('App Show')
	},

	onHide: function() {
		console.log('App Hide')
	},

	methods: {
		async initLogin() {
			try {
				if (applyH5DebugSession()) {
					console.log('H5 开发环境已注入默认调试 token')
				}
				if (!isLoggedIn()) {
					console.log('未登录，开始静默登录...')
					await login()
					console.log('静默登录成功')
				} else {
					console.log('已登录')
				}
				this.globalData.loginReady = true
				return true
			} catch (e) {
				console.error('静默登录失败:', e)
				this.globalData.loginReady = true
				return false
			}
		},

		waitForLogin() {
			return this.globalData.loginPromise
		}
	}
}
</script>

<style lang="scss">
page {
	background: $bg-page-gradient;
	color: $text-primary;
	font-family: $font-family-base;
	font-size: $font-lg;
	line-height: $line-height-normal;
}

// ---- 容器 ----
.container {
	padding: $spacing-xl;
	min-height: 100vh;
	box-sizing: border-box;
}

// ---- 统一卡片 ----
.card {
	@include card-base;
	margin-bottom: $spacing-lg;
}

.card-solid {
	@include card-solid;
	margin-bottom: $spacing-lg;
}

.card-glass {
	@include card-glass;
	margin-bottom: $spacing-lg;
}

.card-elevated {
	@include card-elevated;
	margin-bottom: $spacing-lg;
}

.card-subtle {
	@include card-subtle;
}

// ---- 文字工具类 ----
.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; }

// ---- Flex 工具类 ----
.flex { display: flex; }
.flex-center { @include flex-center; }
.flex-between { @include flex-between; }
.flex-col { @include flex-col; }
.flex-1 { flex: 1; }

// ---- 间距工具类 ----
.gap-sm { gap: $spacing-md; }
.gap-md { gap: $spacing-lg; }
.gap-lg { gap: $spacing-xl; }
.mt-sm { margin-top: $spacing-md; }
.mt-md { margin-top: $spacing-lg; }
.mt-lg { margin-top: $spacing-xl; }
.mb-sm { margin-bottom: $spacing-md; }
.mb-md { margin-bottom: $spacing-lg; }
.mb-lg { margin-bottom: $spacing-xl; }

// ---- 统一按钮 ----
.btn {
	@include btn-base;
	height: 96rpx;
	font-size: $font-2xl;
}

.btn-primary {
	@include btn-primary;
}

.btn-secondary {
	@include btn-secondary;
}

.btn-outline {
	@include btn-outline;
}

// ---- 统一标签 ----
.chip {
	@include chip;
}

.chip-primary {
	@include chip-primary;
}

.chip-muted {
	@include chip-muted;
}

.badge {
	@include badge;
}

// ---- 进度条 ----
.progress-bar {
	@include progress-bar;
}

.progress-fill {
	@include progress-fill;
}

.progress-fill-done {
	@include progress-fill;
	background: linear-gradient(90deg, $color-primary, $color-primary-light);
}

.progress-fill-pending {
	@include progress-fill;
	background: rgba($color-primary, 0.3);
}

// ---- 圆环 ----
.ring {
	@include ring;
}

.ring-inner {
	@include ring-inner;
	width: 82rpx;
	height: 82rpx;
}

.ring-value {
	font-size: $font-sm;
	font-weight: $font-weight-bold;
	color: $text-primary;
}

.ring-label {
	font-size: $font-xs;
	color: $text-muted;
}

// ---- 安全区域 ----
.safe-area-bottom {
	@include safe-area-bottom;
}

// ---- 底部占位 ----
.bottom-safe {
	height: calc(#{$spacing-xl} + env(safe-area-inset-bottom));
}

// ---- 骨架屏动画 ----
@keyframes shimmer {
	0% { background-position: -200% 0; }
	100% { background-position: 200% 0; }
}

@keyframes fabFloat {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-6rpx); }
}

// ---- 分割线 ----
.divider {
	height: 1px;
	background: $border-divider;
	margin: 0;
}
</style>