Merge remote-tracking branch 'origin/ai-hub' into ai-hub

- 统一 Serilog 文件与控制台日志的输出模板，提升可读性
- 降低部分 ASP.NET Core 内部组件的日志级别，减少无关噪音
- 移除前端 types 中未使用的 ElSegmented 组件声明

Yi.Abp.Net8/module/ai-hub/Yi.Framework.AiHub.Application.Contracts/Dtos/Announcement/AnnouncementCreateInput.cs

@@ -0,0 +1,59 @@
+using System.ComponentModel.DataAnnotations;
+using Yi.Framework.AiHub.Domain.Shared.Enums;
+
+namespace Yi.Framework.AiHub.Application.Contracts.Dtos.Announcement;
+
+/// <summary>
+/// 创建公告输入
+/// </summary>
+public class AnnouncementCreateInput
+{
+    /// <summary>
+    /// 标题
+    /// </summary>
+    [Required(ErrorMessage = "标题不能为空")]
+    [StringLength(200, ErrorMessage = "标题不能超过200个字符")]
+    public string Title { get; set; }
+
+    /// <summary>
+    /// 内容列表
+    /// </summary>
+    [Required(ErrorMessage = "内容不能为空")]
+    [MinLength(1, ErrorMessage = "至少需要一条内容")]
+    public List<string> Content { get; set; } = new List<string>();
+
+    /// <summary>
+    /// 备注
+    /// </summary>
+    [StringLength(500, ErrorMessage = "备注不能超过500个字符")]
+    public string? Remark { get; set; }
+
+    /// <summary>
+    /// 图片url
+    /// </summary>
+    [StringLength(500, ErrorMessage = "图片URL不能超过500个字符")]
+    public string? ImageUrl { get; set; }
+
+    /// <summary>
+    /// 开始时间
+    /// </summary>
+    [Required(ErrorMessage = "开始时间不能为空")]
+    public DateTime StartTime { get; set; }
+
+    /// <summary>
+    /// 活动结束时间
+    /// </summary>
+    public DateTime? EndTime { get; set; }
+
+    /// <summary>
+    /// 公告类型
+    /// </summary>
+    [Required(ErrorMessage = "公告类型不能为空")]
+    public AnnouncementTypeEnum Type { get; set; }
+
+    /// <summary>
+    /// 跳转链接
+    /// </summary>
+    [StringLength(500, ErrorMessage = "跳转链接不能超过500个字符")]
+    public string? Url { get; set; }
+}

Yi.Abp.Net8/module/ai-hub/Yi.Framework.AiHub.Application.Contracts/Dtos/Announcement/AnnouncementDto.cs

@@ -0,0 +1,59 @@
+using Yi.Framework.AiHub.Domain.Shared.Enums;
+
+namespace Yi.Framework.AiHub.Application.Contracts.Dtos.Announcement;
+
+/// <summary>
+/// 公告 DTO（后台管理使用）
+/// </summary>
+public class AnnouncementDto
+{
+    /// <summary>
+    /// 公告ID
+    /// </summary>
+    public Guid Id { get; set; }
+
+    /// <summary>
+    /// 标题
+    /// </summary>
+    public string Title { get; set; } = string.Empty;
+
+    /// <summary>
+    /// 内容列表
+    /// </summary>
+    public List<string> Content { get; set; } = new List<string>();
+
+    /// <summary>
+    /// 备注
+    /// </summary>
+    public string? Remark { get; set; }
+
+    /// <summary>
+    /// 图片url
+    /// </summary>
+    public string? ImageUrl { get; set; }
+
+    /// <summary>
+    /// 开始时间
+    /// </summary>
+    public DateTime StartTime { get; set; }
+
+    /// <summary>
+    /// 活动结束时间
+    /// </summary>
+    public DateTime? EndTime { get; set; }
+
+    /// <summary>
+    /// 公告类型
+    /// </summary>
+    public AnnouncementTypeEnum Type { get; set; }
+
+    /// <summary>
+    /// 跳转链接
+    /// </summary>
+    public string? Url { get; set; }
+
+    /// <summary>
+    /// 创建时间
+    /// </summary>
+    public DateTime CreationTime { get; set; }
+}

Yi.Abp.Net8/module/ai-hub/Yi.Framework.AiHub.Application.Contracts/Dtos/Announcement/AnnouncementGetListInput.cs

@@ -0,0 +1,29 @@
+using Yi.Framework.AiHub.Domain.Shared.Enums;
+
+namespace Yi.Framework.AiHub.Application.Contracts.Dtos.Announcement;
+
+/// <summary>
+/// 获取公告列表输入
+/// </summary>
+public class AnnouncementGetListInput
+{
+    /// <summary>
+    /// 搜索关键字
+    /// </summary>
+    public string? SearchKey { get; set; }
+
+    /// <summary>
+    /// 跳过数量
+    /// </summary>
+    public int SkipCount { get; set; } = 0;
+
+    /// <summary>
+    /// 最大结果数量
+    /// </summary>
+    public int MaxResultCount { get; set; } = 10;
+
+    /// <summary>
+    /// 公告类型
+    /// </summary>
+    public AnnouncementTypeEnum? Type { get; set; }
+}

Yi.Abp.Net8/module/ai-hub/Yi.Framework.AiHub.Application.Contracts/Dtos/Announcement/AnnouncementUpdateInput.cs

@@ -0,0 +1,65 @@
+using System.ComponentModel.DataAnnotations;
+using Yi.Framework.AiHub.Domain.Shared.Enums;
+
+namespace Yi.Framework.AiHub.Application.Contracts.Dtos.Announcement;
+
+/// <summary>
+/// 更新公告输入
+/// </summary>
+public class AnnouncementUpdateInput
+{
+    /// <summary>
+    /// 公告ID
+    /// </summary>
+    [Required(ErrorMessage = "公告ID不能为空")]
+    public Guid Id { get; set; }
+
+    /// <summary>
+    /// 标题
+    /// </summary>
+    [Required(ErrorMessage = "标题不能为空")]
+    [StringLength(200, ErrorMessage = "标题不能超过200个字符")]
+    public string Title { get; set; }
+
+    /// <summary>
+    /// 内容列表
+    /// </summary>
+    [Required(ErrorMessage = "内容不能为空")]
+    [MinLength(1, ErrorMessage = "至少需要一条内容")]
+    public List<string> Content { get; set; } = new List<string>();
+
+    /// <summary>
+    /// 备注
+    /// </summary>
+    [StringLength(500, ErrorMessage = "备注不能超过500个字符")]
+    public string? Remark { get; set; }
+
+    /// <summary>
+    /// 图片url
+    /// </summary>
+    [StringLength(500, ErrorMessage = "图片URL不能超过500个字符")]
+    public string? ImageUrl { get; set; }
+
+    /// <summary>
+    /// 开始时间
+    /// </summary>
+    [Required(ErrorMessage = "开始时间不能为空")]
+    public DateTime StartTime { get; set; }
+
+    /// <summary>
+    /// 活动结束时间
+    /// </summary>
+    public DateTime? EndTime { get; set; }
+
+    /// <summary>
+    /// 公告类型
+    /// </summary>
+    [Required(ErrorMessage = "公告类型不能为空")]
+    public AnnouncementTypeEnum Type { get; set; }
+
+    /// <summary>
+    /// 跳转链接
+    /// </summary>
+    [StringLength(500, ErrorMessage = "跳转链接不能超过500个字符")]
+    public string? Url { get; set; }
+}

Yi.Abp.Net8/module/ai-hub/Yi.Framework.AiHub.Application.Contracts/Dtos/Chat/MessageCreatedOutput.cs

@@ -0,0 +1,47 @@
+using System.Reflection;
+using System.Text.Json.Serialization;
+
+namespace Yi.Framework.AiHub.Application.Contracts.Dtos.Chat;
+
+/// <summary>
+/// 消息创建结果输出
+/// </summary>
+public class MessageCreatedOutput
+{
+    /// <summary>
+    /// 消息类型
+    /// </summary>
+    [JsonIgnore]
+    public ChatMessageTypeEnum TypeEnum { get; set; }
+
+    /// <summary>
+    /// 消息类型
+    /// </summary>
+    public string Type => TypeEnum.ToString();
+
+    /// <summary>
+    /// 消息ID
+    /// </summary>
+    public Guid MessageId { get; set; }
+
+    /// <summary>
+    /// 消息创建时间
+    /// </summary>
+    public DateTime CreationTime { get; set; }
+}
+
+/// <summary>
+/// 消息类型枚举
+/// </summary>
+public enum ChatMessageTypeEnum
+{
+    /// <summary>
+    /// 用户消息
+    /// </summary>
+    UserMessage,
+
+    /// <summary>
+    /// 系统消息
+    /// </summary>
+    SystemMessage
+}

Yi.Abp.Net8/module/ai-hub/Yi.Framework.AiHub.Application.Contracts/Dtos/MessageGetListInput.cs

@@ -7,4 +7,18 @@ public class MessageGetListInput:PagedAllResultRequestDto
 {
     [Required]
     public Guid SessionId { get; set; }
+}
+
+public class MessageDeleteInput
+{
+    /// <summary>
+    /// 要删除的消息Id列表
+    /// </summary>
+    [Required]
+    public List<Guid> Ids { get; set; } = new();
+
+    /// <summary>
+    /// 是否同时隐藏后续消息（同一会话中时间大于当前消息的所有消息）
+    /// </summary>
+    public bool IsDeleteSubsequent { get; set; } = false;
 }

Yi.Abp.Net8/module/ai-hub/Yi.Framework.AiHub.Application.Contracts/Dtos/RankingGetListInput.cs

@@ -0,0 +1,14 @@
+using Yi.Framework.AiHub.Domain.Shared.Enums;
+
+namespace Yi.Framework.AiHub.Application.Contracts.Dtos;
+
+/// <summary>
+/// 排行榜查询输入
+/// </summary>
+public class RankingGetListInput
+{
+    /// <summary>
+    /// 排行榜类型：0-模型，1-工具，不传返回全部
+    /// </summary>
+    public RankingTypeEnum? Type { get; set; }
+}

Yi.Abp.Net8/module/ai-hub/Yi.Framework.AiHub.Application.Contracts/Dtos/RankingItemDto.cs

@@ -0,0 +1,41 @@
+using Yi.Framework.AiHub.Domain.Shared.Enums;
+
+namespace Yi.Framework.AiHub.Application.Contracts.Dtos;
+
+/// <summary>
+/// 排行榜项DTO
+/// </summary>
+public class RankingItemDto
+{
+    public Guid Id { get; set; }
+
+    /// <summary>
+    /// 名称
+    /// </summary>
+    public string Name { get; set; } = null!;
+
+    /// <summary>
+    /// 描述
+    /// </summary>
+    public string Description { get; set; } = null!;
+
+    /// <summary>
+    /// Logo地址
+    /// </summary>
+    public string? LogoUrl { get; set; }
+
+    /// <summary>
+    /// 得分
+    /// </summary>
+    public decimal Score { get; set; }
+
+    /// <summary>
+    /// 提供者
+    /// </summary>
+    public string Provider { get; set; } = null!;
+
+    /// <summary>
+    /// 排行榜类型
+    /// </summary>
+    public RankingTypeEnum Type { get; set; }
+}

Yi.Abp.Net8/module/ai-hub/Yi.Framework.AiHub.Application.Contracts/IServices/IAnnouncementService.cs

@@ -1,3 +1,4 @@
+using Volo.Abp.Application.Dtos;
 using Yi.Framework.AiHub.Application.Contracts.Dtos.Announcement;
 
 namespace Yi.Framework.AiHub.Application.Contracts.IServices;
@@ -8,8 +9,42 @@ namespace Yi.Framework.AiHub.Application.Contracts.IServices;
 public interface IAnnouncementService
 {
     /// <summary>
-    /// 获取公告信息
+    /// 获取公告信息（前端首页使用）
     /// </summary>
     /// <returns>公告信息</returns>
     Task<List<AnnouncementLogDto>> GetAsync();
+
+    /// <summary>
+    /// 获取公告列表（后台管理使用）
+    /// </summary>
+    /// <param name="input">查询参数</param>
+    /// <returns>分页公告列表</returns>
+    Task<PagedResultDto<AnnouncementDto>> GetListAsync(AnnouncementGetListInput input);
+
+    /// <summary>
+    /// 根据ID获取公告
+    /// </summary>
+    /// <param name="id">公告ID</param>
+    /// <returns>公告详情</returns>
+    Task<AnnouncementDto> GetByIdAsync(Guid id);
+
+    /// <summary>
+    /// 创建公告
+    /// </summary>
+    /// <param name="input">创建输入</param>
+    /// <returns>创建的公告</returns>
+    Task<AnnouncementDto> CreateAsync(AnnouncementCreateInput input);
+
+    /// <summary>
+    /// 更新公告
+    /// </summary>
+    /// <param name="input">更新输入</param>
+    /// <returns>更新后的公告</returns>
+    Task<AnnouncementDto> UpdateAsync(AnnouncementUpdateInput input);
+
+    /// <summary>
+    /// 删除公告
+    /// </summary>
+    /// <param name="id">公告ID</param>
+    Task DeleteAsync(Guid id);
 }

Yi.Abp.Net8/module/ai-hub/Yi.Framework.AiHub.Application.Contracts/IServices/IRankingService.cs

@@ -0,0 +1,16 @@
+using Yi.Framework.AiHub.Application.Contracts.Dtos;
+
+namespace Yi.Framework.AiHub.Application.Contracts.IServices;
+
+/// <summary>
+/// 排行榜服务接口
+/// </summary>
+public interface IRankingService
+{
+    /// <summary>
+    /// 获取排行榜列表（全量返回）
+    /// </summary>
+    /// <param name="input">查询条件</param>
+    /// <returns>排行榜列表</returns>
+    Task<List<RankingItemDto>> GetListAsync(RankingGetListInput input);
+}

Yi.Abp.Net8/module/ai-hub/Yi.Framework.AiHub.Application/Services/AiAccountService.cs

@@ -13,6 +13,7 @@ using Yi.Framework.Rbac.Application.Contracts.IServices;
 using Yi.Framework.Rbac.Domain.Shared.Dtos;
 using Yi.Framework.SqlSugarCore.Abstractions;
 using Yi.Framework.AiHub.Domain.Extensions;
+using Yi.Framework.AiHub.Domain.Shared.Enums;
 
 namespace Yi.Framework.AiHub.Application.Services;
 
@@ -58,7 +59,7 @@ public class AiAccountService : ApplicationService
         if (output.IsVip)
         {
             var recharges = await _rechargeRepository._DbQueryable
-                .Where(x => x.UserId == userId)
+                .Where(x => x.UserId == userId && x.RechargeType == RechargeTypeEnum.Vip)
                 .ToListAsync();
 
             if (recharges.Any())

Yi.Abp.Net8/module/ai-hub/Yi.Framework.AiHub.Application/Services/AnnouncementService.cs

@@ -1,6 +1,10 @@
 using Mapster;
+using Microsoft.AspNetCore.Authorization;
+using Microsoft.AspNetCore.Mvc;
 using Microsoft.Extensions.Caching.Distributed;
 using Microsoft.Extensions.Configuration;
+using SqlSugar;
+using Volo.Abp.Application.Dtos;
 using Volo.Abp.Application.Services;
 using Volo.Abp.Caching;
 using Yi.Framework.AiHub.Application.Contracts.Dtos.Announcement;
@@ -31,8 +35,9 @@ public class AnnouncementService : ApplicationService, IAnnouncementService
     }
 
     /// <summary>
-    /// 获取公告信息
+    /// 获取公告信息（前端首页使用，允许匿名访问）
     /// </summary>
+    [AllowAnonymous]
     public async Task<List<AnnouncementLogDto>> GetAsync()
     {
         // 使用 GetOrAddAsync 从缓存获取或添加数据，缓存1小时
@@ -48,18 +53,124 @@ public class AnnouncementService : ApplicationService, IAnnouncementService
         return cacheData?.Logs ?? new List<AnnouncementLogDto>();
     }
 
+    /// <summary>
+    /// 获取公告列表（后台管理使用）
+    /// </summary>
+    [Authorize(Roles = "admin")]
+    [HttpGet("announcement/list")]
+    public async Task<PagedResultDto<AnnouncementDto>> GetListAsync(AnnouncementGetListInput input)
+    {
+        var query = _announcementRepository._DbQueryable
+            .WhereIF(!string.IsNullOrWhiteSpace(input.SearchKey),
+                x => x.Title.Contains(input.SearchKey!) || (x.Remark != null && x.Remark.Contains(input.SearchKey!)))
+            .WhereIF(input.Type.HasValue, x => x.Type == input.Type!.Value)
+            .OrderByDescending(x => x.StartTime);
+
+        var totalCount = await query.CountAsync();
+        var items = await query
+            .Skip(input.SkipCount)
+            .Take(input.MaxResultCount)
+            .ToListAsync();
+
+        return new PagedResultDto<AnnouncementDto>(
+            totalCount,
+            items.Adapt<List<AnnouncementDto>>()
+        );
+    }
+
+    /// <summary>
+    /// 根据ID获取公告
+    /// </summary>
+    [Authorize(Roles = "admin")]
+    [HttpGet("{id}")]
+    public async Task<AnnouncementDto> GetByIdAsync(Guid id)
+    {
+        var entity = await _announcementRepository.GetByIdAsync(id);
+        if (entity == null)
+        {
+            throw new Exception("公告不存在");
+        }
+        return entity.Adapt<AnnouncementDto>();
+    }
+
+    /// <summary>
+    /// 创建公告
+    /// </summary>
+    [Authorize(Roles = "admin")]
+    [HttpPost]
+    public async Task<AnnouncementDto> CreateAsync(AnnouncementCreateInput input)
+    {
+        var entity = input.Adapt<AnnouncementAggregateRoot>();
+        await _announcementRepository.InsertAsync(entity);
+
+        // 清除缓存
+        await _announcementCache.RemoveAsync(AnnouncementCacheKey);
+
+        return entity.Adapt<AnnouncementDto>();
+    }
+
+    /// <summary>
+    /// 更新公告
+    /// </summary>
+    [Authorize(Roles = "admin")]
+    [HttpPut]
+    public async Task<AnnouncementDto> UpdateAsync(AnnouncementUpdateInput input)
+    {
+        var entity = await _announcementRepository.GetByIdAsync(input.Id);
+        if (entity == null)
+        {
+            throw new Exception("公告不存在");
+        }
+
+        // 更新字段
+        entity.Title = input.Title;
+        entity.Content = input.Content;
+        entity.Remark = input.Remark;
+        entity.ImageUrl = input.ImageUrl;
+        entity.StartTime = input.StartTime;
+        entity.EndTime = input.EndTime;
+        entity.Type = input.Type;
+        entity.Url = input.Url;
+
+        await _announcementRepository.UpdateAsync(entity);
+
+        // 清除缓存
+        await _announcementCache.RemoveAsync(AnnouncementCacheKey);
+
+        return entity.Adapt<AnnouncementDto>();
+    }
+
+    /// <summary>
+    /// 删除公告
+    /// </summary>
+    [Authorize(Roles = "admin")]
+    [HttpDelete("announcement/{id}")]
+    public async Task DeleteAsync(Guid id)
+    {
+        var entity = await _announcementRepository.GetByIdAsync(id);
+        if (entity == null)
+        {
+            throw new Exception("公告不存在");
+        }
+
+        await _announcementRepository.DeleteAsync(entity);
+
+        // 清除缓存
+        await _announcementCache.RemoveAsync(AnnouncementCacheKey);
+    }
+
     /// <summary>
     /// 从数据库加载公告数据
     /// </summary>
     private async Task<AnnouncementCacheDto> LoadAnnouncementDataAsync()
     {
-        // 1️⃣ 一次性查出全部公告（不排序）
+        // 一次性查出全部公告（不排序）
         var logs = await _announcementRepository._DbQueryable
             .ToListAsync();
 
         var now = DateTime.Now;
 
-        // 2️⃣ 内存中处理排序
+        // 内存中处理排序
         var orderedLogs = logs
             .OrderByDescending(x =>
                 x.StartTime <= now &&

Yi.Abp.Net8/module/ai-hub/Yi.Framework.AiHub.Application/Services/Chat/AiChatService.cs

@@ -127,54 +127,55 @@ public class AiChatService : ApplicationService
     }
 
 
-    /// <summary>
-    /// 发送消息
-    /// </summary>
-    /// <param name="input"></param>
-    /// <param name="sessionId"></param>
-    /// <param name="cancellationToken"></param>
-    [HttpPost("ai-chat/send")]
-    public async Task PostSendAsync([FromBody] ThorChatCompletionsRequest input, [FromQuery] Guid? sessionId,
-        CancellationToken cancellationToken)
-    {
-        //除了免费模型，其他的模型都要校验
-        if (input.Model!=FreeModelId)
-        {
-            //有token，需要黑名单校验
-            if (CurrentUser.IsAuthenticated)
-            {
-                await _aiBlacklistManager.VerifiyAiBlacklist(CurrentUser.GetId());
-                if (!CurrentUser.IsAiVip())
-                {
-                    throw new UserFriendlyException("该模型需要VIP用户才能使用，请购买VIP后重新登录重试");
-                }
-            }
-            else
-            {
-                throw new UserFriendlyException("未登录用户，只能使用未加速的DeepSeek-R1，请登录后重试");
-            }
-        }
-
-        //如果是尊享包服务，需要校验是是否尊享包足够
-        if (CurrentUser.IsAuthenticated)
-        {
-            var isPremium = await _modelManager.IsPremiumModelAsync(input.Model);
-
-            if (isPremium)
-            {
-                // 检查尊享token包用量
-                var availableTokens = await _premiumPackageManager.GetAvailableTokensAsync(CurrentUser.GetId());
-                if (availableTokens <= 0)
-                {
-                    throw new UserFriendlyException("尊享token包用量不足，请先购买尊享token包");
-                }
-            }
-        }
-
-        //ai网关代理httpcontext
-        await _aiGateWayManager.CompleteChatStreamForStatisticsAsync(_httpContextAccessor.HttpContext, input,
-            CurrentUser.Id, sessionId, null, CancellationToken.None);
-    }
+    // /// <summary>
+    // /// 发送消息
+    // /// </summary>
+    // /// <param name="input"></param>
+    // /// <param name="sessionId"></param>
+    // /// <param name="cancellationToken"></param>
+    // [HttpPost("ai-chat/send")]
+    // [Obsolete]
+    // public async Task PostSendAsync([FromBody] ThorChatCompletionsRequest input, [FromQuery] Guid? sessionId,
+    //     CancellationToken cancellationToken)
+    // {
+    //     //除了免费模型，其他的模型都要校验
+    //     if (input.Model!=FreeModelId)
+    //     {
+    //         //有token，需要黑名单校验
+    //         if (CurrentUser.IsAuthenticated)
+    //         {
+    //             await _aiBlacklistManager.VerifiyAiBlacklist(CurrentUser.GetId());
+    //             if (!CurrentUser.IsAiVip())
+    //             {
+    //                 throw new UserFriendlyException("该模型需要VIP用户才能使用，请购买VIP后重新登录重试");
+    //             }
+    //         }
+    //         else
+    //         {
+    //             throw new UserFriendlyException("未登录用户，只能使用未加速的DeepSeek-R1，请登录后重试");
+    //         }
+    //     }
+    //
+    //     //如果是尊享包服务，需要校验是是否尊享包足够
+    //     if (CurrentUser.IsAuthenticated)
+    //     {
+    //         var isPremium = await _modelManager.IsPremiumModelAsync(input.Model);
+    //
+    //         if (isPremium)
+    //         {
+    //             // 检查尊享token包用量
+    //             var availableTokens = await _premiumPackageManager.GetAvailableTokensAsync(CurrentUser.GetId());
+    //             if (availableTokens <= 0)
+    //             {
+    //                 throw new UserFriendlyException("尊享token包用量不足，请先购买尊享token包");
+    //             }
+    //         }
+    //     }
+    //
+    //     //ai网关代理httpcontext
+    //     await _aiGateWayManager.CompleteChatStreamForStatisticsAsync(_httpContextAccessor.HttpContext, input,
+    //         CurrentUser.Id, sessionId, null, CancellationToken.None);
+    // }
 
     /// <summary>
     /// 发送消息

Yi.Abp.Net8/module/ai-hub/Yi.Framework.AiHub.Application/Services/Chat/MessageService.cs

@@ -35,8 +35,59 @@ public class MessageService : ApplicationService
         var entities = await _repository._DbQueryable
             .Where(x => x.SessionId == input.SessionId)
             .Where(x=>x.UserId == userId)
+            .Where(x => !x.IsHidden)
             .OrderBy(x => x.Id)
             .ToPageListAsync(input.SkipCount, input.MaxResultCount, total);
         return new PagedResultDto<MessageDto>(total, entities.Adapt<List<MessageDto>>());
     }
+
+    /// <summary>
+    /// 删除消息（软删除，标记为隐藏）
+    /// </summary>
+    /// <param name="input">删除参数，包含消息Id列表和是否删除后续消息的开关</param>
+    [Authorize]
+    public async Task DeleteAsync([FromQuery] MessageDeleteInput input)
+    {
+        var userId = CurrentUser.GetId();
+
+        // 获取要删除的消息
+        var messages = await _repository._DbQueryable
+            .Where(x => input.Ids.Contains(x.Id))
+            .Where(x => x.UserId == userId)
+            .ToListAsync();
+
+        if (messages.Count == 0)
+        {
+            return;
+        }
+
+        // 标记当前消息为隐藏
+        var idsToHide = messages.Select(x => x.Id).ToList();
+
+        // 如果需要删除后续消息
+        if (input.IsDeleteSubsequent)
+        {
+            foreach (var message in messages)
+            {
+                // 获取同一会话中时间大于当前消息的所有消息Id
+                var subsequentIds = await _repository._DbQueryable
+                    .Where(x => x.SessionId == message.SessionId)
+                    .Where(x => x.UserId == userId)
+                    .Where(x => x.CreationTime > message.CreationTime)
+                    .Where(x => !x.IsHidden)
+                    .Select(x => x.Id)
+                    .ToListAsync();
+
+                idsToHide.AddRange(subsequentIds);
+            }
+
+            idsToHide = idsToHide.Distinct().ToList();
+        }
+
+        // 批量更新为隐藏状态
+        await _repository._Db.Updateable<MessageAggregateRoot>()
+            .SetColumns(x => x.IsHidden == true)
+            .Where(x => idsToHide.Contains(x.Id))
+            .ExecuteCommandAsync();
+    }
 }

Yi.Abp.Net8/module/ai-hub/Yi.Framework.AiHub.Application/Services/RankingService.cs

@@ -0,0 +1,38 @@
+using Mapster;
+using Microsoft.AspNetCore.Authorization;
+using Microsoft.AspNetCore.Mvc;
+using Volo.Abp.Application.Services;
+using Yi.Framework.AiHub.Application.Contracts.Dtos;
+using Yi.Framework.AiHub.Application.Contracts.IServices;
+using Yi.Framework.AiHub.Domain.Entities;
+using Yi.Framework.SqlSugarCore.Abstractions;
+
+namespace Yi.Framework.AiHub.Application.Services;
+
+/// <summary>
+/// 排行榜服务
+/// </summary>
+public class RankingService : ApplicationService, IRankingService
+{
+    private readonly ISqlSugarRepository<RankingItemAggregateRoot, Guid> _repository;
+
+    public RankingService(ISqlSugarRepository<RankingItemAggregateRoot, Guid> repository)
+    {
+        _repository = repository;
+    }
+
+    /// <summary>
+    /// 获取排行榜列表（全量返回，按得分降序）
+    /// </summary>
+    [HttpGet("ranking/list")]
+    [AllowAnonymous]
+    public async Task<List<RankingItemDto>> GetListAsync([FromQuery] RankingGetListInput input)
+    {
+        var query = _repository._DbQueryable
+            .WhereIF(input.Type.HasValue, x => x.Type == input.Type!.Value)
+            .OrderByDescending(x => x.Score);
+
+        var entities = await query.ToListAsync();
+        return entities.Adapt<List<RankingItemDto>>();
+    }
+}

Yi.Abp.Net8/module/ai-hub/Yi.Framework.AiHub.Domain.Shared/Dtos/Anthropic/AnthropicInput.cs

@@ -133,28 +133,5 @@ public class AnthropicMessageTool
 
     [JsonPropertyName("description")] public string? Description { get; set; }
 
-    [JsonPropertyName("input_schema")] public Input_schema? InputSchema { get; set; }
+    [JsonPropertyName("input_schema")] public object? InputSchema { get; set; }
 }
-
-public class Input_schema
-{
-    [JsonPropertyName("type")] public string? Type { get; set; }
-
-    [JsonPropertyName("properties")] public Dictionary<string, InputSchemaValue>? Properties { get; set; }
-
-    [JsonPropertyName("required")] public string[]? Required { get; set; }
-}
-
-public class InputSchemaValue
-{
-    public string? type { get; set; }
-
-    public string? description { get; set; }
-
-    public InputSchemaValueItems? items { get; set; }
-}
-
-public class InputSchemaValueItems
-{
-    public string? type { get; set; }
-}

Yi.Abp.Net8/module/ai-hub/Yi.Framework.AiHub.Domain.Shared/Enums/GoodsTypeEnum.cs

@@ -99,8 +99,8 @@ public enum GoodsTypeEnum
     [Price(83.7, 3, 27.9)] [DisplayName("YiXinVip 3 month", "3个月", "短期体验")] [GoodsCategory(GoodsCategoryType.Vip)]
     YiXinVip3 = 3,
 
-    [Price(114.5, 5, 22.9)] [DisplayName("YiXinVip 5 month", "5个月", "年度热销")] [GoodsCategory(GoodsCategoryType.Vip)]
-    YiXinVip5 = 15,
+    [Price(91.6, 4, 22.9)] [DisplayName("YiXinVip 4 month", "4个月", "年度热销")] [GoodsCategory(GoodsCategoryType.Vip)]
+    YiXinVip5 = 14,
 
     // 尊享包服务 - 需要VIP资格才能购买
     [Price(188.9, 0, 1750)]

Yi.Abp.Net8/module/ai-hub/Yi.Framework.AiHub.Domain.Shared/Enums/RankingTypeEnum.cs

@@ -0,0 +1,17 @@
+namespace Yi.Framework.AiHub.Domain.Shared.Enums;
+
+/// <summary>
+/// 排行榜类型枚举
+/// </summary>
+public enum RankingTypeEnum
+{
+    /// <summary>
+    /// 模型
+    /// </summary>
+    Model = 0,
+
+    /// <summary>
+    /// 工具
+    /// </summary>
+    Tool = 1
+}

Yi.Abp.Net8/module/ai-hub/Yi.Framework.AiHub.Domain/AiGateWay/Impl/ThorClaude/Chats/AnthropicChatCompletionsService.cs

