feat(编辑器): 增强有序列表编辑能力，优化内容格式管理

- 新增有序列表辅助函数（getEditorTextWithLineBreaks、getNextOrderedListNumber、normalizeOrderedListNumbers）
- 实现 Enter 键自动生成下一行有序列表项
- 自动修正已有有序列表编号，保持序列连贯性
- 在 RichTextEditor 中添加 currentContentFormat 和 onContentFormatChange 属性
- 在 RichTextToolbar 中新增内容格式选择器（段落、有序列表、标题等）
- 扩展工具栏样式，支持内容格式选择下拉菜单
- 优化编辑器键盘处理逻辑，增强有序列表输入交互体验
- 更新 editor.ts 类型定义和 editorStore.ts 状态管理，支持新的格式管理流程

src/components/Editor/RichTextEditor/RichTextEditor.tsx

@@ -13,6 +13,60 @@ import { richTextToHtml, htmlToRichText } from '../../../utils/richTextConverter
 import { RichTextToolbar } from './RichTextToolbar';
 import './RichTextEditor.css';
 
+export function getEditorTextWithLineBreaks(node: Node): string {
+  if (node.nodeType === 3) {
+    return node.textContent || '';
+  }
+
+  if (node.nodeType !== 1 && node.nodeType !== 11) {
+    return '';
+  }
+
+  const element = node as HTMLElement;
+  if (element.tagName === 'BR') {
+    return '\n';
+  }
+
+  const text = Array.from(node.childNodes).map(getEditorTextWithLineBreaks).join('');
+  const blockTags = new Set(['DIV', 'P', 'LI']);
+  return element.tagName && blockTags.has(element.tagName) ? `${text}\n` : text;
+}
+
+export function getNextOrderedListNumber(text: string): number {
+  const itemNumbers = Array.from(text.matchAll(/(?:^|\n)\s*(\d+)\.(?=\s|$)/g))
+    .map((match) => Number(match[1]))
+    .filter(Number.isFinite);
+
+  return itemNumbers.length > 0 ? Math.max(...itemNumbers) + 1 : 1;
+}
+
+export function normalizeOrderedListNumbers(root: HTMLElement): boolean {
+  const walker = root.ownerDocument.createTreeWalker(root, 4);
+  let itemNumber = 0;
+  let changed = false;
+  let textNode = walker.nextNode();
+
+  while (textNode) {
+    const originalText = textNode.textContent || '';
+    const normalizedText = originalText.replace(
+      /(^|\n)(\s*)\d+\.(?=\s|$)/g,
+      (_match, lineStart: string, indent: string) => {
+        itemNumber += 1;
+        return `${lineStart}${indent}${itemNumber}.`;
+      }
+    );
+
+    if (normalizedText !== originalText) {
+      textNode.textContent = normalizedText;
+      changed = true;
+    }
+
+    textNode = walker.nextNode();
+  }
+
+  return changed;
+}
+
 // ══════════════════════════════════════════════════════════════════════════════
 // Component Props
 // ══════════════════════════════════════════════════════════════════════════════
