AI Chat UI

Appearance

ModelIcon ​

模型品牌图标：输入模型 id，内部经 detectModelVendor（@toimc/core）识别厂商，渲染对应品牌的内联 SVG（path 数据取自 @lobehub/icons Mono 变体）；识别不出时降级为首字母圆形。适用于模型选择器、会话标题、用量列表等任何需要品牌标识的位置。

代码演示 ​

已知厂商 ​

输入模型 id 自动识别厂商并渲染品牌内联 SVG。最适合模型选择器、会话标题、用量报表等需要一眼区分服务商的位置：

gpt-4o
claude-sonnet-4
gemini-2.0-flash
deepseek-chat
qwen-max
glm-4.6
llama-3.1
kimi-k2
16 / 24 / 32 px

未识别兜底 ​

识别不出的 id 降级为首字母圆形（主题色背景），不打断布局。适合私有网关、自建模型等无品牌特征的 id：

Uunknown-model
Iinternal-llm
Mmy-proxy-chat-v2

基础用法 ​

vue
<script setup lang="ts">
import { ModelIcon } from '@toimc/vue'
</script>

<template>
  <span class="model-row">
    <ModelIcon model="gpt-4o" />
    <ModelIcon model="claude-sonnet-4" />
    <ModelIcon model="gemini-2.5-pro" />
    <ModelIcon model="deepseek-chat" />
    <ModelIcon model="qwen3-max" />
  </span>
</template>
  • 带 / 前缀的路由型 id（如 openrouter/anthropic/claude-3.5-sonnet）自动取末段识别
  • 已知厂商输出 role="img" + aria-label（品牌名，如 OpenAI）

自定义尺寸 ​

size 控制边长（px），默认 18；首字母圆形的字号自动取 size / 2：

vue
<ModelIcon model="glm-4-plus" :size="24" />
<ModelIcon model="unknown-model-x" :size="32" />

指定厂商 ​

vendor 覆盖自动识别（类型为 ModelVendor，@toimc/core 导出），适用于 id 不含品牌特征但宿主已知厂商的场景：

vue
<ModelIcon model="my-proxy-model" vendor="zhipu" />

兜底与自定义图标 ​

  • 未知厂商：渲染首字母圆形（主题色背景），aria-label 走 i18n modelIcon.unknown（中文「未知模型」）
  • 默认插槽：自定义图标逃生口，传入后整体覆盖内置 SVG 与首字母兜底，容器保留 role="img" + aria-label
vue
<ModelIcon model="internal-llm">
  <img src="/icons/internal.svg" alt="" />
</ModelIcon>

厂商对照 ​

vendor品牌色命中示例
openai#000000gpt-4o / o3-mini / whisper-1
anthropic#D97706claude-sonnet-4
google#4285F4gemini-2.5-pro
zhipu#3859FFglm-4-plus / chatglm3
qwen#615EFFqwen3-max
deepseek#4D6BFEdeepseek-chat / deepseek-r1
mistral#F7D046mistral-large / mixtral-8x7b
meta#0668E1llama-3.3-70b
cohere#39594Dcommand-r-plus
yi#003425yi-large
xai#000000grok-3
moonshot#16191Ekimi-k2 / moonshot-v1
doubao#1C64F2doubao-pro-32k
minimax#F23F5Dminimax-text-01 / abab6.5s
wenxin#167ADFernie-4.5 / wenxin

品牌色为品牌资产（官方标识固定色，不随明暗主题翻转），豁免主题令牌约束；unknown 兜底圆形走主题令牌。

API ​

Props ​

属性名类型默认值说明
modelstring必填模型 id，内部调 detectModelVendor 识别
vendorModelVendor—显式指定厂商，覆盖自动识别
sizenumber18边长 px

Slots ​

插槽名说明
default自定义图标，覆盖内置 SVG 与首字母兜底

无障碍 ​

  • 已知厂商：SVG 带 role="img" + aria-label（品牌名）
  • 未知厂商：首字母圆形带 role="img" + aria-label（i18n modelIcon.unknown）