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:
@@ -25,6 +25,19 @@ page {
|
||||
--tk-touch-min: 48px;
|
||||
--tk-btn-primary-h: 56px;
|
||||
--tk-text-secondary: #78716C; // $tx3 — 关怀模式提升对比度
|
||||
|
||||
// ─── 统一组件库结构化 Token ───
|
||||
--tk-card-bg: #FFFFFF;
|
||||
--tk-card-padding: 24px;
|
||||
--tk-card-radius: 16px;
|
||||
--tk-gap-sm: 12px;
|
||||
--tk-gap-md: 16px;
|
||||
--tk-gap-lg: 24px;
|
||||
--tk-page-padding: 24px;
|
||||
--tk-touch-feedback-opacity: 0.85;
|
||||
--tk-tag-font-size: 12px;
|
||||
--tk-tag-padding-v: 4px;
|
||||
--tk-tag-padding-h: 12px;
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════
|
||||
@@ -48,4 +61,16 @@ page {
|
||||
--tk-touch-min: 56px;
|
||||
--tk-btn-primary-h: 64px;
|
||||
--tk-text-secondary: #5A554F; // $tx2 — 对比度提升
|
||||
|
||||
// ─── 统一组件库 — 关怀覆写 ───
|
||||
--tk-card-padding: 32px;
|
||||
--tk-card-radius: 20px;
|
||||
--tk-gap-sm: 16px;
|
||||
--tk-gap-md: 20px;
|
||||
--tk-gap-lg: 32px;
|
||||
--tk-page-padding: 32px;
|
||||
--tk-touch-feedback-opacity: 0.8;
|
||||
--tk-tag-font-size: 13px;
|
||||
--tk-tag-padding-v: 6px;
|
||||
--tk-tag-padding-h: 16px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user