├── README.md └── index.html /README.md: -------------------------------------------------------------------------------- 1 | # 3D 抽奖系统 (3D Lucky Draw System) 2 | 3 | 这是一个基于 Web 技术构建的现代化、炫酷的 3D 抽奖系统，专为企业年会、活动现场设计。支持离线运行，数据本地存储，无需配置后端服务器。 4 | 5 | ## ✨ 主要特性 6 | 7 | * **炫酷 3D 视觉效果**：使用 Three.js 构建的 3D 球体动画，每个参与者都是一张独立的卡片。 8 | * **多格式数据导入**：支持 Excel (`.xlsx`, `.xls`) 和纯文本 (`.txt`) 文件导入，也可直接复制粘贴手动录入。 9 | * **灵活的抽奖设置**：支持自定义奖项名称、单次抽取数量，可选择是否排除已中奖用户。 10 | * **实时中奖记录**：左侧侧边栏实时显示中奖历史，支持清空和重置。 11 | * **数据持久化**：所有数据（用户名单、配置、中奖记录）均保存在浏览器本地存储 (LocalStorage)，刷新页面不丢失，防误触关闭保护。 12 | * **响应式与可调整 UI**：侧边栏宽度支持鼠标拖拽调整，适应不同分辨率屏幕。 13 | * **离线可用**：下载依赖库后可完全离线运行（默认使用 CDN）。 14 | 15 | ## 🚀 快速开始 16 | 17 | ### 在线/联网使用 18 | 1. 直接用现代浏览器（Chrome, Edge, Firefox, Safari）打开 `index.html` 文件。 19 | 2. 系统会自动加载演示数据，点击“开始抽奖”即可体验。 20 | 21 | ### 离线使用 22 | 如果活动现场没有网络，请预先下载以下依赖库并修改 `index.html` 中的引用路径： 23 | * **Vue 3**: `vue.esm-browser.js` 24 | * **Three.js**: `three.module.js` 25 | * **Three.js CSS3DRenderer**: `CSS3DRenderer.js` 26 | * **Tailwind CSS**: `tailwindcss.js` (或编译后的 CSS) 27 | * **SheetJS**: `xlsx.full.min.js` 28 | * **Animate.css**: `animate.min.css` 29 | 30 | ## 📂 目录结构 31 | 32 | > **注意**：为了解决浏览器对本地文件 (`file://`) 的跨域安全限制，`index.html` 已经内联了所有业务逻辑代码，支持**直接双击运行**。 33 | 34 | ```text 35 | zedwork/ 36 | ├── index.html # [发布版] 集成所有代码，可离线直接运行 37 | └── README.md # 项目文档 38 | ``` 39 | 40 | ## 📝 数据导入格式 41 | 42 | 点击设置面板中的 **“设置/数据”** 按钮进行导入。 43 | 44 | ### 1. Excel 导入 45 | 支持 `.xlsx` 或 `.xls` 文件。 46 | * **第一列**：姓名 (必填) 47 | * **第二列**：部门/工号/描述 (选填) 48 | * *系统会自动识别首行是否为标题行。* 49 | 50 | | 姓名 | 部门 | 51 | | :--- | :--- | 52 | | 张三 | 技术部 | 53 | | 李四 | 运营部 | 54 | 55 | ### 2. TXT 文本导入 56 | 支持 `.txt` 文件，每行一个姓名。 57 | 58 | ```text 59 | 张三 60 | 李四 61 | 王五 62 | ``` 63 | 64 | ## 🛠️ 技术栈 65 | 66 | * **核心框架**: [Vue.js 3](https://vuejs.org/) (ESM build) 67 | * **3D 引擎**: [Three.js](https://threejs.org/) (CSS3DRenderer) 68 | * **样式库**: [Tailwind CSS](https://tailwindcss.com/) (CDN Script) + [Animate.css](https://animate.style/) 69 | * **工具库**: [SheetJS (xlsx)](https://sheetjs.com/) 70 | 71 | ## ⚠️ 注意事项 72 | 73 | 1. **浏览器兼容性**：请使用支持 ES Modules 的现代浏览器。 74 | 2. **数据安全**：数据存储在本地浏览器中，清理浏览器缓存会丢失数据。建议正式使用前先备份人员名单。 75 | 3. **性能**：建议参与人数在 10-500 人范围内以获得最佳 3D 渲染性能。 76 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 3D抽奖系统 | Lucky Draw 7 | 8 | 9 | 10 | 11 | 12 | 16 | 202 | 203 | 204 |
209 | 210 |
215 |
218 |

