xiaoxue_admin
/
dbx
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化 SearchableSelect 滚动逻辑和 AI 模型选择器布局 

Co-authored-by: staff <staff@qimaos-MacBook-Pro.local>
This commit is contained in:
zipg 2026-06-23 20:19:22 +08:00 committed by GitHub
parent 49705a1a8f
commit 7ae024ffd4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 19 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
apps/desktop/src/components/editor/AiAssistant.vue
View File

@ -1287,6 +1287,7 @@ const messageRenderer = computed(() => {
item-class="text-xs px-2"
@update:model-value="(value) => selectAction(value as AiAction)"
/>
<span class="min-w-0 flex-1" />
<SearchableSelect
v-if="settings.isConfigured()"
:model-value="settings.aiConfig.model"
@ -1297,7 +1298,7 @@ const messageRenderer = computed(() => {
:loading-text="t('ai.loadingModels')"
:loading="modelLoading"
:display-name="displayModelName"
trigger-class="min-w-0 flex-1 shrink justify-end rounded-full border px-2 py-0.5 text-[11px] text-muted-foreground hover:bg-muted hover:text-foreground"
trigger-class="min-w-0 w-auto max-w-[220px] shrink justify-end rounded-full border px-2 py-0.5 text-[11px] text-muted-foreground hover:bg-muted hover:text-foreground"
content-class="w-72"
item-class="text-xs px-2"
@update:model-value="handleModelSelect"

27
apps/desktop/src/components/ui/searchable-select/SearchableSelect.vue
View File

@ -57,6 +57,20 @@ function highlightSelectedOption() {
highlightIndex.value = selectedIndex >= 0 ? selectedIndex : 0;
}
async function scrollHighlightedOptionIntoView() {
await nextTick();
const container = listContainer.value;
if (!container || highlightIndex.value < 0) return;
const buttons = container.querySelectorAll("button");
const target = buttons[highlightIndex.value];
target?.scrollIntoView({ block: "nearest" });
}
function highlightAndScrollSelectedOption() {
highlightSelectedOption();
void scrollHighlightedOptionIntoView();
}
watch(open, async (value) => {
emit("update:open", value);
if (!value) {
@ -67,7 +81,7 @@ watch(open, async (value) => {
await nextTick();
const input = searchInput.value?.$el as HTMLInputElement | undefined;
input?.focus();
highlightSelectedOption();
highlightAndScrollSelectedOption();
});
watch(searchText, () => {
@ -78,19 +92,12 @@ watch(
() => [props.modelValue, props.options],
() => {
if (!open.value || searchText.value) return;
highlightSelectedOption();
highlightAndScrollSelectedOption();
},
{ deep: true },
);
watch(highlightIndex, async () => {
await nextTick();
const container = listContainer.value;
if (!container || highlightIndex.value < 0) return;
const buttons = container.querySelectorAll("button");
const target = buttons[highlightIndex.value];
target?.scrollIntoView({ block: "nearest" });
});
watch(highlightIndex, scrollHighlightedOptionIntoView);
function selectOption(option: string) {
emit("update:modelValue", option);