手把手做一个本地待办清单：临近截止自动标红提醒-育师

全程只需一句自然语言描述，码道自动生成完整可用的 HTML/CSS/JS 单文件应用。

开篇钩子

你是否曾想过，只需要用一句话描述需求，AI 就能帮你写出一个完整、美观、功能齐全的 Web 应用？本文将带你体验华为云码道（CodeArts）AI 编程助手的强大能力——用自然语言描述"本地待办清单 + 截止日期提醒"，码道在几分钟内自动生成了一个 690 行的单文件 HTML 应用，包含完整的增删改查、localStorage 持久化、24 小时紧急提醒和响应式设计。

码道安装与开通

码道（CodeArts）是华为云推出的 AI 编程助手，支持 CLI 命令行和 IDE 插件两种使用方式。

开通码道：https://developer.huaweicloud.com/codeartsco.html?source=dmzntgwsf&sourcead=dmzntgwwbwz

CLI 安装（Windows/Linux/macOS 通用）：

# 方式一：一键安装（推荐）npminstall-g@huaweicloud/codearts-cli# 方式二：使用官方安装脚本# 前往 https://codearts.huaweicloud.com 获取最新安装指引

配置 AK/SK 认证：

在 https://codearts.huaweicloud.com/portal/settings/cli-auth 获取 Access Key 和 Secret Key，然后配置环境变量：

exportCODEARTS_CLI_AK="your_access_key"exportCODEARTS_CLI_SK="your_secret_key"

码道核心能力

码道作为 AI 编程助手，具备以下核心能力：

能力	说明
🗣️ 自然语言编程	用中文描述需求，自动生成代码
🔧 工具调用	自动调用 bash、文件读写等工具完成任务
🤖 子代理协作	复杂任务自动拆解，派生子代理并行处理
📦 项目创建	从零生成完整项目结构和代码
🔄 会话管理	支持断点续传，多轮对话迭代优化

任务描述

我们给码道的需求一句话：

用 HTML/CSS/JavaScript 实现一个本地待办清单应用，功能包括：
添加待办事项并设置截止日期和时间
列表显示所有待办，按截止日期排序
标记完成/未完成
删除事项
截止日期临近时（24小时内）高亮红色提醒
数据存储在 localStorage 持久化
单文件实现，界面美观现代化，中文界面

使用码道 CLI 命令执行：

codearts run"用HTML/CSS/JavaScript实现一个本地待办清单应用..."

开发过程

1. 码道接收任务

码道 CLI 接收到自然语言任务后，自动分析需求，将复杂任务拆解为子任务，并通过内部子代理（subagent）并行处理。

2. 码道生成代码

码道自动完成了以下工作：

创建项目结构和文件
生成完整的 HTML/CSS/JavaScript 代码（690 行）
集成 Font Awesome 图标库
实现响应式布局设计

3. 码道完成输出

码道在数分钟内完成了全部代码生成，输出了一个可直接在浏览器中打开的todo.html文件，无需任何构建工具或服务器环境。

4. 应用运行效果

打开todo.html即可使用，所有数据存储在浏览器的 localStorage 中，刷新页面不会丢失。紧急任务会自动以红色高亮显示并带有脉动动画。

代码解析

核心数据结构

// 待办事项对象constnewTodo={id:Date.now(),text:text,// 任务内容datetime:datetime,// 截止日期时间completed:false,// 完成状态createdAt:newDate().toISOString()};// 数据持久化lettodos=JSON.parse(localStorage.getItem('todos'))||[];

排序逻辑

// 按截止日期排序：未完成优先，然后按日期升序todos.sort((a,b)=>{if(a.completed!==b.completed){returna.completed?1:-1;}returnnewDate(a.datetime)-newDate(b.datetime);});

紧急任务检测

// 判断任务是否在 24 小时内functionisTaskUrgent(datetimeStr){constnow=newDate();consttaskDate=newDate(datetimeStr);constdiffHours=(taskDate-now)/(1000*60*60);returndiffHours>0&&diffHours<=24;}

紧急样式动画

.todo-item.urgent{border-left-color:#e74c3c;background-color:#fff5f5;animation:pulse 2s infinite;}@keyframespulse{0%{box-shadow:0 5px 15pxrgba(231,76,60,0.2);}50%{box-shadow:0 5px 20pxrgba(231,76,60,0.4);}100%{box-shadow:0 5px 15pxrgba(231,76,60,0.2);}}

日期格式化显示

functionformatDateTimeDisplay(datetimeStr){constdate=newDate(datetimeStr);consttoday=newDate();// ... 计算日期差if(diffDays===0)dateStr='今天';elseif(diffDays===1)dateStr='明天';elseif(diffDays===-1)dateStr='昨天';// ...}

运行效果

在浏览器中打开todo.html，你会看到：

美观的界面：渐变背景、圆角卡片、紫色主题色
统计面板：实时显示总任务数、待完成、已完成、紧急任务数
添加任务：输入内容 + 选择截止日期时间 → 点击添加
任务排序：自动按截止日期升序排列，未完成在前
完成标记：勾选复选框，任务文本添加删除线并变灰
删除任务：点击删除按钮，确认后移除
紧急提醒：截止时间在 24 小时内的任务显示红色边框 + 脉动动画
数据持久化：刷新页面或关闭浏览器，数据不丢失
响应式设计：手机和桌面端均可完美显示

能力总结

通过本次实践，码道展现了以下核心价值：

维度	表现
⚡ 效率提升	从零到完整应用，数分钟完成
🎯 需求理解	准确解析 7 项功能需求，无遗漏
🎨 代码质量	690 行代码，结构清晰，注释完善
🔒 安全性	包含 XSS 防护（escapeHtml）
📱 体验	自动添加响应式设计、动画效果
💾 持久化	正确使用 localStorage API