130 lines
4.1 KiB
TypeScript
130 lines
4.1 KiB
TypeScript
import { For } from 'solid-js';
|
||
import type { DeckStore } from './stores/deckStore';
|
||
|
||
export interface DataEditorPanelProps {
|
||
activeTab: number;
|
||
cards: DeckStore['state']['cards'];
|
||
updateCardData: DeckStore['actions']['updateCardData'];
|
||
}
|
||
|
||
export interface PropertiesEditorPanelProps {
|
||
store: DeckStore;
|
||
}
|
||
|
||
/**
|
||
* 左侧：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>
|
||
);
|
||
}
|
||
|
||
/**
|
||
* 右侧：卡牌属性编辑面板
|
||
*/
|
||
export function PropertiesEditorPanel(props: PropertiesEditorPanelProps) {
|
||
const { store } = props;
|
||
|
||
return (
|
||
<div class="w-64 flex-shrink-0">
|
||
<h3 class="font-bold mb-2">卡牌属性</h3>
|
||
|
||
<div class="space-y-3">
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700">尺寸 (mm)</label>
|
||
<input
|
||
type="text"
|
||
class="w-full border border-gray-300 rounded px-2 py-1 text-sm"
|
||
value={store.state.size}
|
||
onInput={(e) => store.actions.setSize(e.target.value)}
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700">网格</label>
|
||
<input
|
||
type="text"
|
||
class="w-full border border-gray-300 rounded px-2 py-1 text-sm"
|
||
value={store.state.grid}
|
||
onInput={(e) => store.actions.setGrid(e.target.value)}
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700">出血 (mm)</label>
|
||
<input
|
||
type="text"
|
||
class="w-full border border-gray-300 rounded px-2 py-1 text-sm"
|
||
value={store.state.bleed}
|
||
onInput={(e) => store.actions.setBleed(e.target.value)}
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label class="block text-sm font-medium text-gray-700">内边距 (mm)</label>
|
||
<input
|
||
type="text"
|
||
class="w-full border border-gray-300 rounded px-2 py-1 text-sm"
|
||
value={store.state.padding}
|
||
onInput={(e) => store.actions.setPadding(e.target.value)}
|
||
/>
|
||
</div>
|
||
|
||
<hr class="my-4" />
|
||
|
||
<h4 class="font-medium text-sm text-gray-700">图层</h4>
|
||
<For each={store.state.layerConfigs}>
|
||
{(layer) => (
|
||
<div class="flex items-center gap-2">
|
||
<input
|
||
type="checkbox"
|
||
checked={layer.visible}
|
||
onChange={() => store.actions.toggleLayerVisible(layer.prop)}
|
||
class="cursor-pointer"
|
||
/>
|
||
<span class="text-sm flex-1">{layer.prop}</span>
|
||
<button
|
||
onClick={() => store.actions.setEditingLayer(layer.prop)}
|
||
class={`text-xs px-2 py-0.5 rounded cursor-pointer ${
|
||
store.state.editingLayer === layer.prop
|
||
? 'bg-blue-500 text-white'
|
||
: 'bg-gray-200 text-gray-700 hover:bg-gray-300'
|
||
}`}
|
||
>
|
||
{store.state.editingLayer === layer.prop ? '✓ 框选' : '编辑位置'}
|
||
</button>
|
||
</div>
|
||
)}
|
||
</For>
|
||
|
||
<hr class="my-4" />
|
||
|
||
<button
|
||
onClick={store.actions.copyCode}
|
||
class="w-full bg-blue-600 hover:bg-blue-700 text-white px-3 py-2 rounded text-sm font-medium cursor-pointer"
|
||
>
|
||
📋 复制代码
|
||
</button>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|