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/DateSelector.vue

@@ -0,0 +1,126 @@
+<template>
+  <view class="date-selector">
+    <scroll-view class="scroll" scroll-x enhanced :show-scrollbar="false">
+      <view class="track">
+        <view
+          v-for="item in dateRange"
+          :key="item.date"
+          class="date-item"
+          :class="{ active: item.date === modelValue, today: item.isToday }"
+          @tap="handleSelect(item.date)"
+        >
+          <text class="weekday">{{ item.isToday ? '今天' : item.weekday }}</text>
+          <text class="day">{{ getDayNumber(item.date) }}</text>
+          <text class="month">{{ getMonthNumber(item.date) }}月</text>
+        </view>
+      </view>
+    </scroll-view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { DATE_SELECTOR_DAYS } from '@mp-pilates/shared'
+import { getDateRange } from '../utils/format'
+
+interface Props {
+  modelValue: string
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<{
+  select: [date: string]
+  'update:modelValue': [date: string]
+}>()
+
+const dateRange = computed(() => getDateRange(DATE_SELECTOR_DAYS))
+
+function getDayNumber(date: string): string {
+  return String(parseInt(date.split('-')[2], 10))
+}
+
+function getMonthNumber(date: string): string {
+  return String(parseInt(date.split('-')[1], 10))
+}
+
+function handleSelect(date: string) {
+  emit('update:modelValue', date)
+  emit('select', date)
+}
+</script>
+
+<style lang="scss" scoped>
+.date-selector {
+  background: #fff;
+  padding: 16rpx 0 20rpx;
+  border-bottom: 1rpx solid #f0ece8;
+
+  .scroll {
+    width: 100%;
+    white-space: nowrap;
+  }
+
+  .track {
+    display: inline-flex;
+    flex-direction: row;
+    padding: 0 24rpx;
+    gap: 16rpx;
+  }
+
+  .date-item {
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    min-width: 88rpx;
+    padding: 16rpx 12rpx;
+    border-radius: 16rpx;
+    background: #f7f4f0;
+    gap: 4rpx;
+    transition: background 0.2s;
+    flex-shrink: 0;
+
+    .weekday {
+      font-size: 22rpx;
+      color: #999;
+      line-height: 1.3;
+    }
+
+    .day {
+      font-size: 40rpx;
+      font-weight: 700;
+      color: #333;
+      line-height: 1.2;
+    }
+
+    .month {
+      font-size: 20rpx;
+      color: #bbb;
+      line-height: 1.3;
+    }
+
+    &.active {
+      background: #c9a87c;
+
+      .weekday {
+        color: rgba(255, 255, 255, 0.85);
+      }
+
+      .day {
+        color: #fff;
+      }
+
+      .month {
+        color: rgba(255, 255, 255, 0.7);
+      }
+    }
+
+    &.today:not(.active) {
+      .weekday {
+        color: #c9a87c;
+        font-weight: 600;
+      }
+    }
+  }
+}
+</style>