@ebiz/designer-components 0.1.136 → 0.1.138

package/src/components/EbizMeetingRoomSelector.vue

@@ -1,1150 +1,1150 @@
-<template>
-  <div>
-    <div class="ebiz-meeting-room-selector">
-      <!-- 头部区域 -->
-      <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-controls">
-                    <div class="room-status" :class="getRoomStatusClass(room)">
-                      {{ getRoomStatusText(room) }}
-                    </div>
-                    <div v-if="selectedRoom?.id === room.id" class="time-filter-btn">
-                      <t-button size="small" variant="outline" theme="primary" @click.stop="toggleTimeFilter">
-                        {{ showAllTimeSlots ? '常用时间' : '全部时间' }}
-                      </t-button>
-                    </div>
-                  </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 filteredTimeSlotList" :key="slot.value" class="time-slot" :class="{
-                  'booked': isSlotBooked(room.id, slot.value),
-                  'selected': isSlotSelected(room.id, slot.value),
-                  'disabled': props.disabled || isSlotDisabled(room.id, slot.value)
-                }" @click="handleTimeSlotClick(room, slot)">
-                  <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 style="display:block;margin-bottom: 4px;">已预约</span>
-                        <span style="display: block;">{{ bookedInfo(room.id, slot.value, 'name') }} </span>
-                        <span style="display: block;">{{ bookedInfo(room.id, slot.value, 'no') }} </span>
-                      </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>
-                </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">{{ formatDate(selectedDate) }}</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 :loading="bookingLoading" @click="handleConfirmBooking">
-                {{ confirmButtonText }}
-              </t-button>
-            </div>
-          </div>
-        </slot>
-      </div>
-    </div>
-      <!-- 预约成功提示组件 -->
-      <div v-if="showSuccessMessage" class="success-overlay" @click="hideSuccessMessage">
-        <div class="success-container" @click.stop>
-          <div class="success-icon">✅</div>
-          <div class="success-title">{{ successTitle }}</div>
-          <div class="success-content">
-            <div class="success-item">
-              <span class="success-label">会议室：</span>
-              <span class="success-value">{{ successData.roomName }}</span>
-            </div>
-            <div class="success-item">
-              <span class="success-label">日期：</span>
-              <span class="success-value">{{ successData.date }}</span>
-            </div>
-            <div class="success-item">
-              <span class="success-label">时间：</span>
-              <span class="success-value">{{ successData.time }}</span>
-            </div>
-            <div class="success-item">
-              <span class="success-label">时长：</span>
-              <span class="success-value">{{ successData.duration }}小时</span>
-            </div>
-            <div v-if="successData.isPreemptive" class="success-preempt-info">
-              <div class="preempt-info-title">已取消的会议：</div>
-              <div class="preempt-info-content">{{ successData.cancelledMeetings }}</div>
-            </div>
-          </div>
-          <div class="success-actions">
-            <t-button theme="primary" @click="hideSuccessMessage">确定</t-button>
-          </div>
-        </div>
-      </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, computed, watch, defineProps, defineEmits } from 'vue'
-import { Loading as TLoading, Tag as TTag, Button as TButton, MessagePlugin } from 'tdesign-vue-next'
-import { dataService } from '../index.js'
-
-// 组件属性接口
-const props = defineProps({
-  rooms: {
-    type: Array,
-    default: () => []
-  },
-  selectedDate: {
-    type: String,
-    default: ""
-  },
-  timeSlots: {
-    type: Array,
-    default: () => []
-  },
-  bookedSlots: {
-    type: Object,
-    default: () => ({})
-  },
-  loading: {
-    type: Boolean,
-    default: false
-  },
-  disabled: {
-    type: Boolean,
-    default: false
-  },
-  minDuration: {
-    type: Number,
-    default: 1
-  },
-  maxDuration: {
-    type: Number,
-    default: 8
-  },
-  // 新增API配置属性
-  roomQueryApiConfig: {
-    type: Object,
-    default: () => ({})
-  },
-  bookingApiConfig: {
-    type: Object,
-    default: () => ({})
-  },
-  bookingFormData: {
-    type: Object,
-    default: () => ({})
-  },
-  confirmButtonText: {
-    type: String,
-    default: '确认预约'
-  },
-  successTitle: {
-    type: String,
-    default: '预约成功'
-  },
-  preemptSuccessTitle: {
-    type: String,
-    default: '抢占预约成功'
-  }
-})
-
-// 定义事件
-const emit = defineEmits([
-  'room-select',
-  'time-select',
-  'booking-confirm',
-  'date-change',
-  'booking-success',
-  'booking-error',
-  'room-query-success',
-  'room-query-error'
-])
-
-// 响应式数据
-const currentDate = computed(() => {
-  return formatDate(props.selectedDate)
-})
-const selectedRoom = ref(null)
-const selectedTimeSlots = ref([])
-const bookingLoading = ref(false)
-const roomQueryLoading = ref(false)
-const showSuccessMessage = ref(false)
-const successData = ref({})
-const apiRoomList = ref([]) // 存储从API获取的会议室数据
-const showAllTimeSlots = ref(false)
-
-// 计算属性
-const roomList = computed(() => {
-  if (apiRoomList.value.length > 0) {
-    return apiRoomList.value.map(room => ({
-      id: room.conferenceId,
-      name: room.conferenceName,
-      capacity: room.capacity,
-      location: room.location,
-      equipment: [], 
-      timeSlots: room.timeSlots 
-    }))
-  }
-  return props.rooms
-})
-
-const timeSlotList = computed(() => {
-  if (props.timeSlots.length > 0) {
-    return props.timeSlots
-  }
-
-  if (apiRoomList.value.length > 0 && apiRoomList.value[0]?.timeSlots) {
-    return apiRoomList.value[0].timeSlots.map(slot => ({
-      value: slot.time,
-      label: slot.time,
-      hour: parseInt(slot.time.split(':')[0]),
-      minute: parseInt(slot.time.split(':')[1]),
-      userInfo: slot?.userInfo ?? null
-    }))
-  }
-
-  const slots = []
-  for (let hour = 0; hour < 24; 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 timeToMinutes = (timeStr) => {
-  const [hour, minute] = timeStr.split(':').map(Number)
-  return hour * 60 + minute
-}
-
-const compareTimes = (timeA, timeB) => {
-  const minutesA = timeToMinutes(timeA)
-  const minutesB = timeToMinutes(timeB)
-  if (minutesA === minutesB) return 0
-  return minutesA < minutesB ? -1 : 1
-}
-
-const _isTimeOverlap = (start1, end1, start2, end2) => {
-  const s1 = timeToMinutes(start1)
-  const e1 = timeToMinutes(end1)
-  const s2 = timeToMinutes(start2)
-  const e2 = timeToMinutes(end2)
-
-  return s1 < e2 && s2 < e1
-}
-
-const getEndTime = (startTime) => {
-  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 minutesToTime = (minutes) => {
-  const hour = Math.floor(minutes / 60)
-  const minute = minutes % 60
-  return `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`
-}
-
-const getCurrentTime = () => {
-  const now = new Date()
-  const hour = now.getHours().toString().padStart(2, '0')
-  const minute = now.getMinutes().toString().padStart(2, '0')
-  return `${hour}:${minute}`
-}
-
-// 状态检查方法
-const isSlotBooked = (roomId, timeSlot) => {
-  if (apiRoomList.value.length > 0) {
-    const room = apiRoomList.value.find(r => r.conferenceId == roomId)
-    if (room && room.timeSlots) {
-      const slot = room.timeSlots.find(s => s.time === timeSlot)
-      return slot ? slot.occupied : false
-    }
-  }
-  return props.bookedSlots[roomId]?.includes(timeSlot) || false
-}
-
-const bookedInfo = (roomId, timeSlot, type = 'name') => {
-  if (apiRoomList.value.length > 0) {
-    const room = apiRoomList.value.find(r => r.conferenceId == roomId)
-    if (room && room.timeSlots) {
-      const slot = room.timeSlots.find(s => s.time === timeSlot)
-      if (type === 'name') {
-        return slot?.userInfo?.name ? slot.userInfo.name : ''
-      } else {
-        return slot?.userInfo?.no ? slot.userInfo.no : ''
-      }
-    }
-  }
-  return ''
-}
-
-const isSlotSelected = (roomId, timeSlot) => {
-  return selectedRoom.value?.id === roomId && selectedTimeSlots.value.includes(timeSlot)
-}
-
-const isSlotDisabled = (_roomId, _timeSlot) => {
-  const today = formatDate(new Date().getTime());
-  if (currentDate.value === today && compareTimes(getCurrentTime(), _timeSlot) === 1) {
-    return true
-  }
-  return false
-}
-
-// 智能选择时间段 - 自动填充中间的时间段
-const getSmartSelectedSlots = (slots, roomId) => {
-  if (slots.length <= 1) return slots
-
-  const slotsInMinutes = slots.map(timeToMinutes).sort((a, b) => a - b)
-  const minTime = slotsInMinutes[0]
-  const maxTime = slotsInMinutes[slotsInMinutes.length - 1]
-
-  const continuousSlots = []
-  for (let time = minTime; time <= maxTime; time += 30) {
-    const timeStr = minutesToTime(time)
-
-    if (!isSlotBooked(roomId, timeStr)) {
-      continuousSlots.push(timeStr)
-    } else {
-      break
-    }
-  }
-
-  return continuousSlots
-}
-
-// 限制选择的时间段数量，保留以最新选择为中心的连续时间段
-const getLimitedSlots = (slots, latestSlot, maxDuration) => {
-  const latestMinutes = timeToMinutes(latestSlot)
-  const slotsInMinutes = slots.map(timeToMinutes).sort((a, b) => a - b)
-
-  const latestIndex = slotsInMinutes.indexOf(latestMinutes)
-
-  const halfDuration = Math.floor(maxDuration / 2)
-  const startIndex = Math.max(0, latestIndex - halfDuration)
-  const endIndex = Math.min(slotsInMinutes.length, startIndex + maxDuration)
-
-  const adjustedStartIndex = Math.max(0, endIndex - maxDuration)
-
-  return slotsInMinutes
-    .slice(adjustedStartIndex, endIndex)
-    .map(minutesToTime)
-}
-
-// 清理方法
-const clearTimeSelection = () => {
-  selectedTimeSlots.value = []
-}
-
-const clearSelection = () => {
-  selectedRoom.value = null
-  clearTimeSelection()
-}
-
-// 显示预约成功信息
-const showBookingSuccess = (bookingData) => {
-  successData.value = {
-    roomName: bookingData.room.name,
-    date: bookingData.date,
-    time: `${bookingData.startTime} - ${bookingData.endTime}`,
-    duration: bookingData.duration,
-    isPreemptive: bookingData.isPreemptive,
-    cancelledMeetings: bookingData.isPreemptive
-      ? bookingData.conflictMeetings?.map(m => m.title).join('、') || ''
-      : ''
-  }
-  showSuccessMessage.value = true
-}
-
-// 隐藏成功信息
-const hideSuccessMessage = () => {
-  showSuccessMessage.value = false
-  successData.value = {}
-  emit('booking-success', successData.value)
-}
-
-// 状态获取方法
-const getRoomStatusClass = (room) => {
-  const commonTimeSlots = timeSlotList.value.filter(slot =>
-    slot.hour >= 7 && slot.hour < 22
-  )
-
-  const availableSlots = commonTimeSlots.filter(slot =>
-    !isSlotBooked(room.id, slot.value)
-  ).length
-
-  if (availableSlots === 0) return 'fully-booked'
-  if (availableSlots < commonTimeSlots.length / 2) return 'partially-available'
-  return 'available'
-}
-
-const getRoomStatusText = (room) => {
-  const commonTimeSlots = timeSlotList.value.filter(slot =>
-    slot.hour >= 7 && slot.hour < 22
-  )
-
-  const availableSlots = commonTimeSlots.filter(slot =>
-    !isSlotBooked(room.id, slot.value)
-  ).length
-
-  if (availableSlots === 0) return '已满'
-  if (availableSlots < commonTimeSlots.length / 2) return '紧张'
-  return '充足'
-}
-
-const formatSelectedTime = () => {
-  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 * 0.5,
-    timeSlots: sortedSlots
-  }
-})
-
-const formatDate = (timestamp) => {
-  const date = new Date(timestamp)
-  const year = date.getFullYear()
-  const month = String(date.getMonth() + 1).padStart(2, '0')
-  const day = String(date.getDate()).padStart(2, '0')
-  return `${year}-${month}-${day}`
-}
-
-// API调用方法
-const queryRooms = async (date) => {
-  try {
-    roomQueryLoading.value = true
-
-    if (!date) {
-      date = props.selectedDate
-    }
-    const queryParams = {
-      date: props.selectedDate,
-      requestTime: new Date().getTime()
-    }
-
-    let response
-    if (props.roomQueryApiConfig && Object.keys(props.roomQueryApiConfig).length > 0) {
-      response = await dataService.fetch(queryParams, props.roomQueryApiConfig)
-    } else {
-      if (typeof props.selectedDate === 'number') {
-        queryParams.date = formatDate(props.selectedDate)
-      }
-
-      response = await dataService.fetch(queryParams, {}, "/appdata/execute/plugin?key=get-meetingRoomOccupy-info&date=" + queryParams.date)
-    }
-
-    const roomData = response.meetingRooms
-    apiRoomList.value = roomData
-
-    emit('room-query-success', {
-      success: true,
-      message: '查询成功',
-      data: roomData
-    })
-  } catch (error) {
-    emit('room-query-error', error)
-    MessagePlugin.error({
-      duration: 3000,
-      content: error.message || '查询会议室失败'
-    })
-  } finally {
-    roomQueryLoading.value = false
-  }
-}
-
-const handleBeforeSubmit = (bookingData) => {
-  try {
-    emit('before-submit', bookingData)
-  } catch (error) {
-    throw new Error(error.message)
-  }
-}
-const submitBooking = async (bookingData) => {
-  if (!props.bookingApiConfig || Object.keys(props.bookingApiConfig).length === 0) {
-    emit('booking-confirm', bookingData)
-    return
-  }
-
-  try {
-    bookingLoading.value = true
-
-    let date = formatDate(props.selectedDate)
-    const submitData = {
-      ...props.bookingFormData,
-      conference_id: bookingData.room.id,
-      roomName: bookingData.room.name,
-      date: date,
-      start_time: new Date(date + " " + bookingData.startTime + ":00").getTime(),
-      end_time: new Date(date + " " + bookingData.endTime + ":00") - 1,
-      duration: bookingData.duration,
-      timeSlots: bookingData.timeSlots,
-      requestTime: new Date().getTime(),
-    }
-
-    const response = await dataService.fetch({ saveData: submitData }, props.bookingApiConfig)
-
-    showBookingSuccess(bookingData)
-
-  } catch (error) {
-    emit('booking-error', error)
-    MessagePlugin.error({
-      duration: 3000,
-      content: error.message || '预约失败'
-    })
-  } finally {
-    bookingLoading.value = false
-  }
-}
-
-// 事件处理方法
-const handleRoomSelect = (room) => {
-  if (selectedRoom.value?.id === room.id) {
-    return
-  } else {
-    selectedRoom.value = room
-    clearTimeSelection()
-    emit('room-select', room)
-  }
-}
-
-const handleTimeSlotClick = (room, slot) => {
-  if (props.disabled || isSlotDisabled(room.id, slot.value) || isSlotBooked(room.id, slot.value)) {
-    return
-  }
-
-  if (!selectedRoom.value || selectedRoom.value.id !== room.id) {
-    selectedRoom.value = room
-    emit('room-select', room)
-  }
-
-  const slotIndex = selectedTimeSlots.value.indexOf(slot.value)
-
-  if (slotIndex > -1) {
-    selectedTimeSlots.value.splice(slotIndex, 1)
-  } else {
-    if (selectedTimeSlots.value.length === 0) {
-      selectedTimeSlots.value.push(slot.value)
-    } else {
-      const newSlots = [...selectedTimeSlots.value, slot.value]
-      selectedTimeSlots.value = getSmartSelectedSlots(newSlots, room.id)
-    }
-
-    if (selectedTimeSlots.value.length > props.maxDuration) {
-      selectedTimeSlots.value = getLimitedSlots(selectedTimeSlots.value, slot.value, props.maxDuration)
-    }
-  }
-
-  selectedTimeSlots.value = [...selectedTimeSlots.value]
-
-  emit('time-select', currentSelection.value)
-}
-
-const handleConfirmBooking = async () => {
-  if (!currentSelection.value) return
-
-  const bookingData = {
-    room: selectedRoom.value,
-    date: currentDate.value,
-    startTime: currentSelection.value.startTime,
-    endTime: currentSelection.value.endTime,
-    duration: currentSelection.value.duration,
-    timeSlots: currentSelection.value.timeSlots,
-    isPreemptive: false,
-    conflictMeetings: []
-  }
-
-  handleBeforeSubmit(bookingData)
-}
-
-const handleCancelSelection = () => {
-  clearSelection()
-}
-
-// 时间筛选功能
-const toggleTimeFilter = () => {
-  showAllTimeSlots.value = !showAllTimeSlots.value
-}
-
-// 监听属性变化
-watch(() => props.selectedDate, (newDate) => {
-})
-
-// 新增计算属性
-const filteredTimeSlotList = computed(() => {
-  if (showAllTimeSlots.value) {
-    return timeSlotList.value
-  } else {
-    return timeSlotList.value.filter(slot =>
-      slot.hour >= 7 && slot.hour < 22
-    )
-  }
-})
-
-// 辅助方法：将时间戳转换为时间段数组
-const getTimeSlotsFromRange = (startTime, endTime) => {
-  const slots = []
-  let current = new Date(startTime)
-  const end = new Date(endTime)
-  while (current < end) {
-    const hour = current.getHours().toString().padStart(2, '0')
-    const minutes = current.getMinutes().toString().padStart(2, '0')
-    slots.push(`${hour}:${minutes}`)
-    current.setMinutes(current.getMinutes() + 30)
-  }
-  return slots
-}
-
-// 初始化选中的会议室和时间段
-const initializeSelection = async (bookingData) => {
-  const roomId = bookingData.conference_id
-  const startTime = bookingData.start_time
-  const endTime = bookingData.end_time
-  
-  if (!startTime || !endTime) return
-  
-  const rawSlots = getTimeSlotsFromRange(startTime, endTime)
-  
-  if (apiRoomList.value.length === 0) {
-    await queryRooms()
-  }
-  
-  const room = roomList.value.find(r => r.id === roomId)
-  if (!room) return
-  
-  const validSlots = rawSlots.filter(slot => !isSlotBooked(roomId, slot))
-  
-  selectedRoom.value = room
-  
-  selectedTimeSlots.value = validSlots
-}
-
-// 监听bookingFormData变化，进行初始化选中
-watch(() => props.bookingFormData, async (newVal) => {
-  if (newVal && newVal.conference_id && newVal.start_time && newVal.end_time) {
-    await initializeSelection(newVal)
-  }
-}, { deep: true, immediate: true })
-
-// 暴露组件实例方法
-defineExpose({
-  clearSelection,
-  clearTimeSelection,
-  getCurrentSelection: () => currentSelection.value,
-  queryRooms,
-  submitBooking,
-  showBookingSuccess,
-  hideSuccessMessage,
-  toggleTimeFilter,
-  getApiRoomList: () => apiRoomList.value,
-  refreshRooms: queryRooms,
-  getShowAllTimeSlots: () => showAllTimeSlots.value,
-  setShowAllTimeSlots: (value) => { showAllTimeSlots.value = value },
-  compareTimes,
-  getCurrentTime
-})
-</script>
-
-<style scoped>
-.ebiz-meeting-room-selector {
-  padding-bottom: 280px;
-  position: relative;
-  transform: translateX(0px);
-}
-
-.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-controls {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.time-filter-btn {
-  flex-shrink: 0;
-}
-
-.time-filter-btn .t-button {
-  height: 24px;
-  padding: 0 8px;
-  font-size: 11px;
-  border-radius: 12px;
-}
-
-.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: 12px;
-}
-
-.time-slot {
-  background: #f6ffed;
-  border: 1px solid #52c41a;
-  border-radius: 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: #f5f5f5;
-  border-color: #d9d9d9;
-  cursor: not-allowed;
-}
-
-.slot-content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 4px;
-}
-
-.slot-time {
-  font-size: 14px;
-  font-weight: 500;
-}
-
-.status-icon {
-  font-size: 14px;
-  color: #666;
-  word-break: break-all;
-}
-
-.booking-panel {
-  position: fixed;
-  bottom: 0;
-  left: 8px;
-  right: 8px;
-  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: 24px;
-}
-
-.booking-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 16px;
-}
-
-.booking-header h4 {
-  margin: 0;
-  font-size: 18px;
-  font-weight: 600;
-  color: #333;
-}
-
-.booking-info {
-  margin-bottom: 24px;
-}
-
-.info-row {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 8px 0;
-  font-size: 16px;
-}
-
-.label {
-  color: #666;
-  font-weight: 500;
-}
-
-.value {
-  color: #333;
-  font-weight: 600;
-}
-
-.booking-actions {
-  margin-top: 16px;
-}
-
-/* 预约成功提示样式 */
-.success-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
-  animation: fadeIn 0.3s ease;
-}
-
-.success-container {
-  background: #fff;
-  border-radius: 16px;
-  padding: 32px;
-  margin: 20px;
-  max-width: 500px;
-  width: 100%;
-  text-align: center;
-  animation: slideUpSuccess 0.3s ease;
-}
-
-.success-icon {
-  font-size: 40px;
-  margin-bottom: 24px;
-}
-
-.success-title {
-  font-size: 24px;
-  font-weight: 600;
-  color: #333;
-  margin-bottom: 24px;
-}
-
-.success-content {
-  text-align: left;
-  margin-bottom: 32px;
-}
-
-.success-item {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 12px 0;
-  border-bottom: 1px solid #f0f0f0;
-}
-
-.success-item:last-child {
-  border-bottom: none;
-}
-
-.success-label {
-  font-size: 16px;
-  color: #666;
-}
-
-.success-value {
-  font-size: 16px;
-  font-weight: 500;
-  color: #333;
-}
-
-.success-preempt-info {
-  margin-top: 16px;
-  padding: 16px;
-  background: #fff7e6;
-  border-radius: 8px;
-  border-left: 4px solid #fa8c16;
-}
-
-.preempt-info-title {
-  font-size: 14px;
-  color: #d46b08;
-  font-weight: 600;
-  margin-bottom: 8px;
-}
-
-.preempt-info-content {
-  font-size: 14px;
-  color: #d46b08;
-  line-height: 1.4;
-}
-
-.success-actions {
-  text-align: center;
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes slideUpSuccess {
-  from {
-    transform: translateY(30px);
-    opacity: 0;
-  }
-
-  to {
-    transform: translateY(0);
-    opacity: 1;
-  }
-}
-
-/* 响应式设计 */
-@media (max-width: 768px) {
-  .time-slots-grid {
-    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
-    gap: 8px;
-  }
-
-  .time-slot {
-    min-height: 60px;
-  }
-
-  .slot-time {
-    font-size: 12px;
-  }
-
-  .status-icon {
-    font-size: 12px;
-  }
-
-  .success-container {
-    margin: 10px;
-  }
-}
+<template>
+  <div>
+    <div class="ebiz-meeting-room-selector">
+      <!-- 头部区域 -->
+      <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-controls">
+                    <div class="room-status" :class="getRoomStatusClass(room)">
+                      {{ getRoomStatusText(room) }}
+                    </div>
+                    <div v-if="selectedRoom?.id === room.id" class="time-filter-btn">
+                      <t-button size="small" variant="outline" theme="primary" @click.stop="toggleTimeFilter">
+                        {{ showAllTimeSlots ? '常用时间' : '全部时间' }}
+                      </t-button>
+                    </div>
+                  </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 filteredTimeSlotList" :key="slot.value" class="time-slot" :class="{
+                  'booked': isSlotBooked(room.id, slot.value),
+                  'selected': isSlotSelected(room.id, slot.value),
+                  'disabled': props.disabled || isSlotDisabled(room.id, slot.value)
+                }" @click="handleTimeSlotClick(room, slot)">
+                  <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 style="display:block;margin-bottom: 4px;">已预约</span>
+                        <span style="display: block;">{{ bookedInfo(room.id, slot.value, 'name') }} </span>
+                        <span style="display: block;">{{ bookedInfo(room.id, slot.value, 'no') }} </span>
+                      </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>
+                </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">{{ formatDate(selectedDate) }}</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 :loading="bookingLoading" @click="handleConfirmBooking">
+                {{ confirmButtonText }}
+              </t-button>
+            </div>
+          </div>
+        </slot>
+      </div>
+    </div>
+      <!-- 预约成功提示组件 -->
+      <div v-if="showSuccessMessage" class="success-overlay" @click="hideSuccessMessage">
+        <div class="success-container" @click.stop>
+          <div class="success-icon">✅</div>
+          <div class="success-title">{{ successTitle }}</div>
+          <div class="success-content">
+            <div class="success-item">
+              <span class="success-label">会议室：</span>
+              <span class="success-value">{{ successData.roomName }}</span>
+            </div>
+            <div class="success-item">
+              <span class="success-label">日期：</span>
+              <span class="success-value">{{ successData.date }}</span>
+            </div>
+            <div class="success-item">
+              <span class="success-label">时间：</span>
+              <span class="success-value">{{ successData.time }}</span>
+            </div>
+            <div class="success-item">
+              <span class="success-label">时长：</span>
+              <span class="success-value">{{ successData.duration }}小时</span>
+            </div>
+            <div v-if="successData.isPreemptive" class="success-preempt-info">
+              <div class="preempt-info-title">已取消的会议：</div>
+              <div class="preempt-info-content">{{ successData.cancelledMeetings }}</div>
+            </div>
+          </div>
+          <div class="success-actions">
+            <t-button theme="primary" @click="hideSuccessMessage">确定</t-button>
+          </div>
+        </div>
+      </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, defineProps, defineEmits } from 'vue'
+import { Loading as TLoading, Tag as TTag, Button as TButton, MessagePlugin } from 'tdesign-vue-next'
+import { dataService } from '../index.js'
+
+// 组件属性接口
+const props = defineProps({
+  rooms: {
+    type: Array,
+    default: () => []
+  },
+  selectedDate: {
+    type: String,
+    default: ""
+  },
+  timeSlots: {
+    type: Array,
+    default: () => []
+  },
+  bookedSlots: {
+    type: Object,
+    default: () => ({})
+  },
+  loading: {
+    type: Boolean,
+    default: false
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  minDuration: {
+    type: Number,
+    default: 1
+  },
+  maxDuration: {
+    type: Number,
+    default: 8
+  },
+  // 新增API配置属性
+  roomQueryApiConfig: {
+    type: Object,
+    default: () => ({})
+  },
+  bookingApiConfig: {
+    type: Object,
+    default: () => ({})
+  },
+  bookingFormData: {
+    type: Object,
+    default: () => ({})
+  },
+  confirmButtonText: {
+    type: String,
+    default: '确认预约'
+  },
+  successTitle: {
+    type: String,
+    default: '预约成功'
+  },
+  preemptSuccessTitle: {
+    type: String,
+    default: '抢占预约成功'
+  }
+})
+
+// 定义事件
+const emit = defineEmits([
+  'room-select',
+  'time-select',
+  'booking-confirm',
+  'date-change',
+  'booking-success',
+  'booking-error',
+  'room-query-success',
+  'room-query-error'
+])
+
+// 响应式数据
+const currentDate = computed(() => {
+  return formatDate(props.selectedDate)
+})
+const selectedRoom = ref(null)
+const selectedTimeSlots = ref([])
+const bookingLoading = ref(false)
+const roomQueryLoading = ref(false)
+const showSuccessMessage = ref(false)
+const successData = ref({})
+const apiRoomList = ref([]) // 存储从API获取的会议室数据
+const showAllTimeSlots = ref(false)
+
+// 计算属性
+const roomList = computed(() => {
+  if (apiRoomList.value.length > 0) {
+    return apiRoomList.value.map(room => ({
+      id: room.conferenceId,
+      name: room.conferenceName,
+      capacity: room.capacity,
+      location: room.location,
+      equipment: [], 
+      timeSlots: room.timeSlots 
+    }))
+  }
+  return props.rooms
+})
+
+const timeSlotList = computed(() => {
+  if (props.timeSlots.length > 0) {
+    return props.timeSlots
+  }
+
+  if (apiRoomList.value.length > 0 && apiRoomList.value[0]?.timeSlots) {
+    return apiRoomList.value[0].timeSlots.map(slot => ({
+      value: slot.time,
+      label: slot.time,
+      hour: parseInt(slot.time.split(':')[0]),
+      minute: parseInt(slot.time.split(':')[1]),
+      userInfo: slot?.userInfo ?? null
+    }))
+  }
+
+  const slots = []
+  for (let hour = 0; hour < 24; 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 timeToMinutes = (timeStr) => {
+  const [hour, minute] = timeStr.split(':').map(Number)
+  return hour * 60 + minute
+}
+
+const compareTimes = (timeA, timeB) => {
+  const minutesA = timeToMinutes(timeA)
+  const minutesB = timeToMinutes(timeB)
+  if (minutesA === minutesB) return 0
+  return minutesA < minutesB ? -1 : 1
+}
+
+const _isTimeOverlap = (start1, end1, start2, end2) => {
+  const s1 = timeToMinutes(start1)
+  const e1 = timeToMinutes(end1)
+  const s2 = timeToMinutes(start2)
+  const e2 = timeToMinutes(end2)
+
+  return s1 < e2 && s2 < e1
+}
+
+const getEndTime = (startTime) => {
+  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 minutesToTime = (minutes) => {
+  const hour = Math.floor(minutes / 60)
+  const minute = minutes % 60
+  return `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`
+}
+
+const getCurrentTime = () => {
+  const now = new Date()
+  const hour = now.getHours().toString().padStart(2, '0')
+  const minute = now.getMinutes().toString().padStart(2, '0')
+  return `${hour}:${minute}`
+}
+
+// 状态检查方法
+const isSlotBooked = (roomId, timeSlot) => {
+  if (apiRoomList.value.length > 0) {
+    const room = apiRoomList.value.find(r => r.conferenceId == roomId)
+    if (room && room.timeSlots) {
+      const slot = room.timeSlots.find(s => s.time === timeSlot)
+      return slot ? slot.occupied : false
+    }
+  }
+  return props.bookedSlots[roomId]?.includes(timeSlot) || false
+}
+
+const bookedInfo = (roomId, timeSlot, type = 'name') => {
+  if (apiRoomList.value.length > 0) {
+    const room = apiRoomList.value.find(r => r.conferenceId == roomId)
+    if (room && room.timeSlots) {
+      const slot = room.timeSlots.find(s => s.time === timeSlot)
+      if (type === 'name') {
+        return slot?.userInfo?.name ? slot.userInfo.name : ''
+      } else {
+        return slot?.userInfo?.no ? slot.userInfo.no : ''
+      }
+    }
+  }
+  return ''
+}
+
+const isSlotSelected = (roomId, timeSlot) => {
+  return selectedRoom.value?.id === roomId && selectedTimeSlots.value.includes(timeSlot)
+}
+
+const isSlotDisabled = (_roomId, _timeSlot) => {
+  const today = formatDate(new Date().getTime());
+  if (currentDate.value === today && compareTimes(getCurrentTime(), _timeSlot) === 1) {
+    return true
+  }
+  return false
+}
+
+// 智能选择时间段 - 自动填充中间的时间段
+const getSmartSelectedSlots = (slots, roomId) => {
+  if (slots.length <= 1) return slots
+
+  const slotsInMinutes = slots.map(timeToMinutes).sort((a, b) => a - b)
+  const minTime = slotsInMinutes[0]
+  const maxTime = slotsInMinutes[slotsInMinutes.length - 1]
+
+  const continuousSlots = []
+  for (let time = minTime; time <= maxTime; time += 30) {
+    const timeStr = minutesToTime(time)
+
+    if (!isSlotBooked(roomId, timeStr)) {
+      continuousSlots.push(timeStr)
+    } else {
+      break
+    }
+  }
+
+  return continuousSlots
+}
+
+// 限制选择的时间段数量，保留以最新选择为中心的连续时间段
+const getLimitedSlots = (slots, latestSlot, maxDuration) => {
+  const latestMinutes = timeToMinutes(latestSlot)
+  const slotsInMinutes = slots.map(timeToMinutes).sort((a, b) => a - b)
+
+  const latestIndex = slotsInMinutes.indexOf(latestMinutes)
+
+  const halfDuration = Math.floor(maxDuration / 2)
+  const startIndex = Math.max(0, latestIndex - halfDuration)
+  const endIndex = Math.min(slotsInMinutes.length, startIndex + maxDuration)
+
+  const adjustedStartIndex = Math.max(0, endIndex - maxDuration)
+
+  return slotsInMinutes
+    .slice(adjustedStartIndex, endIndex)
+    .map(minutesToTime)
+}
+
+// 清理方法
+const clearTimeSelection = () => {
+  selectedTimeSlots.value = []
+}
+
+const clearSelection = () => {
+  selectedRoom.value = null
+  clearTimeSelection()
+}
+
+// 显示预约成功信息
+const showBookingSuccess = (bookingData) => {
+  successData.value = {
+    roomName: bookingData.room.name,
+    date: bookingData.date,
+    time: `${bookingData.startTime} - ${bookingData.endTime}`,
+    duration: bookingData.duration,
+    isPreemptive: bookingData.isPreemptive,
+    cancelledMeetings: bookingData.isPreemptive
+      ? bookingData.conflictMeetings?.map(m => m.title).join('、') || ''
+      : ''
+  }
+  showSuccessMessage.value = true
+}
+
+// 隐藏成功信息
+const hideSuccessMessage = () => {
+  showSuccessMessage.value = false
+  successData.value = {}
+  emit('booking-success', successData.value)
+}
+
+// 状态获取方法
+const getRoomStatusClass = (room) => {
+  const commonTimeSlots = timeSlotList.value.filter(slot =>
+    slot.hour >= 7 && slot.hour < 22
+  )
+
+  const availableSlots = commonTimeSlots.filter(slot =>
+    !isSlotBooked(room.id, slot.value)
+  ).length
+
+  if (availableSlots === 0) return 'fully-booked'
+  if (availableSlots < commonTimeSlots.length / 2) return 'partially-available'
+  return 'available'
+}
+
+const getRoomStatusText = (room) => {
+  const commonTimeSlots = timeSlotList.value.filter(slot =>
+    slot.hour >= 7 && slot.hour < 22
+  )
+
+  const availableSlots = commonTimeSlots.filter(slot =>
+    !isSlotBooked(room.id, slot.value)
+  ).length
+
+  if (availableSlots === 0) return '已满'
+  if (availableSlots < commonTimeSlots.length / 2) return '紧张'
+  return '充足'
+}
+
+const formatSelectedTime = () => {
+  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 * 0.5,
+    timeSlots: sortedSlots
+  }
+})
+
+const formatDate = (timestamp) => {
+  const date = new Date(timestamp)
+  const year = date.getFullYear()
+  const month = String(date.getMonth() + 1).padStart(2, '0')
+  const day = String(date.getDate()).padStart(2, '0')
+  return `${year}-${month}-${day}`
+}
+
+// API调用方法
+const queryRooms = async (date) => {
+  try {
+    roomQueryLoading.value = true
+
+    if (!date) {
+      date = props.selectedDate
+    }
+    const queryParams = {
+      date: props.selectedDate,
+      requestTime: new Date().getTime()
+    }
+
+    let response
+    if (props.roomQueryApiConfig && Object.keys(props.roomQueryApiConfig).length > 0) {
+      response = await dataService.fetch(queryParams, props.roomQueryApiConfig)
+    } else {
+      if (typeof props.selectedDate === 'number') {
+        queryParams.date = formatDate(props.selectedDate)
+      }
+
+      response = await dataService.fetch(queryParams, {}, "/appdata/execute/plugin?key=get-meetingRoomOccupy-info&date=" + queryParams.date)
+    }
+
+    const roomData = response.meetingRooms
+    apiRoomList.value = roomData
+
+    emit('room-query-success', {
+      success: true,
+      message: '查询成功',
+      data: roomData
+    })
+  } catch (error) {
+    emit('room-query-error', error)
+    MessagePlugin.error({
+      duration: 3000,
+      content: error.message || '查询会议室失败'
+    })
+  } finally {
+    roomQueryLoading.value = false
+  }
+}
+
+const handleBeforeSubmit = (bookingData) => {
+  try {
+    emit('before-submit', bookingData)
+  } catch (error) {
+    throw new Error(error.message)
+  }
+}
+const submitBooking = async (bookingData) => {
+  if (!props.bookingApiConfig || Object.keys(props.bookingApiConfig).length === 0) {
+    emit('booking-confirm', bookingData)
+    return
+  }
+
+  try {
+    bookingLoading.value = true
+
+    let date = formatDate(props.selectedDate)
+    const submitData = {
+      ...props.bookingFormData,
+      conference_id: bookingData.room.id,
+      roomName: bookingData.room.name,
+      date: date,
+      start_time: new Date(date + " " + bookingData.startTime + ":00").getTime(),
+      end_time: new Date(date + " " + bookingData.endTime + ":00") - 1,
+      duration: bookingData.duration,
+      timeSlots: bookingData.timeSlots,
+      requestTime: new Date().getTime(),
+    }
+
+    const response = await dataService.fetch({ saveData: submitData }, props.bookingApiConfig)
+
+    showBookingSuccess(bookingData)
+
+  } catch (error) {
+    emit('booking-error', error)
+    MessagePlugin.error({
+      duration: 3000,
+      content: error.message || '预约失败'
+    })
+  } finally {
+    bookingLoading.value = false
+  }
+}
+
+// 事件处理方法
+const handleRoomSelect = (room) => {
+  if (selectedRoom.value?.id === room.id) {
+    return
+  } else {
+    selectedRoom.value = room
+    clearTimeSelection()
+    emit('room-select', room)
+  }
+}
+
+const handleTimeSlotClick = (room, slot) => {
+  if (props.disabled || isSlotDisabled(room.id, slot.value) || isSlotBooked(room.id, slot.value)) {
+    return
+  }
+
+  if (!selectedRoom.value || selectedRoom.value.id !== room.id) {
+    selectedRoom.value = room
+    emit('room-select', room)
+  }
+
+  const slotIndex = selectedTimeSlots.value.indexOf(slot.value)
+
+  if (slotIndex > -1) {
+    selectedTimeSlots.value.splice(slotIndex, 1)
+  } else {
+    if (selectedTimeSlots.value.length === 0) {
+      selectedTimeSlots.value.push(slot.value)
+    } else {
+      const newSlots = [...selectedTimeSlots.value, slot.value]
+      selectedTimeSlots.value = getSmartSelectedSlots(newSlots, room.id)
+    }
+
+    if (selectedTimeSlots.value.length > props.maxDuration) {
+      selectedTimeSlots.value = getLimitedSlots(selectedTimeSlots.value, slot.value, props.maxDuration)
+    }
+  }
+
+  selectedTimeSlots.value = [...selectedTimeSlots.value]
+
+  emit('time-select', currentSelection.value)
+}
+
+const handleConfirmBooking = async () => {
+  if (!currentSelection.value) return
+
+  const bookingData = {
+    room: selectedRoom.value,
+    date: currentDate.value,
+    startTime: currentSelection.value.startTime,
+    endTime: currentSelection.value.endTime,
+    duration: currentSelection.value.duration,
+    timeSlots: currentSelection.value.timeSlots,
+    isPreemptive: false,
+    conflictMeetings: []
+  }
+
+  handleBeforeSubmit(bookingData)
+}
+
+const handleCancelSelection = () => {
+  clearSelection()
+}
+
+// 时间筛选功能
+const toggleTimeFilter = () => {
+  showAllTimeSlots.value = !showAllTimeSlots.value
+}
+
+// 监听属性变化
+watch(() => props.selectedDate, (newDate) => {
+})
+
+// 新增计算属性
+const filteredTimeSlotList = computed(() => {
+  if (showAllTimeSlots.value) {
+    return timeSlotList.value
+  } else {
+    return timeSlotList.value.filter(slot =>
+      slot.hour >= 7 && slot.hour < 22
+    )
+  }
+})
+
+// 辅助方法：将时间戳转换为时间段数组
+const getTimeSlotsFromRange = (startTime, endTime) => {
+  const slots = []
+  let current = new Date(startTime)
+  const end = new Date(endTime)
+  while (current < end) {
+    const hour = current.getHours().toString().padStart(2, '0')
+    const minutes = current.getMinutes().toString().padStart(2, '0')
+    slots.push(`${hour}:${minutes}`)
+    current.setMinutes(current.getMinutes() + 30)
+  }
+  return slots
+}
+
+// 初始化选中的会议室和时间段
+const initializeSelection = async (bookingData) => {
+  const roomId = bookingData.conference_id
+  const startTime = bookingData.start_time
+  const endTime = bookingData.end_time
+  
+  if (!startTime || !endTime) return
+  
+  const rawSlots = getTimeSlotsFromRange(startTime, endTime)
+  
+  if (apiRoomList.value.length === 0) {
+    await queryRooms()
+  }
+  
+  const room = roomList.value.find(r => r.id === roomId)
+  if (!room) return
+  
+  const validSlots = rawSlots.filter(slot => !isSlotBooked(roomId, slot))
+  
+  selectedRoom.value = room
+  
+  selectedTimeSlots.value = validSlots
+}
+
+// 监听bookingFormData变化，进行初始化选中
+watch(() => props.bookingFormData, async (newVal) => {
+  if (newVal && newVal.conference_id && newVal.start_time && newVal.end_time) {
+    await initializeSelection(newVal)
+  }
+}, { deep: true, immediate: true })
+
+// 暴露组件实例方法
+defineExpose({
+  clearSelection,
+  clearTimeSelection,
+  getCurrentSelection: () => currentSelection.value,
+  queryRooms,
+  submitBooking,
+  showBookingSuccess,
+  hideSuccessMessage,
+  toggleTimeFilter,
+  getApiRoomList: () => apiRoomList.value,
+  refreshRooms: queryRooms,
+  getShowAllTimeSlots: () => showAllTimeSlots.value,
+  setShowAllTimeSlots: (value) => { showAllTimeSlots.value = value },
+  compareTimes,
+  getCurrentTime
+})
+</script>
+
+<style scoped>
+.ebiz-meeting-room-selector {
+  padding-bottom: 280px;
+  position: relative;
+  transform: translateX(0px);
+}
+
+.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-controls {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.time-filter-btn {
+  flex-shrink: 0;
+}
+
+.time-filter-btn .t-button {
+  height: 24px;
+  padding: 0 8px;
+  font-size: 11px;
+  border-radius: 12px;
+}
+
+.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: 12px;
+}
+
+.time-slot {
+  background: #f6ffed;
+  border: 1px solid #52c41a;
+  border-radius: 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: #f5f5f5;
+  border-color: #d9d9d9;
+  cursor: not-allowed;
+}
+
+.slot-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+}
+
+.slot-time {
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.status-icon {
+  font-size: 14px;
+  color: #666;
+  word-break: break-all;
+}
+
+.booking-panel {
+  position: fixed;
+  bottom: 0;
+  left: 8px;
+  right: 8px;
+  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: 24px;
+}
+
+.booking-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.booking-header h4 {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 600;
+  color: #333;
+}
+
+.booking-info {
+  margin-bottom: 24px;
+}
+
+.info-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 0;
+  font-size: 16px;
+}
+
+.label {
+  color: #666;
+  font-weight: 500;
+}
+
+.value {
+  color: #333;
+  font-weight: 600;
+}
+
+.booking-actions {
+  margin-top: 16px;
+}
+
+/* 预约成功提示样式 */
+.success-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  animation: fadeIn 0.3s ease;
+}
+
+.success-container {
+  background: #fff;
+  border-radius: 16px;
+  padding: 32px;
+  margin: 20px;
+  max-width: 500px;
+  width: 100%;
+  text-align: center;
+  animation: slideUpSuccess 0.3s ease;
+}
+
+.success-icon {
+  font-size: 40px;
+  margin-bottom: 24px;
+}
+
+.success-title {
+  font-size: 24px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 24px;
+}
+
+.success-content {
+  text-align: left;
+  margin-bottom: 32px;
+}
+
+.success-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 0;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.success-item:last-child {
+  border-bottom: none;
+}
+
+.success-label {
+  font-size: 16px;
+  color: #666;
+}
+
+.success-value {
+  font-size: 16px;
+  font-weight: 500;
+  color: #333;
+}
+
+.success-preempt-info {
+  margin-top: 16px;
+  padding: 16px;
+  background: #fff7e6;
+  border-radius: 8px;
+  border-left: 4px solid #fa8c16;
+}
+
+.preempt-info-title {
+  font-size: 14px;
+  color: #d46b08;
+  font-weight: 600;
+  margin-bottom: 8px;
+}
+
+.preempt-info-content {
+  font-size: 14px;
+  color: #d46b08;
+  line-height: 1.4;
+}
+
+.success-actions {
+  text-align: center;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes slideUpSuccess {
+  from {
+    transform: translateY(30px);
+    opacity: 0;
+  }
+
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .time-slots-grid {
+    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
+    gap: 8px;
+  }
+
+  .time-slot {
+    min-height: 60px;
+  }
+
+  .slot-time {
+    font-size: 12px;
+  }
+
+  .status-icon {
+    font-size: 12px;
+  }
+
+  .success-container {
+    margin: 10px;
+  }
+}
 </style>