GameServerManager/docs/壁纸功能使用说明.md

🎨 背景壁纸功能使用说明

功能概述

GSM3 游戏面板现已支持自定义背景壁纸功能，包括静态图片和动态GIF！

✨ 主要特性

1. 支持的格式

• JPG / JPEG - 静态图片
• PNG - 静态图片（支持透明）
• GIF - 动态图片（支持动画） 🎬
• WEBP - 现代图片格式

2. 文件限制

• 最大文件大小：10MB
• 推荐分辨率：1920x1080 或更高

3. 两种壁纸模式

主面板壁纸

• 应用于登录后的所有页面
• 可独立设置和调整

登录页壁纸

• 同步模式：与主面板使用相同壁纸
• 独立模式：可单独上传不同的壁纸

🎮 使用方法

上传壁纸

1. 进入 设置页面
2. 找到 背景壁纸 设置区域
3. 点击 上传壁纸 按钮
4. 选择图片文件（支持 JPG、PNG、GIF、WEBP）
5. 等待上传完成

调整亮度

• 使用亮度滑块调节壁纸明暗度（10% - 100%）
• 较低的亮度可以提高文字可读性
• 推荐设置：40% - 60%

启用/禁用壁纸

• 使用切换开关快速启用或禁用壁纸
• 禁用后自动恢复默认渐变背景

登录页壁纸设置

同步主面板壁纸（默认）

• 开启后，登录页自动使用主面板壁纸
• 亮度设置也会同步

独立设置

• 关闭同步后，可以为登录页上传不同的壁纸
• 独立调整登录页壁纸的亮度
• 适合想要区分登录前后视觉效果的用户

🎬 GIF 动画壁纸特性

性能优化

• 使用 <img> 标签原生支持 GIF 动画
• 自动播放，无需额外配置
• 包含加载动画，提升用户体验

推荐使用场景

• 动态背景效果
• 游戏主题动画
• 氛围营造

注意事项

• GIF 文件较大时加载可能需要几秒钟
• 复杂的 GIF 动画可能影响低配设备性能
• 建议使用优化过的 GIF 文件

💡 最佳实践

图片选择

1. 高质量图片：分辨率至少 1920x1080
2. 合适的亮度：避免过暗或过亮的图片
3. 主题一致：选择与游戏面板风格匹配的壁纸
4. 文件大小：尽量压缩到 5MB 以下以获得更快的加载速度

GIF 优化建议

1. 使用在线工具压缩 GIF（如 ezgif.com）
2. 降低帧率（15-30 FPS 即可）
3. 减少颜色数量
4. 控制尺寸在合理范围

亮度设置建议

• 浅色主题：30% - 50%
• 深色主题：50% - 70%
• 根据壁纸内容调整

🔧 技术实现

存储位置

• 上传的壁纸存储在：server/data/wallpapers/
• 自动创建目录结构
• 文件命名：wallpaper-{type}-{timestamp}.{ext}

配置持久化

• 壁纸设置保存在浏览器本地存储
• 使用 Zustand 状态管理
• 支持多设备独立配置

安全性

• 文件类型验证
• 文件大小限制
• 需要身份验证才能上传

🎯 未来规划

• 支持视频背景（MP4）
• 壁纸库功能
• 在线壁纸下载
• 壁纸预设主题
• 模糊效果调节
• 渐变叠加层自定义

📝 常见问题

Q: 壁纸不显示？

A: 请检查：

1. 壁纸是否已启用（切换开关）
2. 浏览器是否支持图片格式
3. 清除浏览器缓存后重试

Q: GIF 动画不播放？

A: GIF 动画应该自动播放，如果不播放：

1. 检查文件是否是真正的 GIF 格式
2. 尝试重新上传
3. 确认浏览器支持 GIF

Q: 壁纸加载慢？

A: 可能原因：

1. 文件太大（建议 < 5MB）
2. 网络较慢
3. 使用在线压缩工具优化图片

Q: 能否同时设置多个壁纸？

A: 目前支持：

• 1 个主面板壁纸
• 1 个独立登录页壁纸（可选）

Q: 壁纸会同步到其他设备吗？

A: 不会。壁纸设置存储在本地浏览器，每个设备需要单独设置。

🤝 反馈与建议

如有问题或建议，欢迎：

• 提交 GitHub Issue
• 联系项目开发者
• 参与社区讨论

---

享受您的个性化游戏面板体验！ 🎮✨