FlowDay - 开发变更记录

1. 功能背景

在 FlowDay 原型中，我们引入了 时间段 (Block Node) 的概念（例如“深度工作”）。 用户的需求是：在这个持续的时间段内，可能会发生一些必须处理的小事务（例如“11:10 点外卖”或“吃药”）。

核心冲突： 传统的线性流程图如果插入这些小节点，会打断“深度工作”的连续性，造成视觉上的割裂。

解决方案： 开发 穿插事项 (Side Events) 功能。允许在 BlockNode 内部嵌套子节点。 初期方案：在画布主轴右侧并排显示虚线框（已废弃）。 当前方案：使用右上角 便利贴 (Sticky Note) 的形式展示，模拟“深度工作时的临时待办清单”，保持主画布整洁，仅在需要时（选中节点时）出现。

---

2. 数据结构变更 (types.ts)

为了支持这种嵌套结构，我们从通用的 BaseNode 中分离出了 BlockNode 接口。

// 现在的结构：BlockNode 拥有独立的 sideEvents 数组

export interface BlockNode extends BaseNode {
  type: 'block';
  // 核心变更：存储依附于该时间块的子节点
  sideEvents: SingleNode[]; 
}

// FlowNode 联合类型更新
export type FlowNode = SingleNode | BranchNode | BlockNode;

---

3. 核心改动与逻辑

3.1 状态管理与持久化 (App.tsx)

• 自动保存 (Auto-save)：
  • 引入 LocalStorage 机制。应用初始化时尝试读取本地缓存 FLOWDAY_NODES。
  • 使用 useEffect 监听 nodes 变化，一旦有修改立即写入本地缓存，防止刷新丢失数据。
  • 新增“重置”按钮（顶部导航栏），用于清空缓存并恢复默认演示数据。
• 递归更新 (handleUpdateNode)：
  • 更新函数支持深层嵌套数据更新，可以定位并修改 BlockNode 内部的 sideEvents，也可以处理 BranchNode 的子分支。

3.2 属性面板 (PropertiesPanel.tsx)

• 行内编辑模式 (Inline Editing)：
  • 穿插事项列表不再是静态文本。点击条目后，会原地展开变为编辑表单（支持修改标题、描述、删除、完成）。
  • 添加新事项时，自动进入编辑模式，提升输入效率。
  • 防误触优化：利用 onBlur 和 contains 逻辑，确保在表单内部切换输入框（如从标题切到描述）时不会意外关闭编辑模式。
  • 视觉修复：强制指定输入框背景色（bg-gray-50），解决了部分环境下输入框背景变黑的问题。

3.3 画布渲染 (FlowCanvas.tsx)

• BlockRenderer (简化)：
  • 移除了之前在节点右侧渲染虚线框的逻辑。现在 Block 节点只负责渲染自身的主体视觉（渐变色、内部标题）。
• StickyNote (新增组件)：
  • 位置：固定在画布右上角，模拟物理便利贴样式（黄色背景、轻微旋转、图钉装饰）。
  • 条件渲染：仅当选中的节点是 BlockNode 时显示。
  • 双向交互：
    • 展示：渲染当前 Block 的 sideEvents。
    • 编辑：支持在画布上直接点击文字进行修改（Inline Editing），与属性面板状态同步。
    • 操作：提供“完成”和“删除”按钮。

---

4. 交互与架构升级

4.1 布局管理重构

• 自定义下拉菜单：移除了原生 <select>，实现了完全自定义的 Dropdown 组件，支持更丰富的样式与交互。
• “+”按钮修复：解决了添加按钮与下拉菜单的层级冲突，现在可以流畅创建新布局。

4.2 并行组 (Branch Node) 实体化

• 逻辑变更：并行组不再被视为松散的任务集合。现在，点击任一子任务即选中整个“并行组”节点。
• 统一操作：
  • 删除：按 Backspace 删除整个组（包含所有子任务）。
  • 编辑：在属性面板中统一列出所有子任务的编辑表单，无需单独选中子节点即可修改。
• 视觉反馈：选中时显示整体虚线框，强化“组”的概念。

4.3 快捷操作与画布增强

• 安全删除 (Double-tap Delete)：
  • 键盘 Backspace 删除增加了确认机制。
  • 首次按下弹出悬浮气泡提示“再按一次以删除”，防止误删重要节点。
• 垃圾桶位置：移动至底部中间，避免遮挡画布内容。

---

5. UI 优化与细节调整 (UI Refinements)

5.1 自适应胶囊样式 (Adaptive Pill Shapes)

• 问题：原有的圆形节点（时间点）使用固定宽度，长文本（如“九点半左右”）会被截断。
• 解决：将固定宽度改为 自适应胶囊形 (min-w + px-3)，背景随文字自动延展。

5.2 布局防重叠处理

• 内部化标题：将 Block 节点的 subtitle 移至节点内部渲染，避免与外部元素重叠。
• Flex 保护：为时间胶囊添加 shrink-0，防止在窄屏或长文本下变形。

---

6. 无限画布与高级交互 (Infinite Canvas & Interactions)

6.1 画布导航升级 (FlowCanvas.tsx)

• 右键拖拽 (Right-Click Pan)：
  • 禁用了画布区域的默认浏览器右键菜单。
  • 现在按住鼠标右键并拖动即可平移画布，体验更接近专业设计软件。
  • 光标状态会自动变为 grab / grabbing 以提供视觉反馈。
• 智能缩放 (Smart Zoom)：
  • 光标中心缩放：缩放逻辑重写。现在缩放时会以鼠标当前指向的位置为中心，不再是默认的左上角。
  • 操作方式：支持 Ctrl + 滚轮 或 右键按住 + 滚轮 进行缩放。
• 滚轮平移 (Wheel Pan)：
  • 恢复了标准的鼠标滚轮滚动行为，允许上下/左右滚动查看画布。

6.2 视觉沉浸感优化

• 点格纹理背景 (Dot Grid Pattern)：
  • 背景不再是纯色，而是采用工程绘图风格的点阵网格 (radial-gradient)。
  • 动态同步：背景网格的 background-position 和 background-size 与画布的平移 (pan) 和缩放 (zoom) 状态实时绑定。
  • 效果：当用户拖拽或缩放画布时，背景网格会跟随移动和缩放，营造出真实的“无限画布”空间感。
• 坐标系修正：
  • 将画布容器的 transform-origin 锁定为 top left，配合自定义的矩阵计算逻辑，彻底解决了缩放时的偏移和裁剪问题。

6.3 地图视图优化 (Map Layout Improvements)

• 紧凑型便利贴 (Compact Note)：
  • 在地图视图 (Map View) 下，Block 节点的便利贴默认收起为一个圆形角标 (Badge)，避免遮挡路径。
  • 交互：鼠标悬停或点击角标时，便利贴会以浮层 (Popover) 形式展开，层级 (z-index) 提高，确保内容清晰可见。
  • 样式：角标包含事项数量计数和小图钉装饰，色彩与全尺寸便利贴呼应。