70 lines
2.1 KiB
TypeScript
70 lines
2.1 KiB
TypeScript
import { type Component, For, Show, createEffect, on } from "solid-js";
|
|
import type { CommanderEntry } from "./types";
|
|
import { getResultClass } from "./hooks";
|
|
|
|
export interface CommanderEntriesProps {
|
|
entries: () => CommanderEntry[];
|
|
onCommandClick?: (command: string) => void;
|
|
}
|
|
|
|
export const CommanderEntries: Component<CommanderEntriesProps> = (props) => {
|
|
let containerRef: HTMLDivElement | undefined;
|
|
|
|
// 当 entries 变化时自动滚动到底部
|
|
createEffect(
|
|
on(
|
|
() => props.entries().length,
|
|
() => {
|
|
if (containerRef) {
|
|
containerRef.scrollTop = containerRef.scrollHeight;
|
|
}
|
|
},
|
|
),
|
|
);
|
|
|
|
const handleCommandClick = (command: string) => {
|
|
if (props.onCommandClick) {
|
|
props.onCommandClick(command);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div
|
|
ref={containerRef}
|
|
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 cursor-pointer hover:text-blue-600 hover:underline"
|
|
onClick={() => handleCommandClick(entry.command)}
|
|
title="点击复制到输入框"
|
|
>
|
|
{entry.command}
|
|
</span>
|
|
<span>
|
|
{entry.timestamp.toLocaleTimeString()}
|
|
</span>
|
|
</div>
|
|
<div
|
|
class={`text-sm whitespace-pre-wrap ${getResultClass(entry.result.type)}`}
|
|
innerHTML={entry.result.isHtml ? entry.result.message : undefined}
|
|
>
|
|
{!entry.result.isHtml && entry.result.message}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</For>
|
|
</Show>
|
|
</div>
|
|
);
|
|
};
|