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) => { export const TabBar: Component<TabBarProps> = (props) => {
return ( 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 <button
class={`flex-1 px-4 py-2 text-sm font-medium transition-colors ${ class={`flex-1 px-4 py-2 text-sm font-medium transition-colors ${
props.mode() === "history" props.mode() === "history"

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

@ -1,5 +1,5 @@
import { customElement, noShadowDOM } from "solid-element"; 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 { useCommander } from "./hooks";
import { CommanderInput } from "./CommanderInput"; import { CommanderInput } from "./CommanderInput";
import { CommanderEntries } from "./CommanderEntries"; import { CommanderEntries } from "./CommanderEntries";
@ -97,14 +97,24 @@ customElement<MdCommanderProps>(
return ( return (
<div <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() }} style={{ height: heightStyle() }}
> >
<TabBar mode={commander.viewMode} onModeChange={commander.setViewMode} /> <TabBar mode={commander.viewMode} onModeChange={commander.setViewMode} />
<Show <div class="flex flex-1 flex-col lg:flex-row">
when={commander.viewMode() === "history"} {/* 历史视图 */}
fallback={ <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)}
/>
</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 <TrackerView
items={commander.trackerItems} items={commander.trackerItems}
onEditAttribute={(index, attrName, attr) => onEditAttribute={(index, attrName, attr) =>
@ -120,15 +130,8 @@ customElement<MdCommanderProps>(
onMoveDown={(index) => commander.moveTrackerItemByIndex(index, "down")} onMoveDown={(index) => commander.moveTrackerItemByIndex(index, "down")}
onRemove={(index) => commander.removeTrackerItemByIndex(index)} onRemove={(index) => commander.removeTrackerItemByIndex(index)}
/> />
} </div>
> </div>
<CommanderEntries
entries={commander.entries}
loading={getCommandsLoading()}
error={getCommandsError()}
onCommandClick={(cmd) => commander.setInputValue(cmd)}
/>
</Show>
<div class="relative border-t border-gray-300"> <div class="relative border-t border-gray-300">
<CommanderInput <CommanderInput