hypercross
/
ttrpg-tools
2
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: styling

This commit is contained in:
hypercross 2026-03-01 14:21:04 +08:00
parent bda201ae81
commit fa1c6d19e9
2 changed files with 27 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/md-commander/TabBar.tsx
View File

@ -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"

49
src/components/md-commander/index.tsx
View File

@ -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