39 lines
1.1 KiB
TypeScript
39 lines
1.1 KiB
TypeScript
import { For } from "solid-js";
|
||
import type { DeckStore } from "../hooks/deckStore";
|
||
|
||
export interface DataEditorPanelProps {
|
||
activeTab: number;
|
||
cards: DeckStore["state"]["cards"];
|
||
updateCardData: DeckStore["actions"]["updateCardData"];
|
||
}
|
||
|
||
/**
|
||
* 左侧：CSV 数据编辑面板
|
||
*/
|
||
export function DataEditorPanel(props: DataEditorPanelProps) {
|
||
return (
|
||
<div class="w-64 shrink-0">
|
||
<h3 class="font-bold mb-2">卡牌数据</h3>
|
||
<div class="space-y-2 max-h-96 overflow-y-auto">
|
||
<For each={Object.keys(props.cards[props.activeTab] || {})}>
|
||
{(key) => (
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700">
|
||
{key}
|
||
</label>
|
||
<textarea
|
||
class="w-full border border-gray-300 rounded px-2 py-1 text-sm"
|
||
rows={3}
|
||
value={props.cards[props.activeTab]?.[key] || ""}
|
||
onInput={(e) =>
|
||
props.updateCardData(props.activeTab, key, e.target.value)
|
||
}
|
||
/>
|
||
</div>
|
||
)}
|
||
</For>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|