feat(model-selector): improve panel sizing, docs, and test coverage

docs/.vitepress/themeConfig.ts

@@ -18,6 +18,7 @@ const sharedSidebarItems = [
       { text: 'Layout 布局', link: 'layout' },
       { text: 'Bubble 气泡', link: 'bubble' },
       { text: 'Sender 消息输入框', link: 'sender' },
+      { text: 'ModelSelector 模型选择器', link: 'model-selector' },
       { text: 'Prompts 提示集', link: 'prompts' },
       { text: 'Welcome 欢迎', link: 'welcome' },
       { text: 'Feedback 气泡反馈', link: 'feedback' },

docs/demos/icons/iconMeta.ts

@@ -148,6 +148,7 @@ export const iconCategoryGroups: IconCategoryGroup[] = [
       'IconOpenai',
       'IconClaude',
       'IconDeepseek',
+      'IconGemini',
       'IconBailian',
       'IconModelscope',
       'IconOpenrouter',

docs/demos/model-selector/basic.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { shallowRef } from 'vue'
+import { TrModelSelector, type ModelSelectorOption } from '@opentiny/tiny-robot'
+import { IconAi, IconAtom, IconThink } from '@opentiny/tiny-robot-svgs'
+
+const model = shallowRef<string | null>('general-model')
+
+const models = [
+  { value: 'general-model', label: '通用模型', icon: IconAi },
+  { value: 'reasoning-model', label: '推理模型', icon: IconThink },
+  { value: 'lightweight-model', label: '轻量模型', icon: IconAtom },
+] satisfies readonly ModelSelectorOption[]
+</script>
+
+<template>
+  <div class="model-selector-basic-demo">
+    <TrModelSelector v-model="model" :models="models" />
+    <span aria-live="polite">当前模型：{{ model }}</span>
+  </div>
+</template>
+
+<style scoped>
+.model-selector-basic-demo {
+  display: flex;
+  min-height: 96px;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 12px;
+  padding: 20px;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 12px;
+  background: var(--vp-c-bg);
+}
+
+.model-selector-basic-demo span {
+  color: var(--vp-c-text-2);
+  font-size: 13px;
+}
+</style>

docs/demos/model-selector/icon-trigger.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { shallowRef } from 'vue'
+import { TrModelSelector, type ModelSelectorOption } from '@opentiny/tiny-robot'
+import { IconArrowDown } from '@opentiny/tiny-robot-svgs'
+
+const model = shallowRef<string | null>('general-model')
+
+const models = [
+  { value: 'general-model', label: '通用模型' },
+  { value: 'reasoning-model', label: '推理模型' },
+  { value: 'lightweight-model', label: '轻量模型' },
+] satisfies readonly ModelSelectorOption[]
+</script>
+
+<template>
+  <div class="model-selector-trigger-demo">
+    <TrModelSelector v-model="model" :models="models">
+      <template #trigger="{ label, open }">
+        <span class="model-selector-trigger-demo__content">
+          <span class="model-selector-trigger-demo__badge" aria-hidden="true">AI</span>
+          <span class="model-selector-trigger-demo__label">{{ label }}</span>
+          <IconArrowDown
+            class="model-selector-trigger-demo__arrow"
+            :class="{ 'is-open': open }"
+            aria-hidden="true"
+            focusable="false"
+          />
+        </span>
+      </template>
+    </TrModelSelector>
+  </div>
+</template>
+
+<style scoped>
+.model-selector-trigger-demo {
+  display: flex;
+  min-height: 96px;
+  align-items: center;
+  padding: 20px;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 12px;
+  background: var(--vp-c-bg);
+}
+
+.model-selector-trigger-demo__content {
+  display: inline-flex;
+  width: 100%;
+  align-items: center;
+  gap: 8px;
+}
+
+.model-selector-trigger-demo__badge {
+  display: inline-grid;
+  width: 24px;
+  height: 24px;
+  flex: 0 0 auto;
+  place-items: center;
+  border-radius: 7px;
+  background: var(--vp-c-brand-soft);
+  color: var(--vp-c-brand-1);
+  font-size: 10px;
+  font-weight: 700;
+}
+
+.model-selector-trigger-demo__label {
+  min-width: 0;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.model-selector-trigger-demo__arrow {
+  width: 1em;
+  height: 1em;
+  flex: 0 0 auto;
+  transition: transform 0.18s ease;
+}
+
+.model-selector-trigger-demo__arrow.is-open {
+  transform: rotate(180deg);
+}
+
+@media (max-width: 480px) {
+  .model-selector-trigger-demo__label,
+  .model-selector-trigger-demo__arrow {
+    display: none;
+  }
+}
+</style>

docs/demos/model-selector/reasoning-effort.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { shallowRef } from 'vue'
+import { TrModelSelector, type ModelSelectorOption } from '@opentiny/tiny-robot'
+
+const model = shallowRef<string | null>('reasoning-standard')
+const reasoningEffort = shallowRef<string | null>('medium')
+
+const models = [
+  {
+    value: 'reasoning-standard',
+    label: '标准推理模型',
+    description: '11',
+    reasoningEfforts: true,
+  },
+  {
+    value: 'reasoning-custom',
+    label: '自定义推理模型',
+    description: '使用业务自定义的选项和值',
+    reasoningEfforts: [
+      { value: 'fast', label: '快速' },
+      { value: 'balanced', label: '均衡' },
+      { value: 'deep', label: '深度' },
+      { value: 'max', label: '极致', disabled: true },
+    ],
+  },
+  {
+    value: 'general-model',
+    label: '通用模型',
+    description: '未声明思考强度',
+  },
+] satisfies readonly ModelSelectorOption[]
+</script>
+
+<template>
+  <div class="model-selector-effort-demo">
+    <TrModelSelector
+      v-model="model"
+      v-model:reasoning-effort="reasoningEffort"
+      :models="models"
+      reasoning-effort-label="思考强度"
+    />
+    <span aria-live="polite">当前值：{{ reasoningEffort ?? '未选择' }}</span>
+  </div>
+</template>
+
+<style scoped>
+.model-selector-effort-demo {
+  display: flex;
+  min-height: 120px;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 12px;
+  padding: 20px;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 12px;
+  background: var(--vp-c-bg);
+}
+
+.model-selector-effort-demo span {
+  color: var(--vp-c-text-2);
+  font-size: 13px;
+}
+</style>

docs/demos/model-selector/search-and-group.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { shallowRef } from 'vue'
+import { TrModelSelector, type ModelSelectorOption } from '@opentiny/tiny-robot'
+import { IconAi, IconAtom, IconThink } from '@opentiny/tiny-robot-svgs'
+
+const model = shallowRef<string | null>('general-pro')
+
+const models = [
+  {
+    value: 'general-pro',
+    label: '通用模型 Pro',
+    description: '适合问答、写作和代码生成',
+    group: '通用模型',
+    icon: IconAi,
+  },
+  {
+    value: 'general-fast',
+    label: '通用模型 Fast',
+    description: '低延迟，适合高频交互',
+    group: '通用模型',
+    icon: IconAtom,
+  },
+  {
+    value: 'reasoning-pro',
+    label: '推理模型 Pro',
+    description: '适合数学和复杂分析',
+    group: '推理模型',
+    icon: IconThink,
+  },
+  {
+    value: 'reasoning-preview',
+    label: '推理模型 Preview',
+    description: '当前工作区暂不可用',
+    group: '推理模型',
+    disabled: true,
+    icon: IconThink,
+  },
+] satisfies readonly ModelSelectorOption[]
+</script>
+
+<template>
+  <div class="model-selector-search-demo">
+    <TrModelSelector v-model="model" :models="models" searchable search-placeholder="搜索名称、能力或分组" />
+  </div>
+</template>
+
+<style scoped>
+.model-selector-search-demo {
+  display: flex;
+  min-height: 120px;
+  align-items: center;
+  padding: 20px;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 12px;
+  background: var(--vp-c-bg);
+}
+</style>

docs/demos/model-selector/slots.vue

@@ -0,0 +1,127 @@
+<script setup lang="ts">
+import { shallowRef } from 'vue'
+import { TrModelSelector, type ModelSelectorOption } from '@opentiny/tiny-robot'
+
+const model = shallowRef<string | null>('general-pro')
+
+const models = [
+  {
+    value: 'general-pro',
+    label: '通用模型 Pro',
+    description: '适合问答、写作和代码生成',
+    group: '推荐',
+  },
+  {
+    value: 'reasoning-pro',
+    label: '推理模型 Pro',
+    description: '适合数学和复杂分析',
+    group: '推荐',
+  },
+  {
+    value: 'lightweight-model',
+    label: '轻量模型',
+    description: '低延迟，适合高频交互',
+    group: '其他',
+  },
+] satisfies readonly ModelSelectorOption[]
+</script>
+
+<template>
+  <div class="model-selector-slots-demo">
+    <TrModelSelector
+      v-model="model"
+      :models="models"
+      searchable
+      search-placeholder="搜索模型"
+      panel-class="model-selector-custom-panel"
+    >
+      <template #header="{ query }">
+        <div class="model-selector-slots-demo__header">
+          <strong>选择工作模型</strong>
+          <small>{{ query ? `正在搜索：${query}` : '根据当前任务选择合适的模型' }}</small>
+        </div>
+      </template>
+
+      <template #item="{ option, selected }">
+        <span class="model-selector-slots-demo__item">
+          <span>
+            <strong>{{ option.label }}</strong>
+            <small>{{ option.description }}</small>
+          </span>
+          <span v-if="selected" class="model-selector-slots-demo__selected">当前</span>
+        </span>
+      </template>
+
+      <template #empty="{ query }">
+        <span class="model-selector-slots-demo__empty"> 没有找到“{{ query }}”，请尝试其他关键词。 </span>
+      </template>
+
+      <template #footer="{ option, close }">
+        <div class="model-selector-slots-demo__footer">
+          <small>已选择：{{ option?.label ?? '暂无' }}</small>
+          <button type="button" @click="close">完成</button>
+        </div>
+      </template>
+    </TrModelSelector>
+  </div>
+</template>
+
+<style scoped>
+.model-selector-slots-demo {
+  display: flex;
+  min-height: 120px;
+  align-items: center;
+  padding: 20px;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 12px;
+  background: var(--vp-c-bg);
+}
+
+.model-selector-slots-demo__header,
+.model-selector-slots-demo__item > span:first-child {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.model-selector-slots-demo__header small,
+.model-selector-slots-demo__item small,
+.model-selector-slots-demo__footer small,
+.model-selector-slots-demo__empty {
+  color: var(--vp-c-text-2);
+  font-size: 12px;
+}
+
+.model-selector-slots-demo__item,
+.model-selector-slots-demo__footer {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.model-selector-slots-demo__item strong,
+.model-selector-slots-demo__item small {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.model-selector-slots-demo__selected {
+  flex: 0 0 auto;
+  color: var(--vp-c-brand-1);
+  font-size: 12px;
+}
+
+.model-selector-slots-demo__footer button {
+  min-height: 28px;
+  padding: 3px 10px;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 7px;
+  background: var(--vp-c-bg);
+  color: var(--vp-c-text-1);
+  cursor: pointer;
+}
+</style>