开发预览更新于 2026-05-10

ModelPicker 模型选择

LLM 模型选择器，含 provider 分组、capability badge、context window 显示。

基础用法

每个 option 至少有 id 与 label；可选 provider（自动分组）、capabilities（badge 列表）、contextWindow（pill 上显示 200k / 1.0M）、description、disabled。

背景视口

当前 claude-opus-4-7

src/App.vue

<script setup lang="ts">
import { ref } from 'vue';
import { CfModelPicker, type ModelOption } from '@chufix-design/vue';

const value = ref('claude-opus-4-7');
const options: ModelOption[] = [
  {
    id: 'claude-opus-4-7',
    label: 'Claude Opus 4.7',
    provider: 'Anthropic',
    capabilities: ['vision', 'thinking'],
    contextWindow: 1_000_000,
    description: '旗舰模型，长上下文 + 推理',
  },
  {
    id: 'claude-sonnet-4-6',
    label: 'Claude Sonnet 4.6',
    provider: 'Anthropic',
    capabilities: ['vision'],
    contextWindow: 200_000,
    description: '平衡速度与能力',
  },
  {
    id: 'claude-haiku-4-5',
    label: 'Claude Haiku 4.5',
    provider: 'Anthropic',
    capabilities: ['vision'],
    contextWindow: 200_000,
    description: '低延迟、高吞吐',
  },
  {
    id: 'gpt-4o',
    label: 'GPT-4o',
    provider: 'OpenAI',
    capabilities: ['vision'],
    contextWindow: 128_000,
  },
  {
    id: 'local-llama',
    label: 'Llama 3 70B',
    provider: '本地',
    capabilities: ['offline'],
    contextWindow: 32_000,
    disabled: true,
  },
];
</script>
<template>
  <div class="demo-stack">
    <CfModelPicker v-model="value" :options="options" />
    <p class="demo-hint">当前 <code>{{ value }}</code></p>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { CfModelPicker } from '@chufix-design/vue';

const value = ref('claude-opus-4-7');
const options= [
  {
    id: 'claude-opus-4-7',
    label: 'Claude Opus 4.7',
    provider: 'Anthropic',
    capabilities: ['vision', 'thinking'],
    contextWindow: 1_000_000,
    description: '旗舰模型，长上下文 + 推理',
  },
  {
    id: 'claude-sonnet-4-6',
    label: 'Claude Sonnet 4.6',
    provider: 'Anthropic',
    capabilities: ['vision'],
    contextWindow: 200_000,
    description: '平衡速度与能力',
  },
  {
    id: 'claude-haiku-4-5',
    label: 'Claude Haiku 4.5',
    provider: 'Anthropic',
    capabilities: ['vision'],
    contextWindow: 200_000,
    description: '低延迟、高吞吐',
  },
  {
    id: 'gpt-4o',
    label: 'GPT-4o',
    provider: 'OpenAI',
    capabilities: ['vision'],
    contextWindow: 128_000,
  },
  {
    id: 'local-llama',
    label: 'Llama 3 70B',
    provider: '本地',
    capabilities: ['offline'],
    contextWindow: 32_000,
    disabled: true,
  },
];
</script>
<template>
  <div class="demo-stack">
    <CfModelPicker v-model="value" :options="options" />
    <p class="demo-hint">当前 <code>{{ value }}</code></p>
  </div>
</template>

import { useState } from 'react';
import { CfModelPicker } from '@chufix-design/react';

export default function Demo() {
  const [value, setValue] = useState('claude-opus-4-7');
  const options: ModelOption[] = [
    {
      id: 'claude-opus-4-7',
      label: 'Claude Opus 4.7',
      provider: 'Anthropic',
      capabilities: ['vision', 'thinking'],
      contextWindow: 1_000_000,
      description: '旗舰模型，长上下文 + 推理',
    },
    {
      id: 'claude-sonnet-4-6',
      label: 'Claude Sonnet 4.6',
      provider: 'Anthropic',
      capabilities: ['vision'],
      contextWindow: 200_000,
      description: '平衡速度与能力',
    },
    {
      id: 'claude-haiku-4-5',
      label: 'Claude Haiku 4.5',
      provider: 'Anthropic',
      capabilities: ['vision'],
      contextWindow: 200_000,
      description: '低延迟、高吞吐',
    },
    {
      id: 'gpt-4o',
      label: 'GPT-4o',
      provider: 'OpenAI',
      capabilities: ['vision'],
      contextWindow: 128_000,
    },
    {
      id: 'local-llama',
      label: 'Llama 3 70B',
      provider: '本地',
      capabilities: ['offline'],
      contextWindow: 32_000,
      disabled: true,
    },
  ];
  return (
    <>
      <div className="demo-stack">
          <CfModelPicker value={value} onChange={setValue} options={options} />
          <p className="demo-hint">当前 <code>{value}</code></p>
        </div>
    </>
  );
}

import { useState } from 'react';
import { CfModelPicker } from '@chufix-design/react';

export default function Demo() {
  const [value, setValue] = useState('claude-opus-4-7');
  const options= [
    {
      id: 'claude-opus-4-7',
      label: 'Claude Opus 4.7',
      provider: 'Anthropic',
      capabilities: ['vision', 'thinking'],
      contextWindow: 1_000_000,
      description: '旗舰模型，长上下文 + 推理',
    },
    {
      id: 'claude-sonnet-4-6',
      label: 'Claude Sonnet 4.6',
      provider: 'Anthropic',
      capabilities: ['vision'],
      contextWindow: 200_000,
      description: '平衡速度与能力',
    },
    {
      id: 'claude-haiku-4-5',
      label: 'Claude Haiku 4.5',
      provider: 'Anthropic',
      capabilities: ['vision'],
      contextWindow: 200_000,
      description: '低延迟、高吞吐',
    },
    {
      id: 'gpt-4o',
      label: 'GPT-4o',
      provider: 'OpenAI',
      capabilities: ['vision'],
      contextWindow: 128_000,
    },
    {
      id: 'local-llama',
      label: 'Llama 3 70B',
      provider: '本地',
      capabilities: ['offline'],
      contextWindow: 32_000,
      disabled: true,
    },
  ];
  return (
    <>
      <div className="demo-stack">
          <CfModelPicker value={value} onChange={setValue} options={options} />
          <p className="demo-hint">当前 <code>{value}</code></p>
        </div>
    </>
  );
}

API

属性	类型	默认	说明
`options`	`ModelOption[]`	`—`	模型列表
`modelValue` / `value`	`string`	`—`	当前选中 id
`placeholder`	`string`	`'选择模型'`	空值占位
`groupByProvider`	`boolean`	`true`	按 provider 分组
`disabled`	`boolean`	`false`	禁用

ModelOption

字段	类型	说明
`id`	`string`	唯一 id
`label`	`string`	显示名
`provider`	`string?`	分组用
`capabilities`	`string[]?`	短标签，如 `['vision', 'thinking']`
`contextWindow`	`number?`	上下文 token 数，自动 `k / M` 格式化
`description`	`string?`	副文本
`disabled`	`boolean?`	不可选