Merge branch 'card-flip' into ai-hub

This commit is contained in:
chenchun
2025-11-18 10:27:53 +08:00
60 changed files with 3928 additions and 2150 deletions

1
.gitignore vendored
View File

@@ -265,6 +265,7 @@ src/Acme.BookStore.Blazor.Server.Tiered/Logs/*
**/wwwroot/libs/*
public
dist
dist - 副本
.vscode
/Yi.Abp.Net8/src/Yi.Abp.Web/appsettings.Development.json
/Yi.Abp.Net8/src/Yi.Abp.Web/appsettings.Production.json

View File

@@ -60,8 +60,8 @@ namespace Yi.Framework.SqlSugarCore.Abstractions
public bool EnabledSaasMultiTenancy { get; set; } = false;
/// <summary>
/// 并发乐观锁异常,否则不处理
/// 是否开启更新并发乐观锁
/// </summary>
public bool EnabledConcurrencyException { get; set; } = true;
public bool EnabledConcurrencyException { get;set; } = false;
}
}

View File

@@ -1,12 +1,7 @@
using System.Linq;
using System.Linq.Expressions;
using System.Text;
using Microsoft.Extensions.Logging;
using Microsoft.Extensions.Options;
using Nito.AsyncEx;
using SqlSugar;
using Volo.Abp;
using Volo.Abp.Auditing;
using Volo.Abp.Data;
using Volo.Abp.DependencyInjection;
using Volo.Abp.Domain.Entities;
@@ -17,18 +12,17 @@ using Yi.Framework.SqlSugarCore.Abstractions;
namespace Yi.Framework.SqlSugarCore.Repositories
{
public class SqlSugarRepository<TEntity> : ISqlSugarRepository<TEntity>, IRepository<TEntity>
where TEntity : class, IEntity, new()
public class SqlSugarRepository<TEntity> : ISqlSugarRepository<TEntity>, IRepository<TEntity> where TEntity : class, IEntity, new()
{
public ISqlSugarClient _Db => AsyncContext.Run(async () => await GetDbContextAsync());
public ISugarQueryable<TEntity> _DbQueryable => _Db.Queryable<TEntity>();
private readonly ISugarDbContextProvider<ISqlSugarDbContext> _dbContextProvider;
public IAbpLazyServiceProvider LazyServiceProvider { get; set; }
protected DbConnOptions? Options => LazyServiceProvider?.LazyGetService<IOptions<DbConnOptions>>().Value;
/// <summary>
/// 异步查询执行器
/// </summary>
@@ -64,26 +58,22 @@ namespace Yi.Framework.SqlSugarCore.Repositories
#region Abp模块
public virtual async Task<TEntity?> FindAsync(Expression<Func<TEntity, bool>> predicate,
bool includeDetails = true, CancellationToken cancellationToken = default)
public virtual async Task<TEntity?> FindAsync(Expression<Func<TEntity, bool>> predicate, bool includeDetails = true, CancellationToken cancellationToken = default)
{
return await GetFirstAsync(predicate);
}
public virtual async Task<TEntity> GetAsync(Expression<Func<TEntity, bool>> predicate,
bool includeDetails = true, CancellationToken cancellationToken = default)
public virtual async Task<TEntity> GetAsync(Expression<Func<TEntity, bool>> predicate, bool includeDetails = true, CancellationToken cancellationToken = default)
{
return await GetFirstAsync(predicate);
}
public virtual async Task DeleteAsync(Expression<Func<TEntity, bool>> predicate, bool autoSave = false,
CancellationToken cancellationToken = default)
public virtual async Task DeleteAsync(Expression<Func<TEntity, bool>> predicate, bool autoSave = false, CancellationToken cancellationToken = default)
{
await this.DeleteAsync(predicate);
}
public virtual async Task DeleteDirectAsync(Expression<Func<TEntity, bool>> predicate,
CancellationToken cancellationToken = default)
public virtual async Task DeleteDirectAsync(Expression<Func<TEntity, bool>> predicate, CancellationToken cancellationToken = default)
{
await this.DeleteAsync(predicate);
}
@@ -113,71 +103,60 @@ namespace Yi.Framework.SqlSugarCore.Repositories
throw new NotImplementedException();
}
public virtual async Task<List<TEntity>> GetListAsync(Expression<Func<TEntity, bool>> predicate,
bool includeDetails = false, CancellationToken cancellationToken = default)
public virtual async Task<List<TEntity>> GetListAsync(Expression<Func<TEntity, bool>> predicate, bool includeDetails = false, CancellationToken cancellationToken = default)
{
return await GetListAsync(predicate);
}
public virtual async Task<TEntity> InsertAsync(TEntity entity, bool autoSave = false,
CancellationToken cancellationToken = default)
public virtual async Task<TEntity> InsertAsync(TEntity entity, bool autoSave = false, CancellationToken cancellationToken = default)
{
return await InsertReturnEntityAsync(entity);
}
public virtual async Task InsertManyAsync(IEnumerable<TEntity> entities, bool autoSave = false,
CancellationToken cancellationToken = default)
public virtual async Task InsertManyAsync(IEnumerable<TEntity> entities, bool autoSave = false, CancellationToken cancellationToken = default)
{
await InsertRangeAsync(entities.ToList());
}
public virtual async Task<TEntity> UpdateAsync(TEntity entity, bool autoSave = false,
CancellationToken cancellationToken = default)
public virtual async Task<TEntity> UpdateAsync(TEntity entity, bool autoSave = false, CancellationToken cancellationToken = default)
{
await UpdateAsync(entity);
return entity;
}
public virtual async Task UpdateManyAsync(IEnumerable<TEntity> entities, bool autoSave = false,
CancellationToken cancellationToken = default)
public virtual async Task UpdateManyAsync(IEnumerable<TEntity> entities, bool autoSave = false, CancellationToken cancellationToken = default)
{
await UpdateRangeAsync(entities.ToList());
}
public virtual async Task DeleteAsync(TEntity entity, bool autoSave = false,
CancellationToken cancellationToken = default)
public virtual async Task DeleteAsync(TEntity entity, bool autoSave = false, CancellationToken cancellationToken = default)
{
await DeleteAsync(entity);
}
public virtual async Task DeleteManyAsync(IEnumerable<TEntity> entities, bool autoSave = false,
CancellationToken cancellationToken = default)
public virtual async Task DeleteManyAsync(IEnumerable<TEntity> entities, bool autoSave = false, CancellationToken cancellationToken = default)
{
await DeleteAsync(entities.ToList());
}
public virtual async Task<List<TEntity>> GetListAsync(bool includeDetails = false,
CancellationToken cancellationToken = default)
public virtual async Task<List<TEntity>> GetListAsync(bool includeDetails = false, CancellationToken cancellationToken = default)
{
return await GetListAsync();
}
public virtual async Task<long> GetCountAsync(CancellationToken cancellationToken = default)
{
return await this.CountAsync(_ => true);
return await this.CountAsync(_=>true);
}
public virtual async Task<List<TEntity>> GetPagedListAsync(int skipCount, int maxResultCount, string sorting,
bool includeDetails = false, CancellationToken cancellationToken = default)
public virtual async Task<List<TEntity>> GetPagedListAsync(int skipCount, int maxResultCount, string sorting, bool includeDetails = false, CancellationToken cancellationToken = default)
{
return await GetPageListAsync(_ => true, skipCount, maxResultCount);
}
#endregion
#region DB快捷操作
public virtual async Task<IDeleteable<TEntity>> AsDeleteable()
{
return (await GetDbSimpleClientAsync()).AsDeleteable();
@@ -192,7 +171,7 @@ namespace Yi.Framework.SqlSugarCore.Repositories
{
return (await GetDbSimpleClientAsync()).AsInsertable(insertObj);
}
public virtual async Task<IInsertable<TEntity>> AsInsertable(TEntity[] insertObjs)
{
return (await GetDbSimpleClientAsync()).AsInsertable(insertObjs);
@@ -232,11 +211,9 @@ namespace Yi.Framework.SqlSugarCore.Repositories
{
return (await GetDbSimpleClientAsync()).AsUpdateable(updateObjs);
}
#endregion
#region SimpleClient模块
public virtual async Task<int> CountAsync(Expression<Func<TEntity, bool>> whereExpression)
{
return await (await GetDbSimpleClientAsync()).CountAsync(whereExpression);
@@ -253,6 +230,7 @@ namespace Yi.Framework.SqlSugarCore.Repositories
{
return await (await GetDbSimpleClientAsync()).DeleteAsync(deleteObj);
}
}
public virtual async Task<bool> DeleteAsync(List<TEntity> deleteObjs)
@@ -272,13 +250,13 @@ namespace Yi.Framework.SqlSugarCore.Repositories
{
if (typeof(ISoftDelete).IsAssignableFrom(typeof(TEntity)))
{
return await (await GetDbSimpleClientAsync()).AsUpdateable()
.SetColumns(nameof(ISoftDelete.IsDeleted), true).Where(whereExpression).ExecuteCommandAsync() > 0;
return await (await GetDbSimpleClientAsync()).AsUpdateable().SetColumns(nameof(ISoftDelete.IsDeleted), true).Where(whereExpression).ExecuteCommandAsync() > 0;
}
else
{
return await (await GetDbSimpleClientAsync()).DeleteAsync(whereExpression);
}
}
public virtual async Task<bool> DeleteByIdAsync(dynamic id)
@@ -286,11 +264,7 @@ namespace Yi.Framework.SqlSugarCore.Repositories
if (typeof(ISoftDelete).IsAssignableFrom(typeof(TEntity)))
{
var entity = await GetByIdAsync(id);
if (entity is null)
{
return false;
}
if (entity == null) return false;
//反射赋值
ReflexHelper.SetModelValue(nameof(ISoftDelete.IsDeleted), true, entity);
return await UpdateAsync(entity);
@@ -311,7 +285,6 @@ namespace Yi.Framework.SqlSugarCore.Repositories
{
return false;
}
//反射赋值
entities.ForEach(e => ReflexHelper.SetModelValue(nameof(ISoftDelete.IsDeleted), true, e));
return await UpdateRangeAsync(entities);
@@ -320,6 +293,7 @@ namespace Yi.Framework.SqlSugarCore.Repositories
{
return await (await GetDbSimpleClientAsync()).DeleteByIdAsync(ids);
}
}
public virtual async Task<TEntity> GetByIdAsync(dynamic id)
@@ -328,6 +302,7 @@ namespace Yi.Framework.SqlSugarCore.Repositories
}
public virtual async Task<TEntity> GetFirstAsync(Expression<Func<TEntity, bool>> whereExpression)
{
return await (await GetDbSimpleClientAsync()).GetFirstAsync(whereExpression);
@@ -343,19 +318,14 @@ namespace Yi.Framework.SqlSugarCore.Repositories
return await (await GetDbSimpleClientAsync()).GetListAsync(whereExpression);
}
public virtual async Task<List<TEntity>> GetPageListAsync(Expression<Func<TEntity, bool>> whereExpression,
int pageNum, int pageSize)
public virtual async Task<List<TEntity>> GetPageListAsync(Expression<Func<TEntity, bool>> whereExpression, int pageNum, int pageSize)
{
return await (await GetDbSimpleClientAsync()).GetPageListAsync(whereExpression,
new PageModel() { PageIndex = pageNum, PageSize = pageSize });
return await (await GetDbSimpleClientAsync()).GetPageListAsync(whereExpression, new PageModel() { PageIndex = pageNum, PageSize = pageSize });
}
public virtual async Task<List<TEntity>> GetPageListAsync(Expression<Func<TEntity, bool>> whereExpression,
int pageNum, int pageSize, Expression<Func<TEntity, object>>? orderByExpression = null,
OrderByType orderByType = OrderByType.Asc)
public virtual async Task<List<TEntity>> GetPageListAsync(Expression<Func<TEntity, bool>> whereExpression, int pageNum, int pageSize, Expression<Func<TEntity, object>>? orderByExpression = null, OrderByType orderByType = OrderByType.Asc)
{
return await (await GetDbSimpleClientAsync()).GetPageListAsync(whereExpression,
new PageModel { PageIndex = pageNum, PageSize = pageSize }, orderByExpression, orderByType);
return await (await GetDbSimpleClientAsync()).GetPageListAsync(whereExpression, new PageModel { PageIndex = pageNum, PageSize = pageSize }, orderByExpression, orderByType);
}
public virtual async Task<TEntity> GetSingleAsync(Expression<Func<TEntity, bool>> whereExpression)
@@ -410,9 +380,9 @@ namespace Yi.Framework.SqlSugarCore.Repositories
public virtual async Task<bool> UpdateAsync(TEntity updateObj)
{
if (typeof(TEntity).IsAssignableTo<IHasConcurrencyStamp>()) //带版本号乐观锁更新
if (Options is not null && Options.EnabledConcurrencyException)
{
if (Options is not null && Options.EnabledConcurrencyException)
if (typeof(TEntity).IsAssignableTo<IHasConcurrencyStamp>()) //带版本号乐观锁更新
{
try
{
@@ -426,24 +396,18 @@ namespace Yi.Framework.SqlSugarCore.Repositories
$"{ex.Message}[更新失败ConcurrencyStamp不是最新版本],entityInfo{updateObj}", ex);
}
}
else
{
int num = await (await GetDbSimpleClientAsync())
.Context.Updateable(updateObj).ExecuteCommandAsync();
return num > 0;
}
}
return await (await GetDbSimpleClientAsync()).UpdateAsync(updateObj);
}
public virtual async Task<bool> UpdateAsync(Expression<Func<TEntity, TEntity>> columns,
Expression<Func<TEntity, bool>> whereExpression)
public virtual async Task<bool> UpdateAsync(Expression<Func<TEntity, TEntity>> columns, Expression<Func<TEntity, bool>> whereExpression)
{
return await (await GetDbSimpleClientAsync()).UpdateAsync(columns, whereExpression);
}
public virtual async Task<bool> UpdateRangeAsync(List<TEntity> updateObjs)
{
return await (await GetDbSimpleClientAsync()).UpdateRangeAsync(updateObjs);
@@ -452,36 +416,30 @@ namespace Yi.Framework.SqlSugarCore.Repositories
#endregion
}
public class SqlSugarRepository<TEntity, TKey> : SqlSugarRepository<TEntity>, ISqlSugarRepository<TEntity, TKey>,
IRepository<TEntity, TKey> where TEntity : class, IEntity<TKey>, new()
public class SqlSugarRepository<TEntity, TKey> : SqlSugarRepository<TEntity>, ISqlSugarRepository<TEntity, TKey>, IRepository<TEntity, TKey> where TEntity : class, IEntity<TKey>, new()
{
public SqlSugarRepository(ISugarDbContextProvider<ISqlSugarDbContext> dbContextProvider) : base(
dbContextProvider)
public SqlSugarRepository(ISugarDbContextProvider<ISqlSugarDbContext> sugarDbContextProvider) : base(sugarDbContextProvider)
{
}
public virtual async Task DeleteAsync(TKey id, bool autoSave = false,
CancellationToken cancellationToken = default)
public virtual async Task DeleteAsync(TKey id, bool autoSave = false, CancellationToken cancellationToken = default)
{
await DeleteByIdAsync(id);
}
public virtual async Task DeleteManyAsync(IEnumerable<TKey> ids, bool autoSave = false,
CancellationToken cancellationToken = default)
public virtual async Task DeleteManyAsync(IEnumerable<TKey> ids, bool autoSave = false, CancellationToken cancellationToken = default)
{
await DeleteByIdsAsync(ids.Select(x => (object)x).ToArray());
}
public virtual async Task<TEntity?> FindAsync(TKey id, bool includeDetails = true,
CancellationToken cancellationToken = default)
public virtual async Task<TEntity?> FindAsync(TKey id, bool includeDetails = true, CancellationToken cancellationToken = default)
{
return await GetByIdAsync(id);
}
public virtual async Task<TEntity> GetAsync(TKey id, bool includeDetails = true,
CancellationToken cancellationToken = default)
public virtual async Task<TEntity> GetAsync(TKey id, bool includeDetails = true, CancellationToken cancellationToken = default)
{
return await GetByIdAsync(id);
}
}
}
}

View File

@@ -14,4 +14,9 @@ public class AnnouncementCacheDto
/// 公告日志列表
/// </summary>
public List<AnnouncementLogDto> Logs { get; set; } = new List<AnnouncementLogDto>();
/// <summary>
/// 跳转链接
/// </summary>
public string? Url { get; set; }
}

View File

@@ -1,3 +1,5 @@
using Yi.Framework.AiHub.Domain.Shared.Enums;
namespace Yi.Framework.AiHub.Application.Contracts.Dtos.Announcement;
/// <summary>
@@ -5,18 +7,38 @@ namespace Yi.Framework.AiHub.Application.Contracts.Dtos.Announcement;
/// </summary>
public class AnnouncementLogDto
{
/// <summary>
/// 日期
/// </summary>
public string Date { get; set; } = string.Empty;
/// <summary>
/// 标题
/// </summary>
public string Title { get; set; } = string.Empty;
public string Title { get; set; }
/// <summary>
/// 内容列表
/// </summary>
public List<string> Content { get; set; } = new List<string>();
/// <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; }
}

View File

@@ -39,12 +39,7 @@ public class CardFlipStatusOutput
/// 本周邀请人数
/// </summary>
public int InvitedCount { get; set; }
/// <summary>
/// 是否已被邀请(被邀请后不可再提供邀请码)
/// </summary>
public bool IsInvited { get; set; }
/// <summary>
/// 翻牌记录
/// </summary>
@@ -54,6 +49,11 @@ public class CardFlipStatusOutput
/// 下次可翻牌提示
/// </summary>
public string? NextFlipTip { get; set; }
/// <summary>
/// 当前用户是否已经填写过邀请码
/// </summary>
public bool IsFilledInviteCode { get; set; }
}
/// <summary>

View File

@@ -0,0 +1,12 @@
using Volo.Abp.Application.Dtos;
using Yi.Framework.Ddd.Application.Contracts;
namespace Yi.Framework.AiHub.Application.Contracts.Dtos.UsageStatistics;
public class PremiumTokenUsageGetListInput : PagedAllResultRequestDto
{
/// <summary>
/// 是否免费
/// </summary>
public bool? IsFree { get; set; }
}

View File

@@ -0,0 +1,57 @@
using Volo.Abp.Application.Dtos;
using Yi.Framework.Ddd.Application.Contracts;
namespace Yi.Framework.AiHub.Application.Contracts.Dtos.UsageStatistics;
public class PremiumTokenUsageGetListOutput : CreationAuditedEntityDto
{
/// <summary>
/// id
/// </summary>
public Guid Id { get; set; }
/// <summary>
/// 用户ID
/// </summary>
public Guid UserId { get; set; }
/// <summary>
/// 包名称
/// </summary>
public string PackageName { get; set; }
/// <summary>
/// 总用量总token数
/// </summary>
public long TotalTokens { get; set; }
/// <summary>
/// 剩余用量剩余token数
/// </summary>
public long RemainingTokens { get; set; }
/// <summary>
/// 已使用token数
/// </summary>
public long UsedTokens { get; set; }
/// <summary>
/// 到期时间
/// </summary>
public DateTime? ExpireDateTime { get; set; }
/// <summary>
/// 是否激活
/// </summary>
public bool IsActive { get; set; }
/// <summary>
/// 购买金额
/// </summary>
public decimal PurchaseAmount { get; set; }
/// <summary>
/// 备注
/// </summary>
public string? Remark { get; set; }
}

View File

@@ -11,5 +11,5 @@ public interface IAnnouncementService
/// 获取公告信息
/// </summary>
/// <returns>公告信息</returns>
Task<AnnouncementOutput> GetAsync();
Task<List<AnnouncementLogDto>> GetAsync();
}

View File

@@ -1,3 +1,4 @@
using Mapster;
using Microsoft.Extensions.Caching.Distributed;
using Microsoft.Extensions.Configuration;
using Volo.Abp.Application.Services;
@@ -14,13 +15,13 @@ namespace Yi.Framework.AiHub.Application.Services;
/// </summary>
public class AnnouncementService : ApplicationService, IAnnouncementService
{
private readonly ISqlSugarRepository<AnnouncementLogAggregateRoot> _announcementRepository;
private readonly ISqlSugarRepository<AnnouncementAggregateRoot> _announcementRepository;
private readonly IConfiguration _configuration;
private readonly IDistributedCache<AnnouncementCacheDto> _announcementCache;
private const string AnnouncementCacheKey = "AiHub:Announcement";
public AnnouncementService(
ISqlSugarRepository<AnnouncementLogAggregateRoot> announcementRepository,
ISqlSugarRepository<AnnouncementAggregateRoot> announcementRepository,
IConfiguration configuration,
IDistributedCache<AnnouncementCacheDto> announcementCache)
{
@@ -32,7 +33,7 @@ public class AnnouncementService : ApplicationService, IAnnouncementService
/// <summary>
/// 获取公告信息
/// </summary>
public async Task<AnnouncementOutput> GetAsync()
public async Task<List<AnnouncementLogDto>> GetAsync()
{
// 使用 GetOrAddAsync 从缓存获取或添加数据缓存1小时
var cacheData = await _announcementCache.GetOrAddAsync(
@@ -44,11 +45,7 @@ public class AnnouncementService : ApplicationService, IAnnouncementService
}
);
return new AnnouncementOutput
{
Version = cacheData?.Version ?? "v1.0.0",
Logs = cacheData?.Logs ?? new List<AnnouncementLogDto>()
};
return cacheData?.Logs ?? new List<AnnouncementLogDto>();
}
/// <summary>
@@ -56,25 +53,15 @@ public class AnnouncementService : ApplicationService, IAnnouncementService
/// </summary>
private async Task<AnnouncementCacheDto> LoadAnnouncementDataAsync()
{
// 从配置文件读取版本号,如果没有配置则使用默认值
var version = _configuration["AiHubVersion"] ?? "v1.0.0";
// 查询所有公告日志,按日期降序排列
var logs = await _announcementRepository._DbQueryable
.OrderByDescending(x => x.Date)
.OrderByDescending(x => x.StartTime)
.ToListAsync();
// 转换为 DTO
var logDtos = logs.Select(log => new AnnouncementLogDto
{
Date = log.Date.ToString("yyyy-MM-dd"),
Title = log.Title,
Content = log.Content
}).ToList();
var logDtos = logs.Adapt<List<AnnouncementLogDto>>();
return new AnnouncementCacheDto
{
Version = version,
Logs = logDtos
};
}

View File

@@ -51,9 +51,8 @@ public class CardFlipService : ApplicationService, ICardFlipService
// 统计本周邀请人数
var invitedCount = await _inviteCodeManager.GetWeeklyInvitationCountAsync(userId, weekStart);
// 检查用户是否已邀请
var isInvited = await _inviteCodeManager.IsUserInvitedAsync(userId);
//当前用户是否已填写过邀请
var isFilledInviteCode = await _inviteCodeManager.IsFilledInviteCodeAsync(userId);
var output = new CardFlipStatusOutput
{
TotalFlips = task?.TotalFlips ?? 0,
@@ -63,8 +62,8 @@ public class CardFlipService : ApplicationService, ICardFlipService
CanFlip = _cardFlipManager.CanFlipCard(task),
MyInviteCode = inviteCode?.Code,
InvitedCount = invitedCount,
IsInvited = isInvited,
FlipRecords = BuildFlipRecords(task)
FlipRecords = BuildFlipRecords(task),
IsFilledInviteCode = isFilledInviteCode
};
// 生成提示信息
@@ -87,7 +86,7 @@ public class CardFlipService : ApplicationService, ICardFlipService
// 如果中奖,发放奖励
if (result.IsWin)
{
await GrantRewardAsync(userId, result.RewardAmount, $"翻牌活动{input.FlipNumber}中奖");
await GrantRewardAsync(userId, result.RewardAmount, $"翻牌活动-序号{input.FlipNumber}中奖");
}
// 构建输出
@@ -147,7 +146,6 @@ public class CardFlipService : ApplicationService, ICardFlipService
{
MyInviteCode = inviteCode?.Code,
InvitedCount = invitedCount,
IsInvited = inviteCode?.IsUserInvited ?? false,
InvitationHistory = invitationHistory.Select(x => new InvitationHistoryItem
{
InvitedUserName = x.InvitedUserName,
@@ -183,6 +181,9 @@ public class CardFlipService : ApplicationService, ICardFlipService
var flippedOrder = task != null ? _cardFlipManager.GetFlippedOrder(task) : new List<int>();
var flippedNumbers = new HashSet<int>(flippedOrder);
// 获取中奖记录
var winRecords = task?.WinRecords ?? new Dictionary<int, long>();
// 构建记录按照原始序号1-10排列
for (int i = 1; i <= CardFlipManager.TOTAL_MAX_FLIPS; i++)
{
@@ -202,23 +203,11 @@ public class CardFlipService : ApplicationService, ICardFlipService
{
var flipOrderIndex = flippedOrder.IndexOf(i) + 1; // 第几次翻的1-based
// 第8次翻的卡中奖
if (flipOrderIndex == 8)
// 检查这次翻牌是否中奖
if (winRecords.TryGetValue(flipOrderIndex, out var rewardAmount))
{
record.IsWin = true;
record.RewardAmount = task.EighthRewardAmount;
}
// 第9次翻的卡中奖
else if (flipOrderIndex == 9)
{
record.IsWin = true;
record.RewardAmount = task.NinthRewardAmount;
}
// 第10次翻的卡中奖
else if (flipOrderIndex == 10)
{
record.IsWin = true;
record.RewardAmount = task.TenthRewardAmount;
record.RewardAmount = rewardAmount;
}
}
@@ -246,10 +235,10 @@ public class CardFlipService : ApplicationService, ICardFlipService
{
if (status.TotalFlips >= 7)
{
return $"本周使用他人邀请码可解锁{status.RemainingInviteFlips}次翻牌,且必中大奖!每次中奖最大额度将翻倍!";
return $"本周使用他人邀请码或他人使用你的邀请码,可解锁{status.RemainingInviteFlips}次翻牌且必中大奖!每次中奖最大额度将翻倍!";
}
return $"本周使用他人邀请码可解锁{status.RemainingInviteFlips}次翻牌,必中大奖!每次中奖最大额度将翻倍!";
return $"本周使用他人邀请码或他人使用你的邀请码,可解锁{status.RemainingInviteFlips}次翻牌必中大奖!每次中奖最大额度将翻倍!";
}
return "继续加油!";

View File

@@ -1,5 +1,8 @@
using Mapster;
using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Mvc;
using SqlSugar;
using Volo.Abp.Application.Dtos;
using Volo.Abp.Application.Services;
using Volo.Abp.Users;
using Yi.Framework.AiHub.Application.Contracts.Dtos.UsageStatistics;
@@ -7,6 +10,7 @@ using Yi.Framework.AiHub.Application.Contracts.IServices;
using Yi.Framework.AiHub.Domain.Entities;
using Yi.Framework.AiHub.Domain.Entities.Chat;
using Yi.Framework.AiHub.Domain.Extensions;
using Yi.Framework.Ddd.Application.Contracts;
using Yi.Framework.SqlSugarCore.Abstractions;
namespace Yi.Framework.AiHub.Application.Services;
@@ -137,4 +141,27 @@ public class UsageStatisticsService : ApplicationService, IUsageStatisticsServic
return result;
}
/// <summary>
/// 获取当前用户尊享服务token用量统计列表
/// </summary>
/// <returns></returns>
[HttpGet("usage-statistics/premium-token-usage/list")]
public async Task<PagedResultDto<PremiumTokenUsageGetListOutput>> GetPremiumTokenUsageListAsync(
PremiumTokenUsageGetListInput input)
{
var userId = CurrentUser.GetId();
RefAsync<int> total = 0;
// 获取尊享包Token信息
var entities = await _premiumPackageRepository._DbQueryable
.Where(x => x.UserId == userId)
.WhereIF(input.IsFree == false, x => x.PurchaseAmount > 0)
.WhereIF(input.IsFree == true, x => x.PurchaseAmount == 0)
.WhereIF(input.StartTime is not null && input.EndTime is not null,
x => x.CreationTime >= input.StartTime && x.CreationTime <= input.EndTime)
.OrderByDescending(x => x.CreationTime)
.ToPageListAsync(input.SkipCount, input.MaxResultCount, total);
return new PagedResultDto<PremiumTokenUsageGetListOutput>(total,
entities.Adapt<List<PremiumTokenUsageGetListOutput>>());
}
}

View File

@@ -0,0 +1,7 @@
namespace Yi.Framework.AiHub.Domain.Shared.Enums;
public enum AnnouncementTypeEnum
{
Activity=1,
System=2
}

View File

@@ -0,0 +1,57 @@
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_Announcement")]
public class AnnouncementAggregateRoot : FullAuditedAggregateRoot<Guid>
{
public AnnouncementAggregateRoot()
{
}
/// <summary>
/// 标题
/// </summary>
public string Title { get; set; } = string.Empty;
/// <summary>
/// 内容列表JSON格式存储
/// </summary>
[SugarColumn(IsJson = true, IsNullable = false)]
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; }
}

View File

@@ -1,44 +0,0 @@
using SqlSugar;
using Volo.Abp.Domain.Entities.Auditing;
namespace Yi.Framework.AiHub.Domain.Entities;
/// <summary>
/// 公告日志
/// </summary>
[SugarTable("Ai_AnnouncementLog")]
[SugarIndex($"index_{nameof(Date)}", nameof(Date), OrderByType.Desc)]
public class AnnouncementLogAggregateRoot : FullAuditedAggregateRoot<Guid>
{
public AnnouncementLogAggregateRoot()
{
}
public AnnouncementLogAggregateRoot(DateTime date, string title, List<string> content)
{
Date = date;
Title = title;
Content = content;
}
/// <summary>
/// 日期
/// </summary>
public DateTime Date { get; set; }
/// <summary>
/// 标题
/// </summary>
public string Title { get; set; } = string.Empty;
/// <summary>
/// 内容列表JSON格式存储
/// </summary>
[SugarColumn(IsJson = true, IsNullable = false)]
public List<string> Content { get; set; } = new List<string>();
/// <summary>
/// 备注
/// </summary>
public string? Remark { get; set; }
}

View File

@@ -25,9 +25,8 @@ public class CardFlipTaskAggregateRoot : FullAuditedAggregateRoot<Guid>
BonusFlipsUsed = 0;
InviteFlipsUsed = 0;
IsFirstFlipDone = false;
HasNinthReward = false;
HasTenthReward = false;
FlippedOrder = new List<int>();
WinRecords = new Dictionary<int, long>();
}
/// <summary>
@@ -66,34 +65,10 @@ public class CardFlipTaskAggregateRoot : FullAuditedAggregateRoot<Guid>
public bool IsFirstFlipDone { get; set; }
/// <summary>
/// 是否已获得第8次奖励
/// 中奖记录以翻牌顺序为key例如第1次翻牌中奖则key为1奖励金额为value
/// </summary>
public bool HasEighthReward { get; set; }
/// <summary>
/// 第8次奖励金额100-300w
/// </summary>
public long? EighthRewardAmount { get; set; }
/// <summary>
/// 是否已获得第9次奖励
/// </summary>
public bool HasNinthReward { get; set; }
/// <summary>
/// 第9次奖励金额100-500w
/// </summary>
public long? NinthRewardAmount { get; set; }
/// <summary>
/// 是否已获得第10次奖励
/// </summary>
public bool HasTenthReward { get; set; }
/// <summary>
/// 第10次奖励金额100-1000w
/// </summary>
public long? TenthRewardAmount { get; set; }
[SugarColumn(IsJson = true, IsNullable = true)]
public Dictionary<int, long>? WinRecords { get; set; }
/// <summary>
/// 备注信息
@@ -135,33 +110,17 @@ public class CardFlipTaskAggregateRoot : FullAuditedAggregateRoot<Guid>
}
/// <summary>
/// 记录第8次奖励
/// 记录中奖
/// </summary>
/// <param name="flipCount">第几次翻牌1-10</param>
/// <param name="amount">奖励金额</param>
public void SetEighthReward(long amount)
public void SetWinReward(int flipCount, long amount)
{
HasEighthReward = true;
EighthRewardAmount = amount;
}
/// <summary>
/// 记录第9次奖励
/// </summary>
/// <param name="amount">奖励金额</param>
public void SetNinthReward(long amount)
{
HasNinthReward = true;
NinthRewardAmount = amount;
}
/// <summary>
/// 记录第10次奖励
/// </summary>
/// <param name="amount">奖励金额</param>
public void SetTenthReward(long amount)
{
HasTenthReward = true;
TenthRewardAmount = amount;
if (WinRecords == null)
{
WinRecords = new Dictionary<int, long>();
}
WinRecords[flipCount] = amount;
}
}

View File

@@ -19,8 +19,6 @@ public class InviteCodeAggregateRoot : FullAuditedAggregateRoot<Guid>
{
UserId = userId;
Code = code;
IsUsed = false;
IsUserInvited = false;
UsedCount = 0;
}
@@ -34,55 +32,16 @@ public class InviteCodeAggregateRoot : FullAuditedAggregateRoot<Guid>
/// </summary>
[SugarColumn(Length = 50)]
public string Code { get; set; } = string.Empty;
/// <summary>
/// 是否已被使用(一个邀请码只能被使用一次
/// </summary>
public bool IsUsed { get; set; }
/// <summary>
/// 邀请码拥有者是否已被他人邀请(被邀请后不可再提供邀请码)
/// </summary>
public bool IsUserInvited { get; set; }
/// <summary>
/// 被使用次数(统计用)
/// 被使用次数(统计用,一个邀请码可以被多人使用
/// </summary>
public int UsedCount { get; set; }
/// <summary>
/// 使用时间
/// </summary>
public DateTime? UsedTime { get; set; }
/// <summary>
/// 使用人ID
/// </summary>
public Guid? UsedByUserId { get; set; }
/// <summary>
/// 备注信息
/// </summary>
[SugarColumn(Length = 500, IsNullable = true)]
public string? Remark { get; set; }
/// <summary>
/// 标记邀请码已被使用
/// </summary>
/// <param name="usedByUserId">使用者ID</param>
public void MarkAsUsed(Guid usedByUserId)
{
IsUsed = true;
UsedTime = DateTime.Now;
UsedByUserId = usedByUserId;
UsedCount++;
}
/// <summary>
/// 标记用户已被邀请
/// </summary>
public void MarkUserAsInvited()
{
IsUserInvited = true;
}
}

View File

@@ -24,6 +24,11 @@ public class CardFlipManager : DomainService
private const int NINTH_FLIP = 9; // 第9次翻牌
private const int TENTH_FLIP = 10; // 第10次翻牌
// 前7次免费翻牌奖励配置
private const long FREE_MIN_REWARD = 10000; // 前7次最小奖励 1w
private const long FREE_MAX_REWARD = 30000; // 前7次最大奖励 3w
private const double FREE_WIN_RATE = 0.5; // 前7次中奖概率 50%
private const long EIGHTH_MIN_REWARD = 1000000; // 第8次最小奖励 100w
private const long EIGHTH_MAX_REWARD = 3000000; // 第8次最大奖励 300w
private const long NINTH_MIN_REWARD = 1000000; // 第9次最小奖励 100w
@@ -112,23 +117,23 @@ public class CardFlipManager : DomainService
throw new UserFriendlyException(GetFlipTypeErrorMessage(flipType));
}
// 如果是邀请类型翻牌,必须验证用户本周填写的邀请数量足够
// 如果是邀请类型翻牌,必须验证用户本周的邀请记录数量足够(包括填写别人的邀请码和别人填写我的邀请码)
if (flipType == FlipType.Invite)
{
// 查询本周已使用的邀请码数量
var weeklyInviteCodeUsedCount = await _invitationRecordRepository._DbQueryable
.Where(x => x.InvitedUserId == userId)
// 查询本周作为邀请人或被邀请人的记录数量(双方都会增加翻牌次数)
var weeklyInviteRecordCount = await _invitationRecordRepository._DbQueryable
.Where(x => x.InviterId == userId || x.InvitedUserId == userId)
.Where(x => x.InvitationTime >= weekStart)
.CountAsync();
// 本周填写的邀请码数量必须 >= 即将使用的邀请翻牌次数
// 例如: 要翻第8次(InviteFlipsUsed=0->1), 需要至少填写了1个邀请码
// 要翻第9次(InviteFlipsUsed=1->2), 需要至少填写了2个邀请码
// 要翻第10次(InviteFlipsUsed=2->3), 需要至少填写了3个邀请码
var requiredInviteCodeCount = task.InviteFlipsUsed + 1;
if (weeklyInviteCodeUsedCount < requiredInviteCodeCount)
// 本周邀请记录数量必须 >= 即将使用的邀请翻牌次数
// 例如: 要翻第8次(InviteFlipsUsed=0->1), 需要至少有1条邀请记录我邀请别人或别人邀请我
// 要翻第9次(InviteFlipsUsed=1->2), 需要至少有2条邀请记录
// 要翻第10次(InviteFlipsUsed=2->3), 需要至少有3条邀请记录
var requiredInviteRecordCount = task.InviteFlipsUsed + 1;
if (weeklyInviteRecordCount < requiredInviteRecordCount)
{
throw new UserFriendlyException($"需本周累积使用{requiredInviteCodeCount}个他人邀请码才能解锁第{task.TotalFlips + 1}次翻牌,您还差一个~");
throw new UserFriendlyException($"需本周累积{requiredInviteRecordCount}次邀请记录(填写别人的邀请码或别人填写你的邀请码)才能解锁第{task.TotalFlips + 1}次翻牌");
}
}
@@ -152,18 +157,7 @@ public class CardFlipManager : DomainService
// 如果中奖,记录奖励金额(用于后续查询显示)
if (result.IsWin)
{
if (flipCount == EIGHTH_FLIP)
{
task.SetEighthReward(result.RewardAmount);
}
else if (flipCount == NINTH_FLIP)
{
task.SetNinthReward(result.RewardAmount);
}
else if (flipCount == TENTH_FLIP)
{
task.SetTenthReward(result.RewardAmount);
}
task.SetWinReward(flipCount, result.RewardAmount);
}
await _cardFlipTaskRepository.UpdateAsync(task);
@@ -223,11 +217,24 @@ public class CardFlipManager : DomainService
IsWin = false
};
// 前7次固定失败
var random = new Random();
// 前7次: 50%概率中奖奖励1w-3w
if (flipCount <= 7)
{
result.IsWin = false;
result.RewardDesc = "很遗憾,未中奖";
// 50%概率中奖
if (random.NextDouble() < FREE_WIN_RATE)
{
var rewardAmount = GenerateRandomReward(FREE_MIN_REWARD, FREE_MAX_REWARD);
result.IsWin = true;
result.RewardAmount = rewardAmount;
result.RewardDesc = $"恭喜获得尊享包 {rewardAmount / 10000m:0.##}w tokens!";
}
else
{
result.IsWin = false;
result.RewardDesc = "很遗憾,未中奖";
}
}
// 第8次中奖 (邀请码解锁)
else if (flipCount == EIGHTH_FLIP)
@@ -271,21 +278,24 @@ public class CardFlipManager : DomainService
}
/// <summary>
/// 生成随机奖励金额 (最小单位100w)
/// 生成随机奖励金额
/// </summary>
private long GenerateRandomReward(long min, long max)
{
var random = new Random();
const long unit = 1000000; // 100w的单位
// 将min和max转换为100w的倍数
// 根据最小值判断单位
// 如果min小于100000则使用1w(10000)作为单位否则使用100w(1000000)作为单位
long unit = min < 100000 ? 10000 : 1000000;
// 将min和max转换为单位的倍数
long minUnits = min / unit;
long maxUnits = max / unit;
// 在倍数范围内随机
long randomUnits = random.Next((int)minUnits, (int)maxUnits + 1);
// 返回100w的倍数
// 返回单位的倍数
return randomUnits * unit;
}

View File

@@ -63,14 +63,19 @@ public class InviteCodeManager : DomainService
}
/// <summary>
/// 统计用户本周邀请人数
/// 统计用户本周邀请人数(别人填写我的邀请码的次数/或者我填写别人邀请码)
/// </summary>
public async Task<int> GetWeeklyInvitationCountAsync(Guid userId, DateTime weekStart)
{
return await _invitationRecordRepository._DbQueryable
var inviterCount= await _invitationRecordRepository._DbQueryable
.Where(x => x.InviterId == userId)
.Where(x => x.InvitationTime >= weekStart)
.CountAsync();
var invitedUserIdCount= await _invitationRecordRepository._DbQueryable
.Where(x => x.InvitedUserId == userId)
.Where(x => x.InvitationTime >= weekStart)
.CountAsync();
return inviterCount + invitedUserIdCount;
}
/// <summary>
@@ -91,7 +96,7 @@ public class InviteCodeManager : DomainService
}
/// <summary>
/// 使用邀请码
/// 使用邀请码(双方都增加翻牌次数)
/// </summary>
/// <param name="userId">使用者ID</param>
/// <param name="inviteCode">邀请码</param>
@@ -118,75 +123,40 @@ public class InviteCodeManager : DomainService
{
throw new UserFriendlyException("不能使用自己的邀请码");
}
// 检查当前用户是否已经填写过别人的邀请码(一辈子只能填写一次)
var hasUsedOthersCode = await IsFilledInviteCodeAsync(userId);
// 验证邀请码是否已被使用
if (inviteCodeEntity.IsUsed)
if (hasUsedOthersCode)
{
throw new UserFriendlyException("该邀请码已被使用");
throw new UserFriendlyException("您已经填写过别人的邀请码了,每个账号只能填写一次");
}
// 验证邀请码拥有者是否已被邀请
if (inviteCodeEntity.IsUserInvited)
{
throw new UserFriendlyException("该用户已被邀请,邀请码无效");
}
// 验证本周邀请码使用次数
var weekStart = CardFlipManager.GetWeekStartDate(DateTime.Now);
var weeklyUseCount = await _invitationRecordRepository._DbQueryable
.Where(x => x.InvitedUserId == userId)
.Where(x => x.InvitationTime >= weekStart)
.CountAsync();
if (weeklyUseCount >= CardFlipManager.MAX_INVITE_FLIPS)
{
throw new UserFriendlyException($"本周邀请码使用次数已达上限({CardFlipManager.MAX_INVITE_FLIPS}次),请下周再来");
}
// 检查当前用户的邀请码信息
var myInviteCode = await _inviteCodeRepository._DbQueryable
.Where(x => x.UserId == userId)
.FirstAsync();
// 标记邀请码为已使用
inviteCodeEntity.MarkAsUsed(userId);
// 增加邀请码被使用次数
inviteCodeEntity.UsedCount++;
await _inviteCodeRepository.UpdateAsync(inviteCodeEntity);
// 标记当前用户已被邀请(仅第一次使用邀请码时标记)
if (myInviteCode == null)
{
myInviteCode = new InviteCodeAggregateRoot(userId, GenerateUniqueInviteCode());
myInviteCode.MarkUserAsInvited();
await _inviteCodeRepository.InsertAsync(myInviteCode);
}
else if (!myInviteCode.IsUserInvited)
{
myInviteCode.MarkUserAsInvited();
await _inviteCodeRepository.UpdateAsync(myInviteCode);
}
// 创建邀请记录
// 创建邀请记录(双方都会因为这条记录增加一次翻牌机会)
var invitationRecord = new InvitationRecordAggregateRoot(
inviteCodeEntity.UserId,
userId,
inviteCode);
await _invitationRecordRepository.InsertAsync(invitationRecord);
_logger.LogInformation($"用户 {userId} 使用邀请码 {inviteCode} 成功");
_logger.LogInformation($"用户 {userId} 使用邀请码 {inviteCode} 成功,邀请人 {inviteCodeEntity.UserId} 和被邀请人 {userId} 都增加一次翻牌机会");
return inviteCodeEntity.UserId;
}
/// <summary>
/// 检查用户是否已邀请
/// 检查用户是否已填写过邀请
/// </summary>
public async Task<bool> IsUserInvitedAsync(Guid userId)
public async Task<bool> IsFilledInviteCodeAsync(Guid userId)
{
var inviteCode = await _inviteCodeRepository._DbQueryable
.Where(x => x.UserId == userId)
.FirstAsync();
return inviteCode?.IsUserInvited ?? false;
// 检查当前用户是否已经填写过别人的邀请码(一辈子只能填写一次)
return await _invitationRecordRepository._DbQueryable
.Where(x => x.InvitedUserId == userId)
.AnyAsync();
}
/// <summary>

View File

@@ -1,4 +1,4 @@
namespace Yi.Framework.Rbac.Domain.Shared.Caches;
namespace Yi.Framework.Rbac.Domain.Shared.Caches;
public class FileCacheItem
{

View File

@@ -29,6 +29,7 @@ using Volo.Abp.Swashbuckle;
using Yi.Abp.Application;
using Yi.Abp.SqlsugarCore;
using Yi.Framework.AiHub.Application;
using Yi.Framework.AiHub.Application.Services;
using Yi.Framework.AiHub.Domain.Entities;
using Yi.Framework.AspNetCore;
using Yi.Framework.AspNetCore.Authentication.OAuth;
@@ -354,7 +355,10 @@ namespace Yi.Abp.Web
var app = context.GetApplicationBuilder();
app.UseRouting();
//app.ApplicationServices.GetRequiredService<ISqlSugarDbContext>().SqlSugarClient.CodeFirst.InitTables<AnnouncementLogAggregateRoot>();
// app.ApplicationServices.GetRequiredService<ISqlSugarDbContext>().SqlSugarClient.CodeFirst.InitTables<AnnouncementAggregateRoot>();
// app.ApplicationServices.GetRequiredService<ISqlSugarDbContext>().SqlSugarClient.CodeFirst.InitTables<CardFlipTaskAggregateRoot>();
// app.ApplicationServices.GetRequiredService<ISqlSugarDbContext>().SqlSugarClient.CodeFirst.InitTables<InviteCodeAggregateRoot>();
// app.ApplicationServices.GetRequiredService<ISqlSugarDbContext>().SqlSugarClient.CodeFirst.InitTables<InvitationRecordAggregateRoot>();
//跨域
app.UseCors(DefaultCorsPolicyName);

View File

@@ -0,0 +1,9 @@
{
"permissions": {
"allow": [
"Bash(npx vue-tsc --noEmit)"
],
"deny": [],
"ask": []
}
}

View File

@@ -112,7 +112,7 @@
<body>
<!-- 加载动画容器 -->
<div id="yixinai-loader" class="loader-container">
<div class="loader-title">意心Ai 2.2</div>
<div class="loader-title">意心Ai 2.3</div>
<div class="loader-subtitle">海外地址仅首次访问预计加载约10秒</div>
<div class="loader-logo">
<div class="pulse-box"></div>

View File

@@ -1,37 +1,8 @@
<script setup lang="ts">
import SystemAnnouncementDialog from '@/components/SystemAnnouncementDialog/index.vue';
import { getMockSystemAnnouncements } from '@/data/mockAnnouncementData.ts';
import { useAnnouncementStore } from '@/stores';
const announcementStore = useAnnouncementStore();
// 应用加载时检查是否需要显示公告弹窗
onMounted(async () => {
// 检查是否应该显示弹窗
if (announcementStore.shouldShowDialog) {
try {
// 获取公告数据
// const res = await getSystemAnnouncements();
// 使用模拟数据进行测试
const res = await getMockSystemAnnouncements();
if (res.data) {
announcementStore.setAnnouncementData(res.data);
// 显示弹窗
announcementStore.openDialog();
}
}
catch (error) {
console.error('获取系统公告失败:', error);
// 静默失败,不影响用户体验
}
}
});
</script>
<template>
<router-view />
<!-- 系统公告弹窗 -->
<SystemAnnouncementDialog />
</template>
<style scoped lang="scss"></style>

View File

@@ -1,31 +1,12 @@
import { get } from '@/utils/request'
import type {
ActivityDetailResponse,
AnnouncementDetailResponse,
SystemAnnouncementResponse,
} from './types'
import type { AnnouncementLogDto } from './types';
import { get } from '@/utils/request';
/**
* 获取系统公告和活动数据
* 后端接口: GET /api/app/announcement
* 返回格式: AnnouncementLogDto[]
*/
export function getSystemAnnouncements() {
return get<SystemAnnouncementResponse>('/announcement/system').json()
return get<AnnouncementLogDto[]>('/announcement').json();
}
/**
* 获取活动详情
* @param id 活动ID
*/
export function getActivityDetail(id: string | number) {
return get<ActivityDetailResponse>(`/announcement/activity/${id}`).json()
}
/**
* 获取公告详情
* @param id 公告ID
*/
export function getAnnouncementDetail(id: string | number) {
return get<AnnouncementDetailResponse>(`/announcement/detail/${id}`).json()
}
export * from './types'
export * from './types';

