feat(编辑器): 优化富文本工具栏显隐逻辑与分层管理

- 重构工具栏可见性控制，基于编辑器悬停、焦点、文本选中等多个状态管理
- 增强编辑器与工具栏交互，添加悬停延迟防抖逻辑避免闪烁
- 调整工具栏 DOM 位置至编辑内容之后，防止 contenteditable 重绘覆盖
- 改进编辑器层级管理，添加 position/z-index/isolation 样式确保正确堆叠顺序
- 扩展 RichTextEditor 组件 props，支持表格选区可视范围传递
- 优化编辑器焦点与文本选中状态追踪，完善点击外部区域的失焦处理
- 增加编辑器元素引用传递给工具栏，便于位置计算与交互判断

src/components/Editor/RichTextEditor/RichTextEditor.css

@@ -20,6 +20,8 @@
 }
 
 .rich-text-editor {
+  position: relative;
+  z-index: 0;
   width: 100%;
   outline: none;
   white-space: pre-wrap;
@@ -27,6 +29,7 @@
   word-break: break-word;
   min-height: 1.5em;
   transition: all 0.2s ease;
+  isolation: isolate;
 }
 
 /* 可编辑状态 */

src/components/Editor/RichTextEditor/RichTextEditor.tsx

@@ -84,6 +84,12 @@ export interface RichTextEditorProps {
       endRow: number;
       endCol: number;
     } | null;
+    selectedVisualRange?: {
+      rowStart: number;
+      rowEnd: number;
+      colStart: number;
+      colEnd: number;
+    } | null;
     onStyleChange: (styleUpdates: Partial<TableCellType['style']>) => void;
   };
   /** 是否显示左侧格式工具按钮 */
