@ebiz/designer-components 0.1.2 → 0.1.4

package/src/components/EbizMeetingRoomSelector.vue

@@ -1,665 +1,665 @@
-<template>
-  <div class="ebiz-meeting-room-selector">
-    <!-- 头部区域 -->
-    <div class="selector-header">
-      <slot name="header">
-        <div class="header-content">
-          <h3 class="title">会议室预约</h3>
-          <div class="date-selector">
-            <label>选择日期：</label>
-            <t-date-picker
-              v-model="currentDate"
-              :disabled="disabled"
-              :min-date="new Date()"
-              format="YYYY-MM-DD"
-              @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="time-header">
-        <div class="room-column-header">会议室</div>
-        <div class="time-slots-header">
-          <div
-            v-for="slot in timeSlotList"
-            :key="slot.value"
-            class="time-slot-header"
-          >
-            {{ slot.label }}
-          </div>
-        </div>
-      </div>
-
-      <!-- 会议室列表 -->
-      <div class="rooms-container">
-        <div
-          v-for="room in roomList"
-          :key="room.id"
-          class="room-row"
-          :class="{ 'selected': selectedRoom?.id === room.id }"
-        >
-          <!-- 会议室信息 -->
-          <div class="room-info" @click="handleRoomSelect(room)">
-            <slot name="room-info" :room="room">
-              <div class="room-basic-info">
-                <h4 class="room-name">{{ room.name }}</h4>
-                <p class="room-details">
-                  <span class="capacity">容量: {{ room.capacity }}人</span>
-                  <span class="location">位置: {{ room.location }}</span>
-                </p>
-                <div v-if="room.equipment?.length" class="equipment">
-                  <t-tag
-                    v-for="item in room.equipment"
-                    :key="item"
-                    size="small"
-                    variant="light"
-                  >
-                    {{ item }}
-                  </t-tag>
-                </div>
-              </div>
-            </slot>
-          </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),
-                'selecting': isSlotSelecting(room.id, slot.value),
-                'disabled': disabled || isSlotDisabled(room.id, slot.value)
-              }"
-              @click="handleTimeSlotClick(room, slot)"
-              @mouseenter="handleTimeSlotHover(room, slot)"
-              @mouseleave="handleTimeSlotLeave()"
-            >
-              <slot name="time-slot" :room="room" :slot="slot" :is-booked="isSlotBooked(room.id, slot.value)">
-                <div class="slot-content">
-                  <span v-if="isSlotBooked(room.id, slot.value)" class="booked-indicator">已约</span>
-                  <span v-else-if="isSlotSelected(room.id, slot.value)" class="selected-indicator">已选</span>
-                </div>
-              </slot>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- 预约确认区域 -->
-    <div v-if="selectedTimeSlots.length > 0" class="booking-panel">
-      <slot name="booking-form" :selection="currentSelection">
-        <div class="booking-form">
-          <h4>预约确认</h4>
-          <div class="booking-info">
-            <p><strong>会议室：</strong>{{ selectedRoom?.name }}</p>
-            <p><strong>日期：</strong>{{ currentDate }}</p>
-            <p><strong>时间：</strong>{{ formatSelectedTime() }}</p>
-            <p><strong>时长：</strong>{{ selectedTimeSlots.length * 0.5 }}小时</p>
-          </div>
-          <div class="booking-actions">
-            <t-button variant="outline" @click="handleCancelSelection">取消</t-button>
-            <t-button theme="primary" @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-color available"></span>
-            <span>可预约</span>
-          </div>
-          <div class="legend-item">
-            <span class="legend-color booked"></span>
-            <span>已预约</span>
-          </div>
-          <div class="legend-item">
-            <span class="legend-color selected"></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 selectingStart = ref<string | null>(null)
-const hoveringSlot = ref<string | null>(null)
-
-// 计算属性
-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 = []
-  selectingStart.value = null
-  hoveringSlot.value = null
-}
-
-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 isSlotSelecting = (roomId: string, timeSlot: string): boolean => {
-  if (!selectingStart.value || selectedRoom.value?.id !== roomId || !hoveringSlot.value) {
-    return false
-  }
-  
-  const startIndex = timeSlotList.value.findIndex(s => s.value === selectingStart.value)
-  const hoverIndex = timeSlotList.value.findIndex(s => s.value === hoveringSlot.value)
-  const currentIndex = timeSlotList.value.findIndex(s => s.value === timeSlot)
-  
-  if (startIndex === -1 || hoverIndex === -1 || currentIndex === -1) {
-    return false
-  }
-  
-  const minIndex = Math.min(startIndex, hoverIndex)
-  const maxIndex = Math.max(startIndex, hoverIndex)
-  
-  return currentIndex >= minIndex && currentIndex <= maxIndex
-}
-
-const isSlotDisabled = (_roomId: string, _timeSlot: string): boolean => {
-  // 可以根据业务需求添加更多禁用逻辑
-  return false
-}
-
-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) => {
-  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
-  }
-
-  // 如果点击的不是当前选中的会议室，先选中会议室
-  if (selectedRoom.value?.id !== room.id) {
-    handleRoomSelect(room)
-  }
-
-  // 处理时间段选择
-  if (!selectingStart.value) {
-    // 开始选择
-    selectingStart.value = slot.value
-    selectedTimeSlots.value = [slot.value]
-  } else {
-    // 完成选择
-    const startIndex = timeSlotList.value.findIndex(s => s.value === selectingStart.value)
-    const endIndex = timeSlotList.value.findIndex(s => s.value === slot.value)
-    
-    if (startIndex !== -1 && endIndex !== -1) {
-      const minIndex = Math.min(startIndex, endIndex)
-      const maxIndex = Math.max(startIndex, endIndex)
-      const duration = maxIndex - minIndex + 1
-      
-      // 检查时长限制
-      if (duration < props.minDuration || duration > props.maxDuration) {
-        clearTimeSelection()
-        return
-      }
-      
-      // 检查选择范围内是否有已预约的时间段
-      const selectedRange = timeSlotList.value.slice(minIndex, maxIndex + 1)
-      const hasBookedSlot = selectedRange.some(s => isSlotBooked(room.id, s.value))
-      
-      if (hasBookedSlot) {
-        clearTimeSelection()
-        return
-      }
-      
-      selectedTimeSlots.value = selectedRange.map(s => s.value)
-      selectingStart.value = null
-      
-      emit('time-select', currentSelection.value)
-    }
-  }
-}
-
-const handleTimeSlotHover = (room: Room, slot: TimeSlot) => {
-  if (!selectingStart.value || selectedRoom.value?.id !== room.id) {
-    return
-  }
-  
-  hoveringSlot.value = slot.value
-}
-
-const handleTimeSlotLeave = () => {
-  hoveringSlot.value = null
-}
-
-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-meeting-room-selector {
-  background: #fff;
-  border-radius: 8px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  overflow: hidden;
-}
-
-.selector-header {
-  padding: 20px;
-  border-bottom: 1px solid #e7e7e7;
-  background: #fafafa;
-}
-
-.header-content {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.title {
-  margin: 0;
-  font-size: 18px;
-  font-weight: 600;
-  color: #333;
-}
-
-.date-selector {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.date-selector label {
-  font-weight: 500;
-  color: #666;
-}
-
-.loading-container {
-  padding: 60px;
-  text-align: center;
-}
-
-.selector-content {
-  overflow-x: auto;
-}
-
-.time-header {
-  display: flex;
-  background: #f5f5f5;
-  border-bottom: 2px solid #e7e7e7;
-  position: sticky;
-  top: 0;
-  z-index: 10;
-}
-
-.room-column-header {
-  width: 280px;
-  min-width: 280px;
-  padding: 12px 16px;
-  font-weight: 600;
-  color: #333;
-  border-right: 1px solid #e7e7e7;
-  background: #f5f5f5;
-}
-
-.time-slots-header {
-  display: flex;
-  flex: 1;
-}
-
-.time-slot-header {
-  width: 80px;
-  min-width: 80px;
-  padding: 12px 8px;
-  text-align: center;
-  font-size: 12px;
-  font-weight: 500;
-  color: #666;
-  border-right: 1px solid #e7e7e7;
-}
-
-.rooms-container {
-  max-height: 600px;
-  overflow-y: auto;
-}
-
-.room-row {
-  display: flex;
-  border-bottom: 1px solid #e7e7e7;
-  transition: background-color 0.2s;
-}
-
-.room-row:hover {
-  background: #f9f9f9;
-}
-
-.room-row.selected {
-  background: #e6f7ff;
-}
-
-.room-info {
-  width: 280px;
-  min-width: 280px;
-  padding: 16px;
-  border-right: 1px solid #e7e7e7;
-  cursor: pointer;
-  transition: background-color 0.2s;
-}
-
-.room-info:hover {
-  background: rgba(24, 144, 255, 0.05);
-}
-
-.room-basic-info {
-  height: 100%;
-}
-
-.room-name {
-  margin: 0 0 8px 0;
-  font-size: 16px;
-  font-weight: 600;
-  color: #333;
-}
-
-.room-details {
-  margin: 0 0 8px 0;
-  font-size: 14px;
-  color: #666;
-  line-height: 1.4;
-}
-
-.room-details span {
-  display: block;
-}
-
-.equipment {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px;
-}
-
-.time-slots-grid {
-  display: flex;
-  flex: 1;
-}
-
-.time-slot {
-  width: 80px;
-  min-width: 80px;
-  height: 80px;
-  border-right: 1px solid #e7e7e7;
-  cursor: pointer;
-  transition: all 0.2s;
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.time-slot:hover:not(.booked):not(.disabled) {
-  background: rgba(24, 144, 255, 0.1);
-}
-
-.time-slot.booked {
-  background: #f5f5f5;
-  cursor: not-allowed;
-}
-
-.time-slot.selected {
-  background: #1890ff;
-  color: white;
-}
-
-.time-slot.selecting {
-  background: rgba(24, 144, 255, 0.3);
-}
-
-.time-slot.disabled {
-  background: #f0f0f0;
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-
-.slot-content {
-  font-size: 12px;
-  text-align: center;
-}
-
-.booked-indicator {
-  color: #999;
-  font-weight: 500;
-}
-
-.selected-indicator {
-  color: white;
-  font-weight: 500;
-}
-
-.booking-panel {
-  padding: 20px;
-  background: #f9f9f9;
-  border-top: 1px solid #e7e7e7;
-}
-
-.booking-form h4 {
-  margin: 0 0 16px 0;
-  font-size: 16px;
-  font-weight: 600;
-  color: #333;
-}
-
-.booking-info {
-  margin-bottom: 16px;
-}
-
-.booking-info p {
-  margin: 0 0 8px 0;
-  font-size: 14px;
-  color: #666;
-}
-
-.booking-actions {
-  display: flex;
-  gap: 12px;
-  justify-content: flex-end;
-}
-
-.selector-footer {
-  padding: 16px 20px;
-  background: #fafafa;
-  border-top: 1px solid #e7e7e7;
-}
-
-.legend {
-  display: flex;
-  gap: 24px;
-  justify-content: center;
-}
-
-.legend-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 14px;
-  color: #666;
-}
-
-.legend-color {
-  width: 16px;
-  height: 16px;
-  border-radius: 2px;
-  border: 1px solid #e7e7e7;
-}
-
-.legend-color.available {
-  background: white;
-}
-
-.legend-color.booked {
-  background: #f5f5f5;
-}
-
-.legend-color.selected {
-  background: #1890ff;
-}
+<template>
+  <div class="ebiz-meeting-room-selector">
+    <!-- 头部区域 -->
+    <div class="selector-header">
+      <slot name="header">
+        <div class="header-content">
+          <h3 class="title">会议室预约</h3>
+          <div class="date-selector">
+            <label>选择日期：</label>
+            <t-date-picker
+              v-model="currentDate"
+              :disabled="disabled"
+              :min-date="new Date()"
+              format="YYYY-MM-DD"
+              @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="time-header">
+        <div class="room-column-header">会议室</div>
+        <div class="time-slots-header">
+          <div
+            v-for="slot in timeSlotList"
+            :key="slot.value"
+            class="time-slot-header"
+          >
+            {{ slot.label }}
+          </div>
+        </div>
+      </div>
+
+      <!-- 会议室列表 -->
+      <div class="rooms-container">
+        <div
+          v-for="room in roomList"
+          :key="room.id"
+          class="room-row"
+          :class="{ 'selected': selectedRoom?.id === room.id }"
+        >
+          <!-- 会议室信息 -->
+          <div class="room-info" @click="handleRoomSelect(room)">
+            <slot name="room-info" :room="room">
+              <div class="room-basic-info">
+                <h4 class="room-name">{{ room.name }}</h4>
+                <p class="room-details">
+                  <span class="capacity">容量: {{ room.capacity }}人</span>
+                  <span class="location">位置: {{ room.location }}</span>
+                </p>
+                <div v-if="room.equipment?.length" class="equipment">
+                  <t-tag
+                    v-for="item in room.equipment"
+                    :key="item"
+                    size="small"
+                    variant="light"
+                  >
+                    {{ item }}
+                  </t-tag>
+                </div>
+              </div>
+            </slot>
+          </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),
+                'selecting': isSlotSelecting(room.id, slot.value),
+                'disabled': disabled || isSlotDisabled(room.id, slot.value)
+              }"
+              @click="handleTimeSlotClick(room, slot)"
+              @mouseenter="handleTimeSlotHover(room, slot)"
+              @mouseleave="handleTimeSlotLeave()"
+            >
+              <slot name="time-slot" :room="room" :slot="slot" :is-booked="isSlotBooked(room.id, slot.value)">
+                <div class="slot-content">
+                  <span v-if="isSlotBooked(room.id, slot.value)" class="booked-indicator">已约</span>
+                  <span v-else-if="isSlotSelected(room.id, slot.value)" class="selected-indicator">已选</span>
+                </div>
+              </slot>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 预约确认区域 -->
+    <div v-if="selectedTimeSlots.length > 0" class="booking-panel">
+      <slot name="booking-form" :selection="currentSelection">
+        <div class="booking-form">
+          <h4>预约确认</h4>
+          <div class="booking-info">
+            <p><strong>会议室：</strong>{{ selectedRoom?.name }}</p>
+            <p><strong>日期：</strong>{{ currentDate }}</p>
+            <p><strong>时间：</strong>{{ formatSelectedTime() }}</p>
+            <p><strong>时长：</strong>{{ selectedTimeSlots.length * 0.5 }}小时</p>
+          </div>
+          <div class="booking-actions">
+            <t-button variant="outline" @click="handleCancelSelection">取消</t-button>
+            <t-button theme="primary" @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-color available"></span>
+            <span>可预约</span>
+          </div>
+          <div class="legend-item">
+            <span class="legend-color booked"></span>
+            <span>已预约</span>
+          </div>
+          <div class="legend-item">
+            <span class="legend-color selected"></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 selectingStart = ref<string | null>(null)
+const hoveringSlot = ref<string | null>(null)
+
+// 计算属性
+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 = []
+  selectingStart.value = null
+  hoveringSlot.value = null
+}
+
+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 isSlotSelecting = (roomId: string, timeSlot: string): boolean => {
+  if (!selectingStart.value || selectedRoom.value?.id !== roomId || !hoveringSlot.value) {
+    return false
+  }
+  
+  const startIndex = timeSlotList.value.findIndex(s => s.value === selectingStart.value)
+  const hoverIndex = timeSlotList.value.findIndex(s => s.value === hoveringSlot.value)
+  const currentIndex = timeSlotList.value.findIndex(s => s.value === timeSlot)
+  
+  if (startIndex === -1 || hoverIndex === -1 || currentIndex === -1) {
+    return false
+  }
+  
+  const minIndex = Math.min(startIndex, hoverIndex)
+  const maxIndex = Math.max(startIndex, hoverIndex)
+  
+  return currentIndex >= minIndex && currentIndex <= maxIndex
+}
+
+const isSlotDisabled = (_roomId: string, _timeSlot: string): boolean => {
+  // 可以根据业务需求添加更多禁用逻辑
+  return false
+}
+
+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) => {
+  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
+  }
+
+  // 如果点击的不是当前选中的会议室，先选中会议室
+  if (selectedRoom.value?.id !== room.id) {
+    handleRoomSelect(room)
+  }
+
+  // 处理时间段选择
+  if (!selectingStart.value) {
+    // 开始选择
+    selectingStart.value = slot.value
+    selectedTimeSlots.value = [slot.value]
+  } else {
+    // 完成选择
+    const startIndex = timeSlotList.value.findIndex(s => s.value === selectingStart.value)
+    const endIndex = timeSlotList.value.findIndex(s => s.value === slot.value)
+    
+    if (startIndex !== -1 && endIndex !== -1) {
+      const minIndex = Math.min(startIndex, endIndex)
+      const maxIndex = Math.max(startIndex, endIndex)
+      const duration = maxIndex - minIndex + 1
+      
+      // 检查时长限制
+      if (duration < props.minDuration || duration > props.maxDuration) {
+        clearTimeSelection()
+        return
+      }
+      
+      // 检查选择范围内是否有已预约的时间段
+      const selectedRange = timeSlotList.value.slice(minIndex, maxIndex + 1)
+      const hasBookedSlot = selectedRange.some(s => isSlotBooked(room.id, s.value))
+      
+      if (hasBookedSlot) {
+        clearTimeSelection()
+        return
+      }
+      
+      selectedTimeSlots.value = selectedRange.map(s => s.value)
+      selectingStart.value = null
+      
+      emit('time-select', currentSelection.value)
+    }
+  }
+}
+
+const handleTimeSlotHover = (room: Room, slot: TimeSlot) => {
+  if (!selectingStart.value || selectedRoom.value?.id !== room.id) {
+    return
+  }
+  
+  hoveringSlot.value = slot.value
+}
+
+const handleTimeSlotLeave = () => {
+  hoveringSlot.value = null
+}
+
+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-meeting-room-selector {
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+}
+
+.selector-header {
+  padding: 20px;
+  border-bottom: 1px solid #e7e7e7;
+  background: #fafafa;
+}
+
+.header-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.title {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 600;
+  color: #333;
+}
+
+.date-selector {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.date-selector label {
+  font-weight: 500;
+  color: #666;
+}
+
+.loading-container {
+  padding: 60px;
+  text-align: center;
+}
+
+.selector-content {
+  overflow-x: auto;
+}
+
+.time-header {
+  display: flex;
+  background: #f5f5f5;
+  border-bottom: 2px solid #e7e7e7;
+  position: sticky;
+  top: 0;
+  z-index: 10;
+}
+
+.room-column-header {
+  width: 280px;
+  min-width: 280px;
+  padding: 12px 16px;
+  font-weight: 600;
+  color: #333;
+  border-right: 1px solid #e7e7e7;
+  background: #f5f5f5;
+}
+
+.time-slots-header {
+  display: flex;
+  flex: 1;
+}
+
+.time-slot-header {
+  width: 80px;
+  min-width: 80px;
+  padding: 12px 8px;
+  text-align: center;
+  font-size: 12px;
+  font-weight: 500;
+  color: #666;
+  border-right: 1px solid #e7e7e7;
+}
+
+.rooms-container {
+  max-height: 600px;
+  overflow-y: auto;
+}
+
+.room-row {
+  display: flex;
+  border-bottom: 1px solid #e7e7e7;
+  transition: background-color 0.2s;
+}
+
+.room-row:hover {
+  background: #f9f9f9;
+}
+
+.room-row.selected {
+  background: #e6f7ff;
+}
+
+.room-info {
+  width: 280px;
+  min-width: 280px;
+  padding: 16px;
+  border-right: 1px solid #e7e7e7;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.room-info:hover {
+  background: rgba(24, 144, 255, 0.05);
+}
+
+.room-basic-info {
+  height: 100%;
+}
+
+.room-name {
+  margin: 0 0 8px 0;
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+}
+
+.room-details {
+  margin: 0 0 8px 0;
+  font-size: 14px;
+  color: #666;
+  line-height: 1.4;
+}
+
+.room-details span {
+  display: block;
+}
+
+.equipment {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.time-slots-grid {
+  display: flex;
+  flex: 1;
+}
+
+.time-slot {
+  width: 80px;
+  min-width: 80px;
+  height: 80px;
+  border-right: 1px solid #e7e7e7;
+  cursor: pointer;
+  transition: all 0.2s;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.time-slot:hover:not(.booked):not(.disabled) {
+  background: rgba(24, 144, 255, 0.1);
+}
+
+.time-slot.booked {
+  background: #f5f5f5;
+  cursor: not-allowed;
+}
+
+.time-slot.selected {
+  background: #1890ff;
+  color: white;
+}
+
+.time-slot.selecting {
+  background: rgba(24, 144, 255, 0.3);
+}
+
+.time-slot.disabled {
+  background: #f0f0f0;
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.slot-content {
+  font-size: 12px;
+  text-align: center;
+}
+
+.booked-indicator {
+  color: #999;
+  font-weight: 500;
+}
+
+.selected-indicator {
+  color: white;
+  font-weight: 500;
+}
+
+.booking-panel {
+  padding: 20px;
+  background: #f9f9f9;
+  border-top: 1px solid #e7e7e7;
+}
+
+.booking-form h4 {
+  margin: 0 0 16px 0;
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+}
+
+.booking-info {
+  margin-bottom: 16px;
+}
+
+.booking-info p {
+  margin: 0 0 8px 0;
+  font-size: 14px;
+  color: #666;
+}
+
+.booking-actions {
+  display: flex;
+  gap: 12px;
+  justify-content: flex-end;
+}
+
+.selector-footer {
+  padding: 16px 20px;
+  background: #fafafa;
+  border-top: 1px solid #e7e7e7;
+}
+
+.legend {
+  display: flex;
+  gap: 24px;
+  justify-content: center;
+}
+
+.legend-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  color: #666;
+}
+
+.legend-color {
+  width: 16px;
+  height: 16px;
+  border-radius: 2px;
+  border: 1px solid #e7e7e7;
+}
+
+.legend-color.available {
+  background: white;
+}
+
+.legend-color.booked {
+  background: #f5f5f5;
+}
+
+.legend-color.selected {
+  background: #1890ff;
+}
 </style>