feat(编辑器): 提取图片验证逻辑，优化块删除时的脏块管理

- 新增 imageUpload.ts 工具模块，统一封装图片上传验证与尺寸验证逻辑
- 重构 BlockMenu 中的图片上传处理，使用提取的验证函数替代重复代码
- 优化 ImageBlock 图片上传流程，完整验证图片格式与尺寸
- 改进编辑存储中的块保存逻辑，仅清理未修改的块标记，避免覆盖并发编辑
- 增强块删除时的顺序更新，只发送顺序字段而非完整块快照
- 修复脏块集合管理，在块删除后正确更新状态

src/components/Editor/blocks/BlockMenu.tsx

@@ -10,6 +10,7 @@ import React from 'react';
 import { Button, Dropdown, Upload, message } from 'antd';
 import type { MenuProps } from 'antd';
 import type { RcFile } from 'antd/es/upload/interface';
+import { validateImageDimensions, validateImageUpload } from '../../../utils/imageUpload';
 import {
   DeleteOutlined,
   PlusOutlined,
@@ -74,24 +75,9 @@ export const BlockMenu: React.FC<BlockMenuProps> = ({
    * 处理图片上传
    */
   const handleImageUpload = (file: RcFile): boolean => {
-    // 文件大小限制（10MB）
-    const isLt10M = file.size / 1024 / 1024 < 10;
-    if (!isLt10M) {
-      message.error('图片大小不能超过10MB');
-      return false;
-    }
-
-    // 只允许浏览器可安全解码的常见栅格图片，避免将 SVG 等可执行载荷写入文档。
-    const allowedImageTypes = new Set([
-      'image/jpeg',
-      'image/png',
-      'image/gif',
-      'image/webp',
-      'image/bmp',
-    ]);
-    const isImage = allowedImageTypes.has(file.type.toLowerCase());
-    if (!isImage) {
-      message.error('只支持 JPG、PNG、GIF、WebP 或 BMP 图片');
+    const validationError = validateImageUpload(file);
+    if (validationError) {
+      message.error(validationError);
       return false;
     }
 
@@ -106,18 +92,9 @@ export const BlockMenu: React.FC<BlockMenuProps> = ({
       img.onload = () => {
         if (!isMountedRef.current) return;
 
-        const maxDimension = 10000;
-        const maxPixels = 40_000_000;
-        if (
-          !Number.isFinite(img.width) ||
-          !Number.isFinite(img.height) ||
-          img.width <= 0 ||
-          img.height <= 0 ||
-          img.width > maxDimension ||
-          img.height > maxDimension ||
-          img.width * img.height > maxPixels
-        ) {
-          message.error('图片尺寸过大，请选择较小的图片');
+        const dimensionError = validateImageDimensions(img.width, img.height);
+        if (dimensionError) {
+          message.error(dimensionError);
           return;
         }
 

src/components/Editor/blocks/ImageBlock.tsx

@@ -16,6 +16,7 @@ import type { ImageBlock as ImageBlockType } from '../../../types/editor';
 import { useEditorStore } from '../../../stores/editorStore';
 import { BlockMenu } from './BlockMenu';
 import { ToolbarLauncher } from '../RichTextEditor/RichTextToolbar';
+import { validateImageDimensions, validateImageUpload } from '../../../utils/imageUpload';
 import './ImageBlock.css';
 
 export interface ImageBlockProps {
@@ -54,17 +55,39 @@ export const ImageBlock: React.FC<ImageBlockProps> = ({
   // 处理图片上传
   const handleUpload = useCallback(
     (file: File) => {
+      const validationError = validateImageUpload(file);
+      if (validationError) {
+        message.error(validationError);
+        return false;
+      }
+
       const reader = new FileReader();
       reader.onload = (e) => {
         const dataUrl = e.target?.result as string;
-        updateBlock(block.id, {
-          content: dataUrl,
-          metadata: {
-            ...block.metadata,
-            alt: file.name,
-          },
-        });
-        message.success('图片上传成功');
+        if (typeof dataUrl !== 'string' || !dataUrl.startsWith('data:image/')) {
+          message.error('图片格式无效');
+          return;
+        }
+
+        const image = new Image();
+        image.onload = () => {
+          const dimensionError = validateImageDimensions(image.width, image.height);
+          if (dimensionError) {
+            message.error(dimensionError);
+            return;
+          }
+
+          updateBlock(block.id, {
+            content: dataUrl,
+            metadata: {
+              ...block.metadata,
+              alt: file.name,
+            },
+          });
+          message.success('图片上传成功');
+        };
+        image.onerror = () => message.error('图片加载失败');
+        image.src = dataUrl;
       };
       reader.onerror = () => {
         message.error('图片读取失败');

src/stores/editorStore.ts

@@ -588,30 +588,40 @@ export const useEditorStore = create<EditorStore>((set, get) => ({
           
           throw new Error(`${failedIndices.length} 个块保存失败`);
         } else {
-          // 全部保存成功
-          const snapshot = JSON.stringify(blocks);
-          
-          // 更新成功保存的块的哈希值
-          const newBlockHashes = new Map(get().blockHashes);
+          // 仅清理本次保存成功且期间没有再次修改的块，避免覆盖保存期间的新编辑。
+          const latestState = get();
+          const newDirtyBlocks = new Set(latestState.dirtyBlocks);
+          const newBlockHashes = new Map(latestState.blockHashes);
           successIds.forEach(id => {
-            const block = blocks.find(b => b.id === id);
-            if (block) {
-              newBlockHashes.set(id, computeBlockHash(block));
+            const savedBlock = blocks.find(block => block.id === id);
+            const latestBlock = latestState.blocks.find(block => block.id === id);
+            if (!savedBlock || !latestBlock) return;
+
+            const savedHash = computeBlockHash(savedBlock);
+            const latestHash = computeBlockHash(latestBlock);
+            if (savedHash === latestHash) {
+              newBlockHashes.set(id, savedHash);
+              newDirtyBlocks.delete(id);
             }
           });
-          
-          set({ 
+
+          const snapshots = newDirtyBlocks.size === 0
+            ? {
+              originalBlocksSnapshot: JSON.stringify(latestState.blocks),
+              lastSavedSnapshot: JSON.stringify(latestState.blocks),
+            }
+            : {};
+          set({
             isSaving: false,
-            hasModified: false,
-            originalBlocksSnapshot: snapshot,
-            lastSavedSnapshot: snapshot,
+            hasModified: newDirtyBlocks.size > 0,
             failedBlocks: [],
-            dirtyBlocks: new Set<string>(),
+            dirtyBlocks: newDirtyBlocks,
             blockHashes: newBlockHashes,
             currentSavePromise: null,
             saveAbortController: null,
             savingProgress: null,
             lastSaveTime: Date.now(),
+            ...snapshots,
           });
         }
       } catch (error: unknown) {
@@ -1024,6 +1034,8 @@ export const useEditorStore = create<EditorStore>((set, get) => ({
     if (!blockToDelete) {
       return;
     }
+
+    const wasDirty = dirtyBlocks.has(id);
     
     // 先从本地状态删除（乐观更新）
     const newBlocks = blocks.filter((block) => block.id !== id);
@@ -1065,25 +1077,13 @@ export const useEditorStore = create<EditorStore>((set, get) => ({
       
       // 3. 如果有块需要更新顺序，批量调用 PUT API 更新
       if (blocksNeedUpdate.length > 0) {
-        // 并发调用 PUT API 更新所有受影响的块
-        const updatePromises = blocksNeedUpdate.map(({ block, newOrder }) => {
-          // 对于TOC块，只更新block_order，不传递其他字段
-          // 因为后端对TOC块有严格的验证限制
-          if (block.type === 'toc') {
-            return blockService.updateBlock(documentId, block.id, {
-              block_order: newOrder,
-            });
-          }
-          
-          // 非TOC块：传递完整的数据
-          return blockService.updateBlock(documentId, block.id, {
-            content: block.content,
-            style: block.style,
-            word_style: block.word_style,
-            metadata: block.metadata,
+        // 并发调用 PUT API 更新所有受影响块的顺序。
+        // 只发送顺序字段，避免用删除前的块快照覆盖并发编辑。
+        const updatePromises = blocksNeedUpdate.map(({ block, newOrder }) =>
+          blockService.updateBlock(documentId, block.id, {
             block_order: newOrder,
-          });
-        });
+          })
+        );
         
         await Promise.all(updatePromises);
         
@@ -1106,14 +1106,19 @@ export const useEditorStore = create<EditorStore>((set, get) => ({
         });
         
         // 5. 更新本地状态，不标记为已修改（因为后端已经同步）
+        const latestState = get();
         set({ 
           blocks: updatedBlocks,
           blockHashes: updatedBlockHashes,
-          hasModified: false, // 所有操作都已同步到后端
+          dirtyBlocks: latestState.dirtyBlocks,
+          hasModified: latestState.dirtyBlocks.size > 0,
         });
       } else {
         // 没有块需要更新顺序（可能删除的是最后一个块）
-        set({ hasModified: false }); // 标记为已同步
+        const latestState = get();
+        set({
+          hasModified: latestState.dirtyBlocks.size > 0,
+        });
       }
     } catch (error: unknown) {
       // 删除或更新失败，回滚本地状态
@@ -1130,10 +1135,17 @@ export const useEditorStore = create<EditorStore>((set, get) => ({
         if (wasOriginalBlock) {
           restoredBlockHashes.set(id, computeBlockHash(blockToDelete));
         }
+
+        const restoredDirtyBlocks = new Set(get().dirtyBlocks);
+        if (wasDirty) {
+          restoredDirtyBlocks.add(id);
+        }
         
         set({ 
           blocks: restoredBlocks,
           blockHashes: restoredBlockHashes,
+          dirtyBlocks: restoredDirtyBlocks,
+          hasModified: restoredDirtyBlocks.size > 0,
         });
       }
       

src/utils/imageUpload.ts

@@ -0,0 +1,39 @@
+const MAX_IMAGE_SIZE_BYTES = 10 * 1024 * 1024;
+export const MAX_IMAGE_DIMENSION = 10000;
+export const MAX_IMAGE_PIXELS = 40_000_000;
+
+const ALLOWED_IMAGE_TYPES = new Set([
+  'image/jpeg',
+  'image/png',
+  'image/gif',
+  'image/webp',
+  'image/bmp',
+]);
+
+export function validateImageUpload(file: Pick<File, 'size' | 'type'>): string | null {
+  if (!Number.isFinite(file.size) || file.size <= 0 || file.size > MAX_IMAGE_SIZE_BYTES) {
+    return '图片大小必须大于0且不能超过10MB';
+  }
+
+  if (!ALLOWED_IMAGE_TYPES.has(file.type.toLowerCase())) {
+    return '只支持 JPG、PNG、GIF、WebP 或 BMP 图片';
+  }
+
+  return null;
+}
+
+export function validateImageDimensions(width: number, height: number): string | null {
+  if (
+    !Number.isFinite(width) ||
+    !Number.isFinite(height) ||
+    width <= 0 ||
+    height <= 0 ||
+    width > MAX_IMAGE_DIMENSION ||
+    height > MAX_IMAGE_DIMENSION ||
+    width * height > MAX_IMAGE_PIXELS
+  ) {
+    return '图片尺寸过大，请选择较小的图片';
+  }
+
+  return null;
+}