介绍
源码围绕待办事项列表这个主体构建，页面左侧展示任务概览和当前分组，右侧直接提供任务筛选、新增表单、优先级标签以及完成状态切换。下载后无需额外安装依赖，打开 index.html 就能体验完整的列表模板交互。
效果主体：任务清单、状态切换、筛选标签、新增表单
交互方式：点击筛选、提交任务、勾选完成、Toast 提示
复用方式：替换任务数据和颜色变量即可接入项目
技术栈
页面使用 HTML5 组织结构，CSS3 负责玻璃面板、响应式排版和状态样式，JavaScript 负责筛选渲染、任务增删状态和操作提示。没有引入外部框架，适合直接下载即用。
软件架构
- index.html：定义概览区、任务筛选、表单和待办列表容器。
- styles.css：维护配色变量、卡片布局、标签状态和移动端断点。
- script.js：保存任务数据、筛选逻辑、表单提交与完成状态更新。
- preview.png：当前模板的真实首屏截图，可直接用于下载页封面。
安装教程
- 下载并解压 zip 压缩包。
- 进入解压后的同名文件夹，双击 index.html 即可查看效果。
- 如需部署到线上，把整个目录上传到静态空间即可。
- 如需嵌入现有项目，可按文件拆分结构、样式和交互脚本。
使用说明
- 替换数据：在 script.js 顶部修改任务数组，换成自己的项目任务。
- 调整分组：同步修改筛选按钮和表单里的分组选项，保持一致即可。
- 更换视觉：在 styles.css 的 :root 中调整主色、阴影和边框。
- 扩展功能：可以继续接入本地存储、接口请求或拖拽排序逻辑。
功能讲解
- 概览区：实时显示当前筛选下的待处理数量、已完成数量和分组名称。
- 录入表单：支持新增任务名称和所属分组，提交后立即插入列表顶部。
- 列表状态：点击左侧勾选按钮可切换完成状态，并同步更新计数。
- 反馈提示：每次新增或完成任务都会弹出简短 Toast，方便确认操作结果。
