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
- 联系项目开发者
- 参与社区讨论

---

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