feat (编辑器)：重构目录区块，采用紧凑按钮样式并新增占位提示组件

· 将完整目录区块展示形式替换为紧凑按钮形态，优化界面整洁度
· 新增TOCPlaceholder组件，在标题区块上方展示目录插入引导提示
· 仅当文档不存在目录区块、且非只读模式时，渲染占位提示
· 调整TOCBlock样式，改为内联按钮布局并增加悬浮交互状态
· 为目录区块按钮增加删除功能，配套图标标识
· 使用蓝色强调色与过渡动画优化视觉层级
· 新建TOCPlaceholder.tsx组件，承载目录插入交互流程
· 修改画布组件BlockCanvas，增加目录区块存在性判断，实现占位组件条件渲染
· 完善editor.ts内类型定义，适配目录区块新增交互逻辑

src/components/Editor/BlockCanvas.tsx

@@ -2,6 +2,7 @@
  * BlockCanvas.tsx - 块画布组件
  * 
  * 渲染所有的文档块,管理块的排序和交互
+ * 支持在标题上方显示TOC占位符
  * 
  * @module components/Editor
  */
@@ -9,6 +10,7 @@
 import React from 'react';
 import type { DocumentBlock } from '../../types/editor';
 import { BlockRenderer } from './BlockRenderer';
+import { TOCPlaceholder } from './blocks/TOCPlaceholder';
 import './BlockCanvas.css';
 
 // ══════════════════════════════════════════════════════════════════════════════
