74 lines
1.6 KiB
Vue
74 lines
1.6 KiB
Vue
<template>
|
|
<el-select
|
|
:model-value="modelValue"
|
|
:loading="loading"
|
|
:placeholder="placeholder"
|
|
:disabled="disabled"
|
|
:clearable="clearable"
|
|
@update:model-value="handleChange"
|
|
>
|
|
<el-option
|
|
v-for="provider in providers"
|
|
:key="provider.name"
|
|
:label="provider.display_name"
|
|
:value="provider.name"
|
|
>
|
|
<div class="provider-option">
|
|
<span class="provider-name">{{ provider.display_name }}</span>
|
|
<span v-if="provider.description" class="provider-desc">{{ provider.description }}</span>
|
|
</div>
|
|
</el-option>
|
|
</el-select>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { EmbeddingProviderInfo } from '@/types/embedding'
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
modelValue?: string
|
|
providers: EmbeddingProviderInfo[]
|
|
loading?: boolean
|
|
disabled?: boolean
|
|
clearable?: boolean
|
|
placeholder?: string
|
|
}>(),
|
|
{
|
|
modelValue: '',
|
|
loading: false,
|
|
disabled: false,
|
|
clearable: false,
|
|
placeholder: '请选择嵌入模型提供者'
|
|
}
|
|
)
|
|
|
|
const emit = defineEmits<{
|
|
'update:modelValue': [value: string]
|
|
change: [provider: EmbeddingProviderInfo | undefined]
|
|
}>()
|
|
|
|
const handleChange = (value: string) => {
|
|
emit('update:modelValue', value)
|
|
const selectedProvider = props.providers.find((p) => p.name === value)
|
|
emit('change', selectedProvider)
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.provider-option {
|
|
display: flex;
|
|
flex-direction: column;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.provider-name {
|
|
font-weight: 500;
|
|
}
|
|
|
|
.provider-desc {
|
|
font-size: 12px;
|
|
color: var(--el-text-color-secondary);
|
|
margin-top: 2px;
|
|
}
|
|
</style>
|