@ebiz/designer-components 0.1.2 → 0.1.4

package/src/views/EbizMeetingRoomSelectorDemo.vue

@@ -1,294 +1,294 @@
-<template>
-  <div class="demo-container">
-    <h2>EbizMeetingRoomSelector 会议室选择组件演示</h2>
-    
-    <div class="demo-section">
-      <h3>基础用法</h3>
-      <EbizMeetingRoomSelector
-        v-bind="demoProps"
-        @room-select="handleRoomSelect"
-        @time-select="handleTimeSelect"
-        @booking-confirm="handleBookingConfirm"
-        @date-change="handleDateChange"
-      />
-    </div>
-
-    <div class="demo-section">
-      <h3>属性配置</h3>
-      <div class="config-panel">
-        <div class="config-item">
-          <label>加载状态：</label>
-          <input type="checkbox" v-model="demoProps.loading" />
-        </div>
-        <div class="config-item">
-          <label>禁用状态：</label>
-          <input type="checkbox" v-model="demoProps.disabled" />
-        </div>
-        <div class="config-item">
-          <label>最小预约时长：</label>
-          <input type="number" v-model="demoProps.minDuration" min="1" max="8" />
-        </div>
-        <div class="config-item">
-          <label>最大预约时长：</label>
-          <input type="number" v-model="demoProps.maxDuration" min="1" max="16" />
-        </div>
-      </div>
-    </div>
-
-    <div class="demo-section">
-      <h3>事件日志</h3>
-      <div class="event-log">
-        <div v-for="(log, index) in eventLogs" :key="index" class="log-item">
-          <span class="log-time">{{ log.time }}</span>
-          <span class="log-event">{{ log.event }}</span>
-          <span class="log-data">{{ log.data }}</span>
-        </div>
-      </div>
-    </div>
-
-    <div class="demo-section">
-      <h3>数据结构</h3>
-      <div class="data-structure">
-        <h4>会议室数据格式：</h4>
-        <pre>{{ JSON.stringify(sampleRoom, null, 2) }}</pre>
-        
-        <h4>已预约时间段格式：</h4>
-        <pre>{{ JSON.stringify(sampleBookedSlots, null, 2) }}</pre>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, reactive } from 'vue'
-import { EbizMeetingRoomSelector } from '../index.js'
-
-// 模拟会议室数据
-const mockRooms = [
-  {
-    id: 'room-001',
-    name: '会议室A',
-    capacity: 10,
-    location: '3楼东侧',
-    equipment: ['投影仪', '白板', '视频会议']
-  },
-  {
-    id: 'room-002',
-    name: '会议室B',
-    capacity: 6,
-    location: '3楼西侧',
-    equipment: ['投影仪', '白板']
-  },
-  {
-    id: 'room-003',
-    name: '大会议室',
-    capacity: 20,
-    location: '4楼中央',
-    equipment: ['投影仪', '音响', '视频会议', '同声传译']
-  },
-  {
-    id: 'room-004',
-    name: '小会议室',
-    capacity: 4,
-    location: '2楼南侧',
-    equipment: ['白板']
-  }
-]
-
-// 模拟已预约时间段
-const mockBookedSlots = {
-  'room-001': ['09:00', '09:30', '14:00', '14:30', '15:00'],
-  'room-002': ['10:00', '10:30', '11:00'],
-  'room-003': ['13:00', '13:30', '14:00', '14:30', '15:00', '15:30'],
-  'room-004': ['16:00', '16:30']
-}
-
-// 演示属性
-const demoProps = reactive({
-  rooms: mockRooms,
-  selectedDate: new Date().toISOString().split('T')[0],
-  timeSlots: [],
-  bookedSlots: mockBookedSlots,
-  loading: false,
-  disabled: false,
-  minDuration: 1,
-  maxDuration: 8
-})
-
-// 事件日志
-const eventLogs = ref([])
-
-// 示例数据
-const sampleRoom = {
-  id: 'room-001',
-  name: '会议室A',
-  capacity: 10,
-  location: '3楼东侧',
-  equipment: ['投影仪', '白板', '视频会议']
-}
-
-const sampleBookedSlots = {
-  'room-001': ['09:00', '09:30', '14:00'],
-  'room-002': ['10:00', '10:30', '11:00']
-}
-
-// 事件处理
-const addEventLog = (event, data) => {
-  const now = new Date()
-  const time = `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}:${now.getSeconds().toString().padStart(2, '0')}`
-  
-  eventLogs.value.unshift({
-    time,
-    event,
-    data: JSON.stringify(data, null, 2)
-  })
-  
-  // 保持最多20条日志
-  if (eventLogs.value.length > 20) {
-    eventLogs.value = eventLogs.value.slice(0, 20)
-  }
-}
-
-const handleRoomSelect = (room) => {
-  addEventLog('room-select', room)
-}
-
-const handleTimeSelect = (selection) => {
-  addEventLog('time-select', selection)
-}
-
-const handleBookingConfirm = (bookingInfo) => {
-  addEventLog('booking-confirm', bookingInfo)
-  
-  // 模拟预约成功，更新已预约时间段
-  if (bookingInfo && bookingInfo.room && bookingInfo.timeSlots) {
-    const roomId = bookingInfo.room.id
-    if (!demoProps.bookedSlots[roomId]) {
-      demoProps.bookedSlots[roomId] = []
-    }
-    demoProps.bookedSlots[roomId].push(...bookingInfo.timeSlots)
-    
-    // 去重
-    demoProps.bookedSlots[roomId] = [...new Set(demoProps.bookedSlots[roomId])]
-  }
-}
-
-const handleDateChange = (date) => {
-  addEventLog('date-change', { date })
-  demoProps.selectedDate = date
-}
-</script>
-
-<style scoped>
-.demo-container {
-  padding: 20px;
-  max-width: 1200px;
-  margin: 0 auto;
-}
-
-.demo-section {
-  margin-bottom: 40px;
-  padding: 20px;
-  border: 1px solid #eee;
-  border-radius: 8px;
-  background: #fff;
-}
-
-.demo-section h3 {
-  margin-top: 0;
-  color: #333;
-  border-bottom: 2px solid #1890ff;
-  padding-bottom: 8px;
-}
-
-.config-panel {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 16px;
-  padding: 16px;
-  background: #f9f9f9;
-  border-radius: 6px;
-}
-
-.config-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.config-item label {
-  font-weight: 500;
-  color: #666;
-  min-width: 100px;
-}
-
-.config-item input {
-  padding: 4px 8px;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-}
-
-.event-log {
-  max-height: 300px;
-  overflow-y: auto;
-  background: #f5f5f5;
-  border-radius: 6px;
-  padding: 12px;
-}
-
-.log-item {
-  display: flex;
-  gap: 12px;
-  padding: 8px 0;
-  border-bottom: 1px solid #eee;
-  font-family: 'Courier New', monospace;
-  font-size: 12px;
-}
-
-.log-item:last-child {
-  border-bottom: none;
-}
-
-.log-time {
-  color: #999;
-  min-width: 80px;
-}
-
-.log-event {
-  color: #1890ff;
-  font-weight: 600;
-  min-width: 120px;
-}
-
-.log-data {
-  color: #333;
-  flex: 1;
-  word-break: break-all;
-}
-
-.data-structure {
-  background: #f5f5f5;
-  padding: 16px;
-  border-radius: 6px;
-}
-
-.data-structure h4 {
-  margin: 16px 0 8px 0;
-  color: #333;
-}
-
-.data-structure h4:first-child {
-  margin-top: 0;
-}
-
-.data-structure pre {
-  background: #fff;
-  padding: 12px;
-  border-radius: 4px;
-  border: 1px solid #ddd;
-  font-family: 'Courier New', monospace;
-  font-size: 12px;
-  overflow-x: auto;
-  margin: 0;
-}
+<template>
+  <div class="demo-container">
+    <h2>EbizMeetingRoomSelector 会议室选择组件演示</h2>
+    
+    <div class="demo-section">
+      <h3>基础用法</h3>
+      <EbizMeetingRoomSelector
+        v-bind="demoProps"
+        @room-select="handleRoomSelect"
+        @time-select="handleTimeSelect"
+        @booking-confirm="handleBookingConfirm"
+        @date-change="handleDateChange"
+      />
+    </div>
+
+    <div class="demo-section">
+      <h3>属性配置</h3>
+      <div class="config-panel">
+        <div class="config-item">
+          <label>加载状态：</label>
+          <input type="checkbox" v-model="demoProps.loading" />
+        </div>
+        <div class="config-item">
+          <label>禁用状态：</label>
+          <input type="checkbox" v-model="demoProps.disabled" />
+        </div>
+        <div class="config-item">
+          <label>最小预约时长：</label>
+          <input type="number" v-model="demoProps.minDuration" min="1" max="8" />
+        </div>
+        <div class="config-item">
+          <label>最大预约时长：</label>
+          <input type="number" v-model="demoProps.maxDuration" min="1" max="16" />
+        </div>
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h3>事件日志</h3>
+      <div class="event-log">
+        <div v-for="(log, index) in eventLogs" :key="index" class="log-item">
+          <span class="log-time">{{ log.time }}</span>
+          <span class="log-event">{{ log.event }}</span>
+          <span class="log-data">{{ log.data }}</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h3>数据结构</h3>
+      <div class="data-structure">
+        <h4>会议室数据格式：</h4>
+        <pre>{{ JSON.stringify(sampleRoom, null, 2) }}</pre>
+        
+        <h4>已预约时间段格式：</h4>
+        <pre>{{ JSON.stringify(sampleBookedSlots, null, 2) }}</pre>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive } from 'vue'
+import { EbizMeetingRoomSelector } from '../index.js'
+
+// 模拟会议室数据
+const mockRooms = [
+  {
+    id: 'room-001',
+    name: '会议室A',
+    capacity: 10,
+    location: '3楼东侧',
+    equipment: ['投影仪', '白板', '视频会议']
+  },
+  {
+    id: 'room-002',
+    name: '会议室B',
+    capacity: 6,
+    location: '3楼西侧',
+    equipment: ['投影仪', '白板']
+  },
+  {
+    id: 'room-003',
+    name: '大会议室',
+    capacity: 20,
+    location: '4楼中央',
+    equipment: ['投影仪', '音响', '视频会议', '同声传译']
+  },
+  {
+    id: 'room-004',
+    name: '小会议室',
+    capacity: 4,
+    location: '2楼南侧',
+    equipment: ['白板']
+  }
+]
+
+// 模拟已预约时间段
+const mockBookedSlots = {
+  'room-001': ['09:00', '09:30', '14:00', '14:30', '15:00'],
+  'room-002': ['10:00', '10:30', '11:00'],
+  'room-003': ['13:00', '13:30', '14:00', '14:30', '15:00', '15:30'],
+  'room-004': ['16:00', '16:30']
+}
+
+// 演示属性
+const demoProps = reactive({
+  rooms: mockRooms,
+  selectedDate: new Date().toISOString().split('T')[0],
+  timeSlots: [],
+  bookedSlots: mockBookedSlots,
+  loading: false,
+  disabled: false,
+  minDuration: 1,
+  maxDuration: 8
+})
+
+// 事件日志
+const eventLogs = ref([])
+
+// 示例数据
+const sampleRoom = {
+  id: 'room-001',
+  name: '会议室A',
+  capacity: 10,
+  location: '3楼东侧',
+  equipment: ['投影仪', '白板', '视频会议']
+}
+
+const sampleBookedSlots = {
+  'room-001': ['09:00', '09:30', '14:00'],
+  'room-002': ['10:00', '10:30', '11:00']
+}
+
+// 事件处理
+const addEventLog = (event, data) => {
+  const now = new Date()
+  const time = `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}:${now.getSeconds().toString().padStart(2, '0')}`
+  
+  eventLogs.value.unshift({
+    time,
+    event,
+    data: JSON.stringify(data, null, 2)
+  })
+  
+  // 保持最多20条日志
+  if (eventLogs.value.length > 20) {
+    eventLogs.value = eventLogs.value.slice(0, 20)
+  }
+}
+
+const handleRoomSelect = (room) => {
+  addEventLog('room-select', room)
+}
+
+const handleTimeSelect = (selection) => {
+  addEventLog('time-select', selection)
+}
+
+const handleBookingConfirm = (bookingInfo) => {
+  addEventLog('booking-confirm', bookingInfo)
+  
+  // 模拟预约成功，更新已预约时间段
+  if (bookingInfo && bookingInfo.room && bookingInfo.timeSlots) {
+    const roomId = bookingInfo.room.id
+    if (!demoProps.bookedSlots[roomId]) {
+      demoProps.bookedSlots[roomId] = []
+    }
+    demoProps.bookedSlots[roomId].push(...bookingInfo.timeSlots)
+    
+    // 去重
+    demoProps.bookedSlots[roomId] = [...new Set(demoProps.bookedSlots[roomId])]
+  }
+}
+
+const handleDateChange = (date) => {
+  addEventLog('date-change', { date })
+  demoProps.selectedDate = date
+}
+</script>
+
+<style scoped>
+.demo-container {
+  padding: 20px;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.demo-section {
+  margin-bottom: 40px;
+  padding: 20px;
+  border: 1px solid #eee;
+  border-radius: 8px;
+  background: #fff;
+}
+
+.demo-section h3 {
+  margin-top: 0;
+  color: #333;
+  border-bottom: 2px solid #1890ff;
+  padding-bottom: 8px;
+}
+
+.config-panel {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 16px;
+  padding: 16px;
+  background: #f9f9f9;
+  border-radius: 6px;
+}
+
+.config-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.config-item label {
+  font-weight: 500;
+  color: #666;
+  min-width: 100px;
+}
+
+.config-item input {
+  padding: 4px 8px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+}
+
+.event-log {
+  max-height: 300px;
+  overflow-y: auto;
+  background: #f5f5f5;
+  border-radius: 6px;
+  padding: 12px;
+}
+
+.log-item {
+  display: flex;
+  gap: 12px;
+  padding: 8px 0;
+  border-bottom: 1px solid #eee;
+  font-family: 'Courier New', monospace;
+  font-size: 12px;
+}
+
+.log-item:last-child {
+  border-bottom: none;
+}
+
+.log-time {
+  color: #999;
+  min-width: 80px;
+}
+
+.log-event {
+  color: #1890ff;
+  font-weight: 600;
+  min-width: 120px;
+}
+
+.log-data {
+  color: #333;
+  flex: 1;
+  word-break: break-all;
+}
+
+.data-structure {
+  background: #f5f5f5;
+  padding: 16px;
+  border-radius: 6px;
+}
+
+.data-structure h4 {
+  margin: 16px 0 8px 0;
+  color: #333;
+}
+
+.data-structure h4:first-child {
+  margin-top: 0;
+}
+
+.data-structure pre {
+  background: #fff;
+  padding: 12px;
+  border-radius: 4px;
+  border: 1px solid #ddd;
+  font-family: 'Courier New', monospace;
+  font-size: 12px;
+  overflow-x: auto;
+  margin: 0;
+}
 </style>