fix(dashboard): use v-autocomplete for list+options config field (#7884) (#7885)

* fix(dashboard): use v-autocomplete for list+options config field (#7884)

Replace v-select with v-autocomplete in the list+options branch of
ConfigItemRenderer. v-select's keyboard typeahead auto-toggles the
first prefix-matching item in multiple mode, which is unusable for
long option lists (e.g. plugin language pickers). v-autocomplete
filters the dropdown by typed text instead.

Bind v-model:search and clear it in @update:model-value so the search
box resets after each selection, allowing consecutive keyword search.

* perf(dashboard): memoize list config select items via computed

Wrap getSelectItems(itemMeta) in a computed so the options array
is only re-mapped when itemMeta changes, not on every keystroke
in the v-autocomplete search input. Avoids quadratic-ish work for
long option lists

---------

Co-authored-by: wanger <wanger@example.com>
This commit is contained in:
wanger
2026-04-29 18:42:52 +08:00
committed by GitHub
parent 587286a967
commit 6756a669d7

View File

@@ -87,11 +87,12 @@
></v-checkbox>
</div>
<v-select
<v-autocomplete
v-else-if="itemMeta?.type === 'list' && itemMeta?.options"
:model-value="modelValue"
@update:model-value="emitUpdate"
:items="getSelectItems(itemMeta)"
@update:model-value="val => { emitUpdate(val); listSearchText = '' }"
v-model:search="listSearchText"
:items="listSelectItems"
item-title="title"
item-value="value"
:disabled="itemMeta?.readonly"
@@ -101,7 +102,7 @@
hide-details
chips
multiple
></v-select>
></v-autocomplete>
<v-select
v-else-if="itemMeta?.options"
@@ -238,10 +239,11 @@ import PersonaSelector from './PersonaSelector.vue'
import KnowledgeBaseSelector from './KnowledgeBaseSelector.vue'
import PluginSetSelector from './PluginSetSelector.vue'
import T2ITemplateEditor from './T2ITemplateEditor.vue'
import { ref } from 'vue'
import { computed, ref } from 'vue'
import { useI18n, useModuleI18n } from '@/i18n/composables'
const numericTemp = ref(null)
const listSearchText = ref('')
const props = defineProps({
modelValue: {
@@ -278,6 +280,12 @@ function emitUpdate(val) {
emit('update:modelValue', val)
}
const listSelectItems = computed(() =>
props.itemMeta?.type === 'list' && props.itemMeta?.options
? getSelectItems(props.itemMeta)
: []
)
function toNumber(val) {
const n = parseFloat(val)
return isNaN(n) ? 0 : n