feat(编辑器): 添加文件下载和安全文件名处理功能，优化图片源验证

.env

@@ -14,6 +14,6 @@ VITE_DEBUG=false
 
 # External AI services are called directly by the browser.
 VITE_AI_API_URL=http://114.242.25.27:3000/api/v1/chat/completions
-VITE_AI_API_KEY=
+VITE_AI_API_KEY=XAgent-eVVoqEO7WJYwzCc5wQ8meEtIuyIQgHhxYvpd6fSwa7BwJW8CaBom4
 VITE_WORKFLOW_API_URL=http://114.242.25.27:3000/api/v2/chat/completions
-VITE_WORKFLOW_API_KEY=
+VITE_WORKFLOW_API_KEY=XAgent-mWHBqQw06psUYRqx6PrHWiKdfY05ebt7I9drDBHzaG9QQesIkVEICj

src/components/ChatPanel/MessageItem.tsx

@@ -17,6 +17,7 @@ import { formatDate } from '../../utils/formatDate';
 import type { ChatMessage } from '../../types/chat';
 import { useDocumentStore } from '../../stores/documentStore';
 import { useChatStore } from '../../stores/chatStore';
+import { downloadBlob, getFileNameFromContentDisposition } from '../../utils/download';
 
 const { Text } = Typography;
 
@@ -246,32 +247,14 @@ const MessageItem: React.FC<MessageItemProps> = memo(
           );
           
           // Get filename from export record or Content-Disposition header
