feat: 优化模型供应商卡片交互

- 卡片右下角始终显示启用开关,支持直接切换供应商状态
- 移除未启用卡片的透明度,移动端不再有视觉弱化
- 「管理模型」按钮追加灰色「已启用 N 个」计数,移除卡片内模型数量信息行
- 放大供应商图标至 30px
This commit is contained in:
Wenjie Zhang 2026-06-04 20:25:13 +08:00
parent e27c8fc4c0
commit a6176ea236

View File

@ -9,7 +9,6 @@ import {
Settings2, Settings2,
Trash2, Trash2,
CheckCircle2, CheckCircle2,
Edit3,
LayersPlus LayersPlus
} from 'lucide-vue-next' } from 'lucide-vue-next'
@ -22,6 +21,7 @@ import ExtensionCardGrid from '@/components/extensions/ExtensionCardGrid.vue'
const loading = ref(false) const loading = ref(false)
const remoteLoading = ref(false) const remoteLoading = ref(false)
const saving = ref(false) const saving = ref(false)
const togglingProviderId = ref(null)
const providers = ref([]) const providers = ref([])
const searchQuery = ref('') const searchQuery = ref('')
const modelTestLoadingBySpec = ref({}) const modelTestLoadingBySpec = ref({})
@ -265,8 +265,7 @@ const loadProviders = async () => {
function getProviderInfo(provider) { function getProviderInfo(provider) {
return [ return [
{ label: 'Base URL', value: provider.base_url || '-' }, { label: 'Base URL', value: provider.base_url || '-' },
{ label: '能力', value: provider.capabilities?.join(', ') || 'chat' }, { label: '能力', value: provider.capabilities?.join(', ') || 'chat' }
{ label: '已启用', value: `${provider.enabled_models?.length || 0} 个模型` }
] ]
} }
@ -404,6 +403,20 @@ const deleteProviderFromEdit = async () => {
} }
} }
const toggleProviderEnabled = async (provider, checked) => {
togglingProviderId.value = provider.provider_id
try {
await modelProviderApi.updateProvider(provider.provider_id, { is_enabled: checked })
message.success(checked ? '已启用' : '已停用')
await loadProviders()
} catch (error) {
message.error(error.message || '操作失败')
await loadProviders()
} finally {
togglingProviderId.value = null
}
}
// ============ Models Modal Operations ============ // ============ Models Modal Operations ============
const openModelsModal = (provider) => { const openModelsModal = (provider) => {
currentProviderForModels.value = provider currentProviderForModels.value = provider
@ -637,7 +650,6 @@ defineExpose({
:key="provider.provider_id" :key="provider.provider_id"
:title="provider.display_name" :title="provider.display_name"
:subtitle="provider.provider_id" :subtitle="provider.provider_id"
:disabled="!provider.is_enabled"
:default-icon="Globe" :default-icon="Globe"
:info="getProviderInfo(provider)" :info="getProviderInfo(provider)"
:status="getProviderStatus(provider)" :status="getProviderStatus(provider)"
@ -654,16 +666,17 @@ defineExpose({
<button class="view-models-btn" type="button" @click.stop="openModelsModal(provider)"> <button class="view-models-btn" type="button" @click.stop="openModelsModal(provider)">
<Settings2 :size="14" /> <Settings2 :size="14" />
管理模型 管理模型
</button> <span v-if="provider.enabled_models?.length" class="enabled-count"
<a-tooltip title="编辑供应商"> >已启用 {{ provider.enabled_models.length }} </span
<a-button
size="small"
class="lucide-icon-btn"
@click.stop="openEditProviderModal(provider)"
> >
<Edit3 :size="14" /> </button>
</a-button> <a-switch
</a-tooltip> size="small"
:checked="provider.is_enabled"
:loading="togglingProviderId === provider.provider_id"
@click.stop
@change="(checked) => toggleProviderEnabled(provider, checked)"
/>
</template> </template>
</InfoCard> </InfoCard>
</ExtensionCardGrid> </ExtensionCardGrid>
@ -1077,6 +1090,11 @@ defineExpose({
.model-provider-manage-panel { .model-provider-manage-panel {
height: 100%; height: 100%;
min-height: 0; min-height: 0;
:deep(.info-card-icon img) {
width: 30px;
height: 30px;
}
} }
.view-models-btn { .view-models-btn {
@ -1098,6 +1116,12 @@ defineExpose({
} }
} }
.enabled-count {
color: var(--gray-500);
font-size: 12px;
font-weight: 400;
}
.spinning { .spinning {
animation: spin 1s linear infinite; animation: spin 1s linear infinite;
} }