feat(编辑器): 优化性能与安全性，增强图片处理和滚动体验

- 优化MessageList滚动性能，使用requestAnimationFrame防止重复滚动帧
- 添加content-visibility优化块渲染性能，改进大文档加载速度
- 简化标题折叠逻辑，提高代码可维护性和执行效率
- 优化DocumentOutline使用useShallow选择器，减少不必要的重新渲染
- 增强图片安全验证，统一使用isSafeImageSource检查图片来源
- 提取sanitizeImageAlt和normalizeImageDimension工具函数，改进代码复用
- 完善图片上传流程，统一图片尺寸处理和文件名清理逻辑
- 优化表格单元格样式和工具栏交互体验
- 改进编辑器状态管理，增强数据验证和一致性

src/components/ChatPanel/MessageList.tsx

@@ -68,6 +68,7 @@ const MessageList: React.FC<MessageListProps> = ({ className }) => {
   const containerRef = useRef<HTMLDivElement>(null);
   // Ref for the invisible sentinel element at the bottom of the list
   const bottomRef = useRef<HTMLDivElement>(null);
+  const scrollFrameRef = useRef<number | null>(null);
   // Track whether the user is near the bottom so we know if we should auto-scroll
   const isNearBottomRef = useRef(true);
 
@@ -93,7 +94,20 @@ const MessageList: React.FC<MessageListProps> = ({ className }) => {
    * Scroll to the bottom of the message list.
    */
   const scrollToBottom = useCallback(() => {
-    bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
+    if (scrollFrameRef.current !== null) {
+      cancelAnimationFrame(scrollFrameRef.current);
+    }
+
+    scrollFrameRef.current = requestAnimationFrame(() => {
+      scrollFrameRef.current = null;
+      bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
+    });
+  }, []);
+
+  useEffect(() => () => {
+    if (scrollFrameRef.current !== null) {
+      cancelAnimationFrame(scrollFrameRef.current);
+    }
   }, []);
 
   /**

src/components/Editor/BlockCanvas.css

@@ -29,6 +29,8 @@
   position: relative;
   max-width: 100%;
   overflow: visible; /* 允许块菜单显示在外部 */
+  content-visibility: auto;
+  contain-intrinsic-size: 0 120px;
 }
 
 /* 滚动条样式 - Word风格 */

src/components/Editor/BlockCanvas.tsx

@@ -56,11 +56,13 @@ export const BlockCanvas = React.memo(function BlockCanvas({
     const collapsible = new Set<string>();
     sorted.forEach((block, index) => {
       if (block.type !== 'heading') return;
-      for (let nextIndex = index + 1; nextIndex < sorted.length; nextIndex += 1) {
-        const nextBlock = sorted[nextIndex];
-        if (nextBlock.type === 'heading' && nextBlock.level <= block.level) break;
+
+      const nextBlock = sorted[index + 1];
+      if (
+        nextBlock &&
+        (nextBlock.type !== 'heading' || nextBlock.level > block.level)
+      ) {
         collapsible.add(block.id);
-        break;
       }
     });
 

src/components/Editor/DocumentOutline.tsx

@@ -19,6 +19,7 @@ import {
 } from '@ant-design/icons';
 import type { HeadingBlock } from '../../types/editor';
 import { useEditorStore } from '../../stores/editorStore';
+import { useShallow } from 'zustand/react/shallow';
 import './DocumentOutline.css';
 import { getHeadingNumberMap } from '../../utils/headingNumbering';
 
@@ -113,18 +114,17 @@ function addHeadingNumbers(
 export const DocumentOutline: React.FC<DocumentOutlineProps> = ({
   visible = true,
 }) => {
-  const blocks = useEditorStore((state) => state.blocks);
+  const headings = useEditorStore(
+    useShallow((state) =>
+      state.blocks
+        .filter((block): block is HeadingBlock => block.type === 'heading')
+        .sort((left, right) => left.block_order - right.block_order)
+    )
+  );
   const selectedBlockId = useEditorStore((state) => state.selectedBlockId);
   const [expandedKeys, setExpandedKeys] = useState<React.Key[]>([]);
   const [autoExpandParent, setAutoExpandParent] = useState(true);
 
-  // 提取所有标题
-  const headings = useMemo(() => {
-    return blocks
-      .filter((block): block is HeadingBlock => block.type === 'heading')
-      .sort((left, right) => left.block_order - right.block_order);
-  }, [blocks]);
-
   // 构建树结构
   const treeData = useMemo(() => {
     const numberMap = getHeadingNumberMap(headings);

src/components/Editor/blocks/BlockMenu.tsx

@@ -10,7 +10,12 @@ 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 {
+  isSafeImageSource,
+  sanitizeImageAlt,
+  validateImageDimensions,
+  validateImageUpload,
+} from '../../../utils/imageUpload';
 import {
   DeleteOutlined,
   PlusOutlined,
@@ -85,7 +90,9 @@ export const BlockMenu: React.FC<BlockMenuProps> = ({
     const reader = new FileReader();
     reader.onload = (e) => {
       const dataUrl = e.target?.result as string;
-      if (!isMountedRef.current || typeof dataUrl !== 'string') return;
+      if (!isMountedRef.current || typeof dataUrl !== 'string' || !isSafeImageSource(dataUrl)) {
+        return;
+      }
 
       // 使用Image对象获取图片尺寸
       const img = new Image();
@@ -103,14 +110,7 @@ export const BlockMenu: React.FC<BlockMenuProps> = ({
         const aspectRatio = img.height / img.width;
         const widthCm = Math.min(maxWidthCm, img.width / 37.795); // 37.795 px ≈ 1cm
         const heightCm = widthCm * aspectRatio;
-        const safeFileName = Array.from(file.name)
-          .filter((character) => {
-            const codePoint = character.codePointAt(0) ?? 0;
-            return codePoint > 31 && codePoint !== 127;
-          })
-          .join('')
-          .trim()
-          .slice(0, 200) || '未命名图片';
+        const safeFileName = sanitizeImageAlt(file.name);
 
         // 调用插入图片回调
         onInsertImage?.(dataUrl, safeFileName, parseFloat(widthCm.toFixed(2)), parseFloat(heightCm.toFixed(2)));

src/components/Editor/blocks/ImageBlock.tsx

@@ -18,6 +18,8 @@ import { BlockMenu } from './BlockMenu';
 import { ToolbarLauncher } from '../RichTextEditor/RichTextToolbar';
 import {
   isSafeImageSource,
+  normalizeImageDimension,
+  sanitizeImageAlt,
   validateImageDimensions,
   validateImageUpload,
 } from '../../../utils/imageUpload';
@@ -70,7 +72,7 @@ export const ImageBlock: React.FC<ImageBlockProps> = ({
       const reader = new FileReader();
       reader.onload = (e) => {
         const dataUrl = e.target?.result as string;
-        if (typeof dataUrl !== 'string' || !dataUrl.startsWith('data:image/')) {
+        if (typeof dataUrl !== 'string' || !isSafeImageSource(dataUrl)) {
           message.error('图片格式无效');
           return;
         }
@@ -87,7 +89,7 @@ export const ImageBlock: React.FC<ImageBlockProps> = ({
             content: dataUrl,
             metadata: {
               ...block.metadata,
-              alt: file.name,
+              alt: sanitizeImageAlt(file.name),
             },
           });
           message.success('图片上传成功');
@@ -132,19 +134,25 @@ export const ImageBlock: React.FC<ImageBlockProps> = ({
   );
 
   // 计算图片尺寸
-  const getImageSize = useCallback(() => {
+  const imageSize = (() => {
     const { width, height, unit } = block.style;
     const unitMap = { cm: 37.795, inch: 96, px: 1 };
     const multiplier = unitMap[unit] || 1;
+    const safeWidth = normalizeImageDimension(width, 15);
+    const safeHeight = height > 0 ? normalizeImageDimension(height, safeWidth) : 0;
     
     return {
-      width: `${width * multiplier}px`,
-      height: height ? `${height * multiplier}px` : 'auto',
+      width: `${safeWidth * multiplier}px`,
+      height: safeHeight ? `${safeHeight * multiplier}px` : 'auto',
     };
-  }, [block.style]);
-
-  const imageAspectRatio = block.style.width > 0 && block.style.height > 0
-    ? `${block.style.width} / ${block.style.height}`
+  })();
+
+  const safeImageWidth = normalizeImageDimension(block.style.width, 15);
+  const safeImageHeight = block.style.height > 0
+    ? normalizeImageDimension(block.style.height, safeImageWidth)
+    : 0;
+  const imageAspectRatio = safeImageWidth > 0 && safeImageHeight > 0
+    ? `${safeImageWidth} / ${safeImageHeight}`
     : undefined;
 
   // 开始拖拽调整尺寸
@@ -174,18 +182,23 @@ export const ImageBlock: React.FC<ImageBlockProps> = ({
     const newHeight = newWidth * aspectRatio;
 
     // 转换为当前单位
-    const { unit } = block.style;
+    const currentBlock = useEditorStore.getState().blocks.find(
+      (candidate) => candidate.id === block.id && candidate.type === 'image',
+    );
+    if (!currentBlock || currentBlock.type !== 'image') return;
+
+    const { unit } = currentBlock.style;
     const unitMap = { cm: 37.795, inch: 96, px: 1 };
     const multiplier = unitMap[unit] || 1;
 
     updateBlock(block.id, {
       style: {
-        ...block.style,
+        ...currentBlock.style,
         width: parseFloat((newWidth / multiplier).toFixed(2)),
         height: parseFloat((newHeight / multiplier).toFixed(2)),
       },
     });
-  }, [block.id, block.style, updateBlock]);
+  }, [block.id, updateBlock]);
 
   // 拖拽调整中
   const handleResizeMove = useCallback((e: MouseEvent) => {
@@ -417,8 +430,6 @@ export const ImageBlock: React.FC<ImageBlockProps> = ({
     message.success('已插入表格');
   }, [block.id, addBlock]);
 
-  const imageSize = getImageSize();
-
   return (
     <div
       className="image-block-wrapper"
@@ -521,7 +532,8 @@ export const ImageBlock: React.FC<ImageBlockProps> = ({
             <img
               ref={imageRef}
               src={block.content}
-              alt={block.metadata.alt}
+              alt={sanitizeImageAlt(block.metadata.alt || '图片')}
+              referrerPolicy="no-referrer"
               style={{
                 maxWidth: '100%',
                 ...imageSize,

src/components/Editor/blocks/TableBlock.tsx

@@ -12,6 +12,7 @@ import { TableToolbar } from './TableToolbar';
 import { TableResizeHandle } from './TableResizeHandle';
 import { useTableResize } from '../../../hooks/useTableResize';
 import {
+  expandTableSelectionForMergedCells,
   getTableCellRangeForVisualBounds,
   getTableCellReference,
   getTableVisualCellPositions,
@@ -42,6 +43,17 @@ function getVisualSelection(
   };
 }
 
+function getExpandedVisualSelection(
+  anchor: TableVisualCellPosition | undefined,
+  target: TableVisualCellPosition | undefined,
+  positions: Map<string, TableVisualCellPosition>,
+) {
+  const visualRange = getVisualSelection(anchor, target);
+  return visualRange
+    ? expandTableSelectionForMergedCells(visualRange, positions)
+    : null;
+}
+
 /**
  * TableBlock - 表格块(完整实现)
  */
@@ -229,7 +241,11 @@ export const TableBlock: React.FC<TableBlockProps> = ({
         colIndex,
         visualCellPositions,
       )?.visual;
-      const visualRange = getVisualSelection(anchorPosition, targetPosition);
+      const visualRange = getExpandedVisualSelection(
+        anchorPosition,
+        targetPosition,
+        visualCellPositions,
+      );
       if (visualRange) {
         setSelectedVisualRange(visualRange);
         setSelectedRange(getTableCellRangeForVisualBounds(block, visualRange));
@@ -255,7 +271,11 @@ export const TableBlock: React.FC<TableBlockProps> = ({
       colIndex,
       visualCellPositions,
     )?.visual;
-    const visualRange = getVisualSelection(anchorPosition ?? undefined, targetPosition);
+    const visualRange = getExpandedVisualSelection(
+      anchorPosition ?? undefined,
+      targetPosition,
+      visualCellPositions,
+    );
     if (visualRange) {
       setSelectedVisualRange(visualRange);
       setSelectedRange(getTableCellRangeForVisualBounds(block, visualRange));
@@ -438,7 +458,7 @@ export const TableBlock: React.FC<TableBlockProps> = ({
 
         <table
           ref={tableRef}
-          className={`table-block${resizeState?.isResizing ? ' table-resizing' : ''}${isSelecting ? ' table-selecting' : ''}`}
+          className={`table-block${resizeState?.isResizing ? ' table-resizing' : ''}${isSelecting ? ' table-selecting' : ''}${selectedVisualRange ? ' table-has-selection' : ''}`}
           style={{
             width: tableWidthStyle,
             tableLayout: 'fixed',

src/components/Editor/blocks/TableCell.css

@@ -16,8 +16,12 @@
 }
 
 .table-cell.selected {
-  background-color: rgba(24, 144, 255, 0.1);
-  box-shadow: inset 0 0 0 1px #1890ff;
+  background-color: rgba(22, 119, 255, 0.16);
+  box-shadow: none;
+}
+
+.table-block.table-has-selection .table-cell.selected {
+  background-color: rgba(22, 119, 255, 0.16);
 }
 
 /* 单元格内的富文本编辑器 */

src/components/Editor/blocks/TableToolbar.tsx

@@ -218,7 +218,7 @@ export const TableToolbar: React.FC<TableToolbarProps> = ({
   // 合并单元格
   const handleMergeCells = useCallback(() => {
     if (!isMultiCellRange || !visualCellRange) {
-      message.warning('请先选择要合并的单元格范围(Shift+点击)');
+      message.warning('请先拖动或按住 Shift 点击选择要合并的单元格范围');
       return;
     }
 

src/stores/chatStore.ts

@@ -33,6 +33,10 @@ import { shouldTriggerWorkflow, triggerDocumentWorkflow } from '../services/work
 const STORAGE_KEY = 'ax-chat-sessions';
 const MAX_SESSIONS = 50; // Maximum number of sessions to keep
 const MAX_MESSAGES_PER_SESSION = 200;
+const STORAGE_WRITE_DELAY = 150;
+
+let pendingStorageWrite: ReturnType<typeof setTimeout> | null = null;
+let pendingSessions: ChatSession[] | null = null;
 
 // ── Utility Functions ──────────────────────────────────────────────────────
 
@@ -89,7 +93,7 @@ const loadSessionsFromStorage = (): ChatSession[] => {
 /**
  * Save sessions to localStorage
  */
-const saveSessionsToStorage = (sessions: ChatSession[]): void => {
+const writeSessionsToStorage = (sessions: ChatSession[]): void => {
   try {
     // Keep only the most recent MAX_SESSIONS
     const sessionsToSave = [...sessions]
@@ -106,6 +110,24 @@ const saveSessionsToStorage = (sessions: ChatSession[]): void => {
   }
 };
 
+const scheduleSessionsStorageSave = (sessions: ChatSession[]): void => {
+  pendingSessions = sessions;
+
+  if (pendingStorageWrite !== null) {
+    clearTimeout(pendingStorageWrite);
+  }
+
+  pendingStorageWrite = setTimeout(() => {
+    pendingStorageWrite = null;
+    if (pendingSessions) {
+      writeSessionsToStorage(pendingSessions);
+      pendingSessions = null;
+    }
+  }, STORAGE_WRITE_DELAY);
+};
+
+const saveSessionsToStorage = scheduleSessionsStorageSave;
+
 /**
  * Generate session title from first message
  */

src/stores/editorStore.ts

@@ -1132,6 +1132,7 @@ export const useEditorStore = create<EditorStore>((set, get) => {
     
     // 计算新的哈希值
     const newHash = computeBlockHash(updatedBlock);
+    const previousHash = computeBlockHash(blocks[blockIndex]);
     const originalHash = blockHashes.get(id);
     
     // 比较哈希值，只有真正改变时才标记为脏块
@@ -1150,7 +1151,7 @@ export const useEditorStore = create<EditorStore>((set, get) => {
       dirtyBlocks: newDirtyBlocks,
       hasModified: newDirtyBlocks.size > 0,
     });
-    if (newHash !== computeBlockHash(blocks[blockIndex])) {
+    if (newHash !== previousHash) {
       pushHistory(previousBlocks, get().selectedBlockId);
     }
     

src/utils/blockOperations.ts

@@ -136,6 +136,99 @@ export interface TableCellReference {
   visual: TableVisualCellPosition;
 }
 
+/**
+ * Expand a visual selection until every intersecting merged cell is fully included.
+ * A column selection must remain a column selection; it should not expand to an
+ * entire row just because one merged cell crosses the selected column.
+ */
+export function expandTableSelectionForMergedCells(
+  bounds: TableVisualCellPosition,
+  positions: Map<string, TableVisualCellPosition>,
+): TableVisualCellPosition {
+  const expanded = { ...bounds };
+  let changed = true;
+
+  while (changed) {
+    changed = false;
+
+    for (const position of positions.values()) {
+      const intersects = position.rowStart <= expanded.rowEnd
+        && position.rowEnd >= expanded.rowStart
+        && position.colStart <= expanded.colEnd
+        && position.colEnd >= expanded.colStart;
+      if (!intersects) continue;
+
+      const next = {
+        rowStart: Math.min(expanded.rowStart, position.rowStart),
+        rowEnd: Math.max(expanded.rowEnd, position.rowEnd),
+        colStart: Math.min(expanded.colStart, position.colStart),
+        colEnd: Math.max(expanded.colEnd, position.colEnd),
+      };
+
+      if (
+        next.rowStart !== expanded.rowStart
+        || next.rowEnd !== expanded.rowEnd
+        || next.colStart !== expanded.colStart
+        || next.colEnd !== expanded.colEnd
+      ) {
+        Object.assign(expanded, next);
+        changed = true;
+      }
+    }
+  }
+
+  return expanded;
+}
+
+/**
+ * 整行合并单元格参与选择时，按文档表格的视觉行为扩展整行选区。
+ * 这样选区不会只高亮合并单元格本身，而是覆盖该视觉行的所有列。
+ */
+export function expandTableSelectionForFullRowMerges(
+  table: TableBlock,
+  bounds: TableVisualCellPosition,
+  positions: Map<string, TableVisualCellPosition> = getTableVisualCellPositions(table),
+): TableVisualCellPosition {
+  const visualColumnEnd = Math.max(
+    ...Array.from(positions.values(), (position) => position.colEnd),
+    -1,
+  );
+  let touchesFullVisualRow = false;
+
+  for (let rowIndex = bounds.rowStart; rowIndex <= bounds.rowEnd; rowIndex += 1) {
+    const intervals = Array.from(positions.values())
+      .filter((position) => position.rowStart <= rowIndex && position.rowEnd >= rowIndex)
+      .map((position) => ({
+        start: position.colStart,
+        end: position.colEnd,
+        isMerged: position.rowEnd > position.rowStart || position.colEnd > position.colStart,
+      }))
+      .sort((left, right) => left.start - right.start);
+
+    let coveredEnd = -1;
+    let hasMergedCell = false;
+    for (const interval of intervals) {
+      if (interval.start > coveredEnd + 1) break;
+      coveredEnd = Math.max(coveredEnd, interval.end);
+      hasMergedCell = hasMergedCell || interval.isMerged;
+      if (coveredEnd >= visualColumnEnd && hasMergedCell) {
+        touchesFullVisualRow = true;
+        break;
+      }
+    }
+
+    if (touchesFullVisualRow) break;
+  }
+
+  if (!touchesFullVisualRow) return bounds;
+
+  return {
+    ...bounds,
+    colStart: 0,
+    colEnd: visualColumnEnd,
+  };
+}
+
 export function getTableVisualCellPositions(table: TableBlock): Map<string, TableVisualCellPosition> {
   const occupied: boolean[][] = [];
   const positions = new Map<string, TableVisualCellPosition>();

src/utils/imageUpload.ts

@@ -1,6 +1,8 @@
 const MAX_IMAGE_SIZE_BYTES = 10 * 1024 * 1024;
+export const MAX_IMAGE_DATA_URL_LENGTH = Math.ceil(MAX_IMAGE_SIZE_BYTES * 4 / 3) + 128;
 export const MAX_IMAGE_DIMENSION = 10000;
 export const MAX_IMAGE_PIXELS = 40_000_000;
+export const MAX_IMAGE_DISPLAY_SIZE = 50;
 
 const ALLOWED_IMAGE_TYPES = new Set([
   'image/jpeg',
@@ -11,13 +13,30 @@ const ALLOWED_IMAGE_TYPES = new Set([
 ]);
 
 const ALLOWED_DATA_IMAGE_PREFIX = /^data:image\/(?:jpeg|png|gif|webp|bmp);base64,/i;
+const BASE64_DATA_PATTERN = /^[a-z0-9+/]*={0,2}$/i;
 
 export function isSafeImageSource(source: string): boolean {
   const value = source.trim();
   if (!value) return false;
-  if (ALLOWED_DATA_IMAGE_PREFIX.test(value)) return true;
-  if (/^https?:\/\//i.test(value)) return true;
-  return value.startsWith('/') || value.startsWith('./');
+
+  if (ALLOWED_DATA_IMAGE_PREFIX.test(value)) {
+    const encodedData = value.slice(value.indexOf(',') + 1);
+    return encodedData.length <= MAX_IMAGE_DATA_URL_LENGTH
+      && BASE64_DATA_PATTERN.test(encodedData);
+  }
+
+  try {
+    const currentOrigin = typeof window === 'undefined' ? 'http://localhost' : window.location.origin;
+    const url = new URL(value, currentOrigin);
+    if (url.username || url.password) return false;
+    if (url.protocol === 'http:' || url.protocol === 'https:') {
+      return !value.startsWith('//') || url.origin === currentOrigin;
+    }
+    return url.origin === currentOrigin
+      && (value.startsWith('/') || value.startsWith('./'));
+  } catch {
+    return false;
+  }
 }
 
 export function validateImageUpload(file: Pick<File, 'size' | 'type'>): string | null {
@@ -46,4 +65,21 @@ export function validateImageDimensions(width: number, height: number): string |
   }
 
   return null;
+}
+
+export function normalizeImageDimension(value: number, fallback: number): number {
+  if (!Number.isFinite(value) || value <= 0) return fallback;
+  return Math.min(value, MAX_IMAGE_DISPLAY_SIZE);
+}
+
+export function sanitizeImageAlt(fileName: string): string {
+  const sanitized = Array.from(fileName, (character) => {
+    const codePoint = character.codePointAt(0) ?? 0;
+    return codePoint < 32 || codePoint === 127 ? '_' : character;
+  })
+    .join('')
+    .trim()
+    .slice(0, 200);
+
+  return sanitized || '未命名图片';
 }