fix: 2.7 模型库优化
This commit is contained in:
Gsh
@@ -112,7 +112,7 @@
|
|||||||
<body>
|
<body>
|
||||||
<!-- 加载动画容器 -->
|
<!-- 加载动画容器 -->
|
||||||
<div id="yixinai-loader" class="loader-container">
|
<div id="yixinai-loader" class="loader-container">
|
||||||
<div class="loader-title">意心Ai 2.6</div>
|
<div class="loader-title">意心Ai 2.7</div>
|
||||||
<div class="loader-subtitle">海外地址，仅首次访问预计加载约10秒</div>
|
<div class="loader-subtitle">海外地址，仅首次访问预计加载约10秒</div>
|
||||||
<div class="loader-logo">
|
<div class="loader-logo">
|
||||||
<div class="pulse-box"></div>
|
<div class="pulse-box"></div>
|
||||||
|
|||||||
@@ -34,8 +34,7 @@ export interface ModelLibraryDto {
|
|||||||
name: string;
|
name: string;
|
||||||
description?: string;
|
description?: string;
|
||||||
modelType: ModelTypeEnum;
|
modelType: ModelTypeEnum;
|
||||||
modelTypeName: string;
|
modelApiTypes: Array;
|
||||||
modelApiType: ModelApiTypeEnum;
|
|
||||||
modelApiTypeName: string;
|
modelApiTypeName: string;
|
||||||
multiplierShow: number;
|
multiplierShow: number;
|
||||||
providerName?: string;
|
providerName?: string;
|
||||||
|
|||||||
@@ -1,98 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="flex gap-2">
|
|
||||||
<el-tag v-for="tag in tags" :key="tag.name" closable :type="tag.type">
|
|
||||||
{{ tag.name }}
|
|
||||||
</el-tag>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { ref } from 'vue'
|
|
||||||
|
|
||||||
import type { TagProps } from 'element-plus'
|
|
||||||
|
|
||||||
interface TagsItem {
|
|
||||||
name: string
|
|
||||||
type: TagProps['type']
|
|
||||||
}
|
|
||||||
|
|
||||||
const tags = ref<TagsItem[]>([
|
|
||||||
{ name: 'Tag 1', type: 'primary' },
|
|
||||||
{ name: 'Tag 2', type: 'success' },
|
|
||||||
{ name: 'Tag 3', type: 'info' },
|
|
||||||
{ name: 'Tag 4', type: 'warning' },
|
|
||||||
{ name: 'Tag 5', type: 'danger' },
|
|
||||||
])
|
|
||||||
</script>
|
|
||||||
<template>
|
|
||||||
<div class="flex gap-2">
|
|
||||||
<el-check-tag checked>Checked</el-check-tag>
|
|
||||||
<el-check-tag :checked="checked" @change="onChange">Toggle me</el-check-tag>
|
|
||||||
<el-check-tag disabled>Disabled</el-check-tag>
|
|
||||||
</div>
|
|
||||||
<div class="flex gap-2 mt-4">
|
|
||||||
<el-check-tag :checked="checked1" type="primary" @change="onChange1">
|
|
||||||
Tag 1
|
|
||||||
</el-check-tag>
|
|
||||||
<el-check-tag :checked="checked2" type="success" @change="onChange2">
|
|
||||||
Tag 2
|
|
||||||
</el-check-tag>
|
|
||||||
<el-check-tag :checked="checked3" type="info" @change="onChange3">
|
|
||||||
Tag 3
|
|
||||||
</el-check-tag>
|
|
||||||
<el-check-tag :checked="checked4" type="warning" @change="onChange4">
|
|
||||||
Tag 4
|
|
||||||
</el-check-tag>
|
|
||||||
<el-check-tag :checked="checked5" type="danger" @change="onChange5">
|
|
||||||
Tag 5
|
|
||||||
</el-check-tag>
|
|
||||||
<el-check-tag
|
|
||||||
:checked="checked6"
|
|
||||||
disabled
|
|
||||||
type="success"
|
|
||||||
@change="onChange6"
|
|
||||||
>
|
|
||||||
Tag 6
|
|
||||||
</el-check-tag>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
|
||||||
import { ref } from 'vue'
|
|
||||||
|
|
||||||
const checked = ref(false)
|
|
||||||
const checked1 = ref(true)
|
|
||||||
const checked2 = ref(true)
|
|
||||||
const checked3 = ref(true)
|
|
||||||
const checked4 = ref(true)
|
|
||||||
const checked5 = ref(true)
|
|
||||||
const checked6 = ref(true)
|
|
||||||
|
|
||||||
const onChange = (status: boolean) => {
|
|
||||||
checked.value = status
|
|
||||||
}
|
|
||||||
|
|
||||||
const onChange1 = (status: boolean) => {
|
|
||||||
checked1.value = status
|
|
||||||
}
|
|
||||||
|
|
||||||
const onChange2 = (status: boolean) => {
|
|
||||||
checked2.value = status
|
|
||||||
}
|
|
||||||
|
|
||||||
const onChange3 = (status: boolean) => {
|
|
||||||
checked3.value = status
|
|
||||||
}
|
|
||||||
|
|
||||||
const onChange4 = (status: boolean) => {
|
|
||||||
checked4.value = status
|
|
||||||
}
|
|
||||||
|
|
||||||
const onChange5 = (status: boolean) => {
|
|
||||||
checked5.value = status
|
|
||||||
}
|
|
||||||
|
|
||||||
const onChange6 = (status: boolean) => {
|
|
||||||
checked6.value = status
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@@ -217,7 +217,9 @@ onMounted(() => {
|
|||||||
<div class="banner-header">
|
<div class="banner-header">
|
||||||
<div class="banner-left">
|
<div class="banner-left">
|
||||||
<div class="banner-text-section">
|
<div class="banner-text-section">
|
||||||
<h1 class="banner-title">意心AI模型库</h1>
|
<h1 class="banner-title">
|
||||||
|
意心AI模型库
|
||||||
|
</h1>
|
||||||
<p class="banner-subtitle">
|
<p class="banner-subtitle">
|
||||||
探索并接入全球顶尖AI模型，覆盖文本、图像、嵌入等多个领域
|
探索并接入全球顶尖AI模型，覆盖文本、图像、嵌入等多个领域
|
||||||
</p>
|
</p>
|
||||||
@@ -229,8 +231,12 @@ onMounted(() => {
|
|||||||
<el-icon><Box /></el-icon>
|
<el-icon><Box /></el-icon>
|
||||||
</div>
|
</div>
|
||||||
<div class="stat-info">
|
<div class="stat-info">
|
||||||
<div class="stat-value">{{ totalCount }}</div>
|
<div class="stat-value">
|
||||||
<div class="stat-label">可用模型</div>
|
{{ totalCount }}
|
||||||
|
</div>
|
||||||
|
<div class="stat-label">
|
||||||
|
可用模型
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="stat-card">
|
<div class="stat-card">
|
||||||
@@ -238,8 +244,12 @@ onMounted(() => {
|
|||||||
<el-icon><OfficeBuilding /></el-icon>
|
<el-icon><OfficeBuilding /></el-icon>
|
||||||
</div>
|
</div>
|
||||||
<div class="stat-info">
|
<div class="stat-info">
|
||||||
<div class="stat-value">{{ providerList.length>1?providerList.length:1 - 1 }}</div>
|
<div class="stat-value">
|
||||||
<div class="stat-label">支持供应商</div>
|
{{ providerList.length > 1 ? providerList.length : 1 - 1 }}
|
||||||
|
</div>
|
||||||
|
<div class="stat-label">
|
||||||
|
支持供应商
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -304,6 +314,7 @@ onMounted(() => {
|
|||||||
:key="provider"
|
:key="provider"
|
||||||
:checked="selectedProviders.includes(provider)"
|
:checked="selectedProviders.includes(provider)"
|
||||||
class="filter-tag"
|
class="filter-tag"
|
||||||
|
|
||||||
@change="toggleProvider(provider)"
|
@change="toggleProvider(provider)"
|
||||||
>
|
>
|
||||||
{{ provider }}
|
{{ provider }}
|
||||||
@@ -463,8 +474,8 @@ onMounted(() => {
|
|||||||
<el-tag size="small">
|
<el-tag size="small">
|
||||||
{{ model.modelTypeName }}
|
{{ model.modelTypeName }}
|
||||||
</el-tag>
|
</el-tag>
|
||||||
<el-tag size="small">
|
<el-tag v-for="item in model.modelApiTypes" :key="item" size="small">
|
||||||
{{ model.modelApiTypeName }}
|
{{ item.modelApiTypeName }}
|
||||||
</el-tag>
|
</el-tag>
|
||||||
</div>
|
</div>
|
||||||
<div class="model-pricing">
|
<div class="model-pricing">
|
||||||
@@ -956,24 +967,49 @@ onMounted(() => {
|
|||||||
color: #606266;
|
color: #606266;
|
||||||
line-height: 1.7;
|
line-height: 1.7;
|
||||||
margin: 0 0 20px 0;
|
margin: 0 0 20px 0;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
min-height: 48px; /* 保持2行的高度 */
|
||||||
|
text-overflow: ellipsis;
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
-webkit-line-clamp: 2;
|
-webkit-line-clamp: 2;
|
||||||
-webkit-box-orient: vertical;
|
line-clamp: 2;
|
||||||
//overflow: hidden;
|
overflow: hidden;
|
||||||
min-height: 48px;
|
|
||||||
|
/* 添加过渡效果 */
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
max-height: 3.4em; /* 2行高度 (1.7 * 2 = 3.4em) */
|
||||||
|
|
||||||
&.placeholder {
|
&.placeholder {
|
||||||
color: #c0c4cc;
|
color: #c0c4cc;
|
||||||
font-family: 'Monaco', 'Menlo', monospace;
|
font-family: 'Monaco', 'Menlo', monospace;
|
||||||
font-size: 12px;
|
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 {
|
.model-footer {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 16px;
|
gap: 6px;
|
||||||
padding-top: 16px;
|
padding-top: 16px;
|
||||||
border-top: 1px solid #f0f0f0;
|
border-top: 1px solid #f0f0f0;
|
||||||
|
|
||||||
@@ -988,7 +1024,7 @@ onMounted(() => {
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 8px;
|
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%);
|
background: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.08) 100%);
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
@@ -1054,7 +1090,6 @@ onMounted(() => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// 流光溢彩动画
|
// 流光溢彩动画
|
||||||
@keyframes gradientFlow {
|
@keyframes gradientFlow {
|
||||||
0% {
|
0% {
|
||||||
|
|||||||
Reference in New Issue
Block a user