From 168968f073787c24a4ee6e28978a37cb58af8cbb Mon Sep 17 00:00:00 2001
From: richarjiang <richarjiang@tencent.com>
Date: Mon, 6 Apr 2026 17:12:53 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=B0=86=E8=AF=BE=E7=A8=8B=E9=A2=84?=
 =?UTF-8?q?=E7=BA=A6=E5=8D=A1=E7=89=87=E6=94=B9=E9=80=A0=E4=B8=BA=E7=94=B5?=
 =?UTF-8?q?=E5=BD=B1=E7=A5=A8=E9=A3=8E=E6=A0=BC=E8=AE=BE=E8=AE=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

### 改动内容

#### 1. SlotCard 组件完全重新设计
- **新增票据风格装饰**：左右两侧添加圆角凹陷（打孔效果）
- **三栏布局**：
  - 左：时间（开始时间大号、分割线、结束时间小号）
  - 中：课程名称、时长、剩余名额 + 虚线分割符
  - 右：操作按钮或状态徽章
- **日期展示**：卡片上方显示完整日期 (YYYY-MM-DD)
- **状态指示器**：
  - 绿色：有空位
  - 橙色：接近满额（80% 以上）
  - 红色：已满
  - 灰色：已关闭/已过期
- **响应式样式**：根据预约、满额、已过期等状态自动调整背景颜色和透明度

#### 2. 预约页面 (booking/index.vue) 样式调整
- 移除卡片列表的间距（`gap: 20rpx` → `padding: 24rpx 0 0`）
- 更新日期摘要的内边距（`0 8rpx 4rpx` → `0 24rpx 16rpx`）
- 调整加载骨架屏的尺寸和间距
- 优化预加载动画匹配新卡片设计

### 设计特点
✨ 票据风格的视觉设计
🎯 改进的信息层级和易读性
🎨 精细的状态指示和颜色编码
📱 保持响应式和易用性

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 packages/app/src/components/SlotCard.vue | 552 +++++++++++++----------
 packages/app/src/pages/booking/index.vue |  23 +-
 2 files changed, 327 insertions(+), 248 deletions(-)

diff --git a/packages/app/src/components/SlotCard.vue b/packages/app/src/components/SlotCard.vue
index a4ac292..34ded69 100644
--- a/packages/app/src/components/SlotCard.vue
+++ b/packages/app/src/components/SlotCard.vue
@@ -1,70 +1,95 @@
 <template>
-  <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" />
+  <view class="slot-card-wrapper">
+    <!-- Date display above card -->
+    <view class="slot-date">
+      {{ timeSlot.date }}
+    </view>
 
-    <view class="slot-main">
-      <!-- Left: Time column -->
-      <view class="slot-time-col">
-        <text class="slot-start">{{ timeSlot.startTime.slice(0, 5) }}</text>
-        <view class="time-divider" />
-        <text class="slot-end">{{ timeSlot.endTime.slice(0, 5) }}</text>
+    <view class="slot-card" :class="[
+      { 'slot-card--booked': timeSlot.isBookedByMe },
+      { 'slot-card--past': isPast && !timeSlot.isBookedByMe },
+      { 'slot-card--full': timeSlot.status === TimeSlotStatus.FULL },
+      `status-${statusClass}`
+    ]">
+      <!-- Decorative left curves (ticket style) -->
+      <view class="curve curve-left">
+        <view class="curve-inner curve-top" />
+        <view class="curve-inner curve-bottom" />
       </view>
 
-      <!-- Center: Info -->
-      <view class="slot-info">
-        <view class="slot-title-row">
-          <text class="slot-title">普拉提私教</text>
-          <text class="slot-duration">{{ durationMin }}分钟</text>
+      <!-- Main content -->
+      <view class="slot-content">
+        <!-- Left: Time column -->
+        <view class="time-section">
+          <text class="start-time">{{ timeSlot.startTime.slice(0, 5) }}</text>
+          <view class="time-divider" />
+          <text class="end-time">{{ timeSlot.endTime.slice(0, 5) }}</text>
         </view>
