一个现代 Todo 待办应用的开发全记录

2026 年 10 月 22 日，我用一个下午的时间，从需求出发，完成了一个现代风格的 Todo 待办事项应用——编写代码、启动预览、推送到 GitCode、生成封面与架构图、最终发布到华为云开发者作品展览馆。这篇文章记录了全过程。

一、需求：做一个普通人也能用的 Todo

需求很简单：

• 用途：待办事项管理（Todo）
• 用户：普通人，不需要懂技术
• 风格：现代、清新

听起来不难，但"现代"和"普通人能用"这两个词，各自藏着不少设计决策。

什么叫"现代"？

我把它拆成了可执行的视觉语言：

• 渐变色背景（紫蓝渐变，不是纯色）
• 卡片式布局，圆角，柔和阴影
• 流畅的动画过渡（添加、删除、完成时都有动效）
• 自定义复选框（不用浏览器默认那个方框）
• 响应式设计（手机上也要好看）

什么叫"普通人能用"？

• 不需要注册登录——数据存在浏览器本地
• 打开就能用——单文件，无需安装环境
• 操作直觉化——双击编辑、回车添加、悬停删除

二、技术选型：为什么选纯前端单文件

很多人做 Todo 会上 React/Vue + 后端 API + 数据库，但对这个需求来说太重了。

最终选型：HTML + CSS + JavaScript，全部内联在一个 index.html 里。

理由：

这个选型带来的好处是：任何人拿到这个文件，双击打开就能用。

三、功能实现：九个功能点

3.1 添加待办

输入框 + 添加按钮，支持回车快速添加。这是最基础的交互——用户输入文字，按回车，任务出现在列表中。

// 核心逻辑：读取输入框值，创建 todo 对象，追加到数组，清空输入框
function addTodo(text) {
  todos.push({ id: Date.now(), text, completed: false });
  saveAndRender();
}

3.2 标记完成 / 取消完成

点击复选框切换完成状态，已完成项显示删除线。视觉反馈很重要——让用户一眼看出哪些做完了。

3.3 删除待办

鼠标悬停在待办项上时，右侧出现删除按钮。不悬停时不显示，避免视觉干扰。

3.4 双击编辑

双击待办内容进入编辑模式，修改后回车保存，按 ESC 取消。这是从桌面应用借鉴的交互模式，很多 Web Todo 都没有这个功能。

3.5 三种筛选视图

全部 / 未完成 / 已完成，三个按钮切换。底部高亮当前选中的筛选条件。

3.6 剩余计数

底部实时显示"剩余 X 项未完成"。一个数字，让用户对进度有直觉感知。

3.7 一键清除已完成

批量删除所有已完成的待办。当完成项积累多了，这个按钮很实用。

3.8 数据持久化（localStorage）

所有操作实时同步到 localStorage，刷新页面数据不丢失。这是"普通人能用"的关键——没人能接受刷新就丢数据。

function save() {
  localStorage.setItem('todos', JSON.stringify(todos));
}

function load() {
  return JSON.parse(localStorage.getItem('todos') || '[]');
}

3.9 空状态提示

没有待办事项时，显示一句友好的提示文案，而不是一片空白。细节决定体验。

四、设计实现：现代风格的拆解

4.1 渐变背景

body {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
}

紫到蓝的对角渐变，不是花哨的彩虹色，而是克制的双色渐变。背景是氛围，不能抢内容的风头。

4.2 卡片式布局

待办列表放在一张白色卡片里，圆角 12px，带柔和阴影。卡片浮在渐变背景上，层次分明。

.todo-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

4.3 流畅动画

每个待办项在添加时滑入，删除时滑出，完成时复选框有勾选动画。CSS transition 配合 transform 实现，不需要动画库。

4.4 自定义复选框

浏览器默认的复选框是个小方框，和现代风格不搭。用 CSS 自定义了一个圆形复选框，勾选时显示一个动画对勾。

4.5 响应式设计

@media (max-width: 640px) {
  .container { padding: 16px; }
  .todo-card { border-radius: 8px; }
}

移动端缩小内边距和圆角，确保小屏幕上不拥挤。

五、架构设计：三层单文件

虽然是单文件，但内部逻辑是分层的：

