feat(编辑器): 重构表格组件，优化单元格引用和结构验证逻辑

src/components/Editor/blocks/TableBlock.tsx

@@ -11,7 +11,12 @@ import { TableCell } from './TableCell';
 import { TableToolbar } from './TableToolbar';
 import { TableResizeHandle } from './TableResizeHandle';
 import { useTableResize } from '../../../hooks/useTableResize';
-import { getTableCellRangeForVisualBounds, getTableVisualCellPositions } from '../../../utils/blockOperations';
+import {
+  getTableCellRangeForVisualBounds,
+  getTableCellReference,
+  getTableVisualCellPositions,
+  type TableVisualCellPosition,
+} from '../../../utils/blockOperations';
 import { tableWidthToPt } from '../../../utils/tableUtils';
 import './TableBlock.css';
 
@@ -24,18 +29,9 @@ export interface TableBlockProps {
   readOnly?: boolean;
 }
 
-interface VisualCellPosition {
-  rowStart: number;
-  rowEnd: number;
-  colStart: number;
-  colEnd: number;
-}
-
-const getCellKey = (rowIndex: number, colIndex: number) => `${rowIndex}-${colIndex}`;
-
 function getVisualSelection(
-  anchor: VisualCellPosition | undefined,
-  target: VisualCellPosition | undefined,
+  anchor: TableVisualCellPosition | undefined,
+  target: TableVisualCellPosition | undefined,
 ) {
   if (!anchor || !target) return null;
   return {
@@ -62,12 +58,12 @@ export const TableBlock: React.FC<TableBlockProps> = ({
     endRow: number;
     endCol: number;
   } | null>(null);
-  const [selectedVisualRange, setSelectedVisualRange] = useState<VisualCellPosition | null>(null);
+  const [selectedVisualRange, setSelectedVisualRange] = useState<TableVisualCellPosition | null>(null);
   
   const tableRef = useRef<HTMLTableElement>(null);
   const containerRef = useRef<HTMLDivElement>(null);
   const selectionAnchorRef = useRef<{ row: number; col: number } | null>(null);
-  const selectionAnchorVisualRef = useRef<VisualCellPosition | null>(null);
+  const selectionAnchorVisualRef = useRef<TableVisualCellPosition | null>(null);
   const isSelectingRef = useRef(false);
   const didDragSelectRef = useRef(false);
   const [isSelecting, setIsSelecting] = useState(false);
@@ -169,7 +165,12 @@ export const TableBlock: React.FC<TableBlockProps> = ({
       if (!selectedCell) return;
 
       const styleRange = selectedVisualRange || (() => {
-        const position = visualCellPositions.get(getCellKey(selectedCell.row, selectedCell.col));
+        const position = getTableCellReference(
+          block,
+          selectedCell.row,
+          selectedCell.col,
+          visualCellPositions,
+        )?.visual;
         return position || null;
       })();
 
@@ -177,7 +178,7 @@ export const TableBlock: React.FC<TableBlockProps> = ({
         return {
           ...row,
           cells: row.cells.map((cell, colIdx) => {
-            const cellPosition = visualCellPositions.get(getCellKey(rowIdx, colIdx));
+            const cellPosition = getTableCellReference(block, rowIdx, colIdx, visualCellPositions)?.visual;
             const isInRange = !!styleRange && !!cellPosition
               && cellPosition.rowStart <= styleRange.rowEnd
               && cellPosition.rowEnd >= styleRange.rowStart
@@ -216,8 +217,18 @@ export const TableBlock: React.FC<TableBlockProps> = ({
 
     if (shiftKey && selectedCell) {
       // Shift+点击:选择范围
-      const anchorPosition = visualCellPositions.get(getCellKey(selectedCell.row, selectedCell.col));
-      const targetPosition = visualCellPositions.get(getCellKey(rowIndex, colIndex));
+      const anchorPosition = getTableCellReference(
+        block,
+        selectedCell.row,
+        selectedCell.col,
+        visualCellPositions,
+      )?.visual;
+      const targetPosition = getTableCellReference(
+        block,
+        rowIndex,
+        colIndex,
+        visualCellPositions,
+      )?.visual;
       const visualRange = getVisualSelection(anchorPosition, targetPosition);
       if (visualRange) {
         setSelectedVisualRange(visualRange);
@@ -238,7 +249,12 @@ export const TableBlock: React.FC<TableBlockProps> = ({
     setSelectedCell({ row: rowIndex, col: colIndex });
 
     const anchorPosition = selectionAnchorVisualRef.current;
-    const targetPosition = visualCellPositions.get(getCellKey(rowIndex, colIndex));
+    const targetPosition = getTableCellReference(
+      block,
+      rowIndex,
+      colIndex,
+      visualCellPositions,
+    )?.visual;
     const visualRange = getVisualSelection(anchorPosition ?? undefined, targetPosition);
     if (visualRange) {
       setSelectedVisualRange(visualRange);
@@ -257,20 +273,32 @@ export const TableBlock: React.FC<TableBlockProps> = ({
     if (!isEditorTarget) {
       event.preventDefault();
     }
-    selectionAnchorRef.current = { row: rowIndex, col: colIndex };
-    selectionAnchorVisualRef.current = visualCellPositions.get(getCellKey(rowIndex, colIndex)) || null;
     isSelectingRef.current = true;
     setIsSelecting(true);
 
     if (event.shiftKey && selectedCell) {
+      didDragSelectRef.current = true;
       selectionAnchorRef.current = selectedCell;
+      selectionAnchorVisualRef.current = getTableCellReference(
+        block,
+        selectedCell.row,
+        selectedCell.col,
+        visualCellPositions,
+      )?.visual || null;
       updateSelectedRange(rowIndex, colIndex);
     } else {
+      selectionAnchorRef.current = { row: rowIndex, col: colIndex };
+      selectionAnchorVisualRef.current = getTableCellReference(
+        block,
+        rowIndex,
+        colIndex,
+        visualCellPositions,
+      )?.visual || null;
       setSelectedCell({ row: rowIndex, col: colIndex });
       setSelectedRange(null);
       setSelectedVisualRange(null);
     }
-  }, [readOnly, selectedCell, updateSelectedRange, visualCellPositions]);
+  }, [block, readOnly, selectedCell, updateSelectedRange, visualCellPositions]);
 
   const handleCellMouseEnter = useCallback((rowIndex: number, colIndex: number) => {
     if (isSelectingRef.current) {
@@ -426,7 +454,12 @@ export const TableBlock: React.FC<TableBlockProps> = ({
               >
                 {row.cells.map((cell, colIndex) => {
                   // 检查单元格是否在选择范围内
-                  const cellPosition = visualCellPositions.get(getCellKey(rowIndex, colIndex));
+                  const cellPosition = getTableCellReference(
+                    block,
+                    rowIndex,
+                    colIndex,
+                    visualCellPositions,
+                  )?.visual;
                   const isInRange = selectedVisualRange && cellPosition
                     ? cellPosition.rowStart <= selectedVisualRange.rowEnd &&
                       cellPosition.rowEnd >= selectedVisualRange.rowStart &&

src/components/Editor/blocks/TableToolbar.tsx

@@ -30,7 +30,7 @@ import {
   splitCell,
   getTableSelectionBounds,
   getTableCellRangeForVisualBounds,
-  getTableVisualCellPositions,
+  getTableCellReference,
 } from '../../../utils/blockOperations';
 import './TableToolbar.css';
 
@@ -116,11 +116,9 @@ export const TableToolbar: React.FC<TableToolbarProps> = ({
   const selectedCellData = hasValidSelectedCell
     ? block.content.rows[selectedCell.row]?.cells[selectedCell.col]
     : undefined;
-  const selectedVisualPosition = getTableVisualCellPositions(block).get(
-    `${selectedCell.row}-${selectedCell.col}`,
-  );
-  const operationRow = selectedVisualPosition?.rowStart ?? selectedCell.row;
-  const operationCol = selectedVisualPosition?.colStart ?? selectedCell.col;
+  const selectedReference = getTableCellReference(block, selectedCell.row, selectedCell.col);
+  const operationRow = selectedReference?.visual.rowStart ?? selectedCell.row;
+  const operationCol = selectedReference?.visual.colStart ?? selectedCell.col;
   const canEditTableStructure = hasValidSelectedCell;
   const isMergedCell = hasValidSelectedCell
     && ((selectedCellData?.rowspan ?? 1) > 1 || (selectedCellData?.colspan ?? 1) > 1);

src/services/clientExportService.ts

@@ -1,5 +1,6 @@
 import type { DocumentBlock, RichText, TableBlock } from '../types/editor';
 import { downloadBlob, safeFileName } from '../utils/download';
+import { getTableVisualCellPositions } from '../utils/blockOperations';
 
 function toPlainText(content: string | RichText[]): string {
   return typeof content === 'string'
@@ -12,13 +13,26 @@ function escapeTableCell(value: string): string {
 }
 
 function tableToMarkdown(block: TableBlock): string {
-  const rows = block.content.rows.map((row) =>
-    row.cells.map((cell) => escapeTableCell(toPlainText(cell.text)))
+  const columnCount = Math.max(block.metadata.cols, 1);
+  const rows = Array.from(
+    { length: block.content.rows.length },
+    () => Array<string>(columnCount).fill(''),
   );
+  const positions = getTableVisualCellPositions(block);
+
+  block.content.rows.forEach((row, rowIndex) => {
+    row.cells.forEach((cell, cellIndex) => {
+      const position = positions.get(`${rowIndex}-${cellIndex}`);
+      if (!position || position.rowStart >= rows.length || position.colStart >= columnCount) {
+        return;
+      }
+
+      rows[position.rowStart][position.colStart] = escapeTableCell(toPlainText(cell.text));
+    });
+  });
 
   if (rows.length === 0) return '';
 
-  const columnCount = Math.max(...rows.map((row) => row.length), 1);
   const normalizeRow = (row: string[]) =>
     `| ${Array.from({ length: columnCount }, (_, index) => row[index] ?? '').join(' | ')} |`;
 

src/stores/editorStore.ts

@@ -23,7 +23,11 @@ import type {
 } from '../types/editor';
 import { blockService } from '../services/blockService';
 import { getErrorMessage } from '../services/api';
-import { normalizeTableBlock, serializeTableBlock } from '../utils/blockOperations';
+import {
+  normalizeTableBlock,
+  serializeTableBlock,
+  validateTableStructure,
+} from '../utils/blockOperations';
 
 // 并发保存限制器（最多同时进行 3 个请求，降低服务器压力）
 const saveConcurrencyLimit = pLimit(3);
@@ -459,6 +463,13 @@ export const useEditorStore = create<EditorStore>((set, get) => {
         }
         return block;
       });
+
+      const invalidTable = normalizedBlocks.find(
+        (block) => block.type === 'table' && !validateTableStructure(block as TableBlock),
+      );
+      if (invalidTable) {
+        throw new Error('文档包含无效的表格结构');
+      }
       
       // 保存原始blocks快照,用于检测修改
       const snapshot = JSON.stringify(normalizedBlocks);

src/utils/blockOperations.ts

@@ -130,6 +130,12 @@ export interface TableVisualCellPosition {
   colEnd: number;
 }
 
+export interface TableCellReference {
+  rowIndex: number;
+  cellIndex: number;
+  visual: TableVisualCellPosition;
+}
+
 export function getTableVisualCellPositions(table: TableBlock): Map<string, TableVisualCellPosition> {
   const occupied: boolean[][] = [];
   const positions = new Map<string, TableVisualCellPosition>();
@@ -172,6 +178,18 @@ export function getTableVisualCellPositions(table: TableBlock): Map<string, Tabl
   return positions;
 }
 
+export function getTableCellReference(
+  table: TableBlock,
+  rowIndex: number,
+  cellIndex: number,
+  positions: Map<string, TableVisualCellPosition> = getTableVisualCellPositions(table),
+): TableCellReference | null {
+  const visual = positions.get(`${rowIndex}-${cellIndex}`);
+  if (!visual) return null;
+
+  return { rowIndex, cellIndex, visual };
+}
+
 export function getTableCellsForVisualBounds(
   table: TableBlock,
   bounds: TableVisualCellPosition,
@@ -194,6 +212,52 @@ export function getTableCellsForVisualBounds(
   return cells;
 }
 
+export function validateTableStructure(table: TableBlock): boolean {
+  const columnCount = table.metadata?.cols;
+  const rowCount = table.metadata?.rows;
+  const rows = table.content?.rows;
+
+  if (!Number.isInteger(columnCount) || columnCount <= 0 || columnCount > 1000) return false;
+  if (!Number.isInteger(rowCount) || rowCount <= 0 || rowCount > 1000) return false;
+  if (!Array.isArray(rows) || rows.length !== rowCount) return false;
+  if (!Array.isArray(table.metadata.col_widths) || table.metadata.col_widths.length !== columnCount) {
+    return false;
+  }
+  if (table.content.col_widths && table.content.col_widths.length !== columnCount) return false;
+  if (table.metadata.col_widths.some((width) => !Number.isFinite(width) || width <= 0)) return false;
+  if (table.content.col_widths?.some((width) => !Number.isFinite(width) || width <= 0)) return false;
+
+  for (const row of rows) {
+    if (!Array.isArray(row.cells) || row.cells.length > columnCount) return false;
+    if (row.height !== undefined && (!Number.isFinite(row.height) || row.height <= 0)) return false;
+
+    for (const cell of row.cells) {
+      const rowspan = cell.rowspan;
+      const colspan = cell.colspan;
+      if (!Number.isInteger(rowspan) || !Number.isInteger(colspan)) return false;
+
+      const isHidden = rowspan === 0 && colspan === 0;
+      if (isHidden) {
+        const colIndex = cell.col_index;
+        if (typeof colIndex !== 'number' || !Number.isInteger(colIndex) || colIndex < 1 || colIndex > columnCount) {
+          return false;
+        }
+        continue;
+      }
+
+      if (rowspan < 1 || rowspan > rowCount || colspan < 1 || colspan > columnCount) return false;
+      if (cell.width !== undefined && (!Number.isFinite(cell.width) || cell.width <= 0)) return false;
+    }
+  }
+
+  return [...getTableVisualCellPositions(table).values()].every((position) =>
+    position.rowStart >= 0
+    && position.rowEnd < rowCount
+    && position.colStart >= 0
+    && position.colEnd < columnCount
+  );
+}
+
 function createHiddenCell(colIndex: number): TableCell {
   return {
     text: '',
@@ -327,12 +391,12 @@ export function flattenTextToString(text: string | RichText[]): string {
 
 /**
  * 序列化表格单元格为后端格式
- * 将富文本数组的 text 字段转换为纯字符串
+ * 保留富文本数组，确保单元格内部格式可以跨保存恢复
  * 
  * @param cell 前端单元格数据
  * @param colIndex 列索引(从1开始)
  * @param defaultWidth 默认宽度(磅)
- * @returns 序列化后的单元格（text为纯字符串）
+ * @returns 序列化后的单元格（text保留字符串或富文本数组）
  */
 export function serializeTableCell(
   cell: TableCell,
@@ -376,7 +440,7 @@ export function serializeTableCell(
   }
   
   return {
-    text: flattenTextToString(cell.text), // 转换为纯字符串
+    text: cell.text,
     rowspan: cell.rowspan ?? 1,
     colspan: cell.colspan ?? 1,
     col_index: cell.col_index !== undefined ? cell.col_index : colIndex,
@@ -388,7 +452,7 @@ export function serializeTableCell(
 
 /**
  * 序列化表格块为后端格式
- * 将所有单元格的 text 从富文本数组转换为纯字符串
+ * 保留单元格富文本内容，并补齐后端所需的单元格字段
  * 
  * @param table 表格块
  * @returns 序列化后的表格块
@@ -908,7 +972,7 @@ export function deleteTableColumn(table: TableBlock, colIndex: number): TableBlo
  * - 主单元格(左上角)保留完整的字段信息
  * - 被合并的单元格标记为rowspan=0, colspan=0, text=''
  * - 保留所有单元格的col_index
- * - 合并后的文本统一为纯字符串格式
+ * - 合并后的文本在包含富文本时保留片段样式
  * 
  * @param table 表格块
  * @param startRow 起始行
@@ -1006,6 +1070,8 @@ export function mergeCellsByVisualBounds(
   
   // 收集所有被合并单元格的文本内容
   const displayTexts: string[] = [];
+  const mergedRichText: RichText[] = [];
+  let hasRichText = false;
   
   // 辅助函数：将 text 字段规范化为纯字符串
   const normalizeText = (text: string | RichText[]): string => {
@@ -1027,7 +1093,29 @@ export function mergeCellsByVisualBounds(
         && position.colEnd <= selectionBounds.colEnd;
       if (isContained) {
         const text = normalizeText(cell.text);
-        if (text.trim()) displayTexts.push(text.trim());
+        if (text.trim()) {
+          displayTexts.push(text.trim());
+          if (Array.isArray(cell.text)) {
+            if (!hasRichText) {
+              displayTexts.slice(0, -1).forEach((previousText) => {
+                if (mergedRichText.length > 0) {
+                  mergedRichText.push({ text: ' ', style: {} });
+                }
+                mergedRichText.push({ text: previousText, style: {} });
+              });
+            }
+            hasRichText = true;
+            if (mergedRichText.length > 0) {
+              mergedRichText.push({ text: ' ', style: {} });
+            }
+            mergedRichText.push(...cell.text);
+          } else if (hasRichText) {
+            if (mergedRichText.length > 0) {
+              mergedRichText.push({ text: ' ', style: {} });
+            }
+            mergedRichText.push({ text: text.trim(), style: {} });
+          }
+        }
       }
     });
   });
@@ -1045,12 +1133,13 @@ export function mergeCellsByVisualBounds(
 
       if (key === primaryKey) {
         // 主单元格：设置完整的标准格式
-        // 合并后的文本统一为纯字符串格式
+        // 合并后的文本在包含富文本时保留片段样式
         const mergedText = displayTexts.join(' ');
+        const mergedContent = hasRichText ? mergedRichText : mergedText;
         
         // 构建标准格式的单元格对象
         return {
-          text: mergedText || normalizeText(cell.text),
+          text: mergedContent.length > 0 ? mergedContent : normalizeText(cell.text),
           rowspan: rowSpan,
           colspan: colSpan,
           col_index: colIdx + 1, // 列索引从1开始
@@ -1226,9 +1315,9 @@ export function validateBlock(block: Partial<DocumentBlock>): boolean {
     case 'table': {
       const table = block as Partial<TableBlock>;
       return !!(
-        table.metadata?.cols &&
-        table.metadata?.rows &&
-        Array.isArray(table.content?.rows)
+        table.metadata &&
+        table.content &&
+        validateTableStructure(table as TableBlock)
       );
     }