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:
37
apps/miniprogram/src/components/ui/SectionTitle/index.tsx
Normal file
37
apps/miniprogram/src/components/ui/SectionTitle/index.tsx
Normal file
@@ -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);
|
||||
Reference in New Issue
Block a user