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/ui/SectionTitle/index.scss

@@ -0,0 +1,51 @@
+@import '../../styles/variables';
+
+.section-title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--tk-gap-md);
+
+  &__left {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+
+  &__bar {
+    width: 3px;
+    height: 20px;
+    background: $pri;
+    border-radius: 2px;
+    flex-shrink: 0;
+  }
+
+  &__icon {
+    flex-shrink: 0;
+  }
+
+  &__text-wrap {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__text {
+    font-size: var(--tk-font-h2);
+    font-weight: 600;
+    color: $tx;
+  }
+
+  &__subtitle {
+    font-size: var(--tk-font-body-sm);
+    color: $tx3;
+    margin-top: 2px;
+  }
+
+  &__action {
+    font-size: var(--tk-font-body-sm);
+    color: $pri;
+    min-height: var(--tk-touch-min);
+    display: flex;
+    align-items: center;
+  }
+}

apps/miniprogram/src/components/ui/SectionTitle/index.tsx

@@ -0,0 +1,37 @@
+import { View, Text } from '@tarojs/components';
+import { ReactNode } from 'react';
+import './index.scss';
+
+interface SectionTitleProps {
+  title: string;
+  subtitle?: string;
+  action?: { text: string; onPress: () => void };
+  icon?: ReactNode;
+}
+
+const SectionTitle: React.FC<SectionTitleProps> = ({
+  title,
+  subtitle,
+  action,
+  icon,
+}) => {
+  return (
+    <View className="section-title">
+      <View className="section-title__left">
+        <View className="section-title__bar" />
+        {icon && <View className="section-title__icon">{icon}</View>}
+        <View className="section-title__text-wrap">
+          <Text className="section-title__text">{title}</Text>
+          {subtitle && <Text className="section-title__subtitle">{subtitle}</Text>}
+        </View>
+      </View>
+      {action && (
+        <Text className="section-title__action" onClick={action.onPress}>
+          {action.text}
+        </Text>
+      )}
+    </View>
+  );
+};
+
+export default React.memo(SectionTitle);