feat: 完成模型库功能模块

2025-12-10 15:08:16 +08:00
parent c319b0b4e4
commit 381b712b25
5 changed files with 121 additions and 200 deletions
--- 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<ModelLibraryDto>(total, result);
--- 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
 }
--- 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 ;
 }
 /* 无样式 */
 </style>
--- 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<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,72 +403,85 @@ 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"
-              class="model-card"
-              :class="{ 'premium-card': model.isPremium }"
+              :xs="24"
+              :sm="8"
+              :lg="6"
            >
-              <div class="model-card-header">
-                <div class="model-icon">
-                  <img
-                    v-if="model.iconUrl"
-                    :src="model.iconUrl"
-                    :alt="model.name"
-                    class="icon-img"
-                  >
-                  <div v-else class="icon-placeholder">
-                    {{ model.name.charAt(0).toUpperCase() }}
-                  </div>
-                </div>
-                <div class="model-info">
-                  <h3 class="model-name">
-                    {{ model.name }}
-                  </h3>
-                  <div class="model-provider">
-                    {{ model.providerName }}
-                  </div>
-                </div>
+              <div
+                class="model-card"
+                :class="{ 'premium-card': model.isPremium }"
+              >
                <el-button
                  circle
                  size="small"
                  :icon="CopyDocument"
-                  class="copy-btn"
+                  class="copy-btn-corner"
+                  title="复制模型ID"
                  @click="copyModelId(model.modelId)"
                />
-              </div>

-              <p v-if="model.description" class="model-description">
-                {{ model.description }}
-              </p>
-              <p v-else class="model-description placeholder">
-                {{ model.modelId }}
-              </p>
-
-              <div class="model-footer">
-                <div class="model-tags">
-                  <el-tag size="small">
-                    {{ model.modelTypeName }}
-                  </el-tag>
-                  <el-tag size="small">
-                    {{ model.modelApiTypeName }}
-                  </el-tag>
+                <div class="model-card-header">
+                  <div class="model-icon">
+                    <img
+                      v-if="model.iconUrl"
+                      :src="model.iconUrl"
+                      :alt="model.name"
+                      class="icon-img"
+                    >
+                    <div v-else class="icon-placeholder">
+                      {{ model.name.charAt(0).toUpperCase() }}
+                    </div>
+                  </div>
+                  <div class="model-info">
+                    <h3 class="model-name">
+                      {{ model.name }}
+                    </h3>
+                    <div class="model-provider">
+                      {{ model.providerName }}
+                    </div>
+                  </div>
                </div>
-                <div class="model-pricing">
-                  <span class="pricing-label">计费倍率</span>
-                  <span class="pricing-value">{{ model.multiplierShow }}×</span>
+
+                <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">
+                  {{ model.description }}
+                </p>
+                <p v-else class="model-description placeholder">
+                  {{ model.modelId }}
+                </p>
+
+                <div class="model-footer">
+                  <div class="model-tags">
+                    <el-tag size="small">
+                      {{ model.modelTypeName }}
+                    </el-tag>
+                    <el-tag size="small">
+                      {{ model.modelApiTypeName }}
+                    </el-tag>
+                  </div>
+                  <div class="model-pricing">
+                    <span class="pricing-label">计费倍率</span>
+                    <span class="pricing-value">{{ model.multiplierShow }}×</span>
+                  </div>
                </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 {
--- 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']