feat: refresh UI and add vite ci workflow

src/App.vue

@@ -0,0 +1,222 @@
+<script>
+import { 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 (!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>
+page {
+	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: 32rpx;
+	min-height: 100vh;
+	box-sizing: border-box;
+}
+
+.card {
+	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-light {
+	background: rgba(255, 255, 255, 0.62);
+}
+
+.text-primary {
+	color: #1AA37A;
+}
+
+.text-secondary {
+	color: #667085;
+}
+
+.text-muted {
+	color: #98A2B3;
+}
+
+.text-center {
+	text-align: center;
+}
+
+.text-bold {
+	font-weight: 600;
+}
+
+.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 {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	height: 96rpx;
+	border-radius: 999rpx;
+	font-size: 32rpx;
+	font-weight: 600;
+}
+
+.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 {
+	background: rgba(255, 255, 255, 0.82);
+	color: #111827;
+	border: 2rpx solid rgba(15, 23, 42, 0.08);
+}
+
+.btn-outline {
+	background-color: transparent;
+	color: #1AA37A;
+	border: 2rpx solid rgba(26, 163, 122, 0.32);
+}
+
+.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);
+}
+
+.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);
+}
+
+.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;
+}
+
+.safe-area-bottom {
+	padding-bottom: constant(safe-area-inset-bottom);
+	padding-bottom: env(safe-area-inset-bottom);
+}
+</style>