feat: 消息ui优化

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';

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,
+  };
+}

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,
+  };
+}

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,
+  };
+}

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,
+  };
+}

Yi.Ai.Vue3/src/composables/index.ts

@@ -0,0 +1,2 @@
+// Composables 统一导出
+export * from './chat';

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>

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>

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>

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>

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';

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>

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;
+  }
+}

Yi.Ai.Vue3/src/pages/chat/styles/index.scss

@@ -0,0 +1,5 @@
+// Chat 页面公共样式统一导入
+
+@forward './variables';
+@forward './mixins';
+@forward './bubble';

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;
+  }
+}

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;

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';