feat(editor): Add document caching and display name propagation

- Implement localStorage-based document caching with deduplication in MessageItem
- Add document existence verification to prevent stale cached references
- Propagate documentName prop through EditorWithOutline to BlockEditor component
- Update MainToolbar to display documentId and track modification state with visual indicator
- Add animated dot indicator for unsaved changes in toolbar
- Improve document title priority: prop name > store title > default fallback
- Enhance error messaging and logging in document preview workflow
- This reduces redundant API calls for frequently previewed documents while maintaining data integrity

src/components/ChatPanel/MessageItem.tsx

@@ -142,13 +142,14 @@ const MessageItem: React.FC<MessageItemProps> = memo(
     /**
      * Handle preview document click
      * 
-     * This function needs to ensure the document exists in the document management
-     * system before opening the editor. The workflow returns an export record with
-     * a recordId and downloadUrl, but the document hasn't been imported yet.
+     * This function ensures the document exists in the document management
+     * system before opening the editor. It implements smart deduplication:
      * 
      * Steps:
-     * 1. Call POST /api/v1/documents to create/import the document
-     * 2. Use the returned documentId to open the editor
+     * 1. Check localStorage cache for existing documentId
+     * 2. If cached, verify document still exists
+     * 3. If not cached or deleted, create new document via POST
+     * 4. Cache the documentId and open editor
      */
     const handlePreviewClick = useCallback(async () => {
       if (!exportRecord || !onPreviewDocument || isCreatingDocument) return;
@@ -156,19 +157,52 @@ const MessageItem: React.FC<MessageItemProps> = memo(
       try {
         setIsCreatingDocument(true);
         
-        // Create/import document using the export record's download URL
-        // The backend will download the file and parse it into blocks
-        const response = await createDocument({
-          userId: 'default-user', // TODO: Get from auth context
-          fileUrl: exportRecord.downloadUrl,
-          sessionId: currentSessionId || 'default-session',
-        });
+        // Step 1: Check localStorage cache
+        const { default: apiClient } = await import('../../services/api');
+        const cacheKey = `doc_cache_${currentSessionId}_${exportRecord.recordId}`;
+        const cachedDocId = localStorage.getItem(cacheKey);
         
-        // Now we can open the preview with the document ID
-        onPreviewDocument(response.documentId, exportRecord.fileName);
+        let documentId: string;
+        
+        if (cachedDocId) {
+          // Step 2: Verify cached document still exists
+          try {
+            await apiClient.get(`/api/v1/documents/${cachedDocId}`);
+            // Document exists, reuse it
+            documentId = cachedDocId;
+          } catch {
+            // Document no longer exists, clear cache and create new
+            localStorage.removeItem(cacheKey);
+            
+            // Create new document
+            const response = await createDocument({
+              userId: 'default-user', // TODO: Get from auth context
+              fileUrl: exportRecord.downloadUrl,
+              sessionId: currentSessionId || 'default-session',
+            });
+            
+            documentId = response.documentId;
+            localStorage.setItem(cacheKey, documentId);
+          }
+        } else {
+          // Step 3: No cache, create new document
+          const response = await createDocument({
+            userId: 'default-user', // TODO: Get from auth context
+            fileUrl: exportRecord.downloadUrl,
+            sessionId: currentSessionId || 'default-session',
+          });
+          
+          documentId = response.documentId;
+          
+          // Step 4: Cache the mapping
+          localStorage.setItem(cacheKey, documentId);
+        }
+        
+        // Step 5: Open the preview with the document ID
+        onPreviewDocument(documentId, exportRecord.fileName);
         
       } catch (error) {
-        console.error('Failed to create document:', error);
+        console.error('Failed to open document:', error);
         antdMessage.error('打开文档失败: ' + (error instanceof Error ? error.message : '未知错误'));
       } finally {
         setIsCreatingDocument(false);

src/components/Editor/BlockEditor.tsx

@@ -21,6 +21,8 @@ import './BlockEditor.css';
 export interface BlockEditorProps {
   /** 文档ID */
   documentId: string;
+  /** 文档名称（用于显示在工具栏，优先级高于从blocks提取的标题） */
+  documentName?: string | null;
   /** 是否只读模式 */
   readOnly?: boolean;
   /** 关闭回调 */
@@ -38,12 +40,14 @@ export interface BlockEditorProps {
  * ```tsx
  * <BlockEditor 
  *   documentId="doc-123"
+ *   documentName="地质报告.docx"
  *   onClose={() => handleClose()}
  * />
  * ```
  */
 export const BlockEditor: React.FC<BlockEditorProps> = ({
   documentId,
+  documentName,
   readOnly = false,
   onClose,
 }) => {
@@ -57,6 +61,10 @@ export const BlockEditor: React.FC<BlockEditorProps> = ({
     saveDocument,
   } = useEditorStore();
 
+  // ── Determine display title ──────────────────────────────────────────────
+  // Priority: 1. documentName prop (from chat), 2. documentTitle from store, 3. default
+  const displayTitle = documentName || documentTitle || '未命名文档';
+
   // ── Load document ──────────────────────────────────────────────────────────
   useEffect(() => {
     if (documentId) {
@@ -105,7 +113,8 @@ export const BlockEditor: React.FC<BlockEditorProps> = ({
     <div className="block-editor" data-testid="block-editor">
       {/* 工具栏 */}
       <MainToolbar
-        documentTitle={documentTitle}
+        documentTitle={displayTitle}
+        documentId={documentId}
         readOnly={readOnly}
         onSave={handleSave}
         onClose={onClose}

src/components/Editor/EditorWithOutline.tsx

@@ -22,6 +22,8 @@ export interface EditorWithOutlineProps {
   defaultShowOutline?: boolean;
   /** 文档ID */
   documentId?: string;
+  /** 文档名称（用于显示在工具栏） */
+  documentName?: string | null;
   /** 关闭回调 */
   onClose?: () => void;
 }
@@ -36,6 +38,7 @@ export interface EditorWithOutlineProps {
 export const EditorWithOutline: React.FC<EditorWithOutlineProps> = ({
   defaultShowOutline = true,
   documentId,
+  documentName,
   onClose,
 }) => {
   const [showOutline, setShowOutline] = useState(defaultShowOutline);
@@ -59,7 +62,11 @@ export const EditorWithOutline: React.FC<EditorWithOutlineProps> = ({
 
       {/* 主编辑器 */}
       <div className={`editor-main ${showOutline ? 'with-outline' : ''}`}>
-        <BlockEditor documentId={documentId || ''} onClose={onClose} />
+        <BlockEditor 
+          documentId={documentId || ''} 
+          documentName={documentName}
+          onClose={onClose} 
+        />
       </div>
 
       {/* 文档大纲 */}

src/components/Editor/toolbar/MainToolbar.css

@@ -36,3 +36,30 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
+/* 修改状态标识 */
+.modified-indicator {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 12px;
+  color: #faad14;
+  margin-left: 8px;
+}
+
+.modified-indicator .dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background-color: #faad14;
+  animation: pulse 2s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}

src/components/Editor/toolbar/MainToolbar.tsx

@@ -6,8 +6,8 @@
  * @module components/Editor/toolbar
  */
 
-import React from 'react';
-import { Button, Dropdown, Divider } from 'antd';
+import React, { useState } from 'react';
+import { Button, Dropdown, Divider, message } from 'antd';
 import type { MenuProps } from 'antd';
 import {
   SaveOutlined,
@@ -17,7 +17,11 @@ import {
   FilePdfOutlined,
   FileMarkdownOutlined,
   DownOutlined,
+  LoadingOutlined,
 } from '@ant-design/icons';
+import { useEditorStore } from '../../../stores/editorStore';
+import { exportToWord } from '../../../services/exportService';
+import { downloadExportRecord } from '../../../services/exportRecordService';
 import './MainToolbar.css';
 
 // ══════════════════════════════════════════════════════════════════════════════
@@ -27,6 +31,8 @@ import './MainToolbar.css';
 export interface MainToolbarProps {
   /** 文档标题 */
   documentTitle: string;
+  /** 文档ID */
+  documentId: string;
   /** 是否只读 */
   readOnly?: boolean;
   /** 保存回调 */
@@ -44,38 +50,100 @@ export interface MainToolbarProps {
  */
 export const MainToolbar: React.FC<MainToolbarProps> = ({
   documentTitle,
+  documentId,
   readOnly = false,
   onSave,
   onClose,
 }) => {
+  // ── State ──────────────────────────────────────────────────────────────────
+  const [isExporting, setIsExporting] = useState(false);
+  
+  // ── Editor Store ───────────────────────────────────────────────────────────
+  // 获取文档修改状态和保存状态
+  const { hasModified, isSaving } = useEditorStore((state) => ({
+    hasModified: state.hasModified,
+    isSaving: state.isSaving,
+  }));
+
+  // ── Export handlers ────────────────────────────────────────────────────────
+
+  /**
+   * 导出为Word文档
+   */
+  const handleExportWord = async () => {
+    if (!documentId) {
+      message.error('无法导出：文档ID不存在');
+      return;
+    }
+
+    setIsExporting(true);
+    const hideLoading = message.loading('正在导出Word文档...', 0);
+
+    try {
+      // 1. 调用导出API
+      const response = await exportToWord({
+        documentId,
+        styleId: null, // 使用默认样式
+      });
+
+      hideLoading();
+
+      // 2. 显示导出成功提示
+      if (response.warning) {
+        message.warning(response.warning);
+      } else {
+        message.success('导出成功！');
+      }
+
+      // 3. 触发下载
+      // 使用downloadExportRecord来触发浏览器下载
+      const userId = 'default-user'; // TODO: 从认证上下文获取
+      await downloadExportRecord(response.recordId, userId);
+    } catch (error: any) {
+      hideLoading();
+      console.error('Export to Word failed:', error);
+      message.error(error.message || '导出Word文档失败');
+    } finally {
+      setIsExporting(false);
+    }
+  };
+
+  /**
+   * 导出为PDF文档（暂未实现）
+   */
+  const handleExportPDF = () => {
+    message.info('PDF导出功能即将上线');
+  };
+
+  /**
+   * 导出为Markdown文档（暂未实现）
+   */
+  const handleExportMarkdown = () => {
+    message.info('Markdown导出功能即将上线');
+  };
+
   // 导出菜单
   const exportMenuItems: MenuProps['items'] = [
     {
       key: 'word',
       icon: <FileWordOutlined />,
       label: 'Word',
-      onClick: () => {
-        // TODO: 实现Word导出
-        console.log('导出Word');
-      },
+      disabled: isExporting,
+      onClick: handleExportWord,
     },
     {
       key: 'pdf',
       icon: <FilePdfOutlined />,
       label: 'PDF',
-      onClick: () => {
-        // TODO: 实现PDF导出
-        console.log('导出PDF');
-      },
+      disabled: true,
+      onClick: handleExportPDF,
     },
     {
       key: 'markdown',
       icon: <FileMarkdownOutlined />,
       label: 'Markdown',
-      onClick: () => {
-        // TODO: 实现Markdown导出
-        console.log('导出Markdown');
-      },
+      disabled: true,
+      onClick: handleExportMarkdown,
     },
   ];
 
@@ -86,6 +154,13 @@ export const MainToolbar: React.FC<MainToolbarProps> = ({
         <span className="document-title" title={documentTitle}>
           {documentTitle || '未命名文档'}
         </span>
+        {/* 修改状态指示 */}
+        {hasModified && (
+          <span className="modified-indicator">
+            <span className="dot"></span>
+            <span>未保存</span>
+          </span>
+        )}
       </div>
 
       {/* 右侧 - 操作按钮 */}
@@ -96,8 +171,11 @@ export const MainToolbar: React.FC<MainToolbarProps> = ({
             <Button
               type="primary"
               size="small"
-              icon={<SaveOutlined />}
+              icon={isSaving ? <LoadingOutlined /> : <SaveOutlined />}
               onClick={onSave}
+              disabled={!hasModified || isSaving}
+              loading={isSaving}
+              title={hasModified ? '文档已修改，点击保存' : '文档未修改'}
             >
               保存
             </Button>
@@ -105,8 +183,13 @@ export const MainToolbar: React.FC<MainToolbarProps> = ({
         )}
 
         {/* 导出 */}
-        <Dropdown menu={{ items: exportMenuItems }} placement="bottomRight">
-          <Button type="default" size="small" icon={<DownloadOutlined />}>
+        <Dropdown menu={{ items: exportMenuItems }} placement="bottomRight" disabled={isExporting}>
+          <Button 
+            type="default" 
+            size="small" 
+            icon={isExporting ? <LoadingOutlined /> : <DownloadOutlined />}
+            loading={isExporting}
+          >
             导出 <DownOutlined />
           </Button>
         </Dropdown>

src/components/EditorPanel/EditorPanel.tsx

@@ -50,6 +50,7 @@ export interface EditorPanelProps {
  */
 export const EditorPanel: React.FC<EditorPanelProps> = ({
   documentId,
+  initialDocumentName,
   onClose,
 }) => {
   return (
@@ -57,6 +58,7 @@ export const EditorPanel: React.FC<EditorPanelProps> = ({
       {/* 集成带大纲的编辑器 */}
       <EditorWithOutline
         documentId={documentId}
+        documentName={initialDocumentName}
         defaultShowOutline={true}
         onClose={onClose}
       />

src/stores/editorStore.ts

@@ -35,6 +35,12 @@ interface EditorStore {
   isSaving: boolean;
   error: string | null;
   
+  // ── 修改状态追踪 ────────────────────────────────────────────────────────
+  /** 文档是否已被修改(用于控制保存按钮状态) */
+  hasModified: boolean;
+  /** 原始blocks快照(用于检测变化) */
+  originalBlocksSnapshot: string | null;
+  
   // ── 操作方法 ────────────────────────────────────────────────────────────
   
   /**
@@ -62,6 +68,16 @@ interface EditorStore {
   updateBlock: (id: string, updates: BlockUpdate) => void;
   
   /**
+   * 标记文档已修改
+   */
+  markAsModified: () => void;
+  
+  /**
+   * 标记文档已保存
+   */
+  markAsSaved: () => void;
+  
+  /**
    * 删除块
    * @param id 块ID
    */
@@ -162,6 +178,8 @@ const initialState = {
   isLoading: false,
   isSaving: false,
   error: null,
+  hasModified: false,
+  originalBlocksSnapshot: null,
 };
 
 export const useEditorStore = create<EditorStore>((set, get) => ({
@@ -174,11 +192,16 @@ export const useEditorStore = create<EditorStore>((set, get) => ({
     try {
       const data = await blockService.getBlocks(documentId);
       
+      // 保存原始blocks快照,用于检测修改
+      const snapshot = JSON.stringify(data.blocks);
+      
       set({
         documentId,
         documentTitle: '未命名文档', // 后端不返回title，使用默认值
         blocks: data.blocks,
         isLoading: false,
+        hasModified: false, // 初始状态为未修改
+        originalBlocksSnapshot: snapshot,
       });
     } catch (error: any) {
       set({
@@ -212,7 +235,13 @@ export const useEditorStore = create<EditorStore>((set, get) => ({
         });
       }
       
-      set({ isSaving: false });
+      // 保存成功后,更新快照并标记为未修改
+      const snapshot = JSON.stringify(blocks);
+      set({ 
+        isSaving: false,
+        hasModified: false,
+        originalBlocksSnapshot: snapshot,
+      });
     } catch (error: any) {
       set({
         error: error.message || '保存失败',
@@ -254,6 +283,8 @@ export const useEditorStore = create<EditorStore>((set, get) => ({
           { ...partialBlock, block_order: 0 } as DocumentBlock,
         ]);
         set({ blocks: newBlocks });
+        // 标记文档已修改
+        get().markAsModified();
         return;
       }
     }
@@ -276,6 +307,9 @@ export const useEditorStore = create<EditorStore>((set, get) => ({
     );
     
     set({ blocks: newBlocks });
+    
+    // 标记文档已修改
+    get().markAsModified();
   },
 
   // ── updateBlock ─────────────────────────────────────────────────────────
@@ -287,6 +321,9 @@ export const useEditorStore = create<EditorStore>((set, get) => ({
     );
     
     set({ blocks: newBlocks });
+    
+    // 标记文档已修改
+    get().markAsModified();
   },
 
   // ── deleteBlock ─────────────────────────────────────────────────────────
@@ -294,6 +331,9 @@ export const useEditorStore = create<EditorStore>((set, get) => ({
     const { blocks } = get();
     const newBlocks = blocks.filter((block) => block.id !== id);
     set({ blocks: newBlocks });
+    
+    // 标记文档已修改
+    get().markAsModified();
   },
 
   // ── moveBlock ───────────────────────────────────────────────────────────
@@ -357,6 +397,21 @@ export const useEditorStore = create<EditorStore>((set, get) => ({
     }
   },
   
+  // ── markAsModified ──────────────────────────────────────────────────────
+  markAsModified: () => {
+    set({ hasModified: true });
+  },
+  
+  // ── markAsSaved ─────────────────────────────────────────────────────────
+  markAsSaved: () => {
+    const { blocks } = get();
+    const snapshot = JSON.stringify(blocks);
+    set({ 
+      hasModified: false,
+      originalBlocksSnapshot: snapshot,
+    });
+  },
+  
   // ── recomputeBlockOrders ────────────────────────────────────────────────
   recomputeBlockOrders: () => {
     const { blocks } = get();