feat(M3): FR-O2/O3/O4 大纲面板——平滑滚动+闪烁高亮(FR-O2); 编辑器滚动联动高亮当前标题+大纲跟随(FR-O3); 未打开文档占位(FR-O4); editor-shared-store 跨树共享编辑器实例; outline E2E 3 项

apps/desktop/src/renderer/features/outline/OutlinePanel.tsx

@@ -1,13 +1,18 @@
-import { useState, useEffect } from 'react';
-import { useEditorRef } from '../editor/editor-context';
+import { useState, useEffect, useRef, useCallback } from 'react';
+import { useEditorShared } from '../editor/editor-shared-store';
+import { useStore } from '../../store';
 import type { Editor } from '@tiptap/react';
 
 interface HeadingItem { id: string; level: number; text: string; pos: number; }
 
 export function OutlinePanel() {
-  const editor = useEditorRef();
+  const editor = useEditorShared(s => s.editor);
+  const currentPath = useStore(s => s.currentPath);
   const [headings, setHeadings] = useState<HeadingItem[]>([]);
+  const [activeIdx, setActiveIdx] = useState(-1);
+  const listRef = useRef<HTMLDivElement>(null);
 
+  // 收集标题
   useEffect(() => {
     if (!editor) return;
     const collect = () => {
@@ -24,26 +29,74 @@ export function OutlinePanel() {
     return () => { editor.off('update', collect); };
   }, [editor]);
 
-  const scrollTo = (h: HeadingItem) => {
+  // FR-O3：编辑器滚动联动——计算当前可见标题，高亮大纲并自动滚动大纲
+  const activeRef = useRef(-1);
+  useEffect(() => {
+    if (!editor || headings.length === 0) return;
+    const dom = editor.view.dom as HTMLElement;
+    // 找到可滚动父容器
+    let scrollEl: HTMLElement | null = dom.parentElement;
+    while (scrollEl && getComputedStyle(scrollEl).overflowY !== 'auto' && getComputedStyle(scrollEl).overflowY !== 'scroll') {
+      scrollEl = scrollEl.parentElement;
+    }
+    if (!scrollEl) return;
+
+    const onScroll = () => {
+      const containerTop = scrollEl!.getBoundingClientRect().top;
+      let current = 0; // 默认第一个标题
+      for (let i = 0; i < headings.length; i++) {
+        const coords = editor!.view.coordsAtPos(headings[i].pos + 1);
+        if (coords.top - containerTop <= 100) current = i;
+        else break;
+      }
+      if (current !== activeRef.current) {
+        activeRef.current = current;
+        setActiveIdx(current);
+        // 大纲自身滚动到当前项
+        const el = listRef.current?.querySelector(`[data-idx="${current}"]`) as HTMLElement | null;
+        el?.scrollIntoView({ block: 'nearest' });
+      }
+    };
+    scrollEl.addEventListener('scroll', onScroll, { passive: true });
+    onScroll(); // 初始计算
+    return () => { scrollEl!.removeEventListener('scroll', onScroll); };
+  }, [editor, headings]);
+
+  // FR-O2：平滑滚动 + 闪烁高亮
+  const scrollTo = useCallback((h: HeadingItem) => {
     if (!editor) return;
-    editor.commands.setTextSelection(h.pos);
-    editor.commands.scrollIntoView();
-    // 闪烁高亮（简化版：focus 即可）
+    const el = editor.view.nodeDOM(h.pos) as HTMLElement | null;
+    if (el) {
+      el.scrollIntoView({ behavior: 'smooth', block: 'start' });
+      // 闪烁高亮
+      el.classList.remove('outline-flash');
+      void el.offsetWidth; // 触发重排以重启动画
+      el.classList.add('outline-flash');
+      setTimeout(() => el.classList.remove('outline-flash'), 1600);
+    }
+    editor.commands.setTextSelection(h.pos + 1);
     editor.commands.focus();
-  };
+  }, [editor]);
+
+  // FR-O4：未打开文档时显示占位
+  if (!currentPath) {
+    return <div style={{ padding: 16, opacity: 0.5, fontSize: 13 }}>未打开文档</div>;
+  }
 
   if (headings.length === 0) {
     return <div style={{ padding: 16, opacity: 0.5, fontSize: 13 }}>无标题。添加一至六级标题以生成大纲。</div>;
   }
+
   return (
-    <div style={{ padding: 16, overflow: 'auto' }}>
+    <div ref={listRef} style={{ padding: 16, overflow: 'auto' }}>
       <div style={{ opacity: 0.6, fontSize: 12, marginBottom: 8 }}>大纲（{headings.length}）</div>
-      {headings.map(h => (
-        <div key={h.id} onClick={() => scrollTo(h)}
+      {headings.map((h, i) => (
+        <div key={h.id} data-idx={i} onClick={() => scrollTo(h)}
+          className={i === activeIdx ? 'outline-item outline-item-active' : 'outline-item'}
           style={{ paddingLeft: 8 + (h.level - 1) * 12, cursor: 'pointer', padding: '4px 4px 4px ' + (8 + (h.level-1)*12) + 'px',
             fontSize: 13, borderRadius: 4 }}
-          onMouseEnter={e => (e.currentTarget.style.background = '#2a2a2a')}
-          onMouseLeave={e => (e.currentTarget.style.background = 'transparent')}>
+          onMouseEnter={e => { if (i !== activeIdx) e.currentTarget.style.background = '#2a2a2a'; }}
+          onMouseLeave={e => { if (i !== activeIdx) e.currentTarget.style.background = 'transparent'; }}>
           {h.text || '(空标题)'}
         </div>
       ))}