@@ -131,18 +137,90 @@ export const RichTextEditor: React.FC<RichTextEditorProps> = ({
   tableContext,
   hasContent,
 }) => {
-  const editorRef = useRef<HTMLDivElement>(null);
+  const editorRef = useRef<HTMLDivElement | null>(null);
+  const [editorElement, setEditorElement] = useState<HTMLDivElement | null>(null);
+  const [isEditorHovered, setIsEditorHovered] = useState(false);
+  const [isToolbarHovered, setIsToolbarHovered] = useState(false);
+  const [isEditorFocused, setIsEditorFocused] = useState(false);
+  const [hasTextSelection, setHasTextSelection] = useState(false);
   const [toolbarPosition, setToolbarPosition] = useState({ top: 0, left: -40 });
   const isComposingRef = useRef(false);
   const isFormattingRef = useRef(false); // 标记正在格式化,避免被value更新覆盖
   const formatFrameRef = useRef<number | null>(null);
+  const toolbarHoverTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const handleEditorRef = useCallback((element: HTMLDivElement | null) => {
+    editorRef.current = element;
+    setEditorElement(element);
+  }, []);
 
   useEffect(() => {
     return () => {
       if (formatFrameRef.current !== null) {
         cancelAnimationFrame(formatFrameRef.current);
       }
+      if (toolbarHoverTimeoutRef.current !== null) {
+        clearTimeout(toolbarHoverTimeoutRef.current);
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    if (readOnly) return;
+
+    const handleDocumentMouseDown = (event: MouseEvent) => {
+      const target = event.target;
+      if (!(target instanceof Element)) return;
+
+      const isEditorClick = editorRef.current?.contains(target) ?? false;
+      const isToolbarClick = Boolean(target.closest(
+        '.rich-text-toolbar, .rich-text-toolbar-dropdown, .ant-popover, .ant-dropdown, .ant-select-dropdown',
+      ));
+
+      if (!isEditorClick && !isToolbarClick) {
+        setIsEditorFocused(false);
+        setHasTextSelection(false);
+      }
     };
+
+    document.addEventListener('mousedown', handleDocumentMouseDown);
+    return () => document.removeEventListener('mousedown', handleDocumentMouseDown);
+  }, [readOnly]);
+
+  const handleToolbarHoverChange = useCallback((hovered: boolean) => {
+    if (toolbarHoverTimeoutRef.current !== null) {
+      clearTimeout(toolbarHoverTimeoutRef.current);
+      toolbarHoverTimeoutRef.current = null;
+    }
+
+    if (hovered) {
+      setIsEditorHovered(false);
+      setIsToolbarHovered(true);
+      return;
+    }
+
+    toolbarHoverTimeoutRef.current = setTimeout(() => {
+      setIsToolbarHovered(false);
+      toolbarHoverTimeoutRef.current = null;
+    }, 300);
+  }, []);
+
+  const handleEditorHoverChange = useCallback((hovered: boolean) => {
+    if (toolbarHoverTimeoutRef.current !== null) {
+      clearTimeout(toolbarHoverTimeoutRef.current);
+      toolbarHoverTimeoutRef.current = null;
+    }
+
+    if (hovered) {
+      setIsEditorHovered(true);
+      return;
+    }
+
+    toolbarHoverTimeoutRef.current = setTimeout(() => {
+      setIsEditorHovered(false);
+      setIsToolbarHovered(false);
+      toolbarHoverTimeoutRef.current = null;
+    }, 300);
   }, []);
 
   // ── 初始化内容 ─────────────────────────────────────────────────────────────
@@ -298,6 +376,7 @@ export const RichTextEditor: React.FC<RichTextEditorProps> = ({
     
     // 富文本模式：只在有选中文本时显示工具栏
     if (!selection || selection.isCollapsed || !editorRef.current) {
+      setHasTextSelection(false);
       return;
     }
 
@@ -310,12 +389,17 @@ export const RichTextEditor: React.FC<RichTextEditorProps> = ({
       top: 0,
       left: -40,
     });
+    setHasTextSelection(true);
     
   }, [readOnly, tableContext]);
 
   // ── 处理聚焦(表格模式显示工具栏) ─────────────────────────────────────────────
   const handleFocus = useCallback(() => {
-    if (readOnly || !tableContext) return;
+    if (readOnly) return;
+
+    setIsEditorFocused(true);
+
+    if (!tableContext) return;
     
     // 延迟一下，确保光标已经定位
     setTimeout(() => {
@@ -355,24 +439,11 @@ export const RichTextEditor: React.FC<RichTextEditorProps> = ({
 
   return (
     <div className="rich-text-editor-wrapper">
-      {/* 浮动工具栏 */}
-      {!readOnly && hasContent !== false && (
-        <RichTextToolbar
-          position={toolbarPosition}
-          onClose={() => undefined}
-          onFormat={handleFormatChange}
-          currentContentFormat={currentContentFormat}
-          onContentFormatChange={onContentFormatChange}
-          onDelete={onDelete}
-          onAlignChange={onAlignChange}
-          currentAlign={currentAlign}
-          tableContext={tableContext}
-        />
-      )}
-
       {/* 可编辑区域 */}
       <div
-        ref={editorRef}
+        onMouseEnter={() => handleEditorHoverChange(true)}
+        onMouseLeave={() => handleEditorHoverChange(false)}
+        ref={handleEditorRef}
         className={`rich-text-editor ${readOnly ? 'read-only' : ''}`}
         contentEditable={!readOnly}
         suppressContentEditableWarning
@@ -387,6 +458,24 @@ export const RichTextEditor: React.FC<RichTextEditorProps> = ({
         data-placeholder={placeholder}
         style={baseStyle}
       />
+
+      {/* 浮动工具栏放在编辑内容之后，避免 contenteditable 重绘时覆盖面板。 */}
+      {!readOnly && hasContent !== false && (
+        <RichTextToolbar
+          position={toolbarPosition}
+          editorElement={editorElement}
+          visible={isEditorHovered || isToolbarHovered || isEditorFocused || hasTextSelection}
+          onHoverChange={handleToolbarHoverChange}
+          onClose={() => setHasTextSelection(false)}
+          onFormat={handleFormatChange}
+          currentContentFormat={currentContentFormat}
+          onContentFormatChange={onContentFormatChange}
+          onDelete={onDelete}
+          onAlignChange={onAlignChange}
+          currentAlign={currentAlign}
+          tableContext={tableContext}
+        />
+      )}
     </div>
   );
 };

src/components/Editor/RichTextEditor/RichTextToolbar.css

@@ -3,8 +3,8 @@
  */
 
 .rich-text-toolbar {
-  position: absolute;
-  z-index: 1002;
+  position: fixed;
+  z-index: 1100;
   width: 208px;
   top: 0;
   padding: 7px 7px 6px;
@@ -19,7 +19,7 @@
   transition: opacity 0.2s ease;
 }
 
-.rich-text-editor-wrapper:hover .rich-text-toolbar {
+.rich-text-toolbar.visible {
   opacity: 1;
   pointer-events: auto;
 }
@@ -32,10 +32,39 @@
 }
 
 .rich-text-toolbar.expanded {
+  position: relative;
   width: 208px;
   padding: 7px 5px;
   border-radius: 5px;
+  isolation: isolate;
+  z-index: 10001;
+  contain: paint;
+  background-color: #ffffff !important;
+  background-image: none;
+  mix-blend-mode: normal;
   box-shadow: 0 8px 24px rgba(31, 38, 49, 0.16), 0 2px 6px rgba(31, 38, 49, 0.08);
+  opacity: 1 !important;
+  pointer-events: auto;
+}
+
+.rich-text-toolbar-dropdown {
+  z-index: 1100;
+}
+
+.rich-text-toolbar.expanded::before {
+  content: '';
+  position: absolute;
+  z-index: 0;
+  inset: 0;
+  display: block;
+  background: #ffffff;
+  border-radius: inherit;
+  pointer-events: none;
+}
+
+.rich-text-toolbar.expanded > * {
+  position: relative;
+  z-index: 1;
 }
 
 .rich-text-toolbar.expanded .toolbar-row-content {
@@ -378,13 +407,23 @@
 }
 
 .rich-text-alignment-menu .ant-dropdown-menu {
+  position: relative;
+  z-index: 1;
   width: 218px;
+  background: #fff;
   padding: 7px 0;
   border: 1px solid #dfe3e8;
   border-radius: 5px;
   box-shadow: 0 8px 24px rgba(31, 38, 49, 0.16), 0 2px 6px rgba(31, 38, 49, 0.08);
 }
 
+/* 提升 Dropdown 外层容器，而不是只提升菜单内部，避免被主格式面板覆盖。 */
+.rich-text-alignment-menu,
+.rich-text-alignment-menu.ant-dropdown,
+.rich-text-alignment-menu.ant-dropdown-placement-bottomLeft {
+  z-index: 10002 !important;
+}
+
 .rich-text-alignment-menu .ant-dropdown-menu-item {
   min-height: 30px;
   margin: 1px 5px;
@@ -405,6 +444,18 @@
   font-size: 15px;
 }
 
+/* Popover 的层级需要设置在外层容器，避免颜色面板被格式工具栏覆盖。 */
+.rich-text-color-picker,
+.rich-text-color-picker.ant-popover {
+  z-index: 10003 !important;
+}
+
+.rich-text-color-picker .ant-popover-inner {
+  position: relative;
+  z-index: 1;
+  background: #fff;
+}
+
 @keyframes toolbar-fade-in {
   from {
     opacity: 0;

src/components/Editor/RichTextEditor/RichTextToolbar.tsx

@@ -9,6 +9,7 @@
  */
 
 import React, { useEffect, useRef, useState, useCallback } from 'react';
+import { createPortal } from 'react-dom';
 import { Tooltip, InputNumber, Popover, Dropdown } from 'antd';
 import {
   BoldOutlined,
@@ -27,6 +28,7 @@ import {
   VerticalAlignBottomOutlined,
 } from '@ant-design/icons';
 import type { TableBlock, TableCell as TableCellType } from '../../../types/editor';
+import { getTableCellsForVisualBounds, getTableVisualCellPositions } from '../../../utils/blockOperations';
 import './RichTextToolbar.css';
 
 // ══════════════════════════════════════════════════════════════════════════════
@@ -36,6 +38,12 @@ import './RichTextToolbar.css';
 export interface RichTextToolbarProps {
   /** 工具栏位置 */
   position: { top: number; left: number };
+  /** 编辑器元素，用于计算脱离 contenteditable 后的固定定位 */
+  editorElement?: HTMLElement | null;
+  /** 收起状态下是否显示启动按钮 */
+  visible?: boolean;
+  /** 工具栏触发器悬停状态变化 */
+  onHoverChange?: (hovered: boolean) => void;
   /** 关闭回调 */
   onClose: () => void;
   /** 格式变更回调 */
@@ -60,6 +68,12 @@ export interface RichTextToolbarProps {
       endRow: number;
       endCol: number;
     } | null;
+    selectedVisualRange?: {
+      rowStart: number;
+      rowEnd: number;
+      colStart: number;
+      colEnd: number;
+    } | null;
     onStyleChange: (styleUpdates: Partial<TableCellType['style']>) => void;
   };
 }
@@ -155,6 +169,21 @@ function restoreSavedOrCurrentSelection(saved: SavedRange | null, editor?: HTMLE
   return !!selectedEditor && (!editor || selectedEditor === editor);
 }
 
+function normalizeHexColor(color: string | undefined, fallback = '#000000'): string {
+  const normalized = (color || '').trim().replace(/^#/, '');
+  return /^[0-9a-f]{3,8}$/i.test(normalized) ? `#${normalized}` : fallback;
+}
+
+function getCommonCellStyleValue<Key extends keyof TableCellType['style']>(
+  cells: TableCellType[],
+  key: Key,
+): TableCellType['style'][Key] | undefined {
+  if (cells.length === 0) return undefined;
+
+  const firstValue = cells[0].style?.[key];
+  return cells.every((cell) => cell.style?.[key] === firstValue) ? firstValue : undefined;
+}
+
 // ══════════════════════════════════════════════════════════════════════════════
 // Helper: 格式化应用
 // ══════════════════════════════════════════════════════════════════════════════
@@ -262,6 +291,9 @@ type ContentFormat = 'paragraph' | 'ordered-list' | 'unordered-list' | `heading-
 
 export const RichTextToolbar: React.FC<RichTextToolbarProps> = ({
   position,
+  editorElement,
+  visible = false,
+  onHoverChange,
   onClose,
   onFormat,
   currentContentFormat,
@@ -288,9 +320,31 @@ export const RichTextToolbar: React.FC<RichTextToolbarProps> = ({
   // 判断是否处于表格编辑模式
   const isTableMode = !!tableContext;
 
+  const selectedTableCells = isTableMode && tableContext
+    ? (() => {
+        const positions = getTableVisualCellPositions(tableContext.block);
+        const selectedPosition = positions.get(
+          `${tableContext.selectedCell.row}-${tableContext.selectedCell.col}`,
+        );
+        const bounds = tableContext.selectedVisualRange || selectedPosition;
+        return bounds ? getTableCellsForVisualBounds(tableContext.block, bounds) : [];
+      })()
+    : [];
+  const hasSelectedTableCells = selectedTableCells.length > 0;
+  const allSelectedCellsHave = (key: 'bold' | 'italic' | 'underline') => (
+    hasSelectedTableCells && selectedTableCells.every((cell) => cell.style?.[key] === true)
+  );
+  const allSelectedCellsHaveBold = allSelectedCellsHave('bold');
+  const allSelectedCellsHaveItalic = allSelectedCellsHave('italic');
+  const allSelectedCellsHaveUnderline = allSelectedCellsHave('underline');
+  const commonFontSize = getCommonCellStyleValue(selectedTableCells, 'font_size');
+  const commonColor = getCommonCellStyleValue(selectedTableCells, 'color');
+  const commonTextAlign = getCommonCellStyleValue(selectedTableCells, 'align');
+  const commonVerticalAlign = getCommonCellStyleValue(selectedTableCells, 'valign');
+
   const getEditorElement = useCallback(() => (
-    toolbarRef.current?.parentElement?.querySelector<HTMLElement>('.rich-text-editor') ?? null
-  ), []);
+    editorElement ?? null
+  ), [editorElement]);
 
   // 预设颜色
   const presetColors = [
@@ -321,16 +375,14 @@ export const RichTextToolbar: React.FC<RichTextToolbarProps> = ({
 
     if (isTableMode && tableContext) {
       // 表格模式:加载当前单元格的样式
-      const currentCell = tableContext.block.content.rows[tableContext.selectedCell.row]?.cells[tableContext.selectedCell.col];
-      if (currentCell) {
-        const style = currentCell.style || {};
-        setFontSize(style.font_size || 12);
-        setCurrentColor(style.color ? `#${style.color}` : '#000000');
-        setTextAlign(style.align || 'center');
-        setVerticalAlign(style.valign || 'middle');
-        setIsBold(!!style.bold);
-        setIsItalic(!!style.italic);
-        setIsUnderline(!!style.underline);
+      if (hasSelectedTableCells) {
+        setFontSize(commonFontSize || 12);
+        setCurrentColor(normalizeHexColor(commonColor));
+        setTextAlign(commonTextAlign || 'center');
+        setVerticalAlign(commonVerticalAlign || 'middle');
+        setIsBold(allSelectedCellsHaveBold);
+        setIsItalic(allSelectedCellsHaveItalic);
+        setIsUnderline(allSelectedCellsHaveUnderline);
       }
     } else {
       // 如果提供了 currentAlign，使用它
@@ -383,7 +435,20 @@ export const RichTextToolbar: React.FC<RichTextToolbarProps> = ({
     return () => {
       canceled = true;
     };
-  }, [getEditorElement, isTableMode, tableContext, currentAlign]);
+  }, [
+    getEditorElement,
+    isTableMode,
+    tableContext,
+    currentAlign,
+    hasSelectedTableCells,
+    commonFontSize,
+    commonColor,
+    commonTextAlign,
+    commonVerticalAlign,
+    allSelectedCellsHaveBold,
+    allSelectedCellsHaveItalic,
+    allSelectedCellsHaveUnderline,
+  ]);
 
   useEffect(() => {
     if (isTableMode) return;
@@ -407,37 +472,22 @@ export const RichTextToolbar: React.FC<RichTextToolbarProps> = ({
     return () => document.removeEventListener('selectionchange', handleSelectionChange);
   }, [getEditorElement, isTableMode]);
 
-  // ── 点击外部关闭 ───────────────────────────────────────────────────────────
-  useEffect(() => {
-    const handleClickOutside = (e: MouseEvent) => {
-      const target = e.target as Element;
-      const isToolbarPopup = target.closest('.ant-select-dropdown, .ant-popover, .ant-dropdown');
-
-      if (toolbarRef.current && !toolbarRef.current.contains(target) && !isToolbarPopup) {
-        const editor = getEditorElement();
-        if (!editor?.contains(target)) {
-          setIsExpanded(false);
-          onClose();
-        }
-      }
-    };
-
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => document.removeEventListener('mousedown', handleClickOutside);
-  }, [getEditorElement, onClose]);
-
   // ── 切换格式 (Bold, Italic, Underline) ─────────────────────────────────────
   const toggleFormat = useCallback((tagName: string) => {
     if (isTableMode && tableContext) {
       // 表格模式:切换单元格样式
       const styleKey = tagName === 'strong' ? 'bold' : tagName === 'em' ? 'italic' : 'underline';
-      const currentValue = styleKey === 'bold' ? isBold : styleKey === 'italic' ? isItalic : isUnderline;
+      const currentValue = styleKey === 'bold'
+        ? allSelectedCellsHaveBold
+        : styleKey === 'italic'
+          ? allSelectedCellsHaveItalic
+          : allSelectedCellsHaveUnderline;
       
       tableContext.onStyleChange({ [styleKey]: !currentValue });
       
-      if (styleKey === 'bold') setIsBold(!isBold);
-      else if (styleKey === 'italic') setIsItalic(!isItalic);
-      else setIsUnderline(!isUnderline);
+      if (styleKey === 'bold') setIsBold(!currentValue);
+      else if (styleKey === 'italic') setIsItalic(!currentValue);
+      else setIsUnderline(!currentValue);
       
       return;
     }
@@ -458,7 +508,7 @@ export const RichTextToolbar: React.FC<RichTextToolbarProps> = ({
     
     savedRangeRef.current = saveSelection();
     onFormat();
-  }, [getEditorElement, isTableMode, tableContext, isBold, isItalic, isUnderline, onFormat]);
+  }, [getEditorElement, isTableMode, tableContext, allSelectedCellsHaveBold, allSelectedCellsHaveItalic, allSelectedCellsHaveUnderline, onFormat]);
 
   // ── 处理字号变化 ───────────────────────────────────────────────────────────
   const handleFontSizeChange = useCallback((value: number | null) => {
@@ -497,7 +547,10 @@ export const RichTextToolbar: React.FC<RichTextToolbarProps> = ({
     
     if (isTableMode && tableContext) {
       // 表格模式
-      const hexColor = color.replace('#', '');
+      const hexColor = color.trim().replace(/^#/, '').toUpperCase();
+      if (!/^[0-9A-F]{3,8}$/.test(hexColor)) {
+        return;
+      }
       tableContext.onStyleChange({ color: hexColor });
       setTimeout(() => setColorPickerOpen(false), 100);
       return;
@@ -627,7 +680,7 @@ export const RichTextToolbar: React.FC<RichTextToolbarProps> = ({
     e.preventDefault();
   };
 
-  const handleLauncherClick = useCallback(() => {
+  const handleLauncherMouseDown = useCallback(() => {
     if (!isTableMode) {
       const editor = getEditorElement();
       const selection = window.getSelection();
@@ -639,7 +692,6 @@ export const RichTextToolbar: React.FC<RichTextToolbarProps> = ({
         savedRangeRef.current = saveSelection();
       }
     }
-    setIsExpanded(true);
   }, [getEditorElement, isTableMode]);
 
   // ── 渲染 ───────────────────────────────────────────────────────────────────
@@ -677,20 +729,12 @@ export const RichTextToolbar: React.FC<RichTextToolbarProps> = ({
     </div>
   );
 
-  return (
+  const expandedToolbar = (
     <div
       ref={toolbarRef}
-      className={`rich-text-toolbar${isExpanded ? ' expanded' : ' collapsed'}`}
-      style={{
-        top: `${position.top + (isExpanded ? 34 : 0)}px`,
-        left: `${position.left}px`,
-      }}
+      className="rich-text-toolbar expanded"
       onMouseDown={handleMouseDown}
     >
-      {!isExpanded ? (
-        <ToolbarLauncher onClick={handleLauncherClick} />
-      ) : (
-        <>
       {!isTableMode && (
         <>
           <div className="toolbar-row toolbar-row-primary toolbar-row-content">
@@ -738,7 +782,14 @@ export const RichTextToolbar: React.FC<RichTextToolbarProps> = ({
             prefix={<FontSizeOutlined />}
           />
         </Tooltip>
-        <Popover open={colorPickerOpen} onOpenChange={setColorPickerOpen} content={colorContent} trigger="click" placement="bottom">
+        <Popover
+          open={colorPickerOpen}
+          onOpenChange={setColorPickerOpen}
+          content={colorContent}
+          trigger="click"
+          placement="bottom"
+          overlayClassName="rich-text-color-picker"
+        >
           <button type="button" className="toolbar-icon-button" title="文字颜色">
             <FontColorsOutlined style={{ color: currentColor }} />
           </button>
@@ -753,7 +804,9 @@ export const RichTextToolbar: React.FC<RichTextToolbarProps> = ({
             items: alignmentMenuItems,
             selectedKeys: [textAlign],
           }}
-          trigger={['click']}
+          trigger={['hover']}
+          mouseEnterDelay={0}
+          mouseLeaveDelay={0.15}
           placement="bottomLeft"
           overlayClassName="rich-text-alignment-menu"
         >
@@ -781,10 +834,40 @@ export const RichTextToolbar: React.FC<RichTextToolbarProps> = ({
       <div className="toolbar-row toolbar-row-actions toolbar-row-bottom">
         <ToolbarButton title="删除" onClick={handleDelete}><DeleteOutlined /></ToolbarButton>
       </div>
-        </>
-      )}
     </div>
   );
+
+  const toolbar = (
+    <Dropdown
+      open={isExpanded}
+      onOpenChange={(open) => {
+        setIsExpanded(open);
+        if (!open) {
+          setColorPickerOpen(false);
+          onClose();
+        }
+      }}
+      trigger={['click']}
+      placement="bottomLeft"
+      overlayClassName="rich-text-toolbar-dropdown"
+      popupRender={() => expandedToolbar}
+    >
+      <div
+        className={`rich-text-toolbar collapsed${visible ? ' visible' : ''}`}
+        style={{
+          top: `${(editorElement?.getBoundingClientRect().top ?? 0) + position.top}px`,
+          left: `${(editorElement?.getBoundingClientRect().left ?? 0) + position.left}px`,
+        }}
+        onMouseDown={handleLauncherMouseDown}
+        onMouseEnter={() => onHoverChange?.(true)}
+        onMouseLeave={() => onHoverChange?.(false)}
+      >
+        <ToolbarLauncher expanded={isExpanded} />
+      </div>
+    </Dropdown>
+  );
+
+  return typeof document === 'undefined' ? toolbar : createPortal(toolbar, document.body);
 };
 
 interface ToolbarButtonProps {
@@ -813,13 +896,13 @@ function ToolbarButton({ title, active = false, disabled = false, onClick, child
   );
 }
 
-export function ToolbarLauncher({ onClick }: { onClick?: () => void }) {
+export function ToolbarLauncher({ onClick, expanded = false }: { onClick?: () => void; expanded?: boolean }) {
   return (
     <button
       type="button"
       className="toolbar-launch-button"
       aria-label="打开格式工具栏"
-      aria-expanded="false"
+      aria-expanded={expanded}
       title="打开格式工具栏"
       onClick={onClick}
     >

src/components/Editor/blocks/TableBlock.tsx

@@ -4,11 +4,12 @@
  * @module components/Editor/blocks
  */
 
-import React, { useState, useCallback, useRef, useEffect } from 'react';
+import React, { useState, useCallback, useRef, useEffect, useMemo } from 'react';
 import type { TableBlock as TableBlockType, TableCell as TableCellType } from '../../../types/editor';
 import { useEditorStore } from '../../../stores/editorStore';
 import { TableCell } from './TableCell';
 import { TableToolbar } from './TableToolbar';
+import { TableStylePanel } from './TableStylePanel';
 import { TableResizeHandle } from './TableResizeHandle';
 import { useTableResize } from '../../../hooks/useTableResize';
 import { getTableVisualCellPositions } from '../../../utils/blockOperations';
@@ -57,14 +58,20 @@ export const TableBlock: React.FC<TableBlockProps> = ({
   const isSelectingRef = useRef(false);
   const didDragSelectRef = useRef(false);
   const [isSelecting, setIsSelecting] = useState(false);
-  const visualCellPositions = getTableVisualCellPositions(block);
+  const visualCellPositions = useMemo(
+    () => getTableVisualCellPositions(block),
+    [block],
+  );
 
   // ══════════════════════════════════════════════════════════════════════════════
   // 使用表格调整大小Hook
   // ══════════════════════════════════════════════════════════════════════════════
 
   // 准备行高数据
-  const rowHeights = block.content.rows.map(row => row.height || 20);
+  const rowHeights = useMemo(
+    () => block.content.rows.map((row) => row.height || 20),
+    [block.content.rows],
+  );
 
   // 列宽调整回调
   const handleColumnResize = useCallback(
@@ -147,22 +154,23 @@ export const TableBlock: React.FC<TableBlockProps> = ({
     (styleUpdates: Partial<TableCellType['style']>) => {
       if (!selectedCell) return;
 
+      const styleRange = selectedVisualRange || (() => {
+        const position = visualCellPositions.get(getCellKey(selectedCell.row, selectedCell.col));
+        return position || null;
+      })();
+
       const newRows = block.content.rows.map((row, rowIdx) => {
-        // 检查是否在选择范围内
-        const isInRange = selectedRange
-          ? rowIdx >= selectedRange.startRow && rowIdx <= selectedRange.endRow
-          : rowIdx === selectedCell.row;
-        
-        if (!isInRange) return row;
-        
         return {
           ...row,
           cells: row.cells.map((cell, colIdx) => {
-            const isInRangeCol = selectedRange
-              ? colIdx >= selectedRange.startCol && colIdx <= selectedRange.endCol
-              : colIdx === selectedCell.col;
-            
-            if (!isInRangeCol) return cell;
+            const cellPosition = visualCellPositions.get(getCellKey(rowIdx, colIdx));
+            const isInRange = !!styleRange && !!cellPosition
+              && cellPosition.rowStart <= styleRange.rowEnd
+              && cellPosition.rowEnd >= styleRange.rowStart
+              && cellPosition.colStart <= styleRange.colEnd
+              && cellPosition.colEnd >= styleRange.colStart;
+
+            if (!isInRange) return cell;
             
             return {
               ...cell,
@@ -182,7 +190,7 @@ export const TableBlock: React.FC<TableBlockProps> = ({
         },
       });
     },
-    [block, selectedCell, selectedRange, updateBlock]
+    [block, selectedCell, selectedVisualRange, updateBlock, visualCellPositions]
   );
 
   // 处理单元格点击(支持Shift多选)
@@ -327,16 +335,17 @@ export const TableBlock: React.FC<TableBlockProps> = ({
   const colWidths = block.metadata.col_widths;
   
   // 如果没有metadata.col_widths，从content.col_widths推算百分比
-  const effectiveColWidths = colWidths && colWidths.length > 0 
-    ? colWidths 
-    : block.content.col_widths 
-      ? (() => {
-          const totalPt = block.content.col_widths.reduce((sum: number, w: number) => sum + w, 0);
-          return totalPt > 0
-            ? block.content.col_widths.map((w: number) => (w / totalPt) * 100)
-            : block.content.col_widths.map(() => 100 / block.content.col_widths!.length);
-        })()
-      : Array(Math.max(block.metadata.cols, 1)).fill(100 / Math.max(block.metadata.cols, 1));
+  const effectiveColWidths = useMemo(() => {
+    if (colWidths && colWidths.length > 0) return colWidths;
+    if (block.content.col_widths) {
+      const totalPt = block.content.col_widths.reduce((sum, width) => sum + width, 0);
+      return totalPt > 0
+        ? block.content.col_widths.map((width) => (width / totalPt) * 100)
+        : block.content.col_widths.map(() => 100 / block.content.col_widths!.length);
+    }
+    const columnCount = Math.max(block.metadata.cols, 1);
+    return Array(columnCount).fill(100 / columnCount);
+  }, [block.content.col_widths, block.metadata.cols, colWidths]);
 
   return (
     <div className="table-block-wrapper" data-block-id={block.id}>
@@ -355,6 +364,15 @@ export const TableBlock: React.FC<TableBlockProps> = ({
         />
       )}
 
+      {!readOnly && selectedCell && (
+        <TableStylePanel
+          block={block}
+          selectedCell={selectedCell}
+          selectedRange={selectedRange}
+          selectedVisualRange={selectedVisualRange}
+        />
+      )}
+
       {/* 拖动尺寸提示 */}
       {resizeState?.isResizing && currentSizeTooltip && (
         <div
@@ -444,6 +462,7 @@ export const TableBlock: React.FC<TableBlockProps> = ({
                       onMouseEnter={handleCellMouseEnter}
                       tableBlock={block}
                       selectedRange={selectedRange}
+                      selectedVisualRange={selectedVisualRange}
                       onStyleChange={handleCellStyleChange}
                     />
                   );

src/components/Editor/blocks/TableBorderControl.tsx

@@ -6,12 +6,13 @@
  * @module components/Editor/blocks
  */
 
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { Button, Space, ColorPicker, InputNumber } from 'antd';
 import type { Color } from 'antd/es/color-picker';
 import { BorderOutlined } from '@ant-design/icons';
 import type { TableBlock } from '../../../types/editor';
 import { useEditorStore } from '../../../stores/editorStore';
+import { getTableVisualCellPositions } from '../../../utils/blockOperations';
 
 // ══════════════════════════════════════════════════════════════════════════════
 // Component Props
@@ -29,6 +30,12 @@ export interface TableBorderControlProps {
     endRow: number;
     endCol: number;
   } | null;
+  selectedVisualRange?: {
+    rowStart: number;
+    rowEnd: number;
+    colStart: number;
+    colEnd: number;
+  } | null;
 }
 
 // ══════════════════════════════════════════════════════════════════════════════
@@ -45,9 +52,13 @@ export interface TableBorderControlProps {
 export const TableBorderControl: React.FC<TableBorderControlProps> = ({
   block,
   selectedCell,
-  selectedRange,
+  selectedVisualRange,
 }) => {
   const updateBlock = useEditorStore((state) => state.updateBlock);
+  const visualCellPositions = useMemo(
+    () => getTableVisualCellPositions(block),
+    [block],
+  );
   
   // 获取当前选中单元格的边框样式
   const currentCell = block.content.rows[selectedCell.row]?.cells[selectedCell.col];
@@ -58,22 +69,23 @@ export const TableBorderControl: React.FC<TableBorderControlProps> = ({
     border_width?: number;
     border_color?: string;
   }) => {
+    const styleRange = selectedVisualRange || (() => {
+      const position = visualCellPositions.get(`${selectedCell.row}-${selectedCell.col}`);
+      return position || null;
+    })();
+
     const newRows = block.content.rows.map((row, rowIdx) => {
-      // 检查是否在选择范围内
-      const isInRange = selectedRange
-        ? rowIdx >= selectedRange.startRow && rowIdx <= selectedRange.endRow
-        : rowIdx === selectedCell.row;
-      
-      if (!isInRange) return row;
-      
       return {
         ...row,
         cells: row.cells.map((cell, colIdx) => {
-          const isInRangeCol = selectedRange
-            ? colIdx >= selectedRange.startCol && colIdx <= selectedRange.endCol
-            : colIdx === selectedCell.col;
-          
-          if (!isInRangeCol) return cell;
+          const cellPosition = visualCellPositions.get(`${rowIdx}-${colIdx}`);
+          const isInRange = !!styleRange && !!cellPosition
+            && cellPosition.rowStart <= styleRange.rowEnd
+            && cellPosition.rowEnd >= styleRange.rowStart
+            && cellPosition.colStart <= styleRange.colEnd
+            && cellPosition.colEnd >= styleRange.colStart;
+
+          if (!isInRange) return cell;
           
           return {
             ...cell,
@@ -92,7 +104,7 @@ export const TableBorderControl: React.FC<TableBorderControlProps> = ({
         rows: newRows,
       },
     });
-  }, [block, selectedCell, selectedRange, updateBlock]);
+  }, [block, selectedCell, selectedVisualRange, updateBlock, visualCellPositions]);
 
   // 设置边框宽度
   const setBorderWidth = useCallback((border_width: number | null) => {
@@ -103,7 +115,7 @@ export const TableBorderControl: React.FC<TableBorderControlProps> = ({
 
   // 设置边框颜色
   const setBorderColor = useCallback((color: Color) => {
-    const hexColor = color.toHexString().replace('#', '');
+    const hexColor = color.toHexString().replace(/^#/, '').toUpperCase();
     applyBorderStyle({ border_color: hexColor });
   }, [applyBorderStyle]);
 

src/components/Editor/blocks/TableCell.tsx

@@ -42,6 +42,12 @@ export interface TableCellProps {
     endRow: number;
     endCol: number;
   } | null;
+  selectedVisualRange?: {
+    rowStart: number;
+    rowEnd: number;
+    colStart: number;
+    colEnd: number;
+  } | null;
   /** 样式变更回调(用于传递给RichTextEditor) */
   onStyleChange?: (styleUpdates: Partial<TableCellType['style']>) => void;
 }
@@ -71,6 +77,7 @@ export const TableCell: React.FC<TableCellProps> = ({
   onMouseEnter,
   tableBlock,
   selectedRange,
+  selectedVisualRange,
   onStyleChange,
 }) => {
   // 解析样式
@@ -137,6 +144,7 @@ export const TableCell: React.FC<TableCellProps> = ({
           block: tableBlock,
           selectedCell: { row: rowIndex, col: colIndex },
           selectedRange: selectedRange,
+          selectedVisualRange: selectedVisualRange,
           onStyleChange: onStyleChange,
         } : undefined}
       />

src/components/Editor/blocks/TableStylePanel.tsx

@@ -6,7 +6,7 @@
  * @module components/Editor/blocks
  */
 
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { Button, Space, ColorPicker, InputNumber, Select, Divider } from 'antd';
 import type { Color } from 'antd/es/color-picker';
 import {
@@ -24,6 +24,10 @@ import {
 } from '@ant-design/icons';
 import type { TableBlock, TableCell } from '../../../types/editor';
 import { useEditorStore } from '../../../stores/editorStore';
+import {
+  getTableCellsForVisualBounds,
+  getTableVisualCellPositions,
+} from '../../../utils/blockOperations';
 import { TableBorderControl } from './TableBorderControl';
 import './TableStylePanel.css';
 
@@ -43,6 +47,12 @@ export interface TableStylePanelProps {
     endRow: number;
     endCol: number;
   } | null;
+  selectedVisualRange?: {
+    rowStart: number;
+    rowEnd: number;
+    colStart: number;
+    colEnd: number;
+  } | null;
 }
 
 // ══════════════════════════════════════════════════════════════════════════════
@@ -63,31 +73,51 @@ export const TableStylePanel: React.FC<TableStylePanelProps> = ({
   block,
   selectedCell,
   selectedRange,
+  selectedVisualRange,
 }) => {
   const updateBlock = useEditorStore((state) => state.updateBlock);
-  
-  // 获取当前选中单元格的样式
-  const currentCell = block.content.rows[selectedCell.row]?.cells[selectedCell.col];
-  const currentStyle = currentCell?.style || {};
+  const visualCellPositions = useMemo(
+    () => getTableVisualCellPositions(block),
+    [block],
+  );
+  const selectedPosition = visualCellPositions.get(`${selectedCell.row}-${selectedCell.col}`);
+  const styleRange = selectedVisualRange || selectedPosition;
+  const selectedCells = styleRange
+    ? getTableCellsForVisualBounds(block, styleRange)
+    : [];
+  const getCommonStyleValue = <Key extends keyof TableCell['style']>(key: Key) => {
+    if (selectedCells.length === 0) return undefined;
+    const firstValue = selectedCells[0].style?.[key];
+    return selectedCells.every((cell) => cell.style?.[key] === firstValue) ? firstValue : undefined;
+  };
+  const commonBold = selectedCells.length > 0 && selectedCells.every((cell) => cell.style?.bold === true);
+  const commonItalic = selectedCells.length > 0 && selectedCells.every((cell) => cell.style?.italic === true);
+  const commonUnderline = selectedCells.length > 0 && selectedCells.every((cell) => cell.style?.underline === true);
+  const currentStyle = {
+    bold: commonBold,
+    italic: commonItalic,
+    underline: commonUnderline,
+    align: getCommonStyleValue('align'),
+    valign: getCommonStyleValue('valign'),
+    font_size: getCommonStyleValue('font_size'),
+    font_name: getCommonStyleValue('font_name'),
+    color: getCommonStyleValue('color'),
+  };
 
   // 应用样式到选中的单元格或范围
   const applyStyle = useCallback((styleUpdates: Partial<TableCell['style']>) => {
     const newRows = block.content.rows.map((row, rowIdx) => {
-      // 检查是否在选择范围内
-      const isInRange = selectedRange
-        ? rowIdx >= selectedRange.startRow && rowIdx <= selectedRange.endRow
-        : rowIdx === selectedCell.row;
-      
-      if (!isInRange) return row;
-      
       return {
         ...row,
         cells: row.cells.map((cell, colIdx) => {
-          const isInRangeCol = selectedRange
-            ? colIdx >= selectedRange.startCol && colIdx <= selectedRange.endCol
-            : colIdx === selectedCell.col;
-          
-          if (!isInRangeCol) return cell;
+          const cellPosition = visualCellPositions.get(`${rowIdx}-${colIdx}`);
+          const isInRange = !!styleRange && !!cellPosition
+            && cellPosition.rowStart <= styleRange.rowEnd
+            && cellPosition.rowEnd >= styleRange.rowStart
+            && cellPosition.colStart <= styleRange.colEnd
+            && cellPosition.colEnd >= styleRange.colStart;
+
+          if (!isInRange) return cell;
           
           return {
             ...cell,
@@ -106,7 +136,7 @@ export const TableStylePanel: React.FC<TableStylePanelProps> = ({
         rows: newRows,
       },
     });
-  }, [block, selectedCell, selectedRange, updateBlock]);
+  }, [block, styleRange, updateBlock, visualCellPositions]);
 
   // 字体样式切换
   const toggleBold = useCallback(() => {
@@ -140,7 +170,7 @@ export const TableStylePanel: React.FC<TableStylePanelProps> = ({
 
   // 字体颜色
   const setFontColor = useCallback((color: Color) => {
-    const hexColor = color.toHexString().replace('#', '');
+    const hexColor = color.toHexString().replace(/^#/, '').toUpperCase();
     applyStyle({ color: hexColor });
   }, [applyStyle]);
 
@@ -283,6 +313,7 @@ export const TableStylePanel: React.FC<TableStylePanelProps> = ({
           block={block}
           selectedCell={selectedCell}
           selectedRange={selectedRange}
+          selectedVisualRange={selectedVisualRange}
         />
       </Space>
     </div>

src/utils/blockOperations.ts

@@ -172,6 +172,28 @@ export function getTableVisualCellPositions(table: TableBlock): Map<string, Tabl
   return positions;
 }
 
+export function getTableCellsForVisualBounds(
+  table: TableBlock,
+  bounds: TableVisualCellPosition,
+): TableCell[] {
+  const positions = getTableVisualCellPositions(table);
+  const cells: TableCell[] = [];
+
+  for (const [key, position] of positions.entries()) {
+    const intersects = position.rowStart <= bounds.rowEnd
+      && position.rowEnd >= bounds.rowStart
+      && position.colStart <= bounds.colEnd
+      && position.colEnd >= bounds.colStart;
+    if (!intersects) continue;
+
+    const [rowIndex, cellIndex] = key.split('-').map(Number);
+    const cell = table.content.rows[rowIndex]?.cells[cellIndex];
+    if (cell) cells.push(cell);
+  }
+
+  return cells;
+}
+
 function createHiddenCell(colIndex: number): TableCell {
   return {
     text: '',
@@ -1109,116 +1131,62 @@ export function splitCell(
   assertTableIndex(rowIndex, table.content.rows.length, '行');
   assertTableIndex(colIndex, table.metadata.cols, '列');
   const targetCell = table.content.rows[rowIndex]?.cells[colIndex];
-  
+
   if (!targetCell) {
     throw new Error('单元格不存在');
   }
-  
+
   // 如果单元格没有合并,无需拆分
   if (targetCell.rowspan <= 1 && targetCell.colspan <= 1) {
     throw new Error('此单元格未合并,无需拆分');
   }
-  
-  const rowspan = targetCell.rowspan || 1;
-  const colspan = targetCell.colspan || 1;
-  
-  const rows = table.content.rows.map((row, rowIdx) => {
-    const cells = [...row.cells];
-    
-    // 处理主单元格所在的行
-    if (rowIdx === rowIndex) {
-      // 1. 修改主单元格，清除合并标记
-      cells[colIndex] = {
-        ...cells[colIndex],
-        rowspan: 1,
-        colspan: 1,
-        col_index: colIndex + 1,
-        word_style: cells[colIndex].word_style || 'Normal',
-      };
-      
-      // 2. 如果有横向合并（colspan>1），在主单元格后面插入新的空单元格
-      if (colspan > 1) {
-        const newCells: TableCell[] = [];
-        for (let i = 0; i < colspan - 1; i++) {
-          newCells.push({
-            text: '',
-            rowspan: 1,
-            colspan: 1,
-            col_index: colIndex + 2 + i, // col_index从1开始
-            style: {},
-            word_style: 'Normal',
-            width: cells[colIndex].width || 100,
-          });
-        }
-        // 在主单元格后插入新单元格
-        cells.splice(colIndex + 1, 0, ...newCells);
-        
-        // 更新后续单元格的 col_index
-        for (let i = colIndex + colspan; i < cells.length; i++) {
-          cells[i] = {
-            ...cells[i],
-            col_index: (cells[i].col_index || 0) + (colspan - 1),
-          };
-        }
-      }
-      
-      return { cells, height: row.height };
+
+  const positions = getTableVisualCellPositions(table);
+  const targetPosition = positions.get(`${rowIndex}-${colIndex}`);
+  if (!targetPosition) {
+    throw new Error('合并单元格位置无效');
+  }
+
+  const positionedCells: PositionedTableCell[] = [];
+  for (const [key, position] of positions.entries()) {
+    const [currentRow, currentCol] = key.split('-').map(Number);
+    const cell = table.content.rows[currentRow]?.cells[currentCol];
+    if (!cell) continue;
+
+    if (currentRow !== rowIndex || currentCol !== colIndex) {
+      positionedCells.push({ cell, position });
+      continue;
     }
-    
-    // 处理被纵向合并影响的其他行
-    if (rowIdx > rowIndex && rowIdx < rowIndex + rowspan) {
-      // 查找并恢复被隐藏的单元格
-      let foundHiddenCell = false;
-      const newCells = cells.map((cell, cellIdx) => {
-        // 找到对应列位置的被隐藏单元格
-        if (cellIdx === colIndex && (cell.rowspan === 0 || cell.colspan === 0)) {
-          foundHiddenCell = true;
-          
-          // 恢复为单个正常单元格
-          return {
-            text: '',
-            rowspan: 1,
-            colspan: 1,
-            col_index: colIndex + 1,
-            style: {},
-            word_style: 'Normal',
-            width: cell.width || 100,
-          } as TableCell;
-        }
-        return cell;
-      });
-      
-      // 如果主单元格有横向合并，需要插入额外的单元格
-      if (foundHiddenCell && colspan > 1) {
-        const additionalCells: TableCell[] = [];
-        for (let i = 0; i < colspan - 1; i++) {
-          additionalCells.push({
-            text: '',
-            rowspan: 1,
-            colspan: 1,
-            col_index: colIndex + 2 + i,
-            style: {},
-            word_style: 'Normal',
-            width: newCells[colIndex].width || 100,
-          });
-        }
-        newCells.splice(colIndex + 1, 0, ...additionalCells);
-        
-        // 更新后续单元格的 col_index
-        for (let i = colIndex + colspan; i < newCells.length; i++) {
-          newCells[i] = {
-            ...newCells[i],
-            col_index: (newCells[i].col_index || 0) + (colspan - 1),
-          };
-        }
+
+    for (let splitRow = targetPosition.rowStart; splitRow <= targetPosition.rowEnd; splitRow += 1) {
+      for (let splitCol = targetPosition.colStart; splitCol <= targetPosition.colEnd; splitCol += 1) {
+        const isPrimary = splitRow === targetPosition.rowStart && splitCol === targetPosition.colStart;
+        positionedCells.push({
+          cell: isPrimary
+            ? {
+                ...cell,
+                rowspan: 1,
+                colspan: 1,
+                col_index: splitCol + 1,
+                word_style: cell.word_style || 'Normal',
+              }
+            : createEmptyCell(splitCol + 1, cell.width || 100),
+          position: {
+            rowStart: splitRow,
+            rowEnd: splitRow,
+            colStart: splitCol,
+            colEnd: splitCol,
+          },
+        });
       }
-      
-      return { cells: newCells, height: row.height };
     }
-    
-    // 其他行不受影响
-    return { cells, height: row.height };
-  });
+  }
+
+  const rows = rebuildTableRows(
+    positionedCells,
+    table.content.rows.map((row) => row.height),
+    table.metadata.cols,
+  );
   
   return {
     ...table,