feat(编辑器): 优化富文本工具栏在表格模式下的交互与样式控制

- 移除表格模式下浮动格式工具栏的显示逻辑，表格单元格编辑时不再显示浮动工具栏
- 简化焦点处理，移除表格模式特殊的工具栏定位逻辑
- 优化颜色选择器的事件处理，添加document级别的mousedown和mousemove监听以正确关闭弹出窗口
- 增加Escape键支持，按下时关闭颜色选择器和展开的工具栏菜单
- 优化字体大小和颜色变化的状态管理流程，避免不必要的中间状态更新
- 修复颜色选择器在表格模式下的验证和关闭时序
- 添加工具栏hover状态回调，支持父组件监听工具栏交互状态
- 删除冗余的TableBorderControl、TableStylePanel组件及其样式文件，统一由TableBlock管理样式控制

src/components/Editor/RichTextEditor/RichTextEditor.tsx

@@ -362,15 +362,9 @@ export const RichTextEditor: React.FC<RichTextEditorProps> = ({
 
     const selection = window.getSelection();
     
-    // 表格模式：即使没有选中文本也显示工具栏（用于样式控制）
+    // 表格单元格不显示浮动格式工具栏。
     if (tableContext) {
-      if (!selection || selection.rangeCount === 0) return;
-      
-      setToolbarPosition({
-        top: 0,
-        left: -40,
-      });
-      
+      setHasTextSelection(false);
       return;
     }
     
@@ -393,24 +387,12 @@ export const RichTextEditor: React.FC<RichTextEditorProps> = ({
     
   }, [readOnly, tableContext]);
 
-  // ── 处理聚焦(表格模式显示工具栏) ─────────────────────────────────────────────
+  // ── 处理聚焦 ───────────────────────────────────────────────────────────────
   const handleFocus = useCallback(() => {
     if (readOnly) return;
 
     setIsEditorFocused(true);
-
-    if (!tableContext) return;
-    
-    // 延迟一下，确保光标已经定位
-    setTimeout(() => {
-      if (!editorRef.current) return;
-      
-      setToolbarPosition({
-        top: 0,
-        left: -40,
-      });
-    }, 50);
-  }, [readOnly, tableContext]);
+  }, [readOnly]);
 
   // ── 粘贴处理(只保留纯文本) ─────────────────────────────────────────────────
   const handlePaste = useCallback((e: React.ClipboardEvent) => {
@@ -460,7 +442,7 @@ export const RichTextEditor: React.FC<RichTextEditorProps> = ({
       />
 
       {/* 浮动工具栏放在编辑内容之后，避免 contenteditable 重绘时覆盖面板。 */}
-      {!readOnly && hasContent !== false && (
+      {!readOnly && hasContent !== false && !tableContext && (
         <RichTextToolbar
           position={toolbarPosition}
           editorElement={editorElement}

src/components/Editor/RichTextEditor/RichTextToolbar.tsx

@@ -317,6 +317,58 @@ export const RichTextToolbar: React.FC<RichTextToolbarProps> = ({
   const [isUnderline, setIsUnderline] = useState<boolean>(false);
   const [isExpanded, setIsExpanded] = useState(false);
 
+  useEffect(() => {
+    if (!colorPickerOpen) return;
+
+    const handleDocumentMouseDown = (event: MouseEvent) => {
+      const target = event.target;
+      if (!(target instanceof Element)) return;
+
+      const isColorTrigger = Boolean(target.closest('.rich-text-color-trigger'));
+      const isColorPopup = Boolean(target.closest('.rich-text-color-picker'));
+      if (!isColorTrigger && !isColorPopup) {
+        setColorPickerOpen(false);
+      }
+    };
+
+    const handleDocumentMouseMove = (event: MouseEvent) => {
+      const target = event.target;
+      if (!(target instanceof Element)) return;
+
+      const isEditorArea = editorElement?.contains(target) ?? false;
+      const isToolbarArea = Boolean(target.closest(
+        '.rich-text-toolbar, .rich-text-toolbar-dropdown, .rich-text-color-picker, .ant-popover',
+      ));
+
+      if (!isEditorArea && !isToolbarArea) {
+        setColorPickerOpen(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleDocumentMouseDown);
+    document.addEventListener('mousemove', handleDocumentMouseMove);
+    return () => {
+      document.removeEventListener('mousedown', handleDocumentMouseDown);
+      document.removeEventListener('mousemove', handleDocumentMouseMove);
+    };
+  }, [colorPickerOpen, editorElement]);
+
+  useEffect(() => {
+    if (!isExpanded && !colorPickerOpen) return;
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key !== 'Escape') return;
+
+      event.preventDefault();
+      setColorPickerOpen(false);
+      setIsExpanded(false);
+      onClose();
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [isExpanded, colorPickerOpen, onClose]);
+
   // 判断是否处于表格编辑模式
   const isTableMode = !!tableContext;
 
@@ -514,11 +566,10 @@ export const RichTextToolbar: React.FC<RichTextToolbarProps> = ({
   const handleFontSizeChange = useCallback((value: number | null) => {
     if (value === null || value < 8 || value > 72) return;
     
-    setFontSize(value);
-    
     if (isTableMode && tableContext) {
       // 表格模式
       tableContext.onStyleChange({ font_size: value });
+      setFontSize(value);
       return;
     }
     
@@ -537,22 +588,23 @@ export const RichTextToolbar: React.FC<RichTextToolbarProps> = ({
       return;
     }
     
+    setFontSize(value);
     savedRangeRef.current = saveSelection();
     onFormat();
   }, [getEditorElement, isTableMode, tableContext, onFormat]);
 
   // ── 处理颜色变化 ───────────────────────────────────────────────────────────
   const handleColorChange = useCallback((color: string) => {
-    setCurrentColor(color);
-    
     if (isTableMode && tableContext) {
       // 表格模式
       const hexColor = color.trim().replace(/^#/, '').toUpperCase();
       if (!/^[0-9A-F]{3,8}$/.test(hexColor)) {
+        setColorPickerOpen(false);
         return;
       }
       tableContext.onStyleChange({ color: hexColor });
-      setTimeout(() => setColorPickerOpen(false), 100);
+      setCurrentColor(`#${hexColor}`);
+      setColorPickerOpen(false);
       return;
     }
     
@@ -560,14 +612,14 @@ export const RichTextToolbar: React.FC<RichTextToolbarProps> = ({
     const restored = restoreSavedOrCurrentSelection(savedRangeRef.current, getEditorElement());
     
     if (!restored) {
-      setTimeout(() => setColorPickerOpen(false), 100);
+      setColorPickerOpen(false);
       return;
     }
     
     const selection = window.getSelection();
     
     if (!selection || selection.rangeCount === 0) {
-      setTimeout(() => setColorPickerOpen(false), 100);
+      setColorPickerOpen(false);
       return;
     }
     
@@ -586,12 +638,16 @@ export const RichTextToolbar: React.FC<RichTextToolbarProps> = ({
           spanElement.classList.add('colored-text');
         }
       }
+      setCurrentColor(color);
+    } else {
+      setColorPickerOpen(false);
+      return;
     }
     
     savedRangeRef.current = saveSelection();
     onFormat();
     
-    setTimeout(() => setColorPickerOpen(false), 100);
+    setColorPickerOpen(false);
   }, [getEditorElement, isTableMode, tableContext, onFormat]);
 
   // ── 处理对齐方式 ──────────────────────────────────────────────────────────
@@ -734,6 +790,8 @@ export const RichTextToolbar: React.FC<RichTextToolbarProps> = ({
       ref={toolbarRef}
       className="rich-text-toolbar expanded"
       onMouseDown={handleMouseDown}
+      onMouseEnter={() => onHoverChange?.(true)}
+      onMouseLeave={() => onHoverChange?.(false)}
     >
       {!isTableMode && (
         <>
@@ -783,14 +841,14 @@ export const RichTextToolbar: React.FC<RichTextToolbarProps> = ({
           />
         </Tooltip>
         <Popover
-          open={colorPickerOpen}
+          open={colorPickerOpen && visible}
           onOpenChange={setColorPickerOpen}
           content={colorContent}
           trigger="click"
           placement="bottom"
           overlayClassName="rich-text-color-picker"
         >
-          <button type="button" className="toolbar-icon-button" title="文字颜色">
+          <button type="button" className="toolbar-icon-button rich-text-color-trigger" title="文字颜色">
             <FontColorsOutlined style={{ color: currentColor }} />
           </button>
         </Popover>
@@ -839,7 +897,7 @@ export const RichTextToolbar: React.FC<RichTextToolbarProps> = ({
 
   const toolbar = (
     <Dropdown
-      open={isExpanded}
+      open={isExpanded && visible}
       onOpenChange={(open) => {
         setIsExpanded(open);
         if (!open) {
@@ -847,9 +905,9 @@ export const RichTextToolbar: React.FC<RichTextToolbarProps> = ({
           onClose();
         }
       }}
-      trigger={['click']}
       placement="bottomLeft"
       overlayClassName="rich-text-toolbar-dropdown"
+      trigger={['click']}
       popupRender={() => expandedToolbar}
     >
       <div

src/components/Editor/blocks/TableBlock.tsx

@@ -9,7 +9,6 @@ import type { TableBlock as TableBlockType, TableCell as TableCellType } from '.
 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';
@@ -364,15 +363,6 @@ export const TableBlock: React.FC<TableBlockProps> = ({
         />
       )}
 
-      {!readOnly && selectedCell && (
-        <TableStylePanel
-          block={block}
-          selectedCell={selectedCell}
-          selectedRange={selectedRange}
-          selectedVisualRange={selectedVisualRange}
-        />
-      )}
-
       {/* 拖动尺寸提示 */}
       {resizeState?.isResizing && currentSizeTooltip && (
         <div

src/components/Editor/blocks/TableBorderControl.tsx

@@ -1,145 +0,0 @@
-/**
- * TableBorderControl.tsx - 表格边框控制组件
- * 
- * 支持设置单元格边框样式
- * 
- * @module components/Editor/blocks
- */
-
-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
-// ══════════════════════════════════════════════════════════════════════════════
-
-export interface TableBorderControlProps {
-  /** 表格块 */
-  block: TableBlock;
-  /** 选中的单元格 */
-  selectedCell: { row: number; col: number };
-  /** 选中的范围 */
-  selectedRange?: {
-    startRow: number;
-    startCol: number;
-    endRow: number;
-    endCol: number;
-  } | null;
-  selectedVisualRange?: {
-    rowStart: number;
-    rowEnd: number;
-    colStart: number;
-    colEnd: number;
-  } | null;
-}
-
-// ══════════════════════════════════════════════════════════════════════════════
-// Component
-// ══════════════════════════════════════════════════════════════════════════════
-
-/**
- * TableBorderControl - 表格边框控制
- * 
- * 提供单元格边框设置功能:
- * - 边框宽度
- * - 边框颜色
- */
-export const TableBorderControl: React.FC<TableBorderControlProps> = ({
-  block,
-  selectedCell,
-  selectedVisualRange,
-}) => {
-  const updateBlock = useEditorStore((state) => state.updateBlock);
-  const visualCellPositions = useMemo(
-    () => getTableVisualCellPositions(block),
-    [block],
-  );
-  
-  // 获取当前选中单元格的边框样式
-  const currentCell = block.content.rows[selectedCell.row]?.cells[selectedCell.col];
-  const currentStyle = currentCell?.style || {};
-
-  // 应用边框样式到选中的单元格或范围
-  const applyBorderStyle = useCallback((borderUpdates: {
-    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) => {
-      return {
-        ...row,
-        cells: row.cells.map((cell, colIdx) => {
-          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,
-            style: {
-              ...cell.style,
-              ...borderUpdates,
-            },
-          };
-        }),
-      };
-    });
-
-    updateBlock(block.id, {
-      content: {
-        ...block.content,
-        rows: newRows,
-      },
-    });
-  }, [block, selectedCell, selectedVisualRange, updateBlock, visualCellPositions]);
-
-  // 设置边框宽度
-  const setBorderWidth = useCallback((border_width: number | null) => {
-    if (border_width !== null && border_width >= 0) {
-      applyBorderStyle({ border_width });
-    }
-  }, [applyBorderStyle]);
-
-  // 设置边框颜色
-  const setBorderColor = useCallback((color: Color) => {
-    const hexColor = color.toHexString().replace(/^#/, '').toUpperCase();
-    applyBorderStyle({ border_color: hexColor });
-  }, [applyBorderStyle]);
-
-  return (
-    <Space.Compact>
-      <Button size="small" icon={<BorderOutlined />} disabled title="边框" />
-      <InputNumber
-        size="small"
-        min={0}
-        max={10}
-        step={0.5}
-        value={currentStyle.border_width || 1}
-        onChange={setBorderWidth}
-        style={{ width: 60 }}
-        placeholder="宽度"
-      />
-      <ColorPicker
-        size="small"
-        value={currentStyle.border_color ? `#${currentStyle.border_color}` : '#000000'}
-        onChange={setBorderColor}
-        showText={false}
-      />
-    </Space.Compact>
-  );
-};
-
-export default TableBorderControl;

src/components/Editor/blocks/TableStylePanel.css

@@ -1,31 +0,0 @@
-/**
- * TableStylePanel.css - 表格样式面板样式
- */
-
-.table-style-panel {
-  position: sticky;
-  top: 0;
-  left: 0;
-  z-index: 100;
-  background: #ffffff;
-  border: 1px solid #e0e0e0;
-  border-radius: 4px;
-  padding: 8px 12px;
-  margin-bottom: 8px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
-}
-
-.table-style-panel .ant-space-compact {
-  background: #f5f5f5;
-  border-radius: 4px;
-  padding: 2px;
-}
-
-.table-style-panel .ant-btn-sm {
-  min-width: 32px;
-}
-
-.table-style-panel .ant-divider-vertical {
-  height: 24px;
-  align-self: center;
-}

src/components/Editor/blocks/TableStylePanel.tsx

@@ -1,323 +0,0 @@
-/**
- * TableStylePanel.tsx - 表格样式面板
- * 
- * 用于设置单元格样式（字体、对齐、颜色等）
- * 
- * @module components/Editor/blocks
- */
-
-import React, { useCallback, useMemo } from 'react';
-import { Button, Space, ColorPicker, InputNumber, Select, Divider } from 'antd';
-import type { Color } from 'antd/es/color-picker';
-import {
-  BoldOutlined,
-  ItalicOutlined,
-  UnderlineOutlined,
-  AlignLeftOutlined,
-  AlignCenterOutlined,
-  AlignRightOutlined,
-  FontSizeOutlined,
-  FontColorsOutlined,
-  VerticalAlignTopOutlined,
-  VerticalAlignMiddleOutlined,
-  VerticalAlignBottomOutlined,
-} 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';
-
-// ══════════════════════════════════════════════════════════════════════════════
-// Component Props
-// ══════════════════════════════════════════════════════════════════════════════
-
-export interface TableStylePanelProps {
-  /** 表格块 */
-  block: TableBlock;
-  /** 选中的单元格 */
-  selectedCell: { row: number; col: number };
-  /** 选中的范围 */
-  selectedRange?: {
-    startRow: number;
-    startCol: number;
-    endRow: number;
-    endCol: number;
-  } | null;
-  selectedVisualRange?: {
-    rowStart: number;
-    rowEnd: number;
-    colStart: number;
-    colEnd: number;
-  } | null;
-}
-
-// ══════════════════════════════════════════════════════════════════════════════
-// Component
-// ══════════════════════════════════════════════════════════════════════════════
-
-/**
- * TableStylePanel - 表格样式面板
- * 
- * 提供单元格样式设置功能:
- * - 字体样式（加粗、斜体、下划线）
- * - 文本对齐（左、中、右）
- * - 垂直对齐（上、中、下）
- * - 字号
- * - 字体颜色
- */
-export const TableStylePanel: React.FC<TableStylePanelProps> = ({
-  block,
-  selectedCell,
-  selectedRange,
-  selectedVisualRange,
-}) => {
-  const updateBlock = useEditorStore((state) => state.updateBlock);
-  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) => {
-      return {
-        ...row,
-        cells: row.cells.map((cell, colIdx) => {
-          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,
-            style: {
-              ...cell.style,
-              ...styleUpdates,
-            },
-          };
-        }),
-      };
-    });
-
-    updateBlock(block.id, {
-      content: {
-        ...block.content,
-        rows: newRows,
-      },
-    });
-  }, [block, styleRange, updateBlock, visualCellPositions]);
-
-  // 字体样式切换
-  const toggleBold = useCallback(() => {
-    applyStyle({ bold: !currentStyle.bold });
-  }, [currentStyle.bold, applyStyle]);
-
-  const toggleItalic = useCallback(() => {
-    applyStyle({ italic: !currentStyle.italic });
-  }, [currentStyle.italic, applyStyle]);
-
-  const toggleUnderline = useCallback(() => {
-    applyStyle({ underline: !currentStyle.underline });
-  }, [currentStyle.underline, applyStyle]);
-
-  // 文本对齐
-  const setTextAlign = useCallback((align: 'left' | 'center' | 'right' | 'justify') => {
-    applyStyle({ align });
-  }, [applyStyle]);
-
-  // 垂直对齐
-  const setVerticalAlign = useCallback((valign: 'top' | 'middle' | 'bottom') => {
-    applyStyle({ valign });
-  }, [applyStyle]);
-
-  // 字号
-  const setFontSize = useCallback((font_size: number | null) => {
-    if (font_size && font_size > 0) {
-      applyStyle({ font_size });
-    }
-  }, [applyStyle]);
-
-  // 字体颜色
-  const setFontColor = useCallback((color: Color) => {
-    const hexColor = color.toHexString().replace(/^#/, '').toUpperCase();
-    applyStyle({ color: hexColor });
-  }, [applyStyle]);
-
-  // 字体
-  const setFontFamily = useCallback((font_name: string) => {
-    applyStyle({ font_name });
-  }, [applyStyle]);
-
-  return (
-    <div className="table-style-panel">
-      <Space size="small" wrap>
-        {/* 字体样式 */}
-        <Space.Compact>
-          <Button
-            type={currentStyle.bold ? 'primary' : 'default'}
-            size="small"
-            icon={<BoldOutlined />}
-            onClick={toggleBold}
-            title="加粗"
-          />
-          <Button
-            type={currentStyle.italic ? 'primary' : 'default'}
-            size="small"
-            icon={<ItalicOutlined />}
-            onClick={toggleItalic}
-            title="斜体"
-          />
-          <Button
-            type={currentStyle.underline ? 'primary' : 'default'}
-            size="small"
-            icon={<UnderlineOutlined />}
-            onClick={toggleUnderline}
-            title="下划线"
-          />
-        </Space.Compact>
-
-        <Divider type="vertical" style={{ margin: 0 }} />
-
-        {/* 文本对齐 */}
-        <Space.Compact>
-          <Button
-            type={currentStyle.align === 'left' ? 'primary' : 'default'}
-            size="small"
-            icon={<AlignLeftOutlined />}
-            onClick={() => setTextAlign('left')}
-            title="左对齐"
-          />
-          <Button
-            type={currentStyle.align === 'center' || !currentStyle.align ? 'primary' : 'default'}
-            size="small"
-            icon={<AlignCenterOutlined />}
-            onClick={() => setTextAlign('center')}
-            title="居中对齐"
-          />
-          <Button
-            type={currentStyle.align === 'right' ? 'primary' : 'default'}
-            size="small"
-            icon={<AlignRightOutlined />}
-            onClick={() => setTextAlign('right')}
-            title="右对齐"
-          />
-        </Space.Compact>
-
-        <Divider type="vertical" style={{ margin: 0 }} />
-
-        {/* 垂直对齐 */}
-        <Space.Compact>
-          <Button
-            type={currentStyle.valign === 'top' ? 'primary' : 'default'}
-            size="small"
-            icon={<VerticalAlignTopOutlined />}
-            onClick={() => setVerticalAlign('top')}
-            title="顶部对齐"
-          />
-          <Button
-            type={currentStyle.valign === 'middle' || !currentStyle.valign ? 'primary' : 'default'}
-            size="small"
-            icon={<VerticalAlignMiddleOutlined />}
-            onClick={() => setVerticalAlign('middle')}
-            title="垂直居中"
-          />
-          <Button
-            type={currentStyle.valign === 'bottom' ? 'primary' : 'default'}
-            size="small"
-            icon={<VerticalAlignBottomOutlined />}
-            onClick={() => setVerticalAlign('bottom')}
-            title="底部对齐"
-          />
-        </Space.Compact>
-
-        <Divider type="vertical" style={{ margin: 0 }} />
-
-        {/* 字号 */}
-        <Space.Compact>
-          <Button size="small" icon={<FontSizeOutlined />} disabled title="字号" />
-          <InputNumber
-            size="small"
-            min={8}
-            max={72}
-            value={currentStyle.font_size || 12}
-            onChange={setFontSize}
-            style={{ width: 60 }}
-          />
-        </Space.Compact>
-
-        {/* 字体 */}
-        <Select
-          size="small"
-          value={currentStyle.font_name || '宋体'}
-          onChange={setFontFamily}
-          style={{ width: 100 }}
-          options={[
-            { label: '宋体', value: '宋体' },
-            { label: '黑体', value: '黑体' },
-            { label: '楷体', value: '楷体' },
-            { label: '仿宋', value: '仿宋' },
-            { label: '微软雅黑', value: '微软雅黑' },
-            { label: 'Arial', value: 'Arial' },
-            { label: 'Times New Roman', value: 'Times New Roman' },
-          ]}
-        />
-
-        {/* 字体颜色 */}
-        <ColorPicker
-          size="small"
-          value={currentStyle.color ? `#${currentStyle.color}` : '#000000'}
-          onChange={setFontColor}
-          showText={() => (
-            <Space size={4}>
-              <FontColorsOutlined />
-              颜色
-            </Space>
-          )}
-        />
-
-        <Divider type="vertical" style={{ margin: 0 }} />
-
-        {/* 边框控制 */}
-        <TableBorderControl
-          block={block}
-          selectedCell={selectedCell}
-          selectedRange={selectedRange}
-          selectedVisualRange={selectedVisualRange}
-        />
-      </Space>
-    </div>
-  );
-};
-
-export default TableStylePanel;