diff --git a/Yi.Ai.Vue3/src/composables/chat/index.ts b/Yi.Ai.Vue3/src/composables/chat/index.ts
new file mode 100644
index 00000000..8d945f5e
--- /dev/null
+++ b/Yi.Ai.Vue3/src/composables/chat/index.ts
@@ -0,0 +1,6 @@
+// Chat 相关 composables 统一导出
+
+export * from './useImageCompression';
+export * from './useFilePaste';
+export * from './useFileParsing';
+export * from './useChatSender';
diff --git a/Yi.Ai.Vue3/src/composables/chat/useChatSender.ts b/Yi.Ai.Vue3/src/composables/chat/useChatSender.ts
new file mode 100644
index 00000000..6c5ad5fd
--- /dev/null
+++ b/Yi.Ai.Vue3/src/composables/chat/useChatSender.ts
@@ -0,0 +1,301 @@
+import { useHookFetch } from 'hook-fetch/vue';
+import { ElMessage } from 'element-plus';
+import { ref, computed } from 'vue';
+import type { AnyObject } from 'typescript-api-pro';
+import { deleteMessages, unifiedSend } from '@/api';
+import { useModelStore } from '@/stores/modules/model';
+import { convertToApiFormat, parseStreamChunk, type UnifiedMessage } from '@/utils/apiFormatConverter';
+import type { BubbleProps } from 'vue-element-plus-x/types/Bubble';
+import type { ThinkingStatus } from 'vue-element-plus-x/types/Thinking';
+
+export type MessageRole = 'ai' | 'user' | 'assistant' | string;
+
+export interface MessageItem extends BubbleProps {
+  key: number | string;
+  id?: number | string;
+  role: MessageRole;
+  avatar?: string;
+  showAvatar?: boolean;
+  thinkingStatus?: ThinkingStatus;
+  thinlCollapse?: boolean;
+  reasoning_content?: string;
+  images?: Array<{ url: string; name?: string }>;
+  files?: Array<{ name: string; size: number }>;
+  creationTime?: string;
+  tokenUsage?: { prompt: number; completion: number; total: number };
+}
+
+export interface UseChatSenderOptions {
+  sessionId: string;
+  onError?: (error: any) => void;
+  onMessageComplete?: () => void;
+}
+
+// 创建统一发送请求的包装函数
+function unifiedSendWrapper(params: any) {
+  const { data, apiType, modelId, sessionId } = params;
+  return unifiedSend(data, apiType, modelId, sessionId);
+}
+
+/**
+ * Composable: 聊天发送逻辑
+ */
+export function useChatSender(options: UseChatSenderOptions) {
+  const { sessionId, onError, onMessageComplete } = options;
+  const modelStore = useModelStore();
+
+  const isSending = ref(false);
+  const isThinking = ref(false);
+  const currentRequestApiType = ref('');
+
+  // 临时ID计数器
+  let tempIdCounter = -1;
+
+  const { stream, loading: isLoading, cancel } = useHookFetch({
+    request: unifiedSendWrapper,
+    onError: async (error) => {
+      isLoading.value = false;
+      if (error.status === 403) {
+        const data = await error.response.json();
+        ElMessage.error(data.error.message);
+        return Promise.reject(data);
+      }
+      if (error.status === 401) {
+        ElMessage.error('登录已过期，请重新登录！');
+        // 需要访问 userStore，这里通过回调处理
+        onError?.(error);
+      }
+    },
+  });
+
+  /**
+   * 处理流式响应的数据块
+   */
+  function handleDataChunk(
+    chunk: AnyObject,
+    messages: MessageItem[],
+    onUpdate: (messages: MessageItem[]) => void,
+  ) {
+    try {
+      const parsed = parseStreamChunk(
+        chunk,
+        currentRequestApiType.value || 'Completions',
+      );
+
+      const latest = messages[messages.length - 1];
+      if (!latest) return;
+
+      // 处理 token 使用情况
+      if (parsed.usage) {
+        latest.tokenUsage = {
+          prompt: parsed.usage.prompt_tokens || 0,
+          completion: parsed.usage.completion_tokens || 0,
+          total: parsed.usage.total_tokens || 0,
+        };
+      }
+
+      // 处理推理内容
+      if (parsed.reasoning_content) {
+        latest.thinkingStatus = 'thinking';
+        latest.loading = true;
+        latest.thinlCollapse = true;
+        if (!latest.reasoning_content) latest.reasoning_content = '';
+        latest.reasoning_content += parsed.reasoning_content;
+      }
+
+      // 处理普通内容
+      if (parsed.content) {
+        const thinkStart = parsed.content.includes('<think>');
+        const thinkEnd = parsed.content.includes('</think>');
+
+        if (thinkStart) isThinking.value = true;
+        if (thinkEnd) isThinking.value = false;
+
+        if (isThinking.value) {
+          latest.thinkingStatus = 'thinking';
+          latest.loading = true;
+          latest.thinlCollapse = true;
+          if (!latest.reasoning_content) latest.reasoning_content = '';
+          latest.reasoning_content += parsed.content
+            .replace('<think>', '')
+            .replace('</think>', '');
+        } else {
+          latest.thinkingStatus = 'end';
+          latest.loading = false;
+          if (!latest.content) latest.content = '';
+          latest.content += parsed.content;
+        }
+      }
+
+      onUpdate([...messages]);
+    }
+    catch (err) {
+      console.error('解析数据时出错:', err);
+    }
+  }
+
+  /**
+   * 发送消息
+   */
+  async function sendMessage(
+    chatContent: string,
+    messages: MessageItem[],
+    imageFiles: any[],
+    textFiles: any[],
+    onUpdate: (messages: MessageItem[]) => void,
+  ): Promise<void> {
+    if (isSending.value) return;
+
+    isSending.value = true;
+    currentRequestApiType.value = modelStore.currentModelInfo.modelApiType || 'Completions';
+
+    try {
+      // 添加用户消息和AI消息
+      const tempId = tempIdCounter--;
+      const userMessage: MessageItem = {
+        key: tempId,
+        id: tempId,
+        role: 'user',
+        placement: 'end',
+        isMarkdown: false,
+        loading: false,
+        content: chatContent,
+        images: imageFiles.length > 0
+          ? imageFiles.map(f => ({ url: f.base64!, name: f.name }))
+          : undefined,
+        files: textFiles.length > 0
+          ? textFiles.map(f => ({ name: f.name!, size: f.fileSize! }))
+          : undefined,
+        shape: 'corner',
+      };
+
+      const aiTempId = tempIdCounter--;
+      const aiMessage: MessageItem = {
+        key: aiTempId,
+        id: aiTempId,
+        role: 'assistant',
+        placement: 'start',
+        isMarkdown: true,
+        loading: true,
+        content: '',
+        reasoning_content: '',
+        thinkingStatus: 'start',
+        thinlCollapse: false,
+        noStyle: true,
+      };
+
+      messages = [...messages, userMessage, aiMessage];
+      onUpdate(messages);
+
+      // 组装消息内容
+      const messagesContent = messages.slice(0, -1).slice(-6).map((item: MessageItem) => {
+        const baseMessage: any = { role: item.role };
+
+        if (item.role === 'user' && item.key === messages.length - 2) {
+          const contentArray: any[] = [];
+
+          if (item.content) {
+            contentArray.push({ type: 'text', text: item.content });
+          }
+
+          // 添加文本文件内容
+          if (textFiles.length > 0) {
+            let fileContent = '\n\n';
+            textFiles.forEach((fileItem, index) => {
+              fileContent += `<ATTACHMENT_FILE>\n`;
+              fileContent += `<FILE_INDEX>File ${index + 1}</FILE_INDEX>\n`;
+              fileContent += `<FILE_NAME>${fileItem.name}</FILE_NAME>\n`;
+              fileContent += `<FILE_CONTENT>\n${fileItem.fileContent}\n</FILE_CONTENT>\n`;
+              fileContent += `</ATTACHMENT_FILE>\n`;
+              if (index < textFiles.length - 1) fileContent += '\n';
+            });
+            contentArray.push({ type: 'text', text: fileContent });
+          }
+
+          // 添加图片
+          imageFiles.forEach((fileItem) => {
+            if (fileItem.base64) {
+              contentArray.push({
+                type: 'image_url',
+                image_url: { url: fileItem.base64, name: fileItem.name },
+              });
+            }
+          });
+
+          baseMessage.content = contentArray.length > 1 || imageFiles.length > 0 || textFiles.length > 0
+            ? contentArray
+            : item.content;
+        } else {
+          baseMessage.content = (item.role === 'ai' || item.role === 'assistant') && item.content.length > 10000
+            ? `${item.content.substring(0, 10000)}...（内容过长，已省略）`
+            : item.content;
+        }
+
+        return baseMessage;
+      });
+
+      const apiType = modelStore.currentModelInfo.modelApiType || 'Completions';
+      const convertedRequest = convertToApiFormat(
+        messagesContent as UnifiedMessage[],
+        apiType,
+        modelStore.currentModelInfo.modelId ?? '',
+        true,
+      );
+
+      const modelId = modelStore.currentModelInfo.modelId ?? '';
+
+      for await (const chunk of stream({
+        data: convertedRequest,
+        apiType,
+        modelId,
+        sessionId,
+      })) {
+        handleDataChunk(chunk.result as AnyObject, messages, onUpdate);
+      }
+    }
+    catch (err: any) {
+      if (err.name !== 'AbortError') {
+        console.error('Fetch error:', err);
+        onError?.(err);
+      }
+    }
+    finally {
+      isSending.value = false;
+      const latest = messages[messages.length - 1];
+      if (latest) {
+        latest.typing = false;
+        latest.loading = false;
+        if (latest.thinkingStatus === 'thinking') {
+          latest.thinkingStatus = 'end';
+        }
+      }
+      onUpdate([...messages]);
+      onMessageComplete?.();
+    }
+  }
+
+  /**
+   * 取消发送
+   */
+  function cancelSend(messages: MessageItem[], onUpdate: (messages: MessageItem[]) => void) {
+    cancel();
+    isSending.value = false;
+    const latest = messages[messages.length - 1];
+    if (latest) {
+      latest.typing = false;
+      latest.loading = false;
+      if (latest.thinkingStatus === 'thinking') {
+        latest.thinkingStatus = 'end';
+      }
+    }
+    onUpdate([...messages]);
+  }
+
+  return {
+    isSending,
+    isLoading,
+    sendMessage,
+    cancelSend,
+    handleDataChunk,
+  };
+}
diff --git a/Yi.Ai.Vue3/src/composables/chat/useFileParsing.ts b/Yi.Ai.Vue3/src/composables/chat/useFileParsing.ts
new file mode 100644
index 00000000..c62d15b9
--- /dev/null
+++ b/Yi.Ai.Vue3/src/composables/chat/useFileParsing.ts
@@ -0,0 +1,254 @@
+import mammoth from 'mammoth';
+import * as pdfjsLib from 'pdfjs-dist';
+import * as XLSX from 'xlsx';
+import { ElMessage } from 'element-plus';
+
+// 配置 PDF.js worker
+pdfjsLib.GlobalWorkerOptions.workerSrc = `https://cdn.jsdelivr.net/npm/pdfjs-dist@${pdfjsLib.version}/build/pdf.worker.min.mjs`;
+
+export interface ParseOptions {
+  maxTextFileLength?: number;
+  maxWordLength?: number;
+  maxExcelRows?: number;
+  maxPdfPages?: number;
+}
+
+export interface ParsedResult {
+  content: string;
+  isTruncated: boolean;
+  totalSize?: number;
+  extractedSize?: number;
+}
+
+// 文本文件扩展名列表
+const TEXT_EXTENSIONS = [
+  'txt', 'log', 'md', 'markdown', 'json', 'xml', 'yaml', 'yml', 'toml',
+  'ini', 'conf', 'config', 'js', 'jsx', 'ts', 'tsx', 'vue', 'html', 'htm',
+  'css', 'scss', 'sass', 'less', 'java', 'c', 'cpp', 'h', 'hpp', 'cs',
+  'py', 'rb', 'go', 'rs', 'swift', 'kt', 'php', 'sh', 'bash', 'sql',
+  'csv', 'tsv',
+];
+
+/**
+ * 判断是否为文本文件
+ */
+export function isTextFile(file: File): boolean {
+  if (file.type.startsWith('text/')) return true;
+  const ext = file.name.split('.').pop()?.toLowerCase();
+  return ext ? TEXT_EXTENSIONS.includes(ext) : false;
+}
+
+/**
+ * 读取文本文件
+ */
+export function readTextFile(file: File): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(reader.result as string);
+    reader.onerror = reject;
+    reader.readAsText(file, 'UTF-8');
+  });
+}
+
+/**
+ * 解析 Excel 文件
+ */
+export async function parseExcel(
+  file: File,
+  maxRows = 100,
+): Promise<{ content: string; totalRows: number; extractedRows: number }> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      try {
+        const data = new Uint8Array(e.target?.result as ArrayBuffer);
+        const workbook = XLSX.read(data, { type: 'array' });
+
+        let result = '';
+        let totalRows = 0;
+        let extractedRows = 0;
+
+        workbook.SheetNames.forEach((sheetName, index) => {
+          const worksheet = workbook.Sheets[sheetName];
+          const range = XLSX.utils.decode_range(worksheet['!ref'] || 'A1');
+          const sheetTotalRows = range.e.r - range.s.r + 1;
+          totalRows += sheetTotalRows;
+
+          const rowsToExtract = Math.min(sheetTotalRows, maxRows);
+          extractedRows += rowsToExtract;
+
+          const limitedData: any[][] = [];
+          for (let row = range.s.r; row < range.s.r + rowsToExtract; row++) {
+            const rowData: any[] = [];
+            for (let col = range.s.c; col <= range.e.c; col++) {
+              const cellAddress = XLSX.utils.encode_cell({ r: row, c: col });
+              const cell = worksheet[cellAddress];
+              rowData.push(cell ? cell.v : '');
+            }
+            limitedData.push(rowData);
+          }
+
+          const csvData = limitedData.map(row => row.join(',')).join('\n');
+          if (workbook.SheetNames.length > 1)
+            result += `=== Sheet: ${sheetName} ===\n`;
+          result += csvData;
+          if (index < workbook.SheetNames.length - 1)
+            result += '\n\n';
+        });
+
+        resolve({ content: result, totalRows, extractedRows });
+      }
+      catch (error) {
+        reject(error);
+      }
+    };
+    reader.onerror = reject;
+    reader.readAsArrayBuffer(file);
+  });
+}
+
+/**
+ * 解析 Word 文档
+ */
+export async function parseWord(
+  file: File,
+  maxLength = 30000,
+): Promise<{ content: string; totalLength: number; extracted: boolean }> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = async (e) => {
+      try {
+        const arrayBuffer = e.target?.result as ArrayBuffer;
+        const result = await mammoth.extractRawText({ arrayBuffer });
+        const fullText = result.value;
+        const totalLength = fullText.length;
+
+        if (totalLength > maxLength) {
+          const truncated = fullText.substring(0, maxLength);
+          resolve({ content: truncated, totalLength, extracted: true });
+        }
+        else {
+          resolve({ content: fullText, totalLength, extracted: false });
+        }
+      }
+      catch (error) {
+        reject(error);
+      }
+    };
+    reader.onerror = reject;
+    reader.readAsArrayBuffer(file);
+  });
+}
+
+/**
+ * 解析 PDF 文件
+ */
+export async function parsePDF(
+  file: File,
+  maxPages = 10,
+): Promise<{ content: string; totalPages: number; extractedPages: number }> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = async (e) => {
+      try {
+        const typedArray = new Uint8Array(e.target?.result as ArrayBuffer);
+        const pdf = await pdfjsLib.getDocument(typedArray).promise;
+        const totalPages = pdf.numPages;
+        const pagesToExtract = Math.min(totalPages, maxPages);
+
+        let fullText = '';
+        for (let i = 1; i <= pagesToExtract; i++) {
+          const page = await pdf.getPage(i);
+          const textContent = await page.getTextContent();
+          const pageText = textContent.items.map((item: any) => item.str).join(' ');
+          fullText += `${pageText}\n`;
+        }
+
+        resolve({ content: fullText, totalPages, extractedPages: pagesToExtract });
+      }
+      catch (error) {
+        reject(error);
+      }
+    };
+    reader.onerror = reject;
+    reader.readAsArrayBuffer(file);
+  });
+}
+
+/**
+ * 解析文件内容（自动识别类型）
+ */
+export async function parseFileContent(
+  file: File,
+  options: ParseOptions = {},
+): Promise<ParsedResult> {
+  const {
+    maxTextFileLength = 50000,
+    maxWordLength = 30000,
+    maxExcelRows = 100,
+    maxPdfPages = 10,
+  } = options;
+
+  const fileName = file.name.toLowerCase();
+
+  // 文本文件
+  if (isTextFile(file) && !fileName.endsWith('.pdf')) {
+    const content = await readTextFile(file);
+    const isTruncated = content.length > maxTextFileLength;
+    return {
+      content: isTruncated ? content.substring(0, maxTextFileLength) : content,
+      isTruncated,
+      totalSize: content.length,
+      extractedSize: isTruncated ? maxTextFileLength : content.length,
+    };
+  }
+
+  // Excel 文件
+  if (fileName.endsWith('.xlsx') || fileName.endsWith('.xls') || fileName.endsWith('.csv')) {
+    const result = await parseExcel(file, maxExcelRows);
+    return {
+      content: result.content,
+      isTruncated: result.totalRows > maxExcelRows,
+      totalSize: result.totalRows,
+      extractedSize: result.extractedRows,
+    };
+  }
+
+  // Word 文件
+  if (fileName.endsWith('.docx') || fileName.endsWith('.doc')) {
+    const result = await parseWord(file, maxWordLength);
+    return {
+      content: result.content,
+      isTruncated: result.extracted,
+      totalSize: result.totalLength,
+      extractedSize: result.extracted ? maxWordLength : result.totalLength,
+    };
+  }
+
+  // PDF 文件
+  if (fileName.endsWith('.pdf')) {
+    const result = await parsePDF(file, maxPdfPages);
+    return {
+      content: result.content,
+      isTruncated: result.totalPages > maxPdfPages,
+      totalSize: result.totalPages,
+      extractedSize: result.extractedPages,
+    };
+  }
+
+  throw new Error(`不支持的文件类型: ${file.name}`);
+}
+
+/**
+ * Composable: 文件解析
+ */
+export function useFileParsing(options: ParseOptions = {}) {
+  return {
+    isTextFile,
+    readTextFile,
+    parseExcel,
+    parseWord,
+    parsePDF,
+    parseFileContent,
+  };
+}
diff --git a/Yi.Ai.Vue3/src/composables/chat/useFilePaste.ts b/Yi.Ai.Vue3/src/composables/chat/useFilePaste.ts
new file mode 100644
index 00000000..0f9352d6
--- /dev/null
+++ b/Yi.Ai.Vue3/src/composables/chat/useFilePaste.ts
@@ -0,0 +1,144 @@
+import { ElMessage } from 'element-plus';
+import { useImageCompression, type CompressionLevel } from './useImageCompression';
+import type { FileItem } from '@/stores/modules/files';
+
+export interface UseFilePasteOptions {
+  /** 最大文件大小 (字节) */
+  maxFileSize?: number;
+  /** 最大总内容长度 */
+  maxTotalContentLength?: number;
+  /** 压缩级别配置 */
+  compressionLevels?: CompressionLevel[];
+  /** 获取当前文件列表总长度 */
+  getCurrentTotalLength: () => number;
+  /** 添加文件到列表 */
+  addFiles: (files: FileItem[]) => void;
+  /** 是否只接受图片 (默认true) */
+  imagesOnly?: boolean;
+}
+
+/**
+ * 从剪贴板数据项中提取文件
+ */
+function extractFilesFromItems(items: DataTransferItemList): File[] {
+  const files: File[] = [];
+  for (let i = 0; i < items.length; i++) {
+    const item = items[i];
+    if (item.kind === 'file') {
+      const file = item.getAsFile();
+      if (file) {
+        files.push(file);
+      }
+    }
+  }
+  return files;
+}
+
+/**
+ * Composable: 处理粘贴事件中的文件
+ */
+export function useFilePaste(options: UseFilePasteOptions) {
+  const {
+    maxFileSize = 3 * 1024 * 1024,
+    maxTotalContentLength = 150000,
+    compressionLevels,
+    getCurrentTotalLength,
+    addFiles,
+    imagesOnly = true,
+  } = options;
+
+  const { tryCompressToLimit } = useImageCompression();
+
+  /**
+   * 处理单个粘贴的文件
+   */
+  async function processPastedFile(
+    file: File,
+    currentTotalLength: number,
+  ): Promise<FileItem | null> {
+    // 验证文件大小
+    if (file.size > maxFileSize) {
+      ElMessage.error(`文件 ${file.name} 超过 3MB 限制，已跳过`);
+      return null;
+    }
+
+    const isImage = file.type.startsWith('image/');
+
+    if (isImage) {
+      try {
+        const result = await tryCompressToLimit(
+          file,
+          currentTotalLength,
+          maxTotalContentLength,
+          compressionLevels,
+        );
+
+        if (!result) {
+          ElMessage.error(`${file.name} 图片内容过大，请压缩后上传`);
+          return null;
+        }
+
+        return {
+          uid: crypto.randomUUID(),
+          name: file.name,
+          fileSize: file.size,
+          file,
+          maxWidth: '200px',
+          showDelIcon: true,
+          imgPreview: true,
+          imgVariant: 'square',
+          url: result.base64,
+          isUploaded: true,
+          base64: result.base64,
+          fileType: 'image',
+        };
+      }
+      catch (error) {
+        console.error('处理图片失败:', error);
+        ElMessage.error(`${file.name} 处理失败`);
+        return null;
+      }
+    }
+    else if (!imagesOnly) {
+      // 如果不是仅图片模式，可以在这里处理其他类型文件
+      ElMessage.warning(`${file.name} 不支持粘贴，请使用上传按钮`);
+      return null;
+    }
+
+    return null;
+  }
+
+  /**
+   * 处理粘贴事件
+   */
+  async function handlePaste(event: ClipboardEvent) {
+    const items = event.clipboardData?.items;
+    if (!items) return;
+
+    const files = extractFilesFromItems(items);
+    if (files.length === 0) return;
+
+    event.preventDefault();
+
+    let totalContentLength = getCurrentTotalLength();
+    const newFiles: FileItem[] = [];
+
+    for (const file of files) {
+      const processedFile = await processPastedFile(file, totalContentLength);
+      if (processedFile) {
+        newFiles.push(processedFile);
+        totalContentLength += Math.floor((processedFile.base64?.length || 0) * 0.5);
+      }
+    }
+
+    if (newFiles.length > 0) {
+      addFiles(newFiles);
+      ElMessage.success(`已添加 ${newFiles.length} 个文件`);
+    }
+  }
+
+  return {
+    handlePaste,
+    processPastedFile,
+  };
+}
diff --git a/Yi.Ai.Vue3/src/composables/chat/useImageCompression.ts b/Yi.Ai.Vue3/src/composables/chat/useImageCompression.ts
new file mode 100644
index 00000000..ddcf4feb
--- /dev/null
+++ b/Yi.Ai.Vue3/src/composables/chat/useImageCompression.ts
@@ -0,0 +1,127 @@
+import { ElMessage } from 'element-plus';
+
+export interface CompressionLevel {
+  maxWidth: number;
+  maxHeight: number;
+  quality: number;
+}
+
+export const DEFAULT_COMPRESSION_LEVELS: CompressionLevel[] = [
+  { maxWidth: 800, maxHeight: 800, quality: 0.6 },
+  { maxWidth: 600, maxHeight: 600, quality: 0.5 },
+  { maxWidth: 400, maxHeight: 400, quality: 0.4 },
+];
+
+/**
+ * 压缩图片
+ * @param file - 要压缩的图片文件
+ * @param maxWidth - 最大宽度
+ * @param maxHeight - 最大高度
+ * @param quality - 压缩质量 (0-1)
+ * @returns 压缩后的 Blob
+ */
+export function compressImage(
+  file: File,
+  maxWidth = 1024,
+  maxHeight = 1024,
+  quality = 0.8,
+): Promise<Blob> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      const img = new Image();
+      img.onload = () => {
+        const canvas = document.createElement('canvas');
+        let width = img.width;
+        let height = img.height;
+
+        if (width > maxWidth || height > maxHeight) {
+          const ratio = Math.min(maxWidth / width, maxHeight / height);
+          width = width * ratio;
+          height = height * ratio;
+        }
+
+        canvas.width = width;
+        canvas.height = height;
+
+        const ctx = canvas.getContext('2d')!;
+        ctx.drawImage(img, 0, 0, width, height);
+
+        canvas.toBlob(
+          (blob) => {
+            if (blob) {
+              resolve(blob);
+            }
+            else {
+              reject(new Error('压缩失败'));
+            }
+          },
+          file.type,
+          quality,
+        );
+      };
+      img.onerror = reject;
+      img.src = e.target?.result as string;
+    };
+    reader.onerror = reject;
+    reader.readAsDataURL(file);
+  });
+}
+
+/**
+ * 将 Blob 转换为 base64
+ * @param blob - Blob 对象
+ * @returns base64 字符串
+ */
+export function blobToBase64(blob: Blob): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      resolve(reader.result as string);
+    };
+    reader.onerror = reject;
+    reader.readAsDataURL(blob);
+  });
+}
+
+/**
+ * 尝试多级压缩直到满足大小限制
+ * @param file - 图片文件
+ * @param currentTotalLength - 当前已使用的总长度
+ * @param maxTotalLength - 最大允许总长度
+ * @returns 压缩结果或 null（如果无法满足限制）
+ */
+export async function tryCompressToLimit(
+  file: File,
+  currentTotalLength: number,
+  maxTotalLength: number,
+  compressionLevels = DEFAULT_COMPRESSION_LEVELS,
+): Promise<{ blob: Blob; base64: string; estimatedLength: number } | null> {
+  for (const level of compressionLevels) {
+    const compressedBlob = await compressImage(
+      file,
+      level.maxWidth,
+      level.maxHeight,
+      level.quality,
+    );
+    const base64 = await blobToBase64(compressedBlob);
+    const estimatedLength = Math.floor(base64.length * 0.5);
+
+    if (currentTotalLength + estimatedLength <= maxTotalLength) {
+      return { blob: compressedBlob, base64, estimatedLength };
+    }
+  }
+  return null;
+}
+
+/**
+ * Composable: 使用图片压缩
+ */
+export function useImageCompression() {
+  return {
+    compressImage,
+    blobToBase64,
+    tryCompressToLimit,
+    DEFAULT_COMPRESSION_LEVELS,
+  };
+}
diff --git a/Yi.Ai.Vue3/src/composables/index.ts b/Yi.Ai.Vue3/src/composables/index.ts
new file mode 100644
index 00000000..839e651c
--- /dev/null
+++ b/Yi.Ai.Vue3/src/composables/index.ts
@@ -0,0 +1,2 @@
+// Composables 统一导出
+export * from './chat';
diff --git a/Yi.Ai.Vue3/src/pages/chat/components/ChatHeader.vue b/Yi.Ai.Vue3/src/pages/chat/components/ChatHeader.vue
new file mode 100644
index 00000000..c8629b9e
--- /dev/null
+++ b/Yi.Ai.Vue3/src/pages/chat/components/ChatHeader.vue
@@ -0,0 +1,126 @@
+<!-- 聊天页面头部组件 -->
+<script setup lang="ts">
+import Collapse from '@/layouts/components/Header/components/Collapse.vue';
+import CreateChat from '@/layouts/components/Header/components/CreateChat.vue';
+import TitleEditing from '@/layouts/components/Header/components/TitleEditing.vue';
+import { useSessionStore } from '@/stores/modules/session';
+import { computed } from 'vue';
+
+const props = defineProps<{
+  /** 是否显示标题编辑 */
+  showTitle?: boolean;
+  /** 额外的左侧内容 */
+  leftExtra?: boolean;
+}>();
+
+const sessionStore = useSessionStore();
+const currentSession = computed(() => sessionStore.currentSession);
+</script>
+
+<template>
+  <div class="chat-header">
+    <div class="chat-header__content">
+      <div class="chat-header__left">
+        <Collapse />
+        <CreateChat />
+        <div
+          v-if="showTitle && currentSession"
+          class="chat-header__divider"
+        />
+      </div>
+
+      <div v-if="showTitle" class="chat-header__center">
+        <TitleEditing />
+      </div>
+
+      <div v-if="$slots.right" class="chat-header__right">
+        <slot name="right" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.chat-header {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 60px;
+  flex-shrink: 0;
+
+  &__content {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+  }
+
+  &__left {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    flex-shrink: 0;
+    padding-left: 20px;
+  }
+
+  &__divider {
+    width: 1px;
+    height: 30px;
+    background-color: rgba(217, 217, 217);
+  }
+
+  &__center {
+    flex: 1;
+    min-width: 0;
+    margin-left: 12px;
+    overflow: hidden;
+  }
+
+  &__right {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-left: auto;
+    padding-right: 20px;
+  }
+}
+
+// 响应式
+@media (max-width: 768px) {
+  .chat-header {
+    height: 50px;
+
+    &__left {
+      padding-left: 8px;
+      gap: 8px;
+    }
+
+    &__center {
+      margin-left: 8px;
+    }
+
+    &__right {
+      padding-right: 12px;
+    }
+  }
+}
+
+@media (max-width: 480px) {
+  .chat-header {
+    height: 48px;
+
+    &__left {
+      padding-left: 4px;
+      gap: 6px;
+    }
+
+    &__center {
+      margin-left: 6px;
+    }
+
+    &__right {
+      padding-right: 8px;
+    }
+  }
+}
+</style>
diff --git a/Yi.Ai.Vue3/src/pages/chat/components/ChatSender.vue b/Yi.Ai.Vue3/src/pages/chat/components/ChatSender.vue
new file mode 100644
index 00000000..09a9a22d
--- /dev/null
+++ b/Yi.Ai.Vue3/src/pages/chat/components/ChatSender.vue
@@ -0,0 +1,206 @@
+<!-- 聊天发送区域组件 -->
+<script setup lang="ts">
+import type { FilesCardProps } from 'vue-element-plus-x/types/FilesCard';
+import { ArrowLeftBold, ArrowRightBold, Loading } from '@element-plus/icons-vue';
+import { ElIcon } from 'element-plus';
+import { watch, nextTick, ref } from 'vue';
+import { Sender } from 'vue-element-plus-x';
+import ModelSelect from '@/components/ModelSelect/index.vue';
+import { useFilesStore } from '@/stores/modules/files';
+
+const props = defineProps<{
+  /** 是否加载中 */
+  loading?: boolean;
+  /** 是否显示发送按钮 */
+  showSend?: boolean;
+  /** 最小行数 */
+  minRows?: number;
+  /** 最大行数 */
+  maxRows?: number;
+  /** 是否只读模式 */
+  readOnly?: boolean;
+}>();
+
+const emit = defineEmits<{
+  (e: 'submit', value: string): void;
+  (e: 'cancel'): void;
+}>();
+
+const modelValue = defineModel<string>({ default: '' });
+const filesStore = useFilesStore();
+const senderRef = ref<InstanceType<typeof Sender> | null>(null);
+
+/**
+ * 删除文件卡片
+ */
+function handleDeleteCard(_item: FilesCardProps, index: number) {
+  filesStore.deleteFileByIndex(index);
+}
+
+/**
+ * 监听文件列表变化，自动展开/收起 Sender 头部
+ */
+watch(
+  () => filesStore.filesList.length,
+  (val) => {
+    nextTick(() => {
+      if (val > 0) {
+        senderRef.value?.openHeader();
+      } else {
+        senderRef.value?.closeHeader();
+      }
+    });
+  },
+);
+
+defineExpose({
+  senderRef,
+  focus: () => senderRef.value?.focus(),
+  blur: () => senderRef.value?.blur(),
+});
+</script>
+
+<template>
+  <Sender
+    ref="senderRef"
+    v-model="modelValue"
+    class="chat-sender"
+    :auto-size="{
+      maxRows: maxRows ?? 6,
+      minRows: minRows ?? 2,
+    }"
+    variant="updown"
+    clearable
+    allow-speech
+    :loading="loading"
+    :read-only="readOnly"
+    @submit="(v) => emit('submit', v)"
+    @cancel="emit('cancel')"
+  >
+    <!-- 头部：文件附件区域 -->
+    <template #header>
+      <div class="chat-sender__header">
+        <Attachments
+          :items="filesStore.filesList"
+          :hide-upload="true"
+          @delete-card="handleDeleteCard"
+        >
+          <!-- 左侧滚动按钮 -->
+          <template #prev-button="{ show, onScrollLeft }">
+            <div
+              v-if="show"
+              class="chat-sender__scroll-btn chat-sender__scroll-btn--prev"
+              @click="onScrollLeft"
+            >
+              <ElIcon><ArrowLeftBold /></ElIcon>
+            </div>
+          </template>
+
+          <!-- 右侧滚动按钮 -->
+          <template #next-button="{ show, onScrollRight }">
+            <div
+              v-if="show"
+              class="chat-sender__scroll-btn chat-sender__scroll-btn--next"
+              @click="onScrollRight"
+            >
+              <ElIcon><ArrowRightBold /></ElIcon>
+            </div>
+          </template>
+        </Attachments>
+      </div>
+    </template>
+
+    <!-- 前缀：文件选择和模型选择 -->
+    <template #prefix>
+      <div class="chat-sender__prefix">
+        <FilesSelect />
+        <ModelSelect />
+      </div>
+    </template>
+
+    <!-- 后缀：加载动画 -->
+    <template #suffix>
+      <ElIcon v-if="loading" class="chat-sender__loading">
+        <Loading />
+      </ElIcon>
+    </template>
+  </Sender>
+</template>
+
+<style scoped lang="scss">
+.chat-sender {
+  width: 100%;
+
+  &__header {
+    padding: 12px 12px 0 12px;
+  }
+
+  &__prefix {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    gap: 8px;
+    flex: none;
+    width: fit-content;
+    overflow: hidden;
+  }
+
+  &__scroll-btn {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 22px;
+    height: 22px;
+    border-radius: 8px;
+    border: 1px solid rgba(0, 0, 0, 0.08);
+    color: rgba(0, 0, 0, 0.4);
+    background-color: #fff;
+    font-size: 10px;
+    cursor: pointer;
+    z-index: 10;
+    transition: all 0.2s ease;
+
+    &:hover {
+      background-color: #f3f4f6;
+      border-color: rgba(0, 0, 0, 0.15);
+      color: rgba(0, 0, 0, 0.6);
+    }
+
+    &--prev {
+      left: 8px;
+    }
+
+    &--next {
+      right: 8px;
+    }
+  }
+
+  &__loading {
+    margin-left: 8px;
+    color: var(--el-color-primary);
+    animation: rotating 2s linear infinite;
+  }
+}
+
+@keyframes rotating {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+// 响应式
+@media (max-width: 768px) {
+  .chat-sender {
+    &__prefix {
+      flex-wrap: wrap;
+      gap: 6px;
+    }
+  }
+}
+</style>
diff --git a/Yi.Ai.Vue3/src/pages/chat/components/DeleteModeToolbar.vue b/Yi.Ai.Vue3/src/pages/chat/components/DeleteModeToolbar.vue
new file mode 100644
index 00000000..a4b5780a
--- /dev/null
+++ b/Yi.Ai.Vue3/src/pages/chat/components/DeleteModeToolbar.vue
@@ -0,0 +1,90 @@
+<!-- 删除模式工具栏 -->
+<script setup lang="ts">
+import { ElButton } from 'element-plus';
+
+const props = defineProps<{
+  selectedCount: number;
+}>();
+
+const emit = defineEmits<{
+  (e: 'confirm'): void;
+  (e: 'cancel'): void;
+}>();
+</script>
+
+<template>
+  <div class="delete-toolbar">
+    <span class="delete-toolbar__count">已选择 {{ selectedCount }} 条消息</span>
+    <div class="delete-toolbar__actions">
+      <ElButton type="danger" size="small" @click="emit('confirm')">
+        确认删除
+      </ElButton>
+      <ElButton size="small" @click="emit('cancel')">
+        取消
+      </ElButton>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.delete-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 12px;
+  margin-bottom: 12px;
+  background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
+  border: 1px solid #fed7aa;
+  border-radius: 6px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+
+  &__count {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 13px;
+    font-weight: 500;
+    color: #ea580c;
+
+    &::before {
+      content: '';
+      display: inline-block;
+      width: 6px;
+      height: 6px;
+      background: #ea580c;
+      border-radius: 50%;
+    }
+  }
+
+  &__actions {
+    display: flex;
+    gap: 6px;
+  }
+}
+
+// 深度选择器样式单独处理
+:deep(.el-button) {
+  padding: 6px 12px;
+  font-size: 12px;
+  border-radius: 4px;
+  transition: all 0.2s ease;
+
+  &:hover {
+    background: #fff;
+    border-color: #fed7aa;
+  }
+}
+
+:deep(.el-button--danger) {
+  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
+  border: none;
+  color: #fff;
+
+  &:hover {
+    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
+    transform: translateY(-1px);
+    box-shadow: 0 2px 4px rgba(220, 38, 38, 0.2);
+    border-color: transparent;
+  }
+}
+</style>
diff --git a/Yi.Ai.Vue3/src/pages/chat/components/MessageItem.vue b/Yi.Ai.Vue3/src/pages/chat/components/MessageItem.vue
new file mode 100644
index 00000000..19340571
--- /dev/null
+++ b/Yi.Ai.Vue3/src/pages/chat/components/MessageItem.vue
@@ -0,0 +1,555 @@
+<!-- 单条消息组件 -->
+<script setup lang="ts">
+import type { ThinkingStatus } from 'vue-element-plus-x/types/Thinking';
+import { Delete, Document, DocumentCopy, Edit, Refresh } from '@element-plus/icons-vue';
+import { ElButton, ElCheckbox, ElIcon, ElInput, ElTooltip } from 'element-plus';
+import MarkedMarkdown from '@/components/MarkedMarkdown/index.vue';
+import type { MessageItem } from '@/composables/chat';
+
+const props = defineProps<{
+  item: MessageItem;
+  isDeleteMode: boolean;
+  isEditing: boolean;
+  editContent: string;
+  isSending: boolean;
+  isSelected: boolean;
+}>();
+
+const emit = defineEmits<{
+  (e: 'toggleSelection', item: MessageItem): void;
+  (e: 'edit', item: MessageItem): void;
+  (e: 'cancelEdit'): void;
+  (e: 'submitEdit', item: MessageItem): void;
+  (e: 'update:editContent', value: string): void;
+  (e: 'copy', item: MessageItem): void;
+  (e: 'regenerate', item: MessageItem): void;
+  (e: 'delete', item: MessageItem): void;
+  (e: 'imagePreview', url: string): void;
+}>();
+
+/**
+ * 检查消息是否有有效ID
+ */
+function hasValidId(item: MessageItem): boolean {
+  return item.id !== undefined && (typeof item.id === 'string' || (typeof item.id === 'number' && item.id > 0));
+}
+
+/**
+ * 处理思考链状态变化
+ */
+function handleThinkingChange(payload: { value: boolean; status: ThinkingStatus }) {
+  // 可以在这里添加处理逻辑
+}
+</script>
+
+<template>
+  <div
+    class="message-wrapper"
+    :class="{
+      'message-wrapper--ai': item.role !== 'user',
+      'message-wrapper--user': item.role === 'user',
+      'message-wrapper--delete-mode': isDeleteMode,
+      'message-wrapper--selected': isSelected && isDeleteMode,
+    }"
+    @click="isDeleteMode && item.id && emit('toggleSelection', item)"
+  >
+    <!-- 删除模式：勾选框 -->
+    <div v-if="isDeleteMode && item.id" class="message-wrapper__checkbox">
+      <ElCheckbox
+        :model-value="isSelected"
+        @click.stop
+        @update:model-value="emit('toggleSelection', item)"
+      />
+    </div>
+
+    <!-- 消息内容区域 -->
+    <div class="message-wrapper__content">
+      <!-- 思考链（仅AI消息） -->
+      <template v-if="item.reasoning_content && !isDeleteMode && item.role !== 'user'">
+        <Thinking
+          v-model="item.thinlCollapse"
+          :content="item.reasoning_content"
+          :status="item.thinkingStatus"
+          class="message-wrapper__thinking"
+          @change="handleThinkingChange"
+        />
+      </template>
+
+      <!-- AI 消息内容 -->
+      <template v-if="item.role !== 'user'">
+        <div class="message-content message-content--ai">
+          <MarkedMarkdown
+            v-if="item.content"
+            class="message-content__markdown"
+            :content="item.content"
+          />
+        </div>
+      </template>
+
+      <!-- 用户消息内容 -->
+      <template v-if="item.role === 'user'">
+        <div
+          class="message-content message-content--user"
+          :class="{ 'message-content--editing': isEditing }"
+        >
+          <!-- 编辑模式 -->
+          <template v-if="isEditing">
+            <div class="message-content__edit-wrapper">
+              <ElInput
+                :model-value="editContent"
+                type="textarea"
+                :autosize="{ minRows: 3, maxRows: 10 }"
+                placeholder="编辑消息内容"
+                @update:model-value="emit('update:editContent', $event)"
+              />
+              <div class="message-content__edit-actions">
+                <ElButton
+                  type="primary"
+                  size="small"
+                  @click.stop="emit('submitEdit', item)"
+                >
+                  发送
+                </ElButton>
+                <ElButton size="small" @click.stop="emit('cancelEdit')">
+                  取消
+                </ElButton>
+              </div>
+            </div>
+          </template>
+
+          <!-- 正常显示模式 -->
+          <template v-else>
+            <!-- 图片列表 -->
+            <div v-if="item.images && item.images.length > 0" class="message-content__images">
+              <img
+                v-for="(image, index) in item.images"
+                :key="index"
+                :src="image.url"
+                :alt="image.name || '图片'"
+                class="message-content__image"
+                @click.stop="emit('imagePreview', image.url)"
+              >
+            </div>
+
+            <!-- 文件列表 -->
+            <div v-if="item.files && item.files.length > 0" class="message-content__files">
+              <div
+                v-for="(file, index) in item.files"
+                :key="index"
+                class="message-content__file-item"
+              >
+                <ElIcon class="message-content__file-icon">
+                  <Document />
+                </ElIcon>
+                <span class="message-content__file-name">{{ file.name }}</span>
+              </div>
+            </div>
+
+            <!-- 文本内容 -->
+            <div v-if="item.content" class="message-content__text">
+              {{ item.content }}
+            </div>
+          </template>
+        </div>
+      </template>
+    </div>
+
+    <!-- 操作栏（非删除模式） -->
+    <div v-if="!isDeleteMode" class="message-wrapper__footer">
+      <div
+        class="message-wrapper__footer-content"
+        :class="{ 'message-wrapper__footer-content--ai': item.role !== 'user', 'message-wrapper__footer-content--user': item.role === 'user' }"
+      >
+        <!-- 时间和token信息 -->
+        <div class="message-wrapper__info">
+          <span v-if="item.creationTime" class="message-wrapper__time">
+            {{ item.creationTime }}
+          </span>
+          <span
+            v-if="item.role !== 'user' && item?.tokenUsage?.total"
+            class="message-wrapper__token"
+          >
+            {{ item?.tokenUsage?.total }} tokens
+          </span>
+        </div>
+
+        <!-- 操作按钮组 -->
+        <div class="message-wrapper__actions">
+          <ElTooltip content="复制" placement="top">
+            <ElButton text @click="emit('copy', item)">
+              <ElIcon><DocumentCopy /></ElIcon>
+            </ElButton>
+          </ElTooltip>
+
+          <ElTooltip
+            v-if="item.role !== 'user'"
+            content="重新生成"
+            placement="top"
+          >
+            <ElButton text :disabled="isSending" @click="emit('regenerate', item)">
+              <ElIcon><Refresh /></ElIcon>
+            </ElButton>
+          </ElTooltip>
+
+          <ElTooltip
+            v-if="item.role === 'user' && hasValidId(item)"
+            content="编辑"
+            placement="top"
+          >
+            <ElButton
+              text
+              :disabled="isSending"
+              @click="emit('edit', item)"
+            >
+              <ElIcon><Edit /></ElIcon>
+            </ElButton>
+          </ElTooltip>
+
+          <ElTooltip content="删除" placement="top">
+            <ElButton text @click="emit('delete', item)">
+              <ElIcon><Delete /></ElIcon>
+            </ElButton>
+          </ElTooltip>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+// 消息包装器 - 删除模式时整行有背景
+.message-wrapper {
+  position: relative;
+  width: 100%;
+  min-width: 100%;
+  padding: 12px 16px;
+  border-radius: 8px;
+  transition: all 0.2s ease;
+  box-sizing: border-box;
+
+  // 删除模式下的样式
+  &--delete-mode {
+    cursor: pointer;
+    background-color: #f5f7fa;
+    border: 1px solid transparent;
+    margin-bottom: 8px;
+
+    &:hover {
+      background-color: #e8f0fe;
+      border-color: #c6dafc;
+    }
+  }
+
+  // 选中状态
+  &--selected {
+    background-color: #d2e3fc !important;
+    border-color: #8ab4f8 !important;
+  }
+
+  // 勾选框
+  &__checkbox {
+    position: absolute;
+    left: 12px;
+    top: 12px;
+    z-index: 2;
+
+    :deep(.el-checkbox) {
+      --el-checkbox-input-height: 20px;
+      --el-checkbox-input-width: 20px;
+    }
+  }
+
+  // 内容区域 - 删除模式时有左边距给勾选框
+  &__content {
+    width: 100%;
+
+    .message-wrapper--delete-mode & {
+      padding-left: 36px;
+    }
+  }
+
+  // 思考链
+  &__thinking {
+    margin-bottom: 12px;
+  }
+
+  // 底部操作栏
+  &__footer {
+    margin-top: 8px;
+  }
+
+  &__footer-content {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+
+    // AI消息：操作栏在左侧
+    &--ai {
+      justify-content: flex-start;
+      flex-direction: row-reverse;
+
+      .message-wrapper__info {
+        margin-left: 0;
+        margin-right: auto;
+      }
+
+      .message-wrapper__actions {
+        margin-left: 0;
+      }
+    }
+
+    // 用户消息：操作栏在右侧
+    &--user {
+      justify-content: flex-end;
+
+      .message-wrapper__info {
+        margin-right: auto;
+      }
+    }
+  }
+
+  &__info {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 12px;
+    color: #888;
+  }
+
+  &__time,
+  &__token {
+    display: flex;
+    align-items: center;
+    color: #888;
+  }
+
+  &__token::before {
+    content: '';
+    width: 3px;
+    height: 3px;
+    margin-right: 8px;
+    background: #bbb;
+    border-radius: 50%;
+  }
+
+  &__actions {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+
+    :deep(.el-button) {
+      width: 24px;
+      height: 24px;
+      padding: 0;
+      font-size: 13px;
+      color: #555;
+      background: transparent;
+      border: none;
+      border-radius: 4px;
+      transition: all 0.2s ease;
+
+      &:hover {
+        color: #409eff;
+        background: #f0f7ff;
+      }
+
+      &:active {
+        background: #e6f2ff;
+      }
+
+      &[disabled] {
+        color: #bbb;
+        background: transparent;
+      }
+
+      .el-icon {
+        font-size: 13px;
+      }
+    }
+  }
+}
+
+// 消息内容
+.message-content {
+  // AI消息：无气泡背景
+  &--ai {
+    width: 100%;
+    padding: 0;
+    background: transparent;
+  }
+
+  // 用户消息：有灰色气泡背景
+  &--user {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    width: fit-content;
+    max-width: 80%;
+    margin-left: auto;
+    padding: 12px 16px;
+    background-color: #f5f5f5;
+    border-radius: 12px;
+  }
+
+  // 编辑模式 - 宽度100%
+  &--editing {
+    width: 100%;
+    max-width: 100%;
+    margin-left: 0;
+    background-color: transparent;
+  }
+
+  &__markdown {
+    background-color: transparent;
+  }
+
+  &__images {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin-bottom: 4px;
+  }
+
+  &__image {
+    max-width: 200px;
+    max-height: 200px;
+    border-radius: 8px;
+    object-fit: cover;
+    cursor: pointer;
+    transition: transform 0.2s;
+
+    &:hover {
+      transform: scale(1.05);
+    }
+  }
+
+  &__files {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    margin-bottom: 4px;
+  }
+
+  &__file-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 12px;
+    background: rgba(0, 0, 0, 0.05);
+    border-radius: 6px;
+    font-size: 13px;
+  }
+
+  &__file-icon {
+    font-size: 16px;
+    color: #409eff;
+  }
+
+  &__file-name {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &__text {
+    white-space: pre-wrap;
+    line-height: 1.6;
+    color: #333;
+  }
+
+  &__edit-wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    width: 100%;
+
+    :deep(.el-textarea__inner) {
+      min-height: 80px !important;
+      font-size: 14px;
+      line-height: 1.6;
+    }
+  }
+
+  &__edit-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 8px;
+  }
+}
+
+// 响应式
+@media (max-width: 768px) {
+  .message-content {
+    &__image {
+      max-width: 150px;
+      max-height: 150px;
+    }
+
+    &__file-item {
+      padding: 6px 10px;
+      font-size: 12px;
+    }
+
+    &__file-icon {
+      font-size: 14px;
+    }
+  }
+
+  .message-wrapper {
+    &__footer-content {
+      flex-wrap: wrap;
+    }
+
+    &__info {
+      font-size: 11px;
+    }
+
+    &__footer-content--user,
+    &__footer-content--ai {
+      flex-direction: row;
+
+      .message-wrapper__info {
+        order: 1;
+        margin: 0;
+        margin-right: auto;
+      }
+
+      .message-wrapper__actions {
+        order: 2;
+      }
+    }
+  }
+}
+
+@media (max-width: 480px) {
+  .message-content {
+    &__image {
+      max-width: 120px;
+      max-height: 120px;
+    }
+
+    &--user {
+      max-width: 90%;
+    }
+  }
+
+  .message-wrapper {
+    padding: 10px 12px;
+
+    &__checkbox {
+      left: 8px;
+      top: 8px;
+    }
+
+    &--delete-mode &__content {
+      padding-left: 28px;
+    }
+
+    &__time,
+    &__token {
+      font-size: 10px;
+    }
+  }
+}
+</style>
diff --git a/Yi.Ai.Vue3/src/pages/chat/components/index.ts b/Yi.Ai.Vue3/src/pages/chat/components/index.ts
new file mode 100644
index 00000000..306d5172
--- /dev/null
+++ b/Yi.Ai.Vue3/src/pages/chat/components/index.ts
@@ -0,0 +1,6 @@
+// Chat 页面组件统一导出
+
+export { default as ChatHeader } from './ChatHeader.vue';
+export { default as ChatSender } from './ChatSender.vue';
+export { default as MessageItem } from './MessageItem.vue';
+export { default as DeleteModeToolbar } from './DeleteModeToolbar.vue';
diff --git a/Yi.Ai.Vue3/src/pages/chat/layouts/chatDefaul/index.vue b/Yi.Ai.Vue3/src/pages/chat/layouts/chatDefaul/index.vue
index 3eefcc93..02e29158 100644
--- a/Yi.Ai.Vue3/src/pages/chat/layouts/chatDefaul/index.vue
+++ b/Yi.Ai.Vue3/src/pages/chat/layouts/chatDefaul/index.vue
@@ -1,61 +1,77 @@
 <!-- 默认消息列表页 -->
 <script setup lang="ts">
