feat(DocumentManagement): Add document outline and viewer components

- Remove EDITOR_DEFAULT_EDIT_MODE.md documentation file
- Add DocumentOutline component for displaying document structure
- Add DocumentViewer component for document preview functionality
- Update DocumentManagement to improve export handling with better error messages and file name display
- Refactor DocumentManagementLayout with new layout structure
- Update EditorPanel with refinements to editor functionality
- Enhance MarkdownPreview component styling and behavior
- Improve exportService with better URL formatting and response handling
- Update export types to include fileName and enhanced metadata
- Streamline document viewing workflow with dedicated viewer component

EDITOR_DEFAULT_EDIT_MODE.md

@@ -1,324 +0,0 @@
-# EditorPanel 默认编辑模式
-
-## ✨ 功能说明
-
-EditorPanel现在默认以**编辑模式**打开，用户可以直接编辑文档内容，无需点击"编辑"按钮。
-
-### 修改内容
-
-1. **移除预览/编辑切换**: 不再有预览模式和编辑模式的切换
-2. **移除"编辑"按钮**: 工具栏不再显示"编辑"按钮
-3. **默认可编辑**: 打开编辑器后内容区域直接可编辑
-4. **简化工具栏**: 只保留"导出"、"保存"、"关闭"按钮
-
-## 🎨 界面对比
-
-### 修改前
-```
-┌─────────────────────────────────────────────────┐
-│ 文档标题  [导出] [编辑] [X]                      │
-├─────────────────────────────────────────────────┤
-│                                                 │
-│  # 地质报告 (预览模式，只读)                     │
-│                                                 │
-│  用户需要点击[编辑]按钮才能编辑                   │
-│                                                 │
-└─────────────────────────────────────────────────┘
-```
-
-### 修改后
-```
-┌─────────────────────────────────────────────────┐
-│ 文档标题  [导出] [保存] [X]                      │
-├─────────────────────────────────────────────────┤
-│                                                 │
-│  # 地质报告 (编辑器，直接可编辑)                  │
-│                                                 │
-│  用户可以立即开始编辑，无需额外操作                │
-│                                                 │
-└─────────────────────────────────────────────────┘
-```
-
-## 📝 修改的内容
-
-### 1. 移除的功能
-
-- ❌ `isEditMode` 状态变量
-- ❌ `handleToggleEdit` 函数（编辑/预览切换）
-- ❌ `handleCancelEdit` 函数（取消编辑）
-- ❌ "编辑"按钮
-- ❌ "取消"按钮  
-- ❌ Markdown预览模式
-- ❌ ReactMarkdown相关导入
-- ❌ markdownStyle样式
-- ❌ markdownComponents配置
-- ❌ markdownContent状态
-
-### 2. 保留的功能
-
-- ✅ 文档标题显示
-- ✅ "保存"按钮和功能
-- ✅ "导出"按钮和功能
-- ✅ "关闭"按钮
-- ✅ Markdown编辑器（TextArea）
-- ✅ 加载状态
-- ✅ 错误处理
-
-### 3. 简化的工具栏
-
-**之前（两种模式）:**
-```typescript
-// 预览模式
-[导出] [编辑] | [X]
-
-// 编辑模式
-[取消] [保存] | [X]
-```
-
-**现在（单一模式）:**
-```typescript
-// 始终编辑模式
-[导出] [保存] | [X]
-```
-
-## 🔧 技术细节
-
-### 状态管理简化
-
-**之前:**
-```typescript
-const [isEditMode, setIsEditMode] = useState(false);
-const [markdownContent, setMarkdownContent] = useState('');
-const [editContent, setEditContent] = useState('');
-
-// 需要同步两个内容状态
-```
-
-**现在:**
-```typescript
-const [editContent, setEditContent] = useState('');
-
-// 只需要一个内容状态
-```
-
-### 加载文档简化
-
-**之前:**
-```typescript
-const data = await getDocumentContent(docId);
-setMarkdownContent(data.content);  // 预览内容
-setEditContent(data.content);      // 编辑内容
-```
-
-**现在:**
-```typescript
-const data = await getDocumentContent(docId);
-setEditContent(data.content);      // 直接设置编辑内容
-```
-
-### 保存文档简化
-
-**之前:**
-```typescript
-await updateDocument(documentId, { content: editContent });
-setMarkdownContent(editContent);  // 同步到预览
-setIsEditMode(false);             // 切换到预览模式
-```
-
-**现在:**
-```typescript
-await updateDocument(documentId, { content: editContent });
-// 保持在编辑模式，无需切换
-```
-
-### 渲染逻辑简化
-
-**之前:**
-```typescript
-{isEditMode ? (
-  <TextArea value={editContent} ... />
-) : (
-  <ReactMarkdown>{markdownContent}</ReactMarkdown>
-)}
-```
-
-**现在:**
-```typescript
-<TextArea value={editContent} ... />
-// 始终显示编辑器
-```
-
-## 📊 代码量对比
-
-| 项目 | 之前 | 现在 | 减少 |
-|------|------|------|------|
-| 状态变量 | 4 | 3 | -25% |
-| 函数 | 6 | 4 | -33% |
-| 依赖导入 | 8 | 4 | -50% |
-| 样式定义 | 5 | 3 | -40% |
-| 条件渲染 | 3 | 0 | -100% |
-
-## 🎯 用户体验改进
-
-### 操作步骤对比
-
-**之前:**
-```
-1. 点击文档链接
-2. 等待加载
-3. 看到预览模式（只读）
-4. 点击"编辑"按钮
-5. 进入编辑模式
-6. 开始编辑
-```
-**6步操作**
-
-**现在:**
-```
-1. 点击文档链接  
-2. 等待加载
-3. 直接开始编辑
-```
-**3步操作，减少50%**
-
-### 认知负担
-
-**之前:**
-- 用户需要理解"预览"和"编辑"两种模式
-- 需要记住点击"编辑"按钮才能修改
-- 担心误操作时有"取消"按钮
-
-**现在:**
-- 只有一种模式：编辑
-- 打开即可编辑，符合直觉
-- 简化的界面，减少决策
-
-## 💡 设计理念
-
-### 为什么移除预览模式？
-
-1. **明确意图**: 用户点击文档链接的目的就是要编辑它
-2. **减少步骤**: 移除不必要的中间状态
-3. **所见即所编**: Markdown本身就很易读
-4. **简化界面**: 减少按钮，降低复杂度
-5. **快速上手**: 新用户无需学习模式切换
-
-### 如果需要预览怎么办？
-
-Markdown编辑器中的内容本身就是相对易读的：
-
-```markdown
-# 标题
-## 子标题
-- 列表项
-- 列表项
-
-这是一段文字...
-```
-
-如果确实需要预览渲染后的效果：
-- 可以使用"导出"功能查看Word文档
-- 或者在未来版本中添加"预览"标签页（分屏显示）
-
-## 🚀 使用方法
-
-### 1. 打开文档
-```
-在聊天中点击文档链接
-→ 编辑器自动打开
-→ 内容已加载到编辑器
-→ 光标就绪，可以立即输入
-```
-
-### 2. 编辑文档
-```
-直接在编辑器中修改Markdown内容
-→ 实时显示字符数和行数
-→ 支持Markdown语法高亮
-→ 自动保存草稿（未来功能）
-```
-
-### 3. 保存更改
-```
-点击[保存]按钮
-→ 内容保存到后端
-→ 提示"保存成功"
-→ 继续编辑
-```
-
-### 4. 导出文档
-```
-点击[导出]按钮
-→ 生成Word文档
-→ 自动下载
-→ 可在Word中查看最终效果
-```
-
-### 5. 关闭编辑器
-```
-点击[X]按钮
-→ 返回导出记录列表
-→ 未保存的更改会丢失（会有提示）
-```
-
-## ⚠️ 注意事项
-
-### 未保存提示
-
-建议在关闭编辑器前添加确认提示：
-```typescript
-const handleClose = () => {
-  if (hasUnsavedChanges) {
-    Modal.confirm({
-      title: '有未保存的更改',
-      content: '是否保存后再关闭？',
-      okText: '保存并关闭',
-      cancelText: '放弃更改',
-      onOk: async () => {
-        await handleSave();
-        onClose();
-      },
-      onCancel: () => {
-        onClose();
-      },
-    });
-  } else {
-    onClose();
-  }
-};
-```
-
-### 自动保存（未来功能）
-
-可以添加自动保存功能：
-```typescript
-useEffect(() => {
-  const timer = setInterval(() => {
-    if (hasChanges) {
-      handleSave();
-    }
-  }, 30000); // 每30秒自动保存
-
-  return () => clearInterval(timer);
-}, [hasChanges, handleSave]);
-```
-
-## 🔄 未来优化
-
-1. **分屏预览**: 左侧编辑器，右侧实时预览
-2. **Markdown工具栏**: 快捷按钮插入格式
-3. **语法高亮**: 编辑器中高亮显示Markdown语法
-4. **自动保存**: 定时保存或实时同步
-5. **版本历史**: 记录编辑历史，可回退
-6. **协作编辑**: 多人同时编辑同一文档
-
-## ✨ 总结
-
-- **简化流程**: 从6步减少到3步
-- **提升效率**: 打开即编辑，无需切换
-- **降低复杂度**: 移除模式切换，单一界面
-- **代码优化**: 减少50%的代码量和依赖
-
----
-
-**编辑器现在默认就是编辑模式，可以立即使用！** 🎉

