feat(app): implement home, booking, and profile pages

Home: brand banner, studio info swiper, smart quick entries based on
membership status, upcoming bookings, card shop horizontal scroll
Booking: 7-day date selector, time period filter, slot cards with
status, booking confirm popup with membership picker
Profile: user card with login, training stats, menu with admin entry
8 reusable components: BrandBanner, StudioInfo, QuickEntry,
UpcomingBooking, CardShop, DateSelector, SlotCard, BookingConfirmPopup,
TimePeriodFilter, UserCard, TrainingStats, ProfileMenu

packages/app/src/components/TrainingStats.vue

@@ -0,0 +1,84 @@
+<template>
+  <view class="training-stats">
+    <view class="training-stats__item">
+      <text class="training-stats__value">{{ stats?.monthBookings ?? 0 }}</text>
+      <text class="training-stats__unit">次</text>
+      <text class="training-stats__label">本月训练</text>
+    </view>
+
+    <view class="training-stats__divider" />
+
+    <view class="training-stats__item">
+      <text class="training-stats__value">{{ stats?.monthDays ?? 0 }}</text>
+      <text class="training-stats__unit">天</text>
+      <text class="training-stats__label">训练天数</text>
+    </view>
+
+    <view class="training-stats__divider" />
+
+    <view class="training-stats__item">
+      <text class="training-stats__value">{{ stats?.monthHours ?? 0 }}</text>
+      <text class="training-stats__unit">小时</text>
+      <text class="training-stats__label">训练时长</text>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import type { UserStatsResponse } from '@mp-pilates/shared'
+
+defineProps<{
+  stats: UserStatsResponse | null
+}>()
+</script>
+
+<style lang="scss" scoped>
+.training-stats {
+  display: flex;
+  align-items: stretch;
+  background: $bg-card;
+  border-radius: $radius-lg;
+  margin: 0 $spacing-lg;
+  padding: $spacing-md 0;
+  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
+
+  // Pull card up to overlap the dark header
+  margin-top: -$spacing-xl;
+  position: relative;
+  z-index: 1;
+
+  &__item {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: $spacing-sm 0;
+  }
+
+  &__divider {
+    width: 1rpx;
+    background: $border-color;
+    margin: $spacing-xs 0;
+  }
+
+  &__value {
+    font-size: 48rpx;
+    font-weight: 700;
+    color: $brand-color;
+    line-height: 1;
+  }
+
+  &__unit {
+    font-size: 22rpx;
+    color: $text-secondary;
+    margin-top: 4rpx;
+  }
+
+  &__label {
+    font-size: 24rpx;
+    color: $text-hint;
+    margin-top: $spacing-xs;
+  }
+}
+</style>