56 lines
1.8 KiB
TypeScript
56 lines
1.8 KiB
TypeScript
import { For } from 'solid-js';
|
|
import type { DeckStore } from './hooks/deckStore';
|
|
|
|
export interface DeckHeaderProps {
|
|
store: DeckStore;
|
|
}
|
|
|
|
/**
|
|
* 卡牌预览头部：编辑按钮和 Tab 选择器
|
|
*/
|
|
export function DeckHeader(props: DeckHeaderProps) {
|
|
const { store } = props;
|
|
|
|
return (
|
|
<div class="flex items-center gap-2 border-b border-gray-200 pb-2 mb-4">
|
|
{/* 编辑按钮 */}
|
|
<button
|
|
onClick={() => store.actions.setIsEditing(!store.state.isEditing)}
|
|
class={`px-3 py-1 rounded text-sm font-medium transition-colors cursor-pointer ${
|
|
store.state.isEditing && !store.state.fixed
|
|
? 'bg-blue-100 text-blue-600'
|
|
: 'bg-gray-100 text-gray-600 hover:bg-gray-200'
|
|
}`}
|
|
>
|
|
{store.state.isEditing ? '✓ 编辑中' : '✏️ 编辑'}
|
|
</button>
|
|
|
|
{/* 导出 PDF 按钮 */}
|
|
<button
|
|
onClick={() => store.actions.exportDeck()}
|
|
class="px-2 py-1 rounded text-xs font-medium transition-colors cursor-pointer bg-green-100 text-green-600 hover:bg-green-200"
|
|
>
|
|
📥 导出 PDF
|
|
</button>
|
|
|
|
{/* Tab 选择器 */}
|
|
<div class="flex gap-1 overflow-x-auto flex-1 min-w-0 flex-wrap">
|
|
<For each={store.state.cards}>
|
|
{(card, index) => (
|
|
<button
|
|
onClick={() => store.actions.setActiveTab(index())}
|
|
class={`font-medium transition-colors flex-shrink-0 min-w-[1.6em] cursor-pointer px-2 py-1 rounded ${
|
|
store.state.activeTab === index()
|
|
? 'bg-blue-100 text-blue-600 border-b-2 border-blue-600'
|
|
: 'text-gray-500 hover:text-gray-700 hover:bg-gray-100'
|
|
}`}
|
|
>
|
|
{card.label || card.name || `Card ${index() + 1}`}
|
|
</button>
|
|
)}
|
|
</For>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|