qn-ai-pc/src/components/AppModelSelect/index.vue

<!-- 3.5和4.0模型切换组件 -->
<script setup lang="ts">
import { computed } from 'vue'
import { Dropdown, Menu, MenuItem } from 'ant-design-vue'
import type { ModelSelect } from './index.d'
import { SvgIcon } from '@/components/SvgIcon'

interface Props {
  activeIndex: number
  options: ModelSelect[]
}
const props = withDefaults(defineProps<Props>(), {
  activeIndex: 0,
  options: () => [],
})

const emit = defineEmits(['change', 'update:activeIndex'])

const optionActive = computed({
  get: () => props.activeIndex,
  set: value => emit('update:activeIndex', value),
})

function handelChange(index: number, item: ModelSelect) {
  optionActive.value = index
  emit('change', index, item)
}
</script>

<template>
  <Dropdown :trigger="['click']">
    <div class="app-model-select flex justify-between items-center" @click.prevent>
      <SvgIcon class="icon icon-robot" name="robot" />
      {{ options[optionActive].label }}
      <SvgIcon class="icon icon-down" name="down" />
    </div>

    <template #overlay>
      <Menu>
        <MenuItem v-for="(item, index) in options" :key="item.value" @click="handelChange(index, item)">
          {{ item.label }}
        </MenuItem>
      </Menu>
    </template>
  </Dropdown>
</template>

<style lang="scss" scoped>
@include app('model-select') {
  width: 200px;
  height: 40px;
  padding: 0 20px;
  margin: 0 auto;
  color: #4670e3;
  background-color: #edf3ff;
  border-radius: 20px;
  cursor: pointer;
  position: absolute;
  top: 0px;
  left: calc(50% - 100px);
  .icon {
    width: 24px;
    height: 24px;
  }
  .icon-down {
    width: 18px;
    height: 18px;
  }
}
</style>