@@ -77,9 +77,9 @@ public class AnthropicChatCompletionsService(
             var error = await response.Content.ReadAsStringAsync(cancellationToken).ConfigureAwait(false);
 
             var message = $"恭喜你运气爆棚遇到了错误，尊享包对话异常：StatusCode【{response.StatusCode.GetHashCode()}】，ErrorId【{errorId}】";
-            if (error.Contains("prompt is too long"))
+            if (error.Contains("prompt is too long") || error.Contains("提示词太长")||error.Contains("input tokens exceeds the model's maximum context length"))
             {
-                message += $", Response: {error}";
+                message += $", tip: 当前提示词过长，上下文已达到上限，如在 claudecode中使用，建议执行/compact压缩当前会话，或开启新会话后重试";
             }
 
             logger.LogError(
@@ -115,9 +115,6 @@ public class AnthropicChatCompletionsService(
             { "anthropic-version", "2023-06-01" }
         };
 
-        var isThinking = input.Model.EndsWith("thinking");
-        input.Model = input.Model.Replace("-thinking", string.Empty);
-
         var response = await client.HttpRequestRaw(options.Endpoint.TrimEnd('/') + "/v1/messages", input, string.Empty,
             headers);
 
@@ -129,11 +126,17 @@ public class AnthropicChatCompletionsService(
         {
             Guid errorId = Guid.NewGuid();
             var error = await response.Content.ReadAsStringAsync(cancellationToken).ConfigureAwait(false);
+
+            var message = $"恭喜你运气爆棚遇到了错误，尊享包对话异常：StatusCode【{response.StatusCode.GetHashCode()}】，ErrorId【{errorId}】";
+            if (error.Contains("prompt is too long") || error.Contains("提示词太长")||error.Contains("input tokens exceeds the model's maximum context length"))
+            {
+                message += $", tip: 当前提示词过长，上下文已达到上限，如在 claudecode中使用，建议执行/compact压缩当前会话，或开启新会话后重试";
+            }
+
             logger.LogError(
                 $"Anthropic流式对话异常 请求地址：{options.Endpoint},ErrorId：{errorId}, StatusCode: {response.StatusCode.GetHashCode()}, Response: {error}");
 
-            throw new Exception(
-                $"恭喜你运气爆棚遇到了错误，尊享包对话异常：StatusCode【{response.StatusCode.GetHashCode()}】，ErrorId【{errorId}】");
+            throw new Exception(message);
         }
 
         using var stream = new StreamReader(await response.Content.ReadAsStreamAsync(cancellationToken));

Yi.Abp.Net8/module/ai-hub/Yi.Framework.AiHub.Domain/Entities/Chat/MessageAggregateRoot.cs

@@ -53,6 +53,15 @@ public class MessageAggregateRoot : FullAuditedAggregateRoot<Guid>
                 TotalTokenCount = tokenUsage.TotalTokens ?? 0
             };
         }
+        else
+        {
+            this.TokenUsage = new TokenUsageValueObject
+            {
+                OutputTokenCount = 0,
+                InputTokenCount = 0,
+                TotalTokenCount = 0
+            };
+        }
 
         this.MessageType = sessionId is null ? MessageTypeEnum.Api : MessageTypeEnum.Web;
     }
@@ -75,4 +84,9 @@ public class MessageAggregateRoot : FullAuditedAggregateRoot<Guid>
     [SugarColumn(IsOwnsOne = true)] public TokenUsageValueObject TokenUsage { get; set; } = new TokenUsageValueObject();
 
     public MessageTypeEnum MessageType { get; set; }
+
+    /// <summary>
+    /// 是否隐藏（软删除标记，隐藏后不返回给前端）
+    /// </summary>
+    public bool IsHidden { get; set; } = false;
 }

Yi.Abp.Net8/module/ai-hub/Yi.Framework.AiHub.Domain/Entities/RankingItemAggregateRoot.cs

@@ -0,0 +1,42 @@
+using SqlSugar;
+using Volo.Abp.Domain.Entities.Auditing;
+using Yi.Framework.AiHub.Domain.Shared.Enums;
+
+namespace Yi.Framework.AiHub.Domain.Entities;
+
+/// <summary>
+/// 排行榜项聚合根
+/// </summary>
+[SugarTable("Ai_RankingItem")]
+public class RankingItemAggregateRoot : FullAuditedAggregateRoot<Guid>
+{
+    /// <summary>
+    /// 名称
+    /// </summary>
+    public string Name { get; set; } 
+
+    /// <summary>
+    /// 描述
+    /// </summary>
+    public string? Description { get; set; }
+
+    /// <summary>
+    /// Logo地址
+    /// </summary>
+    public string? LogoUrl { get; set; }
+
+    /// <summary>
+    /// 得分
+    /// </summary>
+    public decimal Score { get; set; }
+
+    /// <summary>
+    /// 提供者
+    /// </summary>
+    public string? Provider { get; set; } 
+
+    /// <summary>
+    /// 排行榜类型：0-模型，1-工具
+    /// </summary>
+    public RankingTypeEnum Type { get; set; }
+}

Yi.Abp.Net8/module/ai-hub/Yi.Framework.AiHub.Domain/Managers/AiGateWayManager.cs

@@ -23,6 +23,7 @@ using Yi.Framework.AiHub.Domain.Shared.Dtos.OpenAi.Embeddings;
 using Yi.Framework.AiHub.Domain.Shared.Dtos.OpenAi.Images;
 using Yi.Framework.AiHub.Domain.Shared.Dtos.OpenAi.Responses;
 using Yi.Framework.AiHub.Domain.Shared.Enums;
+using Yi.Framework.AiHub.Application.Contracts.Dtos.Chat;
 using Yi.Framework.AiHub.Domain.Shared.Extensions;
 using Yi.Framework.Core.Extensions;
 using Yi.Framework.SqlSugarCore.Abstractions;
@@ -269,7 +270,7 @@ public class AiGateWayManager : DomainService
         }
         catch (Exception e)
         {
-            _logger.LogError(e, $"Ai对话异常");
+            _logger.LogError(e, $"Ai对话异常，用户ID：{userId}");
             var errorContent = $"对话Ai异常，异常信息：\n当前Ai模型：{request.Model}\n异常信息：{e.Message}\n异常堆栈：{e}";
             var model = new ThorChatCompletionsResponse()
             {
@@ -611,10 +612,7 @@ public class AiGateWayManager : DomainService
         CancellationToken cancellationToken = default)
     {
         var response = httpContext.Response;
-        // 设置响应头，声明是 SSE 流
-        response.ContentType = "text/event-stream;charset=utf-8;";
-        response.Headers.TryAdd("Cache-Control", "no-cache");
-        response.Headers.TryAdd("Connection", "keep-alive");
+        // 注意：SSE响应头推迟到第一条消息成功获取后再设置
 
         _specialCompatible.AnthropicCompatible(request);
         var modelDescribe = await GetModelAsync(ModelApiTypeEnum.Messages, request.Model);
@@ -630,10 +628,25 @@ public class AiGateWayManager : DomainService
 
         var completeChatResponse = chatService.StreamChatCompletionsAsync(modelDescribe, request, cancellationToken);
         ThorUsageResponse? tokenUsage = new ThorUsageResponse();
+        bool isFirst = true;
         try
         {
             await foreach (var responseResult in completeChatResponse)
             {
+                // 第一条消息成功获取，才设置 SSE 响应头
+                if (isFirst)
+                {
+                    response.ContentType = "text/event-stream;charset=utf-8;";
+                    response.Headers.TryAdd("Cache-Control", "no-cache");
+                    response.Headers.TryAdd("Connection", "keep-alive");
+                    isFirst = false;
+                }
+
+                if (responseResult.Item1.Contains("exception"))
+                {
+                    //兼容部分ai工具问题
+                    continue;
+                }
                 //部分供应商message_start放一部分
                 if (responseResult.Item1.Contains("message_start"))
                 {
@@ -670,7 +683,7 @@ public class AiGateWayManager : DomainService
         }
         catch (Exception e)
         {
-            _logger.LogError(e, $"Ai对话异常");
+            _logger.LogError(e, $"Ai对话异常，用户ID：{userId}");
             var errorContent = $"对话Ai异常，异常信息：\n当前Ai模型：{sourceModelId}\n异常信息：{e.Message}\n异常堆栈：{e}";
             throw new UserFriendlyException(errorContent);
         }
@@ -843,7 +856,7 @@ public class AiGateWayManager : DomainService
         }
         catch (Exception e)
         {
-            _logger.LogError(e, $"Ai响应异常");
+            _logger.LogError(e, $"Ai响应异常，用户ID：{userId}");
             var errorContent = $"响应Ai异常，异常信息：\n当前Ai模型：{request.Model}\n异常信息：{e.Message}\n异常堆栈：{e}";
             throw new UserFriendlyException(errorContent);
         }
@@ -1013,7 +1026,7 @@ public class AiGateWayManager : DomainService
         }
         catch (Exception e)
         {
-            _logger.LogError(e, $"Ai生成异常");
+            _logger.LogError(e, $"Ai生成异常，用户ID：{userId}");
             var errorContent = $"生成Ai异常，异常信息：\n当前Ai模型：{modelId}\n异常信息：{e.Message}\n异常堆栈：{e}";
             throw new UserFriendlyException(errorContent);
         }
@@ -1143,6 +1156,7 @@ public class AiGateWayManager : DomainService
         Guid? tokenId = null,
         CancellationToken cancellationToken = default)
     {
+        var startTime = DateTime.Now;
         var response = httpContext.Response;
         // 设置响应头，声明是 SSE 流
         response.ContentType = "text/event-stream;charset=utf-8;";
@@ -1191,35 +1205,32 @@ public class AiGateWayManager : DomainService
         switch (apiType)
         {
             case ModelApiTypeEnum.Completions:
-                processResult = await ProcessCompletionsStreamAsync(messageQueue, requestBody, modelDescribe, cancellationToken);
+                processResult = await ProcessCompletionsStreamAsync(messageQueue, requestBody, modelDescribe, userId, cancellationToken);
                 break;
             case ModelApiTypeEnum.Messages:
-                processResult = await ProcessAnthropicStreamAsync(messageQueue, requestBody, modelDescribe, cancellationToken);
+                processResult = await ProcessAnthropicStreamAsync(messageQueue, requestBody, modelDescribe, userId, cancellationToken);
                 break;
             case ModelApiTypeEnum.Responses:
-                processResult = await ProcessOpenAiResponsesStreamAsync(messageQueue, requestBody, modelDescribe, cancellationToken);
+                processResult = await ProcessOpenAiResponsesStreamAsync(messageQueue, requestBody, modelDescribe, userId, cancellationToken);
                 break;
             case ModelApiTypeEnum.GenerateContent:
-                processResult = await ProcessGeminiStreamAsync(messageQueue, requestBody, modelDescribe, cancellationToken);
+                processResult = await ProcessGeminiStreamAsync(messageQueue, requestBody, modelDescribe, userId, cancellationToken);
                 break;
             default:
                 throw new UserFriendlyException($"不支持的API类型: {apiType}");
         }
         
-        // 标记完成并等待消费任务结束
-        isComplete = true;
-        await outputTask;
-
+        
         // 统一的统计处理
-        await _aiMessageManager.CreateUserMessageAsync(userId, sessionId,
+        var userMessageId = await _aiMessageManager.CreateUserMessageAsync(userId, sessionId,
             new MessageInputDto
             {
                 Content = sessionId is null ? "不予存储" : processResult?.UserContent ?? string.Empty,
                 ModelId = sourceModelId,
                 TokenUsage = processResult?.TokenUsage,
-            }, tokenId);
+            }, tokenId,createTime:startTime);
 
-        await _aiMessageManager.CreateSystemMessageAsync(userId, sessionId,
+        var systemMessageId = await _aiMessageManager.CreateSystemMessageAsync(userId, sessionId,
             new MessageInputDto
             {
                 Content = sessionId is null ? "不予存储" : processResult?.SystemContent ?? string.Empty,
@@ -1227,6 +1238,29 @@ public class AiGateWayManager : DomainService
                 TokenUsage = processResult?.TokenUsage
             }, tokenId);
 
+        // 流式返回消息ID
+        var now = DateTime.Now;
+        var userMessageOutput = new MessageCreatedOutput
+        {
+            TypeEnum = ChatMessageTypeEnum.UserMessage,
+            MessageId = userMessageId,
+            CreationTime = startTime
+        };
+        messageQueue.Enqueue($"data: {JsonSerializer.Serialize(userMessageOutput, ThorJsonSerializer.DefaultOptions)}\n\n");
+
+        var systemMessageOutput = new MessageCreatedOutput
+        {
+            TypeEnum = ChatMessageTypeEnum.SystemMessage,
+            MessageId = systemMessageId,
+            CreationTime = now
+        };
+        messageQueue.Enqueue($"data: {JsonSerializer.Serialize(systemMessageOutput, ThorJsonSerializer.DefaultOptions)}\n\n");
+
+        // 标记完成并等待消费任务结束
+        messageQueue.Enqueue("data: [DONE]\n\n");
+        isComplete = true;
+        await outputTask;
+        
         await _usageStatisticsManager.SetUsageAsync(userId, sourceModelId, processResult?.TokenUsage, tokenId);
 
         // 扣减尊享token包用量
@@ -1259,6 +1293,7 @@ public class AiGateWayManager : DomainService
         ConcurrentQueue<string> messageQueue,
         JsonElement requestBody,
         AiModelDescribe modelDescribe,
+        Guid? userId,
         CancellationToken cancellationToken)
     {
         var request = requestBody.Deserialize<ThorChatCompletionsRequest>(ThorJsonSerializer.DefaultOptions)!;
@@ -1302,7 +1337,7 @@ public class AiGateWayManager : DomainService
         }
         catch (Exception e)
         {
-            _logger.LogError(e, "Ai对话异常");
+            _logger.LogError(e, "Ai对话异常，用户ID：{UserId}", userId);
             var errorContent = $"对话Ai异常，异常信息：\n当前Ai模型：{request.Model}\n异常信息：{e.Message}\n异常堆栈：{e}";
             systemContentBuilder.Append(errorContent);
             var model = new ThorChatCompletionsResponse()
@@ -1324,8 +1359,7 @@ public class AiGateWayManager : DomainService
             });
             messageQueue.Enqueue($"data: {errorMessage}\n\n");
         }
-
-        messageQueue.Enqueue("data: [DONE]\n\n");
+        
         return new StreamProcessResult
         {
             UserContent = userContent,
@@ -1341,6 +1375,7 @@ public class AiGateWayManager : DomainService
         ConcurrentQueue<string> messageQueue,
         JsonElement requestBody,
         AiModelDescribe modelDescribe,
+        Guid? userId,
         CancellationToken cancellationToken)
     {
         var request = requestBody.Deserialize<AnthropicInput>(ThorJsonSerializer.DefaultOptions)!;
@@ -1424,7 +1459,7 @@ public class AiGateWayManager : DomainService
         }
         catch (Exception e)
         {
-            _logger.LogError(e, "Ai对话异常");
+            _logger.LogError(e, "Ai对话异常，用户ID：{UserId}", userId);
             var errorContent = $"对话Ai异常，异常信息：\n当前Ai模型：{request.Model}\n异常信息：{e.Message}\n异常堆栈：{e}";
             systemContentBuilder.Append(errorContent);
             throw new UserFriendlyException(errorContent);
@@ -1448,6 +1483,7 @@ public class AiGateWayManager : DomainService
         ConcurrentQueue<string> messageQueue,
         JsonElement requestBody,
         AiModelDescribe modelDescribe,
+        Guid? userId,
         CancellationToken cancellationToken)
     {
         var request = requestBody.Deserialize<OpenAiResponsesInput>(ThorJsonSerializer.DefaultOptions)!;
@@ -1523,7 +1559,7 @@ public class AiGateWayManager : DomainService
         }
         catch (Exception e)
         {
-            _logger.LogError(e, "Ai响应异常");
+            _logger.LogError(e, "Ai响应异常，用户ID：{UserId}", userId);
             var errorContent = $"响应Ai异常，异常信息：\n当前Ai模型：{request.Model}\n异常信息：{e.Message}\n异常堆栈：{e}";
             systemContentBuilder.Append(errorContent);
             throw new UserFriendlyException(errorContent);
@@ -1544,6 +1580,7 @@ public class AiGateWayManager : DomainService
         ConcurrentQueue<string> messageQueue,
         JsonElement requestBody,
         AiModelDescribe modelDescribe,
+        Guid? userId,
         CancellationToken cancellationToken)
     {
         // 提取用户最后一条消息 (contents[last].parts[last].text)
@@ -1589,7 +1626,7 @@ public class AiGateWayManager : DomainService
         }
         catch (Exception e)
         {
-            _logger.LogError(e, "Ai生成异常");
+            _logger.LogError(e, "Ai生成异常，用户ID：{UserId}", userId);
             var errorContent = $"生成Ai异常，异常信息：\n当前Ai模型：{modelDescribe.ModelId}\n异常信息：{e.Message}\n异常堆栈：{e}";
             systemContentBuilder.Append(errorContent);
             throw new UserFriendlyException(errorContent);

Yi.Abp.Net8/module/ai-hub/Yi.Framework.AiHub.Domain/Managers/AiMessageManager.cs

@@ -24,11 +24,12 @@ public class AiMessageManager : DomainService
     /// <param name="input">消息输入</param>
     /// <param name="tokenId">Token Id（Web端传Guid.Empty）</param>
     /// <returns></returns>
-    public async Task CreateSystemMessageAsync(Guid? userId, Guid? sessionId, MessageInputDto input, Guid? tokenId = null)
+    public async Task<Guid> CreateSystemMessageAsync(Guid? userId, Guid? sessionId, MessageInputDto input, Guid? tokenId = null)
     {
         input.Role = "system";
         var message = new MessageAggregateRoot(userId, sessionId, input.Content, input.Role, input.ModelId, input.TokenUsage, tokenId);
         await _repository.InsertAsync(message);
+        return message.Id;
     }
 
     /// <summary>
@@ -38,11 +39,16 @@ public class AiMessageManager : DomainService
     /// <param name="sessionId">会话Id</param>
     /// <param name="input">消息输入</param>
     /// <param name="tokenId">Token Id（Web端传Guid.Empty）</param>
+    /// <param name="createTime"></param>
     /// <returns></returns>
-    public async Task CreateUserMessageAsync(Guid? userId, Guid? sessionId, MessageInputDto input, Guid? tokenId = null)
+    public async Task<Guid> CreateUserMessageAsync( Guid? userId, Guid? sessionId, MessageInputDto input, Guid? tokenId = null,DateTime? createTime=null)
     {
         input.Role = "user";
-        var message = new MessageAggregateRoot(userId, sessionId, input.Content, input.Role, input.ModelId, input.TokenUsage, tokenId);
+        var message = new MessageAggregateRoot(userId, sessionId, input.Content, input.Role, input.ModelId, input.TokenUsage, tokenId)
+        {
+            CreationTime = createTime??DateTime.Now
+        };
         await _repository.InsertAsync(message);
+        return message.Id;
     }
 }

Yi.Abp.Net8/module/ai-hub/Yi.Framework.AiHub.Domain/Mcp/HttpRequestTool.cs

@@ -0,0 +1,143 @@
+using System.ComponentModel;
+using System.Text;
+using System.Text.Json;
+using Microsoft.Extensions.Logging;
+using Volo.Abp.DependencyInjection;
+using Yi.Framework.AiHub.Domain.Shared.Attributes;
+
+namespace Yi.Framework.AiHub.Domain.Mcp;
+
+[YiAgentTool]
+public class HttpRequestTool : ISingletonDependency
+{
+    private readonly IHttpClientFactory _httpClientFactory;
+    private readonly ILogger<HttpRequestTool> _logger;
+
+    public HttpRequestTool(
+        IHttpClientFactory httpClientFactory,
+        ILogger<HttpRequestTool> logger)
+    {
+        _httpClientFactory = httpClientFactory;
+        _logger = logger;
+    }
+
+    [YiAgentTool("HTTP请求"), DisplayName("HttpRequest"),
+     Description("发送HTTP请求，支持GET/POST/PUT/DELETE等方法，获取指定URL的响应内容")]
+    public async Task<string> HttpRequest(
+        [Description("请求的URL地址")] string url,
+        [Description("HTTP方法：GET、POST、PUT、DELETE等")] string method = "GET",
+        [Description("请求体内容（JSON字符串），POST/PUT时使用")] string? body = null,
+        [Description("请求头，格式：key1:value1,key2:value2")] string? headers = null)
+    {
+        if (string.IsNullOrWhiteSpace(url))
+        {
+            return "URL不能为空";
+        }
+
+        if (string.IsNullOrWhiteSpace(method))
+        {
+            method = "GET";
+        }
+
+        try
+        {
+            var client = _httpClientFactory.CreateClient();
+            var request = new HttpRequestMessage(new HttpMethod(method.ToUpper()), url);
+
+            // 添加请求体
+            if (!string.IsNullOrWhiteSpace(body))
+            {
+                request.Content = new StringContent(body, Encoding.UTF8, "application/json");
+            }
+
+            // 添加自定义请求头
+            if (!string.IsNullOrWhiteSpace(headers))
+            {
+                AddHeaders(request, headers);
+            }
+
+            var response = await client.SendAsync(request);
+            return await FormatResponse(response);
+        }
+        catch (Exception ex)
+        {
+            _logger.LogError(ex, "HTTP {Method}请求失败: {Url}", method, url);
+            return $"请求失败: {ex.Message}";
+        }
+    }
+
+    /// <summary>
+    /// 添加请求头
+    /// </summary>
+    private void AddHeaders(HttpRequestMessage request, string headers)
+    {
+        var headerPairs = headers.Split(',', StringSplitOptions.RemoveEmptyEntries | StringSplitOptions.TrimEntries);
+        foreach (var pair in headerPairs)
+        {
+            var parts = pair.Split(':', 2, StringSplitOptions.RemoveEmptyEntries | StringSplitOptions.TrimEntries);
+            if (parts.Length == 2)
+            {
+                request.Headers.TryAddWithoutValidation(parts[0], parts[1]);
+            }
+        }
+    }
+
+    /// <summary>
+    /// 格式化响应结果
+    /// </summary>
+    private async Task<string> FormatResponse(HttpResponseMessage response)
+    {
+        var sb = new StringBuilder();
+        sb.AppendLine($"状态码: {(int)response.StatusCode} {response.StatusCode}");
+        sb.AppendLine($"Content-Type: {response.Content.Headers.ContentType?.ToString() ?? "未知"}");
+        sb.AppendLine();
+
+        var content = await response.Content.ReadAsStringAsync();
+        if (string.IsNullOrWhiteSpace(content))
+        {
+            sb.AppendLine("响应内容为空");
+        }
+        else
+        {
+            // 尝试格式化JSON
+            if (IsJsonContentType(response.Content.Headers.ContentType?.MediaType))
+            {
+                try
+                {
+                    var jsonDoc = JsonDocument.Parse(content);
+                    sb.AppendLine("响应内容（JSON格式化）：");
+                    sb.AppendLine(JsonSerializer.Serialize(jsonDoc, new JsonSerializerOptions
+                    {
+                        WriteIndented = true
+                    }));
+                }
+                catch
+                {
+                    sb.AppendLine("响应内容：");
+                    sb.AppendLine(content);
+                }
+            }
+            else
+            {
+                sb.AppendLine("响应内容：");
+                sb.AppendLine(content);
+            }
+        }
+
+        return sb.ToString();
+    }
+
+    /// <summary>
+    /// 判断是否为JSON内容类型
+    /// </summary>
+    private bool IsJsonContentType(string? contentType)
+    {
+        if (string.IsNullOrWhiteSpace(contentType))
+        {
+            return false;
+        }
+
+        return contentType.Contains("application/json", StringComparison.OrdinalIgnoreCase) ||
+               contentType.Contains("text/json", StringComparison.OrdinalIgnoreCase);
+    }
+}

Yi.Abp.Net8/module/ai-hub/Yi.Framework.AiHub.Domain/Mcp/YxaiKnowledgeTool.cs

@@ -26,64 +26,80 @@ public class YxaiKnowledgeTool : ISingletonDependency
         _logger = logger;
     }
 
-    [YiAgentTool("意心Ai平台知识库目录"), DisplayName("YxaiKnowledgeDirectory"),
-     Description("获取意心AI相关内容的知识库目录列表")]
-    public async Task<List<YxaiKnowledgeDirectoryItem>> YxaiKnowledgeDirectory()
+    [YiAgentTool("意心Ai平台知识库"), DisplayName("YxaiKnowledge"),
+     Description("获取意心AI相关内容的知识库目录及内容列表")]
+    public async Task<List<YxaiKnowledgeItem>> YxaiKnowledge()
     {
         try
         {
             var client = _httpClientFactory.CreateClient();
-            var response = await client.GetAsync(DirectoryUrl);
 
-            if (!response.IsSuccessStatusCode)
+            // 1. 先获取目录列表
+            var directoryResponse = await client.GetAsync(DirectoryUrl);
+            if (!directoryResponse.IsSuccessStatusCode)
             {
-                _logger.LogError("意心知识库目录接口调用失败: {StatusCode}", response.StatusCode);
-                return new List<YxaiKnowledgeDirectoryItem>();
+                _logger.LogError("意心知识库目录接口调用失败: {StatusCode}", directoryResponse.StatusCode);
+                return new List<YxaiKnowledgeItem>();
             }
 
-            var json = await response.Content.ReadAsStringAsync();
-            var result = JsonSerializer.Deserialize(json, YxaiKnowledgeJsonContext.Default.ListYxaiKnowledgeDirectoryItem);
+            var directoryJson = await directoryResponse.Content.ReadAsStringAsync();
+            var directories = JsonSerializer.Deserialize(directoryJson,
+                YxaiKnowledgeJsonContext.Default.ListYxaiKnowledgeDirectoryItem);
 
-            return result ?? new List<YxaiKnowledgeDirectoryItem>();
+            if (directories == null || directories.Count == 0)
+            {
+                return new List<YxaiKnowledgeItem>();
+            }
+
+            // 2. 循环调用内容接口获取每个目录的内容
+            var result = new List<YxaiKnowledgeItem>();
+            foreach (var directory in directories)
+            {
+                try
+                {
+                    var contentUrl = string.Format(ContentUrlTemplate, directory.Id);
+                    var contentResponse = await client.GetAsync(contentUrl);
+
+                    if (contentResponse.IsSuccessStatusCode)
+                    {
+                        var contentJson = await contentResponse.Content.ReadAsStringAsync();
+                        var contentResult = JsonSerializer.Deserialize(contentJson,
+                            YxaiKnowledgeJsonContext.Default.YxaiKnowledgeContentResponse);
+
+                        result.Add(new YxaiKnowledgeItem
+                        {
+                            Name = directory.Name,
+                            Content = contentResult?.Content ?? ""
+                        });
+                    }
+                    else
+                    {
+                        _logger.LogWarning("获取知识库内容失败: {StatusCode}, DirectoryId: {DirectoryId}",
+                            contentResponse.StatusCode, directory.Id);
+                        result.Add(new YxaiKnowledgeItem
+                        {
+                            Name = directory.Name,
+                            Content = $"获取内容失败: {contentResponse.StatusCode}"
+                        });
+                    }
+                }
+                catch (Exception ex)
+                {
+                    _logger.LogError(ex, "获取知识库内容发生异常, DirectoryId: {DirectoryId}", directory.Id);
+                    result.Add(new YxaiKnowledgeItem
+                    {
+                        Name = directory.Name,
+                        Content = "获取内容发生异常"
+                    });
+                }
+            }
+
+            return result;
         }
         catch (Exception ex)
         {
-            _logger.LogError(ex, "获取意心知识库目录发生异常");
-            return new List<YxaiKnowledgeDirectoryItem>();
-        }
-    }
-
-    [YiAgentTool("意心Ai平台知识库内容"), DisplayName("YxaiKnowledge"),
-     Description("根据目录ID获取意心AI知识库的具体内容")]
-    public async Task<string> YxaiKnowledge([Description("知识库目录ID")] string directoryId)
-    {
-        if (string.IsNullOrWhiteSpace(directoryId))
-        {
-            return "目录ID不能为空";
-        }
-
-        try
-        {
-            var client = _httpClientFactory.CreateClient();
-            var url = string.Format(ContentUrlTemplate, directoryId);
-            var response = await client.GetAsync(url);
-
-            if (!response.IsSuccessStatusCode)
-            {
-                _logger.LogError("意心知识库内容接口调用失败: {StatusCode}, DirectoryId: {DirectoryId}",
-                    response.StatusCode, directoryId);
-                return "获取知识库内容失败";
-            }
-
-            var json = await response.Content.ReadAsStringAsync();
-            var result = JsonSerializer.Deserialize(json, YxaiKnowledgeJsonContext.Default.YxaiKnowledgeContentResponse);
-
-            return result?.Content ?? "未找到相关内容";
-        }
-        catch (Exception ex)
-        {
-            _logger.LogError(ex, "获取意心知识库内容发生异常, DirectoryId: {DirectoryId}", directoryId);
-            return "获取知识库内容发生异常";
+            _logger.LogError(ex, "获取意心知识库发生异常");
+            return new List<YxaiKnowledgeItem>();
         }
     }
 }
@@ -102,6 +118,22 @@ public class YxaiKnowledgeContentResponse
     [JsonPropertyName("content")] public string? Content { get; set; }
 }
 
+/// <summary>
+/// 合并后的知识库项，包含目录和内容
+/// </summary>
+public class YxaiKnowledgeItem
+{
+    /// <summary>
+    /// 目录名称
+    /// </summary>
+    public string Name { get; set; } = "";
+
+    /// <summary>
+    /// 知识库内容
+    /// </summary>
+    public string Content { get; set; } = "";
+}
+
 #endregion
 
 #region JSON 序列化上下文
@@ -112,4 +144,4 @@ internal partial class YxaiKnowledgeJsonContext : JsonSerializerContext
 {
 }
 
-#endregion
+#endregion

Yi.Abp.Net8/src/Yi.Abp.Web/Program.cs

@@ -4,6 +4,7 @@ using Serilog.Events;
 using Yi.Abp.Web;
 
 //创建日志,可使用{SourceContext}记录
+var outputTemplate = "{Timestamp:yyyy-MM-dd HH:mm:ss.fff zzz}【{SourceContext}】[{Level:u3}]{Message:lj}{NewLine}{Exception}";
 Log.Logger = new LoggerConfiguration()
     //由于后端处理请求中，前端请求已经结束，此类日志可不记录
     .Filter.ByExcluding(log =>log.Exception?.GetType() == typeof(TaskCanceledException)||log.MessageTemplate.Text.Contains("\"message\": \"A task was canceled.\""))
@@ -11,10 +12,15 @@ Log.Logger = new LoggerConfiguration()
     .MinimumLevel.Override("Microsoft", LogEventLevel.Information)
     .MinimumLevel.Override("Microsoft.AspNetCore.Hosting.Diagnostics", LogEventLevel.Error)
     .MinimumLevel.Override("Quartz", LogEventLevel.Warning)
+    .MinimumLevel.Override("Microsoft.AspNetCore.Authentication.JwtBearer.JwtBearerHandler", LogEventLevel.Warning)
+    .MinimumLevel.Override("Microsoft.AspNetCore.Cors.Infrastructure.CorsService", LogEventLevel.Warning)
+    .MinimumLevel.Override("Microsoft.AspNetCore.Authorization.DefaultAuthorizationService", LogEventLevel.Warning)
+    .MinimumLevel.Override("Microsoft.AspNetCore.Routing.EndpointMiddleware", LogEventLevel.Warning)
+    .MinimumLevel.Override("Hangfire.Server.ServerHeartbeatProcess", LogEventLevel.Warning)
     .Enrich.FromLogContext()
