fix: 2.7 模型库优化

Yi.Ai.Vue3/src/pages/modelLibrary/index.vue

@@ -217,7 +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模型，覆盖文本、图像、嵌入等多个领域
               </p>
@@ -229,8 +231,12 @@ onMounted(() => {
                   <el-icon><Box /></el-icon>
                 </div>
                 <div class="stat-info">
-                  <div class="stat-value">{{ totalCount }}</div>
-                  <div class="stat-label">可用模型</div>
+                  <div class="stat-value">
+                    {{ totalCount }}
+                  </div>
+                  <div class="stat-label">
+                    可用模型
+                  </div>
                 </div>
               </div>
               <div class="stat-card">
@@ -238,8 +244,12 @@ onMounted(() => {
                   <el-icon><OfficeBuilding /></el-icon>
                 </div>
                 <div class="stat-info">
-                  <div class="stat-value">{{ providerList.length>1?providerList.length:1 - 1 }}</div>
-                  <div class="stat-label">支持供应商</div>
+                  <div class="stat-value">
+                    {{ providerList.length > 1 ? providerList.length : 1 - 1 }}
+                  </div>
+                  <div class="stat-label">
+                    支持供应商
+                  </div>
                 </div>
               </div>
             </div>
@@ -304,6 +314,7 @@ onMounted(() => {
                   :key="provider"
                   :checked="selectedProviders.includes(provider)"
                   class="filter-tag"
+
                   @change="toggleProvider(provider)"
                 >
                   {{ provider }}
@@ -463,8 +474,8 @@ onMounted(() => {
                     <el-tag size="small">
                       {{ model.modelTypeName }}
                     </el-tag>
-                    <el-tag size="small">
-                      {{ model.modelApiTypeName }}
+                    <el-tag v-for="item in model.modelApiTypes" :key="item" size="small">
+                      {{ item.modelApiTypeName }}
                     </el-tag>
                   </div>
                   <div class="model-pricing">
@@ -956,24 +967,49 @@ onMounted(() => {
               color: #606266;
               line-height: 1.7;
               margin: 0 0 20px 0;
+              -webkit-box-orient: vertical;
+              min-height: 48px; /* 保持2行的高度 */
+              text-overflow: ellipsis;
               display: -webkit-box;
               -webkit-line-clamp: 2;
-              -webkit-box-orient: vertical;
-              //overflow: hidden;
-              min-height: 48px;
+              line-clamp: 2;
+              overflow: hidden;
+
+              /* 添加过渡效果 */
+              transition: all 0.3s ease;
+              max-height: 3.4em; /* 2行高度 (1.7 * 2 = 3.4em) */
 
               &.placeholder {
                 color: #c0c4cc;
                 font-family: 'Monaco', 'Menlo', monospace;
                 font-size: 12px;
               }
+
+              /* 悬停时展开 */
+              &:hover {
+                -webkit-line-clamp: unset; /* 取消行数限制 */
+                line-clamp: unset;
+                max-height: none; /* 取消最大高度限制 */
+                overflow: visible; /* 显示全部内容 */
+
+                /* 可选：添加背景或边框突出显示 */
+                background-color: #f9f9f9;
+                //padding: 8px 12px;
+                border-radius: 4px;
+                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+                //margin-bottom: 20px; /* 保持原有间距 */
+
+                /* 如果是绝对定位的父容器，可以增加z-index */
+                z-index: 10;
+                position: relative;
+              }
             }
 
             .model-footer {
               display: flex;
               justify-content: space-between;
               align-items: center;
-              gap: 16px;
+              gap: 6px;
               padding-top: 16px;
               border-top: 1px solid #f0f0f0;
 
@@ -988,7 +1024,7 @@ onMounted(() => {
                 display: flex;
                 align-items: center;
                 gap: 8px;
-                padding: 6px 12px;
+                padding: 6px 6px;
                 background: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.08) 100%);
                 border-radius: 8px;
                 white-space: nowrap;
@@ -1054,7 +1090,6 @@ onMounted(() => {
   }
 }
 
-
 // 流光溢彩动画
 @keyframes gradientFlow {
   0% {