219 | 🏆 中奖记录 220 |

221 |
222 | 228 | 234 | 240 |
241 |
242 | 243 |
246 |
247 |
总人数
248 |
249 | {{ winnerStats.total }} 250 |
251 |
252 |
253 |
已中奖
254 |
257 | {{ winnerStats.winners }} 258 |
259 |
260 |
261 |
中奖率
262 |
263 | {{ winnerStats.percent }}% 264 |
265 |
266 |
267 |
268 |
272 | 暂无中奖记录 273 |
274 |
279 |
280 | {{ record.prizeName }} 283 |
284 |
285 | {{ record.time }} 286 |
287 |
291 | Seed: {{ record.seed }} 292 |
293 |
294 |
295 |
296 | 301 | {{ winner.name }} 302 | 303 |
304 |
305 |
306 |
307 | 308 | 309 |
310 | 311 |
314 |

325 | {{ store.config.mainTitle }} 326 |

327 |
328 | 329 | 330 |
331 | 349 |
350 | 351 | 352 | 369 | 370 | 371 |
376 |
379 |
380 |

383 | 🔐 公平性说明 384 |

385 | 391 |
392 |
395 |

396 | 随机算法： 399 | 本系统采用 400 | Mulberry32 403 | 伪随机数生成器，配合 404 | Cyrb128 407 | 哈希函数将种子转换为数值。 408 |

409 |

410 | 种子作用： 413 | 相同的种子 + 相同的名单 = 相同的中奖结果。 414 | 您可以公开种子供事后验证，确保结果可复现、不可篡改。 415 |

416 |

417 | 洗牌算法： 420 | 使用 421 | Fisher-Yates 424 | 标准洗牌算法，保证每个人被抽中的概率完全相等。 425 |

426 |

429 | 💡 430 | 建议：可使用当天股票指数、时间戳等公开数据作为种子，增强公信力。 431 |

432 |

433 | 本程序由 Chris杨 在Zed中使用 Gemini 3 Pro 435 | 和 Claude Opus 4.5 开发。 437 |

438 |
439 | 445 |
446 |
447 | 448 | 449 |
450 | 455 | 456 | 494 |
495 | 496 | 497 |
500 | 501 |
504 |
505 | 508 |
509 | 522 |
523 | 524 | 525 | 526 |
527 |
528 | 538 |
539 | 540 |
541 | 544 | 551 |
552 | 553 |
554 | 557 |
558 | 563 | 570 |
571 |
572 | 573 |
574 | 580 | 585 |
586 | 587 |
588 | 595 | 600 |
601 | 602 |
603 | 609 | 614 |
615 | 616 |
617 | 620 | 626 |
627 | 628 |
629 | 636 | 637 | 643 |
644 |
645 |
646 | 647 | 648 |
649 | 650 | 651 |
655 |
658 |

662 | 🎉 恭喜中奖 🎉 663 |

664 |

667 | {{ store.config.prizeName }} 668 |

669 | 670 |
673 |
679 |
682 |
685 |
688 | {{ winner.name.substring(0,1) }} 689 |
690 | {{ winner.name }} 694 | {{ winner.info || '幸运儿' }} 698 |
699 |
700 |
701 | 702 | 708 |
709 |
710 | 711 | 712 |
716 |
719 |
722 |

723 | ⚙️ 数据管理 724 |

725 | 731 |
732 | 733 |
734 | 735 |
738 |

741 | 📥 导入数据 742 |

743 |
746 | 757 | 760 | Excel: 第一列为姓名，第二列为部门/信息 761 | (可选)
762 | TXT: 纯文本，每行一个姓名 763 | 764 |
765 |
766 | 767 | 768 |
771 |

772 | ✍️ 手动录入 773 |

774 | 780 |
781 | 787 |
788 |
789 | 790 | 791 |
794 |
795 |

796 | 当前总人数: 797 | {{ winnerStats.total }} 801 |

802 |

803 | 已中奖: {{ winnerStats.winners }} 人 ({{ 804 | winnerStats.percent }}%) 805 |

806 |
807 | 813 |
814 |
815 |
816 |
817 |
818 |
819 | 820 | 821 | 829 | 830 | 2452 | 2453 | --------------------------------------------------------------------------------