砚台 · 项目协作看板产品系统

面向小型团队与自由职业者的轻量项目协作场景。常见痛点是：任务散落在聊天记录里、状态不清晰、缺少优先级与进度概览。砚台提供浏览器内可拖拽的三栏看板（待处理 / 进行中 / 已完成），并配套搜索筛选、任务详情编辑、本地持久化与 JSON 导入导出，适合需求排期、交付跟踪、个人工作管理。本项目为纯前端作品演示，无需后端与登录。

砚台是一款偏「工作台」形态的前端协作看板，核心能力如下：
1. 三栏看板：待处理、进行中、已完成，卡片支持拖拽切换状态。
2. 任务详情抽屉：可编辑标题、描述、状态、优先级、截止日期，支持新建与删除。
3. 搜索与筛选：按标题/描述关键字搜索，按紧急/普通/较低优先级过滤。
4. 数据可视化：顶部统计任务总量，并用 Canvas 绘制分栏分布与优先级分布柱状图。
5. 本地持久化：任务数据自动保存到浏览器 localStorage，刷新不丢失。
6. 数据互通：支持导出/导入 JSON，方便备份演示数据或迁移。
7. 示例数据：一键载入示例任务，便于验收与截图。
8. 响应式布局：宽屏三列看板，窄屏自动堆叠，桌面与手机浏览器均可使用。

采用原生 HTML + CSS + JavaScript 单文件实现，无框架、无构建、无外网依赖，双击即可运行。
1. 状态模型：以卡片数组维护任务，字段包含 id、标题、描述、分栏、优先级、截止日期；渲染时按筛选条件生成三列 DOM。
2. 拖拽交互：使用 HTML5 Drag and Drop，在 dragstart 记录卡片 id，在列容器 drop 时更新所属分栏并重渲染。
3. 详情编辑：侧滑抽屉承载表单，保存时区分新建/更新；删除时按 id 过滤数组。
4. 可视化：用 Canvas 2D 按数值比例绘制圆角柱状图，并随窗口尺寸重绘。
5. 持久化与互通：localStorage 保存；Blob 导出 JSON；FileReader 导入并做字段校验与兜底。
6. 安全与体验：列表渲染前做 HTML 转义；搜索与筛选即时反馈；拖拽目标列有高亮提示。
个人职责：独立完成需求拆解、信息架构、界面样式、拖拽交互、表单编辑、Canvas 统计与本地数据方案。本作品定位为前端进阶能力展示，覆盖交互状态管理、组件化页面组织与轻量可视化，不包含后端接口。