-import type { FilesCardProps } from 'vue-element-plus-x/types/FilesCard';
 import { ArrowLeftBold, ArrowRightBold, Loading } from '@element-plus/icons-vue';
 import { useDebounceFn } from '@vueuse/core';
-import { ElMessage } from 'element-plus';
+import { ElIcon, ElMessage } from 'element-plus';
 import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
+import { Sender } from 'vue-element-plus-x';
 import ModelSelect from '@/components/ModelSelect/index.vue';
 import WelecomeText from '@/components/WelecomeText/index.vue';
-import Collapse from '@/layouts/components/Header/components/Collapse.vue';
-import CreateChat from '@/layouts/components/Header/components/CreateChat.vue';
+import { ChatHeader } from '@/pages/chat/components';
 import { useUserStore } from '@/stores';
 import { useFilesStore } from '@/stores/modules/files';
 import { useSessionStore } from '@/stores/modules/session';
+import { useFilePaste } from '@/composables/chat';
 
-// Store 实例
 const userStore = useUserStore();
 const sessionStore = useSessionStore();
 const filesStore = useFilesStore();
 
-// 计算属性
 const currentSession = computed(() => sessionStore.currentSession);
 
-// 响应式数据
-const senderValue = ref(''); // 输入框内容
-const senderRef = ref(); // Sender 组件引用
-const isSending = ref(false); // 发送状态标志
+const senderValue = ref('');
+const senderRef = ref<InstanceType<typeof Sender> | null>(null);
+const isSending = ref(false);
 
 // 文件处理相关常量
 const MAX_FILE_SIZE = 3 * 1024 * 1024;
 const MAX_TOTAL_CONTENT_LENGTH = 150000;
 
