fix: issues

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<CommanderInputProps> = (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 (
     <div class="flex items-center border-b border-gray-300 bg-gray-50 px-3 py-2">
       <span class="text-gray-500 mr-2">❯</span>
@@ -39,9 +58,14 @@ export const CommanderInput: Component<CommanderInputProps> = (props) => {
 
       {/* 自动补全下拉框 - 向上弹出 */}
       <Show when={props.showCompletions() && props.completions().length > 0}>
-        <div class="absolute left-0 bottom-full w-full bg-white border border-gray-300 shadow-lg mb-1">
-          <For each={props.completions().slice(0, 3)}>{(comp, idx) => (
+        <div
+          ref={containerRef}
+          class="absolute left-0 bottom-full w-full bg-white border border-gray-300 shadow-lg mb-1 overflow-auto"
+          style={{ "max-height": `${maxVisible * 40}px` }}
+        >
+          <For each={props.completions()}>{(comp, idx) => (
             <div
+              data-selected={idx() === props.selectedCompletion()}
               class={`px-3 py-2 cursor-pointer flex justify-between items-center ${
                 idx() === props.selectedCompletion()
                   ? "bg-blue-100"
@@ -71,11 +95,6 @@ export const CommanderInput: Component<CommanderInputProps> = (props) => {
               </Show>
             </div>
           )}</For>
-          <Show when={props.completions().length > 3}>
-            <div class="px-3 py-1 text-xs text-gray-500 bg-gray-50 border-t border-gray-200">
-              还有 {props.completions().length - 3} 个补全项...
-            </div>
-          </Show>
         </div>
       </Show>
     </div>