用华为云码道从零构建「今日专注 FocusBoard」：一个纯前端效率工作台的开发实践

项目仓库：GitCode 仓库 2511_93578944/focusboard
作品陈列馆：华为云开发者作品展览馆（作品 ID：00772092d4000000）

一、项目缘起

日常开发里，我们常常被切碎的注意力拖慢节奏：待办散落在便签、计时靠手机、统计凭感觉。于是我借助华为云码道（CodeArts）代码智能体，从一句需求出发，完整走了一遍「需求拆解 → 编码 → 自测 → 发布」的流程，产出了「今日专注 · FocusBoard」——一个把番茄钟、待办清单与每日统计整合在一屏的纯前端效率工作台。

这篇文章记录真实的开发过程与几个值得复用的实现细节，希望能给同样想用 AI 辅助做小工具的开发者一些参考。

二、需求与设计

我把目标收敛为三条：

1. 打开即用：无需注册、无需后端、无需构建，双击 index.html 就能跑。
2. 专注闭环：番茄计时（25 分钟专注 + 5 分钟休息）、待办勾选、当日专注统计形成闭环。
3. 本地优先：所有数据只存在浏览器本地，按天隔离，跨天自动重置。

界面采用暗色渐变 + 动态光斑 + 玻璃拟态卡片，配合青绿主色，营造沉浸式专注氛围；布局为桌面双栏、移动端单栏的响应式栅格。

三、技术选型：为什么坚持零依赖

面对"要不要上框架"的问题，我的判断是：这是一个单页、局部状态、无网络请求的小工具，引入构建链路与框架只会增加启动成本。最终选型为：

• 原生 HTML / CSS / JavaScript（ES6+）
• SVG 圆环绘制进度（替代 Canvas，减少复杂度）
• localStorage 持久化
• 无任何第三方依赖

事实证明，这个选择让项目体积保持极小，也让后续用 AI 迭代时上下文更简单——这对"AI 辅助开发"尤其重要。

四、核心实现

4.1 单一状态驱动

所有任务、计时、统计字段集中在同一个 state 对象里：

const state = {
  tasks: [],
  focusMinutes: 0,
  rounds: 0,
  phase: "focus",
  remaining: 25 * 60,
  running: false,
};

任何交互都遵循「先改状态，再调渲染」的固定流程，避免了界面与数据不一致的经典问题：

function toggleTask(id) {
  const task = state.tasks.find((t) => t.id === id);
  if (!task) return;
  task.done = !task.done;
  save();
  renderTasks();
  renderStats();
}

4.2 SVG 圆环进度

计时进度用 SVG 圆环实现。圆周长约 603.2（半径 96），通过 stroke-dashoffset 控制进度，并借助 CSS 过渡得到平滑动画：

const DIAL_CIRCUMFERENCE = 2 * Math.PI * 96;
const ratio = 1 - state.remaining / total;
el.dialProgress.style.strokeDashoffset = String(-DIAL_CIRCUMFERENCE * ratio);

相比 Canvas，SVG 的声明式属性让动画与主题切换（专注青绿 / 休息蓝色）都只需改一个 stroke 值。

4.3 本地优先持久化

数据写入 localStorage，并携带日期字段；读取时校验日期，跨天则自动视为新的一天：

function load() {
  const saved = JSON.parse(localStorage.getItem(STORAGE_KEY) || "null");
  if (!saved || saved.date !== todayKey()) return;
  Object.assign(state, { tasks: saved.tasks, focusMinutes: saved.focusMinutes, rounds: saved.rounds });
}

这样既保证了刷新不丢数据，也避免了历史统计污染当日数据。

4.4 响应式与视觉细节

• 用 CSS Grid 定义 grid-template-areas，桌面端「计时 + 待办 + 统计」三区，移动端单列堆叠。
• 玻璃拟态卡片：半透明背景 + backdrop-filter: blur() + 细边框高光。
• 动态光斑：绝对定位的模糊色块配合 @keyframes drift，营造呼吸感。

五、开发过程中的经验

1. 让 AI 先读结构再动手：把目录结构、约定和关键文件交给码道，生成结果会更贴合既有风格。
2. 小步验证：每完成一个模块就用静态服务器自测页面与语法，避免错误累积。
3. 状态集中：状态越集中，AI 越容易理解与修改，回归风险越低。
4. 先跑通再美化：功能闭环后再打磨视觉，迭代节奏更稳。

六、成果

作品完成后，我把它发布到了华为云开发者作品展览馆，并