refactor: impl

src/components/md-commander/index.tsx

@@ -1,24 +1,26 @@
 import { customElement, noShadowDOM } from "solid-element";
 import { onMount, onCleanup, Show, createEffect } from "solid-js";
-import { useCommander } from "./hooks";
+import { useCommander, initializeCommands } from "./hooks";
 import { CommanderInput } from "./CommanderInput";
 import { CommanderEntries } from "./CommanderEntries";
 import { TrackerView } from "./TrackerView";
 import { TabBar } from "./TabBar";
 import type { MdCommanderProps } from "./types";
-import {loadElementSrc, resolvePath} from "../utils/path";
-import {loadCommandTemplates} from "./utils/commandTemplates";
+import { loadElementSrc, resolvePath } from "../utils/path";
+import { loadCommandTemplates } from "./utils/commandTemplates";
 
 customElement<MdCommanderProps>(
   "md-commander",
   { placeholder: "", class: "", height: "", commandTemplates: "" },
   (props, { element }) => {
     noShadowDOM();
-    const {articlePath, rawSrc} = loadElementSrc(element as any);
+    const { articlePath, rawSrc } = loadElementSrc(element as any);
     const commander = useCommander(props.commands);
+
     createEffect(async () => {
-      if(!rawSrc) return;
-      await loadCommandTemplates(commander.commands, resolvePath(articlePath, rawSrc));
+      if (!rawSrc) return;
+      const commands = initializeCommands(props.commands);
+      await loadCommandTemplates(commands, resolvePath(articlePath, rawSrc));
     });
 
     const handleKeyDown = (e: KeyboardEvent) => {
@@ -48,7 +50,6 @@ customElement<MdCommanderProps>(
         }
       }
 
-      // 补全未打开时，使用上下键浏览历史
       if (e.key === "ArrowUp" && !commander.showCompletions()) {
         e.preventDefault();
         commander.navigateHistory("up");
@@ -83,25 +84,22 @@ customElement<MdCommanderProps>(
         class={`md-commander flex flex-col border border-gray-300 rounded-lg overflow-hidden ${props.class || ""}`}
         style={{ height: heightStyle() }}
       >
-        {/* 标签页导航 */}
-        <TabBar
-          mode={commander.viewMode}
-          onModeChange={commander.setViewMode}
-        />
+        <TabBar mode={commander.viewMode} onModeChange={commander.setViewMode} />
 
-        {/* 内容区域：历史或追踪 */}
         <Show
           when={commander.viewMode() === "history"}
           fallback={
             <TrackerView
               items={commander.trackerItems}
               onEditAttribute={(index, attrName, attr) =>
-                  commander.updateTrackerAttributeByIndex(index, attrName, attr)
+                commander.updateTrackerAttributeByIndex(index, attrName, attr)
               }
               onClassesChange={(index, classes) =>
                 commander.updateTrackerClassesByIndex(index, classes)
               }
-              onRemoveClass={commander.removeTrackerItemClassByIndex}
+              onRemoveClass={(index, className) =>
+                commander.removeTrackerItemClassByIndex(index, className)
+              }
               onMoveUp={(index) => commander.moveTrackerItemByIndex(index, "up")}
               onMoveDown={(index) => commander.moveTrackerItemByIndex(index, "down")}
               onRemove={(index) => commander.removeTrackerItemByIndex(index)}
@@ -114,7 +112,6 @@ customElement<MdCommanderProps>(
           />
         </Show>
 
-        {/* 命令输入框 */}
         <div class="relative border-t border-gray-300">
           <CommanderInput
             placeholder={props.placeholder}