+// 使用文件粘贴 composable
+const { handlePaste } = useFilePaste({
+  maxFileSize: MAX_FILE_SIZE,
+  maxTotalContentLength: MAX_TOTAL_CONTENT_LENGTH,
+  getCurrentTotalLength: () => {
+    let total = 0;
+    filesStore.filesList.forEach((f) => {
+      if (f.fileType === 'text' && f.fileContent) {
+        total += f.fileContent.length;
+      }
+      if (f.fileType === 'image' && f.base64) {
+        total += Math.floor(f.base64.length * 0.5);
+      }
+    });
+    return total;
+  },
+  addFiles: (files) => filesStore.setFilesList([...filesStore.filesList, ...files]),
+});
+
 /**
  * 防抖发送消息函数
  */
 const debouncedSend = useDebounceFn(
   async () => {
-    // 1. 验证输入
+    // 验证输入
     if (!senderValue.value.trim()) {
       ElMessage.warning('消息内容不能为空');
       return;
     }
 
-    // 2. 检查是否正在发送
+    // 检查是否正在发送
     if (isSending.value) {
       ElMessage.warning('请等待上一条消息发送完成');
       return;
     }
 
-    // 3. 准备发送数据
+    // 准备发送数据
     const content = senderValue.value.trim();
     isSending.value = true;
 
     try {
-      // 4. 保存到本地存储（可选，用于页面刷新后恢复）
+      // 保存到本地存储
       localStorage.setItem('chatContent', content);
 
-      // 5. 创建会话
+      // 创建会话
       await sessionStore.createSessionList({
         userId: userStore.userInfo?.userId as number,
         sessionContent: content,
@@ -63,20 +79,17 @@ const debouncedSend = useDebounceFn(
         remark: content.slice(0, 10),
       });
 
-      // 6. 清空输入框
+      // 清空输入框
       senderValue.value = '';
-    }
-    catch (error: any) {
+    } catch (error: any) {
       console.error('发送消息失败:', error);
       ElMessage.error(error.message || '发送消息失败');
-    }
-    finally {
-      // 7. 重置发送状态
+    } finally {
       isSending.value = false;
     }
   },
-  800, // 防抖延迟
-  { leading: true, trailing: false }, // 立即执行第一次，忽略后续快速点击
+  800,
+  { leading: true, trailing: false },
 );
 
 /**
@@ -86,15 +99,6 @@ function handleSend() {
   debouncedSend();
 }
 
-/**
- * 删除文件卡片
- * @param _item 文件项
- * @param index 文件索引
- */
-function handleDeleteCard(_item: FilesCardProps, index: number) {
-  filesStore.deleteFileByIndex(index);
-}
-
 /**
  * 监听文件列表变化，自动展开/收起 Sender 头部
  */
@@ -104,181 +108,14 @@ watch(
     nextTick(() => {
       if (val > 0) {
         senderRef.value?.openHeader();
-      }
-      else {
+      } else {
         senderRef.value?.closeHeader();
       }
     });
   },
 );
 
