refactor: impl

src/components/md-commander/index.tsx

@@ -1,5 +1,5 @@
 import { customElement, noShadowDOM } from "solid-element";
-import { onMount, onCleanup, Show, createEffect, on } from "solid-js";
+import { onMount, onCleanup, Show, createResource } from "solid-js";
 import { useCommander } from "./hooks";
 import { CommanderInput } from "./CommanderInput";
 import { CommanderEntries } from "./CommanderEntries";
@@ -7,7 +7,7 @@ import { TrackerView } from "./TrackerView";
 import { TabBar } from "./TabBar";
 import type { MdCommanderProps } from "./types";
 import { loadElementSrc } from "../utils/path";
-import { initializeCommands, loadCommandTemplatesFromCSV } from "./stores";
+import { initializeCommands, loadCommandTemplatesFromCSV, getCommands, getCommandsLoading, getCommandsError } from "./stores";
 
 customElement<MdCommanderProps>(
   "md-commander",
@@ -16,18 +16,28 @@ customElement<MdCommanderProps>(
     noShadowDOM();
     const { articlePath, rawSrc } = loadElementSrc(element as any);
 
-    // 初始化命令并注册到 store
+    // 初始化命令
     const commands = initializeCommands(props.commands);
     const commander = useCommander(commands);
 
-    // 加载 CSV 模板
-      createEffect( async () => {
-        if (!rawSrc || !rawSrc) return;
-        await loadCommandTemplatesFromCSV(rawSrc, articlePath);
-        // 更新 commander 中的命令（从 store 获取）
-        const {getCommands} = await import("./stores/commandsStore");
-        commander.setCommands(getCommands());
-      });
+    // 使用 createResource 加载 CSV 模板
+    const [templateData] = createResource(
+      () => (rawSrc ? { path: rawSrc, articlePath } : null),
+      async (paths) => {
+        await loadCommandTemplatesFromCSV(paths.path, paths.articlePath);
+        return getCommands();
+      }
+    );
+
+    // 当模板加载完成后更新 commander 中的命令
+    createResource(
+      () => templateData(),
+      (loadedCommands) => {
+        if (loadedCommands) {
+          commander.setCommands(loadedCommands);
+        }
+      }
+    );
 
     const handleKeyDown = (e: KeyboardEvent) => {
       if (commander.showCompletions() && commander.completions().length > 0) {
@@ -114,6 +124,8 @@ customElement<MdCommanderProps>(
         >
           <CommanderEntries
             entries={commander.entries}
+            loading={getCommandsLoading()}
+            error={getCommandsError()}
             onCommandClick={(cmd) => commander.setInputValue(cmd)}
           />
         </Show>