feat(mp): 小程序统一组件库 Phase 1 — Token 扩展 + 10 组件 + useListPage Hook

三层架构组件库：
- 第 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

apps/miniprogram/src/components/patterns/CardList/index.tsx

@@ -0,0 +1,62 @@
+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;