Card TodoList 卡片待办

项目背景

待办任务和随手记录的想法往往分散在不同的工具里：任务清单软件管不了笔记，笔记软件又缺乏任务的状态与进度。Card TodoList 用卡片统一这两类信息——待办卡片管理任务清单，文本卡片记录笔记想法，再用看板把任务升级为可流转的流程化管理。它是一个轻量的 Windows/macOS/Linux 桌面应用，数据完全保存在本地，主打「打开即用、数据在自己手里」。

卡片工作区

• 瀑布流布局：卡片等宽、高度随内容自适应，新卡片自动填入最短列，消除纵向空白，渲染顺序符合从左到右、从上到下的阅读动线
• 双类型卡片：待办卡片（多任务清单、进度条、截止日期逾期标红、高/中/低优先级）与文本卡片（加粗/斜体/列表等富文本编辑，粘贴自动转纯文本并做白名单消毒）
• 内容截断与详情弹窗：待办卡片最多展示 6 条任务、文本卡片限高 300px，超出以渐变遮罩收底，点击打开详情弹窗完整查看与编辑
• 组织能力：置顶分区、收藏、归档（默认隐藏可切换）、标题/任务/正文全文搜索、类型与完成状态筛选、手动或按时间排序
• 双视图：网格 / 列表一键切换；按住手柄拖拽排序（Pointer Events，鼠标触摸一致）

看板工作区

• 从模板建板：产品开发 / 市场运营 / 销售管理 / 空白看板，预置阶段与交接标准
• 拖拽流转：任务卡跨列拖拽（目标列高亮 + 插入位置指示，空列可直落）、列内排序、右键菜单直接「移动到」任意阶段；拖拽与点击以 6px 位移阈值区分
• 列管理：重命名、主题色、终态标记、横向拖拽调序、删除时任务可迁移；WIP 限制柔性约束——达到上限徽标转琥珀、超限转红并列头红线，拖入超限列实时预览 N+1/L
• 停留标记：任务在当前阶段停留超过阈值（默认 3 天，可调）显示琥珀色提示，暴露流程堵点
• 一站式任务详情：状态下拉流转、负责人（成员联想）、截止、优先级、富文本描述、标签、子任务清单、评论、附件（本地文件复制进数据目录统一管理）、多关联卡片（双向跳转）

技术实现

• Electron 三层架构：主进程负责窗口、IPC 与本地文件读写；preload 通过 contextBridge 按白名单暴露 7 个具体 IPC channel（无通用代理）；渲染进程为纯 React 应用
• 状态管理：Context + useReducer 单向数据流，所有变更收口到 store 统一触发防抖自动保存
• 瀑布流布局：自研最短列插入算法 + ResizeObserver 监听内容变化自动重排，不依赖第三方布局库
• 双存储路径：桌面环境走 IPC 读写本地 JSON；直接用浏览器打开渲染页调试时自动降级为 localStorage，开发体验不受影响
• 质量保障：ESLint 9 扁平配置（React / Hooks 规则）、冒烟测试脚本（启动产物 → 建板 → 加任务 → 落盘 → 重载，12 项断言）

数据安全与隐私

应用定位「本地优先」，无任何网络请求与数据上传，cards.json + attachments/ 目录即为完整备份单元。在此之上做了一轮系统性的安全加固：

• 进程隔离：contextIsolation: true、nodeIntegration: false、渲染进程沙箱启用
• 严格 CSP：脚本无 unsafe-inline、外部资源全部拉断
• 富文本消毒：白名单消毒器移除危险标签、剥除白名单标签的全部属性，粘贴强制转纯文本，保存前二次清理
• 附件路径防护：所有文件操作的入参经路径越界校验（必须位于附件目录内，Windows 大小写归一化），文件名安全化处理，50MB 大小软限制
• 数据完整性：「临时文件 + 重命名」原子写入防损坏，窗口关闭前强制落盘，加载时对旧数据 / 脏数据做 normalize 防御，附件目录定期 GC 清理未引用文件

多主题界面

内置多套主题一键切换，深浅色均覆盖窗口标题栏覆盖层（setTitleBarOverlay）同步变色。

基于 MIT 协议开源。卡片类型采用注册表机制扩展：添加模型工厂 + 正文组件 + 一行注册，网格渲染、搜索、筛选与新建按钮即自动支持新类型。