-/**
- * 压缩图片
- */
-function compressImage(file: File, maxWidth = 1024, maxHeight = 1024, quality = 0.8): Promise<Blob> {
-  return new Promise((resolve, reject) => {
-    const reader = new FileReader();
-    reader.onload = (e) => {
-      const img = new Image();
-      img.onload = () => {
-        const canvas = document.createElement('canvas');
-        let width = img.width;
-        let height = img.height;
-
-        if (width > maxWidth || height > maxHeight) {
-          const ratio = Math.min(maxWidth / width, maxHeight / height);
-          width = width * ratio;
-          height = height * ratio;
-        }
-
-        canvas.width = width;
-        canvas.height = height;
-
-        const ctx = canvas.getContext('2d')!;
-        ctx.drawImage(img, 0, 0, width, height);
-
-        canvas.toBlob(
-          (blob) => {
-            if (blob) {
-              resolve(blob);
-            }
-            else {
-              reject(new Error('压缩失败'));
-            }
-          },
-          file.type,
-          quality,
-        );
-      };
-      img.onerror = reject;
-      img.src = e.target?.result as string;
-    };
-    reader.onerror = reject;
-    reader.readAsDataURL(file);
-  });
-}
-
-/**
- * 将 Blob 转换为 base64
- */
-function blobToBase64(blob: Blob): Promise<string> {
-  return new Promise((resolve, reject) => {
-    const reader = new FileReader();
-    reader.onload = () => {
-      resolve(reader.result as string);
-    };
-    reader.onerror = reject;
-    reader.readAsDataURL(blob);
-  });
-}
-
-/**
- * 处理粘贴事件
- */
-async function handlePaste(event: ClipboardEvent) {
-  const items = event.clipboardData?.items;
-  if (!items)
-    return;
-
-  const files: File[] = [];
-  for (let i = 0; i < items.length; i++) {
-    const item = items[i];
-    if (item.kind === 'file') {
-      const file = item.getAsFile();
-      if (file) {
-        files.push(file);
-      }
-    }
-  }
-
-  if (files.length === 0)
-    return;
-
-  event.preventDefault();
-
-  // 计算已有文件的总内容长度
-  let totalContentLength = 0;
-  filesStore.filesList.forEach((f) => {
-    if (f.fileType === 'text' && f.fileContent) {
-      totalContentLength += f.fileContent.length;
-    }
-    if (f.fileType === 'image' && f.base64) {
-      totalContentLength += Math.floor(f.base64.length * 0.5);
-    }
-  });
-
-  const arr: any[] = [];
-
-  for (const file of files) {
-    // 验证文件大小
-    if (file.size > MAX_FILE_SIZE) {
-      ElMessage.error(`文件 ${file.name} 超过 3MB 限制，已跳过`);
-      continue;
-    }
-
-    const isImage = file.type.startsWith('image/');
-
-    if (isImage) {
-      try {
-        const compressionLevels = [
-          { maxWidth: 800, maxHeight: 800, quality: 0.6 },
-          { maxWidth: 600, maxHeight: 600, quality: 0.5 },
-          { maxWidth: 400, maxHeight: 400, quality: 0.4 },
-        ];
-
-        let compressedBlob: Blob | null = null;
-        let base64 = '';
-
-        for (const level of compressionLevels) {
-          compressedBlob = await compressImage(file, level.maxWidth, level.maxHeight, level.quality);
-          base64 = await blobToBase64(compressedBlob);
-
-          const estimatedLength = Math.floor(base64.length * 0.5);
-          if (totalContentLength + estimatedLength <= MAX_TOTAL_CONTENT_LENGTH) {
-            totalContentLength += estimatedLength;
-            break;
-          }
-
-          compressedBlob = null;
-        }
-
-        if (!compressedBlob) {
-          ElMessage.error(`${file.name} 图片内容过大，请压缩后上传`);
-          continue;
-        }
-
-        arr.push({
-          uid: crypto.randomUUID(),
-          name: file.name,
-          fileSize: file.size,
-          file,
-          maxWidth: '200px',
-          showDelIcon: true,
-          imgPreview: true,
-          imgVariant: 'square',
-          url: base64,
-          isUploaded: true,
-          base64,
-          fileType: 'image',
-        });
-      }
-      catch (error) {
-        console.error('处理图片失败:', error);
-        ElMessage.error(`${file.name} 处理失败`);
-      }
-    }
-    else {
-      ElMessage.warning(`${file.name} 不支持粘贴，请使用上传按钮`);
-    }
-  }
-
-  if (arr.length > 0) {
-    filesStore.setFilesList([...filesStore.filesList, ...arr]);
-    ElMessage.success(`已添加 ${arr.length} 个文件`);
-  }
-}
-
-// 监听粘贴事件
+// 生命周期
 onMounted(() => {
   document.addEventListener('paste', handlePaste);
 });
