feat(编辑器): 优化块渲染性能与错误处理，增强索引传递机制

- 重构 BlockCanvas 组件为 React.memo，合并 TOC 检测与标题索引查询为单一 useMemo
- 优化 TOC 占位符显示逻辑，仅在第一个标题块上方显示（而非每个标题块）
- 增强 BlockRenderer 组件，新增 index 和 blockCount 属性用于块位置追踪
- 更新 HeadingBlock、ParagraphBlock、ImageBlock 组件接收索引参数，移除本地索引查询
- 改进 BlockEditor 文档加载逻辑，添加竞态条件防护与缺失文档 ID 的错误提示
- 优化 handleSave 回调，添加只读模式检查防止不必要的保存操作

src/components/Editor/BlockCanvas.tsx

@@ -31,22 +31,31 @@ export interface BlockCanvasProps {
 /**
  * BlockCanvas - 块画布
  * 
- * 渲染所有blocks,按block_order排序显示
+ * 在第一个标题块上方显示TOC占位符(如果当前没有TOC块)
  * 在每个标题块上方显示TOC占位符(如果当前没有TOC块)
  */
-export const BlockCanvas: React.FC<BlockCanvasProps> = ({
+export const BlockCanvas = React.memo(function BlockCanvas({
   blocks,
   readOnly = false,
-}) => {
-  // 按block_order排序
-  const sortedBlocks = React.useMemo(() => {
-    return [...blocks].sort((a, b) => a.block_order - b.block_order);
-  }, [blocks]);
+}: BlockCanvasProps) {
+  const { sortedBlocks, hasTOC, firstHeadingIndex } = React.useMemo(() => {
+    const sorted = [...blocks].sort((a, b) => a.block_order - b.block_order);
+    let tocFound = false;
+    let headingIndex = -1;
+
+    sorted.forEach((block, index) => {
+      if (block.type === 'toc') tocFound = true;
+      if (headingIndex === -1 && block.type === 'heading') {
+        headingIndex = index;
+      }
+    });
 
-  // 检查是否已存在TOC块
-  const hasTOC = React.useMemo(() => {
-    return sortedBlocks.some(block => block.type === 'toc');
-  }, [sortedBlocks]);
+    return {
+      sortedBlocks: sorted,
+      hasTOC: tocFound,
+      firstHeadingIndex: headingIndex,
+    };
+  }, [blocks]);
 
   // 空状态
   if (sortedBlocks.length === 0) {
@@ -60,14 +69,14 @@ export const BlockCanvas: React.FC<BlockCanvasProps> = ({
   return (
     <div className="block-canvas" data-testid="block-canvas">
       {sortedBlocks.map((block, index) => {
-        const isHeading = block.type === 'heading';
         const prevBlock = index > 0 ? sortedBlocks[index - 1] : null;
         
         // 在标题上方显示TOC占位符的条件:
         // 1. 当前文档没有TOC块
         // 2. 当前块是标题块
         // 3. 不是只读模式
-        const showPlaceholderBefore = !hasTOC && isHeading && !readOnly;
+        const showPlaceholderBefore =
+          !hasTOC && index === firstHeadingIndex && !readOnly;
         
         return (
           <React.Fragment key={block.id}>
@@ -82,6 +91,8 @@ export const BlockCanvas: React.FC<BlockCanvasProps> = ({
             {/* 渲染当前块 */}
             <BlockRenderer
               block={block}
+              index={index}
+              blockCount={sortedBlocks.length}
               readOnly={readOnly}
             />
           </React.Fragment>
@@ -89,6 +100,6 @@ export const BlockCanvas: React.FC<BlockCanvasProps> = ({
       })}
     </div>
   );
-};
+});
 
 export default BlockCanvas;

src/components/Editor/BlockEditor.tsx

@@ -75,15 +75,26 @@ export const BlockEditor: React.FC<BlockEditorProps> = ({
 
   // ── Load document ──────────────────────────────────────────────────────────
   useEffect(() => {
+    let isActive = true;
+
     if (documentId) {
       loadDocument(documentId).catch((err) => {
-        message.error('加载文档失败: ' + (err.message || '未知错误'));
+        if (!isActive) return;
+
+        const detail = err instanceof Error ? err.message : '未知错误';
+        message.error('加载文档失败: ' + detail);
       });
     }
+
+    return () => {
+      isActive = false;
+    };
   }, [documentId, loadDocument]);
 
   // ── Save handler ───────────────────────────────────────────────────────────
   const handleSave = useCallback(async () => {
+    if (readOnly) return;
+
     try {
       await saveDocument();
       message.success('文档已保存');
@@ -91,7 +102,7 @@ export const BlockEditor: React.FC<BlockEditorProps> = ({
       const detail = error instanceof Error ? error.message : '未知错误';
       message.error('保存失败: ' + detail);
     }
-  }, [saveDocument]);
+  }, [readOnly, saveDocument]);
 
   // ── Render ─────────────────────────────────────────────────────────────────
 
@@ -118,6 +129,17 @@ export const BlockEditor: React.FC<BlockEditorProps> = ({
     );
   }
 
+  if (!documentId) {
+    return (
+      <div className="block-editor-error">
+        <div className="error-content">
+          <h3>无法打开文档</h3>
+          <p>缺少文档 ID</p>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div className="block-editor" data-testid="block-editor">
       {/* 工具栏 */}

src/components/Editor/BlockRenderer.tsx

@@ -21,6 +21,10 @@ import { TOCBlock } from './blocks/TOCBlock';
 export interface BlockRendererProps {
   /** 文档块 */
   block: DocumentBlock;
+  /** 块在画布排序结果中的位置 */
+  index?: number;
+  /** 画布中的块总数 */
+  blockCount?: number;
   /** 是否只读 */
   readOnly?: boolean;
 }
@@ -36,20 +40,43 @@ export interface BlockRendererProps {
  */
 export const BlockRenderer = React.memo(function BlockRenderer({
   block,
+  index,
+  blockCount,
   readOnly = false,
 }: BlockRendererProps) {
   switch (block.type) {
     case 'heading':
-      return <HeadingBlock block={block} readOnly={readOnly} />;
+      return (
+        <HeadingBlock
+          block={block}
+          index={index ?? 0}
+          blockCount={blockCount ?? 0}
+          readOnly={readOnly}
+        />
+      );
     
     case 'paragraph':
-      return <ParagraphBlock block={block} readOnly={readOnly} />;
+      return (
+        <ParagraphBlock
+          block={block}
+          index={index ?? 0}
+          blockCount={blockCount ?? 0}
+          readOnly={readOnly}
+        />
+      );
     
     case 'table':
       return <TableBlock block={block} readOnly={readOnly} />;
     
     case 'image':
-      return <ImageBlock block={block} readOnly={readOnly} />;
+      return (
+        <ImageBlock
+          block={block}
+          index={index ?? 0}
+          blockCount={blockCount ?? 0}
+          readOnly={readOnly}
+        />
+      );
     
     case 'toc':
       return <TOCBlock block={block} readOnly={true} />;

src/components/Editor/blocks/HeadingBlock.tsx

@@ -15,6 +15,8 @@ import './HeadingBlock.css';
 
 export interface HeadingBlockProps {
   block: HeadingBlockType;
+  index: number;
+  blockCount: number;
   readOnly?: boolean;
 }
 
@@ -23,17 +25,14 @@ export interface HeadingBlockProps {
  */
 export const HeadingBlock: React.FC<HeadingBlockProps> = ({ 
   block, 
+  index,
+  blockCount,
   readOnly,
 }) => {
   const updateBlock = useEditorStore((state) => state.updateBlock);
   const saveBlock = useEditorStore((state) => state.saveBlock);
   const deleteBlock = useEditorStore((state) => state.deleteBlock);
   const addBlock = useEditorStore((state) => state.addBlock);
-  const currentIndex = useEditorStore((state) =>
-    state.blocks.findIndex((currentBlock) => currentBlock.id === block.id)
-  );
-  const blockCount = useEditorStore((state) => state.blocks.length);
-
   // 解析样式
   const blockStyle = resolveBlockStyle(block.word_style, block.style);
   
@@ -43,8 +42,8 @@ export const HeadingBlock: React.FC<HeadingBlockProps> = ({
   }
 
   // 查找当前块的位置
-  const isFirst = currentIndex === 0;
-  const isLast = currentIndex === blockCount - 1;
+  const isFirst = index === 0;
+  const isLast = index === blockCount - 1;
 
   // 处理内容变更 - 只需调用updateBlock，store会自动处理保存
   const handleChange = useCallback(

src/components/Editor/blocks/ImageBlock.tsx

@@ -19,20 +19,23 @@ import './ImageBlock.css';
 
 export interface ImageBlockProps {
   block: ImageBlockType;
+  index: number;
+  blockCount: number;
   readOnly?: boolean;
 }
 
 /**
  * ImageBlock - 图片块(完整实现)
  */
-export const ImageBlock: React.FC<ImageBlockProps> = ({ block, readOnly }) => {
+export const ImageBlock: React.FC<ImageBlockProps> = ({
+  block,
+  index,
+  blockCount,
+  readOnly,
+}) => {
   const updateBlock = useEditorStore((state) => state.updateBlock);
   const deleteBlock = useEditorStore((state) => state.deleteBlock);
   const addBlock = useEditorStore((state) => state.addBlock);
-  const currentIndex = useEditorStore((state) =>
-    state.blocks.findIndex((currentBlock) => currentBlock.id === block.id)
-  );
-  const blockCount = useEditorStore((state) => state.blocks.length);
   const [isHovered, setIsHovered] = useState(false);
   const [isResizing, setIsResizing] = useState(false);
   const imageRef = useRef<HTMLImageElement>(null);
@@ -44,8 +47,8 @@ export const ImageBlock: React.FC<ImageBlockProps> = ({ block, readOnly }) => {
   });
 
   // 查找当前块的位置
-  const isFirst = currentIndex === 0;
-  const isLast = currentIndex === blockCount - 1;
+  const isFirst = index === 0;
+  const isLast = index === blockCount - 1;
 
   // 处理图片上传
   const handleUpload = useCallback(

src/components/Editor/blocks/ParagraphBlock.tsx

@@ -15,6 +15,8 @@ import './ParagraphBlock.css';
 
 export interface ParagraphBlockProps {
   block: ParagraphBlockType;
+  index: number;
+  blockCount: number;
   readOnly?: boolean;
 }
 
@@ -23,17 +25,14 @@ export interface ParagraphBlockProps {
  */
 export const ParagraphBlock: React.FC<ParagraphBlockProps> = ({ 
   block, 
+  index,
+  blockCount,
   readOnly,
 }) => {
   const updateBlock = useEditorStore((state) => state.updateBlock);
   const saveBlock = useEditorStore((state) => state.saveBlock);
   const deleteBlock = useEditorStore((state) => state.deleteBlock);
   const addBlock = useEditorStore((state) => state.addBlock);
-  const currentIndex = useEditorStore((state) =>
-    state.blocks.findIndex((currentBlock) => currentBlock.id === block.id)
-  );
-  const blockCount = useEditorStore((state) => state.blocks.length);
-
   // 解析样式
   const blockStyle = resolveBlockStyle(block.word_style, block.style);
   
@@ -42,8 +41,8 @@ export const ParagraphBlock: React.FC<ParagraphBlockProps> = ({
     blockStyle.textAlign = block.style.align;
   }
 
-  const isFirst = currentIndex === 0;
-  const isLast = currentIndex === blockCount - 1;
+  const isFirst = index === 0;
+  const isLast = index === blockCount - 1;
 
   // 处理内容变更 - 只需调用updateBlock，store会自动处理保存
   const handleChange = useCallback(