-    .WriteTo.Async(c => c.File("logs/all/log-.txt", rollingInterval: RollingInterval.Day, restrictedToMinimumLevel: LogEventLevel.Debug))
-    .WriteTo.Async(c => c.File("logs/error/errorlog-.txt", rollingInterval: RollingInterval.Day, restrictedToMinimumLevel: LogEventLevel.Error))
-    .WriteTo.Async(c => c.Console())
+    .WriteTo.Async(c => c.File("logs/all/log-.txt", rollingInterval: RollingInterval.Day, restrictedToMinimumLevel: LogEventLevel.Debug,outputTemplate:outputTemplate))
+    .WriteTo.Async(c => c.File("logs/error/errorlog-.txt", rollingInterval: RollingInterval.Day, restrictedToMinimumLevel: LogEventLevel.Error,outputTemplate:outputTemplate))
+    .WriteTo.Async(c => c.Console(outputTemplate:outputTemplate))
     .CreateLogger();
 
 try

Yi.Abp.Net8/src/Yi.Abp.Web/YiAbpWebModule.cs

@@ -361,7 +361,7 @@ namespace Yi.Abp.Web
             var app = context.GetApplicationBuilder();
             app.UseRouting();
 
-            //app.ApplicationServices.GetRequiredService<ISqlSugarDbContext>().SqlSugarClient.CodeFirst.InitTables<SessionAggregateRoot>();
+            // app.ApplicationServices.GetRequiredService<ISqlSugarDbContext>().SqlSugarClient.CodeFirst.InitTables<RankingItemAggregateRoot>();
             // app.ApplicationServices.GetRequiredService<ISqlSugarDbContext>().SqlSugarClient.CodeFirst.InitTables<ActivationCodeRecordAggregateRoot>();
             // app.ApplicationServices.GetRequiredService<ISqlSugarDbContext>().SqlSugarClient.CodeFirst.InitTables<UsageStatisticsAggregateRoot>();
 

Yi.Ai.Vue3/.build/plugins/fontawesome.ts

@@ -0,0 +1,23 @@
+import type { Plugin } from 'vite';
+import { config, library } from '@fortawesome/fontawesome-svg-core';
+import { fas } from '@fortawesome/free-solid-svg-icons';
+
+/**
+ * Vite 插件：配置 FontAwesome
+ * 预注册所有图标，避免运行时重复注册
+ */
+export default function fontAwesomePlugin(): Plugin {
+  // 在模块加载时配置 FontAwesome
+  library.add(fas);
+
+  return {
+    name: 'vite-plugin-fontawesome',
+    config() {
+      return {
+        define: {
+          // 确保 FontAwesome 在客户端正确初始化
+        },
+      };
+    },
+  };
+}

Yi.Ai.Vue3/.build/plugins/index.ts

@@ -10,15 +10,21 @@ import Components from 'unplugin-vue-components/vite';
 import viteCompression from 'vite-plugin-compression';
 
 import envTyped from 'vite-plugin-env-typed';
+import fontAwesomePlugin from './fontawesome';
 import gitHashPlugin from './git-hash';
+import preloadPlugin from './preload';
 import createSvgIcon from './svg-icon';