@@ -30,6 +32,7 @@ export interface BlockCanvasProps {
  * BlockCanvas - 块画布
  * 
  * 渲染所有blocks,按block_order排序显示
+ * 在每个标题块上方显示TOC占位符(如果当前没有TOC块)
  */
 export const BlockCanvas: React.FC<BlockCanvasProps> = ({
   blocks,
@@ -40,6 +43,11 @@ export const BlockCanvas: React.FC<BlockCanvasProps> = ({
     return [...blocks].sort((a, b) => a.block_order - b.block_order);
   }, [blocks]);
 
+  // 检查是否已存在TOC块
+  const hasTOC = React.useMemo(() => {
+    return sortedBlocks.some(block => block.type === 'toc');
+  }, [sortedBlocks]);
+
   // 空状态
   if (sortedBlocks.length === 0) {
     return (
@@ -51,13 +59,35 @@ export const BlockCanvas: React.FC<BlockCanvasProps> = ({
 
   return (
     <div className="block-canvas" data-testid="block-canvas">
-      {sortedBlocks.map((block) => (
-        <BlockRenderer
-          key={block.id}
-          block={block}
-          readOnly={readOnly}
-        />
-      ))}
+      {sortedBlocks.map((block, index) => {
+        const isFirstBlock = index === 0;
+        const isHeading = block.type === 'heading';
+        const prevBlock = index > 0 ? sortedBlocks[index - 1] : null;
+        
+        // 在标题上方显示TOC占位符的条件:
+        // 1. 当前文档没有TOC块
+        // 2. 当前块是标题块
+        // 3. 不是只读模式
+        const showPlaceholderBefore = !hasTOC && isHeading && !readOnly;
+        
+        return (
+          <React.Fragment key={block.id}>
+            {/* 在标题上方显示TOC占位符 */}
+            {showPlaceholderBefore && (
+              <TOCPlaceholder 
+                afterBlockId={prevBlock?.id}
+                readOnly={readOnly}
+              />
+            )}
+            
+            {/* 渲染当前块 */}
+            <BlockRenderer
+              block={block}
+              readOnly={readOnly}
+            />
+          </React.Fragment>
+        );
+      })}
     </div>
   );
 };

src/components/Editor/blocks/TOCBlock.css

@@ -4,105 +4,127 @@
 
 .toc-block-wrapper {
   margin: 16px 0;
+  position: relative;
 }
 
-.toc-toggle-button {
-  display: flex;
+/* 紧凑按钮样式 */
+.toc-compact-button {
+  display: inline-flex;
   align-items: center;
-  gap: 8px;
-  padding: 10px 16px;
-  background-color: #ffffff;
-  border: 1px solid #d9d9d9;
-  border-radius: 6px;
+  gap: 6px;
+  padding: 6px 12px;
+  background-color: #f0f5ff;
+  border: 1px solid #adc6ff;
+  border-radius: 4px;
   cursor: pointer;
   transition: all 0.2s ease;
-  font-size: 14px;
-  font-weight: 500;
-  color: #262626;
-  width: 100%;
-  justify-content: center;
-}
-
-.toc-toggle-button:hover {
-  background-color: #f5f7fa;
-  border-color: #40a9ff;
+  font-size: 13px;
   color: #1890ff;
+  position: relative;
 }
 
-.toc-toggle-button:active {
+.toc-compact-button:hover {
   background-color: #e6f7ff;
+  border-color: #40a9ff;
+  box-shadow: 0 2px 4px rgba(24, 144, 255, 0.15);
 }
 
-.toc-toggle-icon {
-  font-size: 12px;
-  transition: transform 0.2s ease;
+.toc-compact-button:active {
+  background-color: #d6e4ff;
+  transform: translateY(1px);
 }
 
-.toc-toggle-text {
-  font-size: 14px;
+.toc-compact-button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
 }
 
-.toc-block {
-  padding: 20px;
-  background-color: #f5f7fa;
-  border: 2px dashed #d9d9d9;
-  border-radius: 8px;
-  animation: fadeIn 0.2s ease-in;
+.toc-icon {
+  font-size: 16px;
+  line-height: 1;
 }
 
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-    transform: translateY(-10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
+.toc-text {
+  font-size: 13px;
+  font-weight: 500;
 }
 
-.toc-title {
+.toc-delete-icon {
   font-size: 18px;
-  font-weight: 600;
-  color: #262626;
-  margin-bottom: 12px;
-  text-align: center;
+  font-weight: 300;
+  line-height: 1;
+  margin-left: 4px;
+  opacity: 0.7;
+  transition: opacity 0.2s ease;
+}
+
+.toc-compact-button:hover .toc-delete-icon {
+  opacity: 1;
+}
+
+/* 空行添加按钮容器 */
+.toc-empty-line {
+  position: relative;
+  height: 24px;
+  margin: 8px 0;
+  border: 1px dashed transparent;
+  border-radius: 4px;
+  transition: all 0.2s ease;
+}
+
+.toc-empty-line:hover {
+  border-color: #d9d9d9;
+  background-color: #fafafa;
 }
 
-.toc-notice {
-  display: flex;
+/* 添加按钮 */
+.toc-add-button {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  display: none;
   align-items: center;
-  gap: 8px;
-  padding: 8px 12px;
-  background-color: #e6f7ff;
-  border: 1px solid #91d5ff;
+  gap: 6px;
+  padding: 4px 10px;
+  background-color: #ffffff;
+  border: 1px solid #40a9ff;
   border-radius: 4px;
-  margin-bottom: 16px;
-  font-size: 13px;
-  color: #0050b3;
+  cursor: pointer;
+  font-size: 12px;
+  color: #1890ff;
+  white-space: nowrap;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  z-index: 10;
+  transition: all 0.2s ease;
 }
 
-.toc-icon {
-  font-size: 16px;
-  flex-shrink: 0;
+.toc-empty-line:hover .toc-add-button {
+  display: inline-flex;
 }
 
-.toc-placeholder {
-  color: #595959;
-  font-size: 14px;
-  line-height: 1.6;
+.toc-add-button:hover {
+  background-color: #e6f7ff;
+  border-color: #1890ff;
+  box-shadow: 0 2px 6px rgba(24, 144, 255, 0.2);
 }
 
-.toc-placeholder p {
-  margin: 0 0 8px 0;
-  font-weight: 500;
+.toc-add-button:active {
+  background-color: #d6e4ff;
+  transform: translate(-50%, -50%) scale(0.95);
 }
 
-.toc-placeholder ul {
-  margin: 0;
-  padding-left: 24px;
+.toc-add-button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
 }
 
-.toc-placeholder li {
-  margin: 4px 0;
+.toc-add-icon {
+  font-size: 14px;
+  line-height: 1;
+}
+
+.toc-add-text {
+  font-size: 12px;
+  font-weight: 500;
 }

src/components/Editor/blocks/TOCBlock.tsx

@@ -2,13 +2,15 @@
  * TOCBlock.tsx - 目录块组件
  * 
  * 只读显示，自动生成的目录块
+ * 改造为简洁的按钮形式,支持删除功能
  * 
  * @module components/Editor/blocks
  */
 
-import React from 'react';
+import React, { useState } from 'react';
 import type { TOCBlock as TOCBlockType } from '../../../types/editor';
 import { useEditorStore } from '../../../stores/editorStore';
+import { blockService } from '../../../services/blockService';
 import './TOCBlock.css';
 
 export interface TOCBlockProps {
@@ -20,46 +22,53 @@ export interface TOCBlockProps {
  * TOCBlock - 目录块（只读）
  * 
  * TOC块是自动生成的，用户无法编辑
- * 通过按钮控制删除/添加目录块内容
+ * 提供删除按钮来移除目录块
  */
 export const TOCBlock: React.FC<TOCBlockProps> = ({ block }) => {
-  const { updateBlock } = useEditorStore();
-  
-  // 检查块是否被隐藏（通过metadata中的hidden标志）
-  const isHidden = (block.metadata as any)?.hidden === true;
+  const { documentId, deleteBlock } = useEditorStore();
+  const [isDeleting, setIsDeleting] = useState(false);
 
-  const handleToggle = () => {
-    // 切换隐藏状态
-    updateBlock(block.id, {
-      metadata: {
-        ...block.metadata,
-        hidden: !isHidden,
-      },
-    });
+  const handleDelete = async () => {
+    if (!documentId) {
+      console.error('文档ID不存在');
+      return;
+    }
+
+    if (isDeleting) return; // 防止重复点击
+
+    if (!window.confirm('确定要删除此目录块吗？')) {
+      return;
+    }
+
+    setIsDeleting(true);
+    
+    try {
+      // 调用后端API删除TOC块
+      await blockService.deleteBlock(documentId, block.id);
+      
+      // 删除成功后，从store中移除该块
+      deleteBlock(block.id);
+    } catch (error) {
+      console.error('删除目录块失败:', error);
+      alert('删除目录块失败，请重试');
+    } finally {
+      setIsDeleting(false);
+    }
   };
 
   return (
     <div className="toc-block-wrapper" data-block-id={block.id}>
       <button 
-        className="toc-toggle-button"
-        onClick={handleToggle}
+        className="toc-compact-button"
+        onClick={handleDelete}
+        disabled={isDeleting}
         type="button"
+        title="点击删除目录块"
       >
-        <span className="toc-toggle-icon">{isHidden ? '▶' : '▼'}</span>
-        <span className="toc-toggle-text">
-          {isHidden ? '添加目录' : '删除目录'}
-        </span>
+        <span className="toc-icon">📑</span>
+        <span className="toc-text">目录</span>
+        <span className="toc-delete-icon">×</span>
       </button>
-      
-      {!isHidden && (
-        <div className="toc-block">
-          <div className="toc-title">{block.content.title || '目录'}</div>
-          <div className="toc-notice">
-            <span className="toc-icon">ℹ️</span>
-            <span>目录内容由系统自动生成，无法手动编辑</span>
-          </div>
-        </div>
-      )}
     </div>
   );
 };

src/components/Editor/blocks/TOCPlaceholder.tsx

@@ -0,0 +1,98 @@
+/**
+ * TOCPlaceholder.tsx - TOC占位符组件
+ * 
+ * 在没有TOC块的位置显示空行,鼠标悬停时显示"添加TOC"按钮
+ * 
+ * @module components/Editor/blocks
+ */
+
+import React, { useState } from 'react';
+import { blockService } from '../../../services/blockService';
+import { useEditorStore } from '../../../stores/editorStore';
+import './TOCBlock.css'; // 使用TOCBlock的样式
+
+export interface TOCPlaceholderProps {
+  /** 在此块之后插入TOC (可选,不传则插入到文档开头) */
+  afterBlockId?: string;
+  /** 是否只读 */
+  readOnly?: boolean;
+}
+
+/**
+ * TOCPlaceholder - TOC占位符
+ * 
+ * 显示空行,悬停时显示添加按钮
+ */
+export const TOCPlaceholder: React.FC<TOCPlaceholderProps> = ({ 
+  afterBlockId,
+  readOnly = false 
+}) => {
+  const { documentId, loadDocument } = useEditorStore();
+  const [isAdding, setIsAdding] = useState(false);
+
+  const handleAdd = async () => {
+    if (!documentId || readOnly) {
+      return;
+    }
+
+    if (isAdding) return; // 防止重复点击
+
+    setIsAdding(true);
+    
+    try {
+      // 调用后端API添加TOC块
+      await blockService.createBlock(documentId, {
+        type: 'toc',
+        level: 0,
+        content: {
+          title: '目录'
+        },
+        word_style: 'TOC',
+        metadata: {
+          toc_config: {
+            levels: '1-1',
+            use_hyperlinks: true,
+            use_page_numbers: true,
+            hide_page_numbers_in_web: true,
+            use_outline_levels: true,
+            show_leader_dots: true,
+            leader_char: '.'
+          },
+          is_auto_generated: true,
+          readonly: true,
+          deletable: true
+        },
+        after_block_id: afterBlockId || null,
+      });
+      
+      // 重新加载文档以获取新添加的TOC块
+      await loadDocument(documentId);
+    } catch (error) {
+      console.error('添加目录块失败:', error);
+      alert('添加目录块失败，请重试');
+    } finally {
+      setIsAdding(false);
+    }
+  };
+
+  if (readOnly) {
+    return null; // 只读模式不显示占位符
+  }
+
+  return (
+    <div className="toc-empty-line">
+      <button 
+        className="toc-add-button"
+        onClick={handleAdd}
+        disabled={isAdding}
+        type="button"
+        title="添加目录块"
+      >
+        <span className="toc-add-icon">📑</span>
+        <span className="toc-add-text">添加目录</span>
+      </button>
+    </div>
+  );
+};
+
+export default TOCPlaceholder;

src/types/editor.ts

@@ -322,13 +322,12 @@ export interface BlockStatsResponse {
  */
 export interface CreateBlockRequest {
   type: BlockType;
-  level: number;
-  index: number;
+  level?: number;          // heading类型必填(1-6),其他类型默认0
   content: any;
-  word_style: string;
+  word_style?: string;
   style?: StyleOverrides;
   metadata?: Record<string, any>;
-  after_block_id?: string;  // 在哪个block后插入
+  after_block_id?: string | null;  // 在哪个block后插入(null=末尾)
 }
 
 /**