From fa1c6d19e9a50cd027c98768071b2077bf9f0966 Mon Sep 17 00:00:00 2001
From: hypercross <helios.tnak@gmail.com>
Date: Sun, 1 Mar 2026 14:21:04 +0800
Subject: [PATCH] refactor: styling

---
 src/components/md-commander/TabBar.tsx |  2 +-
 src/components/md-commander/index.tsx  | 49 ++++++++++++++------------
 2 files changed, 27 insertions(+), 24 deletions(-)

diff --git a/src/components/md-commander/TabBar.tsx b/src/components/md-commander/TabBar.tsx
index 40ba0a8..451cc0a 100644
--- a/src/components/md-commander/TabBar.tsx
+++ b/src/components/md-commander/TabBar.tsx
@@ -8,7 +8,7 @@ export interface TabBarProps {
 
 export const TabBar: Component<TabBarProps> = (props) => {
   return (
-    <div class="flex border-b border-gray-300 bg-gray-50">
+    <div class="flex lg:hidden border-b border-gray-300 bg-gray-50">
       <button
         class={`flex-1 px-4 py-2 text-sm font-medium transition-colors ${
           props.mode() === "history"
diff --git a/src/components/md-commander/index.tsx b/src/components/md-commander/index.tsx
index c4c6e4e..96fa1a4 100644
--- a/src/components/md-commander/index.tsx
+++ b/src/components/md-commander/index.tsx
@@ -1,5 +1,5 @@
 import { customElement, noShadowDOM } from "solid-element";
-import { onMount, onCleanup, Show, createResource } from "solid-js";
+import { onMount, onCleanup, createResource } from "solid-js";
 import { useCommander } from "./hooks";
 import { CommanderInput } from "./CommanderInput";
 import { CommanderEntries } from "./CommanderEntries";
@@ -97,38 +97,41 @@ customElement<MdCommanderProps>(
 
     return (
       <div
-        class={`md-commander flex flex-col border border-gray-300 rounded-lg overflow-hidden ${props.class || ""}`}
+        class={`w-full flex flex-col border border-gray-300 rounded-lg overflow-hidden mb-4 ${props.class || ""}`}
         style={{ height: heightStyle() }}
       >
         <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)
-              }
-              onClassesChange={(index, classes) =>
-                commander.updateTrackerClassesByIndex(index, classes)
-              }
-              onRemoveClass={(index, className) =>
-                commander.removeTrackerItemClassByIndex(index, className)
-              }
-              onMoveUp={(index) => commander.moveTrackerItemByIndex(index, "up")}
-              onMoveDown={(index) => commander.moveTrackerItemByIndex(index, "down")}
-              onRemove={(index) => commander.removeTrackerItemByIndex(index)}
-            />
-          }
-        >
+        <div class="flex flex-1 flex-col lg:flex-row">
+        {/* 历史视图 */}
+        <div class={`flex-1 flex-col min-h-0 lg:flex lg:w-1/2 lg:border-r lg:border-gray-300 ${commander.viewMode() !== "history" ? "hidden" : ""}`}>
           <CommanderEntries
             entries={commander.entries}
             loading={getCommandsLoading()}
             error={getCommandsError()}
             onCommandClick={(cmd) => commander.setInputValue(cmd)}
           />
-        </Show>
+        </div>
+
+        {/* 追踪视图 */}
+        <div class={`flex-1 flex-col min-h-0 lg:flex lg:w-1/2 lg:border-r lg:border-gray-300 ${commander.viewMode() !== "tracker" ? "hidden" : ""}`}>
+          <TrackerView
+            items={commander.trackerItems}
+            onEditAttribute={(index, attrName, attr) =>
+              commander.updateTrackerAttributeByIndex(index, attrName, attr)
+            }
+            onClassesChange={(index, classes) =>
+              commander.updateTrackerClassesByIndex(index, classes)
+            }
+            onRemoveClass={(index, className) =>
+              commander.removeTrackerItemClassByIndex(index, className)
+            }
+            onMoveUp={(index) => commander.moveTrackerItemByIndex(index, "up")}
+            onMoveDown={(index) => commander.moveTrackerItemByIndex(index, "down")}
+            onRemove={(index) => commander.removeTrackerItemByIndex(index)}
+          />
+        </div>
+        </div>
 
         <div class="relative border-t border-gray-300">
           <CommanderInput