35 lines
1.1 KiB
TypeScript
35 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 flex-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>
|
|||
|
|
);
|
|||
|
|
}
|