diff --git a/IFLOW.md b/IFLOW.md index e1eefe3..c79a728 100644 --- a/IFLOW.md +++ b/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/` 目录 +### 组件设计原则 +- 单一职责:每个组件只负责一个功能 +- 可复用:提取公共逻辑为可复用组件 +- 可测试:组件逻辑易于测试 +- 性能优先:避免不必要的重渲染 + ## 许可证 版权所有 © 上海潘哆呐科技有限公司 diff --git a/README.md b/README.md index 5293aa0..8082328 100644 --- a/README.md +++ b/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 条数据,支持大数据量操作。 + --- ## 📄 许可证