新增WebSocket组件

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: 如何保存分隔条的位置？