@ebiz/designer-components 0.1.0 → 0.1.1

package/src/components/EbizMobileMeetingRoomSelector.vue

@@ -1,728 +1,728 @@
-<template>
-  <div class="ebiz-mobile-meeting-room-selector">
-    <!-- 头部区域 -->
-    <div class="selector-header">
-      <slot name="header">
-        <div class="header-content">
-          <h3 class="title">📅 会议室预约</h3>
-          <div class="date-selector">
-            <t-date-picker
-              v-model="currentDate"
-              :disabled="disabled"
-              :min-date="new Date()"
-              format="YYYY-MM-DD"
-              placeholder="选择日期"
-              @change="handleDateChange"
-            />
-          </div>
-        </div>
-      </slot>
-    </div>
-
-    <!-- 加载状态 -->
-    <div v-if="loading" class="loading-container">
-      <t-loading size="large" text="加载中..." />
-    </div>
-
-    <!-- 主要内容区域 -->
-    <div v-else class="selector-content">
-      <!-- 会议室列表 -->
-      <div class="rooms-list">
-        <div
-          v-for="room in roomList"
-          :key="room.id"
-          class="room-card"
-          :class="{ 'selected': selectedRoom?.id === room.id }"
-          @click="handleRoomSelect(room)"
-        >
-          <!-- 会议室信息 -->
-          <div class="room-info">
-            <slot name="room-info" :room="room">
-              <div class="room-header">
-                <h4 class="room-name">🏢 {{ room.name }}</h4>
-                <div class="room-status" :class="getRoomStatusClass(room)">
-                  {{ getRoomStatusText(room) }}
-                </div>
-              </div>
-              <div class="room-details">
-                <div class="detail-item">
-                  <span class="icon">👥</span>
-                  <span>{{ room.capacity }}人</span>
-                </div>
-                <div class="detail-item">
-                  <span class="icon">📍</span>
-                  <span>{{ room.location }}</span>
-                </div>
-              </div>
-              <div v-if="room.equipment?.length" class="equipment">
-                <t-tag
-                  v-for="item in room.equipment"
-                  :key="item"
-                  size="small"
-                  variant="light"
-                  class="equipment-tag"
-                >
-                  {{ item }}
-                </t-tag>
-              </div>
-            </slot>
-          </div>
-
-          <!-- 时间段选择区域 -->
-          <div v-if="selectedRoom?.id === room.id" class="time-selection">
-            <div class="time-header">
-              <h5>⏰ 选择时间段</h5>
-              <div class="time-info">
-                <span v-if="selectedTimeSlots.length > 0" class="selected-info">
-                  已选 {{ selectedTimeSlots.length * 0.5 }}小时
-                </span>
-              </div>
-            </div>
-            
-            <!-- 时间段网格 -->
-            <div class="time-slots-grid">
-              <div
-                v-for="slot in timeSlotList"
-                :key="slot.value"
-                class="time-slot"
-                :class="{
-                  'booked': isSlotBooked(room.id, slot.value),
-                  'selected': isSlotSelected(room.id, slot.value),
-                  'disabled': disabled || isSlotDisabled(room.id, slot.value)
-                }"
-                @click="handleTimeSlotClick(room, slot)"
-              >
-                <slot name="time-slot" :room="room" :slot="slot" :is-booked="isSlotBooked(room.id, slot.value)">
-                  <div class="slot-content">
-                    <div class="slot-time">{{ slot.label }}</div>
-                    <div class="slot-status">
-                      <span v-if="isSlotBooked(room.id, slot.value)" class="status-icon booked">❌</span>
-                      <span v-else-if="isSlotSelected(room.id, slot.value)" class="status-icon selected">✅</span>
-                      <span v-else class="status-icon available">⭕</span>
-                    </div>
-                  </div>
-                </slot>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- 预约确认浮动面板 -->
-    <div v-if="selectedTimeSlots.length > 0" class="booking-panel">
-      <slot name="booking-form" :selection="currentSelection">
-        <div class="booking-form">
-          <div class="booking-header">
-            <h4>📋 预约确认</h4>
-            <t-button
-              variant="text"
-              size="small"
-              @click="handleCancelSelection"
-            >
-              取消
-            </t-button>
-          </div>
-          <div class="booking-info">
-            <div class="info-row">
-              <span class="label">会议室:</span>
-              <span class="value">{{ selectedRoom?.name }}</span>
-            </div>
-            <div class="info-row">
-              <span class="label">日期:</span>
-              <span class="value">{{ currentDate }}</span>
-            </div>
-            <div class="info-row">
-              <span class="label">时间:</span>
-              <span class="value">{{ formatSelectedTime() }}</span>
-            </div>
-            <div class="info-row">
-              <span class="label">时长:</span>
-              <span class="value">{{ selectedTimeSlots.length * 0.5 }}小时</span>
-            </div>
-          </div>
-          <div class="booking-actions">
-            <t-button
-              theme="primary"
-              size="large"
-              block
-              @click="handleConfirmBooking"
-            >
-              🎯 确认预约
-            </t-button>
-          </div>
-        </div>
-      </slot>
-    </div>
-
-    <!-- 底部说明 -->
-    <div class="selector-footer">
-      <slot name="footer">
-        <div class="legend">
-          <div class="legend-item">
-            <span class="legend-icon">⭕</span>
-            <span>可预约</span>
-          </div>
-          <div class="legend-item">
-            <span class="legend-icon">❌</span>
-            <span>已预约</span>
-          </div>
-          <div class="legend-item">
-            <span class="legend-icon">✅</span>
-            <span>已选择</span>
-          </div>
-        </div>
-      </slot>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, watch, defineProps, defineEmits } from 'vue'
-import { DatePicker as TDatePicker, Loading as TLoading, Tag as TTag, Button as TButton } from 'tdesign-vue-next'
-
-// 组件属性接口
-interface Room {
-  id: string
-  name: string
-  capacity: number
-  location: string
-  equipment?: string[]
-}
-
-interface TimeSlot {
-  value: string
-  label: string
-  hour: number
-  minute: number
-}
-
-interface Props {
-  rooms?: Room[]
-  selectedDate?: string
-  timeSlots?: TimeSlot[]
-  bookedSlots?: Record<string, string[]>
-  loading?: boolean
-  disabled?: boolean
-  minDuration?: number
-  maxDuration?: number
-}
-
-// 定义属性
-const props = withDefaults(defineProps<Props>(), {
-  rooms: () => [],
-  selectedDate: "",
-  timeSlots: () => [],
-  bookedSlots: () => ({}),
-  loading: false,
-  disabled: false,
-  minDuration: 1,
-  maxDuration: 8
-})
-
-// 定义事件
-const emit = defineEmits(['room-select', 'time-select', 'booking-confirm', 'date-change'])
-
-// 响应式数据
-const currentDate = ref(props.selectedDate || new Date().toISOString().split('T')[0])
-const selectedRoom = ref<Room | null>(null)
-const selectedTimeSlots = ref<string[]>([])
-
-// 计算属性
-const roomList = computed(() => props.rooms)
-
-const timeSlotList = computed(() => {
-  if (props.timeSlots.length > 0) {
-    return props.timeSlots
-  }
-  
-  // 默认生成9:00-18:00的时间段，每30分钟一个
-  const slots: TimeSlot[] = []
-  for (let hour = 9; hour < 18; hour++) {
-    for (let minute = 0; minute < 60; minute += 30) {
-      const timeValue = `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`
-      slots.push({
-        value: timeValue,
-        label: timeValue,
-        hour,
-        minute
-      })
-    }
-  }
-  return slots
-})
-
-// 辅助方法
-const getEndTime = (startTime: string): string => {
-  const [hour, minute] = startTime.split(':').map(Number)
-  const endMinute = minute + 30
-  const endHour = endMinute >= 60 ? hour + 1 : hour
-  const finalMinute = endMinute >= 60 ? endMinute - 60 : endMinute
-  
-  return `${endHour.toString().padStart(2, '0')}:${finalMinute.toString().padStart(2, '0')}`
-}
-
-const clearTimeSelection = () => {
-  selectedTimeSlots.value = []
-}
-
-const clearSelection = () => {
-  selectedRoom.value = null
-  clearTimeSelection()
-}
-
-const isSlotBooked = (roomId: string, timeSlot: string): boolean => {
-  return props.bookedSlots[roomId]?.includes(timeSlot) || false
-}
-
-const isSlotSelected = (roomId: string, timeSlot: string): boolean => {
-  return selectedRoom.value?.id === roomId && selectedTimeSlots.value.includes(timeSlot)
-}
-
-const isSlotDisabled = (_roomId: string, _timeSlot: string): boolean => {
-  return false
-}
-
-const getRoomStatusClass = (room: Room): string => {
-  const availableSlots = timeSlotList.value.filter(slot => 
-    !isSlotBooked(room.id, slot.value)
-  ).length
-  
-  if (availableSlots === 0) return 'fully-booked'
-  if (availableSlots < timeSlotList.value.length / 2) return 'partially-available'
-  return 'available'
-}
-
-const getRoomStatusText = (room: Room): string => {
-  const availableSlots = timeSlotList.value.filter(slot => 
-    !isSlotBooked(room.id, slot.value)
-  ).length
-  
-  if (availableSlots === 0) return '已满'
-  if (availableSlots < timeSlotList.value.length / 2) return '紧张'
-  return '充足'
-}
-
-const formatSelectedTime = (): string => {
-  if (selectedTimeSlots.value.length === 0) return ''
-  
-  const sortedSlots = [...selectedTimeSlots.value].sort()
-  const startTime = sortedSlots[0]
-  const endTime = getEndTime(sortedSlots[sortedSlots.length - 1])
-  
-  return `${startTime} - ${endTime}`
-}
-
-const currentSelection = computed(() => {
-  if (!selectedRoom.value || selectedTimeSlots.value.length === 0) {
-    return null
-  }
-  
-  const sortedSlots = [...selectedTimeSlots.value].sort()
-  return {
-    room: selectedRoom.value,
-    date: currentDate.value,
-    startTime: sortedSlots[0],
-    endTime: getEndTime(sortedSlots[sortedSlots.length - 1]),
-    duration: selectedTimeSlots.value.length,
-    timeSlots: sortedSlots
-  }
-})
-
-// 事件处理方法
-const handleDateChange = (date: string) => {
-  currentDate.value = date
-  clearSelection()
-  emit('date-change', date)
-}
-
-const handleRoomSelect = (room: Room) => {
-  if (selectedRoom.value?.id === room.id) {
-    // 如果点击的是已选中的会议室，则收起时间选择
-    selectedRoom.value = null
-    clearTimeSelection()
-  } else {
-    // 选择新的会议室
-    selectedRoom.value = room
-    clearTimeSelection()
-    emit('room-select', room)
-  }
-}
-
-const handleTimeSlotClick = (room: Room, slot: TimeSlot) => {
-  if (disabled || isSlotDisabled(room.id, slot.value) || isSlotBooked(room.id, slot.value)) {
-    return
-  }
-
-  const slotIndex = selectedTimeSlots.value.indexOf(slot.value)
-  
-  if (slotIndex > -1) {
-    // 取消选择
-    selectedTimeSlots.value.splice(slotIndex, 1)
-  } else {
-    // 添加选择
-    selectedTimeSlots.value.push(slot.value)
-    
-    // 检查时长限制
-    if (selectedTimeSlots.value.length > props.maxDuration) {
-      selectedTimeSlots.value = selectedTimeSlots.value.slice(-props.maxDuration)
-    }
-  }
-  
-  if (selectedTimeSlots.value.length >= props.minDuration) {
-    emit('time-select', currentSelection.value)
-  }
-}
-
-const handleConfirmBooking = () => {
-  if (currentSelection.value) {
-    emit('booking-confirm', currentSelection.value)
-    clearSelection()
-  }
-}
-
-const handleCancelSelection = () => {
-  clearSelection()
-}
-
-// 监听属性变化
-watch(() => props.selectedDate, (newDate) => {
-  if (newDate && newDate !== currentDate.value) {
-    currentDate.value = newDate
-    clearSelection()
-  }
-})
-
-// 暴露组件实例方法
-defineExpose({
-  clearSelection,
-  clearTimeSelection,
-  getCurrentSelection: () => currentSelection.value
-})
-</script>
-
-<style scoped>
-.ebiz-mobile-meeting-room-selector {
-  background: #f5f5f5;
-  min-height: 100vh;
-  padding-bottom: 80px; /* 为浮动面板留出空间 */
-}
-
-.selector-header {
-  background: #fff;
-  padding: 16px;
-  border-bottom: 1px solid #eee;
-  position: sticky;
-  top: 0;
-  z-index: 100;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-}
-
-.header-content {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.title {
-  margin: 0;
-  font-size: 18px;
-  font-weight: 600;
-  color: #333;
-}
-
-.date-selector {
-  flex-shrink: 0;
-}
-
-.loading-container {
-  padding: 60px 20px;
-  text-align: center;
-}
-
-.selector-content {
-  padding: 16px;
-}
-
-.rooms-list {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-
-.room-card {
-  background: #fff;
-  border-radius: 12px;
-  overflow: hidden;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  transition: all 0.3s ease;
-}
-
-.room-card.selected {
-  border: 2px solid #1890ff;
-  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.2);
-}
-
-.room-info {
-  padding: 16px;
-  cursor: pointer;
-}
-
-.room-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 12px;
-}
-
-.room-name {
-  margin: 0;
-  font-size: 16px;
-  font-weight: 600;
-  color: #333;
-}
-
-.room-status {
-  padding: 4px 8px;
-  border-radius: 12px;
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.room-status.available {
-  background: #f6ffed;
-  color: #52c41a;
-}
-
-.room-status.partially-available {
-  background: #fff7e6;
-  color: #fa8c16;
-}
-
-.room-status.fully-booked {
-  background: #fff2f0;
-  color: #ff4d4f;
-}
-
-.room-details {
-  display: flex;
-  gap: 16px;
-  margin-bottom: 12px;
-}
-
-.detail-item {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  font-size: 14px;
-  color: #666;
-}
-
-.icon {
-  font-size: 16px;
-}
-
-.equipment {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-}
-
-.equipment-tag {
-  font-size: 12px;
-}
-
-.time-selection {
-  border-top: 1px solid #f0f0f0;
-  padding: 16px;
-  background: #fafafa;
-}
-
-.time-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 12px;
-}
-
-.time-header h5 {
-  margin: 0;
-  font-size: 14px;
-  font-weight: 600;
-  color: #333;
-}
-
-.selected-info {
-  font-size: 12px;
-  color: #1890ff;
-  font-weight: 500;
-}
-
-.time-slots-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
-  gap: 8px;
-}
-
-.time-slot {
-  background: #fff;
-  border: 1px solid #e0e0e0;
-  border-radius: 8px;
-  padding: 8px;
-  text-align: center;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  min-height: 60px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-}
-
-.time-slot:active {
-  transform: scale(0.95);
-}
-
-.time-slot.booked {
-  background: #f5f5f5;
-  border-color: #d9d9d9;
-  cursor: not-allowed;
-}
-
-.time-slot.selected {
-  background: #e6f7ff;
-  border-color: #1890ff;
-  color: #1890ff;
-}
-
-.time-slot.disabled {
-  background: #f0f0f0;
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-
-.slot-content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 4px;
-}
-
-.slot-time {
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.status-icon {
-  font-size: 16px;
-}
-
-.booking-panel {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  background: #fff;
-  border-top: 1px solid #eee;
-  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
-  z-index: 1000;
-  animation: slideUp 0.3s ease;
-}
-
-@keyframes slideUp {
-  from {
-    transform: translateY(100%);
-  }
-  to {
-    transform: translateY(0);
-  }
-}
-
-.booking-form {
-  padding: 16px;
-}
-
-.booking-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 12px;
-}
-
-.booking-header h4 {
-  margin: 0;
-  font-size: 16px;
-  font-weight: 600;
-  color: #333;
-}
-
-.booking-info {
-  margin-bottom: 16px;
-}
-
-.info-row {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 6px 0;
-  font-size: 14px;
-}
-
-.label {
-  color: #666;
-  font-weight: 500;
-}
-
-.value {
-  color: #333;
-  font-weight: 600;
-}
-
-.booking-actions {
-  margin-top: 16px;
-}
-
-.selector-footer {
-  padding: 16px;
-  background: #fff;
-  margin-top: 16px;
-}
-
-.legend {
-  display: flex;
-  justify-content: center;
-  gap: 24px;
-}
-
-.legend-item {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  font-size: 12px;
-  color: #666;
-}
-
-.legend-icon {
-  font-size: 14px;
-}
-
-/* 响应式设计 */
-@media (max-width: 375px) {
-  .time-slots-grid {
-    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
-    gap: 6px;
-  }
-  
-  .time-slot {
-    padding: 6px;
-    min-height: 50px;
-  }
-  
-  .slot-time {
-    font-size: 11px;
-  }
-  
-  .status-icon {
-    font-size: 14px;
-  }
-}
+<template>
+  <div class="ebiz-mobile-meeting-room-selector">
+    <!-- 头部区域 -->
+    <div class="selector-header">
+      <slot name="header">
+        <div class="header-content">
+          <h3 class="title">📅 会议室预约</h3>
+          <div class="date-selector">
+            <t-date-picker
+              v-model="currentDate"
+              :disabled="disabled"
+              :min-date="new Date()"
+              format="YYYY-MM-DD"
+              placeholder="选择日期"
+              @change="handleDateChange"
+            />
+          </div>
+        </div>
+      </slot>
+    </div>
+
+    <!-- 加载状态 -->
+    <div v-if="loading" class="loading-container">
+      <t-loading size="large" text="加载中..." />
+    </div>
+
+    <!-- 主要内容区域 -->
+    <div v-else class="selector-content">
+      <!-- 会议室列表 -->
+      <div class="rooms-list">
+        <div
+          v-for="room in roomList"
+          :key="room.id"
+          class="room-card"
+          :class="{ 'selected': selectedRoom?.id === room.id }"
+          @click="handleRoomSelect(room)"
+        >
+          <!-- 会议室信息 -->
+          <div class="room-info">
+            <slot name="room-info" :room="room">
+              <div class="room-header">
+                <h4 class="room-name">🏢 {{ room.name }}</h4>
+                <div class="room-status" :class="getRoomStatusClass(room)">
+                  {{ getRoomStatusText(room) }}
+                </div>
+              </div>
+              <div class="room-details">
+                <div class="detail-item">
+                  <span class="icon">👥</span>
+                  <span>{{ room.capacity }}人</span>
+                </div>
+                <div class="detail-item">
+                  <span class="icon">📍</span>
+                  <span>{{ room.location }}</span>
+                </div>
+              </div>
+              <div v-if="room.equipment?.length" class="equipment">
+                <t-tag
+                  v-for="item in room.equipment"
+                  :key="item"
+                  size="small"
+                  variant="light"
+                  class="equipment-tag"
+                >
+                  {{ item }}
+                </t-tag>
+              </div>
+            </slot>
+          </div>
+
+          <!-- 时间段选择区域 -->
+          <div v-if="selectedRoom?.id === room.id" class="time-selection">
+            <div class="time-header">
+              <h5>⏰ 选择时间段</h5>
+              <div class="time-info">
+                <span v-if="selectedTimeSlots.length > 0" class="selected-info">
+                  已选 {{ selectedTimeSlots.length * 0.5 }}小时
+                </span>
+              </div>
+            </div>
+            
+            <!-- 时间段网格 -->
+            <div class="time-slots-grid">
+              <div
+                v-for="slot in timeSlotList"
+                :key="slot.value"
+                class="time-slot"
+                :class="{
+                  'booked': isSlotBooked(room.id, slot.value),
+                  'selected': isSlotSelected(room.id, slot.value),
+                  'disabled': disabled || isSlotDisabled(room.id, slot.value)
+                }"
+                @click="handleTimeSlotClick(room, slot)"
+              >
+                <slot name="time-slot" :room="room" :slot="slot" :is-booked="isSlotBooked(room.id, slot.value)">
+                  <div class="slot-content">
+                    <div class="slot-time">{{ slot.label }}</div>
+                    <div class="slot-status">
+                      <span v-if="isSlotBooked(room.id, slot.value)" class="status-icon booked">❌</span>
+                      <span v-else-if="isSlotSelected(room.id, slot.value)" class="status-icon selected">✅</span>
+                      <span v-else class="status-icon available">⭕</span>
+                    </div>
+                  </div>
+                </slot>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 预约确认浮动面板 -->
+    <div v-if="selectedTimeSlots.length > 0" class="booking-panel">
+      <slot name="booking-form" :selection="currentSelection">
+        <div class="booking-form">
+          <div class="booking-header">
+            <h4>📋 预约确认</h4>
+            <t-button
+              variant="text"
+              size="small"
+              @click="handleCancelSelection"
+            >
+              取消
+            </t-button>
+          </div>
+          <div class="booking-info">
+            <div class="info-row">
+              <span class="label">会议室:</span>
+              <span class="value">{{ selectedRoom?.name }}</span>
+            </div>
+            <div class="info-row">
+              <span class="label">日期:</span>
+              <span class="value">{{ currentDate }}</span>
+            </div>
+            <div class="info-row">
+              <span class="label">时间:</span>
+              <span class="value">{{ formatSelectedTime() }}</span>
+            </div>
+            <div class="info-row">
+              <span class="label">时长:</span>
+              <span class="value">{{ selectedTimeSlots.length * 0.5 }}小时</span>
+            </div>
+          </div>
+          <div class="booking-actions">
+            <t-button
+              theme="primary"
+              size="large"
+              block
+              @click="handleConfirmBooking"
+            >
+              🎯 确认预约
+            </t-button>
+          </div>
+        </div>
+      </slot>
+    </div>
+
+    <!-- 底部说明 -->
+    <div class="selector-footer">
+      <slot name="footer">
+        <div class="legend">
+          <div class="legend-item">
+            <span class="legend-icon">⭕</span>
+            <span>可预约</span>
+          </div>
+          <div class="legend-item">
+            <span class="legend-icon">❌</span>
+            <span>已预约</span>
+          </div>
+          <div class="legend-item">
+            <span class="legend-icon">✅</span>
+            <span>已选择</span>
+          </div>
+        </div>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, defineProps, defineEmits } from 'vue'
+import { DatePicker as TDatePicker, Loading as TLoading, Tag as TTag, Button as TButton } from 'tdesign-vue-next'
+
+// 组件属性接口
+interface Room {
+  id: string
+  name: string
+  capacity: number
+  location: string
+  equipment?: string[]
+}
+
+interface TimeSlot {
+  value: string
+  label: string
+  hour: number
+  minute: number
+}
+
+interface Props {
+  rooms?: Room[]
+  selectedDate?: string
+  timeSlots?: TimeSlot[]
+  bookedSlots?: Record<string, string[]>
+  loading?: boolean
+  disabled?: boolean
+  minDuration?: number
+  maxDuration?: number
+}
+
+// 定义属性
+const props = withDefaults(defineProps<Props>(), {
+  rooms: () => [],
+  selectedDate: "",
+  timeSlots: () => [],
+  bookedSlots: () => ({}),
+  loading: false,
+  disabled: false,
+  minDuration: 1,
+  maxDuration: 8
+})
+
+// 定义事件
+const emit = defineEmits(['room-select', 'time-select', 'booking-confirm', 'date-change'])
+
+// 响应式数据
+const currentDate = ref(props.selectedDate || new Date().toISOString().split('T')[0])
+const selectedRoom = ref<Room | null>(null)
+const selectedTimeSlots = ref<string[]>([])
+
+// 计算属性
+const roomList = computed(() => props.rooms)
+
+const timeSlotList = computed(() => {
+  if (props.timeSlots.length > 0) {
+    return props.timeSlots
+  }
+  
+  // 默认生成9:00-18:00的时间段，每30分钟一个
+  const slots: TimeSlot[] = []
+  for (let hour = 9; hour < 18; hour++) {
+    for (let minute = 0; minute < 60; minute += 30) {
+      const timeValue = `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`
+      slots.push({
+        value: timeValue,
+        label: timeValue,
+        hour,
+        minute
+      })
+    }
+  }
+  return slots
+})
+
+// 辅助方法
+const getEndTime = (startTime: string): string => {
+  const [hour, minute] = startTime.split(':').map(Number)
+  const endMinute = minute + 30
+  const endHour = endMinute >= 60 ? hour + 1 : hour
+  const finalMinute = endMinute >= 60 ? endMinute - 60 : endMinute
+  
+  return `${endHour.toString().padStart(2, '0')}:${finalMinute.toString().padStart(2, '0')}`
+}
+
+const clearTimeSelection = () => {
+  selectedTimeSlots.value = []
+}
+
+const clearSelection = () => {
+  selectedRoom.value = null
+  clearTimeSelection()
+}
+
+const isSlotBooked = (roomId: string, timeSlot: string): boolean => {
+  return props.bookedSlots[roomId]?.includes(timeSlot) || false
+}
+
+const isSlotSelected = (roomId: string, timeSlot: string): boolean => {
+  return selectedRoom.value?.id === roomId && selectedTimeSlots.value.includes(timeSlot)
+}
+
+const isSlotDisabled = (_roomId: string, _timeSlot: string): boolean => {
+  return false
+}
+
+const getRoomStatusClass = (room: Room): string => {
+  const availableSlots = timeSlotList.value.filter(slot => 
+    !isSlotBooked(room.id, slot.value)
+  ).length
+  
+  if (availableSlots === 0) return 'fully-booked'
+  if (availableSlots < timeSlotList.value.length / 2) return 'partially-available'
+  return 'available'
+}
+
+const getRoomStatusText = (room: Room): string => {
+  const availableSlots = timeSlotList.value.filter(slot => 
+    !isSlotBooked(room.id, slot.value)
+  ).length
+  
+  if (availableSlots === 0) return '已满'
+  if (availableSlots < timeSlotList.value.length / 2) return '紧张'
+  return '充足'
+}
+
+const formatSelectedTime = (): string => {
+  if (selectedTimeSlots.value.length === 0) return ''
+  
+  const sortedSlots = [...selectedTimeSlots.value].sort()
+  const startTime = sortedSlots[0]
+  const endTime = getEndTime(sortedSlots[sortedSlots.length - 1])
+  
+  return `${startTime} - ${endTime}`
+}
+
+const currentSelection = computed(() => {
+  if (!selectedRoom.value || selectedTimeSlots.value.length === 0) {
+    return null
+  }
+  
+  const sortedSlots = [...selectedTimeSlots.value].sort()
+  return {
+    room: selectedRoom.value,
+    date: currentDate.value,
+    startTime: sortedSlots[0],
+    endTime: getEndTime(sortedSlots[sortedSlots.length - 1]),
+    duration: selectedTimeSlots.value.length,
+    timeSlots: sortedSlots
+  }
+})
+
+// 事件处理方法
+const handleDateChange = (date: string) => {
+  currentDate.value = date
+  clearSelection()
+  emit('date-change', date)
+}
+
+const handleRoomSelect = (room: Room) => {
+  if (selectedRoom.value?.id === room.id) {
+    // 如果点击的是已选中的会议室，则收起时间选择
+    selectedRoom.value = null
+    clearTimeSelection()
+  } else {
+    // 选择新的会议室
+    selectedRoom.value = room
+    clearTimeSelection()
+    emit('room-select', room)
+  }
+}
+
+const handleTimeSlotClick = (room: Room, slot: TimeSlot) => {
+  if (disabled || isSlotDisabled(room.id, slot.value) || isSlotBooked(room.id, slot.value)) {
+    return
+  }
+
+  const slotIndex = selectedTimeSlots.value.indexOf(slot.value)
+  
+  if (slotIndex > -1) {
+    // 取消选择
+    selectedTimeSlots.value.splice(slotIndex, 1)
+  } else {
+    // 添加选择
+    selectedTimeSlots.value.push(slot.value)
+    
+    // 检查时长限制
+    if (selectedTimeSlots.value.length > props.maxDuration) {
+      selectedTimeSlots.value = selectedTimeSlots.value.slice(-props.maxDuration)
+    }
+  }
+  
+  if (selectedTimeSlots.value.length >= props.minDuration) {
+    emit('time-select', currentSelection.value)
+  }
+}
+
+const handleConfirmBooking = () => {
+  if (currentSelection.value) {
+    emit('booking-confirm', currentSelection.value)
+    clearSelection()
+  }
+}
+
+const handleCancelSelection = () => {
+  clearSelection()
+}
+
+// 监听属性变化
+watch(() => props.selectedDate, (newDate) => {
+  if (newDate && newDate !== currentDate.value) {
+    currentDate.value = newDate
+    clearSelection()
+  }
+})
+
+// 暴露组件实例方法
+defineExpose({
+  clearSelection,
+  clearTimeSelection,
+  getCurrentSelection: () => currentSelection.value
+})
+</script>
+
+<style scoped>
+.ebiz-mobile-meeting-room-selector {
+  background: #f5f5f5;
+  min-height: 100vh;
+  padding-bottom: 80px; /* 为浮动面板留出空间 */
+}
+
+.selector-header {
+  background: #fff;
+  padding: 16px;
+  border-bottom: 1px solid #eee;
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.header-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.title {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 600;
+  color: #333;
+}
+
+.date-selector {
+  flex-shrink: 0;
+}
+
+.loading-container {
+  padding: 60px 20px;
+  text-align: center;
+}
+
+.selector-content {
+  padding: 16px;
+}
+
+.rooms-list {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.room-card {
+  background: #fff;
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s ease;
+}
+
+.room-card.selected {
+  border: 2px solid #1890ff;
+  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.2);
+}
+
+.room-info {
+  padding: 16px;
+  cursor: pointer;
+}
+
+.room-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.room-name {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+}
+
+.room-status {
+  padding: 4px 8px;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.room-status.available {
+  background: #f6ffed;
+  color: #52c41a;
+}
+
+.room-status.partially-available {
+  background: #fff7e6;
+  color: #fa8c16;
+}
+
+.room-status.fully-booked {
+  background: #fff2f0;
+  color: #ff4d4f;
+}
+
+.room-details {
+  display: flex;
+  gap: 16px;
+  margin-bottom: 12px;
+}
+
+.detail-item {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 14px;
+  color: #666;
+}
+
+.icon {
+  font-size: 16px;
+}
+
+.equipment {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.equipment-tag {
+  font-size: 12px;
+}
+
+.time-selection {
+  border-top: 1px solid #f0f0f0;
+  padding: 16px;
+  background: #fafafa;
+}
+
+.time-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.time-header h5 {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+  color: #333;
+}
+
+.selected-info {
+  font-size: 12px;
+  color: #1890ff;
+  font-weight: 500;
+}
+
+.time-slots-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
+  gap: 8px;
+}
+
+.time-slot {
+  background: #fff;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  padding: 8px;
+  text-align: center;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  min-height: 60px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.time-slot:active {
+  transform: scale(0.95);
+}
+
+.time-slot.booked {
+  background: #f5f5f5;
+  border-color: #d9d9d9;
+  cursor: not-allowed;
+}
+
+.time-slot.selected {
+  background: #e6f7ff;
+  border-color: #1890ff;
+  color: #1890ff;
+}
+
+.time-slot.disabled {
+  background: #f0f0f0;
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.slot-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+}
+
+.slot-time {
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.status-icon {
+  font-size: 16px;
+}
+
+.booking-panel {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: #fff;
+  border-top: 1px solid #eee;
+  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
+  z-index: 1000;
+  animation: slideUp 0.3s ease;
+}
+
+@keyframes slideUp {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+.booking-form {
+  padding: 16px;
+}
+
+.booking-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.booking-header h4 {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+}
+
+.booking-info {
+  margin-bottom: 16px;
+}
+
+.info-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 6px 0;
+  font-size: 14px;
+}
+
+.label {
+  color: #666;
+  font-weight: 500;
+}
+
+.value {
+  color: #333;
+  font-weight: 600;
+}
+
+.booking-actions {
+  margin-top: 16px;
+}
+
+.selector-footer {
+  padding: 16px;
+  background: #fff;
+  margin-top: 16px;
+}
+
+.legend {
+  display: flex;
+  justify-content: center;
+  gap: 24px;
+}
+
+.legend-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  color: #666;
+}
+
+.legend-icon {
+  font-size: 14px;
+}
+
+/* 响应式设计 */
+@media (max-width: 375px) {
+  .time-slots-grid {
+    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
+    gap: 6px;
+  }
+  
+  .time-slot {
+    padding: 6px;
+    min-height: 50px;
+  }
+  
+  .slot-time {
+    font-size: 11px;
+  }
+  
+  .status-icon {
+    font-size: 14px;
+  }
+}
 </style>