开场白：说实话，这玩意儿真的不简单

哈，先说一句，年会抽奖这事儿，kan似随手一摆，背后可是暗藏坑洞。

我去年临时撸了个 Vue 3 小工具，结果今年被老板点名复用。

那时候我还在想，“Neng不Neng直接把代码写死？”

不对不对，应该是“别傻瓜化”，要留点弹性。

实战时这个入口确实救了场：主持人说加奖，我直接在配置弹窗里加了一个新奖项，填好名字和数量，点保存，就Ke以继续抽了不需要重启、不需要改代码。

Ru果奖项是写死在代码里这种需求基本意味着：

——每次改动dou要部署一次。

——现场出错只Neng等下一轮。

我把奖项列表抽成 JSON，放在 public 目录。

页面启动时 fetch 一下。

想加奖，只要打开后台弹窗，往数组里 push，然后保存回服务器。

再点抽奖按钮，数据Yi经geng新完毕，瞬间生效。

项目结构上，我用了“功Neng+数据”双层划分。

src/components 放 UI。

src/store 放状态管理。

/data 放名单、奖项配置文件。

/scripts 放批处理脚本，比如头像统一裁剪。

因为现场经常要临时排除名单——比如老板、HR 那些不参与的角色。

只要在 excludedUsers.ts 里加一行，就Neng全局屏蔽，不用改抽奖逻辑。

就算现场不小心刷新了浏览器，抽过的结果还在不至于从头来过。

我用了浏览器的 localStorage 加上后端的 JSON 文件双保险。

每次抽完，dou把中奖名单 push 到 localStorage，同时 POST 到 /api/saveResult。

别忘了给 localStorage 设置过期时间，否则老数据会堆积。 这点我Zui早忘记，导致现场出现重复中奖的尴尬局面。哈哈！

PWA Neng让大屏幕即使断网也继续跑抽奖动画。

SWR策略配合 Service Worker 实现离线缓存。 说实话，这玩意儿调试起来有点费劲，但一次搞定后再也不用担心网络波动啦。

- manifest.json 缺少 display: standalone，会导致打开后一直是浏览器标签页。 - Service Worker 没注册成功，会直接报错卡住页面。 这些细节一定要检查清楚哦！

年会抽奖不是发奖，而是一场情绪旅程。 所以视觉效果必须抓人眼球，又不Neng喧宾夺主。

I used three.js Zuo 3D 标签云，让所有参与者的头像像星星一样围绕中心旋转。 每转一圈，就有灯光闪烁，一下子把气氛推向高潮。哈哈！

- 弹窗右上角放一个 “+” 按钮； - 输入框自动聚焦； - 保存后立即刷新标签云数据源。 这个交互设计省掉了不少手忙脚乱的步骤。咱就是说用得好才叫好用！

真实情况是原始员工照片尺寸、比例、背景色千差万别，一锅端进去直接显示超丑。 于是我写了个 node 脚本，把所有照片统一裁成圆形头像，并压缩到指定大小。 脚本放在 scripts/ 目录，只需 npm run process-images 一键搞定。哈哈！

pnpm run process-images
# 会读取 scripts/input/* ，输出到 public/user/ 
# 支持自定义宽高和背景颜色

A 轮使用纯随机抽取；B 轮加入权重，让新人geng容易中小礼品；C 轮则根据部门分配名额防止同部门集中中奖。 这种分层策略让年会geng公平，也避免大家抱怨“怎么总是同几个人中”。咱就是说这招挺管用！