feat: 完成模型库功能模块

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);

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,
+    Embedding = 2
-
-    [Description("尊享包")]
-    PremiumChat = 3
 }

Yi.Ai.Vue3/src/layouts/LayoutBlankPage/index.vue

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

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">
+          <el-row v-else :gutter="20" class="model-grid">
-            <div
+            <el-col
               v-for="model in modelList"
               :key="model.modelId"
-              class="model-card"
+              :xs="24"
-              :class="{ 'premium-card': model.isPremium }"
+              :sm="8"
+              :lg="6"
             >
-              <div class="model-card-header">
+              <div
-                <div class="model-icon">
+                class="model-card"
-                  <img
+                :class="{ 'premium-card': model.isPremium }"
-                    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>
                 <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">
+                <div class="model-card-header">
-                {{ model.description }}
+                  <div class="model-icon">
-              </p>
+                    <img
-              <p v-else class="model-description placeholder">
+                      v-if="model.iconUrl"
-                {{ model.modelId }}
+                      :src="model.iconUrl"
-              </p>
+                      :alt="model.name"
-
+                      class="icon-img"
-              <div class="model-footer">
+                    >
-                <div class="model-tags">
+                    <div v-else class="icon-placeholder">
-                  <el-tag size="small">
+                      {{ model.name.charAt(0).toUpperCase() }}
-                    {{ model.modelTypeName }}
+                    </div>
-                  </el-tag>
+                  </div>
-                  <el-tag size="small">
+                  <div class="model-info">
-                    {{ model.modelApiTypeName }}
+                    <h3 class="model-name">
-                  </el-tag>
+                      {{ model.name }}
+                    </h3>
+                    <div class="model-provider">
+                      {{ model.providerName }}
+                    </div>
+                  </div>
                 </div>
-                <div class="model-pricing">
+
-                  <span class="pricing-label">计费倍率</span>
+                <div class="model-id">
-                  <span class="pricing-value">{{ model.multiplierShow }}×</span>
+                  <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>
+            </el-col>
-          </div>
+          </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 {
+            // ModelId 显示区域
-                flex-shrink: 0;
+            .model-id {
-                opacity: 0;
+              margin-bottom: 12px;
-                transition: opacity 0.3s;
+              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 {

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