View File

@@ -1,51 +1,18 @@
// 轮播图类型
export interface CarouselItem {
id: number | string
imageUrl: string
link?: string
title?: string
}
// 公告类型(对应后端 AnnouncementTypeEnum
export type AnnouncementType = 'Activity' | 'System'
// 活动类型
export interface Activity {
id: number | string
// 公告DTO对应后端 AnnouncementLogDto
export interface AnnouncementLogDto {
/** 标题 */
title: string
description: string
content: string
coverImage?: string
startTime?: string
endTime?: string
status: 'active' | 'inactive' | 'expired'
createdAt: string
updatedAt?: string
}
// 公告类型
export interface Announcement {
id: number | string
title: string
content: string
type: 'latest' | 'history'
isImportant?: boolean
publishTime: string
createdAt: string
updatedAt?: string
}
// 系统公告响应类型
export interface SystemAnnouncementResponse {
carousels: CarouselItem[]
activities: Activity[]
announcements: Announcement[]
}
// 公告详情响应类型
export interface AnnouncementDetailResponse extends Announcement {
views?: number
}
// 活动详情响应类型
export interface ActivityDetailResponse extends Activity {
views?: number
participantCount?: number
/** 内容列表 */
content: string[]
/** 图片url */
imageUrl?: string | null
/** 开始时间(系统公告时间、活动开始时间) */
startTime: string
/** 活动结束时间 */
endTime?: string | null
/** 公告类型(系统、活动) */
type: AnnouncementType
}

View File

@@ -7,9 +7,10 @@ export interface CardFlipStatusOutput {
canFlip: boolean; // 是否可以翻牌
myInviteCode?: string; // 用户的邀请码
invitedCount: number; // 本周邀请人数
isInvited: boolean; // 是否已被邀请
// isInvited: boolean; // 是否已被邀请
flipRecords: CardFlipRecord[]; // 翻牌记录
nextFlipTip?: string; // 下次可翻牌提示
isFilledInviteCode: boolean;// 当前用户是否已经填写过邀请码
}
// 翻牌记录

View File

@@ -1,5 +1,61 @@
import { get, post } from '@/utils/request';
// 尊享包用量明细DTO
export interface PremiumTokenUsageDto {
/** id */
id: string;
/** 用户ID */
userId: string;
/** 包名称 */
packageName: string;
/** 总用量总token数 */
totalTokens: number;
/** 剩余用量剩余token数 */
remainingTokens: number;
/** 已使用token数 */
usedTokens: number;
/** 到期时间 */
expireDateTime?: string;
/** 是否激活 */
isActive: boolean;
/** 购买金额 */
purchaseAmount: number;
/** 备注 */
remark?: string;
/** 创建时间 */
creationTime?: string;
/** 创建者ID */
creatorId?: string;
}
// 查询参数接口 - 匹配后端 PagedAllResultRequestDto
export interface PremiumTokenUsageQueryParams {
/** 查询开始时间 */
startTime?: string;
/** 查询结束时间 */
endTime?: string;
/** 排序列名 */
orderByColumn?: string;
/** 排序方向ascending/descending */
isAsc?: string;
/** 跳过数量(分页) */
skipCount?: number;
/** 最大返回数量(分页) */
maxResultCount?: number;
/** 是否免费 */
isFree?: boolean;
// 是否为升序排序
isAscending?: boolean;
}
// 分页响应接口
export interface PagedResult<T> {
/** 数据列表 */
items: T[];
/** 总数量 */
totalCount: number;
}
// 获取用户信息
export function getUserInfo() {
return get<any>('/account/ai').json();
@@ -24,3 +80,63 @@ export function getWechatAuth(data: any) {
export function getPremiumTokenPackage() {
return get<any>('/usage-statistics/premium-token-usage').json();
}
// 获取尊享包用量明细列表
export function getPremiumTokenUsageList(params?: PremiumTokenUsageQueryParams) {
return get<PagedResult<PremiumTokenUsageDto>>('/usage-statistics/premium-token-usage/list', params).json();
}
// 查询条件的后端dto,其他查询或者排序由前端自己实现:
// using Volo.Abp.Application.Dtos;
//
// namespace Yi.Framework.Ddd.Application.Contracts
// {
// /// <summary>
// /// 分页查询请求DTO包含时间范围和自定义排序功能
// /// </summary>
// public class PagedAllResultRequestDto : PagedAndSortedResultRequestDto, IPagedAllResultRequestDto
// {
// /// <summary>
// /// 查询开始时间
// /// </summary>
// public DateTime? StartTime { get; set; }
//
// /// <summary>
// /// 查询结束时间
// /// </summary>
// public DateTime? EndTime { get; set; }
//
// /// <summary>
// /// 排序列名
// /// </summary>
// public string? OrderByColumn { get; set; }
//
// /// <summary>
// /// 排序方向ascending/descending
// /// </summary>
// public string? IsAsc { get; set; }
//
// /// <summary>
// /// 是否为升序排序
// /// </summary>
// public bool IsAscending => string.Equals(IsAsc, "ascending", StringComparison.OrdinalIgnoreCase);
//
// private string? _sorting;
//
// /// <summary>
// /// 排序表达式
// /// </summary>
// public override string? Sorting
// {
// get
// {
// if (!string.IsNullOrWhiteSpace(OrderByColumn))
// {
// return $"{OrderByColumn} {(IsAscending ? "ASC" : "DESC")}";
// }
// return _sorting;
// }
// set => _sorting = value;
// }
// }
// }

View File

@@ -7,6 +7,7 @@ import { getQrCode, getQrCodeResult, getUserInfo } from '@/api';
import { useUserStore } from '@/stores';
import { useSessionStore } from '@/stores/modules/session.ts';
import { WECHAT_QRCODE_TYPE } from '@/utils/user.ts';
import { useGuideTour } from '@/hooks/useGuideTour';
const props = defineProps({
type: {
@@ -29,6 +30,7 @@ const userStore = useUserStore();
const router = useRouter();
const sessionStore = useSessionStore();
const isQrCodeError = ref(false);
const { startFullTour } = useGuideTour();
// 二维码倒计时实例
const { start: qrStart, stop: qrStop } = useCountdown(shallowRef(600), {
interval: 1000,
@@ -126,6 +128,11 @@ async function handleLoginSuccess(token: string, refreshToken: string) {
stopPolling();
userStore.setToken(token, refreshToken);
const resUserInfo = await getUserInfo();
// 判断是否为新用户注册时间小于1小时
const creationTime = resUserInfo.data.user.creationTime; // 格式: "2024-11-01 12:01:34"
const isNewUser = checkIsNewUser(creationTime);
userStore.setUserInfo(resUserInfo.data);
// 提示用户
ElMessage.success('登录成功');
@@ -133,6 +140,34 @@ async function handleLoginSuccess(token: string, refreshToken: string) {
await router.replace('/');
await sessionStore.requestSessionList(1, true);
userStore.closeLoginDialog();
// 如果是新用户延迟500ms后自动触发新手引导
if (isNewUser) {
setTimeout(() => {
startFullTour();
}, 500);
}
}
// 判断是否为新用户注册时间距离当前时间小于1小时
function checkIsNewUser(creationTimeStr: string): boolean {
try {
// 解析注册时间字符串 "2024-11-01 12:01:34"
const creationTime = new Date(creationTimeStr.replace(' ', 'T'));
const currentTime = new Date();
// 计算时间差(毫秒)
const timeDiff = currentTime.getTime() - creationTime.getTime();
// 1小时 = 60分钟 * 60秒 * 1000毫秒 = 3600000毫秒
const oneHourInMs = 60 * 60 * 1000;
return timeDiff < oneHourInMs;
}
catch (error) {
console.error('解析注册时间失败:', error);
return false;
}
}
// 处理注册授权

View File

@@ -2,22 +2,17 @@
<script setup lang="ts">
import type { GetSessionListVO } from '@/api/model/types';
import { Lock } from '@element-plus/icons-vue';
import { useRouter } from 'vue-router';
import Popover from '@/components/Popover/index.vue';
import SvgIcon from '@/components/SvgIcon/index.vue';
import { useUserStore } from '@/stores';
import { useModelStore } from '@/stores/modules/model';
import { showProductPackage } from '@/utils/product-package.ts';
import { isUserVip } from '@/utils/user';
const router = useRouter();
const userStore = useUserStore();
const modelStore = useModelStore();
// 检查模型是否可用
function isModelAvailable(item: GetSessionListVO) {
return isUserVip() || item.modelId?.includes('DeepSeek-R1-0528') || userStore.userInfo?.user?.userName === 'cc';
return isUserVip() || item.modelId?.includes('DeepSeek-R1-0528');
}
onMounted(async () => {
@@ -88,11 +83,6 @@ function handleModelClick(item: GetSessionListVO) {
)
.then(() => {
showProductPackage();
// router.push({
// name: 'products', // 使用命名路由
// query: { from: isUserVip() ? 'vip' : 'user' }, // 可选:添加来源标识
// });
})
.catch(() => {
// 点击右上角关闭或“关闭”按钮,不执行任何操作
@@ -110,6 +100,9 @@ function handleModelClick(item: GetSessionListVO) {
规则3彩色流光尊享/高级)
-------------------------------- */
function getModelStyleClass(modelName: any) {
if (!modelName) {
return;
}
const name = modelName.toLowerCase();
// 规则3彩色流光
@@ -156,7 +149,7 @@ function getWrapperClass(item: GetSessionListVO) {
</script>
<template>
<div class="model-select">
<div class="model-select" data-tour="model-select">
<Popover
ref="popoverRef"
placement="top-start"

File diff suppressed because it is too large Load Diff

View File

@@ -98,7 +98,7 @@ function toggleFullscreen() {
<div class="dialog-container">
<!-- 左侧导航 -->
<div class="nav-side">
<div class="nav-side" data-tour="user-nav-menu">
<el-menu
:default-active="activeNav"
class="nav-menu"
@@ -108,6 +108,7 @@ function toggleFullscreen() {
v-for="item in navItems"
:key="item.name"
:index="item.name"
:data-tour="`nav-${item.name}`"
>
<template #title>
<el-icon v-if="item.icon">

View File

@@ -792,7 +792,7 @@ function generateShareContent(): string {
return `
🎁 【意心Ai】我来邀请你翻牌抽奖分享我的限时邀请码~
使用我的邀请码可为你解锁1次额外翻牌机会最大可白嫖官方Claude4.5 220RMB额度 Token💰
填写我的邀请码咱们双方各增加1次翻牌机会最大可白嫖官方Claude4.5 220RMB额度 Token💰
👉 点击链接立即参与我的专属邀请码链接:
${shareLink}
@@ -948,6 +948,7 @@ function getCardClass(record: CardFlipRecord): string[] {
type="primary"
size="small"
icon="Gift"
data-tour="my-invite-code-btn"
@click="showMyInviteCodeDialog = true"
>
我的邀请码
@@ -956,6 +957,7 @@ function getCardClass(record: CardFlipRecord): string[] {
type="warning"
size="small"
icon="Unlock"
data-tour="use-invite-code-btn"
@click="inviteCodeDialog = true"
>
使用邀请码
@@ -964,7 +966,7 @@ function getCardClass(record: CardFlipRecord): string[] {
</div>
<!-- 翻牌区域 -->
<div class="cards-section" :class="{ 'shuffle-mode': isShuffling }">
<div class="cards-section" :class="{ 'shuffle-mode': isShuffling }" data-tour="card-flip-area">
<!-- 洗牌动画遮罩提示 -->
<div v-if="isShuffling" class="shuffle-overlay">
<div class="shuffle-tip">
@@ -1094,27 +1096,42 @@ function getCardClass(record: CardFlipRecord): string[] {
class="invite-dialog"
>
<div class="invite-dialog-content">
<p class="dialog-tip">
输入好友的邀请码可增加翻牌次数必定中奖每次奖励最大额度翻倍使用其他人邀请码自己的邀请码将失效
</p>
<el-input
v-model="inputInviteCode"
placeholder="请输入8位邀请码"
maxlength="8"
clearable
size="large"
class="code-input"
>
<template #prefix>
<span style="font-size: 20px;">🎫</span>
</template>
</el-input>
<!-- 已填写过邀请码的提示 -->
<div v-if="taskData?.isFilledInviteCode" class="already-filled-box">
<span class="filled-icon"></span>
<p class="filled-text">
您已填写过邀请码每人仅能填写一次他人邀请码
</p>
</div>
<template v-else>
<p class="dialog-tip">
输入好友的邀请码双方各增加1次翻牌机会必定中奖每次奖励最大额度翻倍
</p>
<el-input
v-model="inputInviteCode"
placeholder="请输入8位邀请码"
maxlength="8"
clearable
size="large"
class="code-input"
>
<template #prefix>
<span style="font-size: 20px;">🎫</span>
</template>
</el-input>
</template>
</div>
<template #footer>
<el-button @click="inviteCodeDialog = false">
取消
</el-button>
<el-button type="primary" :loading="loading" @click="handleUseInviteCode">
<el-button
v-if="!taskData?.isFilledInviteCode"
type="primary"
:loading="loading"
@click="handleUseInviteCode"
>
确认使用
</el-button>
</template>
@@ -1129,16 +1146,8 @@ function getCardClass(record: CardFlipRecord): string[] {
class="my-invite-dialog"
>
<div class="my-invite-dialog-content">
<!-- 已使用过邀请码的提示 -->
<div v-if="taskData?.isInvited" class="invite-disabled-box">
<span class="disabled-icon">🔒</span>
<p class="disabled-text">
您已使用过他人的邀请码无法生成自己的邀请码
</p>
</div>
<!-- 显示已有的邀请码 -->
<div v-else-if="taskData?.myInviteCode" class="my-invite-code-display">
<div v-if="taskData?.myInviteCode" class="my-invite-code-display">
<div class="code-box">
<span class="code-text">{{ taskData.myInviteCode }}</span>
</div>
@@ -1158,9 +1167,20 @@ function getCardClass(record: CardFlipRecord): string[] {
复制分享链接
</el-button>
</div>
<!-- 显示当前用户是否已填写过邀请码 -->
<div v-if="taskData?.isFilledInviteCode" class="filled-status-info">
<span class="status-icon"></span>
<span class="status-text">您已填写过他人邀请码</span>
</div>
<div v-else class="unfilled-status-info">
<span class="status-icon">💡</span>
<span class="status-text">您还可以填写他人邀请码获得额外机会</span>
</div>
<p class="invite-tip">
💌 分享给好友好友使用后可解锁最后3次翻牌机会
💌 分享给好友好友填写您的邀请码后<br>
<strong>双方各增加1次翻牌机会</strong>
</p>
<div class="share-preview">
<div class="share-preview-title">
📱 分享预览
@@ -1174,7 +1194,7 @@ function getCardClass(record: CardFlipRecord): string[] {
<!-- 生成邀请码 -->
<div v-else class="generate-invite-box">
<p class="generate-tip">
您还没有邀请码生成后可以分享给好友
您还没有邀请码生成后分享给好友<strong>双方各增加1次翻牌机会</strong>
</p>
<el-button
type="primary"
@@ -2050,6 +2070,28 @@ function getCardClass(record: CardFlipRecord): string[] {
font-size: 16px;
}
}
.already-filled-box {
text-align: center;
padding: 24px 16px;
background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
border: 1px solid #bae6fd;
border-radius: 12px;
.filled-icon {
font-size: 48px;
display: block;
margin-bottom: 12px;
}
.filled-text {
font-size: 15px;
color: #0369a1;
line-height: 1.6;
margin: 0;
font-weight: 500;
}
}
}
/* 我的邀请码对话框样式 */
@@ -2109,7 +2151,45 @@ function getCardClass(record: CardFlipRecord): string[] {
font-size: 13px;
color: #909399;
line-height: 1.5;
margin: 0 0 16px 0;
margin: 0 0 12px 0;
strong {
color: #f56c6c;
font-weight: 600;
}
}
.filled-status-info,
.unfilled-status-info {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 8px 12px;
border-radius: 8px;
margin-bottom: 12px;
font-size: 13px;
font-weight: 500;
}
.filled-status-info {
background: #f0fdf4;
border: 1px solid #86efac;
color: #166534;
.status-icon {
font-size: 16px;
}
}
.unfilled-status-info {
background: #fefce8;
border: 1px solid #fde047;
color: #854d0e;
.status-icon {
font-size: 16px;
}
}
.share-preview {
@@ -2169,6 +2249,11 @@ function getCardClass(record: CardFlipRecord): string[] {
color: #606266;
margin-bottom: 20px;
line-height: 1.6;
strong {
color: #f56c6c;
font-weight: 600;
}
}
.el-button {

View File

@@ -0,0 +1,590 @@
<script lang="ts" setup>
import { Clock, Coin, TrophyBase, WarningFilled } from '@element-plus/icons-vue';
import { showProductPackage } from '@/utils/product-package.ts';
// Props
interface Props {
packageData: {
totalQuota: number;
usedQuota: number;
remainingQuota: number;
usagePercentage: number;
packageName: string;
expireDate: string;
};
loading?: boolean;
}
const props = withDefaults(defineProps<Props>(), {
loading: false,
});
// Emits
const emit = defineEmits<{
refresh: [];
}>();
// 计算属性
const usagePercent = computed(() => {
if (props.packageData.totalQuota === 0)
return 0;
return Number(((props.packageData.usedQuota / props.packageData.totalQuota) * 100).toFixed(2));
});
const remainingPercent = computed(() => {
if (props.packageData.totalQuota === 0)
return 0;
return Number(((props.packageData.remainingQuota / props.packageData.totalQuota) * 100).toFixed(2));
});
// 获取进度条颜色(基于剩余百分比)
const progressColor = computed(() => {
const percent = remainingPercent.value;
if (percent <= 10)
return '#f56c6c'; // 红色 - 剩余很少
if (percent <= 30)
return '#e6a23c'; // 橙色 - 剩余较少
return '#67c23a'; // 绿色 - 剩余充足
});
// 格式化数字 - 转换为万为单位
function formatNumber(num: number): string {
if (num === 0)
return '0';
const wan = num / 10000;
// 保留2位小数去掉末尾的0
return wan.toFixed(2).replace(/\.?0+$/, '');
}
// 格式化原始数字(带千分位)
function formatRawNumber(num: number): string {
return num.toLocaleString();
}
function onProductPackage() {
showProductPackage();
}
</script>
<template>
<div v-loading="loading" class="premium-package-info">
<div class="header">
<div class="header-left">
<el-icon class="header-main-icon">
<TrophyBase />
</el-icon>
<div class="header-titles">
<h2 class="main-title">
尊享服务
</h2>
<p class="sub-title">
Premium Service
</p>
</div>
</div>
<el-button
type="primary"
size="default"
@click="emit('refresh')"
>
<el-icon><i-ep-refresh /></el-icon>
刷新数据
</el-button>
</div>
<!-- 套餐信息卡片 -->
<el-card class="package-card" shadow="hover">
<template #header>
<div class="card-header">
<div class="card-header-left">
<el-icon class="header-icon">
<Coin />
</el-icon>
<div class="header-text">
<span class="header-title">尊享TOKEN包总览</span>
<span class="header-subtitle">{{ packageData.packageName }}</span>
</div>
</div>
</div>
</template>
<div class="package-content">
<!-- 统计数据 -->
<div class="stats-grid">
<div class="stat-item total">
<div class="stat-label">
购买总额度
</div>
<div class="stat-value">
{{ formatNumber(packageData.totalQuota) }}
</div>
<div class="stat-unit">
Tokens
</div>
<div class="stat-raw" :title="`原始值: ${formatRawNumber(packageData.totalQuota)} Tokens`">
({{ formatRawNumber(packageData.totalQuota) }})
</div>
</div>
<div class="stat-item used">
<div class="stat-label">
已用额度
</div>
<div class="stat-value">
{{ formatNumber(packageData.usedQuota) }}
</div>
<div class="stat-unit">
Tokens
</div>
<div class="stat-raw" :title="`原始值: ${formatRawNumber(packageData.usedQuota)} Tokens`">
({{ formatRawNumber(packageData.usedQuota) }})
</div>
</div>
<div class="stat-item remaining">
<div class="stat-label">
剩余额度
</div>
<div class="stat-value">
{{ formatNumber(packageData.remainingQuota) }}
</div>
<div class="stat-unit">
Tokens
</div>
<div class="stat-raw" :title="`原始值: ${formatRawNumber(packageData.remainingQuota)} Tokens`">
({{ formatRawNumber(packageData.remainingQuota) }})
</div>
</div>
</div>
<!-- 进度条 -->
<div class="progress-section">
<div class="progress-header">
<span class="progress-label">剩余进度</span>
<span class="progress-percent" :style="{ color: progressColor }">
{{ remainingPercent }}%
</span>
</div>
<el-progress
:percentage="remainingPercent"
:color="progressColor"
:stroke-width="20"
:show-text="false"
/>
<div class="progress-legend">
<div class="legend-item">
<span class="legend-dot " :style="{ background: progressColor }" />
<span class="legend-text">剩余: {{ remainingPercent }}%</span>
</div>
<div class="legend-item">
<span class="legend-dot used-dot" />
<span class="legend-text">已使用: {{ usagePercent }}%</span>
</div>
</div>
</div>
<!-- 购买提示卡片额度不足时显示 -->
<el-card
v-if="remainingPercent < 20"
class="warning-card"
shadow="hover"
>
<div class="warning-content">
<el-icon class="warning-icon" color="#e6a23c">
<WarningFilled />
</el-icon>
<div class="warning-text">
<h3>额度即将用完</h3>
<p>您的Token额度已使用{{ usagePercent }}%剩余额度较少建议及时充值</p>
</div>
<el-button type="warning" @click="onProductPackage()">
立即充值
</el-button>
</div>
</el-card>
<!-- 过期时间 -->
<div v-if="packageData.expireDate" class="expire-info">
<el-icon><Clock /></el-icon>
<span>有效期至: {{ packageData.expireDate }}</span>
</div>
<!-- 温馨提示 -->
<el-alert
class="tips-alert"
type="info"
:closable="false"
show-icon
>
<template #title>
<div class="tips-content">
<p>温馨提示</p>
<ul>
<li>Token额度根据不同模型消耗速率不同</li>
<li>建议合理使用避免额度过快消耗</li>
<li>额度不足时请及时充值避免影响使用</li>
</ul>
</div>
</template>
</el-alert>
</div>
</el-card>
</div>
</template>
<style scoped lang="scss">
.premium-package-info {
width: 100%;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
padding-bottom: 20px;
border-bottom: 2px solid #f0f2f5;
}
.header-left {
display: flex;
align-items: center;
gap: 16px;
}
.header-main-icon {
font-size: 36px;
color: #f59e0b;
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
padding: 12px;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(245, 158, 11, 0.2);
}
.header-titles {
display: flex;
flex-direction: column;
gap: 4px;
}
.main-title {
margin: 0;
font-size: 24px;
font-weight: 700;
color: #1a1a1a;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.sub-title {
margin: 0;
font-size: 13px;
color: #909399;
font-weight: 500;
letter-spacing: 0.5px;
}
/* 套餐卡片 */
.package-card {
border-radius: 16px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
border: 1px solid #f0f2f5;
transition: all 0.3s;
&:hover {
box-shadow: 0 8px 24px rgba(102, 126, 234, 0.12);
border-color: #667eea;
}
:deep(.el-card__header) {
background: linear-gradient(to bottom, #fafbfc 0%, #ffffff 100%);
border-bottom: 2px solid #f0f2f5;
}
}
.card-header {
display: flex;
align-items: center;
justify-content: space-between;
}
.card-header-left {
display: flex;
align-items: center;
gap: 12px;
}
.header-icon {
font-size: 24px;
color: #f59e0b;
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
padding: 8px;
border-radius: 8px;
}
.header-text {
display: flex;
flex-direction: column;
gap: 4px;
}
.header-title {
font-size: 18px;
font-weight: 700;
color: #1a1a1a;
}
.header-subtitle {
font-size: 13px;
color: #909399;
}
.package-content {
display: flex;
flex-direction: column;
gap: 24px;
}
/* 统计数据网格 */
.stats-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.stat-item {
padding: 20px;
border-radius: 8px;
text-align: center;
transition: transform 0.2s;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}
.stat-item:hover {
transform: translateY(-4px);
}
.stat-item.total {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.stat-item.used {
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}
.stat-item.remaining {
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}
.stat-label {
font-size: 14px;
opacity: 0.9;
margin-bottom: 8px;
}
.stat-value {
font-size: 28px;
font-weight: 700;
margin-bottom: 4px;
}
.stat-unit {
font-size: 12px;
opacity: 0.8;
}
.stat-raw {
font-size: 11px;
opacity: 0.7;
margin-top: 4px;
cursor: help;
transition: opacity 0.2s;
}
.stat-raw:hover {
opacity: 1;
}
/* 进度条部分 */
.progress-section {
padding: 20px;
background: #f7f8fa;
border-radius: 8px;
}
.progress-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
}
.progress-label {
font-size: 16px;
font-weight: 600;
color: #333;
}
.progress-percent {
font-size: 20px;
font-weight: 700;
}
.progress-legend {
display: flex;
justify-content: center;
gap: 24px;
margin-top: 12px;
}
.legend-item {
display: flex;
align-items: center;
gap: 6px;
}
.legend-dot {
width: 12px;
height: 12px;
border-radius: 50%;
}
.used-dot {
background: #409eff;
}
.legend-text {
font-size: 14px;
color: #606266;
}
/* 过期信息 */
.expire-info {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 16px;
background: #f0f9ff;
border-radius: 6px;
color: #0369a1;
font-size: 14px;
}
/* 温馨提示 */
.tips-alert {
border-radius: 8px;
}
.tips-content p {
margin: 0 0 8px 0;
font-weight: 600;
}
.tips-content ul {
margin: 0;
padding-left: 20px;
}
.tips-content li {
margin: 4px 0;
font-size: 13px;
}
/* 警告卡片 */
.warning-card {
border-radius: 12px;
border: 2px solid #e6a23c;
background: #fef3e9;
}
.warning-content {
display: flex;
align-items: center;
gap: 16px;
}
.warning-icon {
font-size: 40px;
flex-shrink: 0;
}
.warning-text {
flex: 1;
}
.warning-text h3 {
margin: 0 0 8px 0;
color: #e6a23c;
font-size: 18px;
}
.warning-text p {
margin: 0;
color: #606266;
font-size: 14px;
}
/* 响应式布局 */
@media (max-width: 768px) {
.header {
flex-direction: column;
align-items: flex-start;
gap: 16px;
padding-bottom: 16px;
}
.header-main-icon {
font-size: 28px;
padding: 10px;
}
.main-title {
font-size: 20px;
}
.sub-title {
font-size: 12px;
}
.stats-grid {
grid-template-columns: 1fr;
gap: 12px;
}
.stat-value {
font-size: 24px;
}
.progress-legend {
flex-direction: column;
gap: 8px;
}
.warning-content {
flex-direction: column;
text-align: center;
}
.card-header-left {
gap: 10px;
}
.header-icon {
font-size: 20px;
padding: 6px;
}
.header-title {
font-size: 16px;
}
.header-subtitle {
font-size: 12px;
}
}
</style>

View File

@@ -1,7 +1,7 @@
<script lang="ts" setup>
import { Clock, Coin, TrophyBase, WarningFilled } from '@element-plus/icons-vue';
import { getPremiumTokenPackage } from '@/api/user';
import { showProductPackage } from '@/utils/product-package.ts';
import PremiumPackageInfo from './PremiumPackageInfo.vue';
import PremiumUsageList from './PremiumUsageList.vue';
// 尊享服务数据
const loading = ref(false);
@@ -14,59 +14,8 @@ const packageData = ref<any>({
expireDate: '', // 过期时间
});
// 计算属性
const usagePercent = computed(() => {
if (packageData.value.totalQuota === 0)
return 0;
return Number(((packageData.value.usedQuota / packageData.value.totalQuota) * 100).toFixed(2));
});
const remainingPercent = computed(() => {
if (packageData.value.totalQuota === 0)
return 0;
return Number(((packageData.value.remainingQuota / packageData.value.totalQuota) * 100).toFixed(2));
});
// 获取进度条颜色(基于剩余百分比)
const progressColor = computed(() => {
const percent = remainingPercent.value;
if (percent <= 10)
return '#f56c6c'; // 红色 - 剩余很少
if (percent <= 30)
return '#e6a23c'; // 橙色 - 剩余较少
return '#67c23a'; // 绿色 - 剩余充足
});
// 格式化数字 - 转换为万为单位
function formatNumber(num: number): string {
if (num === 0)
return '0';
const wan = num / 10000;
// 保留2位小数去掉末尾的0
return wan.toFixed(2).replace(/\.?0+$/, '');
}
// 格式化原始数字(带千分位)
function formatRawNumber(num: number): string {
return num.toLocaleString();
}
/*
前端已准备好后端需要提供以下API
接口地址: GET /account/premium/token-package
返回数据格式:
{
"success": true,
"data": {
"totalQuota": 1000000, // 购买总额度
"usedQuota": 350000, // 已使用额度
"remainingQuota": 650000, // 剩余额度(可选,前端会自动计算)
"usagePercentage": 35, // 使用百分比(可选)
"packageName": "尊享VIP套餐", // 套餐名称(可选)
"expireDate": "2024-12-31" // 过期时间(可选)
}
} */
// 子组件引用
const usageListRef = ref<InstanceType<typeof PremiumUsageList>>();
// 获取尊享服务Token包数据
async function fetchPremiumTokenPackage() {
@@ -103,434 +52,86 @@ async function fetchPremiumTokenPackage() {
}
}
// 刷新数据
// 刷新所有数据
function refreshData() {
fetchPremiumTokenPackage();
usageListRef.value?.refresh();
}
onMounted(() => {
fetchPremiumTokenPackage();
});
function onProductPackage() {
showProductPackage();
}
</script>
<template>
<div v-loading="loading" class="premium-service">
<div class="header">
<h2>
<el-icon><TrophyBase /></el-icon>
尊享服务
</h2>
<el-button
type="primary"
size="small"
@click="refreshData"
>
刷新数据
</el-button>
<div class="premium-service">
<!-- 套餐信息 -->
<div data-tour="premium-package-info">
<PremiumPackageInfo
:package-data="packageData"
:loading="loading"
@refresh="refreshData"
/>
</div>
<!-- 套餐信息卡片 -->
<el-card class="package-card" shadow="hover">
<template #header>
<div class="card-header">
<el-icon class="header-icon">
<Coin />
</el-icon>
<span class="header-title">{{ packageData.packageName }}</span>
</div>
</template>
<div class="package-content">
<!-- 统计数据 -->
<div class="stats-grid">
<div class="stat-item total">
<div class="stat-label">
购买总额度
</div>
<div class="stat-value">
{{ formatNumber(packageData.totalQuota) }}
</div>
<div class="stat-unit">
Tokens
</div>
<div class="stat-raw" :title="`原始值: ${formatRawNumber(packageData.totalQuota)} Tokens`">
({{ formatRawNumber(packageData.totalQuota) }})
</div>
</div>
<div class="stat-item used">
<div class="stat-label">
已用额度
</div>
<div class="stat-value">
{{ formatNumber(packageData.usedQuota) }}
</div>
<div class="stat-unit">
Tokens
</div>
<div class="stat-raw" :title="`原始值: ${formatRawNumber(packageData.usedQuota)} Tokens`">
({{ formatRawNumber(packageData.usedQuota) }})
</div>
</div>
<div class="stat-item remaining">
<div class="stat-label">
剩余额度
</div>
<div class="stat-value">
{{ formatNumber(packageData.remainingQuota) }}
</div>
<div class="stat-unit">
Tokens
</div>
<div class="stat-raw" :title="`原始值: ${formatRawNumber(packageData.remainingQuota)} Tokens`">
({{ formatRawNumber(packageData.remainingQuota) }})
</div>
</div>
</div>
<!-- 进度条 -->
<div class="progress-section">
<div class="progress-header">
<span class="progress-label">剩余进度</span>
<span class="progress-percent" :style="{ color: progressColor }">
{{ remainingPercent }}%
</span>
</div>
<el-progress
:percentage="remainingPercent"
:color="progressColor"
:stroke-width="20"
:show-text="false"
/>
<div class="progress-legend">
<div class="legend-item">
<span class="legend-dot " :style="{ background: progressColor }" />
<span class="legend-text">剩余: {{ remainingPercent }}%</span>
</div>
<div class="legend-item">
<span class="legend-dot used-dot" />
<span class="legend-text">已使用: {{ usagePercent }}%</span>
</div>
</div>
</div>
<!-- 购买提示卡片额度不足时显示 -->
<el-card
v-if="remainingPercent < 20"
class="warning-card"
shadow="hover"
>
<div class="warning-content">
<el-icon class="warning-icon" color="#e6a23c">
<WarningFilled />
</el-icon>
<div class="warning-text">
<h3>额度即将用完</h3>
<p>您的Token额度已使用{{ usagePercent }}%剩余额度较少建议及时充值</p>
</div>
<el-button type="warning" @click="onProductPackage()">
立即充值
</el-button>
</div>
</el-card>
<!-- 过期时间 -->
<div v-if="packageData.expireDate" class="expire-info">
<el-icon><Clock /></el-icon>
<span>有效期至: {{ packageData.expireDate }}</span>
</div>
<!-- 温馨提示 -->
<el-alert
class="tips-alert"
type="info"
:closable="false"
show-icon
>
<template #title>
<div class="tips-content">
<p>温馨提示</p>
<ul>
<li>Token额度根据不同模型消耗速率不同</li>
<li>建议合理使用避免额度过快消耗</li>
<li>额度不足时请及时充值避免影响使用</li>
</ul>
</div>
</template>
</el-alert>
</div>
</el-card>
<!-- 额度明细列表 -->
<div class="usage-list-wrapper" data-tour="premium-usage-list">
<PremiumUsageList ref="usageListRef" />
</div>
</div>
</template>
<style scoped>
<style scoped lang="scss">
.premium-service {
padding: 20px;
position: relative;
padding: 24px;
height: 100%;
overflow-y: auto;
background: linear-gradient(to bottom, #f8f9fa 0%, #ffffff 100%);
// 美化滚动条
&::-webkit-scrollbar {
width: 8px;
}
&::-webkit-scrollbar-track {
background: #f1f3f5;
border-radius: 4px;
}
&::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
border-radius: 4px;
&:hover {
background: linear-gradient(180deg, #5568d3 0%, #65408b 100%);
}
}
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
.usage-list-wrapper {
margin-top: 24px;
animation: slideInUp 0.4s ease-out;
}
.header h2 {
display: flex;
align-items: center;
margin: 0;
font-size: 20px;
color: #333;
}
.header .el-icon {
margin-right: 8px;
color: #f59e0b;
}
/* 套餐卡片 */
.package-card {
margin-bottom: 20px;
border-radius: 12px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}
.card-header {
display: flex;
align-items: center;
gap: 8px;
font-size: 18px;
font-weight: 600;
color: #333;
}
.header-icon {
font-size: 20px;
color: #f59e0b;
}
.package-content {
display: flex;
flex-direction: column;
gap: 24px;
}
/* 统计数据网格 */
.stats-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.stat-item {
padding: 20px;
border-radius: 8px;
text-align: center;
transition: transform 0.2s;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}
.stat-item:hover {
transform: translateY(-4px);
}
.stat-item.total {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.stat-item.used {
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}
.stat-item.remaining {
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}
.stat-label {
font-size: 14px;
opacity: 0.9;
margin-bottom: 8px;
}
.stat-value {
font-size: 28px;
font-weight: 700;
margin-bottom: 4px;
}
.stat-unit {
font-size: 12px;
opacity: 0.8;
}
.stat-raw {
font-size: 11px;
opacity: 0.7;
margin-top: 4px;
cursor: help;
transition: opacity 0.2s;
}
.stat-raw:hover {
opacity: 1;
}
/* 进度条部分 */
.progress-section {
padding: 20px;
background: #f7f8fa;
border-radius: 8px;
}
.progress-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
}
.progress-label {
font-size: 16px;
font-weight: 600;
color: #333;
}
.progress-percent {
font-size: 20px;
font-weight: 700;
}
.progress-legend {
display: flex;
justify-content: center;
gap: 24px;
margin-top: 12px;
}
.legend-item {
display: flex;
align-items: center;
gap: 6px;
}
.legend-dot {
width: 12px;
height: 12px;
border-radius: 50%;
}
.used-dot {
background: #409eff;
}
.remaining-dot {
background: #e4e7ed;
}
.legend-text {
font-size: 14px;
color: #606266;
}
/* 过期信息 */
.expire-info {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 16px;
background: #f0f9ff;
border-radius: 6px;
color: #0369a1;
font-size: 14px;
}
/* 温馨提示 */
.tips-alert {
border-radius: 8px;
}
.tips-content p {
margin: 0 0 8px 0;
font-weight: 600;
}
.tips-content ul {
margin: 0;
padding-left: 20px;
}
.tips-content li {
margin: 4px 0;
font-size: 13px;
}
/* 警告卡片 */
.warning-card {
border-radius: 12px;
border: 2px solid #e6a23c;
background: #fef3e9;
}
.warning-content {
display: flex;
align-items: center;
gap: 16px;
}
.warning-icon {
font-size: 40px;
flex-shrink: 0;
}
.warning-text {
flex: 1;
}
.warning-text h3 {
margin: 0 0 8px 0;
color: #e6a23c;
font-size: 18px;
}
.warning-text p {
margin: 0;
color: #606266;
font-size: 14px;
@keyframes slideInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* 响应式布局 */
@media (max-width: 768px) {
.premium-service {
padding: 10px;
padding: 12px;
}
.stats-grid {
grid-template-columns: 1fr;
gap: 12px;
}
.stat-value {
font-size: 24px;
}
.progress-legend {
flex-direction: column;
gap: 8px;
}
.warning-content {
flex-direction: column;
text-align: center;
.usage-list-wrapper {
margin-top: 16px;
}
}
</style>

View File

@@ -0,0 +1,826 @@
<script lang="ts" setup>
import type { PremiumTokenUsageDto, PremiumTokenUsageQueryParams } from '@/api/user';
import { Clock, Refresh } from '@element-plus/icons-vue';
import { getPremiumTokenUsageList } from '@/api/user';
// 额度明细列表
const usageList = ref<PremiumTokenUsageDto[]>([]);
const listLoading = ref(false);
const totalCount = ref(0);
// 查询参数
const queryParams = ref<PremiumTokenUsageQueryParams>({
skipCount: 0,
maxResultCount: 10,
});
// 当前页码
const currentPage = ref(1);
const pageSize = ref(10);
// 筛选条件
const dateRange = ref<[Date, Date] | null>(null);
const freeFilter = ref<boolean | null>(null);
// 快捷时间选择
const shortcuts = [
{
text: '最近一周',
value: () => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
return [start, end];
},
},
{
text: '最近一个月',
value: () => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
return [start, end];
},
},
{
text: '最近三个月',
value: () => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
return [start, end];
},
},
];
// 格式化数字 - 转换为万为单位
function formatNumber(num: number): string {
if (num === 0)
return '0';
const wan = num / 10000;
return wan.toFixed(2).replace(/\.?0+$/, '');
}
// 格式化日期时间
function formatDateTime(dateTime: string): string {
return new Date(dateTime).toLocaleString('zh-CN', {
year: 'numeric',
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit',
});
}
// 获取使用率颜色
function getUsageColor(used: number, total: number): string {
if (total === 0)
return '#e4e7ed';
const percent = (used / total) * 100;
if (percent >= 90)
return '#f56c6c'; // 红色
if (percent >= 70)
return '#e6a23c'; // 橙色
return '#409eff'; // 蓝色
}
// 获取额度明细列表
async function fetchUsageList(resetPage = false) {
if (resetPage) {
currentPage.value = 1;
}
listLoading.value = true;
try {
const params: PremiumTokenUsageQueryParams = {
skipCount: currentPage.value,
maxResultCount: queryParams.value.maxResultCount,
startTime: queryParams.value.startTime,
endTime: queryParams.value.endTime,
orderByColumn: queryParams.value.orderByColumn,
isAsc: queryParams.value.isAsc,
isFree: queryParams.value.isFree,
};
console.log('发送到后端的参数:', params);
const res = await getPremiumTokenUsageList(params);
console.log('后端返回结果:', res);
if (res.data) {
usageList.value = res.data.items || [];
totalCount.value = res.data.totalCount || 0;
}
}
catch (error) {
console.error('获取额度明细列表失败:', error);
ElMessage.error('获取额度明细列表失败');
usageList.value = [];
totalCount.value = 0;
}
finally {
listLoading.value = false;
}
}
// 处理分页
function handlePageChange(page: number) {
console.log('切换页码:', page);
currentPage.value = page;
fetchUsageList();
}
// 处理每页大小变化
function handleSizeChange(size: number) {
console.log('修改每页大小:', size);
pageSize.value = size;
queryParams.value.maxResultCount = size;
currentPage.value = 1;
fetchUsageList();
}
// 处理排序(使用 OrderByColumn 和 IsAsc
function handleSortChange({ prop, order }: { prop: string; order: string | null }) {
console.log('排序变化:', { prop, order });
if (order) {
queryParams.value.orderByColumn = prop;
queryParams.value.isAsc = order === 'ascending' ? 'ascending' : 'descending';
}
else {
queryParams.value.orderByColumn = undefined;
queryParams.value.isAsc = undefined;
}
fetchUsageList(true);
}
// 处理时间筛选
function handleDateChange(value: [Date, Date] | null) {
console.log('时间筛选变化:', value);
if (value && value.length === 2) {
// 设置开始时间为当天00:00:00
const startDate = new Date(value[0]);
startDate.setHours(0, 0, 0, 0);
// 设置结束时间为当天23:59:59
const endDate = new Date(value[1]);
endDate.setHours(23, 59, 59, 999);
queryParams.value.startTime = startDate.toISOString();
queryParams.value.endTime = endDate.toISOString();
console.log('时间范围:', {
start: queryParams.value.startTime,
end: queryParams.value.endTime,
});
}
else {
queryParams.value.startTime = undefined;
queryParams.value.endTime = undefined;
}
fetchUsageList(true); // 重置到第一页并获取数据
}
// 重置筛选
function resetFilters() {
console.log('重置所有筛选条件');
dateRange.value = null;
freeFilter.value = null;
// 重置后端查询参数
queryParams.value = {
maxResultCount: pageSize.value,
orderByColumn: undefined,
isAsc: undefined,
startTime: undefined,
endTime: undefined,
isFree: undefined,
};
fetchUsageList(true);
}
// 处理是否免费筛选
function handleFreeFilterChange(value: boolean | null) {
console.log('是否免费筛选:', value);
queryParams.value.isFree = value === null ? undefined : value;
fetchUsageList(true);
}
// 判断是否有活动的筛选条件
const hasActiveFilters = computed(() => {
return !!dateRange.value || freeFilter.value !== null;
});
// 对外暴露刷新方法
defineExpose({
refresh: fetchUsageList,
});
onMounted(() => {
fetchUsageList();
});
</script>
<template>
<el-card v-loading="listLoading" class="usage-list-card" shadow="hover">
<template #header>
<div class="list-header">
<div class="header-left">
<el-icon class="header-icon">
<i-ep-document />
</el-icon>
<div class="header-text">
<span class="header-title">尊享包额度明细</span>
<!-- <span class="header-subtitle">Premium Package Usage Details</span> -->
</div>
</div>
<div class="header-right">
<el-tag v-if="totalCount > 0" type="primary" size="default" class="count-tag" effect="plain">
<el-icon><i-ep-data-line /></el-icon>
{{ totalCount }} 条记录
</el-tag>
</div>
</div>
</template>
<!-- 筛选工具栏 -->
<div class="filter-toolbar">
<div class="filter-row">
<div class="filter-item">
<el-date-picker
v-model="dateRange"
type="daterange"
range-separator=""
start-placeholder="开始日期"
end-placeholder="结束日期"
size="default"
:shortcuts="shortcuts"
class="date-picker"
format="YYYY-MM-DD"
value-format="YYYY-MM-DD"
:editable="false"
@change="handleDateChange"
/>
</div>
<div class="filter-item">
<el-select
v-model="freeFilter"
placeholder="全部类型"
clearable
size="default"
class="free-select"
@change="handleFreeFilterChange"
>
<el-option label="免费" :value="true" />
<el-option label="付费" :value="false" />
</el-select>
</div>
<div class="filter-actions">
<el-button
v-if="hasActiveFilters"
size="default"
@click="resetFilters"
>
<el-icon><i-ep-refresh-left /></el-icon>
重置
</el-button>
<el-button
type="primary"
size="default"
:icon="Refresh"
@click="fetchUsageList"
>
刷新
</el-button>
</div>
</div>
</div>
<!-- 数据表格 -->
<el-table
:data="usageList"
stripe
class="usage-table"
empty-text="暂无数据"
border
@sort-change="handleSortChange"
>
<el-table-column prop="packageName" label="包名称" min-width="200" sortable show-overflow-tooltip align="center" header-align="center" resizable>
<template #default="{ row }">
<div class="package-name-cell">
<el-icon class="package-icon" color="#409eff">
<i-ep-box />
</el-icon>
<span>{{ row.packageName }}</span>
</div>
</template>
</el-table-column>
<el-table-column label="总额度" min-width="130" prop="totalTokens" sortable align="center" header-align="center" resizable>
<template #default="{ row }">
<div class="token-cell">
<span class="token-value">{{ formatNumber(row.totalTokens) }}</span>
<span class="token-unit"></span>
</div>
</template>
</el-table-column>
<el-table-column label="已使用" min-width="130" prop="usedTokens" sortable align="center" header-align="center" resizable>
<template #default="{ row }">
<div class="token-cell used">
<span class="token-value">{{ formatNumber(row.usedTokens) }}</span>
<span class="token-unit"></span>
</div>
</template>
</el-table-column>
<el-table-column label="剩余" min-width="130" prop="remainingTokens" sortable align="center" header-align="center" resizable>
<template #default="{ row }">
<div class="token-cell remaining">
<span
class="token-value"
:style="{ color: row.remainingTokens > 0 ? '#67c23a' : '#f56c6c', fontWeight: '600' }"
>
{{ formatNumber(row.remainingTokens) }}
</span>
<span class="token-unit"></span>
</div>
</template>
</el-table-column>
<el-table-column label="使用率" min-width="130" align="center" header-align="center" resizable>
<template #default="{ row }">
<div class="usage-progress-cell">
<el-progress
:percentage="row.totalTokens > 0 ? Number(((row.usedTokens / row.totalTokens) * 100).toFixed(1)) : 0"
:color="getUsageColor(row.usedTokens, row.totalTokens)"
:stroke-width="8"
:show-text="true"
:text-inside="false"
>
<template #default="{ percentage }">
<span class="percentage-text">{{ percentage }}%</span>
</template>
</el-progress>
</div>
</template>
</el-table-column>
<el-table-column label="购买金额" min-width="110" prop="purchaseAmount" sortable align="center" header-align="center" resizable>
<template #default="{ row }">
<span class="amount-cell">¥{{ row.purchaseAmount.toFixed(2) }}</span>
</template>
</el-table-column>
<el-table-column label="状态" min-width="90" prop="isActive" sortable align="center" header-align="center" resizable>
<template #default="{ row }">
<el-tag :type="row.isActive ? 'success' : 'info'" size="small" effect="dark">
{{ row.isActive ? '激活' : '未激活' }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="创建时间" min-width="170" prop="creationTime" sortable align="center" header-align="center" resizable>
<template #default="{ row }">
<div v-if="row.creationTime" class="creation-cell">
<el-icon class="creation-icon">
<Clock />
</el-icon>
<span>{{ formatDateTime(row.creationTime) }}</span>
</div>
<span v-else class="no-data">-</span>
</template>
</el-table-column>
<el-table-column label="到期时间" min-width="170" prop="expireDateTime" sortable align="center" header-align="center" resizable>
<template #default="{ row }">
<div v-if="row.expireDateTime" class="expire-cell">
<el-icon class="expire-icon">
<Clock />
</el-icon>
<span>{{ formatDateTime(row.expireDateTime) }}</span>
</div>
<span v-else class="no-data">-</span>
</template>
</el-table-column>
<el-table-column prop="remark" label="备注" min-width="150" show-overflow-tooltip align="center" header-align="center" resizable>
<template #default="{ row }">
<span class="remark-cell">{{ row.remark || '-' }}</span>
</template>
</el-table-column>
</el-table>
<!-- 空状态 -->
<div v-if="!usageList.length && !listLoading" class="empty-container">
<el-empty :description="hasActiveFilters ? '当前筛选条件下无数据' : '暂无明细记录'">
<el-button v-if="hasActiveFilters" type="primary" @click="resetFilters">
清除筛选
</el-button>
</el-empty>
</div>
<!-- 分页 -->
<div v-if="totalCount > 0" class="pagination-container">
<el-pagination
v-model:current-page="currentPage"
v-model:page-size="pageSize"
:page-sizes="[10, 20, 50, 100]"
:total="totalCount"
layout="total, sizes, prev, pager, next, jumper"
prev-text="上一页"
next-text="下一页"
@size-change="handleSizeChange"
@current-change="handlePageChange"
/>
</div>
</el-card>
</template>
<style scoped lang="scss">
/* 额度明细列表卡片 */
.usage-list-card {
border-radius: 16px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
border: 1px solid #f0f2f5;
transition: all 0.3s;
&:hover {
box-shadow: 0 8px 24px rgba(102, 126, 234, 0.12);
border-color: #667eea;
}
:deep(.el-card__header) {
background: linear-gradient(to bottom, #fafbfc 0%, #ffffff 100%);
border-bottom: 2px solid #f0f2f5;
}
}
.list-header {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
.list-header .header-left {
display: flex;
align-items: center;
gap: 12px;
}
.header-icon {
font-size: 24px;
color: #f59e0b;
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
padding: 8px;
border-radius: 8px;
}
.header-text {
display: flex;
flex-direction: column;
gap: 4px;
}
.header-title {
font-size: 18px;
font-weight: 700;
color: #1a1a1a;
}
.header-subtitle {
font-size: 13px;
color: #909399;
}
.header-right {
display: flex;
align-items: center;
gap: 12px;
}
.count-tag {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 16px;
font-weight: 600;
border-radius: 20px;
.el-icon {
font-size: 14px;
}
}
/* 筛选工具栏 */
.filter-toolbar {
margin-bottom: 20px;
padding: 20px;
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
border-radius: 12px;
border: 1px solid #e8eaed;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.filter-row {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
}
.filter-tip {
display: flex;
align-items: center;
gap: 6px;
margin-top: 12px;
padding: 8px 12px;
background: #fff;
border-radius: 4px;
font-size: 13px;
color: #606266;
border-left: 3px solid #409eff;
}
.filter-item {
flex: 0 0 auto;
}
.date-picker {
width: 320px;
}
.free-select {
width: 140px;
}
.filter-actions {
margin-left: auto;
display: flex;
gap: 8px;
}
/* 表格样式 */
.usage-table {
width: 100%;
}
.package-name-cell {
display: flex;
align-items: center;
gap: 8px;
}
.package-icon {
font-size: 16px;
flex-shrink: 0;
}
.usage-progress-cell {
display: flex;
align-items: center;
gap: 8px;
padding: 0 12px;
}
.usage-progress-cell :deep(.el-progress) {
flex: 1;
}
.usage-progress-cell :deep(.el-progress__text) {
font-size: 13px !important;
font-weight: 600;
min-width: 45px;
text-align: right;
}
.percentage-text {
font-size: 13px;
font-weight: 600;
}
.token-cell {
display: flex;
align-items: baseline;
gap: 4px;
justify-content: center;
}
.token-value {
font-size: 14px;
font-weight: 500;
color: #303133;
}
.token-unit {
font-size: 12px;
color: #909399;
}
.amount-cell {
font-weight: 600;
color: #f56c6c;
}
.creation-cell {
display: flex;
align-items: center;
gap: 6px;
color: #606266;
}
.creation-icon {
font-size: 14px;
color: #67c23a;
}
.expire-cell {
display: flex;
align-items: center;
gap: 6px;
color: #606266;
}
.expire-icon {
font-size: 14px;
color: #909399;
}
.remark-cell {
color: #606266;
font-size: 13px;
}
.no-data {
color: #c0c4cc;
}
/* 空状态 */
.empty-container {
padding: 40px 0;
}
/* 分页容器 */
.pagination-container {
margin-top: 20px;
padding: 20px 0;
display: flex;
justify-content: center;
border-top: 2px solid #f0f2f5;
:deep(.el-pagination) {
gap: 8px;
.btn-prev,
.btn-next {
border-radius: 8px;
padding: 0 16px;
border: 1px solid #dcdfe6;
background: #fff;
font-weight: 500;
&:hover {
color: #667eea;
border-color: #667eea;
background: #f5f7fa;
}
}
.el-pager li {
border-radius: 8px;
min-width: 36px;
height: 36px;
line-height: 36px;
border: 1px solid transparent;
transition: all 0.3s;
&:hover {
color: #667eea;
background: #f5f7fa;
}
&.is-active {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #fff;
border-color: transparent;
}
}
.el-pagination__sizes {
.el-select {
.el-input__wrapper {
border-radius: 8px;
}
}
}
.el-pagination__jump {
.el-input__wrapper {
border-radius: 8px;
}
}
}
}
/* 响应式布局 */
@media (max-width: 768px) {
.list-header {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.header-icon {
font-size: 20px;
padding: 6px;
}
.header-title {
font-size: 16px;
}
.header-subtitle {
font-size: 12px;
}
.header-right {
width: 100%;
}
.count-tag {
width: 100%;
justify-content: center;
}
/* 移动端筛选工具栏 */
.filter-toolbar {
padding: 16px;
}
.filter-row {
flex-direction: column;
align-items: stretch;
gap: 10px;
}
.filter-item {
width: 100%;
}
.date-picker,
.free-select {
width: 100%;
}
.filter-actions {
margin-left: 0;
display: flex;
gap: 8px;
}
.filter-actions .el-button {
flex: 1;
}
/* 移动端分页 */
.pagination-container {
padding: 16px 0;
}
.pagination-container :deep(.el-pagination) {
flex-wrap: wrap;
justify-content: center;
gap: 6px;
.btn-prev,
.btn-next {
padding: 0 12px;
font-size: 13px;
}
.el-pager li {
min-width: 32px;
height: 32px;
line-height: 32px;
font-size: 13px;
}
}
}
/* 平板适配 */
@media (min-width: 769px) and (max-width: 1024px) {
.filter-row {
gap: 10px;
}
.search-input {
width: 180px;
}
.date-picker {
width: 280px;
}
}
</style>

View File

@@ -0,0 +1,334 @@
import { driver } from 'driver.js';
import { useGuideTourStore } from '@/stores';
import 'driver.js/dist/driver.css';
// 引导步骤接口
interface TourStep {
element: string;
popover: {
title: string;
description: string;
side?: 'top' | 'right' | 'bottom' | 'left';
align?: 'start' | 'center' | 'end';
};
onHighlightStarted?: () => void;
onDeselected?: () => void;
}
export function useGuideTour() {
const guideTourStore = useGuideTourStore();
// 创建 driver 实例
const driverInstance = ref<ReturnType<typeof driver> | null>(null);
// 初始化 driver
function initDriver() {
driverInstance.value = driver({
showProgress: true,
animate: true,
allowClose: true,
overlayClickNext: false,
stagePadding: 10,
stageRadius: 8,
popoverClass: 'guide-tour-popover',
nextBtnText: '下一步',
prevBtnText: '上一步',
doneBtnText: '完成',
progressText: '{{current}} / {{total}}',
onDestroyed: () => {
guideTourStore.setCurrentPhase('idle');
},
});
}
// Header 区域引导步骤(包含聊天功能)
const headerSteps: TourStep[] = [
{
element: '[data-tour="tutorial-btn"]',
popover: {
title: '新手教程',
description: '欢迎使用意心AI-YiXinAI点击这里可以随时重新查看新手引导教程帮助您快速了解系统功能。',
side: 'bottom',
align: 'center',
},
},
{
element: '[data-tour="model-select"]',
popover: {
title: '模型选择',
description: '点击这里可以切换不同的AI模型每个模型有不同的特点和能力。VIP用户可以更多高级模型。',
side: 'top',
align: 'start',
},
},
{
element: '[data-tour="chat-sender"]',
popover: {
title: '对话输入框',
description: '在这里输入您的问题或指令按回车或点击发送按钮即可与AI对话。支持语音输入',
side: 'top',
align: 'center',
},
},
{
element: '[data-tour="announcement-btn"]',
popover: {
title: '公告/活动',
description: '这里会显示系统公告和最新活动信息,请及时查看以获取重要通知和福利活动。',
side: 'bottom',
align: 'center',
},
},
{
element: '[data-tour="ai-tutorial-link"]',
popover: {
title: 'AI使用教程',
description: '点击这里可以跳转到YiXinAI玩法指南专栏学习更多AI使用技巧和最佳实践。',
side: 'bottom',
align: 'center',
},
},
{
element: '[data-tour="buy-btn"]',
popover: {
title: '立即购买',
description: '点击这里可以成为VIP会员和升级尊享服务享受更多专属服务和权益。',
side: 'bottom',
align: 'center',
},
},
{
element: '[data-tour="user-avatar"]',
popover: {
title: '用户中心',
description: '点击头像可以进入用户中心管理您的账户信息、查看使用统计、API密钥等。接下来将为您详细介绍用户中心的各项功能。',
side: 'bottom',
align: 'end',
},
},
];
// 用户中心弹窗引导步骤
const userCenterSteps: TourStep[] = [
{
element: '[data-tour="user-nav-menu"]',
popover: {
title: '导航菜单',
description: '左侧是功能导航菜单,您可以切换不同的功能模块。接下来我们将逐一介绍各个功能。',
side: 'right',
align: 'start',
},
},
{
element: '[data-tour="nav-user"]',
popover: {
title: '用户信息',
description: '查看您的个人信息,包括头像、昵称等。',
side: 'right',
align: 'center',
},
onHighlightStarted: () => {
guideTourStore.changeUserCenterNav('user');
},
},
{
element: '[data-tour="nav-apiKey"]',
popover: {
title: 'API密钥',
description: '管理您的API密钥用于第三方接入和开发集成。',
side: 'right',
align: 'center',
},
onHighlightStarted: () => {
guideTourStore.changeUserCenterNav('apiKey');
},
},
{
element: '[data-tour="nav-rechargeLog"]',
popover: {
title: '充值记录',
description: '查看您的充值历史和交易记录,了解消费明细。',
side: 'right',
align: 'center',
},
onHighlightStarted: () => {
guideTourStore.changeUserCenterNav('rechargeLog');
},
},
{
element: '[data-tour="nav-usageStatistics"]',
popover: {
title: '用量统计',
description: '查看您的AI模型使用情况和消费统计掌握使用详情。',
side: 'right',
align: 'center',
},
onHighlightStarted: () => {
guideTourStore.changeUserCenterNav('usageStatistics');
},
},
{
element: '[data-tour="nav-premiumService"]',
popover: {
title: '尊享服务',
description: '了解尊享服务包专属特权和服务,我们将详细介绍这个页面的功能。',
side: 'right',
align: 'center',
},
onHighlightStarted: () => {
guideTourStore.changeUserCenterNav('premiumService');
},
},
{
element: '[data-tour="premium-package-info"]',
popover: {
title: '套餐信息',
description: '这里显示您的尊享服务套餐详情,包括总额度、已使用额度、剩余额度等信息。',
side: 'left',
align: 'start',
},
},
{
element: '[data-tour="premium-usage-list"]',
popover: {
title: '额度明细列表',
description: '查看您的额度使用明细记录,包括每次使用的时间、消耗的额度等详细信息。',
side: 'left',
align: 'start',
},
},
{
element: '[data-tour="nav-dailyTask"]',
popover: {
title: '每日任务',
description: '完成每日任务获取额外奖励,提升您的使用体验。',
side: 'right',
align: 'center',
},
onHighlightStarted: () => {
guideTourStore.changeUserCenterNav('dailyTask');
},
},
{
element: '[data-tour="nav-cardFlip"]',
popover: {
title: '每周邀请',
description: '邀请好友加入,获得丰厚奖励。接下来将详细介绍这个页面的各项功能。',
side: 'right',
align: 'center',
},
onHighlightStarted: () => {
guideTourStore.changeUserCenterNav('cardFlip');
},
},
{
element: '[data-tour="card-flip-area"]',
popover: {
title: '每周免费翻牌',
description: '每周您有10次免费翻牌机会前7次为基础免费次数。翻牌可获得Token奖励幸运值随着翻牌次数增加而提升。',
side: 'left',
align: 'start',
},
},
{
element: '[data-tour="use-invite-code-btn"]',
popover: {
title: '使用邀请码',
description: '输入好友的邀请码双方各增加1次翻牌机会填写邀请码后第8-10次翻牌必定中奖每次奖励最大额度翻倍',
side: 'left',
align: 'center',
},
},
{
element: '[data-tour="my-invite-code-btn"]',
popover: {
title: '我的邀请码',
description: '生成您的专属邀请码分享给好友。好友使用您的邀请码后双方各获得1次额外翻牌机会。您可以复制邀请码或分享带邀请码的链接。',
side: 'left',
align: 'center',
},
},
];
// 开始 Header 引导
async function startHeaderTour() {
if (!driverInstance.value) {
initDriver();
}
guideTourStore.setCurrentPhase('header');
// 等待 DOM 更新
await nextTick();
// 配置完成回调,触发用户中心引导
driverInstance.value?.setConfig({
onDestroyStarted: () => {
if (!driverInstance.value?.hasNextStep()) {
// Header 引导完成,触发打开用户中心弹窗
guideTourStore.triggerUserCenterTour();
}
driverInstance.value?.destroy();
},
});
driverInstance.value?.setSteps(headerSteps);
driverInstance.value?.drive();
}
// 开始用户中心引导
async function startUserCenterTour() {
if (!driverInstance.value) {
initDriver();
}
guideTourStore.setCurrentPhase('userCenter');
// 等待弹窗完全打开
await new Promise(resolve => setTimeout(resolve, 500));
// 配置完成回调,关闭弹窗并标记引导完成
driverInstance.value?.setConfig({
onDestroyStarted: () => {
if (!driverInstance.value?.hasNextStep()) {
// 用户中心引导完成,先关闭弹窗
guideTourStore.closeUserCenterDialog();
// 等待弹窗关闭后标记整个引导流程完成
setTimeout(() => {
guideTourStore.markTourCompleted();
}, 500);
}
driverInstance.value?.destroy();
},
});
driverInstance.value?.setSteps(userCenterSteps);
driverInstance.value?.drive();
}
// 开始完整引导流程
async function startFullTour() {
await startHeaderTour();
}
// 销毁 driver 实例
function destroyTour() {
if (driverInstance.value) {
driverInstance.value.destroy();
driverInstance.value = null;
}
}
// 组件卸载时清理
onUnmounted(() => {
destroyTour();
});
return {
startHeaderTour,
startUserCenterTour,
startFullTour,
destroyTour,
};
}

View File

@@ -1,13 +1,15 @@
<!-- 纵向布局作为基础布局 -->
<script setup lang="ts">
import SystemAnnouncementDialog from '@/components/SystemAnnouncementDialog/index.vue';
import { useSafeArea } from '@/hooks/useSafeArea';
import { useWindowWidthObserver } from '@/hooks/useWindowWidthObserver';
import Aside from '@/layouts/components/Aside/index.vue';
import Header from '@/layouts/components/Header/index.vue';
import Main from '@/layouts/components/Main/index.vue';
import { useDesignStore } from '@/stores';
import { useAnnouncementStore, useDesignStore } from '@/stores';
const designStore = useDesignStore();
const announcementStore = useAnnouncementStore();
const isCollapse = computed(() => designStore.isCollapse);
@@ -24,6 +26,16 @@ useSafeArea({
/** 监听窗口大小变化,折叠侧边栏 */
useWindowWidthObserver();
// 应用加载时检查是否需要显示公告弹窗
onMounted(() => {
console.log('announcementStore.shouldShowDialog--', announcementStore.shouldShowDialog);
// 检查是否应该显示弹窗(只有"关闭一周"且未超过7天才不显示
// 数据获取已移至 SystemAnnouncementDialog 组件内部,每次打开弹窗时都会获取最新数据
if (announcementStore.shouldShowDialog) {
announcementStore.openDialog();
}
});
</script>
<template>
@@ -39,6 +51,8 @@ useWindowWidthObserver();
</el-main>
</el-container>
</el-container>
<!-- 系统公告弹窗 -->
<SystemAnnouncementDialog />
</template>
<style lang="scss" scoped>

View File

@@ -385,5 +385,8 @@ function handleMenuCommand(command: string, item: ConversationItem<ChatSessionVo
{
z-index: 0 ;
}
.conversation-group .sticky-title{
z-index: 0 ;
}
}
</style>

View File

@@ -1,35 +1,41 @@
<script setup lang="ts">
import { Bell } from '@element-plus/icons-vue'
import { storeToRefs } from 'pinia'
import { useAnnouncementStore } from '@/stores'
import { Bell } from '@element-plus/icons-vue';
import { storeToRefs } from 'pinia';
import { useAnnouncementStore } from '@/stores';
const announcementStore = useAnnouncementStore()
const { announcements } = storeToRefs(announcementStore)
const announcementStore = useAnnouncementStore();
const { announcements } = storeToRefs(announcementStore);
// 计算未读公告数量(最新公告
// 计算未读公告数量(系统公告数量
const unreadCount = computed(() => {
return announcements.value.filter(a => a.type === 'latest').length
})
if (!Array.isArray(announcements.value))
return 0;
return announcements.value.filter(a => a.type === 'System').length;
});
// 打开公告弹窗
function openAnnouncement() {
announcementStore.openDialog()
announcementStore.openDialog();
}
</script>
<template>
<div class="announcement-btn-container">
<div class="announcement-btn-container" data-tour="announcement-btn">
<el-badge
:value="unreadCount"
:hidden="unreadCount === 0"
:max="99"
is-dot
class="announcement-badge"
>
<!-- :value="unreadCount" -->
<!-- :hidden="unreadCount === 0" -->
<!-- :max="99" -->
<div
class="announcement-btn"
@click="openAnnouncement"
>
<el-icon :size="20">
<!-- PC端显示文字 -->
<span class="pc-text">公告/活动</span>
<!-- 移动端显示图标 -->
<el-icon class="mobile-icon" :size="20">
<Bell />
</el-icon>
</div>
@@ -41,65 +47,52 @@ function openAnnouncement() {
.announcement-btn-container {
display: flex;
align-items: center;
margin-right: 12px;
.announcement-badge {
:deep(.el-badge__content) {
background-color: #f56c6c;
border: none;
font-size: 12px;
height: 18px;
line-height: 18px;
padding: 0 6px;
}
}
.announcement-btn {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: transparent;
gap: 6px;
cursor: pointer;
transition: all 0.3s;
.el-icon {
color: #606266;
transition: color 0.3s;
}
font-size: 1.2rem;
font-weight: bold;
color: #e6a23c;
transition: all 0.2s;
&:hover {
background: rgba(0, 0, 0, 0.05);
color: #ebb563;
transform: translateY(-1px);
}
.el-icon {
color: #409eff;
}
// PC端显示文字隐藏图标
.pc-text {
display: inline;
margin: 0 12px;
}
.mobile-icon {
display: none;
}
}
}
// 移动端适配
@media screen and (max-width: 768px) {
// 移动端显示图标,隐藏文字
@media (max-width: 768px) {
.announcement-btn-container {
margin-right: 8px;
.announcement-btn {
width: 36px;
height: 36px;
.el-icon {
font-size: 18px;
.pc-text {
display: none;
}
}
.announcement-badge {
:deep(.el-badge__content) {
font-size: 10px;
height: 16px;
line-height: 16px;
padding: 0 4px;
.mobile-icon {
display: inline;
}
}
}

View File

@@ -6,7 +6,8 @@ import { computed, nextTick, onMounted, ref, watch } from 'vue';
import { useRouter } from 'vue-router';
import Popover from '@/components/Popover/index.vue';
import SvgIcon from '@/components/SvgIcon/index.vue';
import { useUserStore } from '@/stores';
import { useGuideTour } from '@/hooks/useGuideTour';
import { useGuideTourStore, useUserStore } from '@/stores';
import { useSessionStore } from '@/stores/modules/session';
import { showProductPackage } from '@/utils/product-package';
import { getUserProfilePicture, isUserVip } from '@/utils/user';
@@ -15,6 +16,8 @@ const router = useRouter();
const userStore = useUserStore();
const sessionStore = useSessionStore();
const guideTourStore = useGuideTourStore();
const { startUserCenterTour } = useGuideTour();
// const src = computed(
// () => userStore.userInfo?.avatar ?? 'https://avatars.githubusercontent.com/u/76239030',
@@ -243,6 +246,34 @@ onMounted(() => {
// URL 参数会在对话框关闭时清除
}
});
// ============ 监听引导状态,自动打开用户中心并开始引导 ============
watch(() => guideTourStore.shouldStartUserCenterTour, (shouldStart) => {
if (shouldStart) {
// 清除触发标记
guideTourStore.clearUserCenterTourTrigger();
// 注册导航切换回调
guideTourStore.setUserCenterNavChangeCallback((nav: string) => {
activeNav.value = nav;
});
// 注册关闭弹窗回调
guideTourStore.setUserCenterCloseCallback(() => {
dialogVisible.value = false;
});
// 打开用户中心弹窗
nextTick(() => {
dialogVisible.value = true;
// 等待弹窗打开后开始引导
setTimeout(() => {
startUserCenterTour();
}, 600);
});
}
});
</script>
<template>
@@ -259,7 +290,7 @@ onMounted(() => {
<!-- </a> -->
<!-- </div> -->
<div class="text-1.2xl font-bold text-gray-800 hover:text-blue-600 transition-colors">
<div class="text-1.2xl font-bold text-gray-800 hover:text-blue-600 transition-colors" data-tour="ai-tutorial-link">
<a
href="https://ccnetcore.com/article/3a1bc4d1-6a7d-751d-91cc-2817eb2ddcde"
target="_blank"
@@ -292,6 +323,7 @@ onMounted(() => {
<el-button
class="buy-btn flex items-center gap-2 px-5 py-2 font-semibold shadow-lg"
data-tour="buy-btn"
@click="onProductPackage"
>
<span>立即购买</span>
@@ -321,7 +353,7 @@ onMounted(() => {
</div>
<!-- 头像区域 -->
<div class="avatar-container">
<div class="avatar-container" data-tour="user-avatar">
<Popover
ref="popoverRef"
placement="bottom-end"

View File

@@ -0,0 +1,75 @@
<script setup lang="ts">
import { QuestionFilled } from '@element-plus/icons-vue';
import { useGuideTour } from '@/hooks/useGuideTour';
const { startHeaderTour } = useGuideTour();
// 开始引导教程
function handleStartTutorial() {
startHeaderTour();
}
</script>
<template>
<div class="tutorial-btn-container" data-tour="tutorial-btn">
<div
class="tutorial-btn"
@click="handleStartTutorial"
>
<!-- PC端显示文字 -->
<span class="pc-text">新手引导</span>
<!-- 移动端显示图标 -->
<el-icon class="mobile-icon" :size="20">
<QuestionFilled />
</el-icon>
</div>
</div>
</template>
<style scoped lang="scss">
.tutorial-btn-container {
display: flex;
align-items: center;
.tutorial-btn {
display: flex;
align-items: center;
gap: 6px;
cursor: pointer;
font-size: 1.2rem;
font-weight: bold;
color: #409eff;
transition: all 0.2s;
&:hover {
color: #66b1ff;
transform: translateY(-1px);
}
// PC端显示文字隐藏图标
.pc-text {
display: inline;
margin: 0 12px;
}
.mobile-icon {
display: none;
}
}
}
// 移动端显示图标,隐藏文字
@media (max-width: 768px) {
.tutorial-btn-container {
.tutorial-btn {
.pc-text {
display: none;
}
.mobile-icon {
display: inline;
}
}
}
}
</style>

View File

@@ -10,6 +10,7 @@ import Collapse from './components/Collapse.vue';
import CreateChat from './components/CreateChat.vue';
import LoginBtn from './components/LoginBtn.vue';
import TitleEditing from './components/TitleEditing.vue';
import TutorialBtn from './components/TutorialBtn.vue';
const userStore = useUserStore();
const designStore = useDesignStore();
@@ -71,6 +72,7 @@ onKeyStroke(event => event.ctrlKey && event.key.toLowerCase() === 'k', handleCtr
<!-- 右边 -->
<div class="right-box flex h-full items-center pr-20px flex-shrink-0 mr-auto flex-row">
<AnnouncementBtn />
<TutorialBtn />
<Avatar v-show="userStore.userInfo" />
<LoginBtn v-show="!userStore.userInfo" />
</div>

View File

@@ -1,52 +1,53 @@
<script lang="ts" setup>
import { ElMessage } from 'element-plus'
import { useRoute, useRouter } from 'vue-router'
import { getActivityDetail } from '@/api'
import type { ActivityDetailResponse } from '@/api'
import { ElMessage } from 'element-plus';
import { useRoute, useRouter } from 'vue-router';
// import { getActivityDetail } from '@/api'
// import type { ActivityDetailResponse } from '@/api'
const route = useRoute()
const router = useRouter()
const route = useRoute();
const router = useRouter();
const loading = ref(false)
const activityDetail = ref<ActivityDetailResponse | null>(null)
const loading = ref(false);
// const activityDetail = ref<ActivityDetailResponse | null>(null)
const activityDetail = ref<any | null>(null);
// 获取活动详情
async function fetchActivityDetail() {
const id = route.params.id as string
const id = route.params.id as string;
if (!id)
return
return;
loading.value = true
loading.value = true;
try {
const res = await getActivityDetail(id)
activityDetail.value = res.data
// const res = await getActivityDetail(id)
// activityDetail.value = res.data
}
catch (error) {
console.error('获取活动详情失败:', error)
ElMessage.error('获取活动详情失败')
console.error('获取活动详情失败:', error);
ElMessage.error('获取活动详情失败');
}
finally {
loading.value = false
loading.value = false;
}
}
// 返回上一页
function goBack() {
router.back()
router.back();
}
// 格式化时间
function formatDateTime(time?: string) {
if (!time)
return '-'
const date = new Date(time)
return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`
return '-';
const date = new Date(time);
return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
}
// 页面加载时获取详情
onMounted(() => {
fetchActivityDetail()
})
fetchActivityDetail();
});
</script>
<template>
@@ -64,7 +65,9 @@ onMounted(() => {
<div v-if="activityDetail" class="detail-content">
<!-- 活动头部 -->
<div class="detail-header">
<h1 class="detail-title">{{ activityDetail.title }}</h1>
<h1 class="detail-title">
{{ activityDetail.title }}
</h1>
<div class="detail-meta">
<el-tag
v-if="activityDetail.status === 'active'"

View File

@@ -1,52 +1,52 @@
<script lang="ts" setup>
import { ElMessage } from 'element-plus'
import { useRoute, useRouter } from 'vue-router'
import { getAnnouncementDetail } from '@/api'
import type { AnnouncementDetailResponse } from '@/api'
import { ElMessage } from 'element-plus';
import { useRoute, useRouter } from 'vue-router';
// import { getAnnouncementDetail } from '@/api'
// import type { AnnouncementDetailResponse } from '@/api'
const route = useRoute()
const router = useRouter()
const route = useRoute();
const router = useRouter();
const loading = ref(false)
const announcementDetail = ref<AnnouncementDetailResponse | null>(null)
const loading = ref(false);
const announcementDetail = ref<any | null>(null);
// 获取公告详情
async function fetchAnnouncementDetail() {
const id = route.params.id as string
const id = route.params.id as string;
if (!id)
return
return;
loading.value = true
loading.value = true;
try {
const res = await getAnnouncementDetail(id)
announcementDetail.value = res.data
// const res = await getAnnouncementDetail(id)
// announcementDetail.value = res.data
}
catch (error) {
console.error('获取公告详情失败:', error)
ElMessage.error('获取公告详情失败')
console.error('获取公告详情失败:', error);
ElMessage.error('获取公告详情失败');
}
finally {
loading.value = false
loading.value = false;
}
}
// 返回上一页
function goBack() {
router.back()
router.back();
}
// 格式化时间
function formatDateTime(time?: string) {
if (!time)
return '-'
const date = new Date(time)
return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`
return '-';
const date = new Date(time);
return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
}
// 页面加载时获取详情
onMounted(() => {
fetchAnnouncementDetail()
})
fetchAnnouncementDetail();
});
</script>
<template>

View File

@@ -7,7 +7,8 @@ import { ElMessage } from 'element-plus';
import { nextTick, ref, watch } from 'vue';
import ModelSelect from '@/components/ModelSelect/index.vue';
import WelecomeText from '@/components/WelecomeText/index.vue';
import { useUserStore } from '@/stores';
import { useGuideTour } from '@/hooks/useGuideTour';
import { useGuideTourStore, useUserStore } from '@/stores';
import { useFilesStore } from '@/stores/modules/files';
import { useSessionStore } from '@/stores/modules/session';
@@ -15,6 +16,7 @@ import { useSessionStore } from '@/stores/modules/session';
const userStore = useUserStore();
const sessionStore = useSessionStore();
const filesStore = useFilesStore();
const guideTourStore = useGuideTourStore();
const senderValue = ref('');
const senderRef = ref();
@@ -87,6 +89,7 @@ watch(
ref="senderRef"
v-model="senderValue"
class="chat-defaul-sender"
data-tour="chat-sender"
:auto-size="{
maxRows: 9,
minRows: 3,

View File

@@ -13,6 +13,8 @@ import { Sender } from 'vue-element-plus-x';
import { useRoute } from 'vue-router';
import { send } from '@/api';
import ModelSelect from '@/components/ModelSelect/index.vue';
import { useGuideTour } from '@/hooks/useGuideTour';
import { useGuideTourStore } from '@/stores';
import { useChatStore } from '@/stores/modules/chat';
import { useFilesStore } from '@/stores/modules/files';
import { useModelStore } from '@/stores/modules/model';
@@ -35,6 +37,7 @@ const chatStore = useChatStore();
const modelStore = useModelStore();
const filesStore = useFilesStore();
const userStore = useUserStore();
const guideTourStore = useGuideTourStore();
// 用户头像
const avatar = computed(() => {
@@ -336,7 +339,7 @@ function copy(item: any) {
</BubbleList>
<Sender
ref="senderRef" v-model="inputValue" class="chat-defaul-sender" :auto-size="{
ref="senderRef" v-model="inputValue" class="chat-defaul-sender" data-tour="chat-sender" :auto-size="{
maxRows: 6,
minRows: 2,
}" variant="updown" clearable allow-speech :loading="isLoading" @submit="startSSE" @cancel="cancelSSE"

View File

@@ -11,3 +11,4 @@ export * from './modules/announcement'
// export * from './modules/chat';
export * from './modules/design';
export * from './modules/user';
export * from './modules/guideTour';

View File

@@ -1,80 +1,65 @@
import { defineStore } from 'pinia'
import type { Activity, Announcement, CarouselItem } from '@/api'
import type { AnnouncementLogDto } from '@/api';
import { defineStore } from 'pinia';
export type CloseType = 'today' | 'week' | 'permanent'
export type CloseType = 'today' | 'permanent';
export const useAnnouncementStore = defineStore(
'announcement',
() => {
// 弹窗显示状态
const isDialogVisible = ref(false)
const isDialogVisible = ref(false);
// 公告数据
const carousels = ref<CarouselItem[]>([])
const activities = ref<Activity[]>([])
const announcements = ref<Announcement[]>([])
// 公告数据(统一存储所有公告)
const announcements = ref<AnnouncementLogDto[]>([]);
// 关闭记录
const closeType = ref<CloseType | null>(null)
const closedAt = ref<number | null>(null)
const closeType = ref<CloseType | null>(null);
const closedAt = ref<number | null>(null);
// 打开弹窗
const openDialog = () => {
isDialogVisible.value = true
}
isDialogVisible.value = true;
};
// 关闭弹窗
const closeDialog = (type: CloseType) => {
isDialogVisible.value = false
closeType.value = type
closedAt.value = Date.now()
}
isDialogVisible.value = false;
closeType.value = type;
closedAt.value = Date.now();
};
// 检查是否应该显示弹窗
const shouldShowDialog = computed(() => {
if (!closedAt.value || !closeType.value)
return true
return true;
const now = Date.now()
const elapsed = now - closedAt.value
const now = Date.now();
const elapsed = now - closedAt.value;
if (closeType.value === 'permanent')
return false
return true;
if (closeType.value === 'today') {
// 检查是否已过去一天24小时
return elapsed > 24 * 60 * 60 * 1000
}
if (closeType.value === 'week') {
// 检查是否已过去一周7天
return elapsed > 7 * 24 * 60 * 60 * 1000
return elapsed > 7 * 24 * 60 * 60 * 1000;
}
return true
})
return true;
});
// 设置公告数据
const setAnnouncementData = (data: {
carousels: CarouselItem[]
activities: Activity[]
announcements: Announcement[]
}) => {
carousels.value = data.carousels
activities.value = data.activities
announcements.value = data.announcements
}
const setAnnouncementData = (data: AnnouncementLogDto[]) => {
announcements.value = data;
};
// 重置关闭状态(用于测试或管理员重置)
const resetCloseStatus = () => {
closeType.value = null
closedAt.value = null
}
closeType.value = null;
closedAt.value = null;
};
return {
isDialogVisible,
carousels,
activities,
announcements,
closeType,
closedAt,
@@ -83,12 +68,12 @@ export const useAnnouncementStore = defineStore(
closeDialog,
setAnnouncementData,
resetCloseStatus,
}
};
},
{
persist: {
// 只持久化关闭状态相关的数据
// 只持久化关闭状态相关的数据,公告数据不缓存
paths: ['closeType', 'closedAt'],
},
},
)
);

View File

@@ -0,0 +1,105 @@
import { defineStore } from 'pinia';
// 存储键名
const TOUR_STORAGE_KEY = 'guide_tour_completed';
export const useGuideTourStore = defineStore('guideTour', () => {
// 是否是首次访问
const isFirstVisit = ref(!localStorage.getItem(TOUR_STORAGE_KEY));
// 当前引导阶段
const currentPhase = ref<'idle' | 'header' | 'userCenter' | 'chat'>('idle');
// 是否需要在用户中心弹窗打开后开始引导
const shouldStartUserCenterTour = ref(false);
// 是否需要在聊天页面开始引导
const shouldStartChatTour = ref(false);
// 用户中心导航切换回调
const userCenterNavChangeCallback = ref<((nav: string) => void) | null>(null);
// 用户中心弹窗关闭回调
const userCenterCloseCallback = ref<(() => void) | null>(null);
// 标记引导已完成
function markTourCompleted() {
localStorage.setItem(TOUR_STORAGE_KEY, Date.now().toString());
isFirstVisit.value = false;
}
// 重置引导状态
function resetTourStatus() {
localStorage.removeItem(TOUR_STORAGE_KEY);
isFirstVisit.value = true;
}
// 设置当前引导阶段
function setCurrentPhase(phase: 'idle' | 'header' | 'userCenter' | 'chat') {
currentPhase.value = phase;
}
// 触发用户中心引导
function triggerUserCenterTour() {
shouldStartUserCenterTour.value = true;
}
// 清除用户中心引导触发标记
function clearUserCenterTourTrigger() {
shouldStartUserCenterTour.value = false;
}
// 触发聊天页面引导
function triggerChatTour() {
shouldStartChatTour.value = true;
}
// 清除聊天页面引导触发标记
function clearChatTourTrigger() {
shouldStartChatTour.value = false;
}
// 设置用户中心导航切换回调
function setUserCenterNavChangeCallback(callback: (nav: string) => void) {
userCenterNavChangeCallback.value = callback;
}
// 设置用户中心弹窗关闭回调
function setUserCenterCloseCallback(callback: () => void) {
userCenterCloseCallback.value = callback;
}
// 切换用户中心导航
function changeUserCenterNav(nav: string) {
if (userCenterNavChangeCallback.value) {
userCenterNavChangeCallback.value(nav);
}
}
// 关闭用户中心弹窗
function closeUserCenterDialog() {
if (userCenterCloseCallback.value) {
userCenterCloseCallback.value();
}
}
return {
isFirstVisit,
currentPhase,
shouldStartUserCenterTour,
shouldStartChatTour,
userCenterNavChangeCallback,
userCenterCloseCallback,
markTourCompleted,
resetTourStatus,
setCurrentPhase,
triggerUserCenterTour,
clearUserCenterTourTrigger,
triggerChatTour,
clearChatTourTrigger,
setUserCenterNavChangeCallback,
setUserCenterCloseCallback,
changeUserCenterNav,
closeUserCenterDialog,
};
});

View File

@@ -0,0 +1,148 @@
// Guide Tour 自定义样式
// 覆盖 driver.js 默认样式
.driver-popover {
background-color: #fff;
border-radius: 12px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
border: none;
padding: 20px;
min-width: 300px;
max-width: 400px;
&.guide-tour-popover {
// 自定义样式类
}
.driver-popover-title {
font-size: 18px;
font-weight: 600;
color: #303133;
margin-bottom: 12px;
padding-right: 24px;
}
.driver-popover-description {
font-size: 14px;
color: #606266;
line-height: 1.6;
margin-bottom: 16px;
}
.driver-popover-progress-text {
font-size: 12px;
color: #909399;
margin-bottom: 12px;
}
.driver-popover-footer {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
}
.driver-popover-navigation-btns {
display: flex;
gap: 8px;
}
.driver-popover-prev-btn,
.driver-popover-next-btn {
padding: 8px 16px;
border-radius: 6px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s;
border: none;
}
.driver-popover-prev-btn {
background-color: #f5f7fa;
color: #606266;
&:hover {
background-color: #e6e8eb;
}
}
.driver-popover-next-btn {
background-color: #409eff;
color: #fff;
&:hover {
background-color: #66b1ff;
}
}
.driver-popover-close-btn {
position: absolute;
top: 12px;
right: 12px;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: transparent;
border: none;
color: #909399;
cursor: pointer;
transition: all 0.3s;
font-size: 18px;
&:hover {
background-color: #f5f7fa;
color: #606266;
}
}
// 箭头样式
.driver-popover-arrow {
border: none;
}
&.driver-popover-side-top .driver-popover-arrow {
border-top-color: #fff;
}
&.driver-popover-side-bottom .driver-popover-arrow {
border-bottom-color: #fff;
}
&.driver-popover-side-left .driver-popover-arrow {
border-left-color: #fff;
}
&.driver-popover-side-right .driver-popover-arrow {
border-right-color: #fff;
}
}
// 高亮区域样式
.driver-highlighted-element {
outline: none !important;
}
// 遮罩层样式
.driver-overlay {
background-color: rgba(0, 0, 0, 0.65) !important;
}
// 动画效果
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.driver-popover {
animation: fadeInUp 0.3s ease-out;
}

View File

@@ -3,6 +3,7 @@
@use 'reset-css';
@use './element-plus';
@use './elx';
@use './guide-tour';
body{
overflow: hidden;
}

View File

@@ -11,7 +11,6 @@ declare module 'vue' {
AccountPassword: typeof import('./../src/components/LoginDialog/components/FormLogin/AccountPassword.vue')['default']
APIKeyManagement: typeof import('./../src/components/userPersonalCenter/components/APIKeyManagement.vue')['default']
CardFlipActivity: typeof import('./../src/components/userPersonalCenter/components/CardFlipActivity.vue')['default']
CardFlipActivity2: typeof import('./../src/components/userPersonalCenter/components/CardFlipActivity2.vue')['default']
DailyTask: typeof import('./../src/components/userPersonalCenter/components/DailyTask.vue')['default']
DeepThinking: typeof import('./../src/components/DeepThinking/index.vue')['default']
ElAlert: typeof import('element-plus/es')['ElAlert']
@@ -20,12 +19,12 @@ declare module 'vue' {
ElButton: typeof import('element-plus/es')['ElButton']
ElButtonGroup: typeof import('element-plus/es')['ElButtonGroup']
ElCard: typeof import('element-plus/es')['ElCard']
ElCarousel: typeof import('element-plus/es')['ElCarousel']
ElCarouselItem: typeof import('element-plus/es')['ElCarouselItem']
ElCollapse: typeof import('element-plus/es')['ElCollapse']
ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
ElCollapseTransition: typeof import('element-plus/es')['ElCollapseTransition']
ElContainer: typeof import('element-plus/es')['ElContainer']
ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
ElDescriptions: typeof import('element-plus/es')['ElDescriptions']
ElDescriptionsItem: typeof import('element-plus/es')['ElDescriptionsItem']
ElDialog: typeof import('element-plus/es')['ElDialog']
ElDivider: typeof import('element-plus/es')['ElDivider']
ElEmpty: typeof import('element-plus/es')['ElEmpty']
@@ -38,8 +37,10 @@ declare module 'vue' {
ElMain: typeof import('element-plus/es')['ElMain']
ElMenu: typeof import('element-plus/es')['ElMenu']
ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
ElOption: typeof import('element-plus/es')['ElOption']
ElPagination: typeof import('element-plus/es')['ElPagination']
ElProgress: typeof import('element-plus/es')['ElProgress']
ElSelect: typeof import('element-plus/es')['ElSelect']
ElTable: typeof import('element-plus/es')['ElTable']
ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
ElTabPane: typeof import('element-plus/es')['ElTabPane']
@@ -56,7 +57,9 @@ declare module 'vue' {
ModelSelect: typeof import('./../src/components/ModelSelect/index.vue')['default']
NavDialog: typeof import('./../src/components/userPersonalCenter/NavDialog.vue')['default']
Popover: typeof import('./../src/components/Popover/index.vue')['default']
PremiumPackageInfo: typeof import('./../src/components/userPersonalCenter/components/PremiumPackageInfo.vue')['default']
PremiumService: typeof import('./../src/components/userPersonalCenter/components/PremiumService.vue')['default']
PremiumUsageList: typeof import('./../src/components/userPersonalCenter/components/PremiumUsageList.vue')['default']
ProductPackage: typeof import('./../src/components/ProductPackage/index.vue')['default']
QrCodeLogin: typeof import('./../src/components/LoginDialog/components/QrCodeLogin/index.vue')['default']
RechargeLog: typeof import('./../src/components/userPersonalCenter/components/RechargeLog.vue')['default']

View File

@@ -1,232 +0,0 @@
# 系统公告 API 接口文档
## 概述
本文档定义了系统公告和活动功能所需的后端API接口。包括公告弹窗数据、活动详情、公告详情三个主要接口。
---
## 1. 获取系统公告和活动数据
### 接口信息
- **路径**: `GET /announcement/system`
- **描述**: 获取系统公告弹窗所需的所有数据,包括轮播图、活动列表、公告列表
- **权限**: 无需登录即可访问
### 响应数据结构
```typescript
{
"success": true,
"data": {
"carousels": [
{
"id": 1,
"imageUrl": "https://example.com/carousel/1.jpg",
"link": "https://example.com/activity/1",
"title": "新年活动"
}
],
"activities": [
{
"id": 1,
"title": "新年特惠活动",
"description": "参与活动即可获得丰厚奖励",
"content": "<p>活动详细内容HTML格式</p>",
"coverImage": "https://example.com/activity/cover1.jpg",
"startTime": "2025-01-01T00:00:00Z",
"endTime": "2025-01-31T23:59:59Z",
"status": "active",
"createdAt": "2025-01-01T00:00:00Z",
"updatedAt": "2025-01-02T00:00:00Z"
}
],
"announcements": [
{
"id": 1,
"title": "系统升级公告",
"content": "<p>系统将于今晚进行维护升级</p>",
"type": "latest",
"isImportant": true,
"publishTime": "2025-01-05T10:00:00Z",
"createdAt": "2025-01-05T09:00:00Z",
"updatedAt": "2025-01-05T10:00:00Z"
}
]
},
"message": "获取成功"
}
```
### 字段说明
#### carousels轮播图
| 字段 | 类型 | 必填 | 说明 |
|------|------|------|------|
| id | number/string | 是 | 轮播图ID |
| imageUrl | string | 是 | 图片URL |
| link | string | 否 | 点击跳转链接 |
| title | string | 否 | 轮播图标题 |
#### activities活动
| 字段 | 类型 | 必填 | 说明 |
|------|------|------|------|
| id | number/string | 是 | 活动ID |
| title | string | 是 | 活动标题 |
| description | string | 是 | 活动简介 |
| content | string | 是 | 活动详细内容HTML格式 |
| coverImage | string | 否 | 封面图URL |
| startTime | string | 否 | 开始时间ISO 8601格式 |
| endTime | string | 否 | 结束时间ISO 8601格式 |
| status | string | 是 | 状态active(进行中), inactive(未开始), expired(已结束) |
| createdAt | string | 是 | 创建时间ISO 8601格式 |
| updatedAt | string | 否 | 更新时间ISO 8601格式 |
#### announcements公告
| 字段 | 类型 | 必填 | 说明 |
|------|------|------|------|
| id | number/string | 是 | 公告ID |
| title | string | 是 | 公告标题 |
| content | string | 是 | 公告内容HTML格式 |
| type | string | 是 | 类型latest(最新公告), history(历史公告) |
| isImportant | boolean | 否 | 是否重要公告(显示警告图标) |
| publishTime | string | 是 | 发布时间ISO 8601格式 |
| createdAt | string | 是 | 创建时间ISO 8601格式 |
| updatedAt | string | 否 | 更新时间ISO 8601格式 |
---
## 2. 获取活动详情
### 接口信息
- **路径**: `GET /announcement/activity/{id}`
- **描述**: 获取单个活动的详细信息
- **权限**: 无需登录即可访问
### 请求参数
| 参数 | 位置 | 类型 | 必填 | 说明 |
|------|------|------|------|------|
| id | path | string/number | 是 | 活动ID |
### 响应数据结构
```typescript
{
"success": true,
"data": {
"id": 1,
"title": "新年特惠活动",
"description": "参与活动即可获得丰厚奖励",
"content": "<p>活动详细内容HTML格式...</p>",
"coverImage": "https://example.com/activity/cover1.jpg",
"startTime": "2025-01-01T00:00:00Z",
"endTime": "2025-01-31T23:59:59Z",
"status": "active",
"createdAt": "2025-01-01T00:00:00Z",
"updatedAt": "2025-01-02T00:00:00Z",
"views": 1234,
"participantCount": 567
},
"message": "获取成功"
}
```
### 额外字段说明
| 字段 | 类型 | 必填 | 说明 |
|------|------|------|------|
| views | number | 否 | 浏览次数 |
| participantCount | number | 否 | 参与人数 |
---
## 3. 获取公告详情
### 接口信息
- **路径**: `GET /announcement/detail/{id}`
- **描述**: 获取单个公告的详细信息
- **权限**: 无需登录即可访问
### 请求参数
| 参数 | 位置 | 类型 | 必填 | 说明 |
|------|------|------|------|------|
| id | path | string/number | 是 | 公告ID |
### 响应数据结构
```typescript
{
"success": true,
"data": {
"id": 1,
"title": "系统升级公告",
"content": "<p>系统将于今晚进行维护升级预计时间为晚上10点至次日凌晨2点...</p>",
"type": "latest",
"isImportant": true,
"publishTime": "2025-01-05T10:00:00Z",
"createdAt": "2025-01-05T09:00:00Z",
"updatedAt": "2025-01-05T10:00:00Z",
"views": 5678
},
"message": "获取成功"
}
```
### 额外字段说明
| 字段 | 类型 | 必填 | 说明 |
|------|------|------|------|
| views | number | 否 | 浏览次数 |
---
## 错误响应
所有接口在出错时应返回统一的错误格式:
```typescript
{
"success": false,
"data": null,
"message": "错误描述信息",
"errorCode": "ERROR_CODE" // 可选的错误码
}
```
### 常见错误码
| 状态码 | 说明 |
|--------|------|
| 404 | 资源不存在 |
| 500 | 服务器内部错误 |
---
## 注意事项
1. **时间格式**: 所有时间字段使用 ISO 8601 格式(如:`2025-01-05T10:00:00Z`
2. **HTML内容**: content 字段包含HTML格式的内容前端会进行渲染请确保内容安全防止XSS攻击
3. **图片URL**: 所有图片URL应该是完整的可访问地址
4. **状态管理**: 活动状态active/inactive/expired应该根据当前时间和活动时间自动判断
5. **公告分类**: 公告的 type 字段latest/history可以根据发布时间自动分类或由管理员手动指定
6. **浏览统计**: views 字段建议在每次访问详情页时自动递增
---
## 前端状态管理
前端使用 Pinia 管理公告弹窗的显示状态:
- **今日关闭**: 24小时内不再显示
- **本周关闭**: 7天内不再显示
- **关闭公告**: 永久不再显示(除非用户清除浏览器缓存)
这些状态存储在浏览器的 localStorage 中,不需要后端接口支持。

View File

@@ -1,337 +0,0 @@
# 系统公告功能使用说明
## 功能概述
本次更新为项目添加了完整的系统公告弹窗功能,包括活动展示、公告通知、轮播图等。用户可以通过不同的关闭选项来控制弹窗的显示频率。
---
## 已实现的功能
### 1. 系统公告弹窗
- **自动弹出**: 用户进入应用时自动检测并显示公告弹窗
- **手动打开**: 右上角有公告按钮(铃铛图标),随时可以点击打开公告弹窗
- **未读提示**: 公告按钮上显示红色徽章,标识最新公告数量
- **Tab切换**: 支持"活动"和"公告"两个Tab页面
- **关闭选项**: 提供三种关闭方式
- 今日关闭24小时内不再自动弹出但仍可通过按钮手动打开
- 本周关闭7天内不再自动弹出但仍可通过按钮手动打开
- 关闭公告:永久不再自动弹出(除非清除浏览器缓存),但仍可通过按钮手动打开
### 2. 活动页面
- **轮播图**: 顶部展示活动轮播图,支持自动播放
- **活动列表**: 显示所有活动,包含标题、简介、状态标签
- **状态标识**:
- 进行中:绿色标签
- 已结束:灰色标签
- **查看详情**: 点击可跳转到活动详情页面
### 3. 公告页面
- **最新公告**: 顶部显示最新发布的公告,带蓝色边框高亮
- **重要标识**: 重要公告显示警告图标
- **历史公告**: 使用时间线形式展示历史公告
- **查看详情**: 点击可跳转到公告详情页面
### 4. 详情页面
#### 活动详情页面
- 活动标题和状态
- 浏览次数和参与人数
- 活动封面图
- 活动简介
- 活动时间信息(开始、结束、发布、更新时间)
- 完整的活动内容支持HTML格式
#### 公告详情页面
- 公告标题和类型
- 重要公告标识(带动画效果)
- 浏览次数
- 发布时间
- 完整的公告内容支持HTML格式
- 创建和更新时间
---
## 文件结构
```
Yi.Ai.Vue3/
├── src/
│ ├── api/
│ │ └── announcement/
│ │ ├── index.ts # API接口定义
│ │ └── types.ts # TypeScript类型定义
│ ├── components/
│ │ └── SystemAnnouncementDialog/
│ │ └── index.vue # 系统公告弹窗组件
│ ├── layouts/
│ │ └── components/
│ │ └── Header/
│ │ ├── components/
│ │ │ └── AnnouncementBtn.vue # 公告按钮组件(新增)
│ │ └── index.vue # Header组件已更新
│ ├── pages/
│ │ ├── activity/
│ │ │ └── detail.vue # 活动详情页面
│ │ └── announcement/
│ │ └── detail.vue # 公告详情页面
│ ├── stores/
│ │ └── modules/
│ │ └── announcement.ts # 公告状态管理
│ ├── data/
│ │ └── mockAnnouncementData.ts # 模拟数据
│ ├── routers/
│ │ └── modules/
│ │ └── staticRouter.ts # 路由配置(已更新)
│ ├── utils/
│ │ └── request.ts # HTTP请求工具已修复Pinia初始化问题
│ └── App.vue # 主应用文件(已更新)
├── 系统公告API接口文档.md # API接口文档
└── 系统公告功能使用说明.md # 本文档
```
---
## 如何使用
### 开发环境测试(使用模拟数据)
1. **导入模拟数据**
`src/App.vue` 中临时替换API调用
```typescript
// 导入模拟数据函数
import { getMockSystemAnnouncements } from '@/data/mockAnnouncementData'
// 替换 getSystemAnnouncements() 为 getMockSystemAnnouncements()
onMounted(async () => {
if (announcementStore.shouldShowDialog) {
try {
// 使用模拟数据
const res = await getMockSystemAnnouncements()
if (res.data) {
announcementStore.setAnnouncementData(res.data)
announcementStore.openDialog()
}
}
catch (error) {
console.error('获取系统公告失败:', error)
}
}
})
```
2. **同样的方式更新详情页面**
`src/pages/activity/detail.vue``src/pages/announcement/detail.vue` 中也可以使用模拟数据函数进行测试。
3. **启动开发服务器**
```bash
npm run dev
```
4. **测试功能**
- 打开浏览器访问应用
- 应该会自动弹出系统公告弹窗
- 测试不同的关闭选项
- 点击"查看详情"按钮测试跳转
### 生产环境部署使用真实API
1. **后端实现API接口**
参考 `系统公告API接口文档.md` 实现以下三个接口:
- `GET /announcement/system` - 获取系统公告数据
- `GET /announcement/activity/{id}` - 获取活动详情
- `GET /announcement/detail/{id}` - 获取公告详情
2. **确认API调用**
确保 `src/App.vue` 和详情页面使用的是真实的API函数默认配置
- `getSystemAnnouncements()`
- `getActivityDetail(id)`
- `getAnnouncementDetail(id)`
3. **构建部署**
```bash
npm run build
```
---
## 自定义配置
### 修改关闭时间
`src/stores/modules/announcement.ts` 中修改时间计算逻辑:
```typescript
const shouldShowDialog = computed(() => {
// ... 现有代码
if (closeType.value === 'today') {
// 修改为其他时间如12小时
return elapsed > 12 * 60 * 60 * 1000
}
if (closeType.value === 'week') {
// 修改为其他时间如3天
return elapsed > 3 * 24 * 60 * 60 * 1000
}
// ... 现有代码
})
```
### 修改弹窗样式
`src/components/SystemAnnouncementDialog/index.vue` 中修改样式:
- 修改弹窗宽度:`width="700px"` 改为其他值
- 修改轮播图高度:`height="250px"` 改为其他值
- 修改CSS样式`<style>` 部分进行调整
### 添加新的Tab页
1. 在弹窗组件中添加新的 `<el-tab-pane>`
2. 添加对应的数据类型定义
3. 更新API接口和store
---
## 管理功能
### 手动触发弹窗
用户可以通过以下方式打开公告弹窗:
1. **点击右上角公告按钮**(推荐)
- 位于Header右侧的铃铛图标
- 显示未读公告数量的红色徽章
- 点击即可打开公告弹窗
2. **在代码中手动调用**
在任何组件中可以手动打开公告弹窗:
```typescript
import { useAnnouncementStore } from '@/stores'
const announcementStore = useAnnouncementStore()
// 打开弹窗
announcementStore.openDialog()
```
### 重置关闭状态
如果需要重置用户的关闭状态(例如有重要公告需要强制显示):
```typescript
// 重置关闭状态
announcementStore.resetCloseStatus()
// 然后重新打开弹窗
announcementStore.openDialog()
```
### 查看当前状态
```typescript
const announcementStore = useAnnouncementStore()
// 查看是否应该显示弹窗
console.log(announcementStore.shouldShowDialog)
// 查看关闭类型
console.log(announcementStore.closeType)
// 查看关闭时间
console.log(announcementStore.closedAt)
```
---
## 注意事项
1. **XSS防护**: 公告和活动内容使用 `v-html` 渲染请确保后端返回的HTML内容是安全的建议进行内容过滤和转义。
2. **图片资源**: 轮播图和封面图需要可访问的URL地址建议使用CDN。
3. **性能优化**:
- 弹窗数据会在应用启动时加载,确保接口响应快速
- 考虑添加加载状态和错误处理
4. **响应式设计**: 当前设计主要针对PC端如需移动端适配需要调整样式和布局。
5. **浏览器兼容**: 使用了现代CSS特性建议在主流现代浏览器中使用。
6. **状态持久化**: 关闭状态存储在 localStorage 中,清除浏览器缓存会重置状态。
---
## 后续优化建议
1. **数据统计**: 添加打点统计,记录用户查看公告的行为
2. **推送通知**: 对重要公告支持浏览器推送通知
3. **多语言支持**: 支持国际化i18n
4. **个性化推荐**: 根据用户兴趣推荐相关活动
5. **评论功能**: 允许用户对活动和公告进行评论
6. **分享功能**: 支持将活动和公告分享到社交媒体
7. **搜索功能**: 添加公告和活动的搜索功能
8. **管理后台**: 开发管理后台用于创建和管理公告活动
---
## 技术栈
- **Vue 3.5.17**: 核心框架,使用 Composition API
- **TypeScript**: 类型安全
- **Element Plus**: UI组件库
- **Pinia**: 状态管理,支持持久化
- **Vue Router 4**: 路由管理
- **Vite**: 构建工具
---
## 问题排查
### 弹窗不显示
1. 检查 `announcementStore.shouldShowDialog` 的值
2. 检查API是否返回数据
3. 查看浏览器控制台是否有错误
4. 尝试调用 `announcementStore.resetCloseStatus()` 重置状态
### 详情页面404
1. 确认路由配置是否正确
2. 检查路由名称是否匹配
3. 确认ID参数是否正确传递
### 样式显示异常
1. 检查Element Plus是否正确安装
2. 确认 SCSS 预处理器是否配置
3. 清除浏览器缓存重试
---
## 联系支持
如有问题或建议,请通过以下方式联系:
- GitHub Issues
- 项目文档
- 技术支持团队
---
**祝使用愉快!**

View File

@@ -1,177 +0,0 @@
# 系统公告功能更新日志
## 2025-01-05 - 完整功能实现
### 新增功能
#### 1. 系统公告弹窗
- ✅ 自动弹出机制:应用启动时自动检测并显示
- ✅ 双Tab设计活动页和公告页分离展示
- ✅ 三种关闭模式:今日关闭、本周关闭、永久关闭
- ✅ 状态持久化关闭状态保存到localStorage
#### 2. 活动展示
- ✅ 轮播图组件:支持多图轮播、自动播放
- ✅ 活动列表:展示活动标题、简介、状态
- ✅ 状态标签:进行中(绿色)、已结束(灰色)
- ✅ 活动详情页:完整的活动信息展示
#### 3. 公告展示
- ✅ 最新公告区:高亮显示最新发布的公告
- ✅ 重要标识:重要公告显示警告图标(带动画)
- ✅ 历史公告:时间线形式展示历史公告
- ✅ 公告详情页:完整的公告内容展示
#### 4. 右上角公告入口(新增)
- ✅ 铃铛图标按钮位于Header右侧
- ✅ 未读徽章:显示最新公告数量的红色徽章
- ✅ 随时可访问:即使关闭自动弹窗后也能手动打开
- ✅ 悬停效果:鼠标悬停时图标变色
### 技术实现
#### API接口3个
1. `GET /announcement/system` - 获取系统公告数据
2. `GET /announcement/activity/{id}` - 获取活动详情
3. `GET /announcement/detail/{id}` - 获取公告详情
#### 核心组件3个
1. `SystemAnnouncementDialog` - 系统公告弹窗
2. `AnnouncementBtn` - 公告按钮
3. 活动和公告详情页
#### 状态管理
- Pinia Store`announcementStore`
- 持久化localStorage仅存储关闭状态
- 响应式数据:轮播图、活动、公告列表
#### 路由配置
- `/activity/:id` - 活动详情
- `/announcement/:id` - 公告详情
### 文件变更
#### 新增文件11个
```
src/api/announcement/index.ts
src/api/announcement/types.ts
src/stores/modules/announcement.ts
src/components/SystemAnnouncementDialog/index.vue
src/layouts/components/Header/components/AnnouncementBtn.vue
src/pages/activity/detail.vue
src/pages/announcement/detail.vue
src/data/mockAnnouncementData.ts
系统公告API接口文档.md
系统公告功能使用说明.md
系统公告功能更新日志.md (本文件)
```
#### 修改文件5个
```
src/api/index.ts - 导出announcement模块
src/stores/index.ts - 导出announcementStore
src/routers/modules/staticRouter.ts - 添加详情页路由
src/layouts/components/Header/index.vue - 添加公告按钮
src/utils/request.ts - 修复Pinia初始化问题
src/App.vue - 集成系统公告弹窗
```
### 问题修复
#### 1. Pinia初始化错误
**问题**`getActivePinia() was called but there was no active Pinia`
**原因**:在 `request.ts``jwtPlugin()` 函数中,在模块加载时就调用了 `useUserStore()`,此时 Pinia 还未初始化。
**解决方案**:将 `useUserStore()` 的调用从函数开始移到各个钩子函数内部(`beforeRequest``afterResponse``onError`),确保只在实际请求时才调用 store。
#### 2. storeToRefs未定义
**问题**`storeToRefs is not defined`
**原因**:在 `SystemAnnouncementDialog/index.vue` 中使用了 `storeToRefs` 但忘记导入。
**解决方案**:添加 `import { storeToRefs } from 'pinia'`
### 功能亮点
1. **智能弹窗机制**
- 首次访问自动弹出
- 支持三种关闭模式
- 即使关闭后仍可通过按钮手动打开
2. **优雅的UI设计**
- 响应式布局
- 平滑过渡动画
- Element Plus组件库
- SCSS样式编写
3. **完善的类型定义**
- TypeScript类型安全
- 接口类型定义完整
- IDE智能提示友好
4. **灵活的数据来源**
- 支持真实API接口
- 提供模拟数据用于测试
- 易于切换
5. **用户友好**
- 右上角固定入口
- 未读徽章提示
- 查看详情便捷
### 待优化项
1. **移动端适配**
- 当前主要针对PC端设计
- 需要优化移动端显示效果
2. **国际化支持**
- 添加i18n多语言支持
3. **性能优化**
- 图片懒加载
- 虚拟滚动(公告列表很长时)
4. **功能扩展**
- 公告搜索功能
- 评论功能
- 分享到社交媒体
- 推送通知
5. **数据统计**
- 浏览量统计
- 用户行为分析
- 点击率跟踪
### 使用指南
详细使用说明请查看:
- 📖 [系统公告功能使用说明.md](./系统公告功能使用说明.md)
- 📝 [系统公告API接口文档.md](./系统公告API接口文档.md)
### 开发测试
使用模拟数据进行测试:
```typescript
// 在 src/App.vue 中
import { getMockSystemAnnouncements } from '@/data/mockAnnouncementData'
// 使用模拟数据
const res = await getMockSystemAnnouncements()
```
### 生产部署
1. 后端实现三个API接口
2. 确认前端使用真实API默认配置
3. 执行构建命令:`npm run build`
4. 部署dist目录
---
**开发团队**Claude Code
**版本**v1.0.0
**日期**2025-01-05
**状态**:✅ 已完成并测试