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
This commit is contained in:
iven
2026-05-16 00:47:39 +08:00
parent 3fb5a77ac0
commit d758563a13
21 changed files with 1138 additions and 0 deletions

View File

@@ -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;
}
}