index.html
├── 视图层（HTML + CSS）
│   ├── 页面结构
│   ├── 渐变背景 + 卡片布局
│   ├── 待办项样式
│   └── 响应式媒体查询
├── 逻辑层（JavaScript）
│   ├── 数据模型（todos 数组）
│   ├── 渲染函数
│   ├── 事件处理（添加/删除/编辑/筛选）
│   └── 初始化
└── 存储层（localStorage）
    ├── 序列化写入
    └── 反序列化读取

数据流是单向的：

用户操作 → 事件监听 → 更新内存状态 → 同步到 localStorage → 重新渲染视图

没有双向绑定，没有虚拟 DOM，就是最朴素的数据驱动渲染——改数据，存数据，重新画界面。对于这个规模的应用，这就够了。

六、从本地到上线：发布全流程

代码写完只是第一步。接下来是把它发布到华为云开发者作品展览馆，让更多人看到。

6.1 启动预览

python3 -m http.server 8080

本地启动，浏览器打开 http://localhost:8080，确认应用正常运行。

6.2 推送到 GitCode

发布到展览馆需要代码托管在 GitCode 上。流程是：

1. 初始化 git 仓库，创建 README.md
2. 通过 GitCode OAuth 授权登录
3. 创建远程仓库 gcw_nfhkuMAb/todo-app
4. 推送代码到 main 分支

6.3 生成封面图

展览馆需要一张封面图。不是随便截图，而是：

1. Preflight 准备：安装 Chromium + 中文字体（Noto Sans CJK），确保截图不出现豆腐块
2. UTF-8 编码检查：确保所有文件编码正确
3. 自动截图：用 Playwright 对运行中的应用截图
4. 封面合成：截图 + 标题 + 简介，合成 16:9 的封面图
5. 字形校验：像素级检查封面上的中文字是否正常显示

6.4 生成详情包

详情包是一个 zip 文件，包含：

• 详解文章（README.md）：500-1500 字的项目介绍，涵盖功能、技术、架构
• 系统架构图（PNG）：用 Playwright 渲染 HTML 生成的三层架构图

6.5 创建 DevBridge 隧道

为了让展览馆能访问到正在运行的应用，创建了一个 DevBridge 开发隧道：

• 本地端口 8080 → 公网 URL
• 外部用户直接通过这个 URL 访问应用

6.6 选择活动并发布

展览馆有多个活动可以投稿，我选择了"闯关活动"。最终发布请求包含：

• 作品名称、简介
• 封面图、详情包
• GitCode 仓库地址和分支
• 隧道公网 URL
• STS 临时凭证（900 秒有效）

发布返回 201 Created，作品上线。

七、最终成果

八、复盘：什么做得好，什么可以改进

做得好的

1. 技术选型克制：没有过度工程化，单文件零依赖，部署成本几乎为零
2. 功能完整：九个功能点覆盖了 Todo 的核心需求，包括双击编辑这种进阶操作
3. 设计到位：渐变背景 + 卡片布局 + 动画过渡，视觉上确实"现代"
4. 发布流程顺畅：从代码到上线全自动化，封面图、架构图、详情包都是工具生成

可以改进的

1. 无拖拽排序：待办项不能拖拽调整顺序，有些用户会需要
2. 无分类/标签：所有待办混在一起，任务多了会不好管理
3. 无暗色模式：只有亮色主题，可以加一个深色模式切换
4. 无数据导出：localStorage 存的数据没法导出，换设备就丢了

这些改进都不难，但不在本次需求范围内。做产品最怕的不是功能不够，而是功能太多——一个简洁、好用、好看的 Todo，比一个功能堆砌的 Todo 更让人愿意用。

九、写在最后

这个项目本身不复杂——一个单文件的 Todo 应用，半天就能写完。但围绕它的发布流程（推送 GitCode、生成封面、创建隧道、发布到展览馆）反而更耗时，也更有价值去记录。

如果你也想把自己的作品发布到华为云开发者作品展览馆，大致流程是：

1. 写好代码，确保能运行
2. 初始化 git，推送到 GitCode
3. 准备封面图和详情包
4. 选择活动，提交发布

整个过程有工具辅助，但理解每一步在做什么，才能在出问题时知道往哪里看。

本文记录于 2026 年 10 月 22 日，代码已开源在 GitCode，作品已发布在开发者作品展览馆。