用纯前端打造 Notion 风看板工具：TaskFlow 团队任务流从 0 到 1

还在用 Excel 管理团队任务？试试这个零依赖、拖拽即用的 Kanban 看板——纯 HTML/CSS/JS 单文件，浏览器打开就能跑。

一、为什么做 TaskFlow

团队协作中，任务管理是最高频的需求。市面上的工具要么太重（Jira），要么太贵（飞书高级版），要么需要注册账号才能用。

我想要一个足够轻、足够快、足够好看的看板工具：

• 零安装：双击 HTML 文件就能用，不装 Node、不装 Docker
• 零依赖：不引 React、不引 Vue，纯原生三件套
• 数据不丢：浏览器本地持久化，关页面再打开数据还在
• 长得好看：Notion 极简风，不是那种"能跑就行"的丑 demo

这就是 TaskFlow —— 一个单文件、787 行代码、功能完整的团队任务流看板。

二、核心功能一览

1. 三列看板 + 拖拽

最核心的交互：三列看板（待办 → 进行中 → 已完成），鼠标拖拽卡片在列间自由移动。

实现上用的是 HTML5 原生 Drag and Drop API，不依赖任何第三方拖拽库。关键代码思路：

// 卡片拖起时记录 ID
card.addEventListener('dragstart', (e) => {
  e.dataTransfer.setData('text/plain', card.dataset.taskId);
  card.classList.add('dragging'); // 倾斜 + 半透明
});

// 列接收拖拽
column.addEventListener('drop', (e) => {
  e.preventDefault();
  const taskId = e.dataTransfer.getData('text/plain');
  moveTask(taskId, column.dataset.status); // 更新状态 + 重新渲染
});

拖拽时卡片有轻微倾斜 + 阴影加深的视觉效果，松手后平滑归位——这种细节是"好用"和"爱用"的区别。

2. 任务卡片信息密度

每张卡片展示：

双击卡片打开编辑弹窗，预填已有内容；单击 × 直接删除。交互逻辑参考了 Trello 的操作习惯，用户零学习成本。

3. 进度统计 + 搜索过滤

顶部有渐变进度条，实时反映完成率（已完成 / 总任务数），带平滑动画。

搜索框支持按标题和负责人模糊搜索，优先级下拉框可筛选特定级别任务。两个过滤器可叠加使用。

4. 深色 / 浅色模式

右上角一键切换。两套配色：

• 浅色模式：背景 #F7F7F8，卡片纯白，主色 #6366F1（靛蓝）
• 深色模式：背景 #0D1117，卡片 #161B22，主色 #818CF8

主题切换通过给 <body> 加 data-theme 属性，CSS 变量统一控制，切换瞬间无闪烁。

5. localStorage 本地持久化

这是"工具"和"玩具"的分界线。所有任务数据自动存入 localStorage，页面刷新、关闭浏览器都不丢。

function saveTasks() {
  localStorage.setItem('taskflow_tasks', JSON.stringify(tasks));
}

function loadTasks() {
  const data = localStorage.getItem('taskflow_tasks');
  return data ? JSON.parse(data) : getSampleTasks(); // 首次加载给示例数据
}

首次打开时自带 6-8 条示例任务，分布在三列中，让用户立刻看到完整效果而不是空页面。

三、设计哲学：Notion 极简风

好工具不需要花哨的装饰。TaskFlow 的设计原则：

大量留白

卡片之间、列之间、模块之间都有充足的间距。不挤、不乱，视觉呼吸感强。

无边框卡片

卡片不用边框，用微阴影区分层次。边框会让界面变"硬"，阴影则更柔和。

柔和配色

主色用 #6366F1（靛蓝），不是刺眼的纯蓝。状态色用柔和的红黄绿，不是 #FF0000 这种原色。

响应式

最小适配 768px 宽度（平板），三列自动调整间距。桌面端宽屏下三列平铺，窄屏下列宽收窄但保持三列布局。

四、技术亮点

单文件架构

整个应用就一个 index.html，HTML + CSS + JS 全部内联。好处：

• 分发极简：发一个文件就能用，不用打包不用部署
• 离线可用：不请求任何 CDN，断网也能跑
• 易于阅读：一个文件看完全部源码，适合学习

CSS 变量驱动主题

:root {
  --bg-primary: #F7F7F8;
  --bg-card: #FFFFFF;
  --color-primary: #6366F1;
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.08);
}

body[data-theme="dark"] {
  --bg-primary: #0D1117;
  --bg-card: #161B22;
  --color-primary: #818CF8;
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.3);
}

所有颜色引用变量，切换主题只需改 data-theme 属性，一个 JS 行搞定。

模态框 backdrop blur

新增/编辑任务的弹窗用 backdrop-filter: blur(4px) 实现毛玻璃遮罩，比纯黑半透明更精致。

拖拽占位虚线框

拖拽时目标列显示虚线占位框，提示用户"可以放在这里"。这是用 dragover 事件动态添加 CSS class 实现的。

五、如何使用

方式一：直接打开

下载 index.html，双击用浏览器打开即可。

方式二：本地服务器

python3 -m http.server 8080
# 浏览器访问 http://localhost:8080

操作指南

六、项目结构

taskflow/
├── index.html    # 全部代码（HTML + CSS + JS 内联）
└── README.md     # 项目说明

就这么多。没有 package.json，没有 node_modules，没有构建步骤。

七、从 demo 到产品

TaskFlow 已发布至华为云开发者作品展览馆，可以通过以下方式体验：

• 在线预览：通过 DevBridge 隧道公网访问
• 源码仓库：GitCode 上已开源
• 作品页面：华为云开发者作品展览馆

未来可扩展方向

八、总结

TaskFlow 证明了：好的工具不需要复杂的技术栈。

787 行代码，单文件，零依赖，实现了拖拽看板、优先级管理、搜索过滤、深色模式、本地持久化——这些功能用 React 写至少要 5 个组件 + 3 个 hooks + 1 个状态管理库。

有时候，最简单的方案就是最好的方案。

技术不是越新越好，而是越合适越好。纯前端单文件方案在"轻量任务管理"这个场景下，就是最合适的选择。

相关链接：

• 华为云开发者作品展览馆：https://gallery.developer.huaweicloud.cn
• 华为云开发者成长中心：https://developer.huaweicloud.cn/grow
• GitCode 代码托管：https://gitcode.com

本文作品 TaskFlow 由华为云 CodeArts Agent 辅助开发，已发布至华为云开发者作品展览馆。