feat: less completions

src/components/md-commander/CommanderInput.tsx

@@ -39,8 +39,8 @@ 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 max-h-48 overflow-auto mb-1">
-          <For each={props.completions()}>{(comp, idx) => (
+        <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
               class={`px-3 py-2 cursor-pointer flex justify-between items-center ${
                 idx() === props.selectedCompletion()
@@ -71,6 +71,11 @@ 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>