39 lines
1.2 KiB
TypeScript
39 lines
1.2 KiB
TypeScript
|
import { type Component, For, Show } from "solid-js";
|
||
|
|
import type { CommanderEntry } from "./types";
|
||
|
|
import { getResultClass } from "./hooks";
|
||
|
|
|
||
|
|
export interface CommanderEntriesProps {
|
||
|
|
entries: () => CommanderEntry[];
|
||
|
|
}
|
||
|
|
|
||
|
|
export const CommanderEntries: Component<CommanderEntriesProps> = (props) => {
|
||
|
|
return (
|
||
|
|
<div class="commander-entries flex-1 overflow-auto p-3 bg-white space-y-2">
|
||
|
|
<Show
|
||
|
|
when={props.entries().length > 0}
|
||
|
|
fallback={
|
||
|
|
<div class="text-gray-400 text-center py-8">暂无命令执行记录</div>
|
||
|
|
}
|
||
|
|
>
|
||
|
|
<For each={props.entries()}>
|
||
|
|
{(entry) => (
|
||
|
|
<div class="border-l-2 border-gray-300 pl-3 py-1">
|
||
|
|
<div class="flex items-center justify-between text-xs text-gray-500 mb-1">
|
||
|
|
<span class="font-mono">{entry.command}</span>
|
||
|
|
<span>
|
||
|
|
{entry.timestamp.toLocaleTimeString()}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
class={`text-sm whitespace-pre-wrap ${getResultClass(entry.result.type)}`}
|
||
|
|
>
|
||
|
|
{entry.result.message}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</For>
|
||
|
|
</Show>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|