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/SearchSection/index.tsx

@@ -0,0 +1,52 @@
+import { View, Input, Text } from '@tarojs/components';
+import SegmentTabs from '../../SegmentTabs';
+import './index.scss';
+
+interface SearchSectionProps {
+  value: string;
+  onChange: (v: string) => void;
+  onSearch?: () => void;
+  placeholder?: string;
+  filters?: { key: string; label: string }[];
+  activeFilter?: string;
+  onFilterChange?: (key: string) => void;
+}
+
+const SearchSection: React.FC<SearchSectionProps> = ({
+  value,
+  onChange,
+  onSearch,
+  placeholder = '搜索...',
+  filters,
+  activeFilter,
+  onFilterChange,
+}) => {
+  return (
+    <View className="search-section">
+      <View className="search-section__input-wrap">
+        <Text className="search-section__icon">🔍</Text>
+        <Input
+          className="search-section__input"
+          value={value}
+          onInput={(e) => onChange(e.detail.value)}
+          onConfirm={onSearch}
+          placeholder={placeholder}
+          placeholderClass="search-section__placeholder"
+          confirmType="search"
+        />
+      </View>
+      {filters && filters.length > 0 && (
+        <View className="search-section__filters">
+          <SegmentTabs
+            tabs={filters.map((f) => ({ key: f.key, label: f.label }))}
+            activeKey={activeFilter ?? filters[0]?.key ?? ''}
+            onChange={onFilterChange ?? (() => {})}
+            variant="pill"
+          />
+        </View>
+      )}
+    </View>
+  );
+};
+
+export default React.memo(SearchSection);