fix: details

src/components/md-commander/CommanderInput.tsx

@@ -1,4 +1,4 @@
-import { type Component, Show } from "solid-js";
+import {type Component, For, Show} from "solid-js";
 import type { CompletionItem } from "./types";
 
 export interface CommanderInputProps {
@@ -39,16 +39,16 @@ export const CommanderInput: Component<CommanderInputProps> = (props) => {
 
       {/* 自动补全下拉框 */}
       <Show when={props.showCompletions() && props.completions().length > 0}>
-        <div class="absolute z-10 w-full bg-white border border-gray-300 shadow-lg max-h-48 overflow-auto mt-1">
-          {props.completions().map((comp, idx) => (
+        <div class="absolute left-0 top-10 z-10 w-full bg-white border border-gray-300 shadow-lg max-h-48 overflow-auto mt-1">
+          <For each={props.completions()}>{(comp, idx) => (
             <div
               class={`px-3 py-2 cursor-pointer flex justify-between items-center ${
-                idx === props.selectedCompletion()
+                idx() === props.selectedCompletion()
                   ? "bg-blue-100"
                   : "hover:bg-gray-100"
               }`}
               onClick={() => {
-                props.onSelectCompletion(idx);
+                props.onSelectCompletion(idx());
                 props.onAcceptCompletion();
               }}
             >
@@ -70,7 +70,7 @@ export const CommanderInput: Component<CommanderInputProps> = (props) => {
                 <span class="text-xs text-gray-500">{comp.description}</span>
               </Show>
             </div>
-          ))}
+          )}</For>
         </div>
       </Show>
     </div>

src/components/md-commander/hooks/useCommander.ts

@@ -1,4 +1,4 @@
-import { createSignal, createMemo } from "solid-js";
+import { createSignal } from "solid-js";
 import {
   MdCommanderCommand,
   CommanderEntry,
@@ -146,7 +146,7 @@ export function getCompletions(
       .filter((cmd) => cmd.command.startsWith(parsed.command || ""))
       .map((cmd) => ({
         label: cmd.command,
-        type: "command",
+        type: "command" as "command",
         description: cmd.description,
         insertText: cmd.command,
       }));
@@ -162,7 +162,7 @@ export function getCompletions(
     const option = cmd.options[parsed.incompleteOption];
     if (option?.type === "enum" && option.values) {
       return option.values
-        .filter((v) => v.startsWith(parsed.incompleteOption))
+        .filter((v) => parsed.incompleteOption && v.startsWith(parsed.incompleteOption))
         .map((v) => ({
           label: v,
           type: "value",

src/components/md-commander/index.tsx

@@ -73,9 +73,12 @@ customElement<MdCommanderProps>(
 
     return (
       <div
-        class={`md-commander flex flex-col border border-gray-300 rounded-lg overflow-hidden ${props.class || ""}`}
+        class={`md-commander flex flex-col border border-gray-300 rounded-lg overflow-visible ${props.class || ""}`}
         style={{ height: heightStyle() }}
       >
+          {/* 命令执行结果 */}
+          <CommanderEntries entries={commander.entries} />
+
         {/* 命令输入框 */}
         <div class="relative">
           <CommanderInput
@@ -99,9 +102,6 @@ customElement<MdCommanderProps>(
             onAcceptCompletion={commander.acceptCompletion}
           />
         </div>
-
-        {/* 命令执行结果 */}
-        <CommanderEntries entries={commander.entries} />
       </div>
     );
   },