diff --git a/apps/desktop/src/renderer/features/outline/OutlinePanel.tsx b/apps/desktop/src/renderer/features/outline/OutlinePanel.tsx index 66e29be..183976c 100644 --- a/apps/desktop/src/renderer/features/outline/OutlinePanel.tsx +++ b/apps/desktop/src/renderer/features/outline/OutlinePanel.tsx @@ -64,7 +64,8 @@ export function OutlinePanel() { return () => { scrollEl!.removeEventListener('scroll', onScroll); }; }, [editor, headings]); - // FR-O2:滚动到标题——先滚后选,避免 ProseMirror focus scroll 覆盖手动滚动 + // FR-O2:Typora 式大纲跳转——瞬时定位 + 光标设置 + 闪烁高亮 + // 不用 smooth scroll(导航场景应瞬时跳转),不用 editor.commands.focus(会触发 scrollIntoView) const scrollTo = useCallback((h: HeadingItem) => { if (!editor) return; const el = editor.view.nodeDOM(h.pos) as HTMLElement | null; @@ -75,22 +76,22 @@ export function OutlinePanel() { scrollEl = scrollEl.parentElement; } if (scrollEl) { - // 先计算目标位置(此时 rect 还未被 focus scroll 干扰) + // 计算目标位置——标题紧贴容器顶部 const elRect = el.getBoundingClientRect(); const containerRect = scrollEl.getBoundingClientRect(); const targetTop = Math.max(0, elRect.top - containerRect.top + scrollEl.scrollTop); - // 先设置光标但不 focus(不触发 ProseMirror 滚动) - editor.commands.setTextSelection(h.pos + 1); - // 平滑滚动——必须在 focus 之前执行,否则 ProseMirror 的 scrollIntoView 会覆盖 - scrollEl.scrollTo({ top: targetTop, behavior: 'smooth' }); + // 瞬时跳转(不用 smooth scroll——导航操作应该立即到位) + scrollEl.scrollTop = targetTop; } - // 闪烁高亮 + // 设置光标到标题位置——setTextSelection 不触发滚动 + editor.commands.setTextSelection(h.pos + 1); + // focus 但不触发 ProseMirror scrollIntoView——直接调 view.focus() + editor.view.focus(); + // 闪烁高亮(放在最后,确保滚动已完成) el.classList.remove('outline-flash'); void el.offsetWidth; el.classList.add('outline-flash'); setTimeout(() => el.classList.remove('outline-flash'), 1500); - // focus 放到下一帧,让 smooth scroll 先启动 - requestAnimationFrame(() => editor.commands.focus()); }, [editor]); // FR-O4:未打开文档时显示占位