任务抽签

先说清楚它解决什么问题

家里或者两三个人的小团队里，「今天轮到谁洗碗」这类决定靠口头协商很容易谈崩，靠猜拳又缺乏一点仪式感。这个技能做的是一个纯前端单页抽签工具：把候选任务和抽签人列好，点一下按钮，页面滚动减速后随机停在某一个「人 + 任务」组合上。它不依赖后端，生成一个 任务抽签工具.html，浏览器打开就能用，适合日常家庭分工、小团队轮换这类轻量场景。

它是怎么把页面生成出来的

技能执行时按固定流程走：

• 读取传入参数，未指定就回退默认值：默认 5 个任务（写英语作业、跳绳100个、阅读20分钟、做家务、休息10分钟）和 3 个抽签人
• 基于内置模板拼出完整 HTML，把参数注入 JS 初始化区的 DEFAULT_TASKS、DEFAULT_DRAWERS 等常量
• 文件保存到当前工作目录，提示直接用浏览器打开即可

生成的页面包含四个模块：

• 任务选项模块：可新增、删除、编辑抽签任务，默认预设 5 个常见任务
• 抽签人模块：每人一个彩色按钮，color 编号取值 1-6，对应 --color-1 到 --color-6 这组 CSS 变量
• 抽签动画模块：点击后随机滚动，rollingDuration 控制减速定格的总时长，默认 1800ms
• 历史记录模块：自动记录日期、次数、时间、抽签人和任务，落盘在 localStorage 的 draw_tasks、draw_drawers、draw_history 三个键里

想改行为也不需要动框架：调默认任务就改 DEFAULT_TASKS 数组，调默认抽签人改 DEFAULT_DRAWERS，调滚动时长改 totalDuration 常量，调配色改 :root 下的 CSS 变量即可。

适用边界与注意点

数据只存在本地。 所有记录落在浏览器 localStorage，换浏览器或清缓存就没了，不适合需要长期留档或审计的场景。历史条数有上限，由 maxHistory 控制，默认 100 条，超出后旧记录会被覆盖。

没有协作能力。 纯静态页面，多人同时抽签不会互相同步，各自打开页面看到的只是自己的历史记录。如果需要多端共享，要么换工具，要么自己接后端。

移动端适配是简单的居中布局。 页面 max-width 520px 居中，在宽屏桌面上会显得窄，算是刻意的移动优先取舍，想要宽屏多列布局需要自己改样式。