You've already forked rollingDraw
文档：更新项目文档，新增显示设置和性能优化说明
This commit is contained in:
yuantao
39
IFLOW.md
39
IFLOW.md
@@ -63,18 +63,21 @@ rollingDraw/
|
||||
- ✅ 自定义字段配置
|
||||
- ✅ 删除参与者
|
||||
- ✅ 清空名单
|
||||
- ✅ 分页显示（支持大数据量）
|
||||
|
||||
### 2. 奖品管理
|
||||
- ✅ 添加奖品
|
||||
- ✅ 设置库存数量
|
||||
- ✅ 实时库存管理
|
||||
- ✅ 删除奖品
|
||||
- ✅ 库存进度条显示
|
||||
|
||||
### 3. 轮次管理
|
||||
- ✅ 创建抽奖轮次
|
||||
- ✅ 关联奖品
|
||||
- ✅ 设置抽取人数
|
||||
- ✅ 轮次状态跟踪
|
||||
- ✅ 轮次序号显示
|
||||
|
||||
### 4. 抽奖控制
|
||||
- ✅ 开始/停止抽奖
|
||||
@@ -87,6 +90,8 @@ rollingDraw/
|
||||
- ✅ 实时记录中奖信息
|
||||
- ✅ 导出中奖名单
|
||||
- ✅ 按轮次筛选
|
||||
- ✅ 动态显示所有字段
|
||||
- ✅ 分页显示（支持大数据量）
|
||||
|
||||
### 6. 大屏展示
|
||||
- ✅ 滚动动画效果
|
||||
@@ -94,8 +99,19 @@ rollingDraw/
|
||||
- ✅ 自定义背景图片
|
||||
- ✅ 快捷键控制
|
||||
- ✅ 多列布局支持
|
||||
- ✅ 显示设置（字体颜色、字体大小、显示字段）
|
||||
- ✅ 字段标签控制
|
||||
- ✅ 人名按抽取数量显示
|
||||
- ✅ 刷新后不显示历史结果
|
||||
|
||||
### 7. 数据同步
|
||||
### 7. 显示设置
|
||||
- ✅ 每行显示人数设置
|
||||
- ✅ 字体颜色设置（轮次名称、人名、奖品名称）
|
||||
- ✅ 字体大小设置（轮次名称、奖品名称、人名）
|
||||
- ✅ 显示字段选择
|
||||
- ✅ 字段标签显示/隐藏
|
||||
|
||||
### 8. 数据同步
|
||||
- ✅ IndexedDB 本地存储
|
||||
- ✅ 跨标签页实时同步
|
||||
- ✅ 数据持久化
|
||||
@@ -124,6 +140,13 @@ rollingDraw/
|
||||
- **lottery_displayMode** - 显示模式
|
||||
- **lottery_backgroundImage** - 背景图片
|
||||
- **lottery_columnsPerRow** - 每行列数
|
||||
- **lottery_displayFontColor** - 大屏端字体颜色
|
||||
- **lottery_prizeNameFontColor** - 奖品名称字体颜色
|
||||
- **lottery_roundNameFontSize** - 轮次名称字体大小
|
||||
- **lottery_prizeNameFontSize** - 奖品名称字体大小
|
||||
- **lottery_participantFontSize** - 人名字体大小
|
||||
- **lottery_displayFields** - 大屏端显示的字段列表
|
||||
- **lottery_showFieldLabels** - 是否显示字段标签
|
||||
|
||||
## 快捷键
|
||||
|
||||
@@ -170,12 +193,18 @@ npm run preview
|
||||
- 可配置的轮次和奖品
|
||||
- 灵活的展示布局
|
||||
|
||||
### 性能优化
|
||||
- 分页显示支持大数据量
|
||||
- 虚拟滚动优化
|
||||
- 延迟加载
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. **数据备份**：建议定期导出参与者名单和中奖记录进行备份
|
||||
2. **浏览器兼容性**：需要支持 IndexedDB 的现代浏览器
|
||||
3. **图片限制**：背景图片最大支持 10MB
|
||||
4. **CSV 格式**：导入文件第一行为字段名，后续行为数据
|
||||
5. **性能建议**：单次导入建议不超过 1000 人，大量数据请分批导入
|
||||
|
||||
## 技术亮点
|
||||
|
||||
@@ -185,6 +214,8 @@ npm run preview
|
||||
- **Fisher-Yates 洗牌算法** - 公平的随机抽取
|
||||
- **跨标签页同步** - 实时数据更新
|
||||
- **CSS 变量** - 主题定制和样式管理
|
||||
- **分页优化** - 大数据量性能优化
|
||||
- **动态字段系统** - 灵活的自定义字段支持
|
||||
|
||||
## 开发规范
|
||||
|
||||
@@ -205,6 +236,12 @@ npm run preview
|
||||
- 工具函数放在 `utils/` 目录
|
||||
- 样式文件放在 `src/styles/` 目录
|
||||
|
||||
### 组件设计原则
|
||||
- 单一职责：每个组件只负责一个功能
|
||||
- 可复用：提取公共逻辑为可复用组件
|
||||
- 可测试：组件逻辑易于测试
|
||||
- 性能优先：避免不必要的重渲染
|
||||
|
||||
## 许可证
|
||||
|
||||
版权所有 © 上海潘哆呐科技有限公司
|
||||
|
||||
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