perf: 完善新用户引导

packages/app/src/components/SlotCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="slot-card" :class="{ 'slot-card--booked': timeSlot.isBookedByMe }">
+  <view class="slot-card" :class="{ 'slot-card--booked': timeSlot.isBookedByMe, 'slot-card--past': isPast && !timeSlot.isBookedByMe }">
     <!-- Booked accent bar -->
     <view v-if="timeSlot.isBookedByMe" class="booked-bar" />
 
@@ -27,8 +27,14 @@
 
       <!-- Right: Action -->
       <view class="slot-action">
+        <template v-if="isPast && !timeSlot.isBookedByMe">
+          <view class="badge-expired">
+            <text class="badge-expired-text">已过期</text>
+          </view>
+        </template>
+
         <!-- OPEN + not booked -->
-        <template v-if="timeSlot.status === TimeSlotStatus.OPEN && !timeSlot.isBookedByMe">
+        <template v-else-if="timeSlot.status === TimeSlotStatus.OPEN && !timeSlot.isBookedByMe">
           <view class="btn btn-book" @tap.stop="emit('book', timeSlot)">
             <text class="btn-text">预约</text>
           </view>
@@ -68,6 +74,7 @@
 import type { TimeSlotWithBookingStatus } from '@mp-pilates/shared'
 import { TimeSlotStatus } from '@mp-pilates/shared'
 import { computed } from 'vue'
+import { isSlotPast } from '../utils/format'
 
 interface Props {
   timeSlot: TimeSlotWithBookingStatus
@@ -100,6 +107,8 @@ const capacityClass = computed(() => {
   if (bookedCount >= capacity * 0.8) return 'cap-almost'
   return 'cap-open'
 })
+
+const isPast = computed(() => isSlotPast(props.timeSlot.date, props.timeSlot.startTime))
 </script>
 
 <style lang="scss" scoped>
@@ -119,6 +128,19 @@ const capacityClass = computed(() => {
     background: #f0f7fb;
     box-shadow: 0 4rpx 24rpx rgba($primary-dark, 0.12);
   }
+
+  &--past {
+    background: #f8f8f8;
+    opacity: 0.7;
+
+    .slot-start {
+      color: #bbb;
+    }
+
+    .slot-title {
+      color: #bbb;
+    }
+  }
 }
 
 .booked-bar {
@@ -308,6 +330,22 @@ const capacityClass = computed(() => {
   }
 }
 
+.badge-expired {
+  height: 52rpx;
+  padding: 0 24rpx;
+  background: #f0f0f0;
+  border-radius: 26rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .badge-expired-text {
+    font-size: 24rpx;
+    color: #999;
+    font-weight: 600;
+  }
+}
+
 .btn-cancel {
   padding: 4rpx 8rpx;
   display: flex;