新增WebSocket组件

Web/Vue/CubeLib/CHANGELOG.md

@@ -0,0 +1,49 @@
+# 更新日志
+
+所有重要的项目更改都将记录在此文件中。
+
+## [1.1.0] - 2026-01-30
+
+### 新增
+
+- 新增 `CubeWebSocket` 组件
+  - 支持自动连接和断开
+  - 支持自动重连（指数退避策略）
+  - 支持消息队列功能（离线消息缓存）
+  - 支持心跳机制（连接保活）
+  - 支持连接超时处理
+  - 支持调试模式（详细日志输出）
+  - 完整的事件系统（connected, disconnected, error, message 等）
+  - 暴露公共方法（connect, disconnect, send, reconnect 等）
+- 新增 `CubeWebSocket` 组件文档
+- 新增 `CubeWebSocket` 使用示例
+  - 基础使用示例
+  - 自动重连示例
+  - 消息队列示例
+
+### 变更
+
+- 更新 `package.json` 版本号至 1.1.0
+- 更新 `package.json` 文件列表，包含 `examples/*` 和 `docs/*`
+- 更新 `README.md`，添加 `CubeWebSocket` 组件文档
+
+## [1.0.0] - 2026-01-15
+
+### 新增
+
+- 新增 `CubeSplitter` 组件
+  - 支持垂直和水平方向
+  - 支持左侧、右侧、顶部、底部位置
+  - 支持拖拽调整大小
+  - 支持折叠和展开功能
+  - 支持最小和最大尺寸限制
+  - 支持尺寸持久化（通过 localStorage）
+- 新增 `CubeSplitter` 组件文档
+- 新增 `CubeSplitter` 使用示例
+
+### 变更
+
+- 初始化项目结构
+- 配置 Vite 构建工具
+- 配置 TypeScript 支持
+- 配置 ESLint 和 Prettier

Web/Vue/CubeLib/README.md