-          let fileName = exportRecord.fileName || 'document.doc';
-          const contentDisposition = response.headers['content-disposition'];
-          if (contentDisposition) {
-            const match = contentDisposition.match(/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/);
-            if (match && match[1]) {
-              fileName = match[1].replace(/['"]/g, '');
-            }
-          }
+          const fileName = getFileNameFromContentDisposition(
+            response.headers['content-disposition'],
+            exportRecord.fileName || 'document.doc'
+          );
           
           // Create blob and download
           const blob = new Blob([response.data], { type: 'application/msword' });
-          const blobUrl = URL.createObjectURL(blob);
-          
-          const link = document.createElement('a');
-          link.href = blobUrl;
-          link.download = fileName;
-          link.style.display = 'none';
-          
-          document.body.appendChild(link);
-          link.click();
-          
-          // Clean up
-          setTimeout(() => {
-            document.body.removeChild(link);
-            URL.revokeObjectURL(blobUrl);
-          }, 100);
+          downloadBlob(blob, fileName);
         } catch (error) {
           antdMessage.error(
             `下载文档失败: ${error instanceof Error ? error.message : '未知错误'}`

src/components/Editor/blocks/ImageBlock.tsx

@@ -16,7 +16,11 @@ import type { ImageBlock as ImageBlockType } from '../../../types/editor';
 import { useEditorStore } from '../../../stores/editorStore';
 import { BlockMenu } from './BlockMenu';
 import { ToolbarLauncher } from '../RichTextEditor/RichTextToolbar';
-import { validateImageDimensions, validateImageUpload } from '../../../utils/imageUpload';
+import {
+  isSafeImageSource,
+  validateImageDimensions,
+  validateImageUpload,
+} from '../../../utils/imageUpload';
 import './ImageBlock.css';
 
 export interface ImageBlockProps {
@@ -502,7 +506,7 @@ export const ImageBlock: React.FC<ImageBlockProps> = ({
 
       {/* 图片容器 */}
       <div className={`image-block align-${block.style.align}`}>
-        {block.content ? (
+        {block.content && isSafeImageSource(block.content) ? (
           <div
             className="image-wrapper"
             style={{

src/services/aiChatService.ts

@@ -11,6 +11,8 @@
  * @module services/aiChatService
  */
 
+import { fetchWithTimeout } from '../utils/fetchWithTimeout';
+
 /**
  * Message content types
  */
@@ -99,7 +101,7 @@ export const sendChatCompletion = async (
       return mockChatCompletion(request);
     }
 
-    const response = await fetch(config.apiUrl, {
+    const response = await fetchWithTimeout(config.apiUrl, {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',
@@ -161,7 +163,7 @@ export const sendStreamingChatCompletion = async (
       return;
     }
 
-    const response = await fetch(config.apiUrl, {
+    const response = await fetchWithTimeout(config.apiUrl, {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',

src/services/clientExportService.ts

@@ -1,4 +1,5 @@
 import type { DocumentBlock, RichText, TableBlock } from '../types/editor';
+import { downloadBlob, safeFileName } from '../utils/download';
 
 function toPlainText(content: string | RichText[]): string {
   return typeof content === 'string'
@@ -47,19 +48,6 @@ function blockToMarkdown(block: DocumentBlock): string {
   }
 }
 
-function downloadBlob(blob: Blob, fileName: string): void {
-  const url = URL.createObjectURL(blob);
-  const anchor = document.createElement('a');
-  anchor.href = url;
-  anchor.download = fileName;
-  anchor.click();
-  URL.revokeObjectURL(url);
-}
-
-function safeFileName(title: string): string {
-  return (title || '未命名文档').replace(/[\\/:*?"<>|]/g, '_');
-}
-
 export function exportBlocksToMarkdown(blocks: DocumentBlock[], title: string): void {
   downloadBlob(
     new Blob([blocksToMarkdown(blocks)], { type: 'text/markdown;charset=utf-8' }),

src/services/documentContentService.ts

@@ -7,6 +7,9 @@
  * @module services/documentContentService
  */
 
+import apiClient from './api';
+import { getFileNameFromContentDisposition } from '../utils/download';
+
 /**
  * Text run with formatting information
  */
@@ -102,29 +105,21 @@ export const fetchDocumentStructure = async (
   userId: string
 ): Promise<DocumentStructure> => {
   try {
-    // Construct the download URL using the API base URL
-    const baseUrl = import.meta.env.VITE_API_BASE_URL || 'http://192.168.0.195:8000';
-    const downloadUrl = `${baseUrl}/api/v1/export/records/${recordId}/download?userId=${encodeURIComponent(userId)}`;
-    
-    // Download the Word file as a blob
-    const response = await fetch(downloadUrl);
-    
-    if (!response.ok) {
-      throw new Error(`HTTP error! status: ${response.status}`);
-    }
-    
-    const blob = await response.blob();
-    const arrayBuffer = await blob.arrayBuffer();
+    const response = await apiClient.get<ArrayBuffer>(
+      `/api/v1/export/records/${encodeURIComponent(recordId)}/download`,
+      {
+        params: { userId },
+        responseType: 'arraybuffer',
+      }
+    );
+
+    const arrayBuffer = response.data;
     
     // Extract filename from Content-Disposition header if available
-    let fileName = '文档预览.docx';
-    const contentDisposition = response.headers.get('Content-Disposition');
-    if (contentDisposition) {
-      const match = contentDisposition.match(/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/);
-      if (match && match[1]) {
-        fileName = match[1].replace(/['"]/g, '');
-      }
-    }
+    const fileName = getFileNameFromContentDisposition(
+      response.headers['content-disposition'],
+      '文档预览.docx'
+    );
     
     // Parse the Word document using mammoth
     // We'll use mammoth's convertToHtml which preserves structure better

src/services/exportRecordService.ts

@@ -19,6 +19,7 @@ import type {
   ExportRecordListFilters,
   StorageInfo,
 } from '../types/export';
+import { downloadBlob, getFileNameFromContentDisposition } from '../utils/download';
 
 /**
  * List export records with pagination
@@ -101,32 +102,14 @@ export const downloadExportRecord = async (
     );
     
     // Get filename from Content-Disposition header
-    let fileName = `export-${recordId}.doc`;
-    const contentDisposition = response.headers['content-disposition'];
-    if (contentDisposition) {
-      const match = contentDisposition.match(/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/);
-      if (match && match[1]) {
-        fileName = match[1].replace(/['"]/g, '');
-      }
-    }
+    const fileName = getFileNameFromContentDisposition(
+      response.headers['content-disposition'],
+      `export-${recordId}.doc`
+    );
     
     // Create blob and download
     const blob = new Blob([response.data], { type: 'application/msword' });
-    const blobUrl = URL.createObjectURL(blob);
-    
-    const link = document.createElement('a');
-    link.href = blobUrl;
-    link.download = fileName;
-    link.style.display = 'none';
-    
-    document.body.appendChild(link);
-    link.click();
-    
-    // Clean up
-    setTimeout(() => {
-      document.body.removeChild(link);
-      URL.revokeObjectURL(blobUrl);
-    }, 100);
+    downloadBlob(blob, fileName);
   } catch (error) {
     const message = getErrorMessage(error);
     throw new Error(`下载文件失败: ${message}`, { cause: error });

src/services/sessionService.ts

@@ -4,9 +4,7 @@
  * 提供会话历史的增删改查功能
  */
 
-import axios from 'axios';
-
-const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || 'http://localhost:8000';
+import apiClient from './api';
 
 // ══════════════════════════════════════════════════════════════════════════════
 // 类型定义
@@ -58,9 +56,7 @@ export interface ListDocumentsResponse {
 export async function deleteSessionHistory(
   sessionId: string
 ): Promise<DeleteSessionResponse> {
-  const response = await axios.delete<DeleteSessionResponse>(
-    `${API_BASE_URL}/api/v1/documents/${sessionId}`
-  );
+  const response = await apiClient.delete<DeleteSessionResponse>(`/api/v1/documents/${sessionId}`);
   return response.data;
 }
 
@@ -79,8 +75,8 @@ export async function getSessionDocuments(
   page: number = 1,
   pageSize: number = 20
 ): Promise<ListDocumentsResponse> {
-  const response = await axios.get<ListDocumentsResponse>(
-    `${API_BASE_URL}/api/v1/documents`,
+  const response = await apiClient.get<ListDocumentsResponse>(
+    '/api/v1/documents',
     {
       params: {
         userId,
@@ -107,8 +103,8 @@ export async function getSessionList(userId: string): Promise<{
   }>;
 }> {
   // 获取所有文档
-  const response = await axios.get<ListDocumentsResponse>(
-      `${API_BASE_URL}/api/v1/documents`,
+    const response = await apiClient.get<ListDocumentsResponse>(
+      '/api/v1/documents',
       {
         params: {
           userId,

src/services/workflowService.ts

@@ -11,6 +11,7 @@
  */
 
 import type { ExportRecordInfo } from '../types/chat';
+import { fetchWithTimeout } from '../utils/fetchWithTimeout';
 
 /**
  * Workflow chat message
@@ -165,7 +166,7 @@ export const triggerDocumentWorkflow = async (
     // 1. chatId: 带时间戳的唯一ID,确保每次请求都被视为新请求
     // 2. sessionId: 原始会话ID,传递给工作流,工作流会将其传递给后端 /api/v1/export/records
     // 3. 后端在创建文档时会使用这个sessionId,确保同一会话的多个文档共用相同的session_id
-    const response = await fetch(config.apiUrl, {
+    const response = await fetchWithTimeout(config.apiUrl, {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',

src/stores/chatStore.ts

@@ -32,18 +32,52 @@ import { shouldTriggerWorkflow, triggerDocumentWorkflow } from '../services/work
 
 const STORAGE_KEY = 'ax-chat-sessions';
 const MAX_SESSIONS = 50; // Maximum number of sessions to keep
+const MAX_MESSAGES_PER_SESSION = 200;
 
 // ── Utility Functions ──────────────────────────────────────────────────────
 
 /**
  * Load sessions from localStorage
  */
+const isChatMessage = (value: unknown): value is ChatMessage => {
+  if (!value || typeof value !== 'object') return false;
+  const message = value as Partial<ChatMessage>;
+  return (
+    typeof message.id === 'string' &&
+    (message.role === 'user' || message.role === 'assistant') &&
+    typeof message.content === 'string' &&
+    typeof message.timestamp === 'number'
+  );
+};
+
+const isChatSession = (value: unknown): value is ChatSession => {
+  if (!value || typeof value !== 'object') return false;
+  const session = value as Partial<ChatSession>;
+  return (
+    typeof session.id === 'string' &&
+    typeof session.title === 'string' &&
+    Array.isArray(session.messages) &&
+    session.messages.every(isChatMessage) &&
+    typeof session.createdAt === 'number' &&
+    typeof session.updatedAt === 'number' &&
+    Array.isArray(session.exportRecords)
+  );
+};
+
 const loadSessionsFromStorage = (): ChatSession[] => {
   try {
     const stored = localStorage.getItem(STORAGE_KEY);
     if (!stored) return [];
     
-    const sessions = JSON.parse(stored) as ChatSession[];
+    const parsed: unknown = JSON.parse(stored);
+    if (!Array.isArray(parsed)) return [];
+
+    const sessions = parsed
+      .filter(isChatSession)
+      .map((session) => ({
+        ...session,
+        messages: session.messages.slice(-MAX_MESSAGES_PER_SESSION),
+      }));
     // Sort by updatedAt descending (most recent first)
     return sessions.sort((a, b) => b.updatedAt - a.updatedAt);
   } catch (error) {
@@ -58,9 +92,13 @@ const loadSessionsFromStorage = (): ChatSession[] => {
 const saveSessionsToStorage = (sessions: ChatSession[]): void => {
   try {
     // Keep only the most recent MAX_SESSIONS
-    const sessionsToSave = sessions
+    const sessionsToSave = [...sessions]
       .sort((a, b) => b.updatedAt - a.updatedAt)
-      .slice(0, MAX_SESSIONS);
+      .slice(0, MAX_SESSIONS)
+      .map((session) => ({
+        ...session,
+        messages: session.messages.slice(-MAX_MESSAGES_PER_SESSION),
+      }));
     
     localStorage.setItem(STORAGE_KEY, JSON.stringify(sessionsToSave));
   } catch (error) {

src/utils/download.ts

@@ -0,0 +1,45 @@
+const UNSAFE_FILE_NAME_CHARS = /[\\/:*?"<>|]/g;
+
+export function safeFileName(fileName: string, fallback = 'download'): string {
+  const normalized = Array.from(fileName, (character) =>
+    character.charCodeAt(0) < 32 ? '_' : character
+  )
+    .join('')
+    .replace(UNSAFE_FILE_NAME_CHARS, '_')
+    .replace(/[. ]+$/g, '')
+    .trim();
+
+  return normalized || fallback;
+}
+
+export function getFileNameFromContentDisposition(
+  header: string | null | undefined,
+  fallback: string
+): string {
+  if (!header) return fallback;
+
+  const utf8Match = header.match(/filename\*=UTF-8''([^;]+)/i);
+  if (utf8Match?.[1]) {
+    try {
+      return safeFileName(decodeURIComponent(utf8Match[1]), fallback);
+    } catch {
+      return fallback;
+    }
+  }
+
+  const match = header.match(/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/i);
+  const value = match?.[1]?.replace(/^['"]|['"]$/g, '').trim();
+  return value ? safeFileName(value, fallback) : fallback;
+}
+
+export function downloadBlob(blob: Blob, fileName: string): void {
+  const url = URL.createObjectURL(blob);
+  const anchor = document.createElement('a');
+  anchor.href = url;
+  anchor.download = safeFileName(fileName);
+  anchor.style.display = 'none';
+  document.body.appendChild(anchor);
+  anchor.click();
+  anchor.remove();
+  URL.revokeObjectURL(url);
+}

src/utils/fetchWithTimeout.ts

@@ -0,0 +1,14 @@
+const DEFAULT_FETCH_TIMEOUT_MS = 30_000;
+
+export function fetchWithTimeout(
+  input: RequestInfo | URL,
+  init: RequestInit = {},
+  timeoutMs = DEFAULT_FETCH_TIMEOUT_MS
+): Promise<Response> {
+  const timeoutSignal = AbortSignal.timeout(timeoutMs);
+  const signal = init.signal
+    ? AbortSignal.any([init.signal, timeoutSignal])
+    : timeoutSignal;
+
+  return fetch(input, { ...init, signal });
+}

src/utils/imageUpload.ts

@@ -10,6 +10,16 @@ const ALLOWED_IMAGE_TYPES = new Set([
   'image/bmp',
 ]);
 
+const ALLOWED_DATA_IMAGE_PREFIX = /^data:image\/(?:jpeg|png|gif|webp|bmp);base64,/i;
+
+export function isSafeImageSource(source: string): boolean {
+  const value = source.trim();
+  if (!value) return false;
+  if (ALLOWED_DATA_IMAGE_PREFIX.test(value)) return true;
+  if (/^https?:\/\//i.test(value)) return true;
+  return value.startsWith('/') || value.startsWith('./');
+}
+
 export function validateImageUpload(file: Pick<File, 'size' | 'type'>): string | null {
   if (!Number.isFinite(file.size) || file.size <= 0 || file.size > MAX_IMAGE_SIZE_BYTES) {
     return '图片大小必须大于0且不能超过10MB';

src/utils/index.ts

@@ -4,7 +4,9 @@
  */
 
 export * from './debounce';
+export * from './download';
 export * from './formatDate';
+export * from './fetchWithTimeout';
 export * from './notification';
 export * from './storage';
 export * from './validation';