diff --git a/src/components/md-commander/CommanderInput.tsx b/src/components/md-commander/CommanderInput.tsx index 7c9b95a..8659e64 100644 --- a/src/components/md-commander/CommanderInput.tsx +++ b/src/components/md-commander/CommanderInput.tsx @@ -1,4 +1,4 @@ -import {type Component, For, Show} from "solid-js"; +import {type Component, For, Show, createEffect, on} from "solid-js"; import type { CompletionItem } from "./types"; export interface CommanderInputProps { @@ -17,6 +17,25 @@ export interface CommanderInputProps { } export const CommanderInput: Component = (props) => { + let containerRef: HTMLDivElement | undefined; + + // 当选中项变化时自动滚动到可见区域 + createEffect( + on( + () => props.selectedCompletion(), + () => { + if (containerRef) { + const selectedItem = containerRef.querySelector('[data-selected="true"]'); + if (selectedItem) { + selectedItem.scrollIntoView({ block: "nearest" }); + } + } + }, + ), + ); + + const maxVisible = 3; + return (
@@ -39,9 +58,14 @@ export const CommanderInput: Component = (props) => { {/* 自动补全下拉框 - 向上弹出 */} 0}> -
- {(comp, idx) => ( +
+ {(comp, idx) => (
= (props) => {
)}
- 3}> -
- 还有 {props.completions().length - 3} 个补全项... -
-
diff --git a/src/components/md-commander/hooks/useCommander.ts b/src/components/md-commander/hooks/useCommander.ts index ec93e97..feab661 100644 --- a/src/components/md-commander/hooks/useCommander.ts +++ b/src/components/md-commander/hooks/useCommander.ts @@ -383,9 +383,8 @@ export function useCommander( const setSelectedCompletion = (v: number | ((prev: number) => number)) => { const comps = completions(); - const maxVisible = 3; - const maxIdx = Math.min(comps.length - 1, maxVisible - 1); - + const maxIdx = comps.length - 1; + if (typeof v === 'function') { setSelectedCompletionState(prev => { const next = v(prev); @@ -399,8 +398,7 @@ export function useCommander( const acceptCompletion = () => { const idx = selectedCompletion(); const comps = completions(); - // 确保索引在有效范围内 - const validIdx = Math.min(idx, Math.min(comps.length - 1, 2)); + const validIdx = Math.min(idx, comps.length - 1); const comp = comps[validIdx]; if (!comp) return;