fara-fe-admin/src/components/LLMSelector.vue

<script setup lang="ts">
import { fetchModel } from '@/api/modules/model'

// 定义组件属性
interface Props {
  modelValue?: string
  disabled?: boolean
  placeholder?: string
  style?: string | object
  className?: string
}

// 定义组件事件
interface Emits {
  (e: 'update:modelValue', value: string | undefined): void
}

// 设置默认属性
const props = withDefaults(defineProps<Props>(), {
  disabled: false,
  placeholder: '请选择大模型',
  style: 'width: 220px;'
})

// 定义事件触发器
const emit = defineEmits<Emits>()

// 创建本地响应式变量用于v-model绑定
const localValue = ref(props.modelValue)

// 监听props中的modelValue变化，同步到本地变量
watch(
  () => props.modelValue,
  (newValue) => {
    localValue.value = newValue
  },
  { immediate: true }
)

// 音色选项数据
const options = ref<Array<{value: string, name: string}>>([])

// 获取音色数据
const fetchData = async () => {
  try {
    const params = {
      page: 1,
      size: 100,
    }
    const res = await fetchModel()
    if (res.code === 0) {
      // 将API返回的数据转换为select需要的格式
      options.value = res.data.content.map((item: any) => ({
        value: item.id,
        name: item.name
      }))
    } else {
      console.error('获取模型失败:', res.msg)
    }
  } catch (error) {
    console.error('获取模型失败:', error)
  }
}

// 组件挂载时获取数据
onMounted(() => {
  fetchData()
})
</script>

<template>
  <el-select
    v-model="localValue"
    :placeholder="placeholder"
    :style="style"
    :disabled="disabled"
    :class="className"
    @update:model-value="(value) => emit('update:modelValue', value)"
  >
    <el-option v-for="item in options" :key="item.value" :label="item.name" :value="item.value" />
  </el-select>
</template>