@ebiz/designer-components 0.1.0 → 0.1.2

package/src/views/EbizMobileMeetingRoomSelectorDemo.vue

@@ -1,567 +1,567 @@
-<template>
-  <div class="mobile-demo-container">
-    <!-- 移动端预览框 -->
-    <div class="mobile-preview">
-      <div class="mobile-frame">
-        <div class="mobile-header">
-          <div class="status-bar">
-            <span class="time">9:41</span>
-            <div class="indicators">
-              <span class="signal">📶</span>
-              <span class="wifi">📶</span>
-              <span class="battery">🔋</span>
-            </div>
-          </div>
-          <div class="nav-bar">
-            <span class="back-btn">←</span>
-            <span class="title">会议室预约</span>
-            <span class="menu-btn">⋯</span>
-          </div>
-        </div>
-        
-        <div class="mobile-content">
-          <EbizMobileMeetingRoomSelector
-            v-bind="demoProps"
-            @room-select="handleRoomSelect"
-            @time-select="handleTimeSelect"
-            @booking-confirm="handleBookingConfirm"
-            @date-change="handleDateChange"
-          />
-        </div>
-      </div>
-    </div>
-
-    <!-- 控制面板 -->
-    <div class="control-panel">
-      <h2>📱 移动端会议室选择器演示</h2>
-      
-      <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="features-list">
-          <div class="feature-item">
-            <span class="feature-icon">📱</span>
-            <div class="feature-content">
-              <h4>响应式设计</h4>
-              <p>适配各种移动设备屏幕尺寸</p>
-            </div>
-          </div>
-          <div class="feature-item">
-            <span class="feature-icon">👆</span>
-            <div class="feature-content">
-              <h4>触摸友好</h4>
-              <p>大按钮设计，支持触摸操作</p>
-            </div>
-          </div>
-          <div class="feature-item">
-            <span class="feature-icon">🎨</span>
-            <div class="feature-content">
-              <h4>卡片布局</h4>
-              <p>清晰的卡片式界面设计</p>
-            </div>
-          </div>
-          <div class="feature-item">
-            <span class="feature-icon">⚡</span>
-            <div class="feature-content">
-              <h4>浮动面板</h4>
-              <p>底部浮动确认面板</p>
-            </div>
-          </div>
-          <div class="feature-item">
-            <span class="feature-icon">🎯</span>
-            <div class="feature-content">
-              <h4>状态反馈</h4>
-              <p>直观的状态图标和颜色</p>
-            </div>
-          </div>
-          <div class="feature-item">
-            <span class="feature-icon">🔄</span>
-            <div class="feature-content">
-              <h4>交互动画</h4>
-              <p>流畅的过渡动画效果</p>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div class="demo-section">
-        <h3>使用说明</h3>
-        <div class="usage-guide">
-          <ol>
-            <li>📅 选择预约日期</li>
-            <li>🏢 点击会议室卡片展开时间选择</li>
-            <li>⏰ 点击时间段进行多选</li>
-            <li>📋 底部浮动面板显示预约信息</li>
-            <li>🎯 点击确认预约完成操作</li>
-          </ol>
-        </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>
-  </div>
-</template>
-
-<script setup>
-import { ref, reactive } from 'vue'
-import { EbizMobileMeetingRoomSelector } 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)
-  })
-  
-  // 保持最多10条日志
-  if (eventLogs.value.length > 10) {
-    eventLogs.value = eventLogs.value.slice(0, 10)
-  }
-}
-
-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>
-.mobile-demo-container {
-  display: flex;
-  gap: 20px;
-  padding: 20px;
-  background: #f5f5f5;
-  min-height: 100vh;
-}
-
-.mobile-preview {
-  flex-shrink: 0;
-  position: sticky;
-  top: 20px;
-  height: fit-content;
-}
-
-.mobile-frame {
-  width: 375px;
-  height: 812px;
-  background: #000;
-  border-radius: 25px;
-  padding: 8px;
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
-  position: relative;
-  overflow: hidden;
-}
-
-.mobile-frame::before {
-  content: '';
-  position: absolute;
-  top: 8px;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 134px;
-  height: 5px;
-  background: #000;
-  border-radius: 3px;
-  z-index: 10;
-}
-
-.mobile-header {
-  background: #fff;
-  border-radius: 17px 17px 0 0;
-}
-
-.status-bar {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 8px 20px 4px;
-  font-size: 14px;
-  font-weight: 600;
-}
-
-.time {
-  color: #000;
-}
-
-.indicators {
-  display: flex;
-  gap: 4px;
-  font-size: 12px;
-}
-
-.nav-bar {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 8px 20px 12px;
-  border-bottom: 1px solid #eee;
-}
-
-.back-btn, .menu-btn {
-  font-size: 18px;
-  color: #007AFF;
-  cursor: pointer;
-}
-
-.nav-bar .title {
-  font-size: 17px;
-  font-weight: 600;
-  color: #000;
-}
-
-.mobile-content {
-  height: 720px;
-  overflow: hidden;
-  background: #fff;
-  border-radius: 0 0 17px 17px;
-}
-
-.control-panel {
-  flex: 1;
-  background: #fff;
-  border-radius: 12px;
-  padding: 24px;
-  height: fit-content;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-}
-
-.control-panel h2 {
-  margin-top: 0;
-  color: #333;
-  border-bottom: 2px solid #1890ff;
-  padding-bottom: 8px;
-}
-
-.demo-section {
-  margin-bottom: 32px;
-  padding: 20px;
-  border: 1px solid #eee;
-  border-radius: 8px;
-  background: #fafafa;
-}
-
-.demo-section h3 {
-  margin-top: 0;
-  color: #333;
-  font-size: 16px;
-  font-weight: 600;
-}
-
-.config-panel {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 16px;
-}
-
-.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: 200px;
-  overflow-y: auto;
-  background: #f5f5f5;
-  border-radius: 6px;
-  padding: 12px;
-}
-
-.log-item {
-  display: flex;
-  gap: 12px;
-  padding: 6px 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;
-}
-
-.features-list {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-  gap: 16px;
-}
-
-.feature-item {
-  display: flex;
-  align-items: flex-start;
-  gap: 12px;
-  padding: 16px;
-  background: #fff;
-  border-radius: 8px;
-  border: 1px solid #e0e0e0;
-}
-
-.feature-icon {
-  font-size: 24px;
-  flex-shrink: 0;
-}
-
-.feature-content h4 {
-  margin: 0 0 4px 0;
-  font-size: 14px;
-  font-weight: 600;
-  color: #333;
-}
-
-.feature-content p {
-  margin: 0;
-  font-size: 12px;
-  color: #666;
-  line-height: 1.4;
-}
-
-.usage-guide {
-  background: #fff;
-  padding: 16px;
-  border-radius: 8px;
-  border: 1px solid #e0e0e0;
-}
-
-.usage-guide ol {
-  margin: 0;
-  padding-left: 20px;
-}
-
-.usage-guide li {
-  margin-bottom: 8px;
-  font-size: 14px;
-  color: #333;
-  line-height: 1.5;
-}
-
-.data-structure {
-  background: #fff;
-  padding: 16px;
-  border-radius: 8px;
-  border: 1px solid #e0e0e0;
-}
-
-.data-structure h4 {
-  margin: 16px 0 8px 0;
-  color: #333;
-  font-size: 14px;
-}
-
-.data-structure h4:first-child {
-  margin-top: 0;
-}
-
-.data-structure pre {
-  background: #f8f8f8;
-  padding: 12px;
-  border-radius: 4px;
-  border: 1px solid #ddd;
-  font-family: 'Courier New', monospace;
-  font-size: 11px;
-  overflow-x: auto;
-  margin: 0;
-  color: #333;
-}
-
-/* 响应式设计 */
-@media (max-width: 1200px) {
-  .mobile-demo-container {
-    flex-direction: column;
-  }
-  
-  .mobile-preview {
-    position: static;
-    align-self: center;
-  }
-  
-  .mobile-frame {
-    transform: scale(0.8);
-    transform-origin: top center;
-  }
-}
-
-@media (max-width: 768px) {
-  .mobile-demo-container {
-    padding: 10px;
-  }
-  
-  .mobile-frame {
-    transform: scale(0.7);
-  }
-  
-  .control-panel {
-    padding: 16px;
-  }
-  
-  .features-list {
-    grid-template-columns: 1fr;
-  }
-}
+<template>
+  <div class="mobile-demo-container">
+    <!-- 移动端预览框 -->
+    <div class="mobile-preview">
+      <div class="mobile-frame">
+        <div class="mobile-header">
+          <div class="status-bar">
+            <span class="time">9:41</span>
+            <div class="indicators">
+              <span class="signal">📶</span>
+              <span class="wifi">📶</span>
+              <span class="battery">🔋</span>
+            </div>
+          </div>
+          <div class="nav-bar">
+            <span class="back-btn">←</span>
+            <span class="title">会议室预约</span>
+            <span class="menu-btn">⋯</span>
+          </div>
+        </div>
+        
+        <div class="mobile-content">
+          <EbizMobileMeetingRoomSelector
+            v-bind="demoProps"
+            @room-select="handleRoomSelect"
+            @time-select="handleTimeSelect"
+            @booking-confirm="handleBookingConfirm"
+            @date-change="handleDateChange"
+          />
+        </div>
+      </div>
+    </div>
+
+    <!-- 控制面板 -->
+    <div class="control-panel">
+      <h2>📱 移动端会议室选择器演示</h2>
+      
+      <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="features-list">
+          <div class="feature-item">
+            <span class="feature-icon">📱</span>
+            <div class="feature-content">
+              <h4>响应式设计</h4>
+              <p>适配各种移动设备屏幕尺寸</p>
+            </div>
+          </div>
+          <div class="feature-item">
+            <span class="feature-icon">👆</span>
+            <div class="feature-content">
+              <h4>触摸友好</h4>
+              <p>大按钮设计，支持触摸操作</p>
+            </div>
+          </div>
+          <div class="feature-item">
+            <span class="feature-icon">🎨</span>
+            <div class="feature-content">
+              <h4>卡片布局</h4>
+              <p>清晰的卡片式界面设计</p>
+            </div>
+          </div>
+          <div class="feature-item">
+            <span class="feature-icon">⚡</span>
+            <div class="feature-content">
+              <h4>浮动面板</h4>
+              <p>底部浮动确认面板</p>
+            </div>
+          </div>
+          <div class="feature-item">
+            <span class="feature-icon">🎯</span>
+            <div class="feature-content">
+              <h4>状态反馈</h4>
+              <p>直观的状态图标和颜色</p>
+            </div>
+          </div>
+          <div class="feature-item">
+            <span class="feature-icon">🔄</span>
+            <div class="feature-content">
+              <h4>交互动画</h4>
+              <p>流畅的过渡动画效果</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="demo-section">
+        <h3>使用说明</h3>
+        <div class="usage-guide">
+          <ol>
+            <li>📅 选择预约日期</li>
+            <li>🏢 点击会议室卡片展开时间选择</li>
+            <li>⏰ 点击时间段进行多选</li>
+            <li>📋 底部浮动面板显示预约信息</li>
+            <li>🎯 点击确认预约完成操作</li>
+          </ol>
+        </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>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive } from 'vue'
+import { EbizMobileMeetingRoomSelector } 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)
+  })
+  
+  // 保持最多10条日志
+  if (eventLogs.value.length > 10) {
+    eventLogs.value = eventLogs.value.slice(0, 10)
+  }
+}
+
+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>
+.mobile-demo-container {
+  display: flex;
+  gap: 20px;
+  padding: 20px;
+  background: #f5f5f5;
+  min-height: 100vh;
+}
+
+.mobile-preview {
+  flex-shrink: 0;
+  position: sticky;
+  top: 20px;
+  height: fit-content;
+}
+
+.mobile-frame {
+  width: 375px;
+  height: 812px;
+  background: #000;
+  border-radius: 25px;
+  padding: 8px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
+  position: relative;
+  overflow: hidden;
+}
+
+.mobile-frame::before {
+  content: '';
+  position: absolute;
+  top: 8px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 134px;
+  height: 5px;
+  background: #000;
+  border-radius: 3px;
+  z-index: 10;
+}
+
+.mobile-header {
+  background: #fff;
+  border-radius: 17px 17px 0 0;
+}
+
+.status-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 20px 4px;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.time {
+  color: #000;
+}
+
+.indicators {
+  display: flex;
+  gap: 4px;
+  font-size: 12px;
+}
+
+.nav-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 20px 12px;
+  border-bottom: 1px solid #eee;
+}
+
+.back-btn, .menu-btn {
+  font-size: 18px;
+  color: #007AFF;
+  cursor: pointer;
+}
+
+.nav-bar .title {
+  font-size: 17px;
+  font-weight: 600;
+  color: #000;
+}
+
+.mobile-content {
+  height: 720px;
+  overflow: hidden;
+  background: #fff;
+  border-radius: 0 0 17px 17px;
+}
+
+.control-panel {
+  flex: 1;
+  background: #fff;
+  border-radius: 12px;
+  padding: 24px;
+  height: fit-content;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.control-panel h2 {
+  margin-top: 0;
+  color: #333;
+  border-bottom: 2px solid #1890ff;
+  padding-bottom: 8px;
+}
+
+.demo-section {
+  margin-bottom: 32px;
+  padding: 20px;
+  border: 1px solid #eee;
+  border-radius: 8px;
+  background: #fafafa;
+}
+
+.demo-section h3 {
+  margin-top: 0;
+  color: #333;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.config-panel {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 16px;
+}
+
+.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: 200px;
+  overflow-y: auto;
+  background: #f5f5f5;
+  border-radius: 6px;
+  padding: 12px;
+}
+
+.log-item {
+  display: flex;
+  gap: 12px;
+  padding: 6px 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;
+}
+
+.features-list {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 16px;
+}
+
+.feature-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 16px;
+  background: #fff;
+  border-radius: 8px;
+  border: 1px solid #e0e0e0;
+}
+
+.feature-icon {
+  font-size: 24px;
+  flex-shrink: 0;
+}
+
+.feature-content h4 {
+  margin: 0 0 4px 0;
+  font-size: 14px;
+  font-weight: 600;
+  color: #333;
+}
+
+.feature-content p {
+  margin: 0;
+  font-size: 12px;
+  color: #666;
+  line-height: 1.4;
+}
+
+.usage-guide {
+  background: #fff;
+  padding: 16px;
+  border-radius: 8px;
+  border: 1px solid #e0e0e0;
+}
+
+.usage-guide ol {
+  margin: 0;
+  padding-left: 20px;
+}
+
+.usage-guide li {
+  margin-bottom: 8px;
+  font-size: 14px;
+  color: #333;
+  line-height: 1.5;
+}
+
+.data-structure {
+  background: #fff;
+  padding: 16px;
+  border-radius: 8px;
+  border: 1px solid #e0e0e0;
+}
+
+.data-structure h4 {
+  margin: 16px 0 8px 0;
+  color: #333;
+  font-size: 14px;
+}
+
+.data-structure h4:first-child {
+  margin-top: 0;
+}
+
+.data-structure pre {
+  background: #f8f8f8;
+  padding: 12px;
+  border-radius: 4px;
+  border: 1px solid #ddd;
+  font-family: 'Courier New', monospace;
+  font-size: 11px;
+  overflow-x: auto;
+  margin: 0;
+  color: #333;
+}
+
+/* 响应式设计 */
+@media (max-width: 1200px) {
+  .mobile-demo-container {
+    flex-direction: column;
+  }
+  
+  .mobile-preview {
+    position: static;
+    align-self: center;
+  }
+  
+  .mobile-frame {
+    transform: scale(0.8);
+    transform-origin: top center;
+  }
+}
+
+@media (max-width: 768px) {
+  .mobile-demo-container {
+    padding: 10px;
+  }
+  
+  .mobile-frame {
+    transform: scale(0.7);
+  }
+  
+  .control-panel {
+    padding: 16px;
+  }
+  
+  .features-list {
+    grid-template-columns: 1fr;
+  }
+}
 </style>