nuxt-app/app/components/agent/AgentModelSelector.vue

<script setup lang="ts">
interface ModelOption {
  id: number;
  name: string;
  modelId: string;
  providerName: string;
}

const props = defineProps<{
  modelId: number | null;
  models: ModelOption[];
}>();

const emit = defineEmits<{
  update: [modelId: number | null];
}>();

const open = ref(false);
const dropdownRef = ref<HTMLElement | null>(null);

const currentModel = computed(() =>
  props.models.find((m) => m.id === props.modelId) ?? null,
);

function selectModel(id: number) {
  emit("update", id);
  open.value = false;
}

function handleClickOutside(e: MouseEvent) {
  if (dropdownRef.value && !dropdownRef.value.contains(e.target as Node)) {
    open.value = false;
  }
}

onMounted(() => {
  document.addEventListener("click", handleClickOutside);
});

onUnmounted(() => {
  document.removeEventListener("click", handleClickOutside);
});
</script>

<template>
  <div ref="dropdownRef" class="agent-model-selector">
    <button class="selector-trigger" @click="open = !open">
      <Icon name="lucide:cpu" class="trigger-icon" />
      <span class="trigger-label">
        {{ currentModel ? currentModel.name : "选择模型" }}
      </span>
      <Icon name="lucide:chevron-down" class="trigger-arrow" :class="{ open }" />
    </button>

    <div v-if="open" class="selector-dropdown">
      <div
        v-for="m in models"
        :key="m.id"
        class="dropdown-item"
        :class="{ active: m.id === modelId }"
        @click="selectModel(m.id)"
      >
        <div class="item-name">{{ m.name }}</div>
        <div class="item-meta">{{ m.providerName }} · {{ m.modelId }}</div>
      </div>
      <div v-if="models.length === 0" class="dropdown-empty">
        暂无可用模型
      </div>
    </div>
  </div>
</template>

<style scoped>
.agent-model-selector {
  position: relative;
}

.selector-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--color-surface-soft);
  border: 1px solid var(--color-hairline);
  border-radius: 8px;
  font-size: 13px;
  color: var(--color-ink);
  cursor: pointer;
  transition: all 0.15s;
}

.selector-trigger:hover {
  background: var(--color-surface-card);
  border-color: var(--color-primary);
}

.trigger-icon {
  font-size: 14px;
  color: var(--color-muted);
}

.trigger-label {
  font-weight: 500;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trigger-arrow {
  font-size: 14px;
  color: var(--color-muted);
  transition: transform 0.15s;
}

.trigger-arrow.open {
  transform: rotate(180deg);
}

.selector-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 240px;
  max-height: 320px;
  overflow-y: auto;
  background: var(--color-surface-card);
  border: 1px solid var(--color-hairline);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  z-index: 50;
  padding: 4px;
}

.dropdown-item {
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
}

.dropdown-item:hover {
  background: var(--color-surface-soft);
}

.dropdown-item.active {
  background: var(--color-surface-soft);
  border: 1px solid var(--color-primary);
}

.item-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-ink);
}

.item-meta {
  font-size: 12px;
  color: var(--color-muted);
  margin-top: 2px;
}

.dropdown-empty {
  padding: 16px;
  text-align: center;
  font-size: 13px;
  color: var(--color-muted);
}
</style>