@ebiz/designer-components 0.0.60 → 0.0.62

package/src/views/EbizMap.vue

@@ -1,202 +1,202 @@
-<template>
-  <div class="demo-container">
-    <div class="demo-title">地图经纬度选择器</div>
-    <div class="demo-content">
-      <div class="demo-block">
-        <h3>基础用法</h3>
-        <p>点击地图任意位置选择经纬度，也可以使用顶部搜索框搜索位置</p>
-        <EbizMap v-model="location" :api-key="apiKey" />
-        <div class="result-block" v-if="location">
-          <p>选中的经纬度：{{ location[0] }}, {{ location[1] }}</p>
-        </div>
-      </div>
-      
-      <div class="demo-block">
-        <h3>无API Key - 手动输入模式</h3>
-        <p>当未提供API Key时，可以通过手动输入获取经纬度</p>
-        <EbizMap v-model="locationNoKey" />
-        <div class="result-block" v-if="locationNoKey">
-          <p>选中的经纬度：{{ locationNoKey[0] }}, {{ locationNoKey[1] }}</p>
-        </div>
-        <div class="demo-note">
-          <p>提示：可以通过<a href="https://lbs.amap.com/tools/picker" target="_blank" rel="noopener noreferrer">高德地图坐标拾取器</a>获取位置经纬度</p>
-        </div>
-      </div>
-      
-      <div class="demo-block">
-        <h3>自定义地图中心点</h3>
-        <p>通过 center 属性设置地图的中心点</p>
-        <EbizMap v-model="location2" :center="[118.7899, 32.0619]" :zoom="13" :api-key="apiKey" />
-        <div class="result-block" v-if="location2">
-          <p>选中的经纬度：{{ location2[0] }}, {{ location2[1] }}</p>
-        </div>
-      </div>
-      
-      <div class="demo-block">
-        <h3>自定义地图高度</h3>
-        <p>通过 height 属性设置地图容器高度</p>
-        <EbizMap v-model="location3" height="300px" :api-key="apiKey" />
-        <div class="result-block" v-if="location3">
-          <p>选中的经纬度：{{ location3[0] }}, {{ location3[1] }}</p>
-        </div>
-      </div>
-      
-      <div class="demo-block">
-        <h3>隐藏标记信息</h3>
-        <p>通过 showMarkerInfo 属性隐藏标记点信息</p>
-        <EbizMap v-model="location4" :show-marker-info="false" :api-key="apiKey" />
-        <div class="result-block" v-if="location4">
-          <p>选中的经纬度：{{ location4[0] }}, {{ location4[1] }}</p>
-        </div>
-      </div>
-      
-      <div class="demo-block">
-        <h3>地图事件监听</h3>
-        <p>监听地图点击和标记点点击事件</p>
-        <EbizMap 
-          v-model="location5" 
-          :api-key="apiKey"
-          @map-click="handleMapClick" 
-          @marker-click="handleMarkerClick"
-        />
-        <div class="result-block">
-          <p v-if="mapClickInfo">地图点击位置：{{ mapClickInfo }}</p>
-          <p v-if="markerClickInfo">标记点点击位置：{{ markerClickInfo }}</p>
-        </div>
-      </div>
-
-      <div class="demo-block demo-features">
-        <h3>组件功能说明</h3>
-        <div class="feature-list">
-          <div class="feature-item">
-            <h4>1. 地图搜索</h4>
-            <p>在有 API Key 的地图模式下，可以通过顶部搜索框搜索位置，选择结果后会自动定位到该位置并获取经纬度</p>
-          </div>
-          <div class="feature-item">
-            <h4>2. 模式切换</h4>
-            <p>可以在地图模式和手动输入模式之间切换，在没有 API Key 的情况下默认为手动输入模式</p>
-          </div>
-          <div class="feature-item">
-            <h4>3. 拖拽标记</h4>
-            <p>在地图模式下，标记点支持拖拽，拖拽结束后会更新经纬度值</p>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-import { EbizMap } from '../index.js';
-
-// 设置您的高德地图 API Key
-const apiKey = '0b36a6d16571f04c5a4b6790e43f8490';
-
-// 基础用法
-const location = ref(null);
-
-// 无API Key示例
-const locationNoKey = ref(null);
-
-// 自定义中心点
-const location2 = ref(null);
-
-// 自定义高度
-const location3 = ref(null);
-
-// 隐藏标记信息
-const location4 = ref(null);
-
-// 事件监听
-const location5 = ref(null);
-const mapClickInfo = ref('');
-const markerClickInfo = ref('');
-
-const handleMapClick = (lnglat) => {
-  mapClickInfo.value = `${lnglat[0]}, ${lnglat[1]}`;
-};
-
-const handleMarkerClick = (position) => {
-  markerClickInfo.value = `${position[0]}, ${position[1]}`;
-};
-</script>
-
-<style scoped>
-.demo-container {
-  padding: 20px;
-  font-family: Arial, sans-serif;
-}
-
-.demo-title {
-  font-size: 24px;
-  font-weight: bold;
-  margin-bottom: 20px;
-}
-
-.demo-content {
-  display: flex;
-  flex-direction: column;
-  gap: 30px;
-}
-
-.demo-block {
-  padding: 20px;
-  border: 1px solid #e8e8e8;
-  border-radius: 4px;
-}
-
-.demo-block h3 {
-  margin-top: 0;
-  margin-bottom: 10px;
-}
-
-.demo-block p {
-  margin-bottom: 15px;
-  color: #666;
-}
-
-.result-block {
-  margin-top: 15px;
-  padding: 10px;
-  background-color: #f5f5f5;
-  border-radius: 4px;
-}
-
-.demo-note {
-  margin-top: 10px;
-  padding: 10px;
-  background-color: #e6f7ff;
-  border-radius: 4px;
-  border-left: 4px solid #1890ff;
-}
-
-.demo-note a {
-  color: #1890ff;
-  text-decoration: none;
-}
-
-.demo-note a:hover {
-  text-decoration: underline;
-}
-
-.demo-features {
-  background-color: #fafafa;
-}
-
-.feature-list {
-  display: flex;
-  flex-direction: column;
-  gap: 15px;
-}
-
-.feature-item h4 {
-  margin-top: 0;
-  margin-bottom: 8px;
-  color: #1890ff;
-}
-
-.feature-item p {
-  margin: 0;
-}
+<template>
+  <div class="demo-container">
+    <div class="demo-title">地图经纬度选择器</div>
+    <div class="demo-content">
+      <div class="demo-block">
+        <h3>基础用法</h3>
+        <p>点击地图任意位置选择经纬度，也可以使用顶部搜索框搜索位置</p>
+        <EbizMap v-model="location" :api-key="apiKey" />
+        <div class="result-block" v-if="location">
+          <p>选中的经纬度：{{ location[0] }}, {{ location[1] }}</p>
+        </div>
+      </div>
+      
+      <div class="demo-block">
+        <h3>无API Key - 手动输入模式</h3>
+        <p>当未提供API Key时，可以通过手动输入获取经纬度</p>
+        <EbizMap v-model="locationNoKey" />
+        <div class="result-block" v-if="locationNoKey">
+          <p>选中的经纬度：{{ locationNoKey[0] }}, {{ locationNoKey[1] }}</p>
+        </div>
+        <div class="demo-note">
+          <p>提示：可以通过<a href="https://lbs.amap.com/tools/picker" target="_blank" rel="noopener noreferrer">高德地图坐标拾取器</a>获取位置经纬度</p>
+        </div>
+      </div>
+      
+      <div class="demo-block">
+        <h3>自定义地图中心点</h3>
+        <p>通过 center 属性设置地图的中心点</p>
+        <EbizMap v-model="location2" :center="[118.7899, 32.0619]" :zoom="13" :api-key="apiKey" />
+        <div class="result-block" v-if="location2">
+          <p>选中的经纬度：{{ location2[0] }}, {{ location2[1] }}</p>
+        </div>
+      </div>
+      
+      <div class="demo-block">
+        <h3>自定义地图高度</h3>
+        <p>通过 height 属性设置地图容器高度</p>
+        <EbizMap v-model="location3" height="300px" :api-key="apiKey" />
+        <div class="result-block" v-if="location3">
+          <p>选中的经纬度：{{ location3[0] }}, {{ location3[1] }}</p>
+        </div>
+      </div>
+      
+      <div class="demo-block">
+        <h3>隐藏标记信息</h3>
+        <p>通过 showMarkerInfo 属性隐藏标记点信息</p>
+        <EbizMap v-model="location4" :show-marker-info="false" :api-key="apiKey" />
+        <div class="result-block" v-if="location4">
+          <p>选中的经纬度：{{ location4[0] }}, {{ location4[1] }}</p>
+        </div>
+      </div>
+      
+      <div class="demo-block">
+        <h3>地图事件监听</h3>
+        <p>监听地图点击和标记点点击事件</p>
+        <EbizMap 
+          v-model="location5" 
+          :api-key="apiKey"
+          @map-click="handleMapClick" 
+          @marker-click="handleMarkerClick"
+        />
+        <div class="result-block">
+          <p v-if="mapClickInfo">地图点击位置：{{ mapClickInfo }}</p>
+          <p v-if="markerClickInfo">标记点点击位置：{{ markerClickInfo }}</p>
+        </div>
+      </div>
+
+      <div class="demo-block demo-features">
+        <h3>组件功能说明</h3>
+        <div class="feature-list">
+          <div class="feature-item">
+            <h4>1. 地图搜索</h4>
+            <p>在有 API Key 的地图模式下，可以通过顶部搜索框搜索位置，选择结果后会自动定位到该位置并获取经纬度</p>
+          </div>
+          <div class="feature-item">
+            <h4>2. 模式切换</h4>
+            <p>可以在地图模式和手动输入模式之间切换，在没有 API Key 的情况下默认为手动输入模式</p>
+          </div>
+          <div class="feature-item">
+            <h4>3. 拖拽标记</h4>
+            <p>在地图模式下，标记点支持拖拽，拖拽结束后会更新经纬度值</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { EbizMap } from '../index.js';
+
+// 设置您的高德地图 API Key
+const apiKey = '0b36a6d16571f04c5a4b6790e43f8490';
+
+// 基础用法
+const location = ref(null);
+
+// 无API Key示例
+const locationNoKey = ref(null);
+
+// 自定义中心点
+const location2 = ref(null);
+
+// 自定义高度
+const location3 = ref(null);
+
+// 隐藏标记信息
+const location4 = ref(null);
+
+// 事件监听
+const location5 = ref(null);
+const mapClickInfo = ref('');
+const markerClickInfo = ref('');
+
+const handleMapClick = (lnglat) => {
+  mapClickInfo.value = `${lnglat[0]}, ${lnglat[1]}`;
+};
+
+const handleMarkerClick = (position) => {
+  markerClickInfo.value = `${position[0]}, ${position[1]}`;
+};
+</script>
+
+<style scoped>
+.demo-container {
+  padding: 20px;
+  font-family: Arial, sans-serif;
+}
+
+.demo-title {
+  font-size: 24px;
+  font-weight: bold;
+  margin-bottom: 20px;
+}
+
+.demo-content {
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+}
+
+.demo-block {
+  padding: 20px;
+  border: 1px solid #e8e8e8;
+  border-radius: 4px;
+}
+
+.demo-block h3 {
+  margin-top: 0;
+  margin-bottom: 10px;
+}
+
+.demo-block p {
+  margin-bottom: 15px;
+  color: #666;
+}
+
+.result-block {
+  margin-top: 15px;
+  padding: 10px;
+  background-color: #f5f5f5;
+  border-radius: 4px;
+}
+
+.demo-note {
+  margin-top: 10px;
+  padding: 10px;
+  background-color: #e6f7ff;
+  border-radius: 4px;
+  border-left: 4px solid #1890ff;
+}
+
+.demo-note a {
+  color: #1890ff;
+  text-decoration: none;
+}
+
+.demo-note a:hover {
+  text-decoration: underline;
+}
+
+.demo-features {
+  background-color: #fafafa;
+}
+
+.feature-list {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
+.feature-item h4 {
+  margin-top: 0;
+  margin-bottom: 8px;
+  color: #1890ff;
+}
+
+.feature-item p {
+  margin: 0;
+}
 </style> 

package/src/views/EbizMeetingRoomSelectorDemo.vue

@@ -0,0 +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;
+}
+</style>