d758563a13
三层架构组件库： - 第 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
38 lines
993 B
TypeScript
38 lines
993 B
TypeScript
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);
|