You've already forked rollingDraw
文档:更新项目文档,新增显示设置和性能优化说明
This commit is contained in:
48
README.md
48
README.md
@@ -28,6 +28,8 @@ Rolling Draw 是一个基于 Vue 3 + Vite 开发的现代化抽奖系统,提
|
||||
- 🎯 **公平抽奖** - 采用 Fisher-Yates 洗牌算法
|
||||
- 📊 **数据管理** - 支持导入导出,方便数据管理
|
||||
- ⌨️ **快捷操作** - 大屏端支持快捷键控制
|
||||
- 🎨 **显示设置** - 可自定义字体颜色、大小和显示字段
|
||||
- ⚡ **性能优化** - 分页显示,支持大数据量
|
||||
|
||||
---
|
||||
|
||||
@@ -40,11 +42,13 @@ Rolling Draw 是一个基于 Vue 3 + Vite 开发的现代化抽奖系统,提
|
||||
- ✅ 自定义字段配置
|
||||
- ✅ 删除参与者
|
||||
- ✅ 清空名单
|
||||
- ✅ 分页显示(支持大数据量)
|
||||
|
||||
### 奖品管理
|
||||
- ✅ 添加奖品
|
||||
- ✅ 设置库存数量
|
||||
- ✅ 实时库存管理
|
||||
- ✅ 库存进度条显示
|
||||
- ✅ 删除奖品
|
||||
|
||||
### 轮次管理
|
||||
@@ -52,6 +56,7 @@ Rolling Draw 是一个基于 Vue 3 + Vite 开发的现代化抽奖系统,提
|
||||
- ✅ 关联奖品
|
||||
- ✅ 设置抽取人数
|
||||
- ✅ 轮次状态跟踪
|
||||
- ✅ 轮次序号显示
|
||||
|
||||
### 抽奖控制
|
||||
- ✅ 开始/停止抽奖
|
||||
@@ -64,6 +69,8 @@ Rolling Draw 是一个基于 Vue 3 + Vite 开发的现代化抽奖系统,提
|
||||
- ✅ 实时记录中奖信息
|
||||
- ✅ 导出中奖名单
|
||||
- ✅ 按轮次筛选
|
||||
- ✅ 动态显示所有字段
|
||||
- ✅ 分页显示(支持大数据量)
|
||||
|
||||
### 大屏展示
|
||||
- ✅ 滚动动画效果
|
||||
@@ -71,6 +78,16 @@ Rolling Draw 是一个基于 Vue 3 + Vite 开发的现代化抽奖系统,提
|
||||
- ✅ 自定义背景图片
|
||||
- ✅ 快捷键控制(← → 切换轮次,Space 开始/停止)
|
||||
- ✅ 多列布局支持(可配置每行列数)
|
||||
- ✅ 人名按抽取数量显示
|
||||
- ✅ 字段标签控制
|
||||
- ✅ 刷新后不显示历史结果
|
||||
|
||||
### 显示设置
|
||||
- ✅ 每行显示人数设置
|
||||
- ✅ 字体颜色设置(轮次名称、人名、奖品名称)
|
||||
- ✅ 字体大小设置(轮次名称、奖品名称、人名)
|
||||
- ✅ 显示字段选择
|
||||
- ✅ 字段标签显示/隐藏
|
||||
|
||||
---
|
||||
|
||||
@@ -221,6 +238,13 @@ rollingDraw/
|
||||
- **lottery_displayMode** - 显示模式
|
||||
- **lottery_backgroundImage** - 背景图片
|
||||
- **lottery_columnsPerRow** - 每行列数
|
||||
- **lottery_displayFontColor** - 大屏端字体颜色
|
||||
- **lottery_prizeNameFontColor** - 奖品名称字体颜色
|
||||
- **lottery_roundNameFontSize** - 轮次名称字体大小
|
||||
- **lottery_prizeNameFontSize** - 奖品名称字体大小
|
||||
- **lottery_participantFontSize** - 人名字体大小
|
||||
- **lottery_displayFields** - 大屏端显示的字段列表
|
||||
- **lottery_showFieldLabels** - 是否显示字段标签
|
||||
|
||||
---
|
||||
|
||||
@@ -240,6 +264,13 @@ rollingDraw/
|
||||
- 常量名:UPPER_SNAKE_CASE
|
||||
- 函数名:camelCase
|
||||
|
||||
### 组件设计原则
|
||||
|
||||
- 单一职责:每个组件只负责一个功能
|
||||
- 可复用:提取公共逻辑为可复用组件
|
||||
- 可测试:组件逻辑易于测试
|
||||
- 性能优先:避免不必要的重渲染
|
||||
|
||||
### 添加新功能
|
||||
|
||||
1. 在 `src/views/` 创建新组件
|
||||
@@ -276,6 +307,16 @@ rollingDraw/
|
||||
|
||||
修改 `src/styles/variables.css` 中的 CSS 变量即可自定义主题。
|
||||
|
||||
### 大屏显示设置
|
||||
|
||||
在管理后台可以实时调整大屏端的显示效果:
|
||||
|
||||
- 每行显示人数(1-10 人)
|
||||
- 字体颜色(轮次名称、人名、奖品名称)
|
||||
- 字体大小(轮次名称、奖品名称、人名)
|
||||
- 显示字段选择
|
||||
- 字段标签显示/隐藏
|
||||
|
||||
---
|
||||
|
||||
## ⚠️ 注意事项
|
||||
@@ -285,6 +326,7 @@ rollingDraw/
|
||||
3. **图片限制**:背景图片最大支持 10MB
|
||||
4. **CSV 格式**:导入文件第一行为字段名,后续行为数据
|
||||
5. **数据清理**:使用浏览器清除缓存会删除所有数据
|
||||
6. **性能建议**:单次导入建议不超过 1000 人,大量数据请分批导入
|
||||
|
||||
---
|
||||
|
||||
@@ -305,6 +347,12 @@ A: 在管理后台的"中奖记录"页面点击"清空"按钮。
|
||||
### Q: 抽奖算法公平吗?
|
||||
A: 采用 Fisher-Yates 洗牌算法,确保每个参与者被抽中的概率相同。
|
||||
|
||||
### Q: 如何自定义大屏显示效果?
|
||||
A: 在管理后台点击"显示设置"按钮,可以调整字体颜色、大小、显示字段等。
|
||||
|
||||
### Q: 大量数据导入会卡顿吗?
|
||||
A: 系统已实现分页显示,单页默认显示 20 条数据,支持大数据量操作。
|
||||
|
||||
---
|
||||
|
||||
## 📄 许可证
|
||||
|
||||
Reference in New Issue
Block a user