feat: ai's attempt

src/components/md-commander/index.tsx

@@ -1,9 +1,12 @@
 import { customElement, noShadowDOM } from "solid-element";
-import { onMount, onCleanup } from "solid-js";
+import { onMount, onCleanup, createSignal, Show } from "solid-js";
 import { useCommander } from "./hooks";
 import { CommanderInput } from "./CommanderInput";
 import { CommanderEntries } from "./CommanderEntries";
-import type { MdCommanderProps } from "./types";
+import { TrackerView } from "./TrackerView";
+import { TabBar } from "./TabBar";
+import { AttributeEditor } from "./AttributeEditor";
+import type { MdCommanderProps, TrackerAttribute } from "./types";
 
 customElement<MdCommanderProps>(
   "md-commander",
@@ -11,7 +14,12 @@ customElement<MdCommanderProps>(
   (props, { element }) => {
     noShadowDOM();
 
-    const commander = useCommander(props.commands);
+    const commander = useCommander(props.commands, element as unknown as HTMLElement);
+    const [editingAttr, setEditingAttr] = createSignal<{
+      itemId: string;
+      attrName: string;
+      attr: TrackerAttribute;
+    } | null>(null);
 
     const handleKeyDown = (e: KeyboardEvent) => {
       if (commander.showCompletions() && commander.completions().length > 0) {
@@ -35,7 +43,11 @@ customElement<MdCommanderProps>(
           return;
         }
         if (e.key === "Escape") {
-          commander.setShowCompletions(false);
+          if (editingAttr()) {
+            setEditingAttr(null);
+          } else {
+            commander.setShowCompletions(false);
+          }
           return;
         }
       }
@@ -75,12 +87,34 @@ customElement<MdCommanderProps>(
         class={`md-commander flex flex-col border border-gray-300 rounded-lg overflow-hidden ${props.class || ""}`}
         style={{ height: heightStyle() }}
       >
-        {/* 命令执行结果 */}
-        <CommanderEntries
-          entries={commander.entries}
-          onCommandClick={(cmd) => commander.setInputValue(cmd)}
+        {/* 标签页导航 */}
+        <TabBar
+          mode={commander.viewMode}
+          onModeChange={commander.setViewMode}
         />
 
+        {/* 内容区域：历史或追踪 */}
+        <Show
+          when={commander.viewMode() === "history"}
+          fallback={
+            <TrackerView
+              items={commander.trackerItems}
+              onEditAttribute={(itemId, attrName, attr) =>
+                setEditingAttr({ itemId, attrName, attr })
+              }
+              onRemoveClass={commander.removeTrackerClass}
+              onMoveUp={(itemId) => commander.moveTrackerItem(itemId, "up")}
+              onMoveDown={(itemId) => commander.moveTrackerItem(itemId, "down")}
+              onRemove={commander.removeTrackerItem}
+            />
+          }
+        >
+          <CommanderEntries
+            entries={commander.entries}
+            onCommandClick={(cmd) => commander.setInputValue(cmd)}
+          />
+        </Show>
+
         {/* 命令输入框 */}
         <div class="relative border-t border-gray-300">
           <CommanderInput
@@ -104,6 +138,20 @@ customElement<MdCommanderProps>(
             onAcceptCompletion={commander.acceptCompletion}
           />
         </div>
+
+        {/* 属性编辑器弹窗 */}
+        <Show when={editingAttr()}>
+          <AttributeEditor
+            attribute={() => editingAttr()!.attr}
+            onUpdate={(attr) => {
+              const data = editingAttr();
+              if (data) {
+                commander.updateTrackerAttribute(data.itemId, data.attrName, attr);
+              }
+            }}
+            onClose={() => setEditingAttr(null)}
+          />
+        </Show>
       </div>
     );
   },