96 lines
3.1 KiB
Vue
96 lines
3.1 KiB
Vue
<template>
|
|
<el-dialog
|
|
v-model="dialogVisible"
|
|
width="600px"
|
|
:close-on-click-modal="false"
|
|
:close-on-press-escape="false"
|
|
:destroy-on-close="true"
|
|
:before-close="close"
|
|
append-to-body
|
|
>
|
|
<template #header>
|
|
<div class="flex-between">
|
|
<h4>{{ $t('views.model.providerPlaceholder') }}</h4>
|
|
<el-dropdown>
|
|
<span class="cursor">
|
|
{{ currentModelType || $t('views..model.modelType.allModel') }}
|
|
<el-icon class="el-icon--right">
|
|
<arrow-down />
|
|
</el-icon>
|
|
</span>
|
|
<template #dropdown>
|
|
<el-dropdown-menu>
|
|
<el-dropdown-item
|
|
v-for="item in modelTypeOptions"
|
|
:key="item.value"
|
|
@click="checkModelType(item.value)"
|
|
class="flex-between w-120"
|
|
:class="currentModelType === item.text ? 'active' : ''"
|
|
>
|
|
<span>{{ item.text }}</span>
|
|
<el-icon v-if="currentModelType === item.text"><Check /></el-icon>
|
|
</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</template>
|
|
</el-dropdown>
|
|
</div>
|
|
</template>
|
|
<el-row :gutter="12" v-loading="loading">
|
|
<el-col :span="12" class="mb-16" v-for="(data, index) in list_provider" :key="index">
|
|
<el-card shadow="hover" @click="go_create(data)">
|
|
<div class="flex align-center cursor">
|
|
<span :innerHTML="data.icon" alt="" style="height: 24px; width: 24px" class="mr-8" />
|
|
<span>{{ data.name }}</span>
|
|
</div>
|
|
</el-card>
|
|
</el-col>
|
|
</el-row>
|
|
</el-dialog>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
import ProviderApi from '@/api/model/provider'
|
|
import type { Provider } from '@/api/type/model'
|
|
import { modelTypeList } from './data'
|
|
import { filterVisibleProviders } from './provider-filter'
|
|
import { t } from '@/locales'
|
|
|
|
const loading = ref<boolean>(false)
|
|
const dialogVisible = ref<boolean>(false)
|
|
const list_provider = ref<Array<Provider>>([])
|
|
const currentModelType = ref('')
|
|
const selectModelType = ref('')
|
|
const modelTypeOptions = [
|
|
{ text: t('views.model.modelType.allModel'), value: '' },
|
|
...modelTypeList,
|
|
]
|
|
|
|
const open = (model_type?: string) => {
|
|
dialogVisible.value = true
|
|
const option = modelTypeOptions.find((item) => item.text === currentModelType.value)
|
|
checkModelType(model_type ? model_type : option ? option.value : '')
|
|
}
|
|
|
|
const close = () => {
|
|
dialogVisible.value = false
|
|
}
|
|
|
|
const checkModelType = (model_type: string) => {
|
|
selectModelType.value = model_type
|
|
currentModelType.value = modelTypeOptions.filter((item) => item.value === model_type)[0].text
|
|
ProviderApi.getProviderByModelType(model_type, loading).then((ok) => {
|
|
// 排除指定的模型提供商
|
|
list_provider.value = filterVisibleProviders(ok.data)
|
|
list_provider.value.sort((a, b) => a.provider.localeCompare(b.provider))
|
|
})
|
|
}
|
|
|
|
const emit = defineEmits(['change'])
|
|
const go_create = (provider: Provider) => {
|
|
close()
|
|
emit('change', provider, selectModelType.value)
|
|
}
|
|
defineExpose({ open, close })
|
|
</script>
|
|
<style lang="scss" scoped></style>
|