手把手做一个本地待办清单：临近截止自动标红提醒
全程只需一句自然语言描述，码道自动生成完整可用的 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 |
总结
本文通过一个完整的实战案例，展示了华为云码道 AI 编程助手从接收自然语言需求到生成完整可运行应用的全过程。全程无需手写一行代码，开发者只需要清晰地描述需求，码道就能自动完成：
- ✅ 项目结构创建
- ✅ HTML/CSS/JavaScript 代码生成
- ✅ 数据持久化逻辑
- ✅ 日期计算与格式化
- ✅ 紧急提醒动画
- ✅ 响应式布局
- ✅ XSS 安全防护
码道让编程变得更加高效和智能。无论是快速原型验证、学习参考，还是小型工具开发，码道都能显著降低开发门槛，提升开发效率。
立即体验码道：https://developer.huaweicloud.com/codeartsco.html?source=dmzntgwsf&sourcead=dmzntgwwbwz
配置 AK/SK：https://codearts.huaweicloud.com/portal/settings/cli-auth