任务抽签工具生成器
使用此技能，可一键生成一个纯前端 HTML+CSS+JS 抽签工具页面，无需后端，浏览器直接打开即可使用。
功能概览
生成的抽签工具包含以下模块：
- 任务选项模块：可新增、删除、编辑抽签任务，默认预设 5 个常见任务
- 抽签人模块：彩色按钮选择执行人，支持增删改名字
- 抽签动画模块：点击抽签后随机滚动定格，带有减速动画效果
- 历史记录模块：自动记录每次抽签（日期、次数、时间、抽签人、任务），localStorage 保存
参数说明
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
tasks |
string[] | ["写英语作业", "跳绳100个", "阅读20分钟", "做家务", "休息10分钟"] | 抽签任务列表 |
drawers |
object[] | [{name:"小明",color:1},{name:"小红",color:2},{name:"小华",color:3}] | 抽签人列表，color 为 1-6 的颜色编号 |
title |
string | "任务抽签" | 页面标题文字 |
subtitle |
string | "随机决定接下来做什么" | 页面副标题 |
rollingDuration |
number | 1800 | 抽签滚动总时长(ms) |
maxHistory |
number | 100 | 历史记录最大保存条数 |
颜色编号对照
| 编号 | 颜色 | CSS 变量 |
|---|---|---|
| 1 | 柔红 | --color-1 |
| 2 | 柔蓝 | --color-2 |
| 3 | 柔绿 | --color-3 |
| 4 | 柔橙 | --color-4 |
| 5 | 柔紫 | --color-5 |
| 6 | 柔青 | --color-6 |
执行步骤
- 读取用户传入的参数，若未指定则使用默认值
- 基于内置模板生成完整的 HTML 文件
- 将参数注入到 HTML 的 JS 初始化区域（DEFAULT_TASKS、DEFAULT_DRAWERS 等）
- 保存为
任务抽签工具.html到当前工作目录 - 告知用户可直接用浏览器打开运行
文件结构
task-draw-skill/
├── SKILL.md ← 技能元数据与说明（本文件）
└── references/
└── template.html ← 完整 HTML 模板（抽签工具源码）
自定义修改指南
- 改颜色：修改 HTML 中
:root下的--color-1~--color-6CSS 变量 - 改默认任务：修改 JS 中
DEFAULT_TASKS数组 - 改默认抽签人：修改 JS 中
DEFAULT_DRAWERS数组 - 改滚动时长：修改 JS 中
totalDuration常量（默认 1800ms） - 改页面配色：修改
:root下所有 CSS 变量（--bg, --primary 等）
注意事项
- 所有数据保存在 localStorage，键名为
draw_tasks、draw_drawers、draw_history - 页面适配手机端，max-width 520px 居中布局
- 纯前端无后端依赖，直接浏览器打开即可
