用华为云 AI 开发者空间做一个单文件学习任务看板

学云技术时，我常常同时打开产品文档、实验手册和课程页面。资料越来越多，真正完成了什么却不容易回顾。这次我用华为云 AI 开发者空间辅助生成了一个“云上学习任务看板”，再通过浏览器逐项检查创建、完成、筛选和刷新后的保存行为，最后把源码保存到 GitCode，并发布到作品陈列馆。下面记录这个小项目的实现思路和实际遇到的问题。

先把需求缩成一条完整流程

第一版只解决“写下目标—标记进度—复盘导出”。用户可以填写任务标题、说明、每日/每周/一次性分类、技术类别和预估分值，再按状态或周期筛选。统计卡片显示全部任务、已完成、待完成以及完成任务的分值合计。这里的分值是个人规划字段，与华为云官方积分没有关联。

应用使用原生 HTML、CSS 和 JavaScript，所有代码放在一个 index.html 中，没有第三方运行依赖。下载后直接用现代浏览器打开即可；需要通过 HTTP 访问时，也可以在文件所在目录运行 python3 -m http.server 8080，再打开 http://localhost:8080。这一版没有登录、数据库和跨设备同步，使用前就能明确数据会保存在哪里。

数据数组负责状态，筛选只改变视图

页面维护一个任务数组和一个筛选条件对象。新增、完成和删除操作更新数组，然后调用保存与渲染函数。列表渲染读取筛选结果，统计卡片仍基于完整任务数组计算，因此切换到“已完成”视图不会把待完成记录丢掉。

持久化的核心逻辑很短：

// 将当前任务数组序列化，保存到当前站点的浏览器存储中。
function saveTasks() {
  localStorage.setItem(STORAGE_KEY, JSON.stringify(tasks));
}

筛选条件则同时检查状态和周期：

// 两组条件共同约束列表；返回新数组，不修改原始任务记录。
function getFiltered() {
  return tasks.filter(t => {
    if (filters.status === 'pending' && t.done) return false;
    if (filters.status === 'completed' && !t.done) return false;
    if (filters.cycle !== 'all' && t.cycle !== filters.cycle) return false;
    return true;
  });
}

导出功能遍历完整清单，按周期分组生成 Markdown 复选框，用 Blob 创建下载文件。这样，页面负责日常记录，导出的文本负责阶段归档。输入标题和说明在插入页面前会进行 HTML 文本转义，避免把任务内容解释成标签。

检查实际行为，也检查部署链路

我在公开预览页中创建了临时任务，将其标记完成，刷新确认状态仍保留，再切换完成状态筛选，最后删除临时任务，恢复示例清单。这些检查覆盖了一条可观察的使用流程；它们并不代表已经完成全面的兼容性或异常场景测试。

发布前还遇到了一个很具体的问题：预览地址返回 Nginx 403，而应用文件确实存在。检查目录和文件权限后，发现新目录为 750，页面文件为 640，Nginx 工作进程无法读取。将这个公开静态目录调整为 755、页面文件调整为 644 后，本机和公网访问恢复正常，并核对了返回文件与源文件的摘要。这里仅调整了需要公开的静态页面，没有修改凭证或其他目录的权限。

这个过程提醒我，生成页面、启动服务和公网可访问是三个需要分别检查的环节。封面能截图，也不能替代最终公开地址的访问检查。

当前边界与复用方式

每日、每周只是分类，不会自动按日期重置。数据属于当前浏览器和站点地址，换域名或清理站点数据后不会自动迁移，因此应及时导出。当前版本重新加载空清单时会补入示例任务，这也需要在使用时留意。在线预览使用临时开发环境，到期后可以下载源码继续运行。

源码：https://gitcode.com/astimegoby/cloud-learning-board

作品：https://gallery.developer.huaweicloud.cn/gallery/0068b41305800000

本项目由 AI 辅助生成，本文根据实际操作和浏览器检查整理。对于这类小工具，我更关心每一步是否能被使用者看到、保存和复核，再按后续需求增加编辑、导入等功能。