d758563a13
三层架构组件库： - 第 1 层原子组件：PageShell/ContentCard/StatusTag/SectionTitle/LoadingCard - 第 2 层组合模式：PageHeader/SearchSection/CardList/PaginationBar - 第 3 层 Hook：useListPage（列表页通用逻辑抽象） Token 扩展：新增 --tk-card-*/--tk-gap-*/--tk-page-* 等结构化 CSS 变量， 关怀模式通过变量覆写自动生效，新组件零额外代码即获关怀支持。 设计规格：docs/superpowers/specs/2026-05-16-miniprogram-unified-components-design.md
63 lines
1.3 KiB
TypeScript
63 lines
1.3 KiB
TypeScript
import { View } from '@tarojs/components';
|
|
import { ReactNode } from 'react';
|
|
import EmptyState from '../../EmptyState';
|
|
import ErrorState from '../../ErrorState';
|
|
import LoadingCard from '../../ui/LoadingCard';
|
|
import './index.scss';
|
|
|
|
interface CardListProps<T> {
|
|
items: T[];
|
|
renderItem: (item: T, index: number) => ReactNode;
|
|
keyExtractor: (item: T) => string;
|
|
loading?: boolean;
|
|
error?: string | null;
|
|
emptyText?: string;
|
|
emptyAction?: { text: string; onPress: () => void };
|
|
gap?: 'sm' | 'md';
|
|
}
|
|
|
|
function CardList<T>({
|
|
items,
|
|
renderItem,
|
|
keyExtractor,
|
|
loading = false,
|
|
error = null,
|
|
emptyText = '暂无数据',
|
|
emptyAction,
|
|
gap = 'md',
|
|
}: CardListProps<T>) {
|
|
if (loading) {
|
|
return <LoadingCard count={3} layout="card" />;
|
|
}
|
|
|
|
if (error) {
|
|
return (
|
|
<ErrorState
|
|
text={error}
|
|
/>
|
|
);
|
|
}
|
|
|
|
if (items.length === 0) {
|
|
return (
|
|
<EmptyState
|
|
text={emptyText}
|
|
actionText={emptyAction?.text}
|
|
onAction={emptyAction?.onPress}
|
|
/>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<View className={`card-list card-list--${gap}`}>
|
|
{items.map((item, index) => (
|
|
<View key={keyExtractor(item)} className="card-list__item">
|
|
{renderItem(item, index)}
|
|
</View>
|
|
))}
|
|
</View>
|
|
);
|
|
}
|
|
|
|
export default CardList;
|