-        <view class="slot-meta">
-          <view class="slot-capacity" :class="capacityClass">
-            <text class="capacity-dot" />
-            <text class="capacity-text">{{ capacityLabel }}</text>
+
+        <!-- Center divider with dashes -->
+        <view class="divider-dashes" />
+
+        <!-- Center: Course info -->
+        <view class="course-section">
+          <text class="course-name">普拉提私教</text>
+          <view class="course-meta">
+            <text class="course-duration">{{ durationMin }}分钟</text>
+            <text class="meta-separator">•</text>
+            <view class="course-capacity" :class="capacityClass">
+              <text class="capacity-text">{{ capacityLabel }}</text>
+            </view>
           </view>
         </view>
+
+        <!-- Center divider with dashes -->
+        <view class="divider-dashes" />
+
+        <!-- Right: Action section -->
+        <view class="action-section">
+          <!-- Expired badge -->
+          <template v-if="isPast && !timeSlot.isBookedByMe">
+            <view class="action-badge badge-expired">
+              <text>已过期</text>
+            </view>
+          </template>
+
+          <!-- OPEN + not booked: Book button -->
+          <template v-else-if="timeSlot.status === TimeSlotStatus.OPEN && !timeSlot.isBookedByMe">
+            <view class="action-button btn-book" @tap.stop="emit('book', timeSlot)">
+              <text>预约</text>
+            </view>
+          </template>
+
+          <!-- OPEN + booked by me: Cancel link -->
+          <template v-else-if="timeSlot.status === TimeSlotStatus.OPEN && timeSlot.isBookedByMe">
+            <view class="action-badge badge-booked">
+              <text>已预约</text>
+            </view>
+            <view class="action-cancel" @tap.stop="emit('cancel', timeSlot)">
+              <text>取消</text>
+            </view>
+          </template>
+
+          <!-- FULL: Full badge -->
+          <template v-else-if="timeSlot.status === TimeSlotStatus.FULL">
+            <view class="action-badge badge-full">
+              <text>已约满</text>
+            </view>
+          </template>
+
+          <!-- CLOSED: Closed badge -->
+          <template v-else>
+            <view class="action-badge badge-closed">
+              <text>已关闭</text>
+            </view>
+          </template>
+        </view>
       </view>
 
-      <!-- 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-else-if="timeSlot.status === TimeSlotStatus.OPEN && !timeSlot.isBookedByMe">
-          <view class="btn btn-book" @tap.stop="emit('book', timeSlot)">
-            <text class="btn-text">预约</text>
-          </view>
-        </template>
-
-        <!-- OPEN + booked by me -->
-        <template v-else-if="timeSlot.status === TimeSlotStatus.OPEN && timeSlot.isBookedByMe">
-          <view class="booked-badge-col">
-            <view class="badge-booked">
-              <text class="badge-text">已预约</text>
-            </view>
-            <view class="btn-cancel" @tap.stop="emit('cancel', timeSlot)">
-              <text class="btn-cancel-text">取消预约</text>
-            </view>
-          </view>
-        </template>
-
-        <!-- FULL -->
-        <template v-else-if="timeSlot.status === TimeSlotStatus.FULL">
-          <view class="btn btn-full">
-            <text class="btn-text">已约满</text>
-          </view>
-        </template>
-
-        <!-- CLOSED -->
-        <template v-else>
-          <view class="btn btn-closed">
-            <text class="btn-text">已关闭</text>
-          </view>
-        </template>
+      <!-- Decorative right curves (ticket style) -->
+      <view class="curve curve-right">
+        <view class="curve-inner curve-top" />
+        <view class="curve-inner curve-bottom" />
       </view>
     </view>
   </view>
@@ -108,253 +133,308 @@ const capacityClass = computed(() => {
   return 'cap-open'
 })
 
+const statusClass = computed(() => {
+  if (isPast.value && !props.timeSlot.isBookedByMe) return 'expired'
+  if (props.timeSlot.isBookedByMe) return 'booked'
+  if (props.timeSlot.status === TimeSlotStatus.FULL) return 'full'
+  if (props.timeSlot.status === TimeSlotStatus.CLOSED) return 'closed'
+  return 'open'
+})
+
 const isPast = computed(() => isSlotPast(props.timeSlot.date, props.timeSlot.startTime))
 </script>
 
 <style lang="scss" scoped>