@@ -290,17 +127,11 @@ onUnmounted(() => {
 
 <template>
   <div class="chat-default">
-    <!-- 头部导航栏 -->
-    <div class="chat-header">
-      <div class="header-content">
-        <div class="header-left">
-          <Collapse />
-          <CreateChat />
-        </div>
-      </div>
-    </div>
+    <!-- 头部 -->
+    <ChatHeader />
 
-    <div class="chat-default-wrap">
+    <!-- 内容区域 -->
+    <div class="chat-default__content">
       <!-- 欢迎文本 -->
       <WelecomeText />
 
@@ -308,12 +139,8 @@ onUnmounted(() => {
       <Sender
         ref="senderRef"
         v-model="senderValue"
-        class="chat-default-sender"
-        data-tour="chat-sender"
-        :auto-size="{
-          maxRows: 9,
-          minRows: 3,
-        }"
+        class="chat-default__sender"
+        :auto-size="{ maxRows: 9, minRows: 3 }"
         variant="updown"
         clearable
         allow-speech
@@ -322,22 +149,20 @@ onUnmounted(() => {
       >
         <!-- 头部：文件附件区域 -->
         <template #header>
-          <div class="sender-header">
+          <div class="chat-default__sender-header">
             <Attachments
               :items="filesStore.filesList"
               :hide-upload="true"
-              @delete-card="handleDeleteCard"
+              @delete-card="(_, index) => filesStore.deleteFileByIndex(index)"
             >
               <!-- 左侧滚动按钮 -->
               <template #prev-button="{ show, onScrollLeft }">
                 <div
                   v-if="show"
-                  class="scroll-btn prev-btn"
+                  class="chat-default__scroll-btn chat-default__scroll-btn--prev"
                   @click="onScrollLeft"
                 >
-                  <el-icon>
-                    <ArrowLeftBold />
-                  </el-icon>
+                  <el-icon><ArrowLeftBold /></el-icon>
                 </div>
               </template>
 
@@ -345,12 +170,10 @@ onUnmounted(() => {
               <template #next-button="{ show, onScrollRight }">
                 <div
                   v-if="show"
-                  class="scroll-btn next-btn"
+                  class="chat-default__scroll-btn chat-default__scroll-btn--next"
                   @click="onScrollRight"
                 >
-                  <el-icon>
-                    <ArrowRightBold />
-                  </el-icon>
+                  <el-icon><ArrowRightBold /></el-icon>
                 </div>
               </template>
             </Attachments>
@@ -359,7 +182,7 @@ onUnmounted(() => {
 
         <!-- 前缀：文件选择和模型选择 -->
         <template #prefix>
-          <div class="sender-prefix">
+          <div class="chat-default__sender-prefix">
             <FilesSelect />
             <ModelSelect />
           </div>
@@ -367,9 +190,9 @@ onUnmounted(() => {
 
         <!-- 后缀：发送加载动画 -->
         <template #suffix>
-          <el-icon v-if="isSending" class="loading-icon">
+          <ElIcon v-if="isSending" class="chat-default__loading">
             <Loading />
-          </el-icon>
+          </ElIcon>
         </template>
       </Sender>
     </div>
@@ -385,97 +208,94 @@ onUnmounted(() => {
   align-items: center;
   padding: 0 20px;
 
-  .chat-header {
-    width: 100%;
-    //max-width: 1000px;
-    height: 60px;
+  @media (max-width: 768px) {
+    padding: 0 12px;
+  }
+
+  &__content {
+    position: relative;
     display: flex;
+    flex-direction: column;
     align-items: center;
-    flex-shrink: 0;
+    justify-content: center;
+    width: 100%;
+    max-width: 800px;
+    min-height: 450px;
+    padding: 20px;
+    box-sizing: border-box;
 
-    .header-content {
-      width: 100%;
-      display: flex;
-      align-items: center;
-
-      .header-left {
-        display: flex;
-        align-items: center;
-        gap: 12px;
-      }
+    @media (max-width: 768px) {
+      padding: 12px;
+      min-height: calc(100vh - 120px);
     }
   }
-}
 
-.chat-default-wrap {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  max-width: 800px;
-  min-height: 450px;
-  padding: 20px;
-  box-sizing: border-box;
-
-  .chat-default-sender {
+  &__sender {
     width: 100%;
     margin-top: 30px;
-  }
-}
 
-.sender-header {
-  padding: 12px 12px 0 12px;
-}
-
-.sender-prefix {
-  display: flex;
-  flex: 1;
-  align-items: center;
-  gap: 8px;
-  flex: none;
-  width: fit-content;
-  overflow: hidden;
-}
-
-.scroll-btn {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 22px;
-  height: 22px;
-  border-radius: 8px;
-  border: 1px solid rgba(0, 0, 0, 0.08);
-  color: rgba(0, 0, 0, 0.4);
-  background-color: #fff;
-  font-size: 10px;
-  cursor: pointer;
-  z-index: 10;
-  transition: all 0.2s ease;
-
-  &:hover {
-    background-color: #f3f4f6;
-    border-color: rgba(0, 0, 0, 0.15);
-    color: rgba(0, 0, 0, 0.6);
+    @media (max-width: 768px) {
+      margin-top: 20px;
+    }
   }
 
-  &.prev-btn {
-    left: 8px;
+  &__sender-header {
+    padding: 12px 12px 0 12px;
   }
 
-  &.next-btn {
-    right: 8px;
-  }
-}
+  &__sender-prefix {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    gap: 8px;
+    flex: none;
+    width: fit-content;
+    overflow: hidden;
 
-.loading-icon {
-  margin-left: 8px;
-  color: var(--el-color-primary);
-  animation: rotating 2s linear infinite;
+    @media (max-width: 768px) {
+      flex-wrap: wrap;
+      gap: 6px;
+    }
+  }
+
+  &__scroll-btn {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 22px;
+    height: 22px;
+    border-radius: 8px;
+    border: 1px solid rgba(0, 0, 0, 0.08);
+    color: rgba(0, 0, 0, 0.4);
+    background-color: #fff;
+    font-size: 10px;
+    cursor: pointer;
+    z-index: 10;
+    transition: all 0.2s ease;
+
+    &:hover {
+      background-color: #f3f4f6;
+      border-color: rgba(0, 0, 0, 0.15);
+      color: rgba(0, 0, 0, 0.6);
+    }
+
+    &--prev {
+      left: 8px;
+    }
+
+    &--next {
+      right: 8px;
+    }
+  }
+
+  &__loading {
+    margin-left: 8px;
+    color: var(--el-color-primary);
+    animation: rotating 2s linear infinite;
+  }
 }
 
 @keyframes rotating {
@@ -486,29 +306,4 @@ onUnmounted(() => {
     transform: rotate(360deg);
   }
 }
-
-// 响应式设计
-@media (max-width: 768px) {
-  .chat-default {
-    padding: 0 12px;
-
-    .chat-header {
-      height: 50px;
-    }
-  }
-
-  .chat-default-wrap {
-    padding: 12px;
-    min-height: calc(100vh - 120px);
-
-    .chat-default-sender {
-      margin-top: 20px;
-    }
-  }
-
-  .sender-prefix {
-    flex-wrap: wrap;
-    gap: 6px;
-  }
-}
 </style>
diff --git a/Yi.Ai.Vue3/src/pages/chat/layouts/chatWithId/index.vue b/Yi.Ai.Vue3/src/pages/chat/layouts/chatWithId/index.vue
index de7ab065..c7e621cf 100644
--- a/Yi.Ai.Vue3/src/pages/chat/layouts/chatWithId/index.vue
+++ b/Yi.Ai.Vue3/src/pages/chat/layouts/chatWithId/index.vue
@@ -1,101 +1,78 @@
 <!-- 每个回话对应的聊天内容 -->
 <script setup lang="ts">
 import type { AnyObject } from 'typescript-api-pro';
-import type { BubbleProps } from 'vue-element-plus-x/types/Bubble';
 import type { BubbleListInstance } from 'vue-element-plus-x/types/BubbleList';
-import type { FilesCardProps } from 'vue-element-plus-x/types/FilesCard';
-import type { ThinkingStatus } from 'vue-element-plus-x/types/Thinking';
-import type { UnifiedMessage } from '@/utils/apiFormatConverter';
-import { ArrowLeftBold, ArrowRightBold, Delete, Document, DocumentCopy, Edit, Loading, Refresh } from '@element-plus/icons-vue';
+import { Loading } from '@element-plus/icons-vue';
 import { ElIcon, ElMessage } from 'element-plus';
 import { useHookFetch } from 'hook-fetch/vue';
-import mammoth from 'mammoth';
-import * as pdfjsLib from 'pdfjs-dist';
 import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
 import { Sender } from 'vue-element-plus-x';
 import { useRoute } from 'vue-router';
-import * as XLSX from 'xlsx';
 import { deleteMessages, unifiedSend } from '@/api';
-import MarkedMarkdown from '@/components/MarkedMarkdown/index.vue';
-import ModelSelect from '@/components/ModelSelect/index.vue';
-
-import Collapse from '@/layouts/components/Header/components/Collapse.vue';
-import CreateChat from '@/layouts/components/Header/components/CreateChat.vue';
-import TitleEditing from '@/layouts/components/Header/components/TitleEditing.vue';
-import { useDesignStore, useGuideTourStore } from '@/stores';
-import { useChatStore } from '@/stores/modules/chat';
+import { ChatHeader, DeleteModeToolbar, MessageItem } from '@/pages/chat/components';
+import { useChatStore, useUserStore } from '@/stores';
 import { useFilesStore } from '@/stores/modules/files';
 import { useModelStore } from '@/stores/modules/model';
 import { useSessionStore } from '@/stores/modules/session';
-import { useUserStore } from '@/stores/modules/user';
-import { convertToApiFormat, parseStreamChunk } from '@/utils/apiFormatConverter';
+import { convertToApiFormat, parseStreamChunk, type UnifiedMessage } from '@/utils/apiFormatConverter';
+import { useFilePaste, type MessageItem as MessageItemType } from '@/composables/chat';
 import '@/styles/github-markdown.css';
 import '@/styles/yixin-markdown.scss';
 
-// 新增的导入
-const designStore = useDesignStore();
-const sessionStore = useSessionStore();
-const currentSession = computed(() => sessionStore.currentSession);
-
-type MessageItem = BubbleProps & {
-  key: number | string;
-  id?: number | string; // 消息ID，用于删除
-  role: 'ai' | 'user' | 'assistant' | string;
-  avatar?: string;
-  showAvatar?: boolean; // 是否显示头像
-  thinkingStatus?: ThinkingStatus;
-  thinlCollapse?: boolean;
-  reasoning_content?: string;
-  images?: Array<{ url: string; name?: string }>; // 用户消息中的图片列表
-  files?: Array<{ name: string; size: number }>; // 用户消息中的文件列表
-  creationTime?: string;
-  tokenUsage?: { prompt: number; completion: number; total: number };
-};
-
 const route = useRoute();
+const userStore = useUserStore();
 const chatStore = useChatStore();
 const modelStore = useModelStore();
 const filesStore = useFilesStore();
-const userStore = useUserStore();
-const guideTourStore = useGuideTourStore();
+const sessionStore = useSessionStore();
 
-// 用户头像
-const avatar = computed(() => {
-  const userInfo = userStore.userInfo;
-  return userInfo?.avatar || 'https://avatars.githubusercontent.com/u/76239030?v=4';
-});
+const currentSession = computed(() => sessionStore.currentSession);
 
 const inputValue = ref('');
 const senderRef = ref<InstanceType<typeof Sender> | null>(null);
-const bubbleItems = ref<MessageItem[]>([]);
+const bubbleItems = ref<MessageItemType[]>([]);
 const bubbleListRef = ref<BubbleListInstance | null>(null);
 const isSending = ref(false);
 
 // 删除模式相关状态
 const isDeleteMode = ref(false);
 const selectedMessageIds = ref<(number | string)[]>([]);
-const deleteTargetMessage = ref<MessageItem | null>(null); // 记录触发删除的消息
 
 // 编辑模式相关状态
 const editingMessageKey = ref<number | string | null>(null);
 const editingContent = ref('');
 
-// 临时ID计数器（用于新消息）
+// 临时ID计数器
 let tempIdCounter = -1;
 
-// 文件处理相关常量（与 FilesSelect 保持一致）
+// 记录当前请求使用的 API 格式类型
+const currentRequestApiType = ref('');
+
+// 记录进入思考中
+let isThinking = false;
+
+// 文件处理相关常量
 const MAX_FILE_SIZE = 3 * 1024 * 1024;
 const MAX_TOTAL_CONTENT_LENGTH = 150000;
-const MAX_TEXT_FILE_LENGTH = 50000;
-const MAX_WORD_LENGTH = 30000;
-const MAX_EXCEL_ROWS = 100;
-const MAX_PDF_PAGES = 10;
 
-// 配置 PDF.js worker
-pdfjsLib.GlobalWorkerOptions.workerSrc = `https://cdn.jsdelivr.net/npm/pdfjs-dist@${pdfjsLib.version}/build/pdf.worker.min.mjs`;
-
-// 记录当前请求使用的 API 格式类型，用于正确解析响应
-const currentRequestApiType = ref<string>('');
+// 使用文件粘贴 composable
+const { handlePaste } = useFilePaste({
+  maxFileSize: MAX_FILE_SIZE,
+  maxTotalContentLength: MAX_TOTAL_CONTENT_LENGTH,
+  getCurrentTotalLength: () => {
+    let total = 0;
+    filesStore.filesList.forEach((f) => {
+      if (f.fileType === 'text' && f.fileContent) {
+        total += f.fileContent.length;
+      }
+      if (f.fileType === 'image' && f.base64) {
+        total += Math.floor(f.base64.length * 0.5);
+      }
+    });
+    return total;
+  },
+  addFiles: (files) => filesStore.setFilesList([...filesStore.filesList, ...files]),
+});
 
 // 创建统一发送请求的包装函数
 function unifiedSendWrapper(params: any) {
@@ -107,81 +84,60 @@ const { stream, loading: isLoading, cancel } = useHookFetch({
   request: unifiedSendWrapper,
   onError: async (error) => {
     isLoading.value = false;
-
     if (error.status === 403) {
-      const data = await (error.response.json());
-      // 弹窗提示
+      const data = await error.response.json();
       ElMessage.error(data.error.message);
-      return Promise.reject(data);
     }
     if (error.status === 401) {
       ElMessage.error('登录已过期，请重新登录！');
-      // 弹窗提示
       userStore.logout();
       userStore.openLoginDialog();
     }
   },
-
 });
-// 记录进入思考中
-let isThinking = false;
 
+// 监听路由变化
 watch(
   () => route.params?.id,
-  async (_id_) => {
-    // 切换会话时重置状态
+  async (id) => {
     exitDeleteMode();
     cancelEdit();
     tempIdCounter = -1;
 
-    if (_id_) {
-      if (_id_ !== 'not_login') {
-        // 判断的当前会话id是否有聊天记录，有缓存则直接赋值展示
-        if (chatStore.chatMap[`${_id_}`] && chatStore.chatMap[`${_id_}`].length) {
-          bubbleItems.value = chatStore.chatMap[`${_id_}`] as MessageItem[];
-          // 滚动到底部
-          setTimeout(() => {
-            bubbleListRef.value!.scrollToBottom();
-          }, 350);
-          return;
-        }
-
-        // 无缓存则请求聊天记录
-        await chatStore.requestChatList(`${_id_}`);
-        // 请求聊天记录后，赋值回显，并滚动到底部
-        bubbleItems.value = chatStore.chatMap[`${_id_}`] as MessageItem[];
-        // 滚动到底部
-        setTimeout(() => {
-          bubbleListRef.value!.scrollToBottom();
-        }, 350);
+    if (id && id !== 'not_login') {
+      // 有缓存则直接赋值展示
+      if (chatStore.chatMap[`${id}`]?.length) {
+        bubbleItems.value = chatStore.chatMap[`${id}`] as MessageItemType[];
+        scrollToBottom();
+        return;
       }
 
-      // 如果本地有发送内容 ，则直接发送
-      const v = localStorage.getItem('chatContent');
-      if (v) {
-        // 发送消息
-        setTimeout(() => {
-          startSSE(v);
-        }, 350);
+      // 无缓存则请求聊天记录
+      await chatStore.requestChatList(`${id}`);
+      bubbleItems.value = chatStore.chatMap[`${id}`] as MessageItemType[];
+      scrollToBottom();
+    }
 
-        localStorage.removeItem('chatContent');
-      }
+    // 本地有发送内容则直接发送
+    const v = localStorage.getItem('chatContent');
+    if (v) {
+      setTimeout(() => startSSE(v), 350);
+      localStorage.removeItem('chatContent');
     }
   },
   { immediate: true, deep: true },
 );
 
+function scrollToBottom() {
+  setTimeout(() => bubbleListRef.value?.scrollToBottom(), 350);
+}
+
 /**
  * 处理流式响应的数据块
- * 解析 AI 返回的数据，更新消息内容和思考状态
- * @param {AnyObject} chunk - 流式响应的数据块
  */
 function handleDataChunk(chunk: AnyObject) {
   try {
-    // 使用统一的解析器，根据当前请求的 API 格式类型解析响应
     const parsed = parseStreamChunk(chunk, currentRequestApiType.value || 'Completions');
-    console.log('✅ [解析结果]:', parsed);
-
     const latest = bubbleItems.value[bubbleItems.value.length - 1];
 
     // 处理 token 使用情况
@@ -206,171 +162,61 @@ function handleDataChunk(chunk: AnyObject) {
       const thinkStart = parsed.content.includes('<think>');
       const thinkEnd = parsed.content.includes('</think>');
 
-      if (thinkStart)
-        isThinking = true;
-      if (thinkEnd)
-        isThinking = false;
+      if (thinkStart) isThinking = true;
+      if (thinkEnd) isThinking = false;
 
       if (isThinking) {
         latest.thinkingStatus = 'thinking';
         latest.loading = true;
         latest.thinlCollapse = true;
         latest.reasoning_content += parsed.content.replace('<think>', '').replace('</think>', '');
-      }
-      else {
+      } else {
         latest.thinkingStatus = 'end';
         latest.loading = false;
         latest.content += parsed.content;
       }
     }
-  }
-  catch (err) {
+  } catch (err) {
     console.error('解析数据时出错:', err);
   }
 }
 
-/**
- * 处理错误信息
- * @param {any} err - 错误对象
- */
-function handleError(err: any) {
-  console.error('Fetch error:', err);
-}
-
 /**
  * 发送消息并处理流式响应
- * 支持发送文本、图片和文件
- * @param {string} chatContent - 用户输入的文本内容
- * @param {boolean} skipAddUserMessage - 是否跳过添加用户消息（用于重新生成）
  */
-async function startSSE(chatContent: string, skipAddUserMessage = false) {
-  if (isSending.value)
-    return;
+async function startSSE(chatContent: string) {
+  if (isSending.value) return;
 
   // 检查是否有未上传完成的文件
   const hasUnuploadedFiles = filesStore.filesList.some(f => !f.isUploaded);
-  if (hasUnuploadedFiles && !skipAddUserMessage) {
+  if (hasUnuploadedFiles) {
     ElMessage.warning('文件正在上传中，请稍候...');
     return;
   }
 
   isSending.value = true;
-
-  // 记录当前请求使用的 API 格式类型，用于后续正确解析响应
   currentRequestApiType.value = modelStore.currentModelInfo.modelApiType || 'Completions';
-  console.log('🚀 [发送请求] 当前模型信息:', {
-    modelId: modelStore.currentModelInfo.modelId,
-    modelName: modelStore.currentModelInfo.modelName,
-    modelApiType: modelStore.currentModelInfo.modelApiType,
-    currentRequestApiType: currentRequestApiType.value,
-  });
 
   try {
-    // 清空输入框
     inputValue.value = '';
 
-    // 获取当前上传的图片和文件（在清空之前保存）
+    // 获取当前上传的图片和文件
     const imageFiles = filesStore.filesList.filter(f => f.isUploaded && f.fileType === 'image');
     const textFiles = filesStore.filesList.filter(f => f.isUploaded && f.fileType === 'text');
 
-    const images = imageFiles.map(f => ({
-      url: f.base64!, // 使用base64作为URL
-      name: f.name,
-    }));
-
-    const files = textFiles.map(f => ({
-      name: f.name!,
-      size: f.fileSize!,
-    }));
-
-    // 如果不是跳过添加用户消息（正常发送模式），则添加用户消息
-    if (!skipAddUserMessage) {
-      addMessage(chatContent, true, images, files);
-    }
+    // 添加消息
+    addMessage(chatContent, true, imageFiles, textFiles);
     addMessage('', false);
 
-    // 立即清空文件列表（不要等到响应完成）
+    // 立即清空文件列表
     filesStore.clearFilesList();
 
-    // 这里有必要调用一下 BubbleList 组件的滚动到底部 手动触发 自动滚动
+    // 滚动到底部
     bubbleListRef.value?.scrollToBottom();
 
-    // 组装消息内容，支持图片和文件
-    const messagesContent = bubbleItems.value.slice(0, -1).slice(-6).map((item: MessageItem) => {
-      const baseMessage: any = {
-        role: item.role,
-      };
-
-      // 如果是用户消息且有附件（图片或文件），组装成数组格式
-      if (item.role === 'user' && item.key === bubbleItems.value.length - 2) {
-        // 当前发送的消息
-        const contentArray: any[] = [];
-
-        // 添加文本内容
-        if (item.content) {
-          contentArray.push({
-            type: 'text',
-            text: item.content,
-          });
-        }
-
-        // 添加文本文件内容（使用XML格式）
-        if (textFiles.length > 0) {
-          let fileContent = '\n\n';
-          textFiles.forEach((fileItem, index) => {
-            fileContent += `<ATTACHMENT_FILE>\n`;
-            fileContent += `<FILE_INDEX>File ${index + 1}</FILE_INDEX>\n`;
-            fileContent += `<FILE_NAME>${fileItem.name}</FILE_NAME>\n`;
-            fileContent += `<FILE_CONTENT>\n${fileItem.fileContent}\n</FILE_CONTENT>\n`;
-            fileContent += `</ATTACHMENT_FILE>\n`;
-            if (index < textFiles.length - 1) {
-              fileContent += '\n';
-            }
-          });
-
-          contentArray.push({
-            type: 'text',
-            text: fileContent,
-          });
-        }
-
-        // 添加图片内容（使用之前保存的 imageFiles）
-        imageFiles.forEach((fileItem) => {
-          if (fileItem.base64) {
-            contentArray.push({
-              type: 'image_url',
-              image_url: {
-                url: fileItem.base64, // 使用base64
-                name: fileItem.name, // 保存图片名称
-              },
-            });
-          }
-        });
-
-        // 如果有图片或文件，使用数组格式
-        if (contentArray.length > 1 || imageFiles.length > 0 || textFiles.length > 0) {
-          baseMessage.content = contentArray;
-        }
-        else {
-          baseMessage.content = item.content;
-        }
-      }
-      else {
-        // 其他消息保持原样
-        baseMessage.content = (item.role === 'ai' || item.role === 'assistant') && item.content.length > 10000
-          ? `${item.content.substring(0, 10000)}...（内容过长，已省略）`
-          : item.content;
-      }
-
-      return baseMessage;
-    });
-
-    // 获取当前模型的 API 类型
+    // 组装消息内容
+    const messagesContent = buildMessagesContent(imageFiles, textFiles);
     const apiType = modelStore.currentModelInfo.modelApiType || 'Completions';
-    console.log('📤 [转换请求] API 类型:', apiType);
-    console.log('📤 [转换前] 消息内容:', messagesContent);
-
-    // 根据 API 类型转换请求格式
     const convertedRequest = convertToApiFormat(
       messagesContent as UnifiedMessage[],
       apiType,
@@ -378,222 +224,176 @@ async function startSSE(chatContent: string, skipAddUserMessage = false) {
       true,
     );
 
-    console.log('📤 [转换后] 请求体:', convertedRequest);
-
-    // 使用新的统一接口发送请求
     const sessionId = route.params?.id !== 'not_login' ? String(route.params?.id) : 'not_login';
-    const modelId = modelStore.currentModelInfo.modelId ?? '';
 
     for await (const chunk of stream({
       data: convertedRequest,
       apiType,
-      modelId,
+      modelId: modelStore.currentModelInfo.modelId ?? '',
       sessionId,
     })) {
-      console.log('📦 [接收响应] 原始数据块:', chunk.result);
-      console.log('🔧 [解析响应] 使用格式:', currentRequestApiType.value);
       handleDataChunk(chunk.result as AnyObject);
     }
-  }
-  catch (err) {
-    if (err.name === 'AbortError') {
-      console.log('用户中止请求'); // 正常中止，无需提示
-    }
-    else {
-      handleError(err); // 其他错误
-      // ElMessage.error('消息发送失败，请重试');
-    }
-  }
-  finally {
-    isSending.value = false;
-
-    // 停止打字器状态和加载状态
-    if (bubbleItems.value.length) {
-      const latest = bubbleItems.value[bubbleItems.value.length - 1];
-      latest.typing = false;
-      latest.loading = false;
-      if (latest.thinkingStatus === 'thinking') {
-        latest.thinkingStatus = 'end';
-      }
-    }
-
-    // 保存聊天记录到 chatMap（本地缓存，刷新后可恢复）
-    if (route.params?.id && route.params.id !== 'not_login') {
-      chatStore.chatMap[`${route.params.id}`] = bubbleItems.value as any;
+  } catch (err: any) {
+    if (err.name !== 'AbortError') {
+      console.error('Fetch error:', err);
     }
+  } finally {
+    finishSending();
   }
 }
 
 /**
- * 中断正在进行的请求
- * 停止流式响应并重置状态
+ * 构建消息内容
  */
-async function cancelSSE() {
-  try {
-    cancel(); // 直接调用，无需参数
-    isSending.value = false;
-    if (bubbleItems.value.length) {
-      const latest = bubbleItems.value[bubbleItems.value.length - 1];
-      latest.typing = false;
-      latest.loading = false;
-      if (latest.thinkingStatus === 'thinking') {
-        latest.thinkingStatus = 'end';
+function buildMessagesContent(imageFiles: any[], textFiles: any[]) {
+  return bubbleItems.value.slice(0, -1).slice(-6).map((item: MessageItemType, index, arr) => {
+    const baseMessage: any = { role: item.role };
+    const isCurrentMessage = index === arr.length - 1;
+
+    if (item.role === 'user' && isCurrentMessage) {
+      const contentArray: any[] = [];
+
+      if (item.content) {
+        contentArray.push({ type: 'text', text: item.content });
       }
+
+      // 添加文本文件内容
+      if (textFiles.length > 0) {
+        let fileContent = '\n\n';
+        textFiles.forEach((fileItem, idx) => {
+          fileContent += `<ATTACHMENT_FILE>\n`;
+          fileContent += `<FILE_INDEX>File ${idx + 1}</FILE_INDEX>\n`;
+          fileContent += `<FILE_NAME>${fileItem.name}</FILE_NAME>\n`;
+          fileContent += `<FILE_CONTENT>\n${fileItem.fileContent}\n</FILE_CONTENT>\n`;
+          fileContent += `</ATTACHMENT_FILE>\n`;
+          if (idx < textFiles.length - 1) fileContent += '\n';
+        });
+        contentArray.push({ type: 'text', text: fileContent });
+      }
+
+      // 添加图片
+      imageFiles.forEach((fileItem) => {
+        if (fileItem.base64) {
+          contentArray.push({
+            type: 'image_url',
+            image_url: { url: fileItem.base64, name: fileItem.name },
+          });
+        }
+      });
+
+      baseMessage.content = contentArray.length > 1 || imageFiles.length > 0 || textFiles.length > 0
+        ? contentArray
+        : item.content;
+    } else {
+      baseMessage.content = (item.role === 'ai' || item.role === 'assistant') && item.content.length > 10000
+        ? `${item.content.substring(0, 10000)}...（内容过长，已省略）`
+        : item.content;
     }
-  }
-  catch (err) {
-    handleError(err);
-  }
+
+    return baseMessage;
+  });
 }
 
 /**
  * 添加消息到聊天列表
- * @param {string} message - 消息内容
- * @param {boolean} isUser - 是否为用户消息
- * @param {Array<{url: string, name?: string}>} images - 图片列表（可选）
- * @param {Array<{name: string, size: number}>} files - 文件列表（可选）
  */
-function addMessage(message: string, isUser: boolean, images?: Array<{ url: string; name?: string }>, files?: Array<{ name: string; size: number }>) {
+function addMessage(
+  message: string,
+  isUser: boolean,
+  imageFiles?: any[],
+  textFiles?: any[],
+) {
   const tempId = tempIdCounter--;
-  const obj: MessageItem = {
+  const obj: MessageItemType = {
     key: tempId,
     id: tempId,
-    // 头像不显示（后续可能会显示）
-    // avatar: isUser ? getUserProfilePicture() : systemProfilePicture,
-    // avatarSize: '32px',
     role: isUser ? 'user' : 'assistant',
     placement: isUser ? 'end' : 'start',
-    // 用户消息：气泡形状；AI消息：无气泡形状，宽度100%
     isMarkdown: !isUser,
     loading: !isUser,
     content: message || '',
     reasoning_content: '',
     thinkingStatus: 'start',
     thinlCollapse: false,
-    // AI消息使用 noStyle 去除气泡样式，宽度100%
     noStyle: !isUser,
     shape: isUser ? 'corner' : undefined,
-    images: images && images.length > 0 ? images : undefined,
-    files: files && files.length > 0 ? files : undefined,
+    images: imageFiles?.length ? imageFiles.map(f => ({ url: f.base64!, name: f.name })) : undefined,
+    files: textFiles?.length ? textFiles.map(f => ({ name: f.name!, size: f.fileSize! })) : undefined,
   };
   bubbleItems.value.push(obj);
 }
 
 /**
- * 处理思考链展开/收起状态变化
- * @param {object} payload - 状态变化的载荷
- * @param {boolean} payload.value - 展开/收起状态
- * @param {ThinkingStatus} payload.status - 思考状态
+ * 完成发送
  */
-function handleChange(payload: { value: boolean; status: ThinkingStatus }) {
-}
-
-/**
- * 删除文件卡片
- * @param {FilesCardProps} _item - 文件卡片项（未使用）
- * @param {number} index - 要删除的文件索引
- */
-function handleDeleteCard(_item: FilesCardProps, index: number) {
-  filesStore.deleteFileByIndex(index);
-}
-
-watch(
-  () => filesStore.filesList.length,
-  (val) => {
-    if (val > 0) {
-      nextTick(() => {
-        senderRef.value?.openHeader();
-      });
+function finishSending() {
+  isSending.value = false;
+  const latest = bubbleItems.value[bubbleItems.value.length - 1];
+  if (latest) {
+    latest.typing = false;
+    latest.loading = false;
+    if (latest.thinkingStatus === 'thinking') {
+      latest.thinkingStatus = 'end';
     }
-    else {
-      nextTick(() => {
-        senderRef.value?.closeHeader();
-      });
-    }
-  },
-);
+  }
 
-/**
- * 复制消息内容到剪贴板
- * @param {any} item - 消息项
- */
-function copy(item: any) {
-  navigator.clipboard.writeText(item.content || '')
-    .then(() => ElMessage.success('已复制到剪贴板'))
-    .catch(() => ElMessage.error('复制失败'));
+  // 保存聊天记录到 chatMap
+  if (route.params?.id && route.params.id !== 'not_login') {
+    chatStore.chatMap[`${route.params.id}`] = bubbleItems.value as any;
+  }
 }
 
 /**
- * 检查消息是否有有效ID（已保存到后端）
+ * 中断请求
  */
-function hasValidId(item: MessageItem): boolean {
-  return item.id !== undefined && (typeof item.id === 'string' || (typeof item.id === 'number' && item.id > 0));
+function cancelSSE() {
+  cancel();
+  finishSending();
 }
 
-/**
- * 进入删除模式（从指定消息开始）
- * @param item - 触发删除的消息
- */
-function enterDeleteMode(item?: MessageItem) {
+// ==================== 删除模式 ====================
+
+function enterDeleteMode(item?: MessageItemType) {
   isDeleteMode.value = true;
   selectedMessageIds.value = [];
-  deleteTargetMessage.value = item || null;
-
-  // 如果指定了消息，只自动选中当前点击的这条消息
-  if (item && item.id) {
+  if (item?.id) {
     selectedMessageIds.value = [item.id];
   }
 }
 
-/**
- * 退出删除模式
- */
 function exitDeleteMode() {
   isDeleteMode.value = false;
   selectedMessageIds.value = [];
-  deleteTargetMessage.value = null;
 }
 
-/**
- * 切换消息选中状态
- */
-function toggleMessageSelection(item: MessageItem) {
-  if (!item.id)
-    return;
+function toggleMessageSelection(item: MessageItemType) {
+  if (!item.id) return;
   const index = selectedMessageIds.value.indexOf(item.id);
   if (index > -1) {
     selectedMessageIds.value.splice(index, 1);
-  }
-  else {
+  } else {
     selectedMessageIds.value.push(item.id);
   }
 }
 
-/**
- * 确认删除选中的消息
- */
 async function confirmDelete() {
   if (selectedMessageIds.value.length === 0) {
     ElMessage.warning('请选择要删除的消息');
     return;
   }
 
-  // 区分已保存消息（有有效ID）和临时消息（负数ID或undefined）
   const savedIds = selectedMessageIds.value.filter(id => typeof id === 'string' || (typeof id === 'number' && id > 0));
   const tempIds = selectedMessageIds.value.filter(id => typeof id === 'number' && id < 0);
-  console.log('savedIds---', savedIds);
+
   try {
-    // 只有已保存的消息才调用删除接口
     if (savedIds.length > 0) {
       await deleteMessages({ ids: savedIds, isDeleteSubsequent: false });
     }
 
-    // 从本地列表中移除已删除的消息（包括临时消息）
     bubbleItems.value = bubbleItems.value.filter((item) => {
-      const itemId = item.id;
-      if (itemId === undefined)
-        return true;
-      return !savedIds.includes(itemId) && !tempIds.includes(itemId as number);
+      if (item.id === undefined) return true;
+      return !savedIds.includes(item.id) && !tempIds.includes(item.id as number);
     });
 
     // 更新缓存
@@ -603,26 +403,60 @@ async function confirmDelete() {
 
     ElMessage.success('删除成功');
     exitDeleteMode();
-  }
-  catch (error) {
+  } catch (error) {
     ElMessage.error('删除失败');
   }
 }
 
-/**
- * 重新生成AI消息
- * 删除对应的用户消息及之后的所有消息，然后重新发送用户消息
- * 这样可以避免后端重复保存用户消息（因为旧的用户消息已被删除）
- */
-async function regenerateMessage(item: MessageItem) {
-  if (isSending.value)
-    return;
+// ==================== 编辑模式 ====================
+
+function startEditMessage(item: MessageItemType) {
+  editingMessageKey.value = item.key;
+  editingContent.value = item.content || '';
+}
+
+function cancelEdit() {
+  editingMessageKey.value = null;
+  editingContent.value = '';
+}
+
+async function submitEditMessage(item: MessageItemType) {
+  if (isSending.value || !editingContent.value.trim()) return;
 
   const itemIndex = bubbleItems.value.findIndex(msg => msg.key === item.key);
-  if (itemIndex === -1)
-    return;
+  if (itemIndex === -1) return;
 
-  // 找到该AI消息对应的用户消息（往前找最近的一条用户消息）
+  const messageId = item.id;
+  const newContent = editingContent.value.trim();
+  cancelEdit();
+
+  try {
+    if (messageId !== undefined && (typeof messageId === 'string' || (typeof messageId === 'number' && messageId > 0))) {
+      await deleteMessages({ ids: [messageId], isDeleteSubsequent: true });
+    }
+
+    bubbleItems.value = bubbleItems.value.slice(0, itemIndex);
+    await startSSE(newContent);
+  } catch (error) {
+    ElMessage.error('编辑失败');
+  }
+}
+
+// ==================== 其他操作 ====================
+
+function copy(item: MessageItemType) {
+  navigator.clipboard.writeText(item.content || '')
+    .then(() => ElMessage.success('已复制到剪贴板'))
+    .catch(() => ElMessage.error('复制失败'));
+}
+
+async function regenerateMessage(item: MessageItemType) {
+  if (isSending.value) return;
+
+  const itemIndex = bubbleItems.value.findIndex(msg => msg.key === item.key);
+  if (itemIndex === -1) return;
+
+  // 找到对应的用户消息
   let targetUserMessageIndex = -1;
   for (let i = itemIndex - 1; i >= 0; i--) {
     if (bubbleItems.value[i]?.role === 'user') {
@@ -636,437 +470,40 @@ async function regenerateMessage(item: MessageItem) {
     return;
   }
 
-  // 获取用户消息的ID（只传这一个ID，后端会根据 isDeleteSubsequent 删除后续消息）
   const targetUserMessage = bubbleItems.value[targetUserMessageIndex];
   const userMessageId = targetUserMessage.id;
-  const userContent = targetUserMessage.content || '';
 
   try {
-    // 调用删除接口（只传用户消息ID，后端会自动删除后续消息）
     if (userMessageId !== undefined && (typeof userMessageId === 'string' || (typeof userMessageId === 'number' && userMessageId > 0))) {
       await deleteMessages({ ids: [userMessageId], isDeleteSubsequent: true });
     }
 
-    // 从本地列表中移除（包括临时消息）
     bubbleItems.value = bubbleItems.value.slice(0, targetUserMessageIndex);
-
-    // 调用 startSSE 重新发送用户消息（这会添加新的用户消息和AI消息，然后发送请求）
-    await startSSE(userContent);
-  }
-  catch (error) {
+    await startSSE(targetUserMessage.content || '');
+  } catch (error) {
     ElMessage.error('重新生成失败');
   }
 }
 
-/**
- * 进入编辑模式
- */
-function startEditMessage(item: MessageItem) {
-  editingMessageKey.value = item.key;
-  editingContent.value = item.content || '';
-}
-
-/**
- * 取消编辑
- */
-function cancelEdit() {
-  editingMessageKey.value = null;
-  editingContent.value = '';
-}
-
-/**
- * 提交编辑后的消息
- * 删除当前消息及之后的消息，发送新消息
- */
-async function submitEditMessage(item: MessageItem) {
-  if (isSending.value || !editingContent.value.trim())
-    return;
-
-  const itemIndex = bubbleItems.value.findIndex(msg => msg.key === item.key);
-  if (itemIndex === -1)
-    return;
-
-  // 获取当前编辑消息的ID（只传这一个ID，后端会根据 isDeleteSubsequent 删除后续消息）
-  const messageId = item.id;
-  const newContent = editingContent.value.trim();
-  cancelEdit();
-
-  try {
-    // 调用删除接口（只传当前消息ID，后端会自动删除后续消息）
-    if (messageId !== undefined && (typeof messageId === 'string' || (typeof messageId === 'number' && messageId > 0))) {
-      await deleteMessages({ ids: [messageId], isDeleteSubsequent: true });
-    }
-
-    // 从本地列表中移除（包括临时消息）
-    bubbleItems.value = bubbleItems.value.slice(0, itemIndex);
-
-    // 发送新消息
-    await startSSE(newContent);
-  }
-  catch (error) {
-    ElMessage.error('编辑失败');
-  }
-}
-
-/**
- * 图片预览
- * 在新窗口中打开图片
- * @param {string} url - 图片 URL
- */
 function handleImagePreview(url: string) {
   window.open(url, '_blank');
 }
 
-/**
- * 压缩图片
- */
-function compressImage(file: File, maxWidth = 1024, maxHeight = 1024, quality = 0.8): Promise<Blob> {
-  return new Promise((resolve, reject) => {
-    const reader = new FileReader();
-    reader.onload = (e) => {
-      const img = new Image();
-      img.onload = () => {
-        const canvas = document.createElement('canvas');
-        let width = img.width;
-        let height = img.height;
-
-        if (width > maxWidth || height > maxHeight) {
-          const ratio = Math.min(maxWidth / width, maxHeight / height);
-          width = width * ratio;
-          height = height * ratio;
-        }
-
-        canvas.width = width;
-        canvas.height = height;
-
-        const ctx = canvas.getContext('2d')!;
-        ctx.drawImage(img, 0, 0, width, height);
-
-        canvas.toBlob(
-          (blob) => {
-            if (blob) {
-              resolve(blob);
-            }
-            else {
-              reject(new Error('压缩失败'));
-            }
-          },
-          file.type,
-          quality,
-        );
-      };
-      img.onerror = reject;
-      img.src = e.target?.result as string;
-    };
-    reader.onerror = reject;
-    reader.readAsDataURL(file);
-  });
-}
-
-/**
- * 将 Blob 转换为 base64
- */
-function blobToBase64(blob: Blob): Promise<string> {
-  return new Promise((resolve, reject) => {
-    const reader = new FileReader();
-    reader.onload = () => {
-      resolve(reader.result as string);
-    };
-    reader.onerror = reject;
-    reader.readAsDataURL(blob);
-  });
-}
-
-/**
- * 判断是否为文本文件
- */
-function isTextFile(file: File): boolean {
-  if (file.type.startsWith('text/'))
-    return true;
-
-  const textExtensions = [
-    'txt',
-    'log',
-    'md',
-    'markdown',
-    'json',
-    'xml',
-    'yaml',
-    'yml',
-    'toml',
-    'ini',
-    'conf',
-    'config',
-    'js',
-    'jsx',
-    'ts',
-    'tsx',
-    'vue',
-    'html',
-    'htm',
-    'css',
-    'scss',
-    'sass',
-    'less',
-    'java',
-    'c',
-    'cpp',
-    'h',
-    'hpp',
-    'cs',
-    'py',
-    'rb',
-    'go',
-    'rs',
-    'swift',
-    'kt',
-    'php',
-    'sh',
-    'bash',
-    'sql',
-    'csv',
-    'tsv',
-  ];
-
-  const ext = file.name.split('.').pop()?.toLowerCase();
-  return ext ? textExtensions.includes(ext) : false;
-}
-
-/**
- * 读取文本文件
- */
-function readTextFile(file: File): Promise<string> {
-  return new Promise((resolve, reject) => {
-    const reader = new FileReader();
-    reader.onload = () => resolve(reader.result as string);
-    reader.onerror = reject;
-    reader.readAsText(file, 'UTF-8');
-  });
-}
-
-/**
- * 解析 Excel 文件
- */
-async function parseExcel(file: File): Promise<{ content: string; totalRows: number; extractedRows: number }> {
-  return new Promise((resolve, reject) => {
-    const reader = new FileReader();
-    reader.onload = (e) => {
-      try {
-        const data = new Uint8Array(e.target?.result as ArrayBuffer);
-        const workbook = XLSX.read(data, { type: 'array' });
-
-        let result = '';
-        let totalRows = 0;
-        let extractedRows = 0;
-
-        workbook.SheetNames.forEach((sheetName, index) => {
-          const worksheet = workbook.Sheets[sheetName];
-          const range = XLSX.utils.decode_range(worksheet['!ref'] || 'A1');
-          const sheetTotalRows = range.e.r - range.s.r + 1;
-          totalRows += sheetTotalRows;
-
-          const rowsToExtract = Math.min(sheetTotalRows, MAX_EXCEL_ROWS);
-          extractedRows += rowsToExtract;
-
-          const limitedData: any[][] = [];
-          for (let row = range.s.r; row < range.s.r + rowsToExtract; row++) {
-            const rowData: any[] = [];
-            for (let col = range.s.c; col <= range.e.c; col++) {
-              const cellAddress = XLSX.utils.encode_cell({ r: row, c: col });
-              const cell = worksheet[cellAddress];
-              rowData.push(cell ? cell.v : '');
-            }
-            limitedData.push(rowData);
-          }
-
-          const csvData = limitedData.map(row => row.join(',')).join('\n');
-          if (workbook.SheetNames.length > 1)
-            result += `=== Sheet: ${sheetName} ===\n`;
-          result += csvData;
-          if (index < workbook.SheetNames.length - 1)
-            result += '\n\n';
-        });
-
-        resolve({ content: result, totalRows, extractedRows });
+// 监听文件列表变化
+watch(
+  () => filesStore.filesList.length,
+  (val) => {
+    nextTick(() => {
+      if (val > 0) {
+        senderRef.value?.openHeader();
+      } else {
+        senderRef.value?.closeHeader();
       }
-      catch (error) {
-        reject(error);
-      }
-    };
-    reader.onerror = reject;
-    reader.readAsArrayBuffer(file);
-  });
-}
+    });
+  },
+);
 
-/**
- * 解析 Word 文档
- */
-async function parseWord(file: File): Promise<{ content: string; totalLength: number; extracted: boolean }> {
-  return new Promise((resolve, reject) => {
-    const reader = new FileReader();
-    reader.onload = async (e) => {
-      try {
-        const arrayBuffer = e.target?.result as ArrayBuffer;
-        const result = await mammoth.extractRawText({ arrayBuffer });
-        const fullText = result.value;
-        const totalLength = fullText.length;
-
-        if (totalLength > MAX_WORD_LENGTH) {
-          const truncated = fullText.substring(0, MAX_WORD_LENGTH);
-          resolve({ content: truncated, totalLength, extracted: true });
-        }
-        else {
-          resolve({ content: fullText, totalLength, extracted: false });
-        }
-      }
-      catch (error) {
-        reject(error);
-      }
-    };
-    reader.onerror = reject;
-    reader.readAsArrayBuffer(file);
-  });
-}
-
-/**
- * 解析 PDF 文件
- */
-async function parsePDF(file: File): Promise<{ content: string; totalPages: number; extractedPages: number }> {
-  return new Promise((resolve, reject) => {
-    const reader = new FileReader();
-    reader.onload = async (e) => {
-      try {
-        const typedArray = new Uint8Array(e.target?.result as ArrayBuffer);
-        const pdf = await pdfjsLib.getDocument(typedArray).promise;
-        const totalPages = pdf.numPages;
-        const pagesToExtract = Math.min(totalPages, MAX_PDF_PAGES);
-
-        let fullText = '';
-        for (let i = 1; i <= pagesToExtract; i++) {
-          const page = await pdf.getPage(i);
-          const textContent = await page.getTextContent();
-          const pageText = textContent.items.map((item: any) => item.str).join(' ');
-          fullText += `${pageText}\n`;
-        }
-
-        resolve({ content: fullText, totalPages, extractedPages: pagesToExtract });
-      }
-      catch (error) {
-        reject(error);
-      }
-    };
-    reader.onerror = reject;
-    reader.readAsArrayBuffer(file);
-  });
-}
-
-/**
- * 处理粘贴事件
- */
-async function handlePaste(event: ClipboardEvent) {
-  const items = event.clipboardData?.items;
-  if (!items)
-    return;
-
-  const files: File[] = [];
-  for (let i = 0; i < items.length; i++) {
-    const item = items[i];
-    if (item.kind === 'file') {
-      const file = item.getAsFile();
-      if (file) {
-        files.push(file);
-      }
-    }
-  }
-
-  if (files.length === 0)
-    return;
-
-  event.preventDefault();
-
-  // 计算已有文件的总内容长度
-  let totalContentLength = 0;
-  filesStore.filesList.forEach((f) => {
-    if (f.fileType === 'text' && f.fileContent) {
-      totalContentLength += f.fileContent.length;
-    }
-    if (f.fileType === 'image' && f.base64) {
-      totalContentLength += Math.floor(f.base64.length * 0.5);
-    }
-  });
-
-  const arr: any[] = [];
-
-  for (const file of files) {
-    // 验证文件大小
-    if (file.size > MAX_FILE_SIZE) {
-      ElMessage.error(`文件 ${file.name} 超过 3MB 限制，已跳过`);
-      continue;
-    }
-
-    const isImage = file.type.startsWith('image/');
-
-    if (isImage) {
-      try {
-        const compressionLevels = [
-          { maxWidth: 800, maxHeight: 800, quality: 0.6 },
-          { maxWidth: 600, maxHeight: 600, quality: 0.5 },
-          { maxWidth: 400, maxHeight: 400, quality: 0.4 },
-        ];
-
-        let compressedBlob: Blob | null = null;
-        let base64 = '';
-
-        for (const level of compressionLevels) {
-          compressedBlob = await compressImage(file, level.maxWidth, level.maxHeight, level.quality);
-          base64 = await blobToBase64(compressedBlob);
-
-          const estimatedLength = Math.floor(base64.length * 0.5);
-          if (totalContentLength + estimatedLength <= MAX_TOTAL_CONTENT_LENGTH) {
-            totalContentLength += estimatedLength;
-            break;
-          }
-
-          compressedBlob = null;
-        }
-
-        if (!compressedBlob) {
-          ElMessage.error(`${file.name} 图片内容过大，请压缩后上传`);
-          continue;
-        }
-
-        arr.push({
-          uid: crypto.randomUUID(),
-          name: file.name,
-          fileSize: file.size,
-          file,
-          maxWidth: '200px',
-          showDelIcon: true,
-          imgPreview: true,
-          imgVariant: 'square',
-          url: base64,
-          isUploaded: true,
-          base64,
-          fileType: 'image',
-        });
-      }
-      catch (error) {
-        console.error('处理图片失败:', error);
-        ElMessage.error(`${file.name} 处理失败`);
-      }
-    }
-    else {
-      ElMessage.warning(`${file.name} 不支持粘贴，请使用上传按钮`);
-    }
-  }
-
-  if (arr.length > 0) {
-    filesStore.setFilesList([...filesStore.filesList, ...arr]);
-    ElMessage.success(`已添加 ${arr.length} 个文件`);
-  }
-}
-
-// 监听粘贴事件
+// 生命周期
 onMounted(() => {
   document.addEventListener('paste', handlePaste);
 });
@@ -1077,297 +514,78 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div class="chat-with-id-container">
-    <!-- 头部导航栏 -->
-    <div class="chat-header">
-      <div
-        class="overflow-hidden flex h-full items-center flex-row flex-1 w-fit flex-shrink-0 min-w-0"
-      >
-        <div class="w-full flex items-center flex-row">
-          <!-- 左边 -->
-          <div
-
-            class="left-box flex h-full items-center pl-20px gap-12px flex-shrink-0 flex-row"
-          >
-            <Collapse />
-            <CreateChat />
-            <div v-if="currentSession" class="w-0.5px h-30px bg-[rgba(217,217,217)]" />
-          </div>
-
-          <!-- 中间 -->
-          <div class="middle-box flex-1 min-w-0 ml-12px">
-            <TitleEditing />
-          </div>
-        </div>
-      </div>
-    </div>
+  <div class="chat-with-id">
+    <!-- 头部 -->
+    <ChatHeader show-title />
 
     <!-- 聊天内容区域 -->
-    <div class="chat-warp">
+    <div class="chat-with-id__content">
       <!-- 删除模式工具栏 -->
-      <div v-if="isDeleteMode" class="delete-mode-toolbar">
-        <span class="selected-count">已选择 {{ selectedMessageIds.length }} 条消息</span>
-        <div class="toolbar-actions">
-          <el-button type="danger" size="small" @click="confirmDelete">
-            确认删除
-          </el-button>
-          <el-button size="small" @click="exitDeleteMode">
-            取消
-          </el-button>
-        </div>
-      </div>
+      <DeleteModeToolbar
+        v-if="isDeleteMode"
+        :selected-count="selectedMessageIds.length"
+        @confirm="confirmDelete"
+        @cancel="exitDeleteMode"
+      />
 
+      <!-- 消息列表 -->
       <BubbleList
         ref="bubbleListRef"
         :list="bubbleItems"
         max-height="calc(100vh - 240px)"
         :class="{ 'delete-mode': isDeleteMode }"
       >
-        <template #header="{ item }">
-          <Thinking
-            v-if="item.reasoning_content && !isDeleteMode"
-            v-model="item.thinlCollapse"
-            :content="item.reasoning_content"
-            :status="item.thinkingStatus"
-            class="thinking-chain-warp"
-            @change="handleChange"
-          />
-        </template>
-
-        <!-- 自定义气泡内容 -->
         <template #content="{ item }">
-          <!-- 删除模式：勾选框（绝对定位在 content 左上角） -->
-          <template v-if="isDeleteMode">
-            <div
-              v-if="item.id"
-              class="delete-checkbox-inline"
-              @click.stop="toggleMessageSelection(item)"
-            >
-              <el-checkbox
-                :model-value="selectedMessageIds.includes(item.id)"
-                @click.stop
-                @update:model-value="toggleMessageSelection(item)"
-              />
-            </div>
-
-            <!-- AI 消息内容（点击切换选中） -->
-            <template v-if="item.role !== 'user'">
-              <div
-                class="ai-content-wrapper delete-mode-ai-content"
-                @click="item.id && toggleMessageSelection(item)"
-              >
-                <MarkedMarkdown v-if="item.content" class="markdown-body" :content="item.content" />
-              </div>
-            </template>
-
-            <!-- user 内容（气泡样式，点击切换选中） -->
-            <template v-if="item.role === 'user'">
-              <div
-                class="user-content-wrapper delete-mode-user-content"
-                @click="item.id && toggleMessageSelection(item)"
-              >
-                <template v-if="editingMessageKey === item.key">
-                  <div class="edit-message-wrapper-full">
-                    <el-input
-                      v-model="editingContent"
-                      type="textarea"
-                      :autosize="{ minRows: 3, maxRows: 10 }"
-                      placeholder="编辑消息内容"
-                    />
-                    <div class="edit-actions">
-                      <el-button type="primary" size="small" @click.stop="submitEditMessage(item)">
-                        发送
-                      </el-button>
-                      <el-button size="small" @click.stop="cancelEdit">
-                        取消
-                      </el-button>
-                    </div>
-                  </div>
-                </template>
-                <template v-else>
-                  <!-- 用户消息内容（直接显示，无气泡背景） -->
-                  <div v-if="item.images && item.images.length > 0" class="user-images">
-                    <img
-                      v-for="(image, index) in item.images"
-                      :key="index"
-                      :src="image.url"
-                      :alt="image.name || '图片'"
-                      class="user-image"
-                      @click.stop="() => handleImagePreview(image.url)"
-                    >
-                  </div>
-                  <div v-if="item.files && item.files.length > 0" class="user-files">
-                    <div
-                      v-for="(file, index) in item.files"
-                      :key="index"
-                      class="user-file-item"
-                    >
-                      <ElIcon class="file-icon">
-                        <Document />
-                      </ElIcon>
-                      <span class="file-name">{{ file.name }}</span>
-                    </div>
-                  </div>
-                  <div v-if="item.content" class="user-content">
-                    {{ item.content }}
-                  </div>
-                </template>
-              </div>
-            </template>
-          </template>
-
-          <!-- 正常模式：AI 消息 -->
-          <template v-if="!isDeleteMode && item.role !== 'user'">
-            <div class="ai-content-wrapper">
-              <MarkedMarkdown v-if="item.content" class="markdown-body" :content="item.content" />
-            </div>
-          </template>
-
-          <!-- 正常模式：user 内容 -->
-          <template v-if="!isDeleteMode && item.role === 'user'">
-            <div class="user-content-wrapper">
-              <!-- 编辑模式 - 宽度铺开 -->
-              <div v-if="editingMessageKey === item.key" class="edit-message-wrapper-full">
-                <el-input
-                  v-model="editingContent"
-                  type="textarea"
-                  :autosize="{ minRows: 3, maxRows: 10 }"
-                  placeholder="编辑消息内容"
-                />
-                <div class="edit-actions">
-                  <el-button type="primary" size="small" @click="submitEditMessage(item)">
-                    发送
-                  </el-button>
-                  <el-button size="small" @click="cancelEdit">
-                    取消
-                  </el-button>
-                </div>
-              </div>
-              <!-- 正常显示模式 -->
-              <template v-else>
-                <!-- 图片列表 -->
-                <div v-if="item.images && item.images.length > 0" class="user-images">
-                  <img
-                    v-for="(image, index) in item.images"
-                    :key="index"
-                    :src="image.url"
-                    :alt="image.name || '图片'"
-                    class="user-image"
-                    @click="() => handleImagePreview(image.url)"
-                  >
-                </div>
-                <!-- 文件列表 -->
-                <div v-if="item.files && item.files.length > 0" class="user-files">
-                  <div
-                    v-for="(file, index) in item.files"
-                    :key="index"
-                    class="user-file-item"
-                  >
-                    <ElIcon class="file-icon">
-                      <Document />
-                    </ElIcon>
-                    <span class="file-name">{{ file.name }}</span>
-                  </div>
-                </div>
-                <!-- 文本内容 -->
-                <div v-if="item.content" class="user-content">
-                  {{ item.content }}
-                </div>
-              </template>
-            </div>
-          </template>
-        </template>
-
-        <!-- 自定义底部 -->
-        <template #footer="{ item }">
-          <div v-if="!isDeleteMode" class="footer-wrapper">
-            <div class="footer-container">
-              <!-- 时间和token信息 -->
-              <div class="footer-info">
-                <span v-if="item.creationTime" class="footer-time">
-                  {{ item.creationTime }}
-                </span>
-                <span v-if="item.role !== 'user' && item?.tokenUsage?.total" class="footer-token">
-                  {{ item?.tokenUsage?.total }} tokens
-                </span>
-              </div>
-              <!-- 操作按钮组 -->
-              <div class="footer-actions">
-                <!-- 复制按钮 -->
-                <el-tooltip content="复制" placement="top">
-                  <el-button text @click="copy(item)">
-                    <ElIcon><DocumentCopy /></ElIcon>
-                  </el-button>
-                </el-tooltip>
-                <!-- AI消息：重新生成按钮 (role可能是'assistant'或'ai') -->
-                <el-tooltip v-if="item.role !== 'user'" content="重新生成" placement="top">
-                  <el-button text :disabled="isSending" @click="regenerateMessage(item)">
-                    <ElIcon><Refresh /></ElIcon>
-                  </el-button>
-                </el-tooltip>
-                <!-- 用户消息：编辑按钮（仅对有有效ID的消息显示） -->
-                <el-tooltip v-if="item.role === 'user' && hasValidId(item)" content="编辑" placement="top">
-                  <el-button text :disabled="isSending" @click="startEditMessage(item)">
-                    <ElIcon><Edit /></ElIcon>
-                  </el-button>
-                </el-tooltip>
-                <!-- 删除按钮 -->
-                <el-tooltip content="删除" placement="top">
-                  <el-button text @click="enterDeleteMode(item)">
-                    <ElIcon><Delete /></ElIcon>
-                  </el-button>
-                </el-tooltip>
-              </div>
-            </div>
-          </div>
+          <MessageItem
+            :item="item"
+            :is-delete-mode="isDeleteMode"
+            :is-editing="editingMessageKey === item.key"
+            :edit-content="editingContent"
+            :is-sending="isSending"
+            :is-selected="item.id ? selectedMessageIds.includes(item.id) : false"
+            @toggle-selection="toggleMessageSelection"
+            @edit="startEditMessage"
+            @cancel-edit="cancelEdit"
+            @submit-edit="submitEditMessage"
+            @update:edit-content="editingContent = $event"
+            @copy="copy"
+            @regenerate="regenerateMessage"
+            @delete="enterDeleteMode"
+            @image-preview="handleImagePreview"
+          />
         </template>
       </BubbleList>
 
+      <!-- 发送器 -->
       <Sender
-        ref="senderRef" v-model="inputValue" class="chat-defaul-sender" data-tour="chat-sender" :auto-size="{
-          maxRows: 6,
-          minRows: 2,
-        }" variant="updown" clearable allow-speech :loading="isLoading" @submit="startSSE" @cancel="cancelSSE"
+        ref="senderRef"
+        v-model="inputValue"
+        class="chat-with-id__sender"
+        :auto-size="{ maxRows: 6, minRows: 2 }"
+        variant="updown"
+        clearable
+        allow-speech
+        :loading="isLoading"
+        @submit="startSSE"
+        @cancel="cancelSSE"
       >
         <template #header>
-          <div class="sender-header p-12px pt-6px pb-0px">
-            <Attachments :items="filesStore.filesList" :hide-upload="true" @delete-card="handleDeleteCard">
-              <template #prev-button="{ show, onScrollLeft }">
-                <div
-                  v-if="show"
-                  class="prev-next-btn left-8px flex-center w-22px h-22px rounded-8px border-1px border-solid border-[rgba(0,0,0,0.08)] c-[rgba(0,0,0,.4)] hover:bg-#f3f4f6 bg-#fff font-size-10px"
-                  @click="onScrollLeft"
-                >
-                  <ElIcon>
-                    <ArrowLeftBold />
-                  </ElIcon>
-                </div>
-              </template>
-
-              <template #next-button="{ show, onScrollRight }">
-                <div
-                  v-if="show"
-                  class="prev-next-btn right-8px flex-center w-22px h-22px rounded-8px border-1px border-solid border-[rgba(0,0,0,0.08)] c-[rgba(0,0,0,.4)] hover:bg-#f3f4f6 bg-#fff font-size-10px"
-                  @click="onScrollRight"
-                >
-                  <ElIcon>
-                    <ArrowRightBold />
-                  </ElIcon>
-                </div>
-              </template>
-            </Attachments>
+          <div class="chat-with-id__sender-header">
+            <Attachments
+              :items="filesStore.filesList"
+              :hide-upload="true"
+              @delete-card="(_, index) => filesStore.deleteFileByIndex(index)"
+            />
           </div>
         </template>
         <template #prefix>
-          <div class="flex-1 flex items-center gap-8px flex-none w-fit overflow-hidden">
+          <div class="chat-with-id__sender-prefix">
             <FilesSelect />
-            <!--            < ToolList/> -->
             <ModelSelect />
           </div>
         </template>
-        <!-- 新增的 #suffix 模板 -->
         <template #suffix>
-          <ElIcon v-if="isSending" class="is-loading">
+          <ElIcon v-if="isSending" class="chat-with-id__loading">
             <Loading />
           </ElIcon>
         </template>
@@ -1377,599 +595,139 @@ onUnmounted(() => {
 </template>
 
 <style scoped lang="scss">
-.chat-with-id-container {
-  padding: 0 20px;
+.chat-with-id {
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
   width: 100%;
   height: 100%;
+  padding: 0 20px;
 
-  .chat-header {
-    width: 100%;
-    //max-width: 1000px;
-    height: 60px;
-    display: flex;
-    align-items: center;
-    flex-shrink: 0;
+  @media (max-width: 768px) {
+    padding: 0 12px;
   }
 
-  .chat-warp {
-    max-width: 1000px;
+  @media (max-width: 480px) {
+    padding: 0 8px;
+  }
+
+  &__content {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     width: 100%;
-    height: calc(100vh - 120px); // 减去头部高度
-    .thinking-chain-warp {
+    max-width: 1000px;
+    height: calc(100vh - 120px);
+
+    @media (max-width: 768px) {
+      height: calc(100vh - 110px);
+    }
+
+    @media (max-width: 480px) {
+      height: calc(100vh - 100px);
+    }
+  }
+
+  &__sender {
+    width: 100%;
+    margin-bottom: 22px;
+
+    @media (max-width: 768px) {
+      margin-bottom: 16px;
+    }
+
+    @media (max-width: 480px) {
       margin-bottom: 12px;
     }
   }
-  :deep() {
-    .el-bubble-list {
-      padding-top: 24px;
 
-      // 删除模式
-      &.delete-mode {
-
-        .el-bubble {
-          // 删除模式下：用户消息加回 flex:auto，并移除 max-width 限制
-          &[class*="end"] .el-bubble-content-wrapper {
-            flex: auto;
-            max-width: 100%;
-          }
-
-          // 删除模式下的 content 样式 - 全宽背景
-          .el-bubble-content {
-            position: relative;
-            background-color: #f5f7fa;
-            border: 1px solid transparent;
-            border-radius: 8px;
-            padding: 12px 16px;
-            transition: all 0.2s;
-            cursor: pointer;
-            min-height: 44px;
-
-            // 悬浮状态
-            &:hover {
-              background-color: #e8f0fe;
-              border-color: #c6dafc;
-            }
-
-            // 勾选框绝对定位在左上角
-            .delete-checkbox-inline {
-              position: absolute;
-              left: 12px;
-              top: 12px;
-              z-index: 2;
-
-              .el-checkbox {
-                --el-checkbox-input-height: 20px;
-                --el-checkbox-input-width: 20px;
-              }
-            }
-
-            // AI 内容区域左边距
-            .ai-content-wrapper {
-              margin-left: 36px;
-              width: calc(100% - 36px);
-            }
-
-            // 用户消息容器 - 宽度铺满（和 AI 消息一样）
-            .user-content-wrapper {
-              margin-left: 36px;
-              width: calc(100% - 36px);
-              align-items: flex-start;
-
-              // 编辑模式宽度100%
-              .edit-message-wrapper-full {
-                width: 100%;
-                max-width: 100%;
-              }
-            }
-
-            // 删除模式下：覆盖默认的 end 布局，让宽度 100%
-            &[class*="end"] {
-              width: 100%;
-              max-width: 100%;
-
-              .el-bubble-content {
-                width: 100%;
-                max-width: 100%;
-              }
-            }
-          }
-
-          // 选中状态
-          &:has(.el-checkbox.is-checked) .el-bubble-content {
-            background-color: #d2e3fc;
-            border-color: #8ab4f8;
-          }
-        }
-
-      }
-
-    }
-
-    .el-bubble {
-      padding: 0 12px;
-      padding-bottom: 24px;
-
-      // AI消息（非用户消息）：宽度100%，无气泡形状
-      &[class*="start"] {
-        width: 100%;
-        max-width: 100%;
-
-        .el-bubble-content-wrapper {
-          flex: auto;
-        }
-
-        .el-bubble-content {
-          width: 100%;
-          max-width: 100%;
-          background: transparent !important;
-          border: none !important;
-          box-shadow: none !important;
-          padding: 0;
-        }
-      }
-
-      // 用户消息（end布局）：宽度100%
-      &[class*="end"] {
-        width: 100%;
-        max-width: 100%;
-
-        // 正常模式下：去掉 flex:auto
-        .el-bubble-content-wrapper {
-          flex: none;
-          max-width: fit-content;
-        }
-
-        // 编辑模式下：加回 flex:auto
-        &:has(.edit-message-wrapper-full) .el-bubble-content-wrapper {
-          flex: auto;
-          max-width: 100%;
-        }
-
-        .el-bubble-content {
-          width: fit-content;
-          max-width: 100%;
-        }
-
-        // 编辑模式下：加回 flex:auto
-        &:has(.edit-message-wrapper-full) .el-bubble-content {
-          width: 100%;
-          max-width: 100%;
-        }
-      }
-
-      // 隐藏头像
-      .el-avatar {
-        display: none !important;
-      }
-    }
-    .el-typewriter {
-      overflow: hidden;
-      border-radius: 12px;
-    }
-    .user-content-wrapper {
-      display: flex;
-      flex-direction: column;
-      gap: 8px;
-      width: 100%;
-
-      // 编辑模式下：宽度100%，无气泡样式
-      &:has(.edit-message-wrapper-full) {
-        width: 100%;
-        max-width: 100%;
-      }
-    }
-    .user-images {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 8px;
-      margin-bottom: 4px;
-    }
-    .user-image {
-      max-width: 200px;
-      max-height: 200px;
-      border-radius: 8px;
-      object-fit: cover;
-      cursor: pointer;
-      transition: transform 0.2s;
-      &:hover {
-        transform: scale(1.05);
-      }
-    }
-    .user-files {
-      display: flex;
-      flex-direction: column;
-      gap: 6px;
-      margin-bottom: 4px;
-    }
-    .user-file-item {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      padding: 8px 12px;
-      background: rgba(0, 0, 0, 0.05);
-      border-radius: 6px;
-      font-size: 13px;
-      .file-icon {
-        font-size: 16px;
-        color: #409eff;
-      }
-      .file-name {
-        flex: 1;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-      .file-size {
-        color: #909399;
-        font-size: 12px;
-      }
-    }
-    .user-content {
-      white-space: pre-wrap;
-      line-height: 1.6;
-      color: #333;
-    }
-    .markdown-body {
-      background-color: transparent;
-    }
-    .markdown-elxLanguage-header-div {
-      top: -25px !important;
-    }
-
-    // xmarkdown 样式
-    .elx-xmarkdown-container {
-      padding: 8px 4px;
-    }
+  &__sender-header {
+    padding: 12px;
+    padding-bottom: 0;
   }
-  .chat-defaul-sender {
-    width: 100%;
-    margin-bottom: 22px;
-  }
-}
 
-.footer-wrapper {
-  display: flex;
-  align-items: center;
-  margin-top: 4px;
-  padding: 0 2px;
-}
-
-.footer-container {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  gap: 12px;
-
-  .footer-info {
+  &__sender-prefix {
     display: flex;
+    flex: 1;
     align-items: center;
     gap: 8px;
-    font-size: 12px;
-    color: #888;
+    flex: none;
+    width: fit-content;
+    overflow: hidden;
 
-    .footer-time {
-      display: flex;
-      align-items: center;
-      color: #888;
-    }
-
-    .footer-token {
-      display: flex;
-      align-items: center;
-      color: #888;
-
-      &::before {
-        content: '';
-        width: 3px;
-        height: 3px;
-        background: #bbb;
-        border-radius: 50%;
-        margin-right: 8px;
-      }
+    @media (max-width: 768px) {
+      flex-wrap: wrap;
+      gap: 6px;
     }
   }
 
-  .footer-actions {
-    display: flex;
-    align-items: center;
-    gap: 2px;
-
-    .el-button {
-      width: 24px;
-      height: 24px;
-      padding: 0;
-      font-size: 13px;
-      color: #555;
-      border: none;
-      background: transparent;
-      border-radius: 4px;
-      transition: all 0.2s ease;
-
-      &:hover {
-        color: #409eff;
-        background: #f0f7ff;
-      }
-
-      &:active {
-        background: #e6f2ff;
-      }
-
-      &[disabled] {
-        color: #bbb;
-        background: transparent;
-      }
-
-      .el-icon {
-        font-size: 13px;
-      }
-    }
+  &__loading {
+    margin-left: 8px;
+    color: var(--el-color-primary);
+    animation: rotating 2s linear infinite;
   }
 }
 
-// 删除模式：整行点击区域（覆盖整个内容区）
-// 删除模式：用户内容右对齐，宽度铺满（和AI消息一样）
-.delete-mode-user-content {
-  display: flex;
-  justify-content: flex-end;
-  width: 100%;
+// 气泡列表基础样式覆盖
+:deep(.el-bubble-list) {
+  padding-top: 0;
+}
 
-  .user-content-wrapper {
+:deep(.el-bubble) {
+  padding: 0;
+  width: 100% !important;
+  max-width: 100% !important;
+
+  &[class*="start"],
+  &[class*="end"] {
+    width: 100% !important;
+    max-width: 100% !important;
+
+    .el-bubble-content-wrapper {
+      width: 100% !important;
+      max-width: 100% !important;
+      flex: auto !important;
+    }
+  }
+
+  .el-avatar {
+    display: none !important;
+  }
+
+  .el-bubble-content {
+    background: transparent !important;
+    border: none !important;
+    box-shadow: none !important;
+    padding: 0 !important;
+    width: 100% !important;
+    max-width: 100% !important;
+  }
+
+  .el-bubble-content-wrapper {
     width: 100% !important;
     max-width: 100% !important;
   }
 }
 
-// 删除模式：AI 内容宽度100%，点击不穿透
-.delete-mode-ai-content {
-  width: 100%;
+// Typewriter 样式
+:deep(.el-typewriter) {
+  overflow: hidden;
+  border-radius: 12px;
 }
 
-.loading-container {
-  font-size: 14px;
-  color: #333;
-  padding: 12px;
-  background: linear-gradient(to right, #fdfcfb 0%, #ffd1ab 100%);
-  border-radius: 15px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+// Markdown 容器样式
+:deep(.elx-xmarkdown-container) {
+  padding: 8px 4px;
 }
 
-.loading-container span {
-  display: inline-block;
-  margin-left: 8px;
+// 代码块头部样式
+:deep(.markdown-elxLanguage-header-div) {
+  top: -25px !important;
 }
 
-// 删除模式工具栏
-.delete-mode-toolbar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 8px 12px;
-  background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
-  border: 1px solid #fed7aa;
-  border-radius: 6px;
-  margin-bottom: 12px;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-
-  .selected-count {
-    font-size: 13px;
-    color: #ea580c;
-    font-weight: 500;
-    display: flex;
-    align-items: center;
-    gap: 6px;
-
-    &::before {
-      content: '';
-      width: 6px;
-      height: 6px;
-      background: #ea580c;
-      border-radius: 50%;
-      display: inline-block;
-    }
-  }
-
-  .toolbar-actions {
-    display: flex;
-    gap: 6px;
-
-    .el-button {
-      font-size: 12px;
-      padding: 6px 12px;
-      border-radius: 4px;
-      transition: all 0.2s ease;
-
-      &--danger {
-        background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
-        border: none;
-        color: #fff;
-
-        &:hover {
-          background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
-          transform: translateY(-1px);
-          box-shadow: 0 2px 4px rgba(220, 38, 38, 0.2);
-        }
-      }
-
-      &:not(.el-button--danger) {
-        &:hover {
-          background: #fff;
-          border-color: #fed7aa;
-        }
-      }
-    }
-  }
-}
-
-// 正常模式内容
-.normal-mode-content {
-  width: 100%;
-
-  // AI 消息包装器：宽度100%，无气泡形状
-  .ai-content-wrapper {
-    width: 100%;
-    max-width: 100%;
-    padding: 0;
-    background: transparent;
-    border: none;
-    box-shadow: none;
-
-    .markdown-body {
-      width: 100%;
-      max-width: 100%;
-    }
-  }
-}
-
-// 编辑消息样式 - 全宽
-.edit-message-wrapper-full {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  width: 100%;
-  max-width: 100%;
-
-  :deep(.el-textarea__inner) {
-    min-height: 80px !important;
-    font-size: 14px;
-    line-height: 1.6;
-  }
-
-  .edit-actions {
-    display: flex;
-    justify-content: flex-end;
-    gap: 8px;
-  }
-}
-
-/* 移动端响应式优化 */
-@media (max-width: 768px) {
-  .chat-with-id-container {
-    padding: 0 12px;
-
-    .chat-header {
-      height: 50px;
-
-      .left-box {
-        padding-left: 8px;
-        gap: 8px;
-      }
-
-      .middle-box {
-        margin-left: 8px;
-      }
-    }
-
-    .chat-warp {
-      height: calc(100vh - 110px);
-
-      .thinking-chain-warp {
-        margin-bottom: 8px;
-      }
-    }
-
-    /* 气泡列表优化 */
-    :deep(.el-bubble-list) {
-      padding-top: 16px;
-    }
-
-    :deep(.el-bubble) {
-      padding: 0 8px;
-      padding-bottom: 16px;
-    }
-
-    /* 用户图片优化 */
-    :deep(.user-image) {
-      max-width: 150px;
-      max-height: 150px;
-    }
-
-    /* 文件项优化 */
-    :deep(.user-file-item) {
-      padding: 6px 10px;
-      font-size: 12px;
-
-      .file-icon {
-        font-size: 14px;
-      }
-    }
-
-    /* Sender 输入框优化 */
-    .chat-defaul-sender {
-      margin-bottom: 16px;
-    }
-
-    /* Footer 优化 */
-    .footer-wrapper {
-      flex-wrap: wrap;
-      gap: 6px;
-    }
-
-    .footer-time {
-      font-size: 11px;
-
-      .footer-token {
-        padding: 0 3px;
-        font-size: 11px;
-      }
-    }
-  }
-}
-
-/* 超小屏幕优化 */
-@media (max-width: 480px) {
-  .chat-with-id-container {
-    padding: 0 8px;
-
-    .chat-header {
-      height: 48px;
-
-      .left-box {
-        padding-left: 4px;
-        gap: 6px;
-      }
-
-      .middle-box {
-        margin-left: 6px;
-      }
-    }
-
-    .chat-warp {
-      height: calc(100vh - 100px);
-    }
-
-    :deep(.el-bubble-list) {
-      padding-top: 12px;
-    }
-
-    :deep(.el-bubble) {
-      padding: 0 6px;
-      padding-bottom: 12px;
-    }
-
-    :deep(.user-image) {
-      max-width: 120px;
-      max-height: 120px;
-    }
-
-    .chat-defaul-sender {
-      margin-bottom: 12px;
-    }
-
-    .footer-time {
-      font-size: 10px;
-
-      .footer-token {
-        font-size: 10px;
-      }
-    }
-  }
+@keyframes rotating {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
 }
 </style>
diff --git a/Yi.Ai.Vue3/src/pages/chat/styles/bubble.scss b/Yi.Ai.Vue3/src/pages/chat/styles/bubble.scss
new file mode 100644
index 00000000..d78e5482
--- /dev/null
+++ b/Yi.Ai.Vue3/src/pages/chat/styles/bubble.scss
@@ -0,0 +1,169 @@
+// 气泡列表相关样式 (需要 :deep 穿透)
+
+// 基础气泡列表样式
+@mixin bubble-list-base {
+  :deep(.el-bubble-list) {
+    padding-top: 24px;
+
+    @media (max-width: 768px) {
+      padding-top: 16px;
+    }
+  }
+}
+
+// 气泡基础样式
+@mixin bubble-base {
+  :deep(.el-bubble) {
+    padding: 0 12px 24px;
+
+    // 隐藏头像
+    .el-avatar {
+      display: none !important;
+    }
+
+    // 用户消息样式
+    &[class*="end"] {
+      width: 100%;
+      max-width: 100%;
+
+      .el-bubble-content-wrapper {
+        flex: none;
+        max-width: fit-content;
+      }
+
+      .el-bubble-content {
+        width: fit-content;
+        max-width: 100%;
+      }
+    }
+
+    @media (max-width: 768px) {
+      padding: 0 8px 16px;
+    }
+
+    @media (max-width: 480px) {
+      padding: 0 6px;
+      padding-bottom: 12px;
+    }
+  }
+}
+
+// AI消息样式
+@mixin bubble-ai-style {
+  :deep(.el-bubble[class*="start"]) {
+    width: 100%;
+    max-width: 100%;
+
+    .el-bubble-content-wrapper {
+      flex: auto;
+    }
+
+    .el-bubble-content {
+      width: 100%;
+      max-width: 100%;
+      padding: 0;
+      background: transparent !important;
+      border: none !important;
+      box-shadow: none !important;
+    }
+  }
+}
+
+// 用户编辑模式样式
+@mixin bubble-edit-mode {
+  :deep(.el-bubble[class*="end"]) {
+    &:has(.edit-message-wrapper-full) {
+      .el-bubble-content-wrapper {
+        flex: auto;
+        max-width: 100%;
+      }
+
+      .el-bubble-content {
+        width: 100%;
+        max-width: 100%;
+      }
+    }
+  }
+}
+
+// 删除模式气泡样式
+@mixin bubble-delete-mode {
+  :deep(.el-bubble-list.delete-mode) {
+    .el-bubble {
+      &[class*="end"] .el-bubble-content-wrapper {
+        flex: auto;
+        max-width: 100%;
+      }
+
+      .el-bubble-content {
+        position: relative;
+        min-height: 44px;
+        padding: 12px 16px;
+        background-color: #f5f7fa;
+        border: 1px solid transparent;
+        border-radius: 8px;
+        cursor: pointer;
+        transition: all 0.2s;
+
+        &:hover {
+          background-color: #e8f0fe;
+          border-color: #c6dafc;
+        }
+      }
+
+      &:has(.el-checkbox.is-checked) .el-bubble-content {
+        background-color: #d2e3fc;
+        border-color: #8ab4f8;
+      }
+    }
+
+    .delete-checkbox-inline {
+      position: absolute;
+      left: 12px;
+      top: 12px;
+      z-index: 2;
+
+      :deep(.el-checkbox) {
+        --el-checkbox-input-height: 20px;
+        --el-checkbox-input-width: 20px;
+      }
+    }
+
+    .ai-content-wrapper,
+    .user-content-wrapper {
+      margin-left: 36px;
+      width: calc(100% - 36px);
+    }
+
+    .user-content-wrapper {
+      align-items: flex-start;
+
+      .edit-message-wrapper-full {
+        width: 100%;
+        max-width: 100%;
+      }
+    }
+  }
+}
+
+// Typewriter 样式
+@mixin typewriter-style {
+  :deep(.el-typewriter) {
+    overflow: hidden;
+    border-radius: 12px;
+  }
+}
+
+// Markdown 容器样式
+@mixin markdown-container {
+  :deep(.elx-xmarkdown-container) {
+    padding: 8px 4px;
+  }
+}
+
+// 代码块头部样式
+@mixin code-header {
+  :deep(.markdown-elxLanguage-header-div) {
+    top: -25px !important;
+  }
+}
diff --git a/Yi.Ai.Vue3/src/pages/chat/styles/index.scss b/Yi.Ai.Vue3/src/pages/chat/styles/index.scss
new file mode 100644
index 00000000..b8306d20
--- /dev/null
+++ b/Yi.Ai.Vue3/src/pages/chat/styles/index.scss
@@ -0,0 +1,5 @@
+// Chat 页面公共样式统一导入
+
+@forward './variables';
+@forward './mixins';
+@forward './bubble';
diff --git a/Yi.Ai.Vue3/src/pages/chat/styles/mixins.scss b/Yi.Ai.Vue3/src/pages/chat/styles/mixins.scss
new file mode 100644
index 00000000..f80b6586
--- /dev/null
+++ b/Yi.Ai.Vue3/src/pages/chat/styles/mixins.scss
@@ -0,0 +1,102 @@
+// 聊天页面公共 mixins
+
+// 响应式
+@mixin respond-to($breakpoint) {
+  @if $breakpoint == tablet {
+    @media (max-width: 768px) {
+      @content;
+    }
+  } @else if $breakpoint == mobile {
+    @media (max-width: 480px) {
+      @content;
+    }
+  }
+}
+
+// 弹性布局
+@mixin flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+@mixin flex-between {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+@mixin flex-column {
+  display: flex;
+  flex-direction: column;
+}
+
+// 文本省略
+@mixin text-ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+// 多行文本省略
+@mixin text-ellipsis-multi($lines: 2) {
+  display: -webkit-box;
+  -webkit-line-clamp: $lines;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+// 滚动按钮样式
+@mixin scroll-btn {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  @include flex-center;
+  width: 22px;
+  height: 22px;
+  border-radius: 8px;
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  color: rgba(0, 0, 0, 0.4);
+  background-color: #fff;
+  font-size: 10px;
+  cursor: pointer;
+  z-index: 10;
+  transition: all 0.2s ease;
+
+  &:hover {
+    background-color: #f3f4f6;
+    border-color: rgba(0, 0, 0, 0.15);
+    color: rgba(0, 0, 0, 0.6);
+  }
+}
+
+// 操作按钮样式
+@mixin action-btn {
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  font-size: 13px;
+  color: #555;
+  background: transparent;
+  border: none;
+  border-radius: 4px;
+  transition: all 0.2s ease;
+
+  &:hover {
+    color: #409eff;
+    background: #f0f7ff;
+  }
+
+  &:active {
+    background: #e6f2ff;
+  }
+
+  &[disabled] {
+    color: #bbb;
+    background: transparent;
+  }
+
+  .el-icon {
+    font-size: 13px;
+  }
+}
diff --git a/Yi.Ai.Vue3/src/pages/chat/styles/variables.scss b/Yi.Ai.Vue3/src/pages/chat/styles/variables.scss
new file mode 100644
index 00000000..ef70f4ae
--- /dev/null
+++ b/Yi.Ai.Vue3/src/pages/chat/styles/variables.scss
@@ -0,0 +1,56 @@
+// 聊天页面公共样式变量
+
+// 布局
+$chat-header-height: 60px;
+$chat-header-height-mobile: 50px;
+$chat-header-height-small: 48px;
+
+$chat-max-width: 1000px;
+$chat-padding: 20px;
+$chat-padding-mobile: 12px;
+$chat-padding-small: 8px;
+
+// 气泡列表
+$bubble-padding-y: 24px;
+$bubble-padding-x: 12px;
+$bubble-gap: 24px;
+
+$bubble-padding-y-mobile: 16px;
+$bubble-padding-x-mobile: 8px;
+$bubble-gap-mobile: 16px;
+
+// 用户消息
+$user-image-max-size: 200px;
+$user-image-max-size-mobile: 150px;
+$user-image-max-size-small: 120px;
+
+// 颜色
+$color-text-primary: #333;
+$color-text-secondary: #888;
+$color-text-tertiary: #bbb;
+
+$color-border: rgba(0, 0, 0, 0.08);
+$color-border-hover: rgba(0, 0, 0, 0.15);
+
+$color-bg-hover: #f3f4f6;
+$color-bg-light: #f5f7fa;
+$color-bg-lighter: #e8f0fe;
+$color-bg-selected: #d2e3fc;
+$color-border-selected: #8ab4f8;
+
+$color-primary: #409eff;
+$color-primary-light: #f0f7ff;
+$color-primary-lighter: #e6f2ff;
+
+// 删除模式
+$color-delete-bg: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
+$color-delete-border: #fed7aa;
+$color-delete-text: #ea580c;
+
+// 动画
+$transition-fast: 0.2s ease;
+$transition-normal: 0.3s ease;
+
+// 响应式断点
+$breakpoint-tablet: 768px;
+$breakpoint-mobile: 480px;
diff --git a/Yi.Ai.Vue3/src/stores/index.ts b/Yi.Ai.Vue3/src/stores/index.ts
index cc1a71eb..a7041c70 100644
--- a/Yi.Ai.Vue3/src/stores/index.ts
+++ b/Yi.Ai.Vue3/src/stores/index.ts
@@ -8,7 +8,7 @@ store.use(piniaPluginPersistedstate);
 export default store;
 
 export * from './modules/announcement'
-// export * from './modules/chat';
+export * from './modules/chat';
 export * from './modules/design';
 export * from './modules/user';
 export * from './modules/guideTour';