import { For, Show, createEffect, createSignal, on } from "solid-js"; import type { DeckStore } from "./hooks/deckStore"; export interface CardListProps { store: DeckStore; } const PAGE_SIZE = 10; /** * 卡牌列表：左侧垂直导航，每行高度一致，按页分页 */ export function CardList(props: CardListProps) { const { store } = props; const [page, setPage] = createSignal(0); const totalPages = () => Math.max(1, Math.ceil(store.state.cards.length / PAGE_SIZE)); const pageCards = () => { const start = page() * PAGE_SIZE; return store.state.cards.slice(start, start + PAGE_SIZE); }; // 当活动卡牌变化时，自动跳转到其所在页（只响应 activeTab，避免与手动翻页互相干扰） createEffect( on( () => store.state.activeTab, (tab) => { setPage(Math.floor(tab / PAGE_SIZE)); }, ), ); return ( ); }