初次提交

2026-01-07 11:34:02 +08:00
parent 48298c38bc
commit 327df5d61c
12 changed files with 19906 additions and 1 deletions
--- a/README.md
+++ b/README.md
@@ -1,2 +1,216 @@
-# client-web
+# 游戏方块容器 - 优化版本

+## 🚀 项目概述
+
+这是一个基于Vue 3和WebSocket的实时游戏监控系统，用于显示4个游戏方块的连接状态和动态圆点。
+
+## ✨ 优化内容
+
+### 1. **性能优化**
+- ✅ **WebSocket连接管理优化**：使用连接池和自动重连机制
+- ✅ **DOM操作优化**：使用Vue响应式数据替代直接DOM操作
+- ✅ **内存管理**：限制圆点数量，防止内存泄漏
+- ✅ **动画性能**：使用CSS3硬件加速和will-change属性
+
+### 2. **代码结构优化**
+- ✅ **组件化设计**：将方块组件化，提高代码复用性
+- ✅ **服务类分离**：WebSocket逻辑独立到服务类
+- ✅ **配置管理**：统一的配置文件管理
+- ✅ **工具类**：通用工具函数和日志系统
+
+### 3. **用户体验优化**
+- ✅ **响应式设计**：支持不同屏幕尺寸
+- ✅ **加载状态**：连接状态指示器和加载动画
+- ✅ **键盘快捷键**：快速操作功能
+- ✅ **状态栏**：实时显示连接状态和统计信息
+
+### 4. **错误处理增强**
+- ✅ **完善的错误处理**：WebSocket连接错误处理
+- ✅ **自动重连机制**：指数退避算法
+- ✅ **日志系统**：分级日志记录
+- ✅ **性能监控**：性能测量和分析
+
+### 5. **安全性优化**
+- ✅ **输入验证**：坐标范围验证
+- ✅ **连接验证**：WebSocket连接状态检查
+- ✅ **错误边界**：防止应用崩溃
+
+## 🛠️ 技术栈
+
+- **前端框架**：Vue 3
+- **通信协议**：WebSocket
+- **样式**：CSS3 + 响应式设计
+- **协议缓冲**：Protobuf.js
+- **工具库**：自定义工具类
+
+## 📁 项目结构
+
+```
+web/
+├── index.html          # 主页面
+├── game.js             # 主应用逻辑
+├── config.js           # 配置文件
+├── utils.js            # 工具类
+├── style.css           # 样式文件
+├── proto/              # 协议文件
+│   ├── action.proto    # 动作协议
+│   └── define.proto    # 定义协议
+└── README.md           # 项目说明
+```
+
+## 🚀 快速开始
+
+### 1. 启动项目
+```bash
+# 使用任何HTTP服务器启动项目
+python -m http.server 8000
+# 或
+npx serve .
+```
+
+### 2. 访问应用
+打开浏览器访问 `http://localhost:8000`
+
+## ⌨️ 键盘快捷键
+
+| 快捷键 | 功能 |
+|--------|------|
+| `H` | 隐藏/显示状态栏 |
+| `C` | 清除所有圆点 |
+| `R` | 重新连接所有WebSocket |
+
+## ⚙️ 配置说明
+
+### WebSocket配置
+```javascript
+websocket: {
+    baseUrl: 'ws://localhost:8501',    // WebSocket服务器地址
+    reconnectAttempts: 5,              // 重连次数
+    reconnectDelay: 1000,              // 重连延迟
+    heartbeatInterval: 30000,          // 心跳间隔
+    connectionTimeout: 10000           // 连接超时
+}
+```
+
+### 游戏配置
+```javascript
+game: {
+    maxDotsPerSquare: 100,             // 每个方块最大圆点数
+    dotLifetime: 30000,                // 圆点生命周期
+    gridSize: { width: 400, height: 400 }, // 网格大小
+    animationDuration: 300             // 动画持续时间
+}
+```
+
+## 🔧 自定义配置
+
+### 修改WebSocket服务器地址
+在 `config.js` 中修改 `websocket.baseUrl`：
+
+```javascript
+websocket: {
+    baseUrl: 'ws://your-server:port',
+    // ... 其他配置
+}
+```
+
+### 调整性能参数
+```javascript
+performance: {
+    enableAnimations: true,            // 启用动画
+    enableHoverEffects: true,          // 启用悬停效果
+    enableBackdropFilter: true,        // 启用背景模糊
+    maxFPS: 60                         // 最大帧率
+}
+```
+
+## 📊 性能特性
+
+### 1. **响应式布局**
+- 桌面端：2x2网格布局
+- 平板端：2x2自适应布局
+- 移动端：1x4垂直布局
+
+### 2. **动画优化**
+- CSS3硬件加速
+- 帧率控制
+- 动画性能监控
+
+### 3. **内存管理**
+- 圆点数量限制
+- 自动清理机制
+- 内存泄漏防护
+
+## 🐛 调试功能
+
+### 日志系统
+```javascript
+// 在浏览器控制台查看详细日志
+utils.debug('调试信息');
+utils.info('一般信息');
+utils.warn('警告信息');
+utils.error('错误信息');
+```
+
+### 性能监控
+```javascript
+// 测量函数执行时间
+const { result, duration } = utils.measurePerformance('函数名', () => {
+    // 要测量的代码
+});
+```
+
+## 🔒 安全特性
+
+### 1. **输入验证**
+- 坐标范围检查
+- 数据类型验证
+- 恶意数据过滤
+
+### 2. **连接安全**
+- WebSocket状态验证
+- 连接超时处理
+- 错误恢复机制
+
+## 📱 移动端支持
+
+- 响应式设计
+- 触摸友好的界面
+- 性能优化
+- 电池友好的动画
+
+## 🎨 主题定制
+
+### 颜色方案
+可以通过修改CSS变量来自定义主题：
+
+```css
+:root {
+    --primary-color: #ff6b6b;
+    --secondary-color: #4ecdc4;
+    --background-color: #f5f5f5;
+    --border-color: #555;
+}
+```
+
+## 🤝 贡献指南
+
+1. Fork 项目
+2. 创建功能分支
+3. 提交更改
+4. 推送到分支
+5. 创建 Pull Request
+
+## 📄 许可证
+
+MIT License
+
+## 📞 支持
+
+如有问题或建议，请提交 Issue 或联系开发团队。
+
+---
+
+**版本**: 2.0.0  
+**最后更新**: 2024年  
+**维护者**: 游戏开发团队