改进：缩进时的闪烁问题和光标闪烁

[SaXz2]

PixPin_2026-01-29_01-45-21.mp4

视频里面可以看到过程明显

1. 按下缩进快捷键
2. 当前行消失，光标跑到了上一行末尾
3. 缩进完成 光标又回到对应位置

希望解决这个问题，并且还会有轻微的布局抖动问题

[sethyuan]

我这边没有观察到抖动现象呢，是不是和你用的主题或者CSS有关？

[SaXz2]

PixPin_2026-01-29_14-47-26.mp4

有的，感觉还可以再优化一下这个问题，之前有一版修完抖动很轻微，现在好像又出现这个问题了

[sethyuan]

我又调了一下，后面你再看看呢。

[SaXz2]

问题1 ： 当前还是存在光标缩进后闪烁的问题，录制问题可能看不太出来，实操会很明显感觉到 ， 反缩进是正常的

PixPin_2026-01-31_05-12-43.mp4

问题2 ： 当前还是存在缩进和反缩进闪烁的问题

---

老大，我怕表述的不够清晰 Ai Studio 复刻了一个对比版本你看一下吧，我还是希望能修好这个问题，因为我在其他类似软件中都没有碰到过类似的问题，他们都是一致的最右侧的体验，在视觉上我觉得算是一个很大的问题了，这直接导致有些人会直接认为软件很粗糙，尤其是光标和块在缩进以后都会闪烁

• https://ai.studio/apps/drive/1Mp6PWU_dAG8s7z-jvEh-p4eU99Y5Mply

我希望是右侧绿色那种无闪烁的方案，现在这种方案说实话真的不是太好，闪烁的问题有些太频繁了，块少的时候可能还看不出来，但是块多一些层级复杂一些进行缩进的时候就特别的明显

PixPin_2026-01-31_04-45-07.mp4

另外这是稍微复杂情况下的效果

PixPin_2026-01-31_04-48-14.mp4

AI 方案

2. 使用 useLayoutEffect 修复光标跳动
   即使解决了布局抖动，如果光标处理不好，用户体验依然会很差。在 React 18 中，这是一个常见的痛点。
   BUG 现象：
   当节点被移动（重建）时， 也会被重建，导致焦点丢失或光标跳到开头/结尾。
   修复方案：
   必须使用 useLayoutEffect 而不是 useEffect。

// ✅ 正确做法 (TreeItem.tsx)
useLayoutEffect(() => {
  if (snap.focusedId === id && inputRef.current) {
    // 1. 恢复焦点
    inputRef.current.focus();
    // 2. 恢复光标位置
    if (snap.cursorPosition !== null) {
      inputRef.current.setSelectionRange(pos, pos);
    }
  }
}, [snap.focusedId, ...]);

useEffect：浏览器完成绘制（Paint）之后执行。用户会看到光标先消失，然后闪现回来，或者画面闪烁。
useLayoutEffect：DOM 变更之后，但浏览器绘制之前执行。React 会同步等待这个函数执行完。这意味着当用户看到新的一帧时，焦点和光标位置已经被修正好了，完全无感。
3. 性能优化：避免不必要的重排
虽然绿色版本是“硬切”，但为了让它看起来顺滑（Snappy），依然需要保证渲染性能。
React.memo：TreeItem 被 React.memo 包裹，确保只有受影响的节点（和其父节点）会重新渲染，其他无关的兄弟节点完全不动。
状态管理 (Valtio)：使用细粒度的状态订阅，避免整棵树的 Context 更新导致的整树重绘。
总结
要在你的应用中实现“完美修复”的效果，只需将 BuggyTreeItem.tsx 改回标准的 React 组件：
删除 <motion.li> 或 animation 样式。
保留 标准的 <li>。
确保 useLayoutEffect 里的光标恢复逻辑存在。
这就是为什么“最佳实践”看起来最朴素，因为在复杂的列表操作中，最快、最稳的动画就是没有动画（指结构性动画，折叠展开的微交互除外）。

[SaXz2]

老大还是有些问题

PixPin_2026-02-13_16-43-34.mp4

现在修复了指示线闪烁的问题，但是光标位置闪烁和缩进闪烁依旧有些问题，主要还是下图中的第二帧（光标位置变了，还多了一行）和第三帧（光标在底部下一帧会闪现回去）