@@ -34,6 +88,10 @@ export interface RichTextEditorProps {
   autoFocus?: boolean;
   /** 失焦回调 */
   onBlur?: () => void;
+  /** 当前 block 内容格式 */
+  currentContentFormat?: 'paragraph' | 'ordered-list' | `heading-${1 | 2 | 3 | 4 | 5 | 6}`;
+  /** block 内容格式变更回调 */
+  onContentFormatChange?: (format: 'paragraph' | 'ordered-list' | `heading-${1 | 2 | 3 | 4 | 5 | 6}`) => void;
   /** 对齐方式变更回调（用于段落块） */
   onAlignChange?: (align: 'left' | 'center' | 'right' | 'justify') => void;
   /** 当前对齐方式（用于初始化工具栏） */
@@ -83,6 +141,8 @@ export const RichTextEditor: React.FC<RichTextEditorProps> = ({
   baseStyle = {},
   autoFocus = false,
   onBlur,
+  currentContentFormat,
+  onContentFormatChange,
   onAlignChange,
   currentAlign,
   tableContext,
@@ -118,6 +178,15 @@ export const RichTextEditor: React.FC<RichTextEditorProps> = ({
     }
   }, [value, baseStyle.fontSize, baseStyle.fontFamily]);
 
+  // ── 修正已有有序列表编号 ───────────────────────────────────────────────────
+  useEffect(() => {
+    if (currentContentFormat !== 'ordered-list' || !editorRef.current || !onChange) return;
+
+    if (normalizeOrderedListNumbers(editorRef.current)) {
+      onChange(htmlToRichText(editorRef.current.innerHTML));
+    }
+  }, [currentContentFormat, onChange, value]);
+
   // ── 自动聚焦 ───────────────────────────────────────────────────────────────
   useEffect(() => {
     if (autoFocus && editorRef.current && !readOnly) {
@@ -132,10 +201,14 @@ export const RichTextEditor: React.FC<RichTextEditorProps> = ({
     // 标记正在输入
     isFormattingRef.current = true;
     
+    if (currentContentFormat === 'ordered-list') {
+      normalizeOrderedListNumbers(editorRef.current);
+    }
+
     const html = editorRef.current.innerHTML;
     const richText = htmlToRichText(html);
     onChange(richText);
-  }, [onChange]);
+  }, [currentContentFormat, onChange]);
 
   // ── 处理格式变更(工具栏修改) ──────────────────────────────────────────────
   const handleFormatChange = useCallback(() => {
@@ -168,6 +241,28 @@ export const RichTextEditor: React.FC<RichTextEditorProps> = ({
 
   // ── 处理键盘快捷键 ─────────────────────────────────────────────────────────
   const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && currentContentFormat === 'ordered-list' && !e.nativeEvent.isComposing) {
+      e.preventDefault();
+
+      const selection = window.getSelection();
+      if (!editorRef.current || !selection || selection.rangeCount === 0) return;
+
+      const editorText = getEditorTextWithLineBreaks(editorRef.current);
+      const nextNumber = getNextOrderedListNumber(editorText);
+
+      document.execCommand('insertText', false, `\n${nextNumber}. `);
+      normalizeOrderedListNumbers(editorRef.current);
+
+      const endRange = document.createRange();
+      endRange.selectNodeContents(editorRef.current);
+      endRange.collapse(false);
+      selection.removeAllRanges();
+      selection.addRange(endRange);
+
+      handleInput();
+      return;
+    }
+
     // 单行模式禁止换行
     if (singleLine && e.key === 'Enter') {
       e.preventDefault();
@@ -194,7 +289,7 @@ export const RichTextEditor: React.FC<RichTextEditorProps> = ({
           break;
       }
     }
-  }, [singleLine, handleInput]);
+  }, [singleLine, currentContentFormat, handleInput]);
 
   // ── 处理选中文本(显示工具栏) ───────────────────────────────────────────────
   const handleMouseUp = useCallback(() => {
@@ -298,6 +393,8 @@ export const RichTextEditor: React.FC<RichTextEditorProps> = ({
           position={toolbarPosition}
           onClose={() => setShowToolbar(false)}
           onFormat={handleFormatChange}
+          currentContentFormat={currentContentFormat}
+          onContentFormatChange={onContentFormatChange}
           onAlignChange={onAlignChange}
           currentAlign={currentAlign}
           tableContext={tableContext}

src/components/Editor/RichTextEditor/RichTextToolbar.css

@@ -69,3 +69,13 @@
   flex-shrink: 0;
 }
 
+.content-format-select {
+  width: 96px;
+}
+
+.content-format-option {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+

src/components/Editor/RichTextEditor/RichTextToolbar.tsx

@@ -9,13 +9,14 @@
  */
 
 import React, { useEffect, useRef, useState, useCallback } from 'react';
-import { Button, Tooltip, InputNumber, Popover } from 'antd';
+import { Button, Tooltip, InputNumber, Popover, Select } from 'antd';
 import {
   BoldOutlined,
   ItalicOutlined,
   UnderlineOutlined,
   FontSizeOutlined,
   FontColorsOutlined,
+  OrderedListOutlined,
   AlignLeftOutlined,
   AlignCenterOutlined,
   AlignRightOutlined,
@@ -37,6 +38,10 @@ export interface RichTextToolbarProps {
   onClose: () => void;
   /** 格式变更回调 */
   onFormat: () => void;
+  /** 当前 block 内容格式 */
+  currentContentFormat?: 'paragraph' | 'ordered-list' | `heading-${1 | 2 | 3 | 4 | 5 | 6}`;
+  /** block 内容格式变更回调 */
+  onContentFormatChange?: (format: 'paragraph' | 'ordered-list' | `heading-${1 | 2 | 3 | 4 | 5 | 6}`) => void;
   /** 对齐方式变更回调（用于段落块） */
   onAlignChange?: (align: 'left' | 'center' | 'right' | 'justify') => void;
   /** 当前对齐方式（用于初始化） */
@@ -259,6 +264,28 @@ function hasFormat(tagName?: string, styleCheck?: (el: HTMLElement) => boolean):
   return false;
 }
 
+type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+type ContentFormat = 'paragraph' | 'ordered-list' | `heading-${HeadingLevel}`;
+
+function getTextWithLineBreaks(node: Node): string {
+  if (node.nodeType === Node.TEXT_NODE) {
+    return node.textContent || '';
+  }
+
+  if (node.nodeType !== Node.ELEMENT_NODE && node.nodeType !== Node.DOCUMENT_FRAGMENT_NODE) {
+    return '';
+  }
+
+  const element = node as HTMLElement;
+  if (element.tagName === 'BR') {
+    return '\n';
+  }
+
+  const text = Array.from(node.childNodes).map(getTextWithLineBreaks).join('');
+  const blockTags = new Set(['DIV', 'P', 'LI', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6']);
+  return element.tagName && blockTags.has(element.tagName) ? `${text}\n` : text;
+}
+
 // ══════════════════════════════════════════════════════════════════════════════
 // Component
 // ══════════════════════════════════════════════════════════════════════════════
@@ -267,6 +294,8 @@ export const RichTextToolbar: React.FC<RichTextToolbarProps> = ({
   position,
   onClose,
   onFormat,
+  currentContentFormat,
+  onContentFormatChange,
   onAlignChange,
   currentAlign,
   tableContext,
@@ -364,9 +393,12 @@ export const RichTextToolbar: React.FC<RichTextToolbarProps> = ({
   // ── 点击外部关闭 ───────────────────────────────────────────────────────────
   useEffect(() => {
     const handleClickOutside = (e: MouseEvent) => {
-      if (toolbarRef.current && !toolbarRef.current.contains(e.target as Node)) {
+      const target = e.target as Element;
+      const isToolbarPopup = target.closest('.ant-select-dropdown, .ant-popover');
+
+      if (toolbarRef.current && !toolbarRef.current.contains(target) && !isToolbarPopup) {
         const editor = document.querySelector('.rich-text-editor');
-        if (!editor?.contains(e.target as Node)) {
+        if (!editor?.contains(target)) {
           onClose();
         }
       }
@@ -519,6 +551,45 @@ export const RichTextToolbar: React.FC<RichTextToolbarProps> = ({
     // 非表格模式：暂不支持，但保留接口
   }, [isTableMode, tableContext]);
 
+  // ── 处理内容格式 ──────────────────────────────────────────────────────────
+  const handleContentFormatChange = useCallback((format: ContentFormat) => {
+    if (isTableMode || !restoreSelection(savedRangeRef.current)) {
+      return;
+    }
+
+    const selection = window.getSelection();
+    if (!selection || selection.rangeCount === 0 || selection.isCollapsed) {
+      return;
+    }
+
+    if (format !== 'ordered-list') {
+      onContentFormatChange?.(format);
+      return;
+    } else {
+      const range = selection.getRangeAt(0);
+      const selectedContent = range.cloneContents();
+      const selectedText = getTextWithLineBreaks(selectedContent).replace(/\n+$/, '');
+      const lines = selectedText.split(/\r?\n/);
+      let itemNumber = 0;
+      const numberedText = lines.map((line) => {
+        if (!line.trim()) return '';
+        itemNumber += 1;
+        return `${itemNumber}. ${line.replace(/^\s*\d+\.\s+/, '')}`;
+      }).join('\n');
+
+      range.deleteContents();
+      const textNode = document.createTextNode(numberedText);
+      range.insertNode(textNode);
+      range.selectNodeContents(textNode);
+      selection.removeAllRanges();
+      selection.addRange(range);
+    }
+
+    savedRangeRef.current = saveSelection();
+    onFormat();
+    requestAnimationFrame(() => onContentFormatChange?.('ordered-list'));
+  }, [isTableMode, onContentFormatChange, onFormat]);
+
   // ── 检查格式状态 ───────────────────────────────────────────────────────────
   const isActive = useCallback((tagName: string): boolean => {
     if (isTableMode) {
@@ -552,6 +623,36 @@ export const RichTextToolbar: React.FC<RichTextToolbarProps> = ({
       onMouseDown={handleMouseDown}
     >
       <div className="toolbar-content">
+        {/* 内容格式 */}
+        {!isTableMode && (
+          <Tooltip title="内容格式">
+            <Select<ContentFormat>
+              className="content-format-select"
+              size="small"
+              placeholder="格式"
+              value={currentContentFormat}
+              onChange={handleContentFormatChange}
+              options={[
+                { value: 'paragraph', label: '正文' },
+                { value: 'heading-1', label: '1级标题' },
+                { value: 'heading-2', label: '2级标题' },
+                { value: 'heading-3', label: '3级标题' },
+                { value: 'heading-4', label: '4级标题' },
+                { value: 'heading-5', label: '5级标题' },
+                { value: 'heading-6', label: '6级标题' },
+                {
+                  value: 'ordered-list',
+                  label: (
+                    <span className="content-format-option">
+                      <OrderedListOutlined /> 有序列表
+                    </span>
+                  ),
+                },
+              ]}
+            />
+          </Tooltip>
+        )}
+
         {/* 基本文本格式 */}
         <div className="toolbar-group">
           <Tooltip title="加粗 (Ctrl+B)">

src/components/Editor/blocks/HeadingBlock.tsx

@@ -26,6 +26,7 @@ export const HeadingBlock: React.FC<HeadingBlockProps> = ({
   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 blocks = useEditorStore((state) => state.blocks);
@@ -64,6 +65,44 @@ export const HeadingBlock: React.FC<HeadingBlockProps> = ({
     [block.id, block.style, updateBlock]
   );
 
+  const handleContentFormatChange = useCallback(async (
+    format: 'paragraph' | 'ordered-list' | `heading-${1 | 2 | 3 | 4 | 5 | 6}`
+  ) => {
+    const isParagraph = format === 'paragraph' || format === 'ordered-list';
+    const isOrderedList = format === 'ordered-list';
+    const level = isParagraph
+      ? 0
+      : Number(format.split('-')[1]) as 1 | 2 | 3 | 4 | 5 | 6;
+    const style = block.style.align ? { align: block.style.align } : {};
+
+    updateBlock(block.id, isParagraph
+      ? {
+          type: 'paragraph',
+          level: 0,
+          word_style: 'Normal',
+          style,
+          metadata: {
+            parent_heading_id: block.metadata.parent_id ?? null,
+            ...(isOrderedList ? { list_type: 'ordered' } : {}),
+          },
+        }
+      : {
+          level,
+          word_style: `Heading ${level}`,
+          style,
+        }
+    );
+
+    try {
+      await saveBlock(block.id);
+      message.success(
+        isOrderedList ? '已设为有序列表' : isParagraph ? '已设为正文' : `已设为${level}级标题`
+      );
+    } catch (error) {
+      message.error(error instanceof Error ? error.message : '标题格式更新失败');
+    }
+  }, [block.id, block.metadata.parent_id, block.style.align, saveBlock, updateBlock]);
+
   // ── 块操作回调 ──────────────────────────────────────────────────────────
 
   const handleDelete = useCallback(async () => {
@@ -245,6 +284,8 @@ export const HeadingBlock: React.FC<HeadingBlockProps> = ({
         <RichTextEditor
           value={block.content}
           onChange={handleChange}
+          currentContentFormat={`heading-${block.level}`}
+          onContentFormatChange={handleContentFormatChange}
           onAlignChange={handleAlignChange}
           currentAlign={block.style?.align}
           readOnly={readOnly}

src/components/Editor/blocks/ParagraphBlock.tsx

@@ -26,6 +26,7 @@ export const ParagraphBlock: React.FC<ParagraphBlockProps> = ({
   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 blocks = useEditorStore((state) => state.blocks);
@@ -64,6 +65,43 @@ export const ParagraphBlock: React.FC<ParagraphBlockProps> = ({
     [block.id, block.style, updateBlock]
   );
 
+  const handleContentFormatChange = useCallback(async (
+    format: 'paragraph' | 'ordered-list' | `heading-${1 | 2 | 3 | 4 | 5 | 6}`
+  ) => {
+    if (format === 'paragraph' || format === 'ordered-list') {
+      updateBlock(block.id, {
+        metadata: {
+          ...block.metadata,
+          list_type: format === 'ordered-list' ? 'ordered' : undefined,
+        },
+      });
+
+      try {
+        await saveBlock(block.id);
+      } catch (error) {
+        message.error(error instanceof Error ? error.message : '列表格式更新失败');
+      }
+      return;
+    }
+
+    const level = Number(format.split('-')[1]) as 1 | 2 | 3 | 4 | 5 | 6;
+    const style = block.style.align ? { align: block.style.align } : {};
+    updateBlock(block.id, {
+      type: 'heading',
+      level,
+      word_style: `Heading ${level}`,
+      style,
+      metadata: { parent_id: null },
+    });
+
+    try {
+      await saveBlock(block.id);
+      message.success(`已设为${level}级标题`);
+    } catch (error) {
+      message.error(error instanceof Error ? error.message : '标题格式更新失败');
+    }
+  }, [block.id, block.metadata, block.style.align, saveBlock, updateBlock]);
+
   // ── 块操作回调 ──────────────────────────────────────────────────────────
 
   const handleDelete = useCallback(async () => {
@@ -243,6 +281,12 @@ export const ParagraphBlock: React.FC<ParagraphBlockProps> = ({
         <RichTextEditor
           value={block.content}
           onChange={handleChange}
+          currentContentFormat={
+            (block.metadata as Record<string, unknown>).list_type === 'ordered'
+              ? 'ordered-list'
+              : 'paragraph'
+          }
+          onContentFormatChange={handleContentFormatChange}
           onAlignChange={handleAlignChange}
           currentAlign={block.style?.align}
           readOnly={readOnly}

src/stores/editorStore.ts

@@ -409,11 +409,33 @@ export const useEditorStore = create<EditorStore>((set, get) => ({
             // 获取该块的重试次数
             const attempts = retryAttempts.get(block.id) || 0;
             
-            // 序列化表格块的content（将富文本数组转为纯字符串）
+            // 序列化块内容（将富文本数组转为纯字符串，并提取样式到style字段）
             let contentToSave = block.content;
+            let styleToSave = block.style;
+            
             if (block.type === 'table') {
               const serializedTable = serializeTableBlock(block as TableBlock);
               contentToSave = serializedTable.content;
+            } else if (block.type === 'heading' || block.type === 'paragraph') {
+              // 对于标题和段落块，如果content是富文本数组，需要序列化
+              if (Array.isArray(block.content)) {
+                // 提取纯文本
+                contentToSave = block.content.map(seg => seg.text).join('');
+                
+                // 如果所有片段的样式一致，提取到块级style
+                const allSegments = block.content;
+                if (allSegments.length > 0) {
+                  const firstStyle = allSegments[0].style;
+                  const allSameStyle = allSegments.every(seg => 
+                    JSON.stringify(seg.style) === JSON.stringify(firstStyle)
+                  );
+                  
+                  if (allSameStyle && Object.keys(firstStyle).length > 0) {
+                    // 所有片段样式一致，合并到块级style
+                    styleToSave = { ...block.style, ...firstStyle };
+                  }
+                }
+              }
             }
             
             try {
@@ -422,7 +444,7 @@ export const useEditorStore = create<EditorStore>((set, get) => ({
                 block.id, 
                 {
                   content: contentToSave as any,
-                  style: block.style,
+                  style: styleToSave,
                   word_style: block.word_style,
                   metadata: block.metadata,
                 },
@@ -617,11 +639,33 @@ export const useEditorStore = create<EditorStore>((set, get) => ({
         // 使用并发限制器重试保存
         const tasks = blocksToRetry.map(block => 
           saveConcurrencyLimit(() => {
-            // 序列化表格块的content（将富文本数组转为纯字符串）
+            // 序列化块内容（将富文本数组转为纯字符串，并提取样式到style字段）
             let contentToSave = block.content;
+            let styleToSave = block.style;
+            
             if (block.type === 'table') {
               const serializedTable = serializeTableBlock(block as TableBlock);
               contentToSave = serializedTable.content;
+            } else if (block.type === 'heading' || block.type === 'paragraph') {
+              // 对于标题和段落块，如果content是富文本数组，需要序列化
+              if (Array.isArray(block.content)) {
+                // 提取纯文本
+                contentToSave = block.content.map(seg => seg.text).join('');
+                
+                // 如果所有片段的样式一致，提取到块级style
+                const allSegments = block.content;
+                if (allSegments.length > 0) {
+                  const firstStyle = allSegments[0].style;
+                  const allSameStyle = allSegments.every(seg => 
+                    JSON.stringify(seg.style) === JSON.stringify(firstStyle)
+                  );
+                  
+                  if (allSameStyle && Object.keys(firstStyle).length > 0) {
+                    // 所有片段样式一致，合并到块级style
+                    styleToSave = { ...block.style, ...firstStyle };
+                  }
+                }
+              }
             }
             
             return blockService.updateBlock(
@@ -629,7 +673,7 @@ export const useEditorStore = create<EditorStore>((set, get) => ({
               block.id, 
               {
                 content: contentToSave as any,
-                style: block.style,
+                style: styleToSave,
                 word_style: block.word_style,
                 metadata: block.metadata,
               },
@@ -1125,6 +1169,8 @@ export const useEditorStore = create<EditorStore>((set, get) => ({
       }
       
       await blockService.updateBlock(documentId, id, {
+        type: block.type,
+        level: block.level,
         content: contentToSave as any, // 类型断言：不同block类型的content类型不同
         style: block.style,
         word_style: block.word_style,

src/types/editor.ts

@@ -89,6 +89,7 @@ export interface ParagraphBlock extends BaseBlock {
   content: string | RichText[];
   metadata: {
     parent_heading_id: string | null;
+    list_type?: 'ordered';
   };
 }
 
@@ -266,6 +267,8 @@ export interface GetBlockResponse {
  * 更新block的API请求（部分字段）
  */
 export interface UpdateBlockRequest {
+  type?: BlockType;
+  level?: number;
   content?: string | RichText[] | TableContent;
   style?: StyleOverrides;
   word_style?: string;
@@ -343,4 +346,4 @@ export type PartialBlock = Partial<DocumentBlock> & {
 /**
  * Block更新参数
  */
-export type BlockUpdate = Partial<Omit<DocumentBlock, 'id' | 'type'>>;
+export type BlockUpdate = Partial<Omit<DocumentBlock, 'id'>>;