+import versionHtmlPlugin from './version-html';
 
 const root = path.resolve(__dirname, '../../');
 
 function plugins({ mode, command }: ConfigEnv): PluginOption[] {
   return [
+    versionHtmlPlugin(), // 最先处理 HTML 版本号
     gitHashPlugin(),
+    preloadPlugin(),
     UnoCSS(),
+    fontAwesomePlugin(),
     envTyped({
       mode,
       envDir: root,
@@ -35,7 +41,18 @@ function plugins({ mode, command }: ConfigEnv): PluginOption[] {
       dts: path.join(root, 'types', 'auto-imports.d.ts'),
     }),
     Components({
-      resolvers: [ElementPlusResolver()],
+      resolvers: [
+        ElementPlusResolver(),
+        // 自动导入 FontAwesomeIcon 组件
+        (componentName) => {
+          if (componentName === 'FontAwesomeIcon') {
+            return {
+              name: 'FontAwesomeIcon',
+              from: '@/components/FontAwesomeIcon/index.vue',
+            };
+          }
+        },
+      ],
       dts: path.join(root, 'types', 'components.d.ts'),
     }),
     createSvgIcon(command === 'build'),

Yi.Ai.Vue3/.build/plugins/preload.ts

@@ -0,0 +1,47 @@
+import type { Plugin } from 'vite';
+
+/**
+ * Vite 插件：资源预加载优化
+ * 自动添加 Link 标签预加载关键资源
+ */
+export default function preloadPlugin(): Plugin {
+  return {
+    name: 'vite-plugin-preload-optimization',
+    apply: 'build',
+    transformIndexHtml(html, context) {
+      // 只在生产环境添加预加载
+      if (process.env.NODE_ENV === 'development') {
+        return html;
+      }
+
+      const bundle = context.bundle || {};
+      const preloadLinks: string[] = [];
+
+      // 收集关键资源
+      const criticalChunks = ['vue-vendor', 'element-plus', 'pinia'];
+      const criticalAssets: string[] = [];
+
+      Object.entries(bundle).forEach(([fileName, chunk]) => {
+        if (chunk.type === 'chunk' && criticalChunks.some(name => fileName.includes(name))) {
+          criticalAssets.push(`/${fileName}`);
+        }
+      });
+
+      // 生成预加载标签
+      criticalAssets.forEach(href => {
+        if (href.endsWith('.js')) {
+          preloadLinks.push(`<link rel="modulepreload" href="${href}" crossorigin>`);
+        } else if (href.endsWith('.css')) {
+          preloadLinks.push(`<link rel="preload" href="${href}" as="style">`);
+        }
+      });
+
+      // 将预加载标签插入到 </head> 之前
+      if (preloadLinks.length > 0) {
+        return html.replace('</head>', `${preloadLinks.join('\n  ')}\n</head>`);
+      }
+
+      return html;
+    },
+  };
+}

Yi.Ai.Vue3/.build/plugins/version-html.ts

@@ -0,0 +1,20 @@
+import type { Plugin } from 'vite';
+import { APP_VERSION, APP_NAME } from '../../src/config/version';
+
+/**
+ * Vite 插件：在 HTML 中注入版本号
+ * 替换 HTML 中的占位符为实际版本号
+ */
+export default function versionHtmlPlugin(): Plugin {
+  return {
+    name: 'vite-plugin-version-html',
+    enforce: 'pre',
+    transformIndexHtml(html) {
+      // 替换 HTML 中的版本占位符
+      return html
+        .replace(/%APP_NAME%/g, APP_NAME)
+        .replace(/%APP_VERSION%/g, APP_VERSION)
+        .replace(/%APP_FULL_NAME%/g, `${APP_NAME} ${APP_VERSION}`);
+    },
+  };
+}

Yi.Ai.Vue3/.claude/settings.local.json

@@ -6,7 +6,11 @@
       "Bash(npm run dev:*)",
       "Bash(taskkill:*)",
       "Bash(timeout /t 5 /nobreak)",
-      "Bash(git checkout:*)"
+      "Bash(git checkout:*)",
+      "Bash(npm install marked --save)",
+      "Bash(pnpm add marked)",
+      "Bash(pnpm lint:*)",
+      "Bash(pnpm list:*)"
     ],
     "deny": [],
     "ask": []

Yi.Ai.Vue3/CLAUDE.md

@@ -0,0 +1,367 @@
+# CLAUDE.md
+
+本文件为 Claude Code (claude.ai/code) 提供本项目代码开发指导。
+
+## 项目简介
+
+**意心AI** - 基于 Vue 3.5 + TypeScript 开发的企业级 AI 聊天应用模板，仿豆包/通义 AI 平台。支持流式对话、AI 模型库、文件上传、Mermaid 图表渲染等功能。
+
+## 技术栈
+
+- **框架**: Vue 3.5+ (Composition API) + TypeScript 5.8+
+- **构建工具**: Vite 6.3+
+- **UI 组件**: Element Plus 2.10.4 + vue-element-plus-x 1.3.7
+- **状态管理**: Pinia 3.0 + pinia-plugin-persistedstate
+- **HTTP 请求**: hook-fetch（支持流式/SSE，替代 Axios）
+- **CSS**: UnoCSS + SCSS
+- **路由**: Vue Router 4
+
+## 常用命令
+
+```bash
+# 安装依赖（必须用 pnpm）
+pnpm install
+
+# 启动开发服务器（端口 17001）
+pnpm dev
+
+# 生产构建
+pnpm build
+
+# 预览生产构建
+pnpm preview
+
+# 代码检查与修复
+pnpm lint          # ESLint 检查
+pnpm fix           # ESLint 自动修复
+pnpm lint:stylelint # 样式检查
+
+# 规范提交（使用 cz-git）
+pnpm cz
+```
+
+## 如何新增页面
+
+### 1. 创建页面文件
+
+页面文件统一放在 `src/pages/` 目录下：
+
+```
+src/pages/
+├── chat/                    # 功能模块文件夹
+│   ├── index.vue           # 父级布局页
+│   ├── conversation/       # 子页面文件夹
+│   │   └── index.vue       # 子页面
+│   └── image/
+│       └── index.vue
+├── console/
+│   └── index.vue
+└── your-page/              # 新增页面在这里创建
+    └── index.vue
+```
+
+**单页面示例** (`src/pages/your-page/index.vue`):
+
+```vue
+<template>
+  <div class="your-page">
+    <h1>页面标题</h1>
+  </div>
+</template>
+
+<script setup lang="ts">
+// 自动导入 Vue API，无需手动 import
+const route = useRoute()
+const router = useRouter()
+
+// 如需使用状态管理
+const userStore = useUserStore()
+
+onMounted(() => {
+  console.log('页面加载')
+})
+</script>
+
+<style scoped lang="scss">
+.your-page {
+  padding: 20px;
+}
+</style>
+```
+
+### 2. 配置路由
+
+路由配置在 `src/routers/modules/staticRouter.ts`。
+
+**新增独立页面**（添加到 `layoutRouter` 的 children 中）：
+
+```typescript
+{
+  path: 'your-page',           // URL 路径，最终为 /your-page
+  name: 'yourPage',            // 路由名称，必须唯一
+  component: () => import('@/pages/your-page/index.vue'),
+  meta: {
+    title: '页面标题',          // 页面标题，会显示在浏览器标签
+    keepAlive: 0,              // 是否缓存页面：0=缓存，1=不缓存
+    isDefaultChat: false,      // 是否为默认聊天页
+    layout: 'default',         // 布局类型：default/blankPage
+  },
+}
+```
+
+**新增带子路由的功能模块**：
+
+```typescript
+{
+  path: 'module-name',
+  name: 'moduleName',
+  component: () => import('@/pages/module-name/index.vue'),  // 父级布局页
+  redirect: '/module-name/sub-page',                          // 默认重定向
+  meta: {
+    title: '模块标题',
+    icon: 'HomeFilled',      // Element Plus 图标名称
+  },
+  children: [
+    {
+      path: 'sub-page',
+      name: 'subPage',
+      component: () => import('@/pages/module-name/sub-page/index.vue'),
+      meta: {
+        title: '子页面标题',
+      },
+    },
+    // 带参数的路由
+    {
+      path: 'detail/:id',
+      name: 'detailPage',
+      component: () => import('@/pages/module-name/detail/index.vue'),
+      meta: {
+        title: '详情页',
+      },
+    },
+  ],
+}
+```
+
+**无需布局的独立页面**（添加到 `staticRouter`）：
+
+```typescript
+{
+  path: '/test/page',
+  name: 'testPage',
+  component: () => import('@/pages/test/page.vue'),
+  meta: {
+    title: '测试页面',
+  },
+}
+```
+
+### 3. 页面 Meta 配置说明
+
+| 属性 | 类型 | 说明 |
+|------|------|------|
+| title | string | 页面标题，显示在浏览器标签页 |
+| keepAlive | number | 0=缓存页面，1=不缓存 |
+| layout | string | 布局类型：'default' 使用默认布局，'blankPage' 使用空白布局 |
+| isDefaultChat | boolean | 是否为默认聊天页面 |
+| icon | string | Element Plus 图标名称，用于菜单显示 |
+| isHide | string | '0'=在菜单中隐藏，'1'=显示 |
+| isKeepAlive | string | '0'=缓存，'1'=不缓存（字符串版） |
+
+### 4. 布局说明
+
+布局组件位于 `src/layouts/`：
+
+- **default**: 默认布局，包含侧边栏、顶部导航等
+- **blankPage**: 空白布局，仅包含路由出口
+
+在路由 meta 中通过 `layout` 字段指定：
+
+```typescript
+meta: {
+  layout: 'default',     // 使用默认布局（有侧边栏）
+  // 或
+  layout: 'blankPage',   // 使用空白布局（全屏页面）
+}
+```
+
+### 5. 页面跳转示例
+
+```typescript
+// 在 script setup 中使用
+const router = useRouter()
+
+// 跳转页面
+router.push('/chat/conversation')
+router.push({ name: 'chatConversation' })
+router.push({ path: '/chat/conversation/:id', params: { id: '123' } })
+
+// 获取路由参数
+const route = useRoute()
+console.log(route.params.id)
+```
+
+### 6. 完整新增页面示例
+
+假设要新增一个"数据统计"页面：
+
+**步骤 1**: 创建页面文件 `src/pages/statistics/index.vue`
+
+```vue
+<template>
+  <div class="statistics-page">
+    <el-card>
+      <template #header>
+        <span>数据统计</span>
+      </template>
+      <div>页面内容</div>
+    </el-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+const { data, loading } = useFetch('/api/statistics').get().json()
+</script>
+
+<style scoped lang="scss">
+.statistics-page {
+  padding: 20px;
+}
+</style>
+```
+
+**步骤 2**: 在 `src/routers/modules/staticRouter.ts` 中添加路由
+
+```typescript
+{
+  path: 'statistics',
+  name: 'statistics',
+  component: () => import('@/pages/statistics/index.vue'),
+  meta: {
+    title: '意心Ai-数据统计',
+    keepAlive: 0,
+    isDefaultChat: false,
+    layout: 'default',
+  },
+}
+```
+
+**步骤 3**: 在菜单中添加入口（如需要）
+
+如需在侧边栏显示，需在相应的位置添加菜单配置。
+
+## 核心架构说明
+
+### HTTP 请求封装
+
+位于 `src/utils/request.ts`，使用 hook-fetch：
+
+```typescript
+import { get, post, put, del } from '@/utils/request'
+
+// GET 请求
+const { data } = await get('/api/endpoint').json()
+
+// POST 请求
+const result = await post('/api/endpoint', { key: 'value' }).json()
+```
+
+特点：
+- 自动附加 JWT Token 到请求头
+- 自动处理 401/403 错误
+- 支持 Server-Sent Events (SSE) 流式响应
+
+### 状态管理
+
+Pinia stores 位于 `src/stores/modules/`：
+
+| Store | 用途 |
+|-------|------|
+| user.ts | 用户认证、登录状态 |
+| chat.ts | 聊天消息、流式输出 |
+| session.ts | 会话列表、当前会话 |
+| model.ts | AI 模型配置 |
+
+使用方式：
+
+```typescript
+const userStore = useUserStore()
+userStore.setToken(token, refreshToken)
+userStore.logout()
+```
+
+### 自动导入
+
+项目已配置 `unplugin-auto-import`，以下 API 无需手动 import：
+
+- Vue API: `ref`, `reactive`, `computed`, `watch`, `onMounted` 等
+- Vue Router: `useRoute`, `useRouter`
+- Pinia: `createPinia`, `storeToRefs`
+- VueUse: `useFetch`, `useStorage` 等
+
+### 路径别名
+
+| 别名 | 对应路径 |
+|------|----------|
+| `@/` | `src/` |
+| `@components/` | `src/vue-element-plus-y/components/` |
+
+### 环境变量
+
+开发配置在 `.env.development`：
+
+```
+VITE_WEB_BASE_API=/dev-api           # API 前缀
+VITE_API_URL=http://localhost:19001/api/app  # 后端地址
+VITE_SSO_SEVER_URL=http://localhost:18001    # SSO 地址
+```
+
+Vite 开发服务器会自动将 `/dev-api` 代理到后端 API。
+
+## 代码规范
+
+### 提交规范
+
+使用 `pnpm cz` 进行规范提交，类型包括：
+- `feat`: 新功能
+- `fix`: 修复
+- `docs`: 文档
+- `style`: 代码格式
+- `refactor`: 重构
+- `perf`: 性能优化
+- `test`: 测试
+- `build`: 构建
+- `ci`: CI/CD
+- `revert`: 回滚
+- `chore`: 其他
+
+### Git Hooks
+
+- **pre-commit**: 自动运行 ESLint 修复
+- **commit-msg**: 校验提交信息格式
+
+## 构建优化
+
+Vite 配置中的代码分割策略（`vite.config.ts`）：
+
+| Chunk 名称 | 包含内容 |
+|-----------|---------|
+| vue-vendor | Vue 核心库、Vue Router |
+| pinia | Pinia 状态管理 |
+| element-plus | Element Plus UI 库 |
+| markdown | Markdown 解析相关 |
+| utils | Lodash、VueUse 工具库 |
+| highlight | 代码高亮库 |
+| echarts | 图表库 |
+| pdf | PDF 处理库 |
+
+## 后端集成
+
+后端为 .NET 8 项目，本地启动命令：
+
+```bash
+cd E:\devDemo\Yi\Yi.Abp.Net8\src\Yi.Abp.Web
+dotnet run
+```
+
+前端开发时，后端默认运行在 `http://localhost:19001`。

Yi.Ai.Vue3/FONTAWESOME_MIGRATION.md

@@ -0,0 +1,133 @@
+# FontAwesome 图标迁移指南
+
+## 迁移步骤
+
+### 1. 在组件中使用 FontAwesomeIcon
+
+```vue
+<!-- 旧方式：Element Plus 图标 -->
+<template>
+  <el-icon>
+    <Check />
+  </el-icon>
+</template>
+
+<script setup lang="ts">
+import { Check } from '@element-plus/icons-vue';
+</script>
+```
+
+```vue
+<!-- 新方式：FontAwesome -->
+<template>
+  <FontAwesomeIcon icon="check" />
+</template>
+
+<!-- 或带 props -->
+<template>
+  <FontAwesomeIcon icon="check" size="lg" />
+  <FontAwesomeIcon icon="spinner" spin />
+  <FontAwesomeIcon icon="magnifying-glass" size="xl" />
+</template>
+```
+
+### 2. 自动映射工具
+
+使用 `getFontAwesomeIcon` 函数自动映射图标名：
+
+```typescript
+import { getFontAwesomeIcon } from '@/utils/icon-mapping';
+
+// 将 Element Plus 图标名转换为 FontAwesome 图标名
+const faIcon = getFontAwesomeIcon('Check'); // 返回 'check'
+const faIcon2 = getFontAwesomeIcon('ArrowLeft'); // 返回 'arrow-left'
+```
+
+### 3. Props 说明
+
+| Prop | 类型 | 可选值 | 说明 |
+|------|------|--------|------|
+| icon | string | 任意 FontAwesome 图标名 | 图标名称（不含 fa- 前缀） |
+| size | string | xs, sm, lg, xl, 2x, 3x, 4x, 5x | 图标大小 |
+| spin | boolean | true/false | 是否旋转 |
+| pulse | boolean | true/false | 是否脉冲动画 |
+| rotation | number | 0, 90, 180, 270 | 旋转角度 |
+
+### 4. 常用图标对照表
+
+| Element Plus | FontAwesome |
+|--------------|-------------|
+| Check | check |
+| Close | xmark |
+| Delete | trash |
+| Edit | pen-to-square |
+| Plus | plus |
+| Search | magnifying-glass |
+| Refresh | rotate-right |
+| Loading | spinner |
+| Download | download |
+| ArrowLeft | arrow-left |
+| ArrowRight | arrow-right |
+| User | user |
+| Setting | gear |
+| View | eye |
+| Hide | eye-slash |
+| Lock | lock |
+| Share | share-nodes |
+| Heart | heart |
+| Star | star |
+| Clock | clock |
+| Calendar | calendar |
+| ChatLineRound | comment |
+| Bell | bell |
+| Document | file |
+| Picture | image |
+
+### 5. 批量迁移示例
+
+```vue
+<!-- 迁移前 -->
+<template>
+  <div>
+    <el-icon><Check /></el-icon>
+    <el-icon><Close /></el-icon>
+    <el-icon><Delete /></el-icon>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Check, Close, Delete } from '@element-plus/icons-vue';
+</script>
+
+<!-- 迁移后 -->
+<template>
+  <div>
+    <FontAwesomeIcon icon="check" />
+    <FontAwesomeIcon icon="xmark" />
+    <FontAwesomeIcon icon="trash" />
+  </div>
+</template>
+
+<script setup lang="ts">
+// 不需要 import，FontAwesomeIcon 组件已自动导入
+</script>
+```
+
+## 注意事项
+
+1. **无需手动导入**：FontAwesomeIcon 组件已在 `vite.config.ts` 中配置为自动导入
+2. **图标名格式**：使用小写、带连字符的图标名（如 `magnifying-glass`）
+3. **完整图标列表**：访问 [FontAwesome 官网](https://fontawesome.com/search?o=r&m=free) 查看所有可用图标
+4. **渐进步骤**：可以逐步迁移，Element Plus 图标和 FontAwesome 可以共存
+
+## 优化建议
+
+1. **减少包体积**：迁移后可以移除 `@element-plus/icons-vue` 依赖
+2. **统一图标风格**：FontAwesome 图标风格更统一
+3. **更好的性能**：FontAwesome 按需加载，不会加载未使用的图标
+
+## 查找图标
+
+- [Solid Icons 搜索](https://fontawesome.com/search?o=r&m=free)
+- 图标名格式：`fa-solid fa-icon-name`
+- 在代码中使用时只需：`icon="icon-name"`

Yi.Ai.Vue3/index.html

@@ -17,6 +17,14 @@
   <meta name="viewport"
         content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
 
+  <!-- DNS 预解析和预连接 -->
+  <link rel="dns-prefetch" href="//api.yourdomain.com">
+  <link rel="preconnect" href="//api.yourdomain.com" crossorigin>
+
+  <!-- 预加载关键资源 -->
+  <link rel="preload" href="/src/main.ts" as="script" crossorigin>
+  <link rel="modulepreload" href="/src/main.ts">
+
 
   <style>
     /* 全局样式 */
@@ -112,16 +120,172 @@
 <body>
 <!-- 加载动画容器 -->
 <div id="yixinai-loader" class="loader-container">
-  <div class="loader-title">意心Ai 3.4</div>
+  <div class="loader-title">%APP_FULL_NAME%</div>
   <div class="loader-subtitle">海外地址，仅首次访问预计加载约10秒，无需梯子</div>
   <div class="loader-logo">
     <div class="pulse-box"></div>
   </div>
-
+  <div class="loader-progress-bar">
+    <div id="loader-progress" class="loader-progress"></div>
+  </div>
+  <div id="loader-text" class="loader-text" style="font-size: 0.875rem; margin-top: 0.5rem; color: #666;">加载中...</div>
 </div>
 <div id="app"></div>
 
+<script>
+  // 资源加载进度跟踪 - 增强版
+  (function() {
+    const progressBar = document.getElementById('loader-progress');
+    const loaderText = document.getElementById('loader-text');
+    const loader = document.getElementById('yixinai-loader');
 
+    let progress = 0;
+    let resourcesLoaded = false;
+    let vueAppMounted = false;
+    let appRendered = false;
+
+    // 更新进度条
+    function updateProgress(value, text) {
+      progress = Math.min(value, 99);
+      if (progressBar) progressBar.style.width = progress.toFixed(1) + '%';
+      if (loaderText) loaderText.textContent = text;
+    }
+
+    // 阶段管理
+    const stages = {
+      init: { weight: 15, name: '初始化' },
+      resources: { weight: 35, name: '加载资源' },
+      scripts: { weight: 25, name: '执行脚本' },
+      render: { weight: 15, name: '渲染页面' },
+      complete: { weight: 10, name: '启动应用' }
+    };
+
+    let completedStages = new Set();
+    let currentStage = 'init';
+
+    function calculateProgress() {
+      let totalProgress = 0;
+      for (const [key, stage] of Object.entries(stages)) {
+        if (completedStages.has(key)) {
+          totalProgress += stage.weight;
+        } else if (key === currentStage) {
+          // 当前阶段完成一部分
+          totalProgress += stage.weight * 0.5;
+        }
+      }
+      return Math.min(totalProgress, 99);
+    }
+
+    // 阶段完成
+    function completeStage(stageName, nextStage) {
+      completedStages.add(stageName);
+      currentStage = nextStage || stageName;
+      const stage = stages[stageName];
+      updateProgress(calculateProgress(), stage ? `${stage.name}完成` : '加载中...');
+    }
+
+    // 监听资源加载 - 使用更可靠的方式
+    const resourceTimings = [];
+    const observer = new PerformanceObserver((list) => {
+      const entries = list.getEntries();
+      resourceTimings.push(...entries);
+
+      // 统计未完成资源
+      const pendingResources = performance.getEntriesByType('resource')
+        .filter(r => !r.responseEnd || r.responseEnd === 0).length;
+
+      if (pendingResources === 0 && resourceTimings.length > 0) {
+        completeStage('resources', 'scripts');
+      } else {
+        updateProgress(calculateProgress(), `加载资源中... (${resourceTimings.length} 已加载)`);
+      }
+    });
+
+    try {
+      observer.observe({ entryTypes: ['resource'] });
+    } catch (e) {
+      // 降级处理
+    }
+
+    // 初始进度
+    let initProgress = 0;
+    function simulateInitProgress() {
+      if (initProgress < stages.init.weight) {
+        initProgress += 1;
+        updateProgress(initProgress, '正在初始化...');
+        if (initProgress < stages.init.weight) {
+          setTimeout(simulateInitProgress, 30);
+        } else {
+          completeStage('init', 'resources');
+        }
+      }
+    }
+    simulateInitProgress();
+
+    // 页面资源加载完成
+    window.addEventListener('load', () => {
+      completeStage('resources', 'scripts');
+      resourcesLoaded = true;
+
+      // 给脚本执行时间
+      setTimeout(() => {
+        completeStage('scripts', 'render');
+      }, 300);
+
+      checkAndHideLoader();
+    });
+
+    // 暴露全局方法供 Vue 应用调用 - 分阶段调用
+    window.__hideAppLoader = function(stage) {
+      if (stage === 'mounted') {
+        vueAppMounted = true;
+        completeStage('scripts', 'render');
+      } else if (stage === 'rendered') {
+        appRendered = true;
+        completeStage('render', 'complete');
+      }
+      checkAndHideLoader();
+    };
+
+    // 检查是否可以隐藏加载动画
+    function checkAndHideLoader() {
+      // 需要满足：资源加载完成、Vue 挂载、页面渲染完成
+      if (resourcesLoaded && vueAppMounted && appRendered) {
+        completeStage('complete', '');
+        updateProgress(100, '加载完成');
+
+        // 确保最小显示时间，避免闪烁
+        const minDisplayTime = 1000;
+        const elapsed = Date.now() - startTime;
+        const remaining = Math.max(0, minDisplayTime - elapsed);
+
+        setTimeout(() => {
+          if (loader) {
+            loader.style.opacity = '0';
+            loader.style.transition = 'opacity 0.5s ease';
+            setTimeout(() => {
+              loader.remove();
+              delete window.__hideAppLoader;
+            }, 500);
+          }
+        }, remaining);
+      }
+    }
+
+    const startTime = Date.now();
+
+    // 超时保护：最多显示 30 秒
+    setTimeout(() => {
+      if (loader && loader.parentNode) {
+        console.warn('加载超时，强制隐藏加载动画');
+        vueAppMounted = true;
+        resourcesLoaded = true;
+        appRendered = true;
+        checkAndHideLoader();
+      }
+    }, 60000);
+  })();
+</script>
 
 <script type="module" src="/src/main.ts"></script>
 </body>

Yi.Ai.Vue3/package.json

@@ -34,38 +34,37 @@
     "@floating-ui/core": "^1.7.2",
     "@floating-ui/dom": "^1.7.2",
     "@floating-ui/vue": "^1.1.7",
+    "@fortawesome/fontawesome-svg-core": "^7.1.0",
+    "@fortawesome/free-solid-svg-icons": "^7.1.0",
+    "@fortawesome/vue-fontawesome": "^3.1.3",
     "@jsonlee_12138/enum": "^1.0.4",
+    "@shikijs/transformers": "^3.7.0",
     "@vueuse/core": "^13.5.0",
     "@vueuse/integrations": "^13.5.0",
+    "chatarea": "^6.0.3",
     "date-fns": "^2.30.0",
+    "deepmerge": "^4.3.1",
+    "dompurify": "^3.2.6",
     "driver.js": "^1.3.6",
     "echarts": "^6.0.0",
     "element-plus": "^2.10.4",
     "fingerprintjs": "^0.5.3",
+    "github-markdown-css": "^5.8.1",
+    "highlight.js": "^11.11.1",
     "hook-fetch": "^2.0.4-beta.1",
+    "lodash": "^4.17.21",
     "lodash-es": "^4.17.21",
     "mammoth": "^1.11.0",
+    "marked": "^17.0.1",
+    "mermaid": "11.12.0",
     "nprogress": "^0.2.0",
     "pdfjs-dist": "^5.4.449",
     "pinia": "^3.0.3",
     "pinia-plugin-persistedstate": "^4.4.1",
-    "qrcode": "^1.5.4",
-    "radash": "^12.1.1",
-    "reset-css": "^5.0.2",
-    "vue": "^3.5.17",
-    "vue-element-plus-x": "1.3.7",
-    "vue-router": "4",
-    "xlsx": "^0.18.5",
-    "@shikijs/transformers": "^3.7.0",
-    "chatarea": "^6.0.3",
-    "deepmerge": "^4.3.1",
-    "dompurify": "^3.2.6",
-    "github-markdown-css": "^5.8.1",
-    "highlight.js": "^11.11.1",
-    "lodash": "^4.17.21",
-    "mermaid": "11.12.0",
     "prismjs": "^1.30.0",
     "property-information": "^7.1.0",
+    "qrcode": "^1.5.4",
+    "radash": "^12.1.1",
     "rehype-katex": "^7.0.1",
     "rehype-raw": "^7.0.0",
     "rehype-sanitize": "^6.0.0",
@@ -74,46 +73,21 @@
     "remark-math": "^6.0.0",
     "remark-parse": "^11.0.0",
     "remark-rehype": "^11.1.2",
+    "reset-css": "^5.0.2",
     "shiki": "^3.7.0",
     "ts-md5": "^2.0.1",
     "unified": "^11.0.5",
-    "unist-util-visit": "^5.0.0"
+    "unist-util-visit": "^5.0.0",
+    "vue": "^3.5.17",
+    "vue-element-plus-x": "1.3.7",
+    "vue-router": "4",
+    "xlsx": "^0.18.5"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^4.16.2",
     "@changesets/cli": "^2.29.5",
-    "@commitlint/config-conventional": "^19.8.1",
-    "@types/fingerprintjs__fingerprintjs": "^3.0.2",
-    "@vitejs/plugin-vue": "^6.0.0",
-    "@vue/tsconfig": "^0.7.0",
-    "commitlint": "^19.8.1",
-    "cz-git": "^1.12.0",
-    "eslint": "^9.31.0",
-    "husky": "^9.1.7",
-    "lint-staged": "^16.1.2",
-    "postcss": "8.4.31",
-    "postcss-html": "1.5.0",
-    "prettier": "^3.6.2",
-    "rollup-plugin-visualizer": "^6.0.3",
-    "sass-embedded": "^1.89.2",
-    "stylelint": "^16.21.1",
-    "stylelint-config-html": "^1.1.0",
-    "stylelint-config-recess-order": "^7.1.0",
-    "stylelint-config-recommended-scss": "^15.0.1",
-    "stylelint-config-recommended-vue": "^1.6.1",
-    "stylelint-config-standard": "^38.0.0",
-    "stylelint-config-standard-scss": "^15.0.1",
-    "typescript": "~5.8.3",
-    "typescript-api-pro": "^0.0.7",
-    "unocss": "66.3.3",
-    "unplugin-auto-import": "^19.3.0",
-    "unplugin-vue-components": "^28.8.0",
-    "vite": "^6.3.5",
-    "vite-plugin-compression": "^0.5.1",
-    "vite-plugin-env-typed": "^0.0.2",
-    "vite-plugin-svg-icons": "^2.0.1",
-    "vue-tsc": "^3.0.1",
     "@chromatic-com/storybook": "^3.2.7",
+    "@commitlint/config-conventional": "^19.8.1",
     "@jsonlee_12138/markdown-it-mermaid": "0.0.6",
     "@storybook/addon-essentials": "^8.6.14",
     "@storybook/addon-onboarding": "^8.6.14",
@@ -127,22 +101,52 @@
     "@storybook/vue3": "^8.6.14",
     "@storybook/vue3-vite": "^8.6.14",
     "@types/dom-speech-recognition": "^0.0.4",
+    "@types/fingerprintjs__fingerprintjs": "^3.0.2",
     "@types/fs-extra": "^11.0.4",
     "@types/markdown-it": "^14.1.2",
     "@types/prismjs": "^1.26.5",
+    "@vitejs/plugin-vue": "^6.0.0",
     "@vitest/browser": "^3.2.4",
     "@vitest/coverage-v8": "^3.2.4",
+    "@vue/tsconfig": "^0.7.0",
+    "commitlint": "^19.8.1",
+    "cz-git": "^1.12.0",
+    "eslint": "^9.31.0",
     "esno": "^4.8.0",
     "fast-glob": "^3.3.3",
+    "husky": "^9.1.7",
+    "lint-staged": "^16.1.2",
     "playwright": "^1.53.2",
+    "postcss": "8.4.31",
+    "postcss-html": "1.5.0",
+    "prettier": "^3.6.2",
     "rimraf": "^6.0.1",
+    "rollup-plugin-visualizer": "^6.0.3",
     "sass": "^1.89.2",
+    "sass-embedded": "^1.89.2",
     "storybook": "^8.6.14",
     "storybook-dark-mode": "^4.0.2",
+    "stylelint": "^16.21.1",
+    "stylelint-config-html": "^1.1.0",
+    "stylelint-config-recess-order": "^7.1.0",
+    "stylelint-config-recommended-scss": "^15.0.1",
+    "stylelint-config-recommended-vue": "^1.6.1",
+    "stylelint-config-standard": "^38.0.0",
+    "stylelint-config-standard-scss": "^15.0.1",
     "terser": "^5.43.1",
+    "typescript": "~5.8.3",
+    "typescript-api-pro": "^0.0.7",
+    "unocss": "66.3.3",
+    "unplugin-auto-import": "^19.3.0",
+    "unplugin-vue-components": "^28.8.0",
+    "vite": "^6.3.5",
+    "vite-plugin-compression": "^0.5.1",
     "vite-plugin-dts": "^4.5.4",
+    "vite-plugin-env-typed": "^0.0.2",
     "vite-plugin-lib-inject-css": "^2.2.2",
-    "vitest": "^3.2.4"
+    "vite-plugin-svg-icons": "^2.0.1",
+    "vitest": "^3.2.4",
+    "vue-tsc": "^3.0.1"
   },
   "config": {
     "commitizen": {

Yi.Ai.Vue3/pnpm-lock.yaml

@@ -23,6 +23,15 @@ importers:
       '@floating-ui/vue':
         specifier: ^1.1.7
         version: 1.1.7(vue@3.5.17(typescript@5.8.3))
+      '@fortawesome/fontawesome-svg-core':
+        specifier: ^7.1.0
+        version: 7.1.0
+      '@fortawesome/free-solid-svg-icons':
+        specifier: ^7.1.0
+        version: 7.1.0
+      '@fortawesome/vue-fontawesome':
+        specifier: ^3.1.3
+        version: 3.1.3(@fortawesome/fontawesome-svg-core@7.1.0)(vue@3.5.17(typescript@5.8.3))
       '@jsonlee_12138/enum':
         specifier: ^1.0.4
         version: 1.0.4
@@ -77,6 +86,9 @@ importers:
       mammoth:
         specifier: ^1.11.0
         version: 1.11.0
+      marked:
+        specifier: ^17.0.1
+        version: 17.0.1
       mermaid:
         specifier: 11.12.0
         version: 11.12.0
@@ -1103,6 +1115,24 @@ packages:
   '@floating-ui/vue@1.1.7':
     resolution: {integrity: sha512-idmAtbAIigGXN2SI5gItiXYBYtNfDTP9yIiObxgu13dgtG7ARCHlNfnR29GxP4LI4o13oiwsJ8wVgghj1lNqcw==}
 
+  '@fortawesome/fontawesome-common-types@7.1.0':
+    resolution: {integrity: sha512-l/BQM7fYntsCI//du+6sEnHOP6a74UixFyOYUyz2DLMXKx+6DEhfR3F2NYGE45XH1JJuIamacb4IZs9S0ZOWLA==}
+    engines: {node: '>=6'}
+
+  '@fortawesome/fontawesome-svg-core@7.1.0':
+    resolution: {integrity: sha512-fNxRUk1KhjSbnbuBxlWSnBLKLBNun52ZBTcs22H/xEEzM6Ap81ZFTQ4bZBxVQGQgVY0xugKGoRcCbaKjLQ3XZA==}
+    engines: {node: '>=6'}
+
+  '@fortawesome/free-solid-svg-icons@7.1.0':
+    resolution: {integrity: sha512-Udu3K7SzAo9N013qt7qmm22/wo2hADdheXtBfxFTecp+ogsc0caQNRKEb7pkvvagUGOpG9wJC1ViH6WXs8oXIA==}
+    engines: {node: '>=6'}
+
+  '@fortawesome/vue-fontawesome@3.1.3':
+    resolution: {integrity: sha512-OHHUTLPEzdwP8kcYIzhioUdUOjZ4zzmi+midwa4bqscza4OJCOvTKJEHkXNz8PgZ23kWci1HkKVX0bm8f9t9gQ==}
+    peerDependencies:
+      '@fortawesome/fontawesome-svg-core': ~1 || ~6 || ~7
+      vue: '>= 3.0.0 < 4'
+
   '@humanfs/core@0.19.1':
     resolution: {integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==}
     engines: {node: '>=18.18.0'}
@@ -4860,7 +4890,12 @@ packages:
     resolution: {integrity: sha512-wiYz4+JrLyb/DqW2hkFJxP7Vd7JuTDm77fvbM8VfEQdmSMqcImWeeRbHwZjBjIFki/VaMK2BhFi7oUUZeM5bqw==}
 
   marked@16.4.2:
-    resolution: {integrity: sha512-TI3V8YYWvkVf3KJe1dRkpnjs68JUPyEa5vjKrp1XEEJUAOaQc+Qj+L1qWbPd0SJuAdQkFU0h73sXXqwDYxsiDA==}
+    resolution: {integrity: sha512-TI3V8YYWvkVf3KJe1dRkpnjs68JUPyEa5vjKrp1XEEJUAOaQc+Qj+L1qWbPd0SJuAdQkFU0h73sXXqwDYxsiDA==, tarball: https://registry.npmmirror.com/marked/-/marked-16.4.2.tgz}
+    engines: {node: '>= 20'}
+    hasBin: true
+
+  marked@17.0.1:
+    resolution: {integrity: sha512-boeBdiS0ghpWcSwoNm/jJBwdpFaMnZWRzjA6SkUMYb40SVaN1x7mmfGKp0jvexGcx+7y2La5zRZsYFZI6Qpypg==, tarball: https://registry.npmmirror.com/marked/-/marked-17.0.1.tgz}
     engines: {node: '>= 20'}
     hasBin: true
 
@@ -6887,8 +6922,8 @@ packages:
   vue-component-type-helpers@2.2.12:
     resolution: {integrity: sha512-YbGqHZ5/eW4SnkPNR44mKVc6ZKQoRs/Rux1sxC6rdwXb4qpbOSYfDr9DsTHolOTGmIKgM9j141mZbBeg05R1pw==}
 
-  vue-component-type-helpers@3.2.3:
-    resolution: {integrity: sha512-lpJTa8a+12Cgy/n5OdlQTzQhSWOCu+6zQoNFbl3KYxwAoB95mYIgMLKEYMvQykPJ2ucBDjJJISdIBHc1d9Hd3w==}
+  vue-component-type-helpers@3.2.4:
+    resolution: {integrity: sha512-05lR16HeZDcDpB23ku5b5f1fBOoHqFnMiKRr2CiEvbG5Ux4Yi0McmQBOET0dR0nxDXosxyVqv67q6CzS3AK8rw==}
 
   vue-demi@0.14.10:
     resolution: {integrity: sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==}
@@ -7830,6 +7865,21 @@ snapshots:
       - '@vue/composition-api'
       - vue
 
+  '@fortawesome/fontawesome-common-types@7.1.0': {}
+
+  '@fortawesome/fontawesome-svg-core@7.1.0':
+    dependencies:
+      '@fortawesome/fontawesome-common-types': 7.1.0
+
+  '@fortawesome/free-solid-svg-icons@7.1.0':
+    dependencies:
+      '@fortawesome/fontawesome-common-types': 7.1.0
+
+  '@fortawesome/vue-fontawesome@3.1.3(@fortawesome/fontawesome-svg-core@7.1.0)(vue@3.5.17(typescript@5.8.3))':
+    dependencies:
+      '@fortawesome/fontawesome-svg-core': 7.1.0
+      vue: 3.5.17(typescript@5.8.3)
+
   '@humanfs/core@0.19.1': {}
 
   '@humanfs/node@0.16.6':
@@ -8613,7 +8663,7 @@ snapshots:
       ts-dedent: 2.2.0
       type-fest: 2.19.0
       vue: 3.5.17(typescript@5.8.3)
-      vue-component-type-helpers: 3.2.3
+      vue-component-type-helpers: 3.2.4
 
   '@stylistic/eslint-plugin@5.2.0(eslint@9.31.0(jiti@2.4.2))':
     dependencies:
@@ -12192,6 +12242,8 @@ snapshots:
 
   marked@16.4.2: {}
 
+  marked@17.0.1: {}
+
   math-intrinsics@1.1.0: {}
 
   mathml-tag-names@2.1.3: {}
@@ -14695,7 +14747,7 @@ snapshots:
 
   vue-component-type-helpers@2.2.12: {}
 
-  vue-component-type-helpers@3.2.3: {}
+  vue-component-type-helpers@3.2.4: {}
 
   vue-demi@0.14.10(vue@3.5.17(typescript@5.8.3)):
     dependencies:

Yi.Ai.Vue3/src/api/announcement/index.ts

@@ -1,5 +1,14 @@
-import type { AnnouncementLogDto } from './types';
-import { get } from '@/utils/request';
+import type {
+  AnnouncementLogDto,
+  AnnouncementDto,
+  AnnouncementCreateInput,
+  AnnouncementUpdateInput,
+  AnnouncementGetListInput,
+  PagedResultDto,
+} from './types';
+import { del, get, post, put } from '@/utils/request';
+
+// ==================== 前端首页用 ====================
 
 /**
  * 获取系统公告和活动数据
@@ -9,4 +18,49 @@ import { get } from '@/utils/request';
 export function getSystemAnnouncements() {
   return get<AnnouncementLogDto[]>('/announcement').json();
 }
+
+// ==================== 后台管理用 ====================
+
+// 获取公告列表
+export function getList(params?: AnnouncementGetListInput) {
+  const queryParams = new URLSearchParams();
+  if (params?.searchKey) {
+    queryParams.append('SearchKey', params.searchKey);
+  }
+  if (params?.skipCount !== undefined) {
+    queryParams.append('SkipCount', params.skipCount.toString());
+  }
+  if (params?.maxResultCount !== undefined) {
+    queryParams.append('MaxResultCount', params.maxResultCount.toString());
+  }
+  if (params?.type !== undefined) {
+    queryParams.append('Type', params.type.toString());
+  }
+
+  const queryString = queryParams.toString();
+  const url = queryString ? `/announcement/list?${queryString}` : '/announcement/list';
+
+  return get<PagedResultDto<AnnouncementDto>>(url).json();
+}
+
+// 根据ID获取公告
+export function getById(id: string) {
+  return get<AnnouncementDto>(`/announcement/${id}`).json();
+}
+
+// 创建公告
+export function create(data: AnnouncementCreateInput) {
+  return post<AnnouncementDto>('/announcement', data).json();
+}
+
+// 更新公告
+export function update(data: AnnouncementUpdateInput) {
+  return put<AnnouncementDto>('/announcement', data).json();
+}
+
+// 删除公告
+export function deleteById(id: string) {
+  return del(`/announcement/${id}`).json();
+}
+
 export * from './types';

Yi.Ai.Vue3/src/api/announcement/types.ts

@@ -1,4 +1,10 @@
-// 公告类型（对应后端 AnnouncementTypeEnum）
+// 公告类型枚举（对应后端 AnnouncementTypeEnum）
+export enum AnnouncementTypeEnum {
+  Activity = 1,
+  System = 2,
+}
+
+// 公告类型（兼容旧代码）
 export type AnnouncementType = 'Activity' | 'System'
 
 // 公告DTO（对应后端 AnnouncementLogDto）
@@ -16,3 +22,58 @@ export interface AnnouncementLogDto {
   /** 公告类型（系统、活动） */
   type: AnnouncementType
 }
+
+// ==================== 后台管理用 DTO ====================
+
+// 公告 DTO（后台管理列表）
+export interface AnnouncementDto {
+  id: string;
+  title: string;
+  content: string[];
+  remark?: string;
+  imageUrl?: string;
+  startTime: string;
+  endTime?: string;
+  type: AnnouncementTypeEnum;
+  url?: string;
+  creationTime: string;
+}
+
+// 创建公告输入
+export interface AnnouncementCreateInput {
+  title: string;
+  content: string[];
+  remark?: string;
+  imageUrl?: string;
+  startTime: string;
+  endTime?: string;
+  type: AnnouncementTypeEnum;
+  url?: string;
+}
+
+// 更新公告输入
+export interface AnnouncementUpdateInput {
+  id: string;
+  title: string;
+  content: string[];
+  remark?: string;
+  imageUrl?: string;
+  startTime: string;
+  endTime?: string;
+  type: AnnouncementTypeEnum;
+  url?: string;
+}
+
+// 获取公告列表输入
+export interface AnnouncementGetListInput {
+  searchKey?: string;
+  skipCount?: number;
+  maxResultCount?: number;
+  type?: AnnouncementTypeEnum;
+}
+
+// 分页结果
+export interface PagedResultDto<T> {
+  items: T[];
+  totalCount: number;
+}

Yi.Ai.Vue3/src/api/chat/index.ts

@@ -1,5 +1,19 @@
 import type { ChatMessageVo, GetChatListParams, SendDTO } from './types';
-import { get, post } from '@/utils/request';
+import { del, get, post } from '@/utils/request';
+
+// 删除消息接口
+export interface DeleteMessageParams {
+  ids: (number | string)[];
+  isDeleteSubsequent?: boolean;
+}
+
+export function deleteMessages(data: DeleteMessageParams) {
+  const idsQuery = data.ids.map(id => `ids=${encodeURIComponent(id)}`).join('&');
+  const subsequentQuery = data.isDeleteSubsequent !== undefined ? `isDeleteSubsequent=${data.isDeleteSubsequent}` : '';
+  const query = [idsQuery, subsequentQuery].filter(Boolean).join('&');
+  const url = `/message${query ? `?${query}` : ''}`;
+  return del<void>(url).json();
+}
 
 // 发送消息（旧接口）
 export function send(data: SendDTO) {

Yi.Ai.Vue3/src/api/chat/types.ts

@@ -125,7 +125,7 @@ export interface GetChatListParams {
   /**
    * 主键
    */
-  id?: number;
+  id?: number | string;
   /**
    * 排序的方向desc或者asc
    */
@@ -195,7 +195,7 @@ export interface ChatMessageVo {
   /**
    * 主键
    */
-  id?: number;
+  id?: number | string;
   /**
    * 模型名称
    */

Yi.Ai.Vue3/src/api/ranking/index.ts

@@ -0,0 +1,15 @@
+import type { RankingGetListInput, RankingItemDto } from './types';
+import { get } from '@/utils/request';
+
+// 获取排行榜列表（公开接口，无需登录）
+export function getRankingList(params?: RankingGetListInput) {
+  const queryParams = new URLSearchParams();
+  if (params?.type !== undefined) {
+    queryParams.append('Type', params.type.toString());
+  }
+
+  const queryString = queryParams.toString();
+  const url = queryString ? `/ranking/list?${queryString}` : '/ranking/list';
+
+  return get<RankingItemDto[]>(url).json();
+}

Yi.Ai.Vue3/src/api/ranking/types.ts

@@ -0,0 +1,21 @@
+// 排行榜类型枚举
+export enum RankingTypeEnum {
+  Model = 0,
+  Tool = 1,
+}
+
+// 排行榜项
+export interface RankingItemDto {
+  id: string;
+  name: string;
+  description: string;
+  logoUrl?: string;
+  score: number;
+  provider: string;
+  type: RankingTypeEnum;
+}
+
+// 排行榜查询参数
+export interface RankingGetListInput {
+  type?: RankingTypeEnum;
+}

Yi.Ai.Vue3/src/components/FontAwesomeIcon/demo.vue

@@ -0,0 +1,250 @@
+<script setup lang="ts">
+/**
+ * FontAwesome 图标演示组件
+ * 展示不同大小和样式的图标
+ */
+
+const commonIcons = [
+  'check',
+  'xmark',
+  'plus',
+  'minus',
+  'trash',
+  'pen-to-square',
+  'magnifying-glass',
+  'rotate-right',
+  'download',
+  'upload',
+  'user',
+  'gear',
+  'eye',
+  'eye-slash',
+  'lock',
+  'folder',
+  'file',
+  'image',
+  'comment',
+  'bell',
+  'heart',
+  'star',
+  'clock',
+  'calendar',
+  'share-nodes',
+];
+
+const sizes = ['xs', 'sm', 'lg', 'xl', '2x'] as const;
+</script>
+
+<template>
+  <div class="font-awesome-demo">
+    <h2>FontAwesome 图标演示</h2>
+
+    <section>
+      <h3>基础图标</h3>
+      <div class="icon-grid">
+        <div v-for="icon in commonIcons" :key="icon" class="icon-item">
+          <FontAwesomeIcon :icon="icon" />
+          <span>{{ icon }}</span>
+        </div>
+      </div>
+    </section>
+
+    <section>
+      <h3>不同尺寸</h3>
+      <div class="size-demo">
+        <div v-for="size in sizes" :key="size" class="size-item">
+          <FontAwesomeIcon icon="star" :size="size" />
+          <span>{{ size }}</span>
+        </div>
+      </div>
+    </section>
+
+    <section>
+      <h3>动画效果</h3>
+      <div class="animation-demo">
+        <div class="anim-item">
+          <FontAwesomeIcon icon="spinner" spin />
+          <span>spin</span>
+        </div>
+        <div class="anim-item">
+          <FontAwesomeIcon icon="circle-notch" spin />
+          <span>circle-notch spin</span>
+        </div>
+        <div class="anim-item">
+          <FontAwesomeIcon icon="heart" pulse />
+          <span>pulse</span>
+        </div>
+      </div>
+    </section>
+
+    <section>
+      <h3>旋转</h3>
+      <div class="rotation-demo">
+        <div class="rot-item">
+          <FontAwesomeIcon icon="arrow-up" :rotation="0" />
+          <span>0°</span>
+        </div>
+        <div class="rot-item">
+          <FontAwesomeIcon icon="arrow-up" :rotation="90" />
+          <span>90°</span>
+        </div>
+        <div class="rot-item">
+          <FontAwesomeIcon icon="arrow-up" :rotation="180" />
+          <span>180°</span>
+        </div>
+        <div class="rot-item">
+          <FontAwesomeIcon icon="arrow-up" :rotation="270" />
+          <span>270°</span>
+        </div>
+      </div>
+    </section>
+
+    <section>
+      <h3>实际应用示例</h3>
+      <div class="examples">
+        <button class="example-btn">
+          <FontAwesomeIcon icon="magnifying-glass" />
+          搜索
+        </button>
+        <button class="example-btn primary">
+          <FontAwesomeIcon icon="check" />
+          确认
+        </button>
+        <button class="example-btn danger">
+          <FontAwesomeIcon icon="trash" />
+          删除
+        </button>
+        <button class="example-btn">
+          <FontAwesomeIcon icon="download" />
+          下载
+        </button>
+        <button class="example-btn">
+          <FontAwesomeIcon icon="share-nodes" />
+          分享
+        </button>
+      </div>
+    </section>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.font-awesome-demo {
+  padding: 20px;
+  max-width: 1200px;
+  margin: 0 auto;
+
+  h2 {
+    margin-bottom: 30px;
+    color: var(--el-text-color-primary);
+  }
+
+  h3 {
+    margin: 30px 0 15px;
+    color: var(--el-text-color-regular);
+    border-bottom: 1px solid var(--el-border-color);
+    padding-bottom: 10px;
+  }
+
+  section {
+    margin-bottom: 40px;
+  }
+
+  .icon-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+    gap: 15px;
+
+    .icon-item {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      padding: 15px;
+      border: 1px solid var(--el-border-color);
+      border-radius: 8px;
+      transition: all 0.3s;
+
+      &:hover {
+        border-color: var(--el-color-primary);
+        background-color: var(--el-color-primary-light-9);
+        transform: translateY(-2px);
+      }
+
+      span {
+        margin-top: 8px;
+        font-size: 12px;
+        color: var(--el-text-color-secondary);
+      }
+    }
+  }
+
+  .size-demo,
+  .animation-demo,
+  .rotation-demo {
+    display: flex;
+    gap: 30px;
+    flex-wrap: wrap;
+
+    .size-item,
+    .anim-item,
+    .rot-item {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      padding: 20px;
+      border: 1px solid var(--el-border-color);
+      border-radius: 8px;
+      min-width: 80px;
+
+      span {
+        margin-top: 10px;
+        font-size: 12px;
+        color: var(--el-text-color-secondary);
+      }
+    }
+  }
+
+  .examples {
+    display: flex;
+    gap: 15px;
+    flex-wrap: wrap;
+
+    .example-btn {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 10px 20px;
+      border: 1px solid var(--el-border-color);
+      border-radius: 6px;
+      background: var(--el-bg-color);
+      color: var(--el-text-color-primary);
+      cursor: pointer;
+      transition: all 0.3s;
+
+      &:hover {
+        border-color: var(--el-color-primary);
+        color: var(--el-color-primary);
+      }
+
+      &.primary {
+        background-color: var(--el-color-primary);
+        color: white;
+        border-color: var(--el-color-primary);
+
+        &:hover {
+          background-color: var(--el-color-primary-light-3);
+        }
+      }
+
+      &.danger {
+        background-color: var(--el-color-danger);
+        color: white;
+        border-color: var(--el-color-danger);
+
+        &:hover {
+          background-color: var(--el-color-danger-light-3);
+        }
+      }
+    }
+  }
+}
+</style>

Yi.Ai.Vue3/src/components/FontAwesomeIcon/index.ts

@@ -0,0 +1,3 @@
+export { default as FontAwesomeIcon } from './index.vue';
+export { default as FontAwesomeDemo } from './demo.vue';
+export { getFontAwesomeIcon, iconMapping } from '@/utils/icon-mapping';

Yi.Ai.Vue3/src/components/FontAwesomeIcon/index.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+
+interface Props {
+  /** FontAwesome 图标名称（不含 fa- 前缀） */
+  icon: string;
+  /** 图标大小 */
+  size?: 'xs' | 'sm' | 'lg' | 'xl' | '2x' | '3x' | '4x' | '5x';
+  /** 旋转动画 */
+  spin?: boolean;
+  /** 脉冲动画 */
+  pulse?: boolean;
+  /** 旋转角度 */
+  rotation?: 0 | 90 | 180 | 270;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: undefined,
+  spin: false,
+  pulse: false,
+  rotation: undefined,
+});
+</script>
+
+<template>
+  <FontAwesomeIcon
+    :icon="`fa-solid fa-${icon}`"
+    :size="size"
+    :spin="spin"
+    :pulse="pulse"
+    :rotation="rotation"
+  />
+</template>

Yi.Ai.Vue3/src/components/MarkedMarkdown/index.vue

@@ -0,0 +1,748 @@
+<script setup lang="ts">
+import DOMPurify from 'dompurify';
+import { ElDrawer } from 'element-plus';
+import hljs from 'highlight.js';
+import { marked } from 'marked';
+import { storeToRefs } from 'pinia';
+import { computed, nextTick, onUnmounted, ref, watch } from 'vue';
+import { useDesignStore } from '@/stores';
+
+interface Props {
+  content: string;
+  theme?: 'light' | 'dark' | 'auto';
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  content: '',
+  theme: 'auto',
+});
+
+const designStore = useDesignStore();
+const { darkMode } = storeToRefs(designStore);
+const containerRef = ref<HTMLElement | null>(null);
+const renderedHtml = ref('');
+
+// 抽屉相关状态
+const drawerVisible = ref(false);
+const previewHtml = ref('');
+const iframeRef = ref<HTMLIFrameElement | null>(null);
+
+// 配置 marked
+marked.setOptions({
+  gfm: true,
+  breaks: true,
+});
+
+// 自定义渲染器
+const renderer = {
+  // 代码块渲染
+  code(token: { text: string; lang?: string }) {
+    const { text, lang } = token;
+    const language = lang && hljs.getLanguage(lang) ? lang : 'plaintext';
+    const validLanguage = hljs.getLanguage(language) ? language : 'plaintext';
+
+    let highlighted: string;
+    try {
+      highlighted = hljs.highlight(text, { language: validLanguage, ignoreIllegals: true }).value;
+    }
+    catch {
+      highlighted = hljs.highlightAuto(text).value;
+    }
+
+    const langLabel = lang || 'code';
+
+    // 生成行号
+    const lines = text.split('\n');
+    const lineNumbers = lines.map((_, i) => `<span class="line-number">${i + 1}</span>`).join('');
+
+    // 判断是否为HTML代码
+    const isHtml = lang?.toLowerCase() === 'html' || lang?.toLowerCase() === 'htm';
+
+    // 预览按钮（仅HTML显示）
+    const previewBtn = isHtml
+      ? `
+      <button class="preview-btn" data-html="${encodeURIComponent(text)}">
+        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
+          <circle cx="12" cy="12" r="3"></circle>
+        </svg>
+        <span>预览</span>
+      </button>
+    `
+      : '';
+
+    return `<div class="code-block-wrapper${isHtml ? ' is-html' : ''}">
+      <div class="code-block-header">
+        <span class="code-lang">${langLabel}</span>
+        <div class="code-block-actions">
+          ${previewBtn}
+          <button class="copy-btn" data-code="${encodeURIComponent(text)}">
+            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
+              <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
+            </svg>
+            <span>复制</span>
+          </button>
+        </div>
+      </div>
+      <div class="code-block-body">
+        <div class="line-numbers">${lineNumbers}</div>
+        <pre class="hljs"><code class="language-${validLanguage}">${highlighted}</code></pre>
+      </div>
+    </div>`;
+  },
+
+  // 行内代码
+  codespan(token: { text: string }) {
+    return `<code class="inline-code">${token.text}</code>`;
+  },
+
+  // 链接
+  link(token: { href: string; title?: string; text: string }) {
+    const { href, title, text } = token;
+    const titleAttr = title ? ` title="${title}"` : '';
+    return `<a href="${href}"${titleAttr} target="_blank" rel="noopener noreferrer">${text}</a>`;
+  },
+
+  // 图片
+  image(token: { href: string; title?: string; text: string }) {
+    const { href, title, text } = token;
+    const titleAttr = title ? ` title="${title}"` : '';
+    return `<img src="${href}" alt="${text}"${titleAttr} loading="lazy" class="markdown-image" />`;
+  },
+};
+
+marked.use({ renderer });
+
+// 防抖渲染，优化流式性能
+let renderTimer: ReturnType<typeof setTimeout> | null = null;
+let lastContent = '';
+const RENDER_DELAY = 16; // 约60fps
+
+function scheduleRender(content: string) {
+  if (renderTimer) {
+    clearTimeout(renderTimer);
+  }
+
+  renderTimer = setTimeout(() => {
+    renderContent(content);
+    renderTimer = null;
+  }, RENDER_DELAY);
+}
+
+// 渲染内容
+async function renderContent(content: string) {
+  if (!content) {
+    renderedHtml.value = '';
+    return;
+  }
+
+  // 如果内容没变化，跳过渲染
+  if (content === lastContent) {
+    return;
+  }
+  lastContent = content;
+
+  try {
+    let rawHtml = await marked.parse(content);
+    // 包装表格，添加 table-wrapper 以支持横向滚动
+    rawHtml = rawHtml.replace(/<table>/g, '<div class="table-wrapper"><table>');
+    rawHtml = rawHtml.replace(/<\/table>/g, '</table></div>');
+    // 使用 DOMPurify 清理 HTML，防止 XSS
+    renderedHtml.value = DOMPurify.sanitize(rawHtml, {
+      ADD_TAGS: ['iframe'],
+      ADD_ATTR: ['target', 'data-code', 'data-html'],
+    });
+
+    // 渲染后绑定按钮事件
+    nextTick(() => {
+      bindButtons();
+    });
+  }
+  catch (error) {
+    console.error('Markdown 渲染错误:', error);
+    renderedHtml.value = `<pre>${content}</pre>`;
+  }
+}
+
+// 绑定按钮事件
+function bindButtons() {
+  if (!containerRef.value)
+    return;
+
+  // 绑定复制按钮
+  const copyButtons = containerRef.value.querySelectorAll('.copy-btn');
+  copyButtons.forEach((btn) => {
+    const newBtn = btn.cloneNode(true) as HTMLElement;
+    btn.parentNode?.replaceChild(newBtn, btn);
+
+    newBtn.addEventListener('click', async (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+
+      const code = decodeURIComponent(newBtn.getAttribute('data-code') || '');
+      try {
+        await navigator.clipboard.writeText(code);
+        const spanEl = newBtn.querySelector('span');
+        if (spanEl) {
+          const originalText = spanEl.textContent;
+          spanEl.textContent = '已复制';
+          newBtn.classList.add('copied');
+          setTimeout(() => {
+            spanEl.textContent = originalText;
+            newBtn.classList.remove('copied');
+          }, 2000);
+        }
+      }
+      catch (err) {
+        console.error('复制失败:', err);
+      }
+    });
+  });
+
+  // 绑定预览按钮
+  const previewButtons = containerRef.value.querySelectorAll('.preview-btn');
+  previewButtons.forEach((btn) => {
+    const newBtn = btn.cloneNode(true) as HTMLElement;
+    btn.parentNode?.replaceChild(newBtn, btn);
+
+    newBtn.addEventListener('click', (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+
+      const html = decodeURIComponent(newBtn.getAttribute('data-html') || '');
+      openHtmlPreview(html);
+    });
+  });
+}
+
+// 打开HTML预览抽屉
+function openHtmlPreview(html: string) {
+  // 检查是否是完整的HTML文档，如果不是则包装一下
+  let fullHtml = html;
+  if (!html.toLowerCase().includes('<!doctype') && !html.toLowerCase().includes('<html')) {
+    fullHtml = `<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <style>* { box-sizing: border-box; } body { margin: 0; padding: 16px; font-family: sans-serif; }</style>
+</head>
+<body>
+${html}
+</body>
+</html>`;
+  }
+  previewHtml.value = fullHtml;
+  drawerVisible.value = true;
+}
+
+// 监听主题变化
+const resolvedTheme = computed(() => {
+  if (props.theme === 'auto') {
+    // 从全局状态获取主题
+    return darkMode.value === 'light' ? 'light' : 'dark';
+  }
+  return props.theme;
+});
+
+// 监听内容变化
+watch(
+  () => props.content,
+  (newContent) => {
+    scheduleRender(newContent);
+  },
+  { immediate: true },
+);
+
+// 暴露方法供外部调用
+defineExpose({
+  refresh: () => renderContent(props.content),
+});
+
+// 清理定时器
+onUnmounted(() => {
+  if (renderTimer) {
+    clearTimeout(renderTimer);
+  }
+});
+</script>
+
+<template>
+  <div
+    ref="containerRef"
+    class="marked-markdown"
+    :class="[`theme-${resolvedTheme}`]"
+    v-html="renderedHtml"
+  />
+
+  <!-- HTML预览抽屉 -->
+  <ElDrawer
+    v-model="drawerVisible"
+    title="HTML 预览"
+    direction="rtl"
+    size="50%"
+    :append-to-body="true"
+    class="html-preview-drawer"
+  >
+    <div class="preview-container">
+      <iframe
+        ref="iframeRef"
+        class="preview-iframe"
+        :srcdoc="previewHtml"
+        sandbox="allow-scripts allow-modals allow-forms allow-popups allow-same-origin"
+      />
+    </div>
+  </ElDrawer>
+</template>
+
+<style lang="scss">
+.marked-markdown {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+  font-size: 15px;
+  line-height: 1.7;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  // 浅色主题
+  &.theme-light {
+    color: #24292f;
+
+    a {
+      color: #0969da;
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+
+    h1, h2, h3, h4, h5, h6 {
+      color: #24292f;
+      border-bottom-color: #d0d7de;
+    }
+
+    hr {
+      background-color: #d0d7de;
+    }
+
+    blockquote {
+      color: #57606a;
+      border-left-color: #d0d7de;
+    }
+
+    code.inline-code {
+      background-color: rgba(175, 184, 193, 0.2);
+      color: #24292f;
+    }
+
+    .code-block-wrapper {
+      background-color: #f6f8fa;
+      border: 1px solid #d0d7de;
+
+      .code-block-header {
+        background-color: #f6f8fa;
+        border-bottom-color: #d0d7de;
+
+        .code-lang {
+          color: #57606a;
+        }
+
+        .copy-btn,
+        .preview-btn {
+          color: #57606a;
+          &:hover {
+            color: #24292f;
+            background-color: #d0d7de;
+          }
+          &.copied {
+            color: #1a7f37;
+          }
+        }
+      }
+
+      .code-block-body {
+        .line-numbers {
+          background-color: #f6f8fa;
+          border-right: 1px solid #d0d7de;
+
+          .line-number {
+            color: #8c959f;
+          }
+        }
+      }
+
+      pre.hljs {
+        background-color: #f6f8fa;
+      }
+    }
+
+    table {
+      th {
+        background-color: #f6f8fa;
+      }
+      td, th {
+        border-color: #d0d7de;
+      }
+      tr:nth-child(2n) {
+        background-color: #f6f8fa;
+      }
+    }
+  }
+
+  // 通用样式
+  > *:first-child {
+    margin-top: 0 !important;
+  }
+
+  > *:last-child {
+    margin-bottom: 0 !important;
+  }
+
+  // 标题
+  h1, h2, h3, h4, h5, h6 {
+    margin-top: 24px;
+    margin-bottom: 16px;
+    font-weight: 600;
+    line-height: 1.25;
+  }
+
+  h1 {
+    font-size: 2em;
+    padding-bottom: 0.3em;
+    border-bottom: 1px solid;
+  }
+
+  h2 {
+    font-size: 1.5em;
+    padding-bottom: 0.3em;
+    border-bottom: 1px solid;
+  }
+
+  h3 {
+    font-size: 1.25em;
+  }
+
+  h4 {
+    font-size: 1em;
+  }
+
+  h5 {
+    font-size: 0.875em;
+  }
+
+  h6 {
+    font-size: 0.85em;
+  }
+
+  // 段落
+  p {
+    margin-top: 0;
+    margin-bottom: 16px;
+  }
+
+  // 列表
+  ul, ol {
+    padding-left: 2em;
+    margin-top: 0;
+    margin-bottom: 16px;
+  }
+
+  li {
+    margin-top: 0.25em;
+  }
+
+  li + li {
+    margin-top: 0.25em;
+  }
+
+  // 引用
+  blockquote {
+    margin: 0 0 16px 0;
+    padding: 0 1em;
+    border-left: 0.25em solid;
+
+    > :first-child {
+      margin-top: 0;
+    }
+
+    > :last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  // 分割线
+  hr {
+    height: 0.25em;
+    padding: 0;
+    margin: 24px 0;
+    border: 0;
+  }
+
+  // 行内代码
+  code.inline-code {
+    padding: 0.2em 0.4em;
+    margin: 0;
+    font-size: 85%;
+    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+    border-radius: 6px;
+  }
+
+  // 代码块
+  .code-block-wrapper {
+    margin: 16px 0;
+    border-radius: 8px;
+    overflow: hidden;
+
+    .code-block-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 8px 16px;
+      border-bottom: 1px solid;
+
+      .code-lang {
+        font-size: 12px;
+        font-weight: 500;
+        text-transform: uppercase;
+      }
+
+      .code-block-actions {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+
+      .copy-btn,
+      .preview-btn {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        padding: 4px 8px;
+        font-size: 12px;
+        background: transparent;
+        border: none;
+        border-radius: 4px;
+        cursor: pointer;
+        transition: all 0.2s ease;
+
+        svg {
+          flex-shrink: 0;
+        }
+      }
+    }
+
+    .code-block-body {
+      display: flex;
+      overflow-x: auto;
+
+      // 自定义滚动条样式
+      &::-webkit-scrollbar {
+        height: 6px;
+      }
+      &::-webkit-scrollbar-track {
+        background: transparent;
+      }
+      &::-webkit-scrollbar-thumb {
+        background-color: rgba(128, 128, 128, 0.4);
+        border-radius: 3px;
+        &:hover {
+          background-color: rgba(128, 128, 128, 0.6);
+        }
+      }
+
+      .line-numbers {
+        display: flex;
+        flex-direction: column;
+        padding: 16px 0;
+        text-align: right;
+        user-select: none;
+        flex-shrink: 0;
+
+        .line-number {
+          padding: 0 12px;
+          font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+          font-size: 14px;
+          //line-height: 21px;
+          height: 22px;
+          min-width: 40px;
+        }
+      }
+    }
+
+    pre.hljs {
+      margin: 0;
+      padding: 16px;
+      padding-left: 12px;
+      overflow-x: auto;
+      font-size: 14px;
+      line-height: 21px;
+      flex: 1;
+      white-space: pre;
+
+      code {
+        font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+        background: transparent;
+        padding: 0;
+        white-space: pre;
+      }
+    }
+  }
+
+  // 表格
+  .table-wrapper {
+    overflow-x: auto;
+    margin: 16px 0;
+  }
+
+  table {
+    border-spacing: 0;
+    border-collapse: collapse;
+    width: 100%;
+
+    th, td {
+      padding: 8px 16px;
+      border: 1px solid;
+    }
+
+    th {
+      font-weight: 600;
+      text-align: left;
+    }
+  }
+
+  // 图片
+  .markdown-image {
+    max-width: 100%;
+    height: auto;
+    border-radius: 8px;
+    margin: 8px 0;
+  }
+
+  // 强调
+  strong {
+    font-weight: 600;
+  }
+
+  em {
+    font-style: italic;
+  }
+
+  // 删除线
+  del {
+    text-decoration: line-through;
+  }
+
+  // 任务列表
+  input[type="checkbox"] {
+    margin-right: 0.5em;
+  }
+}
+
+// 深色主题代码高亮样式已移至 dark-theme.scss，使用 [data-theme="dark"] 选择器
+
+// highlight.js 浅色主题样式
+.marked-markdown.theme-light {
+  .hljs {
+    color: #24292f;
+  }
+  .hljs-comment,
+  .hljs-quote {
+    color: #6e7781;
+    font-style: italic;
+  }
+  .hljs-keyword,
+  .hljs-selector-tag,
+  .hljs-addition {
+    color: #cf222e;
+  }
+  .hljs-number,
+  .hljs-string,
+  .hljs-meta .hljs-meta-string,
+  .hljs-literal,
+  .hljs-doctag,
+  .hljs-regexp {
+    color: #0a3069;
+  }
+  .hljs-title,
+  .hljs-section,
+  .hljs-name,
+  .hljs-selector-id,
+  .hljs-selector-class {
+    color: #8250df;
+  }
+  .hljs-attribute,
+  .hljs-attr,
+  .hljs-variable,
+  .hljs-template-variable,
+  .hljs-class .hljs-title,
+  .hljs-type {
+    color: #0550ae;
+  }
+  .hljs-symbol,
+  .hljs-bullet,
+  .hljs-subst,
+  .hljs-meta,
+  .hljs-meta .hljs-keyword,
+  .hljs-selector-attr,
+  .hljs-selector-pseudo,
+  .hljs-link {
+    color: #953800;
+  }
+  .hljs-built_in,
+  .hljs-deletion {
+    color: #82071e;
+  }
+  .hljs-formula {
+    background-color: #f6f8fa;
+  }
+  .hljs-emphasis {
+    font-style: italic;
+  }
+  .hljs-strong {
+    font-weight: bold;
+  }
+}
+
+// HTML预览抽屉样式
+.html-preview-drawer {
+  .el-drawer__header {
+    margin-bottom: 0;
+    padding: 16px 20px;
+    border-bottom: 1px solid #e4e7ed;
+  }
+
+  .el-drawer__body {
+    padding: 0;
+    overflow: hidden;
+  }
+
+  .preview-container {
+    width: 100%;
+    height: 100%;
+    background-color: #fff;
+  }
+
+  .preview-iframe {
+    width: 100%;
+    height: 100%;
+    border: none;
+    background-color: #fff;
+  }
+
+}
+.marked-markdown .code-block-wrapper pre.hljs {
+  padding-bottom: 4px;
+
+  &::-webkit-scrollbar {
+    height: 6px;
+  }
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  &::-webkit-scrollbar-thumb {
+    background-color: rgba(128, 128, 128, 0.4);
+    border-radius: 3px;
+    &:hover {
+      background-color: rgba(128, 128, 128, 0.6);
+    }
+  }
+}
+</style>

Yi.Ai.Vue3/src/components/ModelSelect/index.vue

@@ -8,8 +8,10 @@ import { useModelStore } from '@/stores/modules/model';
 import { showProductPackage } from '@/utils/product-package.ts';
 import { isUserVip } from '@/utils/user';
 import { modelList as localModelList } from './modelData';
+import { useRouter } from 'vue-router';
 
 const modelStore = useModelStore();
+const router = useRouter();
 const { isMobile } = useResponsive();
 const dialogVisible = ref(false);
 const activeTab = ref('provider'); // 'provider' | 'api'
@@ -233,7 +235,7 @@ function handleModelClick(item: GetSessionListVO) {
 }
 
 function goToModelLibrary() {
-  window.location.href = '/model-library';
+  router.push('/model-library');
 }
 
 /* -------------------------------

Yi.Ai.Vue3/src/components/ProductPackage/ActivationGuide.vue

@@ -1,9 +1,15 @@
 <script setup lang="ts">
+import { useRouter } from 'vue-router';
+
 const emit = defineEmits(['close']);
+const router = useRouter();
 
 function goToActivation() {
   emit('close');
-  window.location.href = '/console/activation';
+  // 使用 router 进行跳转，避免完整页面刷新
+  setTimeout(() => {
+    router.push('/console/activation');
+  }, 300); // 等待对话框关闭动画完成
 }
 </script>
 

Yi.Ai.Vue3/src/components/ProductPackage/PackageTab.vue

@@ -1,10 +1,13 @@
 <script setup lang="ts">
 import { ArrowRight, Box, CircleCheck, Loading, Right, Service } from '@element-plus/icons-vue';
 import { computed } from 'vue';
+import { useRouter } from 'vue-router';
 import { promotionConfig } from '@/config/constants.ts';
 import { useUserStore } from '@/stores';
 import { showContactUs } from '@/utils/contact-us.ts';
 
+const router = useRouter();
+
 interface PackageItem {
   id: number;
   name: string;
@@ -66,7 +69,7 @@ function contactService() {
 }
 
 function goToModelLibrary() {
-  window.location.href = '/model-library';
+  router.push('/model-library');
 }
 
 const selectedPackage = computed(() => {

Yi.Ai.Vue3/src/components/ProductPackage/index.vue

@@ -2,15 +2,17 @@
 import type { GoodsItem } from '@/api/pay';
 import { ElMessage } from 'element-plus';
 import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import { useRouter } from 'vue-router';
 import { createOrder, getOrderStatus } from '@/api';
 import { getGoodsList, GoodsCategoryType } from '@/api/pay';
 import ProductPage from '@/pages/products/index.vue';
 import { useUserStore } from '@/stores';
-import NewbieGuide from './NewbieGuide.vue';
 import ActivationGuide from './ActivationGuide.vue';
+import NewbieGuide from './NewbieGuide.vue';
 import PackageTab from './PackageTab.vue';
 
 const emit = defineEmits(['close']);
+const router = useRouter();
 
 // 商品数据类型定义
 interface PackageItem {
@@ -171,7 +173,7 @@ const benefitsData2 = {
   qy: [
     { name: '需先成为意心会员后方可购买使用', value: '' },
     { name: '意心会员过期后，尊享Token包会临时冻结', value: '' },
-    { name: '可重复购买，将自动累积Token，在个人中心查看', value: '' },
+    { name: '尊享Token = 实际消耗Token * 当前模型倍率，模型倍率可前往【模型库】查看', value: '' },
     { name: 'Token长期有效，无限流限制', value: '' },
     { name: '几乎是全网最低价，让人人用的起Agent', value: '' },
     { name: '附带claude code独家教程，手把手对接', value: '' },
@@ -321,8 +323,10 @@ function onClose() {
 
 function goToActivation() {
   close();
-  // 使用 window.location 进行跳转，避免 router 注入问题
-  window.location.href = '/console/activation';
+  // 使用 router 进行跳转，避免完整页面刷新
+  setTimeout(() => {
+    router.push('/console/activation');
+  }, 300); // 等待对话框关闭动画完成
 }
 </script>
 

Yi.Ai.Vue3/src/components/SupportModelProducts/indexl.vue

@@ -1,4 +1,8 @@
 <script setup lang="ts">
+import { useRouter } from 'vue-router';
+
+const router = useRouter();
+
 const models = [
   { name: 'DeepSeek-R1', price: '2', desc: '国产开源，深度思索模式，不过幻读问题比较大，同时具备思考响应链，在开源模型中永远的神!' },
   { name: 'DeepSeek-chat', price: '1', desc: '国产开源，简单聊天模式，对于中文文章语义体验较好，但响应速度一般' },
@@ -27,7 +31,7 @@ const models = [
 ];
 
 function goToModelLibrary() {
-  window.location.href = '/model-library';
+  router.push('/model-library');
 }
 </script>
 

Yi.Ai.Vue3/src/components/userPersonalCenter/components/CardFlipActivity.vue

@@ -1,4 +1,4 @@
-<script lang="ts" setup>
+<script lang="ts" setup xmlns="http://www.w3.org/1999/html">
 /**
  * 翻牌抽奖活动组件
  * 功能说明：
@@ -914,7 +914,13 @@ function getCardClass(record: CardFlipRecord): string[] {
         </div>
       </div>
       <div class="lucky-label">
-        翻牌幸运值
+        <div class="lucky-main-text">
+          <span class="fire-icon">🔥</span>幸运值{{ luckyValue }}%
+        </div>
+        <div class="lucky-sub-text">
+          <span v-if="luckyValue < 100" class="lucky-highlight bounce">继续翻！后面奖励超高</span>
+          <span v-else class="lucky-highlight full">幸运值满！奖励MAX</span>
+        </div>
       </div>
     </div>
 
@@ -1283,20 +1289,23 @@ function getCardClass(record: CardFlipRecord): string[] {
 
 /* 幸运值悬浮球 */
 .lucky-float-ball {
-  position: fixed;
+  position: absolute;
   left: 50%;
+  bottom: 16px;
   transform: translateX(-50%);
   z-index: 999;
-  bottom: 20px;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 
   &:hover {
-    transform: translateX(-50%) scale(1.1);
+    transform: translateX(-50%) scale(1.05);
   }
 
   @media (max-width: 768px) {
-    bottom: 15px;
+    bottom: 12px;
 
     .lucky-circle {
       width: 70px;
@@ -1312,16 +1321,14 @@ function getCardClass(record: CardFlipRecord): string[] {
     }
 
     .lucky-label {
-      font-size: 11px;
       margin-top: 4px;
     }
   }
 
   &.lucky-full {
-    animation: lucky-celebration 2s ease-in-out infinite;
-
     .lucky-circle {
       box-shadow: 0 0 20px rgba(255, 215, 0, 0.8), 0 0 40px rgba(255, 215, 0, 0.6);
+      animation: lucky-celebration 2s ease-in-out infinite;
     }
 
     .lucky-content {
@@ -1392,11 +1399,109 @@ function getCardClass(record: CardFlipRecord): string[] {
 .lucky-label {
   text-align: center;
   margin-top: 6px;
-  font-size: 12px;
-  font-weight: bold;
-  color: rgba(255, 255, 255, 0.95);
-  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
-  letter-spacing: 1px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  width: max-content;
+  min-width: 100px;
+  max-width: 140px;
+  margin-left: auto;
+  margin-right: auto;
+
+  .lucky-main-text {
+    font-size: 14px;
+    font-weight: bold;
+    color: #fff;
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
+    letter-spacing: 1px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+    white-space: nowrap;
+
+    .fire-icon {
+      font-size: 14px;
+      animation: fireShake 0.5s ease-in-out infinite;
+      display: inline-block;
+    }
+  }
+
+  .lucky-sub-text {
+    font-size: 11px;
+    font-weight: 600;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+  }
+
+  .lucky-highlight {
+    display: inline-block;
+    padding: 3px 10px;
+    border-radius: 12px;
+    font-size: 11px;
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+    white-space: nowrap;
+    text-align: center;
+
+    &.bounce {
+      background: linear-gradient(90deg, #ff6b6b 0%, #ffd93d 50%, #ff6b6b 100%);
+      background-size: 200% 100%;
+      color: #fff;
+      box-shadow: 0 2px 10px rgba(255, 107, 107, 0.5);
+      animation: gradientMove 2s linear infinite, bounceHint 1s ease-in-out infinite;
+    }
+
+    &.full {
+      background: linear-gradient(135deg, #FFD700 0%, #ff6b9d 50%, #c06c84 100%);
+      background-size: 200% 100%;
+      color: #fff;
+      box-shadow: 0 0 15px rgba(255, 215, 0, 0.8);
+      animation: gradientMove 2s linear infinite, glowPulse 1.5s ease-in-out infinite;
+    }
+  }
+
+  @media (max-width: 768px) {
+    margin-top: 4px;
+    gap: 3px;
+    min-width: 80px;
+    max-width: 120px;
+
+    .lucky-main-text {
+      font-size: 12px;
+
+      .fire-icon {
+        font-size: 12px;
+      }
+    }
+
+    .lucky-highlight {
+      font-size: 10px;
+      padding: 2px 8px;
+    }
+  }
+}
+
+@keyframes fireShake {
+  0%, 100% { transform: rotate(-5deg) scale(1); }
+  50% { transform: rotate(5deg) scale(1.1); }
+}
+
+@keyframes bounceHint {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-3px); }
+}
+
+@keyframes gradientMove {
+  0% { background-position: 0% 50%; }
+  100% { background-position: 200% 50%; }
+}
+
+@keyframes glowPulse {
+  0%, 100% { box-shadow: 0 0 10px rgba(255, 215, 0, 0.6); }
+  50% { box-shadow: 0 0 20px rgba(255, 215, 0, 1), 0 0 30px rgba(255, 107, 157, 0.5); }
 }
 
 @keyframes lucky-celebration {

Yi.Ai.Vue3/src/components/userPersonalCenter/components/UserManagement.vue

@@ -36,6 +36,40 @@ const userVipStatus = computed(() => {
   return isUserVip();
 });
 
+// VIP到期时间
+const vipExpireTime = computed(() => {
+  return userStore.userInfo?.vipExpireTime || null;
+});
+
+// 计算距离VIP到期还有多少天
+const vipRemainingDays = computed(() => {
+  if (!vipExpireTime.value) return null;
+  const expireDate = new Date(vipExpireTime.value);
+  const now = new Date();
+  const diffTime = expireDate.getTime() - now.getTime();
+  const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+  return diffDays;
+});
+
+// VIP到期状态文本
+const vipExpireStatusText = computed(() => {
+  if (!userVipStatus.value) return '';
+  if (!vipExpireTime.value) return '-';
+  if (vipRemainingDays.value === null) return '';
+  if (vipRemainingDays.value < 0) return '已过期';
+  if (vipRemainingDays.value === 0) return '今日到期';
+  return `${vipRemainingDays.value}天后到期`;
+});
+
+// VIP到期状态标签类型
+const vipExpireTagType = computed(() => {
+  if (!vipExpireTime.value) return 'success';
+  if (vipRemainingDays.value === null) return 'info';
+  if (vipRemainingDays.value < 0) return 'danger';
+  if (vipRemainingDays.value <= 7) return 'warning';
+  return 'success';
+});
+
 // 格式化日期
 function formatDate(dateString: string | null) {
   if (!dateString)
@@ -161,6 +195,28 @@ function bindWechat() {
                 注册时间
               </div>
             </div>
+            <!-- VIP到期时间 -->
+            <div v-if="userVipStatus" class="stat-item">
+              <div class="stat-value">
+                <template v-if="vipExpireTime">
+                  {{ formatDate(vipExpireTime)?.split(' ')[0] || '-' }}
+                </template>
+                <template v-else>
+                  -
+                </template>
+              </div>
+              <div class="stat-label">
+                VIP到期时间
+                <el-tag
+                  v-if="vipExpireStatusText"
+                  :type="vipExpireTagType"
+                  size="small"
+                  style="margin-left: 4px;"
+                >
+                  {{ vipExpireStatusText }}
+                </el-tag>
+              </div>
+            </div>
           </div>
         </div>
       </div>

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,312 @@
+import type { AnyObject } from 'typescript-api-pro';
+import type { BubbleProps } from 'vue-element-plus-x/types/Bubble';
+import type { ThinkingStatus } from 'vue-element-plus-x/types/Thinking';
+import type { UnifiedMessage } from '@/utils/apiFormatConverter';
+import { ElMessage } from 'element-plus';
+import { useHookFetch } from 'hook-fetch/vue';
+import { ref } from 'vue';
+import { unifiedSend } from '@/api';
+import { useModelStore } from '@/stores/modules/model';
+import { convertToApiFormat, parseStreamChunk } from '@/utils/apiFormatConverter';
+
+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/config/constants.ts

@@ -8,7 +8,7 @@ export const contactConfig = {
   // 二维码图片路径
   images: {
     customerService: '   https://ccnetcore.com/prod-api/wwwroot/aihub/wx.png ', // 客服微信二维码
-    communityGroup: ' https://ccnetcore.com/prod-api/wwwroot/aihub/jlq.png', // 交流群二维码
+    communityGroup: ' https://ccnetcore.com/prod-api/wwwroot/aihub/jlq_yxai.png', // 交流群二维码
     afterSalesGroup: '', // 售后群二维码
   },
 };

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

@@ -12,4 +12,18 @@ export const COLLAPSE_THRESHOLD: number = 600;
 export const SIDE_BAR_WIDTH: number = 280;
 
 // 路由白名单地址[本地存在的路由 staticRouter.ts 中]
-export const ROUTER_WHITE_LIST: string[] = ['/chat', '/chat/conversation', '/chat/image', '/chat/video', '/model-library', '/403', '/404'];
+// 包含所有无需登录即可访问的公开路径
+export const ROUTER_WHITE_LIST: string[] = [
+  '/chat',
+  '/chat/conversation',
+  '/chat/image',
+  '/chat/video',
+  '/chat/agent',
+  '/model-library',
+  '/products',
+  '/pay-result',
+  '/activity/:id',
+  '/announcement/:id',
+  '/403',
+  '/404',
+];

Yi.Ai.Vue3/src/config/permission.ts

@@ -30,6 +30,11 @@ export const PAGE_PERMISSIONS: PermissionConfig[] = [
     allowedUsers: ['cc', 'Guo'],
     description: '系统统计页面 - 仅限cc和Guo用户访问',
   },
+  {
+    path: '/console/announcement',
+    allowedUsers: ['cc', 'Guo'],
+    description: '公告管理页面 - 仅限cc和Guo用户访问',
+  },
   // 可以在这里继续添加其他需要权限控制的页面
   // {
   //   path: '/console/admin',

Yi.Ai.Vue3/src/config/version.ts

@@ -0,0 +1,61 @@
+/**
+ * 应用版本配置
+ * 集中管理应用版本信息
+ *
+ * ⚠️ 注意：修改此处版本号即可，vite.config.ts 会自动读取
+ */
+
+// 主版本号 - 修改此处即可同步更新所有地方的版本显示
+export const APP_VERSION = '3.7.0';
+
+// 应用名称
+export const APP_NAME = '意心AI';
+
+// 完整名称（名称 + 版本）
+export const APP_FULL_NAME = `${APP_NAME} ${APP_VERSION}`;
+
+// 构建信息（由 vite 注入）
+declare const __GIT_BRANCH__: string;
+declare const __GIT_HASH__: string;
+declare const __GIT_DATE__: string;
+declare const __BUILD_TIME__: string;
+
+// 版本信息（由 vite 注入）
+declare const __APP_VERSION__: string;
+declare const __APP_NAME__: string;
+
+export interface BuildInfo {
+  version: string;
+  name: string;
+  gitBranch: string;
+  gitHash: string;
+  gitDate: string;
+  buildTime: string;
+}
+
+// 获取完整构建信息
+export function getBuildInfo(): BuildInfo {
+  return {
+    version: APP_VERSION,
+    name: APP_NAME,
+    gitBranch: typeof __GIT_BRANCH__ !== 'undefined' ? __GIT_BRANCH__ : 'unknown',
+    gitHash: typeof __GIT_HASH__ !== 'undefined' ? __GIT_HASH__ : 'unknown',
+    gitDate: typeof __GIT_DATE__ !== 'undefined' ? __GIT_DATE__ : 'unknown',
+    buildTime: typeof __BUILD_TIME__ !== 'undefined' ? __BUILD_TIME__ : new Date().toISOString(),
+  };
+}
+
+// 在控制台输出构建信息
+export function logBuildInfo(): void {
+  console.log(
+    `%c ${APP_NAME} ${APP_VERSION} %c Build Info `,
+    'background:#35495e; padding: 4px; border-radius: 3px 0 0 3px; color: #fff',
+    'background:#41b883; padding: 4px; border-radius: 0 3px 3px 0; color: #fff',
+  );
+  const info = getBuildInfo();
+  console.log(`🔹 Version: ${info.version}`);
+  // console.log(`🔹 Git Branch: ${info.gitBranch}`);
+  console.log(`🔹 Git Commit: ${info.gitHash}`);
+  // console.log(`🔹 Commit Date: ${info.gitDate}`);
+  // console.log(`🔹 Build Time: ${info.buildTime}`);
+}

Yi.Ai.Vue3/src/layouts/components/ChatAside/index.vue

@@ -20,12 +20,29 @@ const isCollapsed = computed(() => designStore.isCollapseConversationList);
 
 // 判断是否为新建对话状态（没有选中任何会话）
 const isNewChatState = computed(() => !sessionStore.currentSession);
+const isLoading = ref(false);
 
-onMounted(async () => {
-  await sessionStore.requestSessionList();
-  if (conversationsList.value.length > 0 && sessionId.value) {
-    const currentSessionRes = await get_session(`${sessionId.value}`);
-    sessionStore.setCurrentSession(currentSessionRes.data);
+onMounted(() => {
+  // 使用 requestIdleCallback 或 setTimeout 延迟加载数据
+  // 避免阻塞首屏渲染
+  const loadData = async () => {
+    isLoading.value = true;
+    try {
+      await sessionStore.requestSessionList();
+      if (conversationsList.value.length > 0 && sessionId.value) {
+        const currentSessionRes = await get_session(`${sessionId.value}`);
+        sessionStore.setCurrentSession(currentSessionRes.data);
+      }
+    } finally {
+      isLoading.value = false;
+    }
+  };
+
+  // 优先使用 requestIdleCallback，如果不支持则使用 setTimeout
+  if (typeof requestIdleCallback !== 'undefined') {
+    requestIdleCallback(() => loadData(), { timeout: 1000 });
+  } else {
+    setTimeout(loadData, 100);
   }
 });
 

Yi.Ai.Vue3/src/layouts/components/Header/components/ModelLibraryBtn.vue

@@ -1,11 +1,5 @@
 <script setup lang="ts">
-import { useRouter } from 'vue-router';
-
-const router = useRouter();
-
-function goToModelLibrary() {
-  router.push('/model-library');
-}
+// 这是一个纯展示组件，点击事件由父组件 el-menu-item 处理
 </script>
 
 <template>
@@ -13,7 +7,6 @@ function goToModelLibrary() {
     <div
       class="model-library-btn"
       title="查看模型库"
-      @click="goToModelLibrary"
     >
       <!-- PC端显示文字 -->
       <span class="pc-text">模型库</span>

Yi.Ai.Vue3/src/layouts/components/Header/components/RankingBtn.vue

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+// 这是一个纯展示组件，点击事件由父组件 el-menu-item 处理
+</script>
+
+<template>
+  <div class="ranking-btn-container" data-tour="ranking-btn">
+    <div
+      class="ranking-btn"
+      title="查看排行榜"
+    >
+      <!-- PC端显示文字 -->
+      <span class="pc-text">排行榜</span>
+      <!-- 移动端显示图标 -->
+      <svg
+        class="mobile-icon"
+        xmlns="http://www.w3.org/2000/svg"
+        width="20"
+        height="20"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6" />
+        <path d="M18 9h1.5a2.5 2.5 0 0 0 0-5H18" />
+        <path d="M4 22h16" />
+        <path d="M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22" />
+        <path d="M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22" />
+        <path d="M18 2H6v7a6 6 0 0 0 12 0V2Z" />
+      </svg>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.ranking-btn-container {
+  display: flex;
+  align-items: center;
+
+  .ranking-btn {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    cursor: pointer;
+    font-size: 1.2rem;
+    font-weight: bold;
+    color: #606266;
+    transition: all 0.2s;
+
+    &:hover {
+      color: #606266;
+      transform: translateY(-1px);
+    }
+
+    // PC端显示文字，隐藏图标
+    .pc-text {
+      display: inline;
+      margin: 0 12px;
+    }
+
+    .mobile-icon {
+      display: none;
+    }
+  }
+}
+
+// 移动端显示图标，隐藏文字
+@media (max-width: 768px) {
+  .ranking-btn-container {
+    .ranking-btn {
+      .pc-text {
+        display: none;
+      }
+
+      .mobile-icon {
+        display: inline;
+      }
+    }
+  }
+}
+</style>

Yi.Ai.Vue3/src/layouts/components/Header/index.vue

@@ -12,7 +12,6 @@ import Avatar from './components/Avatar.vue';
 import BuyBtn from './components/BuyBtn.vue';
 import ContactUsBtn from './components/ContactUsBtn.vue';
 import LoginBtn from './components/LoginBtn.vue';
-import ModelLibraryBtn from './components/ModelLibraryBtn.vue';
 import ThemeBtn from './components/ThemeBtn.vue';
 
 const router = useRouter();
@@ -42,7 +41,7 @@ const mobileMenuVisible = ref(false);
 const activeIndex = computed(() => {
   if (route.path.startsWith('/console'))
     return 'console';
-  if (route.path.startsWith('/model-library'))
+  if (route.path.startsWith('/model-library') || route.path.startsWith('/ranking'))
     return 'model-library';
   if (route.path.includes('/chat/'))
     return 'chat';
@@ -71,6 +70,19 @@ function handleConsoleClick(e: MouseEvent) {
   mobileMenuVisible.value = false;
 }
 
+// 修改模型库菜单的点击事件
+function handleModelLibraryClick(e: MouseEvent) {
+  e.stopPropagation(); // 阻止事件冒泡
+  router.push('/model-library');
+  mobileMenuVisible.value = false;
+}
+
+// 跳转到模型监控外部链接
+function goToModelMonitor() {
+  window.open('http://data.ccnetcore.com:91/?period=24h', '_blank');
+  mobileMenuVisible.value = false;
+}
+
 // 切换移动端菜单
 function toggleMobileMenu() {
   mobileMenuVisible.value = !mobileMenuVisible.value;
@@ -115,6 +127,9 @@ function toggleMobileMenu() {
           <el-menu-item index="/chat/agent">
             AI智能体
           </el-menu-item>
+          <el-menu-item index="/chat/api">
+            AI接口
+          </el-menu-item>
         </el-sub-menu>
 
         <!-- 公告按钮 -->
@@ -122,10 +137,21 @@ function toggleMobileMenu() {
           <AnnouncementBtn :is-menu-item="true" />
         </el-menu-item>
 
-        <!-- 模型库 -->
-        <el-menu-item index="/model-library" class="custom-menu-item">
-          <ModelLibraryBtn :is-menu-item="true" />
-        </el-menu-item>
+        <!-- 模型库下拉菜单 -->
+        <el-sub-menu index="model-library" class="model-library-submenu" popper-class="custom-popover">
+          <template #title>
+            <span class="menu-title" @click="handleModelLibraryClick">模型</span>
+          </template>
+          <el-menu-item index="/model-library">
+            模型库
+          </el-menu-item>
+          <el-menu-item index="/ranking">
+            模型排行榜
+          </el-menu-item>
+          <el-menu-item index="no-route" @click="goToModelMonitor">
+            模型监控
+          </el-menu-item>
+        </el-sub-menu>
 
         <!-- AI教程 -->
         <el-menu-item class="custom-menu-item" index="no-route">
@@ -252,13 +278,27 @@ function toggleMobileMenu() {
           <el-menu-item index="/chat/agent">
             AI智能体
           </el-menu-item>
+          <el-menu-item index="/chat/api">
+            AI接口
+          </el-menu-item>
         </el-sub-menu>
 
-        <!-- 模型库 -->
-        <el-menu-item index="/model-library">
-          <el-icon><Box /></el-icon>
-          <span>模型库</span>
-        </el-menu-item>
+        <!-- 模型库下拉菜单 -->
+        <el-sub-menu index="model-library">
+          <template #title>
+            <el-icon><Box /></el-icon>
+            <span>模型</span>
+          </template>
+          <el-menu-item index="/model-library">
+            模型库
+          </el-menu-item>
+          <el-menu-item index="/ranking">
+            模型排行榜
+          </el-menu-item>
+          <el-menu-item index="no-route" @click="goToModelMonitor">
+            模型监控
+          </el-menu-item>
+        </el-sub-menu>
 
         <!-- 控制台 -->
         <el-sub-menu index="console">
@@ -412,9 +452,10 @@ function toggleMobileMenu() {
   }
 }
 
-// 聊天和控制台子菜单
+// 聊天、模型库和控制台子菜单
 .chat-submenu,
-.console-submenu {
+.console-submenu,
+.model-library-submenu {
   :deep(.el-sub-menu__title) {
     display: flex;
     align-items: center;
@@ -674,4 +715,7 @@ function toggleMobileMenu() {
     }
   }
 }
+.el-sub-menu .el-sub-menu__icon-arrow{
+  margin-right: -20px;
+}
 </style>

Yi.Ai.Vue3/src/layouts/index.vue

@@ -35,30 +35,6 @@ const layout = computed((): LayoutType | 'mobile' => {
   // 否则使用全局设置的 layout
   return designStore.layout;
 });
-
-onMounted(() => {
-  // 更好的做法是等待所有资源加载
-  window.addEventListener('load', () => {
-    const loader = document.getElementById('yixinai-loader');
-    if (loader) {
-      loader.style.opacity = '0';
-      setTimeout(() => {
-        loader.style.display = 'none';
-      }, 500); // 匹配过渡时间
-    }
-  });
-
-  // 设置超时作为兜底
-  setTimeout(() => {
-    const loader = document.getElementById('yixinai-loader');
-    if (loader) {
-      loader.style.opacity = '0';
-      setTimeout(() => {
-        loader.style.display = 'none';
-      }, 500);
-    }
-  }, 500); // 最多显示0.5秒
-});
 </script>
 
 <template>

Yi.Ai.Vue3/src/main.ts

@@ -1,14 +1,14 @@
 // 引入ElementPlus所有图标
 import * as ElementPlusIconsVue from '@element-plus/icons-vue';
-import { ElMessage } from 'element-plus';
 import { createApp } from 'vue';
 import ElementPlusX from 'vue-element-plus-x';
+import 'element-plus/dist/index.css';
 import App from './App.vue';
+import { logBuildInfo } from './config/version';
 import router from './routers';
 import store from './stores';
 import './styles/index.scss';
 import 'virtual:uno.css';
-import 'element-plus/dist/index.css';
 import 'virtual:svg-icons-register';
 
 // 创建 Vue 应用
@@ -16,27 +16,78 @@ const app = createApp(App);
 
 // 安装插件
 app.use(router);
-app.use(ElMessage);
+app.use(store);
 app.use(ElementPlusX);
 
-// 注册图标
+// 注册所有 Element Plus 图标（临时方案，后续迁移到 fontawesome）
 for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
   app.component(key, component);
 }
 
-app.use(store);
+// 输出构建信息（使用统一版本配置）
+logBuildInfo();
 
-// 输出构建信息
-console.log(
-  `%c 意心AI 3.3 %c Build Info `,
-  'background:#35495e; padding: 4px; border-radius: 3px 0 0 3px; color: #fff',
-  'background:#41b883; padding: 4px; border-radius: 0 3px 3px 0; color: #fff',
-);
-// console.log(`🔹 Git Branch: ${__GIT_BRANCH__}`);
-console.log(`🔹 Git Commit: ${__GIT_HASH__}`);
-// console.log(`🔹 Commit Date: ${__GIT_DATE__}`);
-// console.log(`🔹 Build Time: ${__BUILD_TIME__}`);
+import { nextTick } from 'vue';
 
 // 挂载 Vue 应用
-// mount 完成说明应用初始化完毕，此时手动通知 loading 动画结束
 app.mount('#app');
+
+/**
+ * 检查页面是否真正渲染完成
+ * 改进策略：
+ * 1. 等待多个 requestAnimationFrame 确保浏览器完成绘制
+ * 2. 检查关键元素是否存在且有实际内容
+ * 3. 检查关键 CSS 是否已应用
+ * 4. 给予最小展示时间，避免闪烁
+ */
+function waitForPageRendered(): Promise<void> {
+  return new Promise((resolve) => {
+    const minDisplayTime = 800; // 最小展示时间 800ms，避免闪烁
+    const maxWaitTime = 8000;   // 最大等待时间 8 秒
+    const startTime = Date.now();
+
+    const checkRender = () => {
+      const elapsed = Date.now() - startTime;
+      const appElement = document.getElementById('app');
+
+      // 检查关键条件
+      const hasContent = appElement?.children.length > 0;
+      const hasVisibleHeight = (appElement?.offsetHeight || 0) > 200;
+      const hasRouterView = document.querySelector('.layout-container') !== null ||
+                           document.querySelector('.el-container') !== null ||
+                           document.querySelector('#app > div') !== null;
+
+      const isRendered = hasContent && hasVisibleHeight && hasRouterView;
+      const isMinTimeMet = elapsed >= minDisplayTime;
+      const isTimeout = elapsed >= maxWaitTime;
+
+      if ((isRendered && isMinTimeMet) || isTimeout) {
+        // 再多给一帧时间确保稳定
+        requestAnimationFrame(() => {
+          requestAnimationFrame(() => resolve());
+        });
+      } else {
+        requestAnimationFrame(checkRender);
+      }
+    };
+
+    // 等待 Vue 更新和浏览器绘制
+    nextTick(() => {
+      requestAnimationFrame(() => {
+        setTimeout(checkRender, 100);
+      });
+    });
+  });
+}
+
+// 第一阶段：Vue 应用已挂载
+if (typeof window.__hideAppLoader === 'function') {
+  window.__hideAppLoader('mounted');
+}
+
+// 等待页面真正渲染完成后再通知第二阶段
+waitForPageRendered().then(() => {
+  if (typeof window.__hideAppLoader === 'function') {
+    window.__hideAppLoader('rendered');
+  }
+});

Yi.Ai.Vue3/src/pages/chat/agent/index.vue

@@ -12,7 +12,7 @@ import { getSelectableTokenInfo } from '@/api';
 import { useUserStore } from '@/stores/modules/user';
 import { useAgentSessionStore } from '@/stores/modules/agentSession';
 import { getUserProfilePicture } from '@/utils/user.ts';
-import YMarkdown from '@/vue-element-plus-y/components/XMarkdown/index.vue';
+import MarkedMarkdown from '@/components/MarkedMarkdown/index.vue';
 import agentAvatar from '@/assets/images/czld.png';
 import '@/styles/github-markdown.css';
 import '@/styles/yixin-markdown.scss';
@@ -547,12 +547,10 @@ function cancelSSE() {
         </template>
 
         <template #content="{ item }">
-          <YMarkdown
+          <MarkedMarkdown
             v-if="item.content && (item.role === 'assistant' || item.role === 'system')"
             class="markdown-body"
-            :markdown="item.content"
-            :themes="{ light: 'github-light', dark: 'github-dark' }"
-            default-theme-mode="dark"
+            :content="item.content"
           />
           <div v-if="item.role === 'user'" class="user-content">
             {{ item.content }}

Yi.Ai.Vue3/src/pages/chat/api/index.vue

@@ -0,0 +1,335 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { CopyDocument, Connection, Monitor, ChatLineRound, VideoPlay } from '@element-plus/icons-vue';
+import { ElMessage } from 'element-plus';
+
+// API Configuration
+const apiList = [
+  {
+    id: 'openai',
+    name: 'OpenAI Completions',
+    url: '/v1/chat/completions',
+    method: 'POST',
+    description: 'OpenAI 经典的对话补全接口。虽然官方正逐步转向新标准，但它仍是目前生态中最通用的标准，绝大多数第三方 AI 工具和库都默认支持此协议。',
+    icon: ChatLineRound,
+    requestBody: {
+        "messages": [
+            {
+                "role": "user",
+                "content": "hi"
+            }
+        ],
+        "stream": true,
+        "model": "gpt-5.2-chat"
+    }
+  },
+  {
+    id: 'claude',
+    name: 'Claude Messages',
+    url: '/v1/messages',
+    method: 'POST',
+    description: 'Anthropic 官方统一的消息接口。专为 Claude 系列模型设计，支持复杂的对话交互，完美适配 Claude Code 等新一代开发工具。',
+    icon: Connection,
+    requestBody: {
+        "messages": [
+            {
+                "role": "user",
+                "content": "hi"
+            }
+        ],
+        "max_tokens": 32000,
+        "stream": true,
+        "model": "claude-opus-4-6"
+    }
+  },
+  {
+    id: 'openai-resp',
+    name: 'OpenAI Responses',
+    url: '/v1/responses',
+    method: 'POST',
+    description: 'OpenAI 推出的最新一代统一响应接口。旨在提供更灵活、强大的交互能力，是未来对接 Codex 等高级模型和新特性的首选方式。',
+    icon: Monitor,
+    requestBody: {
+        "model": "gpt-5.3-codex",
+        "stream": true,
+        "input": [
+            {"content":"hi","role":"user"}
+        ]
+    }
+  },
+  {
+    id: 'gemini',
+    name: 'Gemini GenerateContent',
+    url: '/v1beta/models/{model}/streamGenerateContent',
+    method: 'POST',
+    description: 'Google Gemini 原生生成接口。专为 Gemini 系列多模态模型打造，支持流式生成，是使用 Gemini CLI 及谷歌生态工具的最佳入口。',
+    icon: VideoPlay,
+    requestBody: {
+        "contents": [
+          {
+            "role": "user",
+            "parts": [
+              {
+                "text": "hi"
+              }
+            ]
+          }
+        ]
+      }
+  },
+];
+
+const baseUrl = 'https://yxai.chat';
+const activeIndex = ref('0');
+
+const currentApi = computed(() => apiList[Number(activeIndex.value)]);
+const fullUrl = computed(() => `${baseUrl}${currentApi.value.url}`);
+
+function handleSelect(key: string) {
+  activeIndex.value = key;
+}
+
+async function copyText(text: string) {
+  try {
+    await navigator.clipboard.writeText(text);
+    ElMessage.success('复制成功');
+  } catch {
+    ElMessage.error('复制失败');
+  }
+}
+</script>
+
+<template>
+  <div class="api-page">
+    <el-container class="h-full">
+      <!-- Desktop Sidebar -->
+      <el-aside width="280px" class="api-sidebar hidden-sm-and-down">
+        <div class="sidebar-header">
+          <h2 class="text-lg font-bold m-0">API 接口文档</h2>
+          <p class="text-xs text-gray-500 mt-1">开发者接入指南</p>
+        </div>
+        <el-menu
+          :default-active="activeIndex"
+          class="api-menu"
+          @select="handleSelect"
+        >
+          <el-menu-item
+            v-for="(api, index) in apiList"
+            :key="index"
+            :index="index.toString()"
+          >
+            <el-icon><component :is="api.icon" /></el-icon>
+            <span>{{ api.name }}</span>
+          </el-menu-item>
+        </el-menu>
+      </el-aside>
+
+      <el-main class="api-main">
+        <!-- Mobile Select -->
+        <div class="hidden-md-and-up mb-6">
+             <h2 class="text-lg font-bold mb-4">API 接口文档</h2>
+             <el-select v-model="activeIndex" placeholder="Select API" class="w-full" @change="handleSelect">
+                <el-option
+                    v-for="(api, index) in apiList"
+                    :key="index"
+                    :label="api.name"
+                    :value="index.toString()"
+                />
+            </el-select>
+        </div>
+
+        <div class="content-container">
+          <el-alert
+            title="接口兼容性重要提示"
+            type="warning"
+            show-icon
+            :closable="false"
+            class="api-warning-alert"
+          >
+            <template #default>
+              <div class="leading-normal text-sm">
+                自 2025 年末起，AI 领域接口标准逐渐分化，原有的统一接口 <code class="bg-yellow-100 px-1 rounded">/v1/chat/completions</code> 已不再兼容所有模型。各厂商推出的新接口差异较大，接入第三方工具时，请务必根据具体模型选择正确的 API 类型。您可前往 
+                <router-link to="/model-library" class="text-primary font-bold hover:underline">模型库</router-link> 
+                查看各模型对应的 API 信息。
+              </div>
+            </template>
+          </el-alert>
+
+          <div class="mb-6">
+            <div class="flex items-center gap-3 mb-2">
+                 <el-icon :size="24" class="text-primary"><component :is="currentApi.icon" /></el-icon>
+                 <h1 class="text-xl font-bold m-0">{{ currentApi.name }}</h1>
+            </div>
+            <p class="text-gray-500 dark:text-gray-400 leading-relaxed text-sm">{{ currentApi.description }}</p>
+          </div>
+
+          <el-card class="box-card mb-4" shadow="hover">
+            <template #header>
+              <div class="card-header flex justify-between items-center py-1">
+                <span class="font-bold text-sm">接口详情</span>
+                <el-tag :type="currentApi.method === 'POST' ? 'success' : 'warning'" effect="dark" round size="small">
+                  {{ currentApi.method }}
+                </el-tag>
+              </div>
+            </template>
+            
+            <div class="api-detail-item">
+              <div class="label mb-2 text-xs font-medium text-gray-500">请求地址 (Endpoint)</div>
+              <div class="url-box">
+                <div class="url-content">
+                  <span class="base-url" title="Base URL">{{ baseUrl }}</span>
+                  <span class="api-path" title="Path">{{ currentApi.url }}</span>
+                </div>
+                <div class="url-actions">
+                   <el-tooltip content="复制 Base URL" placement="top">
+                      <el-button link @click="copyText(baseUrl)" size="small">
+                        <span class="text-xs font-mono">Base</span>
+                      </el-button>
+                   </el-tooltip>
+                   <el-divider direction="vertical" />
+                   <el-tooltip content="复制完整地址" placement="top">
+                      <el-button link type="primary" @click="copyText(fullUrl)" size="small">
+                        <el-icon><CopyDocument /></el-icon>
+                      </el-button>
+                   </el-tooltip>
+                </div>
+              </div>
+            </div>
+          </el-card>
+
+          <el-card class="box-card" shadow="hover">
+            <template #header>
+              <div class="card-header py-1">
+                <span class="font-bold text-sm">调用示例 (cURL)</span>
+              </div>
+            </template>
+            <div class="code-block bg-gray-50  p-3 rounded-md border border-gray-200 ">
+              <pre class="text-xs overflow-x-auto font-mono m-0"><code class="language-bash">curl {{ fullUrl }} \
+  -H "Content-Type: application/json" \
+  -H "Authorization: Bearer YOUR_API_KEY" \
+  -d '{{ JSON.stringify(currentApi.requestBody, null, 2) }}'</code></pre>
+            </div>
+          </el-card>
+        </div>
+      </el-main>
+    </el-container>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.api-page {
+  height: 100%;
+  background-color: var(--bg-color-tertiary);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.api-sidebar {
+  background-color: var(--bg-color-primary);
+  border-right: 1px solid var(--border-color-light);
+  display: flex;
+  flex-direction: column;
+  
+  .sidebar-header {
+    padding: 16px 20px;
+    border-bottom: 1px solid var(--border-color-light);
+  }
+
+  .api-menu {
+    border-right: none;
+    background-color: transparent;
+    flex: 1;
+    overflow-y: auto;
+    padding: 8px 0;
+    
+    :deep(.el-menu-item) {
+        border-radius: 8px;
+        margin: 2px 10px;
+        height: 40px;
+        
+        &.is-active {
+            background-color: var(--el-color-primary-light-9);
+            color: var(--el-color-primary);
+            font-weight: 600;
+        }
+        
+        &:hover:not(.is-active) {
+             background-color: var(--el-fill-color-light);
+        }
+    }
+  }
+}
+
+.api-main {
+  padding: 24px;
+  overflow-y: auto;
+}
+
+.content-container {
+  max-width: 900px;
+  margin: 0 auto;
+}
+
+.text-primary {
+    color: var(--el-color-primary);
+}
+
+.url-box {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: var(--el-fill-color-light);
+  border: 1px solid var(--el-border-color);
+  border-radius: 8px;
+  padding: 12px 16px;
+  gap: 12px;
+  
+  .url-content {
+    font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
+    font-size: 14px;
+    word-break: break-all;
+    line-height: 1.5;
+    
+    .base-url {
+      color: var(--el-text-color-secondary);
+    }
+    
+    .api-path {
+      color: var(--el-color-primary);
+      font-weight: 600;
+    }
+  }
+  
+  .url-actions {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+  }
+}
+
+/* Utility classes for responsiveness if unocss/tailwind not fully available in this scope */
+@media (max-width: 768px) {
+  .hidden-sm-and-down {
+    display: none !important;
+  }
+  
+  .hidden-md-and-up {
+    display: block !important;
+  }
+  
+  .api-main {
+    padding: 20px;
+  }
+}
+
+@media (min-width: 769px) {
+  .hidden-md-and-up {
+    display: none !important;
+  }
+}
+
+.api-warning-alert {
+  margin-bottom: 20px;
+}
+</style>

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,588 @@
+<!-- 单条消息组件 -->
+<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;
+}>();
+
+/**
+ * 格式化时间
+ * 将 ISO 时间字符串格式化为 yyyy-MM-dd HH:mm:ss
+ */
+function formatTime(time: string | undefined): string {
+  if (!time) return '';
+
+  try {
+    const date = new Date(time);
+    if (Number.isNaN(date.getTime())) return time;
+
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const day = String(date.getDate()).padStart(2, '0');
+    const hours = String(date.getHours()).padStart(2, '0');
+    const minutes = String(date.getMinutes()).padStart(2, '0');
+    const seconds = String(date.getSeconds()).padStart(2, '0');
+
+    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+  }
+  catch {
+    return time;
+  }
+}
+
+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">
+            {{ formatTime(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: 0;
+        order: 1;
+      }
+
+      .message-wrapper__actions {
+        order: 0;
+      }
+    }
+  }
+
+  &__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;
+    }
+  }
+}
+.message-wrapper__actions .el-button {
+  margin-left: 0;
+}
+</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/index.vue

@@ -15,6 +15,7 @@ const navItems = [
   { name: 'image', label: 'AI图片', icon: 'Picture', path: '/chat/image' },
   { name: 'video', label: 'AI视频', icon: 'VideoCamera', path: '/chat/video' },
   { name: 'monitor', label: 'AI智能体', icon: 'Monitor', path: '/chat/agent' },
+  { name: 'ChatLineRound', label: 'AI接口', icon: 'ChatLineRound', path: '/chat/api' },
 ];
 
 // 当前激活的菜单

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/pages/console/announcement/index.vue

@@ -0,0 +1,404 @@
+<script setup lang="ts">
+import type { AnnouncementDto } from '@/api/announcement/types';
+import { Delete, Edit, Plus, Refresh } from '@element-plus/icons-vue';
+import { ElMessage, ElMessageBox } from 'element-plus';
+import { onMounted, ref, watch } from 'vue';
+import {
+  create,
+  deleteById,
+  getList,
+  update,
+} from '@/api/announcement';
+import { AnnouncementTypeEnum } from '@/api/announcement/types';
+
+// ==================== Tab 切换 ====================
+const activeTab = ref<'activity' | 'system'>('system');
+
+// Tab 切换时重新加载数据
+function handleTabChange() {
+  currentPage.value = 1;
+  fetchList();
+}
+
+// 获取当前 Tab 对应的类型枚举值
+function getCurrentTypeEnum(): AnnouncementTypeEnum {
+  return activeTab.value === 'activity' ? AnnouncementTypeEnum.Activity : AnnouncementTypeEnum.System;
+}
+
+// ==================== 公告列表管理 ====================
+const announcementList = ref<AnnouncementDto[]>([]);
+const loading = ref(false);
+const searchKey = ref('');
+const currentPage = ref(1);
+const pageSize = ref(10);
+const total = ref(0);
+
+// 公告对话框
+const dialogVisible = ref(false);
+const dialogTitle = ref('');
+const form = ref<Partial<AnnouncementDto>>({});
+
+// 获取公告列表
+async function fetchList() {
+  loading.value = true;
+  try {
+    const res = await getList({
+      searchKey: searchKey.value,
+      skipCount: (currentPage.value - 1) * pageSize.value,
+      maxResultCount: pageSize.value,
+      type: getCurrentTypeEnum(),
+    });
+    announcementList.value = res.data.items;
+    total.value = res.data.totalCount;
+  }
+  catch (error: any) {
+    ElMessage.error(error.message || '获取公告列表失败');
+  }
+  finally {
+    loading.value = false;
+  }
+}
+
+// 打开对话框
+function openDialog(type: 'create' | 'edit', row?: AnnouncementDto) {
+  dialogTitle.value = type === 'create' ? '创建公告' : '编辑公告';
+  if (type === 'create') {
+    form.value = {
+      title: '',
+      content: [''],
+      remark: '',
+      imageUrl: '',
+      startTime: new Date().toISOString().slice(0, 19),
+      endTime: '',
+      type: getCurrentTypeEnum(),
+      url: '',
+    };
+  }
+  else {
+    form.value = {
+      ...row,
+      startTime: row.startTime ? new Date(row.startTime).toISOString().slice(0, 19) : '',
+      endTime: row.endTime ? new Date(row.endTime).toISOString().slice(0, 19) : '',
+    };
+  }
+  dialogVisible.value = true;
+}
+
+// 添加内容项
+function addContentItem() {
+  if (form.value.content && form.value.content.length < 10) {
+    form.value.content.push('');
+  }
+  else {
+    ElMessage.warning('最多只能添加10条内容');
+  }
+}
+
+// 删除内容项
+function removeContentItem(index: number) {
+  if (form.value.content && form.value.content.length > 1) {
+    form.value.content.splice(index, 1);
+  }
+  else {
+    ElMessage.warning('至少需要保留一条内容');
+  }
+}
+
+// 保存
+async function save() {
+  if (!form.value.title || !form.value.content || form.value.content.some(c => !c)) {
+    ElMessage.warning('请填写标题和所有内容项');
+    return;
+  }
+
+  try {
+    const data = {
+      ...form.value,
+      content: form.value.content?.filter(c => c.trim()) || [],
+      remark: form.value.remark || null,
+      imageUrl: form.value.imageUrl || null,
+      endTime: form.value.endTime || null,
+      url: form.value.url || null,
+    };
+
+    if (form.value.id) {
+      await update(data as any);
+      ElMessage.success('更新成功');
+    }
+    else {
+      await create(data as any);
+      ElMessage.success('创建成功');
+    }
+    dialogVisible.value = false;
+    fetchList();
+  }
+  catch (error: any) {
+    ElMessage.error(error.message || '保存失败');
+  }
+}
+
+// 删除
+async function handleDelete(row: AnnouncementDto) {
+  try {
+    await ElMessageBox.confirm('确定要删除该公告吗？', '警告', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    });
+    await deleteById(row.id);
+    ElMessage.success('删除成功');
+    fetchList();
+  }
+  catch (error: any) {
+    if (error !== 'cancel') {
+      ElMessage.error(error.message || '删除失败');
+    }
+  }
+}
+
+// 分页改变
+function handleCurrentChange(page: number) {
+  currentPage.value = page;
+  fetchList();
+}
+
+function handleSizeChange(size: number) {
+  pageSize.value = size;
+  currentPage.value = 1;
+  fetchList();
+}
+
+// 初始化
+onMounted(() => {
+  fetchList();
+});
+</script>
+
+<template>
+  <div class="announcement-management">
+    <div class="management-container">
+      <!-- Tab 切换 -->
+      <el-tabs v-model="activeTab" class="announcement-tabs" @tab-change="handleTabChange">
+        <el-tab-pane label="系统公告" name="system" />
+        <el-tab-pane label="活动公告" name="activity" />
+      </el-tabs>
+
+      <!-- 顶部操作栏 -->
+      <div class="action-bar">
+        <el-input
+          v-model="searchKey"
+          placeholder="搜索标题或备注"
+          clearable
+          style="width: 250px; margin-right: 10px"
+          @keyup.enter="fetchList"
+        >
+          <template #append>
+            <el-button :icon="Refresh" @click="fetchList" />
+          </template>
+        </el-input>
+        <el-button type="primary" :icon="Plus" @click="openDialog('create')">
+          新建公告
+        </el-button>
+      </div>
+
+      <!-- 表格 -->
+      <div class="table-wrapper">
+        <el-table
+          v-loading="loading"
+          :data="announcementList"
+          border
+          stripe
+          style="width: 100%"
+          height="100%"
+        >
+          <el-table-column prop="title" label="标题" min-width="180" show-overflow-tooltip />
+          <el-table-column prop="content" label="内容预览" min-width="200" show-overflow-tooltip>
+            <template #default="{ row }">
+              {{ row.content?.join(' / ') || '-' }}
+            </template>
+          </el-table-column>
+          <el-table-column prop="remark" label="备注" min-width="120" show-overflow-tooltip>
+            <template #default="{ row }">
+              {{ row.remark || '-' }}
+            </template>
+          </el-table-column>
+          <el-table-column prop="startTime" label="开始时间" width="160" />
+          <el-table-column prop="endTime" label="结束时间" width="160">
+            <template #default="{ row }">
+              {{ row.endTime || '-' }}
+            </template>
+          </el-table-column>
+          <el-table-column prop="creationTime" label="创建时间" width="160" />
+          <el-table-column label="操作" width="120" fixed="right">
+            <template #default="{ row }">
+              <el-button link type="primary" size="small" @click="openDialog('edit', row)">
+                编辑
+              </el-button>
+              <el-button link type="danger" size="small" @click="handleDelete(row)">
+                删除
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
+      <!-- 分页 -->
+      <div class="pagination-wrapper">
+        <el-pagination
+          v-model:current-page="currentPage"
+          v-model:page-size="pageSize"
+          :page-sizes="[10, 20, 50, 100]"
+          :total="total"
+          :hide-on-single-page="false"
+          background
+          layout="total, sizes, prev, pager, next, jumper"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        />
+      </div>
+    </div>
+
+    <!-- 编辑对话框 -->
+    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="700px">
+      <el-form :model="form" label-width="100px">
+        <el-form-item label="标题" required>
+          <el-input v-model="form.title" placeholder="请输入公告标题" maxlength="200" show-word-limit />
+        </el-form-item>
+
+        <el-form-item label="内容" required>
+          <div style="width: 100%">
+            <div
+              v-for="(item, index) in form.content"
+              :key="index"
+              style="display: flex; gap: 8px; margin-bottom: 8px"
+            >
+              <el-input
+                v-model="form.content![index]"
+                placeholder="请输入内容"
+                maxlength="500"
+                show-word-limit
+              />
+              <el-button
+                v-if="form.content && form.content.length > 1"
+                type="danger"
+                :icon="Delete"
+                circle
+                size="small"
+                @click="removeContentItem(index)"
+              />
+            </div>
+            <el-button
+              v-if="form.content && form.content.length < 10"
+              type="primary"
+              :icon="Plus"
+              size="small"
+              @click="addContentItem"
+            >
+              添加内容项
+            </el-button>
+          </div>
+        </el-form-item>
+
+        <el-form-item label="备注">
+          <el-input
+            v-model="form.remark"
+            type="textarea"
+            placeholder="请输入备注（可选）"
+            maxlength="500"
+            show-word-limit
+            :rows="2"
+          />
+        </el-form-item>
+
+        <el-form-item label="图片URL">
+          <el-input v-model="form.imageUrl" placeholder="请输入图片URL（可选）" maxlength="500" />
+        </el-form-item>
+
+        <el-form-item label="跳转链接">
+          <el-input v-model="form.url" placeholder="请输入跳转链接（可选）" maxlength="500" />
+        </el-form-item>
+
+        <el-form-item label="开始时间" required>
+          <el-date-picker
+            v-model="form.startTime"
+            type="datetime"
+            placeholder="选择开始时间"
+            format="YYYY-MM-DD HH:mm:ss"
+            value-format="YYYY-MM-DDTHH:mm:ss"
+            style="width: 100%"
+          />
+        </el-form-item>
+
+        <el-form-item label="结束时间">
+          <el-date-picker
+            v-model="form.endTime"
+            type="datetime"
+            placeholder="选择结束时间（可选）"
+            format="YYYY-MM-DD HH:mm:ss"
+            value-format="YYYY-MM-DDTHH:mm:ss"
+            style="width: 100%"
+          />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="dialogVisible = false">
+          取消
+        </el-button>
+        <el-button type="primary" @click="save">
+          保存
+        </el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.announcement-management {
+  height: 100vh;
+  padding: 16px;
+  box-sizing: border-box;
+  background: #f5f7fa;
+
+  .management-container {
+    background: #fff;
+    border-radius: 8px;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  .announcement-tabs {
+    padding: 0 16px;
+    flex-shrink: 0;
+
+    :deep(.el-tabs__header) {
+      margin-bottom: 0;
+    }
+  }
+
+  .action-bar {
+    padding: 16px;
+    border-bottom: 1px solid #eee;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-shrink: 0;
+  }
+
+  .table-wrapper {
+    flex: 1;
+    overflow: hidden;
+    padding: 16px 16px 0 16px;
+    min-height: 0;
+  }
+
+  .pagination-wrapper {
+    display: flex;
+    justify-content: flex-end;
+    padding: 16px;
+    flex-shrink: 0;
+    border-top: 1px solid #eee;
+  }
+}
+</style>

Yi.Ai.Vue3/src/pages/console/index.vue

@@ -21,6 +21,7 @@ const userName = userStore.userInfo?.user?.userName;
 
 const hasChannelPermission = checkPagePermission('/console/channel', userName);
 const hasSystemStatisticsPermission = checkPagePermission('/console/system-statistics', userName);
+const hasAnnouncementPermission = checkPagePermission('/console/announcement', userName);
 
 // 菜单项配置
 
@@ -47,6 +48,10 @@ if (hasSystemStatisticsPermission) {
   navItems.push({ name: 'system-statistics', label: '系统统计', icon: 'DataAnalysis', path: '/console/system-statistics' });
 }
 
+if (hasAnnouncementPermission) {
+  navItems.push({ name: 'announcement', label: '公告管理', icon: 'Bell', path: '/console/announcement' });
+}
+
 // 当前激活的菜单
 const activeNav = computed(() => {
   const path = route.path;

Yi.Ai.Vue3/src/pages/modelLibrary/index.vue

@@ -249,6 +249,9 @@ onMounted(() => {
               <p class="banner-subtitle">
                 探索并接入全球顶尖AI模型，覆盖文本、图像、嵌入等多个领域
               </p>
+              <p class="banner-subtitle">
+                尊享Token = 实际消耗Token * 当前模型倍率
+              </p>
             </div>
             <!-- 统计信息卡片 -->
             <div class="stats-cards">
@@ -297,7 +300,7 @@ onMounted(() => {
             <!-- 点击引导手势 -->
             <div class="click-hint">
               <svg class="hand-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path d="M9 11V6C9 5.44772 9.44772 5 10 5C10.5523 5 11 5.44772 11 6V11M9 11V16.5C9 17.8807 10.1193 19 11.5 19H12.5C13.8807 19 15 17.8807 15 16.5V11M9 11H7.5C6.67157 11 6 11.6716 6 12.5C6 13.3284 6.67157 14 7.5 14H9M15 11V8C15 7.44772 15.4477 7 16 7C16.5523 7 17 7.44772 17 8V11M15 11H17.5C18.3284 11 19 11.6716 19 12.5C19 13.3284 18.3284 14 17.5 14H15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                <path d="M9 11V6C9 5.44772 9.44772 5 10 5C10.5523 5 11 5.44772 11 6V11M9 11V16.5C9 17.8807 10.1193 19 11.5 19H12.5C13.8807 19 15 17.8807 15 16.5V11M9 11H7.5C6.67157 11 6 11.6716 6 12.5C6 13.3284 6.67157 14 7.5 14H9M15 11V8C15 7.44772 15.4477 7 16 7C16.5523 7 17 7.44772 17 8V11M15 11H17.5C18.3284 11 19 11.6716 19 12.5C19 13.3284 18.3284 14 17.5 14H15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
               </svg>
               <span class="hint-text">点击查看</span>
             </div>

Yi.Ai.Vue3/src/pages/test/fontawesome.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import FontAwesomeDemo from '@/components/FontAwesomeIcon/demo.vue';
+</script>
+
+<template>
+  <div class="fontawesome-test-page">
+    <h1>FontAwesome 图标测试页面</h1>
+    <p>如果看到以下图标正常显示，说明 FontAwesome 配置成功！</p>
+    <FontAwesomeDemo />
+  </div>
+</template>
+
+<style scoped lang="scss">
+.fontawesome-test-page {
+  padding: 40px;
+  min-height: 100vh;
+  background-color: var(--el-bg-color-page);
+
+  h1 {
+    color: var(--el-text-color-primary);
+    margin-bottom: 10px;
+  }
+
+  p {
+    color: var(--el-text-color-regular);
+    margin-bottom: 30px;
+  }
+}
+</style>

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

@@ -5,24 +5,69 @@ import { createRouter, createWebHistory } from 'vue-router';
 import { ROUTER_WHITE_LIST } from '@/config';
 import { checkPagePermission } from '@/config/permission';
 import { errorRouter, layoutRouter, staticRouter } from '@/routers/modules/staticRouter';
-import { useDesignStore, useUserStore } from '@/stores';
+import { useUserStore } from '@/stores';
+import { useDesignStore } from '@/stores/modules/design';
 
-// 创建页面加载进度条，提升用户体验。
+// 创建页面加载进度条，提升用户体验
 const { start, done } = useNProgress(0, {
-  showSpinner: false, // 不显示旋转器
-  trickleSpeed: 200, // 进度条增长速度（毫秒）
-  minimum: 0.3, // 最小进度值（30%）
-  easing: 'ease', // 动画缓动函数
-  speed: 500, // 动画速度
+  showSpinner: false,
+  trickleSpeed: 200,
+  minimum: 0.3,
+  easing: 'ease',
+  speed: 500,
 });
+
 // 创建路由实例
 const router = createRouter({
-  history: createWebHistory(), // 使用 HTML5 History 模式
-  routes: [...layoutRouter, ...staticRouter, ...errorRouter], // 合并所有路由
-  strict: false, // 不严格匹配尾部斜杠
-  scrollBehavior: () => ({ left: 0, top: 0 }), // 路由切换时滚动到顶部
+  history: createWebHistory(),
+  routes: [...layoutRouter, ...staticRouter, ...errorRouter],
+  strict: false,
+  scrollBehavior: () => ({ left: 0, top: 0 }),
 });
 
+// 预加载标记，防止重复预加载
+const preloadedComponents = new Set();
+
+/**
+ * 预加载路由组件
+ * 提前加载可能访问的路由组件，减少路由切换时的等待时间
+ */
+function preloadRouteComponents() {
+  // 预加载核心路由组件
+  const coreRoutes = [
+    '/chat/conversation',
+    '/chat/image',
+    '/chat/video',
+    '/chat/agent',
+    '/console/user',
+    '/model-library',
+  ];
+
+  // 延迟预加载，避免影响首屏加载
+  setTimeout(() => {
+    coreRoutes.forEach(path => {
+      const route = router.resolve(path);
+      if (route.matched.length > 0) {
+        const component = route.matched[route.matched.length - 1].components?.default;
+        if (typeof component === 'function' && !preloadedComponents.has(component)) {
+          preloadedComponents.add(component);
+          // 异步预加载，不阻塞主线程
+          requestIdleCallback?.(() => {
+            (component as () => Promise<any>)().catch(() => {});
+          }) || setTimeout(() => {
+            (component as () => Promise<any>)().catch(() => {});
+          }, 100);
+        }
+      }
+    });
+  }, 2000);
+}
+
+// 首屏加载完成后开始预加载
+if (typeof window !== 'undefined') {
+  window.addEventListener('load', preloadRouteComponents);
+}
+
 // 路由前置守卫
 router.beforeEach(
   async (
@@ -30,54 +75,67 @@ router.beforeEach(
     _from: RouteLocationNormalized,
     next: NavigationGuardNext,
   ) => {
-    // 1. 获取状态管理
-    const userStore = useUserStore();
-    const designStore = useDesignStore(); // 必须在守卫内部调用
-    // 2. 设置布局（根据路由meta中的layout配置）
-    designStore._setLayout(to.meta?.layout || 'default');
-
-    // 3. 开始显示进度条
+    // 1. 开始显示进度条
     start();
 
-    // 4. 设置页面标题
+    // 2. 设置页面标题
     document.title = (to.meta.title as string) || (import.meta.env.VITE_WEB_TITLE as string);
 
-    // 3、权限 预留
-    // 3、判断是访问登陆页，有Token访问当前页面，token过期访问接口，axios封装则自动跳转登录页面，没有Token重置路由到登陆页。
-    // if (to.path.toLocaleLowerCase() === LOGIN_URL) {
-    //   // 有Token访问当前页面
-    //   if (userStore.token) {
-    //     return next(from.fullPath);
-    //   }
-    //   else {
-    //     ElMessage.error('账号身份已过期，请重新登录');
-    //   }
-    //   // 没有Token重置路由到登陆页。
-    //   // resetRouter();  // 预留
-    //   return next();
-    // }
-    // 4、判断访问页面是否在路由白名单地址[静态路由]中，如果存在直接放行。
+    // 3. 设置布局（使用 setTimeout 避免阻塞导航）
+    const layout = to.meta?.layout || 'default';
+    setTimeout(() => {
+      try {
+        const designStore = useDesignStore();
+        designStore._setLayout(layout);
+      } catch (e) {
+        // 忽略 store 初始化错误
+      }
+    }, 0);
+
+    // 4. 检查路由是否存在（404 处理）
+    // 如果 to.matched 为空且 to.name 不存在，说明路由未匹配
+    if (to.matched.length === 0 || (to.matched.length === 1 && to.matched[0].path === '/:pathMatch(.*)*')) {
+      // 404 路由已定义在 errorRouter 中，这里不需要额外处理
+    }
+
     // 5. 白名单检查（跳过权限验证）
-    if (ROUTER_WHITE_LIST.includes(to.path))
+    if (ROUTER_WHITE_LIST.some(path => {
+      // 支持通配符匹配
+      if (path.includes(':')) {
+        const pattern = path.replace(/:\w+/g, '[^/]+');
+        const regex = new RegExp(`^${pattern}$`);
+        return regex.test(to.path);
+      }
+      return path === to.path;
+    })) {
       return next();
+    }
 
-    // 6. Token 检查（用户认证），没有重定向到 login 页面。
-    if (!userStore.token)
-      userStore.logout();
+    // 6. 获取用户状态（延迟加载，避免阻塞）
+    let userStore;
+    try {
+      userStore = useUserStore();
+    } catch (e) {
+      // Store 未初始化，允许继续
+      return next();
+    }
 
-    // 7. 页面权限检查
+    // 7. Token 检查（用户认证）
+    if (!userStore.token) {
+      userStore.clearUserInfo();
+      return next({ path: '/', replace: true });
+    }
+
+    // 8. 页面权限检查
     const userName = userStore.userInfo?.user?.userName;
     const hasPermission = checkPagePermission(to.path, userName);
 
     if (!hasPermission) {
-      // 用户无权访问该页面，跳转到403页面
       ElMessage.warning('您没有权限访问该页面');
-      return next('/403');
+      return next({ path: '/403', replace: true });
     }
 
-    // 其余逻辑 预留...
-
-    // 8. 放行路由
+    // 9. 放行路由
     next();
   },
 );

Yi.Ai.Vue3/src/routers/modules/staticRouter.ts

@@ -1,10 +1,22 @@
 import type { RouteRecordRaw } from 'vue-router';
 
+// 预加载辅助函数
+function preloadComponent(importFn: () => Promise<any>) {
+  return () => {
+    // 在开发环境下直接返回
+    if (import.meta.env.DEV) {
+      return importFn();
+    }
+    // 生产环境下可以添加缓存逻辑
+    return importFn();
+  };
+}
+
 // LayoutRouter[布局路由]
 export const layoutRouter: RouteRecordRaw[] = [
   {
     path: '/',
-    component: () => import('@/layouts/index.vue'),
+    component: preloadComponent(() => import('@/layouts/index.vue')),
     children: [
       // 将首页重定向逻辑放在这里
       {
@@ -17,16 +29,12 @@ export const layoutRouter: RouteRecordRaw[] = [
         path: 'chat',
         name: 'chat',
         component: () => import('@/pages/chat/index.vue'),
+        redirect: '/chat/conversation',
         meta: {
           title: 'AI应用',
           icon: 'HomeFilled',
         },
         children: [
-          // chat 根路径重定向到 conversation
-          {
-            path: '',
-            redirect: '/chat/conversation',
-          },
           {
             path: 'conversation',
             name: 'chatConversation',
@@ -69,6 +77,14 @@ export const layoutRouter: RouteRecordRaw[] = [
               title: '意心Ai-AI智能体',
             },
           },
+          {
+            path: 'api',
+            name: 'chatApi',
+            component: () => import('@/pages/chat/api/index.vue'),
+            meta: {
+              title: '意心Ai-AI接口',
+            },
+          },
         ],
       },
 
@@ -98,6 +114,19 @@ export const layoutRouter: RouteRecordRaw[] = [
         },
       },
 
+      // 排行榜
+      {
+        path: 'ranking',
+        name: 'ranking',
+        component: () => import('@/pages/ranking/index.vue'),
+        meta: {
+          title: '意心Ai全球大模型实时排行榜（编程）',
+          keepAlive: 0,
+          isDefaultChat: false,
+          layout: 'default',
+        },
+      },
+
       // 支付结果
       {
         path: 'pay-result',
@@ -140,17 +169,13 @@ export const layoutRouter: RouteRecordRaw[] = [
         path: 'console',
         name: 'console',
         component: () => import('@/pages/console/index.vue'),
+        redirect: '/console/user',
         meta: {
           title: '意心Ai-控制台',
           icon: 'Setting',
           layout: 'default',
         },
         children: [
-          // console 根路径重定向到 user
-          {
-            path: '',
-            redirect: '/console/user',
-          },
           {
             path: 'user',
             name: 'consoleUser',
@@ -231,13 +256,31 @@ export const layoutRouter: RouteRecordRaw[] = [
               title: '意心Ai-系统统计',
             },
           },
+          {
+            path: 'announcement',
+            name: 'consoleAnnouncement',
+            component: () => import('@/pages/console/announcement/index.vue'),
+            meta: {
+              title: '意心Ai-公告管理',
+            },
+          },
         ],
       },
     ],
   },
 ];
-// staticRouter[静态路由] 预留
-export const staticRouter: RouteRecordRaw[] = [];
+// staticRouter[静态路由]
+export const staticRouter: RouteRecordRaw[] = [
+  // FontAwesome 测试页面
+  {
+    path: '/test/fontawesome',
+    name: 'testFontAwesome',
+    component: () => import('@/pages/test/fontawesome.vue'),
+    meta: {
+      title: 'FontAwesome图标测试',
+    },
+  },
+];
 
 // errorRouter (错误页面路由)
 export const errorRouter = [

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

Yi.Ai.Vue3/src/stores/modules/chat.ts

@@ -109,18 +109,22 @@ export const useChatStore = defineStore('chat', () => {
 
       return {
         ...item,
-        key: item.id,
+        id: item.id, // 保留后端返回的消息ID
+        key: item.id ?? Math.random().toString(36).substring(2, 9),
         placement: isUser ? 'end' : 'start',
+        // 用户消息：气泡形状；AI消息：无气泡形状，宽度100%
         isMarkdown: !isUser,
-        avatar: isUser
-          ? getUserProfilePicture()
-          : systemProfilePicture,
-        avatarSize: '32px',
+        // 头像不显示（后续可能会显示）
+        // avatar: isUser ? getUserProfilePicture() : systemProfilePicture,
+        // avatarSize: '32px',
         typing: false,
         reasoning_content: thinkContent,
         thinkingStatus: 'end',
         content: finalContent,
         thinlCollapse: false,
+        // AI消息使用 noStyle 去除气泡样式
+        noStyle: !isUser,
+        shape: isUser ? 'corner' : undefined,
         // 保留图片和文件信息（优先使用解析出来的，如果没有则使用原有的）
         images: images.length > 0 ? images : item.images,
         files: files.length > 0 ? files : item.files,

Yi.Ai.Vue3/src/stores/modules/user.ts

@@ -1,12 +1,10 @@
 import { defineStore } from 'pinia';
-import { useRouter } from 'vue-router';
 
 export const useUserStore = defineStore(
   'user',
   () => {
     const token = ref<string>();
     const refreshToken = ref<string | undefined>();
-    const router = useRouter();
     const setToken = (value: string, refreshValue?: string) => {
       token.value = value;
       if (refreshValue) {
@@ -30,7 +28,8 @@ export const useUserStore = defineStore(
       // 如果需要调用接口，可以在这里调用
       clearToken();
       clearUserInfo();
-      router.replace({ name: 'chatConversationWithId' });
+      // 不在 logout 中进行路由跳转，由调用方决定跳转逻辑
+      // 这样可以避免路由守卫中的循环重定向问题
     };
 
     // 新增：登录弹框状态

Yi.Ai.Vue3/src/styles/atom-one-dark.css

@@ -17,80 +17,82 @@ hue-6:   #d19a66
 hue-6-2: #e6c07b
 
 */
+[data-theme="dark"]{
+  .hljs {
+    display: block;
+    overflow-x: auto;
+    padding: 0.5em;
+    color: #abb2bf;
+    background: #282c34;
+  }
 
-.hljs {
-  display: block;
-  overflow-x: auto;
-  padding: 0.5em;
-  color: #abb2bf;
-  background: #282c34;
-}
+  .hljs-comment,
+  .hljs-quote {
+    color: #5c6370;
+    font-style: italic;
+  }
 
-.hljs-comment,
-.hljs-quote {
-  color: #5c6370;
-  font-style: italic;
-}
+  .hljs-doctag,
+  .hljs-keyword,
+  .hljs-formula {
+    color: #c678dd;
+  }
 
-.hljs-doctag,
-.hljs-keyword,
-.hljs-formula {
-  color: #c678dd;
-}
+  .hljs-section,
+  .hljs-name,
+  .hljs-selector-tag,
+  .hljs-deletion,
+  .hljs-subst {
+    color: #e06c75;
+  }
 
-.hljs-section,
-.hljs-name,
-.hljs-selector-tag,
-.hljs-deletion,
-.hljs-subst {
-  color: #e06c75;
-}
+  .hljs-literal {
+    color: #56b6c2;
+  }
 
-.hljs-literal {
-  color: #56b6c2;
-}
+  .hljs-string,
+  .hljs-regexp,
+  .hljs-addition,
+  .hljs-attribute,
+  .hljs-meta-string {
+    color: #98c379;
+  }
 
-.hljs-string,
-.hljs-regexp,
-.hljs-addition,
-.hljs-attribute,
-.hljs-meta-string {
-  color: #98c379;
-}
+  .hljs-built_in,
+  .hljs-class .hljs-title {
+    color: #e6c07b;
+  }
 
-.hljs-built_in,
-.hljs-class .hljs-title {
-  color: #e6c07b;
-}
+  .hljs-attr,
+  .hljs-variable,
+  .hljs-template-variable,
+  .hljs-type,
+  .hljs-selector-class,
+  .hljs-selector-attr,
+  .hljs-selector-pseudo,
+  .hljs-number {
+    color: #d19a66;
+  }
 
-.hljs-attr,
-.hljs-variable,
-.hljs-template-variable,
-.hljs-type,
-.hljs-selector-class,
-.hljs-selector-attr,
-.hljs-selector-pseudo,
-.hljs-number {
-  color: #d19a66;
-}
+  .hljs-symbol,
+  .hljs-bullet,
+  .hljs-link,
+  .hljs-meta,
+  .hljs-selector-id,
+  .hljs-title {
+    color: #61aeee;
+  }
 
-.hljs-symbol,
-.hljs-bullet,
-.hljs-link,
-.hljs-meta,
-.hljs-selector-id,
-.hljs-title {
-  color: #61aeee;
-}
+  .hljs-emphasis {
+    font-style: italic;
+  }
 
-.hljs-emphasis {
-  font-style: italic;
-}
+  .hljs-strong {
+    font-weight: bold;
+  }
 
-.hljs-strong {
-  font-weight: bold;
-}
+  .hljs-link {
+    text-decoration: underline;
+  }
 
-.hljs-link {
-  text-decoration: underline;
 }

Yi.Ai.Vue3/src/styles/dark-theme.scss

@@ -1,5 +1,7 @@
 /* ========== 深色主题 Element Plus 覆盖样式 ========== */
-
+.body {
+  color: white;
+}
 /* 深色主题通用 Div 样式 Mixin */
 @mixin dark-theme-div {
   border-radius: 0 !important;
@@ -205,7 +207,7 @@
       box-shadow: 0 10px 25px rgba(0, 255, 136, 0.3) !important;
     }
   }
-  
+
   /* 主要按钮 */
   .el-button--primary {
     background-color: #00d36e !important;
@@ -352,7 +354,7 @@
 
     td.el-table__cell {
       background-color: transparent !important;
-    
+
     }
 
     tr {
@@ -365,7 +367,7 @@
     }
 
     .el-table__row {
-      
+
       background-color: transparent !important;
     }
   }
@@ -528,7 +530,7 @@
 
   /* 代码块 */
   pre, code {
-    background-color: var(--bg-color-tertiary) !important;
+    background-color: #1D1E1F !important;
   }
 
   /* Markdown 样式 */
@@ -576,10 +578,46 @@
       color: #a0a0a0 !important;
     }
 
-    code {
+    /* 行内代码 */
+    code:not(pre code) {
       color: #00ff88 !important;
       background-color: rgba(0, 255, 136, 0.1) !important;
     }
+
+    /* 代码块内的代码高亮 - 不覆盖颜色 */
+    pre code,
+    .hljs,
+    .hljs * {
+      color: inherit;
+    }
+
+    /* 代码高亮特定 token 颜色 */
+    .hljs-keyword,
+    .hljs-selector-tag {
+      color: #ff7b72 !important;
+    }
+    .hljs-string,
+    .hljs-number {
+      color: #a5d6ff !important;
+    }
+    .hljs-name,
+    .hljs-title {
+      color: #d2a8ff !important;
+    }
+    .hljs-attr,
+    .hljs-attribute,
+    .hljs-variable {
+      color: #79c0ff !important;
+    }
+    .hljs-tag {
+      color: #7ee787 !important;
+    }
+    .hljs-punctuation {
+      color: #bdc3cf !important;
+    }
+    .hljs-comment {
+      color: #7d8590 !important;
+    }
   }
 }
 
@@ -748,13 +786,75 @@
     background-color: #04080b !important;
     color: #a0a0a0 !important;
     border: 1px solid rgba(0, 255, 136, 0.15) !important;
+
+    /* 代码高亮元素颜色覆盖 - 确保.hljs类颜色不被父元素覆盖 */
+    .hljs,
+    .hljs * {
+      color: inherit;
+    }
+
+    /* 为不同代码元素设置特定颜色 */
+    .hljs-keyword,
+    .hljs-selector-tag,
+    .hljs-addition {
+      color: #ff7b72 !important;
+    }
+    .hljs-number,
+    .hljs-string,
+    .hljs-literal,
+    .hljs-regexp {
+      color: #a5d6ff !important;
+    }
+    .hljs-title,
+    .hljs-section,
+    .hljs-name {
+      color: #d2a8ff !important;
+    }
+    .hljs-attribute,
+    .hljs-attr,
+    .hljs-variable,
+    .hljs-type {
+      color: #79c0ff !important;
+    }
+    .hljs-tag {
+      color: #7ee787 !important;
+    }
+    .hljs-tag .hljs-name {
+      color: #7ee787 !important;
+    }
+    .hljs-tag .hljs-attr {
+      color: #79c0ff !important;
+    }
+    .hljs-tag .hljs-string {
+      color: #a5d6ff !important;
+    }
+    .hljs-punctuation {
+      color: #bdc3cf !important;
+    }
+    .hljs-comment,
+    .hljs-quote {
+      color: #7d8590 !important;
+    }
+    .hljs-built_in {
+      color: #ffa198 !important;
+    }
   }
 
   /* 用户气泡 */
   .el-bubble[data-placement="end"] .el-bubble-content,
   .el-bubble--end .el-bubble-content {
-    background-color: #00d36e !important;
-    color: #000000 !important;
+    background-color: transparent !important;
+  }
+
+  /* 用户消息内容 - MessageItem.vue */
+  .message-content--user {
+    background-color: #30363d !important;
+    color: #e6edf3 !important;
+    border: 1px solid rgba(0, 255, 136, 0.3) !important;
+
+    .message-content__text {
+      color: #e6edf3 !important;
+    }
   }
 
   /* 用户文件项 */
@@ -771,6 +871,162 @@
     border-color: rgba(0, 255, 136, 0.15) !important;
     color: #666 !important;
   }
+
+  /* MarkedMarkdown 完整暗色主题覆盖 */
+  .marked-markdown,
+  .marked-markdown.theme-light {
+    /* 基础文本颜色 - 覆盖 .theme-light 的 color: #24292f */
+    color: #e6edf3 !important;
+
+    /* 链接 */
+    a {
+      color: #58a6ff !important;
+      &:hover {
+        color: #79c0ff !important;
+        text-decoration: underline !important;
+      }
+    }
+
+    /* 标题 */
+    h1, h2, h3, h4, h5, h6 {
+      color: #ffffff !important;
+      border-bottom-color: #30363d !important;
+    }
+
+    /* 分割线 */
+    hr {
+      background-color: #30363d !important;
+    }
+
+    /* 引用块 */
+    blockquote {
+      color: #8b949e !important;
+      border-left-color: #30363d !important;
+    }
+
+    /* 行内代码 */
+    code.inline-code {
+      background-color: rgba(110, 118, 129, 0.4) !important;
+      color: #e6edf3 !important;
+    }
+
+    /* 代码块 */
+    .code-block-wrapper {
+      background-color: #161b22 !important;
+      border-color: #30363d !important;
+
+      .code-block-header {
+        background-color: #161b22 !important;
+        border-bottom-color: #30363d !important;
+
+        .code-lang {
+          color: #8b949e !important;
+        }
+
+        .copy-btn,
+        .preview-btn {
+          color: #8b949e !important;
+          &:hover {
+            color: #e6edf3 !important;
+            background-color: #30363d !important;
+          }
+          &.copied {
+            color: #3fb950 !important;
+          }
+        }
+      }
+
+      .code-block-body {
+        .line-numbers {
+          background-color: #161b22 !important;
+          border-right-color: #30363d !important;
+
+          .line-number {
+            color: #6e7681 !important;
+          }
+        }
+      }
+
+      pre.hljs {
+        background-color: #161b22 !important;
+      }
+    }
+
+    /* 表格 */
+    table {
+      th, td {
+        border-color: #30363d !important;
+      }
+      th {
+        background-color: #161b22 !important;
+      }
+      tr:nth-child(2n) {
+        background-color: #161b22 !important;
+      }
+    }
+
+    /* 确保子元素继承正确颜色 */
+    p, li, td, th {
+      color: #e6edf3 !important;
+    }
+
+    /* 代码高亮元素颜色覆盖 - 确保.hljs类颜色不被父元素覆盖 */
+    .hljs,
+    .hljs * {
+      color: inherit;
+    }
+
+    /* 基础文本 */
+    .hljs {
+      color: #e6edf3 !important;
+    }
+
+    /* 为不同代码元素设置特定颜色 */
+    .hljs-keyword,
+    .hljs-selector-tag,
+    .hljs-addition {
+      color: #ff7b72 !important;
+    }
+    .hljs-number,
+    .hljs-string,
+    .hljs-literal,
+    .hljs-regexp {
+      color: #a5d6ff !important;
+    }
+    .hljs-title,
+    .hljs-section,
+    .hljs-name {
+      color: #d2a8ff !important;
+    }
+    .hljs-attribute,
+    .hljs-attr,
+    .hljs-variable,
+    .hljs-type {
+      color: #79c0ff !important;
+    }
+    .hljs-tag {
+      color: #7ee787 !important;
+    }
+    .hljs-tag .hljs-name {
+      color: #7ee787 !important;
+    }
+    .hljs-tag .hljs-attr {
+      color: #79c0ff !important;
+    }
+    .hljs-tag .hljs-string {
+      color: #a5d6ff !important;
+    }
+    .hljs-punctuation {
+      color: #bdc3cf !important;
+    }
+    .hljs-comment,
+    .hljs-quote {
+      color: #7d8590 !important;
+    }
+    .hljs-built_in {
+      color: #ffa198 !important;
+    }
+  }
 }
 
 /* ========== 附件和文件卡片深色样式 ========== */
@@ -1501,7 +1757,7 @@
   .el-sender{
     border-radius: 0;
   }
-  
+
   .typer-content{
     color: #fff !important;
   }
@@ -1597,7 +1853,7 @@
   }
   .session-sidebar{
     background: #04080b !important
-    
+
   }
   .session-sidebar .session-item:hover{
     background: transparent !important;
@@ -1753,7 +2009,7 @@
     @include dark-theme-div;
   }
   .el-check-tag.el-check-tag--primary.is-checked{
-    color: #00ff88 !important; 
+    color: #00ff88 !important;
   }
   .el-check-tag{
     @include dark-theme-div;
@@ -1794,6 +2050,19 @@
   .model-logo{
     border-radius: 0 !important;
   }
+  .marked-markdown.theme-light .code-block-wrapper .code-block-header{
+    @include dark-theme-div;
+  }
+  .marked-markdown.theme-light .code-block-wrapper{
+    @include dark-theme-div;
+  }
+  .marked-markdown.theme-light .code-block-wrapper .code-block-header .code-lang{
+    color: #fff !important;
+  }
+  .marked-markdown.theme-light .code-block-wrapper .code-block-body .line-numbers{
+    @include dark-theme-div;
+  }
+  .url-box{
+    @include dark-theme-div;
+  }
 }
-
-

Yi.Ai.Vue3/src/styles/var.scss

@@ -215,6 +215,9 @@
   --el-button-border-radius-base: var(--border-radius-md);
   --el-button-hover-bg-color: var(--color-primary-dark);
   --el-button-active-bg-color: var(--color-primary-darker);
+
+
+  --el-padding-sm: 6px
 }
 
 /* ========== 暗色模式变量 ========== */

Yi.Ai.Vue3/src/utils/apiFormatConverter.ts

@@ -127,17 +127,20 @@ export function toResponsesFormat(messages: UnifiedMessage[]): ResponsesMessage[
  * 将统一格式的消息转换为 Anthropic Claude 格式
  */
 export function toClaudeFormat(messages: UnifiedMessage[]): { messages: ClaudeMessage[]; system?: string } {
-  let systemPrompt: string | undefined;
   const claudeMessages: ClaudeMessage[] = [];
 
   for (const msg of messages) {
-    // Claude 的 system 消息需要单独提取
+    // system 消息转换为 assistant 角色放入 messages 数组
+    let role: 'user' | 'assistant';
     if (msg.role === 'system') {
-      systemPrompt = typeof msg.content === 'string' ? msg.content : msg.content.map(c => c.text || '').join('');
-      continue;
+      role = 'assistant';
+    }
+    else if (msg.role === 'model') {
+      role = 'assistant';
+    }
+    else {
+      role = msg.role as 'user' | 'assistant';
     }
-
-    const role = msg.role === 'model' ? 'assistant' : msg.role;
 
     // 处理内容格式
     let content: string | ClaudeContent[];
@@ -172,7 +175,16 @@ export function toClaudeFormat(messages: UnifiedMessage[]): { messages: ClaudeMe
     });
   }
 
-  return { messages: claudeMessages, system: systemPrompt };
+  // Claude API 要求第一条消息必须是 user 角色，不能以 assistant 开头
+  // 如果第一条是 assistant，在前面插入一个空的 user 消息
+  if (claudeMessages.length > 0 && claudeMessages[0].role !== 'user') {
+    claudeMessages.unshift({
+      role: 'user',
+      content: '',
+    });
+  }
+
+  return { messages: claudeMessages };
 }
 
 /**
@@ -230,6 +242,9 @@ export interface UnifiedStreamChunk {
     total_tokens?: number;
   };
   finish_reason?: string;
+  messageId?: string;
+  creationTime?: string;
+  type?: string;
 }
 
 /**
@@ -259,6 +274,17 @@ export function parseCompletionsStreamChunk(chunk: any): UnifiedStreamChunk {
     result.finish_reason = chunk.choices[0].finish_reason;
   }
 
+  // 解析消息ID和创建时间（UserMessage 或 SystemMessage 类型）
+  if (chunk.type === 'UserMessage' || chunk.type === 'SystemMessage') {
+    result.type = chunk.type;
+    if (chunk.messageId) {
+      result.messageId = chunk.messageId;
+    }
+    if (chunk.creationTime) {
+      result.creationTime = chunk.creationTime;
+    }
+  }
+
   return result;
 }
 
@@ -297,6 +323,17 @@ export function parseResponsesStreamChunk(chunk: any): UnifiedStreamChunk {
     };
   }
 
+  // 解析消息ID和创建时间（UserMessage 或 SystemMessage 类型）- 后端统一封装
+  if (chunk.type === 'UserMessage' || chunk.type === 'SystemMessage') {
+    result.type = chunk.type;
+    if (chunk.messageId) {
+      result.messageId = chunk.messageId;
+    }
+    if (chunk.creationTime) {
+      result.creationTime = chunk.creationTime;
+    }
+  }
+
   return result;
 }
 
@@ -328,6 +365,17 @@ export function parseClaudeStreamChunk(chunk: any): UnifiedStreamChunk {
     }
   }
 
+  // 解析消息ID和创建时间（UserMessage 或 SystemMessage 类型）- 后端统一封装
+  if (chunk.type === 'UserMessage' || chunk.type === 'SystemMessage') {
+    result.type = chunk.type;
+    if (chunk.messageId) {
+      result.messageId = chunk.messageId;
+    }
+    if (chunk.creationTime) {
+      result.creationTime = chunk.creationTime;
+    }
+  }
+
   return result;
 }
 
@@ -365,6 +413,17 @@ export function parseGeminiStreamChunk(chunk: any): UnifiedStreamChunk {
     result.finish_reason = candidate.finishReason;
   }
 
+  // 解析消息ID和创建时间（UserMessage 或 SystemMessage 类型）- 后端统一封装
+  if (chunk.type === 'UserMessage' || chunk.type === 'SystemMessage') {
+    result.type = chunk.type;
+    if (chunk.messageId) {
+      result.messageId = chunk.messageId;
+    }
+    if (chunk.creationTime) {
+      result.creationTime = chunk.creationTime;
+    }
+  }
+
   return result;
 }
 
@@ -462,16 +521,16 @@ export function convertToApiFormat(
       };
     }
     case ApiFormatType.Messages: {
-      const { messages: claudeMessages, system } = toClaudeFormat(messages);
+      const { messages: claudeMessages } = toClaudeFormat(messages);
       const request: any = {
         model,
         messages: claudeMessages,
         max_tokens: 32000,
         stream,
       };
-      if (system) {
-        request.system = system;
-      }
+      // if (system) {
+      //   request.system = system;
+      // }
       return request;
     }
     case ApiFormatType.GenerateContent: {

Yi.Ai.Vue3/src/utils/icon-mapping.ts

@@ -0,0 +1,123 @@
+/**
+ * Element Plus 图标到 FontAwesome 图标的映射
+ * 用于迁移过程中的图标替换
+ */
+export const iconMapping: Record<string, string> = {
+  // 基础操作
+  'Check': 'check',
+  'Close': 'xmark',
+  'Delete': 'trash',
+  'Edit': 'pen-to-square',
+  'Plus': 'plus',
+  'Minus': 'minus',
+  'Search': 'magnifying-glass',
+  'Refresh': 'rotate-right',
+  'Loading': 'spinner',
+  'Download': 'download',
+  'Upload': 'upload',
+
+  // 方向
+  'ArrowLeft': 'arrow-left',
+  'ArrowRight': 'arrow-right',
+  'ArrowUp': 'arrow-up',
+  'ArrowDown': 'arrow-down',
+  'ArrowLeftBold': 'arrow-left',
+  'ArrowRightBold': 'arrow-right',
+  'Expand': 'up-right-and-down-left-from-center',
+  'Fold': 'down-left-and-up-right-to-center',
+
+  // 界面
+  'FullScreen': 'expand',
+  'View': 'eye',
+  'Hide': 'eye-slash',
+  'Lock': 'lock',
+  'Unlock': 'unlock',
+  'User': 'user',
+  'Setting': 'gear',
+  'Menu': 'bars',
+  'MoreFilled': 'ellipsis-vertical',
+  'Filter': 'filter',
+
+  // 文件
+  'Document': 'file',
+  'Folder': 'folder',
+  'Files': 'folder-open',
+  'CopyDocument': 'copy',
+  'DocumentCopy': 'copy',
+  'Picture': 'image',
+  'VideoPlay': 'circle-play',
+  'Microphone': 'microphone',
+
+  // 状态
+  'CircleCheck': 'circle-check',
+  'CircleClose': 'circle-xmark',
+  'CircleCloseFilled': 'circle-xmark',
+  'SuccessFilled': 'circle-check',
+  'WarningFilled': 'triangle-exclamation',
+  'InfoFilled': 'circle-info',
+  'QuestionFilled': 'circle-question',
+
+  // 功能
+  'Share': 'share-nodes',
+  'Star': 'star',
+  'Heart': 'heart',
+  'Bookmark': 'bookmark',
+  'CollectionTag': 'tags',
+  'Tag': 'tag',
+  'PriceTag': 'tag',
+
+  // 消息
+  'ChatLineRound': 'comment',
+  'ChatLineSquare': 'comment',
+  'Message': 'envelope',
+  'Bell': 'bell',
+  'Notification': 'bell',
+
+  // 数据
+  'PieChart': 'chart-pie',
+  'TrendCharts': 'chart-line',
+  'DataAnalysis': 'chart-simple',
+  'List': 'list',
+
+  // 时间
+  'Clock': 'clock',
+  'Timer': 'hourglass',
+  'Calendar': 'calendar',
+
+  // 购物/支付
+  'ShoppingCart': 'cart-shopping',
+  'Coin': 'coins',
+  'Wallet': 'wallet',
+  'TrophyBase': 'trophy',
+
+  // 开发
+  'Tools': 'screwdriver-wrench',
+  'MagicStick': 'wand-magic-sparkles',
+  'Monitor': 'desktop',
+  'ChromeFilled': 'chrome',
+  'ElementPlus': 'code',
+
+  // 安全
+  'Key': 'key',
+  'Shield': 'shield',
+  'Lock': 'lock',
+
+  // 其他
+  'Box': 'box',
+  'Service': 'headset',
+  'Camera': 'camera',
+  'Postcard': 'address-card',
+  'Promotion': 'bullhorn',
+  'Reading': 'book-open',
+  'ZoomIn': 'magnifying-glass-plus',
+  'ZoomOut': 'magnifying-glass-minus',
+};
+
+/**
+ * 获取 FontAwesome 图标名称
+ * @param elementPlusIcon Element Plus 图标名称
+ * @returns FontAwesome 图标名称（不含 fa- 前缀）
+ */
+export function getFontAwesomeIcon(elementPlusIcon: string): string {
+  return iconMapping[elementPlusIcon] || elementPlusIcon.toLowerCase();
+}

Yi.Ai.Vue3/src/vue-element-plus-y/assets/mock.ts

@@ -1,705 +0,0 @@
-import type { BubbleProps } from '@components/Bubble/types';
-import type { BubbleListProps } from '@components/BubbleList/types';
-import type { FilesType } from '@components/FilesCard/types';
-
-import type { ThinkingStatus } from '@components/Thinking/types';
-
-// 头像1
-export const avatar1: string =
-  'https://avatars.githubusercontent.com/u/76239030?v=4';
-
-// 头像2
-export const avatar2: string =
-  'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png';
-
-// md 普通内容
-export const mdContent = `
-### 行内公式
-1. 欧拉公式：$e^{i\\pi} + 1 = 0$
-2. 二次方程求根公式：$x = \\frac{-b \\pm \\sqrt{b^2 - 4ac}}{2a}$
-3. 向量点积：$\\vec{a} \\cdot \\vec{b} = a_x b_x + a_y b_y + a_z b_z$
-### []包裹公式
-\\[ e^{i\\pi} + 1 = 0 \\]
-
-\\[\\boxed{boxed包裹}\\]
-
-### 块级公式
-1. 傅里叶变换：
-$$
-F(\\omega) = \\int_{-\\infty}^{\\infty} f(t) e^{-i\\omega t} dt
-$$
-
-2. 矩阵乘法：
-$$
-\\begin{bmatrix}
-a & b \\\\
-c & d
-\\end{bmatrix}
-\\begin{bmatrix}
-x \\\\
-y
-\\end{bmatrix}
-=
-\\begin{bmatrix}
-ax + by \\\\
-cx + dy
-\\end{bmatrix}
-$$
-
-3. 泰勒级数展开：
-$$
-f(x) = \\sum_{n=0}^{\\infty} \\frac{f^{(n)}(a)}{n!} (x - a)^n
-$$
-
-4. 拉普拉斯方程：
-$$
-\\nabla^2 u = \\frac{\\partial^2 u}{\\partial x^2} + \\frac{\\partial^2 u}{\\partial y^2} + \\frac{\\partial^2 u}{\\partial z^2} = 0
-$$
-
-5. 概率密度函数（正态分布）：
-$$
-f(x) = \\frac{1}{\\sqrt{2\\pi\\sigma^2}} e^{-\\frac{(x-\\mu)^2}{2\\sigma^2}}
-$$
-
-# 标题
-这是一个 Markdown 示例。
-- 列表项 1
-- 列表项 2
-**粗体文本** 和 *斜体文本*
-
-- [x] Add some task
-- [ ] Do some task
-`.trim();
-
-// md 代码块高亮
-export const highlightMdContent = `
-#### 切换右侧的secureViewCode进行安全预览或者不启用安全预览模式下 会呈现不同的网页预览效果
-##### 通过enableCodeLineNumber属性开启代码行号
-\`\`\`html
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>炫酷文字动效</title>
-    <style>
-        body { margin: 0; overflow: hidden; }
-        canvas { display: block; }
-        .text-container {
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            text-align: center;
-            pointer-events: none;
-        }
-        h1 {
-            font-family: Arial, sans-serif;
-            font-size: clamp(2rem, 8vw, 5rem);
-            margin: 0;
-            color: white;
-            text-shadow: 0 0 10px rgba(0,0,0,0.3);
-            opacity: 0;
-            animation: fadeIn 3s forwards 0.5s;
-        }
-        @keyframes fadeIn {
-            from { opacity: 0; transform: translateY(20px); }
-            to { opacity: 1; transform: translateY(0); }
-        }
-    </style>
-</head>
-<body>
-    <canvas id="canvas"></canvas>
-    <div class="text-container">
-        <h1 id="main-text">AWESOME TEXT</h1>
-    </div>
-    <script>
-        const canvas = document.getElementById('canvas');
-        const ctx = canvas.getContext('2d');
-        canvas.width = window.innerWidth;
-        canvas.height = window.innerHeight;
-        const text = document.getElementById('main-text');
-
-        class Particle {
-            constructor() {
-                this.x = Math.random() * canvas.width;
-                this.y = Math.random() * canvas.height;
-                this.size = Math.random() * 3 + 1;
-                this.speedX = Math.random() * 3 - 1.5;
-                this.speedY = Math.random() * 3 - 1.5;
-                this.color = \`hsl(\${Math.random() * 360}, 70%, 60%)\`;
-            }
-            update() {
-                this.x += this.speedX;
-                this.y += this.speedY;
-                if (this.size > 0.2) this.size -= 0.01;
-            }
-            draw() {
-                ctx.fillStyle = this.color;
-                ctx.beginPath();
-                ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
-                ctx.fill();
-            }
-        }
-
-        let particles = [];
-        function init() {
-            particles = [];
-            for (let i = 0; i < 200; i++) {
-                particles.push(new Particle());
-            }
-        }
-
-        function animate() {
-            ctx.clearRect(0, 0, canvas.width, canvas.height);
-            for (let i = 0; i < particles.length; i++) {
-                particles[i].update();
-                particles[i].draw();
-                for (let j = i; j < particles.length; j++) {
-                    const dx = particles[i].x - particles[j].x;
-                    const dy = particles[i].y - particles[j].y;
-                    const distance = Math.sqrt(dx * dx + dy * dy);
-                    if (distance < 100) {
-                        ctx.beginPath();
-                        ctx.strokeStyle = \`rgba(255,255,255,\${0.1 - distance/1000})\`;
-                        ctx.lineWidth = 0.5;
-                        ctx.moveTo(particles[i].x, particles[i].y);
-                        ctx.lineTo(particles[j].x, particles[j].y);
-                        ctx.stroke();
-                    }
-                }
-            }
-            requestAnimationFrame(animate);
-        }
-
-        init();
-        animate();
-
-        window.addEventListener('resize', () => {
-            canvas.width = window.innerWidth;
-            canvas.height = window.innerHeight;
-        });
-
-        // 自定义文字功能
-        text.addEventListener('click', () => {
-            const newText = prompt('输入新文字:', text.textContent);
-            if (newText) {
-                text.textContent = newText;
-                text.style.opacity = 0;
-                setTimeout(() => {
-                    text.style.opacity = 1;
-                }, 50);
-            }
-        });
-    </script>
-</body>
-</html>
-\`\`\`
-\`\`\`html
-<div class="product-card">
-  <div class="badge">新品</div>
-  <img src="https://picsum.photos/300/200?product" alt="产品图片">
-
-  <div class="content">
-    <h3>无线蓝牙耳机 Pro</h3>
-    <p class="description">主动降噪技术，30小时续航，IPX5防水等级</p>
-
-    <div class="rating">
-      <span>★★★★☆</span>
-      <span class="reviews">(124条评价)</span>
-    </div>
-
-    <div class="price-container">
-      <span class="price">¥499</span>
-      <span class="original-price">¥699</span>
-      <span class="discount">7折</span>
-    </div>
-
-    <div class="actions">
-      <button class="cart-btn">加入购物车</button>
-      <button class="fav-btn">❤️</button>
-    </div>
-
-    <div class="meta">
-      <span>✓ 次日达</span>
-      <span>✓ 7天无理由</span>
-    </div>
-  </div>
-</div>
-
-<style>
-  .product-card {
-    width: 280px;
-    border-radius: 12px;
-    overflow: hidden;
-    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
-    position: relative;
-    background: white;
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-  }
-
-  .badge {
-    position: absolute;
-    top: 12px;
-    left: 12px;
-    background: #ff6b6b;
-    color: white;
-    padding: 4px 10px;
-    border-radius: 4px;
-    font-weight: bold;
-    font-size: 12px;
-    z-index: 2;
-  }
-
-  img {
-    width: 100%;
-    height: 180px;
-    object-fit: cover;
-    display: block;
-  }
-
-  .content {
-    padding: 16px;
-  }
-
-  h3 {
-    margin: 8px 0;
-    font-size: 18px;
-    color: #333;
-  }
-
-  .description {
-    color: #666;
-    font-size: 14px;
-    margin: 8px 0 12px;
-    line-height: 1.4;
-  }
-
-  .rating {
-    display: flex;
-    align-items: center;
-    margin: 10px 0;
-    color: #ffb300;
-  }
-
-  .reviews {
-    font-size: 13px;
-    color: #888;
-    margin-left: 8px;
-  }
-
-  .price-container {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    margin: 12px 0;
-  }
-
-  .price {
-    font-size: 22px;
-    font-weight: bold;
-    color: #ff4757;
-  }
-
-  .original-price {
-    font-size: 14px;
-    color: #999;
-    text-decoration: line-through;
-  }
-
-  .discount {
-    background: #fff200;
-    padding: 2px 6px;
-    border-radius: 4px;
-    font-size: 12px;
-  }
-
-  .actions {
-    display: flex;
-    gap: 8px;
-    margin: 16px 0 12px;
-  }
-
-  .cart-btn {
-    flex: 1;
-    background: #5352ed;
-    color: white;
-    border: none;
-    padding: 10px;
-    border-radius: 6px;
-    font-weight: bold;
-    cursor: pointer;
-    transition: background 0.2s;
-  }
-
-  .cart-btn:hover {
-    background: #3742fa;
-  }
-
-  .fav-btn {
-    width: 42px;
-    background: white;
-    border: 1px solid #ddd;
-    border-radius: 6px;
-    font-size: 18px;
-    cursor: pointer;
-    transition: all 0.2s;
-  }
-
-  .fav-btn:hover {
-    border-color: #ff6b6b;
-    color: #ff6b6b;
-  }
-
-  .meta {
-    display: flex;
-    gap: 15px;
-    font-size: 13px;
-    color: #2ed573;
-    margin-top: 8px;
-  }
-</style>
-\`\`\`
-###### 非\`commonMark\`语法，dom多个
-<pre>
-<code class="language-java">
-public class HelloWorld {
-  public static void main(String[] args) {
-      System.out.println("Hello, world!");
-  }
-}
-</code>
-</pre>
-\`\`\`echarts
-use codeXRender for echarts render
-\`\`\`
-### javascript
-\`\`\`javascript
-console.log('Hello, world!');
-\`\`\`
-### java
-\`\`\`java
-public class HelloWorld {
-    public static void main(String[] args) {
-        System.out.println("Hello, world!");
-    }
-}
-\`\`\`
-\`\`\`typescript
-import {
-  ArrowDownBold,
-  CopyDocument,
-  Moon,
-  Sunny
-} from '@element-plus/icons-vue';
-import { ElButton, ElSpace } from 'element-plus';
-import { h } from 'vue';
-
-/* ----------------------------------- 按钮组 ---------------------------------- */
-
-/**
- * @description 描述 language标签
- * @date 2025-06-25 17:48:15
- * @author tingfeng
- *
- * @export
- * @param language
- */
-export function languageEle(language: string) {
-  return h(
-    ElSpace,
-    {},
-    {}
-  );
-}
-\`\`\`
-`.trim();
-
-// md 美人鱼图表
-export const mermaidMdContent = `
-
-### mermaid 饼状图
-\`\`\`mermaid
-pie
-    "传媒及文化相关" : 35
-    "广告与市场营销" : 8
-    "游戏开发" : 15
-    "影视动画与特效" : 12
-    "互联网产品设计" : 10
-    "VR/AR开发" : 5
-    "其他" : 15
-\`\`\`
-
-`;
-
-// md 数学公式
-export const mathMdContent = `
-### mermaid 流程图
-\`\`\`mermaid
-graph LR
-    1 --> 2
-    2 --> 3
-    3 --> 4
-    2 --> 1
-    2-3 --> 1-3
-\`\`\`
-\`\`\`mermaid
-flowchart TD
-    Start[开始] --> Check[是否通过？]
-    Check -- 是 --> Pass[流程继续]
-    Check -- 否 --> Reject[流程结束]
-\`\`\`
-\`\`\`mermaid
-flowchart TD
-    %% 前端专项四层结构
-    A["战略层
-    【提升用户体验】"]
-    --> B["架构层
-    【微前端方案选型】"]
-    --> C["框架层
-    【React+TS技术栈】"]
-    --> D["实现层
-    【组件库开发】"]
-    style A fill:#FFD700,stroke:#FFA500
-    style B fill:#87CEFA,stroke:#1E90FF
-    style C fill:#9370DB,stroke:#663399
-    style D fill:#FF6347,stroke:#CD5C5C
-
-\`\`\`
-### mermaid 数学公式
-\`\`\`mermaid
-sequenceDiagram
-    autonumber
-    participant 1 as $$alpha$$
-    participant 2 as $$beta$$
-    1->>2: Solve: $$\sqrt{2+2}$$
-    2-->>1: Answer: $$2$$
-\`\`\`
-
-`;
-export const customAttrContent = `
-<a href="https://element-plus-x.com/">element-plus-x</a>
-<h1>标题1</h1>
-<h2>标题2</h2>
-`;
-export type MessageItem = BubbleProps & {
-  key: number;
-  role: 'ai' | 'user' | 'system';
-  avatar: string;
-  thinkingStatus?: ThinkingStatus;
-  expanded?: boolean;
-};
-
-// md 复杂图表
-export const mermaidComplexMdContent = `
-### Mermaid 渲染复杂图表案例
-\`\`\`mermaid
-graph LR
-    A[用户] -->|请求交互| B[前端应用]
-    B -->|API调用| C[API网关]
-    C -->|认证请求| D[认证服务]
-    C -->|业务请求| E[业务服务]
-    E -->|数据读写| F[数据库]
-    E -->|缓存操作| G[缓存服务]
-    E -->|消息发布| H[消息队列]
-    H -->|触发任务| I[后台任务]
-
-    subgraph "微服务集群"
-        D[认证服务]
-        E[业务服务]
-        I[后台任务]
-    end
-
-    subgraph "数据持久层"
-        F[数据库]
-        G[缓存服务]
-    end
-
-`;
-// animateTestMdContent 为动画测试的 markdown 内容，包含唐代王勃《滕王阁序》并做了格式优化
-// animateTestMdContent 为动画测试的 markdown 内容，包含唐代王勃《滕王阁序》并做了格式优化（部分内容采用表格样式展示）
-export const animateTestMdContent = `
-### 唐代：王勃《滕王阁序》
-
-| 章节 | 内容 |
-| ---- | ---- |
-| 开篇 | 豫章故郡，洪都新府。<br>星分翼轸，地接衡庐。<br>襟三江而带五湖，控蛮荆而引瓯越。<br>物华天宝，龙光射牛斗之墟；人杰地灵，徐孺下陈蕃之榻。<br>雄州雾列，俊采星驰。台隍枕夷夏之交，宾主尽东南之美。<br>都督阎公之雅望，棨戟遥临；宇文新州之懿范，襜帷暂驻。<br>十旬休假，胜友如云；千里逢迎，高朋满座。<br>腾蛟起凤，孟学士之词宗；紫电青霜，王将军之武库。<br>家君作宰，路出名区；童子何知，躬逢胜饯。 |
-| 九月三秋 | 时维九月，序属三秋。<br>潦水尽而寒潭清，烟光凝而暮山紫。<br>俨骖騑于上路，访风景于崇阿。<br>临帝子之长洲，得天人之旧馆。<br>层峦耸翠，上出重霄；飞阁流丹，下临无地。<br>鹤汀凫渚，穷岛屿之萦回；桂殿兰宫，即冈峦之体势。 |
-| 山川景色 | 披绣闼，俯雕甍，山原旷其盈视，川泽纡其骇瞩。<br>闾阎扑地，钟鸣鼎食之家；舸舰迷津，青雀黄龙之舳。<br>云销雨霁，彩彻区明。落霞与孤鹜齐飞，秋水共长天一色。<br>渔舟唱晚，响穷彭蠡之滨，雁阵惊寒，声断衡阳之浦。 |
-| 兴致抒怀 | 遥襟甫畅，逸兴遄飞。爽籁发而清风生，纤歌凝而白云遏。<br>睢园绿竹，气凌彭泽之樽；邺水朱华，光照临川之笔。<br>四美具，二难并。穷睇眄于中天，极娱游于暇日。<br>天高地迥，觉宇宙之无穷；兴尽悲来，识盈虚之有数。<br>望长安于日下，目吴会于云间。地势极而南溟深，天柱高而北辰远。<br>关山难越，谁悲失路之人；萍水相逢，尽是他乡之客。<br>怀帝阍而不见，奉宣室以何年？ |
-| 感慨身世 | 嗟乎！时运不齐，命途多舛。<br>冯唐易老，李广难封。<br>屈贾谊于长沙，非无圣主；窜梁鸿于海曲，岂乏明时？<br>所赖君子见机，达人知命。<br>老当益壮，宁移白首之心？<br>穷且益坚，不坠青云之志。<br>酌贪泉而觉爽，处涸辙以犹欢。<br>北海虽赊，扶摇可接；东隅已逝，桑榆非晚。<br>孟尝高洁，空余报国之情；阮籍猖狂，岂效穷途之哭！ |
-| 自述 | 勃，三尺微命，一介书生。<br>无路请缨，等终军之弱冠；有怀投笔，慕宗悫之长风。<br>舍簪笏于百龄，奉晨昏于万里。<br>非谢家之宝树，接孟氏之芳邻。<br>他日趋庭，叨陪鲤对；今兹捧袂，喜托龙门。<br>杨意不逢，抚凌云而自惜；钟期既遇，奏流水以何惭？ |
-| 结尾 | 呜呼！胜地不常，盛筵难再；兰亭已矣，梓泽丘墟。<br>临别赠言，幸承恩于伟饯；登高作赋，是所望于群公。<br>敢竭鄙怀，恭疏短引；一言均赋，四韵俱成。<br>请洒潘江，各倾陆海云尔。 |
-
----
-
-### 滕王阁诗
-
-> 滕王高阁临江渚，佩玉鸣鸾罢歌舞。  
-> 画栋朝飞南浦云，珠帘暮卷西山雨。  
-> 闲云潭影日悠悠，物换星移几度秋。  
-> 阁中帝子今何在？槛外长江空自流。
-`;
-export const messageArr: BubbleListProps<MessageItem>['list'] = [
-  {
-    key: 1,
-    role: 'ai',
-    placement: 'start',
-    content: '欢迎使用 Element Plus X .'.repeat(5),
-    loading: true,
-    shape: 'corner',
-    variant: 'filled',
-    isMarkdown: false,
-    typing: { step: 2, suffix: '💗' },
-    avatar: avatar2,
-    avatarSize: '32px'
-  },
-  {
-    key: 2,
-    role: 'user',
-    placement: 'end',
-    content: '这是用户的消息',
-    loading: true,
-    shape: 'corner',
-    variant: 'outlined',
-    isMarkdown: false,
-    avatar: avatar1,
-    avatarSize: '32px'
-  },
-  {
-    key: 3,
-    role: 'ai',
-    placement: 'start',
-    content: '欢迎使用 Element Plus X .'.repeat(5),
-    loading: true,
-    shape: 'corner',
-    variant: 'filled',
-    isMarkdown: false,
-    typing: { step: 2, suffix: '💗' },
-    avatar: avatar2,
-    avatarSize: '32px'
-  },
-  {
-    key: 4,
-    role: 'user',
-    placement: 'end',
-    content: '这是用户的消息',
-    loading: true,
-    shape: 'corner',
-    variant: 'outlined',
-    isMarkdown: false,
-    avatar: avatar1,
-    avatarSize: '32px'
-  },
-  {
-    key: 5,
-    role: 'ai',
-    placement: 'start',
-    content: '欢迎使用 Element Plus X .'.repeat(5),
-    loading: true,
-    shape: 'corner',
-    variant: 'filled',
-    isMarkdown: false,
-    typing: { step: 2, suffix: '💗' },
-    avatar: avatar2,
-    avatarSize: '32px'
-  },
-  {
-    key: 6,
-    role: 'user',
-    placement: 'end',
-    content: '这是用户的消息',
-    loading: true,
-    shape: 'corner',
-    variant: 'outlined',
-    isMarkdown: false,
-    avatar: avatar1,
-    avatarSize: '32px'
-  },
-  {
-    key: 7,
-    role: 'ai',
-    placement: 'start',
-    content: '欢迎使用 Element Plus X .'.repeat(5),
-    loading: true,
-    shape: 'corner',
-    variant: 'filled',
-    isMarkdown: false,
-    typing: { step: 2, suffix: '💗', isRequestEnd: true },
-    avatar: avatar2,
-    avatarSize: '32px'
-  },
-  {
-    key: 8,
-    role: 'user',
-    placement: 'end',
-    content: '这是用户的消息',
-    loading: true,
-    shape: 'corner',
-    variant: 'outlined',
-    isMarkdown: false,
-    avatar: avatar1,
-    avatarSize: '32px'
-  }
-];
-
-// 模拟自定义文件卡片数据
-// 内置样式
-export const colorMap: Record<FilesType, string> = {
-  word: '#0078D4',
-  excel: '#00C851',
-  ppt: '#FF5722',
-  pdf: '#E53935',
-  txt: '#424242',
-  mark: '#6C6C6C',
-  image: '#FF80AB',
-  audio: '#FF7878',
-  video: '#8B72F7',
-  three: '#29B6F6',
-  code: '#00008B',
-  database: '#FF9800',
-  link: '#2962FF',
-  zip: '#673AB7',
-  file: '#FFC757',
-  unknown: '#6E9DA4'
-};
-
-// 自己定义文件颜色
-export const colorMap1: Record<FilesType, string> = {
-  word: '#5E74A8',
-  excel: '#4A6B4A',
-  ppt: '#C27C40',
-  pdf: '#5A6976',
-  txt: '#D4C58C',
-  mark: '#FFA500',
-  image: '#8E7CC3',
-  audio: '#A67B5B',
-  video: '#4A5568',
-  three: '#5F9E86',
-  code: '#4B636E',
-  database: '#4A5A6B',
-  link: '#5D7CBA',
-  zip: '#8B5E3C',
-  file: '#AAB2BF',
-  unknown: '#888888'
-};
-
-// 自己定义文件颜色1
-export const colorMap2: Record<FilesType, string> = {
-  word: '#0078D4',
-  excel: '#4CB050',
-  ppt: '#FF9933',
-  pdf: '#E81123',
-  txt: '#666666',
-  mark: '#FFA500',
-  image: '#B490F3',
-  audio: '#00B2EE',
-  video: '#2EC4B6',
-  three: '#00C8FF',
-  code: '#00589F',
-  database: '#F5A623',
-  link: '#007BFF',
-  zip: '#888888',
-  file: '#F0D9B5',
-  unknown: '#D8D8D8'
-};