+.slot-card-wrapper {
+  padding: 0 24rpx 24rpx;
+  display: flex;
+  flex-direction: column;
+  gap: 8rpx;
+}
+
+.slot-date {
+  font-size: 24rpx;
+  color: #999;
+  padding: 0 12rpx;
+  font-weight: 500;
+}
+
+/* ─── Main Card ─── */
 .slot-card {
-  background: #fff;
-  border-radius: 24rpx;
-  overflow: hidden;
-  box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.05);
   position: relative;
-  transition: transform 0.15s, box-shadow 0.15s;
+  display: flex;
+  align-items: center;
+  background: #fff;
+  border-radius: 20rpx;
+  overflow: hidden;
+  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
+  transition: all 0.2s ease;
+  min-height: 140rpx;
+  padding: 0;
 
   &:active {
-    transform: scale(0.985);
+    transform: scale(0.98);
+    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
   }
 
-  &--booked {
-    background: #f0f7fb;
-    box-shadow: 0 4rpx 24rpx rgba($primary-dark, 0.12);
+  /* Status variants */
+  &.status-open {
+    background: linear-gradient(135deg, #fff 0%, #fafaf8 100%);
   }
 
-  &--past {
-    background: #f8f8f8;
+  &.status-booked {
+    background: linear-gradient(135deg, #f0f7fb 0%, #f5fbff 100%);
+    box-shadow: 0 4rpx 20rpx rgba(66, 133, 244, 0.1);
+  }
+
+  &.status-full,
+  &.status-closed {
+    background: #fafaf8;
+    opacity: 0.85;
+  }
+
+  &.status-expired {
+    background: #f8f8f6;
     opacity: 0.7;
-
-    .slot-start {
-      color: #bbb;
-    }
-
-    .slot-title {
-      color: #bbb;
-    }
   }
 }
 
-.booked-bar {
+/* ─── Decorative curves (ticket punch holes) ─── */
+.curve {
   position: absolute;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  width: 8rpx;
-  background: linear-gradient(180deg, $primary-color, $primary-dark);
-  border-radius: 24rpx 0 0 24rpx;
-}
-
-.slot-main {
+  width: 48rpx;
+  height: 140rpx;
   display: flex;
-  flex-direction: row;
-  align-items: center;
-  padding: 32rpx 28rpx 32rpx 36rpx;
-  gap: 24rpx;
+  flex-direction: column;
+  justify-content: space-between;
+  pointer-events: none;
+
+  &.curve-left {
+    left: -24rpx;
+  }
+
+  &.curve-right {
+    right: -24rpx;
+  }
 }
 
-/* ── Time column ─── */
-.slot-time-col {
+.curve-inner {
+  width: 48rpx;
+  height: 48rpx;
+  background: #FAF8F5; /* Match page background */
+  border-radius: 0 48rpx 48rpx 0;
+
+  .curve-right & {
+    border-radius: 48rpx 0 0 48rpx;
+  }
+}
+
+/* ─── Main content flex layout ─── */
+.slot-content {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 28rpx 48rpx;
+  gap: 0;
+}
+
+/* ─── Time Section ─── */
+.time-section {
   display: flex;
   flex-direction: column;
   align-items: center;
-  min-width: 80rpx;
+  min-width: 90rpx;
   flex-shrink: 0;
+  gap: 8rpx;
 }
 
-.slot-start {
-  font-size: 34rpx;
+.start-time {
+  font-size: 38rpx;
+  font-weight: 700;
+  color: #1a1a1a;
+  line-height: 1;
+}
+
+.end-time {
+  font-size: 26rpx;
+  font-weight: 500;
+  color: #999;
+  line-height: 1;
+}
+
+.time-divider {
+  width: 2rpx;
+  height: 20rpx;
+  background: #e0dcd6;
+  border-radius: 1rpx;
+  margin: 4rpx 0;
+}
+
+/* ─── Dashed dividers ─── */
+.divider-dashes {
+  flex: 0 0 auto;
+  width: 2rpx;
+  height: 80rpx;
+  background: repeating-linear-gradient(
+    to bottom,
+    #e0dcd6 0,
+    #e0dcd6 8rpx,
+    transparent 8rpx,
+    transparent 16rpx
+  );
+  margin: 0 20rpx;
+  opacity: 0.6;
+}
+
+/* ─── Course Section (center) ─── */
+.course-section {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  align-items: center;
+  gap: 8rpx;
+  min-width: 120rpx;
+}
+
+.course-name {
+  font-size: 32rpx;
   font-weight: 700;
   color: #1a1a1a;
   line-height: 1.2;
 }
 
-.time-divider {
-  width: 2rpx;
-  height: 16rpx;
-  background: #e0dcd6;
-  margin: 6rpx 0;
-  border-radius: 1rpx;
-}
-
-.slot-end {
-  font-size: 24rpx;
-  font-weight: 500;
-  color: #999;
-  line-height: 1.2;
-}
-
-/* ── Info ─── */
-.slot-info {
-  flex: 1;
+.course-meta {
   display: flex;
-  flex-direction: column;
+  align-items: center;
   gap: 10rpx;
-  min-width: 0;
-}
-
-.slot-title-row {
-  display: flex;
-  flex-direction: row;
-  align-items: baseline;
-  gap: 12rpx;
-}
-
-.slot-title {
-  font-size: 30rpx;
-  font-weight: 600;
-  color: #1a1a1a;
-}
-
-.slot-duration {
   font-size: 22rpx;
-  color: #bbb;
-  font-weight: 400;
+  color: #999;
 }
 
-.slot-meta {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 12rpx;
+.course-duration {
+  font-weight: 500;
 }
 
-.slot-capacity {
-  display: inline-flex;
-  align-items: center;
-  gap: 8rpx;
+.meta-separator {
+  color: #ddd;
+}
 
-  .capacity-dot {
-    width: 10rpx;
-    height: 10rpx;
-    border-radius: 50%;
-  }
-
-  .capacity-text {
-    font-size: 22rpx;
-    font-weight: 500;
-  }
+.course-capacity {
+  font-weight: 600;
+  padding: 4rpx 8rpx;
+  border-radius: 4rpx;
 
   &.cap-open {
-    .capacity-dot { background: #4caf50; }
-    .capacity-text { color: #4caf50; }
-  }
+    color: #4caf50;
+    background: rgba(76, 175, 80, 0.08);
 
-  &.cap-almost {
-    .capacity-dot { background: #f59e0b; }
-    .capacity-text { color: #f59e0b; }
-  }
-
-  &.cap-full {
-    .capacity-dot { background: #ef4444; }
-    .capacity-text { color: #ef4444; }
-  }
-
-  &.cap-closed {
-    .capacity-dot { background: #ccc; }
-    .capacity-text { color: #999; }
-  }
-}
-
-/* ── Action ─── */
-.slot-action {
-  flex-shrink: 0;
-}
-
-.btn {
-  min-width: 140rpx;
-  height: 72rpx;
-  border-radius: 36rpx;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0 32rpx;
-
-  .btn-text {
-    font-size: 26rpx;
-    font-weight: 600;
-  }
-
-  &.btn-book {
-    background: linear-gradient(135deg, $primary-color, $primary-dark);
-    box-shadow: 0 4rpx 16rpx rgba($primary-dark, 0.3);
-
-    .btn-text { color: #fff; }
-
-    &:active {
-      opacity: 0.85;
+    .capacity-text {
+      color: #4caf50;
     }
   }
 
-  &.btn-full {
-    background: #fef0f0;
+  &.cap-almost {
+    color: #f59e0b;
+    background: rgba(245, 158, 11, 0.08);
 
-    .btn-text { color: #ef4444; }
+    .capacity-text {
+      color: #f59e0b;
+    }
   }
 
-  &.btn-closed {
-    background: #f5f5f5;
+  &.cap-full {
+    color: #ef4444;
+    background: rgba(239, 68, 68, 0.08);
 
-    .btn-text { color: #bbb; }
+    .capacity-text {
+      color: #ef4444;
+    }
+  }
+
+  &.cap-closed {
+    color: #999;
+    background: rgba(0, 0, 0, 0.04);
+
+    .capacity-text {
+      color: #999;
+    }
   }
 }
 
-.booked-badge-col {
+.capacity-text {
+  font-weight: 600;
+}
+
+/* ─── Action Section (right) ─── */
+.action-section {
   display: flex;
   flex-direction: column;
   align-items: center;
+  min-width: 100rpx;
+  flex-shrink: 0;
   gap: 8rpx;
 }
 
-.badge-booked {
-  height: 52rpx;
-  padding: 0 24rpx;
-  background: linear-gradient(135deg, $primary-selected-bg, $primary-border);
-  border-radius: 26rpx;
+.action-button,
+.action-badge {
+  padding: 10rpx 20rpx;
+  border-radius: 20rpx;
   display: flex;
   align-items: center;
   justify-content: center;
+  font-size: 26rpx;
+  font-weight: 600;
+  white-space: nowrap;
+}
 
-  .badge-text {
-    font-size: 24rpx;
-    color: $primary-dark;
-    font-weight: 600;
+.action-button {
+  min-width: 120rpx;
+  height: 60rpx;
+  transition: all 0.15s;
+
+  &:active {
+    opacity: 0.85;
   }
 }
 
+.btn-book {
+  background: linear-gradient(135deg, $primary-color 0%, $primary-dark 100%);
+  color: #fff;
+  box-shadow: 0 4rpx 12rpx rgba($primary-dark, 0.25);
+}
+
+.action-badge {
+  padding: 8rpx 16rpx;
+  font-size: 24rpx;
+  white-space: nowrap;
+}
+
+.badge-booked {
+  background: linear-gradient(135deg, $primary-selected-bg, $primary-border);
+  color: $primary-dark;
+}
+
 .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;
-  }
+  color: #999;
 }
 
-.btn-cancel {
-  padding: 4rpx 8rpx;
-  display: flex;
-  align-items: center;
+.badge-full {
+  background: rgba(239, 68, 68, 0.1);
+  color: #ef4444;
+}
 
-  .btn-cancel-text {
-    font-size: 22rpx;
-    color: #ef4444;
-    font-weight: 400;
-  }
+.badge-closed {
+  background: #f0f0f0;
+  color: #bbb;
+}
+
+.action-cancel {
+  padding: 4rpx 12rpx;
+  font-size: 22rpx;
+  color: #ef4444;
+  font-weight: 500;
+  text-decoration: underline;
+  text-decoration-color: rgba(239, 68, 68, 0.3);
 }
 </style>
diff --git a/packages/app/src/pages/booking/index.vue b/packages/app/src/pages/booking/index.vue
index 8521d05..6af4f6d 100644
--- a/packages/app/src/pages/booking/index.vue
+++ b/packages/app/src/pages/booking/index.vue
@@ -329,13 +329,12 @@ onMounted(async () => {
 .slot-list {
   display: flex;
   flex-direction: column;
-  gap: 20rpx;
-  padding: 24rpx 24rpx 0;
+  padding: 24rpx 0 0;
 }
 
 /* ── Date summary ──────────────────────────────────── */
 .date-summary {
-  padding: 0 8rpx 4rpx;
+  padding: 0 24rpx 16rpx;
 }
 
 .date-summary-text {
@@ -348,25 +347,25 @@ onMounted(async () => {
 .loading-wrap {
   display: flex;
   flex-direction: column;
-  gap: 20rpx;
+  gap: 24rpx;
   padding: 28rpx 24rpx;
 }
 
 .skeleton-card {
   height: 140rpx;
-  border-radius: 24rpx;
+  border-radius: 20rpx;
   background: #fff;
   display: flex;
   flex-direction: row;
   align-items: center;
-  padding: 32rpx 28rpx 32rpx 36rpx;
-  gap: 24rpx;
+  padding: 28rpx 48rpx;
+  gap: 20rpx;
   box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.03);
 }
 
 .skeleton-time {
-  width: 80rpx;
-  height: 72rpx;
+  width: 90rpx;
+  height: 80rpx;
   border-radius: 12rpx;
   background: linear-gradient(90deg, $primary-border 25%, $primary-light 50%, $primary-border 75%);
   background-size: 400% 100%;
@@ -400,9 +399,9 @@ onMounted(async () => {
 }
 
 .skeleton-btn {
-  width: 140rpx;
-  height: 72rpx;
-  border-radius: 36rpx;
+  width: 100rpx;
+  height: 60rpx;
+  border-radius: 20rpx;
   background: linear-gradient(90deg, $primary-border 25%, $primary-light 50%, $primary-border 75%);
   background-size: 400% 100%;
   animation: shimmer 1.4s infinite;