diff --git a/Yi.Abp.Net8/module/ai-hub/Yi.Framework.AiHub.Application/Services/Chat/ModelService.cs b/Yi.Abp.Net8/module/ai-hub/Yi.Framework.AiHub.Application/Services/Chat/ModelService.cs index 1bf5ed51..21f574d1 100644 --- a/Yi.Abp.Net8/module/ai-hub/Yi.Framework.AiHub.Application/Services/Chat/ModelService.cs +++ b/Yi.Abp.Net8/module/ai-hub/Yi.Framework.AiHub.Application/Services/Chat/ModelService.cs @@ -5,6 +5,7 @@ using Volo.Abp.Application.Services; using Yi.Framework.AiHub.Application.Contracts.Dtos.Model; using Yi.Framework.AiHub.Application.Contracts.IServices; using Yi.Framework.AiHub.Domain.Entities.Model; +using Yi.Framework.AiHub.Domain.Shared.Consts; using Yi.Framework.AiHub.Domain.Shared.Enums; using Yi.Framework.AiHub.Domain.Shared.Extensions; using Yi.Framework.SqlSugarCore.Abstractions; @@ -42,7 +43,7 @@ public class ModelService : ApplicationService, IModelService .WhereIF(input.ModelApiTypes is not null, x => input.ModelApiTypes.Contains(x.ModelApiType)) .WhereIF(input.IsPremiumOnly == true, x => - x.ModelType == ModelTypeEnum.PremiumChat) + PremiumPackageConst.ModeIds.Contains(x.ModelId)) .OrderBy(x => x.OrderNum) .OrderBy(x => x.Name) .ToPageListAsync(input.SkipCount, input.MaxResultCount, total); @@ -60,7 +61,7 @@ public class ModelService : ApplicationService, IModelService MultiplierShow = model.MultiplierShow, ProviderName = model.ProviderName, IconUrl = model.IconUrl, - IsPremium = model.ModelType == ModelTypeEnum.PremiumChat + IsPremium = PremiumPackageConst.ModeIds.Contains(model.ModelId) }).ToList(); return new PagedResultDto(total, result); diff --git a/Yi.Abp.Net8/module/ai-hub/Yi.Framework.AiHub.Domain.Shared/Enums/ModelTypeEnum.cs b/Yi.Abp.Net8/module/ai-hub/Yi.Framework.AiHub.Domain.Shared/Enums/ModelTypeEnum.cs index ce2188bb..7c993b9c 100644 --- a/Yi.Abp.Net8/module/ai-hub/Yi.Framework.AiHub.Domain.Shared/Enums/ModelTypeEnum.cs +++ b/Yi.Abp.Net8/module/ai-hub/Yi.Framework.AiHub.Domain.Shared/Enums/ModelTypeEnum.cs @@ -11,8 +11,5 @@ public enum ModelTypeEnum Image = 1, [Description("嵌入")] - Embedding = 2, - - [Description("尊享包")] - PremiumChat = 3 + Embedding = 2 } \ No newline at end of file diff --git a/Yi.Ai.Vue3/src/layouts/LayoutBlankPage/index.vue b/Yi.Ai.Vue3/src/layouts/LayoutBlankPage/index.vue index 66f7045f..c53ab958 100644 --- a/Yi.Ai.Vue3/src/layouts/LayoutBlankPage/index.vue +++ b/Yi.Ai.Vue3/src/layouts/LayoutBlankPage/index.vue @@ -13,7 +13,7 @@ .layout-blank{ height: 100vh; overflow: auto; - margin: 20px ; + //margin: 20px ; } /* 无样式 */ diff --git a/Yi.Ai.Vue3/src/pages/modelLibrary/index.vue b/Yi.Ai.Vue3/src/pages/modelLibrary/index.vue index 2bad653f..4041a4e3 100644 --- a/Yi.Ai.Vue3/src/pages/modelLibrary/index.vue +++ b/Yi.Ai.Vue3/src/pages/modelLibrary/index.vue @@ -12,7 +12,7 @@ const loading = ref(false); const modelList = ref([]); const totalCount = ref(0); const currentPage = ref(1); -const pageSize = ref(10); +const pageSize = ref(12); // 筛选条件 const searchKey = ref(''); @@ -217,9 +217,9 @@ onMounted(() => { @@ -403,72 +403,85 @@ onMounted(() => { -
-
+ -
-
- -
- {{ model.name.charAt(0).toUpperCase() }} -
-
-
-

- {{ model.name }} -

-
- {{ model.providerName }} -
-
+
-
-

- {{ model.description }} -

-

- {{ model.modelId }} -

- -
-
- - {{ model.modelTypeName }} - - - {{ model.modelApiTypeName }} - +
+
+ +
+ {{ model.name.charAt(0).toUpperCase() }} +
+
+
+

+ {{ model.name }} +

+
+ {{ model.providerName }} +
+
-
- 计费倍率 - {{ model.multiplierShow }}× + +
+ ModelId: + {{ model.modelId }} +
+ +

+ {{ model.description }} +

+

+ {{ model.modelId }} +

+ +
+
+ + {{ model.modelTypeName }} + + + {{ model.modelApiTypeName }} + +
+
+ 计费倍率 + {{ model.multiplierShow }}× +
-
-
+ +
{ // 模型网格 .model-grid { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); - gap: 20px; margin-bottom: 32px; .model-card { + margin-bottom: 20px; background: white; border-radius: 16px; padding: 24px; @@ -832,11 +843,31 @@ onMounted(() => { opacity: 1; } - .copy-btn { + .copy-btn-corner { opacity: 1; } } + // 右上角复制按钮 + .copy-btn-corner { + position: absolute; + top: 16px; + right: 16px; + z-index: 10; + opacity: 1; + transition: all 0.3s; + background: rgba(255, 255, 255, 0.9); + border: 1px solid #e0e0e0; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); + + &:hover { + background: white; + border-color: #667eea; + color: #667eea; + transform: scale(1.1); + } + } + .model-card-header { display: flex; gap: 16px; @@ -889,11 +920,34 @@ onMounted(() => { font-weight: 500; } } + } - .copy-btn { - flex-shrink: 0; - opacity: 0; - transition: opacity 0.3s; + // ModelId 显示区域 + .model-id { + margin-bottom: 12px; + padding: 8px 12px; + background: #f8f9fa; + border-radius: 8px; + font-family: 'Monaco', 'Menlo', 'Consolas', monospace; + display: flex; + align-items: center; + gap: 8px; + + .model-id-label { + font-size: 11px; + color: #909399; + font-weight: 600; + //text-transform: uppercase; + letter-spacing: 0.5px; + } + + .model-id-value { + font-size: 12px; + color: #606266; + flex: 1; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } } @@ -958,7 +1012,7 @@ onMounted(() => { .pagination-wrapper { display: flex; justify-content: center; - padding: 32px 0; + padding: 0px 0; :deep(.el-pagination) { gap: 8px; @@ -1000,139 +1054,6 @@ onMounted(() => { } } -// 响应式设计 -@media (max-width: 1200px) { - .model-library-container .main-content .content-wrapper .model-list-section .model-grid { - grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); - } -} - -@media (max-width: 768px) { - .model-library-container { - .banner-section { - padding: 32px 16px; - - .banner-content .banner-header { - flex-direction: column; - align-items: flex-start; - - .banner-left { - width: 100%; - flex-direction: column; - align-items: flex-start; - gap: 20px; - - .banner-text-section { - width: 100%; - - .banner-title { - font-size: 28px; - } - - .banner-subtitle { - font-size: 14px; - } - } - - .stats-cards { - width: 100%; - gap: 12px; - - .stat-card { - flex: 1; - min-width: 0; - padding: 12px 16px; - - .stat-icon { - width: 40px; - height: 40px; - font-size: 20px; - } - - .stat-info { - .stat-value { - font-size: 24px; - } - - .stat-label { - font-size: 12px; - } - } - } - } - } - - .home-btn { - width: 100%; - justify-content: center; - } - } - } - - .main-content { - padding: 24px 16px; - - .content-wrapper { - flex-direction: column; - - .filter-sidebar { - width: 100%; - - .filter-section { - position: relative; - top: 0; - } - } - - .model-list-section { - .model-grid { - grid-template-columns: 1fr; - gap: 16px; - - .model-card { - .model-footer { - flex-direction: column; - align-items: flex-start; - gap: 12px; - - .model-pricing { - width: 100%; - justify-content: center; - } - } - } - } - - .pagination-wrapper { - :deep(.el-pagination) { - flex-wrap: wrap; - justify-content: center; - - .btn-prev, - .btn-next { - padding: 0 12px; - min-width: 60px; - } - - .el-pager li { - min-width: 36px; - height: 36px; - line-height: 36px; - } - } - } - } - } - } - } -} - -// 平板适配 -@media (min-width: 769px) and (max-width: 1024px) { - .model-library-container .main-content .content-wrapper .model-list-section .model-grid { - grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); - } -} // 流光溢彩动画 @keyframes gradientFlow { diff --git a/Yi.Ai.Vue3/types/components.d.ts b/Yi.Ai.Vue3/types/components.d.ts index 480fbdcd..5a818758 100644 --- a/Yi.Ai.Vue3/types/components.d.ts +++ b/Yi.Ai.Vue3/types/components.d.ts @@ -20,6 +20,7 @@ declare module 'vue' { ElCard: typeof import('element-plus/es')['ElCard'] ElCheckbox: typeof import('element-plus/es')['ElCheckbox'] ElCheckTag: typeof import('element-plus/es')['ElCheckTag'] + ElCol: typeof import('element-plus/es')['ElCol'] ElCollapse: typeof import('element-plus/es')['ElCollapse'] ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem'] ElContainer: typeof import('element-plus/es')['ElContainer'] @@ -40,6 +41,7 @@ declare module 'vue' { ElOption: typeof import('element-plus/es')['ElOption'] ElPagination: typeof import('element-plus/es')['ElPagination'] ElProgress: typeof import('element-plus/es')['ElProgress'] + ElRow: typeof import('element-plus/es')['ElRow'] ElSelect: typeof import('element-plus/es')['ElSelect'] ElSkeleton: typeof import('element-plus/es')['ElSkeleton'] ElSwitch: typeof import('element-plus/es')['ElSwitch']