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

fix: 模型选择优化

Browse Source
This commit is contained in:
Gsh
2026-01-11 19:42:33 +08:00
parent 4800543a77
commit a1ddd1c3e2
1 changed files with 43 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
Yi.Ai.Vue3/src/components/ModelSelect/index.vue
View File

@@ -92,9 +92,32 @@ watch(activeTab, () => {
});
});
// 检查是否为当前选中的模型
function isCurrentModel(item: GetSessionListVO) {
const current = modelStore.currentModelInfo;
if (!current)
return false;
// 优先使用唯一 ID 匹配
if (item.id && current.id) {
return item.id === current.id;
}
// 降级使用组合键匹配
return item.modelId === current.modelId
&& item.modelApiType === current.modelApiType
&& item.providerName === current.providerName;
}
// 定位到当前模型
function scrollToCurrentModel() {
const currentId = modelStore.currentModelInfo?.modelId;
const current = modelStore.currentModelInfo;
if (!current)
return;
// 使用 item.id 构建 ID (假设 modelData.ts 中的 id 是唯一的)
// 如果没有 id，则无法精确定位，这里假设都有 id
const currentId = current.id;
if (!currentId)
return;
@@ -166,7 +189,7 @@ function getModelStyleClass(mode: any) {
const isPremiumPackage = mode.isPremiumPackage;
// 规则3：彩色流光
// 规则3：彩色流光 (尊享)
if (isPremiumPackage) {
return `
text-transparent bg-clip-text
@@ -180,7 +203,7 @@ function getModelStyleClass(mode: any) {
return 'text-gray-700';
}
// 规则1：金色光泽
// 规则1：金色光泽 (VIP)
return `
text-[#B38728] font-semibold relative overflow-hidden
before:content-[''] before:absolute before:-inset-2 before:-z-10
@@ -192,7 +215,7 @@ function getModelStyleClass(mode: any) {
外层卡片样式（选中态 + hover 动效）
-------------------------------- */
function getWrapperClass(item: GetSessionListVO) {
const isSelected = item.modelId === modelStore.currentModelInfo?.modelId;
const isSelected = isCurrentModel(item);
const available = isModelAvailable(item);
return [
@@ -254,7 +277,7 @@ function getWrapperClass(item: GetSessionListVO) {
</div>
<div
v-for="item in models"
:id="`provider-model-${item.modelId}`"
:id="`provider-model-${item.id}`"
:key="item.id"
:class="getWrapperClass(item)"
@click="handleModelClick(item)"
@@ -268,14 +291,17 @@ function getWrapperClass(item: GetSessionListVO) {
<!-- 模型信息 -->
<div class="flex flex-col gap-0.5 flex-1 min-w-0">
<div class="flex items-center gap-2">
<div class="flex items-center gap-2 flex-wrap">
<span :class="getModelStyleClass(item)" class="font-medium truncate">
{{ item.modelName }}
</span>
<span v-if="item.isFree" class="text-[10px] px-1.5 py-0.5 bg-green-100 text-green-600 rounded-full">免费</span>
<span v-if="item.isPremiumPackage" class="text-[10px] px-1.5 py-0.5 bg-orange-100 text-orange-600 rounded-full">VIP</span>
<span v-if="item.isPremiumPackage" class="text-[10px] px-1.5 py-0.5 bg-orange-100 text-orange-600 rounded-full">尊享</span>
<span v-else-if="!item.isFree" class="text-[10px] px-1.5 py-0.5 bg-yellow-100 text-yellow-600 rounded-full">VIP</span>
<!-- 显示 API 类型 -->
<span class="text-[10px] px-1.5 py-0.5 bg-gray-100 text-gray-600 rounded-full">{{ item.modelApiType }}</span>
</div>
<div class="text-xs text-gray-400 truncate" :title="item.modelDescribe">
<div class="text-xs text-gray-400 break-words whitespace-normal line-clamp-2" :title="item.modelDescribe">
{{ item.modelDescribe }}
</div>
</div>
@@ -283,7 +309,7 @@ function getWrapperClass(item: GetSessionListVO) {
<!-- 选中/锁定图标 -->
<div class="flex items-center">
<el-icon v-if="item.modelId === modelStore.currentModelInfo?.modelId" class="text-primary mr-2" :size="18">
<el-icon v-if="isCurrentModel(item)" class="text-primary mr-2" :size="18">
<Check />
</el-icon>
<el-icon v-if="!isModelAvailable(item)" class="text-gray-400">
@@ -306,7 +332,7 @@ function getWrapperClass(item: GetSessionListVO) {
</div>
<div
v-for="item in models"
:id="`api-model-${item.modelId}`"
:id="`api-model-${item.id}`"
:key="item.id"
:class="getWrapperClass(item)"
@click="handleModelClick(item)"
@@ -317,21 +343,24 @@ function getWrapperClass(item: GetSessionListVO) {
<SvgIcon v-else name="models" size="16" />
</div>
<div class="flex flex-col gap-0.5 flex-1 min-w-0">
<div class="flex items-center gap-2">
<div class="flex items-center gap-2 flex-wrap">
<span :class="getModelStyleClass(item)" class="font-medium truncate">
{{ item.modelName }}
</span>
<span v-if="item.isFree" class="text-[10px] px-1.5 py-0.5 bg-green-100 text-green-600 rounded-full">免费</span>
<span v-if="item.isPremiumPackage" class="text-[10px] px-1.5 py-0.5 bg-orange-100 text-orange-600 rounded-full">VIP</span>
<span v-if="item.isPremiumPackage" class="text-[10px] px-1.5 py-0.5 bg-orange-100 text-orange-600 rounded-full">尊享</span>
<span v-else-if="!item.isFree" class="text-[10px] px-1.5 py-0.5 bg-yellow-100 text-yellow-600 rounded-full">VIP</span>
<!-- 显示 厂商名称 -->
<span class="text-[10px] px-1.5 py-0.5 bg-blue-50 text-blue-600 rounded-full">{{ item.providerName }}</span>
</div>
<div class="text-xs text-gray-400 truncate" :title="item.modelDescribe">
<div class="text-xs text-gray-400 break-words whitespace-normal line-clamp-2" :title="item.modelDescribe">
{{ item.modelDescribe }}
</div>
</div>
</div>
<!-- 选中/锁定图标 -->
<div class="flex items-center">
<el-icon v-if="item.modelId === modelStore.currentModelInfo?.modelId" class="text-primary mr-2" :size="18">
<el-icon v-if="isCurrentModel(item)" class="text-primary mr-2" :size="18">
<Check />
</el-icon>
<el-icon v-if="!isModelAvailable(item)" class="text-gray-400">