src/components/DocumentManagement/DocumentManagement.tsx

@@ -131,18 +131,23 @@ export const DocumentManagement: React.FC<DocumentManagementProps> = ({
     setExporting((prev) => ({ ...prev, [documentId]: true }));
 
     try {
-      const result = await exportToWord({ documentId });
+      const result = await exportToWord({ 
+        documentId,
+        // styleId: null,  // 后端暂不支持样式ID（阶段 1 功能）
+      });
 
-      message.success('文档导出成功！');
+      message.success(`导出成功: ${result.fileName}`);
 
       if (result.warning) {
         message.warning(result.warning, 5);
       }
 
-      // Open download URL in new tab
-      window.open(result.downloadUrl, '_blank');
+      // The downloadUrl is now properly formatted with base URL in the service
+      if (result.downloadUrl) {
+        window.open(result.downloadUrl, '_blank');
+      }
     } catch (error) {
-      message.error('文档导出失败');
+      message.error('导出失败: ' + (error instanceof Error ? error.message : '未知错误'));
     } finally {
       setExporting((prev) => ({ ...prev, [documentId]: false }));
     }
@@ -334,7 +339,7 @@ export const DocumentManagement: React.FC<DocumentManagementProps> = ({
             key="export"
             type="primary"
             icon={<DownloadOutlined />}
-            loading={viewingDocument && exporting[viewingDocument.id]}
+            loading={viewingDocument ? exporting[viewingDocument.id] || false : false}
             onClick={() => viewingDocument && handleExportDocument(viewingDocument.id)}
           >
             导出Word

src/components/DocumentManagementLayout/DocumentManagementLayout.tsx

@@ -28,6 +28,7 @@ import {
   type DocumentStructure,
   type OutlineItem,
 } from '../../services/documentContentService';
+import { exportToWord } from '../../services/exportService';
 
 // ── Styles ────────────────────────────────────────────────────────────────
 
@@ -234,12 +235,36 @@ const DocumentManagementLayout: React.FC<DocumentManagementLayoutProps> = ({
   /**
    * Handle export button click
    */
-  const handleExport = useCallback(() => {
-    if (documentData) {
-      message.info('导出功能开发中');
-      // TODO: Implement export functionality
+  const handleExport = useCallback(async () => {
+    if (!selectedRecordId) {
+      message.warning('请先选择要导出的文档');
+      return;
     }
-  }, [documentData]);
+
+    try {
+      setLoading(true);
+      
+      const result = await exportToWord({
+        documentId: selectedRecordId,
+        // styleId: null,  // 后端暂不支持样式ID（阶段 1 功能）
+      });
+      
+      message.success(`导出成功: ${result.fileName}`);
+      
+      // Open download URL in new tab
+      if (result.downloadUrl) {
+        const baseUrl = import.meta.env.VITE_API_BASE_URL || 'http://192.168.0.195:8000';
+        const fullUrl = result.downloadUrl.startsWith('http') 
+          ? result.downloadUrl 
+          : `${baseUrl}${result.downloadUrl}`;
+        window.open(fullUrl, '_blank');
+      }
+    } catch (error) {
+      message.error('导出失败: ' + (error instanceof Error ? error.message : '未知错误'));
+    } finally {
+      setLoading(false);
+    }
+  }, [selectedRecordId]);
 
   /**
    * Handle share button click

src/components/DocumentOutline/DocumentOutline.tsx

@@ -0,0 +1,164 @@
+/**
+ * DocumentOutline Component
+ *
+ * Displays a hierarchical document outline (table of contents) with:
+ * - Nested heading structure
+ * - Active item highlighting
+ * - Click navigation to sections
+ * - Section numbering
+ *
+ * @module components/DocumentOutline
+ */
+
+import React from 'react';
+import { Tree } from 'antd';
+import type { DataNode } from 'antd/es/tree';
+import type { OutlineItem } from '../../services/documentContentService';
+import { FileTextOutlined } from '@ant-design/icons';
+
+// ── Styles ────────────────────────────────────────────────────────────────
+
+const containerStyle: React.CSSProperties = {
+  height: '100%',
+  display: 'flex',
+  flexDirection: 'column',
+  overflow: 'hidden',
+  backgroundColor: '#fafafa',
+};
+
+const headerStyle: React.CSSProperties = {
+  padding: '16px',
+  borderBottom: '1px solid #e8e8e8',
+  backgroundColor: '#ffffff',
+  fontWeight: 600,
+  fontSize: '14px',
+  color: '#262626',
+  display: 'flex',
+  alignItems: 'center',
+  gap: '8px',
+};
+
+const treeContainerStyle: React.CSSProperties = {
+  flex: 1,
+  overflow: 'auto',
+  padding: '12px',
+};
+
+// ── Component Props ─────────────────────────────────────────────────────────
+
+export interface DocumentOutlineProps {
+  /** Outline data (hierarchical structure) */
+  outline: OutlineItem[];
+  /** Currently active item ID */
+  activeId?: string;
+  /** Callback when outline item is clicked */
+  onItemClick: (item: OutlineItem) => void;
+}
+
+// ── Helper Functions ────────────────────────────────────────────────────────
+
+/**
+ * Convert OutlineItem to Ant Design Tree DataNode
+ */
+const convertToTreeData = (items: OutlineItem[], onItemClick: (item: OutlineItem) => void): DataNode[] => {
+  return items.map((item) => ({
+    key: item.id,
+    title: (
+      <span
+        style={{
+          fontSize: '13px',
+          color: '#595959',
+          cursor: 'pointer',
+        }}
+        onClick={() => onItemClick(item)}
+      >
+        {item.sectionNumber && <span style={{ marginRight: '8px', color: '#8c8c8c' }}>{item.sectionNumber}</span>}
+        {item.text}
+      </span>
+    ),
+    children: item.children && item.children.length > 0 ? convertToTreeData(item.children, onItemClick) : undefined,
+  }));
+};
+
+// ── Component ────────────────────────────────────────────────────────────────
+
+/**
+ * DocumentOutline
+ *
+ * Renders a hierarchical outline of the document with navigation support.
+ *
+ * @example
+ * ```tsx
+ * <DocumentOutline
+ *   outline={documentOutline}
+ *   activeId="heading-5"
+ *   onItemClick={(item) => scrollToSection(item.id)}
+ * />
+ * ```
+ */
+export const DocumentOutline: React.FC<DocumentOutlineProps> = ({
+  outline,
+  activeId,
+  onItemClick,
+}) => {
+  // Convert outline to tree data
+  const treeData = convertToTreeData(outline, onItemClick);
+
+  // Get all keys for default expansion
+  const getAllKeys = (items: OutlineItem[]): string[] => {
+    let keys: string[] = [];
+    items.forEach((item) => {
+      keys.push(item.id);
+      if (item.children && item.children.length > 0) {
+        keys = keys.concat(getAllKeys(item.children));
+      }
+    });
+    return keys;
+  };
+
+  const expandedKeys = getAllKeys(outline);
+
+  // Handle empty outline
+  if (!outline || outline.length === 0) {
+    return (
+      <div style={containerStyle}>
+        <div style={headerStyle}>
+          <FileTextOutlined />
+          <span>文档大纲</span>
+        </div>
+        <div style={{ ...treeContainerStyle, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+          <span style={{ color: '#8c8c8c', fontSize: '13px' }}>暂无大纲</span>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div style={containerStyle} data-testid="document-outline">
+      {/* Header */}
+      <div style={headerStyle}>
+        <FileTextOutlined />
+        <span>文档大纲</span>
+      </div>
+
+      {/* Tree */}
+      <div style={treeContainerStyle}>
+        <Tree
+          treeData={treeData}
+          defaultExpandAll
+          expandedKeys={expandedKeys}
+          selectedKeys={activeId ? [activeId] : []}
+          showLine={{ showLeafIcon: false }}
+          showIcon={false}
+          blockNode
+          style={{
+            backgroundColor: 'transparent',
+            fontSize: '13px',
+          }}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default DocumentOutline;

src/components/DocumentOutline/index.ts

@@ -0,0 +1,6 @@
+/**
+ * DocumentOutline Component Export
+ */
+
+export { DocumentOutline } from './DocumentOutline';
+export type { DocumentOutlineProps } from './DocumentOutline';

src/components/DocumentViewer/DocumentViewer.tsx

@@ -0,0 +1,242 @@
+/**
+ * DocumentViewer Component
+ *
+ * Renders structured document content with:
+ * - Headings with proper hierarchy
+ * - Paragraphs with text formatting
+ * - Tables with borders and styling
+ * - Scroll spy for active section tracking
+ *
+ * @module components/DocumentViewer
+ */
+
+import React, { useEffect, useRef } from 'react';
+import { Table } from 'antd';
+import type { ContentBlock } from '../../services/documentContentService';
+
+// ── Styles ────────────────────────────────────────────────────────────────
+
+const containerStyle: React.CSSProperties = {
+  height: '100%',
+  overflow: 'auto',
+  padding: '32px 48px',
+  backgroundColor: '#ffffff',
+};
+
+const contentStyle: React.CSSProperties = {
+  maxWidth: '900px',
+  margin: '0 auto',
+  fontSize: '14px',
+  lineHeight: '1.8',
+  color: '#262626',
+};
+
+const headingBaseStyle: React.CSSProperties = {
+  fontWeight: 600,
+  color: '#262626',
+  marginTop: '32px',
+  marginBottom: '16px',
+  scrollMarginTop: '80px', // For smooth scroll with fixed headers
+};
+
+const paragraphStyle: React.CSSProperties = {
+  marginBottom: '16px',
+  textAlign: 'justify',
+  lineHeight: '1.8',
+};
+
+const sectionNumberStyle: React.CSSProperties = {
+  marginRight: '12px',
+  color: '#8c8c8c',
+  fontWeight: 'normal',
+};
+
+// ── Component Props ─────────────────────────────────────────────────────────
+
+export interface DocumentViewerProps {
+  /** Content blocks to render */
+  content: ContentBlock[];
+  /** Currently active section ID */
+  activeId?: string;
+  /** Callback when active section changes (scroll spy) */
+  onActiveChange?: (id: string) => void;
+}
+
+// ── Component ────────────────────────────────────────────────────────────────
+
+/**
+ * DocumentViewer
+ *
+ * Displays structured document content with headings, paragraphs, and tables.
+ * Supports scroll-based navigation and active section tracking.
+ *
+ * @example
+ * ```tsx
+ * <DocumentViewer
+ *   content={documentContent}
+ *   activeId="heading-5"
+ *   onActiveChange={(id) => setActiveId(id)}
+ * />
+ * ```
+ */
+export const DocumentViewer: React.FC<DocumentViewerProps> = ({
+  content,
+  activeId,
+  onActiveChange,
+}) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  /**
+   * Scroll to active element when activeId changes
+   */
+  useEffect(() => {
+    if (activeId && containerRef.current) {
+      const element = containerRef.current.querySelector(`#${activeId}`);
+      if (element) {
+        element.scrollIntoView({ behavior: 'smooth', block: 'start' });
+      }
+    }
+  }, [activeId]);
+
+  /**
+   * Setup scroll spy to track active section
+   */
+  useEffect(() => {
+    if (!onActiveChange || !containerRef.current) return;
+
+    const container = containerRef.current;
+    const headings = container.querySelectorAll('[data-heading-id]');
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            const id = entry.target.getAttribute('data-heading-id');
+            if (id) {
+              onActiveChange(id);
+            }
+          }
+        });
+      },
+      {
+        root: container,
+        rootMargin: '-80px 0px -80% 0px',
+        threshold: 0,
+      }
+    );
+
+    headings.forEach((heading) => observer.observe(heading));
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [content, onActiveChange]);
+
+  /**
+   * Render a single content block
+   */
+  const renderBlock = (block: ContentBlock) => {
+    switch (block.type) {
+      case 'heading': {
+        const headingStyle: React.CSSProperties = {
+          ...headingBaseStyle,
+          fontSize: block.level === 1 ? '28px' : block.level === 2 ? '24px' : block.level === 3 ? '20px' : '16px',
+          borderBottom: block.level === 1 ? '1px solid #e8e8e8' : undefined,
+          paddingBottom: block.level === 1 ? '8px' : undefined,
+        };
+
+        const HeadingTag = `h${block.level}` as keyof JSX.IntrinsicElements;
+
+        return (
+          <HeadingTag
+            key={block.id}
+            id={block.id}
+            data-heading-id={block.id}
+            style={headingStyle}
+          >
+            {block.sectionNumber && <span style={sectionNumberStyle}>{block.sectionNumber}</span>}
+            {block.text}
+          </HeadingTag>
+        );
+      }
+
+      case 'paragraph': {
+        return (
+          <p key={block.id} id={block.id} style={paragraphStyle}>
+            {block.runs.map((run, runIndex) => {
+              const runStyle: React.CSSProperties = {
+                fontWeight: run.bold ? 600 : undefined,
+                fontStyle: run.italic ? 'italic' : undefined,
+                textDecoration: run.underline ? 'underline' : undefined,
+                fontFamily: run.fontName,
+                fontSize: run.fontSize ? `${run.fontSize}px` : undefined,
+                color: run.color,
+              };
+
+              return (
+                <span key={runIndex} style={runStyle}>
+                  {run.text}
+                </span>
+              );
+            })}
+          </p>
+        );
+      }
+
+      case 'table': {
+        // Convert table data to Ant Design Table format
+        const columns = block.rows[0]?.cells.map((cell, cellIndex) => ({
+          title: block.hasHeader ? cell.text : `列 ${cellIndex + 1}`,
+          dataIndex: `col${cellIndex}`,
+          key: `col${cellIndex}`,
+          render: (text: string) => text || '-',
+        })) || [];
+
+        const dataSource = (block.hasHeader ? block.rows.slice(1) : block.rows).map((row, rowIndex) => {
+          const rowData: Record<string, string> = { key: `row-${rowIndex}` };
+          row.cells.forEach((cell, cellIndex) => {
+            rowData[`col${cellIndex}`] = cell.text;
+          });
+          return rowData;
+        });
+
+        return (
+          <div key={block.id} id={block.id} style={{ marginBottom: '24px' }}>
+            <Table
+              columns={columns}
+              dataSource={dataSource}
+              pagination={false}
+              bordered
+              size="small"
+              style={{ fontSize: '13px' }}
+            />
+          </div>
+        );
+      }
+
+      default:
+        return null;
+    }
+  };
+
+  // Handle empty content
+  if (!content || content.length === 0) {
+    return (
+      <div style={containerStyle} ref={containerRef}>
+        <div style={{ ...contentStyle, textAlign: 'center', color: '#8c8c8c', padding: '40px 0' }}>
+          <p>文档内容为空</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div style={containerStyle} ref={containerRef} data-testid="document-viewer">
+      <div style={contentStyle}>
+        {content.map((block) => renderBlock(block))}
+      </div>
+    </div>
+  );
+};
+
+export default DocumentViewer;

src/components/DocumentViewer/index.ts

@@ -0,0 +1,6 @@
+/**
+ * DocumentViewer Component Export
+ */
+
+export { DocumentViewer } from './DocumentViewer';
+export type { DocumentViewerProps } from './DocumentViewer';

src/components/EditorPanel/EditorPanel.tsx

@@ -8,21 +8,24 @@
  * Features:
  * - Markdown preview with table support
  * - Edit mode with syntax highlighting
- * - Save changes back to backend
  * - Export to Word
  * - Close button to return to empty state
  *
  * @module components/EditorPanel
  */
 
-import React, { useState, useEffect, useCallback } from 'react';
-import { Button, Input, message, Spin, Divider } from 'antd';
+import React, { useState, useEffect, useCallback, useMemo } from 'react';
+import { Button, Input, message, Spin, Divider, Dropdown, Menu } from 'antd';
+import type { MenuProps } from 'antd';
 import {
   CloseOutlined,
-  SaveOutlined,
   DownloadOutlined,
+  FileWordOutlined,
+  FilePdfOutlined,
+  FileMarkdownOutlined,
+  DownOutlined,
 } from '@ant-design/icons';
-import { getDocumentContent, updateDocument } from '../../services/documentService';
+import { getDocumentContent } from '../../services/documentService';
 import { exportToWord } from '../../services/exportService';
 
 const { TextArea } = Input;
@@ -31,7 +34,60 @@ const { TextArea } = Input;
 
 const containerStyle: React.CSSProperties = {
   display: 'flex',
+  flexDirection: 'row',
+  height: '100%',
+  backgroundColor: '#f5f5f5',
+  overflow: 'hidden',
+};
+
+const outlinePanelStyle: React.CSSProperties = {
+  width: '260px',
+  minWidth: '200px',
+  maxWidth: '340px',
+  flexShrink: 0,
+  overflow: 'hidden',
+  borderRight: '1px solid #e8e8e8',
+  backgroundColor: '#fafafa',
+  display: 'flex',
   flexDirection: 'column',
+};
+
+const outlineHeaderStyle: React.CSSProperties = {
+  padding: '16px',
+  borderBottom: '1px solid #e8e8e8',
+  backgroundColor: '#ffffff',
+  fontWeight: 600,
+  fontSize: '14px',
+  color: '#262626',
+};
+
+const outlineContentStyle: React.CSSProperties = {
+  flex: 1,
+  overflow: 'auto',
+  padding: '12px',
+};
+
+const outlineItemStyle: React.CSSProperties = {
+  padding: '8px 12px',
+  cursor: 'pointer',
+  borderRadius: '4px',
+  fontSize: '13px',
+  color: '#595959',
+  marginBottom: '4px',
+  transition: 'all 0.2s',
+};
+
+const outlineItemActiveStyle: React.CSSProperties = {
+  ...outlineItemStyle,
+  backgroundColor: '#e6f7ff',
+  color: '#1890ff',
+  fontWeight: 500,
+};
+
+const editorContainerStyle: React.CSSProperties = {
+  display: 'flex',
+  flexDirection: 'column',
+  flex: 1,
   height: '100%',
   backgroundColor: '#ffffff',
   overflow: 'hidden',
@@ -85,6 +141,8 @@ const editorStyle: React.CSSProperties = {
   fontFamily: 'Monaco, Consolas, "Courier New", monospace',
   fontSize: '13px',
   lineHeight: '1.6',
+  border: 'none',
+  resize: 'none',
 };
 
 const loadingContainerStyle: React.CSSProperties = {
@@ -94,6 +152,15 @@ const loadingContainerStyle: React.CSSProperties = {
   height: '100%',
 };
 
+// ── Types ───────────────────────────────────────────────────────────────────
+
+interface OutlineItem {
+  id: string;
+  level: number;
+  text: string;
+  line: number;
+}
+
 // ── Component Props ─────────────────────────────────────────────────────────
 
 export interface EditorPanelProps {
@@ -128,11 +195,36 @@ export const EditorPanel: React.FC<EditorPanelProps> = ({
   onClose,
 }) => {
   const [loading, setLoading] = useState(false);
-  const [saving, setSaving] = useState(false);
   const [exporting, setExporting] = useState(false);
   
   const [documentTitle, setDocumentTitle] = useState(initialDocumentName || '');
   const [editContent, setEditContent] = useState('');
+  const [activeOutlineId, setActiveOutlineId] = useState<string>();
+
+  /**
+   * Parse outline from markdown content
+   */
+  const outline: OutlineItem[] = useMemo(() => {
+    const lines = editContent.split('\n');
+    const items: OutlineItem[] = [];
+    let counter = 0;
+
+    lines.forEach((line, index) => {
+      const match = line.match(/^(#{1,6})\s+(.+)$/);
+      if (match) {
+        const level = match[1].length;
+        const text = match[2].trim();
+        items.push({
+          id: `heading-${++counter}`,
+          level,
+          text,
+          line: index,
+        });
+      }
+    });
+
+    return items;
+  }, [editContent]);
 
   /**
    * Load document content from backend
@@ -168,43 +260,22 @@ export const EditorPanel: React.FC<EditorPanelProps> = ({
   }, [documentId, initialDocumentName, loadDocument]);
 
   /**
-   * Save edited content to backend
-   */
-  const handleSave = useCallback(async () => {
-    if (!documentId) return;
-    
-    try {
-      setSaving(true);
-      
-      await updateDocument(documentId, {
-        content: editContent,
-      });
-      
-      message.success('保存成功');
-    } catch (error) {
-      message.error('保存失败: ' + (error instanceof Error ? error.message : '未知错误'));
-    } finally {
-      setSaving(false);
-    }
-  }, [documentId, editContent]);
-
-  /**
    * Export document to Word format
    */
   const handleExport = useCallback(async () => {
     if (!documentId) return;
-    if (!documentId) return;
     
     try {
       setExporting(true);
       
       const result = await exportToWord({
         documentId,
-        styleId: 'default',
+        // styleId: null,  // 后端暂不支持样式ID（阶段 1 功能）
       });
       
       message.success(`导出成功: ${result.fileName}`);
       
+      // The downloadUrl is now properly formatted with base URL in the service
       if (result.downloadUrl) {
         window.open(result.downloadUrl, '_blank');
       }
@@ -215,6 +286,77 @@ export const EditorPanel: React.FC<EditorPanelProps> = ({
     }
   }, [documentId]);
 
+  /**
+   * Export to PDF (placeholder - not implemented yet)
+   */
+  const handleExportPDF = useCallback(async () => {
+    message.info('PDF 导出功能开发中，敬请期待');
+    // TODO: Implement PDF export
+  }, []);
+
+  /**
+   * Export to Markdown (download current content)
+   */
+  const handleExportMarkdown = useCallback(() => {
+    try {
+      const blob = new Blob([editContent], { type: 'text/markdown;charset=utf-8' });
+      const url = URL.createObjectURL(blob);
+      const link = document.createElement('a');
+      link.href = url;
+      link.download = `${documentTitle || '文档'}.md`;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      URL.revokeObjectURL(url);
+      message.success('Markdown 文件已下载');
+    } catch (error) {
+      message.error('Markdown 导出失败');
+    }
+  }, [editContent, documentTitle]);
+
+  /**
+   * Handle outline item click
+   */
+  const handleOutlineClick = useCallback((item: OutlineItem) => {
+    setActiveOutlineId(item.id);
+    
+    // Scroll to the line in textarea
+    const textarea = document.querySelector('textarea');
+    if (textarea) {
+      const lines = editContent.split('\n');
+      const beforeText = lines.slice(0, item.line).join('\n');
+      const position = beforeText.length + (item.line > 0 ? 1 : 0);
+      
+      textarea.focus();
+      textarea.setSelectionRange(position, position);
+      textarea.scrollTop = (item.line / lines.length) * textarea.scrollHeight;
+    }
+  }, [editContent]);
+
+  /**
+   * Export dropdown menu
+   */
+  const exportMenuItems: MenuProps['items'] = [
+    {
+      key: 'word',
+      icon: <FileWordOutlined />,
+      label: 'Word',
+      onClick: handleExport,
+    },
+    {
+      key: 'pdf',
+      icon: <FilePdfOutlined />,
+      label: 'PDF',
+      onClick: handleExportPDF,
+    },
+    {
+      key: 'markdown',
+      icon: <FileMarkdownOutlined />,
+      label: 'Markdown',
+      onClick: handleExportMarkdown,
+    },
+  ];
+
   // ── Render ────────────────────────────────────────────────────────────────
 
   // Loading state
@@ -234,53 +376,84 @@ export const EditorPanel: React.FC<EditorPanelProps> = ({
   // Document view
   return (
     <div style={containerStyle} data-testid="editor-panel">
-      {/* Toolbar */}
-      <div style={toolbarStyle}>
-        <div style={toolbarLeftStyle}>
-          <span style={titleStyle} title={documentTitle}>{documentTitle}</span>
-        </div>
-        
-        <div style={toolbarRightStyle}>
-          <Button
-            type="default"
-            size="small"
-            icon={<DownloadOutlined />}
-            onClick={handleExport}
-            loading={exporting}
-            title="导出为 Word 文档"
-          >
-            导出
-          </Button>
-          <Button
-            type="primary"
-            size="small"
-            icon={<SaveOutlined />}
-            onClick={handleSave}
-            loading={saving}
-            title="保存文档"
-          >
-            保存
-          </Button>
-          <Divider type="vertical" style={{ margin: '0 4px' }} />
-          <Button
-            type="text"
-            size="small"
-            icon={<CloseOutlined />}
-            onClick={onClose}
-            title="关闭编辑器"
-          />
+      {/* Left: Outline Panel */}
+      <div style={outlinePanelStyle}>
+        <div style={outlineHeaderStyle}>📑 文档大纲</div>
+        <div style={outlineContentStyle}>
+          {outline.length === 0 ? (
+            <div style={{ textAlign: 'center', padding: '20px', color: '#8c8c8c', fontSize: '13px' }}>
+              暂无大纲
+            </div>
+          ) : (
+            outline.map((item) => (
+              <div
+                key={item.id}
+                style={
+                  activeOutlineId === item.id
+                    ? outlineItemActiveStyle
+                    : outlineItemStyle
+                }
+                onClick={() => handleOutlineClick(item)}
+                onMouseEnter={(e) => {
+                  if (activeOutlineId !== item.id) {
+                    e.currentTarget.style.backgroundColor = '#f5f5f5';
+                  }
+                }}
+                onMouseLeave={(e) => {
+                  if (activeOutlineId !== item.id) {
+                    e.currentTarget.style.backgroundColor = 'transparent';
+                  }
+                }}
+              >
+                <div style={{ paddingLeft: `${(item.level - 1) * 12}px` }}>
+                  {item.text}
+                </div>
+              </div>
+            ))
+          )}
         </div>
       </div>
 
-      {/* Content area - 始终显示编辑器 */}
-      <div style={contentStyle}>
-        <TextArea
-          value={editContent}
-          onChange={(e) => setEditContent(e.target.value)}
-          style={editorStyle}
-          placeholder="在此输入 Markdown 内容..."
-          autoSize={{ minRows: 20 }}
-        />
+      {/* Right: Editor */}
+      <div style={editorContainerStyle}>
+        {/* Toolbar */}
+        <div style={toolbarStyle}>
+          <div style={toolbarLeftStyle}>
+            <span style={titleStyle} title={documentTitle}>{documentTitle}</span>
+          </div>
+          
+          <div style={toolbarRightStyle}>
+            <Dropdown menu={{ items: exportMenuItems }} placement="bottomRight">
+              <Button
+                type="default"
+                size="small"
+                icon={<DownloadOutlined />}
+                loading={exporting}
+              >
+                导出 <DownOutlined />
+              </Button>
+            </Dropdown>
+            <Divider type="vertical" style={{ margin: '0 4px' }} />
+            <Button
+              type="text"
+              size="small"
+              icon={<CloseOutlined />}
+              onClick={onClose}
+              title="关闭编辑器"
+            />
+          </div>
+        </div>
+
+        {/* Content area - 始终显示编辑器 */}
+        <div style={contentStyle}>
+          <TextArea
+            value={editContent}
+            onChange={(e) => setEditContent(e.target.value)}
+            style={editorStyle}
+            placeholder="在此输入 Markdown 内容..."
+            autoSize={{ minRows: 20 }}
+          />
+        </div>
       </div>
     </div>
   );

src/components/MarkdownPreview/MarkdownPreview.tsx

@@ -354,12 +354,12 @@ export const MarkdownPreview: React.FC<MarkdownPreviewProps> = ({
       
       const result = await exportToWord({
         documentId,
-        styleId: 'default',
+        // styleId: null,  // 后端暂不支持样式ID（阶段 1 功能）
       });
       
       message.success(`导出成功: ${result.fileName}`);
       
-      // Open download URL in new tab
+      // The downloadUrl is now properly formatted with base URL in the service
       if (result.downloadUrl) {
         window.open(result.downloadUrl, '_blank');
       }

src/services/exportService.ts

@@ -58,29 +58,78 @@ export const exportToWord = async (
   request: ExportDocRequest
 ): Promise<ExportDocResponse> => {
   try {
+    // Debug logging
+    console.log('[Export Service] Sending request:', {
+      url: '/api/v1/export/doc',
+      documentId: request.documentId,
+      styleId: request.styleId,
+    });
+    
     const response = await apiClient.post<ApiResponse<ExportDocResponse>>(
       '/api/v1/export/doc',
       request
     );
-    if (response.data.data.warning) {
+    
+    console.log('[Export Service] Response received:', {
+      status: response.status,
+      data: response.data,
+    });
+    
+    const data = response.data.data;
+    
+    if (data.warning) {
+      console.warn('[Export Service] Warning:', data.warning);
     }
     
-    return response.data.data;
+    // Ensure downloadUrl is properly formatted
+    if (data.downloadUrl && !data.downloadUrl.startsWith('http')) {
+      const baseURL = apiClient.defaults.baseURL || '';
+      data.downloadUrl = `${baseURL}${data.downloadUrl}`;
+    }
+    
+    console.log('[Export Service] Export successful:', {
+      fileName: data.fileName,
+      downloadUrl: data.downloadUrl,
+    });
+    
+    return data;
   } catch (error: any) {
+    // Enhanced error logging
+    console.error('[Export Service] Export failed:', {
+      status: error?.response?.status,
+      statusText: error?.response?.statusText,
+      data: error?.response?.data,
+      message: error?.message,
+      request: {
+        documentId: request.documentId,
+        styleId: request.styleId,
+      },
+    });
+    
     let friendlyMessage = '导出Word文档失败';
+    let detailMessage = '';
 
     if (error?.response?.status === 404) {
       friendlyMessage = '文档不存在，请确认文档ID正确';
+      detailMessage = `文档ID: ${request.documentId}`;
     } else if (error?.response?.status === 422) {
       friendlyMessage = '导出参数验证失败';
+      detailMessage = error?.response?.data?.detail || error?.response?.data?.message || '';
     } else if (error?.response?.status === 500) {
-      friendlyMessage = 'Markdown解析或文件写入失败';
+      friendlyMessage = '服务器内部错误';
+      // Try to extract detailed error from response
+      const backendError = error?.response?.data?.detail || error?.response?.data?.message || '';
+      detailMessage = backendError ? `后端错误: ${backendError}` : 'Markdown解析或文件写入失败';
     } else if (error?.code === 'ECONNREFUSED' || error?.code === 'NETWORK_ERROR') {
       friendlyMessage = '无法连接到导出服务器，请检查网络连接';
     }
 
     const message = getErrorMessage(error);
-    throw new Error(`${friendlyMessage}: ${message}`, { cause: error });
+    const fullMessage = detailMessage 
+      ? `${friendlyMessage}: ${detailMessage}. ${message}` 
+      : `${friendlyMessage}: ${message}`;
+      
+    throw new Error(fullMessage, { cause: error });
   }
 };
 

src/types/export.ts

@@ -34,11 +34,17 @@ export type ExportRecordListItem = ExportRecord;
  * 
  * Note: The backend now requires documentId and reads content from the documents table.
  * File names are auto-generated by the backend from the document's first line + timestamp.
+ * 
+ * styleId is optional and currently NOT supported in Phase 1 backend implementation.
  */
 export interface ExportDocRequest {
   /** Document ID (required) - backend reads content from documents table */
   documentId: string;
-  /** Style ID (optional, uses default if not provided) */
+  /** 
+   * Style ID (optional, NOT supported in Phase 1)
+   * @deprecated Phase 1 backend does not support custom styles
+   * Leave undefined or null to use default backend behavior
+   */
   styleId?: string | null;
 }