@@ -110,8 +110,7 @@ const rightPanelWidth = ref(200)
 // 从 localStorage 加载保存的尺寸
 onMounted(() => {
   const savedLeftWidth = localStorage.getItem('leftPanelWidth')
-  const savedRightWidth = localStorage.getItem('rightPanelWidth')
-  
+  const savedRightWidth = localStorage.getItem('rightPanelWidth')  
   if (savedLeftWidth) {
     leftPanelWidth.value = parseInt(savedLeftWidth)
   }
@@ -205,6 +204,107 @@ CubeSplitter 组件支持通过 CSS 变量进行定制：
 }
 ```
 
+### CubeWebSocket
+
+一个功能完善的 WebSocket 组件，支持自动连接、重连、消息队列、心跳机制等功能。
+
+#### Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+|------|------|------|---------|
+| wsUrl | WebSocket 服务器地址 | String | '' |
+| autoConnect | 是否自动连接 | Boolean | true |
+| reconnect | 是否自动重连 | Boolean | true |
+| maxReconnectDelay | 最大重连延迟（毫秒） | Number | 30000 |
+| debugMode | 是否开启调试模式 | Boolean | false |
+| heartbeatInterval | 心跳间隔（毫秒） | Number | 30000 |
+| connectTimeout | 连接超时（毫秒） | Number | 10000 |
+| maxQueueSize | 消息队列最大长度 | Number | 100 |
+
+#### Events
+
+| 事件名 | 说明 | 参数 |
+|--------|------|------|
+| connected | 连接成功 | - |
+| disconnected | 连接断开 | (code, reason) |
+| error | 连接错误 | error |
+| message | 收到消息 | message |
+| status-changed | 状态变化 | status |
+| connecting | 开始连接 | - |
+| reconnecting | 开始重连 | - |
+| message-sent | 消息已发送 | message |
+| message-queued | 消息已加入队列 | message |
+| message-failed | 消息发送失败 | { message, reason, error? } |
+
+#### Methods
+
+| 方法名 | 说明 | 参数 | 返回值 |
+|--------|------|------|--------|
+| connect | 连接 WebSocket | - | void |
+| disconnect | 断开连接 | - | void |
+| send | 发送消息 | (type, data) | void |
+| reconnect | 手动触发重连 | - | void |
+| getStatus | 获取当前状态 | - | string |
+| isConnected | 是否已连接 | - | boolean |
+| getQueueSize | 获取队列长度 | - | number |
+
+#### 使用示例
+
+```vue
+<template>
+  <div>
+    <div>状态: {{ status }}</div>
+    <div>消息数量: {{ messages.length }}</div>
+    <CubeWebSocket
+      ws-url="ws://localhost:8086/ws"
+      :auto-connect="true"
+      :reconnect="true"
+      :debug-mode="true"
+      @connected="handleConnected"
+      @disconnected="handleDisconnected"
+      @message="handleMessage"
+      @status-changed="handleStatusChanged"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import CubeWebSocket from 'joyd.web.vue.cubelib'
+
+const status = ref('disconnected')
+const messages = ref([])
+
+const handleConnected = () => {
+  console.log('WebSocket 已连接')
+  status.value = 'connected'
+}
+
+const handleDisconnected = (code, reason) => {
+  console.log('WebSocket 已断开:', code, reason)
+  status.value = 'disconnected'
+}
+
+const handleMessage = (message) => {
+  console.log('收到消息:', message)
+  messages.value.push(message)
+}
+
+const handleStatusChanged = (newStatus) => {
+  console.log('状态变化:', newStatus)
+  status.value = newStatus
+}
+</script>
+```
+
+详细文档请查看 [CubeWebSocket.md](docs/CubeWebSocket.md)
+
+#### 示例代码
+
+- [基础使用示例](examples/CubeWebSocket/BasicExample.vue)
+- [自动重连示例](examples/CubeWebSocket/AutoReconnectExample.vue)
+- [消息队列示例](examples/CubeWebSocket/MessageQueueExample.vue)
+
 ## 常见问题解答
 
 ### Q: 如何保存分隔条的位置？

Web/Vue/CubeLib/docs/CubeWebSocket.md

@@ -0,0 +1,326 @@
+# CubeWebSocket
+
+一个功能完善的 WebSocket 组件，支持自动连接、重连、消息队列、心跳机制等功能。
+
+## 基础用法
+
+```vue
+<template>
+  <div>
+    <div>状态: {{ status }}</div>
+    <div>消息数量: {{ messages.length }}</div>
+    <CubeWebSocket
+      ws-url="ws://localhost:8086/ws"
+      :auto-connect="true"
+      :reconnect="true"
+      :debug-mode="true"
+      @connected="handleConnected"
+      @disconnected="handleDisconnected"
+      @message="handleMessage"
+      @status-changed="handleStatusChanged"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import CubeWebSocket from 'joyd.web.vue.cubelib'
+
+const status = ref('disconnected')
+const messages = ref([])
+
+const handleConnected = () => {
+  console.log('WebSocket 已连接')
+  status.value = 'connected'
+}
+
+const handleDisconnected = (code, reason) => {
+  console.log('WebSocket 已断开:', code, reason)
+  status.value = 'disconnected'
+}
+
+const handleMessage = (message) => {
+  console.log('收到消息:', message)
+  messages.value.push(message)
+}
+
+const handleStatusChanged = (newStatus) => {
+  console.log('状态变化:', newStatus)
+  status.value = newStatus
+}
+</script>
+```
+
+## Props
+
+| 参数 | 说明 | 类型 | 默认值 | 必填 |
+|------|------|------|---------|-------|
+| wsUrl | WebSocket 服务器地址 | String | '' | 否 |
+| autoConnect | 是否自动连接 | Boolean | true | 否 |
+| reconnect | 是否自动重连 | Boolean | true | 否 |
+| maxReconnectDelay | 最大重连延迟（毫秒） | Number | 30000 | 否 |
+| debugMode | 是否开启调试模式 | Boolean | false | 否 |
+| heartbeatInterval | 心跳间隔（毫秒） | Number | 30000 | 否 |
+| connectTimeout | 连接超时（毫秒） | Number | 10000 | 否 |
+| maxQueueSize | 消息队列最大长度 | Number | 100 | 否 |
+
+### Props 说明
+
+#### wsUrl
+WebSocket 服务器的完整 URL 地址。如果为空字符串，则使用默认值 `ws://localhost:8086/ws`。
+
+**验证规则**：如果提供值，必须是有效的 URL 格式。
+
+#### autoConnect
+组件挂载时是否自动连接到 WebSocket 服务器。
+
+#### reconnect
+连接断开后是否自动重连。重连使用指数退避策略，延迟从 1 秒开始，每次失败后翻倍，最大不超过 `maxReconnectDelay`。
+
+#### maxReconnectDelay
+重连的最大延迟时间（毫秒）。默认为 30 秒。
+
+#### debugMode
+是否开启调试模式。开启后会在控制台输出详细的日志信息，包括：
+- 连接状态变化
+- 消息发送和接收
+- 错误信息
+- 定时器状态
+
+#### heartbeatInterval
+心跳检测的间隔时间（毫秒）。连接成功后会定期发送 `ping` 消息以保持连接活跃。
+
+#### connectTimeout
+连接超时时间（毫秒）。如果在指定时间内连接未建立，将自动关闭连接并触发 `error` 事件。
+
+#### maxQueueSize
+消息队列的最大长度。当连接未建立时，发送的消息会被加入队列。如果队列已满，新消息将被丢弃并触发 `message-failed` 事件。
+
+## Events
+
+| 事件名 | 说明 | 参数 |
+|--------|------|------|
+| connected | 连接成功 | - |
+| disconnected | 连接断开 | (code, reason) |
+| error | 连接错误 | error |
+| message | 收到消息 | message |
+| status-changed | 状态变化 | status |
+| connecting | 开始连接 | - |
+| reconnecting | 开始重连 | - |
+| message-sent | 消息已发送 | message |
+| message-queued | 消息已加入队列 | message |
+| message-failed | 消息发送失败 | { message, reason, error? } |
+
+### Events 说明
+
+#### connected
+WebSocket 连接成功建立时触发。
+
+#### disconnected
+WebSocket 连接关闭时触发。参数包括：
+- `code`: 关闭代码（数字）
+- `reason`: 关闭原因（字符串）
+
+#### error
+发生错误时触发。参数为错误对象。
+
+#### message
+收到服务器消息时触发。参数为解析后的消息对象。
+
+#### status-changed
+连接状态变化时触发。参数为新的状态字符串，可能的值：
+- `disconnected`: 未连接
+- `connecting`: 连接中
+- `connected`: 已连接
+- `reconnecting`: 重连中
+- `error`: 错误
+
+#### connecting
+开始建立连接时触发。
+
+#### reconnecting
+开始重连时触发。
+
+#### message-sent
+消息成功发送时触发。参数为发送的消息对象。
+
+#### message-queued
+消息加入队列时触发（连接未建立时）。参数为消息对象。
+
+#### message-failed
+消息发送失败时触发。参数为对象：
+- `message`: 失败的消息对象
+- `reason`: 失败原因（'queue_full' 或 'send_error'）
+- `error`: 错误对象（仅在 reason 为 'send_error' 时存在）
+
+## Methods
+
+组件通过 `defineExpose` 暴露了以下方法：
+
+| 方法名 | 说明 | 参数 | 返回值 |
+|--------|------|------|--------|
+| connect | 连接 WebSocket | - | void |
+| disconnect | 断开连接 | - | void |
+| send | 发送消息 | (type, data) | void |
+| reconnect | 手动触发重连 | - | void |
+| getStatus | 获取当前状态 | - | string |
+| isConnected | 是否已连接 | - | boolean |
+| getQueueSize | 获取队列长度 | - | number |
+
+### Methods 说明
+
+#### connect
+手动连接到 WebSocket 服务器。如果已经连接或正在连接，则跳过。
+
+#### disconnect
+断开 WebSocket 连接并停止所有定时器（心跳、重连等）。
+
+#### send
+发送消息到服务器。参数：
+- `type`: 消息类型（字符串）
+- `data`: 消息数据（对象）
+
+如果连接已建立，消息会立即发送；否则加入队列。
+
+#### reconnect
+手动触发重连。通常不需要调用，组件会自动处理重连。
+
+#### getStatus
+返回当前连接状态字符串。
+
+#### isConnected
+返回布尔值，表示是否已连接。
+
+#### getQueueSize
+返回当前消息队列的长度。
+
+## 消息协议
+
+组件使用二进制协议发送和接收消息：
+
+### 发送格式
+
+```
+字节 0: 消息类型（0=字符串，1=二进制）
+字节 1-2: 扩展参数（2字节，小端序）
+字节 3-6: 内容长度（4字节，小端序）
+字节 7-N: 内容数据
+```
+
+发送的消息会被自动包装为以下格式：
+```javascript
+{
+  version: 1,  // 协议版本
+  type: '...', // 消息类型
+  data: {...}  // 消息数据
+}
+```
+
+### 接收格式
+
+组件会自动解析接收到的二进制消息，并触发 `message` 事件。解析后的消息格式与发送格式相同。
+
+## 使用场景
+
+### 场景 1：简单的实时通信
+
+```vue
+<script setup>
+import CubeWebSocket from 'joyd.web.vue.cubelib'
+
+const wsRef = ref(null)
+
+const sendMessage = () => {
+  wsRef.value?.send('chat', { text: 'Hello' })
+}
+</script>
+
+<template>
+  <CubeWebSocket
+    ref="wsRef"
+    ws-url="ws://localhost:8086/ws"
+    @message="(msg) => console.log(msg)"
+  />
+  <button @click="sendMessage">发送消息</button>
+</template>
+```
+
+### 场景 2：自动重连和错误处理
+
+```vue
+<script setup>
+import { ref } from 'vue'
+import CubeWebSocket from 'joyd.web.vue.cubelib'
+
+const status = ref('disconnected')
+const errorMessage = ref('')
+
+const handleError = (error) => {
+  errorMessage.value = error.message || '连接错误'
+}
+</script>
+
+<template>
+  <div>
+    <div>状态: {{ status }}</div>
+    <div v-if="errorMessage" class="error">{{ errorMessage }}</div>
+    <CubeWebSocket
+      ws-url="ws://localhost:8086/ws"
+      :reconnect="true"
+      @status-changed="status = $event"
+      @error="handleError"
+    />
+  </div>
+</template>
+```
+
+### 场景 3：消息队列监控
+
+```vue
+<script setup>
+import { ref, watch } from 'vue'
+import CubeWebSocket from 'joyd.web.vue.cubelib'
+
+const wsRef = ref(null)
+const queueSize = ref(0)
+
+watch(queueSize, (newSize) => {
+  if (newSize > 50) {
+    console.warn('消息队列积压:', newSize)
+  }
+})
+</script>
+
+<template>
+  <div>
+    <div>队列大小: {{ queueSize }}</div>
+    <CubeWebSocket
+      ref="wsRef"
+      ws-url="ws://localhost:8086/ws"
+      @message-queued="queueSize++"
+      @message-sent="queueSize--"
+    />
+  </div>
+</template>
+```
+
+## 注意事项
+
+1. **URL 格式**：确保 `wsUrl` 是有效的 WebSocket URL 格式（`ws://` 或 `wss://` 开头）
+2. **调试模式**：生产环境建议关闭 `debugMode` 以避免日志泄露
+3. **消息队列**：队列大小受 `maxQueueSize` 限制，超出部分会被丢弃
+4. **心跳机制**：心跳会定期发送 `ping` 消息，确保服务器端不会因超时断开连接
+5. **重连策略**：使用指数退避，避免频繁重连造成服务器压力
+6. **组件清理**：组件卸载时会自动断开连接并清理所有定时器
+
+## 兼容性
+
+- Chrome >= 16
+- Firefox >= 11
+- Safari >= 7
+- Edge >= 12
+- IE >= 10
+
+## 许可证
+
+MIT

Web/Vue/CubeLib/examples/CubeWebSocket/AutoReconnectExample.vue

@@ -0,0 +1,386 @@
+<template>
+  <div class="auto-reconnect-example">
+    <div class="config-panel">
+      <h3>重连配置</h3>
+      <div class="config-item">
+        <label class="config-label">自动重连:</label>
+        <input type="checkbox" v-model="reconnectEnabled" />
+      </div>
+      <div class="config-item">
+        <label class="config-label">最大重连延迟:</label>
+        <input 
+          type="number" 
+          v-model.number="maxReconnectDelay" 
+          :disabled="!reconnectEnabled"
+          min="1000"
+          step="1000"
+        />
+        <span class="unit">毫秒</span>
+      </div>
+      <div class="config-item">
+        <label class="config-label">调试模式:</label>
+        <input type="checkbox" v-model="debugMode" />
+      </div>
+    </div>
+
+    <div class="status-panel">
+      <h3>连接状态</h3>
+      <div class="status-display">
+        <div :class="['status-indicator', status]"></div>
+        <div class="status-info">
+          <div class="status-text">{{ statusText }}</div>
+          <div v-if="reconnectAttempts > 0" class="reconnect-info">
+            重连次数: {{ reconnectAttempts }}
+          </div>
+          <div v-if="nextReconnectDelay > 0" class="reconnect-info">
+            下次重连: {{ nextReconnectDelay }}秒后
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="timeline-panel">
+      <h3>重连时间线</h3>
+      <div class="timeline">
+        <div 
+          v-for="(event, index) in timeline" 
+          :key="index" 
+          :class="['timeline-item', event.type]"
+        >
+          <div class="timeline-time">{{ event.time }}</div>
+          <div class="timeline-content">{{ event.message }}</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="control-panel">
+      <h3>控制</h3>
+      <div class="control-buttons">
+        <button @click="handleConnect" :disabled="status === 'connecting'">
+          连接
+        </button>
+        <button @click="handleDisconnect" :disabled="status === 'disconnected'">
+          断开
+        </button>
+        <button @click="handleSendTest" :disabled="status !== 'connected'">
+          发送测试消息
+        </button>
+        <button @click="handleSimulateDisconnect" :disabled="status !== 'connected'">
+          模拟断开
+        </button>
+        <button @click="handleClearTimeline">清空时间线</button>
+      </div>
+    </div>
+
+    <CubeWebSocket
+      ref="wsRef"
+      ws-url="ws://localhost:8086/ws"
+      :auto-connect="false"
+      :reconnect="reconnectEnabled"
+      :max-reconnect-delay="maxReconnectDelay"
+      :debug-mode="debugMode"
+      @connected="handleConnected"
+      @disconnected="handleDisconnected"
+      @error="handleError"
+      @status-changed="handleStatusChanged"
+      @connecting="handleConnecting"
+      @reconnecting="handleReconnecting"
+      @message-sent="handleMessageSent"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+import CubeWebSocket from 'joyd.web.vue.cubelib'
+
+const wsRef = ref(null)
+const status = ref('disconnected')
+const reconnectEnabled = ref(true)
+const maxReconnectDelay = ref(30000)
+const debugMode = ref(false)
+const reconnectAttempts = ref(0)
+const nextReconnectDelay = ref(0)
+const timeline = ref([])
+
+const statusText = computed(() => {
+  const statusMap = {
+    disconnected: '未连接',
+    connecting: '连接中',
+    connected: '已连接',
+    reconnecting: '重连中',
+    error: '错误'
+  }
+  return statusMap[status.value] || status.value
+})
+
+const addTimelineEvent = (type, message) => {
+  timeline.value.unshift({
+    type,
+    time: new Date().toLocaleTimeString(),
+    message
+  })
+  if (timeline.value.length > 20) {
+    timeline.value = timeline.value.slice(0, 20)
+  }
+}
+
+const handleConnected = () => {
+  console.log('[自动重连示例] WebSocket 已连接')
+  reconnectAttempts.value = 0
+  nextReconnectDelay.value = 0
+  addTimelineEvent('success', '连接成功')
+}
+
+const handleDisconnected = (code, reason) => {
+  console.log('[自动重连示例] WebSocket 已断开:', code, reason)
+  addTimelineEvent('warning', `连接断开 (${code}): ${reason}`)
+}
+
+const handleError = (error) => {
+  console.error('[自动重连示例] WebSocket 错误:', error)
+  addTimelineEvent('error', `连接错误: ${error.message}`)
+}
+
+const handleStatusChanged = (newStatus) => {
+  console.log('[自动重连示例] 状态变化:', newStatus)
+  status.value = newStatus
+}
+
+const handleConnecting = () => {
+  console.log('[自动重连示例] 开始连接')
+  addTimelineEvent('info', '开始连接')
+}
+
+const handleReconnecting = () => {
+  console.log('[自动重连示例] 开始重连')
+  reconnectAttempts.value++
+  const delay = Math.min(1000 * Math.pow(2, reconnectAttempts.value - 1), maxReconnectDelay.value)
+  nextReconnectDelay.value = Math.round(delay / 1000)
+  addTimelineEvent('info', `开始重连 (第${reconnectAttempts.value}次，${nextReconnectDelay.value}秒后)`)
+}
+
+const handleMessageSent = (message) => {
+  console.log('[自动重连示例] 消息已发送:', message)
+  addTimelineEvent('success', `发送消息: ${message.type}`)
+}
+
+const handleConnect = () => {
+  wsRef.value?.connect()
+}
+
+const handleDisconnect = () => {
+  wsRef.value?.disconnect()
+}
+
+const handleSendTest = () => {
+  wsRef.value?.send('test', {
+    text: '测试消息',
+    timestamp: Date.now()
+  })
+}
+
+const handleSimulateDisconnect = () => {
+  if (wsRef.value) {
+    wsRef.value.disconnect()
+    addTimelineEvent('warning', '手动断开连接')
+  }
+}
+
+const handleClearTimeline = () => {
+  timeline.value = []
+}
+</script>
+
+<style scoped>
+.auto-reconnect-example {
+  padding: 20px;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.config-panel,
+.status-panel,
+.timeline-panel,
+.control-panel {
+  background: #f5f5f5;
+  padding: 20px;
+  border-radius: 8px;
+  margin-bottom: 20px;
+}
+
+.config-panel h3,
+.status-panel h3,
+.timeline-panel h3,
+.control-panel h3 {
+  margin-top: 0;
+  margin-bottom: 15px;
+  color: #333;
+}
+
+.config-item {
+  display: flex;
+  align-items: center;
+  margin-bottom: 12px;
+  font-size: 14px;
+}
+
+.config-label {
+  width: 120px;
+  color: #666;
+}
+
+.config-item input[type="checkbox"] {
+  width: 20px;
+  height: 20px;
+  cursor: pointer;
+}
+
+.config-item input[type="number"] {
+  width: 100px;
+  padding: 6px 10px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  font-size: 14px;
+}
+
+.config-item input:disabled {
+  background: #f0f0f0;
+  cursor: not-allowed;
+}
+
+.unit {
+  margin-left: 8px;
+  color: #999;
+}
+
+.status-display {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+}
+
+.status-indicator {
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 24px;
+  font-weight: 600;
+  color: #fff;
+}
+
+.status-indicator.disconnected {
+  background: #999;
+}
+
+.status-indicator.connecting {
+  background: #faad14;
+}
+
+.status-indicator.connected {
+  background: #52c41a;
+}
+
+.status-indicator.reconnecting {
+  background: #1890ff;
+}
+
+.status-indicator.error {
+  background: #ff4d4f;
+}
+
+.status-info {
+  flex: 1;
+}
+
+.status-text {
+  font-size: 18px;
+  font-weight: 600;
+  margin-bottom: 8px;
+}
+
+.reconnect-info {
+  font-size: 14px;
+  color: #666;
+  margin-top: 4px;
+}
+
+.timeline {
+  max-height: 300px;
+  overflow-y: auto;
+  background: #fff;
+  border-radius: 4px;
+  padding: 10px;
+}
+
+.timeline-item {
+  display: flex;
+  gap: 12px;
+  padding: 8px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.timeline-item:last-child {
+  border-bottom: none;
+}
+
+.timeline-item.success {
+  border-left: 3px solid #52c41a;
+}
+
+.timeline-item.warning {
+  border-left: 3px solid #faad14;
+}
+
+.timeline-item.error {
+  border-left: 3px solid #ff4d4f;
+}
+
+.timeline-item.info {
+  border-left: 3px solid #1890ff;
+}
+
+.timeline-time {
+  min-width: 80px;
+  color: #999;
+  font-size: 12px;
+}
+
+.timeline-content {
+  flex: 1;
+  font-size: 14px;
+  color: #333;
+}
+
+.control-buttons {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.control-buttons button {
+  padding: 10px 20px;
+  border: none;
+  border-radius: 4px;
+  background: #667eea;
+  color: #fff;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.control-buttons button:hover:not(:disabled) {
+  background: #5568d3;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 8px rgba(102, 126, 234, 0.3);
+}
+
+.control-buttons button:disabled {
+  background: #ccc;
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+</style>

Web/Vue/CubeLib/examples/CubeWebSocket/BasicExample.vue

@@ -0,0 +1,320 @@
+<template>
+  <div class="basic-example">
+    <div class="status-panel">
+      <h3>基础使用示例</h3>
+      <div class="status-item">
+        <span class="label">连接状态:</span>
+        <span :class="['status', status]">{{ statusText }}</span>
+      </div>
+      <div class="status-item">
+        <span class="label">已连接:</span>
+        <span :class="['value', isConnected ? 'yes' : 'no']">
+          {{ isConnected ? '是' : '否' }}
+        </span>
+      </div>
+      <div class="status-item">
+        <span class="label">重连次数:</span>
+        <span class="value">{{ reconnectCount }}</span>
+      </div>
+    </div>
+
+    <div class="message-panel">
+      <h3>消息列表</h3>
+      <div class="message-list">
+        <div v-for="(msg, index) in messages" :key="index" class="message-item">
+          <div class="message-type">{{ msg.type }}</div>
+          <div class="message-content">{{ JSON.stringify(msg.data, null, 2) }}</div>
+        </div>
+        <div v-if="messages.length === 0" class="empty">暂无消息</div>
+      </div>
+    </div>
+
+    <div class="control-panel">
+      <h3>控制面板</h3>
+      <div class="control-buttons">
+        <button @click="handleConnect" :disabled="isConnected">连接</button>
+        <button @click="handleDisconnect" :disabled="!isConnected">断开</button>
+        <button @click="handleSend" :disabled="!isConnected">发送测试消息</button>
+        <button @click="handleClearMessages">清空消息</button>
+      </div>
+    </div>
+
+    <CubeWebSocket
+      ref="wsRef"
+      ws-url="ws://localhost:8086/ws"
+      :auto-connect="false"
+      :reconnect="true"
+      :debug-mode="true"
+      @connected="handleConnected"
+      @disconnected="handleDisconnected"
+      @error="handleError"
+      @message="handleMessage"
+      @status-changed="handleStatusChanged"
+      @connecting="handleConnecting"
+      @reconnecting="handleReconnecting"
+      @message-sent="handleMessageSent"
+      @message-queued="handleMessageQueued"
+      @message-failed="handleMessageFailed"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+import CubeWebSocket from 'joyd.web.vue.cubelib'
+
+const wsRef = ref(null)
+const status = ref('disconnected')
+const messages = ref([])
+const reconnectCount = ref(0)
+const errorMessage = ref('')
+
+const statusText = computed(() => {
+  const statusMap = {
+    disconnected: '未连接',
+    connecting: '连接中',
+    connected: '已连接',
+    reconnecting: '重连中',
+    error: '错误'
+  }
+  return statusMap[status.value] || status.value
+})
+
+const isConnected = computed(() => status.value === 'connected')
+
+const handleConnected = () => {
+  console.log('[基础示例] WebSocket 已连接')
+  reconnectCount.value = 0
+}
+
+const handleDisconnected = (code, reason) => {
+  console.log('[基础示例] WebSocket 已断开:', code, reason)
+}
+
+const handleError = (error) => {
+  console.error('[基础示例] WebSocket 错误:', error)
+  errorMessage.value = error.message || '连接错误'
+  setTimeout(() => {
+    errorMessage.value = ''
+  }, 3000)
+}
+
+const handleMessage = (message) => {
+  console.log('[基础示例] 收到消息:', message)
+  messages.value.push({
+    ...message,
+    timestamp: new Date().toLocaleTimeString()
+  })
+}
+
+const handleStatusChanged = (newStatus) => {
+  console.log('[基础示例] 状态变化:', newStatus)
+  status.value = newStatus
+}
+
+const handleConnecting = () => {
+  console.log('[基础示例] 开始连接')
+}
+
+const handleReconnecting = () => {
+  console.log('[基础示例] 开始重连')
+  reconnectCount.value++
+}
+
+const handleMessageSent = (message) => {
+  console.log('[基础示例] 消息已发送:', message)
+}
+
+const handleMessageQueued = (message) => {
+  console.log('[基础示例] 消息已加入队列:', message)
+}
+
+const handleMessageFailed = (data) => {
+  console.error('[基础示例] 消息发送失败:', data)
+}
+
+const handleConnect = () => {
+  wsRef.value?.connect()
+}
+
+const handleDisconnect = () => {
+  wsRef.value?.disconnect()
+}
+
+const handleSend = () => {
+  wsRef.value?.send('test', {
+    text: 'Hello from CubeWebSocket',
+    timestamp: Date.now()
+  })
+}
+
+const handleClearMessages = () => {
+  messages.value = []
+}
+</script>
+
+<style scoped>
+.basic-example {
+  padding: 20px;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.status-panel {
+  background: #f5f5f5;
+  padding: 20px;
+  border-radius: 8px;
+  margin-bottom: 20px;
+}
+
+.status-panel h3 {
+  margin-top: 0;
+  margin-bottom: 15px;
+  color: #333;
+}
+
+.status-item {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+  font-size: 14px;
+}
+
+.status-item .label {
+  width: 100px;
+  color: #666;
+}
+
+.status-item .value {
+  font-weight: 600;
+  color: #333;
+}
+
+.status {
+  padding: 4px 12px;
+  border-radius: 4px;
+  font-weight: 600;
+}
+
+.status.disconnected {
+  background: #999;
+  color: #fff;
+}
+
+.status.connecting {
+  background: #faad14;
+  color: #fff;
+}
+
+.status.connected {
+  background: #52c41a;
+  color: #fff;
+}
+
+.status.reconnecting {
+  background: #1890ff;
+  color: #fff;
+}
+
+.status.error {
+  background: #ff4d4f;
+  color: #fff;
+}
+
+.value.yes {
+  color: #52c41a;
+}
+
+.value.no {
+  color: #999;
+}
+
+.message-panel {
+  background: #fff;
+  padding: 20px;
+  border-radius: 8px;
+  margin-bottom: 20px;
+  border: 1px solid #e0e0e0;
+}
+
+.message-panel h3 {
+  margin-top: 0;
+  margin-bottom: 15px;
+  color: #333;
+}
+
+.message-list {
+  max-height: 400px;
+  overflow-y: auto;
+}
+
+.message-item {
+  padding: 12px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.message-item:last-child {
+  border-bottom: none;
+}
+
+.message-type {
+  font-weight: 600;
+  color: #667eea;
+  margin-bottom: 6px;
+}
+
+.message-content {
+  font-family: 'Courier New', monospace;
+  font-size: 12px;
+  color: #333;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+.empty {
+  text-align: center;
+  padding: 40px;
+  color: #999;
+}
+
+.control-panel {
+  background: #f5f5f5;
+  padding: 20px;
+  border-radius: 8px;
+}
+
+.control-panel h3 {
+  margin-top: 0;
+  margin-bottom: 15px;
+  color: #333;
+}
+
+.control-buttons {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.control-buttons button {
+  padding: 10px 20px;
+  border: none;
+  border-radius: 4px;
+  background: #667eea;
+  color: #fff;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.control-buttons button:hover:not(:disabled) {
+  background: #5568d3;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 8px rgba(102, 126, 234, 0.3);
+}
+
+.control-buttons button:disabled {
+  background: #ccc;
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+</style>

Web/Vue/CubeLib/examples/CubeWebSocket/MessageQueueExample.vue

@@ -0,0 +1,500 @@
+<template>
+  <div class="message-queue-example">
+    <div class="queue-panel">
+      <h3>消息队列</h3>
+      <div class="queue-stats">
+        <div class="stat-item">
+          <span class="stat-label">队列大小:</span>
+          <span :class="['stat-value', { 'warning': queueSize > 50, 'danger': queueSize > 80 }]">
+            {{ queueSize }} / {{ maxQueueSize }}
+          </span>
+        </div>
+        <div class="stat-item">
+          <span class="stat-label">已发送:</span>
+          <span class="stat-value success">{{ sentCount }}</span>
+        </div>
+        <div class="stat-item">
+          <span class="stat-label">已排队:</span>
+          <span class="stat-value info">{{ queuedCount }}</span>
+        </div>
+        <div class="stat-item">
+          <span class="stat-label">发送失败:</span>
+          <span class="stat-value error">{{ failedCount }}</span>
+        </div>
+      </div>
+
+      <div class="queue-progress">
+        <div class="progress-bar">
+          <div 
+            class="progress-fill" 
+            :style="{ width: `${(queueSize / maxQueueSize) * 100}%` }"
+            :class="{ 'warning': queueSize > 50, 'danger': queueSize > 80 }"
+          ></div>
+        </div>
+        <div class="progress-text">{{ Math.round((queueSize / maxQueueSize) * 100) }}%</div>
+      </div>
+
+      <div class="queue-config">
+        <div class="config-item">
+          <label class="config-label">最大队列大小:</label>
+          <input 
+            type="number" 
+            v-model.number="maxQueueSize" 
+            min="10"
+            max="500"
+            step="10"
+          />
+        </div>
+        <div class="config-item">
+          <label class="config-label">自动发送间隔:</label>
+          <input 
+            type="number" 
+            v-model.number="autoSendInterval" 
+            min="100"
+            max="5000"
+            step="100"
+          />
+          <span class="unit">毫秒</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="message-log-panel">
+      <h3>消息日志</h3>
+      <div class="log-filters">
+        <button 
+          v-for="filter in filters" 
+          :key="filter.value"
+          :class="['filter-btn', { active: activeFilter === filter.value }]"
+          @click="activeFilter = filter.value"
+        >
+          {{ filter.label }}
+        </button>
+      </div>
+      <div class="log-list">
+        <div 
+          v-for="(log, index) in filteredLogs" 
+          :key="index" 
+          :class="['log-item', log.type]"
+        >
+          <div class="log-time">{{ log.time }}</div>
+          <div class="log-content">
+            <div class="log-type">{{ log.type }}</div>
+            <div class="log-message">{{ log.message }}</div>
+          </div>
+        </div>
+        <div v-if="filteredLogs.length === 0" class="empty">暂无日志</div>
+      </div>
+    </div>
+
+    <div class="control-panel">
+      <h3>控制</h3>
+      <div class="control-buttons">
+        <button @click="handleConnect" :disabled="status !== 'disconnected'">
+          连接
+        </button>
+        <button @click="handleDisconnect" :disabled="status !== 'connected'">
+          断开
+        </button>
+        <button @click="handleSendSingle" :disabled="status !== 'connected'">
+          发送单条消息
+        </button>
+        <button @click="handleSendBatch" :disabled="status !== 'connected'">
+          批量发送10条
+        </button>
+        <button @click="handleClearLogs" class="secondary">
+          清空日志
+        </button>
+      </div>
+    </div>
+
+    <CubeWebSocket
+      ref="wsRef"
+      ws-url="ws://localhost:8086/ws"
+      :auto-connect="false"
+      :max-queue-size="maxQueueSize"
+      :debug-mode="true"
+      @connected="handleConnected"
+      @disconnected="handleDisconnected"
+      @error="handleError"
+      @message="handleMessage"
+      @status-changed="handleStatusChanged"
+      @message-sent="handleMessageSent"
+      @message-queued="handleMessageQueued"
+      @message-failed="handleMessageFailed"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+import CubeWebSocket from 'joyd.web.vue.cubelib'
+
+const wsRef = ref(null)
+const status = ref('disconnected')
+const queueSize = ref(0)
+const maxQueueSize = ref(100)
+const sentCount = ref(0)
+const queuedCount = ref(0)
+const failedCount = ref(0)
+const autoSendInterval = ref(500)
+const logs = ref([])
+const activeFilter = ref('all')
+
+const filters = [
+  { value: 'all', label: '全部' },
+  { value: 'sent', label: '已发送' },
+  { value: 'queued', label: '已排队' },
+  { value: 'failed', label: '失败' }
+]
+
+const filteredLogs = computed(() => {
+  if (activeFilter.value === 'all') {
+    return logs.value
+  }
+  return logs.value.filter(log => log.type === activeFilter.value)
+})
+
+const addLog = (type, message) => {
+  logs.value.unshift({
+    type,
+    time: new Date().toLocaleTimeString(),
+    message
+  })
+  if (logs.value.length > 100) {
+    logs.value = logs.value.slice(0, 100)
+  }
+}
+
+const handleConnected = () => {
+  console.log('[消息队列示例] WebSocket 已连接')
+  addLog('info', '连接成功，开始发送队列中的消息')
+}
+
+const handleDisconnected = (code, reason) => {
+  console.log('[消息队列示例] WebSocket 已断开:', code, reason)
+  addLog('warning', `连接断开 (${code}): ${reason}`)
+}
+
+const handleError = (error) => {
+  console.error('[消息队列示例] WebSocket 错误:', error)
+  addLog('error', `连接错误: ${error.message}`)
+}
+
+const handleMessage = (message) => {
+  console.log('[消息队列示例] 收到消息:', message)
+  addLog('info', `收到消息: ${message.type}`)
+}
+
+const handleStatusChanged = (newStatus) => {
+  console.log('[消息队列示例] 状态变化:', newStatus)
+  status.value = newStatus
+}
+
+const handleMessageSent = (message) => {
+  console.log('[消息队列示例] 消息已发送:', message)
+  sentCount.value++
+  addLog('sent', `发送消息: ${message.type}`)
+}
+
+const handleMessageQueued = (message) => {
+  console.log('[消息队列示例] 消息已加入队列:', message)
+  queueSize.value++
+  queuedCount.value++
+  addLog('queued', `消息加入队列: ${message.type}`)
+}
+
+const handleMessageFailed = (data) => {
+  console.error('[消息队列示例] 消息发送失败:', data)
+  failedCount.value++
+  queueSize.value--
+  addLog('failed', `消息发送失败 (${data.reason}): ${data.message.type}`)
+}
+
+const handleConnect = () => {
+  wsRef.value?.connect()
+}
+
+const handleDisconnect = () => {
+  wsRef.value?.disconnect()
+}
+
+const handleSendSingle = () => {
+  wsRef.value?.send('test', {
+    text: `测试消息 ${Date.now()}`,
+    index: sentCount.value + queuedCount.value
+  })
+}
+
+const handleSendBatch = () => {
+  for (let i = 0; i < 10; i++) {
+    setTimeout(() => {
+      wsRef.value?.send('batch', {
+        index: i,
+        text: `批量消息 ${i}`,
+        timestamp: Date.now()
+      })
+    }, i * autoSendInterval.value)
+  }
+}
+
+const handleClearLogs = () => {
+  logs.value = []
+  sentCount.value = 0
+  queuedCount.value = 0
+  failedCount.value = 0
+}
+</script>
+
+<style scoped>
+.message-queue-example {
+  padding: 20px;
+  max-width: 1400px;
+  margin: 0 auto;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 20px;
+}
+
+.queue-panel,
+.message-log-panel,
+.control-panel {
+  background: #f5f5f5;
+  padding: 20px;
+  border-radius: 8px;
+}
+
+.queue-panel h3,
+.message-log-panel h3,
+.control-panel h3 {
+  margin-top: 0;
+  margin-bottom: 15px;
+  color: #333;
+}
+
+.queue-stats {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 12px;
+  margin-bottom: 20px;
+}
+
+.stat-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+}
+
+.stat-label {
+  color: #666;
+}
+
+.stat-value {
+  font-weight: 600;
+  color: #333;
+}
+
+.stat-value.success {
+  color: #52c41a;
+}
+
+.stat-value.info {
+  color: #1890ff;
+}
+
+.stat-value.error {
+  color: #ff4d4f;
+}
+
+.stat-value.warning {
+  color: #faad14;
+}
+
+.stat-value.danger {
+  color: #ff4d4f;
+}
+
+.queue-progress {
+  margin-bottom: 20px;
+}
+
+.progress-bar {
+  height: 20px;
+  background: #e0e0e0;
+  border-radius: 10px;
+  overflow: hidden;
+}
+
+.progress-fill {
+  height: 100%;
+  background: #667eea;
+  transition: width 0.3s ease;
+}
+
+.progress-fill.warning {
+  background: #faad14;
+}
+
+.progress-fill.danger {
+  background: #ff4d4f;
+}
+
+.progress-text {
+  text-align: center;
+  font-size: 12px;
+  color: #666;
+  margin-top: 4px;
+}
+
+.queue-config {
+  display: flex;
+  gap: 20px;
+  flex-wrap: wrap;
+}
+
+.config-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+}
+
+.config-label {
+  color: #666;
+}
+
+.config-item input {
+  padding: 6px 10px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  font-size: 14px;
+}
+
+.unit {
+  color: #999;
+  font-size: 12px;
+}
+
+.log-filters {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 15px;
+  flex-wrap: wrap;
+}
+
+.filter-btn {
+  padding: 6px 16px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  background: #fff;
+  color: #666;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.filter-btn:hover {
+  background: #f0f0f0;
+}
+
+.filter-btn.active {
+  background: #667eea;
+  color: #fff;
+  border-color: #667eea;
+}
+
+.log-list {
+  max-height: 400px;
+  overflow-y: auto;
+  background: #fff;
+  border-radius: 4px;
+  padding: 10px;
+}
+
+.log-item {
+  display: flex;
+  gap: 12px;
+  padding: 8px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.log-item:last-child {
+  border-bottom: none;
+}
+
+.log-item.sent {
+  border-left: 3px solid #52c41a;
+}
+
+.log-item.queued {
+  border-left: 3px solid #1890ff;
+}
+
+.log-item.failed {
+  border-left: 3px solid #ff4d4f;
+}
+
+.log-time {
+  min-width: 80px;
+  color: #999;
+  font-size: 12px;
+}
+
+.log-content {
+  flex: 1;
+}
+
+.log-type {
+  font-weight: 600;
+  color: #667eea;
+  margin-bottom: 4px;
+}
+
+.log-message {
+  font-size: 13px;
+  color: #333;
+}
+
+.empty {
+  text-align: center;
+  padding: 40px;
+  color: #999;
+}
+
+.control-buttons {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.control-buttons button {
+  padding: 10px 20px;
+  border: none;
+  border-radius: 4px;
+  background: #667eea;
+  color: #fff;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.control-buttons button:hover:not(:disabled) {
+  background: #5568d3;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 8px rgba(102, 126, 234, 0.3);
+}
+
+.control-buttons button:disabled {
+  background: #ccc;
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.control-buttons button.secondary {
+  background: #6c757d;
+}
+
+.control-buttons button.secondary:hover:not(:disabled) {
+  background: #5a6268;
+}
+</style>

Web/Vue/CubeLib/package.json

@@ -1,12 +1,14 @@
 {
   "name": "joyd.web.vue.cubelib",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Vue3 CubeLib 组件库",
   "type": "module",
   "main": "index.js",
   "files": [
     "dist/*",
     "src/*",
+    "examples/*",
+    "docs/*",
     "README.md"
   ],
   "peerDependencies": {

Web/Vue/CubeLib/src/components/CubeWebSocket.vue

@@ -0,0 +1,491 @@
+<template>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue'
+
+const props = defineProps({
+  wsUrl: {
+    type: String,
+    default: '',
+    validator: (value) => {
+      if (!value) return true
+      try {
+        new URL(value)
+        return true
+      } catch {
+        return false
+      }
+    }
+  },
+  autoConnect: {
+    type: Boolean,
+    default: true
+  },
+  reconnect: {
+    type: Boolean,
+    default: true
+  },
+  maxReconnectDelay: {
+    type: Number,
+    default: 30000,
+    validator: (value) => value > 0
+  },
+  debugMode: {
+    type: Boolean,
+    default: false
+  },
+  heartbeatInterval: {
+    type: Number,
+    default: 30000,
+    validator: (value) => value > 0
+  },
+  connectTimeout: {
+    type: Number,
+    default: 10000,
+    validator: (value) => value > 0
+  },
+  maxQueueSize: {
+    type: Number,
+    default: 100,
+    validator: (value) => value > 0
+  }
+})
+
+const emit = defineEmits([
+  'connected',
+  'disconnected',
+  'error',
+  'message',
+  'status-changed',
+  'connecting',
+  'reconnecting',
+  'message-sent',
+  'message-queued',
+  'message-failed'
+])
+
+const ws = ref(null)
+const status = ref('disconnected')
+const reconnectAttempts = ref(0)
+const reconnectDelay = ref(1000)
+const messageQueue = ref([])
+const isOnline = ref(navigator.onLine)
+
+const timers = {
+  reconnect: null,
+  heartbeat: null,
+  connectTimeout: null
+}
+
+const log = (...args) => {
+  if (props.debugMode) {
+    console.log('[CubeWebSocket]', ...args)
+  }
+}
+
+const logError = (...args) => {
+  if (props.debugMode) {
+    console.error('[CubeWebSocket]', ...args)
+  }
+}
+
+const buildBinaryMessage = (message) => {
+  const jsonStr = JSON.stringify(message)
+  const msgType = 0
+  
+  const len = jsonStr.length
+  const lenBytes = new ArrayBuffer(4)
+  const lenView = new DataView(lenBytes)
+  lenView.setUint32(0, len, true)
+  
+  const extParamBytes = new ArrayBuffer(2)
+  const extParamView = new DataView(extParamBytes)
+  extParamView.setUint16(0, 0, true)
+  
+  const msgBytes = new Uint8Array(1 + 2 + 4 + len)
+  msgBytes[0] = msgType
+  for (let i = 0; i < 2; i++) {
+    msgBytes[1 + i] = new Uint8Array(extParamBytes)[i]
+  }
+  for (let i = 0; i < 4; i++) {
+    msgBytes[3 + i] = new Uint8Array(lenBytes)[i]
+  }
+  for (let i = 0; i < len; i++) {
+    msgBytes[7 + i] = jsonStr.charCodeAt(i)
+  }
+  
+  return msgBytes
+}
+
+const connect = () => {
+  const wsUrl = props.wsUrl || 'ws://localhost:8086/ws'
+  
+  try {
+    if (ws.value) {
+      if (ws.value.readyState === WebSocket.CONNECTING) {
+        log('WebSocket正在连接中，跳过本次连接')
+        return
+      }
+      if (ws.value.readyState === WebSocket.OPEN) {
+        log('WebSocket已连接，跳过本次连接')
+        return
+      }
+      ws.value.close()
+    }
+    
+    status.value = 'connecting'
+    emit('status-changed', 'connecting')
+    emit('connecting')
+    
+    ws.value = new WebSocket(wsUrl)
+    
+    startConnectTimer()
+    
+    ws.value.onopen = () => {
+      stopConnectTimer()
+      status.value = 'connected'
+      emit('status-changed', 'connected')
+      reconnectAttempts.value = 0
+      reconnectDelay.value = 1000
+      log('WebSocket连接成功')
+      emit('connected')
+      startHeartbeat()
+      flushQueue()
+    }
+    
+    ws.value.onmessage = (event) => {
+      handleMessage(event)
+    }
+    
+    ws.value.onclose = (event) => {
+      stopConnectTimer()
+      stopHeartbeat()
+      log('WebSocket连接关闭:', event.code, event.reason)
+      emit('disconnected', event.code, event.reason)
+      
+      if (!event.wasClean && props.reconnect) {
+        status.value = 'reconnecting'
+        emit('status-changed', 'reconnecting')
+        emit('reconnecting')
+        reconnect()
+      } else {
+        status.value = 'disconnected'
+        emit('status-changed', 'disconnected')
+      }
+    }
+    
+    ws.value.onerror = (error) => {
+      stopConnectTimer()
+      stopHeartbeat()
+      console.error('[CubeWebSocket] WebSocket错误:', error)
+      emit('error', error)
+      
+      if (props.reconnect) {
+        status.value = 'reconnecting'
+        emit('status-changed', 'reconnecting')
+        emit('reconnecting')
+        reconnect()
+      } else {
+        status.value = 'error'
+        emit('status-changed', 'error')
+      }
+    }
+  } catch (error) {
+    stopConnectTimer()
+    console.error('[CubeWebSocket] WebSocket连接失败:', error)
+    status.value = 'error'
+    emit('status-changed', 'error')
+    emit('error', error)
+    
+    if (props.reconnect) {
+      reconnect()
+    }
+  }
+}
+
+const disconnect = () => {
+  cancelReconnect()
+  stopHeartbeat()
+  stopConnectTimer()
+  
+  if (ws.value) {
+    ws.value.close()
+    ws.value = null
+  }
+  
+  status.value = 'disconnected'
+  emit('status-changed', 'disconnected')
+}
+
+const reconnect = () => {
+  if (ws.value && ws.value.readyState === WebSocket.CONNECTING) {
+    log('WebSocket正在连接中，跳过本次重连')
+    return
+  }
+  
+  clearTimer('reconnect')
+  
+  const delay = Math.min(reconnectDelay.value, props.maxReconnectDelay)
+  
+  log(`WebSocket准备重连，延迟: ${delay}ms`)
+  status.value = 'reconnecting'
+  emit('status-changed', 'reconnecting')
+  emit('reconnecting')
+  
+  timers.reconnect = setTimeout(() => {
+    reconnectAttempts.value++
+    log(`WebSocket开始重连，尝试次数: ${reconnectAttempts.value}`)
+    connect()
+    
+    if (reconnectDelay.value < props.maxReconnectDelay) {
+      reconnectDelay.value *= 2
+    }
+  }, delay)
+}
+
+const send = (type, data = {}) => {
+  const message = { version: 1, type, data }
+  
+  if (ws.value && ws.value.readyState === WebSocket.OPEN) {
+    try {
+      const msgBytes = buildBinaryMessage(message)
+      ws.value.send(msgBytes)
+      log('发送消息:', message)
+      emit('message-sent', message)
+    } catch (error) {
+      logError('发送消息失败:', error)
+      emit('message-failed', { message, reason: 'send_error', error })
+    }
+  } else {
+    if (messageQueue.value.length < props.maxQueueSize) {
+      messageQueue.value.push({ type, data })
+      log('消息已加入队列:', message)
+      emit('message-queued', message)
+    } else {
+      logError('消息队列已满，丢弃消息:', message)
+      emit('message-failed', { message, reason: 'queue_full' })
+    }
+  }
+}
+
+const flushQueue = () => {
+  while (messageQueue.value.length > 0) {
+    const msg = messageQueue.value.shift()
+    const message = { version: 1, type: msg.type, data: msg.data }
+    
+    try {
+      const msgBytes = buildBinaryMessage(message)
+      ws.value.send(msgBytes)
+      log('发送队列消息:', message)
+      emit('message-sent', message)
+    } catch (error) {
+      logError('发送队列消息失败:', error)
+      messageQueue.value.unshift(msg)
+      emit('message-failed', { message, reason: 'send_error', error })
+      break
+    }
+  }
+}
+
+const handleMessage = (event) => {
+  log('收到WebSocket消息，类型:', event.data instanceof Blob ? 'Blob' : typeof event.data)
+  
+  if (event.data instanceof Blob) {
+    event.data.arrayBuffer().then(buffer => {
+      const data = new Uint8Array(buffer)
+      log('WebSocket消息长度:', data.length)
+      
+      let offset = 0
+      
+      try {
+        while (offset < data.length) {
+          if (offset + 7 > data.length) {
+            log('WebSocket消息不完整：数据不足读取消息头，需要7字节，剩余:', data.length - offset)
+            break
+          }
+          
+          const msgType = data[offset]
+          const extParam = new DataView(buffer, offset + 1, 2).getUint16(0, true)
+          const len = new DataView(buffer, offset + 3, 4).getUint32(0, true)
+          
+          log('消息头解析结果:', { msgType, extParam, len })
+          
+          offset += 7
+          
+          if (offset + len > data.length) {
+            log('WebSocket消息不完整：数据不足读取消息内容，需要', len, '字节，剩余:', data.length - offset)
+            break
+          }
+          
+          const content = new Uint8Array(buffer, offset, len)
+          offset += len
+          
+          if (msgType === 0) {
+            const jsonStr = new TextDecoder().decode(content)
+            log('解码后的WebSocket字符串消息:', jsonStr)
+            
+            if (!jsonStr || jsonStr.trim() === '') {
+              log('WebSocket消息为空')
+              continue
+            }
+            
+            if (!jsonStr.trim().startsWith('{')) {
+              log('WebSocket消息不是有效的JSON格式:', jsonStr)
+              continue
+            }
+            
+            try {
+              const message = JSON.parse(jsonStr)
+              log('解析后的WebSocket消息:', message)
+              emit('message', message)
+            } catch (jsonError) {
+              logError('JSON解析错误:', jsonError)
+            }
+          } else if (msgType === 1) {
+            const jsonContent = content.slice(4)
+            const jsonStr = new TextDecoder().decode(jsonContent)
+            log('解码后的WebSocket二进制消息:', jsonStr)
+            
+            if (!jsonStr || jsonStr.trim() === '') {
+              log('WebSocket消息为空')
+              continue
+            }
+            
+            if (!jsonStr.trim().startsWith('{')) {
+              log('WebSocket消息不是有效的JSON格式:', jsonStr)
+              continue
+            }
+            
+            try {
+              const message = JSON.parse(jsonStr)
+              log('解析后的WebSocket消息:', message)
+              emit('message', message)
+            } catch (jsonError) {
+              logError('JSON解析错误:', jsonError)
+            }
+          } else {
+            log('未知的消息类型:', msgType)
+          }
+        }
+      } catch (error) {
+        logError('WebSocket消息处理异常:', error)
+      }
+    }).catch(error => {
+      logError('WebSocket数据处理错误:', error)
+    })
+  } else {
+    log('收到WebSocket文本消息:', event.data)
+    try {
+      const message = JSON.parse(event.data)
+      log('解析后的WebSocket文本消息:', message)
+      emit('message', message)
+    } catch (error) {
+      logError('WebSocket文本消息解析错误:', error)
+    }
+  }
+}
+
+const startHeartbeat = () => {
+  stopHeartbeat()
+  timers.heartbeat = setInterval(() => {
+    if (ws.value && ws.value.readyState === WebSocket.OPEN) {
+      send('ping', {})
+    }
+  }, props.heartbeatInterval)
+}
+
+const stopHeartbeat = () => {
+  if (timers.heartbeat) {
+    clearInterval(timers.heartbeat)
+    timers.heartbeat = null
+    log('已停止心跳')
+  }
+}
+
+const startConnectTimer = () => {
+  stopConnectTimer()
+  timers.connectTimeout = setTimeout(() => {
+    if (ws.value && ws.value.readyState === WebSocket.CONNECTING) {
+      logError('连接超时')
+      ws.value.close()
+      emit('error', new Error('Connection timeout'))
+    }
+  }, props.connectTimeout)
+}
+
+const stopConnectTimer = () => {
+  if (timers.connectTimeout) {
+    clearTimeout(timers.connectTimeout)
+    timers.connectTimeout = null
+    log('已停止连接超时定时器')
+  }
+}
+
+const clearTimer = (timerName) => {
+  if (timers[timerName]) {
+    clearTimeout(timers[timerName])
+    timers[timerName] = null
+    log(`已清理定时器: ${timerName}`)
+  }
+}
+
+const clearAllTimers = () => {
+  Object.keys(timers).forEach(timerName => {
+    clearTimer(timerName)
+  })
+  log('已清理所有定时器')
+}
+
+const cancelReconnect = () => {
+  clearTimer('reconnect')
+  reconnectAttempts.value = 0
+  reconnectDelay.value = 1000
+  status.value = 'disconnected'
+  emit('status-changed', 'disconnected')
+  log('WebSocket重连已取消')
+}
+
+const handleOnline = () => {
+  log('网络已恢复')
+  isOnline.value = true
+  
+  if (props.reconnect && status.value !== 'connected') {
+    log('网络已恢复，开始重连WebSocket...')
+    reconnect()
+  }
+}
+
+const handleOffline = () => {
+  log('网络已断开')
+  isOnline.value = false
+}
+
+onMounted(() => {
+  if (props.autoConnect) {
+    connect()
+  }
+  window.addEventListener('online', handleOnline)
+  window.addEventListener('offline', handleOffline)
+})
+
+onUnmounted(() => {
+  disconnect()
+  clearAllTimers()
+  window.removeEventListener('online', handleOnline)
+  window.removeEventListener('offline', handleOffline)
+})
+
+defineExpose({
+  connect,
+  disconnect,
+  send,
+  reconnect,
+  getStatus: () => status.value,
+  isConnected: () => status.value === 'connected',
+  getQueueSize: () => messageQueue.value.length
+})
+</script>
+
+<style scoped>
+</style>

Web/Vue/CubeLib/src/index.ts

@@ -1,7 +1,9 @@
 import CubeSplitter from './components/CubeSplitter.vue'
+import CubeWebSocket from './components/CubeWebSocket.vue'
 
 const components = {
-  CubeSplitter
+  CubeSplitter,
+  CubeWebSocket
 }
 
 const install = (app: any) => {
@@ -16,4 +18,4 @@ const CubeLib = {
 }
 
 export default CubeLib
-export { CubeSplitter }
+export { CubeSplitter, CubeWebSocket }