Merge branch 'card-flip' into ai-hub
This commit is contained in:
1
.gitignore
vendored
1
.gitignore
vendored
@@ -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
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -14,4 +14,9 @@ public class AnnouncementCacheDto
|
||||
/// 公告日志列表
|
||||
/// </summary>
|
||||
public List<AnnouncementLogDto> Logs { get; set; } = new List<AnnouncementLogDto>();
|
||||
|
||||
/// <summary>
|
||||
/// 跳转链接
|
||||
/// </summary>
|
||||
public string? Url { get; set; }
|
||||
}
|
||||
|
||||
@@ -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; }
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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; }
|
||||
}
|
||||
@@ -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; }
|
||||
}
|
||||
@@ -11,5 +11,5 @@ public interface IAnnouncementService
|
||||
/// 获取公告信息
|
||||
/// </summary>
|
||||
/// <returns>公告信息</returns>
|
||||
Task<AnnouncementOutput> GetAsync();
|
||||
Task<List<AnnouncementLogDto>> GetAsync();
|
||||
}
|
||||
|
||||
@@ -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
|
||||
};
|
||||
}
|
||||
|
||||
@@ -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 "继续加油!";
|
||||
|
||||
@@ -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>>());
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
namespace Yi.Framework.AiHub.Domain.Shared.Enums;
|
||||
|
||||
public enum AnnouncementTypeEnum
|
||||
{
|
||||
Activity=1,
|
||||
System=2
|
||||
}
|
||||
@@ -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; }
|
||||
}
|
||||
@@ -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; }
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
namespace Yi.Framework.Rbac.Domain.Shared.Caches;
|
||||
namespace Yi.Framework.Rbac.Domain.Shared.Caches;
|
||||
|
||||
public class FileCacheItem
|
||||
{
|
||||
|
||||
@@ -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);
|
||||
|
||||
9
Yi.Ai.Vue3/.claude/settings.local.json
Normal file
9
Yi.Ai.Vue3/.claude/settings.local.json
Normal file
@@ -0,0 +1,9 @@
|
||||
{
|
||||
"permissions": {
|
||||
"allow": [
|
||||
"Bash(npx vue-tsc --noEmit)"
|
||||
],
|
||||
"deny": [],
|
||||
"ask": []
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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';
|
||||
|
||||
@@ -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
|
||||
}
|
||||
|
||||
@@ -7,9 +7,10 @@ export interface CardFlipStatusOutput {
|
||||
canFlip: boolean; // 是否可以翻牌
|
||||
myInviteCode?: string; // 用户的邀请码
|
||||
invitedCount: number; // 本周邀请人数
|
||||
isInvited: boolean; // 是否已被邀请
|
||||
// isInvited: boolean; // 是否已被邀请
|
||||
flipRecords: CardFlipRecord[]; // 翻牌记录
|
||||
nextFlipTip?: string; // 下次可翻牌提示
|
||||
isFilledInviteCode: boolean;// 当前用户是否已经填写过邀请码
|
||||
}
|
||||
|
||||
// 翻牌记录
|
||||
|
||||
@@ -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;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
// 处理注册授权
|
||||
|
||||
@@ -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
@@ -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">
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
334
Yi.Ai.Vue3/src/hooks/useGuideTour.ts
Normal file
334
Yi.Ai.Vue3/src/hooks/useGuideTour.ts
Normal 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,
|
||||
};
|
||||
}
|
||||
@@ -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>
|
||||
|
||||
@@ -385,5 +385,8 @@ function handleMenuCommand(command: string, item: ConversationItem<ChatSessionVo
|
||||
{
|
||||
z-index: 0 ;
|
||||
}
|
||||
.conversation-group .sticky-title{
|
||||
z-index: 0 ;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
|
||||
@@ -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'"
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -11,3 +11,4 @@ export * from './modules/announcement'
|
||||
// export * from './modules/chat';
|
||||
export * from './modules/design';
|
||||
export * from './modules/user';
|
||||
export * from './modules/guideTour';
|
||||
|
||||
@@ -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'],
|
||||
},
|
||||
},
|
||||
)
|
||||
);
|
||||
|
||||
105
Yi.Ai.Vue3/src/stores/modules/guideTour.ts
Normal file
105
Yi.Ai.Vue3/src/stores/modules/guideTour.ts
Normal 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,
|
||||
};
|
||||
});
|
||||
148
Yi.Ai.Vue3/src/styles/guide-tour.scss
Normal file
148
Yi.Ai.Vue3/src/styles/guide-tour.scss
Normal 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;
|
||||
}
|
||||
@@ -3,6 +3,7 @@
|
||||
@use 'reset-css';
|
||||
@use './element-plus';
|
||||
@use './elx';
|
||||
@use './guide-tour';
|
||||
body{
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
11
Yi.Ai.Vue3/types/components.d.ts
vendored
11
Yi.Ai.Vue3/types/components.d.ts
vendored
@@ -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']
|
||||
|
||||
@@ -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 中,不需要后端接口支持。
|
||||
@@ -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
|
||||
- 项目文档
|
||||
- 技术支持团队
|
||||
|
||||
---
|
||||
|
||||
**祝使用愉快!**
|
||||
@@ -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
|
||||
**状态**:✅ 已完成并测试
|
||||
Reference in New Issue
Block a user