xwl2023/Yi.Framework
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 完成模型库功能模块

Browse Source
This commit is contained in:
chenchun
2025-12-10 15:08:16 +08:00
parent c319b0b4e4
commit 381b712b25
5 changed files with 121 additions and 200 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
Yi.Abp.Net8/module/ai-hub/Yi.Framework.AiHub.Application/Services/Chat/ModelService.cs
View File

@@ -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<ModelLibraryDto>(total, result);

5
Yi.Abp.Net8/module/ai-hub/Yi.Framework.AiHub.Domain.Shared/Enums/ModelTypeEnum.cs
View File

@@ -11,8 +11,5 @@ public enum ModelTypeEnum
Image = 1,
[Description("嵌入")]
Embedding = 2,
[Description("尊享包")]
PremiumChat = 3
Embedding = 2
}

2
Yi.Ai.Vue3/src/layouts/LayoutBlankPage/index.vue
View File

@@ -13,7 +13,7 @@
.layout-blank{
height: 100vh;
overflow: auto;
margin: 20px ;
//margin: 20px ;
}
/* 无样式 */
</style>

235
Yi.Ai.Vue3/src/pages/modelLibrary/index.vue
View File

@@ -12,7 +12,7 @@ const loading = ref(false);
const modelList = ref<ModelLibraryDto[]>([]);
const totalCount = ref(0);
const currentPage = ref(1);
const pageSize = ref(10);
const pageSize = ref(12);
// 筛选条件
const searchKey = ref('');
@@ -217,9 +217,9 @@ onMounted(() => {
<div class="banner-header">
<div class="banner-left">
<div class="banner-text-section">
<h1 class="banner-title">AI模型广场</h1>
<h1 class="banner-title">意心AI模型库</h1>
<p class="banner-subtitle">
探索并接入全球顶尖AI模型，覆盖文本生成、图像理解、代码辅助等多个领域
探索并接入全球顶尖AI模型，覆盖文本、图像、嵌入等多个领域
</p>
</div>
<!-- 统计信息卡片 -->
@@ -238,7 +238,7 @@ onMounted(() => {
<el-icon><OfficeBuilding /></el-icon>
</div>
<div class="stat-info">
<div class="stat-value">{{ providerList.length - 1 }}</div>
<div class="stat-value">{{ providerList.length>1?providerList.length:1 - 1 }}</div>
<div class="stat-label">支持供应商</div>
</div>
</div>
@@ -403,13 +403,27 @@ onMounted(() => {
</div>
<!-- 模型网格 -->
<div v-else class="model-grid">
<div
<el-row v-else :gutter="20" class="model-grid">
<el-col
v-for="model in modelList"
:key="model.modelId"
:xs="24"
:sm="8"
:lg="6"
>
<div
class="model-card"
:class="{ 'premium-card': model.isPremium }"
>
<el-button
circle
size="small"
:icon="CopyDocument"
class="copy-btn-corner"
title="复制模型ID"
@click="copyModelId(model.modelId)"
/>
<div class="model-card-header">
<div class="model-icon">
<img
@@ -430,13 +444,11 @@ onMounted(() => {
{{ model.providerName }}
</div>
</div>
<el-button
circle
size="small"
:icon="CopyDocument"
class="copy-btn"
@click="copyModelId(model.modelId)"
/>
</div>
<div class="model-id">
<span class="model-id-label">ModelId:</span>
<span class="model-id-value">{{ model.modelId }}</span>
</div>
<p v-if="model.description" class="model-description">
@@ -461,14 +473,15 @@ onMounted(() => {
</div>
</div>
</div>
</div>
</el-col>
</el-row>
<!-- 分页 -->
<div v-if="totalCount > 0 && !loading" class="pagination-wrapper">
<el-pagination
v-model:current-page="currentPage"
v-model:page-size="pageSize"
:page-sizes="[10, 20, 50, 100]"
:page-sizes="[12, 24, 48, 96]"
:total="totalCount"
layout="total, sizes, prev, pager, next, jumper"
prev-text="上一页"
@@ -771,12 +784,10 @@ onMounted(() => {
// 模型网格
.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 {

2
Yi.Ai.Vue3/types/components.d.ts vendored
View File

@@ -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']